/* ========================================================================== Mojsilov Detailing — deljeni stilovi i custom tokeni Paleta i tipografija: v. context/design-system.md ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap'); :root { --navy: #121358; --plava: #293681; --akcent: #2164da; --akcent-svetla: #2164da; /* highlight boja u naslovima — brend akcent (najbolji kontrast + doslednost) */ --crna: #000000; --siva: #b6bdc2; --bela: #ffffff; /* Slojevite, tonirane senke (nikad ravan shadow-md) */ --shadow-sm: 0 1px 2px rgba(18, 19, 88, 0.06), 0 2px 6px rgba(18, 19, 88, 0.06); --shadow-md: 0 4px 12px rgba(18, 19, 88, 0.08), 0 12px 28px rgba(18, 19, 88, 0.10); --shadow-lg: 0 8px 24px rgba(18, 19, 88, 0.10), 0 24px 60px rgba(18, 19, 88, 0.16); --shadow-accent: 0 10px 24px rgba(33, 100, 218, 0.28), 0 4px 10px rgba(33, 100, 218, 0.20); } * { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html { scroll-behavior: smooth; scroll-padding-top: 132px; overflow-x: clip; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #0b1020; background: var(--bela); /* clip (not hidden): prevents horizontal overflow without turning into a scroll container, which would break window scrolling and scroll-reveal. */ overflow-x: clip; } ::selection { background: var(--akcent); color: #fff; } /* Fokus stanje — dostupnost */ :focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 4px; } /* -------------------------------------------------------------------------- Tipografija -------------------------------------------------------------------------- */ .font-display { font-family: 'Oswald', 'Inter', sans-serif; } .eyebrow { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; } .h-section { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; } /* Razmak između redova za naslove u dva reda — srazmeran veličini fonta (isti odnos kao hero „Vi nastavljate…"). Tailwind-ove text-* klase nose sopstveni line-height (~1.0) i pregazile bi običnu .h-section; kvalifikovan selektor (element + klasa) pobeđuje po specifičnosti na svim breakpoint-ima. Jednoredni naslovi nemaju vidljiv efekat. */ h1.h-section, h2.h-section, h3.h-section { line-height: 1.18; } /* Svetlo-plavi akcenat unutar naslova (highlight dela teksta) */ .text-akcent-light { color: var(--akcent-svetla); } /* Suptilna tekstura zrna preko tamnih sekcija — dubina */ .grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Dugmad -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem; line-height: 1; padding: 0.95rem 1.6rem; border-radius: 999px; cursor: pointer; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease; will-change: transform; } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { background: var(--akcent); color: #fff; box-shadow: var(--shadow-accent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(33, 100, 218, 0.36); } .btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.28); } .btn-ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.08); border-color: rgba(255,255,255,0.5); } .btn-outline { background: transparent; color: var(--navy); border: 1.5px solid rgba(18, 19, 88, 0.2); } .btn-outline:hover { transform: translateY(-2px); border-color: var(--akcent); color: var(--akcent); } /* -------------------------------------------------------------------------- Glow dugme (CTA „Zakažite termin") — animirani glow prsten u brend akcentu, naš pill radius. Port „glow-button" koncepta u naš vanilla stack. -------------------------------------------------------------------------- */ .glow-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 999px; /* naš radius */ font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.9rem; line-height: 1; color: #fff; cursor: pointer; background: linear-gradient(180deg, #2f74ef, var(--akcent)); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgba(33, 100, 218, 0.4); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; } .glow-btn :where(svg) { flex-shrink: 0; } /* Statičan meki glow iza dugmeta (bez rotacije) */ .glow-btn::before { content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; background: var(--akcent); filter: blur(11px); opacity: 0.45; transition: opacity 0.3s ease; } .glow-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 28px rgba(33, 100, 218, 0.55); } .glow-btn:hover::before { opacity: 0.7; } .glow-btn:active, .glow-btn[data-state="clicked"] { transform: scale(0.96); } /* -------------------------------------------------------------------------- Liquid ghost dugme (port AICONNECT „Sarađuj sa nama") — canvas liquid blobovi + animiran border + glow; pojačava se na hover. Akcent boja. -------------------------------------------------------------------------- */ .liq-btn { position: relative; display: inline-flex; } .liq-btn-canvas { position: absolute; inset: 0; border-radius: 500px; pointer-events: none; } .btn-liq { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 30px; border-radius: 500px; overflow: hidden; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.78); text-decoration: none; cursor: pointer; border: none; background: transparent; transition: color 0.25s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .btn-liq > span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; } .btn-liq:hover { color: #fff; transform: translateY(-2px); } /* Varijanta za svetle sekcije — tamniji tekst */ .btn-liq--on-light { color: var(--navy); } .btn-liq--on-light:hover { color: var(--akcent); } /* -------------------------------------------------------------------------- Kartice -------------------------------------------------------------------------- */ .card { background: #fff; border: 1px solid rgba(18, 19, 88, 0.08); border-radius: 20px; box-shadow: var(--shadow-sm); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(33, 100, 218, 0.25); } .card-dark { background: linear-gradient(160deg, rgba(41, 54, 129, 0.55), rgba(18, 19, 88, 0.4)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .card-dark:hover { transform: translateY(-6px); border-color: rgba(33, 100, 218, 0.5); } /* Kontakt-metod kartice (Telefon / Viber-WA / Email) — bogatiji, responzivniji hover: veci lift, akcent border, box-shadow glow + spring pop ikonice. VAZNO: kartice imaju i .reveal, cija transition (samo opacity/transform) je deklarisana kasnije u fajlu → prepisala bi nasu (pa bi box-shadow/border „skakali" bez animacije), a .reveal.in{transform:none} ponistio bi lift. Zato koristimo specificniji .contact-card.reveal (pun transition, 0.7s) i .contact-card.reveal:hover (nadjacava .reveal.in). Isti pristup kao .step-card.reveal iznad. */ .contact-card.reveal { /* Ravnomerna kriva (ne easeOutQuint) da se lift/senka/border osete postepeno kroz celih 0.7s, a ne da „odskoce" u prvih 0.3s. */ transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.7s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.7s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .contact-card.reveal:hover { transform: translateY(-5px); border-color: rgba(33, 100, 218, 0.55); box-shadow: 0 22px 46px -14px rgba(0, 0, 0, 0.6), 0 0 34px rgba(33, 100, 218, 0.16), 0 0 0 1px rgba(33, 100, 218, 0.18) inset; } /* Moxom „glass" pločica ikonice — varijanta za tamnu (navy) pozadinu: frosted staklo sa radial sjajem (belo → akcent), providni border, blur, meka senka. Hover pop animacija ispod (bg akcent, bela ikonica) je zadržana. */ .contact-card-icon { border-radius: 16px; color: #a8c6ff; background-color: rgba(255, 255, 255, 0.08); background-image: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.5) 16%, rgba(33, 100, 218, 0.3) 100%); border: 1.5px solid rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px -10px rgba(33, 100, 218, 0.55); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease; } .contact-card-icon svg { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .contact-card:hover .contact-card-icon { background: var(--akcent); color: #fff; transform: translateY(-4px) scale(1.1) rotate(-8deg); box-shadow: 0 10px 22px rgba(33, 100, 218, 0.5); } .contact-card:hover .contact-card-icon svg { transform: rotate(8deg) scale(1.08); } @media (prefers-reduced-motion: reduce) { .contact-card.reveal, .contact-card.reveal:hover, .contact-card-icon, .contact-card:hover .contact-card-icon, .contact-card:hover .contact-card-icon svg { transform: none; } } /* -------------------------------------------------------------------------- Tačkasta pozadina (dot-grid) — port iz Natasa-Rakic (.vcard__dots) -------------------------------------------------------------------------- */ .dots-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(18, 19, 88, 0.2) 1px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(125% 85% at 50% 0%, #000 32%, transparent 82%); mask-image: radial-gradient(125% 85% at 50% 0%, #000 32%, transparent 82%); } /* Varijanta za tamne sekcije — svetle tačkice */ .dots-bg--light { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1.6px); } /* -------------------------------------------------------------------------- Eyebrow pill — mini glass „chip" oko labela sekcije (svetla + tamna varijanta) -------------------------------------------------------------------------- */ .eyebrow-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.48rem 1.1rem; border-radius: 999px; background: rgba(33, 100, 218, 0.06); border: 1px solid rgba(33, 100, 218, 0.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* Isti font i veličina teksta kao hero glass pill (.gp-inner) */ .eyebrow-pill .eyebrow { margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; } .eyebrow-pill--dark { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); } /* Tačkica identična hero pill tačkici (.live-dot) */ .ep-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--akcent); flex-shrink: 0; box-shadow: 0 0 4px rgba(33, 100, 218, 0.45); } /* -------------------------------------------------------------------------- Step kartica („Kako funkcioniše") — slojevit hover sa easing-om -------------------------------------------------------------------------- */ .step-card { position: relative; background: #fff; border: 1px solid rgba(18, 19, 88, 0.07); border-radius: 18px; padding: 2rem 1.8rem; overflow: hidden; box-shadow: 0 1px 2px rgba(18, 19, 88, 0.04), 0 10px 26px rgba(18, 19, 88, 0.05); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.7s ease, background 0.7s ease; } /* Gornja akcent linija — raste sleva na hover */ .step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--akcent), #7fb0ff); transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .step-card:hover { transform: translateY(-8px); border-color: rgba(33, 100, 218, 0.3); /* Isti broj slojeva (2) kao početno stanje → box-shadow se glatko animira kroz 0.7s */ box-shadow: 0 1px 2px rgba(18, 19, 88, 0.06), 0 26px 50px rgba(18, 19, 88, 0.16); } .step-card:hover::before { transform: scaleX(1); } .step-num { display: block; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 3rem; line-height: 1; color: rgba(33, 100, 218, 0.2); margin-bottom: 1rem; transform-origin: left center; transition: color 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } .step-card:hover .step-num { color: var(--akcent); transform: translateY(-3px) scale(1.08); } .step-title { font-size: 1.05rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; transition: color 0.3s ease; } .step-desc { font-size: 0.875rem; line-height: 1.65; color: #5a6072; } /* .reveal (koju kartice imaju) postavlja transition samo za opacity/transform i prepisuje transition sa .step-card → box-shadow bi „skakao". Ovaj specifičniji selektor vraća pun transition (uklj. box-shadow) da se senka glatko animira. */ .step-card.reveal { transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.7s ease, background 0.7s ease; } /* -------------------------------------------------------------------------- Count-up brojevi (statistika) — spring + glitch, port iz AICONNECT, akcent boja -------------------------------------------------------------------------- */ /* „Roll" reveal (Avontiv): broj sedi u maski i uklizne odozdo na scroll-in. .stat-num = maska (overflow hidden, blagi padding da se ne kljaštre glifovi), .stat-roll = sadržaj koji klizi. JS dodaje .rolled uz stagger. */ .stat-num { display: inline-flex; align-items: baseline; } .count-num { position: relative; z-index: 1; display: inline-block; } /* Po-cifra roll: svaka cifra = maska .dgt (overflow hidden), .dgt-in klizi iz nje. inline-flex → baseline poravnat sa suffiksima (+, –). Susedne cifre u suprotnim smerovima (.dgt--up odozdo / .dgt--down odozgo), stagger preko --i, sporo. */ .dgt { display: inline-flex; overflow: hidden; line-height: 1.05; } .dgt-in { display: block; line-height: 1.05; will-change: transform; transform: translateY(var(--from, 120%)); transition: transform 1.05s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: calc(var(--i, 0) * 0.07s); } .dgt--up { --from: 120%; } .dgt--down { --from: -120%; } /* Okidač: kad se brojka otkrije (reveal observer dodaje .in — pouzdano, i screenshot.mjs to forsira) ili preko .rolled (data-count-section backup). */ .stat-num.rolled .dgt-in, .reveal.in .dgt-in { transform: translateY(0); } /* Brojke bez standardnog reveal fade-a — otkrivaju se isključivo roll-om cifara. */ .nr-stat.reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .dgt-in { transition: none; transform: none; } } /* -------------------------------------------------------------------------- Glass kontakt kartica sa putujućim svetlosnim zracima (port sign-in-card-2) -------------------------------------------------------------------------- */ .glass-card-wrap { position: relative; border-radius: 22px; } /* Putujući svetlosni zraci oko ivice */ .glass-beams { position: absolute; inset: -1px; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 3; } .beam { position: absolute; filter: blur(1.5px); } .beam-top, .beam-bottom { height: 3px; width: 55%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); } .beam-left, .beam-right { width: 3px; height: 55%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.9), transparent); } .beam-top { top: 0; left: -55%; animation: beamTop 4s ease-in-out infinite; } .beam-right { top: -55%; right: 0; animation: beamRight 4s ease-in-out infinite; animation-delay: 1s; } .beam-bottom { bottom: 0; right: -55%; animation: beamBottom 4s ease-in-out infinite; animation-delay: 2s; } .beam-left { bottom: -55%; left: 0; animation: beamLeft 4s ease-in-out infinite; animation-delay: 3s; } @keyframes beamTop { 0% { left: -55%; } 55%, 100% { left: 100%; } } @keyframes beamRight { 0% { top: -55%; } 55%, 100% { top: 100%; } } @keyframes beamBottom { 0% { right: -55%; } 55%, 100% { right: 100%; } } @keyframes beamLeft { 0% { bottom: -55%; } 55%, 100% { bottom: 100%; } } .glass-card { position: relative; z-index: 1; border-radius: 22px; background: rgba(10, 12, 42, 0.55); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); overflow: hidden; } /* Suptilna unutrašnja mreža */ .glass-card::before { content: ''; position: absolute; inset: 0; opacity: 0.04; pointer-events: none; background-image: linear-gradient(135deg, #fff 0.5px, transparent 0.5px), linear-gradient(45deg, #fff 0.5px, transparent 0.5px); background-size: 30px 30px; } .glass-card > * { position: relative; z-index: 1; } /* Polja sa ikonicom (tamno staklo) */ .g-field { position: relative; display: flex; align-items: center; } .g-icon { position: absolute; left: 0.85rem; width: 16px; height: 16px; color: rgba(255, 255, 255, 0.4); pointer-events: none; transition: color 0.3s ease; } .g-icon--top { top: 0.85rem; } .g-input { width: 100%; border-radius: 0.7rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; font-size: 0.875rem; padding: 0.7rem 0.9rem 0.7rem 2.45rem; outline: none; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .g-input::placeholder { color: rgba(255, 255, 255, 0.32); } .g-input:focus { background: rgba(255, 255, 255, 0.09); border-color: rgba(33, 100, 218, 0.6); box-shadow: 0 0 0 3px rgba(33, 100, 218, 0.18); } .g-field:focus-within .g-icon { color: #fff; } .g-textarea { resize: none; } /* -------------------------------------------------------------------------- Kontakt forma — AICONNECT cf-card (3D tilt glass + zraci + corner tačkice + shine submit). Port u naš stack sa akcent/navy bojama. -------------------------------------------------------------------------- */ .cf-card-outer { position: relative; border-radius: 22px; perspective: 1200px; } .cf-beams { position: absolute; inset: -1px; border-radius: 22px; overflow: hidden; pointer-events: none; z-index: 2; } .cf-beam { position: absolute; border-radius: 3px; } .cf-beam-top { top: 0; height: 2px; width: 55%; background: linear-gradient(90deg, transparent, rgba(33,100,218,0.6), rgba(143,186,255,0.9), rgba(33,100,218,0.6), transparent); animation: cfBeamTop 3.6s cubic-bezier(0.4,0,0.6,1) infinite; } .cf-beam-right { right: 0; width: 2px; height: 55%; background: linear-gradient(180deg, transparent, rgba(33,100,218,0.6), rgba(143,186,255,0.9), rgba(33,100,218,0.6), transparent); animation: cfBeamRight 3.6s cubic-bezier(0.4,0,0.6,1) infinite; animation-delay: 0.9s; } .cf-beam-bottom { bottom: 0; height: 2px; width: 55%; background: linear-gradient(90deg, transparent, rgba(33,100,218,0.6), rgba(143,186,255,0.9), rgba(33,100,218,0.6), transparent); animation: cfBeamBottom 3.6s cubic-bezier(0.4,0,0.6,1) infinite; animation-delay: 1.8s; } .cf-beam-left { left: 0; width: 2px; height: 55%; background: linear-gradient(180deg, transparent, rgba(33,100,218,0.6), rgba(143,186,255,0.9), rgba(33,100,218,0.6), transparent); animation: cfBeamLeft 3.6s cubic-bezier(0.4,0,0.6,1) infinite; animation-delay: 2.7s; } @keyframes cfBeamTop { from { left: -55%; } to { left: 100%; } } @keyframes cfBeamRight { from { top: -55%; } to { top: 100%; } } @keyframes cfBeamBottom { from { right: -55%; } to { right: 100%; } } @keyframes cfBeamLeft { from { bottom: -55%; } to { bottom: 100%; } } .cf-corner { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(33,100,218,0.5); animation: cfCornerPulse 2s ease-in-out infinite; pointer-events: none; z-index: 3; } .cf-corner-tl { top: -3px; left: -3px; } .cf-corner-tr { top: -3px; right: -3px; animation-delay: 0.5s; } .cf-corner-br { bottom: -3px; right: -3px; animation-delay: 1s; } .cf-corner-bl { bottom: -3px; left: -3px; animation-delay: 1.5s; } @keyframes cfCornerPulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 0.9; transform: scale(1.2); box-shadow: 0 0 6px rgba(33,100,218,0.8); } } .cf-card-inner { position: relative; z-index: 1; border-radius: 22px; background: rgba(9, 11, 34, 0.82); border: 1px solid rgba(33, 100, 218, 0.14); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); padding: 40px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform 0.12s ease, border-color 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(33,100,218,0.05) inset; } .cf-card-outer:hover .cf-card-inner { border-color: rgba(33, 100, 218, 0.3); box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 48px rgba(33,100,218,0.08), 0 0 0 1px rgba(33,100,218,0.12) inset; } /* Na lg: staklena forma-kartica popuni visinu leve kolone (3 kartice) i vertikalno centrira formu → jednaka visina + simetričan razmak gore/dole. Grid je lg:items-stretch pa se #cf-card rasteže na visinu reda. */ @media (min-width: 1024px) { #cf-card { height: 100%; } #cf-card .cf-card-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; } } .cf-form { display: flex; flex-direction: column; gap: 14px; } .cf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cf-field { position: relative; display: flex; align-items: center; } .cf-field-icon { position: absolute; left: 15px; z-index: 1; color: rgba(255,255,255,0.32); pointer-events: none; display: flex; align-items: center; transition: color 0.25s ease; } .cf-field-icon svg { width: 15px; height: 15px; } .cf-field-icon-top { top: 14px; } .cf-field:focus-within .cf-field-icon { color: var(--akcent); } .cf-input { width: 100%; padding: 14px 16px 14px 42px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; outline: none; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; -webkit-appearance: none; appearance: none; } .cf-input::placeholder { color: rgba(255,255,255,0.3); } .cf-input:focus { background: rgba(33,100,218,0.06); border-color: rgba(33,100,218,0.45); box-shadow: 0 0 0 3px rgba(33,100,218,0.12); } .cf-textarea { resize: vertical; min-height: 120px; padding-top: 14px; line-height: 1.6; } .cf-select { cursor: pointer; padding-right: 42px; color: rgba(255,255,255,0.55); } .cf-select:valid { color: #fff; } .cf-select option { background: #10143a; color: #fff; } .cf-select-arr { position: absolute; right: 16px; pointer-events: none; color: rgba(255,255,255,0.4); font-size: 10px; } .cf-submit { position: relative; overflow: hidden; background: var(--akcent); color: #fff; border: none; border-radius: 12px; cursor: pointer; padding: 16px 32px; margin-top: 2px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease; box-shadow: 0 4px 24px rgba(33,100,218,0.32); } .cf-submit:hover { background: #2f74ef; transform: translateY(-2px); box-shadow: 0 10px 40px rgba(33,100,218,0.5); } .cf-submit:active { transform: translateY(0); } .cf-submit:disabled { opacity: 0.7; cursor: default; } .cf-submit-icon { font-size: 16px; transition: transform 0.25s ease; } .cf-submit:hover .cf-submit-icon { transform: translateX(5px); } .cf-shine { position: absolute; top: 0; left: -100%; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent); transform: skewX(-12deg); pointer-events: none; } .cf-submit:hover .cf-shine { transition: left 0.5s ease; left: 150%; } @media (prefers-reduced-motion: reduce) { .cf-beam, .cf-corner { animation: none; } } @media (prefers-reduced-motion: reduce) { .beam { animation: none !important; opacity: 0.4; } } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ :root { --header-h: 96px; } @media (min-width: 1024px) { :root { --header-h: 124px; } } /* Header preklapa prvu sekciju (negativna margina) → transparentan nav se stapa sa hero pozadinom (grid/glow se nastavljaju ispod njega). */ #site-header { position: sticky; top: 0; z-index: 50; margin-bottom: calc(-1 * var(--header-h)); } .header-inner { background-color: transparent; /* transparentan na vrhu */ transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; } /* prva sekcija svake strane klizi gore iza (transparentnog) headera; padding je spušta ispod nav-a da sadržaj ne ulazi pod njega. Scroll efekat = nepromenjen. */ main > section:first-of-type { padding-top: calc(var(--header-h) + 3.25rem); } /* Foto-hero (poliranje farova, dubinsko pranje) — pozadinska slika + crni gradijent overlay. Veći hero (min-height) da slika bolje diše. Sadržaj je vertikalno centriran u prostoru ispod (transparentnog) nav-a. */ .hero-photo { background: #06071a; display: flex; align-items: center; min-height: 72vh; } @media (min-width: 1024px) { .hero-photo { min-height: 86vh; } } .hero-photo > .max-w-container { width: 100%; } .hero-photo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .hero-photo-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(3, 4, 20, 0.95) 0%, rgba(3, 4, 20, 0.80) 40%, rgba(3, 4, 20, 0.34) 100%), linear-gradient(180deg, rgba(3, 4, 20, 0.55) 0%, rgba(3, 4, 20, 0) 26%, rgba(3, 4, 20, 0) 66%, rgba(3, 4, 20, 0.5) 100%); } .header-scrolled { background: rgba(18, 19, 88, 0.92); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(18, 19, 88, 0.24); } /* Broj telefona u navu — plavi glow za čitljivost preko foto hero pozadina */ .nav-phone { text-shadow: 0 0 12px rgba(33, 100, 218, 0.8), 0 1px 4px rgba(0, 0, 0, 0.55); } .nav-phone svg { filter: drop-shadow(0 0 6px rgba(33, 100, 218, 0.9)); } /* MOJSILOV wordmark pored logoa (samo početna, samo desktop — na mobilnom nema mesta zbog centriranog dugmeta telefona). Visina slova ≈ visina logoa. */ .nav-wordmark { display: none; } @media (min-width: 1024px) { .nav-wordmark { display: inline-block; font-weight: 700; text-transform: uppercase; color: #fff; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; font-size: clamp(30px, 3vw, 44px); } } .nav-link { position: relative; transition: color 0.2s ease; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; background: var(--akcent); transform: scaleX(0); transform-origin: left; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); } /* Usluge dropdown (desktop) — otvara se na hover/focus */ .nav-dd { position: relative; display: inline-flex; } .nav-dd > .nav-link { display: inline-flex; align-items: center; gap: 6px; } .nav-dd-caret { transition: transform 0.25s ease; margin-top: 1px; } .nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); } .nav-dd-panel { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); min-width: 220px; padding: 10px; background: rgba(13, 16, 48, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.25s; z-index: 60; } /* nevidljivi „most" preko razmaka između linka i panela da hover ne pukne */ .nav-dd-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 4px); } .nav-dd-link { display: block; padding: 11px 14px; border-radius: 9px; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); transition: background 0.2s ease, color 0.2s ease; } .nav-dd-link:hover, .nav-dd-link.is-active { background: rgba(33, 100, 218, 0.18); color: #fff; } /* Logo: dark logo na tamnoj podlozi → prebaci u čisto belo radi čitljivosti. (Za očuvanje brend boja, dostaviti svetlu/belu verziju logotipa.) */ .logo-img { filter: brightness(0) invert(1); } /* Logo znak (transparentni MD u boji) — zadržava originalne boje (bez belog filtera), blaga senka za odvajanje od navy pozadine. */ .logo-mark { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45)); } /* -------------------------------------------------------------------------- Footer — glass kartica sa glow blobovima (port mvpblocks footer) -------------------------------------------------------------------------- */ .footer-glass { border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.018) 100%); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 50px rgba(0, 0, 0, 0.3); } .footer-blob { position: absolute; width: 20rem; height: 20rem; border-radius: 9999px; filter: blur(80px); } .footer-col-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--akcent); margin-bottom: 1.1rem; } .footer-link { color: rgba(255, 255, 255, 0.62); font-size: 0.875rem; transition: color 0.2s ease; } .footer-link:hover { color: #fff; } /* -------------------------------------------------------------------------- Footer — AICONNECT stil (near-black + radial akcent glow, 4-kol grid, kružne social ikonice, copyright bar), sa našim bojama -------------------------------------------------------------------------- */ .ac-footer { background: #080a24; border-top: 1px solid rgba(255, 255, 255, 0.08); } .ac-footer-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(125% 125% at 50% 8%, rgba(8, 10, 36, 0.5) 45%, rgba(33, 100, 218, 0.18) 100%); } /* Moxom „cool linije" — vertikalne vodilje poravnate sa container-om (kao .bg-v-line iz Moxoma, opacity ~.16 belo), dopiru do gornje i donje ivice footera. Sloj je iznad glow-a (0), a ispod sadržaja (10) i velikog MOJSILOV wordmarka (z-[2] → iznad ostaje). */ .ac-footer-lines { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; max-width: 1500px; margin-inline: auto; padding: 0 20px; box-sizing: border-box; z-index: 1; pointer-events: none; } .ac-footer-lines .afl { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: rgba(255, 255, 255, 0.08); } /* spoljne dve linije blago akcent-tonirane (u duhu ostalih sekcija), unutrašnje diskretnije */ .ac-footer-lines .afl:first-child, .ac-footer-lines .afl:last-child { background: rgba(33, 100, 218, 0.30); } @media (min-width: 1024px) { .ac-footer-lines { padding: 0 32px; } } .ac-footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.3fr; gap: 48px; margin-bottom: 44px; } .ac-tagline { font-size: 14px; color: rgba(255, 255, 255, 0.55); line-height: 1.8; max-width: 260px; margin-top: 2px; } .ac-socials { display: flex; gap: 10px; margin-top: 24px; } .fsoc { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .fsoc:hover { border-color: var(--akcent); color: var(--akcent); transform: translateY(-2px); } .fsoc svg { width: 16px; height: 16px; } .foot-col h4 { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); margin-bottom: 20px; } .foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } .foot-col a { font-size: 14px; color: rgba(255, 255, 255, 0.6); transition: color 0.2s ease; } .foot-col a:hover { color: var(--akcent); } .ac-contact li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: rgba(255, 255, 255, 0.6); } .ac-contact a { display: flex; align-items: center; gap: 9px; } .ac-contact svg { width: 16px; height: 16px; color: var(--akcent); flex-shrink: 0; margin-top: 1px; } .ac-seo { font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, 0.32); max-width: 900px; margin-bottom: 4px; } .ac-footer-bar { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 20px; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .ac-copy { font-size: 12px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.02em; } .footer-text-section { margin-top: 6px; padding-top: 18px; padding-bottom: 26px; overflow: visible; } @media (max-width: 860px) { .ac-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; } } @media (max-width: 520px) { .ac-footer-grid { grid-template-columns: 1fr; gap: 32px; } .ac-footer-bar { flex-direction: column; align-items: flex-start; } } /* -------------------------------------------------------------------------- Footer — veliki MOJSILOV (hover-reveal + iscrtavanje). Port Aceternity „text hover effect" u vanilla SVG, sa brend plavim gradijentom i Oswaldom. -------------------------------------------------------------------------- */ .moj-wrap { width: 100%; } .moj-svg { display: block; width: 100%; height: auto; overflow: visible; } .moj-svg text { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; } /* Stalni tanki outline (jedva vidljiv na navy) — postaje jači na hover */ .moj-outline { fill: transparent; stroke: rgba(255, 255, 255, 0.10); stroke-width: 0.7; opacity: 0; transition: opacity 0.4s ease; } .moj-svg:hover .moj-outline { opacity: 0.55; } /* Iscrtavanje outline-a kad footer uđe u vidokrug */ .moj-draw { fill: transparent; stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.7; stroke-dasharray: 1400; stroke-dashoffset: 1400; } .moj-svg.in .moj-draw { animation: mojDraw 3.4s ease forwards; } /* Gradient ispis — vidljiv samo kroz radijalnu masku koja prati kursor (na hover) */ .moj-fill { fill: transparent; stroke: url(#mojGrad); stroke-width: 1.1; opacity: 0; transition: opacity 0.3s ease; } .moj-svg:hover .moj-fill { opacity: 1; } @keyframes mojDraw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .moj-draw { stroke-dashoffset: 0; animation: none; } } /* Mobilni meni */ .mobile-menu { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .mobile-menu.open { transform: translateX(0); } body.menu-open { overflow: hidden; } /* -------------------------------------------------------------------------- Hero — Moxom stil: slojeviti blokovi + ogroman wordmark + auto cutout -------------------------------------------------------------------------- */ /* Utility traka (kontakt levo, social desno) */ .utility-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; transition: background-color 0.25s ease, transform 0.25s ease; } .utility-icon:hover { background: var(--akcent); transform: translateY(-2px); } /* Glass pill (eyebrow) — realističan frosted glass: jak backdrop blur + saturacija, gornji specular highlight (odsjaj svetla), donja unutrašnja senka, crisp staklena ivica i dubinska senka. Sadržaj je u .gp-inner (z-index 1) da ostane iznad odsjaja. */ .glass-pill { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; padding: 0.48rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09); backdrop-filter: blur(12px) saturate(125%); -webkit-backdrop-filter: blur(12px) saturate(125%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, border-color 0.3s ease; } /* Vrlo suptilan gornji odsjaj */ .glass-pill::before { content: ''; position: absolute; left: 12%; right: 12%; top: 1px; height: 40%; z-index: -1; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0)); opacity: 0.5; pointer-events: none; } .glass-pill:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); } .gp-inner { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } .live-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--akcent); flex-shrink: 0; box-shadow: 0 0 4px rgba(33, 100, 218, 0.45); } .live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--akcent); animation: livePing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes livePing { 0% { transform: scale(1); opacity: 0.7; } 75%, 100% { transform: scale(2.8); opacity: 0; } } /* Hero grid — suptilne linije (nizak opacity), maskirane da su jače gore (uz sliku) i nestaju pre naslova; hero je već pun, pa linije ostaju diskretne. */ .hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 92px 62px; -webkit-mask-image: radial-gradient(120% 62% at 50% 12%, #000 28%, transparent 78%); mask-image: radial-gradient(120% 62% at 50% 12%, #000 28%, transparent 78%); } /* -------------------------------------------------------------------------- HERO SLAJDER — pun-širinski auto-rotirajući carousel (foto + navy + grid) -------------------------------------------------------------------------- */ .hero-slider { position: relative; height: clamp(540px, 82vh, 840px); overflow: hidden; outline: none; } .hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.9s ease; } .hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .hero-slide-media { position: absolute; inset: 0; background-size: cover; background-position: center; will-change: transform; } /* Navy pretman preko slike: tamno levo (gde je tekst) + tamno dole */ .hero-slide-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,10,45,0.94) 0%, rgba(9,10,45,0.78) 40%, rgba(9,10,45,0.40) 100%), /* vrh zatamnjen (nav čitljiv) + dno zatamnjeno (tačke/CTA) */ linear-gradient(180deg, rgba(9,10,45,0.55) 0%, rgba(9,10,45,0) 22%, rgba(9,10,45,0) 58%, rgba(9,10,45,0.85) 100%); } /* Home hero: slajder ide skroz do vrha, IZA transparentnog nav-a (bez navy trake od gornjeg paddinga koji dobija svaka prva sekcija). Nav preklapa prvu sliku. */ #pocetna { padding-top: 0; } .hero-slide .hero-grid { z-index: 1; opacity: 0.9; } /* Home hero: bez finog („sporednog") grida od 92×62 kockica — ostaje samo glavni gdl grid (3+3 linije = 16 polja). Element ostaje jer se gdl ubacuje kraj njega. */ #pocetna .hero-grid { background-image: none; } .hero-slide-inner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; } .hs-content { max-width: 640px; } .hs-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 600; color: #fff; line-height: 1.14; letter-spacing: 0.005em; margin-top: 1.25rem; font-size: clamp(2.5rem, 6vw, 5rem); } .hs-sub { margin-top: 1.15rem; color: rgba(255,255,255,0.82); line-height: 1.7; font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 48ch; } .hs-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .hs-btn2 { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; font-size: 0.82rem; color: #fff; padding: 0.9rem 1.5rem; border: 1px solid rgba(255,255,255,0.34); transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; } .hs-btn2:hover { border-color: #fff; background: rgba(255,255,255,0.07); transform: translateY(-2px); } /* Ken Burns na aktivnom slajdu */ @media (prefers-reduced-motion: no-preference) { .hero-slide.is-active .hero-slide-media { animation: hsKen 7s ease-out both; } @keyframes hsKen { from { transform: scale(1.09); } to { transform: scale(1); } } /* Sadržaj se pojavljuje (stagger) */ .hs-content > * { opacity: 0; transform: translateY(26px); } .hero-slide.is-active .hs-content > * { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1); } .hero-slide.is-active .hs-content > *:nth-child(1) { transition-delay: 0.15s; } .hero-slide.is-active .hs-content > *:nth-child(2) { transition-delay: 0.28s; } .hero-slide.is-active .hs-content > *:nth-child(3) { transition-delay: 0.41s; } .hero-slide.is-active .hs-content > *:nth-child(4) { transition-delay: 0.54s; } } /* Strelice */ .hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease; } .hs-arrow:hover { background: var(--akcent); border-color: var(--akcent); } .hs-prev { left: 20px; } .hs-next { right: 20px; } /* Tačke — bar stil sa progres-fillom (echo auto-rotacije) */ .hs-dots { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 10px; } .hs-dot { position: relative; width: 34px; height: 4px; padding: 0; border: 0; cursor: pointer; background: rgba(255,255,255,0.28); overflow: hidden; transition: width 0.35s ease; } .hs-dot.is-active { width: 50px; } .hs-dot-fill { position: absolute; inset: 0; background: var(--akcent); transform: scaleX(0); transform-origin: left; } @media (prefers-reduced-motion: no-preference) { .hero-slide.is-active ~ .hs-dots .hs-dot.is-active .hs-dot-fill, .hs-dot.is-active .hs-dot-fill { animation: hsProg 6s linear forwards; } @keyframes hsProg { to { transform: scaleX(1); } } .hero-slider.is-paused .hs-dot.is-active .hs-dot-fill { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .hs-dot.is-active .hs-dot-fill { transform: scaleX(1); } } @media (max-width: 767.98px) { .hero-slider { height: clamp(480px, 76vh, 660px); } .hs-arrow { display: none; } .hs-sub { display: none; } /* na telefonu čist minimalan hero: pill + naslov + CTA */ .hs-title { margin-top: 1rem; } /* Sadržaj je centriran u celoj visini slajda, ali gornjih ~96px prekriva nav → vizuelno deluje previsoko uz višak praznog prostora dole. Padding vraća centriranje u stvarno vidljivi deo i spušta sadržaj niže. */ .hero-slide-inner { padding-top: 4rem; } } /* Hero „shell" — širi od standardne sekcije (max-w-container 1500px) da hero bude veći i bliže ivicama ekrana; ostale sekcije zadržavaju normalnu marginu. */ .hero-shell { max-width: 1690px; margin-inline: auto; padding-inline: clamp(1rem, 1.7vw, 1.75rem); } /* Scena sa slojevitim blokovima (Moxom) */ .hero-stage { position: relative; } .hero-block { position: absolute; border-radius: 12px; } /* 3 bloka iza — svi centrirani vertikalno, proviruju gore I dole. 1 plavi (centar, najviši) + 2 druge boje (bočno). */ .hero-block--blue { left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(150px, 16%, 250px); height: 94%; background: var(--akcent); z-index: 0; } .hero-block--dark { top: 50%; transform: translateY(-50%); width: clamp(140px, 15%, 220px); height: 82%; background: #2b3480; z-index: 0; } .hero-block--dark.is-left { left: 21%; } .hero-block--dark.is-right { right: 21%; } /* Kompletan centralni deo hero-a (Figma export: blokovi + senka + auto) */ .hero-figma { display: block; width: 100%; height: auto; position: relative; z-index: 1; } /* 4 ugla — centrirani na male linije koje su deo slike (pozicije iz Group 33). x-centri: 15.9% (levo) / 84.4% (desno); linije na y 10.8% (gore) / 89.5% (dole). */ .hero-corner { position: absolute; z-index: 5; } .hero-corner--tl, .hero-corner--tr { display: flex; gap: 0.6rem; } .hero-corner--tl { left: 15.9%; top: 10.8%; transform: translate(-50%, calc(-100% - 22px)); } .hero-corner--tr { left: 84.4%; top: 10.8%; transform: translate(-50%, calc(-100% - 22px)); } .hero-corner--bl { left: 15.9%; top: 89.5%; transform: translate(-50%, 22px); } .hero-corner--br { left: 84.4%; top: 89.5%; transform: translate(-50%, 15px); } @media (max-width: 767.98px) { /* Na malom (skaliranom) hero-u drži uglove unutar slike, centrirane na linije */ .hero-corner--tl, .hero-corner--tr, .hero-corner--bl, .hero-corner--br { transform: translate(-50%, -50%) scale(0.6); } } /* Glavni pravougaonik = slika (navy blok sa MOJSILOV slovima) */ .hero-mainrect { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(86%, 1080px); height: auto; z-index: 1; border-radius: 4px; pointer-events: none; /* Popuni pozadinu slike bojom hero sekcije → 3 bloka se ne vide KROZ sliku, već samo iznad i ispod nje. Slova (svetlija plava) ostaju kao suptilna senka. */ background-color: var(--navy); } /* Glavni oblik = velika senka (ghost) MOJSILOV teksta, ne pun panel */ .hero-wordmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; line-height: 0.82; letter-spacing: -0.02em; font-size: clamp(3rem, 13.5vw, 13rem); color: #fff; text-align: center; user-select: none; white-space: nowrap; text-shadow: 0 6px 36px rgba(0, 0, 0, 0.55); } /* Ghost — uvećana pala slova iza (oblikuju „senku u pravougaoniku") */ .hero-wordmark--ghost { transform: translate(-50%, -50%) scale(1.28); z-index: 1; color: rgba(255, 255, 255, 0.12); text-shadow: none; } /* Auto — dole desno, IZA glavnog pravougaonika (z ispod .hero-mainrect) */ .hero-car { position: absolute; right: -1%; bottom: -2%; width: min(52%, 600px); z-index: 2; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 99%); mask-image: linear-gradient(to bottom, #000 86%, transparent 99%); } /* Inline 01–04 stavka: veliki broj + labela pored */ .feat-item { display: flex; align-items: center; gap: 1rem; } .feat-num { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(2.5rem, 4vw, 3.25rem); line-height: 1; color: #fff; } .feat-label-top { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akcent); } .feat-label-main { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1rem; color: #fff; line-height: 1.1; } @media (max-width: 900px) { .hero-block--side { display: none; } .hero-block--blue { width: 30%; } .hero-car { width: 80%; right: auto; left: 50%; transform: translateX(-50%); bottom: 6%; } .hero-wordmark { font-size: clamp(3rem, 20vw, 8rem); } } /* Mobilni mail (desni ugao hero-a) — skriven na desktopu */ .hc-mail-mobile { display: none; } /* ---- Mobilne korekcije (telefon) ---- */ @media (max-width: 767.98px) { /* Hero: samo telefon (levo) + mail (desno); bez radnog vremena, skrola, socials, lokacije */ .hero-corner--bl, .hero-corner--br { display: none; } .hc-hide-mobile { display: none !important; } .hc-mail-mobile { display: inline-flex; } /* Proširi hero sliku do ivica (poništi padding shell-a) */ .hero-stage { margin-inline: -1rem; } /* Traka 01–04: duga labela više ne prelazi u susednu kolonu */ .feat-item { gap: 0.55rem; } .feat-item > div { min-width: 0; } .feat-num { font-size: 2rem; } .feat-label-main { font-size: 0.9rem; } /* Brojke: broj iznad labele → sve staje, divideri ostaju na sredini */ .nr-stat { flex-direction: column; gap: 0.35rem; text-align: center; } .nr-stat-label { text-align: center; } } /* -------------------------------------------------------------------------- Pre/posle — Moxom showcase (navy traka + portret kartice + akcent linije). Podrazumevano se vidi POSLE; na hover (desktop) ili tap/klik (mobilni, .is-pre) se prelije na PRE. Linije/traka samo na lg. -------------------------------------------------------------------------- */ .baf-showcase { position: relative; } /* Naslov grupe iznad galerije (početna: Poliranje farova / Dubinsko pranje) */ .baf-group-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 600; letter-spacing: 0.09em; font-size: 0.82rem; color: var(--akcent); text-align: center; margin: 0 0 1.25rem; } .baf-group-title--next { margin-top: 3.5rem; } .baf-band, .baf-vline { display: none; } .baf-row { position: relative; display: grid; grid-template-columns: 1fr; gap: 20px; } .baf-card { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; cursor: ew-resize; padding: 0; border: none; background: #0b0d22; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32); touch-action: pan-y; user-select: none; --baf-split: 50%; } .baf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; } /* Slider poređenja: PRE (leva strana) je osnova, POSLE (desna strana) se otkriva prevlačenjem — clip po --baf-split (pomera ga JS/handle). */ .baf-img--pre { z-index: 1; } .baf-img--posle { z-index: 2; clip-path: inset(0 0 0 var(--baf-split)); } .baf-badge { position: absolute; top: 12px; z-index: 3; padding: 5px 12px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; backdrop-filter: blur(4px); } .baf-badge--pre { left: 12px; background: rgba(0, 0, 0, 0.6); } /* leva strana = PRE */ .baf-badge--posle { right: 12px; background: rgba(33, 100, 218, 0.9); } /* desna strana = POSLE */ /* Handle slidera — vertikalna linija + kružni grabber sa strelicama */ .baf-handle { position: absolute; top: 0; bottom: 0; left: var(--baf-split); width: 2px; background: rgba(255, 255, 255, 0.9); transform: translateX(-50%); z-index: 4; pointer-events: none; box-shadow: 0 0 8px rgba(0, 0, 0, 0.35); } .baf-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%232164da' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-4 6 4 6M15 6l4 6-4 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* Horizontalna crosshair linija (uzduž handle je vertikala), nizak opacity */ .baf-card::after { content: ''; position: absolute; z-index: 3; pointer-events: none; top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.22); } @media (min-width: 1024px) { .baf-showcase { padding: 46px 0; } .baf-band { display: block; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 64%; z-index: 0; background: var(--navy); border-radius: 22px; } .baf-row { grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 clamp(18px, 3vw, 44px); z-index: 2; } /* GPU-kompozit (translateZ) + duži even ease → lift na hover bez glitcha. */ .baf-card { aspect-ratio: 3 / 4; cursor: default; will-change: transform; transform: translateZ(0); transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.85s cubic-bezier(0.4, 0, 0.2, 1); } /* Desktop: NEMA slidera — hover otkriva POSLE (default PRE). */ .baf-card:hover { transform: translate3d(0, -6px, 0); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.42); } .baf-img { backface-visibility: hidden; } /* Prelaz PRE→POSLE: umeren (nije spor); LIFT je taj koji je spor/smooth. */ .baf-img--posle { clip-path: none; opacity: 0; transition: opacity 0.5s ease; } .baf-card:hover .baf-img--posle { opacity: 1; } .baf-handle { display: none; } .baf-badge { transition: opacity 0.45s ease; } .baf-badge--posle { opacity: 0; } .baf-card:hover .baf-badge--pre { opacity: 0; } .baf-card:hover .baf-badge--posle { opacity: 1; } /* vertikalna crosshair linija (na mobilnom je handle) */ .baf-card::before { content: ''; position: absolute; z-index: 3; pointer-events: none; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.22); } /* akcent vertikalne linije — pozicija/dužina se preciznije postavljaju iz JS-a (u razmacima traka|slika i sa krajevima između kraja slike i kraja trake). */ .baf-vline { display: block; position: absolute; top: -30px; bottom: -30px; width: 2px; z-index: 1; background: #2164da; transform: translateX(-50%); pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .baf-card, .baf-card:hover, .baf-toggle, .baf-card:hover .baf-toggle { transform: none; } } /* -------------------------------------------------------------------------- Pre/posle slajder (drag) -------------------------------------------------------------------------- */ .ba-slider { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; user-select: none; touch-action: pan-y; box-shadow: var(--shadow-lg); cursor: ew-resize; } .ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .ba-after { clip-path: inset(0 0 0 50%); will-change: clip-path; } .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 12px rgba(0, 0, 0, 0.4); } .ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%232164da' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-4 6 4 6M15 6l4 6-4 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .ba-label { position: absolute; top: 14px; padding: 5px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; backdrop-filter: blur(4px); z-index: 2; } .ba-label--pre { left: 14px; background: rgba(0, 0, 0, 0.55); } .ba-label--posle { right: 14px; background: rgba(33, 100, 218, 0.85); } /* -------------------------------------------------------------------------- Usluge — Moxom bordered grid (editorial, ne floating kartice) -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- „Kako funkcioniše" — Moxom otvorena mreža (features stil): hairline divideri, veliki broj, bez plutajućih kartica. Isti vizuelni jezik kao .svc-grid. -------------------------------------------------------------------------- */ .how-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(18, 19, 88, 0.17); border-left: 1px solid rgba(18, 19, 88, 0.17); } .how-cell { border-right: 1px solid rgba(18, 19, 88, 0.17); border-bottom: 1px solid rgba(18, 19, 88, 0.17); padding: 2rem 1.8rem 2.2rem; position: relative; transition: background-color 0.3s ease, border-color 0.7s ease; } .how-cell:hover { background: #f7f9fc; border-color: rgba(33, 100, 218, 0.5); } .how-num { display: block; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 3.25rem; line-height: 1; color: rgba(33, 100, 218, 0.18); margin-bottom: 0.75rem; transform-origin: left center; transition: color 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .how-cell:hover .how-num { color: var(--akcent); transform: translateY(-3px) scale(1.06); } .how-title { font-size: 1.1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; } .how-desc { font-size: 0.875rem; line-height: 1.65; color: #5a6072; } @media (min-width: 640px) { .how-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .how-grid { grid-template-columns: repeat(4, 1fr); } } /* -------------------------------------------------------------------------- „Naš put" (O nama) — 4 faze povezane linijom čiji se akcenat postepeno pojačava od faze 1 (bled) ka fazi 4 (pun akcent + glow) — vizuelna metafora rasta, tematski „vraćanje sjaja". Mobilno: vertikalna linija kroz ikonice; desktop (lg): horizontalna kroz centre ikonica. Linija je statična (nema animacije → nema prefers-reduced-motion problema). -------------------------------------------------------------------------- */ .path-grid { position: relative; display: flex; flex-direction: column; gap: 2.75rem; } .path-line { position: absolute; left: 31px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, rgba(33, 100, 218, 0.10), rgba(33, 100, 218, 0.40) 55%, var(--akcent)); pointer-events: none; } /* „Sjaj" na kraju puta — blur glow oko završnog segmenta linije */ .path-line::after { content: ''; position: absolute; left: -4px; bottom: 0; width: 10px; height: 20%; background: var(--akcent); filter: blur(10px); opacity: 0.45; border-radius: 999px; } .path-cell { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 1.25rem; align-items: start; } /* Neprozirnija podloga ispod glass gradijenta da linija ne prosijava kroz ikonicu */ .path-icon { background-color: rgba(255, 255, 255, 0.94); position: relative; z-index: 1; } @media (min-width: 1024px) { .path-grid { flex-direction: row; gap: 2.5rem; } .path-cell { flex: 1; display: block; } .path-cell .path-icon { margin-bottom: 1.4rem; } .path-line { left: 0; right: 0; top: 31px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, rgba(33, 100, 218, 0.10), rgba(33, 100, 218, 0.40) 55%, var(--akcent)); } .path-line::after { left: auto; right: 0; top: -4px; bottom: auto; width: 18%; height: 10px; } } /* -------------------------------------------------------------------------- Osnivač (O nama) — Stitch-inspirisan overlap: slika iza, podignuta tamna glass kartica preko (backdrop-blur daje „fade" tamo gde prekriva sliku). GridCard hover efekat (port React/shadcn komponente u vanilla, brend boje): ugaoni grid pattern koji se pomera na hover + conic glow koji se pali. -------------------------------------------------------------------------- */ .founder-wrap { position: relative; } /* Slika + tanke bele linije koje je presecaju — layer ISPOD kartice, ne izlaze iz slike (crosshair kao na Stitch referenci). */ .founder-img { position: relative; z-index: 0; } .founder-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.6); } .fi-line { position: absolute; background: rgba(255, 255, 255, 0.22); pointer-events: none; } .fi-line--v { top: 0; bottom: 0; left: 50%; width: 1px; } .fi-line--h { left: 0; right: 0; top: 50%; height: 1px; } /* Kartica — tamna glass + hover lift; z-index iznad slike i njenih linija */ .founder-card { position: relative; isolation: isolate; overflow: hidden; z-index: 2; border-radius: 20px; background: rgba(13, 16, 48, 0.72); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.7s ease, box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1); } /* Sve hover animacije na ovoj kartici traju 0.7s (uklj. ikonice — samo ovde, kontakt sekcija zadržava svoj tempo) */ .founder-card .contact-card-icon { transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.7s ease, color 0.7s ease, box-shadow 0.7s ease; } .founder-card .contact-card-icon svg { transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } .founder-card:hover { transform: translateY(-3px); border-color: rgba(33, 100, 218, 0.35); box-shadow: 0 36px 70px -24px rgba(33, 100, 218, 0.28); } /* GridCard pozadinski slojevi */ .gc-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .gc-pattern { position: absolute; inset: -25%; transform: skewY(-12deg); -webkit-mask-image: linear-gradient(225deg, #000, transparent 55%); mask-image: linear-gradient(225deg, #000, transparent 55%); } .gc-pattern svg { position: absolute; inset: 0; transform: translateY(10px); transition: transform 0.7s ease-out; } .founder-card:hover .gc-pattern svg { transform: translateY(0); } .gc-glow { position: absolute; inset: -10%; opacity: 0; filter: blur(50px); transition: opacity 0.7s ease; background: conic-gradient(from 0deg, #2164da 0deg, #2164da 117deg, #7fb0ff 180deg, #293681 240deg, #2164da 360deg); } .founder-card:hover .gc-glow { opacity: 0.16; } /* Sadržaj kartice: intro levo + 2×2 vrednosti desno (desktop). Vrednosti su razdvojene suptilnim belim hairline dividerima (bez gap-a), svaka sa svojim paddingom radi čitljivosti. */ :root { --fcl: rgba(255, 255, 255, 0.10); } .founder-card-inner { position: relative; z-index: 1; padding: 32px 26px; display: grid; gap: 36px; } .fc-values { display: grid; grid-template-columns: 1fr; align-content: center; } .fv-item { display: flex; gap: 16px; align-items: center; padding: 22px 4px; } /* mobilno (1 kolona): linija između svake vrednosti */ .fv-item + .fv-item { border-top: 1px solid var(--fcl); } /* Sve 4 ikonice se animiraju kad se KARTICA hoveruje — ublažen pop */ .founder-card:hover .contact-card-icon { background: var(--akcent); color: #fff; transform: translateY(-2px) scale(1.04) rotate(-3deg); box-shadow: 0 8px 18px rgba(33, 100, 218, 0.4); } .founder-card:hover .contact-card-icon svg { transform: rotate(3deg) scale(1.03); } @media (min-width: 640px) { /* 2×2 sa hairline dividerima kroz sredinu (vertikalni + horizontalni) */ .fc-values { grid-template-columns: 1fr 1fr; } .fv-item { padding: 22px 20px; } .fv-item + .fv-item { border-top: none; } .fv-item:nth-child(2n) { border-left: 1px solid var(--fcl); } .fv-item:nth-child(n+3) { border-top: 1px solid var(--fcl); } .founder-card-inner { padding: 40px 36px; } } /* Mobilno: kartica se penje preko donjeg dela slike */ @media (max-width: 1023.98px) { .founder-card { margin: -48px 12px 0; } .founder-img img { aspect-ratio: 16 / 10; } } /* Desktop: slika levo (viša od kartice), kartica preklapa veći deo slike */ @media (min-width: 1024px) { .founder-wrap { display: flex; align-items: center; } .founder-img { flex: 0 0 46%; max-width: 46%; } .founder-img img { aspect-ratio: 4 / 5; } .founder-card { flex: 1; margin-left: -18%; } .founder-card-inner { grid-template-columns: 1fr 1.25fr; gap: 44px; padding: 48px 44px; } } @media (prefers-reduced-motion: reduce) { .founder-card, .founder-card:hover, .founder-card:hover .contact-card-icon, .founder-card:hover .contact-card-icon svg, .gc-pattern svg { transform: none; } } .svc-grid { border-top: 1px solid rgba(18, 19, 88, 0.17); border-left: 1px solid rgba(18, 19, 88, 0.17); } .svc-cell { border-right: 1px solid rgba(18, 19, 88, 0.17); border-bottom: 1px solid rgba(18, 19, 88, 0.17); padding: 2.25rem; transition: background-color 0.3s ease, border-color 0.7s ease; position: relative; } .svc-cell:hover { background: #f7f9fc; border-color: var(--akcent); } /* Deljene ivice susednih kartica — obojene preko JS klasa (leva ivica = desni border levog suseda; gornja ivica = donji border kartice iznad). Bez zadebljanja. */ .svc-cell.lit-right { border-right-color: var(--akcent); } .svc-cell.lit-bottom { border-bottom-color: var(--akcent); } /* Izlazne linije te kartice se PUNE akcentom (isti 1px), od kartice ka ivici */ .svc-cell:hover .svc-line--left, .svc-cell:hover .svc-line--right, .svc-cell:hover .svc-line--top, .svc-cell:hover .svc-line--bottom { background-size: 100% 100%; } /* Ikonica — zabavna spring pop animacija na hover */ .svc-cell:hover .svc-icon { background: var(--akcent); color: #fff; transform: translateY(-4px) scale(1.1) rotate(-8deg); } .svc-cell:hover .svc-icon svg { transform: rotate(8deg) scale(1.08); } /* Moxom „glass" pločica ikonice — radial gradient (belo → akcent), providni border, backdrop-blur, meka senka. Reskin na naš akcent, vidljivo na belom. Veličina/glif ostaju semantični za naše usluge; hover pop animacija ispod je netaknuta. */ .svc-icon { width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--akcent); background-color: rgba(255, 255, 255, 0.5); background-image: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.9) 20%, rgba(33, 100, 218, 0.22) 100%); border: 1.5px solid rgba(33, 100, 218, 0.18); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 8px 20px -10px rgba(33, 100, 218, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75); transition: background-color 0.3s ease, color 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .svc-icon > svg { width: 30px; height: 30px; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .svc-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--akcent); } /* Otvorena mreža (Moxom): ukloni spoljni levi border (kol 1: usluge 1,4) i desni (kol 3: usluge 3,6), pa tanke linije (isti stil kao borderi) „izlaze" iz uglovnih kartica ka ivicama ekrana. Samo na lg (3-kolonski raspored). */ .svc-line { display: none; position: absolute; pointer-events: none; background-color: rgba(18, 19, 88, 0.17); /* osnovni tanki potez */ background-image: linear-gradient(var(--akcent), var(--akcent)); /* akcent fill */ background-repeat: no-repeat; transition: background-size 0.7s ease; } /* Horizontalne — pune se od kartice (right/left anchor) ka levoj/desnoj ivici */ .svc-line--left { top: 50%; right: 100%; height: 1px; width: 50vw; background-position: right center; background-size: 0% 100%; } .svc-line--right { top: 50%; left: 100%; height: 1px; width: 50vw; background-position: left center; background-size: 0% 100%; } /* Vertikalne — pune se od kartice (bottom/top anchor) ka vrhu/dnu sekcije */ .svc-line--top { left: 50%; bottom: 100%; width: 1px; height: 100vh; background-position: center bottom; background-size: 100% 0%; } .svc-line--bottom { left: 50%; top: 100%; width: 1px; height: 100vh; background-position: center top; background-size: 100% 0%; } @media (min-width: 1024px) { .svc-grid { border-left: none; border-top: none; } /* gornji border prelazi na kartice reda 1 → moguće ga obojiti po kartici */ .svc-cell:nth-child(-n+3) { border-top: 1px solid rgba(18, 19, 88, 0.17); } .svc-cell--no-r { border-right: none; } .svc-line { display: block; } } /* -------------------------------------------------------------------------- Cenovnik — Moxom otvorena bordered mreža + toggle veličine vozila. Sadržaj svake celije je centriran (flex center + text-center) pa „sedi" simetrično između horizontalnih linija. Redovi se poravnavaju preko kolona jer su celije direktna deca grida (deljeni row-track = ista visina reda). -------------------------------------------------------------------------- */ .pricing-wrap { position: relative; } :root { --pr-line: rgba(18, 19, 88, 0.14); } /* toggle veličine — ponaša se kao prvi (naslovni) red tabele */ .pr-tabs { display: flex; border-top: 1px solid var(--pr-line); } .pr-tab { flex: 1; padding: 0.95rem 1rem; text-align: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8b90a5; background: transparent; cursor: pointer; border-right: 1px solid var(--pr-line); border-bottom: 1px solid var(--pr-line); transition: background-color 0.3s ease, color 0.3s ease; } .pr-tab:last-child { border-right: none; } .pr-tab:hover { color: var(--navy); background: #f7f9fc; } .pr-tab.is-active { color: var(--akcent); background: rgba(33, 100, 218, 0.07); } .pricing-grid { display: grid; grid-template-columns: 1fr; } .pricing-grid > * { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-bottom: 1px solid var(--pr-line); padding: 1rem 1.25rem; } /* mobilni: naglasi početak svake usluge (glava usluge) */ .pr-head { border-top: 1px solid var(--pr-line); } /* glava koja dolazi odmah posle toggle-a (auta, enterijera) — toggle već odvaja */ .pr-tabs + .pr-head { border-top: none; } /* Per-service toggle veličine (mobilni, iznad auta i enterijera) — grid dete, ali se ponaša kao red tabova. Na desktopu skriven (globalni toggle je gore). */ .pricing-grid > .pr-tabs { flex-direction: row; padding: 0; border-top: none; border-bottom: none; } .pr-head { padding: 1.65rem 1.25rem 1.45rem; gap: 0.35rem; } .pr-sub { font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: #9aa0b4; } .pr-title { line-height: 1.1; font-size: 1.25rem; } .pr-price { display: flex; align-items: baseline; justify-content: center; gap: 0.3rem; margin-top: 0.25rem; } .pr-pre, .pr-cur { font-size: 0.8rem; color: #9aa0b4; } .pr-amount { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 2.4rem; line-height: 1; color: var(--navy); } .pr-amount.is-updating { animation: prPulse 0.4s ease; } @keyframes prPulse { 0% { opacity: 0.25; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } } .pr-benefit { font-size: 0.9rem; color: #5a6072; padding: 0.9rem 1.25rem; } .pr-cta { padding: 1.5rem 1.25rem; } .pr-cta .btn { width: 100%; } .pr-cta .glow-btn { width: 100%; } /* ukrasne vertikalne linije — izlaze iz centra spoljnih kolona (≈1/6 i 5/6), gore iznad tabova i dole ispod dugmadi. Samo na lg. */ .pr-vline { display: none; position: absolute; width: 1px; background: var(--pr-line); pointer-events: none; } .pr-vline--tl, .pr-vline--tr { bottom: 100%; height: 58px; } .pr-vline--bl, .pr-vline--br { top: 100%; height: 58px; } .pr-vline--tl, .pr-vline--bl { left: 16.666%; } .pr-vline--tr, .pr-vline--br { left: 83.333%; } @media (min-width: 1024px) { /* 3 kolone, 6 redova (glava + 4 benefita + dugme); column-flow → DOM je „po usluzi", a puni se kolona po kolona. */ .pricing-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, auto); grid-auto-flow: column; } .pricing-grid > * { border-right: 1px solid var(--pr-line); } .pr-c3 { border-right: none; } /* poslednja kolona (enterijera) — otvorena desno */ .pr-head { border-top: none; } /* liniju iznad glave daje pr-tabs */ .pricing-grid > .pr-tabs { display: none; } /* per-service toggle samo na mobilnom */ .pr-vline { display: block; } } @media (max-width: 1023.98px) { .pricing-wrap > .pr-tabs { display: none; } /* globalni toggle sakriven na mobilnom */ } /* Home cenovnik: svaka kolona ima svoj toggle (poliranje: bez/sa keramikom; dubinsko: veličina vozila) → per-kolona toggle vidljiv i na desktopu, 7 redova. */ @media (min-width: 1024px) { #cenovnik .pricing-grid { grid-template-rows: repeat(7, auto); } #cenovnik .pricing-grid > .pr-tabs { display: flex; } } /* Duže labele poliranje toggla (2 opcije) — smanji tracking/veličinu da stanu */ .pr-tabs--far .pr-tab { letter-spacing: 0.04em; font-size: 0.66rem; padding-left: 0.5rem; padding-right: 0.5rem; } /* -------------------------------------------------------------------------- Cenovnik — DARK varijanta (podstranice, navy sekcija). Ista otvorena bordered mreža, ali bele hairline linije + beli tekst. Postavljanjem --pr-line na .is-dark, sve .pr-* celije nasleđuju svetlu liniju. -------------------------------------------------------------------------- */ .pricing-wrap.is-dark { --pr-line: rgba(255, 255, 255, 0.14); } .pricing-wrap.is-dark .pr-sub { color: rgba(255, 255, 255, 0.5); } .pricing-wrap.is-dark .pr-title { color: #fff; } .pricing-wrap.is-dark .pr-amount { color: #fff; } .pricing-wrap.is-dark .pr-pre, .pricing-wrap.is-dark .pr-cur { color: rgba(255, 255, 255, 0.5); } .pricing-wrap.is-dark .pr-benefit { color: rgba(255, 255, 255, 0.72); } .pricing-wrap.is-dark .pr-tab { color: rgba(255, 255, 255, 0.5); } .pricing-wrap.is-dark .pr-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } .pricing-wrap.is-dark .pr-tab.is-active { color: #8fbaff; background: rgba(33, 100, 218, 0.20); } /* „flag" u glavi kolone (Preporučeno / Najkompletnije) — suptilan akcenat */ .pr-flag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8fbaff; margin-bottom: 0.15rem; } .pr-flag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* 2-kolonska mreža (poliranje farova — cena ne zavisi od veličine) */ @media (min-width: 1024px) { .pricing-grid--2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, auto); /* glava + 3 benefita + dugme */ grid-auto-flow: column; } .pricing-grid--2 .pr-col-last { border-right: none; } /* poslednja kolona otvorena desno */ .pricing-grid--2 .pr-head { border-top: 1px solid var(--pr-line); } /* nema toggle-a → glava daje gornju liniju */ } /* ukrasne vertikalne linije za 2 kolone — centri kolona na 25% i 75% */ .pricing-wrap--2 .pr-vline--tl, .pricing-wrap--2 .pr-vline--bl { left: 25%; } .pricing-wrap--2 .pr-vline--tr, .pricing-wrap--2 .pr-vline--br { left: 75%; } /* -------------------------------------------------------------------------- Brojke + recenzije (Moxom) — otvorena bordered mreža na navy sekciji. Ćelije su providne (grid-gradient pozadina se vidi), samo tanke bele linije dele sadržaj. Brojke gore (4), recenzije dole (3 × ime/tekst/zvezdice). -------------------------------------------------------------------------- */ :root { --nrl: rgba(255, 255, 255, 0.12); } .nr-stats { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--nrl); } .nr-stat { display: flex; align-items: center; justify-content: center; gap: 0.9rem; padding: 1.6rem 1rem; } .nr-stat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: rgba(255, 255, 255, 0.6); line-height: 1.15; text-align: left; } .nr-reviews { display: grid; grid-template-columns: 1fr; } .nr-name { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.1rem; color: #fff; text-align: center; padding: 1.5rem 1.25rem; border-bottom: 1px solid var(--nrl); } .nr-text { text-align: center; font-style: italic; color: rgba(255, 255, 255, 0.72); line-height: 1.7; padding: 1.6rem 1.5rem; } .nr-stars { text-align: center; color: #8fbaff; letter-spacing: 0.2em; font-size: 1.6rem; padding: 1.5rem 1.25rem; } /* Pager recenzija — fade pri promeni strane (JS: .nr-swapping na .nr-reviews) */ .nr-name, .nr-text, .nr-stars { transition: opacity 0.28s ease; } .nr-reviews.nr-swapping .nr-name, .nr-reviews.nr-swapping .nr-text, .nr-reviews.nr-swapping .nr-stars { opacity: 0; } .nr-controls { margin-top: 2.75rem; } /* Grid pozadina ove sekcije — kvadratna kockica (JS na lg postavlja tačan px = razmak između linije desno od 200+ i linije pored prvog imena). background-position -5px → prva kolona kockica je uža za 5px. */ [data-count-section] .hero-grid { background-size: 92px 92px; background-position: -5px 0; } /* Vertikalni divideri koji se produžavaju do ivica sekcije: 3 (stat) do gornje ivice, 2 (recenzije) do donje. Dopune popunjavaju vertikalni padding (py-24 = 6rem). Samo na lg (gde su 4-kol brojke i 3-kol recenzije). */ .nr-vline { display: none; } @media (min-width: 1024px) { .nr-stats, .nr-reviews { position: relative; } .nr-vline { display: block; position: absolute; width: 1px; background: var(--nrl); pointer-events: none; } .nr-vtop { top: -6rem; height: 6rem; } /* od gornje ivice sekcije do linije stats */ .nr-vbot { top: 100%; height: 6rem; } /* od linije reviews do donje ivice sekcije */ } /* mobilni: linije unutar i između recenzija + 2×2 brojke */ @media (max-width: 1023.98px) { .nr-stat:nth-child(2n) { border-left: 1px solid var(--nrl); } .nr-stat:nth-child(n+3) { border-top: 1px solid var(--nrl); } .nr-stars { border-top: 1px solid var(--nrl); } .nr-name:nth-child(n+4) { border-top: 1px solid var(--nrl); } } @media (min-width: 1024px) { .nr-stats { grid-template-columns: repeat(4, 1fr); } .nr-stat:not(:first-child) { border-left: 1px solid var(--nrl); } /* 3 kolone, 3 reda (ime / tekst / zvezdice); column-flow → DOM je „po recenziji". */ .nr-reviews { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr auto; grid-auto-flow: column; } /* min-height drži sekciju ujednačene visine kroz strane pagera — bez toga visina skače prema najdužoj recenziji na strani i strelice beže ispod kursora. */ .nr-text { border-bottom: 1px solid var(--nrl); min-height: 13rem; } .nr-reviews > *:nth-child(n+4):not(.nr-vline) { border-left: 1px solid var(--nrl); } } /* -------------------------------------------------------------------------- FAQ akordeon -------------------------------------------------------------------------- */ /* Moxom editorijalni FAQ — dvokolonski (naslov levo, lista desno), hairline okvir, redni brojevi 01–06 kao overline akcent. */ .faq-layout { display: grid; grid-template-columns: 1fr; gap: 44px; } @media (min-width: 1024px) { .faq-layout { grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; } .faq-aside { position: sticky; top: 140px; } } /* Moxom otvoreni bordered okvir — vidljive 1px linije oko liste i između stavki, kao services grid. Bez radijusa (sharp). */ .faq-list { border: 1px solid rgba(18, 19, 88, 0.16); } .faq-item { border-bottom: 1px solid rgba(18, 19, 88, 0.16); } .faq-item:last-child { border-bottom: none; } .faq-item.open { background: #f7f9fc; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.55rem 1.75rem; text-align: left; cursor: pointer; color: var(--navy); transition: color 0.25s ease; } .faq-q:hover { color: var(--akcent); } .faq-qmain { display: flex; align-items: baseline; gap: 1.15rem; min-width: 0; } .faq-num { flex-shrink: 0; width: 1.6ch; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 1; letter-spacing: 0.02em; color: var(--akcent); opacity: 0.28; transition: opacity 0.25s ease; } .faq-item.open .faq-num, .faq-q:hover .faq-num { opacity: 1; } .faq-qtext { font-weight: 600; font-size: 1.1rem; line-height: 1.35; } .faq-icon { flex-shrink: 0; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); color: var(--akcent); } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-a { overflow: hidden; max-height: 0; transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; opacity: 0; } .faq-item.open .faq-a { opacity: 1; } .faq-a-inner { padding: 0 1.75rem 1.65rem 4.4rem; color: #4a5169; line-height: 1.7; max-width: 60ch; } /* -------------------------------------------------------------------------- OUTLINE OKVIR sa ćoškastim kockicama (21st.dev DotPattern referenca). Samo tanak border + 4 pune akcent kockice na ćoškovima, bez pozadine kartice i bez dot patterna. ::after nosi sve 4 kockice (multi-background), inset:-4px pa straddluju border. Radi na svetloj i tamnoj podlozi (akcent se vidi na obe). -------------------------------------------------------------------------- */ .bracket-frame { position: relative; background: none; border: 1px solid rgba(33, 100, 218, 0.35); border-radius: 0; } .bracket-frame::after { content: ''; position: absolute; inset: -4px; pointer-events: none; z-index: 6; background-image: linear-gradient(var(--akcent), var(--akcent)), linear-gradient(var(--akcent), var(--akcent)), linear-gradient(var(--akcent), var(--akcent)), linear-gradient(var(--akcent), var(--akcent)); background-size: 8px 8px; background-repeat: no-repeat; background-position: left top, right top, left bottom, right bottom; } /* Osnivač kartica → SAMO menja border (oštar outline + ćoškaste kockice). Kartica ostaje ista: glass podloga, preklapanje preko slike, grid pattern, backdrop-blur i hover lift se zadržavaju (menja se samo ivica). */ .founder-card.bracket-frame { background: rgba(13, 16, 48, 0.72); overflow: visible; /* da se vide kockice na ćoškovima */ border: 1px solid rgba(33, 100, 218, 0.45); } .founder-card.bracket-frame .gc-bg { overflow: hidden; } /* pattern ostaje isečen na karticu */ /* FAQ spisak → outline oko celog spiska, bez pozadine otvorene stavke */ .faq-list.bracket-frame { border: 1px solid rgba(33, 100, 218, 0.35); } .faq-list.bracket-frame .faq-item.open { background: none; } /* Kontakt forma → SAMO menja border (outline + ćoškaste kockice). Zadržava glass podlogu, 3D tilt hover (udubljivanje) i zrake; okrugle ugaone tačkice zamenjuju kvadratići. */ .cf-card-outer.bracket-frame .cf-corner { display: none; } .cf-card-outer.bracket-frame .cf-card-inner, .cf-card-outer.bracket-frame .cf-beams { border-radius: 0; } /* oštri ćoškovi (bez radiusa) uz outline */ /* -------------------------------------------------------------------------- ĆOŠKASTI L-OKVIRI (21st.dev Card „corners" varijanta) — suptilan border + akcent L-zagrade u sva 4 ćoška. Koristi ::before jer .svc-cell/.how-cell već imaju shine-sweep na ::after. Hover na tim karticama ostaje netaknut. -------------------------------------------------------------------------- */ .corner-frame { position: relative; border: 1px solid rgba(33, 100, 218, 0.22); } .corner-frame::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; --l: 16px; --t: 2px; --c: var(--akcent); background-image: linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)); background-repeat: no-repeat; background-size: var(--l) var(--t), var(--t) var(--l), var(--l) var(--t), var(--t) var(--l), var(--l) var(--t), var(--t) var(--l), var(--l) var(--t), var(--t) var(--l); background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom; } /* „Siguran rezultat" (poliranje) how-grid — razdvoji kartice (ukloni deljene ivice grida + razmak), svaka nosi svoj L-okvir. */ .how-grid.cf-sep { border: none; gap: 18px; } /* Footer kartice (Navigacija/Usluge/Kontakt) — okviru treba unutrašnji prostor. */ .foot-col.corner-frame { padding: 22px 20px; } /* -------------------------------------------------------------------------- BENEFIT LISTA (21st.dev „category-list" adaptacija) — red-kartice u 2 kolone. Hover: akcent ivica + suptilan tint + senka + L-zagrade (gore-levo/dole-desno) + naslov u akcentu + ikonica uklizne s desna. Prilagođeno navy/akcent brendu. -------------------------------------------------------------------------- */ .bl-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .bl-grid { grid-template-columns: 1fr 1fr; gap: 12px 16px; } } .bl-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; gap: 16px; min-height: 74px; padding: 16px 22px; border: 1px solid rgba(18, 19, 88, 0.14); background: #fff; transition: border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .bl-card:hover { border-color: var(--akcent); background: rgba(33, 100, 218, 0.05); box-shadow: 0 12px 30px -12px rgba(33, 100, 218, 0.3); transform: translateY(-2px); } .bl-title { font-weight: 600; font-size: 1.02rem; color: var(--navy); line-height: 1.3; transition: color 0.3s ease; } .bl-card:hover .bl-title { color: var(--akcent); } /* Ikonica levo — ista „glass" pločica kao .svc-icon (belo→akcent gradijent, akcent border, meka senka), samo manja. Uvek vidljiva (sajt lep bez hovera / na telefonu); na hover se pločica popuni akcentom i glif pređe u „stiklirani" check (isti hover jezik kao ostale ikonice na sajtu). */ .bl-ico { position: relative; width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; color: var(--akcent); background-color: rgba(255, 255, 255, 0.5); background-image: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.9) 20%, rgba(33, 100, 218, 0.22) 100%); border: 1.5px solid rgba(33, 100, 218, 0.18); box-shadow: 0 8px 20px -10px rgba(33, 100, 218, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75); transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .bl-card:hover .bl-ico { background-color: var(--akcent); background-image: none; color: #fff; border-color: transparent; transform: translateY(-2px) scale(1.06) rotate(-6deg); } .bl-ico svg { grid-area: 1 / 1; width: 22px; height: 22px; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .bl-ico-chk { opacity: 0; transform: scale(0.5); } .bl-card:hover .bl-ico-def { opacity: 0; transform: scale(0.5); } .bl-card:hover .bl-ico-chk { opacity: 1; transform: none; } /* L-zagrade (gore-levo + dole-desno), pojavljuju se na hover */ .bl-card::before, .bl-card::after { content: ''; position: absolute; width: 15px; height: 15px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .bl-card::before { top: 9px; left: 9px; border-top: 2px solid var(--akcent); border-left: 2px solid var(--akcent); } .bl-card::after { bottom: 9px; right: 9px; border-bottom: 2px solid var(--akcent); border-right: 2px solid var(--akcent); } .bl-card:hover::before, .bl-card:hover::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .bl-card, .bl-card:hover { transform: none; } } /* -------------------------------------------------------------------------- Kontakt stranica — info kartice i mapa (forma je deljena cf-card sa početne). 4 dugačke kartice: flex:1 → zajedno pune visinu kolone (= visina forme). -------------------------------------------------------------------------- */ .kf-ic { flex: 1; display: flex; align-items: center; gap: 20px; padding: 18px 26px; } .kf-map { border-radius: 20px; overflow: hidden; border: 1px solid rgba(18, 19, 88, 0.12); box-shadow: 0 20px 45px -25px rgba(18, 19, 88, 0.35); } .kf-map iframe { display: block; width: 100%; height: 420px; border: 0; } @media (min-width: 1024px) { .kf-map iframe { height: 480px; } } /* Checklist (dubinsko pranje) — 10 stavki, check ikonice, hairline divideri */ .dp-check { list-style: none; } .dp-check li { display: flex; align-items: center; gap: 14px; padding: 15px 2px; font-size: 1rem; color: var(--navy); font-weight: 500; border-bottom: 1px solid rgba(18, 19, 88, 0.10); } .dp-check-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--akcent); background: rgba(33, 100, 218, 0.12); } /* na sm+ poslednji red svake kolone bez donje linije */ @media (min-width: 640px) { .dp-check li:nth-last-child(-n+1) { border-bottom: none; } .dp-check li:nth-last-child(2):nth-child(odd) { border-bottom: none; } } /* ========================================================================== USLUGA STRANICE — Moxom „line-grid" nadogradnja (poliranje/dubinsko). Sve skropovano na .deco da ne dira ostatak sajta. Linije se poravnavaju sa kolonom sadržaja i dopiru do ivica sekcije (nisu nasumične). ========================================================================== */ /* Blueprint ram — vertikalne vodilje na ivicama kolone + ugaone oznake */ .deco main > section { position: relative; overflow: hidden; } /* --- Oblici (promišljeni, tematski + edgy) ------------------------------- */ /* Koncentrični prstenovi — na temu (far/poliranje = krug); maskirani (bez tvrde ivice) */ .ring-deco { position: absolute; width: 560px; height: 560px; border-radius: 50%; z-index: 0; pointer-events: none; background: repeating-radial-gradient(circle at center, transparent 0 31px, rgba(255, 255, 255, 0.065) 31px 32px); -webkit-mask-image: radial-gradient(circle at center, #000 36%, transparent 70%); mask-image: radial-gradient(circle at center, #000 36%, transparent 70%); } .ring-deco--light { background: repeating-radial-gradient(circle at center, transparent 0 31px, rgba(18, 19, 88, 0.05) 31px 32px); } .ring-deco--tr { top: -190px; right: -170px; } .ring-deco--br { bottom: -190px; right: -170px; } .ring-deco--bl { bottom: -190px; left: -170px; } .ring-deco--tl { top: -190px; left: -170px; } /* Dijagonalni hatch (edgy tehnički motiv) — kos, maskiran u ugao */ .hatch-deco { position: absolute; width: 150px; height: 150px; z-index: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(33, 100, 218, 0.13) 7px 9px); -webkit-mask-image: radial-gradient(circle at center, #000, transparent 72%); mask-image: radial-gradient(circle at center, #000, transparent 72%); } .hatch-deco--tr { top: 26px; right: 26px; } .hatch-deco--tl { top: 26px; left: 26px; } .hatch-deco--br { bottom: 26px; right: 26px; } .hatch-deco--bl { bottom: 26px; left: 26px; } /* „+" node oznake (blueprint) */ .plus-node { position: absolute; width: 15px; height: 15px; z-index: 0; pointer-events: none; } .plus-node::before, .plus-node::after { content: ''; position: absolute; background: rgba(33, 100, 218, 0.5); } .plus-node--light::before, .plus-node--light::after { background: rgba(127, 176, 255, 0.55); } .plus-node::before { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); } .plus-node::after { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); } .plus-node--tr { top: 32px; right: 42px; } .plus-node--tl { top: 32px; left: 42px; } .plus-node--br { bottom: 32px; right: 42px; } .plus-node--bl { bottom: 32px; left: 42px; } /* HUD ugaone zagrade (edgy tehnički ram) oko hero slike — 4 oštra ugla */ .hero-shot { position: relative; } .hero-shot::after { content: ''; position: absolute; inset: -12px; z-index: 3; pointer-events: none; --hb: 2px; --hl: 20px; --hc: rgba(33, 100, 218, 0.7); background: linear-gradient(var(--hc) 0 0) 0 0 / var(--hl) var(--hb), linear-gradient(var(--hc) 0 0) 0 0 / var(--hb) var(--hl), linear-gradient(var(--hc) 0 0) 100% 0 / var(--hl) var(--hb), linear-gradient(var(--hc) 0 0) 100% 0 / var(--hb) var(--hl), linear-gradient(var(--hc) 0 0) 0 100% / var(--hl) var(--hb), linear-gradient(var(--hc) 0 0) 0 100% / var(--hb) var(--hl), linear-gradient(var(--hc) 0 0) 100% 100% / var(--hl) var(--hb), linear-gradient(var(--hc) 0 0) 100% 100% / var(--hb) var(--hl); background-repeat: no-repeat; } /* Sadržaj iznad dekoracija (z-1). Robusno: svi direktni ne-dekorativni, ne-aria-hidden potomci sekcije (ne samo .max-w-container — home hero ima drugačiju strukturu). aria-hidden absolutni overlay-i (grid/gradient) ostaju iza (svoj z-0). */ .deco main > section > *:not(.uframe):not(.ring-deco):not(.hatch-deco):not(.plus-node):not([aria-hidden="true"]) { position: relative; z-index: 1; } .uframe { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .uf-col { position: absolute; inset: 0; width: 100%; max-width: 1500px; margin-inline: auto; } .uf-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(18, 19, 88, 0.07); } .uframe--dark .uf-line { background: rgba(255, 255, 255, 0.08); } .uf-line--l { left: 20px; } .uf-line--r { right: 20px; } /* ugaone „tick" oznake (tehnički crtež) na krajevima svake vodilje */ .uf-line::before, .uf-line::after { content: ''; position: absolute; left: -3px; width: 7px; height: 1px; background: inherit; } .uf-line::before { top: 0; } .uf-line::after { bottom: 0; } @media (min-width: 1024px) { .uf-line--l { left: 32px; } .uf-line--r { right: 32px; } } /* Shine sweep na karticama (cool hover) — samo ćelije bez spoljnih elemenata. svc-cell sa .svc-line (početna Usluge, Kontakt) IZUZET: overflow:hidden bi klipovao ukrasne linije koje vire van kartice. */ .deco .svc-cell:not(:has(.svc-line)), .deco .how-cell { position: relative; overflow: hidden; } .deco .svc-cell:not(:has(.svc-line))::after, .deco .how-cell:not(.fill-up)::after { content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 48%; background: linear-gradient(100deg, transparent, rgba(33, 100, 218, 0.10), transparent); transform: skewX(-16deg); pointer-events: none; opacity: 0; transition: left 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; } .deco .svc-cell:not(:has(.svc-line)):hover::after, .deco .how-cell:not(.fill-up):hover::after { left: 135%; opacity: 1; } /* Put brenda (O nama) — hover na bilo koju fazu pali „glow" (box-shadow) na plavoj liniji koja povezuje faze, umesto ranijeg shine-sweep-a preko kartice. Hovered faza dodatno dobija akcentnu ikonicu. */ .path-line { transition: box-shadow 0.4s ease; } .path-grid:has(.path-cell:hover) .path-line { box-shadow: 0 0 16px 2px rgba(33, 100, 218, 0.55), 0 0 4px rgba(33, 100, 218, 0.9); } .path-cell .path-icon { transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .path-cell:hover .path-icon { border-color: rgba(33, 100, 218, 0.55); box-shadow: 0 8px 22px -8px rgba(33, 100, 218, 0.5); transform: translateY(-3px); } /* Cenovnik kartice (card-dark) — akcent linija na vrhu izraste na hover (bez overflow:hidden zbog „Preporučeno" badge-a koji viri) */ .deco .card-dark { position: relative; } .deco .card-dark::before { content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 2px; background: linear-gradient(90deg, transparent, var(--akcent), #7fb0ff, transparent); transform: scaleX(0); opacity: 0; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; } .deco .card-dark:hover::before { transform: scaleX(1); opacity: 1; } /* Pre/posle galerija — ugaone L-zagrade (Moxom framed gallery), 2 nasuprotna ugla */ .deco .baf-showcase::before, .deco .baf-showcase::after { content: ''; position: absolute; width: 24px; height: 24px; z-index: 3; pointer-events: none; } .deco .baf-showcase::before { top: -12px; left: -12px; border-top: 2px solid rgba(18, 19, 88, 0.22); border-left: 2px solid rgba(18, 19, 88, 0.22); } .deco .baf-showcase::after { bottom: -12px; right: -12px; border-bottom: 2px solid rgba(18, 19, 88, 0.22); border-right: 2px solid rgba(18, 19, 88, 0.22); } /* Checklist (dubinsko) — vertikalni divider između dve kolone */ @media (min-width: 640px) { .deco .dp-check::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(18, 19, 88, 0.10); transform: translateX(-50%); } } /* -------------------------------------------------------------------------- Grid draw-in appear — port „accent-lines" efekta iz React hero-minimalism komponente u vanilla (reskin na brend). NE menja postojeće grid pozadine: JS (site.js) ubacuje ovaj overlay preko svake .hero-grid pozadine, a linije se iscrtavaju (scaleX/scaleY + akcent shimmer) kad sekcija uđe u vidokrug. -------------------------------------------------------------------------- */ .gdl { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .gdl span { position: absolute; background: rgba(255, 255, 255, 0.10); opacity: 0; will-change: transform, opacity; } .gdl .gdl-h { height: 1px; left: 0; right: 0; transform: scaleX(0); transform-origin: 50% 50%; } .gdl .gdl-v { width: 1px; top: 0; bottom: 0; transform: scaleY(0); transform-origin: 50% 0%; } .gdl span:nth-child(1) { top: 20%; } .gdl span:nth-child(2) { top: 50%; } .gdl span:nth-child(3) { top: 80%; } .gdl span:nth-child(4) { left: 20%; } .gdl span:nth-child(5) { left: 50%; } .gdl span:nth-child(6) { left: 80%; } /* shimmer preliv dok se linija crta — akcent-light umesto belog iz originala */ .gdl span::after { content: ''; position: absolute; inset: 0; opacity: 0; } .gdl .gdl-h::after { background: linear-gradient(90deg, transparent, rgba(127, 176, 255, 0.35), transparent); } .gdl .gdl-v::after { background: linear-gradient(180deg, transparent, rgba(127, 176, 255, 0.35), transparent); } /* animacije kreću tek kad JS doda .play (sekcija ušla u vidokrug) */ .gdl.play .gdl-h { animation: gdlDrawX 800ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } .gdl.play .gdl-v { animation: gdlDrawY 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } .gdl.play span::after { animation: gdlShimmer 900ms ease-out forwards; } .gdl.play span:nth-child(1), .gdl.play span:nth-child(1)::after { animation-delay: 150ms; } .gdl.play span:nth-child(2), .gdl.play span:nth-child(2)::after { animation-delay: 280ms; } .gdl.play span:nth-child(3), .gdl.play span:nth-child(3)::after { animation-delay: 410ms; } .gdl.play span:nth-child(4), .gdl.play span:nth-child(4)::after { animation-delay: 520ms; } .gdl.play span:nth-child(5), .gdl.play span:nth-child(5)::after { animation-delay: 640ms; } .gdl.play span:nth-child(6), .gdl.play span:nth-child(6)::after { animation-delay: 760ms; } @keyframes gdlDrawX { 0% { transform: scaleX(0); opacity: 0; } 60% { opacity: 0.9; } 100% { transform: scaleX(1); opacity: 0.75; } } @keyframes gdlDrawY { 0% { transform: scaleY(0); opacity: 0; } 60% { opacity: 0.9; } 100% { transform: scaleY(1); opacity: 0.75; } } @keyframes gdlShimmer { 0% { opacity: 0; } 30% { opacity: 0.3; } 100% { opacity: 0; } } /* -------------------------------------------------------------------------- Scroll reveal — usklađeno sa Moxom appear animacijama (Webflow IX2): SLIDE_EFFECT (slide+fade) trajanje 1000ms, easing outQuart (cubic-bezier(0.165,0.84,0.44,1)); GROW_EFFECT (scale 0.75→1) = .reveal-grow. -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); } .reveal.in { opacity: 1; transform: none; } /* GROW varijanta (Moxom GROW_EFFECT): izrasta iz scale 0.75 + fade */ .reveal-grow { transform: scale(0.75); } .reveal-grow.in { transform: none; } /* Stagger — koraci ~0.12s (usklađeno sa dužim 1s trajanjem) */ .reveal-delay-1 { transition-delay: 0.12s; } .reveal-delay-2 { transition-delay: 0.24s; } .reveal-delay-3 { transition-delay: 0.36s; } /* -------------------------------------------------------------------------- Pomoćne -------------------------------------------------------------------------- */ .divider-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(18,19,88,0.14), transparent); } .text-balance { text-wrap: balance; } .link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; transition: gap 0.25s ease, color 0.2s ease; } .link-arrow:hover { gap: 0.7rem; } /* ========================================================================== AVONTIV ADAPTACIJE (2026-07-08) — reskin na navy/akcent v. research/2026-07-08-avontiv-teardown-full.md ========================================================================== */ /* -------------------------------------------------------------------------- 1) FOTO HERO v2 (poliranje / dubinsko) — sticky „cover" scroll. Slika ostaje statična (sticky, z-0), sledeća sekcija (relative, z-1, puna pozadina) klizi preko nje. Naslov + CTA dole levo, staklena grid-kartica desno. -------------------------------------------------------------------------- */ .deco main > section.hero2 { position: sticky; top: 0; z-index: 0; overflow: hidden; padding-top: 0; } .hero2 { min-height: 100svh; display: flex; align-items: flex-end; background: #06071a; padding: 0; } .hero2-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .hero2-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(3,4,20,0.92) 0%, rgba(3,4,20,0.55) 34%, rgba(3,4,20,0.12) 62%, rgba(3,4,20,0.28) 100%), linear-gradient(0deg, rgba(3,4,20,0.90) 0%, rgba(3,4,20,0.15) 42%, rgba(3,4,20,0) 70%); } /* Ogromna grid mreža (Avontiv) — velike ćelije, suptilne bele linije */ .hero2-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,0.13) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.13) 1px, transparent 1px); /* JS (alignHeroGrid) na desktopu prepiše size/position tako da kartica sedi tačno u jednoj ćeliji; ovo je fallback (mobilni / pre skripte). */ background-size: clamp(240px, 26vw, 460px) clamp(220px, 24vw, 380px); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, #000 32%); /* Sakriven dok se JS ne poravna (bez vidljivog „snap"-a pri učitavanju); onda se nežno pojavi. */ opacity: 0; transition: opacity 0.5s ease; } .hero2-grid.is-aligned { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero2-grid { transition: none; } } .hero2-inner { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: end; padding-block: clamp(6rem, 11vh, 10rem) clamp(4.5rem, 10vh, 8rem); } .hero2-lead { max-width: 40rem; } .hero2-eyebrow { margin-bottom: 1.25rem; } .hero2-title { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.12; color: #fff; font-size: clamp(2.6rem, 6.4vw, 5.5rem); text-shadow: 0 6px 34px rgba(0,0,0,0.5); } /* Duži naslovi (npr. „Dubinsko pranje" / „Poliranje farova") — malo manji da svaki red stane bez prelamanja (2 reda umesto 3 na desktopu). */ .hero2-title--fit { font-size: clamp(2.3rem, 5vw, 4.4rem); } .hero2-lead .glow-btn { margin-top: 2rem; } /* Staklena grid kartica desno (Avontiv .fda-cta-box + corner squares → naš bracket-frame) */ .hero2-card { position: relative; background: rgba(9, 11, 34, 0.42); -webkit-backdrop-filter: blur(22px) saturate(130%); backdrop-filter: blur(22px) saturate(130%); padding: clamp(1.9rem, 3vw, 3rem) clamp(1.6rem, 2.6vw, 2.75rem); } .hero2-card .hero2-eyebrow { margin-bottom: 1.1rem; } .hero2-card-title { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.12; color: #fff; font-size: clamp(1.5rem, 2.3vw, 2.15rem); margin-bottom: 1.1rem; } .hero2-card-body { color: rgba(255,255,255,0.78); line-height: 1.7; font-size: 0.975rem; } @media (min-width: 1024px) { .hero2-inner { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: end; } .hero2-card { max-width: 34rem; justify-self: end; } } /* Sledeća sekcija klizi preko sticky hero-a */ .hero2 + section { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 2) FILL-UP HOVER na step karticama (Avontiv about) — puni se odozdo navy, tekst i broj postaju beli. Akcent linija: leva u mirovanju, donja na hover. Primenjuje se na .how-cell koje NEMAju .corner-frame (koraci 01–04). -------------------------------------------------------------------------- */ .how-cell.fill-up { position: relative; overflow: hidden; border-left: 2px solid var(--akcent); /* akcent linija levo (mirovanje) */ isolation: isolate; } .how-cell.fill-up::after { /* donja akcent linija — izraste sleva na hover (iznad fill sloja) */ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2; background: var(--akcent); transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .how-cell.fill-up .fill-bg { /* navy sloj koji se puni odozdo na gore — even easing (oseti se, ne snapuje) */ position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--plava), var(--navy)); transform: scaleY(0); transform-origin: bottom; transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .how-cell.fill-up > :not(.fill-bg) { transition: color 0.7s ease; } .how-cell.fill-up:hover { background: transparent; border-left-color: var(--akcent); } .how-cell.fill-up:hover .fill-bg { transform: scaleY(1); } .how-cell.fill-up:hover::after { transform: scaleX(1); } .how-cell.fill-up:hover .how-num { color: #fff; } .how-cell.fill-up:hover .how-title { color: #fff; } .how-cell.fill-up:hover .how-desc { color: rgba(255,255,255,0.82); } @media (prefers-reduced-motion: reduce) { .how-cell.fill-up .fill-bg, .how-cell.fill-up::after { transition: none; } } /* -------------------------------------------------------------------------- 3) GALERIJA — paginacija (desktop 3-po-3, mobilni 1 sa strelicama). JS (site.js) renderuje kartice po stranici i vezuje kontrole. -------------------------------------------------------------------------- */ .baf-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2.25rem; } .baf-controls.is-hidden { display: none; } .baf-nav { width: 46px; height: 46px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(18, 19, 88, 0.22); background: transparent; cursor: pointer; color: var(--navy); transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease; } .baf-nav:hover { border-color: var(--akcent); color: var(--akcent); } .baf-nav:active { transform: scale(0.94); } .baf-nav:disabled { opacity: 0.35; cursor: default; } .baf-nav svg { width: 20px; height: 20px; } /* Varijanta na tamnoj (navy) podlozi */ .baf-controls--dark .baf-nav { border-color: rgba(255,255,255,0.22); color: #fff; } .baf-controls--dark .baf-nav:hover { border-color: var(--akcent); color: #8fbaff; } .baf-counter { font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.08em; font-size: 0.95rem; color: var(--navy); min-width: 3.5rem; text-align: center; } .baf-controls--dark .baf-counter { color: rgba(255,255,255,0.75); } /* Kratki fade pri promeni stranice + spor/smooth lift na hover. NAPOMENA: ovo pravilo (veća specifičnost) definiše celu `transition` za kartice, pa MORA da sadrži i transform/box-shadow — inače lift ostane bez ease-a. */ .baf-row.is-swapping .baf-card { opacity: 0; } .baf-row .baf-card { transition: opacity 0.28s ease, transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.85s cubic-bezier(0.4, 0, 0.2, 1); } /* Mobilni: jedna kartica po strani (JS renderuje 1), pun širina */ @media (max-width: 1023.98px) { .baf-row { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 4) DIGIT REEL (odometar) — duži roll: svaka cifra prolazi kroz više 0–9 ciklusa pre nego što stane. Brzo pa uspori (ease-out), NE sporo. Zamenjuje raniji jednocifreni .dgt-in slide. -------------------------------------------------------------------------- */ .dgt { display: inline-block; overflow: hidden; height: 1em; line-height: 1; vertical-align: baseline; } .dgt-reel { display: flex; flex-direction: column; will-change: transform; transform: translateY(0); transition: transform var(--roll-dur, 2.4s) cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 0.12s); } .dgt-reel > span { display: block; height: 1em; line-height: 1; text-align: center; } .stat-num.rolled .dgt-reel, .reveal.in .dgt-reel { transform: translateY(calc(var(--stop, 0) * -1em)); } @media (prefers-reduced-motion: reduce) { .dgt-reel { transition: none; transform: translateY(calc(var(--stop, 0) * -1em)); } } /* -------------------------------------------------------------------------- 5) SEKCIJSKA RADIAL POZADINA (21st.dev bg-snippet, naše boje) — gore svetlije, dole tamnije, smooth. Za pricing (navy) sekcije na podstranicama. -------------------------------------------------------------------------- */ .sec-radial { position: relative; } .sec-radial > .sec-radial-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(130% 105% at 50% 0%, rgba(33,100,218,0.20) 0%, rgba(41,54,129,0.10) 34%, rgba(6,7,26,0) 72%), linear-gradient(180deg, #1a2352 0%, #121358 40%, #0a0b26 100%); } /* Paket checklist (dubinsko — šta uključuje svaki paket): akcent check ispred stavke */ .pkg-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.1rem; } .pkg-list li { position: relative; padding-left: 1.7rem; font-size: 0.875rem; line-height: 1.45; color: #4a5169; } .pkg-list li::before { content: ''; position: absolute; left: 0; top: 0.12em; width: 1.05rem; height: 1.05rem; flex-shrink: 0; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232164da' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } .pkg-list li.pkg-free { font-weight: 600; color: var(--navy); } /* Poređenje paketa (dubinsko) — tabela razlika između paketa */ .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(18, 19, 88, 0.12); } .cmp-table { width: 100%; min-width: 620px; border-collapse: collapse; } .cmp-table th, .cmp-table td { padding: 0.78rem 1.1rem; text-align: center; border-bottom: 1px solid rgba(18, 19, 88, 0.09); } .cmp-table thead th { background: var(--navy); color: #fff; vertical-align: bottom; border-bottom: none; } .cmp-table thead th .cmp-name { display: block; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; line-height: 1.15; } .cmp-table thead th .cmp-price { display: block; font-size: 0.72rem; font-weight: 600; color: #8fbaff; margin-top: 0.3rem; } .cmp-feat { text-align: left !important; } .cmp-table td.cmp-feat { color: #3a4059; font-size: 0.875rem; font-weight: 500; } .cmp-table tbody tr:last-child td { border-bottom: none; } .cmp-table tbody tr:hover td { background: #f7f9fc; } .cmp-table th.cmp-hl { background: #0d1147; } .cmp-table td.cmp-hl { background: rgba(33, 100, 218, 0.06); } .cmp-table tbody tr:hover td.cmp-hl { background: rgba(33, 100, 218, 0.1); } .cmp-flag { display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8fbaff; margin-bottom: 0.35rem; } .cmp-yes, .cmp-no { display: inline-block; vertical-align: middle; } .cmp-yes { width: 22px; height: 22px; border-radius: 50%; background-color: var(--akcent); background-repeat: no-repeat; background-position: center; background-size: 13px 13px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } .cmp-no { width: 14px; height: 2.5px; border-radius: 2px; background: rgba(18, 19, 88, 0.22); } /* Kratka zaglavlja se pale samo na telefonu */ .cmp-short { display: none; } /* Telefon: cela tabela mora da stane u širinu ekrana — bez cimanja levo-desno. Uža zaglavlja (kratki nazivi), zbijeniji padding, manje ikonice, fiksni layout da 3 kolone paketa budu jednake, a naziv usluge uzme ostatak i prelama se. */ @media (max-width: 767.98px) { .cmp-wrap { overflow-x: visible; } .cmp-table { min-width: 0; width: 100%; table-layout: fixed; } .cmp-full { display: none; } .cmp-short { display: inline; } .cmp-table th, .cmp-table td { padding: 0.6rem 0.2rem; } .cmp-table th.cmp-feat, .cmp-table td.cmp-feat { width: 43%; padding-left: 0.7rem; padding-right: 0.5rem; } .cmp-table td.cmp-feat { font-size: 0.76rem; line-height: 1.32; } .cmp-table thead th { padding-top: 0.8rem; padding-bottom: 0.7rem; } .cmp-table thead th .cmp-name { font-size: 0.72rem; line-height: 1.2; } .cmp-table thead th .cmp-price { font-size: 0.62rem; margin-top: 0.22rem; } .cmp-flag { display: none; } /* nema mesta u uskoj koloni; istaknuta pozadina ostaje */ .cmp-yes { width: 18px; height: 18px; background-size: 11px 11px; } .cmp-no { width: 11px; height: 2px; } } /* -------------------------------------------------------------------------- ZONA RADA — Leaflet mapa sa granicom pokrivenosti (sharp, brend akcent) -------------------------------------------------------------------------- */ .zona-map-frame { position: relative; border: 1px solid rgba(18, 19, 88, 0.14); box-shadow: 0 24px 60px rgba(18, 19, 88, 0.10); background: #fff; } #mapa-zona { height: 340px; width: 100%; background: #eef0f5; z-index: 0; } @media (min-width: 1024px) { #mapa-zona { height: 500px; } } /* Leaflet kontrole i popup u brend maniru */ #mapa-zona .leaflet-control-zoom a { color: var(--navy); border-color: rgba(18, 19, 88, 0.12); } #mapa-zona .leaflet-bar { border-radius: 0; box-shadow: 0 6px 16px rgba(18, 19, 88, 0.16); } #mapa-zona .leaflet-bar a { border-radius: 0 !important; } #mapa-zona .leaflet-popup-content-wrapper, #mapa-zona .leaflet-popup-tip { border-radius: 0; } #mapa-zona .leaflet-popup-content { font-family: inherit; color: var(--navy); } /* Centralni pin (bez eksternih slika — brend akcent) */ .zona-pin span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--akcent); border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(33, 100, 218, 0.35), 0 6px 14px rgba(33, 100, 218, 0.45); } .zona-legend { position: absolute; left: 14px; bottom: 14px; z-index: 500; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(18, 19, 88, 0.12); padding: 0.5rem 0.75rem; font-size: 0.78rem; font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 12px rgba(18, 19, 88, 0.12); } .zona-legend-swatch { width: 16px; height: 12px; background: rgba(33, 100, 218, 0.14); border: 1.5px solid var(--akcent); display: inline-block; } .zona-areas { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 1.75rem; } @media (min-width: 768px) { .zona-areas { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } .zona-col-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.08em; color: var(--akcent); margin-bottom: 0.9rem; } .zona-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .zona-chip { display: inline-block; padding: 0.34rem 0.7rem; font-size: 0.8rem; font-weight: 500; color: #3a4059; background: #fff; border: 1px solid rgba(18, 19, 88, 0.14); } /* -------------------------------------------------------------------------- MOBILNE DORADE — declutter (bez grida i „+" oznaka) + scroll highlight puta -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* Bez pozadinskog grida i „+" blueprint oznaka na malom ekranu (smetaju) */ .hero-grid, .gdl { display: none; } .plus-node { display: none; } /* IZUZETAK: hero slajder na početnoj zadržava glavni gdl grid (16 polja). Samo slajd-nivo (ne i sekcijski), da ne dobijemo dva preklopljena grida. */ #pocetna .hero-slide .gdl { display: block; } /* Eyebrow pill UNUTAR hero kartice (Više od pranja / Rezultat koji traje / Brzo i bez obaveze / Naša priča) — sakriven na telefonu (lead eyebrow ostaje). */ .hero2-card .hero2-eyebrow { display: none; } } /* Put brenda / proces (path-grid) — na mobilnom se vertikalna linija progresivno „pali" u zavisnosti od skrola, a ikonica dostignute faze zumira. (Desktop zadržava horizontalnu liniju + hover.) */ @media (max-width: 1023.98px) { .path-line { background: rgba(33, 100, 218, 0.15); } .path-line::after { display: none; } .path-line::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--path-progress, 0) * 100%); background: linear-gradient(180deg, var(--akcent), #7fb0ff); box-shadow: 0 0 12px rgba(33, 100, 218, 0.55); border-radius: 999px; } .path-cell .path-icon { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.35s ease, box-shadow 0.35s ease; } .path-cell.is-reached .path-icon { transform: scale(1.14); border-color: rgba(33, 100, 218, 0.6); box-shadow: 0 10px 24px -6px rgba(33, 100, 218, 0.6); } /* Numerisane step kartice — broj i kartica prelaze u navy dok se skroluje (isti princip kao linija; kumulativno do dokle je korisnik stigao). */ .how-cell.fill-up.is-reached { border-left-color: var(--akcent); background: rgba(33, 100, 218, 0.05); } .how-cell.fill-up.is-reached .how-num { color: var(--navy); transform: translateY(-2px) scale(1.05); } .how-cell.fill-up.is-reached .how-title { color: var(--navy); } } @media (prefers-reduced-motion: reduce) { .path-cell.is-reached .path-icon { transform: none; } .how-cell.fill-up.is-reached .how-num { transform: none; } } /* Poštuj korisnike koji smanjuju animacije */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } }