/** * page-content.css — Page Body Content Dark Theme Override * Sites: thedinnerdetective.com (national) + all location subsites * Generated: 2026-05-07 * * PURPOSE * Overrides the default Elementor kit variables (elementor-kit-43081 for * the national site, elementor-kit-51 for location subsites) that produce * a white-background, black-text layout. Brings all page body content into * the dark detective aesthetic established on denvermurdermystery.com. * * ROOT CAUSE * Both kits define: * --e-global-color-primary: #710000 (should be gold #C9A844) * --e-global-color-text: #000000 (should be light #F0F0F0) * body { background-color: #fff; } (should be dark #0a0a0a) * * USAGE (WordPress / Hello Elementor child theme) * Option A — wp_enqueue_scripts in child-theme functions.php (recommended): * add_action( 'wp_enqueue_scripts', function () { * wp_enqueue_style( * 'dd-page-content', * get_stylesheet_directory_uri() . '/page-content.css', * [ 'elementor-frontend' ], * filemtime( get_stylesheet_directory() . '/page-content.css' ) * ); * } ); * * Option B — Elementor → Site Settings → Custom CSS * (works, but loses cache-busting; acceptable for one-time setup). * * NOTE: This file covers page body content only. * Above-the-fold header and hero are handled by critical-atf.css, * which is inlined in via wp_head (priority 1). * * ───────────────────────────────────────────────────────────────────── * SECTIONS * 1. Design tokens — DD dark palette as CSS custom properties * 2. Elementor kit overrides — kit-43081 (national) + kit-51 (locations) * 3. Body & base — background, color, font-smoothing * 4. Elementor section / container backgrounds * 5. Typography — headings, body text, links, lists, blockquotes * 6. Elementor widget overrides — text-editor, heading, divider, icon-list * 7. Buttons & CTAs * 8. Schedule & event listings — .month-header, .event-card, .ticket-button * 9. Content cards & info boxes * 10. Tables * 11. Forms — Gravity Forms * 12. WordPress default content (entry-content / wp-block-*) * 13. Media — images, video wrappers * 14. Responsive overrides (≤1024px, ≤767px) * ───────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════ 1. DESIGN TOKENS — DD dark palette ═══════════════════════════════════════════════════════════════════ */ :root { /* Backgrounds */ --dd-bg-darkest: #0a0a0a; --dd-bg-dark: #0d0d0d; --dd-bg-medium: #111111; /* Borders */ --dd-border-raw: #3a2f1a; --dd-border: 1px solid #3a2f1a; --dd-border-gold-raw: rgba(245, 184, 32, 0.20); /* Brand colours — primary gold is #F5B820 per Dinner Detective Design System. #C9A844 is the secondary alt-gold used on outlined accents, dividers, and the gold→alt-gold rhythm. Token names mirror colors_and_type.css. */ --dd-gold: #F5B820; --dd-gold-alt: #C9A844; --dd-gold-bright: #F5B820; /* legacy alias kept for any remaining refs */ --dd-red: #8B1A1A; --dd-red-ticket: #b20000; --dd-red-hover: #9B2222; --dd-red-bright: #d41a1a; /* Text */ --dd-text: #F0F0F0; --dd-text-90: rgba(255, 255, 255, 0.90); --dd-text-80: rgba(255, 255, 255, 0.80); --dd-text-70: rgba(255, 255, 255, 0.70); --dd-text-55: rgba(255, 255, 255, 0.55); /* Cards */ --dd-card-bg: rgba(255, 255, 255, 0.04); --dd-card-border: rgba(245, 184, 32, 0.20); --dd-card-radius: 8px; /* design-system card radius — never 10px / 20px */ } /* ═══════════════════════════════════════════════════════════════════ 2. ELEMENTOR KIT OVERRIDES Both kits use the same incorrect light-theme tokens. Remapping them here cascades through every widget that references a global token — no per-element overrides needed. ═══════════════════════════════════════════════════════════════════ */ /* ── Token remapping ── */ .elementor-kit-43081, .elementor-kit-51 { --e-global-color-primary: var(--dd-gold) !important; /* was #710000 */ --e-global-color-secondary: var(--dd-red) !important; /* was #AB0101 */ --e-global-color-text: var(--dd-text) !important; /* was #000000 */ --e-global-color-accent: var(--dd-gold-bright) !important; /* was #FFF606 */ background-image: none !important; /* kill any kit gradient */ color: var(--dd-text); } /* ── Heading colour (Elementor generates h1/h2 with var(--e-global-color-primary)) ── */ .elementor-kit-43081 h1, .elementor-kit-43081 h2, .elementor-kit-51 h1, .elementor-kit-51 h2 { color: var(--dd-gold) !important; } /* ── Link colour ── */ .elementor-kit-43081 a, .elementor-kit-51 a { color: var(--dd-gold-bright) !important; } .elementor-kit-43081 a:hover, .elementor-kit-51 a:hover, .elementor-kit-51 a:focus-visible { color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════════ 3. BODY & BASE The inline