/* ============================================================================= KAYMERC X - Master Stylesheet Version: 1.0.0 Description: Comprehensive production-quality CSS for the Kaymerc X website ============================================================================= */ /* ----------------------------------------------------------------------------- 1. GOOGLE FONTS IMPORT ----------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&family=DM+Sans:wght@400;500;600;700&display=swap'); /* ----------------------------------------------------------------------------- 2. CSS CUSTOM PROPERTIES ----------------------------------------------------------------------------- */ :root { /* Core colors - blue-black palette */ --kx-bg: #0D1117; --kx-bg-mid: #161B22; --kx-bg-light: #21262D; --kx-gold: #C9A84C; --kx-gold-light: #E0BF6A; --kx-white: #E6EDF3; --kx-grey: #8B949E; --kx-border: rgba(201,168,76,0.15); --kx-border-hover: rgba(201,168,76,0.6); --kx-success: #10B981; /* Spacing */ --kx-section-pad: 96px; --kx-container-width: 1280px; --kx-gutter: 24px; /* Typography */ --kx-font-display: 'Playfair Display', Georgia, serif; --kx-font-body: 'DM Sans', system-ui, sans-serif; --kx-font-mono: 'DM Mono', 'Courier New', monospace; /* Transitions */ --kx-transition: 0.3s ease; --kx-transition-slow: 0.4s ease; /* Shorthand aliases - used by page-specific inline styles */ --font-serif: var(--kx-font-display); --font-sans: var(--kx-font-body); --radius: 8px; --transition: 0.3s ease; } /* ----------------------------------------------------------------------------- 2b. LIGHT THEME (opt-in via ) Public marketing/informational pages only - admin/portal tooling stays dark. Reuses the same variable names with light-mode values rather than renaming the 375 call sites across this stylesheet. ----------------------------------------------------------------------------- */ body.kx-light { --kx-bg: #FDFBF6; --kx-bg-mid: #FFFFFF; --kx-bg-light: #F4EFE4; --kx-white: #1A1611; --kx-grey: #5B5548; --kx-border: rgba(201,168,76,0.25); --kx-border-hover: rgba(201,168,76,0.6); } /* Components with hardcoded dark backgrounds that variables don't reach */ body.kx-light .kx-section--mid { background: radial-gradient(ellipse 80% 55% at 10% 50%, rgba(201,168,76,0.13) 0%, transparent 58%), radial-gradient(ellipse 50% 40% at 95% 20%, rgba(201,168,76,0.05) 0%, transparent 55%), #F7F3E8; } body.kx-light .kx-breadcrumb { background: #FDFBF6; border-bottom: 1px solid rgba(201,168,76,0.15); } /* The payment drawer and enquiry popup keep their dark styling (hardcoded #111827 backgrounds with light text) - re-pin dark variable values inside them so var()-driven text stays legible on light-theme pages */ body.kx-light .kx-pd__sheet, body.kx-light .kx-eq-popup { --kx-white: #E6EDF3; --kx-grey: #8B949E; --kx-bg: #0D1117; --kx-bg-mid: #161B22; --kx-bg-light: #21262D; --kx-border: rgba(201,168,76,0.15); } /* Heroes keep their dark background artwork (two-tone design: dark hero, light content below) - re-pin light text values inside them so titles and copy stay legible over the dark imagery */ body.kx-light .kx-hero, body.kx-light .kx-page-hero, body.kx-light .kx-division-hero { --kx-white: #E6EDF3; --kx-grey: #B0B8C1; } body.kx-light .kx-division-hero { background: #0D1117; } /* Force hero text light regardless of per-page