/* SCARA-STRICTA ═══════════════════════════════════════════════════════════════════════════ GRUPUL 3 · Afacerea & Rezultatele — standardul de secțiune. G3-LOT2 TREI PIESE, toate cerute fiindcă nu exista clasă care să facă acel lucru. Restul standardului se face FĂRĂ CSS, doar din marcaj și din argumentele blocului `sectiune`: · pastila fără bulină → nu se mai emite `` în marcaj. `.mdsx .rb i` (mds-design.css:626) rămâne neatinsă, o folosesc alte locuri; `.rb` are `gap:7px`, care cu un singur copil nu face nimic. · linia de accent în culoarea pastilei → se trimite `color` la bloc. `01-blocuri.css:106` desenează accentul cu `background:var(--c)`, iar `--c` vine din `style="--c:…"` pus de `blocks/sectiune.php`. Deci e de ajuns ca argumentul `color` să fie culoarea verdictului, nu una fixă pe secțiune. Zero reguli noi. ⚠ CONSECINȚĂ DE ȘTIUT: culoarea benzii nu mai identifică secțiunea, ci starea companiei. Aceeași secțiune va fi roz la o companie și verde la alta. Asta s-a cerut; o scriu ca să nu pară un accident mai târziu. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ 1 · FRAZA DE DESCHIDERE A COLOANEI DREPTE ══════════════════════════════ Textul scurt cu două-trei cifre, deasupra oricărei grafici. ⚠ DE CE NU `.lede`. `.mdsx .lede` e (0,2,0). Înăuntrul unei benzi, `.mdsx .band p` (0,2,1) o bate pe `font-size` și fraza ar fi ieșit la 14,5px — exact cât textul obișnuit de sub ea. R12. ⚠ DE CE NU `.dek`. `.mdsx .band p.dek` ar fi câștigat mărimea, dar `01-blocuri.css:106` desenează linia de accent după ORICE `.dek` din bandă. Ar fi apărut o a doua linie colorată, în mijlocul coloanei. ⚠ SPECIFICITATE 0,3,0 — cu o clasă mai mult decât `.mdsx .band p`, deci câștigă indiferent de ordinea de tipărire a fișierelor. Nu depinde de `01-ordine-css.php`. ⚠ FĂRĂ `max-width`. Prima versiune avea `62ch` și fraza se oprea la vreo două treimi din coloană, adunată în stânga sub un titlu care merge până la capăt. Aceeași greșeală era în temă la antetul de grup (`82ch`), reparată în `valoare-justa.css`. Coloana benzii e deja îngustă pe desktop; a o mai îngusta o dată nu ajută la nimic. Valorile: `--f-lead` e tokenul frazei introductive de secțiune (`00-scala.css:71`, 17→19px), exact rolul ăsta. Marja de sus e 0 fiindcă distanța o dă deja banda de accent (`01-blocuri.css:110`, `--s-7`). */ .mdsx .band .sx__intro{ margin: 0; font-family: var(--h); font-size: var(--f-lead); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); } /* Cifrele din frază. Fără regula asta, `.mdsx .band p b` (0,2,2) le-ar fi făcut 13px monospațiat — MAI MICI decât fraza care le conține. */ .mdsx .band .sx__intro b{ font-family: var(--m); font-weight: 400; font-size: inherit; letter-spacing: 0; color: var(--c, var(--ink)); } /* Fraza urmează imediat după banda de accent, deci elementul de după ea are nevoie de ritmul obișnuit al secțiunii. `--s-ritm` e pasul de secțiune (`00-scala.css`, 22px). */ .mdsx .band .sx__intro + *{ margin-top: var(--s-ritm) !important; } /* ═══ 2 · CARDUL DE METRICĂ, CU DEFINIȚIE ═══════════════════════════════════ `.mini` există în temă (`mds-design.css:1005`) și e exact cardul mic etichetă/cifră. Îi lipsesc trei lucruri pentru rolul ăsta: coloane pe desktop, o etichetă lizibilă și o cale de a explica metrica. ⚠ TOOLTIPUL NU E UN SISTEM NOU. E chiar TOOLTIP-2 din `tooltip.css`, mutat în card: același `input.fx__t` pe `radio` cu `name` comun, aceeași etichetă de închidere `.fx__x`, același `.fx__tip`. Regulile care fac tooltipul să funcționeze (`mds-design.css:840-852`, `tooltip.css:89`) selectează `.fx__row`, `.fx__t` și `.fx__tip` — deci merg neschimbate. Aici se scrie DOAR ce ține de așezare. Zero JavaScript, ca peste tot. */ /* ⚠ JGHEABUL TRECE PE SCARĂ. Tema dă `.mini{gap:10px}`, iar 10 nu e o treaptă din scară. Are importanță aici fiindcă lățimea ferestrei se calculează din el: `calc(200% + jgheab)` trebuie să dea exact două coloane, nu două minus doi pixeli. `--s-3` e 12px. */ .mdsx .mini.sx__patru{ gap: var(--s-3); --cc: var(--ink); } @container mdsx (min-width:900px){ /* Opt carduri în două coloane fac patru rânduri; în patru fac două. */ .mdsx .mini.sx__patru{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ⚠ CULOAREA BULINEI „i”. `mds-design.css:840` o desenează cu `var(--cc, var(--vc))`. `--vc` e culoarea VERDICTULUI paginii — portocaliu la banda 3 — deci butonul de definiție ieșea portocaliu la hover și la click, fără nicio legătură cu ce înseamnă. `--cc` e exact cârligul lăsat de temă pentru asta; se pune pe grilă (mai sus) și îl moștenesc toate cardurile. */ /* ═══ CLICUL NU MAI MUTĂ PAGINA ═════════════════════════════════════════════ ⚠ SIMPTOM: la clic pe „i”, pagina sărea. DOUĂ CAUZE care se compun, amândouă din marcajul scris aici, nu din TOOLTIP-2. (a) RADIOUL „NICIUNUL” STĂ ÎN AFARA GRILEI, înaintea ei, ca eticheta de închidere să-l poată ținti. `.mdsx .fx__t` e `position:absolute` (`mds-design.css:829`) fără `top`/`left`, deci rămâne la poziția lui statică: în capul secțiunii. Un clic pe eticheta de închidere mută focusul acolo, iar browserul derulează ca să aducă elementul focalizat în ecran. De aici saltul spre începutul benzii. (b) CARDURILE ERAU SUB SUPRAPUNEREA DE ÎNCHIDERE. Cât o fereastră e deschisă, `.fx__x` devine `position:fixed; inset:0; z-index:1` (`tooltip.css:90`). Cardurile n-aveau niciun `z-index`, deci un clic pe alt card cădea întâi pe suprapunere: se închidea fereastra, focusul pleca la radioul de la (a), pagina sărea, și abia al doilea clic deschidea ceva. Tema rezolvă asta pentru rândurile `.fx` (`tooltip.css:118`); pentru carduri regula nu exista, fiindcă nici cardurile nu existau. ⚠ ÎNĂLȚIMEA RĂMÂNE ZERO. Radioul e `width:0;height:0;opacity:0`, iar `fixed` îl scoate din flux: nu ocupă spațiu și nu se vede, dar rămâne în document, deci eticheta de închidere continuă să-l găsească. */ .mdsx .fx__t.sx__niciunul{ position: fixed; top: 0; left: 0; } /* Cardurile stau PESTE suprapunerea de închidere, deci un clic pe alt card comută direct fereastra, fără pasul intermediar de închidere. */ .mdsx .mini.sx__patru > .mini__c{ z-index: 2; } /* Cardul deschis urcă deasupra fraților lui, ca fereastra să-i poată acoperi. Aceeași treaptă ca la rândurile `.fx` (`tooltip.css:119`), ca cele două sisteme să nu se bată între ele când sunt pe aceeași pagină. */ .mdsx .mini.sx__patru > .mini__c:has(.fx__t:checked){ z-index: 6; } /* Dacă browserul derulează totuși ca să aducă un card în ecran, lasă loc și ferestrei care se deschide sub el. `--s-12` e ultima treaptă din scară. */ .mdsx .mini__c.sx__card{ scroll-margin-block: var(--s-12); } /* Ancora ferestrei. Pe desktop `.fx__tip` e `position:absolute` cu `left:0;right:0` (`mds-design.css:855`) — fără un strămoș poziționat s-ar fi agățat de bandă și ar fi ieșit lată cât toată coloana. */ .mdsx .mini__c.sx__card{ position: relative; } /* Rândul devine vertical: eticheta sus, cifra dedesubt, ca în cardul temei. `.mdsx .fx__row` e `display:flex` cu `space-between` (`mds-design.css:820`), potrivit pentru o listă, nu pentru un card. Se schimbă DOAR `display`. */ .mdsx .mini__c.sx__card .fx__row{ display: block; } /* ⚠ ETICHETA ERA PREA MICĂ ȘI PREA ÎNCHISĂ. Tema o dă 11px pe `--ink-3` (`mds-design.css:1008`) — potrivit pentru o etichetă de două cuvinte lângă o cifră mare, nu pentru „Randamentul capitalului investit”, care se rupe pe două rânduri. `--f-mic` (13px) e tokenul textului mic din scară, iar `--ink-2` e treapta de text secundar, aceeași cu a rândurilor `.fx__k`. */ .mdsx .mini__c.sx__card .mini__k{ display: flex; align-items: center; gap: var(--s-2); font-size: var(--f-mic); line-height: 1.35; color: var(--ink-2); } /* Bulina „i” nu se micșorează când eticheta se rupe pe două rânduri. */ .mdsx .mini__c.sx__card .mini__k .fx__i{ margin-top: 1px; } /* ═══ FEREASTRA DE DEFINIȚIE ════════════════════════════════════════════════ ⚠ DOUĂ PROBLEME REPARATE AICI, amândouă văzute în preview. (a) PE MOBIL fereastra era `position:static` (tema o face `absolute` doar peste 900px, `mds-design.css:855`). Într-o grilă, un copil care crește înalță TOT RÂNDUL: se deschidea o definiție și creștea și cardul de alături, care n-avea nicio treabă. Acum e scoasă din flux la orice lățime, deci grila nu se mai mișcă deloc. (b) PE DESKTOP era exact cât cardul, fiindcă tema o întinde cu `left:0;right:0` în primul strămoș poziționat, adică în card. Un card dintr-o grilă de patru are vreo 190px: două rânduri de definiție încăpeau într-o coloană de text cât un deget. Acum are lățimea a două coloane, `calc(200% + jgheab)`, la orice lățime de ecran. Pe mobil (două coloane) asta înseamnă toată grila. ⚠ ALINIEREA SE ÎNTOARCE PE ULTIMELE COLOANE, altfel fereastra ar ieși în afara benzii. Regulile de mai jos sunt scrise pe `:nth-child`, ceea ce e sigur AICI și numai aici: `.mini__c` sunt singurii copii ai grilei, iar radioul „niciunul" e emis ÎNAINTEA lui `.mini`, nu înăuntru. */ .mdsx .mini.sx__patru .fx__tip{ position: absolute; z-index: 50; top: calc(100% - 4px); left: 0; right: auto; width: calc(200% + var(--s-3)); margin: 0; box-shadow: 0 12px 30px rgba(0,0,0,.55); } /* Mobil: două coloane. Cardul din dreapta își întoarce fereastra. */ .mdsx .mini.sx__patru .mini__c:nth-child(even) .fx__tip{ left: auto; right: 0; } @container mdsx (min-width:900px){ /* Patru coloane: primele două deschid spre dreapta, ultimele două spre stânga. `even` de pe mobil se anulează pentru coloanele 1 și 3. */ .mdsx .mini.sx__patru .mini__c:nth-child(4n-3) .fx__tip, .mdsx .mini.sx__patru .mini__c:nth-child(4n-2) .fx__tip{ left: 0; right: auto; } .mdsx .mini.sx__patru .mini__c:nth-child(4n-1) .fx__tip, .mdsx .mini.sx__patru .mini__c:nth-child(4n) .fx__tip{ left: auto; right: 0; } /* ⚠ NU SE DESCHIDE LA HOVER. Tema are `.mdsx .fx:hover .fx__tip{display:block}` (`mds-design.css:859`), dar cardul NU are clasa `.fx`, deci regula aia nu-l atinge, iar aici nu se scrie perechea ei. Fereastra se deschide numai la clic, pe card sau pe bulina „i”: amândouă sunt înăuntrul lui `.fx__row`, care e `