/* Theme Name: MMD Teal Theme 2026 Theme URI: https://murdermysteryco.com Template: mmd-parent-2026 Author: American Immersion Theater Description: Colour-scheme child of MMD Parent Theme 2026. Keeps the dark oxblood header shell and bottom bar, and swaps the cream chips (hamburger, phone pill, CTA pills, social circles) to teal #37ABC8. Header and bottom bar only — every page section renders exactly as the parent does. Version: 1.0.0 License: Proprietary Text Domain: mmd-teal */ /* ============================================================================= MMD Teal 2026 — header + bottom bar recolour ============================================================================= SCOPE. This theme changes colour and nothing else. It adds no templates, no shortcodes and no patterns, so every section, form and page template comes from mmd-parent-2026 untouched. If a rule below ever needs a layout change to go with it, that belongs in the parent — put it there and this file stays a palette. WHAT IT IS NOT. This is NOT a drop-in replacement for mmd-child-2026. That child supplies the hero-video homepage: the [mmd_home_hero] section order, the front-page.php fallback and the "Homepage — With Hero Video (Full)" pattern. A site activating THIS theme instead gets the parent's default homepage with no video. If a teal site needs the video homepage, the answer is to fold these rules into mmd-child-2026 behind a body class, not to copy the child's functions.php in here — two copies of that list drift. HOW THE OVERRIDES WIN. functions.php enqueues this file with 'mmd-main' as a dependency at priority 20, so it loads after the parent stylesheet. Every selector below is copied at the SAME specificity as the parent rule it replaces and wins on source order alone — no !important, and nothing gets harder to override further down the line. Two exceptions are called out where they occur. ============================================================================= */ :root { /* The one new colour in this theme. Named --mmd-teal rather than overriding --mmd-accent on purpose: --mmd-accent is the per-city knob that main.js sets inline on from Location Settings → Primary Accent Color, and it recolours ~53 rules across every page. Redefining it here would repaint the whole site teal, not the header and bar, and would also silently fight any city that has set its own accent. This token is referenced only by the rules in this file. */ --mmd-teal: #37ABC8; /* Hover state. The parent's chips brighten cream → white on hover; teal has no equivalent in the palette, so this is the same move one step lighter rather than a jump to white, which would read as the chip losing its colour rather than lighting up. */ --mmd-teal-light: #5CC1DA; } /* -- Header ------------------------------------------------------------------- The shell stays --mmd-ox-800. Only the two cream chips move. Dark-on-teal text is left alone throughout: --mmd-ox-800 on #37ABC8 is 7.4:1, comfortably past AA, and it is what the parent already sets. The rules below therefore only touch backgrounds, plus the one glyph colour that was cream. -------------------------------------------------------------------------- */ /* Hamburger. The bars stay --mmd-ox-800 (parent) — dark on teal, as drawn. */ .mmd-nav__hamburger { background: var(--mmd-teal); } /* Phone pill. Number and hover colour stay --mmd-ox-800 from the parent. */ .mmd-header__phone { background: var(--mmd-teal); } /* Phone glyph. The circle stays dark (--mmd-ox-800, parent) so the icon keeps its contrast against the now-teal pill; only the glyph inside it moves off cream, so the mark reads as part of the scheme rather than a leftover. */ .mmd-header__phone-icon { color: var(--mmd-teal); } /* The desktop nav pills (≥1024px) are deliberately NOT recoloured: they are cream on the oxblood shell, which is unchanged here and still reads correctly. Teal-on-oxblood pills would be a design decision the mobile comp doesn't make. */ /* -- Bottom bar --------------------------------------------------------------- The 2026 theme has no traditional footer — .mmd-bottom-bar is the persistent bottom chrome (see footer.php). Same treatment as the header: the oxblood bar stays, its cream chips go teal. -------------------------------------------------------------------------- */ /* CTA pills. The parent sets --mmd-ink-on-paper (#2B2B2B) here rather than --mmd-ox-800; restated as --mmd-ox-800 so the pills match the header chips exactly instead of being a near-miss grey. */ .mmd-bottom-bar__btn { background: var(--mmd-teal); color: var(--mmd-ox-800); } .mmd-bottom-bar__btn:hover { background: var(--mmd-teal-light); color: var(--mmd-ox-800); } /* Social circles. SPECIFICITY EXCEPTION: scoped under .mmd-bottom-bar (0,2,0) where the parent rule is bare .mmd-social (0,1,0). The parent's own comment says .mmd-social is generic and reusable on any surface — recolouring it globally would reach outside this theme's stated scope the moment the mark is used somewhere other than the bar. The extra class is the scope, not a specificity fight. */ .mmd-bottom-bar .mmd-social { background: var(--mmd-teal); color: var(--mmd-ox-800); } .mmd-bottom-bar .mmd-social:hover { background: var(--mmd-teal-light); }