/* OpeningMatrix shell: fixed left sidebar. Palette = deep-blue surfaces + theme-aware neon signal. */ html[data-design="sigma"] { /* The rail is driven from here, so the whole thing is tunable in one place. The rail used to be far wider, with 50px rows and a 1.34rem glyph. All three of those were too big for the content: the labels are one short word each, so the rail was mostly empty, and a large glyph on a tall row is furniture scaled for a dashboard tile rather than for a list of links. It is now 296px. The rows come down with it and the sections spread apart to take the space back — 6 rows x -6px is 36px returned, and the group gap goes 26px -> 32px, so the rail is about the same height as before but every row has air around it. Shrinking the rail without widening the rhythm would just have produced the same cramped list in a narrower box. --sidebar-nav-icon and --sidebar-nav-stroke are the two numbers that scale the glyphs. They are separate on purpose: a thinner glyph at the old size goes anaemic and disappears, and a thicker one at the new size shouts over the label beside it. Both have to move together. Deliberately not a round number, and deliberately not the value the drawer used to hardcode in a media query — test_sidebar_scale.py forbids that literal outright so it cannot come back as a width that ignores the token. */ --sidebar-w: 296px; /* The folded width. One number, read by the same three places the open rail reads --sidebar-w from — the rail, the page offset and the flyout panel's edge — so collapsing moves all three together and a flyout still hangs off the narrow rail instead of floating over the page. 96px, not the 76px this was. At 76px the strip cleared its 1.15rem glyph with so little to spare that the icons were the smallest aimable thing on the page at the exact moment the labels had gone and the glyphs were all that was left to recognise a row by. Widening the strip and re-pointing --sidebar-nav-icon up inside the fold (see the is-sidebar-collapsed block) are one decision: a wider strip carrying the old small glyphs is a rail with dead space in it, and a bigger glyph in the old narrow strip is a glyph that has outgrown its box. 96px still sits well under half the open rail, so this is a roomier strip and not a second layout. A token rather than a literal for the same reason --sidebar-w is one. */ --sidebar-w-collapsed: 96px; --sidebar-nav-icon: 1.15rem; --sidebar-nav-stroke: 1.25; /* Vertical rhythm, and the two are deliberately different numbers for two different jobs rather than one spacing value used everywhere. --sidebar-row-gap is the gap between any two adjacent CARDS. Because every section in the rail is one row, this is also the gap between sections in practice, and it has to be big enough to see the rail between two cards — below about 6px the borders merge into one box and the rail reads as a stack of panels instead of a list of destinations. --sidebar-group-gap is the TOTAL gap at a section boundary, so it is applied as an increment on top of the row gap rather than instead of it. Sections therefore step once further than ordinary neighbours, which is what lets the eye find the boundary without a heavy rule. Both are tokens because the drawer inherits them. */ --sidebar-row-gap: 8px; --sidebar-group-gap: 16px; /* Motion. Only one number is left. --sidebar-card-in is how long the entrance takes. It has to outrun the stagger below, or the last row is still arriving after the stagger has finished talking. The hover raise and the sheen that used to sit beside these are gone, and both are gone for the same reason: they were card-only. A raise needs a card to lift, and a travelling sheen needs a surface to travel across. On a flush row they read as a label floating off the page and as a light streak over the rail respectively, so the wash and the icon's own response carry the hover on their own. */ --sidebar-card-in: 460ms; /* Flush rows want a tighter radius than cards did. A card stood alone and needed the rounding to stop its corners catching the eye before the glyph; a flush row sits edge to edge with its neighbours, and at 12px the radius was wide enough to see the rail through the gap between two rows. */ --radius-nav: 10px; --radius-card: 12px; --om-brass: var(--gold); --om-brass-bright: var(--gold-bright); /* Practice streak. The flame tracks the accent, and it always has for one reason rather than decoration: the streak card is the largest coloured object in the rail, so leaving it on a second hue makes the shell read as two palettes stacked instead of one. Every theme so far has rejected the flame that did not match — first the green one, then the blue one — and the accent has now come round to green a second time. So this is the green plasma ramp: deep at the core, brightest at the tip, which is the shape a flame has and also the shape a neon filament has. The core is deliberately deeper and more saturated than --gold, because --gold is a text and border colour tuned for contrast on a dark field and at card scale that same value reads washed out. */ --streak-core: #0a7a1f; --streak-mid: #17a83a; --streak-edge: #39ff14; --streak-ink: #b6ffcf; } /* ——— OM tokens: deep blue surfaces + neon signal ——— NOTE: these duplicate the surface and accent tokens from style_dark.css, and this copy is the one that wins — it is scoped to html[data-design="sigma"][data-theme="dark"] and this file loads after style_dark.css. Retinting only one of the two leaves the design rendering its own value, which reads as the change having had no effect at all. They have to be edited together; tests/test_theme_tokens.py enforces that they match. The --data-* ramp is the deliberate exception and is NOT duplicated here: style_dark.css owns it and this file inherits it through :root, so a result colour can never come to mean two different things. */ html[data-design="sigma"][data-theme="dark"] { /* Deep Blue + Neon (dark). The surfaces are a blue-black rather than the warm charcoal this replaced, because a near-black carrying a blue cast lets the accent read as a light source IN the room instead of a colour painted on top of one. That is the whole intent: neon on deep blue is the pairing where the signal colour looks like it is emitting. The accent is the opposite of the light theme. Here the neon itself is the legible step (14.4:1 on --bg), so --gold-bright is the LIGHTER neighbour and --gold-deep carries fills and gradients. --ink sits ON the accent as button type, so it is a green-cast near-black rather than a neutral one. It has to stay genuinely dark (tests assert luminance < 80) or the accent buttons stop being dark-on-light. */ --bg: #080d14; --bg-2: #0e141d; --bg-3: #151d28; --cream: #eef4fa; --cream-dim: #9fb1c4; --gold: #39ff14; --gold-bright: #7cff4a; --gold-deep: #00cc22; --felt: #111925; --felt-deep: #070b11; --text: #eef4fa; --muted: #8fa3b8; --line: rgba(190, 220, 255, 0.1); --line-strong: rgba(190, 220, 255, 0.18); --panel: rgba(14, 20, 29, 0.96); --shadow: rgba(0, 0, 0, 0.5); --font: "Outfit", "Segoe UI", sans-serif; --serif: "Outfit", "Segoe UI", sans-serif; --ink: #04120a; --on-solid: #04120a; --on-gold: #04120a; --fill-subtle: rgba(238, 244, 250, 0.05); --hover-fill: rgba(238, 244, 250, 0.085); --danger: #f3aaa0; --danger-bg: rgba(122, 49, 40, 0.24); --danger-border: rgba(204, 111, 96, 0.58); --danger-text: #ffd1c9; --stat-white: #eef4fa; --paper: #151d28; --paper-2: #111925; --header-bg: rgba(8, 13, 20, 0.92); --footer-bg: #080d14; --wash-top: #080d14; --wash-mid: #080d14; --wash-bottom: #0e141d; /* The gradient runs light -> deeper as it descends, the same relationship the previous accent had, so the button still has somewhere to go. */ --gold-btn-from: #39ff14; --gold-btn-to: #00cc22; --gold-btn-border: #39ff14; --gold-btn-from-hover: #7cff4a; --gold-btn-to-hover: #39ff14; --board-mat: #0e141d; --input-bg: #111925; --input-text: #eef4fa; --thumb-bg: #1b2534; --overlay-bg: rgba(4, 7, 12, 0.78); /* Glows follow the accent. These are literals rather than var(--gold) because they are baked into shadow stacks, so leaving them behind is exactly what produced a blue halo around warm panels last time. */ --glow-line: rgba(57, 255, 20, 0.4); --panel-glow: inset 0 1px 0 rgba(190, 220, 255, 0.055), 0 12px 30px rgba(0, 0, 0, 0.34); --panel-glow-hover: inset 0 1px 0 rgba(190, 220, 255, 0.08), 0 14px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(57, 255, 20, 0.4), 0 0 18px rgba(57, 255, 20, 0.14); /* ════════════════════════════════════════════════════════════════════ PREMIUM DESIGN TOKENS — Elevation, Motion, Typography, Surfaces ════════════════════════════════════════════════════════════════════ */ /* Elevation system — four levels from surface to floating modal. Each level adds depth without changing the surface colour. Values are tuned for the dark blue bg so shadows read as void, not grey. */ --elev-1: 0 1px 2px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.25); --elev-2: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); --elev-3: 0 12px 28px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.35); --elev-4: 0 20px 48px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.4); /* Glassmorphism surfaces — for cards that sit above content. */ --glass-bg: rgba(14, 20, 29, 0.72); --glass-border: rgba(190, 220, 255, 0.08); --glass-glow: inset 0 1px 0 rgba(190, 220, 255, 0.06); /* Softer accent variants — for large fills where raw neon vibrates. */ --gold-soft: color-mix(in srgb, var(--gold) 14%, transparent); --gold-soft-hover: color-mix(in srgb, var(--gold) 22%, transparent); --gold-soft-strong: color-mix(in srgb, var(--gold) 28%, transparent); --gold-glow: rgba(57, 255, 20, 0.35); --gold-glow-strong: rgba(57, 255, 20, 0.55); /* Motion tokens — spring physics for premium feel. */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --stagger-base: 32ms; /* Typography scale — hierarchical, not arbitrary. */ --text-xs: 0.7rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.0625rem; --text-xl: 1.25rem; --text-2xl: 1.5625rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-display: clamp(2.5rem, 4vw, 3.5rem); /* Font weights — named for intent. */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Line heights. */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55; --leading-relaxed: 1.7; /* Focus rings — branded, accessible, consistent. */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); --focus-ring-inset: inset 0 0 0 2px var(--gold); /* Radius scale. */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-pill: 999px; /* Transition presets. */ --transition-fast: var(--motion-fast) var(--motion-ease-out); --transition-base: var(--motion-base) var(--motion-ease-out); --transition-slow: var(--motion-slow) var(--motion-ease-out); --transition-spring: var(--motion-slow) var(--motion-spring); /* Z-index scale. */ --z-base: 1; --z-dropdown: 10; --z-sticky: 20; --z-modal: 40; --z-toast: 50; --z-tooltip: 60; /* Semantic surfaces — clearer intent than raw colours. */ --surface-1: var(--bg); /* Page background */ --surface-2: var(--bg-2); /* Raised panel */ --surface-3: var(--bg-3); /* Interactive surface */ --surface-panel: var(--panel); /* Glass panel */ --surface-glass: var(--glass-bg); /* Frosted glass */ } html[data-design="sigma"][data-theme="light"] { /* White + Neon (light). Surfaces are true white with a faint green cast, so the page reads as paper rather than as a tinted panel. The accent is a reinterpreted neon — brighter and more saturated than the previous deep forest green, so the light theme shares the brand's neon personality instead of feeling like a separate palette. Raw neon (#39ff14) on white is about 1.4:1 and cannot set type at all, so --gold-bright stays a dark step for text readability while --gold carries the vibrant accent and the glows deliver the neon atmosphere through shadows and hover states. Dark mode inverts this the other way, where neon itself is the legible step. */ --bg: #ffffff; --bg-2: #f4f8f4; --bg-3: #e8f0e8; --cream: #0b1a10; --cream-dim: #4a5f52; --gold: #22c55e; --gold-bright: #16a34a; --gold-deep: #0f7d28; --felt: #f4f8f4; --felt-deep: #e8f0e8; --ruby: #7a1f32; --text: #0b1a10; --muted: #52655a; --line: rgba(11, 26, 16, 0.14); --line-strong: rgba(11, 26, 16, 0.26); --panel: #ffffff; --shadow: rgba(11, 26, 16, 0.1); --font: "Outfit", "Segoe UI", sans-serif; --serif: "Outfit", "Segoe UI", sans-serif; --ink: #0b1a10; --on-solid: #ffffff; --on-gold: #ffffff; --fill-subtle: rgba(11, 26, 16, 0.045); --hover-fill: rgba(11, 26, 16, 0.07); --danger: #b42318; --danger-bg: #fef3f2; --danger-border: rgba(180, 35, 24, 0.28); --danger-text: #b42318; --stat-white: #4a5f52; --paper: #ffffff; --paper-2: #f7faf7; --header-bg: rgba(255, 255, 255, 0.92); --footer-bg: #ffffff; --wash-top: #ffffff; --wash-mid: #f4f8f4; --wash-bottom: #e8f0e8; /* Buttons carry the DEEP green, not the neon: white type on #39ff14 would be unreadable. --glow-line is where this theme gets its neon. */ --gold-btn-from: #16a34a; --gold-btn-to: #0f7d28; --gold-btn-border: #16a34a; --gold-btn-from-hover: #22c55e; --gold-btn-to-hover: #16a34a; --board-mat: #f4f8f4; --input-bg: #ffffff; --input-text: #0b1a10; --thumb-bg: #22c55e; --overlay-bg: rgba(255, 255, 255, 0.94); --glow-line: rgba(34, 197, 92, 0.5); --panel-glow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(11, 26, 16, 0.05), 0 10px 24px rgba(11, 26, 16, 0.07); --panel-glow-hover: inset 0 1px 0 rgba(255, 255, 255, 1), 0 8px 16px rgba(11, 26, 16, 0.07), 0 22px 40px rgba(11, 26, 16, 0.1), 0 0 0 1px rgba(34, 197, 92, 0.5), 0 0 24px rgba(34, 197, 92, 0.2); /* ════════════════════════════════════════════════════════════════════ PREMIUM DESIGN TOKENS — Light Theme ════════════════════════════════════════════════════════════════════ */ /* Elevation — softer for light theme, using ink colour not black. */ --elev-1: 0 1px 2px rgba(11,26,16,0.08), 0 1px 1px rgba(11,26,16,0.06); --elev-2: 0 4px 12px rgba(11,26,16,0.1), 0 2px 4px rgba(11,26,16,0.08); --elev-3: 0 12px 28px rgba(11,26,16,0.12), 0 4px 8px rgba(11,26,16,0.1); --elev-4: 0 20px 48px rgba(11,26,16,0.15), 0 8px 16px rgba(11,26,16,0.12); /* Glassmorphism for light theme. */ --glass-bg: rgba(255, 255, 255, 0.88); --glass-border: rgba(11, 26, 16, 0.08); --glass-glow: inset 0 1px 0 rgba(255, 255, 255, 0.9); /* Softer accent variants — green-based for light theme. */ --gold-soft: color-mix(in srgb, var(--gold) 18%, transparent); --gold-soft-hover: color-mix(in srgb, var(--gold) 28%, transparent); --gold-soft-strong: color-mix(in srgb, var(--gold) 36%, transparent); --gold-glow: rgba(34, 197, 92, 0.4); --gold-glow-strong: rgba(34, 197, 92, 0.6); /* Motion tokens — shared with dark. */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --stagger-base: 32ms; /* Typography scale — shared. */ --text-xs: 0.7rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.0625rem; --text-xl: 1.25rem; --text-2xl: 1.5625rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-display: clamp(2.5rem, 4vw, 3.5rem); /* Font weights — shared. */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Line heights — shared. */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55; --leading-relaxed: 1.7; /* Focus rings — branded, accessible. */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); --focus-ring-inset: inset 0 0 0 2px var(--gold); /* Radius scale — shared. */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-pill: 999px; /* Transition presets — shared. */ --transition-fast: var(--motion-fast) var(--motion-ease-out); --transition-base: var(--motion-base) var(--motion-ease-out); --transition-slow: var(--motion-slow) var(--motion-ease-out); --transition-spring: var(--motion-slow) var(--motion-spring); /* Z-index scale — shared. */ --z-base: 1; --z-dropdown: 10; --z-sticky: 20; --z-modal: 40; --z-toast: 50; --z-tooltip: 60; /* Semantic surfaces — light theme. */ --surface-1: var(--bg); --surface-2: var(--bg-2); --surface-3: var(--bg-3); --surface-panel: var(--panel); --surface-glass: var(--glass-bg); } html[data-design="sigma"][data-theme="dark"] .btn-gold { /* Matches --ink. The label sits on a neon fill, so it wants the green-cast near-black rather than a neutral black, which would read faintly warm against that much green. */ color: #04120a; } html[data-design="sigma"][data-theme="light"] .btn-gold { color: #ffffff; } /* ——— Shell: fixed left sidebar + scrolling main frame ——— */ html[data-design="sigma"] body { display: block; min-height: 100vh; min-height: 100dvh; } html[data-design="sigma"] .site-sidebar { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); height: 100vh; height: 100dvh; z-index: 120; flex-direction: column; gap: 7px; padding: 16px 12px 14px; /* A quiet hairline where the rail meets the page — neutral theme line, no glow. The rail already carries depth from its darker base; the edge just needs to draw the boundary. */ border-right: 1px solid var(--line); box-shadow: none; /* One step deeper than --bg-2, so the sidebar reads as a plane behind the content rather than the same surface as it. The gold wash at the top is unchanged; only the base is darker. */ background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent 28%), var(--bg); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; /* The fold. Width and the horizontal padding move together, so the icon strip is genuinely narrower and not just the same rail with its content clipped. The margin-left below carries the page with it. Reduced motion opts out. */ transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1), padding 0.24s cubic-bezier(0.22, 1, 0.36, 1); } html[data-design="sigma"] .site-frame { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; margin-left: var(--sidebar-w); width: auto; background: var(--bg); /* Kept in step with the rail's own fold above, so the page slides across with it rather than snapping a frame early. */ transition: margin-left 0.24s cubic-bezier(0.22, 1, 0.36, 1); } html[data-design="sigma"] .site-header { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; contain: none; } html[data-design="sigma"] .site-header::after { /* The header's bottom edge mirrors the rail's right edge but runs hotter: a thick neon core drawn from the solid accent (--gold, so it stays fully opaque) with the bloom stacked in three layers off the theme's own glow channel (--glow-line). The bloom is pushed down (positive y offsets) so the light spills onto the page below rather than haloing the bar. */ height: 3px; background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--gold) 75%, transparent) 22%, var(--gold) 50%, color-mix(in srgb, var(--gold) 75%, transparent) 78%, transparent 100% ); opacity: 1; box-shadow: 0 0 6px color-mix(in srgb, var(--glow-line) 95%, transparent), 0 0 18px var(--glow-line), 0 8px 32px -6px color-mix(in srgb, var(--glow-line) 90%, transparent); } html[data-design="sigma"] .site-header--utility .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(1240px, calc(100% - 32px)); margin: 0 auto; min-height: 52px; padding: 8px 0; } html[data-design="sigma"] .site-header-note { display: none; } html[data-design="sigma"] .header-sale { position: relative; display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: min(100%, 640px); padding: 7px 10px 7px 8px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--om-brass) 45%, var(--line)); background: linear-gradient(105deg, color-mix(in srgb, var(--om-brass) 14%, transparent), transparent 58%), var(--fill-subtle); color: var(--cream); text-decoration: none; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--om-brass) 18%, transparent), 0 0 18px color-mix(in srgb, var(--om-brass) 12%, transparent); transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } html[data-design="sigma"] .header-sale:hover, html[data-design="sigma"] .header-sale:focus-visible { border-color: color-mix(in srgb, var(--om-brass) 70%, var(--line)); background: linear-gradient(105deg, color-mix(in srgb, var(--om-brass) 20%, transparent), transparent 60%), var(--hover-fill); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--om-brass) 24%, transparent), 0 0 22px color-mix(in srgb, var(--om-brass) 22%, transparent); outline: none; } html[data-design="sigma"] .header-sale-badge { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: var(--om-brass); color: var(--on-gold); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; animation: header-sale-pulse 2s ease-in-out infinite; } html[data-design="sigma"] .header-sale-copy { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; min-width: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: -0.01em; color: var(--cream-dim); } html[data-design="sigma"] .header-sale-copy strong { color: var(--om-brass-bright); font-weight: 800; letter-spacing: -0.02em; } html[data-design="sigma"] .header-sale-was { color: var(--muted); font-size: 0.72rem; font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1.4px; opacity: 0.78; } html[data-design="sigma"] .header-sale-cta { flex: 0 0 auto; margin-left: 2px; padding: 5px 10px; border-radius: 8px; background: #f4f4f5; color: var(--on-solid); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } html[data-design="sigma"][data-theme="light"] .header-sale-cta { background: var(--gold-btn-from); color: var(--on-gold); } html[data-design="sigma"] .site-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; flex: 0 0 auto; } @keyframes header-sale-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--om-brass) 0%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--om-brass) 20%, transparent); } } @media (prefers-reduced-motion: reduce) { html[data-design="sigma"] .header-sale-badge { animation: none; } } html[data-design="sigma"] .header-day-run { border-color: var(--line); background: transparent; color: var(--cream-dim); } html[data-design="sigma"] .header-day-run:hover, html[data-design="sigma"] .header-day-run[aria-current="page"] { border-color: color-mix(in srgb, var(--om-brass) 45%, var(--line)); color: var(--cream); background: var(--fill-subtle); } html[data-design="sigma"] .header-day-run-value { font-size: 0.8rem; font-weight: 700; letter-spacing: -0.02em; } html[data-design="sigma"] .header-theme { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: transparent; } html[data-design="sigma"] .header-theme button { border: 0; min-height: 34px; min-width: 58px; padding: 0 12px; background: transparent; color: var(--muted); font: inherit; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } html[data-design="sigma"] .header-theme button + button { border-left: 1px solid var(--line); } html[data-design="sigma"] .header-theme button.is-active { color: var(--on-solid); background: #f4f4f5; } html[data-design="sigma"][data-theme="light"] .header-theme button.is-active { color: var(--on-solid); background: var(--gold-btn-from); } /* ——— Interface sound toggle ——— Sits beside the theme switch and matches its height and radius. Off is the default state, so the resting appearance is deliberately quiet: muted grey with a cross through the waves, not a red error treatment. */ html[data-design="sigma"] .header-sound { display: block; margin-left: 8px; } html[data-design="sigma"] .header-sound-btn { display: grid; place-items: center; width: 38px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; } html[data-design="sigma"] .header-sound-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Only one of the two glyph sets is ever shown, driven by aria-pressed. */ html[data-design="sigma"] .header-sound-mute { display: none; } html[data-design="sigma"] .header-sound-btn[aria-pressed="false"] .header-sound-wave { display: none; } html[data-design="sigma"] .header-sound-btn[aria-pressed="false"] .header-sound-mute { display: block; } html[data-design="sigma"] .header-sound-btn:hover { color: var(--cream); background: var(--hover-fill); } html[data-design="sigma"] .header-sound-btn.is-on { color: var(--on-solid); background: #f4f4f7; border-color: transparent; } html[data-design="sigma"][data-theme="light"] .header-sound-btn.is-on { background: var(--gold-btn-from); } html[data-design="sigma"] .header-sound-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--om-brass) 68%, transparent); outline-offset: 2px; } html[data-design="sigma"] .header-signin { display: none; } html[data-design="sigma"] .site-footer { background: var(--bg); border-top-color: var(--line); } html[data-design="sigma"] .footer-brand em { color: var(--om-brass-bright); font-style: normal; } html[data-design="sigma"] .footer-col a:hover { color: var(--om-brass-bright); } html[data-design="sigma"] .page-shell { background: transparent; } /* Keep cards/panels on the same lifted zinc as the shell. */ html[data-design="sigma"][data-theme="dark"] { --track-zinc: var(--bg-2); --track-gold: var(--gold); } html[data-design="sigma"][data-theme="dark"] .opening-card, html[data-design="sigma"][data-theme="dark"] .profile-card, html[data-design="sigma"][data-theme="dark"] .repertoire-guest-card, html[data-design="sigma"][data-theme="dark"] .members-card, html[data-design="sigma"][data-theme="dark"] .dash-card, html[data-design="sigma"][data-theme="dark"] .dash-kpi, html[data-design="sigma"][data-theme="dark"] .dash-speed, html[data-design="sigma"][data-theme="dark"] .dash-rate, html[data-design="sigma"][data-theme="dark"] .dash-insight, html[data-design="sigma"][data-theme="dark"] .om-dash, html[data-design="sigma"][data-theme="dark"] .om-dash-metric, html[data-design="sigma"][data-theme="dark"] .track-console, html[data-design="sigma"][data-theme="dark"] .stats-board, html[data-design="sigma"][data-theme="dark"] .stats-map-btn, html[data-design="sigma"][data-theme="dark"] .home-integrations-card, html[data-design="sigma"][data-theme="dark"] .roadmap-card, html[data-design="sigma"][data-theme="dark"] #features-container, html[data-design="sigma"][data-theme="dark"] #premium-features-container, html[data-design="sigma"][data-theme="dark"] #subscriptions-container, html[data-design="sigma"][data-theme="dark"] #about-container, html[data-design="sigma"][data-theme="dark"] .register-box, html[data-design="sigma"][data-theme="dark"] .save-progress-card { background: var(--paper); border-color: var(--line); box-shadow: var(--panel-glow); } html[data-design="sigma"][data-theme="dark"] .opening-card:hover, html[data-design="sigma"][data-theme="dark"] .profile-card:hover, html[data-design="sigma"][data-theme="dark"] .stats-map-btn:hover { background: color-mix(in srgb, var(--paper) 92%, #fff 8%); border-color: color-mix(in srgb, var(--om-brass) 35%, var(--line)); box-shadow: var(--panel-glow-hover); } html[data-design="sigma"] .site-sidebar-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 2px 6px 12px; border-bottom: 1px solid var(--line); } html[data-design="sigma"] .site-sidebar-brand .brand { flex: 1; min-width: 0; } html[data-design="sigma"] .site-sidebar-brand .brand-name { font-size: 1.18rem; letter-spacing: -0.04em; } html[data-design="sigma"] .site-sidebar-brand .brand em { color: var(--om-brass-bright); font-style: normal; } /* ——— The collapse toggle ——— A circular handle straddling the rail's right edge at mid-height, half in and half out — the classic rail-collapse pattern. It is taken out of the brand row's flow entirely (position: fixed, tracked against the rail's own width token) so it rides the edge at both widths and never competes with the wordmark. Round and filled with a neutral hairline, so it reads as part of the edge: quiet at rest, brightening on hover. The chevron rotates to point which way the rail will go, and the whole thing is hidden on the phone drawer, where the rail is already a slide-over and has no folded state to offer. */ html[data-design="sigma"] .sidebar-collapse-toggle { position: fixed; left: calc(var(--sidebar-w) - 15px); top: 50%; transform: translateY(-50%); z-index: 130; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg-2); color: var(--cream-dim); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); transition: left 0.24s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } html[data-design="sigma"] .sidebar-collapse-toggle:hover { color: var(--cream); background: var(--bg-3); border-color: var(--cream-dim); } html[data-design="sigma"] .sidebar-collapse-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--om-brass) 68%, transparent); outline-offset: 2px; } html[data-design="sigma"] .sidebar-collapse-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; /* The flip. Left-pointing at rest ("fold me away to the left"), it turns to point right when the rail is folded, so the same glyph always names the next action. */ transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } /* ——— The folded rail: an icon strip ————————————————————————————————————— One class on , `is-sidebar-collapsed`, set by the toggle and replayed from storage before first paint. Everything below reads from the same tokens the open rail does, so the fold is a change of state, not a second layout: the rail, the page offset and the flyout panel's edge all move to --sidebar-w-collapsed together, and every label steps aside to leave the glyphs. Scoped to `min-width: 981px` on purpose. Below that the rail is the phone drawer — a slide-over with its own open/close — and there is no folded state to offer there, so none of this may leak into it. The toggle itself is hidden on the drawer for the same reason (see the max-width block further down). */ @media (min-width: 981px) { html[data-design="sigma"].is-sidebar-collapsed { /* Re-point the three shared reads at the narrow width. This is the whole mechanism: nothing below hardcodes the folded width, so the rail, `.site-frame`'s offset and the flyout panel all collapse by the same token. */ --sidebar-w: var(--sidebar-w-collapsed); /* And the glyphs scale up with the strip they sit in. The labels are gone here, so the icon is the only thing identifying a row — at the open rail's 1.15rem it was a 18px mark in the middle of a 96px strip. This re-points the same token `.sidebar-link-icon` already reads, so every glyph in the fold grows together and nothing below needs a second size. rem, not px, for the same reason the open rail's value is: the glyph has to scale with the reader's font size. The stroke stays on its own token at 1.25 — the shapes are line art on a 24-grid and a heavier weight at this size would start filling in the closed counters. */ --sidebar-nav-icon: 1.4rem; } html[data-design="sigma"].is-sidebar-collapsed .site-sidebar { /* A touch less side padding at this width, so the glyph sits on the optical centre of the strip rather than hugging the left edge it had as a label's leading margin. */ padding-left: 10px; padding-right: 10px; } html[data-design="sigma"].is-sidebar-collapsed .sidebar-flyout-panel { /* The panel still hangs off the rail's right edge — now the narrow one — so the hover/flyout system works unchanged: hover an icon, its section opens beside the strip. Reading the token keeps it glued if the width is ever retuned. */ left: var(--sidebar-w-collapsed); } /* ——— The brand row leaves the strip ——— The folded rail is an icon strip: the wordmark has no room in it and there is no badge to take its place, so the whole brand link drops out and the nav rows start straight under the brand row's own divider. The toggle is position: fixed on the rail's edge, so it still rides the strip at this width without being part of this flow. */ html[data-design="sigma"].is-sidebar-collapsed .site-sidebar-brand .brand { display: none; } /* The chevron turns to point back the way it will reopen. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-collapse-toggle svg { transform: rotate(180deg); } /* ——— Every row becomes a centred icon ——— The label leaves, the horizontal padding that indented it goes with it, and the glyph centres in the row. min-height is untouched, so a row is still a 44px target — the fold narrows the rail, it does not shrink the hit area. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link, html[data-design="sigma"].is-sidebar-collapsed .sidebar-flyout-trigger { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } /* All the text steps aside. Grouped in one rule so a new label added to a row later is caught by the same fold rather than left jutting into the strip. The streak card's figure, headings and week strip go too, leaving the flame as the card's lone mark — the strip keeps icons, not numbers or words. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-label, html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-copy, html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-sub, html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-chevron, html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-shine, html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-dot, html[data-design="sigma"].is-sidebar-collapsed .sidebar-flyout-chevron, html[data-design="sigma"].is-sidebar-collapsed .sidebar-group-label, html[data-design="sigma"].is-sidebar-collapsed .sidebar-day-value, html[data-design="sigma"].is-sidebar-collapsed .sidebar-day-headings, html[data-design="sigma"].is-sidebar-collapsed .sidebar-week, html[data-design="sigma"].is-sidebar-collapsed .sidebar-tile-copy { display: none; } /* But when a flyout panel is open, its labels must be readable. The panel is a sibling of the trigger, so we target it via the [data-sidebar-flyout].is-open state on the parent group. */ html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-link-label, html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-link-copy, html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-link-sub, html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-link-chevron, html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-link-shine, html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-link-dot, html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-flyout-chevron, html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-group-label, html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-day-value, html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-day-headings, html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-week, html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-tile-copy { display: inline-flex; } html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-link { justify-content: flex-start; gap: 10px; padding-left: 12px; padding-right: 12px; } html[data-design="sigma"].is-sidebar-collapsed [data-sidebar-flyout].is-open .sidebar-flyout-panel .sidebar-flyout-links .sidebar-link { min-height: 38px; } /* ——— The rail floor: streak + settings stack and keep only their marks ——— Two half-width cards cannot fit the strip, so the pair becomes one column and each card keeps the single thing that identifies it — the flame for the streak, the gear for settings — with the words gone. The marks scale up with the strip too: a 1.15rem-scale flame beside 1.4rem nav glyphs is the partial scale this rail has been bitten by before, so the floor rides the same enlargement as the list above it. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-foot-pair { grid-template-columns: minmax(0, 1fr); gap: 8px; } /* The flame and the gear keep their proportion to each other, just larger: 1.4/1.15 is the scale the nav glyphs just took, applied to the two marks that were sized for the old strip. The numeral is gone in the fold, so the flame is the streak card's only mark here and the gear is the settings card's — which is exactly why they have to grow with the strip rather than sit in it at the open rail's size. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-foot-pair .sidebar-day-flame { width: 23px; height: 28px; } html[data-design="sigma"].is-sidebar-collapsed .sidebar-foot-pair .sidebar-day-flame svg { width: 23px; height: 28px; } html[data-design="sigma"].is-sidebar-collapsed .sidebar-foot-pair .sidebar-tile-icon { width: 24px; height: 24px; } html[data-design="sigma"].is-sidebar-collapsed .sidebar-foot-pair .sidebar-tile-icon svg { width: 24px; height: 24px; } html[data-design="sigma"].is-sidebar-collapsed .sidebar-day { justify-content: center; align-items: center; } html[data-design="sigma"].is-sidebar-collapsed .sidebar-day-head { justify-content: center; margin-bottom: 0; } html[data-design="sigma"].is-sidebar-collapsed .sidebar-tile { justify-content: center; } /* The Unlock Unlimited promo row: in collapsed mode, centre the crown icon and hide the shine/label/sub/chevron (already handled above), but keep the brass tile background so it still reads as the premium CTA. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; width: 100%; } html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo .sidebar-link-icon { width: 32px; height: 32px; padding: 0; margin: 0 auto; /* Nudged right onto the strip's optical centre so the emoji sits in line with the rest of the sidebar icons. */ position: relative; left: 18px; } /* Keep the crown icon visible on hover/active/focus in collapsed mode. The icon's sapphire gradient background must not show through the SVG. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo:hover .sidebar-link-icon, html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo:focus-visible .sidebar-link-icon, html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo:active .sidebar-link-icon { transform: scale(1.06) rotate(-4deg); /* The resting glyph glow is switched off here and only here: from this state on, the icon is a badge carrying its own background, and a drop-shadow over a filled rectangle is a halo around a rectangle. The sapphire box-shadow below is already the light this state wants. */ filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.32), 0 3px 10px rgba(0, 0, 0, 0.32), 0 0 22px color-mix(in srgb, #4a7dff 65%, transparent); /* Explicitly preserve the sapphire gradient background so the crown never disappears on hover/focus/active — the link's background change must not bleed. */ background: radial-gradient(ellipse 130% 100% at 50% 85%, color-mix(in srgb, #8ab4ff 55%, transparent), transparent 65%), linear-gradient(165deg, #0a1633 0%, #122a5c 30%, #2855b0 65%, #4a7dff 100%); } /* No hover colour shift on the gem's facet lines in collapsed mode. */ } html[data-design="sigma"] .site-sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0; /* A slim, themed rail that stays out of the way until the pointer is over the nav. The default Chrome scrollbar is a wide grey slab and undoes the whole machined-surface treatment. */ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 34%, transparent) transparent; overscroll-behavior: contain; } /* The rail's rows. This element used to carry a `mask-image` that faded the top and bottom edges where a long menu met the boundaries. It does not any more, and the removal is deliberate rather than incidental. A `mask-image` makes an element a containing block for `position: fixed` descendants. With the mask here, every `.sidebar-flyout-panel` inside the nav stopped being positioned against the viewport and started being positioned against this box — so each panel was trapped inside the rail, clipped by its overflow, and painted underneath the page content it was supposed to sit over. Clicks landed on the page underneath instead: on /repertoire a flyout link resolved to the intro section, on /puzzles to a board square. Nothing needs the fade any more. The rail is four section rows plus the account block, which fits without scrolling at any realistic viewport, so there is no edge for a mask to soften. If the rail ever does grow long enough to scroll, the fade has to go somewhere that is not an ancestor of the panels — on a `::after` overlay on the rail, never on a container the panels descend from. */ html[data-design="sigma"] .sidebar-nav-scroll { display: flex; flex-direction: column; gap: var(--sidebar-group-gap); flex: 1 0 auto; padding: 4px 0; /* Deliberately no mask here. See the note above: a mask on this element — which is the panels' own ancestor — turns every flyout panel from viewport-positioned into rail-positioned, and they end up clipped and behind the page. */ } /* ——— The entrance ——— The rail's rows arrive one after another instead of all at once. This is the one piece of motion that runs without the pointer, so it is the one most worth keeping quiet. The stagger is small — the whole sequence lands inside half a second — because the rail is on screen for every page and anything longer becomes a wait the reader has to sit through on every navigation. It reads as the menu assembling, not as an intro. Two constraints, both learned the hard way here: · It targets the ROWS, never the group. The flyout panel is a SIBLING of the trigger inside `[data-sidebar-flyout]`, so a transform on the trigger does not touch the panel — but a transform on the GROUP would, because the group is the panel's ancestor. A group-level entrance animation would trap every panel inside the rail during the animation and break the hover system for as long as it played. · It never touches a panel row. `.sidebar-flyout-links .sidebar-link` also matches `.sidebar-link`, and animating those would fire a transform on rows the reader cannot see until the panel is already animating in. `backwards` fill, not `forwards`: before its delay elapses each row holds the `from` state, so the first card is never briefly visible at full opacity before the sequence starts. */ @keyframes sidebar-card-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group > .sidebar-link, html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group > .sidebar-group-links-inner > .sidebar-link, html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group > .sidebar-flyout-trigger { animation: sidebar-card-in var(--sidebar-card-in) cubic-bezier(0.22, 1, 0.36, 1) backwards; } /* One step per group. The delays are set on the GROUP as a custom property and read by the rows inside it — a group can hold more than one row, and they should arrive together rather than as a second, nested stagger. */ html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group:nth-child(1) { --sidebar-in-delay: 0ms; } html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group:nth-child(2) { --sidebar-in-delay: 36ms; } html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group:nth-child(3) { --sidebar-in-delay: 72ms; } html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group:nth-child(4) { --sidebar-in-delay: 108ms; } html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group:nth-child(5) { --sidebar-in-delay: 144ms; } html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group:nth-child(6) { --sidebar-in-delay: 180ms; } html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group:nth-child(7) { --sidebar-in-delay: 216ms; } html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group > .sidebar-link, html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group > .sidebar-group-links-inner > .sidebar-link, html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group > .sidebar-flyout-trigger { animation-delay: var(--sidebar-in-delay, 0ms); } html[data-design="sigma"] .site-sidebar-nav::-webkit-scrollbar { width: 8px; } html[data-design="sigma"] .site-sidebar-nav::-webkit-scrollbar-track { background: transparent; } html[data-design="sigma"] .site-sidebar-nav::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background-clip: content-box; background-color: color-mix(in srgb, var(--gold) 26%, transparent); transition: background-color 0.2s ease; } html[data-design="sigma"] .site-sidebar-nav:hover::-webkit-scrollbar-thumb, html[data-design="sigma"] .site-sidebar-nav:focus-within::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--gold) 52%, transparent); } html[data-design="sigma"] .site-sidebar-nav:hover { scrollbar-color: color-mix(in srgb, var(--gold) 52%, transparent) transparent; } /* The rail's rows. 44px is the floor, not an arbitrary number: it is the smallest a row can be and still be a comfortable pointer target on both a desktop and a laptop trackpad, so this is as short as a nav row is allowed to get. Everything else about the rail's size — the width, the glyph, the type — was reduced to suit it, which is the opposite of the previous state where a 50px row in a wide rail made every destination read as a card. */ html[data-design="sigma"] .sidebar-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px 0 13px; /* No border, no surface, no shadow. The row is invisible until the pointer arrives. This is the quiet-flush decision, and it is a real trade rather than a neutral one. A permanent edge gives the eye something to aim at while scanning a long column; without it, finding a row means reading it. What that buys is a rail that stops competing with the page it sits beside — the chrome disappears and only the words remain. The border stays declared as `1px solid transparent` rather than dropped to `0`, so the row's box is byte-identical to the card version and nothing shifts if this is ever reversed. Reserving the space costs nothing. */ border: 1px solid transparent; border-radius: var(--radius-nav); color: var(--cream-dim); text-decoration: none; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.02em; background: transparent; box-shadow: none; transition: color 0.18s ease, background 0.18s ease; } html[data-design="sigma"] .sidebar-link:hover { color: var(--cream); /* A wash and nothing else. No edge to warm, because there is no edge; no surface to lift, because there is no surface; no raise, because a row with nothing to lift reads as a label floating off the page. On a flush row the wash is the entire response. */ background: var(--hover-fill); } /* Keyboard focus needs to be obvious on a long list of identical rows. */ html[data-design="sigma"] .sidebar-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--om-brass) 68%, transparent); outline-offset: -2px; color: var(--cream); } /* The active row is marked by a slim accent bar on its leading edge, and the bar is BACK after the card experiment. It was removed when every row became a bordered card, for a good reason that no longer applies: inside a card's own rounded border, a bar read as a second competing frame, and the row looked like it had two edges. On a card the border IS the frame, so the border lit instead. The rows are flush again, so the card's frame is gone and so is the reason. With no resting edge anywhere in the rail, a bar is not a second frame — it is the only persistent mark in the column, which is what makes the current page findable in a scroll of identical grey words. This is the reason it worked the first time, and the reason it stopped working was the card, not the bar. 2px, matching the 1.25 glyph stroke. It is inset 8px from each end rather than running the full height, so it reads as a marker pointing at the row rather than as a rail running down the side of the rail. */ html[data-design="sigma"] .sidebar-link[aria-current="page"] { color: var(--cream); background: var(--hover-fill); box-shadow: none; } html[data-design="sigma"] .sidebar-link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 0 2px 2px 0; background: linear-gradient(180deg, var(--om-brass-bright), var(--om-brass)); } html[data-design="sigma"] .sidebar-link-cta { color: var(--cream); } html[data-design="sigma"] .sidebar-link-cta .sidebar-link-label { color: var(--om-brass-bright); } /* The glyph takes its row's tint (declared below), not a fixed colour. The opacity floor is what lets a tinted glyph sit quietly at rest and still come forward on hover without the hue itself having to be loud. */ html[data-design="sigma"] .sidebar-link-icon { width: var(--sidebar-nav-icon); height: var(--sidebar-nav-icon); flex: 0 0 auto; color: var(--sidebar-row-tint, var(--cream-dim)); opacity: 0.9; /* The glow, and why it is built this way. Two stacked drop-shadows rather than one: a tight core that lights the stroke itself and a wider bloom that fades into the rail behind it. One shadow is either a smear at the tight end or a haze at the wide end; the two-step falloff is the part that reads as light rather than blur, and it is the same shape the flame and the avatar frames use elsewhere on site. No colour is written here. The shadow is currentColor at partial alpha, so the halo IS the glyph's own tint: it walks the per-row ramp with the row, swaps with the theme, and a row nobody has tinted still glows in its label colour. A literal hex would be a second palette the rail does not have and tests would (rightly) reject. Kept faint at rest on purpose. The rail is a quiet flush column by design, and a resting glow that shouts would undo that; this is here to make the glyph read as lit rather than painted, and the hover below is where it actually flares. */ filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 34%, transparent)) drop-shadow(0 0 9px color-mix(in srgb, currentColor 16%, transparent)); transition: opacity 0.18s ease, color 0.18s ease, filter 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } /* The glyph lifts as the row is approached. It moves, not just brightens. A colour change alone is easy to miss on a row you are already reading, and this is the element that says "and there is a glyph for this thing" — nudging it draws the eye to the pairing. 1.05 on a 1.15rem glyph is about a pixel of travel: enough to register, not enough to look like the icon is bouncing. */ html[data-design="sigma"] .sidebar-link:hover .sidebar-link-icon { opacity: 1; transform: scale(1.05); } /* A per-row icon tint. The rail's glyphs used to be one colour that brightened on hover, which is correct and completely invisible: nothing in the resting state distinguishes one destination from another except its word. These are tints, not a palette per row. Each is a mix of the accent and the warm streak family, so they stay inside the theme's own range — brass, copper, ember — and differ from each other by degree rather than by hue. A green row and a red row and a blue row would be louder than the words beside them, and on a dark rail six saturated colours read as a toy rather than as navigation. Set on the ROW, so the tint is a property of the destination and cascades to whatever markup that row happens to contain. `.sidebar-link-icon` and `.sidebar-tile-icon` both read it, and anything added to a row later picks it up without a second decision. */ html[data-design="sigma"] .sidebar-link { /* Row 1 of the tint set. Each row overrides this with the next step, so the rail walks the ramp top to bottom and returns to the accent for the promoted rows at the floor. */ --sidebar-row-tint: color-mix(in srgb, var(--om-brass) 58%, var(--cream-dim)); } html[data-design="sigma"] .sidebar-group:nth-child(2) .sidebar-flyout-trigger { --sidebar-row-tint: color-mix(in srgb, var(--streak-mid) 62%, var(--cream-dim)); } html[data-design="sigma"] .sidebar-group:nth-child(3) .sidebar-flyout-trigger { --sidebar-row-tint: color-mix(in srgb, var(--streak-core) 58%, var(--cream-dim)); } html[data-design="sigma"] .sidebar-group:nth-child(4) .sidebar-flyout-trigger { --sidebar-row-tint: color-mix(in srgb, var(--streak-edge) 46%, var(--cream-dim)); } /* Hover lifts the row's own tint rather than jumping to a fixed accent, so the colour you saw at rest is recognisably the same colour that lit up. */ html[data-design="sigma"] .sidebar-link:hover .sidebar-link-icon, html[data-design="sigma"] .sidebar-flyout-trigger:hover .sidebar-link-icon { color: color-mix(in srgb, var(--sidebar-row-tint) 45%, var(--om-brass-bright)); /* The flare. Same two-step falloff as the rest state, roughly doubled in strength: the colour lifts toward the accent and the light lifts with it, so hover arrives as one event rather than a tint change and a glow change landing a beat apart. It rides currentColor again, so the flare keeps the row's own tint instead of snapping to a fixed accent. */ filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 55%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, currentColor 30%, transparent)); } html[data-design="sigma"] .sidebar-link[aria-current="page"] .sidebar-link-icon { color: var(--om-brass-bright); /* The current page stays lit at rest, not just tinted: it is the one glyph that has to be findable without a pointer anywhere near it, so it carries hover-strength light permanently, in the accent colour. */ filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 52%, transparent)) drop-shadow(0 0 13px color-mix(in srgb, currentColor 26%, transparent)); } /* Keyboard focus lights the glyph exactly the way hover does, so tabbing down the rail reads the same as sweeping the pointer down it. The row's outline above says "this one is focused"; keeping the light identical to hover's means focus never looks like a second, different system. */ html[data-design="sigma"] .sidebar-link:focus-visible .sidebar-link-icon, html[data-design="sigma"] .sidebar-flyout-trigger:focus-visible .sidebar-link-icon { filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 55%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, currentColor 30%, transparent)); } /* The stroke weight, and the single biggest reason the rail reads as crafted rather than assembled. These glyphs are line art: a 24x24 grid stroked with round caps and joins, fill: none. At 1.5 the stroke was wide enough that at small sizes the closed shapes (the house, the folder grid) filled in their own counters and the shapes stopped being distinguishable from each other at a glance. At 1.25 the counters stay open, and the icons sit at the same optical weight as the 0.95rem label beside them instead of competing with it. Driven by the token so it moves with the glyph size. */ html[data-design="sigma"] .sidebar-link-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--sidebar-nav-stroke); stroke-linecap: round; stroke-linejoin: round; } html[data-design="sigma"] .sidebar-link-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The "you have not read the newest release" marker on the Changelog row. A pill with a word rather than a bare dot. The dot was right when the row was a line of text and the only thing competing with it was another line of text; now that every row is a bordered card, an 8px circle beside the label is the one element on the card that explains nothing. "New" says what it is at a glance, and it survives being seen out of the corner of the eye — which is how a release marker is actually noticed. The text is generated rather than written into the template, so the markup stays empty whether or not there is anything unread. That matters: the server renders this unconditionally, and a template-side "New" would sit in the DOM on every page load and be visible in the gap between paint and changelog_badge.js running. It sits after the label, which is flex: 1, so it is pinned to the card's right edge instead of sitting next to the word — the same slot the chevron uses on a section row, so the two read as one column of trailing marks. Off by default, on by a class rather than by the [hidden] attribute: the rule below sets `display`, and style_dark.css has no global [hidden] rule, so an attribute would lose to it and the badge could never be switched off. */ html[data-design="sigma"] .sidebar-link-dot { display: none; flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--om-brass) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--om-brass) 46%, transparent); color: var(--om-brass-bright); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; } html[data-design="sigma"] .sidebar-link-dot::after { content: "New"; } html[data-design="sigma"] .sidebar-link-dot.is-on { display: block; } /* The live pulse. A static badge tells you a release happened once, at the moment you looked. This row is the only one in the rail that is about something that CHANGES, so a marker that never moves is the wrong signal for it: every other row is a fixed destination, and this one is the only destination that is different tomorrow than it is today. A small dot before the word, breathing on a 2.6s cycle. Slow and shallow on purpose. A fast blink reads as an alert demanding attention, and the thing it announces is a changelog; what it needs to say is "still here, still unread", which is what a breath does and a strobe does not. It lives on `::before` rather than `::after` because `::after` carries the word, and an animated `box-shadow` would overwrite that pill's own border mid-cycle — an animation wins over a normal declaration, so the two would fight and the pill would flicker its outline. Only `box-shadow` and `opacity` are animated, and never a `transform`. This element sits inside the rail, and a transform on anything in that subtree risks becoming the containing block for the fixed flyout panels — the bug documented on .sidebar-nav-scroll, where a mask on the rail's scroller made every panel trap itself in the sidebar and stop receiving clicks. A glow does not need a transform to work. */ html[data-design="sigma"] .sidebar-link-dot.is-on::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--om-brass-bright); vertical-align: 1px; animation: sidebar-badge-breathe 2.6s ease-in-out infinite; } @keyframes sidebar-badge-breathe { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--om-brass-bright) 60%, transparent); } 50% { opacity: 0.55; box-shadow: 0 0 0 4px color-mix(in srgb, var(--om-brass-bright) 0%, transparent); } } /* A second, quieter pulse on the row's own edge while there is something unread, so the eye catches the card itself rather than only the badge on it. Scoped to `:has(.is-on)` so it stops the moment the release is read — the animation is the reminder, and a reminder that outlives its message is noise. Same reasoning as above for the properties: the resting box-shadow is restated in the keyframes, because a keyframe replaces the whole value rather than merging with it, and the top hairline that makes the card look raised would otherwise disappear for the whole cycle. */ html[data-design="sigma"] .site-sidebar-changelog:has(.sidebar-link-dot.is-on) { border-color: color-mix(in srgb, var(--om-brass) 52%, var(--line)); animation: sidebar-changelog-edge 2.6s ease-in-out infinite; } @keyframes sidebar-changelog-edge { 0%, 100% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 6%, transparent), 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent); } 50% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 6%, transparent), 0 0 14px 0 color-mix(in srgb, var(--gold) 26%, transparent); } } /* A still badge under reduced motion. The state is carried entirely by the word and the lit border, so dropping the animation loses the emphasis but nothing that identifies it. */ @media (prefers-reduced-motion: reduce) { html[data-design="sigma"] .sidebar-link-dot.is-on::before, html[data-design="sigma"] .site-sidebar-changelog:has(.sidebar-link-dot.is-on) { animation: none; } } /* The rail's own motion, all of it, in one place. Two effects — the staggered entrance and the hover raise — and each is opt-out rather than opt-in. They are the difference between a rail that feels alive and one that feels like a list, but they are decoration over a functional menu, so a reader who has asked the OS to stop moving things has to actually get a still rail. */ @media (prefers-reduced-motion: reduce) { html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group > .sidebar-link, html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group > .sidebar-group-links-inner > .sidebar-link, html[data-design="sigma"] .sidebar-nav-scroll > .sidebar-group > .sidebar-flyout-trigger { animation: none; } } /* ——— The rail's floor: Changelog, then Sign in ———————————————————————————— The Changelog row moved here from the nav, where it sat between Evaluation and Account looking exactly like a destination. It is not one — it is the only row that reports a CHANGE rather than being a place — so it belongs with the other utility controls at the foot, where a returning visitor's eye lands last. It sits directly above Sign in, which is the only relationship the markup implies: a signed-out visitor meets them stacked, "what's new" then "come in". For a signed-in reader the Sign in row is absent and this becomes the last thing above the streak and settings cards, which is also correct — it is the final item before the floor. No border of its own. `.site-sidebar-cta` below already draws the rule that separates this pair from the list above, and a second one here would fence off a single row for no reason. The gap is enough: these two are a pair, not a section. */ html[data-design="sigma"] .site-sidebar-changelog { flex: 0 0 auto; margin-top: var(--sidebar-group-gap); } /* A