/* Zajednicki izgled svih strana: okvir, mreza signala, hover stanja, ulazne animacije i otkrivanje pri skrolu. Ono sto postoji samo na pocetnoj (kartica isprave, crtez uredjaja) ostaje u index.html. */ :root { /* Brend boje kao "r,g,b" fragmenti, da bi i CSS i canvas skripta radili sa istim vrednostima i samo dopisivali alfu. */ --brand-red: 166, 50, 50; --brand-blue: 37, 99, 235; --brand-navy: 31, 56, 100; } /* Scroll anchoring je namerno iskljucen. Ulazne animacije (rise/slide/frame) pomeraju sadrzaj u prvim desetinkama ucitavanja. Browser to vidi kao promenu visine iznad vidnog polja i "popravi" scroll da sidro ostane na mestu, pa stranica sama skrolne par desetina piksela. Ta pozicija se onda zapamti (history.scrollRestoration je podrazumevano "auto"), sledeci refresh krene od nje i doda jos toliko - otuda skrol koji se gomila svakim osvezavanjem. Nema dinamickog sadrzaja iznad vidnog polja, pa sidrenje ovde nista ne dobija. */ html { overflow-anchor: none; } /* Okvir sa slike: cela stranica je jedan zaobljen pravougaonik sa plavom linijom. Na uskim ekranima okvir se gubi jer bi pojeo pola sirine. */ .page-frame { position: relative; /* Mreza ide na z-index -1 da bi bila iznad pozadine okvira, a ispod celog sadrzaja, bez diranja svake sekcije ponaosob. `isolation` pravi zaseban kontekst slaganja, pa ne propadne iza . */ isolation: isolate; } @media (max-width: 767px) { .page-frame { border: none; border-radius: 0; } } /* Canvas mreza preko cele stranice: pokriva ceo okvir, od zaglavlja do podnozja, i jos pojas oko njega. Okvir ima `mx-6 my-8`, pa bi mreza unutar njega stala pre ivice ekrana i ostavila beo ram. Zato platno izlazi van okvira tacno za te margine (negativan `top`/`left` plus toliko veca `width`/ `height`), i mreza ide od ivice do ivice stranice. Sirina se poklapa sa , pa nema vodoravnog skrola. Maska je namerno siroka elipsa koja gasi samo uglove. Okvir je `rounded-full`, sto na visokoj stranici daje pilulu (polukrug gore, prave stranice, polukrug dole), pa bi upisana elipsa odsekla mrezu po sredini bocnih ivica. Ovako mreza ide do ivice stranice, a u uglovima tiho nestane. */ .signal-net { position: absolute; top: -2rem; /* my-8 */ left: -1.5rem; /* mx-6 */ z-index: -1; display: block; width: calc(100% + 3rem); height: calc(100% + 4rem); opacity: 30%; pointer-events: none; -webkit-mask-image: radial-gradient( ellipse 85% 92% at 50% 50%, #000 70%, transparent 100% ); mask-image: radial-gradient( ellipse 85% 92% at 50% 50%, #000 70%, transparent 100% ); } /* Sidra (sadrzaj politike, #podrska...) ne smeju da zavrse uz samu ivicu ekrana. */ [id] { scroll-margin-top: 1.5rem; } /* Tekst pravnih i informativnih strana: liste i citat bez Tailwind klasa na svakom

. */ .prose-ezop p + p { margin-top: 0.75rem; } .prose-ezop ul { margin-top: 0.75rem; list-style: disc; padding-left: 1.25rem; } .prose-ezop ul + p, .prose-ezop p + ul { margin-top: 0.75rem; } .prose-ezop li + li { margin-top: 0.375rem; } .prose-ezop li::marker { color: rgb(var(--brand-blue)); } .prose-ezop strong { font-weight: 600; color: rgb(var(--brand-navy)); } /* --------------------------------------------------------------- Hover stanja bez pomeranja. Ovaj blok vazi uvek, i kod korisnika sa iskljucenim animacijama: menja samo boju, ivicu i senku, nista se ne pomera i nista ne treperi. Pomeranje i prelazi su nize, iza `prefers-reduced-motion: no-preference`. --------------------------------------------------------------- */ .lift:hover { border-color: rgba(var(--brand-blue), 0.45); box-shadow: 0 18px 40px -12px rgba(var(--brand-navy), 0.35); } .step:hover { background-color: #dbeafe; } .step:hover .step-num { color: rgb(var(--brand-red)); } .step:hover .step-icon { background-color: rgba(var(--brand-red)); color: #ffffff; } /* Linija ispod linkova u podnozju: uvek postoji, samo je siroka 0 dok se ne predje misem preko linka. Zato radi i bez animacija. Tekuca strana (`aria-current`) ima liniju stalno. */ .ulink { position: relative; } .ulink::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: rgb(var(--brand-blue)); transform: scaleX(0); transform-origin: left; } .ulink:hover::after, .ulink[aria-current='page']::after { transform: scaleX(1); } /* --------------------------------------------------------------- Animacije. Pravilo kroz ceo sajt: animacija samo dodaje, nikad ne uslovljava sadrzaj. Svaki element je u finalnom stanju po default-u, a klasa ga vrati unazad tek ako je animacija dozvoljena (vidi `@media (prefers-reduced-motion: no-preference)` ispod). Tako stranica kod korisnika sa iskljucenim animacijama izgleda normalno, umesto da ostane prazna jer je opacity zaglavio na nuli. --------------------------------------------------------------- */ /* Okvir se "iscrta" pri ucitavanju. */ @keyframes frame-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } } @keyframes rise-in { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Logotip tinja, kao zar. Logo je slika, pa sjaj ide kroz `drop-shadow`, koji prati providnost slike (oblik slova), a ne pravougaonik. Boja je jedna za ceo znak, tamnoplava. */ @keyframes ember { 0%, 100% { filter: drop-shadow(0 2px 8px rgba(var(--brand-navy), 0.06)); } 50% { filter: drop-shadow(0 3px 16px rgba(var(--brand-navy), 0.22)); } } @media (prefers-reduced-motion: no-preference) { .anim-frame { animation: frame-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .anim-rise { animation: rise-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } .anim-fade { animation: fade-in 0.6s ease-out both; } .anim-ember { animation: ember 4.5s ease-in-out infinite; } /* Sekcije ispod preloma cekaju da udju u vidno polje (js/reveal.js dodaje .is-in). Bez JS-a ostaju vidljive, jer .reveal ne krije sadrzaj sam po sebi - krije ga tek ova pravila. */ .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.is-in { opacity: 1; transform: none; } /* Razmak izmedju kartica koje se otkrivaju zajedno daje `js/reveal.js` (inline transition-delay). */ .lift { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease-out, border-color 0.25s ease-out; } .lift:hover { transform: translateY(-5px); } /* `.lift` gore pregazi prelaz iz `.reveal`, pa bi kartica iskocila bez utapanja; ovde se oba spajaju. */ .lift.reveal { transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease-out, border-color 0.25s ease-out; } .step { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease-out, box-shadow 0.3s ease-out; } /* Isto kao `.lift.reveal`: oba prelaza zajedno. */ .step.reveal { transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease-out, box-shadow 0.3s ease-out; } .step:hover { transform: translateY(-6px); box-shadow: 0 22px 45px -20px rgba(var(--brand-navy), 0.55); } .step-icon { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease-out, color 0.3s ease-out; } .step:hover .step-icon { transform: rotate(-8deg) scale(1.12); } .step-num { transition: color 0.3s ease-out; } .ulink::after { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .btn { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } }