), so the skeleton + React-mount swap
happens without ANY animated color/background change. This
kills the perceived "brand color changes while loading" flash:
even if React's mount re-applies the same brand value via
useEffect, the CSS transition on body bg/color (200ms) and
the various component-level transitions can't fire while the
guard is active.
Why a class on the html instead of body: the inline hydration
script runs in before is parsed — so body doesn't
exist yet. is always present.
───────────────────────────────────────────────────────────── */
html.is-loading,
html.is-loading *,
html.is-loading *::before,
html.is-loading *::after {
transition: none !important;
animation-duration: 0ms !important;
animation-delay: 0ms !important;
}
/* Exception — the skeleton shimmer IS the loading affordance. The
guard above was killing the only animation that's supposed to
run during the load window, so users saw a static gray block
instead of the sweeping shimmer. Re-enable just the skeleton
`::after` animation here so it overrides the `!important` 0ms
duration above. */
html.is-loading .skeleton::after,
html.is-loading .skel-bar::after,
html.is-loading .skel-line::after,
html.is-loading .skel-circle::after,
html.is-loading .skel-rect::after {
animation-duration: 1.4s !important;
animation-delay: 0s !important;
}
/* ─────────────────────────────────────────────────────────────
CROSS-DOCUMENT VIEW TRANSITIONS
Smoothly cross-fade between pages instead of the browser's
default hard-cut. The white flash you'd otherwise see between
"page A unloads" and "page B first paints" gets replaced by a
short fade — masks the brand-color/font/skeleton swap that the
user perceives as flicker during navigation.
Browser support: Chrome 126+, Edge 126+, Safari 18+. In older
browsers the @view-transition at-rule is silently ignored and
navigation falls back to the default hard-cut — no harm done.
`same-origin` is the default scope (only navigations within
ux.ivexaminer.ai animate; external links don't). 180ms matches
the design system's motion vocabulary for chrome transitions.
───────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 180ms;
animation-timing-function: ease-out;
}
/* Respect reduced-motion — skip the fade for users with the OS
preference set. The hard-cut is what they implicitly asked for. */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0ms; }
}
/* ─────────────────────────────────────────────────────────────
REDUCED-MOTION SAFETY NET (a11y)
When the OS preference is `prefers-reduced-motion: reduce`,
collapse every animation and transition to ~instant. Component-
specific rules can still opt-in with their own `no-preference`
query if they need motion for affordance, but the floor is
"everything still works without motion".
Per project_design_system_master.md a11y commitment.
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ─────────── RTL TYPOGRAPHY BUMP ───────────
Arabic glyphs (IBM Plex Sans Arabic) read ~1px smaller than Latin
glyphs at the same nominal size. Historically the codebase
compensated with ~70 explicit `[dir="rtl"] .foo { font-size: Npx; }`
overrides scattered across the stylesheet. With the typography
token system in place, we redefine the body-tier `--fsz-*`
tokens once at the root RTL scope — every rule using those
tokens now auto-bumps in Arabic. The explicit per-rule
overrides become redundant and were deleted.
Display/h1/h2 are NOT bumped — at 18px+ the size differential
is negligible and bumping them creates layout pressure on
page headers and KPI hero numbers.
───────────────────────────────────────────────────────────── */
[dir="rtl"], [dir="rtl"] body {
--fsz-h3: 17px; /* was 16 — RTL bump preserves +1 over LTR */
--fsz-body: 15px; /* was 14 */
--fsz-body-sm: 15px; /* aliased to body (was 14) — see LTR comment */
--fsz-label: 13px; /* was 12 */
--fsz-caption: 13px; /* aliased to label (was 12) — see LTR comment */
/* --fsz-micro retired — see token block above */
/* Arabic is cursive — letter-spacing splits the connected glyphs, so
every tracking token collapses to 0 in RTL. Token-driven components
(letter-spacing: var(--ls-*)) auto-correct; raw per-component
letter-spacing values are caught by the global reset just below.
--ls-body / -body-sm / -body-strong / -caption / -code are already
0, so only the positive/negative ones need zeroing here. */
--ls-display: 0; --ls-h1: 0; --ls-h2: 0; --ls-h3: 0;
--ls-label: 0; --ls-kbd: 0;
}
/* ─── RTL letter-spacing neutralizer ───────────────────────────────
Arabic must never be letter-spaced — tracking breaks the cursive
joins (the canvas brake hint, telemetry labels, violation-table
headers, and sidenav/rail/strip eyebrows were all rendering Arabic
with stretched, disconnected letters). This catches the raw
per-component `letter-spacing` values that bypass the --ls-* tokens
above. The :not() chain lifts specificity so it reliably overrides
component rules without !important. LTR-isolated runs opt out — the
LTR-locked media bar + bidi-isolated mixed strings (dir="ltr") and
mono / tabular numerics keep their intended tracking. */
[dir="rtl"] *:not([dir="ltr"]):not(.mono):not(.tnum):not(.ident) { letter-spacing: 0; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
/* ─── code / kbd elements ───
Inline code samples and keyboard-shortcut affordances. Both use
--font-mono (JetBrains Mono). Background tints prevent them
from blending into surrounding body prose; subtle border on
`kbd` makes it read as a discrete keyboard cap. */
code {
font: var(--fs-code);
letter-spacing: var(--ls-code);
background: var(--bg-sunken);
color: var(--ink);
padding: 1px 6px;
border-radius: 4px;
}
kbd {
font: var(--fs-kbd);
letter-spacing: var(--ls-kbd);
background: var(--bg-raised);
color: var(--ink);
padding: 2px 7px;
border: 1px solid var(--line);
border-block-end-width: 2px;
border-radius: 5px;
display: inline-flex;
align-items: center;
min-block-size: 18px;
}
/* ─────────── UTILITY ─────────── */
.mono { font-family: var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums; }
/* `.ident` — IDENTIFIER strings you SCAN / MATCH rather than do math on:
test IDs, plate numbers, request / reference numbers, EIDs, report IDs.
Uses the REAL monospace face (--font-mono / JetBrains Mono) for crisp,
evenly-aligned glyphs, sized 0.92em so the mono (which runs large per-px)
optically matches adjacent sans labels and doesn't grow the line.
Deliberately distinct from `.mono`, which is the SANS UI font + tabular
digits for QUANTITIES (counts, %, durations, prices, KPI figures). */
.ident { font-family: var(--font-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; letter-spacing: 0; }
::selection { background: var(--brand-200); color: var(--brand-900); }
/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 999px;
border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
/* ═══════════════════════════════════════════════════════════════
SKELETON LOADERS
Mounted in on each page BEFORE React boots so the
user never sees a blank canvas while Babel transpiles and the
bundle hydrates. React.createRoot.render() then replaces the
skeleton children with the real app.
Two primitives:
.skeleton — shimmer-animated placeholder block (rounded
corners, takes its size from the host element)
.skel-* — semantic placeholders (line, bar, circle, rect)
for building richer skeletons inline
The shimmer is a moving linear-gradient ::after that runs purely
on the GPU (no JS, no layout thrash). Respects prefers-
reduced-motion — falls back to a static muted background.
═══════════════════════════════════════════════════════════════ */
/* Screen-reader-only — visually hidden but exposed to assistive tech.
Used for heading structure on app-like surfaces (e.g. the test canvas)
where a visible
/ would disrupt the dense layout. Standard clip
pattern. */
.sr-only {
position: absolute !important;
inline-size: 1px; block-size: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skeleton,
.skel-bar, .skel-line, .skel-circle, .skel-rect {
position: relative;
overflow: hidden;
background: var(--skeleton-base);
border-radius: 8px;
}
.skeleton::after,
.skel-bar::after, .skel-line::after, .skel-circle::after, .skel-rect::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0,
color-mix(in oklab, white 35%, transparent) 50%,
transparent 100%
);
animation: skel-shimmer 1.4s linear infinite;
}
[data-theme="dark"] .skeleton::after,
[data-theme="dark"] .skel-bar::after,
[data-theme="dark"] .skel-line::after,
[data-theme="dark"] .skel-circle::after,
[data-theme="dark"] .skel-rect::after {
/* Peak opacity bumped 8% → 18% so the sweep is actually visible
against the now-tinted dark surface. 8% was inherited from the
earlier pitch-black dark mode; against the new lifted bg it was
reading as no animation at all. 18% matches the perceived
contrast of the light-mode shimmer (35% white on light gray). */
background: linear-gradient(
90deg,
transparent 0,
color-mix(in oklab, white 18%, transparent) 50%,
transparent 100%
);
}
@keyframes skel-shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
[dir="rtl"] .skeleton::after,
[dir="rtl"] .skel-bar::after,
[dir="rtl"] .skel-line::after,
[dir="rtl"] .skel-circle::after,
[dir="rtl"] .skel-rect::after {
animation-direction: reverse;
}
@media (prefers-reduced-motion: reduce) {
.skeleton::after,
.skel-bar::after, .skel-line::after, .skel-circle::after, .skel-rect::after {
/* Static fallback when motion is reduced — neutral darker grey
on top of --skeleton-base, keeping the placeholder brand-free. */
animation: none;
background: color-mix(in oklab, black 12%, var(--skeleton-base));
}
}
.skel-line { block-size: 12px; border-radius: 4px; }
.skel-line.is-sm { block-size: 8px; }
.skel-line.is-lg { block-size: 16px; }
.skel-bar { block-size: 6px; border-radius: 3px; }
.skel-circle { border-radius: 50%; }
.skel-rect { border-radius: 10px; }
/* Generic "page boots" container — used by every page entry's
pre-React skeleton. Top padding + max-width matching the real
shells so the swap to React doesn't cause a visible reflow. */
.page-skeleton {
max-width: 1280px;
margin: 0 auto;
padding: 24px 24px 80px;
display: flex;
flex-direction: column;
gap: 16px;
}
.page-skeleton-topnav {
block-size: 56px;
border-radius: 0;
margin-block-end: 16px;
}