/* Checkout v2 shell styles */ /* ========================================================================== REM CONVERSION REFERENCE This file is plain CSS (not .scss.liquid), so the per-theme `rem(N)` SCSS helper is unavailable here. Hand-written rem values are used so the checkout page matches the rest of the workspace's "Firefox Zoom Text Only" treatment. Divisor: 1rem = 16px (ibs_checkout has no html font-size override, same as Serenity). Conversion reference (px -> rem at divisor 16): 5 -> 0.3125, 6 -> 0.375, 8 -> 0.5, 10 -> 0.625, 12 -> 0.75, 13 -> 0.8125, 14 -> 0.875, 15 -> 0.9375, 16 -> 1, 18 -> 1.125, 20 -> 1.25, 24 -> 1.5, 27 -> 1.6875, 30 -> 1.875, 34 -> 2.125, 40 -> 2.5, 44 -> 2.75, 49 -> 3.0625, 50 -> 3.125, 65 -> 4.0625. Letter-spacing: -0.28 -> -0.0175, -1.17 -> -0.073125, -1.32 -> -0.0825, -1.47 -> -0.091875, -1.96 -> -0.1225. Kept in px per the workspace rulebook: JS-measured offset fallbacks (--course-header-height, --course-preview-banner-height, --course-shell-side-padding), image dimensions (logo height, avatar size), border widths, border-radii, shadow offsets/blur, and @media breakpoint values. See .cursor/plans/firefox_zoom_text_only_course_product_and_checkout.plan.md and the "SCSS Compilation: Confirmed Working In This Workspace" section in AGENTS.md for context. ========================================================================== */ body#encore-theme.checkout-v2-page { --checkout-shell-bg: #f2f2f2; background: var(--checkout-shell-bg); overflow-x: hidden; --course-header-height: 65px; --course-preview-banner-height: 0px; --course-shell-side-padding: 40px; /* Natural max width of the two-column layout at desktop: 524px widget + 16px (1rem) gap + 468px info = 1008px. The symmetric gutter below centers a band of this width, so the content (which never exceeds it) is centered in the viewport instead of left-packed within a wider band. 1008px / 16 = 63rem. */ --checkout-v2-content-max: 63rem; --checkout-v2-content-side-padding: 40px; --checkout-v2-content-gutter: max( var(--checkout-v2-content-side-padding), calc((100vw - var(--checkout-v2-content-max)) / 2) ); } body#encore-theme.checkout-v2-page .checkout-v2-main { min-height: 100vh; padding-top: var(--course-header-height, 65px); } /* Layout-level flash (snippets/alert_messages.liquid) is a direct child rendered ABOVE the fixed .course-header, so it is trapped behind the header with no scroll room to reveal it (min scroll is 0; only an iOS rubber-band overscroll briefly exposes it). Offset it into the below-header zone using the same var .checkout-v2-main uses, and drop main's own top padding while a flash is present so checkout content stays exactly put (no doubled header-height gap). Scoped with > to the single body-level flash (rendered in exactly one place, never mutated by JS), so no-flash loads are unaffected. The body is a BFC (overflow-x: hidden), which keeps the margin-top from collapsing. See .cursor/reference/kajabi_runtime_contract_snippets.reference.md */ body#encore-theme.checkout-v2-page > .flash-messages { margin-top: var(--course-header-height, 65px); } body#encore-theme.checkout-v2-page > .flash-messages ~ .checkout-v2-main { padding-top: 0; } body#encore-theme.checkout-v2-page > .flash-messages + .flash-messages { margin-top: 0; /* stacked success+error: only the first clears the header */ } .checkout-v2-page .course-header { position: fixed; top: var(--course-preview-banner-height); left: 0; right: 0; width: 100%; z-index: 1000; background: var(--checkout-shell-bg); border-bottom: 0; padding: 0.9375rem var(--course-shell-side-padding); } .checkout-v2-page .course-header__inner { width: 100%; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .checkout-v2-page .course-header__brand { display: flex; align-items: center; min-width: 0; } .checkout-v2-page .course-header__logo-link { display: inline-flex; color: #1c1f23; text-decoration: none; line-height: 1; } .checkout-v2-page .course-header__logo-svg { width: 100%; height: 100%; display: block; vertical-align: middle; } .checkout-v2-page .course-header__logo-img, .checkout-v2-page .course-header__logo-svg { width: auto; height: 35px; max-width: none; } /* Top-right account prompt + login link. Lives in the header only (the embedded checkout widget and its "Sign up for free" button are untouched). `.course-header__inner` is flex/space-between/align-items:center, so this block sits in the right slot and is vertically aligned with the logo. */ .checkout-v2-page .course-header__account { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 0.125rem 0.375rem; /* 2px row gap / 6px column gap when wrapped */ min-width: 0; text-align: right; font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.9375rem; /* 15px */ line-height: 1.25; } .checkout-v2-page .course-header__account-prompt { color: #454749; /* AA/AAA-cleared muted secondary text (shared with Serenity) */ font-weight: 400; } .checkout-v2-page .course-header__account-link { color: #1c1f23; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; /* Neutralize the global `a:hover { filter: brightness(115%) }` so the dark link does not wash out on hover; use a deterministic hover instead. */ -webkit-filter: none; filter: none; transition: color 120ms ease; } .checkout-v2-page .course-header__account-link:hover, .checkout-v2-page .course-header__account-link:focus { color: #000000; text-decoration: underline; -webkit-filter: none; filter: none; } .checkout-v2-page .checkout-v2-section { background: #f2f2f2; } .checkout-v2-page .checkout-v2-container { width: 100%; margin: 0; padding: 3.125rem var(--checkout-v2-content-gutter) 1.5rem; } .checkout-v2-page .checkout-v2-intro { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 1.875rem; color: #1c1f23; } .checkout-v2-page .checkout-v2-intro__eyebrow { margin: 0 0 1.25rem; text-transform: uppercase; font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.875rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; } .checkout-v2-page .checkout-v2-intro__title { margin: 0; color: #1c1f23; font-family: "p22-mackinac-pro", "Times New Roman", serif; font-size: 3.0625rem; font-weight: 500; letter-spacing: -0.091875rem; line-height: 1; } .checkout-v2-page .checkout-v2-intro__subtitle { margin: 0; color: #1c1f23; font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.2; } /* Metadata row directly under the subtitle. Two facts (price + access period) separated by a middle dot. Every inheritable text property is set explicitly here per the design-token-lock policy in AGENTS.md so nothing resolves from body / stock rules. Flex + wrap keeps the row graceful under text-only zoom and on narrow viewports; the dot separator is aria-hidden so screen readers read "$299 1 year of access" as two adjacent facts. */ .checkout-v2-page .checkout-v2-intro__meta { margin: 0.25rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; color: #1c1f23; font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; } .checkout-v2-page .checkout-v2-intro__meta-price { font-family: inherit; font-size: inherit; font-weight: 600; letter-spacing: 0; line-height: inherit; color: inherit; } .checkout-v2-page .checkout-v2-intro__meta-sep { font-family: inherit; font-size: inherit; font-weight: 400; letter-spacing: 0; line-height: inherit; color: #6b6d70; } .checkout-v2-page .checkout-v2-intro__meta-access { font-family: inherit; font-size: inherit; font-weight: 500; letter-spacing: 0; line-height: inherit; color: inherit; } /* --------------------------------------------------------------------------- Launch-week offer (promo_config > checkout_promo_active). Replaces the plain "$299 - 1 year of access" meta line while the promo is on: the current price (with the list price struck through) and the savings pill share a row, with the access period on the line beneath. On narrow viewports the pill wraps to its own line below the price (price -> pill -> access) via flex-wrap, so no width breakpoint is needed. Presentation only, above the embedded checkout widget - it never touches the widget, Stripe, or the payment flow (mirrors the "$299" line it replaces). Every inheritable text property is set explicitly per the design-token-lock policy in AGENTS.md so nothing resolves from body / stock rules; decorative dots/icon are aria-hidden. --------------------------------------------------------------------------- */ .checkout-v2-page .checkout-v2-intro__offer { margin: 0.25rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; } .checkout-v2-page .checkout-v2-intro__price-row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; /* center the pill against the larger price */ gap: 0.5rem 1rem; /* 8px row (pill wrapped below) / 16px column (price to pill) */ } /* Vertically centers the current + struck-through prices with each other; the parent row (align-items: center) then centers the pill too, so $199, $299, and the pill all share one horizontal centerline. */ .checkout-v2-page .checkout-v2-intro__price-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .checkout-v2-page .checkout-v2-intro__price-now { font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.75rem; /* 28px */ font-weight: 700; letter-spacing: -0.0175rem; /* -0.28px */ line-height: 1.1; color: #1c1f23; /* Optical centering: at this size sofia-pro's glyph sits ~0.09em low within its line box, so flex box-centering leaves $199 visually bottom-aligned relative to the smaller $299 and the pill (whose smaller glyphs show a negligible <1px offset). Nudge it up so all three sit on one visual centerline. em-based so it tracks the font under text-only zoom. Calibrated live against the real font - the local harness uses a fallback font and cannot reproduce this metric. Relative offset only (does not affect the flex box used for centering or the line below). */ position: relative; top: -0.09em; } .checkout-v2-page .checkout-v2-intro__price-was { font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.0625rem; /* 17px - clearly smaller than the current price */ font-weight: 400; letter-spacing: 0; line-height: 1.2; color: #6b6d70; /* muted, shared with the meta separator */ text-decoration-line: line-through; text-decoration-thickness: 1px; /* keep the strike crisp at the larger size */ } .checkout-v2-page .checkout-v2-intro__access-row { margin: 0; font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: #1c1f23; } /* Savings pill. Solid green fill with white text so it pops off the light-gray (#f2f2f2) checkout page - a pale fill blended into the background. The green is in the brand family (a brighter sibling of the deep footer green #1b3d2f); white on #177245 is ~6:1 (AA at this size). A subtle shadow lifts it off the page. Asymmetric vertical padding follows the pill/badge optical-centering rule in AGENTS.md (Sofia Pro sits low). */ .checkout-v2-page .checkout-v2-intro__promo-pill { display: inline-flex; align-items: center; gap: 0.4375rem; /* 7px icon-to-text */ padding: 0.3125rem 0.75rem 0.4375rem; /* 5 / 12 / 7 */ border-radius: 999px; background: #177245; color: #ffffff; font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.875rem; /* 14px */ font-weight: 600; letter-spacing: 0; line-height: 1.3; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .checkout-v2-page .checkout-v2-intro__promo-icon { flex: 0 0 auto; font-size: 0.875rem; /* match the pill text */ line-height: 1; color: inherit; /* Optical nudge: the fa-clock glyph sits ~1px high relative to the pill text within its box, so flex centering leaves it looking high. Drop it 1px so its center matches the text. Relative offset only (does not disturb the pill's flex centering) - the FA-icon counter-compensation pattern in AGENTS.md. Calibrated live against the real Font Awesome font. */ position: relative; top: 1px; } .checkout-v2-page .checkout-v2-intro__promo-text { /* Let the copy wrap to a second line inside the pill on very narrow screens instead of overflowing the shell; the code and date stay unbroken below. */ min-width: 0; } .checkout-v2-page .checkout-v2-intro__promo-code, .checkout-v2-page .checkout-v2-intro__promo-ends { white-space: nowrap; } .checkout-v2-page .checkout-v2-intro__promo-code { font-weight: 700; letter-spacing: 0.02em; /* space the coupon code so it reads as a token */ } .checkout-v2-page .checkout-v2-intro__promo-inner-sep { color: inherit; opacity: 0.6; /* softer dot between the two facts inside the pill */ } /* Checkout-scoped visually-hidden helper. Keeps the "Was " prefix off-screen so the strikethrough price reads as "$199 Was $299" to assistive tech rather than an ambiguous "$199 $299" (strikethrough is not reliably announced). */ .checkout-v2-page .checkout-v2-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .checkout-v2-page .checkout-v2-layout { --checkout-v2-card-radius: 15px; --checkout-v2-card-shadow: 0 0 16px rgba(0, 0, 0, 0.25); --checkout-v2-card-border: 1px solid #d8d8d8; display: grid; grid-template-columns: minmax(320px, 524px) minmax(300px, 425px); justify-content: start; gap: 1rem; align-items: start; margin-left: 0; margin-right: 0; } .checkout-v2-page .checkout-v2-layout > .checkout-v2-widget-column, .checkout-v2-page .checkout-v2-layout > .checkout-v2-info-column { padding-left: 0; padding-right: 0; margin-bottom: 0; } .checkout-v2-page .checkout-v2-widget-column, .checkout-v2-page .checkout-v2-info-column { width: 100%; max-width: none; float: none; flex: none; padding-top: 0; } .checkout-v2-page .checkout-v2-widget-column .kjb-embedded-checkout { width: 100%; } .checkout-v2-page .checkout-v2-widget-column .embedded-checkout.sage-scoped, .checkout-v2-page .checkout-v2-widget-column .embedded-checkout.sage-scoped .embedded-checkout__body, .checkout-v2-page .checkout-v2-widget-column .card { border-radius: var(--checkout-v2-card-radius) !important; } .checkout-v2-page .checkout-v2-widget-column .embedded-checkout.sage-scoped { border: var(--checkout-v2-card-border); box-shadow: var(--checkout-v2-card-shadow); background: #ffffff; } .checkout-v2-page .checkout-v2-info-stack { display: flex; flex-direction: column; gap: 1rem; height: auto; } .checkout-v2-page .checkout-v2-card { background: #ffffff; border-radius: var(--checkout-v2-card-radius); border: var(--checkout-v2-card-border); box-shadow: var(--checkout-v2-card-shadow); padding: 1.5rem 1.5rem 1.25rem; color: #1c1f23; display: flex; flex-direction: column; min-height: 0; } .checkout-v2-page .checkout-v2-card__heading-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .checkout-v2-page .checkout-v2-card__title { margin: 0; font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.125rem; font-weight: 500; line-height: 1.3; } .checkout-v2-page .checkout-v2-card__meta { font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.8125rem; font-weight: 400; line-height: 1.2; white-space: nowrap; } .checkout-v2-page .checkout-v2-experts { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; } .checkout-v2-page .checkout-v2-scroll-fade { --checkout-scroll-fade-height: 48px; --checkout-scroll-fade-duration: 120ms; --checkout-scroll-fade-bg: #ffffff; position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; border-radius: calc(var(--checkout-v2-card-radius) - 2px); overflow: hidden; } .checkout-v2-page .checkout-v2-scroll-region { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .checkout-v2-page .checkout-v2-scroll-fade--experts { margin-top: 0.875rem; } .checkout-v2-page .checkout-v2-scroll-fade--learn { margin-top: 0.625rem; } .checkout-v2-page .checkout-v2-scroll-fade::before, .checkout-v2-page .checkout-v2-scroll-fade::after { content: ""; position: absolute; left: 0; right: 0; height: var(--checkout-scroll-fade-height); opacity: 0; pointer-events: none; z-index: 2; transition: opacity var(--checkout-scroll-fade-duration) ease; } .checkout-v2-page .checkout-v2-scroll-fade::before { top: 0; background: var(--checkout-scroll-fade-bg); -webkit-mask-image: linear-gradient(to bottom, #000000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000000 0%, transparent 100%); } .checkout-v2-page .checkout-v2-scroll-fade::after { bottom: 0; background: var(--checkout-scroll-fade-bg); -webkit-mask-image: linear-gradient(to top, #000000 0%, transparent 100%); mask-image: linear-gradient(to top, #000000 0%, transparent 100%); } .checkout-v2-page .checkout-v2-scroll-fade.has-overflow:not(.is-at-top)::before { opacity: 1; } .checkout-v2-page .checkout-v2-scroll-fade.has-overflow:not(.is-at-bottom)::after { opacity: 1; } .checkout-v2-page .checkout-v2-experts__item { display: flex; align-items: center; gap: 0.625rem; margin: 0; padding: 0 0 0.625rem; } .checkout-v2-page .checkout-v2-experts__item:last-child { padding-bottom: 0; } .checkout-v2-page .checkout-v2-experts__avatar { --checkout-expert-avatar-size: 60px; --checkout-expert-avatar-bg: #e8e3db; --checkout-expert-avatar-scale: 1.4; --checkout-expert-avatar-shift-y: 15px; width: var(--checkout-expert-avatar-size); height: var(--checkout-expert-avatar-size); border-radius: 999px; background: var(--checkout-expert-avatar-bg); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; } .checkout-v2-page .checkout-v2-experts__avatar-img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform: translateY(var(--checkout-expert-avatar-shift-y)) scale(var(--checkout-expert-avatar-scale)); transform-origin: center center; display: block; } .checkout-v2-page .checkout-v2-experts__meta { min-width: 0; } .checkout-v2-page .checkout-v2-experts__name { margin: 0; color: #1c1f23; font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.3; } .checkout-v2-page .checkout-v2-experts__role { margin: 0; color: #1c1f23; font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.8125rem; font-weight: 400; line-height: 1.3; } .checkout-v2-page .checkout-v2-learn-list { margin-top: 0; flex: 1 1 auto; min-height: 0; } .checkout-v2-page .checkout-v2-learn-list ol { margin: 0; padding-left: 1.6875rem; list-style-position: outside; } .checkout-v2-page .checkout-v2-learn-list li::marker { font-variant-numeric: tabular-nums; } .checkout-v2-page .checkout-v2-learn-list li { color: #1c1f23; font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.875rem; font-weight: 400; line-height: 1.4; margin-bottom: 0.125rem; } /* Diaphragmatic Breathing Tutorial and IBS Resources are Kajabi posts 16 and 17 but are presented as supplementary content, not lessons. The divider labels the group boundary; the extras list drops the numbered-marker chrome so these read as "included, not counted." See `.cursor/plans/supplementary_content_reclassification_15_lessons.plan.md`. */ .checkout-v2-page .checkout-v2-learn-list__divider { margin: 0.875rem 0 0.375rem; color: #6b6f73; font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.6875rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; } .checkout-v2-page .checkout-v2-learn-list__extras { list-style: none; margin: 0; padding: 0; } .checkout-v2-page .checkout-v2-learn-list__extras li { color: #1c1f23; font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.875rem; font-weight: 400; line-height: 1.4; margin-bottom: 0.125rem; } /* Slim checkout footer (snippets/checkout_footer.liquid). A trimmed, understated derivative of Serenity's green `.course-footer`: legal links + medical disclaimer only, no brand fill / logo / social icons. It sits on the shell background so it reads as quiet page furniture, not a section that pops. Shares the content gutter so its left edge lines up with the checkout content band. Every inheritable text property is set explicitly per the design-token-lock policy in AGENTS.md (never inherit from body / stock). */ .checkout-v2-page .checkout-v2-footer { background: transparent; border-top: 1px solid #e5e2dd; padding: 1.5rem var(--checkout-v2-content-gutter) 2.5rem; } .checkout-v2-page .checkout-v2-footer__inner { width: 100%; } .checkout-v2-page .checkout-v2-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; /* 8px row / 24px column when wrapped */ } .checkout-v2-page .checkout-v2-footer__link { font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.8125rem; /* 13px */ font-weight: 500; letter-spacing: 0; line-height: 1.3; color: #454749; /* AA/AAA-cleared muted secondary text (shared with header) */ text-decoration: none; /* Neutralize the global `a:hover { filter: brightness(115%) }` so the muted link does not wash out; use a deterministic hover instead. */ -webkit-filter: none; filter: none; transition: color 120ms ease; } .checkout-v2-page .checkout-v2-footer__link:hover, .checkout-v2-page .checkout-v2-footer__link:focus { color: #1c1f23; text-decoration: underline; text-underline-offset: 2px; -webkit-filter: none; filter: none; } .checkout-v2-page .checkout-v2-footer__disclaimer { margin: 0.875rem 0 0; /* 14px */ /* No max-width: the disclaimer fills its container, which the gutter padding already constrains to the checkout content column, so it lines up with the links / content band above and only wraps when that column is narrow. */ color: #6b6d70; /* muted, understated */ font-family: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.75rem; /* 12px */ font-weight: 400; letter-spacing: 0; line-height: 1.5; } @media (min-width: 992px) { .checkout-v2-page .checkout-v2-layout { align-items: stretch; grid-template-columns: minmax(320px, 524px) 468px; } .checkout-v2-page .checkout-v2-info-stack { display: flex; flex-direction: column; gap: 1rem; height: auto; } .checkout-v2-page .checkout-v2-card--experts, .checkout-v2-page .checkout-v2-card--learn { /* Intentionally decoupled from checkout widget height for load stability; per AGENTS.md "Checkout v2 Layout Stability Decision". Card height stays in px; internal typography/spacing reflows via rem under text zoom and the scroll-fade architecture handles content overflow (checkout_v2.js recomputes overflow/fades from the live element size, so a taller card needs no JS change). 345px is ~25% taller than the prior 275px - more visible room in each scroll region, both cards kept equal. */ height: 345px; min-height: 345px; max-height: 345px; } } @media (max-width: 991px) { .checkout-v2-page .checkout-v2-intro__eyebrow { margin-bottom: 1rem; } body#encore-theme.checkout-v2-page { --course-header-height: 52px; } /* Compact header at tablet (parity with Serenity/Momentum): symmetric padding drives the rendered height to match the `--course-header-height` var so CSS, DOM, and JS-measured runtime value all agree (the JS in `checkout_v2.js` re-measures and overwrites the var post-mount; this rule eliminates the pre-JS layout jump). 11px padding + 30px logo + 11px padding = 52px (no border-bottom on the checkout header). 0.6875rem = 11px at the project's 16px rem base. */ .checkout-v2-page .course-header { padding-top: 0.6875rem; padding-bottom: 0.6875rem; } .checkout-v2-page .course-header__logo-img, .checkout-v2-page .course-header__logo-svg { width: auto; height: 30px; } .checkout-v2-page .checkout-v2-container { padding-top: 2.5rem; padding-bottom: 1.25rem; } .checkout-v2-page .checkout-v2-intro__title { font-size: 2.75rem; letter-spacing: -0.0825rem; } .checkout-v2-page .checkout-v2-layout { grid-template-columns: minmax(300px, 1fr); gap: 1.25rem; } .checkout-v2-page .checkout-v2-info-column { order: 2; } .checkout-v2-page .checkout-v2-widget-column { order: 1; } .checkout-v2-page .checkout-v2-widget-column, .checkout-v2-page .checkout-v2-info-column { margin-bottom: 0; } .checkout-v2-page .checkout-v2-info-stack { height: auto; } .checkout-v2-page .checkout-v2-card--experts, .checkout-v2-page .checkout-v2-card--learn { flex: 0 0 auto; min-height: auto; } .checkout-v2-page .checkout-v2-scroll-region { max-height: none; overflow: auto; min-height: auto; } } @media (max-width: 767px) { .checkout-v2-page .checkout-v2-intro__eyebrow { margin-bottom: 0.75rem; } body#encore-theme.checkout-v2-page { --course-header-height: 52px; --course-shell-side-padding: 20px; --checkout-v2-content-side-padding: 20px; } .checkout-v2-page .course-header { display: flex; align-items: center; /* 3.25rem = 52px at the project's 16px rem base. */ min-height: 3.25rem; padding-top: 0; padding-bottom: 0; padding-left: var(--course-shell-side-padding); padding-right: var(--course-shell-side-padding); } .checkout-v2-page .course-header__inner { min-height: 3.25rem; } .checkout-v2-page .course-header__logo-img, .checkout-v2-page .course-header__logo-svg { width: auto; height: 25px; max-width: none; } /* On narrow viewports, shrink the account block and let the prompt wrap above the link so it never overlaps the logo lockup. The `__inner` gap keeps brand and account separated. */ .checkout-v2-page .course-header__account { flex: 0 1 auto; font-size: 0.8125rem; /* 13px */ line-height: 1.2; } .checkout-v2-page .checkout-v2-container { padding-top: 1.875rem; padding-bottom: 1rem; } .checkout-v2-page .checkout-v2-intro { margin-bottom: 1.5rem; } .checkout-v2-page .checkout-v2-intro__title { /* clamp floor/ceiling in rem so text-only zoom grows past the ceiling; vw middle term stays for viewport scaling. */ font-size: clamp(2.125rem, 12.5vw, 3.0625rem); letter-spacing: -0.1225rem; } .checkout-v2-page .checkout-v2-intro__subtitle { font-size: 0.9375rem; } .checkout-v2-page .checkout-v2-card { padding: 1.25rem 1.125rem 1rem; } } /* ============================================================================ PRINT STYLES ---------------------------------------------------------------------------- Goal: a simple, clean printout of the checkout - masthead, offer summary, featured experts, full curriculum, and the checkout widget (kept, since it carries the Terms of Use the buyer accepts). SAFETY (this is the checkout / Stripe / Kajabi payments page): - Every rule below is inside @media print, so it is ONLY consulted when printing. It is never applied during interactive on-screen use, so it cannot affect the checkout flow, Stripe, or Kajabi payments (which happen on screen, never while printing). - No rule changes the embedded checkout widget's size or on-screen layout (honoring the "Checkout v2 Layout Stability Decision" in ibs_checkout/AGENTS.md). In print the widget is left as-is; only its container column is allowed to span full width so it flows in one column. - This is plain CSS in a served file (no SCSS compile step). The stylesheet links are set to media="all" in global_head.liquid so this block is reachable in print; media="all" renders identically to screen. ============================================================================ */ @page { margin: 1.5cm; } @media print { /* Flatten the app shell to normal document flow. */ html, body#encore-theme.checkout-v2-page { background: #fff !important; margin: 0 !important; } body#encore-theme.checkout-v2-page .checkout-v2-main { min-height: 0 !important; padding-top: 0 !important; } /* Masthead: de-fix the header, keep a small dark logo at the top. */ .checkout-v2-page .course-header { position: static !important; width: auto !important; min-height: 0 !important; margin: 0 0 1.25rem !important; padding: 0 0 0.75rem !important; border: 0 !important; background: none !important; box-shadow: none !important; } .checkout-v2-page .course-header__inner { display: block !important; max-width: none !important; padding: 0 !important; } .checkout-v2-page .course-header__account { display: none !important; /* "Already have an account? Log in" - not for print */ } .checkout-v2-page .course-header__logo-link { color: #1c1f23 !important; } .checkout-v2-page .course-header__logo-svg { width: auto !important; height: 1.75rem !important; max-width: none !important; } /* Hide overlays / promo interstitials. The embedded checkout is inline (.kjb-embedded-checkout), NOT a .modal, so this never touches the widget. */ .checkout-v2-page .modal, .checkout-v2-page .social-share-modal, .checkout-v2-page .social-share-modal__backdrop, .checkout-v2-page .section__overlay { display: none !important; } /* Single-column flow so the offer, widget, and info cards stack and fit the page width. Only the container layout changes - not the widget itself. */ .checkout-v2-page .checkout-v2-layout { display: block !important; } .checkout-v2-page .checkout-v2-widget-column, .checkout-v2-page .checkout-v2-info-column { width: auto !important; max-width: none !important; margin: 0 0 1.25rem !important; } /* Un-clip the fixed-height (275px) scroll boxes so ALL experts and lessons print, not just the scrolled-visible few. */ .checkout-v2-page .checkout-v2-card--experts, .checkout-v2-page .checkout-v2-card--learn { height: auto !important; min-height: 0 !important; max-height: none !important; break-inside: avoid; page-break-inside: avoid; } .checkout-v2-page .checkout-v2-scroll-fade { overflow: visible !important; } .checkout-v2-page .checkout-v2-scroll-region { overflow: visible !important; max-height: none !important; } /* The scroll-fade gradient masks imply "more below" - meaningless once everything is shown. */ .checkout-v2-page .checkout-v2-scroll-fade::before, .checkout-v2-page .checkout-v2-scroll-fade::after { display: none !important; } /* Expert photos: keep true colors, prevent oversizing. */ .checkout-v2-page img { -webkit-print-color-adjust: exact; print-color-adjust: exact; max-width: 100% !important; } /* Keep headings attached to the content beneath them. */ .checkout-v2-page .checkout-v2-intro__title, .checkout-v2-page .checkout-v2-card__title { break-after: avoid; page-break-after: avoid; } }