/* ========================================================================= Stiva de notificări a site-ului. → `src/Notificari.php`, `assets/js/notificari.js` Forma pastilei vine din Figma, `Notification` varianta `Type=Error` #18256:11628 — singura variantă desenată acolo: pastilă rază 999, bulină 24×24 cu bordură, text Inter Semi Bold 16. Varianta de reușită NU e în machetă; e aceeași formă pe verdele nostru, hotărât cu Seba pe ecran. ⚠️ BLINDAJ DE SPECIFICITATE — clasele dublate NU sunt greșeli. Tema Hello Elementor se încarcă DUPĂ foile noastre și livrează `.page-content a` (0,1,1) cu `text-decoration: underline` și `a:hover` cu `color: #c36`. O singură clasă pierde în fața lor; dublată, câștigă fără `!important`. Tiparul e cel din `pill.css` și `base.css`. ========================================================================= */ .inco-notificari { /* * 🔑 Culoarea spune CINE vorbește, nu dacă a mers sau nu. * * Hotărât de Seba: comparatorul albastru, favoritele pe roșul lor, bara care * rămâne pe verde. De aia variantele NU se numesc „succes" și „eroare" — * mesajul de scoatere din favorite e tot roșu, deși nu e nicio eroare. Un * nume de stare ar fi fost o minciună chiar în clasă. * * Valorile nu sunt alese aici, sunt luate din ce e deja pe carduri: * #0B8669 — verdele nostru *(prețul redus, butonul apăsat)* * #056E9B — albastrul de brand *(butoanele din colțul cardului)* * #E11D48 — roșul de favorite, din `wishlist.css` *(și insigna de reducere)* * #D73B3B — roșul de eroare, din Figma `Type=Error` #18256:11628 */ --inco-notif-verde: #0B8669; --inco-notif-albastru: #056E9B; --inco-notif-rosu: #E11D48; --inco-notif-eroare: #D73B3B; --inco-notif-alb: #FAFCFF; --inco-notif-gol: 12px; position: fixed; inset-inline-end: 24px; /* * 🔑 Decalajul e ÎMPRUMUTAT de la `inco-plus-checkout`: `notify.js` pune * `--inco-toast-offset` pe `` cât timp cardul de adăugare în coș e * deschis, cu înălțimea lui. Așa stiva urcă deasupra cardului în loc să * cadă peste el. Dacă modulul lipsește sau cardul e așezat altundeva, * `var()` cade pe 0 și nimic nu depinde de asta. */ bottom: calc(24px + var(--inco-toast-offset, 0px)); /* * Peste pagină, dar sub ferestrele modale ale contului (9995, 9996). * * 🔴 Comentariul de aici zicea „sub coșul lateral (9990)". Nu era adevărat: * 9993 e PESTE 9990, iar bara chiar cădea peste panou — 396px din ea, exact * peste „Vezi coșul" și „Finalizare". Copiasem afirmația din `notify.css`, * unde e la fel de falsă. **O afirmație despre straturi se verifică * comparând numerele, nu recitind propoziția.** * * Coșul lateral nu se rezolvă din `z-index` — o cifră mai mică l-ar fi pus * sub panou, dar tot peste fundalul lui, adică peste o fereastră modală. * Se rezolvă retrăgând stiva cât e panoul deschis; vezi mai jos. */ z-index: 9993; display: flex; /* * 🔑 AICI e toată regula de ordine. * * `column-reverse` desenează primul copil jos de tot. JS-ul pune permanenta * prima în DOM și pe cele trecătoare după ea, deci: permanenta stă jos, * restul urcă deasupra, iar cea mai nouă e sus. Nimic nu se poate * intercala, fiindcă nicio poziție nu e calculată de noi. */ flex-direction: column-reverse; align-items: flex-end; box-sizing: border-box; max-width: calc(100vw - 32px); /* * Containerul acoperă un colț întreg de ecran, dar e gol aproape tot timpul. * Fără asta ar fura clicurile de pe ce e dedesubt. Notificările îl repun. */ pointer-events: none; /* Întoarcerea, după ce coșul lateral a plecat. Vezi regula de mai jos. */ transition: opacity .22s ease, visibility 0s linear; } /* * 🔴 CÂT E COȘUL LATERAL DESCHIS, STIVA SE RETRAGE. * * Panoul e o fereastră modală: fundal, capcană de focus, scroll blocat. Nimic * nu are voie peste el — și nu din estetică. Măsurat: bara verde acoperea 396 * din cei 420px ai panoului, fix peste „Vezi coșul" și „Finalizare", iar * `elementFromPoint` întorcea notificarea, nu butonul. **Butoanele nu se * puteau apăsa.** Semnalat de Seba. * * 🔑 Nu se rezolvă din `z-index`. O cifră sub 9990 ar fi băgat stiva sub panou, * dar tot peste fundalul întunecat — adică vizibilă peste o fereastră modală, * pe jumătatea de ecran care nu e panou. Singurul răspuns corect la „ce se * întâmplă cu notificările cât e modalul deschis?" e „nu se văd". * * 🔑 `inco-cart-open` stă pe `` cât timp panoul e PE ECRAN, ieșirea * inclusă — vezi `side-cart.js`. De aia aici nu e scrisă nicio durată: bara se * întoarce când panoul chiar a plecat, nu după un număr copiat din alt pachet * care s-ar fi depărtat de el la prima retușare. */ html.inco-cart-open .inco-notificari { visibility: hidden; opacity: 0; transition: opacity .12s ease, visibility 0s linear .12s; } .inco-notificari * { box-sizing: border-box; } /* ─────────────────────────────────────────────────────────── notificarea */ .inco-notificare { display: flex; align-items: center; gap: 10px; width: fit-content; /* * Ancoră pentru ×-ul de restrângere, care pe telefon se așază în colț. * Pe desktop stă în rând, deci acolo nu schimbă nimic. */ position: relative; /* * Culoarea pastilei, ca s-o poată citi bulina cu numărul: ea are fundal alb * și scrie cu culoarea barei. Fără variabilă, bulina ar fi fost verde și pe * o pastilă albastră. */ --inco-notif-curent: var(--inco-notif-verde); /* * 🔑 Textul se VEDE ÎNTREG. Dacă nu încape, se rupe în două rânduri — nu se * taie cu „…". * * 🔴 Prima variantă tăia mesajul la 360px, o cifră aleasă din ochi. Măsurat, * cel mai lat mesaj de azi cere 569px cu tot cu link, iar refuzul „nu poți * adăuga mai mult de 4" cere 459 — deci limita tăia texte care ÎNCĂPEAU. * Un mesaj de eroare trunchiat e cea mai proastă tăiere posibilă: tocmai * motivul refuzului dispare. * * 600 e prag, nu lățime: pastila e cât textul ei și abia peste atât se rupe. */ max-width: min(600px, calc(100vw - 48px)); /* * Golul dintre notificări e MARGINE, nu `gap` pe container: la ieșire * trebuie să se poată strânge odată cu înălțimea. Un `gap` ar fi rămas pe * loc, deci ultimii 12px ar fi dispărut brusc la final. */ margin-block-start: var(--inco-notif-gol); padding: 4px 14px 4px 5px; /* * 🔑 16, nu 999 — și arată IDENTIC pe un rând. * * Pastila are 32px înălțime *(4 + iconița 24 + 4)*, iar o rază de 16 pe un * element de 32 desenează exact aceleași capete semicirculare ca 999. Când * mesajul trece pe două rânduri însă, 999 ar fi făcut o capsulă uriașă, cu * capetele rotunjite cât jumătate din înălțime. Aceeași valoare ține și * cazul de un rând, și pe cel de două. */ border-radius: 16px; background: var(--inco-notif-verde); color: var(--inco-notif-alb); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 600; font-size: 16px; line-height: 1.1; box-shadow: 0 0 12px rgba(11, 134, 105, .45); pointer-events: auto; /* Intrarea și ieșirea: exact mișcarea cardului de coș — 12px + estompare. */ opacity: 0; transform: translateY(12px); transition: opacity .22s ease, transform .22s ease; } .inco-notificare.is-open { opacity: 1; transform: none; } /* * Ieșirea. Pe lângă estompare, se strâng înălțimea și golul, ca notificările * de deasupra să coboare lin. `overflow: hidden` e AICI, nu pe starea de * repaus: acolo ar fi tăiat conturul de focalizare al linkului. * * 🔴 Înălțimea, golul și paddingul le duce la zero JS-ul, INLINE — nu regulile * de aici. Prima variantă le scria aici, și nu se strângea nimic: `scoateNodul` * fixează întâi înălțimea măsurată ca stil inline (fiindcă `auto` nu se poate * anima), iar un stil inline bate orice regulă din foaie. Valoarea care * pornea animația o și bloca. Aici rămâne doar CE se animă și cât. */ .inco-notificare.is-closing { overflow: hidden; opacity: 0; transform: translateY(12px); transition: opacity .22s ease, transform .22s ease, block-size .22s ease, margin-block-start .22s ease, padding-block .22s ease; } /* Comparatorul, mesajele trecătoare. Bara lui permanentă rămâne verde. */ .inco-notificare--albastru { background: var(--inco-notif-albastru); box-shadow: 0 0 12px rgba(5, 110, 155, .45); --inco-notif-curent: var(--inco-notif-albastru); } /* Favoritele — și la adăugare, și la scoatere. */ .inco-notificare--rosu { background: var(--inco-notif-rosu); box-shadow: 0 0 12px rgba(225, 29, 72, .45); --inco-notif-curent: var(--inco-notif-rosu); } .inco-notificare--eroare { background: var(--inco-notif-eroare); box-shadow: 0 0 12px rgba(215, 59, 59, .45); --inco-notif-curent: var(--inco-notif-eroare); } /* ────────────────────────────────────────────────────────────── piesele */ .inco-notificare__ic { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 999px; } .inco-notificare__ic svg { width: 16px; height: 16px; } /* * `min-width: 0` ca textul să se poată rupe în loc să lățească pastila peste * pragul de sus — un copil de flex nu scade sub conținutul lui altfel. * * Nicio tăiere aici: pastila crește cât textul, iar peste prag textul curge pe * al doilea rând. */ .inco-notificare__msg { min-width: 0; } .inco-notificare__sep { flex: 0 0 auto; align-self: stretch; width: 1px; margin-block: 2px; background: rgba(250, 252, 255, .35); } /* Clasa dublată: `.page-content a` al temei cântărește (0,1,1). */ .inco-notificare__link.inco-notificare__link { flex: 0 0 auto; color: var(--inco-notif-alb); font-weight: 600; text-decoration: underline; white-space: nowrap; } .inco-notificare__link.inco-notificare__link:hover, .inco-notificare__link.inco-notificare__link:focus { color: var(--inco-notif-alb); text-decoration: none; } .inco-notificare__link.inco-notificare__link:focus-visible { outline: 2px solid var(--inco-notif-alb); outline-offset: 2px; } /* ══════════════════════════════════ bara care se poate restrânge ═══════ Cerut de Seba pe 17 august. Bara verde a comparatorului stă pe ecran cât timp lista are produse — pe orice pagină, toată vizita. ×-ul o strânge într-o pastilă mică, „Comparator 2". 🔑 × înseamnă RESTRÂNGE, nu golește. Din ea rămâne numărul pe ecran, deci se vede că lista e tot acolo. Un × care ar fi șters lista ar fi luat munca de comparare printr-un buton care peste tot altundeva înseamnă „ascunde". ═════════════════════════════════════════════════════════════════════════ */ /* * Cele două etichete stau ÎN ACEEAȘI celulă, una peste alta — de aia e grilă * și nu flex. Așa se topesc una în alta pe loc, fără să se împingă; într-un * rând, eticheta scurtă ar fi fost mai întâi împinsă în afara pastilei de cea * lungă și s-ar fi văzut venind din dreapta. */ .inco-notificare__corp { display: grid; align-items: center; min-width: 0; } .inco-notificare__lung, .inco-notificare__scurt { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; min-width: 0; } .inco-notificare__lung { transition: opacity .12s ease; } /* * Eticheta scurtă se aprinde cu întârziere: întâi pleacă textul lung, ca cele * două să nu se vadă suprapuse la jumătatea drumului. */ .inco-notificare__scurt { gap: 8px; opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity .14s ease .1s; } .inco-notificare.is-mic .inco-notificare__lung { opacity: 0; pointer-events: none; } .inco-notificare.is-mic .inco-notificare__scurt { opacity: 1; pointer-events: auto; } /* * ⚠️ Abia ASTA scoate textul lung din așezare, și se pune doar la CAPĂTUL * strângerii. Cât ține mișcarea, el rămâne în celulă *(doar stins)*, fiindcă * altfel pastila ar fi sărit instantaneu la lățimea mică și n-ar mai fi fost * nimic de animat. */ .inco-notificare.is-mic-gata .inco-notificare__lung { display: none; } /* * Cât ține mișcarea. `overflow: hidden` e aici, nu pe starea de repaus: în * repaus ar tăia conturul de focalizare al linkului. */ .inco-notificare.is-morf { overflow: hidden; transition: opacity .22s ease, transform .22s ease, inline-size .22s ease, block-size .22s ease; } /* * 🔴 Cât ține mișcarea, textul lung se TAIE cu „…", nu se rupe pe rânduri. * Cerut de Seba, care a nimerit și cauza: „se face textul pe mai multe linii și * are un moment când înălțimea crește". * * 🔑 Regula de la §Notificarea — *„textul se vede întreg, nu se taie cu «…»"* — * e despre un mesaj care STĂ pe ecran și trebuie citit. Aici textul e pe ducă: * se stinge în 120ms și pastila nu-l va mai arăta deloc. **Un text care pleacă * n-are nevoie să fie lizibil, are nevoie să nu strice cutia din care pleacă.** * Deci nu e o excepție de la regulă, e alt caz. * * Fără asta, chiar și cu înălțimea animată, textul s-ar fi reașezat pe 3 rânduri * pe sub estompare — se vede, fiindcă opacitatea pleacă de la 1. */ .inco-notificare.is-morf .inco-notificare__msg { overflow: hidden; max-inline-size: 100%; white-space: nowrap; text-overflow: ellipsis; } /* * ⚠️ Pe telefon partea lungă e o grilă cu `justify-items: start`, deci rândul e * cât textul lui — iar un rând cât textul n-are unde să taie. Cât ține mișcarea * rândurile se întind pe lățimea pastilei, ca tăierea să aibă de unde începe. * Linkul rămâne la stânga, are `justify-self` propriu. */ .inco-notificare.is-morf .inco-notificare__lung { justify-items: stretch; } .inco-notificare.is-mic { cursor: pointer; } /* ×-ul. Clasa dublată: `button:hover` din `reset.css` îl făcea roz. */ .inco-notificare__inchide.inco-notificare__inchide { display: inline-flex; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; inline-size: 16px; block-size: 16px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--inco-notif-alb); opacity: .75; cursor: pointer; transition: opacity .18s ease; } /* * ⚠️ 16px e mult sub ținta de apăsare de pe telefon. Zona apăsabilă se întinde * invizibil până la 44; forma rămâne 16. Prin `::after`, nu prin `padding`: * paddingul ar fi împins vecinii și ar fi lățit pastila. */ .inco-notificare__inchide.inco-notificare__inchide::after { content: ""; position: absolute; inset: -14px; } .inco-notificare__inchide.inco-notificare__inchide:hover, .inco-notificare__inchide.inco-notificare__inchide:focus, .inco-notificare__inchide.inco-notificare__inchide:focus-visible { background: none; color: var(--inco-notif-alb); opacity: 1; } .inco-notificare__inchide.inco-notificare__inchide:focus-visible { outline: 2px solid var(--inco-notif-alb); outline-offset: 2px; } .inco-notificare__inchide svg { inline-size: 16px; block-size: 16px; } /* * Bulina cu numărul. * * 🔴 `line-height` e 1, nu înălțimea cutiei. Cu `line-height: 20px` cutia iese * centrată la fix — și tot se vede cifra ușor decalată, fiindcă ce se centrează * atunci e linia de text, nu cerneala din ea. **Se centrează conținutul, nu * cutia** *(aceeași lecție ca la steaua din recenzii și la celula de tabel)*. */ .inco-notificare__nr { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-inline-size: 20px; block-size: 20px; padding-inline: 6px; border-radius: 10px; background: var(--inco-notif-alb); color: var(--inco-notif-curent); font-size: 13px; font-weight: 700; line-height: 1; } .inco-notificare__nr[hidden] { display: none; } /* ═══════════════════════════════════════════════════════════ Telefon ════ 🔴 Pastila pe un rând NU încape la 360: mesajul ar rămâne cu ~140px, adică „Produsul a fost adă…". Deci textul are voie să curgă pe două rânduri, iar raza scade de la 999 la 16 — o pastilă de capsulă cu două rânduri de text arată ca o greșeală. ═════════════════════════════════════════════════════════════════════════ */ @media (max-width: 599.98px) { .inco-notificari { inset-inline: 16px; bottom: calc(16px + var(--inco-toast-offset, 0px)); max-width: none; align-items: stretch; } /* * 🔑 GRILĂ, nu rând. * * Cu `flex`, linkul rămâne pe primul rând și textul curge sub el — adică * „Vezi comparatorul" ajunge lipit sus-dreapta, cu trei rânduri de text pe * lângă. Aici iconița ține stânga pe amândouă rândurile, mesajul stă sus și * linkul dedesubtul lui, aliniat cu el. */ .inco-notificare { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; width: auto; /* * 🔴 `max-width: min(600px, 100vw - 48px)` e o valoare de DESKTOP, unde * stiva stă la 24px de fiecare margine. Pe telefon marginile sunt 16 + * 16 = 32, deci scăzând 48 bara ieșea cu 16px mai îngustă decât locul * ei — lipită la stânga, cu un gol dublu la dreapta. Adică bara stătea * la 32px de marginea din dreapta, iar pastila restrânsă la 16: la * strângere se vedea sărind spre dreapta în loc să plece din colț. * Semnalat de Seba: *„animația trebuie să pornească din paddingul din * dreapta mereu."* * * 🔑 Aici nu e nevoie de nicio limită: stiva are `inset-inline: 16px` și * `align-items: stretch`, deci lățimea o dă chiar containerul. **O a doua * regulă care mărginește același lucru nu e o siguranță, e o a doua * părere** — și pe telefon era cea greșită. */ max-width: none; padding: 8px 12px 8px 8px; border-radius: 16px; font-size: 14px; line-height: 1.25; } /* * Coloana a doua e acum `__corp`, iar cele două rânduri *(mesaj, link)* se * fac ÎNĂUNTRUL părții lungi. * * ⚠️ Regula veche întindea iconița pe două rânduri ale barei. Nu mai are ce * întinde — bara are un singur rând — iar lăsată, un `span 2` ar fi creat un * al doilea rând gol, cu tot cu golul dintre ele. */ .inco-notificare__corp { grid-column: 2; } .inco-notificare__lung { display: grid; justify-items: start; gap: 4px; } .inco-notificare__msg { max-width: none; overflow: visible; white-space: normal; } .inco-notificare__link.inco-notificare__link { justify-self: start; } /* * 🔴 ×-ul își lua RÂND PROPRIU, jos-stânga sub link, și îngrașă bara de la * 55 la 75px — adică butonul care o face mai mică o făcea mai mare. * Semnalat de Seba. Scos din așezare și dus în colțul de sus-dreapta, unde * îl caută mâna; mesajul primește aer la dreapta ca să nu treacă pe sub el. */ .inco-notificare__inchide.inco-notificare__inchide { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; } .inco-notificare:has(.inco-notificare__inchide) .inco-notificare__msg { padding-inline-end: 24px; } /* * Restrânsă, pastila nu se mai întinde pe toată lățimea: se strânge pe * conținut și se lipește de dreapta, ca pe desktop. Aceleași margini * interioare, deci aceeași înălțime de 32px pe amândouă lățimile. */ .inco-notificare.is-mic { display: inline-flex; grid-template-columns: none; align-items: center; align-self: flex-end; width: auto; padding: 4px 14px 4px 5px; gap: 10px; } /* * 🔴 CÂT ȚINE MIȘCAREA, bara stă lipită de dreapta — în amândouă sensurile. * * La strângere se lipea de la sine, fiindcă `is-mic` *(cu `align-self: * flex-end`)* se pune din primul cadru. La DESFACERE însă, `is-mic` se scoate * din primul cadru, iar fără el bara redevine întinsă — și **un element întins * căruia i s-a fixat lățimea se așază la ÎNCEPUTUL axei**, adică la stânga. * Deci se deschidea de la stânga spre dreapta, plecând din altă parte decât * rămăsese pastila. Semnalat de Seba: *„se deschide de la stânga la dreapta, * nu de la dreapta, de unde rămâne pe minimizat."* * * 🔑 **Ancorarea nu se poate lăsa în seama stării de sosire** — cât ține * mișcarea, elementul nu e nici într-una, nici în alta. Se scrie pe mișcarea * însăși, o dată, și ține pentru amândouă drumurile. */ .inco-notificare.is-morf { align-self: flex-end; } /* * ⚠️ Iconița are pe telefon un `margin-block-start: 1px`, ca să cadă pe * linia primului rând de text. Restrânsă, pastila n-are decât un rând — * iar acel 1px o făcea 33 în loc de 32, adică cu un fir mai înaltă decât * aceeași pastilă pe desktop. */ .inco-notificare.is-mic .inco-notificare__ic { margin-block-start: 0; } /* * Separatorul ar fi o linie care crește cât două rânduri de text, lipită de * link. Pe două rânduri desparte mai bine golul decât linia. */ .inco-notificare__sep { display: none; } .inco-notificare__ic { /* Rămâne pe rândul primului rând de text, nu se centrează pe toată caseta. */ margin-block-start: 1px; } } @media (prefers-reduced-motion: reduce) { .inco-notificare, .inco-notificare.is-closing { transition: none; } }