/* * ============================================================ * 00 – README / MAPA CSS SOUBORŮ * Projekt: PRIMAKOUPELNY.CZ * Pořadí načítání: 01 → 02 → 03 → 04 → 05 * Poslední revize: 2026-04 (optimalizace a refaktoring) * ============================================================ * * Všechny soubory sdílejí CSS custom properties definované * v 01-zaklad-typografie.css (:root). Přidáváte-li nový prvek, * vždy nejprve zkontrolujte, zda vhodná proměnná již existuje. * * GLOBÁLNÍ REFERENCE – proměnné dostupné ve všech souborech: * * Primární paleta: * --color-primary: #00a8ee ← modrá, hlavní brand * --color-primary-dark: #0F86B8 ← hover stav modré * --color-primary-light: #d6f1fd ← světlé podbarvení * --color-primary-bg: #ecf5fe ← jemné modré pozadí * --color-primary-hover: #D9EBFD ← hover pozadí * * Text a UI: * --color-text: #24242E ← hlavní text * --color-text-muted: #A3A3A3 ← doplňkový / muted text * --color-border: #E4E4E4 ← hranice prvků * --color-bg-light: #F6F6F6 ← světlé pozadí * --color-bg-subtle: #F9F9F9 ← velmi jemné pozadí * --color-flag: #ff7925 ← oranžový příznak * * Typografie a tlačítka (přidáno v optimalizaci): * --font-primary: 'Poppins', sans-serif * --btn-border-radius: 30px * * Sdílené hodnoty tabulek a komponent (definováno v 05): * --pk-brand: #00a8ee ← alias pro brand barvu v 05 * --pk-accent: #1aa3d9 ← akcent (fajfky, tečky, FAQ) * --pk-table-radius: 14px * --pk-table-border: #e6f2f8 * --pk-table-row-bg: #fbfdff * --pk-table-shadow: 0 10px 28px rgba(15,23,42,.06), … * * Medailonek autora (přesunuto z lokálního scope do :root v 05): * --authorMax: 840px * --quoteMax: 640px * --stripWidth: 10px * --authorLeft: 230px * --authorGap: 26px * * ============================================================ /* ============================================================= 01 – ZÁKLAD & TYPOGRAFIE Soubor: 01-zaklad-typografie.css ============================================================= */ /* * CO OBSAHUJE: * ───────────────────────────────────────────────────────────── * :root – globální CSS proměnné (viz seznam výše v hlavičce) * * Fonty – Poppins aplikován na html/body jako základ, dále * strukturovaně na logické skupiny selektorů: * nadpisy, navigace, ceny, tlačítka, košík, vyhledávač, * filtry, produktový detail, přihlášení, zápatí atd. * * POZNÁMKA K ÚDRŽBĚ: Pokud přidáváte nový prvek, který * má dostat Poppins, zařaďte ho do příslušné skupiny * v souboru (navigace / ceny / košík / …), nikoli na * konec souboru jako izolovaný selektor. * * Nadpisy – h1/.h1: font-size 2.3em * – h2/.h2 na ≤800px: 35px * * Tlačítka – globální border-radius: var(--btn-border-radius) = 30px * pro .btn, .compact-form .form-control, stránkování, * a.login-btn * * Systémové příznaky – .flag.flag-action / flag-tip / flag-new / * flag-gift / flag-discount / flag-freeshipping * → background: var(--color-flag) #ff7925 * * .zvyraznenybox – obecný zvýrazněný box * (background: var(--color-bg-subtle), padding: 20px, * border-radius: 10px) */ /* ============================================================= 02 – HLAVIČKA, MENU & NAVIGACE Soubor: 02-hlavicka-menu-navigace.css ============================================================= */ /* * CO OBSAHUJE: * ───────────────────────────────────────────────────────────── * Hlavní menu (desktop ≥768px): * #header::after pozadí #d6f1fd * Barva textu .navigation-in a, .submenu-arrow::after, * .menu-helper::after → var(--color-text) #24242E * (sloučeno do jednoho pravidla z původních dvou) * * Padding menu (≥1200px) – položky: padding 25px 32px * * Flex poměry sloupců horní lišty (≥768px): * .top-navigation-menu: 33% * .top-navigation-contacts: 40% * .top-navigation-tools: 27% * * Horní lišta – telefon: * ≥768px ::after → " (Po - Pá 8:00 - 17:00)" * ≥992px barva: var(--color-text-muted), font 13px/400 * * Horní lišta – e-mail: * ≥1200px zobrazen, 16px bold, barva var(--color-primary), * ikona ::before '\e910' * 360–767px absolutní pozice vpravo (right: 164px, top: 15px), * text skryt, jen ikona * ≥768px font-weight 400, font-size 14px (telefon i e-mail) * (původně dva duplicitní bloky, sloučeno) * * Mega-menu – .menu-item-9828 (≥768px): * height: 220px pro vnořený UL * * Related sekce (oprava .mjs-*): * Desktop – .mjs-products-related skryt, .mjs-related .product * vždy zobrazen, expand skryt * ≤768px – expand zobrazen (flex, center), od 5. produktu * .product skryt; po rozbalení .mjs-related-full * vše viditelné * * #category-filter-hover.visible – flex, column layout */ /* ============================================================= 03 – KATEGORIE, PODKATEGORIE, FILTRY & VÝPIS PRODUKTŮ Soubor: 03-kategorie-filtry-vypis.css ============================================================= */ /* * CO OBSAHUJE: * ───────────────────────────────────────────────────────────── * CSS proměnné tlačítek podkategorií (v :root): * --btn-bg: #ecf5fe | --btn-bg-hover: #D9EBFD * --btn-radius: 4px | --btn-text: #24242E * --btn-h: 52px (desktop) | --btn-h-mobile: 56px * --ico-slot-w: 55px | --ico-slot-h: 45px | --ico-max: 45px * --logo-max: 30px | --text-gap: 10px * --highlight-bg: #ffe9eb | --highlight-bg-hover: #ffd8db * * SUBCATEGORIES / SEO-SUBCATEGORIES – wrapper, LI, tlačítko (A): * Flex layout, wrap, stretch; výška btn-h; border-radius 4px; * box-shadow inset spodní linka; transition 0.15s na hover * Pseudoelementy ::before / ::after tlačítek skryty * (resetování UL ::before/::after sloučeno do jednoho :is() bloku) * * Zvýraznění .highlitedsub – růžové pozadí (--highlight-bg) * (pravidla pro with-image i fallback sloučena) * * Ikona .image – flex slot 55×45px, img max 45px, object-fit: contain * * Text .text – font-size 14px bold, line-clamp: 2 řádky, * max-height calc(2 × 1.15em) * * Loga .imageznacka – max-height 30px, object-fit: contain * * Desktop výška (≥768px): * .subcategories li a a .seo-subcategories li a → 70px * (čtyři původní oddělené bloky sloučeny do jednoho) * * Responsive layout: * ≤767px 2 v řadě (50%) * 768–991px 3 v řadě (33.33%) * Kategorie 992–1279px 3 v řadě * Kategorie 1280–1599px 4 v řadě * Kategorie ≥1600px 5 v řadě * Blog 992–1279px 3 v řadě (sloučeno se stejným breakpointem kategorií) * Blog ≥1200px 4 v řadě * Obsahové stránky: 2/3/4 v řadě dle breakpointu * * Barvy – @supports selector(:has(*)): * Speciální handling pro img ze složky /barva/ * (odlišný padding a overflow pro barevné čtverce) * Fallback pro prohlížeče bez :has() zachován * * .seo-subcategories (blog): * border: 1px solid var(--color-border), transition na hover * hover border: var(--color-primary) * výška 88px, text 14px bold, max-height 62px * * Blog .type-post – box-shadow + border pro tlačítka, * text 85% / 1.3em, barva #000 * * Výpis produktů: * .products-block.products .p .name → height: 80px * * Filtry: * .filter-sections a .box-filters → sloučeny do jednoho pravidla * .filter-section → padding 0, border-top 0 * Aktivní filtr (form) → background var(--color-bg-light), * border var(--color-border), * border-radius 5px, margin-bottom 20px * Výjimka setStockFilter → transparent * Disabled checkboxy/radia → label skryt * Slider wrapper → margin: unset; horní slider skryt * Více/méně parametrů (.more-param): * od 6. položky skryto, odkaz s textem "více" / "méně" * font 13px, barva var(--color-primary), underline * * Pořadí filtrů (order) – specifické category body třídy: * body[class*="in-topne-tyce"] – 7 ID sekcí * body[class*="-topne-zebriky"] a * body[class*="in-koupelnove-radiatory"] – 18 ID sekcí * body[class*="zlaby"] – 12 ID sekcí * * Úvodní stránka .uvodni-kategorie: * Flex grid 3 sloupce (desktop), 1 sloupec (mobil) * 6 barevných bloků s pozadím (desktop: URL obrázku s cover) * Pořadí prvků .in-index (flex column, order 0–3) * Banner .banners-content: width 100% * .fav-cat margin-top: 5px * * Hodnocení / recenze: * .r-bottom .vote-wrap – 25% šířka, bg var(--color-bg-light), * border-radius 10px; ≤768px → 50% šířka * .votes-wrap – bg var(--color-bg-light), padding 2rem * .proklikhodnoceni – 100%, margin 20px, center; .btn max 100px */ /* ============================================================= 04 – DETAIL PRODUKTU, KOŠÍK & OBJEDNÁVKY Soubor: 04-detail-kosik-objednavky.css ============================================================= */ /* * CO OBSAHUJE: * ───────────────────────────────────────────────────────────── * Pořadí prvků v .p-detail (flex column): * #related → order 31 * .p-detail-tabs-wrapper → order 32 * #productsAlternative → order 33 * * Tabulka parametrů: * .type-detail .all-param → display: none (skryta v detailu) * * Rozšířený popis (.extended-description): * od 9. řádku vždy zobrazena (i bez třídy .otevreno) * Zebra pruhy – liché řádky: background #fbf9f9 * * Slevový kód (add-on Dominik Martini – .dm-coupon-div): * border: dashed 1px #1eace2; bg: #e0ffff; padding 12px * span: color #1eace2 * ::before: bg var(--color-primary-light), font-size 16px * * Košík – checkbox "přidat poznámku": * ::after – 22×22px ikona \e919 (ikony font), * bg var(--color-primary) * * Objednávka – platební metody: * .inactive-child → display: none * * Stránka ID-927 – speciální tabulka: * border-collapse: collapse, padding 10px, * border var(--color-border) * tr:nth-child(even): #f2f2f2; tr:hover: #f5f5f5; th: #f1f1f1 * * Blog / příspěvky (.type-post): * .content-inner: max-width 1394px * .news-item-detail: max-width 900px, margin auto, * padding 16px (12px na ≤860px) */ /* ============================================================= 05 – OBSAHOVÉ KOMPONENTY Soubor: 05-obsahove-komponenty.css ============================================================= */ /* * CO OBSAHUJE: * ───────────────────────────────────────────────────────────── * Sdílené proměnné tabulek a komponent (v :root, viz hlavička): * --pk-brand, --pk-accent, --pk-table-radius, --pk-table-border, * --pk-table-row-bg, --pk-table-shadow * Eliminují duplicitní hodnoty napříč všemi tabulkovými komponentami. * * TABULKY (základní): * border-collapse: separate; border-radius 8px; box-shadow lehký * thead th: bg #007bff, bílý text, font-size 1.2em * tbody hover: bg #e0f0ff; liché řádky: #f9f9f9 * první td: bold #555 šířka 40%; poslední td: right, #333 * * .pk-table – tabulka s modrým záhlavím (brand): * Používá --pk-table-* proměnné; border-radius 14px * thead: bg var(--pk-brand), bílý text * tbody th: bg #f5fbff, color var(--pk-brand), bold, width 170px * hover řádky: #f7fbff * ≤720px: font-size 15px, tbody th width auto * * .pk-table--plain – bez záhlaví, stejný vizuál: * tr:first-child td bez border-top; td + td border-left * * .pk-compare – srovnávací tabulka (2 sloupce): * Grid 2 sloupce (1 sloupec na ≤860px) * border: 1.5px dashed; border-radius 18px * .pk-compare__item--plus → zelená ikona * .pk-compare__item--minus → červená ikona * * .pk-bullets--dot – odrážky s tečkou: * tečka 8px, barva var(--pk-accent), flex, gap 10px * (odstraněna zbytečná proměnná --dot-offset: 0px) * * .bullets-box – box s fajfkami: * bg #fbfdff; border-left 4px solid var(--pk-accent) * border-radius 14px * fajfka: kruh #e6f6ff + border, L-tvar var(--pk-accent) * .is-2cols → grid 2 sloupce (1 na ≤640px) * * .faq – FAQ akordeon: * Stejný vizuál jako .bullets-box * summary: padding-left 34px, cursor pointer, user-select none * ::before kruh, ::after ikona plus/mínus * LOGIKA IKONY: details:not([open]) summary::after = plus (čára + svislá) * details[open] summary::after = mínus (jen čára) * (přepsáno pro explicitní a robustní stav) * .a odpověď: padding-left 34px, color #334155 * * .pk-steps (div/blokový) – průvodce krok za krokem: * --brand: #0ea5e9; grid 1 sloupec; gap 14px * .pk-step: border: 1.5px dashed; border-radius 16px; bg #f7fbff * .pk-step__badge: absolutní kruh 40px, bg brand, bílé číslo * connector čára po levé straně badge (rgba modré, 2px) * body.type-post opravy: lokální proměnné přejmenovány na * --_badge-left, --_badge-size, --_badge-gap, --_text-offset * (underscore prefix = záměrně lokální scope) * * ol.pk-steps – číselný seznam: * counter-reset: i; číslo v kruhu 26×26px, bg var(--pk-brand) * * .tip-box – tip rámeček: * bg var(--color-primary-bg); border: 2px solid #1EAAE0 * border-radius 10px * .tip-box__icon flex 0, font 16px; .tip-box__label bold * odkaz: color #1EAAE0, hover var(--color-primary-dark) * * .author-card – medailonek autora: * Proměnné přesunuty do :root (viz hlavička README) * Grid 2 sloupce (1 na ≤520px) * Modrý pruh vlevo (gradient rgba blue, var(--stripWidth)) * Vertikální dělicí čára uprostřed (abs, 1px, rgba blue) * Avatar 116px kruh (74px mobil) * Citát s uvozovkou Georgia 54px, color var(--pk-brand) opacity .30 * .author-card__name: bold 16px; .author-card__role: 13px muted * * .pk-tiles – info bloky 3 vedle sebe: * Grid repeat(3,1fr) (1 sloupec na ≤900px) * .pk-tile: border, border-radius 16px, box-shadow * .pk-tile__icon: 38×38px, bg rgba(blue,.10), font 18px * .pk-tile__title: 1.55rem/800; .pk-tile__text: muted * * .pk-quote – citace: * bg #f6fbff; border-radius 14px; box-shadow var(--pk-table-shadow) * text italic, color #667085; cite: 0.9em, #8a94a6 * * .pk-split – blok obrázek + text: * Grid 2 sloupce (1 na ≤900px); gap 28px * .pk-split__media: border #e6f2f8, border-radius 14px, * box-shadow var(--pk-table-shadow) * h2: 28px/800, border-bottom 3px rgba(blue,.25) * .is-reverse: media order 2, content order 1 * * .pk-perex – perex článku: * bg #f6fbff; border-top 3px solid var(--pk-brand) * border-radius 14px; box-shadow var(--pk-table-shadow) * font 18px/500, color #475569 * * .reviews__grid – grid hodnocení: * Grid repeat(4,1fr) → 2 (≤1100px) → 1 (≤560px) * .review-card: bg #f5f5f5, border-radius 14px * .review-card__avatar: 34px, border 2px solid var(--pk-brand) * * .pk-usp – USP bloky 4 v řadě: * Grid repeat(4,1fr) → 2 (≤900px) → 1 (≤520px) * .pk-usp__item: bg #fff, border, border-radius 14px, text center * .pk-usp__icon: border 0, font 20px, color var(--pk-brand) * * .pk-usp--3 – USP bloky 3 v řadě s ikonou nad boxem: * Grid repeat(3,1fr) → 1 (≤900px) * .pk-usp__icon: absolutní kruh 60px, bg #fff, * border rgba(blue,.35); ikonka img 36×36px * box hover: transition background/border/box-shadow .2s * * .pk-infoline – informační linka: * flex; border 1px solid rgba(blue,.35); border-radius 14px * .pk-infoline__icon: kruh 26px, border rgba(blue,.35), bg #fff * * .top-topics-wrap – mini buttony s tématy: * flex wrap; gap 6px; .top-topic: pill border-radius 999px * bg var(--color-bg-light), border var(--color-border) * hover: #eeeeee, translateY(-1px), transition * .is-active / [aria-current="page"]: bg + border var(--color-text), * text bílý * * .pk-cta – CTA tlačítko: * height 44px; padding 0 28px; border-radius 999px * bg var(--pk-brand); text bílý, uppercase, letter-spacing .04em * hover: bg var(--color-primary-dark); transition .2s ease * a.pk-cta: text-decoration none, box-shadow none */