/* ============================================================================= Marketing Magnet child theme -- BASE CSS Foundational, cross-component rules: reset, surfaces/containers/rhythm, type utilities, buttons/links, header+nav, hero layout, placeholders, splits, breadcrumbs, forms, the contact aside, the footer, and the shared sign-off device (used by both the CTA band and the founder block). Ported from the designer's mockup "SHARED MOCKUP CSS" block (design/mockups/*.html), minus the mockup-only annotation styles (flags, pending underlines) which never ship, and minus anything that is ONE component's own visual identity -- that lives in the component's own package stylesheet instead (see README.md for which package owns which class). Enqueued after tokens.css, before every component stylesheet. Depends on the --mm-* custom properties in tokens.css; carries no color/size literals of its own except where a value genuinely isn't tokenized upstream. ========================================================================== */ /* ---- 1. Base ---- Scoped under .main-content (the parent theme's real main-content wrapper class -- confirmed by reading page.php:
is what actually ships; "#main" only ever existed in the design mockups' own hand-authored HTML, never in the real theme) plus .mm-header/.mm-footer, the two areas of the parent theme's own chrome this build intentionally restyles. Scoping here means these rules touch only this site's own content and the header/footer this theme overrides -- never a plugin's admin screens, an unrelated widget area, or the parent theme's off-canvas/slide-out UI. box- sizing is the one rule kept universal: it is a widely-assumed baseline (the parent theme's own CSS and the page builder both build on it too) with no visible effect of its own, so scoping it would add selector weight for no behavior change. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; color-scheme: light; } body { margin: 0; } .main-content, .mm-header, .mm-footer { background: var(--mm-bg); color: var(--mm-text-body); font-family: var(--mm-font-body); font-size: var(--mm-font-size-body); line-height: var(--mm-leading-body); overflow-wrap: break-word; } .main-content img, .main-content svg, .mm-header img, .mm-header svg, .mm-footer img, .mm-footer svg { display: block; max-width: 100%; } .main-content img, .mm-header img, .mm-footer img { height: auto; } .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content p, .main-content ul, .main-content ol, .main-content figure, .main-content blockquote, .mm-header h1, .mm-header h2, .mm-header h3, .mm-header h4, .mm-footer h1, .mm-footer h2, .mm-footer h3, .mm-footer h4, .mm-footer p, .mm-footer ul { margin: 0; } .mm-form fieldset { min-width: 0; padding: 0; border: 0; } .mm-form legend { padding: 0; } .main-content h1, .main-content h2, .main-content h3, .main-content h4, .mm-header h1, .mm-header h2, .mm-header h3, .mm-header h4, .mm-footer h1, .mm-footer h2, .mm-footer h3, .mm-footer h4 { font-family: var(--mm-font-display); font-weight: var(--mm-weight-display); color: var(--mm-text); text-wrap: balance; } .main-content strong, .mm-header strong, .mm-footer strong { font-weight: var(--mm-weight-semibold); } .main-content ::selection, .mm-header ::selection, .mm-footer ::selection { background: var(--mm-selection-bg); color: var(--mm-selection-text); } .main-content :where(a, button, input, select, textarea, summary):focus-visible, .mm-header :where(a, button, input, select, textarea, summary):focus-visible, .mm-footer :where(a, button, input, select, textarea, summary):focus-visible { outline: var(--mm-focus-width) solid var(--mm-focus); outline-offset: var(--mm-focus-offset); } .mm-vh { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } .mm-skip { position: absolute; left: var(--mm-space-4); top: -10rem; z-index: var(--mm-z-overlay); padding: var(--mm-space-3) var(--mm-space-4); border-radius: var(--mm-radius-sm); background: var(--mm-ink); color: var(--mm-white); font: 600 var(--mm-font-size-sm)/1 var(--mm-font-ui); text-decoration: none; } .mm-skip:focus { top: var(--mm-space-4); } /* ---- 2. Surfaces, containers, rhythm ---- */ /* Full-bleed (design-direction.md): the standard break-out-of-container trick, so the color spans the true viewport edge to edge regardless of how deep in the real page's column/row nesting the element carrying this class sits (row-level for .mm-surface-paper, applied via the el_class-dropped-on-rows workaround; a shortcode's own wrapper div for .mm-surface-dark/.mm-surface-brand, nested inside a normal builder column) -- confirmed by a fresh render that all three were only ever container-width before this, not full-bleed as the design calls for. Content still needs its own max-width + centering + inset from the new full-bleed edge, but NOT via a per-package inner wrapper class (the first attempt at this: cta-band's .mm-cta__inner, tool-showcase's .mm-split each carried their own copy) -- a row-level paper section has no such wrapper of its own to put it on (it's meant to work from the section class alone, on whatever content an editor puts inside), and relying on the builder's own nested .container turned out not to hold: a real render showed a paper section's content flush against the edge despite that assumption. Padding-inline computed with max(), directly on the surface itself, needs no inner wrapper at all and so works identically for every case: at most var(--mm-gutter) of visible page beyond var(--mm-container-max) of content is unclaimed on each side (the same width .mm-container centers content to elsewhere on the page), and never less than var(--mm-gutter) even on a narrow screen where that half-difference would go negative. */ .mm-surface-paper, .mm-surface-dark, .mm-surface-brand { background: var(--mm-bg); color: var(--mm-text-body); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-inline: max(var(--mm-gutter), calc((100vw - var(--mm-container-max)) / 2)); } .mm-surface-dark { color-scheme: dark; } .mm-container { width: 100%; max-width: calc(var(--mm-container-max) + (2 * var(--mm-gutter))); margin-inline: auto; padding-inline: var(--mm-gutter); } .mm-section { padding-block: var(--mm-section-y); background: var(--mm-bg); color: var(--mm-text-body); } .mm-section--seam { padding-top: var(--mm-section-y-half); } /* Builder rows: the parent theme's row template prints an inline style="padding-top: 0px; padding-bottom: 0px;" on every row, which beat the two rules above, so no builder page ever got the design's section rhythm. !important is the only way past an inline style. Rows whose content pads itself (the dark tools band, the CTA band) keep zero, or they would gain a second band of padding (white gaps around the dark band). Browsers without :has() skip these rules and render as before. */ .wpb_row.mm-section:not(:has(.mmc-tools, .mmc-cta-band)) { padding-top: var(--mm-section-y) !important; padding-bottom: var(--mm-section-y) !important; } .wpb_row.mm-section.mm-section--seam:not(:has(.mmc-tools, .mmc-cta-band)), .wpb_row.mm-section.mm-hero:not(:has(.mmc-tools, .mmc-cta-band)) { padding-top: var(--mm-section-y-half) !important; } /* Sections meet edge to edge: the builder's default row margin (about 28px) and the page wrapper's 40px bottom padding showed as white strips between colored bands and above the footer. Section padding above supplies all the spacing. */ .wpb_row.mm-section, .wpb_row.mm-surface-brand, .wpb_row.mm-surface-paper, .wpb_row.mm-surface-dark { margin-bottom: 0 !important; } .container-wrap:has(.mm-section, .mm-surface-brand) { padding-bottom: 0 !important; } /* 404 page (functions.php, mmc_404_content). */ .main-content .mm-404 { display: grid; gap: var(--mm-space-5); justify-items: start; padding-block: var(--mm-section-y-half) var(--mm-section-y); } .main-content .mm-404__links { font: 500 var(--mm-font-size-ui)/1.4 var(--mm-font-ui); } .main-content .mm-404__links a { color: var(--mm-link); text-decoration: underline; text-decoration-color: var(--mm-link-underline); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .mm-intro { display: grid; gap: var(--mm-space-4); margin-bottom: var(--mm-space-7); } .mm-after { margin-top: var(--mm-space-6); } /* ---- 3. Type ---- */ .mm-display, .mm-h1, .mm-h2, .mm-h3, .mm-h4 { font-family: var(--mm-font-display); color: var(--mm-text); } .mm-display { font-weight: var(--mm-weight-display); font-size: var(--mm-font-size-display); line-height: var(--mm-leading-display); letter-spacing: var(--mm-tracking-display); } .mm-display .mm-line { display: block; } .mm-h1 { font-weight: var(--mm-weight-display); font-size: var(--mm-font-size-h1); line-height: var(--mm-leading-heading); letter-spacing: var(--mm-tracking-heading); max-width: 22ch; } .mm-h2 { font-weight: var(--mm-weight-display); font-size: var(--mm-font-size-h2); line-height: var(--mm-leading-heading); letter-spacing: var(--mm-tracking-heading); max-width: var(--mm-measure-heading); } .mm-h2--sm { font-weight: var(--mm-weight-semibold); font-size: var(--mm-font-size-h4); line-height: var(--mm-leading-subhead); letter-spacing: 0; } .mm-h3 { font-weight: var(--mm-weight-semibold); font-size: var(--mm-font-size-h3); line-height: var(--mm-leading-subhead); } .mm-h4 { font-weight: var(--mm-weight-semibold); font-size: var(--mm-font-size-h4); line-height: var(--mm-leading-subhead); } .mm-lead { font-size: var(--mm-font-size-lead); line-height: var(--mm-leading-lead); max-width: var(--mm-measure-lead); color: var(--mm-text-body); } .mm-kicker { font: 500 var(--mm-font-size-xs)/1.3 var(--mm-font-ui); letter-spacing: var(--mm-tracking-eyebrow); text-transform: uppercase; color: var(--mm-eyebrow); } .mm-eyebrow { display: flex; align-items: flex-start; gap: var(--mm-space-3); font: 500 var(--mm-font-size-xs)/1.3 var(--mm-font-ui); letter-spacing: var(--mm-tracking-eyebrow); text-transform: uppercase; color: var(--mm-eyebrow); } .mm-eyebrow::before { content: ""; flex: none; width: 1.75rem; height: 0.3125rem; margin-top: 0.47em; background: linear-gradient(90deg, var(--mm-rule) 0 76%, var(--mm-rule-tip) 76% 100%); } /* the pole rule: stays on line 1 when a long eyebrow wraps */ .mm-small { font: 400 var(--mm-font-size-sm)/1.5 var(--mm-font-ui); color: var(--mm-text-muted); } .mm-source { font: 400 var(--mm-font-size-sm)/1.5 var(--mm-font-ui); color: var(--mm-text-muted); } /* P3: a visible source line for a cited figure (principles-list) */ .mm-source a { color: var(--mm-link); text-decoration: underline; text-decoration-color: var(--mm-link-underline); text-underline-offset: 0.2em; } .mm-source a:hover { color: var(--mm-link-hover); } .mm-letter { max-width: var(--mm-container-narrow); } .mm-letter > .mm-h2 { margin-bottom: var(--mm-space-5); } .mm-prose { max-width: var(--mm-measure); font-size: var(--mm-font-size-body); line-height: var(--mm-leading-body); color: var(--mm-text-body); } .mm-prose > * + * { margin-top: 1.1em; } .mm-prose a { color: var(--mm-link); text-decoration: underline; text-decoration-color: var(--mm-link-underline); text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: color var(--mm-dur) var(--mm-ease); } .mm-prose a:hover { color: var(--mm-link-hover); } .mm-prose strong { color: var(--mm-text); } /* Paragraph spacing inside builder pages comes from the parent theme's padding under each

; a list has none, so the paragraph after a list needs its own top margin (the Services hub). */ .main-content .mm-prose > ul + p, .main-content .mm-prose > ol + p { margin-top: 1.1em; } /* Data tables in long-form pages (the privacy policy's table): cells wrap long words, and the wrapper scrolls sideways on its own if a table still can't fit a phone screen. */ .mm-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .mm-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--mm-font-size-sm); line-height: 1.45; } .mm-table th, .mm-table td { padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mm-border); overflow-wrap: break-word; } .mm-table th { font-weight: 600; color: var(--mm-text); } .mm-emphasis { font-family: var(--mm-font-display); font-weight: var(--mm-weight-semibold); font-size: var(--mm-font-size-h4); line-height: 1.35; color: var(--mm-text); } /* ---- 4. Buttons and links ---- */ .mm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-space-4) var(--mm-space-6); } /* Scoped under .main-content/.mm-header/.mm-footer (not just bare .mm-btn/.mm-link-arrow): the parent theme's own base stylesheet sets a site-wide "a{color:#3555ff}" (a bare tag selector, the lowest possible specificity), which a bare class selector already beats on specificity alone -- this extra scoping is belt-and-suspenders so a brand link/button can never lose a cascade fight inside this site's own content, without reaching for !important. */ .main-content .mm-btn, .mm-header .mm-btn, .mm-footer .mm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: var(--mm-control-h); max-width: 100%; padding: 0.75rem 1.5rem; border: 2px solid transparent; border-radius: var(--mm-radius-sm); font: 600 var(--mm-font-size-ui)/1.2 var(--mm-font-ui); letter-spacing: var(--mm-tracking-ui); text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease); } .main-content .mm-btn--primary, .mm-header .mm-btn--primary, .mm-footer .mm-btn--primary { background: var(--mm-action-bg); color: var(--mm-action-text); border-color: var(--mm-action-bg); } .main-content .mm-btn--primary:hover, .mm-header .mm-btn--primary:hover, .mm-footer .mm-btn--primary:hover { background: var(--mm-action-bg-hover); border-color: var(--mm-action-bg-hover); color: var(--mm-action-text-hover); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .main-content .mm-btn--secondary, .mm-header .mm-btn--secondary, .mm-footer .mm-btn--secondary { background: transparent; color: var(--mm-action-alt-text); border-color: var(--mm-action-alt-border); } .main-content .mm-btn--secondary:hover, .mm-header .mm-btn--secondary:hover, .mm-footer .mm-btn--secondary:hover { background: var(--mm-action-alt-bg-hover); border-color: var(--mm-action-alt-bg-hover); color: var(--mm-action-alt-text-hover); } .mm-btn--sm { min-height: var(--mm-target-min); padding: 0.5rem 1.125rem; font-size: var(--mm-font-size-sm); } .mm-btn[aria-disabled="true"] { cursor: progress; opacity: 0.85; text-decoration: none; } .main-content .mm-link-arrow, .mm-header .mm-link-arrow, .mm-footer .mm-link-arrow { display: inline-flex; align-items: center; gap: 0.4em; min-height: var(--mm-target-min); font: 600 var(--mm-font-size-ui)/1.2 var(--mm-font-ui); color: var(--mm-link); text-decoration: underline; text-decoration-color: var(--mm-link-underline); text-decoration-thickness: 2px; text-underline-offset: 0.25em; transition: color var(--mm-dur) var(--mm-ease); } .main-content .mm-link-arrow:hover, .mm-header .mm-link-arrow:hover, .mm-footer .mm-link-arrow:hover { color: var(--mm-link-hover); } .mm-link-arrow span { display: inline-block; color: var(--mm-accent); transition: transform var(--mm-dur) var(--mm-ease); } .mm-link-arrow:hover span { transform: translateX(3px); } /* A REAL (ships to production) small "pending" tag for gated copy -- distinct from the design mockups' own dev-only annotation classes (.mm-pending/.mm-flag, documented there as "never ships"). Used in place of writing a gated placeholder as ordinary sentence prose, so nothing awaiting Den's OK, a signed release, or a client's written OK can be mistaken for approved copy on a rendered page. Remove the wrapping once the real content replaces it. */ .mmc-pending { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.125rem 0.5rem; border: 1px solid #E0B45C; border-radius: var(--mm-radius-xs); background: #FFF1D6; color: #7A4B00; font: 600 var(--mm-font-size-xs)/1.3 var(--mm-font-ui); letter-spacing: 0.02em; text-transform: uppercase; vertical-align: 0.05em; } /* Same pending signal (the amber border/background above), for when a WHOLE sentence -- not one atomic fact inside it -- needs Den's OK: the tiny uppercase badge look above reads fine for "N YEARS" but would be shouty and illegible wrapped around a full sentence. Inline (flows with the surrounding paragraph text, wraps normally across lines), normal case, body text size. */ /* Applied together with .mmc-pending above (same element, both classes) for the shared amber signal -- so this must explicitly reset every property that combination would otherwise inherit from it (display, gap, uppercase, tiny font-size, letter-spacing), not just add new ones, or the "whole sentence" case renders as the tiny uppercase badge treatment too. */ .mmc-pending--sentence { display: inline; gap: normal; padding: 0.05em 0.35em; border: 1px solid #E0B45C; border-radius: var(--mm-radius-xs); background: #FFF1D6; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; vertical-align: baseline; } /* ---- 5. Header (styles the parent theme's own header markup; see functions.php for the theme-option/menu wiring). If a future pass swaps in a fully custom header markup instead of the parent theme's native one, keep these selectors' INTENT (sticky white bar, logo height steps, red underline on the current nav item) rather than the exact class names. The identity bar this section used to style is gone (P7): "Marketing Magnet" now leads the hero eyebrow as live text above the fold instead. ---- */ .mm-header { position: sticky; top: 0; z-index: var(--mm-z-header); background: var(--mm-white); border-bottom: 1px solid var(--mm-line); } .mm-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--mm-space-5); min-height: var(--mm-header-h); } .mm-header__logo { display: block; flex: none; line-height: 0; } .mm-header__logo img { height: var(--mm-logo-h); width: auto; } .mm-nav { display: none; } .mm-header .mm-header__cta { display: none; } .mm-mnav { flex: none; } .mm-mnav > summary { display: inline-flex; align-items: center; justify-content: center; min-height: var(--mm-target-min); min-width: var(--mm-target-min); padding: 0 var(--mm-space-4); border: 2px solid var(--mm-ink); border-radius: var(--mm-radius-sm); list-style: none; color: var(--mm-ink); font: 600 var(--mm-font-size-sm)/1 var(--mm-font-ui); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .mm-mnav > summary::-webkit-details-marker { display: none; } .mm-mnav[open] > summary { background: var(--mm-ink); color: var(--mm-white); } .mm-mnav__panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--mm-header-h)); overflow-y: auto; background: var(--mm-white); border-bottom: 1px solid var(--mm-line); box-shadow: var(--mm-shadow-2); } .mm-mnav__panel ul { list-style: none; } .mm-mnav__panel li > a { display: flex; align-items: center; min-height: 3rem; padding: 0.5rem var(--mm-gutter); border-top: 1px solid var(--mm-line); color: var(--mm-ink); font: 500 var(--mm-font-size-ui)/1.25 var(--mm-font-ui); text-decoration: none; } .mm-mnav__panel .mm-mnav__sub li > a { padding-left: calc(var(--mm-gutter) + 1rem); color: var(--mm-gray-800); font-size: var(--mm-font-size-sm); } .mm-mnav__panel li > a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--mm-brand-primary); } .mm-mnav__cta { padding: var(--mm-space-4) var(--mm-gutter) var(--mm-space-5); border-top: 1px solid var(--mm-line); } .mm-mnav__cta .mm-btn { width: 100%; } @media (min-width: 1000px) { .mm-mnav { display: none; } .mm-header__inner { min-height: var(--mm-header-h-lg); gap: 1.25rem; } .mm-header__logo img { height: 2.25rem; } .mm-nav { display: block; margin-left: auto; } .mm-nav > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; list-style: none; } .mm-nav li { position: relative; } .mm-nav__link { display: inline-flex; align-items: center; gap: 0.35em; min-height: var(--mm-target-min); padding-top: 3px; border-bottom: 3px solid transparent; color: var(--mm-text); font: 500 1rem/1 var(--mm-font-ui); text-decoration: none; transition: color var(--mm-dur) var(--mm-ease); } .mm-nav__link:hover { color: var(--mm-link-hover); } .mm-nav__link[aria-current="page"], .mm-nav .is-current > .mm-nav__link { border-bottom-color: var(--mm-brand-primary); } .mm-nav__caret { width: 0.7em; height: 0.7em; } .mm-sub { display: none; position: absolute; left: -1rem; top: 100%; z-index: 2; min-width: 16rem; padding: var(--mm-space-2) 0; list-style: none; background: var(--mm-white); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-md); box-shadow: var(--mm-shadow-2); } .mm-nav li:hover > .mm-sub, .mm-nav li:focus-within > .mm-sub { display: block; } .mm-sub a { display: block; padding: 0.625rem 1rem; color: var(--mm-ink); font: 500 var(--mm-font-size-sm)/1.3 var(--mm-font-ui); text-decoration: none; } .mm-sub a:hover { background: var(--mm-paper); color: var(--mm-link-hover); } .mm-sub a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--mm-brand-primary); } .mm-header .mm-header__cta { display: inline-flex; } } @media (min-width: 1200px) { .mm-header__inner { gap: var(--mm-space-5); } .mm-header__logo img { height: var(--mm-logo-h-lg); } .mm-nav > ul { gap: 0 1.75rem; } .mm-nav__link { font-size: var(--mm-font-size-ui); } } /* ---- 5b. Header CTA fill (the REAL parent-theme header, #header-outer et al. -- not the .mm-header mockup selectors above, which don't match anything on the real page; see the README's "What the front end still reveals" / regression-fixes sections). build-header-footer.php sets the header CTA menu item's class to menu-item-btn-style-button_solid_color, which -- confirmed by reading every rule the parent theme ships for it, in both css/build/style.css and css/custom.php -- only ever carries `color:#fff` and padding. No background-color or background-image exists anywhere in the parent theme for this class; the legacy "Button Accent Color" admin option it comes from appears to supply text color only in this theme version. Selector matches the parent's own shape rule's specificity (2 IDs) so background-color and border-radius below win purely on source order (child theme CSS loads after the parent's). Padding needed one more step: confirmed via the DevTools CSS domain (CSS.getMatchedStylesForNode -- static file reading missed this one), the parent has a HIGHER-specificity rule just for padding, gated on the header's current "link hover effect" option: #header-outer[data-lhe="default"] #top nav>ul>li[class*="menu-item-btn-style"]>a {padding-left:0;padding-right:0}. Matching that exact selector would silently break again the day that option changes; repeating the class instead (a well-known, non-semantic specificity bump -- the class does nothing the second time, it only adds a tier to the count) ties its specificity without depending on a theme option's current value, and this rule still wins the tie on source order alone. No !important anywhere in this file. */ #header-outer #top nav > ul > li.menu-item-btn-style-button_solid_color.menu-item-btn-style-button_solid_color > a { background-color: var(--mm-action-bg); padding: 0 20px; /* design's horizontal padding */ border-radius: 4px; } #header-outer #top nav > ul > li.menu-item-btn-style-button_solid_color.menu-item-btn-style-button_solid_color > a:hover { background-color: var(--mm-action-bg-hover); } /* Neutralizes salient-core's OWN dynamic per-item CSS (Nectar_WP_Menu_Style_Manager, a plugin file, not this theme's compiled CSS): it paints a SEPARATE `a:before{background:...}` behind this same button, and a pre-existing bug in that plugin (get_nectar_theme_options() resolving to the wrong same-named function -- see build-header-footer.php's long comment) means the color it computes is never right (black, or the theme's stock blue, never this brand's red), regardless of which link-style value is saved. z-index:-1 (that plugin's own rule) already keeps it behind this rule's own background-color above in practice, but setting it explicitly transparent here removes any dependence on stacking-context behavior to hide it. */ #header-outer #top nav > ul > li.menu-item-btn-style-button_solid_color.menu-item-btn-style-button_solid_color > a:before { background: transparent; } /* The design's UI font, on the whole real nav (not just the button) -- same "the .mm-nav__link rules above only match the mockup's own markup, never the parent theme's real #header-outer nav" gap as the button fill. Locally this resolves to Jost (see functions.php's font switch); in production, to the licensed "futura-pt" commercial webfont kit, matching design/tokens.css's --mm-brand-font-display without duplicating the value here. */ #header-outer #top nav a { font-family: var(--mm-font-ui); } /* ---- 6. Heroes ---- */ .mm-hero { padding-top: var(--mm-section-y-half); } .mm-hero__head { display: grid; gap: var(--mm-space-5); } .mm-hero__body { display: grid; gap: var(--mm-space-7); margin-top: var(--mm-space-6); align-items: center; } /* P7: was start */ .mm-hero__copy { display: grid; gap: var(--mm-space-5); align-content: start; min-width: 0; } /* .mm-hero__visual is applied via el_class to a REAL the builder column (vc_col-sm-5), which already owns its own width/float mechanics -- this class controls ONLY the hide-below-690px behavior (P1) and must never set width/max-width/margin here, or it fights the column's own width and collapses the two-column layout to one column full width (found and fixed: the diagram was rendering full-width below the hero text instead of beside it, at every width above 690px, because a "width:100%" here was overriding vc_col-sm-5's own width). The mockup's original .mm-hero__visual (a plain div inside a CSS-Grid .mm-hero__body) is NOT what ships: this build uses the builder's native 7/12+5/12 columns instead (design-direction.md's own "builder row" guidance), so .mm-hero__body's grid-template-columns rule below is unused by the real page and kept only for any future non-the builder reuse of this class. */ .mm-hero__visual { display: none; } .mm-microline { font: 400 var(--mm-font-size-sm)/1.5 var(--mm-font-ui); color: var(--mm-text-muted); } .mm-pagehero { display: grid; gap: var(--mm-space-5); max-width: 52rem; } @media (min-width: 690px) { .mm-hero__visual { display: block; } } @media (min-width: 1000px) { .mm-hero__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--mm-space-8); } } /* ---- 7. Placeholders (media not yet shot; used by several packages until real assets land) ---- */ .mm-ph { display: grid; place-items: center; width: 100%; min-height: 8rem; padding: var(--mm-space-5); border-radius: var(--mm-radius-md); text-align: center; background: repeating-linear-gradient(135deg, #EFEEEA 0 14px, #F6F5F2 14px 28px); } .mm-ph span { display: inline-block; padding: var(--mm-space-2) var(--mm-space-3); border-radius: var(--mm-radius-xs); background: var(--mm-bg-card); color: var(--mm-text-muted); font: 400 var(--mm-font-size-xs)/1.5 var(--mm-font-mono); } .mm-ph--landscape { aspect-ratio: 4 / 3; } .mm-ph--headshot { aspect-ratio: 4 / 5; } .mm-ph--case { aspect-ratio: 3 / 2; min-height: 0; } .mm-ph--ui { aspect-ratio: 16 / 10; min-height: 0; padding: var(--mm-space-3); border-radius: var(--mm-radius-sm); } .mm-surface-dark .mm-ph { background: repeating-linear-gradient(135deg, #1B1B1B 0 14px, #262626 14px 28px); } /* ---- 8. Splits (side intro + main): used by tool-showcase, principles-list sections, and any native row that wants the same 4fr/7fr rhythm (e.g. "who we are", "how I measure it") ---- */ .mm-split { display: grid; gap: var(--mm-space-7); } .mm-split__side { display: grid; gap: var(--mm-space-4); align-content: start; min-width: 0; } .mm-split__main { display: grid; gap: var(--mm-space-5); align-content: start; min-width: 0; } @media (min-width: 1000px) { .mm-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--mm-space-9); } .mm-split--wide-side { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } /* ---- 9. Breadcrumbs (styles the markup rendered by the site's SEO plugin; its class names are reserved for its own output, not reused here) ---- */ .mm-breadcrumbs { font: 500 var(--mm-font-size-sm)/1.4 var(--mm-font-ui); color: var(--mm-text-muted); } .mm-breadcrumbs a { display: inline-block; padding-block: 0.25rem; color: var(--mm-link); text-decoration: underline; text-decoration-color: var(--mm-link-underline); text-underline-offset: 0.2em; } .mm-breadcrumbs a:hover { color: var(--mm-link-hover); } .mm-bc-sep { margin-inline: 0.35em; color: var(--mm-gray-500); } .mm-bc-current { color: var(--mm-text-body); } /* ---- 10. Forms (the chosen forms plugin's markup matches these tokens and utility shapes; kept here, not in a shortcode package, since the form plugin is not a theme shortcode) ---- */ .mm-form { display: grid; gap: var(--mm-space-5); max-width: 40rem; } .mm-field { display: grid; gap: 0.4rem; min-width: 0; } .mm-label { font: 600 var(--mm-font-size-ui)/1.3 var(--mm-font-ui); color: var(--mm-text); } .mm-req, .mm-opt { font-weight: 400; font-size: var(--mm-font-size-sm); color: var(--mm-text-muted); } .mm-hint { font: 400 var(--mm-font-size-sm)/1.45 var(--mm-font-ui); color: var(--mm-text-muted); } .mm-input { display: block; width: 100%; min-height: var(--mm-control-h); padding: 0.625rem 0.875rem; border: 1px solid var(--mm-field-border); border-radius: var(--mm-radius-sm); background: var(--mm-field-bg); color: var(--mm-field-text); font: 400 var(--mm-font-size-ui)/1.4 var(--mm-font-ui); transition: border-color var(--mm-dur) var(--mm-ease); } .mm-input::placeholder { color: var(--mm-gray-600); opacity: 1; } .mm-input:hover { border-color: var(--mm-ink); } .mm-input:focus-visible { border-color: var(--mm-ink); outline-offset: 2px; } .mm-textarea { min-height: 9rem; resize: vertical; } .mm-checks { display: grid; gap: var(--mm-space-2); grid-template-columns: minmax(0, 1fr); margin-top: var(--mm-space-2); } @media (min-width: 480px) { .mm-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mm-check { display: flex; align-items: flex-start; gap: var(--mm-space-3); min-height: var(--mm-target-min); min-width: 0; padding: 0.625rem 0.75rem; border: 1px solid var(--mm-field-border); border-radius: var(--mm-radius-sm); background: var(--mm-field-bg); color: var(--mm-field-text); font: 400 var(--mm-font-size-ui)/1.35 var(--mm-font-ui); cursor: pointer; } .mm-check:hover { border-color: var(--mm-ink); } .mm-check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.05rem 0 0; accent-color: var(--mm-brand-primary); } .mm-check--apart { grid-column: 1 / -1; margin-top: var(--mm-space-2); } .mm-field.is-error .mm-input { border-color: var(--mm-error-border); box-shadow: inset 0 0 0 1px var(--mm-error-border); background-color: var(--mm-error-bg); } .mm-error { display: flex; align-items: flex-start; gap: var(--mm-space-2); font: 500 var(--mm-font-size-sm)/1.4 var(--mm-font-ui); color: var(--mm-error); } .mm-error__icon { flex: none; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: var(--mm-radius-round); background: var(--mm-error); color: var(--mm-white); font: 700 0.8125rem/1 var(--mm-font-ui); } .mm-form__privacy { font: 400 var(--mm-font-size-sm)/1.5 var(--mm-font-ui); color: var(--mm-text-muted); } .mm-form__privacy a { color: var(--mm-link); text-decoration: underline; text-decoration-color: var(--mm-link-underline); text-underline-offset: 0.2em; } .mm-form__submit { display: grid; gap: var(--mm-space-3); justify-items: start; } .mm-alert { display: grid; gap: var(--mm-space-1); padding: var(--mm-space-4) var(--mm-space-5); border-left: 4px solid var(--mm-success-text); border-radius: var(--mm-radius-sm); background: var(--mm-success-bg); color: var(--mm-ink); font: 400 var(--mm-font-size-sm)/1.5 var(--mm-font-ui); } .mm-alert--error { border-left-color: var(--mm-error-border); background: var(--mm-error-bg); } .mm-alert__title { font-size: var(--mm-font-size-ui); font-weight: var(--mm-weight-semibold); color: var(--mm-success-text); } .mm-alert--error .mm-alert__title { color: var(--mm-error); } /* ---- 11. Contact aside ("what happens next" list; simple enough to be a base utility rather than its own shortcode package -- not in the Phase 1 package list) ---- */ .mm-aside { display: grid; gap: var(--mm-space-6); align-content: start; min-width: 0; padding: var(--mm-card-pad); background: var(--mm-bg-alt); border-radius: var(--mm-radius-md); } .mm-next { display: grid; gap: var(--mm-space-4); list-style: none; } .mm-next li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--mm-space-3); align-items: start; font: 400 var(--mm-font-size-ui)/1.45 var(--mm-font-ui); color: var(--mm-text-body); } .mm-next strong { color: var(--mm-text); } .mm-chip { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 2px solid var(--mm-border-strong); border-radius: var(--mm-radius-round); color: var(--mm-text); font: 700 0.9375rem/1 var(--mm-font-display); } .mm-chip--accent { background: var(--mm-accent); border-color: var(--mm-accent); color: var(--mm-white); } /* ---- 12. Sign-off device (shared by the CTA band's tagline sign-off and the founder block / essay's signature sign-off; see design-direction.md section 3, "Sign-offs") ---- */ .mm-signoff { display: grid; gap: var(--mm-space-3); justify-items: start; } .mm-tagline { font: italic 400 var(--mm-font-size-lead)/1.4 var(--mm-font-body); color: var(--mm-text); } .mm-sig { width: 13.75rem; height: auto; } /* ---- 13. Footer (styles the parent theme's native footer output; see functions.php for the legal-links guarantee and the widget-area content) ---- */ .mm-footer { padding-block: var(--mm-space-9) var(--mm-space-6); font-family: var(--mm-font-ui); } .mm-footer__top { display: grid; gap: var(--mm-space-7); } @media (min-width: 1000px) { .mm-footer__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mm-space-9); } } .mm-footer__brand { display: grid; gap: var(--mm-space-3); justify-items: start; align-content: start; } .mm-footer__logo { display: inline-block; margin-bottom: var(--mm-space-2); line-height: 0; } .mm-footer__logo img { height: 2.25rem; width: auto; } .mm-footer__tagline { font: italic 400 var(--mm-font-size-ui)/1.4 var(--mm-font-body); color: var(--mm-text); } .mm-footer__desc { max-width: 38ch; font-size: var(--mm-font-size-sm); line-height: 1.5; color: var(--mm-text-body); } .mm-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mm-space-6); } .mm-footer__h { font: 500 var(--mm-font-size-xs)/1.3 var(--mm-font-ui); letter-spacing: var(--mm-tracking-eyebrow); text-transform: uppercase; color: var(--mm-text-muted); } .mm-footer__nav ul { margin-top: var(--mm-space-3); list-style: none; padding: 0; } .mm-footer__nav a { display: inline-flex; align-items: center; min-height: var(--mm-target-min); color: var(--mm-link); font-size: var(--mm-font-size-ui); line-height: 1.3; text-decoration: none; } .mm-footer__nav a:hover { text-decoration: underline; text-decoration-color: var(--mm-link-underline); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .mm-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-space-2) var(--mm-space-6); margin-top: var(--mm-space-8); padding-top: var(--mm-space-5); border-top: 1px solid var(--mm-border); color: var(--mm-text-muted); font-size: var(--mm-font-size-sm); } .mm-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--mm-space-5); list-style: none; padding: 0; } .mm-footer__legal a { display: inline-flex; align-items: center; min-height: var(--mm-target-min); color: var(--mm-text-body); text-decoration: underline; text-decoration-color: var(--mm-link-underline); text-underline-offset: 0.2em; } .mm-footer__legal a:hover { color: var(--mm-link-hover); } /* Parent-theme structural overrides: let the native footer/menu/widget markup carry OUR type and color roles without fighting the parent theme's own specificity. Kept minimal and targeted. */ #footer-outer { background: var(--mm-dark) !important; color: var(--mm-paper); } #footer-outer, #footer-outer a { font-family: var(--mm-font-ui); } #footer-outer #copyright { border-top: 1px solid var(--mm-dark-line); } #footer-outer #copyright, #footer-outer #copyright a { color: var(--mm-brand-secondary); font-size: var(--mm-font-size-sm); } /* Footer column 1 (a Custom HTML widget, tools/build-header-footer.php): reversed logo, tagline, and the company identity line. */ #footer-outer .mm-footer-brand { display: grid; gap: var(--mm-space-3); justify-items: start; max-width: 34ch; } #footer-outer .mm-footer-brand__logo { display: inline-block; line-height: 0; } #footer-outer .mm-footer-brand__logo img { display: block; height: 2.25rem; width: auto; } #footer-outer .mm-footer-brand p { margin: 0; padding: 0; } #footer-outer .mm-footer-brand__tagline { font: italic 400 var(--mm-font-size-ui)/1.4 var(--mm-font-body); color: var(--mm-white); } #footer-outer .mm-footer-brand__identity { font-size: var(--mm-font-size-sm); line-height: 1.5; color: var(--mm-brand-secondary); } /* P8: the guaranteed Privacy Policy / Terms of Use / Contact links sit beside the copyright line (an inline element -- the primary placement is filtered into a

, so it cannot be a