/* ==========================================================================
components.css — bara de identificare, antet, erou, catalog, fișă tehnică,
galerie, întrebări frecvente, contact, subsol.
========================================================================== */
/* ==========================================================================
1. Bara de identificare a firmei — CUI și J, pe fiecare ecran
========================================================================== */
.idbar {
background: var(--bg-sunken);
border-block-end: 1px solid var(--line);
font-family: var(--font-mono);
font-size: var(--t--2);
color: var(--ink-faint);
}
.idbar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-2) var(--s-5);
padding-block: 0.45rem;
}
.idbar__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-4);
}
/**
* Bara citește ca o listă de perechi: eticheta în verde, valoarea în portocaliu.
*
* Cele două culori ale siglei împart rolurile — verdele numește, portocaliul
* spune. Denumirea firmei e o valoare fără etichetă scrisă, deci merge tot pe
* portocaliu: e datul, nu numele datului.
*
* Portocaliul folosit e `--orange-txt`, nu cel de marcă: bara are corp de
* literă mic pe fond stins, iar portocaliul siglei ar cădea sub pragul de
* lizibilitate acolo.
*/
.idbar__legal b {
color: var(--orange-txt);
font-weight: 700;
letter-spacing: 0.04em;
}
/* Codurile fiscale sunt evidențiate — cerință explicită a clientului. */
.idbar__code {
color: var(--orange-txt);
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
}
.idbar__code span { color: var(--acc); font-weight: 600; }
.idbar__sep { color: var(--line-strong); }
/**
* Telefonul, mărit ca să sară în ochi.
*
* `font-size` crește, dar `line-height` este fixat în `rem`, nu lăsat relativ:
* altfel rândul s-ar fi înălțat odată cu litera și ar fi împins toată bara în
* jos. Valoarea e cea a barei la corpul dinainte, deci înălțimea rândului
* rămâne exact aceeași.
*/
.idbar__tel {
color: var(--orange-txt);
font-size: var(--t-0);
font-weight: 700;
line-height: 1.05rem;
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap;
}
.idbar__tel:hover { color: var(--acc); }
/* Numărul de ordine + telefonul. Grupul ia restul rândului, iar marginea
automată împinge telefonul la capătul din dreapta — deci pe ecran lat bara
arată exact ca înainte: firmă · CUI · nr. reg. ................ telefon. */
.idbar__reg {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-4);
flex: 1 1 auto;
min-inline-size: 0;
}
.idbar__reg .idbar__tel { margin-inline-start: auto; }
/* Comutatorul de limba. Trei legaturi de doua litere, nu un meniu: la trei
optiuni, un meniu ascunde exact ce trebuie sa fie vizibil — in ce limba esti
si ce alternative ai. Limba curenta ramane in rand, marcata cu fundal, nu
scoasa din lista; altfel dispare reperul. */
.limbi {
display: flex;
gap: 2px;
margin-inline-start: var(--s-3);
flex-shrink: 0;
}
.limbi a {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 4px;
font-size: var(--t--2);
font-weight: 700;
letter-spacing: .04em;
color: var(--ink-faint);
text-decoration: none;
line-height: 1.05rem; /* aceeasi ca telefonul, ca bara sa nu creasca */
}
.limbi a:hover { color: var(--acc); background: var(--surface); }
.limbi a[aria-current="true"] {
color: var(--acc-ink);
background: var(--acc);
}
@media (max-width: 640px) {
.idbar__inner { justify-content: center; text-align: center; }
.idbar__legal,
.idbar__reg { justify-content: center; }
/* Fără marginea automată, altfel numărul de ordine și telefonul ar sta pe
același rând, dar lipite de margini opuse. */
.idbar__reg .idbar__tel { margin-inline-start: 0; }
/* Punctul despărțitor ar deschide rândul al doilea; pe lat rămâne. */
.idbar__reg .idbar__sep { display: none; }
.limbi { margin-inline-start: 0; justify-content: center; }
}
/* ==========================================================================
2. Antet
========================================================================== */
.hdr {
position: sticky;
inset-block-start: 0;
z-index: 90;
background: color-mix(in oklab, var(--bg) 82%, transparent);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border-block-end: 1px solid transparent;
transition: border-color var(--d-2), background var(--d-2);
}
.hdr.is-stuck { border-block-end-color: var(--line); }
.hdr__inner {
display: flex;
align-items: center;
gap: var(--s-5);
min-block-size: 4.25rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--s-3);
text-decoration: none;
flex: none;
margin-inline-end: auto;
}
/**
* Marca din antet arată DOAR pictograma din siglă — casa cu ciocanul.
*
* Sigla completă (1600×1600) are numele firmei și sloganul dedesubt. La
* 2,1rem, adică vreo 34 px, textul acela devine o pată cenușie: prezent,
* ilizibil, dăunător. Fereastra de mai jos mărește imaginea și o poziționează
* pe pictogramă, deci în antet rămâne semnul grafic, iar cuvintele le duce
* marca scrisă de lângă.
*
* Se folosește fundal, nu `![]()
`, fiindcă `background-size` și
* `background-position` decupează exact, fără un element de împachetare în
* plus. Adresa e relativă la ACEST fișier, deci merge la fel din rădăcină și
* din `produs/` — nu depinde de calea de bază a paginii.
*
* VALORILE NU SUNT ESTIMATE — sunt calculate din poziția reală a pictogramei,
* măsurată direct în pixeli (scanare a imaginii pe canvas, prag de alb la
* 245/255): pictograma ocupă 18,6%–58,0% pe verticală, iar textul „ABBA
* CONFORT” începe la 62,4%. O primă variantă folosea 150% / 30% „din ochi” și
* arăta prost: fereastra rezultată mergea până la 76,7%, deci prindea toată
* pictograma ȘI numele firmei ȘI o bucată din slogan — trei rânduri de text
* ilizibile într-o iconiță de 34 px.
*
* Motivul pentru care „din ochi” a dat greș: spațiul alb DE SUB pictogramă,
* până la text, e de doar 70 px — de patru ori mai mic decât spațiul alb DE
* DEASUPRA ei. O centrare simetrică pe mijlocul pictogramei împinge automat
* marginea de jos a decupajului peste text.
*
* Dacă se schimbă sigla, se remăsoară cu același procedeu (scanare pe benzi
* orizontale, prag de alb), nu se reglează din ochi.
*/
.brand__mark {
flex: none;
/* 2,9rem, nu 2,1: la 34 px pictograma decupată era un punct. Antetul are
4,25rem înălțime, deci 46 px lasă loc suficient și dă siglei greutatea pe
care o merită prima marcă a paginii. */
inline-size: 2.9rem;
block-size: 2.9rem;
border-radius: 50%;
border: 1px solid var(--line);
background-color: var(--surface-hi);
/* Duba din emblema firmei, nu casa cu ciocanul de dinainte.
Se folosește duba SINGURĂ, nu emblema întreagă: pastila are 46 px, iar la
mărimea aia sloganul ar fi o mâzgălitură. Fișierul e decupat exact pe
contur și are fondul scos, deci `contain` îl așază întreg în cerc, fără
să taie nimic — spre deosebire de varianta veche, care mărea imaginea la
216 % ca să scoată din ea un detaliu. */
background-image: url("../img/logo-emblema-duba.png");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 74%;
}
/* Sigla întreagă, în subsol: acolo are loc, deci se citește și numele firmei
și sloganul. */
/* Sigla rotundă, dar FĂRĂ să taie din ea.
Prima variantă folosea `object-fit: cover`: imaginea umplea cercul, iar
colțurile pătratului erau retezate. Cum textul „PROBLEMA TA, SOLUȚIA
NOASTRĂ” ajunge până lângă margine, tăietura mânca prima și ultima literă.
Un pătrat încape întreg într-un cerc doar dacă e înscris în el, adică are
latura D/√2 ≈ 0,707·D. Rămân (1 − 0,707)/2 ≈ 14,6% spațiu de fiecare parte —
de aici umplutura de 15%, cu `contain` în loc de `cover`. Cercul rămâne
cerc, sigla rămâne întreagă. */
/**
* Sigla din subsol: emblema firmei, cu duba și sloganul.
*
* Fondul alb a fost scos din fișier și imaginea decupată la conturul
* cernelii, deci nu mai e nimic de potrivit din CSS — nici umplutură, nici
* decupaj rotund. Aici a stat înainte o siglă pătrată tăiată în cerc, iar
* regulile de atunci mâncau prima și ultima literă din slogan.
*
* `logo-abba-rotund.png` a rămas în dosar, dar nu mai e folosit de nicăieri.
*/
.ftr__sigla {
display: block;
inline-size: clamp(10rem, 7.5rem + 7vw, 13.5rem);
block-size: auto;
margin-block-start: var(--s-5);
}
.brand__name {
display: grid;
line-height: 1.1;
}
.brand__name b {
font-size: var(--t-0);
font-weight: 800;
letter-spacing: -0.03em;
font-variation-settings: "wdth" 108;
}
.brand__name small {
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.14em;
text-transform: uppercase;
/* Negru și aldin, la cerere: era gri șters, ca o notă de subsol, deși spune
din ce grup face parte marca — o informație pe care clientul o vrea citită. */
color: var(--ink);
font-weight: 700;
}
.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav a {
padding: var(--s-2) var(--s-3);
font-size: var(--t--1);
font-weight: 500;
color: var(--ink-muted);
text-decoration: none;
border-radius: var(--r-2);
transition: color var(--d-1), background var(--d-1);
}
.nav a:hover { color: var(--ink); background: var(--surface); }
@media (max-width: 1000px) { .nav { display: none; } }
.hdr__actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }
/* ==========================================================================
3. Butoane
========================================================================== */
.btn {
--btn-bg: var(--surface-hi);
--btn-ink: var(--ink);
--btn-line: var(--line-strong);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
padding: 0.7rem 1.1rem;
background: var(--btn-bg);
color: var(--btn-ink);
border: 1px solid var(--btn-line);
border-radius: var(--r-2);
font-size: var(--t--1);
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: transform var(--d-1) var(--ease-out), background var(--d-1), border-color var(--d-1), color var(--d-1);
}
.btn:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--btn-bg) 84%, var(--ink)); }
.btn:active { transform: translateY(0); }
.btn--primary {
--btn-bg: var(--acc);
--btn-ink: var(--acc-ink);
--btn-line: transparent;
}
/* La trecerea cursorului verdele se închide — se depărtează de hârtie, nu se
apropie de ea. */
.btn--primary:hover { background: #0a4a3f; }
/* Butonul plin portocaliu, pentru chemarea principală din erou. Folosește
`--acc-2` / `--acc-2-ink`, perechea pregătită deja în tokens: portocaliul
mărcii cu cerneală brun-închisă, 6,6:1 — textul alb pe portocaliu ar fi picat
la 3:1. */
.btn--orange {
--btn-bg: var(--acc-2);
--btn-ink: var(--acc-2-ink);
--btn-line: transparent;
}
.btn--orange:hover { background: var(--orange-hi); }
.btn--ghost { --btn-bg: transparent; --btn-line: var(--line-strong); }
/* Butonul secundar poartă a doua culoare a mărcii. Perechea verde plin +
portocaliu conturat repetă exact raportul din siglă: verdele e masa,
portocaliul e semnul. */
.btn--ghost {
--btn-ink: var(--orange-txt);
--btn-line: color-mix(in oklab, var(--brand-orange) 65%, transparent);
}
.btn--ghost:hover {
background: color-mix(in oklab, var(--brand-orange) 12%, transparent);
border-color: var(--brand-orange);
}
.btn--lg { padding: 0.95rem 1.5rem; font-size: var(--t-0); }
.btn--sm { padding: 0.45rem 0.7rem; font-size: var(--t--2); }
.btn__kbd {
display: inline-flex;
gap: 3px;
margin-inline-start: var(--s-1);
}
kbd {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
line-height: 1;
padding: 0.28em 0.45em;
border-radius: 3px;
background: color-mix(in oklab, currentColor 12%, transparent);
border: 1px solid color-mix(in oklab, currentColor 22%, transparent);
white-space: nowrap;
}
.icon-btn {
display: inline-grid;
place-items: center;
inline-size: 2.35rem;
block-size: 2.35rem;
border-radius: var(--r-2);
background: transparent;
border: 1px solid var(--line);
color: var(--ink-muted);
cursor: pointer;
transition: color var(--d-1), border-color var(--d-1), background var(--d-1);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.icon-btn svg { inline-size: 1.05rem; block-size: 1.05rem; }
/* Aici au stat regulile butonului de schimbare a temei — lună pe întuneric,
soare pe lumină. Site-ul are o singură temă, deci butonul nu mai există. */
/* ==========================================================================
4. Erou
========================================================================== */
/* Eroul trebuie să încapă ÎNTREG sub antet, fără derulare. De aceea spațierea
lui se măsoară în `vh`, nu în `vw`: pe un laptop de 1366 × 768 lățimea e
generoasă, înălțimea nu — iar înălțimea decide dacă se vede tot.
`svh` (small viewport height) e cel care ține cont de bara de adrese a
telefonului atunci când e desfășurată. */
.hero {
position: relative;
padding-block: clamp(0.75rem, 2.2vh, 2rem) 0;
overflow: hidden;
isolation: isolate;
}
/**
* Eroul, împreună cu banda din josul lui, încape într-un singur ecran.
*
* Scăderea acoperă ce stă deasupra: bara de identificare (35 px) și antetul
* (69 px), adică 6,5rem la corpul de literă implicit. Măsurat înainte, banda se
* termina la 740 px pe un ecran de 720 — lipseau exact 20.
*
* `100svh`, nu `100vh`: pe telefon `vh` se raportează la fereastra cu barele
* browserului ascunse, deci la încărcare banda ar cădea sub pliu tocmai pe
* ecranul unde contează cel mai mult.
*
* Doar peste 940 px, unde eroul e pe două coloane. Sub pragul ăsta conținutul
* se așază pe verticală și oricum nu are cum să încapă; forțat, ar tăia titlul.
*/
@media (min-width: 941px) {
.hero {
display: flex;
flex-direction: column;
justify-content: center;
/* `--sus` e înălțimea reală a barei de identificare plus a antetului,
măsurată de app.js la încărcare, la redimensionare și după ce sosesc
fonturile. A fost scrisă de mână, cu cifră fixă, și a rămas în urmă de
fiecare dată când se schimba ceva deasupra: ultima oară se scădeau
7,5rem în loc de 6,5, iar cele 16 px în plus se vedeau ca o fâșie albă
sub banda verde. 6,5rem rămâne doar ca valoare de rezervă. */
min-block-size: calc(100svh - var(--sus, 6.5rem));
}
/* Banda e împinsă la bază, indiferent cât de scund e conținutul de deasupra. */
.hero .ticker { margin-block-start: auto; }
}
/* Lumina rece care cade de sus, ca într-un garaj cu ușa ridicată. */
.hero::before {
content: "";
position: absolute;
inset-block-start: -30%;
inset-inline-start: 50%;
translate: -50% 0;
inline-size: min(120%, 1100px);
aspect-ratio: 1;
background: radial-gradient(circle at 50% 35%,
color-mix(in oklab, var(--acc) 16%, transparent) 0%,
transparent 62%);
z-index: -2;
pointer-events: none;
}
/* Peliculă de granulație: elimină benzile din degrade. */
.hero::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--grain);
opacity: 0.07;
mix-blend-mode: overlay;
z-index: -1;
pointer-events: none;
}
/* Coloana din dreapta primește mai mult decât cea din stânga, iar spațiul
dintre ele s-a strâns de la 80 px la cel mult 40.
Textul are oricum lățime limitată prin `--measure`, deci lățimea în plus îi
folosea prea puțin; în schimb, cei 80 px goli tăiau pagina în două jumătăți
care nu comunicau, iar desenul ușii — argumentul de vânzare — rămânea mic. */
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: clamp(1.25rem, 0.5rem + 2.4vw, 2.5rem);
align-items: center;
}
@media (max-width: 940px) {
.hero__grid { grid-template-columns: 1fr; gap: var(--s-8); }
}
.hero__title { margin-block: var(--s-5) 0; }
.hero__title em {
font-style: normal;
color: var(--acc);
font-variation-settings: "wdth" 96;
}
/**
* Butonul principal și cele două de Facebook formează un bloc de trei, pe
* aceeași lățime: cel portocaliu ține un rând întreg, iar cele două de dedesubt
* îl împart în jumătăți egale.
*
* Amândouă rândurile sunt GRILE pe aceeași coloană, nu cutii flexibile lăsate
* să-și ia lățimea din text. Așa marginea din stânga și cea din dreapta coincid
* exact, oricât de lung ar fi textul de pe butoane — înainte, butonul portocaliu
* își lua lățimea din propriul text și nu se potrivea cu perechea de sub el.
*/
.hero__cta {
display: grid;
gap: var(--s-3);
margin-block-start: var(--s-6);
}
/* Aceeași umplutură ca butoanele de Facebook, deci aceeași înălțime. */
.hero__cta .btn--lg { padding: 0.75rem 1.15rem; }
/* Barometrul de cifre — mono, aliniat pe coloane, cu linii de separare. */
/* Patru coloane fixe, nu `auto-fit`. Cu `minmax(9rem, …)` cele patru cifre nu
încăpeau pe un rând în coloana eroului și treceau pe două — 203 px în loc de
circa 100, adică exact înălțimea care împingea eroul sub pliu. */
.stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
margin-block-start: var(--s-4);
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--r-3);
overflow: hidden;
}
.stat {
position: relative;
background: var(--bg-raised);
padding: var(--s-3) var(--s-4);
transition: background var(--d-2);
}
/* Linie de accent care crește din marginea de sus la trecerea cursorului.
Merge de la verde la portocaliu — cele două culori ale siglei, în ordinea în
care apar și în ea. */
.stat::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 2px;
background: linear-gradient(90deg, var(--brand-green), var(--brand-orange));
/* Linia se vede din start, doar mai stinsă; la trecerea cursorului se aprinde.
Ascunsă complet, cum era înainte, cele două culori ale mărcii apăreau doar
pentru cine plimba mausul — adică pentru nimeni, pe telefon. */
opacity: 0.5;
transform-origin: 0 50%;
transition: opacity var(--d-2) var(--ease-out);
}
.stat:hover { background: var(--surface); }
.stat:hover::before { opacity: 1; }
.stat__v {
font-family: var(--font-mono);
font-size: var(--t-3);
font-weight: 600;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
color: var(--ink);
line-height: 1.1;
}
/* Unitățile („lei”, „mm”) în portocaliu: patru pete de culoare chiar sub
titlu, în singurul bloc din hero care se citește ca date. */
.stat__v sup { font-size: 0.5em; color: var(--orange-txt); vertical-align: super; }
.stat__k {
display: block;
margin-block-start: var(--s-1);
font-size: var(--t--2);
color: var(--ink-faint);
letter-spacing: 0.02em;
}
/* Panoul din dreapta se micșorează singur pe ecrane joase, fiindcă lățimea lui
e legată de `svh`. Coloana din stânga nu are cum: titlul, textul și cifrele
au înălțimi date de tipografie. Pe un laptop de 1366 × 768 rămân circa 640 px
sub antet, iar coloana cerea 634 — deci ea devenea cea care împinge eroul sub
pliu.
Aici se leagă și tipografia de înălțime. Pragul de 860 px prinde exact
laptopurile obișnuite; peste el nu se schimbă nimic. */
@media (max-height: 860px) {
.hero__title { font-size: clamp(2rem, 6.4vh, 3.5rem); }
.hero__title { margin-block-start: var(--s-3); }
.hero__cta { margin-block-start: var(--s-4); }
.stats { margin-block-start: var(--s-3); }
.stat { padding: var(--s-2) var(--s-3); }
.stat__v { font-size: var(--t-2); }
}
/**
* A doua treaptă de strângere, pentru ferestre JOASE.
*
* Se aplică la zoom de browser peste circa 110 %, unde fereastra rămâne lată
* dar scade în înălțime — cazul în care banda verde cădea sub pliu. Treapta de
* 860 px nu mai ajungea: coloana cerea 533 px într-o fereastră de 614, deci
* lipseau 106.
*
* Butoanele de Facebook au fost adăugate în erou după ce spațierea fusese
* calibrată; ele sunt cei 52 px în plus pe care calibrarea veche nu-i știa.
*
* Textul se scurtează la trei rânduri, nu se ascunde: la zoom mare omul citește
* mai mult, nu mai puțin.
*/
@media (min-width: 941px) and (max-height: 780px) {
.hero { padding-block-start: var(--s-2); }
.hero__title { font-size: clamp(1.85rem, 5.6vh, 3rem); margin-block-start: var(--s-2); }
.hero__cta { margin-block-start: var(--s-3); }
.fb-grup--erou { margin-block-start: var(--s-3); }
.stats { margin-block-start: var(--s-2); }
.stat { padding: var(--s-1) var(--s-3); }
.stat__v { font-size: var(--t-1); }
}
/* Aici a stat o a treia treaptă, care scurta textul introductiv la două rânduri
sub 680 px înălțime. Textul a fost scos din erou, deci treapta n-a mai avut ce
scurta. */
/* --- Scena eroului: ușa care se ridică ---
Proporția cutiei o urmează pe cea a desenului cotat (3660 × 2950 unități de
desen ≈ 1,24). Orice altă valoare ar lăsa desenul încadrat cu benzi goale —
exact genul de gol care face o pagină să pară nefinisată. */
.hero__stage {
position: relative;
aspect-ratio: 3660 / 3080;
inline-size: 100%;
}
.hero__stage svg { inline-size: 100%; block-size: 100%; overflow: visible; }
/* --- Panoul eroului: placa de desen plus afișajul de stare --------------- */
/* Lățimea panoului urmează ÎNĂLȚIMEA disponibilă, nu invers. Planșa are raport
fix (3660/3080 ≈ 1,188), deci dacă i-am da toată lățimea coloanei, ar deveni
automat prea înaltă și ar împinge eroul sub pliu. Legând lățimea de `svh`,
desenul se micșorează singur pe ecrane joase și rămâne mare pe cele înalte.
Rezerva a crescut de la 19rem la 21rem odată cu mutarea benzii „De ce noi?”
în erou: banda ocupă circa 55 px, iar fără rezerva în plus panoul rămânea cu
3 px prea înalt și împingea banda exact sub marginea ecranului. */
/* Panoul e mai îngust decât coloana lui (limita de `max-inline-size` intră în
joc pe ecranele late și joase), deci trebuie ancorat la o margine, nu lăsat
să plutească.
`margin-inline-start: auto` — nu `margin-inline: auto` — îl lipește de
marginea DREAPTĂ a paginii, cu zero spațiu în plus, exact cum textul din
stânga pornește cu zero spațiu în plus de la marginea stângă. Cu ambele
margini pe auto, panoul se centra în coloana lui: rămâneau ~82 px liberi și
în stânga, și în dreapta, iar ușa nu ajungea niciodată la marginea paginii —
arăta trasă spre centru, în loc să încadreze coloana ca o oglindă a
textului. */
.hero__panel {
margin: 0;
display: grid;
gap: 0;
border: 1px solid var(--line-strong);
border-radius: var(--r-4);
background: var(--surface);
box-shadow: var(--shadow-2);
overflow: hidden;
max-inline-size: min(40rem, calc((100svh - 21rem) * 1.188));
margin-inline-start: auto;
inline-size: 100%;
}
/**
* Rezerva de 21rem NU se mărește pe ferestre joase, deși pare tentant.
*
* Măsurat: la 24rem planșa se îngustează de la 330 la 273 px, dar afișajul de
* cote de sub ea se rupe pe mai multe rânduri și crește de la 184 la 235 px —
* deci panoul ajunge mai ÎNALT, 467 în loc de 463. Sub o anumită lățime,
* îngustarea panoului îl înalță. Câștigul trebuie luat din afișaj, nu din
* planșă; regulile sunt mai jos, la `.readout`.
*
* 22rem e cât se poate: după ce afișajul a fost strâns, mai lipseau 11 px, iar
* la 22rem planșa scade cu 15 fără ca afișajul să se rupă pe rânduri noi.
*
* Regula stă AICI, după cea de bază, nu lângă celelalte reguli pentru ferestre
* joase: un media query nu adaugă specificitate, deci acolo pierdea în fața
* regulii de bază, care venea mai jos în fișier.
*/
@media (min-width: 941px) and (max-height: 780px) {
.hero__panel { max-inline-size: min(40rem, calc((100svh - 22rem) * 1.188)); }
}
.hero__stage { border-block-end: 1px solid var(--line); border-radius: 0; }
.hero__stage > div { block-size: 100%; }
/* Afișaj de aparat: stare, bandă de progres, cote. Toate din același ciclu. */
.readout {
display: grid;
gap: var(--s-3);
padding: var(--s-4) var(--s-5) var(--s-5);
font-family: var(--font-mono);
font-size: var(--t--2);
background: var(--bg-sunken);
}
/* Pe ferestre joase afișajul e partea care ține panoul înalt: spre deosebire de
planșă, înălțimea lui vine din tipografie, nu din raportul desenului. Se
strâng spațierile, nu conținutul — cotele și prețul rămân toate la vedere. */
@media (min-width: 941px) and (max-height: 780px) {
.readout { gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); }
.readout__head b { font-size: var(--t--1); }
}
.readout__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-4);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
}
.readout__head b {
font-size: var(--t-0);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: var(--s-2);
}
/* Bulina de stare împrumută limbajul unui tablou de comandă. */
.readout__head b::before {
content: "";
inline-size: 7px; block-size: 7px;
border-radius: 50%;
background: var(--ink-faint);
transition: background var(--d-2), box-shadow var(--d-2);
}
.readout__head b[data-stare="sus"]::before {
background: var(--acc);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--acc) 22%, transparent);
}
.readout__head b[data-stare="urca"]::before,
.readout__head b[data-stare="coboara"]::before {
background: var(--green-dim);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--green-dim) 20%, transparent);
}
.readout__bar {
display: block;
block-size: 2px;
background: var(--line);
overflow: hidden;
}
.readout__bar i {
display: block;
block-size: 100%;
background: var(--acc);
transform-origin: 0 50%;
transform: scaleX(0);
}
/* Trei coloane pe lat, două pe telefon: la 85 px, „3000 × 2500 mm” se rupea
pe două rânduri în fiecare celulă. */
.readout__specs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
gap: var(--s-3) var(--s-4);
margin: 0;
}
.readout__specs div { display: grid; gap: 2px; min-inline-size: 0; }
.readout__specs dt {
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
}
.readout__specs dd {
margin: 0;
color: var(--ink);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
5. Banda de rulare — dovezi scurte
========================================================================== */
/* Banda stă în josul eroului, pe toată lățimea: e ultimul lucru din primul
ecran, deci marchează hotarul dintre promisiune și catalog.
Nicio marjă negativă — banda e copil direct al secțiunii, nu al lui `wrap`,
deci e deja lată cât pagina. Cu marjă negativă ieșea 19 px în afara
secțiunii, unde o tăia `overflow: hidden`. */
.ticker {
display: flex;
align-items: stretch;
margin-block-start: clamp(1rem, 2.5vh, 2rem);
border-block-start: 1px solid var(--line);
background: var(--brand-green);
color: #fff;
}
/* Eticheta NU se mișcă. Stă pe loc, deasupra șinei, cu fundal propriu ca
mențiunile să dispară sub ea, nu peste ea. */
.ticker__eticheta {
flex: none;
display: flex;
align-items: center;
gap: var(--s-3);
padding-inline: var(--gutter) var(--s-5);
padding-block: var(--s-4);
font-family: var(--font-mono);
font-size: var(--t--1);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: var(--brand-green);
white-space: nowrap;
z-index: 1;
}
/* Aici a stat o liniuță portocalie după „De ce noi?”. A fost scoasă la cerere:
între întrebare și primul răspuns de pe șină arăta ca o legătură între ele,
deși eticheta e un cap de rubrică, nu începutul frazei. Rămâne doar textul. */
.ticker__fereastra {
flex: 1;
min-inline-size: 0;
overflow: hidden;
display: flex;
align-items: center;
-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.ticker__track {
display: flex;
inline-size: max-content;
gap: var(--s-7);
animation: ticker 26s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
display: inline-flex;
align-items: center;
gap: var(--s-3);
font-size: var(--t--1);
font-weight: 600;
color: #fff;
white-space: nowrap;
}
/* Bifă în cerc portocaliu, ca în materialele firmei. Desenată din contur, nu
dintr-o imagine: rămâne clară la orice mărime și nu cere o cerere în plus. */
.ticker__item::before {
content: "";
inline-size: 1.15rem;
block-size: 1.15rem;
flex: none;
border-radius: 50%;
border: 2px solid var(--brand-orange);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f39c2c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.5L19 7.5'/%3E%3C/svg%3E");
background-size: 68%;
background-position: 50% 52%;
background-repeat: no-repeat;
}
/* Șina poartă trei copii ale setului, deci reluarea e la o treime. */
@keyframes ticker { to { transform: translateX(calc(-100% / 3)); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }
@media (max-width: 640px) {
.ticker { flex-direction: column; align-items: stretch; }
/* Pe coloană eticheta are rândul ei, deci se centrează. Umplutura laterală
devine simetrică — altfel „DE CE NOI?” ar părea centrat greșit. */
.ticker__eticheta {
justify-content: center;
padding-block: var(--s-3) 0;
padding-inline: var(--gutter);
}
.ticker__fereastra { padding-block: var(--s-3) var(--s-4); }
}
/* ==========================================================================
6. Invitația la Comutator
========================================================================== */
.switch-pitch {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: clamp(2rem, 1rem + 5vw, 5rem);
align-items: center;
}
@media (max-width: 940px) { .switch-pitch { grid-template-columns: 1fr; } }
/* Miniatura statică a comutatorului, care invită la apăsare */
.switch-preview {
position: relative;
padding: var(--s-5);
border: 1px solid var(--line);
border-radius: var(--r-4);
background:
linear-gradient(160deg,
color-mix(in oklab, var(--surface-hi) 92%, transparent),
color-mix(in oklab, var(--bg-sunken) 92%, transparent));
box-shadow: var(--shadow-2);
overflow: hidden;
cursor: pointer;
transition: border-color var(--d-2), transform var(--d-2) var(--ease-out);
}
.switch-preview:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.switch-preview::after {
content: "";
position: absolute; inset: 0;
background-image: var(--grain);
opacity: 0.1; pointer-events: none;
}
.switch-preview__rail {
display: flex;
gap: var(--s-3);
align-items: stretch;
}
.switch-preview__cell {
flex: 1;
aspect-ratio: 3 / 4;
border-radius: var(--r-3);
border: 1px solid var(--line);
background: var(--bg-sunken);
overflow: hidden;
opacity: 0.5;
transition: opacity var(--d-2), transform var(--d-2) var(--ease-out);
}
.switch-preview__cell svg { inline-size: 100%; block-size: 100%; }
.switch-preview__cell.is-on {
opacity: 1;
transform: scale(1.06);
border-color: var(--acc);
box-shadow: 0 0 0 1px var(--acc), var(--shadow-2);
}
.switch-preview__cap {
margin-block-start: var(--s-4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
font-family: var(--font-mono);
font-size: var(--t--2);
color: var(--ink-faint);
}
.switch-preview__cap b { color: var(--ink); font-weight: 500; }
.hint-list { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); padding: 0; list-style: none; }
.hint-list li {
display: flex;
align-items: center;
gap: var(--s-4);
padding-block: var(--s-3);
border-block-start: 1px solid var(--line);
font-size: var(--t--1);
color: var(--ink-muted);
}
.hint-list li:first-child { border-block-start: 0; padding-block-start: 0; }
.hint-list .keys { display: inline-flex; gap: 3px; flex: none; min-inline-size: 7.5rem; }
/* ==========================================================================
7. Catalog
========================================================================== */
.filters {
display: flex;
flex-wrap: wrap;
gap: var(--s-5);
align-items: flex-end;
justify-content: space-between;
padding-block-end: var(--s-5);
border-block-end: 1px solid var(--line);
margin-block-end: var(--s-6);
}
.filter-group { display: grid; gap: var(--s-2); }
.filter-group__label {
font-family: var(--font-mono);
font-size: var(--t--2);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 0.42rem 0.8rem;
border: 1px solid var(--line-strong);
border-radius: var(--r-full);
background: transparent;
color: var(--ink-muted);
font-size: var(--t--1);
font-weight: 500;
cursor: pointer;
transition: color var(--d-1), border-color var(--d-1), background var(--d-1);
}
.chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.chip[aria-pressed="true"] {
background: var(--acc);
border-color: var(--acc);
color: var(--acc-ink);
}
.chip__swatch {
inline-size: 0.7rem; block-size: 0.7rem;
border-radius: 50%;
border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent);
flex: none;
}
.filter-count {
font-family: var(--font-mono);
font-size: var(--t--1);
color: var(--ink-faint);
}
.filter-count b { color: var(--ink); font-weight: 600; }
/* TREI coloane, numărate, nu câte încap.
Era `auto-fill` cu o lățime minimă: browserul punea câte cartele intrau, deci
3 pe un ecran de 1280 și 4 pe unul de 1366 — pe prima pagină, cele nouă uși
ieșeau 4 + 4 + 1, cu un produs singur pe ultimul rând. Numărul de coloane e
acum o decizie, nu un rezultat al lățimii ferestrei.
`minmax(0, 1fr)`, nu `1fr`: altfel o denumire lungă de produs ar lăți coloana
peste partea ei și cele trei n-ar mai fi egale. */
.grid-products {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-5);
}
/* Pragul de la trei la două coloane stă la 820 px, nu mai sus. Cu nouă uși pe
prima pagină, două coloane înseamnă patru rânduri pline și una singură pe
ultimul — exact ce trebuia evitat. Sub 820 px cartela ar coborî sub 250 px
lățime, unde desenul și cele două butoane nu mai încap cinstit, deci acolo
se trece la două, iar orfana e prețul plătit pentru cartele lizibile. */
@media (max-width: 820px) { .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-products { grid-template-columns: minmax(0, 1fr); } }
.card {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
border: 1px solid var(--line);
border-radius: var(--r-4);
background: var(--surface);
overflow: hidden;
transition: border-color var(--d-2), transform var(--d-2) var(--ease-out), box-shadow var(--d-2);
}
.card:hover {
border-color: var(--line-strong);
transform: translateY(-3px);
box-shadow: var(--shadow-2);
}
.card.is-hidden { display: none; }
/* Proporția e aleasă la mijlocul intervalului real al ușilor (0,97 … 1,24),
ca benzile goale din jurul desenului să fie cât mai mici indiferent de
produs. Caroiajul o transformă într-o planșă, nu într-un chenar gol. */
.card__figure {
position: relative;
aspect-ratio: 8 / 7;
display: grid;
place-items: center;
padding: var(--s-5) var(--s-5) var(--s-2);
overflow: hidden;
border-block-end: 1px solid var(--line);
}
.card__figure svg { inline-size: auto; block-size: 100%; max-inline-size: 100%; }
/* Vignetă discretă: ridică desenul de pe caroiaj. */
.card__figure::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 90% at 50% 30%,
transparent 45%, color-mix(in oklab, var(--bg-sunken) 70%, transparent) 100%);
pointer-events: none;
}
/* La trecerea cursorului, caroiajul se colorează discret în chihlimbar —
suficient cât să semnaleze cartela activă, fără să mute nimic. */
.card:hover .card__figure { --plate-line: color-mix(in oklab, var(--acc) 18%, transparent); }
/* Fotografia reală a magazinului. Stă ascunsă sub desenul la scară și apare
la trecerea cursorului: desenul dă cotele, fotografia dă materialul.
E mică (255–510 px), deci nu e mărită niciodată peste ce poate duce —
`object-fit: cover` o încadrează, nu o întinde. */
.card__photo {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.04);
transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out);
z-index: 1;
/* NU prinde clicul. Legătura care acoperă toată cartela e `::after`-ul din
titlu, la `z-index: auto`, deci sub fotografia asta. Peste zona desenului,
clicul lovea imaginea și nu se întâmpla nimic — chiar și când fotografia e
invizibilă, fiindcă `opacity: 0` ascunde un element, dar nu-l scoate din
calea indicatorului. */
pointer-events: none;
}
.card:hover .card__photo,
.card:focus-within .card__photo { opacity: 1; transform: none; }
/* Insigna cu lamela rămâne lizibilă peste fotografie. Nu e interactivă, deci
lasă clicul să treacă mai departe, la legătura cartelei. */
.card__badges { z-index: 2; pointer-events: none; }
.card__desc {
font-size: var(--t--1);
color: var(--ink-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Secțiunile alternante lasă textura de tablier să se vadă prin ele. */
/* --- Ritmul benzilor ------------------------------------------------------
Ciclu de PATRU, numărat DE JOS ÎN SUS, exact cum a fost cerut:
subsol portocaliu
07 verde ← nth-last-of-type(4n+1)
06 alb ← 4n+2
05 unelte ← 4n+3, fundal transparent: se vede pagina
04 portocaliu ← 4n+4
03 verde
02 alb
01 unelte
`nth-last-of-type` ancorează ciclul la subsol, nu la antet. Numărat de sus,
fiecare pagină ar fi ieșit altfel la bază: prima pagină are șapte secțiuni,
o pagină legală are una singură.
Treapta „unelte” nu e o culoare, ci lipsa uneia: fundalul rămâne transparent
și se vede textura paginii — tablierul de rulou și uneltele desenate.
Eroul e scos: are propriul tratament, cu aură și granulație. Fiind mereu
prima secțiune, excluderea lui nu schimbă paritatea celorlalte. */
main > section:nth-last-of-type(4n + 1) { background: var(--band-verde); }
main > section:nth-last-of-type(4n + 2) { background: var(--band-alb); }
main > section:nth-last-of-type(4n + 3) { background: none; }
main > section:nth-last-of-type(4n + 4) { background: var(--band-portocaliu); }
/**
* Cerneala de pe benzi: fiecare bandă și-o alege singură.
*
* Verdele mărcii e închis, deci cere text ALB — cu cerneala obișnuită ar da 2,40,
* adică nelizibil. Portocaliul e deschis și cere exact invers: text închis, unde
* albul ar da 2,11. Nu există o singură culoare de text bună pentru amândouă.
*
* Redefinirea se face pe TOKEN, nu pe `color`, ca să se propage la tot ce
* moștenește — titluri, supratitlu, text introductiv, proză.
*
* ATENȚIE la ce se pune ÎN interiorul unei benzi verzi: orice cutie cu fundal
* propriu deschis — cartelă de produs, carte de identitate, întrebări — trebuie
* să-și readucă cerneala închisă, altfel moștenește albul și textul dispare pe
* alb. Lista de mai jos face exact asta; dacă apare o componentă nouă cu fundal
* deschis, se adaugă acolo.
*/
/* `color` se declară AICI, nu doar tokenul.
Motivul e o capcană a proprietăților personalizate: `color` e scris o singură
dată, pe `body`, ca `var(--ink)`. Valoarea se calculează acolo și se
MOȘTENEȘTE mai departe deja rezolvată. Redefinind `--ink` pe secțiune, tokenul
chiar se schimbă — verificat, arăta #ffffff — dar `color` rămânea cel
moștenit, fiindcă nicio declarație de la acest nivel nu-l recitea. Titlurile
de pe verde erau negre pe verde închis, la 2,40. */
main > section:nth-last-of-type(4n + 1) {
--ink: #ffffff;
--ink-muted: #dbe6e2;
--ink-faint: #dbe6e2;
/* Numărul de secțiune și butoanele fantomă folosesc cerneala portocalie, care
pe verde închis dă 1,1. Pe banda asta devine un ton deschis. */
--orange-txt: #ffc98a;
color: var(--ink);
}
main > section:nth-last-of-type(4n + 4) {
--ink: #14171a;
--ink-muted: #21272b;
--ink-faint: #21272b;
/* #7a3f06 dădea 3,91 pe portocaliul mărcii — sub prag. #5f3104 dă 5,16 și
rămâne aceeași cerneală, doar mai închisă. */
--orange-txt: #5f3104;
color: var(--ink);
}
/* Cutiile cu fundal propriu deschis, dinăuntrul benzii verzi, își iau cerneala
înapoi. Fără asta, textul lor ar fi alb pe alb. */
/* `.note` NU e în listă, deși pare o cutie: fundalul ei are alfa 0,06, deci
verdele benzii se vede prin el. Trecută prin resetare, primea cerneală închisă
pe verde închis — 2,40. Rămâne pe cerneala benzii. */
main > section:nth-last-of-type(4n + 1) :is(.card, .idcard, .svc, .faq, .calc, .contact-line, .gallery, .oferta, .filtre, .harta) {
--ink: #14171a;
--ink-muted: #42494d;
--ink-faint: #3d4448;
--orange-txt: #7a3f06;
color: var(--ink);
}
main > section + section { border-block-start: 1px solid var(--line); }
/* Selectorul trebuie să fie la fel de specific ca regula de ritm de mai sus
(`main > section:nth-last-of-type()`), altfel eroul primește bandă albă.
Un simplu `.hero` pierde: 0-1-0 față de 0-1-2. */
main > section.hero { background: none; border-block-start: 0; }
/* `.section--alt` rămâne în marcajul generat, dar NU mai are nicio regulă de
fundal — culoarea vine exclusiv din poziția secțiunii, ca să existe o singură
sursă de adevăr. Atenție dacă se reintroduce ceva aici: o clasă (0-1-0) bate
`main > section` (0-0-2), deci ar face secțiunile transparente. */
.card__badges {
position: absolute;
inset-block-start: var(--s-3);
inset-inline: var(--s-3);
display: flex;
justify-content: space-between;
gap: var(--s-2);
pointer-events: none;
}
.badge {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.28rem 0.5rem;
border-radius: var(--r-1);
background: color-mix(in oklab, var(--bg) 72%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--line);
color: var(--ink-muted);
}
.badge--sale { background: var(--reducere); border-color: transparent; color: #fff; }
.card__body { display: grid; gap: var(--s-3); padding: var(--s-5); align-content: start; }
.card__title {
font-size: var(--t-0);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.35;
}
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.spec-row {
display: flex;
flex-wrap: wrap;
gap: var(--s-1) var(--s-3);
font-family: var(--font-mono);
font-size: var(--t--2);
color: var(--ink-faint);
}
.spec-row span { white-space: nowrap; }
/* Secțiunea 02 de pe prima pagină: conținutul cartelelor stă centrat, în
continuarea textelor de secțiune. `.spec-row` și `.price` sunt cutii flex,
deci nu ascultă de `text-align` — au nevoie de `justify-content`.
Domeniul e `.acasa`, deci magazinul, categoriile și paginile de produs
păstrează alinierea la stânga.
`.card__foot` intră și el în centrare. A fost lăsat întins între capete ca
„bară de utilitare”, dar pe o cartelă în care titlul, cotele, descrierea și
prețul stau toate pe axa din mijloc, un singur rând împins spre margini se
citea ca o scăpare, nu ca o intenție. */
.acasa .card__body { text-align: center; }
.acasa .spec-row,
.acasa .price,
.acasa .card__foot { justify-content: center; }
.price { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-block-start: var(--s-1); }
.price__now {
font-family: var(--font-mono);
font-size: var(--t-2);
font-weight: 600;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.price__was {
font-family: var(--font-mono);
font-size: var(--t--1);
color: var(--ink-faint);
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.price__off { font-family: var(--font-mono); font-size: var(--t--2); font-weight: 600; color: var(--sale); }
.card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
padding-block-start: var(--s-3);
border-block-start: 1px solid var(--line);
font-family: var(--font-mono);
font-size: var(--t--2);
color: var(--ink-faint);
}
/* Titlul acoperă toată cartela cu un ::after, deci butonul trebuie ridicat
peste el ca să rămână apăsabil. */
.card__foot button { position: relative; z-index: 1; }
.empty-state {
padding: var(--s-9) var(--s-5);
text-align: center;
border: 1px dashed var(--line-strong);
border-radius: var(--r-4);
color: var(--ink-faint);
}
/* ==========================================================================
8. Fișa tehnică
========================================================================== */
.spec-panel {
position: relative;
border: 1px solid var(--line);
border-radius: var(--r-4);
background: var(--surface);
overflow: hidden;
}
/* Reper de încadrare în colțul din dreapta-jos, ca pe o planșă de execuție.
Același limbaj ca desenele produselor — de aceea panourile de date arată ca
parte din același document, nu ca niște casete adunate de aiurea. */
.spec-panel::after {
content: "";
position: absolute;
inset-block-end: 10px;
inset-inline-end: 10px;
inline-size: 10px;
block-size: 10px;
border-inline-end: 1px solid color-mix(in oklab, var(--acc) 55%, transparent);
border-block-end: 1px solid color-mix(in oklab, var(--acc) 55%, transparent);
pointer-events: none;
}
.table-scroll { overflow-x: auto; }
table.spec {
inline-size: 100%;
border-collapse: collapse;
font-size: var(--t--1);
min-inline-size: 34rem;
}
table.spec caption {
text-align: start;
padding: var(--s-5);
border-block-end: 1px solid var(--line);
font-weight: 600;
font-size: var(--t-0);
color: var(--ink);
}
table.spec th, table.spec td {
padding: 0.8rem var(--s-5);
text-align: start;
border-block-end: 1px solid var(--line);
vertical-align: baseline;
}
table.spec thead th {
font-family: var(--font-mono);
font-size: var(--t--2);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
font-weight: 500;
background: var(--bg-sunken);
}
table.spec tbody th { font-weight: 500; color: var(--ink-muted); inline-size: 40%; }
table.spec td {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--ink);
}
table.spec tbody tr:last-child th, table.spec tbody tr:last-child td { border-block-end: 0; }
table.spec tbody tr:hover { background: color-mix(in oklab, var(--acc) 5%, transparent); }
.note {
display: flex;
gap: var(--s-4);
padding: var(--s-5);
border-inline-start: 2px solid var(--acc);
background: color-mix(in oklab, var(--acc) 6%, transparent);
border-radius: 0 var(--r-3) var(--r-3) 0;
font-size: var(--t--1);
color: var(--ink-muted);
}
.note b { color: var(--ink); }
/* ==========================================================================
9. Servicii
========================================================================== */
/* Exact trei coloane: cele șase servicii cad în două rânduri egale, 3 și 3.
Cu `auto-fit` ecranele late produceau patru pe primul rând și două pe al
doilea — un rând ciuntit, care se vede imediat. */
/* Liniile despartitoare sunt chiar spatiile grilei: fundalul se vede prin ele.
Erau desenate cu , prea deschis pe cartelele aproape albe ca sa se
distinga; le face sa se citeasca drept chenar de tabel. */
.svc-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--line-strong);
border: 1px solid var(--line-strong);
border-radius: var(--r-4);
overflow: hidden;
}
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .svc-grid { grid-template-columns: 1fr; } }
/* Continut centrat, pe toata latimea celulei. Spatierea laterala e mica tocmai
ca randul sa mearga dintr-un capat in celalalt: aliniat la stanga, textul
lasa o pana alba in dreapta fiecarei cartele. */
.svc {
position: relative;
background: var(--bg-raised);
padding: var(--s-6) var(--s-4);
display: grid;
gap: var(--s-3);
align-content: start;
justify-items: center;
text-align: center;
transition: background var(--d-2);
}
.svc:hover { background: var(--surface); }
/* Numărul stă pe muchia de sus, călare pe chenar, ca o etichetă de reper. */
.svc__n {
font-family: var(--font-mono);
font-size: var(--t--2);
font-weight: 600;
color: var(--acc);
letter-spacing: 0.12em;
display: inline-flex;
align-items: center;
gap: var(--s-3);
}
.svc__n::before,
.svc__n::after {
content: "";
block-size: 1px;
inline-size: 1.5rem;
background: color-mix(in oklab, var(--acc) 45%, transparent);
}
.svc h3 { font-size: var(--t-1); letter-spacing: -0.02em; }
/* umple fiecare rand pana la capat. Regula generala pentru
foloseste , care muta cuvinte pe randul urmator ca sa evite
orfanii - potrivit la text curent, risipitor intr-o cartela ingusta. */
.svc p {
font-size: var(--t--1);
color: var(--ink-muted);
text-wrap: auto;
inline-size: 100%;
}
/* ==========================================================================
10. Galerie
========================================================================== */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--s-4);
}
.gallery figure {
margin: 0;
border: 1px solid var(--line);
border-radius: var(--r-3);
overflow: hidden;
background: var(--bg-sunken);
}
.gallery img {
inline-size: 100%;
aspect-ratio: 1;
object-fit: cover;
filter: saturate(0.9) contrast(1.04);
transition: filter var(--d-3), transform var(--d-3) var(--ease-out);
}
.gallery figure:hover img { filter: none; transform: scale(1.03); }
/* Slot gol, în așteptarea fotografiilor din teren.
Păstrează exact proporția și chenarul unei imagini reale, deci înlocuirea nu
mișcă nimic în pagină. Conturul întrerupt spune „aici urmează ceva”, nu
„aici s-a stricat ceva”. */
.gallery__gol { background: var(--surface); }
.gallery__semn {
display: grid;
place-items: center;
aspect-ratio: 1;
margin: var(--s-3);
border: 1px dashed var(--line-strong);
border-radius: var(--r-2);
color: var(--ink-faint);
opacity: 0.55;
}
.gallery__semn svg { inline-size: 2.25rem; block-size: 2.25rem; }
.gallery figcaption {
padding: var(--s-3) var(--s-4);
font-family: var(--font-mono);
font-size: var(--t--2);
color: var(--ink-faint);
border-block-start: 1px solid var(--line);
}
/* ==========================================================================
11. Întrebări frecvente
========================================================================== */
/**
* Numerele întrebărilor sunt DISCRETE, nu plăcuțe portocalii ca numerele de
* secțiune. Acolo sunt șapte pe pagină și marchează începuturi; aici sunt
* douăzeci unul sub altul și doar ajută la orientare — douăzeci de plăcuțe
* portocalii ar fi tras ochiul de la întrebările propriu-zise.
*
* `tabular-nums` ține cifrele pe aceeași lățime, deci „01” și „18” ocupă exact
* cât „20” și toate întrebările pornesc din același punct.
*/
.faq { --faq-n: 2.5rem; display: grid; gap: 0; border-block-start: 1px solid var(--line); }
.faq__n {
flex: none;
inline-size: var(--faq-n);
font-style: normal;
font-family: var(--font-mono);
font-size: var(--t--1);
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--ink-faint);
}
.faq details { border-block-end: 1px solid var(--line); }
.faq summary {
display: flex;
align-items: center;
gap: var(--s-4);
padding: var(--s-5) 0;
cursor: pointer;
list-style: none;
font-size: var(--t-1);
font-weight: 600;
letter-spacing: -0.018em;
transition: color var(--d-1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--acc); }
.faq summary::after {
content: "";
margin-inline-start: auto;
flex: none;
inline-size: 0.75rem; block-size: 0.75rem;
border-inline-end: 1.5px solid currentColor;
border-block-end: 1.5px solid currentColor;
rotate: 45deg;
transition: rotate var(--d-2) var(--ease-out);
}
.faq details[open] summary::after { rotate: -135deg; }
.faq details > div {
padding-block-end: var(--s-5);
/* Răspunsul pornește de sub ÎNTREBARE, nu de sub număr: lățimea numărului plus
distanța dintre elementele din antet. Aliniat la marginea din stânga, ar fi
părut că aparține altui rând. */
padding-inline-start: calc(var(--faq-n) + var(--s-4));
color: var(--ink-muted);
max-inline-size: var(--measure);
font-size: var(--t-0);
}
/* Pe ecran îngust retragerea ar mânca prea mult din lățimea textului. */
@media (max-width: 560px) {
.faq { --faq-n: 1.9rem; }
.faq details > div { padding-inline-start: 0; }
}
/* ==========================================================================
12. Contact și date de identificare
========================================================================== */
.contact-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 1rem + 3vw, 3rem);
/* `start`, nu întinderea implicită: cartea de identitate e mai scurtă decât
coloana din stânga, iar întinsă își tot trăgea fundalul alb până jos —
un dreptunghi gol de câteva sute de pixeli sub ultimul rând. */
align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
/* Cartea de identitate a firmei — accentul cerut pe CUI și J. */
.idcard {
border: 1px solid var(--line-strong);
border-radius: var(--r-4);
background: var(--surface);
overflow: hidden;
box-shadow: var(--shadow-2);
}
.idcard__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding: var(--s-4) var(--s-5);
background: var(--bg-sunken);
border-block-end: 1px solid var(--line);
font-family: var(--font-mono);
font-size: var(--t--2);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
}
.idcard__head span { color: var(--acc); }
.idcard__body { display: grid; }
.idrow {
display: grid;
grid-template-columns: minmax(8rem, 30%) 1fr;
gap: var(--s-4);
padding: 0.85rem var(--s-5);
border-block-end: 1px solid var(--line);
align-items: baseline;
}
.idrow:last-child { border-block-end: 0; }
.idrow dt {
font-family: var(--font-mono);
font-size: var(--t--2);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-faint);
}
.idrow dd { margin: 0; font-size: var(--t--1); color: var(--ink); }
.idrow dd a { text-decoration: none; }
.idrow dd a:hover { color: var(--acc); }
/* Rândurile fiscale rămân ridicate prin FUNDAL și prin eticheta portocalie, nu
prin corp de literă. Aveau `--t-1` și greutate 600, deci CUI și numărul de
ordine ieșeau mai mari și mai groase decât „Sediu social” sau „Telefon”, iar
cartea de identitate arăta cu două tipografii în ea. Rămân la fel de vizibile
— cerința clientului era să se VADĂ, nu să fie scrise altfel. */
.idrow--key { background: color-mix(in oklab, var(--acc) 7%, transparent); }
.idrow--key dd {
font-family: var(--font-mono);
font-size: var(--t--1);
letter-spacing: 0.01em;
color: var(--ink);
}
.idrow--key dt { color: var(--acc); }
.contact-cta { display: grid; gap: var(--s-5); align-content: start; }
.contact-lines { display: grid; gap: var(--s-3); }
.contact-line {
display: flex;
align-items: center;
gap: var(--s-4);
padding: var(--s-4) var(--s-5);
border: 1px solid var(--line);
border-radius: var(--r-3);
background: var(--surface);
text-decoration: none;
transition: border-color var(--d-2), transform var(--d-2) var(--ease-out);
}
.contact-line:hover { border-color: var(--acc); transform: translateX(3px); }
.contact-line svg { inline-size: 1.1rem; block-size: 1.1rem; color: var(--acc); flex: none; }
.contact-line div { display: grid; }
.contact-line small {
font-family: var(--font-mono);
font-size: var(--t--2);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* Aceeași tipografie ca valorile din cartea de identitate (`.idrow dd`):
același corp de literă și aceeași greutate. Erau `--t-1` și 600, deci
telefonul și adresele de e-mail din stânga ieșeau mai mari și mai groase
decât aceleași date scrise în chenarul din dreapta — două scrieri pentru
aceeași informație, pe același ecran. `b` rămâne eticheta potrivită: e
informația importantă din rând, doar că nu mai e și îngroșată. */
.contact-line b {
font-size: var(--t--1);
font-weight: 400;
color: var(--ink);
}
/* ==========================================================================
12b. Firimituri, pagina de produs, proză
========================================================================== */
.crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
margin-block-end: var(--s-5);
font-family: var(--font-mono);
font-size: var(--t--2);
color: var(--ink-faint);
}
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--acc); }
.crumbs i { color: var(--line-strong); font-style: normal; }
.crumbs span { color: var(--ink); }
.produs {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
align-items: start;
}
@media (max-width: 900px) { .produs { grid-template-columns: 1fr; } }
.produs__media { display: grid; gap: var(--s-4); position: sticky; top: 6rem; }
@media (max-width: 900px) { .produs__media { position: static; } }
.produs__plansa {
border: 1px solid var(--line-strong);
border-radius: var(--r-4);
padding: var(--s-4);
box-shadow: var(--shadow-2);
}
.produs__plansa svg { inline-size: 100%; block-size: auto; }
.produs__foto {
margin: 0;
border: 1px solid var(--line);
border-radius: var(--r-3);
overflow: hidden;
background: var(--bg-sunken);
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--s-4);
padding: var(--s-3);
}
/* Fotografia rămâne la mărimea ei reală — nu are rezoluție de mărit. */
/* Banda de fotografii: toate pozele declarate de magazin pentru produs, la
mărimea lor reală. Fișierele au între 255 și 510 px pe latura mare, deci
`contain` pe o înălțime fixă le încadrează fără să le întindă. */
.produs__foto-banda {
display: flex;
gap: var(--s-2);
overflow-x: auto;
padding-block-end: var(--s-2);
scrollbar-width: thin;
}
.produs__foto img {
block-size: 96px;
inline-size: auto;
flex: none;
object-fit: contain;
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: var(--r-2);
}
.produs__foto figcaption {
font-family: var(--font-mono);
font-size: var(--t--2);
color: var(--ink-faint);
}
.produs__info { display: grid; gap: var(--s-4); align-content: start; }
.produs__titlu { font-size: var(--t-3); letter-spacing: -0.03em; font-variation-settings: "wdth" 106; }
.produs__pret { margin-block: var(--s-2) 0; }
.produs__pret .price__now { font-size: var(--t-4); }
.produs__stoc {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--font-mono);
font-size: var(--t--2);
color: var(--ink-muted);
}
.produs__stoc i {
inline-size: 7px; block-size: 7px; border-radius: 50%;
background: var(--acc);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--acc) 22%, transparent);
}
.produs__desc { display: grid; gap: var(--s-3); color: var(--ink-muted); max-inline-size: var(--measure); }
.produs__spec { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.produs__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-2); }
.produs__nota { font-size: var(--t--2); color: var(--ink-faint); }
.produs__nota a { color: var(--acc); }
/* Conținutul coletului — o listă de bifat la recepție, nu un paragraf. */
.produs__colet-titlu {
font-family: var(--font-mono);
font-size: var(--t--1);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin-block-end: var(--s-3);
}
.colet {
display: grid;
gap: var(--s-2);
list-style: none;
font-size: var(--t--1);
color: var(--ink-muted);
}
.colet li {
display: flex;
align-items: baseline;
gap: var(--s-3);
}
.colet li::before {
content: "";
flex: none;
inline-size: 6px; block-size: 6px;
border: 1px solid var(--acc);
transform: translateY(-1px) rotate(45deg);
}
/* Proză: paginile legale și de informare. */
.proza {
max-inline-size: 74ch;
display: grid;
gap: var(--s-4);
color: var(--ink-muted);
font-size: var(--t-0);
}
.proza h2, .proza h3, .proza h4 { color: var(--ink); margin-block-start: var(--s-5); }
.proza h3 { font-size: var(--t-2); }
.proza ul, .proza ol { padding-inline-start: 1.25em; display: grid; gap: var(--s-2); }
.proza a { color: var(--acc); }
.proza strong, .proza b { color: var(--ink); }
.proza + .idcard { margin-block-start: var(--s-8); max-inline-size: 40rem; }
/* ==========================================================================
13. Subsol
========================================================================== */
.ftr {
border-block-start: 1px solid var(--line);
background: var(--band-portocaliu);
padding-block: var(--s-7) var(--s-6);
}
/* Coloanele de legături se aliniază pe mijloc față de blocul de marcă, care e
mult mai înalt din cauza siglei. Lipite de sus, lăsau subsolul dezechilibrat:
text în stânga jos, gol în dreapta jos. */
/**
* Coloanele subsolului: marca + patru grupuri de legături.
*
* Era `repeat(auto-fit, minmax(9rem, 1fr))`, care pe ecran îngust încape o
* singură dată. Celelalte trei grupuri ieșeau din șablon și cădeau în coloane
* IMPLICITE, dimensionate cu `auto` — de aici textul stors pe un cuvânt pe rând
* și titlurile călare unele peste altele. `auto-fit` nu se poate amesteca cu o
* primă coloană fixă fără efectul ăsta, deci coloanele sunt acum numărate
* explicit, cu praguri.
*
* `align-items: start`, nu `center`: coloanele au înălțimi diferite, iar
* centrarea le decala pe verticală una față de alta.
*/
.ftr__cols {
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
gap: var(--s-7) var(--s-5);
align-items: start;
}
@media (max-width: 1100px) {
.ftr__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.ftr__cols { grid-template-columns: minmax(0, 1fr); }
}
.ftr h2 {
font-family: var(--font-mono);
font-size: var(--t--2);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
margin-block-end: var(--s-4);
}
.ftr ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
/* Îngroșate: subsolul stă pe bandă portocalie, iar la corp mic pe fond colorat
greutatea normală se topește în fundal. 600 le desprinde fără să le facă
titluri. */
.ftr a {
font-size: var(--t--1);
font-weight: 600;
color: var(--ink-muted);
text-decoration: none;
}
.ftr a:hover { color: var(--acc); }
.ftr__legal {
margin-block-start: var(--s-8);
padding-block-start: var(--s-5);
border-block-start: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-3) var(--s-5);
font-family: var(--font-mono);
font-size: var(--t--2);
color: var(--ink-faint);
}
.ftr__legal strong { color: var(--ink-muted); font-weight: 500; }
.ftr__legal .idbar__code { font-size: var(--t--2); }
/* ==========================================================================
Coșul de cumpărături
========================================================================== */
/* Butonul din antet. Numărul stă peste iconiță, nu lângă ea: pe telefon bara
de sus e strâmtă, iar o pastilă alăturată împinge navigarea pe rândul doi. */
.cos-buton { position: relative; }
.cos-buton svg { inline-size: 1.15rem; block-size: 1.15rem; }
.cos-buton__n {
position: absolute;
inset-block-start: -4px;
inset-inline-end: -4px;
min-inline-size: 1.05rem;
padding: 0 0.22rem;
border-radius: 999px;
background: var(--acc);
color: var(--acc-ink);
font-family: var(--font-mono);
font-size: 0.66rem;
line-height: 1.05rem;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Butonul de pe cartelă stă pe toată lățimea, sub rândul de subsol: e acțiunea
principală a cartelei, iar o țintă lată se nimerește ușor cu degetul. */
.card__cos { margin: 0 var(--s-4) var(--s-4); }
/* Răspunsul butonului după apăsare. Culoarea nu e singurul semnal — textul se
schimbă odată cu ea, pentru cine nu distinge verdele de roșu. */
.btn--ok { background: var(--acc); color: var(--acc-ink); }
.btn--rau { background: #7f1d1d; color: #fff; }
.cantitate {
display: inline-flex;
align-items: center;
gap: var(--s-2);
border: 1px solid var(--line);
border-radius: var(--r-2);
padding: 0.15rem;
}
.cantitate button {
inline-size: 1.9rem;
block-size: 1.9rem;
border: 0;
border-radius: var(--r-1);
background: var(--surface);
color: var(--ink);
font-size: var(--t-0);
cursor: pointer;
}
.cantitate button:hover:not(:disabled) { background: var(--line); }
.cantitate button:disabled { opacity: 0.4; cursor: not-allowed; }
.cantitate output {
min-inline-size: 2ch;
text-align: center;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.cantitate input {
inline-size: 3.5rem;
border: 0;
background: transparent;
color: var(--ink);
font-family: var(--font-mono);
font-size: var(--t-0);
text-align: center;
}
.cantitate--mare { padding: 0.4rem 0.5rem; }
.cos-tabel { inline-size: 100%; border-collapse: collapse; }
.cos-tabel th, .cos-tabel td {
padding: var(--s-3);
border-block-end: 1px solid var(--line);
text-align: start;
vertical-align: middle;
}
.cos-tabel thead th {
font-family: var(--font-mono);
font-size: var(--t--2);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-faint);
font-weight: 500;
}
.cos-tabel tbody th { font-weight: 500; max-inline-size: 34ch; }
.cos-tabel td:nth-child(2), .cos-tabel td:nth-child(4) {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.cos-scoate {
border: 0;
background: none;
color: var(--ink-faint);
font-size: var(--t--2);
text-decoration: underline;
cursor: pointer;
}
.cos-scoate:hover { color: var(--ink); }
.cos-total {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--s-4);
margin-block-start: var(--s-4);
padding-block: var(--s-4);
border-block-start: 2px solid var(--line-strong);
font-size: var(--t-1);
}
.cos-total b {
font-family: var(--font-mono);
font-size: var(--t-3);
font-variant-numeric: tabular-nums;
}
.cos-nota { font-size: var(--t--2); color: var(--ink-faint); }
.cos-gol { color: var(--ink-muted); margin-block-end: var(--s-4); }
.cos-actiuni {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
margin-block-start: var(--s-5);
}
/* --- Formularul de finalizare -------------------------------------------- */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: var(--s-4);
}
.camp { display: grid; gap: var(--s-2); }
.camp--lat { grid-column: 1 / -1; }
.camp label { font-size: var(--t--1); color: var(--ink-muted); }
.camp input, .camp select, .camp textarea {
padding: 0.7rem 0.8rem;
border: 1px solid var(--line);
border-radius: var(--r-2);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: var(--t--1);
}
.camp input:focus-visible, .camp select:focus-visible, .camp textarea:focus-visible {
outline: 2px solid var(--acc);
outline-offset: 1px;
}
.camp[data-eroare] input, .camp[data-eroare] select { border-color: #b91c1c; }
.camp__eroare { font-size: var(--t--2); color: #b91c1c; }
.plata-optiuni { display: grid; gap: var(--s-3); }
.plata-optiune {
display: flex;
gap: var(--s-3);
padding: var(--s-4);
border: 1px solid var(--line);
border-radius: var(--r-3);
cursor: pointer;
}
.plata-optiune:has(input:checked) {
border-color: var(--acc);
background: color-mix(in oklab, var(--acc) 7%, transparent);
}
.plata-optiune input { margin-block-start: 0.25rem; }
.plata-optiune b { display: block; }
.plata-optiune span { font-size: var(--t--2); color: var(--ink-muted); }
.rezumat {
border: 1px solid var(--line);
border-radius: var(--r-3);
background: var(--surface);
padding: var(--s-4);
}
.rezumat__rand {
display: flex;
justify-content: space-between;
gap: var(--s-3);
padding-block: var(--s-2);
font-size: var(--t--1);
}
.rezumat__rand--total {
border-block-start: 1px solid var(--line);
margin-block-start: var(--s-2);
padding-block-start: var(--s-3);
font-size: var(--t-0);
}
.rezumat__rand--total b {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* --- Rezultatul comenzii -------------------------------------------------- */
.rezultat { text-align: center; max-inline-size: 48rem; margin-inline: auto; }
.rezultat__semn {
inline-size: 3.5rem;
block-size: 3.5rem;
margin-inline: auto;
margin-block-end: var(--s-4);
display: grid;
place-items: center;
border-radius: 50%;
border: 2px solid var(--acc);
color: var(--acc);
font-size: var(--t-2);
}
.rezultat__semn--rau { border-color: #b91c1c; color: #f87171; }
.rezultat__cod {
font-family: var(--font-mono);
font-size: var(--t-2);
margin-block: var(--s-3);
}
/* Rândul din coș: denumirea e link spre produs, cu cotele dedesubt — omul
verifică dimensiunea înainte de a plăti, nu după livrare. */
.cos-tabel tbody th a { color: var(--ink); text-decoration: none; }
.cos-tabel tbody th a:hover { color: var(--acc); text-decoration: underline; }
.cos-detaliu {
display: block;
margin-block-start: 0.25rem;
font-family: var(--font-mono);
font-size: var(--t--2);
font-weight: 400;
color: var(--ink-faint);
}
/* ==========================================================================
Antetul pe ecrane înguste
========================================================================== */
/* Eticheta scurtă apare doar sub 560 px; implicit se vede cea lungă. */
.hdr__cta-scurt { display: none; }
/**
* La 375 px antetul cerea 476 px de spațiu într-unul de 337: butonul
* „Produsele noastre” împreună cu perechea de taste ieșea din ecran și trăgea
* după el o bară de derulare orizontală pe toată pagina.
*
* Se recuperează pe trei căi, în ordinea în care se pierde cel mai puțin:
* 1. perechea de taste dispare — o scurtătură de tastatură nu spune nimic
* pe un telefon;
* 2. eticheta se scurtează la „Produse”, restul se înțelege din context;
* 3. spațierile se strâng, iar butonul primește un chenar mai mic.
*/
@media (max-width: 560px) {
.hdr__inner { gap: var(--s-2); }
.hdr__actions { gap: var(--s-1); }
.hdr__cta { padding: 0.55rem 0.85rem; }
.hdr__cta .btn__kbd { display: none; }
.hdr__cta-lung { display: none; }
.hdr__cta-scurt { display: inline; }
.icon-btn { inline-size: 2.15rem; block-size: 2.15rem; }
}
/* Sub 380 px rămâne doar marca și acțiunile, fără subtitlu. */
@media (max-width: 380px) {
.brand__name small { display: none; }
}
/* ==========================================================================
Lupa — fotografia la mărime mare
========================================================================== */
/* Semnalul că imaginea se poate deschide. */
[data-galerie] img { cursor: zoom-in; }
[data-galerie] img:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.lupa {
position: fixed;
inset: 0;
z-index: 140; /* peste panoul de produse, care stă la 120 */
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s-3);
padding: var(--gutter);
background: color-mix(in oklab, var(--bg-sunken) 82%, transparent);
backdrop-filter: blur(20px) saturate(130%);
-webkit-backdrop-filter: blur(20px) saturate(130%);
}
.lupa[hidden] { display: none; }
.lupa__cadru {
margin: 0;
display: grid;
justify-items: center;
gap: var(--s-4);
min-inline-size: 0;
}
/* Fotografiile au 255–510 px pe latura mare. `max-width` la dimensiunea lor
naturală, prin `width: auto`, le ține la scara reală: mărite ar deveni
pătrate de pixeli, iar textura lamelei — tocmai ce vrea omul să vadă — s-ar
pierde. Pe ecrane mici se micșorează, ceea ce nu strică nimic. */
.lupa__img {
max-inline-size: min(100%, 92vw);
max-block-size: 78vh;
inline-size: auto;
block-size: auto;
border-radius: var(--r-3);
border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
background: var(--bg-sunken);
box-shadow: var(--shadow-3);
}
.lupa__legenda {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: var(--s-2) var(--s-4);
font-family: var(--font-mono);
font-size: var(--t--2);
color: var(--ink-muted);
text-align: center;
max-inline-size: 60ch;
}
.lupa__indice { color: var(--acc); font-variant-numeric: tabular-nums; }
.lupa__nav,
.lupa__inchide {
display: grid;
place-items: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: var(--r-full);
border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
background: color-mix(in oklab, var(--surface) 80%, transparent);
color: var(--ink);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transition: background var(--d-1), border-color var(--d-1);
}
.lupa__nav:hover,
.lupa__inchide:hover { background: var(--surface); border-color: var(--acc); }
.lupa__nav[hidden] { visibility: hidden; display: grid; }
.lupa__inchide {
position: absolute;
inset-block-start: var(--gutter);
inset-inline-end: var(--gutter);
font-size: 1.75rem;
}
@media (max-width: 640px) {
.lupa { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.lupa__nav { position: absolute; inset-block-end: var(--s-5); }
.lupa__nav--prev { inset-inline-start: var(--s-5); }
.lupa__nav--next { inset-inline-end: var(--s-5); }
}
/* ==========================================================================
Pagina „Tehnic” — lista de calcul, diagramele de profil, tabelele pereche
========================================================================== */
/* Cele două reguli de scădere. Etichetă și formulă pe rânduri separate la
ecrane înguste, una lângă alta când e loc — formula e mono, ca să se citească
ca o cotă, nu ca text curent. */
.calcul {
list-style: none;
padding: 0;
margin-block: var(--s-4);
display: grid;
gap: var(--s-3);
}
.calcul li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s-2) var(--s-4);
padding-block-end: var(--s-3);
border-block-end: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.calcul li:last-child { border-block-end: 0; padding-block-end: 0; }
.calcul b { color: var(--ink); min-inline-size: 11rem; }
.calcul span {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--acc);
font-weight: 500;
}
/* Diagramele de profil. Fundal alb fiindcă sunt randări pe alb: pe hârtia caldă
a paginii ar fi plutit într-un dreptunghi de altă nuanță. */
/* Exact doua coloane, nu : sunt fix doua diagrame, iar incapea trei pe ecran lat, deci lasa o coloana goala in dreapta si micsora
inutil desenele. */
.profile {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-5);
}
@media (max-width: 760px) { .profile { grid-template-columns: 1fr; } }
.profile figure {
margin: 0;
border: 1px solid var(--line);
border-radius: var(--r-4);
overflow: hidden;
background: #fff;
}
.profile img {
display: block;
inline-size: 100%;
block-size: auto;
cursor: zoom-in;
}
.profile figcaption {
padding: var(--s-3) var(--s-4);
border-block-start: 1px solid var(--line);
background: var(--surface);
font-family: var(--font-mono);
font-size: var(--t--2);
color: var(--ink-faint);
}
/* Cele două fișe, alăturate pe ecrane late și una sub alta pe telefon. */
/* Aceeasi problema ca la .profile: doua fise, deci doua coloane. */
.spec-doua {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-5);
align-items: start;
}
@media (max-width: 860px) { .spec-doua { grid-template-columns: 1fr; } }
/* ==========================================================================
Secțiunea „Unde se potrivesc” + chemarea la ofertă personalizată
========================================================================== */
/* Textul la stânga, chemarea la ofertă la dreapta. Pe ecrane înguste trec una
sub alta, cu oferta la final — acolo unde omul a terminat de citit. */
.unde {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
align-items: start;
}
@media (max-width: 900px) { .unde { grid-template-columns: 1fr; } }
/* Cartela de ofertă. Portocaliul mărcii o desprinde de restul paginii fără să
țipe: e singurul loc din secțiune care cere o acțiune. */
.oferta {
display: grid;
gap: var(--s-4);
justify-items: start;
padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
border: 1px solid color-mix(in oklab, var(--brand-orange) 45%, transparent);
border-radius: var(--r-4);
background: var(--band-portocaliu);
box-shadow: var(--shadow-2);
position: sticky;
top: 6rem;
}
@media (max-width: 900px) { .oferta { position: static; } }
.oferta h3 {
font-size: var(--t-2);
letter-spacing: -0.025em;
font-variation-settings: "wdth" 104;
}
.oferta p { color: var(--ink-muted); font-size: var(--t--1); }
.oferta .btn { justify-self: center; }
.oferta__nota {
font-family: var(--font-mono);
font-size: var(--t--2);
color: var(--ink);
padding-block-start: var(--s-3);
border-block-start: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
inline-size: 100%;
}
/* A doua ieșire din cartela de ofertă: către calculatorul de dedesubt.
Legătură, nu buton — un al doilea buton de aceeași greutate lângă
„Solicitați o ofertă” ar pune cititorul să aleagă între două îndemnuri la
fel de tari, iar cel care aduce o comandă e primul. Centrată, ca să stea
sub buton, nu lângă el. */
.oferta__calc {
justify-self: center;
margin: 0;
font-size: var(--t--2);
}
.oferta__calc a {
font-weight: 600;
color: inherit;
text-decoration-color: currentColor;
white-space: nowrap;
}
.oferta__calc a:hover { text-decoration-thickness: 2px; }
/* ==========================================================================
Prima pagină: text centrat, pe toată lățimea
==========================================================================
Limitat la `.acasa`, adică DOAR prima pagină. Pe paginile legale și de
produs textul rămâne aliniat la stânga: un document de câteva mii de
caractere, centrat, e greu de urmărit — ochiul pierde începutul rândului.
Aici blocurile sunt scurte, deci centrarea le adună în jurul axei paginii
în loc să lase o pană albă în dreapta. */
.acasa .section-head { justify-content: center; }
.acasa .section-head__text {
max-inline-size: none; /* era 44ch, adică sub jumătate din coloană */
justify-items: center;
text-align: center;
inline-size: 100%;
}
.acasa .section-head__text .eyebrow { justify-content: center; }
/* `--measure` (68ch) ținea rândul la circa 60% din lățimea disponibilă.
Centrat, restul rămânea gol de ambele părți. */
.acasa .lede {
max-inline-size: none;
margin-inline: auto;
text-wrap: auto;
}
.acasa .proza {
max-inline-size: none;
text-align: center;
justify-items: center;
}
.acasa .proza p { text-wrap: auto; max-inline-size: none; margin-inline: auto; }
/* Secțiunea „Unde se potrivesc” are textul lângă cartela de ofertă, deci
coloana e deja îngustă: acolo centrarea ar rupe rândurile inutil. */
.acasa .unde .proza { text-align: start; }
.acasa .unde .proza p { margin-inline: 0; }
/* Nota despre cote și lista de calcul rămân la stânga: sunt reguli de citit
rând cu rând, nu text de prezentare. */
.acasa .note { text-align: start; }
/* --------------------------------------------------------------------------
Liniile orizontale ale grilei de servicii
--------------------------------------------------------------------------
Spațiile grilei desenau linia pe verticală, dar pe orizontală nu se vedea.
Trecut pe chenare EXPLICITE pe fiecare celulă, cu marginile exterioare
scoase după poziție. E mai mult cod decât `gap: 1px`, dar e determinist:
linia există fiindcă e desenată, nu fiindcă se întrevede un fundal.
Regulile se repetă pe fiecare prag, fiindcă „ultima coloană” înseamnă alt
element la 3, la 2 și la o coloană. */
.svc-grid { gap: 0; background: none; }
.svc {
border-inline-end: 1px solid var(--line-strong);
border-block-end: 1px solid var(--line-strong);
}
/* 3 coloane: fără chenar dreapta la a treia, fără chenar jos pe ultimul rând */
.svc:nth-child(3n) { border-inline-end: 0; }
.svc:nth-child(n + 4) { border-block-end: 0; }
@media (max-width: 900px) {
.svc:nth-child(3n) { border-inline-end: 1px solid var(--line-strong); }
.svc:nth-child(2n) { border-inline-end: 0; }
.svc:nth-child(n + 4) { border-block-end: 1px solid var(--line-strong); }
.svc:nth-child(n + 5) { border-block-end: 0; }
}
@media (max-width: 580px) {
.svc { border-inline-end: 0; }
.svc:nth-child(n + 4) { border-block-end: 1px solid var(--line-strong); }
.svc:last-child { border-block-end: 0; }
}
/* ==========================================================================
Paginile de Facebook ale grupului
========================================================================== */
/**
* Butoanele NU folosesc albastrul Facebook.
*
* Un buton albastru pe o pagină verde-portocalie arată ca un obiect străin
* lipit peste design. Pictograma singură spune deja despre ce rețea e vorba —
* e una dintre puținele forme recunoscute fără culoare. Așa că butonul rămâne
* în paleta mărcii, iar Facebook e semnalat prin semn, nu prin fond.
*/
.fb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
padding: 0.6rem 1rem;
border: 1px solid color-mix(in oklab, var(--brand-green) 32%, transparent);
border-radius: var(--r-2);
background: color-mix(in oklab, var(--brand-green) 6%, transparent);
color: var(--acc);
font-size: var(--t--1);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background var(--d-1), border-color var(--d-1), transform var(--d-1) var(--ease-out);
}
.fb-btn svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }
.fb-btn:hover {
transform: translateY(-1px);
background: color-mix(in oklab, var(--brand-green) 12%, transparent);
border-color: var(--brand-green);
}
.fb-btn--lg { padding: 0.75rem 1.15rem; font-size: var(--t-0); }
.fb-btn--lg svg { inline-size: 1.3rem; block-size: 1.3rem; }
.fb-btn--sm { padding: 0.5rem 0.8rem; font-size: var(--t--2); }
.fb-btn--sm svg { inline-size: 1rem; block-size: 1rem; }
.fb-grup { display: grid; gap: var(--s-3); margin-block-start: var(--s-5); }
.fb-grup__titlu {
font-family: var(--font-mono);
font-size: var(--t--2);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-faint);
}
.fb-grup__butoane { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Aliniate la stânga, ca titlul, textul și butonul principal — coloana din
erou NU e centrată, doar secțiunea 02 e. Presupunerea greșită anterioară le
centra pe ele singure, rupte de restul coloanei. */
.fb-grup--erou {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-3);
margin-block-start: var(--s-4);
}
/* În subsol banda e portocalie, deci verdele conturat n-are contrast suficient:
butoanele trec pe fond alb, cu literă verde. */
.ftr .fb-btn {
background: color-mix(in oklab, #fff 78%, transparent);
border-color: color-mix(in oklab, var(--brand-green) 45%, transparent);
}
.ftr .fb-btn:hover { background: #fff; border-color: var(--brand-green); }
/* Pe ecran îngust cele două trec una sub alta, deci tot blocul devine o coloană
de trei butoane de aceeași lățime. */
@media (max-width: 520px) {
.fb-grup--erou { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
Calculatorul de preț — FUNCȚIONALITATE ÎN TESTARE
Toate regulile sunt sub `.calc`. Retragerea blocului din pagină le lasă fără
obiect, deci pot fi șterse dintr-o bucată, fără să se caute dependențe.
========================================================================== */
.calc {
margin-block-start: var(--s-7);
border: 1px solid var(--line-strong);
border-radius: var(--r-4);
background: var(--surface);
box-shadow: var(--shadow-2);
padding: clamp(var(--s-5), 3vw, var(--s-7));
display: grid;
gap: var(--s-5);
}
/* Insigna spune din prima că e o probă. Portocaliul o desparte de verdele
folosit pentru lucruri stabilite. */
.calc__insigna {
display: inline-block;
padding: 0.25rem 0.6rem;
border-radius: var(--r-1);
background: color-mix(in oklab, var(--brand-orange) 18%, transparent);
border: 1px solid color-mix(in oklab, var(--brand-orange) 45%, transparent);
color: var(--orange-txt);
font-family: var(--font-mono);
font-size: var(--t--2);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.calc__titlu { font-size: var(--t-2); margin-block-start: var(--s-3); }
.calc__lede { color: var(--ink-muted); font-size: var(--t--1); max-inline-size: 56ch; margin-block-start: var(--s-2); }
.calc__form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--s-4);
align-items: end;
}
.calc__camp { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.calc__camp--lat { grid-column: 1 / -1; }
.calc__camp > label,
.calc__camp > legend {
font-size: var(--t--1);
color: var(--ink-muted);
padding: 0;
}
.calc__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.calc__chips label { position: relative; }
/* Butonul radio rămâne în pagină, doar nevăzut: ascuns cu `display:none` ar
ieși din ordinea de tabulare și n-ar mai putea fi ales de la tastatură. */
.calc__chips input {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.calc__chips span {
display: block;
padding: 0.6rem 1.1rem;
border: 1px solid var(--line-strong);
border-radius: var(--r-2);
font-size: var(--t--1);
font-weight: 600;
color: var(--ink-muted);
transition: background var(--d-1), border-color var(--d-1), color var(--d-1);
}
.calc__chips input:checked + span {
background: var(--acc);
border-color: var(--acc);
color: var(--acc-ink);
}
.calc__chips input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.calc__intrare {
display: flex;
align-items: center;
gap: var(--s-2);
border: 1px solid var(--line-strong);
border-radius: var(--r-2);
background: var(--bg-raised);
padding-inline-end: var(--s-3);
}
.calc__intrare input {
flex: 1;
min-inline-size: 0;
padding: 0.7rem 0.8rem;
border: 0;
background: transparent;
color: var(--ink);
font-family: var(--font-mono);
font-size: var(--t-0);
}
.calc__intrare input:focus { outline: none; }
.calc__intrare:focus-within { border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in oklab, var(--acc) 22%, transparent); }
.calc__intrare span { font-family: var(--font-mono); font-size: var(--t--2); color: var(--ink-faint); }
.calc__rezultat {
border-radius: var(--r-3);
background: color-mix(in oklab, var(--acc) 7%, transparent);
border: 1px solid color-mix(in oklab, var(--acc) 28%, transparent);
padding: var(--s-5);
}
.calc-gol { color: var(--ink-faint); font-size: var(--t--1); margin: 0; }
.calc-nu { color: var(--ink); font-size: var(--t--1); margin: 0; }
.calc-nu a { color: var(--acc); font-weight: 600; }
.calc-eticheta {
font-family: var(--font-mono);
font-size: var(--t--2);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-faint);
margin: 0;
}
.calc-suma {
font-family: var(--font-mono);
font-size: var(--t-4);
font-weight: 600;
color: var(--acc);
letter-spacing: -0.03em;
margin: var(--s-1) 0 0;
}
.calc-nota { font-size: var(--t--2); color: var(--ink-muted); margin: var(--s-2) 0 0; }
/* Aici au stat stilurile calculului pas cu pas — cutia cu contur întrerupt,
titlul „Cum a ieșit cifra”, rândurile cu etichetă și valoare, subtotalul,
reducerea, prețul final — și cele ale mențiunii „Estimare, nu ofertă
fermă”. Amândouă blocurile au fost scoase din marcaj la cerere, deci
regulile rămăseseră fără niciun consumator.
`.calc-pastila`, bulina de culoare de la alegerea nuanței, e altceva și
rămâne mai jos — numele seamănă, rolul nu. */
/* Prețul din calculator: leii sunt cifra principală, euro rămâne dedesubt ca
referință — lista furnizorului e în euro, dar clientul plătește în lei. */
.calc-suma-eur {
font-family: var(--font-mono);
font-size: var(--t-1);
color: var(--ink-muted);
margin: var(--s-1) 0 0;
}
.calc-curs { font-size: var(--t--2); color: var(--ink-faint); margin: var(--s-2) 0 0; }
.calc__actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.calc__actiuni .cantitate { flex: none; }
/* Mențiunea de pe paginile juridice traduse: versiunea românească e cea care
produce efecte. Se vede, dar nu strigă — e o precizare, nu un avertisment. */
.mentiune-traducere {
margin: 0 0 var(--s-1);
padding: var(--s-3) var(--s-2);
border-inline-start: 3px solid var(--acc);
background: var(--surface-hi);
color: var(--ink-muted);
font-size: var(--t--1);
line-height: 1.5;
}
.mentiune-traducere a { color: var(--acc); font-weight: 600; }
/* ==========================================================================
Despre noi
========================================================================== */
/**
* Listele din textul clientului își poartă propriul semn la început — bifă,
* romb — deci punctul implicit al listei ar fi al doilea semn pe același rând.
*
* Rândul NU e o grilă, deși așa a fost prima dată. Într-un container de grilă
* fiecare copil devine o celulă separată, iar rândurile au forma
* `semn titlu — text lung`: adică trei elemente, nu două.
* Titlul ajungea într-o celulă, textul în următoarea, iar textul primea o
* coloană îngustă în care se rupea câte un cuvânt pe rând.
*
* Aici semnul e scos din flux și așezat în retragerea rândului, deci restul —
* titlu și explicație — rămâne un singur șir de text, care curge normal.
*/
.lista-semne { list-style: none; padding-inline-start: 0; display: grid; gap: var(--s-3); }
.lista-semne li {
position: relative;
padding-inline-start: 1.9rem;
}
.lista-semne li > span[aria-hidden] {
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
}
.despre-final {
text-align: center;
font-size: var(--t-1);
margin-block-start: var(--s-6);
}
/* Pastila de nuanță din calculator. Pentru o ușă în două tonuri se împarte în
două pe diagonală: e singurul mod în care se vede din start că are două
culori, fără să scrie asta nicăieri. */
.calc-pastila {
inline-size: 0.95rem;
block-size: 0.95rem;
border-radius: 50%;
border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
flex: none;
}
.calc__chips--culori label span {
display: inline-flex;
align-items: center;
gap: var(--s-2);
}
/* Harta din pagina de contact. Raportul e fixat, ca locul ei să fie rezervat
înainte să se încarce cadrul — altfel pagina ar sări când sosește harta. */
/* Harta ține toată lățimea grilei de contact, sub amândouă chenarele, și stă
centrată. `1 / -1` merge și pe o coloană, deci nu are nevoie de o regulă
separată pentru telefon. Lățimea e plafonată ca pe ecrane foarte late să nu
se întindă într-o panglică joasă. */
.harta {
grid-column: 1 / -1;
inline-size: 100%;
max-inline-size: 56rem;
margin-inline: auto;
margin-block-start: var(--s-4);
border: 1px solid var(--line-strong);
border-radius: var(--r-3);
overflow: hidden;
background: var(--bg-sunken);
}
.harta iframe {
display: block;
inline-size: 100%;
aspect-ratio: 16 / 10;
border: 0;
}
@media (max-width: 560px) { .harta iframe { aspect-ratio: 4 / 3; } }
/* Cartela de ofertă își poartă fundalul portocaliu cu ea, deci are nevoie de
aceeași cerneală ca banda portocalie — indiferent în ce secțiune stă. Textul
ei secundar dădea 4,34, iar numărul portocaliu 3,91. */
.oferta {
--ink-muted: #21272b;
--ink-faint: #21272b;
--orange-txt: #5f3104;
color: var(--ink);
}
.oferta :is(p, span, small, b) { color: inherit; }
.oferta .oferta__nota { color: var(--ink-muted); }
/* Subsolul poartă același portocaliu ca banda, deci are nevoie de aceeași
cerneală. Cu tokenii impliciți, calibrați pentru fondul deschis al paginii,
textul lui dădea 4,34 — sub prag. `color` se declară explicit, altfel rămâne
cel moștenit de la `body` și redefinirea tokenului n-ar avea efect. */
.ftr {
--ink-muted: #21272b;
--ink-faint: #21272b;
--orange-txt: #5f3104;
color: var(--ink);
}
.ftr :is(p, li, small, b, span, h2) { color: inherit; }
.ftr a:not(.fb-btn):not(.btn) { color: var(--ink); }
/* Butoanele sociale din subsol au fond alb propriu, deci își păstrează verdele. */
.ftr .fb-btn { color: var(--acc); }
/* În subsol, „.ro” din numele mărcii era verde pe portocaliu — 3,55. Verdele e
accentul paginii pe fond deschis; aici nu are contrast, deci ia cerneala
subsolului. Marca se citește la fel, doar fără sublinierea de culoare. */
.ftr .brand__name b span { color: var(--ink); }
/* ==========================================================================
20. Telefon — dimensionare și ținte de atins
==========================================================================
Blocul stă la FINALUL fișierului dinadins. Două motive:
· regulile care dimensionează titlul eroului sunt scrise pe înălțimea
ferestrei (`max-height`), iar pe telefon trebuie să câștige lățimea;
· mărimea câmpurilor e fixată pe clase (`.calc__intrare input`), deci o
regulă pe `input` gol din base.css n-avea cum s-o bată.
La specificitate egală decide ordinea, deci ce e scris aici se aplică peste. */
@media (max-width: 640px) {
/* --- Titlul eroului ---------------------------------------------------
Se dimensiona după ÎNĂLȚIMEA ferestrei — `6.4vh`, din regula de la
`max-height: 860px`. Pe un telefon de 375 × 812 asta dădea 52 px: corect
ca proporție pe un laptop lat, dar pe 375 px de lățime titlul se rupea în
opt rânduri și ocupa 53 % din ecran, împingând tot restul sub pliu.
Pe telefon mărimea se ia din LĂȚIME, singura dimensiune care spune câte
litere încap pe un rând: la 375 px iese 31 px și titlul intră în patru
rânduri, adică 16 % din ecran. */
.hero__title { font-size: clamp(1.75rem, 8.4vw, 2.5rem); }
/* --- Câmpuri de introducere -------------------------------------------
Nu coboară sub 16 px. Nu e o chestiune de lizibilitate, ci de comportament:
Safari pe iOS MĂREȘTE pagina când se atinge un câmp scris mai mic de
16 px, iar utilizatorul rămâne pe urmă cu pagina mărită. `--t-0` dă
15,08 px la 375 px lățime, adică exact sub prag — se vedea la calculatorul
de preț, unde se introduc două cote una după alta. */
.calc__intrare input,
.cantitate input,
input, textarea, select { font-size: max(16px, var(--t-0)); }
/* --- Ținte de atins ---------------------------------------------------
Degetul are nevoie de mai mult decât cursorul: 44 px e pragul de la care
o apăsare nimerește din prima. Butoanele veneau la 34–36 px, iar câmpul de
cantitate la 26. */
.btn { min-block-size: 2.75rem; padding-block: 0.6rem; }
.icon-btn { inline-size: 2.75rem; block-size: 2.75rem; }
.cantitate { min-block-size: 2.75rem; }
.cantitate input { min-block-size: 2.5rem; }
/* --- Emblema din fundal ------------------------------------------------
Dala are 560 px. Pe un ecran de 375 nu încape: se vedea două treimi din
ea, deci un camion întreg pe un rând și unul tăiat pe următorul, cu
spațiile dintre ele nepotrivite de la un rând la altul — se citea ca o
imagine decupată prost, nu ca un tipar.
Legată de LĂȚIMEA ecranului, dala se așază exact o dată pe rând, oricât
de lat ar fi telefonul: cele două camioane cad la o treime și la două
treimi pe diagonală, iar niciunul nu mai e tăiat de marginea ecranului.
Camionul iese la circa 84 px pe un ecran de 375 — destul cât să se vadă
ce e, fără să concureze cu textul.
Se rescriu toate trei straturile fiindcă `background-size` nu poate fi
schimbat doar pentru unul din ele; primul și al treilea rămân `auto`, ca
în base.css. */
body { background-size: auto, 100vw 100vw, auto; }
/* --- Bara de identificare ---------------------------------------------
Aici a stat o grilă care muta comutatorul de limbă pe rândul numărului de
ordine și alinia bara la stânga, ca telefonul și limbile să poată fi
ridicate la 40 px fără ca bara să crească.
Scoasă la cerere: schimba aranjarea. Bara se întoarce la trei rânduri
centrate, cum era — numele și CUI-ul, numărul de ordine și telefonul,
apoi limbile. Consecința e că cele două legături rămân la înălțimea
textului, sub pragul de 44 px al unei ținte de deget; e o alegere de
aspect, luată în cunoștință de cauză. Butoanele propriu-zise, coșul și
câmpurile de mai sus rămân la 44 px. */
}