/* ================================================================================ ELLOA CUSTOM FOOTER - CSS STYLESHEET ================================================================================ PROJEKT: ELLOA E-shop (www.elloa.cz) PRODUKT: Slupovací gel laky (peel-off gel nail polish) PLATFORMA: Shoptet (SaaS e-commerce řešení) DATUM VYTVOŘENÍ: 2025-01-04 POSLEDNÍ ÚPRAVA: 2025-01-04 VERZE: 1.0 ================================================================================ ÚČEL SOUBORU: ================================================================================ Tento CSS soubor styluje custom footer na ELLOA e-shopu. Footer nahrazuje výchozí Shoptet footer vlastní strukturou vytvořenou pomocí JavaScriptu (elloa-custom.js). Footer se skládá ze 4 hlavních sekcí: 1. USP BAR - horní lišta se 4 USP (Unique Selling Points) 2. HLAVNÍ FOOTER - 3 sloupce (Zákaznický servis, Produkty, Newsletter) 3. KONTAKTNÍ ŘÁDEK - email a social media ikony 4. COPYRIGHT - tmavá lišta s právními odkazy ================================================================================ SHOPTET SPECIFIKA A OMEZENÍ: ================================================================================ KRABICOVÉ ŘEŠENÍ: - Shoptet je SaaS platforma = nemůžeme měnit core šablonu přímo - Můžeme pouze "překrýt" výchozí styly pomocí CSS + JavaScript - HTML struktura je generována Shopetem, ne námi NAČÍTÁNÍ SOUBORŮ: - CSS se načítá v pomocí tagu v Shoptet HTML editoru - Cesta: /user/documents/custom/elloa-custom.css - URL: https://www.elloa.cz/user/documents/custom/elloa-custom.css - Cache busting: Přidáváme ?v=X na konec URL při změnách SHOPTET HTML STRUKTURA: - Výchozí footer má ID: #footer - Výchozí třídy: .is-white, .no-logo, atd. - JavaScript (elloa-custom.js) vymaže obsah #footer a vloží custom strukturu - Poté nastaví třídu .elloa-custom-footer pro náš styling PRIORITA STYLŮ: - Shoptet má vlastní CSS s různou specificitou - Někdy musíme použít !important pro override - Snažíme se minimalizovat použití !important kde je to možné ================================================================================ BRAND GUIDELINES - ELLOA: ================================================================================ BARVY: - Primary (růžová): #e91e63 - hlavní brand barva - Secondary (tmavě šedá): #333333 - texty, nadpisy - Text dark: #1a1a1a - hlavní text - Text medium: #4a4a4a - sekundární text - Text light: #666666 - light text, popisky FOOTER SPECIFICKÉ BARVY: - USP lišta pozadí: #FFF5F7 (světle růžová/béžová) - Hlavní footer pozadí: #ffffff (bílá) - Kontaktní řádek pozadí: #F5F5F5 (světle šedá) - Copyright pozadí: #4A4A4A (tmavě šedá) TYPOGRAFIE: - Primary font: 'Poppins' - používá se pro body text, popisky, formuláře - Heading font: 'Lato' - používá se pro nadpisy (h1-h6) - Fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif SPACING SYSTÉM: - xs: 8px - velmi malé mezery - sm: 16px - malé mezery - md: 24px - střední mezery - lg: 32px - velké mezery - xl: 48px - extra velké mezery - xxl: 64px - mega velké mezery ================================================================================ RESPONZIVITA: ================================================================================ BREAKPOINTY: - Desktop: 1024px+ (výchozí) - Tablet: 768px - 1023px - Mobile: 0px - 767px CHOVÁNÍ NA ZAŘÍZENÍCH: DESKTOP (1024px+): - USP Bar: 4 sloupce vedle sebe - Footer: 3 sloupce vedle sebe - Kontaktní řádek: flex row (email vlevo, social vpravo) - Copyright: flex row (text vlevo, odkazy vpravo) TABLET (768px - 1023px): - USP Bar: 2 sloupce (2x2 grid) - Footer: 3 sloupce (stále vedle sebe, ale užší) - Kontaktní řádek: flex row - Copyright: flex row MOBILE (<768px): - USP Bar: 1 sloupec (všechno pod sebou) - Footer: 1 sloupec (všechno pod sebou) - Kontaktní řádek: flex column (email nahoře, social dole) - Copyright: flex column (všechno pod sebou) ================================================================================ JAK UPRAVIT TENTO SOUBOR: ================================================================================ ZMĚNA BAREV: 1. Uprav CSS proměnné v :root sekci níže 2. Ulož soubor s UTF-8 kódováním 3. Nahraj přes FTP do /user/documents/custom/ 4. Změň verzi v HTML editoru (?v=1 → ?v=2) 5. Hard refresh stránky (Ctrl+F5) ZMĚNA SPACING: 1. Uprav spacing proměnné v :root 2. Nebo změň konkrétní padding/margin v příslušné sekci 3. Následuj stejný postup jako u změny barev ZMĚNA TYPOGRAFIE: 1. Uprav font-family proměnné v :root 2. Nebo změň konkrétní font-size v příslušné sekci 3. Následuj stejný postup jako u změny barev PŘIDÁNÍ NOVÝCH STYLŮ: 1. Najdi příslušnou sekci (označeno velkými komentáři) 2. Přidej nové CSS pravidlo 3. Používej BEM naming convention kde je to možné 4. Přidej komentář vysvětlující účel ================================================================================ DEBUGGING TIPY: ================================================================================ KDYŽ STYLY NEFUNGUJÍ: 1. Zkontroluj DevTools (F12) → Network → Status 200 OK? 2. Zkontroluj Console → Žádné chyby? 3. Zkontroluj Elements → Jsou tam správné třídy? 4. Zkontroluj specificitu (možná potřebuješ !important) 5. Zkontroluj že soubor má UTF-8 kódování (české znaky) CACHE PROBLÉMY: 1. Hard refresh (Ctrl+F5) 2. Incognito mode 3. Změň verzi v URL (?v=X) 4. Vypni cache v DevTools Network záložce ================================================================================ ZÁVISLOSTI A PROPOJENÍ: ================================================================================ TENTO SOUBOR VYŽADUJE: - elloa-custom.js (vytváří HTML strukturu) - Správně načtený v Shoptet HTML editoru (HEAD sekce) TENTO SOUBOR STYLUJE: - .elloa-custom-footer (hlavní wrapper) - .elloa-usp-bar (USP lišta) - .elloa-footer-main (hlavní footer) - .elloa-contact-row (kontaktní řádek) - .elloa-copyright (copyright) - A všechny jejich potomky ================================================================================ TODOs A BUDOUCÍ VYLEPŠENÍ: ================================================================================ [NÍZKÁ PRIORITA]: - Přidat dark mode variantu - Přidat animace při scrollu (fade-in efekty) - Optimalizovat pro extra velké obrazovky (1920px+) [STŘEDNÍ PRIORITA]: - A/B testování různých barev CTA tlačítek - Implementovat sticky footer při krátkém obsahu stránky [VYSOKÁ PRIORITA]: - Zatím žádné ================================================================================ */ /* ================================================================================ CSS PROMĚNNÉ (CSS VARIABLES) ================================================================================ Proč používáme CSS proměnné: - Centrální místo pro všechny hodnoty (barvy, spacing, fonty) - Snadné globální změny - Lepší maintainability - Možnost runtime změn (pro budoucí dark mode) Kde jsou použité: - V celém CSS místo hardcoded hodnot - Např: color: var(--elloa-primary) místo color: #e91e63 Jak změnit: - Změň hodnotu zde v :root - Změna se automaticky projeví všude kde je proměnná použitá ================================================================================ */ :root { /* ===== BARVY - BRAND ===== */ --elloa-primary: #F2D5D0; /* Pink - používá se pro CTA, odkazy, akcenty */ --elloa-secondary: #333333; /* Dark Mocha - nadpisy, důležitý text */ --elloa-text-dark: #333333; /* Dark Mocha - běžný paragraph text */ --elloa-text-medium: #CBB6A8; /* Mocha - sekundární text */ --elloa-text-light: #B9C2B3; /* Euca - popisky, GDPR text */ /* ===== BARVY - FOOTER SEKCE ===== */ --elloa-usp-bg: #FAF9F6; /* White - USP lišta pozadí */ --elloa-footer-main-bg: #FAF9F6; /* White - hlavní footer pozadí */ --elloa-contact-bg: #F2D5D0; /* Pink - kontaktní řádek pozadí */ --elloa-copyright-bg: #333333; /* Dark Mocha - copyright pozadí */ /* ===== TYPOGRAFIE ===== */ --elloa-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Primary font se používá pro: body text, odkazy, input fields, běžný obsah */ --elloa-font-heading: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Heading font se používá pro: nadpisy (h1-h6), důležité labels */ /* ===== SPACING SYSTÉM ===== */ /* Používáme konzistentní spacing pro jednotný vzhled */ --elloa-spacing-xs: 8px; /* Extra small - gap mezi inline elementy */ --elloa-spacing-sm: 16px; /* Small - padding v malých komponentách */ --elloa-spacing-md: 24px; /* Medium - standardní mezery mezi sekcemi */ --elloa-spacing-lg: 32px; /* Large - velké mezery, padding containerů */ --elloa-spacing-xl: 48px; /* Extra large - velké vertikální mezery */ --elloa-spacing-xxl: 64px; /* Extra extra large - mega spacing pro sekce */ } /* ================================================================================ RESET & BASE STYLES ================================================================================ */ /* ================================================================================ GLOBÁLNÍ TYPOGRAFIE - SHOPTET OVERRIDE ================================================================================ Přepisuje všechny Shoptet defaultní fonty na ELLOA brand fonty: - Poppins = běžný text, popisky, tlačítka, formuláře - Lato = nadpisy (h1-h6) !important je nutné pro přepsání Shoptet inline stylů a CSS ================================================================================ */ /* Google Fonts (Lato + Poppins) jsou načteny v Shoptet HEAD sekci */ /* Globální font pro celý web - Poppins */ html, body, body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(code):not(pre):not(.monospace) { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } /* Nadpisy - Lato */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, [class*="heading"], [class*="title"], .product-title, .category-title, .page-title, .section-title, .block-title { font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } /* Shoptet specifické elementy - běžný text (Poppins) */ .product-description, .product-detail, .product-parameters, .product-price, .price, .btn, .button, input, select, textarea, label, .form-control, .nav-link, .menu-item, .breadcrumb, .pagination, .cart-table, .checkout, p, span, a, li, td, th, div { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } /* Shoptet specifické nadpisy (Lato) */ .product-box h2, .product-box h3, .category-box h2, .category-box h3, .widget-title, .banner-title, .homepage-title { font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } /* Výjimky - monospace fonty */ code, pre, .monospace, .code { font-family: 'Monaco', 'Consolas', 'Courier New', monospace !important; } #footer.elloa-custom-footer { background: transparent !important; padding: 0 !important; margin: 0 !important; } #footer.elloa-custom-footer * { box-sizing: border-box; } /* ================================================================================ GLOBÁLNÍ POZADÍ WEBU ================================================================================ */ /* Hlavní pozadí webu - stejná barva jako footer */ body, html { background-color: #FAF9F6 !important; } /* Hlavní wrapper a content oblasti */ #page, #content, .content-wrapper, .site-wrapper, .page-wrapper { background-color: #FAF9F6 !important; } /* Produktové boxy a karty */ .product, .product-box, .product-item, .product-card { background-color: #FAF9F6 !important; } /* Kategorie a seznamy */ .category-box, .category-item, .product-list, .products-block { background-color: #FAF9F6 !important; } /* Bannery a sekce */ .banner, .section, .block, .widget { background-color: #FAF9F6 !important; } /* Header a navigace */ header, .header, .header-top, .header-middle, .header-bottom, .header-wrapper, .navigation, .navigation-wrapper, .top-navigation-bar, .menu-wrapper, #header { background-color: #FAF9F6 !important; } /* Další header elementy */ .header-content, .header-tools, .header-search, .header-cart, .header-user, .header-logo { background-color: #FAF9F6 !important; } /* Košík a checkout */ .cart, .cart-wrapper, .checkout { background-color: #FAF9F6 !important; } /* Skrytí prázdného odber bloku */ .odber, div.odber { display: none !important; } /* ================================================================================ 1. USP BAR (Unique Selling Points) ================================================================================ */ .elloa-usp-bar { background-color: #333333; padding: var(--elloa-spacing-lg) 0; width: 100%; } .elloa-usp-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--elloa-spacing-md); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--elloa-spacing-lg); } .elloa-usp-item { display: flex; align-items: center; gap: var(--elloa-spacing-sm); } .elloa-usp-icon { width: 40px; height: 40px; flex-shrink: 0; color: #ffffff; } .elloa-usp-icon svg { width: 100%; height: 100%; stroke-width: 1.5; } .elloa-usp-text { font-family: var(--elloa-font-primary); font-size: 14px; line-height: 1.4; color: #ffffff; font-weight: 400; } /* ================================================================================ 2. HLAVNÍ FOOTER (3 sloupce) ================================================================================ */ .elloa-footer-main { background-color: var(--elloa-footer-main-bg); padding: var(--elloa-spacing-xxl) 0; max-width: 1200px; margin: 0 auto; padding-left: var(--elloa-spacing-md); padding-right: var(--elloa-spacing-md); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--elloa-spacing-xxl); } .elloa-footer-column { display: flex; flex-direction: column; } .elloa-footer-column h3 { font-family: var(--elloa-font-heading); font-size: 16px; font-weight: 600; color: var(--elloa-text-dark); margin: 0 0 var(--elloa-spacing-md) 0; letter-spacing: 0.5px; text-transform: none; } .elloa-footer-column ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--elloa-spacing-sm); } .elloa-footer-column ul li { margin: 0; } .elloa-footer-column ul li a { font-family: var(--elloa-font-primary); font-size: 14px; line-height: 1.6; color: var(--elloa-text-medium); text-decoration: none; transition: color 0.2s ease; display: inline-block; } .elloa-footer-column ul li a:hover { color: var(--elloa-primary) !important; } /* ================================================================================ 3. NEWSLETTER SLOUPEC ================================================================================ */ .elloa-newsletter-column p { font-family: var(--elloa-font-primary); font-size: 14px; line-height: 1.6; color: var(--elloa-text-medium); margin: 0 0 var(--elloa-spacing-md) 0; } .elloa-newsletter-form { display: flex; flex-direction: column; gap: var(--elloa-spacing-sm); } .elloa-newsletter-input-wrapper { position: relative; display: flex; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 8px; } .elloa-newsletter-icon { width: 20px; height: 20px; color: var(--elloa-text-light); flex-shrink: 0; margin-right: 8px; } .elloa-newsletter-input { flex: 1; border: none; outline: none; font-family: var(--elloa-font-primary); font-size: 14px; color: var(--elloa-text-dark); background: transparent; padding: 0; } .elloa-newsletter-input::placeholder { color: #999; } .elloa-newsletter-button { width: 24px; height: 24px; padding: 0; background: transparent; border: none; cursor: pointer; color: var(--elloa-text-dark); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease; } .elloa-newsletter-button:hover { color: var(--elloa-primary); } .elloa-newsletter-button:disabled { opacity: 0.5; cursor: not-allowed; } .elloa-newsletter-button svg { width: 100%; height: 100%; } .elloa-spinner { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .elloa-newsletter-gdpr { font-family: var(--elloa-font-primary); font-size: 12px; color: var(--elloa-text-light); line-height: 1.4; } .elloa-newsletter-gdpr a { color: var(--elloa-text-medium); text-decoration: underline; } .elloa-newsletter-gdpr a:hover { color: var(--elloa-text-dark); } .elloa-newsletter-message { margin-top: var(--elloa-spacing-sm); padding: var(--elloa-spacing-sm); border-radius: 4px; font-family: var(--elloa-font-primary); font-size: 13px; line-height: 1.4; } .elloa-newsletter-message--success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .elloa-newsletter-message--error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* ================================================================================ 3. DOPRAVA & PLATBA BAR ================================================================================ */ .elloa-payment-shipping-bar { background-color: var(--elloa-footer-main-bg); padding: var(--elloa-spacing-xl) 0; width: 100%; border-top: 1px solid #E0E0E0; } .elloa-payment-shipping-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--elloa-spacing-md); display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--elloa-spacing-xxl); align-items: start; } .elloa-ps-section { display: flex; flex-direction: column; gap: var(--elloa-spacing-md); } .elloa-ps-section h3 { font-family: var(--elloa-font-heading); font-size: 16px; font-weight: 600; color: var(--elloa-text-dark); margin: 0; letter-spacing: 0.5px; text-transform: none; } .elloa-ps-logos { display: flex; flex-wrap: nowrap; gap: var(--elloa-spacing-sm); align-items: center; justify-content: flex-start; } .elloa-ps-logo { height: 48px; width: auto; max-width: 96px; object-fit: contain; filter: grayscale(100%) opacity(0.7); transition: filter 0.3s ease; flex-shrink: 1; } .elloa-ps-logo:hover { filter: grayscale(0%) opacity(1); } /* Google Reviews */ .elloa-google-reviews { display: flex; align-items: center; gap: var(--elloa-spacing-sm); text-decoration: none; transition: transform 0.2s ease; cursor: pointer; } .elloa-google-reviews:hover { transform: translateY(-2px); } .elloa-google-icon { width: 36px; height: 36px; flex-shrink: 0; } .elloa-reviews-rating { display: flex; align-items: center; gap: 8px; } .elloa-rating-number { font-family: var(--elloa-font-heading); font-size: 18px; font-weight: 700; color: var(--elloa-text-dark); } .elloa-stars { display: flex; gap: 2px; } .elloa-star { width: 16px; height: 16px; } /* ================================================================================ 4. KONTAKTNÍ ŘÁDEK ================================================================================ */ .elloa-contact-row { background-color: transparent; padding: var(--elloa-spacing-lg) 0; width: 100%; border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0; } .elloa-contact-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--elloa-spacing-md); display: flex; justify-content: space-between; align-items: center; } .elloa-contact-email { display: flex; align-items: center; gap: var(--elloa-spacing-xs); font-family: var(--elloa-font-primary); font-size: 14px; color: var(--elloa-text-dark); text-decoration: none; transition: color 0.2s ease; } .elloa-contact-email svg { width: 18px; height: 18px; } .elloa-contact-email:hover { color: var(--elloa-primary); } .elloa-social-icons { display: flex; gap: var(--elloa-spacing-md); align-items: center; } .elloa-social-icons a { color: var(--elloa-text-dark); transition: color 0.2s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: center; text-decoration: none; } .elloa-social-icons a svg { width: 24px; height: 24px; } .elloa-social-icons a:hover { color: var(--elloa-primary); transform: translateY(-2px); } /* ================================================================================ 5. COPYRIGHT SEKCE ================================================================================ */ .elloa-copyright { background-color: var(--elloa-copyright-bg); padding: var(--elloa-spacing-md) 0; width: 100%; } .elloa-copyright-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--elloa-spacing-md); display: flex; justify-content: space-between; align-items: center; } .elloa-copyright-text { font-family: var(--elloa-font-primary); font-size: 12px; color: #ffffff; display: flex; align-items: center; gap: 6px; } .elloa-copyright-text svg { width: 16px; height: 16px; opacity: 0.7; } .elloa-copyright-links { display: flex; gap: var(--elloa-spacing-lg); } .elloa-copyright-links a { font-family: var(--elloa-font-primary); font-size: 12px; color: #ffffff; text-decoration: none; transition: opacity 0.2s ease; } .elloa-copyright-links a:hover { opacity: 0.7; } /* ================================================================================ RESPONZIVITA - MEDIA QUERIES ================================================================================ */ @media (max-width: 1024px) { .elloa-usp-container { grid-template-columns: repeat(2, 1fr); gap: var(--elloa-spacing-md); } .elloa-footer-main { gap: var(--elloa-spacing-lg); } .elloa-payment-shipping-container { grid-template-columns: 1fr; gap: var(--elloa-spacing-lg); text-align: center; } .elloa-ps-section { align-items: center; } .elloa-ps-logos { justify-content: center; flex-wrap: wrap; } .elloa-ps-logo { height: 44px; max-width: 88px; } .elloa-google-reviews { justify-content: center; } } @media (max-width: 768px) { .elloa-usp-bar { padding: var(--elloa-spacing-md) 0; } .elloa-usp-container { grid-template-columns: 1fr; gap: var(--elloa-spacing-md); } .elloa-usp-icon { width: 32px; height: 32px; } .elloa-usp-text { font-size: 13px; } .elloa-footer-main { grid-template-columns: 1fr; gap: var(--elloa-spacing-xl); padding: var(--elloa-spacing-xl) var(--elloa-spacing-md); } .elloa-payment-shipping-bar { padding: var(--elloa-spacing-lg) 0; } .elloa-payment-shipping-container { gap: var(--elloa-spacing-lg); } .elloa-ps-section h3 { font-size: 15px; } .elloa-ps-logos { flex-wrap: wrap; gap: var(--elloa-spacing-sm); } .elloa-ps-logo { height: 36px; max-width: 72px; } .elloa-google-icon { width: 32px; height: 32px; } .elloa-rating-number { font-size: 16px; } .elloa-star { width: 14px; height: 14px; } .elloa-contact-row { padding: var(--elloa-spacing-md) 0; } .elloa-contact-container { flex-direction: column; gap: var(--elloa-spacing-md); text-align: center; } .elloa-social-icons { gap: var(--elloa-spacing-lg); } .elloa-copyright { padding: var(--elloa-spacing-md) 0; } .elloa-copyright-container { flex-direction: column; gap: var(--elloa-spacing-sm); text-align: center; } .elloa-copyright-links { flex-direction: column; gap: var(--elloa-spacing-xs); } } @media (max-width: 480px) { .elloa-usp-bar { padding: var(--elloa-spacing-sm) 0; } .elloa-usp-container { padding: 0 var(--elloa-spacing-sm); gap: var(--elloa-spacing-sm); } .elloa-footer-main { padding: var(--elloa-spacing-lg) var(--elloa-spacing-sm); } .elloa-social-icons a svg { width: 20px; height: 20px; } } /* ================================================================================ UTILITIES & OVERRIDES ================================================================================ */ #footer .footer-links-icons, #footer #signature, #footer .container { display: none !important; } html { scroll-behavior: smooth; } .elloa-newsletter-input:focus, .elloa-newsletter-button:focus, .elloa-footer-column a:focus, .elloa-contact-email:focus, .elloa-social-icons a:focus, .elloa-copyright-links a:focus { outline: 2px solid var(--elloa-primary); outline-offset: 2px; } /* ================================================================================ CUSTOM HEADER STYLING ================================================================================ */ /* Hide original Shoptet header elements */ #header, .top-navigation-bar, div.top-navigation-bar { display: none !important; } body { padding-top: 0 !important; margin-top: 0 !important; } /* Remove any white space between header and content */ .elloa-main-header + * { margin-top: 0 !important; padding-top: 0 !important; } #content { margin-top: 0 !important; padding-top: 0 !important; } /* Target all possible Shoptet wrapper and container elements */ .content-wrapper, .page-wrapper, #page, .main-content, .homepage-wrapper, .carousel-wrapper, .banner-wrapper, .content-inner, #wrapper, .site-wrapper, .container, .page-content { margin-top: 0 !important; padding-top: 0 !important; } /* Target banner and slider elements specifically */ .carousel, .banner, .slider, .homepage-banner, [class*="banner"], [class*="slider"], [class*="carousel"] { margin-top: 0 !important; padding-top: 0 !important; } /* Ensure no spacing on first element after header */ body > *:first-child:not(.elloa-header-usp-bar):not(.elloa-main-header) { margin-top: 0 !important; padding-top: 0 !important; } /* Force remove all possible spacing */ .elloa-main-header ~ * { margin-top: 0 !important; } #content-wrapper, .content-wrapper-inner, main, .main-wrapper { margin-top: 0 !important; padding-top: 0 !important; } /* Target Shoptet specific elements */ .type-homepage #content, .type-index #content { margin-top: 0 !important; padding-top: 0 !important; } /* Nuclear option - target everything after header */ .elloa-main-header + div, .elloa-main-header + section, .elloa-main-header + main, .elloa-main-header + article { margin-top: 0 !important; padding-top: 0 !important; } /* TOP USP BAR */ .elloa-header-usp-bar { background-color: #F2D5D0; padding: 10px 0; } .elloa-header-usp-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; } .elloa-header-usp-item { display: flex; align-items: center; gap: 8px; font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 500; color: #333333; } .elloa-header-usp-item svg { width: 18px; height: 18px; fill: #333333; } /* MAIN HEADER */ .elloa-main-header { background-color: #FAF9F6; border-bottom: 1px solid #E0E0E0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .elloa-header-container { max-width: 1200px; margin: 0 auto; padding: 20px 24px; display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 40px; } /* Logo */ .elloa-logo { display: flex; align-items: center; text-decoration: none; } .elloa-logo img { height: 40px; width: auto; transition: opacity 0.2s ease; } .elloa-logo:hover img { opacity: 0.8; } /* Navigation */ .elloa-nav { display: flex; justify-content: center; gap: 24px; } .elloa-nav-item { position: relative; } .elloa-nav-link { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 400; color: #333333; text-decoration: none; transition: color 0.2s ease; position: relative; padding: 8px 0; display: inline-block; cursor: pointer; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; } .elloa-nav-link:hover { color: #F2D5D0; } .elloa-nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #F2D5D0; transition: width 0.3s ease; } .elloa-nav-link:hover::after { width: 100%; } /* Dropdown Menu */ .elloa-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: #FAF9F6; border: 1px solid #E0E0E0; border-radius: 8px; padding: 12px 0; min-width: 220px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transition: all 0.3s ease; margin-top: 10px; z-index: 1000; } .elloa-nav-item:hover .elloa-dropdown { opacity: 1; visibility: visible; margin-top: 0; } .elloa-dropdown-item { display: block; font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 600; color: #333333; text-decoration: none; padding: 12px 20px; transition: all 0.2s ease; } .elloa-dropdown-item:hover { background-color: #F2D5D0; color: #333333; padding-left: 24px; } /* Header Actions */ .elloa-header-actions { display: flex; gap: 24px; align-items: center; } /* Hide search icon temporarily */ .elloa-header-icon[title="Vyhledávání"] { display: none !important; } .elloa-header-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: transparent; color: #333333; transition: all 0.2s ease; cursor: pointer; text-decoration: none; position: relative; } .elloa-header-icon:hover { background-color: #F2D5D0; color: #333333; } .elloa-header-icon svg { width: 22px; height: 22px; fill: currentColor; } /* Cart wrapper - ikona a částka */ .elloa-cart-wrapper { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 20px; transition: background-color 0.2s ease; text-decoration: none; color: #333333; white-space: nowrap; } /* Hover efekt odstraněn - ikona košíku bez změny při hoveru */ .elloa-cart-wrapper svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; } /* Cart price */ .elloa-cart-price { font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 600; color: #333333; line-height: 1; } /* Hide Shoptet cart elements visually but keep .cart-price readable for JS */ #cart-count, .cart-count, .top-navigation-cart, .header-cart, [data-testid="cart"], .p-cart__header-wrapper, .click-cart { position: absolute !important; left: -9999px !important; visibility: hidden !important; } /* Keep cart-price in DOM but hidden - we read its value via JS */ .cart-price.visible-lg-inline-block, .cart-price:not(.elloa-cart-price) { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; } @media (max-width: 768px) { .elloa-cart-wrapper { padding: 8px; gap: 4px; } } /* Sticky animation */ .elloa-main-header.scrolled { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Mobile Menu Toggle */ .elloa-mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .elloa-mobile-menu-toggle svg { width: 24px; height: 24px; fill: #333333; } /* Mobile Menu Overlay */ .elloa-mobile-menu { position: fixed; top: 0; left: -100%; width: 80%; max-width: 300px; height: 100vh; height: 100dvh; background-color: #FAF9F6; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1); z-index: 2000; transition: left 0.3s ease; overflow: hidden; padding: 20px; display: flex; flex-direction: column; } .elloa-mobile-menu.active { left: 0; } .elloa-mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 1999; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .elloa-mobile-overlay.active { opacity: 1; visibility: visible; } .elloa-mobile-menu-close { background: none; border: none; cursor: pointer; padding: 8px; margin-bottom: 12px; flex-shrink: 0; } .elloa-mobile-menu-close svg { width: 24px; height: 24px; fill: #333333; } /* Mobile Nav - scrollovatelná oblast */ .elloa-mobile-nav { flex: 1; overflow-y: auto; margin: 0 -20px; padding: 0 20px; -webkit-overflow-scrolling: touch; } /* Mobile Nav Item - wrapper pro kategorii */ .elloa-mobile-nav-item { margin-bottom: 4px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .elloa-mobile-nav-item:last-child { border-bottom: none; } /* Header kategorie - obsahuje link + toggle button */ .elloa-mobile-nav-header { display: flex; align-items: center; justify-content: space-between; } /* Hlavní kategorie link - tučný */ .elloa-mobile-nav-link { display: block; flex: 1; font-family: var(--elloa-font-heading); font-size: 15px; font-weight: 700; color: #333333; text-decoration: none; padding: 16px 0; transition: color 0.2s ease; text-transform: uppercase; letter-spacing: 0.3px; } .elloa-mobile-nav-link:hover { color: #B8847C; } /* Toggle button pro accordion */ .elloa-mobile-nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; margin-right: -8px; } .elloa-mobile-nav-toggle svg { width: 20px; height: 20px; fill: #999999; transition: transform 0.3s ease, fill 0.2s ease; } .elloa-mobile-nav-toggle:hover svg { fill: #333333; } /* Rotace šipky když je otevřeno */ .elloa-mobile-nav-item.active .elloa-mobile-nav-toggle svg { transform: rotate(180deg); fill: #333333; } /* Dropdown - skrytý defaultně */ .elloa-mobile-dropdown { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding-left: 0; margin: 0; } /* Dropdown - otevřený */ .elloa-mobile-nav-item.active .elloa-mobile-dropdown { max-height: 500px; padding-bottom: 12px; } /* Podkategorie - světlejší, menší */ .elloa-mobile-dropdown-item { display: block; font-family: var(--elloa-font-primary); font-size: 14px; font-weight: 400; color: #666666; text-decoration: none; padding: 10px 16px; margin-left: 8px; border-left: 2px solid #E8E8E8; transition: all 0.2s ease; } .elloa-mobile-dropdown-item:hover { color: #333333; border-left-color: #F2D5D0; background-color: rgba(242, 213, 208, 0.15); } /* Mobile Menu - Social Icons (fixní dole) */ .elloa-mobile-social { display: flex; justify-content: center; gap: 20px; padding: 16px 0; margin-top: auto; border-top: 1px solid rgba(0, 0, 0, 0.06); flex-shrink: 0; background-color: #FAF9F6; } .elloa-mobile-social-link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background-color: #F2D5D0; transition: all 0.2s ease; } .elloa-mobile-social-link svg { width: 20px; height: 20px; fill: #333333; transition: fill 0.2s ease; } .elloa-mobile-social-link:hover { background-color: #333333; transform: scale(1.1); } .elloa-mobile-social-link:hover svg { fill: #FAF9F6; } /* Responsive */ @media (max-width: 1024px) { .elloa-header-container { grid-template-columns: 1fr auto; gap: 20px; } .elloa-nav { display: none; } .elloa-mobile-menu-toggle { display: flex; } } @media (max-width: 768px) { .elloa-header-usp-container { gap: 20px; padding: 0 16px; } .elloa-header-usp-item { font-size: 11px; } .elloa-header-usp-item svg { width: 16px; height: 16px; } .elloa-header-container { padding: 12px 16px; grid-template-columns: auto 1fr auto; gap: 12px; } .elloa-logo { order: 1; } .elloa-logo img { height: 36px; } .elloa-header-actions { order: 3; gap: 12px; margin-left: auto; } .elloa-mobile-menu-toggle { order: 2; } } /* ================================================================================ HODNOCENÍ OBCHODU - CUSTOM STYLING ================================================================================ */ /* Hlavní nadpis sekce */ .hodnoceniobchodu h2, #hodnoceniobchodu h2 { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 32px; font-weight: 600; color: #333333; text-align: center; } /* Podtržený text */ .elloa-reviews-underlined { position: relative; display: inline-block; text-decoration: none; } .elloa-reviews-underlined::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 4px; background-color: #F2D5D0; }