Dark mode — înainte și după

Ce	Din	În	Se propagă în	Pagini	Risc
1Text secundar	`alb 40%`	`alb 55%`	42 locuri, 12 fișiere	toate	mic
2Mov pe text	`#af18ed`	`#c697d8`	6 locuri (token nou)	home, de-ce-noi, portofoliu	mediu
3Text principal	`#ffffff`	`alb 92%`	196 locuri, 14 fișiere	toate	mic
4Umbre	`blur 48–80px negru`	`inel 1px + contact`	3 prin token + 6 hardcodate	~210	mediu
5Scara de elevație	`fără nume`	`--elev-0…3`	doar tokens.mjs	zero (doar nume)	nul
6Greutatea textului	`400`	`385`	1 loc (`body`)	toate	mic

1Textul secundar urcă de la 40% la 55%

Etichetele, subtitlurile și notele mici foloseau alb la 40% opacitate. La 13–14px, cât sunt scrise, ochiul le vede ca pată cenușie, nu ca litere. Nu e o preferință de stil: 40% dă Lc 26, sub pragul absolut de 30.

înainte · alb 40%

Evenimente livrate

3.000+evenimente

800+costume proprii

APCA Lc 26.2sub pragul minim (30)

după · alb 55%

Evenimente livrate

3.000+evenimente

800+costume proprii

APCA Lc 43.4bun pentru text mic auxiliar

Unde se schimbă: src/config/tokens.mjs — o linie, --text-subtle
Se propagă în: 42 de locuri, 12 fișiere
CaseStudy · ThemesIndex · WhyPage · BlogPost · BlogIndex · CatalogTiles · CoursesPage · LegalPage · Ecosystem · ThemePage · main.css · craft.css
Ce vezi schimbat: etichetele de sub cifre, „DESCRIPTION / CATEGORIES" pe pagini de act, kicker-ele de secțiune, datele de pe blog, notele din paginile legale

2Un mov separat, numai pentru text

