/* ============================================ E-Shop - Centrální konfigurace barevných schémat ============================================ Jak používat: 1. Výchozí téma je "cyan" (aktuální design) 2. Pro změnu tématu přidejte atribut na element: 3. Pro dark mode přidejte: 4. Nebo použijte JavaScript: document.documentElement.setAttribute('data-theme', 'orange'); document.documentElement.setAttribute('data-mode', 'dark'); ============================================ */ /* ============================================ BASE COLORS (nezávislé na tématu) ============================================ */ :root { /* Neutrals - Slate palette */ --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; --color-slate-900: #0f172a; --color-slate-950: #020617; /* Status colors */ --color-success: #10b981; --color-success-light: #d1fae5; --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-error: #ef4444; --color-error-light: #fee2e2; /* Star rating */ --color-star: #fbbf24; } /* ============================================ THEME: CYAN (Výchozí) ============================================ */ :root, [data-theme="cyan"] { /* Primary accent */ --accent-50: #ecfeff; --accent-100: #cffafe; --accent-200: #a5f3fc; --accent-300: #67e8f9; --accent-400: #22d3ee; --accent-500: #06b6d4; --accent-600: #0891b2; --accent-700: #0e7490; --accent-800: #155e75; --accent-900: #164e63; /* RGB values for rgba() usage */ --accent-rgb: 6, 182, 212; /* Secondary accent (for gradients) */ --accent-secondary-500: #14b8a6; --accent-secondary-600: #0d9488; /* Computed theme colors */ --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(6 182 212 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(6 182 212 / 0.4); --theme-ring: rgb(6 182 212 / 0.2); } /* ============================================ THEME: BLUE ============================================ */ [data-theme="blue"] { --accent-50: #eff6ff; --accent-100: #dbeafe; --accent-200: #bfdbfe; --accent-300: #93c5fd; --accent-400: #60a5fa; --accent-500: #3b82f6; --accent-600: #2563eb; --accent-700: #1d4ed8; --accent-800: #1e40af; --accent-900: #1e3a8a; --accent-rgb: 59, 130, 246; --accent-secondary-500: #6366f1; --accent-secondary-600: #4f46e5; --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(59 130 246 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(59 130 246 / 0.4); --theme-ring: rgb(59 130 246 / 0.2); } /* ============================================ THEME: ORANGE ============================================ */ [data-theme="orange"] { --accent-50: #fff7ed; --accent-100: #ffedd5; --accent-200: #fed7aa; --accent-300: #fdba74; --accent-400: #fb923c; --accent-500: #f97316; --accent-600: #ea580c; --accent-700: #c2410c; --accent-800: #9a3412; --accent-900: #7c2d12; --accent-rgb: 249, 115, 22; --accent-secondary-500: #ef4444; --accent-secondary-600: #dc2626; --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(249 115 22 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(249 115 22 / 0.4); --theme-ring: rgb(249 115 22 / 0.2); } /* ============================================ THEME: RED ============================================ */ [data-theme="red"] { --accent-50: #fef2f2; --accent-100: #fee2e2; --accent-200: #fecaca; --accent-300: #fca5a5; --accent-400: #f87171; --accent-500: #ef4444; --accent-600: #dc2626; --accent-700: #b91c1c; --accent-800: #991b1b; --accent-900: #7f1d1d; --accent-rgb: 239, 68, 68; --accent-secondary-500: #f43f5e; --accent-secondary-600: #e11d48; --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(239 68 68 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(239 68 68 / 0.4); --theme-ring: rgb(239 68 68 / 0.2); } /* ============================================ THEME: GREEN ============================================ */ [data-theme="green"] { --accent-50: #f0fdf4; --accent-100: #dcfce7; --accent-200: #bbf7d0; --accent-300: #86efac; --accent-400: #4ade80; --accent-500: #22c55e; --accent-600: #16a34a; --accent-700: #15803d; --accent-800: #166534; --accent-900: #14532d; --accent-rgb: 34, 197, 94; --accent-secondary-500: #10b981; --accent-secondary-600: #059669; --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(34 197 94 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(34 197 94 / 0.4); --theme-ring: rgb(34 197 94 / 0.2); } /* ============================================ THEME: PURPLE ============================================ */ [data-theme="purple"] { --accent-50: #faf5ff; --accent-100: #f3e8ff; --accent-200: #e9d5ff; --accent-300: #d8b4fe; --accent-400: #c084fc; --accent-500: #a855f7; --accent-600: #9333ea; --accent-700: #7e22ce; --accent-800: #6b21a8; --accent-900: #581c87; --accent-rgb: 168, 85, 247; --accent-secondary-500: #ec4899; --accent-secondary-600: #db2777; --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(168 85 247 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(168 85 247 / 0.4); --theme-ring: rgb(168 85 247 / 0.2); } /* ============================================ THEME: GOLD / AMBER ============================================ */ [data-theme="gold"] { --accent-50: #fffbeb; --accent-100: #fef3c7; --accent-200: #fde68a; --accent-300: #fcd34d; --accent-400: #fbbf24; --accent-500: #f7941d; --accent-600: #d97706; --accent-700: #b45309; --accent-800: #92400e; --accent-900: #78350f; --accent-rgb: 247, 148, 29; --accent-secondary-500: #f59e0b; --accent-secondary-600: #d97706; --theme-gradient: linear-gradient(135deg, #f7941d 0%, #f59e0b 100%); --theme-gradient-hover: linear-gradient(135deg, #d97706 0%, #b45309 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(247 148 29 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(247 148 29 / 0.4); --theme-ring: rgb(247 148 29 / 0.2); } /* ============================================ THEME: ROSE ============================================ */ [data-theme="rose"] { --accent-50: #fff1f2; --accent-100: #ffe4e6; --accent-200: #fecdd3; --accent-300: #fda4af; --accent-400: #fb7185; --accent-500: #f43f5e; --accent-600: #e11d48; --accent-700: #be123c; --accent-800: #9f1239; --accent-900: #881337; --accent-rgb: 244, 63, 94; --accent-secondary-500: #ec4899; --accent-secondary-600: #db2777; --theme-gradient: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-secondary-500) 100%); --theme-gradient-hover: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-secondary-600) 100%); --theme-gradient-dark: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-900) 100%); --theme-shadow: 0 4px 14px 0 rgb(244 63 94 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(244 63 94 / 0.4); --theme-ring: rgb(244 63 94 / 0.2); } /* ============================================ THEME: SWIENTY (Swienty Red #ec1d26) ============================================ */ [data-theme="swienty"] { --accent-50: #fef2f2; --accent-100: #fee2e2; --accent-200: #fecaca; --accent-300: #f9a8a8; --accent-400: #f06060; --accent-500: #ec1d26; --accent-600: #d41920; --accent-700: #b4151c; --accent-800: #8c1118; --accent-900: #6b0d12; --accent-rgb: 236, 29, 38; --accent-secondary-500: #f03038; --accent-secondary-600: #d41920; --theme-gradient: linear-gradient(135deg, #ec1d26 0%, #e41a22 50%, #d81920 100%); --theme-gradient-hover: linear-gradient(135deg, #d41920 0%, #b4151c 100%); --theme-gradient-dark: linear-gradient(160deg, #a31219 0%, #6b0d12 100%); --theme-shadow: 0 4px 14px 0 rgb(236 29 38 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(236 29 38 / 0.4); --theme-ring: rgb(236 29 38 / 0.2); } /* ============================================ THEME: SEDLACEK (Reality Blue) ============================================ */ [data-theme="sedlacek"] { --accent-50: #e8f4fd; --accent-100: #d1e9fb; --accent-200: #a3d3f7; --accent-300: #86bbf0; --accent-400: #6ba9e6; --accent-500: #4f96dc; --accent-600: #3987d4; --accent-700: #2d6fb3; --accent-800: #255a91; --accent-900: #1d4770; --accent-rgb: 79, 150, 220; --accent-secondary-500: #3987d4; --accent-secondary-600: #2d6fb3; --theme-gradient: linear-gradient(135deg, #4f96dc 0%, #3987d4 100%); --theme-gradient-hover: linear-gradient(135deg, #3987d4 0%, #2d6fb3 100%); --theme-gradient-dark: linear-gradient(135deg, #2d6fb3 0%, #1d4770 100%); --theme-shadow: 0 4px 14px 0 rgb(79 150 220 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(79 150 220 / 0.4); --theme-ring: rgb(79 150 220 / 0.2); } /* ============================================ THEME: UNIKUS (Crimson Red + Slate Gray) ============================================ */ [data-theme="unikus"] { --accent-50: #fef2f2; --accent-100: #fde3e3; --accent-200: #fccbcb; --accent-300: #f9a3a3; --accent-400: #e85a5a; --accent-500: #c41230; --accent-600: #ab102a; --accent-700: #8e0d23; --accent-800: #730a1c; --accent-900: #5c0816; --accent-rgb: 196, 18, 48; /* Secondary = slate gray (for gradients, gives the red-gray combo) */ --accent-secondary-500: #64748b; --accent-secondary-600: #475569; /* Buttons/badges gradient: red only */ --theme-gradient: linear-gradient(135deg, #c41230 0%, #8e0d23 100%); --theme-gradient-hover: linear-gradient(135deg, #ab102a 0%, #730a1c 100%); --theme-gradient-dark: linear-gradient(135deg, #8e0d23 0%, #5c0816 100%); --theme-shadow: 0 4px 14px 0 rgb(196 18 48 / 0.35); --theme-shadow-lg: 0 10px 25px -5px rgb(196 18 48 / 0.4); --theme-ring: rgb(196 18 48 / 0.2); } /* ============================================ LIGHT MODE (Výchozí) ============================================ */ :root, [data-mode="light"] { /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: var(--color-slate-50); --bg-tertiary: var(--color-slate-100); /* Text */ --text-primary: var(--color-slate-900); --text-secondary: var(--color-slate-600); --text-tertiary: var(--color-slate-500); --text-muted: var(--color-slate-400); /* Borders */ --border-primary: var(--color-slate-200); --border-secondary: var(--color-slate-100); /* Header */ --header-bg: #ffffff; --header-top-bg: linear-gradient(to right, var(--accent-700, var(--color-slate-900)), var(--accent-800, var(--color-slate-800))); --header-top-text: #ffffff; --header-menu-bg: linear-gradient(135deg, var(--accent-500, var(--color-slate-800)) 0%, var(--accent-700, var(--color-slate-900)) 100%); /* Footer */ --footer-bg: linear-gradient(to bottom, var(--accent-800, var(--color-slate-900)), var(--accent-900, var(--color-slate-950))); --footer-text: var(--color-slate-400); /* Cards */ --card-bg: #ffffff; --card-border: var(--color-slate-100); --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); } /* ============================================ THEME-SPECIFIC LAYOUT OVERRIDES (after light mode to win specificity) ============================================ */ /* Unikus: red & light gray coexist in blocks, no blending (like the logo) */ [data-theme="unikus"][data-mode="light"], [data-theme="unikus"]:not([data-mode]) { --header-top-bg: #e2e8f0; --header-top-text: #1e293b; --header-menu-bg: #c41230; --footer-bg: #e2e8f0; --footer-text: #1e293b; } /* ============================================ DARK MODE ============================================ */ [data-mode="dark"] { /* Backgrounds */ --bg-primary: var(--color-slate-900); --bg-secondary: var(--color-slate-800); --bg-tertiary: var(--color-slate-700); /* Text */ --text-primary: var(--color-slate-50); --text-secondary: var(--color-slate-300); --text-tertiary: var(--color-slate-400); --text-muted: var(--color-slate-500); /* Borders */ --border-primary: var(--color-slate-700); --border-secondary: var(--color-slate-800); /* Header */ --header-bg: var(--color-slate-900); --header-top-bg: var(--color-slate-950); --header-top-text: #ffffff; /* Footer */ --footer-bg: var(--color-slate-950); --footer-text: var(--color-slate-400); /* Cards */ --card-bg: var(--color-slate-800); --card-border: var(--color-slate-700); --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3); } /* Dark mode specific overrides for components */ [data-mode="dark"] .header-main { background: var(--color-slate-900); border-bottom: 1px solid var(--color-slate-800); } [data-mode="dark"] .header-search input { background: var(--color-slate-800); border-color: var(--color-slate-700); color: var(--color-slate-100); } [data-mode="dark"] .header-search input::placeholder { color: var(--color-slate-500); } [data-mode="dark"] .category-sidebar { background: var(--color-slate-800); } [data-mode="dark"] .category-sidebar-header { background: var(--theme-gradient); } [data-mode="dark"] .category-item { color: var(--color-slate-200); border-bottom-color: var(--color-slate-700); } [data-mode="dark"] .category-item:hover { background: var(--accent-900); color: var(--accent-300); } [data-mode="dark"] .product-card { background: var(--color-slate-800); border-color: var(--color-slate-700); } [data-mode="dark"] .product-card:hover { border-color: var(--accent-500); } [data-mode="dark"] .product-card-title { color: var(--color-slate-100); } [data-mode="dark"] .product-price-current { color: var(--color-slate-50); } [data-mode="dark"] .benefit-item { background: var(--color-slate-800); } [data-mode="dark"] .footer-column a { color: var(--color-slate-400); } [data-mode="dark"] .footer-column a:hover { color: var(--accent-400); } [data-mode="dark"] .footer-bottom { border-top-color: var(--color-slate-800); color: var(--color-slate-500); } [data-mode="dark"] body { background-color: var(--color-slate-900); color: var(--color-slate-100); } [data-mode="dark"] .section-title { color: var(--color-slate-100); } [data-mode="dark"] .hero-banner { background: var(--theme-gradient); } /* Theme panel dark mode */ [data-mode="dark"] #theme-panel-toggle { background: var(--color-slate-800); border-color: var(--color-slate-700); } [data-mode="dark"] #theme-panel-toggle svg { color: var(--color-slate-300); } [data-mode="dark"] #theme-panel-content { background: var(--color-slate-800); border-color: var(--color-slate-700); } [data-mode="dark"] #theme-panel-content h4 { color: var(--color-slate-100); } [data-mode="dark"] #theme-panel-content [data-set-mode] { background: var(--color-slate-700); border-color: var(--color-slate-600); color: var(--color-slate-200); } [data-mode="dark"] #theme-panel-content [data-set-mode]:hover { background: var(--color-slate-600); } [data-mode="dark"] #theme-panel-content [data-set-mode].active, [data-mode="dark"] #theme-panel-content [data-set-mode].bg-gray-100 { background: var(--color-slate-600); border-color: var(--accent-500); } /* Header icon styles */ .header-action-icon { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: 0.75rem; transition: all 0.15s ease; color: var(--color-slate-900); } .header-action-icon:hover { color: var(--accent-500); background-color: var(--accent-100); } .header-action-icon.active { color: var(--accent-500); background-color: var(--accent-100); } .header-action-icon.active:hover { background-color: var(--accent-500); color: white; } [data-mode="dark"] .header-action-icon { color: var(--color-slate-200); } [data-mode="dark"] .header-action-icon:hover { color: var(--accent-400); background-color: var(--color-slate-700); } [data-mode="dark"] .header-action-icon.active { color: var(--accent-400); background-color: var(--color-slate-700); } [data-mode="dark"] .header-action-icon.active:hover { background-color: var(--accent-500); color: white; } /* Mobile menu button */ .mobile-menu-btn { color: var(--color-slate-900); } [data-mode="dark"] .mobile-menu-btn { color: var(--color-slate-200); } [data-mode="dark"] .mobile-menu-btn:hover { background-color: var(--color-slate-700); } /* Auto dark mode based on system preference */ @media (prefers-color-scheme: dark) { :root:not([data-mode]) { /* Uncomment to enable auto dark mode: --bg-primary: var(--color-slate-900); --bg-secondary: var(--color-slate-800); --bg-tertiary: var(--color-slate-700); --text-primary: var(--color-slate-50); --text-secondary: var(--color-slate-300); --text-tertiary: var(--color-slate-400); --text-muted: var(--color-slate-500); --border-primary: var(--color-slate-700); --border-secondary: var(--color-slate-800); --header-bg: var(--color-slate-900); --header-top-bg: linear-gradient(to right, var(--color-slate-950), var(--color-slate-900)); --header-top-text: var(--color-slate-300); --footer-bg: linear-gradient(to bottom, var(--color-slate-950), #000000); --footer-text: var(--color-slate-500); --card-bg: var(--color-slate-800); --card-border: var(--color-slate-700); --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3); */ } } /* ============================================ UTILITY CLASSES FOR THEMING ============================================ */ /* Backgrounds */ .bg-theme { background: var(--theme-gradient); } .bg-theme-hover:hover { background: var(--theme-gradient-hover); } .bg-theme-light { background-color: var(--accent-100); } .bg-theme-50 { background-color: var(--accent-50); } /* Text colors */ .text-theme { color: var(--accent-500); } .text-theme-hover:hover { color: var(--accent-600); } .text-theme-gradient { background: var(--theme-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Borders */ .border-theme { border-color: var(--accent-500); } .border-theme-light { border-color: var(--accent-200); } /* Shadows */ .shadow-theme { box-shadow: var(--theme-shadow); } .shadow-theme-lg { box-shadow: var(--theme-shadow-lg); } /* Focus ring */ .ring-theme { --tw-ring-color: var(--theme-ring); } /* Hover backgrounds */ .hover\:bg-theme-light:hover { background-color: var(--accent-100); } .hover\:bg-theme:hover { background: var(--theme-gradient); } /* ============================================ COMPONENT STYLES USING THEME VARIABLES ============================================ */ /* Gradient accent background (checkout steps, badges, etc.) */ .bg-gradient-accent { background: var(--theme-gradient, linear-gradient(135deg, var(--accent-500, #2563eb), var(--accent-600, #1d4ed8))); } .shadow-accent\/30 { box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--accent-500, #2563eb) 30%, transparent); } /* Primary button */ .btn-theme { background: var(--theme-gradient); color: white; box-shadow: var(--theme-shadow); transition: all 0.2s ease; } .btn-theme:hover { background: var(--theme-gradient-hover); box-shadow: var(--theme-shadow-lg); transform: translateY(-1px); } /* Ghost button */ .btn-theme-ghost { color: var(--accent-500); background: transparent; } .btn-theme-ghost:hover { background-color: var(--accent-100); color: var(--accent-600); } /* Outline button */ .btn-theme-outline { color: var(--accent-500); border: 2px solid var(--accent-500); background: transparent; } .btn-theme-outline:hover { background: var(--theme-gradient); border-color: transparent; color: white; } /* Badge */ .badge-theme { background: var(--theme-gradient); color: white; box-shadow: var(--theme-shadow); } /* Input focus */ .input-theme:focus { border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--theme-ring); } /* Link */ .link-theme { color: var(--accent-500); transition: color 0.15s ease; } .link-theme:hover { color: var(--accent-600); } /* Card accent */ .card-theme-accent { border-left: 4px solid var(--accent-500); } /* Progress bar */ .progress-theme { background: var(--theme-gradient); } /* Checkbox/Radio when checked */ .checkbox-theme:checked { background: var(--theme-gradient); border-color: var(--accent-500); } /* Tab active */ .tab-theme-active { background: var(--theme-gradient); color: white; } /* Sidebar active item */ .sidebar-item-theme-active { background-color: var(--accent-100); color: var(--accent-600); border-left: 3px solid var(--accent-500); } /* Promo banners - see custom.css for full styles with dark mode support */ /* ============================================ THEME: VENATOR (Aquamarine on dark — inspired by the print flyer) Handmade hunting knives — premium, dark, glowing ============================================ */ [data-theme="venator"] { /* Aquamarine accent palette */ --accent-50: #e6fbf6; --accent-100: #c2f5e7; --accent-200: #8cead1; --accent-300: #5ee0bf; --accent-400: #2fd6ad; --accent-500: #14e0b6; /* primary aquamarine */ --accent-600: #0fd4ae; --accent-700: #0cb897; --accent-800: #0a8f76; --accent-900: #075c4e; --accent-rgb: 20, 224, 182; --accent-secondary-500: #7fffd4; /* glow / highlight */ --accent-secondary-600: #5ee0bf; --theme-gradient: linear-gradient(135deg, #14e0b6 0%, #7fffd4 100%); --theme-gradient-hover: linear-gradient(135deg, #0fd4ae 0%, #5ee0bf 100%); --theme-gradient-dark: linear-gradient(135deg, #0a8f76 0%, #075c4e 100%); --theme-shadow: 0 4px 18px 0 rgba(127, 255, 212, 0.35); --theme-shadow-lg: 0 12px 36px -6px rgba(127, 255, 212, 0.45); --theme-ring: rgba(127, 255, 212, 0.25); } /* Force dark layout for Venator (ignore data-mode — flyer look is always dark) */ [data-theme="venator"], [data-theme="venator"][data-mode="light"], [data-theme="venator"][data-mode="dark"] { /* Backgrounds — deep teal-tinted near-black */ --bg-primary: #05121a; --bg-secondary: #0a1f2b; --bg-tertiary: #0e2a38; /* Text */ --text-primary: #e6fbf6; --text-secondary: #9ac7c0; --text-tertiary: #6fa39c; --text-muted: #4f7a73; /* Borders */ --border-primary: rgba(127, 255, 212, 0.18); --border-secondary: rgba(127, 255, 212, 0.10); /* Header */ --header-bg: #05121a; --header-top-bg: linear-gradient(135deg, #05121a 0%, #0a1f2b 100%); --header-top-text: #7fffd4; --header-menu-bg: linear-gradient(135deg, #0a1f2b 0%, #05121a 100%); /* Footer */ --footer-bg: linear-gradient(180deg, #05121a 0%, #020a0f 100%); --footer-text: #9ac7c0; /* Cards */ --card-bg: rgba(14, 42, 56, 0.55); --card-border: rgba(127, 255, 212, 0.18); --card-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(127, 255, 212, 0.06); } /* Venator body — deep gradient with aqua radial glow + subtle grid (like the flyer) */ [data-theme="venator"] body { background-color: #05121a; background-image: /* subtle grid texture on top */ linear-gradient(rgba(127, 255, 212, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 255, 212, 0.035) 1px, transparent 1px), /* aqua glows + base gradient */ radial-gradient(ellipse 55% 40% at 85% 0%, rgba(127, 255, 212, 0.14), transparent 60%), radial-gradient(ellipse 65% 45% at 10% 100%, rgba(20, 224, 182, 0.10), transparent 60%), linear-gradient(165deg, #0a1f2b 0%, #05121a 55%, #020a0f 100%); background-size: 42px 42px, 42px 42px, auto, auto, auto; background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat; background-attachment: fixed; color: #e6fbf6; } /* Typography — match flyer tone */ [data-theme="venator"] h1, [data-theme="venator"] h2, [data-theme="venator"] h3, [data-theme="venator"] .section-title { color: #e6fbf6; letter-spacing: -0.01em; } /* Gradient text — no pure white stop (would be invisible on any light bg). Uses aqua → teal range that remains legible on both dark and light surfaces. */ [data-theme="venator"] .text-theme-gradient, [data-theme="venator"] .gradient-text { background: linear-gradient(135deg, #7fffd4 0%, #14e0b6 50%, #0cb897 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Header */ [data-theme="venator"] .header-main, [data-theme="venator"] header.header-main { background: rgba(5, 18, 26, 0.85) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(127, 255, 212, 0.12); } [data-theme="venator"] .header-search input { background: rgba(14, 42, 56, 0.7); border: 1px solid rgba(127, 255, 212, 0.18); color: #e6fbf6; } [data-theme="venator"] .header-search input::placeholder { color: #6fa39c; } [data-theme="venator"] .header-action-icon { color: #9ac7c0; } [data-theme="venator"] .header-action-icon:hover { color: #7fffd4; background-color: rgba(127, 255, 212, 0.08); } /* Product cards — glassmorphism with aqua edge glow */ [data-theme="venator"] .product-card, [data-theme="venator"] .card { background: linear-gradient(135deg, rgba(127, 255, 212, 0.06), rgba(127, 255, 212, 0.015)) !important; border: 1px solid rgba(127, 255, 212, 0.18) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } [data-theme="venator"] .product-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #7fffd4, transparent); opacity: 0.55; pointer-events: none; } [data-theme="venator"] .product-card:hover { border-color: rgba(127, 255, 212, 0.55) !important; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(127, 255, 212, 0.25), 0 0 30px rgba(127, 255, 212, 0.12); transform: translateY(-2px); } [data-theme="venator"] .product-card-title, [data-theme="venator"] .product-title { color: #ffffff !important; letter-spacing: -0.005em; } [data-theme="venator"] .product-price-current, [data-theme="venator"] .price, [data-theme="venator"] .product-price { color: #7fffd4 !important; font-weight: 800 !important; letter-spacing: -0.01em; } /* Buttons */ [data-theme="venator"] .btn-theme, [data-theme="venator"] .bg-theme { background: linear-gradient(135deg, #14e0b6 0%, #7fffd4 100%) !important; color: #05121a !important; font-weight: 700; box-shadow: 0 4px 18px 0 rgba(127, 255, 212, 0.35); border: none; } [data-theme="venator"] .btn-theme:hover, [data-theme="venator"] .bg-theme:hover { box-shadow: 0 10px 32px 0 rgba(127, 255, 212, 0.45); transform: translateY(-1px); } [data-theme="venator"] .btn-theme-outline { color: #7fffd4; border: 2px solid #7fffd4; background: transparent; } [data-theme="venator"] .btn-theme-outline:hover { background: linear-gradient(135deg, #14e0b6 0%, #7fffd4 100%); color: #05121a; border-color: transparent; } /* Category sidebar */ [data-theme="venator"] .category-sidebar { background: rgba(14, 42, 56, 0.6); border: 1px solid rgba(127, 255, 212, 0.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="venator"] .category-sidebar-header { background: linear-gradient(135deg, #14e0b6 0%, #7fffd4 100%); color: #05121a; } [data-theme="venator"] .category-item { color: #c2f5e7; border-bottom-color: rgba(127, 255, 212, 0.08); } [data-theme="venator"] .category-item:hover { background: rgba(127, 255, 212, 0.08); color: #7fffd4; } /* Footer */ [data-theme="venator"] footer { background: linear-gradient(180deg, #05121a 0%, #020a0f 100%); border-top: 1px solid rgba(127, 255, 212, 0.15); color: #9ac7c0; } [data-theme="venator"] .footer-column a { color: #9ac7c0; } [data-theme="venator"] .footer-column a:hover { color: #7fffd4; } [data-theme="venator"] .footer-bottom { border-top-color: rgba(127, 255, 212, 0.12); color: #6fa39c; } /* Links + accent text */ [data-theme="venator"] a { color: #7fffd4; } [data-theme="venator"] a:hover { color: #c2f5e7; } [data-theme="venator"] .text-theme { color: #7fffd4 !important; } /* Hero banner — deep dark with subtle aqua glow on the right (no blend-mode screen) */ [data-theme="venator"] .hero-banner, [data-theme="venator"] .hero { background: radial-gradient(ellipse 50% 80% at 100% 50%, rgba(127, 255, 212, 0.12), transparent 65%), linear-gradient(135deg, #0a1f2b 0%, #05121a 100%); border: 1px solid rgba(127, 255, 212, 0.18); box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.6); } /* Inputs */ [data-theme="venator"] input[type="text"], [data-theme="venator"] input[type="email"], [data-theme="venator"] input[type="search"], [data-theme="venator"] input[type="number"], [data-theme="venator"] input[type="tel"], [data-theme="venator"] textarea, [data-theme="venator"] select { background: rgba(14, 42, 56, 0.6); border: 1px solid rgba(127, 255, 212, 0.18); color: #e6fbf6; } [data-theme="venator"] input:focus, [data-theme="venator"] textarea:focus, [data-theme="venator"] select:focus { border-color: #7fffd4; box-shadow: 0 0 0 3px rgba(127, 255, 212, 0.2); outline: none; } /* Scrollbar accent on WebKit */ [data-theme="venator"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="venator"] ::-webkit-scrollbar-track { background: #05121a; } [data-theme="venator"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #14e0b6, #0a8f76); border-radius: 10px; } [data-theme="venator"] ::-webkit-scrollbar-thumb:hover { background: #7fffd4; } /* Selection */ [data-theme="venator"] ::selection { background: rgba(127, 255, 212, 0.3); color: #ffffff; } /* ============================================ Venator — colored surface overrides (green/red/amber/blue/yellow etc.) Material detail page uses bg-green-50, bg-red-50, text-green-800 etc. for pros/cons cards — those create light islands on the dark theme. ============================================ */ /* Green surfaces (Pros, success, stock badges) */ [data-theme="venator"] .bg-green-50, [data-theme="venator"] .bg-green-100 { background-color: rgba(16, 185, 129, 0.12) !important; color: #a7f3d0; } [data-theme="venator"] .border-green-200 { border-color: rgba(16, 185, 129, 0.25) !important; } [data-theme="venator"] .text-green-800 { color: #6ee7b7 !important; } [data-theme="venator"] .text-green-700 { color: #a7f3d0 !important; } [data-theme="venator"] .text-green-600 { color: #6ee7b7 !important; } /* Red surfaces (Cons, errors) */ [data-theme="venator"] .bg-red-50, [data-theme="venator"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.12) !important; color: #fca5a5; } [data-theme="venator"] .border-red-200 { border-color: rgba(239, 68, 68, 0.25) !important; } [data-theme="venator"] .text-red-800 { color: #fca5a5 !important; } [data-theme="venator"] .text-red-700 { color: #fca5a5 !important; } [data-theme="venator"] .text-red-600 { color: #f87171 !important; } /* Amber/Yellow surfaces (warnings) */ [data-theme="venator"] .bg-amber-50, [data-theme="venator"] .bg-yellow-50, [data-theme="venator"] .bg-amber-100, [data-theme="venator"] .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.12) !important; color: #fde68a; } [data-theme="venator"] .border-amber-200, [data-theme="venator"] .border-yellow-200 { border-color: rgba(245, 158, 11, 0.25) !important; } /* Blue surfaces (info) */ [data-theme="venator"] .bg-blue-50, [data-theme="venator"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.12) !important; color: #bfdbfe; } [data-theme="venator"] .border-blue-200 { border-color: rgba(59, 130, 246, 0.25) !important; } /* Prose / rich text content — force light readable text */ [data-theme="venator"] .prose, [data-theme="venator"] .prose-gray { --tw-prose-body: #c2f5e7 !important; --tw-prose-headings: #e6fbf6 !important; --tw-prose-bold: #e6fbf6 !important; --tw-prose-links: #7fffd4 !important; --tw-prose-counters: #9ac7c0 !important; --tw-prose-bullets: #6fa39c !important; --tw-prose-quotes: #c2f5e7 !important; --tw-prose-quote-borders: rgba(127, 255, 212, 0.3) !important; --tw-prose-hr: rgba(127, 255, 212, 0.18) !important; color: #c2f5e7; } /* Accent bg with low opacity (usage recommendation box) */ [data-theme="venator"] .bg-accent\/5, [data-theme="venator"] [class*="bg-accent/5"], [data-theme="venator"] [class*="bg-accent/10"] { background-color: rgba(127, 255, 212, 0.06) !important; } /* Slate-700/50 (related materials cards, product cards in sidebar) */ [data-theme="venator"] .bg-slate-700\/50, [data-theme="venator"] [class*="bg-slate-700/50"] { background-color: rgba(14, 42, 56, 0.6) !important; border: 1px solid rgba(127, 255, 212, 0.12); } /* ============================================ Venator — convert hardcoded light surfaces to dark glass Modern theme templates use lots of bg-white / bg-gray-50 / bg-gray-100 Tailwind utilities. On Venator we want everything dark + aqua. ============================================ */ [data-theme="venator"] .bg-white, [data-theme="venator"] .bg-gray-50, [data-theme="venator"] .bg-gray-100, [data-theme="venator"] .bg-slate-50, [data-theme="venator"] .bg-slate-100 { background-color: rgba(14, 42, 56, 0.55) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #e6fbf6; border-color: rgba(127, 255, 212, 0.18); } /* Text utilities inside dark-overridden sections — force light text */ [data-theme="venator"] .text-gray-900, [data-theme="venator"] .text-gray-800, [data-theme="venator"] .text-gray-700, [data-theme="venator"] .text-slate-900, [data-theme="venator"] .text-slate-800, [data-theme="venator"] .text-slate-700 { color: #e6fbf6 !important; } [data-theme="venator"] .text-gray-600, [data-theme="venator"] .text-gray-500, [data-theme="venator"] .text-slate-600, [data-theme="venator"] .text-slate-500 { color: #9ac7c0 !important; } [data-theme="venator"] .text-gray-400, [data-theme="venator"] .text-slate-400 { color: #6fa39c !important; } /* Borders on light-overridden surfaces */ [data-theme="venator"] .border-gray-100, [data-theme="venator"] .border-gray-200, [data-theme="venator"] .border-slate-100, [data-theme="venator"] .border-slate-200 { border-color: rgba(127, 255, 212, 0.18) !important; } /* Shadows on light surfaces look wrong on dark — soften */ [data-theme="venator"] .shadow, [data-theme="venator"] .shadow-sm, [data-theme="venator"] .shadow-md, [data-theme="venator"] .shadow-lg, [data-theme="venator"] .shadow-xl { box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(127, 255, 212, 0.08) !important; } /* Header logo: ensure visibility via subtle glow if logo happens to be dark */ [data-theme="venator"] .header-main img, [data-theme="venator"] header img[alt*="logo" i], [data-theme="venator"] header img[alt*="Venátor" i] { filter: drop-shadow(0 0 8px rgba(127, 255, 212, 0.4)); } /* Text-fallback logo — the modern theme renders two spans (.logo-light / .logo-dark) and shows .logo-light by default (with a near-black color invisible on our dark bg). Force the dark variant to be visible and restyle both to look like the flyer brand. */ [data-theme="venator"] .logo-light { display: none !important; } [data-theme="venator"] .logo-dark { display: inline-block !important; } [data-theme="venator"] a[href] > .logo-dark, [data-theme="venator"] .header-main .logo-dark { color: #e6fbf6 !important; font-family: "Inter", "SF Pro Display", system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 0 24px rgba(127, 255, 212, 0.15); } /* First letter (the .text-gradient span inside .logo-dark) — strong aqua gradient glow */ [data-theme="venator"] .logo-dark .text-gradient, [data-theme="venator"] .header-main a .text-gradient { background: linear-gradient(135deg, #7fffd4 0%, #14e0b6 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; text-shadow: 0 0 18px rgba(127, 255, 212, 0.55); padding-right: 0.05em; } /* Header main bar — add a subtle aqua underline glow to give the header more presence */ [data-theme="venator"] .header-main { position: relative; } [data-theme="venator"] .header-main::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(127, 255, 212, 0.4) 50%, transparent 100%); pointer-events: none; } /* Header search bar — make it more prominent & on-theme */ [data-theme="venator"] .header-search { position: relative; } [data-theme="venator"] .header-search input { background: rgba(14, 42, 56, 0.7) !important; border: 1px solid rgba(127, 255, 212, 0.22) !important; color: #e6fbf6 !important; border-radius: 999px !important; padding-left: 44px !important; } [data-theme="venator"] .header-search input::placeholder { color: #6fa39c !important; } [data-theme="venator"] .header-search input:focus { border-color: #7fffd4 !important; box-shadow: 0 0 0 3px rgba(127, 255, 212, 0.18) !important; outline: none !important; } [data-theme="venator"] .header-search .header-search-icon { color: #7fffd4 !important; } [data-theme="venator"] .header-search-btn { background: linear-gradient(135deg, #14e0b6 0%, #7fffd4 100%) !important; color: #05121a !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(127, 255, 212, 0.35) !important; border: none !important; } [data-theme="venator"] .header-search-btn:hover { box-shadow: 0 8px 24px rgba(127, 255, 212, 0.45) !important; transform: translateY(-1px); } /* Header action icons (account, wishlist, cart, theme toggle) The modern theme uses `.header-action-icon.active` for the cart icon, which pulls `background-color: var(--accent-100)` by default. In Venator's aqua palette --accent-100 is #c2f5e7 (a very pale mint) which creates a light island in the middle of the dark header bar. Force glass dark. */ [data-theme="venator"] .header-action-icon { color: #c2f5e7 !important; background-color: transparent !important; border: 1px solid transparent; transition: all 0.2s ease; } [data-theme="venator"] .header-action-icon:hover { color: #7fffd4 !important; background-color: rgba(127, 255, 212, 0.10) !important; border-color: rgba(127, 255, 212, 0.25); } /* Active state (cart gets this in the modern theme) — dark glass with aqua border+glow */ [data-theme="venator"] .header-action-icon.active { background: linear-gradient(135deg, rgba(127, 255, 212, 0.14), rgba(127, 255, 212, 0.04)) !important; border: 1px solid rgba(127, 255, 212, 0.35) !important; color: #7fffd4 !important; box-shadow: 0 0 18px rgba(127, 255, 212, 0.15); } [data-theme="venator"] .header-action-icon.active:hover { background: linear-gradient(135deg, rgba(127, 255, 212, 0.22), rgba(127, 255, 212, 0.08)) !important; border-color: rgba(127, 255, 212, 0.55) !important; color: #7fffd4 !important; box-shadow: 0 0 24px rgba(127, 255, 212, 0.3); } [data-theme="venator"] .header-action-icon .cart-total { color: #7fffd4 !important; font-weight: 700; } /* Cart count badge — the circular number top-right of cart icon */ [data-theme="venator"] #cart-count, [data-theme="venator"] .cart-count, [data-theme="venator"] .header-cart-count { background: linear-gradient(135deg, #14e0b6 0%, #7fffd4 100%) !important; color: #05121a !important; box-shadow: 0 0 12px rgba(127, 255, 212, 0.5); border: 1.5px solid #05121a; } /* Header nav menu — bump text from translucent white to solid aqua-tinted light so it doesn't visually blend into the dark gradient bar */ [data-theme="venator"] .header-menu-link { color: #c2f5e7 !important; font-weight: 600; } [data-theme="venator"] .header-menu-link:hover, [data-theme="venator"] .header-menu-link.active { color: #7fffd4 !important; background: rgba(127, 255, 212, 0.08) !important; } [data-theme="venator"] .header-menu-link-categories { color: #c2f5e7 !important; font-weight: 600; } [data-theme="venator"] .header-menu-link-categories:hover { color: #7fffd4 !important; background: rgba(127, 255, 212, 0.08) !important; } /* Promo banner blocks (hero-style CTA cards with custom bg_color inline style) — the editor sets `style="background-color: #007393"` which overrides class bg. Force dark glass via very high specificity + !important. */ [data-theme="venator"] .promo-banner, [data-theme="venator"] section .promo-banner[style], [data-theme="venator"] .promo-banner[style*="background"] { background-color: rgba(14, 42, 56, 0.55) !important; background-image: radial-gradient(ellipse at 100% 100%, rgba(127, 255, 212, 0.18), transparent 60%), linear-gradient(135deg, rgba(127, 255, 212, 0.06), rgba(127, 255, 212, 0.01)) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(127, 255, 212, 0.22); box-shadow: 0 16px 44px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(127, 255, 212, 0.05); color: #e6fbf6; position: relative; overflow: hidden; } /* Aqua glow line on top of each promo card (matches product-card style) */ [data-theme="venator"] .promo-banner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #7fffd4, transparent); opacity: 0.6; pointer-events: none; z-index: 2; } /* Promo banner inner text + badge */ [data-theme="venator"] .promo-banner h3 { color: #ffffff !important; } [data-theme="venator"] .promo-banner p, [data-theme="venator"] .promo-banner .text-white\/80, [data-theme="venator"] .promo-banner [class*="text-white"] { color: #9ac7c0 !important; } /* Promo banner badge: make it a small pill with aqua tint */ [data-theme="venator"] .promo-banner .bg-white\/20, [data-theme="venator"] .promo-banner span[class*="bg-white"] { background: rgba(127, 255, 212, 0.15) !important; color: #7fffd4 !important; border: 1px solid rgba(127, 255, 212, 0.25); } /* Promo banner CTA button — aqua gradient pill, dark text */ [data-theme="venator"] .promo-banner a[class*="bg-white"] { background: linear-gradient(135deg, #14e0b6 0%, #7fffd4 100%) !important; color: #05121a !important; font-weight: 700; box-shadow: 0 4px 18px 0 rgba(127, 255, 212, 0.35); border: none; } [data-theme="venator"] .promo-banner a[class*="bg-white"]:hover { box-shadow: 0 10px 32px 0 rgba(127, 255, 212, 0.5); transform: translateY(-1px); } /* Decorative circle in corner of promo-banner — make it aqua tint */ [data-theme="venator"] .promo-banner > div.absolute.rounded-full, [data-theme="venator"] .promo-banner .bg-white\/20.rounded-full { background: radial-gradient(circle, rgba(127, 255, 212, 0.25), transparent 70%) !important; }