/*! Across Core — across-core.css v2.1.6 · kit single-file build. Theme: [data-theme]. Contract: across-*. Generated — edit split sources. */
/* ===== colors_and_type.css ===== */
/* ===================================================================
Across — Colors & Type
Canonical design tokens for the Across suite.
SOURCE OF TRUTH: synced DOWN from the Orbit Across app
(design-system/colors_and_type.css in the Orbit project). Orbit is
the master; this file is kept in step with what ships there.
See DIVERGENCE.md for the full sync log.
=================================================================== */
/* -------- Fonts -------------------------------------------------- */
/* Plus Jakarta Sans — one human-facing family. Variable axis covers
all weights 200–800 (upright + italic). */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("../assets/fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations"),
url("../assets/fonts/PlusJakartaSans-Variable.woff2") format("woff2-variations");
}
@font-face {
font-family: "Plus Jakarta Sans";
font-style: italic;
font-weight: 200 800;
font-display: swap;
src: url("../assets/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf") format("truetype-variations");
}
/* Red Hat Mono — the brand monospace. Numbers, codes, timestamps, kbd,
mono eyebrows. Bundled locally (variable wght 300–700, upright +
italic) so the system works offline. */
@font-face {
font-family: "Red Hat Mono";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../assets/fonts/RedHatMono-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
font-family: "Red Hat Mono";
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url("../assets/fonts/RedHatMono-Italic-VariableFont_wght.ttf") format("truetype-variations");
}
:root {
/* ============================================================
1. BRAND — the "wing" palette
The Across mark has three colored wings on the left:
blue (Track), green (Orbit), orange (Relay) — one per product
in the suite. These are the non-negotiable brand expressors.
Plus a teal "parent" used in chrome (the cyan bar in the
favicon / wing edge accents).
============================================================ */
--wing-blue: #1589FF; /* Track — primary signal */
--wing-green: #22C55E; /* Orbit — productive accent */
--wing-orange: #FF5E00; /* Relay — energy accent */
--wing-cyan: #00F2FF; /* Bar element — "aurora" overlays */
/* ---- Canonical product triad — Track / Orbit / Relay ----
The three Across products. Each exposes a base (reads on
obsidian / dark mode) and a -dark light-mode cut (deeper, holds
contrast on warm paper), plus a -light tint. Track = see,
Orbit = do, Relay = send. Orbit's greens also feed the live
suite accent (--orbit, mode-aware) defined in §4b below. */
--track: #1589FF; /* Track — base (dark mode) */
--track-dark: #0066CC; /* Track — light-mode cut (deeper for white) */
--track-light: #60A5FA;
--orbit-base: #22C55E; /* Orbit — base (dark mode) */
--orbit-deep: #16A34A; /* Orbit — light-mode cut */
--orbit-tint: #4ADE80; /* Orbit — light tint */
--relay: #FF5E00; /* Relay — base (dark mode, true Across orange) */
--relay-dark: #EA580C; /* Relay — light-mode cut */
--relay-light: #FB923C;
--teal: #00F2FF; /* Parent — dark-mode base (the cyan wing bar) */
--teal-dark: #00A8B5; /* Light-mode base */
--teal-light: #67E8F9;
/* Generic chrome accent. Mode-aware: the bright cyan teal is unreadable
on light surfaces, so light mode uses the deeper teal. Dark mode below
overrides this back to the bright cyan. */
--brand: var(--teal-dark);
/* Look / Work / Share aliases removed (June 2026 overhaul).
Use the canonical triad: --track / --orbit-base / --relay
(with -dark / -light cuts). --orbit is the live suite accent. */
/* Neutral foundations from the Across mark */
--obsidian: #0B0F14; /* Canonical Across black */
--pearl: #EAEAEA; /* Pure brand off-white (legacy alias) */
--platinum: #E8EAEE; /* Canonical light "white" */
/* ============================================================
2. PRIMITIVES — neutral ramp
Bridges Platinum (200) to Obsidian (950).
============================================================ */
--neutral-50: #F9FAFB;
--neutral-100: #F3F4F6;
--neutral-200: #E8EAEE; /* = Platinum */
--neutral-300: #D1D5DB;
--neutral-400: #9CA3AF;
--neutral-500: #6B7280;
--neutral-600: #4B5563;
--neutral-700: #374151;
--neutral-800: #1F2937;
--neutral-900: #111827;
--neutral-950: #0B0F14; /* = Obsidian */
/* Legacy aliases — keep existing components working. */
--gray-50: var(--neutral-50);
--gray-100: var(--neutral-100);
--gray-200: var(--neutral-200);
--gray-300: var(--neutral-300);
--gray-400: var(--neutral-400);
--gray-500: var(--neutral-500);
--gray-600: var(--neutral-600);
--gray-700: var(--neutral-700);
--gray-800: var(--neutral-800);
--gray-900: var(--neutral-900);
--gray-950: var(--neutral-950);
/* ============================================================
3. SEMANTIC — light theme (default)
============================================================ */
/* Lighter warm paper — barely-there warmth in the undertone so it reads
calm and brand-consistent next to the cool neutrals on type/borders.
Lifts contrast/readability vs. a true bone/ivory; lighter than the
legacy #FAF7F1 used at ui.acrossacross.com. */
--bg: #FCFBF8; /* warm paper (canonical light surface) */
--surface: #FFFFFF; /* clean white for cards */
--surface-2: #F2EEE5; /* gentle warm beige for inset / muted blocks */
--surface-hover: color-mix(in oklab, var(--surface) 94%, var(--text) 6%);
/* Canonical interactive-row hover — accent-tinted, not neutral.
A subtle 4% tint of the active product --accent. Used on every
primary interactive row: tool cards, ledger rows, list items.
Pair with the wing-wipe leading-edge accent (see §10 MOTION).
Products that don't want product-tinted hover can override this
back to var(--surface-hover). */
--surface-hover-accent: color-mix(in oklab, var(--accent, var(--orbit-base)) 4%, var(--surface));
--text: #111827;
--text-muted: #4B5563; /* WCAG AA on --bg */
--text-subtle: #6B7280;
--border: rgba(0,0,0,.08);
--border-strong: rgba(0,0,0,.14);
/* ------------------------------------------------------------
SEMANTIC DATA ACCENTS — fixed, never rebound.
CONTRACT: the product/brand accent (--accent, e.g. Orbit green)
carries INTERACTION & IDENTITY — hovers, active states, focus,
the wing-wipe. It is rebindable per product. The semantic
accents below carry MEANING IN DATA — warnings, deltas, water,
staleness — and must stay constant even when the brand accent
is rethemed, or the data changes meaning under the user.
------------------------------------------------------------ */
/* Warm — "down", "stale", "custom", "warning" */
--accent-warm: #C2410C;
--accent-warm-strong: #B45309;
--accent-warm-bg: rgba(194, 65, 12, 0.10);
--accent-warm-soft: rgba(194, 65, 12, 0.05);
--accent-warm-glow: rgba(194, 65, 12, 0.12);
--accent-warm-tint: rgba(194, 65, 12, 0.025);
/* Cool — "up vs home", "water/precip", "freezing", "informational" */
--accent-cool: #2563EB;
--accent-cool-soft: rgba(37, 99, 235, 0.10);
--accent-cool-water: #4F8FD9;
/* Foreground aliases */
--fg-1: var(--text);
--fg-2: var(--text-muted);
--fg-3: var(--text-subtle);
/* ============================================================
4. ACCENT CONTRAST
-------------------------------------------------------------
The legacy per-tool accent palette (--accent-time / -currency /
-metrics / -weather / -places / -fx / -settings) was removed in the
June 2026 overhaul. Product surfaces now take a single rebindable
--accent (§4b); meaning-in-data uses the semantic --accent-warm* /
--accent-cool* tokens.
============================================================ */
--accent-contrast: #FFFFFF;
/* ============================================================
4b. PRODUCT ACCENT + APP-CHROME LAYER
-------------------------------------------------------------
The Orbit accent: the suite's signature green, mode-aware (deeper on
light surfaces for contrast, brighter on obsidian). --accent is
bound to it here so the canonical --surface-hover-accent and every
component that reads var(--accent) resolves to the brand accent by
default. Consuming products rebind --accent / --orbit if they own a
different surface color.
============================================================ */
--orbit: var(--orbit-deep); /* light-mode cut (#16A34A) */
--orbit-soft: color-mix(in oklab, var(--orbit) 14%, transparent);
--orbit-softer: color-mix(in oklab, var(--orbit) 8%, transparent);
--accent: var(--orbit);
/* App-chrome proxies — components read --app-* so a product can retheme
its chrome without touching every rule. They pass through to the
semantic tokens by default. */
--app-bg: var(--bg);
--app-surface: var(--surface);
--app-surface-2: var(--surface-2);
--app-border: var(--border);
--app-border-strong: var(--border-strong);
--app-text: var(--text);
--app-text-muted: var(--text-muted);
--app-text-subtle: var(--text-subtle);
--app-brand: var(--brand);
/* Topbar height used by the app shell + sticky kit nav. */
--topbar-h: 56px;
/* ============================================================
5. STATE
============================================================ */
--success: #16A34A;
--warning: #D97706;
--error: #DC2626;
--info: #2563EB;
/* ============================================================
6. SHADOWS & ELEVATION
Crisper, more app-like — tuned for the Across suite apps
============================================================ */
--shadow-xs: 0 1px 2px rgba(0,0,0,.03);
--shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
--shadow: 0 1px 6px rgba(0,0,0,.08);
--shadow-2: 0 8px 28px -12px rgba(0,0,0,.22); /* menu/popover panels */
--shadow-lg: 0 4px 8px rgba(0,0,0,.06), 0 12px 24px rgba(0,0,0,.08);
--shadow-xl: 0 22px 48px -24px rgba(0,0,0,.35);
/* ============================================================
7. RADII — three tiers, not a linear ramp
-------------------------------------------------------------
STRUCTURAL (2–4px) crisp, architectural — the default tier.
Cards, panels, inputs, buttons, spec
containers, ledger rows — anything that
reads as a "box" of content.
SOFT PILL (6px) softer affordance for tappable pills:
forecast tabs, segmented-control buttons,
jump chips. Distinct from structural so
interactive controls read as interactive.
PILL/CIRCLE (999px / true pills, circular triggers (the menu
50%) button, date-nav arrows, sync dots).
-------------------------------------------------------------
The previous ramp (4/6/8/10/12/16/20) is collapsed down. New
consumers should reach for --radius (3px) by default; only the
soft-pill tier and the full pill exist outside that range.
============================================================ */
/* Structural tier — every "box" sits in 2–4px */
--radius-xs: 2px;
--radius-sm: 3px;
--radius: 3px; /* default — containers, inputs, panels, cards */
--radius-md: 3px;
--radius-lg: 4px;
--radius-xl: 4px;
--radius-2xl: 4px;
/* Soft-pill tier — only for tappable interactive pills */
--radius-soft: 6px; /* forecast tabs, segmented buttons, jump chips */
/* Full pill / circle */
--radius-pill: 999px;
/* Semantic aliases — prefer these when the intent is clear */
--radius-structural: var(--radius); /* 3px — boxes */
--radius-interactive: var(--radius-soft); /* 6px — tappable pills */
/* ============================================================
7b. ARCHITECTURE — the "notebook" system
-------------------------------------------------------------
The structural language Orbit established: visible rules and
graph/dot grids replace cards and elevations as the primary
organizational device. Content sits directly on --bg; rules
separate it. Use --rule INSTEAD of a 1px solid border around
everything.
============================================================ */
--rule: color-mix(in oklab, var(--text) 12%, transparent); /* structural hairline */
--rule-soft: color-mix(in oklab, var(--text) 6%, transparent); /* faint divider */
--grid-line: color-mix(in oklab, var(--text) 4.5%, transparent); /* graph paper */
--grid-dot: color-mix(in oklab, var(--text) 13%, transparent); /* dot grid */
--grid-size: 26px; /* graph cell */
--wing-cut: 9px; /* one chamfered corner — used sparingly */
/* ============================================================
8. SPACING — strict 8px grid (4 sub-step)
============================================================ */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-8: 48px;
--space-10: 64px;
--space-12: 96px;
/* ============================================================
9. TYPOGRAPHY
One family for humans, one for numbers.
============================================================ */
--font-system: "Plus Jakarta Sans", ui-sans-serif, system-ui,
-apple-system, "Segoe UI", Roboto, Helvetica, Arial,
sans-serif;
--font-mono: "Red Hat Mono", ui-monospace, "SF Mono", Monaco, Menlo,
Consolas, "Courier New", monospace;
--font: var(--font-system);
/* Canonical scale — synced to ui.acrossacross.com.
Note: --text-base is 14px (the Across body default), not 16px.
Use --text-md for 16px. */
--text-xs: 0.625rem; /* 10px — Extra Small */
--text-sm: 0.75rem; /* 12px — Small */
--text-nav: 0.8125rem; /* 13px — Navigation */
--text-base: 0.875rem; /* 14px — Body (default) */
--text-md: 1rem; /* 16px — Body Large */
--text-lg: 1.25rem; /* 20px — Heading 4 */
--text-xl: 1.5rem; /* 24px — Heading 3 */
--text-2xl: 2rem; /* 32px — Heading 2 */
--text-3xl: 2.5rem; /* 40px — Heading 1 */
--text-4xl: 3rem; /* 48px — Display */
--text-5xl: 4rem; /* 64px — Hero (Across extension) */
/* Step-based numeric scale (used in legacy components) */
--size-10: .625rem;
--size-12: .75rem;
--size-13: .8125rem;
--size-14: .875rem;
--size-16: 1rem;
--size-18: 1.125rem;
--size-20: 1.25rem;
--size-24: 1.5rem;
--size-32: 2rem;
--size-40: 2.5rem;
--size-48: 3rem;
--size-64: 4rem;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--leading-tight: 1.2;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--tracking-tightest: -0.04em;
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.06em; /* uppercase eyebrows */
--tracking-widest: 0.16em; /* logo-style display */
/* ============================================================
10. MOTION — the "wing" easing
-------------------------------------------------------------
PHILOSOPHY: motion is for interaction only — hover, click,
focus, expand. Never idle. No spinning loops on decorative
surfaces, no pulsing dots, no ambient drift.
The wing-wipe is the ONE signature gesture: an accent edge
sweeps in from the leading edge of a hovered/active element,
on --wing-easing over --wing-duration. Pair the wing-wipe
with --surface-hover-accent on interactive rows so the tint
and the wipe arrive together.
Curve: a subtle overshoot inspired by the worm-mark trailing
edge.
============================================================ */
--wing-easing: cubic-bezier(.22, 1, .36, 1); /* @kind other */
--wing-duration: 280ms; /* @kind other */
--ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
--ease-in: cubic-bezier(.4, 0, 1, 1); /* @kind other */
--ease-out: cubic-bezier(0, 0, .2, 1); /* @kind other */
--fast: 120ms; /* @kind other */
--med: 200ms; /* @kind other */
--slow: 320ms; /* @kind other */
/* ============================================================
11. LAYOUT
============================================================ */
--shell-width: 1032px;
--reading-width: 720px;
/* ============================================================
12. Z-INDEX
============================================================ */
--z-negative: -1; /* @kind other */
--z-base: 1; /* @kind other */
--z-elevated: 10; /* @kind other */
--z-dropdown: 35; /* @kind other */
--z-sticky: 200; /* @kind other */
--z-nav: 500; /* @kind other */
--z-overlay: 1000; /* @kind other */
--z-modal: 2000; /* @kind other */
--z-toast: 9999; /* @kind other */
}
/* ============================================================
DARK THEME
============================================================ */
[data-theme="dark"], :root.dark {
--bg: var(--obsidian); /* #0B0F14 */
--surface: #131820;
--surface-2: #1B2129;
--surface-hover: #181E26;
--surface-hover-accent: color-mix(in oklab, var(--accent, var(--orbit-base)) 6%, var(--surface));
--text: #F3F4F6;
--text-muted: #D1D5DB;
--text-subtle: #9CA3AF;
--border: rgba(255,255,255,.08);
--border-strong: rgba(255,255,255,.14);
/* Architecture tokens read a touch brighter on obsidian so hairlines
and grids stay legible against the dark ground. */
--rule: color-mix(in oklab, var(--text) 14%, transparent);
--rule-soft: color-mix(in oklab, var(--text) 7%, transparent);
--grid-line: color-mix(in oklab, var(--text) 6%, transparent);
--grid-dot: color-mix(in oklab, var(--text) 16%, transparent);
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow: 0 1px 10px rgba(0,0,0,.45);
--shadow-2: 0 8px 28px -10px rgba(0,0,0,.6);
--shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 12px 24px rgba(0,0,0,.5);
/* Brighter Orbit green reads better on obsidian than the deeper cut. */
--orbit: var(--orbit-base);
/* Restore bright cyan teal in dark mode — it reads beautifully on obsidian. */
--brand: var(--teal);
}
/* System-dark: plain :root scope inside the media query so tokens register
cleanly. A manual light choice is restored by the [data-theme="light"]
block BELOW, which is declared later and therefore wins the cascade. */
@media (prefers-color-scheme: dark) {
:root {
--bg: #0B0F14;
--surface: #131820;
--surface-2: #1B2129;
--surface-hover: #181E26;
--surface-hover-accent: color-mix(in oklab, var(--accent, var(--orbit-base)) 6%, var(--surface));
--text: #F3F4F6;
--text-muted: #D1D5DB;
--text-subtle: #9CA3AF;
--border: rgba(255,255,255,.08);
--border-strong: rgba(255,255,255,.14);
--rule: color-mix(in oklab, var(--text) 14%, transparent);
--rule-soft: color-mix(in oklab, var(--text) 7%, transparent);
--grid-line: color-mix(in oklab, var(--text) 6%, transparent);
--grid-dot: color-mix(in oklab, var(--text) 16%, transparent);
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow: 0 1px 10px rgba(0,0,0,.45);
--shadow-2: 0 8px 28px -10px rgba(0,0,0,.6);
--shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 12px 24px rgba(0,0,0,.5);
--orbit: var(--orbit-base);
--brand: var(--teal);
}
}
/* Manual light — wins over system-dark because it comes later in the file. */
[data-theme="light"] {
--bg: #FCFBF8;
--surface: #FFFFFF;
--surface-2: #F2EEE5;
--surface-hover: color-mix(in oklab, var(--surface) 94%, var(--text) 6%);
--surface-hover-accent: color-mix(in oklab, var(--accent, var(--orbit-base)) 4%, var(--surface));
--text: #111827;
--text-muted: #4B5563;
--text-subtle: #6B7280;
--border: rgba(0,0,0,.08);
--border-strong: rgba(0,0,0,.14);
--rule: color-mix(in oklab, var(--text) 12%, transparent);
--rule-soft: color-mix(in oklab, var(--text) 6%, transparent);
--grid-line: color-mix(in oklab, var(--text) 4.5%, transparent);
--grid-dot: color-mix(in oklab, var(--text) 13%, transparent);
--shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
--shadow: 0 1px 6px rgba(0,0,0,.08);
--shadow-2: 0 8px 28px -12px rgba(0,0,0,.22);
--shadow-lg: 0 4px 8px rgba(0,0,0,.06), 0 12px 24px rgba(0,0,0,.08);
--orbit: var(--orbit-deep);
--brand: var(--teal-dark);
}
/* =================================================================
SEMANTIC ELEMENT STYLES
Use these to "just write HTML" and get the brand for free.
================================================================= */
html, body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font);
color: var(--text);
margin: 0 0 var(--space-3);
font-weight: var(--font-semibold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
h1 { font-size: var(--text-4xl); font-weight: 700; letter-spacing: var(--tracking-tightest); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); font-weight: var(--font-semibold); }
h6 { font-size: var(--text-base); font-weight: var(--font-semibold);
text-transform: uppercase; letter-spacing: var(--tracking-wider);
color: var(--text-muted); }
p { margin: 0 0 var(--space-3); text-wrap: pretty; }
small { font-size: var(--text-sm); color: var(--text-muted); }
code, pre, kbd, samp {
font-family: var(--font-mono);
font-size: 0.9em;
}
code {
padding: 0.1em 0.35em;
background: var(--surface-2);
border-radius: var(--radius-sm);
}
/* The signature "eyebrow" — uppercase, wide-tracked */
.across-eyebrow, [data-eyebrow] {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--text-muted);
}
/* Mono eyebrow — the canonical section/category label used inside tool
surfaces and on category headers. Same uppercase + wide-tracking idea
as .across-eyebrow but in the mono family, at a smaller size, with a quieter
colour. Reach for this on tool pages; .across-eyebrow stays for marketing. */
.across-eyebrow-mono {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-subtle);
}
/* The signature "rule" — a thin obsidian hairline.
Prefer using the --rule token directly as a 1px background on a
container's border-bottom; .across-rule /
remain for inline use. */
.across-rule, hr {
border: 0;
height: 1px;
background: var(--rule, var(--border-strong));
margin: var(--space-5) 0;
}
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); }
/* =================================================================
FOUNDATION UTILITIES — synced to ui.acrossacross.com
================================================================= */
/* -------- Layout Grid (12-col, 8px gap) ------------------------- */
.across-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--space-4);
}
.across-col-span-1 { grid-column: span 1 / span 1; }
.across-col-span-2 { grid-column: span 2 / span 2; }
.across-col-span-3 { grid-column: span 3 / span 3; }
.across-col-span-4 { grid-column: span 4 / span 4; }
.across-col-span-5 { grid-column: span 5 / span 5; }
.across-col-span-6 { grid-column: span 6 / span 6; }
.across-col-span-7 { grid-column: span 7 / span 7; }
.across-col-span-8 { grid-column: span 8 / span 8; }
.across-col-span-9 { grid-column: span 9 / span 9; }
.across-col-span-10 { grid-column: span 10 / span 10; }
.across-col-span-11 { grid-column: span 11 / span 11; }
.across-col-span-12 { grid-column: span 12 / span 12; }
/* -------- Aspect Ratio ------------------------------------------ */
.across-aspect-video { aspect-ratio: 16 / 9; object-fit: cover; }
.across-aspect-square { aspect-ratio: 1 / 1; object-fit: cover; }
.across-aspect-portrait { aspect-ratio: 3 / 4; object-fit: cover; }
.across-aspect-wide { aspect-ratio: 21 / 9; object-fit: cover; }
/* -------- Separator --------------------------------------------- */
.across-separator {
border: 0;
height: 1px;
background: var(--border);
margin: var(--space-4) 0;
}
.across-separator--vertical {
display: inline-block;
width: 1px;
align-self: stretch;
background: var(--border);
margin: 0 var(--space-3);
}
/* -------- Scroll Area ------------------------------------------- */
.across-scroll-area {
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
.across-scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.across-scroll-area::-webkit-scrollbar-track { background: transparent; }
.across-scroll-area::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-pill);
}
.across-scroll-area::-webkit-scrollbar-thumb:hover {
background: var(--text-subtle);
}
/* =================================================================
DOCUMENTED PATTERNS — codified from Orbit Across
These aren't "components" — they're foundational patterns that
any Across product should be able to use straight from this file
without reverse-engineering the application stylesheet.
================================================================= */
/* -------- Dashed "add" affordance ----------------------------------
The canonical "add something here" button across Across products
(Add city, Add currency, Add metric). A dashed border that snaps to
SOLID + accent on hover/focus, signalling "this slot accepts a new
item" distinctly from a regular .across-btn. Pair with a "plus" icon. */
.across-btn-add {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: transparent;
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
color: var(--text-muted);
font: inherit;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition:
border-color var(--fast) var(--ease),
color var(--fast) var(--ease),
background var(--fast) var(--ease);
}
.across-btn-add i { font-size: 14px; }
.across-btn-add:hover,
.across-btn-add:focus-visible {
border-style: solid;
border-color: var(--accent, var(--orbit-base));
color: var(--accent, var(--orbit-base));
background: color-mix(in oklab, var(--accent, var(--orbit-base)) 6%, transparent);
outline: none;
}
/* .across-surface-paper — content sits on the paper, no card chrome.
The canonical container for tool content (Orbit's "notebook" feel). */
.across-surface-paper {
background: var(--bg);
color: var(--text);
}
/* .across-row-interactive — the canonical interactive-row look.
Subtle accent-tinted hover + soft transition. Use a leading-edge
wing-wipe accent (3px bar, scaleY 0→1) on top for the full pattern. */
.across-row-interactive {
position: relative;
cursor: pointer;
transition: background var(--fast) var(--ease);
}
.across-row-interactive:hover {
background: var(--surface-hover-accent);
}
/* ===== components.css ===== */
/* ===================================================================
Across — Components
The reusable primitive vocabulary, synced DOWN from the Orbit Across
/ui page ("Orbit primitives"). Buttons, inputs, dropdowns, toasts,
drag-and-drop, modals/overlays, states, badges/alerts, tabs/nav, and
controls. Product-specific compositions (currency ledger, timezone
scrubber, etc.) stay in product stylesheets — see DIVERGENCE.md.
Components read the --app-* chrome proxies and --orbit accent, both
defined in colors_and_type.css §4b, so this file resolves standalone.
=================================================================== */
/* ============================================================
01 · BUTTONS
============================================================ */
.across-btn {
position: relative;
box-sizing: border-box;
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; height: 34px; line-height: 1;
background: var(--app-surface);
color: var(--app-text);
border: 1px solid var(--app-border-strong);
border-radius: var(--radius-sm);
font: inherit; font-size: 13px; font-weight: 500;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: all var(--fast) var(--ease);
}
.across-btn:hover {
/* Border stays exactly as it rests — the wing-wipe (plus a whisper of
background lift) is the entire hover signal. No outline darkening.
Synced from Orbit Across (master). */
border-color: var(--app-border-strong);
background: color-mix(in oklab, var(--app-text) 2.5%, var(--app-surface));
}
.across-btn i { font-size: 15px; line-height: 1; flex: none; }
.across-btn:disabled, .across-btn[disabled] { opacity: .5; cursor: not-allowed; }
.across-btn--primary {
background: var(--orbit); color: #fff;
border-color: var(--orbit);
}
/* Suite-accent buttons — one per surface (Track / Orbit / Relay).
Mirror --primary's architecture; the wing-wipe rides the base ::before. */
.across-btn--track { background: var(--track); color: #fff; border-color: var(--track); }
.across-btn--orbit { background: var(--orbit); color: #fff; border-color: var(--orbit); }
.across-btn--relay { background: var(--relay); color: #fff; border-color: var(--relay); }
.across-btn--primary:hover {
background: color-mix(in oklab, var(--orbit) 88%, black);
border-color: color-mix(in oklab, var(--orbit) 88%, black);
}
.across-btn--ghost { background: transparent; border-color: transparent; color: var(--app-text-muted); }
.across-btn--ghost:hover { background: var(--app-surface-2); color: var(--app-text); }
.across-btn--danger {
color: #B91C1C;
border-color: color-mix(in oklab, #B91C1C 30%, var(--app-border));
}
.across-btn--danger:hover { background: rgba(185,28,28,0.06); border-color: #B91C1C; }
.across-btn--sm { height: 28px; padding: 4px 10px; font-size: 12px; }
.across-btn--lg { height: 40px; padding: 10px 18px; font-size: 14px; }
.across-btn--icon { width: 32px; padding: 0; justify-content: center; }
.across-btn.is-loading { color: rgba(255,255,255,.85); }
.across-btn__spinner {
width: 12px; height: 12px; border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.4);
border-top-color: #fff;
animation: spin 800ms linear infinite;
display: inline-block;
}
/* The Wing — the one signature gesture. An accent edge wipes across the
base of a button on hover/press (interaction only, never idle). */
.across-btn::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: var(--orbit);
clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
transform: scaleX(0); transform-origin: left center;
transition: transform var(--wing-duration) var(--wing-easing);
pointer-events: none;
}
.across-btn--icon::after, .across-btn--ghost::after { display: none; }
.across-btn--primary::after { background: color-mix(in oklab, #fff 60%, transparent); }
.across-btn:hover::after, .across-btn:active::after { transform: scaleX(1); }
/* ============================================================
Wing-wipe utility — the one signature gesture, reusable.
Put .across-wing-wipe on any position:relative; overflow:hidden host
(cards, rows, launchers). The accent edge wipes in from the
leading edge on hover/active/focus, then retreats. Interaction
only. Honours --accent so it follows the surface's one accent.
============================================================ */
.across-wing-wipe { position: relative; overflow: hidden; }
.across-wing-wipe::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: var(--accent, var(--orbit));
clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
transform: scaleX(0); transform-origin: left center;
transition: transform var(--wing-duration) var(--wing-easing);
pointer-events: none;
}
.across-wing-wipe:hover::after, .across-wing-wipe:active::after, .across-wing-wipe:focus-visible::after { transform: scaleX(1); }
/* ============================================================
Live pill — the "LIVE" status chip used on live-data surfaces.
Mono, uppercase, the live --orbit accent. (Promoted to the kit
so the docs, the Orbit app, and the data table share one.)
============================================================ */
.across-live-pill {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
font-weight: 600; text-transform: uppercase; color: var(--orbit);
background: color-mix(in oklab, var(--orbit) 12%, transparent);
padding: 5px 10px; border-radius: var(--radius-pill);
}
.across-live-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orbit); }
/* Dashed "add" affordance — see also .across-btn-add in colors_and_type.css.
.across-addcity is the Orbit alias used inside tools. */
.across-addcity {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 12px;
padding: 8px 14px;
background: transparent;
border: 1px dashed var(--app-border-strong);
border-radius: var(--radius);
color: var(--app-text-muted);
font: inherit; font-size: 12.5px; font-weight: 500;
cursor: pointer; white-space: nowrap;
transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.across-addcity i { font-size: 14px; }
.across-addcity:hover:not(:disabled) {
border-style: solid; border-color: var(--orbit);
color: var(--orbit); background: var(--orbit-softer);
}
.across-addcity:disabled { opacity: .5; cursor: not-allowed; }
/* Configure link — quiet text+icon action for tool heads */
.across-tool-configure-link {
display: inline-flex; align-items: center; gap: 8px;
font: inherit; font-size: 13px; font-weight: 500;
color: var(--app-text-muted);
padding: 8px 14px; border-radius: var(--radius-sm);
border: 0; background: transparent; cursor: pointer;
transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.across-tool-configure-link:hover { color: var(--app-text); background: var(--app-surface-2); }
.across-tool-configure-link i { font-size: 16px; }
/* Circular trigger (menu / nav arrows) */
.across-menu-trigger {
width: 32px; height: 32px;
display: grid; place-items: center;
background: var(--app-surface); color: var(--app-text);
border: 1px solid var(--app-border-strong); border-radius: 50%;
cursor: pointer; position: relative;
transition: all var(--fast) var(--ease);
}
.across-menu-trigger i { font-size: 16px; }
.across-menu-trigger:hover { background: color-mix(in oklab, var(--app-text) 4%, var(--app-surface)); border-color: var(--app-text-subtle); }
.across-nav-arrow {
width: 28px; height: 28px; border-radius: 50%;
border: 1px solid var(--app-border); background: var(--app-surface);
display: grid; place-items: center; font-size: 13px; cursor: pointer;
color: var(--app-text-muted);
transition: all var(--fast) var(--ease);
}
.across-nav-arrow:hover { color: var(--orbit); border-color: var(--orbit); }
/* Soft-pill chips — quick-amount + jump chips (interactive 6px radius) */
.across-chip-quick {
padding: 5px 12px;
background: transparent;
border: 1px solid var(--app-border);
border-radius: var(--radius-soft);
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
font-size: 11.5px; font-weight: 500;
color: var(--app-text-muted); cursor: pointer;
transition: all var(--fast) var(--ease);
}
.across-chip-quick:hover { border-color: var(--app-border-strong); color: var(--app-text); }
.across-chip-quick.is-active { border-color: var(--orbit); background: var(--orbit-softer); color: var(--orbit); }
/* ============================================================
02 · INPUTS
============================================================ */
.across-input {
display: block; width: 100%;
padding: 8px 12px;
background: var(--app-surface);
border: 1px solid var(--app-border);
border-radius: var(--radius-sm);
font: inherit; font-size: 13px; color: var(--app-text);
transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.across-input:hover { border-color: var(--app-border-strong); }
.across-input:focus { outline: none; border-color: var(--orbit); box-shadow: 0 0 0 3px var(--orbit-softer); }
.across-input.is-error { border-color: var(--error); }
.across-input.is-error:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--error) 15%, transparent); }
.across-input.is-success { border-color: var(--success); }
.across-input.is-success:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 15%, transparent); }
textarea.across-input { resize: vertical; min-height: 60px; }
.across-input-wrap { position: relative; }
.across-input-wrap__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--app-text-subtle); }
.across-input-wrap .across-input { padding-left: 32px; }
.across-input-msg { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; }
.across-input-msg--error { color: var(--error); }
.across-input-msg--success { color: var(--success); }
.across-number-input {
display: inline-flex; align-items: center;
border: 1px solid var(--app-border); border-radius: var(--radius-sm);
background: var(--app-surface); overflow: hidden;
}
.across-number-input button { width: 32px; height: 32px; background: transparent; border: 0; cursor: pointer; color: var(--app-text-muted); font-size: 16px; }
.across-number-input button:hover { background: var(--app-surface-2); color: var(--app-text); }
.across-number-input input {
width: 140px; padding: 0 8px; height: 32px;
background: transparent; border: 0; outline: none;
font: inherit; font-size: 13px; text-align: center;
border-left: 1px solid var(--app-border); border-right: 1px solid var(--app-border);
}
/* Checkbox / Radio
`across-checkbox` is the suite-contract spelling (see PORT-PLAN §A.1);
`across-check` is retained as a backward-compatible alias so both
resolve during migration. The two are listed side-by-side rather than
renamed destructively. */
.across-check, .across-checkbox, .across-radio {
display: flex; align-items: center; gap: 8px;
font-size: 13px; cursor: pointer; user-select: none; line-height: 1.3;
}
.across-check input, .across-checkbox input, .across-radio input { position: absolute; opacity: 0; pointer-events: none; }
.across-check input + span, .across-checkbox input + span, .across-radio input + span {
width: 16px; height: 16px; flex-shrink: 0;
background: var(--app-surface);
border: 1.5px solid var(--app-border-strong);
display: grid; place-items: center;
transition: all var(--fast) var(--ease);
}
.across-check input + span, .across-checkbox input + span { border-radius: 4px; }
.across-radio input + span { border-radius: 50%; }
.across-check input:checked + span, .across-checkbox input:checked + span { background: var(--orbit); border-color: var(--orbit); }
.across-check input:checked + span::after, .across-checkbox input:checked + span::after {
content: ""; width: 8px; height: 5px;
border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
transform: translateY(-1px) rotate(-45deg);
}
.across-radio input:checked + span { border-color: var(--orbit); }
.across-radio input:checked + span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orbit); }
/* Slider */
.across-slider {
-webkit-appearance: none; appearance: none;
width: 100%; height: 4px;
background: color-mix(in oklab, var(--app-text) 15%, transparent);
border-radius: 3px; outline: none; margin: 8px 0;
}
.across-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--orbit); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.across-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--orbit); border: 0; cursor: pointer; }
/* ============================================================
03 · DROPDOWNS — Combobox (filterable)
============================================================ */
.across-combobox { position: relative; display: inline-block; min-width: 240px; }
.across-combobox__trigger {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 12px; background: var(--app-surface);
border: 1px solid var(--app-border); border-radius: var(--radius-sm);
font: inherit; font-size: 13px; color: var(--app-text); cursor: pointer; text-align: left;
transition: border-color var(--fast) var(--ease);
}
.across-combobox__trigger:hover { border-color: var(--app-border-strong); }
.across-combobox.is-open .across-combobox__trigger { border-color: var(--orbit); box-shadow: 0 0 0 3px var(--orbit-softer); }
.across-combobox__trigger > i { margin-left: auto; color: var(--app-text-subtle); }
.across-combobox__placeholder { color: var(--app-text-subtle); }
.across-combobox__menu {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 280px;
background: var(--app-surface); border: 1px solid var(--app-border);
border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
z-index: var(--z-dropdown, 35); overflow: hidden;
}
.across-combobox__search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--app-border); }
.across-combobox__search i { color: var(--app-text-subtle); }
.across-combobox__search input { flex: 1; background: transparent; border: 0; font: inherit; font-size: 13px; color: var(--app-text); outline: none; }
.across-combobox__clear { width: 22px; height: 22px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--app-text-subtle); border-radius: 4px; }
.across-combobox__clear:hover { color: var(--app-text); background: var(--app-surface-2); }
.across-combobox__list { max-height: 280px; overflow-y: auto; padding: 4px; }
.across-combobox__opt {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 10px; background: transparent; border: 0;
font: inherit; font-size: 13px; color: var(--app-text); cursor: pointer; text-align: left; border-radius: 4px;
}
.across-combobox__opt.is-active, .across-combobox__opt:hover { background: var(--app-surface-2); }
.across-combobox__opt.is-selected { color: var(--orbit); }
.across-combobox__check { margin-left: auto; color: var(--orbit); }
.across-combobox__empty { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 24px; color: var(--app-text-subtle); font-size: 12.5px; }
.across-combobox__empty i { font-size: 22px; }
.across-cur-row { display: flex; align-items: center; gap: 8px; }
.across-cur-row__flag { font-size: 15px; }
.across-cur-row__code { font-weight: 600; }
.across-cur-row__name { color: var(--app-text-muted); font-size: 12.5px; }
/* Select-style button (non-filterable) */
.across-select-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 14px;
background: var(--app-surface); border: 1px solid var(--app-border);
border-radius: var(--radius-sm); font: inherit; font-size: 13px;
cursor: pointer; min-width: 240px;
transition: border-color var(--fast) var(--ease);
}
.across-select-btn:hover { border-color: var(--app-border-strong); }
.across-select-btn i { margin-left: auto; color: var(--app-text-subtle); }
/* ============================================================
04 · TOASTS
============================================================ */
.across-toast-container {
position: fixed; right: 20px; bottom: 20px;
display: flex; flex-direction: column-reverse; gap: 10px;
z-index: var(--z-toast, 9999); pointer-events: none;
}
.across-toast {
pointer-events: auto;
display: grid; grid-template-columns: 22px 1fr auto auto; gap: 12px; align-items: flex-start;
min-width: 320px; max-width: 420px; padding: 12px 14px;
background: var(--app-surface); border: 1px solid var(--app-border);
border-left: 3px solid var(--orbit); border-radius: 4px 12px 12px 4px;
box-shadow: var(--shadow-lg);
animation: toast-in 280ms var(--wing-easing);
}
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.across-toast__icon { display: grid; place-items: center; font-size: 18px; line-height: 1; padding-top: 1px; }
.across-toast__body { min-width: 0; }
.across-toast__title { font-weight: 600; font-size: 13.5px; color: var(--app-text); }
.across-toast__desc { font-size: 12.5px; color: var(--app-text-muted); margin-top: 2px; }
.across-toast__action { background: transparent; border: 0; padding: 4px 8px; font: inherit; font-weight: 600; font-size: 12.5px; color: var(--orbit); cursor: pointer; border-radius: 4px; }
.across-toast__action:hover { background: var(--orbit-softer); }
.across-toast__close { width: 22px; height: 22px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--app-text-subtle); border-radius: 4px; }
.across-toast__close:hover { color: var(--app-text); background: var(--app-surface-2); }
.across-toast--success { border-left-color: var(--success); }
.across-toast--success .across-toast__icon { color: var(--success); }
.across-toast--info { border-left-color: var(--info); }
.across-toast--info .across-toast__icon { color: var(--info); }
.across-toast--warning { border-left-color: var(--warning); }
.across-toast--warning .across-toast__icon { color: var(--warning); }
.across-toast--error { border-left-color: var(--error); }
.across-toast--error .across-toast__icon { color: var(--error); }
/* ============================================================
05 · DRAG & DROP — Sortable list
============================================================ */
.across-sortable { display: flex; flex-direction: column; border: 1px solid var(--app-border); border-radius: var(--radius-sm); overflow: hidden; }
.across-sortable__row {
display: grid; grid-template-columns: 24px 32px 1fr auto; align-items: center; gap: 12px;
padding: 10px 14px; background: var(--app-surface); border-top: 1px solid var(--app-border);
cursor: grab; transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.across-sortable__row:first-child { border-top: 0; }
.across-sortable__row:hover { background: var(--app-surface-2); }
.across-sortable__row.is-dragging { opacity: 0.4; }
.across-sortable__row.is-over { background: var(--orbit-softer); border-top-color: var(--orbit); box-shadow: inset 0 2px 0 0 var(--orbit); }
.across-sortable__handle { color: var(--app-text-subtle); display: grid; place-items: center; }
.across-sortable__num { font-size: 11px; color: var(--app-text-subtle); letter-spacing: .08em; }
.across-sortable__main { display: flex; flex-direction: column; min-width: 0; }
.across-sortable__name { font-size: 13.5px; font-weight: 500; color: var(--app-text); }
.across-sortable__sub { font-size: 11.5px; color: var(--app-text-muted); }
.across-sortable__remove { width: 24px; height: 24px; display: grid; place-items: center; background: transparent; border: 0; color: var(--app-text-subtle); cursor: pointer; border-radius: 4px; }
.across-sortable__remove:hover { color: var(--error); background: color-mix(in oklab, var(--error) 10%, transparent); }
/* ============================================================
06 · MODALS & OVERLAYS
============================================================ */
.across-modal-backdrop {
position: fixed; inset: 0; background: rgba(11,15,20,0.45);
display: grid; place-items: center; z-index: var(--z-modal, 2000);
animation: fade-in 180ms var(--ease); padding: 24px;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.across-modal {
background: var(--app-surface); border: 1px solid var(--app-border);
border-radius: var(--radius-lg); width: 100%; max-width: 520px;
box-shadow: var(--shadow-xl);
animation: modal-in 240ms var(--wing-easing);
}
@keyframes modal-in { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.across-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--app-border); }
.across-modal__title { margin: 0; font-size: 16px; font-weight: 600; }
.across-modal__close { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--app-text-subtle); border-radius: 4px; }
.across-modal__close:hover { color: var(--app-text); background: var(--app-surface-2); }
.across-modal__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; color: var(--app-text); }
.across-modal__body p { margin: 0; color: var(--app-text-muted); }
.across-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--app-border); background: var(--app-surface-2); }
/* Tooltip */
.across-tip { position: relative; display: inline-flex; }
.across-tip__bubble {
position: absolute; pointer-events: none; opacity: 0;
background: #0B0F14; color: #fff; padding: 5px 9px; border-radius: 4px;
font-size: 11.5px; white-space: nowrap; transition: opacity 120ms ease;
z-index: var(--z-overlay, 1000);
}
.across-tip:hover .across-tip__bubble, .across-tip:focus-within .across-tip__bubble { opacity: 1; }
.across-tip--top .across-tip__bubble { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.across-tip--bottom .across-tip__bubble { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.across-tip--right .across-tip__bubble { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.across-tip--left .across-tip__bubble { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
/* Popover */
.across-pop { position: relative; display: inline-block; }
.across-pop__panel {
position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px;
background: var(--app-surface); border: 1px solid var(--app-border);
border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
z-index: var(--z-dropdown, 35); animation: pop-in 180ms var(--wing-easing);
}
@keyframes pop-in { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
.across-pop__body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
/* HScroll — horizontal scroller with edge fades + caret nudges */
.across-hscroll { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.across-hscroll__scroll { flex: 1 1 auto; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.across-hscroll__scroll::-webkit-scrollbar { display: none; }
.across-hscroll__scroll[data-fade-left="1"][data-fade-right="1"] { mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); }
.across-hscroll__scroll[data-fade-left="1"][data-fade-right="0"] { mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 100%); }
.across-hscroll__scroll[data-fade-left="0"][data-fade-right="1"] { mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%); }
.across-hscroll__edge {
position: absolute; top: 50%; transform: translateY(-50%);
width: 24px; height: 24px; display: grid; place-items: center;
background: var(--app-bg); border: 1px solid var(--app-border);
border-radius: 50%; color: var(--app-text-muted); cursor: pointer;
opacity: 0; pointer-events: none;
transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
z-index: 1;
}
.across-hscroll__edge--left { left: -6px; }
.across-hscroll__edge--right { right: -6px; }
.across-hscroll__edge.is-on { opacity: 1; pointer-events: auto; }
.across-hscroll__edge:hover { color: var(--app-text); border-color: var(--app-text-subtle); }
.across-hscroll__edge i { font-size: 13px; }
/* ============================================================
07 · EMPTY / LOADING / ERROR
============================================================ */
.across-state {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 24px 16px; text-align: center;
border: 1px dashed var(--app-border-strong); border-radius: var(--radius-sm);
}
.across-state__icon {
width: 40px; height: 40px; display: grid; place-items: center;
background: var(--app-surface-2); border-radius: 4px 12px 12px 4px;
color: var(--app-text-muted); font-size: 22px;
}
.across-state__title { margin: 4px 0 0; font-size: 14px; font-weight: 600; }
.across-state__desc { margin: 0; font-size: 12.5px; color: var(--app-text-muted); max-width: 36ch; }
.across-state--error .across-state__icon { color: var(--error); background: color-mix(in oklab, var(--error) 8%, transparent); }
/* Skeleton — the one allowed ambient shimmer, for loading only */
.across-skeleton {
display: inline-block;
background: linear-gradient(90deg, var(--app-surface-2) 0%, var(--app-border) 50%, var(--app-surface-2) 100%);
background-size: 200% 100%; animation: skel-shine 1.4s linear infinite;
}
@keyframes skel-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Spinner — for active loading only (interaction-triggered), never idle decor */
.across-spinner {
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid var(--app-border-strong); border-top-color: var(--orbit);
animation: spin 800ms linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Progress */
.across-progress { height: 6px; background: var(--app-surface-2); border-radius: 3px; overflow: hidden; }
.across-progress__bar { height: 100%; background: var(--orbit); border-radius: 3px; transition: width var(--med) var(--ease); }
.across-progress__bar--indeterminate { width: 30%; animation: progress-indet 1.4s var(--ease) infinite; }
@keyframes progress-indet { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
/* ============================================================
08 · BADGES & ALERTS
============================================================ */
.across-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px; background: var(--app-surface-2);
border: 1px solid var(--app-border); border-radius: 3px;
font-size: 11.5px; font-weight: 500; color: var(--app-text-muted);
}
.across-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.across-badge--success { background: color-mix(in oklab, var(--success) 10%, transparent); color: var(--success); border-color: transparent; }
.across-badge--info { background: color-mix(in oklab, var(--info) 10%, transparent); color: var(--info); border-color: transparent; }
.across-badge--warning { background: color-mix(in oklab, var(--warning) 12%, transparent); color: var(--warning); border-color: transparent; }
.across-badge--error { background: color-mix(in oklab, var(--error) 10%, transparent); color: var(--error); border-color: transparent; }
.across-alert {
display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: flex-start;
padding: 12px 14px; background: var(--app-surface);
border: 1px solid var(--app-border); border-left-width: 3px;
border-radius: 4px 8px 8px 4px; font-size: 13px;
}
.across-alert i { font-size: 18px; padding-top: 1px; }
.across-alert strong { font-weight: 600; }
.across-alert--info { border-left-color: var(--info); }
.across-alert--info i { color: var(--info); }
.across-alert--success { border-left-color: var(--success); }
.across-alert--success i { color: var(--success); }
.across-alert--warning { border-left-color: var(--warning); }
.across-alert--warning i { color: var(--warning); }
.across-alert--error { border-left-color: var(--error); }
.across-alert--error i { color: var(--error); }
/* Empty state — centered feedback for zero-content tool pages
Usage:
*/
.across-empty-state {
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 48px 24px 40px;
gap: 10px;
}
.across-empty-state__icon {
width: 48px; height: 48px;
display: grid; place-items: center;
border-radius: var(--radius-pill);
background: color-mix(in oklab, var(--info) 10%, transparent);
color: var(--info);
font-size: 22px;
margin-bottom: 6px;
}
.across-empty-state__title {
font-size: 15px; font-weight: 600;
letter-spacing: -0.01em;
color: var(--app-text);
}
.across-empty-state__msg {
font-size: 13px; line-height: 1.5;
color: var(--app-text-muted);
max-width: 320px;
}
.across-empty-state .across-btn { margin-top: 8px; }
/* Sync-status — local/synced/syncing/error/conflict awareness pill */
.across-sync-status {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12px; color: var(--app-text-muted);
}
.across-sync-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--app-text-subtle); flex-shrink: 0; }
.across-sync-status[data-state="local"] .across-sync-status__dot { background: var(--app-text-subtle); }
.across-sync-status[data-state="synced"] { color: var(--orbit); }
.across-sync-status[data-state="synced"] .across-sync-status__dot { background: var(--orbit); }
.across-sync-status[data-state="syncing"] .across-sync-status__dot { background: var(--info); }
.across-sync-status[data-state="error"] .across-sync-status__dot { background: var(--accent-warm); }
.across-sync-status[data-state="conflict"] { color: var(--accent-warm); }
.across-sync-status[data-state="conflict"] .across-sync-status__dot { background: var(--accent-warm); }
/* ============================================================
09 · TABS & NAV
============================================================ */
.across-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--app-border); }
.across-tabs__tab {
padding: 8px 12px; background: transparent; border: 0;
border-bottom: 2px solid transparent; margin-bottom: -1px;
font: inherit; font-size: 13px; font-weight: 500;
color: var(--app-text-muted); cursor: pointer;
transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.across-tabs__tab:hover { color: var(--app-text); }
.across-tabs__tab.is-active { color: var(--app-text); border-bottom-color: var(--orbit); }
.across-pill-tabs { display: inline-flex; padding: 2px; background: color-mix(in oklab, var(--app-text) 5%, transparent); border: 0; border-radius: var(--radius-sm); }
.across-pill-tabs__tab { padding: 6px 14px; background: transparent; border: 0; border-radius: 4px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--app-text-muted); cursor: pointer; }
.across-pill-tabs__tab.is-active { background: var(--app-surface); color: var(--app-text); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 6px rgba(0,0,0,.04); }
.across-breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--app-text-muted); }
.across-breadcrumb a { color: inherit; cursor: pointer; }
.across-breadcrumb a:hover { color: var(--app-text); }
.across-breadcrumb__sep { color: var(--app-text-subtle); }
.across-breadcrumb__current { color: var(--app-text); font-weight: 600; }
/* ============================================================
10 · CONTROLS — toggle, segmented, number-format
============================================================ */
.across-st-seg { display: inline-flex; background: color-mix(in oklab, var(--app-text) 5%, transparent); border: 0; border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.across-st-seg__btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; background: transparent; border: 0; border-radius: 4px;
color: var(--app-text-muted); font: inherit; font-size: 12.5px; font-weight: 500;
cursor: pointer; transition: all var(--fast) var(--ease);
}
.across-st-seg__btn i { font-size: 14px; }
.across-st-seg__btn:hover { color: var(--app-text); background: color-mix(in oklab, var(--app-text) 4%, transparent); }
.across-st-seg__btn.is-active { background: var(--app-surface); color: var(--app-text); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 6px rgba(0,0,0,.04); }
.across-st-seg__btn.is-active:hover { background: var(--app-surface); }
.across-st-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 35px; background: transparent; border: 0; cursor: pointer; padding: 0; }
.across-st-toggle__track { width: 36px; height: 20px; border-radius: 3px; background: color-mix(in oklab, var(--app-text) 18%, transparent); transition: background var(--fast) var(--ease); position: relative; }
.across-st-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform var(--wing-duration) var(--wing-easing); }
.across-st-toggle.is-on .across-st-toggle__track { background: var(--orbit); }
.across-st-toggle.is-on .across-st-toggle__thumb { transform: translateX(16px); }
.across-st-toggle__label { font-size: 12.5px; color: var(--app-text-muted); }
.across-st-numfmt { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.across-st-numfmt__opt {
display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
padding: 10px 12px; background: var(--app-surface);
border: 1px solid var(--app-border); border-radius: var(--radius-sm);
cursor: pointer; text-align: left; transition: all var(--fast) var(--ease);
}
.across-st-numfmt__opt:hover { border-color: var(--app-border-strong); }
.across-st-numfmt__opt.is-active { border-color: var(--orbit); background: var(--orbit-softer); }
.across-st-numfmt__sample { font-size: 14px; color: var(--app-text); }
.across-st-numfmt__region { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--app-text-subtle); }
/* Reference chip — labeled value pill (e.g. Marathon · 42.195 km) */
.across-ref-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 8px 5px 12px; background: transparent;
border: 1px solid var(--app-border); border-radius: 3px;
font: inherit; cursor: pointer; white-space: nowrap;
transition: all var(--fast) var(--ease);
}
.across-ref-chip:hover { border-color: var(--orbit); background: var(--orbit-softer); }
.across-ref-chip__name { font-size: 11.5px; color: var(--app-text-muted); }
.across-ref-chip:hover .across-ref-chip__name { color: var(--app-text); }
.across-ref-chip__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; color: var(--app-text); padding: 2px 8px; border-radius: 3px; background: var(--app-surface-2); }
.across-ref-chip:hover .across-ref-chip__value { background: var(--app-surface); color: var(--orbit); }
/* ============================================================
PANEL — bordered container (used to group content)
============================================================ */
.across-panel { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--radius-lg); overflow: hidden; }
.across-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--app-border); }
.across-panel__title { font-size: 13px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.across-panel__body { padding: 18px; }
/* Numeric helper — mono tabular figures */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Reduced motion — collapse every transition/animation to one frame. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* ===== components-forms.css ===== */
/* ===================================================================
Across — Forms (Phase 1)
Nine form components, built against the Phase 0 rulings:
warm paper + hairlines, 3px structural radius / 6px pill, Red Hat
Mono for figures, the wing-wipe as the only signature gesture,
borders that rest unchanged on hover, budgeted motion.
Imported by styles.css after components.css. Reuses .across-input / .across-btn /
.across-input-msg from components.css where possible.
=================================================================== */
/* ============================================================
1 · NATIVE SELECT — styled