--primary (#af18ed) e saturat la 86%. Ca fundal de buton, cu alb peste, e perfect — rămâne neatins acolo. Ca culoare de literă pe fundal închis dă Lc 28.7 și „curge" dincolo de marginea glifei. Tokenul nou păstrează exact același hue (283°) și coboară doar saturația și luminozitatea: S86→45%, L51→72%. Brandul nu se mișcă, doar litera devine lizibilă.

înainte · #af18ed

18ani de scenă

3.000+evenimente

800+costume proprii

APCA Lc 28.7H 283 · S 86% · L 51%

după · #c697d8

18ani de scenă

3.000+evenimente

800+costume proprii

APCA Lc 55.0H 283 · S 45% · L 72%

Unde se schimbă: token nou --primary-text în tokens.mjs, plus 6 înlocuiri de color:
Se propagă în: 6 locuri, țintit:
WhyPage.astro:194 — cifrele
main.css:3970/73/76/79 — .stat-number
main.css:5002 — separatorul din titlul de portofoliu
Ce NU se atinge: butoanele .btn-primary, bordurile de hover, glow-urile, gradientul de brand, logoul. Toate rămân pe --primary saturat.

3Albul principal coboară la 92%

Albul pur pe aproape-negru dă Lc 107, adică peste pragul de la care conturul literei începe să strălucească — efect de halou, resimțit mai ales de cititorii cu astigmatism, și obositor la text lung. La 92% contrastul rămâne Lc 95, cu mult peste orice cerință, dar textul stă liniștit în pagină.

înainte · #ffffff · greutate 400

Facem show-uri cu costume proprii, artiști ai noștri și un singur om de sunat. De 18 ani avem grijă să iasă exact cum l-ai aprobat.

Costumele le construim în atelierul nostru, iar repetițiile se fac pe scena din sediu înainte de orice eveniment.

APCA Lc 107.6peste 90 = zona de halou

după · alb 92% · greutate 385

Facem show-uri cu costume proprii, artiști ai noștri și un singur om de sunat. De 18 ani avem grijă să iasă exact cum l-ai aprobat.

Costumele le construim în atelierul nostru, iar repetițiile se fac pe scena din sediu înainte de orice eveniment.

APCA Lc 95.0peste pragul de 75 cu marjă mare

Unde se schimbă: tokens.mjs — o linie, --text
Se propagă în: 196 de locuri, 14 fișiere — e culoarea implicită de text a întregului site
Ce vezi schimbat: orice titlu și orice paragraf, pe toate cele 412 pagini. Cea mai largă dintre cele șase, și cea mai discretă la bucată.

4Umbra neagră devine inel de lumină

Pe fundalul nostru (#0d0d0d) o umbră neagră mută luminanța de la 0,0040 la 0,0012 — o diferență pe care ochiul n-o vede, dar al cărei blur de 80px se plătește la fiecare redesenare, mai ales pe telefon. Marginea care chiar se citește pe întuneric e o linie de lumină de 1px. Umbra rămâne, mai strânsă, doar ca ancoră de contact.

înainte · blur 48px negru

Sediul și atelierul

Birou, atelier și sală de repetiții — vizite doar cu programare.

0 16px 48px rgba(0,0,0,.44)marginea de sus se pierde în fundal

după · inel 1px + contact

Sediul și atelierul

Birou, atelier și sală de repetiții — vizite doar cu programare.

0 0 0 1px alb 10%, 0 16px 40px negru 60%cardul are contur pe toate laturile

Unde se schimbă: tokens.mjs — --shadow-card și --shadow-raised; plus 6 umbre hardcodate mutate pe token
Se propagă în: 9 elemente:
.contact-info · .contact-map__frame
.themes-cta__inner · .act-detail__info
.act-cta-banner__inner · .prod-cta__inner
+ 3 prin token (carduri portofoliu)
Pagini atinse: ~210 — două dintre elemente (.act-detail__info, .act-cta-banner__inner) sunt pe fiecare din cele 204 pagini de act

5Scara de elevație primește nume

Site-ul avea deja șase suprafețe, în ordine bună de luminozitate, dar fără un nume care să spună care e mai sus. Cel mai încurcat: --surface-deep („adânc") e de fapt mai deschis decât --bg, deci mai sus. Adaug patru aliasuri peste valorile existente. Zero schimbare vizuală — e singura modificare din listă pe care nu ai cum s-o vezi. Rostul ei e ca următoarea persoană care adaugă un card să urce o treaptă, nu să pună a 105-a umbră.

înainte · șase nume fără ordine

--bg#0d0d0d

--surface-deep#131517 „adânc", dar mai sus

--surface#1a1a1a

--card-bg#1c1f28

ordinea se deducedin hex, de fiecare dată

după · o scară, patru trepte

--elev-0 paginaL 5,1%

--elev-1 bandăL 8,2%

--elev-2 suprafațăL 10,2%

--elev-3 cardL 13,3%

ordinea e scrisăaceleași culori, alt nume

Unde se schimbă: tokens.mjs — patru aliasuri noi, zero valori atinse
Se propagă în: nicăieri, încă. Sunt disponibile de acum înainte; codul existent rămâne pe numele vechi, care funcționează la fel.
De ce merită: site-ul are 104 declarații de umbră. Fără o scară numită, a 105-a e inevitabilă.

6Greutatea textului coboară la 385

Pe fundal închis, literele deschise par mai groase decât sunt — se numește iluzia de iradiere și e o chestiune de optică, nu de gust. Manrope, fontul nostru de text, e variabil (200–800), deci greutatea se poate cobori fracționar. 385 aduce textul optic înapoi la 400, fără nicio mișcare de layout. Compară cele două panouri de la punctul 3 — acolo e vizibil cel mai bine, pe paragraf lung.

înainte · 400

Costumele le construim în atelierul nostru, iar repetițiile se fac pe scena din sediu înainte de orice eveniment. Artiștii sunt ai noștri.

după · 385

Costumele le construim în atelierul nostru, iar repetițiile se fac pe scena din sediu înainte de orice eveniment. Artiștii sunt ai noștri.

Unde se schimbă: public/css/main.css — o linie, pe body
Se propagă în: tot ce moștenește greutatea, adică textul curent de pe toate paginile. Titlurile au greutăți scrise explicit și nu se mișcă.
Risc: zero layout shift — e același font, aceeași metrică. Dacă nu-ți place, e un singur număr de schimbat înapoi.