/* ============================================================== reactlive-surface — Surface UI Kit Admin & dashboard surfaces, HeroUI Pro flavor. Design tokens: see docs/design-system.md ============================================================== */ /* Self-hosted Inter. Must stay above every rule — @import is only valid at the top of a stylesheet. Manrope was tried here and reverted — rejected as hard to read. See §13/§15 of SESSION-CHANGES-v8.6.md if it ever comes back up; the two things that bit were its 200-800 weight axis (no 900) and its subsets not covering `→` U+2192 or `★` U+2605, both of which this app renders. */ @import url('fonts/inter.css'); @import url('fonts/reactlive.css'); /* ── Design Tokens ─────────────────────────────────────────────── HeroUI v3 token system (alpha-36 source). Highlights: • Accent is azure (`#3B82F6`) in light and its 400 step (`#60A5FA`) in dark — see the Accent block. Legacy `--rlx-primary` aliases to `--rlx-accent` so v2-era code keeps rendering correctly. • v3 drops `secondary` (purple) — `--rlx-secondary` also aliases to accent so anything still referencing it stays usable. • Surface ramp collapses from 4 → 3 (`surface-1/2/3`). The legacy `content1-4` names alias onto the v3 ramp. • Status colors switched to v3 OKLCH defaults. They render exact in modern browsers; the RGB triplets below are approximations for the kit's `rgb(var(--*-rgb) / opacity)` overlay pattern. ────────────────────────────────────────────────────────────── */ :root { /* ── Base anchors ── */ --rlx-white: #FFFFFF; --rlx-black: #000000; --rlx-snow: #FCFCFC; /* v3 oklch(0.9911 0 0) */ --rlx-eclipse: #1B1B1B; /* v3 oklch(0.2221 0 0) */ /* ── Neutral scale (Tailwind v4 neutral, what v3's accent reads from) ── */ --rlx-neutral-50: #FAFAFA; --rlx-neutral-100: #F5F5F5; --rlx-neutral-200: #E5E5E5; --rlx-neutral-300: #D4D4D4; --rlx-neutral-400: #ADADAD; --rlx-neutral-500: #737373; --rlx-neutral-600: #525252; --rlx-neutral-700: #404040; --rlx-neutral-800: #262626; --rlx-neutral-900: #171717; --rlx-neutral-950: #0A0A0A; /* The `default` scale aliases to the neutral scale (was zinc in v2). */ --rlx-default-50: var(--rlx-neutral-50); --rlx-default-100: var(--rlx-neutral-100); --rlx-default-200: var(--rlx-neutral-200); --rlx-default-300: var(--rlx-neutral-300); --rlx-default-400: var(--rlx-neutral-400); --rlx-default-500: var(--rlx-neutral-500); --rlx-default-600: var(--rlx-neutral-600); --rlx-default-700: var(--rlx-neutral-700); --rlx-default-800: var(--rlx-neutral-800); --rlx-default-900: var(--rlx-neutral-900); /* ════════════════════════════════════════════════════════ v3 image-derived token set (light) Tokens are grouped exactly the way the docs page groups them: Background / Surface / Separator / Foreground / Form field / Default / Accent / Danger / Warning / Success. Most groups carry the base + secondary/tertiary or hover/soft/soft-hover/soft-foreground variants the docs show. ════════════════════════════════════════════════════════ */ /* ── Cool neutrals — the light theme's surface greys ── Tinted toward the accent, the way the dark theme's surfaces already are (#141926 carries +18 blue over red, #1E2433 carries +21). The Tailwind neutral ramp above is dead neutral (+0), so a saturated accent element sitting on it — a selected segmented-control thumb, a primary button on a panel — reads as belonging to a different palette than its own backdrop. Each value stays within ~1% luminance of the grey it replaces, so the contrast ratios documented below are unaffected; only the hue moves. */ /* ── Reference palette — "MildUI Environment" ── The named palette, taken verbatim except where noted. Nine colours in four groups: two canvas atmospheres, two surfaces, two inks, three pastel accents — plus the brand azure, which is the one saturated colour in the set and the only one that is not from the named palette. The neutral family carries a consistent cool-blue bias (Surface Alt is +4 blue over red) where the previous reference was grey-green, so the azure sits in it rather than on top of it. Everything else in this file reads the palette through these tokens; nothing else should hardcode a brand hex. */ /* The brand azure. Every accent role in both themes derives from this or from a step of the same ramp — see the Accent block and --rlx-primary-N. */ --rlx-ref-azure: #3B82F6; /* Azure — the accent */ --rlx-ref-ground: #D7DFE9; /* Mist Blue — page ground */ --rlx-ref-ground-2: #D9E1DB; /* Sage Mist — warmer ground variant */ --rlx-ref-ink: #1F2024; /* Charcoal — headings, filled buttons */ /* Muted Gray, verbatim. It clears AA exactly where the palette assigns it — "secondary text, icons and supportive elements" on a surface: 4.91 on white, 4.54 on Surface Alt. It does NOT clear on any of the grounds or accents (3.66 on Mist Blue, 3.14 on Sage Green), so secondary text placed straight on a canvas needs a local step down — see .pcd-sidebar, which does exactly that. Previously #686868, which cleared by a wider margin but was not a palette colour. */ --rlx-ref-sub: #6B717B; /* Muted Gray — secondary text */ --rlx-ref-fill: #F4F6F8; /* Surface Alt — list rows, fills */ /* Not in the palette: it names no hairline. Derived by taking the old #E7E7E7 and applying Surface Alt's own tint ratio, so it sits in the family at unchanged luminance (+0.005). */ --rlx-ref-line: #E5E8EC; /* hairlines, pill outlines (derived) */ /* Lavender under a second name. It was --rlx-accent-soft's source while the accent was ink; the accent is azure now and washes down to its own ramp, so nothing reads this — kept because the palette names it, and because spark.css still overrides it. --rlx-ref-violet is the live alias. */ --rlx-ref-info: #C9D1E3; /* Lavender — unconsumed, see above */ --rlx-ref-violet: #C9D1E3; /* Lavender — accent 1 */ --rlx-ref-sage: #BFD5B8; /* Sage Green — accent 2 */ --rlx-ref-lime: #EEF59A; /* Lemon Lime — accent 3 */ /* ── Semantic palette — "MildUI Semantic" ── Six status colours built to sit in the same environment: same softness, same chroma range as the three accents above. They are FILLS, not text. None of them clears 3:1 as text on white (1.31 to 2.22), so every one of them takes ink on top, and the "coloured text" case — a danger menu item, a warning label — is served by the -soft-foreground of each block below, which is the same hue darkened until it clears. */ --rlx-ref-danger: #E79A95; /* critical, destructive */ --rlx-ref-warning: #F2C27B; /* caution, potential risk */ --rlx-ref-important: #C9B7F2; /* high priority, key info */ --rlx-ref-notification: #AFCFF5; /* informational, unread */ --rlx-ref-success: #BFD8A6; /* completed, positive */ --rlx-ref-attention: #E8E58E; /* needs review */ /* Re-tinted from violet-grey into the palette's blue family, and terminating on Mist Blue so the ramp ends on a palette colour rather than near one. The top two hold the old ~1% luminance budget; 200 and 300 run +3% and +5% lighter, which only ever raises the contrast of what sits on them. */ --rlx-cool-50: #F9FBFD; --rlx-cool-100: #F4F6F8; /* = Surface Alt */ --rlx-cool-200: #E7EBF0; --rlx-cool-300: #D7DFE9; /* = Mist Blue */ /* ── Background group ── */ --rlx-background: var(--rlx-ref-ground); /* pale grey-green ground */ --rlx-background-secondary: var(--rlx-cool-100); --rlx-background-tertiary: var(--rlx-cool-200); --rlx-background-inverse: var(--rlx-neutral-950); /* ── Surface group ── */ --rlx-surface: var(--rlx-white); --rlx-surface-secondary: var(--rlx-ref-fill); --rlx-surface-tertiary: var(--rlx-cool-200); /* ── Separator group (low contrast) ── */ --rlx-separator: var(--rlx-ref-line); --rlx-separator-secondary: var(--rlx-cool-300); --rlx-separator-tertiary: #B3BAC6; /* re-tinted into the blue family, dL +0.009 */ /* ── Foreground group ── */ /* Darkened from --rlx-eclipse (#1B1B1B, the v3 value) to the ramp's darkest step. Not a contrast fix — eclipse already ran 17.2:1 on a card — but a density one: the default text now reads heavier against the kit's white surfaces and the console's canvas. --rlx-text and --rlx-text-strong alias this, so all body copy and headings follow. Deliberately NOT applied to the other --rlx-eclipse consumers: link, field and the on-fill foregrounds (default / warning / success) still take the v3 value, since text sitting on a coloured fill is a different job. */ --rlx-foreground: var(--rlx-ref-ink); /* Darkened from neutral-500 (#737373, ~3.76:1 on #E5E5E5 — fails AA) to #5b5b5b (~5.39:1 on #E5E5E5) so muted text clears 4.5:1 on the content2/content3 surfaces while staying clearly muted vs foreground. */ --rlx-foreground-muted: var(--rlx-ref-sub); --rlx-foreground-segment: var(--rlx-white); --rlx-foreground-overlay: var(--rlx-white); --rlx-foreground-link: var(--rlx-eclipse); /* ── Form field group ── */ --rlx-field-bg: var(--rlx-white); --rlx-field-bg-hover: var(--rlx-cool-200); --rlx-field-bg-focus: var(--rlx-white); --rlx-field-foreground: var(--rlx-eclipse); --rlx-field-placeholder: var(--rlx-neutral-500); /* ── Default semantic (neutral chip) ── */ --rlx-default: var(--rlx-cool-100); --rlx-default-hover: var(--rlx-cool-200); --rlx-default-foreground: var(--rlx-eclipse); /* ── Accent (azure) ── */ /* The accent is the brand azure again, after a spell as ink. A filled control is a blue pill with a white label, and the three pastels go back to carrying categorical colour rather than all colour. hover / soft / soft-hover / soft-foreground are the ramp's own steps (600 / 100 / 200 / 700), so the whole block moves together if the base ever moves. CONTRAST — the one thing to know about this accent: white on #3B82F6 is 3.68:1. That clears the 3:1 that non-text UI (fills, borders, focus rings) is held to, and the 3:1 for large text, but NOT the 4.5:1 for normal-size text. A filled control carrying a 13-14px label is therefore below AA on its label. --rlx-accent-hover (#2563EB, 5.17:1) clears it, so swapping base and hover is the fix if that becomes a requirement. */ --rlx-accent: var(--rlx-ref-azure); --rlx-accent-hover: #2563EB; /* White on it: 5.17:1 */ --rlx-accent-foreground: var(--rlx-white); --rlx-accent-soft: #DBEAFE; --rlx-accent-soft-hover: #BFDBFE; /* Charcoal on it: 12.79:1 */ --rlx-accent-soft-foreground: #1D4ED8; /* 6.68 white · 5.47 soft */ /* ── Status blocks ── Six tokens each, and the shape carries the whole rule for using them: --rlx-X the palette colour. A FILL. --rlx-X-hover same hue, one step down. --rlx-X-foreground what goes ON the fill. Ink, on all six. --rlx-X-soft pale wash of the same hue. --rlx-X-soft-hover the wash, one step up. --rlx-X-soft-foreground the hue darkened until it is legible. This is the ONLY one of the six that may be text. hover / soft / soft-hover / soft-foreground are derived, holding hue and saturation and moving lightness only — the palette names the base and nothing else. Each soft-foreground is the darkest step that clears 4.5:1 on white, on Surface Alt, and on its own soft wash simultaneously. */ /* ── Status: Danger ── */ --rlx-danger: var(--rlx-ref-danger); --rlx-danger-hover: #DF7872; --rlx-danger-foreground: var(--rlx-foreground); /* 7.33:1 */ --rlx-danger-soft: #F6D9D7; --rlx-danger-soft-hover: #F2C6C4; --rlx-danger-soft-foreground: #B53229; /* 6.08 white · 4.58 soft */ /* ── Status: Warning ── */ --rlx-warning: var(--rlx-ref-warning); --rlx-warning-hover: #EEB054; --rlx-warning-foreground: var(--rlx-foreground); /* 9.90:1 */ --rlx-warning-soft: #FAE8CD; --rlx-warning-soft-hover: #F8DDB5; --rlx-warning-soft-foreground: #935D0E; /* 5.51 white · 4.59 soft */ /* ── Status: Success ── */ --rlx-success: var(--rlx-ref-success); --rlx-success-hover: #A9CB88; --rlx-success-foreground: var(--rlx-foreground); /* 10.53:1 */ --rlx-success-soft: #E7F0DD; --rlx-success-soft-hover: #DBE9CD; --rlx-success-soft-foreground: #547533; /* 5.29 white · 4.51 soft */ /* ── Status: Notification ── */ --rlx-notification: var(--rlx-ref-notification); --rlx-notification-hover: #88B8F0; --rlx-notification-foreground: var(--rlx-foreground); /* 10.13:1 */ --rlx-notification-soft: #E1EDFB; --rlx-notification-soft-hover: #D2E4F9; --rlx-notification-soft-foreground: #1967C5; /* 5.54 white · 4.68 soft */ /* ── Status: Important ── */ --rlx-important: var(--rlx-ref-important); --rlx-important-hover: #AD92EB; --rlx-important-foreground: var(--rlx-foreground); /* 8.94:1 */ --rlx-important-soft: #EAE4FA; --rlx-important-soft-hover: #E1D7F8; --rlx-important-soft-foreground: #7547DE; /* 5.66 white · 4.57 soft */ /* ── Status: Attention ── */ --rlx-attention: var(--rlx-ref-attention); --rlx-attention-hover: #E1DD6A; --rlx-attention-foreground: var(--rlx-foreground); /* 12.42:1 */ --rlx-attention-soft: #F6F5D4; --rlx-attention-soft-hover: #F2F0C0; --rlx-attention-soft-foreground: #747118; /* 5.10 white · 4.60 soft */ /* ── Panel + muted shortcuts (used by other kit tokens) ── */ --rlx-panel: var(--rlx-surface); --rlx-panel-foreground: var(--rlx-foreground); --rlx-muted: var(--rlx-foreground-muted); /* ── 3-step surface ramp (legacy alias to surface group) ── */ --rlx-surface-1: var(--rlx-surface); --rlx-surface-2: var(--rlx-surface-secondary); --rlx-surface-3: var(--rlx-surface-tertiary); /* Lines & overlays */ --rlx-border: var(--rlx-separator); --rlx-divider: var(--rlx-separator); --rlx-focus: var(--rlx-accent); --rlx-overlay: var(--rlx-black); /* ── Legacy aliases (v2 → v3 mapping; kit components keep working) ── */ --rlx-primary: var(--rlx-accent); /* ── Pastel accents ── The reference carries colour in soft fills, not in its controls: the "Top Seller by Country" bars, and by extension anything categorical. Ink reads 11.9–14.2:1 on all three, so they take --rlx-foreground. */ --rlx-tint-1: var(--rlx-ref-violet); --rlx-tint-2: var(--rlx-ref-sage); --rlx-tint-3: var(--rlx-ref-lime); --rlx-tint-foreground: var(--rlx-foreground); --rlx-primary-foreground: var(--rlx-accent-foreground); --rlx-secondary: var(--rlx-accent); --rlx-secondary-foreground: var(--rlx-accent-foreground); --rlx-content1: var(--rlx-surface); --rlx-content2: var(--rlx-surface-secondary); --rlx-content3: var(--rlx-surface-tertiary); --rlx-content4: var(--rlx-surface-tertiary); /* Brand 50-900 scale, so any direct `--rlx-primary-N` reference resolves to a coherent step of the same hue the accent is on. Back to azure from the neutral ramp it carried while the accent was ink; 500 is the accent itself, and 600/700 are the same values the accent block's hover and soft-foreground take, so the two agree by construction. */ --rlx-primary-50: #EFF6FF; --rlx-primary-100: #DBEAFE; --rlx-primary-200: #BFDBFE; --rlx-primary-300: #93C5FD; --rlx-primary-400: #60A5FA; --rlx-primary-500: var(--rlx-accent); /* follows --rlx-accent */ --rlx-primary-600: var(--rlx-accent-hover); --rlx-primary-700: var(--rlx-accent-soft-foreground); --rlx-primary-800: #1E40AF; --rlx-primary-900: #1E3A8A; --rlx-secondary-50: var(--rlx-primary-50); --rlx-secondary-100: var(--rlx-primary-100); --rlx-secondary-200: var(--rlx-primary-200); --rlx-secondary-300: var(--rlx-primary-300); --rlx-secondary-400: var(--rlx-primary-400); --rlx-secondary-500: var(--rlx-primary-500); --rlx-secondary-600: var(--rlx-primary-600); --rlx-secondary-700: var(--rlx-primary-700); --rlx-secondary-800: var(--rlx-primary-800); --rlx-secondary-900: var(--rlx-primary-900); /* (The success / warning / danger 50-900 scales are gone. Thirty declarations of the old saturated Tailwind ramps, zero references anywhere in the kit or the apps — the foundations page the comment claimed as a consumer does not name a single step — and every value in them was off the palette. The six tokens per status above are the whole API now.) */ /* Info is Notification under its v2 name — same six tokens, aliased so kit components written against `info` keep working. */ --rlx-info: var(--rlx-notification); --rlx-info-hover: var(--rlx-notification-hover); --rlx-info-foreground: var(--rlx-notification-foreground); --rlx-info-soft: var(--rlx-notification-soft); --rlx-info-soft-hover: var(--rlx-notification-soft-hover); --rlx-info-soft-foreground: var(--rlx-notification-soft-foreground); /* RGB triplets for `rgb(var(--*-rgb) / opacity)` overlays. */ --rlx-accent-rgb: 59 130 246; /* #3B82F6 — see --rlx-accent */ --rlx-primary-rgb: 59 130 246; /* The three pastels as tuples, so a component can wash one down to a card tint instead of reaching for an alpha of the accent — which now tints blue, so a categorical fill has to say which pastel it means. */ --rlx-tint-1-rgb: 201 209 227; /* #C9D1E3 Lavender */ --rlx-tint-2-rgb: 191 213 184; /* #BFD5B8 Sage Green */ --rlx-tint-3-rgb: 238 245 154; /* #EEF59A Lemon Lime */ /* The wash behind an AI-grouped question card. A SEMANTIC token, not one of the three categorical pastels above, because the card is not a category — it is a state ("this was grouped for you"). It used tint-3 directly, and tint-3 in this palette is Lemon Lime: at 40% over the surface that mixes to a dull olive, which is how a stack of AI cards ended up looking like an unrelated warning colour. Lavender is the same pastel family, has no hue collision with success/warning, and stays quiet under text. Skins that carry their own agentic colour point this back at whichever tint means AI for them (see spark.css). */ --rlx-ai-wash-rgb: 201 209 227; /* #C9D1E3 Lavender */ --rlx-secondary-rgb: 59 130 246; /* = accent; secondary is an alias */ --rlx-success-rgb: 191 216 166; /* #BFD8A6 */ --rlx-warning-rgb: 242 194 123; /* #F2C27B */ --rlx-danger-rgb: 231 154 149; /* #E79A95 */ --rlx-notification-rgb: 175 207 245; /* #AFCFF5 */ --rlx-important-rgb: 201 183 242; /* #C9B7F2 */ --rlx-attention-rgb: 232 229 142; /* #E8E58E */ --rlx-default-rgb: 115 115 115; /* neutral-500 */ --rlx-info-rgb: var(--rlx-notification-rgb); /* ── Text helpers ── */ --rlx-text: var(--rlx-foreground); --rlx-text-muted: var(--rlx-muted); /* Sits between the palette's two inks, which name nothing for it, so it takes Muted Gray's hue at neutral-600's luminance (dL +0.001) rather than staying dead-neutral in an otherwise cool family — the same re-tinting rule the cool surface ramp above follows. Clears comfortably everywhere: 7.75 on white, 7.15 on Surface Alt, 6.00 on the console canvas. */ --rlx-text-sub: #4D535D; --rlx-text-strong: var(--rlx-foreground); /* The fourth ink tone, and the one that made the design read as calm: a step BELOW muted, for section eyebrows, tab counts and the trailing glyph on a row — things that are read once and must never compete with what they label. Collapsing it into muted is what flattens a dark interface. */ --rlx-text-faint: #6E7480; /* ── Typography ── */ --rlx-font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --rlx-font-mono: ui-monospace, 'Fira Mono', SFMono-Regular, 'Menlo', monospace; /* ── Type roles ── The scale below says which sizes exist. These say which size each JOB gets — the thing that was missing, and why the kit and the console between them rendered a "title" at four sizes and a tracked-caps eyebrow at three. Pairs rather than a `font` shorthand: the shorthand resets family and line-height at every call site and almost no rule here sets either. NOT for: emoji, display numerals, or glyphs fitted to a shape — an avatar's initials are `calc(--rlx-avatar-size * .4)` on purpose, so they scale with the circle rather than sitting on a text scale. */ --rlx-type-display-size: var(--rlx-fs-3xl); /* 26 / 700 */ --rlx-type-display-weight: var(--rlx-fw-bold); --rlx-type-title-size: var(--rlx-fs-medium); /* 16 / 700 */ --rlx-type-title-weight: var(--rlx-fw-bold); --rlx-type-subtitle-size: var(--rlx-fs-base); /* 15 / 700 */ --rlx-type-subtitle-weight:var(--rlx-fw-bold); --rlx-type-strong-size: var(--rlx-fs-small); /* 14 / 600 */ --rlx-type-strong-weight: var(--rlx-fw-semibold); --rlx-type-caps-size: var(--rlx-fs-micro); /* 11 / 600 */ --rlx-type-caps-weight: var(--rlx-fw-semibold); --rlx-type-body-size: var(--rlx-fs-mini); /* 13 / 400 */ --rlx-type-body-weight: var(--rlx-fw-normal); --rlx-type-meta-size: var(--rlx-fs-tiny); /* 12 / 400 */ --rlx-type-meta-weight: var(--rlx-fw-normal); /* `control` is the seventh role and it was always here in practice — button, tab, chip, nav row and menu item each reached past the map for a size and a weight of their own, which is how the kit ended up with 12/500, 14/500 and 16/500 all meaning "a button label". The design settles it at 13/600 and uses that one pairing for every interactive label in the interface, selected or not; selection is carried by ground and ink, never by the label growing. */ --rlx-type-control-size: var(--rlx-fs-mini); /* 13 / 600 */ --rlx-type-control-weight: var(--rlx-fw-semibold); /* `micro` is one step below `tiny`, for caps labels, badge counts and meta text. It exists because ~30 rules had drifted into the 9–11px range one half-pixel at a time; anything smaller than this should be questioned rather than added. */ --rlx-fs-micro: .6875rem; --rlx-lh-micro: 1rem; /* 11 */ --rlx-fs-tiny: .75rem; --rlx-lh-tiny: 1rem; /* 12 */ --rlx-fs-mini: .8125rem; --rlx-lh-mini: 1.125rem; /* 13 */ --rlx-fs-small: .875rem; --rlx-lh-small: 1.25rem; /* 14 */ --rlx-fs-base: .9375rem; --rlx-lh-base: 1.375rem; /* 15 */ --rlx-fs-medium: 1rem; --rlx-lh-medium: 1.5rem; /* 16 */ --rlx-fs-large: 1.125rem; --rlx-lh-large: 1.75rem; /* 18 */ --rlx-fs-xl: 1.25rem; /* 20 */ --rlx-fs-2xl: 1.375rem; /* 22 — the event title */ --rlx-fs-3xl: 1.625rem; /* 26 — the focused question */ --rlx-fs-4xl: 1.875rem; /* 30 */ /* Icon glyph sizes. Deliberately NOT the text scale — an icon beside 14px text is not itself "14px text", and coupling the two means a type change silently resizes every icon. */ --rlx-icon-sm: 14px; --rlx-icon-md: 16px; --rlx-icon-lg: 18px; --rlx-icon-xl: 24px; /* Tracking. Uppercase micro-labels need positive tracking to stay legible at size; display text needs negative. Prefer these over a hand-picked em value — that habit produced eleven near-identical tracking values across the kit and the apps. */ --rlx-tracking-tight: -.02em; --rlx-tracking-normal: 0; --rlx-tracking-wide: .02em; --rlx-tracking-wider: .06em; --rlx-tracking-widest: .1em; /* Decorative display caps only — the date-badge month, the event-wall headers. Genuinely needs more air than a UI label; not a licence to keep inventing values above `widest`. */ --rlx-tracking-ultra: .14em; --rlx-fw-normal: 400; --rlx-fw-medium: 500; --rlx-fw-semibold: 600; --rlx-fw-bold: 700; --rlx-fw-extrabold: 800; --rlx-lh-tight: 1.2; --rlx-lh-snug: 1.35; --rlx-lh-normal: 1.5; --rlx-lh-relaxed: 1.65; /* ── Spacing (4 px base) ── */ --rlx-space-1: 4px; --rlx-space-2: 8px; --rlx-space-3: 12px; --rlx-space-4: 16px; --rlx-space-5: 20px; --rlx-space-6: 24px; --rlx-space-8: 32px; --rlx-space-12: 48px; --rlx-space-16: 64px; /* ── Radius ── This scale INVERTED at the console design pass, and the inversion is the single biggest visual change in the kit, so it is worth stating plainly: before — cards 20px, every control a full pill after — cards 14/16px, controls 8/9px, pills reserved A pill now means one of four things and nothing else: a badge, a dot, a switch track, or a bar (progress / poll / avatar). Buttons, nav rows, segmented tracks, tab chips and inputs are all rounded rectangles. Reaching for `--rlx-radius-full` on a rectangular control is the mistake this scale exists to prevent. `inset` is the tier a surface nested INSIDE a card takes — the quoted post in a proposal, the poll preview, the audience-sees panel. It sits between the control radius and the card radius on purpose: a 14px box inside a 14px box reads as a mistake. */ --rlx-radius-xs: 6px; /* tab chip, small caps chip */ --rlx-radius-sm: 8px; /* icon button, ghost button, seg track */ --rlx-radius-md: 9px; /* THE control radius — buttons, rows */ --rlx-radius-inset: 12px; /* a surface inside a card */ --rlx-radius-lg: 14px; /* cards */ --rlx-radius-xl: 16px; /* panels */ --rlx-radius-2xl: 20px; /* the app shell */ --rlx-radius-full: 9999px; /* badges, dots, switches, bars, avatars*/ --rlx-radius: var(--rlx-radius-md); /* ── Borders ── */ --rlx-border-width-sm: 1px; --rlx-border-width-md: 2px; --rlx-border-width-lg: 3px; --rlx-divider-weight: 1px; /* ── Shadows (three-layer composites) — tightened so cards have a defined edge instead of floating in fog. The 0 1px halo defines the silhouette; the second layer carries the elevation. */ /* Pure black, low alpha, and NO `0 0 0 1px` ring layer. That ring was a hairline border wearing a shadow's clothes — surfaces that dropped their real border still came out outlined. Depth is the blur now. */ --rlx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .04); --rlx-shadow-md: 0 1px 2px 0 rgb(0 0 0 / .04), 0 4px 12px -3px rgb(0 0 0 / .06); --rlx-shadow-lg: 0 2px 6px -2px rgb(0 0 0 / .05), 0 12px 32px -6px rgb(0 0 0 / .09); --rlx-shadow: var(--rlx-shadow-md); /* ── Z-index scale ── */ --rlx-z-base: 0; --rlx-z-raised: 10; --rlx-z-dropdown: 100; --rlx-z-sticky: 200; --rlx-z-overlay: 300; --rlx-z-modal: 400; --rlx-z-toast: 500; --rlx-z-tooltip: 600; /* ── Motion ── */ --rlx-duration-fast: 150ms; --rlx-duration: 250ms; --rlx-duration-slow: 400ms; --rlx-duration-exit: 300ms; --rlx-ease-default: cubic-bezier(.4, 0, .2, 1); --rlx-ease-out: cubic-bezier(0, 0, .2, 1); --rlx-ease-in: cubic-bezier(.4, 0, 1, 1); --rlx-ease-spring: cubic-bezier(.32, .72, 0, 1); --rlx-transition-default: var(--rlx-duration) var(--rlx-ease-default); /* ── Focus ring ── */ --rlx-focus-ring: 0 0 0 2px var(--rlx-background), 0 0 0 4px var(--rlx-focus); /* ── Opacity ── */ --rlx-opacity-disabled: .5; --rlx-opacity-muted: .65; --rlx-opacity-hover: .9; /* ── Sidebar layout (Pro flavor) ── */ --rlx-sidebar-width: 260px; --rlx-sidebar-width-collapsed: 68px; --rlx-sidebar-duration: 200ms; --rlx-sidebar-item-radius: 12px; --rlx-sidebar-item-height: 48px; --rlx-sidebar-item-gap: 2px; --rlx-sidebar-icon-size: 20px; /* Active accent. Mapped to primary; override to recolor. */ --rlx-sidebar-accent: var(--rlx-primary); --rlx-sidebar-accent-rgb: var(--rlx-primary-rgb); /* Chevron used as a CSS mask on sidebar item ::after. */ --rlx-chevron-right-mask: url("data:image/svg+xml;utf8,"); /* ── Dash shell layout (rail | secondary | main) ── */ --rlx-col-header-height: 80px; --rlx-dashshell-secondary: 280px; /* ── Scrollbar (light) ── */ --rlx-scroll-size: 10px; --rlx-scroll-track: transparent; --rlx-scroll-thumb: rgba(0, 0, 0, .18); --rlx-scroll-thumb-hover: rgba(0, 0, 0, .32); /* ── Input surfaces (light) ── The default scale is a fixed light-to-dark zinc ramp, so a tinted input bg has to pick *opposite ends* of the ramp per theme. Light uses the light ramp steps; the dark block below uses the same scale's dark steps. */ --rlx-input-bg: var(--rlx-default-100); --rlx-input-bg-hover: var(--rlx-default-200); --rlx-input-border: var(--rlx-default-200); --rlx-input-border-hover: var(--rlx-default-400); --rlx-input-border-focus: var(--rlx-foreground); } /* ── Dark theme (auto via system pref) — v3 values ────────────── Light theme only: the guard below used to be `:root:not([data-theme="light"])`, which let a dark-preference OS pick these up whenever the attribute was missing. It now requires an explicit opt-in, which only the Wall sets. Restore the `:not()` form to bring system-preference dark back. */ @media (prefers-color-scheme: dark) { :root[data-theme="dark"] { /* Background group — near-black navy canvas (matches Main.png). */ --rlx-background: #06080F; --rlx-background-secondary: #0A0D16; --rlx-background-tertiary: #11151F; --rlx-background-inverse: var(--rlx-neutral-50); /* Surface group — navy-tinted tiers; elevation reads through tone. */ --rlx-surface: #0E121C; --rlx-surface-secondary: #141926; --rlx-surface-tertiary: #1E2433; /* Separator group — low-contrast navy rules. */ --rlx-separator: #1C2130; --rlx-separator-secondary: #262D3D; --rlx-separator-tertiary: #333B4D; /* Foreground group */ --rlx-foreground: #F6F7FB; --rlx-foreground-muted: #A6ABBD; --rlx-foreground-segment: #333B4D; --rlx-foreground-overlay: #1A1F2B; --rlx-foreground-link: #F6F7FB; /* Form field group */ --rlx-field-bg: #141926; --rlx-field-bg-hover: #1E2433; --rlx-field-bg-focus: #141926; --rlx-field-foreground: #F6F7FB; --rlx-field-placeholder: #8B91A6; /* Default semantic */ --rlx-default: #141926; --rlx-default-hover: #1E2433; --rlx-default-foreground: #F6F7FB; /* Accent — the azure, lifted one ramp step for the navy canvas. */ /* #3B82F6 itself is only 3.19:1 on this ground; the 400 step clears 7.34:1 while still reading as the same brand colour. Same move the console's dark band makes (see desktop.css §4.3). */ --rlx-accent: #60A5FA; /* the light accent is too dark here */ --rlx-accent-hover: #93C5FD; /* Ink, not white. A bright fill wants dark type on it: eclipse runs 7.88:1 under this where white manages 2.66:1. */ --rlx-accent-foreground: var(--rlx-eclipse); --rlx-accent-soft: #14294A; --rlx-accent-soft-hover: #1B3768; --rlx-accent-soft-foreground: #93C5FD; /* 8.19:1 on the soft well */ /* The same six palette colours as light. What flips is which role they fill: on a dark ground a pastel IS the legible text (7.6-13.4:1), so it serves as -soft-foreground, and -soft becomes a deep well of the same hue rather than a pale wash. The base stays a fill with ink on it. */ --rlx-danger: var(--rlx-ref-danger); --rlx-danger-hover: #DF7872; --rlx-danger-foreground: var(--rlx-eclipse); --rlx-danger-soft: #380F0D; --rlx-danger-soft-hover: #4D1511; --rlx-danger-soft-foreground: var(--rlx-ref-danger); --rlx-warning: var(--rlx-ref-warning); --rlx-warning-hover: #EEB054; --rlx-warning-foreground: var(--rlx-eclipse); --rlx-warning-soft: #3F2806; --rlx-warning-soft-hover: #563708; --rlx-warning-soft-foreground: var(--rlx-ref-warning); --rlx-success: var(--rlx-ref-success); --rlx-success-hover: #A9CB88; --rlx-success-foreground: var(--rlx-eclipse); --rlx-success-soft: #223015; --rlx-success-soft-hover: #2F421D; --rlx-success-soft-foreground: var(--rlx-ref-success); --rlx-notification: var(--rlx-ref-notification); --rlx-notification-hover: #88B8F0; --rlx-notification-foreground: var(--rlx-eclipse); --rlx-notification-soft: #08203D; --rlx-notification-soft-hover: #0A2C54; --rlx-notification-soft-foreground: var(--rlx-ref-notification); --rlx-important: var(--rlx-ref-important); --rlx-important-hover: #AD92EB; --rlx-important-foreground: var(--rlx-eclipse); --rlx-important-soft: #190B3A; --rlx-important-soft-hover: #220E50; --rlx-important-soft-foreground: var(--rlx-ref-important); --rlx-attention: var(--rlx-ref-attention); --rlx-attention-hover: #E1DD6A; --rlx-attention-foreground: var(--rlx-eclipse); --rlx-attention-soft: #39380C; --rlx-attention-soft-hover: #4E4C10; --rlx-attention-soft-foreground: var(--rlx-ref-attention); /* Aliases */ --rlx-panel: var(--rlx-surface); --rlx-panel-foreground: var(--rlx-foreground); --rlx-muted: var(--rlx-foreground-muted); --rlx-surface-1: var(--rlx-surface); --rlx-surface-2: var(--rlx-surface-secondary); --rlx-surface-3: var(--rlx-surface-tertiary); --rlx-border: var(--rlx-separator); --rlx-divider: var(--rlx-separator); --rlx-focus: var(--rlx-accent); --rlx-overlay: var(--rlx-black); /* Legacy aliases */ --rlx-primary: var(--rlx-accent); --rlx-primary-foreground: var(--rlx-accent-foreground); --rlx-secondary: var(--rlx-accent); --rlx-secondary-foreground: var(--rlx-accent-foreground); --rlx-content1: var(--rlx-panel); --rlx-content2: var(--rlx-surface-2); --rlx-content3: var(--rlx-surface-3); --rlx-content4: var(--rlx-surface-3); /* RGB triplets — recomputed for dark values. */ --rlx-accent-rgb: 96 165 250; /* #60A5FA — the dark-theme accent */ --rlx-primary-rgb: 96 165 250; /* #60A5FA — --rlx-primary follows it */ --rlx-secondary-rgb: 96 165 250; /* = accent; secondary is an alias */ --rlx-default-rgb: 20 25 38; /* surface-secondary */ --rlx-success-rgb: 191 216 166; --rlx-warning-rgb: 242 194 123; --rlx-danger-rgb: 231 154 149; --rlx-notification-rgb: 175 207 245; --rlx-important-rgb: 201 183 242; --rlx-attention-rgb: 232 229 142; --rlx-text: var(--rlx-foreground); --rlx-text-muted: var(--rlx-muted); --rlx-text-sub: #8B91A6; --rlx-text-strong: var(--rlx-foreground); --rlx-shadow-sm: 0 0 5px 0 rgb(0 0 0 / .05), 0 2px 10px 0 rgb(0 0 0 / .2), inset 0 0 1px 0 rgb(255 255 255 / .15); --rlx-shadow-md: 0 0 15px 0 rgb(0 0 0 / .06), 0 2px 30px 0 rgb(0 0 0 / .22), inset 0 0 1px 0 rgb(255 255 255 / .15); --rlx-shadow-lg: 0 0 30px 0 rgb(0 0 0 / .07), 0 30px 60px 0 rgb(0 0 0 / .26), inset 0 0 1px 0 rgb(255 255 255 / .15); --rlx-scroll-thumb: rgba(255, 255, 255, .14); --rlx-scroll-thumb-hover: rgba(255, 255, 255, .28); /* Input surfaces (dark) — pick the dark end of the zinc ramp so a "tinted" input reads as a slightly lifted dark chip. */ --rlx-input-bg: #141926; --rlx-input-bg-hover: #1E2433; --rlx-input-border: #262D3D; --rlx-input-border-hover: #3A4257; --rlx-input-border-focus: var(--rlx-foreground); } } /* ── Dark theme (explicit override) — v3 values ──────────────── */ :root[data-theme="dark"] { /* Background group — near-black navy canvas (matches Main.png). */ --rlx-background: #06080F; --rlx-background-secondary: #0A0D16; --rlx-background-tertiary: #11151F; --rlx-background-inverse: var(--rlx-neutral-50); /* Surface group — navy-tinted tiers; elevation reads through tone. */ --rlx-surface: #0E121C; --rlx-surface-secondary: #141926; --rlx-surface-tertiary: #1E2433; /* Separator group — low-contrast navy rules. */ --rlx-separator: #1C2130; --rlx-separator-secondary: #262D3D; --rlx-separator-tertiary: #333B4D; /* Foreground group */ --rlx-foreground: #F6F7FB; --rlx-foreground-muted: #A6ABBD; --rlx-foreground-segment: #333B4D; --rlx-foreground-overlay: #1A1F2B; --rlx-foreground-link: #F6F7FB; /* Form field group */ --rlx-field-bg: #141926; --rlx-field-bg-hover: #1E2433; --rlx-field-bg-focus: #141926; --rlx-field-foreground: #F6F7FB; --rlx-field-placeholder: #8B91A6; /* Default semantic */ --rlx-default: #141926; --rlx-default-hover: #1E2433; --rlx-default-foreground: #F6F7FB; /* Accent — the azure, lifted one ramp step for the navy canvas. */ /* #3B82F6 itself is only 3.19:1 on this ground; the 400 step clears 7.34:1 while still reading as the same brand colour. Same move the console's dark band makes (see desktop.css §4.3). */ --rlx-accent: #60A5FA; /* the light accent is too dark here */ --rlx-accent-hover: #93C5FD; /* Ink, not white. A bright fill wants dark type on it: eclipse runs 7.88:1 under this where white manages 2.66:1. */ --rlx-accent-foreground: var(--rlx-eclipse); --rlx-accent-soft: #14294A; --rlx-accent-soft-hover: #1B3768; --rlx-accent-soft-foreground: #93C5FD; /* 8.19:1 on the soft well */ /* The same six palette colours as light. What flips is which role they fill: on a dark ground a pastel IS the legible text (7.6-13.4:1), so it serves as -soft-foreground, and -soft becomes a deep well of the same hue rather than a pale wash. The base stays a fill with ink on it. */ --rlx-danger: var(--rlx-ref-danger); --rlx-danger-hover: #DF7872; --rlx-danger-foreground: var(--rlx-eclipse); --rlx-danger-soft: #380F0D; --rlx-danger-soft-hover: #4D1511; --rlx-danger-soft-foreground: var(--rlx-ref-danger); --rlx-warning: var(--rlx-ref-warning); --rlx-warning-hover: #EEB054; --rlx-warning-foreground: var(--rlx-eclipse); --rlx-warning-soft: #3F2806; --rlx-warning-soft-hover: #563708; --rlx-warning-soft-foreground: var(--rlx-ref-warning); --rlx-success: var(--rlx-ref-success); --rlx-success-hover: #A9CB88; --rlx-success-foreground: var(--rlx-eclipse); --rlx-success-soft: #223015; --rlx-success-soft-hover: #2F421D; --rlx-success-soft-foreground: var(--rlx-ref-success); --rlx-notification: var(--rlx-ref-notification); --rlx-notification-hover: #88B8F0; --rlx-notification-foreground: var(--rlx-eclipse); --rlx-notification-soft: #08203D; --rlx-notification-soft-hover: #0A2C54; --rlx-notification-soft-foreground: var(--rlx-ref-notification); --rlx-important: var(--rlx-ref-important); --rlx-important-hover: #AD92EB; --rlx-important-foreground: var(--rlx-eclipse); --rlx-important-soft: #190B3A; --rlx-important-soft-hover: #220E50; --rlx-important-soft-foreground: var(--rlx-ref-important); --rlx-attention: var(--rlx-ref-attention); --rlx-attention-hover: #E1DD6A; --rlx-attention-foreground: var(--rlx-eclipse); --rlx-attention-soft: #39380C; --rlx-attention-soft-hover: #4E4C10; --rlx-attention-soft-foreground: var(--rlx-ref-attention); /* Aliases */ --rlx-panel: var(--rlx-surface); --rlx-panel-foreground: var(--rlx-foreground); --rlx-muted: var(--rlx-foreground-muted); --rlx-surface-1: var(--rlx-surface); --rlx-surface-2: var(--rlx-surface-secondary); --rlx-surface-3: var(--rlx-surface-tertiary); --rlx-border: var(--rlx-separator); --rlx-divider: var(--rlx-separator); --rlx-focus: var(--rlx-accent); --rlx-overlay: var(--rlx-black); /* Legacy aliases */ --rlx-primary: var(--rlx-accent); --rlx-primary-foreground: var(--rlx-accent-foreground); --rlx-secondary: var(--rlx-accent); --rlx-secondary-foreground: var(--rlx-accent-foreground); --rlx-content1: var(--rlx-panel); --rlx-content2: var(--rlx-surface-2); --rlx-content3: var(--rlx-surface-3); --rlx-content4: var(--rlx-surface-3); --rlx-accent-rgb: 96 165 250; /* #60A5FA — the dark-theme accent */ --rlx-primary-rgb: 96 165 250; /* #60A5FA — --rlx-primary follows it */ --rlx-secondary-rgb: 96 165 250; /* = accent; secondary is an alias */ --rlx-default-rgb: 20 25 38; --rlx-success-rgb: 191 216 166; --rlx-warning-rgb: 242 194 123; --rlx-danger-rgb: 231 154 149; --rlx-notification-rgb: 175 207 245; --rlx-important-rgb: 201 183 242; --rlx-attention-rgb: 232 229 142; --rlx-text: var(--rlx-foreground); --rlx-text-muted: var(--rlx-muted); --rlx-text-sub: #8B91A6; --rlx-text-strong: var(--rlx-foreground); --rlx-shadow-sm: 0 0 5px 0 rgb(0 0 0 / .05), 0 2px 10px 0 rgb(0 0 0 / .2), inset 0 0 1px 0 rgb(255 255 255 / .15); --rlx-shadow-md: 0 0 15px 0 rgb(0 0 0 / .06), 0 2px 30px 0 rgb(0 0 0 / .22), inset 0 0 1px 0 rgb(255 255 255 / .15); --rlx-shadow-lg: 0 0 30px 0 rgb(0 0 0 / .07), 0 30px 60px 0 rgb(0 0 0 / .26), inset 0 0 1px 0 rgb(255 255 255 / .15); --rlx-scroll-thumb: rgba(255, 255, 255, .14); --rlx-scroll-thumb-hover: rgba(255, 255, 255, .28); --rlx-input-bg: #141926; --rlx-input-bg-hover: #1E2433; --rlx-input-border: #262D3D; --rlx-input-border-hover: #3A4257; --rlx-input-border-focus: var(--rlx-foreground); } /* ── Reduced motion ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; /* Delay has to be zeroed too, not just duration. A staggered entrance uses `animation-fill-mode: both`, so during its delay the element is held at the `from` keyframe — opacity 0. Killing only the duration leaves the item invisible for the length of its delay, which for the last row of a staggered list is a third of a second of blank space. */ animation-delay: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } [data-reduced-motion="allow"], [data-reduced-motion="allow"]::before, [data-reduced-motion="allow"]::after { animation-duration: revert !important; animation-iteration-count: revert !important; transition-duration: revert !important; animation-delay: revert !important; transition-delay: revert !important; } } /* ───────────────────────────────────────────────────────────── Motion utilities — entrance, stagger and expand ───────────────────────────────────────────────────────────── Three opt-in primitives, so a surface animates by adding a class rather than by hand-rolling keyframes: .rlx-stagger a container whose children fade + rise in sequence .rlx-enter one element entering on its own (a pushed row) .rlx-expand a region that opens/closes to its natural height All three inherit the global reduced-motion switch above — it kills animation and transition duration on `*`, so nothing here needs its own `prefers-reduced-motion` block. Stagger economics: 28ms per item, and the delay is capped at the 12th child (~336ms to fully populate). Everything past the 12th shares the final delay, so a 20-item list and a 200-item list both finish in the same third of a second. An uncapped stagger is how you get a list that takes two seconds to appear, which reads as a bug rather than polish. ── */ :root { --rlx-stagger-step: 28ms; --rlx-enter-rise: 8px; } @keyframes rlx-enter { from { opacity: 0; transform: translateY(var(--rlx-enter-rise)); } to { opacity: 1; transform: none; } } @keyframes rlx-exit { to { opacity: 0; transform: translateY(calc(var(--rlx-enter-rise) * -.5)); } } /* One element entering on its own — a row pushed into a live list. `backwards`, deliberately not `both`. These animate `transform`, and the `to` keyframe is `transform: none` — under `both` the forwards half keeps that applied for the life of the element, and a CSS animation out-cascades plain inline styles. Any child positioned by an inline transform (a virtualized feed row placed with `translateY`) is then pinned to y=0 for good: a list of rows silently stacks into one. `backwards` holds the `from` state through the stagger delay, which is the ladder's whole trick, and the forwards half adds nothing anyway — this `to` state *is* the element's natural state. A future collision now degrades to a brief entrance flash instead of permanently collapsed content. (`.rlx-exit` below keeps `both`: an exit genuinely has to hold its end state until the node is removed.) */ .rlx-enter { animation: rlx-enter var(--rlx-duration) var(--rlx-ease-out) backwards; } /* A container that populates. Children animate in document order; the delay ladder is capped so long lists don't crawl. */ .rlx-stagger > * { animation: rlx-enter var(--rlx-duration) var(--rlx-ease-out) backwards; } .rlx-stagger > :nth-child(1) { animation-delay: 0ms; } .rlx-stagger > :nth-child(2) { animation-delay: calc(var(--rlx-stagger-step) * 1); } .rlx-stagger > :nth-child(3) { animation-delay: calc(var(--rlx-stagger-step) * 2); } .rlx-stagger > :nth-child(4) { animation-delay: calc(var(--rlx-stagger-step) * 3); } .rlx-stagger > :nth-child(5) { animation-delay: calc(var(--rlx-stagger-step) * 4); } .rlx-stagger > :nth-child(6) { animation-delay: calc(var(--rlx-stagger-step) * 5); } .rlx-stagger > :nth-child(7) { animation-delay: calc(var(--rlx-stagger-step) * 6); } .rlx-stagger > :nth-child(8) { animation-delay: calc(var(--rlx-stagger-step) * 7); } .rlx-stagger > :nth-child(9) { animation-delay: calc(var(--rlx-stagger-step) * 8); } .rlx-stagger > :nth-child(10) { animation-delay: calc(var(--rlx-stagger-step) * 9); } .rlx-stagger > :nth-child(11) { animation-delay: calc(var(--rlx-stagger-step) * 10); } /* 12th and beyond all land together — the cap. */ .rlx-stagger > :nth-child(n+12) { animation-delay: calc(var(--rlx-stagger-step) * 11); } /* Leaving overrides arriving. Declared after the stagger ladder and matched on the container too, because `.rlx-stagger > *` and a bare `.rlx-exit` score the same specificity — a row leaving a staggered list would otherwise keep the entrance animation and never fade out. The delay reset matters for the same reason: it would inherit its position in the ladder. */ .rlx-exit, .rlx-stagger > .rlx-exit { animation: rlx-exit var(--rlx-duration-fast) var(--rlx-ease-in) both; animation-delay: 0ms; } /* Expand/collapse to natural height. `height: auto` can't interpolate, so the outer track goes 0fr → 1fr and the inner clips. `overflow: hidden` is what lets the grid track shrink below the content's intrinsic size (it zeroes the automatic minimum) — without it the region won't close. Same technique the Accordion already uses. The inner element must carry its vertical spacing as PADDING, not margin — a margin sits outside the border box and would show through a closed track. That padding is then zeroed while closed, because a box can never be shorter than its own padding: leave it on and an "empty" track still measures its padding tall. */ .rlx-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--rlx-duration) var(--rlx-ease-default); } .rlx-expand > * { overflow: hidden; min-height: 0; } .rlx-expand:not([data-open="true"]) > * { padding-top: 0; padding-bottom: 0; margin: 0; } .rlx-expand[data-open="true"] { grid-template-rows: 1fr; } /* Fade the contents slightly behind the height so the text doesn't appear to be squeezed out of a closing box. */ .rlx-expand > * { opacity: 0; transition: opacity var(--rlx-duration-fast) var(--rlx-ease-default); } .rlx-expand[data-open="true"] > * { opacity: 1; transition-delay: 60ms; } /* ── Base reset ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { color-scheme: light; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { font-family: var(--rlx-font); font-size: var(--rlx-fs-small); line-height: var(--rlx-lh-small); color: var(--rlx-text); background: var(--rlx-background); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--rlx-transition-default), color var(--rlx-transition-default); } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } button:focus-visible { outline: none; box-shadow: var(--rlx-focus-ring); border-radius: 6px; } img, svg { display: block; max-width: 100%; } hr { border: 0; border-top: var(--rlx-divider-weight) solid var(--rlx-divider); margin: var(--rlx-space-6) 0; } code, kbd, pre, samp { font-family: var(--rlx-font-mono); } a.rlx-link { color: var(--rlx-primary); text-decoration: underline; text-decoration-color: rgb(var(--rlx-primary-rgb) / .35); text-underline-offset: 3px; transition: text-decoration-color var(--rlx-duration-fast) var(--rlx-ease-default), color var(--rlx-duration-fast) var(--rlx-ease-default); } a.rlx-link:hover { text-decoration-color: currentColor; } /* ── Micro-label ───────────────────────────────────────────── The uppercase caps label — section eyebrows, sidebar group headings, status captions, stat-tile labels. Compose this instead of re-picking a size/weight/tracking triple per component. Doing that by hand is how sibling labels ended up at five different trackings on the same screen. `--strong` is the louder variant used for live/status pills. */ .rlx-label-micro { font-size: var(--rlx-type-caps-size); line-height: var(--rlx-lh-micro); font-weight: var(--rlx-type-caps-weight); text-transform: uppercase; letter-spacing: var(--rlx-tracking-wider); color: var(--rlx-text-muted); } .rlx-label-micro--strong { font-weight: var(--rlx-fw-bold); letter-spacing: var(--rlx-tracking-widest); } /* ── Scroll utility ────────────────────────────────────────── Apply to any scroll container for a thin, unobtrusive scrollbar that stays out of the way: no track, the thumb is invisible at rest and fades in on hover/focus, and nothing shows at all when the content fits. The thumb is inset (transparent border + padding-box) so it reads as a slim pill. */ .rlx-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; } .rlx-scroll:hover, .rlx-scroll:focus-within { scrollbar-color: var(--rlx-scroll-thumb) transparent; } .rlx-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .rlx-scroll::-webkit-scrollbar-track { background: transparent; } .rlx-scroll::-webkit-scrollbar-thumb { background-color: transparent; border: 3px solid transparent; background-clip: padding-box; border-radius: var(--rlx-radius-full); transition: background-color var(--rlx-duration) var(--rlx-ease-default); } .rlx-scroll:hover::-webkit-scrollbar-thumb, .rlx-scroll:focus-within::-webkit-scrollbar-thumb { background-color: var(--rlx-scroll-thumb); } .rlx-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--rlx-scroll-thumb-hover); } /* ── Icon ───────────────────────────────────────────────────── Inline-SVG wrapper. Size driven by font-size, color by currentColor. ─────────────────────────────────────────────────────────── */ .rlx-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit; line-height: 1; width: 1em; height: 1em; } .rlx-icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; } .rlx-icon-missing { width: 1em; height: 1em; border: 1px dashed currentColor; border-radius: 3px; font-size: .7em; opacity: .6; text-align: center; line-height: 1; } /* ── App shell ──────────────────────────────────────────────── */ .rlx-shell { display: grid; grid-template-columns: var(--rlx-sidebar-width) 1fr; min-height: 100vh; transition: grid-template-columns var(--rlx-sidebar-duration) var(--rlx-ease-default); } .rlx-shell[data-sidebar-collapsed="true"] { grid-template-columns: var(--rlx-sidebar-width-collapsed) 1fr; } .rlx-main { display: flex; flex-direction: column; min-width: 0; /* allow children with overflow:auto to shrink */ } /* ── Shell topbar (sticky, holds the theme switcher) ────────── */ .rlx-shell-topbar { position: sticky; top: 0; z-index: var(--rlx-z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--rlx-space-4); padding: var(--rlx-space-3) var(--rlx-space-6); background: color-mix(in srgb, var(--rlx-background) 85%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: var(--rlx-divider-weight) solid var(--rlx-divider); min-height: 56px; } .rlx-shell-topbar-title { font-size: var(--rlx-type-strong-size); font-weight: var(--rlx-type-strong-weight); color: var(--rlx-text-sub); display: flex; align-items: center; gap: var(--rlx-space-2); } .rlx-shell-topbar-title strong { color: var(--rlx-text); font-weight: var(--rlx-fw-semibold); } .rlx-shell-topbar-actions { display: flex; align-items: center; gap: var(--rlx-space-2); } /* ── Page content ───────────────────────────────────────────── */ .rlx-page { flex: 1; padding: var(--rlx-space-8) var(--rlx-space-8) var(--rlx-space-16); max-width: 1200px; width: 100%; margin: 0 auto; } .rlx-page-header { margin-bottom: var(--rlx-space-8); } .rlx-page-eyebrow { font-size: var(--rlx-type-caps-size); font-weight: var(--rlx-type-caps-weight); text-transform: uppercase; letter-spacing: var(--rlx-tracking-wider); color: var(--rlx-primary); margin: 0 0 var(--rlx-space-2); } .rlx-page-title { font-size: var(--rlx-type-display-size); font-weight: var(--rlx-type-display-weight); line-height: var(--rlx-lh-tight); color: var(--rlx-text-strong); letter-spacing: var(--rlx-tracking-tight); margin: 0 0 var(--rlx-space-3); } .rlx-page-lede { font-size: var(--rlx-type-body-size); line-height: var(--rlx-lh-small); color: var(--rlx-text-sub); max-width: 64ch; margin: 0; font-weight: var(--rlx-type-body-weight);} .rlx-section { margin-bottom: var(--rlx-space-12); } .rlx-section-header { margin-bottom: var(--rlx-space-4); } .rlx-section-title { font-size: var(--rlx-type-title-size); font-weight: var(--rlx-type-title-weight); line-height: var(--rlx-lh-snug); color: var(--rlx-text-strong); letter-spacing: var(--rlx-tracking-tight); margin: 0 0 var(--rlx-space-1); } .rlx-section-sub { font-size: var(--rlx-type-body-size); color: var(--rlx-text-sub); margin: 0; font-weight: var(--rlx-type-body-weight);} /* ── Card (used as token-display container) ─────────────────── */ .rlx-card { background: var(--rlx-content1); /* Borderless, like every other card in the set — the app's .pc-card, the two focal cards, the question and menu-grid rows. Elevation carries the edge. Kept on the smallest shadow rather than .pc-card's medium because this one nests inside other panels across the kit's demo pages. */ border: 0; border-radius: var(--rlx-radius-lg); box-shadow: var(--rlx-shadow-sm); padding: var(--rlx-space-5); } .rlx-card + .rlx-card { margin-top: var(--rlx-space-4); } .rlx-card-title { font-size: var(--rlx-type-subtitle-size); font-weight: var(--rlx-type-subtitle-weight); color: var(--rlx-text-strong); margin: 0 0 var(--rlx-space-1); } .rlx-card-sub { font-size: var(--rlx-type-body-size); color: var(--rlx-text-sub); margin: 0 0 var(--rlx-space-4); font-weight: var(--rlx-type-body-weight);} /* ── Sidebar (HeroUI Pro flavor) ────────────────────────────── */ .rlx-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; background: var(--rlx-content1); /* No horizontal padding — every inset is owned by the children, so the nav can scroll edge-to-edge and the scrollbar hugs the right side. */ padding: var(--rlx-space-4) 0; gap: var(--rlx-space-4); overflow: hidden; transition: padding var(--rlx-sidebar-duration) var(--rlx-ease-default); } .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar { padding: var(--rlx-space-4) 0; } /* Hold the original horizontal inset on the chrome (brand / search / footer) and on each nav row, so only the nav's scroll track touches the edge. */ .rlx-sidebar-brand, .rlx-sidebar-search, .rlx-sidebar-footer, .rlx-sidebar-group-label, .rlx-sidebar-item { margin-inline: var(--rlx-space-3); } .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-item { margin-inline: 0; } /* Brand block */ .rlx-sidebar-brand { display: flex; align-items: center; gap: var(--rlx-space-3); padding: var(--rlx-space-2) var(--rlx-space-3); min-height: 44px; } .rlx-sidebar-brand-emblem { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--rlx-radius-md); background: linear-gradient(135deg, var(--rlx-primary), var(--rlx-secondary)); color: var(--rlx-primary-foreground); font-weight: var(--rlx-fw-bold); font-size: var(--rlx-fs-small); box-shadow: var(--rlx-shadow-sm); } /* Image brand: strip the gradient chip so the bitmap shows pixel-exact in the 32px emblem slot. */ .rlx-sidebar-brand-emblem--image { background: none; box-shadow: none; border-radius: 0; } .rlx-sidebar-brand-emblem--image img { display: block; width: 100%; height: 100%; object-fit: contain; } .rlx-sidebar-brand-text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .rlx-sidebar-brand-name { font-size: var(--rlx-type-strong-size); font-weight: var(--rlx-type-strong-weight); color: var(--rlx-text-strong); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rlx-sidebar-brand-meta { font-size: var(--rlx-fs-tiny); color: var(--rlx-text-muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Collapse toggle (sits in topbar, but the icon set lives in sidebar context) */ .rlx-icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--rlx-radius-sm); color: var(--rlx-text-sub); background: transparent; transition: background-color var(--rlx-duration-fast) var(--rlx-ease-default), color var(--rlx-duration-fast) var(--rlx-ease-default); } .rlx-icon-btn .rlx-icon { font-size: var(--rlx-icon-lg); } .rlx-icon-btn:hover { background: var(--rlx-content2); color: var(--rlx-text-strong); } .rlx-icon-btn[aria-pressed="true"] { color: var(--rlx-primary); background: var(--rlx-content2); } /* Search slot */ .rlx-sidebar-search { display: flex; align-items: center; gap: var(--rlx-space-2); height: 36px; padding: 0 var(--rlx-space-3); border-radius: var(--rlx-radius-sm); background: var(--rlx-content2); border: 1px solid transparent; color: var(--rlx-text-muted); font-size: var(--rlx-fs-small); transition: border-color var(--rlx-duration-fast) var(--rlx-ease-default), background-color var(--rlx-duration-fast) var(--rlx-ease-default); } .rlx-sidebar-search:hover { border-color: var(--rlx-divider); } .rlx-sidebar-search .rlx-icon { font-size: var(--rlx-icon-md); color: var(--rlx-text-muted); } .rlx-sidebar-search-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rlx-sidebar-search-kbd { font-family: var(--rlx-font-mono); font-size: var(--rlx-fs-micro); color: var(--rlx-text-muted); background: var(--rlx-content1); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--rlx-divider); letter-spacing: var(--rlx-tracking-wider); } /* Nav list (scroll area between brand and footer) */ .rlx-sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: var(--rlx-space-4); padding-right: 2px; } .rlx-sidebar-nav::-webkit-scrollbar { width: 6px; } .rlx-sidebar-nav::-webkit-scrollbar-thumb { background: var(--rlx-content3); border-radius: 999px; } .rlx-sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--rlx-default-400); } .rlx-sidebar-group { display: flex; flex-direction: column; gap: var(--rlx-sidebar-item-gap); } .rlx-sidebar-group + .rlx-sidebar-group { padding-top: var(--rlx-space-4); } .rlx-sidebar-group-label { font-size: var(--rlx-type-caps-size); font-weight: var(--rlx-type-caps-weight); text-transform: uppercase; letter-spacing: var(--rlx-tracking-wider); color: var(--rlx-text-muted); padding: 0 var(--rlx-space-4) var(--rlx-space-2); white-space: nowrap; overflow: hidden; } .rlx-sidebar-item { display: flex; align-items: center; gap: var(--rlx-space-4); height: var(--rlx-sidebar-item-height); padding: 0 var(--rlx-space-4); border-radius: var(--rlx-sidebar-item-radius); color: var(--rlx-text-sub); font-size: var(--rlx-fs-small); font-weight: var(--rlx-fw-medium); cursor: pointer; position: relative; transition: background-color var(--rlx-duration-fast) var(--rlx-ease-default), color var(--rlx-duration-fast) var(--rlx-ease-default); } .rlx-sidebar-item .rlx-icon { font-size: var(--rlx-sidebar-icon-size); color: inherit; transition: transform var(--rlx-duration-fast) var(--rlx-ease-default); } /* Trailing chevron — drawn from the same Lucide chevron-right path via CSS mask so it inherits color from the row and matches the stroke style of the leading icon. Hidden when a badge is present. */ .rlx-sidebar-item::after { content: ""; width: 16px; height: 16px; flex-shrink: 0; background: currentColor; opacity: .35; -webkit-mask: var(--rlx-chevron-right-mask) center / contain no-repeat; mask: var(--rlx-chevron-right-mask) center / contain no-repeat; transition: opacity var(--rlx-duration-fast) var(--rlx-ease-default), transform var(--rlx-duration-fast) var(--rlx-ease-default); } .rlx-sidebar-item:has(.rlx-sidebar-item-badge)::after { display: none; } .rlx-sidebar-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rlx-sidebar-item-badge { font-size: var(--rlx-fs-micro); font-weight: var(--rlx-fw-semibold); padding: 2px 8px; border-radius: var(--rlx-radius-full); background: var(--rlx-content2); color: var(--rlx-text-sub); border: 1px solid var(--rlx-divider); letter-spacing: var(--rlx-tracking-wide); } .rlx-sidebar-item:hover { background: var(--rlx-content2); color: var(--rlx-text-strong); } .rlx-sidebar-item:hover .rlx-icon { transform: scale(.9); } .rlx-sidebar-item:hover::after { opacity: .7; transform: translateX(2px); } .rlx-sidebar-item[data-current="true"] { background: var(--rlx-content3); color: var(--rlx-text-strong); } .rlx-sidebar-item[data-current="true"]:hover .rlx-icon { transform: none; } .rlx-sidebar-item[data-current="true"]::after { opacity: .7; } .rlx-sidebar-item[data-disabled="true"] { cursor: not-allowed; opacity: var(--rlx-opacity-disabled); } .rlx-sidebar-item[data-disabled="true"]:hover { background: transparent; color: var(--rlx-text-sub); } .rlx-sidebar-item[data-disabled="true"]:hover .rlx-icon { color: var(--rlx-text-muted); } .rlx-sidebar-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--rlx-background), 0 0 0 4px var(--rlx-focus); } /* Footer (user chip + settings) */ .rlx-sidebar-footer { border-top: var(--rlx-divider-weight) solid var(--rlx-divider); padding-top: var(--rlx-space-3); display: flex; flex-direction: column; gap: 2px; } .rlx-sidebar-user { display: flex; align-items: center; gap: var(--rlx-space-3); padding: var(--rlx-space-2) var(--rlx-space-3); border-radius: var(--rlx-radius-md); transition: background-color var(--rlx-duration-fast) var(--rlx-ease-default); cursor: pointer; } .rlx-sidebar-user:hover { background: var(--rlx-content2); } /* Non-interactive identity chip (no handler): drop the affordances. */ .rlx-sidebar-user:not([role="button"]) { cursor: default; } .rlx-sidebar-user:not([role="button"]):hover { background: transparent; } .rlx-sidebar-user-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--rlx-radius-full); background: linear-gradient(135deg, var(--rlx-secondary), var(--rlx-primary)); color: #fff; display: grid; place-items: center; font-weight: var(--rlx-fw-semibold); font-size: var(--rlx-fs-tiny); } .rlx-sidebar-user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow: hidden; } .rlx-sidebar-user-name { font-size: var(--rlx-type-strong-size); font-weight: var(--rlx-type-strong-weight); color: var(--rlx-text-strong); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rlx-sidebar-user-email { font-size: var(--rlx-fs-tiny); color: var(--rlx-text-muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rlx-sidebar-user-avatar--image { background: var(--rlx-content3); padding: 0; overflow: hidden; } .rlx-sidebar-user-avatar--image img { width: 100%; height: 100%; object-fit: cover; display: block; } .rlx-sidebar-user-chevron { margin-left: auto; color: var(--rlx-text-muted); font-size: var(--rlx-icon-md); flex-shrink: 0; } /* Collapsed-rail mode: hide labels, badges, chevron, search label, brand text */ .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-item { justify-content: center; padding: 0; gap: 0; } .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-item::after { display: none; } .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-item .rlx-sidebar-item-label, .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-item .rlx-sidebar-item-badge, .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-brand-text, .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-group-label, .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-search-label, .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-search-kbd, .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-user-meta { display: none; } .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-search { padding: 0; justify-content: center; } .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-user { justify-content: center; } .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-user-chevron { display: none; } .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-brand { justify-content: center; padding: var(--rlx-space-2) 0; } .rlx-shell[data-sidebar-collapsed="true"] .rlx-sidebar-group-label::after { content: "—"; display: block; color: var(--rlx-divider); padding: var(--rlx-space-1) 0; } /* ── Theme switcher (segmented control) ─────────────────────── */ .rlx-theme-switch { display: inline-flex; align-items: center; padding: 4px; gap: 2px; background: var(--rlx-content2); border-radius: var(--rlx-radius-sm); /* No outer border — HeroUI's version sits flush against the page. */ } .rlx-theme-switch-btn { width: 28px; height: 28px; display: inline-grid; place-items: center; /* Softer-than-circle so the selected state reads as a squircle against the pill container. */ border-radius: var(--rlx-radius-sm); color: var(--rlx-text-muted); transition: background-color var(--rlx-duration-fast) var(--rlx-ease-default), color var(--rlx-duration-fast) var(--rlx-ease-default); } .rlx-theme-switch-btn .rlx-icon { font-size: var(--rlx-icon-md); } .rlx-theme-switch-btn:hover { color: var(--rlx-text-strong); } /* Subtle adjacent-layer fill instead of a high-contrast white chip: content3 reads as "one step deeper" against content2 in both themes (darker in light, lighter in dark) without the shadow halo. */ .rlx-theme-switch-btn[aria-pressed="true"] { background: var(--rlx-content3); color: var(--rlx-text-strong); } .rlx-theme-switch-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--rlx-content2), 0 0 0 4px var(--rlx-focus); } /* ── Foundations page — token visualizations ────────────────── */ /* Grid of swatches in a single color scale */ .rlx-swatch-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--rlx-space-2); } .rlx-swatch-row + .rlx-swatch-row { margin-top: var(--rlx-space-3); } .rlx-swatch-row-label { font-size: var(--rlx-type-caps-size); font-weight: var(--rlx-type-caps-weight); color: var(--rlx-text-sub); text-transform: uppercase; letter-spacing: var(--rlx-tracking-wider); margin-bottom: var(--rlx-space-2); } .rlx-swatch { display: flex; flex-direction: column; gap: 4px; font-size: var(--rlx-fs-micro); color: var(--rlx-text-muted); min-width: 0; } .rlx-swatch-chip { height: 56px; border-radius: var(--rlx-radius-md); border: 1px solid var(--rlx-divider); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04); } .rlx-swatch-step { font-weight: var(--rlx-fw-semibold); color: var(--rlx-text-sub); font-variant-numeric: tabular-nums; } .rlx-swatch-hex { font-family: var(--rlx-font-mono); font-size: var(--rlx-fs-micro); color: var(--rlx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Semantic tokens grid */ .rlx-token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--rlx-space-3); } .rlx-token-tile { display: flex; flex-direction: column; gap: var(--rlx-space-2); padding: var(--rlx-space-3); background: var(--rlx-content1); border: 1px solid var(--rlx-divider); border-radius: var(--rlx-radius-md); } .rlx-token-tile-chip { height: 44px; border-radius: var(--rlx-radius-sm); border: 1px solid var(--rlx-divider); } .rlx-token-tile-name { font-family: var(--rlx-font-mono); font-size: var(--rlx-type-meta-size); color: var(--rlx-text-strong); font-weight: var(--rlx-type-meta-weight);} .rlx-token-tile-value { font-size: var(--rlx-fs-micro); color: var(--rlx-text-muted); font-family: var(--rlx-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Radius demo */ .rlx-radius-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--rlx-space-4); } .rlx-radius-tile { display: flex; flex-direction: column; align-items: stretch; gap: var(--rlx-space-2); } .rlx-radius-tile-shape { height: 88px; background: linear-gradient(135deg, var(--rlx-content2), var(--rlx-content3)); border: 1px solid var(--rlx-divider); } .rlx-radius-tile-meta { display: flex; justify-content: space-between; font-family: var(--rlx-font-mono); font-size: var(--rlx-fs-micro); color: var(--rlx-text-muted); } .rlx-radius-tile-meta strong { color: var(--rlx-text-strong); font-weight: var(--rlx-fw-semibold); } /* Shadow demo */ .rlx-shadow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--rlx-space-6); padding: var(--rlx-space-4); background: var(--rlx-content2); border-radius: var(--rlx-radius-md); } .rlx-shadow-tile { display: flex; flex-direction: column; gap: var(--rlx-space-3); padding: var(--rlx-space-4); background: var(--rlx-content1); border-radius: var(--rlx-radius-md); min-height: 100px; } .rlx-shadow-tile-sm { box-shadow: var(--rlx-shadow-sm); } .rlx-shadow-tile-md { box-shadow: var(--rlx-shadow-md); } .rlx-shadow-tile-lg { box-shadow: var(--rlx-shadow-lg); } .rlx-shadow-tile-name { font-family: var(--rlx-font-mono); font-size: var(--rlx-type-meta-size); color: var(--rlx-text-strong); font-weight: var(--rlx-type-meta-weight);} .rlx-shadow-tile-sub { font-size: var(--rlx-type-meta-size); color: var(--rlx-text-muted); font-weight: var(--rlx-type-meta-weight);} /* Typography demo */ .rlx-type-stack { display: flex; flex-direction: column; gap: var(--rlx-space-4); } .rlx-type-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: baseline; gap: var(--rlx-space-4); padding-bottom: var(--rlx-space-3); border-bottom: 1px dashed var(--rlx-divider); } .rlx-type-row:last-child { border-bottom: 0; padding-bottom: 0; } .rlx-type-row-label { font-family: var(--rlx-font-mono); font-size: var(--rlx-type-meta-size); color: var(--rlx-text-muted); font-weight: var(--rlx-type-meta-weight);} .rlx-type-row-sample { color: var(--rlx-text-strong); } .rlx-type-row-spec { font-family: var(--rlx-font-mono); font-size: var(--rlx-fs-micro); color: var(--rlx-text-sub); white-space: nowrap; } /* Spacing demo */ .rlx-space-stack { display: flex; flex-direction: column; gap: var(--rlx-space-3); } .rlx-space-row { display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; gap: var(--rlx-space-4); font-family: var(--rlx-font-mono); font-size: var(--rlx-fs-micro); color: var(--rlx-text-muted); } .rlx-space-bar { height: 12px; background: var(--rlx-primary); border-radius: 3px; opacity: .85; } .rlx-space-row-label { color: var(--rlx-text-strong); } .rlx-space-row-value { text-align: right; } /* Motion demo */ .rlx-motion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--rlx-space-4); } .rlx-motion-tile { padding: var(--rlx-space-4); background: var(--rlx-content1); border: 1px solid var(--rlx-divider); border-radius: var(--rlx-radius-md); display: flex; flex-direction: column; gap: var(--rlx-space-3); } .rlx-motion-track { position: relative; height: 24px; background: var(--rlx-content2); border-radius: var(--rlx-radius-full); overflow: hidden; } .rlx-motion-dot { position: absolute; top: 50%; left: 4px; width: 18px; height: 18px; margin-top: -9px; border-radius: var(--rlx-radius-full); background: var(--rlx-primary); } .rlx-motion-tile[data-running="true"] .rlx-motion-dot { animation-name: rlx-motion-swing; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes rlx-motion-swing { from { left: 4px; } to { left: calc(100% - 22px); } } .rlx-motion-meta { display: flex; justify-content: space-between; font-family: var(--rlx-font-mono); font-size: var(--rlx-fs-micro); color: var(--rlx-text-muted); } .rlx-motion-meta strong { color: var(--rlx-text-strong); font-weight: var(--rlx-fw-semibold); } /* Z-index demo */ .rlx-z-stack { position: relative; height: 220px; background: var(--rlx-content2); border-radius: var(--rlx-radius-md); overflow: hidden; } .rlx-z-card { position: absolute; width: 180px; padding: var(--rlx-space-3) var(--rlx-space-4); background: var(--rlx-content1); border: 1px solid var(--rlx-divider); border-radius: var(--rlx-radius-md); box-shadow: var(--rlx-shadow-sm); font-family: var(--rlx-font-mono); font-size: var(--rlx-fs-micro); color: var(--rlx-text-strong); display: flex; flex-direction: column; gap: 2px; } .rlx-z-card-sub { color: var(--rlx-text-muted); font-size: var(--rlx-type-meta-size); font-weight: var(--rlx-type-meta-weight);} /* ── Primitives page — code/usage display ───────────────────── */ .rlx-code { background: var(--rlx-content2); border: 1px solid var(--rlx-divider); border-radius: var(--rlx-radius-md); padding: var(--rlx-space-3) var(--rlx-space-4); font-family: var(--rlx-font-mono); font-size: var(--rlx-fs-tiny); line-height: 1.55; color: var(--rlx-text); overflow-x: auto; white-space: pre; margin: 0; } .rlx-code-inline { font-family: var(--rlx-font-mono); font-size: .92em; background: var(--rlx-content2); border: 1px solid var(--rlx-divider); padding: 1px 6px; border-radius: 4px; color: var(--rlx-text-strong); } /* Code block — three-tab Preview / HTML / SDK demo wrapper. Tab strip on top using the kit's line tabs, panels share a bordered card body so the whole block reads as one unit. */ .rlx-codeblock { display: flex; flex-direction: column; background: var(--rlx-content1); border: 1px solid var(--rlx-divider); border-radius: var(--rlx-radius-lg); overflow: hidden; } .rlx-codeblock-tabs.rlx-tabs--line { padding: 0 var(--rlx-space-4); border-bottom: 1px solid var(--rlx-divider); background: var(--rlx-content2); } .rlx-codeblock-panels { position: relative; } .rlx-codeblock-panel { display: block; } .rlx-codeblock-panel[hidden] { display: none; } .rlx-codeblock-panel--preview { padding: var(--rlx-space-6); background: var(--rlx-content2); } .rlx-codeblock-panel--code { position: relative; } .rlx-codeblock-pre { margin: 0; padding: var(--rlx-space-4) var(--rlx-space-5); background: var(--rlx-content1); font-family: var(--rlx-font-mono); font-size: var(--rlx-fs-tiny); line-height: 1.55; color: var(--rlx-text); overflow-x: auto; white-space: pre; } .rlx-codeblock-code { font-family: inherit; } .rlx-codeblock-copy { position: absolute; top: var(--rlx-space-2); right: var(--rlx-space-2); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--rlx-radius-md); border: 1px solid var(--rlx-divider); background: var(--rlx-content2); color: var(--rlx-text-sub); font-size: var(--rlx-fs-micro); font-weight: var(--rlx-fw-medium); letter-spacing: var(--rlx-tracking-wide); cursor: pointer; transition: color var(--rlx-duration-fast) var(--rlx-ease-out), background var(--rlx-duration-fast) var(--rlx-ease-out), border-color var(--rlx-duration-fast) var(--rlx-ease-out); } .rlx-codeblock-copy:hover { color: var(--rlx-text-strong); background: var(--rlx-content3); border-color: var(--rlx-divider-strong, var(--rlx-divider)); } .rlx-codeblock-copy:focus-visible { outline: 2px solid var(--rlx-focus, var(--rlx-primary)); outline-offset: 2px; } .rlx-codeblock-copy[data-copied="true"] { color: var(--rlx-success-soft-foreground); border-color: rgb(var(--rlx-success-rgb) / .4); background: var(--rlx-success-soft); } .rlx-codeblock-copy .rlx-icon { font-size: var(--rlx-icon-sm); } .rlx-api-row { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: var(--rlx-space-4); padding: var(--rlx-space-3) 0; border-bottom: 1px dashed var(--rlx-divider); align-items: baseline; } .rlx-api-row:last-child { border-bottom: 0; } .rlx-api-name { font-family: var(--rlx-font-mono); font-size: var(--rlx-type-strong-size); color: var(--rlx-text-strong); font-weight: var(--rlx-type-strong-weight); } .rlx-api-desc { font-size: var(--rlx-type-body-size); color: var(--rlx-text-sub); line-height: var(--rlx-lh-small); font-weight: var(--rlx-type-body-weight);} .rlx-icon-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--rlx-space-2); } .rlx-icon-gallery-tile { display: flex; flex-direction: column; align-items: center; gap: var(--rlx-space-2); padding: var(--rlx-space-3) var(--rlx-space-2); border: 1px solid var(--rlx-divider); border-radius: var(--rlx-radius-md); background: var(--rlx-content1); transition: border-color var(--rlx-duration-fast) var(--rlx-ease-default), transform var(--rlx-duration-fast) var(--rlx-ease-default); } .rlx-icon-gallery-tile:hover { border-color: var(--rlx-primary); transform: translateY(-1px); } .rlx-icon-gallery-tile .rlx-icon { font-size: var(--rlx-icon-xl); color: var(--rlx-text-strong); } .rlx-icon-gallery-tile-name { font-family: var(--rlx-font-mono); font-size: var(--rlx-type-meta-size); color: var(--rlx-text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-weight: var(--rlx-type-meta-weight);} .rlx-demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rlx-space-3); padding: var(--rlx-space-4); background: var(--rlx-content2); border-radius: var(--rlx-radius-md); } /* Vertical demo stack — used inside component-doc cards to space multiple example renders. Lives in surface.css (not page-local