/* ========================================================================== ZAGLAVLJE I PODNOZJE, nov dizajn Usvojena maketa D od 26.08.2026, `docs/adr/0019-svet-novog-dizajna.md`. ZAGLAVLJE JE LEPLJIVO, i to je odluka koja povlaci ostale. Ako traka stoji na vrhu ekrana ceo put kroz stranu, onda: - podloga mora da bude providna sa `backdrop-filter`, jer puna bela preko fotografije heroja secka sliku vodoravnom prugom; - odvaja je obris od 1 px, ne senka. Senki nema nigde (izmereno kod uzora: `klikercentar.rs` nijedna, `dic.rs` samo tvrde bez zamucenja); - dugme „Prijavi dete" je vidljivo na svakom pikselu strane, pa u podnozju vise ne treba. Visina 76 px i logotip 38 px su iz makete. STO SE ISPOD 980 px SKLAPA, A STO NE. Sklapaju se samo stavke menija. Dugme i prekidac teme ostaju u traci: dugme je jedini potez na strani i ne sme iza jos jednog klika, a prekidac teme koji se krije ne bi nasao niko. Zato stavke imaju svoj omotac `.meni__stavke`, koji jedini postaje panel. Cetiri pravila koja se ne pregovaraju iznova stoje u `osnova.css`; ovde se samo postuju: meta 44 px, pod od 14 px, `:hover` pod `@media (hover: hover)`, pokret pod `prefers-reduced-motion`. `.preskoci`, `.traka` i `.dugme` su takodje u `osnova.css` i ovde se ne crtaju ponovo. ========================================================================== */ /* ---------- Zaglavlje ---------- */ .zaglavlje { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--crta); /* Providna podloga u obe teme, iz jednog pravila: `color-mix` uzima zatecenu `--podloga`, pa tamna tema ovde nema sta da prepisuje. Prvi red je pun pad za citac koji `color-mix` ne zna, i tada je traka neprovidna, sto je losije ali nije pokvareno. */ background: var(--podloga); background: color-mix(in srgb, var(--podloga) 92%, transparent); backdrop-filter: blur(10px); /* Ime za prelaz izmedju strana (osnova.css). Zaglavlje postoji na svakoj strani sa istim sadrzajem, pa ga pregledac nosi kao ISTI element preko navigacije umesto da ga uhvati u snimak cele strane; bez ovoga lepljiva traka bi za trajanje prelaza treptala, jer bi se pretapala sama sa sobom dva puta, jednom kao deo starog snimka i jednom kao deo novog. */ view-transition-name: pc-zaglavlje; } .zaglavlje__traka { display: flex; align-items: center; gap: 16px; min-height: 76px; } .logo { display: flex; align-items: center; margin-right: auto; /* Meta za prst je 44 px i kad je crtez nizi. Ispod 640 px logotip je 28 px visok, pa je veza oko njega bila 106x28: prolazila je samo dok je logotip greskom bio 46 px visok na svakoj sirini. Traka je 76 px, pa se od ovoga ne pomera nista. */ min-height: 44px; } /* Dva sloja iste slike, jedan preko drugog. Grid je ovde samo za slaganje (jedna celija, dva deteta), ne za raspored: oba sloja su 1024x269 pa se poklope bez ijedne rucne koordinate. */ .logo-slojevi { display: grid; } .logo-slojevi > img { grid-area: 1 / 1; } .logo-slika { height: 46px; width: auto; /* NIKAD IZDUZEN, i kad mu je tesno. Logotip je dete resetke koja je dete trake, pa ga uzak ekran stiska po sirini; do 02.09.2026. je tada bio razvucen (na 375 px 149 px sirine umesto 175). `contain` u tom slucaju crta manju sliku u istom polju umesto da menja odnos strana. */ object-fit: contain; object-position: left center; } /* VECI LOGOTIP SAMO NA SIROKOM EKRANU. Milica 31.08.2026: „malo veci, da vise ispuni visinu zaglavlja, bez da se visina menja i bez da udara u ivice". Pavle 02.09.2026: „povecaj da bude blize ivicama headera bez da menjas velicinu headera". Zaglavlje ostaje 76 px. Racun vazduha iznad i ispod: 46 px ostavlja po 15, 60 px ostavlja po 8. Ispod 8 px logotip pocinje da nalezi na obris trake, pa je 60 gornja granica, ne pola puta do nje. Na uskom ekranu ostaje manji, jer tamo logotip deli red sa dva dugmeta i prekidacem menija. */ @media (min-width: 980px) { .logo-slika { height: 60px; } } .logo__tekst { font: 800 1.35rem/1 var(--font-naslov); } /* Logotip je mornarski PNG i na tamnoj podlozi se gubi, ZATO sloj „tekst" (coding, edukativni centar) i dalje ide na belo. Sloj „boja" (heksagon, `{/}`, „PRO") se NE filtrira ni ovde ni ispod: on nosi svoju boju nezavisno od pozadine, pa filter na njemu samo brise plavo „PRO" bez ikakve koristi. Do 27.08.2026. je ovde stajao jedan filter preko cele slike i to je gasilo „PRO"; ADR-0019 ga je beležio kao poznat nedostatak. */ [data-tema="tamna"] .logo-slika--tekst { filter: brightness(0) invert(1); } /* ---------- Meni ---------- */ .meni { display: flex; align-items: center; gap: 14px; } .meni__stavke { display: flex; align-items: center; gap: 28px; } .meni__stavke a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* Kratke stavke ("Blog") su bez ovoga uzane 32 px: sonda ih je uhvatila na 1000 i 1024 px, gde je meni jos pun (sklapa se tek ispod 980) a dodirna meta se jos meri (do 1024). `min-width` pokriva sve stavke odjednom, u istom pravilu koje vec drzi visinu, umesto posebnog selektora za jednu rec. */ min-width: 44px; color: var(--tekst); font-size: 16px; font-weight: 600; text-decoration: none; transition: color .18s ease; } .meni__stavke a[aria-current] { color: var(--akcenat-tamni); } /* Podvlaka nosi „ovde ste" i kad boja otpadne, na primer u rezimu visokog kontrasta, gde `color` prepisuje sistemska boja. Stoji kao sloj iznad, da ukljucivanje ne pomeri red za tri piksela. */ .meni__stavke a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; border-bottom: 3px solid var(--akcenat); } @media (hover: hover) { .meni__stavke a:hover { color: var(--akcenat-tamni); } } .meni__stavke a:focus-visible, .tema-prekidac:focus-visible, .zaglavlje__prekidac:focus-visible, .podnozje a:focus-visible { outline: 3px solid var(--akcenat); outline-offset: 2px; } /* ---------- Dva okrugla dugmeta: tema i sklapanje menija ---------- Ista mera i isti obris namerno, da se citaju kao par a ne kao dva resenja. 44 px je dodirna meta iz ADR-0005, pa `@media (pointer: coarse)` iz osnove ovde nema sta da doda. */ .tema-prekidac, .zaglavlje__prekidac { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 1px solid var(--crta-jaka); border-radius: 999px; background: transparent; color: var(--tekst); cursor: pointer; transition: border-color .18s ease, color .18s ease; } @media (hover: hover) { .tema-prekidac:hover, .zaglavlje__prekidac:hover { border-color: var(--tekst); } } /* OVDE JE STAJALO `.tema-prekidac svg { display: block }`. To pravilo je jace od `.tema-ikona { display: none }` u odeljku o suncu i mesecu, pa su se obe ikonice videle odjednom (Pavle 02.09.2026). Dugme je `inline-flex`, pa su mu deca ionako blokovi i pravilo nije imalo drugog posla. */ /* Prekidac menija se ne vidi na sirokom ekranu i pojavljuje se tek ispod 980 px, i to samo ako skripta radi. Vidi `header.php`. */ .zaglavlje__prekidac { display: none; } .zaglavlje__prekidac span, .zaglavlje__prekidac span::before, .zaglavlje__prekidac span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, background .18s ease; } .zaglavlje__prekidac span::before { content: ""; transform: translateY(-6px); } .zaglavlje__prekidac span::after { content: ""; transform: translateY(4px); } /* Sklopljeno stanje je krstic. Okretanje crte za 45 stepeni nije nagib iz starog recnika nego opsteprihvacen znak „zatvori"; nagib je bio na celim povrsinama, i njega nema. */ .zaglavlje__prekidac[aria-expanded="true"] span { background: transparent; } .zaglavlje__prekidac[aria-expanded="true"] span::before { transform: rotate(45deg); } .zaglavlje__prekidac[aria-expanded="true"] span::after { transform: rotate(-45deg); } /* ---------- Uzak ekran ---------- */ @media (max-width: 980px) { /* Bez skripte meni ostaje rasklopljen i svaka stavka je dostupna; red se prelama umesto da se sklopi. Zato i sklapanje i samo dugme vise o `.ima-js`, koju skripta postavi tek kad nadje i dugme i meni. */ .meni__stavke { flex-wrap: wrap; gap: 16px; } .meni__stavke a[aria-current]::after { display: none; } .ima-js .zaglavlje__prekidac { display: inline-flex; } .ima-js .zaglavlje__prekidac[aria-expanded="false"] + .meni .meni__stavke { display: none; } .ima-js .zaglavlje__prekidac[aria-expanded="true"] + .meni .meni__stavke { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 6px var(--traka-ivica) 14px; background: var(--podloga); border-bottom: 1px solid var(--crta); } } /* Na 375 px u traku staju logotip, dva okrugla dugmeta i potez, ali samo ako se logotip spusti i potez suzi. Merene sirine na 375: logotip 28 px visine je 107 px sirok, dva dugmeta 88, potez 122, razmaci 26, ivica 2x16, ukupno 375. Zato ivica zaglavlja ovde odstupa od `--traka-ivica`. */ @media (max-width: 640px) { .zaglavlje__traka { gap: 10px; padding-inline: 16px; } /* VISINA OSTAJE 46 px I NA TELEFONU (Pavle 02.09.2026: „izgleda da si slucajno smanjio procoding logo sa headera na telefonu, vrati ga kao sto je bio ranije"). Merenje iz 2026-08 koje je trazilo 28 px racunalo je sa punom sirinom logotipa; posto `object-fit: contain` sada crta sliku unutar onoga sto joj traka da, logotip se sam svede i nista se ne preliva. Provereno `kapija-mobilni.py` na 320 i 393 px. */ .meni { gap: 8px; } .meni .dugme { padding-inline: 14px; font-size: 15px; } } /* ========================================================================== PODNOZJE JEDNA TRAKA, ne mreza stubaca. Pavle 26.08.2026: cetiri stupca iz makete su „prevelik i previse wordpress" footer. Naslovi stubaca („Programi", „Centar", „Gde smo") su ono sto podnozje pretvara u spisak spiskova, pa ih nema: logotip, pet veza, adresa, tanka crta, godina. Gornja granica visine na 1440 px je 200 px, i drzi je ovaj raspored, ne poseban broj. Podloga je `--podloga-tamna`, pa je i na svetloj temi ovo tamna povrsina. Zato boje slova ovde idu iz `--tekst-na-tamnom*`, a ne iz `--tekst`. ========================================================================== */ .podnozje { background: var(--podloga-tamna); /* Ko farba tamno, taj javi i boju prstena. Vidi `osnova.css`. */ --prsten: var(--istaknuto); color: var(--tekst-na-tamnom-blagi); padding-block: 32px 0; /* Isti razlog kao kod `.zaglavlje`: podnozje se ne menja od strane do strane, pa se pri prelazu nosi kao svoj element, ne kao deo snimka cele strane. */ view-transition-name: pc-podnozje; } .podnozje__traka { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 40px; } /* OVDE JE STAJAO LOGOTIP PODNOZJA, pet pravila: `.podnozje__logo`, `.podnozje__logo-slojevi`, `.podnozje__logo-slika`, `--tekst` i `.podnozje__ime`. Sam logotip je izasao iz `footer.php` 03.09.2026, uz Milicin i Pavlov prolaz; pravila su ostala i stajala do 11.09.2026. Meta od 44 px koju je `.podnozje__logo` cuvao (izmereno 27.08.2026: veza je bila 122x32, 12 px ispod praga iz ADR-0005) i dalje vazi za svaku vezu u podnozju, kroz `:where(.veza, ...)` u `osnova.css`. Dvoslojni logotip sa `filter: brightness(0) invert(1)` zivi u zaglavlju, `header.php`. */ /* SVE TRI GRUPE TEKU S LEVA, od 02.09.2026. Do tada je `margin-right: auto` gurao mreze i adresu na desnu ivicu. Otkako je adresa jedan red od 794 px, sve tri u traci od 1240 ne staju (288 + 252 + 794 + razmaci = 1414), pa adresa pada u svoj red; sa razmaknutim grupama iznad to je izgledalo kao dva nepovezana rasporeda u istom podnozju. */ .podnozje__veze { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; } /* `min-height` 44 px, a ne samo `padding`: prst gadja povrsinu, ne slovo. Izmereno 26.08.2026 na 375 px, veze u podnozju su bile 32 px visoke, ispod praga iz ADR-0005. Vodoravni razmak od 24 px u `gap` drzi ih razdvojene, pa se veca meta ne pretvara u dve mete koje se dodiruju. */ .podnozje__veze a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-block: 4px; color: var(--tekst-na-tamnom-blagi); font-size: 15px; text-decoration: none; transition: color .18s ease; } @media (hover: hover) { .podnozje__veze a:hover { color: var(--bela); text-decoration: underline; } } /* Adresa, posta i telefon u jednom redu, poravnati po sredini sa vezama i mrezama levo od njih. Do 02.09.2026. je ovo bio blok od dva reda sa `text-align: right`, pa je stajao vise od svega ostalog u traci. */ .podnozje__adresa { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; margin: 0; max-width: none; font-size: 15px; line-height: 1.5; } /* Sam naziv ulice nije veza, ali stoji u redu sa dve mete od 44 px, pa nosi istu visinu; bez toga bi red bio visok 22 px a dve mete bi ga rasirile naizmenicno. */ .podnozje__mesto { display: inline-flex; align-items: center; min-height: 44px; } /* E-posta i telefon stoje u istom redu, e-posta levo pa telefon desno. Pavle 27.08.2026: broj se cita iz `procoding_nova_kontakt_podaci()`, ovde se samo ispisuje. `inline-flex` sa `flex-wrap`, ne dve odvojene veze u tekstu: na uskom ekranu red sme da pukne u dva, ali svaki podatak ostaje celina, ne pukne nasred broja. */ /* OVDE JE STAJAO `.podnozje__kontakti`, omotac oko poste i telefona. Pao je 02.09.2026: kad su adresa, posta i telefon jedan red, sam `.podnozje__adresa` je taj red i drugi omotac nema sta da drzi. */ /* Ista meta od 44 px kao svaka druga veza na sajtu: podloga raste, red ostaje na mestu (`:where(.veza, .putanja a, .koraci__telefon)` u `osnova.css`). Ovde se ponavlja rucno umesto da se doda u taj selektor, jer `osnova.css` nije u ovom poslu; pravilo je ipak isto, red po red. */ .podnozje__adresa a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tekst-na-tamnom); text-decoration: none; white-space: nowrap; } @media (hover: hover) { .podnozje__adresa a:hover { text-decoration: underline; } } /* Crta na tamnoj podlozi ne moze da bude `--crta`, jer je ona tamna na svetlom i ovde se ne vidi. Bela na 14 % je isti odnos, sa druge strane. */ /* GODINA LEVO, PRAVNE VEZE DESNO, u istom redu, od 03.09.2026 (Pavle). Do tada su bila dva bloka jedan ispod drugog, pa je rub bio visok dva reda za dve stvari koje zajedno ne pune ni pola trake. Na uskom ekranu red pukne i vezе padnu pod godinu, kako je i bilo. */ .podnozje__rub { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 24px; margin-top: 24px; padding-block: 16px; border-top: 1px solid color-mix(in srgb, var(--bela) 14%, transparent); } .podnozje__rub p { margin: 0; max-width: none; font-size: 14px; } /* 780 NIJE IMENOVANI PRELOM, mereno 30.08.2026. Prag je trenutak kad veze i adresa u podnozju prestanu da stanu u jedan red. Na 980 bi se podnozje slozilo uspravno kroz ceo pojas 781 do 980, na svakoj strani sajta: visina trake 109 -> 165 px, strana +56 px na 781, 900 i 980, preliv 0. Vodoravni red tu jos staje, pa se ne gubi. Na 640 nije mereno ovim prolazom. Ostaje 780. */ @media (max-width: 780px) { .podnozje__traka { flex-direction: column; align-items: flex-start; gap: 16px; } .podnozje__veze { margin-right: 0; } } /* ========================================================================== LOGOTIP, PREKIDAC I SMENA TEME, 27.08.2026. ========================================================================== */ /* OVDE JE 27.08.2026. STAJALO `.logo-slika { height: 46px }` bez medija upitnika. Kako je poslednje u fajlu, gasilo je oba pravila iznad: i 48 px sa sirokog ekrana i 28 px sa uskog. Posledica se videla na 375 px, gde je logotip od 46 px trazio 175 px sirine, a u traci ga je stiskalo na 149, pa je bio izduzen. Visina sada stoji na jednom mestu, gore uz `.logo-slika`. */ /* PREKIDAC TEME SE OKRECE, ne trepce. Ikona je krug sa popunjenom polovinom, pa je pola okreta tacno ono sto se desilo: strana koja je bila tamna postaje svetla. `transform` se DODAJE postojecem spisku prelaza, ne zamenjuje ga: pravilo sa vecom specificnoscu koje navede samo `transform` ugasilo bi prelaz boje i ivice iz pravila iznad, pa bi dugme pod misem opet skakalo. */ .tema-prekidac svg { transition: transform .32s cubic-bezier(.4, 0, .2, 1); } .tema-prekidac[aria-pressed="true"] svg { transform: rotate(180deg); } /* SMENA TEME SE PRETAPA, i to samo dok traje. Klasu `tema-menja` postavlja skripta u zaglavlju i skida je posle 320 ms. ZASTO NIJE STALNO PRAVILO. Prelaz boje na svemu vazio bi i pri ucitavanju i pri svakom `:hover`-u, pa bi ceo sajt kasnio za misem. Ovako nijedan element ne nosi visak prelaza ni jednog trenutka duze nego sto treba. `background-image` je u spisku zbog preliva preko heroja, koji su slike a ne boje; bez njega bi se preko fotografije podloga menjala naglo dok se sve ostalo pretapa. */ .tema-menja, .tema-menja *, .tema-menja *::before, .tema-menja *::after { transition: background-color var(--prelaz-teme) linear, background-image var(--prelaz-teme) linear, border-color var(--prelaz-teme) linear, color var(--prelaz-teme) linear, fill var(--prelaz-teme) linear !important; } /* Isto pretapanje kroz view transition, od 11.09.2026: pregledac pretapa snimak stare i nove strane, pa nista ne kasni za roditeljem (v. `header.php`). `tema-vt` stoji na korenu samo dok smena traje, pa prelaz izmedju strana (`osnova.css`, .22 s) ostaje svoj. */ .tema-vt::view-transition-group(*), .tema-vt::view-transition-old(*), .tema-vt::view-transition-new(*) { animation-duration: var(--prelaz-teme); animation-timing-function: cubic-bezier(.4, 0, .2, 1); } /* Posetilac koji trazi manje pokreta dobija smenu bez pretapanja i bez okreta. Sam izbor teme nije pokret i ostaje. */ @media (prefers-reduced-motion: reduce) { .tema-prekidac svg, .tema-prekidac[aria-pressed="true"] svg { transition: none; transform: none; } .tema-menja, .tema-menja *, .tema-menja *::before, .tema-menja *::after { transition: none !important; } } /* ========================================================================== CESTA PITANJA — ZNAK I OTVARANJE, 27.08.2026. Pavle: isti znak kao kod saradnika na `/o-nama/`, plus koji se okrece u x, i isto glatko otvaranje tela (`::details-content`). Kod saradnika je taj plus u medjuvremenu pao, 02.09.2026, kad je mreza postala vrteska; ovde je ostao i radi, pa se ovaj znak od tada nigde ne ogleda. Markup i osnovni izgled pitanja (padding, font, spisak) ostaju u `kurs.css`, nedirnuti; menja se samo STANJE OTVORENOG znaka i dodaje se otvaranje visinom. ZASTO OVDE, A NE U `kurs.css` GDE `.pitanje` INACE ZIVI Taj fajl nije u ovom poslu. `zaglavlje-podnozje.css` je jedini list koji ide na SVAKU stranu bez uslova (v. `procoding_nova_stilovi()`), pa je jedino mesto odakle se ovaj znak moze garantovati na svih sedamnaest strana koje nose pitanja, ukljucujuci one bez `onama.css` i bez ijednog drugog uslovnog lista. Selektor je zato nadjacan SPECIFICNOSCU (`.pitanja` ispred), ne redosledom ucitavanja: `kurs.css` nosi stariji zapis istog znaka (crta koja blednu umesto da se okrene) i on i dalje stoji tamo, nedirnut. MEHANIZAM OSTAJE U DVA FIZICKA PRIMERKA, NE JEDAN Brojevi (2px, .22s, 45 stepeni) su isti kao u `onama.css`, ali `onama.css` nije medju fajlovima ovog posla i ne sme da se dira, pa pravilo ne moze da se spoji u jedan zajednicki selektor. Ko jednog dana preseli oba znaka u zajednicki list, moze da obrise i ovaj blok i onaj u `onama.css`. ========================================================================== */ .pitanja .pitanje__znak { transition: transform .22s cubic-bezier(.4, 0, .2, 1); } /* Uspravna crta plusa se vise ne gasi (stari zapis u `kurs.css`): ostaje na mestu, pa cela oznaka moze da se okrene u x. Jedna klasa vise (`.pitanja`) je namerna, da ovo pravilo pobedi ono u `kurs.css` bez obzira koji se od dva lista ucita drugi. */ .pitanja .pitanje[open] .pitanje__znak::after { transform: rotate(90deg); opacity: 1; } .pitanja .pitanje[open] .pitanje__znak { transform: rotate(45deg); } /* Telo se otvara visinom iz `js/harmonika.js`, od 11.09.2026. Do tada je to radio prelaz na `::details-content` uz `interpolate-size`, i u Chrome-u 152 se nije desavao: klik nije pravio nijedan prelaz, pa se pitanje otvaralo skokom (Pavle: „ne instant"). Bez skripte `
` i dalje radi sam. */ /* Manje pokreta: znak i dalje postaje x, jer je to oznaka stanja a ne pokret, ali se ne animira. Telo tada ne animira ni skripta. */ @media (prefers-reduced-motion: reduce) { .pitanja .pitanje__znak { transition: none; } } /* ---------- Sunce i mesec na prekidacu teme ---------- Vidi se ono sto klik donosi: na svetloj temi mesec, na tamnoj sunce. Bez skripte, po `data-tema` na korenu, pa se ne javi pogresna ikonica pre nego sto se skripta ucita. */ .tema-ikona { display: none; } .tema-ikona--mesec { display: block; } [data-tema="tamna"] .tema-ikona--mesec { display: none; } [data-tema="tamna"] .tema-ikona--sunce { display: block; } /* ---------- Podnozje posle 01.09.2026 ---------- Logotip je izasao, pa `podnozje__traka` vise nema prvu kolonu. Mreze su nov red i nose isti oblik kao veze, da se citaju kao jedan spisak u dva reda a ne kao dva razlicita resenja. Pravni red je sitan i stoji uz godinu. */ .podnozje__mreze { display: flex; flex-wrap: wrap; /* 20 px razmaka je bilo mereno na imenima. Ikonica nosi svoju metu od 44 px, pa je razmak od 8 px dovoljan da se dve mete ne dodiruju, a tri znaka se citaju kao jedna grupa. */ gap: 8px; } /* Dodirna meta od 44 px (ADR-0005). Bez ovoga su Instagram, TikTok i YouTube bili visoki 26 px, jer im je red teksta jedina visina, pa je `meri.mjs` javljao tri nalaza na svakoj od sedam merenih sirina. OTKAKO SU IKONICE (02.09.2026), meta je kvadrat 44x44 i crtez u njoj stoji po sredini. Sirinu vise ne daje duzina imena, pa je `min-width` obavezan: bez njega bi meta bila siroka koliko i crtez, dakle 22 px. */ .podnozje__mreze a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--tekst-na-tamnom-blagi); transition: color .18s ease; } /* 22 px je mereno prema visini reda u podnozju (15 px slova, 22 px reda), pa ikonica stoji tacno koliko i ime koje je zamenila. */ .podnozje__mreze svg { width: 22px; height: 22px; display: block; } @media (hover: hover) { .podnozje__mreze a:hover { color: var(--bela); } } .podnozje__pravno { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .82rem; } /* Dodirna meta od 44 px, isti uslov kao ostale mete u temi. Do 11.09.2026. su „Politika privatnosti" i „Kolačići" bili visoki 22 px (nalaz 86). */ @media (pointer: coarse), (max-width: 1024px) { .podnozje__pravno a { display: inline-flex; align-items: center; min-height: 44px; } } /* Verzija i autor redizajna, ispod adrese (03.10.2026). Sitno i blede od adrese, da se procita ko trazi, a ne da se takmici sa kontaktom. */ .podnozje__verzija { /* Roditelj je red koji se lomi; puna sirina ga spusta ispod adrese. */ flex-basis: 100%; width: 100%; margin: 0; max-width: none; font-size: 13px; line-height: 1.5; color: var(--tekst-na-tamnom-blagi); }