/* ════════════════════════════════════════════════════════════════ AURORA GLASS — design tokens Dark is the default; [data-theme="light"] overrides the same vars, so every existing page inherits the new palette automatically. ════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ---- Brand (raw) ---- Named by role, not by hue, because these four are the whole brand: everything below is derived from them, and an alliance palette will later override exactly these. A name like --brand-coral goes stale the moment the brand moves, which is how the old set came to have a var called "sky" holding the colour of links, focus rings and info alike. Every ratio below is measured, not estimated. The pairing is deliberate: blue carries primary and informational meaning, gold carries the secondary highlight, and red is left to mean only "error" — the previous coral sat 1.11 away from the error red, close enough that a primary button and a failure read as the same colour. */ --brand-primary: #4C6A92; /* white ink on this: 5.55:1 AA */ --brand-primary-strong: #3D5A80; /* on white: 7.06:1 AAA */ --brand-secondary: #C9A227; /* dark ink on this: 7.29:1 AAA */ --brand-secondary-strong: #7D6608; /* on white: 5.56:1 AA */ /* ---- Surfaces ---- */ --color-bg-primary: #FAFAFC; --color-bg-secondary: #FFFFFF; --color-bg-tertiary: #F1F3F8; --color-bg-sunken: #EEF1F7; --color-bg-inverse: #1F2433; --color-surface-overlay: rgba(20, 24, 38, 0.45); /* ---- Text ---- */ --color-text-primary: #1F2433; --color-text-secondary: #5A6275; --color-text-tertiary: #8A91A6; --color-text-inverse: #FFFFFF; /* Links stay blue. They follow the primary rather than the secondary because a gold link on a white page reads as highlighted text, not as something to click. */ --color-text-link: var(--brand-primary-strong); /* ---- Borders ---- */ --color-border-primary: #E2E6F0; --color-border-secondary: #EDEFF6; --color-border-strong: #CBD2E2; --color-border-focus: var(--brand-primary-strong); /* ---- Accent / actions ---- */ --color-accent-primary: var(--brand-primary); /* Lighter than the base fill, but only as light as white ink allows: #5A7AA6 looked right and measured 4.4:1, so the label quietly failed AA on hover alone. */ --color-accent-primary-hover: #57769F; --color-accent-primary-active: #415C7E; --color-accent-strong: var(--brand-primary-strong); --color-on-accent: #FFFFFF; /* white ink on the blue (5.55:1) */ --color-accent-soft: #EAEFF7; --color-accent-soft-border: #CFDBEC; --color-accent-secondary: var(--brand-secondary); --color-accent-secondary-strong: var(--brand-secondary-strong); --color-accent-secondary-soft: #FAF3DC; --color-on-accent-secondary: #1F1803; /* dark ink on the gold (7.29:1) */ /* ---- Status ---- All three are darker than they were. Each is used as text both on a white card and on its own soft chip, and the old values cleared neither bar reliably: success was 4.16:1 on white, warning 4.24:1, and on the tinted chips all three fell to ~3.7-4.3:1. These values hold ≥4.5:1 in both places, which is the pair that actually gets rendered. */ --color-status-success: #187844; /* 5.51 on white · 4.90 on its soft */ --color-status-success-soft: #E3F6EC; --color-status-warning: #9C5D00; /* 5.28 on white · 4.73 on its soft */ --color-status-warning-soft: #FFF1D6; --color-status-error: #C4302A; /* 5.52 on white · 4.62 on its soft */ --color-status-error-soft: #FCE6E5; --color-status-info: var(--brand-primary-strong); --color-status-info-soft: #EAEFF7; /* ---- Domain: troop colors (light, text-safe) ---- Footman and cavalry carried the old success and warning hexes, and inherited their contrast failures with them (4.16 and 4.24 on white). They are written out rather than pointed at the status tokens: a footman is not a success, and coupling them would mean a future change to one silently repainting the other. Archer moved further than contrast alone required. At #1E78C8 it sat 6° of hue from the new brand blue, close enough that a troop tag read as an accent; #136B87 is 20° away and clearly its own colour. Hue is never the only signal here — every use is paired with an icon and a label — but it should not actively mislead. */ --troop-archer: #136B87; /* 6.03 on white · 5.22 on its chip */ --troop-footman: #187844; /* 5.51 on white · 4.90 on its chip */ --troop-cavalry: #9C5D00; /* 5.28 on white · 4.73 on its chip */ --troop-archer-soft: #E4F0FB; --troop-footman-soft: #E3F6EC; --troop-cavalry-soft: #FFF1D6; /* ---- Spacing (4px base) ---- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---- Typography ---- */ /* Font fallback is per-character, so Latin text uses Nunito and only Han characters reach --font-cjk. The Noto faces are self-hosted subsets declared per-language in App.razor; the platform families after them catch anything outside the subset — user-typed member names and notes — so those degrade to the OS font, never to tofu. */ --font-cjk: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-family-body: "Nunito Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", var(--font-cjk); --font-family-display: "Nunito", "Nunito Sans", -apple-system, "Segoe UI", var(--font-cjk); --font-family-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.375rem; --font-size-xl: 1.75rem; --font-size-2xl: 2.25rem; --font-size-3xl: 3rem; --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-semibold: 700; --font-weight-bold: 800; --line-height-tight: 1.2; --line-height-normal: 1.55; --line-height-relaxed: 1.7; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; /* ---- Layout ---- */ --max-width-content: 72ch; --max-width-wide: 1100px; --max-width-page: 1320px; --size-touch-target: 2.75rem; --sidebar-width: 264px; --header-height: 64px; --bottombar-height: 64px; /* Consolidated radius scale: everything is 16px, large containers 24px, pills stay round. */ --border-radius-sm: 16px; --border-radius-md: 16px; --border-radius-lg: 16px; --border-radius-xl: 24px; --border-radius-full: 999px; /* ---- Shadows (soft, layered — no glass/blur) ---- */ --shadow-sm: 0 1px 2px rgba(28, 33, 51, 0.06), 0 1px 3px rgba(28, 33, 51, 0.05); --shadow-md: 0 2px 6px rgba(28, 33, 51, 0.07), 0 6px 16px -6px rgba(28, 33, 51, 0.10); --shadow-lg: 0 8px 24px -8px rgba(28, 33, 51, 0.14), 0 16px 48px -16px rgba(28, 33, 51, 0.16); /* Mixed from the focus token rather than written as a literal rgba(). The literal here was rgba(22, 104, 214, 0.35) — #1668D6, the brand blue that was deleted in the recolour — so every focus ring in the app was still painted in a colour nothing else used, and no alliance override could reach it. Going through --color-border-focus means it follows the brand and the palette block picks it up for free. */ --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-border-focus) 35%, transparent); /* ---- Motion ---- */ --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --easing-default: cubic-bezier(0.4, 0, 0.2, 1); --easing-in: cubic-bezier(0.4, 0, 1, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1); --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ════════ LEGACY ALIASES — old names → new tokens (all 57 pages inherit) ════════ */ --bg: var(--color-bg-primary); --bg2: var(--color-bg-secondary); --bg3: var(--color-bg-tertiary); --bg4: var(--color-bg-sunken); --border: var(--color-border-primary); --border2: var(--color-border-strong); --text: var(--color-text-primary); --text2: var(--color-text-secondary); --text3: var(--color-text-tertiary); --accent: var(--color-accent-primary); --accent-2: var(--color-accent-secondary); --accent-deep: var(--color-accent-strong); /* Nothing consumes this today, but it is an alias like its neighbours, so it points at the brand vars rather than repeating hexes — that way it cannot go stale the way it just did. */ --accent-grad: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); --accent-soft: var(--color-accent-soft); --glow: var(--shadow-focus); /* --gold used to live here, aliasing --color-accent-primary. It kept its name through the recolour, so a var called "gold" has been handing out blue, and three rules that paired it with a hardcoded black ink read as deliberate rather than broken. Its nine consumers now use --accent, which is the same value under an honest name. --teal went the same way and had no consumers at all, so it is simply gone. */ --archer: var(--troop-archer); --footman: var(--troop-footman); --cavalry: var(--troop-cavalry); --red: var(--color-status-error); --purple: #6A4DE0; --purple-soft: #EFEBFC; --surface-inset: var(--color-bg-tertiary); --ok-text: var(--color-status-success); --ok-bg: var(--color-status-success-soft); --ok-border: #BFE6CE; --bad-text: var(--color-status-error); --bad-bg: var(--color-status-error-soft); --bad-border: #F4C7C4; --warn-bg: var(--color-status-warning-soft); --warn-border: #ECD49B; /* Glass → solid card surfaces + soft shadow (blur removed) */ --glass-bg: var(--color-bg-secondary); --glass-bg-2: var(--color-bg-tertiary); --glass-border: var(--color-border-primary); --glass-blur: 0px; --shadow: var(--shadow-md); /* Animated aurora mesh → neutralized */ --mesh-1: transparent; --mesh-2: transparent; --mesh-3: transparent; --mesh-base: var(--color-bg-primary); --radius: var(--border-radius-lg); --radius-sm: var(--border-radius-sm); --radius-lg: var(--border-radius-xl); --font-body: var(--font-family-body); --font-display: var(--font-family-display); --font-mono: var(--font-family-mono); } /* Traditional Chinese. Simplified and Traditional share many codepoints but draw them differently, so serving Noto Sans SC to a zh-Hant reader looks subtly foreign. Noto Sans SC is kept as the second entry because untranslated strings fall back to Simplified, which Noto Sans TC cannot draw at all. Relies on being set — see App.razor. */ html[lang="zh-Hant"] { --font-cjk: "Noto Sans TC", "Noto Sans SC", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif; } /* MudBlazor renders every typography variant from RocTheme, which is a static object and so cannot reorder SC/TC by language — its emitted stacks end at sans-serif with no CJK family. Point its variables at the stacks above instead, which carry both the CJK fallback and the zh-Hant swap. Every variant is listed because MudBlazor propagates Default.FontFamily to the variants RocTheme leaves unset, so they all need the same treatment. `html:root` outranks the plain `:root` MudThemeProvider emits, so this wins on specificity rather than document order (the provider renders from , after this stylesheet). */ html:root { --mud-typography-default-family: var(--font-body); --mud-typography-body1-family: var(--font-body); --mud-typography-body2-family: var(--font-body); --mud-typography-button-family: var(--font-body); --mud-typography-caption-family: var(--font-body); --mud-typography-overline-family: var(--font-body); --mud-typography-subtitle1-family: var(--font-body); --mud-typography-subtitle2-family: var(--font-body); --mud-typography-h1-family: var(--font-display); --mud-typography-h2-family: var(--font-display); --mud-typography-h3-family: var(--font-display); --mud-typography-h4-family: var(--font-display); --mud-typography-h5-family: var(--font-display); --mud-typography-h6-family: var(--font-display); /* MudBlazor ships Material's uppercase button label at weight 500. The app's own .btn-* buttons are sentence case at 700, and nine pages put the two kinds side by side — so a row read "SHARE Publish DELETE ROW", which is what made the button text look wrong rather than any alignment problem. Matching the variables fixes every page at once; restyling nine pages' markup would have been the same result with far more risk. */ --mud-typography-button-text-transform: none; --mud-typography-button-weight: 700; } /* Height and radius to match .btn-* as well, so a mixed row sits on one baseline instead of stepping up and down. Mud sets no min-height, which left its buttons ~10px shorter. */ .mud-button-root:not(.mud-icon-button) { min-height: 44px; border-radius: var(--border-radius-md); } .mud-button-root.mud-button-outlined-size-small, .mud-button-root.mud-button-filled-size-small, .mud-button-root.mud-button-text-size-small { min-height: 36px; } /* DARK — opt-in via toggle (night play). Warm-cool dark, not pure black. */ [data-theme="dark"] { color-scheme: dark; --color-bg-primary: #12151D; --color-bg-secondary: #1A1F2B; --color-bg-tertiary: #232938; --color-bg-sunken: #0E1118; --color-bg-inverse: #EDEFF5; --color-surface-overlay: rgba(0, 0, 0, 0.55); --color-text-primary: #ECEEF5; --color-text-secondary: #AAB2C5; --color-text-tertiary: #7A8198; --color-text-inverse: #1F2433; --color-text-link: #8FB0D8; --color-border-primary: #2C3344; --color-border-secondary: #232938; --color-border-strong: #3A4358; --color-border-focus: #8FB0D8; /* Lifted off the light-theme values: #4C6A92 against a #1A1F2B card is far too close to read. #7FA0C8 clears 6.09:1 there and 6.75:1 on the page background. */ --color-accent-primary: #7FA0C8; --color-accent-primary-hover: #8FB0D8; --color-accent-primary-active: #6E92BE; --color-accent-strong: #7FA0C8; --color-on-accent: #0E1626; /* dark ink on the light blue (6.69:1) */ --color-accent-soft: rgba(127, 160, 200, 0.16); --color-accent-soft-border: rgba(127, 160, 200, 0.34); --color-accent-secondary: #D4AF37; --color-accent-secondary-strong: #D4AF37; --color-accent-secondary-soft: rgba(212, 175, 55, 0.16); --color-on-accent-secondary: #1F1803; --color-status-success: #46C281; --color-status-success-soft: rgba(70, 194, 129, 0.16); --color-status-warning: #E0A53A; --color-status-warning-soft: rgba(224, 165, 58, 0.16); --color-status-error: #FF7A72; --color-status-error-soft: rgba(255, 122, 114, 0.16); --color-status-info: #8FB0D8; --color-status-info-soft: rgba(143, 176, 216, 0.16); /* Same teal lean as light, and for a sharper reason: at #5BAAFF the archer tag sat 2° of hue from the dark primary, so a troop tag and an accent were the same colour. #63BBD0 is 21° away. Footman and cavalry keep their values; both clear AA here (7.29 and 7.54). */ --troop-archer: #63BBD0; /* 7.49 on the card */ --troop-footman: #46C281; --troop-cavalry: #E0A53A; --troop-archer-soft: rgba(99, 187, 208, 0.16); --troop-footman-soft: rgba(70, 194, 129, 0.16); --troop-cavalry-soft: rgba(224, 165, 58, 0.16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 8px 24px -10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 36px -10px rgba(0, 0, 0, 0.6); /* Same reasoning as the light block: this was rgba(111, 182, 255, 0.45), the dark link colour this branch replaced. The alpha stays heavier here because the ring has less to work with against a dark surface. */ --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-border-focus) 45%, transparent); /* Legacy aliases needing explicit dark values */ --accent-grad: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%); --glow: var(--shadow-focus); --shadow: var(--shadow-md); --ok-border: rgba(70, 194, 129, 0.4); --bad-border: rgba(255, 122, 114, 0.4); --warn-border: rgba(224, 165, 58, 0.4); --purple: #9B86FF; --purple-soft: rgba(155, 134, 255, 0.16); --mesh-base: var(--color-bg-primary); } /* ── Spec Planner canvas (SVG nodes/links) — theme-adaptive ── */ :root { --sp-grid: #E6E9F2; /* The three link tiers must stay separable against the canvas (--surface-inset, #F1F3F8) AND against the grid (#E6E9F2). --sp-link-dim used to be #EDEFF6 — lighter than the grid and a shade off the background — so the shape of an untouched tree was invisible until points were spent in it. Every tier now sits darker than the grid. */ --sp-link: #94A3BD; /* both ends reachable, nothing invested yet */ /* The node states were built from the old brand sky (#3B9EFF / #1668D6). Left alone they would have made /specs the one screen still painted in the previous brand — a brighter, bluer blue than everything around it, which reads as a bug rather than as a different subsystem. They now follow the same two blues as the rest of the app. */ --sp-link-active: #4C6A92; /* on an invested path — set apart by hue and width */ --sp-link-dim: #B4C0D4; /* an end is still locked — subordinate, not hidden */ --sp-sel-ring: #1F2433; --sp-hub-fill: #FAF3DC; /* gold-tinted, matching the hub dots below */ --sp-locked-fill: #F1F3F8; --sp-locked-stroke: #CBD2E2; /* Low contrast on purpose: a locked node is inactive, which WCAG 1.4.3 exempts, and lifting it would undo the ranking the three fills exist to express. */ --sp-locked-text: #9097AB; --sp-avail-fill: #FFFFFF; --sp-avail-stroke: #4C6A92; --sp-avail-text: #3D5A80; /* 7.06 on its fill */ --sp-partial-fill: #EAEFF7; --sp-partial-stroke: #4C6A92; --sp-partial-text: #3D5A80; /* 6.12 on its fill */ --sp-done-fill: #3D5A80; --sp-done-stroke: #2E4A73; --sp-done-text: #FFFFFF; /* 7.06 on its fill */ --sp-dot-on: #3D5A80; --sp-dot-on-stroke: #2E4A73; --sp-dot-off: #E2E6F0; --sp-dot-off-stroke: #CBD2E2; --sp-hubdot-on: #C9A227; --sp-hubdot-on-stroke: #7D6608; --sp-hubdot-off: #EEE7D6; --sp-hubdot-off-stroke:#D9C9A0; } [data-theme="dark"] { --sp-grid: #1A2230; /* Canvas here is #232938, so links read as structure by sitting *lighter* than it. The old values were darker than the background and vanished into it. */ --sp-link: #6280AB; /* Dark used a cyan family (#00C8FF and friends) that belonged to no brand the app has ever had. Retoned onto the dark accents so the tree reads as the same product in either theme. */ --sp-link-active: #7FA0C8; --sp-link-dim: #46536D; --sp-sel-ring: #FFFFFF; --sp-hub-fill: #1A3040; --sp-locked-fill: #131C28; --sp-locked-stroke: #2A3848; --sp-locked-text: #6A7890; --sp-avail-fill: #1B2A3D; --sp-avail-stroke: #5A7EA8; --sp-avail-text: #9BBBDE; /* 7.30 on its fill */ --sp-partial-fill: #2E4A73; --sp-partial-stroke: #7FA0C8; --sp-partial-text: #C3D6EC; /* 6.04 on its fill */ --sp-done-fill: #3D5A80; --sp-done-stroke: #8FB0D8; --sp-done-text: #EAEFF7; /* 6.12 on its fill */ --sp-dot-on: #8FB0D8; --sp-dot-on-stroke: #B5CCE4; --sp-dot-off: #1A2A3A; --sp-dot-off-stroke: #2A3848; --sp-hubdot-on: #D4AF37; --sp-hubdot-on-stroke: #E0BC55; --sp-hubdot-off: #1E2A18; --sp-hubdot-off-stroke:#2E3A28; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-body); background: var(--color-bg-primary); color: var(--text); /* One notch down from the browser's 16px. The whole type scale is rem, and so is MudBlazor's, so this is the single knob that moves all of it together and keeps the ratios intact. Hit targets are px on purpose and stay where they are: text got smaller, buttons did not. */ font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Calm static page background (animated aurora mesh removed in the friendly overhaul). */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--color-bg-primary); } a { color: var(--color-text-link); text-decoration: none; transition: color .15s; } a:hover { color: var(--color-accent-strong); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text); margin: 0 0 0.5em 0; letter-spacing: -0.01em; } /* Mono numerics helper */ .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } /* Reusable glass surface */ .glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); } /* Refined scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--border-radius-lg); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); background-clip: content-box; } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } /* ════════════════════════════════════════════════════════════════ App shell — glass header + glass sidebar ════════════════════════════════════════════════════════════════ */ .roc-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; /* the sidebar + main scroll internally, so no body scrollbar runs past the header */ } .roc-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-4); height: var(--header-height); padding: 0 var(--space-5); /* Left inset = sidebar margin + sidebar padding, so the brand's hover pill starts on the same line as the nav-link pills below it. The brand then carries the same 12px inner padding as a nav-link, so the ◈ also lines up with the menu icon rail. */ padding-left: calc(var(--space-4) + var(--space-3)); background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-primary); box-shadow: var(--shadow-sm); } .roc-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-md); letter-spacing: .01em; color: var(--color-text-primary); text-decoration: none; padding: 5px 10px 5px var(--space-3); border-radius: var(--border-radius-md); transition: background-color .15s; } .roc-brand:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .roc-brand:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-brand-mark { width: 36px; height: 36px; border-radius: var(--border-radius-md); display: grid; place-items: center; background: var(--color-accent-primary); color: var(--color-on-accent); font-size: 17px; box-shadow: var(--shadow-sm); } /* The mark is the logo image itself, so it drops the accent tile it used to sit on: the artwork is sepia and transparent, and it clashed against the accent fill rather than reading as a mark. Sizing stays on .roc-brand-mark above so the header (36px) and auth pages (52px) keep their existing dimensions. */ img.roc-brand-mark { background: none; box-shadow: none; object-fit: contain; } .roc-brand-name { color: var(--color-text-primary); } .roc-header-spacer { flex: 1; } .roc-header-actions { display: flex; align-items: center; gap: var(--space-3); } .roc-user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; gap: 3px; } .roc-user-name { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary); } .roc-user-role { font-size: 11px; font-weight: 700; line-height: 1; color: var(--color-accent-strong); background: var(--color-accent-soft); border: 1px solid var(--color-accent-soft-border); padding: 3px 9px; border-radius: var(--border-radius-full); text-transform: uppercase; letter-spacing: .06em; } .roc-icon-btn { width: 44px; height: 44px; border-radius: var(--border-radius-md); display: grid; place-items: center; cursor: pointer; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s; } .roc-icon-btn:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); } .roc-icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-icon-btn svg { width: 20px; height: 20px; } /* ── Notification bell + dropdown ── */ /* Game clock — the shared day and time, sized to sit level with the icon buttons beside it. Tabular figures so the minute ticking over does not shuffle the whole label sideways. */ .roc-gameclock { display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-3); border-radius: var(--border-radius-md); background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); font-size: var(--font-size-sm); line-height: 1; white-space: nowrap; } .roc-gameclock-day { color: var(--color-text-secondary); } .roc-gameclock-offset { font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; } .roc-bell { position: relative; display: inline-flex; } .roc-bell-btn { position: relative; } .roc-bell-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font-size: 10px; font-weight: 800; line-height: 1; /* The ink comes from the palette rather than a literal, so it follows the accent it sits on. Hardcoded white measured 3.22:1 here in dark mode; the token is 6.87 light and 5.61 dark. */ color: var(--color-on-accent); background: var(--color-accent-primary-active); border: 2px solid var(--color-bg-primary); border-radius: var(--border-radius-full); } .roc-bell-backdrop { position: fixed; inset: 0; z-index: 90; background: transparent; } .roc-bell-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; width: 340px; max-width: calc(100vw - 24px); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .roc-bell-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-secondary); font-weight: 800; color: var(--color-text-primary); } .roc-bell-mark { background: none; border: none; cursor: pointer; color: var(--color-accent-secondary-strong); font-weight: 700; font-size: var(--font-size-sm); } .roc-bell-list { max-height: 360px; overflow-y: auto; } .roc-bell-empty { padding: var(--space-5); text-align: center; color: var(--color-text-tertiary); font-size: var(--font-size-sm); } .roc-bell-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-secondary); } .roc-bell-item:hover { background: var(--color-bg-tertiary); } .roc-bell-item.is-unread { background: var(--color-accent-secondary-soft); } .roc-bell-item.is-unread:hover { background: var(--color-accent-secondary-soft); } .roc-bell-item-title { font-weight: 700; color: var(--color-text-primary); font-size: var(--font-size-sm); } .roc-bell-item-body { color: var(--color-text-secondary); font-size: var(--font-size-sm); } .roc-bell-item-time { color: var(--color-text-tertiary); font-size: 11px; } .roc-bell-all { display: block; text-align: center; padding: var(--space-3); color: var(--color-accent-secondary-strong); font-weight: 700; font-size: var(--font-size-sm); text-decoration: none; } .roc-bell-all:hover { background: var(--color-bg-tertiary); } /* ── User menu (avatar + dropdown) ── */ .roc-usermenu { position: relative; display: inline-flex; } .roc-usermenu-trigger { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 4px 10px 4px 4px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); border-radius: var(--border-radius-full); cursor: pointer; color: var(--color-text-primary); transition: background .15s, border-color .15s, box-shadow .15s; } .roc-usermenu-trigger:hover { background: var(--color-bg-tertiary); } .roc-usermenu-trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-primary); color: var(--color-on-accent); font-weight: 800; font-size: var(--font-size-base); line-height: 1; } .roc-avatar-lg { width: 44px; height: 44px; font-size: var(--font-size-md); } .roc-usermenu-name { font-weight: 700; font-size: var(--font-size-sm); color: var(--color-text-primary); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .roc-usermenu-caret { width: 16px; height: 16px; color: var(--color-text-tertiary); flex: 0 0 auto; } .roc-usermenu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; width: 250px; max-width: calc(100vw - 24px); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-2); } .roc-usermenu-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border-secondary); margin-bottom: var(--space-2); } .roc-usermenu-id { display: flex; flex-direction: column; min-width: 0; } .roc-usermenu-id .roc-usermenu-name { max-width: 150px; } .roc-usermenu-role { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .roc-usermenu-item { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); width: 100%; box-sizing: border-box; background: none; border: none; text-align: left; cursor: pointer; padding: 10px var(--space-3); border-radius: var(--border-radius-md); color: var(--color-text-primary); font-size: var(--font-size-base); font-weight: 600; font-family: inherit; line-height: 1.3; text-decoration: none; min-height: 44px; appearance: none; -webkit-appearance: none; } .roc-usermenu-item:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; } .roc-usermenu-item svg { width: 18px; height: 18px; color: var(--color-text-secondary); flex: 0 0 auto; } .roc-usermenu-danger { color: var(--color-status-error); } .roc-usermenu-danger svg { color: var(--color-status-error); } .roc-usermenu form { margin: 0; width: 100%; display: block; } /* Language switcher inside the user menu */ .roc-usermenu-langs { display: flex; gap: 6px; padding: 6px var(--space-3); } .roc-usermenu-lang { flex: 1; text-align: center; text-decoration: none; padding: 8px 6px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-primary); color: var(--color-text-secondary); font-weight: 700; font-size: var(--font-size-sm); min-height: 40px; display: flex; align-items: center; justify-content: center; } .roc-usermenu-lang:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); text-decoration: none; } /* Language switcher on the login card */ .roc-login-langs { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); } .roc-login-langs a { color: var(--color-text-tertiary); text-decoration: none; font-weight: 700; font-size: var(--font-size-sm); } .roc-login-langs a:hover { color: var(--color-text-primary); } @media (max-width: 560px) { .roc-usermenu-name, .roc-usermenu-caret { display: none; } .roc-usermenu-trigger { padding: 4px; } /* The header sheds text before it sheds controls. "Saturday" is the part a member can work out for themselves; the offset is the part they came for, so that is what survives. */ .roc-gameclock-day { display: none; } } .roc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); padding: 8px 16px; border-radius: var(--border-radius-md); font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s; } .roc-btn:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .roc-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* ════════════════════════════════════════════════════════════════ Button system (Task 5) — global, AA-safe, ≥44px targets. Named by role, not by hue: the fills come from the accent tokens, so an alliance palette repaints them and a hue in this comment would be wrong the moment it did. .btn-primary accent fill + on-accent ink .btn-secondary outline .btn-ghost transparent .btn-danger error fill + white Add .btn-sm for a compact variant. ════════════════════════════════════════════════════════════════ */ .btn-primary, .btn-secondary, .btn-ghost, .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: var(--border-radius-md); border: 1px solid transparent; font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 700; line-height: 1.1; cursor: pointer; text-decoration: none; -webkit-appearance: none; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, filter .15s; } .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* An can match neither :disabled nor [disabled], so a disabled RocButton with an Href needs the aria form too. Without it the link is genuinely inert (RocButton drops the href) but still renders at full opacity and lights up on hover, which invites a click that does nothing. */ .btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled, .btn-danger:disabled, .btn-primary[disabled], .btn-secondary[disabled], .btn-ghost[disabled], .btn-danger[disabled], .btn-primary[aria-disabled="true"], .btn-secondary[aria-disabled="true"], .btn-ghost[aria-disabled="true"], .btn-danger[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; filter: none; } .btn-primary { background: var(--color-accent-primary); color: var(--color-on-accent); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-accent-primary-hover); color: var(--color-on-accent); text-decoration: none; } .btn-primary:active { background: var(--color-accent-primary-active); } .btn-secondary { background: var(--color-bg-secondary); border-color: var(--color-border-strong); color: var(--color-text-primary); } .btn-secondary:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; } .btn-ghost { background: transparent; color: var(--color-text-primary); } .btn-ghost:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; } .btn-danger { background: var(--color-status-error); color: #fff; box-shadow: var(--shadow-sm); } .btn-danger:hover { filter: brightness(.95); color: #fff; text-decoration: none; } .btn-sm { min-height: 36px; padding: 7px 14px; font-size: var(--font-size-sm); } /* Icon-only buttons: square, at the 44px touch target (36px in the small size). */ .btn-icon { padding: 0; width: 44px; min-width: 44px; } .btn-icon.btn-sm { width: 36px; min-width: 36px; } .btn-icon-slot { display: inline-flex; align-items: center; } .btn-icon-slot svg { width: 18px; height: 18px; display: block; } .is-busy { cursor: progress; } /* The variant :hover rules above are what actually light a button up, and an anchor keeps matching them while aria-disabled. One rule each, with the attribute selector for specificity, holds the disabled appearance through hover. */ .btn-primary[aria-disabled="true"]:hover { background: var(--color-accent-primary); color: var(--color-on-accent); } .btn-secondary[aria-disabled="true"]:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); } .btn-ghost[aria-disabled="true"]:hover { background: transparent; color: var(--color-text-primary); } .btn-danger[aria-disabled="true"]:hover { background: var(--color-status-error); color: #fff; filter: none; } /* ════════════════════════════════════════════════════════════════ Cards & grouped sections (Task 6) — Apple-Health-style building blocks .roc-card soft content card (padded) .roc-section muted label + .roc-group (rounded list of .roc-row) ════════════════════════════════════════════════════════════════ */ .roc-card { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); /* Cards carried no margin, so every page invented its own and the ones that forgot had their cards touching. One default here, cancelled below wherever the container already supplies a gap, so the two can never add up. */ margin-bottom: var(--space-5); } /* Vertical rhythm for stacked page content. Prefer this over per-page margins: a container with a gap spaces whatever it holds, cards or not. */ .roc-stack { display: flex; flex-direction: column; gap: var(--space-5); } .roc-stack > .roc-card, .acct-grid > .roc-card, .roc-stack > .mud-paper, .roc-stack > .mud-card { margin-bottom: 0; } .roc-card:last-child { margin-bottom: 0; } /* A MudPaper or MudCard used as a page section gets the same rhythm as .roc-card. Pages mix the two — MudCard for the shieldwall rows, .roc-card elsewhere — and without this the Mud ones touched while the others were spaced. Scoped to direct children of the page shell so nested papers (a panel inside a card) keep their own spacing. `:where` keeps specificity at zero, so any page that wants something else still wins. */ :where(.roc-main) > :where(.mud-paper, .mud-card), :where(.roc-main) > :where(div) > :where(.mud-paper, .mud-card) { margin-bottom: var(--space-5); } :where(.roc-stack) > :where(.mud-paper, .mud-card):last-child, :where(.roc-main) > :where(.mud-paper, .mud-card):last-child { margin-bottom: 0; } .roc-card--flush { padding: 0; overflow: hidden; } .roc-card--pad-sm { padding: var(--space-4); } .roc-card--accent { background: var(--color-accent-soft); border-color: var(--color-accent-soft-border); } .roc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); } .roc-card-head--bordered { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-secondary); } .roc-card-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text-primary); margin: 0; letter-spacing: -0.01em; } .roc-card-sub { margin: 2px 0 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); } .roc-section { margin-bottom: var(--space-6); } .roc-section-title { font-size: var(--font-size-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-tertiary); margin: 0 0 var(--space-3) var(--space-2); } /* RocSection header: the existing .roc-section-title, plus the description and action slot the component adds. Tokens only, no new values. */ .roc-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } .roc-section-head-text { min-width: 0; } .roc-section-desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-2); } .roc-section-head-action { flex: 0 0 auto; } .roc-group { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .roc-row { display: flex; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-secondary); } .roc-row:last-child { border-bottom: none; } .roc-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .roc-row-label { font-weight: 700; color: var(--color-text-primary); } .roc-row-sub { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .roc-row-value { color: var(--color-text-secondary); font-weight: 600; text-align: right; white-space: nowrap; } a.roc-row, .roc-row--link { cursor: pointer; text-decoration: none; color: inherit; transition: background-color .15s; } a.roc-row:hover, .roc-row--link:hover { background: var(--color-bg-tertiary); text-decoration: none; } a.roc-row:focus-visible, .roc-row--link:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-row-chevron { color: var(--color-text-tertiary); flex: 0 0 auto; } .roc-row-chevron svg { width: 18px; height: 18px; display: block; } /* ════════════════════════════════════════════════════════════════ Page header (Task 7) — title + one-line purpose + optional action. Used at the top of every tool/list page via . ════════════════════════════════════════════════════════════════ */ .roc-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); } .roc-page-head-text { min-width: 0; } .roc-page-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-xl); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-text-primary); margin: 0; } /* moves focus to this

