/* Hallmark · macrostructure: Stat-Led · H4 knobs: number=tabular display, qualifier=below, secondary=row-of-four * theme: studied-DNA (source: url — authkit.com + app.aave.com, synthesised) · studied: yes * nav: N9 Edge-aligned minimal (two densities) · footer: Ft5 Statement * observed-fonts: Untitled Sans (AuthKit, commercial — not used) · Inter (Aave) * observed-paper: #05060F (AuthKit) · #1B2030 (Aave) · observed-accent: #6E56CF (AuthKit, ~2% footprint) * enrichment: Tier-B hand-built SVG (pipeline density field, real data) * tone: technical · genre: atmospheric (modern-minimal discipline on data surfaces) * rhythm: split by page type — ceremony surfaces generous, data surfaces dense */ /* ============================================================ TOKENS * * Un singur set de tokeni pentru tot site-ul. Densitatea NU e o a doua * paleta -- e o a doua scara de spatiu si de corp, aplicata prin * `data-density` pe . Culoarea nu se schimba intre cele doua, ca * paginile sa se simta acelasi produs. * * De ce OKLCH si nu hex: verdele si albastrul-palid trebuie sa aiba * aceeasi luminozitate perceputa cand stau unul langa altul in banda de * indicatori. In hex asta se nimereste; in OKLCH se scrie. */ :root { /* -------------------------------------------------- suprafata * Scara vine de la Aave: hartie, card ridicat cu un fir de contur alb * la 8%, si o treapta scufundata pentru randurile de tabel. Inclinatia * e verde-albastruie, nu albastra ca la AuthKit -- verdele e al nostru * si trebuie sa se simta in intuneric, nu doar in accent. */ /* Antracitul marcii (#20272D), din 2 octombrie 2026 -- inainte, un * negru-verzui ramas de la marca verde. Hartia sta o treapta sub antracit, * ca un card ridicat sa poata urca pana la el. */ --paper: oklch(19.5% 0.013 244); --paper-raised: oklch(24% 0.015 244); --paper-sunken: oklch(16.5% 0.012 244); --paper-slab: oklch(14% 0.010 244); /* Firul de contur. Alb la opacitate mica, nu gri opac: peste orice * treapta de suprafata da acelasi contrast relativ, deci un card * ridicat si unul scufundat au granite la fel de vizibile. */ --line: oklch(100% 0 0 / 0.075); --line-strong: oklch(100% 0 0 / 0.14); --line-faint: oklch(100% 0 0 / 0.04); /* -------------------------------------------------- cerneala * `ink-display` e mutarea de la AuthKit: titlurile nu sunt albe, sunt * un albastru-palid rece. Alb pur pe negru pur taie ochiul; palidul * asezat citeste ca lumina, nu ca hartie. */ /* Treptele de cerneala, urcate pe 3 septembrie 2026 dupa o masuratoare, nu * dupa o parere: `tools/contrast.py` (reparat sa citeasca OKLCH) dadea * `--ink-3` la 4,44:1 pe hartia principala si `--ink-faint` la 2,84:1, * adica sub pragul AA de 4,5. Asa a si fost reclamat: „subtextele sunt * scrise cu un gri care le face aproape imposibil de citit". * * Ierarhia se pastreaza -- patru trepte, tot mai stinse -- doar ca nu mai * coboara sub prag. Diferenta dintre trepte ramane vizibila fiindca ochiul * citeste RAPORTUL dintre ele, nu valoarea absoluta. */ --ink: oklch(96% 0.006 85); --ink-display: oklch(97% 0.014 85); --ink-2: oklch(85% 0.008 240); --ink-3: oklch(73% 0.010 240); --ink-faint: oklch(63% 0.010 240); /* -------------------------------------------------- accent * Bleul siglei, din 18 septembrie 2026. Verdele de la inceput se batea cap * in cap cu datele -- pe harta verdele inseamna „solar" si „aviz valabil", * deci marca imprumuta un inteles pe care nu-l are. Chihlimbarul a tinut o * zi. Bleul nu inseamna nimic pe harta noastra, si asta e exact ce vrem de * la o culoare de marca. * * Amprenta: mica, dupa regula AuthKit. Un singur buton principal per * ecran, plus starea „viu". Nu inunda. */ /* Chihlimbarul siglei, din 2 octombrie 2026 (bleul a tinut din 18 * septembrie). Doua roluri: `--accent-fill` e chiar culoarea din kit, * pentru suprafete pline -- butonul principal, bulina activa --, iar * `--accent` e culoarea de TEXT. Pe intuneric sunt aceeasi; pe hartie * difera, fiindca chihlimbarul scris pe alb iese la 2:1. */ --accent: oklch(75.6% 0.150 73); /* #E9A21B */ --accent-hover: oklch(81% 0.140 78); --accent-dim: oklch(64% 0.130 70); --accent-ink: oklch(26.8% 0.015 244); /* #20272D, antracitul siglei */ --accent-wash: oklch(31% 0.060 70); --accent-line: oklch(54% 0.100 72); --accent-fill: #E9A21B; --accent-fill-hover: #F2B33A; /* Stari. Culoarea rezervata pentru stare, ca la Aave -- nu pentru * decor. Chihlimbarul si rosul stau la aceeasi luminozitate ca * starea „viu", ca sa nu sara unul in fata celorlalte intr-un tabel. * * „Viu" a fost verde pana pe 18 septembrie 2026. Verdele e conventia * potrivita cand starea buna e rara; aici „Contract de racordare" si „ATR * valabil" sunt cazul obisnuit, deci verdele tapeta fiecare lista si marca * ajungea sa fie verde, nu bleu. Acum e cianul marcii: aceeasi familie cu * accentul, dar cu 28 de grade de nuanta intre ele, cat sa nu se confunde * un cip de stare cu un buton. */ --state-live: oklch(80% 0.120 205); /* Impins spre portocaliu de cand accentul e chihlimbar: doua chihlimbare * alaturate intr-un tabel nu se mai deosebesc. */ /* Coral, nu chihlimbar: chihlimbarul e al marcii din 2 octombrie 2026, iar * un cip „Expira in 30 de zile" nu trebuie sa semene cu un buton. */ --state-warn: oklch(72% 0.160 40); --state-dead: oklch(66% 0.190 22); --state-idle: oklch(62% 0.020 195); /* Singurul verde ramas in carcasa, si are un motiv: pe o cifra care creste, * verdele nu e decor, e insusi intelesul. Se foloseste DOAR pe delte * numerice (pretul PZU), niciodata pe o stare sau pe un cip. */ --state-good: oklch(78% 0.170 168); /* -------------------------------------------------- litera */ --font-display: 'Saira', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* Scara de corp. Doua baze, comutate de `data-density`: * ceremonie -> 16px, ca textul de vanzare sa se citeasca linistit * date -> 14px, exact baza Aave, ca sa incapa randurile * Tot ce e mai jos e in `rem`, deci scara intreaga se muta cu baza. */ /* Cele trei trepte mici au crescut cu un pixel fiecare pe 3 septembrie * 2026. 11px pentru o nota de sub o grila si 13px pentru descrierea unui * card sunt marimi de subsol de contract, nu de pagina care vinde ceva. */ --text-2xs: 0.75rem; --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.375rem; --text-4xl: 3rem; --text-display-s: clamp(2.5rem, 5vw, 3.75rem); --text-display: clamp(3rem, 7.5vw, 6rem); /* Cifra-erou. Singurul lucru din pagina care are voie sa fie enorm. */ --text-figure: clamp(4rem, 13vw, 11rem); --leading-tight: 1.04; --leading-snug: 1.22; --leading-body: 1.6; --leading-loose: 1.72; /* Tracking negativ pe display, ca la amandoua referintele. Space Grotesk * la corp mare are goluri intre litere pe care le vezi doar peste 3rem. */ --track-figure: -0.045em; --track-display: -0.032em; --track-tight: -0.015em; --track-normal: 0; --track-label: 0.08em; /* -------------------------------------------------- spatiu * Scara de 4pt. Valorile de sectiune (`--space-section*`) sunt singurele * care se schimba intre densitati -- restul raman fixe, ca butoanele si * cartonasele sa fie identice pe tot site-ul. */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-section: var(--space-3xl); --space-section-lede: var(--space-lg); --measure: 62ch; --measure-tight: 48ch; /* 84rem, cat bara -- `.bar` isi tine singura `--shell-max: 84em`. Au fost * 78rem pana pe 2 septembrie 2026, si diferenta se vedea: marca din bara * incepea cu 48 px in stanga primului card de dedesubt. O latime, peste * tot, iar cardurile din prima pagina cresc odata cu ea. */ --shell-max: 84rem; --shell-pad: var(--space-lg); /* -------------------------------------------------- forma * Raza de 4px vine de la Aave si e o alegere, nu o scapare: coltul scurt * citeste a instrument. Pastila e rezervata unui singur lucru -- chipul * de stare -- ca sa insemne ceva cand apare. */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; --rule: 1px; /* -------------------------------------------------- miscare * Trei primitive, atat: number-tick pe cifra-erou, fade-up la intrarea * sectiunii, si tragerea firului sub titluri. Restul e static. */ --dur-fast: 120ms; --dur-mid: 220ms; --dur-slow: 420ms; --dur-tick: 900ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* -------------------------------------------------- adancime * Umbre foarte putine. Pe intuneric, ridicarea se face din * luminozitate (treapta de suprafata), nu din umbra -- umbra pe negru * e invizibila si costa la randare. */ --shadow-pop: 0 12px 32px oklch(0% 0 0 / 0.5); --glow-accent: 0 0 0 1px var(--accent-line), 0 8px 24px oklch(75.6% 0.15 73 / 0.18); /* Atmosfera capului de pagina. Foarte putina croma dinadins: la 0,04 se * simte ca o lumina in spatele titlului, la 0,10 arata a fundal colorat -- * iar un fundal colorat pe o suprafata de DATE trage ochiul de la cifre. */ --aura: oklch(76% 0.15 73 / 0.06); --aura-2: oklch(70% 0.06 240 / 0.05); /* Adancimea suprafetelor de comanda: un fir de lumina sus, o umbra scurta * dedesubt. Aceeasi reteta ca la Aave, si motivul e ca un camp care nu e * nici ridicat nici scufundat nu arata ca se poate atinge. */ --relief: inset 0 1px 0 oklch(100% 0 0 / 0.045), 0 1px 2px oklch(0% 0 0 / 0.35); --glow-chip: 0 0 14px oklch(80% 0.12 205 / 0.18); /* -------------------------------------------------- atmosfera * Fasciculul de lumina de la AuthKit, in bleul marcii. Doua straturi: un * halou lat si difuz, si un miez mai ingust si mai clar. Unul singur arata * a pata; doua arata a lumina. */ /* -------------------------------------------------- coropleta * Scara judetelor: o singura nuanta, cinci trepte, „mai mult" inseamna * „mai deschis" pe intuneric si „mai inchis" pe hartie. * * Sta AICI, nu in `ui/harta.css`: harta se construieste in `web/build.py`, * cu foaia ei, iar scara e citita si de carcasa. A fost o vreme cand o * foloseau doua desene din doua foi diferite -- harta mare si una mica, pe * prima pagina -- si de atunci a ramas in tokeni, unde ii e locul: o scara * scrisa de doua ori inseamna, mai devreme sau mai tarziu, ca „peste 5.000 * MW" arata altfel intr-un desen decat in celalalt. */ /* Coropleta judetelor. Scara merge de la un gri-ardezie -- pamant, nu gol -- pana la bleul marcii, si urca pe luminozitate, nu doar pe saturatie: asa se citeste ordinea si de catre cine nu deosebeste nuantele. Treapta de jos era aproape negru pe fond negru, si judetele fara cerere pareau gauri in tara, nu judete linistite. */ /* Scara e domolita dinadins, cu croma mica: punctele de racordare poarta chiar accentul marcii, iar un judet colorat tare in aceeasi familie le inghitea -- bulinele se citeau ca petece de coropleta. Judetul e fundal, bulina e obiect; treapta de sus a coropletei ramane sub ea si ca luminozitate, si ca saturatie. */ /* Otel rece sub punctele chihlimbar: judetul e fundal, punctul e obiect. */ --wash-1: #252c33; --wash-2: #28394a; --wash-3: #2f4f66; --wash-4: #3d6b88; --wash-5: #5389ab; --wash: #f0b43c; } /* -------------------------------------------------- densitatea de date * Aceeasi paleta, alta scara. Se pune pe . * Corpul scade la 14px (baza Aave), sectiunile se string, masura de * lectura dispare -- pe paginile de date nu se citeste proza, se scaneaza * randuri. */ :root[data-density="date"] { --space-section: var(--space-xl); --space-section-lede: var(--space-sm); --measure: 72ch; /* 84rem, ca pe restul site-ului. Era 96rem cand baza era de 14px (1.344px); * cu baza urcata la 16px, 96rem ar fi insemnat 1.536px, adica un tabel mai * lat decat ecranul pe care se citeste. Latimea reala ramane cea de pana * acum. */ --shell-max: 84rem; --leading-body: 1.5; } /* -------------------------------------------------- tema deschisa * WattsPlaza e intunecat din nastere si asa ramane: amandoua referintele sunt * intunecate, iar datele de retea se citesc mai bine pe fundal inchis. * Dar butonul de tema exista deja in produs si oamenii il folosesc, deci * varianta deschisa se scrie -- nu se mosteneste din intuneric. */ :root[data-theme="light"] { --paper: oklch(98.6% 0.004 85); --paper-raised: oklch(100% 0 0); --paper-sunken: oklch(96.4% 0.006 85); --paper-slab: oklch(93.5% 0.008 85); --line: oklch(26.8% 0.015 244 / 0.11); --line-strong: oklch(26.8% 0.015 244 / 0.20); --line-faint: oklch(26.8% 0.015 244 / 0.05); /* Aceeasi masuratoare, cealalta tema: pe hartie, `--ink-faint` iesea la * 3,48:1 si `--ink-3` era la limita. Se inchid amandoua. */ --ink: oklch(24% 0.015 244); --ink-display: oklch(22% 0.016 244); --ink-2: oklch(36% 0.014 244); --ink-3: oklch(45% 0.012 244); --ink-faint: oklch(52% 0.010 244); /* Pe hartie bleul deschis nu poate ramane deschis: la 75% pe alb, un link * scris cu accentul iese sub 2:1. Aceeasi culoare, coborata pana unde trec * si textul, si butonul cu alb pe el. */ /* Textul colorat: chihlimbar coborat pana trece de 4,5:1 pe alb. Butonul * ramane pe `--accent-fill`, chihlimbarul adevarat, cu text antracit. */ /* Saturat, nu stins: la croma 0,13 chihlimbarul inchis iesea maroniu * („culoare cacanie", 2 octombrie 2026). La 0,155, pe aceeasi nuanta cu * marca, e chihlimbar ars (#b25b00) si trece de 4,5:1 pe alb (4,8). */ --accent: oklch(56% 0.155 62); --accent-hover: oklch(50% 0.155 60); --accent-dim: oklch(70% 0.120 70); --accent-ink: oklch(26.8% 0.015 244); --accent-wash: oklch(95% 0.045 80); --accent-line: oklch(80% 0.110 75); --state-live: oklch(55% 0.110 207); --state-warn: oklch(57% 0.170 40); --state-dead: oklch(52% 0.180 25); --state-idle: oklch(56% 0.020 240); --state-good: oklch(56% 0.140 168); --shadow-pop: 0 12px 32px oklch(26.8% 0.015 244 / 0.12); --glow-accent: 0 0 0 1px var(--accent-line), 0 8px 24px oklch(75.6% 0.15 73 / 0.20); --aura: oklch(76% 0.15 73 / 0.08); --aura-2: oklch(60% 0.06 240 / 0.04); --relief: inset 0 1px 0 oklch(100% 0 0 / 0.75), 0 1px 2px oklch(0% 0 0 / 0.07); --glow-chip: 0 0 14px oklch(55% 0.11 207 / 0.16); /* Pe hartie deschisa fasciculul nu poate fi lumina -- lumina peste alb * nu se vede. Devine o umbra colorata foarte slaba, cat sa ramana un * centru de greutate in capul paginii. */ /* Aceeasi scara pe lumina: hartie calda la baza, bleul marcii la varf. Capatul de jos e cald dinadins -- un judet fara cerere trebuie sa arate a uscat, nu a apa. */ --wash-1: #f1efe9; --wash-2: #e4e8ec; --wash-3: #c9d3dc; --wash-4: #9fb2c2; --wash-5: #6f8aa0; --wash: #20272d; } /* Culorile tehnologiilor pe listele-card (/atr, /in-pregatire). Aceleași ca * pe hartă (harta.css), fiindcă listele nu încarcă foaia hărții. * * Mutate pe 2 octombrie 2026, odată cu marca pe chihlimbar: solarul galben * și stocarea portocalie stăteau de o parte și de alta a chihlimbarului, și * un punct de pe hartă semăna cu butonul principal. Solarul urcă spre * lămâie, stocarea preia violetul, iar hidro devine albastru -- apa. */ :root { --teh-solar: #f2dc4a; --teh-stocare: #a983f5; --teh-eolian: #2ad39a; --teh-hidro: #4ba6ff; --teh-altele: #8b9196; } :root[data-theme="light"] { --teh-solar: #e8be00; --teh-stocare: #7b4fd6; --teh-eolian: #1baf7a; --teh-hidro: #1f78d1; --teh-altele: #6b7072; }