/* ============================================================ sp-foundations.css — @font-face, scoped reset, base typography All rules scoped to .sp-app to avoid leaking into legacy pages. ============================================================ */ /* ----- @font-face declarations ----- */ @font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ----- Scoped reset (.sp-app) ----- */ .sp-app *, .sp-app *::before, .sp-app *::after { box-sizing: border-box; } /* ----- Base typography ----- */ .sp-app { font-family: var(--sp-font-body); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--sp-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sp-app h1, .sp-app h2, .sp-app h3, .sp-app h4, .sp-app h5, .sp-app h6 { font-family: var(--sp-font-heading); font-weight: 700; letter-spacing: var(--sp-tracking-heading); line-height: 1.2; } .sp-app h1 { font-size: 28px; } .sp-app h2 { font-size: 22px; } .sp-app h3 { font-size: 18px; } .sp-app h4 { font-size: 16px; } /* ----- Reduced motion ----- */ @media (prefers-reduced-motion: reduce) { .sp-app *, .sp-app *::before, .sp-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ Atmosphere — unified background system Activated by adding .sp-atmo to . Replaces the legacy

approach. ============================================================ */ /* Hide legacy div when new atmosphere is active */ body.sp-atmo .coach-next__bg { display: none; } /* Aurora + base gradient */ body.sp-atmo::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at var(--sp-atmo-lime-pos), var(--sp-atmo-lime), transparent 36%), radial-gradient(circle at var(--sp-atmo-teal-pos), var(--sp-atmo-teal), transparent 32%), var(--sp-atmo-base); z-index: -2; pointer-events: none; } /* Texture overlay */ body.sp-atmo::after { content: ""; position: fixed; inset: 0; background-image: repeating-linear-gradient( 45deg, var(--sp-atmo-texture-color) 0, var(--sp-atmo-texture-color) 1px, transparent 1px, transparent var(--sp-atmo-texture-spacing) ); opacity: var(--sp-atmo-texture-opacity); z-index: -1; pointer-events: none; }