after each navigation so screen readers announce the new page. The heading is tabindex="-1" (never in the tab order), so it only ever receives that programmatic focus — a visible ring serves no keyboard-navigation purpose. Suppress it in every case (F5/Ctrl+R refresh registers keyboard modality, so :focus-visible would otherwise match). */ .roc-page-title:focus { outline: none; box-shadow: none; } .roc-page-desc { margin: 6px 0 0; color: var(--color-text-secondary); font-size: var(--font-size-md); max-width: 70ch; } .roc-page-head-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } @media (max-width: 600px) { .roc-page-head { align-items: flex-start; } /* A grid, not the wrapping flex row it is on desktop. Wrapping puts each button on a line of its own as soon as the labels are longer than half the screen, which on a phone turned five header buttons into five rows and ~200px of chrome above the content. Two tracks fit a 320px screen, so the same five become three rows and every button keeps a full-width tap target. */ .roc-page-head-actions { width: 100%; display: grid; /* 132px, not a rounder 150: the narrowest phone worth supporting leaves this row 280px after the main padding, and two tracks plus the 12px gap have to land inside that or auto-fit quietly falls back to one column and nothing changes. */ grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } /* auto-fit collapses the tracks it does not need, so a header with one action would hand that button the whole row — a lone "New post" stretched 540px wide across a small tablet. Filling the track is only worth it when there is a second button to line up against. */ .roc-page-head-actions > :only-child { justify-self: start; } } /* RocPage frame. The max width lives here rather than on each page, which is the whole point of the primitive being mandatory. */ .roc-page { max-width: 1100px; margin: 0 auto; } .roc-page-loading { display: flex; justify-content: center; padding: var(--space-8) 0; } .roc-spinner { width: 28px; height: 28px; border: 3px solid var(--color-border-primary); border-top-color: var(--color-accent-primary); border-radius: 50%; animation: roc-spin .8s linear infinite; } @keyframes roc-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .roc-spinner { animation-duration: 3s; } } /* ════════════════════════════════════════════════════════════════ Form fields (Task 8) Native controls use .roc-field / .roc-label / .roc-input / .roc-help. (.roc-input base lives in the Login block; here we extend it to select/textarea, add states, and lightly tune MudBlazor inputs.) ════════════════════════════════════════════════════════════════ */ .roc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); } .roc-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary); } .roc-label .roc-req { color: var(--color-status-error); margin-left: 2px; } .roc-help { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; } .roc-field-error { font-size: var(--font-size-sm); color: var(--color-status-error); font-weight: 600; margin: 0; } /* Buttons sitting under a field control. A row inside the column-flex .roc-field so the button keeps its natural width instead of stretching to the field. */ .roc-field-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* Toggles. The switch variant restyles the same checkbox rather than replacing it, so keyboard operation and the announced checked state survive. The input and its text sit inside one