/* ========================================================= BOHORY — Unified CSS (2025-10-02 • keep theme font-sizes) - NEUPRAVUJE žádné font-size: bere výšky písma ze šablony! - Fonts: Noto Sans (text/UI), Noto Serif (nadpisy) - Global UI unify: odkazy/hover, tlačítka, formuláře, nav - Sekce: .bohory-hero / -about / -material / -custom / -footnote - Footer: 2 sloupce (bez zásahu do obsahu) ========================================================= */ /* ===================== TOKENS ===================== */ :root{ /* Barvy brandu */ --ink:#151515; --muted:#666666; --line:#E5E5E5; --paper:#FAF8F3; --accent:#B08D57; /* zlatohnědá BOHORY */ --accent-ink:#2A2112; /* text na akcentu */ --accent-hover: color-mix(in oklab, var(--accent) 90%, black); /* Spacing */ --gap-1: 8px; --gap-2: 12px; --gap-3: 20px; --gap-4: clamp(24px, 4vw, 40px); --gap-5: clamp(36px, 6vw, 72px); /* Rádiusy (globální) */ --radius: 16px; /* karty/boxy */ --r-button: 14px; /* tlačítka */ --r-input: 12px; /* formuláře */ --r-pill: 999px; /* pilulky */ /* Stíny a rychlosti */ --shadow-soft: 0 10px 28px rgba(0,0,0,.08); --ui-speed: .18s; --focus-ring: var(--accent); /* Max šířka obsahu */ --container: 1200px; } /* Volitelné presety tvarů: přidej třídu na */ body.bohory-square{ --radius: 8px; --r-button: 6px; --r-input: 6px; } body.bohory-rounded{ --radius: 16px; --r-button: 14px; --r-input: 12px; } /* ===================== RESET / BASE (bez font-size!) ===================== */ *, *::before, *::after{ box-sizing: border-box; } p{ margin: 0 0 1em; } ul,ol{ margin: 0 0 1em 1.25em; padding: 0; } .muted{ color: var(--muted); } /* ===================== GLOBAL UI UNIFY ===================== */ /* Odkazy – akcent + hover (žádná „hnědá“) */ a{ color: var(--accent); text-decoration: underline; text-underline-offset: 2px; transition: color var(--ui-speed) ease, text-decoration-color var(--ui-speed) ease, background var(--ui-speed) ease; } a:hover, a:focus-visible{ color: var(--accent-hover); text-decoration-thickness: 2px; } /* Zvýraznění položky Na míru (pilulka) – přidej class="na-miru" na

*/ .menu li.na-miru > a{ border: 1px solid var(--line); border-radius: var(--r-pill); padding: .5rem .9rem; } .menu li.na-miru > a:hover{ box-shadow: var(--shadow-soft); } /* Tlačítka – sjednocení napříč .btn / .button / input (bez font-size) */ :where(.btn, .button, button, input[type="submit"], input[type="button"], .shp-btn){ --_bg: var(--paper); --_fg: var(--ink); --_bd: var(--line); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1rem; min-height: 44px; background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd); border-radius: var(--r-button); text-decoration: none; cursor: pointer; transition: background var(--ui-speed) ease, color var(--ui-speed) ease, border-color var(--ui-speed) ease, box-shadow var(--ui-speed) ease, transform var(--ui-speed) ease; } :where(.btn, .button, button, input[type="submit"], input[type="button"], .shp-btn):hover{ transform: translateY(-1px); box-shadow: var(--shadow-soft); } /* Primární CTA */ :where(.btn-primary, .button.primary, .btn--primary){ --_bg: var(--accent); --_fg: var(--accent-ink); --_bd: var(--accent); } :where(.btn-primary, .button.primary, .btn--primary):hover{ background: var(--accent-hover); border-color: var(--accent-hover); } /* Sekundární (obrys) */ :where(.btn-secondary, .button.secondary, .btn--secondary){ --_bg: transparent; --_fg: var(--accent); --_bd: var(--accent); } :where(.btn-secondary, .button.secondary, .btn--secondary):hover{ background: color-mix(in oklab, var(--accent) 12%, transparent); } /* Ghost */ .btn-ghost{ --_bg: transparent; --_fg: var(--ink); --_bd: transparent; padding-inline: .25rem; border-radius: 8px; } .btn-ghost:hover{ background: rgba(0,0,0,.05); } /* Formuláře (bez font-size) */ :where(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], select, textarea){ background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-input); padding: .6rem .8rem; min-height: 44px; width: 100%; transition: border-color var(--ui-speed) ease, box-shadow var(--ui-speed) ease; } :where(input, select, textarea):focus{ border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); outline: none; } /* Karty / boxy / produkt tile */ :where(.product, .product-card, .box, .card){ border-radius: var(--radius); overflow: clip; } :where(.product .btn, .product-card .btn){ border-radius: var(--r-button); } /* Focus ring – přístupnost */ :where(a, button, input, select, textarea, summary):focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 3px; } /* Pojistka proti „hnědým“ hoverům šablony s vyšší specifitou */ .navbar a:hover, .navigation a:hover, .menu a:hover, a:hover, .btn:hover, .button:hover{ color: inherit; } /* ===================== TYPOGRAFIE SPECIFICKÁ (bez velikostí) ===================== */ .section-title, .bohory-hero h1{ font-family: var(--font-serif); } .product .name, .product-card .name{ font-family: var(--font-serif); font-weight: 600; } /* ===================== SECTIONS ===================== */ /* HERO */ .bohory-hero{ padding-block: clamp(40px, 8vw, 110px); background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); border-bottom: 1px solid var(--line); } .bohory-hero .hero-sub{ max-width: 72ch; color: var(--muted); margin: .75rem 0 var(--gap-3); } .bohory-hero .hero-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--gap-3); } .bohory-hero .hero-usps{ list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } @media (min-width: 720px){ .bohory-hero .hero-usps{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ABOUT */ .bohory-about{ background: var(--paper); border-block: 1px solid var(--line); padding-block: var(--gap-5); } .bohory-about .about-step + .about-step{ margin-top: var(--gap-3); } .bohory-about .about-step h3{ margin-bottom: .35rem; } /* MATERIAL / PÉČE */ .bohory-material{ padding-block: var(--gap-5); } .bohory-material .material-grid{ display: grid; gap: var(--gap-3); margin-top: var(--gap-3); } @media (min-width: 900px){ .bohory-material .material-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } .material-card{ background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(14px, 3vw, 20px); } /* CUSTOM */ .bohory-custom{ padding-block: var(--gap-5); background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); border-top: 1px solid var(--line); } .bohory-custom .custom-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--gap-3); } /* FOOTNOTE */ .bohory-footnote{ padding-block: var(--gap-4); border-top: 1px solid var(--line); } .bohory-footnote .muted{ /* velikost necháme na tématu */ } /* ===================== PRODUKTY / KATEGORIE ===================== */ .product-card{ border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: clip; transition: box-shadow var(--ui-speed) ease, transform var(--ui-speed) ease, border-color var(--ui-speed) ease; } .product-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: color-mix(in oklab, var(--line) 70%, var(--ink)); } .product-card .price{ font-weight: 600; } /* Kategorie – krátký lead nad mřížkou */ .bohory-cats-leads{ list-style: none; margin: 0 0 var(--gap-3); padding: 0; color: var(--muted); } .bohory-cats-leads li + li{ margin-top: 6px; } /* ===================== NAV / HEADER ===================== */ .header, .navbar{ border-bottom: 1px solid var(--line); background: #fff; } .navbar .menu{ display: flex; gap: 14px; align-items: center; } @media (max-width: 960px){ .navbar .menu{ gap: 10px; } } /* ===================== FOOTER (zpět na 2 sloupce) ===================== */ /* Snažím se být kompatibilní s více šablonami. Pokud máš vlastní wrapper, stačí přidat class na ten wrapper a zachová se layout. */ footer .container :where(.footer-columns, .footer__columns, .columns, .links, .footer-navs){ display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 720px){ footer .container :where(.footer-columns, .footer__columns, .columns, .links, .footer-navs){ grid-template-columns: repeat(2, minmax(0,1fr)); } } /* Pokud footer nemá výše uvedené wrapery, použij univerzální fallback: */ @media (min-width: 720px){ footer .container > :where(nav, ul, .footer-section){ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } } /* ===================== UTILITIES ===================== */ .center{ text-align: center; } .hide{ display: none !important; } /* ===================== TIGHT VARIANTA (Shoptet) ===================== */ body.bohory-tight .bohory-hero{ padding-block: clamp(28px, 6vw, 80px); } body.bohory-tight .bohory-about, body.bohory-tight .bohory-material, body.bohory-tight .bohory-custom{ padding-block: clamp(24px, 5vw, 48px); } body.bohory-tight .section-title{ /* velikost necháme na šabloně */ } /* ===================== RTE drobnosti ===================== */ .rte a{ text-underline-offset: 2px; } .rte img{ border-radius: var(--radius); } /* „Jistící“ override, kdyby šablona někde pořád barvila hover do hnědé */ .bohory-root a:hover{ color: var(--accent-hover) !important; } /* ===================== Footer (custom) ===================== */ .bohory-footer{ border-top:1px solid var(--line, #e5e5e5); background: var(--paper, #FAF8F3); color: var(--ink, #151515); padding: clamp(24px, 4vw, 48px) 0; font-size: 15px; } .bohory-footer .bf-grid{ max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,24px); display:grid; gap:clamp(16px,3vw,32px); grid-template-columns:1fr; } @media (min-width:900px){ .bohory-footer .bf-grid{ grid-template-columns: 1.2fr .9fr .9fr; align-items:start; } } .bohory-footer h3,.bohory-footer h4{ margin:0 0 .5rem; line-height:1.2; } .bohory-footer h3{ font-size: clamp(18px, 2.8vw, 22px); letter-spacing:.02em; font-weight:700; } .bohory-footer h4{ font-size: clamp(15px, 2.2vw, 16px); color: var(--accent-ink, #2A2112); } .bohory-footer p{ margin:.4rem 0 .8rem; color: var(--ink, #151515); } .bohory-footer .bf-brand p{ color: var(--muted, #666); } .bohory-footer a{ text-decoration:none !important; color:inherit; border-bottom:1px solid transparent; transition: border-color .15s ease, color .15s ease; } .bohory-footer a:hover,.bohory-footer a:focus-visible{ color: var(--accent-ink, #2A2112); border-bottom-color: var(--accent, #B08D57); outline:none; } .bohory-footer .bf-social{ display:flex; flex-wrap:wrap; gap:.4rem .8rem; color: var(--ink, #151515); } .bohory-footer .bf-social a{ border-bottom:1px solid var(--line, #e5e5e5); } .bohory-footer .bf-social a:hover{ border-bottom-color: var(--accent, #B08D57); } .bohory-footer ul{ list-style:none; margin:.2rem 0 0; padding:0; } .bohory-footer li{ margin:.25rem 0; } @media (max-width:899.98px){ .bohory-footer .bf-brand, .bohory-footer .bf-nav, .bohory-footer .bf-contact{ padding-block:8px; border-top:1px dashed var(--line, #e5e5e5); } .bohory-footer .bf-brand{ border-top:none; } } .bohory-footer .bf-bottom{ margin-top: clamp(16px, 3vw, 24px); padding-top: clamp(12px, 2vw, 16px); border-top: 1px solid var(--line, #e5e5e5); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color: var(--muted, #666); font-size:14px; } /* ===================== Shoptet system footer (#footer) ===================== */ #footer a{ text-decoration: none !important; border-bottom: 1px solid transparent; } #footer a:hover{ border-bottom-color: var(--accent, #B08D57); } #footer .container.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 10px 0; border-top: 1px solid var(--line, #e5e5e5); } #footer #signature{ display:inline-flex !important; align-items:center; gap:8px; font-size:13px; color: var(--muted, #666); opacity:.75; } #footer #signature .image img{ height:16px; width:auto; filter:grayscale(1); opacity:.8; } #footer #signature .title{ font-size:13px; white-space:nowrap; } #footer #signature a{ color:inherit; text-decoration:none !important; border-bottom:0; } #footer #signature a:hover{ opacity:.95; border-bottom:0; } #footer .copyright{ font-size:13px; color: var(--muted, #666); } #footer #signature[style]{ visibility: visible !important; display: inline-flex !important; }