/* ═══ _shared/union-system.css ═══ */ /* union-system.css — union.ai design system for Webflow-handoff prototypes. Tokens extracted from the live Webflow CSS bundle (Sept 2026). Every class below already exists in the union.ai Webflow project — prototypes reuse these names so the dev maps elements 1:1. */ @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-system.css ═══ */ /* union-system.css — union.ai design system for Webflow-handoff prototypes. Tokens extracted from the live Webflow CSS bundle (Sept 2026). Every class below already exists in the union.ai Webflow project — prototypes reuse these names so the dev maps elements 1:1. */ @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-scheduling { /* brand */ --brand-dark: #18191a; --brand-gray-100: #f2f3f3; --brand-gray-300: #cccfd1; --brand-gray-350: #81858b; --brand-gray-400: #72757a; --brand-yellow-500: #fcb51f; --brand-purple: #6f2aef; --brand-red: #cd3234; --brand-green: #78b856; --brand-orange: #e8883a; --brand-blue: #3378f5; --brand-pink: #ad3abb; --brand-brown: #a65a17; --brand-blue-dark: #1648b8; --brand-green-dark: #008013; --brand-red-dark: #980202; --white-12: #ffffff1f; /* theme roles */ --theme-background: #000000; --theme-heading: #ffffff; --theme-body: var(--brand-gray-300); --theme-accent: var(--brand-yellow-500); --theme-border: var(--white-12); --theme-card: var(--brand-dark); /* type */ --font-body: "Yellix", Arial, sans-serif; --font-heading: "Yellix", Arial, sans-serif; --font-code: "IBM Plex Mono", Tahoma, sans-serif; --heading-weight: 600; --heading-line-height: 1.05; /* ui — note: tighter radii than flyte.org */ --radius-small: .5rem; --radius-medium: 1rem; --radius-large: 1.5rem; --border-width: 1px; } #union-scheduling *, #union-scheduling *::before, #union-scheduling *::after { box-sizing: border-box; } #union-scheduling { margin: 0; background-color: var(--theme-background); color: var(--theme-body); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } #union-scheduling h1, #union-scheduling h2, #union-scheduling h3, #union-scheduling h4, #union-scheduling h5, #union-scheduling h6 { margin: 0; color: var(--theme-heading); font-family: var(--font-heading); font-weight: var(--heading-weight); line-height: var(--heading-line-height); } #union-scheduling p { margin: 0; } #union-scheduling a { color: inherit; } #union-scheduling img { max-width: 100%; display: block; } #union-scheduling code, #union-scheduling pre { font-family: var(--font-code); } /* ---- Client-First structure ---- */ #union-scheduling .padding-global { padding-left: 5%; padding-right: 5%; } #union-scheduling .container-large { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; } #union-scheduling .container-medium { width: 100%; max-width: 64rem; margin-left: auto; margin-right: auto; } #union-scheduling .container-small { width: 100%; max-width: 48rem; margin-left: auto; margin-right: auto; } #union-scheduling .padding-section-large { padding-top: 7rem; padding-bottom: 7rem; } #union-scheduling .padding-section-medium { padding-top: 5rem; padding-bottom: 5rem; } #union-scheduling .padding-section-small { padding-top: 3rem; padding-bottom: 3rem; } /* Client-First directional modifiers — pair with a padding-section-* class to keep the padding on one side only (e.g. `padding-section-large padding-top`). */ #union-scheduling .padding-top { padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; } #union-scheduling .padding-bottom { padding-top: 0 !important; padding-right: 0 !important; padding-left: 0 !important; } /* ---- headings ---- */ #union-scheduling .heading-style-h1 { font-size: 3.5rem; line-height: 1.2; font-weight: 700; } #union-scheduling .heading-style-h2 { font-size: 3rem; line-height: var(--heading-line-height); font-weight: 700; } #union-scheduling .heading-style-h3 { font-size: 2.5rem; line-height: 1.1; font-weight: var(--heading-weight); } #union-scheduling .heading-style-h4 { font-size: 2rem; line-height: 1.2; font-weight: var(--heading-weight); } #union-scheduling .heading-style-h5 { font-size: 1.5rem; line-height: 1.3; font-weight: var(--heading-weight); } #union-scheduling .heading-style-h6 { font-size: 1.25rem; line-height: 1.4; font-weight: var(--heading-weight); } /* ---- text utilities ---- */ #union-scheduling .text-size-large { font-size: 1.25rem; } #union-scheduling .text-size-medium { font-size: 1.125rem; } #union-scheduling .text-size-regular { font-size: 1rem; } #union-scheduling .text-size-small { font-size: .875rem; } #union-scheduling .text-weight-normal { font-weight: 400; } #union-scheduling .text-weight-medium { font-weight: 500; } #union-scheduling .text-weight-semibold { font-weight: 600; } #union-scheduling .text-align-center { text-align: center; } #union-scheduling .max-width-small { max-width: 30rem; } #union-scheduling .max-width-medium { max-width: 42rem; } #union-scheduling .max-width-large { max-width: 56rem; } #union-scheduling .align-center { margin-left: auto; margin-right: auto; } #union-scheduling .hide { display: none; } /* tagline = bordered pill chip (unlike flyte.org's bare text tagline) */ #union-scheduling .text-style-tagline { display: inline-block; border: 1px solid var(--theme-border); border-radius: var(--radius-large); background-color: var(--theme-border); padding: .5rem 1rem; margin-bottom: 1rem; font-size: .875rem; font-weight: 600; color: var(--theme-heading); text-decoration: none; } /* ---- spacers (empty divs, height only) ---- */ #union-scheduling .spacer-tiny { height: .25rem; } #union-scheduling .spacer-xxsmall { height: .5rem; } #union-scheduling .spacer-xsmall { height: .75rem; } #union-scheduling .spacer-small { height: 1rem; } #union-scheduling .spacer-medium { height: 1.5rem; } #union-scheduling .spacer-large { height: 2.5rem; } #union-scheduling .spacer-xlarge { height: 3.5rem; } #union-scheduling .spacer-xxlarge { height: 5rem; } /* ---- buttons ---- */ #union-scheduling .button { display: flex; justify-content: center; align-items: center; column-gap: .375rem; row-gap: .375rem; border: 1px solid var(--theme-accent); border-radius: var(--radius-large); background-color: var(--theme-accent); color: #000000; text-align: center; padding: .5rem 1.25rem; font-weight: 600; text-decoration: none; cursor: pointer; } #union-scheduling .button.is-secondary { border-color: var(--theme-border); background-color: transparent; color: var(--theme-accent); } #union-scheduling .button-group { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; row-gap: 1rem; } /* ---- dark card — the site's signature surface ---- */ #union-scheduling .card { background-color: var(--theme-card); border: 1px solid var(--theme-border); border-radius: var(--radius-medium); } @media (max-width: 991px) { #union-scheduling .heading-style-h1 { font-size: 3.25rem; } #union-scheduling .heading-style-h2 { font-size: 2.75rem; } #union-scheduling .heading-style-h3 { font-size: 2.25rem; } #union-scheduling .padding-section-large { padding-top: 6rem; padding-bottom: 6rem; } } @media (max-width: 767px) { #union-scheduling .heading-style-h1 { font-size: 2.5rem; } #union-scheduling .heading-style-h2 { font-size: 2.25rem; } #union-scheduling .heading-style-h3 { font-size: 2rem; } #union-scheduling .heading-style-h4 { font-size: 1.75rem; } #union-scheduling .padding-section-large { padding-top: 4rem; padding-bottom: 4rem; } #union-scheduling .padding-section-medium { padding-top: 3rem; padding-bottom: 3rem; } } /* ── prototype deviation: body-text legibility ── The values above are extracted from the live Webflow bundle. These four utilities carry almost all the non-heading prose on the three platform pages, and at the extracted sizes they read small on the dark ground, so each is bumped 1px. Headings are untouched. If the Webflow project adopts this, fold the values in above and delete this block. */ #union-scheduling .text-size-large { font-size: 1.3125rem; } /* was 1.25rem / 20px → 21px */ #union-scheduling .text-size-medium { font-size: 1.1875rem; } /* was 1.125rem / 18px → 19px */ #union-scheduling .text-size-regular { font-size: 1.0625rem; } /* was 1rem / 16px → 17px */ #union-scheduling .text-size-small { font-size: .9375rem; } /* was .875rem / 14px → 15px *//* ── prototype deviation: scrollbars ── The default light scrollbars sit badly on the dark code panels and console recreations — they are the first thing you notice in a snippet that scrolls sideways. Thin, low-contrast, brighter on hover. Firefox takes the standard properties; WebKit the pseudo-elements. Same treatment as ../home/. */ #union-scheduling * { scrollbar-width: thin; scrollbar-color: rgba(236,234,228,.18) transparent; } #union-scheduling ::-webkit-scrollbar { width: 10px; height: 10px; } #union-scheduling ::-webkit-scrollbar-track { background: transparent; } #union-scheduling ::-webkit-scrollbar-thumb { background: rgba(236,234,228,.16); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } #union-scheduling ::-webkit-scrollbar-thumb:hover { background: rgba(236,234,228,.30); background-clip: content-box; } #union-scheduling ::-webkit-scrollbar-corner { background: transparent; } /* ── prototype deviation: in-page anchor behaviour ── The hero's secondary CTA and the proof rows link to sections on the same page. Without these two rules the browser jumps instantly and lands with the heading underneath the sticky navbar. Smooth scroll is disabled for visitors who asked for reduced motion. */ #union-scheduling { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { #union-scheduling { scroll-behavior: auto; } } #union-scheduling [id] { scroll-margin-top: 6rem; } /* some anchors target widgets, not sections *//* ═══ _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-scheduling { /* 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-scheduling .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-scheduling pre, #union-scheduling pre code, #union-scheduling .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-scheduling pre { border: 1px solid var(--code-border); border-radius: var(--code-radius); padding: 1.5rem; overflow-x: auto; } #union-scheduling pre ::selection, #union-scheduling pre::selection { background: var(--code-selection); } #union-scheduling pre::-webkit-scrollbar-thumb { background: var(--code-scrollbar); border-radius: 4px; } /* inline `code` inside body copy */ #union-scheduling :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-scheduling .tok-kw, #union-scheduling .sov-tok-kw, #union-scheduling .code-kw { color: var(--code-keyword); } #union-scheduling .tok-str, #union-scheduling .sov-tok-str, #union-scheduling .code-str { color: var(--code-string); } #union-scheduling .tok-title, #union-scheduling .sov-tok-title, #union-scheduling .code-title { color: var(--code-function); } #union-scheduling .tok-param, #union-scheduling .code-param { color: var(--code-param); } #union-scheduling .tok-meta, #union-scheduling .sov-tok-meta, #union-scheduling .code-meta { color: var(--code-decorator); } #union-scheduling .tok-comment, #union-scheduling .code-comment { color: var(--code-comment); font-style: italic; } #union-scheduling .tok-num, #union-scheduling .sov-tok-num, #union-scheduling .code-num { color: var(--code-number); } #union-scheduling .tok-class, #union-scheduling .sov-tok-class, #union-scheduling .code-class { color: var(--code-class); } #union-scheduling .code-punct { color: var(--code-punct); } #union-scheduling .code-plain { color: var(--code-fg); } /* the light theme is opt-in: add .u-theme-light to a code block's container *//* ═══ _shared/union-flyte-band.css ═══ *//* ══════════════════════════════════════════════════════════════════════════ union-flyte-band.css — the "Open source at the core" proof band Shared by sovereign-ai/, model-factory/ and advanced-scheduling/. Ported from union/home/, which authors it against the Nocturne tokens in home/union.css. Re-expressed here in union-system's --theme-* names so the platform pages need no token bridge for it. The markup is identical on all three pages — one HTML Embed, or a Webflow symbol, at port time. ══════════════════════════════════════════════════════════════════════════ */ #union-scheduling .flyte-band { display: grid; grid-template-columns: 1fr 1.05fr; column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 2rem; align-items: center; } #union-scheduling .flyte-band_text { min-width: 0; } #union-scheduling .flyte-band_lede { max-width: 35rem; } #union-scheduling .flyte-band_stats { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; } #union-scheduling .flyte-stat { padding: .5rem clamp(.875rem, 2vw, 1.625rem); border-left: 1px solid var(--theme-border); display: flex; flex-direction: column; gap: .375rem; } #union-scheduling .flyte-stat:first-child { border-left: 0; padding-left: 0; } #union-scheduling .flyte-stat_n { font-size: clamp(1.875rem, 4.6vw, 2.875rem); line-height: 1; letter-spacing: -.02em; color: var(--theme-heading); } #union-scheduling .flyte-stat_k { font-size: .9375rem; color: var(--theme-body); text-wrap: pretty; } /* 1776×244 white-on-transparent lockup, so it needs no colour treatment on the dark ground; capped by width and left-aligned in its column. */ #union-scheduling .flyte-stat_lf { display: block; width: 100%; max-width: 11.875rem; height: auto; } @media (max-width: 991px) { #union-scheduling .flyte-band { grid-template-columns: 1fr; } } @media (max-width: 560px) { #union-scheduling .flyte-band_stats { grid-template-columns: 1fr; row-gap: 1.25rem; } #union-scheduling .flyte-stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--theme-border); padding-top: 1.125rem; } #union-scheduling .flyte-stat:first-child { border-top: 0; padding-top: 0; } } /* ═══ _shared/union-fig.css ═══ *//* ══════════════════════════════════════════════════════════════════════════ union-fig.css — the home page's design language, shared by the platform pages (advanced-scheduling, agents, ai-factory, durability, inference, sovereign-ai). Source of truth: the "Home — Redesign" comp (Figma L1U2YQLR…, page 14:8) as realised in union/home/style.css. The geometry it encodes: · 1440 frame, 64px gutters, 1312 of content (.u-wrap) · 130px of air above and below every section (.fig-sec) · alternating grounds, black / near-black (.is-alt) · centred intro pairs — big h2 over a 700px lead (.fig-intro) · content rows as a 420 / 804 split with an 88px gap, sides alternating down the page (.fig-row .is-flip) · each row led by a numbered eyebrow, a yellow uppercase label, an h2, a lead, dot points, a link (.fig-eyebrow …) · a full-bleed yellow closing block (.fig-cta) Two token systems are in play across these pages — union-system.css (--theme-* and --brand-*) and union-nocturne.css (--color-*). The two share no names, so every colour below reads the theme token first and falls back to the nocturne one. Nothing here needs a per-page bridge. ══════════════════════════════════════════════════════════════════════════ */ #union-scheduling { --fig-accent: var(--theme-accent, var(--color-accent, #fcb51f)); --fig-heading: var(--theme-heading, var(--color-text, #ffffff)); --fig-body: var(--theme-body, var(--color-neutral-400, #cccfd1)); --fig-muted: var(--brand-gray-350, var(--color-neutral-500, #aeb2b5)); --fig-faint: var(--brand-gray-400, var(--color-neutral-600, #81858b)); --fig-border: var(--theme-border, var(--color-divider, rgba(255,255,255,.12))); --fig-ground: #0c0c0d; /* the alternating band, one step off black */ --fig-ink: #0b0b0c; /* type on the yellow block */ } /* ── container ─────────────────────────────────────────────────────── */ #union-scheduling .u-wrap { max-width: 1440px; margin: 0 auto; padding-left: clamp(20px, 4.4vw, 64px); padding-right: clamp(20px, 4.4vw, 64px); } /* ── section rhythm + alternating grounds ──────────────────────────── */ #union-scheduling .fig-sec { padding-top: clamp(56px, 9vw, 130px); padding-bottom: clamp(56px, 9vw, 130px); } #union-scheduling .fig-sec.is-alt { background: var(--fig-ground); } #union-scheduling .fig-sec.is-tight { padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(40px, 6vw, 84px); } /* ── centred intro pair ────────────────────────────────────────────── */ #union-scheduling .fig-intro { text-align: center; } #union-scheduling .fig-intro_h2 { font-size: clamp(28px, 4.6vw, 56px); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 18px; color: var(--fig-heading); text-wrap: balance; } #union-scheduling .fig-intro_sub { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--fig-body); max-width: 700px; margin: 0 auto; text-wrap: pretty; } #union-scheduling .fig-intro_body { margin-top: clamp(40px, 5.5vw, 72px); text-align: left; } /* ── content row: copy one side, visual the other ──────────────────── */ #union-scheduling .fig-row { display: grid; grid-template-columns: minmax(0, 420fr) minmax(0, 804fr); gap: clamp(28px, 5.2vw, 88px); /* start, not center: the comp top-aligns both columns, and centring left the heading stranded 200-400px down a tall row — so a contents card that jumped to the section landed with its title well below the fold line. */ align-items: start; } /* `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-scheduling .fig-row.is-flip { grid-template-columns: minmax(0, 804fr) minmax(0, 420fr); } #union-scheduling .fig-row.is-flip .fig-copy { order: 2; } #union-scheduling .fig-row.is-flip .fig-visual { order: 1; } /* for rows whose visual is denser than the comp's 470px placeholder */ #union-scheduling .fig-row.is-roomy { grid-template-columns: minmax(0, 360fr) minmax(0, 864fr); } #union-scheduling .fig-row.is-roomy.is-flip { grid-template-columns: minmax(0, 864fr) minmax(0, 360fr); } /* for rows whose copy carries a code block rather than a widget */ #union-scheduling .fig-row.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } #union-scheduling .fig-copy { min-width: 0; } #union-scheduling .fig-visual { min-width: 0; } /* ── row furniture ─────────────────────────────────────────────────── */ #union-scheduling .fig-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } #union-scheduling .fig-eyebrow_n { font-size: 13px; letter-spacing: 0.06em; color: var(--fig-faint); } #union-scheduling .fig-eyebrow_rule { display: block; width: 24px; height: 1px; background: var(--fig-border); } #union-scheduling .fig-label { font-size: 15px; font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; color: var(--fig-accent); margin-bottom: 18px; } #union-scheduling .fig-h2 { font-size: clamp(27px, 3.9vw, 52px); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 22px; color: var(--fig-heading); text-wrap: balance; } #union-scheduling .fig-h3 { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--fig-heading); text-wrap: balance; } #union-scheduling .fig-lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.62; color: var(--fig-body); margin: 0 0 26px; text-wrap: pretty; } #union-scheduling .fig-lead:last-child { margin-bottom: 0; } #union-scheduling .fig-points { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; } #union-scheduling .fig-points li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.6; color: var(--fig-body); text-wrap: pretty; } #union-scheduling .fig-points li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 6px; height: 6px; border-radius: 50%; background: var(--fig-accent); } #union-scheduling .fig-points li b, #union-scheduling .fig-points li strong { color: var(--fig-heading); font-weight: 600; } #union-scheduling .fig-link { display: inline-block; font-size: 15px; font-weight: 500; color: var(--fig-accent); text-decoration: none; } #union-scheduling .fig-link:hover { opacity: 0.8; } /* caption under a visual — the comp puts a title + note inside the placeholder */ #union-scheduling .fig-cap { margin-top: 18px; display: flex; flex-direction: column; gap: 5px; } #union-scheduling .fig-cap_t { font-size: 15.5px; font-weight: 600; color: var(--fig-heading); } #union-scheduling .fig-cap_d { font-size: 14.5px; line-height: 1.55; color: var(--fig-muted); text-wrap: pretty; } /* ── closing CTA: the full-bleed yellow block ──────────────────────── */ #union-scheduling .fig-cta { background: var(--fig-accent); color: var(--fig-ink); text-align: center; padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(56px, 8vw, 120px); } #union-scheduling .fig-cta.has-strip { padding-bottom: clamp(40px, 5vw, 64px); } #union-scheduling .fig-cta_h2 { font-size: clamp(30px, 5.2vw, 64px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 24px; color: var(--fig-ink); text-wrap: balance; } #union-scheduling .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-scheduling .fig-cta_btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } #union-scheduling .fig-cta_btn { display: inline-flex; align-items: center; justify-content: center; background: var(--fig-ink); border: 1px solid var(--fig-ink); color: var(--fig-accent); border-radius: 999px; padding: 14px 28px; font-size: 16px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; font-family: inherit; } #union-scheduling .fig-cta_btn.is-ghost { background: transparent; border-color: rgba(11, 11, 12, 0.35); color: var(--fig-ink); } /* The host pages carry a bare `a { color: accent }`, which would repaint these. `.button` is excluded as well as `.fig-cta_btn`: the union-system pages state their CTA buttons as `a.button`, and `a:not(.fig-cta_btn)` (0,2,1) outranks `.fig-cta .button` (0,2,0) — which painted the label black on a black pill. */ #union-scheduling .fig-cta a:not(.fig-cta_btn):not(.button):not(.btn), #union-scheduling .fig-cta a:not(.fig-cta_btn):not(.button):not(.btn):hover { color: var(--fig-ink); } #union-scheduling .fig-cta a.fig-cta_btn { color: var(--fig-accent); } #union-scheduling .fig-cta a.fig-cta_btn.is-ghost { color: var(--fig-ink); } #union-scheduling .fig-cta a.fig-cta_btn:hover { background: #1c1c1e; border-color: #1c1c1e; color: var(--fig-accent); } #union-scheduling .fig-cta a.fig-cta_btn.is-ghost:hover { background: rgba(11, 11, 12, 0.08); border-color: var(--fig-ink); } #union-scheduling .fig-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; text-align: left; margin-top: clamp(40px, 5.5vw, 72px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid rgba(11, 11, 12, 0.2); } #union-scheduling .fig-strip_text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #union-scheduling .fig-strip_h { font-size: clamp(17px, 1.9vw, 22px); font-weight: 600; letter-spacing: -0.015em; color: var(--fig-ink); } #union-scheduling .fig-strip_p { font-size: 15px; color: rgba(11, 11, 12, 0.7); text-wrap: pretty; } @media (max-width: 1080px) { #union-scheduling .fig-row, #union-scheduling .fig-row.is-flip, #union-scheduling .fig-row.is-roomy, #union-scheduling .fig-row.is-roomy.is-flip, #union-scheduling .fig-row.is-even { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 44px); } #union-scheduling .fig-row.is-flip .fig-copy, #union-scheduling .fig-row.is-flip .fig-visual { order: 0; } #union-scheduling .fig-points { margin-bottom: 24px; } } @media (max-width: 640px) { #union-scheduling .fig-eyebrow { margin-bottom: 10px; } #union-scheduling .fig-label { margin-bottom: 12px; font-size: 13.5px; } #union-scheduling .fig-strip { justify-content: flex-start; } } /* ══════════════════════════════════════════════════════════════════════════ BRIDGE — the platform pages in the union-system family (advanced-scheduling, ai-factory, durability, sovereign-ai) are built from Client-First utilities: section > .padding-global > .container-large > .padding-section-large > .align-center.max-width-large.text-align-center > .text-style-tagline + h2.heading-style-h2 + p.text-size-medium Rather than rewrite that markup on four pages, re-express those utilities in the home page's language. Everything is scoped under .fig-sec, which is added per section — so a section opts in by gaining the class, and the heroes, which keep their own composition, are never touched. ══════════════════════════════════════════════════════════════════════════ *//* .fig-sec owns the vertical rhythm; the container is left alone so every section lines up with the hero, which keeps the page's own .padding-global (5%) and .container-large (80rem). Overriding those to the home page's 1440/64px made the sections 33px wider than the hero on both edges. */ #union-scheduling .fig-sec .padding-section-large, #union-scheduling .fig-sec .padding-section-medium { padding-top: 0; padding-bottom: 0; } /* the tagline chip becomes the comp's yellow uppercase label */ #union-scheduling .fig-sec .text-style-tagline { display: block; border: 0; background: none; padding: 0; margin: 0 0 18px; font-size: 15px; font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; color: var(--fig-accent); } /* the section heading pair */ #union-scheduling .fig-sec .heading-style-h2 { font-size: clamp(28px, 4.6vw, 56px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; } #union-scheduling .fig-sec .heading-style-h3 { font-size: clamp(24px, 3.4vw, 42px); line-height: 1.14; letter-spacing: -0.022em; font-weight: 600; text-wrap: balance; } #union-scheduling .fig-sec .text-align-center .text-size-medium, #union-scheduling .fig-sec .fig-intro .text-size-medium { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--fig-body); max-width: 700px; margin-left: auto; margin-right: auto; text-wrap: pretty; } /* the comp sets the header block off from the body by a fixed measure rather than the utility spacers, which vary section to section */ #union-scheduling .fig-sec .spacer-xxlarge { height: clamp(40px, 5.5vw, 72px); } #union-scheduling .fig-sec .spacer-xlarge { height: clamp(32px, 4.4vw, 56px); } /* ── the nocturne family (agents, inference) states its headers inline ──── Those two pages are authored against union-nocturne.css, the same tokens as the home page, so only the type scale needs restating. */ #union-scheduling .fig-sec > h2, #union-scheduling .fig-sec > .fig-head > h2 { font-size: clamp(28px, 4.6vw, 56px) !important; line-height: 1.12 !important; letter-spacing: -0.025em; text-wrap: balance; } /* ── the closing CTA on a union-system page ───────────────────────── Those pages state the CTA as a bordered card inside the section (.sched-cta_band, .sovereign-cta_band, .model-factory-cta_band …). The comp makes it a full-bleed yellow block instead, so the card loses its frame and the type and buttons invert onto the accent ground. */ #union-scheduling .fig-cta .padding-section-large, #union-scheduling .fig-cta .padding-section-medium { padding-top: 0; padding-bottom: 0; } #union-scheduling .fig-cta [class*="cta_band"] { border: 0; background: none; padding: 0; text-align: center; } #union-scheduling .fig-cta .heading-style-h2, #union-scheduling .fig-cta .heading-style-h3 { font-size: clamp(30px, 5.2vw, 64px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; color: var(--fig-ink); text-wrap: balance; } #union-scheduling .fig-cta .text-size-medium, #union-scheduling .fig-cta [class*="cta_band"] p { font-size: clamp(16px, 1.8vw, 21px); line-height: 1.6; color: rgba(11, 11, 12, 0.78); max-width: 680px; margin-left: auto; margin-right: auto; text-wrap: pretty; } #union-scheduling .fig-cta .text-style-tagline { display: block; border: 0; background: none; padding: 0; margin: 0 0 16px; font-size: 15px; font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; color: rgba(11, 11, 12, 0.66); } #union-scheduling .fig-cta .button-group { justify-content: center; } #union-scheduling .fig-cta .button { border-color: var(--fig-ink); background-color: var(--fig-ink); color: var(--fig-accent); border-radius: 999px; } #union-scheduling .fig-cta .button:hover { border-color: #1c1c1e; background-color: #1c1c1e; color: var(--fig-accent); } #union-scheduling .fig-cta .button.is-secondary { border-color: rgba(11, 11, 12, 0.35); background-color: transparent; color: var(--fig-ink); } #union-scheduling .fig-cta .button.is-secondary:hover { background-color: rgba(11, 11, 12, 0.08); border-color: var(--fig-ink); } #union-scheduling .fig-cta .cta-note { color: rgba(11, 11, 12, 0.6); } #union-scheduling .fig-cta .spacer-large { height: clamp(24px, 3vw, 34px); } /* ── the Flyte band keeps the comp's purple callback ──────────────── Home gives "Open source at the core." a dark-violet ground with purple hairlines and a purple eyebrow, rather than the alternating grey. */ #union-scheduling .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-scheduling .fig-oss .text-style-tagline { color: #8b5cf6; } #union-scheduling .fig-oss .flyte-stat { border-left-color: rgba(139, 92, 246, 0.38); } #union-scheduling .fig-oss .flyte-stat:first-child { border-left: 0; } /* ── the nocturne family's section furniture ──────────────────────── agents/ and inference/ label their sections with a small mono kicker and a 17px lede. Both become the comp's label and lead. */ #union-scheduling .fig-sec .ag-kicker, #union-scheduling .fig-sec .in-kicker { display: block; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; color: var(--fig-accent); margin-bottom: 18px; } #union-scheduling .fig-sec .ag-lede, #union-scheduling .fig-sec .in-lede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--fig-body); max-width: 760px; text-wrap: pretty; } #union-scheduling .fig-sec .u-wrap > h2 { font-size: clamp(28px, 4.6vw, 56px); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; } /* ── CTA sections that state their heading and buttons without the Client-First utility classes (durability's section_cta25) ──────── */ #union-scheduling .fig-cta h2 { font-size: clamp(30px, 5.2vw, 64px); line-height: 1.08; letter-spacing: -0.03em; color: var(--fig-ink); text-wrap: balance; } #union-scheduling .fig-cta p, #union-scheduling .fig-cta .text-size-tiny, #union-scheduling .fig-cta .text-size-small { color: rgba(11, 11, 12, 0.72); } /* the label may be wrapped in .button_text rather than sitting on the anchor */ #union-scheduling .fig-cta .button .button_text, #union-scheduling .fig-cta .button > * { color: inherit; } #union-scheduling .fig-cta .button-group { justify-content: center; } #union-scheduling .fig-cta .button-stack { display: flex; flex-direction: column; align-items: center; } /* ── the proof band ───────────────────────────────────────────────── Every platform page opens with a "proved in production" list under its own heading class (.sched-proof_h, .model-factory-proof_h, .sovereign-proof_h). Home centres that block and sets it at the intro scale. */ #union-scheduling .fig-sec [class*="proof_head"] { max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: clamp(32px, 4.5vw, 56px); text-align: center; } #union-scheduling .fig-sec [class*="proof_h"]:not([class*="proof_head"]) { font-size: clamp(28px, 4.6vw, 56px); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 18px; text-wrap: balance; } #union-scheduling .fig-sec [class*="proof_head"] p { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--fig-body); text-wrap: pretty; } /* ── the first section after the hero ─────────────────────────────── The hero on every platform page is tuned so the next heading just breaks the fold. The full 130px of section air pushes that heading under it, so the first section runs tighter at the top — the rhythm resumes from there down. */ #union-scheduling .fig-sec.is-first { padding-top: clamp(36px, 4.6vw, 66px); } /* the nocturne pages' CTA band (.ag-cta / .in-cta) carries its own gradient ground and its own button classes, so both are overridden onto the block */ #union-scheduling .fig-cta.ag-cta, #union-scheduling .fig-cta.in-cta { background: var(--fig-accent); color: var(--fig-ink); } #union-scheduling .fig-cta.ag-cta h2, #union-scheduling .fig-cta.in-cta h2 { color: var(--fig-ink); } #union-scheduling .fig-cta.ag-cta p, #union-scheduling .fig-cta.in-cta p { color: rgba(11, 11, 12, 0.78); } #union-scheduling .fig-cta .btn.cta-accent { background: var(--fig-ink); border-color: var(--fig-ink); color: var(--fig-accent); } #union-scheduling .fig-cta .btn.cta-accent:hover { background: #1c1c1e; border-color: #1c1c1e; color: var(--fig-accent); } #union-scheduling .fig-cta .btn.btn-secondary { background: transparent; border-color: rgba(11, 11, 12, 0.35); color: var(--fig-ink); } #union-scheduling .fig-cta .btn.btn-secondary:hover { background: rgba(11, 11, 12, 0.08); border-color: var(--fig-ink); } #union-scheduling .fig-cta .mono { color: rgba(11, 11, 12, 0.6); } /* The nocturne CTA states its measure, alignment and every colour inline (max-width in ch, a white button label, a mono note, an accent code chip), so the block has to out-rank the style attribute to invert onto yellow. */ #union-scheduling .fig-cta.ag-cta h2, #union-scheduling .fig-cta.in-cta h2, #union-scheduling .fig-cta.ag-cta p, #union-scheduling .fig-cta.in-cta p { margin-left: auto !important; margin-right: auto !important; } #union-scheduling .fig-cta.ag-cta > div, #union-scheduling .fig-cta.in-cta > div { padding-left: 0; padding-right: 0; } #union-scheduling .fig-cta.ag-cta > div > div, #union-scheduling .fig-cta.in-cta > div > div { justify-content: center; } #union-scheduling .fig-cta .btn.btn-secondary { color: var(--fig-ink) !important; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.35) !important; } #union-scheduling .fig-cta .mono { color: rgba(11, 11, 12, 0.6) !important; } #union-scheduling .fig-cta code { color: rgba(11, 11, 12, 0.82) !important; background: rgba(11, 11, 12, 0.08); border-radius: 4px; padding: 0 4px; } /* ══════════════════════════════════════════════════════════════════════════ TOC CARDS + CASE STUDIES — ported from union/home's .cap-grid / .proof-grid. The platform pages opened with a two-column proof list: the property on the left linking down the page, the customer result on the right linking out to a case study. Home splits those two jobs — a grid of contents cards that jump down the page, and the case studies gathered below the sections they belong to — so the same split is applied here. ══════════════════════════════════════════════════════════════════════════ *//* Flex, not grid: a fixed 3-up grid leaves a ragged hole whenever the item count isn't a multiple of three (4 items -> 3+1, 5 -> 3+2). Every card keeps ONE width — an exact column of --cap-cols — and a partial last row centres instead of stretching, so a row of two sits under the row of three at the same width rather than widening to fill. */ #union-scheduling .cap-grid, #union-scheduling .proof-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; /* 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; text-align: left; } #union-scheduling .cap-grid > *, #union-scheduling .proof-grid > * { /* fixed basis, no grow: (row - the gaps between columns) / columns */ flex: 0 0 calc((100% - (var(--cap-cols, 3) - 1) * 10px) / var(--cap-cols, 3)); max-width: calc((100% - (var(--cap-cols, 3) - 1) * 10px) / var(--cap-cols, 3)); } #union-scheduling .cap-grid.is-4up, #union-scheduling .proof-grid.is-4up { --cap-cols: 4; } #union-scheduling .cap-grid.is-5up, #union-scheduling .proof-grid.is-5up { --cap-cols: 5; } #union-scheduling .cap-cell, #union-scheduling .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-medium, var(--radius-md, 14px)); 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-scheduling .cap-cell > *, #union-scheduling .proof-cell > * { position: relative; z-index: 1; } #union-scheduling .cap-cell:hover, #union-scheduling .proof-cell:hover { background: color-mix(in srgb, var(--fig-heading) 5%, transparent); transform: translateY(-3px); } #union-scheduling .cap-cell:focus-visible, #union-scheduling .proof-cell:focus-visible { outline: 2px solid var(--fig-accent); outline-offset: -2px; } #union-scheduling .cap-cell::before, #union-scheduling .proof-cell::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--fig-accent) 11%, transparent) 0%, transparent 52%); opacity: 0; transition: opacity .28s ease; } #union-scheduling .cap-cell::after, #union-scheduling .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(--fig-accent) 55%, transparent) 14%, var(--fig-accent) 42%, color-mix(in srgb, var(--fig-accent) 40%, transparent) 78%, transparent 100%); transform: scaleX(0); transform-origin: left; transition: transform .34s cubic-bezier(.2, .7, .3, 1); } #union-scheduling .cap-cell:hover::before, #union-scheduling .proof-cell:hover::before { opacity: 1; } #union-scheduling .cap-cell:hover::after, #union-scheduling .proof-cell:hover::after { transform: scaleX(1); } /* contents card — the glyph is a ↓ because the card jumps down the page */ #union-scheduling .cap-cell_name { font-size: 21px; font-weight: 600; color: var(--fig-heading); letter-spacing: -0.01em; margin-bottom: 7px; transition: color .18s ease; } #union-scheduling .cap-cell_desc { font-size: 16px; line-height: 1.5; color: var(--fig-muted); text-wrap: pretty; transition: color .18s ease; } #union-scheduling .cap-cell_name::after { content: "↓"; display: inline-block; margin-left: 8px; font-weight: 400; color: var(--fig-faint); transition: color .18s ease, transform .22s cubic-bezier(.2, .7, .3, 1); } #union-scheduling .cap-cell:hover .cap-cell_name { color: var(--fig-accent); } #union-scheduling .cap-cell:hover .cap-cell_desc { color: var(--fig-body); } #union-scheduling .cap-cell:hover .cap-cell_name::after { color: var(--fig-accent); transform: translateY(-3px); } /* case-study card — the result leads, the company and the property frame it */ #union-scheduling .proof-cell_co { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fig-accent); margin-bottom: 10px; transition: transform .22s cubic-bezier(.2, .7, .3, 1); transform-origin: left; } #union-scheduling .proof-cell:hover .proof-cell_co { transform: translateX(2px); } #union-scheduling .proof-cell_result { font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--fig-heading); letter-spacing: -0.01em; text-wrap: pretty; } #union-scheduling .proof-cell_result::after { content: "↗"; display: inline-block; margin-left: 9px; font-weight: 400; color: var(--fig-faint); transition: color .18s ease, transform .22s cubic-bezier(.2, .7, .3, 1); } #union-scheduling .proof-cell:hover .proof-cell_result::after { color: var(--fig-accent); transform: translate(3px, -3px); } #union-scheduling .proof-cell_cap { margin-top: auto; padding-top: 14px; font-size: 14px; color: var(--fig-faint); transition: color .18s ease; } #union-scheduling .proof-cell:hover .proof-cell_cap { color: var(--fig-muted); } @media (prefers-reduced-motion: reduce) { #union-scheduling .cap-cell, #union-scheduling .proof-cell, #union-scheduling .cap-cell_name, #union-scheduling .cap-cell_desc, #union-scheduling .cap-cell_name::after, #union-scheduling .cap-cell::after, #union-scheduling .proof-cell::after, #union-scheduling .proof-cell_co, #union-scheduling .proof-cell_result::after { transition: none; } #union-scheduling .cap-cell:hover, #union-scheduling .proof-cell:hover { transform: none; } #union-scheduling .cap-cell:hover .cap-cell_name::after, #union-scheduling .proof-cell:hover .proof-cell_co, #union-scheduling .proof-cell:hover .proof-cell_result::after { transform: none; } #union-scheduling .cap-cell::before, #union-scheduling .proof-cell::before, #union-scheduling .cap-cell::after, #union-scheduling .proof-cell::after { display: none; } } @media (max-width: 1080px) { #union-scheduling .cap-grid, #union-scheduling .proof-grid { --cap-cols: 2; } } @media (max-width: 860px) { #union-scheduling .cap-grid, #union-scheduling .proof-grid { margin-inline: 0; } #union-scheduling .cap-cell, #union-scheduling .proof-cell { padding-left: 0; padding-right: 0; } } @media (max-width: 640px) { #union-scheduling .cap-grid, #union-scheduling .proof-grid { --cap-cols: 1; gap: 4px; } #union-scheduling .cap-grid > *, #union-scheduling .proof-grid > * { flex-basis: 100%; max-width: 100%; } #union-scheduling .cap-cell, #union-scheduling .proof-cell { padding: 16px 22px 18px; } #union-scheduling .cap-cell_name, #union-scheduling .proof-cell_result { font-size: 19px; } } /* ── headings inside a staggered row's copy column ────────────────── The intro scale (up to 56px) is set for a centred 700px measure; in the 420px copy column it wraps to five or six lines. The row scale is smaller, matching home's .fig-h2 against the same column width. */ #union-scheduling .fig-copy .heading-style-h2, #union-scheduling .fig-copy .heading-style-h3 { font-size: clamp(25px, 2.7vw, 40px); line-height: 1.12; letter-spacing: -0.02em; } #union-scheduling .fig-copy .text-size-medium, #union-scheduling .fig-copy .text-size-regular { font-size: clamp(15.5px, 1.4vw, 17.5px); line-height: 1.6; color: var(--fig-body); max-width: none; margin-left: 0; margin-right: 0; } #union-scheduling .fig-copy .text-style-tagline { margin-bottom: 14px; } #union-scheduling .fig-copy > div { max-width: none; } /* ── anchor landings ──────────────────────────────────────────────── The navbar is sticky, so a bare #anchor jump puts the section's first line underneath it. union-system.css sets this for its own pages; the nocturne pages (agents, inference) carry no equivalent, so it is stated here for every section the contents cards can target. */ #union-scheduling .fig-sec[id], #union-scheduling .fig-cta[id] { scroll-margin-top: 6rem; } /* durability states this band's heading as a bare

inside a layout3 row, so it renders small; the other pages use .heading-style-h2 */ #union-scheduling .fig-oss h2 { font-size: clamp(26px, 4vw, 48px); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; } /* ── one button size across every closing CTA ─────────────────────── Measured before this rule, at 1440: the union-system pages rendered 42px tall (.button, 16px/8-20 padding) while the nocturne pages rendered 39px for the primary and 30px for the secondary (.btn, 14px, with padding set inline). Three sizes across six pages, and two of them inside one block. Everything is pinned to the larger format here — the inline padding and font-size on the nocturne anchors need !important to give way. */ #union-scheduling .fig-cta .button, #union-scheduling .fig-cta .btn { padding: 14px 28px !important; font-size: 16px !important; font-weight: 600; line-height: 1.2; border-radius: 999px !important; border-width: 1px; border-style: solid; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; } #union-scheduling .fig-cta .button .button_text, #union-scheduling .fig-cta .btn .button_text { font-size: inherit; font-weight: inherit; } /* the mono note that sits beside them ("pip install flyte") sits on the baseline */ #union-scheduling .fig-cta .button-group, #union-scheduling .fig-cta .fig-cta_btns { align-items: center; } /* ── one content column across the platform pages ── container-large's 80rem resolved to 1333px against the site's fluid root. Pin it to the measure the home page's .u-wrap produces (1440 less its 64px gutters) so every platform page reads at the same width as home. (pricing does not load this file.) */ #union-scheduling .container-large { max-width: 1312px; } /* ══ the isometric widget (union-iso3d.js) ═══════════════════════════════ The drawing itself is built in JS; what it needs from CSS is the page's own type and neutrals, so the same renderer reads correctly on every ground. Font sizes are NOT set here on purpose — union-iso3d.js writes font-size and letter-spacing as presentation attributes, scaled to the render width, and a CSS rule would beat the attribute and pin the type to one size however wide the visual gets. Markup each page repeats:
No card: the drawing sits straight on the page ground so the geometry gets the whole column instead of paying for a frame and its padding. */ #union-scheduling .fig-factory { overflow: visible; } /* Stacked under the copy, a hero row's gap bottoms out at its clamp and the plate's top corner ends up crowded against the CTAs. Only the narrow layout needs it — beside the copy the drawing is centred and has room. */ #union-scheduling .fig-factory.is-compact { padding-top: 28px; } #union-scheduling .fig-factory_stage { display: block; min-height: 1px; } #union-scheduling .fig-factory_stage svg { display: block; width: 100%; height: auto; } #union-scheduling .fig-factory_leader { fill: none; stroke: var(--brand-gray-500, var(--color-neutral-700, #4a4e52)); stroke-width: 1; } #union-scheduling .fig-factory_anchor { fill: var(--fig-heading); stroke: var(--theme-bg, var(--color-bg, #000)); } #union-scheduling .fig-factory_lt { font-family: var(--font-code, ui-monospace, monospace); fill: var(--fig-heading); } #union-scheduling .fig-factory_ls { font-family: var(--font-body, system-ui, sans-serif); fill: var(--fig-muted); } /* ── narrow containers ── Below 560px the side labels leave the SVG (union-iso3d.js filters them 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 drawing did. */ #union-scheduling .fig-factory_caps { display: none; } #union-scheduling .fig-factory.is-compact .fig-factory_caps { display: grid; gap: 7px; margin: 14px 2px 2px; } #union-scheduling .fig-factory_cap { display: flex; align-items: baseline; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--fig-muted); } #union-scheduling .fig-factory_cap i { flex: none; width: 8px; height: 8px; border-radius: 2px; transform: translateY(-1px); background-color: var(--brand-gray-500, var(--color-neutral-700, #4a4e52)); } /* yellow is Union, in the legend exactly as in the drawing */ #union-scheduling .fig-factory_cap i.is-union { background-color: var(--fig-accent); } /* run state — see N.state in union-iso3d.js. Same three colours the drawing uses for a step that fails, retries and succeeds. */ #union-scheduling .fig-factory_cap i.is-fail { background-color: #e04b4d; } #union-scheduling .fig-factory_cap i.is-retry { background-color: #5b90f7; } #union-scheduling .fig-factory_cap i.is-ok { background-color: #8bcb6a; } #union-scheduling .fig-factory_cap i.is-union-out { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--fig-accent); } #union-scheduling .fig-factory_cap i.is-mat { background-color: var(--fig-heading); } /* 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 in the drawing. background-position is compositor-friendly, so this costs nothing next to the canvas beside it. */ #union-scheduling .fig-factory_cap i.is-raw { background-color: transparent; background-image: radial-gradient(circle at 1.5px 50%, var(--fig-body) 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-scheduling .fig-factory_cap i.is-raw { animation: none; } } #union-scheduling .fig-factory_cap-k { font-family: var(--font-code, ui-monospace, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fig-heading); white-space: nowrap; } #union-scheduling .fig-factory_cap-v { color: var(--fig-muted); } /* A scene used as a band of its own rather than as a cell in a hero row — the durability page, whose hero already spends its right column on a tabbed product demo. Capped well short of the container: at the full 1312 the drawing outgrew the copy around it and its plate ran under the sticky nav. 860 keeps the leaders (the compact breakpoint is 560) without letting the scene become the page. */ #union-scheduling .fig-factory.is-band { max-width: 860px; margin: 0 auto; } #union-scheduling .fig-factory.is-band .fig-factory_caps { justify-content: center; } /* ═══ advanced-scheduling/style.css ═══ *//* advanced-scheduling/style.css — Advanced Scheduling on Multi-cluster / Multi-cloud. Everything ABOVE the "WEBFLOW: paste into an Embed" banner is Designer-expressible: plain classes the dev can rebuild in the Designer. Everything BELOW it is custom code (keyframes, :hover, grid-template tricks, the widget internals) — paste that block into an HTML Embed or the page . *//* Eyebrows are yellow mono caps, not chips — the union-system default is a bordered pill. Identical override to ../sovereign-ai/ and ../model-factory/; keep the three in step. */ #union-scheduling .text-style-tagline { border-style: none; background-color: transparent; padding: 0; color: var(--brand-yellow-500); font-family: var(--font-code); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } /* ---------------------------------------------------------------- nav/footer placeholders *//* kept: the footer placeholder reuses this */ #union-scheduling .nav-placeholder_logo { color: var(--theme-heading); font-weight: 600; font-size: 1.125rem; } #union-scheduling .footer-placeholder { border-top: 1px solid var(--theme-border); } #union-scheduling .footer-placeholder_row { display: flex; align-items: center; justify-content: space-between; padding-top: 2rem; padding-bottom: 2rem; } #union-scheduling .footer-placeholder_note { color: var(--brand-gray-400); } /* ---------------------------------------------------------------- shared page bits */ #union-scheduling .text-code { font-family: var(--font-code); font-size: .9em; color: var(--theme-accent); } #union-scheduling .mono { font-family: var(--font-code); } #union-scheduling .sched-split { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.5rem; row-gap: 2.5rem; align-items: center; } #union-scheduling .sched-split_text { min-width: 0; } #union-scheduling .sched-split_visual { min-width: 0; } #union-scheduling .sched-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } #union-scheduling .sched-two_card { } #union-scheduling .sched-two_card p { margin-top: .625rem; color: var(--brand-gray-350); } #union-scheduling .sched-list { margin: 0; padding-left: 1.125rem; display: grid; row-gap: .75rem; font-size: 1.0625rem; color: var(--brand-gray-350); } #union-scheduling .sched-list strong { color: var(--theme-heading); font-weight: 600; } #union-scheduling .sched-callout { display: flex; column-gap: 1rem; align-items: flex-start; border: 0; border-left: 2px solid var(--theme-accent); border-radius: 0; padding: .25rem 0 .25rem 1.25rem; background-color: transparent; } #union-scheduling .sched-callout_icon { color: var(--theme-accent); font-weight: 600; line-height: 1.4; } #union-scheduling .sched-callout p { color: var(--brand-gray-350); } /* ---------------------------------------------------------------- hero */ /* The figure gets the larger share. This scene is three halls wide — the widest in the set — and the drawing scales off its column, so a 50/50 hero spends the width on copy that does not need it. */ #union-scheduling .sched-hero_component { display: grid; grid-template-columns: .96fr 1.04fr; column-gap: 3rem; row-gap: 3rem; align-items: center; } #union-scheduling .sched-hero_content { min-width: 0; } #union-scheduling .sched-hero_widget { min-width: 0; } /* ---------------------------------------------------------------- problem */ #union-scheduling .sched-problem_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } #union-scheduling .sched-problem_card { } #union-scheduling .sched-problem_card p { margin-top: .625rem; color: var(--brand-gray-350); } #union-scheduling .sched-problem_num { color: var(--theme-accent); font-size: .8125rem; margin-bottom: .75rem; } /* ---------------------------------------------------------------- queue knobs *//* `1fr` is `minmax(auto, 1fr)`, and that auto min-size is the pane's max-content — so a wide row or table in one tab pushed the pane past its track. Measured before this fix, the detail pane ranged 448–698px across the seven tabs. minmax(0, 1fr) pins every tab to the same width; anything still too wide scrolls inside the pane instead of spilling out of it. */ #union-scheduling .sched-knobs { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; align-items: start; } #union-scheduling .sched-knobs_pick { display: grid; row-gap: .375rem; max-width: 26rem; min-width: 0; } #union-scheduling .sched-knobs_label { color: var(--brand-gray-400); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; } /* A styled listbox rather than a native