/* |-------------------------------------------------------------------------- | Kingston Groom Suits | GLOBAL THEME SYSTEM |-------------------------------------------------------------------------- | File: | /POST_kingstion/assets/css/theme.css | | Controls: | - Dark Mode | - Light Mode | - Global page colours | - Cards | - Forms | - Buttons | - Tables | - Dropdowns | - Modal surfaces | - Scrollbar | - Selection |-------------------------------------------------------------------------- */ /* ================================================================ ROOT / DARK THEME ================================================================ */ :root { /* Brand */ --kgs-gold: #d4af37; --kgs-gold-light: #f0cf58; --kgs-gold-dark: #a88418; /* Global */ --kgs-page-bg: #050505; --kgs-page-bg-soft: #0b0b0b; --kgs-surface: #0d0d0d; --kgs-surface-2: #131313; --kgs-surface-3: #191919; --kgs-card-bg: #101010; --kgs-card-hover: #171717; /* Text */ --kgs-text: #f5f5f5; --kgs-text-soft: #d0d0d0; --kgs-text-muted: #999999; --kgs-text-faint: #707070; /* Borders */ --kgs-border: rgba(255, 255, 255, 0.10); --kgs-border-soft: rgba(255, 255, 255, 0.06); --kgs-border-gold: rgba(212, 175, 55, 0.45); /* Header */ --kgs-header-bg: rgba(5, 5, 5, 0.96); --kgs-header-text: #f5f5f5; /* Inputs */ --kgs-input-bg: #101010; --kgs-input-text: #ffffff; --kgs-input-placeholder: #777777; /* Buttons */ --kgs-button-text: #080808; --kgs-button-outline-text: #ffffff; /* Overlay */ --kgs-overlay: rgba(0, 0, 0, 0.60); /* Shadow */ --kgs-shadow: 0 12px 35px rgba(0, 0, 0, 0.35); --kgs-shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.50); /* Radius */ --kgs-radius-sm: 6px; --kgs-radius-md: 10px; --kgs-radius-lg: 16px; /* Page brightness */ --kgs-page-brightness: 100%; } /* ================================================================ LIGHT THEME ================================================================ */ html[data-kgs-theme="light"] { --kgs-page-bg: #f7f7f5; --kgs-page-bg-soft: #eeeeeb; --kgs-surface: #ffffff; --kgs-surface-2: #f8f8f6; --kgs-surface-3: #eeeeeb; --kgs-card-bg: #ffffff; --kgs-card-hover: #f4f4f1; --kgs-text: #151515; --kgs-text-soft: #333333; --kgs-text-muted: #666666; --kgs-text-faint: #888888; --kgs-border: rgba(0, 0, 0, 0.12); --kgs-border-soft: rgba(0, 0, 0, 0.07); --kgs-border-gold: rgba(168, 132, 24, 0.45); --kgs-header-bg: rgba(255, 255, 255, 0.97); --kgs-header-text: #151515; --kgs-input-bg: #ffffff; --kgs-input-text: #151515; --kgs-input-placeholder: #888888; --kgs-button-text: #ffffff; --kgs-button-outline-text: #151515; --kgs-overlay: rgba(255, 255, 255, 0.45); --kgs-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); --kgs-shadow-heavy: 0 20px 55px rgba(0, 0, 0, 0.14); } /* ================================================================ HTML / BODY ================================================================ */ html { background: var(--kgs-page-bg); color-scheme: dark; transition: background-color 0.25s ease, color 0.25s ease; } html[data-kgs-theme="light"] { color-scheme: light; } body { margin: 0; background-color: var(--kgs-page-bg); color: var(--kgs-text); transition: background-color 0.25s ease, color 0.25s ease; /* * Brightness affects the complete visible page. * Kept subtle to avoid making text unreadable. */ filter: brightness( var(--kgs-page-brightness) ); } /* ================================================================ GLOBAL SURFACES ================================================================ */ .kgs-surface, .kgs-card, .kgs-panel, .kgs-modal, .kgs-dropdown, .kgs-menu, .kgs-box { background-color: var(--kgs-surface); color: var(--kgs-text); border-color: var(--kgs-border); transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ================================================================ GLOBAL TEXT ================================================================ */ .kgs-home, .kgs-page, .kgs-content { color: var(--kgs-text); } .kgs-home h1, .kgs-home h2, .kgs-home h3, .kgs-home h4, .kgs-home h5, .kgs-home h6 { color: var(--kgs-text); } .kgs-home p { color: var(--kgs-text-soft); } .kgs-home small { color: var(--kgs-text-muted); } /* ================================================================ LINKS ================================================================ */ a { color: inherit; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } a:hover { color: var(--kgs-gold); } /* ================================================================ GOLD BRAND ELEMENTS ================================================================ */ .kgs-gold, .kgs-eyebrow, .kgs-link { color: var(--kgs-gold); } /* ================================================================ BUTTONS ================================================================ */ .kgs-btn-primary { background: var(--kgs-gold); color: var(--kgs-button-text); border-color: var(--kgs-gold); } .kgs-btn-primary:hover { background: var(--kgs-gold-light); color: #080808; } .kgs-btn-outline { background: transparent; color: var(--kgs-button-outline-text); border-color: var(--kgs-gold); } .kgs-btn-outline:hover { background: var(--kgs-gold); color: #080808; } /* ================================================================ INPUTS / SELECT / TEXTAREA ================================================================ */ input, select, textarea { background-color: var(--kgs-input-bg); color: var(--kgs-input-text); border-color: var(--kgs-border); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } input::placeholder, textarea::placeholder { color: var(--kgs-input-placeholder); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--kgs-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12); } /* ================================================================ CARDS ================================================================ */ .kgs-product-card, .kgs-service, .kgs-category, .kgs-collection, .kgs-testimonial { background-color: var(--kgs-card-bg); color: var(--kgs-text); border-color: var(--kgs-border-soft); transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .kgs-product-card:hover, .kgs-service:hover, .kgs-category:hover, .kgs-collection:hover, .kgs-testimonial:hover { background-color: var(--kgs-card-hover); border-color: var(--kgs-border-gold); } /* ================================================================ CATEGORY / COLLECTION TEXT ================================================================ */ .kgs-category span, .kgs-collection h3, .kgs-service h3, .kgs-product-content h3, .kgs-testimonial h3 { color: var(--kgs-text); } .kgs-collection p, .kgs-service p, .kgs-product-content p, .kgs-testimonial p { color: var(--kgs-text-soft); } /* ================================================================ TRUST SECTION ================================================================ */ .kgs-trust { background-color: var(--kgs-surface); color: var(--kgs-text); border-top: 1px solid var(--kgs-border-soft); border-bottom: 1px solid var(--kgs-border-soft); } .kgs-trust-item strong { color: var(--kgs-text); } .kgs-trust-item small { color: var(--kgs-text-muted); } .kgs-trust-item i { color: var(--kgs-gold); } /* ================================================================ SECTION ================================================================ */ .kgs-section { background-color: var(--kgs-page-bg); color: var(--kgs-text); transition: background-color 0.25s ease, color 0.25s ease; } .kgs-category-section { background-color: var(--kgs-page-bg-soft); } .kgs-services-section { background-color: var(--kgs-surface); } /* ================================================================ SECTION HEAD ================================================================ */ .kgs-section-head h2 { color: var(--kgs-text); } .kgs-section-head p { color: var(--kgs-text-muted); } .kgs-eyebrow { color: var(--kgs-gold); } /* ================================================================ CTA ================================================================ */ .kgs-cta { background-color: var(--kgs-surface-2); color: var(--kgs-text); border-top: 1px solid var(--kgs-border-soft); } .kgs-cta h2 { color: var(--kgs-text); } .kgs-cta p { color: var(--kgs-text-soft); } /* ================================================================ SEARCH ================================================================ */ .kgs-search-results { background-color: var(--kgs-surface); color: var(--kgs-text); border-color: var(--kgs-border); box-shadow: var(--kgs-shadow-heavy); } .kgs-search-results a { color: var(--kgs-text); } .kgs-search-results a:hover { background-color: var(--kgs-card-hover); color: var(--kgs-gold); } /* ================================================================ DROPDOWN ================================================================ */ .kgs-dropdown { background-color: var(--kgs-surface); color: var(--kgs-text); border-color: var(--kgs-border); box-shadow: var(--kgs-shadow-heavy); } .kgs-dropdown a { color: var(--kgs-text); } .kgs-dropdown a:hover { background-color: var(--kgs-card-hover); color: var(--kgs-gold); } .kgs-dropdown-top { border-bottom-color: var(--kgs-border-soft); } .kgs-dropdown-top span { color: var(--kgs-text); } /* ================================================================ APPEARANCE PANEL ================================================================ */ .kgs-appearance-panel { background-color: var(--kgs-surface); color: var(--kgs-text); border-color: var(--kgs-border); box-shadow: var(--kgs-shadow-heavy); } .kgs-panel-header strong { color: var(--kgs-text); } .kgs-panel-header small { color: var(--kgs-text-muted); } .kgs-panel-sun, .kgs-brightness-icon { color: var(--kgs-gold); } /* ================================================================ MODE BUTTONS ================================================================ */ .kgs-mode-button { background-color: var(--kgs-surface-2); color: var(--kgs-text); border-color: var(--kgs-border); } .kgs-mode-button:hover { background-color: var(--kgs-card-hover); border-color: var(--kgs-border-gold); color: var(--kgs-gold); } html[data-kgs-theme="dark"] .kgs-mode-button[data-kgs-mode="dark"], html[data-kgs-theme="light"] .kgs-mode-button[data-kgs-mode="light"] { background-color: rgba(212, 175, 55, 0.12); border-color: var(--kgs-gold); color: var(--kgs-gold); } /* ================================================================ BRIGHTNESS ================================================================ */ .kgs-brightness { border-top-color: var(--kgs-border-soft); } .kgs-brightness-copy strong { color: var(--kgs-text); } .kgs-brightness-copy small { color: var(--kgs-text-muted); } .kgs-brightness-head output { color: var(--kgs-gold); } .kgs-brightness-scale { color: var(--kgs-text-faint); } /* ================================================================ RESET ================================================================ */ .kgs-reset-display { background: transparent; color: var(--kgs-text-muted); border-color: var(--kgs-border); } .kgs-reset-display:hover { color: var(--kgs-gold); border-color: var(--kgs-gold); } /* ================================================================ CART BADGE ================================================================ */ .kgs-cart-badge { background: var(--kgs-gold); color: #080808; } /* ================================================================ TABLES ================================================================ */ table { background-color: var(--kgs-surface); color: var(--kgs-text); } th { background-color: var(--kgs-surface-2); color: var(--kgs-text); } td { color: var(--kgs-text-soft); border-color: var(--kgs-border-soft); } tr:hover td { background-color: var(--kgs-card-hover); } /* ================================================================ MODAL ================================================================ */ .modal, .modal-content, .kgs-modal { background-color: var(--kgs-surface); color: var(--kgs-text); border-color: var(--kgs-border); } /* ================================================================ VIDEO ================================================================ */ .kgs-video-icon { background-color: var(--kgs-gold); color: #080808; } /* ================================================================ SELECTION ================================================================ */ ::selection { background-color: var(--kgs-gold); color: #080808; } /* ================================================================ SCROLLBAR - DARK ================================================================ */ html[data-kgs-theme="dark"] { scrollbar-color: var(--kgs-gold) #090909; } /* ================================================================ SCROLLBAR - LIGHT ================================================================ */ html[data-kgs-theme="light"] { scrollbar-color: var(--kgs-gold) #eeeeeb; } /* ================================================================ SMOOTH THEME TRANSITION ================================================================ */ html.kgs-theme-changing *, html.kgs-theme-changing *::before, html.kgs-theme-changing *::after { transition: background-color 0.20s ease, color 0.20s ease, border-color 0.20s ease, box-shadow 0.20s ease !important; } /* ================================================================ ACCESSIBILITY ================================================================ */ @media (prefers-reduced-motion: reduce) { html, body, *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }