/* ===================================================================== TOKENS — sursa unică de adevăr pentru culori, fonturi și forme ===================================================================== Nicăieri altundeva în aplicație nu există un cod de culoare. Aici, aproape totul se derivă dintr-un singur număr: `--h-brand`, nuanța instituției, injectată din baza de date (`schools.brand_hue`). O școală își schimbă culoarea peste tot — butoane, insigne, umbre, focus — modificând un întreg de la 0 la 360. Tema întunecată nu e o inversare mecanică. Fundalul are o urmă din nuanța școlii (nu gri neutru), iar textul nu e alb pur: alb pe negru pur „vibrează" la citit lung, iar părinții citesc seara. ===================================================================== */ /* ───────────────────────────────────────────────────────────────────── FONTURI Se caută întâi Nunito / Nunito Sans, găzduite local. Dacă fișierele nu există, `@font-face` eșuează în tăcere și se trece automat la fontul rotunjit al sistemului — `ui-rounded` e SF Pro Rounded pe iPhone și Mac, exact senzația caldă pe care o vrem. Nimic nu se încarcă de la Google: pe lângă viteză, un font de la Google trimite adresa IP a fiecărui părinte către un terț, ceea ce într-o aplicație de școală e fix genul de scurgere pe care o evităm. Ca să activezi Nunito: pune cele patru .woff2 în /assets/fonts/. Nu trebuie schimbat nimic aici, se aprinde singur. ───────────────────────────────────────────────────────────────────── */ @font-face{ font-family:"Nunito Sans";font-style:normal;font-weight:400 700;font-display:swap; src:url("/assets/fonts/nunito-sans.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Nunito";font-style:normal;font-weight:600 800;font-display:swap; src:url("/assets/fonts/nunito.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+2C60-2C7F,U+A720-A7FF; } :root{ /* Corpul textului: umanist, cu forme deschise. „ui-rounded" e primul după Nunito pentru că pe iOS/macOS dă literele cu colțuri moi. */ --font-ui:"Nunito Sans", ui-rounded, "SF Pro Rounded", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", system-ui, -apple-system, sans-serif; /* Titlurile: aceeași familie, tăietură mai plină. Diferența de greutate face ierarhia, nu un al doilea font — două fonturi diferite pe un ecran mic se ceartă între ele. */ --font-head:"Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif; /* Nuanța instituției. 226 = albastru-indigo, culoarea implicită. login.php și index.php o suprascriu cu valoarea din baza de date. */ --h-brand:226; /* Accentul secundar, verde-turcoaz: confirmări, bife, „citit de 18". Fix, nu derivat — trebuie să rămână lizibil la orice nuanță de brand. */ --h-accent:174; /* ── Forme ── */ --radius-sm:8px; --radius:12px; --radius-lg:18px; --radius-pill:999px; /* O singură curbă de accelerare în toată aplicația. Mișcările care pornesc diferit par făcute de programe diferite. */ --ease:cubic-bezier(.22,.61,.36,1); /* ═══════════ TEMA LUMINOASĂ ═══════════ */ --bg:hsl(var(--h-brand) 30% 98%); --surface:#fff; --surface-2:hsl(var(--h-brand) 28% 96%); --text:hsl(var(--h-brand) 34% 14%); --text-muted:hsl(var(--h-brand) 15% 42%); --text-faint:hsl(var(--h-brand) 12% 60%); --border:hsl(var(--h-brand) 22% 90%); --border-strong:hsl(var(--h-brand) 20% 82%); --primary:hsl(var(--h-brand) 68% 48%); --primary-soft:hsl(var(--h-brand) 76% 96%); --ring:hsl(var(--h-brand) 76% 55% / .22); --ok:hsl(var(--h-accent) 72% 30%); --ok-soft:hsl(var(--h-accent) 62% 94%); --warn:hsl(33 88% 38%); --warn-soft:hsl(38 90% 94%); --danger:hsl(2 72% 47%); --danger-soft:hsl(2 80% 96%); /* Chat: mesajul meu poartă culoarea școlii, al celuilalt e neutru. Invers ar face fiecare ecran de părinte să pară al profesorului. */ --bubble-me:hsl(var(--h-brand) 68% 48%); --bubble-me-text:#fff; --bubble-them:hsl(var(--h-brand) 26% 95%); --bubble-them-text:hsl(var(--h-brand) 34% 16%); /* Umbre cu nuanța brandului, nu negru: negrul „murdărește" fundalul colorat și se vede mai ales pe cardurile albe. */ --shadow-sm:0 1px 2px hsl(var(--h-brand) 40% 20% / .06), 0 2px 6px hsl(var(--h-brand) 40% 20% / .05); --shadow-lg:0 4px 12px hsl(var(--h-brand) 40% 20% / .07), 0 16px 40px -12px hsl(var(--h-brand) 40% 25% / .18); color-scheme:light; } /* ═══════════ TEMA ÎNTUNECATĂ ═══════════ Se aplică în două feluri: automat, după setarea telefonului, și forțat, prin `data-theme` pus de comutatorul din colț. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --bg:hsl(var(--h-brand) 26% 8%); --surface:hsl(var(--h-brand) 24% 12%); --surface-2:hsl(var(--h-brand) 22% 16%); --text:hsl(var(--h-brand) 26% 94%); --text-muted:hsl(var(--h-brand) 16% 68%); --text-faint:hsl(var(--h-brand) 14% 52%); --border:hsl(var(--h-brand) 20% 21%); --border-strong:hsl(var(--h-brand) 18% 30%); /* Mai deschis decât pe fond alb: aceeași culoare pe întuneric pare mai închisă și pică sub pragul de contrast. */ --primary:hsl(var(--h-brand) 82% 68%); --primary-soft:hsl(var(--h-brand) 50% 20%); --ring:hsl(var(--h-brand) 82% 68% / .28); --ok:hsl(var(--h-accent) 62% 60%); --ok-soft:hsl(var(--h-accent) 45% 17%); --warn:hsl(38 88% 66%); --warn-soft:hsl(35 50% 17%); --danger:hsl(2 84% 70%); --danger-soft:hsl(2 45% 19%); --bubble-me:hsl(var(--h-brand) 62% 42%); --bubble-me-text:#fff; --bubble-them:hsl(var(--h-brand) 20% 19%); --bubble-them-text:hsl(var(--h-brand) 24% 92%); --shadow-sm:0 1px 2px hsl(0 0% 0% / .35), 0 2px 6px hsl(0 0% 0% / .25); --shadow-lg:0 4px 12px hsl(0 0% 0% / .4), 0 16px 40px -12px hsl(0 0% 0% / .55); } } :root[data-theme="dark"]{ color-scheme:dark; --bg:hsl(var(--h-brand) 26% 8%); --surface:hsl(var(--h-brand) 24% 12%); --surface-2:hsl(var(--h-brand) 22% 16%); --text:hsl(var(--h-brand) 26% 94%); --text-muted:hsl(var(--h-brand) 16% 68%); --text-faint:hsl(var(--h-brand) 14% 52%); --border:hsl(var(--h-brand) 20% 21%); --border-strong:hsl(var(--h-brand) 18% 30%); --primary:hsl(var(--h-brand) 82% 68%); --primary-soft:hsl(var(--h-brand) 50% 20%); --ring:hsl(var(--h-brand) 82% 68% / .28); --ok:hsl(var(--h-accent) 62% 60%); --ok-soft:hsl(var(--h-accent) 45% 17%); --warn:hsl(38 88% 66%); --warn-soft:hsl(35 50% 17%); --danger:hsl(2 84% 70%); --danger-soft:hsl(2 45% 19%); --bubble-me:hsl(var(--h-brand) 62% 42%); --bubble-me-text:#fff; --bubble-them:hsl(var(--h-brand) 20% 19%); --bubble-them-text:hsl(var(--h-brand) 24% 92%); --shadow-sm:0 1px 2px hsl(0 0% 0% / .35), 0 2px 6px hsl(0 0% 0% / .25); --shadow-lg:0 4px 12px hsl(0 0% 0% / .4), 0 16px 40px -12px hsl(0 0% 0% / .55); } /* ── Categoriile de anunț ── `--cat` colorează banda din marginea cardului, `--cat-soft` eticheta. Clasa se pune din feed.js: `.anunt.cat-urgent`. */ .cat-general { --cat:var(--text-muted); --cat-soft:var(--surface-2); } .cat-urgent { --cat:var(--danger); --cat-soft:var(--danger-soft); } .cat-eveniment { --cat:var(--primary); --cat-soft:var(--primary-soft); } .cat-tema { --cat:var(--ok); --cat-soft:var(--ok-soft); } .cat-administrativ{ --cat:var(--text-muted); --cat-soft:var(--surface-2); } .cat-sanatate { --cat:var(--warn); --cat-soft:var(--warn-soft); } /* Un font rotunjit e mai lat decât unul geometric; fără asta, textele lungi din română (cu diacritice) par înghesuite. */ body{ letter-spacing:-.006em; } @media (prefers-reduced-motion:reduce){ :root{ --ease:linear; } }