. All rules are scoped so they never leak into site.css components (header, nav, footer). Load AFTER site.css. Requires the Inter font link (see /breathless). */ body.ch-body{ --onyx:#0c0c0c; --ivory:#ede8df; --champagne:#c9a96e; --stone:#5e5a55; --taupe:#908880; --card:#131313; --ch-rule:rgba(255,255,255,0.07); background:var(--onyx); } .ch-page{ background:var(--onyx); color:var(--ivory); font-family:'Inter',-apple-system,sans-serif; font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; } .ch-page em{font-style:italic;color:inherit} /* site.css sets a global serif on h2; this system is all Inter. */ .ch-page h1,.ch-page h2,.ch-page h3{font-family:'Inter',-apple-system,sans-serif} /* ── HERO ─────────────────────────────────── */ .ch-hero{ min-height:92svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:140px 24px 100px; position:relative; overflow:hidden; } /* Full-bleed launch hero. The supplied asset is pre-graded (sepia, subject left, dark field right), so no CSS grayscale here; a right-and-bottom scrim guarantees type contrast over the dark zone. */ .ch-hero-photo{position:absolute; inset:0; pointer-events:none; z-index:0} .ch-hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:left center; opacity:.92; display:block; } .ch-hero-scrim{ position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient(to top, #0c0c0c 0%, rgba(12,12,12,0) 26%), radial-gradient(ellipse 62% 58% at 50% 46%, rgba(12,12,12,.62) 0%, rgba(12,12,12,.3) 55%, rgba(12,12,12,0) 100%), linear-gradient(to right, rgba(12,12,12,.1) 30%, rgba(12,12,12,.45) 100%); } .ch-wordmark{width:min(340px,72vw);height:auto;display:block;margin:0 auto 30px} .ch-ring,.ch-ring-2{ position:absolute; top:50%; left:50%; transform:translate(-50%,-55%); border-radius:50%; animation:ch-breathe 5s ease-in-out infinite; pointer-events:none; } .ch-ring{width:640px;height:640px;border:1px solid rgba(201,169,110,.10)} .ch-ring-2{width:440px;height:440px;border:1px solid rgba(201,169,110,.07);animation-delay:.9s} @keyframes ch-breathe{ 0%,100%{transform:translate(-50%,-55%) scale(1);opacity:.4} 50%{transform:translate(-50%,-55%) scale(1.07);opacity:1} } .ch-hero-inner{position:relative;z-index:1;max-width:800px} .ch-hero h1{ font-size:clamp(42px,6.5vw,76px); font-weight:800; line-height:1.02; letter-spacing:-.03em; margin-bottom:28px; color:#fff; } .ch-hero h1 em{font-style:italic;color:var(--champagne);font-weight:700} .ch-hero-deck{font-size:18px;color:var(--taupe);line-height:1.7;max-width:560px;margin:0 auto 44px} .ch-hero-meta{margin-top:20px;font-size:12px;color:var(--stone);letter-spacing:.04em} /* ── SHARED ───────────────────────────────── */ .ch-eyebrow{ font-size:10px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--champagne); margin-bottom:28px; display:block; } .ch-page hr.ch-rule{border:none;border-top:1px solid var(--ch-rule);max-width:1060px;margin:0 auto} .ch-sec{padding:96px 24px;max-width:860px;margin:0 auto} .ch-sec-wide{padding:96px 24px;max-width:1060px;margin:0 auto} .ch-card-bg{background:var(--card)} .ch-page h2.ch-heading{ font-size:clamp(32px,4.5vw,52px); font-weight:800; line-height:1.05; letter-spacing:-.025em; margin-bottom:20px; color:#fff; } .ch-page h2.ch-heading em{color:var(--champagne);font-style:italic;font-weight:700} .ch-sub{font-size:16px;color:var(--taupe);line-height:1.8;max-width:560px} .ch-sub strong{color:var(--ivory);font-weight:600} .ch-sub p{margin-bottom:16px} .ch-sub p:last-child{margin-bottom:0} /* ── BUTTONS ──────────────────────────────── */ .ch-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-size:14px; font-weight:700; letter-spacing:.04em; padding:16px 34px; border-radius:100px; background:var(--champagne); color:var(--onyx); transition:opacity .2s; border:none; cursor:pointer; } .ch-btn:hover{opacity:.85} .ch-btn-full{display:block;width:100%;text-align:center;padding:18px;border-radius:100px; font-size:15px;font-weight:700;letter-spacing:.04em;text-decoration:none; background:var(--champagne);color:var(--onyx);transition:opacity .2s} .ch-btn-full:hover{opacity:.85} /* ── STAT BAR ─────────────────────────────── */ .ch-statbar{border-top:1px solid var(--ch-rule);border-bottom:1px solid var(--ch-rule);padding:28px 24px} .ch-statbar-inner{max-width:860px;margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap} .ch-stat{flex:1;min-width:130px;text-align:center;padding:6px 20px;border-right:1px solid var(--ch-rule)} .ch-stat:last-child{border-right:none} .ch-stat-val{font-size:30px;font-weight:800;color:var(--champagne);display:block;line-height:1;margin-bottom:5px;letter-spacing:-.02em} .ch-stat-lbl{font-size:10px;color:var(--stone);letter-spacing:.1em;text-transform:uppercase} /* ── FEATURED PULL QUOTE ──────────────────── */ .ch-pull{padding:96px 24px} .ch-pull-inner{max-width:740px;margin:0 auto;text-align:center} .ch-pull-q{font-size:clamp(20px,3vw,30px);font-weight:400;line-height:1.6;color:var(--ivory);font-style:italic;margin-bottom:28px} .ch-pull-q::before{content:'"';color:var(--champagne)} .ch-pull-q::after{content:'"';color:var(--champagne)} .ch-attr{display:flex;align-items:center;justify-content:center;gap:12px} .ch-avatar-sm{width:36px;height:36px;border-radius:50%;background:var(--stone);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--ivory);flex-shrink:0} .ch-attr-name{font-size:13px;font-weight:600;text-align:left} .ch-attr-role{font-size:12px;color:var(--stone);text-align:left} /* ── GUARANTEE ────────────────────────────── */ .ch-guarantee{max-width:640px;margin:40px auto 0;border:1px solid rgba(61,107,78,.4);border-radius:14px;padding:52px;background:rgba(61,107,78,.05);text-align:center} .ch-guarantee h3{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:18px} .ch-guarantee p{font-size:16px;color:var(--taupe);line-height:1.8;margin-bottom:14px} .ch-guarantee p:last-child{margin-bottom:0} .ch-guarantee p strong{color:var(--ivory);font-weight:500} /* ── TWO-COLUMN TEXT + IMAGE ──────────────── */ .ch-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .ch-split-img{border-radius:12px;overflow:hidden;border:1px solid var(--ch-rule)} .ch-split-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);display:block;aspect-ratio:4/5} .ch-split-img.wide img{aspect-ratio:3/2;object-position:center 25%} /* ── PAIN / SOUND FAMILIAR ────────────────── */ .ch-pain-grid{display:grid;gap:12px;margin-top:36px} .ch-pain-item{padding:20px 24px;border-radius:10px;border:1px solid var(--ch-rule); font-size:16px;color:var(--ivory);line-height:1.6} .ch-pain-item strong{color:var(--champagne);font-weight:600} .ch-pain-close{margin-top:36px;padding:28px 32px;border-radius:12px; border:1px solid rgba(201,169,110,.25);background:rgba(201,169,110,.05)} .ch-pain-close p{font-size:20px;font-weight:700;color:#fff;line-height:1.4;letter-spacing:-.01em} .ch-pain-close p em{color:var(--champagne);font-style:italic} .ch-pain-close p + p{font-size:15px;color:var(--taupe);font-weight:400;margin-top:10px} /* ── DIAGNOSIS COLUMNS ────────────────────── */ .ch-diag-punch{margin-top:48px;max-width:620px;font-size:17px;color:var(--ivory);line-height:1.85; font-weight:500;border-left:2px solid var(--champagne);padding-left:20px} .ch-diag-punch em{color:var(--champagne);font-style:italic} .ch-diag-header{max-width:620px;margin-bottom:56px} .ch-diag-header p{font-size:16px;color:var(--taupe);line-height:1.8;margin-top:16px} .ch-diag-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px} .ch-col-label{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:var(--stone);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--ch-rule);display:block} .ch-col-label.gold{color:var(--champagne);border-bottom-color:rgba(201,169,110,.2)} .ch-diag-col p{font-size:15px;color:var(--taupe);line-height:1.8;margin-bottom:16px} .ch-diag-col p strong{color:var(--ivory);font-weight:600} /* ── BENEFITS ─────────────────────────────── */ .ch-benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px} .ch-benefit-card{padding:28px;border-radius:10px;border:1px solid var(--ch-rule);background:rgba(255,255,255,.02)} .ch-benefit-card h3{font-size:16px;font-weight:700;color:#fff;margin-bottom:8px} .ch-benefit-card p{font-size:14px;color:var(--taupe);line-height:1.65} .ch-benefit-icon{width:36px;height:36px;border-radius:50%;background:rgba(201,169,110,.1); display:flex;align-items:center;justify-content:center;margin-bottom:16px} .ch-benefit-icon svg{width:18px;height:18px;stroke:var(--champagne);fill:none;stroke-width:1.5} /* ── TESTIMONIAL CARDS ────────────────────── */ .ch-featured-quote{padding:32px;border-radius:12px;border:1px solid rgba(201,169,110,.25); background:rgba(201,169,110,.04);font-size:18px;font-style:italic;color:var(--ivory); line-height:1.65;margin-bottom:16px;margin-top:36px} .ch-testi-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px} .ch-testi-card{padding:28px;border-radius:10px;border:1px solid var(--ch-rule);background:var(--card); display:flex;flex-direction:column;gap:20px} .ch-testi-card blockquote{font-size:15px;line-height:1.75;color:var(--ivory);flex:1;font-style:italic} /* ── STORY / WHY WE BUILT THIS ────────────── */ .ch-story-copy{max-width:640px;margin-bottom:64px} .ch-story-copy p{font-size:17px;color:var(--taupe);line-height:1.85;margin-bottom:20px} .ch-story-copy p.ch-story-punch{color:var(--ivory);font-weight:500;margin-bottom:0} /* ── FOR / NOT FOR ────────────────────────── */ .ch-for-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px} .ch-for-group h3{font-size:13px;font-weight:700;color:var(--ivory);margin-bottom:20px; text-transform:uppercase;letter-spacing:.1em} .ch-for-list{list-style:none;display:grid;gap:12px;padding:0;margin:0} .ch-for-list li{font-size:15px;color:var(--taupe);line-height:1.55;padding-left:22px;position:relative} .ch-for-list li::before{content:'·';font-weight:700;position:absolute;left:4px;color:var(--champagne)} .ch-for-list.dim li{opacity:.55} .ch-for-list.dim li::before{color:var(--stone)} /* ── VALUE TOTAL ──────────────────────────── */ .ch-get-val{font-size:12px;color:var(--stone);white-space:nowrap;padding-top:3px;text-align:right} .ch-get-total{margin-top:16px;padding:20px 24px;border-radius:10px; border:1px solid rgba(201,169,110,.35);background:rgba(201,169,110,.05); display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .ch-get-total-lbl{font-size:14px;color:var(--taupe)} .ch-get-total-price{display:flex;align-items:center;gap:14px} .ch-get-total-orig{font-size:13px;color:var(--stone);text-decoration:line-through} .ch-get-total-real{font-size:28px;font-weight:800;color:var(--champagne);letter-spacing:-.02em} /* ── SIGNATURE ────────────────────────────── */ .ch-sig{font-size:14px;color:var(--stone);margin-top:32px;font-style:italic} /* ── INLINE CTA BAND (mid-page repeats) ───── */ .ch-cta-inline{text-align:center;margin-top:56px} .ch-cta-inline .ch-btn{min-width:280px} .ch-cta-inline-meta{margin-top:14px;font-size:12px;color:var(--stone);letter-spacing:.04em} /* ── BLUEPRINT PHASE GOAL ─────────────────── */ .ch-tl-goal{margin-top:12px;font-size:13px;color:var(--champagne);font-style:italic} /* ── RECOGNITION (ember-rule lines) ───────── */ .ch-lines{display:grid;gap:18px;margin-top:36px} .ch-line{ padding:6px 0 6px 22px; border-left:2px solid var(--champagne); font-size:17px; color:var(--ivory); line-height:1.6; } .ch-line-close{margin-top:40px;font-size:20px;line-height:1.6;color:#fff;font-weight:600;letter-spacing:-.01em} .ch-line-close em{display:block;color:var(--champagne);font-style:italic;font-weight:600} /* ── TIMELINE (new pattern for Breathless) ── */ .ch-timeline{margin-top:48px;display:grid;gap:0} .ch-tl{ display:grid; grid-template-columns:220px 1fr; gap:28px; padding:30px 0; border-top:1px solid var(--ch-rule); } .ch-tl:last-child{border-bottom:1px solid var(--ch-rule)} .ch-tl-label{ font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--champagne); line-height:1.8; padding-top:3px; } .ch-tl-body{font-size:16px;color:var(--taupe);line-height:1.75} .ch-tl-body strong{color:var(--ivory);font-weight:600} .ch-tl-weeks{display:grid;gap:6px;margin-top:14px} .ch-tl-week{font-size:14px;color:var(--stone);letter-spacing:.02em} .ch-tl-week b{color:var(--champagne);font-weight:700;font-variant-numeric:tabular-nums;margin-right:10px} .ch-tl-note{margin-top:36px;font-size:15px;color:var(--taupe)} /* ── WHAT YOU GET ─────────────────────────── */ .ch-get{display:grid;gap:12px;margin-top:40px} .ch-get-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:20px; padding:22px 24px; border-radius:10px; border:1px solid var(--ch-rule); background:var(--card); } .ch-get-tag{ font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne); background:rgba(201,169,110,.1); border:1px solid rgba(201,169,110,.2); padding:4px 10px; border-radius:100px; white-space:nowrap; margin-top:2px; } .ch-get-body h4{font-size:16px;font-weight:600;color:#fff;margin-bottom:4px} .ch-get-body p{font-size:13px;color:var(--taupe);line-height:1.6} /* ── QUOTES (kept for when testimonials land) ── */ .ch-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px} .ch-quote{border-top:2px solid var(--champagne);padding-top:24px} .ch-quote blockquote{font-size:17px;line-height:1.75;color:var(--ivory);font-style:italic;margin-bottom:16px} .ch-quote cite{font-size:13px;color:var(--stone);font-style:normal} .ch-quote-single{max-width:740px;margin:48px auto 0;text-align:center;border-top:2px solid var(--champagne);padding-top:32px} .ch-quote-single blockquote{font-size:clamp(20px,3vw,28px);line-height:1.6;color:var(--ivory);font-style:italic;margin-bottom:20px} /* ── WHO RUNS IT ──────────────────────────── */ .ch-team{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ch-rule); border:1px solid var(--ch-rule);border-radius:12px;overflow:hidden;margin-top:48px} .ch-team-card{background:var(--card);padding:48px} .ch-avatar{width:80px;height:80px;border-radius:50%;border:2px solid rgba(201,169,110,.4); overflow:hidden;margin-bottom:20px} .ch-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(100%);display:block} .ch-team-card h3{font-size:20px;font-weight:700;color:#fff;margin-bottom:4px} .ch-role{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase; color:var(--champagne);margin-bottom:24px;display:block} .ch-team-card p{font-size:15px;color:var(--taupe);line-height:1.85;margin-bottom:16px} .ch-team-link{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--champagne);text-decoration:none} .ch-team-link:hover{opacity:.7} /* ── PRICE ────────────────────────────────── */ .ch-price-inner{max-width:480px;margin:0 auto;text-align:center} .ch-price-box{ padding:40px; border-radius:14px; border:1px solid rgba(201,169,110,.35); background:rgba(201,169,110,.04); } .ch-price-num{font-size:80px;font-weight:800;color:var(--champagne);line-height:1;letter-spacing:-.04em;margin-bottom:4px} .ch-price-currency{font-size:14px;color:var(--stone);margin-bottom:28px} .ch-price-meta{display:flex;justify-content:center;gap:20px;margin-top:16px;flex-wrap:wrap} .ch-price-meta span{font-size:12px;color:var(--stone)} /* ── FAQ ──────────────────────────────────── */ .ch-faq{margin-top:48px;display:grid;gap:0} .ch-faq-item{padding:26px 0;border-top:1px solid var(--ch-rule)} .ch-faq-item:last-child{border-bottom:1px solid var(--ch-rule)} .ch-faq-item h3{font-size:17px;font-weight:700;color:#fff;margin-bottom:8px} .ch-faq-item p{font-size:15px;color:var(--taupe);line-height:1.75} /* ── FINAL CTA ────────────────────────────── */ .ch-final{border-top:1px solid var(--ch-rule)} .ch-final-inner{max-width:640px;margin:0 auto;text-align:center} .ch-final-inner h2{font-size:clamp(34px,5vw,54px);font-weight:800;line-height:1.05; letter-spacing:-.025em;color:#fff;margin-bottom:32px} .ch-final-inner h2 em{color:var(--champagne);font-style:italic;font-weight:700} .ch-final-meta{margin-top:18px;font-size:12px;color:var(--stone);letter-spacing:.04em} /* ── RESPONSIVE ───────────────────────────── */ @media (max-width:700px){ .ch-ring,.ch-ring-2{display:none} .ch-hero{min-height:86svh;padding:120px 20px 80px} .ch-hero-photo img{object-position:22% center;opacity:.8} .ch-hero-scrim{background: linear-gradient(to top, #0c0c0c 0%, rgba(12,12,12,.1) 30%), rgba(12,12,12,.45)} .ch-sec,.ch-sec-wide{padding:72px 20px} .ch-split,.ch-team,.ch-quotes,.ch-diag-cols,.ch-benefits-grid,.ch-testi-row,.ch-for-grid{grid-template-columns:1fr} .ch-split{gap:36px} .ch-tl{grid-template-columns:1fr;gap:10px;padding:24px 0} .ch-team-card{padding:32px 24px} .ch-price-num{font-size:64px} .ch-btn{width:100%;max-width:320px} .ch-stat{border-right:none;border-bottom:1px solid var(--ch-rule)} .ch-stat:last-child{border-bottom:none} .ch-get-row{grid-template-columns:1fr} .ch-guarantee{padding:36px 24px} }