/* ===================================================================== PropertyHub Kenya — Site themes (switch in Admin -> Appearance) --------------------------------------------------------------------- The active theme is set as . "forest" is the original palette and needs no overrides: style.css defaults ARE forest. Every theme below is mixed only from the brand colours Gold #F8C804 Black #000000 White #FFFFFF plus their blends (gold tints = gold + white, deep golds = gold + black, greys = black + white). Gold is never used as text on white — it fails contrast (1.6:1) — so light themes use deep gold #7A6300 (5.8:1) there. Token roles (see :root in style.css): forest-700 solid "primary" fill (secondary buttons, active tabs, pagination) amber-600 "accent" fill (primary CTA buttons, verified badge) forest-100 soft tint surfaces cream-* page / inputs / borders chrome topbar, footer, admin sidebar ===================================================================== */ /* Shared tweaks for every new theme (the forest greens are hard-coded here) */ :root:not([data-theme="forest"]) .hero p { color: #f2f2f2; } :root:not([data-theme="forest"]) .alert--success, :root:not([data-theme="forest"]) .status-pill--approved, :root:not([data-theme="forest"]) .status-pill--active, :root:not([data-theme="forest"]) .status-pill--published, :root:not([data-theme="forest"]) .status-pill--completed, :root:not([data-theme="forest"]) .status-pill--won, :root:not([data-theme="forest"]) .status-pill--replied { background: #e8f5ec; color: #1f6b3a; border-color: #bfe3c9; } /* --------------------------------------------------------------------- 1. CLASSIC GOLD — white pages, black chrome, gold call-to-action --------------------------------------------------------------------- */ [data-theme="classic-gold"] { --forest-900: #000000; --forest-800: #111111; --forest-700: #000000; --forest-600: #262626; --forest-500: #C6A003; --forest-100: #F4F4F4; --cream-50: #FFFFFF; --cream-100: #FAFAFA; --cream-200: #E6E6E6; --amber-600: #F8C804; --amber-500: #FAD643; --amber-100: #FEF4CD; --ink-900: #111111; --ink-700: #404040; --ink-500: #6B6B6B; --ink-300: #A6A6A6; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 8px 24px rgba(0,0,0,.10); --shadow-lg: 0 18px 48px rgba(0,0,0,.16); --surface: #FFFFFF; --heading: #000000; --text-strong: #111111; --link: #000000; --on-primary: #FFFFFF; --on-accent: #000000; --accent-text: #7A6300; --accent-soft-text: #5C4A00; --badge-accent: #7A6300; --input-border: #D9D9D9; --chrome: #000000; --on-chrome: #FFFFFF; --on-chrome-muted: #D9D9D9; --on-chrome-soft: #BFBFBF; --on-chrome-faint: #8C8C8C; --on-chrome-hover: rgba(248,200,4,.14); --chrome-line: rgba(255,255,255,.12); --topbar-bg: #F8C804; --topbar-text: #000000; --sidebar-text: #F2F2F2; --hero-bg: linear-gradient(160deg, #000000, #1A1A1A 60%, #312801); --cta-bg: linear-gradient(145deg, #1A1A1A, #000000); --cta-border: rgba(248,200,4,.45); --cta-tag-bg: #F8C804; --cta-tag-text: #000000; --cta-link: #F8C804; --flag-bg: #FDECEA; } [data-theme="classic-gold"] .main-nav a:hover { border-color: #F8C804; } [data-theme="classic-gold"] .admin-sidebar a.active { box-shadow: inset 3px 0 0 #F8C804; } /* --------------------------------------------------------------------- 2. MIDNIGHT GOLD — dark mode: black pages, gold prices, links, buttons --------------------------------------------------------------------- */ [data-theme="midnight"] { color-scheme: dark; /* native form controls & scrollbars go dark too */ --forest-900: #000000; --forest-800: #000000; --forest-700: #F8C804; --forest-600: #FAD643; --forest-500: #F8C804; --forest-100: #1F1A06; --cream-50: #111111; --cream-100: #0A0A0A; --cream-200: #2A2A2A; --amber-600: #F8C804; --amber-500: #FAD643; --amber-100: #2B2403; --ink-900: #F2F2F2; --ink-700: #CCCCCC; --ink-500: #999999; --ink-300: #666666; --shadow-sm: 0 1px 3px rgba(0,0,0,.6); --shadow-md: 0 8px 24px rgba(0,0,0,.55); --shadow-lg: 0 18px 48px rgba(0,0,0,.65); --surface: #141414; --heading: #FFFFFF; --text-strong: #F8C804; --link: #F8C804; --on-primary: #000000; --on-accent: #000000; --accent-text: #F8C804; --accent-soft-text: #F8C804; --badge-accent: #7A6300; --input-border: #333333; --chrome: #000000; --on-chrome: #FFFFFF; --on-chrome-muted: #CCCCCC; --on-chrome-soft: #A6A6A6; --on-chrome-faint: #737373; --on-chrome-hover: rgba(248,200,4,.12); --chrome-line: rgba(248,200,4,.18); --topbar-bg: #F8C804; --topbar-text: #000000; --sidebar-text: #F2F2F2; --hero-bg: linear-gradient(160deg, #000000, #111111 55%, #3D3201); --cta-bg: linear-gradient(145deg, #1A1A1A, #0A0A0A); --cta-border: rgba(248,200,4,.4); --cta-tag-bg: #F8C804; --cta-tag-text: #000000; --cta-link: #F8C804; --flag-bg: #3A1512; } [data-theme="midnight"] .site-header { border-bottom: 1px solid #1F1F1F; } [data-theme="midnight"] .site-footer { border-top: 1px solid rgba(248,200,4,.25); } [data-theme="midnight"] .admin-sidebar { border-right: 1px solid #1F1F1F; } [data-theme="midnight"] .card, [data-theme="midnight"] .plan-card, [data-theme="midnight"] .guide-card, [data-theme="midnight"] .chip, [data-theme="midnight"] .contact-card { border-color: #262626; } [data-theme="midnight"] .btn--ghost { color: #F8C804; } [data-theme="midnight"] .alert--error { background: #3A1512; border-color: #6B2A22; color: #F5B3A8; } [data-theme="midnight"] .status-pill--rejected, [data-theme="midnight"] .status-pill--suspended, [data-theme="midnight"] .status-pill--failed, [data-theme="midnight"] .status-pill--lost { background: #3A1512; color: #F5B3A8; } :root[data-theme="midnight"] .alert--success, :root[data-theme="midnight"] .status-pill--approved, :root[data-theme="midnight"] .status-pill--active, :root[data-theme="midnight"] .status-pill--published, :root[data-theme="midnight"] .status-pill--completed, :root[data-theme="midnight"] .status-pill--won, :root[data-theme="midnight"] .status-pill--replied { background: #0F2A18; color: #8FD6A8; border-color: #1F4D2E; } [data-theme="midnight"] .rich-text a, [data-theme="midnight"] .rte-editor a { color: #F8C804; } /* --------------------------------------------------------------------- 3. GOLD RUSH — bold: gold header, footer & sidebar, black buttons --------------------------------------------------------------------- */ [data-theme="gold-rush"] { --forest-900: #000000; --forest-800: #111111; --forest-700: #F8C804; --forest-600: #E0B400; --forest-500: #000000; --forest-100: #FEF4CD; --cream-50: #FFFFFF; --cream-100: #FFFFFF; --cream-200: #EDEDED; --amber-600: #000000; --amber-500: #262626; --amber-100: #FEF4CD; --ink-900: #111111; --ink-700: #333333; --ink-500: #666666; --ink-300: #A6A6A6; --shadow-sm: 0 1px 3px rgba(0,0,0,.10); --shadow-md: 0 8px 24px rgba(0,0,0,.12); --shadow-lg: 0 18px 48px rgba(0,0,0,.18); --surface: #FFFFFF; --heading: #000000; --text-strong: #000000; --link: #000000; --on-primary: #000000; --on-accent: #F8C804; --accent-text: #7A6300; --accent-soft-text: #5C4A00; --badge-accent: #000000; --input-border: #D9D9D9; --chrome: #F8C804; --on-chrome: #000000; --on-chrome-muted: #1A1A1A; --on-chrome-soft: #262626; --on-chrome-faint: #5C4A00; --on-chrome-hover: rgba(0,0,0,.10); --chrome-line: rgba(0,0,0,.18); --topbar-bg: #000000; --topbar-text: #F8C804; --sidebar-text: #000000; --hero-bg: linear-gradient(160deg, #000000, #1A1A1A 55%, #635001); --cta-bg: #000000; --cta-border: #000000; --cta-tag-bg: #F8C804; --cta-tag-text: #000000; --cta-link: #F8C804; --flag-bg: #FDECEA; } [data-theme="gold-rush"] .site-header, [data-theme="gold-rush"] .site-header .main-nav { background: #F8C804; } [data-theme="gold-rush"] .site-header .main-nav a { color: #000000; } [data-theme="gold-rush"] .main-nav a:hover { border-color: #000000; } [data-theme="gold-rush"] .nav-dropdown__menu { background: #FFFFFF; } [data-theme="gold-rush"] .site-header .btn--ghost { background: #000000; color: #F8C804; } [data-theme="gold-rush"] .site-header .btn--outline { border-color: #000000; color: #000000; } [data-theme="gold-rush"] .site-header .btn--outline:hover { background: rgba(0,0,0,.08); } [data-theme="gold-rush"] .footer__cta { --on-chrome: #FFFFFF; --on-chrome-muted: #E6E6E6; --on-chrome-soft: #CCCCCC; } [data-theme="gold-rush"] .footer__cta:hover { border-color: #000000; } [data-theme="gold-rush"] .card { border-color: #E6E6E6; } [data-theme="gold-rush"] .card:hover { border-color: #F8C804; } [data-theme="gold-rush"] .stat-card { border-left-color: #F8C804; } [data-theme="gold-rush"] .plan-features li::before { color: #7A6300; } /* --------------------------------------------------------------------- 4. MONOCHROME — black & white, gold only as a highlighter --------------------------------------------------------------------- */ [data-theme="monochrome"] { --forest-900: #000000; --forest-800: #111111; --forest-700: #000000; --forest-600: #333333; --forest-500: #000000; --forest-100: #EFEFEF; --cream-50: #FFFFFF; --cream-100: #F5F5F5; --cream-200: #E5E5E5; --amber-600: #000000; --amber-500: #333333; --amber-100: #F0F0F0; --ink-900: #111111; --ink-700: #3D3D3D; --ink-500: #6B6B6B; --ink-300: #A6A6A6; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 8px 24px rgba(0,0,0,.10); --shadow-lg: 0 18px 48px rgba(0,0,0,.16); --surface: #FFFFFF; --heading: #000000; --text-strong: #000000; --link: #000000; --on-primary: #FFFFFF; --on-accent: #FFFFFF; --accent-text: #000000; --accent-soft-text: #000000; --badge-accent: #000000; --input-border: #CCCCCC; --chrome: #000000; --on-chrome: #FFFFFF; --on-chrome-muted: #D9D9D9; --on-chrome-soft: #B3B3B3; --on-chrome-faint: #808080; --on-chrome-hover: rgba(255,255,255,.10); --chrome-line: rgba(255,255,255,.14); --topbar-bg: #000000; --topbar-text: #FFFFFF; --sidebar-text: #F2F2F2; --hero-bg: linear-gradient(160deg, #000000, #1A1A1A 60%, #333333); --cta-bg: #111111; --cta-border: rgba(255,255,255,.2); --cta-tag-bg: #F8C804; --cta-tag-text: #000000; --cta-link: #F8C804; --flag-bg: #FDECEA; } /* gold used like a highlighter pen */ [data-theme="monochrome"] .eyebrow { background: linear-gradient(transparent 58%, #F8C804 58%); padding: 0 3px; } [data-theme="monochrome"] .main-nav a:hover { border-color: #F8C804; } [data-theme="monochrome"] .stat-card { border-left-color: #F8C804; } [data-theme="monochrome"] .plan-card--featured { border-color: #F8C804; } [data-theme="monochrome"] .plan-card__badge, [data-theme="monochrome"] .badge--verified { background: #F8C804; color: #000000; } [data-theme="monochrome"] .footer__cta:hover { border-color: #F8C804; } [data-theme="monochrome"] .admin-sidebar a.active { box-shadow: inset 3px 0 0 #F8C804; } [data-theme="monochrome"] .btn--primary:hover { background: #333333; } /* --------------------------------------------------------------------- 5. CHAMPAGNE — soft gold-tinted pages, deep gold text, black buttons --------------------------------------------------------------------- */ [data-theme="champagne"] { --forest-900: #000000; --forest-800: #1A1A1A; --forest-700: #F8C804; --forest-600: #E0B400; --forest-500: #C6A003; --forest-100: #FEF4CD; --cream-50: #FFFDF5; --cream-100: #FFFBEA; --cream-200: #F3E6B3; --amber-600: #000000; --amber-500: #262626; --amber-100: #FEF4CD; --ink-900: #1A1A1A; --ink-700: #404040; --ink-500: #6B6B6B; --ink-300: #A6A6A6; --shadow-sm: 0 1px 3px rgba(92,74,0,.08); --shadow-md: 0 8px 24px rgba(92,74,0,.10); --shadow-lg: 0 18px 48px rgba(92,74,0,.16); --surface: #FFFFFF; --heading: #000000; --text-strong: #5C4A00; --link: #7A6300; --on-primary: #000000; --on-accent: #F8C804; --accent-text: #7A6300; --accent-soft-text: #5C4A00; --badge-accent: #7A6300; --input-border: #E6D48A; --chrome: #1A1600; --on-chrome: #FFFFFF; --on-chrome-muted: #E6E6E6; --on-chrome-soft: #CCC6AA; --on-chrome-faint: #9C9160; --on-chrome-hover: rgba(248,200,4,.12); --chrome-line: rgba(248,200,4,.18); --topbar-bg: #000000; --topbar-text: #F8C804; --sidebar-text: #F2F2F2; --hero-bg: linear-gradient(160deg, #1A1600, #3D3201 60%, #7A6300); --cta-bg: linear-gradient(145deg, #312801, #1A1600); --cta-border: rgba(248,200,4,.5); --cta-tag-bg: #F8C804; --cta-tag-text: #000000; --cta-link: #F8C804; --flag-bg: #FDECEA; } [data-theme="champagne"] .main-nav a:hover { border-color: #F8C804; } [data-theme="champagne"] .plan-features li::before { color: #7A6300; } [data-theme="champagne"] .stat-card { border-left-color: #F8C804; } [data-theme="gold-rush"] .tm-header { background: #F8C804; } [data-theme="gold-rush"] .tm-nav { background: rgba(0,0,0,.45); } /* --------------------------------------------------------------------- 6. EMERALD & GOLD — own palette, not mixed from the gold/black brand set: Primary Deep Green #034023 Secondary Gold/Orange #E69A19 Neutral White #FFFFFF White on green is 11.9:1. Gold fails as text on white (2.3:1), so text uses deep gold #8A5C0F (5.8:1); gold buttons carry green text (5.1:1). --------------------------------------------------------------------- */ [data-theme="emerald-gold"] { --forest-900: #022B18; --forest-800: #023420; --forest-700: #034023; --forest-600: #0B5A34; --forest-500: #1F7A4D; --forest-100: #E6ECE9; --cream-50: #FFFFFF; --cream-100: #F7F9F8; --cream-200: #E3E9E6; --amber-600: #E69A19; --amber-500: #EBAE47; --amber-100: #FAEBD1; --ink-900: #1A2620; --ink-700: #3F4A44; --ink-500: #67716B; --ink-300: #A9B1AC; --shadow-sm: 0 1px 3px rgba(3,64,35,.08); --shadow-md: 0 8px 24px rgba(3,64,35,.10); --shadow-lg: 0 18px 48px rgba(3,64,35,.16); --surface: #FFFFFF; --heading: #034023; --text-strong: #034023; --link: #034023; --on-primary: #FFFFFF; --on-accent: #034023; --accent-text: #8A5C0F; --accent-soft-text: #68450B; --badge-accent: #8A5C0F; --input-border: #D3DCD7; --chrome: #034023; --on-chrome: #FFFFFF; --on-chrome-muted: #CFDDD5; --on-chrome-soft: #B3C7BB; --on-chrome-faint: #7FA08D; --on-chrome-hover: rgba(230,154,25,.14); --chrome-line: rgba(255,255,255,.12); --topbar-bg: #E69A19; --topbar-text: #034023; --sidebar-text: #F2F6F4; --hero-bg: linear-gradient(160deg, #022B18, #034023 55%, #0B5A34); --cta-bg: linear-gradient(145deg, #034023, #022B18); --cta-border: rgba(230,154,25,.45); --cta-tag-bg: #E69A19; --cta-tag-text: #034023; --cta-link: #E69A19; --flag-bg: #FDECEA; } [data-theme="emerald-gold"] .main-nav a:hover { border-color: #E69A19; } [data-theme="emerald-gold"] .admin-sidebar a.active { box-shadow: inset 3px 0 0 #E69A19; } [data-theme="emerald-gold"] .stat-card { border-left-color: #E69A19; } [data-theme="emerald-gold"] .plan-card--featured { border-color: #E69A19; } [data-theme="emerald-gold"] .plan-features li::before { color: #8A5C0F; }