/* samurai.cz (Shoptet, šablóna Carbon) - vlastné štýly Unoneto. Zdroj je TENTO súbor v gite (repo samurai, shoptet/samurai-unoneto.css). Na web sa nahráva cez Správce souborů do /user/documents/upload/ a načítava jedným riadkom v poli HTML kód → Záhlaví: Každá verzia = NOVÝ NÁZOV súboru (v1 bol samurai-unoneto.css?v=1). Správce souborů existujúci súbor neprepíše - uloží ho ako *_1.css a stránka by ďalej čítala starý; server navyše dáva max-age 1 rok. Staré verzie nechať na serveri: návrat = odkaz späť na predošlú. Úloha: Unoneto_v2/docs/ulohy/2026-10-20-samurai-dizajn-webu.md Návrat celých štýlov: zmazať riadok zo Záhlaví. */ /* --- Etapa 1, D2b (D-2026-10-20-74): bannery kategórií na titulke ---------------------- Na PC bol text napoly na obrázku a napoly vedľa neho, na mobile čierny text priamo cez nože. Text je celý na obrázku, dole, biely na tmavom prechode zdola. Carbon drží obal textov cez celý obrázok (top 0, výška 100 %, flex stĺpec) - text sa len prisunie dole a prechod ide zdola, horná časť obrázka ostáva čistá. */ .next-to-carousel-banners .banner-wrapper > a { position: relative; display: block; } .next-to-carousel-banners .banner-wrapper img { width: 100% !important; display: block; } .next-to-carousel-banners .banner-wrapper .extended-banner-texts { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; max-width: none !important; transform: none !important; justify-content: flex-end !important; align-items: flex-start !important; margin: 0 !important; padding: 32px 32px 28px !important; text-align: left !important; background: linear-gradient(0deg, rgba(20, 18, 16, .86) 0%, rgba(20, 18, 16, .55) 35%, rgba(20, 18, 16, 0) 62%) !important; } .next-to-carousel-banners .extended-banner-title { color: #fff !important; } .next-to-carousel-banners .extended-banner-text { color: #f1ece4 !important; font-size: 15px !important; } .next-to-carousel-banners .extended-banner-link { color: #fff !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid #fff; padding-bottom: 2px; } @media (max-width: 767px) { .next-to-carousel-banners .banner-wrapper .extended-banner-texts { padding: 20px 20px 22px !important; background: linear-gradient(0deg, rgba(20, 18, 16, .88) 0%, rgba(20, 18, 16, .6) 40%, rgba(20, 18, 16, 0) 70%) !important; } .next-to-carousel-banners .extended-banner-title { font-size: 26px !important; } } /* --- Etapa 1, N4: menu na 1 280 px bez ☰ --------------------------------------------------- Carbon dáva menu šírku calc(100% - 690px) a každej položke okraje 20 px; šesť položiek sa nezmestilo a dve išli do ☰, hoci medzi menu a ikonami ostávalo ~200 px prázdna. Menu siaha ďalej doprava a okraje sú 14 px. Pod 1 201 px platí pôvodné správanie šablóny. Shoptet (splitMenu v main-3g.js) presúva do ☰ každú položku, ktorej pravý okraj je za ĽAVÝM okrajom ikony ☰ (.menu-helper) - preto sa ikona posúva spolu s koncom menu. */ @media (min-width: 1201px) { #navigation { margin-left: 180px; width: calc(100% - 500px); } #navigation ul.menu-level-1 > li > a { margin: 0 14px; } #header .menu-helper { right: 235px !important; } } /* --- Etapa 1, N6: banner Bannery+ (PODZIM20) na detaile produktu aj na PC ------------------ Na detaile zbytočne posúva cenu a „Přidat do košíku" pod okraj obrazovky. Kód je na detaile aj tak v kupón-lístku pod tlačidlom. (Na mobile to isté robí blok PODZIM20 v Zápatí.) */ .type-detail .dklabBanplusBannerGlobal { display: none !important; } /* Kritérium 5: aj bez banneru bolo „Přidat do košíku" na 1 280 × 800 nízko (Sanmai Silver 1 026 px, zľavnený Santoku Standard 1 171 px) - medzi cenou a tlačidlom stál kupón-lístok PODZIM20 (~150 px) a krátky popis (~300 px). Pravý stĺpec detailu je flex stĺpec s poradím (order): tlačidlo ide hneď za dostupnosť, kupón-lístok a popis pod neho - kupón je tak pod tlačidlom ako na mobile. Výsledok: 726 / 627 px. Na mobile poradie rieši blok zo 16. 10. a blok PODZIM20. */ @media (min-width: 768px) { .type-detail .p-info-wrapper > .add-to-cart { order: -1; } .type-detail .p-info-wrapper > .pz-t { order: 0 !important; } } /* --- Etapa 1, D5 (D-2026-10-20-76): titulka bez druhého banneru PODZIM20 ---------------------- Malý banner titulky (skript v Zápatí, knwb-banner-small) ukazuje PODZIM20. Globálny banner Bannery+ pod hlavičkou by bol na titulke tretí raz to isté (spolu s oranžovou lištou), tak sa na titulke skryje - nastavenie doplnku sa nemení. Na mobile stojí lišta PODZIM20 hneď za ním a pravidlo „#header+.pz-bar" z bloku PODZIM20 by ju nechalo pod fixnou hlavičkou. */ .type-index .dklabBanplusBannerGlobal { display: none !important; } @media (max-width: 767px) { .type-index #header + .dklabBanplusBannerGlobal + .pz-bar { margin-top: 45px; } } /* --- Etapa 1, N10 (D6): odznak Google Recenze na mobile ------------------------------------- Plávajúci odznak (doplnok ShopStack) prekrýval na titulke tlačidlá kariet. Na mobile skrytý, na PC ostáva. (Mimo titulky je skrytý už od 16. 10. pravidlom v Záhlaví.) */ @media (max-width: 767px) { .gr { display: none !important; } } /* --- Etapa 1, D-2026-10-20-78: bez popisu na kartách produktov -------------------------------- Majiteľ 20. 10.: „tie popisy produktov pod kodom asi vobec nie su potrebne". Úryvok popisu (sivý text pod cenou a štítkom s kódom) zmizne zo všetkých kariet - kategórie, titulka, slidery. Na mobile vo výpise kategórie bol skrytý už od 16. 10. */ .products .product .p-desc { display: none !important; } /* =================================================================================================== ETAPA 2 (v=2). Primárna farba (D3, D-2026-10-20-75) sa NEMENÍ tu, ale v Editor vzhledu: primárna #1e1e1c, hover #3c7781. Shoptet ju dáva do :root ako --color-primary a Carbon ju berie odtiaľ (pripnutá lišta na detaile, „Načíst další", stránkovanie, „Nahoru"). Od etapy 5 (D-2026-10-20-83) v Editor vzhledu farby z brand manuálu - viď ETAPA 5 na konci súboru. =================================================================================================== */ /* --- D4: štítky na kartách a na detaile ---------------------------------------------------------- Boli tri farby bez vzťahu k značke (Novinka červená, Akce modrá, ZDARMA čierny štvorec 70 × 70). Jeden tvar pre všetky; Novinka zlatobéžová z loga (#c4b49c), Akce čierna, ZDARMA biela s rámom. Od etapy 5 (v8) farby z brand manuálu: Novinka béžová #C9B7A4 s námorníckym textom, Akce námornícka. */ .flags .flag { border-radius: 0 !important; padding: 5px 9px !important; line-height: 1.2 !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; } /* Carbon: .flags .flag.flag-new{background:#d42424!important} - selektory musia mať aspoň rovnakú váhu. */ .flags .flag.flag-new { background: #C9B7A4 !important; color: #19235F !important; } .flags .flag.flag-action { background: #19235F !important; color: #fff !important; } .flags.flags-extra .flag.flag-freeshipping { width: auto !important; height: auto !important; flex-direction: row !important; align-items: center !important; gap: 6px; background: #fff !important; color: #1e1e1c !important; border: 1px solid #1e1e1c !important; padding: 4px 8px !important; } .flags.flags-extra .flag.flag-freeshipping span, .flags.flags-extra .flag.flag-freeshipping .icon-van::before { color: #1e1e1c !important; } .flags.flags-extra .flag.flag-freeshipping .icon-van { font-size: 14px !important; line-height: 1 !important; margin: 0 !important; } /* Carbon na mobile text „ZDARMA" skrýva - bez neho by ostala len malá ikonka bez rámu. */ .flags.flags-extra .flag.flag-freeshipping .flag-text { display: inline !important; font-size: 12px !important; margin: 0 !important; } /* --- D4: akciová cena bez blokov ------------------------------------------------------------------ Bola v lososovom bloku a stará cena v sivom boxe. Cena je tmavočervená (#a4161a, kontrast 7,8 : 1), na kartách prvá, za ňou prečiarknutá pôvodná cena a malý štítok percent. */ /* Carbon: .prices = flex stĺpec, obe strany min. 150 px, percentá 60 px - preto sa to rozpadalo na dva riadky. */ .products .product .prices.in-discount { display: flex; flex-direction: row !important; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; } .products .product .prices.in-discount .price-side { order: -1; width: auto !important; min-width: 0 !important; flex: 0 0 auto; background: none !important; padding: 0 !important; } .products .product .prices.in-discount .price-final, .products .product .prices.in-discount .price-final strong { color: #a4161a !important; padding-bottom: 0 !important; } .products .product .prices.in-discount .price-final strong { font-size: 18px !important; font-weight: 700 !important; } .products .product .prices.in-discount .discount-side { width: auto !important; min-width: 0 !important; justify-content: flex-start !important; flex: 0 0 auto; background: none !important; display: flex; align-items: center; gap: 8px; } .products .product .prices.in-discount .old-price { order: 1; } .products .product .prices.in-discount .percents { order: 2; width: auto !important; } .products .product .prices.in-discount .old-price, .products .product .prices.in-discount .percents, .p-final-price-wrapper.in-discount .price-standard, .p-final-price-wrapper.in-discount .price-save { white-space: nowrap; } .products .product .prices.in-discount .old-price { color: #6b6b6b !important; text-decoration: line-through; font-size: 14px !important; } .products .product .prices.in-discount .percents { background: #a4161a !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; padding: 2px 6px !important; } .p-final-price-wrapper.in-discount .discount-side { background: none !important; display: flex; align-items: center; gap: 10px; } .p-final-price-wrapper.in-discount .price-standard, .p-final-price-wrapper.in-discount .price-standard span { color: #6b6b6b !important; text-decoration: line-through; } .p-final-price-wrapper.in-discount .price-save { background: #a4161a !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; padding: 3px 8px !important; } .p-final-price-wrapper.in-discount .price-side { background: none !important; } .p-final-price-wrapper.in-discount .price-final, .p-final-price-wrapper.in-discount .price-final-holder { color: #a4161a !important; padding-left: 0 !important; padding-right: 0 !important; } /* --- N3: bannery s dlhým textom na titulke (CEO, „Spojení tradice s dokonalostí") ----------------- Text bol položený cez ľavý okraj fotky (čierny citát na tmavom závese). Text a obrázok idú vedľa seba. Telefón tieto bannery od Shoptetu vôbec nedostáva. */ @media (min-width: 992px) { .footer-banners .footer-banner > a, .body-banners .banner-wrapper > a { display: flex !important; align-items: center; gap: 48px; } .footer-banners .footer-banner > a > img, .body-banners .banner-wrapper > a > img { order: 2; flex: 0 0 58%; width: 58% !important; max-width: 58% !important; height: auto !important; margin: 0 !important; position: static !important; } .footer-banners .footer-banner .extended-banner-texts, .body-banners .banner-wrapper .extended-banner-texts { position: static !important; order: 1; flex: 1 1 0; min-width: 0; width: auto !important; max-width: none !important; height: auto !important; transform: none !important; margin: 0 !important; padding: 0 !important; background: none !important; } .footer-banners .footer-banner .extended-banner-text, .body-banners .banner-wrapper .extended-banner-text { font-size: 16px !important; line-height: 1.6 !important; color: #1e1e1c !important; } } /* --- N12 / kritérium 9: text tela aspoň 15 px ------------------------------------------------- Popisy produktov, úvod titulky, výhody a perex článkov mali 12,6-14 px. */ .basic-description, .basic-description p, .basic-description li, .p-short-description, .p-short-description p, .category-perex, .category-perex p, .welcome, .welcome p { font-size: 16px !important; line-height: 1.6 !important; } .benefitBanner__data { font-size: 15px !important; line-height: 1.5 !important; } .news-item .text .description { font-size: 15px !important; line-height: 1.55 !important; } /* =================================================================================================== ETAPA 3 (v3) =================================================================================================== */ /* --- Bannery kategórií na titulke nižšie (majiteľ 20. 10.: „tieto banery su zbytocne tak velke - na celu stranu") ------------------------------------------------------------------------------ Obrázky sú štvorcové (500 × 500), takže pri šírke okna 1 640 px mal každý banner ~770 px na výšku - celú obrazovku. Pomer 16 : 9 s orezom na stred (text ostáva dole na prechode). Len počítač: telefón dostáva od Shoptetu iné obrázky s textom v obrázku - tie sa orezávať nesmú. Obal dostal overflow hidden - obrázok sa pri nabehnutí myšou zväčší a pretekal mimo prechodu. */ @media (min-width: 768px) { /* Carbon: .next-to-carousel-banners .banner-wrapper a{overflow:visible!important} a pri nabehnutí img{transform:scale(1.1)!important} - bez !important obrázok vytŕčal (zistené naostro vo v3). */ body.desktop .next-to-carousel-banners .banner-wrapper > a { overflow: hidden !important; } body.desktop .next-to-carousel-banners .banner-wrapper img { aspect-ratio: 16 / 9; height: auto !important; object-fit: cover; object-position: 50% 45%; } } /* --- N11: pätička --------------------------------------------------------------------------------- Kontakty boli dvakrát (riadok s logom aj stĺpec „Kontakt") a tretí stĺpec bol prázdny košík „0 ks / 0 Kč". Ostáva riadok s logom a kontaktmi, pod ním odkazy v jednom riadku a väčším písmom. */ #footer .custom-footer__contact, #footer .custom-footer__cartButton { display: none !important; } #footer .custom-footer { display: block !important; } #footer .custom-footer__articles { width: 100% !important; max-width: none !important; flex: none !important; text-align: center; } #footer .custom-footer__articles .pageElement__heading { display: none !important; } #footer .custom-footer__articles ul { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin: 0 !important; padding: 0 !important; } #footer .custom-footer__articles li { margin: 0 !important; padding: 0 !important; list-style: none; } #footer .custom-footer__articles a { font-size: 16px !important; } /* --- Štítok ZDARMA preč (majiteľ 20. 10.: „iba niektore produkty maju dopravu zdarma a pritom ju maju takmer vsetky produkty") ------------------------------------------------------------------ Štítok sa riadi nastavením pri produkte, nie pravidlom „zdarma od 500 Kč": v kategórii Kuchyňské nože ho malo 1 z 22 produktov nad 500 Kč, v Akciách 0 z 20; v katalógu je nad 500 Kč 137 zo 142. Dopravu zadarmo hlási lišta navrchu každej stránky a pás výhod. Nastavenie produktov sa nemení. (Vzhľad štítku z etapy 2 vyššie ostáva - keby sa štítok vracal, netreba ho písať znova.) */ .flags-extra .flag.flag-freeshipping, .flags.flags-extra .flag.flag-freeshipping { display: none !important; } /* =================================================================================================== ETAPA 4 (v5) - rozloženie titulky (návrh R1-R4, úloha §5.4) =================================================================================================== */ /* --- R1: bannery s dlhým textom (CEO, „Spojení tradice") - obrázok najviac 440 px na výšku ------- Kresba samuraja je štvorcová (700 × 700) a pri 58 % šírky mala ~720 px na výšku = celá obrazovka. Šírka sa prispôsobí výške (štvorec 440 × 440, CEO 971 × 436 ostáva obmedzené na 58 % šírky). */ @media (min-width: 992px) { .footer-banners .footer-banner > a > img, .body-banners .banner-wrapper > a > img { flex: 0 1 auto !important; width: auto !important; max-width: 58% !important; max-height: 440px !important; } .footer-banners .footer-banner + .footer-banner { margin-top: 48px; } } /* Dva bannery v pozícii Zápatí dostanú od Shoptetu .footer-banners.double a col-lg-6 = vedľa seba po pol šírky (text v stĺpci 205 px, sekcia 930 px) - zistené naostro vo v5, v simulácii presunu to nebolo. Každý cez celú šírku. */ .footer-banners.double > .footer-banner { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* --- R2: kategórie len raz - veľké bannery kategórií skryté, „Top kategorie" má všetkých päť ------ */ .type-index .next-to-carousel-banners { display: none !important; } /* --- R3 a R4: telefón - články ako riadky, výhody hustejšie ---------------------------------------- */ @media (max-width: 767px) { .homepage-blog-wrapper .news-item > a { display: flex !important; align-items: center; gap: 14px; } .homepage-blog-wrapper .news-item .image { flex: 0 0 104px !important; width: 104px !important; max-width: 104px !important; margin: 0 !important; } .homepage-blog-wrapper .news-item .image img { width: 104px !important; height: 104px !important; object-fit: cover; } .homepage-blog-wrapper .news-item .text { flex: 1 1 0; min-width: 0; padding: 0 !important; text-align: left !important; } .homepage-blog-wrapper .news-item .description { display: none !important; } .homepage-blog-wrapper .news-item .title { font-size: 16px !important; line-height: 1.35 !important; } .homepage-blog-wrapper .news-item { margin-bottom: 16px !important; } } /* R4: výhody na telefóne ako riadky „ikona + nadpis" - nadpisy nesú celú správu, dlhý text pod nimi (2 × 2 karty po 245-290 px, spolu 534 px) sa na telefóne neukazuje. */ @media (max-width: 767px) { .benefitBanner { flex-direction: column !important; flex-wrap: nowrap !important; } .benefitBanner .benefitBanner__item { width: 100% !important; max-width: none !important; flex: none !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; padding: 10px 4px !important; border-bottom: 1px solid #e6e3de; } .benefitBanner .benefitBanner__picture { flex: 0 0 36px !important; width: 36px !important; margin: 0 14px 0 0 !important; } .benefitBanner .benefitBanner__img { width: 36px !important; height: 36px !important; } .benefitBanner .benefitBanner__data { display: none !important; } .benefitBanner .benefitBanner__title { font-size: 16px !important; line-height: 1.3 !important; } } /* --- R5: adresa osobného odberu v pokladni viditeľne pod názvom (v7) -------------------------------- Popis dopravy z administrácie (Nastavení → Doprava → Osobní odběr → Popis) Shoptet v kroku 1 nevypíše ako text, len do bublinky za ikonkou „?" (atribút data-original-title) - zákazník adresu bez nabehnutia myšou nevidel. Zistené naostro vo v6; náhľad to nezachytil, lebo popis do stránky vkladal skript. Text sa berie z toho istého atribútu, takže sa mení len v administrácii. */ .radio-wrapper input[data-code="personal-collection"] + label .payment-info > span { display: block; } .radio-wrapper input[data-code="personal-collection"] + label .question-tooltip { display: block !important; float: none !important; margin: 0 !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; text-align: left !important; pointer-events: none; } .radio-wrapper input[data-code="personal-collection"] + label .question-tooltip::before { content: attr(data-original-title); display: block; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 400; color: #333; } /* =================================================================================================== ETAPA 5 (v8) - farby podľa brand manuálu Samurai (D-2026-10-20-83, úloha §5.5). Paleta manuálu: polnočná #101434, námornícka #19235F (logo), oceľová #5078AA, béžová #C9B7A4 (znak 侍), krémová #F6F2E9, k tomu čierna a biela. V Editor vzhledu: primárna #19235F / hover #5078AA, sekundárna #19235F / hover #101434, terciárna #5078AA / hover #19235F (sekundárnu berie „Pokračovat"). Zľavnená cena ostáva tmavočervená #a4161a (rozhodnutie O8), zelená „Skladem" sa nemení. =================================================================================================== */ /* --- F1: tlačidlá. „Přidat do košíku" na detaile má čiernu priamo zo šablóny Carbon (nie z premennej) a „Do košíku" na kartách #1e1e1c z nášho bloku v Záhlaví (ten je za týmto súborom - preto body). */ body .btn.btn-conversion, body .products-block.products .product button.btn-cart { background: #19235F !important; border-color: #19235F !important; color: #fff !important; } body .btn.btn-conversion:hover, body .products-block.products .product button.btn-cart:hover { background: #5078AA !important; border-color: #5078AA !important; } /* --- F5: pás „Doprava ZDARMA od 500 Kč" (doplnok dkLAB) polnočná namiesto čiernej. */ .dklab-delivery-box.dopravaInfo { background: #101434 !important; } /* --- F2: kupón PODZIM20 (variant K2) - lišta, lístok pod tlačidlom, štítok „s kódem", pripomienka v košíku. Skript v Zápätí si farby skladá sám (prechod #7c2d12 → #ea580c) a vkladá