/* ============================================================================ 00-scala.css · scara de tipografie, spatiere, raze si interlinie. ARH-SEC-3 SCARA-STRICTA DE CE EXISTA ------------ Masurat pe `mds-design.css` + `assets/css/sections/*.css`, cu comentariile scoase (R5), pragurile de query si latimile de linie excluse: font-size 30 valori distincte (10,5 … 66px) padding 29 margin 23 gap 23 ───────────────────────────────────── 46 valori distincte pe patru proprietati de ritm Sase trepte de font intre 11 si 13,5px acopera 55% din apariții. Diferenta dintre 12 si 12,5px nu se vede; ce se vede e ca fiecare secțiune noua alege alta, fiindca nu are de unde sa ia. TREI REGULI DE PROIECTARE ------------------------- 1. TITLURILE NU SE ATING. `--f-h1`, `--f-h2`, `--f-h3` si titlul de card poarta EXACT valorile de azi ale temei, inclusiv treptele de desktop. Sunt tokeni ca sa nu mai fie rescrise, nu ca sa fie schimbate. 2. CORPUL TRECE PE MARIMI STANDARD: 12 · 13 · 15 · 17. Sunt marimile folosite de platformele mari pentru text dens: X are corpul la 15px si secundarul la 13px; Facebook 15 / 13 / 12; YouTube 14 / 12; GitHub 14 / 12. Nici mici, nici mari, si — important — DISTANTATE: intre doua trepte alaturate se vede diferenta, deci ierarhia se citeste. ⚠ Costul, spus pe fata: corpul temei e azi 15,5px, iar `.band p` 14,5px. O secțiune noua la 15px va fi cu jumatate de pixel diferita de una veche de langa ea. Sub pragul vizibil, dar diferenta exista. Un fisier vechi se aliniaza doar cand e atins pentru altceva, cu preview. 3. CARDUL NU SE REINVENTEAZA. Se foloseste `.cd` / `.cd__top` / `.cd__ttl` / `.cd__body` din temă, cu spatierile lui. Tokenii `--cd-*` de mai jos sunt OGLINDA lui `mds-design.css:716-727`, copiati valoare cu valoare, pentru cazul in care o secțiune are nevoie de aceeasi suprafata altundeva. Daca te trezesti scriind un card nou, opreste-te: foloseste `.cd`. CE FACE ACEST FISIER -------------------- NIMIC, azi. Declara EXCLUSIV variabile; nicio regula existenta nu le citeste. Devine activ abia cand o secțiune le foloseste. Garda verifica exact asta: nicio declarație care picteaza. ⚠ TREPTELE RESPONSIVE SE RESCRIU SINGURE, in acelasi container query pe care il foloseste tema. O secțiune scrie `font-size:var(--f-h3)` O SINGURA DATA si primeste 23px pe mobil, 25px pe desktop. Zero media query in CSS-ul de secțiune. ============================================================================ */ .mdsx{ /* ── TITLURI — valorile de azi ale temei, NESCHIMBATE ───────────────────── token valoare ancora --f-h1 36 → 35 → 38 .mdsx .ttl (design:179,461,514) --f-h2 26 antetul de grup (valoare-justa:46) --f-h3 23 → 25 .mdsx .band h3 / .ch__t (design:191,408,486) --f-cd-ttl 20 .mdsx .cd__ttl (design:721) --f-cifra 26 → 31 .mdsx .big b (design:198,493) */ --f-h1: 36px; --f-h2: 26px; --f-h3: 23px; --f-cd-ttl: 20px; --f-cifra: 26px; /* ── CORP — patru trepte standard, distantate ───────────────────────────── --f-lead 17 fraza introductiva a secțiunii (`.dek`) --f-corp 15 textul curent (X, Facebook: 15) --f-mic 13 secundar, etichete (X secondary: 13) --f-fin 12 marunt: sursa, nota (Facebook, YouTube: 12) */ --f-lead: 17px; --f-corp: 15px; --f-mic: 13px; --f-fin: 12px; /* Marimea disclaimerului de sub verdict (`.vdisc`, verdict.css:281). E o treapta separata fiindca `.vdisc` o are deja si nu se schimba: nota de la Date cheie vine LA ea, nu invers. */ --f-nota: 12.5px; /* Cifra dintr-un card mic — `.vj__m s` (valoare-justa.css:151). */ --f-nr: 19px; /* ── INTERLINIE ──────────────────────────────────────────────────────────── Din 17 valori masurate rămân trei; restul erau in ±0,05 una de alta. */ --lh-titlu: 1.15; /* .mdsx .ch__t desktop (design:486) */ --lh-mediu: 1.4; /* etichete pe doua rânduri */ --lh-corp: 1.6; /* .mdsx__in (design:169) */ /* ── SPATIERE ────────────────────────────────────────────────────────────── Pasi de 4px. Cele mai frecvente valori din temă (18 si 22px) nu sunt pe grila de 4; nu se rotunjesc, ci raman ca tokeni de ROL mai jos, fiindca sunt structurale si un element nou trebuie sa se alinieze cu ele. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* ── SPATIERE DE ROL (structurala, ancorata) ─────────────────────────────── --s-ritm 22 distanta standard intre blocuri: `.cd` margin-top si `.cd-row` gap (design:717,787) --s-band-y 28 paddingul vertical al benzii (design:186) --s-band-x 20 paddingul orizontal al benzii (design:186) --s-gutter 48 gutiera grilei de banda (design:472) --s-col 240 coloana lipicioasa (design:472) --s-min-card 150 latimea minima a unui card mic in `autogrid`; la 150px incap doua pe un telefon de 390px, ca acum */ --s-ritm: 22px; --s-band-y: 28px; --s-band-x: 20px; --s-gutter: 48px; --s-col: 240px; --s-min-card: 150px; /* Latimea liniei de accent a capitolului, `.mdsx .band::before` (mds-design.css:187). 56px pe mobil, `--s-col` (240px) pe desktop. */ --s-accent: 56px; /* Paddingul orizontal al suprafetei de card pe desktop: `.mdsx .cd__top` si `.mdsx .cd__body` (mds-design.css:726-727). E nevoie de el ca valoare, nu doar ca padding, pentru liniile care trebuie sa iasa pana la marginea cardului. */ --s-cd-x: 30px; /* ── CARDUL — OGLINDA lui `mds-design.css:716-727`, valoare cu valoare ───── ⚠ Nu sunt valori alese. Sunt copiate. Daca tema se schimba, se schimba si aici, in acelasi lot, cu preview. Cardul se face cu `.cd`, nu cu ele. */ --cd-bg: #121214; /* design:718 */ --cd-line: rgba(255,255,255,.07); /* design:718 */ --cd-r: 16px; /* design:718 */ --cd-p: 20px 18px 18px; /* design:717 */ --cd-top-p: 0 0 15px; /* design:720 */ --cd-body-p: 16px 0 0; /* design:722 */ /* ── RAZE ────────────────────────────────────────────────────────────────── --r-pill 99 .mdsx .chip (design:176) --r-card 16 .mdsx .cd (design:718) --r-el 12 .mdsx .vj__m (valoare-justa:149) --r-sm 8 */ --r-pill: 99px; --r-card: 16px; --r-el: 12px; --r-sm: 8px; } /* ── DESKTOP ────────────────────────────────────────────────────────────────── Acelasi container query pe care il foloseste tema (`@container mdsx`, mds-design.css:453). Masoara latimea COLOANEI, nu a ferestrei. */ @container mdsx (min-width:900px){ .mdsx{ --f-h1: 35px; /* .mdsx .ttl (design:461) */ --f-h3: 25px; /* .mdsx .ch__t (design:486) */ --f-cifra: 31px; /* .mdsx .big b (design:493) */ --f-lead: 19px; /* .mdsx .dek (design:480) */ --s-band-y: 40px; /* .mdsx .band (design:472) */ --s-band-x: 0px; /* .mdsx .band (design:472) */ --cd-p: 24px 0 22px; /* .mdsx .cd (design:725) */ --cd-top-p: 0 30px 16px; /* .mdsx .cd__top (design:726) */ --cd-body-p: 18px 30px 0; /* .mdsx .cd__body (design:727) */ /* Un card mic poate fi mai lat pe desktop: patru pe o coloana de 1000px in loc de sase inguste. */ --s-min-card: 210px; } } @container mdsx (min-width:1240px){ .mdsx{ --f-h1: 38px; /* .mdsx .ttl la 1240 (design:514) */ } }