/* ============================================================================ 00-shell.css · reparatii de shell · GRUPUL 2 Incarcat de `inc/sections/01-css-sectiuni.php` (prioritate 30, dependenta pe `mds-design`). Primul alfabetic in folder. ============================================================================ */ /* ══ 0 · FUNDATIE DE SHELL · singura regula care atinge tema ══ */ @media (max-width:920px){ .mds-asset__main{ align-self:stretch; } } /* ══ RITMUL VERTICAL AL PAGINII · doua marimi, un singur loc ════════════════ ⚠⚠ INAINTE, FIECARE FISIER ISI SCRIA CIFRA. `margin-top:56px` aparea in 17 fisiere pentru distanta dintre SECTIUNI, iar `62px` / `88px` in alte sapte pentru distanta deasupra ANTETULUI DE GRUP. Rezultatul, masurat pe pagina randata: intre sectiuni 56px peste tot, iar deasupra grupurilor 88px la sase din sapte antete si ZERO la primul - cel al grupului „Valoarea & Evaluare". Primul antet e singurul fara clasa proprie (`.xgh` simplu, 20-grup2.css:45, `margin:0`): isi lua distanta din `padding-bottom`-ul benzii de Argumente de deasupra lui, iar mutarea Argumentelor sub Sumar date i-a luat-o. De aici „intre grupuri e 0". ⚠⚠ RAPORTUL CONTA, NU CIFRA IN SINE. Pe mobil erau 56px intre sectiuni si 62px deasupra unui grup - o diferenta de 6px, adica niciuna: ochiul citea un grup nou ca pe inca o sectiune. Acum: sectiune grup raport mobil 56 → 39px 62 → 92px 1,11× → 2,36× desktop 56 → 39px 88 → 128px 1,57× → 3,28× Sectiunile scad cu exact 30%, cat s-a cerut; grupurile cresc atat cat sa se citeasca drept capitol, nu drept sectiune. ⚠ `--xsp-grup` se rescrie pe `.mdsx__in`, nu pe `.mdsx`: `.mdsx` E containerul (`mds-design.css:158`), iar `@container` stilizeaza numai DESCENDENTII lui. Variabila se mosteneste, deci efectul e acelasi. ⚠ Fiecare folosire are rezerva scrisa (`var(--xsp-sec,39px)`). Fara ea, un fisier incarcat inaintea acestuia ar fi ramas cu margine ZERO - adica exact defectul reparat aici, dar peste tot. */ .mdsx{ --xsp-sec:39px; --xsp-grup:92px; } /* ⚠ Pe desktop, spatiile scad si ele cu 10%, din acelasi motiv ca treptele de text: la zoom 90% se micsoreaza TOT, nu doar literele. Distanta dintre sectiuni 39 → 35px, deasupra grupurilor 128 → 115px. Razele cardurilor merg in aceeasi cheie: `--xr-c` 34 → 31px, `--xr-i` 22 → 20px. ⚠ `scroll-margin-top` NU se scaleaza nicaieri: el compenseaza antetul lipit al temei, care nu face parte din `.mdsx` si nu se micsoreaza. Scazut, ar fi bagat varful sectiunilor sub antet. */ @container mdsx (min-width:900px){ /* ⚠⚠ CERUT: pe desktop, spatiul DINTRE SECTIUNI cu 60% mai mare, fiindca sectiunile pareau prea apropiate. 35 × 1,6 = 56px. ⚠ Numai `--xsp-sec` creste. `--xsp-grup` (distanta deasupra unui GRUP de sectiuni) ramane 115px: era deja de trei ori cat spatiul dintre sectiuni, iar crescut in aceeasi proportie ar fi ajuns la 184px, adica un ecran de gol la fiecare grup. Raportul dintre cele doua scade de la 3,3 la 2,05, ceea ce e chiar ce se cere: sectiunile se despart, grupurile raman grupuri. Daca vrei si grupurile mai rare, se schimba aici, un singur numar. ⚠ Pe mobil ramane 39px, neatins: acolo nu s-a reclamat nimic, iar 62px pe un ecran de 390 ar fi insemnat sa derulezi prin gol. */ .mdsx__in{ --xsp-sec:56px; --xsp-grup:115px; --xr-c:31px; --xr-i:20px; } } /* ══ SCARA DE TEXT · opt trepte, un singur loc ══════════════════════════════ ⚠⚠ INAINTE ERAU 26 DE MARIMI. Masurat pe pagina randata, nu numarat in CSS: 26 la 390px si 27 la 1440px, dintre care patru se despartau cu 0,1px (30,41 · 30,36 · 30,35 · 30,31) fiindca patru formule `clamp()` diferite nimereau practic acelasi rezultat. Sapte trepte stateau in trei pixeli la capatul de jos (13,5 → 10,5), unde nimeni nu le distinge. ⚠ TREPTELE NU SUNT INVENTATE. Fiecare porneste de la marimea CEA MAI FOLOSITA din grupul ei, ca textul mult sa ramana pe loc si sa se mute putinul: 156 din 276 de clase nu se misca deloc. Rolurile, si cifrele exacte, sunt in tabelul de la declaratie, mai jos. Raporturi pe mobil: 1,20× 1,25× 1,29× 1,15× 1,12×. Ruptura de 1,29 e voita: acolo se termina titlurile si incepe textul. ⚠⚠ PODEAUA E 12px, si de-aia sunt OPT trepte, nu noua. Prima propunere avea si 11,5 si 10,5; sub 12px un text care trebuie citit nu mai e text, e decor. Cu podeaua ridicata, cele doua trepte de jos se topesc intr-una. ⚠ `cqi` = 1% din latimea CONTAINERULUI `.mdsx` (`mds-design.css:158`), NU a ecranului. Containerul e 422px la un ecran de 390 si 1488px la unul de 1440 - de acolo vin coeficientii. Peste 1440 marimea se opreste. ⚠ `--xf-sm` RAMANE, ca alias pe treapta 6: e folosit in 125 de locuri si nu are rost sa fie rescris peste tot. Cine scrie cod nou foloseste `--xt-6`; cine citeste cod vechi gaseste aceeasi valoare. ⚠ CE NU E IN SCARA: cercul cu „i" de langa etichete (`.x**__i`), care e o cutie fixa de 15×15px cu litera la 10px/15px. Nu e text curgator, e un semn; urcat la 12px, litera iesea din cerc. */ /* ⚠⚠ `@property` NU E DECOR · FARA EL, PATRU TREPTE SE STRICA IN CARDURI. `var()` se inlocuieste ca TEXT, nu ca valoare: `cqi` din jeton s-ar fi rezolvat la ELEMENTUL CARE FOLOSESTE jetonul, nu la `.mdsx`. Iar pagina are containere imbricate - `.xrz__c` (`container-name:xrzc`) si `.xpm__card` (`xpmc`) - deci acolo `1cqi` inseamna 1% din CARD, nu din pagina. MASURAT inainte de reparatie: `.xpm__ct` iesea 20,78px la 1440 si 23,45px in cardul de langa el, iar `.xrz__hero` 20,07px la 1920 - trei marimi in plus, fix in locurile unde cardul isi declara propriul container. Declarata cu `@property` si `syntax:""`, valoarea se CALCULEAZA acolo unde e scrisa (pe `.mdsx`) si se mosteneste ca lungime gata calculata. */ @property --xt-1{ syntax:""; inherits:true; initial-value:30px; } @property --xt-2{ syntax:""; inherits:true; initial-value:30px; } @property --xt-3{ syntax:""; inherits:true; initial-value:25px; } @property --xt-4{ syntax:""; inherits:true; initial-value:20px; } /* ⚠ T5 si T7 au devenit si ele fluide odata cu capatul de desktop la 90%, deci au nevoie de aceeasi inregistrare: fara ea, `cqi` din ele s-ar rezolva in cardurile cu container propriu si ar da alte doua-trei marimi. ⚠ T6 NU e in lista: a fost dat inapoi la 15,5px fix, deci n-are `cqi`. */ @property --xt-5{ syntax:""; inherits:true; initial-value:20px; } @property --xt-7{ syntax:""; inherits:true; initial-value:13.5px; } /* ⚠⚠ JETOANELE SE DECLARA PE `.mdsx__in`, NU PE `.mdsx`, si asta e a doua jumatate a aceleiasi capcane. `.mdsx` E containerul, iar un element nu se poate interoga pe sine: scris acolo, `cqi` sarea la containerul de deasupra - adica la fereastra. MASURAT: la 1440 iesea 43,37px in loc de 44 si 32,63 in loc de 33, fiindca fereastra are 1440px si containerul 1488. `.mdsx__in` e inauntru, deci `cqi` masoara chiar `.mdsx`. */ /* ⚠⚠ CAPATUL DE DESKTOP E CU 10% MAI MIC DECAT AL MOBILULUI, si nu e o scapare. Cerut dupa ce pagina a fost privita in Chrome la zoom 90%: acolo se micsoreaza TOT cu 0,9 - text, spatii, padding, raze - iar asta a fost forma care a placut. Mobilul ramane exact cum era: pe telefon se citeste de mai aproape, pe un ecran mic si adesea in lumina proasta. Deci T5 si T7 SCAD cand ecranul creste. E neobisnuit, dar e deliberat; `clamp()` accepta panta negativa daca min si max stau in ordine crescatoare si semnul ramane in `calc()`. ⚠⚠ T6 E EXCEPTIA, si e cea mai importanta: textul de baza NU scade. Fusese dus la 14px odata cu restul si a fost dat inapoi - e singurul lucru din pagina pe care omul il citeste rand dupa rand, pe zeci de ecrane. mobil desktop (= 90% din ce era) --xt-1 30px 40px era 44 --xt-2 30px 34px era 38 --xt-3 25px 30px era 33 --xt-4 20px 21,5px era 24 --xt-5 20px 18px era 20 --xt-6 15,5px 15,5px NU SCADE · textul care se citeste --xt-7 13,5px 13px era 13,5 --xt-8 12px 12px PODEAUA, nu scade ⚠⚠ T7 E 13px, NU 12,15. Zece la suta l-ar fi dus fix peste podea, iar T7 si T8 s-ar fi topit intr-una pe desktop - adica eticheta unui buton ar fi ajuns cat legenda unui grafic. Podeaua ramane 12px (ceruta), deci T7 se opreste la 13 si pastreaza treapta. */ .mdsx__in{ /* ⚠ PATRU ZECIMALE, nu doua, si e masurat de ce. Cu `19.41px + 0.141cqi`, T4 iesea 20,005px pe mobil in loc de 20 - o miime de pixel peste podeaua lui, deci nu se prindea in `clamp` - iar T5 iesea 19,997. Doua valori acolo unde trebuie sa fie una: scara raporta SAPTE marimi pe mobil in loc de sase. Invizibil cu ochiul, dar ori scara e exacta, ori nu e scara. */ --xt-1:clamp(30px, calc(26.0413px + 0.93809cqi), 40px); --xt-2:clamp(30px, calc(28.4165px + 0.37523cqi), 34px); --xt-3:clamp(25px, calc(23.0206px + 0.46904cqi), 30px); --xt-4:clamp(20px, calc(19.4062px + 0.14071cqi), 21.5px); --xt-5:clamp(18px, calc(20.7917px - 0.18762cqi), 20px); /* ⚠⚠ T6 NU SCADE PE DESKTOP. La scalarea cu 0,9 ajunsese la 14px, si a fost dat inapoi: e textul pe care omul chiar il CITESTE, rand dupa rand, pe o pagina lunga de analiza. Titlurile, cifrele si mobilierul din jur se pot micsora fara sa doara - fraza nu. Ramane 15,5px la ambele latimi, ca inainte. */ --xt-6:15.5px; --xt-7:clamp(13px, calc(13.6979px - 0.04690cqi), 13.5px); --xt-8:12px; --xf-sm:var(--xt-6); } /* ⚠ Rezerva, pentru orice ar fi randat in `.mdsx` dar in afara lui `.mdsx__in`: treptele fixe si `--xf-sm`, ca nimic sa nu ramana fara marime. */ .mdsx{ --xt-5:20px; --xt-6:15.5px; --xt-7:13.5px; --xt-8:12px; --xf-sm:15.5px; } /* ⚠ Ultimul cuvant al unei etichete impreuna cu butonul „i": nu se despart niciodata. Vezi `mds_x_et_i()` din `inc/sections/x-dict.php` pentru motiv - intre text si un `inline-block` exista o ocazie de rupere pe care ` ` n-o inchide. O singura clasa, folosita de toate sectiunile. */ .x-nw{ white-space:nowrap; } /* ══ FOCALIZARE VIZIBILA PE CONTROALELE ASCUNSE ════════════════════════════ ⚠⚠ TOATE plierile si ferestrele de ajutor din pagina merg pe `` ascuns cu `opacity:0`, iar eticheta vizibila e fratele lui. Inelul de focalizare al browserului CADE PE INPUT - care e transparent, deci NU SE VEDE. Masurat: 25 de clase de control ascuns in 16 fisiere, ZERO cu `:focus-visible`. Mecanica functiona (Tab, apoi Space, deschide fereastra), dar cine navigheaza cu tastatura apasa Tab de zeci de ori prin opriri invizibile, fara niciun semn unde e - pana apasa Space si se deschide ceva la intamplare. ⚠ O SINGURA REGULA, aici, nu 25 in 16 fisiere. Tiparul e identic peste tot: input ascuns -> `