/* ========================================================================== TOKENI Usvojeno 26.08.2026, `docs/adr/0019-svet-novog-dizajna.md`. Svaka vrednost ovde ima poreklo u merenju; ako se neka menja, menja se i razlog uz nju. ODAKLE BOJE. Iz logotipa, ne po utisku: `mLogo.png` 1024x269, dve boje nose 98 % neprozirnih piksela. mornarska #2d3e50 41.049 px kontrast prema beloj 10,97:1 plava #0398db 8.380 px kontrast prema beloj 3,22:1 Zato mornarska nosi slovo, a plava NE SME kao slovo na beloj. Ovde je do 26.08.2026. stajalo da je bela na plavoj 6,52:1, sto nije tacno ni u jednom smeru: kontrast je simetrican, pa je i bela na #0398db 3,22:1. Zbog toga plava #0398db NE nosi dugme; dugme nosi #0279b0, gde je bela 4,81:1. Zuta #ffc94a je zatecena boja projekta, mornarska na njoj je 7,16:1. Prepisivanje zute sa `dic.rs` je odbaceno: to je boja direktnog konkurenta iz iste branse i istog grada. Maskota potvrdjuje isti izbor: `kodi-*.png` je bela, mornarska i tirkiz, bez ijedne tople boje. ODAKLE MERE. Izmereno `dizajn/alat/sonda-uzor.mjs` na cetiri sajta koja je Milica navela kao pravac, 26.08.2026, na 1440 px: traka dic 1350, kliker 1310, a1 1250, yettel 1120 -> 1240 h1 dic 50/800, kliker 60/extrabold, a1 64 -> clamp do 56 poluprecnik dic 99px, kliker 50px, yettel 25px (dugme) -> pilula ritam kliker 104 px gore i dole, na svakoj sekciji -> 104 / 64 (Pavle ga je 08.09. skratio na 80, razlog stoji uz token) senke kliker nema nijednu, dic samo tvrde bez zamucenja -> nema STO OVDE NEMA. Nema `--filc`, `--papir`, `--cioda` ni `--senka-kartice`. To je recnik oglasne table i namerno ne prelazi. ========================================================================== */ :root { /* Slog. Oba fonta su nasa, samohostovana, sa podskupom `latin-ext`, pa srpska slova stizu bez ijednog spoljnog zahteva. Vidi `fontovi.css`. */ --font-naslov: "Bricolage Grotesque", "Hanken Grotesk", -apple-system, sans-serif; --font-tekst: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif; /* Duzina reda. Prag je isti kao u staroj temi, jer je merilo isto: `sonda-uski.js` racuna znakove po redu i granica je 78. */ --mera: 58ch; /* Prelomi. Preuzeti iz ADR-0004 nepromenjeni: imena su vec usvojena i `sonda-mobilni.js` meri po njima. Nov dizajn menja izgled, ne merila. */ --prelom-usko: 640px; --prelom-srednje: 980px; --prelom-siroko: 1240px; /* ---------- Boje, svetla tema ---------- */ --podloga: #ffffff; --podloga-mirna: #f2f6f9; --podloga-tamna: #2d3e50; --tekst: #2d3e50; /* 10,97:1 na beloj */ --tekst-blagi: #5c6f82; /* 5,19:1 na beloj */ --tekst-na-tamnom: #e8eef4; --tekst-na-tamnom-blagi: #b9c9d8; --akcenat: #0398db; /* `--akcenat-tamni` je AKCENT KOJI SME DA BUDE SLOVO. Ime je nasledjeno i vara: na tamnoj temi je svetliji od `--akcenat`, ne tamniji. Posao mu je isti u obe teme, da plava kao slovo predje 4,5:1, jer sama `--akcenat` daje 3,22:1 prema beloj i 26.08.2026. je oborila 21 merenje na `/kursevi/`. `--akcenat` od tada boji povrsine i ivice, ne slova. */ --akcenat-tamni: #0272a6; /* kao slovo 5,30:1 na beloj i 4,88:1 na mirnoj */ /* Podloga dugmeta je zaseban token, a ne `--akcenat`, jer se u dve teme ponasa suprotno: na svetloj mora da bude TAMNIJA od akcenta da bi bela na njoj presla 4,5:1, a na tamnoj je akcent vec svetao pa dugme nosi tamno slovo i podloga ostaje akcent. Jedan token, dva ponasanja. */ --dugme-podloga: #0272a6; /* bela 5,30:1 */ --dugme-podloga-jaca: #01608c; /* bela 6,88:1, stanje pod misem */ --istaknuto: #ffc94a; /* mornarska na njoj 7,16:1 */ /* Blaze slovo na zutoj povrsini. Zuta je svetla u OBE teme, pa ovaj token ima istu vrednost i gore i dole; zato i postoji, umesto pet upisanih `#4a5c6e`. Ta stara vrednost je birana prema svetloj zutoj #ffc94a, gde daje tacno 4,50:1, bez ijedne desetinke rezerve, pa je na tamnoj temi, gde zuta prelazi u #f0b83a, padala na 3,81:1. Izmereno 26.08.2026. na Kodijevom koraku na pocetnoj. */ --tekst-na-zutom: #3d4d5e; /* 5,66:1 na #ffc94a, 4,80:1 na #f0b83a */ /* Polje forme i greska. Ovde a ne u `kontakt.css` i `prijava.css`, gde su do 26.08.2026. stajali kao `--pc-*` u dva primerka: forma je prva kojoj su zatrebali, ali nije jedina koja ih sme koristiti. Crven okvir nije poruka, pa uz njega uvek ide i recenica; boja sama ne kaze nista coveku koji je ne razlikuje. */ --radius-polje: 14px; --greska: #c0392b; --istaknuto-jaci: #ffd977; --crta: rgba(45, 62, 80, .12); --crta-jaka: rgba(45, 62, 80, .28); /* ---------- Boje koje su do 27.08.2026. stajale doslovno ---------- Kapija je dotad gledala arhiviranu temu, pa ih nije prijavljivala. Svaka od njih je bila mesto na kome tamna tema moze tiho da padne. */ --bela: #ffffff; --mrak: #0b1219; /* slovo na zutom i na akcentu u tamnoj temi */ --tekst-na-tamnom-jaci: #dce6ee; --tekst-na-tamnom-mekan: #cfdce7; --tekst-blagi-tamniji: #3d4f61; --dugme-na-zutom-jaci: #1d2b3a; /* Boje Scratch blokova. Do 27.08.2026. su stajale u `kurs.css`, gde ih kapija broji kao doslovne. Nisu nase boje nego Scratch-ove, pa se ne biraju nego prepisuju, i zato stoje ovde a ne u paleti gore. */ --blok-dogadjaj: #ffbf00; --blok-kontrola: #ff8c1a; --blok-kretanje: #4c97ff; --blok-podaci: #ff8c1a; --blok-zvuk: #cf63cf; --blok-meki: #ffeaba; /* Velovi preko fotografije. Stoje ovde a ne u `pocetna.css` iz dva razloga: boja u njima je ista mornarska iz palete, i sonda koja meri kontrast cita stopove preliva iz izracunate vrednosti. `color-mix` se u prelivu ne razlaze na `rgba`, pa ga sonda ne procita i kartica sa fotografijom joj izgleda kao bela podloga. Izmereno 27.08.2026: 96 laznih padova na svetloj temi. */ /* Tanji od 02.09.2026 (Pavle: „smanji malo taj gradijent"). Uspravni je sa .15/.40/.92 spusten na .08/.30/.86, vodoravni sa .66/.20 na .52/.12. Donji stop uspravnog vela je jedini koji drzi kontrast slova (bela na njemu, mereno `kapija-strane.py`), pa je i najmanje smanjen. */ --veo-heroj-usp: linear-gradient(180deg, rgba(45, 62, 80, .08) 0%, rgba(45, 62, 80, .30) 42%, rgba(45, 62, 80, .86) 100%); --veo-heroj-vod: linear-gradient(90deg, rgba(45, 62, 80, .52) 0%, rgba(45, 62, 80, .12) 56%, rgba(45, 62, 80, 0) 100%); --veo-kartice: linear-gradient(180deg, rgba(45, 62, 80, 0) 28%, rgba(45, 62, 80, .90) 100%); /* ---------- Raspored ---------- */ --traka: 1240px; --traka-ivica: 24px; --radius-kartica: 20px; --radius-ram: 28px; /* Tri koraka razmaka, i nijedan cetvrti. Isti spisak koji Milica dobija kao kontrolu „razmak" po sekciji, pa se u CSS-u ne sme pojaviti broj koji ona ne moze da izabere. */ /* BOJA PRSTENA FOKUSA, i to NASLEDNA. Podrazumevano je tamni akcent, koji na beloj daje 5,30:1 i na mirnoj 4,88:1, oboje iznad praga od 3:1. Svaka tamna povrsina ga PREPISUJE na zutu, jednim redom uz svoju podlogu. Zato ne postoji spisak selektora „ovi elementi su na tamnom": element koji sutra udje u tamnu sekciju nasledi tacan prsten a da niko ne pise nov red. Do 27.08.2026. je taj spisak postojao i imao tri stavke, pa je telefon na `/predavaci/` dobijao prsten od 2,07:1, jer njegov panel nije bio ni jedna od te tri. */ --prsten: var(--akcenat-tamni); /* Trajanje smene teme. Stoji ovde, a ne u zaglavlju, jer isti broj cita i skripta koja klasu `tema-menja` skida (`header.php`). Dva broja na dva mesta razidju se prvom izmenom. */ --prelaz-teme: .3s; /* ODMAK SIDRA OD VRHA, 29.08.2026 (Pavle: kartica „Predskolci" sa pocetne vodi na `/kursevi/#predskolci`, a naslov zavrsi ispod zaglavlja). Zaglavlje je `position: sticky` i visoko 77 px izmereno na svakoj strani; ovde je 77 + 27 px vazduha, da naslov ne nalegne na donju ivicu trake. Stoji kao token a ne kao broj uz svaki `id`, jer je posledica visine zaglavlja: kad se ona promeni, menja se jedna vrednost. */ --sidro-odmak: 104px; /* RITAM SKRACEN, 08.09.2026 (Pavle, na `/kursevi/` i na strani kursa: „ovde ima mnogo belog praznog prostora… taj prazan prostor samo malo smanji"). Bilo je 72 / 104 / 144, mereno na kliker.rs 26.08. Prazan pojas izmedju dve sekcije je zbir dva ritma, dakle 208 px na 1900, a ispod uvoda strane kursa taj pojas nosi samo vezu „Pročitaj više" i izgleda kao rupa. Novi zbir je 160 px. Mobilne vrednosti nisu dirane, tamo se niko nije zalio. */ --ritam-mali: 56px; --ritam: 80px; --ritam-veliki: 112px; } @media (min-width: 641px) { :root { --traka-ivica: 40px; } } @media (max-width: 980px) { :root { --ritam-mali: 44px; --ritam: 64px; --ritam-veliki: 88px; } } /* ========================================================================== TAMNA TEMA, prava. Stara tema je imala 54 tokena pod `[data-tema="tamna"]`, ali to nije bila tamna tema nego tamna PODLOGA: `--papir` je ostajao #fdfcf7 a `--tinta` #1d2438, pa su kartice ostajale bele a slovo tamno. Pavle 26.08.2026: „ocu da imamo tamnu temu, ali pravu, ne samo pozadina nego i tekst da bude invertovan". Ovde se okrece sve. Fokus ostaje na svetloj. Tamna je drugi skup vrednosti za ISTE tokene, ne drugi dizajn, pa nijedno pravilo van ovog fajla ne sme da zna za nju. `prefers-color-scheme` se ne cita u CSS-u nego u skripti u `header.php`, koja upise `data-tema` pre prvog crtanja. Razlog je isti kao u staroj temi: ovako spisak stoji jednom umesto dvaput. Bez JavaScripta ostaje svetla. KONTRASTI, izmereni: tekst #e8eef4 na #141c26 13,4:1 blagi #9fb0c0 na #141c26 7,7:1 plava #29a9e6 na #141c26 6,4:1 (na beloj bi bila 2,7, pa na tamnoj plava SME kao slovo a na svetloj ne) zuta #f0b83a na #141c26 9,4:1 ========================================================================== */ [data-tema="tamna"] { --podloga: #141c26; --podloga-mirna: #1b2430; --podloga-tamna: #0e141c; --tekst: #e8eef4; --tekst-blagi: #9fb0c0; --tekst-na-tamnom: #e8eef4; --tekst-na-tamnom-blagi: #9fb0c0; --akcenat: #29a9e6; --akcenat-tamni: #4fbcee; --dugme-podloga: #29a9e6; /* slovo #0b1219, 7,10:1 */ --dugme-podloga-jaca: #4fbcee; /* slovo #0b1219, 8,76:1 */ --greska: #ff9a8d; /* svetlija, jer stoji na tamnoj podlozi */ --istaknuto: #f0b83a; --istaknuto-jaci: #ffc94a; --crta: rgba(232, 238, 244, .13); --crta-jaka: rgba(232, 238, 244, .34); }