/* ===== 00-base.css ===== */
/* ==========================================================================
00-base.css — tokens, fonts, shared primitives
Source of truth: Figma variables on node 3308:18451
("Custom portfolios - copy from PT")
Everything is scoped under .bt-page so the bundle can be embedded
in a host page without leaking styles.
========================================================================== */
/* PLACEHOLDER webfonts — stand-ins until licensed Season Mix / GT America
are provided by the host page. The licensed families are FIRST in the
font stacks below, so simply loading them (via the host's @font-face)
makes every element pick them up; these imports then become dead weight
and can be deleted.
Season Mix (headline serif) -> Source Serif 4
GT America (text grotesque) -> Inter */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&family=Inter:wght@400;500;600;700&display=swap');
.bt-page {
/* ---- color: primitives ---- */
--bt-navy: #000b50; /* color/primitives/navy/100, Primary/Navy */
--bt-blue: #1d6ae5; /* color/primitives/blue/60, Secondary/Blue */
--bt-blue-50: #2c78ea;
--bt-blue-40: #5696ee; /* Mid Blue */
--bt-blue-30: #87b8f5;
--bt-light-blue: #9ec9ff;
--bt-gold: #ffc729; /* Primary/Gold, -bt-color-gold-10 */
--bt-cream: #f9f0e2; /* -bt-color-bg-default */
--bt-grey-10: #f5f5f5; /* surface muted */
--bt-grey-20: #e6e6e6; /* border weak */
--bt-white: #ffffff;
--bt-teal: #226d78;
--bt-purple: #703dea;
/* ---- color: semantic ---- */
--bt-text-default: #212121;
--bt-text-muted: #5c5c5c;
--bt-text-loud: var(--bt-blue);
--bt-text-overlay: #ffffff; /* text on photos / navy */
--bt-border-weak: var(--bt-grey-20);
--bt-border-muted: rgba(164, 164, 164, 0.4);
--bt-separator: #c7c7c7;
/* ---- typography ----
Licensed families first: the moment the host page @font-face-loads
"Season Mix" / "GT America", every element uses them at these exact
Figma metrics. Google-font placeholders are the fallback. */
--bt-font-headline: 'Season Mix', 'Source Serif 4', Georgia, serif;
--bt-font-text: 'GT America', 'Inter', 'Helvetica Neue', Arial, sans-serif;
/* Every Season Mix headline in the comp is the Medium cut (Figma reports
its internal weight as 580). Register Season Mix Medium at
font-weight: 500 in your @font-face and this token matches it exactly
with no synthetic bolding. (If you register it as 580, set 580 here.) */
--bt-weight-headline: 500;
--bt-headline-1: 68px; /* Display/Headline 1: lh 1.0, ls 0 */
--bt-headline-2: 44px; /* Display/Headline 2: lh 1.1, ls 0 — comp drew
54; Aug 2026 (user call): aligned to the live
betterment.com h2 (4.4rem at the host's 10px
root) */
--bt-headline-3: 36px; /* Display/Headline 3: lh 1.2, ls 0 */
--bt-subhead-1: 28px; /* Display/Subhead 1: GT America 500, lh 1.35 */
--bt-subhead-3: 20px; /* Display/Subhead 3: GT America 500, lh 1.35 */
--bt-body-1: 18px; /* Text/Body 1: GT America 400, lh 1.35 */
--bt-body-2: 16px; /* Text/Body 2: GT America 400, lh 1.5 */
--bt-body-3: 14px; /* Text/Body 3: GT America 400, lh 1.5 */
--bt-disclosure: 12px; /* Micro/Disclosure 1: GT America 400, lh 1.35 */
/* ---- spacing / grid (Figma: 1440 viewport, 80 margin, 12 col, 20 gap) ---- */
--bt-space-xs: 4px;
--bt-space-sm: 8px;
--bt-space-base: 12px;
--bt-space-md: 16px;
--bt-space-lg: 24px;
--bt-space-xl: 32px;
--bt-space-2xl: 40px;
--bt-space-3xl: 48px;
--bt-space-4xl: 80px;
--bt-space-5xl: 120px;
/* The host site's .bt-container gutter (betterment.com uses 2.88rem).
Used only by absolutely-positioned elements that must align with the
container's content edge (hero controls, protection photo). Keep in
sync with the site's container padding; the ≤768 override matches the
XS comps' 20px grid margin. */
--bt-site-gutter: 2.88rem;
--bt-grid-gap: 20px;
/* ---- radii / shadows ---- */
--bt-radius-sm: 4px;
--bt-radius-md: 8px;
--bt-radius-lg: 16px;
--bt-radius-round: 9999px;
--bt-shadow-short: 3px 3px 0 rgba(0, 11, 80, 0.05);
--bt-shadow-long: 6px 6px 0 rgba(0, 11, 80, 0.1),
inset 1.5px 1.5px 1.5px #ffffff,
inset -1.5px -1.5px 1.5px rgba(0, 11, 80, 0.25);
/* base text defaults for everything inside the embed */
position: relative; /* positioning context (e.g. header overlaid on hero) */
isolation: isolate; /* one atomic stacking context: internal z-indexes
(header z-10) never interleave with host content */
font-family: var(--bt-font-text);
font-size: var(--bt-body-2);
line-height: 1.5;
color: var(--bt-text-default);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---- minimal reset, scoped ----
:where() keeps specificity at (0,1,0) so any section class can override. */
.bt-page *,
.bt-page *::before,
.bt-page *::after { box-sizing: border-box; }
.bt-page :where(h1,
.bt-page h2,
.bt-page h3,
.bt-page h4,
.bt-page p,
.bt-page ul,
.bt-page ol,
.bt-page figure) { margin: 0; padding: 0; }
.bt-page :where(ul,
.bt-page ol) { list-style: none; }
.bt-page :where(img) { display: block; max-width: 100%; height: auto; }
.bt-page :where(a) { color: inherit; text-decoration: none; }
.bt-page :where(button) {
font: inherit; color: inherit; background: none; border: 0;
padding: 0; cursor: pointer;
}
.bt-page :focus-visible {
outline: 2px solid var(--bt-blue);
outline-offset: 2px;
}
/* ---- layout ----
.bt-container geometry (max-width / gutters / centering) is deliberately
NOT defined here: betterment.com styles .bt-container globally and the
host site owns the shared width system. The embed's containers simply
inherit it. The standalone demo (index.html) injects an equivalent rule
so local previews match production. */
/* ---- type helpers ---- */
.bt-page .bt-type-h1,
.bt-page .bt-type-h2,
.bt-page .bt-type-h3 {
font-family: var(--bt-font-headline);
font-weight: var(--bt-weight-headline); /* Season Mix Medium */
color: var(--bt-navy);
}
.bt-page .bt-type-h1 { font-size: var(--bt-headline-1); line-height: 1; }
.bt-page .bt-type-h2 { font-size: var(--bt-headline-2); line-height: 1.1; }
.bt-page .bt-type-h3 { font-size: var(--bt-headline-3); line-height: 1.2; }
.bt-page .bt-type-subhead-1 { font-family: var(--bt-font-text); font-weight: 500; font-size: var(--bt-subhead-1); line-height: 1.35; }
.bt-page .bt-type-subhead-3 { font-family: var(--bt-font-text); font-weight: 500; font-size: var(--bt-subhead-3); line-height: 1.35; }
.bt-page .bt-type-body-1 { font-size: var(--bt-body-1); line-height: 1.35; }
.bt-page .bt-type-body-2 { font-size: var(--bt-body-2); line-height: 1.5; }
.bt-page .bt-type-body-3 { font-size: var(--bt-body-3); line-height: 1.5; }
.bt-page .bt-type-disclosure { font-size: var(--bt-disclosure); line-height: 1.35; }
@media (max-width: 1024px) {
.bt-page .bt-type-h1 { font-size: clamp(40px, 6vw, 68px); }
.bt-page .bt-type-h2 { font-size: clamp(34px, 4.3vw, 44px); }
.bt-page .bt-type-h3 { font-size: clamp(26px, 4vw, 36px); }
}
/* ---- buttons / CTAs ---- */
.bt-page .bt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bt-font-text);
font-weight: 500; /* Text/CTA */
font-size: var(--bt-body-2);
line-height: 1.35;
padding: 11px 24px; /* 43px tall per comp */
border-radius: var(--bt-radius-sm);
transition: background-color 0.15s ease, color 0.15s ease;
}
.bt-page .bt-btn--gold { background: var(--bt-gold); color: var(--bt-navy); }
.bt-page .bt-btn--gold:hover { background: #ffd45c; }
.bt-page .bt-btn--blue { background: var(--bt-blue); color: var(--bt-white); }
.bt-page .bt-btn--blue:hover { background: var(--bt-blue-50); }
.bt-page .bt-btn--white { background: var(--bt-white); color: var(--bt-navy); }
.bt-page .bt-btn--white:hover { background: var(--bt-grey-10); }
/* text links sized/aligned to sit beside a filled button */
.bt-page .bt-link {
display: inline-flex;
align-items: center;
font-weight: 500;
font-size: var(--bt-body-2);
line-height: 1.35;
color: var(--bt-blue);
}
.bt-page .bt-link:hover { text-decoration: underline; }
.bt-page .bt-link--light { color: var(--bt-white); }
.bt-page .bt-link--navy { color: var(--bt-navy); }
@media (max-width: 768px) {
.bt-page { --bt-site-gutter: 20px; } /* XS comps' grid margin */
}
/* ---- shared motion guard ---- */
@media (prefers-reduced-motion: reduce) {
.bt-page *,
.bt-page *::before,
.bt-page *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ===== 01-hero.css ===== */
/* ==========================================================================
01-hero.css — Hero (Figma desktop node 3308:24066 "Section", 1440×1023;
XS headline node 3308:24511, 390×375)
The host site provides the Courtesy Nav and Header above this section
(top 109px of the Figma frame) — the section starts below them.
Top edge renders solid #0a34ad so it sits seamlessly under the host header.
Frame gradient: #0a34ad flat to 62.708% of the 1023px frame (y≈641.5),
then linear to #8fbbff. Recomputed for this section (starts at y=109,
height 914): flat to (641.5-109)/914 = 58.26%.
Aug 2026 feedback (Michelle): +54px between the host nav and the headline
— intro padding 96 -> 150 (the site's standard desktop nav offset). The
whole comp shifts down with it: height 914 -> 968, band top 407 -> 461,
flat-to (532.5+54)/968 = 60.589%. The band-internal gradient geometry is
unchanged (flat ends 125.5px into the band, fade spans 381.5px), so the
motion artwork's baked backdrop still meets the CSS gradient exactly.
========================================================================== */
.bt-page .bt-hero {
position: relative;
height: 968px; /* frame 1023 minus the 109px host-nav strip, +54 nav gap */
/* Figma "Blue Gradient" fill — endpoints are not base tokens */
background: linear-gradient(180deg, #0a34ad 60.589%, #8fbbff 100%);
overflow: hidden;
}
/* ---- intro (node 3308:24069 "Headline & Text", y=109 → section y=0) ---- */
.bt-page .bt-hero__intro {
padding-top: 150px; /* comp 96 +54: host nav overlays the section top;
150 is the site's standard desktop offset */
text-align: center;
}
.bt-page .bt-hero__eyebrow {
/* Micro/Eyebrow 1: GT America Medium 14/1.15, uppercase. Tracking +8%
(Aug 2026, user call — was +4%/0.56px): spec arrived as 1.4rem/1.15/
0.112rem; converted to px per the project rule (host root is 10px,
rem stays out of the embed), so 14px / 1.15 / 1.12px. */
font-family: var(--bt-font-text);
font-weight: 500;
font-size: 14px; /* eyebrow size — not in the base token scale */
line-height: 1.15;
letter-spacing: 1.12px;
text-transform: uppercase;
color: var(--bt-text-overlay);
margin-bottom: 24px;
text-box: trim-both cap alphabetic; /* progressive enhancement */
}
.bt-page .bt-hero__title {
/* Display/Headline 1 */
font-family: var(--bt-font-headline);
font-weight: var(--bt-weight-headline);
font-size: var(--bt-headline-1);
line-height: 1;
color: var(--bt-text-overlay);
max-width: 630px; /* Figma Title max-width — yields the comp's 2-line break */
margin: 0 auto 48px;
text-box: trim-both cap alphabetic; /* progressive enhancement */
}
.bt-page .bt-hero__body {
/* Text/Body 1 */
font-size: var(--bt-body-1);
line-height: 1.35;
color: var(--bt-text-overlay);
/* Figma Body max-width is 522px; the comp's exact 2-line break is forced
with a
instead because the placeholder font runs wider. 630px lets
line 1 fit in one piece under Inter; with GT America both lines match
the comp at its natural 522px width. */
max-width: 630px;
margin: 0 auto 32px; /* 20px stack gap + 12px CTA padding-top */
text-box: trim-both cap alphabetic; /* progressive enhancement */
}
.bt-page .bt-hero__actions {
display: flex;
justify-content: center;
}
.bt-page .bt-hero__cta {
padding: 11px 20px; /* CTA 1 uses 20px inline padding (vs 24px default) */
}
.bt-page .bt-hero .bt-btn:focus-visible,
.bt-page .bt-hero a:focus-visible {
outline-color: var(--bt-white); /* keep focus visible on the blue gradient */
}
/* XS-only static artwork — hidden here so desktop/tablet never render it
(display:none also keeps the lazy fetch from ever firing there) */
.bt-page .bt-hero__mobile-art { display: none; }
/* ---- media band (node 3308:24070 "Frame", y=516 → section y=407 comp,
461 with the +54 nav gap, h=507) ---- */
.bt-page .bt-hero__media {
position: absolute;
top: 461px;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 1440px; /* card offsets are relative to the 1440 design frame */
height: 507px;
/* the band is a full-width transparent overlay that reaches up under the
intro's CTA row; without this it swallowed clicks on the button's lower
half (Aug 2026 "Get started not working"). Nothing inside is
interactive — the scene and artwork are decorative. */
pointer-events: none;
}
.bt-page .bt-hero__scene {
position: absolute;
inset: 0;
font-family: var(--bt-font-text);
font-feature-settings: "lnum" 1, "tnum" 1;
color: var(--bt-text-default);
text-align: left;
}
/* donut composition (node 3308:24071, frame 512,94.72, 415.694×339.663) */
.bt-page .bt-hero__donut {
position: absolute;
top: 94.7px;
left: 50%;
transform: translateX(-50%); /* designed center x=719.85 ≈ frame center */
width: 415.694px;
height: 339.663px;
max-width: none;
}
/* ---- dashboard cards (rebuilt in HTML/CSS at exact Figma specs) ---- */
.bt-page .bt-hero__card {
position: absolute;
background: var(--bt-white);
border-radius: var(--bt-radius-lg);
padding: 14px 16px 16px;
width: 299px; /* 267px content + 16px padding both sides */
/* Figma card effects: hard 8px offset shadow + 1.472px emboss insets */
box-shadow: 8px 8px 0 rgba(0, 11, 80, 0.25),
inset -1.472px -1.472px 1.472px rgba(0, 11, 80, 0.25),
inset 1.472px 1.472px 1.472px var(--bt-white);
}
.bt-page .bt-hero__card-title {
font-size: var(--bt-body-2);
font-weight: 500; /* GT America Medium */
line-height: 25.584px; /* dashboard "text/50" title metrics per comp */
color: var(--bt-text-default);
margin-bottom: 4px;
white-space: nowrap;
}
.bt-page .bt-hero__card-title--snug {
margin-bottom: 0;
line-height: 1; /* leading-none beside the account icon */
}
.bt-page .bt-hero__card-title--strategy {
margin-bottom: 8px;
}
/* Holdings (node 3308:24234, frame 117,68) */
.bt-page .bt-hero__card--holdings {
left: 117px;
top: 68px;
height: 146.24px;
}
.bt-page .bt-hero__holdings-body {
padding-top: 12.491px;
}
.bt-page .bt-hero__holding-row {
display: flex;
align-items: center;
height: 38.255px;
margin-bottom: 12.491px;
}
.bt-page .bt-hero__logo-tile {
flex: 0 0 auto;
width: 37.474px;
height: 38.255px;
background: var(--bt-grey-10);
border-radius: 6.246px; /* scaled radius per comp */
display: flex;
align-items: center;
justify-content: center;
margin-right: 9.368px;
}
.bt-page .bt-hero__logo {
width: 17.176px;
height: 17.175px;
}
.bt-page .bt-hero__holding-names {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1.561px;
}
.bt-page .bt-hero__ticker {
font-size: 12.491px; /* dashboard "text/100" scaled per comp */
line-height: 18.737px;
color: var(--bt-blue);
white-space: nowrap;
}
.bt-page .bt-hero__security {
font-size: 10.93px; /* dashboard "text/50" scaled per comp */
line-height: 16.395px;
color: var(--bt-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bt-page .bt-hero__chip {
flex: 0 0 auto;
width: 56.21px;
height: 28.11px;
background: rgba(158, 201, 255, 0.8); /* Light Blue @80% per comp */
border-radius: 3.124px;
box-shadow: inset 3.865px 3.865px 3.865px var(--bt-light-blue);
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 12.494px;
line-height: 18.741px;
color: var(--bt-text-default);
}
.bt-page .bt-hero__slider-row {
display: flex;
align-items: center;
gap: 6.246px;
height: 23.421px;
}
.bt-page .bt-hero__trash {
flex: 0 0 auto;
width: 18.737px;
height: 18.737px;
display: flex;
align-items: center;
justify-content: center;
}
.bt-page .bt-hero__trash-glyph {
width: 11.711px;
height: 13.182px;
}
.bt-page .bt-hero__slider {
position: relative;
flex: 1 1 auto;
min-width: 0;
height: 15.614px;
display: block;
}
.bt-page .bt-hero__slider-track {
position: absolute;
left: 0;
top: 4.86px;
width: 100%;
height: 6px;
background: var(--bt-grey-20);
border-radius: var(--bt-radius-round);
}
.bt-page .bt-hero__slider-fill {
position: absolute;
left: 0;
top: 4.86px;
width: 21%;
height: 6px;
border-radius: 10.623px 0 0 10.623px;
/* Figma dataviz gradient fill on the slider — endpoints not base tokens */
background: linear-gradient(1.975deg, #1d6ae5 7.1%, #9ec9ff 84.5%);
box-shadow: inset 4.779px 4.779px 4.779px var(--bt-light-blue);
}
.bt-page .bt-hero__slider-thumb {
position: absolute;
left: 20.67%;
top: 0;
width: 15.614px;
height: 15.614px;
background: var(--bt-white);
border: 0.781px solid var(--bt-blue);
border-radius: var(--bt-radius-round);
box-shadow: 2px 2px 0 rgba(0, 11, 80, 0.25);
}
/* My custom portfolio (node 3308:24185, frame 1024,67 → right 117) */
.bt-page .bt-hero__card--mycustom {
right: 117px;
top: 67px;
height: 148.3px;
padding: 16px; /* this card uses 16px on all sides */
}
.bt-page .bt-hero__mycustom-head {
display: flex;
align-items: center;
gap: 10px;
height: 29.302px;
margin-bottom: 10px;
}
.bt-page .bt-hero__account-icon {
flex: 0 0 auto;
position: relative;
width: 30px;
height: 29.302px;
background: var(--bt-blue-40);
border-radius: var(--bt-radius-round);
/* icon-account-new: hard offset + emboss insets (backdrop-blur export
flattens — rebuilt in CSS from raw fills) */
box-shadow: 3.56px 3.564px 0 rgba(0, 11, 80, 0.25),
inset 2.917px 2.917px 1.458px var(--bt-blue),
inset -0.437px -0.437px 0.437px rgba(0, 11, 80, 0.25),
inset 0.437px 0.437px 0.437px var(--bt-white);
display: flex;
align-items: center;
justify-content: center;
}
.bt-page .bt-hero__account-glyph {
width: 19.95px;
height: 19.9px;
}
.bt-page .bt-hero__mycustom-body {
position: relative;
height: 77px;
}
.bt-page .bt-hero__balance-label {
position: absolute;
left: 1.28px;
top: 0;
font-size: 13px; /* dashboard "text/50" size — not a base token */
line-height: 21px;
color: var(--bt-text-muted);
}
.bt-page .bt-hero__balance-amount {
position: absolute;
left: 1.28px;
top: 16px;
font-size: 24px; /* balance figure per comp */
line-height: 42px;
color: var(--bt-text-default);
}
.bt-page .bt-hero__balance-gain {
position: absolute;
left: 0;
top: 53px;
font-size: 13px;
line-height: 24px;
color: var(--bt-text-default);
white-space: nowrap;
}
.bt-page .bt-hero__balance-delta {
color: var(--bt-teal); /* text/success */
}
.bt-page .bt-hero__balance-link {
position: absolute;
right: 0;
top: 53px;
font-size: 13px;
line-height: 24px;
color: var(--bt-blue);
white-space: nowrap;
}
/* Allocation (node 3308:24126, frame 165,255) */
.bt-page .bt-hero__card--alloc {
left: 165px;
top: 255px;
height: 110.16px;
}
.bt-page .bt-hero__title-row {
display: flex;
align-items: center;
gap: 4.873px;
margin-bottom: 4px;
}
.bt-page .bt-hero__title-row .bt-hero__card-title {
margin-bottom: 0;
}
.bt-page .bt-hero__caret {
width: 24px;
height: 24px;
flex: 0 0 auto;
}
.bt-page .bt-hero__alloc-row {
display: flex;
align-items: flex-start;
gap: 14.986px;
height: 50.579px;
}
.bt-page .bt-hero__alloc-labels,
.bt-page .bt-hero__alloc-values {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
font-size: 11.24px; /* dashboard "text/25" scaled per comp */
line-height: 16.86px;
color: var(--bt-text-default);
white-space: nowrap;
}
.bt-page .bt-hero__alloc-labels {
flex: 0 0 auto;
width: 73px;
font-weight: 500;
}
.bt-page .bt-hero__alloc-values {
flex: 0 0 auto;
width: 31px;
align-items: flex-end;
}
.bt-page .bt-hero__alloc-bars {
flex: 1 1 auto;
min-width: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bt-page .bt-hero__alloc-bar {
display: block;
margin: 3.747px 0;
height: 7.493px;
background: var(--bt-grey-10);
border-radius: 1.873px;
}
.bt-page .bt-hero__alloc-fill {
display: block;
height: 7.493px;
border-radius: 1.873px;
}
.bt-page .bt-hero__alloc-fill--stocks { width: 76.9%; background: var(--bt-blue); }
.bt-page .bt-hero__alloc-fill--bonds { width: 18.3%; background: var(--bt-teal); }
.bt-page .bt-hero__alloc-fill--alts { width: 4.8%; background: var(--bt-purple); }
/* Portfolio strategy (node 3308:24198, frame 976,255 → right 165) */
.bt-page .bt-hero__card--strategy {
right: 165px;
top: 255px;
height: 127.58px;
}
.bt-page .bt-hero__strategy-body {
display: flex;
align-items: center;
gap: 16px;
height: 64px;
}
.bt-page .bt-hero__strategy-icon {
width: 64px;
height: 64px;
flex: 0 0 auto;
}
.bt-page .bt-hero__strategy-col {
display: flex;
flex-direction: column;
min-width: 0;
}
.bt-page .bt-hero__strategy-label {
font-size: var(--bt-body-3);
font-weight: 500;
line-height: 21px;
color: var(--bt-text-default);
margin-bottom: -2px; /* comp tucks "Change" 2px under the label line box */
white-space: nowrap;
}
.bt-page .bt-hero__strategy-link {
font-size: var(--bt-body-3);
line-height: 21px;
color: var(--bt-blue);
white-space: nowrap;
}
/* ---- floating pills ---- */
/* Rebalancing (node 3308:24228, frame 1140,278 → card-local 164,23) */
.bt-page .bt-hero__pill {
display: inline-flex;
align-items: center;
}
.bt-page .bt-hero__pill--rebalance {
position: absolute;
left: 164px;
top: 23px;
gap: 28.086px;
padding: 12px 12px 12px 20px;
border-radius: var(--bt-radius-round); /* comp 69.317px — fully round */
background: var(--bt-blue);
box-shadow: 8px 8px 0 rgba(0, 11, 80, 0.25),
inset 1.026px 1.026px 1.026px rgba(255, 255, 255, 0.3),
inset 4.104px 4.104px 4.104px var(--bt-blue),
inset -1.026px -1.026px 1.026px rgba(0, 11, 80, 0.25);
white-space: nowrap;
}
.bt-page .bt-hero__rebalance-text {
font-size: var(--bt-body-2);
font-weight: 500;
line-height: 24.467px;
color: var(--bt-white);
}
.bt-page .bt-hero__toggle {
width: 45.105px;
height: 25.371px;
flex: 0 0 auto;
}
/* View portfolio analysis (node 3308:24273, frame 219,37) */
.bt-page .bt-hero__pill--analysis {
position: absolute;
left: 219px;
top: 37px;
padding: 4px;
border-radius: var(--bt-radius-round); /* comp 80.458px — fully round */
background: rgba(245, 245, 245, 0.85); /* frosted capsule per comp */
-webkit-backdrop-filter: blur(2.414px);
backdrop-filter: blur(2.414px);
box-shadow: 8px 8px 0 rgba(0, 11, 80, 0.25),
inset 1.207px 1.207px 1.207px var(--bt-white),
inset -1.207px -1.207px 1.207px rgba(0, 11, 80, 0.25);
}
.bt-page .bt-hero__analysis-inner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5.833px;
padding: 11.666px;
border: 1px solid #ff835e; /* pill accent orange — not a base token */
border-radius: var(--bt-radius-round);
white-space: nowrap;
}
.bt-page .bt-hero__ai-icon {
position: relative;
flex: 0 0 auto;
width: 24px;
height: 24px;
filter: drop-shadow(2px 2px 0 rgba(0, 11, 80, 0.25));
}
.bt-page .bt-hero__ai-ellipse {
position: absolute;
left: 2px;
top: 2px;
width: 20px;
height: 20px;
}
.bt-page .bt-hero__ai-glyph {
position: absolute;
left: 6px;
top: 6px;
width: 12px;
height: 12px;
}
.bt-page .bt-hero__analysis-text {
font-size: var(--bt-body-2);
font-weight: 500;
line-height: 17.499px;
color: var(--bt-text-default);
}
/* caption (node 3308:24278, centered, 32px above the frame bottom) */
.bt-page .bt-hero__caption {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
font-size: 11.517px; /* caption size per comp — not a base token */
line-height: 1.35;
color: var(--bt-text-muted);
white-space: nowrap;
text-box: trim-both cap alphabetic; /* progressive enhancement */
}
/* ---- tablet interpolation (769–1024): stacked band, desktop-size cards ---- */
@media (max-width: 1024px) {
.bt-page .bt-hero {
height: auto;
padding-bottom: 0;
}
.bt-page .bt-hero__intro {
padding-top: 64px;
}
.bt-page .bt-hero__title {
font-size: clamp(40px, 6.6vw, 68px);
}
.bt-page .bt-hero__media {
position: static;
transform: none;
max-width: none;
height: auto;
margin-top: 48px;
padding: 0 var(--bt-site-gutter);
}
.bt-page .bt-hero__scene {
position: static;
display: grid;
grid-template-columns: repeat(2, 299px);
justify-content: center;
gap: 24px;
}
.bt-page .bt-hero__pill--analysis {
position: static;
order: 1;
grid-column: 1 / -1;
justify-self: center;
margin-bottom: -14px; /* float the pill onto the illustration below */
z-index: 2;
}
.bt-page .bt-hero__donut {
position: static;
transform: none;
order: 2;
grid-column: 1 / -1;
justify-self: center;
width: 415.694px;
max-width: 100%;
height: auto;
}
.bt-page .bt-hero__card {
position: relative; /* keeps the rebalancing pill anchored to its card */
left: auto;
right: auto;
top: auto;
}
.bt-page .bt-hero__card--holdings { order: 3; }
.bt-page .bt-hero__card--mycustom { order: 4; }
.bt-page .bt-hero__card--alloc { order: 5; }
.bt-page .bt-hero__card--strategy { order: 6; }
/* the rebalancing pill keeps its desktop card-local offsets (164,23);
it overhangs the card to the right like the comp */
.bt-page .bt-hero__caption {
position: static;
transform: none;
text-align: center;
padding: 24px 0 32px;
}
}
/* ---- XS (≤768, comp nodes 3308:24511 + 3308:24512) ----
Headline block per comp: pt 48, eyebrow 14, gap 24, headline 48, gap 40,
body 16, gap 20 + CTA pt 12, flat #0a34ad background.
Media band DELIBERATELY deviates from the XS collage comp (user override):
donut illustration, then the four cards in a fluid 2×2 grid. Cards are
restyled at a compact scale derived from the comp's 0.52× XS collage. */
@media (max-width: 768px) {
.bt-page .bt-hero {
background: #0a34ad; /* flat blue per XS comp; gradient moves to the band */
}
.bt-page .bt-hero__intro {
padding-top: 123px; /* XS comp 48 +75 (Aug 2026, user call): the host
mobile nav overlays the section top and sat on
the eyebrow */
}
.bt-page .bt-hero__eyebrow {
margin-bottom: 24px;
}
.bt-page .bt-hero__title {
font-size: 48px; /* -bt-type-headline-1-size XS mode */
margin-bottom: 40px; /* -bt-space-margin-4xl XS mode */
}
/* The host owns .bt-container geometry, and its desktop gutters can be
wider than the XS comps' 20px grid margin. Let the centered intro text
expand symmetrically past the container padding up to the comp's
column (350px = 390 − 2×20px gutter), never past the viewport. */
.bt-page .bt-hero__title,
.bt-page .bt-hero__body {
margin-left: min(0px, calc((100% - min(350px, 100vw - 40px)) / 2));
margin-right: min(0px, calc((100% - min(350px, 100vw - 40px)) / 2));
}
.bt-page .bt-hero__body {
font-size: 16px; /* -bt-type-body-1-size XS mode */
}
.bt-page .bt-hero__body br {
display: none; /* let narrow viewports wrap naturally */
}
/* XS media band (Aug 2026 rev 4, user call): design-team composition
mobilesection.svg (390x265) — new donut + Holdings/Allocation cards +
analysis pill — replaces the fit-to-width Media V1 export. The art's
top row is flat #0a34ad (seamless against the section background
above, same as rev 3) and it carries its OWN caption panel with the
"Image is illustrative." line baked in, so the HTML caption is
visually hidden at this width (sr-only rule below — screen readers
keep the compliance disclaimer) and the #8ebafd caption strip is
retired. ROLLBACK to rev 3: restore background: #8ebafd on
.bt-hero__media here, the caption's visible styles below, and the
rev-3 img in sections/01-hero.html. */
.bt-page .bt-hero__mobile-art {
display: block;
width: 100%;
height: auto;
}
.bt-page .bt-hero__scene {
display: none; /* card-grid rules below are dormant — kept as the
quick-restore path */
}
.bt-page .bt-hero__media {
margin-top: 40px; /* XS headline block padding-bottom */
padding: 0;
}
.bt-page .bt-hero__scene {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
max-width: 480px;
margin: 0 auto;
}
.bt-page .bt-hero__pill--analysis {
margin-bottom: -8px;
padding: 3px;
}
.bt-page .bt-hero__analysis-inner {
gap: 4.4px;
padding: 8px 10px;
}
.bt-page .bt-hero__ai-icon {
width: 18px;
height: 18px;
filter: drop-shadow(1.5px 1.5px 0 rgba(0, 11, 80, 0.25));
}
.bt-page .bt-hero__ai-ellipse { left: 1.5px; top: 1.5px; width: 15px; height: 15px; }
.bt-page .bt-hero__ai-glyph { left: 4.5px; top: 4.5px; width: 9px; height: 9px; }
.bt-page .bt-hero__analysis-text {
font-size: 12px;
line-height: 13px;
}
.bt-page .bt-hero__pill--analysis,
.bt-page .bt-hero__card {
box-shadow: 5px 5px 0 rgba(0, 11, 80, 0.25),
inset 1px 1px 1px var(--bt-white),
inset -1px -1px 1px rgba(0, 11, 80, 0.25);
}
/* compact cards (fluid, min-width 0 — must never overflow at 390) */
.bt-page .bt-hero__card {
width: auto;
min-width: 0;
height: auto;
padding: 10px 10px 12px;
border-radius: 10px;
}
.bt-page .bt-hero__card--mycustom { padding: 10px; }
.bt-page .bt-hero__card-title {
font-size: 10px;
line-height: 14px;
margin-bottom: 3px;
}
.bt-page .bt-hero__card-title--snug { margin-bottom: 0; line-height: 1.1; white-space: normal; }
.bt-page .bt-hero__card-title--strategy { margin-bottom: 5px; }
/* Holdings */
.bt-page .bt-hero__holdings-body { padding-top: 7px; }
.bt-page .bt-hero__holding-row { height: 22px; margin-bottom: 8px; }
.bt-page .bt-hero__logo-tile {
width: 22px;
height: 22px;
border-radius: 4px;
margin-right: 6px;
}
.bt-page .bt-hero__logo { width: 10px; height: 10px; }
.bt-page .bt-hero__holding-names { gap: 1px; }
.bt-page .bt-hero__ticker { font-size: 8px; line-height: 11px; }
.bt-page .bt-hero__security { font-size: 7.5px; line-height: 10px; }
.bt-page .bt-hero__chip {
width: 34px;
height: 17px;
border-radius: 2px;
gap: 2px;
font-size: 8px;
line-height: 11px;
box-shadow: inset 2px 2px 2px var(--bt-light-blue);
}
.bt-page .bt-hero__slider-row { gap: 4px; height: 12px; }
.bt-page .bt-hero__trash { width: 12px; height: 12px; }
.bt-page .bt-hero__trash-glyph { width: 10.5px; height: 11.8px; }
.bt-page .bt-hero__slider { height: 10px; }
.bt-page .bt-hero__slider-track,
.bt-page .bt-hero__slider-fill { top: 3.2px; height: 3.6px; }
.bt-page .bt-hero__slider-fill {
border-radius: 6px 0 0 6px;
box-shadow: inset 3px 3px 3px var(--bt-light-blue);
}
.bt-page .bt-hero__slider-thumb {
width: 10px;
height: 10px;
border-width: 0.6px;
box-shadow: 1.3px 1.3px 0 rgba(0, 11, 80, 0.25);
}
/* My custom portfolio */
.bt-page .bt-hero__mycustom-head { gap: 6px; height: auto; min-height: 18px; margin-bottom: 6px; }
.bt-page .bt-hero__account-icon {
width: 18px;
height: 17.6px;
box-shadow: 2.1px 2.1px 0 rgba(0, 11, 80, 0.25),
inset 1.75px 1.75px 0.9px var(--bt-blue),
inset -0.3px -0.3px 0.3px rgba(0, 11, 80, 0.25),
inset 0.3px 0.3px 0.3px var(--bt-white);
}
.bt-page .bt-hero__account-glyph { width: 12px; height: 12px; }
.bt-page .bt-hero__mycustom-body { height: 50px; }
.bt-page .bt-hero__balance-label { left: 1px; font-size: 7.5px; line-height: 11px; }
.bt-page .bt-hero__balance-amount { left: 1px; top: 10px; font-size: 15px; line-height: 24px; }
.bt-page .bt-hero__balance-gain { top: 37px; font-size: 7.5px; line-height: 12px; }
.bt-page .bt-hero__balance-link { top: 37px; font-size: 7.5px; line-height: 12px; }
/* Allocation */
.bt-page .bt-hero__title-row { gap: 3px; margin-bottom: 3px; }
.bt-page .bt-hero__caret { width: 13px; height: 13px; }
.bt-page .bt-hero__alloc-row { gap: 8px; height: 34px; }
.bt-page .bt-hero__alloc-labels,
.bt-page .bt-hero__alloc-values {
font-size: 7.5px;
line-height: 11.33px;
}
.bt-page .bt-hero__alloc-labels { width: 42px; }
.bt-page .bt-hero__alloc-values { width: 21px; }
.bt-page .bt-hero__alloc-bar { margin: 3.17px 0; height: 5px; border-radius: 1.3px; }
.bt-page .bt-hero__alloc-fill { height: 5px; border-radius: 1.3px; }
/* Portfolio strategy */
.bt-page .bt-hero__strategy-body { gap: 8px; height: 40px; }
.bt-page .bt-hero__strategy-icon { width: 40px; height: 40px; }
.bt-page .bt-hero__strategy-label { font-size: 9px; line-height: 13px; margin-bottom: -1px; }
.bt-page .bt-hero__strategy-link { font-size: 9px; line-height: 13px; }
.bt-page .bt-hero__pill--rebalance {
left: auto;
right: -10px; /* overhangs the card into the 20px gutter, viewport-safe */
top: -14px; /* floats above the card title line */
gap: 10px;
padding: 5px 5px 5px 10px;
box-shadow: 4px 4px 0 rgba(0, 11, 80, 0.25),
inset 0.6px 0.6px 0.6px rgba(255, 255, 255, 0.3),
inset 2.4px 2.4px 2.4px var(--bt-blue),
inset -0.6px -0.6px 0.6px rgba(0, 11, 80, 0.25);
}
.bt-page .bt-hero__rebalance-text { font-size: 9.5px; line-height: 12px; }
.bt-page .bt-hero__toggle { width: 24px; height: 13.5px; }
/* Aug 2026 rev 4 (user call): mobilesection.svg bakes the visible
caption into the artwork, so at this width the HTML caption is
visually hidden but KEPT for screen readers — the baked one is
paths, not accessible text. ROLLBACK (rev-3 visible styles):
font-size: 10px; padding: 25px 0 25px; (and restore the strip on
.bt-hero__media above). */
.bt-page .bt-hero__caption {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
}
/* ---- animated artwork (cs-hero) ----
js/98-motion.js fetches assets/hero/motion-cs-hero.svg (viewBox 1438x507 —
the media band) into this holder. TWO-PHASE attribute on the section:
data-bt-motion="loading" is set synchronously at init on a motion-capable
desktop, so the statics never paint there and the hero area belongs to the
animation from the start ("animation only" — the finished-static-to-
scene-1 swap read as a glitch); the band shows its gradient while the SVG
fetches, then "armed" fades the seeded scene-1 resting frame in. If
loading fails, JS removes the attribute and the statics return.
DELIBERATE deviation from the motion playbook's PNG-in-holder fallback:
the HTML/CSS scene + caption above stay in the DOM as the no-JS /
reduced-motion / fetch-failure fallback. Both the statics-hiding rule and
the holder reveal are scoped to (min-width: 769px), so mobile always shows
the statics regardless of the attribute — arming on desktop and then
resizing down simply swaps back to the statics with no JS involved. */
.bt-page .bt-hero__artwork { display: none; }
@media (min-width: 769px) {
.bt-page .bt-hero[data-bt-motion] .bt-hero__scene,
.bt-page .bt-hero[data-bt-motion] .bt-hero__caption { display: none; }
.bt-page .bt-hero[data-bt-motion] .bt-hero__artwork {
display: block;
width: 100%;
max-width: 1438px; /* SVG viewBox width (the band is 1440) */
margin: 0 auto;
/* pins the box to the SVG's geometry so the swap can't shift layout */
aspect-ratio: 1438 / 507;
opacity: 0; /* empty while the SVG fetches */
transition: opacity 0.35s ease; /* zeroed by the reduced-motion guard */
}
.bt-page .bt-hero[data-bt-motion="armed"] .bt-hero__artwork { opacity: 1; }
.bt-page .bt-hero__artwork svg {
display: block;
width: 100%;
height: auto;
}
/* the SVG's names the licensed font (GT America, weight 500 via its
own attributes); route the family through the token stack so the
placeholder grotesque renders until the host loads the licensed one */
.bt-page .bt-hero__artwork text {
font-family: var(--bt-font-text);
}
}
/* ≥1025 (fixed-height band): anchor the artwork to the band's BOTTOM edge.
In flow it hugged the band's top, and at viewports narrower than the
SVG's 1438px canvas the aspect-ratio box runs shorter than the fixed
507px band — the artwork's baked backdrop gradient then bottomed out at
#8fbbff above the section bottom, printing a full-width horizontal seam
in the blue gradient (Aug 2026 feedback; invisible at exactly 1440,
which is why the 1440 reference render never caught it). Bottom-anchored,
the backdrop's last row always coincides with the section bottom, and its
top row (flat #0a34ad) lands in the section's flat region at any width
≥ ~1090; between 1025–1090 the residual top-edge tint mismatch is <6%
of the fade. 769–1024 keeps the flow behavior — the band is auto-height
static flow there, so no seam existed. */
@media (min-width: 1025px) {
.bt-page .bt-hero[data-bt-motion] .bt-hero__artwork {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
}
}
/* ===== 02-overview.css ===== */
/* ==========================================================================
02-overview.css — "Custom Portfolio - Product Overview A/B/C"
Figma v2: pWDFgjuzzoe3V6oLvJZ3bK nodes 3308:19933 / 3308:19897 /
3308:19915 (three desktop 1440x1124 states of the same section; slide A is
pixel-identical to the verified 3308:24279 build) and nodes 3308:23576 /
3308:23599 / 3308:23622 (exact XS comps of states A/B/C, 390x814 each —
they drive the <=768 block; all three share the section height and the
same bottom-left mockup treatment).
Cream section; serif H2; blue-gradient panel (40px bleed margins, wider
than the 80px grid) holding an interactive segmented control (tablist with
a single sliding white pill; JS in js/02-overview.js) and three tab panels
("slides"), each with intro copy + an app-window mockup clipped by the
panel's bottom edge. Slide A's window is rebuilt in HTML; slides B/C use
one raster export of the window box each (glass-edge chrome baked in).
Top and bottom pixel rows are both flat #f9f0e2 at 1440 AND 390 (glow
starts ~y=140 and hides behind the panel; no glow at XS; nothing bleeds
across section boundaries).
Mockup type sizes are the comp's own 0.894-scaled values (19.117px etc.)
— deliberate literals, not the site type scale.
XS type modes per comp: headline-2 -> 36px, headline-3 -> 28px,
eyebrow/body unchanged (14px/16px); intro stack gap 32 -> 24.
No-JS state: slide 1 visible (slides 2/3 ship with --hidden + inert),
tab 1 paints its own static pill — identical pixels to the JS default.
========================================================================== */
.bt-page .bt-overview {
position: relative;
height: 1124px; /* Figma frame height (fixed 1440 comp) —
restored after the mid-page CTA moved
into the tax section (Aug 2026) */
background: var(--bt-cream);
overflow: hidden; /* clips the 1440px-wide glow on narrow hosts */
}
/* ---- decorative dome glow (Figma 25617:15759) ----
The comp draws a 1440x635.5 dome SVG in the bottom half of a container
rotated 180deg: net result = the artwork spans y 129.34..764.84, flipped.
Sits behind the panel; only the warm halo above y=226 is visible. */
.bt-page .bt-overview__glow {
position: absolute;
top: 129.34px;
left: 50%;
width: 1440px;
max-width: none; /* base reset caps img at 100% */
height: 635.5px;
transform: translateX(-50%) rotate(180deg);
pointer-events: none;
}
/* ---- title (Figma 25617:15866) ---- */
.bt-page .bt-overview__title {
position: absolute;
top: 72px; /* cap-height top per comp */
left: calc(50% + 0.5px); /* Figma optical offset */
transform: translateX(-50%);
width: max-content; /*
owns the comp's line break */
max-width: 100%;
font-family: var(--bt-font-headline);
font-weight: var(--bt-weight-headline); /* Season Mix Medium */
font-size: var(--bt-headline-2); /* Display/Headline 2: 44px */
line-height: 1.1;
letter-spacing: 0;
color: var(--bt-navy);
text-align: center;
/* cap-height trim, progressive enhancement (matches Figma text-box) */
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
text-box: trim-both cap alphabetic;
}
/* XS-only line break (Figma 3308:24531 breaks after "handle") */
.bt-page .bt-overview__br--xs { display: none; }
/* keep the comp's line 1 unbroken: the placeholder serif runs ~6% wider
than Season Mix, so at XS it would wrap inside the 350px box; the line
then centers with a few px of bleed into the gutters (licensed font fits
the box exactly). Harmless at wider breakpoints — the line always fits. */
.bt-page .bt-overview__title-seg { white-space: nowrap; }
/* ---- gradient panel (Figma 25617:15760) ---- */
.bt-page .bt-overview__panel {
position: absolute;
top: 226px;
left: 50%;
transform: translateX(-50%);
width: min(1360px, calc(100% - 80px)); /* 40px bleed margins at 1440 */
height: 861px;
border-radius: 20px;
overflow: hidden; /* clips the mockup's bottom */
/* exact Figma gradient definition */
background: linear-gradient(199.433deg, var(--bt-navy) 17.901%, var(--bt-blue) 98.641%);
}
/* ---- segmented control (Figma 3308:19944) — interactive tablist ----
Aug 2026 feedback: the labels became single verbs (Start/Build/Automate,
Allie via Cory) and the spacing became uniform (Michelle) — the comp's
frozen state-A label layout is retired. Every tab keeps the pill's 19px
inset as its own padding; the bar is symmetric 4px padding with one even
flex gap, so the JS-measured pill fits any label. */
.bt-page .bt-overview__tabs {
position: absolute;
top: 35px; /* 261 - panel 226 */
left: calc(50% + 0.5px);
transform: translateX(-50%);
z-index: 2; /* above the slides layer */
display: flex;
align-items: center;
gap: 8px; /* even label-box gap (no spec —
reviewed on staging) */
height: 53px; /* 4 + 45 pill + 4 */
padding: 4px;
border-radius: var(--bt-radius-lg);
background: rgba(255, 255, 255, 0.13); /* Figma literal (no token) */
font-size: var(--bt-body-2);
line-height: 1.5;
white-space: nowrap;
}
.bt-page .bt-overview__tab {
position: relative; /* paints above the sliding pill */
z-index: 1;
display: flex;
align-items: center;
height: 45px;
padding: 0 19px;
border-radius: 13px; /* Figma literal */
color: var(--bt-text-overlay);
opacity: 0.8;
}
.bt-page .bt-overview__tab:focus-visible { outline-color: var(--bt-white); }
.bt-page .bt-overview__tab--active {
/* no-JS fallback pill: JS (bt-overview--js) hands the paint over to the
shared sliding indicator, which occupies the exact same border box */
background: var(--bt-grey-10);
box-shadow: var(--bt-shadow-short);
color: var(--bt-navy);
opacity: 1;
}
.bt-page .bt-overview--js .bt-overview__tab--active {
background: transparent;
box-shadow: none;
}
.bt-page .bt-overview--animate .bt-overview__tab {
transition: color 0.3s ease, opacity 0.3s ease;
}
/* ---- sliding pill indicator (single shared element behind the labels) ---- */
.bt-page .bt-overview__tabs-pill {
display: none; /* no-JS: the active tab paints it */
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 230px; /* JS measures the active tab and */
height: 45px; /* overrides all of these */
border-radius: 13px; /* Figma literal */
background: var(--bt-grey-10);
box-shadow: var(--bt-shadow-short);
}
.bt-page .bt-overview--js .bt-overview__tabs-pill { display: block; }
/* enabled only after the first interaction so initial load never animates;
the base prefers-reduced-motion guard zeroes the duration */
.bt-page .bt-overview--animate .bt-overview__tabs-pill {
transition: transform 0.3s ease, width 0.3s ease;
}
/* ---- tab panels ("slides") ----
Desktop: all three stack in the panel's fixed 861px box (absolute,
inset 0), so the section height cannot move during a swap; each slide's
children keep the original panel-relative absolute coordinates. Inactive
slides are visibility:hidden (out of the a11y tree and tab order) and
carry the inert attribute (markup default for 2/3; JS maintains it). */
.bt-page .bt-overview__slides {
position: absolute;
inset: 0;
z-index: 1;
}
.bt-page .bt-overview__slide {
position: absolute;
inset: 0;
}
.bt-page .bt-overview__slide--hidden {
visibility: hidden;
opacity: 0;
transform: translateY(10px); /* subtle rise on entry */
}
/* crossfade only after the first interaction; visibility flips at once on
show and only after the fade on hide */
.bt-page .bt-overview--animate .bt-overview__slide {
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0s;
}
.bt-page .bt-overview--animate .bt-overview__slide--hidden {
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
}
@media (prefers-reduced-motion: reduce) {
/* the base guard zeroes durations but not delays; drop the visibility
hand-off delay so hidden slides vanish immediately */
.bt-page .bt-overview--animate .bt-overview__slide--hidden { transition-delay: 0s; }
}
/* ---- intro copy (Figma 25617:15851) ---- */
.bt-page .bt-overview__intro {
position: absolute;
top: 136px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
width: 624px; /* Figma body text width */
max-width: calc(100% - 48px);
color: var(--bt-text-overlay);
text-align: center;
}
.bt-page .bt-overview__eyebrow {
font-weight: 500;
font-size: 14px; /* Micro/Eyebrow 1 (no base token) */
line-height: 1.15;
letter-spacing: 0.56px; /* 4% tracking */
text-transform: uppercase;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
text-box: trim-both cap alphabetic;
}
.bt-page .bt-overview__headline {
margin-top: 20px; /* Stack gap */
font-family: var(--bt-font-headline);
font-weight: var(--bt-weight-headline); /* Season Mix Medium */
font-size: var(--bt-headline-3); /* Display/Headline 3: 36px */
line-height: 1.2;
letter-spacing: 0;
color: inherit;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
text-box: trim-both cap alphabetic;
}
.bt-page .bt-overview__lede {
margin-top: 32px; /* outer Stack gap */
width: 100%;
font-size: var(--bt-body-2);
line-height: 1.5;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
text-box: trim-both cap alphabetic;
}
/* ---- app-window mockup (Figma 25617:15761) ----
Figma builds this as: clip at r29.572 > navy backdrop-blur layer > white
window (r20) > inset-shadow overlay. The backdrop-blur layer is fully
covered by the opaque white window, so it is rebuilt here as a plain navy
background (avoids the Figma export bug that flattens backdrop-blur). */
.bt-page .bt-overview__window {
position: absolute;
top: 322px;
/* exact comp x: window left 103 in the 1360 panel = center - 3.5px */
left: calc(50% - 3.5px);
transform: translateX(-50%);
width: 1147px;
height: 777px; /* bottom clipped by panel at 861 */
border-radius: 29.572px;
overflow: hidden;
background: var(--bt-navy);
box-shadow: 28.684px 28.684px 0 rgba(0, 11, 80, 0.25); /* Figma literal */
}
.bt-page .bt-overview__window::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
/* Figma glass-edge overlay */
box-shadow:
inset -3.585px -3.585px 3.585px rgba(0, 11, 80, 0.25),
inset 3.585px 3.585px 3.585px rgba(255, 255, 255, 0.5);
}
.bt-page .bt-overview__screen {
width: 100%;
height: 100%;
border-radius: 20px;
background: var(--bt-white);
}
/* ---- raster app windows for slides B/C (Figma 3308:19905 / 3308:19923) ----
One export of the window box each (1147x539 visible points, asset at 2x).
The glass-edge inset highlights are baked into the export, so the CSS
::after overlay is dropped; radius, navy backdrop, and drop shadow reuse
the slide-A window treatment. Height comes from the image so mid-size
viewports scale cleanly; the bottom edge stays flat like the comp's crop
(at 1440 it sits exactly on the panel's bottom clip). */
.bt-page .bt-overview__window--shot {
height: auto;
border-radius: 29.572px 29.572px 0 0;
}
.bt-page .bt-overview__window--shot::after { content: none; }
.bt-page .bt-overview__shot {
display: block;
width: 1147px;
max-width: 100%;
height: auto;
}
/* ---- XS-only app-window mockups (Figma 3308:22635 / 22726 / 23245) ----
One per slide, shown <=768 in place of the app windows above. Each XS comp
draws the desktop-style window scaled to 395x267.58 design points at
(22, 27) inside a 350x256 clip box at the panel's bottom-left, so only a
328x229 region is visible (window clipped by the panel's right edge and
bottom). The Figma export flattens the window's backdrop-blur layer
opaque, so each asset is that export pre-cropped to the visible 328x229
region (at 3x), with the flattened notch outside the window's 10.184px
top-left corner made transparent again. */
.bt-page .bt-overview__mobile-window { display: none; }
/* top bar (Figma 25617:15763) */
.bt-page .bt-overview__topbar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 58px;
border-bottom: 0.797px solid var(--bt-grey-20);
}
.bt-page .bt-overview__topbar-title {
font-size: 12.509px; /* mockup-scale literal */
line-height: 18.764px;
color: var(--bt-text-default);
}
.bt-page .bt-overview__topbar-btn {
position: absolute;
top: 14.34px;
display: flex;
align-items: center;
justify-content: center;
width: 28.675px;
height: 28.675px;
border-radius: 3.186px;
}
.bt-page .bt-overview__topbar-btn--back { left: 95.58px; }
.bt-page .bt-overview__topbar-btn--close { right: 95.585px; }
.bt-page .bt-overview__topbar-btn img {
width: 19.117px; /* designed glyph box */
height: 19.117px;
}
/* screen body */
.bt-page .bt-overview__screen-body {
/* question sits at x 37.13 / y 86.67; cards row is 1069.242 wide */
padding: 28.67px 40.63px 0 37.13px;
}
.bt-page .bt-overview__question {
font-weight: 500;
font-size: 19.117px; /* mockup-scale literal */
line-height: 27.082px;
color: var(--bt-text-default);
}
.bt-page .bt-overview__cards {
display: flex;
gap: 18.444px; /* 1069.242 - 2x525.399 */
margin-top: 22.37px; /* cards top 136.12 per comp */
}
.bt-page .bt-overview__card {
flex: 0 0 525.399px;
width: 525.399px;
height: 587.053px; /* bottom half clipped by panel */
padding: 20.55px;
border: 0.894px solid var(--bt-separator);
border-radius: 7.148px;
}
.bt-page .bt-overview__card-title {
font-weight: 500;
font-size: 16.084px; /* mockup-scale literal */
line-height: 23.232px;
color: var(--bt-text-default);
}
.bt-page .bt-overview__card-copy {
margin-top: 7.918px; /* copy top 51.7 per comp */
font-size: 12.744px; /* mockup-scale literal */
line-height: 19.117px;
color: var(--bt-text-default);
}
.bt-page .bt-overview__card-illo {
display: block;
width: 266.273px; /* designed box, incl. circle button */
height: 186.749px;
margin: 38.173px auto 0; /* illo top 108.99 per comp */
}
.bt-page .bt-overview__card-btn {
display: flex;
align-items: center;
justify-content: center;
width: 142.966px;
height: 43.445px;
margin: 7.25px auto 0; /* button top 302.99 per comp */
border: 0.894px solid #8f8f8f; /* mockup-only grey (no token) */
border-radius: 3.574px;
background: var(--bt-white);
font-weight: 500;
font-size: 14.297px; /* mockup-scale literal */
line-height: 21.445px;
color: var(--bt-text-default);
}
/* ---- degradation: 1025..1226px — panel narrower than the 1147px window,
so let the window and cards flex instead of clipping card content ---- */
@media (max-width: 1226px) {
.bt-page .bt-overview__window {
left: 50%;
width: calc(100% - 80px);
max-width: 1147px;
}
.bt-page .bt-overview__card {
flex: 1 1 0;
width: auto;
min-width: 0;
}
}
/* ---- ≤1024: static flow, panel auto height, window uncropped ---- */
@media (max-width: 1024px) {
.bt-page .bt-overview {
height: auto;
padding: 56px 0 0;
}
.bt-page .bt-overview__glow { display: none; }
.bt-page .bt-overview__title {
position: static;
transform: none;
width: auto;
margin: 0 auto;
font-size: clamp(34px, 4.3vw, 44px);
}
.bt-page .bt-overview__panel {
position: static;
transform: none;
width: calc(100% - 48px);
height: auto;
margin: 32px auto 0;
padding: 32px 24px 0;
}
.bt-page .bt-overview__tabs {
position: relative; /* stays the pill's anchor box */
top: auto;
left: auto;
transform: none;
width: fit-content;
max-width: 100%;
height: auto;
min-height: 53px;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
row-gap: 8px;
white-space: normal;
}
/* static flow: stack the three slides in one grid cell so the panel's
height stays stable during a swap (grid items establish independent
formatting contexts, so the intro's top margin stays inside) */
.bt-page .bt-overview__slides {
position: static;
display: grid;
}
.bt-page .bt-overview__slide {
position: static;
grid-area: 1 / 1;
}
.bt-page .bt-overview__intro {
position: static;
transform: none;
width: min(624px, 100%);
margin: 40px auto 0;
}
.bt-page .bt-overview__window {
position: static;
transform: none;
width: 100%;
max-width: 1147px;
height: auto;
margin: 44px auto 0;
border-radius: 29.572px 29.572px 0 0; /* flush with panel bottom, like the comp's crop */
box-shadow: 12px 12px 0 rgba(0, 11, 80, 0.25);
}
.bt-page .bt-overview__screen { height: auto; }
.bt-page .bt-overview__screen-body { padding-bottom: 0; }
.bt-page .bt-overview__cards { flex-wrap: wrap; }
.bt-page .bt-overview__card {
height: auto;
padding-bottom: 24px;
}
}
/* ---- ≤768: exact XS comps (Figma 3308:23576/23599/23622, 390x814 each) ----
48 top pad, title 36px (3 lines via the two
s), panel 40 below title
with 20px gutters, tab bar clipped at the panel's right edge exactly like
the comps (scroll-x with hidden scrollbar keeps the clipped labels
reachable; JS centers the activated tab in the bar viewport, clamped at
the scroll ends), intro at 28px headline / 24 stack gap, and one shared
XS mockup treatment on every slide: the 328x229 pre-cropped window image
at a 22px left inset, flush with the panel's right and bottom edges. ---- */
@media (max-width: 768px) {
.bt-page .bt-overview { padding: 48px 0 32px; }
.bt-page .bt-overview__title {
font-size: 36px; /* XS headline-2 mode */
/* The host owns .bt-container geometry, and its desktop gutters can be
wider than the XS comp's 20px grid margin. Expand symmetrically past
the container padding (same pattern as the hero) up to 370px — the
comp's 350px column plus a 20px allowance for the placeholder serif,
whose line 1 runs ~366px (a centered line that overflows its box
would get start-aligned and clipped). Season Mix's 346px line 1
centers identically to the comp in either box. */
max-width: none; /* the desktop 100% cap would
defeat the expansion */
margin-left: min(0px, calc((100% - min(370px, 100vw - 20px)) / 2));
margin-right: min(0px, calc((100% - min(370px, 100vw - 20px)) / 2));
}
/* degradation below the 390 comp: shrink so the nowrap line 1 stays
inside the viewport on 320-375px devices (36px == 9.23vw at 390) */
@media (max-width: 375px) {
.bt-page .bt-overview__title { font-size: 9.2vw; }
}
.bt-page .bt-overview__br--xs { display: inline; }
.bt-page .bt-overview__panel {
width: calc(100% - (2 * var(--bt-site-gutter))); /* 350 at 390 */
margin-top: 40px; /* panel y 194 - title bottom 154 */
padding: 24px 0 0; /* bar y 24; children own the sides */
}
.bt-page .bt-overview__tabs-scroll {
overflow-x: auto;
scrollbar-width: none; /* comp shows no scrollbar */
padding: 0 24px; /* symmetric (was left-only 24 per
the clipped-bar comp) so the
fitting bar centers true */
}
.bt-page .bt-overview__tabs-scroll::-webkit-scrollbar { display: none; }
.bt-page .bt-overview__tabs {
margin: 0 auto; /* center in the panel (Aug 2026
feedback); auto margins fall to
0 if the bar ever overflows, so
the scroll fallback still works */
width: max-content; /* single-verb labels usually fit
the panel now; the scroll wrap
stays as clip/reach safety */
max-width: none;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 8px;
padding: 4px;
white-space: nowrap;
}
.bt-page .bt-overview__intro {
/* intro y 109 = 24 + 53 + 32; the 59 bottom margin is the comp's gap to
the mockup image (32 stack gap + the window's 27px top reveal inside
its clip box) */
margin: 32px auto 59px;
width: min(624px, calc(100% - 48px)); /* 302 at 390 */
}
.bt-page .bt-overview__headline { font-size: 28px; } /* XS headline-3 mode */
.bt-page .bt-overview__lede { margin-top: 24px; } /* XS stack gap 32 -> 24 */
.bt-page .bt-overview__window { display: none; } /* every slide swaps its
desktop window for the
XS mockup image */
/* One shared XS mockup treatment (the three comps agree): each slide is a
flex column whose mockup image sits flush with the panel's bottom edge.
The slides share one grid cell, so the tallest slide sizes the panel;
margin-top:auto absorbs any intro-height difference in the shorter
slides (all gaps are exactly 59px when the intros match the comps'
shared 191px height), keeping every mockup glued to the bottom during
swaps. The panel's own radius clips the bottom-right corner. */
.bt-page .bt-overview__slide {
display: flex;
flex-direction: column;
}
.bt-page .bt-overview__mobile-window {
display: block;
width: calc(100% - 22px); /* 328 at 390, flush right */
height: auto;
margin: auto 0 0 22px; /* window x 22, bottom-anchored */
border-top-left-radius: 10.184px; /* window corner; re-clips the
flattened notch in the export */
}
}
/* ---- animated artwork (cs-slider) ----
js/98-motion.js fetches assets/overview/motion-cs-slider.svg (viewBox
1360x555 — the full panel width by the window band; the app window sits at
103,16 inside the canvas, exactly where the static windows render at 1440:
panel-relative 103,322 with the canvas bottom on the panel bottom, since
306 + 555 = 861) into this one SHARED holder and sets
data-bt-motion="armed" on the section; the artwork then follows the tabs
via bt-overview:slide. DELIBERATE deviation from the motion playbook's
PNG-in-holder fallback: the per-slide static windows stay in the DOM as the
no-JS / reduced-motion / fetch-failure fallback. Both the statics-hiding
rule and the holder reveal are scoped to (min-width: 769px), so mobile
always keeps the XS mockups regardless of the armed attribute. */
.bt-page .bt-overview__artwork { display: none; }
@media (min-width: 769px) {
.bt-page .bt-overview[data-bt-motion="armed"] .bt-overview__window {
display: none;
}
.bt-page .bt-overview[data-bt-motion="armed"] .bt-overview__artwork {
display: block;
position: absolute;
bottom: 0; /* SVG canvas bottom == panel bottom */
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 1360px;
/* pins the box to the SVG's geometry so the swap can't shift layout */
aspect-ratio: 1360 / 555;
z-index: 1; /* slides layer; the tab bar stays above (2) */
pointer-events: none; /* decorative — never intercept tab clicks or
text selection in the intro copy */
}
.bt-page .bt-overview__artwork svg {
display: block;
width: 100%;
height: auto;
}
/* the SVG's names the licensed font (GT America, weight 500 via its
own attributes); route the family through the token stack so the
placeholder grotesque renders until the host loads the licensed one */
.bt-page .bt-overview__artwork text {
font-family: var(--bt-font-text);
}
}
/* 769-1024: the panel is static flow (auto height) and the slides keep only
their intro copy when armed, so the holder joins the flow after them with
the same rhythm the static window used at this breakpoint. The panel's
padding-bottom is 0 here, so the artwork stays flush with the panel bottom
like the comps' crop. */
@media (min-width: 769px) and (max-width: 1024px) {
.bt-page .bt-overview[data-bt-motion="armed"] .bt-overview__artwork {
position: static;
transform: none;
margin: 44px auto 0;
}
}
/* ===== 03-lifestyle.css ===== */
/* ==========================================================================
03-lifestyle.css — "Always working to save you on taxes." + lifestyle banner
Desktop: Figma node 3308:24388 (1440x1057):
- "Headline & Text" instance, 1440x295 (pt 80 / pb 32 / gap 48)
- "Media" banner 1362x714, centered (39px insets at 1440 — a
near-full-bleed rounded card, NOT container-content-edge aligned),
radius 20, photo + brown multiply gradient + white overlay copy.
Overlay geometry (banner-local px): padding 89 top / 85 left / 41 right.
Rev 3 (Aug 2026, Michelle — For-Paper-Tiger node 309:2611): overlay type
de-emphasized for hierarchy vs the section header, stat cluster moved to
the top-RIGHT: headline w 368 at 36px; stat cluster w 589 at x733
(kicker rule ends x1277, 45 short of the cluster edge; 248px "70%"
column at 104px beside a 341px copy column: lead 32px, support GT
Medium 18px w 340). Section bg is cream at both edges.
XS: Figma node 3308:24513 (390x825): intro pt 48 / gap 40 / pb 32 at
36/16px; banner becomes a portrait 350x500 card (p 32, title top / stat
bottom, vertical gradients); disclosure sits BELOW the card on cream
(9px, muted). Exact XS values live in the ≤768 block.
========================================================================== */
.bt-page .bt-lifestyle {
background: var(--bt-cream);
padding-bottom: 96px; /* cream below the banner card before the navy
accordion — deliberate 96 (Aug 2026, user call),
a step past the 72px inter-section standard
used elsewhere (was comp 48) */
}
/* ---- intro: Headline & Text ---- */
.bt-page .bt-lifestyle__intro {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--bt-space-2xl); /* 40px title -> lede (Aug 2026 user call,
was 48; matches the XS gap) */
padding-top: 72px; /* standard inter-section gap (= the overview headline's
72px seam offset), Aug 2026 — was 80 */
padding-bottom: var(--bt-space-xl); /* 32 */
text-align: center;
}
.bt-page .bt-lifestyle__title {
font-family: var(--bt-font-headline);
font-weight: var(--bt-weight-headline);
font-size: var(--bt-headline-2); /* 44px */
line-height: 1.1;
color: var(--bt-navy);
max-width: 894px;
text-box: trim-both cap alphabetic;
}
.bt-page .bt-lifestyle__lede {
font-size: var(--bt-body-1); /* 18px */
line-height: 1.35;
color: var(--bt-navy);
max-width: 630px;
text-box: trim-both cap alphabetic;
}
/* ---- banner card ----
The wrap owns the card's width/centering and anchors the disclosure:
overlaid on the card at desktop, in flow below it at ≤1024. */
.bt-page .bt-lifestyle__banner-wrap {
position: relative;
width: min(1362px, calc(100% - 78px)); /* 39px side insets at 1440 */
margin: 0 auto;
}
.bt-page .bt-lifestyle__banner {
position: relative;
isolation: isolate; /* keep the multiply blend inside the card */
height: 714px;
padding: 89px 41px 0 85px; /* comp offsets: title/stat top 89, left 85 */
border-radius: 20px; /* banner-specific radius (comp), between tokens */
overflow: hidden;
color: var(--bt-text-overlay);
}
/* is absolutely positioned so it leaves the flow entirely —
an in-flow empty inline would add a strut line box above the copy. */
.bt-page .bt-lifestyle__media {
position: absolute;
inset: 0;
}
.bt-page .bt-lifestyle__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Figma crop window of the source photo: y 374-1864 of 1949, x from 0 */
object-position: left 85%;
}
/* Brown multiply wash, dark on the left (Figma layer "grd"):
1492.56x829.2 at left -55.28, vertically centered 57.57px above middle */
.bt-page .bt-lifestyle__grd {
position: absolute;
left: -55.28px;
top: calc(50% - 57.57px);
transform: translateY(-50%);
width: calc(100% + 130.56px);
height: 829.2px;
background: linear-gradient(to left, rgba(177, 99, 49, 0), #3f220f); /* one-off comp gradient */
mix-blend-mode: multiply;
opacity: 0.7;
pointer-events: none;
}
/* Black bottom shade (XS comp Shape 3308:24518). The desktop comp carries
an equivalent gradient fill on the Media node itself, but it sits BEHIND
the opaque photo layer there — invisible — so it only renders at ≤768. */
.bt-page .bt-lifestyle__shade {
display: none;
}
/* ---- overlay copy ---- */
.bt-page .bt-lifestyle__banner-inner {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* 70px gap between title and stat at 1440 */
align-items: flex-start;
row-gap: var(--bt-space-2xl);
}
.bt-page .bt-lifestyle__banner-title {
font-family: var(--bt-font-headline);
font-weight: var(--bt-weight-headline);
font-size: var(--bt-headline-3); /* 36px — de-sized per 309:2611 */
line-height: 1.2;
width: 368px;
max-width: 100%;
text-box: trim-both cap alphabetic;
}
.bt-page .bt-lifestyle__stat {
flex: 0 0 auto;
width: 589px; /* cluster x 733->1322 per 309:2611 */
max-width: 100%;
}
/* kicker row: NEARLY + rule line (rule x 81.47->544 of the 589 cluster) */
.bt-page .bt-lifestyle__stat-kicker {
display: flex;
align-items: center;
gap: var(--bt-space-base); /* 12px */
margin-bottom: 9px; /* "70%" top 120 minus kicker bottom 110.9 */
}
.bt-page .bt-lifestyle__stat-kicker-text {
font-weight: 500; /* GT America Medium */
font-size: 19px; /* 19.001 in comp */
line-height: 1.15;
letter-spacing: 0.95px;
text-transform: uppercase;
font-feature-settings: "lnum" 1, "tnum" 1;
}
.bt-page .bt-lifestyle__stat-rule {
display: block;
flex: 1 1 auto;
height: 1.34px; /* exported stroke width 1.33634 */
margin-right: 45px; /* rule ends x1277, 45 short of the cluster edge */
}
.bt-page .bt-lifestyle__stat-row {
display: flex;
align-items: flex-start;
}
.bt-page .bt-lifestyle__stat-number {
flex: 0 0 248px; /* "70%" column: x 733->981 per 309:2611 */
font-family: var(--bt-font-headline);
font-weight: var(--bt-weight-headline);
font-size: 104px; /* display one-off, de-sized per 309:2611 */
line-height: 1;
}
.bt-page .bt-lifestyle__stat-copy {
flex: 1 1 0;
min-width: 0;
margin-top: 18px; /* lead top 138 minus number top 120 */
}
.bt-page .bt-lifestyle__stat-lead {
font-family: var(--bt-font-headline);
font-weight: var(--bt-weight-headline);
font-size: 32px; /* display one-off, de-sized per 309:2611 */
line-height: 1.2;
}
.bt-page .bt-lifestyle__stat-support {
font-weight: 500; /* GT America Medium */
font-size: 18px; /* one-off, de-sized per 309:2611 */
line-height: 1.35;
max-width: 340px;
margin-top: 7px; /* support top 222 minus lead bottom ~214.8 */
}
/* Desktop: white, centered, overlaid near the card's bottom edge.
(Anchored to the wrap, whose height equals the card's at desktop.) */
.bt-page .bt-lifestyle__disclosure {
position: absolute;
left: 50%;
bottom: 28px; /* 309:2611: top 640, 3 licensed-font lines end ~28 above
the card edge (Michelle: more room under the disclosure);
the placeholder font runs 4 lines and rises a bit higher */
transform: translateX(-50%);
width: 812px; /* 811.925 in comp */
max-width: calc(100% - 48px);
font-size: 11.5px; /* 11.517 in comp */
line-height: 1.35;
text-align: center;
color: var(--bt-text-overlay);
text-box: trim-both cap alphabetic;
}
/* ---- ≤1024: graceful degradation (no tablet comps in file) ---- */
@media (max-width: 1024px) {
.bt-page .bt-lifestyle__intro {
padding-top: var(--bt-space-3xl);
}
.bt-page .bt-lifestyle__title {
font-size: clamp(34px, 4.3vw, 44px);
}
.bt-page .bt-lifestyle__banner {
height: auto;
padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
}
.bt-page .bt-lifestyle__banner-inner {
flex-direction: column;
row-gap: var(--bt-space-xl);
}
.bt-page .bt-lifestyle__banner-title {
font-size: clamp(28px, 3vw, 36px);
width: auto;
max-width: 520px;
}
.bt-page .bt-lifestyle__stat {
width: 100%;
}
.bt-page .bt-lifestyle__stat-row {
gap: var(--bt-space-lg);
}
.bt-page .bt-lifestyle__stat-number {
flex-basis: auto;
font-size: clamp(64px, 9vw, 96px);
}
.bt-page .bt-lifestyle__stat-copy {
margin-top: 10px;
}
.bt-page .bt-lifestyle__stat-lead {
font-size: clamp(24px, 3vw, 30px);
}
.bt-page .bt-lifestyle__stat-support {
font-size: clamp(16px, 2vw, 18px);
}
/* In-flow fix pattern kept: at ≤1024 the card is height:auto, so an
absolute bottom-anchored disclosure would overlap the stat copy.
It now lives after the card inside the wrap — static flow puts it
below the card on the cream background (per the XS comp), so it
swaps to muted-on-cream instead of white-on-photo. */
.bt-page .bt-lifestyle__disclosure {
position: static;
transform: none;
width: auto;
max-width: 100%;
margin-top: var(--bt-space-base); /* 12 — XS comp card->caption gap */
text-align: left;
color: var(--bt-text-muted);
}
}
/* ---- ≤768: exact XS comp (Figma node 3308:24513, 390x825) ---- */
@media (max-width: 768px) {
.bt-page .bt-lifestyle {
/* XS comp drew the caption flush (the old mobile order put cream-on-cream
below it); since the Aug 2026 reorder the NAVY accordion follows —
96px cream below the disclosure, matching the desktop ending
(Aug 2026, user call; was 32) */
padding-bottom: 96px;
}
.bt-page .bt-lifestyle__br {
display: none; /* let the headline and stat lead wrap naturally */
}
/* intro (3308:24514): pt 48 / gap 40 / pb 32 */
.bt-page .bt-lifestyle__intro {
gap: var(--bt-space-2xl); /* 40 */
}
.bt-page .bt-lifestyle__title {
font-size: var(--bt-headline-3); /* Headline 2 at XS = 36px */
}
.bt-page .bt-lifestyle__lede {
font-size: var(--bt-body-2); /* Body 1 at XS = 16px */
max-width: 350px;
}
/* banner card (design rev 367:2721, Aug 2026): portrait 350x484 within
20px margins; title top (pt 40), stat cluster bottom */
.bt-page .bt-lifestyle__banner-wrap {
width: calc(100% - 40px); /* XS 20px margins */
}
.bt-page .bt-lifestyle__banner {
height: 484px;
padding: 40px 32px 32px; /* title top 40; sides/bottom 32 (comp 31.74) */
/* the design asset bakes its rounded corners (transparent) — the card
fill behind them per the node (design primitives, not base tokens) */
background: linear-gradient(4deg, #1d6ae5 22.9%, #000b55 54.4%);
}
.bt-page .bt-lifestyle__photo {
object-position: center; /* design asset IS the XS crop window */
}
/* brown wash per 367:2721 grd: fade starts at 33%, multiply */
.bt-page .bt-lifestyle__grd {
left: 0;
top: 0;
transform: none;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(177, 99, 49, 0) 33%, #3f220f);
}
/* 367:2721 carries no black shade layer (the old XS comp 3308:24518 did) */
.bt-page .bt-lifestyle__shade {
display: none;
}
/* title pinned top, stat cluster pinned bottom of the 500px card */
.bt-page .bt-lifestyle__banner-inner {
height: 100%;
flex-wrap: nowrap;
justify-content: space-between;
}
.bt-page .bt-lifestyle__banner-title {
font-size: 28px; /* Headline 2 at XS per 367:2721 (was 36) */
line-height: 1.2;
max-width: none;
}
/* stat cluster (367:2721): NEARLY / rule / 70% / lead / support stack
with gaps 8 / 8 / 4 / 5 */
.bt-page .bt-lifestyle__stat-kicker {
flex-direction: column;
align-items: stretch;
gap: 8px; /* XS: rule sits under NEARLY */
margin-bottom: 8px;
}
.bt-page .bt-lifestyle__stat-kicker-text {
font-size: 12.27px; /* 367:2750 */
letter-spacing: 0.61px;
}
.bt-page .bt-lifestyle__stat-rule {
flex: 0 0 auto;
width: 100%;
height: 1.72px; /* 367:2751 stroke */
margin-right: 0;
}
.bt-page .bt-lifestyle__stat-row {
flex-direction: column;
gap: 4px; /* XS: "70%" -> lead */
}
.bt-page .bt-lifestyle__stat-number {
font-size: 67.2px; /* 367:2753 */
}
.bt-page .bt-lifestyle__stat-copy {
margin-top: 0;
}
.bt-page .bt-lifestyle__stat-lead {
font-size: 20.67px; /* 367:2755 */
line-height: 1.2;
max-width: 198px; /* design text box — breaks after "using" in the
licensed font */
}
.bt-page .bt-lifestyle__stat-support {
font-size: 11.63px; /* 367:2756 */
line-height: 1.35;
max-width: none;
margin-top: 5px; /* lead bottom 49.6 -> support top 54.26 */
}
/* caption below the card on cream (3308:24528): 350x72 */
.bt-page .bt-lifestyle__disclosure {
font-size: 9px; /* Disclosure 2 at XS */
text-box: normal; /* XS caption carries no cap trim */
}
}
/* ===== 04-accordion.css ===== */
/* ==========================================================================
04-accordion.css — "Common questions. Real answers." FAQ accordion
Source: Figma pWDFgjuzzoe3V6oLvJZ3bK node 3308:24403 ("Section", 1440x813,
navy; identical to original 25617:15882) + exact XS comp 3308:24769
(390x971) for the <=768 block.
All selectors scoped under .bt-page (host site also uses bt- prefix).
No geometry on .bt-container — the host's global rule sizes it.
========================================================================== */
.bt-page .bt-accordion {
/* Aug 2026 (user call): the live site's FAQ blue — given as #1c69e5,
1/255 per channel off --bt-blue #1d6ae5. The CTA sky below opens flat
#1d6ae5, so FAQ + CTA read as one continuous blue block (the 1-unit
seam is imperceptible). Text in this section is already white. */
background: #1c69e5;
padding-top: 72px; /* standard inter-section gap (= the overview headline's
72px seam offset), Aug 2026 — comp drew 80 */
padding-bottom: var(--bt-space-4xl); /* 80px, per comp (hard seam into the
CTA illustration — left as comp) */
color: var(--bt-text-overlay);
}
/* two-column row: 630 + 20 + 630, centered — inside the host's 1440
container this lands the columns at exactly x=80/x=730 at 1440w */
.bt-page .bt-accordion__columns {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: var(--bt-grid-gap); /* 20px */
}
.bt-page .bt-accordion__intro,
.bt-page .bt-accordion__list {
flex: 1 0 0;
min-width: 1px;
max-width: 630px; /* comp column width */
}
.bt-page .bt-accordion__intro {
padding-bottom: var(--bt-space-3xl); /* 48px, comp left Stack */
}
.bt-page .bt-accordion__title {
/* Aug 2026 stakeholder feedback: every h2 runs Headline 2 — was the one
h2 at Headline 3/36 (comp). The 630px column owns the wrap now (the
comp's 413px title box would force 3 lines at 54). */
max-width: none;
font-family: var(--bt-font-headline);
font-weight: var(--bt-weight-headline); /* Season Mix Medium */
font-size: var(--bt-headline-2); /* Display/Headline 2: 44px */
line-height: 1.1;
letter-spacing: 0;
color: var(--bt-text-overlay);
text-box: trim-both cap alphabetic; /* progressive enhancement: Figma cap trim */
}
/* ---- item list ---- */
.bt-page .bt-accordion__list {
display: flex;
flex-direction: column;
gap: var(--bt-space-xl); /* 32px between items, per comp */
}
.bt-page .bt-accordion__item {
width: 100%;
padding-bottom: var(--bt-space-xl); /* 32px above the divider */
/* divider: grey-10 at 20% on navy (Figma border-muted in this dark theme;
rgba fallback mirrors the same values for non-color-mix browsers) */
border-bottom: 1px solid rgba(245, 245, 245, 0.2);
border-bottom-color: color-mix(in srgb, var(--bt-grey-10) 20%, transparent);
}
.bt-page .bt-accordion__heading {
font-size: inherit; /* neutralize UA h3 styling; real type is on the spans */
font-weight: inherit;
line-height: inherit;
}
.bt-page .bt-accordion__trigger {
display: flex;
align-items: center;
gap: var(--bt-space-lg); /* 24px title-to-icon, per comp */
width: 100%;
text-align: left;
color: var(--bt-text-overlay);
}
/* base :focus-visible outline is blue — too low-contrast on navy */
.bt-page .bt-accordion__trigger:focus-visible {
outline-color: var(--bt-white);
}
.bt-page .bt-accordion__question {
flex: 1 0 0;
min-width: 1px;
font-family: var(--bt-font-text);
font-weight: 500; /* Display/Subhead 3: GT America Medium */
font-size: var(--bt-subhead-3); /* 20px */
line-height: 1.35;
letter-spacing: 0;
text-box: trim-both cap alphabetic;
}
.bt-page .bt-accordion__icon {
flex: 0 0 auto;
width: 20px; /* designed icon box */
height: 20px;
color: var(--bt-white); /* chevron paths use currentColor */
}
.bt-page .bt-accordion__chevron {
display: block;
width: 20px;
height: 20px;
}
/* comp swaps glyphs between states: up when expanded, down when collapsed */
.bt-page .bt-accordion__trigger[aria-expanded="true"] .bt-accordion__chevron--down,
.bt-page .bt-accordion__trigger[aria-expanded="false"] .bt-accordion__chevron--up {
display: none;
}
/* ---- panel expand/collapse ----
Open is the no-JS default (fully readable without JS); JS adds
.bt-accordion__item--collapsed to close. Animated via grid-template-rows;
00-base.css's prefers-reduced-motion guard zeroes the duration — no
additional motion is added that could bypass it. */
.bt-page .bt-accordion__panel {
display: grid;
grid-template-rows: 1fr;
visibility: visible;
}
.bt-page .bt-accordion__panel-inner {
min-height: 0;
overflow: hidden;
}
.bt-page .bt-accordion__body {
max-width: 522px; /* comp body width */
padding-top: var(--bt-space-lg); /* 24px title-to-body gap; sits inside the
clipped box so it collapses with it */
font-size: var(--bt-body-3); /* Text/Body 3: 14px */
line-height: 1.5;
letter-spacing: 0;
text-box: trim-both cap alphabetic;
padding-bottom: 0.4em; /* descender allowance: alphabetic trim ends the box
at the baseline, and the panel's overflow:hidden
would clip the last line's descender ink (Figma
renders that ink outside the trimmed box) */
}
.bt-page .bt-accordion__item--collapsed .bt-accordion__panel {
grid-template-rows: 0fr;
visibility: hidden; /* out of AT + hit-testing once closed; flips at the
end of the collapse, start of the expand */
}
/* transitions switch on only after JS applies the initial state, so the
load-time collapse to "first open, rest closed" doesn't animate */
.bt-page .bt-accordion--animate .bt-accordion__panel {
transition: grid-template-rows 0.3s ease, visibility 0.3s;
}
/* ---- 769-1024: interpolation between the 1440 and 390 comps ---- */
@media (max-width: 1024px) {
.bt-page .bt-accordion__intro,
.bt-page .bt-accordion__list {
flex: 1 1 100%;
max-width: none;
}
.bt-page .bt-accordion__intro {
padding-bottom: var(--bt-space-md);
}
.bt-page .bt-accordion__title {
max-width: none;
font-size: clamp(26px, 4vw, 36px); /* matches base .bt-type-h3 clamp */
}
}
/* ---- <=768: exact XS comp (3308:24769, 390x971) ----
Measured geometry: section padding 48 top/bottom; columns at x=20
(host container's 20px XS gutter), 350 wide; title row 350x54; intro
stack 94 tall (54 title + 40 pad); 16px row gap between the stacked
columns; items 169(open)/93/69/52 tall — which back out to question
18px (lh 1.35), body 14px, trigger gap 24, item gap 32 and item
padding-bottom 32 (the desktop values — so no overrides for those). */
@media (max-width: 768px) {
.bt-page .bt-accordion {
padding-top: var(--bt-space-3xl); /* 48px */
padding-bottom: var(--bt-space-3xl); /* 48px */
}
.bt-page .bt-accordion__columns {
gap: var(--bt-space-md) var(--bt-grid-gap); /* 16px row gap when stacked */
}
.bt-page .bt-accordion__intro {
padding-bottom: var(--bt-space-2xl); /* 40px: XS intro stack 94 - 54 title */
}
.bt-page .bt-accordion__title {
font-size: 36px; /* Aug 2026, user call: match the other section
headers' XS size (overview/lifestyle/cta all run
36) — was 28 (XS comp's Headline 3, title row
350x54); the title area grows past the comp's
54px row by design. */
}
.bt-page .bt-accordion__question {
font-size: 18px; /* XS Display/Subhead 3 (collapsed items 52/69/93) */
}
}
/* ===== 05-cta.css ===== */
/* ==========================================================================
05-cta.css — "CTA Banner Big" + bottom "gdr" gradient strip
Rev 3 (Aug 2026): For-Paper-Tiger desktop 387:3693 (1440x797) + XS
387:4086 (390x500) — CSS sky gradient + flat journey illustration
(dunes/truck, no sun), gold CTA. The FAQ section above runs the host
site's #1c69e5 blue and this sky opens flat #1d6ae5 (1/255 apart), so
the two sections read as one continuous blue block.
The gdr strip fades the illustration into the footer navy (--bt-navy)
so the host footer directly beneath seams invisibly.
========================================================================== */
.bt-page .bt-cta {
position: relative;
height: 797px; /* Figma frame height */
min-height: 500px;
overflow: hidden; /* frame clips the 800px-tall noise layer */
isolation: isolate; /* contain the soft-light blend inside the section */
/* 387:3693 sky: the design's gradient box runs y -40..847 with the flat
#1d6ae5 region ending 54px into the frame — px stops keep that mapping
exact on the fixed 797 frame. Endpoints are design-system primitives
(Blue / mid #5e99f2 / Light Blue), not base tokens. */
background: linear-gradient(180deg, #1d6ae5 54px, #5e99f2 436px, #9ec9ff 600px);
}
/* Journey artwork — the design team's full-frame export (1440x797 at 2x,
hubfs-hosted): sky, dunes/truck and the bottom navy fade are all baked,
so it simply covers the section; the CSS sky gradient behind it is the
pre-load fallback. Its top row is flat #1d6ae5 (the FAQ seam) and its
bottom row lands within 1/255 of the footer navy — the gdr overlay
below still pins the last pixel row exactly. */
.bt-page .bt-cta__art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none; /* base reset caps img at 100% of natural */
object-fit: cover;
object-position: center bottom;
}
/* XS art (387:4087 export) — swapped in at <=768; hidden here so desktop
never renders or lazy-fetches it */
.bt-page .bt-cta__art--xs { display: none; }
/* ---- content ---- */
.bt-page .bt-cta__content {
position: relative; /* paint above the absolutely-positioned art */
display: flex;
flex-direction: column;
align-items: center;
gap: var(--bt-space-xl); /* 32px Stack gap */
padding-top: 96px; /* 387:3693 title top */
}
.bt-page .bt-cta__title {
font-family: var(--bt-font-headline);
font-weight: var(--bt-weight-headline); /* Season Mix Medium */
font-size: var(--bt-headline-2); /* Display/Headline 2: 44px */
line-height: 1.1; /* per 387:3693 (two-line title) */
letter-spacing: 0;
color: var(--bt-text-overlay);
text-align: center;
max-width: 970px; /* Figma text-box width */
/* cap-height trim, progressive enhancement (matches Figma text-box) */
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
text-box: trim-both cap alphabetic;
}
.bt-page .bt-cta__actions {
padding-top: var(--bt-space-base); /* 12px extra above the CTA per comp */
}
/* base :focus-visible outline is blue — invisible on this blue artwork */
.bt-page .bt-cta .bt-btn:focus-visible {
outline: 2px solid var(--bt-white);
outline-offset: 3px;
}
/* ---- overlays ---- */
/* Grain overlay (Figma Noise layer, soft-light). Sits above the content
in Figma's layer order, so it stays after the content in the DOM. */
.bt-page .bt-cta__noise {
position: absolute;
inset: 0;
mix-blend-mode: soft-light;
pointer-events: none;
}
.bt-page .bt-cta__noise img {
width: 100%;
height: 100%; /* SVG has preserveAspectRatio="none" */
max-width: none;
}
/* "top-gdr" (Aug 2026, design flag via Jose — hard line at the FAQ/CTA
boundary): the FAQ above ends in FLAT #1c69e5 while the CTA's first
row starts the baked sky (#1d6ae5 mean with ~1/255 dither) PLUS the
soft-light noise overlay — a razor edge between a flat field and a
textured one reads as a hard line (the 1/255 hue step Mach-bands it).
NOT caused by the Aug-2026 refined art: its top rows are byte-equal to
the old export's. Fix = the handoffs' alpha-ramp technique: start the
overlay at the FAQ's exact flat (#1c69e5 — the deliberate 1/255
pairing in 04-accordion.css is untouched) and fade to transparent so
hue + grain arrive gradually. Must paint ABOVE the noise layer (the
markup div sits after .bt-cta__noise). ROLLBACK: delete this block,
the XS height override below, and the .bt-cta__topgdr div in
sections/05-cta.html. */
.bt-page .bt-cta__topgdr {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 96px;
background: linear-gradient(180deg, #1c69e5 0%, rgba(28, 105, 229, 0) 100%);
pointer-events: none;
}
/* "gdr": 104px fade (387:3779) to the footer navy. The design's endpoint
IS #000b50 here; keep var(--bt-navy) so the embed's last pixel row is
exactly the footer color and the seam cannot show. */
.bt-page .bt-cta__gdr {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 104px;
background: linear-gradient(180deg, rgba(0, 11, 80, 0) 0%, var(--bt-navy) 99.963%);
pointer-events: none;
}
/* ---- responsive: 769-1024 is interpolation; <=768 is the exact XS comp ---- */
@media (max-width: 1024px) {
.bt-page .bt-cta {
height: auto;
min-height: 640px;
}
.bt-page .bt-cta__content {
padding-top: 96px;
padding-bottom: 420px; /* keep the truck artwork visible */
}
.bt-page .bt-cta__title {
font-size: clamp(40px, 4.3vw, 44px); /* interpolates to the 44px base */
}
.bt-page .bt-cta__br {
display: none; /* let the headline wrap naturally */
}
}
/* Exact XS design rev 387:4086 (Aug 2026, 390x500): vertical 3-stop sky +
the XS journey export bottom-anchored. */
@media (max-width: 768px) {
.bt-page .bt-cta {
height: 500px; /* XS frame height */
min-height: 0; /* release the 1024 interpolation min-height */
/* 387:4086 sky on the 500 frame: flat #1d6ae5 ends 53px in */
background: linear-gradient(180deg, #1d6ae5 53px, #5e99f2 295px, #9ec9ff 398px);
}
.bt-page .bt-cta__art { display: none; }
.bt-page .bt-cta__art--xs {
display: block; /* the XS full-frame export (390x500 at 2x);
cover rules come from the base class */
}
.bt-page .bt-cta__content {
padding-top: 64px; /* XS Stack padding (---bt-space-padding-xl: 64) */
padding-bottom: 0; /* fixed 500px frame needs no flow spacer */
}
.bt-page .bt-cta__title {
font-size: 36px; /* XS headline per 387:4086 */
max-width: 350px; /* XS Title max-width */
}
/* XS comp keeps the 1440x800 noise layer unscaled, anchored top-left */
.bt-page .bt-cta__noise img {
width: 1440px;
height: 800px;
}
/* 387:4086 draws a 56px fade; its raw endpoint #010a4f is 1/255 off the
host footer navy — end on var(--bt-navy) so the embed's last pixel row
seams exactly (same rule as desktop). */
.bt-page .bt-cta__gdr {
height: 56px;
}
/* top-gdr scales down with the XS band (mirrors the gdr 104->56 ratio) */
.bt-page .bt-cta__topgdr {
height: 56px;
}
}
/* ===== 99-assembly.css ===== */
/* ==========================================================================
99-assembly.css — cross-section rules
========================================================================== */
/* Mobile section order (Rev Aug 2026 feedback, Michelle): every width now
keeps the DOM/desktop order — the earlier XS-comp swap (lifestyle before
overview, comp 3308:24509) was reversed by design review so the tax
section follows "Pick your investments" on mobile too. The flex column
stays: it has governed inter-section formatting at <=768 since the swap
era, and dropping it would re-enable margin collapse through .bt-page.
NOTE: order rules would only work in the full-page embed anyway (all
sections inside one .bt-page); separate HubSpot rich-text boxes each get
their own .bt-page wrapper. */
@media (max-width: 768px) {
.bt-page {
display: flex;
flex-direction: column;
}
}