/* ============================================================ FicoFit — culorile aplicației și ale panourilor ------------------------------------------------------------ Aceleași nume ca pe site, aceleași valori. Fișierul e în „public/", nu în „src/", pentru că trebuie să ajungă în pagină înaintea oricărui alt stil: variabilele nu se pot folosi înainte să existe. Tema se pune ca atribut pe . Scriptul din index.html o alege înainte de primul pixel desenat, ca să nu clipească alb pentru cine are sistemul pe întuneric. ============================================================ */ :root{ --ink:#2B2A27; --muted:#7C756C; --line:#E3DED5; --paper:#FBF9F6; --card:#FFFFFF; --surface-2:#F4F1EC; --sage:#7E9A6F; --sage-l:#E2E9DC; --clay:#BE6A50; --clay-l:#F4E2DB; --sky:#4E7D95; --sky-l:#DEE8ED; --sand:#B5851F; --sand-l:#F4E8CE; --plum:#8E7189; --plum-l:#EAE2E8; --on-accent:#FFFFFF; /* Panourile de admin și mentor au verdele lor, mai adânc: e o unealtă de lucru, nu o pagină de vânzare. */ --accent:#2F4F4A; --ok:#4E7C5B; --ok-l:#E4EDE6; --warn:#B3654A; --warn-l:#F6E7E1; /* Un al doilea nivel de text, între „ink" și „muted": ecranele clientului au trei trepte de gri, nu două. Și griul pentru ce e dezactivat — trebuie să se vadă că există, dar stins. */ --ink-2:#5A554C; --dim:#A8A8A8; --scrim:rgba(20,18,16,.45); --hairline:rgba(43,42,39,.10); --shadow-soft:0 1px 2px rgba(43,42,39,.05), 0 8px 24px rgba(43,42,39,.06); --shadow-card:0 14px 34px rgba(43,42,39,.07); --shadow-pop:0 20px 50px rgba(43,42,39,.10); color-scheme:light; } /* ------------------------------------------------------------ Antracit cald, nu negru. Textul nu e alb pur: albul pe negru vibrează și obosește ochiul după zece minute de citit. ------------------------------------------------------------ */ [data-theme="dark"]{ --ink:#EFEBE4; --muted:#A29A8F; --line:#3A3733; --paper:#1A1917; --card:#232220; --surface-2:#2B2926; --sage:#A8C295; --sage-l:#2B3327; --clay:#E09A80; --clay-l:#392A24; --sky:#8FB8CE; --sky-l:#232F36; --sand:#DFB76B; --sand-l:#38301F; --plum:#C3A6BD; --plum-l:#302A2F; --on-accent:#1A1917; --accent:#A8C295; --ok:#8FBF9C; --ok-l:#26332A; --warn:#E09A80; --warn-l:#392A24; --ink-2:#C9C1B6; --dim:#6E675F; --scrim:rgba(0,0,0,.6); --hairline:rgba(239,235,228,.10); --shadow-soft:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.28); --shadow-card:0 14px 34px rgba(0,0,0,.28); --shadow-pop:0 20px 50px rgba(0,0,0,.42); color-scheme:dark; } /* Fundalul paginii și tranziția între teme. Fără ele, schimbarea pare o defecțiune, nu o alegere. */ html, body{ background:var(--paper); color:var(--ink); transition:background .25s ease, color .25s ease; } /* ------------------------------------------------------------ Plasa de siguranță pentru Tailwind. Clasele „bg-white" și „text-white" sunt scrise în zeci de locuri și rămân albe orice s-ar întâmpla. Le legăm la variabile aici, o dată, în loc să umblăm prin fiecare fișier. Unde albul e chiar intenționat — text peste un buton colorat — folosim „--on-accent", care în tema închisă devine antracit. ------------------------------------------------------------ */ .bg-white{ background-color:var(--card) !important; } .bg-black{ background-color:var(--ink) !important; } .text-white{ color:var(--on-accent) !important; } /* Ecranele clientului folosesc și griurile „slate" din Tailwind, pe trei trepte. Le mutăm pe scara noastră, ca să-și păstreze ierarhia și pe întuneric. */ .text-slate-600{ color:var(--ink-2) !important; } .text-slate-500{ color:var(--muted) !important; } .text-slate-400{ color:var(--dim) !important; } .text-slate-300{ color:var(--dim) !important; } .bg-slate-200{ background-color:var(--line) !important; } .bg-black\/30{ background-color:var(--scrim) !important; } /* ------------------------------------------------------------ Detaliile fine. Cardurile aplicației erau desenate doar cu o linie. O linie spune unde se termină cardul; umbra spune că e deasupra paginii. E diferența dintre un desen și un obiect — și e singurul lucru care lipsea față de macheta temei. Le prindem de clasele Tailwind deja scrise, ca să nu umblăm prin patru mii de rânduri de JSX. ------------------------------------------------------------ */ .bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-3xl{ box-shadow:var(--shadow-soft); } /* Butonul principal: umbră scurtă, ca să pară apăsabil, și un răspuns la apăsare. Fără tranziție, coborârea pare o eroare. */ button[class*="font-semibold"]{ transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; } button[class*="font-semibold"]:active{ transform:translateY(1px); } /* Foile care urcă de jos și ferestrele care apar peste pagină au nevoie de o umbră mai adâncă: altfel par lipite de conținut. */ .rounded-t-3xl, .rounded-t-2xl{ box-shadow:var(--shadow-pop); }