/* Theme tokens (single source of truth) To change the site palette later, edit ONLY the variable blocks below. Final design direction: Aluminium (light professional webshop) Designed for aluminium windows, doors & frames business Switch themes by setting: (default) */ /* Default theme (applies when no data-theme is set) */ :root, html[data-theme="premium-aluminium"], body[data-theme="premium-aluminium"], [data-theme="premium-aluminium"] { /* ===== SURFACES ===== */ /* Clean, professional light grey backgrounds */ --bg: #ffffff; /* Main page background - pure white */ --bg-soft: #ffffff; /* Secondary background - pure white */ --card: #ffffff; /* Card/panel background - pure white */ --border: rgba(30, 41, 59, 0.10); /* Subtle borders */ /* ===== TYPOGRAPHY ===== */ /* Professional, high-contrast text for excellent readability */ --text: #334155; /* Body text - slate gray for comfortable reading */ --text-muted: #64748b; /* Secondary text - lighter slate */ --heading: #0f172a; /* Headings - deep slate, almost black */ /* ===== PRIMARY CTA - Brand Blue ===== */ --cta-bg: #2F5F8F; --cta-bg-hover: #2A557E; --cta-bg-active: #244B6C; --cta-text: #ffffff; /* CTA text - white for contrast */ /* ===== SECONDARY BUTTONS ===== */ --btn-secondary-bg: #ffffff; --btn-secondary-border: rgba(30, 41, 59, 0.15); --btn-secondary-text: #1e293b; /* ===== DEPTH & SHADOWS ===== */ /* Refined shadows for premium depth */ --shadow-1: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-2: 0 8px 32px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.08); --shadow-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.12); /* ===== SHAPE & MOTION ===== */ --radius-pill: 999px; --radius-md: 12px; --dur-fast: 150ms; --dur-med: 220ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ===== BREAKPOINT TOKENS ===== Single source of truth for responsive breakpoints. CSS custom properties cannot be used inside @media queries, so these tokens serve as the canonical reference AND are readable by JavaScript via getComputedStyle(). USAGE IN MEDIA QUERIES — always use these exact pixel values: max-width (at-and-below): min-width (above): @media (max-width: 480px) xs @media (min-width: 481px) above-xs @media (max-width: 640px) sm @media (min-width: 641px) above-sm @media (max-width: 768px) md @media (min-width: 769px) above-md @media (max-width: 1024px) lg @media (min-width: 1025px) above-lg @media (max-width: 1200px) xl @media (min-width: 1201px) above-xl @media (max-width: 1400px) 2xl @media (min-width: 1401px) above-2xl DOCUMENTED EXCEPTIONS (intentional, do not normalise): 926px – landscape mobile safe-area (footer/nav) 1023px – news-article sidebar collapse */ --bp-xs: 480px; /* Phone */ --bp-sm: 640px; /* Large phone / small tablet */ --bp-md: 768px; /* Tablet (dominant breakpoint) */ --bp-lg: 1024px; /* Small desktop / landscape tablet */ --bp-xl: 1200px; /* Desktop */ --bp-2xl: 1400px; /* Large desktop / ultra-wide */ /* ===== Z-INDEX TOKEN SCALE ===== Single source of truth — replace magic numbers with these tokens. Ordered lowest → highest so the stacking context is clear at a glance. Leave a gap between tiers so new layers can be inserted without renumbering. */ --z-base: 1; /* Default lifted element (cards, badges) */ --z-dropdown: 10; /* Dropdowns, tooltips, popovers */ --z-sticky: 100; /* Sticky / position:fixed UI (carousel nav) */ --z-header: 1000; /* Site header / sticky nav */ --z-header-above: 1001; /* Elements above header (sticky modal headers) */ --z-overlay: 2000; /* Overlay backdrops (dim layers) */ --z-modal: 3000; /* Modals, lightboxes, compare-bar */ --z-toast: 9000; /* Toast notifications, chat widget bubble */ --z-banner: 9999; /* Cookie banner, info-tooltip, urgent banners */ --z-nav: 10000; /* Main nav / mega-menu (above banners) */ --z-nav-above: 10001; /* Elements pinned above nav (mini-cart, search)*/ --z-mobile-nav: 200000; /* Mobile nav overlay */ --z-mobile-panel:200001; /* Mobile nav slide-out panel */ --z-fullscreen: 300000; /* Fullscreen viewers (configurator 3D) */ /* ===== COMPATIBILITY MAPPING ===== */ --soft: var(--bg-soft); --cta: var(--cta-bg); --cta-hover: var(--cta-bg-hover); --accent: var(--accent-secondary); --link: #2563eb; /* Blue links */ --focus: rgba(47, 95, 143, 0.30); /* ===== STATUS COLORS ===== */ --error: #dc2626; /* Clear red for errors */ --error-soft: #ef4444; /* Lighter red for badges, sale tags */ --success: #16a34a; /* Fresh green for success */ --success-emphasis: #10b981;/* Emerald for badges, indicators */ --success-dark: #059669; /* Darker emerald for text-on-light */ --warning: #2F5F8F; --info: #0284c7; /* Sky blue for info */ /* ===== BADGES ===== */ --badge-info-bg: #0ea5e9; /* Sky blue */ --badge-info-text: #ffffff; --badge-success-bg: #10b981; /* Emerald */ --badge-success-text: #ffffff; --badge-warning-bg: #2F5F8F; --badge-warning-text: #ffffff; --badge-sale-bg: #ef4444; /* Red for urgency */ --badge-sale-text: #ffffff; --badge-new-bg: #8b5cf6; /* Purple for new items */ --badge-new-text: #ffffff; --badge-premium-bg: #1e293b; /* Slate for premium */ --badge-premium-text: #ffffff; /* ===== ADDITIONAL ACCENTS ===== */ --accent-secondary: #2563eb; /* Blue */ --accent-tertiary: #ef4444; /* Red */ --highlight: rgba(47, 95, 143, 0.08); /* ===== BRAND LOGO (single source of truth) ===== */ --logo-image: url("/assets/images/logo.png"); --logo-size-desktop: 68px; --logo-size-mobile: 44px; } /* ===== ALTERNATIVE: Slate Professional Theme ===== */ html[data-theme="slate-professional"], body[data-theme="slate-professional"], [data-theme="slate-professional"] { /* Surfaces */ --bg: #ffffff; --bg-soft: #ffffff; --card: #ffffff; --border: rgba(51, 65, 85, 0.12); /* Typography */ --text: #475569; --text-muted: #94a3b8; --heading: #0f172a; /* Primary CTA - Deep Slate Blue */ --cta-bg: #1e40af; --cta-bg-hover: #1e3a8a; --cta-bg-active: #172554; --cta-text: #ffffff; /* Secondary buttons */ --btn-secondary-bg: #ffffff; --btn-secondary-border: rgba(51, 65, 85, 0.15); --btn-secondary-text: #1e293b; /* Shadows */ --shadow-1: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-2: 0 8px 32px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.08); --shadow-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.12); /* Shape & motion */ --radius-pill: 999px; --radius-md: 12px; --dur-fast: 150ms; --dur-med: 220ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Compatibility */ --soft: var(--bg-soft); --cta: var(--cta-bg); --cta-hover: var(--cta-bg-hover); --accent: var(--accent-secondary); --link: #2563eb; --focus: rgba(30, 64, 175, 0.30); /* Status */ --error: #dc2626; --success: #16a34a; --warning: #2F5F8F; --info: #0284c7; /* Badges */ --badge-info-bg: #3b82f6; --badge-info-text: #ffffff; --badge-success-bg: #22c55e; --badge-success-text: #ffffff; --badge-warning-bg: #2F5F8F; --badge-warning-text: #ffffff; --badge-sale-bg: #ef4444; --badge-sale-text: #ffffff; --badge-new-bg: #8b5cf6; --badge-new-text: #ffffff; --badge-premium-bg: #1e293b; --badge-premium-text: #ffffff; /* Accents */ --accent-secondary: #3b82f6; --accent-tertiary: #6366f1; --highlight: rgba(30, 64, 175, 0.08); } /* ===== ALTERNATIVE: Warm Charcoal Theme ===== */ html[data-theme="warm-charcoal"], body[data-theme="warm-charcoal"], [data-theme="warm-charcoal"] { /* Surfaces - warm undertones */ --bg: #ffffff; --bg-soft: #ffffff; --card: #ffffff; --border: rgba(41, 37, 36, 0.12); /* Typography */ --text: #44403c; --text-muted: #78716c; --heading: #1c1917; /* Primary CTA - Warm Stone */ --cta-bg: #57534e; --cta-bg-hover: #44403c; --cta-bg-active: #292524; --cta-text: #ffffff; /* Secondary buttons */ --btn-secondary-bg: #ffffff; --btn-secondary-border: rgba(41, 37, 36, 0.15); --btn-secondary-text: #292524; /* Shadows */ --shadow-1: 0 4px 16px rgba(28, 25, 23, 0.08), 0 1px 3px rgba(28, 25, 23, 0.06); --shadow-2: 0 8px 32px rgba(28, 25, 23, 0.12), 0 2px 8px rgba(28, 25, 23, 0.08); --shadow-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.12); /* Shape & motion */ --radius-pill: 999px; --radius-md: 12px; --dur-fast: 150ms; --dur-med: 220ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Compatibility */ --soft: var(--bg-soft); --cta: var(--cta-bg); --cta-hover: var(--cta-bg-hover); --accent: var(--accent-secondary); --link: #b45309; --focus: rgba(87, 83, 78, 0.30); /* Status */ --error: #dc2626; --success: #16a34a; --warning: #2F5F8F; --info: #0284c7; /* Badges */ --badge-info-bg: #0ea5e9; --badge-info-text: #ffffff; --badge-success-bg: #22c55e; --badge-success-text: #ffffff; --badge-warning-bg: #2F5F8F; --badge-warning-text: #ffffff; --badge-sale-bg: #ef4444; --badge-sale-text: #ffffff; --badge-new-bg: #a16207; --badge-new-text: #ffffff; --badge-premium-bg: #292524; --badge-premium-text: #ffffff; /* Accents */ --accent-secondary: #b45309; --accent-tertiary: #a16207; --highlight: rgba(87, 83, 78, 0.08); } /* ========================================= GLOBAL LAYOUT FIXES ========================================= */ /* Remove the extra gap above the footer on mobile. The footer already has bottom padding to clear the fixed bottom nav. */ @media (max-width: 768px) { main { padding-bottom: 0; } }