/* ========================================================================== Shared design system — brand-agnostic tokens No build step: plain CSS custom properties + a small responsive grid. Light/dark friendly via prefers-color-scheme and [data-theme] override. ------------------------------------------------------------------------- BRAND TOKEN CONTRACT ------------------------------------------------------------------------- Every brand-tinted color in this file resolves from five custom properties. These names are the published contract with src/js/brand.js — do not rename: --ca-brand-h brand hue, 0-360, unitless (the one knob that matters) --ca-brand primary fill: buttons, accents, active markers --ca-brand-strong links, hover/active, brand text on light surfaces --ca-brand-soft tinted surfaces: badges, panels, active nav row --ca-brand-contrast text/icons drawn on top of --ca-brand brand.js re-declares those five at runtime inside style#ca-brand-palette, on the SAME four selectors used below (:root, prefers-color-scheme: dark, [data-theme="dark"], [data-theme="light"]), appended last to . It wins at equal specificity without freezing a ramp, so the theme toggle keeps working. Rebranding is therefore a brand.js edit: no rule in this file — and no page file — changes. The literal values here are only the no-JS fallback ramp; they are a placeholder, not an identity. Surfaces, borders, text and shadows are NOT independent colors: they are the brand hue at low saturation (--ca-neutral-h, which defaults to --ca-brand-h), so swapping the hue re-tints the whole UI coherently instead of leaving warm greys under a cool brand. Set --ca-neutral-h to a fixed number if a brand wants pure-grey chrome. Semantic status colors (success / danger / warning) and the focus ring are deliberately hue-INDEPENDENT: they must stay legible and distinguishable from whatever the brand hue turns out to be. CONTRAST FLOOR — re-check these after changing the ramp in brand.js: brand-strong on bg >= 4.5:1 (body link text) brand-contrast on brand >= 4.5:1 (primary button label) text on bg >= 12:1 text-muted on bg >= 4.5:1 Dark ramps must LIGHTEN (higher lightness, not a darker shade) — a dark brand-strong on a dark background is the classic dark-mode failure. ========================================================================== */ /* ---------- Design tokens ------------------------------------------------ */ :root { /* Brand ramp — light. Overridden at runtime by brand.js (see contract above). Written as hsl() off --ca-brand-h so that setting the hue alone already produces a coherent ramp; --ca-brand-s is an internal knob, not contract. */ --ca-brand-h: 21; /* placeholder hue — swap in brand.js */ --ca-brand-s: 74%; /* 43%, not a lighter tint: --ca-brand-contrast (white) is drawn on top of this fill for button labels, and 43% is the lightest step that still clears 4.5:1 against white (4.63:1). At 47% it was 3.96:1 and button text failed. */ --ca-brand: hsl(var(--ca-brand-h), var(--ca-brand-s), 43%); --ca-brand-strong: hsl(var(--ca-brand-h), var(--ca-brand-s), 38%); --ca-brand-soft: hsl(var(--ca-brand-h), var(--ca-brand-s), 94%); --ca-brand-contrast: hsl(var(--ca-brand-h), 20%, 100%); /* resolves to white */ /* Semantic status colors — intentionally independent of the brand hue. */ --ca-success: #1a7f45; --ca-success-soft: #e5f6ec; --ca-success-contrast: #ffffff; /* text/icons drawn on --ca-success */ --ca-danger: #b3261e; --ca-danger-soft: #fdeceb; --ca-warning: #8a5a00; --ca-warning-soft: #fff4e0; /* Neutrals (light theme defaults) — the brand hue at low saturation. */ --ca-neutral-h: var(--ca-brand-h); --ca-bg: hsl(var(--ca-neutral-h), 20%, 97%); --ca-bg-elevated: hsl(var(--ca-neutral-h), 40%, 100%); --ca-bg-sunken: hsl(var(--ca-neutral-h), 15%, 94%); --ca-border: hsl(var(--ca-neutral-h), 13%, 87%); --ca-border-strong: hsl(var(--ca-neutral-h), 12%, 77%); --ca-text: hsl(var(--ca-neutral-h), 13%, 12%); --ca-text-muted: hsl(var(--ca-neutral-h), 8%, 34%); --ca-text-faint: hsl(var(--ca-neutral-h), 8%, 51%); /* Focus ring — deliberately off-brand so it stays visible against any brand fill. Retune --ca-focus-h only if a brand lands on top of this hue. */ --ca-focus-h: 212; --ca-focus: hsl(var(--ca-focus-h), 77%, 43%); /* Typography */ --ca-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ca-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; --ca-fs-xs: 0.8125rem; --ca-fs-sm: 0.9375rem; --ca-fs-base: 1rem; --ca-fs-lg: 1.125rem; --ca-fs-xl: 1.375rem; --ca-fs-2xl: 1.75rem; --ca-fs-3xl: 2.25rem; --ca-lh-tight: 1.25; --ca-lh-base: 1.6; /* Spacing scale */ --ca-space-1: 0.25rem; --ca-space-2: 0.5rem; --ca-space-3: 0.75rem; --ca-space-4: 1rem; --ca-space-5: 1.5rem; --ca-space-6: 2rem; --ca-space-7: 3rem; --ca-space-8: 4rem; /* Layout */ --ca-sidebar-width: 280px; --ca-content-max: 780px; --ca-radius-sm: 6px; --ca-radius-md: 10px; --ca-radius-lg: 16px; /* Shadows are tinted with the neutral (i.e. brand) hue, not pure black. */ --ca-shadow-sm: 0 1px 2px hsla(var(--ca-neutral-h), 45%, 6%, 0.06); --ca-shadow-md: 0 4px 16px hsla(var(--ca-neutral-h), 45%, 6%, 0.08); --ca-shadow-lg: 0 12px 32px hsla(var(--ca-neutral-h), 45%, 4%, 0.28); color-scheme: light; } /* ---------- Dark theme ---------------------------------------------------- The dark ramp is declared twice on purpose — once for the OS preference and once for the forced [data-theme="dark"] toggle — because CSS cannot share a declaration block across a media query and a selector. brand.js mirrors this exact structure when it emits style#ca-brand-palette; keep the two blocks in sync when editing. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --ca-brand: hsl(var(--ca-brand-h), 80%, 62%); --ca-brand-strong: hsl(var(--ca-brand-h), 85%, 72%); --ca-brand-soft: hsl(var(--ca-brand-h), 45%, 18%); --ca-brand-contrast: hsl(var(--ca-brand-h), 18%, 9%); --ca-success: #4bd07f; --ca-success-soft: #103322; --ca-success-contrast: #0b2415; --ca-danger: #ff8a80; --ca-danger-soft: #3a1815; --ca-warning: #ffcc66; --ca-warning-soft: #3a2c0d; --ca-bg: hsl(var(--ca-neutral-h), 20%, 7.5%); --ca-bg-elevated: hsl(var(--ca-neutral-h), 18%, 11%); --ca-bg-sunken: hsl(var(--ca-neutral-h), 21%, 6.5%); --ca-border: hsl(var(--ca-neutral-h), 15%, 20%); --ca-border-strong: hsl(var(--ca-neutral-h), 16%, 26%); --ca-text: hsl(var(--ca-neutral-h), 25%, 93%); --ca-text-muted: hsl(var(--ca-neutral-h), 15%, 72%); --ca-text-faint: hsl(var(--ca-neutral-h), 11%, 51%); --ca-focus: hsl(var(--ca-focus-h), 100%, 74%); color-scheme: dark; } } :root[data-theme="dark"] { --ca-brand: hsl(var(--ca-brand-h), 80%, 62%); --ca-brand-strong: hsl(var(--ca-brand-h), 85%, 72%); --ca-brand-soft: hsl(var(--ca-brand-h), 45%, 18%); --ca-brand-contrast: hsl(var(--ca-brand-h), 18%, 9%); --ca-success: #4bd07f; --ca-success-soft: #103322; --ca-success-contrast: #0b2415; --ca-danger: #ff8a80; --ca-danger-soft: #3a1815; --ca-warning: #ffcc66; --ca-warning-soft: #3a2c0d; --ca-bg: hsl(var(--ca-neutral-h), 20%, 7.5%); --ca-bg-elevated: hsl(var(--ca-neutral-h), 18%, 11%); --ca-bg-sunken: hsl(var(--ca-neutral-h), 21%, 6.5%); --ca-border: hsl(var(--ca-neutral-h), 15%, 20%); --ca-border-strong: hsl(var(--ca-neutral-h), 16%, 26%); --ca-text: hsl(var(--ca-neutral-h), 25%, 93%); --ca-text-muted: hsl(var(--ca-neutral-h), 15%, 72%); --ca-text-faint: hsl(var(--ca-neutral-h), 11%, 51%); --ca-focus: hsl(var(--ca-focus-h), 100%, 74%); color-scheme: dark; } :root[data-theme="light"] { /* 43%, not a lighter tint: --ca-brand-contrast (white) is drawn on top of this fill for button labels, and 43% is the lightest step that still clears 4.5:1 against white (4.63:1). At 47% it was 3.96:1 and button text failed. */ --ca-brand: hsl(var(--ca-brand-h), var(--ca-brand-s), 43%); --ca-brand-strong: hsl(var(--ca-brand-h), var(--ca-brand-s), 38%); --ca-brand-soft: hsl(var(--ca-brand-h), var(--ca-brand-s), 94%); --ca-brand-contrast: hsl(var(--ca-brand-h), 20%, 100%); --ca-success: #1a7f45; --ca-success-soft: #e5f6ec; --ca-success-contrast: #ffffff; --ca-danger: #b3261e; --ca-danger-soft: #fdeceb; --ca-warning: #8a5a00; --ca-warning-soft: #fff4e0; --ca-bg: hsl(var(--ca-neutral-h), 20%, 97%); --ca-bg-elevated: hsl(var(--ca-neutral-h), 40%, 100%); --ca-bg-sunken: hsl(var(--ca-neutral-h), 15%, 94%); --ca-border: hsl(var(--ca-neutral-h), 13%, 87%); --ca-border-strong: hsl(var(--ca-neutral-h), 12%, 77%); --ca-text: hsl(var(--ca-neutral-h), 13%, 12%); --ca-text-muted: hsl(var(--ca-neutral-h), 8%, 34%); --ca-text-faint: hsl(var(--ca-neutral-h), 8%, 51%); --ca-focus: hsl(var(--ca-focus-h), 77%, 43%); color-scheme: light; } /* ---------- Reset & base -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--ca-bg); color: var(--ca-text); font-family: var(--ca-font-body); font-size: var(--ca-fs-base); line-height: var(--ca-lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--ca-brand-strong); text-decoration-color: color-mix(in srgb, var(--ca-brand-strong) 40%, transparent); transition: color 0.15s ease, text-decoration-color 0.15s ease; } a:hover { text-decoration-color: currentColor; } a:active { color: var(--ca-brand); } :focus-visible { outline: 2px solid var(--ca-focus); outline-offset: 2px; border-radius: 4px; } code, pre, kbd { font-family: var(--ca-font-mono); font-size: 0.9em; } code { background: var(--ca-bg-sunken); border: 1px solid var(--ca-border); padding: 0.05em 0.4em; border-radius: 4px; } pre { background: var(--ca-bg-sunken); border: 1px solid var(--ca-border); border-radius: var(--ca-radius-md); padding: var(--ca-space-4); overflow-x: auto; } pre code { background: none; border: none; padding: 0; } h1, h2, h3, h4 { line-height: var(--ca-lh-tight); font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: var(--ca-fs-3xl); margin: 0 0 var(--ca-space-4); letter-spacing: -0.02em; } h2 { font-size: var(--ca-fs-2xl); margin: var(--ca-space-7) 0 var(--ca-space-3); padding-bottom: var(--ca-space-2); border-bottom: 1px solid var(--ca-border); } h3 { font-size: var(--ca-fs-xl); margin: var(--ca-space-6) 0 var(--ca-space-2); } p { margin: 0 0 var(--ca-space-4); color: var(--ca-text); } ul, ol { margin: 0 0 var(--ca-space-4); padding-left: 1.4em; } li + li { margin-top: var(--ca-space-2); } hr { border: none; border-top: 1px solid var(--ca-border); margin: var(--ca-space-6) 0; } /* ---------- Skip link ----------------------------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ca-brand); color: var(--ca-brand-contrast); padding: var(--ca-space-2) var(--ca-space-4); border-radius: 0 0 var(--ca-radius-sm) 0; z-index: 200; } .skip-link:focus { left: 0; } /* ---------- App shell / responsive grid ----------------------------------- */ .ca-app { display: grid; grid-template-columns: var(--ca-sidebar-width) minmax(0, 1fr); min-height: 100vh; } @media (max-width: 880px) { .ca-app { grid-template-columns: 1fr; } } /* ---------- Sidebar nav ---------------------------------------------------- */ .ca-sidebar { background: var(--ca-bg-elevated); border-right: 1px solid var(--ca-border); padding: var(--ca-space-5) var(--ca-space-4); position: sticky; top: 0; height: 100vh; overflow-y: auto; } @media (max-width: 880px) { .ca-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--ca-border); } } .ca-brand { display: flex; align-items: center; gap: var(--ca-space-2); text-decoration: none; color: var(--ca-text); margin-bottom: var(--ca-space-5); padding: 0 var(--ca-space-1); } /* Brand lockup = glyph + wordmark slot. The glyph is assets/logo.svg (square, drawn from the brand ramp); the wordmark is text stamped by brand.js into [data-brand-name]/[data-brand-tagline] — never hardcode either here. When the glyph is inlined as it inherits the live brand color through `color`; as an it falls back to the palette baked into the file. */ .ca-brand img, .ca-brand svg { width: 28px; height: 28px; flex: none; } /* Inlined marks (and any that resolves CSS vars) pick up the live ramp. */ .ca-brand svg { color: var(--ca-brand); } .ca-brand-name { font-weight: 700; font-size: var(--ca-fs-lg); line-height: 1.15; } .ca-brand-tag { display: block; font-weight: 400; font-size: var(--ca-fs-xs); color: var(--ca-text-faint); } .ca-progress-summary { font-size: var(--ca-fs-xs); color: var(--ca-text-muted); margin: 0 var(--ca-space-1) var(--ca-space-4); display: flex; align-items: center; gap: var(--ca-space-2); } .ca-progress-track { flex: 1; height: 6px; border-radius: 999px; background: var(--ca-bg-sunken); overflow: hidden; border: 1px solid var(--ca-border); } .ca-progress-fill { height: 100%; background: var(--ca-brand); transition: width 0.3s ease; } /* ---------- Gamification: XP/level widget + badge chips --------------------- */ .ca-xp-widget { margin: 0 var(--ca-space-1) var(--ca-space-4); padding: var(--ca-space-3); border: 1px solid var(--ca-border); border-radius: var(--ca-radius-md, var(--ca-radius-sm)); background: var(--ca-bg-elevated, var(--ca-bg-sunken)); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ca-xp-widget:hover { border-color: var(--ca-border-strong); box-shadow: var(--ca-shadow-sm); } .ca-xp-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ca-space-2); margin-bottom: var(--ca-space-2); } .ca-xp-rank { font-weight: 700; font-size: var(--ca-fs-sm); color: var(--ca-brand-strong); } .ca-xp-amount { font-size: var(--ca-fs-xs); color: var(--ca-text-muted); } .ca-xp-track { height: 6px; border-radius: 999px; background: var(--ca-bg-sunken); overflow: hidden; border: 1px solid var(--ca-border); } .ca-xp-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--ca-brand), var(--ca-brand-strong)); transition: width 0.4s ease; } .ca-badge-row { display: flex; flex-wrap: wrap; gap: var(--ca-space-1); margin-top: var(--ca-space-3); } .ca-badge-chip { font-size: var(--ca-fs-xs); line-height: 1; padding: var(--ca-space-1) var(--ca-space-2); border-radius: 999px; border: 1px solid var(--ca-border); color: var(--ca-text-faint); background: var(--ca-bg-sunken); white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .ca-badge-chip.is-unlocked { color: var(--ca-brand-contrast); background: var(--ca-brand); border-color: var(--ca-brand); font-weight: 600; } .ca-badge-chip:hover { transform: translateY(-1px); border-color: var(--ca-border-strong); } .ca-badge-chip.is-unlocked:hover { border-color: var(--ca-brand-strong); } /* Badge-unlock celebration toast, appended to so it floats above the sidebar/main content regardless of scroll position. */ .ca-badge-toast { position: fixed; right: var(--ca-space-5); bottom: var(--ca-space-5); z-index: 1000; display: flex; align-items: flex-start; gap: var(--ca-space-3); max-width: 320px; padding: var(--ca-space-3) var(--ca-space-4); border-radius: var(--ca-radius-md, var(--ca-radius-sm)); background: var(--ca-brand-strong); color: var(--ca-brand-contrast); box-shadow: var(--ca-shadow-lg); opacity: 0; transform: translateY(16px) scale(0.96); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .ca-badge-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); animation: ca-badge-pop 0.5s ease; } .ca-badge-toast strong { display: block; font-size: var(--ca-fs-sm); margin-bottom: 2px; } .ca-badge-toast-desc { display: block; font-size: var(--ca-fs-xs); opacity: 0.9; } .ca-badge-toast-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; /* Tint from the toast's own text color (--ca-brand-contrast) so the disc stays visible whether the contrast token is light (light theme) or dark (dark). */ background: color-mix(in srgb, currentColor 18%, transparent); font-size: 1rem; } @keyframes ca-badge-pop { 0% { transform: translateY(16px) scale(0.8); } 55% { transform: translateY(-4px) scale(1.06); } 100% { transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .ca-badge-toast, .ca-badge-toast.is-visible { transition: opacity 0.15s linear; animation: none; transform: none; } .ca-xp-fill { transition: none; } .ca-badge[data-state="complete"] { animation: none; } *, *::before, *::after { scroll-behavior: auto; } } .ca-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ca-space-1); } .ca-nav-link { display: flex; align-items: center; gap: var(--ca-space-2); padding: var(--ca-space-2) var(--ca-space-3); border-radius: var(--ca-radius-sm); text-decoration: none; color: var(--ca-text); font-size: var(--ca-fs-sm); line-height: 1.3; border-left: 3px solid transparent; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .ca-nav-link:hover { background: var(--ca-bg-sunken); transform: translateX(1px); } .ca-nav-link:active { transform: translateX(1px) scale(0.99); } .ca-nav-link:focus-visible { outline: 2px solid var(--ca-focus); outline-offset: -2px; border-radius: var(--ca-radius-sm); } .ca-nav-link.is-current { background: var(--ca-brand-soft); color: var(--ca-brand-strong); font-weight: 600; border-left-color: var(--ca-brand); } .ca-nav-link.is-current .ca-nav-title { color: var(--ca-brand-strong); } .ca-nav-title { flex: 1; min-width: 0; } .ca-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.7rem; line-height: 1; border: 1.5px solid var(--ca-border-strong); color: var(--ca-text-faint); background: var(--ca-bg-sunken); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .ca-badge[data-state="complete"] { background: var(--ca-success); border-color: var(--ca-success); color: var(--ca-success-contrast); animation: ca-badge-settle 0.3s ease; } @keyframes ca-badge-settle { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } .ca-badge[data-state="complete"]::before { content: "\2713"; } .ca-badge[data-state="incomplete"]::before { content: ""; } .ca-nav-footer { margin-top: var(--ca-space-5); padding-top: var(--ca-space-4); border-top: 1px solid var(--ca-border); } .ca-reset-btn { font-size: var(--ca-fs-xs); color: var(--ca-text-faint); background: none; border: 1px solid var(--ca-border); border-radius: var(--ca-radius-sm); padding: var(--ca-space-2) var(--ca-space-3); cursor: pointer; width: 100%; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .ca-reset-btn:hover { color: var(--ca-danger); border-color: var(--ca-danger); background: var(--ca-danger-soft); } .ca-reset-btn:active { transform: translateY(1px); } /* ---------- Main content ---------------------------------------------------- */ .ca-main { min-width: 0; padding: var(--ca-space-7) var(--ca-space-6) var(--ca-space-8); } @media (max-width: 600px) { .ca-main { padding: var(--ca-space-5) var(--ca-space-4) var(--ca-space-6); } } .ca-content { max-width: var(--ca-content-max); margin: 0 auto; } .ca-eyebrow { display: flex; align-items: center; gap: var(--ca-space-2); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--ca-fs-xs); font-weight: 700; color: var(--ca-brand-strong); margin-bottom: var(--ca-space-2); } .ca-eyebrow::before { content: ""; display: inline-block; width: 1.25em; height: 2px; background: var(--ca-brand); border-radius: 999px; } .ca-lede { font-size: var(--ca-fs-lg); line-height: 1.5; color: var(--ca-text-muted); } .ca-callout { background: var(--ca-bg-elevated); border: 1px solid var(--ca-border); border-left: 4px solid var(--ca-brand); border-radius: var(--ca-radius-md); padding: var(--ca-space-4) var(--ca-space-5); margin: var(--ca-space-5) 0; } .ca-callout > :last-child { margin-bottom: 0; } .ca-callout--tip { border-left-color: var(--ca-success); } .ca-callout--warn { border-left-color: var(--ca-warning); } .ca-card { background: var(--ca-bg-elevated); border: 1px solid var(--ca-border); border-radius: var(--ca-radius-lg); padding: var(--ca-space-5); box-shadow: var(--ca-shadow-sm); } .ca-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ca-space-4); margin: var(--ca-space-5) 0; } .ca-table-wrap { overflow-x: auto; margin: var(--ca-space-5) 0; } table.ca-table { width: 100%; border-collapse: collapse; font-size: var(--ca-fs-sm); } .ca-table th, .ca-table td { border: 1px solid var(--ca-border); padding: var(--ca-space-3); text-align: left; vertical-align: top; } .ca-table th { background: var(--ca-bg-sunken); font-weight: 700; } /* Module home cards on landing page */ .ca-module-card { display: block; text-decoration: none; color: inherit; background: var(--ca-bg-elevated); border: 1px solid var(--ca-border); border-radius: var(--ca-radius-lg); padding: var(--ca-space-5); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .ca-module-card:hover { border-color: var(--ca-brand); box-shadow: var(--ca-shadow-md); transform: translateY(-2px); } .ca-module-card:active { transform: translateY(-1px); } .ca-module-card:focus-visible { outline: 2px solid var(--ca-focus); outline-offset: 2px; border-color: var(--ca-brand); } .ca-module-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ca-space-3); margin-bottom: var(--ca-space-2); } .ca-module-card h3 { margin: 0; font-size: var(--ca-fs-lg); } .ca-module-card p { margin: 0; color: var(--ca-text-muted); font-size: var(--ca-fs-sm); } /* ---------- Buttons -------------------------------------------------------- */ .ca-btn { display: inline-flex; align-items: center; gap: var(--ca-space-2); font: inherit; font-weight: 600; font-size: var(--ca-fs-sm); padding: var(--ca-space-3) var(--ca-space-5); border-radius: var(--ca-radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; } .ca-btn:active:not(:disabled) { transform: translateY(1px); } .ca-btn--primary { background: var(--ca-brand); color: var(--ca-brand-contrast); } .ca-btn--primary:hover:not(:disabled) { background: var(--ca-brand-strong); box-shadow: var(--ca-shadow-sm); } .ca-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; } .ca-btn--secondary { background: transparent; border-color: var(--ca-border-strong); color: var(--ca-text); } .ca-btn--secondary:hover:not(:disabled) { background: var(--ca-bg-sunken); border-color: var(--ca-brand); } .ca-prevnext { display: flex; justify-content: space-between; gap: var(--ca-space-4); margin-top: var(--ca-space-7); padding-top: var(--ca-space-5); border-top: 1px solid var(--ca-border); } /* ---------- Knowledge check / quiz ------------------------------------------ */ .ca-quiz { margin-top: var(--ca-space-7); padding-top: var(--ca-space-6); border-top: 2px solid var(--ca-border); } .ca-quiz-header h2 { margin-top: 0; } .ca-quiz-question { background: var(--ca-bg-elevated); border: 1px solid var(--ca-border); border-radius: var(--ca-radius-lg); padding: var(--ca-space-5); margin-bottom: var(--ca-space-4); transition: border-color 0.2s ease; } .ca-quiz-question-title { font-weight: 600; margin-bottom: var(--ca-space-3); } .ca-quiz-choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ca-space-2); } .ca-quiz-choice { display: flex; align-items: flex-start; gap: var(--ca-space-3); padding: var(--ca-space-3); border: 1px solid var(--ca-border); border-radius: var(--ca-radius-md); cursor: pointer; background: var(--ca-bg); transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .ca-quiz-choice:hover { border-color: var(--ca-brand); background: var(--ca-brand-soft); } .ca-quiz-choice:active { transform: scale(0.995); } .ca-quiz-choice:has(input:focus-visible) { outline: 2px solid var(--ca-focus); outline-offset: 2px; } .ca-quiz-choice input { margin-top: 3px; flex: none; accent-color: var(--ca-brand); } .ca-quiz-choice-label { flex: 1; } .ca-quiz-question.is-graded .ca-quiz-choice { cursor: default; } .ca-quiz-question.is-graded .ca-quiz-choice:hover { background: var(--ca-bg); border-color: var(--ca-border); } .ca-quiz-question.is-graded .ca-quiz-choice.is-correct { background: var(--ca-success-soft); border-color: var(--ca-success); } .ca-quiz-question.is-graded .ca-quiz-choice.is-correct:hover { background: var(--ca-success-soft); border-color: var(--ca-success); } .ca-quiz-question.is-graded .ca-quiz-choice.is-incorrect-selected { background: var(--ca-danger-soft); border-color: var(--ca-danger); } .ca-quiz-question.is-graded .ca-quiz-choice.is-incorrect-selected:hover { background: var(--ca-danger-soft); border-color: var(--ca-danger); } .ca-quiz-feedback { display: none; margin-top: var(--ca-space-3); padding: var(--ca-space-3) var(--ca-space-4); border-radius: var(--ca-radius-md); font-size: var(--ca-fs-sm); } .ca-quiz-question.is-graded .ca-quiz-feedback { display: block; } .ca-quiz-feedback.is-correct { background: var(--ca-success-soft); color: var(--ca-success); } .ca-quiz-feedback.is-incorrect { background: var(--ca-danger-soft); color: var(--ca-danger); } .ca-quiz-actions { display: flex; align-items: center; gap: var(--ca-space-4); margin-top: var(--ca-space-5); flex-wrap: wrap; } .ca-quiz-result { margin-top: var(--ca-space-5); padding: var(--ca-space-5); border-radius: var(--ca-radius-lg); border: 1px solid var(--ca-border); display: none; animation: ca-fade-up 0.3s ease; } .ca-quiz-result.is-visible { display: block; } @keyframes ca-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ca-quiz-result { animation: none; } } .ca-quiz-result.is-pass { background: var(--ca-success-soft); border-color: var(--ca-success); color: var(--ca-success); } .ca-quiz-result.is-fail { background: var(--ca-warning-soft); border-color: var(--ca-warning); color: var(--ca-warning); } .ca-quiz-result h3 { margin-top: 0; color: inherit; } .ca-quiz-result p { color: inherit; } /* ---------- Try It playground: tabs, simulated clients, chat bubbles ------- */ .ca-playground { margin: var(--ca-space-6) 0; border: 1px solid var(--ca-border); border-radius: var(--ca-radius-lg); background: var(--ca-bg-elevated); overflow: hidden; } .ca-tabs { display: flex; gap: var(--ca-space-1); padding: var(--ca-space-3) var(--ca-space-3) 0; background: var(--ca-bg-sunken); border-bottom: 1px solid var(--ca-border); } .ca-tab { appearance: none; border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--ca-text-muted); font: inherit; font-weight: 600; font-size: var(--ca-fs-sm); padding: var(--ca-space-3) var(--ca-space-4); border-radius: var(--ca-radius-md) var(--ca-radius-md) 0 0; cursor: pointer; position: relative; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .ca-tab:hover { color: var(--ca-text); background: color-mix(in srgb, var(--ca-bg-elevated) 45%, transparent); } .ca-tab[aria-selected="true"] { background: var(--ca-bg-elevated); border-color: var(--ca-border); color: var(--ca-brand-strong); } .ca-tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--ca-space-3); right: var(--ca-space-3); bottom: -1px; height: 2px; background: var(--ca-brand); } .ca-tab:focus-visible { outline: 2px solid var(--ca-focus); outline-offset: 2px; } .ca-tabpanel { padding: var(--ca-space-5); } .ca-tabpanel[hidden] { display: none; } .ca-sim-header { display: flex; align-items: center; gap: var(--ca-space-2); margin-bottom: var(--ca-space-3); } .ca-sim-title { font-weight: 600; } .ca-sim-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ca-brand); flex: none; } .ca-sim-dot--desktop { background: var(--ca-warning); } .ca-sim-dot--code { background: var(--ca-success); } .ca-sim-flag { margin-left: auto; font-size: var(--ca-fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ca-danger); background: var(--ca-danger-soft); border-radius: 999px; padding: 2px var(--ca-space-3); flex: none; } .ca-sim-blurb { color: var(--ca-text-muted); font-size: var(--ca-fs-sm); margin-top: 0; } .ca-sim-log { min-height: 120px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--ca-space-3); padding: var(--ca-space-3) 0; } .ca-sim-bubble { border-radius: var(--ca-radius-md); padding: var(--ca-space-3) var(--ca-space-4); font-size: var(--ca-fs-sm); max-width: 92%; animation: ca-fade-up 0.25s ease; } @media (prefers-reduced-motion: reduce) { .ca-sim-bubble { animation: none; } } .ca-sim-bubble p:first-of-type { margin-top: var(--ca-space-1); } .ca-sim-bubble p:last-child { margin-bottom: 0; } .ca-sim-role { display: block; font-size: var(--ca-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ca-text-faint); margin-bottom: var(--ca-space-1); } .ca-sim-bubble--user { align-self: flex-end; background: var(--ca-brand-soft); border: 1px solid var(--ca-brand-soft); } .ca-sim-bubble--assistant { align-self: flex-start; background: var(--ca-bg-sunken); border: 1px solid var(--ca-border); width: 100%; } .ca-sim-typing .ca-sim-role { margin-bottom: 0; } .ca-sim-artifact { margin-top: var(--ca-space-3); border: 1px dashed var(--ca-border-strong); border-radius: var(--ca-radius-md); background: var(--ca-bg-elevated); padding: var(--ca-space-3); } .ca-sim-artifact-label { font-size: var(--ca-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ca-brand-strong); margin-bottom: var(--ca-space-2); } .ca-sim-artifact-body { font-family: var(--ca-font-mono); font-size: var(--ca-fs-xs); white-space: pre-wrap; margin: 0; color: var(--ca-text); } .ca-sim-connector { display: flex; align-items: center; gap: var(--ca-space-2); font-size: var(--ca-fs-xs); color: var(--ca-text-muted); background: var(--ca-bg-elevated); border: 1px solid var(--ca-border); border-radius: var(--ca-radius-sm); padding: var(--ca-space-2) var(--ca-space-3); margin-bottom: var(--ca-space-2); } .ca-sim-connector code { font-family: var(--ca-font-mono); background: var(--ca-bg-sunken); border-radius: 4px; padding: 0 4px; } .ca-sim-connector--none { color: var(--ca-warning); } .ca-sim-block-label { font-size: var(--ca-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ca-text-faint); margin-bottom: var(--ca-space-2); } .ca-sim-plan { margin-bottom: var(--ca-space-3); } .ca-sim-plan ol { margin: 0; padding-left: 1.25em; } .ca-sim-plan li { margin-bottom: var(--ca-space-1); } .ca-sim-tools { display: flex; flex-direction: column; gap: var(--ca-space-2); margin-bottom: var(--ca-space-3); } .ca-sim-tool { background: var(--ca-bg-elevated); border: 1px solid var(--ca-border); border-radius: var(--ca-radius-sm); padding: var(--ca-space-2) var(--ca-space-3); font-family: var(--ca-font-mono); font-size: var(--ca-fs-xs); transition: border-color 0.15s ease; } .ca-sim-tool:hover { border-color: var(--ca-border-strong); } .ca-sim-tool-label { display: inline-block; font-family: var(--ca-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ca-brand-strong); margin-right: var(--ca-space-2); } .ca-sim-tool-out { color: var(--ca-text-faint); margin-top: var(--ca-space-1); } .ca-sim-diff pre { background: var(--ca-bg-elevated); border: 1px solid var(--ca-border); border-radius: var(--ca-radius-sm); padding: var(--ca-space-3); font-family: var(--ca-font-mono); font-size: var(--ca-fs-xs); overflow-x: auto; margin: 0 0 var(--ca-space-3); } .ca-sim-diff span { display: block; } .ca-sim-diff-add { color: var(--ca-success); } .ca-sim-diff-del { color: var(--ca-danger); } .ca-sim-summary { font-weight: 600; } .ca-prompt-chips { display: flex; flex-wrap: wrap; gap: var(--ca-space-2); margin-bottom: var(--ca-space-3); } .ca-prompt-chip { appearance: none; border: 1px solid var(--ca-border-strong); background: var(--ca-bg); color: var(--ca-text-muted); font: inherit; font-size: var(--ca-fs-xs); border-radius: 999px; padding: var(--ca-space-1) var(--ca-space-3); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, transform 0.1s ease; } .ca-prompt-chip:hover { border-color: var(--ca-brand); color: var(--ca-brand-strong); background: var(--ca-brand-soft); } .ca-prompt-chip:active { transform: scale(0.97); } .ca-prompt-chip:focus-visible { outline: 2px solid var(--ca-focus); outline-offset: 2px; } .ca-sim-form { display: flex; gap: var(--ca-space-2); } .ca-sim-form input[type="text"] { flex: 1; border: 1px solid var(--ca-border-strong); border-radius: var(--ca-radius-md); padding: var(--ca-space-3); font: inherit; font-size: var(--ca-fs-sm); background: var(--ca-bg); color: var(--ca-text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ca-sim-form input[type="text"]:hover { border-color: var(--ca-brand); } .ca-sim-form input[type="text"]:focus-visible { outline: 2px solid var(--ca-focus); outline-offset: 1px; border-color: var(--ca-brand); } @media (max-width: 600px) { .ca-tabs { flex-wrap: wrap; } .ca-tab { padding: var(--ca-space-2) var(--ca-space-3); } .ca-sim-bubble { max-width: 100%; } } .ca-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Cheatsheet ------------------------------------------------------ */ kbd { display: inline-block; font-family: var(--ca-font-mono); font-size: 0.8em; line-height: 1; padding: 0.28em 0.5em; color: var(--ca-text); background: var(--ca-bg-elevated); border: 1px solid var(--ca-border-strong); border-bottom-width: 2px; border-radius: 5px; white-space: nowrap; box-shadow: var(--ca-shadow-sm); } /* Sticky search toolbar */ .ca-cheat-toolbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ca-bg) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: var(--ca-space-3) 0; margin: 0 0 var(--ca-space-2); border-bottom: 1px solid var(--ca-border); } .ca-cheat-search-wrap { position: relative; } .ca-cheat-search-icon { position: absolute; left: var(--ca-space-3); top: 50%; transform: translateY(-50%); color: var(--ca-text-faint); pointer-events: none; font-size: var(--ca-fs-lg); line-height: 1; } .ca-cheat-search { width: 100%; font: inherit; font-size: var(--ca-fs-base); padding: var(--ca-space-3) var(--ca-space-4) var(--ca-space-3) 2.6em; border: 1px solid var(--ca-border-strong); border-radius: var(--ca-radius-md); background: var(--ca-bg-elevated); color: var(--ca-text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ca-cheat-search::placeholder { color: var(--ca-text-faint); } .ca-cheat-search:hover { border-color: var(--ca-brand); } .ca-cheat-search:focus-visible { outline: 2px solid var(--ca-focus); outline-offset: 1px; border-color: var(--ca-brand); } .ca-cheat-count { font-size: var(--ca-fs-xs); color: var(--ca-text-faint); margin: var(--ca-space-2) 0 0; min-height: 1em; } /* Jump-to-section chips */ .ca-jumpnav { display: flex; flex-wrap: wrap; gap: var(--ca-space-2); margin: var(--ca-space-4) 0 var(--ca-space-6); padding: 0; list-style: none; } .ca-jump-chip { display: inline-block; font-size: var(--ca-fs-xs); font-weight: 600; text-decoration: none; color: var(--ca-text-muted); border: 1px solid var(--ca-border-strong); background: var(--ca-bg-elevated); border-radius: 999px; padding: var(--ca-space-1) var(--ca-space-3); transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease; } .ca-jump-chip:hover { color: var(--ca-brand-strong); border-color: var(--ca-brand); background: var(--ca-brand-soft); } .ca-jump-chip:active { transform: translateY(1px); } /* Copy-to-clipboard on code blocks */ .ca-copy-wrap { position: relative; margin: var(--ca-space-4) 0; } .ca-copy-wrap > pre { margin: 0; padding-right: 4.75rem; } .ca-copy-btn { position: absolute; top: var(--ca-space-2); right: var(--ca-space-2); font: inherit; font-size: var(--ca-fs-xs); font-weight: 600; color: var(--ca-text-muted); background: var(--ca-bg-elevated); border: 1px solid var(--ca-border-strong); border-radius: var(--ca-radius-sm); padding: 2px var(--ca-space-2); cursor: pointer; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .ca-copy-wrap:hover .ca-copy-btn, .ca-copy-btn:focus-visible { opacity: 1; } .ca-copy-btn:hover { color: var(--ca-brand-strong); border-color: var(--ca-brand); } .ca-copy-btn.is-copied { color: var(--ca-success); border-color: var(--ca-success); background: var(--ca-success-soft); } @media (hover: none) { .ca-copy-btn { opacity: 1; } } /* Command example cards */ .ca-cmd { border: 1px solid var(--ca-border); border-radius: var(--ca-radius-md); padding: var(--ca-space-4); margin: var(--ca-space-3) 0; background: var(--ca-bg-elevated); transition: border-color 0.15s ease; } .ca-cmd:hover { border-color: var(--ca-border-strong); } .ca-cmd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ca-space-2) var(--ca-space-3); margin-bottom: var(--ca-space-2); } .ca-cmd-name { font-family: var(--ca-font-mono); font-weight: 700; font-size: var(--ca-fs-sm); color: var(--ca-brand-strong); background: var(--ca-brand-soft); padding: 0.12em 0.5em; border-radius: 5px; } .ca-cmd-desc { color: var(--ca-text-muted); font-size: var(--ca-fs-sm); } .ca-cmd p:last-child { margin-bottom: 0; } .ca-cmd .ca-copy-wrap:last-child { margin-bottom: 0; } /* No-results message for the filter */ .ca-no-results { display: none; padding: var(--ca-space-5); text-align: center; color: var(--ca-text-muted); border: 1px dashed var(--ca-border-strong); border-radius: var(--ca-radius-md); margin: var(--ca-space-5) 0; } .ca-no-results.is-visible { display: block; } .ca-no-results code { white-space: nowrap; } /* Collapsible details (vim mode, etc.) */ details.ca-details { border: 1px solid var(--ca-border); border-radius: var(--ca-radius-md); padding: 0 var(--ca-space-4); margin: var(--ca-space-4) 0; background: var(--ca-bg-elevated); } details.ca-details > summary { cursor: pointer; font-weight: 600; padding: var(--ca-space-3) 0; list-style: none; } details.ca-details > summary::-webkit-details-marker { display: none; } details.ca-details > summary::before { content: "\25B8"; display: inline-block; margin-right: var(--ca-space-2); color: var(--ca-brand); transition: transform 0.15s ease; } details.ca-details[open] > summary::before { transform: rotate(90deg); } details.ca-details[open] > summary { border-bottom: 1px solid var(--ca-border); margin-bottom: var(--ca-space-3); } @media (prefers-reduced-motion: reduce) { details.ca-details > summary::before { transition: none; } } /* ========================================================================== Freemium paywall — locks, chips, gate panel, pricing, license input All colors reuse the --ca-* tokens so light/dark parity is automatic. ========================================================================== */ /* ---------- Sidebar: premium lock indicator ------------------------------- */ .ca-lock { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 0.72rem; line-height: 1; filter: grayscale(0.15); } /* Persistent "Get Premium" upgrade link in the nav footer (locked only). */ .ca-upgrade-link { width: 100%; justify-content: center; margin-bottom: var(--ca-space-3); } .ca-upgrade-link[hidden] { display: none; } /* ---------- Tier chips (Free / Premium) on cards -------------------------- */ .ca-chip { flex: none; font-size: var(--ca-fs-xs); line-height: 1; font-weight: 700; letter-spacing: 0.02em; padding: var(--ca-space-1) var(--ca-space-2); border-radius: 999px; border: 1px solid var(--ca-border-strong); white-space: nowrap; } .ca-chip--free { color: var(--ca-success); background: var(--ca-success-soft); border-color: color-mix(in srgb, var(--ca-success) 40%, transparent); } .ca-chip--premium { color: var(--ca-brand-contrast); background: var(--ca-brand); border-color: var(--ca-brand); } /* ---------- Gate panel (injected by paywall.js) --------------------------- */ .ca-paywall { border: 1px solid var(--ca-border); border-top: 4px solid var(--ca-brand); border-radius: var(--ca-radius-lg); background: var(--ca-bg-elevated); box-shadow: var(--ca-shadow-md); padding: var(--ca-space-6); margin: var(--ca-space-6) 0; text-align: center; } .ca-paywall-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ca-brand-soft); font-size: 1.5rem; margin-bottom: var(--ca-space-3); } .ca-paywall-title { font-size: var(--ca-fs-2xl); margin: 0 0 var(--ca-space-2); border: none; padding: 0; } .ca-paywall-teaser { color: var(--ca-text-muted); max-width: 46ch; margin: 0 auto var(--ca-space-4); } .ca-paywall-points { display: inline-block; text-align: left; margin: 0 auto var(--ca-space-4); color: var(--ca-text-muted); font-size: var(--ca-fs-sm); } .ca-paywall-price { font-size: var(--ca-fs-2xl); font-weight: 700; color: var(--ca-text); margin: 0 0 var(--ca-space-4); } .ca-paywall-cta { min-width: 220px; justify-content: center; } .ca-paywall-key { margin-top: var(--ca-space-6); padding-top: var(--ca-space-5); border-top: 1px solid var(--ca-border); max-width: 460px; margin-left: auto; margin-right: auto; } .ca-paywall-key-label { display: block; font-size: var(--ca-fs-sm); font-weight: 600; color: var(--ca-text-muted); margin-bottom: var(--ca-space-2); } .ca-paywall-key-row { display: flex; gap: var(--ca-space-2); flex-wrap: wrap; } /* License-key / access-code input */ .ca-key-input { flex: 1; min-width: 0; font: inherit; font-size: var(--ca-fs-sm); padding: var(--ca-space-3) var(--ca-space-4); border: 1px solid var(--ca-border-strong); border-radius: var(--ca-radius-md); background: var(--ca-bg); color: var(--ca-text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ca-key-input::placeholder { color: var(--ca-text-faint); } .ca-key-input:hover { border-color: var(--ca-brand); } .ca-key-input:focus-visible { outline: 2px solid var(--ca-focus); outline-offset: 1px; border-color: var(--ca-brand); } .ca-paywall-key-row .ca-btn { flex: none; } .ca-paywall-error { color: var(--ca-danger); font-size: var(--ca-fs-sm); margin: var(--ca-space-3) 0 0; } .ca-paywall-error[hidden] { display: none; } /* ---------- Pricing page -------------------------------------------------- */ .ca-cell-no { color: var(--ca-text-faint); text-align: center; } .ca-table td:nth-child(2), .ca-table td:nth-child(3) { text-align: center; width: 6.5rem; font-weight: 600; } .ca-pricing-cta { text-align: center; margin: var(--ca-space-5) 0; } .ca-pricing-price { font-size: var(--ca-fs-3xl); font-weight: 700; margin: 0 0 var(--ca-space-1); color: var(--ca-text); } .ca-pricing-billing { font-size: var(--ca-fs-lg); font-weight: 400; color: var(--ca-text-muted); } .ca-pricing-note { color: var(--ca-text-muted); font-size: var(--ca-fs-sm); margin: 0 0 var(--ca-space-4); } .ca-pricing-buy { min-width: 220px; justify-content: center; } .ca-key-box { margin: var(--ca-space-4) 0; } .ca-key-box .ca-paywall-key-row { margin-top: 0; } /* ---------- Legal disclaimer footer --------------------------------------- */ .ca-legal { margin-top: var(--ca-space-7); padding-top: var(--ca-space-5); border-top: 1px solid var(--ca-border); } .ca-legal p { font-size: var(--ca-fs-xs); color: var(--ca-text-faint); margin: 0 0 var(--ca-space-2); } .ca-legal-fine { font-size: var(--ca-fs-xs); }