/* === Brand „Fúry pre všetkých" — fialová (#b08df1). Aktivuje sa cez data-brand="vsetkych" na (brand.js + inline snippet v ). Soft/softer/tiene/žiary sa odvodia z --accent-rgb, takže stačí prepísať tieto 4. === */ :root[data-brand="vsetkych"] { --accent: #b08df1; --accent-strong: #9a6ee9; --accent-light: #cbb3f6; --accent-rgb: 176, 141, 241; } :root { --accent: #f18dbc; --accent-strong: #e577ab; --accent-light: #f5a4c9; --accent-rgb: 241, 141, 188; --accent-soft: rgba(var(--accent-rgb), 0.18); --accent-softer: rgba(var(--accent-rgb), 0.1); --bg: #ffffff; --surface: #ffffff; --surface-muted: #f7f7f7; --surface-soft: #fcfcfc; --text: #2f2f2f; --text-soft: #666666; --line: #d9d9d9; --line-strong: #bbbbbb; --shadow: 0 24px 60px rgba(47, 47, 47, 0.08); --shadow-soft: 0 14px 34px rgba(47, 47, 47, 0.06); --radius-xl: 34px; --radius-lg: 26px; --radius-md: 18px; --page-gutter: clamp(1rem, 2.2vw, 2.6rem); --header-max-width: 1320px; --filter-modal-toolbar-height: clamp(4.4rem, 7.7vw, 5.9rem); --filter-modal-gradient-tail: clamp(2rem, 4vw, 3rem); --filter-modal-gradient-height: calc( var(--filter-modal-toolbar-height) + var(--filter-modal-gradient-tail) ); --hero-edge-bleed: max(0px, calc((100vw - var(--header-max-width)) / 2)); --max-width: 1220px; --section-duration: 720ms; /* Motion tokeny */ --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.2, 0.9, 0.2, 1); --dur-fast: 200ms; --dur-med: 420ms; --dur-slow: 720ms; --reveal-stagger: 90ms; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: "Lexend", system-ui, sans-serif; color: var(--text); background: var(--bg); } body.deck-active { overflow: hidden; } body.app-modal-open { overflow: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; } h1, h2, h3, h4 { margin: 0; font-family: "Braah One", "Arial Black", sans-serif; font-weight: 400; color: var(--text); line-height: 0.96; letter-spacing: -0.02em; } h3 { font-size: clamp(1.55rem, 2.1vw, 2rem); } p { margin: 0; } code { padding: 0.14rem 0.45rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); font-family: inherit; font-size: 0.88em; } .site-shell { width: 100%; padding-inline: var(--page-gutter); } /* Podstránky: obsah zarovnaný na šírku headera (homepage má vlastný štýl) */ body:not(.page-home) .site-shell { max-width: var(--header-max-width); margin-inline: auto; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.85rem 1.35rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.95rem; font-weight: 600; transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease, color 220ms ease; } .button:hover, .button:focus-visible { transform: translateY(-2px); outline: none; } .button-primary { background: var(--accent); color: #ffffff; box-shadow: none; } .button-primary:hover, .button-primary:focus-visible { background: var(--accent-strong); } .button-secondary { background: rgba(255, 255, 255, 0.88); border-color: var(--line); color: var(--text); } .button-secondary:hover, .button-secondary:focus-visible { background: var(--surface-muted); } .brand { display: flex; align-items: center; gap: 0.85rem; font-size: 0.96rem; font-weight: 700; color: var(--text); } .brand-logo { display: block; width: auto; height: 2.35rem; flex: none; } .brand span:last-child { white-space: nowrap; } .eyebrow { display: inline-flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); } .eyebrow::before { content: ""; width: 2.6rem; height: 1px; background: currentColor; opacity: 0.7; } .section-copy, .lead { max-width: 42rem; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.8; color: var(--text-soft); } .panel-tag, .section-tag { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); background: var(--accent-soft); } .topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; font-size: 0.92rem; font-weight: 600; line-height: 1.45; color: var(--text-soft); } .page-home .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding: 1rem 0; pointer-events: none; } .topbar-inner { position: relative; z-index: 1; max-width: var(--header-max-width); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border: none; border-radius: 999px; background: var(--surface); backdrop-filter: none; box-shadow: none; pointer-events: auto; } .topnav { display: flex; align-items: center; gap: 0.35rem; justify-content: center; flex-wrap: wrap; } .topnav-link { padding: 0.68rem 1rem; border-radius: 999px; font-size: 0.9rem; font-weight: 500; color: var(--text-soft); transition: background-color 180ms ease, color 180ms ease; } .topnav-link:hover, .topnav-link:focus-visible, .topnav-link.is-current, .topnav-link.is-active { background: var(--surface-muted); color: var(--text); outline: none; } .topbar-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } /* Mobil — kompaktný jednoriadkový header (rovnaká výška → rovnaká pozícia breadcrumbov) */ @media (max-width: 600px) { .topbar-inner { flex-wrap: nowrap; gap: 0.5rem; } .topbar-actions { flex-wrap: nowrap; gap: 0.5rem; } .brand span { display: none; } .page-detail .topbar-back { display: none; } } .deck { position: relative; min-height: 100svh; } .slide { position: relative; display: flex; align-items: center; min-height: 100svh; padding: clamp(6.3rem, 8vw, 7.2rem) 0 clamp(2rem, 4vw, 3rem); overflow: hidden; } .slide::before, .slide::after { content: none; } .slide::before { display: none; } .slide::after { display: none; } .slide--plain { background: var(--surface); } .slide--muted { background: var(--surface); } .slide--accent { background: var(--surface); } .page-home .slide#kontakt { align-items: stretch; } .slide-inner { display: grid; gap: clamp(1.8rem, 4vw, 3.3rem); align-items: center; } .hero-grid, .split-grid, .closing-grid { grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr); } .hero-landing { gap: clamp(1.25rem, 3vw, 2rem); } .hero-showcase { width: min(100%, var(--header-max-width)); margin-inline: auto; justify-self: center; display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .cars-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .page-home h1 { font-size: clamp(2.9rem, 5.8vw, 5.4rem); max-width: none; line-height: 0.98; text-wrap: balance; } .hero-title span { display: block; } .page-home h2 { font-size: clamp(2.3rem, 5vw, 4rem); max-width: 10ch; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hero-copy { max-width: 48rem; } .hero-kicker { margin-bottom: 1rem; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); } .hero-subcopy { max-width: 38rem; margin-top: 1.5rem; font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 1.85; color: var(--text-soft); } .hero-visual { position: relative; width: calc(100% + var(--hero-edge-bleed)); margin-right: calc(-1 * var(--hero-edge-bleed)); min-height: clamp(19rem, 38vw, 30rem); display: flex; align-items: flex-end; justify-content: flex-end; padding: 0.75rem 0 0; overflow: visible; } .hero-car-stage { position: relative; width: min(100%, 64rem); margin-left: auto; will-change: transform, opacity; } .hero-car-image { display: block; position: relative; z-index: 2; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 28px 30px rgba(47, 47, 47, 0.18)); will-change: transform, opacity; } .hero-wheel { position: absolute; z-index: 3; left: 28.3%; bottom: 3.3%; width: 20.1852%; pointer-events: none; } .hero-wheel-image { display: block; width: 100%; height: auto; transform-origin: center center; will-change: transform; } .page-home:not(.deck-active) #hero .hero-car-stage { animation: heroCarEnter 1.6s cubic-bezier(0.2, 0.9, 0.2, 1) both; } .page-home:not(.deck-active) #hero .hero-wheel-image { animation: heroWheelSpin 1.6s cubic-bezier(0.22, 1, 0.36, 1) both; } .page-home.deck-active .slide.is-active .hero-car-stage { animation: heroCarEnter 1.6s cubic-bezier(0.2, 0.9, 0.2, 1) both; } .page-home.deck-active .slide.is-active .hero-wheel-image { animation: heroWheelSpin 1.6s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes heroCarEnter { 0% { opacity: 1; transform: translate3d(100%, 0, 0) scale(1); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes heroWheelSpin { 0% { transform: rotate(539deg) scale(0.96); } 100% { transform: rotate(0deg) scale(1); } } .brand-strip { width: min(100%, var(--header-max-width)); margin-top: clamp(1.6rem, 3vw, 2.3rem); margin-inline: auto; justify-self: center; display: flex; align-items: center; justify-content: space-between; gap: clamp(0.8rem, 2vw, 1.65rem); flex-wrap: wrap; } .brand-link { display: inline-flex; align-items: center; justify-content: center; min-height: 3.2rem; opacity: 0.3; color: var(--text-soft); transition: transform 200ms ease, color 200ms ease, opacity 200ms ease, filter 200ms ease; } .brand-link:hover, .brand-link:focus-visible { transform: translateY(-2px); opacity: 1; color: var(--text); outline: none; } .brand-link.is-active { opacity: 1; } .brand-logo-image { display: block; width: auto; height: clamp(2.35rem, 4vw, 3.35rem); object-fit: contain; filter: grayscale(1); transition: filter 200ms ease; } .brand-link:hover .brand-logo-image, .brand-link:focus-visible .brand-logo-image, .brand-link.is-active .brand-logo-image { filter: none; } .brand-link-arrow { width: 3rem; height: 3rem; border-radius: 50%; background: rgba(127, 127, 127, 0.16); box-shadow: none; color: var(--text); opacity: 1; } .brand-arrow { font-size: 1.7rem; font-weight: 500; line-height: 1; } .hero-actions, .section-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.8rem; } .facts-row, .cta-grid { display: grid; gap: 1rem; } .facts-row { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; } .compact-row { margin-top: 1rem; } .mini-card, .info-card, .feature, .quote-card, .page-home .car-card, .cta-panel, .hero-panel, .category-card, .page-auta .car-card, .process-card, .faq-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow); } .mini-card, .feature, .process-card, .faq-card, .category-card { padding: 1.2rem; } .mini-card strong, .feature strong, .process-card strong, .faq-card strong, .category-card strong { display: block; margin-bottom: 0.45rem; } .mini-card strong { font-size: 1.55rem; } .mini-card p, .feature p, .process-card p, .faq-card p, .category-card p { line-height: 1.65; color: var(--text-soft); } .info-card { position: relative; padding: 1.5rem; overflow: hidden; } .info-card::after { content: ""; position: absolute; right: -4rem; bottom: -5rem; width: 12rem; height: 12rem; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0)); } .value-stack { display: grid; gap: 1rem; } .quote-card { padding: 1.6rem; background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.22), rgba(255, 255, 255, 0.96)); } .quote-card p { font-size: 1.05rem; line-height: 1.75; color: var(--text); } .quote-card span { display: block; margin-top: 1rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); } .top-listings-shell { width: min(100%, var(--header-max-width)); margin-inline: auto; display: grid; gap: 1.5rem; align-content: center; } .top-listings-head { display: grid; gap: 0.45rem; max-width: 48rem; margin-inline: auto; justify-items: center; text-align: center; } .top-listings-head .section-copy { max-width: 40rem; } .top-listings-head h2 { max-width: none; } .top-listings-grid { display: grid; gap: 1rem; } .top-listings-featured, .top-listings-secondary { display: grid; gap: 1rem; } .top-listings-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } .top-listings-secondary { width: 88%; margin-inline: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); } .listing-card { display: grid; grid-template-rows: auto 1fr; gap: 0.95rem; background: none; border: none; box-shadow: none; overflow: visible; transition: transform 220ms ease; } .listing-card:hover, .listing-card:focus-visible { transform: translateY(-5px); outline: none; } .listing-media { border: 1px solid var(--line); border-radius: 22px; aspect-ratio: 16 / 9; overflow: hidden; transition: border-color 220ms ease, box-shadow 220ms ease; } .listing-card:hover .listing-media, .listing-card:focus-visible .listing-media { border-color: var(--accent); box-shadow: none; } .listing-info { display: grid; gap: 0.55rem; align-content: space-between; padding: 0; min-height: 0; } .listing-copy strong { display: block; font-size: 1.12rem; margin-bottom: 0; } .listing-specs { display: flex; flex-wrap: wrap; gap: 0.45rem 0.8rem; font-size: 0.88rem; color: var(--text-soft); } .listing-specs .pill { min-height: auto; padding: 0; border: none; border-radius: 0; background: none; font-size: inherit; font-weight: 500; color: inherit; } .listing-specs .pill[data-ico] { display: inline-flex; align-items: center; gap: 0.3rem; } .listing-specs .pill[data-ico]::before { content: ""; flex: none; width: 0.8rem; height: 0.8rem; background-color: var(--accent); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .listing-specs .pill[data-ico="year"]::before { mask-image: url("../icon/year.svg"); -webkit-mask-image: url("../icon/year.svg"); } .listing-specs .pill[data-ico="mileage"]::before { mask-image: url("../icon/mileage.svg"); -webkit-mask-image: url("../icon/mileage.svg"); } .listing-specs .pill[data-ico="euro"]::before { mask-image: url("../icon/circle-dollar-sign.svg"); -webkit-mask-image: url("../icon/circle-dollar-sign.svg"); } .listing-specs .pill + .pill { position: relative; } .listing-specs .pill + .pill:not([data-ico])::before { content: "•"; margin-right: 0.8rem; color: var(--line-strong); } .top-listings-actions { justify-content: center; margin-top: 0.2rem; } .reels-shell { width: min(100%, var(--header-max-width)); margin-inline: auto; display: grid; gap: clamp(1.2rem, 2.4vw, 1.8rem); align-content: center; } .reels-head { display: grid; gap: 0.55rem; max-width: 48rem; margin-inline: auto; justify-items: center; text-align: center; } .reels-head h2 { max-width: none; } .reels-head .section-copy { max-width: 38rem; } .reels-handle { color: var(--accent-strong); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color 200ms ease, color 200ms ease; } .reels-handle:hover, .reels-handle:focus-visible { color: var(--accent-strong); border-bottom-color: var(--accent-strong); outline: none; } .reels-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.6rem); width: min(100%, 52rem); margin-inline: auto; align-items: start; justify-items: center; } /* Sprievodca sekcia (homepage) */ .guide-shell { width: min(100%, var(--header-max-width)); margin-inline: auto; display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); align-content: center; } .guide-head { display: grid; gap: 0.55rem; max-width: 46rem; margin-inline: auto; justify-items: center; text-align: center; } .guide-head .eyebrow::before { display: none; } .guide-head h2 { max-width: none; } .guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); width: min(100%, 58rem); margin-inline: auto; } .page-home .guide-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: clamp(1.2rem, 2vw, 1.6rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transition: transform 220ms ease, box-shadow 220ms ease; } .page-home .guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .guide-card-ico { display: inline-flex; width: 2.9rem; height: 2.9rem; margin-bottom: 0.4rem; border-radius: 50%; background: var(--accent-soft, rgba(var(--accent-rgb), 0.16)); position: relative; } .guide-card-ico::before { content: ""; position: absolute; inset: 0; margin: auto; width: 1.4rem; height: 1.4rem; background-color: var(--accent-strong, var(--accent)); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .guide-card-ico[data-gico="mileage"]::before { mask-image: url("../icon/mileage.svg"); -webkit-mask-image: url("../icon/mileage.svg"); } .guide-card-ico[data-gico="price"]::before { mask-image: url("../icon/circle-dollar-sign.svg"); -webkit-mask-image: url("../icon/circle-dollar-sign.svg"); } .guide-card-ico[data-gico="power"]::before { mask-image: url("../icon/circle-gauge.svg"); -webkit-mask-image: url("../icon/circle-gauge.svg"); } .guide-card-ico[data-gico="info"]::before { mask-image: url("../icon/info.svg"); -webkit-mask-image: url("../icon/info.svg"); } .guide-card-title { margin: 0; font-size: 1.05rem; line-height: 1.3; } .guide-card-text { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-soft); } .guide-actions { justify-content: center; } @media (max-width: 860px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } } .reel-card { display: flex; flex-direction: column; gap: 0.7rem; width: 100%; max-width: 17rem; background: transparent; border: 0; box-shadow: none; border-radius: 0; height: auto; } .reel-frame-wrap { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius-lg); background: #000; border: 1px solid var(--line); box-shadow: var(--shadow-soft); transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease; } .reel-card:hover .reel-frame-wrap, .reel-card:focus-within .reel-frame-wrap { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow); } .reel-card:hover .reel-poster, .reel-card:focus-within .reel-poster { transform: scale(1.03); } .reel-card:hover .reel-play, .reel-card:focus-within .reel-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(255, 255, 255, 0.96); } .reel-poster { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; } .reel-play { position: absolute; top: 50%; left: 50%; width: 3.6rem; height: 3.6rem; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); color: #16171c; border-radius: 50%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); pointer-events: none; transition: transform 220ms ease, background 220ms ease; } .reel-play svg { width: 1.4rem; height: 1.4rem; margin-left: 0.18rem; } .reel-actions { display: flex; align-items: center; gap: 1rem; padding: 0 0.15rem; } .reel-action { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; color: var(--text); transition: color 200ms ease, transform 200ms ease; } .reel-action:hover, .reel-action:focus-visible { color: var(--accent-strong); transform: scale(1.08); outline: none; } .reel-action--end { margin-left: auto; } .reel-action-icon { width: 100%; height: 100%; display: block; } .reels-actions { justify-content: center; margin-top: 0.2rem; } .button-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; flex: none; } .button-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; } .app-showcase { width: min(100%, var(--header-max-width)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .app-copy { max-width: 34rem; } .app-copy h2 { max-width: none; } .app-visual { display: flex; align-items: center; justify-content: center; min-height: clamp(23rem, 36vw, 30rem); } .app-shot-stack { position: relative; width: min(100%, 34rem); height: clamp(23rem, 40vw, 31rem); } .app-shot { position: absolute; display: block; width: auto; height: auto; max-width: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; } .app-shot--left { left: 2%; bottom: 0; width: clamp(14.75rem, 30vw, 19.5rem); transform: none; z-index: 1; } .app-shot--right { right: 4%; top: 0; width: clamp(11.5rem, 23vw, 14.5rem); transform: rotate(9deg); z-index: 2; } .app-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.25rem; background: rgba(255, 255, 255, 0.44); backdrop-filter: blur(18px); overscroll-behavior: contain; } .app-modal[hidden] { display: none; } .app-modal-card { position: relative; width: min(100%, 22rem); max-height: min(100vh - 2.5rem, 24rem); padding: 1.6rem 1.45rem 1.45rem; border: 1px solid rgba(217, 217, 217, 0.9); border-radius: 1.8rem; background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow); display: grid; gap: 1.3rem; overflow: auto; justify-items: center; text-align: center; } .modal-title { margin-top: 0.25rem; font-size: clamp(1.8rem, 3vw, 2.2rem); line-height: 0.98; } .app-modal-close { position: fixed; top: max(1rem, calc(env(safe-area-inset-top, 0px) + 0.6rem)); right: max(1rem, calc(env(safe-area-inset-right, 0px) + 0.6rem)); width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent); color: var(--text); appearance: none; -webkit-appearance: none; display: grid; place-items: center; font-size: 1.2rem; line-height: 1; cursor: pointer; z-index: 81; } .app-modal-close span { display: inline-block; line-height: 1; transform: none; } .app-modal-close:focus, .app-modal-close:focus-visible { outline: none; box-shadow: none; } .app-modal-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; } .app-store-link { min-height: 3.8rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--surface); display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-weight: 600; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .app-store-link--icon { width: 5rem; height: 5rem; min-height: 0; padding: 0; border-radius: 50%; flex: none; } .app-store-logo { display: block; width: 2rem; height: 2rem; object-fit: contain; } .app-store-link:hover, .app-store-link:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 18px 30px rgba(var(--accent-rgb), 0.14); outline: none; } .outro-shell { width: min(100%, var(--header-max-width)); min-height: 100%; margin-inline: auto; align-content: stretch; grid-template-rows: auto 1fr; gap: clamp(1.35rem, 3vw, 2.15rem); } .outro-hero-panel { position: relative; min-height: clamp(18rem, 28vw, 22.5rem); margin-top: clamp(1rem, 2.4vw, 2rem); padding: clamp(2.6rem, 6vw, 4rem); border-radius: var(--radius-xl); background: radial-gradient(circle at 85% 50%, rgba(255, 255, 255, 0.18), transparent 26%), radial-gradient(circle at 95% 20%, rgba(255, 255, 255, 0.12), transparent 20%), linear-gradient(145deg, var(--accent-light), var(--accent)); color: #ffffff; display: grid; justify-items: center; text-align: center; gap: 0.95rem; overflow: hidden; } .outro-hero-panel::after { content: ""; position: absolute; inset: -20% -6% auto auto; width: 42%; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; } .outro-hero-panel h2 { max-width: none; color: #ffffff; font-size: clamp(2.7rem, 5vw, 4.6rem); } .outro-hero-copy { max-width: 28rem; font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.75; color: rgba(255, 255, 255, 0.72); } .outro-actions { justify-content: center; margin-top: 0.35rem; } .outro-hero-panel .button-primary { background: #ffffff; color: #1f1f23; } .outro-hero-panel .button-primary:hover, .outro-hero-panel .button-primary:focus-visible { background: #f1f1f1; color: #1f1f23; } .outro-footer-grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.62fr) minmax(280px, 1fr); gap: clamp(1rem, 3vw, 2.8rem); align-items: end; align-self: end; padding-bottom: clamp(0.4rem, 1vw, 0.9rem); } .outro-legal, .outro-nav { display: grid; gap: 0.75rem; } .outro-legal { align-content: end; justify-items: center; text-align: center; } .outro-legal-links { display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex-wrap: wrap; } .outro-link { font-size: 0.96rem; color: var(--text-soft); transition: color 180ms ease; } .outro-link:hover, .outro-link:focus-visible { color: var(--text); outline: none; } .outro-credit { justify-self: center; text-align: center; margin-top: clamp(0.35rem, 1vw, 0.75rem); font-size: 0.84rem; line-height: 1.65; color: var(--text-soft); } .outro-credit-link { color: var(--text); } .outro-credit-link:hover, .outro-credit-link:focus-visible { color: var(--accent-strong); outline: none; } .outro-news { justify-self: end; width: min(100%, 23rem); display: grid; gap: 0.85rem; } .outro-news-title { font-size: 0.96rem; font-weight: 700; color: var(--text); } .newsletter-form { position: relative; } .newsletter-input { width: 100%; min-height: 3.35rem; padding: 0.9rem 3.6rem 0.9rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-muted); font: inherit; color: var(--text); transition: border-color 180ms ease, background-color 180ms ease; } .newsletter-input::placeholder { color: #9a9a9a; } .newsletter-input:focus { border-color: var(--accent); background: var(--surface); outline: none; } .newsletter-submit { position: absolute; top: 0.35rem; right: 0.35rem; width: 2.65rem; height: 2.65rem; padding: 0; border: none; border-radius: 50%; background: var(--accent); color: #ffffff; display: grid; place-items: center; cursor: pointer; } .newsletter-submit .brand-arrow { font-size: 1.45rem; } .newsletter-feedback { min-height: 1.1rem; font-size: 0.84rem; color: var(--text-soft); } .newsletter-form.is-success .newsletter-input { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); } .outro-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.55rem; } .footer-mark { display: inline-flex; align-items: center; } .footer-mark-logo { display: block; width: auto; height: 2.2rem; } .social-links { display: flex; gap: 0.55rem; } .social-link { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; transition: transform 180ms ease; } .social-link:hover, .social-link:focus-visible { transform: translateY(-2px); outline: none; } .social-icon { display: block; width: 100%; height: 100%; background-color: var(--accent); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: background-color 180ms ease; } .social-link:hover .social-icon, .social-link:focus-visible .social-icon { background-color: var(--accent-strong); } /* Sociálne ikony = kompletné SVG (ružový kruh + biely glyph priamo v súbore), takže farba sa nemení s témou a netreba mask. */ .social-icon--instagram, .social-icon--facebook, .social-icon--tiktok, .social-icon--mail { -webkit-mask-image: none; mask-image: none; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; } .social-icon--instagram { background-image: url("../icon/Instagram.svg?v=20260609h"); } .social-icon--facebook { background-image: url("../icon/Facebook.svg?v=20260609h"); } .social-icon--tiktok { background-image: url("../icon/TikTok.svg?v=20260609h"); } .social-icon--mail { background-image: url("../icon/mail.svg?v=20260609h"); } /* Fialové sociálne ikony pre brand „pre všetkých" (Instagram2/Facebook2/TikTok2/mail2) */ :root[data-brand="vsetkych"] .social-icon--instagram { background-image: url("../icon/Instagram2.svg?v=20260612z27"); } :root[data-brand="vsetkych"] .social-icon--facebook { background-image: url("../icon/Facebook2.svg?v=20260612z27"); } :root[data-brand="vsetkych"] .social-icon--tiktok { background-image: url("../icon/TikTok2.svg?v=20260612z27"); } :root[data-brand="vsetkych"] .social-icon--mail { background-image: url("../icon/mail2.svg?v=20260612z27"); } .cars-side { display: grid; } .car-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .page-home .car-card { display: grid; gap: 1rem; padding: 1.2rem; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .page-home .car-card:hover, .page-home .car-card:focus-visible { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 24px 44px rgba(var(--accent-rgb), 0.2); outline: none; } .car-art { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; background: linear-gradient(155deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(var(--accent-rgb), 0.92), rgba(217, 217, 217, 0.98)); } .car-art::before, .car-art::after { content: ""; position: absolute; } .car-art::before { width: 56%; height: 34%; left: 19%; bottom: 28%; border-radius: 1rem; background: rgba(255, 255, 255, 0.96); clip-path: polygon(0% 100%, 8% 55%, 28% 34%, 54% 25%, 80% 30%, 100% 60%, 100% 100%); } .car-art::after { width: 68%; height: 0.55rem; left: 16%; bottom: 17%; border-radius: 999px; background: rgba(47, 47, 47, 0.18); filter: blur(4px); } .art-city { background: linear-gradient(155deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(var(--accent-rgb), 0.92), rgba(217, 217, 217, 0.98)); } .art-trip { background: linear-gradient(155deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(var(--accent-rgb), 0.78), rgba(188, 188, 188, 0.98)); } .art-style { background: linear-gradient(155deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(var(--accent-rgb), 0.98), rgba(164, 164, 164, 0.92)); } .art-suv { background: linear-gradient(155deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(207, 207, 207, 0.95), rgba(var(--accent-rgb), 0.72)); } .art-coupe { background: linear-gradient(155deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(var(--accent-rgb), 0.86), rgba(120, 120, 120, 0.96)); } .art-sportback { background: linear-gradient(155deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(188, 188, 188, 0.98), rgba(var(--accent-rgb), 0.72)); } .art-sedan { background: linear-gradient(155deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(var(--accent-rgb), 0.74), rgba(96, 96, 96, 0.98)); } .page-home .car-card strong { display: block; font-size: 1.2rem; margin-bottom: 0.35rem; } .page-home .car-card p, .car-meta, .bullet, .slide-hint { color: var(--text-soft); } .car-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.88rem; } .bullet-list { display: grid; gap: 0.9rem; margin-top: 1.5rem; } .bullet { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.96rem; line-height: 1.65; } .bullet::before { content: ""; width: 0.72rem; height: 0.72rem; margin-top: 0.42rem; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0.14); } .cta-panel { padding: clamp(1.35rem, 3vw, 1.9rem); background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.18), rgba(255, 255, 255, 0.98)); } .cta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.1rem; } .cta-item { padding: 1rem; border: 1px solid rgba(217, 217, 217, 0.95); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.8); } .cta-item strong { display: block; margin-bottom: 0.4rem; } .cta-item p { color: var(--text-soft); line-height: 1.65; } .slide-hint { display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 1.45rem; font-size: 0.88rem; } .slide-hint::after { content: ""; width: 3.5rem; height: 1px; background: currentColor; opacity: 0.6; } body.deck-active .deck { height: 100svh; } body.deck-active .slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translate3d(0, 10%, 0) scale(0.97); transition: opacity var(--section-duration) cubic-bezier(0.22, 1, 0.36, 1), transform var(--section-duration) cubic-bezier(0.22, 1, 0.36, 1); } body.deck-active .slide.is-before { transform: translate3d(0, -14%, 0) scale(0.94); } body.deck-active .slide.is-after { transform: translate3d(0, 14%, 0) scale(0.94); } body.deck-active .slide.is-active { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); z-index: 2; } /* ===== Reveal / scroll-entry animácie ===== body.anim-ready pridáva JS len ak nie je prefers-reduced-motion, takže bez JS / pri reduce sú prvky vždy viditeľné. */ body.anim-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); transition-delay: calc(var(--reveal-stagger) * var(--i, 0)); will-change: opacity, transform; } body.anim-ready .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); will-change: opacity, transform; } body.anim-ready .reveal-stagger > *:nth-child(1) { transition-delay: 60ms; } body.anim-ready .reveal-stagger > *:nth-child(2) { transition-delay: 130ms; } body.anim-ready .reveal-stagger > *:nth-child(3) { transition-delay: 200ms; } body.anim-ready .reveal-stagger > *:nth-child(4) { transition-delay: 270ms; } body.anim-ready .reveal-stagger > *:nth-child(5) { transition-delay: 340ms; } body.anim-ready .reveal-stagger > *:nth-child(6) { transition-delay: 410ms; } body.anim-ready .reveal-stagger > *:nth-child(7) { transition-delay: 480ms; } body.anim-ready .reveal-stagger > *:nth-child(n + 8) { transition-delay: 550ms; } /* Mobile / freescroll + podstránky: IntersectionObserver pridáva .is-revealed */ body.anim-ready .reveal.is-revealed, body.anim-ready .reveal-stagger.is-revealed > * { opacity: 1; transform: none; } /* Desktop deck: aktívny slide odkryje svoje deti (stagger cez transition-delay), neaktívne sa resetnú, aby sa pri ďalšej aktivácii znova animovali */ body.anim-ready.deck-active .slide.is-active .reveal, body.anim-ready.deck-active .slide.is-active .reveal-stagger > * { opacity: 1; transform: none; } body.anim-ready.deck-active .slide:not(.is-active) .reveal, body.anim-ready.deck-active .slide:not(.is-active) .reveal-stagger > * { opacity: 0; transform: translateY(22px); } /* ===== Energické mikro-pohyby (len ak používateľ nevypol pohyb) ===== */ @media (prefers-reduced-motion: no-preference) { /* Plynulý "float" telefónov v sekcii Aplikácia */ .app-shot--left { animation: appShotFloatLeft 6.5s var(--ease-out) infinite; } .app-shot--right { animation: appShotFloatRight 7.5s var(--ease-out) infinite; } @keyframes appShotFloatLeft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes appShotFloatRight { 0%, 100% { transform: rotate(9deg) translateY(0); } 50% { transform: rotate(9deg) translateY(-14px); } } } /* Hover nudge šípky vnútri tlačidiel + glow na primárnom CTA */ .button .brand-arrow { transition: transform var(--dur-fast) var(--ease-out); } .button:hover .brand-arrow, .button:focus-visible .brand-arrow { transform: translateX(4px); } .button-primary:hover, .button-primary:focus-visible { box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.32); } /* A11y: viditeľný focus ring pre klávesnicu (prepisuje staré outline:none) */ .button:focus-visible, .topnav-link:focus-visible, .topbar-user:focus-visible, .brand:focus-visible, .brand-link:focus-visible, .filter-nav-link:focus-visible, .filter-trigger:focus-visible, .reel-action:focus-visible, .reels-handle:focus-visible, .social-link:focus-visible, .account-tile:focus-visible, .listing-card:focus-visible, .detail-section-link:focus-visible, .outro-link:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; } /* ===== Skeleton loading ===== */ .skeleton { position: relative; overflow: hidden; background: var(--surface-muted); border-radius: var(--radius-md); } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.6), transparent ); animation: skeletonShimmer 1.5s ease-in-out infinite; } @keyframes skeletonShimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } } .skeleton-line { height: 0.82rem; border-radius: 999px; } .skeleton-line--title { height: 1.25rem; width: 62%; } .skeleton-line--short { width: 42%; } .car-card--skeleton, .listing-card--skeleton { pointer-events: none; } .car-card--skeleton .car-media .skeleton { width: 100%; aspect-ratio: 16 / 9; border-radius: 1.5rem; } .car-card--skeleton .car-body, .listing-card--skeleton .listing-info { display: grid; gap: 0.7rem; align-content: center; } .listing-card--skeleton .listing-media.skeleton { display: block; } /* Detail gallery shimmer počas načítania */ .detail-page.is-loading .gallery-main, .detail-page.is-loading .gallery-thumb { position: relative; overflow: hidden; } .detail-page.is-loading .gallery-main::after, .detail-page.is-loading .gallery-thumb::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.55), transparent ); animation: skeletonShimmer 1.5s ease-in-out infinite; z-index: 3; } @media (prefers-reduced-motion: reduce) { .detail-page.is-loading .gallery-main::after, .detail-page.is-loading .gallery-thumb::after { animation: none; } } /* ===== Empty state katalógu ===== */ .catalog-empty { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-xl); padding: clamp(2rem, 5vw, 3.5rem); text-align: center; display: grid; gap: 0.9rem; justify-items: center; max-width: 42rem; margin: 1.5rem auto; } .catalog-empty .empty-state-icon { font-size: 2.6rem; line-height: 1; } .catalog-empty h2 { font-size: 1.4rem; } .catalog-empty p { color: var(--text-soft); max-width: 38ch; line-height: 1.5; } .page-auta .topbar, .page-detail .topbar, .page-account .topbar, .page-auth .topbar, .page-legal .topbar { position: sticky; top: 0; z-index: 30; padding: 1rem 0 0; isolation: isolate; } .page-auta .topbar::before, .page-detail .topbar::before, .page-account .topbar::before, .page-auth .topbar::before, .page-legal .topbar::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(100% + 2.2rem); background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 58%, rgba(255, 255, 255, 0) 100% ); pointer-events: none; z-index: 0; } .legal-page { width: min(100%, var(--header-max-width)); margin-inline: auto; padding: clamp(1.4rem, 2.6vw, 2.2rem) var(--page-gutter) 4rem; display: grid; gap: 1.4rem; } /* Jednotná pozícia breadcrumbov (rovnaký horný odsadenie ako account/legal) */ .cars-page { padding-top: clamp(1.4rem, 2.6vw, 2.2rem); } /* Jednotná medzera pod breadcrumbom → obsah začína na rovnakej pozícii všade. Kompenzácia ide priamo na breadcrumb (robustné, nezávisí od toho, čo je za ním). legal-page má grid gap 1.4rem → netreba; ostatné dorovnáme. */ .cars-page > .breadcrumb { margin-bottom: 1.4rem; } .account-page > .breadcrumb + * { margin-top: calc(1.4rem - clamp(2rem, 3.6vw, 3rem)); } .detail-page > .breadcrumb + * { margin-top: calc(1.4rem - clamp(2rem, 4vw, 3.4rem)); } .legal-stack { width: 100%; display: grid; gap: 1rem; } .legal-content { width: 100%; display: grid; gap: 1.25rem; } .legal-page h1, .legal-page h2 { max-width: none; } .legal-page h1 { font-size: clamp(2.8rem, 6vw, 5rem); } .legal-page h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); } .legal-block { padding: 1.25rem 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); display: grid; gap: 0.75rem; } .legal-block p { line-height: 1.75; color: var(--text-soft); } .legal-block h3 { margin: 0.35rem 0 0; font-family: "Lexend", sans-serif; font-size: 1.02rem; font-weight: 700; } .legal-block ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; color: var(--text-soft); line-height: 1.65; } .legal-block li::marker { color: var(--accent); } .legal-block a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; } .legal-block address { font-style: normal; line-height: 1.8; color: var(--text-soft); } .legal-block strong { color: var(--text); } .legal-meta { margin-top: 0.4rem; font-size: 0.9rem; color: var(--text-soft); } .legal-meta strong { color: var(--text); } .page-auta .hero { padding: clamp(3rem, 8vw, 6rem) 0 2rem; } .page-auta .hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr); gap: 1.5rem; align-items: center; } .page-auta h1 { font-size: clamp(2.95rem, 7vw, 5.8rem); max-width: 9ch; } .page-auta h2 { font-size: clamp(2rem, 4vw, 3.35rem); max-width: 11ch; } .page-auta .hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.8rem; } .hero-panel { padding: 1.5rem; } .stat-grid, .category-grid, .detail-grid, .process-grid, .faq-grid { display: grid; gap: 1rem; } .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); } .stat strong { display: block; margin-bottom: 0.35rem; font-size: 1.32rem; } .stat p { font-size: 0.92rem; line-height: 1.6; color: var(--text-soft); } .section { padding: 1.5rem 0 4rem; } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.5rem; } .category-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 2rem; } .inventory { display: grid; gap: 1.2rem; } .page-auta .car-card { display: grid; grid-template-columns: minmax(240px, 0.84fr) minmax(0, 1.16fr); gap: 1.2rem; padding: 1.3rem; scroll-margin-top: 6.25rem; } .page-auta .car-body { display: grid; gap: 1rem; align-content: start; } .page-auta .car-title { font-size: clamp(1.75rem, 3vw, 2.55rem); max-width: none; margin-top: 0.8rem; } .pill { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); font-size: 0.82rem; font-weight: 600; color: var(--text-soft); } .page-auta .car-meta { justify-content: flex-start; flex-wrap: wrap; gap: 0.55rem; } .page-auta .car-card p { line-height: 1.75; color: var(--text-soft); } .detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .detail { padding: 0.95rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); } .detail strong { display: block; margin-bottom: 0.35rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); } .detail span { font-size: 0.98rem; font-weight: 600; color: var(--text); } .price-row { display: flex; align-items: end; justify-content: space-between; gap: 1rem; } .price { font-size: 1.75rem; font-weight: 700; color: var(--text); } .process-grid, .faq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer { padding: 0 0 3rem; } .footer-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.45rem; border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.2), rgba(255, 255, 255, 0.98)); box-shadow: var(--shadow-soft); } .footer-panel p { max-width: 36rem; line-height: 1.72; color: var(--text-soft); } .cars-hero-shell, .cars-shell, .cars-footer-panel { width: min(100%, var(--header-max-width)); margin-inline: auto; } .page-auta .cars-hero { padding: 0 0 1rem; } .cars-hero-shell { display: grid; gap: 1.2rem; align-items: end; } .cars-hero-copy { display: grid; gap: 1rem; max-width: 56rem; } /* /auta/ TOP carousel */ .top-carousel { position: relative; --carousel-gap: 1.2rem; --visible: 4; padding-bottom: clamp(1.6rem, 3vw, 2.6rem); } @media (max-width: 979px) { .top-carousel { --visible: 2; } } @media (max-width: 619px) { .top-carousel { --visible: 1; } } .top-carousel-viewport { overflow: hidden; } .top-carousel-track { display: flex; gap: var(--carousel-gap); transition: transform 320ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)); will-change: transform; } .top-carousel-track > .listing-card { flex: 0 0 calc((100% - (var(--visible) - 1) * var(--carousel-gap)) / var(--visible)); min-width: 0; } .top-carousel-arrow { position: absolute; top: calc((100% - clamp(1.6rem, 3vw, 2.6rem)) / 2); transform: translateY(-50%); z-index: 5; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease; } .top-carousel-arrow:hover { border-color: var(--accent); background: var(--surface-muted); } .top-carousel-arrow svg { width: 1.25rem; height: 1.25rem; } .top-carousel-arrow--prev { left: 0; transform: translate(-45%, -50%); } .top-carousel-arrow--next { right: 0; transform: translate(45%, -50%); } .top-carousel-arrow[hidden] { display: none; } .top-card-badge { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; display: inline-flex; align-items: center; padding: 0.26rem 0.66rem; border-radius: 999px; background: var(--accent); color: #ffffff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .top-carousel-track .listing-media { position: relative; } .catalog-top { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 1rem 2.5rem; padding-bottom: 1.1rem; margin-bottom: 1.35rem; border-bottom: 1px solid var(--line); } .catalog-head { margin: 0; } .catalog-head h2 { font-size: clamp(2rem, 4.5vw, 3rem); } .cars-hero-copy .lead { max-width: 45rem; } .page-auta .cars-catalog { padding-top: 1.5rem; } .catalog-filters { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1.35rem; } .filter-chip { min-height: 2.7rem; padding: 0.65rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-soft); font: inherit; font-size: 0.93rem; font-weight: 600; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; } .filter-chip.is-active, .filter-chip:hover, .filter-chip:focus-visible { border-color: var(--accent); background: var(--accent); color: #ffffff; outline: none; } .catalog-toolbar { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; } .catalog-count { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); } .catalog-controls { display: flex; flex-direction: column; gap: 0.8rem; } .catalog-controls-row { display: flex; align-items: center; justify-content: flex-end; gap: 0.85rem; flex-wrap: wrap; } .catalog-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .filter-trigger-group { display: inline-flex; align-items: center; gap: 0.45rem; } .filter-trigger { min-height: 2.75rem; padding: 0.65rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); display: inline-flex; align-items: center; gap: 0.65rem; color: var(--text); font: inherit; font-size: 0.94rem; font-weight: 700; cursor: pointer; transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease; } .filter-trigger.is-active, .filter-trigger:hover, .filter-trigger:focus-visible { border-color: var(--accent); outline: none; } .filter-trigger-clear { min-height: 2.75rem; padding: 0.65rem 0.85rem; border: 0; border-radius: 999px; background: var(--accent); color: #ffffff; display: inline-flex; align-items: center; gap: 0.22rem; font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: transform 180ms ease, background-color 180ms ease; } .filter-trigger-clear:hover, .filter-trigger-clear:focus-visible { background: var(--accent-strong); transform: translateY(-1px); outline: none; } .filter-trigger-count { min-width: 0; height: auto; padding: 0; border-radius: 0; background: transparent; color: inherit; display: inline; place-items: initial; font-size: inherit; font-weight: inherit; line-height: 1; } .filter-trigger-clear-mark { font-size: 1rem; line-height: 1; } .filter-trigger-group .filter-trigger-count { min-width: 0; } .filter-trigger-group .filter-trigger-clear .filter-trigger-count { color: inherit; } .sort-control { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--text-soft); font-size: 0.94rem; font-weight: 500; } .sort-control select { min-height: 2.75rem; padding: 0.65rem 2.3rem 0.65rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; background-color: var(--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25 7 9.25l4-4' stroke='%232f2f2f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 0.95rem center; background-repeat: no-repeat; color: var(--text); font: inherit; font-weight: 600; appearance: none; } .view-toggle { display: inline-flex; align-items: center; padding: 0.2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } .view-toggle-button { display: grid; place-items: center; min-height: 2.35rem; min-width: 2.9rem; padding: 0.55rem 0.8rem; border: 0; border-radius: 999px; background: transparent; color: var(--text-soft); font: inherit; font-size: 0.92rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 180ms ease, color 180ms ease; } .view-toggle-button.is-active { background: var(--accent-strong); color: #ffffff; } .view-toggle-icon { width: 1rem; height: 1rem; display: inline-flex; align-items: center; justify-content: center; background-color: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .view-toggle-icon--rows { mask-image: url("../icon/rows-3.svg"); -webkit-mask-image: url("../icon/rows-3.svg"); } .view-toggle-icon--columns { mask-image: url("../icon/columns-2.svg"); -webkit-mask-image: url("../icon/columns-2.svg"); } .inventory-catalog { gap: 1.45rem; } .inventory-catalog .car-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; padding: 0 0 1.45rem; scroll-margin-top: 6.5rem; } .inventory-catalog .car-media { min-width: 0; } .inventory-catalog .car-art, .inventory-catalog .car-photo { width: 100%; height: 100%; min-height: 0; border-radius: 1.5rem; } .inventory-catalog .car-body { gap: 0.9rem; } .inventory-catalog .car-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; } .inventory-catalog .car-title { margin: 0; font-size: clamp(1.55rem, 2.6vw, 2.3rem); max-width: none; } .inventory-catalog .listing-badge { display: inline-flex; align-items: center; min-height: 1.9rem; padding: 0.26rem 0.68rem; border-radius: 999px; background: var(--accent); color: #ffffff; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .inventory-catalog .car-highlight { margin: 0; color: var(--accent-strong); font-weight: 600; font-size: 0.95rem; line-height: 1.4; } .inventory-catalog .car-meta-line, .inventory-catalog .car-facts { display: flex; flex-wrap: wrap; gap: 0.45rem 0.95rem; color: var(--text-soft); font-size: 0.92rem; } .inventory-catalog .car-meta-line span, .inventory-catalog .car-facts span { position: relative; display: inline-flex; align-items: center; gap: 0.36rem; } /* Ikonka pred vyplneným údajom (year/mileage/fuel/prevodovka/výkon/spotreba) */ .inventory-catalog .car-spec[data-ico]::before { content: ""; flex: none; width: 0.98rem; height: 0.98rem; background-color: var(--accent); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .inventory-catalog .car-spec[data-ico="year"]::before { -webkit-mask-image: url("../icon/year.svg"); mask-image: url("../icon/year.svg"); } .inventory-catalog .car-spec[data-ico="mileage"]::before { -webkit-mask-image: url("../icon/mileage.svg"); mask-image: url("../icon/mileage.svg"); } .inventory-catalog .car-spec[data-ico="fuel"]::before { -webkit-mask-image: url("../icon/fuel.svg"); mask-image: url("../icon/fuel.svg"); } .inventory-catalog .car-spec[data-ico="gearbox"]::before { -webkit-mask-image: url("../icon/git-pull-request-create-arrow.svg"); mask-image: url("../icon/git-pull-request-create-arrow.svg"); } .inventory-catalog .car-spec[data-ico="power"]::before { -webkit-mask-image: url("../icon/gauge.svg"); mask-image: url("../icon/gauge.svg"); } .inventory-catalog .car-spec[data-ico="consumption"]::before { -webkit-mask-image: url("../icon/leaf.svg"); mask-image: url("../icon/leaf.svg"); } .inventory-catalog .car-summary { margin: 0; max-width: 42rem; color: var(--text-soft); } /* Lokalita na karte v zozname — sivá ako text */ .car-location { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--text-soft); } .car-location-ico { flex: none; width: 0.95rem; height: 0.95rem; background-color: var(--text-soft); -webkit-mask: url("../icon/map-pin.svg") no-repeat center / contain; mask: url("../icon/map-pin.svg") no-repeat center / contain; } .inventory-catalog .price-row { margin-top: 0.15rem; } .inventory-catalog .price { font-size: clamp(1.45rem, 2.2vw, 1.85rem); } .inventory-catalog[data-view="list"] .car-card { grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.76fr); gap: 1.35rem; align-items: center; } .inventory-catalog[data-view="list"] .car-media { order: 1; } .inventory-catalog[data-view="list"] .car-body { order: 2; } .inventory-catalog[data-view="list"] .car-header { display: grid; gap: 0.55rem; align-items: start; } .inventory-catalog[data-view="list"] .listing-badge { justify-self: start; } .inventory-catalog[data-view="cards"] { grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); gap: 2rem 1.65rem; } .inventory-catalog[data-view="cards"] .car-card { position: relative; display: grid; grid-template-columns: 1fr; align-items: start; gap: 0.95rem; border: 0; padding: 0; } .inventory-catalog[data-view="cards"] .car-art { min-height: 0; } .inventory-catalog[data-view="cards"] .listing-badge { position: absolute; top: 0.95rem; right: 0.95rem; z-index: 2; } .inventory-catalog[data-view="cards"] .car-header { display: block; } .inventory-catalog[data-view="cards"] .car-summary { max-width: none; } .cars-footer-panel { box-shadow: none; } .filter-modal { display: block; overflow: hidden; padding: 0; background: var(--bg); backdrop-filter: none; } .filter-modal-scroll { height: 100%; overflow-y: auto; padding: 0 1.25rem 1.25rem; } .filter-modal-gradient { position: sticky; top: 0; height: var(--filter-modal-gradient-height); margin-bottom: calc(-1 * var(--filter-modal-gradient-height)); background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) calc(100% - var(--filter-modal-gradient-tail)), rgba(255, 255, 255, 0) 100% ); pointer-events: none; z-index: 4; } .filter-modal-shell { width: min(100%, 72rem); margin: 0 auto; padding-top: max(1rem, calc(env(safe-area-inset-top, 0px) + 1rem)); padding-bottom: max(2.5rem, calc(env(safe-area-inset-bottom, 0px) + 2.5rem)); display: grid; gap: 1rem; outline: none; } .filter-modal-toolbar { position: sticky; top: max(1rem, calc(env(safe-area-inset-top, 0px) + 1rem)); z-index: 5; padding: 0.9rem 1rem; border: 1px solid var(--accent); border-radius: 1.5rem; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(18px); display: grid; gap: 0.85rem; } .filter-modal-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; } .filter-modal-toolbar-row--controls { align-items: center; } .filter-modal-nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; } .filter-modal-nav::-webkit-scrollbar { display: none; } .filter-nav-link { min-height: 2.5rem; padding: 0.55rem 0.9rem; border: 1px solid transparent; border-radius: 999px; background: var(--surface); color: var(--text-soft); font: inherit; font-size: 0.92rem; font-weight: 500; cursor: pointer; transition: background-color 180ms ease, color 180ms ease; } .filter-nav-link:hover, .filter-nav-link:focus-visible, .filter-nav-link.is-active { border-color: transparent; background: var(--surface-muted); color: var(--text); outline: none; } .filter-toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .toolbar-button-icon { width: 1rem; height: 1rem; display: inline-flex; align-items: center; justify-content: center; background-color: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .toolbar-button-icon--bookmark { mask-image: url("../icon/bookmark.svg"); -webkit-mask-image: url("../icon/bookmark.svg"); } .toolbar-button-icon--search { mask-image: url("../icon/search.svg"); -webkit-mask-image: url("../icon/search.svg"); } .filter-save-search { gap: 0.55rem; } .filter-results-submit { gap: 0.55rem; white-space: nowrap; } .filter-results-icon { flex: none; } .filter-results-count { font-variant-numeric: tabular-nums; } .filter-modal-close { position: fixed; top: max(1rem, calc(env(safe-area-inset-top, 0px) + 0.8rem)); right: max(1rem, calc(env(safe-area-inset-right, 0px) + 0.8rem)); left: auto; bottom: auto; margin: 0; width: 2.8rem; height: 2.8rem; font-size: 1.5rem; color: #ffffff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); z-index: 90; } .app-modal-card.filter-modal-card { width: 100%; max-height: none; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 0; overflow: visible; justify-items: stretch; text-align: left; } :root { --filter-stack-gap: 1.15rem; --filter-field-gap: 0.55rem; } .filter-form { min-height: auto; overflow: visible; display: grid; gap: var(--filter-stack-gap); padding-right: 0; } .filter-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--filter-stack-gap); padding-bottom: var(--filter-form-tail-space, 0px); } .filter-section { padding: 1.15rem 1.2rem; border: 1px solid var(--line); border-radius: 1.45rem; background: var(--surface-muted); display: grid; gap: var(--filter-stack-gap); scroll-margin-top: 9rem; } .filter-section--full { grid-column: 1 / -1; } .filter-section-head { margin: 0.2rem 0 0.45rem; } .filter-section-head h3 { margin: 0; } .filter-field-grid, .filter-inline-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--filter-stack-gap); } .filter-field-grid--stacked { grid-template-columns: 1fr; } .filter-field, .filter-field-group { display: grid; gap: var(--filter-field-gap); } .filter-field--full { grid-column: 1 / -1; } .filter-field > span, .filter-group-label { font-size: 0.79rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); } /* Ikony pri labeli filter polí (rovnaké ako pri tvorbe inzerátu) */ .filter-field[data-ico] > span, .filter-field-group[data-ico] > .filter-group-label { display: flex; align-items: center; gap: 0.42rem; } .filter-field[data-ico] > span::before, .filter-field-group[data-ico] > .filter-group-label::before { content: ""; flex: none; width: 0.95rem; height: 0.95rem; background-color: var(--accent); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .filter-field[data-ico="crown"] > span::before { -webkit-mask-image: url("../icon/crown.svg?v=20260611a"); mask-image: url("../icon/crown.svg?v=20260611a"); } .filter-field[data-ico="picture-in-picture-2"] > span::before { -webkit-mask-image: url("../icon/picture-in-picture-2.svg?v=20260611a"); mask-image: url("../icon/picture-in-picture-2.svg?v=20260611a"); } .filter-field[data-ico="car"] > span::before { -webkit-mask-image: url("../icon/car.svg?v=20260611a"); mask-image: url("../icon/car.svg?v=20260611a"); } .filter-field[data-ico="price"] > span::before { -webkit-mask-image: url("../icon/circle-dollar-sign.svg"); mask-image: url("../icon/circle-dollar-sign.svg"); } .filter-field[data-ico="year"] > span::before { -webkit-mask-image: url("../icon/year.svg"); mask-image: url("../icon/year.svg"); } .filter-field[data-ico="check"] > span::before { -webkit-mask-image: url("../icon/check.svg"); mask-image: url("../icon/check.svg"); } .filter-field[data-ico="gauge"] > span::before { -webkit-mask-image: url("../icon/gauge.svg"); mask-image: url("../icon/gauge.svg"); } .filter-field[data-ico="cylinder"] > span::before { -webkit-mask-image: url("../icon/cylinder.svg?v=20260611a"); mask-image: url("../icon/cylinder.svg?v=20260611a"); } .filter-field[data-ico="tank"] > span::before { -webkit-mask-image: url("../icon/tank.svg?v=20260611a"); mask-image: url("../icon/tank.svg?v=20260611a"); } .filter-field[data-ico="ethernet-port"] > span::before { -webkit-mask-image: url("../icon/ethernet-port.svg?v=20260611a"); mask-image: url("../icon/ethernet-port.svg?v=20260611a"); } .filter-field[data-ico="weight"] > span::before { -webkit-mask-image: url("../icon/weight.svg?v=20260611a"); mask-image: url("../icon/weight.svg?v=20260611a"); } .filter-field[data-ico="leaf"] > span::before { -webkit-mask-image: url("../icon/leaf.svg"); mask-image: url("../icon/leaf.svg"); } .filter-field[data-ico="paint-bucket"] > span::before { -webkit-mask-image: url("../icon/paint-bucket.svg?v=20260611a"); mask-image: url("../icon/paint-bucket.svg?v=20260611a"); } .filter-field[data-ico="tow"] > span::before { -webkit-mask-image: url("../icon/tow.svg?v=20260611a"); mask-image: url("../icon/tow.svg?v=20260611a"); } .filter-field[data-ico="smartphone-nfc"] > span::before { -webkit-mask-image: url("../icon/smartphone-nfc.svg?v=20260611a"); mask-image: url("../icon/smartphone-nfc.svg?v=20260611a"); } .filter-field[data-ico="circle-gauge"] > span::before { -webkit-mask-image: url("../icon/circle-gauge.svg?v=20260611a"); mask-image: url("../icon/circle-gauge.svg?v=20260611a"); } .filter-field[data-ico="origami"] > span::before { -webkit-mask-image: url("../icon/origami.svg?v=20260611a"); mask-image: url("../icon/origami.svg?v=20260611a"); } .filter-field[data-ico="fan"] > span::before { -webkit-mask-image: url("../icon/fan.svg?v=20260611a"); mask-image: url("../icon/fan.svg?v=20260611a"); } .filter-field-group[data-ico="fuel"] > .filter-group-label::before { -webkit-mask-image: url("../icon/fuel.svg"); mask-image: url("../icon/fuel.svg"); } .filter-field-group[data-ico="4x4"] > .filter-group-label::before { -webkit-mask-image: url("../icon/4x4.svg?v=20260611a"); mask-image: url("../icon/4x4.svg?v=20260611a"); } .filter-field-group[data-ico="gearbox"] > .filter-group-label::before { -webkit-mask-image: url("../icon/git-pull-request-create-arrow.svg"); mask-image: url("../icon/git-pull-request-create-arrow.svg"); } .filter-field input, .filter-field select { min-height: 2.85rem; padding: 0.72rem 0.92rem; border: 1px solid var(--line); border-radius: 1rem; background-color: var(--surface); color: var(--text); font: inherit; } .filter-field select { padding-right: 2.35rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25 7 9.25l4-4' stroke='%232f2f2f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 0.95rem center; background-repeat: no-repeat; appearance: none; } .range-fields select.is-placeholder { color: rgba(47, 47, 47, 0.46); font-style: italic; } .select-unit { position: relative; } .select-unit select { width: 100%; padding-right: 4.85rem; } .select-unit-label { position: absolute; top: 50%; right: 2.35rem; transform: translateY(-50%); font-size: 0.86rem; font-weight: 600; color: var(--text-soft); pointer-events: none; } .range-block, .range-fields, .dual-fields { display: grid; gap: 0.7rem; } .range-fields, .dual-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter-field--full .range-fields, .filter-field--full .range-block { width: 100%; max-width: 24rem; } .filter-field.filter-field--full .range-block.range-block--unit { width: fit-content; max-width: none; grid-template-columns: 24rem auto; align-items: end; } .filter-field.filter-field--full .range-block.range-block--unit .range-fields { width: 24rem; max-width: 24rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .range-block--unit .unit-switch { justify-self: end; flex-shrink: 0; } .unit-switch { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } .unit-option { position: relative; } .unit-option input { position: absolute; opacity: 0; pointer-events: none; } .unit-option span { min-height: 2.25rem; padding: 0.45rem 0.85rem; border-radius: 999px; display: grid; place-items: center; color: var(--text-soft); font-weight: 700; } .unit-option input:checked + span { background: var(--accent); color: #ffffff; } .filter-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.3rem 0.45rem; } .filter-group-search { min-height: 2.6rem; margin-bottom: 0.2rem; padding: 0.6rem 0.9rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem; } .filter-group-search::placeholder { color: var(--text-soft); } .filter-group-search:focus-visible { outline: none; border-color: var(--accent); } .filter-check.is-search-hidden { display: none; } .filter-subgroups { display: grid; gap: 1.1rem; } .filter-subgroup { display: grid; gap: 0.5rem; } .filter-subgroup-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.2rem; cursor: pointer; user-select: none; } .filter-subgroup-label::after { content: "+"; font-size: 1.15rem; line-height: 1; font-weight: 700; color: var(--accent-strong); } .filter-subgroup.is-open > .filter-subgroup-label::after { content: "−"; } /* Default zbalené — rozbalí klik na label alebo hľadanie */ .filter-subgroup:not(.is-open) > .filter-check-grid { display: none; } .filter-subgroup.is-search-hidden { display: none; } /* ===== Farebné swatche (výber farby) ===== */ .color-swatches { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; } .color-swatch { position: relative; cursor: pointer; display: inline-flex; align-items: center; } .color-swatch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .color-swatch-dot { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--sw, #ccc); border: 1px solid rgba(127, 127, 127, 0.4); transition: transform 160ms ease, box-shadow 160ms ease; } .color-swatch:hover .color-swatch-dot { transform: scale(1.1); } .color-swatch:has(input:checked) .color-swatch-dot, .color-swatch input:focus-visible + .color-swatch-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-strong); } /* Hover tooltip s názvom farby */ .color-swatch[data-name]::after { content: attr(data-name); position: absolute; bottom: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%) translateY(4px); padding: 0.22rem 0.5rem; border-radius: 7px; background: var(--text); color: var(--surface); font-size: 0.72rem; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 6; transition: opacity 140ms ease, transform 140ms ease; } .color-swatch[data-name]:hover::after, .color-swatch[data-name]:focus-within::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* „Nevadí / Nezadané" pill */ .color-swatch--none span { min-height: 2.1rem; padding: 0 0.95rem; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 600; color: var(--text-soft); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .color-swatch--none:hover span { border-color: var(--line-strong); } .color-swatch--none:has(input:checked) span { border-color: var(--accent); color: var(--text); background: var(--accent-soft); } .color-swatch--none input:focus-visible + span { outline: 2px solid var(--accent-strong); outline-offset: 2px; } .filter-check-grid--compact { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); } .filter-check-grid--chips { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .filter-check-grid--vehicle-types { grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr)); gap: 0.75rem; } .filter-check-grid--compact .filter-check, .filter-check-grid--chips .filter-check { min-height: 2.7rem; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); align-items: center; justify-content: center; gap: 0; position: relative; text-align: center; } .filter-check-grid--compact .filter-check input, .filter-check-grid--chips .filter-check input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; } .filter-check-grid--vehicle-types .filter-check { min-height: 6.3rem; padding: 0; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface); align-items: stretch; justify-content: stretch; position: relative; text-align: center; } .filter-check-grid--vehicle-types .filter-check input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; } .vehicle-type-option { width: 100%; min-height: 100%; padding: 0.8rem 0.7rem 0.75rem; display: grid; justify-items: center; align-content: center; gap: 0.5rem; } .vehicle-type-option__icon { width: 2.75rem; height: 2.75rem; display: block; background-color: var(--text-soft); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .vehicle-type-option__label { max-width: none; font-size: 0.82rem; font-weight: 700; line-height: 1.2; } .filter-check-grid--vehicle-types .filter-check:has(input:checked) { border-color: var(--accent); background: var(--accent); color: #ffffff; } .filter-check-grid--vehicle-types .filter-check:has(input:checked) .vehicle-type-option__icon { background-color: #ffffff; } .filter-check-grid--vehicle-types .filter-check:has(input:checked) .vehicle-type-option__label { color: #ffffff; } .vehicle-type-option__icon--all { mask-image: url("../icon/gallery-thumbnails.svg"); -webkit-mask-image: url("../icon/gallery-thumbnails.svg"); } .vehicle-type-option__icon--combi { mask-image: url("../icon/car_types/combi.svg"); -webkit-mask-image: url("../icon/car_types/combi.svg"); } .vehicle-type-option__icon--hatchback { mask-image: url("../icon/car_types/hatchback.svg"); -webkit-mask-image: url("../icon/car_types/hatchback.svg"); } .vehicle-type-option__icon--coupe { mask-image: url("../icon/car_types/coupe.svg"); -webkit-mask-image: url("../icon/car_types/coupe.svg"); } .vehicle-type-option__icon--minivan { mask-image: url("../icon/car_types/minivan.svg"); -webkit-mask-image: url("../icon/car_types/minivan.svg"); } .vehicle-type-option__icon--sedan { mask-image: url("../icon/car_types/limousine.svg"); -webkit-mask-image: url("../icon/car_types/limousine.svg"); } .vehicle-type-option__icon--suv { mask-image: url("../icon/car_types/suv.svg"); -webkit-mask-image: url("../icon/car_types/suv.svg"); } .vehicle-type-option__icon--convertible { mask-image: url("../icon/car_types/convertible.svg"); -webkit-mask-image: url("../icon/car_types/convertible.svg"); } /* ===== Filter: kompaktné pole Značka + rozbaľovací zoznam s logami ===== */ .filter-brand-select-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .filter-field--brand { position: relative; } /* Trigger vyzerá ako bežný