/* ====================================================================== 0) FONTY & ZÁKLAD ====================================================================== */ @font-face { font-family: "Bevellier-Variable"; src: url("/user/documents/font/Bevellier-Variable.woff2") format("woff2"), url("/user/documents/font/Bevellier-Variable.woff") format("woff"), url("/user/documents/font/Bevellier-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Základní typografie */ body { font-family: "Nunito", sans-serif; } p, p a, input, button, select, textarea { font-family: inherit; } /* Brand / nadpisy */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .p-info-headline .h1, .p-info-headline h1, .products-block.products .p .name, .template-11 .dklab-delivery-box.position-above-header, .template-11 .dklab-delivery-box.position-above-header p, .p .name, .benefitBanner__title, .welcome h1, #footer h4, .extended-banner-title, .h4.homepage-group-title, h4.homepage-group-title[class*="homepage-products-heading"], .position--benefitHomepage + .h4.homepage-group-title[class*="homepage-products-heading"] { font-family: "Bevellier-Variable", sans-serif; } /* Barvy značky */ .benefitBanner__title, .welcome h1, #footer h4 { color: #ee2944; font-weight: 500; } .p-info-wrapper .p-final-price-wrapper .price-final, .price-final, #footer ul a, .top-navigation-bar a, .top-navigation-bar .dropdown button, .benefitBanner__data, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #263143; } .basic-description, .p-short-description, .products-block .p-bottom .p-desc, .category-appendix, .product-appendix { color: #4d4d4d; } @media (min-width: 480px) { .p-short-description { font-size: 18px; } } /* Režimy (necháváme Nunito, změň dle potřeby) */ body.external-fonts-loaded, body.blank-mode { font-family: "Nunito", sans-serif; } /* ====================================================================== FONTY NADPISŮ A DŮLEŽITÝCH TEXTŮ V REŽIMECH (external-fonts-loaded, blank-mode) ====================================================================== */ body.external-fonts-loaded h1, body.external-fonts-loaded h2, body.external-fonts-loaded h3, body.external-fonts-loaded h4, body.external-fonts-loaded h5, body.external-fonts-loaded h6, body.external-fonts-loaded .h1, body.external-fonts-loaded .h2, body.external-fonts-loaded .h3, body.external-fonts-loaded .h4, body.external-fonts-loaded .h5, body.external-fonts-loaded .h6, body.external-fonts-loaded .cart-table .main-link, body.external-fonts-loaded .cart-related-name, body.blank-mode h1, body.blank-mode h2, body.blank-mode h3, body.blank-mode h4, body.blank-mode h5, body.blank-mode h6, body.blank-mode .h1, body.blank-mode .h2, body.blank-mode .h3, body.blank-mode .h4, body.blank-mode .h5, body.blank-mode .h6, body.blank-mode .cart-table .main-link, body.blank-mode .cart-related-name { font-family: "Bevellier-Variable", sans-serif !important; color: #263143; } /* ====================================================================== 1) NAVIGACE ====================================================================== */ .navigation-in ul li a, .menu-helper a, .menu-helper > span, .menu-helper > ul > li a, .menu-helper > ul > li a b, .products-block .availability, .products-inline > div .p .p-in .p-in-in .ratings-wrapper .availability, .navigation-in > ul > li.ext > ul > li > div > a { font-family: "Bevellier-Variable", sans-serif; color: #263143; font-weight: 400; font-size: 1.15em; text-transform: none; border: none; box-shadow: none; text-decoration: none; } .navigation-in ul li a:hover, .navigation-in ul li a:focus, .navigation-in ul li.active > a, .navigation-in ul li.open > a, .navigation-in ul li.expanded > a { color: #263143; font-weight: 400; border: none; box-shadow: none; text-decoration: none; } .navigation-in .menu-level-2 a, .navigation-in .submenu a, .navigation-in .collapse a { font-family: "Bevellier-Variable", sans-serif; font-weight: 400; font-size: 1.15em; color: #263143; } .navigation-in ul li a b { font-weight: 400; } @media (max-width: 767px) { .top-navigation-bar { background-color: #fff; } } @media (max-width: 370px) { .top-navigation-bar .site-name a img { max-height: 30px; } } /* ====================================================================== 2) HLAVIČKA / KOŠÍK / OVLÁDÁNÍ ====================================================================== */ .products-block .p-in-in { min-height: auto; } .category-header input[type="radio"]:checked + label { background-color: var(--color-primary); } .btn, a.btn { min-height: 40px; height: 40px; text-transform: uppercase; } .p-info-wrapper .btn.btn-conversion, .p-info-wrapper a.btn.btn-conversion { text-transform: uppercase; } #manufacturer-filter { display: none; } /* dostupnost na detailu */ .p-info-grid .detail-availability-block .delivery-time { background-color: #263143; } /* ====================================================================== 3) HERO / WELCOME ====================================================================== */ .welcome .welcome__content p { margin-bottom: 0; } .welcome .welcome__content p + p { margin-top: 20px; } @media (min-width: 768px) { .welcome h1 { font-size: 40px; margin-bottom: 30px; } .welcome p { font-size: 16px; line-height: 1.8; margin-bottom: 30px; } } @media (min-width: 992px) { .welcome { padding: 40px; } } /* ====================================================================== 4) PRODUKTY ====================================================================== */ /* ====================================================================== 5) BLOG ====================================================================== */ .type-post h1 { font-size: 24px; font-weight: 700; } .blogproduct { width: 100%; display: block; margin: 10px 0; text-align: center; } .blogproimg2 { width: calc(50% - 2.5px); padding: 10px; display: inline-block; max-width: 240px; } .blogproimg2, .blogproimg3, .blogproimg4 { transition: 350ms; } .blogproimg2:hover, .blogproimg3:hover, .blogproimg4:hover { transform: scale(1.05); background-color: #f9f9f9; border-radius: 10px; } @media (max-width: 992px) { .blogproimg4 { width: calc(50% - 2.5px); padding: 2.5px; display: inline-block; } .type-post .text { width: 100%; } .blogproimg3 { width: calc(33% - 1.0); padding: 2.5px; display: inline-block; } } @media (min-width: 992px) { .blogproimg4 { width: calc(50% - 2.5px); padding: 12.5px; display: inline-block; max-width: 240px; } .type-post .text { width: 80%; margin: auto; } .blogproimg3 { width: calc(33% - 2.5px); padding: 12.5px; display: inline-block; } } /* ====================================================================== 6) DETAIL PRODUKTU ====================================================================== */ .s_rightImg { display: flex; column-gap: 68px; } .rightImg_img img { max-width: 400px; border-radius: 2.285rem; } .rightImg_text { display: flex; flex-direction: column; justify-content: center; } .s_rightImg .rightImg_text h2 { font-weight: 700; font-size: 24px; } .s_rightImg .rightImg_text p { font-size: 18px; } .margin_buttom { margin-bottom: 68px; } .flex-reverse { flex-direction: row-reverse; } .references_row { display: flex; column-gap: 36px; } .reference { flex-basis: 25%; display: flex; flex-direction: column; text-align: center; margin-top: 18px; } .reference img { max-width: 88px; margin-left: auto; margin-right: auto; } .reference_title { margin: 24px 0; } @media (max-width: 992px) { .rightImg_img img { max-width: 100%; } } @media (max-width: 480px) { .references_row { column-gap: 24px; } .s_rightImg { column-gap: 32px; } } @media (max-width: 480px) { .s_rightImg { display: block; } .references_row { display: block; } .rightImg_img { display: flex; justify-content: center; } } /* Obrázek přes celou šířku */ .full-width-image img { width: 100%; max-width: 100%; height: auto; border-radius: 2.285rem; } @media (max-width: 992px) { .full-width-image img { border-radius: 1.5rem; } } @media (max-width: 480px) { .full-width-image img { border-radius: 1rem; } } /* ====================================================================== 7) BANNERY / WRAPPERY ====================================================================== */ .benefitBanner__title, .extended-banner-title { font-family: "Bevellier-Variable", sans-serif; } .banner-wrapper { box-shadow: 0 6px 12px rgba(0,0,0,0.08); border-radius: 20px; } /* ====================================================================== 8) TABULKY – OBECNÝ LAYOUT (mimo košík) ====================================================================== */ /* Základ tabulek */ .basic-description table, .text table, .content-inner table, .content.narrow table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 16px; text-align: left; } /* Zaoblené rohy u tabulek (mimo košík) */ .basic-description table, .text table, .content-inner table, .content.narrow table { border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; } .basic-description table th, .text table th, .content-inner table th, .content.narrow table th, .basic-description table td, .text table td, .content-inner table td, .content.narrow table td { padding: 12px 15px; border: none; } .basic-description table th, .text table th, .content-inner table th, .content.narrow table th { background-color: #f4f4f4; font-weight: 700; } /* Zebra řádky (mimo košík) – použijeme :has() k vyloučení kontejneru s .cart-table */ .basic-description:not(:has(.cart-table)) table tr:nth-child(odd), .text:not(:has(.cart-table)) table tr:nth-child(odd), .content-inner:not(:has(.cart-table)) table tr:nth-child(odd), .content.narrow:not(:has(.cart-table)) table tr:nth-child(odd) { background-color: #f9f9f9; } .basic-description:not(:has(.cart-table)) table tr:nth-child(even), .text:not(:has(.cart-table)) table tr:nth-child(even), .content-inner:not(:has(.cart-table)) table tr:nth-child(even), .content.narrow:not(:has(.cart-table)) table tr:nth-child(even) { background-color: #fff; } /* ====================================================================== 10) LAYOUT – DALŠÍ MEDIA QUERIES ====================================================================== */ @media (min-width: 768px) { .top-navigation-bar .container > div.top-navigation-contacts { top: 0; height: 49px; } }