/* Achievement toast — floats over the training and puzzle pages */ .ach-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-20px); z-index: 9999; padding: 14px 22px; border-radius: 12px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 18%, var(--panel)); color: var(--cream); font-size: 0.9rem; font-weight: 700; text-align: center; line-height: 1.6; box-shadow: 0 4px 24px rgba(0,0,0,0.5); opacity: 0; transition: opacity 400ms ease, transform 400ms ease; pointer-events: none; } .ach-toast.is-showing { opacity: 1; transform: translateX(-50%) translateY(0); } /* ChessTropic shell: fixed left sidebar. Palette = charcoal surfaces + restrained tropic emerald 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. It sits at the floor of readability: at 6px the rail is still visible between two boxes, and below that the borders merge 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: 6px; --sidebar-group-gap: 12px; /* 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: 8px; --radius-card: 12px; --om-brass: var(--gold); --om-brass-bright: var(--gold-bright); /* Practice streak. WARM amber family, not the brand accent. A flame should read as fire, not as a second application of the UI signal colour. Separating the streak from the accent means the flame always reads as heat regardless of the brand hue, and keeps the green brand token for controls and highlights. --streak-edge is the brightest/lighter step used as the flame rim and the "today" ring; --streak-mid carries the mid shapes; --streak-core is the deepest step that anchors the gradient. --streak-ink is tuned for contrast on a dark field at card scale. */ --streak-core: #c4703c; --streak-mid: #e08a52; --streak-edge: #f5c9a3; --streak-ink: #2a1a10; } /* ——— OM tokens: charcoal surfaces + tropic emerald ——— 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"] { /* Charcoal + Tropic Emerald (dark). Flat true-neutral charcoal (R=G=B) — same professional matte room as high-end dark UIs, but our own ladder (not a stock #121212 clone). Tropic emerald is the differentiator. The accent is the opposite of the light theme. Here the luminous step is the legible one, 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 near-black charcoal. It has to stay genuinely dark (tests assert luminance < 80) or the accent buttons stop being dark-on-light. */ --bg: #141414; --bg-2: #1c1c1c; --bg-3: #262626; --cream: #eeeeee; --cream-dim: #a3a3a3; --gold: #2fe66a; --gold-bright: #6af592; --gold-deep: #00b84a; --felt: #262626; --felt-deep: #1c1c1c; --text: #eeeeee; --muted: #9a9a9a; --line: rgba(238, 238, 238, 0.08); --line-strong: rgba(238, 238, 238, 0.15); --panel: rgba(28, 28, 28, 0.98); --shadow: rgba(0, 0, 0, 0.55); --font: "Inter", "Outfit", "Segoe UI", sans-serif; --serif: var(--font); --ink: #0a0a0a; --on-solid: #0a0a0a; --on-gold: #0a0a0a; --fill-subtle: rgba(238, 238, 238, 0.04); --hover-fill: rgba(238, 238, 238, 0.07); --danger: #f3aaa0; --danger-bg: rgba(122, 49, 40, 0.24); --danger-border: rgba(204, 111, 96, 0.58); --danger-text: #ffd1c9; --stat-white: #eeeeee; --paper: #2e2e2e; --paper-2: #262626; --header-bg: rgba(28, 28, 28, 0.94); --footer-bg: #1c1c1c; --wash-top: #1c1c1c; --wash-mid: #1c1c1c; --wash-bottom: #262626; /* 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: #2fe66a; --gold-btn-to: #00b84a; --gold-btn-border: #2fe66a; --gold-btn-from-hover: #6af592; --gold-btn-to-hover: #2fe66a; --board-mat: #262626; --input-bg: #262626; --input-text: #eeeeee; --thumb-bg: #303030; --overlay-bg: rgba(10, 10, 10, 0.8); /* 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. Kept quieter than a full neon bloom so the charcoal room stays polished. */ --glow-line: rgba(47, 230, 106, 0.26); /* Brand glow RGB triplets — the dark pair of --brand-glow / --premium-ring, so the same token resolves to emerald neon here and deep emerald in light. */ --brand-glow: 47, 230, 106; --brand-glow-deep: 0, 184, 74; --brand-glow-bright: 106, 245, 146; --premium-ring: conic-gradient(from 0deg, #00963c, #6af592, #e8fff0, #00b84a, #2fe66a, #1ad45c, #00963c); --panel-glow: inset 0 1px 0 rgba(238, 238, 238, 0.04), 0 12px 30px rgba(0, 0, 0, 0.4); --panel-glow-hover: inset 0 1px 0 rgba(238, 238, 238, 0.06), 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(47, 230, 106, 0.22), 0 0 16px rgba(47, 230, 106, 0.08); /* ════════════════════════════════════════════════════════════════════ 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 charcoal 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(28, 28, 28, 0.72); --glass-border: rgba(238, 238, 238, 0.08); --glass-glow: inset 0 1px 0 rgba(238, 238, 238, 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(47, 230, 106, 0.28); --gold-glow-strong: rgba(47, 230, 106, 0.45); /* 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"] { /* Warm Paper + Tropic Emerald (light). Surfaces stay soft warm-white paper — glare-free for long sessions — while the signal is a casino-emerald green: luminous enough to read as Tropic, deep enough to stay professional on paper (not acid laser lime). --gold-bright sits darkest for accent strokes and text, --gold carries the mid step, and glows stay restrained. Dark mode inverts this: the luminous emerald itself is the legible step. */ --bg: #f7f5f0; --bg-2: #ebe7e0; --bg-3: #dfd9d0; --cream: #2b2620; --cream-dim: #5f5447; --gold: #00b84a; --gold-bright: #00963c; --gold-deep: #007a32; --felt: #ebe7e0; --felt-deep: #dfd9d0; --ruby: #7a1f32; --text: #2b2620; --muted: #6b5f50; --line: rgba(43, 38, 32, 0.14); --line-strong: rgba(43, 38, 32, 0.28); --panel: #f7f5f0; --shadow: rgba(43, 38, 32, 0.1); --font: "Inter", "Outfit", "Segoe UI", sans-serif; --serif: var(--font); --ink: #2b2620; --on-solid: #ffffff; --on-gold: #ffffff; --fill-subtle: rgba(43, 38, 32, 0.05); --hover-fill: rgba(43, 38, 32, 0.08); --danger: #b42318; --danger-bg: #fef3f2; --danger-border: rgba(180, 35, 24, 0.28); --danger-text: #b42318; --stat-white: #6b5f50; --paper: #f7f5f0; --paper-2: #ebe7e0; --header-bg: rgba(247, 245, 240, 0.92); --footer-bg: #f7f5f0; --wash-top: #f7f5f0; --wash-mid: #ebe7e0; --wash-bottom: #dfd9d0; /* Buttons carry the DEEP emerald, not the bright step: white type on the luminous step would be unreadable. --glow-line is where this theme glows. */ --gold-btn-from: #00b84a; --gold-btn-to: #00963c; --gold-btn-border: #00b84a; --gold-btn-from-hover: #2fe66a; --gold-btn-to-hover: #00b84a; --board-mat: #ebe7e0; --input-bg: #f7f5f0; --input-text: #2b2620; --thumb-bg: #00b84a; --overlay-bg: rgba(247, 245, 240, 0.95); --glow-line: rgba(0, 184, 74, 0.32); /* Brand glow RGB triplets, consumed by keyframes and effects that must follow the accent per theme (sidebar wordmark pulse, premium avatar ring). Kept as bare channels so rgba(var(--brand-glow), α) can vary the opacity. */ --brand-glow: 0, 184, 74; --brand-glow-deep: 0, 150, 60; --brand-glow-bright: 47, 230, 106; --premium-ring: conic-gradient(from 0deg, #00963c, #2fe66a, #d8ffe8, #00b84a, #6af592, #00963c, #00963c); /* ════════════════════════════════════════════════════════════════════ PREMIUM DESIGN TOKENS — Light Theme ════════════════════════════════════════════════════════════════════ */ /* Elevation — softer for light theme, using ink colour not black. */ --elev-1: 0 1px 2px rgba(43,38,32,0.08), 0 1px 1px rgba(43,38,32,0.06); --elev-2: 0 4px 12px rgba(43,38,32,0.1), 0 2px 4px rgba(43,38,32,0.08); --elev-3: 0 12px 28px rgba(43,38,32,0.12), 0 4px 8px rgba(43,38,32,0.1); --elev-4: 0 20px 48px rgba(43,38,32,0.15), 0 8px 16px rgba(43,38,32,0.12); /* Glassmorphism for light theme. */ --glass-bg: rgba(253, 252, 249, 0.88); --glass-border: rgba(43, 38, 32, 0.08); --glass-glow: inset 0 1px 0 rgba(255, 253, 248, 0.9); /* Softer accent variants — emerald washes 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(0, 184, 74, 0.32); --gold-glow-strong: rgba(0, 184, 74, 0.5); /* 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 an emerald fill. */ color: #0a0a0a; } 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. A subtle accent wash at the top — enough to hint at the brand, not so much that it competes. */ background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 3%, transparent), transparent 20%), var(--bg); /* The rail itself never scrolls: the nav is the only scrollable child (flex: 1 + overflow-y: auto below), so the utility bank and the account/streak floor stay pinned as an app-shell footer on any viewport height. The phone drawer re-opens scrolling on .site-sidebar inside its max-width media query. position: fixed descendants (the flyout panels) are painted against the viewport and cannot be trapped by an overflow clip the way a mask/filter/transform containing block would. */ overflow: hidden; 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 accent — a slim bar with a restrained glow that hints at the brand without competing with the page beneath it. */ height: 2px; background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--gold) 65%, transparent) 20%, var(--gold) 50%, color-mix(in srgb, var(--gold) 65%, transparent) 80%, transparent 100% ); opacity: 1; box-shadow: 0 0 4px color-mix(in srgb, var(--glow-line) 80%, transparent), 0 0 14px color-mix(in srgb, var(--glow-line) 65%, 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; } html[data-design="sigma"] .header-discord { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, #5865f2 42%, var(--line)); background: color-mix(in srgb, #5865f2 16%, transparent); color: var(--cream); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } html[data-design="sigma"] .header-discord:hover, html[data-design="sigma"] .header-discord:focus-visible { background: color-mix(in srgb, #5865f2 28%, transparent); border-color: color-mix(in srgb, #5865f2 62%, var(--line)); color: #fff; } html[data-design="sigma"] .header-discord-icon { width: 16px; height: 16px; 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: flex; align-items: center; justify-content: center; width: 60px; height: 28px; padding: 0; border: 0; background: transparent; } /* Modern capsule toggle switch with mode icons — a single clickable pill with a sliding knob. The track shows a moon (🌙) on the left for dark mode and a sun (☀️) on the right for light mode, with the knob sliding over the inactive icon. The track colour shifts from a cool night blue to a warm gold tint to reinforce the state. */ html[data-design="sigma"] .header-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; } html[data-design="sigma"] .header-theme-track { position: relative; display: flex; align-items: center; justify-content: space-around; width: 52px; height: 26px; border-radius: 999px; background: color-mix(in srgb, #1a2a4a 60%, var(--bg-3)); border: 1px solid color-mix(in srgb, #1a2a4a 30%, var(--line-strong)); overflow: hidden; transition: background 0.25s ease, border-color 0.25s ease; } html[data-design="sigma"][data-theme="light"] .header-theme-track { background: color-mix(in srgb, var(--gold-deep) 20%, var(--bg-3)); border-color: color-mix(in srgb, var(--gold) 32%, var(--line-strong)); } html[data-design="sigma"] .header-theme-track-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 0.7rem; line-height: 1; z-index: 1; position: relative; pointer-events: none; opacity: 0.5; transition: opacity 0.2s ease; } html[data-design="sigma"] .header-theme-track-icon--dark { order: 0; } html[data-design="sigma"] .header-theme-track-icon--light { order: 2; } /* The active icon (not under the knob) is fully opaque so it reads clearly at a glance. The inactive icon sits under the knob and is nearly invisible — the knob itself blocks most of it, and the residual opacity stops it from leaking through the knob's semi-transparent glass highlight. */ html[data-design="sigma"] .header-theme-track-icon--dark { opacity: 1; } html[data-design="sigma"][data-theme="light"] .header-theme-track-icon--dark { opacity: 0.15; } html[data-design="sigma"] .header-theme-track-icon--light { opacity: 0.15; } html[data-design="sigma"][data-theme="light"] .header-theme-track-icon--light { opacity: 1; } html[data-design="sigma"] .header-theme-knob { position: absolute; top: 3px; left: 4px; width: 18px; height: 18px; border-radius: 50%; z-index: 2; background: radial-gradient(ellipse 80% 80% at 35% 30%, rgba(255,255,255,0.5), transparent 60%), var(--cream); box-shadow: 0 1px 3px rgba(0,0,0,0.25); /* In dark mode the knob sits on the right, covering the inactive sun icon so the moon on the left is visible. */ transform: translateX(26px); transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), background 0.25s ease; } html[data-design="sigma"][data-theme="light"] .header-theme-knob { /* In light mode the knob slides to the left, covering the inactive moon icon so the sun on the right is visible. */ transform: translateX(0); background: radial-gradient(ellipse 80% 80% at 35% 30%, rgba(255,255,255,0.5), transparent 60%), var(--gold-bright); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } html[data-design="sigma"] .header-theme-toggle:hover .header-theme-track { border-color: var(--om-brass); } html[data-design="sigma"] .header-theme-toggle:active .header-theme-track { transform: scale(0.96); } /* ——— 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: 34px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 8px; 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: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; 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, html[data-design="sigma"] .footer-product.is-current em { color: var(--om-brass-bright); font-style: normal; } html[data-design="sigma"] .footer-col a:hover, html[data-design="sigma"] .footer-tag a:hover, html[data-design="sigma"] .footer-product: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"] .roadmap-panel, 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 { 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; align-items: center; gap: 0; padding-left: 0; padding-right: 0; } /* OM study rows carry extra vertical padding for the two-line copy. In the fold the copy is gone, so that padding left the glyph sitting off the optical centre of a taller box than every neighbour. Reset to the plain row's box so every mark lands on one vertical rhythm. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-om { min-height: 44px; padding-top: 0; padding-bottom: 0; } /* Utility floor (Settings + Changelog): one column of centred marks, same glyph size as the nav above. The open rail's 2-up grid and 16px icons cannot fit the strip and would leave two undersized marks side by side. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-utility-pair { grid-template-columns: minmax(0, 1fr); gap: 8px; } html[data-design="sigma"].is-sidebar-collapsed .sidebar-utility-pair .sidebar-link { justify-content: center; align-items: center; gap: 0; min-height: 44px; padding: 0; } html[data-design="sigma"].is-sidebar-collapsed .sidebar-utility-pair .sidebar-link-icon { width: var(--sidebar-nav-icon); height: var(--sidebar-nav-icon); font-size: var(--sidebar-nav-icon); } /* The unread "New" badge wins on source order against the generic fold hide (same specificity as `.sidebar-link-dot.is-on { display: block }`). Pin it closed here so a lit Changelog cannot shove its scroll glyph off-centre. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-dot.is-on { display: none; } /* 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; } 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, /* Hide username text and chevron in collapsed mode */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-user-name, html[data-design="sigma"].is-sidebar-collapsed .sidebar-user-chevron { display: none; } /* Center the user button content in collapsed mode */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-user-btn { justify-content: center; gap: 0; padding: 10px 0; } /* Avatar stays the locked 28px tile; the button already centres via flex. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-user-avatar { width: 28px; height: 28px; margin: 0; } /* Collapsed rail: same flyout chrome as expanded; only the left edge moves. Vertical placement is handled in JS so the full panel stays in the viewport when the avatar control sits near the bottom of the strip. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-user-menu { left: var(--sidebar-w-collapsed); min-width: 236px; transform: translateX(-4px); overflow-y: auto; overscroll-behavior: contain; } html[data-design="sigma"].is-sidebar-collapsed .site-sidebar-user:hover .sidebar-user-menu, html[data-design="sigma"].is-sidebar-collapsed .site-sidebar-user:focus-within .sidebar-user-menu, html[data-design="sigma"].is-sidebar-collapsed .site-sidebar-user .sidebar-user-btn[aria-expanded="true"] + .sidebar-user-menu { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; } /* 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 Leaderboard row wears the rail's box in the fold: the same hairline `--line` edge, the same shared radius and the same flat `--bg-2` surface every plain row keeps, so the trophy reads as one more 44px nav row rather than a bare glyph floating between boxed siblings. The open rail's brass border, glow and breathe animation are removed here; the fold is the one place where the Leaderboard is a destination like any other. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-lg { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-nav); background: var(--bg-2); box-shadow: none; animation: none; } /* Strip the icon's own tile background/ring too — in collapsed mode it needs to be a plain glyph like every other icon in the rail. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-lg .sidebar-link-icon { background: none; box-shadow: none; filter: none; } /* Hover is the plain rows' quiet step too: the surface rises one shade and the edge brightens a notch, with no raise and no brass glow. The open rail's own `.sidebar-link-lg:hover` is declared later in the sheet, so it is re-stated here one class of specificity up, or the lift and the glowing card come back the moment the row is hovered. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-lg:hover, html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-lg:focus-visible { transform: none; border-color: color-mix(in srgb, var(--cream) 18%, var(--line-strong)); background: var(--bg-3); box-shadow: none; animation: none; } /* The Unlock Unlimited promo row wears the same box as every other row in the fold, and the icon's sapphire tile is stripped, so the rocket sits as a plain glyph inside an identical 44px box instead of a borderless emoji between boxed neighbours. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-nav); background: var(--bg-2); box-shadow: none; } html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo .sidebar-link-icon { padding: 0; margin: 0 auto; border-radius: 0; background: none; box-shadow: none; filter: none; color: inherit; } /* Keep the neon green diamond visible in collapsed mode — the generic collapsed rules strip colour and glow, but this icon needs both. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo .sidebar-link-icon svg { overflow: visible; } /* The card's drawn layers are pseudo-elements, so the box-swap above (border/background/box-shadow on the link) never touched them. Each of these carries its own background, and with border-radius: inherit now reading the collapsed row's var(--radius-nav) they would repaint the gold wash and ring inside the new plain box. Hide them, so the promo's box is exactly the plain rows' box. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo::before, html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo::after { display: none; } /* Hover is the plain rows' quiet step too: the surface rises one shade and the edge brightens a notch, with no tile background to maintain. The promo's own hover rules (defined later in the sheet) re-assert the gold card, the sapphire tile and the translateY raise, so re-state the flat reply here one class of specificity up, or both the box and the lift come back the moment the row is hovered. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo:hover, html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo:focus-visible { transform: none; background: var(--bg-3); border-color: color-mix(in srgb, var(--cream) 18%, var(--line-strong)); box-shadow: none; } 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); background: none; box-shadow: none; filter: none; color: inherit; } /* The promo row's own display rules for its copy and chevron are defined later in the sheet at equal specificity to the fold's hide rule above, so they win on source order and stay in flow. The copy is flex:1 1 0% (zero height but taking every spare pixel), which shoves the rocket to the left edge instead of letting it centre like every other icon. Re-hide both here, one class of specificity up, so the glyph centres in the strip. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo .sidebar-link-copy, html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo .sidebar-link-chevron { display: none; } /* No hover colour shift on the gem's facet lines in collapsed mode. */ /* Keep the neon green diamond and its glow in collapsed mode — the generic collapsed rules above strip colour and filter, but this icon needs both. */ html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-promo .sidebar-link-icon { color: #00f542; filter: drop-shadow(0 0 2px color-mix(in srgb, currentColor 18%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, currentColor 10%, transparent)); } 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 { color: #00f542; filter: none; } } 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; /* A box, not a flush row — drawn the way a large product draws its chrome: clean, flat, precise. A hairline edge, a flat surface one step above the rail, and no decoration inside the box: no gradient, no inner glow, no outer shadow. State is carried by the fill and the border alone, so the rail reads as a row of machined panels rather than a collection of effects, and it never competes with the page beside it. Both themes get the same recipe for free because the surface is a token. The glow budget is spent where it belongs — on the rows that are meant to stand out (Leaderboard, Unlimited, Sign in). Added subtle tint-aware glow to all rows for premium cohesion. */ border: 1px solid var(--line); border-radius: var(--radius-nav); color: var(--cream-dim); text-decoration: none; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.02em; background: var(--bg-2); /* Subtle row glow using the row's tint color — always visible for premium cohesion */ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sidebar-row-tint) 8%, var(--line)), 0 0 10px color-mix(in srgb, var(--sidebar-row-tint) 6%, transparent); transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.24s ease; } html[data-design="sigma"] .sidebar-link:hover { color: var(--cream); /* Hover is one quiet move: the surface steps up a flat shade. The edge brightens a single notch to keep the hairline crisp against the new fill — no accent flare, no glow, no raise. Big-product nav responds without announcing itself. */ border-color: color-mix(in srgb, var(--sidebar-row-tint) 25%, var(--line-strong)); background: var(--bg-3); /* Stronger glow on hover using row's tint */ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sidebar-row-tint) 18%, var(--line)), 0 0 18px color-mix(in srgb, var(--sidebar-row-tint) 14%, transparent); } /* 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); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sidebar-row-tint) 20%, var(--line)), 0 0 18px color-mix(in srgb, var(--sidebar-row-tint) 16%, transparent); } /* The active row is a box with a lit edge, and the leading accent bar on top. The bar and the border do different jobs: the lit border says "this row is the selected one", the bar says "this is the one you are reading from two rows away". They do not fight — the bar is inset 8px from each end, so inside the rounded box it reads as a marker pointing at the row rather than as a second frame running down the side of the rail. 2px, matching the 1.25 glyph stroke. */ html[data-design="sigma"] .sidebar-link[aria-current="page"] { color: var(--cream); /* A tinted surface and an accent hairline — the same flat language as the resting box, just saturated. Selection in a large product is a calm, distinguishable panel, not a drained colour gradient. */ background: color-mix(in srgb, var(--om-brass) 14%, var(--bg-2)); border-color: color-mix(in srgb, var(--sidebar-row-tint) 44%, var(--line-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sidebar-row-tint) 18%, var(--line)), 0 0 16px color-mix(in srgb, var(--sidebar-row-tint) 14%, transparent); } 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); font-size: var(--sidebar-nav-icon); line-height: 1; flex: 0 0 auto; color: var(--sidebar-row-tint, var(--cream-dim)); opacity: 0.9; display: flex; align-items: center; justify-content: center; /* No tinted drop-shadow on the span — that washed emoji into green/brass. Stroke SVGs keep the glow on the svg child below. */ filter: none; transition: opacity 0.18s ease, color 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } /* Emoji / text glyphs: keep natural colours (no row-tint wash). Monochrome symbols like ♖ still need a cream fill; colourful emoji ignore colour. Grid + emoji font stack keep the mark on the same centre as stroke SVGs. */ html[data-design="sigma"] .sidebar-link-icon:not(:has(svg)) { color: var(--cream); opacity: 1; -webkit-text-fill-color: unset; display: grid; place-items: center; place-content: center; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; } /* 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)); } html[data-design="sigma"] .sidebar-link[aria-current="page"] .sidebar-link-icon { color: var(--om-brass-bright); } html[data-design="sigma"] .sidebar-link:hover .sidebar-link-icon svg, html[data-design="sigma"] .sidebar-flyout-trigger:hover .sidebar-link-icon svg, html[data-design="sigma"] .sidebar-link:focus-visible .sidebar-link-icon svg, html[data-design="sigma"] .sidebar-flyout-trigger:focus-visible .sidebar-link-icon svg { filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 35%, transparent)) drop-shadow(0 0 9px color-mix(in srgb, currentColor 16%, transparent)); } html[data-design="sigma"] .sidebar-link[aria-current="page"] .sidebar-link-icon svg { filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 32%, transparent)) drop-shadow(0 0 9px color-mix(in srgb, currentColor 14%, 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; /* Tinted glow lives on the stroke SVG only, so emoji keep natural colours. */ filter: drop-shadow(0 0 2px color-mix(in srgb, currentColor 18%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, currentColor 10%, transparent)); transition: filter 0.18s ease; } html[data-design="sigma"] .sidebar-link-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* OpeningMatrix study rows on the ChessTropic rail */ html[data-design="sigma"] .sidebar-group-openingmatrix .sidebar-group-label { color: color-mix(in srgb, var(--om-brass-bright) 72%, var(--cream-dim)); letter-spacing: 0.08em; } html[data-design="sigma"] .sidebar-link-om { align-items: center; min-height: 48px; padding-top: 6px; padding-bottom: 6px; } html[data-design="sigma"] .sidebar-link-om .sidebar-link-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15; } html[data-design="sigma"] .sidebar-link-om .sidebar-link-label { flex: 0 1 auto; font-weight: 650; } html[data-design="sigma"] .sidebar-link-om .sidebar-link-sub { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--om-brass-bright) 78%, var(--cream-dim)); } html[data-design="sigma"] .sidebar-om-chip { flex: 0 0 auto; margin-left: 4px; padding: 0.18rem 0.42rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--om-brass) 35%, var(--line)); background: color-mix(in srgb, var(--om-brass) 14%, transparent); color: color-mix(in srgb, var(--om-brass-bright) 85%, var(--cream)); font-size: 0.58rem; font-weight: 780; letter-spacing: 0.06em; } html[data-design="sigma"] .sidebar-link-om:hover .sidebar-om-chip, html[data-design="sigma"] .sidebar-link-om[aria-current="page"] .sidebar-om-chip { border-color: color-mix(in srgb, var(--om-brass) 55%, var(--line)); background: color-mix(in srgb, var(--om-brass) 22%, transparent); } html[data-design="sigma"].is-sidebar-collapsed .sidebar-link-om .sidebar-om-chip { display: none; } /* ——— Scaled-down nav rows ——— */ html[data-design="sigma"] .sidebar-nav-scroll .sidebar-link { font-size: 0.88rem; min-height: 40px; gap: 10px; padding: 0 10px 0 13px; } html[data-design="sigma"] .sidebar-nav-scroll .sidebar-link-icon { /* Ride the shared token so the folded strip's --sidebar-nav-icon bump reaches every nav glyph. A hardcoded rem here used to freeze open-rail icons at 1.05 while the floor grew, which is exactly the partial scale the fold is designed to prevent. */ width: var(--sidebar-nav-icon); height: var(--sidebar-nav-icon); font-size: var(--sidebar-nav-icon); } html[data-design="sigma"] .sidebar-nav-scroll .sidebar-group-label { font-size: 0.68rem; } html[data-design="sigma"] .sidebar-nav-scroll .sidebar-link-promo .sidebar-link-label { font-size: 0.88rem; } /* 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