/* theikos.css – všechny vlastní styly theikos.cz v jednom souboru. Verze 20260928. Sestaveno skriptem build.py z původních souborů (zaloha-2026-09-27/puvodni-soubory/CSS); pořadí oddílů = původní pořadí načítání, protože na něm závisí, které pravidlo vyhraje. Každý oddíl začíná hlavičkou s názvem původního souboru. Změny proti původním souborům jsou popsané v build.py (a v komentářích uvnitř oddílů). OBSAH 1. Styly vizitky (původně doplněk Vizitka – https://cdn.myshoptet.com/usr/izora.myshoptet.com/user/documents/vizitka/main.min.css?v=020; beze změny) 2. hlavni-styly.css (původně v hlavičce) 3. Horní navigační lišta (původně vkládal horni-lista.js) 4. telo-styly.css (selektory .klaviyo-form s předřazeným "html " – viz komentář v build.py) 5. recenze-highlighter-v4.css (citát z recenzí pod hvězdičkami; prázdný vkládá už hlavička jako rezervaci místa) 6. blog_styly_V9.css (výpis článků na úvodu i v blogu, obrázek článku) 7. vse_o_nakupu_V3.css 8. bannery_vyhody.css 9. kosik_upravy.css (pravidla pro Ellity s předřazeným "html " – viz komentář v build.py) 10. vizitka_upravy.css (beze změny; selektor "card-wrapper .card-email img" bez tečky nikdy neplatil – ponecháno, aby se nezměnil vzhled) 11. product-theikos-desc_V14.css (.theikos-desc → .type-product = třída, kterou dává Shoptet na ze serveru) 12. kalkulacka-spotreby-v5.css 13. clanek_styl_V8.css (dřív načítán přes @import z clanek_styl_recepty_V1.css a skriptem uvnitř článků) 14. clanek_styl_recepty_V1.css 15. Doplněno při sloučení */ /* ================================================================== Styly vizitky (původně doplněk Vizitka – https://cdn.myshoptet.com/usr/izora.myshoptet.com/user/documents/vizitka/main.min.css?v=020; beze změny) ================================================================== */ .card-wrapper .card-email,.card-wrapper .card-phone{width:100%;font-size:11pt;display:flex;place-self:center;justify-items:center;align-items:center;gap:1rem}.card-wrapper .card-email img,.card-wrapper .card-phone img{max-width:60px;background:#fafafa;border-radius:50%;padding:0}.card-wrapper .card-email a,.card-wrapper .card-phone a{text-decoration:underline}body.card-style-1 .card-wrapper .detail .card-photo,body.card-style-2 .card-wrapper .detail .card-photo,body.card-style-3 .card-wrapper .detail .card-photo,body.card-style-4 .card-wrapper .detail .card-photo,body.card-style-5 .card-wrapper .detail .card-photo{max-width:80px!important;display:flex;align-items:center;justify-content:center}body.card-style-6 .card-wrapper .detail .card-photo{display:flex;align-items:center;justify-content:center}body.card-style-6 .card-wrapper .detail .card-photo img{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}body.card-style-1 .card-wrapper .detail .card-photo,body.card-style-1 .card-wrapper .detail .card-photo img,body.card-style-2 .card-wrapper .detail .card-photo,body.card-style-2 .card-wrapper .detail .card-photo img,body.card-style-3 .card-wrapper .detail .card-photo,body.card-style-3 .card-wrapper .detail .card-photo img,body.card-style-4 .card-wrapper .detail .card-photo,body.card-style-4 .card-wrapper .detail .card-photo img,body.card-style-5 .card-action-button .card-photo,body.card-style-5 .card-action-button .card-photo img,body.card-style-6 .card-action-button .card-photo,body.card-style-6 .card-action-button .card-photo img{max-width:80px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}body.card-style-6 .card-wrapper .detail .card-photo img{border-radius:50%!important}body.card-style-1 .card-wrapper .detail .text h3,body.card-style-2 .card-wrapper .detail .text h3,body.card-style-3 .card-wrapper .detail .text h3,body.card-style-4 .card-wrapper .detail .text h3,body.card-style-5 .card-wrapper .detail .text h3,body.card-style-6 .card-wrapper .detail .text h3{margin-top:1rem;margin-bottom:1rem}body.card-style-1 .card-wrapper .icon{margin:2rem auto 0}body.card-style-1 .card-wrapper .icon .card-email a,body.card-style-1 .card-wrapper .icon .card-phone a,body.card-style-1 .card-wrapper .icon .card-phone a body.card-style-1 .card-wrapper .icon .card-email a{text-decoration:underline;margin-left:1rem}.card-left-circle{display:flex;flex-direction:column;justify-content:center;position:fixed;left:20px;bottom:20px}.open .card-action-button:before,body.card-style-5 .open .card-action-button:before{content:"";font-size:30px;color:#fff;width:50px;height:50px;border-radius:100%;left:0;bottom:0;justify-content:center;z-index:2;position:absolute;text-align:center}.card-action-button,body.card-style-5 .card-action-button{text-align:center;width:100px;height:100px;border-radius:100%;box-shadow:rgba(50,50,93,.25) 0 50px 100px -20px,rgba(0,0,0,.3) 0 30px 60px -30px;background:#fff;overflow:hidden;object-fit:cover;padding:10px}.card-action-button:hover{cursor:pointer}body.card-style-5 .open .card-action-button:before{background:url('https://izora.myshoptet.com/user/documents/upload/c/white-close.svg') center/20px no-repeat #444;display:flex;align-items:center}body.card-style-5 .card-wrapper .detail{display:grid;grid-template-columns:repeat(1,100%);grid-gap:min(2vmax,32px);grid-row-gap:2rem;grid-column-gap:2rem}.card-left-circle .card-wrapper{display:none}.open .card-wrapper{background:#fff;box-shadow:rgba(0,0,0,.25) 0 25px 50px -12px}.open .card-action-button:before{background:url(https://izora.myshoptet.com/user/documents/upload/c/white-close.svg) center/20px no-repeat #444;display:flex;align-items:center}.card-action-button:before{content:"Potřebujete pomoci?";font-size:14px;color:#000;position:absolute;left:75px;bottom:60px;width:max-content;padding:12px;background:#fff;box-shadow:rgba(0,0,0,.1) 0 1px 3px 0,rgba(0,0,0,.06) 0 1px 2px 0;border-radius:26px;display:flex;justify-content:center;align-items:center;text-align:center}@media only screen and (min-width:768px) and (max-width:1440px){.card-wrapper .card-email,.card-wrapper .card-phone{display:grid!important;place-self:center;justify-items:center;align-items:center;gap:1rem}}@media only screen and (max-width:768px){body.card-style-3 .card-wrapper,body.card-style-4 .card-wrapper{position:relative;box-shadow:rgba(100,100,111,.2) 0 7px 29px 0;max-width:90%}body.card-style-1 .card-wrapper,body.card-style-2 .card-wrapper,body.card-style-5 .card-wrapper,body.card-style-6 .card-wrapper{box-shadow:rgba(100,100,111,.2) 0 7px 29px 0;max-width:90%;margin:2rem 5%;padding:2rem}body.card-style-1 .card-wrapper .icon,body.card-style-2 .card-wrapper .icon,body.card-style-3 .card-wrapper .icon,body.card-style-4 .card-wrapper .icon,body.card-style-5 .card-wrapper .icon,body.card-style-6 .card-wrapper .icon{display:grid;grid-template-columns:repeat(1,100%);place-self:center;justify-items:center;align-items:center;gap:1rem;padding:1rem}body.card-style-1 .card-wrapper .detail .card-photo,body.card-style-1 .card-wrapper .detail .card-photo img,body.card-style-2 .card-wrapper .detail .card-photo,body.card-style-2 .card-wrapper .detail .card-photo img,body.card-style-3 .card-wrapper .detail .card-photo,body.card-style-3 .card-wrapper .detail .card-photo img,body.card-style-4 .card-wrapper .detail .card-photo,body.card-style-4 .card-wrapper .detail .card-photo img,body.card-style-5 .card-wrapper .detail .card-photo,body.card-style-5 .card-wrapper .detail .card-photo img,body.card-style-6 .card-wrapper .detail .card-photo,body.card-style-6 .card-wrapper .detail .card-photo img{max-width:130px!important;max-height:130px!important;border-radius:50%;margin:0 auto;display:block}body.card-style-3 .card-wrapper .detail .card-photo,body.card-style-4 .card-wrapper .detail .card-photo{transform:translate(-50%,-50%);max-width:130px;max-height:130px;top:0;position:absolute;box-shadow:rgba(149,157,165,.2) 0 8px 24px}body.card-style-1 .card-wrapper .detail .text h3,body.card-style-2 .card-wrapper .detail .text h3,body.card-style-3 .card-wrapper .detail .text h3,body.card-style-4 .card-wrapper .detail .text h3,body.card-style-5 .card-wrapper .detail .text h3,body.card-style-6 .card-wrapper .detail .text h3{text-align:center}body.card-style-3 .card-wrapper{margin:8rem 5% 2rem;padding:10rem 2rem 2rem}body.card-style-4 .card-wrapper{margin:5rem 5% 2rem;padding:8rem 2rem 2rem}body.card-style-3 .card-wrapper .detail .card-photo{left:50%}body.card-style-4 .card-wrapper .detail .card-photo{left:auto;right:-10%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%)}body.card-style-5 .card-left-circle,body.card-style-6 .card-left-circle{display:flex;flex-direction:column;justify-content:center;position:fixed;left:2rem;bottom:2rem;z-index:9999}body.card-style-5 .open .card-action-button,body.card-style-6 .open .card-action-button{position:absolute;top:0;right:0;max-width:50px;max-height:50px}body.card-style-5 .card-left-circle.open,body.card-style-6 .card-left-circle.open{display:flex;flex-direction:column;justify-content:center;position:fixed;left:0;bottom:0;max-width:768px}body.card-style-5 .open .icon,body.card-style-6 .open .icon{margin-top:1rem;margin-bottom:1rem}body.card-style-1 .card-wrapper,body.card-style-2 .card-wrapper,body.card-style-3 .card-wrapper,body.card-style-4 .card-wrapper,body.card-style-5 .card-left-circle.open .card-wrapper,body.card-style-6 .card-left-circle.open .card-wrapper{border-radius:10px}body.template-07.card-style-4 .card-wrapper,body.template-09.card-style-4 .card-wrapper,body.template-10.card-style-4 .card-wrapper,body.template-11.card-style-4 .card-wrapper,body.template-12.card-style-4 .card-wrapper{margin-top:10rem}body.template-08.card-style-3 .card-wrapper,body.template-08.card-style-4 .card-wrapper{margin:8rem 5% 2rem;box-shadow:rgba(100,100,111,.2) 0 7px 29px 0;max-width:90%;position:relative}body.template-04.card-style-3 .card-wrapper .detail .card-photo,body.template-06.card-style-3 .card-wrapper .detail .card-photo,body.template-07.card-style-3 .card-wrapper .detail .card-photo,body.template-09.card-style-3 .card-wrapper .detail .card-photo,body.template-10.card-style-3 .card-wrapper .detail .card-photo,body.template-11.card-style-3 .card-wrapper .detail .card-photo,body.template-12.card-style-3 .card-wrapper .detail .card-photo{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:130px;height:130px;box-shadow:rgba(149,157,165,.2) 0 8px 24px}body.template-08.card-style-4 .card-wrapper{padding:5rem 2rem 2rem}body.template-08.card-style-3 .card-wrapper{padding:6rem 2rem 2rem}body.template-08.card-style-3 .card-wrapper .detail .card-photo{top:0;left:50%;transform:translate(-50%,-50%);position:absolute}body.template-06.card-style-3 .card-wrapper{position:relative;box-shadow:rgba(100,100,111,.2) 0 7px 29px 0;max-width:90%;margin:6rem 5% 2rem;padding:4rem 2rem 2rem}body.template-04.card-style-4 .card-wrapper,body.template-05.card-style-4 .card-wrapper,body.template-06.card-style-4 .card-wrapper{position:relative;box-shadow:rgba(100,100,111,.2) 0 7px 29px 0;max-width:90%;margin:5rem 5% 2rem;padding:5rem 2rem 2rem}body.template-04.card-style-3 .card-wrapper,body.template-05.card-style-3 .card-wrapper{box-shadow:rgba(100,100,111,.2) 0 7px 29px 0;max-width:90%;margin:6rem 5% 2rem;padding:5rem 2rem 2rem}body.template-05.card-style-3 .card-wrapper .detail .card-photo{position:absolute;top:-80%;left:50%;transform:translate(-50%,-50%);width:130px;height:130px;box-shadow:rgba(149,157,165,.2) 0 8px 24px}body.template-04.card-style-3 .card-wrapper{position:relative}}@media only screen and (min-width:768px){body.card-style-1 .card-wrapper,body.card-style-2 .card-wrapper,body.card-style-3 .card-wrapper,body.card-style-4 .card-wrapper,body.card-style-5 .card-wrapper,body.card-style-6 .card-wrapper{box-shadow:rgba(100,100,111,.2) 0 7px 29px 0;margin:2rem auto;padding:2rem}body.card-style-1 .card-wrapper .detail{display:grid;grid-template-columns:repeat(1,auto 2fr)!important;place-self:center;justify-items:center;align-items:center;gap:2rem}body.card-style-2 .card-wrapper .detail{display:grid;grid-template-columns:repeat(1,2fr 1fr);place-self:center;justify-items:center;align-items:center}body.card-style-3 .card-wrapper .detail{display:grid;grid-template-columns:repeat(1,1fr);place-self:center;justify-items:center;align-items:center}body.card-style-1 .card-wrapper .icon,body.card-style-2 .card-wrapper .icon,body.card-style-3 .card-wrapper .icon,body.card-style-4 .card-wrapper .icon,body.card-style-5 .card-wrapper .icon,body.card-style-6 .card-wrapper .icon{display:grid;grid-template-columns:repeat(1,50% 50%);place-self:center;justify-items:center;align-items:center}body.card-style-4 .card-wrapper{position:relative}body.card-style-4 .card-wrapper .detail .card-photo{position:absolute;top:0;left:auto;right:-5%;transform:translate(-50%,-50%);max-width:130px;max-height:130px;box-shadow:rgba(149,157,165,.2) 0 8px 24px}body.card-style-4 .card-wrapper .detail .text{margin-right:10rem}body.card-style-5 .card-left-circle.open,body.card-style-6 .card-left-circle.open{max-width:440px;z-index:999!important}body.card-style-5 .card-left-circle.open .card-action-button,body.card-style-6 .card-left-circle.open .card-action-button{width:50px;height:50px;position:absolute;top:0;right:-25px}body.card-style-1 .card-wrapper,body.card-style-2 .card-wrapper,body.card-style-3 .card-wrapper,body.card-style-4 .card-wrapper,body.card-style-5 .card-left-circle.open .card-wrapper,body.card-style-6 .card-left-circle.open .card-wrapper{border-radius:10px}body.template-07.card-style-4 .card-wrapper,body.template-09.card-style-4 .card-wrapper,body.template-12.card-style-4 .card-wrapper{margin-top:10rem}body.template-06.card-style-4 .card-wrapper,body.template-08.card-style-4 .card-wrapper{margin-top:5rem}body.template-04.card-style-4 .card-wrapper .detail .text,body.template-05.card-style-4 .card-wrapper .detail .text,body.template-06.card-style-4 .card-wrapper .detail .text,body.template-08.card-style-4 .card-wrapper .detail .text{margin-right:0}body.template-04.card-style-4 .card-wrapper,body.template-05.card-style-4 .card-wrapper{position:relative;margin-top:5rem}} /* ================================================================== hlavni-styly.css (původně v hlavičce) ================================================================== */ /* ============================================ HLAVNÍ STYLY – HEAD Soubor: hlavni-styly.css Obsah: 1. Základní typografie a font-smoothing 2. Kategorie blogu (obrázky, padding) 3. Mobilní styly (padding článků, blog) 4. Homepage – poslední příspěvky 5. Rozšířené bannery (extended-banner) 6. Logo – posun a stín 7. Contact-box ============================================ */ /* ------------------------------------------ 1. ZÁKLADNÍ TYPOGRAFIE A FONT-SMOOTHING ------------------------------------------ */ p a { text-decoration: underline; } p, a, h1, h2, h3, h4, h5, h6 { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* ------------------------------------------ 2. KATEGORIE BLOGU ------------------------------------------ */ .subcategories.with-image li a .image { display: none; } .subcategories li a { padding: 5px 10px 5px 10px; } .subcategories.with-image li a { padding-left: 10px; } /* ------------------------------------------ 3. MOBILNÍ STYLY (PADDING ČLÁNKŮ, BLOG) ------------------------------------------ */ @media (max-width: 768px) { #content-wrapper { padding-left: 16px !important; padding-right: 16px !important; } #content-wrapper .content-inner > h1 + ul.subcategories { padding-left: 0 !important; padding-right: 0 !important; } #content-wrapper .content-inner > h1 + ul.subcategories li { width: 100% !important; display: block !important; float: none !important; } } @media (max-width: 768px) { .latest-contribution-review > div { flex-direction: column !important; } } /* ------------------------------------------ 4. HOMEPAGE – POSLEDNÍ PŘÍSPĚVKY ------------------------------------------ */ .homepage-latest-contribution .latest-contribution .latest-contribution-product { margin-bottom: 24px !important; } .latest-contribution-description { max-width: 450px; margin-left: auto; margin-right: auto; } /* ------------------------------------------ 5. ROZŠÍŘENÉ BANNERY (EXTENDED-BANNER) ------------------------------------------ */ .extended-banner-texts { align-items: center !important; justify-content: center !important; background-color: #E9F6E8 !important; min-width: 25% !important; max-width: 28% !important; min-height: auto !important; left: 32px!important; bottom: 30%!important; padding: 0px !important; padding-bottom: 32px !important; border-bottom-right-radius: 8px!important; border-bottom-left-radius: 8px!important; } .extended-banner-text { display: inline-block !important; justify-content: space-around !important; margin-top:0px!important; padding: 32px !important; padding-bottom: 0px !important; margin-bottom:10px!important; } .extended-banner-text h2 { margin-top:0px!important; font-size:28px!important; } @media (max-width: 990px) { .extended-banner-texts { display: none !important; } } @media (min-width: 1500px) { .extended-banner-texts { align-items: center !important; justify-content: center !important; background-color: #E9F6E8 !important; min-width: 25% !important; max-width: 28% !important; min-height: 30% !important; left: 32px!important; bottom: 35%!important; padding: 0px !important; padding-bottom: 32px !important; border-bottom-right-radius: 8px!important; border-bottom-left-radius: 8px!important; } .extended-banner-text h2 { margin-top:0px!important; font-size:36px!important; line-height: 42px; } .extended-banner-text p { font-size:22px!important; line-height: 30px; } .extended-banner-link{ font-size:22px!important; font-size: 20px; line-height: 24px; } } /* ------------------------------------------ 6. LOGO – POSUN A STÍN ------------------------------------------ */ .site-name { display: inline-block; position: relative; } .site-name:hover { transition: transform 500ms, filter 500ms; transform: translateY(-2px); filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.2)); } /* ------------------------------------------ 7. CONTACT-BOX ------------------------------------------ */ .contact-box img { max-width: 94px; } /* ================================================================== Horní navigační lišta (původně vkládal horni-lista.js) ================================================================== */ .top-navigation-contacts { text-align: center; font-size: 11px; color: gray; } @media (max-width: 768px) { .top-navigation-menu { display: none; } } .sloupec { width: 33.33%; display: inline-block; vertical-align: top; text-align: left; font-size: 11px; color: gray; } .levy-sloupec a { color: gray; text-decoration: none; padding-left: 25px; } .levy-sloupec a:hover { text-decoration: underline; color: #ffd700; } .stredni-sloupec { text-align: center; } /* ================================================================== telo-styly.css (selektory .klaviyo-form s předřazeným "html " – viz komentář v build.py) ================================================================== */ /* ============================================ STYLY TĚLA STRÁNKY – BODY Soubor: telo-styly.css Obsah: 1. Newsletter patička 2. Klaviyo formulář 3. Newsletter responzivita 4. Ellity link skrytí (bonus produkt) 5. Odkaz ověřování recenzí 6. Nadpisy, hvězdy, tooltip, header ============================================ */ /* ------------------------------------------ 1. NEWSLETTER PATIČKA ------------------------------------------ */ .theikos-newsletter-footer { background-color: #e9f6e8; padding: 60px 0 0 0; } .newsletter-container { max-width: 100%; margin: 0 auto; } .newsletter-content { display: flex; flex-wrap: wrap; align-items: start; justify-content: center; gap: 0px; } .newsletter-text h3 { font-size: 22px; margin-bottom: 10px; font-weight: bold; color: #036400; margin-top: 0px; } .newsletter-text p { font-size: 15px; color: #161616; margin: 0; font-family: sans-serif !important; } /* ------------------------------------------ 2. KLAVIYO FORMULÁŘ ------------------------------------------ */ html .klaviyo-form-Vq5dEF form { background: transparent !important; padding: 0 !important; flex-direction: row !important; gap: 10px; justify-content: flex-start !important; font-family: sans-serif !important; } html .klaviyo-form-Vq5dEF input[type="text"] { font-size: 15px; letter-spacing: 0 !important; font-family: sans-serif !important; } html .klaviyo-form-Vq5dEF button { height: 28px !important; padding: 10px 20px !important; text-align: center; text-transform: none; transition: all 0.3s ease-out; white-space: normal; background-color: #036400; color: white; border-color: #036400; font-family: sans-serif !important; } html .klaviyo-form-Vq5dEF button:hover { background-color: #024d00; border-color: #024d00; } /* ------------------------------------------ 3. NEWSLETTER RESPONZIVITA ------------------------------------------ */ @media (min-width: 768px){ .newsletter-form { display: flex; justify-content: center; min-width: 50%; flex-basis: 50%; padding-left: 16px !important; } .newsletter-text { min-width: 50%; flex-basis: 50%; padding-right: 16px !important; } } @media (min-width: 1200px){ .newsletter-form { display: flex; justify-content: center; min-width: 25%; flex-basis: 25%; padding-left: 16px !important; padding-right: 16px !important; } .newsletter-text { min-width: 25%; flex-basis: 25%; padding-right: 16px !important; padding-left: 16px !important; } .newsletter-container { max-width: 100%; margin: 0 auto; padding-left: 0px !important; padding-right: 0px !important; } } @media (max-width: 768px) { .newsletter-content { flex-direction: column; align-items: start !important; gap: 30px; } .newsletter-text, .newsletter-form { flex: 1 1 100%; } html .klaviyo-form .kl-private-reset-css-Xuajs1[data-testid="form-row"] { align-items: flex-start !important; display: block !important; } html .klaviyo-form-Vq5dEF .kl-private-reset-css-Xuajs1[data-testid="form-row"] > div:last-of-type[data-testid="form-component"] { padding-left: 0 !important; padding-right: 0 !important; } .newsletter-form { justify-content: start; align-items: start !important; } html .klaviyo-form-Vq5dEF form { flex-direction: column !important; } html .klaviyo-form-Vq5dEF input[type="text"] { width: 100% !important; margin-bottom: 10px; } html .klaviyo-form-Vq5dEF button { width: 100% !important; } } /* ------------------------------------------ 4. ELLITY LINK SKRYTÍ (BONUS PRODUKT) ------------------------------------------ */ .mehub-bonus-product-detail-container .ellity-link { display: none !important; } /* ------------------------------------------ 5. ODKAZ OVĚŘOVÁNÍ RECENZÍ ------------------------------------------ */ .centered-link { display: inline-block; text-align: center; margin-top: 15px; } /* ------------------------------------------ 6. NADPISY, HVĚZDY, TOOLTIP, HEADER ------------------------------------------ */ header { text-align: center; } .question-tooltip { background-color: #036400; } .stars .star.star-on::before, .stars .star.star-half::before { color: #FFD700; } .text-center { text-align: left; } .welcome { text-align: center; } /* ================================================================== recenze-highlighter-v4.css (citát z recenzí pod hvězdičkami; prázdný vkládá už hlavička jako rezervaci místa) ================================================================== */ /* ============================================ RECENZE HIGHLIGHTER – Theikos Soubor: recenze-highlighter.css Jednoduchý rotující citát pod hvězdičkami. Fixní výška pro citát – obsah neskáče. ============================================ */ /* Stars wrapper musí zabrat celý řádek */ .p-detail-inner-header .stars-wrapper, .p-detail-inner-header-mobile .stars-wrapper { display: flex; flex-wrap: wrap; align-items: center; width: 100%; } /* Citát pod hvězdičkami */ .review-highlight-quote { display: block; max-width: 100%; margin-top: 10px; margin-bottom: 4px; font-size: 13px; font-style: italic; color: #555; line-height: 1.4; transition: opacity 0.4s ease; /* Fixní výška – 2 řádky na desktopu */ min-height: 2.8em; max-height: 2.8em; overflow: hidden; } .review-highlight-author { font-style: normal; color: #999; font-size: 12px; } /* Na širokých monitorech omez šířku */ @media (min-width: 992px) { .review-highlight-quote { max-width: 540px; } } @media (max-width: 767px) { .review-highlight-quote { font-size: 12px; margin-bottom: 12px; margin-top: 0px; /* Fixní výška – 3 řádky na mobilu */ min-height: 3.8em; max-height: 3.8em; } .review-highlight-author { font-size: 11px; } .p-detail-inner-header-mobile .stars-wrapper { padding-bottom: 8px !important; } } /* ================================================================== blog_styly_V9.css (výpis článků na úvodu i v blogu, obrázek článku) ================================================================== */ /* řazení příspěvků a velikost v blogu na pc */ @media (min-width: 768px) { .blog-wrapper { justify-content: center; display: flex; align-items: initial !important; } .blog-wrapper .news-item { flex-basis: 50% !important; width: 50% !important; } .blog-wrapper .news-item .title { -webkit-line-clamp: 4 !important; } /* řazení příspěvků a velikost na homepage na pc */ .homepage-blog-wrapper { align-items: initial !important; flex-wrap: wrap !important; } .homepage-blog-wrapper .news-item { flex-basis: 50% !important; } .homepage-blog-wrapper .news-item .image + .text { padding: 32px !important; } } @media (min-width: 1200px) { .blog-wrapper { justify-content: center; display: flex; align-items: initial !important; } .blog-wrapper .news-item { flex-basis: 25% !important; width: 25% !important; } .blog-wrapper .news-item .title { -webkit-line-clamp: 4 !important; } .homepage-blog-wrapper { align-items: initial !important; flex-wrap: wrap !important; } .homepage-blog-wrapper .news-item { flex-basis: 40% !important; max-width: 38%; } } /* styl popiskového bloku a obrázků (PC) */ @media (min-width: 768px) { #newsWrapper .news-item .text { position: static !important; /* Nastavit výchozí pozici */ border-radius: 0px !important; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; min-height: 300px; justify-content: start !important; } .news-item .image { position: relative; overflow: hidden; /* Skryje přesahující části obrázku */ height: 0; padding-bottom: 100%; /* Výška kontejneru obrázku */ } .news-item .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; object-fit: cover; /* Ořízne obrázek tak, aby vyplnil kontejner */ } } /* PC změny pouze pro blog – pouze #newsWrapper */ @media (min-width: 768px) { #newsWrapper .image + .text { background: #f1f1f1; color: #000; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; padding: 16px; } #newsWrapper .news-item .image img { border-radius: 0px !important; border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; } #newsWrapper .news-item .image { margin-bottom: 0px; } #newsWrapper .image + .text .description { color: #000; } #newsWrapper .image + .text .title { color: #000; } } /* řádky v popiscích na HP a v blogu */ .homepage-blog-wrapper .news-item .text .description, #newsWrapper.news-wrapper.blog-wrapper .news-item .text .description { display: -webkit-box; -webkit-line-clamp: 5; /* Přizpůsobte počet řádků, které chcete zobrazit */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* obrázky uvnitř článků na střed */ #content > div > div > article > img { margin: auto; /* Toto zajistí horizontální a vertikální zarovnání uvnitř flexboxu */ display: block; } /* Mobilní styly – změny pro blog i homepage */ @media screen and (max-width: 768px) { /* Upravený blok pro popiskový text u news-item pro obě sekce */ #newsWrapper .image + .text, .homepage-blog-wrapper .image + .text { background: #f1f1f1; color: #000; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; padding: 16px; } /* Obrázky uvnitř news-item – sjednocení vzhledu */ #newsWrapper .news-item .image img, .homepage-blog-wrapper .news-item .image img { border-radius: 0px !important; border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; } /* Odstranění spodního marginu u obrázkového boxu */ #newsWrapper .news-item .image, .homepage-blog-wrapper .news-item .image { margin-bottom: 0px; } /* Barvy textu v popiscích – nadpis a popis */ #newsWrapper .image + .text .description, .homepage-blog-wrapper .image + .text .description { color: #000; } #newsWrapper .image + .text .title, .homepage-blog-wrapper .image + .text .title { color: #000; } } /* Mobilní hover efekt – text a obrázek na blogu i homepage */ @media screen and (max-width: 768px) { /* Text */ #newsWrapper .news-item:hover .text, .homepage-blog-wrapper .news-item:hover .text { background: #e0e0e0 !important; transition: all .3s ease-out; } /* Obrázky */ #newsWrapper .news-item:hover .image img, .homepage-blog-wrapper .news-item:hover .image img { filter: brightness(80%) !important; transition: all .3s ease-out; } } /* PC hover efekt – text a obrázek pouze na blogu */ @media screen and (min-width: 768px) { /* Text */ #newsWrapper .news-item:hover .text { background: #e0e0e0 !important; } /* Obrázky */ #newsWrapper .news-item:hover .image img { filter: brightness(80%) !important; transition: all .3s ease-out; } } /* ================================================================== vse_o_nakupu_V3.css ================================================================== */ /*vse_o_nakupu styly a popisky - nadpisy na střed, podtržení při najetí*/ @media (min-width: 768px) { .vse-o-nakupu .news-wrapper { display: flex; flex-direction: column; align-items: center !important; } .vse-o-nakupu .news-item { width: 900px; margin-bottom: 20px; width: 50% !important; flex-basis: 50% !important; } } .vse-o-nakupu .news-item .title { text-align: center; } .vse-o-nakupu .news-item .title:hover { text-decoration: underline; } .vse-o-nakupu .news-item .read-article { display: none; } .vse-o-nakupu .next-prev.text-center { display: none; } /* ================================================================== bannery_vyhody.css ================================================================== */ /* konkurenční bannery podtržení, nadpisy na střed, mobilní úpravy zobrazení */ /* (původní první pravidlo .benefitBanner__title {margin-top:4px;line-height:22px} se kvůli HTML komentáři nikdy neuplatnilo – vypuštěno, vzhled beze změny) */ .benefitBanner__picture { display: flex; justify-content: center; align-items: center; } .benefitBanner .benefitBanner__picture img { max-height: unset !important; } .benefitBanner__picture img[src*="cdn.myshoptet.com/usr/www.theikos.cz/user/banners/garance_vraceni_penez_2.png?64d0c205"] { height: auto; width: 215% !important; max-height: unset !important; max-width: unset !important; padding-bottom: 30px; } .benefitBanner__picture img[src*="cdn.myshoptet.com/usr/www.theikos.cz/user/banners/farmar_theikos_olivy_sklizen.png?68527b7b"] { height: auto; width: 160% !important; max-height: unset !important; max-width: unset !important; padding-bottom: 15px; } /* Přidání horního okraje prvkům následujícím po 2. prvku na mobilních obrazovkách */ @media screen and (max-width: 768px) { .benefitBanner__item:nth-of-type(2), .benefitBanner__item:nth-of-type(4) { padding-top: 20px; } } @media (min-width: 768px) { .benefitBanner__item { padding-top: 20px; } .benefitBanner .benefitBanner__item, .benefitBanner .benefitBanner__link { justify-content: start; } } .benefitBanner__item:hover .benefitBanner__title { text-decoration: none; } .benefitBanner__item:hover .benefitBanner__link .benefitBanner__title { text-decoration: underline; } .benefitBanner__item .benefitBanner .benefitBanner__item, .benefitBanner .benefitBanner__link { width: 80%!important; } /* ================================================================== kosik_upravy.css (pravidla pro Ellity s předřazeným "html " – viz komentář v build.py) ================================================================== */ /*zobrazení 1. produktu v košíku*/ @media (min-width: 768px) { table.cart-table .removeable { display: revert !important; } } @media (max-width: 767px) { table.cart-table .removeable { display: flex !important; } } /*oprava stránkování v souvisejících produktech a košíku*/ .pagination-wrapper { justify-content: stretch; } .pagination-wrapper .pagination { text-align: center; } .desktop.one-column-body.columns-1 .product-slider-holder, .mobile.multiple-columns-body.columns-1 .product-slider-holder { width: 100% !important; } .advanced-order .products-wrapper.product-slider-holder .products.product-slider.products-additional.products-related .products-block .product { /* původní 'width: 351 px !important' byla neplatná hodnota (mezera) a nikdy se uplatnila – vypuštěno */ } /*bonusový program ellity změna barvy v košíku*/ /*nakupní košík*/ html .template-14 .card.blue { background-color: white; color: black; } /*u produktu*/ html .card-text { color:#000000; } /*pozadí v banneru košíku*/ html .template-14 .mehub-bonus-advanced-cart-container .card { background-color: white; } /* oprava barev ikon v košíku a testu hodnocení obchodu+ */ .cart-inner .contact-box [class*=" icon-"], .cart-inner .contact-box [class^=icon-], .extras-wrapper [class*=" icon-"], .extras-wrapper [class^=icon-], .rate-average { color: inherit; } /* ================================================================== vizitka_upravy.css (beze změny; selektor "card-wrapper .card-email img" bez tečky nikdy neplatil – ponecháno, aby se nezměnil vzhled) ================================================================== */ body.card-style-1 .card-wrapper .detail .card-photo { max-width: unset!important; max-height: unset !important; } body.card-style-1 .card-wrapper .detail .card-photo img { max-width: 150px!important; max-height: 150px !important; } card-wrapper .card-email img, .card-wrapper .card-phone img { background: #F6F6F6 !important; } @media (max-width: 768px) { body.card-style-1 .card-wrapper .detail .card-photo { max-width: unset !important; max-height: unset !important; } body.card-style-1 .card-wrapper .detail .card-photo img { max-width: 150px !important; max-height: 150px !important; } } /* ================================================================== product-theikos-desc_V14.css (.theikos-desc → .type-product = třída, kterou dává Shoptet na ze serveru) ================================================================== */ .type-product .rate-count { visibility: visible !important; } @media (min-width: 992px) { .type-product .shp-tabs-holder ul.shp-tabs { margin-left: 10px !important; } } @media (max-width: 991px) { .type-product .shp-tabs-holder ul.shp-tabs { margin-left: 0px; margin: auto !important; } .type-product .p-detail-full-width #tab-content { padding-left: 0px !important; padding-right: 0px !important; } } .type-product .p-detail-tabs .shp-tab-link{ border-radius: 8px !important; border-style: solid; border-width: 1px; display: block; border-color: #bbbbbb; padding: 14px 32px 14px 32px !important; } @media (max-width: 767px) { .type-product .p-detail-tabs .shp-tab-link{ padding: 12px 22px 12px 22px !important; } .type-product .shp-tabs-holder { padding: 18px 0px 18px 0px; } } .type-product .p-detail-full-width { background: white ! important; } .p-detail-full-width #tab-content { background: #fff; box-shadow: none !important; } .type-product .shp-tabs-holder ul.shp-tabs li.shp-tab.active a { box-shadow: none; } .type-product .shp-tabs-row .shp-tabs-holder ul.shp-tabs li.shp-tab { margin-right: 7px; margin-left: 7px; } .type-product .shp-tabs-row { margin-bottom: 24px !important; } .type-product .shp-tabs-holder { border-color: none; padding: 14px 0px 14px 0px; border-radius: 8px; max-width: 1200px; margin: auto; } @media (max-width: 1439px) { .type-product .shp-tabs-holder { max-width: 1200px; } } @media (max-width: 1280px) { .type-product .shp-tabs-holder { max-width: 1136px; } } @media (max-width: 1200px) { .type-product .shp-tabs-holder { max-width: 1049px; } } @media (max-width: 1100px) { .type-product .shp-tabs-holder { max-width: 949px; } } @media (min-width: 1024px) and (max-width: 1099px) { .type-product .shp-tabs-holder { max-width: 873px; } } @media (min-width:992px) and (max-width:1199px){ .type-product .container-full-width { max-width: 1280px; } } @media (min-width:1200px) and (max-width:1439px){ .type-product .container-full-width { max-width: 1280px; } } .basic-description > h4:first-of-type{ display: none !important; } .type-product .shp-tabs-wrapper.p-detail-tabs-wrapper > .row{ margin: 0 auto !important; max-width: 1312px !important; } .type-product .p-detail-full-width .basic-description{ padding-right: 0px !important; } .type-product .p-detail-full-width .extended-description > h4{ margin-top: 60px !important; } .type-product.one-column-body .description-inner .extended-description { width: 100% !important; } .type-product.one-column-body .description-inner .basic-description { width: 100% !important; } .type-product .p-detail-inner .p-to-cart-block .add-to-cart { justify-content: start !important; padding-bottom: 24px !important; } .type-product .p-detail-inner .p-to-cart-block { margin-bottom: 0px !important; } .type-product .mehub-bonus-product-detail-container .card-text { padding-left: 0px !important; } .type-product .buttons-wrapper.social-buttons-wrapper { display: none !important; } @media (min-width: 768px) { .type-product form#product-detail-form { background-color: #E9F6E8 !important; padding-top: 2px !important; padding-right: 36px !important; padding-bottom: 6px !important; padding-left: 36px !important; border-radius: 8px !important; margin-bottom: 36px !important; } .type-product .mehub-bonus-product-detail-container .card.elevation-0 { background-color: #E9F6E8 !important; } .type-product .p-detail-inner .p-to-cart-block .add-to-cart-button { height: 48px !important; font-size: 17px !important; max-width: -webkit-fit-content; padding: 28px; } .type-product .quantity input { font-size: 17px !important; height: 58px !important; } .type-product .quantity .decrease, .type-product .quantity .increase { height: 58px !important; } .type-product .p-detail-inner .p-to-cart-block .quantity { height: 58px !important; overflow: hidden; background-color: white !important; } } @media (max-width: 767px) { .type-product form#product-detail-form { background-color: white !important; padding-top: 2px !important; padding-right: 0px !important; padding-bottom: 6px !important; padding-left: 0px !important; border-radius: 0px !important; margin-bottom: 36px !important; } .type-product .p-detail-inner .p-to-cart-block .add-to-cart-button { height: 50px !important; font-size: 16px !important; max-width: 100%; padding: 20px; } .type-product .quantity input { font-size: 16px !important; height: 50px !important; } .type-product .quantity .decrease, .type-product .quantity .increase { height: 50px !important; } .type-product .p-detail-inner .p-to-cart-block .quantity { height: 50px !important; overflow: hidden; background-color: white !important; } .type-product .mehub-bonus-product-detail-container .card.elevation-0 { background-color: white !important; } } .type-product .detail-parameter.detail-parameter-product-code { display: none !important; } .p-price-wrapper .price-final { padding-top: 0px !important; } /* ========================================================= THEIKOS – sjednocené layouty (scoped jen do .theikos-dlouhy-popis) ========================================================= */ .theikos-dlouhy-popis{ --td-radius: 8px; --td-gap: 60px; --td-text-bg: #E9F6E8; --td-pad: 60px; --td-pad-touch-h: 60px; --td-pad-touch-v: 30px; width: 100%; } /* Mobil */ @media (max-width: 767px) { .theikos-dlouhy-popis { --td-gap: 60px; --td-pad: 40px; --td-pad-touch-h: 40px; --td-pad-touch-v: 30px; width: 100%; } } /* Menší mobily */ @media (max-width: 575px) { .theikos-dlouhy-popis { --td-gap: 32px; --td-pad: 32px; --td-pad-touch-h: 22px; --td-pad-touch-v: 18px; } .theikos-dlouhy-popis .td-text h2 { margin-bottom: 16px; } .theikos-dlouhy-popis .td-text p { margin-bottom: 14px; } } /* Tablet */ @media (min-width:768px) and (max-width:1199px){ .theikos-dlouhy-popis{ --td-gap: 60px; --td-pad: 40px; --td-pad-touch-h: 40px; --td-pad-touch-v: 30px; width: 100%; } /* 2col: drž stejné výšky sloupců */ .theikos-dlouhy-popis .td-grid.is-2col{ align-items: stretch; } /* MEDIA sloupec vyplní výšku */ .theikos-dlouhy-popis .td-grid.is-2col .td-media{ height: 100%; } } /* aby sloupce měly stejnou výšku 600px a pravý sloupec se "natáhl" */ @media (min-width:1024px){ .theikos-dlouhy-popis .td-grid.is-2col.is-text-first .td-text { height: 600px; } } /* obrázek vyplní celý sloupec = žádné zelené okolo */ .theikos-dlouhy-popis .td-grid.is-2col .td-media{ height: 100%; } /* mezery mezi sekcemi */ .theikos-dlouhy-popis .td-block{ margin: 0 0 var(--td-gap) 0; } .theikos-dlouhy-popis .td-block:last-child{ margin-bottom: 0; } /* RADIUS + OVERFLOW je na wrapperu bloku */ .theikos-dlouhy-popis .td-block{ border-radius: var(--td-radius); overflow: hidden; background-color: var(--td-text-bg); } /* ========================= OBRÁZKY – základ ========================= */ /* IMG vyplní celý sloupec a ořízne se */ .theikos-dlouhy-popis .td-grid.is-2col .td-media .td-img{ width: 100%; height: 100%; max-height: 600px; object-fit: cover; object-position: top; display: block; } @media (max-width: 991px){ /* Společný min-height pro VŠECHNY obrázky */ .theikos-dlouhy-popis .td-img { min-height: 300px; max-height: 500px; object-fit: cover; object-position: right; } } /* zelené textové plochy (bez radius, ať se nezaoblí vnitřní rohy) */ .theikos-dlouhy-popis .td-bg{ background: var(--td-text-bg); border-radius: 0; } .theikos-dlouhy-popis .td-block{ background-color: var(--td-text-bg); } .theikos-dlouhy-popis .td-text.td-bg{ display: flex !important; flex-direction: column !important; justify-content: center !important; align-content: center !important; } /* text */ .theikos-dlouhy-popis .td-text{ padding: var(--td-pad); } .theikos-dlouhy-popis .td-text h2{ margin: 0 0 24px 0; } .theikos-dlouhy-popis .td-text p{ margin: 0 0 22px 0; } .theikos-dlouhy-popis .td-text p:last-child{ margin-bottom: 0; } .theikos-dlouhy-popis .td-text-center{ text-align: center; max-width: 900px; margin: auto; } /* ========================= Sjednocený GRID základ ========================= */ .theikos-dlouhy-popis .td-grid{ display: grid; align-items: stretch; background-color: var(--td-text-bg); } .theikos-dlouhy-popis .td-grid.is-2col{ grid-template-columns: 1fr 1fr; background-color: var(--td-text-bg); } .theikos-dlouhy-popis .td-grid.is-1col{ grid-template-columns: 1fr; background-color: var(--td-text-bg); } /* pořadí */ .theikos-dlouhy-popis .td-grid.is-media-first .td-media{ order: 1; } .theikos-dlouhy-popis .td-grid.is-media-first .td-text{ order: 2; } .theikos-dlouhy-popis .td-grid.is-text-first .td-text{ order: 1; } .theikos-dlouhy-popis .td-grid.is-text-first .td-media{ order: 2; } .theikos-dlouhy-popis .td-media{ min-height: auto; } /* touch padding */ .theikos-dlouhy-popis .td-grid.is-2col.is-text-first .td-text{ padding-right: var(--td-pad-touch-h); } .theikos-dlouhy-popis .td-grid.is-2col.is-media-first .td-text{ padding-left: var(--td-pad-touch-h); } .theikos-dlouhy-popis .td-grid.is-1col.is-text-first .td-text{ padding-bottom: var(--td-pad-touch-v); } .theikos-dlouhy-popis .td-grid.is-1col.is-media-first .td-text{ padding-top: var(--td-pad-touch-v); } /* ========================= HERO – žádný overlay přes fotku ========================= */ .theikos-dlouhy-popis .td-hero-overlay.td-bg{ padding: var(--td-pad); padding-top: var(--td-pad-touch-v); background: var(--td-text-bg); } /* ========================= Mobil – 2col spadne do 1col ========================= */ @media (max-width: 991px){ .theikos-dlouhy-popis .td-grid.is-2col{ grid-template-columns: 1fr; } /* Vždy text první, obrázek druhý u 2col bloků */ .theikos-dlouhy-popis .td-grid.is-2col .td-text{ order: 1 !important; } .theikos-dlouhy-popis .td-grid.is-2col .td-media{ order: 2 !important; } .theikos-dlouhy-popis .td-grid.is-2col.is-text-first .td-text, .theikos-dlouhy-popis .td-grid.is-2col.is-media-first .td-text{ padding-left: var(--td-pad); padding-right: var(--td-pad); } /* Text zarovnat vlevo */ .theikos-dlouhy-popis .td-text-center{ text-align: left !important; } } /* ========================================================= THEIKOS – SENZORICKÝ PROFIL (blok v dlouhém popisu) Použití: .td-block.td-block-sensory uvnitř .theikos-dlouhy-popis ========================================================= */ .theikos-dlouhy-popis .td-block-sensory{ padding: var(--td-pad); } .theikos-dlouhy-popis .td-sensory-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .theikos-dlouhy-popis .td-sensory-text h2{ margin: 0 0 18px; } .theikos-dlouhy-popis .td-sensory-text p{ margin: 0 0 14px; line-height: 1.6; } .theikos-dlouhy-popis .td-sensory-text p:last-child{ margin-bottom: 0; } .theikos-dlouhy-popis .td-sensory-text strong{ color: #036400; font-weight: 700; } /* GRID 2×2 KAREM */ .theikos-dlouhy-popis .td-sensory-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .theikos-dlouhy-popis .td-sensory-card{ padding: 18px 20px 20px; background: #ffffff; border-radius: 4px; display: flex; flex-direction: column; } .theikos-dlouhy-popis .td-sensory-label{ font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #036400; font-weight: 700; margin-bottom: 12px; } .theikos-dlouhy-popis .td-sensory-readout{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .theikos-dlouhy-popis .td-sensory-value{ font-size: 32px; font-weight: 700; line-height: 1; color: #1a1a1a; } .theikos-dlouhy-popis .td-sensory-descriptor{ font-size: 13px; color: #036400; font-weight: 600; line-height: 1.3; } /* POSITION-MARKER ŠKÁLA */ .theikos-dlouhy-popis .td-sensory-scale{ margin-top: auto; } .theikos-dlouhy-popis .td-sensory-track{ height: 4px; background: linear-gradient(to right, rgba(3, 100, 0, 0.18), rgba(3, 100, 0, 0.32), rgba(3, 100, 0, 0.50)); border-radius: 2px; position: relative; margin: 0 6px; } .theikos-dlouhy-popis .td-sensory-marker{ position: absolute; top: 50%; width: 12px; height: 12px; background: #036400; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } .theikos-dlouhy-popis .td-sensory-scale-labels{ display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; letter-spacing: 0.04em; color: #666; padding: 0 2px; } /* SPECIÁLNÍ KARTA – VADY */ .theikos-dlouhy-popis .td-sensory-card--zero .td-sensory-descriptor{ color: #036400; font-weight: 700; } .theikos-dlouhy-popis .td-sensory-card--zero .td-sensory-note{ font-size: 12px; line-height: 1.5; color: #555; margin: 0; font-style: italic; } .theikos-dlouhy-popis .td-sensory-source{ font-size: 11px; letter-spacing: 0.04em; color: #555; margin: 22px 0 0; text-align: right; font-style: italic; } /* Tablet – zmenšit gap mezi textem a kartami */ @media (max-width: 1199px){ .theikos-dlouhy-popis .td-sensory-grid{ gap: 30px; } } /* Mobil – text nad karty, karty zůstávají 2×2 */ @media (max-width: 991px){ .theikos-dlouhy-popis .td-sensory-grid{ grid-template-columns: 1fr; gap: 24px; } } /* Menší mobily – karty 1×4 + menší hodnoty */ @media (max-width: 575px){ .theikos-dlouhy-popis .td-block-sensory{ padding: var(--td-pad); } .theikos-dlouhy-popis .td-sensory-cards{ grid-template-columns: 1fr; gap: 10px; } .theikos-dlouhy-popis .td-sensory-value{ font-size: 28px; } } /* ========================================================= THEIKOS – FAQ blok v dlouhém popisu (produktová stránka) Použití: .td-block.td-block-faq uvnitř .theikos-dlouhy-popis ========================================================= */ .theikos-dlouhy-popis .td-block-faq{ padding: var(--td-pad); } .theikos-dlouhy-popis .td-faq-title{ margin: 0 auto 28px; max-width: 900px; text-align: center; } .theikos-dlouhy-popis .question-container{ background: #FFFFFF; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0; margin: 0 auto 10px; max-width: 900px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } .theikos-dlouhy-popis .question-container:hover{ border-color: #036400; box-shadow: 0 3px 14px rgba(3, 100, 0, 0.1); } .theikos-dlouhy-popis .question-container:last-child{ margin-bottom: 0; } .theikos-dlouhy-popis .question{ font-family: 'Exo 2', sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; margin-bottom: 0; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s ease; user-select: none; } .theikos-dlouhy-popis .question:hover{ color: #ffd700; background: #fafff9; } .theikos-dlouhy-popis .question:hover .roll-icon{ color: #ffd700; } .theikos-dlouhy-popis .roll-icon{ font-size: 20px; padding-left: 12px; color: #999; transition: all 0.3s ease; flex-shrink: 0; } .theikos-dlouhy-popis .answer{ display: none; padding: 0 24px 20px 24px; margin-left: 0; border-top: 1px solid #f0f0f0; padding-top: 16px; } .theikos-dlouhy-popis .answer p{ margin: 0; line-height: 1.6; } .theikos-dlouhy-popis .answer a{ color: #036400; font-weight: 500; } .theikos-dlouhy-popis .answer a:hover{ color: #ffd700; } /* Mobil */ @media (max-width: 575px){ .theikos-dlouhy-popis .question{ padding: 14px 18px; font-size: 15px; } .theikos-dlouhy-popis .answer{ padding: 0 18px 16px 18px; padding-top: 12px; } } /* ================================================================== kalkulacka-spotreby-v5.css ================================================================== */ /* ============================================ KALKULAČKA SPOTŘEBY – Theikos Soubor: kalkulacka-spotreby.css FINÁLNÍ VERZE ============================================ */ /* ------------------------------------------ WRAPPER ------------------------------------------ */ .calc-wrapper { padding: 0; font-family: "Exo 2", sans-serif; box-sizing: border-box; } .calc-wrapper h2 { margin-top: 0; } /* ------------------------------------------ FOTKA – skrytá na tabletu a mobilu ------------------------------------------ */ .calc-media { overflow: hidden; } .calc-media .td-img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1023px) { .calc-media { display: none !important; } } /* ------------------------------------------ INPUT ŘÁDKY ------------------------------------------ */ .calc-inputs { margin-bottom: 8px; } .calc-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .calc-row-label { font-size: 14px; font-weight: 600; color: #333; } /* ------------------------------------------ STEPPER ------------------------------------------ */ .calc-stepper { display: inline-flex; align-items: center; background: #fff; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; } .calc-step-btn { width: 34px; height: 34px; border: none; background: #fff; font-size: 18px; color: #333; cursor: pointer; transition: background 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center; } .calc-step-btn:hover { background: #919191; color: #fff; } .calc-step-value { width: 30px; text-align: center; font-size: 16px; font-weight: 700; color: #333; border-left: 1px solid #ddd; border-right: 1px solid #ddd; line-height: 34px; } /* ------------------------------------------ CHIPS (helper jako tagy) ------------------------------------------ */ .calc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 10px; } .calc-chips-label { font-size: 12px; font-weight: 600; color: #555; margin-right: 2px; } .calc-chip { display: inline-block; background: #E9F6E8; padding: 3px 10px; border-radius: 12px; font-size: 12px; color: #555; font-weight: 500; white-space: nowrap; border: 1px solid rgba(3, 100, 0, 0.15); } .calc-chip a { color: #036400; text-decoration: none; font-weight: 600; } .calc-chip a:hover { color: #ffd700; text-decoration: underline; } /* ------------------------------------------ VÝSLEDEK – karta s bílým pozadím a stínem Fixní min-height aby nedocházelo k layout shiftu ------------------------------------------ */ .calc-result { min-height: 230px; background: #fff; border-radius: 10px; padding: 14px 16px; margin-top: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); align-content: center; } /* ------------------------------------------ HLAVNÍ ŘÁDEK – dny + cena vedle sebe ------------------------------------------ */ .calc-main-row { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 6px; } .calc-main-divider { width: 1px; height: 40px; background: #ddd; margin: 0 20px; } .calc-days-display { text-align: center; } .calc-days-number { display: block; font-size: 36px; font-weight: 800; color: #036400; line-height: 1; transition: transform 0.2s ease, opacity 0.2s ease; } .calc-days-label { display: block; font-size: 12px; color: #555; margin-top: 2px; } .calc-price-display { text-align: center; } .calc-price-value { display: block; font-size: 36px; font-weight: 800; color: #036400; line-height: 1; transition: transform 0.2s ease, opacity 0.2s ease; } .calc-price-label { display: block; font-size: 12px; color: #555; margin-top: 2px; } /* ------------------------------------------ SROVNÁNÍ ------------------------------------------ */ .calc-comparison { text-align: center; font-size: 13px; color: #036400; font-weight: 500; margin-bottom: 6px; min-height: 18px; } /* ------------------------------------------ TIP – fixní výška, bez sloupců ------------------------------------------ */ .calc-tip { padding: 5px 10px; background: #fafafa; border-left: 3px solid #FFD700; border-radius: 0 6px 6px 0; font-size: 12px; color: #333; line-height: 1.4; margin-bottom: 8px; min-height: 22px; display: block; } /* ------------------------------------------ CTA TLAČÍTKA – vždy na jednom řádku ------------------------------------------ */ .calc-cta { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; min-height: 38px; } .calc-cta-placeholder { display: block; min-height: 38px; } .calc-cta-primary { flex: 1 1 auto; padding: 9px 10px; background: #036400; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } .calc-cta-primary:hover { background: #ffd700; color: #333; text-decoration: none; } .calc-cta-secondary { flex: 0 1 auto; padding: 9px 10px; background: #fff; color: #555; border: 1px solid #ddd; border-radius: 8px; font-size: 12px; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } .calc-cta-secondary:hover { background: #F9F9F9; color: #333; border-color: #ccc; text-decoration: none; } /* ------------------------------------------ MOBILNÍ ZOBRAZENÍ ------------------------------------------ */ @media (max-width: 767px) { .calc-row { flex-direction: column; align-items: flex-start; gap: 4px; } .calc-row-label { font-size: 13px; } .calc-stepper { align-self: flex-start; } .calc-step-btn { width: 38px; height: 38px; font-size: 19px; } .calc-step-value { width: 34px; font-size: 17px; line-height: 38px; } .calc-main-row { flex-direction: row; gap: 0; } .calc-main-divider { width: 1px; height: 36px; margin: 0 14px; } .calc-days-number, .calc-price-value { font-size: 28px; } .calc-days-label, .calc-price-label { font-size: 11px; } .calc-result { align-content: center; min-height: 290px; padding: 12px 14px; } .calc-cta { flex-wrap: wrap; } .calc-cta-primary, .calc-cta-secondary { min-width: 100%; white-space: normal; } .calc-chips { gap: 4px; } .calc-chips-label { font-size: 11px; } .calc-chip { font-size: 11px; } .calc-comparison { margin-top: 4px; margin-bottom: 8px; font-size: 12px; } .calc-tip { min-height: auto; } } /* Ultra malé obrazovky – dny a cena pod sebe */ @media (max-width: 340px) { .calc-main-row { flex-direction: column; gap: 6px; } .calc-main-divider { width: 50px; height: 1px; margin: 0; } } /* ------------------------------------------ TABLET (768–1023px) – layout jako PC ------------------------------------------ */ @media (min-width: 768px) and (max-width: 1023px) { .calc-row { flex-direction: row; align-items: center; justify-content: space-between; } } /* ================================================================== clanek_styl_V8.css (dřív načítán přes @import z clanek_styl_recepty_V1.css a skriptem uvnitř článků) ================================================================== */ /* ============================================ THEIKOS BLOG – ČLÁNEK STYL V6 Barvy: #036400, #ffd700, #FFFFFF, #E9F6E8, #F9F9F9, #161616 Fonty: Exo 2 (nadpisy), system sans-serif (text) ============================================ */ /* @import Exo 2 z Google Fonts přesunut do theikos.js (načte se po DOMContentLoaded na článcích a produktech, jako dřív) */ /* ============================================ 1. ZÁKLADNÍ TYPOGRAFIE & LAYOUT ============================================ */ .clanek-styl { color: #161616; line-height: 1.6; max-width: 820px; margin: 0 auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .clanek-styl .dmproducts { line-height: 1.5; } .products-block>div .p .p-in .p-bottom>div .p-desc { display: none; } .clanek-styl p { margin-bottom: 1.5em; letter-spacing: 0.01em; } .clanek-styl strong, .clanek-styl b { font-weight: 700; } .clanek-styl a { color: #036400; text-decoration: none; transition: color 0.2s ease; } .clanek-styl a:hover { color: #ffd700; } /* ============================================ 2. NADPISY ============================================ */ .clanek-styl h1 { font-family: 'Exo 2', sans-serif; font-size: 2.4em; font-weight: 700; color: #161616; line-height: 1.25; margin-bottom: 24px !important; margin-top: 48px; letter-spacing: -0.01em; } .clanek-styl h2 { font-family: 'Exo 2', sans-serif; font-size: 1.85em; font-weight: 700; color: #161616; line-height: 1.3; margin-bottom: 20px !important; margin-top: 56px; padding-bottom: 12px; border-bottom: 3px solid #E9F6E8; letter-spacing: -0.01em; } .clanek-styl h3 { font-family: 'Exo 2', sans-serif; font-size: 1.4em; font-weight: 700; color: #161616; line-height: 1.4; margin-bottom: 16px !important; margin-top: 40px; } .clanek-styl h4 { font-family: 'Exo 2', sans-serif; font-size: 1.15em; font-weight: 600; color: #2d2d2d; line-height: 1.4; margin-bottom: 12px !important; margin-top: 32px; } /* ============================================ 3. OBSAH ČLÁNKU – TABLE OF CONTENTS ============================================ */ .clanek-styl .obsah-clanku { background: linear-gradient(135deg, #f2faf1 0%, #E9F6E8 50%, #f0f8ee 100%); border: 1px solid #c8e6c5; border-radius: 8px; padding: 32px 40px; margin-top: 40px; margin-bottom: 40px; box-shadow: 0 2px 12px rgba(3, 100, 0, 0.06); transition: box-shadow 0.3s ease; } .clanek-styl .obsah-clanku:hover { box-shadow: 0 4px 20px rgba(3, 100, 0, 0.12); } .clanek-styl .obsah-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .clanek-styl .obsah-title { font-family: 'Exo 2', sans-serif; font-size: 20px; font-weight: 700; margin: 0; color: #036400; letter-spacing: 0.02em; text-transform: uppercase; } .clanek-styl #skryt-otevri { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; transition: background 0.2s ease; } .clanek-styl #skryt-otevri:hover { background: rgba(3, 100, 0, 0.1); } .clanek-styl .skryty { display: none; } .clanek-styl .arrow-unsorted-368013 { fill: #036400; color: #036400; } .clanek-styl #obsah-seznam { color: #2d2d2d; margin-top: 8px; } .clanek-styl #obsah-seznam a { color: #161616; font-weight: 500; text-decoration: none; transition: color 0.2s ease; } .clanek-styl #obsah-seznam a:hover { color: #036400; } .clanek-styl #obsah-seznam ul, .clanek-styl #obsah-seznam ol { margin-top: 6px; margin-bottom: 6px; } .clanek-styl #obsah-seznam li { margin-bottom: 6px; } /* ============================================ 4. FAQ SEKCE ============================================ */ .clanek-styl .question-container { background: #FFFFFF; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0; margin-bottom: 12px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } .clanek-styl .question-container:hover { border-color: #036400; box-shadow: 0 3px 14px rgba(3, 100, 0, 0.1); } .clanek-styl .question { font-family: 'Exo 2', sans-serif; font-size: 16px; font-weight: 600; color: #161616; cursor: pointer; margin-bottom: 0; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s ease; user-select: none; } .clanek-styl .question:hover { color: #ffd700; background: #fafff9; } .clanek-styl .question:hover .roll-icon { color: #ffd700; } .clanek-styl .roll-icon { font-size: 20px; padding-left: 12px; color: #999; transition: all 0.3s ease; flex-shrink: 0; } .clanek-styl .answer { display: none; padding: 0 24px 20px 24px; margin-left: 0; color: #2d2d2d; border-top: 1px solid #f0f0f0; padding-top: 16px; } /* ============================================ 5. OBRÁZKY & MÉDIA ============================================ */ .clanek-styl .responsive-video, .clanek-styl .responsive-image { width: 70%; height: auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .clanek-styl .responsive-image:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); } .clanek-styl .text-na-stred { text-align: center; font-size: 10pt; color: #777; font-style: italic; margin-top: 8px; } article img { border-radius: 8px; } article .next-prev.text-center { text-align: center; } /* ============================================ 6. SEZNAMY (UL, OL) ============================================ */ .clanek-styl ul, .clanek-styl ol { margin-bottom: 1.5em; padding-left: 28px; } .clanek-styl li { margin-bottom: 8px; } .clanek-styl li::marker { color: #036400; font-weight: 700; } /* ============================================ 7. BLOCKQUOTE ============================================ */ .clanek-styl blockquote { margin: 32px 0; padding: 24px 32px; border: 1px solid #c8e6c5; background: #f5fbf5; border-radius: 8px; font-style: italic; color: #2d2d2d; font-size: 1.05em; position: relative; } .clanek-styl blockquote::before { content: '\201E'; font-family: 'Exo 2', Georgia, serif; font-size: 4em; color: #d4ecd3; position: absolute; top: -10px; left: 16px; line-height: 1; } .clanek-styl blockquote p { margin-bottom: 0; } /* ============================================ 8. HORIZONTÁLNÍ ČÁRA ============================================ */ .clanek-styl hr { border: none; height: 2px; background: linear-gradient(to right, transparent, #E9F6E8, #036400, #E9F6E8, transparent); margin: 48px 0; } /* ============================================ 9. INFO BOX ============================================ */ .clanek-styl .info-box { display: flex; align-items: flex-start; gap: 16px; background: linear-gradient(135deg, #e8f4fd 0%, #f0f7ff 100%); border: 1px solid #b8d8f5; border-radius: 8px; padding: 24px 28px; margin: 32px 0; box-shadow: 0 2px 8px rgba(25, 118, 210, 0.06); } .clanek-styl .info-box-icon { font-size: 28px; flex-shrink: 0; line-height: 1.3; } .clanek-styl .info-box-content { flex: 1; } .clanek-styl .info-box-content strong { display: block; font-family: 'Exo 2', sans-serif; font-size: 1.05em; color: #1565c0; margin-bottom: 6px; } .clanek-styl .info-box-content p { margin-bottom: 0; color: #37474f; font-size: 0.95em; } .clanek-styl .info-box.warning { background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%); border: 1px solid #ffe082; box-shadow: 0 2px 8px rgba(255, 160, 0, 0.06); } .clanek-styl .info-box.warning .info-box-content strong { color: #e65100; } .clanek-styl .info-box.success { background: linear-gradient(135deg, #E9F6E8 0%, #f0f8ee 100%); border: 1px solid #c8e6c5; box-shadow: 0 2px 8px rgba(3, 100, 0, 0.06); } .clanek-styl .info-box.success .info-box-content strong { color: #036400; } .clanek-styl .info-box.danger { background: linear-gradient(135deg, #ffebee 0%, #fff5f5 100%); border: 1px solid #ffcdd2; box-shadow: 0 2px 8px rgba(229, 57, 53, 0.06); } .clanek-styl .info-box.danger .info-box-content strong { color: #c62828; } /* ============================================ 10. HIGHLIGHT BOX ============================================ */ .clanek-styl .highlight-box { background: linear-gradient(135deg, #f6fbf6 0%, #E9F6E8 100%); border: 1px solid #c8e6c5; border-radius: 8px; padding: 28px 32px; margin: 36px 0; position: relative; overflow: hidden; } .clanek-styl .highlight-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #036400, #4caf50, #E9F6E8, #4caf50, #036400); } .clanek-styl .highlight-box p:last-child { margin-bottom: 0; } .clanek-styl .highlight-box strong { color: #036400; } .clanek-styl .highlight-box.premium { background: linear-gradient(135deg, #fffdf5 0%, #fff9e6 100%); border-color: #ffe082; } .clanek-styl .highlight-box.premium::before { background: linear-gradient(90deg, #ffa000, #ffd700, #ffe082, #ffd700, #ffa000); } .clanek-styl .highlight-box.premium strong { color: #e65100; } /* ============================================ 11. PULL QUOTE ============================================ */ .clanek-styl .pull-quote { text-align: center; margin: 48px 24px; padding: 32px 48px; position: relative; background: transparent; } .clanek-styl .pull-quote::before, .clanek-styl .pull-quote::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(90deg, transparent, #036400, transparent); } .clanek-styl .pull-quote::before { top: 0; } .clanek-styl .pull-quote::after { bottom: 0; } .clanek-styl .pull-quote p { font-family: 'Exo 2', sans-serif; font-size: 1.45em; font-weight: 600; font-style: italic; color: #161616; line-height: 1.5; margin-bottom: 16px; } .clanek-styl .pull-quote cite { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-style: normal; font-size: 0.85em; color: #777; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; } /* ============================================ 12. STEP CARDS ============================================ */ .clanek-styl .steps-container { margin: 36px 0; display: flex; flex-direction: column; gap: 0; } .clanek-styl .step-card { display: flex; align-items: flex-start; gap: 20px; padding: 24px 0; border-bottom: 1px solid #E9F6E8; position: relative; } .clanek-styl .step-card:last-child { border-bottom: none; } .clanek-styl .step-number { width: 48px; height: 48px; min-width: 48px; background: linear-gradient(135deg, #036400, #0a8a00); color: #FFFFFF; font-family: 'Exo 2', sans-serif; font-size: 1.2em; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(3, 100, 0, 0.25); position: relative; z-index: 2; } .clanek-styl .step-card:not(:last-child)::after { content: ''; position: absolute; top: 48px; bottom: -24px; left: 23px; width: 2px; background: #d4ecd3; z-index: 1; } .clanek-styl .step-content { flex: 1; padding-top: 4px; } .clanek-styl .step-content h4 { font-size: 1.1em; font-weight: 700; margin-top: 0; margin-bottom: 8px !important; } .clanek-styl .step-content p { margin-bottom: 0; font-size: 0.95em; } /* ============================================ 13. TABULKY ============================================ */ .clanek-styl .article-table-wrapper { margin: 36px 0; overflow-x: auto; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); border: 1px solid #e0e0e0; } .clanek-styl .article-table { width: 100%; border-collapse: collapse; font-size: 0.95em; } .clanek-styl .article-table thead { background: linear-gradient(135deg, #036400, #0a8a00); } .clanek-styl .article-table thead th { color: #FFFFFF; font-family: 'Exo 2', sans-serif; font-weight: 600; padding: 14px 20px; text-align: left; font-size: 0.95em; letter-spacing: 0.02em; border-right: 1px solid rgba(255, 255, 255, 0.15); } .clanek-styl .article-table thead th:last-child { border-right: none; } .clanek-styl .article-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background 0.15s ease; } .clanek-styl .article-table tbody tr:hover { background: #f5fbf5; } .clanek-styl .article-table tbody tr:nth-child(even) { background: #F9F9F9; } .clanek-styl .article-table tbody tr:nth-child(even):hover { background: #eef7ee; } .clanek-styl .article-table tbody td { padding: 13px 20px; color: #2d2d2d; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; } .clanek-styl .article-table tbody td:last-child { border-right: none; } .clanek-styl .article-table tbody tr:last-child td { border-bottom: none; } .clanek-styl .article-table tbody td:first-child { font-weight: 600; color: #161616; } /* ============================================ 14. CTA BOX ============================================ */ .clanek-styl .cta-box { background: linear-gradient(135deg, #032d00 0%, #036400 50%, #0a7a00 100%); color: #FFFFFF; border-radius: 8px; padding: 40px 44px; margin: 48px 0; text-align: center; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(3, 100, 0, 0.2); } .clanek-styl .cta-box::before { content: ''; position: absolute; top: -60%; right: -20%; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.04); border-radius: 50%; } .clanek-styl .cta-box::after { content: ''; position: absolute; bottom: -40%; left: -10%; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.03); border-radius: 50%; } .clanek-styl .cta-box h3 { font-family: 'Exo 2', sans-serif; color: #FFFFFF; font-size: 1.6em; margin-top: 0; margin-bottom: 12px !important; position: relative; z-index: 1; } .clanek-styl .cta-box p { color: rgba(255, 255, 255, 0.9); font-size: 1.05em; margin-bottom: 28px; position: relative; z-index: 1; } .clanek-styl .cta-button { display: inline-block; background: #ffd700; color: #161616 !important; font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 1.05em; padding: 14px 36px; border-radius: 50px; text-decoration: none !important; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3); position: relative; z-index: 1; letter-spacing: 0.02em; } .clanek-styl .cta-button:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(255, 215, 0, 0.45); background: #ffe44d; color: #161616 !important; } /* ============================================ 15. PROS & CONS BOX ============================================ */ .clanek-styl .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 36px 0; } .clanek-styl .pros, .clanek-styl .cons { border-radius: 8px; padding: 24px 28px; } .clanek-styl .pros { background: linear-gradient(135deg, #E9F6E8, #f0f8ee); border: 1px solid #c8e6c5; } .clanek-styl .pros h4 { color: #036400; margin-top: 0; margin-bottom: 12px !important; font-size: 1.05em; } .clanek-styl .cons { background: linear-gradient(135deg, #fff3e0, #fff8e1); border: 1px solid #ffe0b2; } .clanek-styl .cons h4 { color: #e65100; margin-top: 0; margin-bottom: 12px !important; font-size: 1.05em; } .clanek-styl .pros ul, .clanek-styl .cons ul { list-style: none; padding-left: 0; margin-bottom: 0; } .clanek-styl .pros ul li, .clanek-styl .cons ul li { padding: 6px 0; padding-left: 8px; font-size: 0.95em; } /* ============================================ 16. BADGE / TAG ============================================ */ .clanek-styl .article-badge { display: inline-block; font-family: 'Exo 2', sans-serif; font-size: 0.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 50px; background: #e8f4fd; color: #1565c0; margin-right: 8px; margin-bottom: 8px; } .clanek-styl .article-badge.green { background: #E9F6E8; color: #036400; } .clanek-styl .article-badge.gold { background: #fff8e1; color: #e65100; } .clanek-styl .article-badge.red { background: #ffebee; color: #c62828; } /* ============================================ 17. AUTHOR BOX / BIO ============================================ */ .clanek-styl .author-box { display: flex; align-items: center; gap: 20px; background: #F9F9F9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 24px 28px; margin: 40px 0; } .clanek-styl .author-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #E9F6E8; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); flex-shrink: 0; } .clanek-styl .author-info { flex: 1; } .clanek-styl .author-label { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.1em; color: #999; font-weight: 600; display: block; margin-bottom: 2px; } .clanek-styl .author-name { font-family: 'Exo 2', sans-serif; font-size: 1.1em; color: #161616; display: block; margin-bottom: 6px; } .clanek-styl .author-info p { font-size: 0.9em; color: #777; margin-bottom: 0; } /* ============================================ 18. FEATURE LIST ============================================ */ .clanek-styl .feature-list { margin: 36px 0; } .clanek-styl .feature-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid #f0f0f0; } .clanek-styl .feature-item:last-child { border-bottom: none; } .clanek-styl .feature-icon { font-size: 2em; line-height: 1; flex-shrink: 0; } .clanek-styl .feature-text { flex: 1; } .clanek-styl .feature-text strong { display: block; font-size: 1.05em; margin-bottom: 4px; color: #161616; } .clanek-styl .feature-text p { margin-bottom: 0; font-size: 0.95em; color: #2d2d2d; } /* ============================================ 19. SECTION DIVIDER ============================================ */ .clanek-styl .section-divider { text-align: center; margin: 48px 0; position: relative; } .clanek-styl .section-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, #E9F6E8, transparent); } .clanek-styl .section-divider span { position: relative; background: #FFFFFF; padding: 0 20px; font-size: 1.5em; } /* ============================================ 20. KEY TAKEAWAY / SHRNUTÍ ============================================ */ .clanek-styl .key-takeaway { display: flex; align-items: flex-start; gap: 16px; background: linear-gradient(135deg, #F9F9F9 0%, #f5f5f5 100%); border: 1px solid #e0e0e0; border-radius: 8px; padding: 24px 28px; margin: 40px 0; } .clanek-styl .key-takeaway-icon { font-size: 28px; flex-shrink: 0; line-height: 1.3; } .clanek-styl .key-takeaway-content { flex: 1; } .clanek-styl .key-takeaway-content strong { display: block; font-family: 'Exo 2', sans-serif; font-size: 1.05em; color: #161616; margin-bottom: 12px; } .clanek-styl .key-takeaway-content ul { margin-bottom: 0; padding-left: 20px; } .clanek-styl .key-takeaway-content ul li { margin-bottom: 8px; color: #2d2d2d; } .clanek-styl .key-takeaway-content ul li:last-child { margin-bottom: 0; } /* ============================================ 21. STAT ROW ============================================ */ .clanek-styl .stat-row { display: flex; gap: 20px; margin: 36px 0; flex-wrap: wrap; } .clanek-styl .stat-item { flex: 1; min-width: 140px; text-align: center; background: #FFFFFF; border: 1px solid #e0e0e0; border-radius: 8px; padding: 24px 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .clanek-styl .stat-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } .clanek-styl .stat-value { display: block; font-family: 'Exo 2', sans-serif; font-size: 2em; font-weight: 700; color: #036400; line-height: 1.2; margin-bottom: 6px; } .clanek-styl .stat-label { display: block; font-size: 0.85em; color: #777; font-weight: 500; } /* ============================================ 22. ACCORDION ============================================ */ .clanek-styl .accordion-item { border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 10px; overflow: hidden; } .clanek-styl .accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; font-family: 'Exo 2', sans-serif; font-weight: 600; color: #161616; cursor: pointer; background: #F9F9F9; transition: background 0.2s ease; user-select: none; } .clanek-styl .accordion-header:hover { background: #eef7ee; } .clanek-styl .accordion-icon { font-size: 1.3em; color: #999; transition: transform 0.3s ease; } .clanek-styl .accordion-body { display: none; padding: 16px 22px 20px; color: #2d2d2d; border-top: 1px solid #f0f0f0; } /* ============================================ 23. IMAGE GALLERY GRID ============================================ */ .clanek-styl .image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 36px 0; } .clanek-styl .image-grid-item { margin: 0; } .clanek-styl .image-grid-item img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .clanek-styl .image-grid-item img:hover { transform: scale(1.02); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14); } .clanek-styl .image-grid-item figcaption { text-align: center; font-size: 0.85em; color: #777; font-style: italic; margin-top: 8px; } /* ============================================ 24. RELATED ARTICLES BOX ============================================ */ .clanek-styl .related-articles { background: #F9F9F9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 24px 28px; margin: 36px 0; } .clanek-styl .related-articles h4 { font-size: 1em; color: #161616; margin-top: 0; margin-bottom: 14px !important; } .clanek-styl .related-articles ul { list-style: none; padding-left: 0; margin-bottom: 0; } .clanek-styl .related-articles ul li { margin-bottom: 8px; padding-left: 0; } .clanek-styl .related-articles ul li::before { content: '→ '; color: #036400; font-weight: 700; } .clanek-styl .related-articles ul li a { color: #161616; font-weight: 500; text-decoration: none; } .clanek-styl .related-articles ul li a:hover { color: #ffd700; } /* ============================================ 25. ARTICLE META BAR ============================================ */ .clanek-styl .article-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.85em; color: #999; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0; } .clanek-styl .article-meta span { display: inline-flex; align-items: center; gap: 4px; } /* ============================================ 26. COMPARISON CARDS ============================================ */ .clanek-styl .comparison-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 36px 0; } .clanek-styl .comparison-card { border-radius: 8px; padding: 24px 24px; position: relative; } .clanek-styl .comparison-card.bad { background: #fff5f5; border: 1px solid #fed7d7; } .clanek-styl .comparison-card.good { background: #f0fff4; border: 1px solid #c6f6d5; } .clanek-styl .comparison-label { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 1em; margin-bottom: 12px; } .clanek-styl .comparison-card.bad .comparison-label { color: #c53030; } .clanek-styl .comparison-card.good .comparison-label { color: #036400; } .clanek-styl .comparison-card p:last-child { margin-bottom: 0; } /* ============================================ 27. SUBSCRIBE BOX ============================================ */ .clanek-styl .subscribe-box { background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%); border: 1px solid #bcdcf5; border-radius: 8px; padding: 32px 36px; margin: 40px 0; text-align: center; } .clanek-styl .subscribe-box h4 { font-family: 'Exo 2', sans-serif; margin-top: 0; color: #1565c0; font-size: 1.2em; } .clanek-styl .subscribe-box p { color: #546e7a; font-size: 0.95em; } .clanek-styl .subscribe-button { display: inline-block; background: #1976d2; color: #FFFFFF !important; font-family: 'Exo 2', sans-serif; font-weight: 600; padding: 12px 28px; border-radius: 50px; text-decoration: none !important; transition: all 0.3s ease; font-size: 0.95em; } .clanek-styl .subscribe-button:hover { background: #1565c0; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3); } /* ============================================ 28. TIMELINE ============================================ */ .clanek-styl .timeline { position: relative; margin: 40px 0; padding-left: 32px; } .clanek-styl .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, #036400, #d4ecd3); border-radius: 3px; } .clanek-styl .timeline-item { position: relative; margin-bottom: 28px; padding-left: 20px; } .clanek-styl .timeline-item::before { content: ''; position: absolute; left: -28px; top: 6px; width: 14px; height: 14px; background: #036400; border: 3px solid #FFFFFF; border-radius: 50%; box-shadow: 0 0 0 3px #d4ecd3; } .clanek-styl .timeline-date { font-family: 'Exo 2', sans-serif; font-size: 0.8em; font-weight: 700; color: #036400; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .clanek-styl .timeline-content h4 { margin-top: 0; margin-bottom: 6px !important; font-size: 1.05em; } .clanek-styl .timeline-content p { margin-bottom: 0; font-size: 0.95em; color: #2d2d2d; } /* ============================================ 29. CARD GRID ============================================ */ .clanek-styl .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 36px 0; } .clanek-styl .content-card { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #FFFFFF; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; } .clanek-styl .content-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .clanek-styl .content-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 0; } .clanek-styl .content-card-body { padding: 20px; } .clanek-styl .content-card-body h4 { margin-top: 0; margin-bottom: 8px !important; font-size: 1.05em; } .clanek-styl .content-card-body p { font-size: 0.9em; color: #777; margin-bottom: 12px; } .clanek-styl .content-card-body a { font-size: 0.9em; font-weight: 600; color: #036400; text-decoration: none; } .clanek-styl .content-card-body a:hover { color: #ffd700; } /* ============================================ 30. INLINE CODE & CODE BLOCK ============================================ */ .clanek-styl code { background: #f1f5f9; color: #e53e3e; padding: 2px 8px; border-radius: 5px; font-size: 0.9em; font-family: 'SF Mono', 'Fira Code', monospace; } .clanek-styl pre { background: #161616; color: #e2e8f0; padding: 24px; border-radius: 8px; overflow-x: auto; margin: 24px 0; font-size: 0.9em; } .clanek-styl pre code { background: none; color: inherit; padding: 0; } /* ============================================ 31. DROP CAP ============================================ */ .clanek-styl .drop-cap::first-letter { float: left; font-family: 'Exo 2', sans-serif; font-size: 3.8em; font-weight: 700; line-height: 0.8; margin-right: 10px; margin-top: -4px; color: #036400; } /* ============================================ RESPONSIVE – MOBILNÍ ZAŘÍZENÍ ============================================ */ @media screen and (max-width: 768px) { .clanek-styl h1 { font-size: 1.8em; } .clanek-styl h2 { font-size: 1.5em; margin-top: 40px; } .clanek-styl h3 { font-size: 1.25em; margin-top: 32px; } .clanek-styl h4 { margin-bottom: 12px !important; } .clanek-styl .responsive-video, .clanek-styl .responsive-image { width: 100%; height: auto; } .clanek-styl .obsah-clanku { padding: 20px !important; padding-top: 28px !important; } .clanek-styl ul, .clanek-styl ol { padding-left: 20px; } .clanek-styl .question { padding: 14px 16px; font-size: 15px; } .clanek-styl .answer { padding: 0 16px 16px 16px; padding-top: 12px; } .clanek-styl .info-box, .clanek-styl .key-takeaway { padding: 20px; flex-direction: column; gap: 10px; } .clanek-styl .highlight-box { padding: 22px 20px; } .clanek-styl .pull-quote { margin: 36px 8px; padding: 28px 16px; } .clanek-styl .pull-quote p { font-size: 1.2em; } .clanek-styl .step-card { gap: 14px; padding: 18px 0; } .clanek-styl .step-number { width: 40px; height: 40px; min-width: 40px; font-size: 1em; } .clanek-styl .article-table-wrapper { margin: 24px 0; border-radius: 8px; } .clanek-styl .article-table thead th, .clanek-styl .article-table tbody td { padding: 10px 14px; font-size: 0.88em; } .clanek-styl .cta-box { padding: 28px 24px; } .clanek-styl .cta-box h3 { font-size: 1.3em; } .clanek-styl .cta-button { padding: 12px 28px; font-size: 0.95em; } .clanek-styl .pros-cons, .clanek-styl .comparison-cards { grid-template-columns: 1fr; gap: 14px; } .clanek-styl .stat-row { gap: 12px; } .clanek-styl .stat-item { min-width: 100px; padding: 18px 12px; } .clanek-styl .stat-value { font-size: 1.6em; } .clanek-styl .author-box { flex-direction: column; text-align: center; padding: 24px 20px; } .clanek-styl .image-grid, .clanek-styl .card-grid { grid-template-columns: 1fr; } .clanek-styl .article-meta { gap: 10px; font-size: 0.82em; } .clanek-styl .subscribe-box { padding: 24px 20px; } .clanek-styl .drop-cap::first-letter { font-size: 3em; } .clanek-styl .step-card { gap: 14px; padding: 18px 0; } .clanek-styl .step-number { width: 40px; height: 40px; min-width: 40px; font-size: 1em; } .clanek-styl .step-card:not(:last-child)::after { top: 38px; bottom: -18px; left: 19px; } } /* ============================================ TABLET ============================================ */ @media screen and (min-width: 769px) and (max-width: 1024px) { .clanek-styl .card-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .clanek-styl .stat-row { gap: 14px; } } /* ============================================ PRINT STYLES ============================================ */ @media print { .clanek-styl { font-size: 12pt; color: #000; } .clanek-styl .cta-box, .clanek-styl .subscribe-box, .clanek-styl #skryt-otevri { display: none !important; } .clanek-styl .question-container, .clanek-styl .info-box, .clanek-styl .highlight-box { break-inside: avoid; } .clanek-styl a { color: #000; text-decoration: underline; } .clanek-styl a::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #666; } } /* ============================================ ACCESSIBILITY ============================================ */ .clanek-styl a:focus-visible, .clanek-styl .question:focus-visible, .clanek-styl .cta-button:focus-visible, .clanek-styl .subscribe-button:focus-visible, .clanek-styl #skryt-otevri:focus-visible { outline: 3px solid #036400; outline-offset: 3px; border-radius: 4px; } /* ============================================ SELECTION HIGHLIGHT ============================================ */ .clanek-styl ::selection { background: #E9F6E8; color: #161616; } .clanek-styl ::-moz-selection { background: #E9F6E8; color: #161616; } /* ============================================ SMOOTH SCROLL ============================================ */ .clanek-styl { scroll-behavior: smooth; } /* ================================================================== clanek_styl_recepty_V1.css ================================================================== */ /* ============================================ THEIKOS BLOG – ČLÁNEK STYL RECEPTY V1 (samostatný styl receptů) = V8 (základ) + recept-karta, checkboxy ingrediencí, tlačítka (tisk, režim vaření) a tiskové styly receptu. V8 se NEKOPÍRUJE, ale importuje absolutní URL → opravy v V8 se automaticky propíšou i do receptů. Načítej clanek_styl_recepty_V1.css jen u receptových článků; běžné články dál clanek_styl_V8.css. Barvy: #036400, #ffd700, #FFFFFF, #E9F6E8, #F9F9F9, #161616 Font: Exo 2 (nadpisy) ============================================ */ /* @import clanek_styl_V8.css nahrazen vložením V8 výše */ /* ============================================ 32. RECEPT – KOTVA „PŘEJÍT NA RECEPT" ============================================ */ .clanek-styl #recept { scroll-margin-top: 90px; } .clanek-styl .jump-recept { display: inline-flex; align-items: center; gap: 8px; background: #E9F6E8; color: #036400 !important; font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 0.95em; padding: 10px 22px; border-radius: 50px; text-decoration: none !important; border: 1px solid #c8e6c5; transition: all 0.2s ease; margin-bottom: 8px; } .clanek-styl .jump-recept:hover { background: #036400; color: #FFFFFF !important; transform: translateY(-1px); } /* ============================================ 33. RECEPT KARTA ============================================ */ .clanek-styl .recept-karta { background: #FFFFFF; border: 1px solid #c8e6c5; border-radius: 12px; margin: 40px 0; overflow: hidden; box-shadow: 0 4px 24px rgba(3, 100, 0, 0.10); } .clanek-styl .recept-karta-head { background: linear-gradient(135deg, #032d00 0%, #036400 55%, #0a7a00 100%); color: #FFFFFF; padding: 26px 30px 24px; position: relative; overflow: hidden; } .clanek-styl .recept-karta-head::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #ffa000, #ffd700, #ffe082, #ffd700, #ffa000); } .clanek-styl .recept-karta-head h3 { font-family: 'Exo 2', sans-serif; color: #FFFFFF; font-size: 1.5em; font-weight: 700; margin: 6px 0 8px !important; line-height: 1.25; } .clanek-styl .recept-karta-perex { color: rgba(255, 255, 255, 0.9); font-size: 0.95em; margin: 0; } .clanek-styl .recept-karta-stitek { display: inline-block; font-family: 'Exo 2', sans-serif; font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #ffd700; } .clanek-styl .recept-meta { display: flex; flex-wrap: wrap; background: #F9F9F9; border-bottom: 1px solid #E9F6E8; } .clanek-styl .recept-meta-item { flex: 1; min-width: 90px; text-align: center; padding: 16px 10px; border-right: 1px solid #eaeaea; } .clanek-styl .recept-meta-item:last-child { border-right: none; } .clanek-styl .recept-meta-ikona { display: block; font-size: 1.35em; line-height: 1; margin-bottom: 6px; } .clanek-styl .recept-meta-hodnota { display: block; font-family: 'Exo 2', sans-serif; font-weight: 700; color: #036400; font-size: 1.05em; line-height: 1.2; } .clanek-styl .recept-meta-popisek { display: block; font-size: 0.72em; color: #777; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; } .clanek-styl .recept-badges { padding: 18px 30px 0; } .clanek-styl .recept-telo { padding: 10px 30px 8px; } .clanek-styl .recept-telo h4 { font-family: 'Exo 2', sans-serif; font-size: 1.15em; color: #036400; margin-top: 24px !important; margin-bottom: 10px !important; padding-bottom: 8px; border-bottom: 2px solid #E9F6E8; } .clanek-styl .ingredience { list-style: none; padding-left: 0; margin: 0 0 8px; } .clanek-styl .ingredience li { margin: 0; padding: 0; border-bottom: 1px dashed #e8efe7; } .clanek-styl .ingredience li:last-child { border-bottom: none; } .clanek-styl .ingredience-hint { font-size: 0.85em; color: #777; font-style: italic; margin: 0 0 8px; } .clanek-styl .ingredience label { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; cursor: pointer; font-size: 0.97em; border-radius: 8px; transition: background 0.15s ease; } .clanek-styl .ingredience label:hover { background: #f3faf2; } .clanek-styl .ingredience input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 1px 0 0; width: 22px; height: 22px; flex-shrink: 0; cursor: pointer; border: 2px solid #036400; border-radius: 6px; background: #FFFFFF; position: relative; transition: background 0.15s ease, border-color 0.15s ease; } .clanek-styl .ingredience input[type="checkbox"]:hover { background: #E9F6E8; } .clanek-styl .ingredience input[type="checkbox"]:checked { background: #036400; border-color: #036400; } .clanek-styl .ingredience input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #FFFFFF; border-width: 0 3px 3px 0; transform: rotate(45deg); } .clanek-styl .ingredience input[type="checkbox"]:focus-visible { outline: 3px solid #036400; outline-offset: 2px; } .clanek-styl .ingredience input[type="checkbox"]:checked + span { text-decoration: line-through; color: #9aa39a; } .clanek-styl .ingredience .ing-mnozstvi { font-weight: 700; color: #161616; } .clanek-styl .ing-skupina { font-family: 'Exo 2', sans-serif; font-weight: 700; color: #036400; font-size: 0.95em; margin: 16px 0 2px; } .clanek-styl .recept-postup { counter-reset: krok; list-style: none; padding-left: 0; margin: 4px 0 8px; } .clanek-styl .recept-postup li { position: relative; padding: 0 0 18px 50px; margin: 0; font-size: 0.97em; } .clanek-styl .recept-postup li:last-child { padding-bottom: 4px; } .clanek-styl .recept-postup li::before { counter-increment: krok; content: counter(krok); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; background: linear-gradient(135deg, #036400, #0a8a00); color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 0.95em; box-shadow: 0 3px 8px rgba(3, 100, 0, 0.22); } .clanek-styl .recept-akce { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 30px 26px; } .clanek-styl .recept-btn { display: inline-flex; align-items: center; gap: 8px; background: #E9F6E8; color: #036400; border: 1px solid #c8e6c5; font-family: 'Exo 2', sans-serif; font-weight: 600; font-size: 0.9em; padding: 10px 20px; border-radius: 50px; cursor: pointer; transition: all 0.2s ease; } .clanek-styl .recept-btn:hover { background: #036400; color: #FFFFFF; } .clanek-styl .recept-btn.aktivni { background: #ffd700; color: #161616; border-color: #ffd700; } /* ============================================ 34. RESPONSIVE – RECEPT KARTA (mobil) ============================================ */ @media screen and (max-width: 768px) { .clanek-styl .recept-karta-head { padding: 22px 20px 20px; } .clanek-styl .recept-karta-head h3 { font-size: 1.3em; } .clanek-styl .recept-telo { padding: 8px 20px; } .clanek-styl .recept-badges { padding: 16px 20px 0; } .clanek-styl .recept-akce { padding: 12px 20px 22px; } .clanek-styl .recept-meta-item { flex: none; width: 33.33%; min-width: 0; } .clanek-styl .recept-postup li { padding-left: 44px; } .clanek-styl .recept-postup li::before { width: 30px; height: 30px; } } /* iframe tisk nemá Shoptet reset -> vynulovat margin odstavce v kroku, jinak text kroku klesne pod číslo (na webu je margin nulovaný globálně) */ .clanek-styl .step-content p { margin: 0; } /* ============================================ 35. TISK RECEPTU Tisk řeší inline JS přes skrytý iframe (vytiskne jen recept-kartu, nezávisle na zbytku stránky). Tato @media print pravidla se uplatní uvnitř iframe dokumentu = čistý černobílý header, šetří inkoust. ============================================ */ /* Tiskové prvky iframu: logo nahoře + patička s odkazem (jen v tiskovém iframu) */ .clanek-styl .tisk-hlavicka { text-align: center; margin: 0 0 18px; } .clanek-styl .tisk-hlavicka img { max-width: 180px; height: auto; } .clanek-styl .tisk-paticka { margin-top: 20px; padding-top: 12px; border-top: 1px solid #cccccc; font-size: 0.8em; color: #555555; text-align: center; word-break: break-all; } .clanek-styl .tisk-paticka a { color: #036400; text-decoration: none; } @media print { .clanek-styl .recept-akce { display: none !important; } /* netisknout URL za odkazy v kartě a patičce */ .clanek-styl .recept-karta a::after, .clanek-styl .tisk-paticka a::after { content: none !important; } .clanek-styl .recept-karta { margin: 0; border: 1px solid #999; box-shadow: none; } .clanek-styl .recept-karta-head { background: #FFFFFF !important; color: #000 !important; } .clanek-styl .recept-karta-head h3, .clanek-styl .recept-karta-perex, .clanek-styl .recept-karta-stitek { color: #000 !important; } .clanek-styl .step-number { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ================================================================== Doplněno při sloučení ================================================================== */ /* dřív hlavni-skripty.js §4: $("li.appended-category").hide() – po načtení; CSS platí od prvního vykreslení */ li.appended-category { display: none !important; } /* Rezervace místa pro lištu „Doprava zdarma“ doplňku dklab, kterou doplněk vkládá před

až po načtení stránky (posun celé stránky o 30/34 px = největší zbývající CLS). Prázdný blok stejné výšky vloží hlavička hned, jak parser vytvoří

, a odebere ho ve chvíli, kdy dklab lištu vloží (nebo 10 s po načtení, když lišta nepřijde). Výšky změřeny 27. 9. 2026: 30 px do 767 px šířky, 34 px od 768 px. V košíku a objednávce (body.ordering-process) dklab lištu skrývá – rezervace také. */ .theikos-dklab-placeholder { height: 30px; } @media (min-width: 768px) { .theikos-dklab-placeholder { height: 34px; } } body.ordering-process .theikos-dklab-placeholder { display: none; }