@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');
/* ===========================================================================
OMNI ECHO — MASTER DESIGN SYSTEM (single, portable, shareable stylesheet)
---------------------------------------------------------------------------
One file = the whole look: design tokens, light/dark themes, page layout, the
card/box system, the elevation (drop-shadow) system, every component, and an
optional animated background. Drop it into any project for the same UI.
── QUICK START ────────────────────────────────────────────────────────────
Fonts load themselves (Google Fonts @import on line 1). No build step.
── THEMING ────────────────────────────────────────────────────────────────
Everything is driven by CSS custom properties. Switch the entire palette with
. To re-brand, override only the TOKENS you
need (never the component rules), e.g.: :root { --accent: #2563eb; }
── LAYOUT & BOXES ──────────────────────────────────────────────────────────
.container ......... 1120px max-width page gutter
.card-grid ......... responsive grid (auto-fit, min 290px) with EQUAL-height
rows (grid-auto-rows:1fr) so every card's "Open →" lines
up no matter how much text each holds
.tool-card ......... a box: flex column → .tool-card-icon / -title / -desc /
-cta (the cta is pinned to the bottom via margin-top:auto).
Hover lifts it, swaps to --shadow-hover, adds a corner glow
.pillar ............ lighter feature box (used in the .pillars grid)
.step / .glass-card / .panel ... generic frosted content panels
.section-band ...... full-width lower-section wrapper
.app-header / .app-footer ...... top bar / bottom bar
── ELEVATION (DROP-SHADOW) SYSTEM ──────────────────────────────────────────
Two layered shadow tokens carry the frosted-glass depth (defined per theme):
--shadow-glass ... resting: inset top highlight + soft ambient + big soft cast
--shadow-hover ... lifted (apply on :hover, usually with translateY(-4px))
Use them as box-shadow: var(--shadow-glass); Cards also get a 1px metallic top
"sheen" (::before, var(--sheen)); buttons carry their own inset highlight + glow.
── LOGO ────────────────────────────────────────────────────────────────────
.logo-mark paints a brand image. Point it at your own asset by overriding:
:root { --logo-dark: url('/path/light-on-dark.png'); (shown on dark bg)
--logo-light: url('/path/dark-on-light.png'); } (shown on light bg)
── OPTIONAL ANIMATED BACKGROUND ────────────────────────────────────────────
The .bg-fx / .fx-* rules style a comet-rides-a-trend-line background that the
companion omni-echo.js injects. Without that JS they're inert (nothing renders);
the static depth glow + blueprint grid still show via body::before / ::after.
=========================================================================== */
/* ---------------------------------------------------- tokens · light (clean monochrome) */
:root {
--bg-base: #f5f5f6;
--surface: rgba(255, 255, 255, 0.72);
--surface-strong: rgba(255, 255, 255, 0.92);
--surface-input: #ffffff;
--tile: #f0f0f2;
--border: rgba(18, 19, 23, 0.10);
--border-strong: rgba(18, 19, 23, 0.20);
--shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 2px 8px rgba(18, 19, 23, 0.05), 0 16px 40px rgba(18, 19, 23, 0.10);
--shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 22px rgba(18, 19, 23, 0.10), 0 28px 64px rgba(18, 19, 23, 0.18);
/* secondary · silver (the brand mark is metallic) — for depth, sheen + hover highlight */
--silver: #868c96;
--silver-strong: #51565f;
--silver-soft: rgba(120, 128, 140, 0.12);
--sheen: linear-gradient(90deg, transparent, rgba(18, 19, 23, 0.18) 40%, rgba(18, 19, 23, 0.06) 60%, transparent);
--metal: linear-gradient(180deg, #5b606a 0%, #9aa0ab 100%);
--glow-1: rgba(234, 98, 16, 0.10);
--glow-2: rgba(120, 90, 250, 0.07);
--grid-line: rgba(51, 65, 85, 0.10); /* cool slate blueprint grid, visible on the light bg */
--text: #14151a;
--text-dim: #3d3f47;
--text-muted: #74767f;
--accent: #e0620c;
--accent-strong: #c2410c;
--accent-soft: rgba(234, 98, 16, 0.13);
--accent-text: #ffffff;
--action: var(--accent); /* primary button fill — tied to the orange accent */
--action-text: #ffffff;
--ok: #15803d; --ok-bg: rgba(22, 163, 74, 0.12);
--warn: #b45309; --warn-bg: rgba(234, 179, 8, 0.16);
--err: #b91c1c; --err-bg: rgba(220, 38, 38, 0.10);
--info-bg: rgba(234, 98, 16, 0.06);
--radius-sm: 9px;
--radius: 16px;
--radius-lg: 22px;
--radius-pill: 999px;
--blur: 16px;
--blur-strong: 26px;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, Consolas, 'SF Mono', monospace;
/* brand logo images for .logo-mark — override with your own lockup (theme-aware) */
--logo-dark: url('/assets/omni-echo-dark.png'); /* shown on dark backgrounds */
--logo-light: url('/assets/omni-echo-light-gold.png'); /* shown on light backgrounds */
}
/* ---------------------------------------------------- tokens · dark (brand-true) */
[data-theme="dark"] {
--bg-base: #0b0b0e;
/* Visibility bump (user 2026-07-29: "make the dark mode better so everything is
actually visible") — surfaces/borders/inputs lifted so cards and fields read
clearly against the near-black base. */
--surface: rgba(255, 255, 255, 0.05);
--surface-strong: rgba(255, 255, 255, 0.09);
--surface-input: rgba(255, 255, 255, 0.08);
--tile: rgba(255, 255, 255, 0.065);
--border: rgba(255, 255, 255, 0.14);
--border-strong: rgba(255, 255, 255, 0.28);
--shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 8px rgba(0, 0, 0, 0.40), 0 22px 50px rgba(0, 0, 0, 0.50);
--shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 12px 26px rgba(0, 0, 0, 0.45), 0 32px 72px rgba(0, 0, 0, 0.62);
/* secondary · silver (matches the metallic brand mark) */
--silver: #c4c8d2;
--silver-strong: #eef0f4;
--silver-soft: rgba(196, 200, 210, 0.16);
--sheen: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22) 40%, rgba(255, 255, 255, 0.06) 60%, transparent);
--metal: linear-gradient(180deg, #f3f4f7 0%, #c2c6d0 52%, #a2a8b4 100%);
--glow-1: rgba(255, 150, 70, 0.16);
--glow-2: rgba(140, 110, 255, 0.10);
--grid-line: rgba(255, 255, 255, 0.038);
--text: #f3f3f6;
--text-dim: #cfd0d8;
--text-muted: #9a9ca6;
--accent: #ff9d57;
--accent-strong: #ffb780;
--accent-soft: rgba(255, 157, 87, 0.18);
--accent-text: #1a0d02;
--action: var(--accent); /* primary button fill — tied to the orange accent */
--action-text: var(--accent-text);
--ok: #4ade80; --ok-bg: rgba(22, 163, 74, 0.18);
--warn: #fbbf24; --warn-bg: rgba(234, 179, 8, 0.16);
--err: #fca5a5; --err-bg: rgba(220, 38, 38, 0.16);
--info-bg: rgba(255, 157, 87, 0.09);
}
/* ---------------------------------------------------- base */
* { box-sizing: border-box; }
*::selection { background: var(--accent-soft); color: var(--text); }
/* html gets a fixed height; body must NOT — height:100% pinned body's box to one
viewport, so every position:sticky child (top bar, rails) stopped sticking the
moment you scrolled past the first screen (2026-07-29). min-height keeps full-
bleed backgrounds without capping the box. */
html { height: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
color: var(--text);
background: var(--bg-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
position: relative;
/* clip, not hidden: overflow-x hidden makes body a scroll container, which
silently KILLS every position:sticky descendant (the vanishing top bar /
runaway SONAR sidebar bugs, 2026-07-29). clip clips without scroll-container
semantics, so sticky headers actually stick. hidden stays as the fallback. */
overflow-x: hidden;
overflow-x: clip;
letter-spacing: -0.005em;
}
/* Cool depth glows — low opacity, slow ambient drift + gentle scroll parallax.
echoDrift owns `transform`; scroll owns `background-position` (independent
properties, so they compose without fighting). The deepest layer → moves least. */
body::before {
content: '';
position: fixed; inset: -15%;
z-index: -2; pointer-events: none;
background:
radial-gradient(45% 38% at 12% -5%, var(--glow-1) 0%, transparent 62%),
radial-gradient(42% 34% at 92% 4%, var(--glow-2) 0%, transparent 60%),
radial-gradient(36% 30% at 72% 112%, var(--glow-1) 0%, transparent 60%);
filter: blur(30px);
animation: echoDrift 34s ease-in-out infinite alternate;
will-change: transform;
}
/* Faint blueprint grid (the brand's circuit-line vibe), fading toward the bottom.
Static (fixed) — no scroll-linked repaint, so scrolling stays smooth. */
body::after {
content: '';
position: fixed; inset: 0;
z-index: -1; pointer-events: none;
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(120% 80% at 50% -10%, #000 0%, transparent 72%);
mask-image: radial-gradient(120% 80% at 50% -10%, #000 0%, transparent 72%);
}
/* Translate ONLY (no scale) — a scale on a blur(30px) layer forces the GPU to
re-rasterize the whole blurred surface every frame; a pure translate just moves
the already-rasterized layer (compositor-only, near-free). The inset:-15% gives
slack so the drift never exposes an edge. */
@keyframes echoDrift {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-2%, 1.4%, 0); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
/* Background FX (DOM injected by omni-echo.js): gossamer stock trend lines with
a comet of light gliding ALONG each one. The light is a glowing *segment of the
path itself* (layered for a fading tail + white-hot tip), so it hugs every bend
fluidly and never drifts off the line. Smooth, steep, rising paths; faint
sparkles twinkle along them. Staggered + wall-clock-synced so they keep flowing
across page navigations. Behind the grid + all content, never interactive. */
.bg-fx {
position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
/* Own compositor layer: the comet animates here without repainting page content,
so scrolling stays smooth even while the tail keeps moving. */
transform: translateZ(0);
}
.bg-fx-svg {
position: absolute; inset: 0; width: 100%; height: 100%;
/* Confine the comet's per-frame repaint to this layer so it never invalidates page
content, and hint a dedicated compositor layer. */
contain: layout paint style; will-change: transform;
/* Fade BOTH ends (bottom-left AND top-right). The comet's per-loop opacity
fade-out used to happen in the unmasked top-right and read as a blink; fading
the top-right too means the fade-out (and the loop teleport) now happen inside
a hidden region, so the comet smoothly recedes into the corner instead of
flashing. The bottom-left fade (already present) hides the fade-in / re-entry. */
-webkit-mask-image: linear-gradient(60deg, transparent 0%, #000 30%, #000 72%, transparent 100%);
mask-image: linear-gradient(60deg, transparent 0%, #000 30%, #000 72%, transparent 100%);
}
/* the original angular stock-ticker trend lines (accent + fainter silver) */
.fx-line {
fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .22;
vector-effect: non-scaling-stroke;
}
.fx-line-2 { stroke: var(--silver); opacity: .12; filter: none; }
[data-theme="light"] .fx-line { opacity: .15; }
[data-theme="light"] .fx-line-2 { opacity: .10; }
/* sparkles that twinkle along the line */
.fx-sparkle {
/* No drop-shadow: on an element inside the per-frame-repainting FX layer, the
filter re-rasters every frame. The bright fill + scale-in twinkle reads as a
sparkle without it. */
fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center;
animation: fxTwinkle var(--tdur, 3s) ease-in-out infinite;
}
.fx-sparkle.alt { fill: var(--silver); }
[data-theme="light"] .fx-sparkle { fill: var(--accent-strong); }
[data-theme="light"] .fx-sparkle.alt { fill: var(--silver-strong); }
@keyframes fxTwinkle {
0%, 100% { opacity: 0; transform: scale(.35); }
50% { opacity: var(--tw, .7); transform: scale(1); }
}
/* the comet — many overlapping path segments stacked into a real comet tail:
the longer/fainter layers carry a per-layer blur (var --blur) so their edges
dissolve into the dark (misty, semi-transparent, soft-edged), while the short
bright head is sharp with a soft coma halo. */
.fx-comet {
fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round;
/* CONSTANT opacity (no temporal fade). The old per-loop fade-to-zero WAS the
flash; now the only brightness change comes from the mask (spatial, tied to
position) as the comet enters bottom-left and recedes off the top-right, and
the loop wrap happens off-screen (line ends run past x=1200). Nothing pulses. */
opacity: var(--lo, .6);
animation: fxComet var(--dur, 8s) linear infinite;
}
/* No blur on the moving tail layers — blurring a *moving* stroke forces a GPU
raster pass every frame (the cause of the lag AND the old flashing). The soft
gradient falloff instead comes from many overlapping low-opacity strokes built
in omni-echo.js, which composite almost for free. */
.fx-comet.alt { stroke: var(--silver); }
/* White-hot coma: the front group of layers (.tip) render white, so the head
reads as a larger bright front that melts smoothly into the colored tail.
Stroke colour only — no filter — so it stays cheap. */
.fx-comet.tip { stroke: #fff; }
.fx-comet.alt.tip { stroke: #fff; }
[data-theme="light"] .fx-comet.tip { stroke: var(--accent-strong); }
[data-theme="light"] .fx-comet.alt.tip { stroke: var(--silver-strong); }
/* NO filter on the head. It looks like a "tiny element" (only the dashed head shows),
but its geometry `d` is the ENTIRE path, so a drop-shadow's raster region is the
whole path bounding box (~viewport) — re-blurred every frame, ×2 comets. That was
the measured 33ms frame-spike / dropped-frame jank. The white-hot look now comes
entirely from the stacked `.tip` layers (free to composite). To bring a glow back,
use a small static tracking the head via offset-path, not a filter here.
(The head's extra width — the coma — is set inline in omni-echo.js.) */
@keyframes fxComet {
from { stroke-dashoffset: var(--s); } /* head at the line start (off-screen) */
to { stroke-dashoffset: var(--e); } /* head at the line end (off-screen) — wrap is unseen */
}
@media (prefers-reduced-motion: reduce) {
.fx-comet, .fx-sparkle { animation: none; opacity: 0; }
.fx-line { opacity: .14; }
}
/* Suspend ALL background motion when this tab is hidden or its window is in the
background (toggled by omni-echo.js via the Page Visibility + focus APIs).
Paused animations stop compositing, so a backgrounded localhost tab no longer
competes for the GPU with whatever you've switched to. Zero visual change while
you're actually looking at the tab. */
html.fx-suspend .fx-comet,
html.fx-suspend .fx-sparkle { animation-play-state: paused; }
html.fx-suspend body::before { animation-play-state: paused; }
/* Background animation turned OFF from the header toggle — drop the comet layer
entirely and freeze the depth glow (it still shows, just static). The grid and
static glass styling are unaffected, so the page keeps its look at ~zero
continuous GPU cost. */
html.fx-off .bg-fx { display: none; }
html.fx-off body::before { animation: none; }
/* ---------------------------------------------------- environment banner
Slim striped ribbon pinned to the very top on staging / development deploys
(injected by omni-echo.js from /api/env). Amber hazard stripes so it reads as
"not live" at a glance; the page is nudged down so it never covers content. */
.env-banner {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center; gap: 12px;
height: 30px; padding: 0 16px; overflow: hidden; white-space: nowrap;
font-size: 12px; font-weight: 600; color: #2a1a02;
background: repeating-linear-gradient(45deg, #f7c948 0, #f7c948 16px, #e3a92e 16px, #e3a92e 32px);
border-bottom: 1px solid rgba(0, 0, 0, 0.28);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.env-banner strong { letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; }
.env-banner span { font-weight: 600; opacity: 0.78; overflow: hidden; text-overflow: ellipsis; }
/* Tier tones (2026-07-20 banner law): beta/staging keep the amber hazard stripes
above; PRODUCTION is a calm solid green (matches the env-badge color law) so the
two banners can't be confused; LIVE renders no banner at all. */
.env-banner.production {
background: linear-gradient(90deg, #1a5c44, #23815e);
color: #eafff5;
}
html.has-env-banner body { padding-top: 30px; }
/* Keep the fixed sidebar clear of the env banner (BETA stripe overlaps top:0). */
html.has-env-banner .echo-sidebar { top: 30px; }
html.has-env-banner body.has-echo-sidebar .app-header { top: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
font-family: var(--font-mono);
font-size: 0.85em;
background: var(--surface-strong);
border: 1px solid var(--border);
padding: 1px 6px;
border-radius: 6px;
}
/* ---------------------------------------------------- layout shell */
.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6) var(--space-12); }
/* ---------------------------------------------------- header bar */
.app-header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-5) var(--space-6);
max-width: 1120px; margin: 0 auto;
}
.app-logo { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; }
.app-logo:hover { text-decoration: none; }
/* Real brand lockup (swaps per theme). The image already carries the wordmark,
so the adjacent text span is hidden. Bare .logo-mark is styled so .brand (login)
gets it too. */
.logo-mark {
display: inline-block;
height: 50px; width: auto; aspect-ratio: 822 / 239;
border: none; border-radius: 0; box-shadow: none;
background: var(--logo-dark) no-repeat left center / contain;
transition: filter .2s ease, transform .2s ease;
}
[data-theme="light"] .logo-mark { background-image: var(--logo-light); }
.app-logo > span:not(.logo-mark), .brand > span:not(.logo-mark) { display: none; }
.app-logo:hover .logo-mark { filter: drop-shadow(0 0 12px var(--silver-soft)); transform: translateY(-0.5px); }
.app-header-actions { display: flex; align-items: center; gap: var(--space-3); }
/* Theme toggle — sun / moon swap */
.theme-toggle {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface); border: 1px solid var(--border);
border-radius: 11px; color: var(--text-dim); cursor: pointer;
backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.theme-toggle:hover { background: var(--surface-strong); color: var(--text); border-color: var(--border-strong); }
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
/* App sidebar — the read.ai shell for every Aura page (user 2026-07-29: "aura also
has no top or side panels"). Injected by omni-echo.js; dark navy in BOTH themes,
Aura-orange active pill. Pages need no edits: body.has-echo-sidebar shifts the
whole page right; the sticky .app-header becomes the top panel. */
:root { --esb-bg: #16141a; --esb-item: #b9bac4; --esb-text: #f0f0f4; --esb-line: rgba(255,255,255,.08); }
[data-theme="dark"] { --esb-bg: #121014; }
.echo-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 228px; z-index: 55;
/* Warm charcoal + a faint orange brand glow — matches Aura's silver/orange, not
the purple navy of the first cut (user 2026-07-29: "doesn't fit"). */
background:
radial-gradient(130% 60% at 0% 0%, rgba(255, 157, 87, 0.10) 0%, transparent 55%),
linear-gradient(180deg, #18161c 0%, #100f13 100%);
border-right: 1px solid rgba(255, 255, 255, 0.07);
color: var(--esb-text); display: flex; flex-direction: column;
padding: 14px 11px; overflow-y: auto; }
body.has-echo-sidebar { padding-left: 228px; }
@media (max-width: 1100px) { .echo-sidebar { display: none; } body.has-echo-sidebar { padding-left: 0; } }
.echo-sidebar .esb-logo { display: flex; flex-direction: column; gap: 6px; padding: 4px 9px 12px; text-decoration: none; cursor: default; }
.echo-sidebar .esb-logo .logo-mark { width: 126px; height: 36px; background-size: contain; background-repeat: no-repeat; background-position: left center; }
.echo-sidebar .esb-logo b { font-size: 11px; letter-spacing: .14em; color: var(--esb-item); font-weight: 700; line-height: 1.8; }
/* Lockup law: the product name is SHINY in its own color (same gradient as the
masthead — no more mismatched flat shades). */
.echo-sidebar .esb-logo b em { background: var(--product-metal); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; font-style: normal; font-weight: 800; }
/* Dark-surface panels (sidebars, head strips) stay dark in BOTH themes, so they
ALWAYS wear the dark-background wordmark + a legibility lift (user 2026-07-29). */
.echo-sidebar .logo-mark, .sidebar .logo-mark,
[data-theme="light"] .echo-sidebar .logo-mark, [data-theme="light"] .sidebar .logo-mark {
background-image: var(--logo-dark);
filter: brightness(1.45) drop-shadow(0 0 6px rgba(255, 216, 160, 0.20));
}
.echo-sidebar .esb-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--esb-item); opacity: .75; padding: 13px 10px 5px; }
.echo-sidebar .esb-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
color: var(--esb-item); font-size: 13px; text-decoration: none; }
.echo-sidebar .esb-item:hover { background: rgba(255,255,255,.07); color: var(--esb-text); }
.echo-sidebar .esb-item.active { background: var(--accent); color: var(--accent-text, #1a0d02); font-weight: 700; }
.echo-sidebar .esb-item .ei { width: 17px; text-align: center; flex: none; display: inline-flex; }
.echo-sidebar .esb-item .ei svg { width: 15px; height: 15px; display: block; }
.echo-sidebar .esb-foot { margin-top: auto; padding: 12px 9px 2px; font-size: 11px; color: var(--esb-item); line-height: 1.5; }
/* The existing header becomes the sticky top panel. */
body.has-echo-sidebar .app-header { position: sticky; top: 0; z-index: 45;
background: color-mix(in srgb, var(--bg-base) 86%, transparent);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border); }
/* Settings cog menu (user 2026-07-29: the light/dark switcher lives BEHIND the cog,
never as its own header button). omni-echo.js builds this on every page. */
.echo-menu-wrap { position: relative; }
.echo-menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
min-width: 218px; padding: 8px;
background: var(--bg-base); border: 1px solid var(--border-strong);
border-radius: 14px; box-shadow: var(--shadow-hover);
}
/* The `hidden` attribute is only a UA `display:none`, so ANY author rule that sets an
explicit display silently defeats it — the element stays on screen while the code that
set .hidden = true believes it is gone. This was patched once for .echo-menu; the same
trap then caught .dd-chip, whose `display:inline-flex` left the type-filter chip
rendering as an empty grey button beside the board search on every view (2026-08-02).
Stated once, globally, so the next component with a display cannot inherit the bug. */
[hidden] { display: none !important; }
.echo-menu .em-label {
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--text-muted); padding: 6px 10px 4px;
}
.echo-menu .em-item {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 8px 10px; border: 0; border-radius: 9px; background: none;
color: var(--text-dim); font: inherit; font-size: 13.5px; text-align: left;
cursor: pointer; text-decoration: none;
}
.echo-menu .em-item:hover { background: var(--surface-strong); color: var(--text); }
.echo-menu .em-item[aria-checked="true"] { color: var(--text); font-weight: 600; }
.echo-menu .em-item .em-check { width: 14px; text-align: center; color: var(--accent); visibility: hidden; }
.echo-menu .em-item[aria-checked="true"] .em-check { visibility: visible; }
.echo-menu .em-sep { height: 1px; margin: 6px 4px; background: var(--border); }
/* Product lockup LAW (user 2026-07-29): in every product title, "Omni" wears the
shiny SILVER metal and the product name wears a SHINY gradient of its own color
(Aura orange here; SONAR overrides --product-metal cyan). Each span clips its
own gradient, so the pair works inside or outside metal-clipped headings. */
:root { --product-metal: linear-gradient(180deg, #ffcf9e 0%, #ea6210 55%, #9a3c05 100%); }
[data-theme="dark"] { --product-metal: linear-gradient(180deg, #ffe3c2 0%, #ff9d57 52%, #c65a12 100%); }
.brand-omni { background: var(--metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand-product { background: var(--product-metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Deliverable picker cards (vendor-payments et al): one card per report the page
can produce — always obvious WHAT you're building. */
.deliv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.deliv-card { text-align: left; border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px;
background: var(--surface-input); cursor: pointer; font: inherit; color: var(--text);
display: flex; flex-direction: column; gap: 4px; transition: border-color .14s, background .14s;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset; }
.deliv-card:hover { border-color: var(--border-strong); }
.deliv-card.active { border-color: var(--accent); background: var(--accent-soft); }
.deliv-card .dc-ico { font-size: 17px; }
.deliv-card .dc-name { font-weight: 700; font-size: 14px; }
.deliv-card .dc-sub { font-size: 12px; color: var(--text-dim); line-height: 1.55; }
.deliv-body { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 4px; }
/* Badge policy (user 2026-07-29): engineering badges are beta-only. On production/
live builds omni-echo.js adds hide-eng-badges + the friendly access chip. */
html.hide-eng-badges .ro-badge, html.hide-eng-badges .env-badge { display: none; }
.access-chip { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
/* QoL (2026-07-29): keyboard focus is always visible, and dark scrollbars stop
glaring white against the near-black base. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
[data-theme="dark"] { color-scheme: dark; }
:root { color-scheme: light; }
[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; border: 3px solid #0b0b0e; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.30); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
/* Back link / ghost chip on subpages.
CONVENTION: every workflow subpage gets ONE of these as the FIRST child of its
main/content wrapper (a pill button at the top), e.g.
← Back to workflows
...
Do NOT use a plain text link at the bottom of the page. */
.back-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: var(--text-dim);
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-pill); padding: 6px 14px; text-decoration: none;
backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
margin-bottom: var(--space-3);
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.back-link:hover { color: var(--text); background: var(--surface-strong); border-color: var(--border-strong); text-decoration: none; transform: translateY(-1px); }
.back-link:active { transform: translateY(0); }
.back { color: var(--accent); text-decoration: none; font-size: 13px; }
.back:hover { text-decoration: underline; }
/* ---------------------------------------------------- hero (homepage) */
.hero { padding: var(--space-12) var(--space-6) var(--space-10); max-width: 1120px; margin: 0 auto; text-align: left; }
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 7px;
font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-muted); padding: 6px 13px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
margin-bottom: var(--space-5);
}
.hero-eyebrow::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--accent); box-shadow: 0 0 10px var(--accent);
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(38px, 5.6vw, 62px);
line-height: 1.02; letter-spacing: -0.035em; font-weight: 700;
margin: 0 0 var(--space-4);
background: var(--metal);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { font-size: clamp(15px, 1.4vw, 18px); color: var(--text-dim); max-width: 580px; margin: 0 0 var(--space-6); line-height: 1.55; }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* Arrow nudge on the hero CTA — same micro-interaction as the tool-card "Open ->". */
.hero-actions .btn span[aria-hidden] { display: inline-block; transition: transform .2s ease; }
.hero-actions .btn:hover span[aria-hidden] { transform: translateX(3px); }
/* ---------------------------------------------------- tool-card grid (homepage) */
.card-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
grid-auto-rows: 1fr; /* every card the same height → every "Open →" lands on the same line */
gap: var(--space-4); max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6);
}
.tool-card {
position: relative; display: flex; flex-direction: column; padding: var(--space-6);
border-radius: var(--radius); border: 1px solid var(--border);
background-color: var(--surface);
background-image: linear-gradient(180deg, var(--silver-soft) 0%, transparent 42%);
backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
box-shadow: var(--shadow-glass); color: var(--text); text-decoration: none;
transition: transform .24s cubic-bezier(.2,.7,.2,1), border-color .24s ease, box-shadow .24s ease, background-color .24s ease;
overflow: hidden;
}
/* metallic top sheen + corner glow on hover */
.tool-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: var(--sheen);
}
.tool-card::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(70% 60% at 0% 0%, var(--accent-soft) 0%, transparent 55%);
opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.tool-card:hover {
transform: translateY(-4px); border-color: var(--border-strong);
box-shadow: var(--shadow-hover); text-decoration: none; background: var(--surface-strong);
}
.tool-card:hover::after { opacity: 1; }
.tool-card-icon {
width: 46px; height: 46px; border-radius: 13px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--tile); border: 1px solid var(--border); color: var(--text);
margin-bottom: var(--space-4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: color .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.tool-card-icon svg { width: 22px; height: 22px; }
.tool-card:hover .tool-card-icon { color: var(--accent); border-color: var(--accent-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 20px var(--accent-soft); }
.tool-card-title {
font-family: var(--font-display);
font-size: 17.5px; font-weight: 600; margin: 0 0 var(--space-2);
display: flex; align-items: center; gap: var(--space-2); letter-spacing: -0.015em;
transition: color .24s ease, text-shadow .24s ease;
}
.tool-card:hover .tool-card-title { color: var(--silver-strong); text-shadow: 0 0 22px var(--accent-soft); }
.tool-card-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.55; margin: 0 0 var(--space-5); }
.tool-card-cta {
font-size: 13px; font-weight: 600; color: var(--accent);
display: inline-flex; align-items: center; gap: 4px; transition: gap .22s ease;
margin-top: auto; align-self: flex-start; /* pins "Open →" to the bottom-left of every card */
}
.tool-card:hover .tool-card-cta { gap: 9px; }
.badge {
display: inline-flex; align-items: center;
font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
padding: 3px 8px; border-radius: var(--radius-pill);
background: var(--surface-strong); color: var(--text-dim); border: 1px solid var(--border);
}
/* ---------------------------------------------------- page header (subpages) */
.page-header { padding: var(--space-2) 0 var(--space-6); }
h1.page-title { margin: var(--space-2) 0 var(--space-1); font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; letter-spacing: -0.03em; }
p.sub { color: var(--text-dim); margin: 0 0 var(--space-6); font-size: 14.5px; line-height: 1.55; max-width: 720px; }
/* Title + status badges share one row (env, read-only, and info chips all sit
here beside the — never inside a panel/section header). */
.page-header .title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: var(--space-2) 0 var(--space-1); }
.page-header .title-row h1.page-title { margin: 0; }
/* Status badge chips. .ro-badge = read-only / posting note. .env-badge = which
Yardi database: PRODUCTION / 1-LIVE is GREEN (the real books, safe because
read-only), BETA / 2-TEST is AMBER (a sandbox). The colour keys off the
ENVIRONMENT, never the connection state. .info-badge = a neutral fact chip. */
.ro-badge, .env-badge, .info-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 11px; border-radius: var(--radius-pill);
font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
border: 1px solid transparent;
}
.ro-badge::before, .env-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }
.ro-badge { background: var(--ok-bg); color: var(--ok); }
.env-badge { background: var(--surface-strong); color: var(--text-muted); } /* unknown / checking */
.env-badge.prod, .env-badge.ok { background: var(--ok-bg); color: var(--ok); } /* PRODUCTION / 1-LIVE = green */
.env-badge.beta, .env-badge.warn { background: var(--warn-bg); color: var(--warn); } /* BETA / 2-TEST = amber */
.env-badge.err { background: var(--err-bg); color: var(--err); }
.info-badge { background: var(--surface-strong); color: var(--text-dim); border-color: var(--border); font-family: var(--font-mono, monospace); }
.info-badge::before { content: none; }
/* ---------------------------------------------------- glass card / step / panel */
.step, .glass-card, .panel {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: var(--space-6); margin-bottom: var(--space-4);
backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
box-shadow: var(--shadow-glass);
}
.step-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.step-num {
width: 30px; height: 30px; border-radius: 50%;
background: var(--tile); border: 1px solid var(--border-strong); color: var(--text);
display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.step-num.inactive { background: var(--surface-strong); color: var(--text-muted); border-color: var(--border); }
.step-title { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
/* Bare section headings inside a panel/card match the .step-title look, so
non-wizard panels read the same as the numbered-step cards. */
.panel > h2, .glass-card > h2 { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
/* ---------------------------------------------------- form bits */
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-dim); }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=search], input[type=date], input[type=month], input[type=tel], input:not([type]), select, textarea {
font: inherit; font-size: 14px; color: var(--text);
background: var(--surface-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 10px 12px; width: 100%; max-width: 320px;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select option, select optgroup { background-color: #ffffff; color: #14151a; }
[data-theme="dark"] select option, [data-theme="dark"] select optgroup { background-color: #16161b; color: #f3f3f6; }
/* ---------------------------------------------------- buttons (pill, brand) */
.btn, .btn-primary {
background: var(--action); color: var(--action-text);
border: 1px solid transparent; border-radius: var(--radius-pill);
padding: 11px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
display: inline-flex; align-items: center; gap: 7px; text-decoration: none; letter-spacing: -0.01em;
/* Soft bevel (user 2026-07-29): light catches the top edge, a whisper of shade
on the bottom — depth without clunk. */
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 -1.5px 0 rgba(0, 0, 0, 0.16) inset, 0 4px 14px var(--accent-soft);
transition: transform .12s ease, box-shadow .18s ease, background .15s ease, border-color .15s ease, filter .15s ease, opacity .15s ease;
}
.btn:hover, .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 10px 26px var(--accent-soft); filter: brightness(1.05); text-decoration: none; }
.btn:active, .btn-primary:active { transform: translateY(0); }
.btn:focus-visible, .btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn-primary:disabled { background: var(--surface-strong); color: var(--text-muted); cursor: not-allowed; box-shadow: none; transform: none; border-color: var(--border); }
/* secondary / ghost = outlined pill */
.btn.secondary, .btn.ghost {
background: transparent; color: var(--text); border-color: var(--border-strong); box-shadow: none;
backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
}
.btn.secondary:hover, .btn.ghost:hover { background: var(--surface); border-color: var(--text-muted); box-shadow: none; }
.btn.ghost { color: var(--accent); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
/* Compact modifier for dense contexts (e.g. a download button inside a table row). */
.btn.sm { padding: 4px 12px; font-size: 13px; box-shadow: none; }
/* Destructive action (delete/wipe). Was page-local on the Configuration page; shared
since 2026-07-20 (profiles.html needs it too — same anti-drift law as the rest). */
.btn.danger { background: var(--err-bg); color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, var(--err) 18%, transparent); box-shadow: none; }
/* ---------------------------------------------------- status pills */
.pill {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill);
border: 1px solid transparent; letter-spacing: 0.01em;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.err { background: var(--err-bg); color: var(--err); }
.pill.idle { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
/* ---------------------------------------------------- dropzone */
.dropzone {
display: block; border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
padding: var(--space-10); text-align: center; cursor: pointer; background: var(--surface);
backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.dropzone:hover { border-color: var(--accent); background: var(--surface-strong); }
.dropzone.drag { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.005); }
.dropzone p { margin: 4px 0; color: var(--text-dim); font-size: 14px; }
.dropzone p strong { color: var(--text); }
.dropzone .small { color: var(--text-muted); font-size: 12px; }
.file-name { color: var(--accent); font-weight: 600; margin-top: var(--space-2); }
input[type=file] { display: none; }
/* Opt back in to a visible, styled file input (for manual-upload fallbacks that
aren't full .dropzone areas): put .file-field on the wrapping