/* ====================================================================== migrated_landings.css — Shared design language for GHL-migrated landings. Authored 2026-05-26 per docs/specs/2026-05-26-ghl-landing-migration-spec.md. ARCHITECTURE ─ Loaded by templates/custom_pages/.html via {% set surface_css_path = 'css/surfaces/migrated_landings.css' %} which templates/includes/_head_base.html wires through to . ─ Theme system integrated. All colors via tokens.css. Light/dark flips automatically. Bootstrap 5.3.8 available globally. ─ Every page wears . Shared rules scope under body[class^="cc-ml-"]. Per-page tweaks scope under body.cc-ml-. ─ Universal * reset stays bare per G39 (loaded only when surface_css_path is this file — implicit scope; bumping its specificity breaks footer). DESIGN LANGUAGE — Apple-like / minimalist / honest ─ Generous whitespace (8pt grid via --space-*). ─ Tone-based depth, not borders (G15). ─ One accent color (var(--accent)), used sparingly. ─ Confident typography hierarchy. ─ Subtle motion only. BLOCK INVENTORY (compose pages from these — NO ad-hoc classes without updating the spec + rulebook): .cc-ml-hero, .cc-ml-section, .cc-ml-section-split, .cc-ml-feature-grid, .cc-ml-testimonial, .cc-ml-testimonial-grid, .cc-ml-social-proof, .cc-ml-comparison, .cc-ml-faq, .cc-ml-video, .cc-ml-cta-block, .cc-ml-footer-cta VARIANTS: .cc-ml-section--dark, .cc-ml-section--cream, .cc-ml-section--panel, .cc-ml-section--center, .cc-ml-section--strip, .cc-ml-cta-block--accent, .cc-ml-hero--video (+ children: .cc-ml-hero__bg, .cc-ml-hero__scrim, .cc-ml-hero__hl, .cc-ml-hero__guarantee, .cc-ml-hero__badges), .cc-ml-testimonial-grid--screenshots, .cc-ml-sticky-bar BUTTONS: .cc-ml-btn-primary, .cc-ml-btn-secondary, .cc-ml-btn-ghost UTILITIES: .cc-ml-container, .cc-ml-lede, .cc-ml-eyebrow, .cc-ml-rule, .cc-ml-stat, .cc-ml-stat-label, .cc-ml-stat-grid, .cc-ml-list, .cc-ml-hl-word, .cc-ml-fineprint ====================================================================== */ /* ---------------------------------------------------------------------- Universal reset — BARE (G39). Specificity (0,0,0). ---------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ---------------------------------------------------------------------- Body base — shared across every cc-ml-* page ---------------------------------------------------------------------- */ body[class^="cc-ml-"] { font-family: var(--font-sans); font-size: 18px; line-height: 1.4; color: var(--text-body); background: var(--bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body[class^="cc-ml-"] img { max-width: 100%; height: auto; display: block; } body[class^="cc-ml-"] a { color: var(--accent-on-light); text-decoration: none; transition: color var(--transition-fast); } body[class^="cc-ml-"] a:hover { color: var(--accent-bright); } /* ---------------------------------------------------------------------- Containers + utilities ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-lg); } body[class^="cc-ml-"] .cc-ml-container--narrow { max-width: 720px; } body[class^="cc-ml-"] .cc-ml-eyebrow { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-on-light); margin-bottom: var(--space-md); } body[class^="cc-ml-"] .cc-ml-lede { font-size: 22px; line-height: 1.5; color: var(--text-body); max-width: 640px; margin: 0 auto var(--space-xl); } /* ---------------------------------------------------------------------- Typography — clean / Apple-like / honest Body + display: DM Sans (loaded by _head_base.html). Micro/eyebrows: JetBrains Mono. Tight negative letter-spacing on large sizes. Confident weight 600 — not 700 (too aggressive), not 500 (too soft). ---------------------------------------------------------------------- */ body[class^="cc-ml-"] h1, body[class^="cc-ml-"] h2, body[class^="cc-ml-"] h3, body[class^="cc-ml-"] h4 { font-family: var(--font-sans); font-weight: 600; color: var(--text-primary); line-height: 1.1; letter-spacing: -0.022em; } body[class^="cc-ml-"] h1 { font-size: 64px; margin-bottom: var(--space-lg); letter-spacing: -0.03em; } body[class^="cc-ml-"] h2 { font-size: 44px; margin-bottom: var(--space-md); letter-spacing: -0.025em; } body[class^="cc-ml-"] h3 { font-size: 28px; margin-bottom: var(--space-sm); letter-spacing: -0.015em; } body[class^="cc-ml-"] h4 { font-size: 20px; margin-bottom: var(--space-sm); letter-spacing: -0.01em; } body[class^="cc-ml-"] p { margin-bottom: var(--space-md); } body[class^="cc-ml-"] p:last-child { margin-bottom: 0; } /* ---------------------------------------------------------------------- Logo — top-left brand mark. Uses storefront's asset + G42 dark-on-light technique (filter: brightness(0) inverts white-pixel PNG to black on light). ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-logo { position: absolute; top: 24px; left: 24px; z-index: 99; } body[class^="cc-ml-"]:has(.cc-ml-sticky-bar) .cc-ml-logo { top: 72px; } body[class^="cc-ml-"] .cc-ml-logo img { height: 36px; width: auto; display: block; } [data-theme="light"] body[class^="cc-ml-"] .cc-ml-logo img { filter: brightness(0); } @media (max-width: 768px) { body[class^="cc-ml-"] .cc-ml-logo { top: 16px; left: 16px; } body[class^="cc-ml-"]:has(.cc-ml-sticky-bar) .cc-ml-logo { top: 56px; } body[class^="cc-ml-"] .cc-ml-logo img { height: 28px; } } /* ---------------------------------------------------------------------- Theme toggle fixed corner (per G35) ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-toggle-fixed-corner { position: fixed; top: 16px; right: 16px; z-index: 100; } body[class^="cc-ml-"]:has(.cc-ml-sticky-bar) .cc-toggle-fixed-corner { top: 64px; } /* ---------------------------------------------------------------------- BUTTONS ---------------------------------------------------------------------- */ /* Primary — gold pill. Theme-blind contrast: gold bg + luxury-black text reads on both themes. Restrained padding (not chunky direct-response style). No default shadow — lift only on hover. */ body[class^="cc-ml-"] .cc-ml-btn-primary { display: inline-block; background: var(--accent); color: var(--text-on-accent); font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; padding: 14px 32px; border: none; border-radius: var(--radius-pill); text-decoration: none; cursor: pointer; transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); } body[class^="cc-ml-"] .cc-ml-btn-primary:hover { background: var(--accent-bright); color: var(--text-on-accent); transform: translateY(-1px); box-shadow: 0 8px 24px var(--accent-glow); } /* Secondary — outline */ body[class^="cc-ml-"] .cc-ml-btn-secondary { display: inline-block; background: transparent; color: var(--accent-on-light); font-family: var(--font-sans); font-size: 17px; font-weight: 600; padding: calc(var(--space-md) - 2px) calc(var(--space-xl) - 2px); border: 2px solid var(--accent); border-radius: var(--radius-pill); text-decoration: none; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } body[class^="cc-ml-"] .cc-ml-btn-secondary:hover { background: var(--accent); color: var(--text-on-accent); } /* Ghost — text-only link CTA */ body[class^="cc-ml-"] .cc-ml-btn-ghost { display: inline-block; color: var(--accent-on-light); font-family: var(--font-sans); font-size: 17px; font-weight: 600; text-decoration: none; padding: var(--space-sm) 0; border-bottom: 2px solid transparent; transition: border-color var(--transition-fast); } body[class^="cc-ml-"] .cc-ml-btn-ghost:hover { border-bottom-color: var(--accent); } /* ---------------------------------------------------------------------- BLOCK: .cc-ml-hero — full-bleed hero Headline + lede + 1-2 CTAs. Optional poster image / video facade child. ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-hero { padding: var(--space-3xl) 0 var(--space-xl); background: var(--bg-base); text-align: center; } body[class^="cc-ml-"] .cc-ml-hero .cc-ml-container { max-width: 1280px; } body[class^="cc-ml-"] .cc-ml-hero .cc-ml-section-split__media { border-radius: 0; box-shadow: none; overflow: visible; } body[class^="cc-ml-"] .cc-ml-hero .cc-ml-btn-primary { font-size: 17px; padding: 16px 40px; } body[class^="cc-ml-"] .cc-ml-hero h1 { max-width: 900px; margin-left: auto; margin-right: auto; } body[class^="cc-ml-"] .cc-ml-hero .cc-ml-hero__cta-group { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-top: var(--space-xl); } body[class^="cc-ml-"] .cc-ml-hero .cc-ml-hero__media { margin-top: var(--space-2xl); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-elevated); max-width: 900px; margin-left: auto; margin-right: auto; } /* ---------------------------------------------------------------------- BLOCK: .cc-ml-section — standard content section ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-section { padding: var(--space-2xl) 0; } body[class^="cc-ml-"] .cc-ml-section--panel { background: var(--bg-panel); } [data-theme="dark"] body[class^="cc-ml-"] .cc-ml-section--panel { background: #11151c; } /* .cc-ml-section--light — theme-BLIND light section. Mirror of --dark. Use when section content (typically a baked image asset) is designed for a light background and would be illegible if the surface flipped to dark. Stays light in both themes. */ body[class^="cc-ml-"] .cc-ml-section--light { background: #f5f5f7; color: #2c2c2e; } body[class^="cc-ml-"] .cc-ml-section--light h1, body[class^="cc-ml-"] .cc-ml-section--light h2, body[class^="cc-ml-"] .cc-ml-section--light h3, body[class^="cc-ml-"] .cc-ml-section--light h4 { color: #1d1d1f; } body[class^="cc-ml-"] .cc-ml-section--light .cc-ml-eyebrow { color: var(--accent-on-light); } body[class^="cc-ml-"] .cc-ml-section--light .cc-ml-fineprint { color: #6e6e73; } body[class^="cc-ml-"] .cc-ml-section--center { text-align: center; } body[class^="cc-ml-"] .cc-ml-section h2 { max-width: 800px; margin-left: auto; margin-right: auto; } /* ---------------------------------------------------------------------- BLOCK: .cc-ml-section-split — text + image/video side-by-side Reverses on mobile. Add .cc-ml-section-split--reverse to flip on desktop. ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-section-split { padding: var(--space-2xl) 0; } body[class^="cc-ml-"] .cc-ml-section-split__grid { display: grid; grid-template-columns: 45fr 55fr; gap: var(--space-2xl); align-items: center; } body[class^="cc-ml-"] .cc-ml-section-split--reverse .cc-ml-section-split__grid { direction: rtl; } body[class^="cc-ml-"] .cc-ml-section-split--reverse .cc-ml-section-split__grid > * { direction: ltr; } body[class^="cc-ml-"] .cc-ml-section-split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } /* ---------------------------------------------------------------------- BLOCK: .cc-ml-feature-grid — 3 col desktop, 2 tablet, 1 mobile Cards float UP from panel via being whiter (G15). ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-feature-grid { padding: var(--space-2xl) 0; } body[class^="cc-ml-"] .cc-ml-feature-grid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); } body[class^="cc-ml-"] .cc-ml-feature-grid__card { background: var(--bg-card); border-radius: var(--radius-md); padding: var(--space-xl); box-shadow: var(--shadow-card); transition: transform var(--transition-base), box-shadow var(--transition-base); } body[class^="cc-ml-"] .cc-ml-feature-grid__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); } body[class^="cc-ml-"] .cc-ml-feature-grid__icon { width: 48px; height: 48px; color: var(--accent-on-light); margin-bottom: var(--space-md); } /* ---------------------------------------------------------------------- BLOCK: .cc-ml-testimonial — single quote + author + photo ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-testimonial { padding: calc(var(--space-2xl) * 0.8) 0; text-align: center; } body[class^="cc-ml-"] .cc-ml-testimonial__quote { font-family: var(--font-sans); font-weight: 400; font-size: 24px; line-height: 1.45; color: var(--text-primary); max-width: 800px; margin: 0 auto var(--space-xl); letter-spacing: -0.01em; } body[class^="cc-ml-"] .cc-ml-testimonial__photo { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto var(--space-md); overflow: hidden; } body[class^="cc-ml-"] .cc-ml-testimonial__author { font-weight: 600; color: var(--text-primary); } body[class^="cc-ml-"] .cc-ml-testimonial__role { font-size: 15px; color: var(--text-muted); } /* ---------------------------------------------------------------------- BLOCK: .cc-ml-testimonial-grid — multiple testimonials ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-testimonial-grid { padding: calc(var(--space-2xl) * 0.8) 0; } body[class^="cc-ml-"] .cc-ml-testimonial-grid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); } body[class^="cc-ml-"] .cc-ml-testimonial-grid__card { background: var(--bg-card); border-radius: var(--radius-md); padding: calc(var(--space-xl) * 0.8); box-shadow: var(--shadow-card); } body[class^="cc-ml-"] .cc-ml-testimonial-grid__card-quote { font-family: var(--font-sans); font-weight: 400; font-size: 17px; line-height: 1.6; color: var(--text-body); margin-bottom: var(--space-lg); } body[class^="cc-ml-"] .cc-ml-testimonial-grid__card-author-row { display: flex; align-items: center; gap: var(--space-md); } body[class^="cc-ml-"] .cc-ml-testimonial-grid__card-photo { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } /* ---------------------------------------------------------------------- BLOCK: .cc-ml-social-proof — logos or numbers row ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-social-proof { padding: var(--space-xl) 0; text-align: center; } body[class^="cc-ml-"] .cc-ml-social-proof__label { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-lg); } body[class^="cc-ml-"] .cc-ml-social-proof__row { display: flex; justify-content: center; align-items: center; gap: var(--space-2xl); flex-wrap: wrap; opacity: 0.75; } /* ---------------------------------------------------------------------- BLOCK: .cc-ml-comparison — what you get / what you don't ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-comparison { padding: var(--space-2xl) 0; } body[class^="cc-ml-"] .cc-ml-comparison__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-xl); } body[class^="cc-ml-"] .cc-ml-comparison__col { background: var(--bg-card); border-radius: var(--radius-md); padding: var(--space-xl); box-shadow: var(--shadow-card); } body[class^="cc-ml-"] .cc-ml-comparison__col--good { border-top: 4px solid var(--accent); } body[class^="cc-ml-"] .cc-ml-comparison__col--bad { border-top: 4px solid var(--border-strong); } body[class^="cc-ml-"] .cc-ml-comparison__list { list-style: none; padding: 0; } body[class^="cc-ml-"] .cc-ml-comparison__list li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-faint); color: var(--text-body); } body[class^="cc-ml-"] .cc-ml-comparison__list li:last-child { border-bottom: none; } /* ---------------------------------------------------------------------- BLOCK: .cc-ml-faq — accordion via native

CSS-only, no JS dependency. ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-faq { padding: var(--space-2xl) 0; } body[class^="cc-ml-"] .cc-ml-faq__list { max-width: 800px; margin: var(--space-xl) auto 0; } body[class^="cc-ml-"] .cc-ml-faq__item { background: var(--bg-card); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-sm); box-shadow: var(--shadow-card); } body[class^="cc-ml-"] .cc-ml-faq__item summary { font-weight: 600; font-size: 18px; color: var(--text-primary); cursor: pointer; padding: var(--space-sm) 0; list-style: none; position: relative; padding-right: var(--space-xl); } body[class^="cc-ml-"] .cc-ml-faq__item summary::-webkit-details-marker { display: none; } body[class^="cc-ml-"] .cc-ml-faq__item summary::after { content: '+'; position: absolute; right: 0; top: var(--space-sm); font-size: 24px; font-weight: 400; color: var(--text-muted); transition: transform var(--transition-base); } body[class^="cc-ml-"] .cc-ml-faq__item[open] summary::after { transform: rotate(45deg); } body[class^="cc-ml-"] .cc-ml-faq__answer { padding: var(--space-md) 0 var(--space-sm); color: var(--text-body); } /* ---------------------------------------------------------------------- BLOCK: .cc-ml-video — facade pattern for Loom / Cloudflare Stream Author writes the facade markup; this styles the wrapper. ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-video { padding: var(--space-2xl) 0; } body[class^="cc-ml-"] .cc-ml-video__wrapper { max-width: 960px; margin: 0 auto; position: relative; aspect-ratio: 16 / 9; background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-elevated); } body[class^="cc-ml-"] .cc-ml-video__facade, body[class^="cc-ml-"] .cc-ml-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; } body[class^="cc-ml-"] .cc-ml-video__facade { cursor: pointer; display: flex; align-items: center; justify-content: center; } body[class^="cc-ml-"] .cc-ml-video__facade img { width: 100%; height: 100%; object-fit: cover; } body[class^="cc-ml-"] .cc-ml-video__play { position: absolute; width: 80px; height: 80px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; /* status-vivid on a dark scrim — reads in both themes (G29 exception) */ display: flex; align-items: center; justify-content: center; transition: transform var(--transition-base), background var(--transition-base); } body[class^="cc-ml-"] .cc-ml-video__facade:hover .cc-ml-video__play { transform: scale(1.05); background: rgba(0, 0, 0, 0.75); } /* ---------------------------------------------------------------------- BLOCK: .cc-ml-cta-block — full-width CTA section ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-cta-block { padding: var(--space-3xl) 0; background: var(--bg-panel); text-align: center; } body[class^="cc-ml-"] .cc-ml-cta-block h2 { max-width: 720px; margin-left: auto; margin-right: auto; } body[class^="cc-ml-"] .cc-ml-cta-block p { max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: var(--space-xl); color: var(--text-body); } /* ---------------------------------------------------------------------- BLOCK: .cc-ml-footer-cta — final CTA before footer ---------------------------------------------------------------------- */ body[class^="cc-ml-"] .cc-ml-footer-cta { padding: var(--space-2xl) 0 var(--space-3xl); text-align: center; } body[class^="cc-ml-"] .site-footer { margin-top: 0; } /* ====================================================================== RESPONSIVE — mobile (≤768px) and tablet (≤1024px) ====================================================================== */ @media (max-width: 1024px) { body[class^="cc-ml-"] .cc-ml-feature-grid__grid, body[class^="cc-ml-"] .cc-ml-testimonial-grid__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { body[class^="cc-ml-"] { font-size: 16px; } body[class^="cc-ml-"] h1 { font-size: 36px; } body[class^="cc-ml-"] h2 { font-size: 28px; } body[class^="cc-ml-"] h3 { font-size: 22px; } body[class^="cc-ml-"] .cc-ml-lede { font-size: 18px; } body[class^="cc-ml-"] .cc-ml-hero { padding: var(--space-2xl) 0 var(--space-xl); } body[class^="cc-ml-"] .cc-ml-section, body[class^="cc-ml-"] .cc-ml-section-split, body[class^="cc-ml-"] .cc-ml-feature-grid, body[class^="cc-ml-"] .cc-ml-testimonial, body[class^="cc-ml-"] .cc-ml-testimonial-grid, body[class^="cc-ml-"] .cc-ml-comparison, body[class^="cc-ml-"] .cc-ml-faq, body[class^="cc-ml-"] .cc-ml-video { padding: var(--space-xl) 0; } body[class^="cc-ml-"] .cc-ml-cta-block { padding: var(--space-2xl) 0; } body[class^="cc-ml-"] .cc-ml-section-split__grid, body[class^="cc-ml-"] .cc-ml-comparison__grid { grid-template-columns: 1fr; } body[class^="cc-ml-"] .cc-ml-section-split--reverse .cc-ml-section-split__grid { direction: ltr; /* don't reverse on mobile — text first */ } body[class^="cc-ml-"] .cc-ml-feature-grid__grid, body[class^="cc-ml-"] .cc-ml-testimonial-grid__grid { grid-template-columns: 1fr; } body[class^="cc-ml-"] .cc-ml-testimonial__quote { font-size: 20px; } body[class^="cc-ml-"] .cc-ml-social-proof__row { gap: var(--space-lg); } } /* Phone-only refinements (≤480px). The 768px block handles tablet→phone collapse (grids to 1-col, font scale-down). This block tightens further for portrait phones where 375–428px viewports need smaller headlines, reduced padding, and denser endorsement text to avoid extreme vertical stretching. Added 2026-05-26 during mobile validation Pass 3 (Opus 4.6). */ @media (max-width: 480px) { /* --- Typography tightening ------------------------------------ */ /* h1: 36px at 768px still wraps to 6+ lines on a 375px hero. Reduce to 30px for phone hero density. Evidence: mobile PDF page 1 — hero h1 wraps excessively. */ body[class^="cc-ml-"] h1 { font-size: 30px; } /* h2: 28px wraps Bonus/section headings to 3+ lines on phone. Reduce to 24px. Evidence: mobile PDF page 11 — "BONUS #1 — WEEKLY CHATS" 3-line wrap. */ body[class^="cc-ml-"] h2 { font-size: 24px; } /* h3: 22px is reasonable but tight on phone; trim to 20px. */ body[class^="cc-ml-"] h3 { font-size: 20px; } /* Lede / hero subtitle — tighten from 18px (768px) to 16px. */ body[class^="cc-ml-"] .cc-ml-lede { font-size: 16px; } /* --- Container padding reduction ----------------------------- */ /* At 375px, 24px side padding eats 48px → only 327px for content. Reduce to 16px → 343px content width. Evidence: mobile PDF pages 1-6 — text columns very narrow. */ body[class^="cc-ml-"] .cc-ml-container { padding: 0 var(--space-md); } /* --- Endorsement tightening ---------------------------------- */ /* Avatar from 80px to 64px on phone — frees ~16px for text. Blockquote from 16px to 14px to reduce vertical stretch. Evidence: mobile PDF pages 1-2 — Dennis Sands and Conrad Pope quotes create very tall text blocks in the 80px+1fr grid. */ body[class^="cc-ml-"] .cc-ml-endorsement { grid-template-columns: 64px 1fr; gap: var(--space-md); } body[class^="cc-ml-"] .cc-ml-endorsement img { width: 64px; height: 64px; } body[class^="cc-ml-"] .cc-ml-endorsement__name { font-size: 13px; } body[class^="cc-ml-"] .cc-ml-endorsement__role { font-size: 11px; } /* --- CTA button full-width on phone -------------------------- */ /* On 375px, the pill button with 32px side padding creates a near-full-width button anyway. Make it explicit for clean edge-to-edge alignment and better touch target. Evidence: mobile PDF pages 7, 12, 19 — buttons visually fill the width but inconsistently. */ body[class^="cc-ml-"] .cc-ml-btn-primary { display: block; width: 100%; text-align: center; padding: 16px 24px; } /* --- Section spacing reduction ------------------------------- */ /* Tighten vertical spacing between sections on phone to reduce the feeling of loneliness between sections. Evidence: mobile PDF pages 5-7 — large empty gaps between sections at phone viewport. */ body[class^="cc-ml-"] .cc-ml-section, body[class^="cc-ml-"] .cc-ml-section-split, body[class^="cc-ml-"] .cc-ml-feature-grid, body[class^="cc-ml-"] .cc-ml-testimonial, body[class^="cc-ml-"] .cc-ml-testimonial-grid, body[class^="cc-ml-"] .cc-ml-comparison, body[class^="cc-ml-"] .cc-ml-faq, body[class^="cc-ml-"] .cc-ml-video { padding: var(--space-lg) 0; } body[class^="cc-ml-"] .cc-ml-cta-block { padding: var(--space-xl) 0; } } /* ====================================================================== VARIANT MODIFIERS — extend base blocks without inventing new ones Pattern: .cc-ml---. Compose on top of the base block. ====================================================================== */ /* .cc-ml-section--dark — "spotlight" section. Apple-keynote-style island of darkness, theme-BLIND (stays dark even in light theme — intentional visual emphasis per G41 atmospheric pattern). Use for stat strips, "what you get" highlights, dramatic transitions. */ body[class^="cc-ml-"] .cc-ml-section--dark { background: #0d1117; color: rgba(255, 255, 255, 0.85); /* G29 exception: white on theme-blind dark surface reads in both themes */ } body[class^="cc-ml-"] .cc-ml-section--dark h2, body[class^="cc-ml-"] .cc-ml-section--dark h3, body[class^="cc-ml-"] .cc-ml-section--dark h4 { color: #fff; } body[class^="cc-ml-"] .cc-ml-section--dark .cc-ml-eyebrow { color: var(--accent); /* gold reads well on dark — use --accent directly, not --accent-on-light */ } /* Dark-mode depth: --dark is theme-blind in CHARACTER (moody spotlight) but needs a deeper surface when the canvas is already #0d1117. Uses #010409 (GitHub Dark neutral.0 / "inset") — the floor of the same neutral scale tokens.css is built on. Delta -12/-13/-14 from base = unmistakable. */ [data-theme="dark"] body[class^="cc-ml-"] .cc-ml-section--dark { background: #010409; } /* .cc-ml-section--cream — warm-tinted section. Very subtle gold-tint background. Theme-aware via rgba on accent. Use for guarantee/reassurance sections. Stays restrained. */ body[class^="cc-ml-"] .cc-ml-section--cream { background: rgba(210, 153, 34, 0.04); /* 4% gold tint — barely there, reads warm in both themes */ } [data-theme="dark"] body[class^="cc-ml-"] .cc-ml-section--cream { background: rgba(255, 255, 255, 0.07); /* cool elevation, not warm tint — gold tinting at low luminance clashes with the cool-blue base; warmth comes from content (gold accents), not background */ } /* .cc-ml-cta-block--accent — subtle gold-tinted accent block. Light: 4% gold warmth + gold left border. Dark: cool elevation. Gold stays as heading color + border marker, not a background flood. Use for "Bonus" / featured CTA blocks. */ body[class^="cc-ml-"] .cc-ml-cta-block--accent { background: rgba(210, 153, 34, 0.04); color: var(--text-body); border-left: 4px solid var(--accent); } body[class^="cc-ml-"] .cc-ml-cta-block--accent h2, body[class^="cc-ml-"] .cc-ml-cta-block--accent h3 { color: var(--accent-on-light); } body[class^="cc-ml-"] .cc-ml-cta-block--accent p { color: var(--text-body); } body[class^="cc-ml-"] .cc-ml-cta-block--accent .cc-ml-eyebrow { color: var(--accent-on-light); opacity: 0.75; } body[class^="cc-ml-"] .cc-ml-cta-block--accent .cc-ml-btn-primary { background: var(--accent); color: var(--text-on-accent); } body[class^="cc-ml-"] .cc-ml-cta-block--accent .cc-ml-btn-primary:hover { background: var(--accent-bright); color: var(--text-on-accent); box-shadow: 0 8px 24px var(--accent-glow); } [data-theme="dark"] body[class^="cc-ml-"] .cc-ml-cta-block--accent { background: rgba(255, 255, 255, 0.07); } /* .cc-ml-bonus-support — subtle neutral accent for Bonus #2 Support section. Light: 5% grey + gold border. Dark: faint elevation. Pairs with .cc-ml-cta-block--accent (Bonus #1) for rhythm contrast. */ body[class^="cc-ml-"] .cc-ml-bonus-support { background: rgba(0, 0, 0, 0.05); border-left: 4px solid var(--accent); } body[class^="cc-ml-"] .cc-ml-bonus-support h2 { color: var(--accent-on-light); } body[class^="cc-ml-"] .cc-ml-bonus-support .cc-ml-video__wrapper { max-width: 50%; margin-left: auto; margin-right: auto; } [data-theme="dark"] body[class^="cc-ml-"] .cc-ml-bonus-support { background: rgba(255, 255, 255, 0.03); } @media (max-width: 768px) { body[class^="cc-ml-"] .cc-ml-bonus-support .cc-ml-video__wrapper { max-width: 100%; } } /* ====================================================================== EDITORIAL DETAILS — utility classes for refined typographic moments ====================================================================== */ /* .cc-ml-rule — thin gold rule under a heading (editorial flourish). Place as a sibling AFTER the heading, BEFORE the body. */ body[class^="cc-ml-"] .cc-ml-rule { display: block; width: 48px; height: 2px; background: var(--accent); margin: var(--space-md) auto var(--space-lg); border: 0; } body[class^="cc-ml-"] .cc-ml-rule--left { margin-left: 0; margin-right: 0; } /* .cc-ml-stat — large display number/stat for spotlight sections. Pair with a small .cc-ml-stat-label below. */ body[class^="cc-ml-"] .cc-ml-stat { font-family: var(--font-sans); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -0.035em; color: #fff; display: block; margin-bottom: var(--space-sm); } body[class^="cc-ml-"] .cc-ml-stat-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } /* Same stats outside the dark spotlight should adapt to theme */ body[class^="cc-ml-"] .cc-ml-section:not(.cc-ml-section--dark) .cc-ml-stat { color: var(--text-primary); } body[class^="cc-ml-"] .cc-ml-section:not(.cc-ml-section--dark) .cc-ml-stat-label { color: var(--text-muted); } /* .cc-ml-stat-grid — 3-col horizontal stat layout (for spotlight strip) */ body[class^="cc-ml-"] .cc-ml-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); text-align: center; padding: var(--space-xl) 0; } @media (max-width: 768px) { body[class^="cc-ml-"] .cc-ml-stat-grid { grid-template-columns: 1fr; gap: var(--space-lg); } body[class^="cc-ml-"] .cc-ml-stat { font-size: 56px; } } /* ====================================================================== COMPOSITE SUB-COMPONENTS used inside the base blocks These don't belong to a single block — they appear in multiple. Keep names .cc-ml-* but treat as utility-level inside the block-class system. ====================================================================== */ /* --- Endorsement (figure inside .cc-ml-section--cream or hero) --- */ body[class^="cc-ml-"] .cc-ml-section:has(.cc-ml-endorsement-row) { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } [data-theme="light"] body[class^="cc-ml-"] .cc-ml-section:has(.cc-ml-endorsement-row) { background: rgba(0, 0, 0, 0.05); } [data-theme="dark"] body[class^="cc-ml-"] .cc-ml-section:has(.cc-ml-endorsement-row) { background: rgba(255, 255, 255, 0.03); /* gentle lift — social proof supports, doesn't star; cream sections (0.07) get the stronger elevation */ } body[class^="cc-ml-"] .cc-ml-endorsement-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: flex-start; } body[class^="cc-ml-"] .cc-ml-endorsement { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-lg); align-items: flex-start; margin: 0; } body[class^="cc-ml-"] .cc-ml-endorsement img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; } body[class^="cc-ml-"] .cc-ml-endorsement figcaption { display: flex; flex-direction: column; gap: var(--space-sm); } body[class^="cc-ml-"] .cc-ml-endorsement__name { display: block; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); } body[class^="cc-ml-"] .cc-ml-endorsement__role { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } body[class^="cc-ml-"] .cc-ml-endorsement blockquote { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-body); } @media (max-width: 768px) { body[class^="cc-ml-"] .cc-ml-endorsement-row { grid-template-columns: 1fr; gap: var(--space-xl); } body[class^="cc-ml-"] .cc-ml-endorsement { grid-template-columns: 80px 1fr; } body[class^="cc-ml-"] .cc-ml-endorsement img { width: 80px; height: 80px; } body[class^="cc-ml-"] .cc-ml-endorsement blockquote { font-size: 14px; line-height: 1.35; } } @media (max-width: 480px) { body[class^="cc-ml-"] .cc-ml-endorsement blockquote { font-size: 13px; line-height: 1.3; } } /* --- Pricing block (inside .cc-ml-comparison__col) --- */ body[class^="cc-ml-"] .cc-ml-price { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-md); } body[class^="cc-ml-"] .cc-ml-price__anchor { font-size: 22px; font-weight: 400; color: var(--text-muted); text-decoration: line-through; } body[class^="cc-ml-"] .cc-ml-price__sale { font-family: var(--font-sans); font-size: 48px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.025em; line-height: 1; } body[class^="cc-ml-"] .cc-ml-price__off { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-on-light); padding: 4px 10px; border: 1px solid var(--accent); border-radius: var(--radius-pill); } body[class^="cc-ml-"] .cc-ml-price__badge { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-accent); background: var(--accent); padding: 4px 10px; border-radius: var(--radius-pill); } /* Image inside .cc-ml-comparison__col */ body[class^="cc-ml-"] .cc-ml-comparison__col img { width: 100%; height: auto; border-radius: var(--radius-sm); margin-bottom: var(--space-lg); } /* --- Content list (used inside split sections, mentor bio, commitment) --- */ body[class^="cc-ml-"] .cc-ml-list { list-style: none; padding: 0; margin: var(--space-md) 0; } body[class^="cc-ml-"] .cc-ml-list li { padding: var(--space-sm) 0 var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--border-faint); color: var(--text-body); position: relative; line-height: 1.55; } body[class^="cc-ml-"] .cc-ml-list li:last-child { border-bottom: none; } body[class^="cc-ml-"] .cc-ml-list li::before { content: "—"; position: absolute; left: 0; top: var(--space-sm); color: var(--accent-on-light); font-weight: 600; } /* --- Evergreen countdown timer (reusable across migrated landings) --- */ body[class^="cc-ml-"] .cc-ml-countdown { display: flex; justify-content: center; gap: var(--space-lg); } body[class^="cc-ml-"] .cc-ml-countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 56px; } body[class^="cc-ml-"] .cc-ml-countdown__value { font-family: var(--font-sans); font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--text-primary); } body[class^="cc-ml-"] .cc-ml-countdown__label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; } body[class^="cc-ml-"] .cc-ml-section--light .cc-ml-countdown__value { color: #1d1d1f; } body[class^="cc-ml-"] .cc-ml-section--light .cc-ml-countdown__label { color: #6e6e73; } @media (max-width: 480px) { body[class^="cc-ml-"] .cc-ml-countdown { gap: var(--space-md); } body[class^="cc-ml-"] .cc-ml-countdown__value { font-size: 28px; } body[class^="cc-ml-"] .cc-ml-countdown__unit { min-width: 44px; } } /* --- Sticky countdown bar (in-flow top, sticks on scroll, evergreen timer) --- */ body[class^="cc-ml-"] .cc-ml-sticky-bar { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: var(--space-lg); padding: 10px var(--space-lg); background: #0d1117; color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } body[class^="cc-ml-"] .cc-ml-sticky-bar__text { font-family: var(--font-sans); font-size: 14px; font-weight: 500; white-space: nowrap; } body[class^="cc-ml-"] .cc-ml-sticky-bar__timer { display: flex; gap: var(--space-sm); } body[class^="cc-ml-"] .cc-ml-sticky-bar__unit { display: flex; flex-direction: column; align-items: center; min-width: 36px; } body[class^="cc-ml-"] .cc-ml-sticky-bar__value { font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1; color: #fff; } body[class^="cc-ml-"] .cc-ml-sticky-bar__label { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-top: 2px; } body[class^="cc-ml-"] .cc-ml-sticky-bar__cta { font-family: var(--font-sans); font-size: 13px; font-weight: 600; padding: 8px 20px; background: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap; transition: background var(--transition-fast); } body[class^="cc-ml-"] .cc-ml-sticky-bar__cta:hover { background: var(--accent-bright); color: var(--text-on-accent); } @media (max-width: 768px) { body[class^="cc-ml-"] .cc-ml-sticky-bar { gap: var(--space-md); padding: 8px var(--space-md); } body[class^="cc-ml-"] .cc-ml-sticky-bar__text { display: none; } body[class^="cc-ml-"] .cc-ml-sticky-bar__value { font-size: 15px; } body[class^="cc-ml-"] .cc-ml-sticky-bar__cta { font-size: 12px; padding: 6px 14px; } } /* --- Testimonial card role line (under author name) --- */ body[class^="cc-ml-"] .cc-ml-testimonial-grid__card-role { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; } /* --- Curriculum grid (3-col long-list layout) --- */ body[class^="cc-ml-"] .cc-ml-curriculum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); } body[class^="cc-ml-"] .cc-ml-curriculum-col h3 { font-size: 22px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; padding-bottom: calc(var(--space-md) / 2); border-bottom: 2px solid var(--accent); margin-bottom: var(--space-lg); text-transform: uppercase; } body[class^="cc-ml-"] .cc-ml-curriculum-col h4 { font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.04em; text-transform: uppercase; margin-top: var(--space-lg); margin-bottom: var(--space-sm); } body[class^="cc-ml-"] .cc-ml-curriculum-col h4:first-child, body[class^="cc-ml-"] .cc-ml-curriculum-subgroup:first-child h4 { margin-top: 0; } body[class^="cc-ml-"] .cc-ml-curriculum-col ul { list-style: none; padding: 0; margin: 0; } body[class^="cc-ml-"] .cc-ml-curriculum-col ul li { padding: 2px 0 2px calc(var(--space-md) / 2); font-size: 14px; line-height: 1.5; color: var(--text-body); position: relative; } body[class^="cc-ml-"] .cc-ml-curriculum-col ul li::before { content: "·"; position: absolute; left: 4px; color: var(--accent-on-light); } body[class^="cc-ml-"] .cc-ml-curriculum-subgroup { margin-bottom: var(--space-lg); } body[class^="cc-ml-"] .cc-ml-curriculum-subgroup:last-child { margin-bottom: 0; } @media (max-width: 1024px) { body[class^="cc-ml-"] .cc-ml-curriculum-grid { grid-template-columns: 1fr; } } /* ====================================================================== VARIANT MODIFIERS — added 2026-05-26 from Orchestration migration Patterns lifted from orchestration.html's page-scoped