/* KAMERY ALARMY — brand-family tokens (zdieľané s IT POMOC + security akcenty) */ /* === Self-hosted fonty (latin + latin-ext) — nahradili Google Fonts CDN (výkon + GDPR) === woff2 v /fonts/, načítavajú sa on-demand cez unicode-range, font-display:swap. Pôvodný render-blocking na fonts.googleapis.com bol odstránený z HTML . */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} :root { /* Brand-family primárne Navy systém má dva odtiene s rôznym účelom: --ka-navy (#0551a0) → primary text, links, hover states, light surface accents --ka-navy-deep (#0f3d6b) → dark surfaces: footer, kontakt-map gradient, hero overlays, dramatic contrast bg Nikdy nemiešať — každý slúži inému kontextu. */ --ka-blue: #005a9c; --ka-blue-dark: #0551a0; --ka-navy: #0551a0; --ka-navy-deep: #0f3d6b; --ka-navy-2: #0d4f8b; --ka-blue-bright: #1976D2; --ka-orange: #f28024; --ka-orange-bright: #ff6905; /* Darker orange pre text/linky na svetlom pozadí — WCAG AA pass (~5.7:1 on white). Vždy keď je oranžová použitá ako TEXT (kategórie, linky v tele, "Čítať článok"), použiť --ka-orange-text. --ka-orange ostáva pre UI elementy: backgrounds, hover states, focus rings, ikony, dekoratívne dotty. */ --ka-orange-text: #a84a07; /* Security signály */ --ka-green: #2ecc71; --ka-red: #c62828; --ka-yellow: #efbf4d; --ka-sky: #00b2f8; /* Neutrály */ --ka-text: #3f3d3c; --ka-text-secondary: #6b6968; --ka-border: #dddada; --ka-meta: #cbc9c9; --ka-bg-soft: #eae8e8; --ka-bg-warm: #f6f4f2; --ka-bg-cream: #faf8f5; /* svetlejší warm bg — body, soft surfaces (kontakt, kalkulačka, booking modal) */ --ka-white: #ffffff; /* Typografia */ --ka-font: 'Montserrat', 'Montserrat Fallback', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --ka-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* Radii */ --r-lg: 16px; --r-md: 10px; --r-sm: 6px; /* Tiene --shadow-card / hover / cta: pôvodné, neutrálne / cta-blue varianty --shadow-soft / elev: navy-tinted varianty pre forms a kontakt page kontext */ --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.07); --shadow-cta: 0 4px 18px rgba(0, 90, 156, 0.25); --shadow-hover: 0 8px 24px rgba(0, 90, 156, 0.18); --shadow-soft: 0 6px 22px -10px rgba(15, 61, 107, 0.14); --shadow-elev: 0 8px 28px -10px rgba(15, 61, 107, 0.20); /* Hero gradient */ --hero-gradient: linear-gradient(135deg, var(--ka-navy-deep) 0%, var(--ka-navy-2) 60%, var(--ka-blue-bright) 100%); /* Brand color opacity stops Standalone alpha varianty hlavných farieb používané ako borders, dividers, hover akcenty a text-on-dark. Hodnoty vnútri gradientov a multi-stop shadows zostávajú raw rgba, pretože sú per-design kompozície (nie reusable systém). */ --ka-navy-deep-06: rgba(15, 61, 107, 0.06); --ka-navy-deep-08: rgba(15, 61, 107, 0.08); --ka-navy-deep-10: rgba(15, 61, 107, 0.10); --ka-navy-deep-12: rgba(15, 61, 107, 0.12); --ka-navy-deep-18: rgba(15, 61, 107, 0.18); --ka-navy-deep-40: rgba(15, 61, 107, 0.40); --ka-navy-deep-45: rgba(15, 61, 107, 0.45); --ka-orange-10: rgba(242, 128, 36, 0.10); --ka-orange-15: rgba(242, 128, 36, 0.15); --ka-orange-30: rgba(242, 128, 36, 0.30); --ka-orange-35: rgba(242, 128, 36, 0.35); --ka-orange-40: rgba(242, 128, 36, 0.40); --ka-orange-45: rgba(242, 128, 36, 0.45); --ka-white-18: rgba(255, 255, 255, 0.18); --ka-white-55: rgba(255, 255, 255, 0.55); --ka-white-70: rgba(255, 255, 255, 0.70); --ka-white-78: rgba(255, 255, 255, 0.78); --ka-white-82: rgba(255, 255, 255, 0.82); /* Motion tokens — strong custom curves > weak built-in keywords. Animujeme len transform/opacity/filter — všetko ide cez GPU. */ --ease-out-strong: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1); --dur-press: 140ms; --dur-fast: 180ms; --dur-base: 200ms; --dur-card: 240ms; --dur-reveal: 500ms; /* Header height — používané pre body padding-top, lebo .h-bar je position:fixed (nemôže byť sticky kvôli overflow-x:hidden na html/body z mobile safety net). */ --header-h: 84px; } @media (max-width: 1024px) { :root { --header-h: 80px; } } /* Metric-matched fallback pre Montserrat — drží layout pred swapom webfontu. Hodnoty z @next/font tabuľky pre Arial → Montserrat. */ @font-face { font-family: 'Montserrat Fallback'; src: local('Arial'); size-adjust: 113.75%; ascent-override: 85.50%; descent-override: 22.17%; line-gap-override: 0%; font-weight: 400 800; font-style: normal; } /* View Transitions API — vypnuté. Browser pred odchodom snímkuje ťažkú stránku → krátka pauza pri kliku pôsobí "sticky". */ @view-transition { navigation: none; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--ka-font); color: var(--ka-text); background: var(--ka-white); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Shared button base — press feedback mimo (hover) media query, hover effects gated pre fine pointer. */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ka-font); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; padding: 14px 22px; border-radius: var(--r-md); border: 0; cursor: pointer; transition: transform var(--dur-press) var(--ease-out-strong), box-shadow var(--dur-base) var(--ease-out-strong), background var(--dur-base) var(--ease-out-strong), border-color var(--dur-base) var(--ease-out-strong); text-decoration: none; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--ka-orange); color: #fff; box-shadow: var(--shadow-cta); } .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25); } .btn-ghost-dark { background: transparent; color: var(--ka-navy); border: 1px solid var(--ka-border); } @media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--ka-orange-bright); transform: translateY(-2px); box-shadow: var(--shadow-hover); } .btn-ghost:hover { border-color: #fff; transform: translateY(-2px); } .btn-ghost-dark:hover { border-color: var(--ka-navy); transform: translateY(-2px); } .btn-primary:active, .btn-ghost:active, .btn-ghost-dark:active { transform: scale(0.97); } } /* Navigation between smery */ .smer-switcher { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1000; background: rgba(15, 61, 107, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; padding: 6px; display: flex; gap: 4px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); } .smer-switcher a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 100px; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; transition: color var(--dur-base) var(--ease-out-strong), background var(--dur-base) var(--ease-out-strong); } @media (hover: hover) and (pointer: fine) { .smer-switcher a:hover { color: #fff; background: rgba(255,255,255,0.05); } } .smer-switcher a.active { background: var(--ka-orange); color: #fff; box-shadow: 0 4px 14px rgba(242,128,36,0.4); } .smer-switcher .smer-label { font-family: var(--ka-mono); font-size: 12px; opacity: 0.6; } /* Wordmark — supports both legacy text variant and image logo */ .wordmark { font-family: var(--ka-font); font-weight: 800; letter-spacing: 1.5px; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ka-navy); line-height: 0; } .wordmark img { display: block; height: 38px; width: auto; max-width: 100%; } .wordmark--lg img { height: 48px; } @media (max-width: 480px) { .wordmark img { height: 32px; } .wordmark--lg img { height: 40px; } } .wordmark .ka-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ka-orange); display: inline-block; align-self: center; box-shadow: 0 0 0 4px rgba(242,128,36,0.18); } .wordmark .ka-alarmy { color: var(--ka-orange); } /* Tagged placeholder */ .placeholder { background: repeating-linear-gradient(45deg, rgba(0,90,156,0.04) 0 8px, rgba(0,90,156,0.08) 8px 16px); border: 1px dashed rgba(0,90,156,0.25); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-family: var(--ka-mono); font-size: 12px; color: var(--ka-text-secondary); text-align: center; padding: 16px; letter-spacing: 0.3px; } .placeholder.dark { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 8px, rgba(255,255,255,0.08) 8px 16px); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.7); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== UX foundations (added) ===== */ html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Visible keyboard focus across the whole site */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--ka-orange); outline-offset: 3px; border-radius: 4px; } .btn:focus-visible { outline: 2px solid var(--ka-orange); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(242,128,36,0.25); } a:focus-visible { outline-offset: 4px; } /* Skip-to-content link (a11y) */ .skip-link { position: absolute; left: 12px; top: 12px; background: var(--ka-navy); color: #fff; padding: 10px 16px; border-radius: var(--r-md); font-family: var(--ka-mono); font-size: 12px; text-decoration: none; z-index: 10000; transform: translateY(-200%); transition: transform 200ms ease-out; } .skip-link:focus { transform: translateY(0); } /* Selection */ ::selection { background: var(--ka-orange); color: #fff; } /* Min touch target */ .btn, .h-phone, .smer-switcher a, .h-back { min-height: 44px; } input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: 44px; } /* Animations (zdieľané — využíva sa cez animations.js) .auto-reveal je JS-injected variant pre sekcie ktoré nemajú manuálne .fade-up. */ .fade-up, .auto-reveal { opacity: 0; transform: translateY(14px); } .fade-up.in-view, .auto-reveal.in-view { animation: ka-fade-up var(--dur-reveal) var(--ease-out-strong) both; animation-delay: var(--reveal-delay, 0ms); } /* Above-the-fold reveal: hrá sa OKAMŽITE pri načítaní (bez JS/scroll gate), takže LCP prvok (hero h1) nikdy nečaká na defer animations.js → IO. Animácia ostáva identická, len sa spúšťa cez CSS, nie cez .in-view. */ .fade-up.reveal-now { animation: ka-fade-up var(--dur-reveal) var(--ease-out-strong) both; animation-delay: var(--reveal-delay, 0ms); } @keyframes ka-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .fade-up, .auto-reveal { opacity: 1 !important; transform: none !important; animation: none !important; } } /* Breadcrumb (zdieľaný cez všetky podstránky) */ .crumb { max-width: 1320px; margin: 0 auto; padding: 22px 40px 0; font-family: var(--ka-font); font-size: 13px; color: var(--ka-text-secondary); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: transparent; } .crumb a { color: var(--ka-text-secondary); text-decoration: none; transition: color 200ms; } .crumb a:hover { color: var(--ka-orange); } .crumb .sep { color: rgba(15, 61, 107, 0.25); } .crumb .now { color: var(--ka-navy); font-weight: 600; } @media (max-width: 768px) { .crumb { padding-top: 16px; font-size: 12px; gap: 8px; } } /* Záverečné CTA s fotkou tímu (podstránky) — modifier .final-cta--panel. Fotka tvorí pravý panel na celú výšku karty (bleeduje k okrajom, zaoblená sprava cez overflow:hidden rodiča), banner je nižší. Homepage tento modifier NEPOUŽÍVA, takže si drží vlastný dizajn z index-page.css. */ .final-cta--panel .final-cta-inner { align-items: stretch; padding: 0; overflow: hidden; } .final-cta--panel .final-cta-text { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 64px 0 64px 64px; } .final-cta--panel .final-cta-photo { position: relative; z-index: 1; align-self: stretch; margin: 0; aspect-ratio: auto; /* desktop: výšku dáva textový stĺpec (stretch) */ border-radius: 0; /* zaoblenie rieši overflow:hidden na karte */ box-shadow: none; overflow: hidden; } .final-cta--panel .final-cta-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } @media (max-width: 1100px) { /* jednostĺpcový layout: fotka ako pruh pod textom, definovaná výška cez pomer */ .final-cta--panel .final-cta-text { padding: 48px 32px; } .final-cta--panel .final-cta-photo { aspect-ratio: 16 / 10; max-height: 320px; } } @media (max-width: 768px) { .final-cta--panel .final-cta-text { padding: 36px 24px; } .final-cta--panel .final-cta-photo { aspect-ratio: 16 / 11; max-height: 260px; } } /* Universal mobile fallback shimy Per-page štýly majú rovnakú špecifitu a načítavajú sa neskôr, takže vlastné mobile pravidlá stránky tieto defaulty prepisujú. */ @media (max-width: 768px) { /* Generic gutters pre stránky bez vlastného mobile shimu */ .h-inner, .crumb, .hero, .sec, .vendor-inner, .pco, .final-cta, .foot-inner { padding-left: 20px; padding-right: 20px; } .sec, .vendor { padding-top: 56px; padding-bottom: 56px; } /* 3+ column grids fallback na 2 stĺpce (bento + grids s vlastným mobile breakpointom sa riešia per-page) */ .comps, .sets, .vendor-grid, .quotes-grid, .seg-grid, .foot-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .pco, .final-cta-inner { grid-template-columns: 1fr; gap: 28px; padding: 32px; } } @media (max-width: 480px) { .comps, .sets, .vendor-grid, .quotes-grid, .seg-grid, .foot-grid { grid-template-columns: 1fr; } .h-back { display: none; } .smer-switcher { left: 12px; right: 12px; transform: none; bottom: 12px; max-width: calc(100vw - 24px); overflow-x: auto; } .btn { padding: 12px 18px; font-size: 12px; } } /* Container utility (consistent gutters across pages) */ .container { max-width: 1320px; margin: 0 auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 768px) { .container { padding-left: 20px; padding-right: 20px; } } /* Fixed header polish — subtle border on scroll */ .h-bar { transition: background 200ms ease, border-color 200ms ease; } /* ===== Unified site navigation (used on all main pages) ===== POZOR: position:fixed (nie sticky), lebo overflow-x:hidden na html/body (z mobile safety net nižšie) by sticky rozbil — pre sticky musí byť ancestor bez overflow scroll containera. body padding-top kompenzuje priestor pre header. */ .h-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(247,244,239,0.88); border-bottom: 1px solid rgba(15,61,107,0.06); } body { padding-top: var(--header-h); } .h-inner { max-width: 1320px; margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; gap: 28px; } .h-inner .wordmark { flex-shrink: 0; } .h-nav { display: flex; gap: 6px; align-items: center; flex: 1; flex-wrap: nowrap; } .h-nav a, .h-nav .ka-nav-link { color: var(--ka-text); text-decoration: none; font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 6px; transition: color 180ms, background 180ms; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .h-nav a:hover, .h-nav .ka-nav-link:hover { color: var(--ka-orange); background: rgba(242,128,36,0.06); } .h-nav a[aria-current="page"], .h-nav a.active { color: var(--ka-orange); } .ka-nav-item { position: relative; } .ka-nav-item.has-sub > .ka-nav-link::after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; opacity: 0.6; transition: transform 180ms; } .ka-nav-item.has-sub:hover > .ka-nav-link::after, .ka-nav-item.has-sub:focus-within > .ka-nav-link::after { transform: rotate(225deg) translateY(0); } .ka-nav-sub { position: absolute; top: calc(100% + 6px); left: -8px; min-width: 280px; background: #fff; border: 1px solid rgba(15,61,107,0.08); border-radius: var(--r-md); padding: 8px; box-shadow: 0 16px 40px rgba(15,61,107,0.10); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms, transform 180ms, visibility 180ms; display: grid; gap: 2px; } .ka-nav-item:hover > .ka-nav-sub, .ka-nav-item:focus-within > .ka-nav-sub { opacity: 1; visibility: visible; transform: translateY(0); } .ka-nav-sub a { display: block; padding: 10px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ka-text); text-decoration: none; } .ka-nav-sub a small { display: block; font-size: 12px; font-weight: 400; color: var(--ka-text-secondary); margin-top: 2px; } .ka-nav-sub a:hover { background: var(--ka-bg-warm); color: var(--ka-orange); } .ka-nav-sub a[aria-current="page"] { background: rgba(242,128,36,0.08); color: var(--ka-orange); } .h-cta { display: inline-flex; gap: 8px; align-items: center; flex-shrink: 0; } .h-phone, .h-email { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ka-font); font-size: 14px; font-weight: 600; line-height: 1; color: var(--ka-navy); text-decoration: none; white-space: nowrap; padding: 12px 14px; border-radius: 8px; transition: background 180ms, color 180ms; } .h-phone:hover, .h-email:hover { background: rgba(15,61,107,0.05); color: var(--ka-orange); } .h-phone .ic, .h-email .ic { width: 14px; height: 14px; opacity: 0.55; flex-shrink: 0; } .h-phone:hover .ic, .h-email:hover .ic { opacity: 1; } @media (max-width: 1280px) { .h-email { display: none; } } /* Hamburger button (hidden on desktop) */ .ka-nav-burger { display: none; width: 44px; height: 44px; margin-left: auto; background: transparent; border: 1px solid rgba(15,61,107,0.12); border-radius: var(--r-sm); cursor: pointer; padding: 0; position: relative; flex-shrink: 0; } .ka-nav-burger span { display: block; position: absolute; left: 11px; width: 22px; height: 2px; background: var(--ka-navy); border-radius: 2px; transition: transform 220ms, opacity 220ms, top 220ms; } .ka-nav-burger span:nth-child(1) { top: 14px; } .ka-nav-burger span:nth-child(2) { top: 21px; } .ka-nav-burger span:nth-child(3) { top: 28px; } .ka-nav-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); } .ka-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .ka-nav-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); } .ka-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(15,61,107,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 65; opacity: 0; transition: opacity 220ms; } body.ka-nav-open .ka-nav-overlay { display: block; opacity: 1; } body.ka-nav-open { overflow: hidden; } /* JS-injected drawer parts — hidden on desktop */ .ka-nav-drawer-head { display: none; } .ka-nav-acc { display: none; } /* === Mobile CTA in header (only on mobile) === */ .h-mobile-cta { display: none; } /* === Mobile breakpoint: ≤ 1024px === */ @media (max-width: 1024px) { .h-inner { padding: 12px 20px; gap: 12px; } .ka-nav-burger { display: inline-flex; align-items: center; justify-content: center; margin-left: 0; } .h-cta .btn-primary { display: none; } .h-phone { display: none !important; } .h-email { display: none !important; } .h-mobile-cta { display: inline-flex; align-items: center; margin-left: auto; padding: 10px 16px; font-size: 13px; white-space: nowrap; } /* Closed state: úplne odstránený z layoutu (display:none). position:fixed potomkovia NIE SÚ clippovaní cez overflow:hidden/clip na html/body (sú voči viewportu, nie parentu), takže off-screen drawer by bol scroll-discoverable. Display:none je jediná spoľahlivá cesta. */ .h-nav { display: none; position: fixed; top: 0; right: 0; width: min(400px, 92vw); height: 100vh; height: 100dvh; background: #faf8f5; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 16px 24px; box-shadow: -16px 0 48px rgba(15,61,107,0.22); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 70; } body.ka-nav-open .h-nav { display: flex; animation: ka-nav-slide-in 280ms cubic-bezier(.2,.9,.3,1) both; } @keyframes ka-nav-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { body.ka-nav-open .h-nav { animation: none; } } /* Drawer header — sticky pill with eyebrow + close */ .ka-nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 20px; margin: 0 0 8px; border-bottom: 1px solid rgba(15,61,107,0.08); position: sticky; top: 0; background: #faf8f5; z-index: 2; } .ka-nav-drawer-eyebrow { font-family: var(--ka-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--ka-text-secondary); padding-left: 8px; } .ka-nav-close { width: 40px; height: 40px; background: transparent; border: 1px solid rgba(15,61,107,0.12); border-radius: var(--r-sm); color: var(--ka-navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 180ms, color 180ms, border-color 180ms; padding: 0; } .ka-nav-close:hover, .ka-nav-close:focus-visible { background: rgba(242,128,36,0.08); border-color: var(--ka-orange); color: var(--ka-orange); outline: none; } .ka-nav-close svg { width: 18px; height: 18px; } /* Top-level link rows */ .h-nav > a, .h-nav .ka-nav-link { padding: 14px 16px; font-size: 16px; border-radius: var(--r-sm); width: 100%; justify-content: flex-start; position: relative; } .h-nav > a[aria-current="page"] { background: rgba(242,128,36,0.08); color: var(--ka-orange); } .h-nav > a[aria-current="page"]::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 3px; background: var(--ka-orange); border-radius: 2px; } /* Has-sub: parent link + chevron toggle in one row */ .ka-nav-item { width: 100%; } .ka-nav-item.has-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-bottom: 2px; border-radius: var(--r-sm); transition: background 180ms; } .ka-nav-item.has-sub > .ka-nav-link { background: transparent; margin-bottom: 0; pointer-events: auto; grid-column: 1; width: auto; } .ka-nav-item.has-sub > .ka-nav-link::after { display: none; } .ka-nav-acc { display: inline-flex; grid-column: 2; width: 44px; height: 44px; background: transparent; border: 0; color: var(--ka-text-secondary); cursor: pointer; align-items: center; justify-content: center; border-radius: var(--r-sm); padding: 0; transition: color 180ms, background 180ms; } .ka-nav-acc:hover, .ka-nav-acc:focus-visible { background: rgba(15,61,107,0.05); color: var(--ka-orange); outline: none; } .ka-nav-acc svg { width: 18px; height: 18px; transition: transform 240ms cubic-bezier(.4,0,.2,1); } .ka-nav-item.open > .ka-nav-acc svg { transform: rotate(180deg); } /* Accordion sub-menu — closed by default, smooth expand */ .ka-nav-sub { grid-column: 1 / -1; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0; min-width: 0; display: block; overflow: hidden; max-height: 0; transition: max-height 320ms cubic-bezier(.4,0,.2,1), padding 280ms ease; } .ka-nav-item.open > .ka-nav-sub { max-height: 700px; padding: 4px 0 12px 8px; } .ka-nav-sub a { padding: 12px 14px 12px 22px; font-size: 14px; position: relative; } .ka-nav-sub a small { font-size: 11px; margin-top: 2px; color: var(--ka-text-secondary); } .ka-nav-sub a[aria-current="page"] { background: rgba(242,128,36,0.08); color: var(--ka-orange); } .ka-nav-sub a[aria-current="page"]::before { content: ''; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 3px; background: var(--ka-orange); border-radius: 2px; } /* Mobile bottom CTA inside drawer */ .ka-nav-mobile-cta { display: flex !important; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(15,61,107,0.08); } .ka-nav-mobile-cta .btn { width: 100%; justify-content: center; padding: 14px 18px; font-size: 14px; } /* Hamburger refinement */ .ka-nav-burger { border-color: rgba(15,61,107,0.16); transition: background 180ms, border-color 180ms; } .ka-nav-burger:hover { background: rgba(15,61,107,0.04); border-color: rgba(15,61,107,0.24); } body.ka-nav-open .ka-nav-burger { display: none; } } @media (min-width: 1025px) { .ka-nav-mobile-cta { display: none; } } /* Crumb safe spacing (in case page hides .h-back) */ .h-back { display: none; } /* legacy back-link is now redundant — full menu replaces it */ /* Cross-link strip — appears before footer on services and segment pages */ .x-link { background: #f7f4ef; padding: 80px 0; border-top: 1px solid rgba(15,61,107,0.06); } .x-link-inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; } .x-link-eye { font-family: var(--ka-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ka-orange); margin-bottom: 14px; } .x-link h2 { margin: 0 0 32px; font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ka-navy); text-wrap: balance; } .x-link h2 em { font-style: italic; font-weight: 500; color: rgba(15,61,107,0.42); } .x-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; } .x-link-card { background: #fff; border: 1px solid rgba(15,61,107,0.06); border-radius: var(--r-lg); text-decoration: none; color: inherit; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--dur-card) var(--ease-out-strong), box-shadow var(--dur-card) var(--ease-out-strong), border-color var(--dur-card) var(--ease-out-strong); } .x-link-card:active { transform: scale(0.99); transition-duration: var(--dur-press); } .x-link-card .x-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ka-navy); } .x-link-card .x-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03); transition: transform 700ms var(--ease-out-strong); } @media (hover: hover) and (pointer: fine) { .x-link-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(242,128,36,0.40); } .x-link-card:hover .x-media img { transform: scale(1.10); } .x-link-card:active { transform: translateY(-2px) scale(0.99); } } .x-link-card .x-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15,61,107,0) 50%, rgba(15,61,107,0.55) 100%); } .x-link-card .x-ic { position: absolute; left: 14px; bottom: 14px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; background: #fff; border-radius: 10px; color: var(--ka-orange); box-shadow: 0 6px 16px -4px rgba(15,61,107,0.45); transition: transform var(--dur-card) var(--ease-out-strong); } @media (hover: hover) and (pointer: fine) { .x-link-card:hover .x-ic { transform: translateY(-2px) scale(1.06); } } .x-link-card .x-ic svg { width: 22px; height: 22px; } .x-link-card .num { position: absolute; top: 12px; right: 14px; z-index: 2; font-family: var(--ka-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; background: rgba(15,61,107,0.55); padding: 4px 9px; border-radius: 6px; } .x-link-card .x-body { padding: 22px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .x-link-card h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--ka-navy); letter-spacing: -0.01em; line-height: 1.25; } .x-link-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ka-text-secondary); } .x-link-card .arr { margin-top: auto; padding-top: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ka-orange); display: inline-flex; align-items: center; gap: 6px; } .x-link-card .arr svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out-strong); } @media (hover: hover) and (pointer: fine) { .x-link-card:hover .arr svg { transform: translateX(4px); } } @media (max-width: 700px) { .x-link { padding: 56px 0; } .x-link-inner { padding: 0 20px; } .x-link-grid { grid-template-columns: 1fr; } } /* === Global footer (rich, dark) === */ footer { margin-top: 140px; padding: 80px 40px 60px; background: #0f3d6b; color: rgba(255,255,255,0.7); font-family: var(--ka-font); } .foot-inner { max-width: 1320px; margin: 0 auto; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.10); } .foot-brand .wordmark { color: #fff; font-size: 18px; display: inline-block; margin-bottom: 16px; } .foot-motto { font-family: var(--ka-font); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; color: var(--ka-orange); margin: 0 0 14px; } .foot-brand p { font-family: var(--ka-font); font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.55); margin: 16px 0 16px; max-width: 320px; } .foot-brand a { font-family: var(--ka-font); color: var(--ka-orange); text-decoration: none; font-weight: 600; font-size: 14px; } .foot-brand a:hover { color: var(--ka-orange-bright); } .foot-addr { font-family: var(--ka-font); font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.7); margin: 0 0 12px; } .foot-link-block { display: block; } /* Inline-link helper: oranžový bold link v texte (napr. v FAQ odpovediach) */ .link-orange { color: var(--ka-orange); font-weight: 600; } .link-orange:hover { color: var(--ka-orange-bright); } .foot-col h5 { font-family: var(--ka-font); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,0.45); margin: 0 0 16px; } .foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .foot-col a { font-family: var(--ka-font); color: rgba(255,255,255,0.85); text-decoration: none; font-size: 14px; transition: color 200ms; } .foot-col a:hover { color: var(--ka-orange); } .foot-bot { padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-family: var(--ka-font); font-size: 12px; font-weight: 500; letter-spacing: 0.3px; color: rgba(255,255,255,0.5); } .foot-bot a { color: inherit; } .foot-bot a:hover { color: var(--ka-orange); } @media (max-width: 1100px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } footer { padding: 60px 20px 40px; } } @media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; gap: 24px; } } /* === Shared O NÁS / Team styles (used by index, kontakt) === */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .team-member { background: #fff; border: 1px solid rgba(15,61,107,0.06); border-radius: var(--r-lg); padding: 32px 24px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; box-shadow: var(--shadow-card); transition: transform var(--dur-card) var(--ease-out-strong), box-shadow var(--dur-card) var(--ease-out-strong), border-color var(--dur-card) var(--ease-out-strong); } .team-member:active { transform: scale(0.99); transition-duration: var(--dur-press); } @media (hover: hover) and (pointer: fine) { .team-member:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: rgba(242,128,36,0.3); } .team-member:active { transform: translateY(-1px) scale(0.99); } } .member-av { width: 88px; height: 88px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 28px; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(15,61,107,0.18); } .team-member h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ka-navy); letter-spacing: -0.01em; line-height: 1.2; } .team-member .role { margin: 0; font-size: 13px; font-weight: 600; color: var(--ka-orange); font-family: var(--ka-font); } .team-member--more { grid-column: 1 / -1; background: transparent; border-style: dashed; border-color: rgba(15,61,107,0.18); box-shadow: none; flex-direction: row; gap: 18px; justify-content: center; padding: 20px 24px; } @media (hover: hover) and (pointer: fine) { .team-member--more:hover { border-color: rgba(242,128,36,0.5); transform: none; } } .team-member--more h3 { font-size: 16px; } .team-member--more .role { font-size: 11px; } .member-av--more { width: 48px; height: 48px; background: rgba(242,128,36,0.12); color: var(--ka-orange); font-size: 28px; font-weight: 300; box-shadow: none; border: 2px dashed rgba(242,128,36,0.45); } .o-nas-license { margin-top: 32px; background: var(--ka-bg-warm); border: 1px solid rgba(15,61,107,0.06); border-radius: var(--r-lg); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .license-info { flex: 1; min-width: 280px; } .license-info h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ka-navy); letter-spacing: -0.01em; } .license-info p { margin: 0; font-size: 14px; color: var(--ka-text-secondary); line-height: 1.5; } @media (max-width: 1100px) { .team-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .team-member { padding: 26px 20px 22px; } .member-av { width: 72px; height: 72px; font-size: 24px; } .o-nas-license { flex-direction: column; align-items: flex-start; padding: 24px 22px; } .o-nas-license .btn { width: 100%; justify-content: center; } } @media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } } /* ===== Foto-band — editoriálne foto + text vedľa seba (zdieľané) ===== */ .ka-band { background: var(--ka-bg-warm); } .ka-band-inner { max-width: 1320px; margin: 0 auto; padding: 76px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .ka-band--imgleft .ka-band-media { order: -1; } .ka-band--portrait .ka-band-media img { aspect-ratio: 3 / 4; } .ka-band--portrait .ka-band-inner { align-items: stretch; } .ka-band-eyebrow { display: inline-block; font-family: var(--ka-mono); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ka-orange); margin-bottom: 16px; } .ka-band-text h2 { margin: 0 0 14px; font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--ka-navy); } .ka-band-text h2 em { font-style: italic; font-weight: 500; color: rgba(15,61,107,0.45); } .ka-band-text p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--ka-text-secondary); } .ka-band-text p strong { color: var(--ka-navy); font-weight: 600; } .ka-band-media { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); } .ka-band-media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; background: var(--ka-bg-soft); } /* Feature-band — fotka cez celú šírku s prekrytím a textom navrchu */ .ka-band--feature .ka-band-inner { display: block; max-width: none; padding: 0; position: relative; } .ka-band--feature .ka-band-media { border-radius: 0; box-shadow: none; position: relative; } .ka-band--feature .ka-band-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,61,107,0.92) 0%, rgba(15,61,107,0.78) 42%, rgba(15,61,107,0.45) 78%, rgba(15,61,107,0.25) 100%); } .ka-band--feature .ka-band-media img { aspect-ratio: auto; height: clamp(340px, 42vw, 480px); } .ka-band--feature .ka-band-text { position: absolute; inset: 0; max-width: 1320px; margin: 0 auto; padding: 0 40px; display: flex; flex-direction: column; justify-content: center; } .ka-band--feature .ka-band-text h2 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.45); } .ka-band--feature .ka-band-text h2 em { color: rgba(255,255,255,0.62); } .ka-band--feature .ka-band-text p { color: #fff; max-width: 520px; text-shadow: 0 1px 12px rgba(0,0,0,0.5); font-weight: 500; } .ka-band--feature .ka-band-text p strong { color: #fff; font-weight: 700; background: rgba(15,61,107,0.55); padding: 1px 6px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Showcase galéria — typy objektov / segmenty (3 v rade) */ .ka-showcase { max-width: 1320px; margin: 0 auto; padding: 4px 40px 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ka-showcase figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; position: relative; box-shadow: var(--shadow-card); } .ka-showcase img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; background: var(--ka-bg-soft); } .ka-showcase figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 18px 14px; font-family: var(--ka-font); font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(15,61,107,0.82), rgba(15,61,107,0)); } @media (max-width: 860px) { .ka-band-inner { grid-template-columns: 1fr; gap: 26px; padding: 48px 20px; } .ka-band--imgleft .ka-band-media, .ka-band-media { order: -1; } .ka-band-media img { aspect-ratio: 16 / 10; } .ka-band--feature .ka-band-inner { padding: 0; } .ka-band--feature .ka-band-media { order: 0; } .ka-band--feature .ka-band-media::after { background: linear-gradient(90deg, rgba(15,61,107,0.86) 0%, rgba(15,61,107,0.62) 100%); } .ka-band--feature .ka-band-text { padding: 0 20px; } .ka-showcase { grid-template-columns: 1fr; padding: 4px 20px; gap: 14px; } } /* ===== Naše realizácie — krížové odkazy na referencie ===== */ .ka-realizacie { background: var(--ka-bg-warm); border-top: 1px solid rgba(15,61,107,0.06); } .ka-realizacie-inner { max-width: 1320px; margin: 0 auto; padding: 76px 40px; } .ka-realizacie-eye { display: inline-block; font-family: var(--ka-mono); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ka-orange); margin-bottom: 14px; } .ka-realizacie-inner > h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--ka-navy); } .ka-realizacie-inner > h2 em { font-style: italic; font-weight: 500; color: rgba(15,61,107,0.45); } .ka-realizacie-lead { margin: 0 0 36px; font-size: 16px; line-height: 1.6; color: var(--ka-text-secondary); max-width: 620px; } .ka-realizacie-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .ka-realcard { display: flex; flex-direction: column; gap: 10px; padding: 32px 30px; border-radius: var(--r-lg); text-decoration: none; box-shadow: var(--shadow-card); border: 1px solid rgba(15,61,107,0.06); background: #fff; color: var(--ka-text); transition: transform var(--dur-card) var(--ease-out-strong), box-shadow var(--dur-card) var(--ease-out-strong), border-color var(--dur-card) var(--ease-out-strong); } .ka-realcard:active { transform: scale(0.99); transition-duration: var(--dur-press); } @media (hover: hover) and (pointer: fine) { .ka-realcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(242,128,36,0.4); } .ka-realcard:active { transform: translateY(-1px) scale(0.99); } } .ka-realcard--stadion { background: linear-gradient(150deg, #0f3d6b, #123e6c); border-color: transparent; color: #fff; } .ka-realcard-tag { font-family: var(--ka-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ka-orange); } .ka-realcard h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.015em; color: var(--ka-navy); } .ka-realcard--stadion h3 { color: #fff; } .ka-realcard p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ka-text-secondary); } .ka-realcard--stadion p { color: rgba(255,255,255,0.78); } .ka-realcard-arr { margin-top: auto; padding-top: 14px; font-family: var(--ka-font); font-size: 13px; font-weight: 600; color: var(--ka-orange); } @media (max-width: 760px) { .ka-realizacie-inner { padding: 48px 20px; } .ka-realizacie-grid { grid-template-columns: 1fr; } } /* ===== Lead magnet card — shared component pre PDF gate placements ===== Použiť na service/segment stránkach + voliteľne pri blog článkoch. Vyžaduje pdf-gate-modal.js + pdf-gate-modal.css v . HTML šablóna: */ .ka-lm-card { /* Match outer container of .final-cta visible width: 1320px max minus 40px L/R padding */ width: calc(100% - 80px); max-width: 1240px; margin: 60px auto; background: linear-gradient(135deg, var(--ka-navy-deep) 0%, var(--ka-navy-2) 100%); color: #fff; border-radius: var(--r-lg); padding: 48px 56px; display: grid; grid-template-columns: 72px 1fr; gap: 32px; align-items: start; box-shadow: var(--shadow-elev); position: relative; overflow: hidden; } .ka-lm-card::before { content: ''; position: absolute; top: -30%; right: -8%; width: 360px; height: 360px; background: radial-gradient(circle, rgba(242,128,36,0.22), transparent 70%); pointer-events: none; } .ka-lm-card > * { position: relative; z-index: 1; } .ka-lm-card .ka-lm-icon { width: 72px; height: 72px; flex-shrink: 0; align-self: start; } .ka-lm-card .ka-lm-icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .ka-lm-card .ka-lm-eye { font-family: var(--ka-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ka-orange); margin-bottom: 10px; } .ka-lm-card .ka-lm-h { margin: 0 0 12px; font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.02em; color: #fff; } .ka-lm-card .ka-lm-h em { font-style: italic; font-weight: 500; color: var(--ka-orange-bright); } .ka-lm-card .ka-lm-p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 56ch; } .ka-lm-card .ka-lm-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .ka-lm-card + .ka-lm-card { margin-top: -20px; } @media (max-width: 960px) { .ka-lm-card { padding: 36px 32px; gap: 22px; } } @media (max-width: 700px) { .ka-lm-card { width: calc(100% - 40px); grid-template-columns: 1fr; padding: 28px 24px; gap: 14px; } .ka-lm-card .ka-lm-icon { width: 56px; height: 56px; } .ka-lm-card .ka-lm-actions .btn { width: 100%; justify-content: center; } } /* ===== Kalkulačka CTA (zdieľané) ===== */ .ka-kalk-cta { background: linear-gradient(135deg, #0f3d6b, #123e6c 70%, #1a5491); border-radius: var(--r-lg); padding: 52px 60px; display: grid; grid-template-columns: 1.5fr auto; gap: 44px; align-items: center; color: #fff; position: relative; overflow: hidden; } .ka-kalk-cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(at 88% 12%, rgba(0,178,248,0.22), transparent 55%); } .ka-kalk-cta-text { position: relative; z-index: 1; } .ka-kalk-cta-eyebrow { display: inline-block; font-family: var(--ka-mono); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ka-orange-bright); margin-bottom: 12px; } .ka-kalk-cta-text h3 { margin: 0 0 12px; font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: #fff; } .ka-kalk-cta-text h3 em { font-style: italic; font-weight: 400; color: rgba(255,255,255,0.55); } .ka-kalk-cta-text p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.80); max-width: 600px; } .ka-kalk-cta-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; } .ka-kalk-cta-actions .btn { white-space: nowrap; justify-content: center; } /* CTA na tmavom pozadí — sekundárne tlačidlo musí mať svetlý border/text */ .ka-kalk-cta-actions .btn-ghost-dark { color: #fff; border: 1px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.04); } .ka-kalk-cta-actions .btn-ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,0.10); color: #fff; } @media (max-width: 820px) { .ka-kalk-cta { grid-template-columns: 1fr; padding: 36px 28px; gap: 26px; } .ka-kalk-cta-actions { flex-direction: row; flex-wrap: wrap; } .ka-kalk-cta-actions .btn { flex: 1; min-width: 180px; } } /* ============================================================ GLOBAL MOBILE SAFETY NET (added 2026-05-28) Defenzívne pravidlá ktoré zabránia najčastejším mobile bugom bez nutnosti editovať každú stránku zvlášť. ============================================================ */ /* Prevent any horizontal scroll on the document. POZOR: NEpridávať max-width, position:relative ani overflow:clip na body — spôsobujú že position:fixed popupy (cookie banner, booking modal) sa centrujú voči body namiesto viewportu a zobrazia len polovicu. */ html { overflow-x: hidden; } body { overflow-x: hidden; } /* Touch-action: pan-y pinch-zoom — povoľuje len vertikálny scroll + pinch. Zakáže horizontálny swipe gestom aj keby document.scrollWidth bol z nejakého browser-quirk dôvodu väčší ako viewport. Pinch-zoom ostáva pre a11y. Bezpečné keďže na webe nemáme horizontal carousely. Aplikované na html + body + main — Samsung Chrome niekedy ignoruje touch-action na html ak descendant má vlastný touch-action. */ html, body, main { touch-action: pan-y pinch-zoom; } /* Responsive media — len max-width, žiadne height override. .wordmark img (a iné s explicitným heightom) si zachovajú svoje pravidlá. */ img, video, iframe { max-width: 100%; } svg { max-width: 100%; } /* Long words / URLs / emails — break instead of overflow */ p, h1, h2, h3, h4, h5, h6, li, dd, dt, td, th, a, span { overflow-wrap: break-word; word-wrap: break-word; } /* Code, pre, tables that may exceed viewport — give them their own scroll */ pre, table { max-width: 100%; overflow-x: auto; } /* Flex/grid children — allow shrinking below content size to prevent layout-induced horizontal overflow from long inline children. */ @media (max-width: 1024px) { .h-inner > *, .h-cta > *, .hero > *, .hero-grid > *, .stats > *, .cta-row > *, .final-cta-inner > *, .ka-band-inner > *, .x-link-card > *, .kontakt-grid > * { min-width: 0; } } /* Form inputs — never exceed their container */ input, select, textarea { max-width: 100%; } /* Small phones — collapse CTA rows to full-width stack */ @media (max-width: 480px) { .cta-row, .hero .cta-row, .final-cta-actions { flex-direction: column; align-items: stretch; } .cta-row .btn, .final-cta-actions .btn { width: 100%; justify-content: center; } /* Tighter horizontal gutters on very small screens */ .h-inner { padding-left: 16px; padding-right: 16px; gap: 8px; } } /* iOS-only — prevent form zoom on focus by ensuring 16px input font-size */ @supports (-webkit-touch-callout: none) { input, select, textarea { font-size: max(16px, 14px); } } /* ============================================================ NOTEBOOK FOLD — kompaktný hero na širokých, ale NÍZKYCH viewportoch ------------------------------------------------------------ Problém: na notebooku (1366×768, alebo 1080p pri 125–150 % Windows škálovaní) bol medzi breadcrumbom a H1 priveľký priestor (horný padding hero + margin breadcrumbu/eyebrow + na stats-stránkach grid row-gap 72px), takže H1 padol pod záhyb. Riešenie: na min-width:1025px a max-height:860px (= „nízky desktop", typicky notebook) stlačíme rozostupy hero sekcie, aby H1 (a väčšinou aj CTA) bol viditeľný bez scrollu. Veľké monitory (výška > 860px) si držia pôvodný vzdušný hero — táto query ich nezasiahne. Vyššia špecificita (`body …`) je zámerná: per-page hero štýly žijú v inline