/* ============================================================================ _tokens.css — singurul loc în care se definesc valorile de design. DE CE EXISTĂ Înainte, cele 43 de variabile stăteau în site.css, dar restul foilor de stil scriau culorile direct: 251 de valori hexazecimale, 58 distincte, împrăștiate în 12 fișiere. Nu era neglijență — pur și simplu setul de variabile acoperea culorile de brand și nu acoperea deloc NUANȚELE DE STARE: fundalul unui badge verde, marginea unei pastile de avertizare, textul unui mesaj de eroare. Neavând token, fiecare pagină și-a alcătuit propria nuanță, iar aceeași stare a ajuns să arate diferit de la un ecran la altul. Scările de mai jos sunt construite din valorile EFECTIV folosite în proiect, nu inventate: migrarea nu schimbă nicio culoare pe ecran, doar îi dă un nume. CUM SE ÎNCARCĂ Prima foaie de stil, înaintea tuturor celorlalte, în _Layout, _LayoutBare și _LayoutMicrosite. O variabilă CSS trebuie declarată înainte de a fi citită. CELE DOUĂ IDENTITĂȚI Portalul (Director, Admin) și microsite-ul unei școli NU arată la fel, și e intenționat. Portalul e un instrument de căutare: albastru, aerisit, Plus Jakarta Sans. Microsite-ul e site-ul propriu al unei instituții: sobru, cu serif pe titluri, iar cele două culori de accent vin din baza de date, per școală — SetariPunctEducational_TD.tCuloarePrincipala și tCuloareSecundara. Valorile din --ms-* de mai jos sunt implicitul, folosit de școlile care nu și-au setat culorile. ============================================================================ */ :root { /* ---------- Portal: culori de brand ---------- */ --er-color-primary: #0F4C81; --er-color-primary-deep: #0A3B66; --er-color-secondary: #2563EB; --er-color-secondary-hover: #1D4ED8; --er-color-accent: #F5B82E; --er-color-accent-hover: #E0A41C; --er-color-accent-deep: #B98613; /* ---------- Semnificații de stare, valoarea de bază ---------- */ --er-color-success: #10B981; --er-color-danger: #DC2626; --er-color-warning: #F59E0B; /* ---------------------------------------------------------------- Scările de stare, câte patru trepte. Convenția, aceeași pentru toate familiile: -surface fundalul pastilei sau al bandoului -border marginea ei -text textul scris pe acel fundal, cu contrast suficient -strong varianta plină, pentru pictograme și accente Numele spun ROLUL, nu culoarea: „info", nu „albastru". Altfel, ziua în care informativul devine indigo, tokenul ar minți. ---------------------------------------------------------------- */ /* Informativ — folosit pentru niveluri de învățământ, etichete neutre */ --er-info-surface: #DBEAFE; --er-info-surface-soft: #EFF6FF; --er-info-surface-alt: #EBF1FB; --er-info-border: #BFDBFE; --er-info-border-soft: #DEEAFC; --er-info-text: #1E40AF; --er-info-strong: #2563EB; /* Reușită, disponibil, activ */ --er-success-surface: #D1FAE5; --er-success-surface-soft: #F0FDF4; --er-success-border: #A7F3D0; --er-success-border-soft: #BBF7D0; --er-success-text: #047857; --er-success-strong: #059669; --er-success-deep: #0B8F63; /* Atenție, în așteptare, aproape plin */ --er-warning-surface: #FEF3C7; --er-warning-border: #FDE68A; --er-warning-text: #92400E; --er-warning-strong: #D97706; --er-warning-ink: #3A2A00; /* Eroare, plin, dezactivat */ --er-danger-surface: #FEF2F2; --er-danger-surface-alt: #FEE2E2; --er-danger-border: #FECACA; --er-danger-text: #991B1B; --er-danger-strong: #B91C1C; /* Accent secundar, pentru categorii care nu sunt stări */ --er-pink-surface: #FCE7F3; --er-pink-border: #FBCFE8; --er-pink-text: #9D174D; /* Încă două accente de categorie, cerute de panoul de conținut: acolo se deosebesc peste douăzeci de secțiuni, iar cu cinci culori jumătate ar fi arătat identic. NU sunt stări — nu spun „bine" sau „atenție" — deci nu se folosesc pentru mesaje. */ --er-violet-surface: #EDE9FE; --er-violet-border: #DDD6FE; --er-violet-text: #5B21B6; --er-teal-surface: #CCFBF1; --er-teal-border: #99F6E4; --er-teal-text: #0F766E; /* ---------- Categorii de instituții ---------- */ /* Aceleași trei culori și pe hartă, și pe carduri, și în legendă */ --er-color-school: #2563EB; --er-color-kindergarten: #F5B82E; --er-color-afterschool: #10B981; /* ---------- Text ---------- */ --er-text-heading: #0F4C81; --er-text-main: #1A1F36; --er-text-soft: #475569; --er-text-muted: #64748B; --er-text-faint: #94A3B8; --er-text-on-dark: #FFFFFF; --er-text-on-dark-soft: rgba(255, 255, 255, 0.85); /* ---------- Fundaluri și margini ---------- */ --er-bg-page: #F8FAFC; --er-bg-surface: #FFFFFF; --er-bg-muted: #EEF2F7; --er-bg-muted-soft: #F1F5F9; --er-bg-muted-warm: #F9FAFB; --er-bg-tint: #EFF4FA; --er-bg-footer: #0A1A2E; --er-border: #E2E8F0; --er-border-strong: #CBD5E1; --er-border-soft: #DBE3EE; --er-border-faint: #DDE5ED; --er-border-neutral: #D1D5DB; --er-border-plain: #E0E0E0; /* ---------------------------------------------------------------- Culori ale altor firme. Stau separat, cu numele lor, fiindcă NU sunt ale noastre și nu se schimbă când se schimbă paleta: sunt impuse de Google și de rețelele sociale, iar modificarea lor ar face butoanele nerecunoscibile. ---------------------------------------------------------------- */ --er-brand-google-albastru: #4285F4; --er-brand-google-verde: #34A853; --er-brand-social-albastru: #1F8AFE; --er-brand-social-bleu: #33CCFF; /* ---------------------------------------------------------------- LITERELE — UN SINGUR SET PENTRU TOT PRODUSUL Portalul si panoul foloseau Plus Jakarta Sans, microsite-ul Fraunces + Inter + IBM Plex Mono. Cine trecea de pe portal pe microsite-ul unei scoli vedea, la litera, alt sit. Acum platforma foloseste literele microsite-ului: --er-font-titlu Fraunces, serif — titlurile (h1..h6 in site.css) --er-font-text Inter — corpul paginii --er-font-mono IBM Plex Mono — ce se CITESTE CA O MASINA: adresa unui articol, calea unui fisier, coordonate, un interval de ore. Acolo monospatiata nu e infrumusetare: „l" si „1" arata identic intr-un font obisnuit, iar cine dicteaza un link la telefon il dicteaza greșit. Stivele se scriu O SINGURA DATA, aici. --ms-font-* rămân — foile microsite-ului le folosesc in aproape doua sute de locuri — dar de acum trimit la acestea, deci nu mai pot ajunge sa se deosebeasca fara ca cineva sa vrea. Fiecare stiva are si o rezerva de sistem: pana se descarca fontul, sau daca nu se descarca deloc, pagina trebuie sa rămână citibila. ---------------------------------------------------------------- */ --er-font-titlu: 'Fraunces', Georgia, 'Times New Roman', serif; --er-font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --er-font-mono: 'IBM Plex Mono', 'Consolas', monospace; /* ---------- Umbre ---------- */ --er-shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.04); --er-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06); --er-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10); --er-shadow-xl: 0 20px 50px rgba(15, 23, 42, 0.12); /* ---------- Rotunjiri ---------- */ --er-radius-sm: 8px; --er-radius-md: 12px; --er-radius-lg: 20px; --er-radius-xl: 28px; --er-radius-full: 999px; /* ---------- Spațiere ---------- */ --er-space-xs: 4px; --er-space-sm: 8px; --er-space-md: 16px; --er-space-lg: 24px; --er-space-xl: 40px; --er-space-2xl: 64px; --er-space-3xl: 100px; /* ---------- Tranziții și lățimi ---------- */ --er-transition: all 0.2s ease; --er-transition-slow: all 0.3s ease; --er-container-max: 1280px; /* ================================================================ MICROSITE — identitatea site-ului unei școli. Implicitul e paleta din mockup-ul de referință: bleumarin instituțional, auriu, hârtie caldă. Sobru intenționat — un liceu nu e o aplicație. Cele două culori de accent, --ms-accent și --ms-accent-2, sunt SINGURELE pe care le rescrie școala din panoul de administrare. Restul, hârtia și cerneala, rămân comune: dacă ar fi fost și ele configurabile, o alegere nefericită ar fi putut face textul ilizibil, iar platforma răspunde pentru lizibilitatea paginilor pe care le găzduiește. ================================================================ */ --ms-accent: #16213E; --ms-accent-dark: #0B111F; --ms-accent-soft: #233258; --ms-accent-2: #C9A227; --ms-accent-2-light: #E7C766; --ms-paper: #EEF1F6; --ms-paper-warm: #F6F4EC; --ms-surface: #FFFFFF; --ms-ink: #1A1E2B; --ms-ink-soft: #4A5164; --ms-calm: #5C7A5E; --ms-calm-light: #DCE6DD; --ms-urgent: #B23A2E; --ms-line: rgba(22, 33, 62, 0.12); --ms-radius: 2px; /* Aceleasi litere ca ale platformei, vezi mai sus. Numele rămân fiindca foile microsite-ului le folosesc in aproape doua sute de locuri; valoarea e scrisa o singura data, sus. */ --ms-font-titlu: var(--er-font-titlu); --ms-font-text: var(--er-font-text); --ms-font-cifre: var(--er-font-mono); /* Scara de litere a microsite-ului. Titlurile cresc mai repede decât textul, ca ierarhia să se vadă și pe un ecran de telefon. */ --ms-text-sm: 0.875rem; --ms-text-base: 1rem; --ms-text-lg: 1.125rem; --ms-titlu-sm: 1.375rem; --ms-titlu-md: 1.875rem; --ms-titlu-lg: 2.5rem; --ms-titlu-xl: 3.25rem; } /* ============================================================================ MOD DE CONTRAST RIDICAT Cerut de document la capitolul de accesibilitate, și are suport în bază: SetariPunctEducational_TD.bAfiseazaBaraAccesibilitate spune dacă bara de comutare se afișează pe microsite-ul respectiv. Se face prin rescrierea variabilelor, nu prin reguli noi. Motivul e practic: altfel ar fi trebuit dublată fiecare regulă de culoare din tot proiectul, iar orice regulă adăugată ulterior ar fi rămas în afara modului de contrast, fără ca nimeni să observe. Așa, o pagină nouă îl primește automat. Alb pur pe negru pur, cu margini vizibile: raportul de contrast maxim, cerut de utilizatorii cu vedere slabă. Culorile de accent NU se păstrează — tocmai ele sunt cele care scad contrastul. ============================================================================ */ body.er-a11y-contrast { --ms-paper: #FFFFFF; --ms-paper-warm: #FFFFFF; --ms-surface: #FFFFFF; --ms-ink: #000000; --ms-ink-soft: #000000; --ms-line: rgba(0, 0, 0, 0.35); --ms-accent: #000000; --ms-accent-dark: #000000; --ms-accent-soft: #000000; --ms-accent-2: #000000; --ms-accent-2-light: #FFFFFF; --ms-calm: #000000; --ms-calm-light: #FFFFFF; --ms-urgent: #000000; --er-bg-page: #FFFFFF; --er-bg-surface: #FFFFFF; --er-bg-muted: #FFFFFF; --er-text-main: #000000; --er-text-soft: #000000; --er-text-muted: #000000; --er-text-heading: #000000; --er-border: rgba(0, 0, 0, 0.35); --er-border-strong: #000000; } /* În contrast ridicat, umbrele nu mai comunică nimic — separarea o fac marginile. Lăsate, ar fi doar înnegrit zonele din jurul cardurilor. */ body.er-a11y-contrast * { box-shadow: none !important; text-shadow: none !important; } /* ============================================================================ MĂRIREA LITERELOR Al doilea comutator al barei de accesibilitate. Se schimbă dimensiunea de bază a rădăcinii, iar tot ce e scris în rem crește proporțional — de aceea scara de litere a microsite-ului e în rem și nu în pixeli. ============================================================================ */ /* Mărirea literelor se aplică pe RĂDĂCINĂ, nu doar pe body. „rem” se raportează la , nu la , iar aproape tot textul microsite-ului e declarat în rem. Cu regula pusă numai pe body, butonul creștea doar textul care nu avea mărime proprie — adică aproape nimic: măsurat, din șase elemente luate la probă creșteau două, iar unul era body însuși. Se păstrează și regula pe body: prinde textul care moștenește, în paginile portalului, care nu poartă clasa pe . */ /* NUMAI pe :root, nu si pe body. Puse pe amandoua, cele doua reguli se INMULTESC: body moștenește 125% de la si mai aplica 125% peste, deci textul creștea de 1,5625 ori in loc de 1,25. Masurat: un card sarea de la 16px la 25px. */ :root.er-a11y-text-mare { font-size: 112.5%; } :root.er-a11y-text-foarte-mare { font-size: 125%; } /* ============================================================================ PREFERINȚA DE MIȘCARE REDUSĂ Cine a cerut din sistemul de operare mai puțină mișcare nu trebuie să primească animații de la noi. Contoarele animate din prima pagină a microsite-ului sar direct la valoarea finală. ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================ PICTOGRAMELE MATERIAL — de ce sunt marginite la un patrat Pictogramele sunt o LIGATURA: in marcaj scrie numele, iar fontul il preface in simbol. Cat timp fontul nu s-a incarcat, browserul arata numele ca text: nu un simbol de 24px, ci „threed_rotation" — cincisprezece litere late, vreo 360px. Ce facea asta, masurat: min-content al unui card de la baza materiala ieșea 450px, fata de vreo 327 pe care ii da un telefon de 375px. Cardul nu putea fi ingustat, deci pista grilei creștea, deci pagina derapa lateral cu ~123px. Se vedea pe orice pagina cu pictograme, nu doar acolo. Si nu e o suparare trecatoare: fontul vine de la Google. Pe o retea de scoala care il blocheaza, pe date mobile slabe, ori cu o extensie de browser care taie cererile catre terti, numele rămân la vedere PERMANENT — si layout-ul rupt cu ele. Leacul: glifa e exact un patrat de 1em, deci se margineste la atat si se taie ce iese. Simbolul se vede intreg; numele, cand fontul lipseste, nu mai impinge nimic. Nu se ascunde cu „display: none" si nu se goleste conținutul — un cititor de ecran citeste oricum eticheta de langa, iar pictogramele au aria-hidden pus in marcaj. flex-shrink: 0 fiindca multe pictograme stau in rânduri flex langa un text: fara el, patratul s-ar fi strans inaintea textului si simbolul ar fi ieșit tăiat. ============================================================================ */ .material-icons { display: inline-block; width: 1em; max-width: 1em; overflow: hidden; flex-shrink: 0; }