/* Theme Name: MMM — STL Derm Theme URI: https://matchmarketing.ai Description: GeneratePress child theme — St. Louis Dermatology & Cosmetic Surgery build (MMM 2.0) Author: MatchMarketing™ Template: generatepress Version: 2.9 ============================================================ TABLE OF CONTENTS ============================================================ 1. FONTS 2. TOKENS 3. BASE 4. TYPOGRAPHY 5. LINKS 6. HEADER (base) 7. NAVIGATION (base) 8. BUTTONS (base) 9. FORMS (base) 10. CONTENT SPACING / ALIGNFULL 11. UTILITIES 12. FOOTER (base) 13. MOBILE STICKY CTA 14. UTILITY BAR 15. SECTION HELPERS (eyebrow, lede, inner, head) 16. HERO BAND (homepage) 17. PROVIDER CARD (hero right column) 18. BUTTON HELPERS (icons, sizes, hero overrides) 19. TRUST BAR 20. SERVICES HUB (homepage — 5 big + 6 mini) 21. TRUST PILLARS (homepage — 4 stat pillars on dark) 22. PREMIUM SURGERY BAND (homepage — alt cream + 4 surgical cards) 23. YOUR VISIT (homepage — 3 numbered steps) 24. LOCATIONS TEASER (homepage — Troy + Chesterfield) 25. REVIEWS (homepage) 26. SERVICE AREA (homepage) 27. SKIN THROUGH THE YEAR (homepage — 4 seasonal cards) 28. FAQ (homepage) 29. FINAL CTA (homepage + reused) 30. CUSTOM FOOTER (.mm-footer hooked element) 31. HEADER RESTYLE (STL custom) + MOBILE NAV DRAWER (2.1) 32. FORMINATOR FORMS (universal) 33. CONTACT PAGE 34. LOCATION PAGE TEMPLATE (/locations/troy/, /locations/chesterfield/) 35. PRICING PAGES (/pricing/ chooser + /pricing/troy/ + /pricing/chesterfield/) 36. SERVICE PAGE TEMPLATE (premium cosmetic surgery pages, etc.) 37. TRUST STRIP (reusable, used on About + service pages) 38. RESULTS PREVIEW (homepage — before & after gallery teaser) ============================================================ 2.8 CHANGELOG (from 2.7) - §36 amendment: .mm-compare-table scroll affordance. 2.7 shipped overflow-x:auto with zero scroll signal — overlay scrollbars are invisible on touch and the clip lands mid-glyph, so columns past the fold went undiscovered. Adds: sticky label column (striping-matched opaque bgs), always-visible thin scrollbar (desktop/Android; iOS ignores webkit scrollbar styling by design — the sticky column + caption hint carry iPhones), and an edge shadow + "Swipe" caption hint gated ≤800px, the true overflow threshold (760px table + section padding). Desktop is pixel-identical. - Header comment now closes after this changelog block. It was unclosed since 1.0 — harmless (the §1 banner's terminator closed it) but a landmine for any rule later inserted between the changelog and §1. ============================================================ */ /* ============================================================ 1. FONTS — self-hosted woff2 No external requests. Place files in /fonts/ inside the child theme. Fraunces is variable — these two static files are pulled from Google Fonts with opsz=144 (display), SOFT=50, wght=400/500. ============================================================ */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/source-sans-3-400.woff2') format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/source-sans-3-500.woff2') format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/source-sans-3-600.woff2') format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/source-sans-3-700.woff2') format('woff2'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/roboto-500.woff2') format('woff2'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/roboto-700.woff2') format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/fraunces-variable.woff2') format('woff2-variations'); } /* ============================================================ 2. TOKENS — STL Dermatology Medical navy + teal accent. Warm cream surfaces. ============================================================ */ :root { --mm-brand: #0C447C; /* navy primary — headings, links */ --mm-brand-2: #1D9E75; /* teal accent — eyebrows, badges */ --mm-brand-2-hover:#0F6E56; --mm-brand-3: #042C53; /* deep navy — primary CTA, dark surfaces */ --mm-brand-3-hover:#031D38; --mm-ink: #0F1F33; --mm-muted: #5F6B7A; --mm-chrome: #ffffff; --mm-surface: #F7F4ED; /* warm cream */ --mm-surface-2: #ECE6D8; --mm-line: #E0DACB; --mm-line-strong: #C9C0AB; --mm-focus: #0C447C; --mm-urgent: #B8351F; /* reserved for true emergencies only */ /* Radius — softer than TPW for medical tone */ --mm-radius: 8px; --mm-radius-sm: 4px; --mm-radius-lg: 12px; --accent: var(--mm-brand); --contrast: var(--mm-ink); --contrast-2:var(--mm-muted); --base: var(--mm-chrome); --base-2: #ffffff; --base-3: #ffffff; } /* ============================================================ 3. BASE ============================================================ */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-gutter: stable; } body { font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--mm-ink); background: var(--mm-chrome); line-height: 1.65; accent-color: var(--mm-brand); } /* ============================================================ 4. TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6, .site-title, .main-title, .button, .wp-block-button__link { font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { color: var(--mm-brand); letter-spacing: -0.01em; } /* Display class for hero titles / oversized section heads. Apply by adding "display" to a heading block's CSS Class field in GB. Fraunces is a refined editorial serif — read as "considered" not "stuffy". */ .display, h1.display, h2.display { font-family: 'Fraunces', 'Source Serif Pro', Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -0.015em; line-height: 1.05; } /* Fraunces variation settings — applied globally to anything using Fraunces. SOFT 50 = subtle rounded terminals (medical-warm, not Victorian). opsz 144 = display optical size for headlines. */ .display, h1.display, h2.display, .mm-hero h1, .mm-hero-trust__item strong, .mm-provider-card h3, .mm-service-card h3, .mm-pillar__num, .mm-premium-head h2, .mm-premium-card h4, .mm-premium-cta__left strong, .mm-step__num, .mm-step h4, .mm-location h3, .mm-reviews-score__big, .mm-review__text, .mm-season h4, .mm-faq-item summary, .mm-final-cta h2, .mm-footer__b1, .mm-form-success strong, .mm-contact-hero h1, .mm-contact-form-wrap h2, .mm-contact-info h3, .mm-phone-link, .mm-contact-info__phone .mm-phone-link, .mm-loc-hero h1, .mm-loc-hero__nap-addr, .mm-loc-hero__nap-phone, .mm-loc-nearby h2, .mm-price-chooser__card h3, .mm-pricing-row__service, .mm-pricing-row__price, .mm-svc-hero h1, .mm-svc-section h2, .mm-svc-section h3, .mm-svc-step__num, .mm-svc-step h4, .mm-svc-disclaimer strong, .mm-trust-item h4 { font-variation-settings: "opsz" 144, "SOFT" 50; } p, li { color: var(--mm-ink); } small, .has-small-font-size { color: var(--mm-muted); } /* ============================================================ 5. LINKS ============================================================ */ a { color: var(--mm-brand); text-decoration: none; transition: color 160ms ease; } a:hover, a:focus { color: var(--mm-brand-3); } :focus-visible { outline: 2px solid var(--mm-focus); outline-offset: 2px; } /* ============================================================ 6. HEADER (base) ============================================================ */ .site-header { background: var(--mm-chrome); } .site-logo img { display: block; max-width: 100%; height: auto; } /* ============================================================ 7. NAVIGATION (base) ============================================================ */ .main-navigation, .main-navigation ul ul { background: var(--mm-chrome); border: 0; box-shadow: none; } .main-navigation .main-nav ul li > a, .main-navigation .menu-bar-items { color: var(--mm-brand); font-weight: 600; } .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li:focus-within > a, .main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--mm-brand-3); } .main-navigation .menu-toggle { color: var(--mm-brand); background: transparent; border: 0; } .main-navigation ul ul { border: 1px solid var(--mm-line); } /* ============================================================ 8. BUTTONS (base) Default .button = navy (brand-3) with white text. Primary CTA color. Outline / .is-style-outline = transparent + navy text. .button.is-secondary = teal (brand-2) with white text — accent action. ============================================================ */ .button, .wp-block-button__link, button, input[type="submit"] { background: var(--mm-brand-3); border: 1px solid var(--mm-brand-3); color: #fff; border-radius: var(--mm-radius); padding: 0.85em 1.4em; font-weight: 700; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .button:hover, .wp-block-button__link:hover, button:hover, input[type="submit"]:hover { background: var(--mm-brand-3-hover); border-color: var(--mm-brand-3-hover); color: #fff; } .wp-block-button.is-style-outline .wp-block-button__link, .button.button-outline { background: transparent; border-color: var(--mm-brand); color: var(--mm-brand); } .wp-block-button.is-style-outline .wp-block-button__link:hover, .button.button-outline:hover { background: var(--mm-brand); border-color: var(--mm-brand); color: #fff; } .button.is-secondary, .wp-block-button.is-secondary .wp-block-button__link { background: var(--mm-brand-2); border-color: var(--mm-brand-2); color: #fff; } .button.is-secondary:hover, .wp-block-button.is-secondary .wp-block-button__link:hover { background: var(--mm-brand-2-hover); border-color: var(--mm-brand-2-hover); color: #fff; } /* ============================================================ 9. FORMS (base) ============================================================ */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], select, textarea { background: #fff; border: 1px solid var(--mm-line-strong); border-radius: var(--mm-radius-sm); color: var(--mm-ink); font-family: inherit; box-shadow: none; } input::placeholder, textarea::placeholder { color: var(--mm-muted); } input:focus, select:focus, textarea:focus { border-color: var(--mm-brand); outline: none; } /* ============================================================ 10. CONTENT SPACING / ALIGNFULL GP defaults add 34px margin-top to .entry-content which creates a visible gap below the header. These selectors zero out top/bottom spacing for full-bleed band designs. ============================================================ */ /* Alignfull bleed — sections need to stretch full viewport width even though parent .entry-content is contained */ .no-sidebar .entry-content .alignfull, .entry-content > .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; } .one-container.no-sidebar .site-content, .one-container .site-content, .site-content { padding-top: 0; padding-bottom: 0; } .one-container.no-sidebar .site-main, .one-container .site-main { margin: 0; } .entry-content, .one-container .entry-content { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; } .one-container .inside-article, .inside-article { padding: 0; } /* Hide WP page title / entry-footer — our heroes have their own h1 */ article .entry-header, .page .entry-header, .entry-header, article .entry-footer { display: none !important; } /* ============================================================ 11. UTILITIES ============================================================ */ .mm-muted { color: var(--mm-muted); } .mm-surface { background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); } .mm-surface-dark { background: var(--mm-brand-3); color: #fff; border-radius: var(--mm-radius); } .mm-surface-dark h1, .mm-surface-dark h2, .mm-surface-dark h3, .mm-surface-dark h4, .mm-surface-dark h5, .mm-surface-dark h6 { color: #fff; } .mm-surface-dark a { color: var(--mm-brand-2); } /* ============================================================ 12. FOOTER (base — GP default hidden, replaced by .mm-footer) ============================================================ */ .site-footer { display: none; } .site-footer, .footer-widgets, .site-info { background: var(--mm-chrome); color: var(--mm-muted); border-top: 1px solid var(--mm-line); } .site-info a, .footer-widgets a { color: var(--mm-brand); } .site-info a:hover, .footer-widgets a:hover { color: var(--mm-brand-3); } /* ============================================================ 13. MOBILE STICKY CTA — fixed-bottom on phones Two-button bar: Call + Appointment ============================================================ */ .mm-mobile-cta { display: none; } @media (max-width: 767px) { .mm-mobile-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 14px; background: var(--mm-ink); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; } body { padding-bottom: 72px; } .mm-mobile-cta .mm-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0.8rem 0.85rem; border-radius: var(--mm-radius); font-family: Roboto, Arial, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; text-decoration: none; transition: background-color 150ms ease, color 150ms ease; } .mm-mobile-cta .mm-cta svg { width: 1em; height: 1em; flex-shrink: 0; } .mm-cta--call { background: var(--mm-brand-3); color: #fff; } .mm-cta--call:hover, .mm-cta--call:focus, .mm-cta--call:active { background: var(--mm-brand-3-hover); color: #fff; } .mm-cta--appt { background: var(--mm-brand-2); color: #fff; } .mm-cta--appt:hover, .mm-cta--appt:focus, .mm-cta--appt:active { background: var(--mm-brand-2-hover); color: #fff; } } /* ============================================================ 14. UTILITY BAR — top hooked element ============================================================ */ .mm-util-bar { background: var(--mm-ink); color: var(--mm-chrome); font-size: 13.5px; padding: 8px 0; letter-spacing: 0.02em; } .mm-util-bar__inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .mm-util-bar__left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .mm-util-bar__item { display: inline-flex; gap: 6px; align-items: center; } .mm-util-bar__item svg { opacity: 0.7; } .mm-util-bar__right { display: flex; gap: 16px; } .mm-util-bar a { color: inherit; } .mm-util-bar a:hover { color: var(--mm-brand-2); } @media (max-width: 720px) { .mm-util-bar .mm-hide-sm { display: none; } } /* Append inside section 14 (UTILITY BAR) in style.css. Powers the small green pulse dot in the "Open now" pill. */ .mm-util-bar__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mm-brand-2); box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.25); margin-right: 2px; } /* ════════════════════════════════════════════════════════════ § CREDENTIALS LOGO BAND (homepage — below hero) ════════════════════════════════════════════════════════════ */ .mm-creds-band { background: var(--mm-surface); border-block: 1px solid var(--mm-line); padding-block: clamp(28px, 4vw, 44px); } .mm-creds-band__label { font-family: Roboto, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-muted); margin: 0 0 clamp(20px, 2.5vw, 32px); } .mm-creds-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 4vw, 56px); } .mm-creds-logo { display: inline-flex; align-items: center; justify-content: center; } .mm-creds-logo img { display: block; height: clamp(38px, 5vw, 52px); width: auto; max-width: 220px; object-fit: contain; filter: grayscale(1); opacity: .68; transition: filter .25s ease, opacity .25s ease; } .mm-creds-logo img:hover, .mm-creds-logo img:focus { filter: grayscale(0); opacity: 1; } /* ASDS is a small 150×85 source — keep it from out-scaling the others */ .mm-creds-logo img[src*="asds-logo"] { max-width: 130px; } /* The ACMS mark is very wide (1012×270) — let it run a touch shorter so it doesn't dwarf the square seals on the same row */ .mm-creds-logo img[src*="acms-logo"] { height: clamp(30px, 4vw, 42px); } @media (max-width: 1024px) { .mm-creds-logos { gap: clamp(20px, 5vw, 36px); } .mm-creds-logo img { height: clamp(32px, 7vw, 44px); } } /* ============================================================ 15. SECTION HELPERS (eyebrow, lede, inner, head) ============================================================ */ .mm-section { padding: 90px 0; } .mm-section--sm { padding: 60px 0; } .mm-section-inner { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 48px); } .mm-eyebrow { display: inline-flex; align-items: flex-start; gap: 10px; font-family: Roboto, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mm-brand-2); margin: 0 0 16px; } .mm-eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--mm-brand-2); flex-shrink: 0; margin-top: 0.55em; } .mm-eyebrow--center { justify-content: center; } .mm-eyebrow--center::after { content: ""; width: 32px; height: 2px; background: var(--mm-brand-2); flex-shrink: 0; margin-top: 0.55em; } .mm-lede { font-size: 19px; line-height: 1.55; } .mm-section-head { margin-bottom: 50px; } .mm-section-head h2 { font-size: clamp(36px, 5vw, 56px); color: var(--mm-brand); max-width: 820px; margin: 0 0 16px; } .mm-section-head h2.display { line-height: 1.05; } .mm-section-head .mm-sub { color: var(--mm-muted); font-size: 18px; line-height: 1.55; max-width: 680px; margin: 0; } .mm-section-head--center { text-align: center; } .mm-section-head--center .mm-eyebrow, .mm-section-head--center h2, .mm-section-head--center .mm-sub { margin-left: auto; margin-right: auto; } /* ============================================================ 16. HERO BAND (homepage) 2.0: heroes accept either a GB grid wrapper or a plain .mm-section-inner as the direct child container. ============================================================ */ .mm-hero { background: var(--mm-brand-3); color: var(--mm-chrome); position: relative; overflow: hidden; padding: 80px 0 100px; } .mm-hero > .gb-grid-wrapper, .mm-hero > [class*="gb-grid-wrapper"], .mm-hero > .mm-section-inner { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 48px); } .mm-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 30%, rgba(29, 158, 117, 0.28), transparent 55%), radial-gradient(ellipse at 12% 80%, rgba(12, 68, 124, 0.45), transparent 50%); pointer-events: none; } .mm-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); } .mm-hero > * { position: relative; z-index: 2; } .mm-hero h1, .mm-hero h2, .mm-hero h3 { color: var(--mm-chrome); } .mm-hero p { color: rgba(247, 243, 238, 0.85); } .mm-hero h1.display { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; margin: 0 0 24px; letter-spacing: -0.02em; } .mm-hero h1 .accent { color: var(--mm-brand-2); font-style: italic; } /* Hero trust mini-bar */ .mm-hero-trust { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; padding-top: 26px; margin-top: 8px; border-top: 1px solid rgba(247, 243, 238, 0.15); } .mm-hero-trust__item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(247, 243, 238, 0.85); font-weight: 500; } .mm-hero-trust__item .stars { display: flex; gap: 1px; color: var(--mm-brand-2); } .mm-hero-trust__item strong { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: var(--mm-chrome); letter-spacing: -0.01em; } .mm-hero-trust__item svg { color: var(--mm-brand-2); flex-shrink: 0; } /* ============================================================ 17. PROVIDER CARD (hero right column) Replaces TPW's inspection-quote card. Anchors trust on Dr. Beal. ============================================================ */ .mm-provider-card { background: var(--mm-chrome); color: var(--mm-ink); padding: 32px; position: relative; border-radius: var(--mm-radius-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } .mm-provider-card__label { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mm-brand-2); margin: 0 0 10px; } .mm-provider-card h3 { font-family: 'Fraunces', serif; font-weight: 500; color: var(--mm-brand); font-size: 28px; line-height: 1.1; margin: 0 0 4px; letter-spacing: -0.01em; } .mm-provider-card__title { font-size: 14px; color: var(--mm-muted); margin: 0 0 18px; } .mm-provider-card__creds { list-style: none; padding: 0; margin: 0 0 20px; border-top: 1px solid var(--mm-line); padding-top: 16px; } .mm-provider-card__creds li { position: relative; padding: 6px 0 6px 22px; font-size: 14px; line-height: 1.45; color: var(--mm-ink); } .mm-provider-card__creds li::before { content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 12px; background: var(--mm-brand-2); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } .mm-provider-card__chips { display: flex; flex-wrap: wrap; gap: 6px; } .mm-provider-card__chip { display: inline-flex; align-items: center; background: var(--mm-surface); color: var(--mm-brand); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--mm-radius-sm); border: 1px solid var(--mm-line); } /* ============================================================ 18. BUTTON HELPERS (icons, sizes, hero overrides) ============================================================ */ .wp-block-button__link .mm-icon, .button .mm-icon { width: 1em; height: 1em; margin-right: 0.5em; vertical-align: -0.125em; display: inline-block; } .wp-block-button.mm-btn-lg .wp-block-button__link, a.button.mm-btn-lg { padding: 16px 28px; font-size: 15px; } .mm-hero-cta-row { margin: 8px 0 38px; gap: 14px; } /* Mobile: keep hero buttons at intrinsic width when stacked */ @media (max-width: 600px) { .mm-hero .wp-block-buttons { flex-direction: column; align-items: flex-start; } .mm-hero .wp-block-buttons .wp-block-button { width: auto; } .mm-hero .wp-block-buttons .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } } @media (max-width: 768px) { /* GB v1 gaps = negative wrapper margin + column padding. Both halves must be zeroed when columns stack, or the grid hangs off the left edge by its gap (2.6) */ .gb-grid-wrapper { margin-left: 0 !important; } .gb-grid-wrapper > .gb-grid-column { padding-left: 0 !important; padding-right: 0 !important; } } /* Hero on dark — primary button switches to teal (brand-2) so it stands out against navy hero. Outline stays light-on-dark. */ .mm-hero .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--mm-brand-2); color: #fff; border-color: var(--mm-brand-2); } .mm-hero .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--mm-brand-2-hover); color: #fff; border-color: var(--mm-brand-2-hover); } .mm-hero .is-style-outline .wp-block-button__link { background: transparent; border-color: var(--mm-chrome); color: var(--mm-chrome); } .mm-hero .is-style-outline .wp-block-button__link:hover { background: var(--mm-chrome); color: var(--mm-brand); border-color: var(--mm-chrome); } /* ============================================================ 19. TRUST BAR (between hero and services) — GB-native (2.3) Structure lives in GenerateBlocks: container > .mm-section-inner > 4-col grid (25% desktop, 50% tablet/mobile = clean 2x2). CSS carries only the band color and pill typography. ============================================================ */ .mm-trust-bar { background: var(--mm-ink); border-top: 1px solid rgba(247, 243, 238, 0.08); padding: 16px 0; } .mm-trust-bar .mm-trust-pill { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(247, 243, 238, 0.85); margin: 0; padding: 5px 8px; } @media (max-width: 600px) { .mm-trust-bar { padding: 8px 0; } .mm-trust-bar .mm-trust-pill { font-size: 11px; padding: 3px 6px; } } /* ============================================================ 20. SERVICES HUB (homepage — 5 big cards + 6 mini tiles) Big (June 2026 IA): Medical Derm / Cosmetic Surgery / Injectables & Fillers / Lasers & Skin Resurfacing / Scar & Pigment — 5-up via .mm-services-grid--five Mini: highest-traffic sub-services (Mole, Cyst, Botox, Acne, Acne scar treatment, Skin checks) ============================================================ */ .mm-services-section { background: var(--mm-surface); padding: 90px 0 0 0; } .mm-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 40px; } .mm-service-card { background: var(--mm-chrome); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 28px 24px 24px; position: relative; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; color: var(--mm-ink); text-decoration: none; display: flex; flex-direction: column; min-height: 280px; } .mm-service-card:hover { transform: translateY(-4px); border-color: var(--mm-brand); box-shadow: 0 18px 40px rgba(12, 68, 124, 0.12); color: var(--mm-ink); } .mm-service-card__icon { width: 56px; height: 56px; background: var(--mm-brand); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 22px; flex-shrink: 0; } .mm-service-card__icon svg { width: 26px; height: 26px; } .mm-service-card h3 { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500; color: var(--mm-brand); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 10px; } .mm-service-card p { font-size: 14.5px; color: var(--mm-muted); margin: 0 0 18px; flex-grow: 1; line-height: 1.55; } .mm-service-card__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mm-brand); transition: gap 0.2s, color 0.2s; } .mm-service-card:hover .mm-service-card__cta { gap: 10px; color: var(--mm-brand-3); } /* 5-up variant — homepage hub mirrors the five nav service categories (June 2026 IA). Scoped to >=1001px so the base 2-col / 1-col rules below govern smaller screens unchanged. Markup: homepage v5 (.mm-services-grid mm-services-grid--five). */ @media (min-width: 1001px) { .mm-services-grid--five { grid-template-columns: repeat(5, 1fr); gap: 14px; } .mm-services-grid--five .mm-service-card { padding: 24px 18px 20px; min-height: 300px; } .mm-services-grid--five .mm-service-card__icon { width: 48px; height: 48px; margin-bottom: 18px; } .mm-services-grid--five .mm-service-card__icon svg { width: 22px; height: 22px; } .mm-services-grid--five .mm-service-card h3 { font-size: 21px; } .mm-services-grid--five .mm-service-card p { font-size: 13.5px; } } /* Mini service tiles — second tier (popular conditions/services) */ .mm-services-mini-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .mm-service-mini { background: var(--mm-chrome); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 18px 14px; text-align: center; transition: all 0.2s; color: var(--mm-ink); text-decoration: none; display: block; } .mm-service-mini:hover { border-color: var(--mm-brand); background: var(--mm-brand); color: #fff; } .mm-service-mini__ico { width: 32px; height: 32px; margin: 0 auto 10px; color: var(--mm-brand); transition: color 0.2s; display: block; } .mm-service-mini:hover .mm-service-mini__ico { color: #fff; } .mm-service-mini__nm { font-size: 13px; font-weight: 700; color: inherit; display: block; letter-spacing: 0.02em; } .mm-services-seeall { text-align: center; margin-top: 36px; } @media (max-width: 1000px) { .mm-services-grid { grid-template-columns: repeat(2, 1fr); } .mm-services-mini-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 540px) { .mm-services-grid { grid-template-columns: 1fr; } .mm-services-mini-grid { grid-template-columns: repeat(2, 1fr); } .mm-services-section { padding: 60px 0; } } /* ============================================================ 21. TRUST PILLARS (homepage — dark band, 4 stat pillars) ============================================================ */ .mm-pillars-section { background: var(--mm-ink); color: var(--mm-chrome); padding: 90px 0; position: relative; overflow: hidden; } .mm-pillars-section::before { content: ""; position: absolute; top: 0; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(29, 158, 117, 0.22), transparent 60%); pointer-events: none; } .mm-pillars-section > .mm-section-inner { position: relative; z-index: 1; } .mm-pillars-section .mm-section-head h2 { color: var(--mm-chrome); } .mm-pillars-section .mm-section-head .mm-sub { color: rgba(247, 243, 238, 0.75); } .mm-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .mm-pillar { border-left: 3px solid var(--mm-brand-2); padding: 6px 0 6px 22px; } .mm-pillar__num { font-family: 'Fraunces', serif; font-weight: 500; font-size: 52px; color: var(--mm-brand-2); line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; display: block; } .mm-pillar h4 { font-family: Roboto, sans-serif; font-size: 20px; font-weight: 700; color: var(--mm-chrome); letter-spacing: -0.01em; margin: 0 0 8px; } .mm-pillar p { color: rgba(247, 243, 238, 0.72); font-size: 14.5px; line-height: 1.6; margin: 0; } @media (max-width: 900px) { .mm-pillars { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } } @media (max-width: 540px) { .mm-pillars { grid-template-columns: 1fr; gap: 32px; } .mm-pillars-section { padding: 60px 0; } } /* Pillars section — top intro row fixes (2.0). Covers heads built as GB grid rows (no .mm-section-head wrapper): color the display title and sub, and give the intro row breathing room above the pillars. */ .mm-pillars-section .display { color: var(--mm-chrome); } .mm-pillars-section .mm-sub { color: rgba(247, 243, 238, 0.75); } .mm-pillars-section > .mm-section-inner > .gb-grid-wrapper:first-child { margin-bottom: 60px; } @media (max-width: 900px) { .mm-pillars-section > .mm-section-inner > .gb-grid-wrapper:first-child { margin-bottom: 40px; } } /* ============================================================ 22. PREMIUM SURGERY BAND (homepage) Adapted from TPW's WILDLIFE TRACK — alt cream band, 4 cards, dark CTA strip beneath. For: Facelift, Neck Lift, Lower Eyelid Blepharoplasty, Fat Grafting. ============================================================ */ .mm-premium { background: var(--mm-surface-2); padding: 90px 0; } .mm-premium-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 50px; } .mm-premium-head h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(36px, 5vw, 60px); letter-spacing: -0.02em; line-height: 1.05; color: var(--mm-brand); margin: 0; } .mm-premium-head h2 .accent { color: var(--mm-brand-2); font-style: italic; font-weight: 400; } .mm-premium-head__copy p { color: var(--mm-ink); font-size: 17px; line-height: 1.6; margin: 0; } .mm-premium-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .mm-premium-card { background: var(--mm-chrome); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 26px 22px; transition: all 0.25s; color: var(--mm-ink); text-decoration: none; display: block; } .mm-premium-card:hover { background: var(--mm-brand-3); border-color: var(--mm-brand-3); transform: translateY(-3px); color: var(--mm-chrome); } .mm-premium-card__ico { width: 44px; height: 44px; color: var(--mm-brand); margin-bottom: 16px; transition: color 0.2s; display: block; } .mm-premium-card:hover .mm-premium-card__ico { color: var(--mm-brand-2); } .mm-premium-card h4 { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; color: var(--mm-brand); margin: 0 0 6px; transition: color 0.2s; } .mm-premium-card:hover h4 { color: var(--mm-chrome); } .mm-premium-card p { font-size: 13.5px; color: var(--mm-muted); margin: 0; line-height: 1.55; transition: color 0.2s; } .mm-premium-card:hover p { color: rgba(247, 243, 238, 0.75); } .mm-premium-cta { margin-top: 40px; background: var(--mm-brand-3); color: var(--mm-chrome); padding: 32px 36px; border-radius: var(--mm-radius); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px; } .mm-premium-cta__left strong { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: var(--mm-chrome); display: block; margin-bottom: 4px; letter-spacing: -0.01em; } .mm-premium-cta__left span { color: rgba(247, 243, 238, 0.7); font-size: 14px; } /* Premium CTA button — teal on the navy strip (2.3; replaces inline styles removed in homepage v9) */ .mm-premium-cta .wp-block-button .wp-block-button__link { background: var(--mm-brand-2); border-color: var(--mm-brand-2); color: #fff; } .mm-premium-cta .wp-block-button .wp-block-button__link:hover { background: var(--mm-brand-2-hover); border-color: var(--mm-brand-2-hover); color: #fff; } @media (max-width: 1000px) { .mm-premium-head { grid-template-columns: 1fr; gap: 24px; align-items: start; } .mm-premium-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .mm-premium { padding: 60px 0; } .mm-premium-cta { padding: 24px; } .mm-premium-grid { grid-template-columns: 1fr; } } /* ============================================================ 23. YOUR VISIT (homepage — 3 numbered steps on cream) ============================================================ */ .mm-your-visit { background: var(--mm-surface); padding: 90px 0; } .mm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; } .mm-step { background: var(--mm-chrome); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 36px 32px; position: relative; } .mm-step__num { position: absolute; top: -22px; left: 32px; background: var(--mm-brand); color: #fff; font-family: 'Fraunces', serif; font-weight: 500; font-size: 24px; line-height: 1; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 4px solid var(--mm-surface); letter-spacing: -0.02em; } .mm-step h4 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; color: var(--mm-brand); margin: 22px 0 12px; } .mm-step p { color: var(--mm-muted); font-size: 15px; line-height: 1.6; margin: 0; } .mm-step__duration { margin-top: 18px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mm-brand-2); display: block; } @media (max-width: 900px) { .mm-steps { grid-template-columns: 1fr; gap: 38px; } } @media (max-width: 540px) { .mm-your-visit { padding: 60px 0; } } /* ============================================================ 24. LOCATIONS TEASER (homepage) Two equal cards on dark band. Troy (open) + Chesterfield (Jul 2026). ============================================================ */ .mm-locations { background: var(--mm-brand-3); background-image: radial-gradient(ellipse at top right, rgba(29, 158, 117, 0.18), transparent 50%), linear-gradient(135deg, var(--mm-brand-3), #021a35); color: var(--mm-chrome); padding: 90px 0; position: relative; overflow: hidden; } .mm-locations::before { content: ""; position: absolute; top: -100px; left: -100px; right: -100px; bottom: -100px; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .mm-locations > .mm-section-inner { position: relative; z-index: 1; } .mm-locations .mm-section-head h2 { color: var(--mm-chrome); } .mm-locations .mm-section-head .mm-sub { color: rgba(247, 243, 238, 0.78); } .mm-locations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; } .mm-location { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--mm-radius-lg); padding: 32px; position: relative; transition: all 0.25s; color: var(--mm-chrome); display: flex; flex-direction: column; } .mm-location:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--mm-brand-2); transform: translateY(-4px); } .mm-location__badge { display: inline-flex; align-items: center; gap: 6px; background: var(--mm-brand-2); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--mm-radius-sm); margin-bottom: 14px; align-self: flex-start; } .mm-location__badge--soon { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.2); } .mm-location h3 { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; color: var(--mm-chrome); margin: 0 0 8px; } .mm-location__addr { font-size: 15px; color: rgba(247, 243, 238, 0.85); line-height: 1.55; margin: 0 0 16px; } .mm-location__meta { list-style: none; padding: 0; margin: 0 0 24px; flex-grow: 1; } .mm-location__meta li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; color: rgba(247, 243, 238, 0.78); } .mm-location__meta li strong { color: var(--mm-chrome); font-weight: 600; } .mm-location__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; background: var(--mm-brand-2); color: #fff; border-radius: var(--mm-radius); font-family: Roboto, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: background 160ms ease; } .mm-location__cta:hover { background: var(--mm-brand-2-hover); color: #fff; } @media (max-width: 900px) { .mm-locations-grid { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 540px) { .mm-locations { padding: 60px 0; } } /* ============================================================ 25. REVIEWS (homepage — big score header + 3 review cards) ============================================================ */ .mm-reviews { background: var(--mm-surface); padding: 90px 0; } .mm-reviews-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--mm-line); margin-bottom: 44px; } .mm-reviews-score { display: flex; align-items: center; gap: 22px; } .mm-reviews-score__big { font-family: 'Fraunces', serif; font-weight: 500; font-size: 72px; color: var(--mm-brand); line-height: 1; letter-spacing: -0.03em; } .mm-reviews-score__stars { display: flex; gap: 2px; color: var(--mm-brand-2); margin-bottom: 4px; } .mm-reviews-score__meta { font-size: 14px; color: var(--mm-muted); } .mm-reviews-score__meta strong { color: var(--mm-ink); } .mm-reviews-google { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--mm-muted); font-weight: 600; } .mm-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .mm-review { background: var(--mm-chrome); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 26px 24px; } .mm-review__stars { color: var(--mm-brand-2); display: flex; gap: 1px; margin-bottom: 14px; } .mm-review__text { font-size: 15px; color: var(--mm-ink); line-height: 1.6; margin: 0 0 16px; font-family: 'Fraunces', serif; font-weight: 400; } .mm-review__author { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--mm-line); } .mm-review__ava { width: 38px; height: 38px; background: var(--mm-brand); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .mm-review__nm { font-weight: 700; font-size: 14px; color: var(--mm-ink); display: block; } .mm-review__src { font-size: 12px; color: var(--mm-muted); display: block; } @media (max-width: 900px) { .mm-reviews-grid { grid-template-columns: 1fr; } .mm-reviews-score__big { font-size: 56px; } } @media (max-width: 540px) { .mm-reviews { padding: 60px 0; } } /* ============================================================ 26. SERVICE AREA (homepage — dark band, copy left + map right) ============================================================ */ .mm-area { background: var(--mm-ink); color: var(--mm-surface); padding: clamp(48px, 8vw, 96px) 0; } .mm-area .mm-section-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .mm-area .display { color: var(--mm-surface); } .mm-area .mm-sub { color: rgba(247, 243, 238, 0.75); margin: 0 0 24px; } .mm-area-left { display: flex; flex-direction: column; justify-content: center; } /* Map wrapper */ .mm-area-right { min-height: 420px; } .mm-map { position: relative; width: 100%; height: 100%; min-height: 420px; border-radius: var(--mm-radius-lg); overflow: hidden; border: 1px solid rgba(247, 243, 238, 0.15); } .mm-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 768px) { .mm-area-right, .mm-map { min-height: 320px; } } /* City chips */ .mm-cities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .mm-city-chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(247, 243, 238, 0.2); background: transparent; color: var(--mm-surface); font-size: 14px; line-height: 1; white-space: nowrap; } .mm-city-chip--primary { background: var(--mm-brand-2); color: #fff; border-color: var(--mm-brand-2); font-weight: 600; } /* ============================================================ 27. SKIN THROUGH THE YEAR (homepage — 4 seasonal cards) Replaces TPW's seasonal pest calendar. Educational/SEO play for general dermatology queries. ============================================================ */ .mm-seasons { background: var(--mm-surface); padding: 90px 0; } .mm-seasons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; } .mm-season { background: var(--mm-chrome); border: 1px solid var(--mm-line); border-top: 4px solid; border-radius: var(--mm-radius); padding: 28px 24px; } .mm-season--winter { border-top-color: #4A6F8C; } .mm-season--spring { border-top-color: var(--mm-brand-2); } .mm-season--summer { border-top-color: #EF9F27; } .mm-season--fall { border-top-color: #C26A2C; } .mm-season__label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mm-muted); margin-bottom: 6px; display: block; } .mm-season h4 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; color: var(--mm-brand); margin: 0 0 14px; } .mm-season__topics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .mm-season__tag { background: var(--mm-surface); border: 1px solid var(--mm-line); color: var(--mm-brand); font-size: 12px; padding: 4px 10px; border-radius: var(--mm-radius-sm); font-weight: 600; } .mm-season p { font-size: 14px; color: var(--mm-muted); line-height: 1.6; margin: 0; } @media (max-width: 900px) { .mm-seasons-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .mm-seasons-grid { grid-template-columns: 1fr; } .mm-seasons { padding: 60px 0; } } /* ============================================================ 28. FAQ (homepage — native details/summary accordion) ============================================================ */ .mm-faq { background: var(--mm-surface-2); padding: 90px 0; } .mm-faq-list { max-width: 880px; margin: 30px auto 0; } .mm-faq-item { border-bottom: 1px solid var(--mm-line-strong); } .mm-faq-item summary { list-style: none; cursor: pointer; padding: 26px 40px 26px 0; font-size: 19px; color: var(--mm-ink); line-height: 1.4; position: relative; font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: -0.01em; } .mm-faq-item summary::-webkit-details-marker { display: none; } .mm-faq-item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: 'Fraunces', serif; font-size: 28px; line-height: 1; color: var(--mm-brand-2); font-weight: 400; } .mm-faq-item[open] summary::after { content: "\2212"; } .mm-faq-item__answer { padding: 0 0 28px; } .mm-faq-item__answer p { font-size: 16px; color: var(--mm-muted); line-height: 1.7; margin: 0 0 12px; } .mm-faq-item__answer p:last-child { margin-bottom: 0; } @media (max-width: 540px) { .mm-faq { padding: 60px 0; } .mm-faq-item summary { font-size: 17px; padding-right: 36px; } } /* ============================================================ 29. FINAL CTA (cream band, centered, two CTAs — homepage + reused) ============================================================ */ .mm-final-cta { background: var(--mm-brand-3); color: var(--mm-chrome); padding: 80px 0; text-align: center; position: relative; overflow: hidden; } .mm-final-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(29, 158, 117, 0.15), transparent 60%); pointer-events: none; } .mm-final-cta > * { position: relative; z-index: 1; } .mm-final-cta .mm-section-inner { padding-block: 0; } .mm-final-cta h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(36px, 5vw, 60px); letter-spacing: -0.02em; line-height: 1.05; color: var(--mm-chrome); margin: 0 0 20px; } .mm-final-cta p { font-size: 18px; line-height: 1.55; max-width: 620px; margin: 0 auto 32px; color: rgba(247, 243, 238, 0.85); } .mm-final-cta__ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* On navy bg, primary becomes teal. Outline becomes white. */ .mm-final-cta .button, .mm-final-cta .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--mm-brand-2); color: #fff; border-color: var(--mm-brand-2); } .mm-final-cta .button:hover, .mm-final-cta .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--mm-brand-2-hover); color: #fff; border-color: var(--mm-brand-2-hover); } .mm-final-cta .is-style-outline .wp-block-button__link { background: transparent; color: var(--mm-chrome); border-color: var(--mm-chrome); } .mm-final-cta .is-style-outline .wp-block-button__link:hover { background: var(--mm-chrome); color: var(--mm-brand); border-color: var(--mm-chrome); } @media (max-width: 540px) { .mm-final-cta { padding: 60px 0; } } /* ============================================================ 30. CUSTOM FOOTER (.mm-footer hooked element, dark, 4-col grid) ============================================================ */ .mm-footer { background: var(--mm-ink); color: rgba(247, 243, 238, 0.7); padding: 70px 0 0; } .mm-footer__inner { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 48px); } .mm-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 56px; } /* Footer paragraph support (2.0) — for text blocks dropped into footer columns (hours, notes) without dedicated classes. */ .mm-footer p { color: rgba(247, 243, 238, 0.7); } .mm-footer__col p { font-size: 14px; line-height: 1.6; margin: 0 0 12px; } .mm-footer__col p a { color: var(--mm-brand-2); font-weight: 700; } .mm-footer__col p a:hover { color: var(--mm-chrome); } .mm-footer__b1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; color: var(--mm-chrome); letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 4px; } .mm-footer__b2 { font-size: 12px; font-weight: 600; color: var(--mm-brand-2); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 22px; } .mm-footer__brand p { font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; color: inherit; } .mm-footer__nap { font-size: 14px; line-height: 1.7; color: rgba(247, 243, 238, 0.85); } .mm-footer__nap strong { color: var(--mm-chrome); display: block; margin-bottom: 4px; } .mm-footer__nap a { color: var(--mm-brand-2); font-weight: 700; } .mm-footer__nap a:hover { color: var(--mm-chrome); } .mm-footer__col h5 { font-family: Roboto, sans-serif; font-weight: 700; font-size: 14px; color: var(--mm-chrome); text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 18px; } .mm-footer__col ul { list-style: none; padding: 0; margin: 0; } .mm-footer__col li { padding: 5px 0; } .mm-footer__col a { font-size: 14px; color: rgba(247, 243, 238, 0.7); transition: color 0.2s; } .mm-footer__col a:hover { color: var(--mm-brand-2); } .mm-footer__bottom { border-top: 1px solid rgba(247, 243, 238, 0.1); padding: 22px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: rgba(247, 243, 238, 0.5); } .mm-footer__bottom a { color: rgba(247, 243, 238, 0.5); margin-right: 16px; } .mm-footer__bottom-links a:last-child { margin-right: 0; } .mm-footer__bottom a:hover { color: var(--mm-brand-2); } @media (max-width: 900px) { .mm-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 540px) { .mm-footer__grid { grid-template-columns: 1fr; gap: 32px; } .mm-footer { padding: 50px 0 0; } } /* ============================================================ 31. HEADER RESTYLE (STL custom) + MOBILE NAV DRAWER (2.1) Markup: GP site header (.inside-header holds .site-logo + .mm-header-cta hook element) with the primary navigation as its own element BELOW the header (nav-below-header). Desktop: brand row (logo left / phone + Schedule right) over a full-width nav row separated by a hairline divider. Mobile (≤1024): compact brand row (smaller logo + icon phone + Schedule), GP drawer below. REQUIRES GP mobile menu breakpoint = 1024 (Customizer > Layout > Primary Navigation; set 2026-06-10) to match the media queries here. NOTE: GP's dynamic CSS paints `.site-header a` with var(--base-3) (white). The .site-header-scoped color rules below intentionally out-rank it — do not "simplify" them. ============================================================ */ /* --- Brand row (site header) --- */ .site-header { background: var(--mm-chrome); border-bottom: none; padding: 14px 0; } .site-header .inside-header { max-width: 1240px; margin-inline: auto; padding: 0 clamp(16px, 3vw, 48px); display: flex; align-items: center; gap: 24px; } .site-header .site-logo { flex-shrink: 0; margin: 0; padding: 0; } .site-header .site-logo a { display: block; } .site-header .site-logo img { display: block; width: 320px; max-width: 100%; height: auto; margin: 0; } .site-branding, .site-title, .main-title { display: none; } /* --- Header CTA (brand row, right side) --- */ .inside-header > .mm-header-cta { margin-left: auto; } .mm-header-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; flex-wrap: nowrap; } .site-header .mm-header-cta__phone { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; color: var(--mm-brand); text-decoration: none; font-family: Roboto, sans-serif; line-height: 1; } .site-header .mm-header-cta__phone:hover { color: var(--mm-brand-3); } .mm-header-cta__phone-icon { width: 36px; height: 36px; background: var(--mm-brand); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 160ms ease; } .mm-header-cta__phone:hover .mm-header-cta__phone-icon { background: var(--mm-brand-3); } .mm-header-cta__phone-text { line-height: 1.1; } .site-header .mm-header-cta__phone-tag { font-size: 10px; font-weight: 700; color: var(--mm-brand-2-hover); /* dark teal — readable on white */ text-transform: uppercase; letter-spacing: 0.16em; display: block; margin-bottom: 2px; } /* §31 — header CTA phone number (Brandon review, June 2026) Was 'Fraunces' (display serif, opsz 144) — over-stylized, hard to read as a functional number. Switched to the body sans for clarity. font-variation-settings reset so the §4 Fraunces axes don't carry over. */ .site-header .mm-header-cta__phone-num { font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-variation-settings: normal; font-weight: 700; font-size: 20px; letter-spacing: 0; display: block; color: var(--mm-brand); } .site-header .mm-header-cta__phone:hover .mm-header-cta__phone-num { color: var(--mm-brand-3); } .mm-header-cta__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--mm-brand-3); color: #fff; border-radius: var(--mm-radius); font-family: Roboto, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; line-height: 1; transition: background 160ms ease; } .site-header .mm-header-cta__btn, .site-header .mm-header-cta__btn:visited { color: #fff; } .mm-header-cta__btn:hover { background: var(--mm-brand-3-hover); color: #fff; } .mm-header-cta__btn svg { width: 14px; height: 14px; flex-shrink: 0; } /* --- Nav row (standalone element below header) --- */ nav.main-navigation { background: var(--mm-chrome); border: 0; border-top: 1px solid var(--mm-line); } .main-navigation .inside-navigation { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 48px); display: flex; align-items: center; } .main-navigation .main-nav > ul { display: flex; gap: 4px; align-items: center; background: transparent; } .main-navigation .main-nav ul li a { padding: 15px 13px; color: var(--mm-brand); font-family: Roboto, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; position: relative; transition: color 160ms ease; } .main-navigation .main-nav ul li a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 9px; height: 2px; background: var(--mm-brand-2); transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; } /* Align the first label's text with the logo's left edge */ .main-navigation .main-nav > ul > li:first-child > a { padding-left: 0; } .main-navigation .main-nav > ul > li:first-child > a::after { left: 0; } .main-navigation .main-nav ul li:hover > a::after, .main-navigation .main-nav ul li:focus-within > a::after, .main-navigation .main-nav ul li.current-menu-item > a::after, .main-navigation .main-nav ul li[class*="current-menu-"] > a::after { transform: scaleX(1); } .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li:focus-within > a, .main-navigation .main-nav ul li.current-menu-item > a { color: var(--mm-brand); } /* Dropdown panels */ .main-navigation ul ul { background: var(--mm-chrome); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); box-shadow: 0 12px 28px rgba(12, 68, 124, 0.12); padding: 6px 0; } .main-navigation ul ul li a { padding: 10px 18px !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0.02em !important; } .main-navigation ul ul li a::after { display: none; } /* Menu toggle (drawer trigger, ≤1024) */ .main-navigation .menu-toggle { color: var(--mm-brand); background: transparent; border: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } /* --- Mobile header (≤1024): compact brand row --- */ @media (max-width: 1024px) { .site-header { padding: 10px 0; } .site-header .inside-header { flex-direction: row; /* GP core mobile CSS stacks .inside-header to column ≤768 — re-assert row */ gap: 12px; justify-content: space-between; flex-wrap: nowrap; } .site-header .site-logo img { width: min(210px, 52vw); } .mm-header-cta { gap: 10px; margin-left: auto; } .mm-header-cta__phone-text { display: none; } /* icon-only phone */ .mm-header-cta__btn { padding: 10px 14px; font-size: 12px; } } @media (max-width: 600px) { /* §13 bottom sticky bar carries Call + Schedule on phones */ .site-header .mm-header-cta__btn { display: none; } } /* ------------------------------------------------------------ MOBILE NAV — drawer (2.1) GP drawer below the compact header. Open/closed state is GP's (.toggled class + breakpoint=1024 JS); these rules only style the open drawer. The CTA no longer re-docks here — it lives in the header brand row at all widths. ------------------------------------------------------------ */ @media (max-width: 1024px) { .main-navigation .inside-navigation { display: block; max-width: none; padding: 0; } .main-navigation .menu-toggle { display: block; width: 100%; text-align: left; padding: 12px clamp(16px, 4vw, 24px); } .main-navigation .main-nav { width: 100%; } .main-navigation.toggled .main-nav > ul { display: block; width: 100%; gap: 0; } .main-navigation .main-nav ul li { display: block; width: 100%; border-bottom: 1px solid var(--mm-line); } .main-navigation .main-nav ul li:last-child { border-bottom: 0; } .main-navigation .main-nav ul li a { display: block; width: 100%; padding: 16px clamp(16px, 4vw, 24px) !important; text-align: left; font-size: 14px; } /* Kill the desktop hover underline in the drawer */ .main-navigation .main-nav ul li a::after { display: none !important; } .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li.current-menu-item > a { background: var(--mm-surface); color: var(--mm-brand); } /* Submenu items: static, indented, on cream */ .main-navigation .main-nav ul ul { position: static; width: 100%; background: var(--mm-surface); border: 0; border-radius: 0; box-shadow: none; padding: 0; } .main-navigation .main-nav ul ul li a { padding: 12px clamp(28px, 6vw, 40px) !important; font-size: 13px; color: var(--mm-muted); } .main-navigation .main-nav ul ul li a:hover { color: var(--mm-brand); } /* Dropdown toggle arrow */ .main-navigation .menu-item-has-children { position: relative; } .main-navigation .menu-item-has-children .dropdown-menu-toggle { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); padding: 0; width: 32px; height: 32px; } } /* ============================================================ 32. FORMINATOR FORMS (universal — !important everywhere fights plugin) ============================================================ */ .forminator-ui, .forminator-custom-form { font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif !important; } .forminator-ui .forminator-label, .forminator-custom-form label.forminator-label { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--mm-muted) !important; margin-bottom: 4px !important; } .forminator-ui input[type="text"], .forminator-ui input[type="email"], .forminator-ui input[type="tel"], .forminator-ui input[type="number"], .forminator-ui select, .forminator-ui textarea, .forminator-custom-form input[type="text"], .forminator-custom-form input[type="email"], .forminator-custom-form input[type="tel"], .forminator-custom-form select, .forminator-custom-form textarea { background: #fff !important; border: 1.5px solid var(--mm-line-strong) !important; border-radius: var(--mm-radius-sm) !important; padding: 12px 14px !important; font-family: inherit !important; font-size: 15px !important; color: var(--mm-ink) !important; box-shadow: none !important; } .forminator-ui input:focus, .forminator-ui select:focus, .forminator-ui textarea:focus { border-color: var(--mm-brand) !important; outline: none !important; } .forminator-ui .forminator-button, .forminator-ui button[type="submit"], .forminator-custom-form button[type="submit"] { background: var(--mm-brand-3) !important; color: #fff !important; border: 0 !important; border-radius: var(--mm-radius) !important; padding: 16px 28px !important; font-family: Roboto, sans-serif !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; width: 100% !important; cursor: pointer !important; transition: background 160ms ease !important; } .forminator-ui .forminator-button:hover, .forminator-ui button[type="submit"]:hover, .forminator-custom-form button[type="submit"]:hover { background: var(--mm-brand-3-hover) !important; } .mm-form-success { background: var(--mm-surface); border-left: 4px solid var(--mm-brand-2); border-radius: var(--mm-radius-sm); padding: 18px 22px; } .mm-form-success strong { display: block; font-family: 'Fraunces', serif; font-weight: 500; font-size: 20px; letter-spacing: -0.01em; color: var(--mm-brand); margin-bottom: 6px; } .mm-form-success p { margin: 0; font-size: 15px; color: var(--mm-ink); } .mm-form-success a { color: var(--mm-brand); font-weight: 700; text-decoration: underline; } /* ============================================================ 33. CONTACT PAGE ============================================================ */ .mm-contact-hero { background: var(--mm-brand-3); color: var(--mm-chrome); padding: 70px 0 50px; position: relative; overflow: hidden; } .mm-contact-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 30%, rgba(29, 158, 117, 0.25), transparent 55%); pointer-events: none; } .mm-contact-hero > .mm-section-inner { position: relative; z-index: 1; } .mm-contact-hero h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.02em; line-height: 1.05; color: var(--mm-chrome); margin: 0 0 16px; max-width: 800px; } .mm-contact-hero p { font-size: 18px; color: rgba(247, 243, 238, 0.85); margin: 0; max-width: 640px; } .mm-contact-body { background: var(--mm-surface); padding: 80px 0; } .mm-contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; } .mm-contact-form-wrap { background: var(--mm-chrome); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 36px; } .mm-contact-form-wrap h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; color: var(--mm-brand); margin: 0 0 8px; } .mm-contact-form-wrap > p { color: var(--mm-muted); margin: 0 0 24px; font-size: 15px; } .mm-contact-info h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; line-height: 1.15; color: var(--mm-brand); margin: 0 0 12px; } .mm-contact-info__phone { background: var(--mm-brand-3); color: var(--mm-chrome); padding: 28px 26px; border-radius: var(--mm-radius); margin-bottom: 24px; } .mm-contact-info__phone .label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mm-brand-2); margin-bottom: 8px; } .mm-contact-info__phone .note { font-size: 13px; color: rgba(247, 243, 238, 0.7); margin: 0; } .mm-contact-info__nap { background: var(--mm-chrome); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 24px 26px; margin-bottom: 24px; } .mm-contact-info__nap h3 { margin-bottom: 14px; } .mm-contact-info__nap .mm-nap-name { font-weight: 700; color: var(--mm-brand); margin: 0 0 4px; font-size: 15px; } .mm-contact-info__nap .mm-nap-addr { font-size: 15px; line-height: 1.65; color: var(--mm-ink); margin: 0 0 14px; } .mm-directions-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: var(--mm-brand) !important; font-family: Roboto, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; text-decoration: none !important; transition: gap 0.2s, color 0.2s !important; box-shadow: none !important; } .mm-directions-btn:hover { color: var(--mm-brand-3) !important; gap: 10px !important; background: transparent !important; } /* Phone link — big text-link variant, override default button styling */ .mm-contact-info__phone .mm-phone-link, a.mm-phone-link { font-family: 'Fraunces', serif !important; font-weight: 500 !important; font-size: 36px !important; letter-spacing: -0.02em !important; color: var(--mm-chrome) !important; line-height: 1 !important; text-decoration: none !important; text-transform: none !important; display: block !important; margin: 0 0 8px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; width: auto !important; text-align: left !important; } .mm-contact-info__phone .mm-phone-link:hover, a.mm-phone-link:hover { color: var(--mm-brand-2) !important; background: transparent !important; } .mm-contact-map { margin-top: 24px; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--mm-radius); border: 1px solid var(--mm-line); } .mm-contact-map iframe { width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 900px) { .mm-contact-grid { grid-template-columns: 1fr; gap: 40px; } .mm-contact-form-wrap { padding: 28px; } .mm-contact-info__phone .mm-phone-link, a.mm-phone-link { font-size: 28px !important; } } @media (max-width: 540px) { .mm-contact-hero { padding: 50px 0 40px; } .mm-contact-body { padding: 50px 0; } } /* ============================================================ 34. LOCATION PAGE TEMPLATE Used at /locations/troy/ and /locations/chesterfield/ Pattern: hero with location-specific NAP + map, providers seen at this location, services offered, directions from nearby cities ============================================================ */ .mm-loc-hero { background: var(--mm-brand-3); color: var(--mm-chrome); padding: 70px 0 60px; position: relative; overflow: hidden; } .mm-loc-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 30%, rgba(29, 158, 117, 0.25), transparent 55%); pointer-events: none; } .mm-loc-hero > .mm-section-inner { position: relative; z-index: 1; } .mm-loc-hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; } .mm-loc-hero__eyebrow { font-size: 12px; font-weight: 700; color: var(--mm-brand-2); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; } .mm-loc-hero h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.02em; line-height: 1.05; color: var(--mm-chrome); margin: 0 0 16px; } .mm-loc-hero p.lede { font-size: 18px; color: rgba(247, 243, 238, 0.85); margin: 0 0 24px; max-width: 540px; } .mm-loc-hero__nap { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--mm-radius-lg); padding: 28px; } .mm-loc-hero__nap-label { font-size: 11px; font-weight: 700; color: var(--mm-brand-2); letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 12px; } .mm-loc-hero__nap-addr { font-family: 'Fraunces', serif; font-weight: 500; font-size: 20px; line-height: 1.4; color: var(--mm-chrome); margin: 0 0 14px; letter-spacing: -0.01em; } .mm-loc-hero__nap-phone { display: inline-block; font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; color: var(--mm-chrome); letter-spacing: -0.02em; margin: 0 0 10px; text-decoration: none; } .mm-loc-hero__nap-phone:hover { color: var(--mm-brand-2); } .mm-loc-hero__nap-hours { font-size: 14px; color: rgba(247, 243, 238, 0.78); margin: 0; } @media (max-width: 900px) { .mm-loc-hero-grid { grid-template-columns: 1fr; gap: 32px; } } /* Location body — map + nearby cities */ .mm-loc-body { background: var(--mm-chrome); padding: 80px 0; } .mm-loc-body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .mm-loc-map { aspect-ratio: 4/3; border-radius: var(--mm-radius); overflow: hidden; border: 1px solid var(--mm-line); } .mm-loc-map iframe { width: 100%; height: 100%; border: 0; } .mm-loc-nearby h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 32px; letter-spacing: -0.02em; line-height: 1.1; color: var(--mm-brand); margin: 0 0 16px; } .mm-loc-nearby p { color: var(--mm-muted); margin: 0 0 22px; line-height: 1.65; } .mm-loc-nearby__chips { display: flex; flex-wrap: wrap; gap: 8px; } .mm-loc-nearby__chip { display: inline-flex; align-items: center; background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--mm-brand); text-decoration: none; transition: all 160ms; } .mm-loc-nearby__chip:hover { background: var(--mm-brand); color: #fff; border-color: var(--mm-brand); } @media (max-width: 900px) { .mm-loc-body-grid { grid-template-columns: 1fr; } } @media (max-width: 540px) { .mm-loc-hero { padding: 50px 0 40px; } .mm-loc-body { padding: 50px 0; } } /* ============================================================ 35. PRICING PAGES Two patterns: a) /pricing/ — chooser landing page (Troy / Chesterfield cards) b) /pricing/troy/ + /pricing/chesterfield/ — actual pricing tables split between PA/NP tier and Doctor/Surgeon tier ============================================================ */ /* Chooser landing — two location cards */ .mm-price-chooser { background: var(--mm-surface); padding: 80px 0; } .mm-price-chooser__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; } .mm-price-chooser__card { background: var(--mm-chrome); border: 1px solid var(--mm-line); border-top: 4px solid var(--mm-brand); border-radius: var(--mm-radius); padding: 36px 32px; text-decoration: none; color: inherit; transition: all 200ms; display: flex; flex-direction: column; } .mm-price-chooser__card:hover { border-color: var(--mm-brand); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(12, 68, 124, 0.12); } .mm-price-chooser__card h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 30px; letter-spacing: -0.02em; line-height: 1.05; color: var(--mm-brand); margin: 0 0 8px; } .mm-price-chooser__card p { font-size: 15px; color: var(--mm-muted); margin: 0 0 20px; flex-grow: 1; line-height: 1.6; } .mm-price-chooser__card-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--mm-brand); text-transform: uppercase; letter-spacing: 0.06em; transition: gap 200ms; } .mm-price-chooser__card:hover .mm-price-chooser__card-cta { gap: 12px; } /* Actual pricing pages — tier switcher + service rows */ .mm-pricing-page { background: var(--mm-chrome); padding: 70px 0; } .mm-pricing-tier-toggle { display: inline-flex; background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 4px; margin-bottom: 32px; } .mm-pricing-tier-toggle__btn { padding: 10px 22px; background: transparent; border: 0; border-radius: var(--mm-radius-sm); color: var(--mm-muted); font-family: Roboto, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: all 160ms; } .mm-pricing-tier-toggle__btn.is-active { background: var(--mm-brand-3); color: #fff; } .mm-pricing-tier-toggle__btn:hover:not(.is-active) { color: var(--mm-brand); } .mm-pricing-table { background: var(--mm-chrome); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); overflow: hidden; } .mm-pricing-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--mm-line); align-items: baseline; } .mm-pricing-row:last-child { border-bottom: 0; } .mm-pricing-row__service { font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px; color: var(--mm-brand); letter-spacing: -0.01em; } .mm-pricing-row__service small { display: block; font-family: "Source Sans 3", sans-serif; font-weight: 400; font-size: 13px; color: var(--mm-muted); margin-top: 2px; letter-spacing: 0; } .mm-pricing-row__price { font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; color: var(--mm-ink); text-align: right; letter-spacing: -0.01em; } .mm-pricing-row__price small { display: block; font-family: "Source Sans 3", sans-serif; font-weight: 400; font-size: 12px; color: var(--mm-muted); letter-spacing: 0; } .mm-pricing-category { background: var(--mm-surface); padding: 12px 24px; font-family: Roboto, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mm-brand); border-bottom: 1px solid var(--mm-line); } .mm-pricing-disclaimer { margin-top: 24px; padding: 18px 22px; background: var(--mm-surface); border-left: 3px solid var(--mm-brand-2); border-radius: var(--mm-radius-sm); font-size: 14px; color: var(--mm-muted); line-height: 1.6; } @media (max-width: 600px) { .mm-price-chooser__grid { grid-template-columns: 1fr; } .mm-pricing-row { grid-template-columns: 1fr; gap: 4px; } .mm-pricing-row__price { text-align: left; } } /* ============================================================ 36. SERVICE PAGE TEMPLATE For premium cosmetic surgery pages (Facelift, Neck Lift, etc.) and any other deep service page. Hero → overview → candidacy → procedure → recovery → results → FAQ → CTA. ============================================================ */ .mm-svc-hero { background: var(--mm-brand-3); color: var(--mm-chrome); padding: 70px 0 60px; position: relative; overflow: hidden; } .mm-svc-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 30%, rgba(29, 158, 117, 0.22), transparent 55%); pointer-events: none; } .mm-svc-hero > .mm-section-inner { position: relative; z-index: 1; } .mm-svc-hero__crumbs { font-size: 13px; color: rgba(247, 243, 238, 0.7); margin-bottom: 18px; } .mm-svc-hero__crumbs a { color: rgba(247, 243, 238, 0.7); text-decoration: none; } .mm-svc-hero__crumbs a:hover { color: var(--mm-brand-2); } .mm-svc-hero h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(40px, 5.4vw, 64px); letter-spacing: -0.02em; line-height: 1.05; color: var(--mm-chrome); margin: 0 0 18px; max-width: 820px; } .mm-svc-hero p.lede { font-size: 19px; line-height: 1.55; color: rgba(247, 243, 238, 0.85); margin: 0 0 28px; max-width: 680px; } .mm-svc-hero__meta { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 24px; border-top: 1px solid rgba(247, 243, 238, 0.15); } .mm-svc-hero__meta-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(247, 243, 238, 0.85); } .mm-svc-hero__meta-item strong { color: var(--mm-chrome); font-weight: 600; } .mm-svc-hero__meta-item svg { color: var(--mm-brand-2); flex-shrink: 0; width: 18px; height: 18px; } /* Service body sections */ .mm-svc-section { background: var(--mm-chrome); padding: 80px 0; } .mm-svc-section--cream { background: var(--mm-surface); } .mm-svc-section h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -0.02em; line-height: 1.1; color: var(--mm-brand); margin: 0 0 18px; } .mm-svc-section h2 + p, .mm-svc-section h3 + p { margin-top: 0; } .mm-svc-section h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; line-height: 1.15; color: var(--mm-brand); margin: 32px 0 12px; } .mm-svc-section p { font-size: 17px; line-height: 1.7; color: var(--mm-ink); margin: 0 0 16px; max-width: 760px; } .mm-svc-section ul:not([class]) { padding-left: 0; list-style: none; margin: 0 0 20px; } .mm-svc-section ul:not([class]) li { position: relative; padding: 6px 0 6px 26px; font-size: 16px; line-height: 1.6; color: var(--mm-ink); } .mm-svc-section ul:not([class]) li::before { content: ""; position: absolute; left: 0; top: 14px; width: 14px; height: 14px; background: var(--mm-brand-2); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } /* Core list blocks (ul.wp-block-list) inherit the checkmark treatment — block-built pages serialize lists with this class (2.4) */ .mm-svc-section ul.wp-block-list { padding-left: 0; list-style: none; margin: 0 0 20px; } .mm-svc-section ul.wp-block-list li { position: relative; padding: 6px 0 6px 26px; font-size: 16px; line-height: 1.6; color: var(--mm-ink); } .mm-svc-section ul.wp-block-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 14px; height: 14px; background: var(--mm-brand-2); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } .mm-svc-section ul.wp-block-list { max-width: 760px; } /* Procedure step cards (within service pages) */ .mm-svc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; } .mm-svc-step { background: var(--mm-chrome); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 28px 26px; } .mm-svc-step__num { font-family: 'Fraunces', serif; font-weight: 500; font-size: 32px; color: var(--mm-brand-2); line-height: 1; margin-bottom: 12px; letter-spacing: -0.02em; } .mm-svc-step h3 { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--mm-brand); margin: 0 0 10px; } .mm-svc-step h4 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; line-height: 1.2; color: var(--mm-brand); margin: 0 0 10px; } .mm-svc-step p { font-size: 14.5px; line-height: 1.6; color: var(--mm-muted); margin: 0; } /* Step number as a paragraph block (2.5) */ .mm-svc-step p.mm-svc-step__num { font-family: 'Fraunces', serif; font-weight: 500; font-size: 32px; color: var(--mm-brand-2); line-height: 1; margin: 0 0 12px; letter-spacing: -0.02em; } /* Compliance / disclaimer callout */ .mm-svc-disclaimer { margin: 32px 0; padding: 22px 26px; background: var(--mm-surface); border-left: 3px solid var(--mm-brand-2); border-radius: var(--mm-radius-sm); font-size: 14.5px; color: var(--mm-muted); line-height: 1.65; } .mm-svc-disclaimer strong { color: var(--mm-brand); display: block; margin-bottom: 4px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; letter-spacing: -0.01em; } /* Patient Links step cards — even height + bottom-pinned CTA. Must out-rank GB's generated .gb-container-* rule, so we target the gb-container class directly (not #pl-grid — the grid wrapper has no id). */ .gb-container.mm-svc-step { display: flex !important; flex-direction: column; height: 100%; } .gb-container.mm-svc-step .wp-block-buttons { margin-top: auto; } .gb-grid-column .mm-svc-step { height: 100%; } /* Service hero CTAs on the navy band — primary goes teal, outline goes white (2.4) */ .mm-svc-hero .wp-block-buttons { margin: 0 0 28px; gap: 14px; } .mm-svc-hero .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--mm-brand-2); border-color: var(--mm-brand-2); color: #fff; } .mm-svc-hero .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--mm-brand-2-hover); border-color: var(--mm-brand-2-hover); color: #fff; } .mm-svc-hero .is-style-outline .wp-block-button__link { background: transparent; border-color: var(--mm-chrome); color: var(--mm-chrome); } .mm-svc-hero .is-style-outline .wp-block-button__link:hover { background: var(--mm-chrome); color: var(--mm-brand); border-color: var(--mm-chrome); } /* Hero B/A image caption on the navy band (2.5) */ .mm-svc-hero figcaption { color: rgba(247, 243, 238, 0.7); font-size: 12.5px; text-align: center; margin-top: 10px; } @media (max-width: 600px) { .mm-svc-hero .wp-block-buttons { flex-direction: column; align-items: flex-start; } } @media (max-width: 900px) { .mm-svc-steps { grid-template-columns: 1fr; } } @media (max-width: 540px) { .mm-svc-hero { padding: 50px 0 40px; } .mm-svc-section { padding: 50px 0; } } /* mm-card-img — uniform linked card image (hub cards). Added §36. */ .mm-card-img { display: block; margin-bottom: 16px; border-radius: 8px; overflow: hidden; } .mm-card-img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* Comparison table — white card matching the step cards. The figure scrolls horizontally on small screens (2.7) */ .mm-compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 36px 0 0; } .mm-compare-table table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); font-size: 14.5px; line-height: 1.55; } .mm-compare-table thead { border: 0; } .mm-compare-table th, .mm-compare-table td { padding: 14px 16px; text-align: left; vertical-align: top; border: 0; } .mm-compare-table thead th { font-weight: 600; color: var(--mm-brand); border-bottom: 2px solid var(--mm-brand); } .mm-compare-table thead th:first-child { width: 130px; } .mm-compare-table tbody td { color: var(--mm-muted); border-bottom: 1px solid var(--mm-line); } .mm-compare-table tbody tr:last-child td { border-bottom: 0; } .mm-compare-table tbody tr:nth-child(odd) td { background: var(--mm-surface); } .mm-compare-table tbody td:first-child { color: var(--mm-ink); } .mm-compare-table figcaption { text-align: center; margin-top: 10px; font-size: 13px; color: var(--mm-muted); } /* §36 amendment (2.8) — scroll affordance. The 2.7 pattern scrolls correctly but signals nothing: overlay scrollbars are invisible on touch until touched, and the clip lands mid-glyph at the container edge — the table reads as broken and the rightmost columns go undiscovered. Three additive fixes. iOS Safari ignores webkit scrollbar styling entirely (by design): on iPhones the affordance is the sticky column + the caption hint. */ /* Always-visible thin scrollbar — browsers render it only when the figure actually overflows, so no media query. */ .mm-compare-table { overscroll-behavior-x: contain; /* table edge stops page bounce / back-swipe */ scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--mm-line-strong) var(--mm-surface-2); } .mm-compare-table::-webkit-scrollbar { /* Chrome / Edge / Safari */ height: 10px; } .mm-compare-table::-webkit-scrollbar-track { background: var(--mm-surface-2); border-radius: 999px; } .mm-compare-table::-webkit-scrollbar-thumb { background: var(--mm-line-strong); border-radius: 999px; } .mm-compare-table::-webkit-scrollbar-thumb:hover { background: var(--mm-muted); } /* Sticky label column. Backgrounds must be opaque and must mirror the §36 striping exactly — odd tbody rows get --mm-surface on the white card — or scrolling columns show through the pinned labels. Do not simplify the two backgrounds to one. Safe with this table's border-collapse: separate (collapse is the combo with Chrome sticky-border quirks). Inert at full width — the pinned cells never move unless the figure overflows. */ .mm-compare-table th:first-child, .mm-compare-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--mm-chrome); } .mm-compare-table tbody tr:nth-child(odd) td:first-child { background: var(--mm-surface); } /* Below the overflow threshold (table min-width 760px + .mm-section-inner side padding → just under 800px viewport): edge shadow off the pinned column + a "Swipe" hint prepended to the existing caption. Gated so wider screens stay pixel-identical. rgba = --mm-ink at 7%. */ @media (max-width: 800px) { .mm-compare-table th:first-child::after, .mm-compare-table td:first-child::after { content: ""; position: absolute; top: 0; right: -8px; bottom: 0; width: 8px; pointer-events: none; background: linear-gradient(to right, rgba(15, 31, 51, 0.07), transparent); } .mm-compare-table figcaption::before { content: "Swipe to see the full table — "; font-weight: 600; color: var(--mm-brand); } } /* ============================================================ §37 — HOMEPAGE NEUROMODULATOR BLOCK (.mm-neuro-*) Added style.css 2.4 (June 13, 2026). Photo-card row surfacing brand neuromodulator pages (Botox/Xeomin) + overview on the homepage. Reusable photo-card pattern; zero inline styles. ============================================================ */ .mm-neuro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; } .mm-neuro-card { display: flex; flex-direction: column; border: 1px solid var(--mm-border, #e2e8f0); border-radius: 12px; overflow: hidden; text-decoration: none; background: var(--mm-surface, #fff); transition: box-shadow .2s ease, transform .2s ease; } .mm-neuro-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); transform: translateY(-2px); } .mm-neuro-card__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .mm-neuro-card__body { padding: 20px 22px 24px; } .mm-neuro-card__body h3 { margin: 0 0 6px; } .mm-neuro-card__body p { margin: 0 0 12px; } .mm-neuro-card__cta { font-weight: 600; color: var(--mm-brand, #005494); } @media (max-width: 880px) { .mm-neuro-grid { grid-template-columns: 1fr; gap: 16px; } } /* ============================================================ 37. TRUST STRIP (reusable, used on About + service pages) ============================================================ */ .mm-trust-strip { background: var(--mm-chrome); padding: 60px 0; border-top: 1px solid var(--mm-line); border-bottom: 1px solid var(--mm-line); } .mm-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .mm-trust-item { display: flex; flex-direction: column; align-items: center; } .mm-trust-item svg { width: 32px; height: 32px; color: var(--mm-brand); margin-bottom: 12px; flex-shrink: 0; } .mm-trust-item h4 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; line-height: 1.15; color: var(--mm-brand); margin: 0 0 6px; } .mm-trust-item p { font-size: 13.5px; line-height: 1.5; color: var(--mm-muted); margin: 0; } @media (max-width: 900px) { .mm-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 540px) { .mm-trust-grid { grid-template-columns: 1fr; } } /* ============================================================ 38. RESULTS PREVIEW (homepage — before & after gallery teaser) 6 image cards linking to category-specific before/after pages. Images are forced to square via aspect-ratio + object-fit so the grid reads as a tidy mosaic regardless of source aspect ratios. ============================================================ */ .mm-results { background: var(--mm-chrome); padding: 90px 0; } .mm-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; } .mm-results-item { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--mm-radius); background: var(--mm-surface); text-decoration: none; color: var(--mm-chrome); transition: transform 0.3s ease, box-shadow 0.3s ease; } .mm-results-item:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(12, 68, 124, 0.18); } .mm-results-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s ease; } .mm-results-item:hover img { transform: scale(1.04); } /* Bottom gradient label — sits over the image, brand-navy fade */ .mm-results-item__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; background: linear-gradient( to top, rgba(4, 44, 83, 0.92) 0%, rgba(4, 44, 83, 0.6) 55%, transparent 100% ); color: #fff; font-family: Roboto, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; pointer-events: none; } .mm-results-cta { margin-top: 36px; } @media (max-width: 900px) { .mm-results-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .mm-results { padding: 60px 0; } .mm-results-grid { grid-template-columns: 1fr; gap: 12px; } .mm-results-item { aspect-ratio: 4 / 3; } } /* ============================================================ 39. STAT CARDS + ABOUT LEADERSHIP (Dr. Beal bio page) Number-led accomplishment cards (light cream band) and the two-column research read. Scoped to its own classes so the homepage §21 pillars are untouched. ============================================================ */ .mm-statcards-section { background: var(--mm-chrome); padding: 80px 0; } .mm-statcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .mm-statcard { background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); padding: 30px 26px; text-align: center; display: flex; flex-direction: column; gap: 6px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .mm-statcard:hover { transform: translateY(-4px); border-color: var(--mm-brand); box-shadow: 0 18px 40px rgba(12, 68, 124, 0.12); } .mm-statcard__num { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(44px, 5vw, 58px); line-height: 1; letter-spacing: -0.02em; color: var(--mm-brand); font-variation-settings: "opsz" 144, "SOFT" 50; } .mm-statcard__plus { color: var(--mm-brand-2); } .mm-statcard__label { font-family: Roboto, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--mm-ink); } .mm-statcard__desc { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--mm-muted); } /* Two-column research read on the leadership band */ .mm-about-research-cols { margin-top: 8px; } .mm-about-research-cols p { font-size: 17px; line-height: 1.7; color: var(--mm-ink); margin: 0; } @media (max-width: 900px) { .mm-statcards { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 540px) { .mm-statcards { grid-template-columns: 1fr; } .mm-statcards-section { padding: 60px 0; } } /* ============================================================ 40. PRESS & MEDIA (/press/ cards + bio "As featured in" strip) ============================================================ */ .mm-press-list { display: grid; gap: 16px; max-width: 880px; margin-inline: auto; } .mm-press-card { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "outlet type" "title title" "desc desc" "cta cta"; gap: 6px 16px; background: var(--mm-chrome); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); padding: 26px 28px; text-decoration: none; color: var(--mm-ink); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .mm-press-card:hover { transform: translateY(-3px); border-color: var(--mm-brand); box-shadow: 0 18px 40px rgba(12, 68, 124, 0.12); color: var(--mm-ink); } .mm-press-card__outlet { grid-area: outlet; font-family: Roboto, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mm-brand); align-self: center; } .mm-press-card__type { grid-area: type; justify-self: end; align-self: center; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mm-brand-2-hover); background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); padding: 4px 10px; white-space: nowrap; } .mm-press-card__title { grid-area: title; font-family: 'Fraunces', serif; font-weight: 500; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; color: var(--mm-brand); margin-top: 4px; } .mm-press-card__desc { grid-area: desc; font-size: 15px; line-height: 1.6; color: var(--mm-muted); } .mm-press-card__cta { grid-area: cta; font-family: Roboto, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mm-brand); margin-top: 6px; transition: color 0.2s ease; } .mm-press-card:hover .mm-press-card__cta { color: var(--mm-brand-3); } @media (max-width: 540px) { .mm-press-card { grid-template-columns: 1fr; grid-template-areas: "outlet" "type" "title" "desc" "cta"; padding: 22px; } .mm-press-card__type { justify-self: start; } } /* Bio "As featured in" strip — reuses .mm-creds-band__label for the heading */ .mm-press-strip-section { background: var(--mm-chrome); padding: 48px 0; border-bottom: 1px solid var(--mm-line); } .mm-press-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 40px); } .mm-press-strip__item { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(16px, 2vw, 20px); letter-spacing: -0.01em; color: var(--mm-muted); text-decoration: none; transition: color 0.2s ease; } .mm-press-strip__item:hover { color: var(--mm-brand); } /* Gap-year graduate testimonial */ .mm-grad-quote { max-width: 820px; margin-inline: auto; border-left: 4px solid var(--mm-brand-2); padding: 8px 0 8px 28px; } .mm-grad-quote p { font-family: 'Fraunces', serif; font-size: 19px; line-height: 1.6; color: var(--mm-ink); } .mm-grad-quote p:last-child { font-family: Roboto, sans-serif; font-size: 15px; color: var(--mm-muted); } /* Role/subtitle line on the navy hero — was inheriting dark mm-team-role color */ .mm-svc-hero .mm-team-role, .mm-hero .mm-team-role { color: var(--mm-brand-2); } /* ============================================================ 41. GALLERY HUB — featured group card (image + link list) ============================================================ */ .mm-gallery-group { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; } .mm-gallery-group__img { display: block; border-radius: var(--mm-radius-lg); overflow: hidden; border: 1px solid var(--mm-line); } .mm-gallery-group__img img { display: block; width: 100%; height: auto; transition: transform 0.3s ease; } .mm-gallery-group__img:hover img { transform: scale(1.03); } .mm-gallery-links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; } .mm-gallery-links li { break-inside: avoid; margin: 0 0 2px; } .mm-gallery-links a { display: block; font-family: Roboto, sans-serif; font-size: 15px; line-height: 1.4; color: var(--mm-brand); text-decoration: none; padding: 7px 10px; border-radius: var(--mm-radius-sm); border-bottom: 1px solid var(--mm-line); transition: background 0.18s ease, color 0.18s ease; } .mm-gallery-links a:hover { background: var(--mm-surface); color: var(--mm-brand-3); } @media (max-width: 768px) { .mm-gallery-group { grid-template-columns: 1fr; } .mm-gallery-group__img { max-width: 360px; } .mm-gallery-links { columns: 1; } }