/* ============================================================ EVIDENCE - BRAND VARIANTS ("Current ↔ Elevate") ------------------------------------------------------------ "Elevate" is the codename for the candidate brand direction. The current Evidence brand stays 100% intact in tokens.css. This file expresses the ELEVATE proposal as opt-in overrides, one block per aspect, keyed off data-attributes set on by the guidelines page: data-v-color="elevate" palette (Bright Lime + Slate + secondary) data-v-corners="elevate" rounding (Elevate radius scale) data-v-outline="elevate" borderless, light-fill containers data-v-type="elevate" Elevate display scale data-v-format="elevate" text formatting (rule 1: no all-caps) The Elevate brand = the source system with its display face swapped for Satoshi (Inter stays Inter). Colors, rounding, spacing, surfaces, components are kept identical to source. SCOPING: overrides target `.gd-main` (the preview content) so the control chrome stays on stable Evidence styling while the preview shows the active recipe. Content consumes the `--t-*` theming contract below; chrome uses raw tokens. ------------------------------------------------------------ Load AFTER tokens.css (these reference --blue, --gray-*, …). ============================================================ */ /* ---------- THEMING CONTRACT · base = CURRENT EVIDENCE ---------- */ :root { --t-canvas: var(--white); /* preview page surface */ --t-surface: var(--white); /* cards */ --t-surface-alt: var(--gray-50); /* alt panels */ --t-ink: var(--black); /* headings / primary text */ --t-body: var(--gray-700); /* body text */ --t-mute: var(--gray-500); /* captions / fine print */ --t-accent: var(--blue); /* primary action */ --t-accent-hover: #2348c2; /* primary hover: one step darker */ --t-on-accent: var(--white); /* text on accent */ --t-accent-soft: var(--blue-light);/* soft accent surface */ --t-secondary-hover: var(--gray-100);/* secondary hover: one step darker */ --t-positive: var(--green); --t-positive-fg: var(--green); --t-warning: var(--orange); --t-warning-fg: var(--orange-dark); --t-negative: var(--red); --t-negative-fg: var(--red); --t-card-border: var(--gray-100); /* card edge */ --t-input-border: var(--gray-200); /* input / outline edge */ --t-divider: var(--gray-100); --t-dark: var(--black); /* inverted / dark surfaces */ --t-radius: 0px; /* cards / buttons */ --t-radius-input: 0px; /* small card / input */ --t-radius-pill: 0px; /* badges / pills */ --t-shadow: none; /* no shadows */ --tt-face: var(--font-body); /* heading face: Inter (the original is Inter-exclusive) */ } /* ============================================================ ASPECT · COLOR → Elevate palette (Bright Lime accent #4ADE80 + Forest Green #002E11 · white canvas · Slate neutrals · secondary palette · semantic) ============================================================ */ :root[data-v-color="elevate"] .gd-main { /* --- base grey scale → SLATE (Elevate only) --- */ --black: #020617; /* slate-950 */ --gray-700: #334155; /* slate-700 */ --gray-500: #64748b; /* slate-500 */ --gray-400: #94a3b8; /* slate-400 */ --gray-300: #cbd5e1; /* slate-300 */ --gray-200: #e2e8f0; /* slate-200 */ --gray-100: #f1f5f9; /* slate-100 */ --gray-50: #f8fafc; /* slate-50 */ /* white stays white */ /* --- surfaces (white canvas; green tints from the new scale) --- */ --t-canvas: #ffffff; /* white page background */ --t-surface: #ffffff; /* white cards */ --t-surface-alt: #86efac; /* green-300 feature surface (heroband, secondary button) */ /* --- ALL text resolves to Slate 900 (copy, headings, subheads, captions) --- */ --t-ink: #0f172a; /* slate-900 */ --t-body: #0f172a; /* slate-900 - all body copy */ --t-mute: #0f172a; /* slate-900 - subtitles / captions too */ --t-card-border: #e2e8f0; /* slate-200 */ --t-input-border:#0f172a; /* slate-900 - outline ink */ --t-divider: #e2e8f0; /* slate-200 */ --t-accent: #4ade80; /* Bright Lime - sole brand accent (fills) */ --t-accent-hover:#002e11; /* primary hover dives to near-black forest */ --t-on-accent: #002e11; /* Forest Green text on Bright Lime */ --t-accent-soft: #dcfce7; /* soft accent surface / badge tint */ --t-secondary-hover: #bbf7d0; /* one step darker than green-100 (green-200) */ --t-dark: #002e11; /* Forest Green - inverted / dark surfaces */ /* semantic = bright pastel surface + dark-ink text, from the secondary palette */ --t-positive: #4ade80; --t-positive-fg: #002e11; /* Bright Lime / Forest Green */ --t-warning: #fae580; --t-warning-fg: #4b3e00; /* Yuzu / Dark Yuzu */ --t-negative: #ffd3e7; --t-negative-fg: #58062c; /* Grapefruit / Dark Grapefruit */ } /* All text is Slate 900, including elements that were accent-colored (eyebrow, stat labels, token labels). The lime accent is for fills, never for reading text - it has no contrast on the sage canvas. Buttons keep --t-on-accent so white-on-dark still works elsewhere. */ :root[data-v-color="elevate"] .gd-main .eyebrow, :root[data-v-color="elevate"] .gd-main .card .lbl, :root[data-v-color="elevate"] .gd-main .bar .tok { color: #0f172a; } /* Semantic status badges use the bright pastel + dark-ink pairings (success / warning / error), never the brand green for all three. */ :root[data-v-color="elevate"] .gd-main .badge--pos { background: var(--t-positive); color: var(--t-positive-fg); } :root[data-v-color="elevate"] .gd-main .badge--warn { background: var(--t-warning); color: var(--t-warning-fg); } :root[data-v-color="elevate"] .gd-main .badge--neg { background: var(--t-negative); color: var(--t-negative-fg); } /* Dark-on-bright contrast pairing: forest green text on the bright-green surfaces - heroband title/text and the secondary button (#002E11 on the lime / green-300 family). Text on a bright surface uses its paired dark. */ :root[data-v-color="elevate"] .gd-main .heroband .eyebrow, :root[data-v-color="elevate"] .gd-main .heroband .tt-display, :root[data-v-color="elevate"] .gd-main .heroband .body, :root[data-v-color="elevate"] .gd-main .btn--secondary { color: #002e11; } /* Primary CTA is the dark-green button: forest #002E11 fill with bright-lime text (bright-on-dark). Hover lightens to green-900 for visible feedback. */ :root[data-v-color="elevate"] .gd-main .btn--primary { background:#002e11; border-color:#002e11; color:#4ade80; } :root[data-v-color="elevate"] .gd-main .btn--primary:hover { background:#14532d; border-color:#14532d; color:#4ade80; } /* RULE: a primary button on a DARK surface flips to the bright treatment (lime fill, forest text) so it always contrasts - the dark-on-bright pairing inverted, exactly like the dark setting of the contrast pairings. */ :root[data-v-color="elevate"] .gd-main .band--dark .btn--primary, :root[data-v-color="elevate"] .gd-main .tier--featured .btn--primary, :root[data-v-color="elevate"] .gd-main .fcard--dark .btn--primary { background:#4ade80; border-color:#4ade80; color:#002e11; } :root[data-v-color="elevate"] .gd-main .band--dark .btn--primary:hover, :root[data-v-color="elevate"] .gd-main .tier--featured .btn--primary:hover, :root[data-v-color="elevate"] .gd-main .fcard--dark .btn--primary:hover { background:#22c55e; border-color:#22c55e; color:#002e11; } /* Pricing tier label: dark green (green-700) on the light tiers for contrast; the bright lime is only legible on the dark featured tier. */ :root[data-v-color="elevate"] .gd-main .tier .tname { color: #15803d; } :root[data-v-color="elevate"] .gd-main .tier--featured .tname { color: var(--t-accent); } /* The contrast-pairings spec is an Elevate-only representation; hidden in Current. */ .sect--pairings { display: none; } :root[data-v-color="elevate"] .gd-main .sect--pairings { display: block; } /* ============================================================ ASPECT · CORNERS → Elevate rounding scale ============================================================ */ :root[data-v-corners="elevate"] .gd-main { --t-radius: 24px; /* canonical card + button radius (rounded.xl) */ --t-radius-input: 12px; /* small card / input */ --t-radius-pill: 9999px; /* status pills */ } /* ============================================================ SPACING → airier, breathier (4px foundational scale) Applied to BOTH brands on the preview content (not a toggle). Larger steps from the 4px-based foundational scale give more breathing room than Evidence's tight 8px grid. ============================================================ */ .gd-main { --space-xs: 12px; --space-sm: 24px; --space-md: 40px; --space-lg: 64px; --space-xl: 96px; --space-2xl: 128px; } /* ============================================================ ASPECT · TYPE → Elevate display: Satoshi, scaled up large ------------------------------------------------------------ Headings stay on Satoshi (our display face), pushed much bigger and tighter for the Elevate look. Satoshi's heaviest self-hosted cut is 700, so weight is 700 (the source's 900 is not matched - face fidelity chosen over weight). hero → Satoshi 700, clamp up to 112px, leading 0.95 headings → Satoshi 700, clamp up to 64px body+sub → 20px / lh 30px (body-lg) ============================================================ */ /* Elevate Type brings Satoshi to the display face (Current stays Inter). */ :root[data-v-type="elevate"] .gd-main { --tt-face: var(--font-display); } :root[data-v-type="elevate"] .gd-main .tt-display { font-family: var(--font-display); /* Satoshi */ font-weight: 700; font-size: clamp(56px, 8.5vw, 112px); line-height: 1.06; letter-spacing: -0.04em; } :root[data-v-type="elevate"] .gd-main .tt-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.5vw, 64px); line-height: 1.1; letter-spacing: -0.03em; } :root[data-v-type="elevate"] .gd-main .sub, :root[data-v-type="elevate"] .gd-main .body { font-size: 20px; /* body-lg */ line-height: 30px; } /* 14px is the absolute minimum text size in Elevate. Eyebrow and every small label snap up to the 14px floor. (Current keeps its smaller sizes; this is Elevate-only.) */ :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .eyebrow { font-size: 14px; letter-spacing: 0.08em; } :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .sw__n, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .sw__hex, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .sw__v, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .card .lbl, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .card .desc, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .bar .tok, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .bar .val, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .tag, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .foot, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .badge, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main th, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .palgroup__l, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .tname, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .rsw .rn, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .rsw .rh, :root:is([data-v-color="elevate"],[data-v-type="elevate"]) .gd-main .trow .tk { font-size: 14px; } /* ============================================================ ASPECT · TEXT FORMATTING Rule 1 - NO ALL-CAPS, anywhere. Uppercasing is not permitted for body copy or headings; eyebrows, stat labels, badges, and table headers drop text-transform and relax the caps tracking. (More text-formatting rules can be added to this block later.) ============================================================ */ /* Catch-all: nothing in the preview is uppercased, no exceptions. */ :root[data-v-format="elevate"] .gd-main * { text-transform: none !important; } /* Relax the caps letter-spacing on the labels that used it. */ :root[data-v-format="elevate"] .gd-main .eyebrow, :root[data-v-format="elevate"] .gd-main .card .lbl, :root[data-v-format="elevate"] .gd-main .tname, :root[data-v-format="elevate"] .gd-main .palgroup__l, :root[data-v-format="elevate"] .gd-main .badge, :root[data-v-format="elevate"] .gd-main .bar .tok, :root[data-v-format="elevate"] .gd-main th { letter-spacing: 0.01em; } /* ============================================================ ASPECT · OUTLINE → borderless, light-fill containers ------------------------------------------------------------ Elevate stays away from borders. Containers and boxes use a light Slate fill instead of a border; interactive hovers step up to a stronger Slate for more contrast. Tables are the one exception - they keep a hairline border. containers / boxes / inputs → Slate 50 (#f8fafc) fill, no border button hover → Slate 100 (#f1f5f9) tables → keep Slate 200 hairline ============================================================ */ :root[data-v-outline="elevate"] .gd-main { --t-card-border: transparent; --t-input-border: transparent; --t-surface: #f8fafc; /* Slate 50 - container / box fill */ } /* tables keep a hairline border (the one exception) */ :root[data-v-outline="elevate"] .gd-main table { border-color: #e2e8f0; } /* Slate 200 */ /* palette swatches drop their hardcoded hairline too */ :root[data-v-outline="elevate"] .gd-main .sw, :root[data-v-outline="elevate"] .gd-main .rsw .rc { border-color: transparent; } /* inputs need a touch more contrast than cards: Slate 100, not Slate 50 */ :root[data-v-outline="elevate"] .gd-main .input { background: #f1f5f9; }