/* ============================================================ Net Vision FX kit (standalone, prefix: nvfx-) Ne dira postojeci CSS. Bezbedno za sve sablone. ============================================================ */ /* 1) Scroll-progress traka na vrhu */ .nvfx-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:99999; pointer-events:none; will-change:width; background:linear-gradient(90deg,#F58634,#ffb066,#64ffda); box-shadow:0 0 12px rgba(245,134,52,.55); transition:width .08s linear; } /* 2) Reveal-on-scroll — NEPROBOJNO: sadrzaj je PO DEFAULTU VIDLJIV. JS samo DODAJE klasu .nvfx-anim kad sekcija udje u ekran -> tada se odigra "rise" animacija. Ako JS/observer zakaze, nista ne ostaje skriveno. */ .nvfx-anim{ animation:nvfx-rise .7s cubic-bezier(.22,.61,.36,1) both; } @keyframes nvfx-rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } } /* 2b) HERO ulaz — cist CSS, pokrece se ODMAH na ucitavanju (ne ceka JS). Robustno: hvata h1/podnaslov u BILO KOM hero kontejneru (hero-section-seo, -netvision, blog-hero, expert-hero, amb-hero, nv-hero-*...). Preskace elemente koji vec imaju svoju "anim-" animaciju (case-study strane). Ako je "reduce motion" -> hero je svejedno vidljiv. */ @media (prefers-reduced-motion: no-preference){ /* HERO NASLOV: rise + clip-path "wipe" (kao na pocetnoj — slova se otkrivaju odozgo) */ [class*="hero"] h1:not([class*="anim"]), h1[class*="hero"]:not([class*="anim"]), h1.nv-section-title, h1.cs-title{ animation: nvfx-rise .85s cubic-bezier(.22,.61,.36,1) .05s both, nvfx-wipe .95s cubic-bezier(.22,.61,.36,1) .05s both; } /* HERO PODNASLOV / lead / badge: rise sa malim zakasnjenjem */ [class*="hero"] p:not([class*="anim"]), [class*="hero-subtitle"], [class*="hero-lead"], [class*="hero-tag"], [class*="hero-badge"], .hero-lead{ animation: nvfx-rise .8s cubic-bezier(.22,.61,.36,1) .24s both; } } @keyframes nvfx-wipe{ from{ clip-path: inset(0 0 100% 0); } to{ clip-path: inset(-12% -12% -12% -12%); } } /* 3) Header dobija senku kad se skroluje */ .main-header{ transition:box-shadow .3s ease, backdrop-filter .3s ease; } .main-header.nvfx-scrolled{ box-shadow:0 8px 30px rgba(0,0,0,.28); } /* 4) Suptilno podizanje kartica na hover */ .glass-card, .service-pillars > *, .final-cta-box, .agency-tip{ transition:transform .35s ease, box-shadow .35s ease; } .glass-card:hover, .service-pillars > *:hover, .final-cta-box:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.22); } /* 5) Zoom slike u sadrzaju na hover */ .about-image-wrapper{ overflow:hidden; border-radius:12px; } .about-image-wrapper img{ transition:transform .5s ease; } .about-image-wrapper:hover img{ transform:scale(1.04); } /* 6) Shine prelaz preko dugmadi */ .glass-btn, .cta-dugme, .nav-compact-btn, .mobile-cta{ position:relative; overflow:hidden; } .glass-btn::after, .cta-dugme::after, .nav-compact-btn::after, .mobile-cta::after{ content:""; position:absolute; top:0; left:-130%; width:60%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); transition:left .6s ease; pointer-events:none; } .glass-btn:hover::after, .cta-dugme:hover::after, .nav-compact-btn:hover::after, .mobile-cta:hover::after{ left:150%; } /* 7) AUTO mobilni meni — JS ga ubaci SAMO na stranama gde fali hamburger. Sve je pod nvfx- prefiksom i aktivira se tek kad dobije .nvfx-has-mnav */ .nvfx-burger{ display:none; flex-direction:column; gap:5px; width:34px; height:30px; padding:5px; background:none; border:0; cursor:pointer; align-items:center; justify-content:center; } .nvfx-burger span{ display:block; width:24px; height:2px; background:#fff; border-radius:2px; } .nvfx-mnav{ position:fixed; inset:0; z-index:100000; background:#0a192f; padding:80px 24px 40px; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); overflow-y:auto; } .nvfx-mnav.nvfx-open{ transform:translateX(0); } .nvfx-mnav ul{ list-style:none; padding:0; margin:0; } .nvfx-mnav li{ margin:0 !important; padding:0 !important; } /* ubij 28px razmak iz originalnog CSS-a */ .nvfx-mnav a{ display:block; color:#ccd6f6; font-size:17px; font-weight:500; padding:14px 2px; border-bottom:1px solid rgba(255,255,255,.07); text-decoration:none; text-transform:none; letter-spacing:0; } .nvfx-mnav a:hover{ color:#F58634; } /* dropdown roditelj -> narandzasti GRUPNI naslov sa linijom (kao na pocetnoj) */ .nvfx-mnav .has-premium-dropdown > a{ color:#F58634; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-top:16px; padding:0 0 8px; border-bottom:1px solid rgba(245,134,52,.3); pointer-events:none; } .nvfx-mnav .has-premium-dropdown > a i{ display:none; } /* sakrij chevron */ /* razvij podmenije i poravnaj kao obicne stavke (bez kutije/razmaka) */ .nvfx-mnav ul ul, .nvfx-mnav .premium-dropdown-menu{ display:block !important; position:static !important; opacity:1 !important; visibility:visible !important; transform:none !important; box-shadow:none !important; background:none !important; padding:0 !important; margin:0 !important; border:0 !important; } .nvfx-mclose{ position:absolute; top:18px; right:22px; background:none; border:0; color:#fff; font-size:38px; line-height:1; cursor:pointer; } @media (min-width:769px){ .nvfx-mnav{ display:none !important; } } @media (max-width:768px){ html.nvfx-has-mnav .nav-area, html.nvfx-has-mnav .nav-list{ display:none !important; } html.nvfx-has-mnav .nvfx-burger{ display:flex !important; } } /* Postovanje "Reduce motion" podesavanja */ @media (prefers-reduced-motion: reduce){ .nvfx-anim{ animation:none!important; } .nvfx-progress{ display:none; } .glass-btn::after, .cta-dugme::after, .nav-compact-btn::after, .mobile-cta::after{ display:none; } }