/* GENERATED by tools/sync-apex-ui.mjs from packages/ui/src/cal-brand.css. Do not edit here; edit the source and re-run. */
/* Campaign web suite, revised to emerald and Switzer.
See brand/direction-v7/DECISION.md. */
html[data-concept="v7"] {
--v7-paper: #F1F2EE;
--v7-white: #FCFCF9;
--v7-ink: #202521;
--v7-muted: #626961;
--v7-line: #CDD1C8;
--v7-soft: #E5E8E0;
--v7-accent: #1D634A;
--v7-accent-soft: #DDEBE1;
--v7-green: #27634D;
--v7-green-soft: #DDE9E0;
--v7-dark: #061B17;
--v7-dark-muted: #B6C2B8;
--v7-dark-line: #46554E;
--v7-amber: #E7C991;
--v7-shadow: 0 24px 70px #20252116;
--v7-backdrop: #20252188;
--v7-display: 'Schibsted Grotesk', sans-serif;
--v7-reading: 'Zodiak', Georgia, serif;
--v7-ease: cubic-bezier(.22, .8, .2, 1);
}
/* =============================================================================
cal — CANONICAL BRAND TOKENS
-----------------------------------------------------------------------------
Single source of truth. Hardcoded from:
brand/CAL-BRAND-SYSTEM.md (v3, 2026-07-13)
brand/cal-brand-system.html (visual brand book :root)
native/ios/CalApp/Sources/CalApp/Support/CalTheme.swift (shipping native)
Version: 2.0 (brand v4), 2026-09-17. Previous: 1.1, locked 2026-08-06.
v4 changes the TYPE SYSTEM only. Every colour, size, space, radius, shadow
and motion value below is unchanged from 1.1. Decision record:
brand/v4/DECISION-2026-09-17-direction.md
Composed reference page: brand/v4/cal-brand-v4.html
Supersedes: packages/ui/src/tokens.css (which mirrored the LEGACY live site:
Fraunces / Inter / IBM Plex Mono, --dim #6b6b6b).
GROUND RULES (from the brand system, do not violate):
- One green accent. Green means "this answer is sourced." Never a second green.
- Green is a MARKER, never a letter. No green text, no green brackets.
ONE EXCEPTION, granted 2026-08-06 and scoped deliberately narrow:
the hero Turn's second line (.turn__b) may be set in --green-deep
italic, at display size, once per page, on marketing surfaces only.
Forbidden inside the workbench, inside any document artifact, in
email, and anywhere below display size. See --green-deep below.
- No gradients, no gloss, no 3D, no shadows. Hairlines and negative space only.
- Warm paper, never pure white. Warm near-black, never pure black.
- Radius 0. cal is rectangular.
- Amber is a fill/marker with ink on top. NEVER amber text on paper (1.94:1).
- No em dashes in user-facing copy.
- No gradients, ever, including as an "AI" cue. (v4)
- No monospace voice. Citations, kickers, dates and section refs are set
in the sans. A real monospace is kept only for code. (v4)
============================================================================= */
/* ---- FONTS -----------------------------------------------------------------
SELF-HOSTED in packages/ui/fonts/ (see its README for licences). The URLs are
relative to this file, so they resolve under the /packages/ui/ nginx alias on
every VPS surface and under ../../packages/ui/ in a local checkout. No page
needs a Google Fonts for the brand faces any more.
Zodiak ITF Free Font License. Served exactly as downloaded:
the licence forbids subsetting and format conversion.
Schibsted Grotesk SIL OFL 1.1.
--------------------------------------------------------------------------- */
@font-face { font-family: 'Zodiak'; src: url('../fonts/Zodiak-Variable.woff2') format('woff2');
font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Zodiak'; src: url('../fonts/Zodiak-VariableItalic.woff2') format('woff2');
font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('../fonts/SchibstedGrotesk-Variable.woff2') format('woff2');
font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('../fonts/SchibstedGrotesk-VariableItalic.woff2') format('woff2');
font-weight: 400 900; font-style: italic; font-display: swap; }
:root {
/* ==== TYPEFACES ==== v4: two brand families, three roles. Do not add a third. */
--serif: 'Zodiak', 'Source Serif 4', Georgia, 'Times New Roman', serif;
--wordmark: var(--serif); /* the logotype: Zodiak 700, tracking -0.015em */
--sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
--cite: var(--sans); /* the citation layer (v4) */
--code: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--mono: var(--cite); /* LEGACY NAME, repointed in v4. ~700 rules across the
product use var(--mono) for kickers, eyebrows, dates and
citations: that layer is now the sans, per Chris
2026-09-17. Real code keeps a monospace through the
code/pre/kbd/samp rule at the bottom of this file. */
/* wordmark = the cal / AskCal logotype ONLY. Never a heading, never UI.
serif = display, the answer verdict, quoted guideline text, section
references (italic), and proof numerals (lining figures).
sans = everything structural: Ask, tags, headings, body, labels,
forms, financial numbers (tabular-nums inside columns only),
AND the citation layer: effective dates, doc IDs, hashes, kickers.
code = code, commands and JSON. Nothing else. */
/* per-face tuning */
--wm-weight: 700; --wm-tracking: -0.015em;
--display-weight: 400;
/* ==== CORE PALETTE ==== contrast measured vs --paper / --paper-inset */
--paper: #F3F1EC; /* page + app background. warm off-white. */
--paper-inset: #ECE9E1; /* cards, wells, inputs. one step down. */
--paper-raised: #FBFAF6; /* raised surface. a hair above paper. */
--ink: #1A1A1A; /* primary text + the brackets. 15.42 / 14.35 AAA */
--ink-muted: #6A655C; /* secondary text. 5.13 / 4.77 AA */
--ink-faint: #8C877D; /* placeholders, captions. 3.17 / 2.95 — NON-TEXT / LARGE ONLY */
--hairline: #E3DFD6; /* dividers, borders. 1.18 / 1.10 — DECORATIVE ONLY, never text */
--hairline-strong: #B9B3A6;/* UI borders needing 3:1. 2.44 / 2.27 — see note below */
/* ==== THE GREEN ==== the single brand accent. Means: sourced. */
--green: #2D6A4F; /* the answer, brand accent, approved. 5.66 / 5.27 AA text */
--green-strong: #1D8A5C; /* large marks + headline numerals ONLY. 3.84 / 3.57 */
--green-dark: #3F9069; /* the answer in DARK MODE. 4.48 on ink — large text / UI only */
--green-deep: #1B4332; /* THE HERO TURN ONLY. 9.81 / 9.13 — the single sanctioned
instance of green as a letter. Never use elsewhere. */
--green-hover: #245640; /* v4: interactive states are steps of the one green */
--green-active: #1B4332;
/* ==== STATUS ==== quiet, never the brand. Always paired with an icon or label. */
--status-approved: #2D6A4F; /* reuse the answer green so green means approval everywhere */
--status-alert: #E6A23C; /* amber. FILL/MARKER ONLY with ink on top (7.95). Never text on paper. */
--status-action: #1E5FA6; /* the only blue, demoted to status. 5.74 / 5.34 AA text */
--status-declined: #B42318; /* muted brick. 5.82 / 5.42 AA text */
--focus: #1E5FA6; /* focus ring reuses the action blue */
/* washes — tinted surfaces. A surface may ONLY be tinted to carry a status. */
--green-wash: #E7EFE9;
--alert-wash: #FAF0DE;
--action-wash: #E7EEF8;
--declined-wash: #F8EAE8;
/* ==== TYPE SCALE ==== base 16px. 11 sizes. Floor 12px. */
--fs-wordmark: 40px; /* 40 to 64. logotype only. */
--fs-display: clamp(2rem, 5.2vw, 3.25rem); /* 32 → 52. Zodiak. The answer headline. */
--fs-h1: 28px; /* Schibsted 600 */
--fs-h2: 22px; /* Schibsted 600 */
--fs-h3: 18px; /* Schibsted 600 */
--fs-lead: 19px; /* Schibsted 400 */
--fs-body: 15px; /* Schibsted 400 — brand default UI body */
--fs-body-lg: 16px; /* Schibsted 400 — long-form reading */
--fs-label: 13px; /* Schibsted 500 — buttons, tags, nav */
--fs-citation: 12px; /* Schibsted (the cite layer) — §refs, IDs, effective dates */
--fs-micro: 12px; /* Schibsted — hashes, timestamps. HARD FLOOR. */
--lh-wordmark: 1.05; --lh-display: 1.1; --lh-h1: 1.2;
--lh-h2: 1.25; --lh-body: 1.55; --lh-label: 1.4; --lh-citation: 1.5;
--ls-display: -0.018em; --ls-tight: -0.01em; --ls-normal: 0; --ls-caps: 0.08em;
/* v4 additions. Tracking curve after apple.com (2026-09-17): negative at label
size, slightly positive through the lead, negative again at display. */
--fs-turn: clamp(36px, 5.85vw, 84px); /* the hero Turn. Marketing only. */
--fs-numeral: clamp(48px, 7vw, 96px); /* proof numerals, serif, one row per surface */
--ls-label: -0.012em; /* 13 to 14px sans */
--ls-lead: 0.01em; /* 19 to 28px sans */
--ls-turn: -0.02em; /* the Turn only */
--ls-kicker: 0.12em; /* caps kickers and index numbers */
/* ==== SPACING ==== 4px base */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
--s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
/* ==== RADIUS ==== SHARP. cal is rectangular. */
--r-0: 0; --r-sm: 0; --r-md: 0; --r-lg: 0;
--r-full: 9999px; /* status dots and avatars ONLY */
/* ==== SHADOWS ==== none. Use hairlines. */
--shadow-sm: none; --shadow-md: none;
/* ==== MOTION ==== transform + opacity only. Never animate layout. Micro moves 100-300ms;
signature moments (hero set, scroll arrivals, chart draw-in) run longer, play once,
never loop. See brand/CAL-BRAND-SYSTEM.md section 8. */
--dur-fast: 100ms; --dur-base: 180ms; --dur-slow: 300ms;
--ease: cubic-bezier(.22,.61,.36,1);
/* ==== LAYOUT ==== */
--max: 1140px; --max-prose: 68ch; --max-narrow: 46ch;
/* breakpoints, mobile-first: 480 / 720 / 960 / 1200. Nothing else. */
/* ==== MARK GEOMETRY ==== all values key off mark height M */
--mark-stroke-ratio: 0.16; /* bracket stroke */
--mark-square-ratio: 0.14; /* green square */
--mark-gap-ratio: 0.40; /* mark → wordmark */
--mark-tag-ratio: 0.60; /* product tag : cal */
--mark-min: 20px; /* below this, mark alone */
}
/* ==== THE PAPER ISLAND ==== 2026-10-12.
A component that must wear the public (paper) brand even when it is mounted on a
Night, dark or Modern page sets class="cal-paper" on its root. Custom properties
inherit, so the subtree resolves to paper no matter what the page's theme block
set on :root. Today the one user is the universal sign-in (signin.css / signin.js,
Chris 2026-10-12: "this needs to be universal"), which covers a Night page while
the loan officer is signed out. The values are the :root values above, repeated
on purpose: this file is still the only one that names a colour. Keep the two in
step when the core palette or the type roles change. Type is pinned too: Modern
points --serif at the sans, and the split keeps Zodiak for its display line. */
.cal-paper {
color-scheme: light;
--serif: 'Zodiak', 'Source Serif 4', Georgia, 'Times New Roman', serif;
--wordmark: var(--serif);
--sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
--cite: var(--sans); --mono: var(--cite);
--paper: #F3F1EC; --paper-inset: #ECE9E1; --paper-raised: #FBFAF6;
--ink: #1A1A1A; --ink-muted: #6A655C; --ink-faint: #8C877D;
--hairline: #E3DFD6; --hairline-strong: #B9B3A6;
--green: #2D6A4F; --green-strong: #1D8A5C; --green-dark: #3F9069;
--green-deep: #1B4332; --green-hover: #245640; --green-active: #1B4332;
--status-approved: #2D6A4F; --status-alert: #E6A23C; --status-action: #1E5FA6;
--status-declined: #B42318; --focus: #1E5FA6;
--green-wash: #E7EFE9; --alert-wash: #FAF0DE; --action-wash: #E7EEF8; --declined-wash: #F8EAE8;
--r-0: 0; --r-sm: 0; --r-md: 0; --r-lg: 0;
}
/* ==== COMPONENT TOKENS ==== 2026-10-12. One component vocabulary.
The primitives in components.css (button, field, card, chip, tag, notice) and the
citation square below read these and nothing else, so one class renders paper on a
paper page, Night on a Night page and Modern on a Modern one. The names are .cal-*;
the Night names (.n-btn, .n-cta, .n-card, .n-chip, .n-tag, .n-field, .n-input,
.n-label, .n-note, .n-sq) are aliases in the same selector lists, kept so existing
markup renders unchanged. New code uses .cal-*.
The values here are the paper look; the NIGHT block below overrides the ones that
differ. Radii go through --r-*, which paper pins to 0 and Night and Modern round.
Declared on every themed scope ([data-theme], .cal-paper) and not on :root alone,
because a custom property resolves its var() where it is declared: a Night panel
inside a paper page, or the paper island inside a Night page, must recompute them.
Reference page: packages/ui/demo/primitives.html. */
:root, [data-theme], .cal-paper {
/* button, the secondary role: .cal-btn = .n-btn */
--btn-h: auto; --btn-py: 13px; --btn-px: 22px; --btn-gap: 8px;
--btn-fs: 15px; --btn-fw: 500; --btn-ls: -0.005em; --btn-lh: 1;
--btn-radius: var(--r-md);
--btn-border: 1px solid var(--ink);
--btn-bg: transparent; --btn-fg: var(--ink);
--btn-hover-bg: var(--ink); --btn-hover-fg: var(--paper);
--btn-on-card-bg: transparent;
--btn-dur: var(--dur-fast);
--btn-disabled-opacity: 0.45; --btn-disabled-cursor: not-allowed;
/* button, the one primary action: .cal-btn--primary = .n-cta */
--btn-primary-h: auto; --btn-primary-py: 13px; --btn-primary-px: 22px; --btn-primary-gap: 8px;
--btn-primary-fs: 15px; --btn-primary-fw: 500;
--btn-primary-border: 1px solid var(--green);
--btn-primary-bg: var(--green); --btn-primary-fg: var(--on-green);
--btn-primary-hover-bg: var(--green-deep);
--btn-primary-scale: 1;
--btn-primary-disabled-opacity: 0.45;
/* the arrow cell inside a primary action: .cal-btn__dot = .n-cta-dot. Square on paper. */
--btn-dot-radius: var(--r-md); --btn-dot-bg: var(--paper); --btn-dot-fg: var(--ink);
/* button, the quiet role: .cal-btn--ghost = .n-textbtn */
--btn-quiet-h: auto; --btn-quiet-py: 13px; --btn-quiet-px: 22px; --btn-quiet-fs: 15px; --btn-quiet-fw: 500;
--btn-quiet-border: 1px solid transparent;
--btn-quiet-fg: var(--ink-muted); --btn-quiet-deco: none;
--btn-quiet-hover-bg: var(--paper-inset); --btn-quiet-hover-fg: var(--ink);
/* button, small: .cal-btn--sm = .n-btn--sm */
--btn-sm-h: auto; --btn-sm-py: 9px; --btn-sm-px: 16px; --btn-sm-fs: 14px; --btn-quiet-sm-px: 16px;
/* boxed input: .cal-input = .cal-textarea = .n-input */
--input-w: auto; --input-h: auto; --input-py: 12px; --input-px: 16px; --input-fs: 15px;
--input-bg: var(--paper-raised); --input-border: var(--hairline); --input-radius: var(--r-sm);
--input-placeholder: var(--ink-muted); --input-focus-border: var(--green);
/* label and hint: .cal-label = .n-label, .cal-help */
--label-fs: 13px; --label-fg: var(--ink-muted); --help-fg: var(--ink-muted);
/* underline field: .cal-field--line = .n-field. The focus underline is an interactive state. */
--line-border: var(--hairline-strong); --line-focus: var(--green);
/* card: .cal-card = .n-card */
--card-bg: var(--paper); --card-border: 1px solid var(--hairline); --card-radius: var(--r-lg);
--card-pad: 24px; --card-hover-bg: var(--paper-inset);
--card-tight-pad: 16px 20px; --card-tight-radius: var(--r-lg);
--card-phone-pad: 24px; --card-phone-radius: var(--r-lg);
/* chip and tag: .cal-chip = .n-chip, .cal-tag = .n-tag */
--chip-bg: var(--paper-inset); --chip-radius: var(--r-sm); --chip-hover-bg: var(--paper-inset);
--tag-bg: var(--paper-inset); --tag-radius: var(--r-sm);
/* text on a fill: ink on amber, paper on green (Night: --on-signal on both) */
--on-alert: var(--ink); --on-green: var(--paper);
/* notice: .cal-notice */
--notice-bg: var(--paper-inset); --notice-border: 1px solid var(--hairline); --notice-radius: var(--r-md);
/* the square: .cal-sq = .n-sq, .cal-sq--hollow = .n-sq0 */
--sq-stroke: 1px;
}
/* Anything printed from a Night or Modern page comes out on paper: a loan officer
printing a ValueGuard page or a Deal Saver result gets the public brand, not a
dark sheet. Same values as the island above, for the same reason. */
@media print {
[data-theme="night"], [data-theme="modern"], [data-theme="dark"] {
color-scheme: light;
--paper: #F3F1EC; --paper-inset: #ECE9E1; --paper-raised: #FBFAF6;
--ink: #1A1A1A; --ink-muted: #6A655C; --ink-faint: #8C877D;
--hairline: #E3DFD6; --hairline-strong: #B9B3A6;
--green: #2D6A4F; --green-strong: #1D8A5C; --green-dark: #3F9069; --green-deep: #1B4332;
--green-hover: #245640; --green-active: #1B4332; --signal: #2D6A4F; --on-signal: #F3F1EC;
--status-approved: #2D6A4F; --status-alert: #E6A23C; --status-action: #1E5FA6; --status-declined: #B42318; --focus: #1E5FA6;
--green-wash: #E7EFE9; --alert-wash: #FAF0DE; --action-wash: #E7EEF8; --declined-wash: #F8EAE8;
}
}
/* ==== DARK MODE ==== */
@media (prefers-color-scheme: dark) {
/* Night is dark already and owns its palette. Without :not(night) this
(0,2,0) selector outranks [data-theme="night"] below, and every signed-in
page on a dark-mode device got paper-dark (#1A1A1A, faint text at 4.35:1). */
:root:not([data-theme="light"]):not([data-theme="night"]):not([data-campaign="v6"]) {
color-scheme: dark;
--paper: #1A1A1A;
--paper-inset: #141312;
--paper-raised: #242422;
--ink: #F3F1EC;
--ink-muted: #C4C0B6;
--ink-faint: #8C877D;
--hairline: #3A3833;
--hairline-strong: #5A574F;
--green: #3F9069; /* lifted for contrast on ink */
--green-strong: #4FA67C;
--green-hover: #4FA67C;
--green-wash: #17251D;
--status-approved: #3F9069;
--status-action: #7FA9E8;
--status-declined: #E08585;
--focus: #7FA9E8;
--action-wash: #161D29;
--alert-wash: #2A2113;
--declined-wash:#2A1717;
}
}
[data-theme="dark"] {
color-scheme: dark;
--paper:#1A1A1A; --paper-inset:#141312; --paper-raised:#242422;
--ink:#F3F1EC; --ink-muted:#C4C0B6; --ink-faint:#8C877D;
--hairline:#3A3833; --hairline-strong:#5A574F;
--green:#3F9069; --green-strong:#4FA67C; --green-hover:#4FA67C; --green-wash:#17251D;
--status-approved:#3F9069; --status-action:#7FA9E8; --status-declined:#E08585;
--focus:#7FA9E8; --action-wash:#161D29; --alert-wash:#2A2113; --declined-wash:#2A1717;
}
/* ==== NIGHT ==== the signed-in app (Command Center and its tools). 2026-10-03.
Decision record: brand/v5-night/DECISION-2026-10-03-night.md.
SCOPE: only a page that sets . Today that is
apps/copilot. askcal.io, every other subdomain, every document, email and
share card stay on the paper brand above, unchanged.
Night breaks four paper rules on purpose, and only inside that scope:
1. Radius. The app is rounded: --r-sm / --r-md / --r-lg / --r-xl carry
real values here. Pills use --r-full.
2. A third typeface. Bricolage Grotesque (SIL OFL 1.1, self-hosted) sets
display headings through --display. Zodiak keeps the wordmark and the
italic section references; Schibsted Grotesk keeps everything else.
3. The green. On a dark ground the one green is #57E08A, the dark value of
the same accent. It has four jobs and no others: the primary action,
the cited square, the live dot, and the verdict word (--signal, the one
place it is a letter; the arrow inside the primary action uses it too). Text on a green fill is --on-signal.
4. Dark first. There is no paper theme inside the app.
Still true in Night: no gradients, no shadows, no gloss; filled square means
sourced and hollow square means lender overlay or not verified; amber is a
fill with dark text on it, never text; 12px type floor.
Contrast, measured on --paper #0C1210 / --paper-inset #151D19 / --paper-raised
#1D2822: --ink 16.7 / 15.2 / 13.5, --ink-muted 10.3 / 9.3 / 8.3, --ink-faint
7.2 / 6.5 / 5.8 (so, unlike paper, faint is real text here), --green 11.2 /
10.2 / 9.0, --status-declined 9.2 / 8.4 / 7.4, --status-action 9.0 / 8.2 /
7.2. --on-signal on --green is 11.2 and on amber 8.7.
--hairline-strong #5C6A61 is 3.3 / 3.0 / 2.7: it is the 3:1 edge for inputs
(WCAG 1.4.11) on the ground and on a surface, not on surface 2.
--hairline is decorative only. */
@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/BricolageGrotesque-Variable-latin.woff2') format('woff2');
font-weight: 200 800; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
[data-theme="night"] {
color-scheme: dark;
--paper: #0C1210; /* the ground */
--paper-inset: #151D19; /* surface: cards, the ask box, wells */
--paper-raised: #1D2822; /* surface 2: chips, inputs on a card, menus */
--night-hover: #26342C; /* hover and pressed, one step up again */
--ink: #EEF2EE;
--ink-muted: #B6C2BA;
--ink-faint: #94A399;
--hairline: #26332B;
--hairline-strong: #5C6A61;
--green: #57E08A;
--green-strong: #57E08A;
--green-dark: #57E08A;
--green-deep: #7BEAA4; /* in Night this is the hover step, lighter not darker */
--green-hover: #7BEAA4;
--green-active: #45C877;
--signal: #57E08A; /* green as a glyph, the two places Night allows it: the
verdict word, and the arrow inside the primary action */
--on-signal: #0C1210; /* text and icons on a green or amber fill */
--green-print: #2D6A4F; /* the paper green, for anything that leaves the app */
--status-approved: #57E08A;
--status-alert: #E6A23C;
--status-action: #8AB4F8;
--status-declined: #FF9A8A;
--focus: #8AB4F8;
--green-wash: #14261B;
--alert-wash: #2B2413;
--action-wash: #152030;
--declined-wash: #2C1917;
--display: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
--ls-display: -0.03em;
--r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px;
/* the component tokens that differ from paper (see COMPONENT TOKENS above) */
--btn-h: 56px; --btn-py: 0; --btn-px: 24px; --btn-gap: 10px;
--btn-fs: 16px; --btn-fw: 600; --btn-ls: normal; --btn-lh: 1.5;
--btn-radius: var(--r-full); --btn-border: 0; --btn-bg: var(--paper-inset);
--btn-hover-bg: var(--night-hover); --btn-hover-fg: var(--ink);
--btn-on-card-bg: var(--paper-raised);
--btn-dur: var(--dur-base);
--btn-disabled-opacity: 0.5;
--btn-primary-h: 56px; --btn-primary-py: 0; --btn-primary-px: 28px; --btn-primary-gap: 12px;
--btn-primary-fs: 17px; --btn-primary-fw: 700; --btn-primary-border: 0;
--btn-primary-hover-bg: var(--green-hover); --btn-primary-scale: 1.03;
--btn-primary-disabled-opacity: 0.55;
--btn-dot-radius: var(--r-full); --btn-dot-bg: var(--on-signal); --btn-dot-fg: var(--signal);
--btn-quiet-h: 44px; --btn-quiet-py: 0; --btn-quiet-px: 4px; --btn-quiet-fw: 600; --btn-quiet-border: 0;
--btn-quiet-deco: underline; --btn-quiet-hover-bg: transparent;
--btn-sm-h: 44px; --btn-sm-py: 0; --btn-sm-px: 18px; --btn-sm-fs: 15px; --btn-quiet-sm-px: 4px;
--input-w: 100%; --input-h: 48px; --input-py: 10px; --input-px: 14px; --input-fs: 16px;
--input-bg: var(--paper); --input-border: var(--hairline-strong);
--input-placeholder: var(--ink-faint); --input-focus-border: var(--hairline-strong);
--label-fs: 14px; --label-fg: var(--ink-faint); --help-fg: var(--ink-faint);
--card-bg: var(--paper-inset); --card-border: 0; --card-radius: var(--r-xl); --card-pad: 28px 30px 30px;
--card-tight-pad: 20px 26px; --card-phone-pad: 22px 20px 24px;
--chip-bg: var(--paper-raised); --chip-radius: var(--r-full); --chip-hover-bg: var(--night-hover);
--tag-bg: var(--paper-raised); --tag-radius: var(--r-full);
--on-alert: var(--on-signal); --on-green: var(--on-signal);
--notice-border: 1px solid var(--hairline-strong);
--sq-stroke: 1.5px;
}
/* ==== MODERN ==== ValueGuard, light. 2026-10-07.
Decision: Chris, 2026-10-07 ("not the vibe, fresh sleek and modern"), light, applied to
the ValueGuard page and its shareable PDF report.
SCOPE: only a page or document that sets data-theme="modern". Today that is
apps/valueguard and the ValueGuard report PDF. Every other surface keeps its theme.
Modern is the paper brand without the paper: cool white and grey surfaces, one
sans typeface (Schibsted Grotesk) set tight at display size, rounded cards, and
hairlines instead of shadows. Zodiak survives only in the wordmark.
Kept from the brand: one green that means sourced (a marker, a fill with white on
it, and the verdict mark, never a gradient), filled square = sourced, hollow square
= not verified, amber is a fill with ink on it, 12px type floor, no gradients, no
shadows, no gloss, no em dashes.
Contrast: --ink 18.5 on --paper-raised, --ink-muted 6.2 / 5.8 on raised / paper,
--green 5.4 on raised and 5.0 on paper, white on --green 5.4. --ink-faint (3.7) is
non-text only. --hairline-strong is the 3:1 edge for inputs on white. */
:root[data-theme="modern"] { /* :root[...] so it outranks the prefers-color-scheme dark block above */
color-scheme: light;
--paper: #F5F7F9; /* the ground, cool */
--paper-inset: #EDF0F3; /* wells, table stripes, inputs at rest */
--paper-raised: #FFFFFF; /* cards and sheets */
--ink: #0E141B;
--ink-muted: #556270;
--ink-faint: #7A8794; /* non-text only */
--hairline: #E3E8ED;
--hairline-strong: #8A96A3;
--green: #0B7A4B;
--green-strong: #0B7A4B;
--green-dark: #0B7A4B;
--green-deep: #0B7A4B;
--green-hover: #09663E;
--green-active: #075233;
--on-signal: #FFFFFF; /* text on a green fill */
--on-green: var(--on-signal);
--status-approved: #0B7A4B;
--status-alert: #E6A23C; /* fill only, ink on top */
--status-action: #1D5FD0;
--status-declined: #B42318;
--focus: #1D5FD0;
--green-wash: #E6F5EE;
--alert-wash: #FDF3E0;
--action-wash: #E8EFFB;
--declined-wash: #FBEBE9;
--serif: var(--sans); /* no serif inside Modern */
--wordmark: 'Zodiak', Georgia, serif;
--display: var(--sans);
--display-weight: 600;
--ls-display: -0.035em;
--ls-tight: -0.02em;
--r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
}
/* Campaign v6, opt-in while each surface is reviewed. Chris, 2026-10-14.
This block owns the campaign palette and type. Existing surfaces retain
their approved theme until they explicitly adopt data-campaign="v6". */
:root[data-campaign="v6"] {
color-scheme: dark;
--campaign-forest: #020F0C;
--campaign-panel: #09221B;
--campaign-raised: #12362B;
--campaign-ivory: #F6F3E8;
/* Legacy token name retained for shared components; its color is emerald. */
--campaign-mint: #47CE93;
--emerald-action: #146C49;
--emerald-action-hover: #197B54;
--emerald-action-ink: var(--campaign-ivory);
--btn-primary-bg: var(--emerald-action);
--btn-primary-fg: var(--emerald-action-ink);
--btn-primary-border: 1px solid var(--emerald-action);
--btn-primary-hover-bg: var(--emerald-action-hover);
--campaign-muted: #B5C9BE;
--campaign-line: #395C4D;
--campaign-edge: #719787;
--campaign-ink: #10261E;
--campaign-paper-muted: #526359;
--campaign-paper-inset: #E7EBDD;
--campaign-paper-line: #C1CBBB;
--paper: var(--campaign-forest);
--paper-inset: var(--campaign-panel);
--paper-raised: var(--campaign-raised);
--ink: var(--campaign-ivory);
--ink-muted: var(--campaign-muted);
--ink-faint: var(--campaign-muted);
--hairline: var(--campaign-line);
--hairline-strong: var(--campaign-edge);
--green: var(--campaign-mint);
--green-deep: var(--campaign-mint);
--green-hover: #65DBA8;
--signal: var(--campaign-mint);
--on-signal: var(--campaign-ink);
--focus: var(--campaign-mint);
--display: 'Switzer', var(--sans);
--wordmark: var(--display);
--r-sm: 4px; --r-md: 8px; --r-lg: 12px;
--campaign-ease: cubic-bezier(.2,.7,.2,1);
--campaign-fast: 160ms;
--campaign-enter: 280ms;
--campaign-glow: rgba(36,155,102,.10);
--campaign-glass: rgba(16,46,37,.86);
--campaign-shade: rgba(2,13,11,.28);
--campaign-shadow: 0 14px 40px rgba(2,13,11,.20);
--status-approved: var(--campaign-mint); --status-action: #9AC5FF; --status-declined: #FFB3A8;
}
/* Campaign aliases let existing tool contracts consume one palette. */
:root[data-campaign="v6"] {
--r-xl: 24px;
--night-hover: var(--campaign-raised);
--paper-deep: var(--paper-inset); --raised: var(--paper-raised);
--ink-2: var(--ink); --dim: var(--ink-muted); --muted: var(--ink-muted);
--rule: var(--hairline); --line: var(--hairline);
--bg: var(--paper); --bg-raised: var(--paper-raised); --bg-sunk: var(--paper-inset);
--fg: var(--ink); --fg-muted: var(--ink-muted); --fg-subtle: var(--ink-faint);
--border: var(--hairline); --accent: var(--signal); --accent-hover: var(--green-hover); --accent-ink: var(--on-signal);
--cal-bg: var(--paper); --cal-bg-raised: var(--paper-raised); --cal-bg-sunken: var(--paper-inset);
--cal-fg: var(--ink); --cal-fg-muted: var(--ink-muted); --cal-fg-subtle: var(--ink-faint);
--cal-font-serif: var(--display);
--cal-border: var(--hairline); --cal-accent: var(--signal); --cal-accent-hover: var(--green-hover);
--dur-base: var(--campaign-fast); --ease: var(--campaign-ease);
}
:root[data-campaign="v6"][data-surface="paper"],
:root[data-campaign="v6"][data-surface="app"][data-theme="light"] {
color-scheme: light;
--paper: var(--campaign-ivory); --paper-raised: var(--campaign-ivory); --paper-inset: var(--campaign-paper-inset);
--ink: var(--campaign-ink); --ink-muted: var(--campaign-paper-muted); --ink-faint: var(--campaign-paper-muted);
--hairline: var(--campaign-paper-line); --hairline-strong: var(--campaign-paper-muted);
--green: var(--campaign-panel); --green-deep: var(--campaign-forest); --green-hover: var(--campaign-raised);
--signal: var(--campaign-panel); --on-signal: var(--campaign-ivory); --focus: var(--campaign-panel);
--green-wash: var(--campaign-paper-inset);
--status-approved: var(--campaign-panel); --status-action: #1B5799; --status-declined: #B42318;
}
/* Campaign sign-in remains an ivory form island on campaign pages only. */
:root[data-campaign="v6"] .cal-signin--campaign.cal-paper {
color-scheme: light;
--paper: var(--campaign-ivory);
--paper-raised: var(--campaign-ivory);
--paper-inset: var(--campaign-paper-inset);
--ink: var(--campaign-ink);
--ink-muted: var(--campaign-paper-muted);
--ink-faint: var(--campaign-paper-muted);
--hairline: var(--campaign-paper-line);
--hairline-strong: var(--campaign-edge);
--green: var(--campaign-panel);
--green-deep: var(--campaign-forest);
--green-hover: var(--campaign-raised);
--green-dark: var(--campaign-mint);
--focus: var(--campaign-panel);
--display: 'Switzer', var(--sans);
--r-sm: 8px; --r-md: 12px; --r-lg: 20px;
}
@media print {
:root[data-campaign="v6"] {
color-scheme: light;
--paper: var(--campaign-ivory); --paper-inset: var(--campaign-paper-inset); --paper-raised: var(--campaign-ivory);
--ink: var(--campaign-ink); --ink-muted: var(--campaign-paper-muted); --ink-faint: var(--campaign-paper-muted);
--hairline: var(--campaign-paper-line); --hairline-strong: var(--campaign-paper-muted);
--green: var(--campaign-panel); --signal: var(--campaign-panel); --on-signal: var(--campaign-ivory);
}
}
/* ==== GLOBAL BASELINE ==== */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after { animation-duration:1ms!important; transition-duration:1ms!important; }
}
.tabular { font-variant-numeric: tabular-nums lining-nums; }
/* =============================================================================
NOTES / OPEN ITEMS
-----------------------------------------------------------------------------
0. TYPE SYSTEM v4 — DECIDED 2026-09-17. Zodiak (display, wordmark, quoted
guideline text, section refs, proof numerals) and Schibsted Grotesk
(everything else, including citations). Newsreader, Geist and Geist Mono
are retired. --mono now points at the sans; code keeps a real monospace.
The native bundle in native/ios/CalApp/Sources/CalApp/Resources/Fonts is
NOT yet re-cut; that is a separate PR.
1. WORDMARK SERIF — RESOLVED 2026-08-06. Instrument Serif is retired;
--wordmark aliases --serif (Newsreader). Rationale from §3: Instrument is
single-weight and high-contrast, so it thinned and read condensed at 36px
nav and favicon sizes. Three families now. The native app font bundle in
Sources/CalApp/Resources needs re-cutting to match — see BUILD phase 04.
2. --ink-faint #8C877D is 3.17:1 on paper. It FAILS AA for normal text.
Allowed for: placeholders, disabled states, and 24px+ display text.
For real secondary content use --ink-muted #6A655C (5.13:1).
3. --green-dark #3F9069 on --ink is 4.48:1, marginally under the 4.5 AA
threshold for normal text. Use it at 18.66px+ semibold or 24px+, or for
UI/marker fills. For small dark-mode body text use --ink-muted.
4. --hairline #E3DFD6 is 1.18:1. It is a DIVIDER, never text and never a
control border that must meet WCAG 1.4.11 (3:1). Use --hairline-strong
for input borders; on paper it is 2.44:1, so pair it with an interior
fill change or bump to --ink-muted where 3:1 is required.
5. CAL-BRAND-SYSTEM.md flags a typo to fix at source: the board prints the
green as #2D6AAF (blue). Correct value is #2D6A4F.
6. LEGACY values now retired. Do not reintroduce:
Fraunces / Inter / IBM Plex Mono (old web stack)
Instrument Serif (wordmark, retired 2026-08-06)
Newsreader / Geist / Geist Mono (v3 stack, retired 2026-09-17)
Server Mono (no section sign in v1.200)
--dim #6b6b6b -> --ink-muted #6A655C (6b6b6b fails AA at 4.32:1)
--rule #d8d4c8 -> --hairline #E3DFD6
--paper-deep #ebe7dd -> --paper-inset #ECE9E1
--blue #1f4f9c -> --status-action #1E5FA6
--amber #a06820 -> --status-alert #E6A23C (fill only)
============================================================================= */
/* =============================================================================
THE HERO TURN — the one sanctioned instance of green as a letter.
Marketing surfaces only. Once per page. Never in the workbench or a document.
============================================================================= */
.turn { font-family: var(--serif); font-size: var(--fs-display);
line-height: 1.05; letter-spacing: var(--ls-display);
font-optical-sizing: auto; margin: 0; }
.turn__a { color: var(--ink); display: block; }
.turn__b { color: var(--green-deep); font-style: italic; display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .turn__b { color: var(--green-dark); }
}
[data-theme="dark"] .turn__b { color: var(--green-dark); }
/* =============================================================================
v4 BASELINE AND COMPONENTS
Class names are prefixed cal- on purpose: .cite, .stamp and .idx already
exist on product pages with other meanings.
============================================================================= */
/* Code stays monospace even where a page styles it with var(--mono): the custom
property is re-declared on the element, so var(--mono) resolves to --code
inside code, pre, kbd and samp. */
code, pre, kbd, samp { --mono: var(--code); }
.lining { font-variant-numeric: lining-nums proportional-nums; }
/* The wordmark */
.cal-wordmark { font-family: var(--wordmark); font-weight: var(--wm-weight);
letter-spacing: var(--wm-tracking); line-height: 1; color: var(--ink); }
/* Kicker and index: a green square, then letterspaced caps in the sans */
.cal-idx { font-family: var(--cite); font-weight: 500; font-size: var(--fs-micro);
letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--ink-muted);
display: flex; gap: 12px; align-items: center; }
.cal-idx::before { content: ""; width: 8px; height: 8px; background: var(--green); flex: none; }
/* The citation, as a marginal note. Never green text. */
.cal-cite { font-family: var(--cite); font-size: 13px; line-height: 1.5; color: var(--ink);
font-variant-numeric: lining-nums; }
.cal-cite__src { font-weight: 600; }
.cal-cite__sec, .n-secref { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.4; }
.cal-cite__quote { font-family: var(--serif); font-size: 17px; line-height: 1.4; }
.cal-cite__meta { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; font-size: var(--fs-micro); }
.cal-cite__meta dt { color: var(--ink-muted); }
.cal-cite__meta dd { margin: 0; font-variant-numeric: tabular-nums; }
/* The square: filled means sourced, hollow means overlay or not yet verified */
/* .n-sq and .n-sq0 are the Night names for the same two squares (see COMPONENT TOKENS). */
.cal-sq, .n-sq, .n-sq0 { display: inline-block; flex: none; box-sizing: border-box; width: 8px; height: 8px; background: var(--green);
transition: transform 120ms var(--ease); }
.cal-sq--hollow, .n-sq0 { background: transparent; border: var(--sq-stroke) solid var(--ink); }
.cal-sq:hover, .cal-sq:focus-visible { transform: scale(1.28); }
/* The citation as a live object. The marker is the square plus the section
reference; hovering or focusing it (keyboard gets the same treatment as
the mouse, on purpose) scales the square and underlines the reference.
The effective date is composed outside the marker everywhere it is used,
so it is never part of this and never moves. */
.cal-cite-marker { display: inline-flex; align-items: center; gap: 6px;
color: var(--ink); text-decoration: none; }
.cal-cite-marker:hover, .cal-cite-marker:focus-visible { color: var(--ink); text-decoration: none; }
.cal-cite-marker .cal-sq { flex: none; }
.cal-cite-marker:hover .cal-sq,
.cal-cite-marker:focus-visible .cal-sq { transform: scale(1.28); }
.cal-cite-marker .cal-cite__sec { text-decoration: none; text-underline-offset: 2px; }
.cal-cite-marker:hover .cal-cite__sec,
.cal-cite-marker:focus-visible .cal-cite__sec { text-decoration: underline; }
/* The stamp: ink border, caps, green square. Never a green border. */
.cal-stamp { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ink);
color: var(--ink); font-family: var(--cite); font-weight: 500; font-size: var(--fs-micro);
letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px; }
.cal-stamp::before { content: ""; width: 8px; height: 8px; background: var(--green); }
/* Rules: hierarchy comes from weight */
.cal-rule-hair { border: 0; border-top: 1px solid var(--hairline); }
.cal-rule-ink { border: 0; border-top: 1px solid var(--ink); }
.cal-rule-heavy { border: 0; border-top: 2px solid var(--ink); }
.cal-rule-double { border: 0; border-top: 3px double var(--ink); }
/* A rule drawing in once, on first view: scaleX from the left edge.
Add .cal-rule-draw to a standalone rule element (an
, a real box -
not a border property, which can't be transformed independently of
whatever it belongs to). Fires on load, like the ink-set, never on
scroll: nothing sits at scaleX(0) waiting on an observer, it is just
already finished by the time anyone scrolls this far. Transform only,
per the brief - no opacity here. */
@keyframes cal-rule-draw {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.cal-rule-draw { transform-origin: left; animation: cal-rule-draw 300ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
.cal-rule-draw { animation: none; }
}
/* Paper grain: OFF unless a marketing page opts in with */
html[data-grain="on"] body::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.035;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The ink sets: the one load motion, for the hero Turn on marketing pages.
Add .cal-ink-set to .turn. Zodiak's weight axis thickens from a hairline. */
@keyframes cal-ink-set {
from { font-variation-settings: "wght" 150; opacity: 0; }
to { font-variation-settings: "wght" 400; opacity: 1; }
}
.turn.cal-ink-set .turn__a,
.turn.cal-ink-set .turn__b { animation: cal-ink-set 640ms cubic-bezier(.16,1,.3,1) both; }
.turn.cal-ink-set .turn__b { animation-delay: 90ms; }
@media (prefers-reduced-motion: reduce) {
.turn.cal-ink-set .turn__a, .turn.cal-ink-set .turn__b { animation: none; }
}
/* Same signature, generic: any heading may set into the paper on load
without the hero Turn's markup, its green line, or its marketing-only
scope. base.css gives h1-h4 weight 500 (not the Turn's 400), so this
targets 500: the animation's "both" fill holds its last keyframe after
it ends, and a mismatched target would leave the heading underweight
forever instead of settling into what it already renders today. */
@keyframes cal-ink-set-heading {
from { font-variation-settings: "wght" 150; opacity: 0; }
to { font-variation-settings: "wght" 500; opacity: 1; }
}
:is(h1, h2, h3, h4).cal-ink-set:not(.turn) {
animation: cal-ink-set-heading 640ms cubic-bezier(.16,1,.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
:is(h1, h2, h3, h4).cal-ink-set:not(.turn) { animation: none; }
}
/* Emerald reset: homepage, workspace and examples; release remains held. */
:root[data-design="emerald"] {
--campaign-forest: #020F0C;
--campaign-panel: #09221B;
--campaign-raised: #12362B;
--campaign-mint: #47CE93;
--campaign-muted: #A9C4B8;
--campaign-line: #294A3E;
--campaign-edge: #608B78;
--campaign-glass: rgba(9,34,27,.90);
--campaign-glow: rgba(36,155,102,.09);
--emerald-soft: rgba(36,155,102,.04);
--emerald-shadow: 0 24px 70px rgba(0,8,5,.35);
--emerald-inset: inset 0 1px 0 rgba(71,206,147,.12);
--display: 'Switzer', var(--sans);
--r-sm: 8px; --r-md: 16px; --r-lg: 24px;
}
/* Switzer is the web display face; General Sans remains a local study option. */
@font-face { font-family:'Switzer';src:url('../fonts/Switzer-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap; }
@font-face { font-family:'General Sans';src:url('../fonts/GeneralSans-Variable.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap; }
:root[data-design="emerald"] { --study-switzer:'Switzer',var(--sans);--study-general:'General Sans',var(--sans);--study-current:'Bricolage Grotesque',var(--sans); }
:root[data-design="emerald"][data-type="switzer"] { --display:var(--study-switzer); }
:root[data-design="emerald"][data-type="general"] { --display:var(--study-general); }
:root[data-design="emerald"] {
--campaign-mint:#47CE93;
--signal:var(--campaign-mint);
--green-hover:#65DBA8;
--emerald-action:#146C49;
--emerald-action-hover:#197B54;
--emerald-action-ink:var(--campaign-ivory);
--campaign-glow:rgba(36,155,102,.12);
--emerald-soft:rgba(36,155,102,.06);
--emerald-inset:inset 0 1px 0 rgba(71,206,147,.14);
}
/* ============================================================================
LAUNCH / 2026-10-19. Explicit exception requested by Chris: premium liquid
emerald glass and motion, first on the public countdown page. Later the same
day (decision D8_vibe = EMERALD) Chris extended the launch look to the CRM
surfaces: Today, Pipeline, Contacts, the contact page, the composer and
where-are-we. Those pages set html[data-theme="launch"] and are built from
packages/ui/src/emerald.css. The scoped palette, rounding, gradients and
shadows apply only under html[data-theme="launch"] and do not alter Paper,
Night, Modern, sign-in, or any other account surface.
============================================================================ */
html[data-theme="launch"] {
--launch-bg: #030908;
--launch-text: #f6faf8;
--launch-soft: #d7e5de;
--launch-muted: #a8c0b4;
--launch-mint: #35ff99;
--launch-headline-emerald: #00eda2;
--launch-focus: #a2ffcf;
--launch-selection: #35ff99;
--launch-paper: #edfff7;
--launch-ink: #00351e;
--launch-placeholder: #91c9ac;
--launch-cta: #006443;
--launch-cta-hover: #007d52;
--launch-error: #ffceb6;
--launch-atmosphere: rgba(0, 222, 116, .20);
--launch-wash: rgba(0, 154, 84, .10);
--launch-line: rgba(80, 255, 168, .22);
--launch-line-strong: rgba(80, 255, 168, .48);
--launch-glow: rgba(126, 236, 166, .4);
--launch-countdown-divider: #70ad8b;
--launch-input-shadow: rgba(0, 16, 10, .17);
--launch-glass-tint: rgba(18, 151, 87, .14);
--launch-orbit: rgba(161, 211, 181, .08);
--launch-caustic: rgba(91, 237, 156, .35);
--launch-caustic-soft: rgba(74, 196, 128, .12);
--launch-art-shadow: rgba(0, 12, 8, .55);
--launch-art-bracket: rgba(184, 223, 194, .43);
--launch-art-cross: #a0d9ba;
--launch-glass-deep: #123e29;
--launch-glass-solid: #27724a;
--launch-glass-lowlight: #0c3624;
--launch-glass-dark: rgba(3, 48, 28, .82);
--launch-glass-center: rgba(35, 115, 72, .48);
--launch-glass-bright: rgba(62, 161, 100, .78);
--launch-glass-highlight: rgba(176, 248, 190, .8);
--launch-glass-white: rgba(223, 255, 221, .92);
--launch-glass-border: rgba(128, 227, 155, .48);
--launch-glass-border-soft: rgba(133, 229, 156, .2);
--launch-glass-veil: rgba(176, 248, 190, .28);
--launch-glass-shadow: rgba(1, 30, 15, .55);
--launch-glass-ambient: rgba(44, 147, 90, .16);
--launch-glass-clear: rgba(53, 130, 78, .1);
--launch-glass-luminous: rgba(172, 244, 161, .62);
--launch-glass-sheen: rgba(175, 255, 186, .18);
--launch-glass-reflection: rgba(208, 255, 216, .2);
--launch-control-radius: 7px;
--launch-panel-radius: 14px;
--launch-object-radius: 28px;
}
/* October 21: the approved metal/crystal landing page governs the web suite.
Screen presentation only. Print remains a readable light document. */
@media screen {
:root[data-campaign="v6"],
:root[data-campaign="v6"][data-surface="paper"] {
color-scheme: dark;
--campaign-forest: #030908;
--campaign-panel: #081b15;
--campaign-raised: #103126;
--campaign-ivory: #f6faf8;
--campaign-mint: #00eda2;
--campaign-muted: #adc7bb;
--campaign-line: #284a3a;
--campaign-edge: #5b997c;
--emerald-action: #006443;
--emerald-action-hover: #007d52;
--emerald-action-ink: #f6faf8;
--paper: var(--campaign-forest);
--paper-inset: var(--campaign-panel);
--paper-raised: var(--campaign-raised);
--ink: var(--campaign-ivory);
--ink-muted: var(--campaign-muted);
--ink-faint: var(--campaign-muted);
--hairline: var(--campaign-line);
--hairline-strong: var(--campaign-edge);
--green: var(--campaign-mint);
--green-deep: var(--campaign-mint);
--green-hover: #83f7c8;
--signal: var(--campaign-mint);
--focus: #a2ffcf;
--on-signal: #00351e;
--green-wash: #0b3022;
--alert-wash: #2a2113;
--status-approved: var(--campaign-mint);
--status-action: #9ac5ff;
--status-declined: #ffb3a8;
--sans: 'Switzer', system-ui, -apple-system, sans-serif;
--display: var(--sans);
--r-sm: 8px; --r-md: 14px; --r-lg: 18px;
}
html[data-theme="launch"] {
--sans: 'Switzer', system-ui, -apple-system, sans-serif;
--display: var(--sans);
--launch-mint: #00eda2;
--launch-line: rgba(80,255,168,.18);
--launch-glass-dark: rgba(5,29,20,.90);
--launch-glass-center: rgba(17,80,52,.48);
}
:root[data-campaign="v6"] .cal-signin--campaign.cal-paper {
color-scheme: dark;
--paper: #030908; --paper-inset: #081b15; --paper-raised: #103126;
--ink: #f6faf8; --ink-muted: #adc7bb; --ink-faint: #adc7bb;
--hairline: #284a3a; --hairline-strong: #5b997c;
--green: #00eda2; --green-deep: #00eda2; --green-hover: #83f7c8; --focus: #a2ffcf;
}
html:is([data-campaign="v6"],[data-theme="launch"]) {
--suite-panel: #081b15;
--suite-line: #284a3a;
--suite-text: #f6faf8;
--suite-muted: #adc7bb;
--suite-emerald: #00eda2;
--suite-cta: linear-gradient(135deg,#007d52,#004d35);
--suite-inset: inset 0 1px 0 rgba(130,255,196,.13);
--suite-glow: 0 8px 28px rgba(0,177,111,.08);
}
html[data-campaign="v6"] body :is(h1.n-h1,h1.h-display,h1.cal-display,h1.c-title,h1.hero,.em-title),
html[data-theme="launch"] body .em-title {
font-family:var(--display);font-weight:750;letter-spacing:-.045em;line-height:1.06;
}
html[data-campaign="v6"] body :is(h1.n-h1,h1.h-display,h1.cal-display,h1.c-title,h1.hero) em {
font-family:var(--display);font-style:normal;font-weight:inherit;letter-spacing:inherit;color:var(--suite-emerald);
}
html[data-campaign="v6"] body :is(.n-rail,.n-top,.cs-header,.c-header,.topbar) {
background:var(--paper);border-color:var(--hairline);
}
html[data-campaign="v6"] body :is(.n-card,.ws-compose,.cal-signin__section,.gate-card) {
background:var(--suite-panel);border:1px solid var(--suite-line);box-shadow:var(--suite-inset);border-radius:var(--r-lg);
}
html[data-campaign="v6"] body :is(.n-cta,.c-button--primary,.cs-primary,.cal-btn--primary,.cal-signin__primary) {
background:var(--suite-cta);background-color:var(--emerald-action);color:var(--suite-text);border:1px solid var(--suite-emerald);border-radius:var(--r-full);box-shadow:var(--suite-inset),var(--suite-glow);
}
html[data-campaign="v6"] body .cs-brand svg { display:none; }
html[data-campaign="v6"] body .cs-brand::before {
content:"";display:block;width:38px;height:38px;flex:none;
background:url('../assets/cal-metal-emerald.png') center/contain no-repeat;
}
/* One complete artwork composition, never an oversized crop of a bracket. */
html:is([data-campaign="v6"],[data-theme="launch"]) body :is(.suite-head,.em-head) {
position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
gap:12px;min-height:290px;padding:30px 42% 30px 28px;
border:1px solid var(--suite-line);border-radius:18px;background:var(--launch-bg,var(--paper));
}
html:is([data-campaign="v6"],[data-theme="launch"]) body :is(.suite-head,.em-head) > :not(.launch-art) {position:relative;z-index:1;}
html:is([data-campaign="v6"],[data-theme="launch"]) body :is(.suite-head,.em-head) .launch-art {
position:absolute;inset:50% 0 auto auto;width:42%;height:auto;aspect-ratio:3/2;transform:translateY(-50%);
overflow:hidden;opacity:1;pointer-events:none;mask-image:none;
}
html:is([data-campaign="v6"],[data-theme="launch"]) body :is(.suite-head,.em-head) .launch-art img {
display:block;width:100%;height:100%;object-fit:contain;object-position:center;transform:none;animation:none;
}
html:is([data-campaign="v6"],[data-theme="launch"]) body :is(.suite-head,.em-head) .launch-atmosphere {
position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
}
html:is([data-campaign="v6"],[data-theme="launch"]) body .suite-head :is(h1,.n-sub) {margin:0;max-width:none;}
html:is([data-campaign="v6"],[data-theme="launch"]) body .suite-head h1 {font-size:clamp(30px,3.1vw,44px);}
html:is([data-campaign="v6"],[data-theme="launch"]) body .suite-head .n-sub {font-size:15px;line-height:1.65;color:var(--suite-muted);}
html:is([data-campaign="v6"],[data-theme="launch"]) body .suite-head {margin-bottom:28px;}
html[data-campaign="v6"] body .cal-suite-workspace {display:grid;grid-template-columns:minmax(0,1fr) 38%;padding:24px 28px;gap:24px;min-height:290px;}
html[data-campaign="v6"] body .cal-suite-workspace .launch-art {position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;}
html[data-campaign="v6"] body .cal-suite-workspace .hero {font-size:clamp(34px,3.8vw,56px);}
html[data-campaign="v6"] body .cal-suite-workspace .ws-intro-copy {min-width:0;}
html[data-campaign="v6"] body .cal-suite-workspace [data-em-motion] {margin-top:12px;}
}
@media screen and (max-width:760px) {
html:is([data-campaign="v6"],[data-theme="launch"]) body :is(.suite-head,.em-head) {padding:24px 20px;min-height:0;}
html:is([data-campaign="v6"],[data-theme="launch"]) body :is(.suite-head,.em-head) .launch-art {
position:relative;inset:auto;order:9;width:min(100%,320px);height:auto;aspect-ratio:3/2;max-height:none;align-self:center;opacity:1;transform:none;
}
html[data-campaign="v6"] body .cal-suite-workspace {display:flex;gap:18px;}
html[data-campaign="v6"] body .cal-suite-workspace .hero {font-size:38px;}
}
@media screen {
html[data-design="emerald"] body.cal-workspace .ws-intro.cal-suite-workspace {
display:grid;grid-template-columns:minmax(0,1fr) 38%;padding:24px 28px;gap:24px;min-height:290px;margin-bottom:28px;
}
html[data-design="emerald"] body.cal-workspace .ws-intro.cal-suite-workspace .launch-art {
position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;transform:none;align-self:center;
}
html[data-design="emerald"] body.cal-workspace .ws-intro.cal-suite-workspace .hero {
font:750 clamp(34px,3.8vw,56px)/1.06 var(--display);letter-spacing:-.045em;margin:8px 0 14px;
}
html[data-design="emerald"] body.cal-workspace .ws-intro.cal-suite-workspace .hero em {
font:inherit;color:var(--suite-emerald);letter-spacing:inherit;
}
html[data-design="emerald"] body.cal-workspace .ws-intro.cal-suite-workspace .hero br {display:initial;}
}
@media screen and (max-width:760px) {
html[data-design="emerald"] body.cal-workspace .ws-intro.cal-suite-workspace {display:flex;padding:24px 20px;gap:18px;}
html[data-design="emerald"] body.cal-workspace .ws-intro.cal-suite-workspace .launch-art {width:min(100%,320px);}
html[data-design="emerald"] body.cal-workspace .ws-intro.cal-suite-workspace .hero {font-size:38px;}
}
@media screen {
html[data-campaign="v6"] .cal-signin--campaign .cal-signin__form {background:var(--paper);}
html[data-campaign="v6"] .cal-signin--campaign .cal-signin__fields input {background:var(--paper-inset);color:var(--ink);border-color:var(--hairline-strong);}
html[data-campaign="v6"] .cal-signin--campaign .cal-signin__mark .word {color:var(--ink);}
html[data-campaign="v6"] .cal-signin--campaign .cal-signin__btn {background:var(--suite-cta);background-color:var(--emerald-action);color:var(--suite-text);border:1px solid var(--suite-emerald);}
html[data-campaign="v6"] .cal-signin--campaign .cal-signin__btn--secondary {background:var(--paper-inset);color:var(--ink);border-color:var(--hairline-strong);}
html[data-campaign="v6"] .cal-signin--campaign .cal-signin__art {background-image:url('./emerald/launch-metal-emerald.png');background-size:contain;background-position:center;}
html[data-campaign="v6"] .cal-signin--campaign .cal-signin__section h2 {font-family:var(--display);font-weight:650;}
}
@media screen {
html[data-campaign="v6"] .cal-signin--campaign .cal-signin__mark svg {display:none;}
html[data-campaign="v6"] .cal-signin--campaign .cal-signin__mark::before,
html[data-campaign="v6"][data-surface="admin"] .sb-brand::before {
content:"";display:inline-block;width:38px;height:38px;vertical-align:middle;margin-right:10px;
background:url('../assets/cal-metal-emerald.png') center/contain no-repeat;
}
}
/* October 21 review: Light / Dark / System, preserving the surface's data-theme.
The cinematic header pairs daylight and night artwork with the selected appearance. */
@media screen {
html[data-appearance] {
--scene-bg: #030908; --scene-text: #f6faf8; --scene-muted: #c3d9ce;
--scene-accent: #00eda2; --scene-line: #385c4a;
--scene-phone-scrim:linear-gradient(90deg,rgba(3,9,8,.95),rgba(3,9,8,.68));
--scene-scrim: linear-gradient(90deg,rgba(3,9,8,.92) 0%,rgba(3,9,8,.76) 33%,rgba(3,9,8,.25) 55%,transparent 74%);
}
html[data-appearance="light"][data-appearance="light"][data-appearance="light"] {
color-scheme:light;
--scene-bg:#f7faf9; --scene-text:#102d23; --scene-muted:#365748;
--scene-accent:#006b49; --scene-line:#9bbcac;
--scene-scrim:linear-gradient(90deg,rgba(247,250,249,.98) 0%,rgba(247,250,249,.94) 33%,rgba(247,250,249,.35) 55%,transparent 74%);
--scene-phone-scrim:linear-gradient(90deg,rgba(247,250,249,.96),rgba(247,250,249,.84));
--campaign-forest:#f7faf9; --campaign-panel:#ffffff; --campaign-raised:#eaf3ee;
--campaign-ivory:#102d23; --campaign-mint:#006b49; --campaign-muted:#49675a;
--campaign-line:#c5d8ce; --campaign-edge:#6e9983;
--paper:#f7faf9; --paper-inset:#ffffff; --paper-raised:#eaf3ee; --night-hover:#e0eee6;
--ink:#102d23; --ink-muted:#49675a; --ink-faint:#49675a;
--hairline:#c5d8ce; --hairline-strong:#6e9983;
--green:#006b49; --green-strong:#006b49; --green-dark:#005537; --green-deep:#005537;
--green-hover:#005537; --green-active:#005537; --signal:#006b49; --focus:#006b49;
--on-signal:#ffffff; --on-green:#ffffff; --on-alert:#302208; --green-wash:#e5f4ec; --alert-wash:#faf0de;
--status-approved:#006b49; --status-alert:#f4d596; --status-action:#234c87; --status-declined:#9a352b;
--suite-panel:#ffffff; --suite-line:#c5d8ce; --suite-muted:#49675a; --suite-emerald:#006b49;
--launch-bg:#f7faf9; --launch-text:#102d23; --launch-soft:#365748; --launch-muted:#49675a;
--launch-mint:#006b49; --launch-headline-emerald:#006b49; --launch-focus:#006b49;
--launch-selection:#bdecd5; --launch-ink:#ffffff; --launch-placeholder:#49675a;
--launch-error:#8d3b21; --launch-countdown-divider:#49675a;
--launch-line:#c5d8ce; --launch-line-strong:#6e9983;
--launch-glass-dark:#f1f7f4; --launch-glass-center:#e3f1e9;
--launch-glass-lowlight:#f0f6f3; --launch-glass-deep:#e5f1ea;
--launch-glass-tint:#ffffff; --launch-glass-clear:#e5f4ec;
--btn-primary-fg:#ffffff; --btn-dot-fg:#ffffff; --btn-dot-bg:#005537;
}
html[data-appearance="light"] body :is(.em-cta,.n-cta),
html[data-appearance="light"] body :is(.em-cta,.n-cta):hover {color:var(--on-green);background-color:var(--emerald-action,var(--launch-cta));}
.cal-appearance {font:500 13px var(--sans);min-height:44px;max-width:106px;padding:8px 12px;border:1px solid var(--hairline-strong);border-radius:var(--r-full);background:var(--paper);color:var(--ink);cursor:pointer;}
.cal-appearance:focus-visible {outline:2px solid var(--focus);outline-offset:3px;}
html[data-appearance] body :is(.suite-head,.em-head):has([data-atmosphere-wide]),
html[data-appearance] body.cal-workspace .ws-intro.cal-suite-workspace {
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
min-height:400px;padding:44px 48px;gap:14px;background:var(--scene-bg);color:var(--scene-text);
--ink:var(--scene-text); --ink-muted:var(--scene-muted); --suite-emerald:var(--scene-accent);
--signal:var(--scene-accent); --focus:var(--scene-accent);
--launch-text:var(--scene-text); --launch-muted:var(--scene-muted); --launch-soft:var(--scene-muted);
--launch-headline-emerald:var(--scene-accent); --launch-line:var(--scene-line); --launch-focus:var(--scene-accent);
}
html[data-appearance] body :is(.suite-head,.em-head):has([data-atmosphere-wide])::after,
html[data-appearance] body.cal-workspace .ws-intro.cal-suite-workspace::after {
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--scene-scrim);
}
html[data-appearance] body :is(.suite-head,.em-head):has([data-atmosphere-wide]) > :not(.launch-art),
html[data-appearance] body.cal-workspace .ws-intro.cal-suite-workspace > :not(.launch-art) {max-width:51%;z-index:1;}
html[data-appearance] body :is(.suite-head,.em-head):has([data-atmosphere-wide]) .em-head-act {margin-top:14px;}
html[data-appearance] body :is(.suite-head,.em-head) .launch-art[data-atmosphere-wide],
html[data-appearance] body.cal-workspace .ws-intro.cal-suite-workspace .launch-art[data-atmosphere-wide] {
position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;transform:none;mask-image:none;z-index:0;
}
html[data-appearance] body :is(.em-head,.cal-suite-workspace) .launch-art[data-atmosphere-wide] img {object-fit:contain;object-position:right center;}
html[data-appearance] body :is(.em-head,.cal-suite-workspace) .launch-art[data-atmosphere-wide] canvas {object-fit:fill;}
html[data-appearance] body :is(.suite-head,.em-head,.cal-suite-workspace) [data-em-motion] {color:var(--scene-text);border:1px solid var(--scene-line);background:var(--scene-bg);min-height:44px;font-size:12px;padding:10px 16px;}
html[data-appearance] body.cal-workspace .ws-intro.cal-suite-workspace .hero {font-size:clamp(34px,4vw,58px);}
}
@media screen and (max-width:760px) {
html[data-appearance] body :is(.suite-head,.em-head):has([data-atmosphere-wide]),
html[data-appearance] body.cal-workspace .ws-intro.cal-suite-workspace {padding:28px 24px calc(66.67% + 8px);min-height:0;gap:12px;}
html[data-appearance] body :is(.suite-head,.em-head):has([data-atmosphere-wide]) > :not(.launch-art),
html[data-appearance] body.cal-workspace .ws-intro.cal-suite-workspace > :not(.launch-art) {max-width:100%;}
html[data-appearance] body :is(.suite-head,.em-head) .launch-art[data-atmosphere-wide],
html[data-appearance] body.cal-workspace .ws-intro.cal-suite-workspace .launch-art[data-atmosphere-wide] {inset:auto 0 0;height:auto;aspect-ratio:3/2;width:100%;}
html[data-appearance] body :is(.suite-head,.em-head):has([data-atmosphere-wide])::after,
html[data-appearance] body.cal-workspace .ws-intro.cal-suite-workspace::after {display:none;}
.cal-appearance {padding-inline:8px;max-width:88px;font-size:12px;}
}
@media screen {
.cal-appearance-row {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;margin-bottom:12px;border-bottom:1px solid var(--hairline);font:14px var(--sans);color:var(--ink);}
}
@media screen and (max-width:600px) {
.n-top .cal-appearance {display:none;}
}
@media screen {
html[data-appearance="light"] body ::selection {background:var(--green-wash);color:var(--ink);}
}
/* Shared appearance controls across public, account and operator shells. */
@media screen {
.cal-appearance-bar {display:flex;justify-content:flex-end;padding:10px clamp(16px,3vw,40px);border-bottom:1px solid var(--hairline);background:var(--paper);color:var(--ink);font:12px var(--sans);}
.cal-appearance-bar label {display:flex;align-items:center;gap:12px;}
html[data-appearance="light"] {--emerald-action-ink:#ffffff;--campaign-glass:rgba(255,255,255,.9);}
:root[data-appearance][data-appearance] .cal-paper {
color-scheme:inherit;--paper:inherit;--paper-inset:inherit;--paper-raised:inherit;
--ink:inherit;--ink-muted:inherit;--ink-faint:inherit;--hairline:inherit;--hairline-strong:inherit;
--green:inherit;--green-deep:inherit;--green-hover:inherit;--focus:inherit;
--green-wash:inherit;--alert-wash:inherit;
}
html[data-appearance="light"] body .launch-input-row button {color:var(--emerald-action-ink);background-color:var(--launch-cta);}
html[data-appearance="light"] body .launch-title-you {text-shadow:none;-webkit-text-stroke-color:var(--green-deep);}
html[data-appearance] body .suite-head {--suite-muted:var(--scene-muted);--fg-subtle:var(--scene-muted);--cal-fg:var(--scene-text);--cal-fg-muted:var(--scene-muted);--cal-fg-subtle:var(--scene-muted);--dim:var(--scene-muted);}
html[data-appearance] body .suite-head :is(h1,h2,p,.sub) {color:var(--scene-text);}
html[data-appearance] body .suite-head h1 {max-width:100%;margin:0;font:750 clamp(30px,3.1vw,44px)/1.08 var(--display);letter-spacing:-.045em;}
html[data-appearance] body .suite-head h1 em {font:inherit;color:var(--scene-accent);}
html[data-appearance] body .suite-head .launch-art {overflow:hidden;pointer-events:none;}
html[data-appearance] body .suite-head .launch-art img {display:block;width:100%;height:100%;object-fit:contain;object-position:right center;}
html[data-appearance] body .suite-head .launch-atmosphere {position:absolute;inset:0;width:100%;height:100%;}
html[data-appearance][data-surface="admin"] body .topbar.suite-head {position:relative;min-height:280px;margin:20px;border-radius:18px;}
html[data-appearance] body .welcome:has(.suite-head) {border:0;padding-left:0;}
}
@media print { .cal-appearance-bar,.cal-appearance-row,.cal-appearance,[data-em-motion] {display:none!important;} }
@media screen {
html[data-appearance] body .welcome .suite-head {min-height:320px;padding:28px;}
html[data-appearance] body .welcome .suite-head h1 {font-size:32px;line-height:1.1;}
html[data-appearance] body .welcome .suite-head p {font-size:15px;line-height:1.6;}
html[data-appearance] body .cal-top__brand svg {display:none;}
html[data-appearance] body .cal-top__brand::before {content:"";width:34px;height:34px;flex:none;background:url('../assets/cal-metal-emerald.png') center/contain no-repeat;}
}
@media screen and (max-width:760px) {
html[data-appearance] body .welcome .suite-head {min-height:0;padding:24px 20px calc(66.67% + 8px);}
html[data-appearance] body .welcome .suite-head h1 {font-size:30px;}
}
@media screen {
html[data-appearance] body:has(> .shell):has(> .cal-appearance-bar) {flex-direction:column;gap:18px;padding-top:80px;overflow:auto;}
html[data-appearance] body:has(> .shell) > .cal-appearance-bar {position:relative;z-index:3;width:min(100%,440px);border-radius:12px;flex-shrink:0;}
html[data-appearance] body:has(> .shell) > .bg {background:var(--paper);}
html[data-appearance] body:has(> .shell) > .topbar {color:var(--ink-muted);}
}
@media screen {
html[data-appearance] body footer:has(.footer-fine) {background:var(--paper-inset);color:var(--ink-muted);}
html[data-appearance] body .footer-fine, html[data-appearance] body .footer-fine a {color:var(--ink-muted);}
html[data-appearance] .cal-signin--campaign .cal-signin__skip {background:var(--paper);color:var(--ink);border:1px solid var(--hairline-strong);}
}
/* Legacy public and document surfaces resolve to the same appearance palette. */
@media screen {
html[data-appearance][data-appearance] {--paper-deep:var(--paper-raised);--paper-deeper:var(--paper-raised);--declined:var(--status-declined);--red:var(--status-declined);}
html[data-appearance="dark"][data-appearance] {--status-declined:#ffb4a2;}
html[data-appearance] body .skip-link {background:var(--paper-inset);color:var(--ink);}
html[data-appearance] body .demo-banner {color:var(--on-alert);}
html[data-appearance] body .demo-banner :is(strong,span) {color:inherit;}
html[data-appearance] body .section-ink {background:var(--paper-inset);color:var(--ink);}
html[data-appearance] body .section-ink :is(.eyebrow,h3,p),
html[data-appearance] body :is(.footer-tag,.footer-col .eyebrow,.footer-col a) {color:var(--ink-muted);}
html[data-appearance] body .access-card {border-color:var(--hairline);background:var(--paper-raised);}
html[data-appearance="light"] body .e-demo-invite {background:var(--paper-inset);color:var(--ink);}
html[data-appearance] body .cmp-block.new .text {background:var(--status-alert);color:var(--on-alert);}
html[data-appearance] body :is(.cta-find,.checks label.on) {color:var(--on-green);}
}
@media screen {
html[data-appearance] body .level-city {color:var(--ink);background:var(--paper-raised);}
html[data-appearance] body :is(.badge.b-live,.badge.b-half,.badge.b-broken,.badge.b-consumer,.badge.b-realtor,.badge.b-internal) {background:var(--paper-raised);color:var(--ink);border-color:var(--hairline-strong);}
html[data-appearance] body .section-ink :is(h2,a) {color:var(--ink);}
html[data-appearance] body .wh-skip {background:var(--paper-inset);color:var(--ink);}
html[data-appearance] body[data-suite-doc="investor"] .topnav {background:var(--paper-inset);}
html[data-appearance] body[data-suite-doc="investor"] section.dark {
background:var(--scene-bg);color:var(--scene-text);--ink:var(--scene-text);--paper:var(--scene-text);--ink-2:var(--scene-muted);--dim:var(--scene-muted);--paper-deep:var(--scene-bg);
}
html[data-appearance] body[data-suite-doc="investor"] section.dark :is(p,li,.callout-label) {color:var(--scene-muted);}
html[data-appearance] body[data-suite-doc="investor"] footer {background:var(--paper-inset);color:var(--ink-muted);}
html[data-appearance] body[data-suite-doc="investor"] .footer-meta {color:var(--ink-muted);}
html[data-appearance] body[data-suite-doc="investor"] .suite-investor-callout {background:var(--scene-bg)!important;color:var(--scene-text)!important;}
html[data-appearance] body[data-suite-doc="investor"] .suite-investor-callout :is(div,p,h3,em) {color:var(--scene-muted)!important;}
html[data-appearance] body[data-suite-doc="investor"] .suite-investor-callout button {background:var(--scene-accent)!important;color:var(--scene-bg)!important;}
html[data-theme="launch"][data-appearance="light"] .launch-art {mask-image:none;-webkit-mask-image:none;width:100%;margin-inline:auto;border-radius:24px;background:var(--scene-bg);}
html[data-theme="launch"][data-appearance="light"] .launch-art::after {display:none;}
html[data-theme="launch"][data-appearance="light"] .launch-message {margin-top:28px;}
}
@media screen {
html[data-appearance] body .suite-head .status {background:transparent;color:var(--scene-muted);}
html[data-appearance] body[data-suite-doc="investor"] footer [style*="color"] {color:var(--ink-muted)!important;}
}
@media screen and (max-width:760px) {
/* Keep Pulse's market verdict on the first phone screen. */
html[data-appearance] body .pulse .intro.suite-head {padding:20px;gap:8px;min-height:0;}
html[data-appearance] body .pulse .intro.suite-head h1 {font-size:28px;}
html[data-appearance] body .pulse .intro.suite-head .lede {font-size:13px;line-height:1.5;margin:10px 0;}
html[data-appearance] body .pulse .intro.suite-head .intro-links a {font-size:12px;min-height:32px;padding:5px 9px;}
html[data-appearance] body .pulse .intro.suite-head .status {font-size:12px;}
html[data-appearance] body .pulse .intro.suite-head [data-em-motion] {min-height:32px;padding:6px 10px;}
html[data-appearance] body .pulse .intro.suite-head::after {display:block;background:var(--scene-phone-scrim);}
}
@media screen {
html[data-campaign="v6"][data-appearance="light"] .cal-signin--campaign .cal-signin__art {background-image:url("./emerald/launch-metal-emerald-day.png");}
}
/* Shared privacy controls follow the chosen appearance immediately, including
when it differs from the OS. Keep the consent behavior in its own module. */
@media screen {
html[data-appearance] #cal-legal-footer {color:var(--ink-muted);border-color:var(--hairline)!important;}
html[data-appearance] #cal-consent {background:var(--paper-inset);color:var(--ink);border-color:var(--hairline-strong);border-radius:var(--r-lg);font-family:var(--sans);}
html[data-appearance] #cal-consent a {color:var(--ink);}
html[data-appearance] #cal-consent button {border-color:var(--hairline-strong);border-radius:var(--r-full);min-height:44px;}
html[data-appearance] #cal-consent .cal-btn-primary {background:var(--green);color:var(--on-green);}
html[data-appearance] #cal-consent .cal-btn-ghost {background:var(--paper-inset);color:var(--ink);}
html[data-appearance] #cal-consent .cal-note {color:var(--ink-muted);}
html[data-appearance] #cal-consent:focus {outline-color:var(--focus);}
}
@media screen {
html[data-appearance] body[data-suite-doc="investor"] section.dark :is(p,li,.callout-label) {color:var(--scene-muted)!important;}
}
@media screen {
html[data-appearance] .lead #leadSend {background:var(--emerald-action);color:var(--emerald-action-ink);border-color:var(--emerald-action);}
}
/* Keep the workspace question action visible on shorter laptop displays. */
@media screen and (min-width:761px) and (max-height:800px) {
html[data-appearance] body.cal-workspace .ws-intro.cal-suite-workspace {min-height:280px;padding:24px 32px;}
html[data-appearance] body.cal-workspace .ws-intro.cal-suite-workspace .hero {font-size:42px;}
}
/* Full-scene arrival. Account/security cards keep their existing layout. */
@media screen {
html[data-campaign="v6"] .cal-signin--scene {
position:relative;isolation:isolate;grid-template-columns:minmax(0,1.15fr) minmax(440px,.85fr);
--signin-glass:rgba(3,9,8,.76);background:var(--scene-bg);min-height:100dvh;
}
html[data-campaign="v6"] .cal-signin--scene::before {
content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
background:url("./emerald/launch-metal-emerald.png") center/cover no-repeat;
}
html[data-campaign="v6"][data-appearance="light"] .cal-signin--scene {--signin-glass:rgba(247,250,249,.78);}
html[data-campaign="v6"][data-appearance="light"] .cal-signin--scene .cal-signin__card {--ink-muted:var(--scene-muted);}
html[data-campaign="v6"][data-appearance="light"] .cal-signin--scene::before {
background-image:url("./emerald/launch-metal-emerald-day.png");
}
html[data-campaign="v6"] .cal-signin--scene::after {
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(90deg,color-mix(in srgb,var(--scene-bg) 82%,transparent),transparent 55%),
linear-gradient(0deg,color-mix(in srgb,var(--scene-bg) 94%,transparent),transparent 65%);
}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__brand {
background:transparent;overflow:visible;padding:40px clamp(28px,4vw,72px);gap:28px;
}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__art {display:none;}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__hero {margin-top:auto;padding-top:220px;max-width:470px;}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__hero h2 {color:var(--scene-text);}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__hero h2 em {color:var(--scene-accent);}
html[data-campaign="v6"] .cal-signin--scene :is(.cal-signin__hero p,.cal-signin__eyebrow,.cal-signin__home-label,.cal-signin__foot,.cal-signin__stat .l) {color:var(--scene-muted);}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__stat .n {color:var(--scene-text);}
html[data-campaign="v6"] .cal-signin--scene :is(.cal-signin__stats,.cal-signin__stat) {border-color:var(--scene-line);}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__form {background:transparent;padding:48px clamp(24px,3vw,56px);}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__card {
max-width:500px;padding:clamp(28px,3vw,44px);border:1px solid var(--hairline-strong);border-radius:24px;
background:var(--signin-glass);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 24px 80px color-mix(in srgb,var(--scene-bg) 35%,transparent);
}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__card h1 {font-size:clamp(34px,3vw,44px);}
}
@media screen and (max-width:900px) {
html[data-campaign="v6"] .cal-signin--scene {grid-template-columns:1fr;grid-template-rows:auto 1fr;}
html[data-campaign="v6"] .cal-signin--scene::before {background-size:auto 460px;background-position:center 24px;-webkit-mask-image:linear-gradient(to bottom,var(--scene-bg) 380px,transparent 484px);mask-image:linear-gradient(to bottom,var(--scene-bg) 380px,transparent 484px);}
html[data-campaign="v6"] .cal-signin--scene::after {background:linear-gradient(0deg,var(--scene-bg) 8%,transparent 80%);}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__brand {padding:24px;min-height:330px;justify-content:flex-start;}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__form {padding:0 20px 32px;align-items:start;}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__card {max-width:500px;padding:28px 24px;}
}
@media screen and (max-width:380px) {
html[data-campaign="v6"] .cal-signin--scene .cal-signin__form {padding-inline:12px;}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__card {padding:24px 20px;}
}
/* The scene is shifted left of the sign-in card; only fog/water pixels animate. */
@media screen {
html[data-campaign="v6"] .cal-signin--scene {overflow:hidden;}
html[data-campaign="v6"] .cal-signin--scene:has(.cal-signin__scene)::before {display:none;}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__scene {
position:absolute;z-index:-2;pointer-events:none;left:-12%;top:50%;width:100%;aspect-ratio:3/2;transform:translateY(-50%);
-webkit-mask-image:linear-gradient(90deg,var(--scene-bg) 84%,transparent);mask-image:linear-gradient(90deg,var(--scene-bg) 84%,transparent);
}
html[data-campaign="v6"] .cal-signin__scene :is(img,canvas) {position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;}
html[data-campaign="v6"] .cal-signin__scene canvas[hidden] {display:none;}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__motion {
position:absolute;left:clamp(28px,4vw,72px);top:100px;min-height:44px;padding:10px 16px;color:var(--scene-text);background:var(--scene-bg);border:1px solid var(--scene-line);border-radius:var(--r-full);font:500 12px var(--sans);cursor:pointer;
}
html[data-campaign="v6"] .cal-signin__motion:focus-visible {outline:2px solid var(--focus);outline-offset:3px;}
html[data-campaign="v6"] .cal-signin__motion:disabled {cursor:default;}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__hero {padding-top:180px;}
}
@media screen and (max-width:900px) {
html[data-campaign="v6"] .cal-signin--scene .cal-signin__scene {
width:690px;left:50%;top:24px;transform:translateX(-50%);
-webkit-mask-image:linear-gradient(to bottom,var(--scene-bg) 356px,transparent 460px);mask-image:linear-gradient(to bottom,var(--scene-bg) 356px,transparent 460px);
}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__brand>div {display:none;}
html[data-campaign="v6"] .cal-signin--scene .cal-signin__motion {position:absolute;left:auto;right:24px;top:74px;z-index:2;}
}
/* October 25: the bracket alone identifies Cal. Ambient motion remains gentle
under reduced motion; explicit Pause motion still freezes the entire scene. */
@keyframes cal-bracket-ambient {
0%,100% {transform:perspective(220px) translateY(2px) rotateY(-28deg) rotateX(6deg) rotateZ(-3deg);}
50% {transform:perspective(220px) translateY(-2px) rotateY(28deg) rotateX(-6deg) rotateZ(3deg);}
}
@media screen {
html[data-appearance] body :is(.n-brand,.cs-brand,.cal-top__brand,.launch-wordmark,.topbar-inner .mark,.c-header .c-mark,.sb-brand) {
font-size:0!important;gap:0;min-width:56px;min-height:56px;
}
html[data-appearance] body :is(.n-brand,.cs-brand,.cal-top__brand,.launch-wordmark,.topbar-inner .mark,.c-header .c-mark,.sb-brand) > * {display:none!important;}
html[data-appearance] body :is(.n-brand,.cs-brand,.cal-top__brand,.launch-wordmark,.topbar-inner .mark,.c-header .c-mark,.sb-brand)::before {
content:"";display:block;width:56px;height:56px;flex:none;margin:0;
background:url('../assets/cal-silver-emerald.png') center/contain no-repeat;
filter:drop-shadow(0 1px 1px var(--hairline-strong));
transform-origin:50% 56%;animation:cal-bracket-ambient 10s ease-in-out infinite!important;
}
html[data-appearance] body:is(.motion-paused,.motion-suspended) :is(.n-brand,.cs-brand,.cal-top__brand,.launch-wordmark,.topbar-inner .mark,.c-header .c-mark,.sb-brand)::before {animation-play-state:paused!important;}
}
@media screen and (prefers-reduced-motion:reduce) {
html[data-appearance] body :is(.n-brand,.cs-brand,.cal-top__brand,.launch-wordmark,.topbar-inner .mark,.c-header .c-mark,.sb-brand)::before {animation-duration:24s!important;}
}
.cal-header-motion {font:400 12px var(--sans);color:var(--ink-muted);background:transparent;border:1px solid var(--hairline);border-radius:var(--r-sm);min-height:44px;padding:8px 12px;cursor:pointer;}
.cal-header-motion:focus-visible {outline:2px solid var(--focus);outline-offset:3px;}
@media print {.cal-header-motion {display:none;}}