/* Higher Self - Bucata 00 din 84: FUNDATIA Se incarca PRIMA, inaintea oricarui alt CSS. ============================================================ ASTA E SINGURUL FISIER PE CARE IL DESCHIZI CA SA SCHIMBI CEVA GLOBAL: fonturi, marimi, colturi, spatieri, cerneala. ============================================================ De ce exista: aplicatia avea DOUA sisteme tipografice paralele. Fisierele 01 la 09 foloseau Cormorant Garamond, Sora si Fraunces; fisierele 10 la 22 foloseau Georgia si Montserrat. Ce unealta deschideai decidea ce font vezi, si de acolo venea senzatia ca te plimbi prin alta aplicatie de la un tool la altul. Acum e o singura pereche, declarata aici. Regula pentru orice cod nou: NU scrii `font-family` de mana. Folosesti `var(--font-title)` sau `var(--font-body)`. La fel pentru colturi si spatieri. Daca ai nevoie de o valoare care nu e in scala de mai jos, inseamna aproape sigur ca una din scala e buna. */ :root{ /* ---------- FONTURI. Schimbi aici, se schimba in toata aplicatia -------- Titlurile sunt Georgia, font de sistem, deci se afiseaza instant si nu depinde de retea. Corpul e Montserrat, incarcat din Google in index.html. Daca schimbi Montserrat cu altceva, schimba si linkul de acolo. */ --font-title: Georgia, 'Noto Serif', 'Times New Roman', serif; --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---------- MARIMI DE TEXT ---------- Aplicatia avea 49 de marimi distincte, fiindca de fiecare data cand se adauga ceva nou se alegea alta valoare apropiata de una existenta. Cele 9 trepte de mai jos nu sunt inventate, sunt calculate din ce era deja in aplicatie, ca fiecare marime veche sa cada pe cea mai apropiata treapta fara sa se mute mai mult de un pixel. Din 704 declaratii, doar 28 s-au mutat cu 2px. Restul, sub un pixel, adica invizibil. Pentru text nou foloseste-le pe astea, nu scrie px de mana. */ --t-display: 32px; /* numarul sau cuvantul cel mai mare de pe ecran */ --t-hero: 27px; /* titlul mare de pe ecranul de unealta */ --t-title: 22px; /* titlu de sectiune mare */ --t-head: 19px; /* antet de sectiune sau de card */ --t-lead: 16.5px; /* text de intro, citate scurte */ --t-body: 14.5px; /* textul obisnuit */ --t-small: 13px; /* note, ajutoare, subsoluri */ --t-tiny: 11.5px; /* etichete scurte */ --t-micro: 10px; /* majuscule marunte, cifre de colt */ /* Peste 32px raman valori literale: sunt 22 de locuri decorative, gen cronometrul din Post sau cifra mare din Numere Angelice, unde marimea e parte din desen, nu din text. */ /* ---------- COLTURI ---------- Erau 24 de raze diferite, plus doua feluri de a scrie aceeasi pastila, 99px si 999px. Sunt 6 forme reale plus pastila. */ --r-pill: 999px; /* butoane si pastile, jumatate din inaltime */ --r-panel: 26px; /* containerul de unealta, cel mai mare */ --r-card: 22px; /* carduri mari */ --r-box: 16px; /* casete de scris, carduri mici */ --r-chip: 12px; /* elemente marunte */ --r-tight: 8px; /* colturi abia rotunjite */ --r-sharp: 4px; /* linii, bare de progres */ /* ---------- CUVANTUL EVIDENTIAT DIN TITLU ---------- Cuvantul pus in in titlul unei unelte. Lua culoarea zonei, deci era albastru la Minte, verde la Corp si lavanda la Suflet. Acum e acelasi auriu in toate cele 24, ca titlurile sa se citeasca la fel peste tot. */ --em-gold: #f2c744; /* ---------- CREMUL BUTOANELOR ---------- Erau doua cremuri in aplicatie, `#fbf7ee` si `#ebe5d9`, folosite amestecat pe butoane invecinate. A ramas unul. */ --btn-cream: #ebe5d9; /* ---------- SPATIERI ---------- Erau 122 de perechi de padding scrise de mana. */ --s-1: 6px; --s-2: 10px; --s-3: 14px; --s-4: 18px; --s-5: 22px; --s-6: 30px; /* ---------- CERNEALA ---------- Aici e cauza tuturor bugurilor de contrast din aplicatie. Culoarea textului era scrisa de mana in 534 de locuri, fiecare gandita pentru fundalul care era acolo ATUNCI. Cand un fundal s-a facut deschis, textul a ramas deschis pe deschis, si le-am gasit pe rand, in patru valuri. Acum culoarea textului nu mai apartine elementului, ci SUPRAFETEI pe care sta. Pe suprafata inchisa cerneala e deschisa; blocul de mai jos o rastoarna pe suprafetele deschise, si tot ce e inauntru se corecteaza singur. Un fundal nou nu mai poate lasa text ilizibil in urma. `--ink-dark` e separata si NU se rastoarna niciodata: e pentru pastilele si cardurile deschise care stau pe fundal inchis, deci raman inchise indiferent de suprafata din spate. */ --ink: #f5efe4; /* textul principal */ --ink-soft: rgba(245,239,228,.76); /* text secundar */ --ink-faint: rgba(245,239,228,.55); /* note, ajutoare */ --ink-strong: #ffffff; /* accent maxim */ --ink-dark: #141022; --ink-dark-soft: rgba(20,16,34,.78); --ink-dark-faint: rgba(20,16,34,.55); /* Accentul FOLOSIT CA TEXT. E separat de `--catB`, care e si fundal in 45 de locuri si deci nu poate fi rasturnat. Pe suprafata deschisa devine o versiune inchisa a culorii zonei, altfel mentiunea din Post iesea verde mint pe alb, la 1,4 contrast. */ --accent-ink: var(--catB, #c4b5fd); } /* ---------- SUPRAFATA DESCHISA ---------- Pune clasa `pe-deschis` pe orice container cu fundal deschis si tot textul dinauntru se intoarce singur pe cerneala inchisa. Nu mai scrii nicio culoare de text pe elemente. Containerul de unealta (`.thHero + div`) e trecut aici, in aceeasi regula, nu re-scris in css/03: definitia suprafetei traieste intr-un singur loc. `--white` si `--lav` se rastoarna si ele: sunt folosite DOAR ca text in toata aplicatia, verificat, deci nu strica niciun fundal. */ .pe-deschis, .thHero + div{ --ink: var(--ink-dark); --ink-soft: var(--ink-dark-soft); --ink-faint: var(--ink-dark-faint); --ink-strong: #0d0a16; --white: var(--ink-dark); --lav: var(--ink-dark-soft); /* Culoare explicita, obligatorie. Fara ea, textul care doar MOSTENESTE culoarea de la `body` primeste valoarea calculata acolo, nu variabila: `var()` intr-o proprietate mostenita se rezolva O SINGURA DATA, la elementul unde e scrisa. Aceeasi capcana care tinea dockul pe o singura culoare in build 818. */ color:var(--ink); } /* ============================================================ O CAPCANA CARE M-A PRINS DE PATRU ORI, SCRISA AICI CA SA NU MAI PATESC Multe reguli din aplicatie sunt scrise asa: .screen:not(#s-hub) .cta { ... } `:not()` NU are greutate proprie, dar preia greutatea ARGUMENTULUI. Cum argumentul e un ID, intreg selectorul cantareste cat un ID. Deci o regula scrisa doar cu clase, oricat de tarziu ar veni in fisier si oricat de mult `!important` ar avea, PIERDE in fata ei: .thHero ~ div .cta { ... } <- pierde .screen:not(#s-hub) .thHero ~ div .cta { ... } <- castiga Daca o regula noua pare ca nu se aplica desi arata corect, asta e prima cauza de verificat. A doua e valoarea scrisa inline din JS, care bate orice fisier CSS. In ambele cazuri, masoara in pagina cu `getComputedStyle`, nu citi fisierul si presupune. ============================================================ */