/* * MB Theme — post-styles.css * * Re-extracted 2026-05-09 from kadence-child concatenated stylesheet, this * time preserving @media query nesting (the v1 extraction flattened them, * which broke responsive behavior of mb-nav and mb-hamburger). * * Editing rule: this file IS the source of truth for mb-* visual styles. * Update here, not in style.css (which is theme-header-only). */ /* ============================================================ Base body (also enforced via theme.json; explicit fallback) ============================================================ */ /* * Brand color tokens — restored from the original kadence-child :root rule. * The mb-* design system uses these CSS variables throughout (var(--deep), * var(--cool), etc.). Defining them here keeps the rest of the stylesheet * one piece even after we migrated off Kadence. * * Naming note: CLAUDE.md describes the palette in human terms (Deep Slate, * Cool Mist, Cloud White…) but the CSS uses different variable names. The * mapping is: * * CLAUDE.md CSS var hex * Deep Slate --deep #2C4A5A * Muted Air --mid #7A9BAD * (steel-blue) --cool #B5CED8 ← used for de-emphasized text on dark bgs * Pale Sky --pale #DDE8EF * Cool Mist --cloud #F4F7FA ← yes, named "cloud" in code, "Cool Mist" in docs * Sage --sage #C8D8B0 * (sage tint) --sage-light #E8F0DE * Cloud White --white #FFFFFF * (body text) --body #4A6070 */ :root { /* Color tokens */ --deep: #2C4A5A; --mid: #7A9BAD; --cool: #B5CED8; --pale: #DDE8EF; --cloud: #F4F7FA; --sage: #C8D8B0; --sage-light: #E8F0DE; --white: #FFFFFF; --body: #4A6070; /* Spacing tokens — these were missing from the v1 :root, which made `.mb-section-block { padding: var(--space-lg) var(--gutter) }` fall back to initial (no padding) and caused the favorites page to render with sections flush to the edges. Restored from the prod kadence-child stylesheet. */ --space-xl: 100px; --space-lg: 80px; --space-md: 60px; --gutter: 5vw; /* Soft pillar tints — each pillar at 80% blended over Cloud White (#F4F7FA). Used on full-tint card and hero surfaces to pull volume down vs. the brand's calm, low-pressure DNA. Band-tint surfaces and small accents keep the full saturation pillar values (--deep, --mid, --sage, --cool) for distinguishability. Ink-color contrast on each soft tint: --deep-soft (#546D7A) + Cloud White ink → ~4.6:1 (passes WCAG AA) --mid-soft (#93ADBC) + Deep Slate ink → ~3.7:1 (passes large text only) --sage-soft (#D1DEBF) + Deep Slate ink → ~12:1 (clean) --cool-soft (#C1D6DF) + Deep Slate ink → ~9:1 (clean) */ --deep-soft: #546D7A; --mid-soft: #93ADBC; --sage-soft: #D1DEBF; --cool-soft: #C1D6DF; } body { background: #FFFFFF; color: #2C4A5A; font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-weight: 500; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* ============================================================ Reduced-motion — when the OS or browser sets prefers-reduced- motion: reduce, perf-a11y.php sets `mb-reduced-motion` on . Branch from there to disable transforms/transitions/animations that aren't critical to the layout. (Reading-progress bar already has its own @media rule inline.) ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .mb-reduced-motion .mb-blog-card:hover, .mb-reduced-motion .mb-related-card:hover, .mb-reduced-motion .mb-post-nav-prev:hover, .mb-reduced-motion .mb-post-nav-next:hover, .mb-reduced-motion .mb-kit-form-button:hover, .mb-reduced-motion .wp-block-button .wp-block-button__link:hover { transform: none !important; } /* Active nav-link affordance — perf-a11y.php sets aria-current="page" on whichever nav link matches the current URL. Underline it so users know where they are. */ .mb-nav a[aria-current="page"], .mb-mobile-menu a[aria-current="page"] { color: var(--deep); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--sage); } /* ============================================================ Brand text-selection — sage highlight, Deep Slate ink. The default browser selection is a hard royal-blue that feels foreign on the muted Cool Mist palette. Sage at 60% alpha keeps the brand vibe and stays high-contrast against Deep Slate body. ============================================================ */ ::selection { background: rgba(200, 216, 176, 0.65); /* sage @ 65% */ color: #2C4A5A; } ::-moz-selection { background: rgba(200, 216, 176, 0.65); color: #2C4A5A; } /* On Deep Slate backgrounds (footer, dark sections) flip the contrast */ .mb-footer ::selection, .mb-footer ::-moz-selection { background: rgba(200, 216, 176, 0.85); color: #2C4A5A; } /* ============================================================ Branded focus rings — replace browser-default solid blue with a sage offset ring. Applies to every focusable element via :focus-visible (so mouse clicks don't paint rings, only keyboard navigation does — modern a11y best practice). ============================================================ */ :focus-visible { outline: 2px solid #C8D8B0; /* sage */ outline-offset: 3px; border-radius: 4px; transition: outline-offset 0.12s ease; } /* Tighter ring on form inputs that already have their own border */ input:focus-visible, textarea:focus-visible, select:focus-visible, .mb-kit-form-input:focus-visible, body.woocommerce-account .woocommerce-form-row .input-text:focus-visible { outline: 2px solid #C8D8B0; outline-offset: 1px; } /* ============================================================ H2 anchor permalinks — every

in a post body gets an `id` server-side (via mb_inject_heading_anchors filter), and on hover a "#" link reveals that copies the post URL + #anchor to clipboard. Click to copy. ============================================================ */ .mb-post-body-inner h2, .mb-post-body h2 { position: relative; scroll-margin-top: 80px; /* fixed nav offset when jumping via anchor */ } .mb-h2-anchor { position: absolute; left: -1.4em; top: 0.05em; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.55em; font-weight: 500; color: #C8D8B0; /* sage */ text-decoration: none; opacity: 0; transition: opacity 0.18s ease, color 0.18s ease; padding: 0.4em 0.5em; cursor: pointer; user-select: none; line-height: 1; } .mb-post-body-inner h2:hover .mb-h2-anchor, .mb-post-body h2:hover .mb-h2-anchor, .mb-h2-anchor:focus { opacity: 1; } .mb-h2-anchor:hover { color: #2C4A5A; } .mb-h2-anchor.copied { color: #2C4A5A; } .mb-h2-anchor.copied::after { content: " copied"; font-size: 0.85em; font-weight: 400; margin-left: 0.3em; color: #7A9BAD; } @media (max-width: 768px) { /* On narrow viewports the negative-left positioning would push the # off-screen — float it inline-end instead with a small gap. */ .mb-h2-anchor { position: static; display: inline; margin-left: 0.4em; opacity: 0.5; } } /* ============================================================ Auto-injected affiliate disclosure (theme-level class — replaces inline style="font-size:0.85em;opacity:0.75") ============================================================ */ .mb-affiliate-disclosure { font-size: 0.85em; opacity: 0.75; margin-top: 0.5em; margin-bottom: 1.5em; } .mb-affiliate-disclosure em { font-style: italic; } /* ============================================================ Skip-to-content link — hidden until keyboard-focused, then reveals as a brand-styled pill at the top-left. Standard a11y pattern; lets keyboard and screen-reader users bypass the nav. ============================================================ */ .mb-skip-link { position: absolute; top: -100px; left: 8px; z-index: 10100; padding: 12px 20px; background: #2C4A5A; color: #FFFFFF; font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; text-decoration: none; border-radius: 8px; box-shadow: 0 8px 24px rgba(44, 74, 90, 0.20); transition: top 0.15s ease; } .mb-skip-link:focus { top: 8px; outline: 2px solid #C8D8B0; outline-offset: 2px; } /* Mobile menu styling lives further down (.mb-mobile-menu rules around line 1100). The element carries both id="mb-mobile-menu" and class="mb-mobile-menu" so both ID-based selectors (used by JS) and class-based selectors (used by CSS) match. */ /* ============================================================ mb-footer (NEW — the live site used Kadence's footer markup, so there's no source CSS for the new footer template part) ============================================================ */ /* WordPress generates `:where(.wp-site-blocks) > * { margin-block-start: 1.25rem }` from theme.json's blockGap. That puts a ~20px gap between
and the footer template-part, which we don't want — the footer should butt directly against whatever section ends the page. Zero the gap here. */ .wp-block-template-part > .mb-footer, footer.wp-block-template-part { margin-block-start: 0; margin-block-end: 0; } .mb-footer { background: #2C4A5A; color: #F4F7FA; padding: 64px 0 32px; font-family: 'DM Sans', system-ui, sans-serif; } .mb-footer-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; } /* Force the 4-column grid on the footer — block layout from theme.json's useRootPaddingAwareAlignments + WP-generated layout rules can otherwise collapse the grid container. Specificity bump via the parent template-part class plus !important on the layout primitives. */ .wp-block-template-part .mb-footer-cols, .mb-footer-cols { display: grid !important; grid-template-columns: 1.6fr 1fr 1fr 1fr !important; gap: 64px; padding-bottom: 40px; border-bottom: 1px solid rgba(244, 247, 250, 0.10); width: 100%; } /* Explicitly defeat any wp-block-group constrained-layout max-width that may be inheriting onto the footer template-part. */ footer.wp-block-template-part { width: 100%; max-width: none; } footer.wp-block-template-part > .mb-footer { width: 100%; } /* ============================================================ Page-specific classes restored from prod CSS — these were incorrectly stripped during the Phase 2 dead-code cleanup but are actually used on /disclosures/, /work-with-us/, /start-here/, and /home-2/. All take the `mb-` prefix per the theme convention. ============================================================ */ /* /disclosures/ + content prose */ .mb-content-h2 { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; color: var(--deep); margin: 40px 0 12px; line-height: 1.25; } /* Disclosure-style pages (/disclosures/, /privacy-policy/, /work-with-us/) share this wrapper. The 740px container matches the reading measure used on blog post bodies (.mb-post-body-inner) so these pages feel like part of the same reading experience rather than full-width landing pages. */ .mb-disclosure-section { max-width: 740px; margin: 0 auto; padding: 20px 5vw 80px; } /* Explicit body type for prose inside disclosure pages — without this,

falls back to wp-block-post-content defaults which render at browser-default 16px / 400 and look visibly off vs the rest of the site (DM Sans 500). */ .mb-disclosure-section p, .mb-disclosure-section li { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.65; color: var(--deep); } .mb-disclosure-section p.mb-p-section-end { margin-bottom: 40px; } /* /work-with-us/ — fit grid (yes/no comparison columns) */ .mb-fit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 32px 0 48px; } .mb-fit-col-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 500; color: #2C4A5A; margin-bottom: 16px; } .mb-fit-list { list-style: none; padding: 0; margin: 0; } .mb-fit-list li { font-size: 14px; color: #4A6070; line-height: 1.7; font-weight: 300; padding: 8px 0 8px 24px; position: relative; } .mb-fit-list.mb-fit-yes li::before { content: "✓"; position: absolute; left: 0; color: #C8D8B0; font-weight: 500; } .mb-fit-list.mb-fit-no li::before { content: "—"; position: absolute; left: 0; color: #B5CED8; } /* /work-with-us/ + about — stat blocks */ .mb-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 48px 0; } .mb-stat { text-align: center; padding: 28px 16px; background: #F4F7FA; border-radius: 12px; } .mb-stat-number { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 3.2vw, 36px); font-weight: 300; color: #2C4A5A; line-height: 1.05; margin-bottom: 8px; word-break: keep-all; overflow-wrap: normal; hyphens: none; } .mb-stat-label { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #7A9BAD; } /* /privacy-policy/ uses the .pull-quote with .pull-quote--note modifier for the timestamp/note block at the bottom of the page. Keeping the modifier as legacy non-prefixed because .pull-quote itself is the documented exception to the mb- convention (see CLAUDE.md). */ .pull-quote--note { text-align: center; } .pull-quote--note p { font-style: normal !important; font-size: 14px !important; } .pull-quote--note p a { color: var(--deep); font-weight: 500; } /* /work-with-us/ + start-here — topic cards */ .mb-topic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 48px 0; } .mb-topic-card { padding: 32px; background: #F4F7FA; border-radius: 16px; } .mb-topic-card-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; color: #2C4A5A; margin-bottom: 12px; } .mb-topic-card-desc { font-size: 14px; color: #4A6070; line-height: 1.7; font-weight: 300; } @media (max-width: 768px) { .mb-fit-grid { grid-template-columns: 1fr; gap: 32px; } .mb-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .mb-topic-grid { grid-template-columns: 1fr; gap: 20px; } } /* ============================================================ WooCommerce brand overrides — wraps the WC blocks (`wc-block-*`) on /product/* and other WC pages with MB brand styling. WC's default theming is functional but visually inconsistent with the rest of the site; these overrides bring the product page into the brand without a custom single-product.html template. Scoped via `body.woocommerce` and `.single-product` so they never affect non-WC pages. ============================================================ */ /* Page rhythm: align with the gutter the rest of the theme uses. Applies to single-product, cart, checkout, my-account — anywhere WooCommerce renders content into

