/* 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) */ } /* Keeps the current + struck-through prices sharing a baseline while the pill center-aligns against the whole group in the parent row. */ .checkout-v2-page .checkout-v2-intro__price-group { display: flex; flex-wrap: wrap; align-items: baseline; 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; } .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.9375rem; /* 15px */ 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.9375rem; /* match the pill text */ line-height: 1; color: inherit; } .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; } }