, deci ordinea de citire e corectă și fără reguli de `order`. `body` devine container flex DOAR pe aceste patru pagini — de aici selectorul cu atribut. */ html[data-ge-docnav] body { display: flex; align-items: flex-start; gap: var(--s6); } .ge-docnav { flex: 0 0 var(--ge-docnav-w); position: sticky; inset-block-start: calc(var(--ge-bar-h) + var(--s5)); padding-block: var(--s7) var(--s5); padding-inline: var(--ge-gutter) 0; } .ge-docnav__title { margin: 0 0 var(--s3); } .ge-docnav a { display: block; min-block-size: 24px; padding: 7px 10px; margin-block-end: 2px; border-radius: var(--radius); border-inline-start: 2px solid transparent; color: var(--text-2); font-size: var(--fs-md); line-height: var(--lh-snug); text-decoration: none; } .ge-docnav a:hover { background: var(--surface-2); color: var(--ink); } .ge-docnav a[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: var(--fw-semi); border-inline-start-color: var(--brand-earth); } /* REVENIT la centrare. Am fixat cândva coloana la stânga (`margin-inline: 0 auto`), ca să nu rămână un gol între meniu și text. Leacul a fost mai rău decât boala: cu ~590 px de text și ~550 px de nimic în dreapta, pagina arăta ca o randare eșuată, nu ca un document. `margin-inline: auto` pe un element flex centrează în spațiul RĂMAS după meniu, deci albul se împarte simetric — ceea ce se citește ca intenție, nu ca defect. Golul de lângă meniu e prețul, și e prețul corect: o coloană de lectură se centrează, nu se lipește de crom. */ html[data-ge-docnav][data-ge-mode="dossier"] main.ge-read { margin-inline: auto; } @media (max-width: 900px) { html[data-ge-docnav] body { display: block; } .ge-docnav { position: static; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding: var(--s3) var(--ge-gutter); border-block-end: 1px solid var(--line); } .ge-docnav__title { inline-size: 100%; margin: 0 0 var(--s1); } .ge-docnav a { margin-block-end: 0; border-inline-start: 0; border-block-end: 2px solid transparent; } .ge-docnav a[aria-current="page"] { border-block-end-color: var(--brand-earth); } } /* ── starea preluată din sesiune, până la prima confirmare ── Bara pornește de la ultima valoare cunoscută ca să nu clipească pe fiecare navigare, dar nu are voie să o prezinte ca proaspătă. Marcajul e dublu, fiindcă un singur canal nu ajunge: VIZUAL o linie punctată sub indicatori (nu doar opacitate — o culoare mai palidă nu e o informație, e o ambiguitate), și TEXTUAL prin `aria-description`, care spune momentul. Se stinge singur la prima interogare reușită, de obicei sub o secundă. */ .ge-bar[data-stale] .ge-sev, .ge-bar[data-stale] .ge-chip { border-block-end: 1px dotted currentColor; opacity: .72; } .ge-bar__sep { inline-size: 1px; block-size: 22px; background: var(--line); flex: none; } .ge-bar__spacer { flex: 1 1 auto; min-inline-size: var(--s2); } .ge-bar__clock { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } /* „live" e o afirmație despre date, nu un ornament: pulsează doar cât timp ultima interogare a reușit. Când linia tace, se stinge și trece pe tonul de nedeterminat — un punct verde care pulsează peste date vechi induce în eroare mai rău decât absența lui. */ .ge-bar__live { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-xs); color: var(--sev-indet); } .ge-bar__live[data-live="1"] { color: var(--sev-clear); } .ge-bar__live[data-live="0"] .ge-pulse { animation: none; opacity: .45; } @media (max-width: 900px) { .ge-bar__live span:last-child { display: none; } } @media (max-width: 900px) { .ge-bar__clock { display: none; } } /* Contextul paginii, în bara globală: „GRAPHIT.EARTH · Sănătate și poartă de calitate". Înlocuiește antetul de marcă pe care îl repeta fiecare pagină. LĂȚIME FIXĂ, nu maximă — și asta e toată diferența. Cu `max-inline-size`, caseta se strânge pe numele scurte („Portal", 6 caractere) și se întinde pe cele lungi („Termeni și condiții de utilizare", 32), deci indicatorii de stare săreau ~164 px de la o pagină la alta. Informația de stare trebuie să stea în ACELAȘI loc pe toate suprafețele: operatorul o caută din reflex, nu o citește căutând-o. `flex: none` ține caseta la dimensiunea rezervată chiar și când bara se înghesuie, iar ce nu încape se taie cu puncte de suspensie (numele întreg rămâne în `title`). */ .ge-bar__ctx { flex: none; inline-size: var(--ge-ctx-w); color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Pe ecrane mai strâmte locul se micșorează, dar rămâne FIX: proprietatea care contează e poziția constantă, nu mărimea. Sub 1000 px dispare de tot — railul și titlul paginii spun oricum unde ești, iar bara are nevoie de spațiu pentru stare. */ @media (max-width: 1280px) { :root { --ge-ctx-w: 22ch; } } @media (max-width: 1000px) { .ge-bar__ctx { display: none; } } /* ───────────────── antetele duplicate ale paginilor ───────────────── Fiecare pagină avea propria bară cu marca, ceasul UTC și un set de legături de navigare — exact cele trei lucruri pe care le dă acum coaja. Duplicarea nu e doar urâtă: două ceasuri care nu se actualizează sincron sunt o sursă reală de confuzie într-o tură. Se ascunde prin CSS, nu se șterge din marcaj, deliberat: scripturile paginilor scriu în `#clock` și în alte noduri din bară. Ascunse, continuă să funcționeze; șterse, ar arunca. `all` — bara nu conținea decât duplicat → dispare întreagă. `part` — bara are controale proprii (verdictul gărzii, starea scenei, capabilitățile) → dispar doar piesele duplicate, restul rămâne. */ [data-ge-dup="all"] { display: none !important; } [data-ge-dup="part"] > .brand, [data-ge-dup="part"] > .live, [data-ge-dup="part"] > .clock, [data-ge-dup="part"] > .navlinks { display: none !important; } /* ─────────────────────────── railul ─────────────────────────── */ .ge-rail { position: fixed; inset-block: var(--ge-bar-h) 0; inset-inline-start: 0; z-index: 80; inline-size: var(--ge-rail-w); display: flex; flex-direction: column; align-items: center; gap: 2px; padding-block: var(--s2); overflow-y: auto; overflow-x: hidden; background: var(--surface); border-inline-end: 1px solid var(--line); } /* Icoanele de NAVIGARE poartă culoarea mărcii. Cele de STARE nu: severitatea își păstrează propria culoare și formă, altfel marca ar începe să semnaleze ceva. */ /* Icoanele de navigare urmează exact regula siglei: ton neutru în repaus, culoarea mărcii la survolare, la focus și pe pagina curentă. Cromul rămâne sobru, iar culoarea de marcă devine un semnal de interacțiune — nu un fundal permanent care ar concura cu paleta de stare. */ .ge-rail a { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 8px; color: var(--text-2); text-decoration: none; flex: none; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .ge-rail a:hover, .ge-rail a:focus-visible { background: var(--surface-2); color: var(--brand-earth); } .ge-rail a[aria-current="page"] { background: var(--accent-soft); color: var(--brand-earth); } /* Intrarea „Despre platformă" din rail poartă sigla, cu aceleași trei stări ca bara: neutră după temă, marca la survolare și la focus. Aceleași fișiere din kit, la 20 px. */ .ge-rail__brand { position: relative; display: grid; place-items: center; } .ge-rail__brand > .ge-logo { grid-area: 1 / 1; inline-size: 20px; block-size: 20px; opacity: 0; transition: opacity var(--dur) var(--ease); } .ge-rail__brand > .ge-logo--on-dark { opacity: .72; } :root[data-theme="light"] .ge-rail__brand > .ge-logo--on-dark { opacity: 0; } :root[data-theme="light"] .ge-rail__brand > .ge-logo--on-light { opacity: .72; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .ge-rail__brand > .ge-logo--on-dark { opacity: 0; } :root:not([data-theme]) .ge-rail__brand > .ge-logo--on-light { opacity: .72; } } .ge-rail__brand:hover > .ge-logo, .ge-rail__brand:focus-visible > .ge-logo { opacity: 0; } .ge-rail__brand:hover > .ge-logo--brand, .ge-rail__brand:focus-visible > .ge-logo--brand { opacity: 1; } /* Utilitar: orice icoană care trebuie să poarte marca, oriunde în conținut. */ .ge-ic--brand { color: var(--brand-earth); } .ge-rail__spacer { flex: 1 1 auto; min-block-size: var(--s4); } @media (max-width: 720px) { .ge-rail { inset-block: auto 0; inset-inline: 0; inline-size: auto; block-size: var(--ge-rail-w); flex-direction: row; justify-content: flex-start; padding-inline: var(--s2); border-inline-end: 0; border-block-start: 1px solid var(--line-control); } } /* ─────────────────────── sertarul de alarme ─────────────────────── Se deschide din chipul de alarme al barei. Deliberat NU e permanent deschis: pe un laptop de 13" ar mânca o treime din lățime. Cerința operațională — starea de alarmare mereu vizibilă — e satisfăcută de chipul din bară, care poartă severitatea maximă și numărul; coada în sine se deschide la nevoie, fără să părăsești pagina. */ .ge-drawer { position: fixed; inset-block: var(--ge-bar-h) 0; inset-inline-end: 0; z-index: 95; inline-size: min(var(--ge-drawer-w), 92vw); display: flex; flex-direction: column; background: var(--surface); border-inline-start: 1px solid var(--line-control); transform: translateX(101%); transition: transform var(--dur) var(--ease); font-size: var(--fs-sm); } .ge-drawer[data-open="1"] { transform: none; } .ge-drawer__head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4) var(--s2); border-block-end: 1px solid var(--line); } .ge-drawer__title { font-family: var(--mono); font-size:var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 0; font-weight: 400; } .ge-drawer__list { overflow-y: auto; flex: 1; } .ge-alarm { display: flex; gap: 10px; padding: 11px var(--s4); border-block-end: 1px solid var(--line); text-decoration: none; color: inherit; } .ge-alarm:hover { background: var(--surface-2); } .ge-alarm__t { font-size: var(--fs-sm); line-height: 1.35; margin: 0 0 3px; } .ge-alarm__m { font-family: var(--mono); font-size:var(--fs-xs); color: var(--text-2); margin: 0; } .ge-drawer__foot { padding: var(--s3) var(--s4); border-block-start: 1px solid var(--line); } /* ─────────────────────────── componente ─────────────────────────── */ /* Severitate: culoare + FORMĂ + text. Niciodată doar culoare (WCAG 1.4.1, IEC 60073). Formele vin din icons.svg (`sv-*`) și sunt distincte în alb-negru, la 12 px. */ /* Cifre de lățime egală: fără ele, „56/56" → „4/56" rebalansează tot ce urmează la fiecare interogare de 60 s. E aceeași problemă ca numele paginii, doar la scară mai mică — și apare sub ochii cuiva care tocmai se uită la indicator. */ .ge-bar .ge-sev, .ge-bar .ge-chip { font-variant-numeric: tabular-nums; } .ge-sev { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); white-space: nowrap; } .ge-sev svg, .ge-sevmark { inline-size: 12px; block-size: 12px; flex: none; } /* Un SVG fără dimensiune intrinsecă se întinde la lățimea containerului. Marca de severitate ajunge și în chipuri care nu au `.ge-sev` ca ancestor, deci clasa proprie e obligatorie. */ .ge-sev--crit { color: var(--sev-crit); } .ge-sev--major { color: var(--sev-major); } .ge-sev--minor { color: var(--sev-minor); } .ge-sev--warn { color: var(--sev-warn); } .ge-sev--indet { color: var(--sev-indet); } .ge-sev--clear { color: var(--sev-clear); } /* Ținta rămâne ≥24 px chiar în modul compact — prin înălțime minimă, nu prin dimensiunea vizuală a chenarului (soluția permisă explicit de WCAG 2.5.8). */ .ge-chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 24px; padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--line-control); background: none; color: var(--text-2); font-family: var(--mono); font-size:var(--fs-xs); white-space: nowrap; cursor: pointer; } .ge-chip:hover { background: var(--surface-2); color: var(--ink); } .ge-chip[aria-pressed="true"], .ge-chip.is-on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); } /* Selectorul de limbă e un