without its own wrapper. */ body.single-product main, body.woocommerce-account main, body.woocommerce-cart main, body.woocommerce-checkout main { padding: var(--space-lg) var(--gutter); } body.single-product .entry-content, body.woocommerce-account .entry-content, body.woocommerce-cart .entry-content, body.woocommerce-checkout .entry-content { max-width: 1100px; margin: 0 auto; } /* Blog/archive card grid — equal-size cards regardless of post count. Default grid `align-items: stretch` equalizes cards within the same row; we don't force `grid-auto-rows: 1fr` (which made cards huge when one row's tallest card had a long excerpt). The shortcode markup already places .mb-blog-link at the end of each card via `margin-top: auto`. */ .mb-blog-card { height: 100%; /* fills its grid cell so siblings in same row equalize */ overflow: hidden; /* prevent overflow from spilling into adjacent rows */ box-sizing: border-box; } /* Excerpt: limit to ~3 lines so cards stay close to consistent height. Uses CSS line-clamp (well-supported in modern browsers). */ .mb-blog-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* WooCommerce account login (my-account when logged out) — center the 2-column login + register layout, brand-style the form fields. Critical: WC's woocommerce.css adds `::before` and `::after` pseudo- elements to `.col2-set` with `content: " "; display: table` as a clearfix for the floats. When we switch to grid, those pseudos become grid items and force a 4-cell layout (Login lands in col 2, Register wraps to row 2 col 1). Killing them is the only fix. WC also applies `float: left/right; width: 48%` to .col-1/.col-2, which we override with !important on `width: auto` and `float: none`. */ body.woocommerce-account #customer_login::before, body.woocommerce-account #customer_login::after, body.woocommerce-account .col2-set::before, body.woocommerce-account .col2-set::after { content: none !important; display: none !important; } body.woocommerce-account #customer_login { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 64px; max-width: 900px; margin: 0 auto; } body.woocommerce-account #customer_login h2 { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 500; color: var(--deep); margin: 0 0 24px; letter-spacing: -0.01em; } body.woocommerce-account .woocommerce-form-row label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--mid); margin-bottom: 6px; text-transform: uppercase; } body.woocommerce-account .woocommerce-form-row .input-text, body.woocommerce-account input[type="text"], body.woocommerce-account input[type="email"], body.woocommerce-account input[type="password"] { width: 100%; padding: 12px 14px; border: 1px solid var(--pale); border-radius: 8px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; color: var(--deep); background: var(--white); transition: border-color 0.2s; box-sizing: border-box; } body.woocommerce-account .woocommerce-form-row .input-text:focus, body.woocommerce-account input[type="text"]:focus, body.woocommerce-account input[type="email"]:focus, body.woocommerce-account input[type="password"]:focus { outline: none; border-color: var(--mid); } body.woocommerce-account .woocommerce-form-row { margin-bottom: 18px; } body.woocommerce-account .woocommerce-form-row label.checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--body); font-weight: 400; } body.woocommerce-account .woocommerce-form button[type="submit"], body.woocommerce-account .woocommerce-button { background: var(--deep) !important; color: var(--cloud) !important; border: 0 !important; padding: 12px 26px !important; border-radius: 40px !important; font-family: 'DM Sans', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; cursor: pointer !important; transition: background 0.2s, transform 0.15s !important; } body.woocommerce-account .woocommerce-form button[type="submit"]:hover, body.woocommerce-account .woocommerce-button:hover { background: #1F3543 !important; transform: translateY(-1px); } body.woocommerce-account .lost_password a { font-size: 12px; color: var(--mid); text-decoration: none; } body.woocommerce-account .lost_password a:hover { color: var(--deep); } body.woocommerce-account #customer_login .col-1, body.woocommerce-account #customer_login .col-2 { width: auto !important; /* defeats WC layout's width: 48% */ float: none !important; /* defeats WC layout's float: left/right */ max-width: none !important; padding: 32px; background: var(--cloud); border-radius: 16px; } @media (max-width: 768px) { body.woocommerce-account #customer_login { grid-template-columns: 1fr; gap: 24px; } } /* WooCommerce account dashboard (my-account when logged in) */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 15px; font-weight: 500; color: var(--mid); text-decoration: none; border-radius: 8px; transition: background 0.2s, color 0.2s; } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--cloud); color: var(--deep); } /* Prose inside woocommerce-account forms AND the logged-in dashboard content area — these

elements have no class, so they fall back to wp-block-post-content defaults (browser default 16px / weight 400 in whatever font WP chooses). Force the brand body type. Same pattern as the .mb-disclosure-section fix. */ body.woocommerce-account .woocommerce-form p, body.woocommerce-account .woocommerce-privacy-policy-text p, body.woocommerce-account form.lost_reset_password p, body.woocommerce-account form.checkout p, body.woocommerce-account .woocommerce-MyAccount-content p { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.65; color: var(--deep); } /* Inline links inside dashboard prose — the "recent orders", "billing addresses", "edit your password..." links and the logout link in "Hello Fred Norrell (not Fred Norrell? Log out)". Brand-style them so they match the rest of the body underline treatment. */ body.woocommerce-account .woocommerce-MyAccount-content p a { color: var(--deep); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } body.woocommerce-account .woocommerce-MyAccount-content p a:hover { text-decoration-thickness: 2px; } body.woocommerce-account .woocommerce-privacy-policy-text { margin: 8px 0 16px; } body.woocommerce-account .woocommerce-privacy-policy-text a { color: var(--deep); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } /* Edit-address page — render each address as a card so the layout stays clean regardless of address length and the two columns line up at the same heights. WC ships .u-columns / .col2-set with float-based layout (col-1 floats left, col-2 floats right at 48% width); we replace that with a grid and put each address inside a brand card. */ body.woocommerce-account .woocommerce-Addresses.col2-set::before, body.woocommerce-account .woocommerce-Addresses.col2-set::after { content: none !important; display: none !important; } body.woocommerce-account .woocommerce-Addresses.col2-set { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; } body.woocommerce-account .woocommerce-Addresses .u-column1, body.woocommerce-account .woocommerce-Addresses .u-column2, body.woocommerce-account .woocommerce-Addresses .col-1, body.woocommerce-account .woocommerce-Addresses .col-2 { width: auto !important; float: none !important; } /* Each address column is the card. Layout reads top-to-bottom: heading → address → divider → edit link pinned to card bottom-right. The trick is `display: contents` on the inner

wrapper so its h2 and edit-link children become direct flex children of the card and we can `order` them independently. */ body.woocommerce-account .woocommerce-Address { background: var(--white); border: 1px solid var(--pale); border-radius: 16px; padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; height: 100%; box-sizing: border-box; } /* Flatten the title wrapper so h2 + a.edit sit as flex children of the card */ body.woocommerce-account .woocommerce-Address-title.title { display: contents; } /* h2 — top of the card */ body.woocommerce-account .woocommerce-Address-title h2 { order: 1; font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; color: var(--deep); margin: 0; line-height: 1.2; } /* address — middle */ body.woocommerce-account .woocommerce-Address address { order: 2; font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; font-weight: 500; font-style: normal; line-height: 1.7; color: var(--deep); margin: 0; } /* Edit link — pinned to the bottom of the card, right-aligned, with a pale rule above it so it reads as a card footer/action area. */ body.woocommerce-account .woocommerce-Address-title a.edit { order: 3; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--pale); width: 100%; box-sizing: border-box; text-align: left; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--deep); text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0.02em; white-space: nowrap; } /* Single-column on narrow viewports */ @media (max-width: 768px) { body.woocommerce-account .woocommerce-Addresses.col2-set { grid-template-columns: 1fr; } } /* Breadcrumbs — small, muted, brand-colored */ .wc-block-breadcrumbs, .woocommerce-breadcrumb { font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; letter-spacing: 0.04em; color: var(--mid); margin-bottom: 32px; } .wc-block-breadcrumbs a, .woocommerce-breadcrumb a { color: var(--mid); text-decoration: none; transition: color 0.2s; } .wc-block-breadcrumbs a:hover, .woocommerce-breadcrumb a:hover { color: var(--deep); } /* Product title */ body.single-product .product_title, body.single-product h1.entry-title, body.single-product .wp-block-post-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 4vw, 48px); font-weight: 500; color: var(--deep); line-height: 1.15; margin: 0 0 20px; letter-spacing: -0.01em; } /* Price */ body.single-product .price, body.single-product .woocommerce-Price-amount, body.single-product p.price, body.single-product .wc-block-components-product-price { font-family: 'DM Sans', system-ui, sans-serif; font-size: 22px; font-weight: 500; color: var(--deep); margin: 16px 0 24px; } body.single-product .wc-block-components-product-price__regular, body.single-product .wc-block-components-product-price__value { color: var(--deep); } /* Short description and main description */ body.single-product .woocommerce-product-details__short-description, body.single-product .wc-block-components-product-summary { font-size: 15px; line-height: 1.75; color: var(--body); font-weight: 400; margin-bottom: 24px; } /* Add to cart button — match mb-btn-primary */ body.single-product .single_add_to_cart_button, body.single-product .wc-block-components-button.contained, body.single-product button.add_to_cart_button { background: var(--deep) !important; color: var(--cloud) !important; border: 0 !important; padding: 14px 28px !important; border-radius: 40px !important; font-family: 'DM Sans', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-decoration: none !important; transition: background 0.2s, transform 0.15s !important; cursor: pointer !important; } body.single-product .single_add_to_cart_button:hover, body.single-product .wc-block-components-button.contained:hover, body.single-product button.add_to_cart_button:hover { background: #1F3543 !important; transform: translateY(-1px); } /* Quantity input */ body.single-product .quantity input.qty, body.single-product .wc-block-components-quantity-selector input { font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; border: 1px solid var(--pale); border-radius: 8px; padding: 10px 12px; color: var(--deep); background: var(--white); } /* Product meta (categories / tags below) */ body.single-product .product_meta { font-size: 12px; color: var(--mid); font-family: 'DM Sans', system-ui, sans-serif; letter-spacing: 0.04em; border-top: 1px solid var(--pale); padding-top: 16px; margin-top: 32px; } body.single-product .product_meta a { color: var(--deep); text-decoration: none; } body.single-product .product_meta a:hover { color: var(--mid); } /* Tabs (Description / Additional Info / Reviews) */ body.single-product .woocommerce-tabs ul.tabs { list-style: none; padding: 0; margin: 48px 0 0; display: flex; gap: 32px; border-bottom: 1px solid var(--pale); } body.single-product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; } body.single-product .woocommerce-tabs ul.tabs li a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); text-decoration: none; padding-bottom: 12px; display: inline-block; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } body.single-product .woocommerce-tabs ul.tabs li.active a, body.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--deep); border-bottom-color: var(--sage); } body.single-product .woocommerce-Tabs-panel { font-size: 15px; line-height: 1.75; color: var(--body); padding-top: 24px; } body.single-product .woocommerce-Tabs-panel h2 { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 500; color: var(--deep); margin: 0 0 16px; } /* Related Products section title */ body.single-product .related.products > h2, body.single-product .upsells.products > h2 { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 500; color: var(--deep); margin: 64px 0 24px; } /* Hide the WooCommerce default store-notices wrapper when empty (clean look) */ body.single-product .wc-block-components-notices:empty, body.single-product .wc-block-store-notices:empty { display: none; } /* Stock indicator */ body.single-product .stock, body.single-product .wc-block-components-product-stock-indicator { font-size: 12px; color: var(--mid); font-style: italic; margin-bottom: 16px; } body.single-product .stock.in-stock { color: #5A7A6A; } /* ============================================================ /shop-our-favorites/ CTA section (end-of-favorites-page card) ============================================================ */ /* Favorites-page CTA section — open the card up (was dashed-bordered card, which under mb-theme rendered tighter than under the prod Kadence chrome). Drop the boxed treatment and lean on the section's own background + padding to give the content breathing room. */ .mb-section-block .mb-cta-card { background: transparent; border: 0; padding: 60px 24px; max-width: 720px; margin: 0 auto; } .mb-section-block .mb-cta-card .mb-section-title { margin-bottom: 16px; } .mb-section-block .mb-cta-card-desc { margin-bottom: 36px; } /* Bump the section's vertical breathing room so the CTA doesn't feel pinched between the section above and the footer below. */ .mb-section-block.mb-section-block--cloud:last-of-type { padding: 120px 5vw 100px; } .mb-footer-col { font-size: 15px; line-height: 2; color: #B6C5D2; } .mb-footer-col-title { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 247, 250, 0.65); margin-bottom: 28px; font-weight: 500; } .mb-footer-col ul { list-style: none; padding: 0; margin: 0; } .mb-footer-col li { margin: 8px 0; } .mb-footer-col a { color: #B6C5D2; text-decoration: none; transition: color 0.2s; } .mb-footer-col a:hover { color: #FFFFFF; } .mb-footer-brand .mb-footer-logo { display: inline-block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; font-weight: 500; color: #FFFFFF; text-decoration: none; margin-bottom: 14px; line-height: 1.2; } .mb-footer-tagline { font-family: 'DM Sans', system-ui, sans-serif; font-style: normal; font-size: 14px; color: #B6C5D2; line-height: 1.7; margin: 0 0 24px; max-width: 32ch; } .mb-footer-copy { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-top: 24px; font-size: 13px; color: rgba(244, 247, 250, 0.65); } .mb-footer-copy > :first-child { justify-self: start; } .mb-footer-copy > .mb-footer-disclosure { justify-self: center; text-align: center; } .mb-footer-copy > .mb-footer-credit { justify-self: end; text-align: right; } .mb-footer-disclosure em { font-style: italic; color: rgba(244, 247, 250, 0.55); font-size: 12px; } .mb-footer-credit { font-size: 12px; color: rgba(244, 247, 250, 0.55); } .mb-footer-credit a { color: rgba(244, 247, 250, 0.85); text-decoration: underline; text-decoration-color: rgba(200, 216, 176, 0.5); text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; } .mb-footer-credit a:hover { color: #C8D8B0; text-decoration-color: #C8D8B0; } /* App Store badge in the brand column */ .mb-app-store-link { display: inline-block; margin-top: 8px; line-height: 0; transition: opacity 0.2s; } .mb-app-store-link:hover { opacity: 0.85; } .mb-app-store-link img { display: block; /* Width matches the social row above it: 6 icons × 22px + 5 gaps × 18px = 222px */ width: 222px; height: auto; max-width: 100%; border-radius: 8px; } /* Social icon row — bare icons, no circle background, brand-color hover */ .mb-social-list { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; padding: 0; margin: 0 0 24px; } .mb-social-list li { margin: 0; } .mb-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #B6C5D2; text-decoration: none; transition: color 0.2s, transform 0.2s; } .mb-social-icon:hover { color: #FFFFFF; transform: translateY(-1px); } .mb-social-icon svg { width: 22px; height: 22px; fill: currentColor; } /* Brand-color hover per platform — subtle but recognizable on hover */ .mb-social-icon[aria-label="Pinterest"]:hover { color: #E60023; } .mb-social-icon[aria-label="Instagram"]:hover { color: #E1306C; } .mb-social-icon[aria-label="Facebook"]:hover { color: #1877F2; } .mb-social-icon[aria-label="YouTube"]:hover { color: #FF0000; } .mb-social-icon[aria-label="TikTok"]:hover { color: #FFFFFF; } .mb-social-icon[aria-label="RSS feed"]:hover { color: #F26522; } /* ============================================================ About-page sections — `.mb-values*` and `.mb-promise*`. Renamed from prod's unprefixed `.values*`/`.promise*` to align with the rest of the design system; all custom theme classes take the `mb-` prefix. (.pull-quote is a deliberate exception; see CLAUDE.md "Class naming convention" section.) ============================================================ */ .mb-values { padding: 100px 5vw; background: var(--cloud); } .mb-values-inner { max-width: 1100px; margin: 0 auto; } .mb-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .mb-value-card { background: var(--white); border-radius: 16px; padding: 32px 28px; border: 1px solid var(--pale); } .mb-value-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; color: var(--deep); margin-bottom: 12px; } .mb-value-desc { font-size: 14px; color: var(--body); line-height: 1.8; font-weight: 400; } .mb-promise { padding: 80px 5vw; background: var(--sage-light); text-align: center; } .mb-promise-inner { max-width: 700px; margin: 0 auto; } .mb-promise-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px, 4vw, 48px); font-weight: 400; line-height: 1.2; color: var(--deep); margin-bottom: 20px; } .mb-promise-title em { font-style: italic; color: #5A7A6A; } .mb-promise-body { font-size: 16px; color: var(--body); line-height: 1.9; font-weight: 400; margin-bottom: 36px; } @media (max-width: 900px) { .mb-values-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .mb-values-grid { grid-template-columns: 1fr; } } /* The base .mb-footer-cols rule uses `grid-template-columns: ... !important` to defeat a wp-block-group constrained-layout collision on desktop. We have to mirror !important here so the responsive collapse actually wins. Without it, mobile keeps rendering the desktop 4-column grid and every link wraps to 2 lines. */ /* Responsive selectors must mirror the base rule's specificity (.wp-block-template-part .mb-footer-cols = 0,2,0). Using just .mb-footer-cols (0,1,0) loses the cascade tie even with !important because !important only beats non-important — among two !important rules, higher specificity still wins. */ @media (max-width: 768px) { .mb-footer { padding: 48px 0 24px; } .wp-block-template-part .mb-footer-cols, .mb-footer-cols { grid-template-columns: 1fr 1fr !important; gap: 32px; padding-bottom: 32px; } .mb-footer-brand { grid-column: 1 / -1; } .mb-footer-copy { grid-template-columns: 1fr; } .mb-footer-copy > * { justify-self: start !important; text-align: left !important; } } @media (max-width: 480px) { .wp-block-template-part .mb-footer-cols, .mb-footer-cols { grid-template-columns: 1fr !important; gap: 24px; } } /* ============================================================ Forward-fallback (defensive — only post 1528 used these classes; 1528 has been standardized but rules are kept in case any future agent run emits the alt convention) ============================================================ */ .mb-post-body { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; color: #2C4A5A; font-weight: 500; line-height: 1.65; } .mb-post-body p { margin: 1em 0; } .mb-opener { margin-bottom: 1.5rem; } .mb-opener p:first-child { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-style: italic; color: #2C4A5A; line-height: 1.4; } .mb-list { margin: 1.25em 0; padding-left: 1.5em; } .mb-list li { margin: 0.5em 0; } .mb-list li strong { font-weight: 600; color: #2C4A5A; } .mb-pull-quote { margin: 2rem auto; padding: 0 1.5rem; max-width: 36em; text-align: center; } .mb-pull-quote p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-style: italic; color: #2C4A5A; line-height: 1.35; } .mb-closer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #DDE8EF; } .mb-closer p em { color: #2C4A5A; font-style: italic; } /* ============================================================ Original mb-* and pull-quote rules, top-level (extracted from live LiteSpeed-concatenated stylesheet) ============================================================ */ .mb-nav { position:fixed;top:0;left:0;right:0;z-index:9999;background:rgb(244 247 250 / .96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #DDE8EF;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;box-sizing:border-box } .mb-nav a { color:#2C4A5A;text-decoration:none } .mb-nav-logo { font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:#2C4A5A;text-decoration:none;white-space:nowrap;flex-shrink:0 } .mb-nav ul { display:flex;align-items:center;height:64px;gap:28px;list-style:none;margin:0;padding:0 } .mb-nav ul a { font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#7A9BAD;transition:color 0.2s;white-space:nowrap } .mb-nav ul a:hover { color:#2C4A5A } .mb-hamburger { display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;z-index:10001 } .mb-hamburger span { display:block;width:22px;height:1.5px;background:#2C4A5A;border-radius:2px;transition:all 0.3s ease } .mb-hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) } .mb-hamburger.open span:nth-child(2) { opacity:0 } .mb-hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) } .mb-mobile-menu { display:block;position:fixed;top:64px;left:0;right:0;background:rgb(244 247 250 / .98);backdrop-filter:blur(12px);border-bottom:1px solid #DDE8EF;z-index:9998;padding:0;max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease } .mb-mobile-menu.open { max-height:400px;padding:16px 0 } /* Reset every property that .mb-nav ul applies to ensure the mobile menu stacks vertically as a column, not as the desktop's 64px flex row. Without these resets, the cascade leaves display:flex / height:64px / gap:28px on the ul, and all 5 links collapse into an invisible 64px horizontal strip behind the panel padding (the panel opens but reads blank). */ .mb-mobile-menu ul { display:block; height:auto; align-items:initial; gap:0; list-style:none; margin:0; padding:0 5vw } .mb-mobile-menu ul li { border-bottom:1px solid #DDE8EF } .mb-mobile-menu ul li:last-child { border-bottom:none } /* Mobile menu links — Deep Slate on Cool Mist (~10:1 contrast). The prior color was Muted Air (#7A9BAD) on Cool Mist which only renders ~2.4:1, well below WCAG and visually "blank" on mobile screens with any glare. Same readability trap CLAUDE.md flags for the planner v1. Bumped weight 400 → 500 and size 13 → 14 for the same reason. */ .mb-mobile-menu ul li a { display:block;padding:16px 0;font-family:'DM Sans',system-ui,sans-serif;font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#2C4A5A;text-decoration:none } .mb-mobile-menu ul li a:hover, .mb-mobile-menu ul li a:focus { color:#7A9BAD } .mb-page { font-family:'DM Sans',sans-serif;color:var(--deep);background:var(--cloud) } .mb-hero { padding:80px 5vw 80px;background:var(--cloud);position:relative;overflow:hidden } .mb-hero-circle { position:absolute;border-radius:50%;pointer-events:none } .mb-hero-circle-1 { width:600px;height:600px;background:var(--pale);top:-100px;right:-150px } .mb-hero-circle-2 { width:300px;height:300px;background:rgb(200 216 176 / .3);bottom:60px;left:-80px } .mb-hero-inner { max-width:680px;margin:0;position:relative;z-index:1 } .mb-eyebrow { font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);margin-bottom:20px;display:block } .mb-eyebrow::before { display:none } .mb-hero h1 { font-family:'Cormorant Garamond',serif;font-size:clamp(48px,7vw,88px);font-weight:300;line-height:1.05;color:var(--deep);margin-bottom:24px;letter-spacing:-.02em } .mb-hero h1 em { font-style:italic;color:var(--mid) } .mb-hero-sub { font-size:17px;color:#4A6070;line-height:1.8;font-weight:300;max-width:520px;margin-bottom:40px } .mb-hero-actions { display:flex;align-items:center;gap:24px;flex-wrap:wrap } .mb-btn-primary, .mb-btn-ghost, .mb-btn-outline, .mb-btn-amazon { font-family:'DM Sans',sans-serif } .mb-btn-primary { background:var(--deep);color:var(--cloud);padding:14px 28px;border-radius:40px;font-size:13px;font-weight:500;letter-spacing:.06em;text-decoration:none;display:inline-block;transition:background 0.2s,transform 0.15s } .mb-btn-primary:hover { background:var(--mid);transform:translateY(-2px);color:#fff } .mb-btn-ghost { color:var(--deep);font-size:13px;font-weight:400;text-decoration:none;letter-spacing:.04em;display:inline-flex;align-items:center;gap:6px;transition:gap 0.2s;background:none!important;border:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important } .mb-btn-ghost:hover { gap:10px;color:var(--mid) } .mb-btn-outline { border:1px solid var(--cool);color:var(--cloud);padding:12px 26px;border-radius:40px;font-size:13px;font-weight:400;letter-spacing:.06em;text-decoration:none;display:inline-block;transition:background 0.2s,color 0.2s } .mb-btn-outline:hover { background:var(--cloud);color:var(--deep) } .mb-btn-amazon { background:var(--deep);color:var(--cloud);padding:10px 20px;border-radius:40px;font-size:12px;font-weight:500;text-decoration:none } .mb-btn-amazon:hover { background:var(--mid);color:#fff } /* ============================================================ Block style variations on core/button — registered in inc/block-styles.php as `mb-primary`, `mb-outline-light`, `mb-outline-dark`, `mb-ghost`. The `is-style-*` class is applied by WP when a writer picks the variation from the block toolbar; this maps it to the brand .mb-btn-* visuals. ============================================================ */ .wp-block-button.is-style-mb-primary .wp-block-button__link { background: var(--deep); color: var(--cloud); padding: 14px 28px; border-radius: 40px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-decoration: none; border: none; transition: background 0.2s, transform 0.15s; } .wp-block-button.is-style-mb-primary .wp-block-button__link:hover { background: var(--mid); color: #FFFFFF; transform: translateY(-2px); } .wp-block-button.is-style-mb-outline-light .wp-block-button__link { background: transparent; color: var(--cloud); border: 1px solid var(--cool); padding: 12px 26px; border-radius: 40px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0.06em; text-decoration: none; transition: background 0.2s, color 0.2s; } .wp-block-button.is-style-mb-outline-light .wp-block-button__link:hover { background: var(--cloud); color: var(--deep); } .wp-block-button.is-style-mb-outline-dark .wp-block-button__link { background: transparent; color: var(--deep); border: 1px solid var(--deep); padding: 12px 26px; border-radius: 40px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-decoration: none; transition: background 0.2s, color 0.2s; } .wp-block-button.is-style-mb-outline-dark .wp-block-button__link:hover { background: var(--deep); color: var(--cloud); } .wp-block-button.is-style-mb-ghost .wp-block-button__link { background: none !important; color: var(--deep); border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0.04em; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s, color 0.2s; } .wp-block-button.is-style-mb-ghost .wp-block-button__link:hover { gap: 10px; color: var(--mid); } .wp-block-button.is-style-mb-ghost .wp-block-button__link::after { content: "→"; font-size: 14px; line-height: 1; } /* ============================================================ mb/kit-signup — newsletter signup block, Kit form 9314878. Two variants: .mb-kit-form — full section with heading + intro .mb-kit-form--compact — condensed inline version ============================================================ */ .mb-kit-form { background: var(--cloud); border: 1px solid var(--pale); border-radius: 16px; padding: 48px 5vw; margin: 48px 0; } .mb-kit-form-inner { max-width: 540px; margin: 0 auto; text-align: center; } .mb-kit-form-heading { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px, 4vw, 36px); font-weight: 400; color: var(--deep); line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.01em; } .mb-kit-form-intro { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.65; color: var(--deep); margin: 0 0 24px; } .mb-kit-form-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .mb-kit-form-input { flex: 1 1 200px; min-width: 0; padding: 14px 18px; border: 1px solid var(--pale); border-radius: 40px; background: var(--white); font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; font-weight: 500; color: var(--deep); outline: none; transition: border-color 0.2s; box-sizing: border-box; } .mb-kit-form-input:focus { border-color: var(--mid); } .mb-kit-form-input::placeholder { color: var(--mid); font-weight: 400; } .mb-kit-form-button { flex: 0 0 auto; padding: 14px 28px; background: var(--deep); color: var(--cloud); border: none; border-radius: 40px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; cursor: pointer; transition: background 0.2s, transform 0.15s; } .mb-kit-form-button:hover { background: var(--mid); transform: translateY(-2px); } .mb-kit-form-button:disabled { cursor: not-allowed; opacity: 0.55; } .mb-kit-form-input:disabled { background: var(--cloud); cursor: not-allowed; } .mb-kit-form-finepit { font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 400; color: var(--mid); margin: 0; line-height: 1.5; } /* Compact variant — sits inline with smaller proportions, no card border */ .mb-kit-form--compact { background: transparent; border: none; padding: 24px 0; margin: 24px 0; } .mb-kit-form--compact .mb-kit-form-heading { font-size: 22px; } .mb-kit-form--compact .mb-kit-form-intro { font-size: 14px; margin-bottom: 16px; } /* ============================================================ Block style variations on core/separator — `mb-sage` and `mb-pale`. Use 1px hairline rules in the brand palette. ============================================================ */ .wp-block-separator.is-style-mb-sage { border: none; border-top: 1px solid var(--sage); margin: 48px auto; max-width: 60px; opacity: 1; background: none; } .wp-block-separator.is-style-mb-pale { border: none; border-top: 1px solid var(--pale); margin: 32px 0; opacity: 1; background: none; } .mb-section { padding:100px 5vw } .mb-section-inner { max-width:1100px;margin:0 auto } .mb-section-eyebrow { font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);margin-bottom:12px;display:block } .mb-section-eyebrow::before { display:none } .mb-section-title { font-family:'Cormorant Garamond',serif;font-size:clamp(32px,4vw,48px);font-weight:400;color:var(--deep);line-height:1.2;margin-bottom:16px } .mb-section-sub { font-size:15px;color:var(--mid);max-width:500px;line-height:1.8;font-weight:300;margin-bottom:56px } .mb-pillars { background:var(--white) } .mb-pillars-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px } .mb-pillar-card { background:var(--cloud);border-radius:16px;padding:28px 24px;border:1px solid var(--pale);text-decoration:none;display:block;transition:transform 0.2s,box-shadow 0.2s } .mb-pillar-card:hover { transform:translateY(-3px);box-shadow:0 12px 32px rgb(44 74 90 / .08) } .mb-pillar-title { font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:var(--deep);margin-bottom:8px } .mb-pillar-desc { font-size:13px;color:var(--mid);line-height:1.7;margin-bottom:16px } .mb-pillar-link { font-size:12px;color:var(--deep);font-weight:500 } /* ------------------------------------------------------------ Pillar color variants — 1:1 with the 4 content pillars per the brand voice manifest §3 / §11. Strict mapping, no rotation. Decluttering & Organizing → Deep Slate (--deep) Mindful Spending → Sage (--sage) Simple Living → Muted Air (--mid) Your Home → Cool Mist (--cool) Text colors are chosen for 4.5:1+ contrast on each background. ------------------------------------------------------------ */ .mb-pillar-card.is-decluttering { background:var(--deep);border-color:var(--deep) } .mb-pillar-card.is-decluttering .mb-pillar-title, .mb-pillar-card.is-decluttering .mb-pillar-link { color:var(--cloud) } .mb-pillar-card.is-decluttering .mb-pillar-desc { color:rgba(244,247,250,.86) } .mb-pillar-card.is-mindful-spending { background:var(--sage);border-color:var(--sage) } .mb-pillar-card.is-mindful-spending .mb-pillar-title, .mb-pillar-card.is-mindful-spending .mb-pillar-desc, .mb-pillar-card.is-mindful-spending .mb-pillar-link { color:var(--deep) } .mb-pillar-card.is-simple-living { background:var(--mid);border-color:var(--mid) } .mb-pillar-card.is-simple-living .mb-pillar-title, .mb-pillar-card.is-simple-living .mb-pillar-link { color:var(--cloud) } .mb-pillar-card.is-simple-living .mb-pillar-desc { color:rgba(244,247,250,.92) } .mb-pillar-card.is-your-home { background:var(--cool);border-color:var(--cool) } .mb-pillar-card.is-your-home .mb-pillar-title, .mb-pillar-card.is-your-home .mb-pillar-desc, .mb-pillar-card.is-your-home .mb-pillar-link { color:var(--deep) } .mb-posts { background:var(--cloud) } .mb-posts-header { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px;flex-wrap:wrap;gap:20px } .mb-posts-grid { display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:16px;width:100% } .mb-post-card { background:var(--white);border-radius:16px;overflow:hidden;border:1px solid var(--pale);text-decoration:none;display:block;transition:transform 0.2s,box-shadow 0.2s } .mb-post-card:hover { transform:translateY(-3px);box-shadow:0 12px 32px rgb(44 74 90 / .08) } .mb-post-img { background:var(--pale);position:relative;overflow:hidden } .mb-post-img.large, .mb-post-img.tall { height:280px } .mb-post-img.sm { height:140px } .mb-post-img.sage { background:rgb(200 216 176 / .3) } .mb-post-cat { position:absolute;top:10px;left:10px;background:#FFF;color:#2C4A5A;font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:20px } .mb-post-body { padding:20px } .mb-post-body.sm { padding:14px } .mb-post-title { font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:var(--deep);line-height:1.3;margin-bottom:8px } .mb-post-title.sm { font-size:14px;line-height:1.35 } .mb-post-excerpt { font-size:13px;color:var(--mid);line-height:1.7;margin-bottom:12px;font-weight:300 } .mb-post-meta { font-size:11px;color:var(--cool);letter-spacing:.06em } .mb-posts-grid>a:first-child .mb-post-img.tall { height:200px!important } /* About block — Cool Mist variant. Lifted from the original Deep Slate treatment to break the visual stack with the now-Deep-Slate footer below. Cards become Cloud White with subtle Sage borders; text and numbers shift to Deep Slate; eyebrow drops to Muted Air for legibility. */ .mb-about { background:var(--cloud);padding:100px 5vw 60px } .mb-about-inner { max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center } .mb-about-body { font-size:15px;color:var(--body);line-height:1.9;font-weight:400;margin-bottom:32px } .mb-about-values { display:grid;grid-template-columns:1fr 1fr;gap:12px } .mb-about-value { background:var(--white);border:1px solid var(--sage);border-radius:14px;padding:22px 20px;transition:border-color 0.2s,transform 0.2s } .mb-about-value:hover { border-color:var(--deep);transform:translateY(-1px) } .mb-about-value-num { font-family:'Cormorant Garamond',serif!important;font-size:36px!important;font-weight:400!important;color:var(--deep)!important;line-height:1!important;margin-bottom:6px!important;display:block!important } .mb-about-value-label { font-size:12px!important;color:var(--body)!important;line-height:1.5!important } .mb-about .mb-about-inner h2 { font-size:28px!important;line-height:1.4!important;font-weight:400!important;color:var(--deep)!important } .mb-about .mb-about-inner h2 em { display:inline!important;font-style:italic!important } /* Eyebrow + button overrides scoped to the about block (the base classes were colored for a dark background). */ .mb-about .mb-section-eyebrow, .mb-about .mb-section-eyebrow--cool { color:var(--mid) } .mb-about .mb-btn-outline { border:1px solid var(--deep);color:var(--deep);background:transparent } .mb-about .mb-btn-outline:hover { background:var(--deep);color:var(--cloud) } .mb-post-hero { padding:130px 5vw 56px;position:relative;overflow:hidden } .mb-post-hero-inner { max-width:740px;margin:0 auto;position:relative;z-index:1 } .mb-post-body-wrap { background:var(--white);padding:60px 5vw 100px } .mb-post-body-inner { max-width:740px;margin:0 auto } .mb-post-body-inner p { font-size:16px;color:#4A6070;line-height:1.9;font-weight:300;margin-bottom:24px } .mb-post-body-inner h2 { font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:400;color:var(--deep);margin:48px 0 16px;line-height:1.2 } .mb-post-body-inner h3 { font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:var(--deep);margin:36px 0 12px } .mb-post-body-inner strong { color:var(--deep);font-weight:500 } .mb-post-body-inner ul { margin:0 0 24px;padding:0;list-style:none } .mb-post-body-inner ul li { font-size:16px;color:#4A6070;line-height:1.9;font-weight:300;padding:6px 0 6px 24px;position:relative } .mb-post-body-inner ul li::before { content:'';position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--cool) } .mb-related { background:var(--cloud);padding:80px 5vw } .mb-related-inner { max-width:1100px;margin:0 auto } /* Section heading for the manual-override mb/related-grid block. The auto-related grid (functions.php) doesn't use one because it sits inline below the post body where the heading would feel redundant. The manual block can include a heading because it's deliberate. */ .mb-related-h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(24px, 3vw, 32px); font-weight: 400; color: var(--deep); text-align: center; margin: 0 0 32px; letter-spacing: -0.01em; } /* ============================================================ Prev / Next post navigation — appended to single post body via the_content filter (mb_post_prev_next_nav in inc/post-extras.php). Two-column layout, label above title, sage rule on hover. ============================================================ */ .mb-post-nav { margin: 64px 5vw 80px; padding: 32px 0; border-top: 1px solid var(--pale); border-bottom: 1px solid var(--pale); } .mb-post-nav-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .mb-post-nav-prev, .mb-post-nav-next { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--deep); padding: 20px 24px; border-radius: 12px; transition: background 0.2s, transform 0.15s; } .mb-post-nav-next { text-align: right; align-items: flex-end; } .mb-post-nav-prev:hover, .mb-post-nav-next:hover { background: var(--cloud); } .mb-post-nav-prev:hover { transform: translateX(-2px); } .mb-post-nav-next:hover { transform: translateX(2px); } .mb-post-nav-label { font-family: 'DM Sans', system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); } .mb-post-nav-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--deep); } .mb-post-nav-empty { visibility: hidden; } @media (max-width: 600px) { .mb-post-nav-inner { grid-template-columns: 1fr; gap: 12px; } .mb-post-nav-next { text-align: left; align-items: flex-start; } } /* Grid uses default `align-items: stretch` so every card in a row reaches the same bottom edge — the variable-length title was leaving ragged bottoms when set to `start`. Cards themselves are flex-column with height:100% so they actually fill the stretched cell, and the meta line gets pushed to the bottom via margin-top:auto on .mb-related-body. */ .mb-related-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px } .mb-related-card { background:var(--white);border-radius:16px;overflow:hidden;border:1px solid var(--pale);text-decoration:none;display:flex;flex-direction:column;height:100%;transition:transform 0.2s,box-shadow 0.2s } .mb-related-card:hover { transform:translateY(-3px);box-shadow:0 12px 32px rgb(44 74 90 / .08) } .mb-related-img { height:160px;background:var(--pale);position:relative } .mb-related-img.sage { background:rgb(200 216 176 / .3) } .mb-related-body { padding:18px;flex:1 1 auto;display:flex;flex-direction:column } /* Push the meta line to the bottom of the body so cards with shorter titles don't show a gap above the meta — meta sits flush with the card's bottom. */ .mb-related-body .mb-related-meta { margin-top:auto;padding-top:8px } .mb-related-card-title { font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:var(--deep);line-height:1.3;margin-bottom:8px } .mb-related-meta { font-size:11px;color:var(--cool);letter-spacing:.06em } .mb-filter-pill.active { background:var(--deep);border-color:var(--deep);color:var(--cloud) } .mb-pillar-section.alt { background:var(--white) } .mb-pillar-link { font-size:12px;color:var(--deep);font-weight:500;text-decoration:none;letter-spacing:.06em;display:flex;align-items:center;gap:6px;white-space:nowrap;margin-top:8px } .mb-products-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:20px } .mb-product-card { background:var(--white);border-radius:16px;border:1px solid var(--pale);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s } .mb-product-card:hover { transform:translateY(-3px);box-shadow:0 12px 32px rgb(44 74 90 / .08) } .mb-product-img { height:220px;background:var(--cloud);position:relative } .mb-product-badge { position:absolute;top:14px;left:14px;padding:4px 12px;border-radius:20px;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase } .mb-badge-want { background:var(--deep);color:var(--cloud) } .mb-badge-trying { background:var(--sage);color:var(--deep) } .mb-product-body { padding:24px } .mb-product-category { font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-bottom:8px } .mb-product-name { font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:var(--deep);line-height:1.3;margin-bottom:10px } .mb-product-desc { font-size:13px;color:var(--mid);line-height:1.75;font-weight:300;margin-bottom:20px } .mb-product-footer { display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--pale) } .mb-product-honest { font-size:12px;color:var(--mid);font-weight:300;line-height:1.5;font-style:italic;max-width:60% } .pull-quote { background:var(--cloud);border-radius:16px;padding:28px 32px;border-left:4px solid var(--cool) } .pull-quote p { font-family:'Cormorant Garamond',serif!important;font-size:20px!important;font-style:italic;color:var(--deep)!important;line-height:1.6!important;font-weight:400!important;margin:0!important } .mb-nav-logo { font-family:'Cormorant Garamond',serif!important;font-size:20px!important;font-weight:500!important;color:#2C4A5A!important;text-decoration:none!important;white-space:nowrap!important;flex-shrink:0!important } .mb-page { background:var(--sage-light)!important } .mb-hero.compact { padding-bottom:40px!important } .mb-hero.compact { padding-bottom:0!important } .mb-stat-number { font-family:'Cormorant Garamond',serif;font-size:clamp(28px, 3.2vw, 36px);font-weight:300;color:#2C4A5A;line-height:1.05;margin-bottom:8px;word-break:keep-all;overflow-wrap:normal;hyphens:none } .mb-stat-label { font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#7A9BAD } .mb-stats-bar { background:#2C4A5A;padding:28px 5vw;overflow:hidden } .mb-stats-bar-inner { max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center } .mb-stats-bar .mb-stat-number { font-family:'Cormorant Garamond',serif;font-size:clamp(16px, 3.5vw, 32px);font-weight:400;color:#F4F7FA;line-height:1.05;margin-bottom:4px;word-break:keep-all;overflow-wrap:normal;hyphens:none } .mb-stats-bar .mb-stat-label { font-size:clamp(8px, 1.5vw, 11px);color:#B5CED8;letter-spacing:.08em;text-transform:uppercase } .mb-blog-section { padding:80px 5vw 120px;background:#F4F7FA } .mb-blog-inner { max-width:1100px;margin:0 auto } .mb-blog-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px } .mb-blog-card { background:#FFF;border-radius:16px;border:1px solid #DDE8EF;padding:28px 24px;display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:transform 0.2s,box-shadow 0.2s } .mb-blog-card:hover { transform:translateY(-3px);box-shadow:0 12px 32px rgb(44 74 90 / .08) } .mb-blog-meta { display:flex;align-items:center;gap:8px;flex-wrap:wrap } .mb-blog-cat { font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#7A9BAD } .mb-blog-readtime { font-size:11px;font-weight:400;color:#7A9BAD;letter-spacing:.04em } .mb-blog-meta-sep { font-size:11px;color:#B5CED8;line-height:1 } .mb-blog-date { font-size:11px;color:#B5CED8 } .mb-blog-rule { width:32px;height:3px;border-radius:2px } .mb-blog-rule--sage { background:#C8D8B0 } .mb-blog-rule--mid { background:#7A9BAD } .mb-blog-rule--cool { background:#B5CED8 } .mb-blog-rule--pale { background:#DDE8EF } .mb-blog-title { font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:#2C4A5A;line-height:1.25;margin:0 } .mb-blog-excerpt { font-size:13px;color:#7A9BAD;line-height:1.7;font-weight:300;margin:0 } .mb-blog-link { font-size:12px;color:#2C4A5A;text-decoration:none;letter-spacing:.04em;margin-top:auto } .mb-path-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:0 } .mb-path-card { display:block;background:#F4F7FA;border:1px solid #DDE8EF;border-radius:16px;padding:32px;text-decoration:none;transition:transform 0.2s,box-shadow 0.2s } .mb-path-card:hover { transform:translateY(-3px);box-shadow:0 12px 32px rgb(44 74 90 / .08) } .mb-path-cat { font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#7A9BAD;margin-bottom:12px } .mb-path-question { font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:#2C4A5A;line-height:1.3;margin-bottom:12px;font-style:italic } .mb-path-desc { font-size:13px;color:#7A9BAD;line-height:1.7;font-weight:300;margin-bottom:20px } .mb-path-link { font-size:12px;color:#2C4A5A;font-weight:500 } .mb-topic-browse-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 } .mb-topic-browse-card { display:block;background:#FFF;border-radius:16px;padding:28px 24px;border:1px solid #DDE8EF;text-decoration:none;transition:transform 0.2s,box-shadow 0.2s } .mb-topic-browse-card:hover { transform:translateY(-3px);box-shadow:0 12px 32px rgb(44 74 90 / .08) } .mb-topic-browse-title { font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:#2C4A5A;margin-bottom:8px } .mb-topic-browse-desc { font-size:13px;color:#7A9BAD;line-height:1.6;font-weight:300 } .mb-newsletter-section { padding:80px 5vw;background:#F4F7FA } .mb-newsletter-inner { max-width:700px;margin:0 auto;text-align:center } .mb-newsletter-form { display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:420px;margin:0 auto } .mb-newsletter-input { font-family:'DM Sans',sans-serif;font-size:15px;font-weight:300;color:#2C4A5A;background:#FFF;border:1px solid #DDE8EF;border-radius:40px;padding:14px 24px;width:100%;box-sizing:border-box;outline:none } .mb-newsletter-input:focus { border-color:#7A9BAD } .mb-newsletter-submit { font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;letter-spacing:.06em;color:#F4F7FA;background:#2C4A5A;border:none;border-radius:40px;padding:14px 32px;cursor:pointer;width:100%;transition:background 0.2s } .mb-newsletter-submit:hover { background:#7A9BAD } .mb-newsletter-fineprint { font-size:12px;color:#B5CED8;font-weight:300;margin:0 } .mb-cta-dark { padding:80px 5vw;background:#2C4A5A;text-align:center } .mb-cta-dark-inner { max-width:600px;margin:0 auto } .mb-cta-dark-eyebrow { font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#B5CED8;margin-bottom:20px;display:block } .mb-cta-dark-title { font-family:'Cormorant Garamond',serif;font-size:clamp(28px, 4vw, 44px);font-weight:300;line-height:1.2;color:#F4F7FA;margin-bottom:16px } .mb-cta-dark-sub { font-size:15px;color:#B5CED8;line-height:1.8;font-weight:300;margin-bottom:36px } .mb-cta-dark-btn { background:#F4F7FA;color:#2C4A5A;padding:14px 32px;border-radius:40px;font-size:13px;font-weight:500;letter-spacing:.06em;text-decoration:none;display:inline-block;transition:background 0.2s,color 0.2s } .mb-cta-dark-btn:hover { background:#B5CED8;color:#2C4A5A } .mb-section-intro { max-width:580px;margin-bottom:48px } .mb-section-white { padding:80px 5vw;background:#FFF } .mb-section-cloud { padding:80px 5vw;background:#F4F7FA } .mb-section-cloud-inner, .mb-section-white-inner { max-width:1100px;margin:0 auto } .mb-post-hero-eyebrow { display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#7A9BAD;text-decoration:none;margin-bottom:20px } .mb-post-hero-eyebrow::before { content:"";display:block;width:16px;height:1px;background:#7A9BAD } .mb-post-hero h1 { font-family:'Cormorant Garamond',serif;font-size:clamp(36px, 5vw, 58px);font-weight:300;line-height:1.1;color:#2C4A5A;margin-bottom:24px;letter-spacing:-.01em } .mb-post-hero h1 em { font-style:italic;color:#7A9BAD } .mb-post-meta { font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7A9BAD } .mb-post-callout { background:#F4F7FA;border-radius:16px;padding:28px 32px;border:1px solid #DDE8EF } .mb-post-callout p { font-size:14px!important;line-height:1.7!important;margin:0!important;font-weight:300!important;color:#4A6070!important } .mb-post-callout a { color:#2C4A5A;font-weight:500 } .mb-related-title { font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:400;color:#2C4A5A;margin-bottom:36px } .mb-section-block { padding:80px 5vw } .mb-section-block--white { background:#FFF } .mb-section-block--cloud { background:#F4F7FA } .mb-section-block-inner { max-width:1100px;margin:0 auto } .mb-section-header { margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid #DDE8EF } .mb-intro-band { padding:40px 5vw;background:#2C4A5A } .mb-intro-band-inner { max-width:1100px;margin:0 auto } .mb-intro-band-text { font-size:14px;color:#B5CED8;line-height:1.7;font-weight:300;margin:0 } .mb-product-img-branded { height:220px;background:linear-gradient(135deg,#2C4A5A,#3D5A6A);position:relative;display:flex;align-items:center;justify-content:center } .mb-product-img-branded--alt { background:linear-gradient(135deg,#3D5A6A,#4A6F82) } .mb-product-img-content { text-align:center;padding:20px } .mb-product-img-title { font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:#F4F7FA;line-height:1.2 } .mb-product-img-title--sm { font-size:20px;line-height:1.3 } .mb-product-img-tag { font-size:10px;color:#B5CED8;margin-top:8px;letter-spacing:.1em;text-transform:uppercase } .mb-product-price { font-size:13px;color:#2C4A5A;font-weight:500;margin:0 0 20px 0 } .mb-placeholder-card { background:#FFF;border-radius:16px;border:1px dashed #B5CED8;display:flex;align-items:center;justify-content:center;min-height:200px } .mb-placeholder-card--cloud { background:#F4F7FA } .mb-placeholder-content { text-align:center;padding:32px } .mb-placeholder-title { font-family:'Cormorant Garamond',serif;font-size:20px;color:#2C4A5A;margin-bottom:8px } .mb-placeholder-desc { font-size:13px;color:#7A9BAD;font-weight:300 } .mb-cta-card { background:#FFF;border:1px dashed #B5CED8;border-radius:16px;padding:60px;text-align:center } .mb-cta-card-desc { font-size:14px;color:#7A9BAD;font-weight:300;line-height:1.7;max-width:480px;margin:0 auto 28px } .mb-product-img.mb-product-img--220 { height:220px } .mb-product-img-branded .mb-product-badge { position:absolute;top:14px;left:14px } .mb-two-col-section { padding:60px 5vw 100px;background:#FFF } .mb-two-col-grid { max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start } .mb-two-col-sidebar { display:flex;flex-direction:column;gap:40px } .mb-form { display:flex;flex-direction:column;gap:20px } .mb-form-row { display:grid;grid-template-columns:1fr 1fr;gap:16px } .mb-form-field { display:flex;flex-direction:column;gap:8px } .mb-form-label { font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#7A9BAD } .mb-form-input, .mb-form-textarea { font-family:'DM Sans',sans-serif;font-size:15px;font-weight:300;color:#2C4A5A;background:#F4F7FA;border:1px solid #DDE8EF;border-radius:8px;padding:12px 16px;outline:none;width:100%;box-sizing:border-box } .mb-form-input:focus, .mb-form-textarea:focus { border-color:#7A9BAD } .mb-form-textarea { resize:vertical;line-height:1.7 } .mb-form-charcount { font-size:11px;color:#B5CED8;text-align:right } .mb-form-charcount--near-limit { color:#2C4A5A } .mb-form-checkbox-row { display:flex;align-items:flex-start;gap:12px;cursor:pointer } .mb-form-checkbox { margin-top:3px;accent-color:#2C4A5A;width:16px;height:16px;flex-shrink:0 } .mb-form-checkbox-label { font-size:14px;color:#4A6070;font-weight:300;line-height:1.6 } .mb-dot-list { display:flex;flex-direction:column;gap:14px;margin-top:16px } .mb-dot-list-item { display:flex;align-items:flex-start;gap:14px } .mb-dot-list-dot { width:6px;height:6px;border-radius:50%;background:#C8D8B0;flex-shrink:0;margin-top:7px } .mb-dot-list-text { font-size:14px;color:#4A6070;line-height:1.7;font-weight:300;margin:0 } .mb-dot-list-text a { color:#2C4A5A;text-decoration:none;border-bottom:1px solid #DDE8EF } .mb-dark-card { background:#2C4A5A;border-radius:16px;padding:32px } .mb-dark-card .mb-eyebrow { color:#B5CED8 } .mb-dark-card-text { font-size:15px;color:#DDE8EF;line-height:1.7;font-weight:300;margin-bottom:20px } .mb-dark-card-text strong { font-weight:500;color:#F4F7FA } .mb-hero-h1 { font-family:'Cormorant Garamond',serif;font-size:clamp(40px, 5vw, 60px);font-weight:300;line-height:1.1;color:var(--deep);margin-bottom:20px;letter-spacing:-.01em } .mb-hero-h1 em { font-style:italic;color:var(--mid) } .mb-hero-h1--large { font-size:clamp(44px, 6vw, 72px);line-height:1.05;margin-bottom:24px } .mb-post-hero { background:var(--cloud) } .mb-post-hero--sage { background:rgb(200 216 176 / .18) } .mb-post-hero--cool { background:rgb(181 206 216 / .18) } .mb-product-img-branded { background:linear-gradient(135deg,var(--deep),var(--mid)) } .mb-product-img-branded--alt { background:linear-gradient(135deg,var(--mid),var(--deep)) } .mb-hero-h1 { font-family:'Cormorant Garamond',serif;font-size:clamp(40px, 5vw, 60px);font-weight:300;line-height:1.1;color:var(--deep);margin-bottom:20px;letter-spacing:-.01em } .mb-hero-h1 em { font-style:italic;color:var(--mid) } .mb-hero-h1--large { font-size:clamp(44px, 6vw, 72px);line-height:1.05;margin-bottom:24px } .mb-eyebrow--lined { display:inline-flex;align-items:center;gap:10px } .mb-eyebrow--lined::before { content:"";display:block;width:20px;height:1px;background:var(--mid) } .mb-section-title--sm { font-size:clamp(28px, 3.5vw, 42px)!important } .mb-divider { width:48px;height:2px;background:var(--pale);margin:48px 0;border:none } .mb-post-hero { background:var(--cloud) } .mb-post-hero--sage { background:rgb(200 216 176 / .18) } .mb-post-hero--cool { background:rgb(181 206 216 / .18) } .mb-product-img-branded { background:linear-gradient(135deg,var(--deep),var(--mid)) } .mb-product-img-branded--alt { background:linear-gradient(135deg,var(--mid),var(--deep)) } .mb-section-block { padding:var(--space-lg) var(--gutter) } .mb-hero-h1 { font-family:'Cormorant Garamond',serif;font-size:clamp(40px, 5vw, 60px);font-weight:300;line-height:1.1;color:var(--deep);margin-bottom:20px;letter-spacing:-.01em } .mb-hero-h1 em { font-style:italic;color:var(--mid) } .mb-hero-h1--large { font-size:clamp(44px, 6vw, 72px);line-height:1.05;margin-bottom:24px } .mb-eyebrow--lined { display:inline-flex;align-items:center;gap:10px } .mb-eyebrow--lined::before { content:"";display:block;width:20px;height:1px;background:var(--mid) } .mb-section-title--sm { font-size:clamp(28px, 3.5vw, 42px)!important } .mb-divider { width:48px;height:2px;background:var(--pale);margin:48px 0;border:none } .mb-post-hero { background:var(--cloud) } .mb-post-hero--sage { background:rgb(200 216 176 / .18) } .mb-post-hero--cool { background:rgb(181 206 216 / .18) } .mb-product-img-branded { background:linear-gradient(135deg,var(--deep),var(--mid)) } .mb-product-img-branded--alt { background:linear-gradient(135deg,var(--mid),var(--deep)) } .mb-section-block { padding:var(--space-lg) var(--gutter) } .mb-section-intro-sub { font-size:15px;color:var(--mid);font-weight:300;line-height:1.8;margin:0 } .mb-newsletter-sub { font-size:15px;color:var(--body);line-height:1.8;font-weight:300;max-width:480px;margin:0 auto 32px } .mb-section-title--flush { margin:0!important } .mb-hero-fineprint { font-size:13px;color:var(--mid);font-weight:300 } .mb-hero-fineprint a { color:var(--deep) } .mb-section-title em { font-style:italic;color:var(--mid) } .mb-about-beginning { max-width:740px;display:flex;flex-direction:column;gap:24px } .mb-about-beginning p { font-size:16px;color:var(--body);line-height:1.9;font-weight:300;margin:0 } .mb-about-section-intro { max-width:580px;margin-bottom:24px } .mb-about-section-intro--lg { margin-bottom:48px } .mb-promise-actions { display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap } .mb-eyebrow--on-sage { color:#5A7A6A } .mb-section--white { background:var(--white) } .mb-post-hero h1 em { font-style:italic;color:var(--mid) } .mb-page--home { width:100%;max-width:100%;overflow-x:hidden;margin-bottom:-60px } .mb-posts-grid--featured { display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;width:100% } .mb-posts-stack { display:flex;flex-direction:column;gap:16px } .mb-post-img--browse { background:var(--pale);display:flex;align-items:center;justify-content:center } .mb-post-img-browse-text { font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--mid) } .mb-section-eyebrow--cool { color:var(--cool) } .mb-about-h2 { font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:400;color:var(--deep);line-height:1.4;margin-bottom:20px } .mb-blog-filter { display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 0 4rem 0;padding:0 1rem } .mb-blog-filter-pill { display:inline-block;padding:.5rem 1.1rem;border-radius:40px;border:1px solid var(--cool,#B5CED8);background:#fff0;color:var(--mid,#7A9BAD);font-family:'DM Sans',Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:all 0.18s ease;white-space:nowrap } .mb-blog-filter-pill:hover { border-color:var(--deep,#2C4A5A);color:var(--deep,#2C4A5A) } .mb-blog-filter-pill.is-active { background:var(--deep,#2C4A5A);border-color:var(--deep,#2C4A5A);color:var(--cloud,#F4F7FA) } .mb-blog-pagination { display:flex;align-items:center;justify-content:center;gap:1.5rem;margin:4rem 0 2rem 0;font-family:'DM Sans',Arial,sans-serif;font-size:13px } .mb-blog-pagination-link { color:var(--deep,#2C4A5A);text-decoration:none;font-weight:500;letter-spacing:.04em;padding:.5rem 1rem;border-radius:40px;transition:all 0.18s ease } .mb-blog-pagination-link:hover { background:var(--pale,#DDE8EF) } .mb-blog-pagination-current { color:var(--mid,#7A9BAD);font-size:12px;letter-spacing:.06em;text-transform:uppercase } .mb-blog-empty { text-align:center;padding:4rem 1rem;color:var(--mid,#7A9BAD);font-family:'DM Sans',Arial,sans-serif;font-size:15px } .mb-blog-empty a { color:var(--deep,#2C4A5A);text-decoration:underline } .mb-blog-section { padding:80px 5vw 120px;background:#F4F7FA } .mb-blog-section .mb-blog-filter { padding-top:32px!important } .mb-blog-section .mb-blog-grid { padding-bottom:48px!important } .mb-blog-section { padding-top:24px!important;padding-bottom:48px!important } /* ============================================================ Media-query rules (preserved nesting) ============================================================ */ @media(max-width:768px) { /* Hide ONLY the desktop nav-links ul, not every ul inside .mb-nav. The mobile menu's
    is also inside .mb-nav structurally, so the looser `.mb-nav ul` selector was hiding it too — which made the hamburger panel render blank when opened. */ .mb-nav-links { display:none!important } .mb-hamburger { display:flex!important } } @media(min-width:769px) { .mb-mobile-menu { max-height:0!important;padding:0!important;overflow:hidden!important } } @media(max-width:900px) { .mb-pillars-grid { grid-template-columns:1fr 1fr } .mb-posts-grid { grid-template-columns:1fr 1fr } .mb-about-inner { grid-template-columns:1fr;gap:40px } .mb-products-grid { grid-template-columns:1fr } } @media(max-width:768px) { .mb-posts-grid { grid-template-columns:1fr!important } .mb-product-footer { flex-direction:column;align-items:flex-start;gap:12px } .mb-product-honest { max-width:100% } } @media(max-width:600px) { .mb-pillars-grid { grid-template-columns:1fr } .mb-posts-grid { grid-template-columns:1fr } .mb-about-values { grid-template-columns:1fr } .mb-products-grid { grid-template-columns:1fr!important } } @media (max-width:900px) { .mb-blog-grid { grid-template-columns:repeat(2,1fr) } } @media (max-width:600px) { .mb-blog-grid { grid-template-columns:1fr } } @media (max-width:900px) { .mb-topic-browse-grid { grid-template-columns:repeat(2,1fr) } } @media (max-width:768px) { .mb-path-grid { grid-template-columns:1fr;gap:16px } .mb-topic-browse-grid { grid-template-columns:repeat(2,1fr) } } @media (max-width:480px) { .mb-topic-browse-grid { grid-template-columns:1fr } } @media (max-width:768px) { .mb-related-grid { grid-template-columns:1fr!important } } @media (max-width:768px) { .mb-two-col-grid { grid-template-columns:1fr!important;gap:48px!important } .mb-form-row { grid-template-columns:1fr!important } } @media (max-width:900px) { .mb-posts-grid--featured { grid-template-columns:1fr 1fr } } @media (max-width:600px) { .mb-posts-grid--featured { grid-template-columns:1fr } .mb-posts-stack { display:contents } } @media (max-width:600px) { .mb-blog-filter-pill { padding:.4rem .9rem;font-size:11px } .mb-blog-pagination { flex-direction:column;gap:.75rem } } /* ============================================================ Pillar color application (added 2026-05-14) Strict 1:1 with the 4 content pillars per CLAUDE.md §2 / brand voice manifest §11. Slug→class mapping is in inc/pillar.php. Decluttering & Organizing → .is-decluttering → --deep (Deep Slate, light ink) Mindful Spending → .is-mindful-spending → --sage (Sage, dark ink) Simple Living → .is-simple-living → --mid (Muted Air, light ink) Your Home → .is-your-home → --cool (Cool Mist, dark ink) MB News / fallback → .is-mb-news → --deep (defaults to Decluttering tint) Contrast pattern matches the homepage .mb-pillar-card variants (lines 1672-1710): Cloud White ink on Deep Slate + Muted Air; Deep Slate ink on Sage + Cool Mist. ============================================================ */ /* ----- Surface 1: post hero band (singular post pages) — SOFT TINTS ----- */ /* Backgrounds use --*-soft (pillar @ 80% over Cloud White) for visual restraint. Decluttering soft is dark enough to take Cloud White ink. Sage / Cool Mist / Muted Air softs all take Deep Slate ink. */ .mb-post-hero.is-decluttering, .mb-post-hero.is-mb-news { background:var(--deep-soft) } .mb-post-hero.is-decluttering h1, .mb-post-hero.is-decluttering .mb-post-hero-eyebrow, .mb-post-hero.is-mb-news h1, .mb-post-hero.is-mb-news .mb-post-hero-eyebrow { color:var(--cloud) } .mb-post-hero.is-decluttering h1 em, .mb-post-hero.is-mb-news h1 em { color:var(--cool) } .mb-post-hero.is-decluttering .mb-post-meta, .mb-post-hero.is-mb-news .mb-post-meta { color:rgba(244,247,250,.82) } .mb-post-hero.is-mindful-spending { background:var(--sage-soft) } .mb-post-hero.is-mindful-spending h1, .mb-post-hero.is-mindful-spending .mb-post-hero-eyebrow, .mb-post-hero.is-mindful-spending h1 em { color:var(--deep) } .mb-post-hero.is-mindful-spending .mb-post-meta { color:rgba(44,74,90,.72) } .mb-post-hero.is-simple-living { background:var(--mid-soft) } .mb-post-hero.is-simple-living h1, .mb-post-hero.is-simple-living .mb-post-hero-eyebrow, .mb-post-hero.is-simple-living h1 em { color:var(--deep) } .mb-post-hero.is-simple-living .mb-post-meta { color:rgba(44,74,90,.78) } .mb-post-hero.is-your-home { background:var(--cool-soft) } .mb-post-hero.is-your-home h1, .mb-post-hero.is-your-home .mb-post-hero-eyebrow, .mb-post-hero.is-your-home h1 em { color:var(--deep) } .mb-post-hero.is-your-home .mb-post-meta { color:rgba(44,74,90,.7) } /* Decorative hero blobs are subtly visible against each tint — soften them so they don't compete with the eyebrow/h1/meta. */ .mb-post-hero[class*="is-"] .mb-hero-circle { opacity:.22 } /* ----- Surface 2: in-post accents — divider, pull-quote, callout ----- */ /* Cascade-scoped via the body class (added by mb_pillar_body_class). */ body.is-decluttering .mb-divider, body.is-mb-news .mb-divider { background:var(--deep) } body.is-mindful-spending .mb-divider { background:var(--sage) } body.is-simple-living .mb-divider { background:var(--mid) } body.is-your-home .mb-divider { background:var(--cool) } body.is-decluttering .pull-quote, body.is-mb-news .pull-quote { border-left-color:var(--deep) } body.is-mindful-spending .pull-quote { border-left-color:var(--sage) } body.is-simple-living .pull-quote { border-left-color:var(--mid) } body.is-your-home .pull-quote { border-left-color:var(--cool) } /* Callout: light Cloud-White panel kept; left edge becomes a thicker pillar accent (4px) so the box reads as part of the pillar treatment without becoming a saturated panel. */ .mb-post-callout.is-decluttering, .mb-post-callout.is-mb-news { border-left:4px solid var(--deep);padding-left:28px } .mb-post-callout.is-mindful-spending { border-left:4px solid var(--sage);padding-left:28px } .mb-post-callout.is-simple-living { border-left:4px solid var(--mid);padding-left:28px } .mb-post-callout.is-your-home { border-left:4px solid var(--cool);padding-left:28px } /* ----- Surface 3: related-grid cards (3 cards under each post) ----- */ /* Tint the top .mb-related-img band per card's own pillar; body stays white so the card title stays highly legible. The .mb-post-cat label inside flips ink for contrast. */ .mb-related-card.is-decluttering .mb-related-img, .mb-related-card.is-mb-news .mb-related-img { background:var(--deep) } .mb-related-card.is-mindful-spending .mb-related-img { background:var(--sage) } .mb-related-card.is-simple-living .mb-related-img { background:var(--mid) } .mb-related-card.is-your-home .mb-related-img { background:var(--cool) } /* The legacy `.mb-related-img.sage` alternating-pattern modifier (specificity 0,2,0) loses cleanly to the pillar rule above (0,3,0) — no defeat selector needed. When no pillar is set, .sage still applies as before. */ /* The pill itself keeps its base styling (white bg + Deep Slate text from .mb-post-cat at line 1784). Deep Slate ink on a white pill reads cleanly against all four pillar IMG band colors (Deep Slate, Sage, Muted Air, Cool Mist), so no per-pillar ink override is needed here. Earlier code flipped the ink to var(--cloud) on is-decluttering / is-mb-news / is-simple-living cards, which rendered near-white text on a white pill — invisible — visible bug on impulse-buying and other posts before 2026-05-18. */ /* ----- Surface 4: blog-grid cards (/blog/ archive) — SOFT TINTS ----- */ /* Whole-card tint per the post's pillar at 80% over Cloud White. */ .mb-blog-card.is-decluttering, .mb-blog-card.is-mb-news { background:var(--deep-soft);border-color:var(--deep-soft) } .mb-blog-card.is-decluttering .mb-blog-title, .mb-blog-card.is-mb-news .mb-blog-title { color:var(--cloud) } .mb-blog-card.is-decluttering .mb-blog-cat, .mb-blog-card.is-decluttering .mb-blog-readtime, .mb-blog-card.is-decluttering .mb-blog-date, .mb-blog-card.is-decluttering .mb-blog-meta-sep, .mb-blog-card.is-mb-news .mb-blog-cat, .mb-blog-card.is-mb-news .mb-blog-readtime, .mb-blog-card.is-mb-news .mb-blog-date, .mb-blog-card.is-mb-news .mb-blog-meta-sep { color:rgba(244,247,250,.82) } .mb-blog-card.is-decluttering .mb-blog-excerpt, .mb-blog-card.is-mb-news .mb-blog-excerpt { color:rgba(244,247,250,.9) } .mb-blog-card.is-decluttering .mb-blog-link, .mb-blog-card.is-mb-news .mb-blog-link { color:var(--cloud) } .mb-blog-card.is-mindful-spending { background:var(--sage-soft);border-color:var(--sage-soft) } .mb-blog-card.is-mindful-spending .mb-blog-title, .mb-blog-card.is-mindful-spending .mb-blog-excerpt, .mb-blog-card.is-mindful-spending .mb-blog-link { color:var(--deep) } .mb-blog-card.is-mindful-spending .mb-blog-cat, .mb-blog-card.is-mindful-spending .mb-blog-readtime, .mb-blog-card.is-mindful-spending .mb-blog-date, .mb-blog-card.is-mindful-spending .mb-blog-meta-sep { color:rgba(44,74,90,.72) } .mb-blog-card.is-simple-living { background:var(--mid-soft);border-color:var(--mid-soft) } .mb-blog-card.is-simple-living .mb-blog-title, .mb-blog-card.is-simple-living .mb-blog-excerpt, .mb-blog-card.is-simple-living .mb-blog-link { color:var(--deep) } .mb-blog-card.is-simple-living .mb-blog-cat, .mb-blog-card.is-simple-living .mb-blog-readtime, .mb-blog-card.is-simple-living .mb-blog-date, .mb-blog-card.is-simple-living .mb-blog-meta-sep { color:rgba(44,74,90,.78) } .mb-blog-card.is-your-home { background:var(--cool-soft);border-color:var(--cool-soft) } .mb-blog-card.is-your-home .mb-blog-title, .mb-blog-card.is-your-home .mb-blog-excerpt, .mb-blog-card.is-your-home .mb-blog-link { color:var(--deep) } .mb-blog-card.is-your-home .mb-blog-cat, .mb-blog-card.is-your-home .mb-blog-readtime, .mb-blog-card.is-your-home .mb-blog-date, .mb-blog-card.is-your-home .mb-blog-meta-sep { color:rgba(44,74,90,.7) } /* The .mb-blog-rule colored bar above the title becomes redundant against a tinted card. Hide it inside any pillar variant so the title sits flush. */ .mb-blog-card[class*="is-"] .mb-blog-rule { display:none } /* Hover lift — darker shadow on the lighter pillar tints for visibility. */ .mb-blog-card.is-mindful-spending:hover, .mb-blog-card.is-your-home:hover { box-shadow:0 12px 32px rgb(44 74 90 / .18) } /* ----- Surface 5: /start-here/ path cards (entry-point cards) ----- */ /* Whole-card tint per the linked post's pillar; eyebrow + question + desc + link ink flips for contrast following the same pattern as blog-grid cards. */ .mb-path-card.is-decluttering, .mb-path-card.is-mb-news { background:var(--deep-soft);border-color:var(--deep-soft) } .mb-path-card.is-decluttering .mb-path-question, .mb-path-card.is-decluttering .mb-path-link, .mb-path-card.is-mb-news .mb-path-question, .mb-path-card.is-mb-news .mb-path-link { color:var(--cloud) } .mb-path-card.is-decluttering .mb-path-cat, .mb-path-card.is-mb-news .mb-path-cat { color:rgba(244,247,250,.82) } .mb-path-card.is-decluttering .mb-path-desc, .mb-path-card.is-mb-news .mb-path-desc { color:rgba(244,247,250,.9) } .mb-path-card.is-mindful-spending { background:var(--sage-soft);border-color:var(--sage-soft) } .mb-path-card.is-mindful-spending .mb-path-cat, .mb-path-card.is-mindful-spending .mb-path-question, .mb-path-card.is-mindful-spending .mb-path-desc, .mb-path-card.is-mindful-spending .mb-path-link { color:var(--deep) } .mb-path-card.is-simple-living { background:var(--mid-soft);border-color:var(--mid-soft) } .mb-path-card.is-simple-living .mb-path-cat, .mb-path-card.is-simple-living .mb-path-question, .mb-path-card.is-simple-living .mb-path-desc, .mb-path-card.is-simple-living .mb-path-link { color:var(--deep) } .mb-path-card.is-your-home { background:var(--cool-soft);border-color:var(--cool-soft) } .mb-path-card.is-your-home .mb-path-cat, .mb-path-card.is-your-home .mb-path-question, .mb-path-card.is-your-home .mb-path-desc, .mb-path-card.is-your-home .mb-path-link { color:var(--deep) } .mb-path-card.is-mindful-spending:hover, .mb-path-card.is-your-home:hover { box-shadow:0 12px 32px rgb(44 74 90 / .18) } /* ----- Surface 6: /start-here/ topic-browse cards ----- */ /* Smaller cards (4-up grid). Same tint + ink pattern. */ .mb-topic-browse-card.is-decluttering, .mb-topic-browse-card.is-mb-news { background:var(--deep-soft);border-color:var(--deep-soft) } .mb-topic-browse-card.is-decluttering .mb-topic-browse-title, .mb-topic-browse-card.is-mb-news .mb-topic-browse-title { color:var(--cloud) } .mb-topic-browse-card.is-decluttering .mb-topic-browse-desc, .mb-topic-browse-card.is-mb-news .mb-topic-browse-desc { color:rgba(244,247,250,.9) } .mb-topic-browse-card.is-mindful-spending { background:var(--sage-soft);border-color:var(--sage-soft) } .mb-topic-browse-card.is-mindful-spending .mb-topic-browse-title, .mb-topic-browse-card.is-mindful-spending .mb-topic-browse-desc { color:var(--deep) } .mb-topic-browse-card.is-simple-living { background:var(--mid-soft);border-color:var(--mid-soft) } .mb-topic-browse-card.is-simple-living .mb-topic-browse-title, .mb-topic-browse-card.is-simple-living .mb-topic-browse-desc { color:var(--deep) } .mb-topic-browse-card.is-your-home { background:var(--cool-soft);border-color:var(--cool-soft) } .mb-topic-browse-card.is-your-home .mb-topic-browse-title, .mb-topic-browse-card.is-your-home .mb-topic-browse-desc { color:var(--deep) } .mb-topic-browse-card.is-mindful-spending:hover, .mb-topic-browse-card.is-your-home:hover { box-shadow:0 12px 32px rgb(44 74 90 / .18) } /* ----- Surface 7: homepage Latest Reads cards (.mb-post-card) ----- */ /* Band-tint pattern matching .mb-related-card: the .mb-post-img top section takes the linked post's pillar color; the white body keeps title/excerpt highly legible. The .mb-post-cat pill is white-on-color so it reads against any pillar background. The "Browse all articles" card links to /blog/ (a page) so the content filter no-ops on it and it stays neutral. */ .mb-post-card.is-decluttering .mb-post-img, .mb-post-card.is-mb-news .mb-post-img { background:var(--deep) } .mb-post-card.is-mindful-spending .mb-post-img { background:var(--sage) } .mb-post-card.is-simple-living .mb-post-img { background:var(--mid) } .mb-post-card.is-your-home .mb-post-img { background:var(--cool) } /* The legacy `.mb-post-img.sage` alternating-pattern modifier (specificity 0,2,0) loses cleanly to the pillar rule above (0,3,0) — no defeat selector needed. When no pillar is set, .sage still applies as before. */