/* ───────────────────────────────────────────────────────────── Auto Škola Trijumf 2005 — design tokens v1 Rampa prolazi kroz sve četiri boje logotipa. Nijedna heks vrijednost se ne piše dvaput — sve referencira ovdje. ───────────────────────────────────────────────────────────── */ :root{ /* ── BRAND ──────────────────────────────────────────────── 950 / 800 / 600 / 400 su tačne boje iz vektora logotipa. Ostalo je interpolirano u OKLab prostoru. */ --t-b950:#061E45; /* logo — navy */ --t-b900:#0D2E59; --t-b800:#153E6D; /* logo — tamno plava */ --t-b700:#285A8B; --t-b600:#3D77A9; /* logo — čelično plava */ --t-b500:#398EC3; --t-b400:#2FA6DE; /* logo — svijetlo plava */ --t-b300:#7FC3EA; --t-b200:#B5DCF3; --t-b100:#DEEFFA; --t-b50:#F2F9FD; /* ── NEUTRALI ───────────────────────────────────────────── Izvedeni iz navy nijanse sa 30% zadržane hrome. Čista siva pored ove palete izgleda prljavo. */ --t-n900:#2A313C; --t-n800:#3A404B; --t-n700:#4D535C; --t-n600:#636871; --t-n500:#7B8088; --t-n400:#9A9DA3; --t-n300:#BCBFC2; --t-n200:#DBDCDE; --t-n100:#EDEEEF; --t-n50:#F6F6F7; --t-n0:#FFFFFF; /* ── SEMANTIČKE ─────────────────────────────────────────── Amber je jedina topla boja na sajtu i od 03.09.2026 ima tačno JEDNO mjesto: dugme „Upiši se" (header, hero, cjenovnik). Do tada ih je bilo dva — drugo je bio bedž „GRATIS 75 €" u herou i u redu ukupno u cjenovniku. Promocija je povučena sa sajta i bedž je otišao s njom, pa je amber sada boja jedne jedine radnje. To je jače nego što je bilo: amber i klik su sada isto. Drugo mjesto se ne otvara zato što je nešto važno. Sve na sajtu je važno; amber je rezervisan za ono što se KLIKNE. Tipovi objava („Hitno", „Ispit") su NAVY bedž — --t-b950 podloga, bijela slova, 16.41. Nije amber i ne broji se. */ --t-amber:#F0B429; --t-amber-hover:#E0A61C; /* Zelena potvrde: kvačica u obuci i zbir uštede u cjenovniku. Nije vezana za riječ na stranici — vezana je za značenje. 5.35 na bijelom, 4.95 na --t-ground, 5.03 na surface-alt. */ --t-potvrda:#0F7A52; --t-greska:#B3261E; /* Ista uloga, ali za tamne sekcije. --t-greska je na --t-b950 samo 2.51 i pada sve; ovaj je 9.61, AAA. Isti crveni porodični ton, pa se čita kao ista poruka. */ --t-greska-on-dark:#F2B8B5; /* ── ULOGE ──────────────────────────────────────────────── U komponentama koristi ULOGE, ne brojeve rampe. */ --t-ground:var(--t-n50); --t-surface:var(--t-n0); --t-surface-alt:var(--t-b50); --t-surface-emph:var(--t-b100); --t-surface-dark:var(--t-b950); --t-text:var(--t-b950); --t-text-2:var(--t-n700); --t-text-3:var(--t-n500); --t-text-on-dark:#F2F9FD; --t-text-on-dark-2:var(--t-b200); --t-link:var(--t-b600); --t-link-hover:var(--t-b950); --t-line:var(--t-n200); --t-line-strong:#C3CEDB; --t-focus:var(--t-b500); /* ── TIPOGRAFIJA ────────────────────────────────────────── Archivo ima promjenljivu osu širine — naslovi na 110-115. */ --t-font-display:"Archivo","Segoe UI",system-ui,sans-serif; --t-font-body:"Manrope","Segoe UI",system-ui,sans-serif; /* Samo za brojeve koji se porede u koloni — precrtane cijene. Sistemski stek, ne skida se nijedan dodatni fajl. */ --t-font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --t-wdth-hero:115; --t-wdth-heading:110; --t-wdth-title:105; --t-size-hero:clamp(38px,7vw,76px); --t-size-h2:clamp(26px,3.6vw,38px); --t-size-h3:21px; --t-size-body-lg:18px; --t-size-body:17px; --t-size-small:15px; --t-size-label:13px; --t-lh-hero:1.0; --t-lh-heading:1.1; --t-lh-body:1.62; --t-track-hero:-0.038em; --t-track-heading:-0.026em; --t-track-label:0.1em; /* Mjera reda. `ch` je širina nule, a mala slova su uža, pa jedan ch primi oko 1.4 znaka teksta — 66ch je davalo ~94 znaka u redu, skoro duplo preko udobnog. Izmjereno u Manropeu na stranici: 50ch drži 70–72 znaka, što je unutar raspona 45–75. Ne postavljaj mjeru napamet; izmjeri je na stvarnom tekstu. */ --t-measure:50ch; /* ── PROSTOR — osnova 4px ───────────────────────────────── Ništa izvan ove skale. */ --t-1:4px; --t-2:8px; --t-3:12px; --t-4:16px; --t-5:24px; --t-6:32px; --t-7:48px; --t-8:64px; --t-9:96px; --t-10:128px; --t-section-y:var(--t-8); /* mobilno */ --t-container:1200px; --t-container-pad:var(--t-5); /* Uža kolona za sadržaj koji se čita u redu. Obično centrirana, uz naslov sekcije koji ostaje na lijevoj ivici kontejnera; vidi pravilo poravnanja na vrhu sections.css. Sekcija koja se sastoji samo od te kolone smije da je poravna lijevo umjesto da je centrira — tada centriranje nema šta da uravnoteži. */ --t-col-narrow:820px; /* ── RADIJUSI ───────────────────────────────────────────── Dugmad su pun pill — rimuju se sa header oblikom. */ --t-r-xs:4px; --t-r-sm:8px; --t-r-md:16px; --t-r-lg:28px; --t-r-full:999px; /* ── MOTION ─────────────────────────────────────────────── */ --t-m-fast:120ms; --t-m-base:240ms; --t-m-emph:420ms; --t-m-slow:700ms; --t-ease:cubic-bezier(.2,0,0,1); --t-ease-emph:cubic-bezier(.05,.7,.1,1); /* ── ELEVACIJA ──────────────────────────────────────────── Dubina se pravi tonom površine, ne sjenkom. Sjenka je izuzetak i traži razlog u komentaru na mjestu upotrebe: element mora da izgleda fizički podignut sa podloge, ne samo istaknut. Ko je danas nosi, piše u CSS-u — ne prepisuj spisak ovamo. */ --t-shadow-float:0 6px 20px rgba(6,30,69,.14), 0 1px 3px rgba(6,30,69,.10); /* ── HEADER ─────────────────────────────────────────────── Header je pill u OBA stanja i odlijepljen je od ivice ekrana. `--t-header-inset` je taj razmak — isti gore i dolje, pa je pomak iz donjeg u gornje stanje simetričan. Logo je viši od trake i viri podjednako iznad i ispod, pa inset mora biti veći od polovine tog preljeva — inače logo u donjem stanju izađe iz viewporta. */ --t-header-h:64px; --t-header-inset:var(--t-4); --t-header-gap:var(--t-4); /* Koliko prostora header oduzima sekciji uz koju je zakačen. */ --t-header-band:calc(var(--t-header-h) + var(--t-header-inset)); } /* ───────────────────────────────────────────────────────────── PRELOMNE TAČKE — jedan skup za cijelu temu 400 600 768 1024 1200 Konvencija, bez izuzetka: nagore @media (min-width:768px) nadolje @media (max-width:767.98px) Donja granica je BP minus 0.02px, ne BP minus 1px. Sa cijelim brojem su postojale dvije jednopikselne rupe: uz `max-width:767px` i `min-width:769px` širina od tačno 768px nije pogađala nijedno pravilo, a uz `max-width:768px` i `min-width:768px` pogađala je OBA. Djelić piksela zatvara oba slučaja i radi na zumu i na ekranima sa necjelobrojnim device pixel ratiom, gdje širina viewporta i nije cio broj. Prelomi se biraju iz ovog skupa. Novi prelom znači novi red u ovom komentaru, ne tiho dodatu vrijednost negdje u sekciji. Visinski prelomi (520px, 380px) su odvojena priča — uslov im je čisto visina i objašnjeni su niže. ───────────────────────────────────────────────────────────── */ @media (min-width:768px){ :root{ --t-section-y:var(--t-9); --t-container-pad:var(--t-6); } } @media (min-width:1200px){ :root{ --t-section-y:var(--t-10); } } /* Nizak viewport. Uslov je ČISTO visina, bez orijentacije — telefon u landscapeu je 956×440 na iPhone 16 Pro Max, dakle ŠIRI od desktop praga od 769px, pa se ovaj režim ne može pogoditi širinom. Isto vrijedi i za nizak prozor na desktopu. Header se ovdje samo stanjuje. Ponašanje mu je isto kao svuda — dolje zakačen, pill, na scroll gore. */ @media (max-height:520px){ :root{ --t-header-h:52px; --t-section-y:var(--t-7); } } @media (prefers-reduced-motion:reduce){ :root{ --t-m-fast:1ms; --t-m-base:1ms; --t-m-emph:1ms; --t-m-slow:1ms; } } /* ───────────────────────────────────────────────────────────── TVRDA PRAVILA — provjereni kontrasti, ne mišljenja ✗ --t-b400 (#2FA6DE) NIKAD kao boja teksta na bijelom → 2.75, pada AA ✗ --t-b400 NIKAD ne nosi bijeli tekst → 2.75, pada AA ✓ preko --t-b400 ide --t-b950 → 5.96, AA ✓ --t-amber uvijek sa --t-b950 tekstom → 8.81, AAA PLAVI TEKST NA SVIJETLOJ PODLOZI ne ide svjetlije od --t-b700. Prag je 4.8 na sve tri svijetle podloge (--t-surface, --t-ground, --t-surface-alt), a ne 4.5, da izbor tokena ne zavisi od toga na kojoj je sekciji element završio: --t-b700 7.18 / 6.65 / 6.75 najsvjetliji koji prolazi --t-b600 4.76 / 4.41 / 4.48 pada na dvije od tri Neutrali (--t-text-2, --t-text-3) su i dalje u igri za tekst — ovo pravilo bira KORAK PLAVE, ne zabranjuje sivu. Na TAMNOJ podlozi važe druge vrijednosti i mjere se posebno; tamo --t-b400 i --t-b300 prolaze. Svaka takva upotreba nosi izmjeren broj u komentaru uz sebe. ───────────────────────────────────────────────────────────── */