/* ========================================================= CAMERE.MD — Hero O fotografie si un mesaj. Peretele crem din stanga imaginii e spatiul in care sta textul; camera sta in dreapta lui. Nimic nu se deseneaza peste fotografie, fiindca fotografia spune deja ce avea de spus straturile de dinainte (contur de vizor, pastile, filigran). ========================================================= */ .hero{ position:relative; isolation:isolate; min-height:100svh; display:flex; flex-direction:column; background:var(--surface); color:var(--text-muted); overflow:hidden; } /* ---------- fundalul: doua fotografii, una pe tema ---------- Fotografia E fundalul hero-ului, nu o ilustratie pusa intr-un card: peretele din stanga ei continua fundalul paginii, iar camera sta in jumatatea dreapta, langa coloana de text. De aceea nu are nici rama, nici colturi rotunjite, nici umbra — orice chenar ar arata unde se termina poza. Doua fisiere, nu unul filtrat. Poza de zi e facuta pe perete alb, cea de noapte pe perete inchis, cu lumina calda din usa si cu reflexiile pe carcasa. `invert()` sau `brightness()` peste prima n-ar da a doua: ar da un negativ cu camera cenusie. Amandoua stau una peste alta si se schimba prin opacitate. Cantaresc impreuna ~113 KB in WebP, adica sub a zecea parte din PNG-ul unei singure poze — motiv pentru care nu merita nici JavaScript care sa le schimbe sursa, nici `display:none` care ar face trecerea sa clipeasca. Pe telefon fotografia NU e fundal, ci o banda proprie sub butoane. Un `cover` intins peste un ecran inalt si ingust ar lasa in cadru doar consola si peretele: camera, care e subiectul, ar cadea in afara. ---------------------------------------------------------- */ .hero-field{ position:relative; /* Sub textul din jurul ei, nu peste. Fotografia sta in coloana de text (ca sa iasa pe telefon la locul ei), deci e frate cu titlul si cu butoanele: fara treapta negativa, stingerea ei opaca din stanga ar acoperi exact randurile pe care trebuie sa le tina curate. Nu scapa mai jos de atat, fiindca `.hero-inner` e context propriu de stivuire. */ z-index:-1; /* Raportul sta pe container, nu pe : asa e acelasi pentru amandoua pozele si, mai ales, inaltimea benzii e stiuta inainte sa vina fisierul — banda nu impinge nimic cand se incarca. Aici e raportul nativ al fotografiilor; doar pe telefon se decupeaza (responsive.css). */ aspect-ratio:1672/941; margin:var(--sp-24) calc(var(--sp-gutter) * -1) 0; pointer-events:none; } .hero-shot{ position:absolute; inset:0; display:block; } .hero-shot img{ width:100%; height:100%; object-fit:cover; object-position:100% 50%; } /* Tema alege care dintre ele se vede. Regula porneste de la `data-theme`, pe care scriptul din il scrie inainte de primul paint — deci la reincarcare in tema inchisa nu apare nicio clipa poza de zi. */ .hero-shot--noapte{opacity:0} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hero-shot--zi{opacity:0} :root:not([data-theme="light"]) .hero-shot--noapte{opacity:1} } :root[data-theme="dark"] .hero-shot--zi{opacity:0} :root[data-theme="dark"] .hero-shot--noapte{opacity:1} /* Trecerea se vede doar cand omul apasa butonul de tema: `theme-transition` e pus de `theme.js` pentru 220ms, exact in jurul comutarii. Fara conditia asta, prima afisare ar face si ea fade — adica exact blitzul pe care scriptul din il previne. */ html.theme-transition .hero-shot{transition:opacity 200ms var(--e-out)} /* Marginile fotografiei se sting in fundalul paginii. Nu e un gradient de privit: culoarea e exact `--surface`, deci nu se vede efectul, ci doar lipsa cusaturii. Pe desktop aceeasi stingere tine si stanga curata pentru text — vezi responsive.css. */ .hero-field::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg,var(--surface) 0%,var(--hero-fade) 7%,transparent 19%), linear-gradient(0deg,var(--surface) 0%,var(--hero-fade) 6%,transparent 17%); } /* ---------- layout ---------- O singura coloana de continut la orice latime: a doua coloana era scena produsului, iar acum fotografia e fundal, nu coloana. Cat de lata are voie sa fie coloana langa camera se decide la 1024px, in responsive.css. */ .hero-shell{ display:flex; flex-direction:column; flex:1; } .hero-inner{ z-index:2; flex:1; display:grid; grid-template-columns:1fr; align-items:center; gap:clamp(24px,4vw,64px); /* Spatiul dintre navbar si continut e definit aici, ca proprietate a hero-ului, nu ca margine pusa pe primul element. Inainte, titlul cadea la 11px sub pastila de navigatie pentru ca distanta venea din margin-top-ul eyebrow-ului, care intre timp a disparut. Acum porneste de la `--nav-h`, nu de la o cifra scrisa de mana: bara e `position:fixed`, deci nu impinge nimic, iar o valoare fixa aici ramane in urma la orice schimbare a barei. Exact asa a ajuns bara sa acopere titlul cand logoul a intrat in pastila. */ padding-block:calc(var(--nav-h) + clamp(24px,4vw,56px)) clamp(16px,3vw,44px); } /* ---------- coloana de text ---------- Textul urca pe masura ce pagina pleaca din hero. Efectul e scris pe COPIII coloanei, nu pe coloana: un `translate` pe ea ar face-o containing block, iar fotografia — care sta in ea, ca sa iasa pe telefon la locul ei intre butoane si cifre — s-ar aseza fata de coloana de text in loc de sectiune, si ar ajunge lata cat ea. `--hp` vine de pe `.hero`, scris de `hero.js`, si e declarat cu @property, deci se poate inmulti in calc(). */ .hero-lead > :not(.hero-field){translate:0 calc(var(--hp) * -40px)} .hero-title{ margin:0; font-size:var(--fs-hero); font-weight:700; line-height:.92; letter-spacing:-.022em; text-transform:uppercase; color:var(--text); } .hero-title .thin{ font-weight:300; color:var(--text-faint); } .hero-title .mark{color:var(--accent-text)} /* Vin direct sub titlu, de cand paragraful de sub el a plecat: distanta e cea dintre doua blocuri, nu cea dintre doua randuri de text. */ /* Grila, nu un rand care se rupe. Cu `flex-wrap` cele trei butoane masurau 200+332 pe randul de sus si 252 pe cel de jos, intr-o coloana de 610: marginea din dreapta cadea in trei locuri diferite si blocul arata rupt, nu asezat. Doua coloane fixeaza randul de sus pe toata latimea — Market isi tine latimea din continut, configuratorul ia restul — iar consultatia primeste tot randul ei, deci toate cele trei margini din dreapta cad pe aceeasi linie. */ .hero-cta{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-8); margin-top:var(--sp-36); } /* Eticheta are voie sa se rupa pe doua randuri in loc sa sparga coloana: la orice latime, decizia nu mai atarna de doi pixeli. */ .hero-cta .btn{min-width:0;white-space:normal;text-align:center} .hero-cta .btn:last-child{grid-column:1 / -1} /* small factual trust strip — real numbers only */ .hero-facts{ display:flex; flex-wrap:wrap; gap:var(--sp-8) var(--sp-32); margin-top:var(--sp-32); padding-top:var(--sp-24); border-top:1px solid var(--border-soft); } .hero-fact{display:flex;align-items:baseline;gap:var(--sp-8)} .hero-fact b{ font-family:var(--f-head); font-size:var(--fs-h4); font-weight:700; color:var(--text); letter-spacing:-.01em; } .hero-fact span{ font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); } /* ---------- hero bottom rail: status + coords + scroll ---------- */ .hero-rail{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-20); padding-block:var(--sp-16) var(--sp-24); border-top:1px solid var(--border-soft); font-size:var(--fs-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); } .status{ display:inline-flex; align-items:center; gap:var(--sp-8); color:var(--text-muted); opacity:0; transition:opacity var(--t-comp) var(--e-out) 1800ms; } .is-booted .status{opacity:1} .status b{color:var(--text);font-weight:500} .hero-social{ display:flex; gap:var(--sp-8); opacity:0; transition:opacity var(--t-comp) var(--e-out) 1850ms; } .is-booted .hero-social{opacity:1} .hero-social a{ display:grid;place-items:center; width:38px;aspect-ratio:1; border-radius:50%; border:1px solid var(--border); color:var(--text-muted); font-size:var(--fs-body); transition:color var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out); } .hero-social a:hover{color:var(--accent-text);border-color:var(--accent-line);transform:translateY(-2px)} .scroll-cue{ display:inline-flex; align-items:center; gap:var(--sp-8); color:var(--text-faint); opacity:0; transition:opacity var(--t-comp) var(--e-out) 2000ms,color var(--t-ui) var(--e-out); } .is-booted .scroll-cue{opacity:calc(1 - var(--hp) * 2)} .scroll-cue:hover{color:var(--accent-text)} .scroll-cue .rail{ position:relative; width:1px;height:26px; background:var(--border); overflow:hidden; } .scroll-cue .rail::after{ content:""; position:absolute; inset:0 0 auto 0; height:10px; background:var(--accent); animation:cue-run 2.2s var(--e-inout) infinite; } @keyframes cue-run{ 0%{transform:translateY(-100%)} 100%{transform:translateY(260%)} } /* --------------------------------------------------------- MARQUEE — the bridge out of the control room. Light band, real vendor logos, seamless loop. Placing it here is the dark -> light transition: the page leaves the interface and enters the real world. --------------------------------------------------------- */ /* ---------- banda de branduri ---------- Ruleaza continuu, dar rezolva cele trei defecte pentru care versiunea anterioara fusese oprita (motivele erau notate aici; le pastrez, fiindca explica de ce arata asa): 1. „acelasi logo de doua ori pe ecran" — un set masura 1074px intr-o fereastra de 1707px. Reparat prin `min-width` pe fiecare marca: un set trece de 2000px, deci a doua copie incepe dincolo de marginea ecranului. 2. „randul de necitit cat se deruleaza" — reparat prin viteza: un set in 45s inseamna sub 50px/s, plus oprire la hover si la focus. 3. „pauza la hover producea saltul" — pauza schimba `animation-duration`, ceea ce recalcula pozitia. Acum e `animation-play-state`, care ingheata pe loc si porneste de unde a ramas. Cine cere mai putina miscare primeste grila statica de dinainte, cu o singura lista: a doua e ascunsa, nu doar oprita. --------------------------------------------------------- */ .brands-marquee{ display:flex; width:100%; overflow:hidden; /* Marginile se sting, ca banda sa nu para taiata cu foarfeca. */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .brands-marquee .brands-row{ display:flex; flex:0 0 auto; align-items:center; gap:clamp(40px,5vw,72px); padding-inline:clamp(20px,2.5vw,36px); margin:0; list-style:none; animation:brands-run 45s linear infinite; } /* Latimea minima per marca e ce tine un set mai lat decat ecranul. */ .brands-marquee .brands-row li{ display:flex;align-items:center;justify-content:center; flex:0 0 auto; min-width:clamp(120px,11vw,190px); } .brands-marquee:hover .brands-row, .brands-marquee:focus-within .brands-row{animation-play-state:paused} @keyframes brands-run{ from{transform:translateX(0)} /* Exact latimea unui set, cu tot cu padding: asa a doua copie ajunge fix unde era prima si bucla nu are cusatura. */ to{transform:translateX(-100%)} } @media (prefers-reduced-motion:reduce){ .brands-marquee{display:block;-webkit-mask-image:none;mask-image:none} .brands-marquee .brands-row{animation:none} /* Inapoi la grila care era acolo: doua randuri egale de patru. */ .brands-marquee .brands-row:first-child{ display:grid; grid-template-columns:repeat(2,1fr); justify-items:center; gap:clamp(24px,3vw,40px); padding-inline:0; } .brands-marquee .brands-row:first-child li{min-width:0} .brands-marquee .brands-row[aria-hidden]{display:none} } @media (prefers-reduced-motion:reduce) and (min-width:720px){ .brands-marquee .brands-row:first-child{grid-template-columns:repeat(4,1fr)} } /* ---------- zidul de branduri ---------- Static, nu carusel. Cele opt marci incap pe pagina la orice latime, deci miscarea nu transmitea nimic: facea randul de necitit cat se derula si punea acelasi logo de doua ori pe ecran in acelasi timp (un set masura 1074px intr-o fereastra de 1707px). Pauza la hover fusese adaugata tocmai pentru ca oamenii incercau sa citeasca in miscare - iar ea schimba durata animatiei, ceea ce producea saltul. */ .brands{ position:relative; z-index:2; background:var(--surface); border-bottom:1px solid var(--border); padding-block:clamp(24px,3.4vw,44px); } .brands-head{ display:flex; align-items:center; gap:var(--sp-16); margin-bottom:clamp(20px,2.4vw,32px); font-size:var(--fs-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); } .brands-head::after{content:"";flex:1;height:1px;background:var(--border)} /* Grila cu numar fix de coloane, nu flex-wrap: flex-ul impacheteaza lacom si rupea randul 7+1, ceea ce arata ca o greseala. Doua randuri egale de patru sunt o decizie, nu un rest. Opt pe un rand nu incap: marca cea mai lata masoara 199px, iar la 1232px de container ar ramane 136px de celula. */ .brands-row{ display:grid; min-width:0; max-width:100%; overflow:hidden; grid-template-columns:repeat(2,1fr); align-items:center; justify-items:center; gap:clamp(24px,3vw,40px); margin:0; padding:0; list-style:none; } /* Patru coloane abia de la 720px: la 560 celula ajungea la 109px, sub latimea marcii celei mai late, si raportul dintre cea mai mare si cea mai mica silueta sarea la 2.0. Pana acolo, doua coloane late. */ @media (min-width:720px){ .brands-row{grid-template-columns:repeat(4,1fr)} } .brands-row li{display:flex;align-items:center;justify-content:center;min-width:0} /* Fisierele vin deja normalizate: o singura culoare de cerneala, fundal transparent si inaltime optica (nu inaltime egala in px). Nu mai e nimic de corectat la rulare - mix-blend-mode si grayscale existau doar ca sa ascunda dreptunghiurile albe din trei surse fara canal alfa. */ .brands-row img{ opacity:.55; transition:opacity var(--t-ui) var(--e-out); } .brands-row li:hover img{opacity:1} /* Cerneala fisierelor e rgb(10,17,28) — exact culoarea de fundal a temei inchise. Pe intuneric logourile erau invizibile, nu discrete: aceeasi culoare cu fundalul. Fiind o singura cerneala plata pe fundal transparent, inversarea e curata: da o silueta aproape alba, fara sa strice culorile, fiindca nu exista culori de stricat. */ :root[data-theme="dark"] .brands-row img{filter:invert(1)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brands-row img{filter:invert(1)} } /* Pana la 1024px celula e mai ingusta decat marcile late (Hikvision masoara 199px), deci acelea se micsoreaza singure. Fara plafonul de mai jos ar scadea doar ele si randul s-ar dezechilibra - masurat 20px langa 38px la 768. Asa coboara tot setul, iar raportul optic se pastreaza. De la 1024 in sus celula are 215px si nimic nu mai e strans. */ @media (max-width:1023px){ .brands-row img{max-height:28px;width:auto;height:auto} }