/* ============================================================ Uslužionica — deljeni sloj (tokeni, tipografija, nav, podnožje) Fontovi se hostuju LOKALNO, ne sa Google CDN-a. Na sajtu koji objašnjava zaštitu podataka bilo bi neumesno slati IP adresu posetioca trećoj strani samo da bi se preuzeo font. Ista odluka je doneta i u staroj verziji pravnih stranica; ovde se nastavlja, i zahvaljujući njoj CSP može da ostane `default-src 'self'`. Dizajn funnela koristi imena tokena `--p-*`. Ona su ovde svedena na aliase nad `--us-*`, koji su izvor istine i dele se sa mobilnom aplikacijom. Tako se markup iz dizajna prenosi bez prepisivanja svakog inline stila, a boja i dalje postoji samo na jednom mestu. ============================================================ */ @font-face { font-family: "Outfit"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Outfit-Regular.woff2") format("woff2"); } @font-face { font-family: "Outfit"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Outfit-Medium.woff2") format("woff2"); } @font-face { font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Outfit-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Outfit"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Outfit-Bold.woff2") format("woff2"); } /* ── Tokeni — tamna tema je podrazumevana ───────────────────── Brend definiše tamnu temu kao primarni estetski identitet, a funnel dizajn je crtan na njoj. Svetla tema je ravnopravna, ali dolazi kroz [data-theme="light"]. ───────────────────────────────────────────────────────────── */ :root { color-scheme: dark; /* Brend paleta — Brand Book v1.0 */ --us-color-deep-navy: #0B1220; --us-color-slate-blue: #162238; --us-color-primary-blue: #2F6BFF; --us-color-soft-blue: #69A8FF; --us-color-off-white: #F7FAFC; --us-bg: #0B1220; --us-bg2: #0E1728; --us-surface: #162238; --us-surface2: #1B2A47; --us-fg: #F8FAFC; --us-fg-muted: #A9B6CA; --us-fg-subtle: #7C8AA3; --us-border: #22304E; --us-border-soft: #182238; --us-accent: #69A8FF; /* na tamnoj podlozi #2F6BFF NE prolazi AA */ --us-accent-cta: #2F6BFF; /* dugme sa belim tekstom — kontrast je na tekstu */ --us-tint: rgba(47, 107, 255, 0.14); --us-mark1: #2F6BFF; --us-mark2: #69A8FF; --us-success: #22C55E; --us-warning: #F59E0B; --us-error: #F87171; --us-warn-bg: #2A2416; --us-warn-border: #6B5A2A; --us-radius-sm: 12px; --us-radius-md: 16px; --us-radius-lg: 18px; --us-radius-xl: 24px; --us-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --us-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.45); --us-font: "Outfit", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --us-tracking-tight: -0.03em; --us-tracking-normal: -0.005em; --us-tracking-wide: 0.04em; --us-ease: cubic-bezier(0.2, 0.7, 0.2, 1); } :root[data-theme="light"] { color-scheme: light; --us-bg: #F7FAFC; --us-bg2: #FFFFFF; --us-surface: #FFFFFF; --us-surface2: #F1F5F9; --us-fg: #0F172A; --us-fg-muted: #475569; --us-fg-subtle: #64748B; --us-border: #E2E8F0; --us-border-soft: #F1F5F9; --us-accent: #2456CC; /* tamnija plava — AA na beloj podlozi */ --us-accent-cta: #2F6BFF; --us-tint: #E9F2FF; --us-mark1: #0E2F8C; --us-mark2: #2463D8; --us-error: #DC2626; --us-warn-bg: #FFFBEB; --us-warn-border: #F59E0B; --us-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --us-shadow-md: 0 16px 40px rgba(15, 23, 42, 0.10); } /* Posetilac bez JavaScript-a ne dobija `data-theme` pečat iz skripte u -u, pa se tada poštuje sistemsko podešavanje. Kad skripta radi, ona uvek upiše atribut i ovo pravilo se ne primenjuje. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --us-bg: #F7FAFC; --us-bg2: #FFFFFF; --us-surface: #FFFFFF; --us-surface2: #F1F5F9; --us-fg: #0F172A; --us-fg-muted: #475569; --us-fg-subtle: #64748B; --us-border: #E2E8F0; --us-border-soft: #F1F5F9; --us-accent: #2456CC; --us-tint: #E9F2FF; --us-mark1: #0E2F8C; --us-mark2: #2463D8; --us-error: #DC2626; --us-warn-bg: #FFFBEB; --us-warn-border: #F59E0B; --us-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --us-shadow-md: 0 16px 40px rgba(15, 23, 42, 0.10); } } /* ── Aliasi za markup prenet iz funnel dizajna ────────────────── */ :root { --p-bg: var(--us-bg); --p-bg2: var(--us-bg2); --p-surface: var(--us-surface); --p-surface2: var(--us-surface2); --p-fg: var(--us-fg); --p-muted: var(--us-fg-muted); --p-subtle: var(--us-fg-subtle); --p-border: var(--us-border); --p-accent: var(--us-accent-cta); --p-accent2: var(--us-accent); --p-tint: var(--us-tint); --p-shadow: var(--us-shadow-md); --p-mark1: var(--us-mark1); --p-mark2: var(--us-mark2); } /* ── Osnova ───────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--us-bg); color: var(--us-fg); font-family: var(--us-font); font-size: 15px; line-height: 1.65; letter-spacing: var(--us-tracking-normal); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--us-accent); text-decoration: none; font-weight: 500; } a:hover { text-decoration: underline; } strong { font-weight: 600; } input, button, select, textarea { font-family: inherit; } :focus-visible { outline: 2px solid var(--us-accent); outline-offset: 3px; border-radius: 6px; } .us-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--us-accent-cta); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; } .us-skip:focus { left: 12px; top: 12px; text-decoration: none; } .us-mark { display: block; flex-shrink: 0; } .us-mark .us-mark-a { stroke: var(--us-mark1); } .us-mark .us-mark-b { stroke: var(--us-mark2); } /* ── Zaglavlje ────────────────────────────────────────────────── */ .us-topbar { background: var(--us-bg2); border-bottom: 1px solid var(--us-border-soft); position: sticky; top: 0; z-index: 100; } .us-topbar-inner { max-width: 1120px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; gap: 20px; } .us-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--us-fg); font-weight: 700; font-size: 17px; letter-spacing: var(--us-tracking-tight); margin-right: auto; } .us-brand:hover { text-decoration: none; } .us-brand svg { width: 28px; height: 28px; } .us-nav { display: flex; gap: 18px; align-items: center; font-size: 14px; font-weight: 500; } .us-nav a { color: var(--us-fg-muted); font-weight: 500; transition: color 120ms var(--us-ease); } .us-nav a:hover { color: var(--us-accent); text-decoration: none; } .us-nav a[aria-current="page"] { color: var(--us-accent); font-weight: 600; } .us-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--us-border); border-radius: 10px; background: transparent; color: var(--us-fg-muted); cursor: pointer; transition: border-color 120ms var(--us-ease), color 120ms var(--us-ease); } .us-theme-toggle:hover { border-color: var(--us-accent); color: var(--us-accent); } .us-theme-toggle .us-icon-dark { display: none; } :root[data-theme="light"] .us-theme-toggle .us-icon-dark { display: block; } :root[data-theme="light"] .us-theme-toggle .us-icon-light { display: none; } /* ── Podnožje ─────────────────────────────────────────────────── */ .us-footer { border-top: 1px solid var(--us-border-soft); background: var(--us-bg2); padding: 40px 22px 44px; margin-top: auto; } .us-footer-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 40px; font-size: 13.5px; color: var(--us-fg-subtle); } .us-footer-brand { display: flex; flex-direction: column; gap: 6px; margin-right: auto; } .us-footer-brand .us-brand { margin-right: 0; } .us-footer-slogan { color: var(--us-fg-subtle); font-size: 13px; } .us-footer-col { display: flex; flex-direction: column; gap: 8px; } .us-footer-col h2 { margin: 0 0 2px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--us-tracking-wide); color: var(--us-fg-subtle); } .us-footer-col a { color: var(--us-fg-muted); font-weight: 500; } .us-footer-bottom { max-width: 1120px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid var(--us-border-soft); display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 13px; color: var(--us-fg-subtle); } /* Oznake prodavnica — namerno NISU zvanični Apple/Google badge-ovi. Obe kompanije zabranjuju izmenu svojih oznaka, a nama treba dopisano „uskoro". Zato sopstvena, u stilu brenda. */ .us-stores { display: flex; flex-wrap: wrap; gap: 10px; } .us-store { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--us-border); border-radius: var(--us-radius-sm); background: var(--us-surface); color: var(--us-fg-muted); font-size: 12.5px; font-weight: 500; } .us-store span { color: var(--us-fg-subtle); font-size: 10.5px; font-weight: 600; letter-spacing: var(--us-tracking-wide); } /* ── Dugmad ───────────────────────────────────────────────────── */ .us-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border: 1px solid transparent; border-radius: 14px; background: var(--us-accent-cta); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: var(--us-tracking-normal); cursor: pointer; text-decoration: none; transition: background 140ms var(--us-ease), transform 140ms var(--us-ease); } .us-btn:hover { background: #2458DB; color: #fff; text-decoration: none; } .us-btn:active { transform: scale(0.98); } .us-btn-ghost { background: transparent; border-color: var(--us-border); color: var(--us-fg-muted); } .us-btn-ghost:hover { background: var(--us-tint); border-color: var(--us-accent); color: var(--us-fg); } /* ── Smanjeno kretanje ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.12s !important; } } /* ── Uski ekrani ──────────────────────────────────────────────── */ @media (max-width: 560px) { .us-topbar-inner { padding: 12px 18px; gap: 14px; } .us-nav { gap: 14px; font-size: 13px; } .us-footer { padding: 32px 18px 36px; } }