/* ============================================================================= Marketing Magnet design tokens -- SYNCED COPY for the child theme. Source of truth: design/tokens.css (designer-owned). Copy this file again any time design/tokens.css changes; do not hand-edit values here without also updating the source, or the two will drift. Spec: plan/design-direction.md | Visual reference: design/style-tile.html Drop-in for this child theme, enqueued before base.css and every component stylesheet. Tokens only: no element or component rules here. THREE LAYERS 1. BRAND Brand-specific values. The ONLY block a future sister brand on this same house system replaces. Every value must meet the BRAND CONTRACT in layer 1. 2. SYSTEM Brand-neutral foundations shared by every brand on the house system: neutrals, status colors, type scale, spacing, radius, shadow, motion, layout, breakpoints. 3. ROLES Semantic names built from layers 1 and 2. Components consume roles (and layer 2), never layer 1 directly. Roles are remapped per surface by the .mm-surface-* classes at the end of the file. NAMESPACE --mm- is the house-system prefix, shared across every brand on it. A sister brand keeps the prefix and swaps layer 1. CONTRAST Every permitted text/background pair is listed in layer 3 with its WCAG 2.x contrast ratio (relative-luminance formula). All pass AA for normal-size text (4.5:1). Non-text UI needs 3:1 (SC 1.4.11). ========================================================================== */ /* ----------------------------------------------------------------------------- LAYER 1: BRAND (Marketing Magnet) BRAND CONTRACT: minimums any replacement brand block must meet (WCAG 2.x contrast ratios; Marketing Magnet's values in parentheses) primary white text on it ................ >= 4.5:1 (5.89) as text on --mm-white ........... >= 4.5:1 (5.89) as text on --mm-paper ........... >= 4.5:1 (5.40) as a fill against --mm-dark ..... >= 3:1 (3.13, button edge) primary-deep as text on --mm-white ........... >= 7:1 (8.21) white text on it ................ >= 4.5:1 (8.21) primary-on-dark as text on --mm-dark ............ >= 4.5:1 (5.63) as text on --mm-dark-raised ..... >= 4.5:1 (4.86) primary-tint --mm-ink text on it ............. >= 4.5:1 (15.84) primary-deep text on it ......... >= 4.5:1 (7.06) secondary decorative only on light surfaces unless >= 4.5:1 there (2.85 on white: decorative only on light). May carry meta text on dark only if >= 4.5:1 on --mm-dark AND --mm-dark-raised (6.47 and 5.58: allowed). font-display stack must include a free, self-hostable fallback and end in a generic family. -------------------------------------------------------------------------- */ :root { --mm-brand-primary: #CC0000; /* logo red: CTA fill, link underline, the one highlight */ --mm-brand-primary-deep: #A30000; /* hover and pressed on light surfaces, error text */ --mm-brand-primary-on-dark: #FF4D4D; /* red TEXT, links and highlights on dark surfaces only */ --mm-brand-primary-tint: #FBEAEA; /* error field wash */ --mm-brand-secondary: #999999; /* logo gray: pole tips, pole-rule tip; meta text on dark only */ --mm-brand-font-display: "futura-pt", "Jost", "Futura", "Century Gothic", "Avenir Next", sans-serif; /* futura-pt = commercial webfont-kit CSS name; Jost = free OFL fallback */ --mm-brand-weight-display: 700; /* Futura PT Heavy; confirm the numeric weight in the commercial kit */ --mm-brand-logo-ratio: 5.699; /* horizontal lockup width / height (viewBox 5289 x 928) */ } /* ----------------------------------------------------------------------------- LAYER 2: SYSTEM (brand-neutral; shared by every brand on the house system) -------------------------------------------------------------------------- */ :root { /* Neutrals */ --mm-white: #FFFFFF; --mm-paper: #F6F5F2; /* alternate section background (a hair warm) */ --mm-line: #E4E3DF; /* hairlines on light: decorative, never a UI boundary */ --mm-gray-500: #767676; /* form borders: 4.54 vs white, 4.17 vs paper, 4.06 vs dark (>= 3:1) */ --mm-gray-600: #5C5C5C; /* muted text: captions, eyebrows, hints, meta */ --mm-gray-800: #262626; /* running text (softer than ink for long reading) */ --mm-ink: #141414; /* headings, labels, input text */ --mm-dark: #141414; /* dark sections and footer */ --mm-dark-raised: #222222; /* cards on dark */ --mm-dark-line: #3A3A3A; /* hairlines on dark: decorative */ /* Status (shared; brand red covers error through layer 1) */ --mm-success: #17693A; --mm-success-tint: #EAF4EC; /* Type families (the display family lives in layer 1) */ --mm-font-body: "Source Serif 4", "Source Serif Pro", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; --mm-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Weights */ --mm-weight-regular: 400; --mm-weight-medium: 500; /* nav, eyebrows, tags */ --mm-weight-semibold: 600; /* H3, H4, buttons, labels, body emphasis */ --mm-weight-bold: 700; /* display, H1, H2, numerals */ /* Fluid type scale: min at a 390px viewport, max at 1440px (rem + vw, so zoom works). Sizes live under --mm-font-size-*; text COLORS are the --mm-text* roles in layer 3. Keep the two namespaces apart: a shared name silently breaks font-size. */ --mm-font-size-display: clamp(2.625rem, 1.929rem + 2.857vw, 4.5rem); /* 42 -> 72 home hero H1 only */ --mm-font-size-h1: clamp(2.5rem, 2.036rem + 1.905vw, 3.75rem); /* 40 -> 60 interior page H1 */ --mm-font-size-h2: clamp(1.875rem, 1.55rem + 1.333vw, 2.75rem); /* 30 -> 44 section headings */ --mm-font-size-h3: clamp(1.4375rem, 1.275rem + 0.667vw, 1.875rem); /* 23 -> 30 card and sub-section titles */ --mm-font-size-h4: clamp(1.1875rem, 1.118rem + 0.286vw, 1.375rem); /* 19 -> 22 minor headings, rule titles */ --mm-font-size-stat: clamp(2.75rem, 2.1rem + 2.667vw, 4.5rem); /* 44 -> 72 proof numbers */ --mm-font-size-quote: clamp(1.3125rem, 1.196rem + 0.476vw, 1.625rem); /* 21 -> 26 testimonials */ --mm-font-size-lead: clamp(1.1875rem, 1.118rem + 0.286vw, 1.375rem); /* 19 -> 22 intro paragraphs */ --mm-font-size-body: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem); /* 17 -> 19 running text */ --mm-font-size-ui: 1.0625rem; /* 17 buttons, nav, form input text (>= 16px stops iOS zoom) */ --mm-font-size-sm: 0.9375rem; /* 15 captions, hints, card meta */ --mm-font-size-xs: 0.875rem; /* 14 eyebrows and tags (uppercase); the site minimum */ /* Line height */ --mm-leading-display: 1.05; --mm-leading-heading: 1.15; /* H1, H2 */ --mm-leading-subhead: 1.25; /* H3, H4 */ --mm-leading-lead: 1.5; --mm-leading-body: 1.6; --mm-leading-ui: 1.3; /* Tracking */ --mm-tracking-display: -0.015em; --mm-tracking-heading: -0.01em; --mm-tracking-ui: 0.01em; --mm-tracking-eyebrow: 0.16em; /* uppercase only; echoes the wide-tracked MARKETING line */ /* Measure (line length) */ --mm-measure: 68ch; /* running text: about 650px at 19px */ --mm-measure-lead: 58ch; --mm-measure-display: 18ch; --mm-measure-heading: 24ch; /* Spacing: 4px base */ --mm-space-1: 0.25rem; /* 4 */ --mm-space-2: 0.5rem; /* 8 */ --mm-space-3: 0.75rem; /* 12 */ --mm-space-4: 1rem; /* 16 */ --mm-space-5: 1.5rem; /* 24 */ --mm-space-6: 2rem; /* 32 */ --mm-space-7: 3rem; /* 48 */ --mm-space-8: 4rem; /* 64 */ --mm-space-9: 6rem; /* 96 */ --mm-space-10: 8rem; /* 128 */ /* Rhythm and layout (the parent theme's rows: enter these as px, never %, which resolves against container WIDTH) */ --mm-section-y: clamp(3.5rem, 2.2rem + 5.333vw, 7rem); /* 56 -> 112 standard section padding */ --mm-section-y-half: clamp(2rem, 1.443rem + 2.286vw, 3.5rem); /* 32 -> 56 continuation seams */ --mm-gutter: clamp(1.25rem, 0.6rem + 2.667vw, 3rem); /* 20 -> 48 page side padding */ --mm-grid-gap: clamp(1.5rem, 1.2rem + 1vw, 2rem); /* 24 -> 32 */ --mm-card-pad: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); /* 24 -> 32 */ --mm-container-max: 75rem; /* 1200 content width */ --mm-container-narrow: 46rem; /* 736 reading column */ --mm-header-h: 4rem; /* 64 mobile header */ --mm-header-h-lg: 5rem; /* 80 desktop header */ --mm-logo-h: 2rem; /* 32 mobile logo (the horizontal lockup minimum) */ --mm-logo-h-lg: 2.5rem; /* 40 desktop logo */ --mm-target-min: 2.75rem; /* 44 minimum touch target */ --mm-control-h: 3rem; /* 48 buttons and inputs */ /* Radius */ --mm-radius-xs: 2px; /* tags */ --mm-radius-sm: 4px; /* buttons, inputs */ --mm-radius-md: 8px; /* cards, media */ --mm-radius-lg: 16px; /* large panels */ --mm-radius-round: 999px; /* avatars, numeral chips */ /* Shadow (ink-tinted, low alpha; used for lift on hover, not decoration) */ --mm-shadow-1: 0 1px 2px rgba(20, 20, 20, 0.06), 0 1px 1px rgba(20, 20, 20, 0.04); --mm-shadow-2: 0 6px 16px -4px rgba(20, 20, 20, 0.12), 0 2px 4px -2px rgba(20, 20, 20, 0.08); --mm-shadow-3: 0 20px 44px -16px rgba(20, 20, 20, 0.28); /* Motion (all set to 0ms under prefers-reduced-motion, below) */ --mm-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --mm-dur-fast: 120ms; --mm-dur: 200ms; --mm-dur-slow: 320ms; /* Focus */ --mm-focus-width: 3px; --mm-focus-offset: 3px; /* Stacking */ --mm-z-header: 100; --mm-z-overlay: 1000; /* Breakpoints: reference values for JS and documentation only. Custom properties cannot be used inside @media conditions; write the px literal. 690 = the parent theme's phone/tablet switch | 768 = the builder's columns stack below this 1000 = the parent theme's desktop header and nav | 1300 = wide */ --mm-bp-sm: 480px; --mm-bp-md: 690px; --mm-bp-tablet: 768px; --mm-bp-lg: 1000px; --mm-bp-xl: 1300px; } /* ----------------------------------------------------------------------------- LAYER 3: ROLES (default = light surface, --mm-white) PERMITTED TEXT PAIRS (text on background: WCAG ratio, level) White #FFFFFF ink #141414 .......................... 18.42 AAA body #262626 ......................... 15.13 AAA muted #5C5C5C ........................ 6.69 AA primary #CC0000 ...................... 5.89 AA primary-deep #A30000 ................. 8.21 AAA success #17693A ...................... 6.73 AA Paper #F6F5F2 ink 16.90 AAA | body 13.88 AAA | muted 6.13 AA | primary 5.40 AA primary-deep 7.53 AAA | success 6.18 AA Dark #141414 white 18.42 AAA | paper (body on dark) 16.90 AAA secondary #999999 6.47 AA | primary-on-dark #FF4D4D 5.63 AA Dark raised #222222 (cards on dark) white 15.91 AAA | paper 14.59 AAA | secondary 5.58 AA | primary-on-dark 4.86 AA Primary #CC0000 (primary button, CTA band) white 5.89 AA Primary deep #A30000 (primary button hover on light) white 8.21 AAA Primary tint #FBEAEA (error field) ink 15.84 AAA | primary-deep 7.06 AAA Success tint #EAF4EC ink 16.36 AAA | success 5.98 AA Inverted button on the red band ink on white 18.42 AAA | white on ink (hover) 18.42 AAA NON-TEXT UI PAIRS (SC 1.4.11 needs 3:1) field border #767676 vs white 4.54 | vs paper 4.17 | vs dark 4.06 focus ring #CC0000 vs white 5.89 | vs paper 5.40 focus ring #FFFFFF vs dark 18.42 | vs red band 5.89 red button fill vs dark 3.13 | white button vs red band 5.89 ink button fill vs red band 3.13 | error border #CC0000 vs white 5.89 NEVER AS TEXT (fails AA) #999999 on white 2.85, on paper 2.61 (decorative only) #CC0000 on dark 3.13 (fills only; red text on dark is #FF4D4D) #141414 on #CC0000 3.13 (text on the red band is white) #767676 on paper 4.17 (borders only) #A30000 vs dark 2.24 (so primary buttons on dark do not darken on hover) -------------------------------------------------------------------------- */ :root { /* Type roles */ --mm-font-display: var(--mm-brand-font-display); --mm-font-ui: var(--mm-brand-font-display); /* nav, buttons, labels, captions */ --mm-weight-display: var(--mm-brand-weight-display); /* Surfaces */ --mm-bg: var(--mm-white); --mm-bg-alt: var(--mm-paper); --mm-bg-card: var(--mm-white); --mm-bg-inverse: var(--mm-dark); --mm-bg-brand: var(--mm-brand-primary); /* Text */ --mm-text: var(--mm-ink); /* headings, labels */ --mm-text-body: var(--mm-gray-800); /* running text */ --mm-text-muted: var(--mm-gray-600); /* captions, eyebrows, meta */ /* Links: ink text, red underline; hover turns the text red */ --mm-link: var(--mm-ink); --mm-link-underline: var(--mm-brand-primary); --mm-link-hover: var(--mm-brand-primary); /* Primary action */ --mm-action-bg: var(--mm-brand-primary); --mm-action-bg-hover: var(--mm-brand-primary-deep); --mm-action-text: var(--mm-white); --mm-action-text-hover: var(--mm-white); /* Secondary action (outline button) */ --mm-action-alt-border: var(--mm-ink); --mm-action-alt-text: var(--mm-ink); --mm-action-alt-bg-hover: var(--mm-ink); --mm-action-alt-text-hover: var(--mm-white); /* Accents */ --mm-accent: var(--mm-brand-primary); /* numerals, quote marks, list markers, arrows */ --mm-highlight: var(--mm-brand-primary); /* the ONE number or result to notice per view */ --mm-eyebrow: var(--mm-gray-600); --mm-rule: var(--mm-brand-primary); /* pole rule body (76%) */ --mm-rule-tip: var(--mm-brand-secondary); /* pole rule tip (24%, as on the mark) */ /* Borders and fields */ --mm-border: var(--mm-line); --mm-border-strong: var(--mm-ink); --mm-field-border: var(--mm-gray-500); --mm-field-bg: var(--mm-white); --mm-field-text: var(--mm-ink); /* Focus */ --mm-focus: var(--mm-brand-primary); /* Status */ --mm-error: var(--mm-brand-primary-deep); --mm-error-border: var(--mm-brand-primary); --mm-error-bg: var(--mm-brand-primary-tint); --mm-success-text: var(--mm-success); --mm-success-bg: var(--mm-success-tint); /* Selection: white on #CC0000, 5.89 */ --mm-selection-bg: var(--mm-brand-primary); --mm-selection-text: var(--mm-white); } /* ----------------------------------------------------------------------------- SURFACE REMAPS Put the class on the element that owns the background. In the parent theme, full-width-background rows drop custom row classes, so put the class on the COLUMN and set the row background in the row settings. This site's own shortcode packages avoid this entirely: tool-showcase and cta-band render their OWN wrapping surface div with the class already on it, so they never depend on a builder row/column setting to get their dark/brand background. -------------------------------------------------------------------------- */ .mm-surface-paper { --mm-bg: var(--mm-paper); --mm-bg-alt: var(--mm-white); /* cards stay white; every light-surface role already passes on paper */ } .mm-surface-dark { --mm-bg: var(--mm-dark); --mm-bg-alt: var(--mm-dark-raised); --mm-bg-card: var(--mm-dark-raised); --mm-text: var(--mm-white); /* 18.42 on dark, 15.91 on raised */ --mm-text-body: var(--mm-paper); /* 16.90 on dark, 14.59 on raised */ --mm-text-muted: var(--mm-brand-secondary); /* 6.47 on dark, 5.58 on raised */ --mm-link: var(--mm-white); --mm-link-underline: var(--mm-brand-primary-on-dark); --mm-link-hover: var(--mm-brand-primary-on-dark); /* 5.63 on dark, 4.86 on raised */ --mm-action-bg-hover: var(--mm-brand-primary); /* no darkening on dark: hover cue is the label underline */ --mm-action-alt-border: var(--mm-white); --mm-action-alt-text: var(--mm-white); --mm-action-alt-bg-hover: var(--mm-white); --mm-action-alt-text-hover: var(--mm-ink); --mm-accent: var(--mm-brand-primary-on-dark); --mm-highlight: var(--mm-brand-primary-on-dark); --mm-eyebrow: var(--mm-brand-secondary); --mm-border: var(--mm-dark-line); --mm-border-strong: var(--mm-white); --mm-focus: var(--mm-white); /* fields stay white with ink text; #767676 border is 4.06 vs dark */ } .mm-surface-brand { /* the red CTA band: once per page */ --mm-bg: var(--mm-brand-primary); --mm-text: var(--mm-white); /* 5.89 */ --mm-text-body: var(--mm-white); --mm-text-muted: var(--mm-white); /* no muted text on red */ --mm-link: var(--mm-white); --mm-link-underline: var(--mm-white); --mm-link-hover: var(--mm-white); --mm-action-bg: var(--mm-white); /* button edge 5.89 vs red */ --mm-action-bg-hover: var(--mm-ink); /* edge 3.13 vs red */ --mm-action-text: var(--mm-ink); /* 18.42 */ --mm-action-text-hover: var(--mm-white); /* 18.42 */ --mm-action-alt-border: var(--mm-white); --mm-action-alt-text: var(--mm-white); --mm-action-alt-bg-hover: var(--mm-white); --mm-action-alt-text-hover: var(--mm-ink); --mm-accent: var(--mm-white); --mm-highlight: var(--mm-white); --mm-eyebrow: var(--mm-white); --mm-rule: var(--mm-white); --mm-rule-tip: var(--mm-white); --mm-border: rgba(255, 255, 255, 0.35); --mm-border-strong: var(--mm-white); --mm-focus: var(--mm-white); /* a red ring would vanish on red */ --mm-selection-bg: var(--mm-white); --mm-selection-text: var(--mm-ink); } /* ----------------------------------------------------------------------------- REDUCED MOTION: zero every duration token. Component CSS must also drop transforms (lift, arrow nudge) under this query. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --mm-dur-fast: 0ms; --mm-dur: 0ms; --mm-dur-slow: 0ms; } }