/* ========================================================================= Coșul lateral ========================================================================= */ .inco-sidecart { /* * Durata alunecării, într-un singur loc: o citesc și panoul de mai jos, și * `side-cart.js` (din `getComputedStyle`, ca să nu fie scrisă a doua oară). */ --inco-sidecart-durata: .28s; position: fixed; inset: 0; z-index: 9990; visibility: hidden; pointer-events: none; /* * 🔴 AICI ERA ANIMAȚIA DE IEȘIRE CARE „NU FUNCȚIONA". * * Funcționa. Măsurat cadru cu cadru: la închidere panoul chiar aluneca, * 1077 → 1462 în 153ms. Doar că `visibility` sărea pe `hidden` din PRIMUL * cadru, fiindcă nu era în nicio tranziție — deci browserul desena o * mișcare pe care n-o vedea nimeni. * * 🔑 O proprietate FĂRĂ tranziție anulează vizual toate proprietățile care * au una. Aceeași formă ca §4bk, din altă direcție: acolo o valoare inline * bloca animația, aici o valoare fără tranziție o ascunde. În amândouă, * probele de la capete treceau — starea finală era corectă. * * `visibility` se poate întârzia, nu interpola: `0s linear <întârziere>` * ține elementul vizibil cât alunecă și îl stinge exact la capăt. */ transition: visibility 0s linear var(--inco-sidecart-durata); } .inco-sidecart.is-open { visibility: visible; pointer-events: auto; /* La DESCHIDERE se aprinde imediat: întârzierea e doar pentru ieșire. */ transition: visibility 0s linear 0s; } /* * Blochează scrollul paginii cât panoul e deschis. * * Clasa se pune pe , nu pe : pe iOS Safari `overflow: hidden` pe * body nu opreșteinerția de scroll, iar pagina continua să alunece în spatele * panoului. */ html.inco-cart-open, html.inco-cart-open body { overflow: hidden; } .inco-sidecart__overlay { position: absolute; inset: 0; background: rgba(10, 67, 92, 0.45); opacity: 0; transition: opacity .25s ease; cursor: pointer; } .inco-sidecart.is-open .inco-sidecart__overlay { opacity: 1; } /* ------------------------------------------------------------ panoul */ .inco-sidecart__panel { position: absolute; inset-block: 0; inset-inline-end: 0; display: flex; flex-direction: column; width: min(420px, 100vw); background: var(--inco-co-bg); box-shadow: var(--inco-co-shadow-panel); transform: translateX(100%); transition: transform var(--inco-sidecart-durata) cubic-bezier(.22, .61, .36, 1); } .inco-sidecart.is-open .inco-sidecart__panel { transform: none; } /* ------------------------------------------------------------- cap */ .inco-sidecart__head { display: flex; align-items: center; justify-content: space-between; gap: var(--inco-co-gap); flex: 0 0 auto; padding: 20px 24px; border-bottom: 1px solid var(--inco-co-border); background: var(--inco-co-white); } .inco-sidecart__title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: -0.02em; color: var(--inco-co-ink); } .inco-sidecart__count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--inco-co-r-pill); background: var(--inco-co-primary); color: var(--inco-co-bg); font-weight: 600; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; } /* Clasa dublată: vezi secțiunea „Blindaj" din base.css. */ .inco-sidecart__close.inco-sidecart__close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--inco-co-r); background: none; color: var(--inco-co-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; } .inco-sidecart__close.inco-sidecart__close:hover, .inco-sidecart__close.inco-sidecart__close:focus { background: var(--inco-co-tint); color: var(--inco-co-ink); } .inco-sidecart__close.inco-sidecart__close:focus-visible { outline: none; box-shadow: var(--inco-co-shadow-focus); } /* ------------------------------------------------------------ corp */ .inco-sidecart__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--inco-co-gap); padding: 20px 24px; overflow-y: auto; overscroll-behavior: contain; /* scrollul nu „scapă" în pagină la capăt */ } .inco-sidecart__body.is-busy { opacity: .6; pointer-events: none; } .inco-sidecart__items { display: flex; flex-direction: column; gap: var(--inco-co-gap); margin: 0; padding: 0; list-style: none; } .inco-sidecart__item { display: flex; align-items: flex-start; gap: 12px; padding-bottom: var(--inco-co-gap); border-bottom: 1px solid var(--inco-co-border-soft); } .inco-sidecart__item:last-child { padding-bottom: 0; border-bottom: 0; } .inco-sidecart__item.is-removing { opacity: .4; pointer-events: none; } /* * 🔴 `cover`, nu `contain`. Cerut de Seba pe 10 aug. * * Cu `contain` poza intra întreagă în cei 72px, dar lăsa dungi albe în lături * la orice imagine care nu e pătrată — exact ce s-a întâmplat și la plăcile * promo de pe homepage, pe 9 august. Acolo cauza nu era stilul, ci o singură * poză nepătrată; celelalte umpleau caseta **din întâmplare**. * * `cover` + `center` umple caseta întotdeauna, indiferent de raport. Se pierde * puțin din margini, dar produsul e centrat în poză. * * ⚠️ `padding` și `background-origin: content-box` au dispărut odată cu * `contain`: cu `cover` ar fi tăiat din poză de două ori — o dată prin * încadrare, o dată prin padding. */ .inco-sidecart__thumb { /* * 🔴 Culoarea se DECLARĂ, deși miniatura e o imagine. * * Elementul e un ``, iar tema colorează linkurile cu `#CC3366`. Nu se * vede cât timp poza se încarcă — dar textul alternativ al unei imagini * lipsă ieșea roz aprins. Măsurat pe site: `color: rgb(204, 51, 102)`. * * Al treilea roz găsit azi din aceeași sursă. → §4n */ color: inherit; width: 72px; height: 72px; border: 1px solid var(--inco-co-border); border-radius: var(--inco-co-r); background-color: var(--inco-co-white); background-image: var(--inco-co-thumb, none); background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; flex: 0 0 auto; } .inco-sidecart__meta { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; /* fără el, numele lung împinge butonul de ștergere afară */ } .inco-sidecart__name { font-weight: 600; font-size: 14px; line-height: 1.2; /* * 🔴 Spațiere NEGATIVĂ, ca peste tot. Era `+0.01em` — singurul spațiu * pozitiv din proiect. La 14px semibold, un plus depărtează literele exact * acolo unde titlul are nevoie să pară compact, iar numele de produs e * oricum lung. Restul sistemului merge pe −0,01em … −0,02em. */ letter-spacing: -0.01em; color: var(--inco-co-ink); text-decoration: none; } .inco-sidecart__name:hover { color: var(--inco-co-primary); } .inco-sidecart__variation { font-size: 12px; line-height: 1.3; color: var(--inco-co-muted); } .inco-sidecart__price { font-size: 12px; line-height: 1; color: var(--inco-co-muted); } .inco-sidecart__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; } /* * Stepper mai mic în panou. Clasa dublată nu e pentru temă aici, ci pentru * regula de bază din `base.css`, care e acum (0,2,0): la egalitate ar fi decis * ordinea foilor, iar asta e o dependență fragilă între două fișiere ale * noastre. */ .inco-sidecart__row .inco-stepper__btn.inco-stepper__btn { width: 28px; height: 32px; } .inco-sidecart__line { font-weight: 600; font-size: 16px; line-height: 1; color: var(--inco-co-primary); } .inco-sidecart__remove.inco-sidecart__remove { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--inco-co-r-pill); background: none; color: var(--inco-co-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .inco-sidecart__remove.inco-sidecart__remove:hover, .inco-sidecart__remove.inco-sidecart__remove:focus { border-color: var(--inco-co-sale); background: rgba(215, 59, 59, .08); color: var(--inco-co-sale); } .inco-sidecart__remove.inco-sidecart__remove:focus-visible { outline: none; box-shadow: var(--inco-co-shadow-focus); } /* ---------------------------------------------------------- coș gol */ .inco-sidecart__empty { display: flex; flex-direction: column; align-items: center; gap: var(--inco-co-gap); margin: auto 0; padding: 40px 0; text-align: center; color: var(--inco-co-muted); } .inco-sidecart__empty svg { color: var(--inco-co-border); } .inco-sidecart__empty p { margin: 0; font-size: 16px; } /* ------------------------------------------------------------ subsol */ .inco-sidecart__foot:empty { display: none; } .inco-sidecart__foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; border-top: 1px solid var(--inco-co-border); background: var(--inco-co-white); } .inco-sidecart__totals { display: flex; align-items: baseline; justify-content: space-between; gap: var(--inco-co-gap); } .inco-sidecart__totalslabel { font-weight: 600; font-size: 18px; line-height: 1; color: var(--inco-co-ink); } .inco-sidecart__totalsvalue { font-weight: 600; font-size: 20px; line-height: 1; color: var(--inco-co-primary); } .inco-sidecart__hint { margin: 0; font-size: 12px; line-height: 1.3; color: var(--inco-co-muted); } /* Ajuns la prag: verdele de reușită, ca la bara de sus. Aceeași veste, aceeași culoare — altfel același lucru ar avea două înfățișări în același panou. */ .inco-sidecart__hint.is-reached { color: var(--inco-co-success); font-weight: 500; } /* Suma din „Adaugă încă X lei" vine din `wc_price()`, deci poartă marcajul WooCommerce. Fără asta ar fi ieșit pe culoarea prețurilor, nu pe cea a rândului — o cifră aprinsă într-o frază stinsă. */ .inco-sidecart__hint .amount, .inco-sidecart__hint bdi { color: inherit; font-size: inherit; font-weight: 600; } .inco-sidecart__note { display: flex; flex-direction: column; gap: 4px; } .inco-sidecart__notelabel { font-weight: 500; font-size: 12px; letter-spacing: 0.02em; color: var(--inco-co-muted); } .inco-sidecart__note textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--inco-co-border); border-radius: var(--inco-co-r); background: var(--inco-co-bg); font-family: var(--inco-co-font); font-size: 14px; color: var(--inco-co-ink); resize: vertical; } .inco-sidecart__note textarea:focus { outline: none; border-color: var(--inco-co-primary); box-shadow: var(--inco-co-shadow-focus); } /* * Gap 24px, ca perechea de butoane din machetă („Vezi coșul" + butonul primar * din notificarea de adăugare în coș). Era 8px, iar cele două butoane păreau * lipite — una din spațierile raportate. */ .inco-sidecart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* * Pe ecrane înguste butoanele trec una sub alta. * * La 360px, „Continuă cumpărăturile" lângă „Finalizează comanda" ieșea pe două * rânduri de text fiecare, iar butoanele nu mai aveau aceeași înălțime. */ @media (max-width: 400px) { .inco-sidecart__actions { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { /* * ⚠️ Rama intră și ea în listă, altfel ar fi rămas cu întârzierea de * `visibility`: panoul ar fi dispărut instant, dar stratul de deasupra * paginii ar mai fi stat 280ms — adică pagina ar fi părut blocată. * * Durata ajunge la 0 și în JS: `side-cart.js` o citește din chiar * `transition-duration` al panoului, deci lacătul se ridică imediat. */ .inco-sidecart, .inco-sidecart__panel, .inco-sidecart__overlay { transition: none; } }