/** * Antetul — două lățimi, două stări. * * Toate valorile vin din **exporturi la 1x**, unde 1 pixel = 1 px de machetă, * plus panourile de tipografie. Nimic măsurat pe capturi. → `30-antet.md` * * ┌── DESKTOP, Default ─────────────────────────────────────────────────────┐ * │ 48 + 146 + 32 + 704 + 32 + (42·3 + 16·2) + 32 + 240 = 1392 = 1440 − 48 │ * │ container 1344, ca la subsol · bara albă 82 · bara albastră 64 │ * └─────────────────────────────────────────────────────────────────────────┘ * * 🔑 **O SINGURĂ structură, două așezări.** Căutarea e în rândul de sus pe * desktop și în cel de jos pe telefon — se mută din `grid-template-areas`. * Același element, altă celulă, zero marcaj dublat. * * 🔑 **Barele sunt un gradient, nu două cutii.** Rândurile au înălțimile din * machetă, iar fundalul e un `linear-gradient` cu oprire exact la granița * dintre ele. Așa culorile ating marginile ecranului fără margini negative și * fără două containere în plus. */ /* * 🔑 Variabilele se ÎNREGISTREAZĂ, ca să poată fi animate. * * O variabilă CSS obișnuită nu se poate tranziționa — browserul nu știe că e o * lungime, deci sare direct la valoarea nouă. Cu `@property` îi spunem tipul, și * de aici animăm dintr-o singură declarație **și înălțimile rândurilor, și * oprirea gradientului care desenează cele două bare**. * * Fără asta ar fi trebuit două cutii separate cu înălțimi animate, plus un * gradient care oricum nu se poate anima. */ @property --ant-h1 { syntax: ''; inherits: true; initial-value: 48px; } @property --ant-h2 { syntax: ''; inherits: true; initial-value: 48px; } @property --ant-logo-lat { syntax: ''; inherits: true; initial-value: 91px; } @property --ant-bulina-marime { syntax: ''; inherits: true; initial-value: 42px; } @property --ant-bulina-glif { syntax: ''; inherits: true; initial-value: 24px; } @property --ant-cos-lat { syntax: ''; inherits: true; initial-value: 106px; } @property --ant-logo-inalt { syntax: ''; inherits: true; initial-value: 20px; } /* * ══════════════════ CÂT DE ÎNALT E ANTETUL, SPUS ȘI ÎN AFARA LUI ══════════ * * 🔑 Antetul e `sticky`, deci orice ALT element `sticky` din pagină i se * ascunde dedesubt dacă nu-i știe înălțimea. Sumarul de pe coș pățea exact * asta: se lipea la 24px de marginea ferestrei, adică **84px sub antet**. * * 🔑 Se publică AICI, fiindcă aici sunt cifrele. `--ant-h1` și `--ant-h2` sunt * declarate pe `.inco-antet`, deci nu ajung la nimeni din afara lui; iar o * valoare scrisă în foaia coșului ar fi fost al doilea loc care hotărăște cât * e de înalt antetul — și s-ar fi depărtat la prima ajustare de aici. * * ⚠️ Pe desktop e înălțimea din starea DERULATĂ (52 + 56), nu cea de repaus * (82 + 64). Nu e o scăpare: un element se lipește abia după ce a fost * derulată pagina, iar antetul se strânge la 80px de derulare. Măsurat pe coș: * sumarul începe să se lipească la ~240px, deci antetul e strâns cu 160px * înainte ca el să ajungă acolo. Starea înaltă nu se întâlnește niciodată cu * un element lipit. */ :root { --inco-antet-h: 96px; } /* telefon: 48 + 48, la fel în ambele stări */ @media (min-width: 900px) { :root { --inco-antet-h: 108px; } /* desktop, derulat: 52 + 56 */ } .inco-antet { --ant-alb: var(--white-bg, #FAFCFF); --ant-albastru: var(--green-fill-primary-default, #056E9B); --ant-cerneala: var(--darker-cyan, #0A435C); --ant-bulina: var(--blue-card-fill-default, #E8F8FF); --ant-contur: var(--inputs-palceholder, #53798A); /* Telefon: 48 + 48. Desktopul le suprascrie mai jos. */ --ant-h1: 48px; --ant-h2: 48px; --ant-pad: 16px; --ant-container: 328px; --ant-raza: 8px; --ant-logo-lat: 91px; --ant-bulina-marime: 32px; --ant-cos-lat: 106px; /* * 🔑 Lipit sus la ORICE lățime și în AMBELE stări. * * Prima variantă îl făcea `sticky` doar când primea `.is-derulat`. Adică * exact clasa care schimbă mărimile schimba și felul de poziționare — două * surse de instabilitate în același comutator. Acum `.is-derulat` schimbă * doar cât e de înalt și umbra; poziționarea nu se clatină niciodată. */ position: sticky; inset-block-start: 0; z-index: 100; /* Trecerea între cele două stări — 400ms ease, cerut de Seba. */ transition: --ant-h1 var(--ant-tranzitie, .4s ease), --ant-h2 var(--ant-tranzitie, .4s ease), --ant-logo-lat var(--ant-tranzitie, .4s ease), --ant-bulina-marime var(--ant-tranzitie, .4s ease), --ant-bulina-glif var(--ant-tranzitie, .4s ease), --ant-cos-lat var(--ant-tranzitie, .4s ease), --ant-logo-inalt var(--ant-tranzitie, .4s ease), box-shadow var(--ant-tranzitie, .4s ease); box-sizing: border-box; display: grid; grid-template-rows: var(--ant-h1) var(--ant-h2); align-items: center; column-gap: 8px; /* Pe telefon, paddingul simplu: conținutul umple ecranul. */ padding-inline: var(--ant-pad); /* Cele două bare, dintr-o singură declarație. */ background: linear-gradient( var(--ant-alb) 0 var(--ant-h1), var(--ant-albastru) var(--ant-h1) ); grid-template-columns: auto 1fr auto; grid-template-areas: 'logo . cos' 'categorii cautare cautare'; } .inco-antet *, .inco-antet ::before, .inco-antet ::after { box-sizing: border-box; } .inco-antet__logo { grid-area: logo; display: flex; } .inco-antet__cautare { grid-area: cautare; } .inco-antet__actiuni { grid-area: actiuni; } .inco-antet__cos { grid-area: cos; justify-self: end; } .inco-antet__categorii { grid-area: categorii; } .inco-antet__mega { grid-area: categorii; } .inco-antet__meniu { grid-area: meniu; } .inco-antet__telefon { grid-area: telefon; } /* Pe telefon, cele trei buline și meniul orizontal intră în sertar. */ .inco-antet__actiuni, .inco-antet__meniu, .inco-antet__telefon, .inco-antet__mega { display: none; } .inco-antet__logo-img { inline-size: var(--ant-logo-lat); block-size: var(--ant-logo-inalt, 20px); object-fit: contain; display: block; } /* ───────────────────────────────────────────────────────────────── căutarea */ .inco-antet__cautare { position: relative; display: flex; align-items: center; block-size: 32px; border: 1px solid var(--ant-alb); border-radius: var(--ant-raza); background: transparent; } /* * 🔴 Prefixat cu containerul, ca de obicei. * * `input[type="search"]` din `reset.css`-ul temei valorează (0,1,1) și ar fi * bătut o clasă simplă. A șasea oară pe același selector. → §4g */ .inco-antet .inco-antet__cautare-camp { flex: 1; min-inline-size: 0; margin: 0; padding-inline: 12px; border: 0; border-radius: var(--ant-raza); background: transparent; font-family: Roboto, Inter, system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: .01em; color: var(--ant-alb); box-shadow: none; appearance: none; } .inco-antet .inco-antet__cautare-camp:focus { outline: 0; box-shadow: none; } .inco-antet .inco-antet__cautare-camp::placeholder { color: var(--ant-alb); opacity: 1; } .inco-antet .inco-antet__cautare-buton { flex: none; display: flex; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ant-alb); cursor: pointer; } .inco-antet .inco-antet__cautare-buton svg { inline-size: 20px; block-size: 20px; display: block; } /* ─────────────────────────────────────────────────────── butonul „Categorii" */ .inco-antet .inco-antet__categorii { display: flex; align-items: center; gap: 8px; block-size: 32px; margin: 0; padding-inline: 12px; border: 0; border-radius: var(--ant-raza); background: var(--ant-alb); color: var(--ant-albastru); font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; cursor: pointer; } .inco-antet__categorii-icon { display: flex; line-height: 0; } .inco-antet__categorii-icon svg { block-size: 16px; inline-size: auto; display: block; } /* ───────────────────────────────────────────────────────────── partea de sus */ /* * 🔴 AICI nu se declară `display`. * * Îl declarasem `flex` și, fiind scris DUPĂ regula care ascunde bulinele pe * telefon, câștiga la specificitate egală — deci apăreau pe telefon, ieșeau * 59px din ecran și îi mai făceau grilei **două rânduri fantomă** * *(`48px 48px 0px 44px` în loc de `48px 48px`)*, iar antetul creștea la 140. * * Aceeași greșeală ca la butonul „Vezi tot" pe 9 aug: **un `@media` nu bate * ordinea, doar o filtrează.** `display` se declară o singură dată per * breakpoint, nu de două ori în fișier. */ .inco-antet__actiuni { align-items: center; gap: 16px; } /* * 🔴 Cele trei pastile vin din trei module diferite, cu trei structuri diferite. * * Măsurat în pagină, nu presupus: * cont `div.inco-acc-btn-bar` > `a.inco-acc-btn` 44×44 * favorite `a.inco-wishlist-counter-link` > `span.…-counter` 42×42, dar spanul 44 * comparator `div.inco-cmp-btn-bar` > `a.inco-cmp-pill` 44×44 * * Prima variantă scria `.inco-account-button` — **clasă care nu există**. * Nimic nu semnalează: regula pur și simplu nu se aplică, iar bulina rămâne * 44 lângă una de 42. De aici „nu este consistent". * → **O clasă dintr-un modul străin se citește din pagină, nu se ghicește.** * * Se aliniază toate la 42 AICI, într-un loc, nu în trei fișiere. Intră și * învelișurile interioare, altfel un span de 44 iese din pastila de 42. */ /* * 🔴 Prefixate cu `.inco-antet` — a ȘAPTEA oară aceeași lecție. * * Regulile lor de mărime cântăresc tot (0,2,0), dar foile lor se încarcă DUPĂ * a noastră. La specificitate egală câștigă cea de jos, deci ale mele pierdeau * în tăcere: contul și comparatorul rămâneau 44 lângă favorite la 42. * * Măsurat: cu o clasă în plus în selector — (0,3,0) — toate trei trec pe 42. * → **Componentele noastre se scriu prefixate cu containerul lor.** §4g */ .inco-antet .inco-antet__actiuni .inco-acc-btn, .inco-antet .inco-antet__actiuni .inco-wishlist-counter-link, .inco-antet .inco-antet__actiuni .inco-wishlist-counter, .inco-antet .inco-antet__actiuni .inco-cmp-pill { inline-size: var(--ant-bulina-marime, 42px); block-size: var(--ant-bulina-marime, 42px); border-radius: 999px; background: var(--ant-bulina); color: var(--ant-cerneala); } /* * 🔑 A PATRA pastilă: coșul. Cerut de Seba — *„toate cele 4 buline cu aceleași * proprietăți, să arate la fel și să se comporte la fel"*. * * Nu e rotundă, dar face parte din aceeași serie: aceeași înălțime, aceeași * rază, aceeași tranziție. Măsurată în pagină, venea **269×44**; macheta cere * **240×42**, iar la derulare 210×32. * * Înălțimea o ia din aceeași variabilă ca bulinele, deci se strâng împreună, în * același ritm — nu din două valori care ar putea să se depărteze. */ .inco-antet .inco-antet__cos .inco-cartbtn { /* * 🔴 MINIM, nu lățime fixă. * * Pusesem `inline-size: 240px`, cât zice macheta. Dar 240 e lățimea cu coșul * GOL — „0 produs(e) - 0.00 lei". Cu coșul plin, eticheta devine „5 produs(e) * – 273,30 lei", crește, împinge blocul albastru dincolo de 240, iar * `overflow: hidden` îl taie: **iconița de coș dispărea**. * * → **O valoare din machetă e măsurată pe un conținut anume.** Înainte s-o * fixez, mă întreb dacă acel conținut se schimbă. */ inline-size: auto; min-inline-size: var(--ant-cos-lat, 240px); block-size: var(--ant-bulina-marime, 42px); border-radius: var(--ant-raza); overflow: hidden; } /* * Blocul albastru din dreapta: colțuri drepte, iar rotunjirea din exterior o dă * `overflow: hidden` de pe buton. Cerut de Seba. * * Așa raza e declarată o SINGURĂ dată — pe buton. Cu rază proprie pe bloc, cele * două ar fi trebuit ținute egale de mână, iar la prima schimbare s-ar fi văzut * o crestătură. */ .inco-antet .inco-antet__cos .inco-cartbtn__icon { flex: none; border-radius: 0; } /* Învelișurile exterioare nu au mărime proprie — o iau de la pastilă. */ .inco-antet .inco-antet__actiuni .inco-acc-btn-bar, .inco-antet .inco-antet__actiuni .inco-cmp-btn-bar { inline-size: auto; block-size: auto; display: flex; } /* Glifele: 24 în repaus, mai mici la derulare. */ .inco-antet .inco-antet__actiuni svg { inline-size: var(--ant-bulina-glif, 24px); block-size: var(--ant-bulina-glif, 24px); } .inco-antet__cos { display: flex; align-items: center; } /* * 🔴 Focusul — a PATRA încercare. De data asta declar TOT, nu doar conturul. * * Ce știm sigur: rozul apare pe `:focus`, pe butoanele noastre *(„Meniu" și * „✕ Meniu")*, iar culoarea de accent din macOS **nu e roz** — deci nu e inelul * de focus al sistemului, ci o regulă CSS. * * Trei încercări au eșuat fiindcă am reparat de fiecare dată **o singură * proprietate**: întâi pe starea greșită *(`:focus-visible` în loc de `:focus`)*, * apoi fără să câștig cascada, apoi doar `outline` — dar rozul poate veni la fel * de bine din `border-color`, `box-shadow` sau `background`. * * 🔑 Aceeași lecție ca §4n, dusă mai departe: **pe o STARE se declară tot ce * poate atinge tema acolo**, nu doar ce cred eu că s-a schimbat. Costă cinci * linii; ghicitul a costat patru încercări. */ .inco-antet :focus, .inco-antet :focus-visible, .inco-antet-sertar :focus, .inco-antet-sertar :focus-visible { outline: 2px solid var(--darker-cyan, #0A435C) !important; outline-offset: 2px !important; border-color: inherit !important; box-shadow: none !important; } /* Pe bara albastră un contur închis nu s-ar vedea. */ .inco-antet .inco-antet__categorii:focus, .inco-antet .inco-antet__categorii:focus-visible, .inco-antet .inco-antet__meniu-link:focus, .inco-antet .inco-antet__telefon:focus, .inco-antet .inco-antet__cautare:focus-within { outline-color: var(--ant-alb, #FAFCFF) !important; } /* * Culorile proprii ale butoanelor NU se schimbă la focus. Le redeclarăm, ca * nicio regulă străină să nu le poată muta. → §4n */ .inco-antet .inco-antet__categorii:focus, .inco-antet .inco-antet__categorii:focus-visible { background: var(--ant-alb, #FAFCFF) !important; color: var(--ant-albastru, #056E9B) !important; } .inco-antet-sertar .inco-antet-sertar__inchide:focus, .inco-antet-sertar .inco-antet-sertar__inchide:focus-visible { background: var(--green-fill-primary-default, #056E9B) !important; color: var(--white-bg, #FAFCFF) !important; outline-color: var(--darker-cyan, #0A435C) !important; } /* Câmpul arată focusul pe cutie, nu pe input. */ .inco-antet .inco-antet__cautare-camp:focus { outline: 0 !important; } /* * 🔑 Cât scrii în căutare, câmpul e VERDE. Cerut de Seba. * * `:focus-within`, nu `:focus` pe input: verdele trebuie să prindă tot câmpul — * chenarul, nu doar textul — iar focusul stă pe ``, care e copil. * * ⚠️ `!important` rămâne, și nu e lene. Hello Elementor declară stări proprii * pe `input[type=search]` și pe `[type=submit]`, la specificitate egală cu a * noastră și încărcate DUPĂ noi; fără el reapare rozul `#CC3366`. Sunt patru * încercări în urmă pe exact regula asta. → §4t * * `#0B8669` scris direct: e singurul verde al proiectului, iar tokenii de * culoare nu sunt declarați nicăieri. → §4x */ .inco-antet .inco-antet__cautare:focus-within { border-color: #0B8669 !important; outline: 2px solid #0B8669 !important; outline-offset: 2px !important; } /* După mouse sau atingere nu rămâne niciun contur. */ .inco-antet :focus:not(:focus-visible), .inco-antet-sertar :focus:not(:focus-visible) { outline: 0 !important; } /* ══════════════════════════════════════════════ DESKTOP, de la 900 în sus ══ */ @media (min-width: 900px) { .inco-antet { --ant-h1: 82px; --ant-h2: 64px; --ant-pad: 48px; --ant-container: 1344px; --ant-logo-lat: 146px; --ant-bulina-marime: 42px; --ant-cos-lat: 240px; --ant-logo-inalt: 32px; column-gap: 32px; /* * 🔑 Fundalul pe toată lățimea, conținutul oprit la 1344 — ca subsolul și * ca restul secțiunilor. * * `max()` le face pe amândouă dintr-o declarație: până la 1440 rămân cei * 48 din machetă; peste, paddingul crește singur până când ce e înăuntru * are exact `--ant-container`. * * Alternativa ar fi fost încă un `
` cu `max-inline-size` — dar atunci * fundalul ar fi trebuit mutat pe el, iar cele două bare n-ar mai fi ajuns * la marginile ferestrei. * * ⚠️ NU se pune pe telefon: acolo `--ant-container` e 328, iar pe un ecran * de 414 conținutul ar fi rămas tot 328, cu aer inutil în lături. */ padding-inline: max( var(--ant-pad), (100% - var(--ant-container)) / 2 ); /* * Patru coloane servesc amândouă rândurile: * sus: logo | căutare | acțiuni | coș * jos: Categorii | meniu (2 coloane) | telefon */ /* Coloana 1 e cât logoul, ca al doilea rând să se poată raporta la ea. */ grid-template-columns: var(--ant-logo-lat) 1fr auto auto; grid-template-areas: 'logo cautare actiuni cos' 'categorii meniu meniu telefon'; } .inco-antet__actiuni, .inco-antet__meniu, .inco-antet__telefon { display: flex; } /* * Pe desktop declanșatorul e al mega meniului, nu al nostru — vezi * `Render::buton_categorii()`. Butonul nostru rămâne doar pentru sertar. * * ⚠️ NU restilizez `.smm__toggle`. Componenta era în antetul vechi și arăta * cum trebuie; aici doar o așez. */ .inco-antet__mega { display: block; } .inco-antet__categorii { display: none; } .inco-antet__actiuni { gap: 16px; } .inco-antet__cautare { block-size: var(--ant-bulina-marime); border-color: var(--ant-contur); } .inco-antet .inco-antet__cautare-camp { font-size: 16px; letter-spacing: 0; color: var(--ant-cerneala); padding-inline: 16px; } .inco-antet .inco-antet__cautare-camp::placeholder { color: var(--ant-contur); } .inco-antet .inco-antet__cautare-buton { inline-size: var(--ant-bulina-marime); color: var(--ant-contur); } /* * 🔑 UN SINGUR GOL, peste tot pe rândul de jos. * * Între butonul „Categorii" și „Magazin", și între itemii de meniu, e * aceeași valoare — cerut de Seba pe 11 august. De aia e o variabilă, nu * două numere: scrise separat, s-ar fi depărtat la prima corectură, exact * cum se depărtaseră *(40 între itemi, 24 la buton)*. * * 🔴 Aveam aici o formulă greșită, și greșeala e instructivă: * * calc( (130px + 40px) - (var(--ant-logo-lat) + 32px) ) * * Scrisesem `130px` fiindcă **atâta are butonul în machetă**. În pagină el * are 146 — umple coloana, care e cât logoul. Deci golul ieșea 40 − 16 = 24. * Formula nu greșea la aritmetică, ci la ipoteză. * → **O valoare din machetă nu descrie elementul construit.** * * Acum golul nu se mai leagă de lățimea butonului: coloana 1 e cât logoul, * iar butonul e `display: block`, deci o umple întotdeauna. Marginea rămâne * o singură scădere — cât vreau minus cât dă grila. * * 🔴 MENIUL SE STRÂNGE sub 1100px, cerut de Seba. * * Cu 40 fix, între 900 *(de unde pornește așezarea de desktop)* și ~1030 * meniul intra peste numărul de telefon. Măsurat: la 905px se suprapuneau * deja 74px — bug vechi, nu adus de golul nou. * * Cifrele, verificate pe toate lățimile: textul meniului are 373, telefonul * 140, butonul 146, paddingurile 2×48, grila 32. La 900 încap 16 de gol * *(453 din 470 disponibili)*; de la 1100 în sus încap cei 40 din machetă. */ .inco-antet { --ant-meniu-gol: clamp(1rem, -5.75rem + 12vw, 2.5rem); /* 16 la 900 → 40 la 1100 */ } .inco-antet__meniu { margin-inline-start: calc(var(--ant-meniu-gol) - 32px); } /* ── meniul ── */ .inco-antet__meniu-lista { display: flex; align-items: center; gap: var(--ant-meniu-gol); margin: 0; padding: 0; list-style: none; } /* * 🔴 `color` se declară și pe hover, chiar dacă nu se schimbă. * `a:active, a:hover { color: #333366 }` din `reset.css` prinde orice link * care nu-și declară culoarea. → §4n * * ⚠️ Ce FACE linkul la hover nu e încă în machetă. Nu inventez → §4m. */ .inco-antet__meniu-link, .inco-antet__telefon { font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: 0; color: var(--ant-alb); text-decoration: none; } .inco-antet__meniu-link:hover, .inco-antet__meniu-link:focus-visible, .inco-antet__telefon:hover, .inco-antet__telefon:focus-visible { color: var(--ant-alb); } .inco-antet__telefon { align-items: center; gap: 8px; justify-self: end; font-weight: 700; } .inco-antet__telefon-icon { inline-size: 24px; block-size: 24px; display: block; } /* ══ starea la derulare: 146 → 108 ══ * * 🔑 Căutarea se LĂȚEȘTE, 704 → 782: logoul și pastila se strâng, iar * spațiul eliberat se duce în ea, nu în goluri. De aia e pe `1fr`. */ .inco-antet.is-derulat { --ant-h1: 52px; --ant-h2: 56px; --ant-logo-lat: 128px; box-shadow: 0 4px 12px rgba(10, 70, 95, .2); } /* O variabilă, nu patru selectoare repetate. */ .inco-antet.is-derulat { --ant-bulina-marime: 32px; --ant-bulina-glif: 20px; --ant-cos-lat: 210px; --ant-logo-inalt: 28px; } } /* * Pe telefon antetul rămâne lipit sus, cu umbră la derulare — macheta arată * aceleași mărimi în ambele stări, doar umbra apare. */ @media (max-width: 899.98px) { /* Mărimile nu se schimbă pe telefon — doar umbra, ca în machetă. */ .inco-antet.is-derulat { box-shadow: 0 4px 8px rgba(10, 70, 95, .2); } } /* ══════════════════════════════════════════ SERTARUL LATERAL (telefon) ════ * * 1:1 cu `Menu - 360px.png`, exportul la 1x primit pe 10 august. Toate cifrele * de mai jos sunt **măsurate pe pixeli**, nu citite din captură: * * pastila „✕ Meniu" x16 y16 · 80×32 · `#056E9B` * rânduri principale pas **42** *(linii la 219, 261, 303, 345, 387, 429, 471)* * linia 1px `#C4D2D7`, de la 16 la 344 * sub-rânduri pas **28** *(„Favorite" 119, „Intră în cont" 147)* * carduri 163 înălțime · gol 8 · bandă de etichetă 36, teal `#139BA3` * text `#0A435C` * * 🔴 Linia NU e sub fiecare rând. În machetă prima apare abia **după „Intră în * cont"** — „Cont", „Favorite" și „Intră în cont" formează un grup fără linii * între ele. Prima variantă punea linie peste tot și se vedea ca un tabel. */ .inco-antet-sertar { position: fixed; inset: 0; z-index: 200; } .inco-antet-sertar[hidden] { display: none; } .inco-antet-sertar__fundal { position: absolute; inset: 0; background: rgba(10, 67, 92, .45); opacity: 0; transition: opacity var(--sertar-durata, .3s) ease; } .inco-antet-sertar.is-deschis .inco-antet-sertar__fundal { opacity: 1; } /* * 🔑 Aceeași tranziție în ambele sensuri. * * `transition` e declarată pe panou, nu pe starea deschisă — deci ieșirea o * folosește la fel ca intrarea, doar în sens invers. Dacă ar fi fost scrisă pe * `.is-deschis`, la închidere clasa ar fi dispărut ÎMPREUNĂ cu tranziția, iar * panoul ar fi sărit instant. Exact asta se vedea. */ .inco-antet-sertar__panou { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: min(360px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow-y: auto; /* Din panoul Figma: `#FAFCFF` la **90%** + `background blur 24`. */ background: rgba(250, 252, 255, .9); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transform: translateX(-100%); transition: transform var(--sertar-durata, .3s) ease; } .inco-antet-sertar.is-deschis .inco-antet-sertar__panou { transform: none; } @media (prefers-reduced-motion: reduce) { .inco-antet-sertar { --sertar-durata: 0s; } } /* ── pastila „✕ Meniu" ── */ .inco-antet-sertar .inco-antet-sertar__inchide { align-self: flex-start; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; /* Din machetă: padding 8, rază 8. Lățimea iese din conținut — 80 la „Meniu". */ padding: 8px; border: 0; border-radius: 8px; background: var(--green-fill-primary-default, #056E9B); color: var(--white-bg, #FAFCFF); font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; } /* * X-ul e cel folosit peste tot în proiect — același din grila de produse. * `M6 6l12 12M18 6L6 18`, grosime 2. Aici la **16px**. */ .inco-antet-sertar__inchide svg { inline-size: 16px; block-size: 16px; display: block; } .inco-antet-sertar__corp { display: flex; flex-direction: column; } /* * 🔴 Rândurile sunt `