/* ========================================================= MANGOES & PALM TREES - ULTIMATE MASTER STYLESHEET Version: 2026.41.ATLAS-BAND-COMPLETE - S58 article band luxury + S57/S56 retained. Philosophy: Quiet Luxury - Cognitive Ease - Editorial Soul COMPLETE TRANSFORMATION: - Every homepage section preserved and elevated - All components upgraded to luxury magazine standard - 840px reading column enforced sitewide - Lora/Inter typography hierarchy perfected - Image frames with rotation + hover lift - Generous whitespace, 8px rhythm - Kinematic reveals on scroll - Mobile: aggressive compression, never clips - SEO/GEO/AEO/E-E-A-T structure preserved Token authority: 007 PART 1 (--mpt-*). Deploy: MPT-CURSOR-AGENT-IMPLEMENTATION-GUIDE.md Site chrome (011): Section 6 = Phase 1 Kadence header; Section 18 = Phase 2 + progressive chrome Legacy migration: GLOBAL CSS.txt (--child-theme-*) -> --mpt-* tokens below Deploy: Upload wp-content/uploads/mpt-complete.css + mpt-scripts.js Snippets: mpt-enqueue-styles.php + mpt-enqueue-scripts.php (EPA pattern) Do NOT paste this full file in Additional CSS (~970KB — Kadence truncates ~50KB). Fonts: Kadence Typography loads Lora + Inter (no @import in this file). ========================================================= */ /* ========================================================= 0. KADENCE FULL-BLEED BREAKOUT (EPA parity — must load first) ========================================================= */ .wp-block-kadence-rowlayout:has(.mpt-page-hero), .wp-block-kadence-rowlayout:has(.mpt-atlas-hero), .wp-block-kadence-rowlayout:has(.mpt-atlas-article-header), .wp-block-kadence-rowlayout:has(.mpt-atlas-paths), .wp-block-kadence-rowlayout:has(.mpt-atlas-rail), .wp-block-kadence-rowlayout:has(.mpt-atlas-prose), .wp-block-kadence-rowlayout:has(.mpt-spotlight-band), .wp-block-kadence-rowlayout:has(.mpt-triptych-band), .wp-block-kadence-rowlayout:has(.mpt-parallax-band), .wp-block-kadence-rowlayout:has([id^="mpt-home-"]), .wp-block-kadence-rowlayout:has([id^="mpt-"][id$="-hero"]), .wp-block-kadence-rowlayout:has(#mpt-disclosure-pillar-2026), .wp-block-kadence-rowlayout:has(#mpt-policy-pillar-2026), .wp-block-kadence-rowlayout:has(.mpt-hero-shell), .wp-block-kadence-rowlayout:has(.mpt-hero:not(.mpt-hero-shell)), .kb-row-layout-wrap:has(.mpt-atlas-hero), .kb-row-layout-wrap:has(.mpt-atlas-article-header), .kb-row-layout-wrap:has(.mpt-atlas-paths), .kb-row-layout-wrap:has(.mpt-atlas-rail), .kb-row-layout-wrap:has(.mpt-atlas-prose), .kb-row-layout-wrap:has(.mpt-page-hero), .kb-row-layout-wrap:has(.mpt-spotlight-band), .kb-row-layout-wrap:has(.mpt-triptych-band), .kb-row-layout-wrap:has(.mpt-parallax-band), .kb-row-layout-wrap:has([id^="mpt-home-"]), .kb-row-layout-wrap:has([id^="mpt-"][id$="-hero"]), .kb-row-layout-wrap:has(#mpt-disclosure-pillar-2026), .kb-row-layout-wrap:has(#mpt-policy-pillar-2026), .kb-row-layout-wrap:has(.mpt-hero-shell), .kb-row-layout-wrap:has(.mpt-hero:not(.mpt-hero-shell)) { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 !important; } .wp-block-kadence-rowlayout:has(.mpt-page-hero), .wp-block-kadence-rowlayout:has(#mpt-disclosure-pillar-2026), .wp-block-kadence-rowlayout:has(#mpt-policy-pillar-2026), .wp-block-kadence-rowlayout:has([id^="mpt-"][id$="-hero"]), .kb-row-layout-wrap:has(.mpt-page-hero), .kb-row-layout-wrap:has(#mpt-disclosure-pillar-2026), .kb-row-layout-wrap:has(#mpt-policy-pillar-2026), .kb-row-layout-wrap:has([id^="mpt-"][id$="-hero"]) { overflow: hidden !important; } .wp-block-kadence-rowlayout:has(.mpt-page-hero) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.mpt-page-hero) .wp-block-kadence-column, .wp-block-kadence-rowlayout:has(.mpt-page-hero) .kadence-column, .wp-block-kadence-rowlayout:has(.mpt-page-hero) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has(.mpt-spotlight-band) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.mpt-spotlight-band) .kadence-column, .wp-block-kadence-rowlayout:has(.mpt-spotlight-band) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has(.mpt-triptych-band) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.mpt-triptych-band) .kadence-column, .wp-block-kadence-rowlayout:has(.mpt-triptych-band) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has(.mpt-parallax-band) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.mpt-parallax-band) .kadence-column, .wp-block-kadence-rowlayout:has(.mpt-parallax-band) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has([id^="mpt-home-"]) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has([id^="mpt-home-"]) .kadence-column, .wp-block-kadence-rowlayout:has([id^="mpt-home-"]) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has([id^="mpt-"][id$="-hero"]) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has([id^="mpt-"][id$="-hero"]) .kadence-column, .wp-block-kadence-rowlayout:has([id^="mpt-"][id$="-hero"]) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has(#mpt-disclosure-pillar-2026) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(#mpt-disclosure-pillar-2026) .kadence-column, .wp-block-kadence-rowlayout:has(#mpt-disclosure-pillar-2026) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has(#mpt-policy-pillar-2026) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(#mpt-policy-pillar-2026) .kadence-column, .wp-block-kadence-rowlayout:has(#mpt-policy-pillar-2026) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has(.mpt-hero-shell) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.mpt-hero-shell) .kadence-column, .wp-block-kadence-rowlayout:has(.mpt-hero-shell) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has(.mpt-hero:not(.mpt-hero-shell)) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.mpt-hero:not(.mpt-hero-shell)) .kadence-column, .wp-block-kadence-rowlayout:has(.mpt-hero:not(.mpt-hero-shell)) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has(.mpt-atlas-hero) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.mpt-atlas-hero) .wp-block-kadence-column, .wp-block-kadence-rowlayout:has(.mpt-atlas-hero) .kadence-column, .wp-block-kadence-rowlayout:has(.mpt-atlas-hero) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has(.mpt-atlas-article-header) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.mpt-atlas-article-header) .wp-block-kadence-column, .wp-block-kadence-rowlayout:has(.mpt-atlas-article-header) .kadence-column, .wp-block-kadence-rowlayout:has(.mpt-atlas-article-header) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has(.mpt-atlas-paths) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.mpt-atlas-paths) .wp-block-kadence-column, .wp-block-kadence-rowlayout:has(.mpt-atlas-paths) .kadence-column, .wp-block-kadence-rowlayout:has(.mpt-atlas-paths) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has(.mpt-atlas-rail) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.mpt-atlas-rail) .wp-block-kadence-column, .wp-block-kadence-rowlayout:has(.mpt-atlas-rail) .kadence-column, .wp-block-kadence-rowlayout:has(.mpt-atlas-rail) .kt-inside-inner-col, .wp-block-kadence-rowlayout:has(.mpt-atlas-prose) > .kt-row-column-wrap, .wp-block-kadence-rowlayout:has(.mpt-atlas-prose) .wp-block-kadence-column, .wp-block-kadence-rowlayout:has(.mpt-atlas-prose) .kadence-column, .wp-block-kadence-rowlayout:has(.mpt-atlas-prose) .kt-inside-inner-col, .kb-row-layout-wrap:has(.mpt-atlas-hero) > .kt-row-column-wrap, .kb-row-layout-wrap:has(.mpt-atlas-hero) .kadence-column, .kb-row-layout-wrap:has(.mpt-atlas-hero) .kt-inside-inner-col, .kb-row-layout-wrap:has(.mpt-atlas-article-header) > .kt-row-column-wrap, .kb-row-layout-wrap:has(.mpt-atlas-article-header) .kadence-column, .kb-row-layout-wrap:has(.mpt-atlas-article-header) .kt-inside-inner-col, .kb-row-layout-wrap:has(.mpt-atlas-paths) > .kt-row-column-wrap, .kb-row-layout-wrap:has(.mpt-atlas-paths) .kadence-column, .kb-row-layout-wrap:has(.mpt-atlas-paths) .kt-inside-inner-col, .kb-row-layout-wrap:has(.mpt-atlas-rail) > .kt-row-column-wrap, .kb-row-layout-wrap:has(.mpt-atlas-rail) .kadence-column, .kb-row-layout-wrap:has(.mpt-atlas-rail) .kt-inside-inner-col, .kb-row-layout-wrap:has(.mpt-atlas-prose) > .kt-row-column-wrap, .kb-row-layout-wrap:has(.mpt-atlas-prose) .kadence-column, .kb-row-layout-wrap:has(.mpt-atlas-prose) .kt-inside-inner-col, .kb-row-layout-wrap:has(.mpt-page-hero) > .kt-row-column-wrap, .kb-row-layout-wrap:has(.mpt-page-hero) .kadence-column, .kb-row-layout-wrap:has(.mpt-page-hero) .kt-inside-inner-col, .kb-row-layout-wrap:has(.mpt-spotlight-band) > .kt-row-column-wrap, .kb-row-layout-wrap:has(.mpt-spotlight-band) .kadence-column, .kb-row-layout-wrap:has(.mpt-spotlight-band) .kt-inside-inner-col, .kb-row-layout-wrap:has(.mpt-triptych-band) > .kt-row-column-wrap, .kb-row-layout-wrap:has(.mpt-triptych-band) .kadence-column, .kb-row-layout-wrap:has(.mpt-triptych-band) .kt-inside-inner-col, .kb-row-layout-wrap:has(.mpt-parallax-band) > .kt-row-column-wrap, .kb-row-layout-wrap:has(.mpt-parallax-band) .kadence-column, .kb-row-layout-wrap:has(.mpt-parallax-band) .kt-inside-inner-col, .kb-row-layout-wrap:has([id^="mpt-home-"]) > .kt-row-column-wrap, .kb-row-layout-wrap:has([id^="mpt-home-"]) .kadence-column, .kb-row-layout-wrap:has([id^="mpt-home-"]) .kt-inside-inner-col, .kb-row-layout-wrap:has([id^="mpt-"][id$="-hero"]) > .kt-row-column-wrap, .kb-row-layout-wrap:has([id^="mpt-"][id$="-hero"]) .kadence-column, .kb-row-layout-wrap:has([id^="mpt-"][id$="-hero"]) .kt-inside-inner-col, .kb-row-layout-wrap:has(#mpt-disclosure-pillar-2026) > .kt-row-column-wrap, .kb-row-layout-wrap:has(#mpt-disclosure-pillar-2026) .kadence-column, .kb-row-layout-wrap:has(#mpt-disclosure-pillar-2026) .kt-inside-inner-col, .kb-row-layout-wrap:has(#mpt-policy-pillar-2026) > .kt-row-column-wrap, .kb-row-layout-wrap:has(#mpt-policy-pillar-2026) .kadence-column, .kb-row-layout-wrap:has(#mpt-policy-pillar-2026) .kt-inside-inner-col, .kb-row-layout-wrap:has(.mpt-hero-shell) > .kt-row-column-wrap, .kb-row-layout-wrap:has(.mpt-hero-shell) .kadence-column, .kb-row-layout-wrap:has(.mpt-hero-shell) .kt-inside-inner-col, .kb-row-layout-wrap:has(.mpt-hero:not(.mpt-hero-shell)) > .kt-row-column-wrap, .kb-row-layout-wrap:has(.mpt-hero:not(.mpt-hero-shell)) .kadence-column, .kb-row-layout-wrap:has(.mpt-hero:not(.mpt-hero-shell)) .kt-inside-inner-col { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } .entry-content .kt-inside-inner-col:has(.mpt-page-hero), .entry-content .kt-inside-inner-col:has(.mpt-atlas-hero), .entry-content .kt-inside-inner-col:has(.mpt-atlas-article-header), .entry-content .kt-inside-inner-col:has(.mpt-atlas-paths), .entry-content .kt-inside-inner-col:has(.mpt-atlas-rail), .entry-content .kt-inside-inner-col:has(.mpt-atlas-prose), .entry-content .kt-inside-inner-col:has(.mpt-spotlight-band), .entry-content .kt-inside-inner-col:has(.mpt-triptych-band), .entry-content .kt-inside-inner-col:has(.mpt-parallax-band), .entry-content .kt-inside-inner-col:has([id^="mpt-"][id$="-hero"]), .entry-content .kt-inside-inner-col:has(#mpt-disclosure-pillar-2026), .entry-content .kt-inside-inner-col:has(#mpt-policy-pillar-2026), .entry-content .kt-inside-inner-col:has(.mpt-hero-shell), body.home .entry-content .kt-inside-inner-col:has([id^="mpt-home-"]) { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } html { overflow-x: hidden; } body.home { background: var(--mpt-cream-warm, #F8F6F2); } /* ========================================================= 1. DESIGN TOKENS - LUXURY MAGAZINE FOUNDATION ========================================================= */ :root { /* Brand colors - warmer, softer luxury palette */ --mpt-rust: #E67961; --mpt-rust-dark: #C95F48; --mpt-rust-light: rgba(230, 121, 97, 0.08); --mpt-teal: #13343B; --mpt-teal-soft: #1C4A54; --mpt-teal-deep: #0E252B; --mpt-teal-light: rgba(19,52,59,0.06); /* 007 canonical */ --mpt-green: #2E7D32; --mpt-green-dark: #1B5E20; --mpt-green-light: rgba(46, 125, 50, 0.08); --mpt-gold: #FFB26B; --mpt-gold-light: rgba(255, 178, 107, 0.15); /* Neutrals - paper-like warmth */ --mpt-cream: #F9FBFA; --mpt-cream-warm: #F8F6F2; /* 007 canonical */ --mpt-paper: #FCFBF8; --mpt-warm: #F7F5F1; --mpt-white: #FFFFFF; --mpt-border: #E0E4E8; --mpt-border-warm: #E5E1DA; --mpt-rule: rgba(19, 52, 59, 0.12); --mpt-rule-soft: rgba(19, 52, 59, 0.08); /* Text - never pure black, WCAG AAA verified */ --mpt-text: #444444; /* 007 canonical */ --mpt-text-soft: #5C6468; --mpt-muted: #667085; /* 007 canonical */ --mpt-text-muted: var(--mpt-muted); /* alias */ --mpt-heading: #243338; /* Typography stacks - Zero Layout Shift */ --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Fluid type scale - magazine hierarchy */ --text-display: clamp(3rem, 7vw, 5.2rem); --text-h1: clamp(2.6rem, 5.5vw, 4rem); --text-h2: clamp(1.9rem, 3.8vw, 2.8rem); --text-h3: clamp(1.5rem, 2.8vw, 2rem); --text-h4: 1.4rem; --text-lead: clamp(1.2rem, 2.4vw, 1.5rem); --text-body: 1.125rem; --text-body-fluid: clamp(1rem, 0.4vw + 0.95rem, 1.125rem); --text-small: 0.96rem; --text-caption: 0.9rem; --text-kicker: 0.75rem; --text-meta: 0.85rem; --tracking-kicker: 0.14em; /* Font weights */ --w-bold: 800; --w-semibold: 700; --w-medium: 600; --w-normal: 400; --w-light: 300; /* Line heights - reading rhythm */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; --lh-loose: 1.9; --lh-body: 1.75; --lh-literature: 1.9; /* Letter spacing */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.10em; --ls-wider: 0.16em; --ls-widest: 0.22em; /* Spacing - 8px base rhythm */ --sp-1: 0.5rem; /* 8px */ --sp-2: 1rem; /* 16px */ --sp-3: 1.25rem; /* 20px */ --sp-4: 1.5rem; /* 24px */ --sp-5: 2rem; /* 32px */ --sp-6: 2.5rem; /* 40px */ --sp-7: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-9: 5rem; /* 80px */ --sp-10: 6rem; /* 96px */ --sp-11: 8rem; /* 128px */ /* Reading measures - CRITICAL COGNITIVE STANDARD */ --measure-tight: 640px; --measure-body: 840px; /* NEVER WIDER FOR PARAGRAPHS */ --measure-content: 980px; --measure-wide: 1140px; --measure-max: 1240px; /* Shadows - luxury layered system */ --shadow-xs: 0 2px 8px rgba(19,52,59,0.04); --shadow-sm: 0 4px 15px rgba(19,52,59,0.05); --shadow-md: 0 14px 40px rgba(19,52,59,0.08); --shadow-lg: 0 18px 44px rgba(19,52,59,0.10); --shadow-xl: 0 24px 70px rgba(19,52,59,0.12); --shadow-hero: 0 22px 48px rgba(19,52,59,0.14); --shadow-rust: 0 12px 28px rgba(230,121,97,0.35); /* Radii */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-pill: 999px; /* Transitions */ --tx-fast: 0.2s ease; --tx-normal: 0.25s ease; --tx-slow: 0.35s ease; --tx-lift: transform 0.3s ease, box-shadow 0.3s ease; --tx-color: color 0.2s ease, background-color 0.2s ease; /* Section vertical rhythm */ --section-y: clamp(3.5rem, 6vw, 5.5rem); --section-y-large: clamp(4rem, 8vw, 8rem); /* Focus ring */ --focus-ring: 3px solid var(--mpt-gold); --focus-offset: 3px; } /* ========================================================= 2. GLOBAL RESETS & BASE STYLES - ULTIMATE READABILITY ========================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-loose); color: var(--mpt-text); background: var(--mpt-white); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Prevent horizontal scroll */ html, body { overflow-x: hidden !important; max-width: 100%; } /* All media - fluid by default */ img, video, picture, canvas, svg, iframe, embed, object { max-width: 100%; height: auto; } /* ========================================================= 3. TYPOGRAPHY - MAGAZINE HIERARCHY (LORA + INTER) ========================================================= */ /* Headings - Lora serif, bold, tight leading */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif) !important; font-weight: var(--w-bold); color: var(--mpt-teal); margin: 0 0 var(--sp-4) 0; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); color: var(--mpt-green); line-height: var(--lh-snug); } h4 { font-size: var(--text-h4); line-height: var(--lh-snug); } h5 { font-size: 1.2rem; line-height: var(--lh-snug); } h6 { font-size: 1rem; line-height: var(--lh-snug); } /* Body paragraphs - THE READING COLUMN (840px MAX) */ p { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-loose); color: var(--mpt-text); margin: 0 0 var(--sp-4) 0; max-width: var(--measure-body); /* 840px HARD LIMIT */ } /* Strong text - bold lead-ins (Neil Patel style) */ p strong { color: var(--mpt-teal); font-weight: var(--w-bold); } /* Emphasis */ em { font-style: italic; } /* Lead paragraph (standfirst) */ .mpt-lead { font-size: var(--text-lead); font-style: italic; color: var(--mpt-heading); line-height: var(--lh-relaxed); max-width: var(--measure-body); } /* Kicker label */ .mpt-kicker { display: inline-block; font-family: var(--font-sans); font-size: var(--text-kicker); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--mpt-rust); margin-bottom: var(--sp-2); border-bottom: 2px solid var(--mpt-rust); padding-bottom: 2px; } /* Caption text */ .mpt-caption { display: block; text-align: center; font-family: var(--font-sans); font-size: var(--text-caption); font-style: italic; line-height: 1.6; color: var(--mpt-text-muted); margin-top: var(--sp-2); } /* Drop-cap - magazine editorial opening */ .mpt-dropcap::first-letter { font-family: var(--font-serif); font-size: 4.5rem; font-weight: var(--w-bold); color: var(--mpt-rust); float: left; line-height: 0.8; margin: 0.5rem 0.8rem 0 0; } /* Pull-quote - editorial emphasis */ .mpt-pullquote { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; font-style: italic; color: var(--mpt-teal); border-left: 4px solid var(--mpt-rust); padding: var(--sp-5) 0 var(--sp-5) var(--sp-6); margin: var(--sp-8) 0; max-width: 600px; } /* Blockquotes */ blockquote, .mpt-blockquote { margin: clamp(2rem, 4vw, 3rem) 0; padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.2rem); background: var(--mpt-cream); border-left: 5px solid var(--mpt-rust); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-family: var(--font-serif); font-size: clamp(1.08rem, 1.8vw, 1.28rem); line-height: 1.6; color: var(--mpt-teal); font-style: italic; font-weight: 500; } blockquote cite, .mpt-blockquote cite { display: block; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--mpt-rule); font-family: var(--font-sans); font-size: clamp(0.86rem, 1.3vw, 0.94rem); font-style: normal; font-weight: 700; color: var(--mpt-text-muted); letter-spacing: 0.04em; text-transform: uppercase; } /* ========================================================= 4. LINKS - GREEN UNDERLINE SYSTEM ========================================================= */ a, .mpt-link, .mpt-inline-link { color: var(--mpt-green); font-weight: var(--w-semibold); text-decoration: none; position: relative; transition: var(--tx-color); } a::after, .mpt-link::after, .mpt-inline-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--mpt-green); transition: width 0.25s ease; } a:hover::after, .mpt-link:hover::after, .mpt-inline-link::after { width: 100%; } a:hover, .mpt-link:hover, .mpt-inline-link:hover { color: var(--mpt-teal); } /* Rust link variant */ .mpt-link-rust { color: var(--mpt-rust-dark); } .mpt-link-rust::after { background: var(--mpt-rust); } /* Light link (on dark backgrounds) */ .mpt-link-light { color: var(--mpt-gold); } .mpt-link-light::after { background: var(--mpt-gold); } .mpt-link-light:hover { color: #ffffff; } /* ========================================================= 5. BUTTONS - THREE LUXURY VARIANTS ========================================================= */ .mpt-btn, .mpt-btn-primary, .mpt-btn-secondary, .mpt-btn-outline { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: var(--sp-2) var(--sp-6); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 1rem; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; transition: var(--tx-normal); cursor: pointer; border: 2px solid transparent; } /* Primary button - rust with ripple effect */ .mpt-btn-primary { background: var(--mpt-rust); color: #ffffff !important; border-color: var(--mpt-rust); box-shadow: var(--shadow-rust); position: relative; overflow: hidden; } .mpt-btn-primary::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,0.15); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease; } .mpt-btn-primary:hover::before { width: 300px; height: 300px; } .mpt-btn-primary:hover { background: var(--mpt-rust-dark); border-color: var(--mpt-rust-dark); transform: translateY(-2px); box-shadow: 0 18px 34px rgba(19,52,59,0.34); } /* Secondary button - transparent with white border */ .mpt-btn-secondary { background: rgba(255,255,255,0.12); color: #ffffff !important; border: 2px solid #ffffff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .mpt-btn-secondary:hover { background: rgba(255,255,255,0.22); border-color: #ffffff; transform: translateY(-2px); } /* Outline button - teal border */ .mpt-btn-outline { background: transparent; color: var(--mpt-teal); border: 2px solid var(--mpt-teal); } .mpt-btn-outline:hover { background: var(--mpt-teal); color: #ffffff; transform: translateY(-3px); } /* ========================================================= 6. HEADER & NAVIGATION - TRANSPARENT TO SOLID ON SCROLL ========================================================= */ /* Top header bar */ .kadence-top-header { background-color: var(--mpt-teal) !important; color: rgba(255, 255, 255, 0.9) !important; font-family: var(--font-sans); font-size: var(--text-kicker); letter-spacing: 0.05em; padding: 0.4rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .kadence-top-header a { color: var(--mpt-gold) !important; font-weight: 700; transition: opacity 0.2s ease; } .kadence-top-header a:hover { opacity: 0.8; } /* Main header - floating, transforms on scroll */ .kadence-main-header { background-color: transparent !important; border-bottom: none; box-shadow: none; transition: background 0.4s ease, box-shadow 0.4s ease; } /* Scrolled state */ .kadence-main-header.scrolled { background-color: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--mpt-border); box-shadow: 0 4px 20px rgba(19, 52, 59, 0.03); } /* Kadence mobile drawer — safe-area + z-index for luxury overlay */ .mobile-navigation, .drawer-navigation, #mobile-drawer, .site-header-item-mobile-navigation { z-index: 999990; } .mobile-navigation, .drawer-navigation, #mobile-drawer .drawer-inner { padding-bottom: env(safe-area-inset-bottom, 0); } .mobile-navigation a, .drawer-navigation a { min-height: 44px; display: flex; align-items: center; } /* Navigation links */ .header-navigation .menu > li > a { font-family: var(--font-sans) !important; font-size: 0.88rem !important; font-weight: var(--w-bold) !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mpt-teal) !important; padding: 1.8rem 1.2rem !important; transition: color 0.25s ease; position: relative; } /* Animated underline on hover */ .header-navigation .menu > li > a::after { content: ''; position: absolute; bottom: 1.2rem; left: 1.2rem; right: 1.2rem; height: 3px; background-color: var(--mpt-rust); transform: scaleX(0); transform-origin: right; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; } .header-navigation .menu > li:hover > a::after, .header-navigation .menu > li.current-menu-item > a::after { transform: scaleX(1); transform-origin: left; } .header-navigation .menu > li:hover > a, .header-navigation .menu > li.current-menu-item > a { color: var(--mpt-rust-dark) !important; } /* Dropdown menus */ .header-navigation .menu ul.sub-menu { background-color: var(--mpt-paper) !important; border: 1px solid var(--mpt-border) !important; border-top: 4px solid var(--mpt-green) !important; border-radius: 0 0 12px 12px; box-shadow: var(--shadow-xl) !important; padding: 1rem 0 !important; min-width: 260px; } .header-navigation .menu ul.sub-menu li a { font-family: var(--font-sans) !important; font-size: 0.9rem !important; font-weight: 600 !important; color: var(--mpt-text) !important; padding: 0.8rem 1.5rem !important; text-transform: none; letter-spacing: 0; transition: all 0.2s ease; } .header-navigation .menu ul.sub-menu li a:hover { background-color: var(--mpt-cream) !important; color: var(--mpt-green) !important; padding-left: 1.8rem !important; } /* site-main-header-wrap — matches mpt-scripts.js .at-top / .scrolled toggle */ #masthead, .site-header { position: relative; z-index: 200; } .site-main-header-wrap, .site-main-header-wrap.at-top { background: transparent !important; border-bottom: none !important; box-shadow: none !important; transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; } .site-main-header-wrap.scrolled, .site-main-header-wrap.at-top.scrolled { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--mpt-border) !important; box-shadow: 0 4px 20px rgba(19, 52, 59, 0.06) !important; } .site-header .custom-logo-link img, .site-header .brand img { max-height: 52px; width: auto; transition: filter 0.3s ease; } .header-navigation .header-search-wrap a, .site-header .header-search-wrap a, .site-header .search-toggle, .site-header-item .search-toggle { color: var(--mpt-teal) !important; opacity: 0.9; transition: opacity 0.2s ease, color 0.2s; } .header-navigation .header-search-wrap a:hover, .site-header .search-toggle:hover { opacity: 1; color: var(--mpt-rust) !important; } .mobile-toggle-open, .menu-toggle-open, .drawer-toggle .menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--mpt-border); border-radius: 8px; background: rgba(255, 255, 255, 0.92); cursor: pointer; } .mobile-toggle-open .menu-toggle-icon, .menu-toggle-open .kadence-svg-icon { color: var(--mpt-teal) !important; } /* 6A — Homepage Atlas header (cream hero; teal nav at top, solid on scroll) */ body.home #masthead .site-main-header-wrap.at-top, body.home .site-main-header-wrap.at-top { background: transparent !important; } body.home #masthead .site-main-header-wrap.at-top .header-navigation .menu > li > a, body.home .site-main-header-wrap.at-top .header-navigation .menu > li > a { color: var(--mpt-teal) !important; text-shadow: none; } body.home #masthead .site-main-header-wrap.at-top .header-navigation .menu > li:hover > a, body.home #masthead .site-main-header-wrap.at-top .header-navigation .menu > li.current-menu-item > a, body.home .site-main-header-wrap.at-top .header-navigation .menu > li:hover > a, body.home .site-main-header-wrap.at-top .header-navigation .menu > li.current-menu-item > a { color: var(--mpt-rust-dark) !important; opacity: 1; } body.home #masthead .site-main-header-wrap.scrolled .header-navigation .menu > li > a, body.home .site-main-header-wrap.scrolled .header-navigation .menu > li > a { color: var(--mpt-teal) !important; text-shadow: none; } body.home #masthead .site-main-header-wrap.at-top .custom-logo-link img, body.home .site-main-header-wrap.at-top .custom-logo-link img { filter: none; } body.home #masthead .site-main-header-wrap.at-top .header-search-wrap a, body.home #masthead .site-main-header-wrap.at-top .search-toggle, body.home .site-main-header-wrap.at-top .search-toggle { color: var(--mpt-teal) !important; } body.home #masthead .site-main-header-wrap.at-top .mobile-toggle-open, body.home #masthead .site-main-header-wrap.at-top .menu-toggle-open { border-color: var(--mpt-border); background: rgba(255, 255, 255, 0.92); } body.home #masthead .site-main-header-wrap.at-top .mobile-toggle-open .menu-toggle-icon, body.home #masthead .site-main-header-wrap.at-top .menu-toggle-open .kadence-svg-icon { color: var(--mpt-teal) !important; } body.home .entry-content > .kb-row-layout-wrap:has(.mpt-atlas-hero), body.home .entry-content > .wp-block-kadence-rowlayout:has(.mpt-atlas-hero) { padding-top: var(--mpt-kadence-header-offset, 88px); } body.home .mpt-breadcrumb-wrap.mpt-atlas-inner { margin-top: 0; padding-top: 0.5rem; } /* Tier B category hub — header clearance on injected atlas band */ body.category .mpt-category-hub-atlas-band { padding-top: var(--mpt-kadence-header-offset, 88px); } body.category .mpt-category-hub-atlas-band .mpt-breadcrumb-wrap.mpt-atlas-inner { margin-top: 0; padding-top: 0.5rem; } @media (min-width: 1025px) { #mobile-drawer.popup-drawer, .popup-drawer#mobile-drawer, .popup-drawer:not(.active) { visibility: hidden !important; pointer-events: none !important; } .header-navigation.header-navigation:not(.drawer-navigation) { display: flex !important; } .site-header-item-mobile-navigation, .site-header .mobile-navigation:not(.drawer-navigation) { display: none !important; } } @media (max-width: 1024px) { .header-navigation.header-navigation:not(.drawer-navigation) { display: none !important; } #mobile-drawer.popup-drawer.active, .popup-drawer.active { visibility: visible !important; pointer-events: auto !important; } #mobile-drawer.active .drawer-inner, .popup-drawer.active .drawer-inner { background: var(--mpt-paper) !important; } .mobile-navigation ul, .drawer-nav .menu, .popup-drawer .menu, #mobile-menu { list-style: none !important; margin: 0 !important; padding: 0 !important; } .mobile-navigation ul li, .drawer-nav .menu li, .popup-drawer .menu li, #mobile-menu > li { list-style: none !important; border-bottom: 1px solid var(--mpt-border); margin: 0; } .mobile-navigation ul li a, .drawer-nav .menu li a, .popup-drawer .menu li a, .drawer-nav-drop-wrap > a { display: flex; align-items: center; min-height: 48px; padding: 0.85rem 1.25rem !important; font-family: var(--font-sans) !important; font-size: 0.95rem !important; font-weight: 700 !important; color: var(--mpt-teal) !important; text-decoration: none !important; text-transform: none; letter-spacing: 0; } .mobile-navigation ul li a:hover, .drawer-nav .menu li a:hover, .drawer-nav-drop-wrap > a:hover { background: var(--mpt-cream) !important; color: var(--mpt-rust-dark) !important; } .mobile-navigation ul ul.sub-menu, .drawer-nav .sub-menu, #mobile-menu .sub-menu { padding-left: 0 !important; background: var(--mpt-cream) !important; border-top: 1px solid var(--mpt-border); list-style: none !important; } .mobile-navigation ul ul.sub-menu li a, .drawer-nav .sub-menu li a { padding-left: 1.75rem !important; font-size: 0.88rem !important; font-weight: 600 !important; } .drawer-header .drawer-toggle, .menu-toggle-close { padding: 0.75rem 1rem; font-weight: 800; color: var(--mpt-teal); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; } .drawer-sub-toggle { border: 0; background: transparent; color: var(--mpt-teal); min-width: 44px; min-height: 44px; } } /* ========================================================= 7. EDITORIAL UTILITIES & COMPONENTS ========================================================= */ /* Skip links: Kadence Accessibility tab handles site skip - not in MPT Custom HTML */ .mpt-skip-link, a.mpt-skip { display: none !important; visibility: hidden !important; position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; pointer-events: none !important; } /* Screen reader only */ .mpt-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Containers */ .mpt-container { max-width: var(--measure-max); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 1.5rem); } .mpt-container--lg { max-width: var(--measure-wide); } .mpt-container--md { max-width: var(--measure-content); } .mpt-container--sm { max-width: var(--measure-tight); } .mpt-container--reading { max-width: var(--measure-body); } /* Reading-width container */ .mpt-reading-width, .mpt-article-body { max-width: var(--measure-body); /* 840px */ margin: 0 auto; padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 1.5rem); font-size: var(--text-body); line-height: var(--lh-loose); } /* Divider */ .mpt-divider { width: 72px; height: 4px; background: var(--mpt-rust); border-radius: var(--radius-pill); margin: 2rem auto 0; } /* Editorial rule */ .mpt-editorial-rule { display: block; width: 100%; height: 1px; background-color: var(--mpt-border); margin: clamp(2rem, 4vw, 3.5rem) 0; } .mpt-editorial-rule.thick { height: 4px; background-color: var(--mpt-teal); width: 78px; border-radius: var(--radius-pill); margin: 1.5rem auto 0; } /* Data box */ .mpt-data-box { background: #ffffff; border: 1px solid var(--mpt-border-warm); padding: clamp(1.5rem, 4vw, 3.5rem); margin: clamp(2rem, 4vw, 3.5rem) 0; box-shadow: var(--shadow-xs); border-radius: var(--radius-sm); } .mpt-data-box.rust-edge { border-top: 4px solid var(--mpt-rust); } .mpt-data-box.teal-edge { border-top: 4px solid var(--mpt-teal); } .mpt-data-box.green-edge { border-top: 4px solid var(--mpt-green); } /* AEO answer block */ .mpt-aeo-block { background: var(--mpt-cream); border-left: 4px solid var(--mpt-green); padding: clamp(1.2rem, 3vw, 1.5rem) clamp(1.2rem, 3vw, 2rem); margin: clamp(1rem, 3vw, 1.5rem) 0 clamp(2rem, 4vw, 3.5rem) 0; font-family: var(--font-sans); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .mpt-aeo-block p { margin: 0; font-size: var(--text-body); color: var(--mpt-teal-deep); font-weight: 600; line-height: 1.7; } /* Editorial numbered list */ ol.mpt-editorial-list { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3.5rem) 0; counter-reset: mpt-editorial-counter; } ol.mpt-editorial-list > li { position: relative; padding-left: clamp(2.8rem, 5vw, 3.5rem); margin-bottom: clamp(1.5rem, 4vw, 3.5rem); font-size: var(--text-body); line-height: 1.7; border-bottom: 1px solid var(--mpt-border); padding-bottom: clamp(1.5rem, 4vw, 3.5rem); } ol.mpt-editorial-list > li:last-child { border-bottom: none; } ol.mpt-editorial-list > li::before { counter-increment: mpt-editorial-counter; content: counter(mpt-editorial-counter); position: absolute; left: 0; top: -0.2rem; font-family: var(--font-sans); font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 800; color: var(--mpt-teal); background: var(--mpt-cream); width: clamp(2rem, 4vw, 2.5rem); height: clamp(2rem, 4vw, 2.5rem); display: flex; align-items: center; justify-content: center; border-radius: 50%; } /* ========================================================= 8. IMAGE FRAME SYSTEM - ROTATION + HOVER LIFT ========================================================= */ /* Universal frame - rotated, lifts on hover */ .mpt-frame, .mpt-frame-15 { background: #ffffff; border: 6px solid #ffffff; border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; transform: rotate(-1deg); transition: var(--tx-lift); margin: clamp(2rem, 4vw, 3.5rem) auto; will-change: transform; } .mpt-frame:hover, .mpt-frame-15:hover { transform: rotate(0deg) scale(1.02); box-shadow: var(--shadow-md); } .mpt-frame img, .mpt-frame-15 img { width: 100%; height: auto; display: block; } /* Frame solo - centered single image */ .mpt-frame-solo { max-width: 900px; margin: var(--sp-8) auto; display: block; } /* 2-column grid */ .mpt-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); margin: var(--sp-8) 0; } /* 4-image grid (2 - 2) */ .mpt-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); margin: var(--sp-8) 0; } /* Grid-applied rotation - alternating */ .mpt-grid-2 .mpt-frame:nth-child(odd), .mpt-grid-4 .mpt-frame:nth-child(odd) { transform: rotate(-1.5deg); } .mpt-grid-2 .mpt-frame:nth-child(even), .mpt-grid-4 .mpt-frame:nth-child(even) { transform: rotate(1.5deg); } .mpt-grid-2 .mpt-frame:hover, .mpt-grid-4 .mpt-frame:hover { transform: rotate(0deg) scale(1.02); } /* Split grid - 1.1fr 1fr asymmetric */ .mpt-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items: center; margin: var(--sp-8) 0; } .mpt-split.reverse { grid-template-columns: 1fr 1.1fr; } /* ========================================================= 9. CONTENT CARDS & BOXES ========================================================= */ /* Highlight box - cream background, rust border */ .mpt-highlight { background: #FDF7F2; border-left: 6px solid var(--mpt-rust); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: var(--sp-6); margin: var(--sp-8) 0; box-shadow: 0 4px 15px rgba(230,121,97,0.05); } .mpt-highlight h4 { font-size: var(--text-h4); color: var(--mpt-rust); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 var(--sp-2) 0; } /* Standout card - teal background, palm emoji */ .mpt-standout { background: var(--mpt-teal); border-radius: var(--radius-lg); padding: var(--sp-7); color: #ffffff; box-shadow: 0 16px 40px rgba(19,52,59,0.2); position: relative; overflow: hidden; margin: var(--sp-7) 0; } .mpt-standout::before { content: ''; position: absolute; top: -10px; right: 10px; font-size: 6rem; opacity: 0.05; transform: rotate(15deg); pointer-events: none; } .mpt-standout h3 { font-size: 1.7rem; color: var(--mpt-gold); margin: 0 0 var(--sp-2) 0; } .mpt-standout p { font-size: 1.1rem; line-height: 1.85; color: rgba(255,255,255,0.92); } /* Callout boxes - info/warning/tip */ .mpt-callout { margin: clamp(1.5rem, 3vw, 2.5rem) 0; padding: clamp(1.2rem, 2.5vw, 1.6rem) clamp(1.2rem, 2.5vw, 1.8rem); border-radius: var(--radius-md); background: var(--mpt-cream); border-left: 5px solid var(--mpt-teal); font-family: var(--font-sans); font-size: clamp(0.94rem, 1.4vw, 1rem); line-height: 1.78; color: var(--mpt-text); } .mpt-callout strong { display: block; margin-bottom: 0.4rem; font-family: var(--font-sans); font-size: clamp(0.82rem, 1.3vw, 0.92rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mpt-teal); } .mpt-callout.tip { border-left-color: var(--mpt-green); } .mpt-callout.tip strong { color: var(--mpt-green); } .mpt-callout.warning { border-left-color: var(--mpt-rust); background: rgba(230, 121, 97, 0.08); } .mpt-callout.warning strong { color: var(--mpt-rust-dark); } /* ========================================================= 10. DATA TABLES - GREEN GRADIENT HEADER ========================================================= */ /* Table wrapper - with scroll on mobile */ .mpt-table-wrap, .mpt-table-wrapper { margin: var(--sp-8) 0; background: var(--mpt-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; border: 2px solid var(--mpt-green); position: relative; } .mpt-table-wrap[data-scrollable], .mpt-table-wrapper[data-scrollable] { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { .mpt-table-wrap[data-scrollable]::after, .mpt-table-wrapper[data-scrollable]::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2rem; pointer-events: none; background: linear-gradient(to left, rgba(249, 251, 250, 0.95), transparent); } } /* Table header */ .mpt-table-head { background: linear-gradient(135deg, var(--mpt-green) 0%, var(--mpt-green-dark) 100%); padding: var(--sp-5) var(--sp-6); text-align: center; } .mpt-table-head h3 { font-size: 1.65rem; color: #ffffff; margin: 0; } /* Table inner - scrollable */ .mpt-table-inner { overflow-x: auto; background: var(--mpt-cream); padding: var(--sp-2); -webkit-overflow-scrolling: touch; } .mpt-table-inner table, table.mpt-table { width: 100%; border-collapse: collapse; min-width: 650px; background: var(--mpt-white); font-family: var(--font-sans); font-size: clamp(0.88rem, 1.4vw, 1rem); } .mpt-table-inner th, table.mpt-table thead th { padding: var(--sp-4); border-bottom: 1px solid var(--mpt-border); color: var(--mpt-teal); font-weight: var(--w-bold); font-size: 1.05rem; background: #f8f9fa; border-right: 1px solid var(--mpt-border); text-align: left; } .mpt-table-inner td, table.mpt-table tbody td { padding: var(--sp-4); border-bottom: 1px solid var(--mpt-border); font-size: 1.05rem; line-height: 1.7; border-right: 1px solid var(--mpt-border); vertical-align: top; } .mpt-table-inner tr:nth-child(even) td, table.mpt-table tbody tr:nth-child(even) td { background: var(--mpt-cream); } .mpt-table-inner tr:last-child td, table.mpt-table tbody tr:last-child td { border-bottom: none; } /* ========================================================= 11. FAQ SECTION - 2-COLUMN CARD GRID ========================================================= */ .mpt-faq-section { background: var(--mpt-cream); padding: var(--sp-9) var(--sp-4); } .mpt-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); max-width: var(--measure-wide); margin: var(--sp-8) auto 0; } .mpt-faq-card, .mpt-faq-item { background: var(--mpt-white); border: 1px solid var(--mpt-border); border-radius: var(--radius-lg); padding: var(--sp-7) var(--sp-6); transition: var(--tx-lift); } .mpt-faq-card:hover, .mpt-faq-item:hover { transform: translateY(-5px); border-color: var(--mpt-teal); box-shadow: var(--shadow-lg); } /* Rotating accent borders */ .mpt-faq-card:nth-child(1), .mpt-faq-item:nth-child(1) { border-top: 4px solid var(--mpt-rust); } .mpt-faq-card:nth-child(2), .mpt-faq-item:nth-child(2) { border-top: 4px solid var(--mpt-teal); } .mpt-faq-card:nth-child(3), .mpt-faq-item:nth-child(3) { border-top: 4px solid var(--mpt-green); } .mpt-faq-card:nth-child(4), .mpt-faq-item:nth-child(4) { border-top: 4px solid var(--mpt-rust); } /* FAQ question */ .mpt-faq-q, .mpt-question { font-family: var(--font-serif); font-size: 1.4rem; font-weight: var(--w-semibold); color: var(--mpt-heading); line-height: 1.4; margin-bottom: var(--sp-3); border-bottom: 2px solid var(--mpt-cream); padding-bottom: var(--sp-2); } /* FAQ answer */ .mpt-faq-a, .mpt-atomic { font-size: 1.06rem; line-height: 1.85; color: var(--mpt-text); margin: 0; } /* AEO atomic answer (sterile 40-60 words) */ .mpt-atomic { margin: 0; padding: 1rem 1.1rem; background: linear-gradient(180deg, #fbfaf6 0%, #f7f4ed 100%); border-left: 4px solid var(--mpt-green); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-sans); font-size: clamp(0.98rem, 1.5vw, 1.04rem); line-height: 1.78; color: var(--mpt-teal); font-weight: 500; } /* ========================================================= 12. HOMEPAGE SECTIONS - ALL PRESERVED & ELEVATED ========================================================= */ /* SECTION 1: Hero + AEO Card + Latest Articles Intro */ /* Kadence fixed header clearance - homepage hero only */ body.home #mpt-home-section-1 { scroll-margin-top: var(--mpt-kadence-header-offset, 88px); } body.home #mpt-home-section-1 .mpt-hero { padding-top: calc(clamp(3rem, 7vw, 5rem) + var(--mpt-kadence-header-offset, 88px)); } #mpt-home-section-1 .mpt-hero { position: relative; min-height: clamp(520px, 65vh, 780px); display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--mpt-teal); background-image: linear-gradient(135deg, rgba(18,27,31,0.55) 0%, rgba(19,52,59,0.88) 58%, rgba(14,37,43,0.92) 100%), url('https://mangoesandpalmtrees.com/wp-content/uploads/2026/02/IMG_20241222_215410_303-1.webp'); background-size: cover; background-position: center 30%; contain: layout style; padding: clamp(3rem, 7vw, 5rem) 1.5rem clamp(6rem, 10vw, 9rem); overflow: hidden; border-radius: 0 0 26px 26px; isolation: isolate; } /* LCP hero img — prefer over CSS background when present */ #mpt-home-section-1 .mpt-hero:has(.mpt-hero-img) { background-image: none; } #mpt-home-section-1 .mpt-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top center, rgba(255,178,107,0.16) 0%, transparent 32%), radial-gradient(circle at bottom right, rgba(230,121,97,0.12) 0%, transparent 26%); z-index: 0; pointer-events: none; } #mpt-home-section-1 .mpt-hero-inner { position: relative; z-index: 10; max-width: 1080px; width: 100%; } #mpt-home-section-1 .mpt-hero-kicker { display: inline-flex; align-items: center; justify-content: center; gap: 0.72rem; padding: 0.78rem 1.45rem; border-radius: var(--radius-pill); background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); font-family: var(--font-sans); font-size: clamp(0.74rem, 1.5vw, 0.86rem); font-weight: 800; text-transform: uppercase; color: var(--mpt-gold); letter-spacing: 0.18em; margin-bottom: 1.8rem; flex-wrap: wrap; } #mpt-home-section-1 .mpt-hero-kicker .dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,178,107,0.88); display: inline-block; } #mpt-home-section-1 .mpt-hero-title { margin: 0 0 1.25rem 0; font-family: var(--font-serif); font-size: var(--text-h1); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fff !important; text-shadow: 0 8px 30px rgba(0,0,0,0.34); } #mpt-home-section-1 .mpt-hero-title span { display: block; font-weight: 400; font-style: italic; font-size: clamp(1rem, 2.4vw, 1.6rem); color: rgba(255,255,255,0.92); margin-top: 0.85rem; letter-spacing: 0.005em; line-height: 1.3; } #mpt-home-section-1 .mpt-hero-subtitle { font-family: var(--font-sans); font-size: clamp(1.05rem, 1.9vw, 1.28rem); line-height: 1.85; max-width: 62ch; margin: 0 auto 2.9rem; color: rgba(255,255,255,0.95) !important; } #mpt-home-section-1 .mpt-btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.15rem; } #mpt-home-section-1 .mpt-hero-trust { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.9rem; border-top: 1px solid rgba(255,255,255,0.18); display: flex; justify-content: center; gap: clamp(1rem, 3vw, 2.35rem); flex-wrap: wrap; font-size: clamp(0.78rem, 1.3vw, 0.92rem); color: #fff; font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } #mpt-home-section-1 .mpt-hero-trust span { display: inline-flex; align-items: center; gap: 0.5rem; } #mpt-home-section-1 .mpt-hero-trust strong { color: var(--mpt-gold); font-weight: 800; } /* AEO Card - overlaps hero */ #mpt-home-section-1 .mpt-aeo-card { position: relative; z-index: 20; max-width: 1120px; margin: clamp(-3rem, -5vw, -5.7rem) auto clamp(3.5rem, 6vw, 5rem); background: rgba(255,255,255,0.97); border-top: 6px solid var(--mpt-rust); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 3.5vw, 3rem); overflow: hidden; } #mpt-home-section-1 .mpt-aeo-card::before { content: ""; position: absolute; top: -120px; right: -120px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(230,121,97,0.08) 0%, transparent 70%); pointer-events: none; } #mpt-home-section-1 .mpt-aeo-header { max-width: 860px; margin: 0 auto 2rem; text-align: center; position: relative; z-index: 2; } #mpt-home-section-1 .mpt-aeo-h2 { margin: 0 0 1rem 0; font-family: var(--font-serif); font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.2; color: var(--mpt-teal); font-weight: 800; letter-spacing: -0.02em; } #mpt-home-section-1 .mpt-aeo-answer { max-width: 820px; margin: 0 auto 1.15rem; padding: clamp(1.4rem, 2.4vw, 1.75rem) clamp(1.3rem, 2.4vw, 1.85rem); background: var(--mpt-cream); border-left: 6px solid var(--mpt-green); border-radius: 0 10px 10px 0; box-shadow: var(--shadow-md); text-align: left; } #mpt-home-section-1 .mpt-aeo-answer p { margin: 0; font-family: var(--font-sans); font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 1.85; color: var(--mpt-teal); font-weight: 500; } #mpt-home-section-1 .mpt-aeo-cite { color: var(--mpt-rust-dark); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(201,95,72,0.4); text-underline-offset: 3px; transition: color var(--tx-fast); } #mpt-home-section-1 .mpt-aeo-cite:hover { color: var(--mpt-teal); text-decoration-color: var(--mpt-teal); } #mpt-home-section-1 .mpt-aeo-support { max-width: 780px; margin: 0 auto 2.4rem; text-align: center; font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.85; color: var(--mpt-text-soft); } /* 3-path cards */ #mpt-home-section-1 .mpt-aeo-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; position: relative; z-index: 2; margin-bottom: 2.2rem; } #mpt-home-section-1 .mpt-path { display: block; text-decoration: none; background: #fff; border: 1px solid var(--mpt-border); border-radius: var(--radius-md); padding: 1.5rem 1.35rem; box-shadow: var(--shadow-sm); transition: all var(--tx-normal); } #mpt-home-section-1 .mpt-path:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(19,52,59,0.10); border-color: rgba(230,121,97,0.35); } #mpt-home-section-1 .mpt-path-label { display: block; margin-bottom: 0.55rem; font-family: var(--font-sans); font-size: clamp(0.72rem, 1.2vw, 0.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mpt-rust); } #mpt-home-section-1 .mpt-path-title { display: block; margin-bottom: 0.45rem; font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 800; color: var(--mpt-teal); line-height: 1.25; } #mpt-home-section-1 .mpt-path-text { display: block; font-family: var(--font-sans); font-size: clamp(0.92rem, 1.4vw, 0.98rem); line-height: 1.7; color: var(--mpt-text); } /* Discover rail */ #mpt-home-section-1 .mpt-discover-rail { position: relative; z-index: 2; padding-top: 1.6rem; border-top: 1px dashed rgba(19,52,59,0.15); } #mpt-home-section-1 .mpt-discover-label { display: block; text-align: center; margin-bottom: 1.1rem; font-family: var(--font-sans); font-size: clamp(0.7rem, 1.1vw, 0.78rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mpt-text-soft); } #mpt-home-section-1 .mpt-discover-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; } #mpt-home-section-1 .mpt-discover-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0.6rem 1.05rem; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--mpt-border); color: var(--mpt-teal); text-decoration: none; font-family: var(--font-sans); font-size: clamp(0.84rem, 1.3vw, 0.92rem); font-weight: 700; transition: all var(--tx-fast); } #mpt-home-section-1 .mpt-discover-link:hover { border-color: var(--mpt-rust); color: var(--mpt-rust-dark); transform: translateY(-1px); box-shadow: var(--shadow-xs); } /* SECTION 1B: 404 error hub - homepage hub pattern (typographic hero) */ #mpt-404-section-1 .mpt-hero { position: relative; min-height: clamp(480px, 78vh, 760px); display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(165deg, #0E252B 0%, #13343B 100%); padding: clamp(4rem, 10vw, 8rem) 1.5rem clamp(8rem, 15vw, 12rem); overflow: hidden; border-radius: 0 0 40px 40px; isolation: isolate; } #mpt-404-section-1 .mpt-hero-title { font-size: clamp(3rem, 10vw, 6rem); line-height: 0.95; } #mpt-404-section-1 .mpt-hero-title span { color: var(--mpt-rust); font-style: italic; font-size: 0.42em; margin-top: 1rem; } #mpt-404-section-1 .mpt-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top center, rgba(255,178,107,0.16) 0%, transparent 32%), radial-gradient(circle at bottom right, rgba(230,121,97,0.12) 0%, transparent 26%); z-index: 0; pointer-events: none; } #mpt-404-section-1 .mpt-hero-inner { position: relative; z-index: 10; max-width: 1080px; width: 100%; } #mpt-404-section-1 .mpt-hero-kicker { display: inline-flex; align-items: center; justify-content: center; gap: 0.72rem; padding: 0.78rem 1.45rem; border-radius: var(--radius-pill); background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); font-family: var(--font-sans); font-size: clamp(0.74rem, 1.5vw, 0.86rem); font-weight: 800; text-transform: uppercase; color: var(--mpt-gold); letter-spacing: 0.18em; margin-bottom: 1.8rem; flex-wrap: wrap; } #mpt-404-section-1 .mpt-hero-kicker .dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,178,107,0.88); display: inline-block; } #mpt-404-section-1 .mpt-hero-title { margin: 0 0 1.25rem 0; font-family: var(--font-serif); font-size: var(--text-h1); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fff !important; text-shadow: 0 8px 30px rgba(0,0,0,0.34); } #mpt-404-section-1 .mpt-hero-title span { display: block; font-weight: 400; font-style: italic; font-size: clamp(1rem, 2.4vw, 1.6rem); color: rgba(255,255,255,0.92); margin-top: 0.85rem; letter-spacing: 0.005em; line-height: 1.3; } #mpt-404-section-1 .mpt-hero-subtitle { font-family: var(--font-sans); font-size: clamp(1.05rem, 1.9vw, 1.28rem); line-height: 1.85; max-width: 62ch; margin: 0 auto 2.9rem; color: rgba(255,255,255,0.95) !important; } #mpt-404-section-1 .mpt-btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.15rem; } #mpt-404-section-1 .mpt-hero-trust { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.9rem; border-top: 1px solid rgba(255,255,255,0.18); display: flex; justify-content: center; gap: clamp(1rem, 3vw, 2.35rem); flex-wrap: wrap; font-size: clamp(0.78rem, 1.3vw, 0.92rem); color: #fff; font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } #mpt-404-section-1 .mpt-hero-trust span { display: inline-flex; align-items: center; gap: 0.5rem; } #mpt-404-section-1 .mpt-hero-trust strong { color: var(--mpt-gold); font-weight: 800; } /* AEO Card - overlaps hero */ #mpt-404-section-1 .mpt-aeo-card { position: relative; z-index: 20; max-width: 1120px; margin: clamp(-3rem, -5vw, -5.7rem) auto clamp(3.5rem, 6vw, 5rem); background: rgba(255,255,255,0.97); border-top: 6px solid var(--mpt-rust); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 3.5vw, 3rem); overflow: hidden; } #mpt-404-section-1 .mpt-aeo-card::before { content: ""; position: absolute; top: -120px; right: -120px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(230,121,97,0.08) 0%, transparent 70%); pointer-events: none; } #mpt-404-section-1 .mpt-aeo-header { max-width: 860px; margin: 0 auto 2rem; text-align: center; position: relative; z-index: 2; } #mpt-404-section-1 .mpt-aeo-h2 { margin: 0 0 1rem 0; font-family: var(--font-serif); font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.2; color: var(--mpt-teal); font-weight: 800; letter-spacing: -0.02em; } #mpt-404-section-1 .mpt-aeo-answer { max-width: 820px; margin: 0 auto 1.15rem; padding: clamp(1.4rem, 2.4vw, 1.75rem) clamp(1.3rem, 2.4vw, 1.85rem); background: var(--mpt-cream); border-left: 6px solid var(--mpt-green); border-radius: 0 10px 10px 0; box-shadow: var(--shadow-md); text-align: left; } #mpt-404-section-1 .mpt-aeo-answer p { margin: 0; font-family: var(--font-sans); font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 1.85; color: var(--mpt-teal); font-weight: 500; } #mpt-404-section-1 .mpt-aeo-cite { color: var(--mpt-rust-dark); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(201,95,72,0.4); text-underline-offset: 3px; transition: color var(--tx-fast); } #mpt-404-section-1 .mpt-aeo-cite:hover { color: var(--mpt-teal); text-decoration-color: var(--mpt-teal); } #mpt-404-section-1 .mpt-aeo-support { max-width: 780px; margin: 0 auto 2.4rem; text-align: center; font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.85; color: var(--mpt-text-soft); } /* 3-path cards */ #mpt-404-section-1 .mpt-aeo-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; position: relative; z-index: 2; margin-bottom: 2.2rem; } #mpt-404-section-1 .mpt-path { display: block; text-decoration: none; background: #fff; border: 1px solid var(--mpt-border); border-radius: var(--radius-md); padding: 1.5rem 1.35rem; box-shadow: var(--shadow-sm); transition: all var(--tx-normal); } #mpt-404-section-1 .mpt-path:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(19,52,59,0.10); border-color: rgba(230,121,97,0.35); } #mpt-404-section-1 .mpt-path-label { display: block; margin-bottom: 0.55rem; font-family: var(--font-sans); font-size: clamp(0.72rem, 1.2vw, 0.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mpt-rust); } #mpt-404-section-1 .mpt-path-title { display: block; margin-bottom: 0.45rem; font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 800; color: var(--mpt-teal); line-height: 1.25; } #mpt-404-section-1 .mpt-path-text { display: block; font-family: var(--font-sans); font-size: clamp(0.92rem, 1.4vw, 0.98rem); line-height: 1.7; color: var(--mpt-text); } /* Discover rail */ #mpt-404-section-1 .mpt-discover-rail { position: relative; z-index: 2; padding-top: 1.6rem; border-top: 1px dashed rgba(19,52,59,0.15); } #mpt-404-section-1 .mpt-discover-label { display: block; text-align: center; margin-bottom: 1.1rem; font-family: var(--font-sans); font-size: clamp(0.7rem, 1.1vw, 0.78rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mpt-text-soft); } #mpt-404-section-1 .mpt-discover-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; } #mpt-404-section-1 .mpt-discover-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0.6rem 1.05rem; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--mpt-border); color: var(--mpt-teal); text-decoration: none; font-family: var(--font-sans); font-size: clamp(0.84rem, 1.3vw, 0.92rem); font-weight: 700; transition: all var(--tx-fast); } #mpt-404-section-1 .mpt-discover-link:hover { border-color: var(--mpt-rust); color: var(--mpt-rust-dark); transform: translateY(-1px); box-shadow: var(--shadow-xs); } /* Latest Articles Intro */ .mpt-latest-articles-intro { padding: 0 0 clamp(2.5rem, 5vw, 3.5rem) 0; background: #fff; } .mpt-latest-articles-intro .mpt-shell { max-width: 980px; margin: 0 auto; padding: clamp(2.4rem, 4.5vw, 3.5rem) clamp(1.4rem, 3vw, 2rem); background: #fff; border: 1px solid var(--mpt-border); border-radius: var(--radius-lg); box-shadow: 0 16px 42px rgba(19,52,59,0.06); text-align: center; position: relative; overflow: hidden; } .mpt-latest-articles-intro .mpt-shell::before { content: ""; position: absolute; top: -120px; right: -120px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(230,121,97,0.08) 0%, transparent 70%); pointer-events: none; } .mpt-latest-articles-intro .mpt-li-h2 { font-family: var(--font-serif); font-size: clamp(1.85rem, 3.6vw, 2.7rem); line-height: 1.22; font-weight: 800; color: var(--mpt-teal); margin: 0 0 1.2rem 0; letter-spacing: -0.015em; } .mpt-latest-articles-intro .mpt-li-lead { max-width: 62ch; margin: 0 auto; font-family: var(--font-sans); font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.85; color: var(--mpt-text); } .mpt-latest-articles-intro .mpt-li-lead a { color: var(--mpt-rust-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; transition: color var(--tx-fast); } .mpt-latest-articles-intro .mpt-li-lead a:hover { color: var(--mpt-teal); } /* ALL OTHER HOMEPAGE SECTIONS PRESERVED */ /* (Fieldwork, Standards, Editorial, FAQ, Final CTA) */ /* Inherit all new luxury tokens automatically */ /* ========================================================= 13. KINEMATIC REVEALS - CLS-SAFE (visible by default) Content is visible until html.mpt-js enhances. Prevents 100% CLS from opacity:0 before IntersectionObserver runs. ========================================================= */ .mpt-reveal { opacity: 1; transform: none; } html.mpt-js .mpt-reveal:not(.is-visible) { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } html.mpt-js .mpt-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Never hide above-the-fold homepage chrome before paint */ #mpt-home-section-1 .mpt-aeo-card.mpt-reveal, #mpt-home-section-1 .mpt-latest-articles-intro.mpt-reveal { opacity: 1 !important; transform: none !important; } /* Staggered reveals */ .mpt-stagger-1 { transition-delay: 0s; } .mpt-stagger-2 { transition-delay: 0.1s; } .mpt-stagger-3 { transition-delay: 0.2s; } .mpt-stagger-4 { transition-delay: 0.3s; } /* ========================================================= 13B. CLS GUARDS - IMAGES & FONTS 007 PART 6: editorial frames use width:100% + height:auto (never crop). Reserve space with width/height attributes on , not object-fit:cover. ========================================================= */ img { max-width: 100%; height: auto; } /* Homepage + article editorial frames - full image visible */ .mpt-fw-frame img, .mpt-sb-frame img, .mpt-ch-frame img, .mpt-fam-frame img, .mpt-image-frame img, .mpt-frame img { width: 100%; height: auto; max-height: none; object-fit: unset; display: block; } .mpt-fw-frame, .mpt-sb-frame, .mpt-ch-frame, .mpt-fam-frame { aspect-ratio: auto; height: auto; overflow: visible; } /* Homepage fieldwork sections - do not clip rotated frames at section edge */ #mpt-home-thailand, #mpt-home-vietnam, #mpt-home-siberian, #mpt-home-chili, #mpt-home-family { overflow: visible; } #mpt-home-thailand .mpt-fw-image-col, #mpt-home-vietnam .mpt-fw-image-col, #mpt-home-siberian .mpt-sb-image-col, #mpt-home-chili .mpt-ch-image-col, #mpt-home-family .mpt-fam-image-col { overflow: visible; } /* ========================================================= 14. MOBILE RESPONSIVE - ALL BREAKPOINTS ========================================================= */ /* Tablet: 1024px and below */ @media (max-width: 1024px) { /* 3-column grids - 2-column */ #mpt-home-section-1 .mpt-aeo-paths { grid-template-columns: repeat(2, 1fr); } /* Card padding compression */ .mpt-data-box, .mpt-highlight, .mpt-standout, .mpt-faq-card { padding: clamp(1.4rem, 3vw, 2rem); } } /* Mobile: 768px and below */ @media (max-width: 768px) { /* Typography floor */ body { font-size: max(16px, 1rem); } p { font-size: max(15px, var(--text-body)); } /* All grids collapse to single column */ .mpt-grid-2, .mpt-grid-4, .mpt-faq-grid, .mpt-split, #mpt-home-section-1 .mpt-aeo-paths { grid-template-columns: 1fr !important; gap: var(--sp-5); } /* Frames: no rotation on mobile */ .mpt-frame, .mpt-frame-15, .mpt-grid-2 .mpt-frame, .mpt-grid-4 .mpt-frame { transform: none !important; } .mpt-frame:active, .mpt-frame-15:active { transform: scale(0.98); } /* Cards compress */ .mpt-data-box, .mpt-highlight, .mpt-standout, .mpt-faq-card, .mpt-faq-item { padding: var(--sp-4); } /* Tables scroll horizontally */ .mpt-table-inner, .mpt-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Hero mobile adjustments */ #mpt-home-section-1 .mpt-hero { min-height: 62vh; padding: 3rem 1rem 7rem; } #mpt-home-section-1 .mpt-btn-row { flex-direction: column; align-items: stretch; } #mpt-home-section-1 .mpt-hero-trust { flex-direction: column; gap: 0.85rem; } #mpt-home-section-1 .mpt-aeo-card { margin: -3.5rem 1rem 3.5rem; padding: 2.4rem 1.5rem; } /* Path cards get left border on mobile */ #mpt-home-section-1 .mpt-path { border-left: 4px solid var(--mpt-rust); padding: 1.6rem 1.4rem; } } /* ========================================================================== SECTION 14B - Homepage hub routing (explore-next - 2 + backlink magnet) ========================================================================== */ #mpt-home-hub-routing { max-width: 1140px; margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 1.5rem); } #mpt-home-hub-routing .mpt-explore-next { margin-bottom: 1.75rem; } #mpt-home-hub-routing .mpt-backlink-magnet { margin-top: 0.5rem; } /* Small phones: 480px and below */ @media (max-width: 480px) { /* Final compression */ .mpt-data-box, .mpt-highlight, .mpt-standout, .mpt-faq-card, .mpt-faq-item, .mpt-callout { padding: 1rem; } /* Heading compression */ h2 { font-size: clamp(1.4rem, 5.5vw, 2.2rem); } h3 { font-size: clamp(1.15rem, 4.5vw, 1.6rem); } /* Pull quotes shrink */ .mpt-pullquote, blockquote.mpt-blockquote { font-size: clamp(1rem, 4.5vw, 1.2rem); padding: 1rem; } } /* Extreme narrow: 380px and below */ @media (max-width: 380px) { .mpt-data-box, .mpt-faq-card, .mpt-faq-item { padding: 0.9rem; } h3 { font-size: 1rem; } } /* ========================================================= 15. ACCESSIBILITY - REDUCED MOTION + FOCUS RINGS ========================================================= */ /* Focus visible */ *:focus-visible { outline: var(--focus-ring) !important; outline-offset: var(--focus-offset) !important; border-radius: 4px; } /* Reduced motion override */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .mpt-reveal, html.mpt-js .mpt-reveal:not(.is-visible) { opacity: 1 !important; transform: none !important; } html.mpt-js .mpt-reveal-words:not(.is-visible) span { opacity: 1 !important; transform: none !important; } .mpt-frame, .mpt-frame-15 { transform: none !important; } /* 011 overlay menu - disable stagger */ .mpt-menu-nav li { opacity: 1 !important; transform: none !important; } /* 011 word reveals - show immediately */ .mpt-reveal-words span { opacity: 1 !important; transform: none !important; } /* 011 custom cursor - hide entirely */ .mpt-cursor { display: none !important; } /* 011 page-enter - no animation */ .mpt-page-enter { animation: none !important; opacity: 1 !important; } } /* ========================================================= 15B. RECIPE JOURNAL (luxury editorial kitchen notebook) ========================================================= */ .mpt-recipe-journal-wrap { max-width: 920px; margin: 0 auto 3rem; padding: 0 1.5rem; } .mpt-recipe-journal { --mpt-journal-ink: #333333; position: relative; background-color: var(--mpt-cream-warm, #f8f6f2); background-image: repeating-linear-gradient( transparent, transparent 2.35rem, rgba(19, 52, 59, 0.06) 2.35rem, rgba(19, 52, 59, 0.06) calc(2.35rem + 1px) ); border: 1px solid var(--mpt-border, #e0e4e8); border-radius: 4px 4px 2px 2px; box-shadow: 0 2px 0 rgba(19, 52, 59, 0.04), 0 18px 48px rgba(19, 52, 59, 0.1); padding: 2.75rem 2.25rem 2.5rem 3rem; transform: rotate(0.6deg); font-family: var(--font-sans, 'Inter', sans-serif); color: var(--mpt-journal-ink); } .mpt-recipe-journal::before { content: ''; position: absolute; left: 2rem; top: 0; bottom: 0; width: 2px; background: linear-gradient( 180deg, transparent 0%, rgba(230, 121, 97, 0.35) 8%, rgba(230, 121, 97, 0.35) 92%, transparent 100% ); pointer-events: none; } .mpt-recipe-journal__header { margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 2px solid rgba(19, 52, 59, 0.12); } .mpt-recipe-journal__kicker { display: block; font-size: var(--text-kicker, 0.84rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mpt-rust, #e67961); margin-bottom: 0.45rem; } .mpt-recipe-journal__title { font-family: var(--font-serif, 'Lora', Georgia, serif); font-size: clamp(1.65rem, 3.2vw, 2.15rem); line-height: 1.2; color: var(--mpt-teal, #13343b); margin: 0 0 0.65rem; font-weight: 800; } .mpt-recipe-journal__lead { font-size: 1.02rem; line-height: 1.75; color: var(--mpt-muted, #667085); margin: 0; max-width: 65ch; } .mpt-recipe-journal__tested { font-size: 0.88rem; color: var(--mpt-muted, #667085); margin: 0.85rem 0 0; line-height: 1.5; } .mpt-recipe-journal__tested a { color: var(--mpt-teal, #13343b); font-weight: 700; } .mpt-recipe-journal__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; } .mpt-recipe-journal__print { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--mpt-teal, #13343b); border: none; border-radius: 6px; cursor: pointer; font-family: inherit; } .mpt-recipe-journal__print:hover, .mpt-recipe-journal__print:focus-visible { background: var(--mpt-teal-soft, #1c4a54); outline: 2px solid var(--mpt-rust, #e67961); outline-offset: 2px; } .mpt-recipe-journal__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 2rem; padding: 1rem 0; border-top: 1px solid rgba(19, 52, 59, 0.1); border-bottom: 1px solid rgba(19, 52, 59, 0.1); } .mpt-recipe-journal__meta-item { text-align: center; padding: 0.35rem 0.25rem; } .mpt-recipe-journal__meta-label { display: block; font-family: var(--font-serif, 'Lora', serif); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mpt-teal, #13343b); margin-bottom: 0.25rem; } .mpt-recipe-journal__meta-value { display: block; font-size: 0.95rem; font-weight: 600; color: var(--mpt-journal-ink); line-height: 1.35; } .mpt-recipe-journal__meta-item--standard .mpt-recipe-journal__meta-value::after { content:''; color: var(--mpt-green, #2e7d32); font-weight: 800; } .mpt-recipe-journal__section-title { font-family: var(--font-serif, 'Lora', serif); font-size: 1.2rem; color: var(--mpt-teal, #13343b); margin: 0 0 1rem; padding-bottom: 0.35rem; border-bottom: 1px solid rgba(230, 121, 97, 0.45); } .mpt-recipe-journal__ingredients { list-style: none; padding: 0; margin: 0 0 2rem; } .mpt-recipe-journal__ingredients li { padding: 0.45rem 0; line-height: 1.65; font-size: 1rem; border-bottom: 1px dotted rgba(19, 52, 59, 0.12); } .mpt-recipe-journal__ingredients li:last-child { border-bottom: none; } .mpt-recipe-journal__ingredients strong { color: var(--mpt-teal, #13343b); font-weight: 700; } .mpt-recipe-journal__note { position: relative; margin: 0 0 2rem; padding: 0.9rem 1rem 0.9rem 1.15rem; background: rgba(255, 255, 255, 0.65); border-left: 3px solid var(--mpt-rust, #e67961); font-size: 0.92rem; line-height: 1.65; border-radius: 0 6px 6px 0; } .mpt-recipe-journal__note-label { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mpt-rust, #e67961); margin-bottom: 0.35rem; } .mpt-recipe-journal__steps { list-style: none; padding: 0; margin: 0 0 1.5rem; } .mpt-journal-step { display: flex; gap: 1rem; padding: 0.85rem 0; align-items: flex-start; } .mpt-journal-step__num { flex-shrink: 0; font-family: var(--font-serif, 'Lora', serif); font-size: 1.35rem; font-weight: 800; color: var(--mpt-rust, #e67961); line-height: 1; min-width: 2rem; } .mpt-journal-step__body { flex: 1; font-size: 1rem; line-height: 1.75; color: var(--mpt-journal-ink); } .mpt-journal-step__body strong { color: var(--mpt-teal, #13343b); font-weight: 700; } .mpt-emphasis-line { display: inline; border-left: 3px solid var(--mpt-rust, #e67961); padding-left: 0.45rem; margin-left: 0.1rem; } @media (prefers-reduced-motion: no-preference) { .mpt-emphasis-line.mpt-emphasis-ready { opacity: 0.92; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; } .mpt-emphasis-line.mpt-emphasis-pending { opacity: 0.55; transform: translateY(4px); } } .mpt-recipe-journal__tips { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed rgba(19, 52, 59, 0.15); } .mpt-recipe-journal__tips-title { font-family: var(--font-serif, 'Lora', serif); font-size: 1.05rem; color: var(--mpt-teal, #13343b); margin: 0 0 0.75rem; } .mpt-recipe-journal__tips ul { list-style: none; padding: 0; margin: 0; } .mpt-recipe-journal__tips li { padding: 0.4rem 0; font-size: 0.94rem; line-height: 1.65; } @media (max-width: 768px) { .mpt-recipe-journal { transform: none; padding: 2rem 1.25rem 1.75rem 1.75rem; } .mpt-recipe-journal__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= 16. PRINT STYLES ========================================================= */ @media print { .kadence-main-header, .kadence-top-header, nav, .mpt-newsletter-inline, [id*="mpt-home-final-cta"], [class*="mpt-bottom-row"], [class*="mpt-action-row"], .mpt-hero, .mpt-aeo-card, .mpt-faq-section, .mpt-recipe-journal__print, .mpt-recipe-journal__actions, .mpt-video-wrap, iframe { display: none !important; } body { background: #fff !important; color: #000 !important; font-size: 12pt; } .mpt-article-body, .entry-content { max-width: 100% !important; padding: 0 !important; } a { color: #000 !important; text-decoration: underline !important; } a[href]::after { content: ' (' attr(href) ')'; font-size: 9pt; font-weight: 400; } .mpt-recipe-journal-wrap { max-width: 100%; padding: 0; margin: 0; } .mpt-recipe-journal { transform: none !important; box-shadow: none !important; border: 1px solid #000; background: #fff !important; background-image: none !important; padding: 1rem 1rem 1rem 1.5rem; page-break-inside: avoid; } .mpt-recipe-journal::before { background: #ccc; } .mpt-recipe-journal__title, .mpt-recipe-journal__section-title, .mpt-journal-step__num { color: #000 !important; } .mpt-journal-step, .mpt-recipe-journal__ingredients li { break-inside: avoid; page-break-inside: avoid; } .mpt-emphasis-line { border-left: 2px solid #000; padding-left: 0.35rem; } .mpt-recipe-card, .mpt-data-box { break-inside: avoid; } } /* ========================================================= 17. UNIVERSAL TEXT WRAP SAFETY - SITEWIDE ========================================================= */ /* Prevent word-by-word wrapping in all elements */ [class*="mpt-"] h1, [class*="mpt-"] h2, [class*="mpt-"] h3, [class*="mpt-"] h4, [class*="mpt-"] p, [class*="mpt-"] li, [class*="mpt-"] span, [class*="mpt-"] strong { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } /* Allow grid/flex children to shrink */ [class*="mpt-"] [class*="-grid"] > *, [class*="mpt-"] [class*="-stack"] > *, [class*="mpt-"] [class*="-row"] > * { min-width: 0; min-height: 0; } /* ========================================================= 18. SITE CHROME - FROM 011-global-interaction-navigation.mdc Phase 1 (now): - 6 above styles existing .kadence-main-header. Phase 2 (future): classes below activate when Oliver rebuilds header/footer in Kadence Header/Footer Builder with 011 HTML. ========================================================= */ /* --- 18.1 SCROLL PROGRESS INDICATOR (011 PART 5) --- */ .mpt-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--mpt-rust), var(--mpt-gold)); z-index: 1200; transition: width 0.1s ease; pointer-events: none; } /* - 18.2 PAGE-ENTER - DISABLED FOR CLS (was shifting entire main) - */ .mpt-page-enter { animation: none; opacity: 1; transform: none; } @keyframes mptPageIn { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } } /* --- 18.3 PHASE 2 HEADER (011 PART 1) --- COMMENTED OUT: bare .mpt-header selector collides with homepage section headers (#mpt-home-standards .mpt-header, #mpt-home-editorial .mpt-header). The position:fixed / z-index:1000 would break those layouts. Uncomment ONLY after Phase 2 HTML is built AND the homepage section headers are renamed to .mpt-section-header or similar. See 011 PART 1 for the full spec. .mpt-header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 3rem; z-index: 1000; background: transparent; transition: background 0.4s ease, height 0.4s ease, box-shadow 0.4s ease; } .mpt-header.at-top { background: transparent; } .mpt-header.at-top .mpt-logo, .mpt-header.at-top .mpt-header-link { color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,0.4); } .mpt-header.scrolled { background: rgba(249,251,250,0.96); backdrop-filter: blur(12px); height: 68px; box-shadow: 0 2px 20px rgba(19,52,59,0.08); } .mpt-header.scrolled .mpt-logo, .mpt-header.scrolled .mpt-header-link { color: var(--mpt-teal); text-shadow: none; } .mpt-logo { font: 800 1.5rem var(--font-serif); letter-spacing: -0.01em; text-decoration: none; transition: color 0.4s ease; } .mpt-logo span { color: var(--mpt-rust); } .mpt-header-controls { display: flex; align-items: center; gap: 2rem; } .mpt-header-link { font: 800 0.82rem var(--font-sans); text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; background: none; border: none; cursor: pointer; transition: color 0.3s ease, opacity 0.3s ease; } .mpt-header-link:hover { opacity: 0.7; } .mpt-menu-trigger { display: flex; flex-direction: column; gap: 5px; width: 28px; cursor: pointer; background: none; border: none; padding: 0; } .mpt-menu-trigger span { display: block; height: 2px; width: 100%; background: currentColor; transition: transform 0.3s ease, opacity 0.3s ease; } .mpt-header.at-top .mpt-menu-trigger span { background: #ffffff; } .mpt-header.scrolled .mpt-menu-trigger span { background: var(--mpt-teal); } .mpt-menu-trigger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mpt-menu-trigger.is-open span:nth-child(2) { opacity: 0; } .mpt-menu-trigger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 768px) { .mpt-header { padding: 0 1.25rem; height: 64px; } .mpt-logo { font-size: 1.2rem; } .mpt-header-controls { gap: 1.25rem; } .mpt-header-link span.label { display: none; } } END OF COMMENTED-OUT PHASE 2 HEADER */ /* --- 18.4 IMMERSIVE OVERLAY MENU (011 PART 2) --- Full-screen teal overlay with staggered link reveal. Requires HTML from 011 PART 2 in Kadence Header Builder. */ .mpt-overlay-menu { position: fixed; top: 0; right: 0; width: 100%; height: 100vh; background: var(--mpt-teal); z-index: 1100; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } .mpt-overlay-menu.is-open { opacity: 1; visibility: visible; } .mpt-overlay-menu::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(230, 121, 97, 0.12) 0%, transparent 55%); pointer-events: none; } .mpt-menu-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; max-width: 1100px; width: 100%; padding: 0 3rem; align-items: center; } .mpt-menu-nav { list-style: none; margin: 0; padding: 0; } .mpt-menu-nav li { opacity: 0; transform: translateX(40px); transition: opacity 0.5s ease, transform 0.5s ease; } .mpt-overlay-menu.is-open .mpt-menu-nav li { opacity: 1; transform: translateX(0); } .mpt-overlay-menu.is-open .mpt-menu-nav li:nth-child(1) { transition-delay: 0.10s; } .mpt-overlay-menu.is-open .mpt-menu-nav li:nth-child(2) { transition-delay: 0.16s; } .mpt-overlay-menu.is-open .mpt-menu-nav li:nth-child(3) { transition-delay: 0.22s; } .mpt-overlay-menu.is-open .mpt-menu-nav li:nth-child(4) { transition-delay: 0.28s; } .mpt-overlay-menu.is-open .mpt-menu-nav li:nth-child(5) { transition-delay: 0.34s; } .mpt-overlay-menu.is-open .mpt-menu-nav li:nth-child(6) { transition-delay: 0.40s; } .mpt-menu-link { font: 800 clamp(2.2rem, 5vw, 3.8rem) var(--font-serif); color: rgba(255, 255, 255, 0.85); text-decoration: none; display: inline-block; padding: 0.4rem 0; transition: color 0.3s ease, transform 0.3s ease, padding-left 0.3s ease; line-height: 1.1; } .mpt-menu-link:hover { color: var(--mpt-gold); padding-left: 1.5rem; } .mpt-menu-link .mpt-menu-num { font: 700 0.9rem var(--font-sans); color: var(--mpt-rust); vertical-align: super; margin-right: 0.6rem; } .mpt-menu-feature { position: relative; height: 480px; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 65px rgba(0, 0, 0, 0.4); } .mpt-menu-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; } .mpt-menu-feature img.is-active { opacity: 1; } .mpt-menu-social { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; gap: 2rem; } .mpt-menu-social a { color: rgba(255, 255, 255, 0.7); font: 800 0.8rem var(--font-sans); text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none; transition: color 0.3s ease; } .mpt-menu-social a:hover { color: var(--mpt-gold); } .mpt-menu-close { position: absolute; top: 2rem; right: 3rem; background: none; border: none; color: #ffffff; font-size: 2rem; cursor: pointer; width: 48px; height: 48px; transition: transform 0.3s ease; } .mpt-menu-close:hover { transform: rotate(90deg); } @media (max-width: 768px) { .mpt-menu-inner { grid-template-columns: 1fr; gap: 2rem; padding: 0 1.5rem; } .mpt-menu-feature { display: none; } .mpt-menu-link { font-size: 2rem; } .mpt-menu-close { top: 1rem; right: 1.25rem; } .mpt-menu-social { bottom: 2rem; gap: 1.25rem; flex-wrap: wrap; justify-content: center; } } /* --- 18.5 FOOTER (011 PART 6) --- Deep teal, 4-column, mango watermark, SEO internal links. */ .mpt-footer { background: var(--mpt-teal); color: rgba(255, 255, 255, 0.85); padding: 5rem 3rem 3rem; position: relative; overflow: hidden; } .mpt-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; max-width: 1240px; margin: 0 auto; } .mpt-footer-brand h3 { font: 800 1.8rem var(--font-serif); color: #fff; margin: 0 0 1rem; } .mpt-footer-brand h3 span { color: var(--mpt-rust); } .mpt-footer-brand p { font: 400 1rem/1.7 var(--font-sans); color: rgba(255, 255, 255, 0.7); max-width: 320px; } .mpt-footer-col h4 { font: 800 0.85rem var(--font-sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--mpt-gold); margin: 0 0 1.5rem; } .mpt-footer-col ul { list-style: none; margin: 0; padding: 0; } .mpt-footer-col li { margin-bottom: 0.9rem; } .mpt-footer-col a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font: 400 0.98rem var(--font-sans); transition: color 0.3s ease, padding-left 0.3s ease; } .mpt-footer-col a:hover { color: var(--mpt-gold); padding-left: 0.4rem; } .mpt-footer-bottom { max-width: 1240px; margin: 4rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.15); display: flex; justify-content: space-between; align-items: center; font: 400 0.85rem var(--font-sans); color: rgba(255, 255, 255, 0.55); } @media (max-width: 768px) { .mpt-footer { padding: 3rem 1.5rem 2rem; } .mpt-footer-grid { grid-template-columns: 1fr; gap: 2.5rem; } .mpt-footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } } /* --- 18.6 OPTIONAL CUSTOM CURSOR (011 PART 7, desktop only) --- */ @media (hover: hover) and (pointer: fine) { .mpt-cursor { position: fixed; width: 12px; height: 12px; background: var(--mpt-rust); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.3s ease, height 0.3s ease, background 0.3s ease; mix-blend-mode: difference; } .mpt-cursor.is-hovering { width: 48px; height: 48px; background: var(--mpt-gold); } } /* - 18.7 WORD-BY-WORD REVEAL - CLS-SAFE - */ .mpt-reveal-words span { display: inline-block; opacity: 1; transform: none; } html.mpt-js .mpt-reveal-words:not(.is-visible) span { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } html.mpt-js .mpt-reveal-words.is-visible span { opacity: 1; transform: translateY(0); } /* ========================================================= 19. LUXURY ARTICLE PAGES - Recipe / Travel / Review HTML: markup + classes only in Kadence blocks (007 PART 7B). NO per-block