/* ===================================================== svilenkovic.com — single-page 3D story Apple-grade restraint + WOW interactions: - black stage, white type, single accent (#0a84ff) - custom cursor, magnetic CTAs, hover work previews - infinite marquee strips, floating quick-actions ===================================================== */ :root { /* === Surfaces — monochrome, calm */ --3d-bg-deep: #08090c; --3d-bg-mid: #0d0f14; --3d-bg-card: rgba(16, 18, 24, 0.82); /* near-opaque dark slate */ --3d-bg-card-hi: rgba(24, 28, 36, 0.92); --3d-fg: #f5f7fb; --3d-fg-muted: rgba(214, 219, 230, 0.88); --3d-fg-dim: rgba(180, 188, 204, 0.62); /* === ONE accent — calm electric blue. Used sparingly */ --3d-accent: #6ea8ff; --3d-accent-2: #9bc0ff; --3d-accent-soft:rgba(110, 168, 255, 0.18); /* === Hairlines */ --3d-stroke: rgba(255, 255, 255, 0.07); --3d-stroke-hi: rgba(255, 255, 255, 0.16); /* === Type stacks (matches obelisk.svilenkovic.rs) */ --3d-font-display: "Space Grotesk", "SpaceGrotesk-fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --3d-font-body: "Inter", "Inter-fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --3d-font-mono: "JetBrains Mono", "JetBrainsMono-fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* fluid type scale — responsive between 320px and 2560px viewport */ --3d-step--1: clamp(0.78rem, 0.74rem + 0.16vw, 0.86rem); --3d-step-0: clamp(0.95rem, 0.88rem + 0.30vw, 1.05rem); --3d-step-1: clamp(1.12rem, 1.02rem + 0.50vw, 1.32rem); --3d-step-2: clamp(1.32rem, 1.16rem + 0.80vw, 1.72rem); --3d-step-3: clamp(1.72rem, 1.40rem + 1.6vw, 2.40rem); --3d-step-4: clamp(2.10rem, 1.72rem + 1.9vw, 3.20rem); --3d-step-5: clamp(2.60rem, 2.02rem + 2.9vw, 4.40rem); --3d-step-6: clamp(3.20rem, 2.30rem + 4.5vw, 6.40rem); --3d-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --3d-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --chapter-pad: 6rem; } html { scroll-behavior: auto; background: #000; } html.lenis, html.lenis body { height: auto; } html.lenis-smooth { scroll-behavior: auto !important; } html { overflow-x: clip; } body[data-page] { background: var(--3d-bg-deep); color: var(--3d-fg); font-family: var(--3d-font-body); font-feature-settings: "ss01", "cv11", "tnum"; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; max-width: 100vw; } /* On the 3D story page the canvas is appended to and must be visible THROUGH the body. Make the body's painted bg transparent and rely on the html-level #000 fallback when the 3D layer is suppressed (reduced motion). */ html body[data-page="index"], html body[data-page="index"].light, html body[data-page="index"].dark { background: transparent !important; background-color: transparent !important; background-image: none !important; /* never propagate a transform to the body — would break position:fixed on the global 3D canvas */ transform: none !important; } html body[data-page="index"] main { background: transparent !important; } /* Custom cursor disabled — keep system cursor on every page */ .cursor-dot, .cursor-ring { display: none !important; } #global-3d-canvas { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; /* canvas lives in as a sibling of . Stacking: canvas (z-index: -2) — bottom global-3d-dim (z-index: -1) — dim+blur overlay above scene body content (z-index: auto/2) — fully readable body bg is transparent on index, so the canvas + dim show through. */ z-index: -2 !important; pointer-events: none !important; } /* Global scene dim+blur overlay — sits above the canvas, below body content. Calms down hot whites (explosion in chapter 1) and gives foreground text always-on contrast across every chapter palette. */ #global-3d-dim { position: fixed !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; background: rgba(2, 4, 10, 0.42); backdrop-filter: blur(3px) saturate(110%); -webkit-backdrop-filter: blur(3px) saturate(110%); } @media (max-width: 760px) { /* phones: GPU is weaker AND the explosion was too bright — heavier dim, less blur (blur is the expensive part) */ #global-3d-dim { background: rgba(2, 4, 10, 0.55); backdrop-filter: blur(1px) saturate(105%); -webkit-backdrop-filter: blur(1px) saturate(105%); } } /* Reduced motion → simply paint a solid dark backdrop */ html.reduced-motion #global-3d-dim { background: #050811; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ====== Mobile / data-saver: 3D bundle is skipped entirely (vite.php loader). Make the page look polished without a canvas behind it. ====== */ html.no-3d body[data-page="index"], html.no-3d body[data-page^="aplikacija-"] { background: var(--3d-bg-deep) !important; background-image: radial-gradient(120% 80% at 50% -20%, rgba(110,168,255,0.08), transparent 60%), radial-gradient(80% 60% at 100% 100%, rgba(155,192,255,0.05), transparent 60%) !important; } html.no-3d #global-3d-canvas, html.no-3d #global-3d-dim, html.no-3d .chapter-nav, html.no-3d .work-preview, html.no-3d .preloader { display: none !important; } /* Static hero gets its own subtle gradient accent (replacing 3D mark) */ html.no-3d #ch-hero { background: radial-gradient(60% 50% at 70% 30%, rgba(110,168,255,0.10), transparent 70%), radial-gradient(45% 35% at 20% 80%, rgba(155,192,255,0.06), transparent 70%); } /* Header stays at the top via position:sticky so the hamburger + logo + lang toggle remain reachable as the user scrolls through chapters. IMPORTANT: position:fixed does NOT work on the navbar here. Verified via bisecting puppeteer tests: even when the navbar's getComputedStyle().position reports "fixed", its getBoundingClientRect().top still tracks -scrollY (i.e. behaves like position:static/relative). Something inside the chapter tree (likely a GSAP-managed transform applied during scrub, on a transient layer that getComputedStyle doesn't catch) creates a containing block for the fixed descendant, breaking it. position:sticky on the parent

sidesteps this completely — it sticks to the scroll container (html) rather than depending on the fixed-containing- block chain. The .navbar inside the sticky header is static, no special z. */ body[data-page] header { position: sticky !important; top: 0 !important; z-index: 1000 !important; display: block !important; } body[data-page] .navbar { position: static !important; z-index: auto; } body[data-page] main, body[data-page] footer.footer { position: relative; z-index: 2; } /* ====== PRELOADER ========================================================= The loading splash markup lives in includes/header.php and ALL of its styles are inlined in there, so it paints on the very first frame — before this large stylesheet has finished downloading. We intentionally do NOT redefine `.preloader` / `.preloader-mark` / `.preloader-bar` / `.preloader--out` here anymore (a stale `.preloader { display:none !important }` used to disable the splash entirely). `html.no-3d .preloader { display:none }` (above) still hides it on the data-saver path where the WebGL bundle is skipped, and src/utils/preloader.js + the footer.php fallback handle dismissal. ========= */ /* Body reveal animation kept for legacy aplikacija-* code paths that still call dismissPreloader(). On index there is no preloader so body is visible immediately. */ html.loaded body { animation: bodyReveal 0.6s var(--3d-ease-out) both; } @keyframes bodyReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* === Scroll-reveal — sekcije / kartice se pojavljuju kako korisnik dolazi do njih === */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--3d-ease-out, cubic-bezier(.2,.8,.2,1)), transform 0.8s var(--3d-ease-out, cubic-bezier(.2,.8,.2,1)); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* Honor reduced-motion — show everything instantly without transition */ @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* Fallback for users who load with no JS — show everything */ html.no-js [data-reveal] { opacity: 1; transform: none; } /* ====== Preloader language picker (first-visit only) ====== */ .preloader-lang { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin: 0.5rem auto 0; max-width: 420px; padding: 0 1rem; animation: preloaderLangIn 0.55s var(--3d-ease-out, cubic-bezier(.2,.8,.2,1)) 0.4s both; } .preloader-lang--done { opacity: 0; transform: translateY(-6px); transition: opacity 0.3s var(--3d-ease-out), transform 0.3s var(--3d-ease-out); } .preloader-lang-hint { margin: 0; font-family: var(--3d-font-mono, "Geist Mono", monospace); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245, 247, 251, 0.55); text-align: center; } .preloader-lang-buttons { display: flex; gap: 0.65rem; width: 100%; justify-content: center; } .preloader-lang-btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.35rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; color: #f5f7fb; font-family: var(--3d-font-display, "Plus Jakarta Sans", sans-serif); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; -webkit-tap-highlight-color: transparent; } .preloader-lang-btn:hover, .preloader-lang-btn:focus-visible { background: rgba(110,168,255,0.10); border-color: rgba(110,168,255,0.45); transform: translateY(-1px); outline: none; } .preloader-lang-flag { font-size: 1.05rem; line-height: 1; } .preloader-lang-name { font-family: inherit; } @keyframes preloaderLangIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 380px) { .preloader-lang-buttons { flex-direction: column; align-items: stretch; } .preloader-lang-btn { justify-content: center; } } /* ====== CUSTOM CURSOR ====== */ .cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 10000; transform-origin: center center; will-change: transform; } .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--3d-fg); transition: transform 0s, background 0.2s var(--3d-ease), opacity 0.2s var(--3d-ease); } .cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.45); transition: width 0.4s var(--3d-ease-out), height 0.4s var(--3d-ease-out), margin 0.4s var(--3d-ease-out), border-color 0.3s var(--3d-ease), background 0.3s var(--3d-ease), opacity 0.2s var(--3d-ease); } .cursor-ring.hover { width: 70px; height: 70px; margin: -35px 0 0 -35px; border-color: var(--3d-accent); background: rgba(10, 132, 255, 0.08); } .cursor-ring.hover-link { border-color: var(--3d-fg); background: rgba(255,255,255,0.06); } .cursor-dot.pressed { background: var(--3d-accent); transform-origin: center center; } .cursor-dot.hidden, .cursor-ring.hidden { opacity: 0; } @media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important; } } /* ====== Navbar ====== */ body[data-page] .navbar { background: rgba(0, 0, 0, 0.55) !important; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--3d-stroke); } body[data-page] .navbar a, body[data-page] .navbar .logo-text, body[data-page] .nav-menu a, body[data-page] .nav-link { color: var(--3d-fg) !important; font-weight: 500; font-size: 0.92rem; } body[data-page] .nav-link i { display: none; } body[data-page] .nav-link:hover, body[data-page] .nav-link.active { color: var(--3d-fg-muted) !important; } /* Hide theme toggle */ body[data-page] .theme-toggle, body[data-page] .mobile-theme-toggle, body[data-page] #theme-toggle, body[data-page] #mobile-theme-toggle { display: none !important; } /* Lang toggle slim */ body[data-page] .lang-toggle, body[data-page] .mobile-lang-toggle { background: transparent !important; border: 1px solid var(--3d-stroke) !important; color: var(--3d-fg) !important; border-radius: 980px !important; padding: 0.4rem 0.85rem !important; font-size: 0.82rem !important; transition: border-color 0.3s var(--3d-ease), background 0.3s var(--3d-ease); } body[data-page] .lang-toggle:hover { border-color: var(--3d-stroke-hi) !important; } body[data-page] .lang-toggle .control-text { color: inherit !important; } /* Hamburger */ body[data-page] .nav-toggle { background: transparent !important; border: 0 !important; width: 40px; height: 40px; display: none; align-items: center; justify-content: center; cursor: pointer; position: relative; } body[data-page] .nav-toggle .hamburger { display: block; width: 22px; height: 1.6px; background: var(--3d-fg); position: absolute; left: 9px; transition: transform 0.4s var(--3d-ease-out), opacity 0.3s var(--3d-ease); } body[data-page] .nav-toggle .hamburger:nth-child(1) { top: 14px; } body[data-page] .nav-toggle .hamburger:nth-child(2) { top: 19px; } body[data-page] .nav-toggle .hamburger:nth-child(3) { top: 24px; } body[data-page].menu-open .nav-toggle .hamburger:nth-child(1) { transform: translateY(5px) rotate(45deg); } body[data-page].menu-open .nav-toggle .hamburger:nth-child(2) { opacity: 0; } body[data-page].menu-open .nav-toggle .hamburger:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* Mobile menu overlay */ @media (max-width: 860px) { body[data-page] .nav-toggle { display: inline-flex; } body[data-page] .nav-menu { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.96); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.4rem; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.55s var(--3d-ease-out), opacity 0.4s var(--3d-ease); z-index: 100; } body[data-page].menu-open .nav-menu { transform: translateY(0); opacity: 1; pointer-events: auto; } body[data-page] .nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; text-align: center; } body[data-page] .nav-list .nav-link { font-size: 2.2rem !important; font-weight: 600 !important; letter-spacing: -0.025em !important; padding: 0.5rem 1rem !important; } body[data-page] .mobile-controls { margin-top: 2rem; display: flex; gap: 0.75rem; } } /* ====== CHAPTER ====== */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) main { padding: 0; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter { position: relative; z-index: 2; padding: var(--chapter-pad) 1.5rem; display: flex; align-items: center; justify-content: center; background: transparent; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-hero { min-height: 100vh; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-inner { width: 100%; max-width: 72rem; margin: 0 auto; position: relative; } /* Title + lead se OSLANJAJU na text-shadow + globalni dim za čitljivost, nema više glass plate-a iza njih (korisnik: „naslovi ne treba u karticama"). */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-title, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.5); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-lead, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-lead { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-eyebrow, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-eyebrow, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-title, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-title, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-lead, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-lead { position: relative; z-index: 2; } /* === Eyebrow — explicit BLOCK above the title, monospace badge */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-eyebrow, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--3d-font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--3d-fg-muted); margin: 0 0 1.75rem; padding: 0.35rem 0.85rem 0.35rem 0.7rem; border: 1px solid var(--3d-stroke-hi); border-radius: 4px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-eyebrow::before, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--ch-accent, var(--3d-accent)); border-radius: 50%; box-shadow: 0 0 10px var(--ch-accent, var(--3d-accent)); transition: background 0.6s var(--3d-ease); } /* Single accent for everything — calm, monochromatic */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) [id^="ch-"] { --ch-accent: var(--3d-accent); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-title .line.accent, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-title .line.accent { color: var(--3d-accent-2); } /* Subtle top divider in chapter accent — gives "section" feel without being heavy */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 4rem; background: linear-gradient(180deg, transparent, var(--ch-accent, rgba(255,255,255,0.18)) 60%, transparent); opacity: 0.6; pointer-events: none; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) #ch-hero::before { display: none; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-title, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-title { font-family: var(--3d-font-display); font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 1.75rem; color: var(--3d-fg); text-wrap: balance; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-title .line, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-title .line { display: block; overflow: hidden; line-height: 1.15; padding-bottom: 0.16em; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-title .line.muted { color: var(--3d-fg-muted); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-title .line.accent, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-title .line.accent { color: var(--3d-accent); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-lead, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-lead { font-family: var(--3d-font-body); font-size: clamp(1.05rem, 1.3vw, 1.22rem); color: var(--3d-fg-muted); max-width: 38rem; line-height: 1.55; letter-spacing: -0.005em; margin: 0 0 2.25rem; } /* === Hero — split layout: copy left, info cards right */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-hero { text-align: left; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-hero .chapter-inner.hero-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: center; max-width: 80rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-copy { display: flex; flex-direction: column; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-cta { margin-bottom: 2.5rem; } /* Hero meta — small status row below CTA */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--3d-stroke); max-width: 38rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-meta-item { display: flex; flex-direction: column; gap: 0.25rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-meta-label { font-family: var(--3d-font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--3d-fg-dim); text-transform: uppercase; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-meta-val { font-family: var(--3d-font-mono); font-size: 0.86rem; color: var(--3d-fg); display: inline-flex; align-items: center; gap: 0.5rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-meta-pulse { width: 7px; height: 7px; border-radius: 50%; background: #4ad77a; box-shadow: 0 0 0 0 rgba(74, 215, 122, 0.7); animation: pulseDot 2s ease-out infinite; } @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(74, 215, 122, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(74, 215, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 215, 122, 0); } } /* Right side — 2 stacked console-style cards */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-side { display: flex; flex-direction: column; gap: 1rem; position: relative; z-index: 2; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-card { position: relative; background: var(--3d-bg-card); border: 1px solid var(--3d-stroke); border-radius: 8px; backdrop-filter: blur(14px); overflow: hidden; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-card-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--3d-stroke); font-family: var(--3d-font-mono); font-size: 0.72rem; color: var(--3d-fg-dim); background: rgba(255, 255, 255, 0.025); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-card-bar > span:not(.hero-card-title) { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-card-bar > span:nth-child(1) { background: #ff5f56; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-card-bar > span:nth-child(2) { background: #ffbd2e; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-card-bar > span:nth-child(3) { background: #27c93f; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-card-title { margin-left: 0.5rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-stack-list { list-style: none; padding: 0.85rem 1rem 1rem; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--3d-font-mono); font-size: 0.84rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-stack-list li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; align-items: baseline; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-stack-key { color: var(--3d-accent-2); font-weight: 500; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-stack-key::before { content: "→ "; opacity: 0.5; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-stack-val { color: var(--3d-fg-muted); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-card-counts { display: grid; grid-template-columns: repeat(3, 1fr); padding: 1.1rem 0.5rem; text-align: center; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-count { display: flex; flex-direction: column; gap: 0.2rem; border-right: 1px solid var(--3d-stroke); padding: 0 0.5rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-count:last-child { border-right: none; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-count-num { font-family: var(--3d-font-display); font-size: 1.4rem; font-weight: 600; color: var(--3d-fg); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-count-label { font-family: var(--3d-font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--3d-fg-dim); text-transform: uppercase; } @media (max-width: 860px) { :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-hero .chapter-inner.hero-split { grid-template-columns: 1fr; gap: 2.25rem; max-width: 100%; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-side { gap: 0.85rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-stack-list li { grid-template-columns: 5.5rem 1fr; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-cta { margin-bottom: 2rem; } } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* Programmer-themed terminal-style hero snippet */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal { display: inline-flex; flex-direction: column; margin: 0 0 1.75rem; padding: 0.85rem 1rem 0.95rem; background: rgba(8, 10, 16, 0.6); border: 1px solid var(--3d-stroke); border-radius: 0.85rem; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86rem; line-height: 1.55; color: rgba(240, 245, 255, 0.85); max-width: 32rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal-bar { display: flex; align-items: center; gap: 0.4rem; margin: -0.85rem -1rem 0.6rem; padding: 0.45rem 0.85rem; border-bottom: 1px solid var(--3d-stroke); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--3d-fg-dim); text-transform: lowercase; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal-dot:nth-child(1) { background: #ff5f56; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal-dot:nth-child(2) { background: #ffbd2e; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal-dot:nth-child(3) { background: #27c93f; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal-bar span:last-child { margin-left: auto; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal .ln { display: block; white-space: nowrap; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal .ln .prompt { color: var(--3d-accent-2); margin-right: 0.4rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal .ln .kw { color: #ff7ab2; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal .ln .fn { color: #82d7ff; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal .ln .str { color: #c8e88a; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal .ln .com { color: rgba(245, 245, 247, 0.42); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal .ln-typing::after { content: "▋"; color: var(--3d-accent); animation: caretBlink 1s steps(1) infinite; margin-left: 0.15rem; } @keyframes caretBlink { 50% { opacity: 0; } } @media (max-width: 760px) { :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal { font-size: 0.78rem; max-width: 100%; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-terminal .ln { white-space: normal; } } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-scroll-cue { position: absolute; left: 50%; bottom: 2.5rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--3d-fg-dim); animation: scrollCue 2.4s var(--3d-ease) infinite; animation-delay: 1.6s; } @keyframes scrollCue { 0% { transform: translateX(-50%) translateY(0); opacity: 0; } 20% { transform: translateX(-50%) translateY(0); opacity: 0.8; } 60% { transform: translateX(-50%) translateY(6px); opacity: 1; } 100% { transform: translateX(-50%) translateY(0); opacity: 0; } } /* Buttons — minimal, monochrome with mono font */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.5rem; border-radius: 6px; font-family: var(--3d-font-body); font-weight: 500; font-size: 0.95rem; text-decoration: none; cursor: pointer; border: 1px solid var(--3d-stroke-hi); background: var(--3d-bg-card); color: var(--3d-fg) !important; backdrop-filter: blur(10px); transition: background 0.3s var(--3d-ease), border-color 0.3s var(--3d-ease), transform 0.3s var(--3d-ease-out); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .btn-primary { background: var(--3d-accent); color: #07090f !important; border-color: transparent; font-weight: 600; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .btn-ghost { background: rgba(0, 0, 0, 0.4); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .btn:hover { border-color: var(--3d-fg); background: var(--3d-bg-card-hi); transform: translateY(-1px); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .btn-primary:hover { background: #8bb8ff; border-color: transparent; } /* === Stats — minimal panel, accent vertical bar */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-top: 3rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .stat { position: relative; background: var(--3d-bg-card); border: 1px solid var(--3d-stroke); border-left: 2px solid var(--3d-accent); border-radius: 6px; padding: 1.5rem 1.5rem 1.4rem; backdrop-filter: blur(14px); transition: background 0.4s var(--3d-ease), border-color 0.4s var(--3d-ease), transform 0.4s var(--3d-ease-out); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .stat:hover { background: var(--3d-bg-card-hi); border-color: var(--3d-stroke-hi); border-left-color: var(--3d-accent-2); transform: translateY(-2px); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .stat-num { font-family: var(--3d-font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--3d-fg); margin-bottom: 0.5rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .stat-label { font-family: var(--3d-font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--3d-fg-muted); } /* === Services — console panel cards */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-top: 3rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .service-card { position: relative; background: var(--3d-bg-card); border: 1px solid var(--3d-stroke); border-radius: 8px; padding: 2.5rem 1.6rem 1.6rem; backdrop-filter: blur(14px); overflow: hidden; transition: background 0.4s var(--3d-ease), border-color 0.4s var(--3d-ease), transform 0.4s var(--3d-ease-out); } /* Console-like header bar with traffic-light dots */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .service-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 28px; background: rgba(255, 255, 255, 0.025); border-bottom: 1px solid var(--3d-stroke); pointer-events: none; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .service-card .service-num { position: absolute; top: 7px; left: 12px; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--3d-font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--3d-fg-dim); margin: 0; z-index: 1; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .service-card .service-num::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--3d-accent); box-shadow: 0 0 8px var(--3d-accent-soft); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .service-card:hover { background: var(--3d-bg-card-hi); border-color: var(--3d-stroke-hi); transform: translateY(-2px); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .service-card:hover::before { background: rgba(110, 168, 255, 0.06); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .service-card h3 { font-family: var(--3d-font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -0.02em; color: var(--3d-fg) !important; margin: 0 0 0.55rem; line-height: 1.25; padding-bottom: 0.08em; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .service-card p { font-family: var(--3d-font-body); font-size: 0.96rem; color: var(--3d-fg-muted) !important; line-height: 1.55; margin: 0; } /* ====== Services marquee — infinite right-to-left ticker ====== Two identical lists rendered as ONE flat strip inside .services-marquee-track (no gap on the track). Each UL contributes its own internal gap PLUS a matching padding-right so the gap continues seamlessly across the UL→UL boundary, eliminating the visible "double gap" once per cycle. Track translates 0 → -50% of its own width, landing the duplicate exactly where the original began. No edge fade mask: chips slide cleanly in and out of overflow:hidden, like a real news ticker. Pauses on hover/focus; reduced-motion shows a static wrapped grid. */ .services-marquee { position: relative; z-index: 1; padding: 2.4rem 0; border-top: 1px solid var(--3d-stroke); border-bottom: 1px solid var(--3d-stroke); background: rgba(0, 0, 0, 0.32); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; } .services-marquee-track { display: flex; width: max-content; /* The server-wide auto_prepend_file injects [class*="marquee"] { max-width:100% } as a defensive overflow shield. That clamps THIS track to the viewport and breaks the right-to-left scroll (duplicate UL gets clipped instead of being part of the track's width). Override it explicitly here. */ max-width: none !important; overflow: visible !important; animation: servicesMarqueeScroll 38s linear infinite; will-change: transform; } .services-marquee:hover .services-marquee-track, .services-marquee:focus-within .services-marquee-track { animation-play-state: paused; } .services-marquee-list { display: flex; align-items: center; gap: 0.7rem; list-style: none; margin: 0; padding: 0; padding-right: 0.7rem; /* continues the inter-chip gap into the next UL */ flex-shrink: 0; /* Same auto_prepend override — each UL must keep its natural width so the track can sum them into 2× the visible row. */ max-width: none !important; overflow: visible !important; } .services-marquee-list li { display: inline-flex; align-items: center; padding: 0.6rem 1.15rem; font-family: var(--3d-font-mono, "Geist Mono", monospace); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--3d-fg-muted); border: 1px solid var(--3d-stroke); border-radius: 999px; background: rgba(255, 255, 255, 0.025); white-space: nowrap; transition: color 0.3s var(--3d-ease), border-color 0.3s var(--3d-ease), background 0.3s var(--3d-ease), box-shadow 0.3s var(--3d-ease); } .services-marquee-list li:hover { color: #9bc0ff; border-color: rgba(110, 168, 255, 0.45); background: rgba(110, 168, 255, 0.07); box-shadow: 0 0 0 1px rgba(110, 168, 255, 0.18), 0 6px 18px -6px rgba(110, 168, 255, 0.25); } @keyframes servicesMarqueeScroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (max-width: 540px) { .services-marquee { padding: 1.85rem 0; } .services-marquee-track { animation-duration: 28s; } .services-marquee-list { gap: 0.5rem; padding-right: 0.5rem; } .services-marquee-list li { font-size: 0.7rem; padding: 0.5rem 0.9rem; letter-spacing: 0.12em; } } @media (prefers-reduced-motion: reduce) { .services-marquee { overflow: visible; } .services-marquee-track { animation: none; transform: none; width: 100%; justify-content: center; } .services-marquee-list[aria-hidden="true"] { display: none; } .services-marquee-list { flex-wrap: wrap; justify-content: center; padding-right: 0; } } /* === Work — categorized cards (no longer plain rows) */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-categories { margin-top: 3rem; display: flex; flex-direction: column; gap: 3.5rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-category { display: flex; flex-direction: column; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-category-title { font-family: var(--3d-font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--3d-fg-muted); margin: 0 0 1.25rem; padding: 0.5rem 0.85rem; display: inline-flex; align-items: center; gap: 0.6rem; background: var(--3d-bg-card); border: 1px solid var(--3d-stroke); border-left: 2px solid var(--3d-accent); border-radius: 4px; align-self: flex-start; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-category-num { color: var(--3d-accent); font-weight: 600; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.85rem; } /* Subcategories (used inside the 3D category) */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-subs { display: flex; flex-direction: column; gap: 2.25rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-sub { display: flex; flex-direction: column; gap: 0.85rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-sub-title { font-family: var(--3d-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--3d-fg-muted); display: flex; align-items: center; gap: 0.7rem; margin: 0; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-sub-title::before { content: ""; width: 1.1rem; height: 2px; background: var(--3d-accent); border-radius: 2px; flex: none; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-sub-title::after { content: ""; flex: 1; height: 1px; background: var(--3d-stroke); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-empty { padding: 3rem 1rem; text-align: center; font-size: 1rem; color: var(--3d-fg-muted); border: 1px solid var(--3d-stroke); border-radius: 8px; background: var(--3d-bg-card); font-style: italic; } /* Work card — readable on any 3D background */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "no name arrow" "no cat cat" "no tech tech"; column-gap: 0.85rem; row-gap: 0.18rem; align-items: baseline; padding: 1.1rem 1.25rem 1.05rem; background: var(--3d-bg-card); border: 1px solid var(--3d-stroke); border-radius: 8px; text-decoration: none; color: var(--3d-fg); position: relative; backdrop-filter: blur(14px); transition: background 0.3s var(--3d-ease), border-color 0.3s var(--3d-ease), transform 0.3s var(--3d-ease-out); overflow: hidden; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--3d-accent); transform: scaleY(0); transform-origin: top; transition: transform 0.4s var(--3d-ease-out); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row:hover { background: var(--3d-bg-card-hi); border-color: var(--3d-stroke-hi); transform: translateY(-2px); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row:hover::before { transform: scaleY(1); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-no { grid-area: no; align-self: start; font-family: var(--3d-font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--3d-fg-dim); padding: 0.18rem 0.5rem; border: 1px solid var(--3d-stroke); border-radius: 4px; margin-top: 0.15rem; white-space: nowrap; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-name { grid-area: name; font-family: var(--3d-font-display); font-size: 1.18rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--3d-fg); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-cat { grid-area: cat; font-size: 0.88rem; color: var(--3d-fg-muted); line-height: 1.4; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-tech { grid-area: tech; font-size: 0.74rem; color: var(--3d-fg-dim); font-family: var(--3d-font-mono); margin-top: 0.3rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-arrow { grid-area: arrow; font-size: 1.05rem; color: var(--3d-fg-muted); transition: transform 0.3s var(--3d-ease-out), color 0.3s var(--3d-ease); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row:hover .work-arrow { color: var(--3d-accent); transform: translate(2px, -2px); } @media (max-width: 760px) { :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row { padding: 1rem 1rem 0.95rem; column-gap: 0.7rem; } } /* Private/internal apps — same card look but no link affordance */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row-private { cursor: default; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row-private:hover { transform: none; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row-private::before { display: none; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row-private .work-arrow { font-size: 0.85rem; color: var(--3d-fg-dim) !important; filter: grayscale(0.4); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row-private:hover .work-arrow { transform: none; color: var(--3d-fg-dim) !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row-private::after { content: "PRIVATNO · INTERNO"; position: absolute; top: 0.5rem; right: 0.6rem; font-family: var(--3d-font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--3d-fg-dim); background: rgba(0, 0, 0, 0.45); border: 1px solid var(--3d-stroke); border-radius: 3px; padding: 0.15rem 0.4rem; pointer-events: none; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-demo-tag { font-family: var(--3d-font-mono); font-size: 0.58em; font-weight: 600; letter-spacing: 0.06em; color: #facc15; background: rgba(250, 204, 21, 0.10); border: 1px solid rgba(250, 204, 21, 0.32); padding: 0.1em 0.5em; border-radius: 4px; margin-left: 0.45em; vertical-align: 0.18em; white-space: nowrap; text-transform: lowercase; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-wip-tag { font-family: var(--3d-font-mono); font-size: 0.58em; font-weight: 600; letter-spacing: 0.06em; color: #22d3ee; background: rgba(34, 211, 238, 0.10); border: 1px solid rgba(34, 211, 238, 0.32); padding: 0.1em 0.5em; border-radius: 4px; margin-left: 0.45em; vertical-align: 0.18em; white-space: nowrap; text-transform: lowercase; } /* Work hover preview floating card */ .work-preview { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9000; width: 320px; aspect-ratio: 16 / 10; border-radius: 1rem; overflow: hidden; background: #0c0e14; border: 1px solid var(--3d-stroke-hi); box-shadow: 0 30px 80px rgba(0,0,0,0.5); opacity: 0; transform: translate(0, 0) scale(0.92); transition: opacity 0.3s var(--3d-ease), scale 0.5s var(--3d-ease-out); will-change: transform; } .work-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .work-preview.visible { opacity: 1; scale: 1; } @media (max-width: 760px) { .work-preview { display: none !important; } } /* ====== Approach ====== */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .approach-list { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .approach-list li { position: relative; background: var(--3d-bg-card); border: 1px solid var(--3d-stroke); border-radius: 8px; padding: 2rem 1.6rem 1.5rem; backdrop-filter: blur(14px); transition: background 0.3s var(--3d-ease), border-color 0.3s var(--3d-ease), transform 0.3s var(--3d-ease-out); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .approach-list li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--3d-accent); border-radius: 8px 0 0 8px; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .approach-list li:hover { background: var(--3d-bg-card-hi); border-color: var(--3d-stroke-hi); transform: translateY(-2px); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .approach-num { font-family: var(--3d-font-mono); font-size: 0.74rem; letter-spacing: 0.12em; color: var(--3d-accent); margin-bottom: 0.85rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .approach-list h3 { font-family: var(--3d-font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.55rem; color: var(--3d-fg) !important; line-height: 1.25; padding-bottom: 0.08em; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .approach-list p { font-family: var(--3d-font-body); font-size: 0.96rem; line-height: 1.55; color: var(--3d-fg-muted) !important; margin: 0; } /* ====== Process — 5 step grid ====== */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 3rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .process-step { position: relative; background: var(--3d-bg-card); border: 1px solid var(--3d-stroke); border-radius: 8px; padding: 1.5rem 1.4rem 1.35rem; backdrop-filter: blur(14px); transition: background 0.3s var(--3d-ease), border-color 0.3s var(--3d-ease), transform 0.3s var(--3d-ease-out); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .process-step:hover { background: var(--3d-bg-card-hi); border-color: var(--3d-stroke-hi); transform: translateY(-2px); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .process-num { font-family: var(--3d-font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--3d-accent); margin-bottom: 0.8rem; display: inline-block; padding: 0.15rem 0.5rem; border: 1px solid var(--3d-stroke-hi); border-radius: 4px; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .process-step h3 { font-family: var(--3d-font-display); font-size: 1.18rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.4rem; color: var(--3d-fg) !important; line-height: 1.3; padding-bottom: 0.06em; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .process-step p { font-family: var(--3d-font-body); font-size: 0.94rem; line-height: 1.5; color: var(--3d-fg-muted) !important; margin: 0; } /* ====== Testimonials — 3 quote cards ====== */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .testimonial-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; margin-top: 3rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .testimonial { position: relative; background: var(--3d-bg-card); border: 1px solid var(--3d-stroke); border-radius: 8px; padding: 1.85rem 1.6rem 1.35rem; backdrop-filter: blur(14px); margin: 0; transition: background 0.3s var(--3d-ease), border-color 0.3s var(--3d-ease), transform 0.3s var(--3d-ease-out); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .testimonial::before { content: "“"; position: absolute; top: -0.2rem; left: 1rem; font-size: 3.5rem; line-height: 1; color: var(--3d-accent); opacity: 0.4; font-family: var(--3d-font-display); font-weight: 700; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .testimonial:hover { background: var(--3d-bg-card-hi); border-color: var(--3d-stroke-hi); transform: translateY(-2px); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .testimonial p { font-family: var(--3d-font-body); font-size: 1rem; line-height: 1.6; color: var(--3d-fg) !important; margin: 0 0 1rem; padding-bottom: 0.06em; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .testimonial footer { font-family: var(--3d-font-mono); font-size: 0.78rem; color: var(--3d-fg-dim) !important; letter-spacing: 0.04em; text-transform: uppercase; } /* ====== Contact ====== */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 3rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-card { position: relative; display: flex; flex-direction: column; gap: 0.3rem; background: var(--3d-bg-card); border: 1px solid var(--3d-stroke); border-radius: 8px; padding: 1.4rem 1.25rem; text-decoration: none; color: var(--3d-fg); backdrop-filter: blur(14px); transition: background 0.3s var(--3d-ease), border-color 0.3s var(--3d-ease), transform 0.3s var(--3d-ease-out); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-card:hover { background: var(--3d-bg-card-hi); border-color: var(--3d-accent); transform: translateY(-2px); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--3d-accent-soft); color: var(--3d-accent); font-size: 0.9rem; margin-bottom: 0.55rem; transition: background 0.3s var(--3d-ease); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-card:hover .contact-icon { background: rgba(110, 168, 255, 0.32); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-label { font-family: var(--3d-font-mono); font-size: 0.7rem; color: var(--3d-fg-dim); letter-spacing: 0.08em; text-transform: uppercase; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-value { font-family: var(--3d-font-body); font-size: 0.98rem; color: var(--3d-fg); font-weight: 500; word-break: break-word; } /* ====== Stagger reveal (fallback if no scrub) ====== */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) [data-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--3d-ease-out), transform 0.9s var(--3d-ease-out); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter.in-view [data-stagger] > * { opacity: 1; transform: translateY(0); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter.in-view [data-stagger] > *:nth-child(1) { transition-delay: 100ms; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter.in-view [data-stagger] > *:nth-child(2) { transition-delay: 180ms; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter.in-view [data-stagger] > *:nth-child(3) { transition-delay: 260ms; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter.in-view [data-stagger] > *:nth-child(4) { transition-delay: 340ms; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter.in-view [data-stagger] > *:nth-child(5) { transition-delay: 420ms; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter.in-view [data-stagger] > *:nth-child(6) { transition-delay: 500ms; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter.in-view [data-stagger] > *:nth-child(n+7) { transition-delay: 580ms; } /* ====== Chapter dot navigation ====== */ .chapter-nav { position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.6rem; z-index: 50; pointer-events: auto; } .chapter-dot { background: transparent; border: 0; padding: 0.35rem 0.45rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.6rem; color: var(--3d-fg-dim); transition: color 0.3s var(--3d-ease); } .chapter-dot-pin { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.32); transition: background 0.3s var(--3d-ease), transform 0.3s var(--3d-ease); } .chapter-dot-label { font-size: 0.74rem; letter-spacing: 0.06em; opacity: 0; transform: translateX(6px); transition: opacity 0.3s var(--3d-ease), transform 0.3s var(--3d-ease); } .chapter-dot:hover .chapter-dot-label, .chapter-dot.active .chapter-dot-label { opacity: 1; transform: translateX(0); } .chapter-dot.active { color: var(--3d-fg); } .chapter-dot.active .chapter-dot-pin { background: var(--3d-accent); transform: scale(1.5); } @media (max-width: 760px) { .chapter-nav { right: 0.6rem; } .chapter-dot-label { display: none; } } /* ====== Floating quick-actions (bottom right) ====== */ .float-actions { position: fixed; right: 1.6rem; bottom: 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; z-index: 60; } .float-btn { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1.35rem; color: #fff; box-shadow: 0 12px 36px rgba(0,0,0,0.5); transition: background 0.3s var(--3d-ease), box-shadow 0.4s var(--3d-ease-out); will-change: transform; } .float-btn-call { background: var(--3d-accent); } .float-btn-call:hover { background: #1f8fff; box-shadow: 0 16px 48px rgba(10, 132, 255, 0.6); } .float-btn-wa { background: #25d366; } .float-btn-wa:hover { background: #1faa55; box-shadow: 0 16px 48px rgba(37, 211, 102, 0.5); } @media (max-width: 760px) { .float-actions { right: 1rem; bottom: 1rem; gap: 0.5rem; } .float-btn { width: 50px; height: 50px; font-size: 1.2rem; } } /* Language switch is instant — no animation, no toast. */ .lang-toast { display: none !important; } /* ====== Footer — modernized for index story page ====== */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer { position: relative; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 30%, #000 100%) !important; border-top: 1px solid var(--3d-stroke); color: var(--3d-fg-muted); padding: 5rem 1.5rem 2rem; z-index: 2; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer * { color: inherit; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-content { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; align-items: start; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-section { display: flex; flex-direction: column; gap: 1rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-logo { margin-bottom: 0.5rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-logo-link { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-logo-img { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); padding: 4px; border: 1px solid var(--3d-stroke); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer h3, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer h4 { color: var(--3d-fg) !important; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; margin: 0; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-section p { font-size: 0.92rem; line-height: 1.6; color: var(--3d-fg-muted); margin: 0; max-width: 32rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-social { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--3d-stroke); background: rgba(255, 255, 255, 0.025); color: var(--3d-fg) !important; text-decoration: none; transition: transform 0.4s var(--3d-ease-out), border-color 0.3s var(--3d-ease), background 0.3s var(--3d-ease), color 0.3s var(--3d-ease); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-social a:hover { transform: translateY(-3px); border-color: var(--3d-accent); background: var(--3d-accent-soft); color: var(--3d-accent) !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-links a { color: var(--3d-fg-muted) !important; text-decoration: none; font-size: 0.94rem; transition: color 0.3s var(--3d-ease), padding-left 0.3s var(--3d-ease); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-links a:hover { color: var(--3d-fg) !important; padding-left: 0.4rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-contact { display: flex; flex-direction: column; gap: 0.55rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-info-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: var(--3d-fg-muted); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-info-item i { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--3d-accent-soft); color: var(--3d-accent); font-size: 0.85rem; flex-shrink: 0; } /* Footer bottom — minimalist, centered, monospace tech-strip */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-bottom { max-width: 72rem; margin: 3.5rem auto 0; padding-top: 2rem; border-top: 1px solid var(--3d-stroke); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-bottom-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-bottom p { font-family: var(--3d-font-mono, "Geist Mono", monospace); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--3d-fg-dim); margin: 0; line-height: 1.6; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-copyright-link { color: var(--3d-fg) !important; text-decoration: none; font-weight: 500; letter-spacing: 0.18em; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-copyright-link:hover { color: var(--3d-accent) !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-bottom-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0; font-family: var(--3d-font-mono, "Geist Mono", monospace); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-bottom-links > * { position: relative; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-bottom-links > * + *::before { content: "·"; display: inline-block; margin: 0 0.85rem; color: var(--3d-stroke-hi); opacity: 0.7; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-bottom-links a, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-bottom-links button.legal-trigger { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--3d-fg-dim) !important; text-decoration: none; background: none; border: 0; padding: 0.15rem 0; font-family: inherit; cursor: pointer; margin: 0 !important; opacity: 1 !important; transition: color 0.25s var(--3d-ease); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-bottom-links a:hover, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-bottom-links button.legal-trigger:hover { color: var(--3d-fg) !important; } @media (max-width: 760px) { :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer { padding: 3.5rem 1.25rem 1.5rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-content { grid-template-columns: 1fr; gap: 2rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-bottom-content { flex-direction: column; text-align: center; } } /* ====== Hide stale common.css scaffolding ====== NOTE: removed `.hero-grid` from this list — that class is reused for the new hero split-layout. Common.css's old `.hero-grid` is fine to leave alone since `.chapter-hero .chapter-inner.hero-split` overrides it. */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-particles, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-image, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-image-overlay, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .skills-section, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .about-snippet, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .services-intro, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .cta-section, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .projects-section { display: none !important; } /* Floating call button — circular, bigger phone icon, brand-blue glow */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .floating-call-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 0; position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90; width: 60px; height: 60px; padding: 0; background: var(--3d-accent); color: #0a0d14; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; text-decoration: none; /* Subtle accent-blue glow (no green) + outer halo ring */ box-shadow: 0 12px 30px -8px rgba(110,168,255,0.55), 0 0 0 4px rgba(110,168,255,0.10); transition: transform 0.25s var(--3d-ease), box-shadow 0.25s var(--3d-ease), filter 0.25s var(--3d-ease); backdrop-filter: blur(6px); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .floating-call-btn:hover { transform: translateY(-2px) scale(1.05); background: #8bb8ff; box-shadow: 0 18px 38px -8px rgba(110,168,255,0.75), 0 0 0 6px rgba(110,168,255,0.15); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .floating-call-btn::before { display: none; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .floating-call-btn i { font-size: 1.45rem; line-height: 1; animation: floating-call-pulse 2.4s ease-in-out infinite; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .floating-call-btn .floating-call-text { display: none !important; } @keyframes floating-call-pulse { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } } @media (max-width: 600px) { :is(body[data-page="index"], body[data-page^="aplikacija-"]) .floating-call-btn { right: 1rem; bottom: 1rem; width: 54px; height: 54px; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .floating-call-btn i { font-size: 1.3rem; } } /* ============================================================================ ============== MOBILE NAV DRAWER — ELEGANT 3D-THEME REDESIGN ============== ============================================================================ z-index 9500 sits above lang-banner (9100) and cookie-banner (9000). Background uses brand-gradient with subtle accent-tinted glass surface and 28px backdrop-blur for elegance. Solid bottom layer (#08090d at 0.98 alpha) prevents bleed-through while preserving the premium feel. ──────────────────────────────────────────────────────────────────────── */ /* Wrapper — slim premium drawer with brand-aligned typography */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu { position: fixed !important; top: 0 !important; right: 0 !important; width: 100% !important; max-width: min(420px, 100vw) !important; height: 100vh !important; height: 100dvh !important; /* Closed: slide off to the right */ transform: translateX(100%) !important; /* Brand glass surface: deep navy → near-black gradient with subtle accent tint at top. Combined with the dark backdrop-filter blur this gives the drawer a frosted-premium look while staying fully readable. */ background-color: rgba(8, 9, 14, 0.92) !important; background-image: radial-gradient(120% 60% at 100% 0%, rgba(110, 168, 255, 0.10), transparent 55%), linear-gradient(180deg, rgba(14, 18, 28, 0.97) 0%, rgba(10, 13, 20, 0.98) 50%, rgba(6, 8, 12, 0.99) 100%) !important; /* Accent-tinted left border + soft outer halo for depth */ border-left: 1px solid var(--3d-stroke-hi) !important; box-shadow: -24px 0 80px rgba(0, 0, 0, 0.65), -1px 0 0 rgba(110, 168, 255, 0.12), inset 1px 0 0 rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(28px) saturate(160%) !important; -webkit-backdrop-filter: blur(28px) saturate(160%) !important; isolation: isolate !important; transition: transform 0.42s cubic-bezier(.2, .85, .2, 1) !important; z-index: 9500 !important; overflow-y: auto !important; overflow-x: hidden !important; display: flex !important; flex-direction: column !important; padding: 1.5rem 1.5rem 1.75rem !important; inset: 0 0 0 auto !important; } /* Decorative accent line — runs vertically along the left edge inside the drawer to add a brand-color cue without screaming */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu::after { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: linear-gradient(180deg, transparent 0%, rgba(110, 168, 255, 0.45) 50%, transparent 100%); pointer-events: none; z-index: 1; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu.active, :is(body[data-page="index"], body[data-page^="aplikacija-"]).menu-open .nav-menu { transform: translateX(0) !important; right: 0 !important; } /* Brand area — CENTERED column: photo on top, name + status stacked beneath. Reads as a clean profile-card header. */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-brand { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 0.6rem !important; padding: 0.5rem 0.25rem 1.5rem !important; margin-bottom: 1rem !important; border-bottom: 1px solid var(--3d-stroke) !important; position: relative !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-brand img { width: 64px !important; height: 64px !important; border-radius: 50% !important; border: 2px solid rgba(110, 168, 255, 0.4) !important; box-shadow: 0 0 0 4px rgba(110, 168, 255, 0.10), 0 8px 20px rgba(0, 0, 0, 0.4) !important; object-fit: cover !important; flex: 0 0 auto !important; margin: 0 auto !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-brand-text { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1.2 !important; width: 100% !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-brand-name { font-family: var(--3d-font-display) !important; font-weight: 600 !important; font-size: 1.125rem !important; color: var(--3d-fg) !important; letter-spacing: -0.015em !important; text-align: center !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-brand-status { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; margin-top: 0.35rem !important; font-family: var(--3d-font-mono) !important; font-size: 0.65rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--3d-fg-dim) !important; text-align: center !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-brand-status::before { content: "" !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #4ade80 !important; box-shadow: 0 0 8px rgba(74, 222, 128, 0.6) !important; animation: nav-brand-pulse 2s ease-in-out infinite !important; } @keyframes nav-brand-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.9); } } /* Close button — top-right of drawer, rotates on hover */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-close { position: absolute !important; top: 1rem !important; right: 1rem !important; width: 42px !important; height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--3d-stroke-hi) !important; border-radius: 50% !important; color: var(--3d-fg-muted) !important; cursor: pointer !important; z-index: 10 !important; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(.2, .85, .2, 1) !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-close svg { width: 16px !important; height: 16px !important; display: block !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-close:hover, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-close:focus-visible { background: rgba(110, 168, 255, 0.14) !important; border-color: rgba(110, 168, 255, 0.55) !important; color: var(--3d-accent) !important; transform: rotate(90deg) !important; outline: none !important; } /* Nav list — CENTERED column. Items still take full width so the hover accent gradient can sweep edge-to-edge, but icon + label inside each item are horizontally centered. */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-list { display: flex !important; flex-direction: column !important; gap: 0.2rem !important; list-style: none !important; padding: 0 !important; margin: 0 auto !important; align-items: stretch !important; width: 100% !important; text-align: center !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-item { width: 100% !important; /* Stagger entry animation — items enter from the right with delay */ opacity: 0; transform: translateX(16px); transition: opacity 0.4s var(--3d-ease-out, ease), transform 0.4s var(--3d-ease-out, ease); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu.active .nav-item, :is(body[data-page="index"], body[data-page^="aplikacija-"]).menu-open .nav-menu .nav-item { opacity: 1; transform: translateX(0); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu.active .nav-item:nth-child(1) { transition-delay: 0.10s; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu.active .nav-item:nth-child(2) { transition-delay: 0.16s; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu.active .nav-item:nth-child(3) { transition-delay: 0.22s; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu.active .nav-item:nth-child(4) { transition-delay: 0.28s; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu.active .nav-item:nth-child(5) { transition-delay: 0.34s; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu.active .nav-item:nth-child(6) { transition-delay: 0.40s; } /* Nav link — pill style with subtle gradient hover, CENTERED content */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-link { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 0.7rem !important; width: 100% !important; padding: 0.95rem 1rem !important; border-radius: 10px !important; font-family: var(--3d-font-display) !important; font-size: 1.05rem !important; font-weight: 500 !important; letter-spacing: -0.005em !important; color: var(--3d-fg-muted) !important; text-decoration: none !important; background: transparent !important; border: 1px solid transparent !important; overflow: hidden !important; transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.18s ease !important; } /* Hover/active glow — accent gradient sweeps in from the left */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-link::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(110, 168, 255, 0.18) 0%, rgba(110, 168, 255, 0.06) 50%, transparent 100%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: -1; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-link i { display: inline-flex !important; width: 26px !important; height: 26px !important; align-items: center !important; justify-content: center !important; font-size: 1.02rem !important; color: var(--3d-accent) !important; flex: 0 0 auto !important; transition: transform 0.25s ease, filter 0.25s ease !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-link:hover, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-link:focus-visible { color: var(--3d-fg) !important; border-color: rgba(110, 168, 255, 0.22) !important; outline: none !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-link:hover::before, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-link:focus-visible::before { opacity: 1; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-link:hover i { transform: scale(1.1) !important; filter: drop-shadow(0 0 6px rgba(110, 168, 255, 0.5)) !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-link.active { color: var(--3d-fg) !important; background: linear-gradient(90deg, rgba(110, 168, 255, 0.18) 0%, rgba(110, 168, 255, 0.04) 100%) !important; border-color: rgba(110, 168, 255, 0.32) !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-link.active i { filter: drop-shadow(0 0 8px rgba(110, 168, 255, 0.7)) !important; } /* Bottom: Contact CTA + mobile controls */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-cta { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.6rem !important; margin: 1.5rem 0 0 !important; padding: 0.9rem 1.2rem !important; background: linear-gradient(135deg, var(--3d-accent) 0%, #5e9bff 100%) !important; color: #06080e !important; font-family: var(--3d-font-display) !important; font-weight: 600 !important; font-size: 0.95rem !important; letter-spacing: -0.005em !important; text-decoration: none !important; border-radius: 12px !important; border: 1px solid rgba(110, 168, 255, 0.6) !important; box-shadow: 0 8px 24px -6px rgba(110, 168, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-cta:hover, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-cta:focus-visible { transform: translateY(-1px) !important; filter: brightness(1.07) !important; box-shadow: 0 12px 30px -6px rgba(110, 168, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; outline: none !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .nav-menu-cta i { font-size: 1rem !important; } /* Mobile controls (Tema / Jezik) */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .mobile-controls { margin-top: auto !important; padding-top: 1.25rem !important; border-top: 1px solid var(--3d-stroke) !important; display: flex !important; flex-direction: row !important; gap: 0.55rem !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .mobile-controls > button, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .mobile-theme-toggle, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .mobile-lang-toggle { flex: 1 1 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 0.75rem 0.9rem !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--3d-stroke-hi) !important; border-radius: 10px !important; color: var(--3d-fg-muted) !important; font-family: var(--3d-font-mono) !important; font-size: 0.74rem !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; cursor: pointer !important; transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.18s ease !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .mobile-controls > button i, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .mobile-theme-toggle i, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .mobile-lang-toggle i { font-size: 0.95rem !important; color: var(--3d-accent) !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .mobile-theme-toggle:hover, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu .mobile-lang-toggle:hover { background: rgba(110, 168, 255, 0.10) !important; border-color: rgba(110, 168, 255, 0.4) !important; color: var(--3d-fg) !important; transform: translateY(-1px) !important; } /* Backdrop scrim — frosted overlay that dims the underlying page */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu.active::before, :is(body[data-page="index"], body[data-page^="aplikacija-"]).menu-open .nav-menu::before { content: ""; position: fixed; inset: 0; background: radial-gradient(60% 50% at 0% 100%, rgba(110, 168, 255, 0.06), transparent 70%), rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); z-index: -1; pointer-events: auto; animation: nav-scrim-in 0.32s ease both; } @keyframes nav-scrim-in { from { opacity: 0; } to { opacity: 1; } } /* Scrollbar styling inside the drawer (Webkit) */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu::-webkit-scrollbar { width: 4px; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu::-webkit-scrollbar-track { background: transparent; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .nav-menu::-webkit-scrollbar-thumb { background: rgba(110, 168, 255, 0.25); border-radius: 2px; } /* ====== Mobile nav OPEN state — hide overlapping overlays + lock scroll ====== When the drawer is open we hide every fixed floating UI (cookie banner, language banner, chapter dot-nav, floating call button) so they can't peek through or cover the menu. Body scroll is locked so the page behind doesn't move while the user is interacting with the drawer. Selectors are scoped to :root (html) because lang-banner, cookie-banner, float-actions and floating-call-btn get RELOCATED to at runtime (by /includes/footer.php and src/main.js#relocateFixedOverlaysToHtml) so they escape Lenis's body transform. A `body.menu-open .X` selector would never match them after relocation — they're not body descendants anymore. We trigger on EITHER body.menu-open (set by common.js/storytelling.js) OR :has(.nav-menu.active) — so even if the two systems race and the body class flickers, the panel state still wins. */ :root:has(body.menu-open) .lang-banner, :root:has(body.menu-open) .cookie-banner, :root:has(body.menu-open) .chapter-nav, :root:has(body.menu-open) .float-actions, :root:has(body.menu-open) .floating-call-btn, :root:has(.nav-menu.active) .lang-banner, :root:has(.nav-menu.active) .cookie-banner, :root:has(.nav-menu.active) .chapter-nav, :root:has(.nav-menu.active) .float-actions, :root:has(.nav-menu.active) .floating-call-btn { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.18s ease, visibility 0s linear 0.18s !important; } /* Scroll lock — applied to HTML only, NOT body. Applying overflow:hidden to body breaks the position:sticky context of

