@charset "UTF-8"; /* GIGAOPTIK · brandová vrstva rebrandu Sestaveno 25. 8. 2026 sloučením 13 zdrojů a odstraněním deklarací, které kaskáda nikdy nepoužije. Pořadí pravidel zachováno 1:1. Načítat POUZE v pořadí 10 → 20 → 30 → 40 → 90. */ /* ═══ původně: rebranding/Gigaoptik_rebranding.css ═══ */ /* ========================================================= GIGA OPTIK – REBRAND 2026 (MASTER OVERRIDES) File: Gigaoptik_rebranding.css Load this file LAST in (or via ?rebrand=1 script) ========================================================= */ /* ------------------------- 1) Brand tokens -------------------------- */ :root { --brand-green: #0f4c3a; /* logo, key elements, CTA */ --brand-text: #343a3a; /* dark grey instead of black */ --brand-lime: #eaf1b1; /* supplementary accent */ --brand-beige: #ede3ca; /* soft backgrounds */ --brand-red: #8e0300; /* only promos / discounts / limited offers */ --radius: 10px; --radius-sm: 6px; --focus-ring: rgba(15, 76, 58, 0.35); /* IMPORTANT: Shoptet static files typically live under /user/documents/... Change ONLY this if your font folder path differs. */ --font-base: "/user/documents/rebranding/Fonty"; } /* ------------------------- 2) Fonts Jakarta = body text Zalando = headings -------------------------- */ /* Plus Jakarta Sans – normal */ /* Plus Jakarta Sans – italic */ /* Zalando Sans Expanded – normal */ /* Zalando Sans Expanded – italic */ /* ------------------------- 3) Global typography (Conservative overrides to avoid breaking components) -------------------------- */ html, body { text-rendering: optimizeLegibility; } button, input, select, textarea { font-family: inherit !important; color: inherit; } /* Headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--brand-text); letter-spacing: 0.2px; } /* Make typical Shoptet blocks visibly rebranded */ .header-top, .header-top *, .navigation-in, .navigation-in *, .homepage h2, .homepage h3, .products .name, .product-name, .p-detail h1, .p-detail h2 { font-family: "Zalando Sans Expanded", "Plus Jakarta Sans", system-ui, sans-serif !important; } /* ------------------------- 4) Links / accents -------------------------- */ a:hover, .navigation-in a:hover { color: var(--brand-green); opacity: 0.85; } /* Focus ring */ :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* ------------------------- 5) Buttons / CTA IMPORTANT: do NOT style all submit buttons globally (breaks search etc.) -------------------------- */ .btn, .btn-primary, .btn--primary, a.btn, a.btn-primary, /* cart / product add-to-cart (common Shoptet patterns) */ .p-detail .p-to-cart button, .products .p-to-cart button, .add-to-cart-button, .checkout-button, .cart-header .btn { background: var(--brand-green) !important; border-color: var(--brand-green) !important; color: #fff !important; border-radius: var(--radius) !important; } .btn:hover, .btn-primary:hover, .btn--primary:hover, a.btn:hover, a.btn-primary:hover { filter: brightness(0.96); } .btn-secondary, .btn-outline, .btn--outline { background: transparent !important; border-color: var(--brand-green) !important; color: var(--brand-green) !important; border-radius: var(--radius) !important; } .btn-secondary:hover, .btn-outline:hover, .btn--outline:hover { background: rgba(15, 76, 58, 0.06) !important; } /* Legacy red buttons -> green */ .btn-red, .btn--red { background: var(--brand-green) !important; border-color: var(--brand-green) !important; color: #fff !important; } /* ------------------------- 6) Promo red (ONLY discounts) -------------------------- */ .price, .p-detail .price { color: var(--brand-text); } .price-save, .price-discount, .discount, .flag-discount, .flag.flag-discount, .product-discount, .p-detail .price .price-save, .products .price-save { color: var(--brand-red) !important; } /* ------------------------- 7) Soft beige helpers -------------------------- */ .bg-beige, .section--beige { background: var(--brand-beige) !important; } ::selection { background: rgba(234, 241, 177, 0.85); } /* ------------------------- 8) Replace old crimson accent in filters -------------------------- */ .filter-section .filter-label:hover, .filter-section .filter-label.active { background: var(--brand-green) !important; color: #fff !important; } .filter-section .filter-label:hover .filter-count, .filter-section .filter-label.active .filter-count { color: #fff !important; } /* ------------------------- 9) Forms – light touch -------------------------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], textarea, select { border-radius: var(--radius-sm) !important; } /* ------------------------- 10) Product cards / navigation colors -------------------------- */ .product .name, .products .name, .p-name, .product-name, .category-title, .navigation-in a { color: var(--brand-text); } /* ------------------------- 11) Flags/badges -------------------------- */ .flag { border-radius: 999px !important; } .flag-new, .flag-top, .flag-action { background: var(--brand-lime) !important; color: var(--brand-text) !important; } .flag-discount { background: transparent !important; } /* ========================================================= HOTFIXES – prevent layout breakage (Search button + slider safety) ========================================================= */ /* A) Searchbar button alignment (common Shoptet header search) */ #header .search, .search, .search-form, #header .search-form { align-items: stretch; } .search input[type="search"], .search input[type="text"], .search-form input[type="search"], .search-form input[type="text"] { height: 44px !important; line-height: 44px !important; border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; } .search button, .search-form button, #header .search button, #header .search-form button { height: 44px !important; min-height: 44px !important; line-height: 44px !important; padding: 0 14px !important; border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* B) Slider/banners: avoid accidental rounding on layered elements */ .banners, .banners * { border-radius: 0 !important; } /* ═══ původně: rebranding/style_REBRAND.css ═══ */ /* ========================================================= GIGAOPTIK REBRAND 2026 – FONTS + COLOR TOKENS (in-file) Minimal changes: only fonts + brand colors. No layout. ========================================================= */ :root{ --giga-green:#0f4c3a; --giga-text:#343a3a; --giga-red:#8e0300; --giga-beige:#ede3ca; --giga-lime:#eaf1b1; } /* Load fonts from Shoptet documents (adjust if folder differs) */ @font-face{font-family:"Plus Jakarta Sans";src:url("/user/documents/rebranding/Fonty/JakartaSans/PlusJakartaSans-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;} /* Global font switch (NO sizing changes) */ html,body{color:var(--giga-text);} h1,h2,h3,h4,h5,h6{color:var(--giga-text);} a{color:var(--giga-green);} a:hover{color:var(--giga-green);opacity:.85;} .konfig-oci{margin-top:-10px;padding:10px 0}.konfig-oci:not(.otevreny) .oci-inner::before{content:"Pro zobrazení možností musíte zvolit předchozí parametry produktu"}.konfig-oci:not(.otevreny) .oci-inner>div{display:none !important}.konfig-oci:not(.open-row) .oci-inner{display:none}.konfig-oci.open-row h2::after{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.konfig-oci .oci-inner .popis-textu p{margin-bottom:5px}.konfig-oci>h2{cursor:pointer;padding:10px 10px;color:#343a3a;font-weight:600;font-size:20px;margin:0;display:flex;align-items:center;position:relative}.konfig-oci>h2::after{font-size:10px;content:"";-webkit-transition:transform .3s ease-out;-o-transition:transform .3s ease-out;transition:transform .3s ease-out;font-family:"Shoptet";display:inline-block;position:absolute;right:10px;top:50%}.konfig-oci>h2 span.number-step{background-color:#c4cad5;width:30px;height:30px;margin-right:10px;border-radius:30px;display:flex;align-items:center;justify-content:center;font-size:16px}.konfig-oci>div{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;padding:10px}.konfig-oci>div h2{width:100%;font-weight:600;color:#343a3a;margin-top:0}.konfig-oci>div .boxik{margin-bottom:10px}.konfig-oci>div .boxik h2{margin:0 0 10px 0;color:#343a3a;font-weight:600;font-size:16px}.konfig-oci>div .boxik select{width:100%}.konfig-oci>div>div{width:48%}@media(max-width: 479px){.konfig-oci>div>div{width:100%}}.konfigurator{margin:10px 0}.konfigurator .boxik{border-bottom:1px solid #c4cad5;padding:10px 0}.konfigurator .boxik:not(.otevreny):not(:first-of-type) .config-box::before{content:"Pro zobrazení možností musíte zvolit předchozí parametry produktu"}.konfigurator .boxik:not(.otevreny):not(:first-of-type) .config-box>div{display:none !important}.konfigurator .boxik[data-display="0"] .barvaskla::before{content:"V této kombinaci není bohužel možno zvolit barevnost skla. Pro barevné sklo musíte zvolit jinou kombinaci."}.konfigurator .boxik[data-display="0"] .barvaskla>div{display:none}.konfigurator .boxik:not(.open-row) .config-box,.konfigurator .boxik:not(.open-row) .popis-textu{display:none}.konfigurator .boxik.open-row h2::after{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.konfigurator .boxik.open-row .config-box{display:flex !important}.konfigurator .boxik.open-row .popis-textu{display:block}.konfigurator .boxik h2{margin:0;padding:10px 10px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#343a3a;position:relative}@media(max-width: 648px){.konfigurator .boxik h2{flex-wrap:wrap}}@media(max-width: 479px){.konfigurator .boxik h2{font-size:17px;padding-right:30px;padding-left:40px}}.konfigurator .boxik h2::after{font-size:10px;content:"";-webkit-transition:transform .3s ease-out;-o-transition:transform .3s ease-out;transition:transform .3s ease-out;font-family:"Shoptet";display:inline-block;position:absolute;right:10px;top:20px}.konfigurator .boxik h2 span.number-step{background-color:#c4cad5;width:30px;height:30px;margin-right:10px;border-radius:30px;display:flex;align-items:center;justify-content:center;font-size:16px}@media(max-width: 479px){.konfigurator .boxik h2 span.number-step{position:absolute;left:0}}.konfigurator .boxik h2 span.popisek{font-size:16px;position:absolute;top:50%;transform:translateY(-50%);right:25px;border-radius:5px;margin-left:10px;display:flex;align-items:center;border:1px solid #c4cad5;font-weight:400;padding:5px}@media(max-width: 648px){.konfigurator .boxik h2 span.popisek{display:block;width:100%;position:initial;top:auto;transform:none;margin:15px 0 0 0}}.konfigurator .boxik h2 span.popisek .name{font-weight:600}.konfigurator .boxik h2 span.popisek .second-name:not(:empty)::before{content:" - ";margin-left:3px}.konfigurator .boxik h2 span.popisek img{margin-right:10px;max-width:25px;max-height:25px}.konfigurator .boxik .popis-textu{margin:0;padding:0 10px}.konfigurator .boxik .config-box{display:flex;flex-wrap:wrap;margin:0 -5px;padding:0 10px}.konfigurator .boxik .config-box .check{display:flex;flex-wrap:wrap;width:calc(20% - 10px);box-shadow:0 6px 12px rgba(0,0,0,.08);border:1px solid #c4cad5;background-color:#fff;border-radius:5px;margin:5px 5px 5px 5px;cursor:pointer}@media(max-width: 767px){.konfigurator .boxik .config-box .check{width:calc(33.333333% - 10px)}}@media(max-width: 500px){.konfigurator .boxik .config-box .check{width:calc(50% - 10px)}}.konfigurator .boxik .config-box .check.active{border:1px solid #0f4c3a;position:relative}.konfigurator .boxik .config-box .check.active.missing-image::before{top:50%;transform:translate(-50%, -50%)}.konfigurator .boxik .config-box .check.active::before{background-color:#0f4c3a;content:"";font-family:"Shoptet";width:22px;height:22px;font-size:12px;color:#fff;border-radius:26px;position:absolute;display:flex;align-items:center;justify-content:center;left:50%;transform:translateX(-50%);top:44px;font-weight:400;text-align:center}.konfigurator .boxik .config-box .check .image{width:100%;padding:5px;text-align:center;max-height:104px}.konfigurator .boxik .config-box .check .image.missing{padding:0}.konfigurator .boxik .config-box .check img{max-height:104px;height:100%}.konfigurator .boxik .config-box .check .boxtext{width:100%}.konfigurator .boxik .config-box .check .boxtext .name{display:block;text-align:center;padding:5px;color:#343a3a;font-size:14px;font-weight:600}.konfigurator .boxik .config-box .check .boxtext .second-name{display:block;font-weight:400;font-size:12px;text-align:center;padding:0 5px}.konfigurator .boxik .config-box .check .admin-name{text-align:center;padding:5px;width:100%}.konfigurator .typskel .boxtext .price{display:block !important;font-weight:600;color:#343a3a;text-align:center;font-size:12px}body:not(.open-config) .konfig-wrap{display:none}body.open-config #cboxOverlay{display:block !important;opacity:.65;visibility:visible;background-color:rgba(0,0,0,.75)}.konfig-wrap{z-index:999999;background-color:#fff;position:fixed;height:650px;width:900px;max-width:90%;max-height:90%;top:50%;left:50%;transform:translate(-50%, -50%);overflow:hidden;padding:20px 20px 0 20px;border-radius:10px}@media(max-width: 400px){.konfig-wrap{padding:10px 10px 0 10px}}.konfig-wrap .close{position:absolute;right:10px;top:10px;color:#343a3a;font-size:15px;cursor:pointer}.konfig-wrap .close:hover{color:#0f4c3a}.konfig-wrap .close::before{content:"";font-family:"Shoptet"}.konfig-wrap .top{height:calc(100% - 95px);overflow-y:auto;overflow-x:hidden}.konfig-wrap .top .rady-pruvodce{margin:0}.konfig-wrap .top .title{display:flex;flex-wrap:wrap;align-items:center}.konfig-wrap .top .title h2{width:30%;order:-100;margin:0;color:#343a3a;font-weight:600}@media(max-width: 560px){.konfig-wrap .top .title h2{width:100%;margin-bottom:10px}}.konfig-wrap .top .title .rady-pruvodce{width:70%}@media(max-width: 560px){.konfig-wrap .top .title .rady-pruvodce{width:100%}}.konfig-wrap .bottom{position:relative;width:calc(100% + 40px);margin:0 -20px;padding:0 20px;background-color:#f7f7f7;height:95px;display:flex;justify-content:flex-end;align-items:center}@media(max-width: 479px){.konfig-wrap .bottom{justify-content:space-between}}@media(max-width: 414px){.konfig-wrap .bottom{padding:0 5px}}.konfig-wrap .bottom.not-buy .add-to-cart{cursor:not-allowed;pointer-events:none !important}.konfig-wrap .bottom .add-to-cart{margin:0;order:20;margin-left:20px}@media(max-width: 900px){.konfig-wrap .bottom .add-to-cart .quantity{display:none}}.konfig-wrap .bottom .add-to-cart button{min-width:192px}@media(max-width: 479px){.konfig-wrap .bottom .add-to-cart button{min-width:unset}}.konfig-wrap .bottom .p-final-price-wrapper{display:flex;flex-direction:column;text-align:right;margin:0}.konfig-wrap .bottom .p-final-price-wrapper::before{content:"Celková cena (obruba + skla dle vybrané specifikace)";display:block;max-width:280px;text-align:left}@media(max-width: 920px){.konfig-wrap .bottom .p-final-price-wrapper::before{max-width:30%;text-align:left}}@media(min-width: 768px){.konfig-wrap .bottom .p-final-price-wrapper::before{margin-bottom:0px;position:absolute;left:25px;top:50%;transform:translateY(-50%)}}@media(max-width: 767px){.konfig-wrap .bottom .p-final-price-wrapper::before{margin-bottom:5px;position:initial;width:100%;max-width:100%;text-align:right}}@media(max-width: 600px){.konfig-wrap .bottom .p-final-price-wrapper::before{font-size:11px}}.konfig-wrap .bottom .p-final-price-wrapper .price-standard,.konfig-wrap .bottom .p-final-price-wrapper .price-save,.konfig-wrap .bottom .p-final-price-wrapper .price-measure{font-size:18px;margin-right:0}.konfig-wrap .bottom .p-final-price-wrapper .price-standard{display:none}.konfig-wrap .bottom .p-final-price-wrapper .price-measure{display:none}@media(max-width: 550px){.konfig-wrap .bottom .p-final-price-wrapper .price-final{font-size:20px}}.konfigurovat{padding-left:180px}@media(max-width: 360px){.konfigurovat{padding-left:112px}}@media(max-width: 312px){.konfigurovat{padding-left:0px}}.konfigurovat .configurovat_open{box-shadow:0 3px 6px rgba(0,0,0,.12);color:#fff;margin-bottom:20px;cursor:pointer}@media(max-width: 1199px){.konfigurovat .configurovat_open{font-size:16px}}@media(max-width: 767px){.konfigurovat .configurovat_open{font-size:14px}}@media(max-width: 479px){.konfigurovat .configurovat_open{width:200px;height:50px}}@media(max-width: 360px){.konfigurovat .configurovat_open{width:163px;height:50px;padding:0 12px}}.konfigurovat .configurovat_open::after{content:url("/user/documents/upload/sablona/ico-cocka.png");display:inline-flex;margin-left:5px;position:relative;top:3px}.p-info-wrapper{display:flex;flex-direction:column}.rady-pruvodce{order:-50;margin:20px 0;text-align:right;padding:15px;font-weight:600;color:#343a3a}.rady-pruvodce span{text-decoration:underline;color:#0f4c3a;cursor:pointer}.rady-pruvodce span:hover{text-decoration:none}.main-link-surcharges ul{text-align:left;margin:0;padding:0}@media(min-width: 479px){.main-link-surcharges ul{columns:2;column-gap:5px}}.main-link-surcharges ul li{color:#333;list-style:none}body:not(.open-rady) .rada{display:none}body.open-rady #cboxOverlay{display:block !important;opacity:.65;visibility:visible;background-color:rgba(0,0,0,.75)}.rada{z-index:999999;background-color:#fff;position:fixed;height:650px;width:900px;max-width:90%;max-height:90%;top:50%;left:50%;transform:translate(-50%, -50%);overflow:auto;padding:20px 20px 0 20px;border-radius:10px}@media(max-width: 400px){.rada{padding:10px 10px 0 10px}}.rada .close{position:absolute;right:10px;top:10px;color:#343a3a;font-size:15px;cursor:pointer}.rada .close:hover{color:#0f4c3a}.rada .close::before{content:"";font-family:"Shoptet"}