/* ============================================================================ 46-flux.css · GRUPUL 6 · antetul de grup + „Detineri institutionale" namespace `xfx` PREVIEW ⚠⚠ ZERO VALORI INVENTATE. Ancorele: 20-grup2.css:45-66 `.xgh` — antetul de grup. Se REFOLOSESTE. 20-grup2.css:82-99 titlu de sectiune, lede, card 20-grup2.css:130-137 lista cu separator `--xsep` 22-fair-value.css:71-77 `.xfv__badge` / `.xfv__chip` 24-proiectii.css:109-114 `.xpj__mc` — celula de metrica 42-dividende.css tabelul si plierea lui 44-randament.css grila de celule si pragul de patru coloane verdict.css:345-357 `scroll-margin-top` 78 / 82px ⚠ `xfx` e namespace NOU. Ocupate: xhd xhd2 xvd xvm xvp xar xgh xan xfv xpj xab xdp xaf xfn xrp xrs xcz xdv xrd. ============================================================================ */ /* ══ ANTETUL GRUPULUI 6 ═════════════════════════════════════════════════════ ⚠ `.xgh` se refoloseste, ca la grupurile 3-5. Distanta deasupra e aceeasi — 62px mobil / 88px desktop, cifrele din `14-argumente.css:163`. ⚠ FARA PASTILA DE SCOR, decizia sectiunii vechi: `flux` nu e dimensiune in `dimension_scorecard` si nu are nici pilon. */ /* ⚠ Distanta deasupra antetului de grup NU MAI E AICI: sta o singura data, pe `.xgh` (`20-grup2.css`), cu marimea din `--xsp-grup` (`00-shell.css`). Erau sapte reguli identice in sapte fisiere, iar antetul primului grup — singurul fara clasa proprie — ramasese pe dinafara, cu distanta ZERO. */ .xfx__gh{ overflow-x:clip; } /* ══ SECTIUNEA ══════════════════════════════════════════════════════════════ */ .xfx{ font-family:var(--xf); color:var(--xc-ink); letter-spacing:-.004em; margin-top:var(--xsp-sec,39px); overflow-x:clip; } .xfx *{ box-sizing:border-box; } /* ⚠⚠ TITLUL E ALB. Sectiunea porneste banda cu `var(--violet)`, iar `mds-design.css:417` da `.ch__t{color:var(--c)}`. Culoarea trece pe pastila. ⚠ Titlul NU e flex: pastila sta pe un rand propriu dedesubt, deci `::first-letter` se aplica direct pe `

`. */ .xfx__t{ margin:0; font-size:var(--xt-3); font-weight:700; line-height:1.15; letter-spacing:-.022em; color:var(--xc-ink); } .xfx__t::first-letter{ text-transform:uppercase; } /* invelisul pastilei · `.xfv__badge--h` (22-fair-value.css:71-73) */ .xfx__lede{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf); letter-spacing:-.006em; color:var(--xc-ink); } .xfx__n{ margin:14px 0 0; font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink3); } .xfx__z{ font-style:normal; color:var(--xc-ink4); } /* ══ BENTO ══════════════════════════════════════════════════════════════════ Doua carduri: cifrele si lista intr-unul, tabelul de detinatori in celalalt. ⚠ Pe companiile romanesti al doilea card NU EXISTA — steagul `us_centric`. Atunci primul ia randul intreg. */ .xfx__bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:22px 0 0; align-items:start; } .xfx__bento > *{ grid-column:span 6; min-width:0; } /* ⚠ `position:relative` e blocul de referinta pentru `.xfx__anc`, ancora de inchidere a ferestrei. Fara el, ancora — care e `position:absolute` si n-are dimensiune — s-ar fi asezat fata de primul stramos pozitionat, oriunde ar fi fost acela, si inchiderea ar fi dus pagina acolo, nu la card. ⚠ `scroll-margin-top:78px` e antetul lipit plus aer, aceeasi valoare cu a restului paginii: la inchidere, cardul nu ajunge sub antet. */ .xfx__card{ min-width:0; display:block; position:relative; background:var(--xs-card); border-radius:28px; padding:26px 24px 28px; box-shadow:var(--xe-lift); scroll-margin-top:78px; } /* titlu de card · aceeasi treapta ca `.xan__ct` / `.xfv__ct` / `.xpj__ct` */ .xfx__ct{ margin:0 0 18px; font-weight:600; font-size:var(--xt-4); line-height:1.25; letter-spacing:-.012em; color:var(--xc-ink); } .xfx__ct::first-letter{ text-transform:uppercase; } /* ── celulele de metrica ─────────────────────────────────────────────────── ⚠ Doua pe rand pana la 1400px de container, patru peste — acelasi prag ca la grupurile 4 si 5. Cardul e de jumatate de latime pe desktop, deci patru celule in el ar fi iesit de ~110px. */ .xfx__tri{ min-width:0; display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0, 1fr)); } .xfx__c{ position:relative; min-width:0; padding:15px 16px; border-radius:var(--xr-i); background:var(--xs-inset); } /* ⚠ „Cumparari, 6 luni", nu „cumparari": cheile `in.b_*` sunt scrise cu litera mica in catalog, fiindca in sectiunea veche veneau la mijlocul unei fraze. Aici deschid o celula. Aceeasi corectie ca la „Ultimele 8 trimestre" de la Raportari si la subtitlurile de la Crize. ⚠ Se aplica si celulelor de la Detineri („Institutii", „Detineri interne"), unde textul e deja cu majuscula — regula nu schimba nimic acolo. */ .xfx__cl{ display:block; font:500 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); } .xfx__cl::first-letter{ text-transform:uppercase; } .xfx__cv{ display:block; margin-top:2px; font:600 var(--xt-5)/1.1 var(--xf); letter-spacing:-.014em; font-variant-numeric:tabular-nums; color:var(--xc-ink); } /* ── fereastra de ajutor · pur CSS ───────────────────────────────────────── ⚠⚠ CLASA E `xfx__rt`, NU `xfx__t`: `xfx__t` e TITLUL DE SECTIUNE. Greseala asta am facut-o de trei ori (`xaf__t`, `xrs__t`); o scriu inainte. ⚠ `name` si `id` poarta `uid`-ul per activ (R7). Sectiunea veche foloseste `flx-do` si `flx-do-niciunul`, id-uri fixe in tot documentul. */ .xfx__rt{ position:absolute; opacity:0; pointer-events:none; } .xfx__lb{ display:block; cursor:pointer; } .xfx__x{ display:none; } .xfx__tip{ display:none; } .xfx__rt:checked ~ .xfx__x{ display:block; position:fixed; inset:0; z-index:8; } .xfx__rt:checked ~ .xfx__tip{ display:block; position:relative; z-index:9; margin:12px 0 0; padding:13px 14px; border-radius:14px; background:var(--xs-track); font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink2); } .xfx__tip b{ display:block; margin-bottom:5px; color:var(--xc-ink); font-weight:600; } /* ⚠⚠ ICONITA „i" · REGULA UNICA, ACEEASI IN TOATE SECTIUNILE. MASURAT inainte: patru fisiere aveau patru reguli diferite si iconita cadea la +13px in Bilant, +5px in Context, +3px la Piata si 0 la Profiluri, fata de centrul textului. In plus, sarea in aceeasi sectiune (+13 vs +3, +5 vs +25) cand eticheta se rupea pe doua randuri. `vertical-align:middle` aliniaza mijlocul cutiei cu linia de baza PLUS jumatate din inaltimea literei mici — adica exact centrul optic al textului. E singura valoare care nu depinde de corpul de litera al etichetei, deci tine la 13,5px, la 15,5px si la 17px la fel. ⚠ `inline-block`, nu `inline-flex`: linia de baza a unei cutii flex se ia de la primul ei element, iar aici continutul vine dintr-un `::before` — de aia `baseline` dadea rezultate imprevizibile. */ .xfx__i{ display:inline-block; width:15px; height:15px; margin-left:6px; border-radius:50%; background:var(--xs-track); color:var(--xc-ink3); font:700 10px/15px var(--xf); font-style:normal; text-align:center; vertical-align:middle; } .xfx__i::before{ content:"i"; } .xfx__rt:checked ~ .xfx__lb .xfx__i{ background:var(--xc-ink); color:var(--xc-bg); } /* ── lista de detalii ── */ .xfx__kv{ list-style:none; margin:18px 0 0; padding:0; } .xfx__kv li{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:11px 0; font:400 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); } .xfx__kv li:first-child{ background:var(--xsep) no-repeat top/100% 1px; padding-top:18px; } .xfx__kv li + li{ background:var(--xsep) no-repeat top/100% 1px; } .xfx__kv b{ flex:none; color:var(--xc-ink); font-weight:600; font-variant-numeric:tabular-nums; } /* ── tabelul de detinatori ───────────────────────────────────────────────── ⚠ `overflow-x:auto` pe inveli|s (R29): patru coloane pe 302px se ingusteaza, iar la un nume lung de fond deruleaza TABELUL, nu pagina. */ .xfx__sc{ overflow-x:auto; scrollbar-width:none; } .xfx__sc::-webkit-scrollbar{ display:none; } .xfx__tbl{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; } .xfx__tbl th{ padding:0 0 10px; text-align:right; font:600 var(--xt-8)/1 var(--xf); letter-spacing:.06em; text-transform:uppercase; color:var(--xc-ink3); white-space:nowrap; } .xfx__tbl th:first-child{ text-align:left; } /* ⚠ GUTIERA DE 10px INTRE COLOANE, nu 14. Masurat la 390px pe tabelul de insideri: cu 14px, tabelul iesea 311px intr-o pista de 302 si ultima coloana („valoare") se taia; cu 10px intra exact. La Detineri, unde coloanele sunt mai scurte, diferenta nu se vede. */ .xfx__tbl td{ padding:11px 0 11px 10px; text-align:right; font:500 var(--xf-sm)/1.35 var(--xf); color:var(--xc-ink); white-space:nowrap; } .xfx__tbl td:first-child{ padding-left:0; text-align:left; color:var(--xc-ink2); white-space:normal; } /* ⚠ La Insideri numele e a DOUA coloana, nu prima: primeste ruperea separat. */ /* ⚠ La Insideri numele e a DOUA coloana, nu prima: primeste ruperea separat. ⚠⚠ SI ANTETUL EI E LA STANGA. Regula generala aliniaza toate `th`-urile la dreapta, cu exceptia primului; asa, „NUME" statea la dreapta peste o coloana de nume aliniate la stanga. Se leaga prin `:has()` de celula, ca sa nu depinda de pozitia coloanei. */ .xfx__tbl td.xfx__nm{ text-align:left; white-space:normal; color:var(--xc-ink); } .xfx__tbl:has(td.xfx__nm) th:nth-child(2){ text-align:left; } /* ⚠ La Indici/ETF numele fondului e PRIMA coloana si e lung („Consumer Discretionary Select Sector SPDR"): se rupe, ca sa nu deruleze tabelul. */ .xfx__tbl td.xfx__nm2{ text-align:left; white-space:normal; color:var(--xc-ink); } .xfx__tbl tbody tr + tr td{ background:var(--xsep) no-repeat top/100% 1px; } .xfx__d{ font-weight:600; font-variant-numeric:tabular-nums; } .xfx__d.is-up{ color:var(--xc-lime); } .xfx__d.is-dn{ color:var(--xc-pink); } /* ⚠ MARCAJ, NU COLOANA. Steagul `passive` exista doar pe cei cinci ai motorului; o coloana pe jumatate goala ar fi sugerat ca restul nu sunt „nici pasive, nici active". Un marcaj lipsa se citeste corect, ca „nedeclarat". */ .xfx__tp{ display:inline-block; margin-left:8px; padding:2px 7px; border-radius:var(--xr-p); background:var(--xs-inset); font:500 var(--xt-8)/1.4 var(--xf); font-style:normal; color:var(--xc-ink3); vertical-align:1px; white-space:nowrap; } /* ── plierea tabelului ───────────────────────────────────────────────────── ⚠ Pragul e `MDS_FLX_VIZIBILE` = 5, al sectiunii vechi. Pe cele patru companii americane sunt exact 5 detinatori in `notable`, deci butonul nu apare pe niciuna — regula exista pentru cazul in care sursa trimite mai multi. ⚠ Caseta e FRATE cu invelisul tabelului: selectorul e `~`. */ /* ══ LISTELE INTREGI SE DESCHID IN FEREASTRA · punctele 18-21 ══════════════ Cele patru tabele — cei mai mari detinatori, cele mai mari tranzactii, cine a tranzactionat din Congres, fondurile care o detin — arata in card primele randuri si deschid restul intr-o fereastra. ⚠⚠ PLIEREA VECHE A DISPARUT CU TOTUL. Era o caseta ascunsa (`.xfx__ft`) si un buton „Vezi mai mult" (`.xfx__fx`) care lungea cardul in jos. Regulile lor s-au STERS, nu comentat: nefolosite de nimeni altcineva in fisier, iar CSS mort langa un mecanism nou e prima sursa de confuzie la urmatoarea corectura. `mds-xdp.js` nu mai asculta `.xfx__ft`. ⚠⚠ TABELUL E INTR-O SINGURA COPIE. Fereastra nu e un al doilea tabel: E INVELISUL aceluiasi tabel. Inchisa, `.xfx__pop` e un bloc obisnuit in card si ascunde randurile `.xfx__extra`; deschisa (`:target`), aceeasi cutie devine `fixed` si centrata, capata antet si arata tot. Varianta cu doua tabele ar fi pus toate randurile de doua ori in pagina, la patru tabele. ⚠ FORMA E IMPRUMUTATA INTEGRAL de la panoul de transparenta (`56-forensic.css:131-146`): acelasi `:target`, aceeasi latime, aceeasi raza, acelasi capac. Doua feluri de fereastra pe aceeasi pagina ar fi insemnat ca una dintre ele e o greseala. ⚠ E fereastra de INFORMARE: fara capcana de focalizare, fara Escape, fara blocarea derularii din spate — exact limitele scrise la panoul de transparenta. Se inchide din buton sau dintr-un clic in afara. */ /* ── inchisa: bloc obisnuit in card ── */ .xfx__ph{ display:none; } /* ⚠ Ancora de inchidere: exista ca tinta a legaturilor, dar n-are dimensiune, deci nu misca nimic in asezare (`.xdz__anc`). `scroll-margin-top` e 120px, nu 78 ca la carduri: ancora sta SUB titlul cardului, iar cu 78 titlul ramanea acoperit de antetul lipit. Masurat pe randare, nu ales. */ .xfx__anc{ position:absolute; width:0; height:0; scroll-margin-top:120px; } .xfx__ov{ display:none; } .xfx__pop:not(:target) .xfx__extra{ display:none; } /* ⚠ Randurile ascunse nu pot fi ancora de derulare: cand fereastra se inchide, ele dispar si pagina ar fi ramas agatata de un rand care nu mai exista. */ .xfx__extra{ overflow-anchor:none; } /* ── butonul · aceeasi forma cu celelalte butoane ale paginii ── ⚠ `--xr-p`, ca `.xar__more`, `.xdp__fx` si `.xaf__fx` (punctele 13-14, 18). Era `12px`, singura raza diferita dintre butoanele cu acelasi rol. ⚠ Sageata arata la DREAPTA, nu in jos: nu desfasoara cardul, deschide o fereastra. Forma trebuie sa spuna ce se intampla inainte de apasare. */ /* ⚠ BUTOANELE SI TABURILE COBOARA O TREAPTA: `--xt-7` (13,5px), nu `--xf-sm` (15,5px). 24 din cele 29 stateau exact la marimea prozei pe care o intrerup, si la 600 — adica strigau mai tare decat ce scria in ele. Cutia ramane neatinsa (44px inaltime, acelasi padding), deci se apasa la fel de usor cu degetul. */ .xfx__bt{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin:16px 0 0; padding:13px 16px; min-height:44px; border-radius:var(--xr-p); background:var(--xs-inset); font:600 var(--xt-7)/1 var(--xf); color:var(--xc-ink); cursor:pointer; text-decoration:none; transition:background .15s ease; } .xfx__bt:hover{ background:#141417; color:var(--xc-ink); } .xfx__bt::after{ content:""; flex:none; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateX(-2px) rotate(-45deg); } /* ── deschisa ── */ .xfx__pop:target{ position:fixed; z-index:61; left:50%; top:50%; transform:translate(-50%,-50%); width:min(720px, calc(100vw - 32px)); max-height:min(84vh, 760px); display:flex; flex-direction:column; background:var(--xs-card); border-radius:var(--xr-c); box-shadow:var(--xe-lift); overflow:hidden; } .xfx__pop:target .xfx__ph{ display:flex; } /* ⚠ Corpul deruleaza singur, pe amandoua axele: pe telefon patru coloane nu incap pe latime, iar cateva zeci de randuri nu incap pe inaltime. `flex:1 1 auto` plus `min-height:0` — fara al doilea, un copil flex nu se lasa micsorat sub continutul lui si derularea n-ar fi pornit niciodata. */ .xfx__pop:target .xfx__sc{ flex:1 1 auto; min-height:0; overflow:auto; padding:0 22px 22px; } .xfx__card:has(.xfx__pop:target) .xfx__ov{ display:block; position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.62); } /* ⚠ Butonul se ascunde cat e fereastra deschisa: ar fi ramas sub capac, vizibil prin transparenta, aratand ca inca se poate apasa ceva ce nu se mai poate. */ .xfx__card:has(.xfx__pop:target) .xfx__bt{ visibility:hidden; } /* antetul ferestrei · `.xdz__ph` (56-forensic.css:148) */ .xfx__ph{ align-items:center; justify-content:space-between; gap:16px; flex:none; padding:20px 22px 16px; background:var(--xsep) no-repeat bottom/100% 1px; } .xfx__pt{ margin:0; font:600 var(--xt-5)/1.25 var(--xf); letter-spacing:-.014em; color:var(--xc-ink); } /* ⚠⚠ CLASA E `xfx__pc`, NU `xfx__cl`. `xfx__cl` e ETICHETA DE CELULA, ocupata de la linia 79, si o folosesc trei locuri din `x-flux.php`. Prima versiune a ferestrei a luat-o pe ea si butonul de inchidere a ajuns sa fie 13 elemente din pagina, dintre care al meu era ultimul; masurat la prima proba, apasarea nimerea o celula din card, de sub capac. A patra coliziune de nume in propriul namespace din proiect — garda de nume verifica tema, nu consecventa interna. ⚠ Capacul e un „×" desenat din doua linii, nu litera „x": la corp de litera mic, litera se citeste ca text si nu se nimereste cu degetul. 40px e pragul de la care se apasa sigur. */ .xfx__pc{ flex:none; position:relative; width:40px; height:40px; border-radius:50%; background:var(--xs-inset); color:var(--xc-ink2); text-decoration:none; transition:background .15s ease, color .15s ease; } .xfx__pc:hover{ background:#141417; color:var(--xc-ink); } .xfx__pc::before,.xfx__pc::after{ content:""; position:absolute; left:50%; top:50%; width:15px; height:2px; margin:-1px 0 0 -7.5px; background:currentColor; border-radius:1px; } .xfx__pc::before{ transform:rotate(45deg); } .xfx__pc::after{ transform:rotate(-45deg); } /* ⚠ Antetul tabelului ramane vizibil cat se deruleaza: cu cateva zeci de randuri, dupa primul ecran nu se mai stie ce coloana e care. */ .xfx__pop:target .xfx__tbl th{ position:sticky; top:0; z-index:1; padding-top:14px; background:var(--xs-card); } @media (prefers-reduced-motion:no-preference){ .xfx__pop:target{ animation:xfx-in .18s ease-out; } @keyframes xfx-in{ from{ opacity:0; transform:translate(-50%,-46%); } } } @media (prefers-reduced-motion:reduce){ .xfx__bt,.xfx__pc{ transition:none; } } /* ⚠ SEPARATORUL DE SUB SECTIUNE, ca la `20-grup2.css:203`. */ .mdsx .xfx + .band{ border-top:0; background-image:none; } /* ══ DESKTOP · pragul temei, pe CONTAINER (20-grup2.css:207) ══ */ @container mdsx (min-width:900px){ .xfx__card{ border-radius:var(--xr-c); padding:29px 31px 31px; scroll-margin-top:82px; } .xfx__bento{ gap:13px; } .xfx__bento > *{ grid-column:span 3; } .xfx__bento:has(> :only-child) > *{ grid-column:span 6; } .xfx__tri{ gap:11px; } /* ⚠⚠ TREI COLOANE CAND CARDUL TINE RANDUL INTREG. La Congres si la Short cardul e singur, deci are 1100px; cu doua coloane ieseau celule de ~500px pentru o cifra de doua caractere, iar a treia ramanea singura pe randul al doilea. Trei coloane le pun pe un rand si le aduc la ~350px. Se leaga prin `:has()` de faptul ca invelisul are un singur copil — nu de numarul de celule, care difera de la o sectiune la alta. */ .xfx__bento:has(> :only-child) .xfx__tri{ grid-template-columns:repeat(3, minmax(0, 1fr)); } } @container mdsx (min-width:1400px){ .xfx__tri{ grid-template-columns:repeat(4, minmax(0, 1fr)); } } /* ══ BALANTA · cumparari fata de vanzari ════════════════════════════════════ ⚠⚠ DE CE NU DOUA CIFRE. „8 cumparari" si „6 vanzari" in doua cutii alaturate sunt doua fapte; pe o singura pista impartita proportional sunt UN RAPORT, iar raportul e intrebarea pe care si-o pune cititorul: „se cumpara sau se vinde?". Lungimea raspunde inainte sa apuce sa citeasca cifrele. ⚠ ZERO VALORI INVENTATE. Ancorele: 24-proiectii.css:80-92 pista `--xbar`, raza `--xr-p` 22-fair-value.css:96-98 legenda in doua capete, stanga-dreapta 46-flux.css treptele de litera ale sectiunii ⚠ AL DOILEA INDICIU: fiecare latura isi poarta CIFRA si ETICHETA langa ea. Bara singura NU tine in tonuri de gri — hasura care facea asta a fost scoasa la cerere — dar cifrele de sub ea da. */ .xfx__balw{ margin:0 0 18px; } .xfx__bal{ position:relative; display:flex; height:var(--xbar); border-radius:var(--xr-p); overflow:hidden; /* ⚠ FONDUL E PARTEA DE VANZARI, roz plin. A fost o hasura de 45°, scoasa la cerere: era singura textura din tot designul si iesea din linia paginii. ⚠ CE SE PIERDE: hasura era al doilea indiciu, cel care tinea in tonuri de gri. Fara ea, cele doua segmente se disting DOAR prin culoare. Raman cifra si eticheta de sub fiecare latura — informatia nu dispare, dar bara in sine nu mai e citibila de cineva care nu distinge verdele de roz. */ background:var(--xc-pink); } .xfx__bc{ display:block; height:100%; background:var(--xc-lime); border-radius:var(--xr-p) 0 0 var(--xr-p); } /* ⚠ Cand cumpararile sunt 100%, coltul din dreapta nu trebuie sa ramana drept. */ .xfx__bc[style*="width:100"]{ border-radius:var(--xr-p); } .xfx__ball{ display:flex; justify-content:space-between; gap:16px; margin:10px 0 0; } .xfx__bl{ display:flex; align-items:baseline; gap:7px; min-width:0; } .xfx__bl.is-v{ text-align:right; flex-direction:row-reverse; } /* treptele sectiunii: 20px cifra (= `.xfx__cv`), 15,5px eticheta (= `.xfx__cl`) */ .xfx__bl b{ font:600 var(--xt-5)/1.1 var(--xf); letter-spacing:-.014em; font-variant-numeric:tabular-nums; } .xfx__bl.is-c b{ color:var(--xc-lime); } .xfx__bl.is-v b{ color:var(--xc-pink); } .xfx__bl em{ font:500 var(--xf-sm)/1.35 var(--xf); font-style:normal; color:var(--xc-ink2); } .xfx__bl em::first-letter{ text-transform:uppercase; }