*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --orange: #f97316; --orange-dark: #ea6c0a; --accent-rgb: 249, 115, 22; } /* Plava tema (Fitovision) — primjenjuje se na ; sve isto, samo plavo */ body.theme-blue { --orange: #2563eb; --orange-dark: #1d4ed8; --accent-rgb: 37, 99, 235; } body.theme-blue #progress { background: linear-gradient(90deg, var(--orange), #60a5fa); } body.theme-blue .btn-primary { color: #fff; } /* Amber "warn" točka u prikazu vrata → plava, da nema narančaste na plavoj temi */ body.theme-blue .door-dot.warn { background:#60a5fa; box-shadow:0 0 8px rgba(96,165,250,0.6); } /* Topli tamni gradijenti (CTA, istaknute kartice) → tamno-plavi umjesto narančasto-smeđih */ body.theme-blue .cta-inner { background:linear-gradient(135deg,#111 0%,#0b1426 100%); } body.theme-blue .price-card.featured { background:linear-gradient(160deg,#0c1426 0%,var(--card-dark) 60%); } body.theme-blue .product-card.featured { background:linear-gradient(145deg,#141414 0%,#0b1426 100%); } :root { --bg-dark: #0a0b0f; --bg-light: #f4f4f2; --surface-dark: #0f0f0f; --surface-light: #eaeae8; --card-dark: #131313; --card-hover: #181818; --card-light: #ffffff; --border-dark: #1e1e1e; --border-light-c: #e0e0de; --text-dark: #efefef; --text-light: #111111; --muted-dark: #8a8a8a; --muted-light-c: #888; } html { scroll-behavior: smooth; overflow-x: clip; } section { scroll-margin-top: 80px; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg-dark); color: var(--text-dark); line-height: 1.6; overflow-x: clip; cursor: none; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #000; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--orange); } /* ── SCROLL PROGRESS ── */ #progress { position: fixed; top: 0; left: 0; height: 2px; z-index: 9999; background: linear-gradient(90deg, var(--orange), #fbbf24); width: 0%; transition: width 0.1s linear; box-shadow: 0 0 8px rgba(var(--accent-rgb),0.6); } /* ── CURSOR ── */ #cur { position:fixed; width:8px; height:8px; background:var(--orange); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:transform 0.15s, background 0.3s; opacity:0; } #cur-ring { position:fixed; width:32px; height:32px; border:1.5px solid rgba(var(--accent-rgb),0.5); border-radius:50%; pointer-events:none; z-index:9997; transform:translate(-50%,-50%); transition:width 0.3s, height 0.3s, border-color 0.3s, background 0.3s; opacity:0; } .cur-trail { position:fixed; width:5px; height:5px; background:rgba(var(--accent-rgb),0.25); border-radius:50%; pointer-events:none; z-index:9996; transform:translate(-50%,-50%); } /* ── NAV ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.5rem,5vw,4rem); background: rgba(6,6,6,0.8); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(255,255,255,0.06); transition: background 0.5s, border-color 0.5s; } nav.nav-light { background: rgba(244,244,242,0.88); border-bottom-color: rgba(0,0,0,0.08); } .nav-logo { display:inline-flex; align-items:center; text-decoration:none; cursor:none; } .nav-logo img { height:28px; width:auto; display:block; transition:filter 0.5s; } nav.nav-light .nav-logo img { filter:brightness(0); } .nav-links { display:flex; align-items:center; gap:2rem; } .nav-links a:not(.btn) { text-decoration:none; color:#666; font-size:0.875rem; font-weight:500; transition:color 0.3s; cursor:none; } .nav-links a:not(.btn):hover { color: var(--text-dark); } nav.nav-light .nav-links a:not(.btn) { color: #888; } nav.nav-light .nav-links a:not(.btn):hover { color: var(--text-light); } /* ── BURGER + MOBILNI MENI ── */ #nav-burger { display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:none; padding:10px; cursor:pointer; } #nav-burger span { display:block; width:22px; height:2px; background:var(--text-dark); border-radius:2px; transition:transform 0.3s, opacity 0.3s, background 0.5s; } nav.nav-light #nav-burger span { background:var(--text-light); } #nav-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } #nav-burger.open span:nth-child(2) { opacity:0; } #nav-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } #nav-mobile { position:fixed; top:68px; left:0; right:0; z-index:999; background:rgba(6,6,6,0.97); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; padding:0.75rem 1.5rem 1.5rem; transform:translateY(-110%); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); visibility:hidden; } #nav-mobile.open { transform:translateY(0); visibility:visible; } #nav-mobile a:not(.btn) { text-decoration:none; color:#999; font-size:1rem; font-weight:500; padding:0.85rem 0; border-bottom:1px solid #1a1a1a; } #nav-mobile a:not(.btn):active { color:var(--orange); } #nav-mobile .btn { margin-top:1.1rem; justify-content:center; } .btn { display:inline-flex; align-items:center; gap:0.45rem; text-decoration:none; font-family:inherit; font-weight:600; cursor:none; border:none; transition:all 0.2s; white-space:nowrap; } .btn-primary { background:var(--orange); color:#000; padding:0.6rem 1.35rem; border-radius:8px; font-size:0.875rem; } .btn-primary:hover { background:var(--orange-dark); color:#fff; transform:translateY(-1px); box-shadow:0 0 30px rgba(var(--accent-rgb),0.3); } .btn-ghost-dark { background:transparent; color:#999; padding:0.6rem 1.35rem; border-radius:8px; font-size:0.875rem; border:1px solid #2a2a2a; } .btn-ghost-dark:hover { border-color:var(--orange); color:var(--orange); } .btn-ghost-light { background:transparent; color:#555; padding:0.6rem 1.35rem; border-radius:8px; font-size:0.875rem; border:1px solid #ccc; } .btn-ghost-light:hover { border-color:var(--orange); color:var(--orange); } .btn-lg { padding:0.85rem 2rem; font-size:1rem; border-radius:10px; } /* ── HERO (DARK) ── */ .hero { min-height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px clamp(1.5rem,5vw,4rem) 80px; position:relative; overflow:hidden; background: var(--bg-dark); } #hero-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .orb { position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; will-change:transform; } .orb-1 { width:700px; height:480px; background:radial-gradient(ellipse,rgba(var(--accent-rgb),0.13) 0%,transparent 70%); top:-100px; left:50%; transform:translateX(-50%); } .orb-2 { width:380px; height:380px; background:radial-gradient(ellipse,rgba(var(--accent-rgb),0.07) 0%,transparent 70%); top:5%; left:5%; } .orb-3 { width:320px; height:320px; background:radial-gradient(ellipse,rgba(var(--accent-rgb),0.07) 0%,transparent 70%); top:15%; right:5%; } .orb-4 { width:180px; height:180px; background:radial-gradient(ellipse,rgba(var(--accent-rgb),0.1) 0%,transparent 70%); bottom:25%; left:25%; filter:blur(50px); } .hero-fade { position:absolute; bottom:0; left:0; right:0; height:220px; background:linear-gradient(transparent,var(--bg-dark)); pointer-events:none; z-index:2; } .hero-content { position:relative; z-index:3; } .hero-badge { display:inline-flex; align-items:center; gap:0.6rem; background:rgba(var(--accent-rgb),0.06); border:1px solid rgba(var(--accent-rgb),0.18); color:var(--orange); font-size:0.75rem; font-weight:600; padding:0.35rem 1rem; border-radius:999px; margin-bottom:2rem; letter-spacing:0.8px; text-transform:uppercase; opacity:0; animation:fadeUp 0.7s 0.2s forwards; } .pulse-dot { width:6px; height:6px; border-radius:50%; background:var(--orange); animation:dotPulse 2s ease-in-out infinite; } @keyframes dotPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--accent-rgb),0.4)} 50%{opacity:0.6;box-shadow:0 0 0 6px rgba(var(--accent-rgb),0)} } .hero h1 { font-size:clamp(3rem,7.5vw,6rem); font-weight:900; line-height:1.02; letter-spacing:-3px; margin-bottom:1.5rem; } .hero h1 .line { display:block; overflow:hidden; padding-bottom:0.1em; margin-bottom:-0.1em; } .hero h1 .line-inner { display:block; transform:translateY(110%); animation:lineUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards; } .l1 .line-inner { animation-delay:0.4s; } .l2 .line-inner { animation-delay:0.55s; } .l3 .line-inner { animation-delay:0.7s; } @keyframes lineUp { to { transform:translateY(0); } } .accent { color:var(--orange); } .hero h1 .dim { color: rgba(239, 239, 239, 0.88); } .hero-sub { font-size:clamp(0.98rem,1.8vw,1.16rem); color:#8c8c8c; max-width:560px; margin:0 auto 2.5rem; line-height:1.78; opacity:0; animation:fadeUp 0.7s 0.85s forwards; } .hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:5rem; opacity:0; animation:fadeUp 0.7s 1s forwards; } .hero-stats { display:flex; gap:clamp(2.5rem,6vw,6rem); justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp 0.7s 1.15s forwards; } .stat-num { font-size:2.2rem; font-weight:900; letter-spacing:-1.5px; } .stat-num span { color:var(--orange); } .stat-label { font-size:0.75rem; color:#555; font-weight:500; margin-top:0.2rem; letter-spacing:0.3px; } @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } /* ── ANIME.JS PREUZIMA HERO (html.anim) ── Kad je anime.js aktivan, gasimo CSS ulazne keyframe-ove hero-a da ih anime.js vodi. Bez .anim (stari preglednik / reduced-motion / failsafe) hero se otkriva gornjim CSS animacijama. */ html.anim .hero h1 .line-inner { animation: none; } /* ostaje translateY(110%) dok anime.js ne krene */ html.anim .hero-badge, html.anim .hero-sub, html.anim .hero-actions { animation: none; } /* ostaju opacity:0 dok anime.js ne krene */ /* Kontejner statistike je vidljiv; anime.js uvodi pojedinačne .stat (djecu) */ html.anim .hero-stats { animation: none; opacity: 1; } /* Magnetni CTA gumbi (anime.js vodi translate) — glađi povratak i bolji rendering */ .hero-actions .btn, .cta-actions .btn { will-change: transform; } /* ── NAV: kondenzacija na scroll (anime.js sloj dodaje .nav-condensed) ── */ nav.nav-condensed { height: 58px; background: rgba(6,6,6,0.94); border-bottom-color: rgba(255,255,255,0.09); box-shadow: 0 10px 34px rgba(0,0,0,0.38); } nav.nav-condensed .nav-logo img { height: 25px; } nav { will-change: height, background; } /* ── PRODUCTS ── */ #products { background: var(--bg-dark); padding: clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); } #products .section-tag { color: var(--orange); } #products .section-tag::before { background: var(--orange); } #products .section-title { color: var(--text-dark); } #products .section-sub { color: var(--muted-dark); } #products .products-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3rem; gap:2rem; flex-wrap:wrap; } .products-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--border-dark); border:1px solid var(--border-dark); border-radius:18px; overflow:hidden; max-width:1200px; margin:0 auto; } .product-card { background:var(--card-dark); padding:2.25rem; display:flex; flex-direction:column; gap:1.1rem; transition:background 0.25s; position:relative; overflow:hidden; } .product-card::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(var(--accent-rgb),0.07) 0%, transparent 55%); opacity:0; transition:opacity 0.3s; pointer-events:none; } .product-card:hover::after { opacity:1; } .product-card:hover { background:var(--card-hover); } .product-card.featured { background:linear-gradient(145deg,#141414 0%,#1c0f04 100%); } .product-card.featured::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),0.5),transparent); } .product-card.soon { opacity:0.4; } .product-name { font-size:1.15rem; font-weight:700; letter-spacing:-0.3px; color:var(--text-dark); } .product-desc { font-size:0.85rem; color:var(--muted-dark); line-height:1.65; flex:1; } .product-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--surface-dark); border:1px solid var(--border-dark); color:#555; } .product-card.featured .product-icon { background:rgba(var(--accent-rgb),0.08); border-color:rgba(var(--accent-rgb),0.25); color:var(--orange); } .product-badge { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.7rem; font-weight:700; padding:0.22rem 0.7rem; border-radius:999px; width:fit-content; letter-spacing:0.3px; } .badge-live { background:rgba(34,197,94,0.08); color:#22c55e; border:1px solid rgba(34,197,94,0.2); } .badge-live::before { content:''; width:5px; height:5px; border-radius:50%; background:#22c55e; animation:dotPulse 2s infinite; } .badge-soon { background:var(--surface-dark); color:#555; border:1px solid var(--border-dark); } .badge-soon::before { content:''; width:5px; height:5px; border-radius:50%; background:#444; } .product-link { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.83rem; font-weight:600; color:var(--orange); text-decoration:none; transition:gap 0.2s; cursor:none; } .product-link:hover { gap:0.75rem; } /* Stretched link — cijela kartica je klikabilna preko nevidljivog sloja linka */ .product-card .product-link::before { content:''; position:absolute; inset:0; z-index:1; } .product-card:hover .product-link { gap:0.75rem; } /* ── FEATURES (DARK) ── */ #features { background: var(--bg-dark); padding: clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); } .features-inner { max-width:1200px; margin:0 auto; } .features-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; margin-top:4rem; } .feature-list { display:flex; flex-direction:column; gap:0.5rem; } .feature-item { display:flex; gap:1.25rem; align-items:flex-start; padding:1.35rem 1.25rem; border-radius:10px; border:1px solid transparent; transition:all 0.25s; } .feature-item:hover { background:#131313; border-color:#1e1e1e; transform:translateX(5px); } .feature-icon-wrap { width:36px; height:36px; border-radius:8px; background:rgba(var(--accent-rgb),0.07); border:1px solid rgba(var(--accent-rgb),0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--orange); } .feature-icon-wrap svg { width:16px; height:16px; } .feature-item h3 { font-size:0.9rem; font-weight:700; margin-bottom:0.3rem; color:var(--text-dark); } .feature-item p { font-size:0.83rem; color:#8a8a8a; line-height:1.6; } .features-visual { background:#131313; border:1px solid #1e1e1e; border-radius:16px; overflow:hidden; aspect-ratio:4/3; } .mock-screen { width:100%; height:100%; display:flex; flex-direction:column; } .mock-bar { height:38px; background:#0f0f0f; border-bottom:1px solid #1e1e1e; display:flex; align-items:center; padding:0 1rem; gap:0.45rem; } .mock-dot { width:9px; height:9px; border-radius:50%; } .mock-content { flex:1; padding:1.25rem; display:flex; flex-direction:column; gap:0.85rem; } .mock-row { display:flex; gap:0.85rem; } .mock-stat-card { flex:1; background:#0f0f0f; border:1px solid #1e1e1e; border-radius:8px; padding:0.85rem; } .mock-num { font-size:1.35rem; font-weight:800; color:var(--orange); margin-bottom:0.25rem; } .mock-green { color:#22c55e !important; } .mock-label { font-size:0.65rem; color:#555; } .mock-chart { flex:2; background:#0f0f0f; border:1px solid #1e1e1e; border-radius:8px; padding:0.85rem; display:flex; align-items:flex-end; gap:0.35rem; } .mock-bar-item { flex:1; border-radius:3px 3px 0 0; background:#262626; } .mock-bar-item.hi { background:var(--orange); } .mock-list { background:#0f0f0f; border:1px solid #1e1e1e; border-radius:8px; overflow:hidden; } .mock-list-row { display:flex; align-items:center; gap:0.65rem; padding:0.55rem 0.85rem; border-bottom:1px solid #1e1e1e; } .mock-list-row:last-child { border-bottom:none; } .mock-avatar { width:24px; height:24px; border-radius:50%; background:#262626; flex-shrink:0; } .mock-text { flex:1; } .mock-line { height:7px; border-radius:3px; background:#262626; margin-bottom:3px; } .mock-line.short { width:45%; } .mock-pill { font-size:0.6rem; font-weight:700; padding:0.18rem 0.45rem; border-radius:999px; background:rgba(34,197,94,0.1); color:#22c55e; flex-shrink:0; } /* ── VISIONGROUP EKOSUSTAV (konstelacija proizvoda — zamjena za generični mock) ── */ .vg-eco { width:100%; height:100%; display:flex; } .vg-eco svg { width:100%; height:100%; display:block; } .vg-line { stroke:rgba(255,255,255,0.09); stroke-width:1; fill:none; } .vg-line-active { stroke:rgba(var(--accent-rgb),0.45); stroke-width:1.4; fill:none; } .vg-pulse { fill:rgba(255,255,255,0.55); } .vg-pulse-active { fill:var(--orange); filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),0.9)); } .vg-node { fill:#161616; stroke:#333; stroke-width:1.5; } .vg-node-active { fill:rgba(var(--accent-rgb),0.14); stroke:var(--orange); stroke-width:2; filter:drop-shadow(0 0 9px rgba(var(--accent-rgb),0.45)); } .vg-ring { fill:none; stroke:var(--orange); stroke-width:1.2; } .vg-letter { fill:#8a8a8a; font-family:'Inter',sans-serif; font-size:13px; font-weight:800; text-anchor:middle; } .vg-letter-active { fill:var(--orange); } .vg-label { fill:#9a9a9a; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; text-anchor:middle; } .vg-label-active { fill:#efefef; } .vg-sub { fill:#22c55e; font-family:'Inter',sans-serif; font-size:7.5px; font-weight:700; text-anchor:middle; letter-spacing:0.6px; } .vg-sub-soon { fill:#5a5a5a; } .vg-core { fill:#141414; stroke:rgba(var(--accent-rgb),0.55); stroke-width:2; filter:drop-shadow(0 0 12px rgba(var(--accent-rgb),0.4)); } .vg-core-ring { fill:none; stroke:rgba(var(--accent-rgb),0.4); stroke-width:1.2; } .vg-core-mark { fill:var(--orange); } .vg-label-core { fill:#efefef; font-family:'Inter',sans-serif; font-size:12px; font-weight:800; text-anchor:middle; letter-spacing:0.3px; } .vg-orbit { fill:none; stroke:rgba(255,255,255,0.05); stroke-width:1; stroke-dasharray:2 8; } .vg-desc { fill:#8a8a8a; font-family:'Inter',sans-serif; font-size:10px; font-weight:500; text-anchor:middle; letter-spacing:0.2px; } .vg-desc-name { fill:var(--orange); font-weight:700; } .vg-node-g { cursor:none; } .vg-node-g .vg-node, .vg-node-g .vg-letter, .vg-node-g .vg-label { transition:fill 0.2s, stroke 0.2s; } .vg-node-g:hover .vg-node { stroke:var(--orange); fill:rgba(var(--accent-rgb),0.16); } .vg-node-g:hover .vg-letter { fill:var(--orange); } .vg-node-g:hover .vg-label { fill:#efefef; } body.touch .vg-node-g { cursor:pointer; } @media (prefers-reduced-motion: reduce) { .vg-pulse, .vg-ring, .vg-core-ring { display:none; } } /* ── HOW IT WORKS ── */ #how { background: var(--bg-dark); padding: clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); } #how .section-tag { color:var(--orange); } #how .section-tag::before { background:var(--orange); } #how .section-title { color:var(--text-dark); } #how .section-sub { color:var(--muted-light-c); } .steps-inner { max-width:860px; margin:0 auto; } .steps-header { text-align:center; margin-bottom:4rem; } .steps-header .section-tag { justify-content:center; } .steps-header .section-tag::before { display:none; } .steps-header .section-sub { margin:0.75rem auto 0; } .steps { display:flex; flex-direction:column; position:relative; } .steps::before { content:''; position:absolute; left:27px; top:28px; bottom:28px; width:1px; background:linear-gradient(180deg,var(--orange) 0%,rgba(var(--accent-rgb),0.2) 70%,transparent 100%); } .step { display:flex; gap:2rem; align-items:flex-start; padding:1.75rem 1.75rem 1.75rem 0; } .step-num { width:56px; height:56px; border-radius:50%; background:var(--card-dark); border:1px solid var(--border-dark); display:flex; align-items:center; justify-content:center; font-size:0.95rem; font-weight:800; color:var(--orange); flex-shrink:0; position:relative; z-index:1; transition:all 0.3s; } /* Pozadina mora ostati neprozirna da timeline crta ostane skrivena iza kružića */ .step:hover .step-num { background:linear-gradient(rgba(var(--accent-rgb),0.08),rgba(var(--accent-rgb),0.08)), var(--card-dark); border-color:rgba(var(--accent-rgb),0.35); box-shadow:0 0 20px rgba(var(--accent-rgb),0.15); } .step h3 { font-size:1rem; font-weight:700; margin-bottom:0.4rem; padding-top:0.85rem; color:var(--text-dark); } .step p { font-size:0.85rem; color:var(--muted-dark); line-height:1.65; } /* ── CTA (DARK) ── */ .cta-section { padding:clamp(7rem,12vw,11rem) clamp(1.5rem,5vw,4rem) clamp(4rem,7vw,7rem); background:var(--bg-dark); position:relative; overflow:hidden; } #cta-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } /* Mekani prijelaz iz tame u particle na vrhu sekcije (kao hero-fade, samo obrnuto) */ .cta-section::before { content:''; position:absolute; top:0; left:0; right:0; height:260px; background:linear-gradient(var(--bg-dark) 0%, transparent 100%); pointer-events:none; z-index:1; } .cta-section .par-inner { position:relative; z-index:2; } .cta-orb-1 { width:620px; height:430px; background:radial-gradient(ellipse,rgba(var(--accent-rgb),0.11) 0%,transparent 70%); top:-130px; left:6%; } .cta-orb-2 { width:400px; height:400px; background:radial-gradient(ellipse,rgba(var(--accent-rgb),0.08) 0%,transparent 70%); bottom:-110px; right:4%; } .cta-orb-3 { width:220px; height:220px; background:radial-gradient(ellipse,rgba(var(--accent-rgb),0.1) 0%,transparent 70%); top:30%; right:18%; filter:blur(55px); } .cta-inner { max-width:1200px; margin:0 auto; background:linear-gradient(135deg,#111 0%,#190d03 100%); border:1px solid rgba(var(--accent-rgb),0.18); border-radius:20px; padding:clamp(3rem,6vw,5rem); text-align:center; position:relative; overflow:hidden; } .cta-inner::before { content:''; position:absolute; top:-150px; left:50%; transform:translateX(-50%); width:700px; height:350px; background:radial-gradient(ellipse,rgba(var(--accent-rgb),0.08) 0%,transparent 65%); pointer-events:none; } .cta-inner::after { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),0.5),transparent); } .cta-inner h2 { font-size:clamp(2rem,4vw,3.2rem); font-weight:900; letter-spacing:-2px; line-height:1.08; margin-bottom:1.25rem; position:relative; color:var(--text-dark); } .cta-inner h2 span { color:var(--orange); } .cta-inner p { color:#666; font-size:1rem; margin-bottom:2.5rem; max-width:460px; margin-left:auto; margin-right:auto; position:relative; } .cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; } /* ── FOOTER (DARK) ── */ footer { border-top:1px solid #1a1a1a; padding:3rem clamp(1.5rem,5vw,4rem) 2rem; background:var(--bg-dark); } .footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem; align-items:flex-start; } .footer-col { display:flex; flex-direction:column; gap:0.85rem; } .footer-logo { display:inline-flex; align-items:center; text-decoration:none; cursor:none; } .footer-logo img { height:26px; width:auto; display:block; } .footer-company { font-size:0.82rem; color:#8a8a8a; line-height:1.7; } .footer-company a { color:#999; text-decoration:none; } .footer-company a:hover { color:var(--orange); } .footer-note { color:#8a8a8a; font-size:0.76rem; } .footer-heading { font-size:0.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#888; margin-bottom:0.2rem; } .footer-links { display:flex; gap:2rem; flex-wrap:wrap; } .footer-links-col { flex-direction:column; gap:0.6rem; } .footer-links a { font-size:0.85rem; color:#8a8a8a; text-decoration:none; transition:color 0.2s; cursor:none; } .footer-links a:hover { color:var(--orange); } .footer-bottom { max-width:1200px; margin:2.5rem auto 0; padding-top:1.5rem; border-top:1px solid #161616; font-size:0.78rem; color:#8a8a8a; text-align:center; } .footer-copy { font-size:0.78rem; color:#8a8a8a; } @media (max-width:768px) { .footer-inner { grid-template-columns:1fr; gap:2rem; } .footer-col { align-items: center; } .footer-pay-logos { justify-content: center; } } /* ── LEGAL / CONTENT PAGES ── */ .legal-page { background:var(--bg-dark); min-height:100vh; } body.legal-page #nav { background:rgba(6,6,6,0.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,0.06); } .legal-wrap { max-width:820px; margin:0 auto; padding:130px clamp(1.5rem,5vw,2rem) 80px; } .legal-wrap .section-tag { color:var(--orange); } .legal-wrap .section-tag::before { background:var(--orange); } .legal-title { font-size:clamp(2rem,5vw,3rem); font-weight:900; letter-spacing:-1.5px; line-height:1.1; margin-bottom:0.75rem; color:var(--text-dark); } .legal-updated { font-size:0.82rem; color:#666; margin-bottom:2.5rem; } .legal-wrap h2 { font-size:1.3rem; font-weight:800; letter-spacing:-0.5px; color:var(--text-dark); margin:2.5rem 0 0.9rem; } .legal-wrap h3 { font-size:1.02rem; font-weight:700; color:var(--text-dark); margin:1.6rem 0 0.6rem; } .legal-wrap p, .legal-wrap li { font-size:0.95rem; color:#a7a7a7; line-height:1.8; } .legal-wrap p { margin-bottom:1rem; } .legal-wrap ul, .legal-wrap ol { margin:0 0 1rem 1.25rem; display:flex; flex-direction:column; gap:0.45rem; } .legal-wrap a { color:var(--orange); text-decoration:none; } .legal-wrap a:hover { text-decoration:underline; } .legal-wrap strong { color:var(--text-dark); font-weight:600; } .legal-card { background:var(--card-dark); border:1px solid var(--border-dark); border-radius:14px; padding:1.5rem 1.75rem; margin:1.5rem 0; } .legal-card p:last-child { margin-bottom:0; } .legal-table { width:100%; border-collapse:collapse; margin:1rem 0 1.5rem; font-size:0.88rem; } .legal-table th, .legal-table td { text-align:left; padding:0.7rem 0.85rem; border:1px solid var(--border-dark); color:#a7a7a7; vertical-align:top; } .legal-table th { background:var(--surface-dark); color:var(--text-dark); font-weight:600; } .legal-back { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.85rem; color:#888; text-decoration:none; margin-bottom:2rem; } .legal-back:hover { color:var(--orange); } /* ── COOKIE BANNER ── */ #cookie-banner { position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(160%); width:min(720px, calc(100% - 32px)); z-index:10000; background:rgba(15,15,15,0.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(var(--accent-rgb),0.25); border-radius:16px; padding:1.25rem 1.4rem; box-shadow:0 20px 60px rgba(0,0,0,0.55); transition:transform 0.5s cubic-bezier(0.16,1,0.3,1); display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; } #cookie-banner.show { transform:translateX(-50%) translateY(0); } .cookie-text { flex:1; min-width:240px; font-size:0.85rem; color:#a7a7a7; line-height:1.6; } .cookie-text a { color:var(--orange); text-decoration:none; } .cookie-text a:hover { text-decoration:underline; } .cookie-actions { display:flex; gap:0.6rem; flex-shrink:0; } .cookie-actions .btn { padding:0.6rem 1.2rem; border-radius:9px; font-size:0.85rem; cursor:pointer; } .cookie-reject { background:transparent; color:#999; border:1px solid #333; } .cookie-reject:hover { border-color:#555; color:#ccc; } @media (max-width:560px) { #cookie-banner { flex-direction:column; align-items:stretch; } .cookie-actions .btn { flex:1; justify-content:center; } } /* ── SHARED SECTION STYLES ── */ .section-tag { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.72rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:1rem; } .section-tag::before { content:''; display:block; width:18px; height:1px; } #features .section-tag { color:var(--orange); } #features .section-tag::before { background:var(--orange); } #features .section-title { color:var(--text-dark); } .section-title { font-size:clamp(1.9rem,4vw,2.9rem); font-weight:800; letter-spacing:-1.5px; line-height:1.1; margin-bottom:1rem; } .section-sub { font-size:1rem; max-width:500px; line-height:1.75; } .section-divider { height: 1px; position: relative; } .section-divider.dark-to-light { background: linear-gradient(90deg, transparent, #d0d0ce 30%, #d0d0ce 70%, transparent); } .section-divider.light-to-dark { background: linear-gradient(90deg, transparent, #1e1e1e 30%, #1e1e1e 70%, transparent); } /* ── RESPONSIVE ── */ /* Tablet */ @media (max-width:1000px) { .features-grid { grid-template-columns:1fr; gap:2.75rem; } .features-visual { max-width:560px; width:100%; margin:0 auto; } .products-grid { grid-template-columns:repeat(2,1fr); } } /* Mobitel / mali tablet */ @media (max-width:768px) { .nav-links { display:none; } #nav-burger { display:flex; } nav { height:68px; padding:0 1.25rem; } body { cursor:auto; } body a, body button, body .btn, body .product-link { cursor:pointer; } #cur,#cur-ring,.cur-trail { display:none; } .hero { padding:105px 1.25rem 65px; } .hero h1 { letter-spacing:-1.5px; } .hero-actions { margin-bottom:3.5rem; } .products-header { flex-direction:column; align-items:flex-start; } #products, #features, #how { padding-left:1.25rem; padding-right:1.25rem; } /* Koraci: manji kružići, timeline crta prati novu širinu */ .step { gap:1.25rem; padding:1.35rem 0; } .step-num { width:44px; height:44px; font-size:0.85rem; } .steps::before { left:21px; top:24px; bottom:24px; } .step h3 { padding-top:0.5rem; } .cta-section { padding-left:1.25rem; padding-right:1.25rem; } .cta-inner { padding:2.75rem 1.5rem; border-radius:16px; } .cta-inner h2 { letter-spacing:-1px; } .footer-inner { flex-direction:column; text-align:center; } .footer-links { justify-content:center; } } /* Mali mobitel */ @media (max-width:540px) { .products-grid { grid-template-columns:1fr; } .hero h1 { font-size:clamp(2.35rem,11vw,3rem); } .hero-sub { font-size:0.92rem; } .hero-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 1rem; justify-items:center; } .hero-actions { flex-direction:column; width:100%; max-width:320px; margin-left:auto; margin-right:auto; } .hero-actions .btn { width:100%; justify-content:center; } .cta-actions { flex-direction:column; align-items:stretch; max-width:320px; margin:0 auto; } .cta-actions .btn { justify-content:center; } .product-card { padding:1.6rem; } .feature-item { padding:1.1rem 0.85rem; } .section-title { letter-spacing:-1px; } } /* ── SCROLL REVEAL ── Bez anime.js (nema html.anim → stari preglednik / reduced-motion / failsafe): sve vidljivo (fallback). S anime.js (html.anim): kreće skriveno BEZ CSS tranzicije — anime.js vodi ulaz i doda .in-view. */ .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity:1; transform:none; } html.anim .reveal { opacity:0; transform:translateY(30px); will-change:opacity,transform; } html.anim .reveal-left { opacity:0; transform:translateX(-38px); will-change:opacity,transform; } html.anim .reveal-right { opacity:0; transform:translateX(38px); will-change:opacity,transform; } html.anim .reveal-scale { opacity:0; transform:scale(0.94); will-change:opacity,transform; } /* Kontejneri s vlastitim stepenastim .in-view efektom (cjenik, vrata) → skrij samo prozirnošću; pokret rade njihova djeca kroz postojeće CSS keyframe-ove, da se ne udvostruči. */ html.anim .pricing-grid.reveal, html.anim .door-mock.reveal { transform:none; } /* Sigurnosno završno stanje (anime.js ostavlja inline opacity:1; ovo pokriva rubne slučajeve) */ html.anim .reveal.in-view, html.anim .reveal-left.in-view, html.anim .reveal-right.in-view, html.anim .reveal-scale.in-view { opacity:1; transform:none; } /* Stepenasto otkrivanje djece unutar grupe (npr. lista funkcionalnosti) — anime.js vodi stagger */ html.anim [data-reveal-stagger] > * { opacity:0; transform:translateY(22px); } html.anim [data-reveal-stagger].in-view > * { opacity:1; transform:none; } /* ── DATA / BROJKE (tehnički, tabularni monospace — "operativni podaci teretane") ── */ .data, .stat-num, .price-amount, .mock-num, .phone-stat-num, .door-time { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace; font-variant-numeric: tabular-nums; font-feature-settings:'tnum' 1; } /* ── TOUCH UREĐAJI (bez miša — normalan kursor, bez custom cursora) ── */ body.touch { cursor: auto; } body.touch a, body.touch button, body.touch .btn, body.touch .product-link, body.touch .nav-logo, body.touch .footer-logo, body.touch .footer-links a { cursor: pointer; } body.touch #cur, body.touch #cur-ring, body.touch .cur-trail { display: none; } /* ══════════════════════════════════════════ FITOVISION PODSTRANICA (/fitovision/) ══════════════════════════════════════════ */ /* ── MOCKUPI: telefon + ulaz ── */ #mockups { background:var(--bg-dark); padding:clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); } .fv-mocks { display:flex; gap:clamp(1.5rem,4vw,3.5rem); justify-content:center; align-items:stretch; margin-top:3.5rem; flex-wrap:wrap; } .phone-mock { width:250px; flex-shrink:0; background:#0f0f0f; border:1px solid #262626; border-radius:32px; padding:10px; position:relative; box-shadow:0 25px 70px rgba(0,0,0,0.55); } .phone-notch { position:absolute; top:18px; left:50%; transform:translateX(-50%); width:78px; height:18px; background:#0f0f0f; border-radius:999px; z-index:2; } .phone-screen { background:linear-gradient(170deg,#161616 0%,#101010 100%); border-radius:24px; padding:2.6rem 1.15rem 1.3rem; display:flex; flex-direction:column; align-items:center; min-height:430px; } .phone-head { width:100%; margin-bottom:1.25rem; } .phone-hello { font-size:0.72rem; color:#666; } .phone-name { font-size:1.15rem; font-weight:800; color:var(--text-dark); letter-spacing:-0.3px; } .phone-qr { background:#fff; border-radius:14px; padding:10px; display:flex; box-shadow:0 0 0 1px #262626, 0 0 35px rgba(var(--accent-rgb),0.12); } .phone-qr svg { display:block; } .phone-qr-label { font-size:0.68rem; color:#666; margin-top:0.7rem; letter-spacing:0.3px; } .phone-stat-row { display:flex; gap:0.6rem; width:100%; margin-top:auto; padding-top:1.25rem; } .phone-stat { flex:1; background:#0c0c0c; border:1px solid #1e1e1e; border-radius:10px; padding:0.65rem; text-align:center; } .phone-stat-num { font-size:0.95rem; font-weight:800; color:var(--orange); } .phone-green { color:#22c55e; } .phone-stat-label { font-size:0.58rem; color:#555; margin-top:0.15rem; } /* ── Preuzimanje aplikacije (App Store / Google Play) ── */ .app-col { display:flex; flex-direction:column; align-items:center; } .store-badges { display:flex; gap:0.7rem; margin-top:1.4rem; justify-content:center; flex-wrap:wrap; } .store-btn { display:inline-flex; align-items:center; gap:0.6rem; background:#0c0c0c; border:1px solid #2a2a2a; border-radius:11px; padding:0.55rem 1rem; text-decoration:none; transition:border-color 0.2s, transform 0.2s; cursor:none; } .store-btn:hover { border-color:rgba(var(--accent-rgb),0.45); transform:translateY(-2px); } .store-ico { width:22px; height:22px; color:#fff; flex-shrink:0; } .store-btn span { display:flex; flex-direction:column; line-height:1.15; } .store-btn small { font-size:0.58rem; color:#8a8a8a; letter-spacing:0.2px; } .store-btn b { font-size:0.9rem; color:#fff; font-weight:700; letter-spacing:-0.2px; } body.touch .store-btn { cursor:pointer; } .door-mock { flex:1; min-width:300px; max-width:520px; background:var(--card-dark); border:1px solid var(--border-dark); border-radius:18px; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; } .door-mock-head { display:flex; align-items:center; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--border-dark); } .door-icon { width:46px; height:46px; border-radius:12px; background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.25); display:flex; align-items:center; justify-content:center; color:var(--orange); flex-shrink:0; } .door-mock-head h3 { font-size:0.95rem; font-weight:700; color:var(--text-dark); } .door-mock-head p { font-size:0.72rem; color:#555; } .door-status { margin-left:auto; font-size:0.68rem; font-weight:700; padding:0.3rem 0.8rem; border-radius:999px; background:rgba(34,197,94,0.1); color:#22c55e; border:1px solid rgba(34,197,94,0.25); white-space:nowrap; } .door-feed { display:flex; flex-direction:column; } .door-row { display:flex; align-items:center; gap:0.85rem; padding:0.7rem 0.25rem; border-bottom:1px solid #1a1a1a; } .door-row:last-child { border-bottom:none; } .door-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .door-dot.ok { background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,0.5); } .door-dot.warn { background:#fbbf24; box-shadow:0 0 8px rgba(251,191,36,0.5); } .door-text { flex:1; min-width:0; } .door-name { font-size:0.82rem; font-weight:600; color:#e5e5e5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .door-meta { font-size:0.68rem; color:#666; margin-top:0.1rem; } .door-row:has(.door-dot.warn) .door-meta { color:#eab308; } .door-time { font-size:0.68rem; color:#555; white-space:nowrap; font-variant-numeric:tabular-nums; } .door-foot { font-size:0.74rem; color:#666; padding-top:0.25rem; } /* ══════════════════════════════════════════ INTERAKTIVNI DASHBOARD DEMO (view-only, klikabilno) ══════════════════════════════════════════ */ .fv-demo { background:#101010; border:1px solid #1e1e1e; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 70px rgba(0,0,0,0.5); position:relative; min-height:440px; } .fv-demo-bar { display:flex; align-items:center; gap:0.7rem; height:44px; padding:0 0.85rem; background:#0c0c0c; border-bottom:1px solid #1e1e1e; } .fv-demo-dots { display:flex; gap:0.4rem; } .fv-demo-dots span { width:9px; height:9px; border-radius:50%; background:#2a2a2a; } .fv-demo-tabs { display:flex; gap:0.15rem; margin-left:0.3rem; } .fv-tab { background:none; border:none; color:#888; font-family:inherit; font-size:0.76rem; font-weight:600; padding:0.35rem 0.7rem; border-radius:7px; cursor:pointer; transition:background 0.2s, color 0.2s; } .fv-tab:hover { color:#ccc; } .fv-tab.active { background:rgba(var(--accent-rgb),0.14); color:var(--orange); } .fv-demo-flag { margin-left:auto; font-size:0.58rem; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#666; border:1px solid #262626; border-radius:999px; padding:0.18rem 0.55rem; } .fv-demo-body { position:relative; flex:1; overflow:hidden; } .fv-pane { display:none; padding:1.05rem; flex-direction:column; gap:0.8rem; animation:fvFade 0.35s ease; } .fv-pane.active { display:flex; } @keyframes fvFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } .fv-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0.55rem; } .fv-stats-2 { grid-template-columns:repeat(2,1fr); } .fv-stat { background:#0c0c0c; border:1px solid #1e1e1e; border-radius:10px; padding:0.75rem 0.7rem; } .fv-stat-num { font-size:1.35rem; font-weight:800; color:var(--orange); letter-spacing:-0.5px; line-height:1; font-family:ui-monospace,'SF Mono','Cascadia Code','Consolas',monospace; font-variant-numeric:tabular-nums; } .fv-stat-num span { font-size:0.72rem; } .fv-stat-num.fv-green { color:#22c55e; } .fv-stat-lbl { font-size:0.6rem; color:#666; margin-top:0.35rem; } .fv-sub { font-size:0.64rem; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#777; margin-top:0.1rem; } .fv-list { display:flex; flex-direction:column; background:#0c0c0c; border:1px solid #1e1e1e; border-radius:10px; overflow:hidden; } .fv-list-scroll { max-height:236px; overflow-y:auto; } .fv-row { display:flex; align-items:center; gap:0.7rem; padding:0.55rem 0.75rem; border-bottom:1px solid #171717; cursor:pointer; transition:background 0.15s; border:none; border-bottom:1px solid #171717; width:100%; text-align:left; font-family:inherit; background:none; } .fv-row:last-child { border-bottom:none; } .fv-row:hover { background:#151515; } .fv-avatar { width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.64rem; font-weight:700; color:#fff; } .fv-row-main { flex:1; min-width:0; } .fv-row-name { font-size:0.8rem; font-weight:600; color:#e5e5e5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fv-row-sub { font-size:0.64rem; color:#666; } .fv-badge { font-size:0.56rem; font-weight:700; padding:0.16rem 0.5rem; border-radius:999px; flex-shrink:0; white-space:nowrap; } .fv-badge.active { background:rgba(34,197,94,0.12); color:#22c55e; } .fv-badge.expired { background:rgba(239,68,68,0.12); color:#f87171; } .fv-badge.soon { background:rgba(234,179,8,0.12); color:#eab308; } .fv-row-time { font-size:0.62rem; color:#555; flex-shrink:0; font-variant-numeric:tabular-nums; } .fv-empty { padding:1.6rem; text-align:center; font-size:0.74rem; color:#555; } .fv-controls { display:flex; flex-direction:column; gap:0.5rem; } .fv-search { display:flex; align-items:center; gap:0.5rem; background:#0c0c0c; border:1px solid #1e1e1e; border-radius:9px; padding:0.5rem 0.7rem; transition:border-color 0.2s; } .fv-search:focus-within { border-color:rgba(var(--accent-rgb),0.4); } .fv-search svg { width:14px; height:14px; color:#555; flex-shrink:0; } .fv-search input { flex:1; background:none; border:none; outline:none; color:#e5e5e5; font-family:inherit; font-size:0.78rem; min-width:0; } .fv-search input::placeholder { color:#555; } .fv-filters { display:flex; gap:0.35rem; } .fv-filter { background:#0c0c0c; border:1px solid #1e1e1e; color:#888; font-family:inherit; font-size:0.68rem; font-weight:600; padding:0.34rem 0.7rem; border-radius:999px; cursor:pointer; transition:all 0.15s; } .fv-filter:hover { color:#ccc; } .fv-filter.active { background:rgba(var(--accent-rgb),0.14); border-color:rgba(var(--accent-rgb),0.35); color:var(--orange); } .fv-chart { display:flex; align-items:flex-end; gap:0.4rem; height:118px; background:#0c0c0c; border:1px solid #1e1e1e; border-radius:10px; padding:0.85rem 0.85rem 0.4rem; } .fv-bar { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:0.3rem; } .fv-bar::before { content:''; width:100%; height:var(--h); background:#262626; border-radius:4px 4px 0 0; transform-origin:bottom; } .fv-bar.hi::before { background:var(--orange); box-shadow:0 0 12px rgba(var(--accent-rgb),0.4); } .fv-chart.in-view .fv-bar::before { animation:barGrow 0.9s cubic-bezier(0.16,1,0.3,1) backwards; } .fv-chart.in-view .fv-bar:nth-child(1)::before{animation-delay:.05s} .fv-chart.in-view .fv-bar:nth-child(2)::before{animation-delay:.12s} .fv-chart.in-view .fv-bar:nth-child(3)::before{animation-delay:.19s} .fv-chart.in-view .fv-bar:nth-child(4)::before{animation-delay:.26s} .fv-chart.in-view .fv-bar:nth-child(5)::before{animation-delay:.33s} .fv-chart.in-view .fv-bar:nth-child(6)::before{animation-delay:.40s} .fv-chart.in-view .fv-bar:nth-child(7)::before{animation-delay:.47s} .fv-bar span { font-size:0.54rem; color:#555; } .fv-dist { display:flex; flex-direction:column; gap:0.55rem; } .fv-dist-row { display:flex; align-items:center; gap:0.6rem; } .fv-dist-lbl { font-size:0.7rem; color:#999; width:60px; flex-shrink:0; } .fv-dist-track { flex:1; height:7px; background:#161616; border-radius:999px; overflow:hidden; } .fv-dist-track i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--orange),#60a5fa); border-radius:999px; transition:width 1s cubic-bezier(0.16,1,0.3,1); } .fv-pane.seen .fv-dist-track i { width:var(--w); } .fv-dist-val { font-size:0.68rem; color:#777; width:32px; text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums; } .fv-detail { position:absolute; inset:0; background:#101010; padding:1.05rem; display:flex; flex-direction:column; gap:0.85rem; animation:fvSlide 0.3s cubic-bezier(0.16,1,0.3,1); overflow-y:auto; z-index:4; } .fv-detail[hidden] { display:none; } @keyframes fvSlide { from{opacity:0;transform:translateX(26px)} to{opacity:1;transform:none} } .fv-detail-back { align-self:flex-start; display:inline-flex; align-items:center; gap:0.4rem; background:none; border:none; color:#888; font-family:inherit; font-size:0.75rem; font-weight:600; cursor:pointer; padding:0; } .fv-detail-back svg { width:15px; height:15px; } .fv-detail-back:hover { color:var(--orange); } .fv-dh { display:flex; align-items:center; gap:0.85rem; } .fv-dh .fv-avatar { width:46px; height:46px; font-size:0.95rem; } .fv-dh-name { font-size:1rem; font-weight:800; color:#fff; letter-spacing:-0.3px; } .fv-dh-sub { font-size:0.7rem; color:#666; margin-top:0.15rem; } .fv-dfields { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; } .fv-field { background:#0c0c0c; border:1px solid #1e1e1e; border-radius:9px; padding:0.55rem 0.7rem; } .fv-field-lbl { font-size:0.56rem; text-transform:uppercase; letter-spacing:0.5px; color:#666; } .fv-field-val { font-size:0.8rem; color:#e5e5e5; font-weight:600; margin-top:0.2rem; } .fv-dci { display:flex; flex-direction:column; background:#0c0c0c; border:1px solid #1e1e1e; border-radius:9px; overflow:hidden; } .fv-dci-row { display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0.75rem; border-bottom:1px solid #171717; } .fv-dci-row:last-child { border-bottom:none; } .fv-dci-row span:first-child { font-size:0.74rem; color:#bbb; } .fv-dci-row span:last-child { font-size:0.66rem; color:#555; font-variant-numeric:tabular-nums; } .fv-demo-foot { font-size:0.62rem; color:#555; text-align:center; padding:0.6rem; border-top:1px solid #1a1a1a; background:#0c0c0c; } @media (max-width:1000px) { .fv-demo { max-width:560px; width:100%; margin:0 auto; } } /* ── CJENIK ── */ #pricing { background:var(--bg-dark); padding:clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); } .pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; align-items:stretch; margin-top:3.5rem; } .price-card { background:var(--card-dark); border:1px solid var(--border-dark); border-radius:18px; padding:2.25rem 1.9rem; display:flex; flex-direction:column; position:relative; transition:transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s; } .price-card:hover { transform:translateY(-5px); border-color:rgba(var(--accent-rgb),0.3); } .price-card.featured { background:linear-gradient(160deg,#1a1208 0%,var(--card-dark) 60%); border-color:rgba(var(--accent-rgb),0.4); } .price-tag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--orange); color:#000; font-size:0.66rem; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; padding:0.32rem 1rem; border-radius:999px; white-space:nowrap; } .price-name { font-size:1.2rem; font-weight:800; color:var(--text-dark); letter-spacing:-0.3px; } .price-desc { font-size:0.8rem; color:#666; margin-top:0.25rem; } .price-amount { font-size:2.9rem; font-weight:900; color:var(--text-dark); letter-spacing:-2px; margin:1.4rem 0 1.5rem; } .price-amount span { font-size:1rem; font-weight:600; color:#666; letter-spacing:0; } .price-feats { list-style:none; display:flex; flex-direction:column; gap:0.7rem; margin-bottom:2rem; flex:1; } .price-feats li { font-size:0.85rem; color:#999; padding-left:1.6rem; position:relative; line-height:1.5; } .price-feats li::before { content:'✓'; position:absolute; left:0; color:var(--orange); font-weight:800; } .price-btn { justify-content:center; width:100%; padding:0.8rem 1.5rem; border-radius:10px; font-size:0.9rem; } @media (max-width:900px) { .pricing-grid { grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; } .price-card.featured { order:-1; } } @media (max-width:768px) { #mockups, #pricing { padding-left:1.25rem; padding-right:1.25rem; } .fv-mocks { margin-top:2.5rem; } .pricing-grid { margin-top:2.75rem; } } /* ══════════════════════════════════════════ MOCKUP ANIMACIJE (dashboard, telefon, vrata, cjenik) Sve je vidljivo i bez JS-a; .in-view dodaje ulazne efekte. ══════════════════════════════════════════ */ /* — Zajednički 3D tilt na hover — */ .features-visual, .door-mock { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s; will-change: transform; } .features-visual:hover { transform: perspective(1100px) rotateX(2.5deg) rotateY(-3.5deg) translateY(-4px); box-shadow:0 32px 70px rgba(0,0,0,0.5); } .door-mock:hover { transform: translateY(-4px); box-shadow:0 26px 60px rgba(0,0,0,0.45); } /* — Dashboard: svjetlosna traka koja kliže prema dolje — */ .features-visual::after { content:''; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(180deg, transparent 0%, rgba(var(--accent-rgb),0.09) 8%, transparent 16%); background-size:100% 320%; animation: dashScan 7s linear infinite; } @keyframes dashScan { 0%{background-position:0 -160%;} 55%,100%{background-position:0 160%;} } /* — Dashboard: rast stupaca grafa (ulazno) — */ .mock-bar-item { transform-origin:bottom; } .mock-bar-item.hi { box-shadow:0 0 14px rgba(var(--accent-rgb),0.4); } .features-visual.in-view .mock-bar-item { animation: barGrow 0.9s cubic-bezier(0.16,1,0.3,1) backwards; } .features-visual.in-view .mock-bar-item:nth-child(1){animation-delay:.05s} .features-visual.in-view .mock-bar-item:nth-child(2){animation-delay:.12s} .features-visual.in-view .mock-bar-item:nth-child(3){animation-delay:.19s} .features-visual.in-view .mock-bar-item:nth-child(4){animation-delay:.26s} .features-visual.in-view .mock-bar-item:nth-child(5){animation-delay:.33s} .features-visual.in-view .mock-bar-item:nth-child(6){animation-delay:.40s} .features-visual.in-view .mock-bar-item:nth-child(7){animation-delay:.47s} @keyframes barGrow { from{transform:scaleY(0);} to{transform:scaleY(1);} } /* — Dashboard: pulsiranje "Aktivan" oznaka — */ .mock-pill { animation: pillPulse 2.6s ease-in-out infinite; } .mock-list-row:nth-child(2) .mock-pill { animation-delay:.55s; } .mock-list-row:nth-child(3) .mock-pill { animation-delay:1.1s; } @keyframes pillPulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} 50%{box-shadow:0 0 0 4px rgba(34,197,94,0.10);} } /* — Telefon: lebdenje — */ .phone-mock { animation: floatY 5.5s ease-in-out infinite; will-change:transform; } @keyframes floatY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} } /* — Telefon: QR skener (svjetlosna linija + pulsirajući sjaj) — */ .phone-qr { position:relative; overflow:hidden; animation: qrGlow 3s ease-in-out infinite; } .phone-qr::after { content:''; position:absolute; left:0; right:0; top:0; height:34%; background:linear-gradient(180deg, rgba(var(--accent-rgb),0) 0%, rgba(var(--accent-rgb),0.45) 50%, rgba(var(--accent-rgb),0) 100%); mix-blend-mode:screen; pointer-events:none; animation: qrScan 2.8s ease-in-out infinite; } @keyframes qrScan { 0%{transform:translateY(-120%);} 50%{transform:translateY(330%);} 100%{transform:translateY(-120%);} } @keyframes qrGlow { 0%,100%{box-shadow:0 0 0 1px #262626, 0 0 22px rgba(var(--accent-rgb),0.10);} 50%{box-shadow:0 0 0 1px #262626, 0 0 44px rgba(var(--accent-rgb),0.30);} } /* — Telefon: "Aktivna" članarina pulsira — */ .phone-green { animation: greenPulse 2.4s ease-in-out infinite; } @keyframes greenPulse { 0%,100%{opacity:1;text-shadow:0 0 0 rgba(34,197,94,0);} 50%{opacity:0.92;text-shadow:0 0 12px rgba(34,197,94,0.5);} } /* — Vrata: "Otključano" status + zelene točke žive — */ .door-status { animation: statusPulse 2.4s ease-in-out infinite; } @keyframes statusPulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} 50%{box-shadow:0 0 0 4px rgba(34,197,94,0.12);} } .door-dot.ok { animation: dotLive 1.9s ease-in-out infinite; } .door-row:nth-child(2) .door-dot.ok { animation-delay:.3s; } .door-row:nth-child(3) .door-dot.ok { animation-delay:.6s; } .door-row:nth-child(5) .door-dot.ok { animation-delay:.9s; } @keyframes dotLive { 0%,100%{box-shadow:0 0 6px rgba(34,197,94,0.4);} 50%{box-shadow:0 0 13px rgba(34,197,94,0.95);} } /* — Vrata: redovi feeda klize unutra (ulazno) — */ .door-mock.in-view .door-row { animation: rowIn 0.6s cubic-bezier(0.16,1,0.3,1) backwards; } .door-mock.in-view .door-row:nth-child(1){animation-delay:.05s} .door-mock.in-view .door-row:nth-child(2){animation-delay:.13s} .door-mock.in-view .door-row:nth-child(3){animation-delay:.21s} .door-mock.in-view .door-row:nth-child(4){animation-delay:.29s} .door-mock.in-view .door-row:nth-child(5){animation-delay:.37s} @keyframes rowIn { from{opacity:0;transform:translateX(-14px);} to{opacity:1;transform:translateX(0);} } /* — Cjenik: ulazak kartica (stepenasto) — */ .pricing-grid.in-view .price-card { animation: cardIn 0.7s cubic-bezier(0.16,1,0.3,1) backwards; } .pricing-grid.in-view .price-card:nth-child(1){animation-delay:.05s} .pricing-grid.in-view .price-card:nth-child(2){animation-delay:.15s} .pricing-grid.in-view .price-card:nth-child(3){animation-delay:.25s} @keyframes cardIn { from{opacity:0;transform:translateY(26px) scale(0.97);} to{opacity:1;transform:translateY(0) scale(1);} } /* — Cjenik: sjaj na istaknutoj kartici — */ .price-card.featured::after { content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:-1; animation: featGlow 4s ease-in-out infinite; } @keyframes featGlow { 0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);} 50%{box-shadow:0 0 42px rgba(var(--accent-rgb),0.14);} } /* — Cjenik: sjajni prelaz na hover (obične kartice) — */ .price-card:not(.featured) { overflow:hidden; } .price-card:not(.featured)::after { content:''; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,0.07), transparent); transform:skewX(-18deg); opacity:0; pointer-events:none; } .price-card:not(.featured):hover::after { opacity:1; animation: priceShine 0.85s ease; } @keyframes priceShine { from{left:-70%;} to{left:150%;} } /* — Cjenik: spotlight sjaj koji prati kursor + 3D tilt (JS postavlja --mx/--my i transform) — */ .price-card > * { position:relative; z-index:1; } .price-card { transform-style:preserve-3d; } .price-card .spotlight { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(var(--accent-rgb),0.12) 0%, transparent 55%); opacity:0; transition:opacity 0.3s; } .price-card:hover .spotlight { opacity:1; } .price-amount span { display:inline; } /* ══ ZAŠTO FITOVISION / POVJERENJE ══ */ #zasto { background:var(--bg-dark); padding:clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); } .trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3.5rem; } .trust-card { background:var(--card-dark); border:1px solid var(--border-dark); border-radius:14px; padding:1.6rem 1.5rem; transition:border-color 0.25s, transform 0.25s; } .trust-card:hover { border-color:rgba(var(--accent-rgb),0.32); transform:translateY(-4px); } .trust-ico { width:40px; height:40px; border-radius:10px; background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.2); display:flex; align-items:center; justify-content:center; color:var(--orange); margin-bottom:1rem; } .trust-ico svg { width:18px; height:18px; } .trust-card h3 { font-size:0.95rem; font-weight:700; color:var(--text-dark); margin-bottom:0.4rem; letter-spacing:-0.2px; } .trust-card p { font-size:0.83rem; color:#777; line-height:1.65; } .testi { margin-top:1.5rem; background:linear-gradient(160deg, rgba(var(--accent-rgb),0.07), var(--card-dark) 70%); border:1px solid rgba(var(--accent-rgb),0.18); border-radius:16px; padding:2rem clamp(1.5rem,4vw,2.5rem); display:flex; gap:1.75rem; align-items:center; flex-wrap:wrap; } .testi-quote { flex:1; min-width:260px; } .testi-mark { color:var(--orange); font-size:2.4rem; font-weight:900; line-height:0.6; display:block; margin-bottom:0.5rem; } .testi-quote p { font-size:1.05rem; color:var(--text-dark); line-height:1.6; font-weight:500; } .testi-quote .testi-note { font-size:0.82rem; color:#666; margin-top:0.8rem; font-weight:400; } .testi-cta { display:flex; flex-direction:column; gap:0.7rem; flex-shrink:0; } .testi-avatars { display:flex; } .testi-av { width:34px; height:34px; border-radius:50%; border:2px solid var(--card-dark); background:var(--surface-dark); margin-left:-10px; display:flex; align-items:center; justify-content:center; } .testi-av:first-child { margin-left:0; } .testi-av.plus { color:var(--orange); font-size:0.72rem; font-weight:800; background:rgba(var(--accent-rgb),0.1); } @media (max-width:860px) { .trust-grid { grid-template-columns:1fr 1fr; } } @media (max-width:768px) { #zasto { padding-left:1.25rem; padding-right:1.25rem; } .trust-grid { margin-top:2.5rem; } } @media (max-width:540px) { .trust-grid { grid-template-columns:1fr; } .testi { flex-direction:column; align-items:flex-start; } } /* ── REDUCED MOTION (pristupačnost) ── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-badge, .hero-sub, .hero-actions, .hero-stats { opacity: 1; animation: none; } .hero h1 .line-inner { transform: none; animation: none; } .reveal, .reveal-left, .reveal-right, .reveal-scale, body.js .reveal, body.js .reveal-left, body.js .reveal-right, body.js .reveal-scale, body.js [data-reveal-stagger] > *, body.js [data-reveal-stagger].in-view > * { opacity: 1 !important; transform: none !important; transition: none !important; } .orb, .pulse-dot, .badge-live::before { animation: none; } .features-visual::after, .phone-mock, .phone-qr, .phone-qr::after, .phone-green, .mock-pill, .door-status, .door-dot.ok, .price-card.featured::after { animation: none !important; } .features-visual.in-view .mock-bar-item, .door-mock.in-view .door-row, .pricing-grid.in-view .price-card, .price-card:not(.featured):hover::after { animation: none !important; } .features-visual:hover, .door-mock:hover { transform: none !important; } .fv-pane, .fv-detail { animation: none !important; } .fv-chart.in-view .fv-bar::before { animation: none !important; } .fv-dist-track i { transition: none !important; } } /* ══ FAQ / ČESTA PITANJA (accordion) ══ */ #faq { background: var(--bg-dark); padding: clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); } .faq { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 3rem; } .faq-item { background: var(--card-dark); border: 1px solid var(--border-dark); border-radius: 12px; overflow: hidden; transition: border-color 0.25s; } .faq-item:hover { border-color: rgba(var(--accent-rgb),0.3); } .faq-item summary { list-style: none; cursor: none; padding: 1.1rem 1.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.98rem; font-weight: 600; color: var(--text-dark); } .faq-item summary::-webkit-details-marker { display: none; } body.touch .faq-item summary { cursor: pointer; } .faq-ico { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .faq-ico::before, .faq-ico::after { content: ''; position: absolute; background: var(--orange); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } .faq-ico::before { top: 7px; left: 0; width: 16px; height: 2px; } .faq-ico::after { left: 7px; top: 0; width: 2px; height: 16px; } .faq-item[open] .faq-ico::after { transform: rotate(90deg); opacity: 0; } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.16,1,0.3,1); } .faq-item[open] .faq-a { grid-template-rows: 1fr; } .faq-a-in { overflow: hidden; } .faq-a-in p { padding: 0 1.35rem 1.2rem; font-size: 0.9rem; color: var(--muted-dark); line-height: 1.7; } @media (max-width:768px) { #faq { padding-left: 1.25rem; padding-right: 1.25rem; } } /* ══ VIŠE BOJE / AKCENTI (manje tame) ══ Suptilni akcentni sjaj na vrhu sekcija + obojena hairline linija razdvajanja. Boja prati temu: narančasta (VisionGroup) / plava (Fitovision, body.theme-blue). */ /* Jedinstvena, mekana akcentna podloga preko cijele stranice. Fiksni sloj iza svega + prozirne sekcije = jedan neprekinuti ton, BEZ ikakvih šavova/rezova. */ body { background: var(--bg-dark); } body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(95% 55% at 50% 0%, rgba(var(--accent-rgb),0.14) 0%, transparent 58%), radial-gradient(80% 55% at 10% 96%, rgba(var(--accent-rgb),0.09) 0%, transparent 60%), radial-gradient(80% 50% at 90% 45%, rgba(var(--accent-rgb),0.06) 0%, transparent 60%), var(--bg-dark); } .hero, #products, #features, #how, #mockups, #mobitel, #multisport, #sigurnost, #zasto, #usporedba, #pricing, #faq, .cta-section, footer { background-color: transparent; background-image: none; } /* ══ SIGURNOST / ZKTeco suradnja ══ */ #sigurnost { background: var(--bg-dark); padding: clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); } .sec-banner { margin-top: 3rem; display: flex; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap; justify-content: center; background: linear-gradient(160deg, rgba(var(--accent-rgb),0.11), var(--card-dark) 66%); border: 1px solid rgba(var(--accent-rgb),0.32); border-radius: 18px; padding: 1.85rem 2rem; box-shadow: 0 0 60px rgba(var(--accent-rgb),0.08); } .sec-badge { display: inline-flex; align-items: baseline; gap: 1px; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.5px; color: var(--text-dark); border: 2px solid var(--orange); border-radius: 12px; padding: 0.5rem 1.15rem; white-space: nowrap; text-decoration: none; box-shadow: 0 0 26px rgba(var(--accent-rgb),0.25); transition: box-shadow 0.25s, transform 0.25s; } .sec-badge b { color: var(--orange); font-weight: 900; } .sec-badge:hover { box-shadow: 0 0 42px rgba(var(--accent-rgb),0.45); transform: translateY(-2px); } /* Akcentni linkovi unutar sadržaja (partneri, integracije) */ .feature-item p a, .why-card p a, .faq-a-in p a, .sec-banner-txt p a { color: var(--orange); text-decoration: none; border-bottom: 1px solid rgba(var(--accent-rgb),0.45); } .feature-item p a:hover, .why-card p a:hover, .faq-a-in p a:hover, .sec-banner-txt p a:hover { border-bottom-color: var(--orange); } /* ── MULTISPORT: kompaktna traka sa statusom "integracija aktivna" (drugačije od ZKTeco bannera) ── */ #multisport { padding-top: clamp(1.5rem,3vw,2.5rem); padding-bottom: clamp(1.5rem,3vw,2.5rem); } .integ-strip { display: flex; align-items: center; gap: 1rem 1.75rem; flex-wrap: wrap; background: rgba(var(--accent-rgb),0.05); border: 1px solid rgba(var(--accent-rgb),0.18); border-radius: 14px; padding: 1.1rem 1.4rem; } .integ-head { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; } .integ-name { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.3px; color: var(--text-dark); flex-shrink: 0; } .integ-name b { color: var(--orange); } .integ-desc strong { color: var(--text-dark); font-weight: 700; } .integ-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #22c55e; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); border-radius: 999px; padding: 0.24rem 0.6rem; } .integ-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.7); animation: dotPulse 2s infinite; } .integ-desc { flex: 1; min-width: 240px; font-size: 0.88rem; color: var(--muted-dark); line-height: 1.6; margin: 0; } .integ-desc a { color: var(--orange); text-decoration: none; border-bottom: 1px solid rgba(var(--accent-rgb),0.45); } .integ-desc a:hover { border-bottom-color: var(--orange); } @media (max-width:640px) { #multisport { padding-left: 1.25rem; padding-right: 1.25rem; } .integ-strip { flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; } .integ-desc { min-width: 0; text-align: center; } } /* Logo chipovi partnera (ZKTeco, MultiSport) — svijetla podloga da se logo vidi, klikabilno (backlink) */ .logo-chip { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; padding: 0.55rem 0.95rem; flex-shrink: 0; box-shadow: 0 6px 22px rgba(0,0,0,0.4); transition: transform 0.2s, box-shadow 0.2s; } .logo-chip img { display: block; width: auto; } .logo-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .logo-chip.zk img { height: 40px; } .logo-chip.ms img { height: 26px; } @media (max-width:520px) { .logo-chip.zk img { height: 32px; } .logo-chip.ms img { height: 22px; } } /* ══ KONTAKT MODAL (višekoračna forma, otvara se iz sredine) ══ */ .cm-overlay { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(4,6,10,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: auto; opacity: 0; transition: opacity 0.3s ease; } .cm-overlay.open { opacity: 1; } .cm-overlay[hidden] { display: none; } .cm-overlay button, .cm-chip, .cm-method { cursor: pointer; } .cm-input { cursor: text; } .cm-modal { position: relative; width: 100%; max-width: 520px; background: linear-gradient(165deg, #14161c 0%, var(--card-dark) 70%); border: 1px solid rgba(var(--accent-rgb),0.25); border-radius: 20px; padding: 1.7rem 1.6rem 1.5rem; overflow: visible; box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(var(--accent-rgb),0.08); transform: scale(0.92); opacity: 0; transition: transform 0.34s cubic-bezier(0.16,1,0.3,1), opacity 0.34s; } .cm-overlay.open .cm-modal { transform: scale(1); opacity: 1; } /* Back/close kao "bubble" izvan forme (na kutovima) */ .cm-ic { position: absolute; top: -15px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: #1a1d24; border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 50%; color: #c2c7d0; padding: 0; box-shadow: 0 6px 18px rgba(0,0,0,0.5); transition: all 0.2s; } .cm-ic svg { width: 18px; height: 18px; display: block; } .cm-ic:hover { color: #fff; border-color: rgba(var(--accent-rgb),0.6); background: #20242c; } .cm-back-ic { left: -15px; } .cm-close { right: -15px; } .cm-bar { height: 3px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; margin: 0 0 1.4rem; } .cm-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), #60a5fa); border-radius: 999px; transition: width 0.35s cubic-bezier(0.16,1,0.3,1); } .cm-step-head { margin-bottom: 0.85rem; } .cm-kicker { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 0.35rem; } .cm-step-head h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.5px; color: var(--text-dark); line-height: 1.15; } .cm-input { width: 100%; background: #0c0d11; border: 1px solid var(--border-dark); border-radius: 11px; padding: 0.85rem 1rem; color: var(--text-dark); font-family: inherit; font-size: 0.95rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .cm-input::placeholder { color: #5a5f6a; } .cm-input:focus { border-color: rgba(var(--accent-rgb),0.6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); } .cm-area { min-height: 108px; resize: vertical; } .cm-area-sm { min-height: 66px; } /* Polje s ugrađenom strelicom (naprijed) — zamjena za "Dalje" */ .cm-field { position: relative; } .cm-field .cm-input { padding-right: 3.4rem; } .cm-go { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--orange); color: #000; border: none; border-radius: 9px; padding: 0; transition: all 0.2s; } .cm-go svg { width: 18px; height: 18px; display: block; } .cm-go:hover { filter: brightness(1.08); box-shadow: 0 0 18px rgba(var(--accent-rgb),0.4); } /* Primarni CTA (šalje/potvrđuje) i sekundarni link */ .cm-submit { display: block; width: 100%; margin-top: 1.3rem; background: var(--orange); color: #000; font-family: inherit; font-weight: 700; font-size: 0.95rem; border: none; border-radius: 11px; padding: 0.9rem 1.4rem; transition: all 0.2s; } .cm-submit:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 0 26px rgba(var(--accent-rgb),0.32); } .cm-alt { display: block; width: 100%; margin-top: 0.85rem; background: none; border: none; color: #7a808b; font-family: inherit; font-size: 0.83rem; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; } .cm-alt:hover { color: var(--orange); } .cm-turnstile { margin-top: 1rem; display: flex; justify-content: center; } .cm-err { color: #f87171; font-size: 0.82rem; margin-top: 0.7rem; display: none; } /* Hrvatski broj mobitela: fiksni +385 prefiks */ .cm-phone { display: flex; align-items: stretch; } .cm-phone-cc { display: flex; align-items: center; padding: 0 0.9rem; background: #0c0d11; border: 1px solid var(--border-dark); border-right: none; border-radius: 11px 0 0 11px; color: #9aa0aa; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.3px; } .cm-phone .cm-input { border-radius: 0 11px 11px 0; } /* Neobavezni termin poziva (date + time) */ .cm-body { max-height: calc(100vh - 10rem); overflow-y: auto; overflow-x: hidden; } .cm-when-label { font-size: 0.75rem; color: #7a808b; margin: 1rem 0 0.5rem; } /* Prilagođeni odabir datuma (7 dana, bez scrolla) + termina — uredan grid */ .cm-dt-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; } .cm-day { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #0c0d11; border: 1px solid var(--border-dark); border-radius: 10px; padding: 0.5rem 0.25rem; cursor: pointer; transition: all 0.18s; } .cm-day-wd { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.3px; color: #7a808b; white-space: nowrap; } .cm-day-n { font-size: 0.8rem; font-weight: 700; color: #cfd3da; white-space: nowrap; } .cm-day:hover { border-color: rgba(var(--accent-rgb),0.5); } .cm-day.sel { border-color: var(--orange); background: rgba(var(--accent-rgb),0.12); } .cm-day.sel .cm-day-wd, .cm-day.sel .cm-day-n { color: var(--orange); } .cm-day.closed, .cm-day:disabled { background: #0a0b0e; border-color: #191b20; cursor: not-allowed; } .cm-day.closed .cm-day-wd, .cm-day.closed .cm-day-n { color: #454951; text-decoration: line-through; } .cm-dt-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-top: 0.65rem; } .cm-slot { background: #0c0d11; border: 1px solid var(--border-dark); color: #cfd3da; font-family: inherit; font-size: 0.85rem; font-weight: 600; text-align: center; padding: 0.5rem 0.4rem; border-radius: 8px; cursor: pointer; transition: all 0.18s; } .cm-slot:hover { border-color: rgba(var(--accent-rgb),0.5); color: #fff; } .cm-slot.sel { background: rgba(var(--accent-rgb),0.14); border-color: var(--orange); color: var(--orange); } .cm-slot.taken, .cm-slot:disabled { color: #454951; background: #0a0b0e; border-color: #191b20; text-decoration: line-through; cursor: not-allowed; } .cm-slot.taken:hover { border-color: #191b20; color: #454951; } @media (max-width:480px) { .cm-day { padding: 0.45rem 0.15rem; } .cm-day-wd { font-size: 0.52rem; } .cm-day-n { font-size: 0.74rem; } } /* ══ COOKIE FAB (okrugli gumb s ikonom kolačića, dolje lijevo) ══ */ .cookie-fab { position: fixed; left: 18px; bottom: 18px; z-index: 9000; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20,22,28,0.92); color: #cbd1da; border: 1px solid rgba(var(--accent-rgb),0.28); box-shadow: 0 6px 22px rgba(0,0,0,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; transition: transform 0.2s, color 0.2s, border-color 0.2s; } .cookie-fab:hover { transform: translateY(-2px); color: var(--orange); border-color: rgba(var(--accent-rgb),0.6); } .cookie-fab svg { width: 24px; height: 24px; display: block; } .cm-chips { display: flex; flex-direction: column; gap: 0.55rem; } .cm-chip { text-align: left; background: #0c0d11; border: 1px solid var(--border-dark); border-radius: 11px; padding: 0.85rem 1rem; color: #cfd3da; font-family: inherit; font-size: 0.95rem; font-weight: 600; transition: all 0.18s; display: flex; align-items: center; justify-content: space-between; } .cm-chip::after { content: '→'; color: var(--orange); opacity: 0; transform: translateX(-4px); transition: 0.2s; } .cm-chip:hover { border-color: rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.06); } .cm-chip:hover::after { opacity: 1; transform: none; } .cm-chip.sel { border-color: var(--orange); } .cm-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; } .cm-method { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; background: #0c0d11; border: 1px solid var(--border-dark); border-radius: 13px; padding: 1rem; transition: all 0.18s; text-align: left; font-family: inherit; } .cm-method:hover { border-color: rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.06); transform: translateY(-2px); } .cm-method.sel { border-color: var(--orange); } .cm-m-ico { font-size: 1.3rem; } .cm-method b { color: var(--text-dark); font-size: 0.92rem; } .cm-method small { color: #7a808b; font-size: 0.72rem; } .cm-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.4rem; } .cm-btn { font-family: inherit; font-weight: 600; font-size: 0.9rem; border-radius: 10px; padding: 0.7rem 1.4rem; border: none; transition: all 0.2s; } .cm-next { background: var(--orange); color: #000; margin-left: auto; } .cm-next:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 0 24px rgba(var(--accent-rgb),0.3); } .cm-back { background: transparent; color: #999; border: 1px solid #2a2d34; } .cm-back:hover { color: #ccc; border-color: #3a3d44; } .cm-in { animation: cmIn 0.34s cubic-bezier(0.16,1,0.3,1); } @keyframes cmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .cm-shake { animation: cmShake 0.34s; border-color: #ef4444 !important; } @keyframes cmShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } } .cm-success { text-align: center; padding: 1.6rem 0 0.5rem; position: relative; } .cm-check { position: relative; width: 62px; height: 62px; margin: 0 auto 1.1rem; border-radius: 50%; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.45); color: #22c55e; display: flex; align-items: center; justify-content: center; animation: cmPop 0.5s cubic-bezier(0.16,1,0.3,1) both; box-shadow: 0 0 34px rgba(34,197,94,0.25); } .cm-check::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #22c55e; opacity: 0; animation: cmRing 0.95s 0.05s ease-out both; } .cm-check svg { width: 30px; height: 30px; display: block; } .cm-check svg polyline { stroke-dasharray: 34; stroke-dashoffset: 34; animation: cmDraw 0.45s 0.28s ease forwards; } @keyframes cmPop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } @keyframes cmRing { 0% { transform: scale(0.7); opacity: 0.85; } 100% { transform: scale(2); opacity: 0; } } @keyframes cmDraw { to { stroke-dashoffset: 0; } } .cm-success h3 { font-size: 1.4rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.5rem; animation: cmUp 0.5s 0.32s both; } .cm-success p { font-size: 0.92rem; color: var(--muted-dark); line-height: 1.6; margin-bottom: 1.3rem; animation: cmUp 0.5s 0.44s both; } .cm-success .cm-done { background: var(--orange); color: #000; margin: 0 auto; animation: cmUp 0.5s 0.56s both; } @keyframes cmUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .cm-confetti { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; z-index: 3; } .cm-conf { position: absolute; left: 50%; top: 48px; opacity: 0; will-change: transform, opacity; animation: cmConf 0.95s ease-out forwards; } @keyframes cmConf { 0% { opacity: 1; transform: translate(-50%,-50%) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x,0)), calc(-50% + var(--y,0))) rotate(var(--r,180deg)); } } @media (prefers-reduced-motion: reduce) { .cm-check, .cm-check::after, .cm-check svg polyline, .cm-success h3, .cm-success p, .cm-success .cm-done, .cm-conf { animation: none !important; } .cm-check svg polyline { stroke-dashoffset: 0 !important; } .cm-check::after { display: none; } } @media (max-width:520px) { .cm-methods { grid-template-columns: 1fr; } .cm-modal { padding: 1.3rem 1.15rem; } } @media (prefers-reduced-motion: reduce) { .cm-overlay, .cm-modal, .cm-bar i { transition: none; } .cm-in { animation: none; } } .sec-banner-txt { flex: 1; min-width: 280px; } .sec-banner-txt strong { color: var(--text-dark); font-weight: 700; } .sec-banner-txt p { font-size: 0.95rem; color: #a7a7a7; line-height: 1.7; } @media (max-width:640px) { #sigurnost { padding-left: 1.25rem; padding-right: 1.25rem; } .sec-banner { flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; } .sec-banner-txt { min-width: 0; } .sec-banner-txt p { text-align: center; } } /* ══ ZAŠTO MOBITEL (kartice/privjesci/PIN vs mobitel) ══ */ #mobitel { background: var(--bg-dark); padding: clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); } .why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 3.5rem; } .why-card { background: var(--card-dark); border: 1px solid var(--border-dark); border-radius: 16px; padding: 1.9rem 1.6rem; transition: border-color 0.25s, transform 0.25s; } .why-card:hover { border-color: rgba(var(--accent-rgb),0.32); transform: translateY(-4px); } .why-card.hl { background: linear-gradient(160deg, rgba(var(--accent-rgb),0.09), var(--card-dark) 62%); border-color: rgba(var(--accent-rgb),0.35); } .why-ico { width: 48px; height: 48px; border-radius: 13px; background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.25); display: flex; align-items: center; justify-content: center; color: var(--orange); margin-bottom: 1.15rem; } .why-ico svg { width: 22px; height: 22px; } .why-card h3 { font-size: 1.02rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; letter-spacing: -0.2px; } .why-card p { font-size: 0.88rem; color: var(--muted-dark); line-height: 1.7; } @media (max-width:860px) { .why-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } } @media (max-width:768px) { #mobitel { padding-left: 1.25rem; padding-right: 1.25rem; } } /* Hero brojke u akcentnoj boji (jasan kolor u prvom kadru) */ .hero-stats .stat-num { color: var(--orange); } /* Naglašeni akcent na tagovima i linkovima koji su bili sivi */ .footer-heading { color: var(--orange); opacity: 0.9; } /* ══ USPOREDBA: ručno vođenje vs Fitovision ══ */ #usporedba { background: var(--bg-dark); padding: clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); } .cmp { margin-top: 3rem; border: 1px solid var(--border-dark); border-radius: 16px; overflow: hidden; background: var(--card-dark); } .cmp-head, .cmp-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; } .cmp-row { border-top: 1px solid var(--border-dark); } .cmp-c { padding: 1rem 1.2rem; font-size: 0.9rem; line-height: 1.5; color: var(--muted-dark); display: flex; align-items: center; gap: 0.5rem; } .cmp-head .cmp-c { font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.6px; color: #8a8a8a; } .cmp-feat { color: var(--text-dark); font-weight: 600; background: var(--surface-dark); } .cmp-old .x { color: #ef4444; font-weight: 800; flex-shrink: 0; } .cmp-new { background: rgba(var(--accent-rgb),0.07); color: #c9d3e0; } .cmp-new .v { color: #22c55e; font-weight: 800; flex-shrink: 0; } .cmp-head .cmp-new { color: var(--orange); background: rgba(var(--accent-rgb),0.12); } .cmp-head .cmp-feat { background: var(--surface-dark); } @media (max-width:720px) { #usporedba { padding-left: 1.25rem; padding-right: 1.25rem; } /* Vodoravni swipe umjesto stackanja; stupac značajki ostaje zalijepljen lijevo */ .cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .cmp-head, .cmp-row { grid-template-columns: 128px 185px 185px; min-width: 498px; } .cmp-feat { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--border-dark); } .cmp-c { font-size: 0.85rem; } .cmp::-webkit-scrollbar { height: 6px; } .cmp::-webkit-scrollbar-thumb { background: #2a2d34; border-radius: 3px; } } /* Suptilni hint da se tablica lista (samo mobitel) */ .cmp-hint { display: none; font-size: 0.74rem; color: var(--orange); margin-top: 0.75rem; letter-spacing: 0.3px; } @media (max-width:720px) { .cmp-hint { display: block; } }