/* ============================================================ ILIANTE — AUW26 Canvas de galerie. Mișcare de instrument, nu de jucărie. ============================================================ */ /* ---------- FONTURI (self-hosted, merge offline) ---------- */ @font-face{ font-family:'Cinzel'; font-style:normal; font-weight:400 900; font-display:swap; src:url('assets/fonts/cinzel-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Cinzel'; font-style:normal; font-weight:400 900; font-display:swap; src:url('assets/fonts/cinzel-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:100 900; font-display:swap; src:url('assets/fonts/archivo-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:100 900; font-display:swap; src:url('assets/fonts/archivo-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Bodoni Moda'; font-style:normal; font-weight:400 900; font-display:swap; src:url('assets/fonts/bodoni-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Bodoni Moda'; font-style:normal; font-weight:400 900; font-display:swap; src:url('assets/fonts/bodoni-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Syne'; font-style:normal; font-weight:800; font-display:swap; src:url('assets/fonts/syne-800.woff2') format('woff2'); } /* ---------- TOKENS ---------- */ :root{ color-scheme:light; --plate-vignette:transparent; --canvas:#F4EFE7; /* crem cald, fundal pagina */ --surface:#EDE7DD; /* carduri, utility bar, sectiuni de contrast */ --surface-2:#E5DED2; /* hover, input */ --ink:#1A1917; /* off-black cald, 15,4:1 pe canvas. Negrul pur vibreaza */ --ink-muted:#5F5A52; /* 6,9:1 pe canvas */ --bone:#8A7F6B; /* accentul brandului pe fundal deschis */ --ember:#A4441C; /* EXCLUSIV contorul de stoc sub prag, 6,3:1 */ --archived:#A6A093; /* piese epuizate, stins intentionat */ --line:rgba(26,25,23,.16); --line-soft:rgba(26,25,23,.09); --line-strong:rgba(26,25,23,.28); --dark-canvas:#EDE7DD; --dark-ink:#1A1917; --dark-muted:#5F5A52; --dark-line:rgba(26,25,23,.16); --font-d:'Bodoni Moda','Cinzel',"Times New Roman",serif; /* doar wordmark */ --font-logo:'Syne','Archivo',system-ui,sans-serif; /* STRICT logo */ --font-t:'Archivo',system-ui,-apple-system,sans-serif; /* titluri */ --font-u:'Archivo',system-ui,-apple-system,sans-serif; --ease-out:cubic-bezier(.16,1,.3,1); --ease-mech:cubic-bezier(.65,0,.35,1); --ease-soft:cubic-bezier(.22,1,.36,1); --t-flip:120ms; --t-ui:240ms; --t-move:400ms; --t-reveal:700ms; --t-media:900ms; --pad:clamp(20px,4.5vw,72px); --maxw:1440px; --gut:24px; --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px; --s7:160px; } /* ---------- PALETA CREM ---------- Se activeaza cu data-theme="light" pe . Registrul e Hermes, nu alb clinic: fundal cald, textul pe off-black care nu vibreaza optic ca negrul pur. */ :root[data-theme="dark"]{ color-scheme:dark; --canvas:#121014; /* fundal pagina */ --surface:#1A171B; /* carduri, utility bar, sectiuni de contrast */ --surface-2:#201D22; /* hover pe card, input */ --ink:#E9E4DB; /* 14.94:1 pe canvas */ --ink-muted:#A39E97; /* 7.11:1 pe canvas */ --bone:#CFC8BB; /* accentul brandului: hover, linii active, selection */ --ember:#D97B52; /* EXCLUSIV contorul de stoc sub prag. 6.22:1 */ --archived:#6B6660; /* piese epuizate, stins intentionat */ --line:rgba(233,228,219,.14); --line-soft:rgba(233,228,219,.08); --line-strong:rgba(233,228,219,.26); /* Aliasurile vechi. Sectiunile de contrast raman pe surface, deci nu mai exista rupturi de paleta intre pagina si ele. */ --dark-canvas:#1A171B; --dark-ink:#E9E4DB; --dark-muted:#A39E97; --dark-line:rgba(233,228,219,.14); --plate-vignette:rgba(18,16,20,.55); } /* Atributul `hidden` trebuie sa castige mereu. Orice `display` scris pe un container il anuleaza tacut, iar elementul ramane intins peste pagina si inghite fiecare clic, desi nu se vede nimic. Exact asta s-a intamplat cu ghidul de marimi pe 27 iul 2026: butoanele pareau moarte pe tot site-ul. */ [hidden]{ display:none !important } /* ---------- RESET ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{background:var(--canvas);-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ background:var(--canvas); color:var(--ink); font-family:var(--font-u); font-size:clamp(14px,1.05vw,15px); line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } body.locked{overflow:hidden;padding-right:var(--sbw,0px)} /* textura de beton: foarte vaga, compusa in paint pe fundalul body. NU folosi un pseudo-element fixed cu mix-blend-mode aici. Overlay pe un strat fixat peste tot viewportul sparge compositing-ul in Chrome si pagina se randeaza goala, desi DOM-ul e intact. Verificat pe 26 iul 2026. */ body{ background-image:url('assets/brand/concrete-soft.webp'),linear-gradient(var(--canvas),var(--canvas)); background-size:320px 320px,auto; background-repeat:repeat,repeat; background-blend-mode:soft-light,normal; } body > *{ position:relative; z-index:1 } img,svg{display:block;max-width:100%} button,input{font:inherit;color:inherit;background:none;border:0} button{cursor:pointer} a{color:inherit;text-decoration:none} ul{list-style:none} ::selection{background:var(--bone);color:var(--canvas)} :focus-visible{outline:1px solid var(--ink);outline-offset:3px} .story :focus-visible,.footer :focus-visible,.signup :focus-visible{outline-color:var(--dark-ink)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--canvas);padding:12px 20px} .skip:focus{left:0} /* ---------- TIPOGRAFIE ---------- */ .eyebrow{ font-family:var(--font-u); font-weight:500; font-size:11px; line-height:1; letter-spacing:.30em; text-transform:uppercase; color:var(--ink-muted); display:inline-flex; align-items:center; gap:12px; } .h2{ font-family:var(--font-t); font-weight:600; font-size:clamp(14px,1.4vw,17px); line-height:1.2; letter-spacing:.26em; text-transform:uppercase; } .rule{ display:block; width:34px; height:1px; background:currentColor; opacity:.42; flex:none } .rule--grow{ transform:scaleX(0); transform-origin:left } .is-in .rule--grow,.ready .banner .rule--grow{ transform:scaleX(1); transition:transform 600ms var(--ease-mech) var(--d,0ms) } /* line-mask reveal */ .mask{ display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em } .mask > b{ display:block; font-weight:inherit; transform:translateY(112%) } .mask.is-in > b,.ready .banner .mask > b{ transform:none; transition:transform var(--t-reveal) var(--ease-out) var(--d,0ms) } /* reveal generic */ [data-reveal]{ opacity:0; transform:translateY(24px) } [data-reveal].is-in{ opacity:1; transform:none; transition:opacity var(--t-reveal) var(--ease-out) var(--d,0ms),transform var(--t-reveal) var(--ease-out) var(--d,0ms) } /* ---------- BUTON: un fill care culisează ---------- */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-u); font-weight:500; font-size:11px; letter-spacing:.30em; text-transform:uppercase; padding:16px 30px; overflow:hidden; border:1px solid var(--line); color:var(--ink); isolation:isolate; transition:border-color var(--t-flip) linear,color var(--t-flip) linear,transform var(--t-flip) var(--ease-mech); } .btn > span{ position:relative; z-index:2 } .btn > i{ position:absolute; inset:0; z-index:1; background:var(--ink); transform:scaleY(0); transform-origin:bottom; transition:transform var(--t-ui) var(--ease-mech); } .btn:hover{ border-color:var(--ink); color:var(--canvas) } .btn:hover > i{ transform:scaleY(1) } .btn:active{ transform:scale(.98) } .btn--solid{ background:var(--ink); color:var(--canvas); border-color:var(--ink) } .btn--solid > i{ background:var(--bone) } .btn--solid:hover{ color:var(--canvas) } .btn--full{ width:100% } .btn[disabled]{ opacity:.34; pointer-events:none } /* ============================================================ NAV ============================================================ */ /* Utility bar. Costul de transport e primul lucru de pe pagina, nu o surpriza descoperita la checkout. */ .utility{ position:relative; z-index:61; background:var(--surface); border-bottom:1px solid var(--line); } .utility p{ height:36px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-muted); text-align:center; padding:0 var(--pad); } .dot{ display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; vertical-align:middle } .nav{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--canvas) 97%, transparent); transition:background var(--t-ui) ease; } .nav.is-stuck{ background:color-mix(in srgb, var(--canvas) 97%, transparent) } .nav__rule{ display:block; height:1px; background:var(--line); transform:scaleX(0); transform-origin:left } .ready .nav__rule{ transform:scaleX(1); transition:transform 600ms var(--ease-mech) } .nav__inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); height:64px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; } /* Wrapperul dispare din layout pe desktop, dar `display:contents` pastreaza ordinea din DOM, iar acolo brandul vine dupa ambele grupuri. Coloanele se dau explicit, altfel wordmark-ul ajunge in dreapta. */ .nav__menu{ display:contents } .nav__links{ display:flex; gap:28px; align-items:center } .nav__links--l{ grid-column:1; grid-row:1 } .nav__brand{ grid-column:2; grid-row:1 } .nav__links--r{ grid-column:3; grid-row:1; justify-content:flex-end } .nav__links a, .nav__cart{ position:relative; font-family:var(--font-u); font-weight:500; font-size:11px; letter-spacing:.30em; text-transform:uppercase; color:var(--ink-muted); padding:6px 0; transition:color var(--t-flip) linear; } .nav__links a::after, .nav__cart::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform 280ms var(--ease-mech); } .nav__links a:hover, .nav__cart:hover{ color:var(--ink) } .nav__links a:hover::after, .nav__cart:hover::after{ transform:scaleX(1); transform-origin:left } /* wordmark cu logo-ul stins in spate, ancorat pe mijlocul cuvantului */ .nav__brand{ justify-self:center; position:relative; display:block; isolation:isolate } .nav__brand::before{ content:''; position:absolute; z-index:-1; left:calc(50% - .18em); top:50%; translate:-50% -50%; width:2.9em; height:2.9em; font-size:15px; background:url('assets/brand/sigil-nav.png') center/contain no-repeat; opacity:.15; pointer-events:none; transition:opacity var(--t-ui) var(--ease-mech); } .nav__brand:hover::before{ opacity:.26 } .nav__word{ font-family:var(--font-logo); font-weight:800; font-size:14px; letter-spacing:.30em; text-transform:uppercase; margin-right:-.30em; display:block; position:relative; } .nav__toggle{ display:none } /* ============================================================ BANNER DE COLECȚIE Fara poza. Pozele traiesc in grila, unde cumparatorul le compara. Inaltime limitata intentionat: grila trebuie sa fie vizibila in primul ecran. ============================================================ */ .banner{ max-width:var(--maxw); margin:0 auto; position:relative; /* Inaltime stransa deliberat. Masurat pe 12 branduri (Stussy, Fear of God, Carhartt, Kith, Represent si altele), primul produs apare la mediana sub 210px de sus. Un banner care impinge grila sub fold e, dupa Baymard, cea mai daunatoare greseala de pe o pagina de colectie. */ padding:clamp(22px,3vw,32px) var(--pad) clamp(18px,2vw,24px); min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:clamp(8px,1vw,12px); } .banner__eyebrow{ display:flex; align-items:center; gap:14px } .banner__eyebrow .mask{ display:inline-block } .banner__word{ line-height:0 } :root[data-theme="dark"] .banner__word img{ content:url("assets/brand/wordmark-bone.png") } .banner__word img{ width:clamp(220px,38vw,440px); height:auto; margin-inline:auto; } .banner__meta{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-muted); margin-top:var(--s1); } .banner__meta .rule{ width:22px } /* Singurul moment de teatru de pe pagina. O trecere la load, apoi moare. */ .banner__scan{ position:absolute; left:12%; right:12%; top:52%; height:1px; z-index:2; background:linear-gradient(90deg,transparent,var(--bone),transparent); opacity:0; pointer-events:none; } .ready .banner__scan{ animation:scan 900ms var(--ease-mech) 220ms both } @keyframes scan{ 0%{ opacity:0; transform:translateY(-46px) scaleX(.6) } 30%{ opacity:.7 } 100%{ opacity:0; transform:translateY(46px) scaleX(1) } } /* ============================================================ BARA DE CATEGORII, sticky sub nav ============================================================ */ .cats{ position:sticky; top:64px; z-index:55; display:flex; align-items:center; justify-content:center; gap:clamp(20px,4vw,44px); height:44px; padding:0 var(--pad); background:color-mix(in srgb, var(--canvas) 97%, transparent); border-block:1px solid var(--line); } .cats a{ position:relative; font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-muted); padding:6px 0; transition:color var(--t-flip) linear; } .cats a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--bone); transform:scaleX(0); transform-origin:right; transition:transform 280ms var(--ease-mech); } .cats a.is-live{ color:var(--ink) } .cats a.is-live::after{ transform:scaleX(1); transform-origin:left } /* ============================================================ PLACA (fotografia) Fara masca, fara clip-path. Placa e DEFINITA pe fundalul inchis, cu chenar. Chenarul unifica cele noua poze chiar daca fundalul lor de studio variaza. ============================================================ */ .plate{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--surface); border:1px solid var(--line); } /* Pozele provizorii au fundal de studio GRI RECE, iar pagina e crem CALD. Pe telefon, unde cardurile ocupa jumatate de ecran, griul domina si pare ca fundalul paginii e gri. Filtrul de mai jos incalzeste doar tonul, foarte putin. Nu atinge fisierele si nu arde piesele bone, asa cum au facut cele doua incercari de procesare. Cand vin pozele reale, fotografiate pe fundal #E8E1D6, se poate scoate. */ .plate__front,.plate__back{ filter:sepia(.18) saturate(1.05) brightness(1.02); } /* vinieta leaga marginile placii de pagina fara sa atinga produsul din centru */ .plate::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2; box-shadow:inset 0 0 34px 8px var(--plate-vignette,rgba(18,16,20,.55)); } :root{ --plate-vignette:rgba(244,239,231,.55) } .plate img{ width:100%; height:100%; object-fit:cover; object-position:center } .plate__back{ position:absolute; inset:0; opacity:0; transition:opacity 220ms linear; } .plate__archived{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; letter-spacing:.28em; color:var(--ink-muted); } /* ============================================================ COLECȚIA O singura grila continua. Header-ele de categorie sunt randuri full-span in interiorul ei, deci ritmul coloanelor nu se rupe niciodata. ============================================================ */ .collection{ max-width:var(--maxw); margin:0 auto; padding:clamp(16px,2vw,24px) var(--pad) 0 } .grid{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:20px; row-gap:56px; } /* Header de categorie. Un singur element: numele. Numarul aparea de doua ori in acelasi rand, iar watermark-ul cu contur citea a efect, nu a editorial. */ .cat{ grid-column:1 / -1; display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; border-top:1px solid var(--line); padding-top:18px; scroll-margin-top:120px; } .grid > .cat:first-child{ border-top:0; padding-top:0 } .cat__title{ font-family:var(--font-t); font-weight:600; font-size:12px; letter-spacing:.26em; text-transform:uppercase; line-height:1; } /* Card */ .card{ display:flex; flex-direction:column; gap:9px; cursor:pointer; opacity:0; transform:translateY(14px); } .card.is-in{ opacity:1; transform:none; transition:opacity 480ms var(--ease-out) var(--d,0ms), transform 480ms var(--ease-out) var(--d,0ms); } .card__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); } .card__tag{ font-family:var(--font-t); font-style:normal; font-size:9px; font-weight:600; letter-spacing:.18em; color:var(--ink-muted); margin-left:8px; white-space:nowrap; } .card__name{ font-family:var(--font-t); font-weight:600; font-size:12px; line-height:1.3; letter-spacing:.18em; text-transform:uppercase; } .card__price{ font-size:14px; font-weight:500; letter-spacing:.06em; font-variant-numeric:tabular-nums; color:var(--ink); } /* Contorul de stoc. Cifra e reala, vine din CHAPTERS. Ember apare intr-un singur loc pe toata pagina, de asta loveste. */ .card__stock{ font-size:10px; font-weight:600; letter-spacing:.20em; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink-muted); } .card__stock--low{ color:var(--ember) } .card__stock--out{ color:var(--archived) } /* Epuizat: ramane in raft. Golul din raft vinde restul. */ .card--sold{ cursor:default } .card--sold .plate img{ filter:grayscale(1); opacity:.35 } .card--sold .card__name,.card--sold .card__price{ color:var(--archived) } /* Hover strict pe dispozitive cu cursor. Pe touch, hover-ul ramane lipit dupa primul tap si cardul pare ca nu se deschide. Al doilea unghi traieste in modal. */ @media (hover:hover) and (pointer:fine){ .card:not(.card--sold):hover .plate__front{ transform:scale(1.03) } .card .plate__front{ transition:transform 550ms var(--ease-soft) } .card:not(.card--sold):hover .plate__back{ opacity:1 } .card:not(.card--sold):hover .card__name{ color:var(--bone) } } /* ============================================================ BANDA: povestea plus inscrierea Doua coloane, nu doua sectiuni centrate una sub alta. Asimetria rupe monotonia si leaga motivul brandului de actiune, care oricum se citesc impreuna. ============================================================ */ .band{ position:relative; overflow:hidden; background:var(--surface); margin-top:clamp(72px,10vw,120px); border-block:1px solid var(--line); } /* sigiliul o singura data, lateral, nu centrat sub text */ .band__mark{ position:absolute; right:-8%; top:50%; translate:0 -50%; width:min(560px,58vw); height:auto; z-index:0; pointer-events:none; opacity:.045; } .band__inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:clamp(56px,8vw,100px) var(--pad); display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(40px,7vw,110px); align-items:start; } .band__story{ display:flex; flex-direction:column; gap:var(--s2); max-width:44ch } .band__lead{ font-family:var(--font-t); font-weight:500; font-size:clamp(19px,2.1vw,25px); line-height:1.4; margin:6px 0 4px; } .band__lead b{ font-weight:600; letter-spacing:.08em } .band__story p{ font-size:15px; line-height:1.7; color:var(--ink) } .band__sign{ font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-muted); margin-top:var(--s2); } .band__join{ display:flex; flex-direction:column; gap:14px; padding-top:clamp(0px,1vw,10px); } .band__joinlead{ font-size:15px; line-height:1.7; color:var(--ink); max-width:38ch } .band__small{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted) } .signup__form{ display:flex; gap:var(--s2); width:100%; margin-top:var(--s1); flex-wrap:wrap } .signup__form input{ flex:1 1 200px; min-width:0; padding:15px 4px; color:var(--ink); border-bottom:1px solid var(--line-strong); letter-spacing:.04em; transition:border-color var(--t-ui) var(--ease-mech); } .signup__form input::placeholder{ color:var(--ink-muted) } .signup__form input:focus{ outline:none; border-bottom-color:var(--ink) } .signup__form.is-done{ opacity:.5; pointer-events:none } .signup__msg{ font-size:12px; color:var(--ink-muted); min-height:1em } @media (max-width:860px){ .band__inner{ grid-template-columns:1fr; gap:var(--s5) } .band__mark{ right:-22%; width:min(460px,80vw) } } /* ============================================================ FOOTER ============================================================ */ .footer{ background:var(--dark-canvas); color:var(--dark-muted); padding:0 var(--pad) var(--s4) } .footer__row{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; padding:var(--s4) 0; border-top:1px solid var(--dark-line); } .footer__brand{ font-family:var(--font-logo); font-weight:800; font-size:14px; letter-spacing:.28em; text-transform:uppercase; color:var(--dark-ink); } .footer__brand sup{ font-size:8px; letter-spacing:0 } .footer__links{ display:flex; gap:var(--s3); flex-wrap:wrap } .footer__links a{ font-size:12px; transition:color var(--t-flip) linear } .footer__links a:hover{ color:var(--dark-ink) } .footer__base{ max-width:var(--maxw); margin:0 auto; display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:space-between; font-size:10px; letter-spacing:.24em; text-transform:uppercase; } /* ============================================================ MODAL ============================================================ */ .modal{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:var(--s3) } .modal[hidden]{ display:none } .modal__scrim{ position:absolute; inset:0; background:rgba(35,32,37,.45); opacity:0; transition:opacity var(--t-ui) linear } .modal.is-open .modal__scrim{ opacity:1 } .modal__panel{ position:relative; z-index:2; background:var(--surface); width:min(1040px,100%); max-height:calc(100svh - 48px); overflow:auto; overscroll-behavior:contain; display:grid; grid-template-columns:1.05fr 1fr; opacity:0; transform:translateY(24px); } .modal.is-open .modal__panel{ opacity:1; transform:none; transition:opacity var(--t-move) var(--ease-out) 60ms,transform var(--t-move) var(--ease-out) 60ms; } .modal__close{ position:absolute; top:14px; right:14px; z-index:4; width:38px; height:38px; display:grid; place-items:center; color:var(--ink); } .modal__close svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.2 } .modal__media{ padding:var(--s4) 0 var(--s4) var(--s3) } .modal__body{ padding:clamp(28px,3.4vw,var(--s4)); display:flex; flex-direction:column; gap:var(--s2); align-self:center } .modal__body > *{ opacity:0; transform:translateY(12px) } .modal.is-open .modal__body > *{ opacity:1; transform:none; transition:opacity var(--t-move) var(--ease-out) var(--sd,180ms),transform var(--t-move) var(--ease-out) var(--sd,180ms); } .modal__name{ font-family:var(--font-t); font-weight:600; font-size:clamp(16px,1.6vw,20px); line-height:1.15; letter-spacing:.04em; text-transform:uppercase; } .modal__price{ font-size:13px; letter-spacing:.08em; font-variant-numeric:tabular-nums; color:var(--ink-muted) } .modal__desc{ font-size:14px; color:var(--ink-muted); margin-top:var(--s1) } .modal__sizes{ display:flex; flex-direction:column; gap:12px; margin-top:var(--s2) } .modal__sizerow{ display:flex; gap:var(--s1); flex-wrap:wrap } .size{ position:relative; min-width:52px; height:44px; padding:0 12px; overflow:hidden; isolation:isolate; border:1px solid var(--line); font-size:12px; letter-spacing:.12em; color:var(--ink); transition:border-color var(--t-flip) linear,color var(--t-flip) linear; } .size::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--ink); transform:scaleY(0); transform-origin:bottom; transition:transform var(--t-ui) var(--ease-mech); } .size:hover{ border-color:var(--ink) } .size.is-on{ color:var(--bone); border-color:var(--ink) } .size.is-on::before{ transform:scaleY(1) } .modal__edition{ align-self:center } .modal__specs{ display:flex; flex-direction:column; margin-top:var(--s2); border-top:1px solid var(--line) } .modal__specs li{ display:flex; justify-content:space-between; gap:var(--s3); padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:14px; } .modal__specs span{ letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); font-size:11px; font-weight:600; align-self:center } .modal__specs b{ font-weight:400; font-size:14px; color:var(--ink); text-align:right } /* ============================================================ GALERIA DE UNGHIURI (modal) Frontal, spate, trei sferturi. Pe mobil se schimba si prin swipe pe imagine, pentru ca acolo hover-ul de pe cardul din grila nu are cum sa existe. ============================================================ */ .modal__angles{ display:flex; gap:8px; margin-top:10px; justify-content:center; } .angle{ width:52px; aspect-ratio:4/5; overflow:hidden; padding:0; border:1px solid var(--line); opacity:.5; transition:opacity var(--t-flip) linear, border-color var(--t-flip) linear; } .angle img{ width:100%; height:100%; object-fit:cover } .angle:hover{ opacity:.8 } .angle.is-on{ opacity:1; border-color:var(--bone) } /* o singura poza inseamna nicio galerie de ales */ .modal__angles:has(.angle:only-child){ display:none } .modal__edition b{ font-weight:600; color:var(--ink) } .modal__edition b.is-low{ color:var(--ember) } /* ============================================================ FOOTER LEGAL Identificarea firmei, returul si pictogramele SAL/SOL sunt obligatorii ca sa vinzi legal in Romania. Textul ramane la 13px si pe --ink, nu pe muted: textul mic si stins pe fundal inchis e capcana clasica (NN/g). ============================================================ */ .footer__legal{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); padding:var(--s4) 0; border-top:1px solid var(--line); } .footer__legal-h{ display:block; font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:12px; } .footer__legal p{ font-size:13px; line-height:1.7; color:var(--ink); max-width:36ch } .footer__legal a{ text-decoration:underline; text-underline-offset:3px; color:var(--bone) } .footer__legal b{ font-weight:500 } /* campurile pe care le completeaza fondatorul se vad de la distanta */ [data-todo]{ color:var(--ember); font-weight:600 } .footer__badges{ display:flex; flex-direction:column; gap:10px; margin-top:16px } .footer__badges img{ width:180px; height:auto; opacity:.9 } .badge-fb{ display:inline-flex; align-items:center; justify-content:center; width:180px; height:38px; border:1px solid var(--line-strong); font-size:10px; font-weight:600; letter-spacing:.20em; color:var(--ink-muted); } @media (max-width:760px){ .footer__legal{ grid-template-columns:1fr; gap:var(--s3) } .angle{ width:44px } } /* ============================================================ QUICK ADD pe card Marimile ca butoane, deschise peste coltul fotografiei. Baymard cere butoane, nu dropdown: cu dropdown, 28% dintre magazine ascund marimile si utilizatorul rateaza selectorul. Nu e overlay peste pagina, ca sa nu fie confundat cu pagina de produs. ============================================================ */ .quick{ position:absolute; right:10px; bottom:10px; z-index:4; width:34px; height:34px; display:grid; place-items:center; background:var(--canvas); border:1px solid var(--line-strong); color:var(--ink); opacity:0; transform:translateY(4px); transition:opacity 200ms linear, transform 200ms var(--ease-mech), background 120ms linear; } .quick svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6 } .quick.is-on{ background:var(--ink); color:var(--canvas); border-color:var(--ink) } .quick.is-on svg{ transform:rotate(45deg); transition:transform 200ms var(--ease-mech) } /* pe touch nu exista hover, deci butonul sta mereu vizibil */ .quick{ opacity:1; transform:none } @media (hover:hover) and (pointer:fine){ .quick{ opacity:0; transform:translateY(4px) } .card:hover .quick, .quick:focus-visible, .quick.is-on{ opacity:1; transform:none } } .sizes{ position:absolute; left:10px; right:10px; bottom:10px; z-index:5; background:var(--canvas); border:1px solid var(--line-strong); padding:10px; display:flex; flex-direction:column; gap:8px; } .sizes__row{ display:flex; gap:6px } .sz{ flex:1; min-width:0; padding:9px 0; font-size:11px; font-weight:600; letter-spacing:.10em; border:1px solid var(--line); color:var(--ink); transition:background 120ms linear, color 120ms linear, border-color 120ms linear; } .sz:hover:not(:disabled){ background:var(--ink); color:var(--canvas); border-color:var(--ink) } .sz.is-added{ background:var(--ink); color:var(--canvas); border-color:var(--ink) } .sz--out{ color:var(--archived); text-decoration:line-through; cursor:default } .sizes__fit{ font-size:10px; letter-spacing:.06em; color:var(--ink-muted); text-align:center } /* ============================================================ COS, panou lateral ============================================================ */ .cart{ position:fixed; inset:0; z-index:90 } .cart-count{ font-variant-numeric:tabular-nums } .nav__cart.has-items{ color:var(--ink) } .cart__scrim{ position:absolute; inset:0; background:rgba(18,16,20,.42); opacity:0; transition:opacity 240ms linear; } .cart.is-open .cart-count{ font-variant-numeric:tabular-nums } .nav__cart.has-items{ color:var(--ink) } .cart__scrim{ opacity:1 } .cart__panel{ position:absolute; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--canvas); border-left:1px solid var(--line); display:flex; flex-direction:column; transform:translateX(100%); transition:transform 320ms var(--ease-out); } .cart.is-open .cart__panel{ transform:none } .cart__head{ display:flex; align-items:center; justify-content:space-between; padding:20px var(--s3); border-bottom:1px solid var(--line); } .cart__close{ width:32px; height:32px; display:grid; place-items:center; color:var(--ink) } .cart__close svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4 } /* Bara de progres spre transportul gratuit. Singura forma de urgenta care creste valoarea comenzii fara sa minta despre pret. */ .cart__ship{ padding:14px var(--s3) 0 } .cart__ship p{ font-size:12px; letter-spacing:.02em; color:var(--ink-muted); margin-bottom:8px } .cart__ship p b{ color:var(--ink); font-weight:600 } .cart__ship p.is-done{ color:var(--ink); font-weight:600 } .cart__ship .bar{ display:block; height:2px; background:var(--line) } .cart__ship .bar i{ display:block; height:100%; background:var(--ink); transform-origin:left; transition:transform 420ms var(--ease-out); } .cart__lines{ flex:1; overflow-y:auto; padding:var(--s3); display:flex; flex-direction:column; gap:var(--s3) } .cart__empty{ font-size:14px; color:var(--ink-muted); text-align:center; padding:var(--s5) 0 } .line{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:start } .line__img{ width:64px; aspect-ratio:4/5; object-fit:cover; background:var(--surface) } .line__id{ display:flex; flex-direction:column; gap:4px; min-width:0 } .line__name{ font-size:12px; font-weight:600; letter-spacing:.10em; text-transform:uppercase } .line__size{ font-size:10px; letter-spacing:.16em; color:var(--ink-muted) } .line__qty{ display:flex; align-items:center; gap:10px; margin-top:4px } .line__qty button{ width:24px; height:24px; border:1px solid var(--line); color:var(--ink); font-size:12px; line-height:1; display:grid; place-items:center; } .line__qty button:disabled{ opacity:.3; cursor:default } .line__qty span{ font-size:12px; font-variant-numeric:tabular-nums; min-width:12px; text-align:center } .line__price{ font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap } .cart__foot{ padding:var(--s3); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:14px } .sum__row{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-muted) } .sum__row b{ color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums } .sum__row--total{ padding-top:10px; border-top:1px solid var(--line); font-size:14px; color:var(--ink) } .sum__row--total b{ font-weight:600 } .cart__msg{ font-size:12px; color:var(--ember); opacity:0; transition:opacity 200ms linear } .cart__msg.is-on{ opacity:1 } .cart__note{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); text-align:center } /* marimi in pagina de produs */ .modal__sizehead{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2) } .modal__guide{ font-size:11px; color:var(--ink-muted); text-decoration:underline; text-underline-offset:3px } .modal__left{ display:block; font-size:11px; color:var(--ember); font-weight:600; letter-spacing:.06em } .modal__fit{ display:block; font-size:11px; color:var(--ink-muted) } .size--out{ color:var(--archived); text-decoration:line-through; cursor:default } @media (max-width:760px){ .cart__panel{ width:100% } .sizes{ left:6px; right:6px; bottom:6px; padding:8px } .sz{ padding:11px 0 } .quick{ right:7px; bottom:7px } } /* ============================================================ GHID DE MARIMI ============================================================ */ .guide{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:var(--s3) } .guide__scrim{ position:absolute; inset:0; background:rgba(18,16,20,.42); opacity:0; transition:opacity 220ms linear } .guide.is-open .guide__scrim{ opacity:1 } .guide__panel{ position:relative; z-index:1; width:min(560px,100%); max-height:calc(100svh - 48px); overflow-y:auto; background:var(--canvas); border:1px solid var(--line); opacity:0; transform:translateY(10px); transition:opacity 240ms var(--ease-out), transform 240ms var(--ease-out); } .guide.is-open .guide__panel{ opacity:1; transform:none } .guide__head{ display:flex; align-items:center; justify-content:space-between; padding:18px var(--s3); border-bottom:1px solid var(--line); } .guide__close{ width:32px; height:32px; display:grid; place-items:center; color:var(--ink) } .guide__close svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4 } .guide__tabs{ display:flex; gap:0; border-bottom:1px solid var(--line) } .gtab{ flex:1; padding:13px 0; font-size:10px; font-weight:600; letter-spacing:.22em; color:var(--ink-muted); border-bottom:1px solid transparent; transition:color 120ms linear, border-color 120ms linear; } .gtab.is-on{ color:var(--ink); border-bottom-color:var(--ink) } .guide__body{ padding:var(--s3) } .guide__body table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums } .guide__body th,.guide__body td{ padding:11px 6px; text-align:right; font-size:14px; font-weight:400; border-bottom:1px solid var(--line-soft); } .guide__body thead th{ font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); border-bottom:1px solid var(--line); } .guide__body tbody th{ text-align:left; font-weight:600; letter-spacing:.10em } .guide__note{ font-size:12px; color:var(--ink-muted); margin-top:var(--s2); line-height:1.6 } .guide__fit{ font-size:12px; color:var(--ink); margin-top:6px } .modal__guide{ font-size:11px; color:var(--ink-muted); text-decoration:underline; text-underline-offset:3px } .modal__guide:hover{ color:var(--ink) } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1024px){ .modal__panel{ grid-template-columns:1fr; max-height:calc(100svh - 32px) } .modal__media{ padding:var(--s4) var(--s4) 0 } .modal__media .plate{ max-width:320px; margin:0 auto } } @media (max-width:760px){ :root{ --gut:16px } .nav__inner{ height:58px } /* Un singur panou, fundal opac, inaltime din continut. Varianta veche avea doua grupuri fixed cu `top:198px` scris de mana, care se dezaliniau la orice link adaugat si lasau pagina sa se vada printre ele. */ .nav__menu{ display:grid; grid-template-rows:0fr 0fr; position:absolute; left:0; right:0; top:100%; background:var(--canvas); border-bottom:1px solid transparent; transition:grid-template-rows var(--t-move) var(--ease-mech), border-color var(--t-move) linear; } .nav__menu > *{ overflow:hidden; min-height:0 } .nav.is-open .nav__menu{ grid-template-rows:1fr 1fr; border-bottom-color:var(--line) } .nav__links{ flex-direction:column; align-items:flex-start; gap:0; padding:0 var(--pad); } .nav__links a, .nav__cart{ width:100%; padding:19px 0; font-size:12px } .nav__toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; justify-self:start; grid-area:1/1; z-index:4; position:relative; } .nav__toggle span{ display:block; width:20px; height:1px; background:var(--ink); transition:transform var(--t-ui) var(--ease-mech) } .nav.is-open .nav__toggle span:first-child{ transform:translateY(3px) rotate(45deg) } .nav.is-open .nav__toggle span:last-child{ transform:translateY(-3px) rotate(-45deg) } .utility p{ height:auto; padding:9px var(--pad); line-height:1.5; letter-spacing:.18em } .cats{ top:58px; gap:clamp(16px,6vw,32px) } /* Doua coloane. Trei piese pe categorie inseamna 2+1, iar orfanul e normal in orice magazin. Nu-l repara cu un card full-width artistic. */ .grid{ grid-template-columns:repeat(2,1fr); column-gap:12px; row-gap:40px } .card__name{ font-size:13px; letter-spacing:.08em } .card__meta{ flex-direction:column; align-items:flex-start; gap:3px } .footer__row{ flex-direction:column; align-items:flex-start } .footer__base{ flex-direction:column; gap:6px } .modal{ padding:0 } .modal__panel{ max-height:100svh; height:100svh } } @media (max-width:400px){ .banner__word{ letter-spacing:.06em; margin-right:-.06em } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important } [data-reveal],[data-reveal].is-in{ opacity:1; transform:none } .mask > b{ transform:none } .banner__scan{ display:none } .card,.card.is-in{ opacity:1; transform:none } .plate__front,.plate__back{ transition:none } .rule--grow{ transform:scaleX(1) } .nav__rule{ transform:scaleX(1) } .modal__panel,.modal__body > *{ opacity:1; transform:none } .modal__scrim{ opacity:1 } }