Knižní vazby

<!-- POPIS KATEGORIE KNIŽNÍ VAZBY (FINÁLNÍ VERZE S VYLEPŠENOU RESPONZIVITOU) - START --> <!-- 1. Importy (nejsou potřeba, SVG jsou v kódu, font se nepoužívá) --> <!-- 2. CSS Styly s vylepšenou responzivitou --> <style> /* Základní nastavení pro celou sekci */ .binding-grid-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #333; background-color: #f8f9fa; max-width: 1200px; margin: 2rem auto; padding: 3rem 2rem; } /* --- ÚVODNÍ HLAVIČKA --- */ .binding-grid-container .intro-header { text-align: center; margin-bottom: 80px; /* Větší mezera kvůli vyskakujícím obrázkům */ } .binding-grid-container .intro-header h2 { font-size: 2.5rem; font-weight: 700; margin: 0 0 1rem 0; color: #89BC23; /* DOPLŇKOVÁ ZELENÁ */ } .binding-grid-container .intro-header p { font-size: 1.1rem; color: #666; max-width: 700px; margin: 0 auto; line-height: 1.7; } /* --- MŘÍŽKA PRO KARTY --- */ .binding-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5rem 2.5rem; /* Větší řádková mezera kvůli hornímu okraji karet */ } /* --- KARTA PRO JEDNU VAZBU --- */ .binding-card { position: relative; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; margin-top: 70px; padding: 0; } .binding-card:hover { transform: translateY(-5px); box-shadow: 0 8px 35px rgba(0, 0, 0, 0.08); } .binding-card .card-image-wrapper { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 140px; border-radius: 50%; background-color: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); padding: 6px; z-index: 2; transition: width 0.3s ease, height 0.3s ease; } .binding-card .card-image { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .binding-card .card-content { padding: 100px 1.75rem 1.75rem 1.75rem; display: flex; flex-direction: column; flex-grow: 1; text-align: center; transition: padding-top 0.3s ease; } .binding-card h3 { font-size: 1.5rem; font-weight: 600; margin: 0 0 0.5rem 0; color: #0056b3; } .binding-card p { font-size: 0.95rem; line-height: 1.7; color: #555; flex-grow: 1; margin-bottom: 1.5rem; } .binding-card .key-features { display: flex; justify-content: space-between; align-items: flex-start; list-style: none; padding: 1.5rem 0 0 0; margin: 0; border-top: 1px solid #f0f0f0; text-align: left; } .binding-card .key-features li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: #333; flex-basis: 48%; } .binding-card .key-features .icon { width: 20px; height: 20px; flex-shrink: 0; color: #cd9900; /* DETAILNÍ ZLATÁ */ } /* --- SEKCE FAQ --- */ .faq-section { padding-top: 4rem; margin-top: 4rem; border-top: 1px solid #e0e0e0; } .faq-section h2 { text-align: center; font-size: 2rem; margin-bottom: 2.5rem; } .faq-container { display: grid; gap: 1rem; max-width: 800px; margin: 0 auto;} .faq-item { background-color: #fff; border: 1px solid #e9ecef; border-radius: 8px; transition: all 0.3s ease; } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; cursor: pointer; font-weight: 600; } .faq-question h3 { flex-grow: 1; margin: 0; font-size: 1.1rem; color: #333; } .faq-icon { width: 16px; height: 16px; color: #888; transition: transform 0.4s ease; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; } .faq-answer p { padding: 0 1.5rem; margin: 0; font-size: 1rem; line-height: 1.7; color: #555;} .faq-item.active { border-color: #0088cc; } .faq-item.active .faq-question { color: #0088cc; } .faq-item.active .faq-icon { transform: rotate(180deg); color: #0088cc; } .faq-item.active .faq-answer { max-height: 200px; padding: 0 1.5rem 1.5rem 1.5rem; } /* --- ZMĚNA: VYLEPŠENÁ RESPONZIVITA --- */ /* Pro tablety */ @media (max-width: 992px) { .binding-grid-container { padding: 3rem 1.5rem; } .binding-grid { gap: 5rem 1.5rem; /* Zúžení mezery mezi sloupci */ } } /* Pro menší tablety a velké telefony */ @media (max-width: 768px) { .binding-grid-container { padding: 2rem 1.5rem; } .binding-grid { grid-template-columns: 1fr; /* Změna na jeden sloupec */ gap: 6rem; /* Mezera mezi kartami pod sebou */ } .binding-grid-container .intro-header { margin-bottom: 6rem; } .binding-grid-container .intro-header h2 { font-size: 2.2rem; } .binding-card h3 { font-size: 1.4rem; } /* KLÍČOVÁ OPRAVA: Vlastnosti se řadí pod sebe */ .binding-card .key-features { flex-direction: column; gap: 1rem; } .binding-card .key-features li { flex-basis: 100%; } } /* Pro malé telefony */ @media (max-width: 480px) { .binding-grid-container .intro-header { margin-bottom: 5rem; } .binding-grid-container .intro-header h2 { font-size: 1.8rem; } .binding-card { margin-top: 60px; /* Přizpůsobení horního okraje menšímu obrázku */ } .binding-card .card-image-wrapper { width: 120px; /* Zmenšení obrázku */ height: 120px; } .binding-card .card-content { padding-top: 80px; /* Přizpůsobení obsahu menšímu obrázku */ } .faq-question h3 { font-size: 1rem; } } </style> <!-- 3. HTML Struktura (beze změny) --> <div class="binding-grid-container"> <div class="intro-header"> <h2>Vyberte si tu pravou vazbu</h2> <p>Každý typ vazby dává knize jedinečný charakter, odolnost a vzhled. Zde je přehled těch nejběžnějších.</p> </div> <div class="binding-grid"> <!-- Karta V1 --> <div class="binding-card"> <div class="card-image-wrapper"> <img src="/media/custom/images/product_page/knihy/Kniha_1.png" alt="Ukázka sešitové vazby V1" class="card-image"> </div> <div class="card-content"> <h3>V1 – Sešitová</h3> <p>Nejrychlejší a nejekonomičtější řešení pro tiskoviny menšího rozsahu, jako jsou brožury, katalogy nebo programy.</p> <ul class="key-features"> <li> <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg> <span>Rychlá a levná výroba</span> </li> <li> <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg> <span>Pro nízký počet stran</span> </li> </ul> </div> </div> <!-- Karta V2 --> <div class="binding-card"> <div class="card-image-wrapper"> <img src="/media/custom/images/product_page/knihy/Kniha_2.png" alt="Ukázka lepené vazby V2" class="card-image"> </div> <div class="card-content"> <h3>V2 – Lepená brožovaná</h3> <p>Moderní standard pro většinu knih (paperback). Nabízí skvělý poměr ceny a kvality s profesionálním vzhledem.</p> <ul class="key-features"> <li> <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg> <span>Běžná pro beletrii</span> </li> <li> <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg> <span>Poměr cena/výkon</span> </li> </ul> </div> </div> <!-- Karta V4 --> <div class="binding-card"> <div class="card-image-wrapper"> <img src="/media/custom/images/product_page/knihy/Kniha_3.png" alt="Ukázka šité vazby V4" class="card-image"> </div> <div class="card-content"> <h3>V4 – Šitá brožovaná</h3> <p>Odolnější varianta měkké vazby. Díky šití nití se kniha lépe otevírá a je trvanlivější. Skvělá pro učebnice.</p> <ul class="key-features"> <li> <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path></svg> <span>Výborná otevíratelnost</span> </li> <li> <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg> <span>Zvýšená odolnost</span> </li> </ul> </div> </div> <!-- Karta V8 --> <div class="binding-card"> <div class="card-image-wrapper"> <img src="/media/custom/images/product_page/knihy/Kniha_1.png" alt="Ukázka pevné vazby V8" class="card-image"> </div> <div class="card-content"> <h3>V8 – Pevná s deskami</h3> <p>Nejprestižnější a nejodolnější vazba s pevnými deskami. Ideální pro dárkové edice a knihy, které mají vydržet generace.</p> <ul class="key-features"> <li> <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg> <span>Maximální ochrana</span> </li> <li> <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg> <span>Luxusní vzhled</span> </li> </ul> </div> </div> </div> <!-- SEKCE FAQ --> <div class="faq-section"> <h2>Často kladené otázky</h2> <div class="faq-container"> <div class="faq-item"> <div class="faq-question"> <h3>Kterou vazbu si mám vybrat?</h3> <svg class="faq-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> </div> <div class="faq-answer"> <p>Pro běžnou beletrii zvolte V2. Pro dárek nebo knihu "na celý život" sáhněte po V8. Pro často používanou brožuru je skvělá V4 a pro jednoduchý sešit či katalog V1.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> <h3>Jaký je rozdíl mezi V2 a V4?</h3> <svg class="faq-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> </div> <div class="faq-answer"> <p>Vazba V2 je pouze lepená, zatímco V4 je navíc šitá nití. Šití zajišťuje mnohem vyšší pevnost a lepší otevíratelnost knihy bez rizika zlomení hřbetu.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> <h3>Jaký je minimální počet kusů?</h3> <svg class="faq-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> </div> <div class="faq-answer"> <p>Minimální náklad závisí na typu vazby. Pro V1 a V2 je to obvykle nižší počet kusů, zatímco pro V8 doporučujeme výrobu od 30 kusů výše pro optimální cenu.</p> </div> </div> </div> </div> </div> <!-- 4. JavaScript pro interaktivitu FAQ (beze změny) --> <script> (function() { const faqItems = document.querySelectorAll('.faq-item'); if (faqItems.length > 0) { faqItems.forEach(item => { const question = item.querySelector('.faq-question'); question.addEventListener('click', () => { faqItems.forEach(otherItem => { if (otherItem !== item && otherItem.classList.contains('active')) { otherItem.classList.remove('active'); } }); item.classList.toggle('active'); }); }); } })(); </script> <!-- POPIS KATEGORIE KNIŽNÍ VAZBY (FINÁLNÍ VERZE S VYLEPŠENOU RESPONZIVITOU) - KONEC -->