/* Five subset files. Latin only; Inter 400 and 500 resolve to one variable file.
JetBrains Mono and Inter Tight are not shipped: the meta line is set in Inter 400 tabular,
and the wordmark is placed art, never live text. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
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; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
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; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap;
src: url(https://fonts.gstatic.com/s/sourceserif4/v14/vEFy2_tTDB4M7-auWDN0ahZJW3IX2ih5nk3AucvUHf6OAVIJmeUDygwjihdqnhtdDs4DrjTMXw.woff2) format('woff2');
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; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
src: url(https://fonts.gstatic.com/s/sourceserif4/v14/vEF02_tTDB4M7-auWDN0ahZJW1ge6NmXpVAHV83Bfb_US2D2QYxoUKIkn98pRl9tDMQCjDDUXmAz.woff2) format('woff2');
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; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300; font-display: swap;
src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9kfjOCX1hbuyalUrK439vogqC9yFZCYg7oRZaLP4obnf7fTXglsMx2T9ZHFjSShVCjzSY.woff2) format('woff2');
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; }
/* =============================================================
Verellax · colors_and_type.css · v4.0
Workforce intelligence — copy-pasteable design tokens.
Single import for any new Verellax surface (slide, page, social).
Cream is the page. Navy is the break. Data is the colour.
Colour is a variable, or it isn't there.
staging · pending clearance
============================================================= */
/* Font loading is pinned in the page head to five subset files: Source Serif 4 regular and italic, Inter regular and medium, Newsreader italic light. The design system's full five-family import is removed here so JetBrains Mono and Inter Tight are never shipped. */
:root {
/* ---------- Type families · four families, four jobs ---------- */
--serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* @kind font */
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* @kind font */
--vx-mark: 'Inter Tight', 'Inter', sans-serif; /* @kind font */
--vx-descriptor: 'Newsreader', 'Source Serif 4', Georgia, serif; /* @kind font */
--vx-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* @kind font */ /* the meta line and dense table numerals, nothing else */
/* ---------- Surfaces · 70 / 25 / 5 ---------- */
--vx-cream: #EFE9DD; /* primary surface, the page */
--vx-bg: #EFE9DD; /* alias: page background */
--vx-navy: #0A1A5C; /* secondary surface, chrome and breaks */
--vx-card: #FFFFFF; /* white islands on cream chrome */
/* ---------- Ink ---------- */
--vx-text: #081447; /* navy ink, type on cream */
--vx-offwhite: #FAFAF7; /* type on navy */
--vx-text-secondary: #6E7FAA;/* secondary type on cream */
/* ---------- Accent · one event per artefact ---------- */
--vx-royal: #2E44A8; /* print and charts only */
--vx-signal: #3550D6; /* digital accent, default device colour */
--vx-light: #B5C2E3; /* the only on-navy accent, and the on-navy hinge */
--vx-signal-soft: #E5EBF5; /* options row only: 12% tint for a recommendation chip; never a population label */
/* ---------- Rules, borders, chart neutral ---------- */
--vx-rule: rgba(10, 26, 92, 0.18); /* hairline on cream */
--vx-rule-navy: rgba(46, 68, 168, 0.30); /* hairline on navy */
--vx-border: #E5E5EC; /* card border */
--vx-bar-gray: #D4D7DC; /* chart neutral */
--vx-zebra: #E9E3D6; /* second neutral · alternate table rows only, never a surface */
/* ---------- Data palette · six colours, each with a job it never leaves ---------- */
--vx-exe: #EDB652; /* amber · execution */
--vx-coo: #4BA79B; /* teal · coordination · change up */
--vx-jud: #3550D6; /* signal · judgement */
--vx-aia: #E06A45; /* coral · AI-adjacent · change down · never a headline or background */
--vx-orchid: #8560EA; /* reserve fifth series · the register */
--vx-mint: #A0E0CE; /* figures on navy */
--vx-up: var(--vx-coo);
--vx-down: var(--vx-aia);
/* v3 taxonomy names, kept as aliases to the six */
--layer-execution: var(--vx-exe);
--layer-coordination: var(--vx-coo);
--layer-judgment: var(--vx-jud);
--layer-ai-adjacent: var(--vx-aia);
/* ---------- Device palette · the stop takes the one you're in ---------- */
--vx-d-index: #3550D6;
--vx-d-signal: #E06A45;
--vx-d-skills: #4BA79B;
--vx-d-method: #EDB652;
--vx-d-method-text: #B8820F; /* amber's readable ink for text on cream */
--vx-d-register: #8560EA;
--vx-accent: var(--vx-d-index); /* set per route · hinge, primary button, links, focus, the stop */
/* ---------- Spacing (8-base) ---------- */
--pad-lg: 96px;
--pad-md: 72px;
--pad-sm: 56px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--hairline: 1px;
--grid-cols: 12; /* @kind other */
--step-1: 8px; /* three scales, each three times the last */
--step-2: 24px;
--step-3: 72px;
--num-hero: 56px;
--num-strip: 32px;
/* ---------- Radii · inviolate ---------- */
--radius-card: 16px;
--radius-button: 8px;
--radius-sm: 6px;
/* ---------- Motion ---------- */
--ease: cubic-bezier(.3, .7, .4, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur-base: 220ms; /* @kind other */
--dur-slow: 360ms; /* @kind other */
--motion-draw: 400ms; /* @kind other */ /* bars draw, home first load */
--motion-assemble: 1600ms; /* @kind other */ /* the mark assembles, covers */
--motion-hover: 120ms; /* @kind other */
/* ---------- Mark 06 metrics ---------- */
--vx-mark-size: 28px;
--vx-mark-weight: 700; /* @kind other */
--vx-mark-tracking: -0.028em;
--vx-mark-nav-weight: 600; /* @kind other */
--vx-mark-nav-tracking: -0.022em;
--vx-descriptor-size: 13px;
--vx-descriptor-weight: 300; /* @kind other */
--vx-rule-opacity: 0.4; /* @kind other */
}
/* =============================================================
SEMANTIC TYPE ROLES — editorial
============================================================= */
/* The eyebrow is retired in v3.0. The order is headline, subheadline,
narrative, evidence, source: the headline is the apex and stands alone
as a complete strategic statement. Nothing sits above it. Tracked-caps
category tags appear in no editorial artefact; data labels survive in
product UI only, sentence case (see .text-data-label). */
.vx-narrative { font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.55; color: var(--vx-text); max-width: 760px; text-wrap: pretty; }
.on-navy .vx-narrative { color: var(--vx-light); }
.vx-headline { font-family: var(--serif); font-size: clamp(48px, 6vw, 96px); font-weight: 400; line-height: 1.04; letter-spacing: -0.015em; color: var(--vx-text); font-variation-settings: "opsz" 60; text-wrap: balance; }
.on-navy .vx-headline { color: var(--vx-offwhite); }
.vx-headline em { font-style: italic; font-weight: 400; color: var(--vx-accent); margin-left: 4px; margin-right: 0.18em; font-variation-settings: "opsz" 60; }
.on-navy .vx-headline em { color: var(--vx-light); }
.in-print .vx-headline em { color: var(--vx-royal); }
.vx-subhead { font-family: var(--serif); font-size: clamp(22px, 2vw, 32px); font-weight: 400; line-height: 1.32; color: var(--vx-text-secondary); font-variation-settings: "opsz" 32; max-width: 1100px; text-wrap: pretty; }
.on-navy .vx-subhead { color: var(--vx-light); }
.vx-caption { font-family: var(--sans); font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--vx-text-secondary); max-width: 760px; text-wrap: pretty; }
.on-navy .vx-caption { color: var(--vx-light); }
.vx-source { font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.01em; color: var(--vx-text-secondary); font-variant-numeric: tabular-nums lining-nums; }
.on-navy .vx-source { color: var(--vx-light); }
.vx-pullquote { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 56px); font-weight: 400; line-height: 1.18; color: var(--vx-text); font-variation-settings: "opsz" 48; text-wrap: balance; }
.on-navy .vx-pullquote { color: var(--vx-offwhite); }
.vx-data { font-family: var(--sans); font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; font-weight: 500; color: var(--vx-text); }
.on-navy .vx-data { color: var(--vx-offwhite); }
.vx-data-pct::after { content: "%"; font-size: 0.42em; font-weight: 500; vertical-align: 0.42em; margin-left: 0.05em; }
/* Display numerals. One hero per page; label in the serif beneath, never Inter.
The numeral wears its variable's colour: ink with no layer, mint on navy. */
.vx-numeral-hero { font-family: var(--sans); font-size: var(--num-hero); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--vx-text); font-variant-numeric: tabular-nums lining-nums; }
.vx-numeral-strip { font-family: var(--sans); font-size: var(--num-strip); font-weight: 500; line-height: 1; letter-spacing: -0.01em; color: var(--vx-text); font-variant-numeric: tabular-nums lining-nums; }
.on-navy .vx-numeral-hero, .on-navy .vx-numeral-strip { color: var(--vx-mint); }
.vx-numeral-label { font-family: var(--serif); font-size: 20px; line-height: 1.3; font-weight: 400; color: var(--vx-text); font-variation-settings: "opsz" 24; max-width: 420px; text-wrap: pretty; }
.on-navy .vx-numeral-label { color: var(--vx-light); }
.vx-num-exe { color: var(--vx-exe); } .vx-num-coo { color: var(--vx-coo); } .vx-num-jud { color: var(--vx-jud); } .vx-num-aia { color: var(--vx-aia); }
/* The meta line replaces the chip for population labels. Mono, one job. */
.vx-meta { font-family: var(--vx-mono); font-size: 11.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0.01em; color: var(--vx-text-secondary); font-variant-numeric: tabular-nums lining-nums; }
.on-navy .vx-meta { color: var(--vx-light); }
/* =============================================================
SEMANTIC TYPE ROLES — platform UI
============================================================= */
.text-page-title { font-family: var(--sans); font-size: 24px; font-weight: 600; color: var(--vx-text); }
.text-section-heading { font-family: var(--sans); font-size: 18px; font-weight: 600; color: var(--vx-text); }
.text-section-label { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--vx-text-secondary); } /* sentence case; tracked caps retired */
.text-subsection { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--vx-text); }
.text-body { font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--vx-text); }
.text-table-header { font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--vx-text-secondary); }
.text-table-cell { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--vx-text); }
.text-data-label { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--vx-text-secondary); }
.text-metric-large { font-family: var(--sans); font-size: 28px; font-weight: 500; color: var(--vx-text); font-variant-numeric: tabular-nums lining-nums; }
.text-metric-small { font-family: var(--sans); font-size: 20px; font-weight: 600; color: var(--vx-text); font-variant-numeric: tabular-nums lining-nums; }
.text-caption { font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--vx-text-secondary); }
/* =============================================================
PRIMITIVES
============================================================= */
.vx-rule { display: block; height: 1px; width: 100%; background: var(--vx-rule); border: 0; }
.on-navy .vx-rule { background: var(--vx-rule-navy); }
.vx-card { background: var(--vx-card); border: 1px solid var(--vx-border); border-radius: var(--radius-card); padding: 24px; }
.vx-card-briefing { background: var(--vx-card); border: 1.5px solid var(--vx-border); border-radius: var(--radius-card); padding: 28px; }
/* Primary: background in the section's device colour, white text (ink on amber). */
.vx-button { font-family: var(--sans); font-size: 14px; font-weight: 500; background: var(--vx-accent); color: #FFFFFF; border: 0; border-radius: var(--radius-button); padding: 10px 18px; cursor: pointer; transition: background var(--motion-hover) var(--ease); }
.vx-button:active { transform: translateY(1px); }
.vx-button:focus-visible { outline: 2px solid var(--vx-accent); outline-offset: 2px; }
.vx-button--secondary { background: transparent; color: var(--vx-text); border: 1px solid var(--vx-accent); }
.vx-button--amber { color: var(--vx-text); }
.on-navy .vx-button--secondary { color: var(--vx-offwhite); }
/* Table zebra: the second neutral, alternate rows only, never a surface. */
.vx-table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 13px; color: var(--vx-text); }
.vx-table th { font-size: 11px; font-weight: 500; color: var(--vx-text-secondary); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--vx-rule); }
.vx-table td { padding: 8px 12px; font-variant-numeric: tabular-nums lining-nums; }
.vx-table td.num { font-family: var(--vx-mono); font-size: 12px; text-align: right; }
.vx-table tbody tr:nth-child(even) td { background: var(--vx-zebra); }
/* Suppressed cell: below the floor, 35% and n disclosed. */
.vx-suppressed { opacity: 0.35; }
/* RETIRED in v4.0: .vx-chip and .vx-chip-mark (population labels are type,
see .vx-meta; the tile is the flower mark), .text-watermark. An options
row may still tint a card 12% in signal, teal or coral, see .vx-option. */
.vx-option { font-family: var(--sans); font-size: 11px; font-weight: 500; border-radius: var(--radius-sm); padding: 4px 9px; display: inline-block; }
.vx-option--keep { background: rgba(53, 80, 214, 0.12); color: var(--vx-signal); }
.vx-option--try { background: rgba(75, 167, 155, 0.14); color: #2F7F74; }
.vx-option--no { background: rgba(224, 106, 69, 0.14); color: #B4472A; }
/* =============================================================
MARK 06 · verellax.
Inter Tight 700 lowercase. The stop is the only colour.
The stop is a brand device, never part of the name: the entity,
schema markup and all running copy read Verellax, capital V, no stop.
THE WORDMARK IS A PLACED ASSET, NEVER LIVE TEXT. A font that fails to
load renders a mark that is not ours, so no deliverable sets the mark
with a font-family declaration. Place one of the four masters:
assets/verellax-wordmark-ink.png transparent, navy ink, signal stop (#3550D6)
assets/verellax-wordmark-offwhite.png transparent, off-white, light stop
assets/verellax-wordmark-cream.png flattened on cream
assets/verellax-wordmark-navy.png flattened on navy
The exports carry clear space of one x-height on all sides, so the
rendered image height is THREE TIMES the intended mark height (measured
2.94 on the v4 exports): a 28px mark is height:84px, the 18px nav
variant is height:54px. The --vx-mark font token remains for the
dot-system devices only; Inter Tight anywhere else is a violation.
The stop takes the section's device colour; until the vector recut
ships the stop as a layer, the PNGs carry signal on cream, light on navy.
============================================================= */
.vx-wordmark { display: block; height: 84px; width: auto; align-self: flex-start; } /* align-self guards against flex-column stretch */
/* Below a 20px mark, the nav variant */
.vx-wordmark--nav { height: 54px; }
/* The chip is the flower mark in a tile (assets/chip). The v. avatar is retired. */
.vx-chip-tile { display: inline-block; background: var(--vx-navy); overflow: hidden; }
.vx-chip-tile img, .vx-chip-tile svg { display: block; width: 100%; height: 100%; }
/* The masthead lockup: the word on a rule that continues and closes on the stop. Covers only. */
.vx-masthead-rule { display: flex; align-items: center; width: 100%; }
.vx-masthead-rule::before { content: ""; flex: 1; height: 1px; background: var(--vx-text); }
.vx-masthead-rule::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vx-accent); }
.on-navy .vx-masthead-rule::before { background: var(--vx-offwhite); }
/* Descriptor lockup. Minimum width 120px; below that, omit the descriptor. */
.vx-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 120px; }
.vx-lockup__rule { display: block; width: 96px; height: 1px; background: currentColor; opacity: var(--vx-rule-opacity); color: var(--vx-text); }
.on-navy .vx-lockup__rule { color: var(--vx-offwhite); }
.vx-descriptor { font-family: var(--vx-descriptor); font-style: italic; font-weight: var(--vx-descriptor-weight); font-size: var(--vx-descriptor-size); letter-spacing: 0.005em; font-variation-settings: "opsz" 24; line-height: 1.2; color: var(--vx-text-secondary); }
.on-navy .vx-descriptor { color: var(--vx-light); }
/* =============================================================
THE DOT SYSTEM · devices, not addresses
verellax.index · verellax.method · verellax.signal · verellax.skills · verellax.register
Mark in ink, suffix in the device colour at Inter Tight 500. Five devices,
five hues; the register is the one behind the gate. Measure, Redesign and
Build are stages, not devices: plain words, no prefix, no glyph.
Never styled as a clickable address. Live traffic runs on
verellax.com paths.
============================================================= */
.vx-device { font-family: var(--vx-mark); font-weight: var(--vx-mark-weight); letter-spacing: var(--vx-mark-tracking); color: var(--vx-text); line-height: 1; }
.on-navy .vx-device { color: var(--vx-offwhite); }
.vx-device .suffix { font-weight: 500; color: var(--vx-accent); }
.vx-device--index .suffix { color: var(--vx-d-index); } .vx-device--signal .suffix { color: var(--vx-d-signal); } .vx-device--skills .suffix { color: var(--vx-d-skills); } .vx-device--method .suffix { color: var(--vx-d-method-text); } .vx-device--register .suffix { color: var(--vx-d-register); }
.on-navy .vx-device .suffix { color: var(--vx-light); }
.in-print .vx-device .suffix { color: var(--vx-royal); }
/* MARKUP
verellax.index
Workforce intelligence
*/
/* =============================================================
LINKS
============================================================= */
a { color: var(--vx-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--vx-royal); }
.on-navy a { color: var(--vx-light); }
.on-navy a:hover { color: var(--vx-offwhite); }