/* Longplay — Bold theme overlay for the main (chrome-based) pages. Layered ON TOP of the DS styles.css + site.css. Activated by adding `bold-theme` to . Reuses DS tokens (--lp-*, --font-*). Pairs with site/bold-theme.js for scroll reveal + heading parallax. */ /* ---------- Gradient + grid background ---------- */ body.bold-theme.lp-surface, body.bold-theme { background: radial-gradient(120% 90% at 12% -8%, rgba(93,140,220,0.42), transparent 62%), radial-gradient(90% 70% at 100% 8%, rgba(120,166,232,0.14), transparent 58%), linear-gradient(135deg, #A9C2EA 0%, #C9DAF2 28%, #E9F1FB 60%, #FFFFFF 100%) !important; background-attachment: fixed !important; } /* grid overlay removed site-wide */ body.bold-theme::before { content: none; } body.bold-theme #root { position: relative; z-index: 1; } /* transparent sections so the grid reads through; cards keep their own bg */ body.bold-theme .logo-strip-wrap { background: transparent !important; border-color: rgba(27,34,82,0.10) !important; } /* ---------- Sticky header: lighter, on-gradient ---------- */ body.bold-theme .site-header { background: rgba(231,237,247,0.78) !important; backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid rgba(27,34,82,0.10); } /* ---------- Typography: bigger, tighter, italic emphasis ---------- */ body.bold-theme .lp-display { letter-spacing: -0.015em; line-height: 0.98; } body.bold-theme .h-hero { font-size: clamp(40px, 6vw, 84px); line-height: 0.94; } body.bold-theme .h-xl { font-size: clamp(29px, 3.8vw, 54px); } body.bold-theme .h-lg { font-size: clamp(22px, 2.6vw, 33px); } body.bold-theme .lp-display em, body.bold-theme .section-title em, body.bold-theme h1 em, body.bold-theme h2 em { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: 0; background: none; color: var(--lp-accent-word); -webkit-text-fill-color: var(--lp-accent-word); padding: 0; } body.bold-theme .lede { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.62; } /* eyebrow accent rule */ body.bold-theme .section-title .lp-eyebrow, body.bold-theme .lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--lp-teal); } body.bold-theme .section-center .lp-eyebrow { justify-content: center; } body.bold-theme .section-title .lp-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--lp-teal); display: inline-block; } /* a touch more air between sections */ body.bold-theme .section { padding-top: clamp(58px, 8vh, 102px); padding-bottom: clamp(58px, 8vh, 102px); } /* ---------- Cards: rounded white panels w/ soft depth ---------- */ body.bold-theme .lp-card { border-radius: 22px !important; box-shadow: 0 30px 70px -50px rgba(27,34,82,0.5) !important; border: 1px solid rgba(27,34,82,0.07) !important; background: #fff !important; } body.bold-theme .lp-card--dark { background: var(--lp-navy) !important; } body.bold-theme .stat-strip.lp-card, body.bold-theme .faq-item.lp-card, body.bold-theme .ring-tip.lp-card, body.bold-theme .nav-menu.lp-card { box-shadow: 0 24px 60px -44px rgba(27,34,82,0.55) !important; } /* stat values pop */ body.bold-theme .stat-value { font-size: clamp(40px, 4.4vw, 70px) !important; line-height: 0.95; } /* ---------- Scroll reveal (transform-only; content visible if JS pauses) ---------- */ body.bold-theme .bt-reveal { transform: translateY(26px); transition: transform 0.75s cubic-bezier(.2,.7,.2,1); will-change: transform; } body.bold-theme .bt-reveal.in { transform: none; } body.bold-theme .bt-reveal[data-d="1"] { transition-delay: 0.06s; } body.bold-theme .bt-reveal[data-d="2"] { transition-delay: 0.12s; } body.bold-theme .bt-reveal[data-d="3"] { transition-delay: 0.18s; } body.bold-theme .bt-reveal[data-d="4"] { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { body.bold-theme .bt-reveal { transform: none !important; } body.bold-theme [data-bt-parallax] { transform: none !important; } } /* headline parallax target stays visible; JS nudges transform */ body.bold-theme .bt-rise { will-change: transform; } /* ---------- CTA band device float ---------- */ body.bold-theme .cta-band { position: relative; overflow: clip; }