* ========================================================== Back Door – vlastní CSS pro Shoptet šablonu Step Vložit: Vzhled a obsah → Editor → Vlastní CSS ========================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap'); :root { --bd-bg: #2a2c30; /* antracit */ --bd-bg-deep: #212327; /* tmavší plochy: hlavička, patička */ --bd-surface: #33363b; /* karty, inputy */ --bd-line: #44474d; /* linky */ --bd-text: #e9e5df; --bd-muted: #a5a29c; --bd-accent: #9b2f45; /* bordó */ --bd-accent-hover: #b73a56; --bd-brass: #c4a97b; /* mosaz: drobné detaily */ } /* ---------- Základ ---------- */ html, body { background: var(--bd-bg) !important; color: var(--bd-text); font-family: 'Manrope', system-ui, sans-serif; line-height: 1.6; } .content-wrapper, .content-wrapper-in, #content-wrapper, .container, main { background: transparent !important; color: var(--bd-text); } a { color: var(--bd-brass); transition: color .15s; } a:hover, a:focus { color: #e0c99f; } h1, h2, h3, h4, .h1, .h2, .h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; color: var(--bd-text); letter-spacing: .01em; line-height: 1.15; } h1 { font-size: clamp(2rem, 4vw, 3rem); } :focus-visible { outline: 2px solid var(--bd-brass); outline-offset: 2px; } /* ---------- Hlavička a menu ---------- */ header, #header, .header, .top-navigation-bar, .header-top, .navigation-wrapper, .navigation-in { background: var(--bd-bg-deep) !important; color: var(--bd-text) !important; border-color: var(--bd-line) !important; } .top-navigation-bar a, .header a, #header a, .navigation-in a, .menu-helper a { color: var(--bd-text) !important; } .navigation-in a:hover, .navigation-in li:hover > a { color: var(--bd-brass) !important; } .navigation-in ul ul, .menu-level-2, .menu-level-3, .submenu { background: var(--bd-bg-deep) !important; border: 1px solid var(--bd-line); } /* ---------- Tlačítka ---------- */ .btn, button, input[type="submit"], .btn-primary, .btn-conversion { border-radius: 2px !important; font-family: 'Manrope', sans-serif; font-weight: 600; letter-spacing: .02em; transition: background .15s, border-color .15s; } .btn-primary, .btn-conversion, .add-to-cart-button, .btn.btn-cart { background: var(--bd-accent) !important; border-color: var(--bd-accent) !important; color: #fff !important; } .btn-primary:hover, .btn-conversion:hover, .add-to-cart-button:hover, .btn.btn-cart:hover { background: var(--bd-accent-hover) !important; border-color: var(--bd-accent-hover) !important; } .btn-secondary, .btn-default { background: transparent !important; border: 1px solid var(--bd-brass) !important; color: var(--bd-brass) !important; } /* ---------- Formuláře ---------- */ input, select, textarea, .form-control { background: var(--bd-surface) !important; color: var(--bd-text) !important; border: 1px solid var(--bd-line) !important; border-radius: 2px !important; } input::placeholder, textarea::placeholder { color: var(--bd-muted); } /* ---------- Produkty ---------- */ .products .product, .product-list .product, .p { background: var(--bd-surface); border: 1px solid var(--bd-line); border-radius: 2px; } .products .product:hover, .p:hover { border-color: var(--bd-brass); } .products .product .name, .p-name, .p-in .name { color: var(--bd-text) !important; font-weight: 600; } .price-final, .price, .p-price strong, .price-final strong { color: var(--bd-brass) !important; font-weight: 700; } .price-standard, .price-save { color: var(--bd-muted) !important; } .flag, .flags .flag { background: var(--bd-accent) !important; color: #fff !important; border-radius: 2px; } .breadcrumbs, .breadcrumbs a { color: var(--bd-muted) !important; } /* ---------- Tabulky, košík, panely ---------- */ table, .table, .cart-table, .box, .sidebar, .category-perex { background: transparent; color: var(--bd-text); border-color: var(--bd-line) !important; } th { color: var(--bd-brass); } td, th { border-color: var(--bd-line) !important; } /* ---------- Patička ---------- */ footer, #footer, .footer, .footer-bottom, .footer-rows { background: var(--bd-bg-deep) !important; color: var(--bd-muted) !important; border-top: 1px solid var(--bd-line); } footer a, #footer a { color: var(--bd-text) !important; } footer a:hover, #footer a:hover { color: var(--bd-brass) !important; } footer h4, #footer h4 { color: var(--bd-brass); font-size: 1.3rem; } /* ========================================================== ÚVODNÍ STRÁNKA (bloky z souboru 2-uvodni-stranka.html) ========================================================== */ .bd-hero { position: relative; padding: clamp(3.5rem, 10vw, 7rem) 1.25rem; background: linear-gradient(180deg, rgba(33,35,39,.55), rgba(33,35,39,.92)), var(--bd-bg-deep); border-bottom: 1px solid var(--bd-line); text-align: left; } .bd-hero-in { max-width: 1100px; margin: 0 auto; } .bd-hero h1 { font-size: clamp(2.4rem, 6.5vw, 4.8rem); max-width: 14ch; margin: 0 0 1.25rem; } .bd-hero p { max-width: 52ch; color: var(--bd-muted); font-size: 1.05rem; margin: 0 0 2rem; } .bd-btns { display: flex; flex-wrap: wrap; gap: .75rem; } .bd-btn { display: inline-block; padding: .85rem 1.6rem; background: var(--bd-accent); color: #fff !important; border: 1px solid var(--bd-accent); border-radius: 2px; font-weight: 600; text-decoration: none; } .bd-btn:hover { background: var(--bd-accent-hover); border-color: var(--bd-accent-hover); } .bd-btn.alt { background: transparent; border-color: var(--bd-brass); color: var(--bd-brass) !important; } .bd-btn.alt:hover { background: rgba(196,169,123,.1); } .bd-cats { max-width: 1100px; margin: 3rem auto; padding: 0 1.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; } .bd-cat { display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; padding: 1.25rem; background: var(--bd-surface); border: 1px solid var(--bd-line); border-radius: 2px; text-decoration: none; } .bd-cat:hover { border-color: var(--bd-brass); } .bd-cat strong { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.7rem; color: var(--bd-text); line-height: 1.1; } .bd-cat span { color: var(--bd-muted); font-size: .9rem; margin-top: .35rem; } .bd-promise { max-width: 1100px; margin: 0 auto 3.5rem; padding: 2rem 1.25rem 0; border-top: 1px solid var(--bd-line); display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.75rem; } .bd-promise h3 { font-size: 1.35rem; color: var(--bd-brass); margin: 0 0 .4rem; } .bd-promise p { margin: 0; color: var(--bd-muted); font-size: .95rem; } /* ========================================================== OVĚŘENÍ VĚKU 18+ (kód z souboru 3-overeni-veku.html) ========================================================== */ #bd-age { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(20,21,24,.97); } #bd-age.on { display: flex; } #bd-age .bd-age-box { max-width: 460px; width: 100%; padding: 2.25rem 2rem; background: var(--bd-bg); border: 1px solid var(--bd-line); border-top: 3px solid var(--bd-accent); border-radius: 2px; text-align: left; } #bd-age h2 { font-size: 2.1rem; margin: 0 0 .75rem; } #bd-age p { color: var(--bd-muted); margin: 0 0 1.5rem; } #bd-age .bd-btns { gap: .6rem; } body.bd-lock { overflow: hidden; }
Domů / Módní doplňky / Brýle

Brýle

Produkty teprve připravujeme.

Můžete se ale podívat na ostatní kategorie.

Zpět do obchodu

Co potřebujete najít?