/* ========================================================================== Auto Moto Office — stil.css (T1c, 18 sep 2026) Layout, componente, responsive 360–1440, mișcare, print. Toate culorile/spațiile/razele vin din tokens.css (--amo-*) — nicio valoare nouă de culoare/spațiu nu se scrie aici direct. Numerele care NU sunt deja în design/DESIGN.md sunt explicate lângă ele, cu „cine l-a ales și de ce". ========================================================================== */ /* ------------------------------------------------------------------ reset -- */ /* Reset minimal, nu o librărie: doar ce ne mușcă în layout-ul ăsta. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--amo-fundal); color: var(--amo-text); font-family: var(--amo-font-text); font-size: var(--amo-t-baza); font-weight: var(--amo-greutate-text); line-height: var(--amo-lh-text); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } svg { overflow: visible; } h1, h2, h3 { font-family: var(--amo-font-titlu); font-weight: 600; line-height: var(--amo-lh-titlu); letter-spacing: var(--amo-spatiere-titlu); color: var(--amo-text); margin: 0 0 var(--amo-sp-3); } h1 { font-size: var(--amo-t-h1); line-height: var(--amo-lh-afis); } h2 { font-size: var(--amo-t-h2); } h3 { font-size: var(--amo-t-h3); } p { margin: 0 0 var(--amo-sp-4); max-width: var(--amo-lat-rand); } ul, ol { margin: 0; padding: 0; } label { font-weight: 600; } a { color: var(--amo-bleumarin); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { color: var(--amo-bleumarin-adanc); } /* Focus vizibil peste tot (DESIGN.md §8): inel 3px, decalaj 2px, niciodată `outline:none` fără înlocuitor. `:focus-visible` ca să nu apară la un simplu clic de mouse. */ :focus-visible { outline: var(--amo-inel) solid var(--amo-inel-culoare); outline-offset: var(--amo-inel-decalaj); border-radius: var(--amo-raza-mic); } .subsol :focus-visible { outline-color: var(--amo-inel-culoare-pe-inchis); } /* Ordinea DOM = ordinea vizuală (§8); linkul „Sari la conținut" e primul element focalizabil, invizibil până primește focus. */ .sari { position: absolute; top: -100px; left: var(--amo-sp-4); z-index: 100; background: var(--amo-suprafata); color: var(--amo-bleumarin); padding: var(--amo-sp-3) var(--amo-sp-4); border-radius: var(--amo-raza); box-shadow: var(--amo-umbra); transition: top var(--amo-durata) var(--amo-curba); } .sari:focus { top: var(--amo-sp-4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------- containere -- */ /* O singură clasă de container lat + una îngustă (DESIGN.md §4). Aplicate direct pe `
`/`
` prin selector de tip, ca fiecare pagină de conținut să nu trebuiască o clasă de wrapper suplimentară pe care T2 ar uita s-o adauge. `main#continut > p` (orice paragraf, nu doar `.lead`/`.verificare-info`) și `main#continut > .firimituri` intră în ACEEAȘI regulă (polish vizual, punctele 5 și 6, 18 sep 2026) — înainte `.firimituri` avea DOAR `padding-inline`, fără `max-width` + `margin-inline: auto`, deci breadcrumb-ul pornea din marginea viewportului (x≈32px pe desktop) în timp ce restul conținutului pornea din marginea containerului de 1152px centrat (x≈96px) — vizibil nealiniate. Similar, un `

` fără clasă direct sub `

` (ex. paragraful de după caseta „Informații verificate…" din acte-necesare-inmatriculare- sibiu.html) nu primea niciun gutter pe mobil. Regula corectă e „orice paragraf direct sub main", nu o listă de clase enumerate una câte una la fiecare pagină nouă. */ main#continut > section, main#continut > .pagina-404, main#continut > .doc, main#continut > h1, main#continut > p, main#continut > .firimituri { max-width: var(--amo-lat-max); margin-inline: auto; padding-inline: var(--amo-gutter); } /* ---------------------------------------------- pagina de document (L5, 19 sep 2026) -- */ /* O SINGURĂ regulă de lățime pentru textul curgător al paginilor interioare (Înmatriculări, Acte necesare, Asigurări, Firme și flote, Despre noi, Confidențialitate, Cookies — lista exactă e `PAGINI_DOCUMENT` în build/genereaza.py, care emite wrapperul `.doc`). DEFECTUL reparat, măsurat la 1280 px pe versiunea dinainte: `p.lead` direct în `
` pornea de la x=64 (marginea containerului lat, nu a grilei), `p` dintr-o secțiune de la 96 dar se oprea la 624 (plafonat de `p { max-width: 66ch }`), iar `ul`, `li` și `p.sursa-oficiala` din ACEEAȘI secțiune mergeau până la 1184 — paragraful pe jumătate de pagină, lista de sub el pe toată. Cauza: plafonul de lizibilitate stătea pe `p`, nu pe o coloană. Acum îl poartă coloana (`.doc__text`), iar `p` îl pierde înăuntru (vezi mai jos), ca să existe o singură autoritate pe lățime. În dreapta coloanei, pe desktop, stă coloana de ajutor — nu un gol de 500 px. */ .doc__text { max-width: var(--amo-lat-citire); } /* Înăuntrul coloanei, `p` NU-și mai pune propriul plafon: coloana e singura autoritate, deci un paragraf, o listă și o casetă de sursă au exact aceeași lățime maximă. */ .doc__text p { max-width: none; } @media (min-width: 960px) { /* 960 — același prag ca antetul, grila paginii de contact și footerul; e și lățimea la care coloana de lectură (528) + distanța minimă (48) + coloana laterală (320) fac exact conținutul disponibil (896 px). `space-between` împinge coloana laterală pe marginea din dreapta a grilei paginii: marginea ei se aliniază cu CTA-ul din antet, cu ultima coloană din footer și cu firul Ariadnei, în loc să lase un gol nealiniat la dreapta ei. */ main#continut > .doc { display: grid; grid-template-columns: minmax(0, var(--amo-lat-citire)) var(--amo-lat-lateral); column-gap: var(--amo-sp-7); /* 48px = distanța MINIMĂ; space-between o poate mări */ justify-content: space-between; align-items: start; } } /* Pagina 404 primește ACEEAȘI coloană de lectură ca paginile de document, dar fără coloană laterală (o pagină de eroare are nevoie de ieșiri, nu de un al doilea panou de contact). REPARAȚIE L5b, 19 sep 2026 — incoerență lăsată de oprirea la jumătate a lotului precedent: `.pagina-404` primise `max-width: 66ch !important`, dar continua să moștenească `margin-inline: auto` de la regula de container de mai sus, deci blocul întreg era CENTRAT pe pagină. Măsurat la 1280: textul paginii 404 pornea de la x=408, în timp ce pe fiecare altă pagină a site-ului textul pornește de la x=96 (marginea logo-ului). În plus, `.pagina-404` nu mai era `text-align: center`, dar simbolul de deasupra rămăsese `margin: 0 auto` — text la stânga, simbol la mijloc, bloc centrat: trei alinieri pe aceeași pagină. Aleg STÂNGA peste tot, coerent cu restul site-ului: blocul rămâne pe grila paginii (fără `!important` și fără să atingă centrarea containerului), iar plafonul de lizibilitate trece pe copiii lui — exact mecanismul folosit de `.doc__text`, nu un al doilea. */ .pagina-404__coloana { max-width: var(--amo-lat-citire); } /* HERO (L3, 19 sep 2026 — F12). Regula de dinainte îl restrângea pe desktop la 704px cu `padding-inline: 0`, iar rezultatul era exact defectul din audit: textul atingea marginea casetei rotunjite, iar caseta pornea de la alt x (288px la 1280) decât logo-ul din antet și decât titlul „Cu ce te ajutăm" (96px). Acum hero-ul NU mai are nicio regulă proprie de container: intră în aceeași regulă „main#continut > section" ca toate celelalte secțiuni (max-width 1152px, padding-inline = gutter), deci prima literă din H1 stă exact pe verticala la care încep toate titlurile paginii. Colțurile rotunjite rămân, dar doar de la 900px în sus — pe telefon banda ocupă toată lățimea ecranului, unde o rază ar arăta ca un card tăiat. */ @media (min-width: 900px) { main#continut > section.hero { border-radius: var(--amo-raza-mare); /* Colțurile de sus rotunjite erau LIPITE de linia antetului — arăta ca un card tăiat, nu ca o casetă. Două ieșiri posibile: bandă întreagă fără colțuri sus, sau un pic de aer deasupra. Aleg aerul: banda întreagă ar fi mutat hero-ul pe altă lățime decât restul paginii, iar 24px (`--amo-sp-5`, treapta obișnuită dintre un card și vecinul lui) e destul cât să se vadă că e o casetă pe pagină, nu o prelungire a antetului. Doar de la 900px în sus, adică exact acolo unde caseta are colțuri rotunjite. */ margin-top: var(--amo-sp-5); } } main#continut { display: block; } /* Ritmul vertical între secțiuni (§4): 48px → 88px, fluid. */ main#continut > * + * { margin-top: var(--amo-sectiune); } main#continut > .firimituri + * { margin-top: var(--amo-sp-6); } /* Golul de sub CTA-urile hero pe desktop (L5b, 19 sep 2026 — măsurat, apoi tăiat). Ce am măsurat la 1280, pe versiunea dinainte: banda hero are 88px de padding sus și 88 jos (`--amo-sectiune`); butonul „Discută cu noi" se termină la y=477, banda la y=576 (99px sub el — cei 11px în plus vin din `align-items:center`, fiindcă panoul „Ne găsești" e cu 23px mai înalt decât coloana de text). Atât e echilibrat: optic, golul de deasupra titlului e chiar puțin mai mare. Deci NU padding-ul benzii e problema. Problema era că peste cei 88px de padding ai benzii se adăuga încă un `--amo-sectiune` de ritm până la secțiunea următoare: de la baza butoanelor până la titlul „Cu ce te ajutăm" ieșeau 195px de fundal aproape gol pe un ecran de 900px înălțime. O bandă cu padding propriu își aduce singură ritmul; ce urmează după ea are nevoie doar de o treaptă de separare, nu de încă un ritm întreg. 32px (`--amo-sp-6`) e treapta „intro → conținut" din §4, deci 88 (interior) + 32 (exterior) = 120px, tot peste ritmul obișnuit de 88 dintre două secțiuni fără fundal. */ main#continut > section.hero + * { margin-top: var(--amo-sp-6); } /* Ritmul DIN interiorul unei secțiuni (§4 DESIGN.md): titlu → 12px → intro → 32px → conținut. Fără regulile astea, „main#continut > * + *" punea --amo-sectiune (88px pe desktop) și între H1 și propriul lui paragraf de introducere: pe Contact și pe Despre, titlul plutea singur la aproape un centimetru de fraza lui (F12, „distanțe foarte mari între titlu, introducere și conținut"). Spațiul alb trebuie să grupeze, nu să despartă. */ main#continut > h1 + p { margin-top: var(--amo-sp-3); } /* 12px: intro lipit de titlul lui */ main#continut > p.lead + * { margin-top: var(--amo-sp-6); } /* 32px: intro → conținut */ /* Aceeași scară în interiorul secțiunilor. `h2` are deja `margin-bottom: 12px`; marginile adiacente se contopesc la valoarea mai mare, deci 32px aici înseamnă fix 32px, nu 44. Două cazuri, amândouă ancorate în `h2` — dinadins: „intro" înseamnă paragraful DE DUPĂ titlu, nu orice paragraf din secțiune. Prima variantă (`h2 + p + …`) prinde relația titlu → intro → conținut; a doua, secțiunile fără intro, unde titlul dă direct în conținut. Un selector mai lax (`p + :not(p)`, prima încercare) punea 32px și între eticheta „Program" și lista orelor de pe pagina de Contact — verificat într-o captură: ora de deschidere se desprinsese de propriul titlu. */ main#continut > section > h2 + :not(p), main#continut > section > h2 + p + :not(p) { margin-top: var(--amo-sp-6); } /* ACELAȘI ritm, o treaptă mai jos în arbore, pentru paginile de document: acolo secțiunile nu mai sunt copii direcți ai `
`, ci ai coloanei de lectură `.doc__text`, deci regulile de mai sus (ancorate în `main#continut >`) nu le mai prind. Nu e un al doilea ritm — sunt aceleași valori din §4, scrise pentru celălalt părinte. */ .doc__text > * + * { margin-top: var(--amo-sectiune); } .doc__text > h1 + p { margin-top: var(--amo-sp-3); } /* 12px: intro lipit de titlul lui */ /* Două paragrafe consecutive direct în coloană (titlu → lead → „verificat la…" → frază de orientare) se despart prin `margin-bottom`-ul lor de 16px, nu prin ritmul de 88px dintre secțiuni — altfel caseta „Informații verificate la…" plutea singură la un centimetru de fraza de deasupra și de cea de dedesubt (vizibil pe ghidul de acte, v1). */ .doc__text > p + p { margin-top: 0; } .doc__text > p.lead + * { margin-top: var(--amo-sp-6); } /* 32px: intro → conținut */ .doc__text > section > h2 + :not(p), .doc__text > section > h2 + p + :not(p) { margin-top: var(--amo-sp-6); } /* Blocurile de ORIENTARE din capul paginilor de document (L5b): cuprinsul ghidului și rândul de acțiuni al firmei. Nu sunt secțiuni de conținut, ci antetul util al paginii — titlu, frază de orientare, data verificării, „unde vrei să ajungi" — deci se leagă între ele cu 32px („intro → conținut", §4), nu cu cei 88px de ritm dintre două secțiuni. Cu 88px, cuprinsul pica sub linia de plutire pe telefon exact la pagina unde el e reparația (F09). */ .doc__text > .cuprins { margin-top: var(--amo-sp-6); } .doc__text > .cuprins + p { margin-top: var(--amo-sp-6); } .doc__text > p.verificare-info + p.actiuni-pagina { margin-top: var(--amo-sp-6); } /* Al doilea rând de acțiuni, de sub grila de cazuri — altfel se lipea de ultimul card (`p` are doar `margin-bottom`, iar regula de ritm de mai sus prinde numai copiii direcți ai coloanei, nu și ce e în interiorul unei secțiuni). */ .cazuri__grid + .actiuni-pagina { margin-top: var(--amo-sp-6); } /* Listele de proză din coloana de lectură (`
    `/`
      ` FĂRĂ clasă — cele cu clasă, `.linkuri-utile`, `.colaboratori__grid`, `.program`, `.nap`, își au deja stilul lor). Resetul global le lasă `padding: 0`, deci marcatorii cădeau ÎN AFARA coloanei, la stânga textului: singurele elemente din pagină care nu respectau marginea grilei. 24px (`--amo-sp-5`) e cât ține un marcator plus aerul până la text. Marginea de jos le desparte de paragraful următor, care altfel se lipea (paragrafele au doar `margin-bottom`). */ .doc__text ul:not([class]), .doc__text ol:not([class]) { padding-left: var(--amo-sp-5); margin-bottom: var(--amo-sp-4); } /* Doar listele de proză — nu `.linkuri-utile`, nu grila de colaboratori (unde un `margin-top` pe elementele de grilă s-ar aduna peste `gap`). */ .doc__text ul:not([class]) > li + li, .doc__text ol:not([class]) > li + li { margin-top: var(--amo-sp-2); } /* 8px: rândurile lungi de acte au nevoie de aer */ /* Aer înainte de footer: ultima secțiune se lipea de banda bleumarin (vizibil mai ales pe Contact, unde butonul „Trimite" atingea marginea footerului). Aceeași valoare ca ritmul dintre secțiuni — footerul e doar încă o secțiune, vizual. */ main#continut { padding-bottom: var(--amo-sectiune); } /* ---------------------------------------------------- ancore sub antetul lipicios -- */ /* Antetul e `position: sticky; top: 0`, deci o ancoră (`/…#transcriere`) ateriza EXACT sub el: titlul cazului rămânea ascuns, omul vedea a doua linie de text și nu știa unde a ajuns. `scroll-margin-top` = înălțimea antetului + o treaptă de aer (24px), ca titlul țintă să se vadă întreg, cu puțin spațiu deasupra. Înălțimea NU e un număr orfan: `--amo-h-antet` e ACEEAȘI variabilă pe care o citește `.antet__interior { min-height }` mai jos — o singură sursă, în rem, deci crește odată cu antetul la text mărit (WCAG 1.4.4). Doar în `
      `: id-urile din antet/footer nu sunt ținte de ancoră. */ main#continut, main#continut [id] { scroll-margin-top: calc(var(--amo-h-antet) + var(--amo-sp-5)); } /* ------------------------------------------- coloana de ajutor (L5, 19 sep 2026) -- */ /* Randată de build/genereaza.py (`randeaza_ajutor_lateral`) pe paginile de document. Sub 960px NU se afișează: apelul direct e deja în antetul lipicios (`.antet__tel`, vizibil exact pe intervalul ăsta), programul și adresa sunt în footer pe fiecare pagină, iar fiecare pagină comercială se încheie cu `.incheiere`. Un al patrulea bloc de contact la coada unui ecran de telefon ar fi zgomot, nu ajutor. */ @media (max-width: 959.98px) { .ajutor { display: none; } } @media (min-width: 960px) { .ajutor { position: sticky; /* Aceeași rezervă ca la ancore: panoul se oprește sub antetul lipicios, nu în spatele lui. */ top: calc(var(--amo-h-antet) + var(--amo-sp-5)); background: var(--amo-bleumarin-slab); /* aceeași suprafață ca panoul din hero-ul de pe Acasă, §2 */ border-radius: var(--amo-raza-mare); padding: var(--amo-sp-5); } } .ajutor__titlu { margin: 0 0 var(--amo-sp-3); font-family: var(--amo-font-text); font-size: var(--amo-t-baza); font-weight: 600; /* Titlu de panou, nu titlu de secțiune: rămâne `

      ` în DOM (intră corect în ierarhia paginii, §8), dar la mărimea textului de corp — un serif de 32px într-un panou lateral ar concura cu titlurile reale ale paginii. Fără MAJUSCULE și fără letter-spacing (§7, 4). */ } .ajutor__whatsapp, .ajutor__program, .ajutor__cta { margin: var(--amo-sp-3) 0 0; max-width: none; } .ajutor__program { font-size: var(--amo-t-mic); color: var(--amo-text-secundar); } /* Butonul secundar pe `--amo-bleumarin-slab`: hover-ul standard e chiar fundalul panoului, deci ar fi invizibil — albul (suprafața de card) dă semnalul, la fel ca în `.incheiere`. */ .ajutor .cta--secundar { width: 100%; } .ajutor .cta--secundar:hover { background: var(--amo-suprafata); } /* ------------------------------------------------------------------- antet -- */ .antet { position: sticky; top: 0; /* 20: sub orice suprapunere modală viitoare, deasupra restului conținutului — ales aici, T1c, fiindcă nu exista niciun z-index în sistem înainte de antetul lipicios. */ z-index: 20; background: var(--amo-suprafata); border-bottom: 1px solid var(--amo-linie); } /* Umbra la derulare (§5.1 DESIGN.md, polish vizual punctul 8, 18 sep 2026): clasa e comutată din assets/js/strat.js, pe scroll. Apare/dispare INSTANT — fără `transition` — ca să nu fie nevoie de nicio excepție pentru `prefers-reduced-motion` (§6: nimic de oprit înseamnă că regula globală din tokens.css n-are ce anula aici). */ .antet--umbra { box-shadow: var(--amo-umbra-mica); } .antet__interior { max-width: var(--amo-lat-max); margin-inline: auto; padding-inline: var(--amo-gutter); /* DESIGN.md §5.1, prin `--amo-h-antet` din tokens.css (4rem = 64px; 4.75rem = 76px de la 960px în sus). Variabila, nu numărul: aceeași valoare o citesc `scroll-margin-top`-ul ancorelor și poziția lipicioasă a coloanei de ajutor — dacă antetul se schimbă, se mută toate odată (L5, 19 sep 2026). */ min-height: var(--amo-h-antet); /* B4: 64px NU mai e sursa — era o CONSTANTĂ care presupunea antetul mereu la înălțimea de bază; la text mărit 125-200% (WCAG 1.4.4) rândul de sus măsoară mai mult (112px la 200%), panoul ieșea sub ecran, tăiat (linkul „Contact" ajungea doar parțial vizibil). Sursa REALĂ e acum `assets/js/strat.js` (`actualizeazaInaltimeAntetMobil`, lângă `deschide()`): măsoară `.antet__interior` chiar înainte de a deschide panoul (moment în care `.antet__nav-lista` e ÎNCĂ `display:none`, deci elementul arată STRICT rândul de sus) și scrie valoarea ca stil INLINE pe acest element — care, fiind pe același element/aceeași proprietate, câștigă în fața declarației de mai jos. 64px rămâne DOAR ca plasă pentru fereastra dintre randare și primul `deschide()` din strat.js (sau dacă JS nu rulează deloc — caz în care regula de mai jos, condiționată de `.js`, oricum nu se aplică, vezi C411). */ --amo-h-antet-mobil: var(--amo-h-antet); display: flex; align-items: center; flex-wrap: wrap; /* Distanța pe orizontală scade la 8px sub 960px (L3, 19 sep 2026 — F12, „antetul mobil pe două rânduri"). Măsurat: la 360px lățime rămân 326px utili, iar logo(196) + 8 + telefon(44) + 8 + buton(44) = 300px încap pe UN rând; cu cei 24px de dinainte ieșeau 332px și antetul se rupea în două rânduri de ~96px. Pe desktop distanța rămâne 16px — vezi mai jos de ce nu mai sunt 24. */ gap: var(--amo-sp-3) var(--amo-sp-2); } @media (min-width: 960px) { /* 960, nu 900 (DESIGN.md §5.1 spunea 900): meniul are acum șase intrări, nu cinci — „Acte necesare" a fost adăugat (F09). Măsurat pe pagina generată: cele șase linkuri ocupă 471px de text; cu distanța minimă de 16px între ele fac 551px, iar logo(228) + 16 + 551 + 16 + telefon(44) = 855px. La 900px de viewport rămân doar 836px utili, deci navigația orizontală NU încape și antetul s-ar rupe în două rânduri pe desktop (verificat: la 900–1140px v1 chiar se rupea). 960 e pragul de la care încape, și e un număr deja folosit în foaia asta (grila pe două coloane a paginii de contact), nu unul nou. */ /* `min-height` nu se mai repetă aici: `--amo-h-antet` trece singură pe 4.75rem (76px) la ACELAȘI prag, în tokens.css (L5, 19 sep 2026) — un singur loc de schimbat. */ .antet__interior { gap: var(--amo-sp-3) var(--amo-sp-4); } /* DESIGN.md §5.1 */ } .logo { display: flex; align-items: center; margin-right: auto; } .logo img { height: 28px; /* DESIGN.md §5.1 */ width: auto; /* păstrează raportul real al SVG-ului (780,6 × 95,7) */ } @media (max-width: 599.98px) { /* Logoul la 24px — minimul din §5.1 — pe TOT intervalul de telefon, nu doar sub 360px cum era înainte (L3, 19 sep 2026). Motivul e aritmetic: la 28px lockup-ul are 228px lățime, iar 228 + 8 + 44 + 8 + 44 = 332px nu încap în cei 326px utili de la 360px de viewport — antetul s-ar rupe pe două rânduri exact pe lățimea cea mai frecventă. La 24px are 196px și rămân 26px de aer. Logoul rămâne ÎNTREG (nu se taie la simbol): numele firmei e ce trebuie reținut. */ .logo img { height: 24px; } } /* `.antet__nav` (elementul