/* ===================================================================== VELUR MODA — Black & Gold · Shoptet / šablona VENUS Verze 19.0 · Brightbox Agency --------------------------------------------------------------------- ZMĚNY PROTI v1: · paleta zamčená na #C7983B (zlatá Z LOGA), ne #C9A227 z ChatGPT · text v tlačítkách ČERNÝ (na zlaté je bílá nečitelná — 2,5:1) · tělo webu se ztmavuje přes , ne přes 50 hádaných selektorů · checkout a košík VYNECHÁNY (viz sekce 10) — tam se dark theme nesahá, dokud to neodladíme naživo --------------------------------------------------------------------- NASAZENÍ: 1) Nahraj na FTP do /user/documents/ 2) Vzhled a obsah → Editor → záložka HTML kód → pole ZÁHLAVÍ: (při každé úpravě zvedni ?v= — jinak se drží cache) 3) Testuj v Návrháři šablon nebo na klonu, ne na ostrém webu. POZOR: pole Záhlaví má limit 8000 znaků — proto externí soubor. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap'); /* ============================ 1. PALETA ============================ */ /* JEDINÉ MÍSTO, kde se mění barvy. Nikde jinde nepiš hex natvrdo. */ :root{ --velur-gold: #C7983B; /* základní zlatá — z loga */ --velur-gold-light: #E4C97C; /* hover, zvýraznění */ --velur-gold-line: rgba(199,152,59,.35); /* hairline oddělovače */ --velur-bg: #0B0B0B; /* matná černá — tělo */ --velur-bg-soft: #121212; /* sekce o stupeň výš */ --velur-card: #151515; /* produktové karty */ --velur-line: rgba(255,255,255,.10);/* neutrální předěl */ --velur-text: #F5F5F5; /* hlavní text */ --velur-muted: #A8A29A; /* popisky, meta */ --velur-display: 'Cinzel', 'Times New Roman', serif; --velur-body: 'Cormorant Garamond', Georgia, serif; } /* ======================= 2. ZÁKLAD / TĚLO ========================== */ /* Tohle je ten krok, který Venus nativně NEUMÍ. */ /* Tmavý režim Venusu řeší jen hlavičku a patičku — obsah je na nás. */ /* Pojistka na úrovni plátna: i kdyby body někdo zprůhlednil, prohlížeč kreslí pozadí z . */ html{ background: var(--velur-bg) !important; } body{ background: var(--velur-bg) !important; color: var(--velur-text) !important; font-family: var(--velur-body); font-size: 17px; line-height: 1.65; } /* !! NIKDY nedávat .one-column-body / .multiple-columns-body do seznamu průhledných wrapperů — jsou to třídy PŘÍMO NA . Třída (0-1-0) porazí element body (0-0-1) i s !important a tělo stránky zprůhlední. Přesně to způsobilo bílou homepage ve v12/13. Tady je černá natvrdo na úrovni třídy: */ body.one-column-body, body.multiple-columns-body, body.type-index{ background: var(--velur-bg) !important; } /* Wrappery, které nesou bílou. Zprůhlednit, ne přebarvovat — tím se vyhneme boji o specificitu s Venusem. POZOR: one-column/multiple-columns jsou třídy NA - nesmí sem! Kategorie a detail jsou "multiple-columns-body" — jiné wrappery, jiná bílá. Proto zčernala jen homepage a zbytek ne. */ .overall-wrapper, #content-wrapper, .content-wrapper, .content-wrapper-in, /* <- tenhle držel bílou na kategorii i detailu */ #content, .content, .content-inner, .main-content, .container, .sidebar, .sidebar-inner, .box, /* <- box-bg-default / box-bg-variant v sidebaru */ .box-bg-default, .box-bg-variant, .category-top, .category-content-wrapper, #category-header, .category-header, .products-top-wrapper, .p-detail, .p-detail-inner, .tab-content, .tab-pane, .description-inner, .basic-description, .extended-description, .benefitBanner, .breadcrumbs-wrapper{ background: transparent !important; } /* ========================= 3. TYPOGRAFIE ========================== */ h1, h2, h3, h4, .homepage-group-title, .category-title{ font-family: var(--velur-display) !important; font-weight: 500; letter-spacing: .10em; color: var(--velur-text) !important; } h1, h2, .homepage-group-title{ text-transform: uppercase; color: var(--velur-gold) !important; } p, li, td, .p-desc, .description{ font-family: var(--velur-body); color: var(--velur-text); } a{ color: var(--velur-gold); } a:hover{ color: var(--velur-gold-light); } /* ==================== 4. HLAVIČKA / NAVIGACE ====================== */ /* Venus je tu už černý — jen sjednocujeme zlatou a typografii. */ #header, .top-navigation-bar{ background: var(--velur-bg) !important; border-bottom: 1px solid var(--velur-gold-line); } .navigation-in > ul > li > a{ font-family: var(--velur-display) !important; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--velur-text) !important; } .navigation-in > ul > li > a:hover, .navigation-in > ul > li.exp > a{ color: var(--velur-gold) !important; } /* Logo: vypnout invertování Venusu, aby zlatá zůstala zlatá. (Venus v tmavé verzi logo automaticky převrací do světlé podoby.) */ .site-name img{ -webkit-filter: none !important; filter: none !important; } /* ============================ 5. HERO ============================= */ /* Dočasné ztmavení + odmodření videa. */ /* !! Tohle je BERLIČKA. Správné řešení = přegradovat zdrojové */ /* hero_video_landscape.mp4 a hero_poster.jpg. CSS filtr přes */ /* video stojí výkon a ze špatného zdroje nic nevytáhne. */ .welcome-wrapper video, #welcome-wrapper video, .hero video{ filter: brightness(.72) saturate(.85) sepia(.12) !important; } /* Gradient přes video, aby vynikl bílý nadpis a tlačítko */ .welcome-wrapper .hero-overlay, .hero::after{ background: linear-gradient(180deg, rgba(11,11,11,.30) 0%, rgba(11,11,11,.15) 45%, rgba(11,11,11,.80) 100%) !important; } /* ========================= 6. TLAČÍTKA ============================ */ /* Zásadní: na zlaté je bílý text 2,5:1 = nečitelný. */ /* Černý text na zlaté = 7,8:1. Proto všude černá. */ .btn, .btn-primary, .btn-secondary, .btn-conversion, button[type="submit"]{ font-family: var(--velur-display) !important; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; border-radius: 0 !important; transition: all .25s ease; } /* Plná zlatá tlačítka (DETAIL, Do košíku) */ .btn-primary, .btn-conversion, .p-tools .btn, button[type="submit"]{ background: var(--velur-gold) !important; border: 1px solid var(--velur-gold) !important; color: #0B0B0B !important; /* ← černý text, ne bílý */ } .btn-primary:hover, .btn-conversion:hover, .p-tools .btn:hover, button[type="submit"]:hover{ background: var(--velur-gold-light) !important; border-color: var(--velur-gold-light) !important; color: #0B0B0B !important; } /* Outline varianta — zlatý rámeček, při najetí zlatá výplň. Přesně to, co klient popsal. Používej na NAKUPOVAT v heru. */ .btn-outline, .welcome-wrapper .btn, .next-to-carousel-banners .btn{ background: transparent !important; border: 1px solid var(--velur-gold) !important; color: var(--velur-gold) !important; } .btn-outline:hover, .welcome-wrapper .btn:hover, .next-to-carousel-banners .btn:hover{ background: var(--velur-gold) !important; color: #0B0B0B !important; } /* ============ 6b. OVĚŘENÉ SELEKTORY (z inspektoru) =============== */ /* Tohle už není hádání — vzato z živého DOMu. */ /* --- Hero tlačítko ------------------------------------------------ POZOR: v HTML uvítacího textu má inline style="background:#fff..." Inline styl přebije všechno kromě !important. SPRÁVNÁ oprava je ty inline styly z HTML SMAZAT a nechat to na tomhle pravidle. !important je tu jen jako záchranná síť, kdyby v HTML zůstaly. */ .velur-hero-btn{ display: inline-block; margin-top: 8px; padding: 14px 38px !important; background: transparent !important; border: 1px solid var(--velur-gold) !important; color: var(--velur-gold) !important; font-family: var(--velur-display) !important; /* ne Proxima Nova */ font-weight: 500 !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .16em !important; text-decoration: none; border-radius: 0 !important; transition: background .3s ease, color .3s ease; } .velur-hero-btn:hover{ background: var(--velur-gold) !important; color: #0B0B0B !important; } /* --- Košík v patičce / hlavičce ----------------------------------- Text je ve vnitřních spanech, které si drží vlastní barvu. Proto zlatý pruh s neviditelným textem. Barva musí do potomků. */ .btn-primary .cart-overview-item-count, .btn-primary .cart-overview-final-price, .btn-primary > span, .btn-conversion > span{ color: #0B0B0B !important; } /* --- Oblíbené kategorie (kolečka) --------------------------------- POZOR NA PAST: je PRÁZDNÝ překryv přes celou dlaždici (klikatelnost), NE ten kroužek. Kroužek je nad ním. Rámeček na .menu-image = obdélník kolem celé dlaždice. Nedělat. */ .fav-cat{ background: transparent !important; } .fav-cat .menu-image{ border: 0 !important; background: transparent !important; } /* Kroužek je img — ring dáváme sem, ale jen na hover, ať je to klidné */ .fav-cat li img{ transition: opacity .3s ease; } .fav-cat li:hover img{ opacity: .75; } /* Popisky */ .fav-cat li div a, .fav-cat li div a span{ font-family: var(--velur-display) !important; font-size: 12px !important; letter-spacing: .10em; text-transform: uppercase; color: #F5F5F5 !important; /* natvrdo — proměnná tu prohrávala */ } .fav-cat li:hover div a span{ color: var(--velur-gold) !important; } /* ====================== 7. PRODUKTOVÉ KARTY ====================== */ /* OPRAVENO PODLE ŽIVÉHO DOMu. Původní verze mířila na .p-image — ten ale existuje JEN na detailu produktu. V mřížce (homepage, kategorie) je obal fotky uvnitř
. Struktura: .product > .p > a.image + .p-in > .p-in-in / .p-bottom */ .products .product{ background: transparent !important; } .products .p{ background: var(--velur-card) !important; border: 1px solid var(--velur-line) !important; border-radius: 0 !important; transition: border-color .3s ease; } .products .product:hover .p{ border-color: var(--velur-gold-line) !important; } /* --- Fotka v mřížce: bílá pasparta, zlatý předěl ------------------ Poměr už řeší Shoptet (Nastavení → Produkty → Zobrazení = 2:3, v URL x=423&y=634), takže tady NEOŘEZÁVÁME. Žádný object-fit, žádný aspect-ratio — fotky chodí jednotné, nemá to co spravovat. */ .products .p > a.image{ display: block; background: #FFFFFF !important; /* čistá bílá, ne krém */ border-bottom: 1px solid var(--velur-gold-line) !important; overflow: hidden; } .products .p > a.image img{ display: block; width: 100% !important; height: auto !important; border-radius: 0 !important; transition: transform .6s ease; } .products .product:hover .p > a.image img{ transform: scale(1.03); } /* Název — je to …, ne .p-name */ .products .p a.name, .products .p a.name span{ font-family: var(--velur-display) !important; font-size: 14px !important; letter-spacing: .06em; color: #F5F5F5 !important; } .products .p a.name:hover span{ color: var(--velur-gold) !important; } /* Cena —
180 Kč
*/ .price-final, .price-final strong, .prices .price-final strong{ color: var(--velur-gold) !important; font-family: var(--velur-display) !important; font-weight: 500; } .p-desc, .p-short-description, .p-short-description p, .p-short-description span{ color: var(--velur-muted) !important; font-size: 15px; } /* Varianty pod kartou (S / M / L / XL) */ .widget-parameter-value a{ color: var(--velur-muted) !important; border: 1px solid var(--velur-line) !important; } .widget-parameter-value a:hover{ color: var(--velur-gold) !important; border-color: var(--velur-gold) !important; } .widget-parameter-more span{ color: var(--velur-muted) !important; } /* ==================== 8. USP PRUH / ODDĚLOVAČE =================== */ hr{ border: 0 !important; height: 1px !important; background: linear-gradient(90deg, transparent, var(--velur-gold-line) 20%, var(--velur-gold-line) 80%, transparent) !important; } /* Zlatý hairline mezi sekcemi homepage */ .homepage-box + .homepage-box::before, .banners-row + .products-block::before{ content: ""; display: block; height: 1px; margin: 0 0 48px; background: linear-gradient(90deg, transparent, var(--velur-gold-line), transparent); } /* ===================== 9. O ZNAČCE / PATIČKA ===================== */ .welcome-wrapper, #welcome-wrapper{ background: var(--velur-bg-soft) !important; color: var(--velur-text) !important; } #footer, .footer, .custom-footer{ background: #080807 !important; color: var(--velur-muted) !important; border-top: 1px solid var(--velur-gold-line) !important; } #footer h3, #footer h4, .footer h4, .custom-footer h3, .custom-footer h4, .custom-footer .pageElement__heading, .custom-footer .pageElement__heading span, .custom-footer .contact-box > strong{ font-family: var(--velur-display) !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: .14em !important; font-size: 13px !important; color: var(--velur-gold) !important; } /* Košíkové CTA v patičce: "ks /" je holý text přímo v a dědil šedou z pravidla #footer a — ID přebíjelo .btn-primary (1,0,1 > 0,1,0). Tady černá s vyšší specificitou, včetně hoveru. */ #footer a.btn, #footer a.btn:hover, .footer a.btn, .footer a.btn:hover, .custom-footer a.btn, .custom-footer a.btn:hover, .cart-overview a.btn-primary, .cart-overview a.btn-primary:hover{ color: #0B0B0B !important; } #footer a, .footer a{ color: var(--velur-muted) !important; } #footer a:hover, .footer a:hover{ color: var(--velur-gold) !important; } /* ============= 10. KOŠÍK, OBJEDNÁVKA, OSTATNÍ STRÁNKY ============= */ /* v8: PODLE ŽIVÉHO HTML, ne z hlavy. Body košíku i checkoutu má třídu "ordering-process". ŽÁDNÉ type-cart / type-order / #checkout NEEXISTUJE — moje v7 selektory nesedly na nic. */ body.ordering-process, body.type-page, body.type-search, body.type-login, body.type-registration, body.type-article, body.type-404{ background: var(--velur-bg) !important; color: var(--velur-text) !important; } /* Reálné wrappery z DOMu */ #cart-wrapper, .cart-wrapper, .cart-inner, .cart-row, .cart-content, .cart-summary, .extras-wrapper, .extras-col, .extras-wrap, .sidebar-in-cart, .checkout-box-wrapper, .summary-wrapper, #checkoutContent, #checkoutSidebar, .order-summary, .order-summary-inner, #summary-box, .cart-items, .cart-item, .co-box, .checkout-box, .shipping-billing-table, .content-inner{ background: transparent !important; color: var(--velur-text) !important; } /* Kroky objednávky */ .cart-header .step strong span, .cart-header .step a span{ color: var(--velur-muted) !important; } .cart-header .step.active strong span{ color: var(--velur-gold) !important; font-family: var(--velur-display) !important; } .cart-header .step.completed a span{ color: var(--velur-text) !important; } /* Tabulka košíku */ .cart-table, .cart-table td, .cart-table th{ background: transparent !important; color: var(--velur-text) !important; border-color: var(--velur-line) !important; } .cart-table .p-label{ color: var(--velur-muted) !important; } .cart-table .main-link{ color: var(--velur-text) !important; } .cart-table .main-link-variant{ color: var(--velur-muted) !important; } .cart-p-image{ background: #FFFFFF !important; } /* Dostupnost má INLINE style="color:#3c840f" — tmavá zeleň na černé je 2,4:1. Inline styl porazíme jen !important. */ .availability-label{ color: #6FCF3F !important; } /* Doprava a platba */ .radio-wrapper{ background: transparent !important; border: 1px solid var(--velur-line) !important; } .radio-wrapper:hover{ border-color: var(--velur-gold-line) !important; } .shipping-billing-name{ color: var(--velur-text) !important; } .sublabel, .sublabel-description{ color: var(--velur-muted) !important; } .payment-shipping-price{ color: var(--velur-gold) !important; } .not-possible-info{ color: #FF8A80 !important; } .order-icon, h4.order-icon{ color: var(--velur-gold) !important; font-family: var(--velur-display) !important; } /* !! LOGA DOPRAVCŮ A PLATEB !! Balíkovna, PPL, ShoptetPay, Apple Pay, Google Pay jsou SVG od Shoptetu — tmavá kresba na průhledném pozadí. Na černé ZMIZÍ. Nedá se to invertovat (rozbily by se barvy log). Podložíme je bílou destičkou — stejný princip jako u produktových fotek. */ .payment-logo{ background: #FFFFFF !important; padding: 6px 10px !important; border-radius: 2px; display: inline-block; } /* Rekapitulace */ .price-label, .price-primary{ color: var(--velur-text) !important; } strong.price.price-primary, .order-summary-item.price strong{ color: var(--velur-gold) !important; font-family: var(--velur-display) !important; } .cart-item-name a{ color: var(--velur-text) !important; } .cart-item-amount, .cart-item-price, .unit-value{ color: var(--velur-muted) !important; } .order-summary-item{ border-color: var(--velur-line) !important; } /* Zpět do obchodu — sekundární tlačítko */ .next-step-back{ background: transparent !important; border: 1px solid var(--velur-line) !important; color: var(--velur-muted) !important; } .next-step-back:hover{ border-color: var(--velur-gold) !important; color: var(--velur-gold) !important; } /* Cookie lišta */ .siteCookies, #cookiesConsent{ background: #141414 !important; color: #F5F5F5 !important; } /* ====================== 11. FORMULÁŘE ============================ */ /* Nově GLOBÁLNĚ včetně košíku a objednávky. */ input:not([type="submit"]):not([type="button"]), select, textarea, .form-control{ background: var(--velur-card) !important; color: var(--velur-text) !important; border: 1px solid var(--velur-line) !important; border-radius: 0 !important; } input:focus, select:focus, textarea:focus, .form-control:focus{ border-color: var(--velur-gold) !important; outline: 2px solid transparent; /* dostupnost: focus zůstává vidět */ box-shadow: 0 0 0 1px var(--velur-gold); } label, .form-group label{ color: var(--velur-text) !important; } ::placeholder{ color: var(--velur-muted) !important; opacity: 1; } /* Chybové hlášky MUSÍ zůstat čitelné — červená na černé je 3,4:1, proto světlejší odstín. Tohle není estetika, tohle je konverze. */ .msg-error, .error, .has-error label, .validator-msg{ color: #FF8A80 !important; } /* ========================= 12. MOBIL ============================= */ @media (max-width: 768px){ body{ font-size: 16px; } .navigation-in, .mobile-menu{ background: var(--velur-bg) !important; } h1, h2{ letter-spacing: .06em; } } /* ==================== 13. DOSTUPNOST / MOTION ==================== */ @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; } } :focus-visible{ outline: 2px solid var(--velur-gold) !important; outline-offset: 2px; } /* ============= 14. KATEGORIE A DETAIL PRODUKTU ==================== */ /* Tyhle dvě stránky zůstaly ve v3 bílé se zlatým textem = nečitelné. Zlatá na bílé má kontrast 2,5:1. A jsou to zrovna stránky, kde se prodává. Selektory níž jsou z živého DOMu, ne z hlavy. */ /* --- Drobečková navigace --- */ .breadcrumbs, .breadcrumbs span, .breadcrumbs a{ color: var(--velur-muted) !important; } .breadcrumbs a:hover{ color: var(--velur-gold) !important; } /* --- Nadpisy boxů v sidebaru: "Kategorie", "Top 5 produktů" ------- */ .pageElement__heading, .pageElement__heading span{ font-family: var(--velur-display) !important; text-transform: uppercase; letter-spacing: .12em; font-size: 13px !important; color: var(--velur-gold) !important; } /* --- Strom kategorií v sidebaru --- */ #categories .topic a{ color: #F5F5F5 !important; font-family: var(--velur-body); } #categories ul li a{ color: var(--velur-muted) !important; } #categories .topic a:hover, #categories ul li a:hover{ color: var(--velur-gold) !important; } #categories .topic.active > a, #categories .topic.child-active > a, #categories li.active > a{ color: var(--velur-gold) !important; } /* --- Top 5 produktů v sidebaru --- */ .top-products-name{ font-family: var(--velur-display) !important; color: #F5F5F5 !important; } .top-products-content strong{ color: var(--velur-gold) !important; } .top-products-image{ background: #FFFFFF !important; display: inline-block; } /* --- Nadpis kategorie --- */ .category-title, h1.category-title{ color: var(--velur-gold) !important; } /* --- Podkategorie s obrázkem (Body / Halenky / Korzety) --- */ .subcategories.with-image li a{ background: var(--velur-card) !important; border: 1px solid var(--velur-line) !important; } .subcategories.with-image li a:hover{ border-color: var(--velur-gold) !important; } .subcategories .text{ font-family: var(--velur-display) !important; color: #F5F5F5 !important; } .subcategories .image{ background: #FFFFFF !important; } /* --- Řazení + počty --- */ .products-top-header, .listSorting__control{ font-family: var(--velur-display) !important; background: transparent !important; color: var(--velur-muted) !important; border: 0 !important; } .listSorting__control--current{ color: var(--velur-gold) !important; border-bottom: 1px solid var(--velur-gold) !important; } .listItemsTotal, .itemsTotal, .listItemsTotal strong, .itemsTotal strong{ color: var(--velur-muted) !important; } /* --- Stránkování / načíst další --- */ .pagination__currentPage{ color: var(--velur-gold) !important; } .pagination__link{ color: var(--velur-muted) !important; } /* --- USP pruh (benefitBanner) — konečně známe třídy --- */ .benefitBanner__title{ font-family: var(--velur-display) !important; color: #F5F5F5 !important; } .benefitBanner__data{ color: var(--velur-muted) !important; } /* --- DETAIL PRODUKTU --------------------------------------------- */ .p-detail-inner-header h1{ color: var(--velur-gold) !important; } /* Hlavní fotka zůstává na bílé ploše — stejný princip jako v mřížce */ .p-detail .p-image{ background: #FFFFFF !important; border: 1px solid var(--velur-gold-line) !important; } .p-thumbnail{ background: #FFFFFF !important; border: 1px solid var(--velur-line) !important; } .p-thumbnail.highlighted{ border-color: var(--velur-gold) !important; } /* Cenový blok — Venus mu dává světlé pozadí */ .p-final-price-wrapper{ background: var(--velur-bg-soft) !important; border: 1px solid var(--velur-gold-line) !important; } /* Tabulka parametrů + varianty */ .detail-parameters th, .detail-parameters td{ color: var(--velur-text) !important; border-color: var(--velur-line) !important; background: transparent !important; } .detail-parameters a{ color: var(--velur-gold) !important; } select.hidden-split-parameter, .p-detail select{ background: var(--velur-card) !important; color: var(--velur-text) !important; border: 1px solid var(--velur-line) !important; } /* Množství +/- */ .quantity input.amount, .quantity .increase, .quantity .decrease{ background: var(--velur-card) !important; color: var(--velur-text) !important; border: 1px solid var(--velur-line) !important; } /* Záložky Popis / Diskuze */ .shp-tabs .shp-tab-link{ font-family: var(--velur-display) !important; color: var(--velur-muted) !important; background: transparent !important; } .shp-tab.active .shp-tab-link{ color: var(--velur-gold) !important; border-bottom: 1px solid var(--velur-gold) !important; } .basic-description h3, .extended-description h3{ color: var(--velur-gold) !important; } .link-icons a{ color: var(--velur-muted) !important; } .link-icons a:hover{ color: var(--velur-gold) !important; } /* ================================================================= 15. DEFINITIVNÍ MAPA — opsáno z Venus style.css (6 073 řádků) ----------------------------------------------------------------- Každý selektor níž je OPSANÝ ze skutečného souboru šablony, ne odhadnutý. Zdroj: 235 pravidel se světlým pozadím, 32 pseudo. KLÍČOVÉ ZJIŠTĚNÍ: Venus téměř nepoužívá !important. Naše pravidla s !important proto vyhrávají VŽDY — nikdy nešlo o specificitu, šlo o mušku. Sekce nahrazuje bývalé 15/16/17. ================================================================= */ /* ---------- 15.1 KOŠÍK & OBJEDNÁVKA (všechny 3 kroky) ----------- */ /* Hlavní světlý panel — pseudoprvek na gridovém sloupci. Venus: .cart-row>div.col-md-8::before { #F5F5F5 } */ .cart-row > div.col-md-8::before{ background: transparent !important; } /* Lišta kroků 1-2-3 (Venus: ol.cart-header { #F6F6F6 }) */ ol.cart-header{ background: transparent !important; } ol.cart-header li a, ol.cart-header li a span{ color: var(--velur-muted) !important; } ol.cart-header li strong, ol.cart-header li strong span{ color: var(--velur-gold) !important; font-family: var(--velur-display) !important; } /* Kolečka s čísly kroků (Venus: span::before { #E9E9E9 }) */ ol.cart-header li a span::before{ background: var(--velur-card) !important; color: var(--velur-muted) !important; } ol.cart-header li strong span::before{ background: var(--velur-gold) !important; color: #0B0B0B !important; } /* Buňky tabulky košíku (Venus: .cart-table tr td { #fff }) */ .cart-table tr td, .cart-table tr.related td{ background: transparent !important; } .cart-table tr td.cart-p-image{ background: #FFFFFF !important; } /* pasparta fotky zůstává */ .quantity{ background: transparent !important; } /* Kupón, dárek, doplňky objednávky */ .discount-coupon, .free-gift, .advanced-order .extras-wrap{ background: var(--velur-bg-soft) !important; border: 1px solid var(--velur-line) !important; color: var(--velur-text) !important; } /* Krok 2 = id--17: select země měl natvrdo #E9E9E9 */ .id--17 select#billCountryId{ background: var(--velur-card) !important; color: var(--velur-text) !important; } /* ---------------- 15.2 DETAIL PRODUKTU -------------------------- */ .p-image:after{ background: transparent !important; } /* šedý overlay fotky */ .p-thumbnails::after{ background: transparent !important; } /* bílý proužek u náhledů */ .p-thumbnails .thumbnail-next, .p-thumbnails .thumbnail-prev{ background: var(--velur-card) !important; color: var(--velur-text) !important; } /* Bílý panel POPIS PRODUKTU / DISKUZE */ .shp-tabs-wrapper > .row > div:not(.shp-tabs-row){ background: transparent !important; } .one-column-body .shp-tabs-wrapper > .row > div:not(.shp-tabs-row)::before{ background: transparent !important; } .extended-description .detail-parameters tr:hover{ background: var(--velur-card) !important; } .products-block .p-code{ background: var(--velur-card) !important; color: var(--velur-muted) !important; } .type-detail .bottom, .type-product .bottom{ background: transparent !important; border: 1px solid var(--velur-gold-line) !important; } /* Fade-out přechody: bývalé bílé bloky teď plynou do našich barev */ .all-param::after{ background: linear-gradient(rgba(11,11,11,0), #0B0B0B) !important; } .widget-parameter-list::after{ background: linear-gradient(rgba(21,21,21,0), #151515) !important; } .content .slider-wrapper.otevreny::after{ background: linear-gradient(rgba(11,11,11,0), #0B0B0B) !important; } .products-related:after{ background: linear-gradient(rgba(11,11,11,0), #0B0B0B) !important; } /* ------------ 15.3 KATEGORIE / SIDEBAR / FILTRY ----------------- */ /* Pruh za aktivní kategorií: OBYČEJNÉ pozadí, žádný pseudoprvek. Venus: .categories .topic.active > a { #fff } */ .categories .topic > a:hover, .categories .topic.active > a{ background: transparent !important; } .content #filters{ background: var(--velur-bg-soft) !important; } .content #filters::before{ background: transparent !important; } #clear-filters{ background: transparent !important; border: 1px solid var(--velur-line) !important; color: var(--velur-muted) !important; } .filter-count{ background: var(--velur-card) !important; color: var(--velur-text) !important; } .subcategories li a{ background: var(--velur-card) !important; } ul.manufacturers h2{ background: transparent !important; color: var(--velur-gold) !important; } .search-results-groups #search-group-categories .search-results-group-list ul li a{ background: var(--velur-card) !important; color: var(--velur-text) !important; } .container.breadcrumbs-wrapper{ background: transparent !important; } /* -------- 15.4 PLOVOUCÍ KOMPONENTY (tmavé, NE průhledné) -------- Průhledný popup nad stránkou = nečitelný. Proto bg-soft. */ .menu-level-1, .top-navigation-bar-menu-helper, .menu-level-2, .navigation-in ul ul{ background: var(--velur-bg-soft) !important; border: 1px solid var(--velur-gold-line) !important; } .menu-level-1 a, .menu-level-2 a, .top-navigation-bar-menu-helper a{ color: var(--velur-text) !important; } .menu-level-1 a:hover, .menu-level-2 a:hover, .top-navigation-bar-menu-helper a:hover{ color: var(--velur-gold) !important; } .menu-level-2::before{ background: transparent !important; } .navigation-in > ul > li.ext > ul::before{ background: var(--velur-bg-soft) !important; } /* Menu "Další" (hamburger v hlavičce) */ .menu-helper > ul{ background: var(--velur-bg-soft) !important; border: 1px solid var(--velur-gold-line) !important; } .menu-helper-visible .menu-helper::after{ background: var(--velur-bg-soft) !important; } .menu-helper ul li a{ color: var(--velur-text) !important; } .menu-helper ul li a:hover{ color: var(--velur-gold) !important; } .dropdown-menu{ background: var(--velur-bg-soft) !important; border: 1px solid var(--velur-gold-line) !important; } .dropdown-menu a{ color: var(--velur-text) !important; } .dropdown-menu .divider{ background: var(--velur-line) !important; } .dropdown.open button::after{ background: var(--velur-bg-soft) !important; } .search-whisperer{ background: var(--velur-bg-soft) !important; border-color: var(--velur-gold-line) !important; } .search-whisperer-documents{ background: var(--velur-card) !important; } .popup-widget::before{ background: var(--velur-bg-soft) !important; } .login-widget .popup-widget-inner{ background: var(--velur-bg-soft) !important; } .login-widget .social-login-buttons{ background: var(--velur-card) !important; } .cart-widget-button{ background: var(--velur-card) !important; } .cart-widget-product:hover{ background: var(--velur-card) !important; } .ui-menu .ui-menu-item{ background: var(--velur-bg-soft) !important; color: var(--velur-text) !important; } .ui-menu .ui-menu-item:hover, .ui-menu .ui-state-focus, .ui-menu .ui-state-active{ background: var(--velur-card) !important; } .ui-datepicker{ background: var(--velur-bg-soft) !important; color: var(--velur-text) !important; border: 1px solid var(--velur-gold-line) !important; } .ui-datepicker th a.ui-state-highlight, .ui-datepicker td a.ui-state-highlight, .ui-datepicker th a.ui-state-active, .ui-datepicker td a.ui-state-active{ background: var(--velur-card) !important; color: var(--velur-gold) !important; } .country-flags, .country-flags.active .country-flags-inner, .country-flags.active .country-flag{ background: var(--velur-bg-soft) !important; } .news-item .text{ background: var(--velur-card) !important; color: var(--velur-text) !important; } /* Bílé překryvy při načítání (rgba 255 / 0.65) oslepovaly */ .loader-wrapper::after, .ajax-pending-element::after{ background: rgba(11,11,11,.65) !important; } .loader-overlay, .overlay{ background: rgba(11,11,11,.65) !important; } /* --------- 15.5 INDIKÁTORY V NAVIGACI: z bílé na zlatou --------- */ .navigation-in > ul > li.exp > a::after, .navigation-in > ul > li > a.active::after, .navigation-in > ul > li:not(.exp) > a.active::after{ background: var(--velur-gold) !important; } /* ------------- 15.6 DISABLED TLAČÍTKA (byla bílá) --------------- */ .btn.btn-default.disabled, a.btn.btn-default.disabled, .btn.btn-primary.disabled, a.btn.btn-primary.disabled, .btn.btn-secondary.disabled, a.btn.btn-secondary.disabled, .btn.btn-conversion.disabled, a.btn.btn-conversion.disabled, .btn.btn-cart.disabled, a.btn.btn-cart.disabled, .btn.btn-special.disabled, a.btn.btn-special.disabled{ background: var(--velur-card) !important; color: var(--velur-muted) !important; border-color: var(--velur-line) !important; } /* ------------------ 15.7 USP A KOLEČKA (z v6) -------------------- */ .benefitBanner__title{ font-family: var(--velur-display) !important; color: #F5F5F5 !important; } .benefitBanner__data{ color: var(--velur-muted) !important; } .fav-cat li div a, .fav-cat li div a span{ font-family: var(--velur-display) !important; font-size: 12px !important; letter-spacing: .10em; text-transform: uppercase; color: #F5F5F5 !important; } .fav-cat li:hover div a span{ color: var(--velur-gold) !important; } .fav-cat .menu-image{ border: 0 !important; background: transparent !important; } /* ------------- 15.8 VĚDOMĚ PONECHÁNO SVĚTLÉ --------------------- input checkbox/radio +label::before -> bílé čtverečky polí, na černé jsou VIDĚT — to chceme #cboxContent (lightbox fotek) -> fotky jsou na bílé .entrance-protection-inner -> modal věkové brány .site-msg .close::before/::after -> bílý křížek zavření .news-item-detail ul li::before -> bílé odrážky v článku .ui-slider / .ui-slider-handle -> jezdec cenového filtru .image360 -> nepoužíváte .payment-logo -> NAŠE bílé destičky pod logy dopravců — záměr .admin-bar -> vidíš jen ty ----------------------------------------------------------------- */ /* ================================================================= OVĚŘENÍ v12: skener pseudoprvků + běžný skener na všech šesti stránkách musí vrátit jen položky ze sekce 15.8. ================================================================= */ /* ================================================================= 15.9 DRUHÁ POLOVINA MAPY — selektory 91–194 z Venus style.css (v12 zkontrolovala jen prvních 90 běžných selektorů; tady je zbytek + navrácená pravidla z v5, která v12 omylem smazala) ================================================================= */ /* --- NAVRÁCENO Z v5: detail produktu (v12 to smazala) ------------ */ .p-info-wrapper, .p-image-wrapper, .product-top, .add-to-cart, .p-thumbnails, .p-thumbnails-wrapper, .p-thumbnails-inner{ background: transparent !important; } /* Venus potvrdil pravý zdroj panelu: .buy-box .bottom { #F5F5F5 } */ .buy-box .bottom{ background: transparent !important; border: 1px solid var(--velur-gold-line) !important; } .p-final-price-wrapper{ background: transparent !important; border: 0 !important; border-top: 1px solid var(--velur-gold-line) !important; border-bottom: 1px solid var(--velur-gold-line) !important; padding: 18px 0 !important; } .p-final-price-wrapper .price-final, .price-final-holder{ background: transparent !important; color: var(--velur-gold) !important; } /* --- Sidebar + filtry (Venus: .categories.expandable.expanded) --- */ .categories.expandable.expanded, #categories ul, #categories .categories{ background: transparent !important; } .content .filter-section, .content .filter-section form, .content .slider-wrapper, .content #filters .otevreny h4, #filters h4:hover, #category-filter-hover .filter-section:last-child{ background: transparent !important; } .content form .filter-label:hover{ background: var(--velur-card) !important; } .category-header form fieldset label{ background: transparent !important; color: var(--velur-text) !important; } .category-header input[type="radio"]+label:hover{ background: transparent !important; } .subcategories li.divider{ background: var(--velur-gold-line) !important; } .fav-cat li:hover{ background: transparent !important; } /* --- Chipy variant na produktových kartách (byly bílé) ----------- */ .widget-parameter-list{ background: var(--velur-card) !important; } .widget-parameter-list li a, .widget-parameter-more{ background: transparent !important; } .all-param{ background: linear-gradient(180deg, transparent 0%, #0B0B0B 100%) !important; } .all-param span{ background: var(--velur-card) !important; color: var(--velur-muted) !important; } /* --- Stránkování + řazení (Venus tu má !important) --------------- */ .pagination__link, .btn.pagination__link{ background: transparent !important; border: 1px solid var(--velur-line) !important; color: var(--velur-muted) !important; } .pagination__link:hover, a.btn.pagination__link:hover{ background: var(--velur-card) !important; color: var(--velur-gold) !important; border-color: var(--velur-gold-line) !important; } .pagination__currentPage{ background: var(--velur-gold) !important; color: #0B0B0B !important; border: 1px solid var(--velur-gold) !important; } .listSorting__controls li button{ background: transparent !important; } .more-items-trigger{ background: transparent !important; border: 1px solid var(--velur-gold) !important; color: var(--velur-gold) !important; } /* --- Přihlášení / registrace / klientské centrum ----------------- */ .sign .content form, .id--13 #register-form .form-group.submit-wrapper{ background: var(--velur-bg-soft) !important; border: 1px solid var(--velur-line) !important; } .klient-centrum .content td{ background: transparent !important; color: var(--velur-text) !important; } .id--15 .content-inner{ background: transparent !important; } /* --- Košík: drobky, co v8 minula ---------------------------------- */ .cart-table tr{ background: transparent !important; } /* v8 řešila jen td */ .cart-widget{ background: var(--velur-bg-soft) !important; } .empty-cart-hover, .empty-cart-boxes ul li a{ background: var(--velur-card) !important; color: var(--velur-text) !important; } .quantity-discounts__item{ background: var(--velur-card) !important; } .quantity-discounts__save{ background: var(--velur-bg-soft) !important; } .shipping-options-popup .extra.delivery{ background: var(--velur-card) !important; } .form-control[disabled], select[disabled]{ background: var(--velur-bg-soft) !important; color: var(--velur-muted) !important; } /* --- OPRAVA MÉ CHYBY z v7: validační hlášky ---------------------- Venus jim dává růžové pozadí #FFCACA. Já jim ve v7 dal světle červený text -> světlá na světlé. Růžová zůstává (upoutá na černé stránce), text tmavě červený = čitelné. */ .validator-msg, .js-validator-msg{ background: #FFCACA !important; color: #8B1A1A !important; } /* --- Jazykové menu, select2, masky -------------------------------- */ .languagesMenu__list, .languagesMenu__content{ background: var(--velur-bg-soft) !important; color: var(--velur-text) !important; } .languagesMenu__header{ background: var(--velur-card) !important; color: var(--velur-text) !important; } .select2-dropdown, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple{ background: var(--velur-card) !important; color: var(--velur-text) !important; border: 1px solid var(--velur-line) !important; } .select2-container--default .select2-results__option--selected{ background: var(--velur-bg-soft) !important; } .select2-close-mask{ background: rgba(11,11,11,.65) !important; } /* --- Mobilní hamburger + sociální ikony (byly bílé) --------------- */ .navigation-buttons a[data-target="navigation"], .navigation-window-visible .navigation-buttons a[data-target="navigation"], .navigation-window-visible .navigation-buttons a[data-target="navigation"]:hover{ background: transparent !important; } a.social-icon{ background: var(--velur-card) !important; } .social-buttons{ background: transparent !important; } /* --- Doplňky a moduly třetích stran -------------------------------- */ .card{ background: var(--velur-card) !important; color: var(--velur-text) !important; } #dklabCountdownContainer, .type-category .dklabCountdownContainer, .type-page .dklabCountdownContainer, .in-index .dklabCountdownContainer{ background: var(--velur-bg-soft) !important; color: var(--velur-text) !important; } .blog-hp, #dklab_instagram_widget{ background: transparent !important; } .fvDoplnek-produkt{ background: var(--velur-card) !important; } .hodnoceni-wrapper, .vote-form > form:not(#dialogFormRating), .votes-wrap .votes-wrap .vote-wrap{ background: var(--velur-card) !important; color: var(--velur-text) !important; } .sidebar ol.top-products.unified li.display-image{ background: #FFFFFF !important; } /* pasparta */ /* --- Doplněk k 15.8 (vědomě světlé): cookiesDialog (#f8fafb modal), #cboxTitle, .flag-pripravujeme (zelený štítek), .indicator (tečky slideru) — necháno, jsou to badge/modaly, čitelnost > téma. ----- */ /* ================================================================= 19. DÁVKA DETAILŮ #1 (v16) Sekce je ZÁMĚRNĚ na konci souboru — při shodě specificity vyhrává pozdější pravidlo, čehož využíváme k přebití vlastních dřívějších rozhodnutí (bílé pasparty v košíku apod.). ================================================================= */ /* --- 0) BONUS: návrat Cormorantu --------------------------------- Venus vnucuje "proxima-nova" s !important na body,div,p,li,label… Naše pravidlo bez !important prohrávalo -> celý běžný text webu jel v proximě. Tady se Cormorant vrací tam, kam patří. */ p, li, td, blockquote, .p-desc, .p-short-description{ font-family: var(--velur-body) !important; } /* --- 1) Uvítací nadpis na HP ------------------------------------- Markup:
O značce VELUR MODA
— DIV, ne

! Elementová pravidla ho míjela. Kryjeme celou sadu tříd .h1-.h4. */ .h1, div.h1, .h2, div.h2{ font-family: var(--velur-display) !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: .10em; color: var(--velur-gold) !important; } .h3, div.h3, .h4, div.h4{ font-family: var(--velur-display) !important; font-weight: 500 !important; color: var(--velur-text) !important; } /* --- 2) Textové stránky (Obchodní podmínky, GDPR…) --------------- */ .type-page .content p, .type-page .content li, .type-page .content td, .type-page .content strong, .type-page .content em, .type-post .content p, .type-post .content li, .type-post .content strong, .type-article .content p, .type-article .content li, .type-article .content strong{ color: var(--velur-text) !important; } /* --- 3) Popup košíku v hlavičce ---------------------------------- Venus: .popup-widget-inner { background:#fff; color:#666 } — obecné pravidlo, které v12 mapa minula (řešila jen .login-widget). Obsah popupu se navíc doplňuje AJAXem, v DOMu nebyl. */ .popup-widget-inner{ background: var(--velur-bg-soft) !important; color: var(--velur-text) !important; border-color: var(--velur-line) !important; } .cart-widget-product{ background: transparent !important; border-color: var(--velur-line) !important; } .cart-widget-product-name > strong, .cart-widget-product-name a, .cart-widget-product-name{ color: var(--velur-text) !important; } .cart-widget-product-name > span, .cart-widget-product-amount{ color: var(--velur-muted) !important; } .cart-widget-product-price, .cart-widget .price-final{ color: var(--velur-gold) !important; font-family: var(--velur-display) !important; } /* Košíček (X) v popupu je