/* podrzAVam.rs — stilovi. Mobile-first, bez spoljnih zahteva.
Redizajn: svetla tema, bela dominantna, akcenti crvena i plava iz logotipa. */
/* ---------- Font ----------
Montserrat, hostovan KOD NAS (src/assets/fonts/). Ne sa Google Fonts servera:
sajt obećava posetiocima nula spoljnih zahteva, a font sa tuđeg servera bi
svakome poslao IP adresu trećoj strani.
Svaki rez postoji u DVE datoteke — latiničnoj i ćiriličnoj — razdvojene preko
`unicode-range`. Pregledač preuzima samo onu koja mu treba: latinična
stranica nikada ne vuče ćirilične fajlove i obrnuto. Zato ćirilična verzija
sajta ne košta latiničnog posetioca ni bajt.
Datoteke su podskupovi, pa je latinični rez ~21 KB umesto ~200 KB.
Licenca (SIL OFL) i detalji su u assets/fonts/LICENSE.txt.
`font-display: swap` je namerno: tekst se vidi odmah sistemskim fontom i
zameni se kad Montserrat stigne. Na slaboj vezi je pročitati stranicu
važnije nego videti je u pravom fontu. */
@font-face {
font-family: "Montserrat";
src: url("../fonts/montserrat-400.b622781859.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}
@font-face {
font-family: "Montserrat";
src: url("../fonts/montserrat-400-cir.480a741c95.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0400-045F, U+2116;
}
@font-face {
font-family: "Montserrat";
src: url("../fonts/montserrat-600.a91cfc8653.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}
@font-face {
font-family: "Montserrat";
src: url("../fonts/montserrat-600-cir.2c8b418087.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
unicode-range: U+0400-045F, U+2116;
}
@font-face {
font-family: "Montserrat";
src: url("../fonts/montserrat-800.2c56d00d03.woff2") format("woff2");
font-weight: 800; font-style: normal; font-display: swap;
unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}
@font-face {
font-family: "Montserrat";
src: url("../fonts/montserrat-800-cir.c7562761e2.woff2") format("woff2");
font-weight: 800; font-style: normal; font-display: swap;
unicode-range: U+0400-045F, U+2116;
}
@font-face {
font-family: "Montserrat";
src: url("../fonts/montserrat-800i.211eb4f73c.woff2") format("woff2");
font-weight: 800; font-style: italic; font-display: swap;
unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}
@font-face {
font-family: "Montserrat";
src: url("../fonts/montserrat-800i-cir.8c330b72b2.woff2") format("woff2");
font-weight: 800; font-style: italic; font-display: swap;
unicode-range: U+0400-045F, U+2116;
}
:root {
/* ---- Brend boje — uzorkovane iz logotipa (podrzavam1024x1024_v2.png) ----
Ovo NISU prigušene boje standarda zastave nego tonovi koje sam znak nosi.
Razlog: logo stoji u headeru odmah pored dugmadi; prigušena crvena
(#c6363c) je pored logotipske #e70e12 izgledala kao greška u štampi.
Sve tri prolaze WCAG AA na beloj podlozi — vrednosti su u komentarima. */
--crvena: #e70e12; /* slovo A, levi luk — 4.7:1 na beloj */
--crvena-tamna: #c00a0e; /* hover stanje */
--crvena-ziva: #ff0000; /* vrh gradijenta u znaku, samo za akcente */
--plava: #092f87; /* slovo V, desni luk — 11.9:1 na beloj */
--plava-tamna: #062161; /* šaka u znaku — 15.0:1 na beloj */
--plava-svetla: #1a4bb8; /* linkovi u tekstu */
/* Stari nazivi zadržani da ništa ne pukne ako se negde koriste. */
--av-crvena: var(--crvena);
--av-plava: var(--plava);
--bela: #ffffff;
--pozadina: #ffffff;
--pozadina-blaga: #f6f8fc;
--tekst: #0f1729;
--tekst-blagi: #55607a;
--ivica: #e6eaf2;
/* ---- Staklo ----
backdrop-filter zamućuje ono STO JE IZA elementa. Na ravnoj beloj podlozi
zamućena bela je i dalje ista bela — efekat bi bio nevidljiv. Zato ispod
svega stoji `body::before` sa vrlo razblaženim crveno-plavim oblacima:
oko i dalje čita beo sajt, ali staklo ima sta da zamuti. */
--staklo: rgba(255, 255, 255, 0.62);
--staklo-jako: rgba(255, 255, 255, 0.78);
--staklo-ivica: rgba(255, 255, 255, 0.9);
--staklo-blur: blur(18px) saturate(180%);
--radius: 18px;
--radius-s: 12px;
/* ---- Trobojka ----
Redosled je onakav kakav je na zastavi, odozgo nadole: crvena, plava, bela.
Puna verzija se koristi SAMO na tamnoj podlozi (futer) — na beloj bi treca
traka nestala i ostatak bi izgledao kao nedovrsen posao. Na svetlim
povrsinama ide dvobojna varijanta, gde belu nosi sama podloga.
Granice su u PIKSELIMA, ne u procentima. Sa procentima (33.333%) prelaz
pada na neceo piksel, pregledac ga zaokruzi, i jedna traka ispadne za
piksel tanja od druge — sto se na ekranu vidi. Pikselske granice to
iskljucuju. Visina elementa mora biti 18 px da bi sve tri stale. */
--traka-boje: 6px;
--trobojka: linear-gradient(
to bottom,
var(--crvena) 0 var(--traka-boje),
var(--plava) var(--traka-boje) calc(var(--traka-boje) * 2),
#ffffff calc(var(--traka-boje) * 2) calc(var(--traka-boje) * 3)
);
--dvobojka: linear-gradient(90deg, var(--crvena) 0 50%, var(--plava) 50% 100%);
/* Senke su slojevite i u brend plavoj, ne u crnoj — crna senka na beloj
podlozi izgleda prljavo, plava ostaje u istoj porodici. */
--senka-1: 0 1px 2px rgba(6, 33, 97, 0.04), 0 4px 14px rgba(6, 33, 97, 0.05);
--senka-2: 0 2px 4px rgba(6, 33, 97, 0.05), 0 14px 34px rgba(6, 33, 97, 0.10);
--senka-3: 0 30px 70px rgba(6, 33, 97, 0.16);
/* Sistemski fontovi ostaju kao rezerva — ako WOFF2 iz bilo kog razloga ne
stigne, sajt i dalje izgleda uredno. */
--font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Jačina figura levo i desno od hero ploče. 0 ih potpuno sklanja. */
--hero-figura: 1;
/* Najmanji cilj za prst. Korisnici su uglavnom slabo tehnički pismeni i
rade na telefonu, pa je svuda 52 px umesto uobičajenih 44 — promašen
dodir je ovde skuplji od nekoliko piksela praznog prostora. */
--dodir: 52px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font);
color: var(--tekst);
background: var(--pozadina);
line-height: 1.65;
overflow-x: hidden;
/* Nemačke složenice („Datenschutzerklärung", „Standort-Einwilligung") i
mejl adrese su duže od 360 px kolone i probijale su stranicu udesno.
Prelamanje unutar reči je jedino rešenje koje ne traži diranje teksta. */
overflow-wrap: break-word;
}
/* Obojeni oblaci — podloga bez koje staklo ne postoji. Fiksirani su, pa se
pri skrolovanju sadržaj kreće preko njih i zamućenje se stvarno vidi. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(58rem 40rem at 10% 2%, rgba(231, 14, 18, 0.07), transparent 62%),
radial-gradient(52rem 38rem at 92% 12%, rgba(9, 47, 135, 0.10), transparent 62%),
radial-gradient(46rem 34rem at 78% 88%, rgba(231, 14, 18, 0.05), transparent 62%),
radial-gradient(50rem 36rem at 18% 78%, rgba(9, 47, 135, 0.07), transparent 62%);
}
img, svg { max-width: 100%; display: block; }
.container {
width: min(1140px, 100% - 2.5rem);
margin-inline: auto;
}
/* ---------- Logotip ---------- */
/* `gap` se ovde NE sme koristiti: `.logo` je inline-flex, pa mu i goli delovi
natpisa („podrz", „am") postaju flex-stavke i razmak se ubaci IZMEĐU SLOVA —
u footeru se to videlo kao „podrz AV am .rs". Razmak zato nosi sam znak. */
.logo {
display: inline-flex;
align-items: center;
font-size: clamp(1rem, 4.4vw, 1.3rem);
font-weight: 800;
font-style: italic;
letter-spacing: -0.02em;
color: var(--tekst);
text-decoration: none;
white-space: nowrap;
}
.logo-mark {
width: 38px;
height: 38px;
flex: none;
margin-right: 0.55rem;
}
.logo-footer { color: var(--bela); }
/* Domenski nastavak uz ime brenda — prigušen, u istom duhu kao u logotipu.
Bazno pravilo važi svuda (naslovi sekcija, naslov strane); `.logo` i
`.hero-brand` ga niže pooštravaju svojim vrednostima. */
.tld {
opacity: 0.55;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
}
.logo .tld {
opacity: 0.5;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
}
/* ---------- AV monogram ---------- */
/* A i V nose brend boje svuda gde se ime pojavljuje u tekstu.
Razmak je NAMERNO prirodan — isti kao između ostalih slova u reči. Ranije je
`A` bilo privučeno uz `V` da liči na monogram iz znaka, ali u tekstu to
izgleda kao slovna greška: „ПодржАВам" mora da se čita kao jedna reč, a
monogram svoj posao radi bojom, ne razmakom. */
.av .a { color: var(--crvena); }
.av .v { color: var(--plava); }
/* Footer je jedina tamna površina — pune brend boje se na njoj gube
(--plava #092f87 na tamnoplavoj podlozi je nevidljiva), pa A i V nose
svetlije nijanse istih boja da bi monogram ostao dvobojan i tamo. */
.site-footer .av .a { color: #ff5a5e; }
.site-footer .av .v { color: #8fb0ff; }
/* ---------- Header / navigacija (CSS-only, bez JS) ---------- */
/* Ovde staklo radi najuverljivije: sadržaj stvarno prolazi ispod headera. */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: var(--staklo-blur);
backdrop-filter: var(--staklo-blur);
border-bottom: 1px solid rgba(230, 234, 242, 0.8);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 68px;
gap: 1rem;
flex-wrap: wrap;
}
.nav-toggle { display: none; }
/* Burger je uokviren i pun — tri gola štrika mnogi ne prepoznaju kao dugme. */
.nav-burger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: var(--dodir);
height: var(--dodir);
border-radius: 14px;
border: 1px solid rgba(9, 47, 135, 0.18);
background: rgba(9, 47, 135, 0.05);
cursor: pointer;
}
.nav-burger span {
width: 24px;
height: 3px;
background: var(--plava-tamna);
border-radius: 2px;
transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle:checked ~ .nav-burger {
background: var(--plava);
border-color: var(--plava);
}
.nav-toggle:checked ~ .nav-burger span { background: var(--bela); }
.site-nav {
display: none;
flex-basis: 100%;
flex-direction: column;
gap: 0.25rem;
padding-bottom: 0.85rem;
}
.nav-toggle:checked ~ .site-nav { display: flex; }
.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* Na telefonu su stavke menija pune, uokvirene trake visine --dodir: lakše se
pogađaju i jasnije je da su dugmad, a ne samo tekst. */
.site-nav a {
position: relative;
display: flex;
align-items: center;
min-height: var(--dodir);
color: var(--tekst);
text-decoration: none;
font-weight: 600;
font-size: 1.02rem;
padding: 0.7rem 1rem;
border-radius: 12px;
background: rgba(9, 47, 135, 0.04);
transition: color 0.18s, background 0.18s;
}
.site-nav a:hover { color: var(--plava); }
/* Iste dve istaknute stavke i u burger meniju — inače bi na telefonu bile
sive kao ostale, pa bi se izgled razilazio po širini ekrana. */
.site-nav a[data-nav="aplikacija"] { color: var(--crvena); font-weight: 700; }
.site-nav a.nav-aktivisti { color: var(--plava); font-weight: 700; }
.site-nav a[aria-current="page"] { color: var(--plava-tamna); }
/* Aktivna stavka: kratka dvobojna crtica — zastava u malom. */
.site-nav a[aria-current="page"]::after {
content: "";
position: absolute;
left: 0.25rem;
right: 0.25rem;
bottom: 0.3rem;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--crvena) 50%, var(--plava) 50%);
}
/* prebacivač jezika */
.lang-switch {
display: flex;
gap: 0.2rem;
margin-top: 0.6rem;
padding-top: 0.7rem;
border-top: 1px solid var(--ivica);
}
.lang-switch a {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.06em;
padding: 0.4rem 0.6rem !important;
border-radius: 8px;
color: var(--tekst-blagi);
}
.lang-switch a::after { display: none !important; }
.lang-switch a[aria-current="true"] {
color: var(--plava);
background: rgba(9, 47, 135, 0.08);
}
/* Prag je 860 px, ne 760: peta stavka („Za aktiviste") sa prekidačem jezika i
logotipom traži oko 1035 px, pa je između 760 i 840 px zaglavlje prelivalo u
stranu — cela strana je dobijala bočni skrol. Ispod ovog praga meni ostaje
burger, gde broj stavki ne igra ulogu. Podnožje ima svoj prag (760 px) i ne
zavisi od ovoga. */
@media (min-width: 860px) {
.nav-burger { display: none; }
.site-nav {
display: flex;
flex-basis: auto;
flex-direction: row;
align-items: center;
gap: 0.35rem;
padding-bottom: 0;
}
/* Na desktopu meni nije spisak dugmadi nego red linkova — podloga otpada. */
.site-nav a {
min-height: 0;
padding: 0.55rem 0.85rem;
background: transparent;
color: var(--tekst-blagi);
font-size: 0.96rem;
}
.site-nav a:hover { background: rgba(9, 47, 135, 0.05); }
.site-nav a[aria-current="page"]::after { left: 0.85rem; right: 0.85rem; bottom: 0.15rem; }
/* „Aplikacija" i „Za aktiviste" su, uz početnu, najvažnije stavke, pa obe
nose okvir i brend boju umesto sive kojom idu ostale. Svaka je u jednoj
boji — tekst, okvir i podloga na hover: aplikacija crvena, ulaz za
aktiviste plav, kao dva luka znaka. */
.site-nav a[data-nav="aplikacija"],
.site-nav a.nav-aktivisti {
border-radius: 999px;
font-weight: 700;
}
.site-nav a[data-nav="aplikacija"] {
border: 1px solid rgba(231, 14, 18, 0.35);
color: var(--crvena);
}
.site-nav a[data-nav="aplikacija"]:hover {
background: rgba(231, 14, 18, 0.07);
border-color: var(--crvena);
color: var(--crvena-tamna);
}
/* „Za aktiviste" nije sadržajna stavka kao ostale nego ulaz u drugi sistem —
okvir pokazuje da vodi napolje, a ne viče kao puno dugme. */
.site-nav a.nav-aktivisti {
margin-left: 0.35rem;
border: 1px solid rgba(9, 47, 135, 0.35);
color: var(--plava);
}
.site-nav a.nav-aktivisti:hover {
background: rgba(9, 47, 135, 0.07);
border-color: var(--plava);
color: var(--plava-tamna);
}
.lang-switch {
margin-top: 0;
margin-left: 0.75rem;
padding-top: 0;
border-top: none;
border-left: 1px solid var(--ivica);
padding-left: 0.85rem;
}
.logo { font-size: 1.3rem; }
.logo-mark { width: 44px; height: 44px; }
}
/* ---------- Hero ---------- */
.hero {
/* Gornji razmak je izdvojen u promenljivu jer o njemu zavisi i visina figura:
ploča počinje tačno na toj udaljenosti od vrha hero-a, pa figura visoka
`100% - taj razmak` ima vrh u ravni sa vrhom ploče. */
--hero-pad-vrh: clamp(3rem, 8vw, 5rem);
position: relative;
isolation: isolate;
display: flex;
align-items: center;
min-height: clamp(520px, 78vh, 760px);
padding: var(--hero-pad-vrh) 0 clamp(3.5rem, 9vw, 6rem);
text-align: center;
overflow: hidden;
}
/* Hero sekciju uokviruju dva različita motiva: LEVO silueta Srbije kao vodeni
žig, DESNO fotografija. Nesimetrično je namerno — dve iste figure levo i
desno su izgledale kao greška u kopiranju.
Fotografija je WebP: sa providnošću daje 33 KB naspram 271 KB koliko bi
tražio PNG. Na pregledačima starijim od 2020. se prosto ne pojavi, a raspored
ostaje čitav. Razmena je svesna — korisnici su na telefonima i slabim vezama.
Silueta je ravna dvobojna grafika, pa je tamo PNG sa paletom od 8 boja
(31 KB) lakši i od WebP-a.
Namerno DESKTOP-ONLY, i to tako što `background-image` stoji isključivo
unutar media upita — telefon te fajlove nikada ne preuzme. Ispod 1180 px
nema mesta pored ploče, pa bi se sudarali sa tekstom.
`right/left: calc(50% + 330px)` drži unutrašnju ivicu na istom malom
preklopu sa pločom na svakoj širini ekrana — preklop je namerno: staklo tek
tada ima šta da zamuti. */
@media (min-width: 1180px) {
/* Ploča se lepi za vrh hero-a umesto da se centrira. Bez toga bi na visokom
ekranu `align-items: center` spustio ploču, a figure bi ostale gde jesu —
poravnanje vrha glave sa vrhom ploče bi se raspalo. */
.hero { align-items: flex-start; }
.hero::before,
.hero::after {
content: "";
position: absolute;
/* Vrh im je u ravni sa vrhom ploče. Visinu određuje razmak top/bottom, a
`aspect-ratio` iz nje računa širinu — tako `contain` popuni okvir tačno,
bez praznog hoda koji bi glavu spustio niže. */
top: var(--hero-pad-vrh);
z-index: -1;
width: auto;
pointer-events: none;
background-repeat: no-repeat;
background-size: contain;
}
/* Levo: silueta Srbije, vodeni žig. */
.hero::before {
right: calc(50% + 300px);
bottom: 10%;
aspect-ratio: 385 / 560;
background-image: url("../img/srbija.b442905234.png");
background-position: center;
}
/* Desno: fotografija. Spoljna ivica sme malo da izađe iz kadra — figura tako
deluje kao da ulazi u stranicu, umesto da stoji uredno uramljena. */
.hero::after {
left: calc(50% + 300px);
bottom: 0;
aspect-ratio: 416 / 622;
opacity: var(--hero-figura, 1);
background-image: url("../img/vucic-desno.26f1c514a2.webp");
background-position: center bottom;
}
}
/* ---------- Hero na telefonu ----------
Zahtev: lik dominira prvim ekranom, ispod njega blok sa imenom i logotipom,
i SVE mora da stane bez sečenja čim se uđe na sajt.
Ključ je `svh` (small viewport height) umesto `vh`: `100vh` na telefonu meri
ekran BEZ trake pregledača, pa bi dno bloka završilo ispod adresne trake.
`100svh` meri stvarno vidljivi prostor, dakle najgori slučaj. Zbog toga se i
sve unutrašnje mere skaliraju po VISINI ekrana, ne po širini — na niskom
telefonu se ceo sklop srazmerno sabije umesto da ispadne iz kadra.
`vh` varijante stoje prve kao rezerva za pregledače pre 2022.
Silueta Srbije se ovde izostavlja — na uskom ekranu bi bila samo još jedan
sloj koji odvlači pažnju. Fotografija je zasebna i lakša (26 KB); desktop
verzije se nikada ne preuzimaju, jer stoje iza `min-width: 1180px` upita. */
@media (max-width: 1179px) {
.hero {
min-height: calc(100vh - 68px);
min-height: calc(100svh - 68px);
/* `stretch` umesto centriranja: sadržaj popunjava celu visinu ekrana, pa
ploča može da legne na donju ivicu. */
align-items: stretch;
padding-top: clamp(0.25rem, 1.5svh, 1.25rem);
padding-bottom: 0;
}
/* Raspodela visine prvog ekrana: ploča uzima onoliko koliko joj treba, a
SLIKA GUTA SAV VIŠAK (`flex: 1`). Na višem telefonu lik je time veći, na
nižem se sam sabije — bez ijednog dodatnog media upita. */
.hero .container {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* Lik: najveći pojedinačni element na ekranu. */
.hero .container::before {
content: "";
display: block;
/* Nova fotografija je skoro kvadratna (416x420) umesto uske, pa na istoj
visini zauzima oko polovinu više širine — lik time dominira ekranom.
Razmak ispod je pozitivan: blok sa logotipom stoji NIŽE, ne uvučen pod
sliku kao ranije. */
flex: 1 1 auto;
min-height: 120px;
margin-bottom: clamp(0.25rem, 1svh, 1rem);
background: url("../img/vucic-mobilni.3812b4610f.webp") center bottom / contain no-repeat;
opacity: var(--hero-figura, 1);
}
/* Ploča se sabija toliko da posle lika ostane u kadru. */
.hero-panel {
flex: 0 0 auto;
padding: clamp(0.9rem, 2.2svh, 2rem) clamp(1rem, 4vw, 2rem) clamp(1.2rem, 3svh, 2.2rem);
/* Donji uglovi su ravni jer ploča seda na ivicu ekrana — zaobljeni bi
ostavili dva bela trougla i izgledali kao propust. */
border-radius: 22px 22px 0 0;
/* Zbijeniji prored — na telefonu je svaki red visine zlata vredan. */
line-height: 1.45;
}
.hero-brand { font-size: clamp(1.35rem, 5.4svh, 2.2rem); }
.hero-tagline {
margin-top: clamp(0.3rem, 0.8svh, 0.8rem);
font-size: clamp(0.9rem, 1.95svh, 1.15rem);
line-height: 1.35;
}
.hero-sub {
margin-top: clamp(0.25rem, 0.75svh, 0.8rem);
font-size: clamp(0.8rem, 1.6svh, 0.95rem);
line-height: 1.4;
}
.hero-actions {
margin-top: clamp(0.6rem, 1.5svh, 1.4rem);
gap: clamp(0.4rem, 0.9svh, 0.8rem);
}
/* Dugmad preko cele širine — najlakši mogući cilj za prst.
Bočni razmak je 0.75rem umesto nasleđenih 1.8rem: dugme koje ionako drži
celu širinu ne dobija ništa od širokog razmaka, a oduzima 34 px prostora
natpisu. Sa 1.8rem se „Preuzmi aplikaciju" lomio u dva reda na 360 i
375 px — dakle na najčešćim telefonima. */
.hero-actions .btn {
width: 100%;
min-height: var(--dodir);
padding-block: 0.7rem;
padding-inline: 0.75rem;
/* Poslednjih pola koraka za 320 px (iPhone SE prve generacije). */
font-size: 0.95rem;
}
.hero-note {
margin-top: clamp(0.4rem, 1svh, 1rem);
font-size: clamp(0.7rem, 1.4svh, 0.85rem);
line-height: 1.35;
}
}
/* Poslednja odbrana, ispod 540 px visine: dugmad u jedan red. Manji su cilj i
natpis se prelama u dva reda, ali je to bolje nego dugme koje se ne vidi bez
skrolovanja — korisnik koji ne skroluje ne zna ni da postoji.
Prag je bio 900 px, što je obuhvatalo SVAKI telefon (iPhone 14 ima 844,
XR 896), pa je pravilo mišljeno za niske ekrane stiskalo glavnu akciju na
svim uređajima: dugmad od 130–160 px sa natpisom prelomljenim u dva reda.
Sa 540 px u jedan red padaju samo ekrani kojima to zaista treba, a svi
pravi telefoni dobijaju dugmad preko cele širine i natpis u jednom redu. */
@media (max-width: 1179px) and (max-height: 540px) {
.hero-actions { flex-wrap: nowrap; }
.hero-actions .btn {
flex: 1 1 0;
min-width: 0;
padding-inline: 0.6rem;
font-size: 0.86rem;
}
}
/* Niski telefoni (iPhone SE i slični, ispod 700 px): još jedan stepen sabijanja. */
@media (max-width: 1179px) and (max-height: 700px) {
.hero .container::before {
height: clamp(110px, 20svh, 180px);
margin-bottom: 0.15rem;
}
.hero-brand { font-size: clamp(1.3rem, 5.2svh, 1.9rem); }
.hero-tagline { margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.3; }
.hero-sub { margin-top: 0.3rem; font-size: 0.76rem; line-height: 1.35; }
.hero-actions { margin-top: 0.6rem; }
.hero-note { margin-top: 0.45rem; font-size: 0.7rem; line-height: 1.3; }
.hero-panel { padding-block: 0.8rem 0.9rem; }
}
@media (max-width: 1179px) and (max-height: 700px) {
.hero .container::before { min-height: 90px; }
}
/* Ispod 660 px visine se štedi, ali se portret NE sklanja — samo smanjuje.
Ranije je ovde stajalo `display: none`, sa računicom da je lik ukras a dugme
i napomena ono zbog čega se dolazi. Računica je bila pogrešna: na telefonu
traka pretraživača uzima 80–120 px, pa iPhone SE od 667 px u Safariju prijavi
oko 560 — ispod praga. Lik je nestajao na sasvim običnim telefonima, iako u
ruci izgleda kao pun ekran. A ovo je sajt podrške konkretnom čoveku; njegov
lik nije ukras nego sadržaj.
Zato se sada smanjuje na 84–130 px i ostaje vidljiv. Cena je da napomena
ispod dugmadi traži mali skrol ispod ~630 px visine. Prihvaćeno svesno:
dugmad, koja su prava akcija, ostaju u kadru na svakoj visini. */
@media (max-width: 1179px) and (max-height: 660px) {
.hero .container::before {
height: clamp(84px, 14svh, 130px);
min-height: 0;
margin-bottom: 0.1rem;
}
.hero-tagline { margin-top: 0.25rem; }
.hero-sub { margin-top: 0.25rem; }
.hero-actions { margin-top: 0.5rem; }
.hero-note { margin-top: 0.35rem; }
.hero-panel { padding-block: 0.7rem 0.8rem; }
}
/* Tek ispod 520 px — što u praksi znači telefon okrenut na stranu — portret
odlazi. Tu ga ni nema smisla prikazivati: uspravna fotografija u položenom
kadru pojede svu visinu, a ostane traka lica bez glave i bez ramena. */
@media (max-width: 1179px) and (max-height: 520px) {
.hero .container::before { display: none; }
}
/* Staklena ploča sa sadrzajem — pluta nad portretom i oblacima. */
.hero-panel {
position: relative;
max-width: 780px;
margin-inline: auto;
padding: clamp(2rem, 5vw, 3.2rem) clamp(1.25rem, 4vw, 3rem) clamp(2.2rem, 5vw, 3rem);
border-radius: 28px;
background: var(--staklo);
-webkit-backdrop-filter: var(--staklo-blur);
backdrop-filter: var(--staklo-blur);
border: 1px solid var(--staklo-ivica);
box-shadow: var(--senka-3);
}
/* Znak stoji na ploči SAMO na širokom ekranu, i to je jedina razlika između dva
raspored hero-a.
Iznad 1180 px portret stoji pored ploče i nadvisuje je: bez znaka je ploča
ostajala niska, sa 80 px praznine iznad i 161 px ispod — visila je previsoko
naspram lika. Znak joj vraća oko 174 px i vraća ravnotežu.
Ispod te granice portret se seli IZNAD ploče, pa protivteža više nije
potrebna — a znak postaje čisto ponavljanje onog iz zaglavlja, tridesetak
piksela više u istom kadru. Tamo je skupo: uzima visinu koja na telefonu
nedostaje dugmetu i napomeni.
Skriveni `![]()
` ne košta ništa: isti `logo.svg` već stoji u zaglavlju na
svakoj strani, pa je fajl preuzet pre nego što se do ovog mesta dođe. */
.hero-mark { display: none; }
@media (min-width: 1180px) {
.hero-mark {
display: block;
width: clamp(104px, 22vw, 148px);
height: auto;
margin: 0 auto clamp(1.1rem, 3vw, 1.6rem);
filter: drop-shadow(0 12px 28px rgba(6, 33, 97, 0.18));
}
}
/* Brend je jedna neprelomljiva reč, a Montserrat je širok font. Donja granica
clamp-a mora biti dovoljno mala da na 360 px stane u ploču — inače reč
probije okvir, stranica dobije horizontalni preliv i burger ispadne iz kadra.
`min-content` osigurava da se to ne desi ni ako se natpis kasnije produži. */
.hero-brand {
font-size: clamp(1.5rem, 7.2vw, 4.4rem);
font-weight: 800;
font-style: italic;
letter-spacing: -0.035em;
line-height: 1.05;
max-width: 100%;
overflow-wrap: break-word;
}
.hero-brand .tld {
opacity: 0.4;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
font-size: 0.5em;
}
.hero-tagline {
font-size: clamp(1.05rem, 3vw, 1.45rem);
font-weight: 600;
color: var(--plava-tamna);
margin-top: 1rem;
}
.hero-sub {
max-width: 620px;
margin: 0.9rem auto 0;
/* Tamnije od --tekst-blagi, da izdrzi portret u pozadini (vidi .hero::after). */
color: #46506a;
font-size: clamp(0.95rem, 2.2vw, 1.08rem);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.9rem;
margin-top: clamp(1.6rem, 4vw, 2.3rem);
}
/* Sitna napomena ispod dugmadi: šta se preuzima i gde su prodavnice. Stoji na
staklenoj ploči, pa je boja tamnija od --tekst-blagi radi kontrasta. */
.hero-note {
margin-top: 1rem;
font-size: 0.85rem;
color: #414b60;
}
/* Link u napomeni nosi boju i podvlačenje — dosad je nasleđivao sivu boju
same napomene, pa se na strani Zajednica nije videlo da se „Prijavi se na
portal" može kliknuti. Jedine napomene sa linkom su te tri (sr/en/de
zajednica); ostale su čist tekst, pa ih pravilo ne dotiče. */
.hero-note a {
color: var(--plava-svetla);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---------- Dugmad ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.9rem 1.8rem;
border-radius: 999px;
font-weight: 800;
font-size: 1rem;
text-decoration: none;
min-height: 50px;
line-height: 1.4;
transition: transform 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
background: linear-gradient(140deg, var(--crvena-ziva), var(--crvena-tamna));
color: var(--bela);
box-shadow: 0 8px 24px rgba(231, 14, 18, 0.32);
}
.btn-primary:hover {
box-shadow: 0 12px 32px rgba(231, 14, 18, 0.42);
transform: translateY(-2px);
}
.btn-outline {
background: var(--staklo-jako);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: var(--plava);
border: 2px solid rgba(9, 47, 135, 0.28);
}
.btn-outline:hover {
background: var(--plava);
color: var(--bela);
border-color: var(--plava);
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(9, 47, 135, 0.28);
}
.btn-ghost {
background: transparent;
color: var(--plava);
border: 2px solid rgba(9, 47, 135, 0.2);
}
.btn-ghost:hover { border-color: var(--plava); }
/* Glavna akcija sajta — preuzimanje aplikacije. Malo veće od ostalih dugmadi.
Mora stajati POSLE `.btn` i `.btn-primary`: ista je specifičnost (0,1,0), pa
odlučuje redosled u fajlu. Na uskim i niskim ekranima ga svesno pregazi
`.hero-actions .btn` (0,2,0) — tamo dugmad ionako idu preko cele širine. */
.btn-hero {
padding: 1rem 2.2rem;
font-size: 1.08rem;
}
/* Ikonica u dugmetu (strelica za preuzimanje). Veličina ide u `em` da prati
natpis kroz sve stepene sabijanja hero-a, a `flex: none` je čuva od stiskanja
kad se dugme na 320 px suzi do granice. */
.btn-icon {
width: 1.15em;
height: 1.15em;
margin-right: 0.5em;
flex: none;
}
/* ---------- Sekcije ---------- */
.section { padding: clamp(3.2rem, 7.5vw, 6rem) 0; }
/* Bela ploča preko oblaka — daje ritam bez tamnih blokova. */
.section-alt {
position: relative;
background: rgba(255, 255, 255, 0.66);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
border-block: 1px solid rgba(230, 234, 242, 0.9);
}
/* Bila tamna navy traka. Sada je svetla, plavo tonirana — brief traži belu
dominantnu temu. Ime klase je zadržano jer se koristi u 18 HTML fajlova
na tri jezika; menjanje imena bi znacilo diranje svih. */
.section-dark {
position: relative;
isolation: isolate;
background:
radial-gradient(40rem 26rem at 22% 12%, rgba(231, 14, 18, 0.10), transparent 62%),
radial-gradient(44rem 30rem at 82% 88%, rgba(9, 47, 135, 0.16), transparent 62%),
linear-gradient(165deg, #eef3fc 0%, #f7f9fd 62%, #fdf3f3 100%);
border-block: 1px solid rgba(9, 47, 135, 0.10);
}
.section-dark .section-lead { color: var(--tekst-blagi); }
.section-dark .card p { color: var(--tekst-blagi); }
.section-title {
font-size: clamp(1.7rem, 4.6vw, 2.6rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.15;
text-align: center;
}
.section-lead {
max-width: 660px;
margin: 1rem auto 0;
text-align: center;
color: var(--tekst-blagi);
font-size: clamp(0.98rem, 2.2vw, 1.1rem);
}
/* Zaključna rečenica ISPOD mreže kartica — isti stil kao uvodni red, samo sa
razmakom kartica iznad sebe, da ne slepi za poslednji red. */
.section-outro {
margin-top: clamp(2rem, 5vw, 3rem);
}
/* ---------- Asimetrična sekcija ----------
Sve sekcije su bile istog oblika: naslov u sredini, uvod u sredini, mreža
ispod — četiri puta zaredom na početnoj. Kad je svaka istog oblika, oko
prestane da ih razlikuje i strana deluje kao popunjen obrazac.
Ovde naslov stoji levo, uvod desno od njega, a mreža ide punom širinom
ispod. Zaglavlje sekcije time postaje vodoravna traka umesto tornja u
sredini, a kartice zadržavaju svu širinu koju imaju i u ostalim sekcijama.
Probano je i uže: naslov u levoj koloni, kartice u desnoj. Odbačeno — tri
kartice u 762 px daju 230 px po kartici, gde se tekst lomi na tri reči po
redu. Široka kolona teksta vredi više od dramatičnijeg rasporeda.
Namerno se primenjuje na PO JEDNU sekciju po strani. Da je dobiju sve,
dobio bi se nov jednoličan ritam umesto starog.
Prag je 1000 px, ne 900: između te dve vrednosti naslov početne strane lomi
se u dva reda, a nemački „So ist die Gemeinschaft organisiert" u tri. Na
telefonu i tabletu raspored ostaje isti kao do sada.
Leva kolona je šira (1.3 : 1) jer nosi naslov u krupnom slogu, a desna samo
jednu ili dve rečenice uvoda. Sa jednakim kolonama isti taj nemački naslov
ostaje u tri reda i na 1000 px. */
@media (min-width: 1000px) {
.section-split > .container {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
grid-template-areas:
"naslov uvod"
"sadrzaj sadrzaj";
column-gap: clamp(2rem, 5vw, 4.5rem);
}
.section-split .section-title {
grid-area: naslov;
text-align: left;
align-self: center;
}
.section-split .section-lead {
grid-area: uvod;
align-self: center;
text-align: left;
margin: 0;
max-width: 46ch;
}
.section-split .cards,
.section-split .steps { grid-area: sadrzaj; }
}
/* ---------- Kartice ---------- */
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
/* Dve u red — isti trik kao za tri niže, iz istog razloga: kad je kartica
neparan broj, poslednja ostaje sama uz levu ivicu i deluje kao da je jedna
ispala. Preko četiri polovine kolone kartica je iste širine kao u rešetki od
dve, a usamljena poslednja može da se pomeri na sredinu. Gornja granica je
ovde obavezna: iznad 980 px važi pravilo za tri u red, koje samo pomera
pretposlednju karticu, pa bi se dva pravila potukla oko istog mesta. */
@media (min-width: 640px) and (max-width: 979.98px) {
.cards { grid-template-columns: repeat(4, 1fr); }
.cards > .card { grid-column: span 2; }
.cards > .card:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
/* Tri u red — ali preko šest polovina kolona, pa kartica zauzima dve. Širina
kartice ostaje ista kao u rešetki od tri kolone (obe daju `W/3 - 2g/3`), a
dobija se to da poslednji nepun red može da se pomeri za pola koraka i
ostane centriran. Bez toga red sa dve kartice stoji uz levu ivicu i izgleda
kao da treća nedostaje — sekcija „Šta aplikacija radi" ima pet kartica. */
@media (min-width: 980px) {
.cards-3 { grid-template-columns: repeat(6, 1fr); }
.cards-3 > .card { grid-column: span 2; }
/* Prva kartica poslednjeg reda, kad ih je u tom redu tačno dve. */
.cards-3 > .card:nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
}
/* Četiri u red — sekcija „Šta aplikacija NE radi". Prag je viši nego za tri
kolone: na 980 px bi kartica bila uža od 230 px i naslov bi se lomio u tri
reda. Ispod praga važi pravilo iznad (dve kolone), pa jedna. */
@media (min-width: 1100px) { .cards-4 { grid-template-columns: repeat(4, 1fr); } }
.card {
position: relative;
/* Grid ćelija se podrazumevano NE skuplja ispod svog sadržaja (`min-width:
auto`), pa jedna duga reč razvuče karticu preko kolone. Na nemačkoj strani
o aplikaciji kartica je na 320 px bila 307 px široka u prostoru od 280, i
cela strana je dobijala bočni skrol od 7 px. Nemački je pun složenica, ali
isto važi i za srpski („preporučujemo", „obaveštenja") na užem ekranu. */
min-width: 0;
overflow-wrap: break-word;
background: var(--staklo);
-webkit-backdrop-filter: var(--staklo-blur);
backdrop-filter: var(--staklo-blur);
border: 1px solid var(--staklo-ivica);
border-radius: var(--radius);
padding: 1.75rem;
box-shadow: var(--senka-1);
transition: transform 0.22s, box-shadow 0.22s;
}
/* Svetlosni odsjaj po gornjoj ivici — bez njega staklo izgleda kao obična
poluprovidna površina. */
.card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
border-radius: var(--radius) var(--radius) 0 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.95) 70%, transparent);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--senka-2);
}
.card h3 {
font-size: 1.12rem;
font-weight: 800;
letter-spacing: -0.01em;
margin-bottom: 0.6rem;
display: flex;
align-items: center;
gap: 0.7rem;
}
.card p { color: var(--tekst-blagi); font-size: 0.96rem; }
.card-icon {
width: 46px;
height: 46px;
flex: none;
border-radius: 14px;
background: linear-gradient(140deg, var(--plava), var(--plava-svetla));
color: var(--bela);
display: grid;
place-items: center;
box-shadow: 0 6px 16px rgba(9, 47, 135, 0.26);
}
/* Crtež nasleđuje belu od pločice preko `currentColor`, kao ikonice u podnožju.
22 px u pločici od 46 px ostavlja disk vazduha oko znaka — bez toga ikonica
dodiruje zaobljene uglove i pločica izgleda pretrpano. */
.card-icon svg {
width: 22px;
height: 22px;
display: block;
}
/* Svaka treća kartica dobija crvenu pločicu — ritam zastave, bez preterivanja. */
.cards .card:nth-child(3n) .card-icon {
background: linear-gradient(140deg, var(--crvena-ziva), var(--crvena-tamna));
box-shadow: 0 6px 16px rgba(231, 14, 18, 0.26);
}
/* ---------- Koraci ---------- */
.steps {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: clamp(2.4rem, 5vw, 3.2rem);
counter-reset: korak;
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
/* Sekcija sa DVA koraka (srpska početna) — dve jednake kolone umesto tri, da
druga kartica ne ostavi praznu trećinu reda. Engleska i nemačka strana i
dalje imaju tri koraka i zadržavaju `.steps`. */
@media (min-width: 860px) { .steps-2 { grid-template-columns: repeat(2, 1fr); } }
.step {
position: relative;
background: var(--staklo);
-webkit-backdrop-filter: var(--staklo-blur);
backdrop-filter: var(--staklo-blur);
border: 1px solid var(--staklo-ivica);
border-radius: var(--radius);
padding: 2.4rem 1.7rem 1.7rem;
box-shadow: var(--senka-1);
transition: transform 0.22s, box-shadow 0.22s;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--senka-2); }
.step::before {
/* Iznad trake trobojke. Bez ovoga bi je `::after` (traka) presekao popreko
preko broja, jer se `::after` iscrtava posle `::before`. */
z-index: 1;
counter-increment: korak;
content: counter(korak);
position: absolute;
top: -1.25rem;
left: 1.5rem;
width: 2.7rem;
height: 2.7rem;
border-radius: 50%;
background: linear-gradient(140deg, var(--crvena-ziva), var(--crvena-tamna));
color: var(--bela);
font-weight: 800;
font-size: 1.05rem;
display: grid;
place-items: center;
box-shadow: 0 8px 20px rgba(231, 14, 18, 0.35);
border: 3px solid rgba(255, 255, 255, 0.9);
}
/* Dvobojna traka po vrhu koraka. Bela treca traka bi se na beloj kartici
izgubila, pa je ovde nosi sama kartica — isti potez koji vec koristi
oznaka aktivne stavke u meniju. */
.step::after {
content: "";
position: absolute;
z-index: 0;
inset: 0 0 auto 0;
height: 5px;
border-radius: var(--radius) var(--radius) 0 0;
background: var(--dvobojka);
}
.step h3 { margin-bottom: 0.5rem; font-size: 1.1rem; font-weight: 800; }
.step p { color: var(--tekst-blagi); font-size: 0.95rem; }
/* ---------- Znacke i trake ---------- */
.badge {
display: inline-block;
padding: 0.3rem 0.85rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.badge-uskoro {
background: rgba(231, 14, 18, 0.1);
color: var(--crvena-tamna);
border: 1px solid rgba(231, 14, 18, 0.2);
}
.badge-plava {
background: rgba(9, 47, 135, 0.09);
color: var(--plava);
border: 1px solid rgba(9, 47, 135, 0.18);
}
.notice {
border-radius: var(--radius-s);
padding: 1.15rem 1.4rem;
margin: 1.6rem 0;
font-size: 0.95rem;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.notice-draft {
background: rgba(255, 247, 237, 0.8);
border: 1px solid #fdba74;
color: #9a3412;
font-weight: 600;
}
.notice-info {
background: rgba(9, 47, 135, 0.05);
border: 1px solid rgba(9, 47, 135, 0.18);
color: var(--plava);
}
/* ---------- Prose (tekstualne strane) ---------- */
.prose {
max-width: 760px;
margin-inline: auto;
}
.prose h1 {
font-size: clamp(1.8rem, 5vw, 2.6rem);
letter-spacing: -0.025em;
margin-bottom: 0.5rem;
}
.prose h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.015em; margin: 2.4rem 0 0.7rem; }
.prose h3 { font-size: 1.1rem; margin: 1.7rem 0 0.45rem; }
.prose p, .prose li { color: var(--tekst-blagi); hyphens: auto; }
.prose p { margin-bottom: 0.95rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 0.95rem; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--tekst); }
.prose a { color: var(--plava-svetla); }
.page-head {
position: relative;
background: rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: var(--staklo-blur);
backdrop-filter: var(--staklo-blur);
border-bottom: 1px solid rgba(230, 234, 242, 0.9);
padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.page-head h1 {
font-size: clamp(1.9rem, 5vw, 2.9rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.12;
}
.page-head .badge { margin-bottom: 0.9rem; }
.page-head p { color: var(--tekst-blagi); margin-top: 0.7rem; max-width: 640px; }
/* Zaglavlje strane „Aplikacija": tekst levo, poziv na preuzimanje desno uz
njega, a ne ispod — tako je dugme u vidnom polju odmah, bez skrolovanja.
Desna kolona se meri po sadržaju (`auto`), pa dugme ne razvlači red. */
.page-head-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: start;
}
.page-head-side { max-width: 340px; }
.page-head-side .page-head-cta { margin-top: 0.9rem; }
/* Ispod 860 px dve kolone ne stanu jedna uz drugu a da se tekst ne izlomi u
uske trake, pa se slažu jedna ispod druge — tekst, pa poziv. */
@media (max-width: 860px) {
.page-head-grid { grid-template-columns: 1fr; gap: 0; }
.page-head-side { max-width: 640px; }
.page-head-side .page-head-cta { margin-top: 1.2rem; }
}
/* Glavna akcija u zaglavlju strane. Isti obrazac kao `.download-cta` niže na
strani, samo bez centriranja — zaglavlje je levo poravnato, pa bi centrirano
dugme visilo odvojeno od teksta iznad njega. */
.page-head-cta {
display: flex;
margin-top: 1.5rem;
}
.page-head .page-head-note {
margin-top: 0.8rem;
font-size: 0.85rem;
}
/* Isti prag i razlog kao kod `.download-cta`: ispod 700 px dugme ide preko cele
širine, sa skraćenim bočnim razmakom da se natpis ne lomi u dva reda. */
@media (max-width: 700px) {
.page-head-cta { display: block; }
.page-head-cta .btn {
width: 100%;
padding-inline: 0.75rem;
font-size: 0.95rem;
}
}
/* ---------- Store bedzevi ---------- */
/* Preuzimanje APK-a je jedina stvar koju posetilac ovde MOŽE da uradi, pa nosi
isto dugme kao glavna akcija u hero-u. Ranije je stajalo u istom redu sa
bedževima prodavnica, u pola njihove veličine — pa je ono što radi izgledalo
manje važno od onoga što još ne postoji. */
.download-cta {
display: flex;
justify-content: center;
margin-top: 2rem;
}
/* Na uskom ekranu preko cele širine, sa istim skraćenim bočnim razmakom kao
hero dugmad: natpis „Preuzmi za Android (.apk)" je duži od hero natpisa, pa
se sa nasleđenih 1.8rem lomio u dva reda već na 360 px — a u engleskoj
verziji i na 390 px. */
@media (max-width: 700px) {
.download-cta { display: block; }
.download-cta .btn {
width: 100%;
padding-inline: 0.75rem;
font-size: 0.95rem;
}
}
/* Bedževi prodavnica dolaze POSLE napomene o instalaciji, kao fusnota o
budućnosti — ne kao ponuda ravnopravna preuzimanju.
Same slike se ne diraju: smernice Google-a i Apple-a ne dozvoljavaju promenu
boje ni oblika zvaničnih bedževa. Težina se smanjuje jedino visinom, koja
jeste dozvoljena. */
.store-badges {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
justify-content: center;
align-items: center;
margin-top: 2.4rem;
}
/* Natpis ide u svoj red iznad bedževa — `flex-basis: 100%` prelama red. */
.store-uskoro {
flex-basis: 100%;
margin: 0 0 0.1rem;
text-align: center;
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.02em;
color: var(--tekst-blagi);
}
/* Zvanični bedževi prodavnica. Namerno NISU linkovi — aplikacija još nije
objavljena, a README traži da se linkovi ne aktiviraju dok pravna potvrda
ne stigne (LEG-02/LEG-03). Kad dođe, `span` postaje `a` i ništa drugo se
ne menja. */
.store-note {
max-width: 480px;
margin: 1rem auto 0;
font-size: 0.85rem;
color: var(--tekst-blagi);
}
.store-badge {
display: block;
line-height: 0;
}
.store-badge img {
width: auto;
height: clamp(38px, 9vw, 44px);
border-radius: 8px;
box-shadow: var(--senka-1);
}
/* ---------- Footer ---------- */
/* Jedina tamna površina na sajtu — sidro na dnu, u brend navy tonu.
Preliv se polako pomera: navy -> nešto svetlija brend plava -> natrag u navy.
Animira se `background-position`, ne same boje — pregledač tada pomera već
iscrtanu površinu umesto da je ponovo računa u svakom kadru, pa je trošak
zanemarljiv i na slabom telefonu.
Ciklus je 22 s i namerno spor: futer treba da „diše", a ne da vuče pogled sa
sadržaja. Korisnicima koji su isključili animacije preliv stoji mirno. */
.site-footer {
position: relative;
background: linear-gradient(
120deg,
#04173f 0%,
var(--plava-tamna) 26%,
#12459e 50%,
var(--plava-tamna) 74%,
#04173f 100%
);
background-size: 260% 260%;
animation: futer-preliv 22s ease-in-out infinite;
color: rgba(255, 255, 255, 0.72);
margin-top: 0;
}
/* Traka trobojke po gornjoj ivici futera. Ovde je jedino mesto na sajtu gde se
zastava vidi cela — tamna podloga nosi i belu traku. */
.site-footer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
/* Visina = 3 x --traka-boje. Ako menjas debljinu, menjaj SAMO --traka-boje
u :root — ovde se racuna sama. */
height: calc(var(--traka-boje) * 3);
background: var(--trobojka);
}
@keyframes futer-preliv {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.2rem;
padding: 3.2rem 0 2.2rem;
}
/* Kolona „Za aktiviste" je četvrta. Na 760 px sve četiri u red daju oko 150 px
po koloni, gde se „Prijava na portal" prelama — zato se do 1040 px slažu
dva po dva, a tek iznad idu u jedan red. */
@media (min-width: 760px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1040px) {
.footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; }
}
.footer-brand p { font-size: 0.92rem; margin-top: 0.8rem; max-width: 34ch; }
/* Dodirne mete su 44 px iako je sam znak 22 px — prst nije kursor, a ovo su
jedine ikonice na sajtu koje se dodiruju. Razmak je negativan sleva da bi
prvi znak stajao u ravni sa tekstom iznad, uprkos sopstvenom okviru. */
.footer-social {
display: flex;
gap: 0.25rem;
margin: 1.1rem 0 0 -0.6rem;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: rgba(255, 255, 255, 0.62);
transition: color 0.18s, background 0.18s;
}
.footer-social a:hover,
.footer-social a:focus-visible {
color: var(--bela);
background: rgba(255, 255, 255, 0.1);
}
.footer-social svg { display: block; }
.logo-footer { font-size: 1.15rem; }
.footer-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-nav h3 {
color: var(--bela);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.4rem;
}
.footer-nav a {
color: rgba(255, 255, 255, 0.62);
text-decoration: none;
font-size: 0.95rem;
padding: 0.15rem 0;
transition: color 0.18s;
}
.footer-nav a:hover { color: var(--bela); }
.footer-bottom {
position: relative;
padding: 1.3rem 0;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.45);
}
/* Divajder iznad reda sa autorskim pravima — obicna tanka bela linija.
Trobojka stoji na vrhu futera; druga preko celog reda bi bila previse. */
.footer-bottom::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: rgba(255, 255, 255, 0.16);
}
/* ---------- Pomocno ---------- */
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.section-cta { text-align: center; margin-top: clamp(2rem, 4vw, 2.8rem); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; animation: none !important; }
}
/* Stariji Firefox i slabiji telefoni nemaju backdrop-filter. Bez ove rezerve
kartice bi bile providne i tekst bi se mesao sa pozadinom. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header, .page-head { background: rgba(255, 255, 255, 0.97); }
.card, .step, .hero-panel, .btn-outline { background: rgba(255, 255, 255, 0.94); }
.section-alt { background: rgba(255, 255, 255, 0.9); }
}
/* ---------- Ekrani aplikacije: mreza svih devet + uvecani prikaz ----------
Na sirokom ekranu sve devet slicica stoje odjednom i klik na bilo koju
otvara je uvecanu preko cele strane. Na telefonu se ista lista pretvara u
traku koja se prevlaci, jedan ekran po prikazu, i tamo uvecanog prikaza
nema — telefon vec zauzima skoro celu sirinu.
Uvecani prikaz radi BEZ IJEDNE LINIJE JAVASCRIPTA. Nosi ga `:target`:
slicica je obican link na `#slika-3`, a blok sa tim `id`-om stoji
`display: none` dok ga adresa ne pogodi. Zato radi i kad je JavaScript
ugasen, i moze se otvoriti direktnim linkom.
`