/* ─────────────────────────────────────────────────────────────── Tweak overrides — applied via body classes from tweaks.jsx. All rules here are additive; removing the class reverts cleanly. ─────────────────────────────────────────────────────────────── */ /* ─── Density ─────────────────────────────────────────────────── */ body.density-compact .section { padding: clamp(48px, 5vw, 72px) 0; } body.density-compact .hero, body.density-compact .hero--saas { padding-top: clamp(64px, 6vw, 88px); padding-bottom: clamp(48px, 5vw, 72px); } body.density-compact .container { padding-left: 24px; padding-right: 24px; } body.density-roomy .section { padding: clamp(120px, 13vw, 200px) 0; } body.density-roomy .hero, body.density-roomy .hero--saas { padding-top: clamp(140px, 14vw, 220px); padding-bottom: clamp(120px, 13vw, 200px); } /* ─── Corner style ────────────────────────────────────────────── */ body.radius-sharp { --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; } body.radius-sharp .btn, body.radius-sharp .btn--primary, body.radius-sharp .btn--ghost { border-radius: 4px; } body.radius-sharp .vtile, body.radius-sharp .vtile--mini, body.radius-sharp .vtile--ba, body.radius-sharp .vtile--spot, body.radius-sharp .vtile--pipe, body.radius-sharp .vtile--pipeline, body.radius-sharp .vtile__badge, body.radius-sharp .vtile__badge--sm, body.radius-sharp .vtile__badge--spot, body.radius-sharp .phonemock, body.radius-sharp .phonemock__screen, body.radius-sharp .phonemock__cta, body.radius-sharp .channel, body.radius-sharp .ba__card, body.radius-sharp .need-card, body.radius-sharp .right-card, body.radius-sharp .still-item, body.radius-sharp .roi-card, body.radius-sharp .roi-chip, body.radius-sharp .hpipe-card, body.radius-sharp .spot__chip, body.radius-sharp .convs-stat, body.radius-sharp .howstep, body.radius-sharp .engine { border-radius: 6px !important; } body.radius-round { --r-sm: 14px; --r-md: 22px; --r-lg: 32px; --r-xl: 44px; } body.radius-round .btn, body.radius-round .btn--primary, body.radius-round .btn--ghost, body.radius-round .btn--sm, body.radius-round .btn--lg, body.radius-round .roi-chip, body.radius-round .nav__switch-opt, body.radius-round .eyebrow { border-radius: 999px !important; } body.radius-round .vtile, body.radius-round .vtile--mini, body.radius-round .vtile--ba, body.radius-round .vtile--spot, body.radius-round .vtile--pipe, body.radius-round .vtile--pipeline, body.radius-round .ba__card, body.radius-round .need-card, body.radius-round .right-card, body.radius-round .still-item, body.radius-round .roi-card, body.radius-round .convs-stat, body.radius-round .howstep, body.radius-round .engine, body.radius-round .channel, body.radius-round .hpipe-card, body.radius-round .spot__chip, body.radius-round .phonemock__screen { border-radius: 28px !important; } body.radius-round .phonemock { border-radius: 44px !important; } /* ─── Background grid toggle ──────────────────────────────────── */ body.no-grid .bg-grid, body.no-grid .section--dark { background-image: none !important; } body.no-grid .section--dark { background: var(--navy) !important; } body.no-grid .section--light::before { display: none; } /* ─── Motion / animation toggle ───────────────────────────────── */ body.no-motion *, body.no-motion *::before, body.no-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } /* ─── Accent application ───────────────────────────────────────── Accent is set via inline CSS vars on by JS: --orange / --orange-2 / --brand-mark-bg These rules add accent treatments that ripple to extra surfaces. ─────────────────────────────────────────────────────────────── */ body[data-accent] .ba__arrow-badge .logo-mark rect, body[data-accent] .hpipe__engine-core .logo-mark rect, body[data-accent] .pipeline__engine .logo-mark rect, body[data-accent] .phonemock__brand .logo-mark rect, body[data-accent] .nav__brand .logo-mark rect { fill: var(--orange); } /* ─── Display font ──────────────────────────────────────────────── Font is applied via --f-display override on by JS. We retune line-height for serif options that have taller x-heights. ─────────────────────────────────────────────────────────────── */ body[data-font="fraunces"] h1, body[data-font="fraunces"] h2, body[data-font="fraunces"] h3, body[data-font="instrument"] h1, body[data-font="instrument"] h2, body[data-font="instrument"] h3, body[data-font="dmserif"] h1, body[data-font="dmserif"] h2, body[data-font="dmserif"] h3 { letter-spacing: -0.015em; font-weight: 600; } body[data-font="instrument"] h1, body[data-font="instrument"] h2 { font-style: italic; font-weight: 400; } body[data-font="dmserif"] h1 { font-weight: 400; }