/* ========================================================================== CRO-CLIMATE / brand tokens, verzija 2 Jedini izvor istine za boje, tipografiju, razmake i geometriju. Dva registra. Stranica bira jedan, jednom, na razini predloska: naslovnica, o platformi, usluge pokazatelji, karta, tablice Pravilo: preljev, zaobljeni gumbi i prozirne plohe postoje samo dok na ekranu nema nijednog broja iz podataka. ========================================================================== */ :root { /* --- Osnova ------------------------------------------------------------- */ --c-paper: #FFFFFF; --c-ink: #16161A; /* osnovni tekst i jake vlasi */ --c-ink-2: #4E4E56; /* sekundarni tekst, 8,2 prema 1 */ --c-ink-3: #6E6E76; /* metapodaci kao tekst, 5,1 prema 1 */ --c-ink-nontext:#8E8E94; /* SAMO elementi koji nisu tekst: crte osi, ikone */ --c-line: #D8D8DC; /* obicna vlas */ --c-line-soft: #E8E8EC; --c-surface-2: #F7F7F8; /* zaglavlje tablice, mirna ploha */ /* --- Akcent ------------------------------------------------------------- */ /* Uzet je s toplog kraja temperaturne skale, pa marka i podatak govore isto */ --c-accent: #B2182B; /* 6,9 prema 1 na bijelom, prolazi za mali tekst */ --c-accent-dark: #8B1220; /* hover, pritisnuto stanje */ --c-accent-bg: #FBEAE0; /* ispuna oznake, tekst u --c-accent-dark */ /* --- Temperaturna skala, divergentna ------------------------------------ */ /* Glavna skala platforme. Koristi se za ODSTUPANJE, gdje nula ima smisao. */ /* Mora biti simetricna oko nule, inace boja lazira. */ --t-1: #2166AC; --t-2: #4393C3; --t-3: #92C5DE; --t-4: #D1E5F0; --t-5: #F7F7F7; --t-6: #FDDBC7; --t-7: #F4A582; --t-8: #D6604D; --t-9: #B2182B; --t-10:#8B1220; /* --- Sekvencijalne skale, apsolutne vrijednosti -------------------------- */ /* Apsolutni broj ne moze biti negativan, pa ne smije ici na divergentnu. */ --seq-warm-1:#FFF3EC; --seq-warm-2:#FDDBC7; --seq-warm-3:#F4A582; --seq-warm-4:#D6604D; --seq-warm-5:#B2182B; --seq-warm-6:#7A0F1C; --seq-cool-1:#EFF5FA; --seq-cool-2:#D1E5F0; --seq-cool-3:#92C5DE; --seq-cool-4:#4393C3; --seq-cool-5:#2166AC; --seq-cool-6:#123F6E; --c-nodata: #E6E6E9; /* nema mjerenja */ --c-nosea: #EDF1F4; /* mreza ovdje nema kopna */ /* --- Scenariji ---------------------------------------------------------- */ /* Platforma racuna iz CORDEX-CMIP5 EUR-11, koji nosi RCP-ove, ne SSP-ove. */ --sc-hist: #6E6E76; --sc-rcp45: #F4A582; --sc-rcp85: #8B1220; /* --- Uzorak neslaganja ansambla ----------------------------------------- */ /* Srafura preko podatkovne skale, ondje gdje se clanovi ansambla ne slazu */ /* oko predznaka promjene. Dvokomponentna je jer ni jedna pojedinacna boja */ /* ne nosi kontrast na oba kraja skale: izmjereno, tamna crta daje 16,57 */ /* prema svijetlom kraju i samo 1,64 prema tamnom, svijetla obrnuto 1,09 i */ /* 10,98. Zajedno je najgori korak od svih skala 4,85 prema 1. */ /* Vlastita imena, jer srafura nije ni tekst ni vlas. Vrijednosti su danas */ /* jednake Inku i Paperu, ali uloga je druga i mijenja se neovisno. */ --uzorak-crta: #16161A; --uzorak-rub: #FFFFFF; /* Razmak crta nije stalan nego cetvrtina prividne sirine jedinice pri */ /* trenutnom zumu, racunat iz medijana te razine. Ovdje stoje samo granice: */ /* ispod najmanjeg razmaka crta i praznina se stope u plohu. */ /* */ /* Izmjereno 31. srpnja: celija od 0,125 stupnja pri pocetnom kadru ima 6 do */ /* 12 piksela na svim uobicajenim sirinama, pa je razmak stajao na donjoj */ /* granici od 3 piksela, dok je rub bio sirok 3 piksela. Pokrivenost je time */ /* bila 100 posto: uzorak je prekrivao ispunu umjesto da lezi preko nje. */ /* Uz razmak od 6 i rub od 2 pokrivenost je 33 posto, a tamna jezgra 17. */ /* Razmak od 8 dao bi 25 posto, ali kosa crta ima korak od 8 kroz korijen iz */ /* dvoje, dakle 5,7 piksela, pa bi celija od 6 piksela mogla ostati bez crte. */ /* Uz 6 svaka srafirana celija dobiva barem jednu crtu, izmjereno 1,4 na */ /* najuzem zaslonu i 2,8 na najsirem. */ --uzorak-razmak-min: 6px; --uzorak-udio: 4; /* koliko crta stane preko medijana jedinice */ --uzorak-debljina: 1px; --uzorak-rub-faktor: 2; /* sirina svijetlog ruba, u debljinama crte */ /* Neprozirnost, da se boja ispod uzorka i dalje cita. Crta ostaje jaca od */ /* ruba, jer ona nosi razaznatljivost na svijetlom kraju skale. */ --uzorak-neprozirnost-crta: 0.8; --uzorak-neprozirnost-rub: 0.7; /* --- Razine zagrijavanja ------------------------------------------------ */ /* Uredjena velicina, pa ide na sekvencijalnu toplu, cetiri njena koraka. */ /* Susjedni koraci nose ispod 3 prema 1 medjusobno, pa boja nikad nije */ /* jedini nositelj razine: uz svaku stoji oznaka u stupnjevima. */ --gwl-15: var(--seq-warm-3); --gwl-2: var(--seq-warm-4); --gwl-3: var(--seq-warm-5); --gwl-4: var(--seq-warm-6); /* --- Tipografija --------------------------------------------------------- */ --f-display: "Wix Madefor Display", "Segoe UI", system-ui, sans-serif; --f-body: "Wix Madefor Text", "Segoe UI", system-ui, sans-serif; --f-mono: "Fira Mono", ui-monospace, monospace; /* Brojevi se pisu u --f-body ili --f-display uz tabular-nums. */ /* --f-mono je iskljucivo za tehnicke metapodatke: verzija skupa podataka, */ /* razlucivost, putanja, kontrolni zbroj. */ --fs-display: clamp(2.3rem, 1.5rem + 3.1vw, 3.9rem); --fs-h1: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); --fs-h2: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem); --fs-h3: 1.15rem; --fs-lead: clamp(1rem, 0.97rem + 0.25vw, 1.13rem); --fs-body: 1rem; --fs-small: 0.85rem; --fs-micro: 0.75rem; --lh-display: 1.02; --lh-head: 1.15; --lh-body: 1.6; --ls-display: -0.03em; /* zbijeno, naslov nosi tezinu a ne sirinu */ --ls-h: -0.02em; --fw-body: 400; --fw-mid: 500; --fw-head: 800; /* --- Razmaci -------------------------------------------------------------- */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --w-text: 66ch; --w-page: 1200px; --w-wide: 1600px; /* Najveca visina okvira karte. Karta visa od prozora trazi pomicanje da bi se vidjela u cijelosti, pa prestaje biti jedan pogled. */ --v-karte: 78vh; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 160ms; } /* --- Registar: izlog ------------------------------------------------------ */ [data-registar="izlog"] { --bg-page: radial-gradient(62% 52% at 10% 6%, #E2EBFA 0%, rgba(226,235,250,0) 72%), radial-gradient(58% 48% at 94% 92%, #FBE7DF 0%, rgba(251,231,223,0) 72%), #FFFFFF; --r-control: 999px; /* gumbi su pilule */ --r-card: 12px; --c-card: rgba(255,255,255,0.72); --c-card-line: #E2E6EE; --rule-strong: 1px solid var(--c-line); } /* --- Registar: podaci ----------------------------------------------------- */ [data-registar="podaci"] { --bg-page: #FFFFFF; /* bez preljeva, boja pripada podatku */ --r-control: 3px; --r-card: 4px; --c-card: #FFFFFF; --c-card-line: var(--c-line); --rule-strong: 1px solid var(--c-ink); } body { background: var(--bg-page); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }