/* elektrobikes.sk — dizajnový systém „prístrojový panel". * * Vizuálny jazyk si berie z toho, čo má zákazník pripnuté na riadidlách: * ohraničené displeje, čísla v monospace, verzálkové mikropopisky, vysoký * kontrast, žiadna ozdoba. Chladné neutrálne plochy, aby farbu na stránke * nosili bicykle — tie sú takmer všetky sýte. * * Písma sú hostované lokálne (GDPR, žiadne volanie na Google) a orezané * na latin + latin-ext. */ /* ---------------------------------------------------------------- písma */ /* Archivo — displej: H1/H2, cena, hero. Variabilná os hmotnosti 500–700. Os šírky (wdth) sa vedome nesťahuje: stála 87 kB na subset namiesto 34 kB, a rozšírené rezy by sa použili na pár krátkych titulkov. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* IBM Plex Sans — text, navigácia, popisky, tlačidlá. */ @font-face { font-family: 'Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex-sans-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex-sans-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/plex-sans-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/plex-sans-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* IBM Plex Mono — dáta: hodnoty na štítku, ceny v tabuľkách, počty, SKU. */ @font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plex-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plex-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metricky zladené záložné písma. Hodnoty sú vypočítané z reálnych woff2 súborov (fontTools: unitsPerEm, sTypoAscender/Descender, priemerná šírka minusky), nie odhadnuté — inak pri swape preskočí layout. */ @font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust: 103.5%; ascent-override: 87.8%; descent-override: 21%; line-gap-override: 0%; } @font-face { font-family: 'Plex Sans Fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust: 100.5%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; } @font-face { font-family: 'Plex Mono Fallback'; src: local('Liberation Mono'), local('Courier New'), local('DejaVu Sans Mono'); size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; } /* ---------------------------------------------------------------- tokeny */ :root { /* plochy — chladné, odsýtené, farbu nechávajú bicyklom */ --c-ink: #0F1419; /* primárny text */ --c-graphite: #2A3138; /* tmavé panely, pätička */ --c-steel: #5A656F; /* sekundárny text, vlasové linky */ --c-fog: #EDF0F2; /* pozadie stránky */ --c-paper: #FFFFFF; /* karty */ /* brand — hlbší, chladnejší smrek. JEDNA úloha: toto je akcia. */ --c-brand: #0B5D34; --c-brand-lift: #0F7A45; /* hover / active */ --c-brand-wash: #E8F2EC; /* vybrané stavy, tiché čipy */ /* nedostupnosť — jediná hlasná farba na webe, ~6 produktov */ --c-alert: #C2410C; --line: 1px solid color-mix(in oklab, var(--c-steel) 28%, transparent); --line-color: color-mix(in oklab, var(--c-steel) 28%, transparent); --r-sm: 4px; --r-md: 8px; --r-lg: 14px; /* rozostupy — základ 4 px, žiadne náhodné hodnoty */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; /* Dve šírky, žiadne iné: stránka a text. Predtým sa stránka menila na šírku uprostred scrollovania. */ --w-page: 76rem; --w-prose: 42rem; /* typografická stupnica */ --t-hero: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem); --t-h2: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); --t-h3: clamp(1.125rem, 1rem + .6vw, 1.375rem); --t-body: 1rem; --t-small: .8125rem; --t-micro: .6875rem; --display: 'Archivo', 'Archivo Fallback', system-ui, sans-serif; --body: 'Plex Sans', 'Plex Sans Fallback', system-ui, sans-serif; --mono: 'Plex Mono', 'Plex Mono Fallback', ui-monospace, monospace; } /* ---------------------------------------------------------------- základ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--body); font-size: var(--t-body); color: var(--c-ink); background: var(--c-paper); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* je len obal na výber formátu, v rozložení nemá čo robiť. Bez tohto by `height: 100 %` na fotke karty počítalo výšku proti riadkovému rodičovi a mriežka by sa rozsypala. */ picture { display: contents; } a { color: inherit; text-decoration: none; } p { text-wrap: pretty; } h1, h2, h3, h4 { font-family: var(--display); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; margin: 0 0 .5em; } h1 { font-size: var(--t-hero); font-weight: 700; } h2 { font-size: var(--t-h2); font-weight: 700; } h3 { font-size: var(--t-h3); font-weight: 600; } /* Fokus je jediné ďalšie miesto, kde smie svietiť brand. */ :focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: var(--r-sm); } /* Preskočenie navigácie (WCAG 2.4.1). Kto chodí po webe klávesnicou alebo čítačkou, prešiel doteraz na každej stránke sedem odkazov v hlavičke, kým sa dostal k bicyklom. Odkaz je prvý v poradí a vidieť ho až vo fokuse — inak by zavadzal v dizajne, ktorý hlavičku drží čistú. */ .skip { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 100; transform: translateY(-200%); padding: var(--s-3) var(--s-5); border-radius: var(--r-sm); background: var(--c-ink); color: var(--c-paper); font-weight: 600; font-size: .95rem; } .skip:focus { transform: none; } /* Cieľ preskočenia musí prevziať fokus, inak ho časť prehliadačov presunie len opticky a ďalší tabulátor pokračuje zhora. */ main:focus { outline: none; } .wrap { max-width: var(--w-page); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .muted { color: var(--c-steel); } /* Mikropopisok — verzálky, mono, presne ako popis pod hodnotou na displeji. */ .eyebrow { display: inline-block; font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-steel); margin-bottom: var(--s-2); } .lede { font-size: 1.1rem; color: var(--c-graphite); max-width: 54ch; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-paper) 92%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: var(--line); } .header-inner { display: flex; align-items: center; gap: var(--s-8); height: 68px; } .logo { display: flex; align-items: center; gap: var(--s-2); font-family: var(--display); font-weight: 700; font-size: 1.16rem; } .logo-mark { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--c-brand); } .dot { color: var(--c-brand); } .site-nav { display: flex; gap: var(--s-6); margin-left: auto; font-size: .94rem; } .site-nav a { color: var(--c-graphite); padding-block: var(--s-2); } .site-nav a:hover { color: var(--c-ink); } .site-nav a[aria-current="page"] { color: var(--c-brand); font-weight: 600; } .header-cta { padding: var(--s-2) var(--s-4); border: var(--line); border-radius: var(--r-md); font-size: .9rem; font-weight: 600; } .header-cta:hover { border-color: var(--c-ink); } @media (max-width: 900px) { .site-nav { display: none; } .header-cta { margin-left: auto; } } /* ---------- breadcrumbs ---------- */ .crumbs { border-bottom: var(--line); background: var(--c-fog); } .crumbs ol { max-width: var(--w-page); margin-inline: auto; padding: var(--s-3) clamp(1rem, 4vw, 2rem); list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-small); color: var(--c-steel); } .crumbs a { padding-block: .15rem; } .crumbs a:hover { color: var(--c-ink); text-decoration: underline; } .crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line-color); } /* ---------- hero ---------- Tvrdenie webu je „bicykel máme tu“. Fotka to má dokazovať, nie ukazovať výrez produktu na bielom. Dokým nie sú fotky z predajne, je tu akčná fotka z popisu (V9) — provizórium, ale pravdivejšie než gravel bike na bielom v katalógu, kde je gravelov presne jeden. */ .hero { position: relative; background: var(--c-graphite); isolation: isolate; } .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; z-index: -2; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, color-mix(in srgb, var(--c-ink) 92%, transparent) 0%, color-mix(in srgb, var(--c-ink) 78%, transparent) 46%, color-mix(in srgb, var(--c-ink) 30%, transparent) 100%); } .hero-inner { display: grid; gap: var(--s-6); max-width: 46rem; padding-block: clamp(3rem, 8vw, 6rem); color: var(--c-paper); } .hero-inner h1 { color: var(--c-paper); margin: 0; } .hero-inner .lede { color: color-mix(in srgb, var(--c-paper) 86%, transparent); } /* Počet je živý údaj z katalógu — preto vyzerá ako údaj na displeji, nie ako marketingová veta. */ .hero-readout { display: flex; align-items: baseline; gap: var(--s-3); } .hero-count { font-family: var(--mono); font-weight: 500; line-height: 1; font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem); color: var(--c-paper); font-variant-numeric: tabular-nums; } .hero-count-label { font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--c-paper) 78%, transparent); max-width: 7em; line-height: 1.3; } .hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; margin: 0; } /* V hero sekcii dedí text bielu farbu, takže obrysové tlačidlo musí mať priehľadné pozadie — inak je z neho biely text na bielom. */ .hero .btn-ghost { background: color-mix(in srgb, var(--c-ink) 35%, transparent); border-color: color-mix(in srgb, var(--c-paper) 55%, transparent); color: var(--c-paper); } .hero .btn-ghost:hover { border-color: var(--c-paper); background: color-mix(in srgb, var(--c-ink) 55%, transparent); } .hero-note { font-size: var(--t-small); color: color-mix(in srgb, var(--c-paper) 76%, transparent); margin: 0; } /* Tretí, tichší odkaz — nie tretie tlačidlo. */ .hero-link { font-size: .95rem; font-weight: 600; color: var(--c-paper); text-decoration: underline; text-underline-offset: 3px; padding: var(--s-2) 0; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--s-3) var(--s-6); border-radius: var(--r-md); font-weight: 600; font-size: .98rem; transition: background .15s, border-color .15s; } .btn-primary { background: var(--c-brand); color: var(--c-paper); } .btn-primary:hover { background: var(--c-brand-lift); } .btn-ghost { border: var(--line); background: var(--c-paper); } .btn-ghost:hover { border-color: var(--c-ink); } /* ---------- trust ---------- Štyri najlepšie dôvody kúpiť u teba boli svetlosivý text na svetlosivom pruhu — teda vizuálne najmenej dôležitá vec na stránke, a k tomu padali na kontraste. Rovnaký obsah, čitateľne: ink pre popis, steel pre vetu, ikona, papier a vlasové linky. */ .trust { border-block: var(--line); background: var(--c-paper); } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: var(--s-8); } .trust-grid > div { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-3); align-content: start; padding-inline: var(--s-6); } .trust-grid > div + div { border-left: var(--line); } .trust-grid > div:first-child { padding-left: 0; } .trust-icon { grid-row: span 2; color: var(--c-brand); } .trust-icon svg { width: 22px; height: 22px; display: block; } .trust-grid strong { font-size: .98rem; font-weight: 600; color: var(--c-ink); align-self: center; } .trust-grid span { font-size: var(--t-small); color: var(--c-steel); line-height: 1.55; } .trust-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 860px) { .trust-grid, .trust-3 { grid-template-columns: 1fr; gap: var(--s-6); } .trust-grid > div + div { border-left: 0; border-top: var(--line); padding-top: var(--s-6); } .trust-grid > div { padding-inline: 0; } } /* ---------- sections ---------- */ .section { padding-block: var(--s-16) 0; } .section:last-of-type { padding-bottom: var(--s-16); } /* Vlasová linka nad každým nadpisom sekcie — stránka má čítať ako štruktúrovaný dokument, nie ako stoh dlaždíc. */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-8); padding-top: var(--s-4); border-top: var(--line); } .section-link { font-weight: 600; font-size: .95rem; color: var(--c-ink); } .section-link:hover { text-decoration: underline; } .page-head { padding-block: clamp(2rem, 4vw, 3.2rem); border-bottom: var(--line); } .page-head .count { font-family: var(--mono); font-size: var(--t-small); color: var(--c-steel); margin-top: var(--s-2); } .listing { padding-block: var(--s-8); } /* ---------- filtre na výpise (Fáza 5) ---------- Ten istý slúži dvakrát: na širokej obrazovke ho prepíšeme na bočný stĺpec, na úzkej ho JS otvorí cez showModal() ako zásuvku. Vďaka tomu je pasca na fokus aj zatváranie Escape vecou prehliadača, nie nášho kódu. Bez JS sa ovládacie prvky nevykreslia vôbec — mŕtve zaškrtávatko je horšie než žiadne. Príznak `data-js` nastavuje jednoriadkový skript v , teda ešte pred prvým vykreslením, takže nič nepreskočí (CLS). */ .listing-bar, .chips, .facet-note { display: none; } [data-js] .listing-bar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding-top: var(--s-4); border-top: var(--line); margin-bottom: var(--s-6); } [data-js] .chips:not([hidden]) { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); } [data-js] .facet-note:not([hidden]) { display: block; font-size: var(--t-small); color: var(--c-steel); margin-bottom: var(--s-6); } .listing-bar .count { font-family: var(--mono); font-size: var(--t-small); color: var(--c-steel); margin: 0; margin-right: auto; } .sort { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); } .sort span { color: var(--c-steel); } .sort select { font: inherit; font-size: var(--t-small); color: var(--c-ink); padding: var(--s-2) var(--s-3); border: var(--line); border-radius: var(--r-sm); background: var(--c-paper); cursor: pointer; } /* Čip = aktívny filter aj tlačidlo na jeho zrušenie. Krížik je súčasťou nápisu, nie druhý cieľ vedľa neho. */ .chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border: var(--line); border-radius: 999px; background: var(--c-brand-wash); color: var(--c-ink); font: inherit; font-size: var(--t-small); cursor: pointer; } .chip::after { content: "✕"; font-size: .8em; color: var(--c-steel); } .chip:hover { border-color: var(--c-ink); } .filter-open { font: inherit; font-size: var(--t-small); font-weight: 600; padding: var(--s-2) var(--s-4); border: var(--line); border-radius: var(--r-sm); background: var(--c-paper); color: var(--c-ink); cursor: pointer; } /* --- panel --- */ /* Prehliadač dáva vlastné rozmery pre modálne okno: `margin: auto` a `width: fit-content`. V mriežke má automatický okraj prednosť pred `align-items: start`, takže sa panel zvisle vycentroval do stredu svojho stĺpca — teda ~7 600 px pod ohyb. Preto sa rozmery vracajú na normál a rozloženie si riadime sami. */ .facets { max-width: none; max-height: none; width: auto; height: auto; margin: 0; border: 0; padding: 0; background: none; color: var(--c-ink); } .facets-head { display: none; } .facets-foot { display: none; } .facet { border: 0; padding: 0; margin: 0 0 var(--s-6); } .facet legend { font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--c-steel); padding: 0 0 var(--s-2); border-bottom: var(--line); width: 100%; margin-bottom: var(--s-3); } .facet-group { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--c-steel); margin: var(--s-3) 0 var(--s-2); } .facet-opts { display: flex; flex-direction: column; gap: var(--s-2); } .facet-opt { display: flex; align-items: center; gap: var(--s-2); font-size: .95rem; cursor: pointer; } .facet-opt input { accent-color: var(--c-brand); width: 1.05rem; height: 1.05rem; flex: none; } .facet-lbl { flex: 1; } .facet-n { font-family: var(--mono); font-size: var(--t-micro); color: var(--c-steel); font-variant-numeric: tabular-nums; } .facet .size-help { margin-top: var(--s-3); } /* --- dvojitý posuvník ceny --- Dva nad sebou. Zdvíhajú sa len úchyty (pointer-events), takže sa dá chytiť ktorýkoľvek aj keď sú blízko seba. */ .range-pair { position: relative; height: 1.75rem; margin-bottom: var(--s-2); } .range-pair::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); background: var(--c-fog); border: var(--line); border-radius: 999px; } .range-pair input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .range-pair input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--c-brand); border: 2px solid var(--c-paper); cursor: grab; } .range-pair input::-moz-range-thumb { pointer-events: auto; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--c-brand); border: 2px solid var(--c-paper); cursor: grab; } .range-pair input:focus-visible { outline: none; } .range-pair input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--c-brand); outline-offset: 2px; } .range-pair input:focus-visible::-moz-range-thumb { outline: 2px solid var(--c-brand); outline-offset: 2px; } .range-out { font-family: var(--mono); font-size: var(--t-small); color: var(--c-ink); font-variant-numeric: tabular-nums; } /* Zafiltrovaná karta musí zmiznúť aj napriek `.card { display: grid }` — `[hidden]` z UA štýlu by inak prehrala na špecificite. */ .card[hidden] { display: none; } /* --- rozloženie mimo obrazovky sa odloží (Fáza 8) --- Tabuľka parametrov má na detaile cez 40 riadkov a pätička štyri stĺpce; ani jedno nie je pri načítaní vidieť. `contain-intrinsic-size` je tu povinné — bez odhadu výšky by sa posuvník pri dorolovaní preskakoval a CLS by narástlo presne tam, kde ho Fáza 3 znížila na nulu. Platí to na celý prvok naraz: keď je na obrazovke čo i len kúsok, rozloží sa celý. Preto `.faq-item`, a nie `.faq` — zoznam otázok siaha od prvej obrazovky nadol, takže na ňom by pravidlo neurobilo nič. */ .specs-full { content-visibility: auto; contain-intrinsic-size: auto 900px; } .site-footer { content-visibility: auto; contain-intrinsic-size: auto 620px; } .faq-item { content-visibility: auto; contain-intrinsic-size: auto 120px; } /* `content-visibility: auto` na kartách brief žiada, ale sem nepatrí: zapína containment presne ako `container-type`, a ten podľa merania z Fázy 4 vypína subgrid — karty by prestali držať riadok. Namiesto toho sa vo Fáze 8 rozloží menej kariet naraz (`card-rest`). Podmienka `[data-js]` je podstatná: bez JavaScriptu tlačidlo „Zobraziť ďalšie“ nefunguje, takže vtedy musia byť v mriežke všetky karty. */ [data-js] .card-rest { display: none; } .more-wrap { display: none; } [data-js] .more-wrap { display: flex; justify-content: center; margin-top: var(--s-8); } .btn-more { font: inherit; font-weight: 600; font-size: .98rem; display: inline-flex; align-items: center; justify-content: center; padding: var(--s-3) var(--s-8); border: var(--line); border-radius: var(--r-md); background: var(--c-paper); color: var(--c-ink); cursor: pointer; transition: border-color .15s; } .btn-more:hover { border-color: var(--c-ink); } /* --- široká obrazovka: z dialógu je bočný stĺpec --- */ @media (min-width: 900px) { [data-js] .listing-shell.has-facets { display: grid; grid-template-columns: 16rem 1fr; gap: var(--s-8); align-items: start; } [data-js] .facets { display: block; inset: auto; position: sticky; top: var(--s-4); padding-top: var(--s-8); max-height: calc(100dvh - 2 * var(--s-4)); overflow-y: auto; } /* Na desktope zostáva z pätičky panelu len „Zrušiť filtre“ — filtruje sa naživo, takže niet čo potvrdzovať. */ [data-js] .facets-foot { display: flex; padding-top: var(--s-4); border-top: var(--line); } [data-js] .facets-foot [data-role="filter-apply"] { display: none; } .filter-open { display: none; } } /* --- úzka obrazovka: modálna zásuvka zdola --- */ @media (max-width: 899px) { .facets[open] { display: flex; flex-direction: column; position: fixed; inset: auto 0 0 0; width: 100%; max-height: 85dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s-6); /* Základné pravidlo vypína pozadie kvôli bočnému stĺpcu na desktope — zásuvka ho musí mať späť, inak cez ňu presvitá stránka pod ňou. */ background: var(--c-paper); border-top: var(--line); } .facets::backdrop { background: rgb(15 20 25 / .45); } .facets[open] .facets-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); } .facets-head h2 { font-size: var(--t-h3); margin: 0; } .facets-close { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--c-steel); } .facets[open] form { overflow-y: auto; flex: 1; } .facets[open] .facets-foot { display: flex; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--line); margin-top: var(--s-4); } .facets-foot .btn { flex: 1; } /* Zásuvka musí ísť nad lepiaci nákupný pás, nie pod neho. */ .facets[open] { z-index: 40; } } /* ---------- výkonový štítok ---------- Podpisový prvok: ohraničený modul s číslami, ktoré rozhodujú o kúpe. Autorita mu má vychádzať z presnosti, nie z farby — preto vlasové linky, žiadne tiene, žiadne prechody. */ .plate { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--line); border-radius: var(--r-sm); background: var(--c-paper); margin: var(--s-6) 0; } .plate > div { padding: var(--s-3) var(--s-2); display: flex; flex-direction: column; align-items: center; gap: .1rem; text-align: center; } .plate > div + div { border-left: var(--line); } .plate .val { font-family: var(--mono); font-weight: 500; font-size: clamp(1rem, .85rem + .5vw, 1.25rem); color: var(--c-ink); font-variant-numeric: tabular-nums; } .plate .val[data-missing] { color: var(--c-steel); } .plate .lbl { font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-steel); line-height: 1.25; } /* Na karte je štítok stlačený do jedného pásu — nahrádza pôvodné „Shimano · 630Wh“ v bežnom texte. */ .plate-strip { display: flex; gap: var(--s-3); flex-wrap: wrap; padding-inline: var(--s-4); font-family: var(--mono); font-size: var(--t-small); font-weight: 500; color: var(--c-graphite); font-variant-numeric: tabular-nums; margin: var(--s-1) 0 0; } .plate-strip span { white-space: nowrap; } .plate-strip span[data-missing] { color: var(--c-steel); } /* ---------- cards ---------- Riadky kariet musia sedieť napriek rôznej dĺžke názvov a chýbajúcim parametrom (V3). Rieši to subgrid: každá karta preberá výškové koľaje riadku od mriežky, takže názvy, pás parametrov aj ceny sú v jednej línii. Container queries sa tu nepoužívajú zámerne: `container-type` zapne containment, ktorý subgrid vypne. Odmerané v Chrome — dve karty s rovnakým obsahom dali s containmentom 24/24/24 namiesto 18/36/18, teda presne tú stratu zarovnania, ktorú má subgrid opraviť. */ .grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } /* Šesť položiek v štvorstĺpcovej mriežke necháva osirelú dvojicu (V10). */ .grid-3 { grid-template-columns: repeat(3, minmax(15rem, 1fr)); } @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } } .card { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; gap: var(--s-1); border: var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--c-paper); transition: border-color .15s; } .card:hover { border-color: var(--c-ink); } /* Kde subgrid nie je, riadky sa nesmú zosypať — pevná minimálna výška. */ @supports not (grid-template-rows: subgrid) { .card { grid-row: auto; } .card-title { min-height: 2.5em; } .plate-strip { min-height: 1.5em; } } .card-media { position: relative; display: block; background: var(--c-fog); aspect-ratio: 4/3; } .card-media img { width: 100%; height: 100%; object-fit: contain; padding: var(--s-3); } .card-badges { position: absolute; top: var(--s-2); left: var(--s-2); display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; } /* Nedostupnosť je jediná plná farba na stránke. Zľava je typografická (škrtnutá pôvodná cena + tiché percento), nie druhý krik. */ .badge { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: .3rem var(--s-2); border-radius: var(--r-sm); background: var(--c-alert); color: var(--c-paper); } .card-brand { font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--c-steel); padding-inline: var(--s-4); padding-top: var(--s-3); } .card-title { font-family: var(--display); font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.3; padding-inline: var(--s-4); } .card:hover .card-title { text-decoration: underline; } .card-foot { padding: var(--s-2) var(--s-4) var(--s-4); align-self: end; } /* cena: teraz + škrtnutá pôvodná + tiché percento */ .price-block { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; } .price-now { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--c-ink); font-variant-numeric: tabular-nums; } .price-was { font-size: var(--t-small); color: var(--c-steel); text-decoration: line-through; } .price-off { font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; padding: .15rem var(--s-2); border-radius: var(--r-sm); background: var(--c-brand-wash); color: var(--c-brand); } .empty { padding: var(--s-12) 0; color: var(--c-steel); } /* ---------- category cards ---------- */ .cat-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .cat-card { border: var(--line); border-radius: var(--r-md); overflow: hidden; padding-bottom: var(--s-4); background: var(--c-paper); transition: border-color .15s; } .cat-card:hover { border-color: var(--c-ink); } .cat-card img { aspect-ratio: 4/3; object-fit: contain; width: 100%; background: var(--c-fog); padding: var(--s-3); } .cat-name { display: block; font-family: var(--display); font-weight: 600; padding: var(--s-3) var(--s-4) 0; } .cat-more { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4); font-size: var(--t-small); } .cat-more a { color: var(--c-graphite); text-decoration: underline; } .cat-more a:hover { color: var(--c-ink); } .cat-count { display: block; padding: 0 var(--s-4); font-family: var(--mono); font-size: var(--t-small); color: var(--c-steel); } /* ---------- brands ---------- */ .brands { padding-bottom: var(--s-16); } .brand-links { display: flex; flex-wrap: wrap; gap: var(--s-2); } .brand-links a { border: var(--line); border-radius: var(--r-md); padding: var(--s-2) var(--s-4); font-weight: 600; font-size: .93rem; } .brand-links a:hover { border-color: var(--c-ink); } .brand-links span { font-family: var(--mono); color: var(--c-steel); font-weight: 500; margin-left: var(--s-1); } /* ---------- product ---------- */ .product { padding-block: clamp(1.5rem, 4vw, 3rem); } /* Galéria dostáva 56 % šírky obsahu — bicykel má na svojej stránke dominovať, nie sedieť v tretine viewportu s hrubým rámom. */ .product-grid { display: grid; grid-template-columns: 56fr 44fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } @media (max-width: 900px) { .product-grid { grid-template-columns: 1fr; } } /* ---------- galéria ---------- Desktop: lišta náhľadov vľavo, veľká fotka vpravo. Mobil: vodorovný swipe so scroll-snapom a bodkami. Žiadny karusel v JS. */ .gallery { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: var(--s-3); align-items: start; } /* 31 produktov má jedinú fotku — vtedy sa lišta náhľadov negeneruje a fotka musí zaplniť celú šírku, nie stlačiť sa do stĺpca pre náhľady. */ .gallery:not(:has(.rail)) { grid-template-columns: 1fr; } .gallery:not(:has(.rail)) > .card-badges { left: var(--s-3); } /* Výška je odmeraná na celé náhľady (6 × 66 px + medzery), aby posledný viditeľný náhľad nebol prerezaný v polovici bicykla. */ .rail { display: flex; flex-direction: column; gap: var(--s-2); max-height: calc(6 * 66px + 5 * var(--s-2)); overflow-y: auto; scrollbar-width: thin; } .thumb { flex: none; width: 88px; aspect-ratio: 4/3; padding: 0; cursor: pointer; border: var(--line); border-radius: var(--r-sm); background: var(--c-paper); overflow: hidden; } .thumb[aria-current="true"] { border-color: var(--c-ink); } .thumb img { width: 100%; height: 100%; object-fit: contain; } .stage { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; border: var(--line); border-radius: var(--r-md); scrollbar-width: none; } .stage::-webkit-scrollbar { display: none; } .slide { scroll-snap-align: center; border: 0; padding: 0; margin: 0; background: var(--c-paper); cursor: zoom-in; aspect-ratio: 4/3; } .slide img { width: 100%; height: 100%; object-fit: contain; padding: var(--s-2); } .dots { display: none; justify-content: center; gap: var(--s-1); margin-top: var(--s-2); } .dot-ind { width: 6px; height: 6px; border-radius: 50%; background: var(--line-color); } .dot-ind[aria-current="true"] { background: var(--c-ink); } .gallery > .card-badges { top: var(--s-3); left: calc(88px + var(--s-6)); } @media (max-width: 900px) { .gallery { grid-template-columns: 1fr; } .rail { display: none; } .dots { display: flex; } .gallery > .card-badges { left: var(--s-3); } } /* Zväčšenie v natívnom — bez lightbox knižnice. */ .zoom { border: 0; padding: 0; max-width: 96vw; max-height: 96vh; background: var(--c-paper); } .zoom::backdrop { background: rgb(15 20 25 / .82); } .zoom img { max-width: 96vw; max-height: 92vh; object-fit: contain; } .zoom-close { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 1; width: 40px; height: 40px; border: var(--line); border-radius: 50%; background: var(--c-paper); cursor: pointer; font-size: 1rem; color: var(--c-ink); } .product-info h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); } .price-row { display: flex; align-items: baseline; gap: var(--s-3); margin: var(--s-4) 0 var(--s-1); flex-wrap: wrap; } .price { font-family: var(--display); font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); font-weight: 700; font-variant-numeric: tabular-nums; } /* Skladovosť: informácia zostáva, farba prestáva kričať. */ .stock { color: var(--c-ink); font-size: .95rem; margin: 0 0 var(--s-4); display: flex; align-items: center; gap: var(--s-2); } .stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand); flex: none; } .stock[data-out="1"] { color: var(--c-alert); } .stock[data-out="1"]::before { background: var(--c-alert); } .buy-sizes { border: 0; padding: 0; margin: 0; } .sizes-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); } .sizes-head .label { font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-steel); padding: 0; } .sizes { display: flex; flex-wrap: wrap; gap: var(--s-2); } /* Veľkosti sú skutočné radio inputy — klávesnicu a čítačky tak rieši prehliadač. Input je vizuálne skrytý, ale nie pre asistenčné technológie. */ .size { position: relative; min-width: 68px; min-height: 48px; padding: var(--s-2) var(--s-3); cursor: pointer; border: var(--line); border-radius: var(--r-sm); background: var(--c-paper); font-family: var(--mono); font-weight: 500; font-size: .93rem; text-align: center; color: var(--c-ink); display: flex; flex-direction: column; justify-content: center; gap: .1rem; transition: border-color .12s, background .12s; } .size input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; appearance: none; } .size:hover:has(input:not(:disabled)) { border-color: var(--c-ink); } .size:has(input:checked) { border-color: var(--c-brand); background: var(--c-brand-wash); } .size:has(input:focus-visible) { outline: 2px solid var(--c-brand); outline-offset: 2px; } .size-out { color: var(--c-steel); cursor: not-allowed; } .size-out .size-label { text-decoration: line-through; } .size-note { font-size: var(--t-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--c-alert); text-decoration: none; } .size-hint { font-size: var(--t-small); color: var(--c-steel); margin: var(--s-3) 0 0; } .size-help { border: 0; background: none; padding: .2rem 0; cursor: pointer; font: inherit; font-size: var(--t-small); color: var(--c-ink); text-decoration: underline; min-height: 24px; } /* ---------- popovers (veľkosti, splátky) ---------- */ .popover { max-width: min(460px, 92vw); padding: var(--s-6); border: var(--line); border-radius: var(--r-md); background: var(--c-paper); color: var(--c-ink); } .popover::backdrop { background: rgb(15 20 25 / .35); } .popover h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); } .popover-close { float: right; width: 32px; height: 32px; margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) 0 0; border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--c-steel); } .chart { width: 100%; border-collapse: collapse; margin-bottom: var(--s-3); } .chart th, .chart td { text-align: left; padding: var(--s-2) var(--s-2) var(--s-2) 0; border-bottom: var(--line); font-size: var(--t-small); } .chart th { font-family: var(--mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--c-steel); font-weight: 500; } .chart td { font-family: var(--mono); } .chart td:first-child { color: var(--c-graphite); } .fine { font-size: var(--t-small); color: var(--c-steel); line-height: 1.6; margin: 0 0 var(--s-2); } .fine a { color: var(--c-ink); font-weight: 600; text-decoration: underline; } .fine-link { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: var(--t-small); color: var(--c-steel); text-decoration: underline; } .financing { font-size: .95rem; color: var(--c-graphite); margin: 0 0 var(--s-3); } .badge-inline { display: inline-block; margin-left: var(--s-1); vertical-align: .1em; } /* `.buy` je raz (jediná veľkosť, funguje bez JS) a raz