/* ============================================================ TWEAK MODES — three expressive direction switches Applied as classes on : cf-mood-*, cf-voice-*, cf-density-* ============================================================ */ /* ───── MOOD: Vivid ───── */ /* Pull more saturated brand palette forward — purple gradients on CTAs and headers, ruby/magenta accents come out of decoration and into surfaces, dark sections shift toward saturated indigo. */ .cf-mood-vivid .cf-hero-ornament { opacity:.85; filter:blur(28px); } .cf-mood-vivid .btn-primary { background: linear-gradient(135deg, #533afd 0%, #ea2261 60%, #f96bee 100%); border-color: transparent; } .cf-mood-vivid .btn-primary:hover { filter:brightness(1.08); } .cf-mood-vivid .cf-hero-title em { background: linear-gradient(90deg, #533afd 0%, #ea2261 55%, #f96bee 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .cf-mood-vivid .cf-eyebrow { color:#ea2261; } .cf-mood-vivid .cf-tier.featured { border-top: 3px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#533afd,#ea2261,#f96bee) border-box; border: 1px solid transparent; } .cf-mood-vivid .cf-tier-tag { background:#ffd7ef; color:#a4156a; border-color:#ffd7ef; } .cf-mood-vivid .cf-fields, .cf-mood-vivid .cf-final { background: radial-gradient(at 12% 18%, rgba(234,34,97,0.30) 0%, transparent 45%), radial-gradient(at 88% 80%, rgba(249,107,238,0.22) 0%, transparent 45%), #1c1e54; } .cf-mood-vivid .cf-final-viz .bar { box-shadow:0 0 24px rgba(83,58,253,0.45); } .cf-mood-vivid .cf-why-icon { background:linear-gradient(135deg,rgba(83,58,253,0.12),rgba(249,107,238,0.18)); color:#ea2261; } .cf-mood-vivid .cf-step.active .cf-step-num { background:linear-gradient(135deg,#533afd,#ea2261); border-color:transparent; } .cf-mood-vivid .cf-trust-tab.active { background:linear-gradient(135deg,#533afd,#ea2261); border-color:transparent; } .cf-mood-vivid .cf-progress-fill { background:linear-gradient(90deg,#533afd,#ea2261,#f96bee); } .cf-mood-vivid .cf-avatar { background:linear-gradient(135deg,#ea2261,#f96bee); } /* ───── MOOD: Mono ───── */ /* Strip color almost entirely. Near-black accents, no purple, very technical/financial. Decorative gradient hidden. */ .cf-mood-mono .cf-hero-ornament { display:none; } .cf-mood-mono .btn-primary { background:#061b31; border-color:#061b31; color:#fff; } .cf-mood-mono .btn-primary:hover { background:#0d253d; } .cf-mood-mono .btn-ghost { color:#061b31; border-color:var(--color-border); } .cf-mood-mono .cf-hero-title em { color:#061b31; } .cf-mood-mono .cf-eyebrow, .cf-mood-mono .cf-step.active h5, .cf-mood-mono .cf-tier-tag, .cf-mood-mono .cf-faq-item.open .cf-faq-q i { color:#061b31; } .cf-mood-mono .cf-tier-tag { background:#f6f9fc; border-color:var(--color-border); } .cf-mood-mono .cf-tier.featured { border-top-color:#061b31; } .cf-mood-mono .cf-trust-tab.active { background:#061b31; border-color:#061b31; } .cf-mood-mono .cf-step.active .cf-step-num { background:#061b31; border-color:#061b31; } .cf-mood-mono .cf-progress-fill { background:#061b31; } .cf-mood-mono .cf-why-icon { background:#f6f9fc; color:#061b31; } .cf-mood-mono .cf-pill-chip.purple { background:#f6f9fc; color:#061b31; border-color:var(--color-border); } .cf-mood-mono .cf-fields, .cf-mood-mono .cf-final { background:#0d253d; } .cf-mood-mono .cf-foot { background:#000; } .cf-mood-mono .cf-avatar { background:linear-gradient(135deg,#273951,#64748d); } .cf-mood-mono .cf-final-viz .bar { background:#fff !important; opacity:.85; } .cf-mood-mono .cf-final-viz .bar.b2 { opacity:.65; } .cf-mood-mono .cf-final-viz .bar.b3 { opacity:.55; } .cf-mood-mono .cf-final-viz .bar.b4 { opacity:.40; } .cf-mood-mono .cf-final-viz .bar.b6 { opacity:.30; } .cf-mood-mono .cf-final-viz .bar.b7 { opacity:.70; } .cf-mood-mono .cf-final-viz .bar.b8 { opacity:.35; } .cf-mood-mono .cf-final-viz .bar.b9 { opacity:.25; } /* ───── VOICE: Confident ───── */ /* Trade Stripe whisper-weight headlines for medium weight + relaxed tracking. Reads more conventional/SaaS and hits harder. */ .cf-voice-confident .cf-hero-title, .cf-voice-confident .cf-section-head h3, .cf-voice-confident .cf-faq-h h3, .cf-voice-confident .cf-final h3, .cf-voice-confident .cf-trust h4 { font-weight:500; letter-spacing:-0.01em; } .cf-voice-confident .cf-tier-price { font-weight:500; letter-spacing:-0.02em; } .cf-voice-confident .cf-stat .v, .cf-voice-confident .cf-metric .v, .cf-voice-confident .cf-final-stat .v { font-weight:500; } .cf-voice-confident .cf-step h5 { font-weight:500; } /* ───── VOICE: Display ───── */ /* Editorial serif headline. Italic. Old-money/financial-Times feel. */ .cf-voice-display .cf-hero-title, .cf-voice-display .cf-section-head h3, .cf-voice-display .cf-faq-h h3, .cf-voice-display .cf-final h3 { font-family: "Spectral", "Source Serif Pro", "Iowan Old Style", Georgia, serif; font-style: italic; font-weight:400; letter-spacing:-0.005em; font-feature-settings:"ss01" off; } .cf-voice-display .cf-hero-title em { font-style:italic; } .cf-voice-display .cf-tier-price { font-family:"Spectral",Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-0.01em; } /* ───── DENSITY: Airy ───── */ .cf-density-airy .cf-hero { padding-top:120px; padding-bottom:88px; } .cf-density-airy .cf-trust { padding:96px 24px; } .cf-density-airy .cf-why, .cf-density-airy .cf-process, .cf-density-airy .cf-fields, .cf-density-airy .cf-pricing, .cf-density-airy .cf-test, .cf-density-airy .cf-faq { padding:120px 24px; } .cf-density-airy .cf-final { padding:140px 24px; } .cf-density-airy .cf-section-head { margin-bottom:64px; } .cf-density-airy .cf-section-head h3 { font-size:40px; letter-spacing:-0.8px; } .cf-density-airy .cf-table-head, .cf-density-airy .cf-table-row { padding:14px 18px; } .cf-density-airy .cf-why-card { padding:32px; } .cf-density-airy .cf-tier { padding:36px; } .cf-density-airy .cf-step { padding:20px 0; } .cf-density-airy .cf-faq-q { padding:24px 0; } /* ───── DENSITY: Compact ───── */ .cf-density-compact .cf-hero { padding-top:48px; padding-bottom:36px; } .cf-density-compact .cf-trust { padding:40px 24px; } .cf-density-compact .cf-why, .cf-density-compact .cf-process, .cf-density-compact .cf-fields, .cf-density-compact .cf-pricing, .cf-density-compact .cf-test, .cf-density-compact .cf-faq { padding:48px 24px; } .cf-density-compact .cf-final { padding:64px 24px; } .cf-density-compact .cf-section-head { margin-bottom:24px; } .cf-density-compact .cf-section-head h3 { font-size:26px; letter-spacing:-0.4px; } .cf-density-compact .cf-hero-title { font-size:44px; letter-spacing:-1.1px; } .cf-density-compact .cf-table-head { padding:6px 14px; font-size:9px; } .cf-density-compact .cf-table-row { padding:6px 14px; font-size:11px; } .cf-density-compact .cf-table-toolbar { padding:7px 14px; } .cf-density-compact .cf-why-card { padding:18px; } .cf-density-compact .cf-why-card h5 { font-size:16px; } .cf-density-compact .cf-tier { padding:20px; } .cf-density-compact .cf-tier-price { font-size:36px; } .cf-density-compact .cf-step { padding:8px 0; } .cf-density-compact .cf-faq-q { padding:12px 0; } .cf-density-compact .cf-step-card { padding:18px; min-height:0; } .cf-density-compact .cf-stat .v { font-size:32px; }