): Layout / utility .container centriran wrapper (--maxw) .container.narrow uži wrapper za tekst-heavy strane (--maxw-narrow) .section vertikalni ritam sekcije (--section-y) .section--sunken tamnija pozadina (footer/CTA zona) .eyebrow UPPERCASE kicker iznad naslova, magma boja .lead uvodni paragraf (veći, muted) .prose blok dugačkog teksta (max 68ch, lista, h2/h3) .slash-sep kosi (brend) separator, 1px sa CMYK stopovima [data-reveal] reveal-on-scroll meta (JS dodaje .in) Header / nav .site-header .header-inner .brand .brand-mark .brand-word .nav .nav-toggle .nav-menu .has-mega .mega .mega-col .mega-head (Proizvodi podmeni) .header-cta .btn-phone Dugmad .btn .btn-primary .btn-ghost .btn-block .pill mali tag/oznaka (npr. brojevi u traci) Hero .hero .hero-inner .hero-cta Trust traka (beskonačni marquee) .trust .trust-list .trust-item .marquee .marquee-track .marquee-group (4 iste grupe, -25% loop) Bento / kartice .bento 12-col grid .bento-cell ćelija (span preko --span / --row) .bento-cell--accent magma-soft akcenat ćelija (krupan broj) .stat .stat-num .stat-label .card .card-media .card-body .card-link (kartica usluge) .card-grid auto-fill grid kartica Slajder usluga (scroll-snap; bez JS-a = običan horizontalni scroll) .slider[data-slider] .slider-track .slider-card .slider-ui .slider-btn .slider-progress (pali ih site.js, klasa is-ready) Scroll linija (js/scrollline.js crta SVG u

) .scroll-line .line .node .node.lit Galerija + lightbox .gallery .gallery-filters .chip .gallery-grid .gallery-item .lightbox .lightbox-img .lightbox-cap .lightbox-nav .lightbox-close Forma .form .field .field-row .field-label .field-input .field-error .field--hp honeypot (skriven) .form-aside bočni NAP blok uz formu FAQ .faq .faq-item .faq-q .faq-a CTA traka / footer .cta-band .cta-band-inner .site-footer .footer-inner .footer-col .footer-brand .footer-head .footer-tag .footer-about .footer-bottom .cmyk-dots .footer-credit Razno .skip-link .badge-row .feature-list Napomena: je namerno ostavljen kao hook za WP temu (per-page body klase pri prelasku u WordPress) — nije mrtav atribut. ===================================================================== */ /* ---------- @font-face (self-host; latin + latin-ext: č ć š ž đ) ---------- */ @font-face{ font-family:"Space Grotesk"; src:url("/fonts/space-grotesk-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F; } @font-face{ font-family:"Space Grotesk"; src:url("/fonts/space-grotesk-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F; } @font-face{ font-family:"Space Grotesk"; src:url("/fonts/space-grotesk-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F; } @font-face{ font-family:"Inter"; src:url("/fonts/inter-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F; } @font-face{ font-family:"Inter"; src:url("/fonts/inter-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F; } @font-face{ font-family:"Inter"; src:url("/fonts/inter-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F; } /* ---------- Tokeni ---------- */ :root{ /* Baza (nosi je html; body transparentan da 3D canvas prosija) */ --c-bg: #0A0908; --c-bg-raise: #131110; --c-bg-raise-2: #1B1817; --c-bg-sunken: #060504; /* Tekst */ --c-text: #F4F1EE; --c-text-muted: #B9B2AB; --c-text-dim: #8A817A; --c-text-on-accent:#1A0E08; /* Magma akcenat (brend crvena iz logoa #FF2136) */ --c-accent: #FF3B2E; --c-accent-bright: #FF2136; --c-accent-ember: #C81E12; --c-accent-glow: #FF7A1A; --grad-magma: linear-gradient(135deg, #E0301F 0%, #FF2136 42%, #FF6A2C 78%, #FFA23A 100%); --grad-magma-soft: linear-gradient(135deg, rgba(255,33,54,.16), rgba(255,122,26,.10)); --c-accent-tint: rgba(255,59,46,.12); /* CMYK mikro-potpis (samo sitni akcenti) */ --c-cyan: #00AEEF; --c-magenta: #EC008C; --c-yellow: #FFD200; --c-key: #1A1A1A; /* Linije / borderi / staklo */ --c-line: rgba(244,241,238,.10); --c-line-strong: rgba(244,241,238,.18); --c-line-accent: rgba(255,59,46,.45); --c-glass: rgba(19,17,16,.62); /* Stanja */ --c-success: #34C759; --c-warning: #FFB020; --c-error: #FF4D4D; /* Tipografija */ --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif; --font-text:"Inter","Segoe UI",system-ui,sans-serif; --fs-display: clamp(2.6rem, 6vw + 1rem, 5.5rem); --fs-h1: clamp(2.1rem, 4vw + .5rem, 3.5rem); --fs-h2: clamp(1.6rem, 2.4vw + .5rem, 2.4rem); --fs-h3: clamp(1.25rem, 1.4vw + .4rem, 1.55rem); --fs-lead: clamp(1.05rem, .6vw + .85rem, 1.3rem); --fs-body: 1.0625rem; --fs-small: .9375rem; --fs-micro: .8125rem; --lh-tight: 1.05; --lh-head: 1.15; --lh-body: 1.65; --tracking-display: -.02em; --tracking-eyebrow: .14em; /* Spacing (4px baza) */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem; --section-y: clamp(4rem, 9vw, 8rem); --gutter: clamp(1.25rem, 4vw, 3rem); --maxw: 1240px; --maxw-narrow:760px; /* Radijusi */ --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --bd:1px solid var(--c-line); --bd-strong:1px solid var(--c-line-strong); /* Senke */ --sh-sm:0 1px 2px rgba(0,0,0,.5); --sh-md:0 10px 30px -10px rgba(0,0,0,.7); --sh-lg:0 24px 60px -16px rgba(0,0,0,.8); --glow-accent:0 0 0 1px var(--c-line-accent), 0 8px 40px -8px rgba(255,59,46,.35); --header-h: 72px; --ease-out: cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } *{ margin:0; } /* html nosi boju; body transparentan zbog fixed 3D canvasa iza sadržaja */ html{ background:var(--c-bg); color-scheme:dark; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 1rem); /* off-canvas meni je position:fixed pa beži iz body overflow-a; klip ide na root */ overflow-x:clip; } body{ background:transparent; color:var(--c-text); font-family:var(--font-text); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100svh; overflow-x:hidden; } /* fallback kad nema WebGL / reduced-motion (bg3d.js doda .bg-static na html) */ html.bg-static{ background: radial-gradient(1200px 600px at 12% -10%, rgba(255,122,26,.12), transparent 60%), radial-gradient(900px 500px at 88% 8%, rgba(255,33,54,.08), transparent 60%), var(--c-bg); } canvas#bg3d{ position:fixed; inset:0; z-index:-1; pointer-events:none; display:block; } img,svg,video{ display:block; max-width:100%; height:auto; } img{ border-style:none; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } button{ background:none; border:none; cursor:pointer; } ul,ol{ list-style:none; padding:0; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:var(--lh-head); letter-spacing:var(--tracking-display); text-wrap:balance; } :focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; border-radius:4px; } ::selection{ background:var(--c-accent); color:var(--c-text-on-accent); } ::-webkit-scrollbar{ width:12px; height:12px; } ::-webkit-scrollbar-track{ background:var(--c-bg-sunken); } ::-webkit-scrollbar-thumb{ background:#2a2522; border-radius:8px; border:3px solid var(--c-bg-sunken); } /* ---------- Skip link ---------- */ .skip-link{ position:fixed; top:8px; left:8px; z-index:200; background:var(--c-accent); color:var(--c-text-on-accent); padding:.6rem 1rem; border-radius:var(--r-md); font-weight:600; transform:translateY(-160%); transition:transform .2s var(--ease-out); } .skip-link:focus{ transform:translateY(0); } /* ---------- Layout helpers ---------- */ .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .container.narrow{ max-width:var(--maxw-narrow); } .section{ padding-block:var(--section-y); position:relative; } .section--sunken{ background:var(--c-bg-sunken); } .section--tight{ padding-block:clamp(2.5rem,5vw,4rem); } .eyebrow{ display:inline-block; font-family:var(--font-text); font-weight:600; font-size:var(--fs-micro); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--c-accent); margin-bottom:var(--sp-4); } .lead{ font-size:var(--fs-lead); color:var(--c-text-muted); max-width:62ch; line-height:1.6; } .section-head{ max-width:64ch; margin-bottom:var(--sp-7); } .section-head h2{ font-size:var(--fs-h2); margin-bottom:var(--sp-3); } .section-head .lead{ margin-top:var(--sp-2); } /* dugačak tekst (blog / stručni blokovi) */ .prose{ max-width:68ch; } .prose > * + *{ margin-top:var(--sp-4); } .prose h2{ font-size:var(--fs-h2); margin-top:var(--sp-7); } .prose h3{ font-size:var(--fs-h3); margin-top:var(--sp-6); color:var(--c-text); } .prose p{ color:var(--c-text-muted); } .prose a{ color:var(--c-accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .prose a:hover{ color:var(--c-accent-glow); } .prose strong{ color:var(--c-text); font-weight:600; } .prose ul,.prose ol{ padding-left:1.2rem; color:var(--c-text-muted); } .prose ul li{ list-style:disc; margin-top:var(--sp-2); } .prose ol li{ list-style:decimal; margin-top:var(--sp-2); } .prose ul li::marker,.prose ol li::marker{ color:var(--c-accent); } .prose img{ border-radius:var(--r-lg); border:var(--bd); } /* kosi brend separator sa CMYK potpisom */ .slash-sep{ height:1px; border:0; margin:0; background:linear-gradient(90deg, transparent 0, var(--c-line-strong) 8%, var(--c-cyan) 30%, var(--c-magenta) 50%, var(--c-yellow) 70%, var(--c-line-strong) 92%, transparent 100%); opacity:.5; transform:skewY(-.35deg); } /* ---------- Dugmad ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--font-text); font-weight:600; font-size:var(--fs-body); line-height:1; padding:.95rem 1.6rem; min-height:48px; border-radius:var(--r-md); border:1px solid transparent; cursor:pointer; text-align:center; transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out); } .btn:active{ transform:translateY(1px); } .btn-primary{ background-image:var(--grad-magma); color:var(--c-text-on-accent); box-shadow:0 6px 22px -8px rgba(255,59,46,.5); } .btn-primary:hover{ box-shadow:var(--glow-accent); transform:translateY(-2px); } .btn-ghost{ background:transparent; color:var(--c-text); border-color:var(--c-line-strong); } .btn-ghost:hover{ border-color:var(--c-line-accent); background:var(--c-accent-tint); } .btn-block{ width:100%; } .pill{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-small); font-weight:500; padding:.35rem .8rem; border-radius:var(--r-pill); border:var(--bd); color:var(--c-text-muted); background:var(--c-bg-raise); } /* ---------- Header / nav ---------- */ .site-header{ position:sticky; top:0; z-index:100; /* blaga skrim traka na vrhu da nav tekst ne gubi kontrast nad svetlim česticama 3D scene pre skrola */ background:linear-gradient(180deg, rgba(6,5,4,.55), transparent); transition:background-color .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s; border-bottom:1px solid transparent; } .site-header.is-stuck{ background:var(--c-glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--c-line); box-shadow:var(--sh-md); } .header-inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); min-height:var(--header-h); display:flex; align-items:center; gap:var(--sp-5); } .brand{ display:inline-flex; align-items:center; gap:.6rem; flex:0 0 auto; } .brand-mark{ width:40px; height:40px; border-radius:8px; object-fit:cover; background:#fff; /* logo ima crnu koja se stapa s bazom — svetli kontejner da „M" diše */ padding:3px; box-shadow:0 0 0 1px var(--c-line-strong); } .brand-word{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:.01em; color:var(--c-text); } .nav{ margin-left:auto; } .nav-menu{ display:flex; align-items:center; gap:var(--sp-2); } .nav-menu > li{ position:relative; } .nav-menu > li > a{ display:inline-flex; align-items:center; gap:.35rem; padding:.6rem .75rem; font-weight:500; color:var(--c-text-muted); position:relative; border-radius:var(--r-sm); transition:color .18s var(--ease-out); } .nav-menu > li > a::after{ /* CMYK underline sweep */ content:""; position:absolute; left:.75rem; right:.75rem; bottom:.32rem; height:2px; background:linear-gradient(90deg,var(--c-cyan),var(--c-magenta),var(--c-yellow)); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease-out); border-radius:2px; } .nav-menu > li > a:hover{ color:var(--c-text); } .nav-menu > li > a:hover::after{ transform:scaleX(1); } .nav-menu > li > a[aria-current="page"]{ color:var(--c-accent); } .nav-menu > li > a[aria-current="page"]::after{ background:var(--c-accent); transform:scaleX(1); } .has-mega > a::before{ /* mala strelica */ content:""; width:.42em; height:.42em; margin-left:.15rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--ease-out); } .has-mega.is-open > a::before{ transform:rotate(-135deg) translateY(0); } /* hamburger */ .nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:5px; border-radius:var(--r-sm); margin-left:auto; } .nav-toggle span{ display:block; width:22px; height:2px; border-radius:2px; background:var(--c-text); transition:transform .25s var(--ease-out), opacity .2s var(--ease-out); } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* mega-menu (desktop) */ .mega{ position:absolute; top:calc(100% + .5rem); left:50%; transform:translateX(-50%) translateY(8px); width:min(760px, 86vw); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3) var(--sp-5); padding:var(--sp-5); background:var(--c-glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:var(--bd); border-radius:var(--r-lg); box-shadow:var(--sh-lg); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s; } .has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.is-open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } .mega-col{ display:flex; flex-direction:column; gap:.15rem; } .mega-head{ font-family:var(--font-text); font-size:var(--fs-micro); font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--c-text-dim); margin:.4rem 0 .3rem; } .mega-head:first-child{ margin-top:0; } .mega a[role="menuitem"]{ display:block; padding:.5rem .6rem; font-size:var(--fs-small); color:var(--c-text-muted); border-radius:var(--r-sm); border-left:2px solid transparent; transition:background-color .16s var(--ease-out), color .16s var(--ease-out), border-color .16s; } .mega a[role="menuitem"]:hover{ background:var(--c-bg-raise-2); color:var(--c-text); border-left-color:var(--c-accent); } .header-cta{ display:flex; align-items:center; gap:var(--sp-3); flex:0 0 auto; } .btn-phone{ font-family:var(--font-display); font-weight:500; padding:.6rem 1rem; min-height:44px; display:inline-flex; align-items:center; border-radius:var(--r-pill); border:var(--bd); color:var(--c-text); transition:border-color .18s var(--ease-out), background-color .18s var(--ease-out); } .btn-phone:hover{ border-color:var(--c-line-accent); background:var(--c-accent-tint); } /* ---------- Hero ---------- */ .hero{ position:relative; padding-top:clamp(3.5rem,9vw,7rem); padding-bottom:clamp(3rem,7vw,6rem); min-height:min(86svh, 820px); display:flex; align-items:center; } .hero-inner{ max-width:50rem; } .hero .eyebrow{ margin-bottom:var(--sp-5); } .hero h1{ font-size:var(--fs-display); letter-spacing:var(--tracking-display); line-height:var(--lh-tight); margin-bottom:var(--sp-5); } .hero h1 .accent{ background-image:var(--grad-magma); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero .lead{ max-width:54ch; margin-bottom:var(--sp-6); color:var(--c-text-muted); } .hero-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; } /* ---------- Trust traka (marquee) ---------- */ .trust{ border-block:var(--bd); background:rgba(10,9,8,.4); } .trust-list{ display:flex; align-items:center; gap:clamp(1.2rem,4vw,3rem); padding-block:var(--sp-5); } .trust-label{ font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.12em; color:var(--c-text-dim); font-weight:600; flex:0 0 auto; } .trust-item{ font-family:var(--font-display); font-weight:600; font-size:clamp(1rem,1.5vw,1.2rem); color:var(--c-text-dim); letter-spacing:.02em; white-space:nowrap; transition:color .2s var(--ease-out); } .trust-item:hover{ color:var(--c-text-muted); } /* track nosi 4 iste grupe; -25% = tačno jedna grupa → bešavna petlja */ .marquee{ flex:1 1 auto; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee-track{ display:flex; width:max-content; animation:marquee 36s linear infinite; } .marquee:hover .marquee-track{ animation-play-state:paused; } .marquee-group{ display:flex; align-items:center; gap:clamp(1.6rem,4vw,3.5rem); padding-right:clamp(1.6rem,4vw,3.5rem); flex:0 0 auto; } @keyframes marquee{ to{ transform:translateX(-25%); } } @media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } } /* ---------- Bento ---------- */ .bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--sp-4); } .bento-cell{ grid-column:span var(--span,4); grid-row:span var(--row,1); background:var(--c-bg-raise); border:var(--bd); border-radius:var(--r-lg); padding:var(--sp-5); display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); } a.bento-cell:hover{ transform:translateY(-4px); border-color:var(--c-line-accent); box-shadow:var(--glow-accent); } .bento-cell--accent{ background-image:var(--grad-magma-soft); border-color:var(--c-line-accent); } .bento-icon{ width:44px; height:44px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--c-accent-tint); color:var(--c-accent); margin-bottom:var(--sp-4); } .bento-icon svg{ width:22px; height:22px; } .bento-cell h3{ font-size:var(--fs-h3); margin-bottom:var(--sp-2); } .bento-cell p{ color:var(--c-text-muted); font-size:var(--fs-small); } .bento-cell .card-link{ margin-top:auto; padding-top:var(--sp-4); } /* stat (krupan broj) — 3×2 na desktopu, 2 kolone na telefonu; broj sme da se prelomi na umesto da ga overflow:hidden iseče */ .stat{ display:flex; flex-direction:column; gap:.2rem; justify-content:center; min-width:0; } .stat-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem, 1.2vw + 1rem, 2.4rem); line-height:1.1; letter-spacing:-.01em; color:var(--c-text); } .stat-num .unit{ font-size:.6em; color:var(--c-text-muted); margin-left:.15em; } .stat-label{ font-size:var(--fs-small); color:var(--c-text-muted); } /* ---------- Slajder usluga (scroll-snap) ---------- */ /* bez JS-a: običan horizontalni scroll sa snap-om i tankim scrollbarom; .is-ready (site.js) pali strelice + progres i sklanja scrollbar */ .slider{ position:relative; } .slider-track{ --slide-gap:var(--sp-4); --per-view:3.5; display:flex; gap:var(--slide-gap); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:var(--sp-3); /* prostor za native scrollbar pre JS-a */ position:relative; /* offsetLeft kartica = snap pozicija */ overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; } .slider.is-ready .slider-track{ scrollbar-width:none; padding-bottom:0; } .slider.is-ready .slider-track::-webkit-scrollbar{ display:none; } .slider-track.is-drag{ scroll-snap-type:none; cursor:grabbing; scroll-behavior:auto; } .slider-track.is-drag .slider-card{ pointer-events:none; } /* bez hover/klik šuma dok se vuče */ .slider-card{ flex:0 0 calc((100% - 3 * var(--slide-gap)) / var(--per-view)); scroll-snap-align:start; min-width:0; } a.slider-card{ -webkit-user-drag:none; user-select:none; } .slider-ui{ display:none; align-items:center; gap:var(--sp-4); margin-top:var(--sp-5); } .slider.is-ready .slider-ui{ display:flex; } .slider-btn{ flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; border-radius:var(--r-pill); border:var(--bd-strong); background:var(--c-bg-raise); color:var(--c-text); transition:border-color .18s var(--ease-out), background-color .18s var(--ease-out), color .18s var(--ease-out), opacity .18s var(--ease-out); } .slider-btn svg{ width:20px; height:20px; } .slider-btn:hover:not(:disabled){ border-color:var(--c-line-accent); background:var(--c-accent-tint); } .slider-btn:disabled{ opacity:.35; cursor:default; } .slider-progress{ flex:1 1 auto; height:2px; background:var(--c-line); border-radius:2px; overflow:hidden; } .slider-progress i{ display:block; height:100%; width:0; background-image:var(--grad-magma); border-radius:2px; transition:width .15s linear; } @media (max-width:1024px){ .slider-track{ --per-view:2.3; } .slider-card{ flex-basis:calc((100% - 2 * var(--slide-gap)) / var(--per-view)); } } @media (max-width:640px){ .slider-track{ --per-view:1.15; } .slider-card{ flex-basis:calc((100% - var(--slide-gap)) / var(--per-view)); } } /* ---------- Kartica usluge / proizvoda ---------- */ .card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,290px),1fr)); gap:var(--sp-5); } .card{ position:relative; /* cela kartica klikabilna preko .card-stretch linka */ display:flex; flex-direction:column; background:var(--c-bg-raise); border:var(--bd); border-radius:var(--r-lg); overflow:hidden; transition:transform .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); } .card:hover{ transform:translateY(-4px); border-color:var(--c-line-accent); box-shadow:var(--glow-accent); } .card-media{ aspect-ratio:16/10; overflow:hidden; background:var(--c-bg-raise-2); } .card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease-out); } .card:hover .card-media img{ transform:scale(1.04); } .card-body{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); flex:1; } .card-body h3{ font-size:var(--fs-h3); } .card-body p{ color:var(--c-text-muted); font-size:var(--fs-small); flex:1; } .card-link{ display:inline-flex; align-items:center; gap:.4rem; color:var(--c-accent); font-weight:600; font-size:var(--fs-small); margin-top:var(--sp-2); } .card-link::after{ content:"→"; transition:transform .2s var(--ease-out); } .card:hover .card-link::after{ transform:translateX(4px); } /* stretched link preko cele kartice, fokus-ring ostaje vidljiv */ .card-stretch{ position:absolute; inset:0; } /* ---------- Galerija + lightbox ---------- */ .gallery-filters{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-6); } .chip{ display:inline-flex; align-items:center; padding:.5rem 1rem; border-radius:var(--r-pill); border:var(--bd); background:var(--c-bg-raise); color:var(--c-text-muted); font-size:var(--fs-small); font-weight:500; min-height:44px; transition:border-color .18s var(--ease-out), color .18s var(--ease-out), background-color .18s var(--ease-out); } .chip:hover{ border-color:var(--c-line-strong); color:var(--c-text); } .chip[aria-pressed="true"]{ background-image:var(--grad-magma); color:var(--c-text-on-accent); border-color:transparent; } .gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); grid-auto-rows:10px; gap:var(--sp-3); } .gallery-item{ border-radius:var(--r-md); overflow:hidden; border:var(--bd); background:var(--c-bg-raise-2); padding:0; cursor:zoom-in; position:relative; } .gallery-grid--uniform{ grid-template-columns:repeat(3,1fr); grid-auto-rows:auto; } .gallery-grid--uniform .gallery-item{ aspect-ratio:4/3; } @media (max-width:640px){ .gallery-grid--uniform{ grid-template-columns:repeat(2,1fr); } } .gallery-item::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(110deg,var(--c-bg-raise-2) 30%,rgba(255,255,255,.045) 50%,var(--c-bg-raise-2) 70%); background-size:200% 100%; animation:shimmer 1.5s linear infinite; } .gallery-item img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease-out), opacity .3s; } .gallery-item:hover img{ transform:scale(1.05); } .gallery-item.is-hidden{ display:none; } @keyframes shimmer{ to{ background-position:-200% 0; } } @media (prefers-reduced-motion:reduce){ .gallery-item::before{ animation:none; } } /* lightbox */ .lightbox{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); background:rgba(6,5,4,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .lightbox.is-open{ display:flex; } .lightbox-figure{ margin:0; max-width:min(1100px,92vw); max-height:88svh; display:flex; flex-direction:column; gap:.75rem; } .lightbox-img{ max-width:100%; max-height:78svh; width:auto; height:auto; object-fit:contain; border-radius:var(--r-md); box-shadow:var(--sh-lg); animation:lb-in .22s var(--ease-out); } @keyframes lb-in{ from{ opacity:0; transform:scale(.98); } to{ opacity:1; transform:scale(1); } } .lightbox-cap{ text-align:center; color:var(--c-text-muted); font-size:var(--fs-small); } .lightbox-close{ position:absolute; top:1rem; right:1rem; width:48px; height:48px; border-radius:var(--r-pill); display:grid; place-items:center; background:var(--c-bg-raise); border:var(--bd); color:var(--c-text); font-size:1.4rem; line-height:1; } .lightbox-close:hover{ border-color:var(--c-line-accent); } .lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:var(--r-pill); display:grid; place-items:center; background:var(--c-bg-raise); border:var(--bd); color:var(--c-text); font-size:1.4rem; } .lightbox-nav:hover{ border-color:var(--c-line-accent); } .lightbox-prev{ left:clamp(.5rem,2vw,1.5rem); } .lightbox-next{ right:clamp(.5rem,2vw,1.5rem); } /* ---------- Forma ---------- */ .form-layout{ display:grid; grid-template-columns:1.3fr .9fr; gap:var(--sp-7); align-items:start; } .form{ background:var(--c-bg-raise); border:var(--bd); border-radius:var(--r-lg); padding:clamp(1.25rem,3vw,2rem); max-width:600px; } .field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:var(--sp-4); } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); } .field-row .field{ margin-bottom:0; } .field-label{ font-size:var(--fs-small); font-weight:500; color:var(--c-text); } .field-label .req{ color:var(--c-accent); margin-left:.15rem; } .field-input{ background:var(--c-bg-raise-2); border:var(--bd); border-radius:var(--r-md); padding:.8rem .9rem; min-height:48px; color:var(--c-text); width:100%; transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); } textarea.field-input{ min-height:130px; resize:vertical; } select.field-input{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--c-text-dim) 50%),linear-gradient(135deg,var(--c-text-dim) 50%,transparent 50%); background-position:calc(100% - 20px) center,calc(100% - 14px) center; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2.4rem; } .field-input::placeholder{ color:var(--c-text-dim); } .field-input:focus{ outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-tint); } .field-input[aria-invalid="true"]{ border-color:var(--c-error); } .field-file{ font-size:var(--fs-small); color:var(--c-text-muted); } .field-error{ font-size:var(--fs-small); color:var(--c-error); min-height:1.1em; } .field-hint{ font-size:var(--fs-small); color:var(--c-text-dim); } .field-hint a{ color:var(--c-accent); text-decoration:underline; text-underline-offset:2px; } /* honeypot — sklonjeno od korisnika i čitača ekrana */ .field--hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-status{ font-size:var(--fs-small); margin-top:var(--sp-3); color:var(--c-text-muted); } .form-status.is-ok{ color:var(--c-success); } .form-status.is-err{ color:var(--c-error); } .form-aside{ display:flex; flex-direction:column; gap:var(--sp-5); } .form-aside img{ border-radius:var(--r-lg); border:var(--bd); } /* isti tretman kao .split-media */ .contact-block{ display:flex; flex-direction:column; gap:var(--sp-2); } .contact-block h3{ font-size:var(--fs-h3); margin-bottom:var(--sp-2); } .contact-line{ display:flex; gap:.6rem; align-items:flex-start; color:var(--c-text-muted); font-size:var(--fs-small); } .contact-line .ic{ color:var(--c-accent); flex:0 0 auto; margin-top:.1rem; } .contact-line a{ color:var(--c-text); } .contact-line a:hover{ color:var(--c-accent); } /* ---------- FAQ ---------- */ .faq{ display:flex; flex-direction:column; gap:var(--sp-3); max-width:62rem; } .faq-item{ border:var(--bd); border-radius:var(--r-md); background:var(--c-bg-raise); overflow:hidden; } .faq-q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:var(--sp-4) var(--sp-5); font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--c-text); } .faq-q .mk{ flex:0 0 auto; width:1.1rem; height:1.1rem; position:relative; } .faq-q .mk::before,.faq-q .mk::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--c-accent); border-radius:2px; } .faq-q .mk::before{ width:1.1rem; height:2px; } .faq-q .mk::after{ width:2px; height:1.1rem; transition:transform .22s var(--ease-out); } .faq-q[aria-expanded="true"] .mk::after{ transform:rotate(90deg); } .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s var(--ease-out); } .faq-a > div{ overflow:hidden; } .faq-item.is-open .faq-a{ grid-template-rows:1fr; } .faq-a p{ color:var(--c-text-muted); padding:0 var(--sp-5) var(--sp-5); font-size:var(--fs-small); } /* ---------- CTA traka (pred-footer) ---------- */ .cta-band{ position:relative; background:var(--c-bg-sunken); border-top:1px solid var(--c-line); overflow:hidden; } .cta-band::before{ content:""; position:absolute; inset:0; background:var(--grad-magma-soft); opacity:.7; -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%); pointer-events:none; } .cta-band-inner{ position:relative; z-index:1; text-align:center; max-width:60rem; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:var(--sp-5); } .cta-band h2{ font-size:var(--fs-h1); } .cta-band .lead{ margin-inline:auto; } .cta-band .hero-cta{ justify-content:center; } /* ---------- Footer ---------- */ .site-footer{ background:var(--c-bg-sunken); border-top:1px solid var(--c-line); padding-top:var(--sp-9); } .footer-inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--sp-7) var(--sp-6); } .footer-col{ display:flex; flex-direction:column; gap:.5rem; } .footer-col a{ color:var(--c-text-muted); font-size:var(--fs-small); transition:color .16s var(--ease-out); } .footer-col a:hover{ color:var(--c-accent); } .footer-head{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.1em; color:var(--c-text-dim); margin-bottom:var(--sp-2); } .footer-brand .brand-word{ font-size:1.3rem; } .footer-tag{ color:var(--c-accent); font-weight:500; font-size:var(--fs-small); } .footer-about{ color:var(--c-text-dim); font-size:var(--fs-small); max-width:34ch; line-height:1.55; } .footer-col address{ font-style:normal; color:var(--c-text-muted); font-size:var(--fs-small); line-height:1.9; } .footer-col address a{ color:var(--c-text); } .footer-col address a:hover{ color:var(--c-accent); } .footer-bottom{ width:100%; max-width:var(--maxw); margin:var(--sp-8) auto 0; padding:var(--sp-5) var(--gutter); border-top:1px solid var(--c-line); display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-5); color:var(--c-text-dim); font-size:var(--fs-small); } .cmyk-dots{ display:inline-flex; gap:5px; } .cmyk-dots i{ width:8px; height:8px; border-radius:2px; display:block; } .cmyk-dots i:nth-child(1){ background:var(--c-cyan); } .cmyk-dots i:nth-child(2){ background:var(--c-magenta); } .cmyk-dots i:nth-child(3){ background:var(--c-yellow); } .cmyk-dots i:nth-child(4){ background:#3a3530; } .footer-credit{ margin-left:auto; color:var(--c-text-dim); } /* ---------- Razno ---------- */ .badge-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-5); } .feature-list{ display:flex; flex-direction:column; gap:var(--sp-3); } .feature-list li{ display:flex; gap:.65rem; align-items:flex-start; color:var(--c-text-muted); } .feature-list .ic{ color:var(--c-accent); flex:0 0 auto; margin-top:.15rem; } /* split sekcija: tekst + media */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7); align-items:center; } .split--media-first .split-media{ order:-1; } .split-media{ border-radius:var(--r-lg); overflow:hidden; border:var(--bd); } .split-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; } .split-body h2{ font-size:var(--fs-h2); margin-bottom:var(--sp-4); } .split-body .lead{ margin-bottom:var(--sp-5); } /* breadcrumb */ .crumbs{ display:flex; flex-wrap:wrap; gap:.4rem; font-size:var(--fs-small); color:var(--c-text-dim); margin-bottom:var(--sp-5); } .crumbs a{ color:var(--c-text-muted); } .crumbs a:hover{ color:var(--c-accent); } .crumbs li:not(:last-child)::after{ content:"/"; margin-left:.4rem; color:var(--c-text-dim); } .crumbs li{ display:inline-flex; align-items:center; gap:.4rem; } /* page intro (inner strane) */ .page-head{ padding-top:clamp(2.5rem,6vw,5rem); } .page-head h1{ font-size:var(--fs-h1); margin-bottom:var(--sp-4); } /* ---------- Reveal-on-scroll ---------- */ /* sakrivanje važi samo pod html.rv (dodaje je site.js pre observe-a) — bez JS-a, uz reduced-motion ili na WP portu bez skripte ništa nije sakriveno */ html.rv [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change:opacity, transform; } html.rv [data-reveal].in{ opacity:1; transform:none; } html.rv [data-reveal-stagger] > *{ opacity:0; transform:translateY(20px); transition:opacity .65s var(--ease-out), transform .65s var(--ease-out); } html.rv [data-reveal-stagger].in > *{ opacity:1; transform:none; } html.rv [data-reveal-stagger].in > *:nth-child(2){ transition-delay:.07s; } html.rv [data-reveal-stagger].in > *:nth-child(3){ transition-delay:.14s; } html.rv [data-reveal-stagger].in > *:nth-child(4){ transition-delay:.21s; } html.rv [data-reveal-stagger].in > *:nth-child(5){ transition-delay:.28s; } html.rv [data-reveal-stagger].in > *:nth-child(6){ transition-delay:.35s; } /* ---------- Scroll linija (js/scrollline.js) ---------- */ /* SVG overlay preko

: iznad pozadina sekcija (z1), ispod sadržaja (.container z2) */ #main{ position:relative; } #main .container{ position:relative; z-index:2; } .scroll-line{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; } .scroll-line .line{ fill:none; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(255,59,46,.4)); } .scroll-line .node{ fill:var(--c-bg-raise); stroke:rgba(255,59,46,.45); stroke-width:2; transition:fill .45s var(--ease-out), stroke .45s var(--ease-out); } .scroll-line .node.lit{ fill:var(--c-accent); stroke:rgba(255,122,26,.9); filter:drop-shadow(0 0 9px rgba(255,59,46,.85)); } /* ===================================================================== Responsive ===================================================================== */ /* tablet / manji desktop */ @media (max-width:1024px){ .form-layout{ grid-template-columns:1fr; } .footer-inner{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1 / -1; } .split{ gap:var(--sp-6); } } /* mobilna navigacija (≤880px) */ @media (max-width:880px){ .nav-toggle{ display:flex; } .header-cta .btn-primary{ display:none; } /* upit je u mobilnom meniju */ .nav{ margin-left:0; } .nav-menu{ position:fixed; inset:var(--header-h) 0 0 0; flex-direction:column; align-items:stretch; gap:0; padding:var(--sp-5) var(--gutter) calc(var(--sp-8) + env(safe-area-inset-bottom)); background:var(--c-bg-raise); border-top:1px solid var(--c-line); transform:translateX(100%); transition:transform .3s var(--ease-out); overflow-y:auto; visibility:hidden; } .nav-menu.is-open{ transform:translateX(0); visibility:visible; } .nav-menu > li{ border-bottom:1px solid var(--c-line); } .nav-menu > li > a{ padding:var(--sp-4) 0; font-size:1.15rem; width:100%; justify-content:space-between; } .nav-menu > li > a::after{ display:none; } /* mega → accordion */ .mega{ position:static; transform:none; width:100%; grid-template-columns:1fr; gap:0; padding:0 0 var(--sp-3) var(--sp-3); background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border:0; box-shadow:none; display:none; opacity:1; visibility:visible; pointer-events:auto; } .has-mega.is-open .mega{ display:grid; } .mega-head{ margin-top:var(--sp-3); } /* na mobilnom ovo je primarna nav proizvoda — podigni tap-cilj na 44px */ .mega a[role="menuitem"]{ min-height:44px; padding-block:.7rem; display:flex; align-items:center; } .header-cta .btn-phone{ padding:.5rem .85rem; } /* statovi: 2 kolone umesto 3 */ .bento-cell.stat{ grid-column:span 6; } } /* telefon (≤640px) */ @media (max-width:640px){ .bento-cell{ grid-column:1 / -1 !important; } .bento-cell.stat{ grid-column:span 6 !important; } /* statovi ostaju 2 kolone */ .field-row{ grid-template-columns:1fr; } .footer-inner{ grid-template-columns:1fr; } .footer-credit{ margin-left:0; width:100%; } .split{ grid-template-columns:1fr; } .split--media-first .split-media{ order:0; } .hero-cta .btn{ width:100%; } .hero-cta .btn-phone{ width:100%; justify-content:center; } .lightbox-nav{ width:46px; height:46px; } } /* vrlo mali (≤360px) — zadrži čitljivost */ @media (max-width:360px){ :root{ --gutter:1rem; } .brand-word{ font-size:1.1rem; } } /* ultra-wide (≥2200px, do 3440px) — širi kontejner, veći ritam */ @media (min-width:2200px){ :root{ --maxw:1480px; --maxw-narrow:880px; } body{ font-size:1.15rem; } } /* ---------- prefers-reduced-motion ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } html{ scroll-behavior:auto; } [data-reveal],[data-reveal-stagger] > *{ opacity:1 !important; transform:none !important; } }