/* ============================================================================= MMD Parent Theme 2026 — Main Stylesheet ============================================================================= */ /* ── Design tokens ────────────────────────────────────────────────────────── The 2026 palette. Two groups below: 1. NEW tokens — the real scale. Reach for these in new/rewritten rules. 2. LEGACY tokens — the original names, remapped onto the new palette. They exist because ~1039 lines of this stylesheet already reference them (53 rules use --mmd-accent alone). Remapping instead of renaming keeps the whole site coherent while sections are rebuilt one at a time. As each section is rewritten onto the new scale, its legacy references go away; when the last one does, delete the legacy group. Colors were read off the mobile mockups by eye, not sampled — expect to nudge them once exact values are confirmed. -------------------------------------------------------------------------- */ :root { /* ── Brand: oxblood ─────────────────────────────────────── */ /* CONFIRMED from Figma: --mmd-ox-800 #210000. The other three are derived from it and still need confirming against the design file. */ --mmd-ox-900: #100000; /* derived — inset cards over oxblood */ --mmd-ox-800: #210000; /* CONFIRMED — page shell, header, bottom bar */ --mmd-ox-700: #3A0A0A; /* derived — raised dark sections */ --mmd-ox-600: #5A1A1A; /* derived — hover / raised on dark */ /* ── Ink ────────────────────────────────────────────────── */ /* CONFIRMED from Figma: body text on oxblood is #D9D9D9, NOT white. Worth keeping — pure white on #210000 glares. Don't "fix" it to #fff. */ --mmd-ink-on-dark: #D9D9D9; /* Body text on cream/paper. Deliberately NOT --mmd-ox-800: that token is rgb(33,0,0) — a pure dark RED, not a neutral. It's right for large areas of colour, but at body size on white the anti-aliasing blends toward the red hue and the text reads brown-orange rather than black. Use this for running text on any light surface; keep --mmd-ox-800 for fills. */ --mmd-ink-on-paper: #2B2B2B; /* ── Brand: paper ───────────────────────────────────────── */ --mmd-cream: #E9E2D0; /* light section background */ --mmd-cream-200: #DED6C2; /* lead-form background, input wells */ --mmd-cream-400: #C9BFA6; /* hairlines on cream */ --mmd-paper-white: #FDFCF8; /* notebook / evidence surfaces */ /* ── Brand: accent ──────────────────────────────────────── */ /* --mmd-red vs --mmd-accent is a real choice, not a synonym. A city can set its own Primary Accent Color (Location Settings); main.js applies it as an inline --mmd-accent on , which beats this block by design. So: --mmd-accent → recolors per city. Use for anything a site may re-brand. --mmd-red → brand-fixed. Use where every city must look the same. Picking the wrong one is invisible on a default site and only shows up on a city that has set a color, so decide per rule. */ --mmd-red: #C0392B; /* unchanged — carries over from the current design */ --mmd-red-ink: #A02622; /* dashed connectors, rubber-stamp marks */ --mmd-red-deep: #940000; /* Private Events "How To" panel — a darker, bloodier red */ /* ── Type families ──────────────────────────────────────── */ /* Display — Playfair Display 400, Regular + Italic. Signed off by the designer. History worth keeping, because it explains the sizing: the Figma file is set in Warbler Display (DJR), a licensed Bulmer revival whose optical "Display" cut is drawn for 48pt — which is why the mockup's hero is 45.91px rather than a round number. Playfair is the agreed Google Fonts stand-in: same late-18th-century Baskerville-to-Bodoni territory, same ball terminals and bracketed serifs. It runs a touch heavier and wider than Warbler, so sizes lifted straight from Figma may need a nudge — trust the eye over the Figma number where they disagree. */ --mmd-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* Body — Quicksand, confirmed. Geometric sans with rounded terminals, which is what makes the design's soft/rounded feel hold together with the pill buttons and the big corner radii. CAVEAT: Quicksand ships NO italic. Ask for one and the browser fakes an oblique by shearing the upright, which looks wrong next to a real drawn italic. All italics in this design are the display serif's — keep it that way. If body italic is ever genuinely needed, that's a font decision, not a CSS one. Weights available: 300–700. */ --mmd-font-sans: 'Quicksand', 'Century Gothic', 'Trebuchet MS', Arial, sans-serif; /* Marker — Permanent Marker, used for the hand-drawn accents on the Private Events "How To" panel (the sticky-note lead and the numbered step titles). Single weight, no italic. Loaded in header.php. */ --mmd-font-marker: 'Permanent Marker', 'Comic Sans MS', cursive; /* ── Type scale (mobile-first; 1.25 major third) ────────── */ --mmd-text-xs: 0.75rem; /* 12px — legal, consent copy */ --mmd-text-sm: 0.875rem; /* 14px — captions */ --mmd-text-base: 1rem; /* 16px — body */ --mmd-text-lg: 1.25rem; /* 20px — lead paragraph */ --mmd-text-xl: 1.5rem; /* 24px — h3 */ --mmd-text-2xl: 1.875rem; /* 30px — h2 */ --mmd-text-3xl: 2.25rem; /* 36px — h1 */ --mmd-text-4xl: 2.75rem; /* 44px — hero */ /* ── Spacing (4px base) ─────────────────────────────────── */ --mmd-space-1: 0.25rem; --mmd-space-2: 0.5rem; --mmd-space-3: 0.75rem; --mmd-space-4: 1rem; --mmd-space-6: 1.5rem; --mmd-space-8: 2rem; --mmd-space-10: 2.5rem; --mmd-space-12: 3rem; --mmd-space-16: 4rem; --mmd-space-24: 6rem; /* ── Radius ─────────────────────────────────────────────── */ --mmd-radius-sm: 8px; /* inputs */ --mmd-radius-md: 16px; --mmd-radius-lg: 24px; /* cards, images */ --mmd-radius-xl: 32px; /* section shells */ --mmd-radius-pill: 999px; /* buttons, phone chip */ /* ── Layout ─────────────────────────────────────────────── */ /* Height of the fixed bottom CTA bar. A token because two things need to agree on it — the bar itself and the body padding that stops it covering the footer. Change it here or they drift apart. */ --mmd-bottom-bar-h: 56px; /* Horizontal page gutter. .mmd-main pads by this; full-bleed sections cancel it with a matching negative margin. Same reasoning as above — two rules must agree, so the number lives in one place. */ --mmd-gutter: var(--mmd-space-4); /* Vertical gap between stacked homepage sections. One knob for the whole page's rhythm — see the owl selector on .mmd-main. */ --mmd-section-gap: var(--mmd-space-8); /* Max width of the centred content column on desktop. The header and bottom bar cap their inner content to this too, so everything lines up. */ --mmd-content-max: 1200px; /* Max width of a contained copy block (About, feature rows, etc.). ONE knob so the homepage and Private Events size their copy columns identically — change here to reflow every contained section on both pages. */ --mmd-copy-max: 1000px; /* Width of the story/occasions notebook card — shared by the homepage story and the Private Events occasions notebook so the two match exactly. */ --mmd-notebook-max: 620px; /* ── Legacy — remapped onto the palette above ───────────── */ --mmd-dark: var(--mmd-ox-800); --mmd-dark-2: var(--mmd-ox-700); --mmd-gray: #5C4A4A; --mmd-light-gray: var(--mmd-cream-200); --mmd-paper: var(--mmd-cream); --mmd-white: #ffffff; --mmd-border: var(--mmd-cream-400); --mmd-accent: var(--mmd-red); --mmd-font-body: var(--mmd-font-sans); --mmd-font-heading: var(--mmd-font-display); --mmd-font-condensed: var(--mmd-font-sans); } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img { max-width: 100%; height: auto; display: block; } a { color: var(--mmd-accent); text-decoration: none; } a:hover { text-decoration: underline; } ul { list-style: none; } /* ── Base ───────────────────────────────────────────────────── */ body { font-family: var(--mmd-font-body); color: var(--mmd-dark); /* Cream, not oxblood: on desktop .mmd-main caps at 1200 and the body shows at the sides. Cream keeps those side strips light (matching the content) rather than framing the page in dark red. The header and bottom bar carry their own full-bleed oxblood, so the page still has its dark anchors top and bottom. */ background: var(--mmd-cream); font-size: 16px; line-height: 1.6; /* Clearance for the fixed bottom bar. Without this it sits on top of the footer — including the Site Map and phone links, which would be unclickable. env() adds the iOS home-indicator inset and resolves to 0 everywhere else. */ padding-bottom: calc( var(--mmd-bottom-bar-h) + env( safe-area-inset-bottom, 0px ) ); } /* The design sets headings at weight 400 and separates levels by size alone — Playfair at 700 is much heavier than the mockups. Size comes from the type scale; per-section overrides are being removed as sections are migrated. */ h1, h2, h3, h4, h5, h6 { font-family: var(--mmd-font-heading); line-height: 1.15; margin-bottom: var(--mmd-space-3); font-weight: 400; } h1 { font-size: var(--mmd-text-3xl); } h2 { font-size: var(--mmd-text-2xl); } h3 { font-size: var(--mmd-text-xl); } p { margin-bottom: var(--mmd-space-4); } /* ============================================================================= SITE WRAPPER ============================================================================= Was: a fixed ~1005px "sheet of paper on a dark table" — body-bg.webp behind everything, paper-body.png tiling down .mmd-main, both capped at 1005-1007px and centered. The 2026 design is the opposite structure: a full-bleed oxblood shell with content bands stacked inside it. .mmd-main is the shared
for all 18 page templates, so this rule is the whole site's canvas. Why cream and not transparent: transparent over oxblood is closer to the final design, but ~40 sections across inc/sections/ still set their text to #111, which is invisible on #210000. Cream keeps every not-yet-migrated page legible while sections opt into dark one at a time. Once the last section owns its own background, this can drop to transparent. ============================================================================= */ .mmd-site-top { background: var(--mmd-ox-800); width: 100%; position: sticky; top: 0; z-index: 100; } .mmd-main { background: var(--mmd-cream); width: 100%; position: relative; padding: var(--mmd-space-6) var(--mmd-gutter) var(--mmd-space-16); } /* One gap between every stacked section, set in one place. Sections used to each carry their own margin-bottom — some space-4, most none — so they sat flush. The owl selector spaces any two adjacent children (shortcode sections OR editor blocks) and skips the first, so the hero stays flush to the header and a newly-added section is spaced automatically instead of forgetting to. */ .mmd-main > * + * { margin-top: var(--mmd-section-gap); } /* ── Desktop: contain the content column ───────────────────────────────────── The whole theme is mobile-first and full-bleed, which is right on a phone but sprawls edge-to-edge on a monitor — short copy floats in a huge field and reading columns run too long. Capping .mmd-main and centring it turns the page into one deliberate composition. The oxblood body shows at the sides, which reads as content on a dark table — the same framing the original "paper on a dark table" design had, brought back deliberately rather than by accident. The header and bottom bar live OUTSIDE .mmd-main, so they stay full-bleed; their inner content is capped to the same column so everything lines up. -------------------------------------------------------------------------- */ @media ( min-width: 769px ) { .mmd-main { max-width: var(--mmd-content-max); margin-inline: auto; padding-left: var(--mmd-space-8); padding-right: var(--mmd-space-8); } /* Bottom bar bg is full-bleed; its inner content caps to the same column. The header is centred separately, via padding on .mmd-site-top, because it flexes two children onto one row (see the header desktop block). */ .mmd-bottom-bar__inner { max-width: var(--mmd-content-max); margin-inline: auto; } } /* ============================================================================= HERO — video + overlay heading ============================================================================= Markup comes from [mmd_home_hero] (inc/sections/home.php), which wraps the shared hero-video block rather than modifying it. The