*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#11110f;color:#f7f3e9;font-family:Manrope,Arial,sans-serif}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.shell{width:min(1380px,calc(100% - 64px));margin:auto}.header{position:sticky;top:0;z-index:50;background:rgba(17,17,15,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(196,163,102,.16)}.header__row{height:92px;display:flex;align-items:center;gap:38px}.logo{width:160px;flex:none}.logo img{width:100%;height:70px;object-fit:contain;object-position:left center}.nav{margin-left:auto;display:flex;gap:28px;font-size:14px}.nav a{opacity:.82}.nav a:hover{color:#d7b977;opacity:1}.header__actions{display:flex;align-items:center;gap:18px}.phone{font-size:14px;white-space:nowrap}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 22px;font-weight:700;font-size:14px;transition:.25s;border:1px solid transparent}.button--gold{background:#c7a461;color:#15130f}.button--gold:hover{background:#e0c689;transform:translateY(-1px)}.button--ghost{border-color:rgba(255,255,255,.2);color:#fff}.button--ghost:hover{border-color:#c7a461;color:#dec181}.button--large{padding:17px 26px}.burger{display:none;background:none;border:0;width:42px;height:42px}.burger span{display:block;height:2px;background:#d4b675;margin:7px}.hero{padding:64px 0 88px;min-height:760px;display:flex;align-items:center;background:radial-gradient(circle at 65% 20%,#29271f 0,#11110f 38%)}.hero__grid{display:grid;grid-template-columns:1.03fr .97fr;gap:58px;align-items:center}.eyebrow{font-size:12px;letter-spacing:.22em;color:#c7a461;font-weight:700}.eyebrow--dark{color:#8b6a31}.hero h1,.section h2,.story h2,.appointment h2,.faq h2{font-family:"Playfair Display",serif;font-weight:600;line-height:.98;margin:20px 0 26px}.hero h1{font-size:clamp(56px,6.2vw,104px);letter-spacing:-.04em}.hero h1 em{color:#c9aa70;font-weight:500}.lead{font-size:19px;line-height:1.6;max-width:670px;color:#c8c3b7}.hero__buttons{display:flex;gap:12px;margin-top:34px}.hero__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:64px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}.hero__meta strong{display:block;font-size:24px;color:#d2b477}.hero__meta span{font-size:12px;color:#9f9a8e}.hero__visual{position:relative}.hero__image-wrap{border-radius:180px 180px 28px 28px;overflow:hidden;height:660px;border:1px solid rgba(213,184,124,.25)}.hero__image-wrap img{width:100%;height:100%;object-fit:cover}.hero__float{position:absolute;background:rgba(20,19,16,.86);border:1px solid rgba(214,181,113,.25);backdrop-filter:blur(12px);padding:15px 19px;border-radius:14px;font-size:13px}.hero__float--top{right:-18px;top:72px}.hero__float--bottom{left:-28px;bottom:64px}.hero__float span{color:#d9b46b}.trust{background:#181713;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:70px 0}.trust__grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px}.trust__quote{font-family:"Playfair Display",serif;font-size:34px;line-height:1.25;margin:0;color:#e8dcc5}.trust__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.trust__facts span{color:#9c7a3e;font-size:12px}.trust__facts b{display:block;font-size:16px;margin:12px 0}.trust__facts p{margin:0;color:#999488;font-size:13px;line-height:1.6}.section{padding:120px 0}.section--cream{background:#f2eee6;color:#171610}.section--dark{background:#11110f;color:#f5f0e5}.section-head{display:grid;grid-template-columns:1fr .68fr;gap:80px;align-items:end;margin-bottom:58px}.section-head h2,.story h2,.price-intro h2,.process h2{font-family:"Playfair Display",serif;font-size:clamp(45px,5vw,78px);letter-spacing:-.035em;line-height:1.02;margin:16px 0 0}.section-head p{font-size:16px;line-height:1.7;color:#625e56;margin:0}.section-head--dark p{color:#aaa397}.services{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:340px;gap:16px}.service{position:relative;overflow:hidden;border-radius:24px;background:#222}.service--wide{grid-column:span 2}.service--tall{grid-row:span 2}.service img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.service:hover img{transform:scale(1.04)}.service__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.86),rgba(8,8,8,.05) 64%)}.service__content{position:absolute;left:24px;right:24px;bottom:24px;color:white}.service__content span{font-size:11px;color:#d7ba79}.service__content h3{font-family:"Playfair Display",serif;font-size:29px;margin:8px 0}.service__content p{max-width:420px;font-size:13px;color:#ddd5c8;line-height:1.45;margin:0 0 10px}.service__content strong{font-size:13px;color:#e2c37c}.story{background:#b99a60;color:#17130d}.story__grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.story__left .eyebrow{color:#4b3a1d}.story__right{padding-top:48px}.story__big{font-family:"Playfair Display",serif;font-size:32px;line-height:1.3}.story__right p:not(.story__big){line-height:1.8;max-width:650px}.text-link{display:inline-block;margin-top:24px;font-weight:700;border-bottom:1px solid #17130d;padding-bottom:4px}.doctors{display:grid;grid-template-columns:1fr 1fr;gap:18px}.doctor{background:#1a1915;border:1px solid rgba(255,255,255,.08);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:.86fr 1.14fr;min-height:520px}.doctor__photo{background:#e9e4da}.doctor__photo img{width:100%;height:100%;object-fit:cover;object-position:center top;image-rendering:auto}.doctor__info{padding:46px;display:flex;flex-direction:column;justify-content:flex-end}.doctor__info span{font-size:11px;letter-spacing:.18em;color:#b99758}.doctor__info h3{font-family:"Playfair Display",serif;font-size:38px;line-height:1.07;margin:15px 0}.doctor__info p{color:#aaa397;line-height:1.6}.doctor__info a{margin-top:18px;color:#d7b774;font-weight:700}.price-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.price-intro h2{margin-top:16px}.price-intro p{color:#6b665c;line-height:1.7;max-width:460px}.price-list{border-top:1px solid #bfb8aa}.price-list div{display:flex;justify-content:space-between;gap:30px;padding:22px 0;border-bottom:1px solid #cfc8bb}.price-list span{font-size:17px}.price-list b{color:#7e612e;white-space:nowrap}.process{background:#fff;color:#171610}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:56px}.steps div{padding:30px;border:1px solid #ddd7cc;border-radius:20px;min-height:220px}.steps span{color:#967437;font-size:12px}.steps h3{font-size:22px;margin:44px 0 10px}.steps p{font-size:14px;color:#69645b;line-height:1.6}.faq__grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:90px}.faq h2{font-size:68px}.muted{color:#999386;line-height:1.6}.accordion details{border-top:1px solid rgba(255,255,255,.14);padding:25px 0}.accordion details:last-child{border-bottom:1px solid rgba(255,255,255,.14)}.accordion summary{cursor:pointer;display:flex;justify-content:space-between;font-size:18px;list-style:none}.accordion summary i{font-style:normal;color:#c3a05c}.accordion details p{color:#aaa397;line-height:1.7;max-width:800px}.appointment{background:#a8874d;padding:90px 0}.appointment__box{display:flex;align-items:center;justify-content:space-between;gap:50px}.appointment h2{font-size:58px;color:#16130e;margin:10px 0}.appointment p{color:#3f3422}.appointment .eyebrow{color:#46371f}.appointment__actions{display:flex;gap:12px}.contacts{background:#0a0a09;padding:80px 0 110px}.contacts__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:55px}.contacts__brand img{width:220px}.contacts span{font-size:10px;letter-spacing:.18em;color:#8b774e}.contacts p{line-height:1.6;color:#d6d0c5}.legal{display:flex;justify-content:space-between;margin-top:80px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);color:#716d64;font-size:11px}.mobile-cta{display:none}
@media(max-width:1100px){.nav{display:none}.phone{display:none}.burger{display:block}.header.menu-open .nav{position:absolute;display:flex;flex-direction:column;top:92px;left:0;right:0;background:#11110f;padding:30px 32px;border-top:1px solid rgba(255,255,255,.08)}.hero__grid{grid-template-columns:1fr}.hero__visual{max-width:760px}.hero__image-wrap{height:580px}.services{grid-template-columns:repeat(2,1fr)}.service--wide{grid-column:span 2}.trust__grid,.story__grid,.price-grid,.faq__grid{grid-template-columns:1fr}.trust__facts{margin-top:10px}.doctors{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr)}.contacts__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.shell{width:min(100% - 32px,1380px)}.header__row{height:74px}.logo{width:118px}.logo img{height:55px}.header__actions .button{display:none}.hero{padding:42px 0 66px;min-height:auto}.hero h1{font-size:48px}.lead{font-size:16px}.hero__buttons{flex-direction:column;align-items:stretch}.hero__meta{grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:42px}.hero__meta strong{font-size:19px}.hero__meta span{font-size:10px}.hero__image-wrap{height:440px;border-radius:100px 100px 20px 20px}.hero__float--top{right:8px}.hero__float--bottom{left:8px}.trust{padding:54px 0}.trust__quote{font-size:28px}.trust__facts{grid-template-columns:1fr}.section{padding:78px 0}.section-head{grid-template-columns:1fr;gap:22px;margin-bottom:36px}.section-head h2,.story h2,.price-intro h2,.process h2{font-size:43px}.services{grid-template-columns:1fr;grid-auto-rows:340px}.service--wide{grid-column:auto}.service--tall{grid-row:auto}.story__right{padding-top:0}.story__big{font-size:26px}.doctor{grid-template-columns:1fr;min-height:0}.doctor__photo{height:370px}.doctor__info{padding:28px}.doctor__info h3{font-size:31px}.steps{grid-template-columns:1fr}.faq h2{font-size:48px}.appointment__box{align-items:flex-start;flex-direction:column}.appointment h2{font-size:44px}.appointment__actions{width:100%;flex-direction:column}.contacts__grid{grid-template-columns:1fr}.legal{flex-direction:column;gap:10px}.mobile-cta{position:fixed;bottom:12px;left:12px;right:12px;z-index:60;display:grid;grid-template-columns:1fr 1fr;background:#161511;border:1px solid rgba(205,171,102,.3);border-radius:16px;padding:7px;box-shadow:0 15px 40px rgba(0,0,0,.35)}.mobile-cta a{padding:13px;text-align:center;font-size:13px;font-weight:700}.mobile-cta a:last-child{background:#c7a461;color:#15130f;border-radius:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* =========================================================
MOBILE UX v2 + NEW TYPOGRAPHY
Onest — интерфейс / Prata — премиальные заголовки
========================================================= */
body{font-family:"Onest",Arial,sans-serif}
.hero h1,.section h2,.story h2,.appointment h2,.faq h2,
.section-head h2,.price-intro h2,.process h2,
.service__content h3,.doctor__info h3,.trust__quote,.story__big{
font-family:"Prata",Georgia,serif;
font-weight:400;
}
.hero h1 em{font-weight:400}
button,input,textarea,select{font:inherit}
/* планшеты */
@media (max-width: 900px){
.shell{width:min(100% - 40px,1380px)}
.hero{padding-top:46px}
.hero__grid{gap:38px}
.hero__copy{max-width:760px}
.hero h1{font-size:clamp(52px,9vw,76px);line-height:1.04}
.hero__visual{width:100%}
.hero__image-wrap{height:min(66vw,570px)}
.trust__grid{gap:42px}
.section{padding:90px 0}
.section-head{gap:30px}
.doctor{min-height:460px}
}
/* телефоны */
@media (max-width: 700px){
body{padding-bottom:82px;overflow-x:hidden}
.shell{width:calc(100% - 28px)}
.header{background:rgba(14,14,12,.96)}
.header__row{height:68px;gap:10px}
.logo{width:108px}
.logo img{height:52px}
.burger{width:44px;height:44px;margin-left:auto;padding:8px}
.burger span{width:24px;margin:6px auto}
.header.menu-open .nav{
top:68px;padding:18px 14px 26px;gap:0;
border-bottom:1px solid rgba(199,164,97,.22)
}
.header.menu-open .nav a{
font-size:18px;padding:16px 6px;
border-bottom:1px solid rgba(255,255,255,.08)
}
.hero{
padding:34px 0 58px;
background:
radial-gradient(circle at 80% 18%,#29271f 0,transparent 35%),
#11110f;
}
.hero__grid{gap:34px}
.eyebrow{font-size:10px;letter-spacing:.18em}
.hero h1{
font-size:clamp(39px,11.4vw,54px);
line-height:1.08;
letter-spacing:-.035em;
margin:16px 0 20px;
}
.hero h1 br{display:none}
.lead{font-size:15px;line-height:1.62;margin:0}
.hero__buttons{margin-top:26px;gap:9px}
.button--large{min-height:52px;padding:15px 20px;font-size:14px}
.hero__meta{
margin-top:34px;padding-top:22px;
grid-template-columns:repeat(3,minmax(0,1fr));
}
.hero__meta div{min-width:0}
.hero__meta strong{font-size:17px;line-height:1.15}
.hero__meta span{display:block;margin-top:5px;line-height:1.35}
.hero__visual{margin-top:0}
.hero__image-wrap{
height:112vw;max-height:510px;min-height:390px;
border-radius:72px 72px 20px 20px;
}
.hero__float{font-size:11px;padding:11px 13px;border-radius:11px}
.hero__float--top{top:28px;right:8px}
.hero__float--bottom{bottom:25px;left:8px}
.trust{padding:48px 0}
.trust__grid{gap:30px}
.trust__quote{font-size:25px;line-height:1.38}
.trust__facts{gap:0}
.trust__facts>div{padding:20px 0;border-top:1px solid rgba(255,255,255,.09)}
.trust__facts b{font-size:15px}
.trust__facts p{font-size:13px}
.section{padding:68px 0}
.section-head{margin-bottom:30px}
.section-head h2,.story h2,.price-intro h2,.process h2,.faq h2{
font-size:clamp(36px,10.4vw,47px);
line-height:1.12;letter-spacing:-.03em
}
.section-head h2 br,.process h2 br{display:none}
.section-head p{font-size:14px;line-height:1.65}
/* На телефоне услуги — компактные широкие карточки, все 8 */
.services{display:flex;flex-direction:column;gap:10px}
.service,.service--wide,.service--tall{
width:100%;height:255px;min-height:255px;
grid-column:auto;grid-row:auto;border-radius:18px
}
.service__content{left:18px;right:18px;bottom:17px}
.service__content h3{font-size:25px;line-height:1.15;margin:6px 0}
.service__content p{font-size:12px;line-height:1.42;margin-bottom:7px}
.service__content strong{font-size:12px}
.story__grid{gap:22px}
.story__right{padding:0}
.story__big{font-size:23px;line-height:1.42}
.story__right p:not(.story__big){font-size:14px;line-height:1.7}
.doctors{gap:12px}
.doctor{display:block;border-radius:20px}
.doctor__photo{height:108vw;max-height:480px;min-height:360px}
.doctor__photo img{object-position:center top}
.doctor__info{padding:24px 20px 27px}
.doctor__info h3{font-size:29px;line-height:1.17;margin:10px 0}
.doctor__info p{font-size:13px;margin:0}
.doctor__info a{font-size:13px}
.price-grid{gap:34px}
.price-intro p{font-size:14px}
.price-list div{padding:17px 0;align-items:flex-start}
.price-list span{font-size:14px;line-height:1.35;max-width:60%}
.price-list b{font-size:13px;text-align:right}
.steps{gap:9px;margin-top:34px}
.steps div{min-height:0;padding:22px 20px;border-radius:16px}
.steps h3{font-size:19px;margin:24px 0 7px}
.steps p{margin:0;font-size:13px}
.faq__grid{gap:30px}
.accordion details{padding:20px 0}
.accordion summary{font-size:15px;line-height:1.45;gap:15px}
.accordion details p{font-size:13px}
.appointment{padding:60px 0}
.appointment__box{gap:26px}
.appointment h2{font-size:40px;line-height:1.12}
.appointment p{font-size:14px;line-height:1.6}
.appointment__actions{gap:8px}
.contacts{padding:58px 0 36px}
.contacts__grid{gap:30px}
.contacts__brand img{width:175px}
.contacts p{font-size:14px;margin-top:8px}
.legal{margin-top:45px;font-size:10px;padding-bottom:20px}
.mobile-cta{
bottom:max(8px,env(safe-area-inset-bottom));
left:8px;right:8px;padding:6px;border-radius:15px;
}
.mobile-cta a{min-height:46px;display:flex;align-items:center;justify-content:center}
}
/* маленькие телефоны */
@media (max-width: 390px){
.shell{width:calc(100% - 24px)}
.hero h1{font-size:38px}
.hero__meta strong{font-size:15px}
.hero__meta span{font-size:9px}
.service{height:235px;min-height:235px}
.service__content h3{font-size:23px}
.doctor__info h3{font-size:27px}
}
/* =========================================================
NOVASTOM PREMIUM CTA + FLOATING CONTACT
========================================================= */
/* ---------- ЛОГОТИП ---------- */
.logo{
width:auto !important;
flex:none;
}
.logo img{
display:block;
width:auto !important;
height:62px !important;
object-fit:contain !important;
object-position:left center;
filter:
drop-shadow(0 3px 14px rgba(199,164,97,.10));
}
.contacts__brand img{
width:190px !important;
height:auto !important;
object-fit:contain;
background:transparent !important;
filter:
drop-shadow(0 5px 22px rgba(199,164,97,.08));
}
/* ---------- PREMIUM BUTTON SYSTEM ---------- */
.button{
position:relative;
isolation:isolate;
overflow:hidden;
min-height:48px;
transition:
transform .32s cubic-bezier(.2,.8,.2,1),
box-shadow .32s ease,
background .32s ease,
color .32s ease,
border-color .32s ease;
}
.button::before{
content:"";
position:absolute;
top:-120%;
left:-45%;
width:38%;
height:340%;
transform:rotate(22deg);
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
rgba(255,255,255,.52),
rgba(255,255,255,.08),
transparent
);
pointer-events:none;
animation:novastom-button-shine 5.5s ease-in-out infinite;
z-index:-1;
}
.button--gold{
color:#17130d !important;
background:
linear-gradient(
135deg,
#a98243 0%,
#d7b875 42%,
#f0d69a 58%,
#b58d4a 100%
) !important;
border:1px solid rgba(255,228,169,.35) !important;
box-shadow:
0 10px 28px rgba(151,111,48,.16),
inset 0 1px 0 rgba(255,255,255,.38);
}
.button--gold:hover{
transform:translateY(-3px);
box-shadow:
0 16px 38px rgba(164,122,52,.27),
0 4px 10px rgba(0,0,0,.16),
inset 0 1px 0 rgba(255,255,255,.5);
}
.button--gold:active{
transform:translateY(-1px) scale(.985);
}
.button--ghost{
background:
linear-gradient(
180deg,
rgba(255,255,255,.045),
rgba(255,255,255,.015)
);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border-color:rgba(222,193,129,.25) !important;
}
.button--ghost:hover{
transform:translateY(-3px);
border-color:rgba(222,193,129,.66) !important;
background:
linear-gradient(
180deg,
rgba(199,164,97,.14),
rgba(199,164,97,.05)
);
box-shadow:
0 14px 32px rgba(0,0,0,.18);
}
@keyframes novastom-button-shine{
0%, 58%{
left:-55%;
opacity:0;
}
64%{
opacity:.7;
}
78%{
left:130%;
opacity:0;
}
100%{
left:130%;
opacity:0;
}
}
/* =========================================================
FLOATING CONTACT WIDGET
========================================================= */
.mobile-cta{
display:none !important;
}
.contact-fab{
position:fixed;
right:24px;
bottom:24px;
z-index:999;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:12px;
}
/* Главная круглая трубка */
.contact-fab__button{
position:relative;
width:64px;
height:64px;
padding:0;
display:grid;
place-items:center;
border:1px solid rgba(255,224,164,.35);
border-radius:50%;
cursor:pointer;
color:#17130d;
background:
linear-gradient(
135deg,
#9e773d 0%,
#d7b875 42%,
#f3dca3 58%,
#a57b3e 100%
);
box-shadow:
0 10px 35px rgba(0,0,0,.33),
0 0 0 0 rgba(211,174,103,.32),
inset 0 1px 1px rgba(255,255,255,.5);
transition:
transform .28s cubic-bezier(.2,.8,.2,1),
box-shadow .28s ease;
animation:
novastom-fab-float 4s ease-in-out infinite,
novastom-fab-glow 2.7s ease-out infinite;
}
.contact-fab__button:hover{
transform:
translateY(-4px)
scale(1.05);
box-shadow:
0 17px 42px rgba(0,0,0,.4),
0 0 35px rgba(211,174,103,.22),
inset 0 1px 1px rgba(255,255,255,.55);
}
.contact-fab__button svg{
width:27px;
height:27px;
fill:currentColor;
position:relative;
z-index:2;
transition:transform .3s ease;
}
.contact-fab.open .contact-fab__button svg{
transform:rotate(-18deg);
}
@keyframes novastom-fab-float{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-4px);
}
}
@keyframes novastom-fab-glow{
0%{
box-shadow:
0 10px 35px rgba(0,0,0,.33),
0 0 0 0 rgba(211,174,103,.42);
}
65%{
box-shadow:
0 10px 35px rgba(0,0,0,.33),
0 0 0 17px rgba(211,174,103,0);
}
100%{
box-shadow:
0 10px 35px rgba(0,0,0,.33),
0 0 0 0 rgba(211,174,103,0);
}
}
/* ---------- раскрывающаяся карточка ---------- */
.contact-fab__menu{
width:310px;
padding:8px;
border-radius:22px;
background:
linear-gradient(
145deg,
rgba(28,27,23,.97),
rgba(12,12,11,.98)
);
border:
1px solid rgba(207,171,99,.24);
box-shadow:
0 22px 65px rgba(0,0,0,.48);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:
translateY(18px)
scale(.94);
transform-origin:
right bottom;
transition:
opacity .25s ease,
transform .33s cubic-bezier(.2,.85,.2,1),
visibility .25s;
}
.contact-fab.open .contact-fab__menu{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:
translateY(0)
scale(1);
}
.contact-fab__item{
display:flex;
align-items:center;
gap:14px;
padding:14px;
border-radius:16px;
transition:
background .25s ease,
transform .25s ease;
}
.contact-fab__item:hover{
background:
rgba(199,164,97,.09);
transform:
translateX(-3px);
}
.contact-fab__item + .contact-fab__item{
border-top:
1px solid rgba(255,255,255,.055);
}
.contact-fab__item-icon{
width:43px;
height:43px;
flex:none;
display:grid;
place-items:center;
border-radius:50%;
color:#1b160f;
font-size:18px;
font-weight:700;
background:
linear-gradient(
135deg,
#ad8748,
#e0c27f
);
}
.contact-fab__item strong{
display:block;
color:#f5efe3;
font-size:14px;
font-weight:600;
}
.contact-fab__item small{
display:block;
margin-top:3px;
color:#918a7f;
font-size:11px;
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:700px){
.logo img{
height:52px !important;
}
.contact-fab{
right:
max(
14px,
env(safe-area-inset-right)
);
bottom:
max(
16px,
env(safe-area-inset-bottom)
);
}
.contact-fab__button{
width:58px;
height:58px;
}
.contact-fab__button svg{
width:25px;
height:25px;
}
.contact-fab__menu{
width:
min(
310px,
calc(100vw - 28px)
);
}
body{
padding-bottom:0 !important;
}
}
@media(prefers-reduced-motion:reduce){
.contact-fab__button,
.button::before{
animation:none !important;
}
}
/* ===== NOVASTOM FAB FIX v2 ===== */
.contact-fab{
position:fixed !important;
right:22px !important;
bottom:22px !important;
z-index:9999 !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-end !important;
gap:12px !important;
}
.contact-fab__button{
position:relative !important;
width:62px !important;
height:62px !important;
min-width:62px !important;
min-height:62px !important;
padding:0 !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
border:1px solid rgba(255,225,165,.42) !important;
background:
radial-gradient(
circle at 32% 25%,
#f3d99b 0%,
#d6b36d 38%,
#aa7f40 72%,
#765329 100%
) !important;
color:#16120d !important;
box-shadow:
0 12px 30px rgba(0,0,0,.38),
0 0 0 5px rgba(190,150,80,.14),
inset 0 1px 1px rgba(255,255,255,.48),
inset 0 -8px 18px rgba(67,43,14,.14) !important;
cursor:pointer !important;
overflow:visible !important;
animation:
novastomPhonePulse 3.2s ease-out infinite !important;
transform:none !important;
}
/* Иконка трубки */
.contact-fab__button svg{
position:absolute !important;
width:25px !important;
height:25px !important;
left:50% !important;
top:50% !important;
margin:0 !important;
padding:0 !important;
display:block !important;
fill:#16120d !important;
transform:
translate(-50%,-50%)
rotate(-1deg) !important;
transform-origin:center !important;
}
/* Не вращаем при открытии */
.contact-fab.open .contact-fab__button svg{
transform:
translate(-50%,-50%)
rotate(-1deg) !important;
}
/* Пульсация */
@keyframes novastomPhonePulse{
0%{
box-shadow:
0 12px 30px rgba(0,0,0,.38),
0 0 0 5px rgba(190,150,80,.14),
0 0 0 0 rgba(215,181,111,.34),
inset 0 1px 1px rgba(255,255,255,.48);
}
65%{
box-shadow:
0 12px 30px rgba(0,0,0,.38),
0 0 0 5px rgba(190,150,80,.11),
0 0 0 17px rgba(215,181,111,0),
inset 0 1px 1px rgba(255,255,255,.48);
}
100%{
box-shadow:
0 12px 30px rgba(0,0,0,.38),
0 0 0 5px rgba(190,150,80,.14),
0 0 0 0 rgba(215,181,111,0),
inset 0 1px 1px rgba(255,255,255,.48);
}
}
/* Наведение на ПК */
@media (hover:hover){
.contact-fab__button:hover{
transform:translateY(-3px) scale(1.04) !important;
box-shadow:
0 17px 38px rgba(0,0,0,.42),
0 0 0 5px rgba(190,150,80,.16),
0 0 28px rgba(215,181,111,.18),
inset 0 1px 1px rgba(255,255,255,.52) !important;
}
}
/* Раскрывающаяся панель */
.contact-fab__menu{
width:310px !important;
padding:8px !important;
border-radius:20px !important;
background:
linear-gradient(
145deg,
rgba(28,27,23,.98),
rgba(11,11,10,.99)
) !important;
border:
1px solid rgba(207,171,99,.25) !important;
box-shadow:
0 22px 60px rgba(0,0,0,.48) !important;
backdrop-filter:blur(18px) !important;
-webkit-backdrop-filter:blur(18px) !important;
transform-origin:right bottom !important;
}
/* Телефон */
.contact-fab__item{
display:flex !important;
align-items:center !important;
gap:13px !important;
padding:13px !important;
border-radius:14px !important;
}
.contact-fab__item-icon{
width:42px !important;
height:42px !important;
min-width:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:
linear-gradient(
135deg,
#a47c3e,
#dfc17d
) !important;
color:#17130e !important;
font-size:17px !important;
}
.contact-fab__item strong{
display:block !important;
color:#f5efe4 !important;
font-size:14px !important;
line-height:1.3 !important;
}
.contact-fab__item small{
display:block !important;
margin-top:3px !important;
color:#918a7f !important;
font-size:11px !important;
}
/* MOBILE */
@media(max-width:700px){
.contact-fab{
right:14px !important;
bottom:
max(
14px,
env(safe-area-inset-bottom)
) !important;
}
.contact-fab__button{
width:58px !important;
height:58px !important;
min-width:58px !important;
min-height:58px !important;
}
.contact-fab__button svg{
width:23px !important;
height:23px !important;
}
.contact-fab__menu{
width:
min(
310px,
calc(100vw - 28px)
) !important;
}
}
/* Уважение настройки iOS "уменьшение движения" */
@media(prefers-reduced-motion:reduce){
.contact-fab__button{
animation:none !important;
}
}
/* =========================================================
NOVASTOM — PREMIUM CTA v3
Менее круглые + мягкая пульсация
========================================================= */
/* Все обычные кнопки сайта */
.button{
border-radius:13px !important;
transition:
transform .28s cubic-bezier(.2,.8,.2,1),
box-shadow .28s ease,
border-color .28s ease,
background .28s ease !important;
}
/* Большие кнопки */
.button--large{
border-radius:14px !important;
}
/* =========================================================
ЗОЛОТЫЕ CTA
========================================================= */
.button--gold{
position:relative !important;
overflow:hidden !important;
border-radius:13px !important;
background:
linear-gradient(
135deg,
#a77d3e 0%,
#cba65f 30%,
#e4c780 54%,
#c39a52 78%,
#9d7439 100%
) !important;
border:
1px solid rgba(245,215,151,.42) !important;
color:#17130d !important;
box-shadow:
0 8px 22px rgba(157,113,48,.18),
inset 0 1px 0 rgba(255,255,255,.42) !important;
animation:
novastomCtaPulse 2.8s ease-in-out infinite !important;
}
/* Пульсация */
@keyframes novastomCtaPulse{
0%,
100%{
transform:scale(1);
box-shadow:
0 8px 22px rgba(157,113,48,.18),
0 0 0 0 rgba(211,174,103,0),
inset 0 1px 0 rgba(255,255,255,.42);
}
50%{
transform:scale(1.018);
box-shadow:
0 11px 28px rgba(157,113,48,.28),
0 0 20px rgba(211,174,103,.16),
0 0 0 5px rgba(211,174,103,.055),
inset 0 1px 0 rgba(255,255,255,.48);
}
}
/* Световой блик */
.button--gold::before{
content:"" !important;
position:absolute !important;
top:-120% !important;
left:-55% !important;
width:32% !important;
height:350% !important;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.05),
rgba(255,255,255,.48),
rgba(255,255,255,.05),
transparent
) !important;
transform:rotate(22deg) !important;
pointer-events:none !important;
animation:
novastomGoldSweep 5.2s ease-in-out infinite !important;
}
@keyframes novastomGoldSweep{
0%,
60%{
left:-55%;
opacity:0;
}
66%{
opacity:.8;
}
80%{
left:130%;
opacity:0;
}
100%{
left:130%;
opacity:0;
}
}
/* =========================================================
HOVER НА ПК
========================================================= */
@media(hover:hover){
.button--gold:hover{
animation-play-state:paused !important;
transform:
translateY(-3px)
scale(1.025) !important;
background:
linear-gradient(
135deg,
#b68b47,
#e2c37a,
#f0d89d,
#bd9148
) !important;
box-shadow:
0 15px 35px rgba(153,109,43,.32),
0 0 25px rgba(215,181,111,.14),
inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.button--ghost:hover{
transform:
translateY(-2px) !important;
}
}
/* =========================================================
ТЁМНЫЕ / ПРОЗРАЧНЫЕ КНОПКИ
========================================================= */
.button--ghost{
border-radius:13px !important;
background:
rgba(255,255,255,.025) !important;
border:
1px solid rgba(213,181,112,.27) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025) !important;
}
/* =========================================================
МОБИЛЬНЫЕ
========================================================= */
@media(max-width:700px){
.button,
.button--large,
.button--gold,
.button--ghost{
border-radius:12px !important;
}
.button--large{
min-height:52px !important;
}
}
/* =========================================================
ВАЖНО:
круглая телефонная кнопка остаётся круглой
========================================================= */
.contact-fab__button{
border-radius:50% !important;
}
/* Если пользователь отключил анимации */
@media(prefers-reduced-motion:reduce){
.button--gold,
.button--gold::before{
animation:none !important;
}
}
/* =========================================================
NOVASTOM PHONE FAB — ATTENTION ANIMATION v4
========================================================= */
/* Сама кнопка */
.contact-fab__button{
position:relative !important;
overflow:visible !important;
animation:
novastomPhoneGlow 2.4s ease-in-out infinite !important;
isolation:isolate;
}
/* Первая расходящаяся золотая волна */
.contact-fab__button::before{
content:"" !important;
position:absolute !important;
inset:-2px !important;
border-radius:50% !important;
border:2px solid rgba(225,190,119,.75) !important;
pointer-events:none !important;
z-index:-1 !important;
animation:
novastomPhoneWave 2.2s cubic-bezier(.2,.7,.2,1) infinite !important;
}
/* Вторая волна */
.contact-fab__button::after{
content:"" !important;
position:absolute !important;
inset:-2px !important;
border-radius:50% !important;
border:1px solid rgba(244,213,148,.58) !important;
pointer-events:none !important;
z-index:-2 !important;
animation:
novastomPhoneWave 2.2s .75s cubic-bezier(.2,.7,.2,1) infinite !important;
}
/* Расходящиеся кольца */
@keyframes novastomPhoneWave{
0%{
transform:scale(.96);
opacity:.9;
}
65%{
opacity:.18;
}
100%{
transform:scale(1.65);
opacity:0;
}
}
/* Свечение и небольшое дыхание кнопки */
@keyframes novastomPhoneGlow{
0%,
100%{
transform:scale(1);
box-shadow:
0 12px 30px rgba(0,0,0,.38),
0 0 0 5px rgba(190,150,80,.13),
0 0 15px rgba(216,178,104,.10),
inset 0 1px 1px rgba(255,255,255,.48),
inset 0 -8px 18px rgba(67,43,14,.14);
}
50%{
transform:scale(1.075);
box-shadow:
0 15px 34px rgba(0,0,0,.42),
0 0 0 6px rgba(190,150,80,.18),
0 0 32px rgba(224,184,106,.34),
inset 0 1px 1px rgba(255,255,255,.58),
inset 0 -8px 18px rgba(67,43,14,.10);
}
}
/* =========================================================
ТРУБКА — периодический лёгкий "звонок"
========================================================= */
.contact-fab__button svg{
animation:
novastomPhoneRing 4.6s ease-in-out infinite !important;
}
/*
Большую часть времени трубка неподвижна.
Затем делает короткий звонок.
*/
@keyframes novastomPhoneRing{
0%,
72%,
100%{
transform:
translate(-50%,-50%)
rotate(-1deg);
}
75%{
transform:
translate(-50%,-50%)
rotate(-13deg)
scale(1.06);
}
78%{
transform:
translate(-50%,-50%)
rotate(11deg)
scale(1.08);
}
81%{
transform:
translate(-50%,-50%)
rotate(-9deg)
scale(1.06);
}
84%{
transform:
translate(-50%,-50%)
rotate(7deg);
}
87%{
transform:
translate(-50%,-50%)
rotate(-4deg);
}
90%{
transform:
translate(-50%,-50%)
rotate(-1deg);
}
}
/* Когда меню открыто — успокаиваем кнопку */
.contact-fab.open .contact-fab__button{
animation:none !important;
transform:scale(1) !important;
}
.contact-fab.open .contact-fab__button::before,
.contact-fab.open .contact-fab__button::after{
animation:none !important;
opacity:0 !important;
}
.contact-fab.open .contact-fab__button svg{
animation:none !important;
transform:
translate(-50%,-50%)
rotate(-1deg) !important;
}
/* На ПК при наведении */
@media(hover:hover){
.contact-fab__button:hover{
animation:none !important;
transform:
translateY(-4px)
scale(1.08) !important;
box-shadow:
0 18px 42px rgba(0,0,0,.44),
0 0 0 6px rgba(190,150,80,.18),
0 0 38px rgba(224,184,106,.32),
inset 0 1px 1px rgba(255,255,255,.55) !important;
}
}
/* Пользователь отключил анимации */
@media(prefers-reduced-motion:reduce){
.contact-fab__button,
.contact-fab__button::before,
.contact-fab__button::after,
.contact-fab__button svg{
animation:none !important;
}
}
/* =========================================================
NOVASTOM — SERVICES PREMIUM v1
========================================================= */
.services-premium{
position:relative;
background:
radial-gradient(
circle at 50% 0%,
rgba(199,164,97,.075),
transparent 32%
),
#0d0e0d !important;
color:#f5f0e6 !important;
overflow:hidden;
}
.services-premium__head{
max-width:780px;
margin:
0 auto
60px;
text-align:center;
}
.services-premium__head h2{
margin:
14px 0
22px;
font-family:
"Prata",
Georgia,
serif;
font-size:
clamp(
48px,
5.2vw,
78px
);
font-weight:400;
line-height:1.05;
letter-spacing:-.035em;
}
.services-premium__head h2 em{
color:#d2ae68;
font-style:normal;
}
.services-premium__head p{
max-width:650px;
margin:auto;
color:#aaa397;
font-size:15px;
line-height:1.7;
}
/* GRID */
.services-premium__grid{
display:grid;
grid-template-columns:
repeat(
4,
minmax(0,1fr)
);
gap:14px;
}
/* CARD */
.service-premium{
position:relative;
min-width:0;
aspect-ratio:1 / 1;
display:flex;
flex-direction:column;
overflow:hidden;
border-radius:18px;
background:
linear-gradient(
145deg,
#1b1a17,
#11110f
);
border:
1px solid
rgba(199,164,97,.20);
box-shadow:
0 15px 40px
rgba(0,0,0,.13);
transition:
transform .42s
cubic-bezier(.2,.8,.2,1),
border-color .35s ease,
box-shadow .35s ease;
}
/* Верхняя картинка */
.service-premium__visual{
position:relative;
height:52%;
flex:none;
overflow:hidden;
background:
radial-gradient(
circle at center,
rgba(199,164,97,.12),
transparent 60%
),
#171713;
}
.service-premium__visual::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:42%;
pointer-events:none;
background:
linear-gradient(
to bottom,
transparent,
#171612
);
}
.service-premium__visual img{
width:100%;
height:100%;
object-fit:cover;
transition:
transform .65s
cubic-bezier(.2,.8,.2,1),
filter .4s ease;
}
/* Номер */
.service-premium__number{
position:absolute;
z-index:4;
top:16px;
left:16px;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:
rgba(14,14,12,.72);
border:
1px solid
rgba(215,181,111,.68);
color:#e0bd78;
font-size:11px;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
/* Текст */
.service-premium__body{
min-height:0;
flex:1;
display:flex;
flex-direction:column;
padding:
0 20px
20px;
position:relative;
z-index:3;
}
.service-premium__body h3{
margin:
0 0
10px;
color:#dfbd79;
font-family:
"Prata",
Georgia,
serif;
font-size:
clamp(
18px,
1.4vw,
24px
);
font-weight:400;
line-height:1.18;
}
.service-premium__body p{
margin:0;
color:#aaa397;
font-size:
clamp(
11px,
.8vw,
13px
);
line-height:1.55;
}
/* Цена и CTA */
.service-premium__bottom{
margin-top:auto;
padding-top:13px;
display:flex;
justify-content:
space-between;
align-items:center;
gap:10px;
}
.service-premium__bottom strong{
color:#eee5d4;
font-size:11px;
font-weight:500;
}
.service-premium__bottom a{
display:flex;
align-items:center;
gap:7px;
color:#d6b36c;
font-size:11px;
font-weight:600;
white-space:nowrap;
}
.service-premium__bottom a span{
transition:
transform .25s ease;
}
/* HOVER */
@media(hover:hover){
.service-premium:hover{
transform:
translateY(-7px);
border-color:
rgba(
219,
184,
112,
.5
);
box-shadow:
0 24px 55px
rgba(0,0,0,.28),
0 0 30px
rgba(
191,
148,
70,
.055
);
}
.service-premium:hover
.service-premium__visual img{
transform:
scale(1.055);
filter:
brightness(1.05);
}
.service-premium__bottom
a:hover span{
transform:
translateX(4px);
}
}
/* =========================================================
TABLET — 2 × 4
========================================================= */
@media(max-width:1050px){
.services-premium__grid{
grid-template-columns:
repeat(
2,
minmax(0,1fr)
);
}
.service-premium__body h3{
font-size:
clamp(
22px,
3vw,
30px
);
}
.service-premium__body p{
font-size:13px;
}
}
/* =========================================================
MOBILE — 1 × 8
========================================================= */
@media(max-width:600px){
.services-premium__head{
margin-bottom:34px;
text-align:left;
}
.services-premium__head h2{
font-size:
clamp(
39px,
11vw,
50px
);
}
.services-premium__head p{
margin:0;
font-size:14px;
}
.services-premium__grid{
grid-template-columns:1fr;
gap:12px;
}
.service-premium{
aspect-ratio:1 / 1;
border-radius:17px;
}
.service-premium__visual{
height:54%;
}
.service-premium__body{
padding:
0 18px
18px;
}
.service-premium__body h3{
font-size:
clamp(
22px,
6.5vw,
27px
);
margin-bottom:7px;
}
.service-premium__body p{
font-size:12px;
line-height:1.45;
}
.service-premium__bottom{
padding-top:8px;
}
.service-premium__bottom strong,
.service-premium__bottom a{
font-size:11px;
}
}
/* Очень маленькие телефоны */
@media(max-width:370px){
.service-premium__body p{
font-size:11px;
}
.service-premium__body h3{
font-size:21px;
}
}
/* NOVASTOM service illustrations */
.service-premium__visual{
background:
radial-gradient(
circle at 50% 40%,
rgba(198,157,83,.13),
transparent 58%
),
#11110f !important;
}
.service-premium__visual img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
filter:none !important;
}
.service-premium:hover
.service-premium__visual img{
transform:scale(1.035) !important;
}
/* убираем слишком сильное затемнение */
.service-premium__visual::after{
height:25% !important;
background:
linear-gradient(
to bottom,
transparent,
rgba(17,16,14,.88)
) !important;
}
/* =====================================================
NOVASTOM SERVICES PHOTO FINAL
===================================================== */
.service-premium__visual{
position:relative !important;
height:52% !important;
overflow:hidden !important;
background:#151411 !important;
}
/* Фото */
.service-premium__visual img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
filter:
saturate(.91)
contrast(1.03)
brightness(.94) !important;
transform:scale(1.01);
transition:
transform .7s cubic-bezier(.2,.8,.2,1),
filter .5s ease !important;
}
/* Плавный переход фото в карточку */
.service-premium__visual::after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:-1px !important;
height:38% !important;
z-index:2 !important;
pointer-events:none !important;
background:
linear-gradient(
to bottom,
rgba(17,16,14,0) 0%,
rgba(17,16,14,.18) 30%,
rgba(17,16,14,.72) 75%,
#11100e 100%
) !important;
}
/* Номер услуги */
.service-premium__number{
z-index:5 !important;
background:
rgba(18,17,14,.78) !important;
border:
1px solid rgba(220,181,105,.72) !important;
box-shadow:
0 7px 22px rgba(0,0,0,.25) !important;
}
/* Карточка */
.service-premium{
border-radius:18px !important;
background:
linear-gradient(
155deg,
#171612,
#0f0f0d
) !important;
}
/* Hover */
@media(hover:hover){
.service-premium:hover
.service-premium__visual img{
transform:
scale(1.065) !important;
filter:
saturate(1)
contrast(1.04)
brightness(1.02) !important;
}
}
/* MOBILE */
@media(max-width:600px){
.service-premium__visual{
height:53% !important;
}
.service-premium{
border-radius:16px !important;
}
}
/* =========================================================
NOVASTOM — ABOUT PREMIUM v2
========================================================= */
.about-premium{
padding:
120px 0;
background:
linear-gradient(
180deg,
#c3a05f 0%,
#b89352 100%
);
color:#15120d;
}
.about-premium__grid{
display:grid;
grid-template-columns:
.92fr 1.08fr;
gap:18px;
align-items:stretch;
}
/* =========================================================
ЛЕВАЯ ПРЕМИАЛЬНАЯ КАРТОЧКА
========================================================= */
.about-premium__visual{
position:relative;
min-height:660px;
display:flex;
flex-direction:column;
padding:
52px;
overflow:hidden;
border-radius:30px;
color:#f6efe1;
background:
radial-gradient(
circle at 80% 15%,
rgba(206,167,92,.18),
transparent 34%
),
linear-gradient(
145deg,
#1a1915,
#0c0d0c 75%
);
border:
1px solid
rgba(255,231,178,.15);
box-shadow:
0 28px 70px
rgba(55,37,13,.20);
}
.about-premium__visual::before{
content:"";
position:absolute;
width:380px;
height:380px;
right:-170px;
bottom:-170px;
border-radius:50%;
border:
1px solid
rgba(215,178,105,.17);
}
.about-premium__visual::after{
content:"";
position:absolute;
width:250px;
height:250px;
right:-105px;
bottom:-105px;
border-radius:50%;
border:
1px solid
rgba(215,178,105,.10);
}
.about-premium__label{
position:relative;
z-index:2;
font-size:11px;
font-weight:600;
letter-spacing:.22em;
color:#c8a45e;
}
.about-premium__line{
width:54px;
height:1px;
margin:
28px 0
58px;
background:
linear-gradient(
90deg,
#d3ae68,
transparent
);
}
.about-premium__visual h2{
position:relative;
z-index:2;
margin:0;
max-width:650px;
font-family:
"Prata",
Georgia,
serif;
font-size:
clamp(
52px,
4.6vw,
76px
);
font-weight:400;
letter-spacing:
-.035em;
line-height:1.08;
}
.about-premium__visual h2 em{
display:inline;
color:#d6b36d;
font-style:normal;
}
.about-premium__signature{
position:relative;
z-index:2;
margin-top:auto;
padding-top:60px;
}
.about-premium__signature span{
display:block;
font-family:
"Prata",
Georgia,
serif;
font-size:22px;
color:#d7b46d;
}
.about-premium__signature small{
display:block;
margin-top:5px;
color:#777268;
font-size:10px;
letter-spacing:.14em;
text-transform:uppercase;
}
/* =========================================================
ПРАВАЯ КАРТОЧКА
========================================================= */
.about-premium__content{
min-height:660px;
padding:
58px;
border-radius:30px;
background:
rgba(249,243,231,.84);
border:
1px solid
rgba(255,255,255,.30);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.30);
}
.about-premium__content h3{
max-width:720px;
margin:
18px 0
30px;
font-family:
"Prata",
Georgia,
serif;
font-size:
clamp(
38px,
3.5vw,
56px
);
font-weight:400;
line-height:1.12;
letter-spacing:
-.03em;
}
.about-premium__lead{
max-width:690px;
margin:
0 0
18px;
font-size:
18px;
line-height:1.65;
color:#29251e;
}
.about-premium__text{
max-width:660px;
margin:0;
color:#625b4f;
font-size:14px;
line-height:1.75;
}
/* =========================================================
ПРЕИМУЩЕСТВА
========================================================= */
.about-premium__features{
display:grid;
grid-template-columns:
repeat(
3,
minmax(0,1fr)
);
gap:8px;
margin-top:
46px;
}
.about-premium__feature{
min-height:158px;
padding:
18px;
border-radius:16px;
background:
rgba(255,255,255,.38);
border:
1px solid
rgba(74,55,27,.08);
transition:
transform .3s ease,
background .3s ease;
}
.about-premium__feature span{
display:block;
margin-bottom:
28px;
color:#9a7435;
font-size:10px;
letter-spacing:.12em;
}
.about-premium__feature strong{
display:block;
margin-bottom:
7px;
font-size:13px;
}
.about-premium__feature small{
display:block;
color:#746b5d;
font-size:11px;
line-height:1.5;
}
@media(hover:hover){
.about-premium__feature:hover{
transform:
translateY(-4px);
background:
rgba(255,255,255,.55);
}
}
/* =========================================================
CTA
========================================================= */
.about-premium__link{
width:
fit-content;
margin-top:
40px;
display:flex;
align-items:center;
gap:34px;
padding-bottom:
8px;
border-bottom:
1px solid
rgba(28,23,16,.52);
font-size:13px;
font-weight:700;
transition:
gap .3s ease,
color .3s ease;
}
.about-premium__link i{
font-style:normal;
color:#8e6930;
transition:
transform .3s ease;
}
@media(hover:hover){
.about-premium__link:hover{
gap:43px;
color:#7f5d28;
}
.about-premium__link:hover i{
transform:
translateX(4px);
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1000px){
.about-premium{
padding:
90px 0;
}
.about-premium__grid{
grid-template-columns:
1fr;
}
.about-premium__visual,
.about-premium__content{
min-height:auto;
}
.about-premium__visual{
min-height:
520px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:600px){
.about-premium{
padding:
58px 0;
}
.about-premium__grid{
gap:10px;
}
.about-premium__visual{
min-height:
460px;
padding:
30px 24px;
border-radius:
22px;
}
.about-premium__line{
margin:
20px 0
40px;
}
.about-premium__visual h2{
font-size:
clamp(
39px,
11vw,
52px
);
line-height:
1.08;
}
.about-premium__signature{
padding-top:
45px;
}
.about-premium__content{
padding:
34px 24px;
border-radius:
22px;
}
.about-premium__content h3{
font-size:
clamp(
34px,
9.5vw,
44px
);
margin-bottom:
22px;
}
.about-premium__lead{
font-size:
16px;
}
.about-premium__features{
grid-template-columns:
1fr;
gap:7px;
margin-top:
32px;
}
.about-premium__feature{
min-height:0;
padding:
17px;
}
.about-premium__feature span{
margin-bottom:
14px;
}
.about-premium__link{
margin-top:
30px;
}
}
/* =========================================================
ABOUT PREMIUM — COMPACT v3
========================================================= */
.about-premium{
padding:82px 0 !important;
}
.about-premium__grid{
grid-template-columns:.94fr 1.06fr !important;
gap:14px !important;
}
/* Левая карточка */
.about-premium__visual{
min-height:520px !important;
padding:
38px 40px !important;
border-radius:24px !important;
}
.about-premium__line{
margin:
20px 0
38px !important;
}
.about-premium__visual h2{
max-width:590px !important;
font-size:
clamp(
42px,
3.7vw,
61px
) !important;
line-height:1.07 !important;
}
.about-premium__signature{
padding-top:38px !important;
}
.about-premium__signature span{
font-size:19px !important;
}
/* Правая карточка */
.about-premium__content{
min-height:520px !important;
padding:
40px 42px !important;
border-radius:24px !important;
}
.about-premium__content h3{
margin:
14px 0
22px !important;
max-width:650px !important;
font-size:
clamp(
32px,
2.8vw,
45px
) !important;
line-height:1.1 !important;
}
.about-premium__lead{
max-width:640px !important;
margin-bottom:12px !important;
font-size:16px !important;
line-height:1.55 !important;
}
.about-premium__text{
max-width:620px !important;
font-size:13px !important;
line-height:1.65 !important;
}
/* Преимущества */
.about-premium__features{
gap:7px !important;
margin-top:30px !important;
}
.about-premium__feature{
min-height:125px !important;
padding:
14px 15px !important;
border-radius:14px !important;
}
.about-premium__feature span{
margin-bottom:18px !important;
}
.about-premium__feature strong{
font-size:12px !important;
}
.about-premium__feature small{
font-size:10px !important;
}
/* CTA */
.about-premium__link{
margin-top:27px !important;
font-size:12px !important;
}
/* Планшет */
@media(max-width:1000px){
.about-premium{
padding:68px 0 !important;
}
.about-premium__visual{
min-height:430px !important;
}
.about-premium__content{
min-height:auto !important;
}
}
/* Телефон */
@media(max-width:600px){
.about-premium{
padding:48px 0 !important;
}
.about-premium__visual{
min-height:380px !important;
padding:
25px 21px !important;
border-radius:19px !important;
}
.about-premium__line{
margin:
16px 0
29px !important;
}
.about-premium__visual h2{
font-size:
clamp(
34px,
9.8vw,
43px
) !important;
}
.about-premium__signature{
padding-top:30px !important;
}
.about-premium__content{
padding:
28px 21px !important;
border-radius:19px !important;
}
.about-premium__content h3{
font-size:
clamp(
29px,
8.4vw,
37px
) !important;
margin-bottom:17px !important;
}
.about-premium__lead{
font-size:14px !important;
}
.about-premium__text{
font-size:12px !important;
}
.about-premium__features{
margin-top:24px !important;
}
.about-premium__feature{
min-height:0 !important;
padding:14px !important;
}
.about-premium__feature span{
margin-bottom:9px !important;
}
.about-premium__link{
margin-top:23px !important;
}
}
/* =========================================================
NOVASTOM — COMPACT FINAL CTA + FOOTER v2
========================================================= */
/* =========================================================
CTA
========================================================= */
.appointment--compact{
padding:
58px 0 !important;
background:
linear-gradient(
135deg,
#b99350,
#c5a25f
) !important;
}
.appointment-compact__inner{
display:flex;
align-items:center;
justify-content:
space-between;
gap:60px;
}
.appointment-compact__copy{
max-width:760px;
}
.appointment-compact__copy h2{
margin:
8px 0
10px !important;
font-family:
"Prata",
Georgia,
serif;
font-size:
clamp(
34px,
3.2vw,
50px
) !important;
font-weight:400;
line-height:1.08;
color:#17120c;
}
.appointment-compact__copy p{
margin:0;
max-width:700px;
color:
rgba(28,23,16,.72);
font-size:14px;
line-height:1.6;
}
.appointment-compact__action{
min-width:
250px;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:8px;
}
.appointment-compact__action .button{
min-width:
230px;
}
.appointment-compact__action small{
padding-right:4px;
color:
rgba(28,23,16,.58);
font-size:11px;
}
/* =========================================================
FOOTER
========================================================= */
.contacts--compact{
padding:
55px 0
24px !important;
background:
#090a09 !important;
}
.contacts-compact__grid{
display:grid;
grid-template-columns:
1.3fr
1fr
1fr
1fr;
gap:48px;
align-items:start;
}
.contacts-compact__brand img{
width:
145px !important;
height:auto !important;
margin-bottom:
14px;
}
.contacts-compact__brand p{
margin:0;
max-width:220px;
color:
#7f7a70;
font-size:11px;
line-height:1.5;
}
.contacts-compact__item span{
display:block;
margin-bottom:
12px;
color:#977c47;
font-size:9px;
font-weight:600;
letter-spacing:.18em;
}
.contacts-compact__item p{
margin:0;
color:#ded8cd;
font-size:14px;
line-height:1.55;
}
.contacts-compact__item small{
display:block;
margin-top:
9px;
color:#8e897f;
font-size:11px;
}
.contacts-compact__item a{
transition:
color .25s ease;
}
.contacts-compact__item a:hover{
color:#d3ae67;
}
/* Нижняя юридическая линия */
.contacts-compact__bottom{
margin-top:
42px;
padding-top:
18px;
display:flex;
justify-content:
space-between;
gap:20px;
border-top:
1px solid
rgba(255,255,255,.075);
color:#6f695f;
font-size:9px;
letter-spacing:.08em;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.appointment--compact{
padding:
48px 0 !important;
}
.appointment-compact__inner{
gap:30px;
}
.contacts-compact__grid{
grid-template-columns:
repeat(
2,
1fr
);
gap:
34px
40px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:600px){
.appointment--compact{
padding:
42px 0 !important;
}
.appointment-compact__inner{
flex-direction:
column;
align-items:
flex-start;
gap:26px;
}
.appointment-compact__copy h2{
font-size:
clamp(
32px,
9vw,
40px
) !important;
}
.appointment-compact__copy p{
font-size:
13px;
}
.appointment-compact__action{
width:100%;
align-items:
stretch;
}
.appointment-compact__action .button{
width:100%;
}
.appointment-compact__action small{
text-align:center;
}
.contacts--compact{
padding:
42px 0
20px !important;
}
.contacts-compact__grid{
grid-template-columns:
1fr;
gap:26px;
}
.contacts-compact__brand img{
width:
125px !important;
}
.contacts-compact__bottom{
margin-top:
32px;
flex-direction:
column;
gap:6px;
}
}
/* =========================================================
NOVASTOM — PREMIUM SCROLL MOTION v1
========================================================= */
/* Базовые reveal-состояния */
.reveal-premium{
opacity:0;
transform:translate3d(0,34px,0);
filter:blur(8px);
transition:
opacity .85s cubic-bezier(.2,.7,.2,1),
transform .95s cubic-bezier(.2,.7,.2,1),
filter .85s ease;
}
.reveal-premium.is-visible{
opacity:1;
transform:translate3d(0,0,0);
filter:blur(0);
}
/* Более мягкий вариант */
.reveal-soft{
opacity:0;
transform:translate3d(0,22px,0);
transition:
opacity .8s ease,
transform .85s cubic-bezier(.2,.7,.2,1);
}
.reveal-soft.is-visible{
opacity:1;
transform:none;
}
/* Каскад карточек */
.reveal-stagger{
opacity:0;
transform:translate3d(0,28px,0) scale(.985);
transition:
opacity .75s ease,
transform .85s cubic-bezier(.2,.7,.2,1);
}
.reveal-stagger.is-visible{
opacity:1;
transform:none;
}
/* Фото — лёгкая кинематографичная подача */
.parallax-media{
will-change:transform;
transition:transform .15s linear;
}
/* Шапка после скролла */
.header{
transition:
background .35s ease,
box-shadow .35s ease,
border-color .35s ease,
backdrop-filter .35s ease;
}
.header.is-scrolled{
background:rgba(12,12,10,.96) !important;
border-bottom:
1px solid rgba(199,164,97,.18) !important;
box-shadow:
0 12px 40px rgba(0,0,0,.18);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
}
/* Заголовки */
.motion-title{
opacity:0;
transform:translate3d(0,26px,0);
filter:blur(10px);
transition:
opacity .9s ease,
transform 1s cubic-bezier(.2,.7,.2,1),
filter .9s ease;
}
.motion-title.is-visible{
opacity:1;
transform:none;
filter:blur(0);
}
/* Лёгкое "дыхание" золотых акцентов */
.motion-gold{
position:relative;
}
.motion-gold::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:1px;
background:
linear-gradient(
90deg,
#d5b16a,
rgba(213,177,106,0)
);
transition:
width .9s cubic-bezier(.2,.7,.2,1);
}
.motion-gold.is-visible::after{
width:72px;
}
/* Сервисы — более дорогой hover */
.service-premium{
transition:
transform .5s cubic-bezier(.2,.8,.2,1),
box-shadow .5s ease,
border-color .4s ease !important;
}
@media(hover:hover){
.service-premium:hover{
transform:
translateY(-8px)
scale(1.008) !important;
box-shadow:
0 24px 55px rgba(0,0,0,.28),
0 0 0 1px rgba(213,177,106,.06),
0 0 35px rgba(213,177,106,.05) !important;
}
}
/* Врачи */
.doctor{
transition:
transform .5s cubic-bezier(.2,.8,.2,1),
border-color .4s ease,
box-shadow .5s ease !important;
}
@media(hover:hover){
.doctor:hover{
transform:translateY(-7px);
border-color:
rgba(212,178,108,.28) !important;
box-shadow:
0 24px 50px rgba(0,0,0,.24);
}
}
/* about */
.about-premium__visual,
.about-premium__content{
transition:
transform .7s cubic-bezier(.2,.8,.2,1),
box-shadow .5s ease;
}
/* price rows */
.price-list div{
transition:
padding-left .3s ease,
background .3s ease;
}
@media(hover:hover){
.price-list div:hover{
padding-left:10px;
background:
linear-gradient(
90deg,
rgba(199,164,97,.06),
transparent
);
}
}
/* FAQ */
.accordion details{
transition:
background .3s ease,
padding-left .3s ease;
}
@media(hover:hover){
.accordion details:hover{
background:
rgba(255,255,255,.018);
padding-left:8px;
}
}
/* Скроллбар под стиль сайта */
html{
scrollbar-width:thin;
scrollbar-color:#a98547 #11110f;
}
::-webkit-scrollbar{
width:10px;
}
::-webkit-scrollbar-track{
background:#11110f;
}
::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
#8f6b36,
#d4b16d
);
border-radius:20px;
border:
2px solid #11110f;
}
/* reduced motion */
@media(prefers-reduced-motion:reduce){
.reveal-premium,
.reveal-soft,
.reveal-stagger,
.motion-title{
opacity:1 !important;
transform:none !important;
filter:none !important;
transition:none !important;
}
.parallax-media{
transform:none !important;
}
}
/* =========================================================
NOVASTOM FAST MOTION v2
ЛЁГКАЯ АНИМАЦИЯ БЕЗ PARALLAX И BLUR
========================================================= */
/*
Убираем эффекты предыдущей версии,
которые могли нагружать браузер
*/
.parallax-media{
transform:none !important;
will-change:auto !important;
transition:none !important;
}
.motion-title{
opacity:1 !important;
transform:none !important;
filter:none !important;
}
.reveal-premium,
.reveal-soft,
.reveal-stagger{
filter:none !important;
}
/* =========================================================
НОВОЕ ПОЯВЛЕНИЕ БЛОКОВ
========================================================= */
.ns-reveal{
opacity:0;
transform:
translate3d(
0,
22px,
0
);
transition:
opacity .62s ease,
transform .72s cubic-bezier(.2,.75,.25,1);
}
.ns-reveal.ns-visible{
opacity:1;
transform:
translate3d(
0,
0,
0
);
}
/* Чуть более мягкое появление */
.ns-fade{
opacity:0;
transition:
opacity .65s ease;
}
.ns-fade.ns-visible{
opacity:1;
}
/* =========================================================
CASCADE
========================================================= */
.ns-card{
opacity:0;
transform:
translate3d(
0,
18px,
0
);
transition:
opacity .55s ease,
transform .65s cubic-bezier(.2,.75,.25,1);
}
.ns-card.ns-visible{
opacity:1;
transform:none;
}
/* =========================================================
HEADER
========================================================= */
.header{
transition:
background .25s ease,
border-color .25s ease,
box-shadow .25s ease !important;
}
.header.is-scrolled{
background:
rgba(12,12,10,.97) !important;
border-bottom:
1px solid
rgba(199,164,97,.13) !important;
box-shadow:
0 8px 26px
rgba(0,0,0,.14) !important;
}
/* =========================================================
SERVICE CARDS
========================================================= */
.service-premium{
transition:
transform .28s ease,
border-color .28s ease,
box-shadow .28s ease !important;
}
/*
ВАЖНО:
только устройства с мышью получают hover-анимацию.
Телефоны вообще её не рассчитывают.
*/
@media(hover:hover) and (pointer:fine){
.service-premium:hover{
transform:
translateY(-5px) !important;
border-color:
rgba(
211,
177,
106,
.36
) !important;
box-shadow:
0 16px 36px
rgba(0,0,0,.20) !important;
}
.service-premium:hover
.service-premium__visual img{
transform:
scale(1.035) !important;
}
}
/* Карточки врачей */
@media(hover:hover) and (pointer:fine){
.doctor:hover{
transform:
translateY(-4px) !important;
}
}
/* =========================================================
IMAGES
========================================================= */
.hero__image-wrap img,
.service-premium__visual img,
.doctor img{
/*
Позволяем браузеру самостоятельно
оптимизировать рендеринг.
*/
backface-visibility:hidden;
}
/*
Убираем transition transform на телефонах.
Особенно важно для Safari iOS.
*/
@media(max-width:700px){
.service-premium__visual img,
.hero__image-wrap img{
transform:none !important;
transition:none !important;
}
}
/* =========================================================
КНОПКИ
========================================================= */
/*
Убираем бесконечное scale всей кнопки.
Оставляем только спокойное свечение.
*/
.button--gold{
animation:
nsButtonGlow
3.4s
ease-in-out
infinite !important;
}
@keyframes nsButtonGlow{
0%,
100%{
box-shadow:
0 8px 22px
rgba(157,113,48,.17),
0 0 0 0
rgba(211,174,103,0),
inset 0 1px 0
rgba(255,255,255,.38);
}
50%{
box-shadow:
0 9px 25px
rgba(157,113,48,.22),
0 0 17px
rgba(211,174,103,.10),
inset 0 1px 0
rgba(255,255,255,.43);
}
}
/* Телефонный FAB остаётся отдельным */
.contact-fab__button{
animation:
novastomPhoneGlow
2.8s
ease-in-out
infinite !important;
}
/* =========================================================
CONTENT VISIBILITY
Ускоряет рендер длинной страницы
========================================================= */
.services-premium,
.about-premium,
.section--dark,
.section--cream,
.process,
.faq,
.appointment--compact,
.contacts--compact{
content-visibility:auto;
contain-intrinsic-size:
800px;
}
/*
Для первого экрана content-visibility
не применяем.
*/
.hero{
content-visibility:visible !important;
}
/* =========================================================
MOBILE PERFORMANCE
========================================================= */
@media(max-width:700px){
/*
Blur/backdrop-filter очень тяжёлый
на старых и средних телефонах.
*/
.header{
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.contact-fab__menu{
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
/*
Отключаем световой sweep кнопок.
Остаётся лёгкое свечение.
*/
.button--gold::before{
display:none !important;
}
/*
Убираем слишком длинные transitions.
*/
.service-premium,
.doctor,
.about-premium__feature{
transition-duration:
.25s !important;
}
}
/* =========================================================
LOW POWER / REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.ns-reveal,
.ns-card,
.ns-fade{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
.button--gold,
.contact-fab__button{
animation:none !important;
}
}
/* =========================================================
NOVASTOM FAST MOTION v2
ЛЁГКАЯ АНИМАЦИЯ БЕЗ PARALLAX И BLUR
========================================================= */
/*
Убираем эффекты предыдущей версии,
которые могли нагружать браузер
*/
.parallax-media{
transform:none !important;
will-change:auto !important;
transition:none !important;
}
.motion-title{
opacity:1 !important;
transform:none !important;
filter:none !important;
}
.reveal-premium,
.reveal-soft,
.reveal-stagger{
filter:none !important;
}
/* =========================================================
НОВОЕ ПОЯВЛЕНИЕ БЛОКОВ
========================================================= */
.ns-reveal{
opacity:0;
transform:
translate3d(
0,
22px,
0
);
transition:
opacity .62s ease,
transform .72s cubic-bezier(.2,.75,.25,1);
}
.ns-reveal.ns-visible{
opacity:1;
transform:
translate3d(
0,
0,
0
);
}
/* Чуть более мягкое появление */
.ns-fade{
opacity:0;
transition:
opacity .65s ease;
}
.ns-fade.ns-visible{
opacity:1;
}
/* =========================================================
CASCADE
========================================================= */
.ns-card{
opacity:0;
transform:
translate3d(
0,
18px,
0
);
transition:
opacity .55s ease,
transform .65s cubic-bezier(.2,.75,.25,1);
}
.ns-card.ns-visible{
opacity:1;
transform:none;
}
/* =========================================================
HEADER
========================================================= */
.header{
transition:
background .25s ease,
border-color .25s ease,
box-shadow .25s ease !important;
}
.header.is-scrolled{
background:
rgba(12,12,10,.97) !important;
border-bottom:
1px solid
rgba(199,164,97,.13) !important;
box-shadow:
0 8px 26px
rgba(0,0,0,.14) !important;
}
/* =========================================================
SERVICE CARDS
========================================================= */
.service-premium{
transition:
transform .28s ease,
border-color .28s ease,
box-shadow .28s ease !important;
}
/*
ВАЖНО:
только устройства с мышью получают hover-анимацию.
Телефоны вообще её не рассчитывают.
*/
@media(hover:hover) and (pointer:fine){
.service-premium:hover{
transform:
translateY(-5px) !important;
border-color:
rgba(
211,
177,
106,
.36
) !important;
box-shadow:
0 16px 36px
rgba(0,0,0,.20) !important;
}
.service-premium:hover
.service-premium__visual img{
transform:
scale(1.035) !important;
}
}
/* Карточки врачей */
@media(hover:hover) and (pointer:fine){
.doctor:hover{
transform:
translateY(-4px) !important;
}
}
/* =========================================================
IMAGES
========================================================= */
.hero__image-wrap img,
.service-premium__visual img,
.doctor img{
/*
Позволяем браузеру самостоятельно
оптимизировать рендеринг.
*/
backface-visibility:hidden;
}
/*
Убираем transition transform на телефонах.
Особенно важно для Safari iOS.
*/
@media(max-width:700px){
.service-premium__visual img,
.hero__image-wrap img{
transform:none !important;
transition:none !important;
}
}
/* =========================================================
КНОПКИ
========================================================= */
/*
Убираем бесконечное scale всей кнопки.
Оставляем только спокойное свечение.
*/
.button--gold{
animation:
nsButtonGlow
3.4s
ease-in-out
infinite !important;
}
@keyframes nsButtonGlow{
0%,
100%{
box-shadow:
0 8px 22px
rgba(157,113,48,.17),
0 0 0 0
rgba(211,174,103,0),
inset 0 1px 0
rgba(255,255,255,.38);
}
50%{
box-shadow:
0 9px 25px
rgba(157,113,48,.22),
0 0 17px
rgba(211,174,103,.10),
inset 0 1px 0
rgba(255,255,255,.43);
}
}
/* Телефонный FAB остаётся отдельным */
.contact-fab__button{
animation:
novastomPhoneGlow
2.8s
ease-in-out
infinite !important;
}
/* =========================================================
CONTENT VISIBILITY
Ускоряет рендер длинной страницы
========================================================= */
.services-premium,
.about-premium,
.section--dark,
.section--cream,
.process,
.faq,
.appointment--compact,
.contacts--compact{
content-visibility:auto;
contain-intrinsic-size:
800px;
}
/*
Для первого экрана content-visibility
не применяем.
*/
.hero{
content-visibility:visible !important;
}
/* =========================================================
MOBILE PERFORMANCE
========================================================= */
@media(max-width:700px){
/*
Blur/backdrop-filter очень тяжёлый
на старых и средних телефонах.
*/
.header{
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.contact-fab__menu{
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
/*
Отключаем световой sweep кнопок.
Остаётся лёгкое свечение.
*/
.button--gold::before{
display:none !important;
}
/*
Убираем слишком длинные transitions.
*/
.service-premium,
.doctor,
.about-premium__feature{
transition-duration:
.25s !important;
}
}
/* =========================================================
LOW POWER / REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.ns-reveal,
.ns-card,
.ns-fade{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
.button--gold,
.contact-fab__button{
animation:none !important;
}
}
/* =========================================================
ABOUT PREMIUM — MOBILE FIX v4
========================================================= */
/* Планшет и телефон — только одна колонка */
@media(max-width:1000px){
.about-premium{
overflow:hidden !important;
}
.about-premium .shell{
width:calc(100% - 32px) !important;
max-width:100% !important;
}
.about-premium__grid{
display:grid !important;
grid-template-columns:minmax(0,1fr) !important;
gap:12px !important;
width:100% !important;
}
.about-premium__visual,
.about-premium__content{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
}
}
/* =========================================================
PHONE
========================================================= */
@media(max-width:600px){
.about-premium{
padding:42px 0 !important;
}
.about-premium .shell{
width:calc(100% - 24px) !important;
}
/* ---------- DARK CARD ---------- */
.about-premium__visual{
min-height:390px !important;
padding:
25px 22px
27px !important;
border-radius:20px !important;
}
.about-premium__label{
font-size:9px !important;
letter-spacing:.18em !important;
}
.about-premium__line{
margin:
17px 0
30px !important;
}
.about-premium__visual h2{
width:100% !important;
max-width:100% !important;
font-size:
clamp(
33px,
9.2vw,
42px
) !important;
line-height:1.09 !important;
letter-spacing:-.035em !important;
overflow-wrap:normal !important;
word-break:normal !important;
}
.about-premium__visual h2 br{
display:none !important;
}
.about-premium__signature{
margin-top:auto !important;
padding-top:30px !important;
}
.about-premium__signature span{
font-size:17px !important;
}
.about-premium__signature small{
font-size:8px !important;
}
/* ---------- LIGHT CARD ---------- */
.about-premium__content{
min-height:0 !important;
padding:
28px 22px
30px !important;
border-radius:20px !important;
}
.about-premium__content h3{
max-width:100% !important;
margin:
13px 0
19px !important;
font-size:
clamp(
30px,
8.5vw,
38px
) !important;
line-height:1.12 !important;
overflow-wrap:normal !important;
word-break:normal !important;
}
.about-premium__lead{
max-width:100% !important;
font-size:15px !important;
line-height:1.55 !important;
margin-bottom:13px !important;
}
.about-premium__text{
max-width:100% !important;
font-size:13px !important;
line-height:1.62 !important;
}
/* ---------- FEATURES ---------- */
.about-premium__features{
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
margin-top:25px !important;
}
.about-premium__feature{
width:100% !important;
min-height:0 !important;
padding:
15px 16px !important;
border-radius:14px !important;
}
.about-premium__feature span{
margin-bottom:8px !important;
font-size:9px !important;
}
.about-premium__feature strong{
font-size:13px !important;
}
.about-premium__feature small{
margin-top:4px !important;
font-size:11px !important;
line-height:1.45 !important;
}
/* ---------- LINK ---------- */
.about-premium__link{
margin-top:25px !important;
font-size:12px !important;
gap:24px !important;
}
}
/* Очень узкие телефоны */
@media(max-width:380px){
.about-premium__visual h2{
font-size:32px !important;
}
.about-premium__content h3{
font-size:29px !important;
}
}
/* =====================================================
NOVASTOM IMAGE PERFORMANCE
===================================================== */
img{
max-width:100%;
height:auto;
}
/* браузер не тратит ресурсы на невидимые изображения */
.service-premium__visual img,
.doctor__photo img{
content-visibility:auto;
}
/* аппаратно лёгкий hover только на ПК */
@media(hover:hover) and (pointer:fine){
.service-premium__visual img{
transition:
transform .28s ease !important;
}
}
/* iPhone / Android */
@media(max-width:700px){
.service-premium__visual img,
.doctor__photo img,
.hero__image-wrap img{
transition:none !important;
will-change:auto !important;
}
}
/* =========================================================
NOVASTOM — MOBILE MENU v3
========================================================= */
@media(max-width:900px){
.header{
position:sticky !important;
top:0 !important;
z-index:9998 !important;
background:#0d0e0c !important;
border-bottom:
1px solid rgba(199,164,97,.13) !important;
box-shadow:none !important;
}
.header__row{
height:72px !important;
display:flex !important;
align-items:center !important;
padding:0 !important;
gap:0 !important;
}
/* ЛОГО */
.logo{
width:114px !important;
height:58px !important;
display:flex !important;
align-items:center !important;
flex:none !important;
}
.logo img{
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:left center !important;
}
/* Десктопные элементы скрываем */
.header__actions .phone,
.header__actions .button{
display:none !important;
}
.header__actions{
margin-left:auto !important;
display:flex !important;
align-items:center !important;
}
/* =====================================================
BURGER
===================================================== */
.burger{
width:48px !important;
height:48px !important;
padding:0 !important;
margin:0 !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:center !important;
gap:6px !important;
border:0 !important;
border-radius:12px !important;
background:
rgba(199,164,97,.045) !important;
cursor:pointer !important;
position:relative !important;
z-index:10002 !important;
}
.burger span{
display:block !important;
width:23px !important;
height:2px !important;
margin:0 !important;
background:#d1ad68 !important;
border-radius:20px !important;
transform-origin:center !important;
transition:
transform .3s cubic-bezier(.2,.8,.2,1),
opacity .2s ease,
width .3s ease !important;
}
/* Закрытие X */
.header.menu-open .burger span:first-child{
transform:
translateY(4px)
rotate(45deg) !important;
}
.header.menu-open .burger span:last-child{
transform:
translateY(-4px)
rotate(-45deg) !important;
}
/* =====================================================
FULL SCREEN MENU
===================================================== */
.nav{
position:fixed !important;
inset:72px 0 0 0 !important;
width:100% !important;
height:calc(100dvh - 72px) !important;
padding:
30px
22px
calc(28px + env(safe-area-inset-bottom)) !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:0 !important;
background:
linear-gradient(
180deg,
#11110f 0%,
#090a09 100%
) !important;
border-top:
1px solid rgba(199,164,97,.10) !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transform:
translateY(-8px) !important;
transition:
opacity .24s ease,
transform .3s cubic-bezier(.2,.8,.2,1),
visibility .24s !important;
overflow-y:auto !important;
z-index:9999 !important;
}
.header.menu-open .nav{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transform:none !important;
}
/* Пункты меню */
.nav a{
display:flex !important;
align-items:center !important;
min-height:66px !important;
padding:
0 4px !important;
border-bottom:
1px solid rgba(255,255,255,.075) !important;
color:#f0eadf !important;
font-family:"Onest",Arial,sans-serif !important;
font-size:
clamp(
21px,
5.8vw,
28px
) !important;
font-weight:500 !important;
letter-spacing:-.025em !important;
opacity:1 !important;
}
.nav a::after{
content:"→";
margin-left:auto;
color:#a98548;
font-size:19px;
transition:
transform .25s ease !important;
}
.nav a:active::after{
transform:
translateX(4px) !important;
}
/*
Добавляем дополнительный CTA
через псевдоэлемент на nav
*/
.nav::after{
content:"Записаться на приём";
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:54px !important;
margin-top:auto !important;
border-radius:12px !important;
color:#17130d !important;
font-size:14px !important;
font-weight:700 !important;
background:
linear-gradient(
135deg,
#a77d3e,
#e2c47b,
#b38846
) !important;
box-shadow:
0 10px 26px
rgba(145,103,42,.18) !important;
}
/* При открытом меню блокируем прокрутку */
body.menu-open{
overflow:hidden !important;
}
}
/* =========================================================
PHONE — дополнительная компактность
========================================================= */
@media(max-width:600px){
.header__row{
height:66px !important;
}
.logo{
width:104px !important;
height:54px !important;
}
.burger{
width:44px !important;
height:44px !important;
}
.nav{
inset:
66px 0 0 0 !important;
height:
calc(100dvh - 66px) !important;
padding:
22px
18px
calc(22px + env(safe-area-inset-bottom)) !important;
}
.nav a{
min-height:61px !important;
font-size:
clamp(
20px,
6vw,
26px
) !important;
}
}
/* =========================================================
NOVASTOM — MOBILE MENU v3
========================================================= */
@media(max-width:900px){
.header{
position:sticky !important;
top:0 !important;
z-index:9998 !important;
background:#0d0e0c !important;
border-bottom:
1px solid rgba(199,164,97,.13) !important;
box-shadow:none !important;
}
.header__row{
height:72px !important;
display:flex !important;
align-items:center !important;
padding:0 !important;
gap:0 !important;
}
/* ЛОГО */
.logo{
width:114px !important;
height:58px !important;
display:flex !important;
align-items:center !important;
flex:none !important;
}
.logo img{
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:left center !important;
}
/* Десктопные элементы скрываем */
.header__actions .phone,
.header__actions .button{
display:none !important;
}
.header__actions{
margin-left:auto !important;
display:flex !important;
align-items:center !important;
}
/* =====================================================
BURGER
===================================================== */
.burger{
width:48px !important;
height:48px !important;
padding:0 !important;
margin:0 !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:center !important;
gap:6px !important;
border:0 !important;
border-radius:12px !important;
background:
rgba(199,164,97,.045) !important;
cursor:pointer !important;
position:relative !important;
z-index:10002 !important;
}
.burger span{
display:block !important;
width:23px !important;
height:2px !important;
margin:0 !important;
background:#d1ad68 !important;
border-radius:20px !important;
transform-origin:center !important;
transition:
transform .3s cubic-bezier(.2,.8,.2,1),
opacity .2s ease,
width .3s ease !important;
}
/* Закрытие X */
.header.menu-open .burger span:first-child{
transform:
translateY(4px)
rotate(45deg) !important;
}
.header.menu-open .burger span:last-child{
transform:
translateY(-4px)
rotate(-45deg) !important;
}
/* =====================================================
FULL SCREEN MENU
===================================================== */
.nav{
position:fixed !important;
inset:72px 0 0 0 !important;
width:100% !important;
height:calc(100dvh - 72px) !important;
padding:
30px
22px
calc(28px + env(safe-area-inset-bottom)) !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:0 !important;
background:
linear-gradient(
180deg,
#11110f 0%,
#090a09 100%
) !important;
border-top:
1px solid rgba(199,164,97,.10) !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transform:
translateY(-8px) !important;
transition:
opacity .24s ease,
transform .3s cubic-bezier(.2,.8,.2,1),
visibility .24s !important;
overflow-y:auto !important;
z-index:9999 !important;
}
.header.menu-open .nav{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transform:none !important;
}
/* Пункты меню */
.nav a{
display:flex !important;
align-items:center !important;
min-height:66px !important;
padding:
0 4px !important;
border-bottom:
1px solid rgba(255,255,255,.075) !important;
color:#f0eadf !important;
font-family:"Onest",Arial,sans-serif !important;
font-size:
clamp(
21px,
5.8vw,
28px
) !important;
font-weight:500 !important;
letter-spacing:-.025em !important;
opacity:1 !important;
}
.nav a::after{
content:"→";
margin-left:auto;
color:#a98548;
font-size:19px;
transition:
transform .25s ease !important;
}
.nav a:active::after{
transform:
translateX(4px) !important;
}
/*
Добавляем дополнительный CTA
через псевдоэлемент на nav
*/
.nav::after{
content:"Записаться на приём";
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:54px !important;
margin-top:auto !important;
border-radius:12px !important;
color:#17130d !important;
font-size:14px !important;
font-weight:700 !important;
background:
linear-gradient(
135deg,
#a77d3e,
#e2c47b,
#b38846
) !important;
box-shadow:
0 10px 26px
rgba(145,103,42,.18) !important;
}
/* При открытом меню блокируем прокрутку */
body.menu-open{
overflow:hidden !important;
}
}
/* =========================================================
PHONE — дополнительная компактность
========================================================= */
@media(max-width:600px){
.header__row{
height:66px !important;
}
.logo{
width:104px !important;
height:54px !important;
}
.burger{
width:44px !important;
height:44px !important;
}
.nav{
inset:
66px 0 0 0 !important;
height:
calc(100dvh - 66px) !important;
padding:
22px
18px
calc(22px + env(safe-area-inset-bottom)) !important;
}
.nav a{
min-height:61px !important;
font-size:
clamp(
20px,
6vw,
26px
) !important;
}
}
/* =========================================================
NOVASTOM — BURGER 3 LINES
========================================================= */
@media(max-width:900px){
.burger{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:46px !important;
height:46px !important;
gap:5px !important;
padding:0 !important;
border:1px solid rgba(205,174,108,.12) !important;
border-radius:12px !important;
background:rgba(205,174,108,.035) !important;
}
.burger span{
display:block !important;
width:22px !important;
height:2px !important;
margin:0 !important;
border-radius:10px !important;
background:#d3b36f !important;
transform:none !important;
opacity:1 !important;
transition:
transform .28s cubic-bezier(.4,0,.2,1),
opacity .18s ease,
width .28s ease !important;
}
/* Средняя полоска чуть короче — выглядит аккуратнее */
.burger span:nth-child(2){
width:17px !important;
}
/* ==============================
OPEN → X
============================== */
.header.menu-open .burger span:nth-child(1){
width:22px !important;
transform:
translateY(7px)
rotate(45deg) !important;
}
.header.menu-open .burger span:nth-child(2){
width:0 !important;
opacity:0 !important;
}
.header.menu-open .burger span:nth-child(3){
width:22px !important;
transform:
translateY(-7px)
rotate(-45deg) !important;
}
}
@media(max-width:600px){
.burger{
width:44px !important;
height:44px !important;
}
}
/* =========================================================
PROCESS TITLE — TYPOGRAPHY FIX
========================================================= */
.process h2,
.process .section-head h2{
word-spacing:normal !important;
}
@media(max-width:600px){
.process h2,
.process .section-head h2{
word-spacing:.04em !important;
letter-spacing:-.035em !important;
}
}
/* =========================================================
HERO TITLE — TYPOGRAPHY FIX
========================================================= */
.hero h1{
word-spacing:normal !important;
}
.hero h1 em{
display:inline !important;
margin-left:.12em !important;
}
/* На мобильном делаем перенос аккуратнее */
@media(max-width:700px){
.hero h1{
word-spacing:.02em !important;
letter-spacing:-.035em !important;
}
.hero h1 em{
display:inline !important;
margin-left:.10em !important;
}
}
/* На узких iPhone переносим золотую часть
на отдельную строку — выглядит чище */
@media(max-width:430px){
.hero h1 em{
display:block !important;
margin-left:0 !important;
margin-top:.05em !important;
}
}