/* =========================================================================
dr-liquid.css — strat aditiv peste dentalrocks.css + tw.css
Trei subsisteme, fiecare independent:
1. Verde de brand (#1e5537) — scara de tokenuri + reguli de folosire
2. Liquid glass — suprafete translucide cu model de lumina real
3. Mask reveal — starile de baza pentru textul care intra pe scroll
NELAYERIZAT INADINS. CSS-ul Webflow e nelayerizat, iar orice regula
nelayerizata bate orice @layer indiferent de specificitate. Fisierul se
incarca DUPA tw.css, deci la specificitate egala castiga prin ordine.
========================================================================= */
:root{
/* -----------------------------------------------------------------------
VERDE — a treia culoare de brand, ceruta de client (#1e5537 = green-600).
Scara tine acelasi ton (H 147-151) pe toate treptele, ca sa nu vireze
spre turcoaz in tinte si spre maslina in umbre.
DE CE EXISTA: auriul are 2.6:1 pe alb, deci nu poate fi text pe fundal
deschis (vezi nota din dentalrocks.css). Verdele are 8.7:1 pe alb. Ocupa
un rol care era gol, nu il concureaza pe auriu.
REGULA DURA: verde-600 pe indigo-900 = 2.0:1. Nu se pune niciodata verde
inchis pe indigo si nici indigo pe verde. Pe suprafete inchise se
foloseste green-300 (8.8:1 pe indigo) sau green-400 (5.8:1).
-------------------------------------------------------------------- */
--brand-green-50:#f2f8f4; /* wash de sectiune */
--brand-green-100:#e2efe8; /* fundal pilula / badge pe alb */
--brand-green-200:#c2ddcd; /* borduri pe deschis */
--brand-green-300:#93c3a9; /* TEXT pe indigo — 8.8:1 */
--brand-green-400:#5da37f; /* text pe indigo — 5.8:1 */
--brand-green-500:#38835f; /* text pe alb — 4.6:1, linkuri */
--brand-green-600:#1e5537; /* CULOAREA CLIENTULUI — text pe alb 8.7:1 */
--brand-green-700:#1a482f;
--brand-green-800:#153a26;
--brand-green-900:#0f2a1c;
/* Alias semantic: „semnal de incredere". Daca clientul schimba verdele,
se rescrie o singura linie mai jos, nu 40 de reguli. */
--dr-accent:var(--brand-green-600);
--dr-accent-on-dark:var(--brand-green-300);
--dr-accent-soft:var(--brand-green-100);
/* -----------------------------------------------------------------------
ELEVATIE — doua trepte, atat.
Erau opt umbre de cadere diferite, toate scrise de mana: 0 2px 5px,
0 2px 10px, 0 8px 26px, 0 18px 44px, 0 24px 60px in doua opacitati,
0 28px 70px, 0 30px 90px. Nimeni nu poate citi opt niveluri de inaltime;
ochiul citeste doua — obiect asezat si obiect ridicat.
-------------------------------------------------------------------- */
--dr-elev-1:0 2px 8px rgba(25,25,39,.06);
--dr-elev-2:0 24px 60px rgba(25,25,39,.14);
/* Liquid glass — parametrii modelului de lumina */
--dr-glass-blur:18px;
--dr-glass-sat:1.6;
--dr-glass-radius:16px;
}
/* =========================================================================
1. VERDE — aplicari semantice
Verdele marcheaza incredere/confirmare: eyebrow-uri, bife, disponibilitate,
garantie. NU devine culoare de fundal mare — indigo ramane structura.
========================================================================= */
/* Eyebrow-urile de sectiune pe fundal deschis. Pe fundal inchis raman albe
prin .is-dark, care e definit mai tarziu in dentalrocks.css — de aceea
excludem varianta aici in loc sa o suprascriem. */
.section_tag:not(.is-dark){
background-color:var(--brand-green-100);
border-color:var(--brand-green-200);
color:var(--brand-green-600);
}
.section_tag:not(.is-dark) .icon_wrap{color:var(--brand-green-500);}
/* Pe suprafete inchise verdele intra doar in varianta deschisa */
.section_tag.is-dark .icon_wrap{color:var(--dr-accent-on-dark);}
/* Bife si iconuri de „inclus" — verdele citeste instant ca aprobat */
.dr-tick{color:var(--brand-green-600);flex:none;}
.is-dark .dr-tick,.section_cta .dr-tick,.section_team .dr-tick{color:var(--dr-accent-on-dark);}
/* Badge de disponibilitate / garantie */
.dr-badge{
display:inline-flex;align-items:center;gap:8px;
padding:6px 14px;border-radius:999px;
background:var(--brand-green-100);
border:1px solid var(--brand-green-200);
color:var(--brand-green-600);
font-size:var(--_font---font-size-primitive--text-xsm,13px);
font-weight:600;letter-spacing:.04em;
}
.dr-badge::before{
content:"";width:7px;height:7px;border-radius:50%;
background:var(--brand-green-500);
box-shadow:0 0 0 3px rgba(56,131,95,.22);
}
/* Varianta de badge pentru hero-urile inchise: sticla discreta, puls verde
deschis (verdele inchis ar disparea pe indigo — 2,0:1). */
.dr-badge.is-dark{
background:rgba(255,255,255,.10);
border-color:rgba(255,255,255,.18);
color:#fff;
margin-top:18px;
}
.dr-badge.is-dark::before{
background:var(--dr-accent-on-dark);
box-shadow:0 0 0 3px rgba(147,195,169,.25);
}
/* Randul "sau in rate" de sub ancora de pret — mesajul de rate lipit de
cifra, nu ascuns intr-un rand de aside. Fara sume lunare: publicitatea
cu rate concrete cere exemplu reprezentativ cu DAE (OUG 50/2010). */
.dr-rate-hint{
display:block;
margin-top:10px;
padding-top:10px;
/* Randul sta INTOTDEAUNA in octogonul auriu (.pricing_anchor-shape), pe
toate cele cinci pagini unde apare. Verdele deschis e facut pentru indigo;
pe auriu dadea 1,4:1 si randul disparea efectiv. Indigo pe auriu tine
peste 5:1, iar linia de deasupra devine tot indigo transparent. */
border-top:1px solid rgba(25,25,39,.28);
font-size:12px;
line-height:1.45;
color:var(--primitive-color--primary-900);
font-weight:600;
letter-spacing:.02em;
}
/* Telefonul complet in header — vizibil permanent pe desktop, ca la liderii
analizati; pe tableta/mobil meniul e restrans, numarul ramane in meniu. */
.dr-nav-phone{
font-family:"Sora",system-ui,sans-serif;
font-size:16px;
font-weight:600;
letter-spacing:.02em;
color:#fff;
white-space:nowrap;
align-self:center;
padding:8px 6px;
border-bottom:1px solid transparent;
transition:color .25s,border-color .25s;
font-variant-numeric:tabular-nums;
}
.dr-nav-phone:hover{color:var(--dr-accent-on-dark);border-bottom-color:transparent;}
/* =========================================================================
NAVBAR — facelift + fully responsive
Problemele reparate: butonul "Programează-te" se rupea pe două rânduri,
telefonul arăta ca text aruncat, itemele se înghesuiau la lățimi medii.
Identitatea rămâne: aceleași fonturi, aceleași culori, aceeași bară.
========================================================================= */
/* LOGO NAVBAR — de ce părea mic orice înălțime îi dădeam:
ancora .navbar_logo e element flex în .navbar_container și se lăsa
strânsă de meniu la ~51px lățime. Imaginea avea cutia de 82px înălțime,
dar `object-fit:contain` scala desenul ca să încapă în lățimea de 51px,
deci logo-ul se vedea la ~24px, cu spațiu gol deasupra și dedesubt.
Reparația reală e `flex:none` pe ancoră — înălțimea era corectă tot timpul.
!important pentru că regulile vechi din dentalrocks.css au și ele. */
.navbar_logo{
flex:0 0 auto!important;
max-width:none!important;
width:auto!important;
}
.logo_image{
height:88px!important;
width:auto!important;
max-width:none!important;
flex:none;
transition:height .35s cubic-bezier(.16,1,.3,1);
}
/* Bara are nevoie de mai multă lățime decât containerul de text (1160px):
logo-ul la dimensiune reală plus 7 linkuri plus telefon plus buton nu
încap în 1160. Pe ecrane late bara respiră până la 1400 — și dispare
senzația de conținut ghemuit în mijlocul unui monitor de 1900px. */
@media (min-width:1200px){
.navbar_container{max-width:1400px!important;}
}
.navbar_wrap.dr-nav-glass .logo_image{height:56px!important;}
/* Scara logo-ului, ordonată de la lat la îngust — ordinea din fișier
decide, la specificitate egală. Sub 991px meniul devine hamburger, deci
logo-ul are din nou loc și urcă puțin. */
@media (max-width:1450px){.logo_image{height:76px!important;}}
@media (max-width:1290px){.logo_image{height:64px!important;}}
@media (max-width:991px){.logo_image{height:68px!important;}
.navbar_wrap.dr-nav-glass .logo_image{height:52px!important;}}
@media (max-width:479px){.logo_image{height:56px!important;}
.navbar_wrap.dr-nav-glass .logo_image{height:46px!important;}}
/* Logo-ul din footer, la fel de prezent ca cel din navbar. Ancora .footer_brand
avea max-width:140px — ea îl ținea mic, nu înălțimea imaginii. */
.footer_brand{max-width:none!important;width:auto!important;}
.brand_logo{height:104px!important;width:auto!important;max-width:none!important;}
@media (max-width:991px){.brand_logo{height:84px!important;}}
@media (max-width:479px){.brand_logo{height:72px!important;}}
/* Nimic din navbar nu are voie să se rupă pe două rânduri. */
.navbar_link,
.navbar_wrap .button_text,
.dr-nav-phone{white-space:nowrap;}
.navbar_wrap .button_inner{flex-wrap:nowrap;}
/* Ritm egal între zona de meniu și zona de acțiuni */
.navbar-content_wrap{display:flex;align-items:center;}
.navbar-button_wrapper{align-items:center;}
/* Telefonul devine element intenționat: iconiță + cifre, într-o pastilă
discretă de sticlă care răspunde la hover cu verdele de acțiune. */
.dr-nav-phone{
display:inline-flex;align-items:center;gap:8px;
padding:9px 16px;
border:1px solid rgba(255,255,255,.22);
border-radius:999px;
background:rgba(255,255,255,.06);
transition:color .25s,border-color .25s,background-color .25s;
}
.dr-nav-phone::before{
content:"";width:14px;height:14px;flex:none;
background:currentColor;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.dr-nav-phone:hover{
background:rgba(147,195,169,.14);
border-color:rgba(147,195,169,.45);
}
/* Sublinierea link-urilor: în loc de linia albă bruscă, o linie verde
deschisă care crește din centru — și pe bara transparentă, și pe sticlă. */
.navbar_link{position:relative;box-shadow:none!important;}
.navbar_link::after{
content:"";position:absolute;left:50%;right:50%;bottom:14px;height:2px;
background:var(--dr-accent-on-dark);border-radius:1px;
transition:left .3s cubic-bezier(.16,1,.3,1),right .3s cubic-bezier(.16,1,.3,1);
}
.navbar_link:hover::after,.navbar_link.w--current::after{left:18px;right:18px;}
/* Trepte responsive: padding-ul linkurilor coboară în trepte, telefonul
cedează primul, ca meniul să nu atingă niciodată două rânduri. */
@media (max-width:1450px){
.navbar_link{padding-left:12px;padding-right:12px;}
}
@media (max-width:1290px){
.navbar_link{padding-left:9px;padding-right:9px;}
.navbar_link::after{left:calc(50% - 0px);right:calc(50% - 0px);}
.navbar_link:hover::after,.navbar_link.w--current::after{left:9px;right:9px;}
.dr-nav-phone{padding:8px 12px;}
}
@media (max-width:1199px){.dr-nav-phone{display:none;}}
@media (prefers-reduced-motion:reduce){
.navbar_link::after,.dr-nav-phone{transition:none;}
}
/* Linkuri de accent pe fundal deschis — locul unde auriul pica la contrast */
.dr-link{
color:var(--brand-green-600);
border-bottom:1px solid var(--brand-green-200);
transition:border-color .25s,color .25s;
}
.dr-link:hover{color:var(--brand-green-700);border-bottom-color:var(--brand-green-500);}
/* -------------------------------------------------------------------------
HOVER VERDE PE BUTOANE — cerința clientului (21 august 2026).
Strict butoanele: la hover, fundal verde de brand + text alb (8,7:1,
corect pe orice fundal de secțiune). Linkurile-text își păstrează
hover-ul auriu — auriul rămâne accentul, verdele devine acțiunea.
!important e necesar: regulile aurii din dentalrocks.css au !important,
iar fișierul ăsta se încarcă ultimul, deci la egalitate câștigăm noi.
------------------------------------------------------------------------- */
.button_primary:hover,.button.is-primary:hover{
background-color:var(--dr-accent)!important;
border-color:var(--dr-accent)!important;
}
.button_primary:hover .button_text,.button.is-primary:hover .button_text{
color:#fff!important;
}
.button_primary.is-subscribe:hover{background-color:var(--dr-accent);color:#fff;}
.lead-form_btn:hover,.contact-form_btn:hover{background:var(--dr-accent);color:#fff;}
.finance_cta:hover{background:var(--dr-accent);color:#fff;}
.vlight_close:hover{background:var(--dr-accent);border-color:var(--dr-accent);color:#fff;}
/* Butoanele paginilor de serviciu au sweep-ul lor (::before) — îl vopsim. */
.svc-btn.is-primary::before{background:var(--dr-accent);}
.svc-btn.is-primary:hover{color:#fff;}
.svc-btn.is-ghost::before{background:var(--dr-accent);}
.svc-btn.is-ghost:hover{color:#fff;border-color:var(--dr-accent);}
/* Butonul de redare de pe clipurile video */
.vgal_media:hover .vgal_play{background:var(--dr-accent);color:#fff;}
/* -------------------------------------------------------------------------
MOBIL: clipul din hero-ul paginilor de serviciu stătea lipit de stânga
(justify-self:start sub 991px), cu legenda centrată sub el — arăta rupt.
Sub o coloană, clipul și legenda stau centrate împreună.
------------------------------------------------------------------------- */
@media (max-width:991px){
.svc-hero_clip{justify-self:center;margin-inline:auto;}
}
/* Trei imagini au rămas blocate cu scale(1.5) dintr-un reveal Webflow care
nu mai rulează (stilul inline există, animația de zoom-out nu). Imaginea
stătea mărită permanent și depășea ecranul pe mobil. */
.home-value_image,.about-hero_image,.feature-blog_image{transform:none!important;}
/* =========================================================================
2. LIQUID GLASS
Nu e „blur pe un dreptunghi". Patru straturi suprapuse:
a) backdrop blur + saturate — saturarea da senzatia de sticla reala
b) gradient propriu — lumina cade de sus-stanga
c) inel hairline inset — muchia care refracta
d) sweep specular la hover — partea „liquid", singura care se misca
========================================================================= */
.dr-glass{
position:relative;
isolation:isolate;
border-radius:var(--dr-glass-radius);
background-image:linear-gradient(
145deg,
rgba(255,255,255,.72) 0%,
rgba(255,255,255,.46) 42%,
rgba(30,85,55,.05) 100% /* urma de verde, atmosfera nu suprafata */
);
-webkit-backdrop-filter:blur(var(--dr-glass-blur)) saturate(var(--dr-glass-sat));
backdrop-filter:blur(var(--dr-glass-blur)) saturate(var(--dr-glass-sat));
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,.85), /* muchia de sus, lumina */
inset 0 -1px 0 0 rgba(30,85,55,.10), /* muchia de jos, umbra */
inset 0 0 0 1px rgba(255,255,255,.35), /* inelul complet */
0 18px 40px -22px rgba(25,25,39,.30),
0 2px 8px -4px rgba(25,25,39,.14);
transition:transform .5s cubic-bezier(.16,1,.3,1),
box-shadow .5s cubic-bezier(.16,1,.3,1);
will-change:transform;
}
/* Sweep-ul specular. Traverseaza o singura data la hover, nu bucla — o
bucla infinita ar trage GPU-ul continuu si ar distrage pe un site medical. */
.dr-glass::after{
content:"";
position:absolute;inset:0;
border-radius:inherit;
pointer-events:none;
z-index:1;
background:linear-gradient(
105deg,
transparent 30%,
rgba(255,255,255,.55) 47%,
rgba(255,255,255,.18) 54%,
transparent 68%
);
transform:translateX(-115%);
opacity:0;
transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .35s;
}
.dr-glass:hover{
transform:translateY(-3px);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,.95),
inset 0 -1px 0 0 rgba(30,85,55,.14),
inset 0 0 0 1px rgba(255,255,255,.45),
0 30px 60px -26px rgba(25,25,39,.38),
0 4px 12px -6px rgba(25,25,39,.18);
}
.dr-glass:hover::after{transform:translateX(115%);opacity:1;}
/* Continutul trebuie sa stea peste sweep */
.dr-glass > *{position:relative;z-index:2;}
/* Varianta pentru sectiunile inchise (indigo). Aici sticla e intunecata,
iar accentul vine din green-300, nu din green-600. */
.dr-glass.is-dark{
background-image:linear-gradient(
145deg,
rgba(255,255,255,.12) 0%,
rgba(255,255,255,.05) 45%,
rgba(147,195,169,.07) 100%
);
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,.22),
inset 0 -1px 0 0 rgba(0,0,0,.30),
inset 0 0 0 1px rgba(255,255,255,.10),
0 22px 46px -24px rgba(0,0,0,.62);
}
.dr-glass.is-dark::after{
background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);
}
.dr-glass.is-dark:hover{
box-shadow:
inset 0 1px 0 0 rgba(255,255,255,.30),
inset 0 -1px 0 0 rgba(0,0,0,.34),
inset 0 0 0 1px rgba(147,195,169,.20),
0 34px 64px -26px rgba(0,0,0,.7);
}
/* Fallback: fara backdrop-filter sticla devine suprafata opaca, nu ceata.
Firefox < 103, WebView-uri vechi, si orice browser cu accelerare oprita. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
.dr-glass{background-color:rgba(255,255,255,.94);}
.dr-glass.is-dark{background-color:rgba(37,37,59,.92);}
}
/* =========================================================================
3. NAVBAR — sticla care apare dupa hero
.navbar_wrap e position:absolute peste hero. Ramane asa cat esti sus;
dupa prag devine fixed + sticla si coboara in ecran.
========================================================================= */
.navbar_wrap.dr-nav-glass{
position:fixed;top:0;left:0;right:0;
z-index:1000;
border-bottom:1px solid rgba(30,85,55,.14);
background-color:rgba(25,25,39,.55);
background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
-webkit-backdrop-filter:blur(16px) saturate(1.7);
backdrop-filter:blur(16px) saturate(1.7);
box-shadow:var(--dr-elev-1);
transform:translateY(-100%);
transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.navbar_wrap.dr-nav-glass.is-visible{transform:translateY(0);}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
.navbar_wrap.dr-nav-glass{background-color:rgba(25,25,39,.97);}
}
/* Linia activa din meniu preia accentul, dar in varianta deschisa —
green-600 pe indigo ar fi invizibil (2.0:1). */
.navbar_wrap.dr-nav-glass .navbar_link:hover,
.navbar_wrap.dr-nav-glass .navbar_link.w--current{
box-shadow:inset 0 -2px 0 0 var(--dr-accent-on-dark);
}
/* -------------------------------------------------------------------------
Panoul de contact din hero ca o singura placa de sticla.
.our-info_list e un grid de 3 segmente lipite (1 coloana pe mobil). Nu le
facem carduri separate — ar rupe banda continua din design. Sticla se pune
pe container, iar segmentele isi pierd fundalul propriu ca sa nu se adune
doua straturi translucide unul peste altul.
------------------------------------------------------------------------- */
.our-info_list.dr-glass{overflow:hidden;}
/* Nu e element interactiv, deci nu se ridica la hover. Sweep-ul ramane —
e singurul semn ca suprafata e „lichida". */
.our-info_list.dr-glass:hover{transform:none;}
.our-info_list.dr-glass .our-info_item{
background-color:transparent;
border-left-color:rgba(255,255,255,.13);
border-bottom-color:rgba(255,255,255,.13);
/* pe desktop border-right exista doar pe .is-last, pe mobil pe toate —
in ambele cazuri e o muchie care atinge marginea placii */
border-right-color:transparent;
}
.our-info_list.dr-glass .our-info_item:first-child{border-left-color:transparent;}
.our-info_list.dr-glass .our-info_item:last-child{border-bottom-color:transparent;}
/* Grila de 3 segmente rezista doar pe ecrane largi. Template-ul o rupea la
o coloana abia sub 480px — intre 480 si 991 cele trei coloane se
inghesuiau urat („Programeaza-te" rupt, programul taiat). Sub 991 placa
devine o coloana, iar bordura din stanga nu mai desparte nimic — ar fi
o linie verticala lipita de marginea placii. Ramane doar cea de jos. */
@media screen and (max-width:991px){
.our-info_list.dr-glass{grid-template-columns:1fr;}
.our-info_list.dr-glass .our-info_item{
border-left-color:transparent;
border-right-color:transparent;
border-bottom:1px solid rgba(255,255,255,.13);
}
.our-info_list.dr-glass .our-info_item:last-child{border-bottom-color:transparent;}
}
/* =========================================================================
4. MASK REVEAL — stari de baza
NU ascundem textul din CSS. Daca JS-ul nu ruleaza (blocat, eroare, retea),
textul trebuie sa ramana vizibil. Ascunderea o face exclusiv GSAP, dupa ce
confirma ca s-a incarcat. Aceeasi filosofie ca reveal engine v2 din index.
========================================================================= */
.dr-line{will-change:transform;}
/* SplitText cu mask:"lines" isi creeaza singur wrapperele overflow:hidden.
Singurul lucru pe care il fortam e sa nu taie descenderele (g, y, p) si
accentele romanesti (ă, î, ț) — de aceea padding pe wrapper. */
[data-dr-split]{overflow:visible;}
@media (prefers-reduced-motion:reduce){
.dr-glass,.dr-glass::after,.navbar_wrap.dr-nav-glass{transition:none;}
.dr-glass:hover{transform:none;}
.dr-glass:hover::after{opacity:0;transform:translateX(-115%);}
.dr-line{will-change:auto;}
}
/* =========================================================================
FORMULARE — reparare wrapper
`.form_field` avea doua definitii in dentalrocks.css care se bateau:
una veche (3474) unde clasa statea PE input — fundal gri, padding 12/16,
radius 8px, min-height 48 — si una noua (9355) unde e wrapper peste
label+input. A doua castiga doar la cele 3 proprietati pe care le declara,
restul ramaneau active pe wrapper: fiecare camp era o cutie gri cu alta
cutie alba inauntru, iar campurile intrau cu 17px fata de buton.
Wrapperul s-a redenumit `.form_group` in cele 7 vederi; regula veche ramane
neatinsa pentru formularele Webflow care chiar o folosesc.
========================================================================= */
.form_group{display:flex;flex-direction:column;gap:6px;}
/* Pragurile erau nesincronizate: `.contact_grid` trecea pe o coloana la 991px,
dar randul de campuri abia la 639px — intre ele, „Nume" si „Telefon" ramaneau
pe doua coloane intr-un card deja lat. Se plieaza in acelasi punct. */
@media (max-width:991px){
.form_row{grid-template-columns:1fr;}
}
/* Asteriscul „obligatoriu" ramasese auriu intr-un formular al carui accent
de actiune e verde. */
.form_label .req{color:var(--dr-accent);}
/* =========================================================================
PAGINA DE CONTACT — ritmul vertical
`.section-padding` singura da doar padding orizontal; ritmul vertical vine
din modificatorii ei (`padding-120x120` etc.). Pe contact ambele sectiuni
foloseau clasa goala, deci: hero-ul se termina si cardul alb incepea exact
de acolo, lipit, iar jos sectiunea atingea footerul. Punem ritmul aici, ca
sa nu atingem utilitarele care se folosesc pe tot site-ul.
========================================================================= */
.section_contact-hero{padding-bottom:var(--_size-variables---section-padding--sm);}
.section_contact > .section-padding{
padding-top:var(--_size-variables---section-padding--sm);
padding-bottom:var(--_size-variables---section-padding--xl);
}
@media (max-width:991px){
.section_contact-hero{padding-bottom:56px;}
.section_contact > .section-padding{padding-top:56px;padding-bottom:80px;}
}
@media (max-width:639px){
.section_contact-hero{padding-bottom:40px;}
.section_contact > .section-padding{padding-top:40px;padding-bottom:64px;}
}
/* Campurile stateau la 16px unul de altul, cat si distanta dintre cele doua
coloane: formularul citea ca o grila deasa, nu ca o succesiune de pasi.
Randul ramane la 16px pe orizontala, campurile respira pe verticala. */
.contact-form{gap:20px;}
.contact-form .form_row{column-gap:16px;row-gap:20px;}
.contact-form .form_consent{margin-top:4px;}
/* =========================================================================
PAGINA SERVICII — randuri incadrate in octogonul din sigla
Benzile pe toata latimea au picat: imaginea taiata drept pierdea semnatura
marcii, iar tenta verde scotea pagina din paleta primara (indigo + auriu).
Ramane zigzagul cu octogonul, dar cu propor.tiile reparate — asta era
problema initiala, nu structura:
numarul urca de la 14px la 72px si devine reperul randului
paragraful de la 18px la 22px, plafonat la 62 de caractere
etichetele trec de la contur sters la micro-majuscule
randurile se despart printr-o linie, nu prin spatiu gol
Marimile vin din scara template-ului; culorile, din paleta primara.
========================================================================= */
.section_zig .zig_row{align-items:center;gap:var(--_size-variables---element-spacing--10xl);}
/* Octogonul respira: era 480px langa o coloana de text de 763px */
.section_zig .zig_media{max-width:520px;}
/* Linia dintre randuri: separa fara sa mai ceara 80px de gol */
.section_zig .zig_row + .zig_row{
margin-top:var(--_size-variables---element-spacing--14xl);
padding-top:var(--_size-variables---element-spacing--14xl);
border-top:1px solid var(--primitive-color--neutral-300);
}
/* Numarul e reperul randului. Auriul e culoarea de accent a marcii, iar la
72px trece pragul de contrast pentru text mare. */
.section_zig .zig_num{
font-size:var(--_font---font-size-primitive--text-10xl);
font-weight:500;line-height:1;letter-spacing:-.04em;
color:var(--brand-gold-600);
font-variant-numeric:tabular-nums;
margin-bottom:var(--_size-variables---element-spacing--md);
}
.section_zig .zig_desc{
font-size:var(--_font---font-size-primitive--text-2xl);
line-height:1.6;max-width:62ch;
}
/* Etichetele: micro-majuscule indigo, nu contur gri sters */
.section_zig .zig_tags li{
font-size:var(--_font---font-size-primitive--text-xsm);
font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--primitive-color--primary-700);
border-color:var(--primitive-color--neutral-300);
background:#fff;
}
@media (max-width:991px){
.section_zig .zig_row{gap:var(--_size-variables---element-spacing--6xl);}
.section_zig .zig_media{max-width:420px;}
.section_zig .zig_row + .zig_row{
margin-top:var(--_size-variables---element-spacing--10xl);
padding-top:var(--_size-variables---element-spacing--10xl);
}
.section_zig .zig_num{font-size:var(--_font---font-size-primitive--text-6xl);}
.section_zig .zig_desc{font-size:var(--_font---font-size-primitive--text-lg);}
}
@media (max-width:639px){
.section_zig .zig_num{font-size:var(--_font---font-size-primitive--text-5xl);}
}
/* Octogonul de pret: ierarhia se face din marime, greutate si spatiere, nu
din text estompat. Eticheta statea la opacity .75 si nota la .8, ceea ce pe
capatul inchis al gradientului auriu (#ab8258) da 3,5:1 si 3,8:1 — sub
pragul de 4,5:1 pentru text mic. La opacitate plina ambele tin 5:1. */
.pricing_anchor-label{opacity:1;}
.pricing_anchor-note{opacity:1;}
/* =========================================================================
ECHIPA DE PE PRIMA PAGINA — portretele reale, in octogonul din sigla
Aici stateau doua siluete decupate de stoc. Fotografiile reale ale medicilor
au fundal de cabinet, deci nu pot sta decupate peste banda inchisa fara o
detourare pe care nu o pot face onest local. Rama octogonala rezolva si
incadrarea, si identitatea: e forma din marca, aceeasi folosita la servicii.
========================================================================= */
.home-team_oct{flex:none;width:clamp(260px,24vw,400px);}
.home-team_oct .oct-media{width:100%;}
@media (max-width:991px){
.home-team_oct{width:min(320px,72vw);}
}
/* =========================================================================
FORMA DIN SIGLA PE TOATE IMAGINILE, FARA LINIILE DIN EA
Doua straturi separate, de asta se pot despartii:
forma = clip-path url(#gorgosShape), definit in _raw/svgdefs.php
liniile = ::after cu logo-frame.svg, evantaiul auriu peste imagine
Se stinge stratul de linii si se pune forma pe imaginile de continut.
`clipPathUnits="objectBoundingBox"` inseamna ca forma se intinde dupa cutia
elementului, deci nu impune un raport patrat: o imagine lata primeste un
octogon lat, nu o taietura in mijloc.
NU primesc forma: sigla, fundalurile de hero care merg pe toata latimea
(ar lasa colturi goale la marginea paginii), posterele de video, unde
butonul de redare sta peste imagine, si imaginile din carduri.
Nici imaginile de serviciu de pe prima pagina nu primesc forma: cutia lor e
aproape 2:1, deci octogonul iese foarte lat, iar colturile taiate descopera
cardul de dedesubt. Raman dreptunghiulare, cum erau.
De ce nu in carduri: cardul e deja o forma. Un octogon decupat inauntrul
unui dreptunghi inchis lasa patru triunghiuri de fundal in colturi — pe
cardurile de blog, care stau pe indigo, ieseau patru pene negre in jurul
fiecarei poze. Forma se pune pe imaginile care stau singure pe pagina.
========================================================================= */
.oct-media::after{display:none;}
.our-story_item-image_wrap,
.team-image_wrap,
.story-images_wrap,
.home-value_image-wrap,
.about-hero_image,
.zig_media .oct-media,
.dr-oct{
clip-path:url(#gorgosShape);
border-radius:0;
overflow:hidden;
}
/* Colturile taiate mananca din imagine; object-fit:cover pe tot ce intra in
forma tine subiectul in centru, nu il lasa sa cada intr-un colt. */
.our-story_item-image_wrap img,
.team-image_wrap img,
.story-images_wrap img,
.home-value_image-wrap img,
/* astea doua primesc decuparea direct pe , deci n-aveau wrapper care sa
le dea object-fit: ramaneau pe `fill` si se intindeau dupa cutie. Hero-ul de
la Despre noi e 3:2, iar cutia lui e 1,84:1 — poza iesea lata cu ~23%. */
.about-hero_image{
width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 50%);display:block;
}
/* =========================================================================
HERO — clipul din dreapta
Pana acum hero-ul avea o singura coloana de continut (titlu, text, formular)
peste fotografia de fundal. Acum e o grila de doua coloane pe ecrane late:
continutul la stanga, clipul la dreapta. Sub 992px coloana a doua trece
dedesubt, ca formularul sa ramana primul lucru la indemana pe telefon.
========================================================================= */
@media (min-width:992px){
.section_hero.is-home-hero .section_component{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,380px);
gap:48px;align-items:end;
}
.section_hero.is-home-hero .home-hero_content{max-width:none;}
}
.home-hero_video{
width:100%;max-width:380px;
margin:0 auto 172px; /* centrat in coloana lui */
border-radius:16px;overflow:hidden;
box-shadow:var(--dr-elev-2);
background:#000;
display:flex; /* centreaza si pe verticala, daca */
align-items:center; /* raportul clipului nu e exact 9:16 */
justify-content:center;
}
/* Clipurile clinicii sunt 720x1280, adica exact 9:16 — caseta le respecta
raportul, deci nu apar benzi. `object-fit:cover` ramane ca plasa pentru
cazul in care se schimba fisierul cu unul de alt raport. */
.home-hero_video-el{
display:block;width:100%;aspect-ratio:9/16;
object-fit:cover;background:#000;
}
@media (max-width:991px){
.home-hero_video{margin:32px auto 0;max-width:320px;}
}
/* =========================================================================
MENIU — panoul de servicii si sertarul de mobil
Ce nu mergea:
buline palide (#f3f6ff pe alb) care citeau ca niste puncte ratacite
panou alb plat, fara ierarhie intre titlu, descriere si randul de jos
pe mobil sertarul avea min-height si nu scrolla: blocul cu telefon si
program se taia sub marginea ecranului, iar butonul de cookies ii statea
peste
========================================================================= */
/* ── panoul de pe desktop ─────────────────────────────────────────────── */
/* Latimea fixa TREBUIE sa ramana in media query. Fara el, cei 620px se aplicau
si pe telefon, unde panoul e o sub-lista in sertarul de 375px: iesea cu 269px
in dreapta, peste marginea meniului. */
@media (min-width:992px){
.navmega_panel{
width:620px;
border-radius:16px;
padding:12px 12px 0;
border-color:var(--primitive-color--neutral-200);
}
}
.navmega_grid{gap:4px;}
.navmega_item{
gap:4px;
padding:16px 18px 16px 46px;
border-radius:16px;
}
/* Bulina devine octogonul din sigla: acelasi semn ca in logo, in auriu.
Contur, nu plin — la 12px un octogon plin arata ca o pata. */
.navmega_item::before{
left:18px;top:20px;
width:14px;height:14px;
border-radius:0;outline:0;
background:var(--brand-gold-500,#c49b6d);
clip-path:url(#gorgosShape);
opacity:.55;
transition:opacity .2s ease,transform .2s ease;
}
.navmega_item:hover{background:var(--brand-green-50);}
.navmega_item:hover::before{opacity:1;transform:scale(1.12);}
.navmega_item:hover .navmega_item-title{color:var(--dr-accent);}
.navmega_item-title{transition:color .2s ease;}
.navmega_item-desc{line-height:1.5;}
/* Randul de jos capata o banda proprie, ca sa nu mai pluteasca in alb */
.navmega_foot{
margin-top:8px;
padding:14px 18px;
background:var(--primitive-color--neutral-100,#fafafd);
border-top:1px solid var(--primitive-color--neutral-200);
border-radius:0 0 16px 16px;
}
.navmega_foot a{color:var(--dr-accent);}
.navmega_foot a:hover{color:var(--brand-green-800);}
/* ── sertarul de mobil ────────────────────────────────────────────────── */
@media (max-width:991px){
/* Inaltimea fixa taia continutul. `dvh` tine cont de bara browserului care
apare si dispare la scroll, iar `overflow-y` face sertarul sa scrolleze in
loc sa ascunda ce nu incape. */
.navbar_menu{
min-height:0!important;
height:calc(100dvh - 70px)!important;
max-height:calc(100dvh - 70px)!important;
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
/* loc pentru butonul de cookies din stanga-jos si pentru bara de sistem */
padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
}
.navbar_link{
border-bottom:1px solid rgba(255,255,255,.08);
transition:color .2s ease;
}
.navmega > .navbar_link{border-bottom:0;}
.navbar_link:hover{color:var(--brand-gold-400)!important;}
/* sub-lista de servicii: acelasi octogon, pe fundal usor decupat din bara */
.navmega_panel{
background:rgba(255,255,255,.04);
border-radius:16px;
margin:4px 0 10px;
}
.navmega.is-open .navmega_panel{padding:6px 0;}
.navmega_grid{padding-left:16px;padding-right:16px;}
.navmega_item{padding:12px 0 12px 30px;border-radius:0;}
.navmega_item + .navmega_item{border-top:1px solid rgba(255,255,255,.07);}
.navmega_item::before{
left:0;top:16px;width:12px;height:12px;opacity:.9;
background:var(--brand-gold-400,#d9b98a);
}
.navmega_item:hover{background:transparent;}
.navmega_item:hover .navmega_item-title{color:var(--brand-gold-400);}
.navmega_foot{
background:transparent;border-radius:0;
margin-top:0;padding:12px 16px 4px;
}
.navmega_foot a{color:var(--brand-gold-400);}
/* blocul de jos: separat de linkuri, nu lipit de ele */
.navmenu_extra{
padding-top:28px!important;
margin-top:24px!important;
border-top:1px solid rgba(255,255,255,.12);
width:100%;
}
.navmenu_extra .svc-btn.is-primary{width:100%;justify-content:center;}
}
/* =========================================================================
BUTOANE FLOTANTE DE CONTACT — telefon si WhatsApp
Stau in dreapta-jos: stanga-jos e ocupata de butonul de preferinte cookies
(z-index 1900). Z-index-ul lor e sub bannerul de cookies (2000), ca bannerul
sa ramana accesibil cand apare peste ele.
Telefonul e butonul principal — pe mobil apasa cineva pe el, nu scrie. De
asta poarta indigo si isi arata numarul la hover, iar WhatsApp ramane
secundar, in verdele marcii.
========================================================================= */
.dr-fab{
position:fixed;right:18px;bottom:18px;z-index:1850;
display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
.dr-fab_btn{
display:inline-flex;align-items:center;gap:10px;
height:56px;min-width:56px;padding:0 16px;
border-radius:999px;
color:#fff;text-decoration:none;
box-shadow:var(--dr-elev-2);
transition:transform .22s cubic-bezier(.16,1,.3,1),background-color .22s;
}
.dr-fab_btn svg{width:26px;height:26px;flex:none;}
.dr-fab_btn:hover{transform:translateY(-2px);}
.dr-fab_btn:focus-visible{outline:2px solid var(--brand-gold-400,#d9b98a);outline-offset:3px;}
.dr-fab_btn--wa{background:var(--dr-accent);}
.dr-fab_btn--wa:hover{background:var(--brand-green-700);}
.dr-fab_btn--tel{background:var(--primitive-color--primary-900,#191927);}
.dr-fab_btn--tel:hover{background:var(--primitive-color--primary-800,#25253b);}
/* Numarul apare la hover pe desktop; pe mobil butonul ramane doar iconul, ca
sa nu acopere continutul. */
.dr-fab_eticheta{
font-family:"Sora",system-ui,sans-serif;
font-size:15px;font-weight:600;letter-spacing:.02em;
font-variant-numeric:tabular-nums;white-space:nowrap;
max-width:0;overflow:hidden;opacity:0;
transition:max-width .28s cubic-bezier(.16,1,.3,1),opacity .2s;
}
.dr-fab_btn--tel:hover .dr-fab_eticheta,
.dr-fab_btn--tel:focus-visible .dr-fab_eticheta{max-width:150px;opacity:1;}
@media (max-width:991px){
.dr-fab{right:14px;bottom:14px;gap:10px;}
.dr-fab_btn{height:52px;min-width:52px;padding:0 13px;}
.dr-fab_btn svg{width:24px;height:24px;}
/* pe telefon nu exista hover: eticheta ar ramane deschisa dupa atingere */
.dr-fab_eticheta{display:none;}
}
/* Cand bannerul de cookies e pe ecran, butoanele urca peste el */
body:has(.cookie-banner.is-visible) .dr-fab{bottom:calc(18px + 132px);}
@media (max-width:991px){
body:has(.cookie-banner.is-visible) .dr-fab{bottom:calc(14px + 210px);}
}
@media (prefers-reduced-motion:reduce){
.dr-fab_btn,.dr-fab_eticheta{transition:none;}
.dr-fab_btn:hover{transform:none;}
}
/* =========================================================================
HERO-UL PAGINILOR DE SERVICIU — propor.tiile celor doua coloane
Grila da 791px textului si 674px clipului, dar niciuna nu folosea spatiul:
TEXTUL statea intr-un max-width de 523px, adica in doua treimi din coloana
lui. Titlul de 72px se rupea in patru randuri scurte („Dinti aliniati si o /
muscatura / corecta, la / orice varsta"), iar paragraful citea ingust.
CLIPUL avea max-width 400px, dar nicio latime proprie. Cu justify-self:end
si `aspect-ratio` pe media, se stringea la latimea legendei de dedesubt —
213px, jumatate din cat avea voie.
========================================================================= */
.svc-hero_content{max-width:660px;}
.svc-hero_clip{
width:100%;
max-width:440px;
}
@media (max-width:1199px){
.svc-hero_content{max-width:560px;}
.svc-hero_clip{max-width:380px;}
}
@media (max-width:991px){
.svc-hero_content{max-width:none;}
.svc-hero_clip{max-width:320px;}
}
/* =========================================================================
NAVBAR PE MOBIL — fixa de la inceput, si pe masura logo-ului
Doua probleme, amandoua vizibile pe telefon:
1. Bara era `position:absolute` pana la 320px de scroll, deci pleca odata cu
pagina. Devenea fixa abia dupa ce se prindea starea de sticla — pe un
ecran de telefon asta inseamna ca meniul si butonul de programare lipseau
exact cand aveai nevoie de ele.
2. Containerul avea 56px de logo intr-o bara de 50px. Logo-ul iesea din bara,
iar marginea de jos taia strambn.
Pe telefon bara nu se mai ascunde nici la scroll in jos: pe desktop ai spatiu
sa o recuperezi derulând putin in sus, pe mobil doar pierzi accesul la meniu.
========================================================================= */
@media (max-width:991px){
.navbar_wrap{
position:fixed;top:0;left:0;right:0;
z-index:1000;
background-color:rgba(25,25,39,.92);
-webkit-backdrop-filter:blur(14px) saturate(1.6);
backdrop-filter:blur(14px) saturate(1.6);
border-bottom:1px solid rgba(255,255,255,.10);
}
/* starea de sticla nu mai are ce ascunde: bara e deja fixa si ramane vizibila */
.navbar_wrap.dr-nav-glass{transform:none!important;}
/* Bara pictata avea 50px, dar continutul 60px: logo-ul iesea din fundal cu
zece pixeli, iar marginea de jos taia prin el. Inaltimea o dicteaza acum
bara, iar containerul o umple. */
.navbar_wrap{
min-height:64px;
display:flex;align-items:center;
}
.navbar_container{
min-height:64px;width:100%;
display:flex;align-items:center;
padding-top:4px;padding-bottom:4px;
}
.logo_image,
.navbar_wrap.dr-nav-glass .logo_image{height:48px!important;}
}
@media (max-width:479px){
.navbar_wrap{min-height:60px;}
.navbar_container{min-height:60px;}
.logo_image,
.navbar_wrap.dr-nav-glass .logo_image{height:44px!important;}
}
/* Fara backdrop-filter (Firefox vechi, unele browsere de Android) bara ramane
opaca, altfel textul alb ar sta peste imaginea din hero. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
@media (max-width:991px){
.navbar_wrap{background-color:rgba(25,25,39,.97);}
}
}
/* =========================================================================
SERVICIILE DE PE PRIMA PAGINA — stivuite pe mobil, carusel pe desktop
Sablonul are doua mecanisme de derulare: .service_sticky-* pentru desktop si
.scroll-mobile_ pentru telefon. Al doilea facea din servicii un carusel
orizontal pe care nu-l vedeai decat pe sfert. Pe mobil il oprim si punem
cardurile unul sub altul.
========================================================================= */
@media (max-width:991px){
/* CARUSELUL DISPARE PE MOBIL.
Sablonul punea `grid-template-columns:1fr 1fr 1fr 1fr 1fr` pe .service_list
si `width:90cqw` (95 sub 767px) pe fiecare card: cinci coloane a cate 90%
din latime inseamna o banda de ~1370px intr-un ecran de 375. Trei servicii
din patru stateau in afara ecranului, iar al patrulea era taiat.
Pe mobil serviciile se citesc, nu se deruleaza lateral: o coloana, cardurile
unul sub altul. Caruselul ramane pe desktop, unde are loc. */
/* Sablonul are DOUA mecanisme, nu unul: .service_sticky-* pentru desktop si
.scroll-mobile_* / .scroll_track / .scroll_list pentru telefon. Al doilea
face banda lata (686px intr-un ecran de 375) si o impinge la stanga. Il
oprim pe tot lantul, altfel grila de o coloana tot iese din ecran. */
.scroll-mobile_trigger,
.scroll-mobile_camera{height:auto!important;position:static!important;transform:none!important;}
.scroll_track,
.scroll_list,
.collection-list-wrapper{
width:100%!important;max-width:100%!important;
transform:none!important;
display:block!important;
}
.service_list{
display:grid!important;
grid-template-columns:1fr!important;
grid-auto-flow:row!important;
grid-column-gap:0!important;
grid-row-gap:var(--_size-variables---element-spacing--6xl)!important;
width:100%!important;
align-items:stretch;
}
.service_item-wrap{width:100%!important;max-width:none!important;height:auto!important;}
.service_item{width:100%!important;}
/* Cardul isi are deja poza lui, in .service-item_showcase, cu etichetele
asezate peste ea. Nu mai adaugam a doua: aparea de doua ori. */
.service_item{padding:var(--_size-variables---element-spacing--2xl);}
}
/* =========================================================================
CARDUL DE SERVICIU — poza in forma siglei, cu etichetele dedesubt
Etichetele stateau INAUNTRUL imaginii, peste un gradient inchis. Octogonul
taie exact colturile de jos, adica peste ele, asa ca blocul cu etichete a
iesit din imagine si a devenit fratele ei in markup.
Pe desktop nimic nu se schimba vizual: blocul se aseaza la loc peste
imagine, absolut, cu acelasi gradient. Pe mobil sta dedesubt, iar
etichetele se recoloreaza — pe fundalul deschis al cardului, conturul alb
de dinainte ar fi fost invizibil.
========================================================================= */
@media (min-width:992px){
.service-item_showcase-inner{position:absolute;inset:0;}
}
@media (max-width:991px){
.service-item_image{
clip-path:url(#gorgosShape);
border-radius:0;
aspect-ratio:225.93/230.75;
height:auto;
}
/* etichetele coboara sub poza: fara gradient, fara inaltime impusa */
.service-item_showcase-inner{
position:static;
height:auto;
background-image:none;
padding:var(--_size-variables---element-spacing--2xl) 0 0;
}
.service-item_showcase{min-height:0;}
/* pe fundal deschis, conturul alb dispare */
.service-item_tag{
border-color:var(--primitive-color--neutral-300);
background:#fff;
color:var(--primitive-color--primary-800);
}
.service-tag_icon{color:var(--dr-accent);}
}
/* =========================================================================
TARIFELE PE MOBIL — randuri mai stranse si grupuri pliate
Sectiunea de preturi de pe o pagina de serviciu ajungea la 2513px, adica
peste trei ecrane de telefon: 13 randuri a cate 93px plus blocul lateral.
Randurile se string, iar grupurile de dupa primul se desfac dintr-un buton
(vezi MODUL 4 din dr-liquid.js).
========================================================================= */
@media (max-width:991px){
/* Plierea grupurilor a fost scoasa: ascundea tarife, iar problema reala era
tocmai ca preturile nu se vedeau. Raman doar randurile mai stranse, care
scurteaza sectiunea fara sa ascunda nimic. */
/* 93px per rand veneau din padding pe fiecare celula, pe doua randuri de text */
.pricing_table th,
.pricing_table td{padding-top:12px;padding-bottom:12px;}
.pricing_group + .pricing_group{margin-top:32px;}
/* octogonul de pret nu are nevoie de 283px pe un ecran de telefon */
.pricing_anchor{max-width:260px;margin-left:auto;margin-right:auto;}
}
/* =========================================================================
BLOCUL LATERAL DE PRETURI — lipit doar pe desktop
In dentalrocks.css exista trei reguli pentru acelasi element:
9726 position:sticky (intentia pentru desktop)
9762 @media(max-width:1199px) position:static (resetul pentru mobil)
9869 position:sticky din nou, fara media query
A treia vine dupa si le bate pe amandoua, la orice latime. Asa ajungea
blocul cu octogonul de pret sa se fixeze pe telefon si sa treaca peste
tabelul de tarife la derulare — 849px de card intr-un ecran de 812.
Repunem resetul, dupa toate cele trei.
========================================================================= */
@media (max-width:1199px){
.pricing_aside{position:static;top:auto;}
}
/* =========================================================================
v46 — cardurile "povestea" si railul de coroane: fara octogon in card.
Exact boala descrisa mai sus la carduri: octogonul decupat inauntrul
cardului indigo lasa patru pene negre in colturi. Imaginea umple acum
tot cardul (colturile le da cardul insusi, prin border-radius), iar
lizibilitatea textului alb o tine un gradient peste imagine, nu fundalul
gol al cardului.
========================================================================= */
.our-story_item{overflow:hidden;}
.our-story_item-image_wrap{
clip-path:none;
border-radius:0;
}
.our-story_item-image_wrap::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,
rgba(25,25,39,.12) 0%,
rgba(25,25,39,.34) 45%,
rgba(25,25,39,.9) 100%);
}
/* =========================================================================
v47 — pozele medicilor NU se mai taie in octogon (cerinta clientului):
portretele raman intregi, cu colturi rotunjite. Octogonul ramane pe
restul imaginilor decorative.
========================================================================= */
.home-team_oct .oct-media{clip-path:none;border-radius:16px;overflow:hidden;}
.team-image_wrap{clip-path:none !important;border-radius:16px;overflow:hidden;}
/* =========================================================================
v48 — ECHIPA DE SUPORT (asistente medicale + receptie) pe /despre-noi
Grila secundara sub cardurile medicilor: aceleasi forme (raza 2xl, imagine
2:3), dar patru coloane si carduri mai scunde, ca ierarhia sa ramana la
medici. Marimile de font vin din scara semantica a template-ului.
========================================================================= */
.dr-staff{margin-top:var(--_size-variables---element-spacing--20xl,110px);}
.dr-staff_header{
display:flex;
flex-flow:column;
gap:var(--_size-variables---element-spacing--xs);
margin-bottom:var(--_size-variables---element-spacing--4xl);
max-width:56ch;
}
.dr-staff_title{
font-size:var(--_font---font-size-semantics--h5);
line-height:var(--_font---line-height--115);
letter-spacing:var(--_font---letter-spacing--2px);
font-weight:var(--_font---font-weight--500);
}
.dr-staff_intro{font-size:var(--_font---font-size-semantics--body-lg);}
.dr-staff_grid{
display:grid;
grid-template-columns:repeat(4,1fr);
column-gap:var(--_size-variables---element-spacing--2xl);
row-gap:var(--_size-variables---element-spacing--4xl);
}
.dr-staff_item{
display:flex;
flex-flow:column;
gap:var(--_size-variables---element-spacing--md);
}
.dr-staff_image-wrap{
border-radius:16px;
overflow:hidden;
aspect-ratio:2/3;
background:var(--primitive-color--neutral-100);
}
.dr-staff_image{
width:100%;
height:100%;
object-fit:cover;
object-position:50% 20%;
display:block;
transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.dr-staff_item:hover .dr-staff_image{transform:scale(1.04);}
.dr-staff_content{display:flex;flex-flow:column;gap:var(--_size-variables---element-spacing--xxs);}
.dr-staff_name{
font-size:var(--_font---font-size-semantics--body-lg);
line-height:var(--_font---line-height--135);
font-weight:var(--_font---font-weight--500);
/* e
, deci ar prinde tracking-ul de titlu (-2.4px). Pe 18px literele se
ating si numele par lipite; ii dam spatierea textului de corp. */
letter-spacing:var(--_font---letter-spacing--0-36px);
}
.dr-staff_role{
font-size:var(--_font---font-size-semantics--body-base);
color:var(--dr-accent);
}
@media screen and (max-width:991px){
.dr-staff_grid{grid-template-columns:repeat(3,1fr);}
}
@media screen and (max-width:767px){
.dr-staff_grid{grid-template-columns:repeat(2,1fr);}
}
@media screen and (max-width:479px){
.dr-staff_grid{
column-gap:var(--_size-variables---element-spacing--md);
row-gap:var(--_size-variables---element-spacing--2xl);
}
}
@media (prefers-reduced-motion:reduce){
.dr-staff_image,.dr-staff_item:hover .dr-staff_image{transition:none;transform:none;}
}
/* =========================================================================
v49 — ZONA ECHIPA, FARA ANIMATIE LA SCROLL (cerinta clientului)
Interactiunea Webflow punea cardurile medicilor pe opacity:0 si le cobora
cu 25%, apoi le urca la scroll. Am scos declansatorul din pagina, dar IX2
tot apuca sa scrie starea initiala inline pe fiecare card — de aceea aici
e nevoie de !important, altfel raman invizibile.
========================================================================= */
/* Portretele medicilor au putin spatiu deasupra capului, iar cardul e mai lat
decat raportul pozei: taind egal sus si jos, pe ecran mare se pierdea varful
capului. Mutam punctul focal in treimea de sus — restul se taie de jos, unde
oricum sta panoul alb cu numele. */
.team-image_wrap{--focal:50% 8%;}
#team-members .team_item{
opacity:1 !important;
transform:none !important;
}
/* Acelasi lucru pentru poza: interactiunea o pornea marita cu 50% si o aducea
la 1 in timpul animatiei. Fara declansator ramanea marita, adica taiata
peste cap. O tinem la scara reala. */
#team-members .team_image{
transform:none !important;
}