body { font-family: var(--font-body); color: var(--body); background: var(--white); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; } a:hover { color: inherit; } main { padding-top: var(--header-height); } main:has(.hero), main:has(.auth) { padding-top: 0; } /* The header is fixed, so an in-page anchor would otherwise scroll its target */ [id] { scroll-margin-top: calc(var(--header-height) + 16px); } /* Native smooth scroll is the fallback for when Lenis is not driving the page (reduced motion, or the script failing to load). Lenis sets .lenis on , which turns it off — the two fight each other otherwise. */ html { scroll-behavior: smooth; } html.lenis { scroll-behavior: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Lenis (v1.3.26) — inlined rather than loaded as a 9th stylesheet, it is under 600 bytes. Keep in step when the vendored js is updated. */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-body); color: var(--ink); line-height: var(--leading-tight); } .font-display, .eyebrow, .price-badge, .teacher-role { font-family: var(--font-display); } .h2 { font-weight: var(--weight-semibold); font-size: clamp(24px, 3vw, 36px); margin: 0 0 32px; } /* inherit — the accent word matches its heading instead of setting its own */ .h2 span, .text-gradient { font-weight: var(--weight-semibold); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-gradient-mix { background: var(--grad-mix); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lead { color: var(--body); font-size: 17px; font-weight: var(--weight-regular); } .eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--teal); margin: 0 0 16px; } .eyebrow-purple { color: var(--purple); } .eyebrow-teal { color: var(--teal); } .btn { --bs-btn-padding-y: 16px; --bs-btn-padding-x: 32px; --bs-btn-font-size: var(--text-sm); --bs-btn-font-weight: var(--weight-semibold); --bs-btn-line-height: 1; --bs-btn-border-radius: var(--radius-pill); --bs-btn-border-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease), filter var(--duration-base) var(--ease); } .btn:focus-visible { box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .25); } .btn-lg { --bs-btn-padding-y: 18px; --bs-btn-padding-x: 40px; --bs-btn-font-size: 14px; } .btn-sm { --bs-btn-padding-y: 10px; --bs-btn-padding-x: 24px; --bs-btn-font-size: var(--text-xs); } .btn-brand:hover, .btn-outline-brand:hover, .btn-white:hover, .btn-glass:hover, .btn-soft:hover, .btn-google:hover { transform: translateY(-2px); } .btn-brand { --bs-btn-color: var(--white); --bs-btn-hover-color: var(--white); --bs-btn-active-color: var(--white); background: var(--grad-brand); color: var(--white); } .btn-brand:hover, .btn-brand:focus, .btn-brand:active, .btn-brand:visited { color: var(--white); box-shadow: var(--shadow-md); filter: brightness(1.03); } .btn-outline-brand { --bs-btn-color: var(--navy); --bs-btn-hover-color: var(--navy); background: transparent; color: var(--navy); border: 2px solid rgba(var(--navy-rgb), .28); box-shadow: none; } .btn-outline-brand:hover { color: var(--navy); border-color: rgba(var(--navy-rgb), .5); } .btn-white { --bs-btn-color: var(--navy); --bs-btn-hover-color: var(--navy); background: var(--white); color: var(--navy); box-shadow: var(--shadow-sm); } .btn-white:hover { color: var(--navy); box-shadow: var(--shadow-md); } /* See-through pill with a gradient ring. border-image cannot do this: it ignores border-radius and squares off the pill. A padding-box/border-box pair cannot either, because a see-through fill lets the border-box gradient show through the middle. So the ring is a masked pseudo-element — the only way to get radius + gradient border + translucent fill at once. --btn-glass-fill is the frost. */ .btn-glass { --bs-btn-color: var(--navy); --bs-btn-hover-color: var(--navy); --btn-glass-fill: rgba(var(--white-rgb), .3); --btn-glass-ring: 2px; position: relative; background: var(--btn-glass-fill); color: var(--navy); border: 0; box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .btn-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--btn-glass-ring); background: var(--grad-ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .btn-glass:hover { --btn-glass-fill: rgba(var(--white-rgb), .34); color: var(--navy); box-shadow: var(--shadow-sm); } .btn-soft { --bs-btn-color: var(--white); --bs-btn-hover-color: var(--white); background: linear-gradient(90deg, rgba(154,140,228,.85), rgba(119,211,199,.85)); color: var(--white); box-shadow: none; } .btn-soft:hover { color: var(--white); box-shadow: var(--shadow-sm); filter: brightness(1.03); } .btn-google { --bs-btn-color: var(--navy); --bs-btn-hover-color: var(--navy); width: 100%; background: var(--white); color: var(--navy); border-radius: var(--radius-md); padding: 16px; font-size: var(--text-md); text-transform: none; letter-spacing: 0; box-shadow: var(--shadow-sm); } .btn-google:hover { color: var(--navy); filter: brightness(1.03); background: var(--white); } .btn-google img, .btn-google svg { width: 20px; height: 20px; } .form-control, .form-select { border-radius: var(--radius-pill); border: 1.5px solid rgba(var(--navy-rgb), .18); padding: 16px 24px; font-size: var(--text-base); color: var(--navy); background-color: var(--white); transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; } .form-control::placeholder { color: var(--muted); opacity: .8; } .form-control:focus, .form-select:focus { border-color: var(--purple); box-shadow: 0 0 0 .2rem rgba(143, 134, 214, .18); } .form-label { font-size: 14px; font-weight: var(--weight-medium); color: var(--navy); margin-bottom: 8px; } .form-check-input:checked { background-color: var(--navy); border-color: var(--navy); } .form-check-input:focus { border-color: var(--purple); box-shadow: 0 0 0 .2rem rgba(143, 134, 214, .18); } textarea.form-control { border-radius: var(--radius-lg); } .modal-content { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } .modal-header { border-bottom: 0; padding: 26px 28px 0; } .modal-body { padding: 20px 28px 28px; } .modal-title { color: var(--navy); font-weight: var(--weight-semibold); } /* Vertical rhythm. 100px is the default every section gets for free — a page should only carry a padding rule where its composition genuinely differs (art that must sit tight to the section above, a panel that carries its own inset). Below lg it steps down, or the stacked layout reads as mostly gap. */ section, .section { padding: var(--section-y) 0; } .section-sm { padding: var(--section-y-sm) 0; } .section-lg { padding: var(--section-y-lg) 0; } section + section.section-tight { padding-top: 0; } .section-flush { padding: 0; } .list-check { list-style: none; margin: 0; padding: 0; } .list-check li { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 8px; font-size: var(--text-base); line-height: 1.5; } .list-check li img, .list-check li svg { flex: 0 0 auto; margin-top: 3px; } /* ===================================================================== Layout guards Bootstrap fixes we need site-wide. Nothing here restyles Bootstrap — it only stops documented gutter behaviour from breaking a phone layout. ===================================================================== */ /* `g-5` sets the row's gutter to 48px, which the row spends as -24px of margin on each side. `.container` only pads by 12px (half the *default* gutter), so a g-5 row placed directly in a container hangs 12px past the viewport on both sides and the page scrolls sideways. The large gutter only ever buys column separation, and these columns are stacked below lg — so below lg the gutter is dropped to the default and the negative margin shrinks back to what the container's padding covers. Overriding the gutter variable rather than the margin keeps Bootstrap's own maths intact: it re-derives both the margin and the column padding. */ @media (max-width: 991.98px) { .container > .row.g-5, .container > .row.gx-5 { --bs-gutter-x: 1.5rem; } } /* `.btn` is `white-space: nowrap` with 32-40px of side padding, which is right on desktop — a wrapped pill looks broken. On a phone the same rule means any long label is wider than the column holding it and pushes the whole page sideways ("Download Free Exam Resources" measured 358px inside a 322px card). Below md the label is allowed to wrap and the side padding comes down, so a button shrinks to its container instead of overflowing it. `max-width` is the actual guard: it holds even for a single unbreakable word. */ @media (max-width: 767.98px) { .btn { --bs-btn-padding-x: 24px; max-width: 100%; white-space: normal; text-wrap: balance; } .btn-lg { --bs-btn-padding-x: 28px; } } /* ===================================================================== Micro-interactions One place for the small feedback states, so every page behaves the same way. Anything page-specific belongs in main.css, not here. ===================================================================== */ /* Press feedback. The lift on :hover lives with each button variant; this is the settle back down on click, applied once for every variant. */ .btn:active { transform: translateY(1px); } /* One focus ring for everything reachable by keyboard. :focus-visible so a mouse press never shows it — .btn already sets its own, which wins by coming later in this file for that selector. */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: var(--radius-sm); } /* Inputs use a ring rather than an outline so the rounded corners follow the field. Buttons and fields therefore look consistent when tabbed to. */ .form-control:focus-visible, .form-select:focus-visible { outline: none; } /* The trial card sits on a saturated gradient, where the default purple glow is invisible. White reads on every panel colour. */ .trial-card .form-control:focus, .trial-card .form-select:focus { border-color: transparent; box-shadow: 0 0 0 3px rgba(var(--white-rgb), .65); } /* Icon tiles: a small scale on hover of the card that contains them. The transform sits on the img so the tile's own background stays put. */ .pain-icon img, .step-circle img, .lose-ico img { transition: transform var(--duration-base) var(--ease); } .pain:hover .pain-icon img, .step:hover .step-circle img, .lose-card:hover .lose-ico img { transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; transition: none; } .pain-icon img, .step-circle img, .lose-ico img { transition: none; } .pain:hover .pain-icon img, .step:hover .step-circle img, .lose-card:hover .lose-ico img { transform: none; } }