/* ============================================================================
AURORA — Helion's design system, and the product's only skin since
2026-08-17 (Meridian retired; its final two-skin state is git tag
`meridian-final`). Structure of this file: the original Meridian plumbing
first (kept because every component's bones live in it), then THE AURORA
LAYER at the end re-skinning it — the layer must stay last, since at equal
specificity it wins on source order alone. Aurora's rules live in the
layer's comments and in app/views/helion/README.md under "Aurora".
========================================================================== */
/* Helion — Aplify v2 UI */
/* Design system: "Meridian" — brand-ink navy sidebar, blue -> cyan gradient accent, soft/borderless cards. */
@font-face { font-family: 'Archivo'; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/archivo-600-cafc4a45.woff2") format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/fonts/archivo-800-ab4513af.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/plexsans-400-64251e64.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/plexsans-500-290aaea2.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/plexsans-600-99b2fa32.woff2") format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/plexmono-500-3f7bbac1.woff2") format('woff2'); }
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--helion-sidebar-rail: 104px;
--helion-sidebar-width: 240px;
--helion-header-height: 68px;
--helion-nav-bleed: 18px; /* literal overhang past the sidebar's right edge */
--helion-content-gutter: 3.5rem; /* left gutter on page content, clear of the bleeding pill */
--helion-card-gap: var(--space-5); /* single rhythm between cards, whether gridded or stacked */
/* Spacing scale. Premium interfaces feel calm largely because spacing REPEATS — the eye finds a
rhythm even when it cannot name one. Reach for a step here rather than inventing a value;
a bespoke number is nearly always a step in disguise. */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
/* Measure: prose beyond ~75 characters is tiring to read, and unbounded prose is the clearest
signal that a layout was never considered. Content is capped too, so a row's information does
not scatter across a wide monitor. */
/* Type scale. Font sizes had the same problem as spacing — 0.66/0.68/0.72/0.78/0.82rem were all
doing similar jobs. Each step here has one role. */
--text-2xs: 0.68rem; /* 11px — table headers, micro labels */
--text-xs: 0.75rem; /* 12px — help text, badges */
--text-sm: 0.82rem; /* 13px — controls, secondary UI */
--text-base:0.9rem; /* 14px — body, inputs */
--text-md: 1rem; /* 16px — page intro */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px — card titles */
--text-2xl: 2rem; /* 32px */
--text-3xl: 2.4rem; /* 38px — page titles */
--text-stat: 3rem; /* 48px — stat tiles */
--text-stat-hero: 4rem; /* 64px — hero stat */
/* Motion. One duration and one curve used everywhere reads as deliberate; assorted timings read
as accidental. The curve is fast-out, slow-in so movement settles rather than stops dead. */
--ease: cubic-bezier(0.2, 0, 0, 1);
--dur: 160ms;
--dur-slow: 240ms;
/* A third step for deliberate, watchable movement rather than acknowledgement of an action.
240ms is enough to avoid a jump but still reads as a state flip; a large surface changing
colour wants long enough to be seen as a transition. Only for hover treatments that are
meant to be noticed — a button press must never sit here. */
--dur-deliberate: 420ms;
/* Table rhythm: row height is a decision, not a by-product of padding. */
--table-row-h: 56px;
--helion-measure: 58ch; /* ~70 rendered characters — ch is the width of "0", so it overshoots */
/* Sized so the content fills a 16" MacBook Pro exactly and caps beyond it. At that machine's
1728pt logical width, minus the 104px collapsed rail and a 56px gutter each side, 1512 is
what is left — so nothing is wasted there and wider displays get a cap rather than a line
of text running the width of a 27" monitor. It was 1400, which left 136px of dead space on
the right of a 16" screen. Raise it only with a screen in front of you: past roughly this
width a full-width table row is harder to read across, not easier. */
--helion-content-max: 1512px;
/* The bleeding pill crosses both the navy rail and the cream page, so it must be OPAQUE —
a translucent fill composites to two different colours either side of the edge. */
--helion-nav-pill: #d8dee7;
--helion-nav-pill-fg: #041324;
/* Corner scale. Outer surfaces must stay rounder than what sits inside them, or a field near a
card's corner reads as bulging out of it — so these three move together, never one alone. */
--helion-radius: 10px;
--helion-radius-sm: 8px;
--helion-input-radius: 6px;
/* Recessed field tones — darker than --helion-card-bg, so fields read as inset within a card.
Focus lifts toward the card without reaching it: stopping short keeps the well visible, so an
active field stays a distinct shape rather than dissolving into the card behind it. */
--helion-input-bg: #e2e7ec;
--helion-input-bg-hover: #dce1e8;
--helion-input-bg-focus: #e8edf2;
--helion-input-min-height: 3rem;
/* A rich text body is somewhere to write paragraphs, not a line. Its own token rather than a
spacing step, the same way --helion-input-min-height is. */
--helion-richtext-min-height: 13rem;
/* Field padding lives in tokens so the focus bar can align to the text rather than the box. */
--helion-input-pad-x: 1rem;
--helion-input-pad-y: 0.85rem;
/* Ground — warm neutral scale, every grey derived from these two tones */
/* Cool neutral scale, hue 254° — biased toward the navy rail (251.5°) rather than an
arbitrary blue-grey, so the ground reads as chosen. Derived from the warm scale that
preceded it by preserving each token's OKLCH lightness exactly and rotating hue only,
which is why every contrast ratio and ΔE below survived the change to within 0.2. */
--helion-bg: #eaecf0;
--helion-card-bg: #f3f5f7;
--helion-tint-bg: #dde3ea;
--helion-border: #d8dee7;
--helion-fg: #191b1f;
--helion-muted: #6a7078;
/* Muted ink for text sitting on the page ground rather than on a card. --helion-muted was
measured against the card (4.57:1) and drops to 4.23:1 on the darker page, under AA — the
same "don't derive one ground from another" trap as the stat wash. Darkened to clear it at
4.83:1 while staying on the cool neutral axis. */
--helion-muted-on-page: #61676f;
/* Unfilled progress track. Sits on the page ground, not a card, so it cannot borrow
--helion-border or --helion-tint-bg: both are within ~ΔE 2 of the page and vanish against
it. Darker than either, while staying quiet enough that the filled gradient is what the
eye goes to. */
--helion-track: #cdd4de;
--helion-heading: #041324; /* brand ink navy — headings, matching the sidebar */
--helion-auth-card-width: 500px;
/* Nav (sidebar) — brand ink navy */
--helion-nav: #041324;
--helion-nav-raised: rgba(255, 255, 255, 0.10);
--helion-nav-border: rgba(255, 255, 255, 0.10);
--helion-nav-fg: #fff;
--helion-nav-muted: rgba(255, 255, 255, 0.62);
/* Accent — flat brand blue. Was a blue -> cyan gradient; flattened once the entity tones
arrived, because everything else carrying colour is now flat and the gradient's two homes
(the stat hero, the linked-tile hover) had both been replaced by then. It was the only
gradient left, which read as a leftover rather than a decision.
Still expressed as a gradient function rather than a bare colour: five of its ~19 usages are
`background-image`, where a plain colour is invalid, and one composites with the select
chevron. A single-stop gradient renders flat and keeps every call site unchanged.
#0ea5e9 rather than the cyan end: --helion-on-accent navy measures 6.74 on it, where the
logo cyan #02dafd would force 11.08 navy / 1.69 white and read almost white itself. */
--helion-accent: #0ea5e9;
--helion-accent-strong: #0284c7;
--helion-accent-grad: linear-gradient(var(--helion-accent), var(--helion-accent));
/* Soft accent ring for "this is the live one" — currently the halo on the active step dot.
Alpha rather than a solid tint so it works over either ground. Defined once: the accent
gradient is not redefined per theme, so its halo is not either. */
--helion-accent-halo: rgba(14, 165, 233, 0.22);
/* Was the horizontal twin of the gradient, for marks that grow left-to-right — the field focus
bar, the meter fill. Flat now for the same reason, and kept as a separate token because those
call sites are `background-image` and read as a distinct job from the block fills. */
--helion-accent-grad-x: linear-gradient(var(--helion-accent), var(--helion-accent));
--helion-accent-bg: #e4f4fc;
/* Ink for anything sitting ON the accent gradient. Deliberately NOT overridden in dark: the
gradient is bright in both themes, and white on it measures 2.77:1 at the blue end and
1.69:1 at the cyan end — below AA even for large text. Navy gives 6.74 and 11.08. */
--helion-on-accent: #041324;
/* Entity tones — the colour a stat tile carries on its edge bar and icon chip.
────────────────────────────────────────────────────────────────────────────
COLOUR FOLLOWS THE ENTITY, NOT THE POSITION. Jobs are blue on every page they
appear on. Assigning by grid slot instead means the same figure changes colour
from page to page, which is worse than no colour at all.
Deliberately NO red and NO green: both are spoken for by the status chips
(success, attention, rejected), and a tile is an identity, never a verdict.
These are brighter than --chart-1…6 on purpose, and are NOT interchangeable
with them. A chart series is identified by its colour alone, so it needs the
stricter any-two-series separation that palette was validated for. A tile always
carries a text label and its own icon, so its colour is reinforcement — which is
what buys the extra brightness. If a mark ever has to be identified by colour
with no label, use --chart-1…6, not these.
Measured on the light card: bars land at ΔE 20.5–33.0, where the accent tint that
was kept measured 8.5 and the wash rejected as invisible measured 2.7. Contrast
ratio is the wrong metric here and says 1.48 for the gold — it only sees lightness,
and these are chromatic marks on a near-neutral ground.
JOBS IS DELIBERATELY NOT THE ACCENT BLUE. It was #00a3e0, which measured ΔE 1.4 from
--helion-accent — the same colour. That was survivable only while the accent was a gradient
and told apart by its form; flattening the accent left two identical blues meaning
"interactive" and "about jobs" on the same page. The accent is brand-fixed, so jobs moved.
A deep royal blue keeps jobs intuitively blue and separates by lightness rather than hue:
ΔE 22.5 from the accent and 24.9 from the nearest other tone.
The wheel is genuinely full here. With red and green reserved for status and five tones
already placed, a search of every in-gamut hue found the best-separated candidates were all
green, red or olive — all banned. Separating by lightness was the way out. Bear that in mind
before adding a seventh tone: there is not much room left. */
--helion-tone-jobs: #1d4ed8;
--helion-tone-applications: #ff8a3d;
--helion-tone-candidates: #00c2b2;
--helion-tone-events: #b57bff;
--helion-tone-feeds: #ffc233;
--helion-tone-platform: #ff6fae;
/* Ink for the glyph sitting ON a tone chip. Per tone, not one value, because the tones are no
longer all light: navy measures 6.44–11.58 on the five bright ones and only 2.79 on the deep
jobs blue, where white reaches 6.70. Neither ink follows the theme — the chips are the same
colour in both, so their contrast partner cannot flip. */
--helion-on-tone: #041324;
--helion-on-tone-light: #ffffff;
/* The hero is one deep navy rather than the accent gradient, so the bright tones on the
plain tiles are the page's colour and the headline is its anchor. Lighter than the
sidebar rail (ΔE 13.3) so the two do not read as one shape, and clear of the dark card
(ΔE 9.5) so it still reads as a raised surface in dark. White on it measures 13.1. */
--helion-hero-bg: #143156;
--helion-on-hero: #ffffff;
/* Supporting text on the hero. An ALPHA COLOUR, not `opacity` on the element: opacity dims
every descendant and cannot be undone by one, so with it on .helion-stat-label the hover
CTA nested inside could not reach full strength no matter what colour it asked for. Same
reasoning as --helion-nav-muted on the sidebar. */
--helion-on-hero-muted: rgba(255, 255, 255, 0.78);
/* Toast inverts its surroundings so the system is visibly speaking rather than the page.
Inversion is the RULE, not the colour: in dark mode --helion-nav (#121a24) sits almost on
top of the card, so a navy toast would read as just another card and lose the whole idea.
The dark theme therefore flips to a light toast. */
--helion-toast-bg: #041324;
--helion-toast-fg: #ffffff;
--helion-toast-close-bg: rgba(255, 255, 255, 0.14);
/* Semantic — separate from the accent, same meaning everywhere.
Two rules keep these feeling part of Meridian rather than stickers dropped on top:
every tint carries the ground's warmth so it sits on the cream page, and all four tints
share a lightness while all four inks share a darkness, so no one state shouts louder
than another. `info` is deliberately in the brand blue family — a second, unrelated blue
next to the accent reads as an accident. */
/* Tints are pulled toward the ground's warm cast and down near its saturation. The ground sits
at hue 40 / sat 15; the previous tints ran sat 36-76 and only one shared the warm axis, which
is what made them read as generic semantic colours dropped onto Meridian rather than part of
it. Inks are unchanged, and every pair still clears AA. */
--helion-success: #0a6a4f;
--helion-success-bg: #e3ede8;
--helion-warning: #8a5a10;
--helion-warning-bg: #ebe4d5;
--helion-info: #4a3fb0;
--helion-info-bg: #e8e7ef;
--helion-error: #b03a28;
--helion-error-bg: #eee5e2;
/* Status chips — the "Signal" scale. Solid fills for at-a-glance state in dense tables, where
tints are too quiet to scan. Same four hues as the tinted scale above, so flashes and chips
read as one system. Violet carries `info` deliberately: a chip in the accent's own blue would
look like a brand element rather than a status.
Amber is the one chip that takes dark text — white on amber cannot reach AA at any usable
saturation. Neutral stays a quiet tint: chips that merely describe configuration should not
compete with the ones that actually signal something. */
--helion-chip-neutral: #dde3ea; --helion-chip-neutral-fg: #4d5359;
/* Quiet interactive controls sit RAISED — lighter than the card, where fields sit darker than it.
Tone therefore encodes interactivity: light means pressable, dark means fillable. Before this,
--helion-chip-neutral (#e6e2d9) and --helion-input-bg (#e9e6df) were three units apart, so a
button and a text field were indistinguishable. Non-interactive badges keep the tint, which is
what separates a label like "Follow-up" from a toggle like "Optional". */
--helion-control-bg: #fbfcfd;
--helion-control-bg-hover: #ebeff4;
/* Hairline so a quiet control still reads as raised on a card, which is nearly as light as it.
Buttons are outlined, fields are not — a second, redundant signal beyond tone alone. */
--helion-control-edge: #d8dee7;
--helion-chip-info: #6355e0; --helion-chip-info-fg: #fff;
--helion-chip-success: #0a7a5a; --helion-chip-success-fg: #fff;
--helion-chip-attention: #d1402d; --helion-chip-attention-fg: #fff;
--helion-chip-warning: #e0a020; --helion-chip-warning-fg: #3a2a05;
/* Three more, added so a pipeline with eight states can give each its own colour rather than
making several share one. Same rules as the four above: measured into the L* 45–49 band so no
state shouts louder than another, and past 4.5:1 against their own foreground.
Slate is deliberately light with dark text, the way warning is. At the same lightness as teal
it measured deltaE 2.5 under deuteranopia — indistinguishable, the olive/crimson mistake over
again. Two blue-ish chips cannot be separated by hue on the red-green axis, so this pair is
separated by lightness instead: 20.0 under deuteranopia, 16.2 under protanopia. Do not darken
slate back into the band without re-running that check. */
--helion-chip-teal: #11818e; --helion-chip-teal-fg: #fff;
--helion-chip-slate: #93a3ba; --helion-chip-slate-fg: #1e2937;
--helion-chip-rose: #c23a6d; --helion-chip-rose-fg: #fff;
/* Stat tile corner wash. Deliberately a different gradient per theme, chosen and measured on its
own card rather than derived from the other — the two grounds are not symmetrical.
Light sits at L* 96, so there is almost nowhere lighter to go: even pure white only reaches
deltaE 3.9 against the card. This buys its visibility from area rather than brightness — a
wider reach held longer before it falls off — and warms the corner slightly so it reads as
light rather than as a blown-out patch. Peak measures deltaE 3.4.
Dark sits at L* 12 with plenty of headroom above it, so the plain raised tone is enough:
deltaE 5.2. Carrying that same value into light mode is what produced an invisible wash —
it measured 2.7 there, under the ~3 floor for two surfaces being tellable apart. */
--helion-stat-wash: radial-gradient(150% 130% at 100% 100%, #fffdf8 0%, rgba(255, 253, 248, 0.55) 30%, transparent 82%);
/* The disc behind a linked tile's icon on hover. White in BOTH themes on purpose: the hover
ground is --helion-accent-grad, which is not redefined per theme, so the correct contrast
partner does not flip either. */
/* --- Charts -------------------------------------------------------------
Categorical series colours. Assign in FIXED ORDER and never cycle — colour
follows the entity, not its rank, so a filter that drops a series must not
repaint the survivors. A 7th series folds into "Other" or becomes small
multiples; it is never a generated hue.
These are deliberately NOT the semantic/chip colours. If green means
success everywhere else, a green series implies goodness. Status stays
reserved and always ships with a label, never colour alone.
Validated, not eyeballed — six checks against the card surface, in both
themes: lightness band, chroma floor, colourblind separation of adjacent
pairs, normal-vision separation, and 3:1 contrast. Earlier candidates
failed on pairs that looked fine to me: olive/crimson measured ΔE 2.6
under deuteranopia. Re-run the validator before changing any value. */
--chart-1: #0072b2; /* blue */
--chart-2: #c2410c; /* orange */
--chart-3: #00806a; /* teal */
--chart-4: #7c3aed; /* violet */
--chart-5: #b87d00; /* gold */
--chart-6: #a8547f; /* mauve */
/* Sequential = ONE hue, light to dark, for magnitude. Never a rainbow. */
--chart-seq-1: #dceefb;
--chart-seq-2: #a8d5f2;
--chart-seq-3: #63b0e0;
--chart-seq-4: #2b8fc4;
--chart-seq-5: #0072b2;
/* Diverging = two poles + a NEUTRAL grey midpoint. Never a hue at the middle. */
--chart-div-low: #0072b2;
--chart-div-mid: #d9d5cc;
--chart-div-high: #c2410c;
/* Structure recedes: grid and axes must never compete with the data. */
--chart-grid: var(--helion-border);
--chart-axis: var(--helion-muted);
--chart-track: var(--helion-tint-bg); /* unfilled part of meters and donuts */
--chart-muted: #c9c4b8; /* de-emphasised bars in a one-accent chart */
--helion-select-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23746f66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}
/* --- Dark theme -------------------------------------------------------------
Applied by adding .helion-dark to . The class is set before first paint
by an inline script in the layout, so there is no flash of the wrong theme.
Only token VALUES change here — no component rule is redefined. That is the
payoff for building on tokens: the whole theme is this one block.
The scale keeps its light-mode meaning, so every rule still holds:
control (lightest, raised) > card > sidebar > page (darkest) > field (recessed)
Headings drop the brand navy — at this size on a dark ground it would vanish;
they take the brightest ink instead. */
html.helion-dark {
color-scheme: dark; /* native scrollbars, colour picker and date UI follow */
--helion-bg: #0a0e13;
--helion-card-bg: #151e29;
--helion-tint-bg: #1e2733;
--helion-border: #26303c;
--helion-fg: #e3e6eb;
--helion-muted: #9aa3ad;
/* Dark's page ground has headroom the light one doesn't: muted already measures 7.57:1 there,
so this deliberately stays equal rather than being darkened to match light's adjustment. */
--helion-muted-on-page: #9aa3ad;
--helion-track: #2b3542; /* see the light block — measured against the dark page ground */
--helion-heading: #f0f2f6;
--helion-input-bg: #0f1620;
--helion-input-bg-hover: #0c121b;
--helion-input-bg-focus: #1a2432;
--helion-control-bg: #1e2836;
--helion-control-bg-hover: #26313f;
--helion-control-edge: #2f3a49;
/* Sidebar lifts off the page rather than merging into it. */
--helion-nav: #121a24;
--helion-nav-raised: rgba(255, 255, 255, 0.08);
--helion-nav-border: rgba(255, 255, 255, 0.08);
--helion-nav-muted: rgba(255, 255, 255, 0.55);
/* The bleeding pill still has to be opaque and read as raised over BOTH the
sidebar and the page — so it is a mid tone here, not the light one. */
--helion-nav-pill: #2f3d4f;
--helion-nav-pill-fg: #f0f2f6;
--helion-accent-strong: #38bdf8; /* links need lifting on a dark ground */
--helion-accent-bg: #10293a;
--helion-success: #7fd3b0; --helion-success-bg: #10281f;
--helion-warning: #e3b45f; --helion-warning-bg: #2b2113;
--helion-info: #a99cf5; --helion-info-bg: #1e1b33;
--helion-error: #f0917f; --helion-error-bg: #2e1815;
--helion-chip-neutral: #26303c; --helion-chip-neutral-fg: #b9c1cb;
/* The raised control tone is enough here — a dark card leaves room above it. deltaE 5.2. */
--helion-stat-wash: radial-gradient(130% 110% at 100% 100%, var(--helion-control-bg) 0%, transparent 62%);
--helion-toast-bg: #f0f2f6;
--helion-toast-fg: #191b1f;
--helion-toast-close-bg: rgba(4, 19, 36, 0.10);
/* Dark chart steps are SELECTED, not an automatic flip — re-validated against
the dark card surface. Only the violet needed lifting; at #7c3aed it fell to
2.95:1 on #151e29. */
--chart-4: #8b5cf6;
--chart-seq-1: #10293a;
--chart-seq-2: #17456a;
--chart-seq-3: #1f6796;
--chart-seq-4: #2b8fc4;
--chart-seq-5: #4aa8e0;
--chart-div-mid: #3a4553;
--chart-muted: #33404f;
/* Chevron is baked into a data: URI, so the stroke colour needs its own value. */
--helion-select-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239aa3ad' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}
/* The auth wordmark is a dark SVG for the light card; swap to the light one. */
html.helion-dark .helion-logo-on-light { display: none; }
html:not(.helion-dark) .helion-logo-on-dark { display: none; }
html { --helion-sidebar-current: var(--helion-sidebar-rail); }
html.helion-sidebar-expanded { --helion-sidebar-current: var(--helion-sidebar-width); }
body {
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px; line-height: 1.5; color: var(--helion-fg);
}
@media (prefers-reduced-motion: no-preference) {
.helion-sidebar-brand { transition: padding-left var(--dur-slow) var(--ease); }
.helion-sidebar, .helion-header, .helion-main, .helion-nav-label, .helion-logo-full { transition: width var(--dur) var(--ease), left var(--dur) var(--ease), margin-left var(--dur) var(--ease), opacity var(--dur) var(--ease), max-width var(--dur) var(--ease); }
}
h1, h2, h3, .helion-auth-title, .helion-card-title, .helion-page-header h2 {
font-family: 'Archivo', -apple-system, sans-serif;
font-weight: 700;
letter-spacing: -0.005em;
text-wrap: balance;
/* Brand ink navy rather than near-black — same tone as the sidebar, so headings tie back to it. */
color: var(--helion-heading);
}
/* --- Auth layout --- */
.helion-auth { background: var(--helion-bg); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
/* Container is the card width plus its own gutter, so the card itself lands on
--helion-auth-card-width on desktop and still shrinks cleanly on small screens. */
.helion-auth-container { width: 100%; max-width: calc(var(--helion-auth-card-width) + 2rem); padding: var(--space-4); }
.helion-auth-card { background: var(--helion-card-bg); border: none; border-radius: var(--helion-radius); padding: var(--space-6); }
.helion-auth-logo { margin-bottom: var(--space-5); display: flex; justify-content: center; }
.helion-auth-logo img { height: 26px; width: auto; }
.helion-auth-title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.helion-auth-subtitle { color: var(--helion-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.helion-auth-links { margin-top: var(--space-4); text-align: center; }
/* --- App layout --- */
/* Sidebar spans full height on the left; header covers only the content area beside it. */
.helion-app { background: var(--helion-bg); min-height: 100vh; }
.helion-sidebar {
position: fixed; top: 0; left: 0; bottom: 0;
width: var(--helion-sidebar-current); background: var(--helion-nav);
padding: 0 0 var(--space-4); z-index: 110;
/* MUST stay visible on both axes: the active/hover nav pill deliberately bleeds out past the
sidebar's right edge onto the page background. Note `overflow-y: auto` would force
`overflow-x` to compute as `auto` too (per spec, a non-visible axis coerces the other),
which silently clips the bleed — that is exactly what broke this before. */
overflow: visible;
display: flex; flex-direction: column; gap: 0;
}
/* The brand fills the same vertical band as the header, so the sidebar's content below it starts
on the same line as the page content — the avatar ends up level with the page title rather than
crowding the wordmark. */
.helion-sidebar-brand {
display: flex; align-items: center; height: var(--helion-header-height); flex: none;
/* Collapsed, the mark is centred on the rail. Expanded, it slides left to sit on the same
vertical line as the company avatar below it — otherwise it reads as shifted right and the
column has no left edge. Both positions are derived, not eyeballed: the expanded inset is
exactly the switcher's own padding plus the toggle's, so it tracks them if either changes. */
padding-left: calc((var(--helion-sidebar-rail) - 24px) / 2);
padding-right: var(--space-4);
}
html.helion-sidebar-expanded .helion-sidebar-brand {
padding-left: calc(var(--space-3) + var(--space-2));
}
/* No fixed slot: the brand's padding places the mark, so it can animate between the two. */
.helion-logo-mark-slot { display: flex; align-items: center; flex: none; }
.helion-logo-mark { height: 24px; width: auto; }
.helion-logo-full { height: 18px; width: auto; opacity: 0; max-width: 0; margin-left: 0; overflow: hidden; }
/* margin-left:auto pushes the wordmark to the far right of the expanded sidebar, rather than
letting it sit immediately beside the mark and float in the middle. */
html.helion-sidebar-expanded .helion-logo-full { opacity: 1; max-width: 140px; margin-left: auto; }
.helion-header {
position: fixed; top: 0; left: var(--helion-sidebar-current); right: 0; height: var(--helion-header-height);
background: var(--helion-bg); color: var(--helion-fg);
display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-5);
z-index: 100;
}
.helion-header-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
/* The sidebar carries the logo on desktop; below the breakpoint it is off-canvas, so the header
picks up the wordmark to keep the app branded. */
.helion-header-brand { display: none; align-items: center; }
.helion-header-brand img { height: 17px; width: auto; }
.helion-header-center { color: var(--helion-muted); font-size: var(--text-sm); }
.helion-header-right { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.helion-icon-btn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 999px; background: none; cursor: pointer;
color: var(--helion-muted); padding: 0;
/* Resting border in the hover fill colour — gives the icons a defined footprint so they sit
deliberately rather than floating, and the hover state fills in rather than appearing. */
border: 1px solid var(--helion-tint-bg);
}
.helion-icon-btn:hover { background: var(--helion-tint-bg); color: var(--helion-fg); }
.helion-icon-btn[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute; top: 100%; right: 0; margin-top: 10px;
background: var(--helion-nav); color: #fff; font-size: var(--text-xs); font-weight: 500; white-space: nowrap;
padding: var(--space-2) var(--space-3); border-radius: 12px; opacity: 0; pointer-events: none; z-index: 400;
transform: translateY(-2px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.helion-icon-btn:hover[data-tooltip]::after, .helion-icon-btn:focus-visible[data-tooltip]::after { opacity: 1; transform: translateY(0); }
.helion-sidebar-toggle {
background: none; border: none; cursor: pointer; padding: 6px; border-radius: var(--helion-radius-sm);
display: flex; flex-direction: column; gap: 3px;
}
.helion-sidebar-toggle:hover { background: var(--helion-tint-bg); }
.helion-sidebar-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--helion-fg); }
.helion-nav { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-6); }
.helion-nav-item { position: relative; padding: 0 var(--space-3); }
@media (prefers-reduced-motion: no-preference) {
.helion-nav-link { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), width var(--dur) var(--ease), padding-right var(--dur) var(--ease); }
.helion-input, .helion-select { transition: background-color var(--dur) var(--ease), background-size var(--dur-slow) var(--ease); }
.helion-btn { transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.helion-btn-small, .helion-btn-icon, .helion-btn-toggle, .helion-company-toggle, .helion-link-btn,
.helion-badge, .helion-icon-btn, .helion-table tbody tr td
{ transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.helion-checkbox input, .helion-radio input { transition: background var(--dur) var(--ease); }
.helion-checkbox input::before, .helion-radio input::before { transition: transform var(--dur) var(--ease); }
}
.helion-nav-link {
display: flex; align-items: center; gap: 0; width: 100%; padding: var(--space-4);
border-radius: 999px; color: var(--helion-nav-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 500;
}
html.helion-sidebar-expanded .helion-nav-link { gap: var(--space-3); }
html:not(.helion-sidebar-expanded) .helion-nav-link { justify-content: center; }
/* The icon wrapper is otherwise a plain inline box, so its SVG aligns to the text baseline and the
line box reserves descender space below it — leaving the icon sitting visibly above the pill's
centre. Making the wrapper a flex container drops baseline alignment so it centres properly. */
.helion-nav-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.helion-nav-svg { flex: none; display: block; }
/* Icons sitting beside a label. align-items: center centres the icon on the text's *box*, which
includes the descender space below the baseline — so the icon lands above the optical centre of
the letters and reads as floating high. Most button labels have no descender at all, which makes
the mismatch obvious. A 1px nudge puts it on the cap-height centre instead.
14px is the size for an icon next to text; 18px and up is for standalone and nav use. */
.helion-btn > .helion-nav-svg,
.helion-btn-small > .helion-nav-svg,
.helion-menu-item > .helion-nav-svg { margin-top: 1px; }
/* Hover stays inside the rail — subtle, translucent, no bleed. */
.helion-nav-link:hover { background: var(--helion-nav-raised); color: var(--helion-nav-fg); }
/* Active bleeds OUT: keeps the full capsule shape and its resting left gutter, but overhangs the
sidebar's right edge onto the page background by --helion-nav-bleed. Adding the item's own
0.7rem gutter back means the overhang equals the token exactly. The matching padding-right
keeps the icon optically centred over the rail instead of drifting right with the extra width.
Requires `.helion-sidebar { overflow: visible }` — see the note there. */
.helion-nav-item.active > .helion-nav-link {
background: var(--helion-nav-pill); color: var(--helion-nav-pill-fg);
width: calc(100% + var(--space-3) + var(--helion-nav-bleed));
padding-right: calc(var(--space-4) + var(--space-3) + var(--helion-nav-bleed));
}
/* Flyout children sit in their own panel off to the side — they must not bleed. */
.helion-nav-children .helion-nav-item.active > .helion-nav-link {
width: 100%; padding-right: var(--space-3);
background: var(--helion-nav-raised); color: var(--helion-nav-fg);
}
.helion-nav-label { opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; }
html.helion-sidebar-expanded .helion-nav-label { opacity: 1; max-width: 140px; }
/* Tooltip for simple (leaf) rail icons */
html:not(.helion-sidebar-expanded) .helion-nav > .helion-nav-item:not(.helion-nav-group) [data-tooltip] { position: relative; }
html:not(.helion-sidebar-expanded) .helion-nav > .helion-nav-item:not(.helion-nav-group) [data-tooltip]::after {
content: attr(data-tooltip);
position: absolute; top: 50%; left: 100%; margin-left: 12px; transform: translateY(-50%) translateX(-4px);
background: var(--helion-nav); color: #fff; font-size: var(--text-xs); font-weight: 500; white-space: nowrap;
padding: var(--space-2) var(--space-3); border-radius: 12px; opacity: 0; pointer-events: none; z-index: 300;
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
html:not(.helion-sidebar-expanded) .helion-nav > .helion-nav-item:hover [data-tooltip]::after { opacity: 1; transform: translateY(-50%) translateX(0); }
/* Children — inline list when expanded, hover flyout when collapsed (so they're always reachable) */
/* Column gap keeps sub-item pills from colliding on hover — applies to both the expanded
inline list and the collapsed flyout, which share this element. */
.helion-nav-children { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
html.helion-sidebar-expanded .helion-nav-group:not(.open) .helion-nav-children { display: none; }
html.helion-sidebar-expanded .helion-nav-children { padding-top: var(--space-1); }
/* Tighter vertical padding than top-level items — sub-items should read as lighter, not chunky. */
html.helion-sidebar-expanded .helion-nav-children .helion-nav-link { padding: var(--space-2) var(--space-4) var(--space-2) 2.3rem; font-size: var(--text-sm); }
html:not(.helion-sidebar-expanded) .helion-nav-children {
position: absolute; left: calc(100% + 12px); top: 0; min-width: 180px;
background: var(--helion-nav); border-radius: var(--helion-radius); padding: var(--space-2);
opacity: 0; pointer-events: none; transform: translateX(-6px); z-index: 300;
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Invisible bridge across the 12px gap between the rail and the flyout. Without it the cursor
leaves .helion-nav-group before reaching the flyout, :hover drops, and the menu vanishes
mid-reach. Inert at rest because the flyout is pointer-events:none until hovered. */
html:not(.helion-sidebar-expanded) .helion-nav-children::before {
content: ''; position: absolute; top: 0; bottom: 0; left: -20px; width: 20px;
}
html:not(.helion-sidebar-expanded) .helion-nav-group:hover .helion-nav-children,
html:not(.helion-sidebar-expanded) .helion-nav-group:focus-within .helion-nav-children { opacity: 1; pointer-events: auto; transform: translateX(0); }
html:not(.helion-sidebar-expanded) .helion-nav-children .helion-nav-item { padding: 0; }
html:not(.helion-sidebar-expanded) .helion-nav-children .helion-nav-link { justify-content: flex-start; padding: var(--space-2) var(--space-3); }
html:not(.helion-sidebar-expanded) .helion-nav-children .helion-nav-label { opacity: 1; max-width: none; }
.helion-nav-flyout-title { display: none; }
html:not(.helion-sidebar-expanded) .helion-nav-flyout-title { display: block; padding: var(--space-2) var(--space-3) var(--space-2); font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--helion-nav-muted); }
.helion-main {
margin-left: var(--helion-sidebar-current); margin-top: var(--helion-header-height);
max-width: calc(var(--helion-content-max) + (var(--helion-content-gutter) * 2));
/* The gutter is on BOTH sides now. It exists on the left because the active nav pill bleeds
--helion-nav-bleed into this area and content needs clearance beyond normal page padding;
matching it on the right is what stops a full-width page sitting tight against the window
edge. The right side used to be --space-6, which read as off-centre once the content filled
the screen. */
padding: var(--space-5) var(--helion-content-gutter) var(--space-6) var(--helion-content-gutter);
}
/* --- Shared components --- */
/* space-5 between groups against space-2 inside them — a 3:1 ratio. At the old 16px the gap
between two groups was only twice the gap between a label and its own control, which is not
enough separation to read as grouping: the eye saw an evenly spaced stack of small grey lines
rather than four units of label + field + note. The ratio is the point, not the number. */
.helion-field { position: relative; margin-bottom: var(--space-5); }
/* A label and the help text under it were both --helion-muted, and the help text was the LARGER
of the two — the subordinate line outranking its own heading, which left every form reading as
one undifferentiated grey block. The label takes the darker running-copy ink (7.1:1) so the two
levels separate by weight AND colour, and help drops a step below it.
Then a further step: matched at 12px they still read as one texture, because a weight and a
grey are not much to tell two lines apart. The label takes --text-sm and the FULL ink, so the
three levels of a form now differ on every axis available — size, weight and colour — rather
than sharing two of three. Not accent blue: blue is spoken for by links, focus rings and role
chips, and 118 blue labels would spend the accent on the most static text in the product. */
.helion-label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--helion-fg); margin-bottom: var(--space-2); }
/* Fields are RECESSED. Cards sit lighter than the page because lighter reads as raised; a field is
somewhere you put something into, so it goes darker than its container. Same tone-on-tone logic
as the rest of Meridian, inverted — which is what lets the borders go away entirely.
`display: block` matters: textareas and selects are inline-block, so they'd otherwise carry a
baseline descender gap and the focus bar would float below the field. */
.helion-input, .helion-select {
display: block; width: 100%; padding: var(--helion-input-pad-y) var(--helion-input-pad-x);
min-height: var(--helion-input-min-height);
border: none; border-radius: var(--helion-input-radius);
background-color: var(--helion-input-bg); color: var(--helion-fg);
font-size: var(--text-base); font-family: inherit; line-height: 1.45;
}
textarea.helion-input { resize: vertical; min-height: 5rem; }
.helion-input::placeholder { color: var(--helion-muted); }
.helion-input:hover, .helion-select:hover { background-color: var(--helion-input-bg-hover); }
/* Focus lifts the field, stopping short of card tone so the well stays legible — no ring, no shadow. */
.helion-input:focus, .helion-select:focus { outline: none; background-color: var(--helion-input-bg-focus); }
.helion-input:disabled, .helion-select:disabled { opacity: 0.55; cursor: not-allowed; }
/* Native select: strip the OS chrome and supply our own chevron. Inline data: URI rather than an
asset reference so Propshaft has no url() path to rewrite. */
.helion-select {
/* padding-right clears the chevron, which is positioned in px — not a scale step. */
appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
}
/* Signature active state: the brand gradient sweeps across the base of the focused field.
It lives on .helion-field because and