/* ============================================================ PRESTIGE GUARD : LUX sloj (PROBA, 13.08.2026) Sve iz ovog fajla vazi SAMO kad lux.js doda klasu .lux na (GSAP ucitan, nema ?nolux, nema prefers-reduced-motion). Bez .lux klase sajt radi identicno originalu. Uklanjanje sloja: obrisati lux.css/lux.js/vendor + tagove iz HTML-a. ============================================================ */ /* Lenis preuzima glatko skrolovanje; native smooth bi se duplirao */ html.lux { scroll-behavior: auto; } html.lux.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* CSS hero animacije se gase jer ih preuzima GSAP tajmlajn. Ako lux.js pukne pre inicijalizacije, on skida .lux klasu, pa se ove CSS animacije vracaju kao da nista nije bilo. */ html.lux .hero-media img, html.lux .hero .kicker, html.lux .hero h1, html.lux .hero-sub, html.lux .hero .btn-row { animation: none; } /* Elementi cije otkrivanje preuzima GSAP (SplitText maske / clip reveal): stari .rv sloj se na njima neutralise da se efekti ne dupliraju. */ html.lux .section-head.rv, html.lux .statement.rv, html.lux h2.rv, html.lux .cta-band .kicker.rv, html.lux .edito-text.rv-move, html.lux .edito-media.rv { opacity: 1; transform: none; transition: none; } /* SplitText maska pravi block wrappere unutar naslova; naslovi su uppercase serif sa letter-spacingom koji se nasledjuje sam. Descenderi (g, y, j) ne smeju da se seku maskom. */ html.lux .lux-split .lux-line-mask { padding-bottom: 0.08em; margin-bottom: -0.08em; } /* ---------- Dugmad: fill sweep odozdo umesto ravnog fade-a ---------- */ /* Tekst dugmeta NIKAD nije sakriven; zavesa je ::before iza teksta. */ @media (prefers-reduced-motion: no-preference) { html.lux .btn { position: relative; z-index: 0; overflow: hidden; transition: color 0.5s var(--ease), border-color 0.5s var(--ease); } html.lux .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform 0.55s cubic-bezier(0.65, 0.05, 0.36, 1); } html.lux .btn:hover { background: transparent; } html.lux .btn:hover::before { transform: scaleY(1); } html.lux .btn--solid { background: var(--bronze); } html.lux .btn--solid::before { background: var(--bronze-dark); } html.lux .btn--solid:hover { background: var(--bronze); } html.lux .btn--light::before { background: #fff; } html.lux .btn--light:hover { background: transparent; color: var(--ink); } } /* ---------- Link-line: dvostruki underline sweep ---------- */ /* Linija ode udesno pa se vrati sleva; boja iz bronze u tamniju bronzu. */ @media (prefers-reduced-motion: no-preference) { html.lux .link-line { border-bottom: 0; padding-bottom: 0.7rem; background: linear-gradient(var(--bronze-dark), var(--bronze-dark)) no-repeat left bottom / 0 1px, linear-gradient(var(--bronze), var(--bronze)) no-repeat right bottom / 100% 1px; transition: color 0.35s var(--ease); } html.lux .card a:hover .link-line, html.lux .link-line:hover { color: var(--bronze-dark); animation: luxLineSweep 0.9s cubic-bezier(0.65, 0.05, 0.36, 1) both; } @keyframes luxLineSweep { 0% { background-size: 0 1px, 100% 1px; } 50% { background-size: 0 1px, 0 1px; } 50.001% { background-size: 0 1px, 0 1px; } 100% { background-size: 100% 1px, 0 1px; } } } /* ---------- Kartice: caption reaguje na hover cele kartice ---------- */ html.lux .card h3 { transition: color 0.5s var(--ease); } html.lux .card a:hover h3 { color: var(--bronze-dark); } /* ---------- Kartice: stepenasto otkrivanje po kolonama ---------- */ /* lux.js upisuje --lux-stagger po kartici (kolona x 0.18s); pregazi pausalna .rv-d1/.rv-d2 kasnjenja. Reveal i dalje vozi stari .rv sistem. */ html.lux .grid > .card.rv { transition-delay: var(--lux-stagger, 0s); } /* ---------- Testimonials: kartica u fokusu, ostale se povuku ---------- */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { html.lux .testi { transition: opacity 0.5s var(--ease), filter 0.5s var(--ease); } html.lux .testi-grid:has(.testi:hover) .testi:not(:hover) { opacity: 0.4; filter: blur(2px); } } /* ---------- Numerisana lista usluga: fokus red na tamnoj podlozi ---------- */ /* Negativna margina + isti padding: pozadina iskoci sire od reda, a sadrzaj ostaje na istoj sirini, pa nema reflow-a teksta. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { html.lux .num-item { transition: background-color 0.45s var(--ease), box-shadow 0.45s var(--ease), margin 0.45s var(--ease), padding 0.45s var(--ease), opacity 0.45s var(--ease), filter 0.45s var(--ease); } /* Podloga iz postojece palete (topla siva sekcija) plus tanka bronzana linija uz levu ivicu; boje teksta ostaju originalne, samo se red u fokusu izdvoji a ostali blago povuku. */ html.lux .num-item:hover { background-color: var(--bg-warm); box-shadow: inset 2px 0 0 var(--bronze); margin-left: -2.4rem; margin-right: -2.4rem; padding-left: 2.4rem; padding-right: 2.4rem; } html.lux .num-list:has(.num-item:hover) .num-item:not(:hover) { opacity: 0.55; filter: blur(1px); } } /* ---------- Pillars: bronzana linija koja se iscrtava ---------- */ html.lux .pillar { position: relative; padding-top: 3rem; /* pocetna vrednost mora postojati na elementu da bi GSAP imao odakle da krene; var() fallback nije dovoljan za tween */ --lux-rule: 0; } html.lux .pillar::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--bronze); /* GSAP animira --lux-rule na .pillar elementu, pseudo je nasledi */ transform: scaleX(var(--lux-rule, 0)); transform-origin: left; } /* ---------- Testimonial strelice: ikonica klizne u smeru strelice ---------- */ @media (prefers-reduced-motion: no-preference) { html.lux .testi-arrow svg { transition: transform 0.4s var(--ease); } html.lux .testi-arrow[data-dir="-1"]:hover:not(.is-off) svg { transform: translateX(-3px); } html.lux .testi-arrow[data-dir="1"]:hover:not(.is-off) svg { transform: translateX(3px); } } /* ---------- WhatsApp float: blagi pop na dodir ---------- */ @media (prefers-reduced-motion: no-preference) { html.lux .wa-float { transition: background 0.3s var(--ease), transform 0.35s var(--ease); } html.lux .wa-float:hover, html.lux .wa-float:focus-visible { transform: scale(1.07); } } /* ---------- Header: GSAP ga sakriva/vraca, tranzicija je njegova ---------- */ html.lux .site-header { will-change: transform; } /* ---------- Prelaz izmedju strana: fade preko celog ekrana ---------- */ /* Element pravi lux.js; bez JS-a ne postoji. Ploca se ne pomera, samo menja neprozirnost 0 -> 1 -> 0. pointer-events: none znaci da ni zaglavljena ploca ne blokira klikove. */ .lux-veil { position: fixed; inset: 0; z-index: 999; background: var(--bg); opacity: 0; pointer-events: none; will-change: opacity; }