/* ======================================================================== vc-learn.css — SELF-EDUCATION LAYER (search · FAQ · figures · learn hub) RetirePlusPlus Investor Module ($30M Series B) · owner: SHARED-CSS The presentation layer for the "read -> search -> learn -> invest" experience added on top of the deployed Series B module. Powers: - the inline nav search affordance + the full search on the Learn hub (.vc-search, results dropdown/list, mark.vc-hl term highlight), - the categorized, collapsible FAQ (.vc-faq via
/, .vc-faq__cats filter chips, .vc-faq__item), - standalone SVG workflow diagrams (.vc-figure frame + caption) and the responsive workflow gallery (.learn-gallery), - the Learn-hub page layout (.learn-hub) + the how-to-invest process (.learn-steps). TOKENS ONLY. Every value resolves to a vc-tokens.css semantic role or scale token (--bg-*, --text-*, --border-*, --accent-*, --status-*-text, --fs-*, --space-*, --radius-*, --shadow-*, --dur-*, --ease-*, --grad-*, --font-display/ui/data, layout tokens). NO raw hex, NO rgba() literals — tints come from color-mix() over semantic roles, exactly like vc-components.css / vc-b2b2c.css, so dark theme "just works" (the [data-theme="dark"] role swap drives the colours; no per-block dark rules). Mirrors the foundation idioms so the new surfaces are indistinguishable from the existing component layer: -
accordion = list-style:none + ::-webkit-details-marker hidden + a "\25B8" chevron that rotates 90deg on [open] (cf. .scenario- assumptions in vc-b2b2c.css), - focus is the shared box-shadow:var(--focus-ring) treatment, - active filter chip = color-mix(in srgb,var(--accent-primary) 12%, …) (cf. .data-room__cat[aria-selected]), - hit targets >= 2.75rem, font-variant-numeric:tabular-nums on figures. A11y: WCAG 2.1 AA. focus-visible everywhere interactive; combobox/listbox semantics styled for the search; selection is never colour-only (chips + results carry weight/underline/marker changes too); reduced-motion neutral- ises transitions/animations; print collapses the search and expands the FAQ. LOAD ORDER (Learn hub ): … vc-components.css -> vc-utilities.css -> vc-charts.css -> vc-b2b2c.css -> vc-learn.css -> page CSS -> vc-print.css. Owns ONLY the .vc-search / .vc-faq / .vc-figure / .learn-* namespaces + mark.vc-hl; never edits vc-components.css / vc-b2b2c.css. ======================================================================== */ /* ======================================================================== 1. SEARCH (.vc-search) ------------------------------------------------------------------------ Two contexts share these classes: a) inline nav search — a compact combobox that, on submit, jumps to the Learn hub with ?q= (.vc-search--inline), b) the hub's prominent search — full-width, results render inline as a list (.vc-search--hub). Markup contract (set by SEARCH-JS / LEARN, styled here): ======================================================================== */ .vc-search { position: relative; /* anchor for the dropdown variant */ width: 100%; } /* Field shell — icon + input + clear, themed like .vc-form inputs ---------- */ .vc-search__field { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-3); background: var(--bg-surface); border: 0.0625rem solid var(--border-strong); border-radius: var(--radius-md); transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } /* Focus lands on the inner input; lift the ring onto the whole field. */ .vc-search__field:focus-within { border-color: var(--accent-primary); box-shadow: var(--focus-ring); } .vc-search__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--text-muted); pointer-events: none; } .vc-search__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; } .vc-search__input { flex: 1 1 auto; min-width: 0; min-height: 2.625rem; /* field is 2.75rem incl. border */ padding: var(--space-2) 0; border: none; background: transparent; font-family: var(--font-ui); font-size: var(--fs-base); color: var(--text-primary); /* the field draws the ring; suppress the input's own outline */ outline: none; -webkit-appearance: none; appearance: none; } .vc-search__input::placeholder { color: var(--text-muted); } /* hide the native WebKit search decorations (we provide our own clear btn) */ .vc-search__input::-webkit-search-decoration, .vc-search__input::-webkit-search-cancel-button, .vc-search__input::-webkit-search-results-button { -webkit-appearance: none; } /* Clear button — only shown (via [hidden] removal by JS) when there's text. */ .vc-search__clear { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; margin-right: calc(-1 * var(--space-1)); padding: 0; border: none; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font-size: var(--fs-lg); line-height: 1; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .vc-search__clear:hover { background: var(--bg-surface-2); color: var(--text-primary); } .vc-search__clear:focus-visible { outline: 0.125rem solid transparent; box-shadow: var(--focus-ring); } .vc-search__clear[hidden] { display: none; } /* Optional inline submit/go button (nav affordance) ----------------------- */ .vc-search__submit { flex-shrink: 0; min-height: 2.75rem; padding: 0 var(--space-3); border: none; border-radius: var(--radius-md); background: var(--accent-primary); color: var(--text-on-brand); font-family: var(--font-data); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); } .vc-search__submit:hover { background: var(--accent-primary-hover); } .vc-search__submit:focus-visible { outline: 0.125rem solid transparent; box-shadow: var(--focus-ring); } /* ---- Results: shared list look (role="listbox") ------------------------- */ .vc-search__results { list-style: none; margin: 0; padding: var(--space-1); background: var(--bg-elevated); border: 0.0625rem solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* Collapsed by default; JS sets [hidden] off + aria-expanded on the input. */ .vc-search__results[hidden] { display: none; } /* Empty / status row (aria-live) — "No results", hint text, result count. */ .vc-search__status { padding: var(--space-3) var(--space-3); font-family: var(--font-data); font-size: var(--fs-sm); color: var(--text-muted); } .vc-search__result { display: block; padding: var(--space-3) var(--space-3); border-radius: var(--radius-md); color: inherit; text-decoration: none; cursor: pointer; /* left rail telegraphs active state WITHOUT relying on colour alone */ border-left: 0.1875rem solid transparent; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .vc-search__result + .vc-search__result { margin-top: 0.0625rem; } /* hover, keyboard "active descendant", and real focus all read identically */ .vc-search__result:hover, .vc-search__result.is-active, .vc-search__result[aria-selected="true"], .vc-search__result:focus-visible { background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-elevated)); border-left-color: var(--accent-primary); outline: none; text-decoration: none; } .vc-search__result:focus-visible { box-shadow: var(--focus-ring); } .vc-search__result-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .vc-search__result-title { font-family: var(--font-data); font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); line-height: 1.35; } /* result type pill (FAQ / Section / Page) — meaning carried by the label text, tint only reinforces it (color-not-alone). */ .vc-search__result-type { flex-shrink: 0; padding: 0.0625rem var(--space-2); border-radius: var(--radius-pill); font-family: var(--font-data); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 14%, transparent); } .vc-search__result-type--faq { color: var(--accent-secondary); background: color-mix(in srgb, var(--accent-secondary) 16%, transparent); } .vc-search__result-type--section { color: var(--accent-tertiary); background: color-mix(in srgb, var(--accent-tertiary) 16%, transparent); } .vc-search__result-type--page { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 14%, transparent); } .vc-search__result-snippet { margin: var(--space-1) 0 0; font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); /* clamp long snippets to two lines */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vc-search__result-url { display: block; margin-top: var(--space-1); font-family: var(--font-data); font-size: var(--fs-2xs); color: var(--text-muted); word-break: break-word; } /* ---- Matched-term highlight (mark.vc-hl) -------------------------------- */ /* High-contrast in BOTH themes: tint from the partner accent + inherit text colour so the surrounding text contrast is preserved (no white-on-yellow). */ mark.vc-hl { padding: 0 0.125rem; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--accent-partner) 30%, transparent); color: inherit; font-weight: 700; } /* ---- Variant a) inline nav search — results FLOAT as a dropdown --------- */ .vc-search--inline .vc-search__results { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; z-index: 320; /* above .vc-nav (z 300) */ max-height: min(60vh, 26rem); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* keep the inline field compact in the nav */ .vc-search--inline { max-width: 18rem; } /* ---- Variant b) hub search — results render in normal flow -------------- */ .vc-search--hub { max-width: var(--max-width-prose); margin-inline: auto; } .vc-search--hub .vc-search__field { min-height: 3.25rem; padding: 0 var(--space-4); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } .vc-search--hub .vc-search__input { font-size: var(--fs-lg); } .vc-search--hub .vc-search__icon { width: 1.5rem; height: 1.5rem; } .vc-search--hub .vc-search__results { position: static; margin-top: var(--space-3); box-shadow: var(--shadow-sm); } /* Suggested-query hints (gtm.searchHints) under the hub field ------------- */ .vc-search__hints { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); list-style: none; padding: 0; } .vc-search__hints-label { font-family: var(--font-data); font-size: var(--fs-xs); color: var(--text-muted); } .vc-search__hint { min-height: 2rem; padding: var(--space-1) var(--space-3); border: 0.0625rem solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--text-secondary); font-family: var(--font-data); font-size: var(--fs-xs); font-weight: 500; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .vc-search__hint:hover { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); border-color: var(--accent-primary); color: var(--accent-primary); } .vc-search__hint:focus-visible { outline: 0.125rem solid transparent; box-shadow: var(--focus-ring); } /* ======================================================================== 2. FAQ (.vc-faq) — categorized, collapsible (
/) ------------------------------------------------------------------------ Markup contract:
…
…
…
…
JS toggles [hidden] on items that don't match the active chip / query, and flips aria-pressed + .is-active on chips. CSS never owns that logic. ======================================================================== */ .vc-faq { margin: var(--space-8) 0; } /* ---- Category filter chips (.vc-faq__cats) ----------------------------- */ .vc-faq__cats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); } .vc-faq__cat { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; /* comfortable; >= AA target with padding */ padding: var(--space-2) var(--space-4); border: 0.0625rem solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--text-secondary); font-family: var(--font-data); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .vc-faq__cat:hover { background: var(--bg-surface-2); color: var(--text-primary); } /* Active = filled tint + accent border + accent text + heavier weight, so the selection is legible without relying on colour alone (matches .data-room__cat active idiom). aria-pressed is the source of truth; .is-active is a JS hook. */ .vc-faq__cat[aria-pressed="true"], .vc-faq__cat.is-active { background: color-mix(in srgb, var(--accent-primary) 12%, transparent); border-color: var(--accent-primary); color: var(--accent-primary); font-weight: 700; } .vc-faq__cat:focus-visible { outline: 0.125rem solid transparent; box-shadow: var(--focus-ring); } /* optional per-chip count badge */ .vc-faq__cat-count { font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); } .vc-faq__cat[aria-pressed="true"] .vc-faq__cat-count { color: var(--accent-primary); } /* ---- FAQ list + items (
) -------------------------------------- */ .vc-faq__list { display: flex; flex-direction: column; gap: var(--space-3); } .vc-faq__item { border: 0.0625rem solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-xs); transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .vc-faq__item:hover { border-color: var(--border-strong); } .vc-faq__item[open] { border-color: var(--accent-primary); box-shadow: var(--shadow-sm); } /* deep-link target glow when a #faq-… anchor is navigated to */ .vc-faq__item:target { border-color: var(--accent-primary); box-shadow: var(--focus-ring); scroll-margin-top: calc(var(--header-height) + var(--space-4)); } /* Question = ; full-row hit target, chevron rotates on [open] ---- */ .vc-faq__q { list-style: none; /* remove default disclosure triangle */ display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); min-height: 2.75rem; cursor: pointer; font-family: var(--font-data); font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); line-height: 1.45; } .vc-faq__q::-webkit-details-marker { display: none; } /* Safari/Chrome */ /* chevron — mirrors .scenario-assumptions in vc-b2b2c.css (▸ -> rotate 90deg) */ .vc-faq__q::before { content: "\25B8"; /* ▸ */ flex-shrink: 0; margin-top: 0.125rem; color: var(--accent-primary); font-size: var(--fs-sm); line-height: 1.4; transition: transform var(--dur-fast) var(--ease-standard); } .vc-faq__item[open] > .vc-faq__q::before { transform: rotate(90deg); } .vc-faq__q:hover { color: var(--accent-primary); } .vc-faq__q:focus-visible { outline: 0.125rem solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-lg); } .vc-faq__q-text { flex: 1 1 auto; min-width: 0; } /* Per-question category eyebrow (gtm.faq[].category) — a quiet uppercase pill that rides at the end of the summary row, telegraphing which category a question belongs to so a reader skimming the open accordion keeps context. Color-not-alone: the bordered pill + uppercase letter-spacing + weight carry the meaning, the accent tint only reinforces it. aria-hidden in the markup (the chip filter is the accessible category control). The CSS ::before chevron leads the row; .vc-faq__q-text's flex-grow then pushes this pill to the trailing edge of the summary. */ .vc-faq__q-cat { flex-shrink: 0; align-self: center; max-width: 9rem; overflow: hidden; padding: 0.0625rem var(--space-2); border: 0.0625rem solid var(--border-subtle); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent-secondary) 10%, transparent); color: var(--accent-secondary); font-family: var(--font-data); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.6; white-space: nowrap; text-overflow: ellipsis; } .vc-faq__item[open] > .vc-faq__q .vc-faq__q-cat { border-color: var(--accent-secondary); } /* Space-constrained viewports: drop the pill so the question + chevron own the row (the category chip filter above remains the way to scope by category). */ @media (max-width: 40rem) { .vc-faq__q-cat { display: none; } } /* Answer body ------------------------------------------------------------ */ .vc-faq__a { padding: 0 var(--space-5) var(--space-5); /* indent to align under the question text, past the chevron */ padding-left: calc(var(--space-5) + var(--fs-sm) + var(--space-3)); font-family: var(--font-ui); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--text-secondary); } .vc-faq__a > :first-child { margin-top: 0; } .vc-faq__a > :last-child { margin-bottom: 0; } .vc-faq__a p { margin: 0 0 var(--space-3); } .vc-faq__a a { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 0.125rem; } .vc-faq__a a:hover { color: var(--accent-primary-hover); } .vc-faq__a ul, .vc-faq__a ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); } .vc-faq__a li { margin-bottom: var(--space-1); } /* numbers inside answers stay column-stable */ .vc-faq__a .figure, .vc-faq__a .tabular-nums { font-variant-numeric: tabular-nums; } /* per-item tag row (gtm.faq[].tags) */ .vc-faq__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); list-style: none; padding: 0; } .vc-faq__tag { padding: 0.0625rem var(--space-2); border-radius: var(--radius-pill); background: var(--bg-surface-2); color: var(--text-muted); font-family: var(--font-data); font-size: var(--fs-2xs); font-weight: 600; } /* "Illustrative — for discussion" inline note inside an answer (spec §5) -- */ .vc-faq__illustrative { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--fs-xs); font-style: italic; color: var(--text-muted); } /* (The inline ".learn-illus" illustrative marker — used in figure captions and prose across the Learn hub, spec §5 — is defined once in the LEARN-HUB section below, alongside the other .learn-* surfaces.) */ /* No-match message (JS toggles [hidden]) */ .vc-faq__empty { padding: var(--space-6); text-align: center; font-family: var(--font-data); font-size: var(--fs-sm); color: var(--text-muted); background: var(--bg-surface-2); border: 0.0625rem dashed var(--border-subtle); border-radius: var(--radius-lg); } .vc-faq__empty[hidden] { display: none; } /* ======================================================================== 3. FIGURE (.vc-figure) — SVG workflow-diagram frame + caption ------------------------------------------------------------------------ Wraps a theme-aware, accessible inline/embedded SVG (owner: SVG agent). Markup contract:
…
… … Illustrative — for discussion
======================================================================== */ .vc-figure { margin: 0; display: flex; flex-direction: column; background: var(--bg-surface); border: 0.0625rem solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; } /* SVG well — slightly inset surface so linework reads in both themes ------ */ .vc-figure__img { display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--bg-surface-2); border-bottom: 0.0625rem solid var(--border-subtle); } /* responsive SVG: fill the well width, keep aspect (viewBox-driven). Matches both inline and an /.vc-figure__svg inside the well; the .vc-figure__svg class is also matched directly so a width-attributed image (e.g. width="800") can never overflow at 320px even outside the well. */ .vc-figure__img svg, .vc-figure__img img, .vc-figure__svg { display: block; width: 100%; height: auto; max-width: 100%; } .vc-figure__cap { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); } .vc-figure__cap-title { font-family: var(--font-data); font-size: var(--fs-base); font-weight: 700; color: var(--text-primary); } /* Emphasised caption lead-in (.vc-figure__caplead) — the gallery captions open with a short bold label ("Two-sided distribution.") followed by the bound description, instead of the stacked cap-title/cap-text contract. Mirrors the .vc-figure__cap-title typographic role so the lead reads as the figure's heading; the trailing description flows as the next line of the flex-column caption. (Same treatment whether the description is static or data-bound.) */ .vc-figure__caplead { font-family: var(--font-data); font-size: var(--fs-base); font-weight: 700; color: var(--text-primary); } .vc-figure__cap-text { font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary); } /* "Illustrative — for discussion" treatment (spec §5) — paired icon+text */ .vc-figure__badge { display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; margin-top: var(--space-1); padding: 0.0625rem var(--space-2); border-radius: var(--radius-pill); font-family: var(--font-data); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-partner); background: color-mix(in srgb, var(--accent-partner) 16%, transparent); } /* ======================================================================== 4. LEARN HUB (.learn-hub) layout + (.learn-gallery) + (.learn-steps) ======================================================================== */ /* ---- Hub page shell + section rhythm ----------------------------------- */ .learn-hub { max-width: var(--max-width); margin: 0 auto; padding: var(--section-y) var(--gutter); } .learn-hub__section { margin-bottom: var(--section-y); } .learn-hub__section:last-child { margin-bottom: 0; } /* anchored sections (e.g. #search, #faq) clear the fixed nav on jump */ .learn-hub__section[id] { scroll-margin-top: calc(var(--header-height) + var(--space-4)); } .learn-hub__head { max-width: var(--max-width-prose); margin: 0 0 var(--space-8); } .learn-hub__title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--text-primary); margin: 0 0 var(--space-3); } .learn-hub__lead { font-family: var(--font-ui); font-size: var(--fs-lg); line-height: 1.55; color: var(--text-secondary); margin: 0; } /* ------------------------------------------------------------------------ 4a. PAGE CHROME the Learn hub markup actually uses (.learn-hero / .learn- section / .learn-container / .learn-howto / .learn-chip-link / .learn-cta). learn/index.html (owner: LEARN) lays the page out with this namespace; these rules are the contract's other half. They mirror the foundation idioms — .vc-hero / .vc-cta / .section-label in vc-components.css — so the new hub is indistinguishable from the rest of the module, but stay token-only (tints via color-mix() over semantic roles, never raw rgba) per this sheet's discipline. The outer
shell (max-width centering) is defined above; the hero/CTA are full-bleed bands that break out of its gutter so they read like the foundation hero. ------------------------------------------------------------------------ */ /* Document body for the hub. The body background (--bg-canvas) comes from vc-base.css; here we only reserve the fixed-nav height (nav is position:fixed at top:0) — mirrors the portal's `.ip-body { padding-top: … }` convention — so the confidential banner (first in-flow element) clears the nav instead of hiding under it. The hero/CTA gradient bands then span edge-to-edge below. */ .learn-body { padding-top: var(--header-height); } /* The hub's
overrides: the hero + CTA bands manage their own gutters, so the shell only pads the in-flow sections. Keep the max-width centering. */ .learn-hub { padding-inline: 0; /* sections own their gutter; bands go full-bleed */ padding-block: 0 var(--section-y); } /* skip-link + confidential banner spacing (banner is .confidential-banner) -- */ .learn-skip { z-index: 340; } /* above nav (300) + inline search (320) */ .learn-conf { margin: 0; } /* sits flush under the fixed nav */ /* ---- HERO (.learn-hero) — gradient band, search + read-paths live here --- */ .learn-hero { position: relative; isolation: isolate; overflow: hidden; /* .learn-body already reserves the fixed-nav height; the banner sits between the nav and here, so the hero only needs its own vertical breathing room. */ padding: var(--space-16) var(--gutter); background: var(--grad-hero); color: var(--text-on-brand); text-align: center; } [data-theme="dark"] .learn-hero { background: var(--grad-hero-dark); } /* decorative AI glow behind content (mirrors .vc-hero::before) */ .learn-hero::before { content: ""; position: absolute; inset: 0; background: var(--grad-glow-ai); z-index: -1; pointer-events: none; } .learn-hero__inner { position: relative; max-width: var(--max-width-prose); margin-inline: auto; } /* eyebrow: the markup pairs .section-label with .learn-hero__eyebrow; on the dark gradient the default accent-on-tint pill is too low-contrast, so restyle it as a translucent glass chip with on-brand text (color-mix, not rgba). */ .learn-hero__eyebrow.section-label, .learn-hero__eyebrow { margin-bottom: var(--space-5); color: var(--text-on-brand); background: color-mix(in srgb, var(--text-on-brand) 14%, transparent); border: 0.0625rem solid color-mix(in srgb, var(--text-on-brand) 26%, transparent); } .learn-hero__title { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-on-brand); margin: 0 0 var(--space-4); text-wrap: balance; } .learn-hero__lede { font-family: var(--font-ui); font-size: var(--fs-xl); font-weight: 300; line-height: 1.5; color: var(--text-on-brand-dim); margin: 0 auto var(--space-8); max-width: 42rem; text-wrap: pretty; } /* the hub search sits inside the hero; lift it above the glow + give it room */ .learn-hero .vc-search--hub { position: relative; z-index: 1; } /* ---- Hero read-path chips (.learn-hero__paths > .learn-chip-link) -------- */ .learn-hero__paths { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); } .learn-chip-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text-on-brand) 10%, transparent); border: 0.0625rem solid color-mix(in srgb, var(--text-on-brand) 24%, transparent); color: var(--text-on-brand); font-family: var(--font-data); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .learn-chip-link i { color: var(--text-on-brand-dim); } .learn-chip-link:hover { background: color-mix(in srgb, var(--text-on-brand) 20%, transparent); border-color: color-mix(in srgb, var(--text-on-brand) 40%, transparent); } .learn-chip-link:focus-visible { outline: 0.125rem solid var(--text-on-brand); outline-offset: 0.125rem; } /* ---- Section rhythm (.learn-section / --alt / --cta) --------------------- */ /* In-flow content sections between the hero and the footer. --alt paints a subtle inset band to separate the gallery; --cta only carries the vertical rhythm (the .vc-cta inside paints its own gradient band). */ .learn-section { padding-block: var(--section-y); } .learn-section[id] { scroll-margin-top: calc(var(--header-height) + var(--space-4)); } .learn-section--alt { background: var(--bg-surface-2); border-block: 0.0625rem solid var(--border-subtle); } .learn-section--cta { padding-block: var(--space-12); } .learn-section__title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--text-primary); margin: var(--space-3) 0 var(--space-3); text-wrap: balance; } .learn-section__lede { font-family: var(--font-ui); font-size: var(--fs-lg); line-height: 1.55; color: var(--text-secondary); margin: 0; max-width: var(--max-width-prose); text-wrap: pretty; } /* ---- Content container (.learn-container / --narrow) --------------------- */ .learn-container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); } .learn-container--narrow { max-width: var(--max-width-prose); } /* ---- How-to-invest two-column (.learn-howto = figure + steps) ------------ */ /* Diagram beside the numbered steps on wide viewports; stacks on narrow. The steps grid (.learn-steps) is defined in §4; here it sits in column 2 and collapses to a single column so cards don't get too cramped beside the SVG. */ .learn-howto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-8); align-items: start; } .learn-howto__figure { margin: 0; } @media (min-width: 60rem) { .learn-howto { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-10); } /* inside the two-column layout the steps stack vertically beside the figure */ .learn-howto .learn-steps { grid-template-columns: minmax(0, 1fr); margin-top: 0; } } /* ---- Button row under the steps (.learn-cta-row) ------------------------- */ .learn-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); } /* ---- "Illustrative — for discussion" inline marker (.learn-illus) -------- */ /* Spec §5 treatment for figures/projections rendered in body copy/captions. */ .learn-illus { font-style: italic; font-weight: 600; color: var(--accent-partner); white-space: nowrap; } /* ---- Closing CTA (.learn-cta inside a .vc-cta band) ---------------------- */ /* The markup is
; .vc-cta (vc-components.css) already paints the gradient band, on-brand text, padding, radius + centering. Here we only (a) refit that band inside the narrow container — it normally has its own page margins — and (b) style the .learn-cta__* children to read on the dark gradient. We do NOT repaint the gradient. */ .learn-cta.vc-cta { margin: 0; /* the container/section own the outer spacing */ } /* section-label inside the CTA band needs on-brand contrast (default is a light-surface accent pill) */ .learn-cta .section-label { color: var(--text-on-brand); background: color-mix(in srgb, var(--text-on-brand) 14%, transparent); margin-bottom: var(--space-4); } .learn-cta__title { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 700; line-height: var(--lh-heading); color: var(--text-on-brand); margin: 0 0 var(--space-3); text-wrap: balance; } .learn-cta__lede { font-family: var(--font-ui); font-size: var(--fs-lg); line-height: 1.55; color: var(--text-on-brand-dim); margin: 0 auto var(--space-8); max-width: var(--max-width-prose); text-wrap: pretty; } .learn-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); } .learn-cta__note { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-2); margin: var(--space-8) auto 0; max-width: 40rem; font-family: var(--font-data); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-on-brand-dim); } .learn-cta__note i { margin-top: 0.15em; flex-shrink: 0; } /* ---- Workflow gallery (.learn-gallery) — responsive grid of .vc-figure -- */ .learn-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--space-6); margin: var(--space-8) 0 0; padding: 0; list-style: none; } .learn-gallery > li { display: flex; } /* stretch figure to cell height */ .learn-gallery .vc-figure { width: 100%; } /* a feature figure can span the full row (e.g. platform-architecture) */ .learn-gallery__item--wide { grid-column: 1 / -1; } @media (max-width: 40rem) { .learn-gallery { grid-template-columns: minmax(0, 1fr); } } /* ---- How-to-invest process (.learn-steps) — ordered, numbered ----------- */ /* Renders gtm.howToInvest [{step,title,detail}] as an accessible
    . */ .learn-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-5); margin: var(--space-8) 0 0; padding: 0; list-style: none; counter-reset: learn-step; } .learn-steps__item { counter-increment: learn-step; position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-5) var(--space-5); background: var(--bg-surface); border: 0.0625rem solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .learn-steps__item::before { content: counter(learn-step); display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-1); border-radius: var(--radius-pill); background: var(--grad-brand); color: var(--text-on-brand); font-family: var(--font-data); font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; } /* JS may set data-step on the
  1. ; the CSS counter is the visible source so the number is correct even if items are reordered/filtered. */ .learn-steps__title { font-family: var(--font-data); font-size: var(--fs-base); font-weight: 700; color: var(--text-primary); margin: 0; } .learn-steps__detail { font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary); margin: 0; } /* Text body of a step (holds title + detail) — a plain flow column; min-width:0 lets long words wrap instead of stretching the grid track. */ .learn-steps__body { min-width: 0; } /* The template carries a bound numeric ; the gradient ::before counter above is the single visible source of the step number, so suppress the bound span to avoid a duplicate digit. (It stays in the DOM for data-bind; just not shown.) */ .learn-steps__num { display: none; } /* Pre-hydration placeholder row (data-bound-empty) — give it the same card shell as a real step so the loading state doesn't flash as raw block flow. */ .learn-steps__empty { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-5) var(--space-5); background: var(--bg-surface); border: 0.0625rem solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } /* connector arrow between steps on wide viewports (decorative, hidden to AT) */ @media (min-width: 60rem) { .learn-steps--flow .learn-steps__item:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(-1 * var(--space-5)); width: var(--space-5); height: 0.125rem; transform: translateY(-50%); background: var(--border-strong); pointer-events: none; } } /* ======================================================================== 5. REDUCED MOTION — neutralise this sheet's transitions/animations. (The global blanket guard lives in vc-utilities.css / vc-tokens.css; this is the component-level belt-and-braces for the interactive surfaces here, matching how vc-components.css / vc-b2b2c.css handle their own.) ======================================================================== */ @media (prefers-reduced-motion: reduce) { .vc-search__field, .vc-search__clear, .vc-search__submit, .vc-search__result, .vc-search__hint, .vc-faq__cat, .vc-faq__item, .vc-faq__q::before, .learn-chip-link { transition: none; } } /* ======================================================================== 6. PRINT — a reading-first rendering of the learn material. Collapse the live search; show every FAQ answer (open or not); flatten the interactive frames so the document prints clean. (vc-print.css owns the global rules; this scopes the learn-only surfaces.) ======================================================================== */ @media print { /* nav is no-print/not fixed on paper — drop the reserved header strip */ .learn-body { padding-top: 0; } /* the search box and its dropdown are interactive-only */ .vc-search, .vc-search__hints { display: none !important; } /* category chips are a live filter — drop them, print ALL answers */ .vc-faq__cats { display: none !important; } .vc-faq__item { break-inside: avoid; box-shadow: none; border-color: var(--border-subtle); } .vc-faq__item .vc-faq__a { display: block !important; } /* force-open
    */ .vc-faq__q::before { content: ""; } /* drop the chevron */ .vc-figure { break-inside: avoid; box-shadow: none; border-color: var(--border-subtle); } .vc-figure__img { background: transparent; border-bottom-color: var(--border-subtle); } .learn-steps__item { break-inside: avoid; box-shadow: none; border-color: var(--border-subtle); } .learn-steps--flow .learn-steps__item::after { display: none; } /* Gradient bands (hero + the .vc-cta close) carry on-brand WHITE text that would vanish on paper — flatten them to ink-on-white and reset the glass chips/eyebrow so the heading, lede and CTA copy stay legible in print. */ .learn-hero { padding-top: var(--space-8); background: none !important; color: var(--text-primary) !important; } .learn-hero::before { display: none; } .learn-hero__title { color: var(--text-primary) !important; } .learn-hero__lede { color: var(--text-secondary) !important; } .learn-hero__eyebrow, .learn-cta .section-label { color: var(--text-secondary) !important; background: none !important; border-color: var(--border-subtle) !important; } /* the read-path chips are interactive navigation — omit from the printout */ .learn-hero__paths { display: none !important; } .learn-cta.vc-cta { background: none !important; color: var(--text-primary) !important; } .learn-cta__title { color: var(--text-primary) !important; } .learn-cta__lede, .learn-cta__note { color: var(--text-secondary) !important; } .learn-section--alt { background: none !important; border-color: var(--border-subtle); } }