(it no longer pins to top:0 because body is no longer the scroll container). Keeping the lock at html level prevents page scroll while preserving sticky header. touch-action on html prevents iOS rubber-band while the drawer is open. */ html:has(body.menu-open), html:has(.nav-menu.active) { overflow: hidden !important; touch-action: none !important; } /* Make the navbar fully transparent while the drawer is open so the slide-in animation reads clean (no darker stripe across the top). */ body.menu-open .navbar, body:has(.nav-menu.active) .navbar { background: transparent !important; border-bottom-color: transparent !important; } /* Hide navbar logo + nav-toggle (hamburger) once the drawer is open — the drawer already shows the brand block at the top and has its own X close button. Showing them both creates a "double logo" + "two close affordances" visual mess. We keep them clickable until the drawer is open, then fade. */ body.menu-open .nav-logo, body.menu-open .nav-toggle, body:has(.nav-menu.active) .nav-logo, body:has(.nav-menu.active) .nav-toggle { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.2s ease, visibility 0s linear 0.2s !important; } /* Hamburger toggle must always be clickable, even when the lang/cookie banners are visible on first paint. Bumping it above z 9100/9000 ensures the user can always open the menu without dismissing a banner first. nav-toggle is inside .navbar (z 1000) so we hoist its stacking context via position:relative + isolation:isolate. */ body[data-page] .nav-toggle { position: relative !important; isolation: isolate !important; z-index: 9600 !important; } /* Same for the navbar logo so the user can always tap "home" */ body[data-page] .nav-logo { position: relative !important; z-index: 9600 !important; } /* Hamburger toggle is inside navbar — nothing to override here on desktop */ /* Footer-bottom legal links — match copyright text size */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .footer-bottom-links { font-size: 0.82rem !important; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .legal-trigger { font-size: 0.82rem !important; } /* ====== Landing pages (aplikacija-autostakla, etc.) reuse story styles ====== */ body[data-page^="aplikacija-"] { background: var(--3d-bg-deep); color: var(--3d-fg); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; } body[data-page^="aplikacija-"] .chapter { position: relative; z-index: 2; min-height: auto; padding: 5rem 1.5rem; } body[data-page^="aplikacija-"] .chapter-inner.app-inner { max-width: 72rem; margin: 0 auto; } body[data-page^="aplikacija-"] .hero-eyebrow, body[data-page^="aplikacija-"] .chapter-eyebrow { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--3d-fg-dim); margin-bottom: 1.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; display: inline-flex; align-items: center; gap: 0.55rem; } body[data-page^="aplikacija-"] .hero-eyebrow::before, body[data-page^="aplikacija-"] .chapter-eyebrow::before { content: "//"; color: var(--3d-accent-2); font-weight: 600; } body[data-page^="aplikacija-"] .hero-title, body[data-page^="aplikacija-"] .chapter-title { font-size: clamp(2rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.0; margin: 0 0 1.5rem; } body[data-page^="aplikacija-"] .hero-title .line.accent, body[data-page^="aplikacija-"] .chapter-title .line.accent { color: var(--3d-accent); } body[data-page^="aplikacija-"] .hero-title .line.muted, body[data-page^="aplikacija-"] .chapter-title .line.muted { color: var(--3d-fg-muted); } body[data-page^="aplikacija-"] .hero-lead, body[data-page^="aplikacija-"] .chapter-lead { font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--3d-fg-muted); max-width: 42rem; line-height: 1.55; margin: 0 0 2rem; } body[data-page^="aplikacija-"] .stats-grid, body[data-page^="aplikacija-"] .services-grid, body[data-page^="aplikacija-"] .contact-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; } body[data-page^="aplikacija-"] .stats-grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } body[data-page^="aplikacija-"] .services-grid { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } body[data-page^="aplikacija-"] .contact-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } body[data-page^="aplikacija-"] .stat, body[data-page^="aplikacija-"] .service-card, body[data-page^="aplikacija-"] .contact-card { background: var(--3d-bg-card); border: 1px solid var(--3d-stroke); border-radius: 1.25rem; padding: 1.75rem 1.5rem; backdrop-filter: blur(20px); } body[data-page^="aplikacija-"] .service-card h3 { color: var(--3d-fg) !important; margin: 0 0 0.4rem; font-size: 1.2rem; } body[data-page^="aplikacija-"] .service-card p { color: var(--3d-fg-muted) !important; margin: 0; font-size: 0.95rem; line-height: 1.5; } body[data-page^="aplikacija-"] .stat-num { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; } body[data-page^="aplikacija-"] .service-num { font-size: 0.8rem; letter-spacing: 0.1em; color: var(--3d-fg-dim); font-family: ui-monospace, monospace; margin-bottom: 0.85rem; } body[data-page^="aplikacija-"] .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: 980px; font-weight: 500; font-size: 0.96rem; text-decoration: none; cursor: pointer; border: 1px solid var(--3d-stroke); background: var(--3d-bg-card); color: var(--3d-fg) !important; transition: background 0.3s var(--3d-ease), border-color 0.3s var(--3d-ease); } body[data-page^="aplikacija-"] .btn-primary { background: var(--3d-accent); color: #fff !important; border-color: transparent; } body[data-page^="aplikacija-"] .hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; } body[data-page^="aplikacija-"] .contact-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--3d-accent-soft); color: var(--3d-accent); margin-bottom: 0.6rem; } body[data-page^="aplikacija-"] .contact-label { font-size: 0.78rem; color: var(--3d-fg-dim); letter-spacing: 0.1em; text-transform: uppercase; } body[data-page^="aplikacija-"] .contact-value { font-size: 1.05rem; color: var(--3d-fg); font-weight: 500; } /* ====== Reduced motion / Low-tier devices ====== */ html.reduced-motion #global-3d-canvas { display: none !important; } html.reduced-motion #global-3d-dim { display: none !important; } /* Solid dark gradient instead of WebGL — guaranteed smooth on every device */ html.reduced-motion :is(body[data-page="index"], body[data-page^="aplikacija-"]) { background: radial-gradient(80% 50% at 50% 0%, rgba(110, 168, 255, 0.06) 0%, transparent 60%), linear-gradient(180deg, #08090c 0%, #06070a 100%) !important; } html.reduced-motion :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-title .line, html.reduced-motion :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-title .line, html.reduced-motion :is(body[data-page="index"], body[data-page^="aplikacija-"]) .hero-lead, html.reduced-motion :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-lead, html.reduced-motion :is(body[data-page="index"], body[data-page^="aplikacija-"]) [data-stagger] > * { opacity: 1 !important; transform: none !important; } html.reduced-motion .preloader, html.reduced-motion .marquee-track { display: none !important; animation: none !important; } html.reduced-motion .cursor-dot, html.reduced-motion .cursor-ring { display: none !important; } /* ====== Center all non-hero chapters ====== */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter:not(.chapter-hero) > .chapter-inner { text-align: center; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter:not(.chapter-hero) .chapter-lead { margin-left: auto; margin-right: auto; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter:not(.chapter-hero) .service-card, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter:not(.chapter-hero) .stat, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter:not(.chapter-hero) .process-step, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter:not(.chapter-hero) .contact-card { text-align: center; display: flex; flex-direction: column; align-items: center; } /* Work-categories list stays left-aligned (data table feel) */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-categories, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-category, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-list, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-row, :is(body[data-page="index"], body[data-page^="aplikacija-"]) .work-category-title { text-align: left; } /* ====== Contact form — glass card matching site aesthetic ====== */ :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form { display: flex; flex-direction: column; gap: 1.15rem; max-width: 38rem; width: 100%; margin: 2.5rem auto 1.5rem; text-align: left; background: var(--3d-bg-card); border: 1px solid var(--3d-stroke); border-radius: 1.5rem; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 2.25rem 2rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form .form-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; width: 100%; } @media (max-width: 540px) { :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form .form-row { grid-template-columns: 1fr; } } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form .form-field { display: flex !important; flex-direction: column !important; gap: 0.45rem; text-align: left; align-items: stretch; width: auto; min-width: 0; position: static; margin: 0; padding: 0; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form .form-label { font-family: var(--3d-font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--3d-fg-dim); display: inline-flex; align-items: center; gap: 0.35rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form .form-label::before { content: "//"; color: var(--3d-accent-2); font-weight: 600; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form .form-input { background: rgba(8, 9, 12, 0.6); border: 1px solid var(--3d-stroke); border-radius: 0.85rem; padding: 0.78rem 0.95rem; color: var(--3d-fg); font-family: inherit; font-size: 0.95rem; line-height: 1.4; width: 100%; text-align: left; transition: border-color 0.2s var(--3d-ease), background 0.2s var(--3d-ease), box-shadow 0.2s var(--3d-ease); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form .form-input::placeholder { color: var(--3d-fg-dim); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form .form-input:hover { border-color: var(--3d-stroke-hi); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form .form-input:focus { outline: none; border-color: var(--3d-accent); background: rgba(8, 9, 12, 0.8); box-shadow: 0 0 0 3px var(--3d-accent-soft); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form select.form-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.95rem center; background-color: rgba(8, 9, 12, 0.6); padding-right: 2.4rem; cursor: pointer; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form select.form-input option { background: #0d0f14; color: var(--3d-fg); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form textarea.form-input { resize: vertical; min-height: 6rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form .form-submit { align-self: center; margin-top: 0.5rem; padding: 1rem 2.25rem; font-size: 1rem; letter-spacing: 0.01em; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form .form-submit i { margin-right: 0.15rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .form-status { font-size: 0.92rem; margin-top: 0.25rem; padding: 0.85rem 1.1rem; border-radius: 0.85rem; border: 1px solid transparent; text-align: center; display: none; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .form-status.is-visible { display: block; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .form-status-ok { color: #6ee7b7; background: rgba(110, 231, 183, 0.08); border-color: rgba(110, 231, 183, 0.28); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .form-status-err { color: #fca5a5; background: rgba(252, 165, 165, 0.08); border-color: rgba(252, 165, 165, 0.28); } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-divider { width: 100%; max-width: 46rem; height: 1px; background: var(--3d-stroke); margin: 3rem auto 1.5rem; } :is(body[data-page="index"], body[data-page^="aplikacija-"]) .chapter-divider-label { font-family: var(--3d-font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--3d-fg-dim); margin: 0 auto 1.5rem; text-align: center; } @media (max-width: 700px) { :is(body[data-page="index"], body[data-page^="aplikacija-"]) .contact-form { padding: 1.5rem 1.25rem; gap: 1rem; } } /* ====== Legal modals — native