/* ========================================================================== MASUDIS — Šumadija Digital Studio X-series dizajn sistem · v2 POWERED BY MASUDIS Ovaj fajl je jedini izvor stilova za sve stranice sajta. Deli se izmedju naslovne, /sajtovi/, product stranica i bloga — zato se kesira jednom i vise se ne preuzima (v1 je imao 50KB inline CSS-a u SVAKOJ stranici, sto se preuzimalo iznova pri svakoj navigaciji). ========================================================================== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ /* --- tekst --- */ --ink:#100E12; --ink-soft:#3A3742; --ink-mute:#5F5C6B; /* v1 je bio #7C7888 = 3.39:1 na cream-u, pao AA. Sada 5.6:1 */ --ink-faint:#8A8697; /* SAMO dekoracija: linije, separatori, nikad telo teksta */ /* --- podloge --- */ --cream:#EDE4D0; --cream-deep:#E4D8BE; --cream-pale:#F4EEDF; --paper:#FBF7EC; --line:#D9CDB2; --line-soft:#E2D8C2; /* --- akcenti --- */ --amber:#D4840A; --amber-lo:#E8A33C; --amber-dk:#8C5406; /* jedini amber dozvoljen za tekst na cream-u: 4.9:1 */ --steel:#5C6F8A; --teal:#0E8C82; /* samo za pozadine/ivice, NE za sitan tekst (3.26:1) */ --teal-dk:#0A6459; /* teal za tekst na cream-u: 5.1:1 */ --violet:#7B3FF2; --rust:#C73E2F; --grad-amber:linear-gradient(118deg,#B8720A 0%,#E8A33C 100%); --grad-headline:linear-gradient(120deg,var(--steel),var(--amber)); --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,.05,.2,1); --shadow:0 30px 80px -30px rgba(60,48,20,.4),0 10px 30px -15px rgba(60,48,20,.2); } html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px} body{ font-family:'Syne',sans-serif; background:var(--cream); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ========================================================================== SISTEMSKI KURSOR SE KRIJE SAMO AKO ZAMENA STVARNO RADI Ranije je `body{}` stajalo bezuslovno. Na 404 i hvala stranicama nema ni kursor elemenata ni skripte koja ih pomera, pa je mis jednostavno nestajao — korisnik ne vidi gde pokazuje. Isto bi se desilo na svakoj stranici gde skripta padne ili je blokirana. Sada klasu `ima-kursor` postavlja JS, i to tek kad je nacrtani kursor zaista aktiviran. Ako skripte nema — kursor je normalan. ========================================================================== */ html.ima-kursor body, html.ima-kursor a, html.ima-kursor button, html.ima-kursor summary, html.ima-kursor input, html.ima-kursor textarea, html.ima-kursor select, html.ima-kursor .burger, html.ima-kursor .mob-close, html.ima-kursor .shop-filters button, html.ima-kursor .qa summary{cursor:none} html.kbd body,html.kbd a,html.kbd button,html.kbd input, html.kbd textarea,html.kbd select{cursor:auto} /* --- fokus: vidljiv na svakom interaktivnom elementu (v1 ga nije imao) --- */ :focus-visible{outline:2.5px solid var(--amber);outline-offset:3px;border-radius:4px} :focus:not(:focus-visible){outline:none} /* --- preskoci na sadrzaj --- */ .skip{position:absolute;left:auto;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;z-index:9999;background:var(--ink);color:var(--cream); padding:14px 22px;font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;text-decoration:none} .skip:focus{left:16px;top:16px;width:auto;height:auto;overflow:visible;clip-path:none} /* ---------- GRAIN ---------- */ .grain{ position:fixed;inset:-50%;z-index:9000;pointer-events:none;width:200%;height:200%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity:.05;mix-blend-mode:multiply;animation:grainShift 8s steps(6) infinite; } @keyframes grainShift{0%{transform:translate(0,0)}16%{transform:translate(-3%,2%)}33%{transform:translate(2%,-3%)} 50%{transform:translate(-2%,3%)}66%{transform:translate(3%,1%)}83%{transform:translate(-1%,-2%)}100%{transform:translate(0,0)}} .progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:1100;transform-origin:0 50%;transform:scaleX(0);background:var(--grad-amber)} /* ---------- KURSOR ---------- */ .cur-dot{position:fixed;top:0;left:0;z-index:9999;width:5px;height:5px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%);pointer-events:none;transition:opacity .25s,background .25s} .cur-ring{position:fixed;top:0;left:0;z-index:9998;width:40px;height:40px;border-radius:50%;border:1px solid var(--ink-mute);transform:translate(-50%,-50%);pointer-events:none;transition:width .3s var(--ease-out),height .3s var(--ease-out),border-color .3s,opacity .3s,background .3s} .cur-label{position:fixed;top:0;left:0;z-index:9999;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--cream);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .25s} body.hov-link .cur-ring{width:64px;height:64px;border-color:transparent;background:var(--ink)} body.hov-link .cur-dot{opacity:0} body.hov-link .cur-label{opacity:1} body.hov-soft .cur-ring{width:56px;height:56px;border-color:var(--amber)} /* kursor se gasi cim se koristi tastatura — inace korisnik ne vidi gde je fokus */ html.kbd .cur-dot,html.kbd .cur-ring,html.kbd .cur-label{display:none} /* ---------- LAYOUT ---------- */ .shell{max-width:1480px;margin:0 auto;padding:0 56px;position:relative} section{position:relative;z-index:1} /* Grid celije podrazumevano imaju min-width:auto i ODBIJAJU da se skupe ispod min-content sirine svog sadrzaja — jedan dugacak token (mejl, URL, naziv) razvuce kolonu preko ekrana. Na telefonu se to vidi kao odsecen sadrzaj, jer body ima overflow-x:hidden pa nema ni scrollbar-a da upozori. Ovo je opsta zastita; pojedinacni slucajevi su resavani i lokalno. */ .cta-grid > *,.tier-grid > *,.branch-grid > *,.shop-grid > *, .journal-grid > *,.foot-grid > *,.work > *,.f-row > *,.stats > *{min-width:0} /* ---------- NAV ---------- VAZNO: selektor je #nav, ne bare `nav`. Na stranici postoji i breadcrumb koji je takodje