/* ========================================================================== * ALX Product Showcase v4.3.0 — arhitectură "pin & release" după prototipul * Figma: fiecare panou are 250vh, conținutul (logo + sticle + caption) stă * într-un înveliș sticky de 100vh. Intră natural de jos, parchează cât ține * panoul, apoi PLEACĂ ÎMPREUNĂ în sus. JS adaugă doar offsetul de intrare al * sticlelor, blurul emblemei la repaus, snap și meniul lateral. * ========================================================================== */ .alx-showcase { --alx-bg: #F4F4EC; --alx-bg-dark: #14120F; --alx-panel-bg: #1E1C1D; --alx-card-bg: #3A3532; --alx-ink: #1C1C1C; --alx-ink-soft: #3C3C3C; --alx-ink-muted: #6E6357; --alx-ink-faint: #B5AFA2; --alx-gold: #6E6857; --alx-gold-bright: #C3B283; --alx-gold-title: #A89B6C; --alx-ivory: #D4CFCC; --alx-grey: #8A857C; --alx-sidebar-w: clamp(170px, 13vw, 220px); --alx-header-h: 90px; --alx-font-display: 'Instrument Serif', Georgia, serif; --alx-font-body: 'AauxNext', -apple-system, sans-serif; position: relative; background: var(--alx-bg); color: var(--alx-ink); font-family: var(--alx-font-body); } .alx-showcase * { box-sizing: border-box; } /* Secțiunile full-bleed (100vw) depășesc zona de conținut cu ~½ scrollbar pe * browserele cu scrollbar clasic; clip taie fără a crea container de scroll * (overflow-x: hidden pe body ar putea strica position: sticky). */ html, body { overflow-x: clip; /* Fără clătinare stânga-dreapta pe touch: gesturile orizontale care * „scapă" din bara de game / slider (rubber-band la capete) nu mai au * voie să se propage la pagină. */ overscroll-behavior-x: none; } /* --------------------------------------------------------------- hero --- */ /* Hero = primul ecran complet: 100vh minus antetul site-ului (măsurat de JS * în --alx-header-h). Bara de game vine imediat după, exact la fold. */ .alx-hero { width: 100vw; position: relative; left: 50%; margin-left: -50vw; height: calc(100vh - var(--alx-header-h, 90px)); background: linear-gradient(180deg, #211F20 0%, #191718 50%, #101010 100%); color: #FFFFFF; text-align: center; padding: clamp(56px, 9vh, 120px) 24px 0; overflow: hidden; } @supports (height: 100svh) { .alx-hero { height: calc(100svh - var(--alx-header-h, 90px)); } } .alx-hero-rule { display: block; width: min(460px, 60%); height: 2px; background: #87876B; margin: 0 auto 12px; } .alx-hero-kicker { font-family: var(--alx-font-display); font-style: normal; font-size: clamp(20px, 1.67vw, 24px); color: #ECEBE9; margin: 0 0 26px; } .alx-showcase .alx-hero-title { font-family: var(--alx-font-body); font-weight: 700; font-size: clamp(38px, 4.24vw, 61px); line-height: 1.1; letter-spacing: 0.5px; text-transform: uppercase; color: #FFFFFF; margin: 0 auto; max-width: 820px; } .alx-hero-scroll { margin-top: clamp(28px, 5.5vh, 60px); display: flex; flex-direction: column; align-items: center; gap: 10px; } .alx-hero-mouse { width: 29px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 15px; position: relative; } .alx-hero-mouse::after { content: ''; position: absolute; top: 15px; left: 50%; width: 5px; height: 8px; margin-left: -2.5px; background: rgba(255, 255, 255, 0.8); border-radius: 2.5px; animation: alx-scroll-hint 1.6s ease-in-out infinite; } .alx-hero-scroll-label { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #B3B1B2; } /* Trei sticle estompate, ancorate de marginea de jos a hero-ului. */ .alx-hero-bottles { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; gap: 10vw; pointer-events: none; } .alx-hero-bottles img { display: block; width: auto; transform: translateY(26%); filter: brightness(0.62) saturate(0.85); } .alx-hero-bottles img:nth-child(1), .alx-hero-bottles img:nth-child(3) { max-height: 33vh; } .alx-hero-bottles img:nth-child(2) { max-height: 43vh; } @keyframes alx-scroll-hint { 0%, 100% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(13px); opacity: 0; } } /* --------------------------------------------------------------- tabs --- */ /* Bară segmentată cu chenare fine, pe toată lățimea utilă (marje ~5.5vw), * text 13px caps; celula activă pe fundal închis — ca în Figma. */ /* Bara: chenar exterior 1px + separatoare verticale, celule transparente * peste cremul paginii, doar celula activă e umplută (măsurat din prototip: * bordură #B5B3AA, text inactiv #6A6A62 12.5px/500, activ #F2EFE8 pe * #3A3732, înălțime ~40px, parcată la 6.3vh). */ .alx-tabs { position: sticky; top: 57px; z-index: 20; display: flex; flex-wrap: nowrap; margin: 0 5.65vw; border: 1px solid #B5B3AA; /* Linia de jos e desenată de celule: doar așa poate fi întreruptă la * hover (overflow-x ar decupa un element așezat peste bordura barei). */ border-bottom: none; overflow-x: auto; /* Când bara ajunge la capăt, gestul orizontal se oprește aici — nu se * propagă la pagină (clătinare stânga-dreapta pe touch). */ overscroll-behavior-x: contain; scrollbar-width: none; /* Același crem ca fundalul paginii — bara nu iese în evidență, doar * acoperă sticlele care trec pe sub ea. */ background: var(--alx-bg); transition: opacity 0.35s ease; /* Click + trage pe bară nu trebuie să selecteze textul (highlight roz * din tema de bază) — bara nu e conținut de citit/selectat. */ -webkit-user-select: none; -moz-user-select: none; user-select: none; } .alx-tabs::-webkit-scrollbar { display: none; } .alx-tab { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 10px 18px; background: transparent; border: none; border-left: 1px solid #B5B3AA; border-bottom: 1px solid #B5B3AA; color: #6A6A62; font-family: var(--alx-font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; text-align: center; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, color 0.35s ease; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .alx-tab:first-child { border-left: none; padding-left: 30px; padding-right: 30px; } /* Colțuri drepte peste tot în bară, indiferent de stilurile temei. */ .alx-showcase .alx-tabs, .alx-showcase .alx-tab, .alx-showcase .alx-tab:hover, .alx-showcase .alx-tab:focus, .alx-showcase .alx-tab:active { border-radius: 0; box-shadow: none; outline: none; } .alx-tab-label { position: relative; display: inline-block; } /* Întreruperea liniei de sub item: „taie" bordura în culoarea fundalului, * crescând din centru, pe o lățime mai mică decât a textului. * -11px = padding-bottom (10px) + bordura (1px) sub eticheta din celulă. */ .alx-tab-label::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: -11px; height: 1px; background-color: var(--alx-bg); transform: scaleX(0); transform-origin: center center; transition: transform 0.35s ease; pointer-events: none; } /* Hover: text auriu + linia de dedesubt se rupe. Celula activă rămâne * neschimbată. */ /* button:focus (nu doar :hover) e pictat roz de reset.css-ul temei de * bază (hello-elementor) — :focus-visible NU se declanșează la un click cu * mouse-ul (doar la navigare cu tastatura), deci trebuie acoperit explicit * și :focus simplu, altfel roza rămâne la apăsare-și-ținere / drag. */ /* :hover rămâne NEGARDAT de @media (hover:hover): pe touch, tap-ul emulează * hover și îl lasă „lipit" pe celulă — dacă override-ul nostru ar fi doar pe * dispozitive cu hover real, regula roz a temei ar rămâne fără contra-regulă * exact pe telefoane. Auriul lipit după tap e acceptabil; rozul nu. */ .alx-showcase .alx-tab:not(.is-active):hover, .alx-showcase .alx-tab:not(.is-active):focus, .alx-showcase .alx-tab:not(.is-active):focus-visible, .alx-showcase .alx-tab:not(.is-active):active { background: transparent; color: #B19F5E; } .alx-tab:not(.is-active):hover .alx-tab-label::after, .alx-tab:not(.is-active):focus .alx-tab-label::after, .alx-tab:not(.is-active):focus-visible .alx-tab-label::after, .alx-tab:not(.is-active):active .alx-tab-label::after { transform: scaleX(1); } .alx-tab.is-active { background: #3A3732; color: #F2EFE8; } /* --------------------------------------------------- fluxul de panouri --- */ .alx-flow { position: relative; width: 100vw; left: 50%; margin-left: -50vw; background: var(--alx-bg); } /* 160vh per panou: 100vh intrare naturală + 60vh în care sticlele își * termină urcarea; release-ul coincide cu așezarea — repaus ZERO, exact * ca în prototip ("niciun scroll fără acțiune"). Panourile se suprapun cu * 14vh ca logo-ul următor să apară la release+14vh, cum e măsurat. */ .alx-panel { position: relative; /* 164vh: asezarea la +60vh, release la +64vh — 4vh de siguranta ca * offcanvas-ul sa aiba un punct stabil (imperceptibil la scroll). */ height: 164vh; } .alx-panel + .alx-panel { margin-top: -14vh; } .alx-panel.is-filtered-out { display: none; } .alx-panel-inner { position: sticky; top: 0; height: 100vh; overflow: visible; /* Panourile se suprapun 14vh — fâșia transparentă nu are voie să * înghită clickurile panoului de dedesubt. */ pointer-events: none; } .alx-bottle-item { pointer-events: auto; } /* Scena ocupă toată lățimea — sticlele sunt centrate pe PAGINĂ (ca în * prototipul clientului), meniul lateral doar se suprapune la stânga. */ .alx-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: transform 0.6s cubic-bezier(0.45, 0, 0.25, 1); } /* Emblema gamei: parcată în centrul scenei; JS o face "ghost" (blur) când * sticlele ajung la repaus peste ea. Pleacă odată cu sticlele (sticky). */ /* Centrat cu margini auto, FĂRĂ translateX: transformul e rezervat GSAP * (lagul de ieșire) — un translate în CSS ar fi înghețat în px greșiți la * inițializare și ar descentra / face logo-ul să sară. */ .alx-panel-logo { position: absolute; top: 34vh; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 100%; z-index: 1; pointer-events: none; will-change: filter, opacity; } .alx-panel-logo img { display: block; max-height: 20vh; max-width: min(17vw, 250px); width: auto; margin: 0 auto; } /* Centrat cu margini auto (fără translateX) ca GSAP să poată anima liber * doar axa Y a transformului. */ /* Baza sticlelor stă pe linia de ~72vh (28vh de la baza ecranului), ca în * prototip; captionul atârnă absolut sub sticlă, fără să lățească figura. */ .alx-bottle-group { position: absolute; left: 0; right: 0; bottom: 28vh; margin: 0 auto; width: max-content; z-index: 2; display: flex; align-items: flex-end; justify-content: center; will-change: transform; } /* Constanta din prototip e PASUL dintre centre (22.5vw), nu golul dintre * margini: fiecare sticlă are un "slot" fix, golul rezultă din lățimea ei. */ .alx-bottle-item { position: relative; margin: 0; flex: 0 0 auto; width: min(22.5vw, 340px); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer; } .alx-item-media { position: relative; } /* Steluța de distincție de lângă sticlă (produsele cu medalie) — ca în * prototip, la ~2/3 din înălțime, în dreapta sticlei. */ .alx-item-star { position: absolute; right: -26px; bottom: 27%; font-size: 15px; line-height: 1; color: var(--alx-gold); pointer-events: none; transition: opacity 0.35s ease; } .is-detail-open .alx-panel.is-active .alx-item-star { opacity: 0; } /* Sticle ~56vh (măsurat în prototipul clientului), bazele aliniate — figura * conține doar sticla (captionul e scos din flux), deci flex-end aliniază * exact bazele imaginilor. */ .alx-item-media img { display: block; height: auto; max-height: 56vh; width: auto; max-width: 14vw; object-fit: contain; object-position: bottom; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.22)); } /* Maxim 3 sticle pe ecran (regulă din design, impusă și în PHP). */ /* Captionul atârnă absolut sub sticlă: nu lățește figura (deci nu strică * distanțele dintre sticle) și poate fi mai lat decât sticla, ca în design. * Fiind copil al figurii, intră/iese odată cu ea și rămâne clicabil. */ .alx-item-caption { position: absolute; top: calc(100% + clamp(24px, 4.1vh, 40px)); left: 50%; transform: translateX(-50%); width: max-content; max-width: 340px; margin: 0; text-align: center; /* Tema stilizează figcaption cu italice — aici totul e drept. */ font-style: normal; } .alx-item-caption * { font-style: normal; } /* Tipografia captionului, măsurată din prototip: titlu serif ~38-40px * bronz mat, categorie ~17px bold aproape-negru, gama ~14px gri. */ .alx-showcase .alx-caption-title { font-family: var(--alx-font-display); font-size: clamp(26px, 2.5vw, 38px); font-weight: 400; font-style: normal; letter-spacing: 0.7px; line-height: 1.1; text-transform: uppercase; color: var(--alx-gold); margin: 0 0 4px; } .alx-caption-star { font-size: 0.34em; vertical-align: super; letter-spacing: 0; } .alx-caption-category { margin: 0 0 8px; font-size: clamp(14px, 1.2vw, 17px); font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: #535349; } .alx-caption-range { margin: 0; font-size: clamp(12px, 1vw, 14px); letter-spacing: 1px; text-transform: uppercase; color: #7F7E78; } /* ------------------------------------------------------------ sidebar --- */ /* Coloană centrată lângă marginea stângă; fereastră de ~5 rânduri cu fade * spre albul fundalului (mască de gradient), text mare, pas strâns. * Fără margine negativă AICI: sticky-ul e constrâns de marginile lui, iar o * margine-bottom negativă i-ar da voie să iasă 100vh dincolo de capătul lui * .alx-flow — adică peste footer, la finalul listei. Anularea amprentei de * 100vh din flux e mutată pe .alx-panels (vezi regula următoare); geometria * panourilor rămâne identică, doar eliberarea se oprește la ultimele produse. */ .alx-sidebar { position: sticky; top: 0; height: 100vh; width: var(--alx-sidebar-w); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 6; } /* Perechea trucului de mai sus: panourile se trag înapoi peste rail-ul * sidebarului (frate anterior, înalt de 100vh), ca primul panou să înceapă * la vârful lui .alx-flow. Sub 1200px întregul .alx-flow e display:none, * deci regula nu atinge nivelul mobil. */ .alx-panels { margin-top: -100vh; } /* Fereastră de ~205px cu fade de o înălțime de rând spre cremul paginii; * itemii inactivi stau la un 0.3 uniform (nu scară pe distanță — măsurat). */ .alx-sidebar-inner { width: 100%; max-height: 260px; overflow: hidden; padding: 0 12px; pointer-events: auto; transition: opacity 0.35s ease; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); } .alx-sidebar-list { list-style: none; margin: 0; padding: 130px 0; display: flex; flex-direction: column; gap: 19px; text-align: center; width: 100%; transition: transform 0.45s cubic-bezier(0.45, 0, 0.25, 1); } .alx-sidebar-item { font-size: 15px; font-weight: 500; letter-spacing: 1.2px; line-height: 1.2; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #141414; opacity: 0.3; cursor: pointer; transition: color 0.3s ease, opacity 0.3s ease; } /* Butonul din interiorul rândului moștenește totul — există doar pentru * accesibilitate de la tastatură. Stările hover/focus/active sunt fixate * explicit ca stilurile globale de buton ale temei / kitului Elementor * (fundal sau culoare roz-maronie la hover) să nu se poată infiltra. */ .alx-showcase .alx-sidebar-item button, .alx-showcase .alx-sidebar-item button:hover, .alx-showcase .alx-sidebar-item button:focus, .alx-showcase .alx-sidebar-item button:active { display: block; width: 100%; padding: 0; margin: 0; background: none; background-color: transparent; border: none; box-shadow: none; outline: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: center; white-space: inherit; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: none; } /* Doar pe hover real — pe touch, opacitatea redusă ar rămâne blocată. */ @media (hover: hover) { .alx-sidebar-item:hover { opacity: 0.75; } } .alx-sidebar-item.is-active { color: #141414; font-weight: 700; opacity: 1; } .alx-sidebar-item.is-filtered-out { display: none; } /* --------------------------------------------- panoul de detalii (dark) --- */ /* Etajul panoului de detalii (v4.3.0). Headerul sticky al temei stă la * z-index 999 și acoperea offcanvas-ul (care era la 50) imediat ce userul * derula pagina cu panoul deschis. Urcăm ambele PESTE header, dar sub bara * de admin WordPress (99999), ca ea să rămână accesibilă pentru editori. * Consecință acceptată: cu panoul deschis, headerul nu mai e clicabil — * primul click în afara panoului îl închide oricum (vezi onDocClick). */ .alx-overlay { position: fixed; inset: 0; background: transparent; opacity: 0; pointer-events: none; z-index: 9990; } .is-detail-open .alx-overlay { opacity: 1; pointer-events: auto; } .alx-offcanvas { position: fixed; top: 0; right: 0; height: 100%; width: min(41.5vw, 640px); background: var(--alx-panel-bg); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.33, 0, 0.2, 1); z-index: 9991; overflow-y: auto; /* Scrollul din interiorul panoului nu se mai propagă la pagină când * ajunge la capăt — blocarea din JS lasă intenționat panoul derulabil, * iar fără asta ultimul „tick" de wheel scăpa în scenă. */ overscroll-behavior: contain; color: var(--alx-ivory); } .is-detail-open .alx-offcanvas { transform: translateX(0); } .alx-offcanvas-inner { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: 56px 24px 63px 64px; } .alx-offcanvas-body { display: flex; flex-direction: column; flex: 1; } .alx-offcanvas-close { position: absolute; top: 38px; right: 41px; font-size: 22px; line-height: 1; cursor: pointer; } /* Reset dur pe toate stările — stilurile globale de buton ale temei * (fundal roz la focus/hover) nu au voie să se infiltreze. */ .alx-showcase .alx-offcanvas-close, .alx-showcase .alx-offcanvas-close:hover, .alx-showcase .alx-offcanvas-close:focus, .alx-showcase .alx-offcanvas-close:active { background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; outline: none; padding: 0; color: #FFFFFF; } .alx-offcanvas-panel { display: none; } .alx-offcanvas-panel.is-active { display: flex; flex-direction: column; flex: 1; } .alx-offcanvas-panel.is-active .alx-offcanvas-body { flex: 1; } .alx-showcase .alx-offcanvas-title { font-family: var(--alx-font-display); font-size: 36px; font-weight: 400; letter-spacing: 0.6px; text-transform: uppercase; color: var(--alx-gold-title); margin: 0 0 4px; } .alx-offcanvas-meta { margin: 0 0 32px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--alx-grey); } /* Sticla e deja în stage pe desktop; imaginea din sheet e doar pentru * nivelul slider (≤1199), unde stage-ul nu există. */ .alx-offcanvas-bottle { display: none; } /* Coloane EGALE: 3 dacă toate 3 câmpurile sunt completate, 2 dacă sunt * două ș.a.m.d. — cardurile împart rândul în părți egale, textul lung se * frânge în interiorul cardului. */ .alx-offcanvas-badges { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 30px; } .alx-badge { flex: 1 1 0; min-width: 0; background: var(--alx-card-bg); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; padding: 14px; } /* Cardul de distincție: chenar cu gradient auriu, ca în Figma. */ .alx-offcanvas-badges .alx-badge:first-child { border: 1px solid transparent; background: linear-gradient(var(--alx-card-bg), var(--alx-card-bg)) padding-box, linear-gradient(135deg, #D8C289 0%, #B19F5E 45%, #6E5C33 100%) border-box; } .alx-badge-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #787370; margin-bottom: 5px; } .alx-badge-value { display: block; font-size: 13px; font-weight: 600; color: var(--alx-ivory); } .alx-offcanvas-description { font-size: 14px; line-height: 1.35; color: #CECDCD; margin-bottom: 30px; } .alx-offcanvas-specs { display: flex; gap: 8px; margin-bottom: 26px; } .alx-spec { flex: 0 1 178px; background: var(--alx-card-bg); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; padding: 14px; } .alx-spec-label { display: block; font-size: 11px; text-transform: uppercase; color: var(--alx-grey); margin-bottom: 5px; } .alx-spec-value { display: block; font-size: 13px; font-weight: 600; color: var(--alx-ivory); } .alx-sizes-label { font-size: 11px; text-transform: uppercase; color: var(--alx-grey); margin: 0 0 12px; } .alx-sizes-pills { display: flex; gap: 8px; } .alx-size-pill { padding: 6px 14px; background: var(--alx-card-bg); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 3px; font-size: 12px; color: var(--alx-ivory); } .alx-offcanvas-actions { margin-top: auto; padding-top: 44px; display: flex; gap: 40px; align-items: center; flex-wrap: wrap; } .alx-btn { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: opacity 0.25s ease, box-shadow 0.25s ease; } /* Butonul auriu în stilul AG al site-ului: borduri laterale solide, liniile * de sus/jos cu un gap de 4% care glisează la hover (sus→stânga, jos→dreapta) * — același motiv ca butoanele .ag-btn-* din style.css. Culorile sunt din * paleta site-ului (#B19F5E / #F2E7BE / #D8C289). */ .alx-btn-buy { --ag-c1: #B19F5E; --ag-gap-top: 50%; --ag-gap-bottom: 50%; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 46px; box-sizing: border-box; background: transparent; border: 0; border-left: 1px solid var(--ag-c1); border-right: 1px solid var(--ag-c1); color: #F2E7BE; font-weight: 600; transition: --ag-gap-top 0.45s cubic-bezier(0.4, 0, 0.2, 1), --ag-gap-bottom 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .alx-btn-buy::before, .alx-btn-buy::after { content: ''; position: absolute; left: 0; width: 100%; height: 1px; pointer-events: none; } .alx-btn-buy::before { top: 0; background-image: linear-gradient( to right, var(--ag-c1) 0%, var(--ag-c1) calc(var(--ag-gap-top) - 2%), transparent calc(var(--ag-gap-top) - 2%), transparent calc(var(--ag-gap-top) + 2%), var(--ag-c1) calc(var(--ag-gap-top) + 2%), var(--ag-c1) 100% ); } .alx-btn-buy::after { bottom: 0; background-image: linear-gradient( to right, var(--ag-c1) 0%, var(--ag-c1) calc(var(--ag-gap-bottom) - 2%), transparent calc(var(--ag-gap-bottom) - 2%), transparent calc(var(--ag-gap-bottom) + 2%), var(--ag-c1) calc(var(--ag-gap-bottom) + 2%), var(--ag-c1) 100% ); } /* Glisarea gapului doar pe hover real — pe touch animația ar porni la tap * și ar rămâne în starea finală. */ @media (hover: hover) { .alx-btn-buy:hover { --ag-gap-top: 8%; --ag-gap-bottom: 92%; } } /* Culorile fixate pe TOATE stările — altfel a:visited / a:hover din kitul * Elementor le vopsesc mov/albastru. */ .alx-showcase .alx-btn-buy, .alx-showcase .alx-btn-buy:link, .alx-showcase .alx-btn-buy:visited, .alx-showcase .alx-btn-buy:hover, .alx-showcase .alx-btn-buy:focus, .alx-showcase .alx-btn-buy:active { color: #F2E7BE; background-color: transparent; text-decoration: none; box-shadow: none; outline: none; } .alx-showcase .alx-btn-more, .alx-showcase .alx-btn-more:link, .alx-showcase .alx-btn-more:visited, .alx-showcase .alx-btn-more:focus, .alx-showcase .alx-btn-more:active, .alx-showcase .alx-btn-more:hover { color: #D8C289; background-color: transparent; box-shadow: none; outline: none; text-decoration: none; } /* Ca .ag-btn-underline din stilul site-ului: fără chenar, subliniere * animată din centru la hover — dar în auriul nostru. */ .alx-btn-more { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 8px 2px; line-height: 1.2; } .alx-btn-more::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background-color: #D8C289; transform: scaleX(0); transform-origin: center center; transition: transform 0.35s; pointer-events: none; } /* Sublinierea animată doar pe hover real — pe touch ar rămâne „lipită". */ @media (hover: hover) { .alx-btn-more:hover::after { transform: scaleX(1); } } /* Scena cu detalii deschise: fără scrim — cromul se estompează; sticla * alunecă spre stânga și crește, emblema devine clară lângă ea (mișcările * le face JS/GSAP; shift-ul CSS pe .alx-stage e doar fallback fără GSAP). */ .is-detail-open .alx-tabs, .is-detail-open .alx-sidebar-inner { opacity: 0; pointer-events: none; } .is-detail-open.alx-nogsap .alx-panel.is-active .alx-stage { transform: translateX(-16vw) scale(1.12); } .is-detail-open .alx-panel.is-active .alx-item-caption { opacity: 0 !important; } .alx-item-caption { transition: opacity 0.35s ease; } /* -------------------------------------------------------------- mobil --- */ .alx-mobile-slider { display: none; } /* Contorul „N / M" e moștenire din nivelul carusel orizontal; fluxul * vertical nu are nevoie de el — ascuns la orice lățime. */ .alx-slider-counter { display: none; } /* Nivelul vertical: tot ce e sub 1200px. Mașinăria desktop (pin & release, * stage, sidebar) are nevoie de ≥1200 ca să respire — sub prag, fluxul de * panouri dispare și rămâne fluxul vertical de carduri (un produs pe ecran, * în tonul întunecat al desktopului) + bara de taburi (care filtrează * cardurile, deci rămâne vizibilă și sticky). */ @media (max-width: 1199px) { .alx-flow { display: none; } /* Pe desktop top-ul e fixat la 57px; aici înălțimea antetului e * măsurată de JS în --alx-header-h, ca bara să parcheze exact sub el * indiferent de varianta de header mobil. */ .alx-tabs { position: sticky; top: var(--alx-header-h, 0px); z-index: 30; margin: 0; -webkit-overflow-scrolling: touch; } /* Celulele nu se mai strâng — bara derulează orizontal. */ .alx-tab { flex: 0 0 auto; padding: 12px 18px; } /* Flux vertical (v4.1): clientul a respins caruselul orizontal — sub * 1200px produsele curg unul sub altul, câte unul pe ecran. Full-bleed * cu trucul 100vw/-50vw (ca .alx-flow), ca fundalul să atingă * marginile viewportului chiar dacă zona de conținut e boxată. * Fundalul e ACELAȘI crem ca fluxul desktop (--alx-bg) — clientul a * respins varianta închisă: mobilul oglindește desktopul, nu hero-ul. */ .alx-mobile-slider { display: block; position: relative; width: 100vw; left: 50%; margin-left: -50vw; padding: 0; background: var(--alx-bg); } /* Snap blând pe verticală: proximity, NU mandatory — hero-ul, bara de * taburi și footerul trebuie să rămână liber accesibile. */ html { scroll-snap-type: y proximity; } /* Un produs = un ecran. scroll-margin-top ține cont de headerul sticky * măsurat de JS în --alx-header-h; svh (cu fallback vh) urmărește bara * de adresă mobilă. */ .alx-mobile-card { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 96px 24px 64px; background: transparent; border: 0; border-radius: 0; text-align: center; scroll-snap-align: start; scroll-margin-top: calc(var(--alx-header-h, 0px)); } .alx-mobile-card.is-filtered-out { display: none; } /* Sticla: deasupra emblemei (z-index 2 vs 1), plafonată ca să lase loc * captionului sub ea. */ .alx-mobile-card img { position: relative; z-index: 2; max-height: 48vh; max-height: 48svh; width: auto; display: block; margin: 0 auto 24px; } /* v4.2: logo-ul NU mai stă în spatele fiecărei sticle — colecția are * propriul ecran de deschidere (.alx-mobile-collection), apoi curg * sticlele ei. Regula de mai jos doar neutralizează markup vechi. */ .alx-mobile-card img.alx-mobile-card-logo { display: none; } /* Ecranul de colecție: logo mare la opacitate plină + numele colecției, * o gură de aer (~62svh) între seriile de produse — ritmul emblemelor * din stage-ul desktop. */ .alx-mobile-collection { position: relative; min-height: 62vh; min-height: 62svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 96px 24px 48px; text-align: center; scroll-snap-align: start; scroll-margin-top: calc(var(--alx-header-h, 0px)); } .alx-mobile-collection img { display: block; width: auto; max-width: min(64vw, 340px); max-height: 26vh; max-height: 26svh; margin: 0 auto 18px; } .alx-mobile-collection-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #535349; margin: 0; } .alx-mobile-collection.is-filtered-out { display: none; } /* Captionul = EXACT paleta captionului desktop pe crem: titlu auriu * bronz (--alx-gold), categorie aproape-negru bold, gamă gri. */ .alx-showcase .alx-mobile-card-title { position: relative; z-index: 2; font-family: var(--alx-font-display); font-size: clamp(28px, 7vw, 40px); font-weight: 400; font-style: normal; letter-spacing: 0.7px; line-height: 1.1; text-transform: uppercase; color: var(--alx-gold); margin: 0 0 6px; } .alx-mobile-card-category { position: relative; z-index: 2; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #535349; margin: 0 0 10px; } .alx-mobile-card-range { position: relative; z-index: 2; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #7F7E78; margin: 0 0 24px; } .alx-mobile-card-detail { position: relative; z-index: 2; display: inline-block; border: 1px solid #B19F5E; background: transparent; background-color: transparent; color: #B19F5E; padding: 14px 28px; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; } /* NEGARDAT de @media (hover:hover): pe touch, tap-ul emulează hover, * iar reset-ul temei hello-elementor vopsește a/button pe :hover/:focus * în roz #c36 — stările se suprascriu explicit, necondiționat. */ .alx-mobile-card-detail:hover, .alx-mobile-card-detail:focus, .alx-mobile-card-detail:focus-visible, .alx-mobile-card-detail:active { background: transparent; background-color: transparent; color: #D8C289; border-color: #D8C289; } /* ------------------------------------------------ animații (gated) --- * Toate stările „ascuns înainte de intrare" trăiesc DOAR sub * .alx-vertical-ready (clasă pusă de JS la init pe .alx-mobile-slider). * Fără JS → fără stare ascunsă: conținutul e vizibil de la început. * * Împărțirea opacităților, ca fade-ul de load și cel de intrare să nu * se calce pe același element: pentru STICLĂ opacitatea e 0 câtă vreme * imaginea NU e încărcată (.is-loaded pe img) SAU cardul NU e în * viewport (.is-inview pe card) — două reguli separate, același efect; * abia când ambele clase există, opacitatea revine la cea de repaus. * Elementele de caption nu au fade de load, deci au doar intrarea. */ .alx-mobile-slider.alx-vertical-ready .alx-mobile-card img, .alx-mobile-slider.alx-vertical-ready .alx-mobile-card-title, .alx-mobile-slider.alx-vertical-ready .alx-mobile-card-category, .alx-mobile-slider.alx-vertical-ready .alx-mobile-card-range, .alx-mobile-slider.alx-vertical-ready .alx-mobile-card-detail { transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.33, 0, 0.2, 1); } /* Stagger-ul intrării: sticlă (0s) → titlu → categorie → gamă → buton. */ .alx-mobile-slider.alx-vertical-ready .alx-mobile-card-title { transition-delay: 0.08s; } .alx-mobile-slider.alx-vertical-ready .alx-mobile-card-category { transition-delay: 0.14s; } .alx-mobile-slider.alx-vertical-ready .alx-mobile-card-range { transition-delay: 0.18s; } .alx-mobile-slider.alx-vertical-ready .alx-mobile-card-detail { transition-delay: 0.24s; } /* Starea de dinaintea intrării în viewport (emblema e exclusă — ea stă * pe loc, doar sticla și captionul se ridică). */ .alx-mobile-slider.alx-vertical-ready .alx-mobile-card:not(.is-inview) img:not(.alx-mobile-card-logo), .alx-mobile-slider.alx-vertical-ready .alx-mobile-card:not(.is-inview) .alx-mobile-card-title, .alx-mobile-slider.alx-vertical-ready .alx-mobile-card:not(.is-inview) .alx-mobile-card-category, .alx-mobile-slider.alx-vertical-ready .alx-mobile-card:not(.is-inview) .alx-mobile-card-range, .alx-mobile-slider.alx-vertical-ready .alx-mobile-card:not(.is-inview) .alx-mobile-card-detail { opacity: 0; transform: translateY(24px); } /* Ecranul de colecție intră cu același gest: logo-ul (0s) apoi numele * (0.1s). Aceleași porți: .alx-vertical-ready / .is-inview. */ .alx-mobile-slider.alx-vertical-ready .alx-mobile-collection img, .alx-mobile-slider.alx-vertical-ready .alx-mobile-collection-label { transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.33, 0, 0.2, 1); } .alx-mobile-slider.alx-vertical-ready .alx-mobile-collection-label { transition-delay: 0.1s; } .alx-mobile-slider.alx-vertical-ready .alx-mobile-collection:not(.is-inview) img, .alx-mobile-slider.alx-vertical-ready .alx-mobile-collection:not(.is-inview) .alx-mobile-collection-label { opacity: 0; transform: translateY(24px); } /* Fade-ul de încărcare a imaginilor — DOAR sticlele/emblemele cardurilor * și sticla din bottom-sheet, nu bara de taburi sau restul site-ului. * Fără `opacity: 1` explicit pe .is-loaded: odată încărcată, imaginea * revine singură la opacitatea de repaus (1 la sticle, 0.3 la emblemă). */ .alx-mobile-slider.alx-vertical-ready .alx-mobile-card img:not(.is-loaded), .alx-mobile-slider.alx-vertical-ready .alx-mobile-collection img:not(.is-loaded) { opacity: 0; } .alx-offcanvas-bottle { transition: opacity 0.45s ease; } /* Sheet-ul nu e în interiorul sliderului, deci gate-ul .alx-vertical-ready * se citește prin :has() de pe rădăcină; dacă browserul nu știe :has(), * regula pică și sticla din sheet rămâne pur și simplu vizibilă. */ html:has(.alx-mobile-slider.alx-vertical-ready) .alx-offcanvas-bottle:not(.is-loaded) { opacity: 0; } .alx-offcanvas { width: 100%; top: auto; bottom: 0; height: 85vh; /* dvh urmărește bara de adresă mobilă care apare/dispare; vh * rămâne fallback pentru browserele care nu-l știu. */ height: 85dvh; transform: translateY(100%); border-radius: 20px 20px 0 0; -webkit-overflow-scrolling: touch; } .is-detail-open .alx-offcanvas { transform: translateY(0); } /* Paddingul desktop (64px stânga) e croit pentru panoul lateral îngust; * bottom-sheet-ul are nevoie de margini egale și mai strânse. */ .alx-offcanvas-inner { padding: 56px 20px 32px; } .alx-showcase .alx-offcanvas-title { font-size: clamp(24px, 5.5vw, 36px); } /* Sub 640px cele 3 carduri nu mai încap pe un rând — se frâng două * câte două în loc să strivească textul. */ .alx-offcanvas-badges { flex-wrap: wrap; } .alx-badge { flex: 1 1 45%; min-width: 140px; } .alx-spec { flex: 1 1 45%; } /* Țintă de atingere ≥44px (ghidul Apple/WCAG); X-ul de 22px de pe * desktop e prea mic pentru deget. */ .alx-offcanvas-close { top: 10px; right: 10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 26px; } /* Sticla din sheet — pe desktop e ascunsă (stage-ul o arată deja); * aici e singura imagine a produsului, plafonată ca să lase loc * conținutului în cei 85dvh. */ .alx-offcanvas-bottle { display: block; max-height: 24vh; max-height: 24dvh; width: auto; margin: 0 auto 20px; } } /* Sub-nivel tabletă: mai mult aer pe ecranul mare — sticla urcă puțin, * titlul la fel. (Emblema NU e afectată: regula ei, mai specifică — * img.alx-mobile-card-logo — își păstrează plafonul de 34svh.) */ @media (min-width: 768px) and (max-width: 1199px) { .alx-mobile-card img { max-height: 52vh; max-height: 52svh; } .alx-showcase .alx-mobile-card-title { font-size: clamp(34px, 4vw, 46px); } } /* Sub-nivel telefon: ce a rămas specific telefonului după trecerea la * fluxul vertical e doar sheet-ul. */ @media (max-width: 767px) { /* Butoanele unul sub altul, pe toată lățimea — 40px gap pe orizontală * nu încape, iar butonul întins e țintă de atingere mai bună. */ .alx-offcanvas-actions { flex-direction: column; align-items: stretch; gap: 14px; } } @media (prefers-reduced-motion: reduce) { .alx-bottle-group, .alx-item-caption, .alx-panel-logo, .alx-stage, .alx-offcanvas, .alx-overlay, .alx-sidebar-list, .alx-sidebar-inner, .alx-sidebar-item, .alx-tabs, .alx-tab, .alx-hero-mouse::after { transition: none !important; animation: none !important; } } /* Reduced motion — fluxul vertical: fără ridicări și fără fade-uri; * conținutul e pur și simplu vizibil, indiferent de is-inview/is-loaded. * Emblema e readusă apoi la opacitatea ei de fundal (regulă mai specifică, * scrisă după). */ @media (prefers-reduced-motion: reduce) { .alx-mobile-card img, .alx-mobile-card-title, .alx-mobile-card-category, .alx-mobile-card-range, .alx-mobile-card-detail, .alx-mobile-collection img, .alx-mobile-collection-label, .alx-offcanvas-bottle { transition: none !important; opacity: 1 !important; transform: none !important; } } /* ========================================================================== * ALX Timeline / Istoric — modul independent, lipit la coada lui * alx-showcase.css. Rădăcina `.alx-timeline` NU se imbrică în `.alx-showcase` * (acela are overflow ascuns și ar tăia polaroidele înclinate), deci își * declară singură tokenurile. * * Contract cu PHP: `--tl-count` scris inline pe rădăcină (numărul de repere). * Contract cu JS: `--tl-window` (indexul primului slot vizibil din bandă), * `--tl-progress` (procent finit, ex. `20%`), * clasele `is-anim-ready` / `alx-nogsap` pe rădăcină. * Regulă fermă: orice stare ascunsă (opacity 0 / transform de intrare) * stă EXCLUSIV sub `.alx-timeline.is-anim-ready`. Fără JS * sau fără GSAP, secțiunea se vede completă și statică. * ========================================================================== */ /* Containerul Elementor poate avea `align-items: flex-start` (cazul paginii * Povestea noastră): atunci elementul-widget nu se întinde și secțiunea apare * lipită la stânga. Îl forțăm pe toată lățimea, ca widgetul să nu depindă de * setările containerului în care e pus. */ .elementor-widget-alx_timeline { width: 100%; align-self: stretch; } .alx-timeline { --alx-bg: #F4F4EC; --alx-bg-dark: #14120F; --alx-panel-bg: #1E1C1D; --alx-card-bg: #3A3532; --alx-ink: #1C1C1C; --alx-ink-soft: #3C3C3C; --alx-ink-muted: #6E6357; --alx-ink-faint: #B5AFA2; --alx-gold: #6E6857; --alx-gold-bright: #C3B283; --alx-gold-title: #A89B6C; --alx-ivory: #D4CFCC; --alx-grey: #8A857C; --alx-font-display: 'Instrument Serif', Georgia, serif; --alx-font-body: 'AauxNext', -apple-system, sans-serif; /* Valori de avarie: inline-ul din PHP și `setProperty` din JS le bat * (stilul inline are prioritate peste regulile din foaie), deci ele * contează doar dacă PHP/JS nu apucă să scrie nimic. */ /* Unitatea de măsură a scenei: numeralul. Pozele și offseturile lor se * derivă din ea, ca raportul din prototip să rămână identic la orice * rezoluție. * Termenul din `vw` NU e decorativ: pozele sunt ancorate de an (vezi mai * jos), deci lățimea lor nu mai e limitată de marginile secțiunii — pe o * fereastră înaltă și îngustă un numeral dimensionat doar din `vh` ar * împinge polaroidul stâng în afara secțiunii, unde `overflow: clip` l-ar * tăia. Limita e calculată pentru cel mai lat an posibil (în Instrument * Serif, „2000" = 1.744 × font-size). La 1440x900 dă 348px față de 360px * din `40vh` — 3%. Verificat pe toți anii, nu doar pe primul. */ --tl-num: clamp(120px, min(40vh, 28.2vw - 58px), 400px); --tl-count: 1; --tl-window: 0; --tl-progress: 0%; position: relative; /* `clip`, nu `hidden`: `hidden` ar crea un container de scroll, iar un * focus pe un element parțial ieșit l-ar derula, desincronizând banda. */ overflow: clip; /* Fără `background`: fundalul îl pune userul pe containerul Elementor. * Tokenul `--alx-bg` rămâne declarat pentru că umbrele și aurul de aici * sunt calibrate pe crem — dar nu-l mai pictăm noi. */ color: var(--alx-ink); font-family: var(--alx-font-body); padding: clamp(24px, 4vh, 56px) clamp(16px, 5.65vw, 90px); } .alx-timeline * { box-sizing: border-box; } /* Titlul secțiunii nu aparține widgetului — se pune deasupra cu un widget * de Heading separat, deci aici nu există reguli pentru el. */ /* Placeholder afișat doar în editorul Elementor, când repeaterul e gol. */ .alx-timeline .alx-tl-empty { margin: 0; text-align: center; font-size: 15px; color: var(--alx-ink-muted); } /* -------------------------------------------------------------- scena --- */ /* Săgeată | slide-uri | săgeată. Coloanele laterale se strâng pe conținut. */ .alx-timeline .alx-tl-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(8px, 1.6vw, 28px); } /* Toate slide-urile suprapuse în aceeași celulă — nu carusel cu translate: * tranziția e per-element (o face GSAP), nu o glisare de bloc. * `min-height` ține banda de jos pe loc: slide-urile inactive au `hidden` * (deci display:none), așa că celula ar lua înălțimea slide-ului curent și * bara de progres ar sălta la fiecare avans. */ .alx-timeline .alx-tl-slides { display: grid; /* `center`, nu `start`: un reper fără poze și fără descriere e scund, iar * cu `start` rămânea un gol mare între titlu și bandă. */ align-items: center; min-width: 0; /* Scena umple fold-ul; scăderea acoperă antetul site-ului, padding-ul * secțiunii și titlul pus deasupra cu widget separat. Banda rămâne SUB linia * de fold și se ajunge la ea prin scroll — ca în prototip. */ min-height: calc(100svh - var(--alx-header-h, 90px) - clamp(110px, 15vh, 175px)); } /* Coloana din mijloc e `max-content`, adică EXACT lățimea numeralului. De aici * își iau polaroidele reperul: suprapunerea peste cifre e o margine negativă * față de acea coloană, deci rămâne identică la orice an. * (Ancorarea anterioară — `left`/`right` față de marginile slide-ului — nu * putea fi corectă pentru toți anii: în Instrument Serif „2000" e cu 25% mai * lat decât „1789", așa că o poziție fixă lasă aer la unul și acoperă cifrele * la celălalt.) * `minmax(0, 1fr)` pe coloanele laterale: cu `1fr` simplu, `min-width: auto` * le-ar dilata până la lățimea polaroidului și ar descentra anul. */ .alx-timeline .alx-tl-slide { grid-area: 1 / 1; position: relative; text-align: center; display: grid; grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr); grid-template-areas: 'pl year pr' 'title title title' 'desc desc desc'; align-items: start; } /* Specificitate (0,2,0): bate orice `display` pe care îl punem mai jos pe * `.alx-tl-slide` (inclusiv `display: grid` din blocul responsive), ca * atributul `hidden` scris de JS să rămână eficient. */ .alx-timeline .alx-tl-slide[hidden] { display: none; } .alx-timeline .alx-tl-slide:focus { outline: none; } .alx-timeline .alx-tl-slide:focus-visible { outline: 2px solid var(--alx-gold); outline-offset: 4px; } /* Numeralul uriaș — decorativ (`aria-hidden` în markup), deci are voie să * folosească `--alx-gold-title`. Instrument Serif are DOAR weight 400: * orice 600/700 ar da faux-bold. */ .alx-timeline .alx-tl-year { grid-area: year; position: relative; z-index: 0; /* Marginea de sus e spațiul de gardă în care urcă polaroidul din dreapta * (el pornește de la marginea rândului, deci cu 0.30 deasupra cifrelor). */ margin: calc(var(--tl-num) * 0.16) 0 0; font-family: var(--alx-font-display); font-weight: 400; font-style: normal; font-size: var(--tl-num); line-height: 0.78; letter-spacing: -0.01em; color: var(--alx-gold-title); } /* Polaroidele: ramă albă groasă, umbră calibrată pe CREM (nu se refolosește * `drop-shadow(0 22px 22px rgba(0,0,0,.22))` din showcase — acela e calculat * pe fundal închis și pe crem iese murdar). * Offseturile sunt multipli de `--tl-num`, NU procente: procentele s-ar * raporta la înălțimea slide-ului, care variază cu lungimea descrierii, deci * pozele ar sta la altă înălțime la fiecare reper. */ .alx-timeline .alx-tl-photo { position: relative; z-index: 1; width: calc(var(--tl-num) * 0.80); border: 10px solid #FFFFFF; background: #FFFFFF; box-shadow: 0 8px 28px rgba(20, 17, 13, 0.16); } .alx-timeline .alx-tl-photo img { display: block; width: 100%; height: auto; /* raport fix + `cover`: pozele clientului au proporții diferite, iar cele * două polaroide trebuie să arate ca o pereche. Landscape (~1.14), ca în * prototip — nu portrait: pe portrait polaroidele depășesc numeralul în * înălțime și intră peste subtitlu. */ aspect-ratio: 8 / 7; object-fit: cover; } /* `-0.10` = cât intră polaroidul peste cifre. Singurul număr de reglat dacă * suprapunerea pare prea mare sau prea mică; 0 = doar se ating. */ .alx-timeline .alx-tl-photo--left { grid-area: pl; justify-self: end; margin: calc(var(--tl-num) * 0.33) calc(var(--tl-num) * -0.10) 0 0 !important; transform: rotate(-4deg); } /* Cea din dreapta stă mai sus decât cea din stânga (ca în prototip). */ .alx-timeline .alx-tl-photo--right { grid-area: pr; justify-self: start; margin: 0 0 0 calc(var(--tl-num) * -0.10) !important; transform: rotate(3.5deg); } /* Subtitlul serif auriu — `--alx-gold`, contrast 4.98:1. Weight 400 (vezi * nota despre Instrument Serif de mai sus). */ .alx-timeline .alx-tl-title { grid-area: title; justify-self: stretch; position: relative; z-index: 2; /* Doar respirație: rândul de sus conține deja polaroidele, deci înălțimea * lui le include — nu mai e nevoie de marja mare care le ocolea pe vremea * când erau poziționate absolut. */ margin: calc(var(--tl-num) * 0.08) auto 10px; max-width: 44ch; font-family: var(--alx-font-display); font-weight: 400; font-style: normal; font-size: clamp(20px, 2.1vw, 32px); line-height: 1.2; color: var(--alx-gold); } .alx-timeline .alx-tl-desc { grid-area: desc; justify-self: stretch; position: relative; z-index: 2; margin: 0 auto; max-width: 64ch; font-family: var(--alx-font-body); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.45; color: var(--alx-ink); } /* ------------------------------------------------------------- săgeți --- */ /* §1.6 — `button:hover, button:focus { color: inherit }` din tema copil are * specificitate (0,1,1) și ar bate o clasă simplă (0,1,0). Deci fiecare stare * e declarată EXPLICIT, plus fundal transparent în repaus (reset-ul temei nu * atinge repausul) și `border` explicit. */ .alx-timeline .alx-tl-arrow, .alx-timeline .alx-tl-arrow:hover, .alx-timeline .alx-tl-arrow:focus, .alx-timeline .alx-tl-arrow:focus-visible, .alx-timeline .alx-tl-arrow:active { display: flex; align-items: center; justify-content: center; /* deasupra polaroidelor (z-index 1): la anii lați ele ajung lângă săgeată, * iar un chevron acoperit parțial ar arăta a bug */ z-index: 3; padding: 8px; background: transparent; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--alx-gold); cursor: pointer; -webkit-appearance: none; appearance: none; } /* Săgețile stau în dreptul subtitlului și al descrierii, nu la mijlocul * numeralului (așa e în prototip). * Scena e centrată pe verticală (`align-items: center` pe `.alx-tl-stage`), * iar la centrare marginile intră în calculul spațiului liber: o margine de * sus M coboară elementul cu M/2. De aceea coeficientul e dublul distanței * dorite. Valoarea e derivată din `--tl-num`, ca alinierea să se păstreze la * orice rezoluție — verificată pe toate reperele, cu titluri și descrieri de * lungimi diferite. */ .alx-timeline .alx-tl-arrow { margin-top: calc(var(--tl-num) * 1.115); transition: opacity 0.25s ease; } /* SVG-ul e desenat inline de PHP: contur PLIN (`fill="currentColor"`), nu * linie — deci nicio proprietate de `stroke` aici, ar fi moartă. * viewBox 80x80, dar desenul ocupă doar 16.67..63.33 pe ambele axe, adică * 58% din casetă: de aceea lățimea e mai mare decât pare, ca săgeata vizibilă * să rămână cât era. */ .alx-timeline .alx-tl-arrow svg { display: block; width: clamp(36px, 4vw, 64px); height: auto; } /* Un singur desen în PHP (cel spre dreapta); cel de la „înapoi" e aceeași * cale oglindită. Săgeata e simetrică față de axa ei, deci `scaleX(-1)` dă * exact același contur, fără un al doilea `path` de întreținut. */ .alx-timeline .alx-tl-arrow--prev svg { transform: scaleX(-1); } .alx-timeline .alx-tl-arrow:hover, .alx-timeline .alx-tl-arrow:focus-visible { color: var(--alx-gold); opacity: 0.72; } .alx-timeline .alx-tl-arrow:focus-visible { outline: 2px solid var(--alx-gold); outline-offset: 4px; } .alx-timeline .alx-tl-arrow[disabled], .alx-timeline .alx-tl-arrow[disabled]:hover { opacity: 0.3; pointer-events: none; } /* ---------------------------------------------------- navigare de jos --- */ .alx-timeline .alx-tl-nav { margin-top: clamp(24px, 4vh, 56px); } /* Linia orizontală subțire care separă scena de bandă e chiar pista barei * de progres. Bara primește lățime FINITĂ din JS (`--tl-progress: 20%`) — * fără `calc()` cu împărțire la `var()`. */ .alx-timeline .alx-tl-progress { position: relative; height: 2px; background: rgba(110, 104, 87, 0.18); margin-bottom: clamp(10px, 1.6vh, 22px); } .alx-timeline .alx-tl-progress-bar { display: block; height: 100%; width: var(--tl-progress, 0%); background: var(--alx-gold); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* --------------------------------------- banda de ani (fereastră 4,5) --- */ /* Fereastră culisantă de 4,5 sloturi: 4 întregi + jumătatea a cincea tăiată * la dreapta, ca afordanță de „mai urmează”. Toate reperele rămân în DOM * (le trebuie pentru `tablist` + `aria-controls`), doar fereastra e vizibilă. * `--tl-visible` e SINGURUL număr de reglat per breakpoint. */ .alx-timeline .alx-tl-strip { position: relative; --tl-visible: 4.5; /* `clip`, nu `hidden`: `hidden` ar face din bandă un container de scroll, * iar un focus pe un tick de la margine l-ar derula — track-ul s-ar * desincroniza de `--tl-window` fără cale de revenire. */ overflow: clip; /* Estomparea spre dreapta e o rampă de opacitate, nu o consecință a * tăierii — jumătatea de slot rămâne lizibilă, dar clar secundară. */ -webkit-mask-image: linear-gradient(90deg, #000 0, #000 72%, rgba(0, 0, 0, 0.15) 100%); mask-image: linear-gradient(90deg, #000 0, #000 72%, rgba(0, 0, 0, 0.15) 100%); } /* Track-ul e mai lat decât fereastra: `count / visible` viewporturi. Deci un * slot = `100% / --tl-count` din track = `100% / --tl-visible` din fereastră, * iar deplasarea cu un slot = `-100% / --tl-count` din track. * (Corectură față de PRIMUL snippet din §4.1a al planului, care folosea * `--tl-visible` la `flex-basis`: acela e valabil doar în varianta fără * `width` explicit pe track. Al doilea snippet — cel aplicat aici — e corect.) */ .alx-timeline .alx-tl-strip-track { display: flex; width: calc(var(--tl-count, 1) * 100% / var(--tl-visible, 4.5)); transform: translateX(calc(var(--tl-window, 0) * -100% / var(--tl-count, 1))); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } /* Sloturi de lățime EGALĂ, indiferent câte repere sunt: banda nu se * înghesuie la 15 repere și nu se întinde artificial la 3. */ .alx-timeline .alx-tl-tick { flex: 0 0 calc(100% / var(--tl-count, 1)); max-width: calc(100% / var(--tl-count, 1)); min-width: 0; text-align: left; padding: 0 clamp(10px, 1.8vw, 30px) 0 0; color: var(--alx-ink-faint); opacity: 0.55; transition: color 0.3s ease, opacity 0.3s ease; } /* Același tratament ca la săgeți — reset-ul temei părinte pe :hover/:focus. */ .alx-timeline .alx-tl-tick, .alx-timeline .alx-tl-tick:hover, .alx-timeline .alx-tl-tick:focus, .alx-timeline .alx-tl-tick:focus-visible, .alx-timeline .alx-tl-tick:active { background: transparent; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none; } .alx-timeline .alx-tl-tick:hover, .alx-timeline .alx-tl-tick:focus, .alx-timeline .alx-tl-tick:focus-visible { color: var(--alx-gold); opacity: 0.85; } .alx-timeline .alx-tl-tick.is-active, .alx-timeline .alx-tl-tick.is-active:hover, .alx-timeline .alx-tl-tick.is-active:focus, .alx-timeline .alx-tl-tick.is-active:focus-visible { color: var(--alx-gold); opacity: 1; } .alx-timeline .alx-tl-tick:focus-visible { outline: 2px solid var(--alx-gold); outline-offset: 4px; } .alx-timeline .alx-tl-tick-year { display: block; font-family: var(--alx-font-display); font-weight: 400; font-style: normal; font-size: clamp(18px, 2.1vw, 32px); line-height: 1.05; color: inherit; } .alx-timeline .alx-tl-tick-label { /* `-webkit-box` + `line-clamp`: descrierile lungi nu au voie să * dezechilibreze înălțimea benzii. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 5px; /* Resetul temei pune `white-space: nowrap` pe