/* ============================================================================ panou.css — limbajul vizual Boosted Mode, varianta C: "aparatul pe masă". ---------------------------------------------------------------------------- O regulă, din care se deduce tot restul: CE E CORP E GRI. CE AFIȘEAZĂ INFORMAȚIE E NEGRU. Pagina e masa: fundal aproape negru, cu o grilă fină. Aparatul (`.aparat`) e un obiect gri care stă pe ea. Înăuntrul lui, tot ce arată o valoare — rânduri, indici, readout-uri — e un display negru (`.disp`). De ce contează regula, nu paleta: paleta se poate ține minte trei pagini, apoi cineva pune gri pe ceva care afișează informație și limbajul se rupe fără ca nimeni să poată spune de ce. Regula se poate verifica. TEMĂ UNICĂ, intenționat. Nu există `prefers-color-scheme` aici. Fundalul, culorile și cerneala sunt scrise explicit peste tot, ca pagina să arate la fel indiferent de setarea sistemului. (Pagina veche Brain a avut două teme și a ieșit al treilea limbaj, nici negru nici gri — de aia s-a rescris.) Înlocuiește `bos.css` treptat, pagină cu pagină. Cele două NU se încarcă împreună: `bos.css` are `--ink` cu altă valoare și fundal alb pe body. ========================================================================== */ :root{ /* --- masa: fundalul paginii --- */ --gr:#0C0D0F; --gr2:#141619; --gr3:#1C1F23; /* `--ink3` era #7C8386 si pica pragul pe orice display mai deschis decat masa: 4,29:1 pe --gr3, 3,84:1 pe carcasa neagra deschisa — 13 locuri, toate text mic (9-14px), unde pragul e 4,5:1. Masurat pe cel mai deschis fundal pe care chiar e folosit, #888F92 e cea mai INCHISA cerneala care trece peste tot (4,51 acolo, 5,92 pe masa). Se plateste cu ierarhia: distanta pana la --ink2 se strange de la 30 la 18 de trepte. Merita — o cerneala „mai linistita" care nu se citeste nu e mai linistita, e absenta. */ --ink:#EDEEEA; --ink2:#9AA0A2; --ink3:#888F92; --rule:#23262A; --rule2:#191C1F; /* --- corpul aparatului: gri, niciodată informație --- */ --ch:#E7E5E0; --ch2:#CFCDC6; --ch3:#D9D7D1; --chink:#17181A; --chink2:#43474A; --chink3:#4E5255; --chrule:#B4B2AB; --chrule2:#C6C4BD; /* --- display: negru, întotdeauna, și pe corp și pe masă --- */ --disp:#0C0D0F; --disp2:#16181B; --dispink:#EDEEEA; --dispink2:#9AA0A2; --disprule:#25282C; /* --- acțiune: o singură dată pe ecran --- */ --or:#F04E23; /* --- cerneala suprafetei curente --- Astea sunt singurele culori de text pe care le citesc componentele. Masa le pune aici la valorile ei; `.aparat` si `.disp` le rescriu local. Efectul: un display negru pus INAUNTRU unui corp gri isi ia singur cerneala potrivita, fara nicio regula de descendenta. Fara mecanismul asta, `.aparat p` prindea si paragrafele din display si le facea gri de corp pe negru (2,07:1). */ --sink:var(--ink); --sink2:var(--ink2); --sink3:var(--ink3); --srule:var(--rule); --stag:var(--gr3); /* LUCIREA. Muchia de sus, cea care face un card sa para turnat, nu desenat. Pana acum era scrisa de mana in fiecare pagina: `rgba(255,255,255,.7)`. Merge cat timp cardul sta pe crem. Pe masa neagra, acelasi alb la .7 spala fundalul si duce cerneala deschisa sub 3:1 — exact ce s-a intamplat pe articole dupa mutarea pe `.foaie`: cardul isi lua fundalul din `--stag` (token, deci corect), dar lucirea ramasese alba fixa (nu token, deci gresita). Regula: fundal si lucire se iau din ACELASI set. */ --slic:rgba(255,255,255,.06); /* --- cele șase culori de display. Doar în zone negre și pe indicatoare. Pe corpul gri nu au ce căuta: acolo nu luminează nimic. --- */ --cy:#25BFC9; --bl:#3A72E8; --ye:#F3B01B; --gn:#3FA463; --mg:#C74BA0; --rd:#DC3B22; --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --cond:"Barlow Semi Condensed","Archivo",sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; --ed:"Bricolage Grotesque","Archivo",sans-serif; /* doar conținut, nu UI */ --wrap:1180px; --pas:8px; /* pasul de spațiere; tot ce e ritm e multiplu */ --r:12px; --r2:16px; /* raze: display / corp */ } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-padding-top:78px} @media(max-width:640px){html{scroll-padding-top:92px}} /* bara are 2 randuri pe telefon: ~85px */ /* Cuprinsul de pe termeni (14 pastile) si politica (11) sar cate 8000px dintr-un clic. Fara alunecare, cititorul nu afla in ce directie a plecat documentul. `scroll-padding-top` de mai sus aseaza deja tinta sub bara lipita; asta adauga doar drumul. Sub `no-preference`, ca sa nu fie nevoie de contra-regula in blocul de reduced-motion. */ @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{ margin:0; background:var(--gr); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Grila mesei. `fixed`, nu `absolute`: la scroll masa stă pe loc și aparatele trec peste ea — altfel grila „curge" odată cu conținutul și dispare efectul. */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px); background-size:36px 36px; } /* Tot conținutul stă peste grilă. Fără asta, orice fundal opac o acoperă oricum, dar elementele transparente ar rămâne dedesubt. */ .wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px; position:relative; z-index:1} @media(max-width:640px){.wrap{padding:0 18px}} h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.032em; line-height:1.06; text-wrap:balance; color:inherit} h1{font-size:clamp(31px,4.6vw,54px); line-height:1.02} h2{font-size:clamp(23px,3vw,34px)} h3{font-size:19px; letter-spacing:-.026em; line-height:1.2} h4{font-size:17.5px; letter-spacing:-.02em} /* peste corpul de 16px: scara nu se inverseaza */ p{margin:0} a{color:inherit} img,svg,video{max-width:100%; height:auto} :focus-visible{outline:2px solid var(--or); outline-offset:3px; border-radius:2px} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important} } /* ============================================================================ 1 · ETICHETE MICI Cele trei care înlocuiesc japoneza. Fiecare spune ceva verificabil. ========================================================================== */ /* Antet de secțiune: liniuță portocalie + cuvinte în condensat. */ .eyebrow{ font-family:var(--cond); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sink3); display:flex; align-items:center; gap:10px; } .eyebrow::before{content:""; width:16px; height:1px; background:var(--or); flex:none} /* `.semn` — SEMNATURA DE SECTIUNE. Un ecran mic, cat o unghie, cu pictograma sectiunii aprinsa in culoarea familiei ei. Se pune ca prim copil in `.shead__sus`, inaintea supratitlului. De ce exista: sablonul de antet e identic pe toate sectiunile si pe toate paginile — dinadins, ca pe un aparat, unde doua module arata la fel si se deosebesc prin ce scrie pe ecran. Semnatura e exact acel „ce scrie pe ecran": singura piesa care difera, si singurul reper prin care recunosti unde ai ajuns cand derulezi. Cand exista semnatura, liniuta portocalie a supratitlului dispare: doua marcaje inaintea acelorasi cuvinte se anuleaza reciproc. Selectorul e frate direct, nu `:has()` — semnatura sta oricum imediat inaintea supratitlului. */ .semn{ width:30px; height:30px; flex:none; display:grid; place-items:center; background:var(--disp); border:1px solid var(--disprule); border-radius:8px; box-shadow:0 2px 10px -4px rgba(0,0,0,.6) inset; } .semn svg{width:17px; height:17px; display:block; color:var(--fam,var(--dispink2)); filter:drop-shadow(0 0 3px currentColor)} .semn + .eyebrow::before{display:none} /* `.cit` — CITIREA REALĂ. Merge în hero, o singură dată pe pagină, sub titlu. Regula de conținut, nu de stil: aici se scriu doar cifre care sunt adevărate azi. Dacă produsul se schimbă, linia asta se schimbă — de asta există. */ .cit{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.185em; text-transform:uppercase; color:var(--sink3); display:flex; flex-wrap:wrap; align-items:center; gap:0 10px; line-height:1.9; } .cit b{color:var(--or); font-weight:500} /* separatorii · */ /* `.cit--linii` — citire pe linii. Pe ecran ingust, un `.cit` lung se rupe oriunde si separatorul `·` ramane spanzurat la capat de rand („53 DE PIESE ·"). Nu se poate lega de fraza urmatoare: fiecare bucata de text si fiecare e propriul element flex (vezi panou.js pasul 2), iar nbsp-ul din markup e taiat la spargerea in litere, fiindca `\s` din JS il include. Solutia e sa nu mai fie nimic de rupt: o fraza pe linie, fara separatori. */ @media(max-width:640px){ .cit--linii{gap:0} .cit--linii .cit__b{flex:0 0 100%} /* ultima fraza ramane `auto`, altfel cursorul `::after` — si el element flex — e impins pe un al patrulea rand, singur. Asa sta lipit de ea. */ .cit--linii .cit__b:last-of-type{flex:0 0 auto; margin-right:8px} .cit--linii b{display:none} } /* `.serie` — SERIA. Indice scurt în antetul secțiunilor: BM—04 / TEMELIA / RO */ .serie{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--sink3); display:inline-flex; flex-wrap:wrap; align-items:center; gap:0 8px; } .serie b{color:var(--or); font-weight:500} /* slash-urile */ /* `` — NUMELE de după slash (`BM—01.2 / ALTERNATIVELE`). Cerut de Ali, 27-Aug, în aceeași discuție în care marcajul portocaliu a ieșit din titluri: accentul mărcii stă pe indicele tehnic, nu pe cuvinte din propoziții. Aici portocaliul are un rol de citit — separă CODUL (neutru, de căutat) de NUMELE secțiunii (de recunoscut) — iar chipurile stau pe corp negru, unde `--or` dă 5,39:1. `` fără cursiv: elementul e ales pentru că e scurt și inline, nu pentru înclinare; `.serie` e oricum majuscule cu spațiere largă. */ .serie i{color:var(--or); font-style:normal} /* Eticheta neutră, fără liniuță. Pentru sub-titluri de câmp în interiorul modulelor, unde `.eyebrow` ar pune încă o liniuță portocalie de prisos. */ .lbl{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.19em; text-transform:uppercase; color:var(--sink3)} /* ============================================================================ 2 · CELE DOUĂ SUPRAFEȚE ========================================================================== */ /* CORPUL. Un obiect gri pe masă. Umbra e lungă și joasă, ca a unui lucru care chiar stă pe ceva; `inset` alb sus e muchia care prinde lumina. */ .aparat{ position:relative; z-index:1; background:linear-gradient(180deg,var(--ch),var(--ch2)); border:1px solid var(--chrule); border-radius:var(--r2); color:var(--chink); --sink:var(--chink); --sink2:var(--chink2); --sink3:var(--chink3); --srule:var(--chrule); --stag:var(--ch2); --slic:rgba(255,255,255,.8); padding:32px 30px 30px; box-shadow:0 1px 0 var(--slic) inset, 0 26px 50px -26px rgba(0,0,0,.85); } @media(max-width:640px){.aparat{padding:22px 16px 18px; border-radius:13px}} .aparat--plat{box-shadow:0 1px 0 var(--slic) inset} /* fără umbră: în grile dese */ /* FOAIE. Ce sta pe masa, nu ce e facut din corp de aparat. Regula casei e „CE E CORP E GRI" — dar ea nu spune ca orice bloc e corp. Proza nu e o piesa de aparat: e ce scrie pe ea. Pana acum orice sectiune primea `.aparat` din reflex, si de-aia paginile ieseau 30–45% crem in loc de ~12%, cat are acasa. `.foaie` e acelasi asezamant, fara corp: fara fundal, fara chenar, fara umbra, aliniat la marginea lui `.wrap` exact ca antetul de sectiune de deasupra lui. Nu rescrie --sink: pe masa neagra, valorile din `:root` sunt deja cele bune. Exista doar ca ancora de nume — ca sa se vada in markup ca blocul a fost pus pe masa intentionat, nu ca i-a cazut clasa. */ .foaie{position:relative; z-index:1} /* DISPLAY. Negru, oriunde ar sta. Border negru, nu `--rule`: pe corpul gri o linie gri ar face displayul să pară o gaură, nu un ecran montat. */ .disp{ background:var(--disp); color:var(--dispink); --sink:var(--dispink); --sink2:var(--dispink2); --sink3:var(--dispink2); --srule:var(--disprule); --stag:var(--disp2); --slic:rgba(255,255,255,.05); border:1px solid #000; border-radius:var(--r); box-shadow:0 2px 14px -4px rgba(0,0,0,.55) inset; } .disp--adanc{background:var(--disp2)} /* Card simplu, direct pe masă. Pentru zone care nu sunt „aparate": note, liste secundare, subsol. */ .card{background:var(--gr2); border:1px solid var(--rule); border-radius:var(--r); padding:22px} .card h3{margin-bottom:8px} .card p{color:var(--sink2); font-size:14.6px; line-height:1.56} /* ============================================================================ 3 · RÂNDURI DE DISPLAY (cele cinci straturi, liste de motoare, tabele mici) ========================================================================== */ .randuri{display:grid; gap:9px} /* Randul e un display cu alt nume: isi ia aceeasi cerneala. */ .rand{--sink:var(--dispink); --sink2:var(--dispink2); --sink3:var(--dispink2); --srule:var(--disprule); --stag:var(--disp2)} .rand{ display:grid; grid-template-columns:50px 1fr; border-radius:11px; overflow:hidden; background:var(--disp); border:1px solid #000; box-shadow:0 2px 12px -4px rgba(0,0,0,.6) inset; } .rand__n{ display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--sink); background:var(--disp2); border-right:1px solid var(--disprule); } .rand__b{padding:14px 18px; display:flex; gap:16px; align-items:baseline; flex-wrap:wrap} /* Indicatorul colorat. `align-self:stretch` ca să meargă cap-coadă pe rând, nu să stea pe linia de bază a textului. */ .rand i{display:block; width:4px; align-self:stretch; flex:none; border-radius:1px} .rand__i{width:20px; height:20px; flex:none; display:block; align-self:center; color:var(--fam,var(--sink3)); filter:drop-shadow(0 0 3px currentColor)} /* `.ic` — GLIFA INLINE, fara stapan. Aceeasi bucata de lumina ca `.rand__i`, dar nu apartine unui `.rand`: se pune oriunde o etapa, un pas sau o linie de lista are nevoie de semnul ei. De ce o clasa noua si nu `.rand__i` refolosit: numele ar minti, iar cine cauta peste sase luni de ce e o pictograma acolo ar cauta un `.rand` care nu exista. Regula de amplasare (din plan, P5): DOAR pe suprafete negre. Pe sasiul crem glifa isi pierde stralucirea si devine un desen, nu un bec — de-aia randurile din `.aparat` de pe preturi au ramas cu liniuta lor, nu cu pictograma. */ .ic{width:18px; height:18px; flex:none; display:block; align-self:center; color:var(--fam,var(--sink3)); filter:drop-shadow(0 0 3px currentColor)} .ic--mic{width:13px; height:13px} .rand__t{font-weight:800; font-size:17px; letter-spacing:-.02em; min-width:16ch; color:var(--sink)} .rand__d{font-size:14.5px; line-height:1.5; color:var(--sink2); flex:1; min-width:min(100%,24ch); max-width:66ch} @media(max-width:520px){ .rand{grid-template-columns:40px 1fr} .rand__b{padding:12px 14px} } /* ============================================================================ 4 · ACȚIUNE Portocaliul e o singură acțiune pe ecran. A doua se face `.btn--linie`. ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--or); color:var(--gr); text-decoration:none; font-family:var(--sans); font-weight:700; font-size:15.5px; letter-spacing:-.012em; padding:13px 24px; border:1px solid var(--or); border-radius:9px; transition:filter .15s ease, transform .15s ease; } .btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)} .btn--linie{background:transparent; color:var(--sink); border-color:var(--sink3)} .btn--linie:hover{border-color:var(--sink); filter:none} /* ============================================================================ 5 · SECȚIUNI ȘI RITM ========================================================================== */ section{padding:72px 0; border-top:1px solid var(--rule2)} @media(max-width:640px){section{padding:48px 0}} .shead{display:flex; flex-direction:column; gap:13px; margin-bottom:34px; max-width:74ch} .shead__sus{display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap} .shead__sus .serie{margin-left:auto} .sdek{color:var(--sink2); font-size:16.6px; line-height:1.6; max-width:66ch} .sdek b,.sdek strong{color:var(--sink); font-weight:600} /* `.sdek` sta sub titlul de sectiune. `.lede` deschide un bloc de proza — primul paragraf urca la 18px, restul raman la 16px, si asa apare o treapta acolo unde inainte erau cinci paragrafe identice. Nu se pun amandoua. */ .lede{font-size:18px; line-height:1.58; color:var(--sink2); max-width:64ch} .lede strong{color:var(--sink); font-weight:600} /* Grile. `auto-fit` cu minmax, nu un număr fix de coloane: la 3 elemente pe un ecran de 900px un `repeat(3,1fr)` fix produce coloane de 240px cu text spart în două litere pe rând. */ .grid{display:grid; gap:12px} .grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .grid--4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} /* ============================================================================ 6 · BARA DE SUS ========================================================================== */ /* Bara stă pe ecran. Paginile sunt lungi, iar navigația e singura ieșire din ele — fără `sticky`, orice schimbare de pagină cere un scroll până sus. `z-index` peste tot ce e conținut; fundalul e opac dinadins, altfel textul de dedesubt s-ar citi prin ea. */ .bara{position:sticky; top:0; z-index:20; border-bottom:1px solid var(--rule); background:linear-gradient(180deg,#101215,var(--gr)); box-shadow:0 14px 28px -26px rgba(0,0,0,.95)} .bara__in{max-width:var(--wrap); margin:0 auto; padding:11px 28px; display:flex; align-items:center; gap:22px; flex-wrap:wrap} @media(max-width:640px){.bara__in{padding:10px 18px; gap:12px}} /* Sigla, în proporțiile din design/marca/lockup.html — glifă, fir, apoi BOOSTED cu MODE dedesubt. Înainte era turtită pe un rând, cu glifa mai mică decât wordmark-ul: se citea ca „simbol lipit lângă text", nu ca siglă. Totul se scalează din `--h` = înălțimea glifei. */ .bara__marca{--h:34px; display:flex; align-items:center; gap:14px; margin-right:auto; text-decoration:none; color:var(--ink); line-height:1} @media(max-width:640px){.bara__marca{--h:28px; gap:11px}} /* glifa: `currentColor`, deci ia culoarea barei. Vezi design/marca/README.md — inline dinadins, prin ar iesi neagra pe fundal negru. */ .bara__glifa{height:var(--h); width:calc(var(--h)*194/147); flex:none; display:block} .bara__marca .bara__rule{display:block; width:1px; align-self:stretch; margin:2px 0; background:currentColor; opacity:.22; flex:none} @media(max-width:400px){.bara__marca .bara__rule{display:none}} .bara__wm{display:flex; flex-direction:column; gap:3px} .bara__wm b{font-weight:800; font-size:calc(var(--h)*.68); letter-spacing:-.035em; line-height:.9} /* `margin-right` negativ anulează spațiul pe care `letter-spacing` îl lasă după ultima literă — altfel MODE pare împins spre stânga față de BOOSTED. */ .bara__wm span{font-family:var(--mono); font-weight:500; font-size:calc(var(--h)*.24); letter-spacing:.34em; margin-right:-.34em; color:var(--ink3)} .bara__nav{display:flex; gap:20px; flex-wrap:wrap} .bara__nav a{font-family:var(--cond); font-weight:600; font-size:14.5px; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; color:var(--ink2)} .bara__nav a:hover{color:var(--ink)} .bara__nav a[aria-current]{color:var(--ink); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--or); text-decoration-thickness:2px} /* ============================================================================ 7 · SUBSOL ========================================================================== */ .subsol{position:relative; z-index:1; border-top:1px solid var(--rule); padding:34px 0 54px; margin-top:16px} .subsol__in{display:flex; gap:16px; align-items:baseline; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink3)} .subsol__in a{color:var(--ink3); text-decoration:none} .subsol__in a:hover{color:var(--ink)} .subsol__in b{color:var(--or); font-weight:500} /* Firma din spatele marcii. Mai mica si mai discreta decat navigatia de deasupra, dar cu tracking mic — un CUI cu litere departate se citeste greu. */ .subsol__lege{margin:14px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink3)} .subsol__lege b{color:var(--ink2); font-weight:500} /* ============================================================================ 8 · UTILITARE ========================================================================== */ .mono{font-family:var(--mono); font-variant-numeric:tabular-nums} .cifra{font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em} .tag{display:inline-block; font-family:var(--cond); font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:3px 8px; border-radius:3px; background:var(--stag); color:var(--sink2)} .tag--or{background:var(--or); color:var(--gr)} /* Orice e mai lat decât pagina — tabele, cod, diagrame — derulează în cutia lui. Pagina nu are voie să deruleze lateral niciodată. */ .late{overflow-x:auto; -webkit-overflow-scrolling:touch} .sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0} /* ============================================================================ MIȘCAREA ------------------------------------------------------------------------ Principiul, ca să nu ajungă decor: pe un aparat adevărat nimic nu se mișcă degeaba. Fiecare animație de aici corespunde unei stări reale — un display care pornește, un rând care se aprinde, un semnal care pleacă din Brain spre motoare. Dacă o mișcare nu spune nimic, nu intră. Trei reguli dure: 1. Conținutul e vizibil ȘI FĂRĂ JavaScript. Scriptul doar adaugă `.e-viu`; starea implicită din CSS e „totul se vede". Dacă scriptul cade, pagina arată exact ca înainte, doar nemișcată. Invers — să pornești de la opacity:0 și să te bazezi pe JS — înseamnă pagină albă la prima eroare. 2. Fiecare animație rulează O DATĂ. Ce pulsează la nesfârșit e o excepție care trebuie să aibă un motiv scris — azi sunt trei, toate cu unul: cursorul din citirea reală (semn de aparat pornit, nu animație de atenție), `puls-px` pe pictogramele care marchează „mâna ta", și fanta de abilități din hero sub 760px, unde ciclul e singura cale de a vedea abilitățile 2–8. Pe desktop aceeași fantă NU ciclează — lista se citește întreagă, deci mișcarea n-ar adăuga nimic. A patra excepție se discută înainte, nu după. 3. `prefers-reduced-motion` oprește tot, nu doar „reduce". Cine a cerut asta a cerut-o serios. ========================================================================== */ /* Scriptul marchează ca să știm că avem cu ce anima. Fără el, toate regulile de mai jos sunt inerte și conținutul rămâne la starea lui normală. */ .js [data-intra]{opacity:0; transform:translateY(14px)} .js [data-intra].e-viu{animation:intra .56s cubic-bezier(.22,.85,.3,1) forwards} @keyframes intra{to{opacity:1; transform:none}} /* --- displayul pornește --------------------------------------------------- Ordinea contează: întâi o linie subțire care se deschide pe orizontală (tubul care se aprinde), apoi conținutul. Scurt — 420ms cap-coadă. */ .js [data-tub]{position:relative} .js [data-tub]::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--dispink); opacity:0; transform:scaleX(0); pointer-events:none; } .js [data-tub].e-viu::after{animation:tub .5s ease-out forwards; animation-delay:calc(.1s + var(--t0,0s) + var(--i,0) * 70ms)} /* Motoarele stau dupa firul care coboara din Brain: intai pleaca semnalul, pe urma se aprind ele. `--t0` e exact timpul de drum al semnalului. CAPCANA, platita pana pe 2026-08-27: regula era scrisa `.grid > [data-tub]`, deci intarzierea de asteptare-a-semnalului se aplica TUTUROR grilelor de pe site — opt, din care una singura (`.motoare`, in brain.html) sta chiar sub un fir. Restul plateau 620ms de asteptare pentru un semnal care nu exista in pagina lor. Masurat pe acasa: primul lucru dintr-un card aparea la 1,22s si se aseza la 1,98s — asta se simtea ca „reveal-urile apar tarziu". Regula: o intarziere care exista ca sa astepte ALT obiect se leaga de obiectul ala, nu de forma lui de asezare in pagina. */ .js .grid.motoare > [data-tub]{--t0:.34s} @keyframes tub{ 0%{opacity:.9; transform:scaleX(0)} 45%{opacity:.9; transform:scaleX(1)} 100%{opacity:0; transform:scaleX(1)} } /* Continutul displayului vine DUPA linie, nu inaintea ei. Fara asta linia trece peste text deja vizibil si arata a defect de ecran, nu a pornire. Scriptul infasoara in textul pus direct in display (bara de sursa), ca regula sa aiba pe ce sa prinda si acolo. */ .js [data-tub] > *{opacity:0; transform:translateY(6px)} .js [data-tub].e-viu > *{animation:intra .44s cubic-bezier(.22,.85,.3,1) forwards; animation-delay:calc(.26s + var(--t0,0s) + var(--i,0) * 70ms)} /* Doua exceptii: bucatile care au deja miscarea lor. Citirea se scrie literă cu literă, randurile urca in cascada — nu le mai stingem si o data aici. */ .js [data-tub] > .cit, .js [data-tub].e-viu > .cit, .js [data-tub] > .randuri, .js [data-tub].e-viu > .randuri{opacity:1; transform:none; animation:none} /* Textul pus direct in display, infasurat de script. Element inventat (), ca sa nu fie prins de niciun selector de pagina gen `.taietura span`. */ .disp__t{display:inline} /* Pastila de culoare a motorului clipeste scurt, ca barele randurilor: aceleasi doua zone, aceeasi limba. */ .js [data-tub].e-viu .pat{animation:pastila .44s ease-out forwards; animation-delay:calc(.32s + var(--t0,0s) + var(--i,0) * 70ms)} @keyframes pastila{0%,60%{filter:brightness(2.6)} 100%{filter:none}} /* --- rândurile se aprind în cascadă -------------------------------------- Ca niște canale care urcă pe un mixer. `--i` e pus de script pe fiecare rând; fără el, delay-ul e 0 și se aprind toate deodată — tot corect. */ .js [data-rand]{opacity:0} .js [data-rand].e-viu{animation:intra .38s cubic-bezier(.22,.85,.3,1) forwards; animation-delay:calc(var(--i,0) * 70ms + .1s)} .js [data-rand] i{transform:scaleY(0); transform-origin:center} .js [data-rand].e-viu i{ animation:bara .4s cubic-bezier(.2,.9,.3,1) forwards; animation-delay:calc(var(--i,0) * 70ms + .26s); } @keyframes bara{ 0%{transform:scaleY(0); filter:brightness(2.2)} 70%{transform:scaleY(1); filter:brightness(2.2)} 100%{transform:scaleY(1); filter:none} } /* --- citirea reală se scrie ---------------------------------------------- Litera cu literă, o dată, la 16ms. Scriptul sparge textul în -uri și pune `--i` pe fiecare. Dacă scriptul nu rulează, textul e deja acolo, întreg — de asta reveal-ul e pe `opacity` și nu pe inserare de conținut. */ .js .cit[data-scrie] i{opacity:0; font-style:normal} /* bucata de text = UN element flex, ca inainte de spargere; literele se rup pe cuvinte inauntrul ei, nu una cate una. */ .cit__b{display:inline; font-style:normal} .js .cit[data-scrie].e-viu i{animation:litera .01s linear forwards; animation-delay:calc(var(--i,0) * 22ms + .26s)} @keyframes litera{to{opacity:1}} /* Cursorul: singurul lucru de pe pagină care clipește la nesfârșit. E semnul că aparatul e pornit, nu o animație de atenție. */ .js .cit[data-scrie]::after{ content:""; display:inline-block; width:.62em; height:1.05em; margin-left:.1em; background:var(--or); vertical-align:-.18em; opacity:0; } .js .cit[data-scrie].e-viu::after{animation:cursor 1.06s steps(1) infinite; animation-delay:calc(var(--n,0) * 22ms + .26s)} @keyframes cursor{0%,50%{opacity:1} 51%,100%{opacity:0}} /* --- semnalul pe magistrală ---------------------------------------------- Firul dintre sursă și motoare nu e decor: arată exact ce spune secțiunea, că profilul pleacă din Brain spre fiecare motor. Trece o dată. */ .js [data-fir]{position:relative; overflow:hidden} .js [data-fir]::after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--or); opacity:0; } .js [data-fir].e-viu::after{animation:semnal .38s cubic-bezier(.5,0,.7,1) forwards; animation-delay:.12s} @keyframes semnal{ 0%{opacity:1; transform:translateY(-100%)} 100%{opacity:1; transform:translateY(100%)} } /* --- butonul -------------------------------------------------------------- O lumină care trece o dată peste el la hover. Nu se repetă cât ții mouse-ul. */ .btn{position:relative; overflow:hidden} .btn::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%); transform:translateX(-120%); } /* Ingradit la mouse real: pe touch, `:hover` ramane lipit dupa tap in multe browsere, deci sclipirea ar porni la atingere — un efect de trecere a cursorului, declansat de un deget care nu trece pe nicaieri. */ @media (hover:hover) and (pointer:fine){ .btn:hover::before{transform:translateX(120%); transition:transform .62s ease-out} } /* --- navigația ------------------------------------------------------------ */ .bara__nav a{transition:color .16s ease} /* --- la tipărire se aprinde tot ------------------------------------------- La print nu ruleaza randarea, deci nici observatorul: fara regula asta, cine da Cmd+P primeste foi albe. Aceeasi problema o are orice randare fara compozitor (fila in fundal, crawler, screenshot automat) — de aceea scriptul are si o plasa pe timp, nu doar observatorul. */ @media print{ .js [data-intra], .js [data-rand], .js .cit[data-scrie] i, .js [data-tub] > *{ opacity:1 !important; transform:none !important; animation:none !important} .js [data-tub]::after, .js [data-fir]::after, .js .cit[data-scrie]::after{display:none !important} body::before{display:none !important} } /* --- oprirea totală ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .js [data-intra], .js [data-intra].e-viu, .js [data-rand], .js [data-rand].e-viu, .js [data-tub] > *, .js [data-tub].e-viu > *, .js [data-tub].e-viu .pat, .js .cit[data-scrie] i{opacity:1 !important; transform:none !important; animation:none !important} .js [data-tub]::after, .js [data-fir]::after, .js .cit[data-scrie]::after, .btn::before{display:none !important} .js [data-rand] i{transform:none !important; animation:none !important} *{transition:none !important} } /* ========================================================================== PIESE DE APARAT — al doilea vocabular (25-Aug) -------------------------------------------------------------------------- Pana aici site-ul avea doua forme: sasiu gri (.aparat) si display negru (.disp). Doua forme repetate pe 12 pagini = toate paginile arata la fel. Piesele de mai jos sunt luate de pe un aparat real: taste late cu bizou, ecrane mici cu pictograme, grila difuzorului, banda de file, afisajul mare si butonul rotativ. Fiecare pagina ia doua-trei, nu pe toate. Toate citesc doar variabilele de suprafata, deci merg si pe gri si pe negru. ========================================================================== */ /* --- capat de control: eticheta cu LED ------------------------------------ Pe aparat, deasupra fiecarui buton sta un LED si un cuvant. LED-ul aprins spune ce e activ acum. Aici: aprins = lucrul se intampla, stins = nu inca. */ .capat{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--sink3); } .capat::before{ content:""; width:5px; height:5px; border-radius:50%; flex:none; background:var(--or); box-shadow:0 0 7px rgba(240,78,35,.8); } .capat--stins::before{background:transparent; box-shadow:inset 0 0 0 1.5px var(--sink3)} /* becul nears e un inel gol, nu un punct inchis: umplut cu --srule ajunge invizibil pe display (#25282C pe #0C0D0F) si nu se mai citeste ca "stins". */ .capat--verde::before{background:var(--gn); box-shadow:0 0 7px rgba(63,164,99,.7)} .capat--lucru::before{background:var(--ye); box-shadow:0 0 7px rgba(243,176,27,.75)} .capat--oprit::before{background:var(--rd); box-shadow:0 0 7px rgba(220,59,34,.7)} /* --- tasta: buton lat, cu bizou ------------------------------------------- Capul de tasta e turnat: lumina cade de sus, umbra sta dedesubt, iar cand o apesi coboara 2px si umbra se strange. E singurul element din sistem care are volum — de aia se foloseste doar unde chiar e o actiune sau o functie. */ .taste{display:grid; gap:9px} .taste--2{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))} .taste--3{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))} .tasta{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:14px 16px 15px; border-radius:9px; text-align:left; width:100%; background:linear-gradient(180deg,#F4F2EE 0%,#E2E0DA 62%,#D7D5CE 100%); border:1px solid #AFADA6; color:#17181A; text-decoration:none; box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 2px 0 #B2B0A9, 0 5px 11px -4px rgba(0,0,0,.45); transition:transform .1s ease, box-shadow .1s ease; } .tasta__t{font-family:var(--cond); font-weight:700; font-size:16.5px; letter-spacing:.01em; line-height:1.2} .tasta__d{font-size:13.4px; line-height:1.5; color:#4E5255} .tasta .capat{color:#4E5255} a.tasta:hover{box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 2px 0 #B2B0A9, 0 7px 15px -4px rgba(0,0,0,.5)} a.tasta:active,button.tasta:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 #B2B0A9, 0 2px 5px -2px rgba(0,0,0,.45); } /* varianta neagra: aceeasi tasta, turnata in celalalt material */ .tasta--noapte{ background:linear-gradient(180deg,#26282B 0%,#16181B 60%,#0E1012 100%); border-color:#000; color:var(--dispink); box-shadow:0 1px 0 rgba(255,255,255,.09) inset, 0 2px 0 #000, 0 5px 11px -4px rgba(0,0,0,.7); } .tasta--noapte .tasta__d{color:var(--dispink2)} .tasta--noapte .capat{color:var(--dispink2)} /* varianta portocalie: una singura pe pagina, acolo unde chiar vrei sa apese */ .tasta--foc{ background:linear-gradient(180deg,#F6613A 0%,#F04E23 60%,#E85021 100%); border-color:#B33413; color:var(--gr); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 2px 0 #A93110, 0 5px 13px -4px rgba(240,78,35,.55); } .tasta--foc .tasta__d{color:#2A0E04} .tasta--foc .capat{color:#2A0E04} .tasta--foc .capat::before{background:var(--gr); box-shadow:none} /* --- pictograma pe ecran mic ---------------------------------------------- Un lucru desenat se citeste inaintea unui lucru scris. Ecranul e mic si negru, exact ca afisajul mare, ca sa se vada ca e tot informatie afisata, nu decor lipit pe sasiu. */ .picte{display:grid; gap:8px} .picte--4{grid-template-columns:repeat(4,1fr)} .picte--5{grid-template-columns:repeat(5,1fr)} .picte--6{grid-template-columns:repeat(6,1fr)} @media(max-width:900px){.picte--6{grid-template-columns:repeat(4,1fr)}} @media(max-width:620px){ /* Patru bucati pe trei coloane dau 3+1 orfan. Cele cu patru cad direct la doua; cinci si sase raman pe trei, ca acolo randurile ies pline. */ .picte--4{grid-template-columns:repeat(2,1fr)} .picte--5,.picte--6{grid-template-columns:repeat(3,1fr)} } @media(max-width:330px){ .picte--4,.picte--5,.picte--6{grid-template-columns:repeat(2,1fr)} } .pict{ background:var(--disp); border:1px solid #000; border-radius:10px; box-shadow:0 2px 12px -4px rgba(0,0,0,.55) inset; padding:16px 10px 13px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; color:var(--dispink); text-decoration:none; } .pict svg{width:30px; height:30px; display:block; flex:none; color:var(--fam,var(--dispink))} .pict b{font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--dispink2); line-height:1.35} .pict__n{font-family:var(--mono); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--dispink); line-height:1} /* --- CHEIA DE CULOARE ------------------------------------------------------ Sus, la variabile, stau sase culori de display. Pana azi era folosita UNA singura, o data (verdele, la un LED). De-aia toate pictogramele ieseau gri: culorile existau, regula care sa le dea cuiva nu. Regula are doua sisteme si NU se amesteca: STARE — doar pe LED-uri (`.capat`) si pe randuri de masuratoare. Spune ce se intampla ACUM. Verde = gata. Chihlimbar = in lucru. Rosu = oprit sau in scadere. Inel gol = inca nu. FAMILIE — pe pictograme si pe semnatura de sectiune. Spune DESPRE CE e vorba si e fixa pe tot site-ul: acelasi subiect are aceeasi culoare pe orice pagina. cyan masurare si analiza (diagnostic, cifre, research, Brain) albastru sistem si distributie (aparatul, aplicatia, canale, publicare) magenta om si voce (identitate, fundatie, cine esti, Alex) chihlimbar timp, efort, atentie (ore, volum, productie, franele) verde rezultat confirmat (lead-uri, dovada, bifa) rosu ce te costa (pierdere, scadere, factura) portocaliu MANA TA (butoane si doar acolo unde faci tu ceva) Repetitiile sunt dovada ca e o cheie, nu decor: trei sectiuni sunt magenta fiindca toate trei vorbesc despre acelasi lucru. Daca fiecare sectiune ar fi avut culoarea ei, culoarea n-ar mai fi insemnat nimic. Portocaliul e singurul care apare in ambele sisteme, si de-aia ramane la ~10%: unde e portocaliu, se apasa. Culoarea traieste DOAR pe negru si pe display. Pe sasiul crem nu intra nicio pictograma colorata — acolo e corp, nu informatie. Mecanic: nu se scrie `color`, se scrie `--fam`. Motivul e specificitatea — `.tablou__i` si `.etapa__i` isi pun culoarea din stilul paginii, care se incarca DUPA foaia asta, deci un `color` de aici ar pierde tacut. O variabila pe element se citeste in `var(--fam, ...)` chiar de la elementul pe care sta. `.p-*` se pune pe orice ; `.pict--*` se pune pe cutie si coboara singur. */ .p-cy,.pict--cy{--fam:var(--cy)} .p-bl,.pict--bl{--fam:var(--bl)} .p-mg,.pict--mg{--fam:var(--mg)} .p-ye,.pict--ye{--fam:var(--ye)} .p-gn,.pict--gn{--fam:var(--gn)} .p-rd,.pict--rd{--fam:var(--rd)} .p-or,.pict--or{--fam:var(--or)} a.pict:hover{border-color:var(--or)} /* La apasare, `sunet.js` scoate deja un clic si o bataie — dar nu se aprindea nimic. Feedback fara lumina, intr-un limbaj in care lumina E feedback-ul. Fara tranzitie si fara geometrie: sasiul nu se misca, doar creste curentul. Aceeasi valoare ca la `@keyframes pastila`, ca sa fie acelasi bec. */ a.pict:active svg{filter:brightness(2.2)} /* --- grila difuzorului ---------------------------------------------------- Suprafata gaurita: singurul loc din sistem unde nu scrie nimic. Are rost tocmai fiindca odihneste ochiul intre doua blocuri pline de text. */ .grila{ background-color:#C8C6BF; background-image:radial-gradient(circle at center,#8B8982 1.45px,transparent 1.6px); background-size:8.5px 8.5px; border:1px solid var(--chrule); border-radius:var(--r); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 9px -5px rgba(0,0,0,.4) inset; min-height:96px; } /* RESPIRO, SCOASA 26-Aug-2026. Era o banda de `.grila` pusa intre sectiuni, pe ideea (corecta) ca la fiecare 3-4 sectiuni ochiul are nevoie de un loc unde nu scrie nimic. Gresita era piesa aleasa: `.grila` e masca difuzorului, adica o bucata din CORPUL unui aparat. Pusa singura pe masa neagra, fara sasiu in jur, nu citea ca odihna — citea ca o caseta goala lasata din greseala. Ali, la revizie: „o grila aiurea pusa pe desktop". Golul chiar exista deja: sectiunile au 72px sus si 72px jos, deci 144px de masa goala intre oricare doua. Banda mai adauga 76px si ii UMPLEA cu un obiect — adica facea exact invers decat isi propunea. Lectia, mai lata decat cazul: intr-un limbaj in care fiecare element e o piesa dintr-un aparat, o piesa scoasa din aparat nu mai inseamna nimic. Spatiul gol se face cu spatiu, nu cu un desen de spatiu gol. `.grila` RAMANE — e folosita corect in `media` si `poveste`, unde chiar sta inauntrul unui corp. Doar banda libera a plecat. */ .grila--noapte{ background-color:#141619; background-image:radial-gradient(circle at center,#2A2D31 1.45px,transparent 1.6px); border-color:#000; } /* --- banda de file -------------------------------------------------------- Sus pe aparat stau intrarile si iesirile, si una e aprinsa. Aici marcheaza unde te afli intr-un sir — etape, canale, sectiuni. */ .file{display:flex; gap:4px; flex-wrap:wrap; align-items:center} .fila{ font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.19em; text-transform:uppercase; text-decoration:none; padding:7px 13px 6px; border-radius:5px; background:var(--stag); color:var(--sink3); border:1px solid var(--srule); white-space:nowrap; } .fila--activ{background:var(--or); color:var(--gr); border-color:#B33413} .fila--noapte{background:#16181B; color:var(--dispink2); border-color:#000} a.fila:hover{color:var(--sink)} a.fila--activ:hover{color:var(--gr)} /* --- afisajul mare -------------------------------------------------------- Cifra sta pe fantoma ei — toate segmentele stinse, ca pe un LCD adevarat. Se pune `data-fantoma` cu acelasi numar de caractere, numai optari. */ .afisaj{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap} .segment{ position:relative; display:inline-block; font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; font-size:clamp(40px,6.4vw,62px); line-height:.95; letter-spacing:.01em; color:var(--sink); } /* Fantoma e un element real cu aria-hidden, nu `content:attr()`: continutul generat e citit cu voce tare de o parte din cititoarele de ecran, si ar iesi "88 53 piese pe luna". Ca element, il pot ascunde explicit. */ .segment i{ position:absolute; inset:0; font-style:normal; color:var(--sink); opacity:.13; pointer-events:none; } .segment__u{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sink3)} /* --- butonul rotativ ------------------------------------------------------ Arata o pozitie pe o scara, nu se invarte. Se foloseste o data pe pagina, acolo unde chiar exista o limita: cate proiecte incap intr-o luna. */ .rotativ{display:flex; align-items:center; gap:16px; flex-wrap:wrap} .rotativ__b{ width:62px; height:62px; border-radius:50%; flex:none; position:relative; background:radial-gradient(circle at 50% 34%,#F6F4F0,#DDDBD5 62%,#C3C1BA); border:1px solid #A9A7A0; box-shadow:0 2px 0 #AFADA6, 0 6px 14px -5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.95) inset; } .rotativ__b::after{ content:""; position:absolute; left:50%; top:7px; width:2px; height:17px; margin-left:-1px; border-radius:1px; background:var(--or); transform-origin:50% 24px; transform:rotate(var(--unghi,0deg)); } .rotativ__b--noapte{ background:radial-gradient(circle at 50% 34%,#2A2D31,#17191C 62%,#0D0F11); border-color:#000; box-shadow:0 2px 0 #000, 0 6px 14px -5px rgba(0,0,0,.7); } .rotativ__t{font-family:var(--cond); font-weight:700; font-size:16px; color:var(--sink)} .rotativ__d{font-size:13.6px; line-height:1.5; color:var(--sink2); max-width:34ch} @media(max-width:560px){ .taste--2,.taste--3{grid-template-columns:1fr} } /* ========================================================================== MASA CA SUPRAFATA PRINCIPALA — Calea B (26-Aug) -------------------------------------------------------------------------- Pana aici fiecare sectiune statea intr-un `.aparat`: 12 placi crem identice pe pagina de acasa, una sub alta. Rezultatul masurat: 33% crem, si nimic nu se mai citea ca obiect special, fiindca totul era la fel. Acum corpul gri e rar — se foloseste doar unde chiar pui mana pe aparat (hero, mecanismul, treptele, inchiderea). Restul continutului sta DIRECT pe masa neagra. CAPCANA, prinsa exact la mutarea asta: un `.disp` pus direct pe masa e invizibil. Fundalul lui (`--disp`, #0C0D0F) e identic cu al mesei (`--gr`, #0C0D0F), iar rama lui e neagra dinadins — regula veche presupunea ca in spate e crem. Deci valorile DE BAZA devin cele „pe masa" (fundal cu o treapta mai sus, rama gri), iar in `.aparat` se intorc la negru pur, unde chiar au sens. ========================================================================== */ .disp{background:var(--disp2); border-color:var(--rule)} .aparat .disp{background:var(--disp); border-color:#000} .rand{border-color:var(--rule)} .aparat .rand{border-color:#000} .pict{border-color:var(--rule)} .aparat .pict{border-color:#000} /* `--adanc` ramane ce era: panoul din panou. In aparat e cu o treapta mai sus decat displayul din jur; pe masa coincide cu el, si acolo nu se foloseste. */ .disp--adanc{background:var(--disp2)} /* Cardul de pe masa. Inlocuieste placile crem din interiorul aparatelor desfiintate: acelasi rol (doua-trei bucati de text alaturate), alt material. */ .card--or{border-color:var(--rule); background:var(--gr3)} .card h4{margin-bottom:8px} .card__e{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--sink3); margin-bottom:11px} /* ========================================================================== PICTOGRAME PIXEL (26-Aug) -------------------------------------------------------------------------- Setul vechi era desenat cu linii de 1,6px pe o grila de 24. Setul nou e o matrice de 12x12 pixeli patrati, cu spatiu intre ei — ca un afisaj cu puncte, nu ca un desen. Sursa e `design/pictograme/genereaza.py`: acolo fiecare pictograma e o harta de caractere, si scriptul verifica singur ca toate randurile au 12 coloane. Lumina e a lor, nu a fundalului: `drop-shadow` cu `currentColor`, deci o pictograma portocalie lumineaza portocaliu fara nicio regula in plus. ========================================================================== */ .pict svg{filter:drop-shadow(0 0 3px currentColor)} .picte--mare .pict{padding:20px 10px 16px; gap:12px} .picte--mare .pict svg{width:46px; height:46px} .picte--mare .pict__n{font-size:30px; letter-spacing:-.02em} @media(max-width:620px){ .picte--mare .pict svg{width:38px; height:38px} .picte--mare .pict__n{font-size:25px} } /* Aprinderea. Pornesc una dupa alta, ca segmentele unui afisaj care se trezeste: intai prea tare, apoi se aseaza la stralucirea de repaus. `steps(5)` dinadins — o rampa lina ar arata a fade, nu a alimentare. */ .js [data-pict] svg{opacity:0} .js [data-pict].e-viu svg{ animation:aprinde-px .46s steps(5,end) forwards; animation-delay:calc(var(--i,0) * 60ms + .1s); } @keyframes aprinde-px{ 0% {opacity:0; filter:drop-shadow(0 0 0 currentColor)} 45% {opacity:1; filter:brightness(2.4) drop-shadow(0 0 10px currentColor)} 100%{opacity:1; filter:drop-shadow(0 0 3px currentColor)} } /* Semnatura se aprinde odata cu antetul ei — `.shead` e deja marcat `data-intra` de panou.js, deci nu mai trebuie nimic in JS. Intarzierea mica o pune dupa linia de titlu, nu inaintea ei: intai citesti, apoi se aprinde ecranul. */ .js .semn svg{opacity:0} .js .e-viu .semn svg{animation:aprinde-px .46s steps(5,end) .22s forwards} @media (prefers-reduced-motion: reduce){ .js .semn svg{opacity:1 !important; animation:none !important} } /* Respiratia. DOAR pe pictogramele care marcheaza „mana ta" — singurele doua locuri din mecanism unde chiar trebuie sa faca omul ceva. Restul stau aprinse si nemiscate: daca pulseaza tot, nu mai inseamna nimic. */ .js [data-pict].pict--puls.e-viu svg{ animation:aprinde-px .46s steps(5,end) forwards, puls-px 3.6s ease-in-out 1.4s infinite; animation-delay:calc(var(--i,0) * 60ms + .1s), 1.4s; } @keyframes puls-px{ 0%,100%{filter:drop-shadow(0 0 3px currentColor)} 50% {filter:brightness(1.3) drop-shadow(0 0 9px currentColor)} } /* ========================================================================== TASTA DE SUNET (26-Aug) -------------------------------------------------------------------------- O pun in bara, la capatul din dreapta. Butonul e injectat de `sunet.js`, nu scris in HTML: altfel ar fi aparut in 15 pagini un buton care nu face nimic daca scriptul nu se incarca. Fara script, nu exista nici butonul. ========================================================================== */ .bara__sunet{ display:flex; align-items:center; gap:7px; flex:none; background:var(--gr2); border:1px solid var(--rule); border-radius:7px; padding:6px 10px; cursor:pointer; color:var(--ink3); font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.19em; text-transform:uppercase; transition:color .16s ease, border-color .16s ease; } .bara__sunet:hover{color:var(--ink2); border-color:var(--ink3)} .bara__sunet i{ width:6px; height:6px; border-radius:50%; flex:none; display:block; background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink3); } .bara__sunet[aria-pressed="true"]{color:var(--ink2)} .bara__sunet[aria-pressed="true"] i{ background:var(--or); box-shadow:0 0 7px rgba(240,78,35,.8); } @media(max-width:640px){ .bara__in{position:relative} .bara__sunet{position:absolute; top:13px; right:18px} } @media(max-width:520px){.bara__sunet span{display:none} .bara__sunet{padding:7px}} @media (prefers-reduced-motion: reduce){ .js [data-pict] svg, .js [data-pict].e-viu svg, .js [data-pict].pict--puls.e-viu svg{opacity:1 !important; animation:none !important} } @media print{ .js [data-pict] svg{opacity:1 !important; animation:none !important} .bara__sunet{display:none !important} } /* ============================================================================ 9 · ÎNTREBĂRI (acordeon) Erau trei copii identice ale acelorasi opt reguli, in `index`, `servicii` si `preturi` — deci orice schimbare trebuia facuta de trei ori, si a treia oara se uita. Componenta e a casei, sta o data aici. Paginile pastreaza doar ce au in plus (`.intreb__i` pe acasa). ========================================================================== */ .intrebari{padding:0} .intreb{border-top:1px solid var(--disprule)} .intreb:first-child{border-top:0} .intreb summary{list-style:none; cursor:pointer; display:flex; gap:16px; align-items:baseline; padding:16px 18px; font-weight:700; font-size:15.6px; letter-spacing:-.015em; color:var(--sink)} .intreb summary::-webkit-details-marker{display:none} .intreb summary::after{content:"+"; margin-left:auto; font-family:var(--mono); font-weight:500; color:var(--or); flex:none; transition:color .16s ease} /* Semnul deschis se stinge: tasta apasata nu mai are curent. */ .intreb[open] summary::after{content:"–"; color:var(--sink3)} .intreb p{padding:0 18px 17px; font-size:14.8px; line-height:1.58; color:var(--sink2); max-width:70ch} /* Linkul din raspuns urca la `--sink`: pe `--sink2` era exact culoarea textului din jur, deci se deosebea numai prin linia de dedesubt. Era scris de mana in `servicii`; de cand il cere si manualul, sta aici. */ .intreb a{color:var(--sink); text-underline-offset:3px} /* Singurul loc din site unde continutul chiar teleporta: raspunsul aparea dintr-o data si impingea pagina cu inaltimea lui. `interpolate-size` face ca `auto` sa fie animabil, deci nu e nevoie de JS care masoara inaltimi. Firefox inca n-are `::details-content` — acolo se deschide instant, adica exact cum era pana acum. Degradare, nu regresie. */ :root{interpolate-size:allow-keywords} .intreb::details-content{ block-size:0; opacity:0; overflow:hidden; transition:block-size .26s cubic-bezier(.22,.85,.3,1), opacity .18s ease-out, content-visibility .26s allow-discrete; } .intreb[open]::details-content{block-size:auto; opacity:1} @media(prefers-reduced-motion:reduce){ .intreb::details-content{transition:none} } /* ============================================================================ 10 · INDICELE LATERAL (doar desktop) Panoul ingust de pe marginea din stanga, construit de `indice.js` din antetele sectiunilor. Vezi comentariul de sus al fisierului aceluia pentru de ce e generat si nu scris in pagini. SE NUMESTE `.indice`, NU `.cuprins`, si nu din gust: `.cuprins` era deja luat de banda de pastile din capul lui `termeni` (14) si `politica` (11), scrisa in `