/* GateRev prodajni sajt — tokeni iz docs/DESIGN.md (izvor: TechRevati brand.yaml). Isti DNK kao app/src/app/globals.css; ovde SAMO ono što sajt koristi. Bez ijedne spoljne zavisnosti: nema CDN-a, nema Google Fonts, nema analitike. */ :root { --primary:#2f6fb0; --primary-hover:#2a6299; --accent:#f5a623; /* S51 (`A-S50-KONTRAST-SAJT`): bilo #0e7490 — na `--elevated` (#e2e8f0) daje 4,35:1, tik ISPOD 4,5:1. Pada na `.journey-n` (brojevi koraka 1-6), na svih pet jezika. axe ga NIJE prijavio kao prekrsaj nego kao `incomplete` ("content too short to determine if it is actual text"), pa je bio nevidljiv i skenu i oku. Vrednost NIJE izmisljena ovde: aplikacija je isti token na istoj podlozi potamnila jos u S37 (`app/src/app/globals.css`, `A-S38-A11Y`), a sajt tu ispravku nikad nije dobio iako mu zaglavlje tvrdi "isti DNK". #155e75 daje 6,63:1 na `--bg`, 7,27:1 na `--surface`, 5,89:1 na `--elevated`. */ --tech:#155e75; --bg:#f0f5fc; --surface:#ffffff; --elevated:#e2e8f0; --line:#cbd5e1; --line-ui:#64748b; --text:#0f172a; --muted:#475569; /* S51 (`A-S50-KONTRAST-SAJT`): bilo #64748b — na `--bg` (#f0f5fc) daje 4,34:1, tik ISPOD 4,5:1. Nosili su ga `.note`, `.site-foot` i veze u podnozju, dakle 245 cvorova na svih 30 strana, u svetloj temi. #56657a je TACNA SREDINA izmedju slate-500 (#64748b) i slate-600 (--muted #475569) — interpolacija unutar postojece palete, ne nova boja. Bira se po NAJGOROJ svetloj podlozi, ne po onoj na kojoj token danas stoji: 5,42:1 na `--bg` · 5,94:1 na `--surface` · 4,81:1 na `--elevated`. Time je token ispravan i ako ga neko sutra stavi na `--elevated`. */ --dim:#56657a; --link:#2a6299; --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-display:"Nunito",var(--font-ui); --fs-s:.82rem; --fs-base:.95rem; --fs-l:1.06rem; --fs-xl:1.3rem; --r-lg:10px; --r-md:6px; --r-pill:99px; --shadow-card:0 1px 2px rgba(15,23,42,.06),0 4px 14px rgba(15,23,42,.06); --wrap:1080px; } /* Dark: ista uloga tokena, druge vrednosti (DESIGN.md „tema po površini"). */ @media (prefers-color-scheme:dark){ :root{ --bg:#0b1220; --surface:#0f172a; --elevated:#1e293b; --line:#243449; --line-ui:#64748b; --text:#f1f5f9; --muted:#94a3b8; --dim:#8492a6; --tech:#22d3ee; --link:#5b9bd5; --shadow-card:0 1px 2px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.25); } } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--text); font:var(--fs-base)/1.6 var(--font-ui); text-rendering:optimizeLegibility; } .wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px} a{color:var(--link)} h1,h2,h3{font-family:var(--font-display); line-height:1.2; margin:0 0 .5em} /* Fokus je vidljiv na SVEMU — jantar, 3:1 prema oba canvasa (WCAG 2.4.7). */ :focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:3px} .skip-link{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--surface); color:var(--text); padding:10px 16px; border-radius:0 0 var(--r-md) 0; } .skip-link:focus{left:0} /* ── zaglavlje ─────────────────────────────────────────────── */ .site-head{border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:10} .site-head .wrap{display:flex; align-items:center; gap:20px; min-height:60px; flex-wrap:wrap} .brand{font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); color:var(--text); text-decoration:none; letter-spacing:-.01em} .brand em{font-style:normal; color:var(--tech)} .site-nav{display:flex; gap:18px; margin-left:auto; align-items:center; flex-wrap:wrap} .site-nav a{color:var(--muted); text-decoration:none; font-size:var(--fs-s)} .site-nav a:hover{color:var(--text)} .lang{display:flex; gap:6px; align-items:center} .lang a{padding:3px 8px; border:1px solid var(--line); border-radius:var(--r-pill); text-transform:uppercase; font-size:.7rem; letter-spacing:.04em} .lang a[aria-current="true"]{background:var(--elevated); color:var(--text); border-color:var(--line-ui)} /* ── dugmad ───────────────────────────────────────────────── */ .btn{ display:inline-block; padding:11px 22px; border-radius:var(--r-md); border:1px solid var(--line-ui); background:var(--surface); color:var(--text); text-decoration:none; font-weight:600; font-size:var(--fs-base); transition:transform .12s ease, background .12s ease; } .btn:hover{transform:translateY(-2px)} .btn-primary{background:var(--primary); border-color:var(--primary); color:#fff} .btn-primary:hover{background:var(--primary-hover)} /* ── hero ─────────────────────────────────────────────────── */ .hero{padding:76px 0 64px; position:relative; overflow:hidden} .hero::before{ content:""; position:absolute; inset:-40% 20% auto -10%; height:520px; background:radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--tech) 22%, transparent), transparent 70%); pointer-events:none; } .hero > *{position:relative} .eyebrow{text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--tech); font-weight:700; margin:0 0 14px} .display{font-size:clamp(1.9rem, 4.4vw, 3.1rem); max-width:19ch; margin:0 0 18px; letter-spacing:-.02em} .lead{font-size:var(--fs-l); color:var(--muted); max-width:62ch; margin:0 0 28px} .hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px} .hero-value{font-weight:600; margin:-12px 0 24px} .card.model ul{padding-left:1.1em; margin:8px 0} .hero-points{display:flex; gap:10px 24px; flex-wrap:wrap; color:var(--muted); font-size:var(--fs-s); padding:0; margin:0; list-style:none} .hero-points li::before{content:"✓ "; color:var(--tech); font-weight:700} .dokazi-naslovi{font-size:var(--fs-m, 1.05rem); font-weight:600; color:var(--ink, inherit)} /* ── sekcije ──────────────────────────────────────────────── */ section{padding:56px 0; border-top:1px solid var(--line)} section > .wrap > h2{font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:8px} .section-lead{color:var(--muted); margin:0 0 28px; max-width:62ch} /* Tabela mora da se skroluje SAMA — telo strane nikad vodoravno. */ .tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch} table{border-collapse:collapse; width:100%; min-width:560px; background:var(--surface); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card)} th,td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; font-size:var(--fs-base)} thead th{background:var(--elevated); font-size:var(--fs-s); text-transform:uppercase; letter-spacing:.05em; color:var(--muted)} tbody tr:last-child td{border-bottom:0} td:first-child{color:var(--muted)} td:last-child{font-weight:500} .grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-card)} .card h3{font-size:var(--fs-l); margin:0 0 6px} .card p{margin:0; color:var(--muted); font-size:var(--fs-base)} .proof{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-bottom:20px} .proof .k{font-family:var(--font-display); font-size:1.5rem; color:var(--tech); font-weight:800; display:block; margin-bottom:4px} /* ── cenovnik (D-3) ──────────────────────────────────────── */ /* `.k` je do sada bio scope-ovan na `.proof`; cenovnik koristi isti vizuelni ključ (velika cifra) pa pravilo dobija i ovde, umesto da se klasa preimenuje i razidje s `proof` sekcijom. */ #pricing ul{margin:8px 0 0; padding-left:1.1rem; color:var(--muted); font-size:var(--fs-base)} #pricing .note{margin:20px 0} .note{color:var(--dim); font-size:var(--fs-s); max-width:70ch; border-left:3px solid var(--line-ui); padding-left:14px; margin:0} .cta-band{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow-card)} /* ── pravne strane ───────────────────────────────────────── */ .legal{padding:48px 0; max-width:74ch} .legal h1{font-size:clamp(1.6rem,3vw,2.2rem)} .legal h2{font-size:var(--fs-xl); margin-top:32px} .legal dl{display:grid; grid-template-columns:minmax(140px,auto) 1fr; gap:8px 20px; margin:20px 0} .legal dt{color:var(--muted); font-size:var(--fs-s)} .legal dd{margin:0} /* ── podnožje ─────────────────────────────────────────────── */ .site-foot{border-top:1px solid var(--line); padding:28px 0; color:var(--dim); font-size:var(--fs-s)} .site-foot .wrap{display:flex; gap:8px 18px; flex-wrap:wrap; align-items:center} .site-foot a{color:var(--dim)} .site-foot .sep{margin-left:auto} @media (prefers-reduced-motion:reduce){*{transition:none!important}.btn:hover{transform:none}} /* S136 — prodajni list na jednoj strani (`/one-pager/`): isti sadržaj kao naslovna, zbijen za A4 */ .one-pager{padding:40px 0; max-width:86ch} .one-pager h1{font-size:clamp(1.4rem,2.6vw,1.9rem); margin:0 0 10px} .one-pager h2{font-size:var(--fs-l); margin:26px 0 10px} .one-pager ul{padding-left:1.1rem; margin:0} .one-pager li{margin:0 0 6px} .one-pager .op-kontakt{margin:22px 0 10px} .one-pager .note{margin:12px 0} @media print{.site-head,.site-foot,.hero::before,.skip-link,.op-stampa{display:none} @page{size:A4; margin:10mm} body{background:#fff; color:#000} .one-pager{padding:0; max-width:none; font-size:8.2pt; line-height:1.22} .one-pager ul{padding-left:1.1em; margin:2px 0} .one-pager ul.op-dve{columns:2; column-gap:14px} .one-pager li{break-inside:avoid} .one-pager .eyebrow{margin:0 0 4px} .one-pager .lead{font-size:10pt; max-width:none; margin:0 0 6px} .one-pager h1{font-size:14pt; margin:0 0 6px} .one-pager h2{font-size:10.5pt; margin:8px 0 3px} .one-pager table{min-width:0; box-shadow:none} .one-pager th,.one-pager td{padding:2px 5px; font-size:8pt} .one-pager li{margin:0 0 2px} .one-pager .note{max-width:none; margin:6px 0} .one-pager .op-kontakt{margin:8px 0 0} .one-pager a{color:#000}} /* ── generisani vizuali (G1) ────────────────────────────────────────────── Dekorativni su: nose priču, ne tvrdnju. Nikad screenshot proizvoda i nikad fotografija tuđe lokacije — takva slika bi bila tvrdnja koju ne možemo da podržimo (R6). Zato ilustracije, i zato alt opisuje ILUSTRACIJU. */ .media-hero{ display:block; width:100%; max-width:var(--wrap); margin:36px auto 0; border-radius:var(--r-lg); box-shadow:var(--shadow-card); aspect-ratio:16/9; object-fit:cover; } .media-band{ display:block; width:100%; margin:28px 0 0; border-radius:var(--r-lg); box-shadow:var(--shadow-card); aspect-ratio:16/9; object-fit:cover; } @media (max-width:640px){ .media-hero,.media-band{ border-radius:var(--r-md) } } /* ── hero i sekcijski video (G1) ────────────────────────────────────────── OBA deteta su APSOLUTNA u omotaču s fiksnim odnosom stranica, pa se NIKAD ne mogu naći jedno ispod drugog. Prva verzija je zavisila od toga da pregledač pogodi `prefers-reduced-motion: no-preference`; ako ne pogodi NIJEDAN od dva upita (a to se dešava), poster je ostajao u toku i strana je pokazivala sliku PA video. Sada je podrazumevano stanje eksplicitno, a `reduce` samo zamenjuje ko je vidljiv — nema procepa između dva upita. */ .media-hero-wrap, .media-band-wrap{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); } .media-hero-wrap{ max-width:var(--wrap); margin:36px auto 0; } .media-band-wrap{ margin:28px 0 0; } .media-hero-wrap > *, .media-band-wrap > *{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0; border-radius:0; box-shadow:none; } .media-hero-video, .media-band-video{ display:block; } .media-hero-poster, .media-band-poster{ display:none; } /* Kretanje isključeno → video se NE prikazuje, poster preuzima njegovo mesto. */ @media (prefers-reduced-motion: reduce){ .media-hero-video, .media-band-video{ display:none; } .media-hero-poster, .media-band-poster{ display:block; } } /* ── scenario „jedna poseta" ────────────────────────────────────────────── Numerisan niz koraka: redosled JE poruka (prvi potpis ne otvara kapiju), pa ide `
    ` a ne `