/* ===================================================================== JU OŠ „Milorad Musa Burzan“ — DESIGN TOKENS Faza 1 · Jedini izvor istine za boje, tipografiju, prostor i motion. U Fazi 2 ovaj fajl postaje osnova za theme.json + WP Customizer. ===================================================================== */ :root { /* ---------- 1. PODLOGE (nikada čisto bijela kao glavna) ---------- */ --c-bg: #EDF4F7; /* glavna pastelna podloga */ --c-bg-warm: #F0F5F3; /* topliji varijetet za trake */ --c-bg-cool: #E9F1F7; /* hladniji varijetet */ --c-surface: rgba(255,255,255,.62); /* kartice — providne, ne bijele plohe */ --c-surface-2: rgba(255,255,255,.80); /* podignute kartice */ --c-surface-3: rgba(255,255,255,.42); /* tanke ploče preko mesha */ --c-glass: rgba(240,247,250,.72); /* header / meni */ --c-line: rgba(23,41,58,.10); --c-line-strong: rgba(23,41,58,.18); /* ---------- 2. TEKST (tamna plavo-siva) ---------- */ --c-ink: #17293A; /* 12.9:1 na --c-bg */ --c-ink-2: #33495C; /* 8.0:1 */ --c-ink-soft: #4A6273; /* 5.6:1 — najsvjetliji dozvoljen za tekst */ --c-ink-inv: #F4FAFC; /* ---------- 3. AKCENTNE PORODICE = INFORMACIONI SISTEM ------------ Svaka oblast sajta ima svoju porodicu. -ink varijanta je jedina koja se koristi za tekst (sve ≥ 4.5:1 na --c-bg). */ --a-teal: #12A6AC; --a-teal-ink: #0A6E73; --a-teal-soft: #D3EEEF; --a-sky: #3785DA; --a-sky-ink: #1C5FA6; --a-sky-soft: #DBE9F9; --a-mint: #2FB183; --a-mint-ink: #136B4C; --a-mint-soft: #D6F0E5; --a-coral: #F26A5F; --a-coral-ink: #B23730; --a-coral-soft: #FBE0DC; --a-amber: #F5B93F; --a-amber-ink: #8C6207; --a-amber-soft: #FBEDD0; --a-lavender: #7E6CDE; --a-lavender-ink: #5647B8; --a-lavender-soft: #E4DFFA; --a-orange: #F58A3C; --a-orange-ink: #A6510C; --a-orange-soft: #FBE5D2; /* ---------- 3b. BOJE IZVUČENE IZ ZVANIČNOG LOGOTIPA -------------- Izmjereno direktno iz „logo bez pozadine.png“ (uzorkovanje piksela). Crvena krova iz logotipa = ista terakota kao krov na stvarnoj fotografiji musa.jpg. Zato je to institucionalni akcenat, a ne još jedna dekorativna boja — koristi se štedljivo. */ --brand-red: #C73731; /* krov u logotipu (4.67:1 na --c-bg) */ --brand-red-ink: #A62B26; /* tamnija varijanta za tekst (6.31:1) */ --brand-red-soft: #F7E3E1; --brand-graphite: #0D0D0D; /* linije i rukopis u logotipu */ /* Semantičko mapiranje oblasti (koristi se u markupu preko .acc-*) */ --area-ucenici: var(--a-teal); --area-roditelji: var(--a-coral); --area-nastava: var(--a-lavender); --area-dokumenta: var(--a-mint); --area-uspjesi: var(--a-amber); --area-dogadjaji: var(--a-orange); /* Aktivni akcenat — komponente ga nasljeđuju, .acc-* ga prepisuje */ --acc: var(--a-teal); --acc-ink: var(--a-teal-ink); --acc-soft: var(--a-teal-soft); /* ---------- 4. GRADIJENTI ---------- */ --grad-brand: linear-gradient(112deg, var(--a-teal) 0%, var(--a-sky) 52%, var(--a-lavender) 100%); --grad-text: linear-gradient(96deg, var(--a-teal-ink) 0%, var(--a-sky-ink) 46%, var(--a-lavender-ink) 100%); --grad-warm: linear-gradient(120deg, var(--a-coral) 0%, var(--a-amber) 100%); --grad-sheen: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.28)); --grad-band: linear-gradient(180deg, rgba(255,255,255,.55), rgba(226,240,244,.75)); /* ---------- 5. SJENKE — meke, tonirane mastilom, nikad crne ------- */ --sh-1: 0 1px 2px rgba(23,41,58,.05), 0 2px 8px rgba(23,41,58,.04); --sh-2: 0 2px 6px rgba(23,41,58,.05), 0 10px 24px -8px rgba(23,41,58,.10); --sh-3: 0 4px 12px rgba(23,41,58,.06), 0 20px 44px -14px rgba(23,41,58,.14); --sh-4: 0 10px 30px rgba(23,41,58,.07), 0 40px 80px -26px rgba(23,41,58,.20); --sh-inset: inset 0 1px 0 rgba(255,255,255,.75); --sh-acc: 0 14px 34px -16px color-mix(in oklab, var(--acc) 65%, transparent); /* ---------- 6. RADIUSI ---------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 36px; --r-2xl: 48px; --r-pill: 999px; --r-organic: 46% 54% 38% 62% / 42% 38% 62% 58%; --r-organic-2: 58% 42% 60% 40% / 46% 56% 44% 54%; /* ---------- 7. TIPOGRAFIJA (2 familije) ---------- */ --f-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --f-head: "Manrope", "Manrope Fallback", "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; /* Display familija — SAMO za brojke i rimske cifre (812, 76, I–IX). Subsetovana na te glifove; sve ostalo pada na Manrope. */ --f-display: "Unbounded", "Unbounded Fallback", "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, sans-serif; --fs-display: clamp(3.4rem, 1.2rem + 7.4vw, 7rem); /* Brojke u „Škola u brojkama“. Odvojeno od --fs-display da bi se optička težina kartica mogla podešavati bez diranja ostatka display skale. Cijela skala je --fs-display × 0.75 (−25%): i minimum, i nagib, i maksimum. Zato je umanjenje jednako na SVAKOJ širini, a clamp i dalje dostiže maksimum oko 1254 px kao ranije. Zašto baš 25%, a ne manje: kartica u četvorokolonskoj mreži ima ~257 px unutrašnje širine, a „1749“ je najširi mogući sadržaj. Na −23% ostajao je zazor od samo 3 px po redu; na −25% je ~10 px, pa broj ne dodiruje ivice. Ostale brojke su dvocifrene i imaju obilan prostor. */ --fs-stat: clamp(2.55rem, .9rem + 5.55vw, 5.25rem); --fs-h1: clamp(2.3rem, 1.05rem + 3.15vw, 3.55rem); --fs-h2: clamp(1.85rem, 1.15rem + 2.5vw, 3.05rem); --fs-h3: clamp(1.15rem, .98rem + .85vw, 1.6rem); --fs-lead: clamp(1.05rem, .99rem + .45vw, 1.28rem); --fs-body: 1.0625rem; --fs-sm: .9375rem; --fs-xs: .8125rem; /* Naslov hero-a. Vrijednost je IZMJERENA, nije procijenjena. Manrope 800, ink po redovima (u em): „Mjesto gdje znanje“ asc 0.739 desc 0.264 (g, j) „postaje mogućnost.“ asc 0.810 desc 0.264 (ć + t/j) „Where knowledge“ asc 0.739 desc 0.264 (g) „becomes opportunity.“ asc 0.739 desc 0.246 (p, y) Da se ink dva reda ne dodiruje treba: desc(gornji) + asc(donji) domaća latinica 1.074 · ćirilica 0.985 · engleski 1.003 1.09 je izmjereno kao granično: na 768 px (font 41 px) ink domaćeg naslova se preklapao za 0.3 px. Zato 1.12 — najgori slučaj dobija 0.046em (≈1.9 px na 41 px, ≈2.6 px na 56.8 px) stvarnog vazduha. Naslov i dalje djeluje kompaktno; razlika je 3.4 px na desktopu. Jedini korisnik ovog tokena je .hero__title. */ --lh-tight: 1.12; --lh-head: 1.14; --lh-body: 1.62; --ls-display: -.035em; --ls-head: -.02em; --ls-eyebrow: .14em; /* ---------- 8. PROSTOR (baza 4px) ---------- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --shell: 1240px; --gutter: clamp(1.15rem, 4vw, 3rem); --sec-y: clamp(4.5rem, 8vw, 8.5rem); /* ---------- 9. MOTION SISTEM ---------- */ --motion-instant: 110ms; --motion-fast: 220ms; --motion-base: 420ms; --motion-slow: 720ms; --motion-scene: 1100ms; --ease-standard: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.55, 0, 1, .45); --ease-spring: cubic-bezier(.34, 1.4, .5, 1); --stagger: 70ms; /* korak između susjednih elemenata */ --reveal-y: 22px; /* pomak pri ulasku u viewport */ --lift: -4px; /* hover podizanje kartice */ --tilt: 1.2deg; /* maksimalni nagib kartice */ /* ---------- 10. Z-SLOJEVI ---------- */ --z-bg: 0; --z-base: 1; --z-sticky: 60; --z-header: 70; --z-menu: 80; --z-modal: 90; } /* Akcentne klase — jedini način da komponenta promijeni porodicu boja */ .acc-teal { --acc: var(--a-teal); --acc-ink: var(--a-teal-ink); --acc-soft: var(--a-teal-soft); } .acc-sky { --acc: var(--a-sky); --acc-ink: var(--a-sky-ink); --acc-soft: var(--a-sky-soft); } .acc-mint { --acc: var(--a-mint); --acc-ink: var(--a-mint-ink); --acc-soft: var(--a-mint-soft); } .acc-coral { --acc: var(--a-coral); --acc-ink: var(--a-coral-ink); --acc-soft: var(--a-coral-soft); } .acc-amber { --acc: var(--a-amber); --acc-ink: var(--a-amber-ink); --acc-soft: var(--a-amber-soft); } .acc-lavender { --acc: var(--a-lavender); --acc-ink: var(--a-lavender-ink); --acc-soft: var(--a-lavender-soft); } .acc-orange { --acc: var(--a-orange); --acc-ink: var(--a-orange-ink); --acc-soft: var(--a-orange-soft); } /* Institucionalni akcenat iz logotipa — samo za nasljeđe/godinu osnivanja. */ .acc-brand { --acc: var(--brand-red); --acc-ink: var(--brand-red-ink); --acc-soft: var(--brand-red-soft); }