/* ========================================================= RAKYstav – nový web · dizajn v6 Inter Tight na nadpisy a veľké čísla, Inter na text a ovládanie (obe OFL), veľké skutočné fotky, termovízne porovnanie v sklenenej karte. Farby značky – pol. 2.04: --color-primary (#1745F6 – odkazy, fokus), --ink (tlačidlá), --night (tmavé plochy) ========================================================= */ /* 2 súbory písma (pol. 16.08): latinka + slovenská/česká diakritika, variabilná hrúbka – pripravuje gen/fonts_subset.py */ @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-sk.woff2") format("woff2"); } @font-face { font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-tight-sk.woff2") format("woff2"); } :root { color-scheme: light; /* značka */ /* zdrojové farby značky – odtiene sa dopočítajú (pol. 2.04) */ --color-primary: #1745F6; --color-accent: #F07A1A; --blue: var(--color-primary); --blue-700: color-mix(in srgb, var(--color-primary) 82%, #000); --blue-800: color-mix(in srgb, var(--color-primary) 62%, #000); --blue-100: color-mix(in srgb, var(--color-primary) 15%, #fff); --blue-50: color-mix(in srgb, var(--color-primary) 7%, #fff); --red: #D4091F; /* plochy */ --night: #0B1630; /* päta, tmavé pásy – z loga #003A81 */ --night-2: #142349; --ir: #1B1F5E; /* termovízna karta */ --ir-2: #232873; --ink: #0E1726; --ink-2: #3A4454; --muted: #5B6472; --paper: #FFFFFF; --mist: #F2F3F1; /* svetlý betón – striedanie sekcií */ --mist-2: #E7E9E6; --line: #E2E4E6; --line-2: #C8CDD2; /* teplo (len termovízia a úspora) */ --heat: var(--color-accent); --heat-50: color-mix(in srgb, var(--color-accent) 8%, #fff); /* stavy */ --ok: #0F7A45; --ok-50: #E8F5EE; --warn: #8A5300; --warn-50: #FFF6E5; --err: #C4261B; --err-50: #FCEDEB; /* aliasy pre staršie komponenty */ --color-primary-700: var(--blue-700); --color-primary-800: var(--blue-800); --color-primary-100: var(--blue-100); --color-primary-50: var(--blue-50); --color-accent-50: var(--heat-50); --glass: var(--mist); --glass-2: var(--mist-2); --frame: var(--night); --navy: var(--night); --navy-2: var(--night-2); --navy-3: var(--night); --bg: var(--paper); --bg-soft: var(--mist); --bg-blue: var(--night); /* tvar */ --r: 10px; --r-lg: 22px; --r-img: 18px; --radius: 22px; --radius-sm: 10px; --shadow-sm: 0 1px 2px rgba(14,23,38,.06); --shadow: 0 18px 40px -22px rgba(14,23,38,.35); --shadow-lg: 0 40px 90px -36px rgba(14,23,38,.5); --container: 1280px; --gutter: 20px; --header-h: 84px; --section: clamp(88px, 10vw, 160px); --font: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif; --wide: 100%; } @media (min-width: 768px) { :root { --gutter: 40px; } } @media (min-width: 1200px) { :root { --gutter: 56px; } } @media (min-width: 1600px) { :root { --container: 1400px; } html { font-size: 17.5px; } } @media (min-width: 2200px) { :root { --container: 1480px; } html { font-size: 18.5px; } } /* ---------- Základ ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--paper); font-variant-numeric: lining-nums; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } img { height: auto; } a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-2); transition: color .15s, text-decoration-color .15s; } a:hover { color: var(--blue); text-decoration-color: currentColor; } h1, h2 { font-family: var(--display); font-weight: 600; margin: 0 0 .45em; color: var(--ink); text-wrap: balance; } h1 { font-size: clamp(3rem, 1.9rem + 4.4vw, 6rem); letter-spacing: -.02em; line-height: .96; } h2 { font-size: clamp(2.4rem, 1.6rem + 2.9vw, 4.4rem); letter-spacing: -.015em; line-height: 1; } h3, h4 { margin: 0 0 .5em; color: var(--ink); font-family: var(--font); } h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; } h4 { font-size: 1rem; font-weight: 600; } p { margin: 0 0 1em; text-wrap: pretty; } ul, ol { padding-left: 1.2em; } li::marker { color: var(--muted); } strong, b { font-weight: 600; } sup { font-size: .6em; } code { font-size: .85em; background: var(--mist); padding: .1em .4em; border-radius: 6px; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } ::selection { background: var(--blue-100); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } .nowrap { white-space: nowrap; } .muted { color: var(--muted); } .small { font-size: .9rem; } .xs { font-size: .8rem; } .center { text-align: center; } .serif { font-family: var(--display); font-weight: 600; } .mb-0 { margin-bottom: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.75rem; } .mt-4 { margin-top: 3rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.75rem; } .stack > * + * { margin-top: 1rem; } .eyebrow { display: none; } .kicker { font-size: .95rem; font-weight: 500; color: var(--muted); margin: 0 0 16px; } .lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.28rem); color: var(--ink-2); line-height: 1.6; max-width: 56ch; } .skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 1000; font-weight: 600; text-decoration: none; border-radius: 99px; } .skip-link:focus { top: 12px; color: #fff; } .promo-bar { background: var(--ink); color: #fff; font-size: .9rem; } .promo-bar .container { display: flex; gap: 12px; align-items: center; justify-content: center; min-height: 40px; } .promo-bar a { color: #fff; font-weight: 600; } .promo-x { background: none; border: 0; color: #fff; font-size: 1.3rem; cursor: pointer; min-width: 32px; min-height: 32px; } /* ---------- Tlačidlá ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: .8em 1.7em; border-radius: 99px; border: 1px solid transparent; font: inherit; font-size: .98rem; font-weight: 600; line-height: 1.15; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; text-align: center; letter-spacing: -.005em; } .btn svg { width: 1.1em; height: 1.1em; flex: none; } .btn-primary { background: var(--ink); color: #fff; } .btn-primary:hover { background: var(--blue); color: #fff; } .btn-white { background: #fff; color: var(--ink); } .btn-white:hover { background: var(--blue-50); color: var(--ink); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } .btn-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.45); backdrop-filter: blur(8px); } .btn-light:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; } .btn-success { background: var(--ok); color: #fff; } .btn-success:hover { background: #0b6238; color: #fff; } .btn-sm { min-height: 40px; padding: .5em 1.15em; font-size: .88rem; } .btn-lg { min-height: 58px; padding: .9em 1.95em; font-size: 1rem; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .link-arrow { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 6px; } .link-arrow:hover { color: var(--blue); text-decoration-color: var(--blue); } /* ---------- Hlavička ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); transition: background .25s, border-color .25s, box-shadow .25s; } @supports (backdrop-filter: blur(8px)) { .site-header { background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(14px); } } .site-header.is-scrolled { box-shadow: 0 10px 30px -24px rgba(17,26,36,.55); } .header-inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); transition: height .25s; } .site-header.is-scrolled .header-inner { height: 62px; } .logo { display: inline-flex; align-items: center; flex: none; color: var(--ink); text-decoration: none; position: relative; } .logo img { height: 48px; width: auto; transition: height .25s, opacity .25s; } .logo .logo-white { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; } .site-header.is-scrolled .logo img { height: 40px; } .main-nav { flex: 1; display: flex; justify-content: center; } .main-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; } .main-nav a, .main-nav .nav-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; color: var(--ink); font: inherit; font-weight: 500; font-size: .94rem; text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap; position: relative; border-radius: var(--r); transition: color .15s, background .15s; } .main-nav a::after, .main-nav .nav-trigger::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .main-nav a:hover::after, .main-nav .nav-trigger:hover::after, .main-nav .nav-trigger[aria-expanded="true"]::after, .main-nav a[aria-current="page"]::after, .main-nav .nav-trigger.is-current::after { transform: none; } .main-nav a:hover, .main-nav .nav-trigger:hover { color: var(--ink); } .main-nav a[aria-current="page"] { color: var(--blue); } .nav-trigger .chev { width: 14px; height: 14px; transition: transform .2s; opacity: .6; } .nav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); } .header-actions { display: flex; align-items: center; gap: 18px; flex: none; } .header-phone { display: none; font-weight: 500; color: var(--ink); text-decoration: none; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; } .header-phone svg { width: 16px; height: 16px; opacity: .7; } @media (min-width: 1380px) { .header-phone { display: inline-flex; } } .header-actions .btn { min-height: 44px; padding: .6em 1.15em; font-size: .94rem; } .cta-short { display: none; } @media (max-width: 440px) { .cta-long { display: none; } .cta-short { display: inline; } } .burger { display: none; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line-2); background: transparent; align-items: center; justify-content: center; cursor: pointer; color: inherit; } .burger svg { width: 22px; height: 22px; } @media (max-width: 1179px) { .main-nav { display: none; } .burger { display: inline-flex; } .header-inner { justify-content: space-between; } .logo img { height: 42px; } } /* domovská stránka: priehľadná hlavička nad nočnou scénou */ :is(.home, .photo-hero) .site-header:not(.is-scrolled):not(:has(.mega.is-open)) { background: transparent; border-color: transparent; backdrop-filter: none; color: #fff; } :is(.home, .photo-hero) .site-header:not(.is-scrolled):not(:has(.mega.is-open)) .logo-color { opacity: 0; } :is(.home, .photo-hero) .site-header:not(.is-scrolled):not(:has(.mega.is-open)) .logo-white { opacity: 1; } :is(.home, .photo-hero) .site-header:not(.is-scrolled):not(:has(.mega.is-open)) .main-nav a, :is(.home, .photo-hero) .site-header:not(.is-scrolled):not(:has(.mega.is-open)) .main-nav .nav-trigger, :is(.home, .photo-hero) .site-header:not(.is-scrolled):not(:has(.mega.is-open)) .header-phone { color: #fff; } :is(.home, .photo-hero) .site-header:not(.is-scrolled):not(:has(.mega.is-open)) .header-actions .btn-primary { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(8px); } :is(.home, .photo-hero) .site-header:not(.is-scrolled):not(:has(.mega.is-open)) .header-actions .btn-primary:hover { background: #fff; color: var(--ink); } :is(.home, .photo-hero) .site-header:not(.is-scrolled):not(:has(.mega.is-open)) .burger { border-color: rgba(255,255,255,.4); color: #fff; } .has-mega { position: static; } .mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 40px 60px -50px rgba(17,26,36,.55); padding: 36px 0 40px; display: none; color: var(--ink); } .mega.is-open { display: block; } .mega-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.05fr; gap: 0; } .mega-grid > div { padding: 0 32px; border-left: 1px solid var(--line); } .mega-grid > div:first-child { border-left: 0; padding-left: 0; } .mega .mega-title { font-size: .86rem; font-weight: 500; color: var(--muted); margin: 0 0 14px; } .mega ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .mega ul a { display: block; padding: 6px 0; color: var(--ink); text-decoration: none; font-weight: 500; font-size: .98rem; } .mega ul a small { display: block; color: var(--muted); font-weight: 400; font-size: .82rem; font-variant-numeric: tabular-nums; } .mega ul a:hover, .mega ul a:focus-visible { color: var(--blue); } .mega-grid > .mega-teaser { background: var(--ir); color: #fff; padding: 26px; display: flex; flex-direction: column; gap: 10px; border-radius: var(--r-lg); position: relative; border-left: 0; overflow: hidden; } .mega-teaser::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,170,60,.55), rgba(217,54,122,.2) 55%, transparent 70%); } .mega-teaser .mega-title { color: #A9B0E6; } .mega-teaser strong { font-size: 1.4rem; line-height: 1.15; font-weight: 400; letter-spacing: -.02em; position: relative; } .mega-teaser p { color: #C9CEF2; font-size: .9rem; margin: 0; position: relative; } .mega-teaser .btn { align-self: flex-start; margin-top: 8px; background: #fff; color: var(--ink); position: relative; z-index: 1; } .drawer-backdrop { position: fixed; inset: 0; background: rgba(10,22,48,.45); z-index: 199; opacity: 0; pointer-events: none; transition: opacity .2s; } .drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: #fff; z-index: 200; transform: translateX(105%); transition: transform .3s ease; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); color: var(--ink); } .drawer.is-open { transform: none; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); } .drawer-head img { height: 36px; width: auto; } .drawer-body { overflow-y: auto; padding: 6px 20px 20px; flex: 1; } .drawer-body ul { list-style: none; padding: 0; margin: 0; } .drawer-body > ul > li { border-bottom: 1px solid var(--line); } .drawer-body a, .drawer-body .sub-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 2px; font: inherit; font-weight: 500; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; font-size: 1.15rem; letter-spacing: -.01em; } .drawer-body .sub-trigger svg { width: 16px; height: 16px; } .drawer-body .sub { padding: 0 0 12px 12px; display: none; border-left: 1px solid var(--line); margin-left: 2px; } .drawer-body .sub.is-open { display: block; } .drawer-body .sub a { padding: 8px 4px; font-weight: 400; font-size: 1rem; color: var(--ink-2); } .drawer-foot { padding: 16px 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; } .icon-btn { width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line-2); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); font: inherit; font-size: 1.2rem; } .icon-btn svg { width: 20px; height: 20px; } .breadcrumbs { padding-top: 28px; font-size: .86rem; } .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); } .breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); } .breadcrumbs a { color: var(--muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--ink); text-decoration: underline; } /* ---------- Sekcie ---------- */ .section { padding: var(--section) 0; } .section-sm { padding: clamp(32px, 4.5vw, 64px) 0; } .section-soft { background: var(--mist); } .section-head { margin-bottom: clamp(36px, 4.5vw, 72px); } .section-head h2 { max-width: 16ch; } @media (min-width: 980px) { .section-head:has(> h2 + p) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; row-gap: 12px; align-items: end; } .section-head:has(> h2 + p) > h2 { grid-column: 1; grid-row: 1; margin: 0; } .section-head:has(> h2 + p) > :not(h2) { grid-column: 2; margin-bottom: 0; } } .page-hero { padding: 8px 0 clamp(48px, 6vw, 88px); background: #fff; } .page-hero h1 { max-width: 16ch; margin-top: 36px; } .page-hero .lead { max-width: 56ch; margin-top: 18px; } .page-hero .hero-ctas { margin-top: 30px; } .updated { font-size: .82rem; color: var(--muted); margin-top: 26px; margin-bottom: 0; } @media (min-width: 1080px) { .page-hero .container:not(.page-media) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto auto; column-gap: 72px; align-items: end; } .page-hero .container:not(.page-media) > h1 { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; } .page-hero .container:not(.page-media) > :not(h1) { grid-column: 2; } .page-hero .lead { margin-top: 0; align-self: end; } } .page-hero:has(.page-media) { padding-bottom: 0; } .grid { display: grid; gap: clamp(16px, 2vw, 24px); } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 1023px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .grid > *, .split > * { min-width: 0; } .split { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 88px); align-items: start; } @media (min-width: 980px) { .split { grid-template-columns: 1fr 1fr; } .split-60 { grid-template-columns: 1.45fr 1fr; } .split.center-y { align-items: center; } } /* ---------- Karty a obsahové prvky ---------- */ .card { background: var(--mist); border: 0; border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 34px); position: relative; } .section-soft .card { background: #fff; } .card-hover { transition: background .2s; } .card-hover:hover { background: var(--mist-2); } .section-soft .card-hover:hover { background: #FAFBFC; } .card-hover:hover h3 { color: var(--blue); } .card h3 { margin-bottom: .45em; } .card p:last-child { margin-bottom: 0; } .card .icon { width: 40px; height: 40px; color: var(--ink); display: inline-flex; align-items: center; justify-content: flex-start; margin-bottom: 20px; } .card .icon svg { width: 28px; height: 28px; stroke-width: 1.4; } .card .icon.warm { color: var(--heat); } .card-link { position: absolute; inset: 0; z-index: 1; } .card .link-arrow { position: relative; z-index: 2; margin-top: 16px; display: inline-block; } .tag { display: inline-block; font-size: .78rem; font-weight: 500; padding: 3px 9px; border-radius: 99px; background: var(--blue-50); color: var(--blue-800); } .tag.warm { background: var(--heat-50); color: #8A3A07; } .tag.ok { background: var(--ok-50); color: #0A6238; } .tag.grey { background: var(--mist); color: var(--muted); } .ph { position: relative; overflow: hidden; background: linear-gradient(160deg, #E9EDF0 0%, #DCE2E7 100%); border-radius: var(--r); min-height: 180px; aspect-ratio: 4/3; display: flex; align-items: flex-end; } .ph.wide { aspect-ratio: 16/9; } .ph.tall { aspect-ratio: 1/1; } .ph span { position: relative; z-index: 1; margin: 14px; font-size: .78rem; font-weight: 500; color: var(--ink-2); background: rgba(255,255,255,.9); padding: 6px 10px; border-radius: 3px; max-width: calc(100% - 28px); } /* V skratke */ .tldr { background: var(--mist); border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 36px); display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 8px 40px; } .section-soft .tldr { background: #fff; } .tldr h2 { font-size: 1rem; font-weight: 600; letter-spacing: 0; margin: 4px 0 0; line-height: 1.3; color: var(--ink); } .tldr ul { list-style: none; margin: 0; padding: 0; display: grid; } .tldr li { padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line); font-size: 1rem; position: relative; } .tldr li::before { content: ""; position: absolute; left: 0; top: 19px; width: 10px; height: 1px; background: var(--ink); } .tldr li:first-child { padding-top: 0; } .tldr li:first-child::before { top: 9px; } .tldr li:last-child { border-bottom: 0; padding-bottom: 0; } @media (max-width: 700px) { .tldr { grid-template-columns: 1fr; } } .steps { counter-reset: step; display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0,1fr)); position: relative; } @media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 36px; } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding: 0 32px 0 0; background: none; border: 0; list-style: none; } .step::before { counter-increment: step; content: counter(step); display: block; font-size: .95rem; font-weight: 500; color: var(--muted); padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--ink); font-variant-numeric: tabular-nums; } .step h3 { font-size: 1.15rem; } .step p { color: var(--muted); font-size: .98rem; margin: 0; max-width: 32ch; } ol.steps.timeline .step::before { content: none; } .steps.no-count .step::before { content: ""; padding-bottom: 0; } .review { display: flex; flex-direction: column; gap: 18px; } .review blockquote { margin: 0; font-size: 1.2rem; line-height: 1.45; color: var(--ink); letter-spacing: -.01em; } .review footer { display: flex; align-items: center; gap: 12px; font-size: .92rem; margin-top: auto; } .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--mist-2); color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; } .draft-note { font-size: .78rem; color: var(--warn); background: var(--warn-50); border-left: 2px solid #E0A93A; padding: 6px 10px; display: inline-block; max-width: 70ch; border-radius: 0 3px 3px 0; } .faq { display: grid; border-top: 1px solid var(--ink); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; padding: 22px 56px 22px 0; font-weight: 500; font-size: 1.1rem; position: relative; letter-spacing: -.01em; transition: color .15s; } .faq summary::-webkit-details-marker { display: none; } .faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 15px; height: 1px; background: var(--ink); transition: transform .25s; } .faq summary::after { transform: rotate(90deg); } .faq details[open] summary::after { transform: rotate(0); } .faq summary:hover { color: var(--blue); } .faq .answer { padding: 0 56px 24px 0; color: var(--ink-2); max-width: 68ch; } .faq .answer p:last-child { margin-bottom: 0; } .faq-group h2 { font-size: 1.6rem; margin-top: 12px; } /* Záverečná výzva – nočný pás s teplým oknom */ .cta-box { background: var(--ir); color: #C9CEF2; padding: clamp(36px, 6vw, 88px) clamp(28px, 6vw, 88px); display: grid; gap: 32px; align-items: end; position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; } .cta-box::before { content: ""; position: absolute; right: -6%; top: -30%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,186,70,.5) 0%, rgba(240,100,40,.28) 30%, rgba(217,54,122,.12) 52%, transparent 70%); z-index: -1; } @media (min-width: 900px) { .cta-box { grid-template-columns: 1.4fr auto; } } .cta-box h2 { color: #fff; margin-bottom: .4em; max-width: 18ch; } .cta-box p { margin: 0; max-width: 54ch; } .cta-box .actions { display: flex; flex-wrap: wrap; gap: 12px; position: relative; } .cta-box .btn-primary { background: #fff; color: var(--ink); } .cta-box .btn-primary:hover { background: var(--blue-50); } .cta-box .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); } .cta-box .btn-ghost:hover { border-color: #fff; color: #fff; } .related { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 1px solid var(--ink); } .related a { display: block; padding: 22px 24px 24px 0; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 1.1rem; letter-spacing: -.01em; border-bottom: 1px solid var(--line); } .related a span { display: block; font-weight: 400; color: var(--muted); font-size: .92rem; margin-top: 4px; letter-spacing: 0; } .related a:hover { color: var(--blue); } .prose { max-width: 68ch; } .prose h2 { margin-top: 1.6em; font-size: clamp(1.5rem, 1.2rem + .9vw, 2.1rem); } .prose h3 { margin-top: 1.4em; } .prose li { margin-bottom: .4em; } blockquote.card { border-radius: 0 var(--r-lg) var(--r-lg) 0; border-left: 2px solid var(--ink); } .table-wrap { overflow-x: auto; border-top: 1px solid var(--ink); background: #fff; } table { width: 100%; border-collapse: collapse; font-size: .96rem; font-variant-numeric: tabular-nums; } caption { text-align: left; padding: 14px 14px; font-weight: 500; color: var(--muted); caption-side: top; font-size: .9rem; } th, td { padding: 14px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } thead th { font-size: .84rem; font-weight: 500; color: var(--muted); background: var(--mist); } tbody th { font-weight: 500; } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; } .compare td.yes { color: var(--ink); font-weight: 500; } .compare td.yes::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-right: 10px; vertical-align: 1px; } .compare td.no { color: var(--muted); } @media (max-width: 599px) { table.stack-mobile thead { display: none; } table.stack-mobile, table.stack-mobile tbody, table.stack-mobile tr, table.stack-mobile th, table.stack-mobile td { display: block; width: 100%; } table.stack-mobile tr { border-bottom: 1px solid var(--line); padding: 10px 0; } table.stack-mobile th[scope="row"] { border: 0; padding: 8px 14px 4px; font-size: 1rem; } table.stack-mobile td { border: 0; padding: 4px 14px; display: flex; justify-content: space-between; gap: 12px; text-align: right; } table.stack-mobile td::before { content: attr(data-label); color: var(--muted); font-weight: 400; font-size: .86rem; text-align: left; } .compare td.yes::before { display: none; } } .specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--ink); margin: 0; } .spec { padding: 16px 18px 18px 0; border-bottom: 1px solid var(--line); } .spec dt { font-size: .84rem; color: var(--muted); } .spec dd { margin: 6px 0 0; font-weight: 400; font-size: 1.6rem; font-variant-numeric: tabular-nums; letter-spacing: -.025em; line-height: 1.1; } /* ---------- Formuláre ---------- */ .form-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0,1fr)); } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .field label, .field .label { font-weight: 500; font-size: .94rem; color: var(--ink); } .field .req, .req { color: var(--err); } .field .opt { color: var(--muted); font-weight: 400; font-size: .86rem; } .field .hint { font-size: .86rem; color: var(--muted); } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="time"], input[type="password"], select, textarea { font: inherit; font-size: 16px; width: 100%; min-height: 52px; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s; } textarea { min-height: 120px; resize: vertical; line-height: 1.5; } select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111A24' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat; padding-right: 42px; } input:hover, select:hover, textarea:hover { border-color: var(--ink-2); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,69,246,.16); } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--err); background: #fffafa; } .field .error { color: var(--err); font-size: .86rem; font-weight: 500; display: none; margin: 0; } .field.has-error .error { display: block; } .check { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; cursor: pointer; } .check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); flex: none; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-alert { padding: 13px 16px; font-weight: 500; font-size: .95rem; display: none; border-left: 2px solid currentColor; border-radius: 0 var(--r) var(--r) 0; } .form-alert.is-visible { display: block; } .form-alert.err { background: var(--err-50); color: var(--err); } .form-alert.ok { background: var(--ok-50); color: var(--ok); } .req-note { font-size: .84rem; color: var(--muted); margin: 0 0 14px; } .tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); } .tiles.tiles-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .tiles.tiles-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 900px) { .tiles.tiles-3, .tiles.tiles-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 520px) { .tiles, .tiles.tiles-3, .tiles.tiles-4 { grid-template-columns: 1fr; } } .tile { position: relative; display: block; cursor: pointer; } .tile input { position: absolute; opacity: 0; inset: 0; pointer-events: none; } .tile .tile-body { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; height: 100%; } .tile .tile-body strong { display: block; font-size: 1rem; font-weight: 500; } .tile .tile-body small { display: block; color: var(--muted); font-size: .85rem; line-height: 1.4; margin-top: 3px; } .tile .tile-ico { width: 36px; height: 36px; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex: none; } .tile .tile-ico svg { width: 26px; height: 26px; stroke-width: 1.4; } .tile:hover .tile-body { border-color: var(--ink-2); } .tile input:checked + .tile-body { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #fff; } .tile input:checked + .tile-body .tile-ico { color: var(--blue); } .tile input:focus-visible + .tile-body { outline: 2px solid var(--blue); outline-offset: 2px; } .tile .tile-tag { position: absolute; top: -10px; right: 12px; z-index: 1; background: var(--ink); color: #fff; } input[type="range"] { width: 100%; accent-color: var(--ink); height: 28px; } /* ---------- Pätička ---------- */ .site-footer { background: var(--night); color: #9DAAC2; padding: clamp(64px, 8vw, 112px) 0 calc(28px + env(safe-area-inset-bottom)); font-size: .94rem; } .site-footer a { color: #E2E8F3; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); } .footer-grid { display: grid; gap: 48px; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } .site-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } } .site-footer h2 { font-size: .88rem; font-weight: 500; color: #7D8BA6; margin-bottom: 16px; letter-spacing: 0; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; } .site-footer ul a { display: inline-block; padding: 4px 0; min-height: 24px; } .footer-logo { color: #fff; display: inline-block; } .footer-logo img { height: 50px; width: auto; } .footer-claim { color: #fff; font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); line-height: 1.05; margin: 28px 0 16px; letter-spacing: -.035em; max-width: 12ch; } .social { display: flex; gap: 8px; margin-top: 20px; } .social a { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .social a:hover { background: rgba(255,255,255,.08); } .social svg { width: 18px; height: 18px; } .footer-certs { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 48px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: .84rem; } .footer-certs a { color: #C3CDE0; min-height: 24px; display: inline-flex; align-items: center; } .footer-certs span { color: #4F5F80; } .footer-partner { font-size: .82rem; color: #7D8BA6; margin-top: 16px; max-width: 90ch; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 32px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .84rem; } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 4px 18px; } .footer-bottom button { background: none; border: 0; color: #E2E8F3; font: inherit; cursor: pointer; padding: 0; min-height: 24px; } .footer-bottom button:hover { text-decoration: underline; } .footer-bottom .staff-link { color: #9AA8C4; } .studio-cities { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: .92rem; } .sales-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: none; gap: 8px; transform: translateY(110%); transition: transform .25s; } .sales-bar.is-visible { transform: none; } .sales-bar .btn { flex: 1; min-height: 48px; padding-left: 8px; padding-right: 8px; font-size: .92rem; white-space: nowrap; } @media (max-width: 767px) { .sales-bar { display: flex; } } @media (max-width: 767px) and (orientation: landscape) and (max-height: 500px) { .sales-bar { display: none; } } @media (max-width: 374px) { .sales-bar .btn { font-size: .82rem; } .sales-bar .btn svg { display: none; } } body.no-salesbar .sales-bar { display: none !important; } .cookie-bar { position: fixed; left: 16px; bottom: 16px; z-index: 300; width: min(440px, calc(100vw - 32px)); background: #fff; box-shadow: var(--shadow-lg); border-radius: var(--r-lg); padding: 22px 24px; display: none; } .cookie-bar.is-visible { display: block; } .cookie-bar h2 { font-size: 1.1rem; font-weight: 500; letter-spacing: -.01em; margin-bottom: 6px; } .cookie-bar p { font-size: .9rem; color: var(--ink-2); margin-bottom: 14px; } .cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; } .cookie-actions .btn { flex: 1 1 auto; } @media (max-width: 520px) { .cookie-bar { left: 10px; bottom: 10px; width: calc(100vw - 20px); padding: 16px; } .cookie-bar p { font-size: .86rem; margin-bottom: 10px; } .cookie-actions .btn { min-height: 40px; padding: .4em .6em; } } .modal { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: 16px; } .modal.is-open { display: flex; } .modal-backdrop { position: absolute; inset: 0; background: rgba(10,22,48,.5); } .modal-dialog { position: relative; background: #fff; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 32px; box-shadow: var(--shadow-lg); border-radius: var(--r-lg); } .modal-dialog.wide { width: min(900px, 100%); } .modal-close { position: absolute; top: 14px; right: 14px; } .modal-dialog h2 { font-size: 1.6rem; padding-right: 44px; } .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(160%); background: var(--ink); color: #fff; padding: 12px 18px; z-index: 500; font-weight: 500; font-size: .94rem; box-shadow: var(--shadow-lg); transition: transform .25s; max-width: calc(100vw - 32px); border-radius: var(--r); } .toast.is-visible { transform: translateX(-50%) translateY(0); } .video-ph { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--night); color: #fff; display: flex; align-items: center; justify-content: center; border: 0; width: 100%; cursor: pointer; font: inherit; border-radius: var(--r); } .video-ph .play { width: 76px; height: 76px; border-radius: 50%; border: 1px solid #fff; color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .2s; } .video-ph:hover .play { background: rgba(255,255,255,.12); } .video-ph .play svg { width: 24px; height: 24px; margin-left: 4px; } .video-ph .cap { position: absolute; left: 24px; bottom: 20px; font-size: .88rem; color: #C4CDDC; } /* ---------- Štúdiá, mapa, čipy ---------- */ .studio-card { display: flex; flex-direction: column; gap: 6px; overflow: hidden; } .studio-card h3 { margin: 0; font-size: 1.35rem; font-weight: 400; letter-spacing: -.02em; } .studio-card dl { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: .92rem; } .studio-card dt { color: var(--muted); } .studio-card dd { margin: 0; } .studio-card .tag { align-self: flex-start; } .studio-card .studio-photo { margin: calc(-1 * clamp(22px, 2.4vw, 34px)) calc(-1 * clamp(22px, 2.4vw, 34px)) 18px; } .studio-card .studio-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .studio-photo-ph { aspect-ratio: 16 / 9; background: var(--night); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 22px; position: relative; overflow: hidden; } .studio-photo-ph::after { content: ""; position: absolute; right: 22px; top: 22px; width: 64px; height: 76px; border: 1px solid rgba(255,255,255,.22); background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(255,255,255,.22) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); } .studio-photo-ph .sp-city { font-size: 1.6rem; font-weight: 400; letter-spacing: -.025em; } .studio-photo-ph .sp-note { font-size: .78rem; opacity: .65; } dd { overflow-wrap: anywhere; } .todo { color: var(--warn); font-style: italic; } .region-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .map-ph { aspect-ratio: 16/9; background: var(--mist); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; text-align: center; padding: 20px; border-radius: var(--r-lg); } .map-ph iframe { width: 100%; height: 100%; border: 0; } .sk-map { background: var(--mist); padding: 20px; border-radius: var(--r-lg); } .sk-map svg { width: 100%; height: auto; } .sk-map polygon { fill: #fff; stroke: var(--line-2); stroke-width: 1.2; } .sk-map .pin { cursor: pointer; } .sk-map .pin circle { fill: var(--ink); stroke: #fff; stroke-width: 2.5; transition: fill .15s; } .sk-map .pin:hover circle, .sk-map .pin:focus circle { fill: var(--blue); } .sk-map .pin:focus { outline: none; } .sk-map .pin text { font-size: 11.5px; font-weight: 500; fill: var(--ink); font-family: var(--font); } .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: 99px; padding: 7px 14px; font-size: .9rem; font-weight: 500; color: var(--ink); text-decoration: none; background: #fff; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, color .15s; } a.chip:hover, button.chip:hover { border-color: var(--ink); color: var(--ink); } .chip[aria-pressed="true"], .chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); } .flash { animation: flash 1.2s ease; } @keyframes flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: inset 0 0 0 2px var(--blue); } } .seg { display: inline-flex; border: 1px solid var(--line-2); padding: 3px; gap: 3px; flex-wrap: wrap; border-radius: 99px; background: #fff; } .seg button { border: 0; background: transparent; padding: 8px 16px; font: inherit; font-weight: 500; font-size: .9rem; color: var(--muted); cursor: pointer; border-radius: 99px; } .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; } /* ---------- Kalkulačka úspory ---------- */ .calc { display: grid; gap: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--mist); } @media (min-width: 980px) { .calc { grid-template-columns: 1.1fr 1fr; align-items: stretch; } } .calc .calc-inputs { display: grid; gap: 28px; border-radius: 0; background: transparent; } .calc-field { display: grid; gap: 10px; } .calc-field .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .calc-field output, .calc-field .val { font-weight: 500; font-variant-numeric: tabular-nums; } .calc-field strong { font-weight: 500 !important; } .calc-num { display: flex; gap: 10px; align-items: center; } .calc-num input[type="number"], .calc-num input[type="text"] { max-width: 140px; } .calc-result { background: var(--ir); color: #C9CEF2; padding: clamp(26px, 3.6vw, 48px); position: relative; overflow: hidden; isolation: isolate; } .calc-result::before { content: ""; position: absolute; right: -20%; top: -25%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,170,60,.35), rgba(217,54,122,.12) 50%, transparent 70%); z-index: -1; } .calc-result h2 { color: #A9B0E6; font-size: 1rem; font-weight: 500; letter-spacing: 0; } .calc-result .big { font-size: clamp(3.4rem, 2.4rem + 3.4vw, 5.6rem); font-weight: 400; color: #fff; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; } .calc-result .sub { color: #A9B0E6; } .calc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 24px 0; border-top: 1px solid rgba(255,255,255,.18); } .calc-kpis div { padding: 14px 14px 14px 0; border-bottom: 1px solid rgba(255,255,255,.18); } .calc-kpis div + div { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); } .calc-kpis strong { display: block; color: #fff; font-size: 1.35rem; font-variant-numeric: tabular-nums; font-weight: 400; letter-spacing: -.02em; } .calc-kpis span { font-size: .82rem; color: #A9B0E6; } .bars { display: grid; gap: 10px; margin: 18px 0 24px; } .bar-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; font-size: .88rem; } .bar-track { height: 10px; background: rgba(255,255,255,.08); overflow: hidden; border-radius: 99px; } .bar-fill { height: 100%; background: linear-gradient(90deg, #E5391C, #FF8B1E, #FFCF3A); transition: width .3s; border-radius: 99px; } .bar-fill.after { background: linear-gradient(90deg, #2A6FC4, #29A9A6); } .calc-result .btn-primary { width: 100%; background: #fff; color: var(--ink); } .calc-result .btn-primary:hover { background: var(--blue-50); } .calc-note { font-size: .82rem; color: #8C93CC; margin-top: 16px; } .win-rows { display: grid; gap: 8px; } .win-row { display: grid; grid-template-columns: 1fr 1fr 80px 44px; gap: 8px; align-items: end; } .win-row label { font-size: .8rem; font-weight: 500; color: var(--muted); } @media (max-width: 420px) { .win-row { grid-template-columns: 1fr 1fr; } } /* ---------- Konfigurátor cenovej ponuky ---------- */ .cfg-hero { background: #fff; padding: 36px 0 30px; } .cfg-hero h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem); margin-bottom: 16px; max-width: 18ch; } .cfg-hero p { max-width: 62ch; margin: 0; color: var(--ink-2); font-size: 1.12rem; } .cfg-hero .chips { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: .92rem; color: var(--muted); } .cfg-hero .chips span { display: inline-flex; align-items: center; gap: 8px; } .cfg-hero .chips span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); } .stepper { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); } .stepper::-webkit-scrollbar { display: none; } .stepper li { flex: 1 0 auto; } .stepper button { width: 100%; display: flex; gap: 10px; align-items: center; background: none; border: 0; padding: 16px 12px 15px 0; font: inherit; font-size: .95rem; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .stepper button:disabled { cursor: default; } .stepper .n { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; flex: none; } .stepper [aria-current="step"] { color: var(--ink); border-color: var(--ink); } .stepper [aria-current="step"] .n { border-color: var(--ink); background: var(--ink); color: #fff; } .stepper .done { color: var(--ink); } .stepper .done .n { background: var(--mist-2); border-color: var(--mist-2); color: var(--ink); } @media (max-width: 700px) { .stepper .lbl { display: none; } .stepper [aria-current="step"] .lbl { display: inline; } .stepper button { padding-right: 6px; } } .cfg-wrap { display: grid; gap: 28px; padding: 32px 0 80px; align-items: start; } @media (min-width: 1100px) { .cfg-wrap { grid-template-columns: minmax(0, 1fr) 370px; gap: 40px; } .cfg-side { position: sticky; top: 88px; } } .cfg-panel { background: #fff; border: 1px solid var(--line); padding: clamp(22px, 3.2vw, 44px); border-radius: var(--r-lg); } .cfg-panel h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); display: flex; gap: 14px; align-items: center; } .cfg-panel h2 svg { stroke-width: 1.4; } .cfg-panel .step-intro { color: var(--muted); margin-top: -4px; max-width: 62ch; } .cfg-block { margin-top: 32px; } .cfg-block > .label, .cfg-block > legend { font-weight: 600; font-size: 1rem; margin-bottom: 12px; display: block; padding: 0; } fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .cfg-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; } .cfg-nav .btn { min-width: 150px; } .cfg-nav-r { margin-left: auto; display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; justify-content: flex-end; } .link-btn { background: none; border: 0; padding: 10px 2px; min-height: 44px; font: inherit; font-size: .9rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; cursor: pointer; } .link-btn:hover { color: var(--blue); text-decoration-color: currentColor; } @media (max-width: 480px) { .cfg-nav-r { flex: 1 1 100%; flex-direction: column-reverse; align-items: stretch; } .cfg-nav-r .btn { width: 100%; } } @media (max-width: 480px) { .cfg-nav .btn { flex: 1; min-width: 0; } } .cfg-side .summary { background: #fff; border: 1px solid var(--line); overflow: hidden; border-radius: var(--r-lg); } .summary-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); } .summary-head h2 { font-size: 1.1rem; font-weight: 500; letter-spacing: -.01em; margin: 0; } .summary dl { margin: 0; padding: 14px 20px 16px; display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; font-size: .92rem; } .summary dt { color: var(--muted); } .summary dd { margin: 0; text-align: right; font-weight: 500; } .estimate { margin: 0; background: var(--night); color: #B9C4D8; padding: 22px 20px; position: relative; } .estimate .lbl { font-size: .86rem; font-weight: 500; } .estimate .range { color: #fff; font-size: 1.9rem; font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 6px 0; line-height: 1.15; } .estimate .range.empty { color: #7D8BA6; font-size: 1.05rem; letter-spacing: 0; } .estimate p { font-size: .8rem; margin: 0; } .side-note { margin: 0; padding: 14px 20px; background: var(--mist); color: var(--ink-2); font-size: .85rem; border-bottom: 1px solid var(--line); } .side-note strong { display: block; color: var(--ink); font-weight: 600; } .side-contact { margin: 0; padding: 16px 20px; font-size: .92rem; } .items-table { width: 100%; border-top: 1px solid var(--ink); } .item-row { display: grid; grid-template-columns: 1.35fr 1.25fr .75fr .75fr .5fr 44px; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: end; } .item-row.head { font-size: .82rem; font-weight: 500; color: var(--muted); align-items: center; padding: 10px 0; } .item-row input, .item-row select { min-height: 44px; padding: 8px 10px; } .item-row select { padding-right: 30px; background-position: right 8px center; } .item-row .mlabel { display: none; font-size: .78rem; font-weight: 500; color: var(--muted); margin-bottom: 3px; } .item-row .area { font-size: .78rem; color: var(--muted); margin-top: 4px; } @media (max-width: 760px) { .item-row.head { display: none; } .item-row { grid-template-columns: 1fr 1fr; padding: 16px 0; position: relative; } .item-row > div:first-child { grid-column: 1 / -1; padding-right: 52px; } .item-row .mlabel { display: block; } .item-row .del { position: absolute; top: 14px; right: 0; } } .items-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; } .items-total { margin-left: auto; font-size: .92rem; color: var(--muted); } .items-total strong { color: var(--ink); } .dropzone { border: 1px dashed var(--line-2); padding: 28px; text-align: center; background: var(--mist); transition: border-color .15s, background .15s; cursor: pointer; border-radius: var(--r-lg); } .dropzone.is-over, .dropzone:hover { border-color: var(--blue); background: var(--blue-50); } .dropzone svg { width: 28px; height: 28px; color: var(--ink); margin: 0 auto 10px; stroke-width: 1.4; } .file-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; } .file-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); font-size: .9rem; background: #fff; border-radius: var(--r); } .file-list li .sz { color: var(--muted); margin-left: auto; font-size: .82rem; } .file-list li img { width: 36px; height: 36px; object-fit: cover; border-radius: 2px; } .svc-group { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (max-width: 640px) { .svc-group { grid-template-columns: 1fr; } } .svc { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line-2); cursor: pointer; background: #fff; border-radius: var(--r-lg); } .svc:hover { border-color: var(--ink-2); } .svc input { width: 20px; height: 20px; accent-color: var(--ink); margin-top: 2px; flex: none; } .svc strong { display: block; font-size: .98rem; font-weight: 500; } .svc small { color: var(--muted); font-size: .84rem; display: block; } .svc .price { margin-left: auto; font-size: .84rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .svc.is-included { background: var(--mist); border-color: var(--mist); cursor: default; } .svc.is-included .price { color: var(--ok); } .svc:has(input:checked):not(.is-included) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .success-panel { text-align: center; padding: clamp(28px, 4vw, 56px) clamp(8px, 3vw, 32px); } .success-ico { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--ok); color: var(--ok); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .success-ico svg { width: 32px; height: 32px; } .success-panel h2 { justify-content: center; } .success-range { font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.8rem); font-weight: 400; color: var(--ink); letter-spacing: -.04em; margin: 8px 0; font-variant-numeric: tabular-nums; } .next-steps { text-align: left; max-width: 620px; margin: 32px auto 0; display: grid; gap: 0; padding: 0; border-top: 1px solid var(--ink); } .next-steps li { list-style: none; display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); } .next-steps li b { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: .86rem; font-weight: 500; } .review-list { display: grid; gap: 0; font-size: .95rem; border-top: 1px solid var(--ink); } .review-list > div { display: grid; grid-template-columns: 170px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start; } .review-list .k { color: var(--muted); font-weight: 500; } @media (max-width: 600px) { .review-list > div { grid-template-columns: 1fr auto; } .review-list .k { grid-column: 1 / -1; } } .edit-link { background: none; border: 0; color: var(--blue); font: inherit; font-weight: 500; cursor: pointer; font-size: .9rem; padding: 0; text-decoration: underline; text-underline-offset: 3px; } .prefill-banner { display: flex; gap: 12px; align-items: flex-start; background: var(--ok-50); border-left: 2px solid var(--ok); color: #0B5A33; padding: 13px 16px; margin-bottom: 24px; font-size: .94rem; border-radius: 0 var(--r) var(--r) 0; } .survey-slot { margin-top: 14px; padding: 18px 20px; background: var(--mist); border-radius: var(--r-lg); } .seg-wide { display: flex; width: 100%; border-radius: var(--r-lg); } .seg-wide label { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; padding: 8px 10px; font-weight: 500; font-size: .92rem; cursor: pointer; border-radius: 6px; color: var(--muted); text-align: center; min-height: 44px; justify-content: center; } .seg-wide label small { font-weight: 400; font-size: .76rem; } .seg-wide input { position: absolute; opacity: 0; pointer-events: none; } .seg-wide label:has(input:checked) { background: var(--ink); color: #fff; } .seg-wide label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; } .mail-previews { max-width: 640px; margin: 24px auto 0; text-align: left; display: grid; gap: 10px; } .mail-prev { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow: hidden; } .mail-prev summary { cursor: pointer; padding: 13px 16px; font-weight: 500; display: flex; gap: 10px; align-items: center; justify-content: space-between; } .mail-prev[open] summary { border-bottom: 1px solid var(--line); } .mail { padding: 0; font-size: .92rem; } .mail .m-head { background: var(--night); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; color: #fff; } .mail .m-head img { height: 30px; width: auto; } .mail .m-meta { padding: 10px 20px; background: var(--mist); font-size: .82rem; color: var(--muted); } .mail .m-body { padding: 18px 20px; } .mail .m-body h4 { margin: 14px 0 6px; font-size: .95rem; } .mail .m-body table { width: 100%; border-collapse: collapse; font-size: .86rem; } .mail .m-body th, .mail .m-body td { text-align: left; padding: 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .mail .m-body th { width: 38%; color: var(--muted); font-weight: 400; background: none; } .mail .m-cta { display: inline-block; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); text-decoration: none; font-weight: 500; margin-top: 12px; } .mail .m-foot { padding: 12px 20px; font-size: .76rem; color: var(--muted); border-top: 1px solid var(--line); } .file-ref { font-weight: 500; } /* Cenová ponuka – výhody a kontakty */ .quote-why { border-top: 1px solid var(--line); } .quote-why-grid { display: grid; gap: clamp(28px, 5vw, 88px); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } @media (max-width: 900px) { .quote-why-grid { grid-template-columns: 1fr; } } .quote-why-grid figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); } .ticks li { position: relative; padding: 14px 0 14px 34px; color: var(--ink-2); border-bottom: 1px solid var(--line); } .ticks li::before { content: ""; position: absolute; left: 0; top: 17px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat; } .ticks li strong { color: var(--ink); font-weight: 500; } .big-link { font-size: 1.35rem; font-weight: 400; letter-spacing: -.02em; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; } .big-link:hover { color: var(--blue); } .company-id { border-top: 1px solid var(--line); padding-top: 18px; } .ref-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--mist); transition: opacity .2s; } .ref-card .body { padding: 16px 0 0; } .ref-card h3 { font-size: 1.1rem; margin-bottom: 4px; } .post-card { display: flex; flex-direction: column; gap: 10px; } .post-card.has-photo { padding-top: 0; overflow: hidden; } .post-card .post-img { width: calc(100% + 2 * clamp(22px, 2.4vw, 34px)); max-width: none; margin: 0 calc(-1 * clamp(22px, 2.4vw, 34px)) 8px; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .post-card.has-photo .tag { align-self: flex-start; } .post-card h3 { font-size: 1.35rem; font-weight: 400; letter-spacing: -.02em; } .post-meta { font-size: .84rem; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; } .author-box { display: flex; gap: 14px; align-items: center; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-top: 36px; } .ov-table td:first-child { white-space: nowrap; } .cert-lead { align-items: center; } .cert-lead figure.photo img { width: 100%; max-height: 420px; object-fit: contain; background: var(--mist); } /* ---------- Fotky ---------- */ figure.photo { margin: 0; } figure.photo img, .photo-fill { width: 100%; height: 100%; object-fit: cover; background: var(--mist); } figure.photo figcaption { font-size: .84rem; color: var(--muted); margin-top: 10px; } .photo-pair { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } .photo-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; } .product-shot { background: var(--mist); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; padding: 28px; } .product-shot img { max-height: 440px; width: auto; object-fit: contain; } .has-photo > .photo-top { margin: calc(-1 * clamp(22px, 2.4vw, 34px)) calc(-1 * clamp(22px, 2.4vw, 34px)) 20px; } .has-photo > .photo-top img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .card.has-photo { overflow: hidden; } /* Postup s fotkami (krokovaný proces – číslovanie podľa poradia) */ .psteps { list-style: none; margin: 0; padding: 0; counter-reset: ps; display: grid; gap: clamp(20px, 2.4vw, 32px); grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 1023px) { .psteps { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .psteps { grid-template-columns: 1fr; } } .psteps-9 { grid-template-columns: repeat(3, minmax(0,1fr)); } @media (max-width: 1023px) { .psteps-9 { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .psteps-9 { grid-template-columns: 1fr; } } .pstep { position: relative; counter-increment: ps; } .pstep img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 18px; background: var(--mist); } .pstep::before { content: counter(ps); display: block; font-size: .9rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; font-variant-numeric: tabular-nums; order: 2; } .pstep { display: flex; flex-direction: column; } .pstep img { order: 1; } .pstep h3 { order: 3; font-size: 1.2rem; margin-bottom: 6px; } .pstep p { order: 4; color: var(--muted); font-size: .98rem; margin: 0; } .tape-figure { background: #fff; padding: clamp(20px, 3vw, 36px); border-radius: var(--r-lg); margin: 0; } .section:not(.section-soft) .tape-figure { background: var(--mist); } .tape-figure svg { width: 100%; height: auto; } .tape-figure svg text { font-family: var(--font); } .tape-figure figcaption { font-size: .82rem; color: var(--muted); margin-top: 12px; } /* ========================================================= Domovská stránka – editoriál ========================================================= */ .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } @media (max-width: 420px) { .hero-ctas .btn { flex: 1 1 100%; } } /* Úvod: veľká fotka okna, veľký nadpis, termovízne porovnanie v sklenenej karte */ .hero-ed { position: relative; color: #fff; margin-top: calc(-1 * var(--header-h)); min-height: min(100svh, 1000px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; background: var(--night); } .hero-ed > .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; z-index: -2; } .hero-ed::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,14,30,.86) 0%, rgba(8,14,30,.55) 42%, rgba(8,14,30,.12) 78%), linear-gradient(0deg, rgba(8,14,30,.78) 0%, rgba(8,14,30,0) 46%), linear-gradient(180deg, rgba(8,14,30,.55) 0%, rgba(8,14,30,0) 22%); } .hero-ed-inner { display: grid; gap: 40px; align-items: end; padding-top: calc(var(--header-h) + 72px); } @media (min-width: 1100px) { .hero-ed-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; } } .hero-badge { display: inline-flex; align-items: center; gap: 12px; font-size: .92rem; font-weight: 500; color: rgba(255,255,255,.82); margin: 0 0 22px; } .hero-badge::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2A6FC4, #29A9A6 35%, #FFCF3A 65%, #E5391C); } .hero-ed h1 { color: #fff; font-size: clamp(3.4rem, 1.7rem + 6vw, 8.2rem); line-height: .9; letter-spacing: -.025em; margin: 0; max-width: 10ch; } .hero-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; color: rgba(255,255,255,.84); max-width: 46ch; margin: 26px 0 0; } .hero-card { background: rgba(23,28,92,.5); border: 1px solid rgba(255,255,255,.18); border-radius: 26px; padding: 20px 22px 0; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); overflow: hidden; } .hero-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 48px 0 0; border-top: 1px solid rgba(255,255,255,.22); } .hero-facts > div { padding: 22px 20px 34px 0; } .hero-facts strong { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); line-height: 1; letter-spacing: -.01em; color: #fff; } .hero-facts span { display: block; margin-top: 8px; font-size: .88rem; color: rgba(255,255,255,.72); } @media (max-width: 760px) { .hero-facts { grid-template-columns: repeat(2, minmax(0,1fr)); } .hero-facts > div { padding: 18px 12px 18px 0; } } .thermo { position: relative; margin: 0; display: flex; flex-direction: column; } .thermo-stage { position: relative; aspect-ratio: 640 / 420; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y pinch-zoom; order: 2; } .thermo-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; } .thermo-old { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); } .thermo-handle { position: absolute; top: 6%; bottom: 0; left: var(--pos, 50%); width: 1px; margin-left: -.5px; background: rgba(255,255,255,.9); pointer-events: none; z-index: 2; } .thermo-handle::after { content: ""; position: absolute; top: 48%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1726' stroke-width='1.6'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat; box-shadow: 0 10px 30px rgba(5,8,40,.55); } .thermo-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 4; touch-action: pan-y pinch-zoom; } .thermo-range:focus-visible ~ .thermo-handle::after { outline: 2px solid #fff; outline-offset: 4px; } .thermo-tag { position: absolute; top: 0; z-index: 2; font-size: .8rem; color: rgba(255,255,255,.72); pointer-events: none; line-height: 1.35; } .thermo-tag strong { display: block; font-size: .95rem; color: #fff; font-weight: 600; } .thermo-tag.l { left: 0; } .thermo-tag.r { right: 0; text-align: right; } .thermo-meta { order: 1; display: flex; gap: 8px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; font-size: .76rem; color: rgba(255,255,255,.66); } .thermo-scale { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .thermo-scale i { width: 64px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, #2a2d84, #2a6fc4, #29a9a6, #ffcf3a, #ff8b1e, #e5391c); } .thermo figcaption { margin: 0; max-width: 40ch; } @media (max-width: 1099px) { .hero-card { max-width: 640px; } } @media (max-width: 640px) { .thermo-tag { font-size: .72rem; } .thermo-tag strong { font-size: .84rem; } .thermo-handle::after { width: 40px; height: 40px; margin: -20px 0 0 -20px; } .hero-card { padding: 16px 16px 0; border-radius: 20px; } } .why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); margin-top: clamp(56px, 7vw, 104px); } @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: 48px; } } /* Pás so skutočnými ľuďmi */ .people-band { position: relative; min-height: clamp(520px, 52vw, 760px); display: flex; align-items: flex-end; overflow: hidden; background: var(--night); } .people-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .people-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,14,30,.86) 0%, rgba(8,14,30,.5) 42%, rgba(8,14,30,0) 72%), linear-gradient(0deg, rgba(8,14,30,.55), transparent 45%); } .people-copy { position: relative; z-index: 1; color: rgba(255,255,255,.82); padding-top: 96px; padding-bottom: clamp(56px, 7vw, 112px); } .people-copy > * { max-width: 34rem; } .people-quote { font-family: var(--display); font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5rem); font-weight: 600; line-height: .98; letter-spacing: -.045em; color: #fff; margin-bottom: 24px; } @media (max-width: 700px) { .people-band::after { background: linear-gradient(0deg, rgba(8,14,30,.95) 0%, rgba(8,14,30,.7) 50%, rgba(8,14,30,.1) 85%); } .people-band { min-height: 600px; } } /* Úspora – tmavý pás s veľkým číslom */ .savings { background: var(--night); color: #B9C4D8; } .savings h2 { color: #fff; max-width: 14ch; } .savings-copy .big { font-family: var(--display); font-size: clamp(5rem, 2.6rem + 8vw, 10.5rem); font-weight: 600; color: #fff; letter-spacing: -.055em; line-height: .86; margin: 20px 0 36px; white-space: nowrap; } .savings-copy .big small { font-family: var(--font); font-size: .13em; letter-spacing: 0; color: #9AA8C4; margin-left: .6em; font-weight: 500; } .u-bar.old i::before { background: linear-gradient(90deg, #ffcf3a, #ff8b1e 55%, #e5391c); } .u-bar.new i::before { background: linear-gradient(90deg, #2a6fc4, #29a9a6); } .tech-list { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; } .tech-list li { display: grid; gap: 2px; font-size: .92rem; color: var(--muted); padding-left: 18px; position: relative; } .tech-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); } .tech-list strong { color: var(--ink); font-weight: 600; } @media (max-width: 700px) { .tech-list { grid-template-columns: 1fr; } } .home-steps .pstep img { aspect-ratio: 4 / 5; margin-bottom: 22px; } .psteps.home-steps .pstep::before { position: absolute; top: 14px; left: 14px; z-index: 1; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: 0; margin: 0; box-shadow: 0 6px 18px -8px rgba(8,14,30,.5); } .home-steps .pstep h3 { font-family: var(--display); font-size: 1.35rem; letter-spacing: -.025em; } /* Recenzie – tmavý pás, jeden veľký citát */ .reviews-sec .lead { color: #9AA8C4; } .quotes-ed .review blockquote { font-family: var(--display); color: #fff; font-weight: 500; letter-spacing: -.02em; } .quotes-ed .review blockquote::before { content: "„"; } .quotes-ed .review blockquote::after { content: "“"; } .quotes-side .review { border-top: 1px solid rgba(255,255,255,.16); padding-top: 28px; } .quotes-side .review blockquote { font-size: 1.3rem; line-height: 1.35; } .reviews-sec .review footer strong { color: #fff; } .rv-meta { color: #9AA8C4; } .reviews-sec .avatar { background: rgba(255,255,255,.1); color: #fff; } .section-dark .link-arrow { color: #fff; text-decoration-color: rgba(255,255,255,.35); } .section-dark .link-arrow:hover { color: #fff; text-decoration-color: #fff; } /* Časté otázky + štúdiá */ .studio-panel { background: var(--mist); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); } .studio-panel h3 { font-family: var(--display); font-weight: 600; font-size: 2rem; letter-spacing: -.035em; line-height: 1.05; } .studio-panel .sk-map { background: #fff; margin: 22px 0 18px; padding: 14px; } .studio-panel .chips { display: flex; flex-wrap: wrap; gap: 6px; } .studio-panel .chip { background: #fff; } .sk-map .pin.static { cursor: default; } /* Rady Energeto® – rezy profilmi */ .profiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 1.6vw, 20px); } @media (max-width: 1023px) { .profiles { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { .profiles { grid-template-columns: 1fr; } } .profile { position: relative; padding: 30px 28px 28px; display: flex; flex-direction: column; gap: 12px; background: #fff; border-radius: var(--r-lg); transition: box-shadow .3s, transform .3s; } .section:not(.section-soft) .profile { background: var(--mist); } .profile:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .profile svg.cut { height: 150px; width: auto; max-width: 100%; align-self: flex-start; margin-bottom: 8px; } .profile h3 { font-family: var(--display); font-weight: 600; font-size: 1.85rem; letter-spacing: -.01em; line-height: 1.05; margin: 6px 0 0; } .profile p { color: var(--muted); font-size: .94rem; margin: 0; } .profile dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 6px 0 0; font-size: .9rem; font-variant-numeric: tabular-nums; } .profile dt { color: var(--muted); } .profile dd { margin: 0; font-weight: 600; } .uw-bar { height: 3px; background: var(--line); position: relative; border-radius: 99px; margin-top: 4px; } .uw-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); border-radius: 99px; } /* ========================================================= Interné CRM (demo) – rovnaká vizuálna reč, hustejšie ========================================================= */ body.app { background: #F3F5F7; } .app-bar { background: var(--night); color: #B9C4D8; position: sticky; top: 0; z-index: 50; } .app-bar .container { display: flex; align-items: center; gap: 18px; min-height: 62px; flex-wrap: wrap; } .app-bar .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; text-decoration: none; } .app-bar .brand img { height: 30px; width: auto; } .app-bar .brand span { font-size: .72rem; background: rgba(255,255,255,.12); padding: 2px 8px; border-radius: 99px; font-weight: 500; color: #C9D2E4; } .app-nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; } .app-nav a { color: #B9C4D8; text-decoration: none; padding: 8px 12px; border-radius: 6px; font-weight: 500; font-size: .92rem; } .app-nav a:hover { background: rgba(255,255,255,.08); color: #fff; } .app-nav a[aria-current="page"] { background: #fff; color: var(--ink); } .app-user { font-size: .82rem; display: flex; gap: 10px; align-items: center; } .app-user a { color: #fff; } .app-user select { min-height: 36px; padding: 4px 32px 4px 12px; font-size: .86rem; background-color: var(--night-2); color: #fff; border-color: #2B3B66; width: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .app-banner { background: #FFF6E2; color: #6E4A00; font-size: .82rem; border-bottom: 1px solid #F1DFAE; } .app-banner .container { padding-top: 8px; padding-bottom: 8px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; } .app-main { padding: 26px 0 64px; } .app-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .app-title h1 { font-size: 2rem; margin: 0; letter-spacing: -.035em; } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); margin-bottom: 20px; overflow-x: auto; } .tabs button { background: none; border: 0; padding: 11px 14px; font: inherit; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--ink); } .toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .toolbar select, .toolbar input { min-height: 42px; padding: 8px 12px; width: auto; font-size: .92rem; } .toolbar select { padding-right: 36px; } .toolbar input[type="search"] { min-width: 220px; flex: 1; max-width: 340px; } .kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 16px; } .kpi { background: #fff; border-radius: var(--r-lg); padding: 16px 18px; position: relative; } .kpi .k { font-size: .86rem; color: var(--muted); font-weight: 500; } .kpi .v { font-size: 1.85rem; font-weight: 400; letter-spacing: -.035em; margin-top: 4px; font-variant-numeric: tabular-nums; } .kpi .d { font-size: .78rem; font-weight: 500; } .kpi .d.up { color: var(--ok); } .kpi .d.down { color: var(--err); } .kpi .d.flat { color: var(--muted); } .kpi .ico { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--mist); color: var(--ink); } .kpi .ico svg { width: 16px; height: 16px; } .charts { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); } .chart-card { background: #fff; border-radius: var(--r-lg); padding: 18px; grid-column: span 6; min-width: 0; } .chart-card.w4 { grid-column: span 4; } .chart-card.w8 { grid-column: span 8; } .chart-card.w12 { grid-column: span 12; } @media (max-width: 1100px) { .chart-card, .chart-card.w4, .chart-card.w8 { grid-column: span 12; } } .chart-card h2 { font-size: 1rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); margin-bottom: 14px; } .chart-card svg { width: 100%; height: auto; overflow: visible; } .chart-card svg text { font-family: var(--font); } .donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .donut-wrap svg { width: 170px; flex: none; } .legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .86rem; flex: 1; min-width: 160px; } .legend li { display: flex; align-items: center; gap: 8px; } .legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; } .legend .n { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; } .hbars { display: grid; gap: 8px; } .hbar { display: grid; grid-template-columns: 140px 1fr 44px; gap: 10px; align-items: center; font-size: .86rem; } .hbar .t { height: 12px; background: var(--mist); border-radius: 99px; overflow: hidden; } .hbar .f { height: 100%; background: var(--ink); border-radius: 99px; } .hbar .n { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; } .funnel { display: grid; gap: 6px; } .funnel .row { display: grid; grid-template-columns: 170px 1fr 70px; gap: 10px; align-items: center; font-size: .86rem; } .funnel .bar { height: 26px; border-radius: 4px; display: flex; align-items: center; padding-left: 10px; color: #fff; font-weight: 500; font-size: .8rem; min-width: 34px; } @media (max-width: 560px) { .hbar { grid-template-columns: 100px 1fr 36px; } .funnel .row { grid-template-columns: 110px 1fr 50px; } } .alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; } .alert-list li { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 6px; background: var(--err-50); } .alert-list li button { margin-left: auto; } .data-table { background: #fff; border-radius: var(--r-lg); overflow-x: auto; } .data-table table { font-size: .87rem; min-width: 1050px; } .data-table thead th { position: sticky; top: 0; background: #F6F8FA; cursor: pointer; user-select: none; white-space: nowrap; } .data-table tbody tr { cursor: pointer; } .data-table tbody tr:hover { background: var(--blue-50); } .data-table td { vertical-align: middle; } .data-table .sub { color: var(--muted); font-size: .78rem; display: block; } .stage-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: .76rem; font-weight: 500; color: #fff; white-space: nowrap; } .hot { display: inline-block; background: #FDE4E2; color: #A8160C; font-size: .7rem; font-weight: 600; padding: 2px 7px; border-radius: 99px; letter-spacing: .02em; } .overdue { color: var(--err); font-weight: 500; } .kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; } .kcol { background: #E9EDF1; border-radius: var(--r-lg); padding: 10px; min-height: 300px; display: flex; flex-direction: column; gap: 8px; } .kcol.over { background: var(--blue-100); } .kcol h3 { font-size: .88rem; display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 6px; } .kcol h3 small { color: var(--muted); font-weight: 500; } .kcard { background: #fff; border-radius: 6px; padding: 10px 12px; box-shadow: var(--shadow-sm); cursor: grab; border-left: 3px solid var(--ink); font-size: .86rem; } .kcard:active { cursor: grabbing; } .kcard strong { display: block; font-weight: 500; } .kcard .meta { color: var(--muted); font-size: .76rem; display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; } .side-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); background: #fff; z-index: 300; box-shadow: var(--shadow-lg); transform: translateX(105%); transition: transform .3s; display: flex; flex-direction: column; } .side-drawer.is-open { transform: none; } .sd-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; } .sd-head h2 { font-size: 1.6rem; margin: 0; letter-spacing: -.03em; } .sd-body { overflow-y: auto; padding: 18px 22px 40px; flex: 1; } .sd-sec { margin-top: 22px; } .sd-sec h3 { font-size: .9rem; color: var(--muted); font-weight: 500; letter-spacing: 0; margin-bottom: 10px; } .kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: .92rem; margin: 0; } .kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; } .timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .88rem; } .timeline li { padding-left: 16px; border-left: 1px solid var(--line-2); } .timeline .when { color: var(--muted); font-size: .76rem; } .mini-table { width: 100%; font-size: .85rem; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .mini-table th, .mini-table td { padding: 8px 10px; } .sd-actions { display: flex; flex-wrap: wrap; gap: 8px; } .sd-backdrop { position: fixed; inset: 0; background: rgba(10,22,48,.35); z-index: 299; display: none; } .sd-backdrop.is-open { display: block; } .panel { background: #fff; border-radius: var(--r-lg); padding: clamp(18px, 2.6vw, 28px); } .search-results { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; } .search-results button { width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font: inherit; cursor: pointer; } .search-results button:hover { border-color: var(--ink); } .opening { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; background: #fff; position: relative; } .opening h3 { font-size: 1.02rem; display: flex; align-items: center; gap: 10px; } .opening .no { width: 28px; height: 28px; border-radius: 99px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; } .opening .rm { position: absolute; top: 12px; right: 12px; } .grid-auto { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); } .sig { border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: #fff; touch-action: none; width: 100%; height: 160px; display: block; cursor: crosshair; } .status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 99px; background: var(--ok); margin-right: 6px; } .status-dot.off { background: var(--err); } .fu-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; font-size: .88rem; } .tpl-prev { margin-top: 10px; background: var(--mist); border-radius: var(--r-lg); padding: 12px 14px; } .tpl-prev pre { white-space: pre-wrap; font: inherit; font-size: .86rem; margin: 0 0 10px; } .cal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .cal-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } @media (max-width: 900px) { .cal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 520px) { .cal-grid { grid-template-columns: 1fr 1fr; } } .cal-day { background: var(--mist); border-radius: 6px; padding: 8px; min-height: 120px; display: flex; flex-direction: column; gap: 6px; } .cal-day.is-today { box-shadow: inset 0 0 0 1px var(--ink); } .cal-dh { font-size: .8rem; font-weight: 500; color: var(--muted); } .cal-item { text-align: left; border: 0; background: #fff; border-left: 2px solid var(--ink); border-radius: 3px; padding: 6px 8px; font: inherit; font-size: .78rem; display: grid; gap: 1px; cursor: pointer; box-shadow: var(--shadow-sm); } .cal-item:hover { background: var(--blue-50); } .cal-item .t { font-weight: 500; color: var(--blue); font-size: .74rem; } .cal-item strong { font-weight: 500; } .cal-item .who { color: var(--muted); font-size: .72rem; } .cal-empty { font-size: .76rem; color: var(--muted); } .cal-req { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .cal-req li { display: flex; justify-content: space-between; gap: 10px; align-items: center; background: var(--mist); padding: 9px 12px; border-radius: 6px; font-size: .88rem; } .route-list { margin: 8px 0 0; padding-left: 20px; font-size: .9rem; display: grid; gap: 4px; } .route-list .start { list-style: none; margin-left: -20px; } .is-disabled { opacity: .5; pointer-events: none; } /* ---------- Prehľad draftu – audit ---------- */ .ck-kpis { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); } .ck-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .ck-kpis, .ck-kpis-4 { grid-template-columns: 1fr 1fr; } } .ck-kpi { background: var(--mist); border-radius: var(--r-lg); padding: 16px 18px; display: grid; gap: 4px; border-top: 2px solid #8C99A3; } .ck-kpi .v { font-size: 2.1rem; font-weight: 400; letter-spacing: -.04em; line-height: 1; } .ck-kpi .k { font-size: .84rem; color: var(--muted); } .st-y-b { border-top-color: #11804A; } .st-p-b { border-top-color: #C27C0E; } .st-n-b { border-top-color: #D4091F; } .st-x-b { border-top-color: #8C99A3; } .st { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; font-size: .78rem; font-weight: 500; padding: 2px 9px; border-radius: 99px; } .st-y { background: #E4F4EA; color: #0A5C33; } .st-p { background: #FFF2D6; color: #7A4A00; } .st-n { background: #FDE4E6; color: #9E0718; } .st-x { background: #EEF1F4; color: #46525B; } .st-ic { flex: none; vertical-align: -1px; } .ck-kpi .k .st-ic { margin-right: 2px; } .ck-bar { display: flex; height: 8px; width: 100%; min-width: 120px; border-radius: 99px; overflow: hidden; background: #EEF1F4; } .ck-bar span { display: block; height: 100%; padding: 0; border-radius: 0; } .ck-bar .st-y { background: #11804A; } .ck-bar .st-p { background: #E3A23B; } .ck-bar .st-n { background: #D4091F; } .ck-bar .st-x { background: #C3CBD2; } .ck-bar-cell { width: 28%; } .ck-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; } .ck-tools { position: sticky; top: 64px; z-index: 5; background: #fff; padding: 12px 0; flex-wrap: wrap; } .ck-tools input[type=search] { flex: 1 1 260px; } .ck-tools select { max-width: 100%; min-width: 0; } @media (max-width: 600px) { .ck-tools > * { flex: 1 1 100%; } } .ck-table td { vertical-align: top; } .ck-table .crit { display: block; font-size: .8rem; color: var(--muted); font-weight: 400; margin-top: 3px; } .ck-table tr[hidden] { display: none; } .ai-q { columns: 2; column-gap: 40px; font-size: .94rem; } @media (max-width: 700px) { .ai-q { columns: 1; } .ck-bar-cell { display: none; } } a.gloss { text-decoration: underline dotted; text-underline-offset: 3px; color: inherit; } a.gloss:hover { color: var(--blue); } /* ---------- Malé obrazovky ---------- */ @media (max-width: 480px) { :root { --header-h: 68px; } .header-inner { gap: 8px; } .header-actions { gap: 6px; } .header-actions .btn { padding: .5em .8em; font-size: .88rem; min-height: 42px; } .burger { width: 42px; height: 42px; } .logo img, .site-header.is-scrolled .logo img { height: 36px; } } @media (max-width: 359px) { .logo img, .site-header.is-scrolled .logo img { height: 30px; } .header-actions .btn { padding: .5em .6em; font-size: .8rem; } .burger { width: 40px; height: 40px; } } @media print { .site-header, .sales-bar, .cookie-bar, .site-footer, .cta-box, .breadcrumbs, .hero-ctas, .cfg-nav, .stepper, .promo-bar { display: none !important; } body { font-size: 11pt; } .faq details .answer { display: block; } a { color: inherit; text-decoration: none; } .hn { background: #fff; color: var(--ink); margin-top: 0; padding-top: 0; } } /* ========================================================= doladenie komponentov (veľké čísla, zaoblené fotky, mäkké karty) ========================================================= */ .tldr h2, .summary-head h2, .cookie-bar h2, .chart-card h2, .site-footer h2, .faq-group h2.sans { font-family: var(--font); } .tldr h2 { font-size: .95rem; font-weight: 600; letter-spacing: 0; } .cookie-bar h2 { font-size: 1.05rem; font-weight: 600; } .summary-head h2 { font-size: 1.05rem; font-weight: 600; } .chart-card h2 { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; } .site-footer h2 { font-size: .86rem; font-weight: 500; } .section-head h2 { max-width: 15ch; } .page-hero h1 { max-width: 14ch; } .faq-group h2 { font-size: 2.4rem; } .modal-dialog h2 { font-size: 2.2rem; } .cfg-panel h2 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); } .cfg-panel h2 svg { width: 24px; height: 24px; } .cfg-hero h1 { font-size: clamp(2.8rem, 1.8rem + 3.4vw, 5rem); } .app-title h1 { font-size: 2.6rem; letter-spacing: -.01em; } .sd-head h2 { font-size: 2.1rem; letter-spacing: -.01em; } .success-panel h2 { font-size: 2.6rem; } .faq summary { font-weight: 500; font-size: 1.08rem; } /* veľké čísla a citáty v písme nadpisov */ .facts strong, .spec dd, .calc-result .big, .success-range, .estimate .range, .footer-claim, .big-link, .ck-kpi .v, .studio-photo-ph .sp-city, .mega-teaser strong, .calc-kpis strong { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; } .spec dd { font-size: 2.2rem; line-height: 1; } .calc-result .big { font-size: clamp(4.4rem, 3rem + 4vw, 7rem); line-height: .9; } .calc-kpis strong { font-size: 1.8rem; line-height: 1.05; } .estimate .range { font-size: 2.4rem; line-height: 1.05; } .estimate .range.empty { font-family: var(--font); font-size: 1rem; } .success-range { font-size: clamp(3rem, 2rem + 3vw, 4.8rem); } .footer-claim { font-size: clamp(2.4rem, 1.6rem + 2vw, 3.6rem); line-height: .98; max-width: 11ch; } .big-link { font-size: 1.9rem; line-height: 1.1; } .ck-kpi .v { font-size: 2.8rem; } .mega-teaser strong { font-size: 1.9rem; line-height: 1.05; } .studio-photo-ph .sp-city { font-size: 2.2rem; } .studio-card h3, .post-card h3, .reason h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.005em; line-height: 1.05; } .studio-card h3 { font-size: 2rem; } .post-card h3 { font-size: 1.9rem; } .review blockquote { font-family: var(--display); font-size: 1.6rem; line-height: 1.2; letter-spacing: 0; } .people-quote, .intro-text { font-family: var(--display); } .related a { font-weight: 600; font-size: 1.02rem; } .step::before { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--ink); border-bottom-color: var(--line-2); padding-bottom: 16px; } .pstep::before { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--ink); margin-bottom: 8px; } .next-steps li b { font-family: var(--display); font-weight: 600; font-size: 1.1rem; } .kpi .v { font-family: var(--display); font-weight: 600; font-size: 2.3rem; letter-spacing: 0; line-height: 1.05; } /* zaoblené fotky v obsahu */ .page-media img, figure.photo img, .pstep img, .ref-card img, .tape-strip img, .photo-pair img, .quote-why-grid figure img, .product-shot, .video-ph, .map-ph, .sk-map, .tape-figure, .cert-lead figure.photo img { border-radius: var(--r-img); } .ref-card { border-radius: var(--r-img); } .card { border-radius: var(--r-lg); } .calc { border-radius: 28px; } .cfg-panel, .cfg-side .summary { border-radius: var(--r-lg); } .cta-box { border-radius: 28px; padding: clamp(40px, 6vw, 96px); } .cta-box h2 { font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4.2rem); } .tldr { border-radius: var(--r-lg); } .studio-card .studio-photo { border-radius: 0; } .chip { font-weight: 500; } .tag { font-weight: 600; } .data-table, .chart-card, .kpi, .panel, .kcol { border-radius: 18px; } .mini-table { border-radius: 12px; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="time"], input[type="password"], select, textarea { border-radius: 12px; } .tile .tile-body, .svc, .dropzone, .survey-slot, .mail-prev, .file-list li { border-radius: 16px; } /* ® v nadpisoch: znak v plnej veľkosti → malý horný index */ :is(h1, h2, .serif, .intro-text, .reason-copy h3, .people-quote, .types-row strong, .profile h3, .mosaic-item figcaption, .review blockquote, .studio-panel h3, .studio-card h3, .post-card h3, .reason h3, .mega-teaser strong, .big-link) .reg { font-family: var(--font); font-size: .36em; font-weight: 500; vertical-align: 1.35em; line-height: 0; margin-left: .06em; letter-spacing: 0; } .studio-photo-ph { background: linear-gradient(160deg, var(--night-2), var(--night)); justify-content: flex-end; } .studio-photo-ph .sp-note { font-size: .8rem; opacity: .7; } .founder-quote { margin: 40px 0; padding: 0; font-family: var(--display); font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.7rem); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); max-width: 22ch; } .founder-quote footer { font-family: var(--font); letter-spacing: 0; margin-top: 16px; max-width: 46ch; } .milestones .step { border-top: 1px solid var(--line-2); padding-top: 20px; padding-right: 24px; } .milestones .step h3 { font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 2rem + 1.6vw, 3.6rem); line-height: 1; letter-spacing: -.01em; margin-bottom: 12px; } .photo-43 img { aspect-ratio: 4 / 3; object-fit: cover; } /* ========================================================= v6 – typografia Inter Tight (nadpisy, čísla) + Inter (text) ========================================================= */ :root { --section: clamp(80px, 9vw, 144px); } h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5rem); letter-spacing: -.045em; line-height: 1; } h2 { font-size: clamp(2rem, 1.35rem + 2.3vw, 3.5rem); letter-spacing: -.04em; line-height: 1.04; } .hero-ed h1 { font-size: clamp(3rem, 1.5rem + 5.2vw, 6.6rem); letter-spacing: -.05em; line-height: .95; max-width: 11ch; } .hero-facts strong { letter-spacing: -.04em; } .page-hero h1 { max-width: 15ch; } .cfg-hero h1 { font-size: clamp(2.4rem, 1.6rem + 2.8vw, 4.2rem); } .facts strong, .spec dd, .calc-result .big, .success-range, .estimate .range, .big-link, .ck-kpi .v, .mega-teaser strong, .calc-kpis strong, .kpi .v { letter-spacing: -.04em; } .spec dd { font-size: 1.9rem; } .big-link { font-size: 1.6rem; } .mega-teaser strong { font-size: 1.6rem; } .footer-claim { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); letter-spacing: -.045em; line-height: 1; } .studio-card h3, .post-card h3, .reason h3 { letter-spacing: -.03em; line-height: 1.1; } .studio-card h3 { font-size: 1.6rem; } .post-card h3 { font-size: 1.5rem; } .review blockquote { font-weight: 500; letter-spacing: -.02em; font-size: 1.35rem; line-height: 1.35; } .step::before, .pstep::before { letter-spacing: -.03em; } .founder-quote { font-weight: 500; letter-spacing: -.03em; font-size: clamp(1.6rem, 1.25rem + 1vw, 2.3rem); line-height: 1.15; } .milestones .step h3 { letter-spacing: -.045em; } .faq-group h2 { font-size: 2rem; } .modal-dialog h2 { font-size: 1.9rem; } .cfg-panel h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -.03em; } .app-title h1 { font-size: 2.1rem; letter-spacing: -.035em; } .sd-head h2 { font-size: 1.8rem; letter-spacing: -.03em; } .success-panel h2 { font-size: 2.2rem; } .prose h2 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.9rem); letter-spacing: -.03em; } .profile h3 { font-size: 1.5rem; letter-spacing: -.03em; } .cta-box { background: var(--night); color: #B9C4D8; } .cta-box::before { right: -12%; top: auto; bottom: -60%; width: 62%; background: radial-gradient(circle, rgba(255,160,60,.32) 0%, rgba(240,100,40,.14) 36%, transparent 68%); } .cta-box h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); letter-spacing: -.04em; } @media (max-width: 640px) { .home-steps .pstep img { aspect-ratio: 4 / 3; } } .kpi .v { font-size: 1.9rem; white-space: nowrap; } .ck-kpi .v { font-size: 2.4rem; } /* ========================================================= v7 – farebné pásy a interakcie na domovskej stránke ========================================================= */ :root { --glass-tint: #EAEFF5; --ink-2-bg: #121C2E; } .section-glass .chip { background: #fff; border-color: transparent; } .section-ink .lead { color: #A9B4C6; } .why-card .link-arrow { display: inline-flex; align-items: center; gap: 8px; } .why-card .link-arrow::before { content: ""; order: 2; width: 18px; height: 1.5px; background: currentColor; transition: width .3s; } .why-card:hover .link-arrow { color: var(--blue); } .why-card:hover .link-arrow::before { width: 30px; } /* úspora – rýchly výpočet */ .mini-calc { display: grid; gap: 22px; margin: 34px 0 6px; padding: 24px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); max-width: 560px; } .mc-area { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; } .mc-area label, .mc-old legend { color: #fff; font-weight: 600; font-size: .95rem; } .mc-area output { font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .mc-area input[type="range"] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; } .mc-area input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #fff 0 var(--fill, 27%), rgba(255,255,255,.16) var(--fill, 27%)); } .mc-area input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #fff 0 var(--fill, 27%), rgba(255,255,255,.16) var(--fill, 27%)); } .mc-area input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; margin-top: -10px; box-shadow: 0 0 0 6px rgba(255,255,255,.14); transition: box-shadow .2s; } .mc-area input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.14); } .mc-area input[type="range"]:hover::-webkit-slider-thumb, .mc-area input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(255,255,255,.2); } .mc-area input[type="range"]:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; } .mc-old { border: 0; margin: 0; padding: 0; min-width: 0; } .mc-old legend { padding: 0; margin-bottom: 12px; } .mini-calc .seg { border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.25); } .mini-calc .seg label { position: relative; cursor: pointer; } .mini-calc .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .mini-calc .seg span { display: block; text-align: center; padding: 10px 8px; border-radius: 10px; font-size: .86rem; font-weight: 600; color: #C3CCDB; line-height: 1.25; transition: background .2s, color .2s; } .mini-calc .seg label:hover span { color: #fff; } .mini-calc .seg input:checked + span { background: #fff; color: var(--ink); } .mini-calc .seg input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 480px) { .mini-calc .seg { grid-template-columns: 1fr; } .mini-calc { padding: 18px; } } .sx { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; } @media (min-width: 1080px) { .sx { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "tabs panel" "more panel"; grid-template-rows: auto 1fr; row-gap: 0; } } .sx-more .tech-list { margin-top: 32px; } @media (max-width: 1079px) { .sx-more .tech-list { margin-top: 0; } } @keyframes sxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* postup – karty s veľkou fotkou */ .proc { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; } @media (min-width: 980px) { .proc { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } } @keyframes prIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } } /* mapa štúdií – body ako odkazy, názov pri prejdení */ .studio-panel .sk-map .pin text { opacity: 0; font-size: 15px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; transition: opacity .2s; pointer-events: none; } .studio-panel .sk-map .pin .halo { fill: var(--blue); opacity: 0; stroke: none; transition: opacity .2s; } .studio-panel .sk-map .pin circle:not(.halo) { transition: fill .2s, r .2s; } .studio-panel .sk-map .pin:hover text, .studio-panel .sk-map .pin:focus text, .studio-panel .sk-map .pin.is-on text { opacity: 1; } .studio-panel .sk-map .pin:hover .halo, .studio-panel .sk-map .pin:focus .halo, .studio-panel .sk-map .pin.is-on .halo { opacity: .16; } .studio-panel .sk-map .pin:hover circle:not(.halo), .studio-panel .sk-map .pin:focus circle:not(.halo), .studio-panel .sk-map .pin.is-on circle:not(.halo) { fill: var(--blue); } .studio-panel .sk-map .pin:focus { outline: none; } .studio-panel .sk-map .pin:focus-visible .halo { opacity: .3; } .studio-panel .chip.is-on { border-color: var(--blue); color: var(--blue); } .section-glass .studio-panel { background: #fff; } .section-glass .studio-panel .sk-map { background: var(--glass-tint); } .section-glass .studio-panel .chip { background: var(--glass-tint); } /* záverečná výzva s fotkou */ .cta-box > .cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .cta-box::before { content: ""; position: absolute; inset: 0; right: 0; top: 0; bottom: 0; width: auto; aspect-ratio: auto; border-radius: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,14,30,.94) 0%, rgba(8,14,30,.82) 48%, rgba(8,14,30,.55) 100%); } @media (max-width: 899px) { .cta-box::before { background: linear-gradient(0deg, rgba(8,14,30,.95) 0%, rgba(8,14,30,.85) 60%, rgba(8,14,30,.6) 100%); } } .home .faq-studios-sec ~ .section-sm { background: var(--glass-tint); } /* podstránky: úvod vo farebnom páse, fotka presahuje do obsahu */ .page-hero { background: var(--glass-tint); } .page-hero:has(.page-media) { padding-bottom: 0; background: linear-gradient(180deg, var(--glass-tint) 0, var(--glass-tint) calc(100% - clamp(90px, 12vw, 200px)), #fff calc(100% - clamp(90px, 12vw, 200px))); } .breadcrumbs { position: relative; } body:not(.home):not(.app) .breadcrumbs { background: var(--glass-tint); box-shadow: 0 0 0 100vmax var(--glass-tint); clip-path: inset(0 -100vmax); } /* teplo namiesto peňazí: hlavné číslo v kWh */ .savings-copy .big { font-size: clamp(3.6rem, 1.8rem + 6.2vw, 8.2rem); margin-bottom: 18px; } .savings-copy .big small { font-size: .17em; } /* ========================================================= Opravy po kontrole voči DETAILED (október 2026) ========================================================= */ /* 17.12 – výrezy a zaoblené rohy telefónov */ .container { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } /* 5.19, 18.18 – kompaktná cookie lišta na mobile, nezakrýva tlačidlo v úvode */ .cookie-bar { bottom: calc(16px + env(safe-area-inset-bottom)); } @media (max-width: 520px) { .cookie-bar { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; padding: 12px 14px; border-radius: 16px; } .cookie-bar h2 { font-size: .95rem; margin-bottom: 2px; } .cookie-bar p { font-size: .8rem; line-height: 1.4; margin-bottom: 8px; } .cookie-actions { flex-wrap: nowrap; gap: 6px; } .cookie-actions .btn { min-height: 40px; padding: .35em .5em; font-size: .82rem; flex: 1 1 0; } } @media (max-width: 380px) { .cookie-bar p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } /* 17.09 – hlavné tlačidlá aspoň 44 px aj v hlavičke na mobile */ @media (max-width: 480px) { .header-actions .btn { min-height: 44px; } } /* 17.01 – zástupné fotky sa nezlomia do šírky */ .ph { max-width: 100%; min-width: 0; } .ph span { overflow-wrap: anywhere; white-space: normal; } /* 17.03 – mobilné menu na ležato: posúva sa celé */ @media (max-height: 520px) { .drawer { overflow-y: auto; } .drawer-body { flex: none; overflow: visible; } .drawer-foot { position: static; } } /* 24.13 – odkazy v pätičke aspoň 24 px na dotyk */ .site-footer a, .footer-bottom button { display: inline-block; min-height: 24px; padding-top: 2px; padding-bottom: 2px; } /* 18.02 – viditeľný fokus na bodoch mapy štúdií */ .sk-map .pin:focus-visible circle { fill: var(--blue); stroke: var(--ink); stroke-width: 4px; r: 10px; } .sk-map .pin:focus-visible text { font-weight: 700; } /* 18.15 – posúvateľné pásy sú dostupné klávesnicou */ .tape-strip:focus-visible, .types-row:focus-visible, .table-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; } /* 17.04 – dlhé nadpisy podstránok najviac na 3 riadky aj na tablete */ .page-hero h1.h1-long { font-size: clamp(2.2rem, 1.3rem + 2.7vw, 3.9rem); max-width: 22ch; } /* 17.11 – polia v internom CRM 16 px (iPhone nepribližuje) */ .app-bar select, .app-title select, .app-bar input, .app-title input, #role, #period { font-size: 16px; } /* interné CRM – drobnosti z kontroly */ div.cal-item { cursor: default; } .app-footer { border-top: 1px solid var(--line); padding-top: 16px; } /* recenzie: dva odkazy vedľa seba */ .rv-links { display: flex; flex-wrap: wrap; gap: 12px 28px; } .ck-kpi { min-width: 0; } .ck-kpi .k { overflow-wrap: anywhere; } @media (max-width: 480px) { .ck-kpi .v { font-size: 1.9rem; } .ck-kpi { padding: 14px; } } .hs-side .hero-lead { margin: 0; max-width: 44ch; } .hs-side .hero-ctas { margin-top: 28px; } .scan { margin: clamp(36px, 5vw, 76px) 0 0; } .scan .thermo-old { z-index: 1; } .scan .thermo-handle { top: 0; bottom: 0; z-index: 3; } .scan .thermo-handle::after { top: 50%; } .scan .thermo-tag { top: clamp(18px, 2.6vw, 34px); z-index: 3; font-size: .82rem; text-shadow: 0 1px 12px rgba(8,6,40,.6); } .scan .thermo-tag.l { left: var(--inset); } .scan .thermo-tag.r { right: var(--inset); } .scan .thermo-range { z-index: 5; } @media (max-width: 760px) { .scan .thermo-tag { font-size: .72rem; } .scan .thermo-tag strong { font-size: .86rem; } } /* Typy stavieb: zoznam s náhľadom fotky (na počítači vpravo, na mobile malá fotka v riadku) */ .tindex { display: grid; gap: 40px; align-items: start; } @media (min-width: 1024px) { .tindex { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(40px, 5vw, 80px); } } .tindex-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); } .tindex-list li { margin: 0; } .tindex-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; row-gap: 4px; padding: 22px 6px 22px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; transition: padding-left .35s cubic-bezier(.2,.7,.2,1), color .2s; } .tindex-list li.is-on a, .tindex-list a:hover, .tindex-list a:focus-visible { padding-left: 18px; } .tindex-list li.is-on .ti-go, .tindex-list a:hover .ti-go, .tindex-list a:focus-visible .ti-go { background: var(--ink); border-color: var(--ink); color: #fff; transform: rotate(-45deg); } .tindex-pv { position: sticky; top: 96px; aspect-ratio: 4 / 5; border-radius: var(--r-img); overflow: hidden; background: var(--mist); } .tindex-pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; } .tindex-pv img.is-on { opacity: 1; } @media (max-width: 1023px) { .tindex-pv { display: none; } .tindex-list a { grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 16px; padding: 16px 0; } .tindex-list li.is-on a, .tindex-list a:hover, .tindex-list a:focus-visible { padding-left: 0; } .tindex-list li.is-on .ti-go { background: none; border-color: var(--line-2); color: inherit; transform: none; } } /* Realizácie: karty s popisom pod fotkou, párne posunuté nižšie; na mobile posuvný pás */ .cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; } .cases li { margin: 0; } .cases li:nth-child(even) { margin-top: 64px; } .cases figure { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-img); overflow: hidden; background: var(--mist); } .cases img { width: 100%; height: 100%; object-fit: cover; display: block; } .cases h3 { font-size: 1.12rem; letter-spacing: -.02em; margin: 16px 0 4px; } .cases p { margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.45; } .cases:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; } @media (max-width: 900px) { .cases { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; } .cases li { scroll-snap-align: start; } .cases li:nth-child(even) { margin-top: 0; } } @media (min-width: 560px) and (max-width: 900px) { .cases { grid-auto-columns: 44%; } } /* ===================== v11 – modernejší vzhľad ===================== */ /* Úvod podstránok s fotkou: fotka cez celú šírku, biely text na stmavenej fotke, omrvinky v úvode (ako domovská stránka) */ .page-hero.has-media { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--night); margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + clamp(56px, 8vw, 140px)) 0 clamp(44px, 5vw, 76px); min-height: min(80vh, 780px); display: flex; align-items: flex-end; } .page-hero.has-media > .container { width: 100%; } .ph-bg { position: absolute; inset: 0; z-index: -2; } .ph-bg img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; aspect-ratio: auto !important; display: block; animation: ph-zoom 14s ease-out both; } @keyframes ph-zoom { from { transform: scale(1.06); } to { transform: scale(1); } } .page-hero.has-media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,14,30,.88) 0%, rgba(8,14,30,.62) 42%, rgba(8,14,30,.18) 78%), linear-gradient(0deg, rgba(8,14,30,.75) 0%, rgba(8,14,30,0) 58%); } .page-hero.has-media h1 { color: #fff; } .page-hero.has-media .lead { color: rgba(255,255,255,.86); } .page-hero.has-media .updated { color: rgba(255,255,255,.62); } .page-hero.has-media .btn-primary { background: #fff; color: var(--ink); border-color: #fff; } .page-hero.has-media .btn-primary:hover { background: var(--blue-50); } .page-hero.has-media .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); backdrop-filter: blur(8px); } .page-hero.has-media .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.14); color: #fff; } .page-hero .breadcrumbs { padding-top: 0; margin-bottom: 8px; background: none !important; box-shadow: none !important; clip-path: none !important; } .page-hero.has-media .breadcrumbs ol, .page-hero.has-media .breadcrumbs a { color: rgba(255,255,255,.72); } .page-hero.has-media .breadcrumbs li + li::before { color: rgba(255,255,255,.35); } .page-hero.has-media .breadcrumbs a:hover { color: #fff; } .page-hero:not(.has-media) { padding-top: 28px; } @media (min-width: 1080px) { .page-hero .ph-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr auto auto; column-gap: 72px; align-items: end; } .page-hero .container.ph-inner > .breadcrumbs { grid-column: 1 / -1; grid-row: 1; align-self: start; } .page-hero .container.ph-inner > h1 { grid-column: 1; grid-row: 2 / span 4; margin-bottom: 0; } .page-hero .container.ph-inner > :not(h1):not(.breadcrumbs) { grid-column: 2; } .page-hero.has-media .container.ph-inner > .breadcrumbs { margin-bottom: clamp(40px, 6vw, 110px); } } .page-hero.has-media h1 { font-size: clamp(2.6rem, 1.4rem + 4vw, 5.4rem); line-height: .96; letter-spacing: -.045em; max-width: 13ch; } .page-hero.has-media h1.h1-long { font-size: clamp(2.3rem, 1.3rem + 3vw, 4.4rem); max-width: 18ch; } @media (max-width: 700px) { .page-hero.has-media { min-height: 86svh; } } /* Referencie: vybraná realizácia, mozaika s náhľadmi, zväčšenie fotky */ .ref-stats { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 18px; } .ref-stats li { display: flex; flex-direction: column; gap: 2px; margin: 0; } .ref-stats strong { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); letter-spacing: -.035em; line-height: 1; color: #fff; } .ref-stats span { font-size: .84rem; color: rgba(255,255,255,.72); } .feat { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; } @media (min-width: 980px) { .feat { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } } .feat-img { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 4; background: var(--mist); } .feat-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; } .feat-k { font-size: .92rem; font-weight: 600; color: var(--blue); margin: 0 0 12px; } .feat-copy h2 { margin: 0 0 18px; } .feat-spec { margin: 28px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); } .feat-spec div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); } .feat-spec dt { color: var(--muted); font-size: .92rem; } .feat-spec dd { margin: 0; font-weight: 500; } .feat-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 30px 0 0; } .gal-head { display: grid; gap: 18px; margin-bottom: clamp(26px, 3vw, 40px); } @media (min-width: 1100px) { .gal-head { grid-template-columns: auto 1fr; align-items: end; column-gap: 48px; } .gal-head .gal-filters { justify-self: end; } .gal-count { grid-column: 1 / -1; } } .gal-head h2 { margin: 0; } .gal-filters { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .seg-bar { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 999px; } .seg-bar .chip { border: 0; background: transparent; margin: 0; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 500; } .seg-bar .chip[aria-pressed="true"] { background: var(--ink); color: #fff; } .gal-count { margin: 0; } .gal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 17vw, 250px); grid-auto-flow: dense; gap: clamp(10px, 1.2vw, 16px); } .g-tile { margin: 0; position: relative; } .g-tile.g-big { grid-column: span 2; grid-row: span 2; } .g-tile.g-wide { grid-column: span 2; } .g-open { all: unset; box-sizing: border-box; position: absolute; inset: 0; display: block; border-radius: 22px; overflow: hidden; cursor: zoom-in; background: var(--mist); isolation: isolate; } .g-open img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); } .g-open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,14,30,.85) 0%, rgba(8,14,30,.25) 42%, rgba(8,14,30,0) 64%); z-index: 0; transition: opacity .35s; } .g-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(14px, 1.6vw, 22px); color: #fff; display: flex; flex-direction: column; gap: 4px; } .g-cap strong { font-family: var(--display); font-weight: 600; font-size: clamp(1rem, .9rem + .4vw, 1.3rem); letter-spacing: -.02em; line-height: 1.15; } .g-big .g-cap strong { font-size: clamp(1.3rem, 1rem + 1vw, 2rem); } .g-cap > span:last-child { font-size: .84rem; color: rgba(255,255,255,.78); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s, opacity .35s; } .g-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .g-tag { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); } .g-tag-l { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(6px); } .g-open:hover img, .g-open:focus-visible img { transform: scale(1.05); } .g-open:hover .g-cap > span:last-child, .g-open:focus-visible .g-cap > span:last-child { max-height: 3em; opacity: 1; } .g-open:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } @media (max-width: 1100px) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 34vw, 280px); } } @media (max-width: 560px) { .gal { grid-template-columns: 1fr; grid-auto-rows: 260px; } .g-tile.g-big, .g-tile.g-wide { grid-column: auto; grid-row: auto; } .g-cap > span:last-child { max-height: 3em; opacity: 1; } } .lightbox { padding: 0; border: 0; border-radius: 26px; width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: #fff; color: var(--ink); box-shadow: 0 40px 120px -30px rgba(0,0,0,.6); } .lightbox::backdrop { background: rgba(8,14,30,.82); backdrop-filter: blur(6px); } .lb-fig { margin: 0; display: grid; } @media (min-width: 900px) { .lb-fig { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } } .lb-fig img { width: 100%; height: 100%; max-height: 78vh; object-fit: cover; display: block; background: var(--mist); } .lb-fig figcaption { padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 10px; } .lb-tags { font-size: .84rem; font-weight: 600; color: var(--blue); } .lb-fig h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); margin: 0; } .lb-fig p { margin: 0; color: var(--ink-2); } .lb-actions { margin-top: auto !important; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .lb-nav { display: inline-flex; gap: 8px; } .lb-nav .btn { min-width: 48px; padding-left: 0; padding-right: 0; } .lb-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.18); } .lb-x:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } /* Všeobecné doladenie: karty, „V skratke“, súvisiace stránky */ .card { background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(14,23,38,.04); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; } .section-soft .card, .section-glass .card { border-color: transparent; } .card-hover:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(14,23,38,.35); border-color: var(--line-2); } .section-soft .card-hover:hover { background: #fff; } .tldr { background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -34px rgba(14,23,38,.45); } .tldr h2 { display: flex; align-items: center; align-self: start; gap: 10px; } .tldr h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-100); } .tldr li { padding-left: 30px; } .tldr li::before { width: 16px; height: 16px; top: 13px; border-radius: 50%; background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231745F6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; } .tldr li:first-child::before { top: 3px; } .related { border-top: 0; gap: 14px; } .related a { border: 1px solid var(--line); border-radius: 20px; padding: 22px 56px 22px 24px; position: relative; background: #fff; transition: border-color .25s, transform .3s, box-shadow .3s; } .related a::after { content: ""; position: absolute; right: 22px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s; } .related a:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); box-shadow: 0 18px 36px -28px rgba(14,23,38,.4); } .related a:hover::after { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .ph-bg img { animation: none; } } /* Štúdiá: jedna mriežka s filtrom krajov; zástupná fotka ako farebná plocha s názvom mesta; „doplní RAK“ nenápadne */ .studio-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } @media (max-width: 1180px) { .studio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .studio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .studio-grid { grid-template-columns: 1fr; } } .studio-card h3 { font-size: 1.35rem !important; } .st-kraj { margin: 0; font-size: .8rem; font-weight: 600; color: var(--blue); } .studio-photo-ph { display: flex; align-items: flex-end; aspect-ratio: 16 / 9; padding: 16px 18px; background: radial-gradient(120% 120% at 100% 0%, #24348A 0%, var(--night) 65%); color: rgba(255,255,255,.92); } .studio-photo-ph span { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.03em; } .studio-card .studio-photo { overflow: hidden; } .studio-card .studio-photo img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); } .studio-card:hover .studio-photo img { transform: scale(1.05); } .todo { color: var(--muted); font-style: normal; font-size: .92em; } .studio-filter { max-width: 100%; } @media (min-width: 1100px) { #zoznam-studii .gal-head .studio-filter { justify-self: end; } } .studio-photo-ph::before, .studio-photo-ph::after { display: none !important; content: none !important; } .studio-card dl { grid-template-columns: 4.4rem minmax(0, 1fr); } .studio-card dd a[href^="mailto"] { font-size: .86rem; } /* v11.1 – dlhší hlavný nadpis a citát zakladateľa */ .hero-ed h1 { font-size: clamp(2.9rem, 1.3rem + 4.4vw, 5.6rem); max-width: 13ch; line-height: .96; text-wrap: balance; } .people-h { font-family: var(--display); font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; color: #fff; margin: 0 0 18px; max-width: 22ch; text-wrap: balance; } .people-quote-long { margin: 0 0 24px; } .people-quote-long p { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.04em; margin: 0; max-width: 22ch; text-wrap: balance; } .people-quote-long footer { font-family: var(--font); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: rgba(255,255,255,.75); margin-top: 18px; } .section-head h2 { text-wrap: balance; } /* ===================== v13 – produktové systémy, kategórie, reklamačný formulár, výber na domovskej stránke ===================== */ /* Úvod stránky systému: text vľavo, produktová fotka vpravo na svetlej ploche */ .sys-hero { background: var(--glass-tint); padding: 28px 0 clamp(44px, 5vw, 80px); } .sys-hero .breadcrumbs { padding-top: 0; margin-bottom: 18px; background: none !important; box-shadow: none !important; clip-path: none !important; } .sys-hero-grid { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; } @media (min-width: 980px) { .sys-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } } .sys-brand { margin: 0 0 10px; font-size: .92rem; font-weight: 600; color: var(--blue); } .sys-hero h1 { margin: 0; font-size: clamp(2.3rem, 1.4rem + 3vw, 4.4rem); line-height: .98; letter-spacing: -.045em; max-width: 14ch; text-wrap: balance; } .sys-hero .lead { margin: 20px 0 0; max-width: 52ch; } .sys-hero .hero-ctas { margin-top: 28px; } .sys-hero .updated { margin-top: 18px; } .sys-hero-img { margin: 0; border-radius: 28px; overflow: hidden; background: #fff; aspect-ratio: 1 / 1; display: grid; place-items: center; box-shadow: 0 30px 60px -40px rgba(14,23,38,.45); } .sys-hero-img img { width: 100%; height: 100%; object-fit: contain; padding: clamp(10px, 2vw, 28px); border-radius: 0 !important; } @media (max-width: 979px) { .sys-hero-img { aspect-ratio: 4 / 3; } } .sys-kf { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 22px; margin: 30px 0 0; border-top: 1px solid var(--ink); } .sys-kf div { padding: 14px 0 12px; border-bottom: 1px solid var(--line-2); } .sys-kf dt { font-size: .82rem; color: var(--muted); } .sys-kf dd { margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); letter-spacing: -.02em; line-height: 1.2; } .sys-intro h3 { margin-top: 28px; } .checks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; } .checks li { position: relative; padding-left: 28px; margin: 0; } .checks li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231745F6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; } .sys-fig img { background: #fff; object-fit: contain !important; max-height: 420px; } .sys-fig figcaption { font-size: .86rem; color: var(--muted); margin-top: 8px; } .sys-side h3 { margin-top: 0; } .sys-steps { margin: 12px 0 20px; padding-left: 1.2em; display: grid; gap: 6px; } .ptables { display: grid; gap: clamp(16px, 2vw, 26px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .ptable-card { background: #fff; border-radius: 22px; padding: clamp(20px, 2.4vw, 32px); } .ptable-card h3 { margin: 0 0 14px; } .ptable { width: 100%; border-collapse: collapse; font-size: .97rem; } .ptable th, .ptable td { text-align: left; vertical-align: top; padding: 11px 0; border-bottom: 1px solid var(--line); } .ptable th { width: 46%; font-weight: 500; color: var(--muted); padding-right: 18px; } .ptable td { font-weight: 500; font-variant-numeric: tabular-nums; } .ptable .pt-group th { width: auto; padding-top: 22px; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 1rem; border-bottom: 1px solid var(--ink); } .sys-notes { list-style: none; padding: 0; margin: 22px 0 0; font-size: .84rem; color: var(--muted); display: grid; gap: 4px; max-width: 90ch; } .mini-gal { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); gap: 12px; } .mini-gal li { margin: 0; position: relative; aspect-ratio: 4 / 3; } .mini-gal .g-open { border-radius: 16px; } .mini-gal .g-open::after { display: none; } /* Karty systémov v kategórii */ .sys-cards { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); } .sys-card { margin: 0; } .sys-card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink); background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid transparent; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; } .sys-card a:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -30px rgba(14,23,38,.4); border-color: var(--line-2); color: var(--ink); } .sys-card a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } .sys-card-img { display: block; aspect-ratio: 3 / 2; background: #fff; border-bottom: 1px solid var(--line); } .sys-card-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0 !important; } .sys-card-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; } .sys-card-name { font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.15; } .sys-card-txt { color: var(--ink-2); font-size: .95rem; line-height: 1.5; } .sys-card .link-arrow { margin-top: auto; padding-top: 8px; } .sys-table td, .sys-table th { white-space: normal; } .door-tiers .door-fig { margin: -8px -8px 12px; border-radius: 14px; overflow: hidden; background: var(--mist); aspect-ratio: 4 / 3; } .door-tiers .door-fig img { width: 100%; height: 100%; object-fit: contain; border-radius: 0 !important; } .feat-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; margin-bottom: 14px; } .specs-sm { border-top: 1px solid var(--line-2); } .specs-sm .spec, .specs-sm > div { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); } .specs-sm dt { font-size: .82rem; color: var(--muted); } .specs-sm dd { margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: 1.25rem !important; letter-spacing: -.02em; } .tien-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; margin-bottom: 14px; } .tien-grid .card p + p { margin-top: 10px; } .people-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; } .person { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; } .person:last-child { border-bottom: 0; } .person-role { font-size: .8rem; color: var(--muted); } .person a { font-size: .95rem; width: fit-content; } /* Reklamačný formulár */ .cl-hero .breadcrumbs { padding-top: 0; margin-bottom: 16px; background: none !important; box-shadow: none !important; clip-path: none !important; } .cl-narrow { max-width: 1040px; } .cl-wrap { padding-bottom: clamp(56px, 7vw, 110px); } .cl-legal { margin: 0 0 12px; max-width: 90ch; } .cl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 6px; } .cl-tools .small { max-width: 70ch; } .cl-stepper .lbl { white-space: nowrap; } .cl-stepper button { cursor: pointer; } .cl-panel { margin-top: 26px; } .cl-step { border: 0; margin: 0; padding: 0; min-width: 0; } .cl-h { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); letter-spacing: -.03em; padding: 0; margin: 0 0 6px; } .cl-h:focus { outline: none; } .cl-step h3, .cl-step .cl-sub { margin: 34px 0 14px; font-size: 1.15rem; letter-spacing: -.01em; } .cl-step .cl-sub small { font-family: var(--font); font-weight: 400; font-size: .86rem; } .cl-group { border: 0; padding: 0; margin: 26px 0 0; min-width: 0; } .cl-group legend { font-weight: 600; font-size: .98rem; margin-bottom: 12px; padding: 0; } .cl-cond { margin-top: 18px; } .cl-flags { display: grid; gap: 10px; } .check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .97rem; } .check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ink); flex: none; } .form-alert.info { background: var(--blue-50); color: var(--blue-800); } .form-alert.warn { background: var(--warn-50); color: var(--warn); } .cl-urgent { margin-top: 14px; } .cl-elements { display: grid; gap: 14px; margin: 6px 0 14px; } .cl-el { padding: 18px 20px; background: var(--mist); border-color: transparent; } .cl-el-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .cl-quick { margin: 22px 0 12px; } .chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .chips-row .chip { font-size: .84rem; padding: 6px 12px; } .cl-review { display: grid; gap: 14px; margin-top: 20px; } .cl-rev { border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; background: #fff; } .cl-rev-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .cl-rev h3, .cl-rev .cl-sub { margin: 0 !important; font-size: 1.05rem; } .cl-rev dl { margin: 10px 0 0; display: grid; gap: 0; } .cl-rev dl div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); } .cl-rev dt { color: var(--muted); font-size: .9rem; } .cl-rev dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; } @media (max-width: 560px) { .cl-rev dl div { grid-template-columns: 1fr; gap: 2px; } } .cl-done { margin-top: 30px; padding: clamp(24px, 3vw, 44px); border-radius: 26px; background: var(--ok-50); } .cl-done:focus { outline: none; } .cl-done h2 { margin: 12px 0 10px; } .cl-done-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 22px 0 12px; } .cl-done-kv div { background: #fff; border-radius: 16px; padding: 14px 18px; } .cl-done-kv dt { font-size: .82rem; color: var(--muted); } .cl-done-kv dd { margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; } .cl-next { margin-top: 14px; } .cl-next h4 { margin: 0 0 4px; font-size: 1rem; } .cl-done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 14px; } @media print { .cl-done-actions, .cl-tools, .cl-legal { display: none !important; } .cl-done { background: #fff; } } /* Kontakt */ .contact-grid h2 { font-size: 1.2rem; margin-top: 0; } .mini-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0; } .mini-dl dt { color: var(--muted); } .mini-dl dd { margin: 0; } .studio-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; } .studio-links li { margin: 0; } .studio-links a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; background: #fff; height: 100%; } .studio-links a:hover { border-color: var(--ink); } .studio-links span { font-size: .86rem; color: var(--muted); } .big-kf { border-top-color: var(--ink); } .big-kf dd { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); letter-spacing: -.04em; } .big-kf dt { order: 2; } .big-kf div { display: flex; flex-direction: column-reverse; gap: 6px; } .legal-current { border-top: 1px solid var(--line); padding-top: 28px; } /* Domovská stránka: výber plast vs. hliník a iné služby hneď pod úvodom */ .pick-sec { padding: clamp(48px, 6vw, 96px) 0 clamp(40px, 5vw, 80px); background: #fff; } .pick-head { display: grid; gap: 10px 48px; align-items: end; margin-bottom: clamp(22px, 3vw, 36px); } @media (min-width: 980px) { .pick-head { grid-template-columns: auto minmax(0, 52ch); justify-content: space-between; } } .pick-head h2 { margin: 0; font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); letter-spacing: -.04em; line-height: 1; } .pick-head p { margin: 0; color: var(--ink-2); } .pick-main { display: grid; gap: clamp(12px, 1.4vw, 20px); position: relative; } @media (min-width: 900px) { .pick-main { grid-template-columns: 1fr 1fr; } } .pick-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: clamp(380px, 38vw, 520px); padding: clamp(24px, 3vw, 44px); border-radius: 28px; color: #fff; text-decoration: none; background: var(--night); } .pick-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; border-radius: 0 !important; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); } .pick-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,14,30,.92) 0%, rgba(8,14,30,.6) 42%, rgba(8,14,30,.1) 78%); } .pick-card:hover { color: #fff; } .pick-card:hover > img { transform: scale(1.045); } .pick-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } .pick-k { font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.78); } .pick-t { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1.02; letter-spacing: -.04em; max-width: 18ch; } .pick-p { color: rgba(255,255,255,.85); max-width: 46ch; line-height: 1.5; } .pick-go { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; font-weight: 600; background: #fff; color: var(--ink); padding: 12px 20px; border-radius: 999px; align-self: flex-start; } .pick-go::after { content: ""; width: 18px; height: 1.5px; background: currentColor; transition: width .3s; } .pick-card:hover .pick-go::after { width: 30px; } .pick-or { display: none; } @media (min-width: 900px) { .pick-or { display: grid; place-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--ink); font-weight: 600; font-size: .86rem; z-index: 2; box-shadow: 0 12px 30px -12px rgba(14,23,38,.5); } } .pick-compare { margin: 18px 0 0; } .pick-more { margin-top: clamp(30px, 4vw, 52px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid var(--line); } .pick-note { color: #43506b; margin: 14px 0; } .pick-more h3 { margin: 0 0 16px; font-size: 1.25rem; } .svc-ico { width: 42px; height: 42px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex: none; color: var(--blue); } .svc-ico svg { width: 22px; height: 22px; } .drawer .sub .sub-title { font-size: .78rem; font-weight: 600; color: var(--muted); padding: 14px 0 2px; list-style: none; } .drawer .sub .sub-title:first-child { padding-top: 4px; } .arch-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.4vw, 18px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } .arch-card { margin: 0; display: flex; flex-direction: column; gap: 10px; } .arch-card .g-open { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: 18px; } .arch-card .g-open::after { background: linear-gradient(0deg, rgba(8,14,30,.55) 0%, rgba(8,14,30,0) 45%); } .arch-count { position: absolute; right: 12px; bottom: 12px; z-index: 1; font-size: .78rem; font-weight: 600; color: #fff; background: rgba(8,14,30,.55); backdrop-filter: blur(6px); padding: 4px 10px; border-radius: 999px; } .arch-name { margin: 0; display: flex; flex-direction: column; } .arch-name span { font-size: .86rem; color: var(--muted); } .rev-cols { columns: 3 320px; column-gap: clamp(14px, 1.6vw, 22px); } .rev-cols .review { break-inside: avoid; margin: 0 0 clamp(14px, 1.6vw, 22px); display: block; } .rev-cols .review blockquote p { margin: 0; } .rev-more { margin-top: 10px; } .rev-more summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--blue); list-style: none; } .rev-more summary::-webkit-details-marker { display: none; } .rev-more[open] summary { margin-bottom: 8px; } .inst-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 12px; margin-bottom: 12px; } .inst-card ol { margin: 8px 0 0; padding-left: 1.2em; } .tech-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 0; } .tech-list li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); margin: 0; } .tech-list span { color: var(--muted); font-size: .93rem; } .q-grid > div { border-top: 1px solid var(--ink); padding-top: 14px; } .q-grid h3 { margin: 0 0 6px; font-size: 1.1rem; } .founder-long p { font-size: 1.04rem; line-height: 1.65; margin: 0 0 12px; font-family: var(--font); letter-spacing: 0; font-weight: 400; } .type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } @media (max-width: 560px) { .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .type-fig { margin: 0; text-align: center; font-size: .82rem; color: var(--ink-2); } .type-fig img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; padding: 8px; margin-bottom: 6px; } .cert-fig img { max-height: 360px; } .short-answer { background: var(--blue-50); border-left: 3px solid var(--blue); border-radius: 0 16px 16px 0; padding: 16px 20px; margin: 18px 0 8px; } .short-answer p { margin: 0; } .series-recos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; } .series-reco { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); text-decoration: none; background: #fff; } .series-reco:hover { border-color: var(--ink); } .series-reco span { font-size: .86rem; color: var(--muted); } .sys-card-img.is-photo img { object-fit: cover; } .photo-43 img { aspect-ratio: 4 / 3; object-fit: cover; } .sys-hero-img.is-photo img { object-fit: cover; padding: 0; } @media (max-width: 600px) { .svc-ico { width: 34px; height: 34px; border-radius: 10px; } .svc-ico svg { width: 18px; height: 18px; } .pick-card { min-height: 0; padding-top: 140px; } .pick-p { font-size: .95rem; } } @media (max-width: 600px) { .sys-kf { grid-template-columns: 1fr 1fr; gap: 0 14px; } .sys-kf dd { font-size: 1rem; } } /* ========================================================= v14 (draft 14, 19. 10. 2026): dve cesty kontaktu, typ montáže, „ako počítame“, menu Produkty a služby ========================================================= */ .route-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; max-width: 980px; } .route-card { position: relative; display: flex; gap: 16px; align-items: flex-start; text-align: left; padding: 20px 22px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; } .route-card:hover { border-color: var(--ink-2); } .route-card[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .route-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .route-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--mist); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); } .route-ico svg { width: 22px; height: 22px; } .route-card[aria-pressed="true"] .route-ico { background: var(--ink); color: #fff; } .route-txt { display: flex; flex-direction: column; gap: 3px; } .route-txt strong { font-family: var(--display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; } .route-meta { font-size: .9rem; color: var(--ink-2); font-weight: 500; } .route-desc { font-size: .92rem; color: var(--muted); line-height: 1.45; margin-top: 4px; } .route-tag { position: absolute; top: -11px; right: 18px; } .quick-panel { margin: 18px 0 64px; } .quick-card { max-width: 760px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); } .quick-card h2 { margin-top: 0; } .nudge { padding: 18px 20px; border-radius: var(--r-lg); background: var(--mist); } .nudge h3 { margin: 0 0 8px; font-size: 1.15rem; } .nudge .ticks { margin: 0 0 14px; } #quick-ok:focus { outline: none; } .tile .tile-body small.tile-price { color: var(--ink); font-weight: 600; margin-top: 8px; } .est-how { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; } .est-how summary, .calc-how summary { cursor: pointer; font-weight: 600; font-size: .92rem; } .est-how[open] summary { margin-bottom: 8px; } .est-table { width: 100%; border-collapse: collapse; font-size: .86rem; margin: 0 0 8px; } .est-table th, .est-table td { padding: 5px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; } .est-table td { text-align: right; white-space: nowrap; padding-left: 10px; font-variant-numeric: tabular-nums; } .est-table tr.sum th, .est-table tr.sum td { font-weight: 700; border-bottom: 0; } .calc-how { margin: 14px 0 6px; text-align: left; } .calc-how p { margin-top: 8px; } .calc-formula { margin: 14px 0; padding: 12px 16px; background: var(--mist); border-radius: var(--r); } .calc-formula summary { cursor: pointer; font-weight: 600; } .price-how { background: var(--mist); padding: clamp(48px, 6vw, 88px) 0; } .price-how .lead { max-width: 64ch; } .how-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 24px; align-items: start; } .how-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 14px; } .how-steps li { padding-left: 4px; line-height: 1.55; } .how-side { display: grid; gap: 18px; } .how-side table caption { text-align: left; font-weight: 600; padding-bottom: 6px; } .how-example h3 { margin-top: 0; } @media (max-width: 860px) { .route-pick, .how-grid { grid-template-columns: 1fr; } } .route-tag { background: var(--ink); color: #fff; } /* v14: jedno menu „Produkty a služby“ – 4 stĺpce + konfigurátor */ .mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.05fr); } .mega-grid > div { padding: 0 24px; } .mega ul a { padding: 5px 0; } .mega-teaser .mega-all { position: relative; z-index: 1; color: #fff; font-size: .88rem; margin-top: auto; padding-top: 10px; } @media (max-width: 1320px) { .mega-grid > div { padding: 0 16px; } .mega ul a { font-size: .93rem; } } .mega-teaser .mega-all { align-self: flex-start; padding-left: 0; text-underline-offset: 3px; } /* v14: domovská stránka – ponuka s fotkami, Bezpečnosť/Teplo/Dizajn, certifikáty, montáž (dve možnosti), rady bez technických skratiek */ .offer-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.4vw, 20px); grid-template-columns: repeat(3, minmax(0, 1fr)); } .offer-grid li { margin: 0; } .offer-grid a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); height: 100%; } .of-img { display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--mist); margin-bottom: 10px; } .of-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; border-radius: 0 !important; } .offer-grid a:hover .of-img img { transform: scale(1.04); } .of-t { font-family: var(--display); font-weight: 600; font-size: 1.22rem; letter-spacing: -.02em; line-height: 1.15; } .offer-grid a:hover .of-t { color: var(--blue); } .of-s { color: var(--muted); font-size: .92rem; line-height: 1.4; } .offer-mini { list-style: none; margin: clamp(18px, 2vw, 26px) 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .offer-mini li { margin: 0; } .offer-mini a { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--mist); text-decoration: none; color: var(--ink); font-weight: 600; font-size: .94rem; line-height: 1.25; height: 100%; } .offer-mini a:hover { background: var(--blue-50); } .offer-mini a.is-cfg { background: var(--ink); color: #fff; } .offer-mini a.is-cfg .svc-ico { background: rgba(255,255,255,.12); color: #fff; } .offer-mini a.is-cfg:hover { background: var(--blue-800); } @media (max-width: 980px) { .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .offer-mini { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .of-t { font-size: 1.02rem; } .of-s { font-size: .84rem; } .offer-mini a { font-size: .86rem; } .of-img { border-radius: 14px; } } .cert-sec { background: #fff; border-top: 1px solid var(--line); } .cert-head { display: grid; gap: 6px 40px; align-items: end; margin-bottom: 22px; } @media (min-width: 900px) { .cert-head { grid-template-columns: auto minmax(0, 56ch); justify-content: space-between; } } .cert-head h2 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); } .cert-head p { margin: 0; color: var(--muted); font-size: .95rem; } .cert-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); align-items: center; } .cert-logos li { margin: 0; display: grid; place-items: center; } .cert-logos img { max-height: 76px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; border-radius: 0 !important; } .cert-logos li:hover img { filter: none; opacity: 1; } @media (max-width: 760px) { .cert-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cert-logos img { max-height: 56px; } } .video-ph.has-poster { position: relative; overflow: hidden; padding: 0; } .video-ph.has-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); border-radius: 0 !important; } .video-ph.has-poster .play { position: relative; z-index: 1; } .video-ph.has-poster .cap { z-index: 1; } .video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-img); display: block; background: #000; } .founder-fig { margin: 0; background: var(--night); border-radius: var(--r-img); overflow: hidden; padding-top: 18px; } .founder-fig img { width: 100%; height: auto; display: block; border-radius: 0 !important; } .founder-fig figcaption { color: #C9CEF2; font-size: .85rem; padding: 10px 18px 14px; } .to-top { position: fixed; right: 18px; bottom: 22px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; } .to-top svg { width: 20px; height: 20px; } .to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--blue-800); color: #fff; } .to-top:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } @media (max-width: 767px) { .to-top { bottom: 86px; right: 12px; width: 42px; height: 42px; } } body.no-salesbar .to-top, body.app .to-top { bottom: 22px; } .legal-draft { padding: 10px 14px; border-left: 3px solid var(--warn); background: var(--warn-50); color: var(--warn); font-weight: 600; font-size: .92rem; border-radius: 0 var(--r) var(--r) 0; } .legal-outline { margin: 18px 0; padding: 12px 16px; background: var(--mist); border-radius: var(--r); } .legal-outline summary { cursor: pointer; font-weight: 600; } .legal-text h3 { margin-top: 1.6em; } /* v14: technické údaje zbalené – stránky najprv hovoria zrozumiteľne, parametre sú na kliknutie */ .tech-more, .tech-sec { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 20px; background: #fff; } .tech-more > summary, .tech-sec > summary { cursor: pointer; font-weight: 600; padding: 16px 0; list-style-position: outside; } .tech-more[open], .tech-sec[open] { padding-bottom: 20px; } .tech-sec .container { padding-left: 0; padding-right: 0; max-width: none; } .tech-sec section, .tech-sec .section, .tech-sec .section-sm { padding: 18px 0 !important; background: transparent !important; } .cmp-table th[scope="row"] { width: 26%; } .cmp-table thead th { font-family: var(--display); font-size: 1.1rem; } /* v14: konfigurátor okien – klikací dom (R-01) */ .house-sec { padding-top: 8px; } .house-opts { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 18px; } .house-opts fieldset { border: 0; padding: 0; margin: 0; } .house-opts legend { font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .house-opts .seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--mist); border-radius: 999px; } .house-opts .seg label { position: relative; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: .92rem; font-weight: 500; } .house-opts .seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .house-opts .seg label:has(input:checked) { background: var(--ink); color: #fff; } .house-opts .seg label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; } .house-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: clamp(18px, 3vw, 40px); align-items: start; } .house-stage { background: linear-gradient(180deg, #E8F0F8 0%, #F6F8FA 70%); border-radius: var(--r-lg); padding: clamp(10px, 2vw, 22px); } #house { width: 100%; height: auto; display: block; } #house .ground { fill: #DCE5D3; } #house .terrace { fill: #E7E5DF; } #house .wall { fill: #F7F5F1; stroke: #C9C4BA; stroke-width: 1.5; } #house .roof { fill: #3B424D; } #house .floor { stroke: #E2DED6; stroke-width: 2; } #house .nb { fill: #ECEAE5; stroke: #D3CEC5; } #house .nb-roof { fill: #8B9099; } #house .glass { fill: #BFD6EA; } #house .frame { fill: none; stroke: #fff; stroke-width: 5; } #house rect.frame { stroke: #fff; } #house line.frame { stroke: #fff; stroke-width: 4; } #house .door { fill: #4A515C; } #house .knob { fill: #D9DDE3; } #house .gate { fill: #D6D9DE; stroke: #B5BAC2; } #house .gate-line { stroke: #B5BAC2; stroke-width: 1.5; } #house .blind { fill: #6B7280; } #house .slats line { stroke: #9097A1; stroke-width: 1.4; } #house .rail-glass { fill: rgba(191,214,234,.55); stroke: #9FB3C8; } #house .rail { stroke: #59616D; stroke-width: 3; } #house .slab { fill: #D3CEC5; } #house .hs { cursor: pointer; outline: none; } #house .hs > :not(.hs-mark) { transition: opacity .15s, filter .15s; } #house .hs:hover > :not(.hs-mark), #house .hs:focus-visible > :not(.hs-mark) { filter: drop-shadow(0 0 6px rgba(23,69,246,.75)); } #house .hs-mark circle { fill: #fff; stroke: var(--color-primary); stroke-width: 2.5; } #house .hs-mark path { fill: none; stroke: var(--color-primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } #house .hs-mark { pointer-events: none; } #house .hs:not(.is-on) .hs-mark circle { fill: var(--color-primary); stroke: #fff; animation: hs-pulse 2.4s ease-in-out infinite; } #house .hs.is-on .hs-mark circle { fill: var(--color-primary); stroke: #fff; } #house .hs.is-on .hs-mark path { stroke: #fff; opacity: 1; } #house .hs.is-on .glass { fill: #8FB6DE; } #house .hs:focus-visible .hs-mark circle { stroke: var(--ink); stroke-width: 4; } @keyframes hs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { #house .hs-mark circle { animation: none !important; } } .house-stage > p { margin-top: 10px; } .house-panel { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; background: #fff; position: sticky; top: calc(var(--header-h) + 12px); } .house-panel h2 { margin: 0 0 10px; font-size: 1.4rem; } .h-list { list-style: none; margin: 0; padding: 0; } .h-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); margin: 0; transition: background .3s; } .h-list li.is-on strong { color: var(--blue-800); } .h-list li.flash { background: var(--blue-50); } .h-list li > div:first-child { display: flex; flex-direction: column; min-width: 0; } .h-list strong { font-weight: 600; font-size: .96rem; } .h-list span { font-size: .8rem; color: var(--muted); } .h-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; flex: none; } .h-qty button { width: 34px; height: 34px; border: 0; background: transparent; font-size: 1.15rem; cursor: pointer; border-radius: 50%; color: var(--ink); } .h-qty button:hover { background: var(--mist); } .h-qty output { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } .h-toggle input { width: 22px; height: 22px; accent-color: var(--ink); cursor: pointer; } .h-sum { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 10px; } .h-count { margin: 0; font-weight: 600; } .h-sum .btn { width: 100%; justify-content: center; } .h-sum .btn[disabled] { opacity: .45; cursor: not-allowed; } .h-sum .estimate { margin: 0; } .frame-ph { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--night); } .frame-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); border-radius: 0 !important; } .frame-cta { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; color: #fff; } .frame-cta p { width: 100%; color: #E3E7F3; } .frame-ph iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; } @media (max-width: 980px) { .house-grid { grid-template-columns: 1fr; } .house-panel { position: static; } } @media (max-width: 560px) { .frame-ph { aspect-ratio: 3 / 4; } .house-opts { gap: 10px 16px; } .house-opts .seg label { padding: 7px 10px; font-size: .86rem; } } .h-qty { flex-direction: row; } .h-qty button { display: grid; place-items: center; flex: none; padding: 0; width: 34px; min-width: 34px; } .h-qty output { display: inline-block; } .h-sum .range { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); white-space: nowrap; } @media (max-width: 560px) { .house-stage { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; padding: 8px; } .h-sum .range { font-size: 1.55rem; } } /* v14: dlhšia položka „Produkty a služby“ – v úzkom desktope kratšie tlačidlo a menšie medzery */ @media (min-width: 1180px) and (max-width: 1379px) { .main-nav a, .main-nav .nav-trigger { padding: 10px 10px; font-size: .9rem; } .main-nav a::after, .main-nav .nav-trigger::after { left: 10px; right: 10px; } .header-actions .cta-long { display: none; } .header-actions .cta-short { display: inline; } } @media (max-width: 400px) { .offer-mini { grid-template-columns: 1fr; } } .offer-mini a { min-width: 0; overflow-wrap: anywhere; } .arch-filter { margin-bottom: 18px; display: inline-flex; flex-wrap: wrap; } /* ========================================================= draft 15 (19. 10. 2026): zjednodušená domovská stránka – teplé svetlé sekcie, fotky ľudí a domov, bez technických čísel ========================================================= */ .why-sec { background: #fff; } .why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); } .why-grid li { margin: 0; } .why-grid a { display: flex; flex-direction: column; gap: 8px; height: 100%; text-decoration: none; color: var(--ink); } .why-img { display: block; aspect-ratio: 4 / 5; border-radius: var(--r-img); overflow: hidden; margin-bottom: 8px; background: var(--mist); } .why-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; transition: transform .5s ease; } .why-grid a:hover .why-img img { transform: scale(1.04); } .why-t { font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); letter-spacing: -.02em; line-height: 1.15; } .why-p { color: var(--ink-2); line-height: 1.5; } .why-go { margin-top: auto; font-weight: 600; font-size: .94rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .why-grid a:hover .why-go { color: var(--blue); } @media (max-width: 980px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .why-grid { grid-template-columns: 1fr; } .why-img { aspect-ratio: 16 / 10; } } .save-sec { background: var(--mist); scroll-margin-top: 90px; } .save-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .save-copy h2 { margin-top: 0; } .save-sec .mini-calc { background: #fff; border: 1px solid var(--line); margin-top: 24px; max-width: none; } .save-sec .mc-area label, .save-sec .mc-old legend { color: var(--ink); } .save-sec .mc-area output { color: var(--ink); font-size: 1.1rem; } .save-sec .mc-area input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--ink) 0 var(--fill, 21%), var(--mist-2) var(--fill, 21%)); } .save-sec .mc-area input[type="range"]::-moz-range-track { background: linear-gradient(90deg, var(--ink) 0 var(--fill, 21%), var(--mist-2) var(--fill, 21%)); } .save-sec .mc-area input[type="range"]::-webkit-slider-thumb { background: var(--ink); box-shadow: 0 0 0 6px rgba(14,23,38,.1); } .save-sec .mc-area input[type="range"]::-moz-range-thumb { background: var(--ink); box-shadow: 0 0 0 6px rgba(14,23,38,.1); } .save-sec .mc-area input[type="range"]:focus-visible { outline-color: var(--blue); } .save-sec .mini-calc .seg { background: var(--mist); } .save-sec .mini-calc .seg span { color: var(--ink-2); } .save-sec .mini-calc .seg label:hover span { color: var(--ink); } .save-sec .mini-calc .seg input:checked + span { background: var(--ink); color: #fff; } .save-sec .mini-calc .seg input:focus-visible + span { outline-color: var(--blue); } .save-result { background: #fff; border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-sm); border: 1px solid var(--line); display: grid; gap: 10px; justify-items: start; } .save-k { margin: 0; font-weight: 600; color: var(--muted); } .save-big { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(3rem, 2rem + 4vw, 5.2rem); line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; } .save-sub { margin: 0 0 10px; color: var(--ink-2); } @media (max-width: 900px) { .save-grid { grid-template-columns: 1fr; } } .steps2-sec { background: #fff; } .steps2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); counter-reset: none; } .steps2 li { margin: 0; position: relative; } .steps2 figure { margin: 0 0 14px; aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; } .steps2 figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; } .steps2 .st-n { position: absolute; top: 12px; left: 12px; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--ink); font-weight: 700; display: grid; place-items: center; box-shadow: var(--shadow-sm); } .steps2 h3 { margin: 0 0 6px; font-size: 1.2rem; } .steps2 p { margin: 0; color: var(--ink-2); } @media (max-width: 980px) { .steps2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .steps2 { grid-template-columns: 1fr; } } .home-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 3vw, 44px); } .home-reviews .rv-meta { color: var(--muted); } .home-reviews .review { background: #fff; border-radius: var(--r-lg); padding: 24px; border: 1px solid var(--line); } .home-reviews .review blockquote { font-size: 1.15rem; line-height: 1.4; } .home-reviews .review blockquote::before { content: "„"; } .home-reviews .review blockquote::after { content: "“"; } @media (max-width: 900px) { .home-reviews { grid-template-columns: 1fr; } } .rv-links { display: flex; flex-wrap: wrap; gap: 10px 26px; } /* v15: zrozumiteľné výhody v hlavičke systému a zbalené technické údaje */ .plain-benefits { list-style: none; padding: 0; margin: 18px 0 4px; display: grid; gap: 8px; } .plain-benefits li { position: relative; padding-left: 30px; line-height: 1.45; } .plain-benefits li::before { content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231745F6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; } .tech-wrap { padding-top: 8px; padding-bottom: 8px; } .tech-sec > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; list-style: none; position: relative; padding-right: 36px; } .tech-sec > summary::-webkit-details-marker { display: none; } .tech-sec > summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--muted); line-height: 1; } .tech-sec[open] > summary::after { content: "−"; } .tech-sec > summary small { font-weight: 400; color: var(--muted); font-size: .88rem; } .tech-sec > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; } .tech-body { border-top: 1px solid var(--line); padding-top: 14px; } .calc-adv { margin: 10px 0 4px; } .calc-adv > summary { cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--muted); } .calc-adv[open] > summary { margin-bottom: 8px; } .h4 { font-size: 1.05rem; line-height: 1.35; }