/* ========================================================================== WhiteLady – frontend stylesheet (Krok 3a) ========================================================================== Architektura: 1) CSS proměnné – barvy, typo, spacing (lze later override v dark mode) 2) Base elementy – body, headings, links 3) Bootstrap overrides – pomocí !important jen tam, kde si Bootstrap diktuje 4) Komponenty – product-card, breadcrumbs, pagination, sidebar, footer 5) Utility – mobile-first responzivní úpravy Designové východisko (neutrální moderní pro eshop s polodrahokamy): - Hlavní barva: téměř bílá warm-paper #fbfaf7 - Akcent: charcoal #2c2c2c pro text, naked steel #707070 pro sekundární - Decorativní akcent: subtilní bronzová #a37a47 (zlato cítěné v kameni) - Typo: serif (Cormorant Garamond) pro nadpisy = klenotnický feel sans (Inter) pro tělo = čitelný moderní - Spacing: dostatek prostoru, focus na produkt; nikdy "shop fanart" Cíl: čisté, moderní, nenavazuje na konkrétní brand – admin v Kroku 5 může barvy přepsat přes CSS proměnné v . ========================================================================== */ :root { /* Barvy */ --wl-bg: #fbfaf7; --wl-surface: #ffffff; --wl-text: #2c2c2c; --wl-text-muted: #707070; --wl-text-soft: #a0a0a0; --wl-placeholder: #bababa; /* placeholder = text-soft +10% světlejší */ --wl-border: #e8e6e0; --wl-border-strong: #d0cdc4; --wl-accent: #a37a47; /* bronzová – pouze decorativní */ --wl-accent-hover: #876035; --wl-success: #5d8c5a; --wl-danger: #b54b3c; --wl-warning: #c8692a; /* oranžová ze stříšky na ilustraci */ --wl-orange: #c8692a; /* totéž – pojmenovaný alias */ --wl-orange-light: #fdf0e6; /* velmi světlý tón pro pozadí */ /* Typo */ --wl-font-serif: 'Cormorant Garamond', 'Georgia', serif; --wl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Layout */ --wl-content-max: 1280px; --wl-header-height: 84px; --wl-radius: 4px; --wl-radius-lg: 8px; --wl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --wl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); /* Bootstrap override */ --bs-body-bg: var(--wl-bg); --bs-body-color: var(--wl-text); --bs-body-font-family: var(--wl-font-sans); --bs-primary: var(--wl-accent); --bs-primary-rgb: 163, 122, 71; --bs-link-color: var(--wl-text); --bs-link-hover-color: var(--wl-accent); --bs-link-decoration: none; --bs-border-color: var(--wl-border); } /* ========================================================================== Base ========================================================================== */ html { scroll-behavior: smooth; } body { background: var(--wl-bg); color: var(--wl-text); font-family: var(--wl-font-sans); font-weight: 400; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--wl-font-serif); font-weight: 500; color: var(--wl-text); letter-spacing: -0.01em; line-height: 1.25; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } /* FocusOnNavigate zaměří h1 programaticky — potlačit outline; pro klávesnici zachovat */ h1:focus:not(:focus-visible) { outline: none; } h1:focus { outline: none; } a { color: var(--wl-text); text-decoration: none; transition: color 0.15s ease-out; } a:hover { color: var(--wl-accent); } a.accent { color: var(--wl-accent); } .btn-primary { --bs-btn-bg: #3d6b50; --bs-btn-border-color: #3d6b50; --bs-btn-hover-bg: #2e5440; --bs-btn-hover-border-color: #2e5440; --bs-btn-active-bg: #3cc57a; --bs-btn-active-border-color: #3cc57a; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-disabled-bg: #c8c4bc; --bs-btn-disabled-border-color: #c8c4bc; --bs-btn-disabled-color: #8a8678; --bs-btn-disabled-opacity: 1; border-radius: var(--wl-radius); font-weight: 500; letter-spacing: 0.01em; padding: 0.625rem 1.25rem; } .btn-outline-primary { --bs-btn-color: var(--wl-text); --bs-btn-border-color: var(--wl-border-strong); --bs-btn-hover-bg: var(--wl-text); --bs-btn-hover-border-color: var(--wl-text); --bs-btn-hover-color: #fff; border-radius: var(--wl-radius); font-weight: 500; padding: 0.625rem 1.25rem; } .form-control, .form-select { background-color: var(--wl-surface); border-radius: var(--wl-radius); border-color: var(--wl-border); padding: 0.55rem 0.875rem; font-size: 0.9375rem; } .form-control:focus, .form-select:focus { border-color: var(--wl-accent); box-shadow: 0 0 0 0.2rem rgba(163, 122, 71, 0.15); } /* Placeholders – globální styl */ ::placeholder { color: var(--wl-placeholder); font-style: italic; font-size: 0.9em; opacity: 1; /* Firefox normalizace */ } /* ========================================================================== Site Header ========================================================================== */ .site-header { background: var(--wl-surface); border-bottom: 1px solid var(--wl-border); box-shadow: var(--wl-shadow-sm); position: sticky; top: 0; z-index: 1030; } .site-header__inner { display: flex; align-items: center; gap: 1.5rem; padding: 0.5rem 0; } /* Banner – tři obrázky přes celou šířku kontejneru */ .site-header__brand { display: block; width: 100%; text-decoration: none; } .site-header__banner { display: flex; align-items: flex-end; flex-wrap: nowrap; width: 100%; padding: 0.5rem 0; } .site-header__banner-left { display: flex; align-items: flex-end; gap: 0.5rem; flex-shrink: 1; min-width: 0; } /* Výšky škálují plynule s viewportem: vw odvozeno z přirozené výšky ÷ 1280px (max šířka kontejneru). clamp(min, preferovaná, max) — min zajistí čitelnost, max přirozená velikost obrázku. */ .site-header__banner-title { height: clamp(25px, 5.3vw, 68px); width: auto; display: block; } .site-header__banner-subtitle { height: clamp(11px, 2.4vw, 31px); width: auto; display: block; } .site-header__banner-illustration { height: clamp(37px, 7.8vw, 100px); width: auto; margin-left: auto; flex-shrink: 1; display: block; } /* Podtitulek skryjeme na nejužších obrazovkách, kde by způsobil přetečení */ @media (max-width: 499px) { .site-header__banner-subtitle { display: none; } } .site-header__search { flex: 1; max-width: 480px; } .site-header__search .form-control { padding-left: 2.5rem; background: var(--wl-bg); border-color: transparent; } .site-header__search-wrapper { position: relative; } .site-header__search-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--wl-text-muted); pointer-events: none; } .site-header__nav-links { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; } .site-header__nav-link { font-size: 0.875rem; color: var(--wl-text-muted); white-space: nowrap; } .site-header__nav-link:hover { color: var(--wl-accent); } @media (max-width: 767.98px) { .site-header__nav-links { display: none; } } .site-header__actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; } .site-header__action { display: flex; align-items: center; gap: 0.5rem; color: var(--wl-text); font-size: 0.875rem; padding: 0.5rem; border-radius: var(--wl-radius); } .site-header__action i { font-size: 1.25rem; } .site-header__action:hover { color: var(--wl-accent); background: var(--wl-bg); } .site-header__action-badge { background: var(--wl-accent); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 0.6875rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-left: -4px; } /* ========================================================================== Page layout — sidebar uvnitř containeru, zarovnaný s hlavičkou ========================================================================== */ .page-wrapper { display: flex; flex-direction: column; min-height: 100vh; } .page-body { display: flex; align-items: flex-start; flex: 1; padding-top: 1rem; padding-bottom: 2rem; } .site-sidebar { width: fit-content; min-width: 220px; max-width: 300px; flex-shrink: 0; position: sticky; top: var(--wl-header-height, 150px); align-self: flex-start; max-height: calc(100vh - var(--wl-header-height, 150px)); overflow-y: auto; } .site-content { flex: 1; min-width: 0; } @media (max-width: 991.98px) { .page-body { flex-direction: column; } .site-sidebar { width: 100%; position: static; max-height: none; overflow-y: visible; } } /* ========================================================================== Hlavní navigace — vertikální sidebar ========================================================================== */ .main-nav { background: var(--wl-surface); border-right: 1px solid var(--wl-border); } .main-nav__list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0.5rem 0; } .main-nav__link { display: block; padding: 0.625rem 1.25rem; color: var(--wl-text); font-size: 0.9375rem; font-weight: 500; border-left: 3px solid transparent; transition: border-color 0.15s, color 0.15s, background-color 0.15s; white-space: normal; word-break: break-word; text-decoration: none; } .main-nav__link:hover, .main-nav__link.active { color: var(--wl-accent); border-left-color: var(--wl-accent); background: rgba(163, 122, 71, 0.05); text-decoration: none; } /* Nativní details/summary — expand/collapse bez JS */ .main-nav__details { display: block; } summary.main-nav__summary { list-style: none; cursor: pointer; user-select: none; } summary.main-nav__summary .main-nav__link::before { content: "›"; display: inline-block; margin-right: 0.35em; color: var(--wl-text-muted); font-size: 1.1rem; transition: transform 0.15s ease; } /* Listová kategorie (bez subkategorií) — rezervace stejného místa jako ikona "›" u rozbalovacích */ .main-nav__link--leaf::before { content: "›"; display: inline-block; margin-right: 0.35em; font-size: 1.1rem; visibility: hidden; } .main-nav__details[open] > summary.main-nav__summary .main-nav__link::before { transform: rotate(90deg); } /* Podmenu — odsazení a levá čára */ .main-nav__submenu { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--wl-border); margin-left: 1.5rem; } .main-nav__submenu .main-nav__link { padding: 0.4375rem 1rem; font-weight: 400; font-size: 0.875rem; } .main-nav__submenu .main-nav__submenu { margin-left: 0.75rem; } /* Na mobilu — navigace přejde zpět na horizontální řadu nad obsahem */ @media (max-width: 991.98px) { .main-nav { border-right: none; border-bottom: 1px solid var(--wl-border); min-height: auto; } .main-nav__list { flex-direction: row; overflow-x: auto; padding: 0; gap: 0.25rem; } .main-nav__item { flex-shrink: 0; position: relative; } .main-nav__link { padding: 0.875rem 1rem; border-left: none; border-bottom: 2px solid transparent; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .main-nav__link:hover, .main-nav__link.active { border-left-color: transparent; border-bottom-color: var(--wl-accent); background: transparent; } /* Na mobilu submenu absolut pod položkou */ .main-nav__submenu { position: absolute; top: 100%; left: 0; z-index: 200; background: var(--wl-surface); border: 1px solid var(--wl-border); box-shadow: var(--wl-shadow-md); min-width: 220px; margin-left: 0; border-left: none; } .main-nav__submenu .main-nav__link { font-size: 0.9375rem; padding: 0.5rem 1rem; white-space: nowrap; } .main-nav__submenu .main-nav__submenu { position: absolute; top: 0; left: 100%; margin-left: 0; } } /* ========================================================================== Sidebar widgety (Kamenná provozovna, Výhody e-shop) ========================================================================== */ .sidebar-widget { margin-top: 1.5rem; padding: 0.85rem 1rem; background: var(--wl-warm-paper); border: 1px solid var(--wl-border); border-radius: var(--wl-radius); font-size: 0.875rem; } .sidebar-widget__title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wl-text-muted); margin: 0 0 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--wl-border); } .sidebar-widget__image { display: block; width: 100%; height: auto; border-radius: calc(var(--wl-radius) - 2px); margin-bottom: 0.65rem; } .sidebar-widget__label { margin: 0 0 0.2rem; color: var(--wl-charcoal); } .sidebar-widget__address { color: var(--wl-accent); font-weight: 600; text-decoration: none; } .sidebar-widget__address:hover { text-decoration: underline; } .sidebar-widget__list { margin: 0; padding-left: 1.1rem; line-height: 1.7; color: var(--wl-charcoal); } /* ========================================================================== Hero (homepage) ========================================================================== */ .hero { background: linear-gradient(180deg, var(--wl-orange-light) 0%, var(--wl-bg) 40%, var(--wl-surface) 100%); padding: 1rem 0 1rem; text-align: center; } .hero__cms-body { text-align: start; } .hero__title { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1rem; color: var(--wl-text); } .hero__subtitle { font-size: 1.125rem; color: var(--wl-text-muted); max-width: 640px; margin: 0 auto 2rem; font-family: var(--wl-font-sans); } .hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ========================================================================== AI Search Box (homepage) ========================================================================== */ .ai-search-section { background: linear-gradient(180deg, var(--wl-surface) 0%, var(--wl-bg) 100%); border-top: 1px solid var(--wl-border); border-bottom: 1px solid var(--wl-border); padding: 3rem 0; } .ai-search-section__header { text-align: center; margin-bottom: 2rem; } .ai-search-section__icon { display: block; font-size: 2rem; color: var(--wl-accent); margin-bottom: 0.5rem; } .ai-search-section__title { font-family: var(--wl-font-serif); font-size: clamp(1.35rem, 2.5vw, 1.875rem); font-weight: 600; margin-bottom: 0.5rem; color: var(--wl-heading); } .ai-search-section__subtitle { color: var(--wl-text-muted); font-size: 1rem; max-width: 540px; margin: 0 auto; } /* Formulář – oblast s relativním pozicováním pro dropdown */ .ai-search-form-area { max-width: 860px; margin: 0 auto; position: relative; } .ai-search-form__wrapper { display: flex; align-items: center; background: var(--wl-surface); border: 1.5px solid var(--wl-border-strong); border-radius: var(--wl-radius-lg); padding: 0.375rem 0.375rem 0.375rem 1.25rem; gap: 0.5rem; transition: border-color 0.15s, box-shadow 0.15s; box-shadow: var(--wl-shadow-sm); } .ai-search-form__wrapper:focus-within { border-color: var(--wl-accent); box-shadow: 0 0 0 3px rgba(163, 122, 71, 0.12); } /* Otevřený dropdown: spodní rohy rovné pro plynulé napojení */ .ai-search-form__wrapper--open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ai-search-form__input { flex: 1; border: none; background: transparent; font-size: 1.0625rem; color: var(--wl-text); outline: none; padding: 0.625rem 0; min-width: 0; } .ai-search-form__input::placeholder { color: var(--wl-placeholder); font-size: 0.9375rem; } .ai-search-form__input:disabled { opacity: 0.6; } /* Tlačítko pro zobrazení příkladů – nenápadná ikona uvnitř pole */ .ai-search-form__examples-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; background: transparent; border: none; border-radius: var(--wl-radius); color: var(--wl-text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; padding: 0; font-size: 1.05rem; } .ai-search-form__examples-btn:hover, .ai-search-form__examples-btn.active { background: var(--wl-orange-light); color: var(--wl-accent); } /* Tlačítko Poradit */ .ai-search-form__btn { flex-shrink: 0; display: flex; align-items: center; gap: 0.4rem; padding: 0.5625rem 1.5rem; border-radius: calc(var(--wl-radius-lg) - 3px); font-size: 0.9375rem; } @media (max-width: 480px) { .ai-search-form__btn-label { display: none; } .ai-search-form__btn { padding: 0.5625rem 0.875rem; } } /* Dropdown s příklady dotazů */ .ai-search-dropdown { background: var(--wl-surface); border: 1.5px solid var(--wl-accent); border-top-color: var(--wl-border); border-top-width: 1px; border-radius: 0 0 var(--wl-radius-lg) var(--wl-radius-lg); box-shadow: var(--wl-shadow-md); overflow: hidden; } .ai-search-dropdown__label { font-size: 0.75rem; color: var(--wl-text-muted); padding: 0.625rem 1.25rem 0.25rem; margin: 0; font-family: var(--wl-font-sans); letter-spacing: 0.04em; text-transform: uppercase; } .ai-search-dropdown__item { display: flex; align-items: center; gap: 0.375rem; width: 100%; padding: 0.625rem 1.25rem; background: transparent; border: none; border-top: 1px solid var(--wl-border); font-size: 0.9375rem; color: var(--wl-text); cursor: pointer; text-align: left; transition: background 0.1s, color 0.1s; font-family: var(--wl-font-sans); } .ai-search-dropdown__item:hover { background: var(--wl-orange-light); color: var(--wl-accent-hover); } .ai-search-dropdown__item .bi { color: var(--wl-accent); font-size: 1.05rem; flex-shrink: 0; } /* Stav – spinner / prázdný výsledek */ .ai-search-state { text-align: center; padding: 2rem 0; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .ai-search-state__icon { font-size: 2rem; color: var(--wl-text-soft); } .ai-search-state__text { color: var(--wl-text-muted); margin: 0; } /* Zpráva (odpověď AI) */ .ai-search-message { display: flex; align-items: flex-start; gap: 0.75rem; background: var(--wl-orange-light); border: 1px solid rgba(163, 122, 71, 0.25); border-radius: var(--wl-radius-lg); padding: 1rem 1.25rem; max-width: 860px; margin: 1.5rem auto; } .ai-search-message--warning { background: #fdf3f2; border-color: rgba(181, 75, 60, 0.2); } .ai-search-message__icon { color: var(--wl-accent); font-size: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; } .ai-search-message__icon--success { color: var(--wl-success); } .ai-search-message--warning .ai-search-message__icon { color: var(--wl-danger); } .ai-search-message__text { margin: 0; font-size: 0.95rem; color: var(--wl-text); } /* Výsledky */ .ai-search-results { margin-top: 1.5rem; } .ai-search-results__desc { font-size: 0.85rem; color: var(--wl-text-muted); margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================================== Section ========================================================================== */ .section { padding: 3rem 0; } .section--alt { background: var(--wl-surface); } .section__header { text-align: center; margin-bottom: 2.5rem; } .section__title { margin-bottom: 0.5rem; } .section__subtitle { color: var(--wl-text-muted); font-size: 1rem; } /* ========================================================================== Product Card ========================================================================== */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 767.98px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } .product-card { display: flex; flex-direction: column; background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: var(--wl-radius-lg); overflow: visible; position: relative; transition: transform 0.2s, box-shadow 0.2s; } .product-card:hover { transform: translateY(-2px); box-shadow: var(--wl-shadow-md); } .product-card__image-wrapper { height: 120px; background: #fff; overflow: hidden; position: relative; border-radius: var(--wl-radius-lg) var(--wl-radius-lg) 0 0; display: flex; align-items: center; justify-content: center; } .product-card__image-link { display: flex; align-items: center; justify-content: center; max-width: 100px; max-height: 100px; } .product-card__image { max-width: 100px; max-height: 100px; width: auto; height: auto; display: block; } .product-card__zoom-btn { position: absolute; bottom: 0.5rem; right: 0.5rem; z-index: 2; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--wl-border); border-radius: 50%; color: var(--wl-text); font-size: 0.875rem; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease; backdrop-filter: blur(4px); } .product-card:hover .product-card__zoom-btn { opacity: 1; } .product-card__zoom-btn:hover { background: #fff; } @media (hover: none) { .product-card__zoom-btn { opacity: 1; } } /* Lightbox */ .product-preview-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: product-preview-fade-in 0.15s ease; } @keyframes product-preview-fade-in { from { opacity: 0; } to { opacity: 1; } } .product-preview-modal { position: relative; background: var(--wl-surface); border-radius: var(--wl-radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); max-width: min(90vw, 520px); max-height: 90vh; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; } .product-preview-modal img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; } .product-preview-close { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 10; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--wl-border); border-radius: 50%; color: var(--wl-text); font-size: 0.875rem; cursor: pointer; backdrop-filter: blur(4px); } .product-preview-close:hover { background: #fff; } .product-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--wl-text-soft); font-size: 3rem; background: linear-gradient(135deg, var(--wl-bg), var(--wl-border)); } .product-card__discount-badge { position: absolute; top: 0.75rem; left: 0.75rem; background: var(--wl-orange); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: var(--wl-radius); } .product-card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; background: var(--wl-bg); } .product-card__title { font-family: var(--wl-font-serif); font-size: 1.125rem; font-weight: 500; color: var(--wl-text); margin: 0 0 0.25rem; line-height: 1.3; /* clamp na 2 řádky */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card__title a { color: inherit; } .product-card__title a:hover { color: var(--wl-accent); } .product-card__sku { color: var(--wl-text-soft); font-size: 0.75rem; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .product-card__rating { color: var(--wl-accent); font-size: 0.875rem; margin-bottom: 0.5rem; letter-spacing: 0.05em; } .product-card__rating-count { color: var(--wl-text-soft); margin-left: 0.25rem; font-size: 0.75rem; } /* ========================================================================== Rating Widget (interaktivní hodnocení diamanty) ========================================================================== */ .wl-diamond-icon { display: inline-block; vertical-align: -0.125em; } .rating-widget__label { color: var(--wl-text-muted); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } .rating-widget__stars { display: flex; gap: 0.15rem; align-items: center; } .rating-widget__star { background: none; border: none; padding: 0.2rem 0.15rem; cursor: pointer; color: var(--wl-border-strong); font-size: 1.15rem; line-height: 1; transition: color 0.15s ease, transform 0.12s ease; } .rating-widget__star--on { color: var(--wl-accent); } .rating-widget__star:not(:disabled):hover { color: var(--wl-accent-hover); transform: scale(1.2); } .rating-widget__star:disabled { cursor: default; opacity: 0.55; } .product-card__price { margin-top: auto; padding-top: 0.5rem; } /* ========================================================================== Price Tag ========================================================================== */ .price-tag { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .price-tag__current { font-size: 1.25rem; font-weight: 600; color: var(--wl-text); font-family: var(--wl-font-sans); } .price-tag__current--accent { color: var(--wl-orange); } .price-tag__list { text-decoration: line-through; color: var(--wl-text-soft); font-size: 0.875rem; } .price-tag--lg .price-tag__current { font-size: 2rem; font-weight: 600; } .price-tag--lg .price-tag__list { font-size: 1rem; } /* ========================================================================== Breadcrumbs ========================================================================== */ .breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; color: var(--wl-text-muted); font-size: 0.875rem; padding-top: 1rem; padding-bottom: 1rem; list-style: none; margin-block: 0; } .breadcrumbs__item { display: flex; align-items: center; gap: 0.5rem; } .breadcrumbs__item:not(:last-child)::after { content: '/'; color: var(--wl-text-soft); } .breadcrumbs__link { color: var(--wl-text-muted); } .breadcrumbs__link:hover { color: var(--wl-accent); } .breadcrumbs__current { color: var(--wl-text); font-weight: 500; } /* ========================================================================== Pagination ========================================================================== */ .pagination-nav { display: flex; justify-content: center; margin-top: 2rem; } .pagination { --bs-pagination-color: var(--wl-text); --bs-pagination-hover-color: var(--wl-accent); --bs-pagination-hover-bg: var(--wl-bg); --bs-pagination-hover-border-color: var(--wl-border); --bs-pagination-active-bg: var(--wl-accent); --bs-pagination-active-border-color: var(--wl-accent); --bs-pagination-active-color: #fff; --bs-pagination-border-color: var(--wl-border); --bs-pagination-border-radius: var(--wl-radius); } /* ========================================================================== Category Filter Sidebar ========================================================================== */ .filter-sidebar { background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: var(--wl-radius-lg); padding: 1.5rem; } .filter-sidebar__title { font-family: var(--wl-font-sans); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wl-text); margin-bottom: 1rem; } .filter-sidebar__group { border-top: 1px solid var(--wl-border); padding: 1.25rem 0; } .filter-sidebar__group:first-of-type { border-top: none; padding-top: 0; } .filter-sidebar__group:last-of-type { padding-bottom: 0; } .filter-sidebar__group-title { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wl-text-muted); margin-bottom: 0.75rem; } .filter-sidebar__option { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0; font-size: 0.9375rem; } .filter-sidebar__option-count { color: var(--wl-text-soft); font-size: 0.8125rem; } /* ========================================================================== Sort Toolbar ========================================================================== */ .sort-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--wl-border); } .sort-toolbar__count { color: var(--wl-text-muted); font-size: 0.875rem; } .sort-toolbar__sort { display: flex; align-items: center; gap: 0.5rem; } .sort-toolbar__sort .form-select { min-width: 200px; } /* ========================================================================== Product Detail ========================================================================== */ .product-detail { padding: 1.5rem 0 3rem; } .product-detail__gallery { display: grid; grid-template-columns: 80px 1fr; gap: 1rem; } .product-detail__gallery--no-thumbs { grid-template-columns: 1fr; } .product-detail__thumbs { display: flex; flex-direction: column; gap: 0.5rem; } .product-detail__thumb { width: 80px; height: 80px; background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: var(--wl-radius); overflow: hidden; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .product-detail__thumb.active { border-color: var(--wl-orange); box-shadow: 0 0 0 2px var(--wl-orange-light); } .product-detail__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; } .product-detail__main-image { background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: var(--wl-radius-lg); overflow: hidden; height: 290px; position: relative; display: flex; align-items: center; justify-content: center; } .product-detail__main-image img { max-width: 250px; max-height: 250px; width: auto; height: auto; display: block; } .product-detail__main-image .product-card__zoom-btn { opacity: 1; } .product-detail__info h1 { margin-bottom: 0.25rem; } .product-detail__sku { color: var(--wl-text-soft); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; } .product-detail__short { color: var(--wl-text-muted); font-size: 1.0625rem; margin: 1rem 0 1.5rem; line-height: 1.6; } .product-detail__price-block { padding: 1.25rem 0; border-top: 1px solid var(--wl-border); border-bottom: 1px solid var(--wl-border); margin: 1.5rem 0; } .product-detail__stock { margin-top: 0.5rem; color: var(--wl-success); font-size: 0.9375rem; } .product-detail__stock--out { color: var(--wl-danger); } .product-detail__buy { display: flex; gap: 0.75rem; margin: 1.5rem 0; } .product-detail__quantity { display: flex; align-items: center; border: 1px solid var(--wl-border-strong); border-radius: var(--wl-radius); overflow: hidden; } .product-detail__quantity button { background: transparent; border: none; width: 40px; height: 40px; color: var(--wl-text); font-size: 1.125rem; } .product-detail__quantity input { border: none; width: 50px; text-align: center; background: transparent; } .product-detail__attributes { margin-top: 1.5rem; border-top: 1px solid var(--wl-border); padding-top: 1.5rem; } .product-detail__attributes dl { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; row-gap: 0.5rem; margin: 0; } .product-detail__attributes dt { color: var(--wl-text-muted); font-size: 0.9375rem; } .product-detail__attributes dd { color: var(--wl-text); margin: 0; font-size: 0.9375rem; } .product-detail__description { margin-top: 3rem; } .product-detail__description h2 { margin-bottom: 1.5rem; } .product-detail__description-body { font-size: 1.0625rem; line-height: 1.7; color: var(--wl-text); } .product-detail__description-body img { max-width: 100%; height: auto; } /* ========================================================================== Product Variants Section ========================================================================== */ .product-detail__variants { margin-top: 2.5rem; border-top: 2px solid var(--wl-border); padding-top: 2rem; } .product-detail__variants h2 { margin-bottom: 1.5rem; } .product-variants { display: flex; flex-direction: column; gap: 0.75rem; } .product-variant { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 1rem 1.5rem; align-items: center; padding: 1rem 1.25rem; background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: var(--wl-radius-lg); } .product-variant__image { width: 72px; height: 72px; flex-shrink: 0; background: var(--wl-bg); border: 1px solid var(--wl-border); border-radius: var(--wl-radius); overflow: hidden; display: flex; align-items: center; justify-content: center; } .product-variant__image img { max-width: 100%; max-height: 100%; object-fit: contain; } .product-variant__info { min-width: 0; } .product-variant__name { font-weight: 600; font-size: 1rem; color: var(--wl-text); } .product-variant__sku { font-size: 0.8125rem; color: var(--wl-text-muted); margin-top: 0.125rem; } .product-variant__stock { font-size: 0.875rem; margin-top: 0.375rem; } .product-variant__stock--in { color: var(--wl-success); } .product-variant__stock--out { color: var(--wl-danger); } .product-variant__price { min-width: 80px; text-align: right; white-space: nowrap; } .product-variant__buy { min-width: 240px; } @media (max-width: 767px) { .product-variant { grid-template-columns: 56px 1fr; grid-template-rows: auto auto; } .product-variant__image { width: 56px; height: 56px; grid-row: 1 / 3; } .product-variant__price { text-align: left; grid-column: 2; } .product-variant__buy { min-width: 0; grid-column: 1 / 3; } } /* ========================================================================== Content (CMS) Page ========================================================================== */ .content-page { padding: 2rem 0 4rem; } .content-page__article { max-width: 740px; margin: 0 auto; background: var(--wl-surface); padding: 3rem; border-radius: var(--wl-radius-lg); border: 1px solid var(--wl-border); } .content-page__article h1 { text-align: center; margin-bottom: 2rem; } .content-page__article h2, .content-page__article h3 { margin-top: 2rem; margin-bottom: 1rem; } .content-page__article p { margin-bottom: 1.25rem; line-height: 1.7; font-size: 1.0625rem; } .content-page__article img { max-width: 100%; height: auto; border-radius: var(--wl-radius); margin: 1.5rem 0; } /* ========================================================================== Empty / 404 ========================================================================== */ .empty-state { padding: 4rem 1rem; text-align: center; color: var(--wl-text-muted); } .empty-state__icon { font-size: 3rem; color: var(--wl-text-soft); margin-bottom: 1rem; } .empty-state__title { margin-bottom: 0.5rem; } /* ========================================================================== Footer ========================================================================== */ .site-footer { margin-top: auto; background: var(--wl-text); color: rgba(255, 255, 255, 0.75); padding: 3rem 0 1.5rem; } .site-footer h5 { color: #fff; font-family: var(--wl-font-sans); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; } .site-footer a { color: rgba(255, 255, 255, 0.65); display: block; padding: 0.25rem 0; font-size: 0.9375rem; } .site-footer a:hover { color: #fff; } .site-footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); text-align: center; } /* ========================================================================== Container override (širší) ========================================================================== */ @media (min-width: 1400px) { .container, .container-xxl { max-width: var(--wl-content-max); } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 991.98px) { .site-header__search { display: none; } .product-detail__gallery { grid-template-columns: 1fr; } .product-detail__thumbs { flex-direction: row; overflow-x: auto; } .content-page__article { padding: 1.5rem; } } @media (max-width: 575.98px) { h1 { font-size: 2rem; } h2 { font-size: 1.625rem; } .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .product-card__body { padding: 0.75rem 0.875rem 1rem; } .product-card__title { font-size: 1rem; } .hero { padding: 2.5rem 0 3rem; } } /* ============================================================================ Krok 4a – košík, checkout, add-to-cart, mini-košík badge ============================================================================ */ /* --- Mini-košík badge v hlavičce ---------------------------------------- */ .site-header__action--cart { position: relative; } .site-header__cart-badge { position: absolute; top: -2px; right: -4px; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; background: var(--accent, #a37a47); color: #fff; font-size: 0.7rem; font-weight: 600; line-height: 1.25rem; text-align: center; border-radius: 999px; border: 2px solid #fbfaf7; } /* --- AddToCartButton na detail produktu --------------------------------- */ .add-to-cart { width: 100%; } .add-to-cart__row { display: flex; gap: 0.75rem; align-items: stretch; } .add-to-cart__qty { display: inline-flex; align-items: stretch; border: 1px solid #d9d4cb; border-radius: 0.375rem; overflow: hidden; } .add-to-cart__qty button { width: 2.5rem; background: #fff; border: 0; border-right: 1px solid #d9d4cb; font-size: 1.25rem; line-height: 1; transition: background 120ms; } .add-to-cart__qty button:last-of-type { border-right: 0; border-left: 1px solid #d9d4cb; } .add-to-cart__qty button:hover:not(:disabled) { background: #f5f1ea; } .add-to-cart__qty button:disabled { opacity: 0.5; cursor: not-allowed; } .add-to-cart__qty-input { width: 3.5rem; border: 0; text-align: center; background: #fff; -moz-appearance: textfield; } .add-to-cart__qty-input::-webkit-inner-spin-button, .add-to-cart__qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .add-to-cart__submit { flex: 1; min-width: 0; } .add-to-cart__message { font-size: 0.9rem; } .add-to-cart__unavailable { margin-top: 0.5rem; } /* --- Cart list (řádky košíku) ------------------------------------------- */ .cart-list { display: flex; flex-direction: column; gap: 1rem; } .cart-row { display: grid; grid-template-columns: 96px 1fr auto auto auto; gap: 1rem; align-items: center; background: #fff; border: 1px solid #e7e2d8; border-radius: 0.5rem; padding: 1rem; } .cart-row--unavailable { border-color: #f0c0c0; background: #fdf6f6; } .cart-row__image { width: 96px; height: 96px; flex-shrink: 0; border-radius: 0.375rem; overflow: hidden; background: #ffffff; display: flex; align-items: center; justify-content: center; } .cart-row__image img { display: block; max-width: 96px; max-height: 96px; width: auto; height: auto; } .cart-row__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #b8a98a; font-size: 2rem; } .cart-row__info { min-width: 0; } .cart-row__sku { font-size: 0.75rem; color: #8a8472; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.25rem; } .cart-row__title { font-size: 1.05rem; margin: 0; font-weight: 500; } .cart-row__title a { color: #2c2c2c; text-decoration: none; } .cart-row__title a:hover { color: var(--accent, #a37a47); } .cart-row__warning { color: #b53636; font-size: 0.85rem; margin: 0.5rem 0 0; } .cart-row__qty { display: inline-flex; align-items: center; gap: 0.5rem; } .cart-row__qty-value { min-width: 2rem; text-align: center; font-weight: 600; } .cart-row__price { text-align: right; min-width: 8rem; } .cart-row__price small { display: block; margin-top: 0.25rem; } .cart-row__remove { background: transparent; border: 0; color: #8a8472; font-size: 1.1rem; padding: 0.5rem; cursor: pointer; transition: color 120ms; } .cart-row__remove:hover:not(:disabled) { color: #b53636; } .cart-row__remove:disabled { opacity: 0.4; cursor: not-allowed; } @media (max-width: 575.98px) { .cart-row { grid-template-columns: 64px 1fr; grid-template-rows: auto auto auto; } .cart-row__image { width: 64px; height: 64px; grid-row: span 3; } .cart-row__qty { grid-column: 2; } .cart-row__price { grid-column: 2; text-align: left; } .cart-row__remove { grid-column: 2; justify-self: end; margin-top: -2rem; } } /* --- Cart summary (souhrn vpravo) --------------------------------------- */ .cart-summary { background: #fff; border: 1px solid #e7e2d8; border-radius: 0.5rem; padding: 1.5rem; } .cart-summary--sticky { position: sticky; top: 1rem; } .cart-summary__title { font-size: 1.25rem; margin: 0 0 1rem; } .cart-summary__items { list-style: none; padding: 0; margin: 0 0 1rem; border-bottom: 1px solid #e7e2d8; padding-bottom: 1rem; } .cart-summary__items li { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.9rem; } .cart-summary__qty { color: #8a8472; } .cart-summary__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-summary__rows { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; margin: 0 0 1rem; } .cart-summary__rows dt { font-weight: 400; color: #5a5648; } .cart-summary__rows dd { margin: 0; text-align: right; } .cart-summary__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #e7e2d8; padding-top: 1rem; font-size: 1.1rem; font-weight: 600; } /* --- Checkout (formuláře + radio options) ------------------------------- */ .checkout-section { background: var(--wl-bg); border: 1px solid #e7e2d8; border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1rem; } .checkout-section h2 { font-size: 1.25rem; margin: 0 0 1rem; } .checkout-options { display: flex; flex-direction: column; gap: 0.5rem; } .checkout-option { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 0.875rem 1rem; border: 1px solid #e7e2d8; border-radius: 0.375rem; cursor: pointer; transition: border-color 120ms, background 120ms; margin: 0; } .checkout-option:hover { border-color: var(--wl-orange); } .checkout-option--active { border-color: var(--wl-orange); background: var(--wl-orange-light); } .checkout-option input[type="radio"] { width: 1.1rem; height: 1.1rem; accent-color: var(--wl-orange); } .checkout-option__label strong { font-weight: 500; } .checkout-option__price { font-weight: 600; } /* --- Order confirmation ------------------------------------------------- */ .order-confirmation { background: #fff; border: 1px solid #e7e2d8; border-radius: 0.5rem; padding: 2.5rem 2rem; text-align: center; max-width: 720px; margin: 0 auto; } .order-confirmation__icon { font-size: 4rem; color: #2e8b57; margin-bottom: 1rem; } .order-confirmation h1 { margin: 0 0 1rem; } .order-confirmation__summary { margin-top: 2rem; text-align: left; background: var(--wl-orange-light); border-left: 3px solid var(--wl-orange); padding: 1.5rem; border-radius: 0.375rem; } .order-confirmation__qr-payment { margin-top: 2rem; text-align: left; background: #f8f9fa; border: 1px solid #dee2e6; padding: 1.5rem; border-radius: 0.375rem; } .qr-payment { display: flex; align-items: flex-start; gap: 2rem; flex-wrap: wrap; } .qr-payment__details { flex: 1 1 200px; } .qr-payment__row { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; align-items: baseline; } .qr-payment__label { color: #6c757d; min-width: 130px; font-size: 0.9em; } .qr-payment__value { font-size: 0.95em; } .qr-payment__code { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .qr-payment__code img { border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 4px; background: #fff; } .qr-payment__code-label { font-size: 0.8em; color: #6c757d; } /* ========================================================================== Homepage – kategorie grid ========================================================================== */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } .category-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 1rem; background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: var(--wl-radius-lg); color: var(--wl-text); text-decoration: none; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .category-card:hover { border-color: var(--wl-accent); transform: translateY(-2px); box-shadow: var(--wl-shadow-md); color: var(--wl-accent); } .category-card__image { width: 64px; height: 64px; object-fit: cover; border-radius: var(--wl-radius); margin-bottom: 0.75rem; } .category-card__placeholder { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--wl-orange); background: var(--wl-orange-light); border-radius: var(--wl-radius); margin-bottom: 0.75rem; } .category-card__title { font-family: var(--wl-font-serif); font-size: 1rem; font-weight: 500; line-height: 1.3; } .category-card__count { font-size: 0.8125rem; color: var(--wl-text-soft); margin-top: 0.25rem; } /* ========================================================================== Category page – banner a pod-kategorie s ikonami ========================================================================== */ .category-banner { border-radius: var(--wl-radius-lg); overflow: hidden; display: flex; justify-content: flex-start; } .category-banner__img { display: block; max-width: 100%; height: auto; } .category-subcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; } .category-subcat-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem 0.75rem; background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: var(--wl-radius-lg); color: var(--wl-text); text-decoration: none; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .category-subcat-card:hover { border-color: var(--wl-orange); transform: translateY(-2px); box-shadow: var(--wl-shadow-md); color: var(--wl-orange); background: var(--wl-orange-light); } .category-subcat-card__icon { width: 56px; height: auto; border-radius: var(--wl-radius); margin-bottom: 0.5rem; } .category-subcat-card__icon-placeholder { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--wl-orange); background: var(--wl-orange-light); border-radius: var(--wl-radius); margin-bottom: 0.5rem; } .category-subcat-card__title { font-size: 0.875rem; font-weight: 500; line-height: 1.3; } .category-subcat-card__count { font-size: 0.75rem; color: var(--wl-text-soft); margin-top: 0.25rem; } @media (max-width: 575.98px) { .category-subcats { grid-template-columns: repeat(3, 1fr); } } /* ===== Section footer (odkaz "Zobrazit vše") ===== */ .section__footer { text-align: center; margin-top: 2rem; } /* ===== Homepage informační bloky ===== */ .home-feature__icon { font-size: 2.5rem; color: var(--wl-accent); } .home-feature__title { margin-top: 1rem; font-size: 1.25rem; } .home-feature__text { color: var(--wl-text-muted); } @media (max-width: 575.98px) { .category-grid { grid-template-columns: repeat(2, 1fr); } .category-card { padding: 1rem 0.75rem; } } /* ========================================================================== Search keyboard shortcut (H-03) ========================================================================== */ /* Ctrl/Cmd+K hint inside the header search bar */ .site-header__search .form-control { padding-right: 5rem; } .site-header__search-hint { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; align-items: center; pointer-events: none; } .site-header__search-hint kbd { font-family: var(--wl-font-sans); font-size: 0.65rem; border: 1px solid var(--wl-border-strong); border-radius: 3px; padding: 1px 4px; background: var(--wl-surface); color: var(--wl-text-muted); line-height: 1.4; } /* Search modal */ .search-modal .modal-dialog { max-width: 600px; margin-top: 8rem; } .search-modal .modal-content { border: 1px solid var(--wl-border); border-radius: var(--wl-radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12); padding: 0; } .search-modal__form { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; } .search-modal__icon { font-size: 1.1rem; color: var(--wl-text-muted); flex-shrink: 0; } .search-modal__input { flex: 1; border: none; outline: none; font-size: 1.1rem; background: transparent; color: var(--wl-text); padding: 0.25rem 0; } /* .search-modal__input::placeholder – přebírá globální ::placeholder styl */ .search-modal__esc { flex-shrink: 0; background: none; border: none; padding: 0; cursor: pointer; color: var(--wl-text-soft); font-size: 0.7rem; display: flex; align-items: center; } .search-modal__esc kbd { font-family: var(--wl-font-sans); font-size: 0.7rem; border: 1px solid var(--wl-border-strong); border-radius: 3px; padding: 1px 6px; background: var(--wl-bg); color: var(--wl-text-muted); } /* ========================================================================== Checkboxy a radio buttony – uživatelská část ========================================================================== */ /* Checkbox – jasně viditelný i v nezaškrtnutém stavu */ .form-check-input[type="checkbox"] { width: 1.15em; height: 1.15em; border: 2px solid #6c757d; background-color: #ffffff; cursor: pointer; } .form-check-input[type="checkbox"]:checked { background-color: var(--wl-orange); border-color: var(--wl-orange); } .form-check-input[type="checkbox"]:focus { border-color: var(--wl-orange); box-shadow: 0 0 0 0.2rem rgba(200, 105, 42, 0.25); } /* Radio button – jasně viditelný i v nevybraném stavu */ .form-check-input[type="radio"] { width: 1.15em; height: 1.15em; border: 2px solid #6c757d; background-color: #ffffff; cursor: pointer; } .form-check-input[type="radio"]:checked { background-color: var(--wl-orange); border-color: var(--wl-orange); accent-color: var(--wl-orange); } .form-check-input[type="radio"]:focus { border-color: var(--wl-orange); box-shadow: 0 0 0 0.2rem rgba(200, 105, 42, 0.25); } /* ========================================================================== Admin overrides – editační pole a checkboxy ========================================================================== */ /* Všechna textová pole v admin oblasti mají bílé pozadí */ .admin-shell .form-control, .admin-shell .form-select { background-color: #ffffff; } .admin-shell .form-control:focus, .admin-shell .form-select:focus { background-color: #ffffff; } /* Checkbox – jasně viditelný i v nezaškrtnutém stavu */ .admin-shell .form-check-input[type="checkbox"] { width: 1.15em; height: 1.15em; border: 2px solid #6c757d; background-color: #ffffff; cursor: pointer; } .admin-shell .form-check-input[type="checkbox"]:checked { background-color: #3d6b50; border-color: #3d6b50; } .admin-shell .form-check-input[type="checkbox"]:focus { border-color: #3d6b50; box-shadow: 0 0 0 0.2rem rgba(61, 107, 80, 0.25); } /* ========================================================================== Cookie Consent Banner ========================================================================== */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #1a1a1a; color: rgba(240, 237, 232, 0.92); z-index: 1090; border-top: 1px solid rgba(255, 255, 255, 0.08); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18); } .cookie-banner--visible { transform: translateY(0); } .cookie-banner--hiding { transform: translateY(100%); transition: transform 0.3s ease-in; } .cookie-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-top: 0.85rem; padding-bottom: 0.85rem; } .cookie-banner__content { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; } .cookie-banner__icon { font-size: 1.15rem; color: var(--wl-accent); flex-shrink: 0; opacity: 0.9; } .cookie-banner__text { margin: 0; font-size: 0.875rem; line-height: 1.45; color: rgba(240, 237, 232, 0.88); } .cookie-banner__text a { color: var(--wl-accent); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner__text a:hover { color: #c49560; } .cookie-banner__btn { background: var(--wl-accent); color: #fff; border: none; border-radius: var(--wl-radius); padding: 0.45rem 1.5rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; flex-shrink: 0; cursor: pointer; transition: background 0.15s ease; line-height: 1.4; } .cookie-banner__btn:hover, .cookie-banner__btn:focus-visible { background: var(--wl-accent-hover); outline: 2px solid rgba(163, 122, 71, 0.4); outline-offset: 2px; } @media (max-width: 575px) { .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 0.75rem; } .cookie-banner__btn { text-align: center; padding: 0.6rem 1.5rem; } }