/* ========================================= BASE SHOPTET THEME – KIFFE GOLF ČR Verze: 3.0 – oprava FOUC (flash při načtení) ========================================= */ /* ---------- Přepis Shoptet CSS proměnných – MUSÍ BÝT PRVNÍ ---------- */ :root { /* Přepíšeme Shoptet proměnnou --color-header-background na černou, aby
element byl ihned černý bez čekání na JS */ --color-header-background: #000000; /* Brand paleta */ --brand-primary: #000000; --brand-secondary: #ed6827; --brand-accent: #ff6600; --brand-bg-light: #ffffff; --brand-bg-dark: #141414; --brand-price: #ff0000; /* Text */ --brand-text: #000000; --brand-text-inverse: #ffffff; /* Tlačítka */ --btn-bg: #ffd700; --btn-border: #ffff00; --btn-text: #000000; /* Banner texty */ --font-base-size: 16px; --font-banner-title: 2em; --font-banner-text: 1.8em; --font-banner-btn: 1.3em; /* Efekty */ --banner-hover-brightness: 40%; --transition-fast: 0.3s ease; --transition-medium: 0.4s ease; } /* ========================================= ANTI-FOUC – zabrání záblesku bílé/šedé Musí být co nejdříve v CSS! ========================================= */ /* Shoptet
element – nastavíme černou rovnou přes CSS, není třeba JS. --color-header-background je nyní #000 (viz :root výše) */ header, .header-top, .header-background-light .header-top, html.header-background-light .header-top { background-color: #000000 !important; color: #ffffff !important; } /* Zamezení transitions při prvním načtení stránky – přidáme třídu .kiffe-loaded na přes JS až po načtení, transitions se aktivují až pak */ html:not(.kiffe-loaded) *, html:not(.kiffe-loaded) *::before, html:not(.kiffe-loaded) *::after { transition: none !important; animation-duration: 0.001s !important; } /* Jazyk + měna – výchozí černé pozadí (FOUC fix) */ .navigation-tools, .navigation-tools .languagesMenu, .navigation-tools .languagesMenu__flags, .navigation-tools .languagesMenu__content, .navigation-tools .languagesMenu__box, .navigation-tools .js-languagesMenu__box, .navigation-tools .languagesMenu__header, .navigation-tools .languagesMenu__header--actual, .navigation-tools .languagesMenu__header--name, .navigation-tools .languagesMenu__list--language, .navigation-tools .languagesMenu__list--currency { background-color: #000000 !important; color: #ffffff !important; border: none !important; box-shadow: none !important; } /* SVG šipky a ikony v záhlaví jazykového menu */ .navigation-tools .languagesMenu__header svg, .navigation-tools .languagesMenu__header--actual svg, .navigation-tools .languagesMenu__header--name svg, .navigation-tools .languagesMenu__header .caret, .navigation-tools .languagesMenu__header--actual .caret { fill: #ffffff !important; color: #ffffff !important; } /* Rozbalovací obsah jazyk/měna */ .navigation-tools .languagesMenu__content { background-color: #000000 !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 18px 50px #000 !important; } /* Položky uvnitř rozbalovacího menu */ .navigation-tools .languagesMenu__list a, .navigation-tools .languagesMenu__list button, .navigation-tools .languagesMenu__list li, .navigation-tools .languagesMenu__list__item, .navigation-tools .languagesMenu__list__link, .navigation-tools .languagesMenu__content * { color: #ffffff !important; background-color: transparent !important; } /* Hover efekty */ .navigation-tools .languagesMenu__list a:hover, .navigation-tools .languagesMenu__list a:focus, .navigation-tools .languagesMenu__list button:hover, .navigation-tools .languagesMenu__list button:focus, .navigation-tools .languagesMenu__list .languagesMenu__list__link:hover, .navigation-tools .languagesMenu__header:hover, .navigation-tools .languagesMenu__header--actual:hover, .navigation-tools .languagesMenu__box:hover { background-color: rgba(255,255,255,0.1) !important; color: #ffffff !important; } /* Tlačítka v header top */ .header-top .toggle-window, .header-top .top-nav-button, .header-top .cart-count, .header-top .top-nav-button-login, .top-nav-button.top-nav-button-login.login.toggle-window { background-color: #000000 !important; color: #ed6827 !important; } .header-top a { color: #ffffff !important; } /* Ikony košík / hledání / login */ .header-top .icon-search, .header-top .icon-cart, .header-top .icon-login { background: #000000; color: #ed6827; } .btn .icon-cart, button .icon-cart, a.btn .icon-cart { background: transparent !important; color: #ed6827; } .btn:hover .icon-cart, button:hover .icon-cart, a.btn:hover .icon-cart { color: #ffffff; } /* Popup přihlášení */ .password-helper a { color: #000000 !important; font-weight: 500; } /* ========================================= HORNÍ NAVIGACE / MENU ========================================= */ .menu-level-1 { color: #ffffff; border-color: #000000; background: #000000; font-size: var(--font-base-size); font-weight: 600; } .navigation-in > ul > li > a { color: #ffffff; border-color: #000000; background: #000000; } /* Mobilní menu */ @media (max-width: 767px) { #navigation, #navigation .navigation-in, #navigation .menu-level-1, nav#navigation, nav#navigation .navigation-in, nav#navigation .menu-level-1 { height: 100vh; background: #000000 !important; color: #ffffff !important; } #navigation a, nav#navigation a { font-size: 1.3rem; padding: 1rem 1.2rem; } #navigation .navigation-in > ul > li { border-color: #333 !important; } #navigation .navigation-in > ul > li > a { background: #000000 !important; color: #ffffff !important; border-color: #000000 !important; } #navigation .navigation-in > ul > li.exp > a, #navigation .navigation-in > ul > li > a:focus, #navigation .navigation-in > ul > li > a:active { background: #000000 !important; color: #ed6827 !important; } #navigation .submenu-arrow:after { color: #ffffff !important; } #navigation .navigation-in ul.menu-level-2 { background: #141414 !important; border-radius: 0 !important; box-shadow: none !important; } #navigation .navigation-in ul.menu-level-2 li, #navigation .navigation-in ul.menu-level-2 li a, #navigation .navigation-in ul.menu-level-2 li a span { background: #141414 !important; color: #ffffff !important; opacity: 1 !important; filter: none !important; } #navigation .navigation-in ul.menu-level-2 li + li { border-top: 1px solid #2a2a2a !important; } #navigation .navigation-in ul.menu-level-2 li a:hover { background: #1f1f1f !important; color: #ed6827 !important; } #navigation .navigation-in a.menu-image, #navigation .navigation-in .has-third-level ul { display: none !important; } #navigation .popup-widget, #navigation .popup-widget-inner, #navigation .user-action, #navigation .user-action-login, #navigation .login-wrapper, #navigation .box { background: #000000 !important; color: #ffffff !important; border-radius: 0 !important; box-shadow: none !important; } #navigation .popup-widget-inner .form-control { background: #0f0f0f !important; color: #ffffff !important; border: 1px solid #2a2a2a !important; } #navigation .popup-widget-inner .password-helper a { color: #ed6827 !important; } #navigation .btn, #navigation .btn.btn-default, #navigation .btn.btn-secondary { background: #ed6827 !important; border-color: #ed6827 !important; color: #000000 !important; } #navigation .navigation-close, #navigation .navigation-close:before { color: #ffffff !important; background: transparent !important; } } /* ========================================= BANNERY / CAROUSEL ========================================= */ .homepage-banners-full-width .banner-wrapper a, .banner-category a { background: #000000; font-size: var(--font-base-size); font-weight: 600; } .carousel .extended-banner-texts, .next-to-carousel-banners .extended-banner-texts { background: transparent; align-content: flex-start; } .extended-banner-title, .extended-banner-text, .next-to-carousel-banners .extended-banner-link, .homepage-banners-full-width .banner-wrapper .extended-banner-link, .banner-category .extended-banner-link { color: #ffffff; } .btn.unveil-button { color: #ffffff; background: #000000; } .next-to-carousel-banners .extended-banner-texts .extended-banner-title, .carousel .extended-banner-texts .extended-banner-title { font-size: 18px; font-weight: 600; } .next-to-carousel-banners .extended-banner-texts .extended-banner-text, .carousel .extended-banner-texts .extended-banner-text { font-size: 14px; font-weight: 500; } .homepage-latest-contribution-full-width, .homepage-banners-full-width, .store-rating-full-width, .banner-category { background: #ffffff; } .banner-wrapper { position: relative; overflow: hidden; } .banner-wrapper img { transition: filter var(--transition-medium), transform var(--transition-medium); } .banner-wrapper:hover img { filter: brightness(var(--banner-hover-brightness)); transform: scale(1.05); } .banner-wrapper:hover { color: bisque; background: #ffffff; } [data-testid="carousel"] .extended-banner-texts { position: absolute !important; top: 50%; left: 5%; transform: translateY(-50%); text-align: left; width: 90%; z-index: 2; color: #ffffff !important; text-shadow: 0 2px 8px rgba(0,0,0,0.6); } [data-testid="carousel"] .extended-banner-title { font-size: var(--font-banner-title) !important; font-weight: 500 !important; line-height: 1.2; text-transform: uppercase; } [data-testid="carousel"] .extended-banner-text { font-size: var(--font-banner-text) !important; font-weight: 400; margin-top: 10px; display: block; } [data-testid="carousel"] .extended-banner-link { display: inline-block; margin-top: 20px; font-size: var(--font-banner-btn) !important; font-weight: 600; background: #ff6600; color: #ffffff !important; padding: 10px 20px; border-radius: 5px; text-decoration: none !important; transition: background var(--transition-fast); } [data-testid="carousel"] .extended-banner-link:hover { background: #e85500; } @media (max-width: 1024px) { [data-testid="carousel"] .extended-banner-texts { left: 5%; top: 50%; transform: translateY(-50%); width: 90%; text-align: left; } [data-testid="carousel"] .extended-banner-title { font-size: 1.8em !important; } [data-testid="carousel"] .extended-banner-text { font-size: 1.2em !important; } [data-testid="carousel"] .extended-banner-link { font-size: 1em !important; padding: 8px 16px; } } .next-to-carousel-banners .banner-wrapper { position: relative; overflow: hidden; } .next-to-carousel-banners .extended-banner-texts { position: absolute; bottom: 10%; left: 5%; width: 90%; color: #ffffff; text-align: left; background: rgba(0,0,0,0.35); padding: 10px 12px; border-radius: 8px; box-sizing: border-box; transition: all var(--transition-fast); } .next-to-carousel-banners .extended-banner-title { display: block; font-size: 1.4em; font-weight: 700; margin-bottom: 5px; } .next-to-carousel-banners .extended-banner-link { display: block; font-size: 1em; } .next-to-carousel-banners .banner-wrapper:hover .extended-banner-texts { background: rgba(0,0,0,0.55); } @media (max-width: 768px) { .next-to-carousel-banners .extended-banner-texts { bottom: 8%; left: 5%; right: 5%; text-align: center; padding: 8px; } .next-to-carousel-banners .extended-banner-title { font-size: 1.1em; } .next-to-carousel-banners .extended-banner-link { font-size: 0.9em; } } .carousel .extended-banner-text span[style*="#ff6600"] { color: transparent !important; position: relative; display: inline-block; } .carousel .extended-banner-text span[style*="#ff6600"]::before { content: "■"; color: #ff6600; font-size: 32px; margin-right: 8px; display: inline-block; vertical-align: middle; } /* ========================================= FOOTER BANNERS ========================================= */ .footer-banners { background: #000000; } .footer-banners .banner-wrapper { width: 100%; overflow: hidden; } .footer-banners .banner-wrapper a { display: flex; align-items: stretch; } .footer-banners .banner-wrapper img { width: 50%; height: 420px; object-fit: cover; object-position: center; opacity: 0.35; flex-shrink: 0; } .footer-banners .extended-banner-texts { background: #000000; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; width: 50%; } .footer-banners .extended-banner-title, .footer-banners .extended-banner-text, .footer-banners .extended-banner-link { color: #ffffff; } .footer-banners .extended-banner-text span[style*="#ff6600"] { color: transparent !important; position: relative; display: inline-block; } .footer-banners .extended-banner-text span[style*="#ff6600"]::before { content: "■"; color: #ff6600; font-size: 18px; margin-right: 8px; display: inline-block; vertical-align: middle; } .footer-banners .banner-wrapper:hover { background: #000000 !important; color: #ffffff !important; } .footer-banners .banner-wrapper:hover img { filter: none !important; transform: none !important; } @media (max-width: 768px) { .footer-banners .banner-wrapper a { flex-direction: column; } .footer-banners .banner-wrapper img { width: 100%; height: 240px; } .footer-banners .extended-banner-texts { width: 100%; padding: 30px 20px; } } /* ========================================= PRODUKTY / CENY / GRID ========================================= */ .btn.btn-default, a.btn.btn-default { color: #000000; border-color: #ffff00; background: #ffd700; } .p-standard-price { display: flex; visibility: visible; color: #ffffff; border-color: #ff0000; background: #ff0000; } .p-gifts-heading { color: #ff0000; font-weight: 700; } .product-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .product-item { position: relative; flex: 0 1 calc(33.333% - 1em); box-sizing: border-box; margin-bottom: 1em; overflow: hidden; } .product-item img { max-width: 100%; height: auto; transition: transform var(--transition-fast); } .product-item:hover img { transform: scale(1.1); } .product-text { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); color: #ffffff; padding: 0.5em; box-sizing: border-box; text-align: left; } .product-text p { margin: 0; } @media (max-width: 768px) { .product-item { flex: 0 1 calc(50% - 1em); } } @media (max-width: 480px) { .product-item { flex: 0 1 100%; } } /* ========================================= FLAGY / BENEFITY / FOOTER IKONY ========================================= */ .footer-icons { background: #ffffff; } .benefitBanner__data { color: #000000; } .flag.flag-discount { background: #ed6827; } .flag.flag-freeshipping{ background: #000000; } /* ========================================= TABULKA "KIFFE" ========================================= */ .kiffe-table { width: 100%; border-collapse: collapse; } .kiffe-table th, .kiffe-table td { border: 1px solid #ddd; padding: 8px; text-align: center; } .kiffe-table th { background: #f2f2f2; } @media screen and (max-width: 600px) { .kiffe-table th, .kiffe-table td { display: block; width: 100%; } } /* ========================================= TABS (.kiffe-tabs) ========================================= */ @media (max-width: 768px) { .kiffe-tabs .kiffe-columns { grid-template-columns: 1fr; } .kiffe-tabs .kiffe-tab-btn { width: 100%; text-align: center; } } .kiffe-tabs .kiffe-tab-btn { background: #e9e9e9; color: #111; border: none; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .kiffe-tabs .kiffe-tab-btn:not(.is-active):hover { background: #dcdcdc !important; } .kiffe-tabs .kiffe-tab-btn.is-active { background: #ff6600; color: #ffffff; } .kiffe-tabs .kiffe-tab-pane { display: none; } .kiffe-tabs .kiffe-tab-pane.is-active { display: block; } /* ========================================= NAŠEPTÁVAČ / SEARCH WHISPERER ========================================= */ .searchWhisperer__product__name, .searchWhisperer__product__name a, .searchWhisperer__product__price, .searchWhisperer__product__availability { color: #000000 !important; } .searchWhisperer__product__cart .quantity input, .searchWhisperer__product__cart input[type="number"] { color: #000000 !important; border-color: #000000 !important; } .searchWhisperer__product__cart button.increase, .searchWhisperer__product__cart button.decrease { color: #000000 !important; } .searchWhisperer__additionalResults, .searchWhisperer__additionalResults * { color: #000000 !important; } .cart-widget .cart-widget-product-name a[data-testid="cartWidgetProductName"] { color: #000 !important; } /* === Popup overlay - pruhlednost 50% === */ #cboxOverlay { opacity: 0.5 !important; }