` în `page.php`, nu în `header.php`. Șabloanele noastre * cheamă `get_header()` direct, deci wrapperul ăla nu se naște niciodată — * iar banda se agăța exact de el. Clasa de pe `` era pusă corect, masca * era scrisă corect, și totuși nu se desena nimic. **Zero erori.** * * De aia există și `.inco-banda-hex__zona`: o ancoră a noastră, pe care o poate * purta orice șablon propriu. `:is()` nu schimbă specificitatea — ambele * argumente sunt clase. * * 🔑 Un strat care depinde de un wrapper pe care nu-l scriem tu dispare în * tăcere exact acolo unde scriem noi marcajul. */ .inco-hex, .inco-banda-hex :is(.site-main, .inco-banda-hex__zona) { position: relative; isolation: isolate; /* ca stratul de sub conținut să nu cadă sub fundal */ } /* * 🔴 IZOLAREA SE RIDICĂ CÂT E CEVA PESTE TOATĂ PAGINA — 18 august. * * `isolation: isolate` face din gazdă un **context de stivuire**, iar un context * de stivuire e un plafon: tot ce e înăuntru se așază în interiorul lui, oricât * de mare i-ar fi `z-index`-ul. Gazda e `

`, care în rădăcină stă pe * `z-index: auto` — deci sub antetul lipicios *(100)* și sub stiva de * notificări. * * 🔴 Așa a ieșit sertarul de filtre de pe telefon **sub antet**, deși scria * `z-index: 100040`: măsurat, `elementFromPoint(195, 20)` întorcea antetul, iar * jos bara comparatorului. Cifra era corectă și n-avea nicio putere. * * 🔑 **Un `z-index` mare e o promisiune care ține doar în contextul lui.** Nu se * repară crescând cifra — se repară ridicând plafonul. * * ⚠️ Steagul e pe ``, pus de cine deschide panoul, și înseamnă „pe pagina * asta e ceva peste toată pagina". Nu-l pune fagurele și nu-l știe arhiva: * proprietatea o dă tot fișierul care o scrie. * * ✅ Măsurat că nu costă nimic: cu izolarea ridicată, fagurele are **aceiași 268 * de pixeli de linie**, pixel cu pixel — fiindcă fundalul lui `body` se propagă * la pânza rădăcinii, care oricum stă sub stratul de `z-index: -1`. Izolarea * rămâne totuși scrisă: e ieftină, și apără ziua în care gazda capătă un fundal * al ei. */ html.inco-peste-tot .inco-banda-hex :is(.site-main, .inco-banda-hex__zona) { isolation: auto; } /* * 🔴 VOALUL — partea pe care era s-o pierd. * * În exportul la 1x al `Mask group`, **89,4% dintre pixelii cu mască opacă sunt * albi** *(mediana RGB = 255)* și doar 5,7% sunt linie. Pattern-ul din machetă * nu e „linii pe transparent": e un **dreptunghi alb cu linii gri**, iar masca * îl stinge pe tot. Adică fundalul se deschide spre alb acolo unde fagurele e * puternic — nu doar apar niște linii peste `#E8F8FF`. * * Măsurasem înainte pe un JPG al imaginii sursă, unde albul e chiar fundalul * pozei — deci arăta ca „nimic". Exportul cu canal alfa a arătat că albul e * conținut, nu absență. * → **Transparența nu se citește dintr-o imagine fără canal alfa.** * * Implicit e `transparent`, deci pe componentele care nu-l cer nu se schimbă * nimic. */ .inco-hex::before, .inco-hex::after, .inco-banda-hex :is(.site-main, .inco-banda-hex__zona)::before, .inco-banda-hex :is(.site-main, .inco-banda-hex__zona)::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; } .inco-hex::before, .inco-banda-hex :is(.site-main, .inco-banda-hex__zona)::before { background-color: var(--hex-voal, transparent); opacity: var(--hex-voal-opacitate, 1); -webkit-mask-image: var(--hex-stingere, radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%)); mask-image: var(--hex-stingere, radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .inco-hex::after, .inco-banda-hex :is(.site-main, .inco-banda-hex__zona)::after { --hex-placa: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1.732 3%22%3E%3Cpath d=%22M-0.866 0.5L0 1M-0.866 2.5L0 2M0 1L0 2M0 1L0.866 0.5M0 2L0.866 2.5M0.866 -0.5L0.866 0.5M0.866 0.5L1.732 1M0.866 2.5L0.866 3.5M0.866 2.5L1.732 2M1.732 1L1.732 2M1.732 1L2.598 0.5M1.732 2L2.598 2.5%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%22.055%22/%3E%3C/svg%3E'); /* Placa e mai înaltă decât lată cu exact 3/√3 = √3. */ --hex-lat: var(--hex-marime, 32px); --hex-inalt: calc(var(--hex-marime, 32px) * 1.7320508); content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--hex-culoare, currentColor); opacity: var(--hex-opacitate, .14); -webkit-mask-image: var(--hex-placa), var(--hex-stingere, radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%)); mask-image: var(--hex-placa), var(--hex-stingere, radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%)); -webkit-mask-size: var(--hex-lat) var(--hex-inalt), 100% 100%; mask-size: var(--hex-lat) var(--hex-inalt), 100% 100%; -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat; -webkit-mask-position: var(--hex-pozitie, 0 0), 0 0; mask-position: var(--hex-pozitie, 0 0), 0 0; /* Amândouă măștile trebuie să fie opace — fagurele ∩ stingerea. */ -webkit-mask-composite: source-in; mask-composite: intersect; } /* * Rotunjirea se moștenește de la gazdă, altfel colțurile ies pătrate peste un * card cu `border-radius`. */ .inco-hex::before { border-radius: inherit; } /* * ⚠️ Fără mișcare pentru cine a cerut asta din sistem — pattern-ul nu se * animează nicăieri deocamdată, dar regula stă aici de la început, ca la * prima animație să nu fie nevoie de ținut minte. */ @media (prefers-reduced-motion: reduce) { .inco-hex::before { animation: none; transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ BANDA DE SUS — sub antet, pe toate paginile în afară de homepage 🔑 E ACELAȘI utilitar: selectoarele lui `.inco-hex` au fost extinse cu `.inco-banda-hex :is(.site-main, .inco-banda-hex__zona)`. Clasa de body o pune PHP-ul. Zero marcaj nou. 🔑 Banda NU e un element cu înălțime — **gradientul o desenează**. Ancorat la `50% 0%`, fagurele se stinge la raza lui verticală, deci „cât ține banda" e o singură cifră. La subsol e `at 50% 100%`; nodul de sus e rotit −180°. ⚠️ Stă în spate și nu împinge nimic: pseudo-elementele sunt `absolute`, `z-index: -1`, `pointer-events: none`. ───────────────────────────────────────────────────────────────────────────── TOATE cifrele de mai jos sunt MĂSURATE pe exporturile date de Seba, nu deduse. Prima variantă le derivase din proporția subsolului; două din patru erau greșite. → §4q DESKTOP, export 1440×823: • pasul .............. 43px (autocorelație, corelație 0,94) • lățimea liniei ..... 1,00px = 3,1% din pas (placa noastră dă 3,2%) • stingerea verticală LINIARĂ, ajunge la 0 la y ≈ 428 verificare: la y=200 măsurat 0,592 · liniar pe 428 → 0,533 • stingerea orizontală ajunge la 0 la ≈ 730 de la centru TELEFON, export 360×617: • pasul .............. 32,4px • stingerea verticală LINIARĂ, ajunge la 0 la y ≈ 310 • stingerea orizontală PLATĂ — la 25%% din maxim acoperă tot ecranul. Deci pe telefon NU e radială: e o simplă coborâre pe verticală, iar un gradient liniar spune asta exact. Un radial cu rază mare ar fi imitat-o aproximativ. ═══════════════════════════════════════════════════════════════════════════ */ .inco-banda-hex :is(.site-main, .inco-banda-hex__zona) { --hex-marime: 43.2px; /* * 🔑 Culoarea e DATĂ, deci opacitatea nu se mai ghicește: e 1. * * Seba a dat culoarea pe care trebuie s-o aibă linia: **#E3E4E6**. Scrisă * direct, cu opacitate 1, linia iese exact aia — pe orice fundal, fără * aritmetică între o culoare și un procent. * * 🔴 Varianta de dinainte era `#AEAEAE` la `.3`, adică gri **231** peste alb, * apoi `.2` → gri 239. Amândouă erau încercări de a nimeri o valoare pe care * n-o știam. **Când ținta e o culoare, se scrie culoarea** — un procent peste * altă culoare dă rezultatul corect doar cât timp fundalul rămâne alb. * * ⚠️ `#E3E4E6` nu e gri neutru, are o urmă de albastru. Cu `#AEAEAE` la orice * procent n-am fi ajuns niciodată la el, oricât am fi reglat — ieșea mereu * neutru. → §4ac: o valoare nedeclarată se ia din altceva, iar aici „altceva" * era fundalul. * * Măsurat pe export, linia din machetă e gri 221 — deci `#E3E4E6` e mai * palid decât macheta. E o depărtare **asumată**, cerută de Seba. */ --hex-culoare: #E3E4E6; --hex-opacitate: 1; /* * 🔴 200px, nu 428 — iar cifra asta vine din MACHETA COMPUSĂ, nu din export. * * Exportul izolat al frameului `pattern` spune 428: măsurat, stingerea e * liniară și ajunge la 0 acolo. Dar în captura paginii de produs din Figma, * fagurele abia se vede sub firimituri și dispare mult mai sus — atât de * palid încât, măsurat pe coloane curate de fundal, **nu iese deloc peste * zgomotul fundalului** *(pagina e #FCFCFC, nu alb curat)*. * * 🔑 Cele două nu se contrazic: exportul e ASSETUL, nu cum arată el în * pagină. Layerul stă în Figma sub o opacitate de grup sau parțial acoperit, * iar ce vede clientul e compunerea, nu placa. **Am măsurat artefactul * greșit** — aceeași formă cu voalul alb ratat la subsol. → §4q * * Când cele două se bat, câștigă macheta compusă: aia e ce vede omul. */ --hex-stingere: radial-gradient(730px 200px at 50% 0%, #000 0%, transparent 100%); } @media (max-width: 899.98px) { .inco-banda-hex :is(.site-main, .inco-banda-hex__zona) { --hex-marime: 32.4px; /* Liniar, nu radial: măsurat, stingerea orizontală e plată pe 360. */ /* Aceeași proporție ca pe desktop: 200/428 din cei 310 măsurați. */ --hex-stingere: linear-gradient(to bottom, #000 0%, transparent 145px); } }