/* Nocturne — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* ── Typography: the live union.ai faces ─────────────────────────────
Yellix (UI) and IBM Plex Mono (code), served from the production site's
own Webflow CDN, which sends `access-control-allow-origin: *`. Replaces
the Inter @import this system shipped with. Weights match what the live
site actually loads: 400/500/600 for Yellix, 400/700 for the mono. */
@font-face { font-family: "Yellix"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd21a73f26db81f180_Yellix-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Yellix"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bddb82800e2bea44362_Yellix-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Yellix"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd3bb86c06d050b493_Yellix-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182fe284c14edec412ca_IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182f3766cd21fbc11742_IBMPlexMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
/* ═══ _shared/union-nocturne.css ═══ */
/* Nocturne — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* ── Typography: the live union.ai faces ─────────────────────────────
Yellix (UI) and IBM Plex Mono (code), served from the production site's
own Webflow CDN, which sends `access-control-allow-origin: *`. Replaces
the Inter @import this system shipped with. Weights match what the live
site actually loads: 400/500/600 for Yellix, 400/700 for the mono. */
@font-face { font-family: "Yellix"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd21a73f26db81f180_Yellix-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Yellix"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bddb82800e2bea44362_Yellix-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Yellix"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd3bb86c06d050b493_Yellix-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182fe284c14edec412ca_IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182f3766cd21fbc11742_IBMPlexMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
/* ═══ _shared/union-nocturne.css ═══ */
/* Nocturne — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* ── Typography: the live union.ai faces ─────────────────────────────
Yellix (UI) and IBM Plex Mono (code), served from the production site's
own Webflow CDN, which sends `access-control-allow-origin: *`. Replaces
the Inter @import this system shipped with. Weights match what the live
site actually loads: 400/500/600 for Yellix, 400/700 for the mono. */
@font-face { font-family: "Yellix"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd21a73f26db81f180_Yellix-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Yellix"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bddb82800e2bea44362_Yellix-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Yellix"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd3bb86c06d050b493_Yellix-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182fe284c14edec412ca_IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182f3766cd21fbc11742_IBMPlexMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
#union-home {
--color-bg: #000000; /* live --_theme---background */
--color-surface: #18191a; /* live --_theme---card */
--color-text: #ffffff; /* live --_theme---heading */
--color-accent: #fcb51f; /* live --_theme---accent */ /* review round 7 (Barron): the accent moves to
the product's blurple — OKLCH hue 289.2, the hue of the app's own Pro
accent (#9a8fe0, --om-accent-pro) — at the same lightness the steel
accent held (L 0.660, so the documented ratios survive) and chroma
in the product blurple's own range (its token sits at C 0.118; the
accent takes 0.125, from the old steel's 0.030):
the accent now reads as an accent rather than another neutral. */
--color-accent-2: #f6c54c; /* the machine-derived stand-in follows: same
hue, same L 0.734, chroma at the same 2:3 proportion it held */
--color-divider: color-mix(in srgb, #ffffff 12%, transparent); /* live --_theme---border */
/* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
same step of any role matches the others in visual value. */
--color-neutral-100: #ffffff;
--color-neutral-200: #f2f3f3; /* live --_brand---gray-100 */
--color-neutral-300: #e3e5e6;
--color-neutral-400: #cccfd1; /* live --_theme---body (paragraphs) */
--color-neutral-500: #aeb2b5;
--color-neutral-600: #81858b; /* live --_brand---gray-350 */
--color-neutral-700: #72757a; /* live --_brand---gray-400 */
--color-neutral-800: #3a3d40;
--color-neutral-900: #18191a; /* live --_brand---dark, the card ground */
--color-accent-100: #fdf4dc;
--color-accent-200: #fbe7b4;
--color-accent-300: #f9d67f;
--color-accent-400: #f6c54c;
--color-accent-500: #fcb51f;
--color-accent-600: #ce9712;
--color-accent-700: #a5780c;
--color-accent-800: #785607;
--color-accent-900: #4c3604;
--color-accent-2-100: #fdf4dc;
--color-accent-2-200: #fbe7b4;
--color-accent-2-300: #f9d67f;
--color-accent-2-400: #f6c54c;
--color-accent-2-500: #fcb51f;
--color-accent-2-600: #ce9712;
--color-accent-2-700: #a5780c;
--color-accent-2-800: #785607;
--color-accent-2-900: #4c3604;
/* Deck section-divider ground — review round 3: saturation as presence.
Dividers take a saturated deep indigo (hue 277, the neutral ramp's own
family; C 0.094 — written when the accent held C 0.030, before the
round-7 blurple raised it past the ground's) with a lighter bloom and
a ghost tint of the same hue, while the slide grounds stay
desaturated. Deck-scale fills only — not interface colors. */
--color-section: #33270a;
--color-section-glow: #6b5109;
--color-section-ghost: #b8860f;
--font-heading: "Yellix", system-ui, sans-serif;
--font-heading-weight: 600; /* live h2/h3 weight */
--font-body: "Yellix", system-ui, sans-serif;
/* The mono face this file already @font-faces above. It used to be declared
in home/style.css only, which meant every other page loading these tokens
resolved var(--font-code) to nothing and rendered code in Yellix. */
--font-code: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--space-1: 2.8px;
--space-2: 5.6px;
--space-3: 8.4px;
--space-4: 11.2px;
--space-6: 16.8px;
--space-8: 22.4px;
/* Rounder than the original Nocturne values, to sit with union.ai's live
system (.5rem / 1rem / 1.5rem). Buttons and pills go fully round below. */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
/* Elevation — derived from the ground: soft ink-tinted shadows on a
light theme, a hairline edge + ambient darkness on a dark one. */
--shadow-sm: 0 0 0 1px rgba(255,255,255,0.06);
--shadow-md: 0 0 0 1px rgba(255,255,255,0.08), 0 6px 18px rgba(0,0,0,0.55);
--shadow-lg: 0 0 0 1px rgba(255,255,255,0.11), 0 16px 40px rgba(0,0,0,0.65);
}
#union-home {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
}
#union-home h1, #union-home h2, #union-home h3, #union-home h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
#union-home code, #union-home pre, #union-home kbd, #union-home samp { font-family: var(--font-code); }
#union-home .lighten {mix-blend-mode:lighten;background-color:transparent}
/* ══════════════════════════════════════════════════════════════════════════
Components — built with the tokens above. Plain CSS
on plain HTML: no JavaScript, no build step. Each class is documented in
readme.md and demonstrated in foundations/ and components/.
══════════════════════════════════════════════════════════════════════ */
#union-home *, #union-home *::before, #union-home *::after { box-sizing: border-box; }
#union-home { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500; }
#union-home h1, #union-home h2, #union-home h3, #union-home h4, #union-home h5, #union-home h6 {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 var(--space-2);
}
#union-home h1 { font-size: 42px; }
#union-home h2 { font-size: 32px; }
#union-home h3 { font-size: 25px; }
#union-home h4 { font-size: 20px; }
#union-home h5 { font-size: 16px; }
#union-home h6 { font-size: 13px; }
#union-home h6 { letter-spacing: 0.08em; text-transform: uppercase; }
#union-home p { margin: 0 0 var(--space-3); }
#union-home a { color: var(--color-accent); text-underline-offset: 3px; }
#union-home img { display: block; max-width: 100%; }
#union-home figure { margin: 0; }
#union-home figcaption {
font-size: 11px; margin-top: var(--space-1);
color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
#union-home .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
#union-home :focus { outline: none; }
#union-home :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#union-home ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
/* — rules — *//* Rules fade to transparent at both ends instead of stopping cleanly — a
Nocturne signature. The ramp is 48px an end (one deck baseline unit),
painted from the same divider token. Freestanding rules fade; box
outlines, in-control separators, and short accent marks stay solid. */
#union-home .hr {
height: 1px; border: 0; margin: var(--space-4) 0;
background: linear-gradient(to right,
transparent, var(--color-divider) 48px,
var(--color-divider) calc(100% - 48px), transparent);
}
/* — buttons — */
#union-home .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
cursor: pointer; text-decoration: none;
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
the pair sits side by side in sign-up rows */
background: transparent; border: 1px solid transparent;
padding: var(--space-2) calc(var(--space-3) * 1.2);
border-radius: 999px;
}
#union-home .btn svg { display: block; }
#union-home .btn:disabled { opacity: 0.45; cursor: not-allowed; }
#union-home .btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
#union-home .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
#union-home .btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
#union-home .btn-secondary { border-color: var(--color-divider); }
#union-home .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
#union-home .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
#union-home .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
#union-home .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
#union-home .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
#union-home .btn-icon { width: 36px; height: 36px; padding: 0; }
#union-home .btn-block { width: 100%; margin-top: var(--space-2); }
/* — forms — */
#union-home .field > label {
display: block; font-size: 12px; margin-bottom: 5px;
color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
#union-home .input {
width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
background: var(--color-surface);
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
#union-home .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
#union-home .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
#union-home textarea.input { min-height: 90px; resize: vertical; }
#union-home .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
#union-home .radio input, #union-home .seg-opt input {
position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
#union-home .radio .dot {
width: 16px; height: 16px; flex: none; border-radius: 50%;
border: 1.5px solid var(--color-divider);
}
#union-home .radio:hover .dot { border-color: var(--color-accent); }
#union-home .radio input:checked + .dot {
border-color: var(--color-accent); background: var(--color-accent);
box-shadow: inset 0 0 0 4px var(--color-bg);
}
#union-home .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#union-home .seg {
display: inline-flex; overflow: hidden;
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
#union-home .seg-opt {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; font-size: 14px; cursor: pointer;
}
#union-home .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
#union-home .seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
#union-home .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
#union-home .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* — cards — */
#union-home .card {
display: flex; flex-direction: column; gap: var(--space-2);
padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
#union-home .card-kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
#union-home .card-title {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 19px; line-height: 1.2;
}
#union-home .card-body { margin: 0; font-size: 15.5px; opacity: 0.8; flex: 1; }
#union-home .card-meta {
display: flex; align-items: center; gap: 6px; font-size: 11px;
color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
#union-home .elev-sm { box-shadow: var(--shadow-sm); }
#union-home .elev-md { box-shadow: var(--shadow-md); }
#union-home .elev-lg { box-shadow: var(--shadow-lg); }
/* — tags — */
#union-home .tag {
display: inline-flex; align-items: center; font-size: 11px;
letter-spacing: 0.02em; padding: 3px 10px;
border-radius: calc(var(--radius-md) * 0.75);
}
#union-home .tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
#union-home .tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
#union-home .tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
#union-home .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
/* — navigation — */
#union-home .nav {
display: flex; align-items: center; gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border-bottom: none;
}
#union-home .nav-brand {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 18px; margin-right: auto;
}
#union-home .nav a { color: inherit; text-decoration: none; font-size: 15.5px; }
#union-home .nav a:hover, #union-home .nav a[aria-current='page'] { color: var(--color-accent); }
/* Docs moved out of the centre group to sit beside the CTA. It is a utility
exit rather than a section of the site, so it reads a step quieter than the
items it used to sit among — but only a step: it is still a nav link, and it
still goes accent on hover like its neighbours. */
#union-home .nav a.nav-utility { color: var(--color-neutral-500); }
#union-home .nav a.nav-utility:hover { color: var(--color-accent); }
/* — tables — */
#union-home .table { width: 100%; border-collapse: collapse; font-size: 14px; }
#union-home .table th {
text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: color-mix(in srgb, var(--color-text) 60%, transparent);
padding: var(--space-2); border-bottom: 1px solid transparent; /* keeps layout; the row paints the fading rule */
}
#union-home .table td {
padding: var(--space-2);
border-bottom: 1px solid transparent;
}
/* Row rules as row-level strips so the end-fade spans the row, not each cell. */
#union-home .table thead tr {
background: linear-gradient(to right,
transparent, var(--color-divider) 48px,
var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
#union-home .table tbody tr {
background: linear-gradient(to right,
transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
#union-home .table tbody tr:hover {
/* the hover tint layers over the row rule, which keeps painting */
background:
linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
linear-gradient(to right,
transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
/* — dialog — */
#union-home .dialog-backdrop {
position: fixed; inset: 0; display: grid; place-items: center;
padding: var(--space-4);
background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
#union-home .dialog {
width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-4); border-radius: var(--radius-lg);
background: var(--color-surface); box-shadow: var(--shadow-lg);
}
#union-home .dialog-title {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 20px;
}
#union-home .dialog-body { font-size: 14px; opacity: 0.85; }
#union-home .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
/* ═══ _shared/union-code-theme.css ═══ *//* union-code-theme.css — syntax highlighting for every code block in website/union/.
Tokens lifted verbatim from ../../color-palette/union-code-theme.css
("Union Yellow Dark" v1). That file is the source of truth: if the palette
changes, re-copy sections 1 and 1c below rather than editing them here.
Every token meets WCAG AA (4.5:1) on its own card background in both themes.
Section 2 maps the tokens onto the class names the prototypes already use:
.tok-* model-factory, advanced-scheduling
.sov-tok-* sovereign-ai
.code-* home (emitted by script.js)
*//* ── 1. Tokens ─────────────────────────────────────────────────────────── */
#union-home {
/* surface */
--code-bg: #18191a; /* = --brand-dark, the design-system card */
--code-border: #ffffff1f;/* = --theme-border */
--code-radius: 1rem; /* = --radius-medium */
/* neutrals — carry ~70% of the characters in a snippet */
--code-fg: #e6e8ea; /* identifiers, variables, plain text */
--code-param: #c9ced4; /* keyword-argument + parameter names */
--code-punct: #9aa0a6; /* = -> , : ( ) [ ] and all operators */
--code-comment: #848c95; /* italic — the quietest token */
/* accents — four hues, nothing else */
--code-decorator: #fdb51f; /* Union Yellow · @env.task, @flyte.trace */
--code-keyword: #b69bf5; /* async def await return try except for */
--code-constant: #b69bf5; /* None True False self cls (italic) */
--code-function: #74b6f2; /* function definitions + call sites */
--code-class: #5fcbc0; /* classes, type annotations, builtins */
--code-string: #8fcb7a; /* string + f-string literals */
--code-number: #ef9b55; /* numeric literals */
/* console / diff extras (terminal blocks, +/- blocks) */
--code-error: #e8676a;
--code-added: #8fcb7a;
--code-removed: #e8676a;
--code-muted: #848c95;
/* chrome */
--code-selection: rgba(253, 181, 31, .22);
--code-line-highlight:rgba(253, 181, 31, .08);
--code-inline-bg: #242628;
--code-scrollbar: #3a3d40;
}
/* ── 1c. Light theme ───────────────────────────────────────────────────────
union.ai ships one code palette for both themes today. Union Yellow cannot
carry a token on a light card (1.7:1) — at AA-legible lightness the brand
warm reads as amber, not yellow — so the light theme keeps the same *roles*
and swaps in a saturated 600/700-weight hue for each.
The card goes WHITE here, not --brand-gray-100: white buys ~11% more
contrast than #F2F3F3, and that headroom is what lets these hues stay
vivid instead of collapsing into browns. Put the page's light gray behind
the card so it still reads as a card. Every value below passes AA on
#FFFFFF; on a #F2F3F3 card, amber/green/blue/comment land at 4.3–4.7 and
only the decorator and comment miss AA outright. */
#union-home .u-theme-light {
--code-bg: #ffffff;
--code-fg: #111418;
--code-param: #374151;
--code-punct: #565e66;
--code-comment: #6b7280;
--code-decorator: #a16207; /* amber — the light-theme stand-in for Union Yellow */
--code-keyword: #6d28d9;
--code-function: #2563eb;
--code-constant: #6d28d9;
--code-class: #0f766e;
--code-string: #15803d;
--code-number: #c2410c;
--code-error: #dc2626;
--code-added: #15803d;
--code-removed: #dc2626;
--code-inline-bg: #f2f3f3;
--code-border: #0000001a;
}
/* ── 1b. The code surface ──────────────────────────────────────────────── */
#union-home pre, #union-home pre code, #union-home .w-richtext pre {
background-color: var(--code-bg);
color: var(--code-fg);
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .875rem; /* 14px */
line-height: 1.7;
font-variant-ligatures: none;
tab-size: 4;
}
#union-home pre {
border: 1px solid var(--code-border);
border-radius: var(--code-radius);
padding: 1.5rem;
overflow-x: auto;
}
#union-home pre ::selection, #union-home pre::selection { background: var(--code-selection); }
#union-home pre::-webkit-scrollbar-thumb { background: var(--code-scrollbar); border-radius: 4px; }
/* inline `code` inside body copy */
#union-home :not(pre) > code {
background-color: var(--code-inline-bg);
border: 1px solid var(--code-border);
border-radius: .375rem;
padding: .1em .4em;
color: var(--code-fg);
font-size: .9em;
}
/* ── 2. Prototype class mappings ───────────────────────────────────────── *//* shared code surface */
#union-home .tok-kw, #union-home .sov-tok-kw, #union-home .code-kw { color: var(--code-keyword); }
#union-home .tok-str, #union-home .sov-tok-str, #union-home .code-str { color: var(--code-string); }
#union-home .tok-title, #union-home .sov-tok-title, #union-home .code-title { color: var(--code-function); }
#union-home .tok-param, #union-home .code-param { color: var(--code-param); }
#union-home .tok-meta, #union-home .sov-tok-meta, #union-home .code-meta { color: var(--code-decorator); }
#union-home .tok-comment, #union-home .code-comment { color: var(--code-comment); font-style: italic; }
#union-home .tok-num, #union-home .sov-tok-num, #union-home .code-num { color: var(--code-number); }
#union-home .tok-class, #union-home .sov-tok-class, #union-home .code-class { color: var(--code-class); }
#union-home .code-punct { color: var(--code-punct); }
#union-home .code-plain { color: var(--code-fg); }
/* the light theme is opt-in: add .u-theme-light to a code block's container *//* ═══ home/style.css ═══ *//* Union.ai home redesign — page styles.
Load order: union.css (design system) first, then this file.
Classes ABOVE the banner are plain component classes a Webflow Designer
can rebuild directly. Everything BELOW the banner (keyframes, media
queries, pseudo-states, attribute selectors) goes into an HTML Embed. *//* ── logo marquee ─────────────────────────────────────────────── */
#union-home .marquee-mask {
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}
#union-home .marquee-track {
display: flex; gap: 56px; align-items: center; width: max-content;
animation: marquee 48s linear infinite; padding-right: 56px;
}
#union-home .marquee-logo { height: 24px; width: auto; opacity: 0.55; filter: grayscale(1) brightness(0) invert(1); }
/* ── accent CTAs (extracted from style-hover / style-active) ──── */
#union-home .cta-accent { background: var(--color-accent); border: 1px solid var(--color-accent); color: #000; }
#union-home .cta-gold { background: #fcb51f; border: 1px solid #fcb51f; color: #000; }
/* ── segmented pill toggles (wf picker, ranges, sub-tabs) ─────── */
#union-home .seg-pill {
cursor: pointer; font-family: inherit; font-size: 12.5px;
padding: 5px 16px; border-radius: 999px; border: 0; white-space: nowrap;
background: transparent; color: var(--color-neutral-400);
}
#union-home .seg-pill.on { background: var(--color-neutral-700); color: var(--color-neutral-100); }
/* ── "Break it with" scenario chips ───────────────────────────── */
#union-home .chip-danger {
cursor: pointer; font-family: inherit; padding: 4px 11px;
border-radius: 999px; white-space: nowrap; font-size: 13px;
background: transparent; border: 1px solid rgba(214, 92, 82, 0.4); color: #c98f89;
}
#union-home .chip-danger.on { background: rgba(214, 92, 82, 0.18); border-color: #d65c52; color: #f0a29a; }
/* ── demo persona tabs ────────────────────────────────────────── */
#union-home .demo-tab {
cursor: pointer; font-family: inherit; text-align: left;
padding: 12px 18px; border-radius: var(--radius-md);
border: 1px solid var(--color-divider); background: var(--color-surface);
min-width: 210px;
}
#union-home .demo-tab-title { font-size: 15px; color: var(--color-neutral-200); font-weight: 500; }
#union-home .demo-tab-sub { font-size: 11.5px; color: var(--color-neutral-500); margin-top: 2px; }
#union-home .demo-tab.on { background: color-mix(in srgb, var(--color-accent) 11%, transparent); border-color: var(--color-accent); }
#union-home .demo-tab.on .demo-tab-title { color: var(--color-accent-300); }
/* ── dropdown menu options (hero cloud pickers, language picker) ─ */
#union-home .menu-opt {
cursor: pointer; font-family: inherit; text-align: left;
border: 0; border-radius: var(--radius-sm);
background: transparent; color: var(--color-neutral-300);
}
#union-home .menu-opt.on { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-300); }
#union-home .menu-opt.disabled { color: var(--color-neutral-600); cursor: not-allowed; }
/* ── icon button (mobile nav toggle) ──────────────────────────── */
#union-home .icon-btn {
cursor: pointer; font-family: inherit; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; border-radius: 999px;
border: 1px solid var(--color-divider); background: transparent;
color: var(--color-neutral-200);
}
/* ── pillar segments: the "learn more" footer + capability chip row ──
Added when the home page was restructured into four platform pillars.
Each pillar shows one widget, then links to its platform page. */
#union-home .pillar-more {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 10px 18px; margin-top: 34px; text-align: center;
}
#union-home .pillar-more_btn { font-size: 14.5px; }
#union-home .pillar-more_sub { font-size: 14.5px; color: var(--color-neutral-500); }
#union-home .pillar-caps {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
#union-home .pillar-cap {
display: flex; flex-direction: column; gap: 4px;
padding: 16px 18px;
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
text-decoration: none; color: inherit; /* now links into ../model-factory/ */
}
#union-home .pillar-cap:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#union-home .pillar-cap:hover .pillar-cap_n { color: var(--color-accent); }
#union-home .pillar-cap_n { font-size: 14px; font-weight: 600; color: var(--color-text); }
#union-home .pillar-cap_d { font-size: 14px; color: var(--color-neutral-500); text-wrap: pretty; }
/* ══════════════════════════════════════════════════════════════
FIGMA "Home — Redesign" (L1U2YQLR…, page 14:8) — layout system.
1440 artboard, 64px gutters, 1312 content. Capability rows are a
520 / 704 split with an 88px gap, alternating sides and grounds.
══════════════════════════════════════════════════════════════ */
#union-home .u-wrap { max-width: 1440px; margin: 0 auto; padding-left: clamp(20px,4.4vw,64px); padding-right: clamp(20px,4.4vw,64px); }
#union-home .fig-sec { padding-top: clamp(56px,9vw,130px); padding-bottom: clamp(56px,9vw,130px); }
#union-home .fig-sec.is-alt { background: #0c0c0d; }
/* ── 01 hero: centred, single column ──────────────────────────── *//* ── 01 hero: copy left, architecture diagram right ───────────── *//* the hero stretches to fill the fold, sized so the trust strip clears it and
"How teams own their AI stack" peeks in at the bottom edge */
#union-home .fig-hero { min-height: calc(100svh - 415px); display: flex; align-items: center;
padding-top: clamp(24px,3vh,48px); padding-bottom: clamp(24px,3vh,48px); }
#union-home .fig-hero > .u-wrap { width: 100%; }
#union-home .fig-hero_row { display: flex; flex-wrap: wrap; gap: clamp(24px,4vw,48px); align-items: center; justify-content: space-between; }
#union-home .fig-hero_copy { flex: 0 1 540px; min-width: 0; max-width: 540px; }
#union-home .fig-hero_h1 { font-size: clamp(34px,5.2vw,58px); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 18px; text-wrap: balance; }
#union-home .fig-hero_sub { font-size: clamp(16.5px,1.5vw,19px); line-height: 1.58; color: var(--color-neutral-400); max-width: 600px; margin: 0 0 26px; text-wrap: pretty; }
#union-home .fig-hero_ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
#union-home .fig-hero_visual { flex: 1 1 400px; min-width: 0; max-width: 100%; }
/* ── 02 trust strip ───────────────────────────────────────────── */
#union-home .fig-trust { padding-top: clamp(20px,2.6vh,36px); padding-bottom: clamp(36px,5vh,64px); }
#union-home .fig-trust_label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-600); text-align: center; margin-bottom: 32px; }
/* ── 03 section intro: centred pair ───────────────────────────── */
#union-home .fig-intro { padding-top: clamp(48px,6vh,72px); padding-bottom: clamp(24px,4vw,60px); text-align: center; }
#union-home .fig-intro_h2 { font-size: clamp(28px,4.6vw,56px); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 18px; text-wrap: balance; }
#union-home .fig-intro_sub { font-size: clamp(16px,1.6vw,19px); line-height: 1.6; color: var(--color-neutral-400); max-width: 700px; margin: 0 auto; text-wrap: pretty; }
#union-home .fig-intro .cap-grid { text-align: left; margin-top: clamp(40px,5.5vw,72px); }
/* ── 03.1–03.6 capability rows ────────────────────────────────── *//* the comp splits 520/704; these widgets are taller than its 470px placeholders,
so the visual takes more of the 1312 and gets correspondingly shorter */
#union-home .fig-row { display: grid; grid-template-columns: minmax(0,420fr) minmax(0,804fr); gap: clamp(28px,5.2vw,88px); align-items: center; }
/* `order` moves items between grid CELLS, so a flipped row has to swap the
track widths too — otherwise the visual lands in the narrow column */
#union-home .fig-row.is-flip { grid-template-columns: minmax(0,804fr) minmax(0,420fr); }
#union-home .fig-row.is-flip .fig-copy { order: 2; }
#union-home .fig-row.is-flip .fig-visual { order: 1; }
#union-home .fig-row.is-wide-copy { grid-template-columns: minmax(0,480fr) minmax(0,776fr); align-items: start; }
/* the run-recovery demo is the densest widget on the page — it gets an extra
60px of track and is scaled down a notch so the panes stop feeling cramped */
#union-home .fig-row.is-roomy { grid-template-columns: minmax(0,360fr) minmax(0,864fr); }
#union-home .fig-row.is-roomy.is-flip { grid-template-columns: minmax(0,864fr) minmax(0,360fr); }
#union-home .fig-visual #panel-run { zoom: 0.92; }
/* stacked, the queue widget runs tall — scale it back so the section fits */
#union-home .fig-visual #home-algo { zoom: 0.75; }
/* the run panel was authored full-width; in the column it reads oversized */
#union-home .fig-visual .sov-run { zoom: 0.85; }
/* the observability panels carry a full report page — same treatment */
#union-home .fig-visual #panel-reports, #union-home .fig-visual #panel-health, #union-home .fig-visual #panel-cost { zoom: 0.95; }
/* the report's smallest type was authored for a full-width section; in the
column it needs a touch more size to stay readable */
#union-home .fig-visual .rep_stat_v { font-size: 23px; }
#union-home .fig-visual .rep_stat_k, #union-home .fig-visual .rep_stat_d { font-size: 12.5px; }
#union-home .fig-visual .rep_objective p { font-size: 14px; }
#union-home .fig-visual .rep_charttitle { font-size: 14px; }
#union-home .fig-visual .rep_note { font-size: 13.5px; }
/* the run console changed height when you switched tabs, which shoved the rest
of the section around. Stack every pane in one grid cell so the box is always
as tall as the tallest pane, and hide the inactive ones without removing them
from layout. */
#union-home .sov-run_body { display: grid; }
#union-home .sov-run_body > .sov-run_pane { grid-area: 1 / 1; display: block; }
#union-home .sov-run_body > .sov-run_pane:not(.is-active) { visibility: hidden; pointer-events: none; }
#union-home .fig-copy { min-width: 0; }
#union-home .fig-visual { min-width: 0; }
#union-home .fig-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
#union-home .fig-eyebrow_n { font-size: 13px; letter-spacing: 0.06em; color: var(--color-neutral-600); }
#union-home .fig-eyebrow_rule { display: block; width: 24px; height: 1px; background: var(--color-neutral-800); }
#union-home .fig-label { font-size: 15px; font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 18px; }
#union-home .fig-h2 { font-size: clamp(27px,3.9vw,52px); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 22px; text-wrap: balance; }
#union-home .fig-lead { font-size: clamp(16px,1.6vw,19px); line-height: 1.62; color: var(--color-neutral-400); margin: 0 0 26px; text-wrap: pretty; }
#union-home .fig-points { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
#union-home .fig-points li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.6; color: var(--color-neutral-300); text-wrap: pretty; }
#union-home .fig-points li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
#union-home .fig-link { display: inline-block; font-size: 15px; font-weight: 500; color: var(--color-accent); text-decoration: none; }
#union-home .fig-cap { margin-top: 18px; display: flex; flex-direction: column; gap: 5px; }
#union-home .fig-cap_t { font-size: 15.5px; font-weight: 600; color: var(--color-neutral-200); }
#union-home .fig-cap_d { font-size: 14.5px; line-height: 1.55; color: var(--color-neutral-500); text-wrap: pretty; }
/* ── 04 proof ─────────────────────────────────────────────────── */
#union-home .fig-proof { text-align: center; }
#union-home .fig-proof .proof-grid { margin-top: clamp(32px,4.5vw,56px); text-align: left; }
#union-home .fig-proof_foot { margin: clamp(28px,4vw,44px) 0 0; text-align: center; font-size: 15px; color: var(--color-neutral-500); text-wrap: pretty; }
/* ── 06 write workflows natively + integrations ───────────────── */
#union-home .fig-native_repo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
#union-home .fig-integ_head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: clamp(48px,7vw,96px); }
#union-home .fig-integ_h2 { font-size: clamp(19px,2.2vw,26px); line-height: 1.3; letter-spacing: -0.015em; margin: 0; }
#union-home .fig-integ_grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; margin-top: clamp(24px,3.4vw,40px); }
#union-home .fig-integ_grid > * { min-width: 0; }
/* ── 07 closing CTA: the yellow block ─────────────────────────── */
#union-home .fig-cta { background: var(--color-accent); color: #0b0b0c; padding-top: clamp(56px,8vw,120px); padding-bottom: clamp(40px,5vw,64px); text-align: center; }
#union-home .fig-cta_h2 { font-size: clamp(30px,5.2vw,64px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 24px; color: #0b0b0c; text-wrap: balance; }
#union-home .fig-cta_lead { font-size: clamp(16px,1.8vw,21px); line-height: 1.6; color: rgba(11,11,12,0.78); max-width: 680px; margin: 0 auto 30px; text-wrap: pretty; }
#union-home .fig-cta_btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
#union-home .fig-cta_btn { background: #0b0b0c; border: 1px solid #0b0b0c; color: var(--color-accent); border-radius: 999px; padding: 14px 28px; font-size: 16px; white-space: nowrap; }
#union-home .fig-cta_btn.is-ghost { background: transparent; border-color: rgba(11,11,12,0.35); color: #0b0b0c; }
#union-home .fig-roi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: clamp(40px,5.5vw,72px); padding-top: clamp(24px,3vw,36px); border-top: 1px solid rgba(11,11,12,0.2); text-align: left; }
#union-home .fig-roi_text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#union-home .fig-roi_h { font-size: clamp(17px,1.9vw,22px); font-weight: 600; letter-spacing: -0.015em; color: #0b0b0c; }
#union-home .fig-roi_p { font-size: 15px; color: rgba(11,11,12,0.7); text-wrap: pretty; }
/* ══════════════════════════════════════════════════════════════
WEBFLOW: paste into an Embed (or the page ) — the Designer
can't express keyframes, media queries, pseudo-states, or
attribute selectors.
══════════════════════════════════════════════════════════════ */
#union-home { max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#union-home { margin: 0; max-width: 100%; background: var(--color-bg); overflow-x: clip; }
#union-home img, #union-home svg, #union-home select { max-width: 100%; }
#union-home select.input { -webkit-appearance: none; appearance: none; color: var(--color-neutral-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23eceae4' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 7px; padding-right: 30px !important; }
#union-home select.input option { background: var(--color-surface); color: var(--color-neutral-100); }
#union-home { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
#union-home { scroll-behavior: auto; }
}
#union-home { font-size: 17px; }
/* Content links only. The accent CTAs are s, and a bare `a:hover` (0-1-1)
outranks `.cta-accent` (0-1-0) — which repainted the Sign Up label
accent-300 on hover: pale yellow on the accent-400 hover fill, about
1.1:1. The buttons also pin their own colours below, so the fix survives
the Webflow port, where the host site has link rules of its own. */
#union-home a { color: var(--color-accent); }
#union-home a:hover:not(.cta-accent):not(.cta-gold) { color: var(--color-accent-300); }
#union-home pre, #union-home code, #union-home .mono { font-family: var(--font-code); }
/* keyframes */
@keyframes runpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes dotpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 143, 217, 0.55); } 50% { box-shadow: 0 0 0 5px rgba(91, 143, 217, 0); } }
@keyframes langswap { from { opacity: 0; transform: translateY(0.32em); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes coderise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#union-home .bar-running { animation: runpulse 1.1s ease-in-out infinite; }
#union-home .dot-active { animation: dotpulse 1.4s ease-out infinite; }
#union-home .caret { animation: blink 1s step-end infinite; }
#union-home .chip-anim { animation: langswap 420ms cubic-bezier(0.22, 0.8, 0.2, 1); }
#union-home .code-rise { animation: coderise 380ms cubic-bezier(0.22, 0.8, 0.2, 1); }
/* pseudo-state rules extracted from style-hover / style-active /
style-focus-visible attributes in the design export *//* the fill lightens on hover (correct on this dark ground); the label must
stay dark — 11.6:1 on the hover fill, 7.2:1 on the pressed one */
#union-home .cta-accent:hover { background: var(--color-accent-400); border-color: var(--color-accent-400); color: #000; }
#union-home .cta-accent:active { background: var(--color-accent-600); border-color: var(--color-accent-600); color: #000; }
#union-home .cta-gold:hover { background: #e0a316; border-color: #e0a316; color: #000; }
#union-home .cta-gold:active { background: #c89214; border-color: #c89214; color: #000; }
#union-home .hov-accent-bd:hover { border-color: var(--color-accent); }
#union-home .fv-accent:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#union-home .menu-opt:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
#union-home .chip-danger:hover { border-color: var(--color-accent); }
#union-home .demo-tab:hover { border-color: var(--color-accent); }
/* responsive behavior (mobile nav + mobile demo selects) */
#union-home [data-nav-links] { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); flex-wrap: wrap; }
#union-home [data-nav-toggle] { display: none; }
#union-home [data-demo-selects] { display: none; }
#union-home [data-demo-tabsel] { display: none; }
#union-home [data-obs-tabsel] { display: none; }
@media (max-width: 860px) {
#union-home [data-nav-toggle] { display: inline-flex; }
#union-home [data-nav-links] { display: none; order: 3; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 0 2px; }
#union-home [data-nav-links][data-open="1"] { display: flex; }
#union-home [data-demo-code] { display: none !important; }
#union-home [data-demo-picks] { display: none !important; }
#union-home [data-demo-selects] { display: flex !important; }
#union-home [data-demo-tabs] { display: none !important; }
#union-home [data-demo-tabsel] { display: block !important; }
#union-home [data-obs-tabs] { display: none !important; }
#union-home [data-obs-tabsel] { display: block !important; }
#union-home header h1 { font-size: clamp(24px, 8vw, 36px) !important; line-height: 1.07 !important; }
#union-home header > div > div > p { font-size: 15px !important; max-width: 100% !important; }
#union-home h2 { font-size: 25px !important; }
#union-home [data-code-line] { font-size: 11.5px !important; line-height: 1.7 !important; padding-left: 12px !important; padding-right: 12px !important; }
#union-home .mono { font-size: 11.5px !important; line-height: 1.7 !important; }
#union-home [data-wf-row] { grid-template-columns: 128px 1fr 0 !important; gap: 8px !important; }
#union-home [data-wf-grid] { left: 136px !important; right: 8px !important; }
}
/* ══════════════════════════════════════════════════════════════════════
SOVEREIGN AI + AI FACTORY + APPS — merged in from the
union/sovereign-ai, union/model-factory and flyte/home prototypes.
Those pages were authored against union-system.css (the live Webflow
bundle: Yellix, #000 ground, #fcb51f accent). This page runs on the
Nocturne system in union.css. Rather than rewrite every declaration,
the bridge below re-points the union-system token names at Nocturne
values, so the ported rules stay diffable against their source files.
Everything in this block is embed-only (SVG styles, pseudo-states,
keyframes, media queries).
═════════════════════════════════════════════════════════════════════ */
#union-home {
/* union-system → Nocturne token bridge */
--theme-background: var(--color-bg);
--theme-heading: var(--color-neutral-100);
--theme-body: var(--color-neutral-300);
--theme-accent: var(--color-accent);
--theme-border: var(--color-divider);
--theme-card: var(--color-neutral-900);
--brand-gray-100: var(--color-neutral-100);
--brand-gray-300: var(--color-neutral-300);
--brand-gray-350: var(--color-neutral-500);
--brand-gray-400: var(--color-neutral-500);
--brand-yellow-500: var(--color-accent);
--brand-green: #58b97a;
--brand-orange: #f0923f;
--brand-red: #e07b73;
--brand-purple: #a678f5;
/* --font-code now comes from ../_shared/union-nocturne.css */
--radius-small: 8px;
--radius-medium: 12px;
--radius-large: 20px;
/* code-token colors, matching the palette script.js already renders with */
}
/* ── section eyebrow (shared by every merged section) ───────────── */
#union-home .sec-kicker {
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--color-accent); margin-bottom: 12px;
}
#union-home .text-code { font-family: var(--font-code); font-size: .9em; color: var(--color-neutral-100); }
#union-home .hide { display: none; }
#union-home .zt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) {
#union-home .zt-grid { grid-template-columns: 1fr; }
}
/* ── app tabs (from flyte/home) ─────────────────────────────────── */
#union-home .app-tab { font: inherit; font-size: 12.5px; padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--color-neutral-400); white-space: nowrap; transition: background 0.18s ease, color 0.18s ease; }
#union-home .app-tab.on { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-300); }
#union-home .app-tab:hover { color: var(--color-text); }
/* ── model-factory showcase rows: text one side, console the other ── */
#union-home .mf-rows { display: flex; flex-direction: column; row-gap: clamp(48px, 6vw, 72px); }
#union-home .mf-row { display: grid; grid-template-columns: 1fr 1.7fr; align-items: center; column-gap: clamp(24px, 3.5vw, 48px); }
#union-home .mf-row.is-flip { grid-template-columns: 1.7fr 1fr; }
#union-home .mf-row_media { background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
#union-home .mf-row_body { min-width: 0; }
/* ── governance band ────────────────────────────────────────────── */
#union-home .sov-govern { border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-bg); padding: clamp(24px, 3vw, 34px); }
#union-home .sov-govern_row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px 36px; }
#union-home .sov-govern_item { display: flex; flex-direction: column; row-gap: 4px; }
#union-home .sov-govern_key { color: var(--color-accent); font-family: var(--font-code); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; }
#union-home .sov-govern_val { color: var(--color-neutral-300); font-size: 14.5px; }
@media (max-width: 900px) {
#union-home .mf-row, #union-home .mf-row.is-flip { grid-template-columns: 1fr; row-gap: 22px; }
#union-home .mf-row_media { order: -1; }
#union-home .r-split { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
#union-home .r-split > div[style*="order:2"] { order: 0 !important; }
#union-home .r-split > div[style*="order:1"] { order: 1 !important; }
}
/* ─────────── ported from union/sovereign-ai/style.css ─────────── *//* ---- (A) hero AI-factory widget ---- *//* The SVG is generated by initHeroFactory(); everything typographic lives
here so the drawing inherits the page's fonts and neutrals rather than
baking them into the renderer. Font sizes are in viewBox user units, so
they scale with the illustration exactly like the geometry does. *//* No card: the drawing sits straight on the page ground so the building
gets the whole column instead of paying for a frame and its padding. */
#union-home .fig-factory { overflow: visible; }
/* Stacked under the copy, the hero row's gap bottoms out at its 24px clamp
and the plane's top corner ends up crowded against the CTAs. Only the
narrow layout needs it — beside the copy the drawing is vertically
centred and has room already. */
#union-home .fig-factory.is-compact { padding-top: 28px; }
#union-home .fig-factory_stage { display: block; min-height: 1px; }
#union-home .fig-factory_stage svg { display: block; width: 100%; height: auto; }
#union-home .fig-factory_leader { fill: none; stroke: var(--color-neutral-700); stroke-width: 1; }
#union-home .fig-factory_anchor { fill: var(--color-neutral-100); stroke: var(--color-bg); }
/* font-size and letter-spacing are written by initHeroFactory() as
attributes, scaled to the render width — do not set them here, a CSS
rule beats a presentation attribute and would pin the type to one size. */
#union-home .fig-factory_lt { font-family: var(--font-code); fill: var(--color-neutral-100); }
#union-home .fig-factory_ls { font-family: var(--font-body); fill: var(--color-neutral-500); }
/* ── narrow containers ──
Below 560px the three context labels leave the SVG (initHeroFactory
filters them out and sets .is-compact) and reappear here as captions.
Their leader lines are laid out in screen units, so at phone widths they
ate more of the viewBox than the building did. */
#union-home .fig-factory_caps { display: none; }
#union-home .fig-factory.is-compact .fig-factory_caps { display: grid; gap: 7px; margin: 14px 2px 2px; }
#union-home .fig-factory_cap { display: flex; align-items: baseline; gap: 8px; font-size: 12px; line-height: 1.4; }
#union-home .fig-factory_cap i {
flex: none; width: 8px; height: 8px; border-radius: 2px;
transform: translateY(-1px); background-color: var(--color-neutral-700);
}
#union-home .fig-factory_cap i.is-union { background-color: var(--color-accent); }
/* The raw-data swatch is the one legend entry standing for something that
moves, so it marches instead of sitting still: a repeating radial-gradient
of dots stepped exactly one tile per cycle, which loops seamlessly and
mirrors the mote stream feeding the entry portal. Background-position is
compositor-friendly, so this costs nothing next to the canvas beside it.
Keyframes stay UNSCOPED — an @keyframes name is global and scoping the
block breaks it. */
#union-home .fig-factory_cap i.is-raw {
background-color: transparent;
background-image: radial-gradient(circle at 1.5px 50%, var(--color-neutral-400) 1.4px, transparent 1.6px);
background-size: 4px 100%;
background-repeat: repeat-x;
animation: fig-factory-stream 900ms linear infinite;
}
@keyframes fig-factory-stream { from { background-position-x: 0; } to { background-position-x: 4px; } }
@media (prefers-reduced-motion: reduce) {
#union-home .fig-factory_cap i.is-raw { animation: none; }
}
#union-home .fig-factory_cap-k {
font-family: var(--font-code); font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; color: var(--color-neutral-100); white-space: nowrap;
}
#union-home .fig-factory_cap-v { color: var(--color-neutral-500); }
/* ---- (B) run page recreation ---- */
#union-home .sov-run {
max-width: 56rem;
background-color: var(--theme-card);
border: 1px solid var(--theme-border);
border-radius: var(--radius-medium);
overflow: visible;
font-family: var(--font-body);
}
#union-home .sov-run_topbar { padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--theme-border); }
#union-home .sov-run_title-row { display: flex; align-items: center; column-gap: .75rem; flex-wrap: wrap; }
#union-home .sov-run_title { color: var(--color-neutral-100); font-weight: 600; font-size: 1.125rem; }
#union-home .sov-run_status { color: var(--brand-green); border: 1px solid color-mix(in srgb, var(--brand-green) 45%, transparent); background-color: color-mix(in srgb, var(--brand-green) 12%, transparent); border-radius: var(--radius-large); font-size: .75rem; padding: .2rem .625rem; }
#union-home .sov-run_chip { color: var(--brand-gray-300); border: 1px solid var(--theme-border); border-radius: var(--radius-large); font-size: .75rem; padding: .2rem .625rem; }
#union-home .sov-run_meta { color: var(--brand-gray-400); font-family: var(--font-code); font-size: .75rem; margin-top: .5rem; }
#union-home .sov-run_tabs { display: flex; column-gap: .25rem; padding: .625rem 1rem; border-bottom: 1px solid var(--theme-border); overflow-x: auto; }
#union-home .sov-run_tab { color: var(--brand-gray-400); font-size: .8125rem; padding: .375rem .75rem; border-radius: var(--radius-small); white-space: nowrap; cursor: pointer; }
#union-home .sov-run_tab:hover { color: var(--color-neutral-100); }
#union-home .sov-run_tab.is-active { color: var(--color-neutral-100); background-color: var(--color-bg); border: 1px solid var(--theme-border); }
#union-home .sov-run_body { padding: 1.5rem; }
#union-home .sov-run_pane { display: none; }
#union-home .sov-run_pane.is-active { display: block; }
#union-home .sov-run_progress-row { display: flex; justify-content: space-between; font-size: .75rem; margin-bottom: .375rem; }
#union-home .sov-run_progress-label.is-setup { color: #a678f5; }
#union-home .sov-run_progress-label.is-ok { color: var(--brand-green); }
#union-home .sov-run_progress { display: flex; column-gap: .375rem; margin-bottom: 2rem; }
#union-home .sov-run_progress-setup { height: .375rem; width: 12%; border-radius: 999px; background-color: #a678f5; }
#union-home .sov-run_progress-main { height: .375rem; flex: 1; border-radius: 999px; background-color: var(--brand-green); }
#union-home .sov-run_io-head { display: flex; align-items: center; column-gap: .5rem; margin-bottom: .625rem; }
#union-home .sov-run_io-title { color: var(--color-neutral-100); font-weight: 600; font-size: .9375rem; }
#union-home .sov-run_lock {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem; height: 2rem;
border-radius: 50%;
color: var(--brand-yellow-500);
background-color: color-mix(in srgb, var(--brand-yellow-500) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--brand-yellow-500) 55%, transparent);
box-shadow: 0 0 10px rgba(252, 181, 31, .35);
cursor: pointer;
transition: background-color .2s, border-color .2s, box-shadow .2s;
}
#union-home .sov-run_lock::after {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
border: 1px solid var(--brand-yellow-500);
animation: sov-lock-ping 2.4s ease-out infinite;
pointer-events: none;
}
#union-home .sov-run_lock > svg { width: 15px; height: 15px; animation: sov-lock-pulse 2.4s ease-in-out infinite; transition: transform .2s; }
#union-home .sov-run_lock:hover { background-color: color-mix(in srgb, var(--brand-yellow-500) 22%, transparent); border-color: var(--brand-yellow-500); box-shadow: 0 0 16px rgba(252, 181, 31, .55); }
#union-home .sov-run_lock:hover > svg { animation: none; transform: scale(1.15); filter: drop-shadow(0 0 4px rgba(252, 181, 31, 1)); }
#union-home .sov-run_lock:focus-visible { outline: 1px solid var(--brand-yellow-500); }
@keyframes sov-lock-pulse {
0%, 100% { filter: drop-shadow(0 0 2px rgba(252, 181, 31, .75)); }
50% { filter: drop-shadow(0 0 4px rgba(252, 181, 31, 1)); }
}
@keyframes sov-lock-ping {
0% { transform: scale(1); opacity: .8; }
70%, 100% { transform: scale(1.9); opacity: 0; }
}
#union-home .sov-run_tooltip {
display: none;
position: absolute;
left: 2.5rem; top: -0.25rem;
z-index: 10;
width: 26rem;
max-width: 70vw;
background-color: var(--color-neutral-900);
border: 1px solid var(--color-neutral-700);
border-radius: var(--radius-small);
box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
padding: 1rem 1.25rem;
cursor: default;
}
#union-home .sov-run_lock:hover .sov-run_tooltip { display: block; }
#union-home .sov-run_lock:focus-within .sov-run_tooltip { display: block; }
#union-home .sov-run_lock.is-open .sov-run_tooltip { display: block; }
#union-home .sov-run_tooltip-title { display: flex; align-items: center; column-gap: .375rem; color: var(--color-neutral-100); font-weight: 600; font-size: .875rem; margin-bottom: .25rem; }
#union-home .sov-run_tooltip-url { display: block; color: var(--brand-gray-300); font-family: var(--font-code); font-size: .75rem; margin-bottom: .625rem; word-break: break-all; }
#union-home .sov-run_tooltip-body { display: block; color: var(--brand-gray-300); font-size: .8125rem; line-height: 1.55; margin-bottom: .5rem; }
#union-home .sov-run_tooltip-link { color: var(--brand-gray-100); font-size: .8125rem; text-decoration: underline; }
#union-home .sov-run_io-card { background-color: var(--color-bg); border: 1px solid var(--theme-border); border-radius: var(--radius-small); padding: .5rem 0; margin-bottom: 1.75rem; }
#union-home .sov-run_io-row { display: grid; grid-template-columns: 1fr 1.6fr; column-gap: 2rem; padding: .875rem 1.25rem; }
#union-home .sov-run_io-row + .sov-run_io-row { border-top: 1px solid var(--theme-border); }
#union-home .sov-run_io-key { color: var(--color-neutral-100); font-size: .875rem; }
#union-home .sov-run_io-type { color: var(--brand-gray-400); }
#union-home .sov-run_io-artifact { display: inline-block; margin-top: .375rem; color: var(--brand-gray-300); font-family: var(--font-code); font-size: .6875rem; border: 1px solid var(--theme-border); border-radius: var(--radius-large); padding: .2rem .625rem; }
#union-home .sov-run_io-val { color: var(--brand-gray-300); font-family: var(--font-code); font-size: .75rem; word-break: break-all; align-self: center; }
/* logs pane */
#union-home .sov-run_logchips { display: flex; column-gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; row-gap: .5rem; }
#union-home .sov-run_logchip { color: var(--brand-gray-300); border: 1px solid var(--theme-border); border-radius: var(--radius-small); font-size: .8125rem; padding: .375rem .875rem; }
#union-home .sov-run_logchip.is-active { color: var(--color-neutral-100); background-color: var(--color-bg); }
#union-home .sov-run_logbox { background-color: var(--color-bg); border: 1px solid var(--theme-border); border-radius: var(--radius-small); padding: 1rem 1.25rem; }
#union-home .sov-run_logbar { display: flex; align-items: center; column-gap: .75rem; margin-bottom: 1rem; }
#union-home .sov-run_logfilter { flex: 1; color: var(--brand-gray-400); border: 1px solid var(--theme-border); border-radius: var(--radius-small); font-size: .8125rem; padding: .5rem .875rem; background-color: var(--theme-card); }
#union-home .sov-run_logbar-right { color: var(--brand-gray-400); font-size: .75rem; display: flex; align-items: center; column-gap: .5rem; white-space: nowrap; }
#union-home .sov-run_toggle { width: 2rem; height: 1.05rem; border-radius: 999px; background-color: var(--brand-green); position: relative; display: inline-block; }
#union-home .sov-run_toggle::after { content: ""; position: absolute; right: 2px; top: 2px; width: .8rem; height: .8rem; border-radius: 50%; background-color: var(--color-neutral-100); }
#union-home .sov-run_logline { display: grid; grid-template-columns: auto 10.5rem 1fr; column-gap: 1rem; font-family: var(--font-code); font-size: .75rem; line-height: 1.6; padding: .25rem 0; color: var(--brand-gray-100); }
#union-home .sov-run_logdot { color: #58b7d6; }
#union-home .sov-run_logts { color: var(--brand-gray-400); white-space: nowrap; }
/* reports pane (dark, matching the rest of the console recreation) */
#union-home .sov-run_report { background-color: var(--color-bg); border: 1px solid var(--theme-border); border-radius: var(--radius-small); padding: 1.5rem 2rem 2rem; color: var(--brand-gray-300); }
#union-home .sov-run_report-head { display: flex; justify-content: center; position: relative; margin-bottom: 1.5rem; }
#union-home .sov-run_report-tab { color: var(--color-neutral-100); font-weight: 600; font-size: .875rem; padding: 0 1rem .375rem; border-bottom: 3px solid #a678f5; }
#union-home .sov-run_report-controls { position: absolute; right: 0; top: 0; display: flex; align-items: center; column-gap: .625rem; color: var(--brand-gray-400); font-size: .75rem; }
#union-home .sov-run_report-refresh { border: 1px solid var(--theme-border); border-radius: .375rem; padding: .25rem .625rem; white-space: nowrap; }
#union-home .sov-run_report-title { color: var(--color-neutral-100); font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem; }
#union-home .sov-run_report-tiles { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
#union-home .sov-run_report-tile { background-color: var(--theme-card); border: 1px solid var(--theme-border); border-radius: .5rem; padding: .75rem 1.25rem; }
#union-home .sov-run_report-tile-num { font-weight: 700; font-size: 1.125rem; color: var(--color-neutral-100); }
#union-home .sov-run_report-tile-label { color: var(--brand-gray-400); font-size: .8125rem; }
#union-home .sov-run_report-chart-title { color: var(--color-neutral-100); font-size: .8125rem; font-weight: 600; margin-bottom: .375rem; }
#union-home .sov-run_report-chart { display: block; width: 100%; height: auto; max-width: 36rem; }
#union-home .sov-run_report-legend { color: var(--brand-gray-400); font-size: .75rem; display: flex; column-gap: 1.5rem; margin-top: .375rem; }
/* code pane */
#union-home .sov-run_code-head { display: flex; align-items: center; column-gap: .5rem; color: var(--color-neutral-100); font-weight: 600; font-size: .9375rem; margin-bottom: .75rem; }
#union-home .sov-run_code-grid { display: grid; grid-template-columns: 13rem 1fr; column-gap: 1rem; }
#union-home .sov-run_files { background-color: var(--color-bg); border: 1px solid var(--theme-border); border-radius: var(--radius-small); padding: .75rem; align-self: start; }
#union-home .sov-run_files-title { color: var(--brand-gray-300); font-size: .8125rem; margin-bottom: .5rem; }
#union-home .sov-run_file { color: var(--color-neutral-100); font-family: var(--font-code); font-size: .75rem; padding: .5rem .625rem; border-radius: var(--radius-small); }
#union-home .sov-run_file.is-active { background-color: color-mix(in srgb, #6ea3ff 22%, transparent); }
#union-home .sov-run_codebox { background-color: var(--color-bg); border: 1px solid var(--theme-border); border-radius: var(--radius-small); padding: 1rem 1.25rem; overflow-x: auto; }
#union-home .sov-run_codeline { display: grid; grid-template-columns: 2rem 1fr; font-family: var(--font-code); font-size: .75rem; line-height: 1.7; white-space: pre; }
#union-home .sov-run_codeline-num { color: var(--brand-gray-400); }
@media (max-width: 767px) {
#union-home .sov-run_io-row { grid-template-columns: 1fr; row-gap: .5rem; }
#union-home .sov-run_tooltip { left: auto; right: 0; top: 1.5rem; }
#union-home .sov-run_logline { grid-template-columns: auto 1fr; }
#union-home .sov-run_logts { display: none; }
#union-home .sov-run_code-grid { grid-template-columns: 1fr; row-gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
#union-home .sov-run_lock > svg { animation: none; filter: drop-shadow(0 0 3px rgba(252, 181, 31, .8)); }
#union-home .sov-run_lock::after { animation: none; opacity: 0; }
}
/* ────────── ported from union/model-factory/style.css ────────── *//* ---- (D) product showcase console mocks (one HTML Embed per card) ----
Interactive recreations of the Union console screenshots: artifacts list,
lineage graph, triggers list, training report, eval report. Series colors
on the chart (#3378f5 / #3f7d2c / #c78500) are contrast- and CVD-validated
against the dark card surface. *//* shared chrome */
#union-home .mfc { background-color: var(--color-bg); font-family: var(--font-body); font-size: .8125rem; color: var(--brand-gray-300); text-align: left; }
#union-home .mfc_head { display: flex; align-items: center; justify-content: space-between; column-gap: 1rem; padding: 1rem 1.25rem .75rem; }
#union-home .mfc_title { color: var(--color-neutral-100); font-weight: 600; font-size: 1.0625rem; }
#union-home .mfc_sub { color: var(--brand-gray-400); font-size: .75rem; margin-top: .125rem; }
#union-home .mfc_search { background-color: var(--color-neutral-900); border: 1px solid var(--theme-border); border-radius: var(--radius-large); color: var(--brand-gray-100); font-family: var(--font-body); font-size: .8125rem; padding: .375rem .875rem; width: 11rem; outline: none; }
#union-home .mfc_search:focus { border-color: var(--brand-yellow-500); }
#union-home .mfc_search::placeholder { color: var(--brand-gray-400); }
#union-home .mfc_filters { display: flex; column-gap: .375rem; padding: 0 1.25rem .75rem; }
#union-home .mfc_filter { border: 1px solid var(--theme-border); border-radius: var(--radius-large); background-color: transparent; color: var(--brand-gray-400); font-family: var(--font-body); font-size: .75rem; padding: .1875rem .75rem; cursor: pointer; transition: color .2s, border-color .2s; }
#union-home .mfc_filter:hover { color: var(--color-neutral-100); }
#union-home .mfc_filter.is-active { border-color: var(--brand-yellow-500); color: var(--brand-yellow-500); background-color: color-mix(in srgb, var(--brand-yellow-500) 10%, transparent); }
#union-home .mfc_chip-key { border: 1px solid var(--theme-border); border-radius: .25rem 0 0 .25rem; background-color: var(--color-neutral-900); color: var(--brand-gray-400); font-family: var(--font-code); font-size: .625rem; padding: .0625rem .375rem; }
#union-home .mfc_chip-val { border: 1px solid var(--theme-border); border-left-style: none; border-radius: 0 .25rem .25rem 0; color: var(--brand-gray-300); font-family: var(--font-code); font-size: .625rem; padding: .0625rem .375rem; }
#union-home .mfc_footer { border-top: 1px solid var(--theme-border); padding: .75rem 1.25rem; font-family: var(--font-code); font-size: .71875rem; color: var(--brand-gray-400); min-height: 2.4em; }
#union-home .mfc_empty { padding: 1.5rem 1.25rem; font-family: var(--font-code); font-size: .75rem; color: var(--brand-gray-400); }
#union-home .mfc_pill-ok { color: var(--brand-green); background-color: color-mix(in srgb, var(--brand-green) 12%, transparent); border-radius: var(--radius-large); font-size: .6875rem; font-weight: 600; padding: .1875rem .625rem; white-space: nowrap; }
#union-home .mfc button:focus-visible { outline: 2px solid var(--brand-yellow-500); outline-offset: 1px; }
/* artifacts list */
#union-home .mfc-art_cols, #union-home .mfc-art_row { display: grid; grid-template-columns: 1fr 10rem 6.5rem; align-items: center; column-gap: 1rem; padding: 0 1.25rem; }
#union-home .mfc-art_cols { border-bottom: 1px solid var(--theme-border); padding-bottom: .5rem; color: var(--brand-gray-400); font-size: .6875rem; }
#union-home .mfc-art_row { border-bottom: 1px solid #ffffff0a; padding-top: .5625rem; padding-bottom: .5625rem; transition: background-color .15s; }
#union-home .mfc-art_row:hover { background-color: #ffffff08; }
#union-home .mfc-art_row:last-child { border-bottom-style: none; }
#union-home .mfc-art_label { display: block; color: var(--brand-gray-100); font-weight: 500; margin-bottom: .25rem; }
#union-home .mfc-art_run { color: var(--brand-gray-400); font-family: var(--font-code); font-size: .71875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#union-home .mfc-art_age { color: var(--brand-gray-300); font-size: .75rem; text-align: right; }
/* lineage graph */
#union-home .mfc-lineage { background-image: radial-gradient(#ffffff14 1px, transparent 1px); background-size: 22px 22px; }
#union-home .mfc-lin_svg { display: block; width: 100%; height: auto; }
#union-home .mfc-lin_node { cursor: pointer; transition: opacity .3s; }
#union-home .mfc-lin_node:focus { outline: none; }
#union-home .mfc-lin_box { fill: var(--color-neutral-900); stroke: var(--color-neutral-800); stroke-width: 1; transition: stroke .3s; }
#union-home .mfc-lin_node:hover .mfc-lin_box, #union-home .mfc-lin_node.is-focus .mfc-lin_box, #union-home .mfc-lin_node:focus-visible .mfc-lin_box { stroke: var(--brand-yellow-500); }
#union-home .mfc-lin_title { fill: var(--color-neutral-100); font-family: var(--font-body); font-weight: 600; font-size: 15px; }
#union-home .mfc-lin_badge { fill: var(--color-neutral-800); }
#union-home .mfc-lin_badgetext { fill: var(--brand-gray-300); font-family: var(--font-code); font-size: 11px; }
#union-home .mfc-lin_name { fill: var(--color-neutral-400); font-family: var(--font-code); font-size: 11.5px; }
#union-home .mfc-lin_ready { fill: color-mix(in srgb, var(--brand-green) 14%, transparent); }
#union-home .mfc-lin_readytext { fill: var(--brand-green); font-family: var(--font-body); font-weight: 600; font-size: 10.5px; }
#union-home .mfc-lin_latest { fill: var(--color-neutral-600); font-family: var(--font-code); font-size: 10.5px; }
#union-home .mfc-lin_run { fill: #6ea3ff; font-family: var(--font-code); font-size: 10.5px; }
#union-home .mfc-lin_edge { fill: none; stroke: var(--color-neutral-700); stroke-width: 1.5; transition: stroke .3s, opacity .3s; }
#union-home .mfc-lin_edgelabel { fill: var(--brand-gray-400); font-family: var(--font-code); font-size: 10px; transition: opacity .3s; }
#union-home .mfc-lin_dot { fill: var(--brand-yellow-500); }
#union-home .mfc-lineage.has-focus .mfc-lin_node.is-dim, #union-home .mfc-lineage.has-focus .mfc-lin_edge.is-dim, #union-home .mfc-lineage.has-focus .mfc-lin_edgelabel.is-dim { opacity: .22; }
#union-home .mfc-lineage.has-focus .mfc-lin_edge:not(.is-dim) { stroke: var(--brand-yellow-500); }
/* triggers list */
#union-home .mfc-trig_add { border-style: none; border-radius: var(--radius-large); background-color: var(--brand-yellow-500); color: var(--color-bg); font-family: var(--font-body); font-size: .75rem; font-weight: 600; padding: .375rem .875rem; cursor: pointer; }
#union-home .mfc-trig_cols, #union-home .mfc-trig_row { display: grid; grid-template-columns: 3rem 1fr 15rem 5.5rem; align-items: center; column-gap: 1rem; padding: 0 1.25rem; }
#union-home .mfc-trig_cols { border-bottom: 1px solid var(--theme-border); padding-bottom: .5rem; color: var(--brand-gray-400); font-size: .6875rem; }
#union-home .mfc-trig_row { border-bottom: 1px solid #ffffff0a; padding-top: .625rem; padding-bottom: .625rem; transition: opacity .3s; }
#union-home .mfc-trig_row.is-paused { opacity: .45; }
#union-home .mfc-trig_name { color: var(--brand-gray-100); font-weight: 500; margin-bottom: .25rem; }
#union-home .mfc-trig_cond { color: var(--brand-gray-400); font-size: .71875rem; }
#union-home .mfc-trig_task { color: var(--brand-gray-300); font-family: var(--font-code); font-size: .71875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#union-home .mfc-trig_age { color: var(--brand-gray-300); font-size: .75rem; text-align: right; }
#union-home .mfc-trig_toggle { position: relative; width: 2.25rem; height: 1.25rem; border-style: none; border-radius: .625rem; background-color: var(--color-neutral-700); cursor: pointer; padding: 0; transition: background-color .25s; }
#union-home .mfc-trig_toggle.is-on { background-color: var(--brand-green); }
#union-home .mfc-trig_knob { position: absolute; top: .125rem; left: .125rem; width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--color-neutral-100); transition: transform .25s; }
#union-home .mfc-trig_toggle.is-on .mfc-trig_knob { transform: translateX(1rem); }
/* run-report chrome (training + evals) */
#union-home .mfc-run_bar { display: flex; align-items: center; flex-wrap: wrap; column-gap: .75rem; row-gap: .375rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--theme-border); }
#union-home .mfc-run_name { color: var(--color-neutral-100); font-weight: 600; font-size: .9375rem; }
#union-home .mfc-run_meta { color: var(--brand-gray-400); font-size: .71875rem; }
#union-home .mfc-run_meta b { color: var(--brand-gray-100); font-weight: 500; }
#union-home .mfc-run_tabs { display: flex; column-gap: .25rem; padding: .5rem 1.25rem 0; border-bottom: 1px solid var(--theme-border); }
#union-home .mfc-run_tabs span { color: var(--brand-gray-400); font-size: .75rem; padding: .375rem .625rem .5rem; border-bottom: 2px solid transparent; }
#union-home .mfc-run_tabs span.is-active { color: var(--color-neutral-100); border-bottom-color: var(--brand-purple); }
#union-home .mfc_report { background-color: var(--theme-card); border: 1px solid var(--theme-border); border-radius: .5rem .5rem 0 0; margin: 1rem 1rem 0; padding: 1.125rem 1.25rem 1rem; }
#union-home .mfc_report-head { display: flex; align-items: center; justify-content: space-between; column-gap: 1rem; flex-wrap: wrap; row-gap: .5rem; margin-bottom: .625rem; }
#union-home .mfc_report-title { color: var(--color-neutral-100); font-weight: 600; font-size: 1rem; }
#union-home .mfc_report-status { color: var(--brand-green); font-family: var(--font-code); font-size: .71875rem; }
#union-home .mfc_report-status.is-running { color: var(--brand-yellow-500); }
#union-home .mfc_report-config { border: 1px solid var(--theme-border); border-radius: .375rem; background-color: var(--color-bg); padding: .5rem .75rem; font-family: var(--font-code); font-size: .65625rem; color: var(--brand-gray-400); margin-bottom: .875rem; line-height: 1.8; }
#union-home .mfc_report-config b { color: var(--brand-gray-100); font-weight: 500; }
#union-home .mfc_tiles { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
#union-home .mfc_tile { flex: 1 1 6rem; border: 1px solid var(--theme-border); border-radius: .375rem; background-color: var(--color-bg); padding: .625rem .75rem; min-width: 0; }
#union-home .mfc_tile-val { color: var(--color-neutral-100); font-weight: 600; font-size: 1.1875rem; line-height: 1.2; white-space: nowrap; }
#union-home .mfc_tile-delta { color: var(--brand-gray-400); font-family: var(--font-code); font-size: .625rem; margin-top: .125rem; white-space: nowrap; }
#union-home .mfc_tile-delta.is-up { color: var(--brand-green); }
#union-home .mfc_tile-delta.is-down { color: #e06c6e; }
#union-home .mfc_tile-label { color: var(--brand-gray-400); font-size: .6875rem; margin-top: .375rem; }
/* training chart + controls */
#union-home .mfc_chart-head { display: flex; align-items: baseline; justify-content: space-between; column-gap: 1rem; flex-wrap: wrap; row-gap: .25rem; margin-bottom: .375rem; }
#union-home .mfc_chart-title { color: var(--brand-gray-100); font-size: .75rem; font-weight: 500; }
#union-home .mfc_legend { display: flex; column-gap: .875rem; flex-wrap: wrap; }
#union-home .mfc_legend-item { display: inline-flex; align-items: center; column-gap: .3125rem; color: var(--brand-gray-400); font-family: var(--font-code); font-size: .625rem; }
#union-home .mfc_swatch { display: inline-block; width: .625rem; height: .625rem; border-radius: .1875rem; }
#union-home .mfc_chart { position: relative; }
#union-home .mfc_chart svg { display: block; width: 100%; height: auto; }
#union-home .mfc_tip { position: absolute; pointer-events: none; background-color: var(--color-neutral-800); border: 1px solid var(--color-neutral-700); border-radius: .375rem; padding: .375rem .625rem; font-family: var(--font-code); font-size: .625rem; line-height: 1.7; color: var(--brand-gray-100); white-space: nowrap; transform: translate(-50%, -100%); opacity: 0; transition: opacity .15s; z-index: 2; }
#union-home .mfc_tip.is-show { opacity: 1; }
#union-home .mfc_controls { display: flex; align-items: center; column-gap: .875rem; border-top: 1px solid var(--theme-border); margin-top: .75rem; padding-top: .75rem; }
#union-home .mfc_play { border: 1px solid var(--brand-yellow-500); border-radius: var(--radius-large); background-color: color-mix(in srgb, var(--brand-yellow-500) 10%, transparent); color: var(--brand-yellow-500); font-family: var(--font-body); font-size: .75rem; font-weight: 600; padding: .3125rem .875rem; cursor: pointer; white-space: nowrap; }
#union-home .mfc_play:hover { background-color: color-mix(in srgb, var(--brand-yellow-500) 20%, transparent); }
#union-home .mfc_scrub { flex: 1; accent-color: var(--brand-yellow-500); min-width: 0; }
#union-home .mfc_controls-label { color: var(--brand-gray-400); font-family: var(--font-code); font-size: .6875rem; white-space: nowrap; }
/* eval report */
#union-home .mfc_verpick { display: inline-flex; align-items: center; column-gap: .25rem; }
#union-home .mfc_verpick-label { color: var(--brand-gray-400); font-family: var(--font-code); font-size: .65625rem; margin-right: .25rem; }
#union-home .mfc_verpick button { border: 1px solid var(--theme-border); border-radius: .375rem; background-color: transparent; color: var(--brand-gray-300); font-family: var(--font-code); font-size: .71875rem; padding: .25rem .625rem; cursor: pointer; transition: color .2s, border-color .2s; }
#union-home .mfc_verpick button:hover { color: var(--color-neutral-100); }
#union-home .mfc_verpick button.is-active { border-color: var(--brand-yellow-500); color: var(--brand-yellow-500); background-color: color-mix(in srgb, var(--brand-yellow-500) 10%, transparent); }
#union-home .mfc_gate { border-radius: .375rem; font-size: .9375rem; font-weight: 700; padding: .125rem .625rem; }
#union-home .mfc_gate.is-pass { color: var(--brand-green); background-color: color-mix(in srgb, var(--brand-green) 14%, transparent); }
#union-home .mfc_gate.is-hold { color: #e06c6e; background-color: color-mix(in srgb, var(--brand-red) 18%, transparent); }
#union-home .mfc-ev_tablewrap { overflow-x: auto; border: 1px solid var(--theme-border); border-radius: .375rem; }
#union-home .mfc-ev_table { width: 100%; border-collapse: collapse; font-size: .71875rem; }
#union-home .mfc-ev_table th { text-align: left; color: var(--brand-gray-400); font-weight: 500; font-size: .65625rem; background-color: var(--color-bg); padding: .4375rem .75rem; border-bottom: 1px solid var(--theme-border); }
#union-home .mfc-ev_table td { color: var(--brand-gray-300); font-family: var(--font-code); padding: .375rem .75rem; border-bottom: 1px solid #ffffff0a; white-space: nowrap; }
#union-home .mfc-ev_table tr:last-child td { border-bottom-style: none; }
#union-home .mfc_pill-pass { color: var(--brand-green); background-color: color-mix(in srgb, var(--brand-green) 12%, transparent); border-radius: .625rem; font-family: var(--font-body); font-size: .625rem; font-weight: 600; padding: .0625rem .5rem; }
#union-home .mfc_pill-fail { color: #e06c6e; background-color: color-mix(in srgb, var(--brand-red) 15%, transparent); border-radius: .625rem; font-family: var(--font-body); font-size: .625rem; font-weight: 600; padding: .0625rem .5rem; }
#union-home .mfc-ev-cand.is-changed { animation: mfc-cell-flash 1.2s ease-out; }
@keyframes mfc-cell-flash { 0% { background-color: color-mix(in srgb, var(--brand-yellow-500) 25%, transparent); } 100% { background-color: transparent; } }
#union-home .mfc_footer.is-hold { color: #e06c6e; }
#union-home .mfc_footer.is-pass { color: var(--brand-green); }
@media (max-width: 767px) {
#union-home .mfc-art_cols, #union-home .mfc-art_row { grid-template-columns: 1fr 6.5rem; }
#union-home .mfc-art_run, #union-home .mfc-art_cols span:nth-child(2) { display: none; }
#union-home .mfc-trig_cols, #union-home .mfc-trig_row { grid-template-columns: 3rem 1fr 5.5rem; }
#union-home .mfc-trig_task, #union-home .mfc-trig_cols span:nth-child(3) { display: none; }
#union-home .mfc_search { width: 8rem; }
#union-home .mfc_report { margin: .75rem .5rem 0; padding: .875rem .75rem .75rem; }
}
@media (prefers-reduced-motion: reduce) {
#union-home .mfc-lin_dot { display: none; }
#union-home .mfc-ev-cand.is-changed { animation: none; }
}
/* ══════════════════════════════════════════════════════════════════════
The HERO DENSITY block that used to live here tuned the fold with
!important overrides against the pre-Figma markup: a `min-height`-pinned
hero, a `[data-screen-label="Logos"]` marquee and `#resources > div`.
That structure is gone — the fold is now owned by .fig-hero / .fig-trust /
.fig-intro above, which is the only place to tune it.
═════════════════════════════════════════════════════════════════════ *//* ── host navbar CTA (Webflow port only) ──────────────────────────
Deliberately UNSCOPED: the site's navbar renders outside #union-home.
This stylesheet only loads on the home page, so the rules are page-scoped
by virtue of that — every other page keeps its own navbar CTA.
script.js relabels the navbar's "Chat with an engineer" buttons to
"Sign Up", points them at the hero CTA's href, and flips the attribute
once the hero scrolls away. Only the button on the bar itself carries the
hook — the copy in the mobile menu stays visible, since the hamburger
opens at any scroll position. visibility (not display) keeps the nav from
reflowing when it appears. *//* Hidden from FIRST PAINT, before script.js has tagged anything. script.js is
deferred, so without this the host navbar's own "Chat with an engineer" is
painted at the top right and only disappears once the script runs — a visible
flash of the wrong button. This rule needs no attribute, so it applies
immediately; the reveal rule below is more specific and still wins. */
.navigation .navbar2_button-wrapper > a.button { opacity: 0; visibility: hidden; }
.navigation a[data-nav-signup] {
opacity: 0;
visibility: hidden;
transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.navigation a[data-nav-signup][data-nav-signup-on="1"] {
opacity: 1;
visibility: visible;
transition: opacity 240ms ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
.navigation a[data-nav-signup] { transition: none; }
}
/* ══════════════════════════════════════════════════════════════════════
LIVE-SITE BUTTON SHAPE — union.ai's buttons are full pills, not the
rounded rectangles this system shipped. The CTAs carry their radius as
an inline style attribute (border-radius:11px), so the override has to
outrank it; that is the only reason for !important here. Label weight
and the black-on-gold fill match the live .button component.
═════════════════════════════════════════════════════════════════════ */
#union-home .btn, #union-home .cta-accent, #union-home .cta-gold, #union-home .btn-secondary { border-radius: 999px !important; font-weight: 600; }
/* 0-2-0, deliberately: `.nav a { color: inherit }` in union.css is 0-1-1 and
outranks a bare `.cta-accent`, which painted the nav's Sign Up label white
on the gold fill — 1.78:1. The hero and CTA-band buttons were never
affected (11.8:1); only the one inside .nav. Same family as the a:hover
bug documented above. */
#union-home .btn.cta-accent, #union-home .btn.cta-gold { color: #000; }
/* ── pillar segments: hover state (embed CSS — Designer can't express) ── */
#union-home .pillar-cap { transition: border-color .18s ease; }
#union-home .pillar-cap:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
@media (prefers-reduced-motion: reduce) {
#union-home .pillar-cap { transition: none; }
}
@media (max-width: 640px) {
#union-home .pillar-more { flex-direction: column; gap: 10px; }
}
/* ── scheduling pillar: the policy simulator ──
Ported from union/advanced-scheduling/. That page is authored against
union-system.css; this one runs on the Nocturne system in union.css, so the
block below opens with a token bridge scoped to #home-algo that re-points the
union-system token names at Nocturne values. The ported rules then stay
diffable against their source file. */
#union-home #home-algo {
--theme-border: var(--color-divider);
--theme-accent: var(--color-accent);
--theme-card: var(--color-surface);
--theme-heading: var(--color-neutral-100);
--brand-gray-300: var(--color-neutral-400);
--brand-gray-350: var(--color-neutral-500);
--brand-gray-400: var(--color-neutral-600);
--brand-red: #e06c6e;
--radius-small: var(--radius-md);
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: var(--radius-lg);
color: var(--color-neutral-400);
}
/* sub-heading above the simulator */
#union-home .pillar-sub { max-width: 760px; margin: 0 auto 22px; text-align: center; }
#union-home .pillar-sub_h { font-size: clamp(19px, 2.6vw, 23px); margin: 0 0 8px; letter-spacing: -0.01em; }
#union-home .pillar-sub_p { font-size: 16.5px; color: var(--color-neutral-500); margin: 0; text-wrap: pretty; }
#union-home #home-algo .algo { overflow: hidden; }
#union-home #home-algo .algo_bar { display: flex; align-items: center; justify-content: space-between; column-gap: 1rem; row-gap: .75rem; flex-wrap: wrap; padding: .875rem 1.25rem; border-bottom: 1px solid var(--theme-border); }
#union-home #home-algo .algo_tabs { display: flex; column-gap: .25rem; background-color: rgba(255,255,255,.04); border-radius: var(--radius-small); padding: .1875rem; flex-wrap: wrap; }
#union-home #home-algo .algo_tab { border: 0; background: transparent; color: var(--brand-gray-350); font-family: var(--font-code); font-size: .8125rem; padding: .375rem .875rem; border-radius: calc(var(--radius-small) - .125rem); cursor: pointer; white-space: nowrap; }
#union-home #home-algo .algo_replay { border: 1px solid var(--theme-border); background: transparent; color: var(--brand-gray-300); border-radius: var(--radius-small); padding: .375rem .875rem; font-family: inherit; font-size: .8125rem; cursor: pointer; }
#union-home #home-algo .algo_body { display: grid; grid-template-columns: 1.5fr 1fr; }
#union-home #home-algo .algo_chartwrap { padding: 1.5rem 1.5rem 1.25rem; border-right: 1px solid var(--theme-border); min-width: 0; }
#union-home #home-algo .algo_axislabel { font-size: .6875rem; color: var(--brand-gray-400); margin-bottom: .625rem; letter-spacing: .04em; }
#union-home #home-algo .algo_time { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--brand-gray-400); margin-top: .5rem; }
#union-home #home-algo .algo_legend { display: flex; flex-wrap: wrap; column-gap: 1.25rem; row-gap: .375rem; margin-top: 1rem; font-size: .75rem; color: var(--brand-gray-350); }
#union-home #home-algo .algo_legend span { display: flex; align-items: center; column-gap: .375rem; }
#union-home #home-algo .algo_side { padding: 1.5rem 1.5rem 1.25rem; min-width: 0; }
#union-home #home-algo .algo_sidelabel { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-gray-400); margin-bottom: .625rem; }
#union-home #home-algo .algo_queue { margin-bottom: 1.25rem; }
#union-home #home-algo .algo_qitem { display: flex; align-items: center; column-gap: .5rem; padding: .4375rem 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .8125rem; color: var(--brand-gray-300); }
#union-home #home-algo .algo_qtag { font-size: .625rem; padding: .0625rem .375rem; border-radius: .5rem; background-color: rgba(255,255,255,.07); color: var(--brand-gray-350); }
#union-home #home-algo .algo_qmeta { margin-left: auto; font-size: .6875rem; color: var(--brand-gray-400); white-space: nowrap; }
#union-home #home-algo .algo_note { color: var(--brand-gray-350); margin-top: .875rem; }
/* ---- algorithm chart ---- */
#union-home #home-algo .algo_chart { display: grid; grid-template-rows: repeat(8, 1.125rem); row-gap: .1875rem; }
#union-home #home-algo .algo_lane { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: .125rem; }
#union-home #home-algo .algo_cell { border-radius: .125rem; background-color: rgba(255,255,255,.045); transition: background-color .28s ease; }
#union-home #home-algo .algo_cell.is-run { background-color: rgba(122,167,255,.55); }
#union-home #home-algo .algo_cell.is-gang { background-color: var(--theme-accent); }
#union-home #home-algo .algo_cell.is-small { background-color: rgba(120,184,86,.62); }
#union-home #home-algo .algo_cell.is-idle { background-color: rgba(205,50,52,.16); box-shadow: inset 0 0 0 1px rgba(205,50,52,.3); }
#union-home #home-algo .algo_sw { width: .625rem; height: .625rem; border-radius: .125rem; display: inline-block; }
#union-home #home-algo .algo_sw-run { background-color: rgba(122,167,255,.55); }
#union-home #home-algo .algo_sw-gang { background-color: var(--theme-accent); }
#union-home #home-algo .algo_sw-small { background-color: rgba(120,184,86,.62); }
#union-home #home-algo .algo_sw-idle { background-color: rgba(205,50,52,.16); box-shadow: inset 0 0 0 1px rgba(205,50,52,.3); }
#union-home #home-algo .algo_stats { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
#union-home #home-algo .algo_stat { border: 1px solid var(--theme-border); border-radius: var(--radius-small); padding: .5rem .75rem; }
#union-home #home-algo .algo_stat_v { display: block; font-family: var(--font-code); font-size: 1.0625rem; color: var(--theme-heading); }
#union-home #home-algo .algo_stat_v.is-bad { color: var(--brand-red); }
#union-home #home-algo .algo_stat_v.is-good { color: #8fd05e; }
#union-home #home-algo .algo_stat_k { display: block; font-size: .6875rem; color: var(--brand-gray-400); margin-top: .125rem; }
/* simulator: selected/hover states + responsive (ported alongside the block above) */
#union-home #home-algo .algo_tab.is-on { background-color: var(--color-accent); color: #000; font-weight: 600; }
#union-home #home-algo .algo_tab:hover:not(.is-on) { color: var(--color-neutral-100); }
#union-home #home-algo .algo_replay:hover { border-color: var(--color-accent); color: var(--color-accent); }
#union-home #home-algo .algo_tab:focus-visible, #union-home #home-algo .algo_replay:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#union-home #home-algo .algo_qtag-gang { background-color: rgba(252,181,31,.16); color: var(--color-accent); }
#union-home #home-algo .algo_stat_v.is-bad { color: #e06c6e; }
#union-home #home-algo .algo_stat_v.is-good { color: #8fd05e; }
@media (prefers-reduced-motion: reduce) {
#union-home #home-algo .algo_cell { transition: none; }
}
@media (max-width: 860px) {
#union-home #home-algo .algo_body { grid-template-columns: 1fr; }
#union-home #home-algo .algo_chartwrap { border-right: 0; border-bottom: 1px solid var(--color-divider); }
#union-home #home-algo .algo_stats { grid-template-columns: 1fr 1fr; }
}
/* ── nav: Platform mega menu ──
Emulates the live union.ai navbar dropdown (wordmark left, centered links,
full-width panel of four titled cards under the bar). Custom code — the
Webflow site's own navbar component already has this. */
#union-home .hnav_trigger {
display: inline-flex; align-items: center; gap: 6px;
border: 0; background: transparent; padding: 0;
font-family: inherit; color: inherit;
font-size: 15.5px; /* match .nav a in union.css */
cursor: pointer; white-space: nowrap;
}
#union-home .hnav_trigger:hover { color: var(--color-accent); }
#union-home .hnav_caret { width: 11px; height: 11px; transition: transform 180ms ease; }
#union-home .hnav_trigger[aria-expanded="true"] .hnav_caret { transform: rotate(180deg); }
#union-home .hnav_menu { display: none; max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px,4.4vw,64px) 14px; }
#union-home .hnav_menu[data-open="1"] { display: block; }
#union-home .hnav_panel {
display: grid; grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 92%, #fff 8%), var(--color-surface));
overflow: hidden;
}
#union-home .hnav_item { display: block; padding: 24px 26px 28px; text-decoration: none; border-left: 1px solid var(--color-divider); }
#union-home .hnav_item:first-child { border-left: 0; }
#union-home .hnav_item_title { font-size: 16px; font-weight: 600; color: var(--color-neutral-100); margin-bottom: 7px; }
#union-home .hnav_item_desc { font-size: 14px; line-height: 1.45; color: var(--color-neutral-500); text-wrap: pretty; }
#union-home .hnav_item:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
#union-home .hnav_item:hover .hnav_item_title { color: var(--color-accent); }
#union-home .hnav_trigger:focus-visible, #union-home .hnav_item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 991px) {
#union-home .hnav_panel { grid-template-columns: 1fr 1fr; }
#union-home .hnav_item:nth-child(3) { border-left: 0; }
#union-home .hnav_item:nth-child(n+3) { border-top: 1px solid var(--color-divider); }
}
@media (max-width: 860px) {
#union-home .hnav_panel { grid-template-columns: 1fr; }
#union-home .hnav_item { border-left: 0; }
#union-home .hnav_item + .hnav_item { border-top: 1px solid var(--color-divider); }
}
@media (prefers-reduced-motion: reduce) {
#union-home .hnav_caret { transition: none; }
}
/* ── speed band: reusable containers + cold boot ── *//* ── observability: Reports pane ──
A task publishes its own report, so this is a richer read-out than a status
pane: config strip, objective, latest-iteration stats with deltas, and a
three-series chart. Geometry is generated; see README. */
#union-home .rep_body { padding: 22px 24px 24px; }
#union-home .rep_titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
#union-home .rep_title { font-size: clamp(19px, 2.6vw, 24px); margin: 0; letter-spacing: -0.01em; }
#union-home .rep_badge {
font-size: 11px; padding: 3px 10px; border-radius: 10px;
background: rgba(79,154,104,0.16); color: #8fd0a2;
}
#union-home .rep_objective {
border-left: 2px solid var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 6%, transparent);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: 11px 16px; margin-bottom: 20px;
}
#union-home .rep_objective_k {
display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--color-accent); margin-bottom: 4px;
}
#union-home .rep_objective p { margin: 0; font-size: 13.5px; color: var(--color-neutral-400); text-wrap: pretty; }
#union-home .rep_sub { font-size: 13px; font-weight: 500; color: var(--color-neutral-300); margin-bottom: 10px; }
#union-home .rep_stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); margin-bottom: 20px; }
#union-home .rep_stat {
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
padding: 13px 15px; display: flex; flex-direction: column; gap: 3px;
}
#union-home .rep_stat_v { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
#union-home .rep_stat_d { font-size: 11.5px; font-family: var(--font-code); color: var(--color-neutral-600); }
#union-home .rep_stat_d.is-up { color: #8fd05e; }
#union-home .rep_stat_d.is-down { color: #e06c6e; }
#union-home .rep_stat_k { font-size: 11.5px; color: var(--color-neutral-500); text-wrap: pretty; }
#union-home .rep_chartcard { border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 16px 18px; }
#union-home .rep_charttitle { font-size: 13px; font-weight: 500; margin-bottom: 10px; }
#union-home .rep_chart { width: 100%; height: 300px; display: block; }
#union-home .rep_legend {
display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
margin-top: 10px; font-size: 11px; color: var(--color-neutral-400);
}
#union-home .rep_legend span { display: flex; align-items: center; gap: 6px; }
#union-home .rep_axisnote { margin-left: auto; color: var(--color-neutral-600); }
#union-home .rep_sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
#union-home .rep_foot { margin: 16px 0 0; font-size: 13px; color: var(--color-neutral-500); text-wrap: pretty; }
/* chart series — three hues that stay distinct on the dark ground */
#union-home .rep_line { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
#union-home .rep_line.is-reward { stroke: #7aa7ff; }
#union-home .rep_line.is-acc { stroke: #4fd1a5; }
#union-home .rep_line.is-fmt { stroke: var(--color-accent); }
#union-home .rep_sw.is-reward { background: #7aa7ff; }
#union-home .rep_sw.is-acc { background: #4fd1a5; }
#union-home .rep_sw.is-fmt { background: var(--color-accent); }
#union-home .rep_dot circle { r: 2.2; }
#union-home .rep_dot.is-reward circle { fill: #7aa7ff; }
#union-home .rep_dot.is-acc circle { fill: #4fd1a5; }
#union-home .rep_dot.is-fmt circle { fill: var(--color-accent); }
#union-home .rep_grid line { stroke: rgba(236,234,228,0.07); }
#union-home .rep_ylab text, #union-home .rep_xlab text {
fill: var(--color-neutral-600); font-family: var(--font-code); font-size: 10.5px;
}
#union-home .rep_ylab text { text-anchor: end; }
#union-home .rep_xlab text { text-anchor: middle; }
@media (max-width: 640px) {
#union-home .rep_chart { height: 220px; }
#union-home .rep_xlab text:nth-child(even) { display: none; }
}
/* Section kickers carry the matching glyph from the console's left nav, so the
page and the product use the same visual vocabulary. */
#union-home .sec-kicker { display: inline-flex; align-items: center; gap: 8px; }
#union-home .sec-icon { width: 16px; height: 16px; flex: 0 0 auto; }
/* ── scrollbars ──
The default light scrollbars sit badly on the dark panels, and they are the
first thing you notice in the code and console panes. Thin, low-contrast,
brighter on hover. Firefox gets the standard properties; WebKit the pseudos. */
#union-home * { scrollbar-width: thin; scrollbar-color: rgba(236,234,228,0.18) transparent; }
#union-home ::-webkit-scrollbar { width: 10px; height: 10px; }
#union-home ::-webkit-scrollbar-track { background: transparent; }
#union-home ::-webkit-scrollbar-thumb {
background: rgba(236,234,228,0.16);
border-radius: 999px;
border: 3px solid transparent;
background-clip: content-box;
}
#union-home ::-webkit-scrollbar-thumb:hover { background: rgba(236,234,228,0.30); background-clip: content-box; }
#union-home ::-webkit-scrollbar-corner { background: transparent; }
#union-home .cta-note { font-size: 14px; color: var(--color-neutral-500); }
/* ── capability + proof rows ──
Each row is one claim with the customer that proves it: the left half links
to the section on this page, the right half to that customer's case study.
Two sibling links rather than one nested inside the other. *//* ── the capability and results grids ──
These were one two-column list: capability on the left, the customer that
proved it on the right. At 1,440px that put ~600px of gutter between a row
and its proof, so you read across a void to connect them and neither half
got room to breathe. They are now two 3 × 2 grids in consecutive sections,
each with its own heading, and the proof cards name the capability they
belong to instead of relying on horizontal alignment to say it.
Both grids are open: no rules, no card edges. The cells sit on the page
ground and are separated by space alone, so the type carries the structure.
Each cell keeps its padding and a radius purely so the hover tint has a
shape to fill; the gap is small because the padding is already doing most of
the separating. */
#union-home .cap-grid, #union-home .proof-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
/* pull the grid back out to the section edge — the cells' own padding would
otherwise indent the first column past every other heading on the page */
margin-inline: -22px;
}
#union-home .cap-cell, #union-home .proof-cell {
position: relative; /* the hover sweep below is absolutely placed */
overflow: hidden; /* so the sweep follows the corner radius */
display: flex; flex-direction: column;
padding: 22px 22px 26px;
border-radius: var(--radius-md);
text-decoration: none; color: inherit;
transition: background-color .18s ease, transform .18s cubic-bezier(.2, .7, .3, 1);
}
/* the two hover layers paint inside the cell, so the content has to sit above
them — otherwise the accent wash tints the icon and the type */
#union-home .cap-cell > *, #union-home .proof-cell > * { position: relative; z-index: 1; }
#union-home .cap-cell:hover, #union-home .proof-cell:hover {
background: color-mix(in srgb, var(--color-text) 5%, transparent);
transform: translateY(-3px);
}
#union-home .cap-cell:focus-visible, #union-home .proof-cell:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* ── hover motion ──
With the borders gone there is no card edge to light up, so the hover state
is carried by movement instead: the whole cell lifts, and the one glyph that
says where the link goes moves in that direction — the capability's ↓ drops,
the result's ↗ travels up and to the right. Everything here is transform and
color only (no layout properties), so it composites on the GPU and cannot
reflow the grid. The whole block is switched off under reduced motion. *//* The hover edge is two layers, not one bar. On its own a hard 2px rule inset
from the corners read as a stray line floating above the card rather than
part of it, so:
::before is a soft accent wash bleeding down from the top edge and gone by
the halfway mark — it gives the line something to sit on, which is what makes
it read as the card lighting up rather than as a separate object.
::after is the line itself, now full-bleed and clipped by the cell's own
radius (hence overflow: hidden above) so it hugs the rounded corners, thinner
at 1.5px, and faded to transparent at BOTH ends so neither end stops dead. */
#union-home .cap-cell::before, #union-home .proof-cell::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(180deg,
color-mix(in srgb, var(--color-accent) 11%, transparent) 0%,
transparent 52%);
opacity: 0;
transition: opacity .28s ease;
}
#union-home .cap-cell::after, #union-home .proof-cell::after {
content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 0;
height: 1.5px; pointer-events: none;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--color-accent) 55%, transparent) 14%,
var(--color-accent) 42%,
color-mix(in srgb, var(--color-accent) 40%, transparent) 78%,
transparent 100%);
transform: scaleX(0); transform-origin: left;
transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}
#union-home .cap-cell:hover::before, #union-home .proof-cell:hover::before { opacity: 1; }
#union-home .cap-cell:hover::after, #union-home .proof-cell:hover::after { transform: scaleX(1); }
/* capability cell */
#union-home .cap-cell_icon {
width: 24px; height: 24px; color: var(--color-accent); margin-bottom: 14px;
transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
#union-home .cap-cell:hover .cap-cell_icon { transform: translateY(-2px) scale(1.09); }
#union-home .cap-cell_name { font-size: 21px; font-weight: 600; color: var(--color-text); letter-spacing: -0.01em; margin-bottom: 7px; transition: color .18s ease; }
#union-home .cap-cell_desc { font-size: 16px; line-height: 1.5; color: var(--color-neutral-500); text-wrap: pretty; transition: color .18s ease; }
/* The glyph is a ↓ because the card jumps down the page to its section. The
hover nudge used to go down too, to reinforce that — but the card lifts -3px
and the icon -2px, so the arrow was the one thing sliding the other way, and
against a moving card that reads as drift rather than intent. It lifts with
everything else now; the glyph still carries the direction. */
#union-home .cap-cell_name::after {
content: "↓"; display: inline-block; margin-left: 8px;
font-weight: 400; color: var(--color-neutral-700);
transition: color .18s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
}
#union-home .cap-cell:hover .cap-cell_name { color: var(--color-accent); }
#union-home .cap-cell:hover .cap-cell_desc { color: var(--color-neutral-400); }
#union-home .cap-cell:hover .cap-cell_name::after { color: var(--color-accent); transform: translateY(-3px); }
/* results cell — the number leads, the company and the capability frame it */
#union-home .proof-cell_co {
font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--color-accent); margin-bottom: 10px;
transition: transform .22s cubic-bezier(.2, .7, .3, 1);
transform-origin: left;
}
#union-home .proof-cell:hover .proof-cell_co { transform: translateX(2px); }
#union-home .proof-cell_result { font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--color-text); letter-spacing: -0.01em; text-wrap: pretty; }
#union-home .proof-cell_result::after {
content: "↗"; display: inline-block; margin-left: 9px;
font-weight: 400; color: var(--color-neutral-700);
transition: color .18s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
}
#union-home .proof-cell:hover .proof-cell_result::after { color: var(--color-accent); transform: translate(3px, -3px); }
#union-home .proof-cell_cap { transition: color .18s ease; }
#union-home .proof-cell:hover .proof-cell_cap { color: var(--color-neutral-500); }
/* which capability this result belongs to — the pairing the old two-column
layout carried by alignment alone */
#union-home .proof-cell_cap {
margin-top: auto; padding-top: 14px;
font-size: 14px; color: var(--color-neutral-600);
}
#union-home .cap-foot { margin: 22px 0 0; font-size: 15px; color: var(--color-neutral-500); }
#union-home .cap-foot a { color: var(--color-accent); text-decoration: none; }
#union-home .cap-foot a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
#union-home .cap-cell, #union-home .proof-cell, #union-home .cap-cell_icon, #union-home .cap-cell_name, #union-home .cap-cell_desc, #union-home .cap-cell_name::after, #union-home .cap-cell::after, #union-home .proof-cell::after, #union-home .proof-cell_co, #union-home .proof-cell_cap, #union-home .proof-cell_result::after { transition: none; }
#union-home .cap-cell:hover, #union-home .proof-cell:hover { transform: none; }
#union-home .cap-cell:hover .cap-cell_icon, #union-home .cap-cell:hover .cap-cell_name::after, #union-home .proof-cell:hover .proof-cell_co, #union-home .proof-cell:hover .proof-cell_result::after { transform: none; }
#union-home .cap-cell::before, #union-home .proof-cell::before, #union-home .cap-cell::after, #union-home .proof-cell::after { display: none; }
}
@media (max-width: 991px) {
#union-home .cap-grid, #union-home .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
#union-home .cap-grid, #union-home .proof-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
#union-home .cap-cell, #union-home .proof-cell { padding: 16px 22px 18px; }
#union-home .cap-cell_name, #union-home .proof-cell_result { font-size: 19px; }
}
/* anchored sections must clear the sticky navbar when jumped to */
#union-home #sovereign, #union-home #demo, #union-home #factory, #union-home #scheduling, #union-home #inference, #union-home #agents, #union-home #observability, #union-home #speed { scroll-margin-top: 84px; }
/* ── primary CTA sub-note ──
"Try for free" sits under the Get Started button, so the button group aligns
to flex-start and the primary CTA becomes a small column of its own. */
#union-home .cta-stack { display: flex; flex-direction: column; align-items: center; gap: 7px; }
#union-home .cta-note { font-size: 13px; color: var(--color-neutral-500); }
/* ── nav: Solutions and Resources panel variants ──
Platform keeps four equal title+description columns. Solutions is three link
lists plus a featured card. Resources is six narrower cards, after Benchmarks
and Security Architecture moved here from Platform. */
#union-home .hnav_panel.is-solutions { grid-template-columns: repeat(3, 1fr) 1.15fr; align-items: start; }
#union-home .hnav_panel.is-resources { grid-template-columns: repeat(6, 1fr); }
/* Platform now holds six pages, so it runs 3 × 2 rather than one row of four.
`.hnav_item:first-child` only clears the left edge of item 1; on a second
row, item 4 needs the same treatment and items 4–6 need a rule above them. */
#union-home .hnav_panel.is-platform { grid-template-columns: repeat(3, 1fr); }
#union-home .hnav_panel.is-platform .hnav_item:nth-child(3n+1) { border-left: 0; }
#union-home .hnav_panel.is-platform .hnav_item:nth-child(n+4) { border-top: 1px solid var(--color-divider); }
#union-home .hnav_col { padding: 24px 26px 28px; border-left: 1px solid var(--color-divider); }
#union-home .hnav_col:first-child { border-left: 0; }
#union-home .hnav_colhead { font-size: 13.5px; color: var(--color-neutral-500); margin-bottom: 14px; }
#union-home .hnav_sublink { display: block; text-decoration: none; color: var(--color-text); font-size: 15px; padding: 6px 0; }
#union-home .hnav_sublink:hover { color: var(--color-accent); }
#union-home .hnav_feature { display: block; text-decoration: none; padding: 24px 26px 28px; border-left: 1px solid var(--color-divider); }
#union-home .hnav_feature_art {
display: flex; align-items: center; justify-content: center;
height: 112px; border-radius: 12px; margin-bottom: 12px;
background: linear-gradient(135deg, #10243d 0%, #0b1622 60%, #1a1030 100%);
border: 1px solid var(--color-divider);
font-family: var(--font-code); font-size: 12px; color: var(--color-neutral-500); letter-spacing: .04em;
}
#union-home .hnav_feature_title { display: block; font-size: 15px; color: var(--color-text); }
#union-home .hnav_feature:hover .hnav_feature_title { color: var(--color-accent); }
#union-home .hnav_panel.is-resources .hnav_item { padding: 20px 16px 24px; }
#union-home .hnav_panel.is-resources .hnav_item_title { font-size: 15px; }
#union-home .hnav_panel.is-resources .hnav_item_desc { font-size: 13px; }
#union-home .hnav_sublink:focus-visible, #union-home .hnav_feature:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 991px) {
#union-home .hnav_panel.is-solutions, #union-home .hnav_panel.is-resources, #union-home .hnav_panel.is-platform { grid-template-columns: 1fr 1fr; }
#union-home .hnav_panel.is-platform .hnav_item:nth-child(3n+1) { border-left: 1px solid var(--color-divider); }
#union-home .hnav_panel.is-platform .hnav_item:nth-child(odd) { border-left: 0; }
#union-home .hnav_panel.is-platform .hnav_item:nth-child(n+3) { border-top: 1px solid var(--color-divider); }
#union-home .hnav_col, #union-home .hnav_feature { border-left: 0; border-top: 1px solid var(--color-divider); }
#union-home .hnav_col:first-child { border-top: 0; }
}
@media (max-width: 860px) {
#union-home .hnav_panel.is-solutions, #union-home .hnav_panel.is-resources, #union-home .hnav_panel.is-platform { grid-template-columns: 1fr; }
#union-home .hnav_panel.is-platform .hnav_item { border-left: 0; }
#union-home .hnav_panel.is-platform .hnav_item:nth-child(n+2) { border-top: 1px solid var(--color-divider); }
#union-home .hnav_col, #union-home .hnav_feature { border-left: 0; }
}
/* ── built on Flyte ──
Two-up: the open-source claim on the left, three proof blocks on the right
separated by hairlines, same as the live site's treatment. */
#union-home .flyte-band {
display: grid; grid-template-columns: 1fr 1.05fr;
column-gap: clamp(32px, 5vw, 72px); row-gap: 32px; align-items: center;
}
#union-home .flyte-band_text { min-width: 0; }
#union-home .flyte-band_stats { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
#union-home .flyte-stat {
padding: 8px clamp(14px, 2vw, 26px);
border-left: 1px solid var(--color-divider);
display: flex; flex-direction: column; gap: 6px;
}
#union-home .flyte-stat:first-child { border-left: 0; padding-left: 0; }
#union-home .flyte-stat_n { font-size: clamp(30px, 4.6vw, 46px); line-height: 1; letter-spacing: -0.02em; color: var(--color-text); }
#union-home .flyte-stat_k { font-size: 14.5px; color: var(--color-neutral-500); text-wrap: pretty; }
/* 1776×244 white-on-transparent lockup, so it needs no colour treatment
on the dark ground; capped by width and centred in its column. */
#union-home .flyte-stat_lf { display: block; width: 100%; max-width: 190px; height: auto; }
@media (max-width: 991px) {
#union-home .flyte-band { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
#union-home .flyte-band_stats { grid-template-columns: 1fr; row-gap: 20px; }
#union-home .flyte-stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-divider); padding-top: 18px; }
#union-home .flyte-stat:first-child { border-top: 0; padding-top: 0; }
}
/* ── flat blocks ──
These read as cards but nothing about them is clickable, so the border,
fill and shadow are doing decorative work only. A hairline above each one
groups them into columns and keeps them distinct against the page ground
without the chrome. Interactive cards (cross-links, case studies) keep it. *//* zero-trust tiles: numbered, so no icon — the number is the leading element */
#union-home .zt-card .mono { margin-bottom: 2px; }
/* ── capability grid → section jump ──
Clicking a card in "How teams own their AI stack" scrolls to that segment.
Native `scroll-behavior: smooth` does the travel; `initCapJump()` in
script.js only offsets the landing by the sticky navbar's height. The
section it lands on is deliberately NOT marked — an accent rule flashing
down the edge of a full-width section read as the page reacting rather than
as an arrival, and the heading at the top of the viewport already says where
you are. *//* ══ FIGMA layout — responsive + overrides (Embed) ══════════════ *//* the factory is a wide, short drawing — unlike the 776:586 diagram it
replaced, width is the thing it wants, so it takes the whole column */
#union-home #hero-factory { width: 100%; }
#union-home .fig-link:hover { color: var(--color-accent-300); }
/* the page-wide `a { color: accent }` would repaint links on the yellow ground */
#union-home .fig-cta a:not(.fig-cta_btn), #union-home .fig-cta a:not(.fig-cta_btn):hover { color: #0b0b0c; }
#union-home .fig-cta a.fig-cta_btn { color: var(--color-accent); }
#union-home .fig-cta a.fig-cta_btn.is-ghost { color: #0b0b0c; }
#union-home .fig-cta a.fig-cta_btn:hover { background: #1c1c1e; border-color: #1c1c1e; color: var(--color-accent); }
#union-home .fig-cta a.fig-cta_btn.is-ghost:hover { background: rgba(11,11,12,0.08); border-color: #0b0b0c; color: #0b0b0c; }
/* the pillar widgets were authored full-bleed; inside a 704-wide column they
need to stop reserving the old width */
#union-home .fig-visual .sov-run, #union-home .fig-visual .elev-md, #union-home .fig-visual .elev-sm { max-width: 100%; }
@media (max-width: 1080px) {
#union-home .fig-row, #union-home .fig-row.is-flip, #union-home .fig-row.is-wide-copy { grid-template-columns: minmax(0,1fr); gap: clamp(28px,5vw,44px); }
#union-home .fig-row.is-flip .fig-copy, #union-home .fig-row.is-wide-copy .fig-copy { order: 0; }
#union-home .fig-row.is-flip .fig-visual, #union-home .fig-row.is-wide-copy .fig-visual { order: 0; }
#union-home .fig-points { margin-bottom: 24px; }
}
@media (max-width: 1080px) {
#union-home .fig-integ_grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px) {
#union-home .fig-integ_grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
#union-home .fig-hero_h1 { letter-spacing: -0.02em; }
#union-home .fig-eyebrow { margin-bottom: 10px; }
#union-home .fig-label { margin-bottom: 12px; font-size: 13.5px; }
#union-home .fig-roi { justify-content: flex-start; }
}
/* the queue widget was drawn for a full-bleed section; in the 704px visual
column its side panel collapsed to a ribbon, so stack it instead */
#union-home .fig-visual #home-algo .algo_body { grid-template-columns: minmax(0,1fr); }
#union-home .fig-visual #home-algo .algo_chartwrap { border-right: 0; border-bottom: 1px solid var(--theme-border); }
/* ── 05 open source: the Flyte purple callback from the comp ──── */
#union-home .fig-oss { background: #0d0717; border-top: 1px solid rgba(139,92,246,0.32); border-bottom: 1px solid rgba(139,92,246,0.32); }
#union-home .fig-oss .sec-kicker { color: #8b5cf6; }
#union-home .fig-oss .flyte-stat { border-left-color: rgba(139,92,246,0.38); }
#union-home .fig-oss .flyte-stat:first-child { border-left: 0; }
#union-home .fig-oss .flyte-stat_lf { max-width: 150px; }
/* the comp seats the LF lockup on its own chip rather than bare on the ground */
#union-home .fig-oss .flyte-stat:first-child { padding: 18px 22px; border-radius: var(--radius-md); background: rgba(255,255,255,0.045); align-items: center; margin-right: 14px; }
/* the three observability panes share one grid cell, so the widget keeps a
single height no matter which tab is showing (see setObsTab in script.js) */
#union-home .obs-panels { display: grid; }
#union-home .obs-panels > div { grid-area: 1 / 1; }
#union-home .obs-panels > div:not(.is-active) { visibility: hidden; pointer-events: none; }
/* the integration tiles link out to each integration's reference page; they are
anchors now, so stop the page-wide `a { color: accent }` repainting them and
give them the same lift the other cards get on hover. */
#union-home .fig-integ_card { text-decoration: none; color: inherit; transition: border-color .18s ease, transform .18s cubic-bezier(.2,.7,.3,1); }
#union-home .fig-integ_card:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-divider)); transform: translateY(-2px); }
#union-home .fig-integ_card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
#union-home .fig-integ_card:hover { transform: none; }
}
/* ═══ port-only: the page's relationship to the host site ═══
Carried over from the deployed sheet — these have no counterpart
in the repo, because the standalone prototype has its own navbar
and no host chrome to clear. */
#union-home {
--color-bg: #000000; /* live --_theme---background */
--color-surface: #18191a; /* live --_theme---card */
--color-text: #ffffff; /* live --_theme---heading */
--color-accent: #fcb51f; /* live --_theme---accent */ /* review round 7 (Barron): the accent moves to
the product's blurple — OKLCH hue 289.2, the hue of the app's own Pro
accent (#9a8fe0, --om-accent-pro) — at the same lightness the steel
accent held (L 0.660, so the documented ratios survive) and chroma
in the product blurple's own range (its token sits at C 0.118; the
accent takes 0.125, from the old steel's 0.030):
the accent now reads as an accent rather than another neutral. */
--color-accent-2: #f6c54c; /* the machine-derived stand-in follows: same
hue, same L 0.734, chroma at the same 2:3 proportion it held */
--color-divider: color-mix(in srgb, #ffffff 12%, transparent); /* live --_theme---border */
/* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
same step of any role matches the others in visual value. */
--color-neutral-100: #ffffff;
--color-neutral-200: #f2f3f3; /* live --_brand---gray-100 */
--color-neutral-300: #e3e5e6;
--color-neutral-400: #cccfd1; /* live --_theme---body (paragraphs) */
--color-neutral-500: #aeb2b5;
--color-neutral-600: #81858b; /* live --_brand---gray-350 */
--color-neutral-700: #72757a; /* live --_brand---gray-400 */
--color-neutral-800: #3a3d40;
--color-neutral-900: #18191a; /* live --_brand---dark, the card ground */
--color-accent-100: #fdf4dc;
--color-accent-200: #fbe7b4;
--color-accent-300: #f9d67f;
--color-accent-400: #f6c54c;
--color-accent-500: #fcb51f;
--color-accent-600: #ce9712;
--color-accent-700: #a5780c;
--color-accent-800: #785607;
--color-accent-900: #4c3604;
--color-accent-2-100: #fdf4dc;
--color-accent-2-200: #fbe7b4;
--color-accent-2-300: #f9d67f;
--color-accent-2-400: #f6c54c;
--color-accent-2-500: #fcb51f;
--color-accent-2-600: #ce9712;
--color-accent-2-700: #a5780c;
--color-accent-2-800: #785607;
--color-accent-2-900: #4c3604;
/* Deck section-divider ground — review round 3: saturation as presence.
Dividers take a saturated deep indigo (hue 277, the neutral ramp's own
family; C 0.094 — written when the accent held C 0.030, before the
round-7 blurple raised it past the ground's) with a lighter bloom and
a ghost tint of the same hue, while the slide grounds stay
desaturated. Deck-scale fills only — not interface colors. */
--color-section: #33270a;
--color-section-glow: #6b5109;
--color-section-ghost: #b8860f;
--font-heading: "Yellix", system-ui, sans-serif;
--font-heading-weight: 600; /* live h2/h3 weight */
--font-body: "Yellix", system-ui, sans-serif;
/* The mono face this file already @font-faces above. It used to be declared
in home/style.css only, which meant every other page loading these tokens
resolved var(--font-code) to nothing and rendered code in Yellix. */
--font-code: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--space-1: 2.8px;
--space-2: 5.6px;
--space-3: 8.4px;
--space-4: 11.2px;
--space-6: 16.8px;
--space-8: 22.4px;
/* Rounder than the original Nocturne values, to sit with union.ai's live
system (.5rem / 1rem / 1.5rem). Buttons and pills go fully round below. */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
/* Elevation — derived from the ground: soft ink-tinted shadows on a
light theme, a hairline edge + ambient darkness on a dark one. */
--shadow-sm: 0 0 0 1px rgba(255,255,255,0.06);
--shadow-md: 0 0 0 1px rgba(255,255,255,0.08), 0 6px 18px rgba(0,0,0,0.55);
--shadow-lg: 0 0 0 1px rgba(255,255,255,0.11), 0 16px 40px rgba(0,0,0,0.65);
}
#union-home {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
}
#union-home code, #union-home pre, #union-home kbd, #union-home samp { font-family: var(--font-code); }
#union-home { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500; }
#union-home p { margin: 0 0 var(--space-3); }
#union-home a { color: var(--color-accent); text-underline-offset: 3px; }
#union-home img { display: block; max-width: 100%; }
#union-home figure { margin: 0; }
#union-home figcaption {
font-size: 11px; margin-top: var(--space-1);
color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* ═══ _shared/union-code-theme.css ═══ *//* union-code-theme.css — syntax highlighting for every code block in website/union/.
Tokens lifted verbatim from ../../color-palette/union-code-theme.css
("Union Yellow Dark" v1). That file is the source of truth: if the palette
changes, re-copy sections 1 and 1c below rather than editing them here.
Every token meets WCAG AA (4.5:1) on its own card background in both themes.
Section 2 maps the tokens onto the class names the prototypes already use:
.tok-* model-factory, advanced-scheduling
.sov-tok-* sovereign-ai
.code-* home (emitted by script.js)
*//* ── 1. Tokens ─────────────────────────────────────────────────────────── */
#union-home {
/* surface */
--code-bg: #18191a; /* = --brand-dark, the design-system card */
--code-border: #ffffff1f;/* = --theme-border */
--code-radius: 1rem; /* = --radius-medium */
/* neutrals — carry ~70% of the characters in a snippet */
--code-fg: #e6e8ea; /* identifiers, variables, plain text */
--code-param: #c9ced4; /* keyword-argument + parameter names */
--code-punct: #9aa0a6; /* = -> , : ( ) [ ] and all operators */
--code-comment: #848c95; /* italic — the quietest token */
/* accents — four hues, nothing else */
--code-decorator: #fdb51f; /* Union Yellow · @env.task, @flyte.trace */
--code-keyword: #b69bf5; /* async def await return try except for */
--code-constant: #b69bf5; /* None True False self cls (italic) */
--code-function: #74b6f2; /* function definitions + call sites */
--code-class: #5fcbc0; /* classes, type annotations, builtins */
--code-string: #8fcb7a; /* string + f-string literals */
--code-number: #ef9b55; /* numeric literals */
/* console / diff extras (terminal blocks, +/- blocks) */
--code-error: #e8676a;
--code-added: #8fcb7a;
--code-removed: #e8676a;
--code-muted: #848c95;
/* chrome */
--code-selection: rgba(253, 181, 31, .22);
--code-line-highlight:rgba(253, 181, 31, .08);
--code-inline-bg: #242628;
--code-scrollbar: #3a3d40;
}
#union-home pre {
border: 1px solid var(--code-border);
border-radius: var(--code-radius);
padding: 1.5rem;
overflow-x: auto;
}
/* ══════════════════════════════════════════════════════════════
WEBFLOW: paste into an Embed (or the page ) — the Designer
can't express keyframes, media queries, pseudo-states, or
attribute selectors.
══════════════════════════════════════════════════════════════ */
#union-home { max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#union-home { margin: 0; max-width: 100%; background: var(--color-bg); overflow-x: clip; }
#union-home img, #union-home svg, #union-home select { max-width: 100%; }
#union-home { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
#union-home { scroll-behavior: auto; }
}
#union-home { font-size: 17px; }
/* Content links only. The accent CTAs are s, and a bare `a:hover` (0-1-1)
outranks `.cta-accent` (0-1-0) — which repainted the Sign Up label
accent-300 on hover: pale yellow on the accent-400 hover fill, about
1.1:1. The buttons also pin their own colours below, so the fix survives
the Webflow port, where the host site has link rules of its own. */
#union-home a { color: var(--color-accent); }
/* ══════════════════════════════════════════════════════════════════════
SOVEREIGN AI + AI FACTORY + APPS — merged in from the
union/sovereign-ai, union/model-factory and flyte/home prototypes.
Those pages were authored against union-system.css (the live Webflow
bundle: Yellix, #000 ground, #fcb51f accent). This page runs on the
Nocturne system in union.css. Rather than rewrite every declaration,
the bridge below re-points the union-system token names at Nocturne
values, so the ported rules stay diffable against their source files.
Everything in this block is embed-only (SVG styles, pseudo-states,
keyframes, media queries).
═════════════════════════════════════════════════════════════════════ */
#union-home {
/* union-system → Nocturne token bridge */
--theme-background: var(--color-bg);
--theme-heading: var(--color-neutral-100);
--theme-body: var(--color-neutral-300);
--theme-accent: var(--color-accent);
--theme-border: var(--color-divider);
--theme-card: var(--color-neutral-900);
--brand-gray-100: var(--color-neutral-100);
--brand-gray-300: var(--color-neutral-300);
--brand-gray-350: var(--color-neutral-500);
--brand-gray-400: var(--color-neutral-500);
--brand-yellow-500: var(--color-accent);
--brand-green: #58b97a;
--brand-orange: #f0923f;
--brand-red: #e07b73;
--brand-purple: #a678f5;
/* --font-code now comes from ../_shared/union-nocturne.css */
--radius-small: 8px;
--radius-medium: 12px;
--radius-large: 20px;
/* code-token colors, matching the palette script.js already renders with */
}
/* ══════════════════════════════════════════════════════════════════════
The HERO DENSITY block that used to live here tuned the fold with
!important overrides against the pre-Figma markup: a `min-height`-pinned
hero, a `[data-screen-label="Logos"]` marquee and `#resources > div`.
That structure is gone — the fold is now owned by .fig-hero / .fig-trust /
.fig-intro above, which is the only place to tune it.
═════════════════════════════════════════════════════════════════════ *//* ── host navbar CTA (Webflow port only) ──────────────────────────
Deliberately UNSCOPED: the site's navbar renders outside #union-home.
This stylesheet only loads on the home page, so the rules are page-scoped
by virtue of that — every other page keeps its own navbar CTA.
script.js relabels the navbar's "Chat with an engineer" buttons to
"Sign Up", points them at the hero CTA's href, and flips the attribute
once the hero scrolls away. Only the button on the bar itself carries the
hook — the copy in the mobile menu stays visible, since the hamburger
opens at any scroll position. visibility (not display) keeps the nav from
reflowing when it appears. *//* Hidden from FIRST PAINT, before script.js has tagged anything. script.js is
deferred, so without this the host navbar's own "Chat with an engineer" is
painted at the top right and only disappears once the script runs — a visible
flash of the wrong button. This rule needs no attribute, so it applies
immediately; the reveal rule below is more specific and still wins. */
.navigation .navbar2_button-wrapper > a.button { opacity: 0; visibility: hidden; }
.navigation a[data-nav-signup] {
opacity: 0;
visibility: hidden;
transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.navigation a[data-nav-signup][data-nav-signup-on="1"] {
opacity: 1;
visibility: visible;
transition: opacity 240ms ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
.navigation a[data-nav-signup] { transition: none; }
}
/* ═══ port-only: the page's relationship to the host site ═══
Carried over from the deployed sheet — these have no counterpart
in the repo, because the standalone prototype has its own navbar
and no host chrome to clear. */
#union-home {
--color-bg: #000000; /* live --_theme---background */
--color-surface: #18191a; /* live --_theme---card */
--color-text: #ffffff; /* live --_theme---heading */
--color-accent: #fcb51f; /* live --_theme---accent */ /* review round 7 (Barron): the accent moves to
the product's blurple — OKLCH hue 289.2, the hue of the app's own Pro
accent (#9a8fe0, --om-accent-pro) — at the same lightness the steel
accent held (L 0.660, so the documented ratios survive) and chroma
in the product blurple's own range (its token sits at C 0.118; the
accent takes 0.125, from the old steel's 0.030):
the accent now reads as an accent rather than another neutral. */
--color-accent-2: #f6c54c; /* the machine-derived stand-in follows: same
hue, same L 0.734, chroma at the same 2:3 proportion it held */
--color-divider: color-mix(in srgb, #ffffff 12%, transparent); /* live --_theme---border */
/* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
same step of any role matches the others in visual value. */
--color-neutral-100: #ffffff;
--color-neutral-200: #f2f3f3; /* live --_brand---gray-100 */
--color-neutral-300: #e3e5e6;
--color-neutral-400: #cccfd1; /* live --_theme---body (paragraphs) */
--color-neutral-500: #aeb2b5;
--color-neutral-600: #81858b; /* live --_brand---gray-350 */
--color-neutral-700: #72757a; /* live --_brand---gray-400 */
--color-neutral-800: #3a3d40;
--color-neutral-900: #18191a; /* live --_brand---dark, the card ground */
--color-accent-100: #fdf4dc;
--color-accent-200: #fbe7b4;
--color-accent-300: #f9d67f;
--color-accent-400: #f6c54c;
--color-accent-500: #fcb51f;
--color-accent-600: #ce9712;
--color-accent-700: #a5780c;
--color-accent-800: #785607;
--color-accent-900: #4c3604;
--color-accent-2-100: #fdf4dc;
--color-accent-2-200: #fbe7b4;
--color-accent-2-300: #f9d67f;
--color-accent-2-400: #f6c54c;
--color-accent-2-500: #fcb51f;
--color-accent-2-600: #ce9712;
--color-accent-2-700: #a5780c;
--color-accent-2-800: #785607;
--color-accent-2-900: #4c3604;
/* Deck section-divider ground — review round 3: saturation as presence.
Dividers take a saturated deep indigo (hue 277, the neutral ramp's own
family; C 0.094 — written when the accent held C 0.030, before the
round-7 blurple raised it past the ground's) with a lighter bloom and
a ghost tint of the same hue, while the slide grounds stay
desaturated. Deck-scale fills only — not interface colors. */
--color-section: #33270a;
--color-section-glow: #6b5109;
--color-section-ghost: #b8860f;
--font-heading: "Yellix", system-ui, sans-serif;
--font-heading-weight: 600; /* live h2/h3 weight */
--font-body: "Yellix", system-ui, sans-serif;
/* The mono face this file already @font-faces above. It used to be declared
in home/style.css only, which meant every other page loading these tokens
resolved var(--font-code) to nothing and rendered code in Yellix. */
--font-code: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--space-1: 2.8px;
--space-2: 5.6px;
--space-3: 8.4px;
--space-4: 11.2px;
--space-6: 16.8px;
--space-8: 22.4px;
/* Rounder than the original Nocturne values, to sit with union.ai's live
system (.5rem / 1rem / 1.5rem). Buttons and pills go fully round below. */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
/* Elevation — derived from the ground: soft ink-tinted shadows on a
light theme, a hairline edge + ambient darkness on a dark one. */
--shadow-sm: 0 0 0 1px rgba(255,255,255,0.06);
--shadow-md: 0 0 0 1px rgba(255,255,255,0.08), 0 6px 18px rgba(0,0,0,0.55);
--shadow-lg: 0 0 0 1px rgba(255,255,255,0.11), 0 16px 40px rgba(0,0,0,0.65);
}
#union-home {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
}
#union-home code, #union-home pre, #union-home kbd, #union-home samp { font-family: var(--font-code); }
#union-home { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500; }
#union-home p { margin: 0 0 var(--space-3); }
#union-home a { color: var(--color-accent); text-underline-offset: 3px; }
#union-home img { display: block; max-width: 100%; }
#union-home figure { margin: 0; }
#union-home figcaption {
font-size: 11px; margin-top: var(--space-1);
color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* union-code-theme.css — syntax highlighting for every code block in website/union/.
Tokens lifted verbatim from ../../color-palette/union-code-theme.css
("Union Yellow Dark" v1). That file is the source of truth: if the palette
changes, re-copy sections 1 and 1c below rather than editing them here.
Every token meets WCAG AA (4.5:1) on its own card background in both themes.
Section 2 maps the tokens onto the class names the prototypes already use:
.tok-* model-factory, advanced-scheduling
.sov-tok-* sovereign-ai
.code-* home (emitted by script.js)
*/
/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
#union-home {
/* surface */
--code-bg: #18191a; /* = --brand-dark, the design-system card */
--code-border: #ffffff1f;/* = --theme-border */
--code-radius: 1rem; /* = --radius-medium */
/* neutrals — carry ~70% of the characters in a snippet */
--code-fg: #e6e8ea; /* identifiers, variables, plain text */
--code-param: #c9ced4; /* keyword-argument + parameter names */
--code-punct: #9aa0a6; /* = -> , : ( ) [ ] and all operators */
--code-comment: #848c95; /* italic — the quietest token */
/* accents — four hues, nothing else */
--code-decorator: #fdb51f; /* Union Yellow · @env.task, @flyte.trace */
--code-keyword: #b69bf5; /* async def await return try except for */
--code-constant: #b69bf5; /* None True False self cls (italic) */
--code-function: #74b6f2; /* function definitions + call sites */
--code-class: #5fcbc0; /* classes, type annotations, builtins */
--code-string: #8fcb7a; /* string + f-string literals */
--code-number: #ef9b55; /* numeric literals */
/* console / diff extras (terminal blocks, +/- blocks) */
--code-error: #e8676a;
--code-added: #8fcb7a;
--code-removed: #e8676a;
--code-muted: #848c95;
/* chrome */
--code-selection: rgba(253, 181, 31, .22);
--code-line-highlight:rgba(253, 181, 31, .08);
--code-inline-bg: #242628;
--code-scrollbar: #3a3d40;
}
#union-home pre {
border: 1px solid var(--code-border);
border-radius: var(--code-radius);
padding: 1.5rem;
overflow-x: auto;
}
/* ══════════════════════════════════════════════════════════════
WEBFLOW: paste into an Embed (or the page ) — the Designer
can't express keyframes, media queries, pseudo-states, or
attribute selectors.
══════════════════════════════════════════════════════════════ */
#union-home { max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#union-home { margin: 0; max-width: 100%; background: var(--color-bg); overflow-x: clip; }
#union-home img, #union-home svg, #union-home select { max-width: 100%; }
#union-home { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
#union-home { scroll-behavior: auto; }
}
#union-home { font-size: 17px; }
/* Content links only. The accent CTAs are s, and a bare `a:hover` (0-1-1)
outranks `.cta-accent` (0-1-0) — which repainted the Sign Up label
accent-300 on hover: pale yellow on the accent-400 hover fill, about
1.1:1. The buttons also pin their own colours below, so the fix survives
the Webflow port, where the host site has link rules of its own. */
#union-home a { color: var(--color-accent); }
/* ══════════════════════════════════════════════════════════════════════
SOVEREIGN AI + AI FACTORY + APPS — merged in from the
union/sovereign-ai, union/model-factory and flyte/home prototypes.
Those pages were authored against union-system.css (the live Webflow
bundle: Yellix, #000 ground, #fcb51f accent). This page runs on the
Nocturne system in union.css. Rather than rewrite every declaration,
the bridge below re-points the union-system token names at Nocturne
values, so the ported rules stay diffable against their source files.
Everything in this block is embed-only (SVG styles, pseudo-states,
keyframes, media queries).
═════════════════════════════════════════════════════════════════════ */
#union-home {
/* union-system → Nocturne token bridge */
--theme-background: var(--color-bg);
--theme-heading: var(--color-neutral-100);
--theme-body: var(--color-neutral-300);
--theme-accent: var(--color-accent);
--theme-border: var(--color-divider);
--theme-card: var(--color-neutral-900);
--brand-gray-100: var(--color-neutral-100);
--brand-gray-300: var(--color-neutral-300);
--brand-gray-350: var(--color-neutral-500);
--brand-gray-400: var(--color-neutral-500);
--brand-yellow-500: var(--color-accent);
--brand-green: #58b97a;
--brand-orange: #f0923f;
--brand-red: #e07b73;
--brand-purple: #a678f5;
/* --font-code now comes from ../_shared/union-nocturne.css */
--radius-small: 8px;
--radius-medium: 12px;
--radius-large: 20px;
/* code-token colors, matching the palette script.js already renders with */
}
/* ══════════════════════════════════════════════════════════════════════
The HERO DENSITY block that used to live here tuned the fold with
!important overrides against the pre-Figma markup: a `min-height`-pinned
hero, a `[data-screen-label="Logos"]` marquee and `#resources > div`.
That structure is gone — the fold is now owned by .fig-hero / .fig-trust /
.fig-intro above, which is the only place to tune it.
═════════════════════════════════════════════════════════════════════ */
/* ── host navbar CTA (Webflow port only) ──────────────────────────
Deliberately UNSCOPED: the site's navbar renders outside #union-home.
This stylesheet only loads on the home page, so the rules are page-scoped
by virtue of that — every other page keeps its own navbar CTA.
script.js relabels the navbar's "Chat with an engineer" buttons to
"Sign Up", points them at the hero CTA's href, and flips the attribute
once the hero scrolls away. Only the button on the bar itself carries the
hook — the copy in the mobile menu stays visible, since the hamburger
opens at any scroll position. visibility (not display) keeps the nav from
reflowing when it appears. */
/* Hidden from FIRST PAINT, before script.js has tagged anything. script.js is
deferred, so without this the host navbar's own "Chat with an engineer" is
painted at the top right and only disappears once the script runs — a visible
flash of the wrong button. This rule needs no attribute, so it applies
immediately; the reveal rule below is more specific and still wins. */
.navigation .navbar2_button-wrapper > a.button { opacity: 0; visibility: hidden; }
.navigation a[data-nav-signup] {
opacity: 0;
visibility: hidden;
transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.navigation a[data-nav-signup][data-nav-signup-on="1"] {
opacity: 1;
visibility: visible;
transition: opacity 240ms ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
.navigation a[data-nav-signup] { transition: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
WEBFLOW PORT ONLY — not in the repo prototype.
1. The site's .navigation is position:fixed and ~8rem tall, so the wrapper
carries the same clearance the site's own first section uses
(.section_header26 { padding-top: 8rem }), and anchor targets get a
matching scroll-margin so #demo/#platform don't land under the bar.
2. The stock `section - cta` ComponentInstance can't be hidden through the
API, so it is hidden here.
══════════════════════════════════════════════════════════════════════════ */
#union-home { padding-top: 8rem; }
#union-home [id] { scroll-margin-top: 8.5rem; }
[id] { scroll-margin-top: 8.5rem; }
.main-wrapper > section.section_cta25 { display: none; }