/* ═══════════════════════════════════════════════════ DrawControl — Design System Dark, warm, gaming-adjacent. Keeps the slate-dark top nav, leans into orange gradient accents, soft radii, and glow shadows on dark surfaces. ═══════════════════════════════════════════════════ */ :root { /* ── Brand accent (gradient driven) ── */ --dc-orange: #ff8a3c; --dc-orange-2: #ffb347; --dc-orange-rgb: 255, 138, 60; --dc-accent-grad: linear-gradient(135deg, var(--dc-orange), var(--dc-orange-2)); --dc-accent-glow: 0 4px 22px -6px rgba(var(--dc-orange-rgb), 0.5); /* ── Surfaces (dark) ── */ --dc-bg: #0f1014; --dc-bg-grad: linear-gradient(160deg, #131722 0%, #0f1014 60%, #0c0d12 100%); --dc-surface: #171a21; --dc-surface-2: #1f242c; --dc-surface-3: #262c36; --dc-border: #2b313b; --dc-border-soft: #303642; /* ── Text ── */ --dc-text: #f4f6fa; --dc-text-muted: #b9c4d3; --dc-text-faint: #6b7484; /* ── Top nav (slate-800ish — preserved from previous) ── */ --dc-nav-bg: #131722; --dc-nav-text: #cbd5e1; --dc-nav-text-on: #ffffff; /* ── Semantic ── */ --dc-success: #4ccd7b; --dc-success-bg: rgba(76, 205, 123, 0.12); --dc-info: var(--dc-orange); --dc-info-bg: rgba(var(--dc-orange-rgb), 0.12); --dc-warning: #ffc85a; --dc-warning-bg: rgba(255, 200, 90, 0.12); --dc-danger: #ff625d; --dc-danger-bg: rgba(255, 98, 93, 0.12); --dc-focus-ring: 0 0 0 3px rgba(var(--dc-orange-rgb), 0.38); /* ── Radii & shadows ── */ --dc-radius-xs: 6px; --dc-radius: 12px; --dc-radius-lg: 18px; --dc-shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, 0.5); --dc-shadow: 0 6px 28px -8px rgba(0, 0, 0, 0.55); --dc-shadow-lg: 0 18px 48px -16px rgba(0, 0, 0, 0.65); /* ── Layout ── */ --dc-container: 1180px; /* ── Legacy palette aliases ── Older component CSS (clock.css, format-builder.css, the bunch in wwwroot/css/) was authored against the previous light theme and still references --dc-slate-*, --dc-card-bg, --dc-orange-light, --dc-orange-mid, --dc-shadow-md, --dc-page-bg. Re-bind those names to dark-friendly values so legacy markup picks up sane colors without rewriting every file. The slate scale is *inverted* from its old meaning: slate-50 used to be near-white surface, now it's the darkest background; slate-900 used to be near-black text, now it's the brightest text on a dark background. */ --dc-page-bg: var(--dc-bg); --dc-card-bg: var(--dc-surface-2); --dc-shadow-md: 0 4px 14px -4px rgba(0, 0, 0, 0.55); --dc-orange-light: rgba(var(--dc-orange-rgb), 0.15); --dc-orange-mid: var(--dc-orange-2); --dc-slate-50: #171a21; /* darkest dev surface */ --dc-slate-100: #1f242c; --dc-slate-200: #262c36; --dc-slate-300: #2b313b; /* border range */ --dc-slate-400: #6b7484; /* faint text */ --dc-slate-500: #94a3b8; --dc-slate-600: #b9c4d3; /* muted text */ --dc-slate-700: #cbd5e1; --dc-slate-800: #e2e8f0; --dc-slate-900: #f4f6fa; /* brightest body text */ } /* ═══════════════════════════════════════════════════ Base ═══════════════════════════════════════════════════ */ html, body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--dc-text); background: var(--dc-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--dc-bg-grad) !important; min-height: 100vh; } /* Override Radzen Material theme variables — these drive every default background Radzen paints (including the rz-layout wrapper that sits on top of ). Without overriding these, Radzen keeps repainting the page light no matter what we do downstream. */ :root, .rz-base, [class*="rz-"] { --rz-base: #0f1014; --rz-base-50: #15171e; --rz-base-100: #171a21; --rz-base-200: #1f242c; --rz-base-300: #262c36; --rz-base-background-color: #0f1014; --rz-body-background-color: transparent; --rz-content-background-color: transparent; --rz-text-color: #f4f6fa; --rz-text-secondary-color: #b9c4d3; --rz-text-tertiary-color: #6b7484; --rz-text-disabled-color: #6b7484; --rz-text-title-color: #f4f6fa; --rz-border: 1px solid #2b313b; --rz-border-color: #2b313b; --rz-border-disabled-color: #2b313b; --rz-border-radius: 12px; --rz-primary: #ff8a3c; --rz-primary-color: #ff8a3c; --rz-primary-light: #ffb347; --rz-primary-lighter: rgba(255, 138, 60, 0.15); --rz-primary-dark: #ea580c; --rz-on-primary: #121317; --rz-link-color: #ff8a3c; --rz-link-hover-color: #ffb347; --rz-input-background-color: #171a21; --rz-input-color: #f4f6fa; --rz-input-border: 1px solid #2b313b; /* DataGrid surfaces — Radzen uses dedicated tokens that don't fall back to --rz-base-*. Without these the grid renders white headers and white rows on the dark page. */ --rz-grid-background-color: transparent; --rz-grid-border-color: #2b313b; --rz-grid-header-background-color: #171a21; --rz-grid-header-color: #b9c4d3; --rz-grid-header-border-color: #2b313b; --rz-grid-cell-background-color: #1f242c; --rz-grid-cell-color: #f4f6fa; --rz-grid-row-background-color: #1f242c; --rz-grid-row-color: #f4f6fa; --rz-grid-row-hover-background-color: #262c36; --rz-grid-row-hover-color: #f4f6fa; --rz-grid-row-selected-background-color: rgba(255, 138, 60, 0.12); --rz-grid-row-selected-color: #f4f6fa; --rz-grid-row-stripe-background-color: #1c2028; --rz-grid-footer-background-color: #171a21; --rz-grid-footer-color: #b9c4d3; --rz-grid-group-row-background-color: #171a21; --rz-grid-group-row-color: #f4f6fa; --rz-grid-sort-icon-color: #b9c4d3; --rz-grid-filter-icon-color: #b9c4d3; --rz-grid-filter-icon-active-color: #ff8a3c; --rz-grid-group-header-item-color: #b9c4d3; /* Card / panel surfaces */ --rz-panel-background-color: #1f242c; --rz-panel-color: #f4f6fa; --rz-panel-border-color: #2b313b; --rz-card-background-color: #1f242c; --rz-card-color: #f4f6fa; } /* Belt-and-braces: nail the specific Radzen wrappers that paint backgrounds, in case the variable overrides don't reach them. */ .rz-layout, .rz-layout-default, .rz-page, .rz-page-content, .rz-content, .rz-main { background: transparent !important; } h1, h2, h3, h4, h5, h6 { color: var(--dc-text); font-weight: 600; letter-spacing: -0.01em; } a { color: var(--dc-orange); text-decoration: none; } a:hover { color: var(--dc-orange-2); text-decoration: underline; } /* ═══════════════════════════════════════════════════ Header & Navigation ═══════════════════════════════════════════════════ */ .rz-header { background: var(--dc-nav-bg) !important; min-height: 56px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); border-bottom: 1px solid var(--dc-border); } .dc-header { display: flex; align-items: center; padding: 0 1.25rem; width: 100%; height: 56px; } .dc-header-logo { display: flex; align-items: center; text-decoration: none; margin-right: 2rem; flex-shrink: 0; } .dc-nav { display: flex; align-items: center; gap: 0.25rem; flex: 1; } .dc-nav-auth { display: none; } .dc-header-end { flex-shrink: 0; } .rz-header .dc-user-name, .dc-user-name { color: var(--dc-nav-text); font-size: 0.8125rem; } /* Radzen's .rz-header sets a primary text color we don't want; make sure the header content inherits our muted slate by default. */ .rz-header { color: var(--dc-nav-text); } /* Hamburger — hidden on desktop */ .dc-hamburger { display: none; flex-direction: column; justify-content: center; gap: 4px; background: none; border: none; cursor: pointer; padding: 0.5rem; margin-left: auto; } .dc-hamburger span { display: block; width: 20px; height: 2px; background: var(--dc-nav-text); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; } /* Nav links in header */ /* Radzen Material ships a `.rz-header a` rule (specificity 0,1,1) that sets color via --rz-on-primary. Without bumping specificity above that we get near-black links on a near-black header. Match the same compound pattern so we win cleanly. */ .rz-header .dc-nav-link, .dc-nav-link { display: inline-flex; align-items: center; padding: 0.5rem 0.875rem; color: var(--dc-nav-text); font-size: 0.875rem; font-weight: 500; text-decoration: none; border-radius: var(--dc-radius-xs); transition: color 0.15s, background-color 0.15s; position: relative; white-space: nowrap; } .rz-header .dc-nav-link:hover, .dc-nav-link:hover { color: var(--dc-nav-text-on); background: rgba(255, 255, 255, 0.06); text-decoration: none; } .rz-header .dc-nav-link.active, .dc-nav-link.active { color: var(--dc-nav-text-on); background: rgba(255, 255, 255, 0.08); } .dc-nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0.875rem; right: 0.875rem; height: 2px; background: var(--dc-accent-grad); border-radius: 1px; } .dc-login-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.875rem; color: #121317; font-size: 0.8125rem; font-weight: 600; text-decoration: none; border-radius: var(--dc-radius-xs); background: var(--dc-accent-grad); border: 1px solid rgba(var(--dc-orange-rgb), 0.45); box-shadow: var(--dc-accent-glow); cursor: pointer; transition: filter 0.15s, transform 0.1s; } .dc-login-btn:hover { filter: brightness(1.07); color: #121317; text-decoration: none; } .dc-login-btn:active { transform: translateY(1px); } /* ═══════════════════════════════════════════════════ Page shell ═══════════════════════════════════════════════════ */ .rz-body, .dc-body { background: transparent; } /* Radzen's .rz-layout is a CSS grid; .rz-body lands in a track that doesn't stretch by default, so the page collapses to ~489px no matter what max-width we put on .dc-body. Force .rz-body to span its grid row and take full width, then center the content with the inner padding. */ .rz-body { width: 100% !important; grid-column: 1 / -1 !important; } .dc-body { width: 100%; max-width: var(--dc-container); margin: 0 auto !important; padding: 1.75rem clamp(1rem, 3vw, 2rem) 4rem !important; box-sizing: border-box; } .dc-body:has(.dc-admin-layout) { max-width: none; padding: 0 !important; } /* ── Section headers ── */ .dc-section-header { font-size: 0.8125rem; font-weight: 700; color: var(--dc-text-muted); margin: 0 0 0.85rem; text-transform: uppercase; letter-spacing: 0.14em; display: inline-flex; align-items: center; gap: 0.55rem; } .dc-section-header::before { content: ''; width: 14px; height: 2px; background: var(--dc-accent-grad); border-radius: 1px; } /* ── Page header row ── */ .dc-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; } .dc-page-header h3 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .dc-page-subtitle { color: var(--dc-text-muted); font-size: 0.9375rem; margin: 0.25rem 0 0; } /* ═══════════════════════════════════════════════════ Cards ═══════════════════════════════════════════════════ */ .dc-card { background: linear-gradient(155deg, var(--dc-surface-2) 0%, var(--dc-surface) 100%); border: 1px solid var(--dc-border); border-radius: var(--dc-radius); padding: 1.25rem 1.5rem; box-shadow: var(--dc-shadow-sm); color: var(--dc-text); } .dc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .dc-tournament-card { background: linear-gradient(155deg, var(--dc-surface-2) 0%, var(--dc-surface) 100%); border: 1px solid var(--dc-border); border-radius: var(--dc-radius); padding: 1.125rem 1.25rem; cursor: pointer; transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s; box-shadow: var(--dc-shadow-sm); position: relative; overflow: hidden; } .dc-tournament-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: transparent; transition: background 0.2s; } .dc-tournament-card:hover { box-shadow: var(--dc-shadow); transform: translateY(-2px); border-color: var(--dc-border-soft); } .dc-tournament-card:hover::before { background: var(--dc-accent-grad); } .dc-tournament-card .dc-card-title { font-weight: 600; font-size: 0.9375rem; color: var(--dc-text); margin-bottom: 0.5rem; line-height: 1.3; } .dc-tournament-card .dc-card-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--dc-text-muted); } /* ═══════════════════════════════════════════════════ Status badges ═══════════════════════════════════════════════════ */ .dc-badge { display: inline-flex; align-items: center; padding: 0.18rem 0.55rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; border: 1px solid transparent; } .dc-badge-running { background: var(--dc-success-bg); color: var(--dc-success); border-color: rgba(76, 205, 123, 0.35); } .dc-badge-open { background: var(--dc-info-bg); color: var(--dc-orange); border-color: rgba(var(--dc-orange-rgb), 0.35); } .dc-badge-created { background: rgba(255, 255, 255, 0.04); color: var(--dc-text-muted); border-color: var(--dc-border); } .dc-badge-done { background: var(--dc-warning-bg); color: var(--dc-warning); border-color: rgba(255, 200, 90, 0.35); } .dc-badge-overdue { background: var(--dc-danger-bg); color: var(--dc-danger); border-color: rgba(255, 98, 93, 0.35); } /* ── Empty state ── */ .dc-empty { color: var(--dc-text-muted); font-size: 0.9rem; padding: 1rem 1.25rem; background: var(--dc-surface); border: 1px dashed var(--dc-border); border-radius: var(--dc-radius); text-align: center; } /* ═══════════════════════════════════════════════════ Forms — utility primitives ═══════════════════════════════════════════════════ */ .dc-form { display: flex; flex-direction: column; gap: 1rem; } .dc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .dc-form-row { display: flex; flex-direction: column; gap: 0.4rem; } .dc-form-label { font-size: 0.7rem; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; color: var(--dc-text-muted); } .dc-form-hint { font-size: 0.75rem; color: var(--dc-text-faint); line-height: 1.45; margin: 0; } .dc-form-error { font-size: 0.85rem; color: var(--dc-danger); margin: 0; } .dc-form-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; } .dc-form-actions--end { justify-content: flex-end; } /* Stack utility */ .dc-stack { display: flex; flex-direction: column; gap: 1rem; } .dc-stack-sm { gap: 0.5rem; } .dc-stack-lg { gap: 1.5rem; } .dc-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } /* ═══════════════════════════════════════════════════ Radzen overrides — make their components feel native ═══════════════════════════════════════════════════ */ /* Inputs */ .rz-textbox, .rz-numeric, .rz-dropdown, .rz-textarea, .rz-datepicker .rz-textbox { background: var(--dc-surface) !important; border: 1px solid var(--dc-border) !important; color: var(--dc-text) !important; border-radius: var(--dc-radius-xs) !important; box-shadow: none !important; transition: border-color 0.15s, box-shadow 0.15s; } .rz-textbox:focus, .rz-numeric:focus-within, .rz-dropdown:focus, .rz-dropdown.rz-state-focused, .rz-textarea:focus, .rz-datepicker .rz-textbox:focus { outline: 0 !important; border-color: var(--dc-orange) !important; box-shadow: var(--dc-focus-ring) !important; } .rz-textbox::placeholder, .rz-textarea::placeholder { color: var(--dc-text-faint); } /* Dropdown panel */ .rz-dropdown-panel { background: var(--dc-surface-2) !important; border: 1px solid var(--dc-border) !important; box-shadow: var(--dc-shadow); } .rz-dropdown-panel .rz-dropdown-item { color: var(--dc-text); } .rz-dropdown-panel .rz-dropdown-item:hover, .rz-dropdown-panel .rz-state-highlight { background: rgba(var(--dc-orange-rgb), 0.12) !important; color: var(--dc-text) !important; } /* Buttons — primary becomes the gradient orange */ .rz-button.rz-primary, .rz-button.rz-primary.rz-shade-default { background: var(--dc-accent-grad) !important; color: #121317 !important; border: 1px solid rgba(var(--dc-orange-rgb), 0.45) !important; font-weight: 600; box-shadow: var(--dc-accent-glow); transition: filter 0.15s, transform 0.1s, box-shadow 0.15s; } .rz-button.rz-primary:hover, .rz-button.rz-primary.rz-shade-default:hover { filter: brightness(1.07); background: var(--dc-accent-grad) !important; color: #121317 !important; } .rz-button.rz-primary:active { transform: translateY(1px); } /* Light/secondary buttons — dark surface */ .rz-button.rz-light, .rz-button.rz-secondary { background: var(--dc-surface-2) !important; color: var(--dc-text) !important; border: 1px solid var(--dc-border) !important; box-shadow: none !important; } .rz-button.rz-light:hover, .rz-button.rz-secondary:hover { background: var(--dc-surface-3) !important; border-color: var(--dc-border-soft) !important; } /* Success / danger */ .rz-button.rz-success { background: var(--dc-success) !important; color: #0e1f15 !important; border-color: var(--dc-success) !important; } .rz-button.rz-danger { background: var(--dc-danger) !important; color: #1a0606 !important; border-color: var(--dc-danger) !important; } .rz-button.rz-warning { background: var(--dc-warning) !important; color: #1a1407 !important; border-color: var(--dc-warning) !important; } /* DataGrid — restyle for dark. Cover both the legacy .rz-datatable hierarchy AND the newer .rz-data-grid hierarchy that RadzenDataGrid emits in current Radzen. Both sets of selectors below are kept so a Radzen version bump can't silently bring back unstyled tables. */ .rz-datatable, .rz-data-grid { background: transparent !important; border: 1px solid var(--dc-border) !important; border-radius: var(--dc-radius) !important; overflow: hidden; color: var(--dc-text); } /* Header row */ .rz-datatable .rz-datatable-thead > tr > th, .rz-data-grid .rz-grid-table > thead > tr > th, .rz-data-grid .rz-data-grid-data-header, .rz-data-grid-data-header-cell, .rz-data-grid thead .rz-cell-data, .rz-data-grid thead th { background: var(--dc-surface) !important; color: var(--dc-text-muted) !important; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--dc-border) !important; padding: 0.65rem 0.85rem; } /* Data rows */ .rz-datatable .rz-datatable-data > tr, .rz-data-grid .rz-grid-table > tbody > tr, .rz-data-grid tbody > tr { background: var(--dc-surface-2) !important; color: var(--dc-text) !important; transition: background-color 0.1s; } .rz-datatable .rz-datatable-data > tr > td, .rz-data-grid .rz-grid-table > tbody > tr > td, .rz-data-grid tbody > tr > td, .rz-data-grid .rz-cell-data { border-bottom: 1px solid var(--dc-border) !important; color: var(--dc-text) !important; padding: 0.65rem 0.85rem; } .rz-datatable .rz-datatable-data > tr:hover, .rz-data-grid .rz-grid-table > tbody > tr:hover, .rz-data-grid tbody > tr:hover { background: var(--dc-surface-3) !important; } .rz-datatable .rz-datatable-data > tr:last-child > td, .rz-data-grid .rz-grid-table > tbody > tr:last-child > td { border-bottom: none !important; } /* Sort icons / filter icons in headers */ .rz-data-grid .rz-sortable-column-icon, .rz-data-grid .rz-grid-filter-icon { color: var(--dc-text-muted) !important; } .rz-data-grid .rz-grid-filter-icon.rz-grid-filter-active { color: var(--dc-orange) !important; } /* Dialog */ .rz-dialog, .rz-dialog-content { background: var(--dc-surface-2) !important; color: var(--dc-text) !important; border-radius: var(--dc-radius) !important; box-shadow: var(--dc-shadow-lg) !important; } .rz-dialog-titlebar { background: var(--dc-surface) !important; color: var(--dc-text) !important; border-bottom: 1px solid var(--dc-border) !important; padding: 0.85rem 1.25rem !important; } /* Checkbox */ .rz-chkbox-box { background: var(--dc-surface) !important; border: 1px solid var(--dc-border) !important; } .rz-chkbox-box.rz-state-active { background: var(--dc-orange) !important; border-color: var(--dc-orange) !important; } /* Tabs */ .rz-tabview-nav { background: transparent !important; border-bottom: 1px solid var(--dc-border) !important; } .rz-tabview-nav .rz-tabview-selected a, .rz-tabview-nav li.rz-state-active a { color: var(--dc-orange) !important; border-bottom: 2px solid var(--dc-orange) !important; } .rz-tabview-nav li a { color: var(--dc-text-muted) !important; } /* ═══════════════════════════════════════════════════ Hero (home page) ═══════════════════════════════════════════════════ */ .dc-home-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: start; } .dc-home-right { width: 100%; } .dc-home-cta { margin-bottom: 1.5rem; } .dc-home-cta .rz-button { width: 100%; padding: 0.7rem 1.5rem; font-size: 0.9375rem; } .dc-home-right .dc-card-grid { grid-template-columns: 1fr; } .dc-hero { background: linear-gradient(155deg, var(--dc-surface-2) 0%, var(--dc-surface) 100%); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-lg); padding: 2rem 2.25rem; box-shadow: var(--dc-shadow-sm); position: relative; overflow: hidden; } .dc-hero::before { content: ''; position: absolute; top: 0; right: 0; width: 220px; height: 220px; background: radial-gradient(circle, rgba(var(--dc-orange-rgb), 0.18) 0%, transparent 70%); pointer-events: none; } .dc-hero h2 { font-size: 1.75rem; font-weight: 700; color: var(--dc-text); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.75rem 0; position: relative; } .dc-hero p { font-size: 1rem; color: var(--dc-text-muted); line-height: 1.6; margin: 0 0 1.25rem 0; position: relative; } .dc-hero ul { list-style: none; padding: 0; margin: 0; position: relative; } .dc-hero ul li { font-size: 0.9rem; color: var(--dc-text-muted); padding: 0.4rem 0; padding-left: 1.4rem; position: relative; } .dc-hero ul li::before { content: ''; position: absolute; left: 0; top: 0.75rem; width: 8px; height: 8px; border-radius: 50%; background: var(--dc-accent-grad); box-shadow: 0 0 12px rgba(var(--dc-orange-rgb), 0.5); } /* ═══════════════════════════════════════════════════ About page ═══════════════════════════════════════════════════ */ .dc-about { max-width: 880px; } .dc-about-hero { margin-bottom: 2.5rem; } .dc-about-hero h1 { font-size: 2.25rem; font-weight: 700; color: var(--dc-text); letter-spacing: -0.02em; margin: 0 0 0.6rem 0; background: var(--dc-accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .dc-about-hero > p { font-size: 1.125rem; color: var(--dc-text-muted); line-height: 1.6; margin: 0; } .dc-about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; } .dc-about-card { background: linear-gradient(155deg, var(--dc-surface-2) 0%, var(--dc-surface) 100%); border: 1px solid var(--dc-border); border-radius: var(--dc-radius); padding: 1.25rem 1.4rem; box-shadow: var(--dc-shadow-sm); position: relative; transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s; overflow: hidden; } .dc-about-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--dc-accent-grad); opacity: 0.7; } .dc-about-card:hover { transform: translateY(-2px); box-shadow: var(--dc-shadow); border-color: var(--dc-border-soft); } .dc-about-card h3 { font-size: 0.95rem; font-weight: 600; color: var(--dc-text); margin: 0 0 0.4rem 0; } .dc-about-card p { font-size: 0.85rem; color: var(--dc-text-muted); line-height: 1.5; margin: 0; } .dc-about-story { margin-bottom: 2rem; } .dc-about-story h3 { font-size: 1.15rem; font-weight: 600; color: var(--dc-text); margin: 0 0 0.85rem 0; } .dc-about-story p { font-size: 0.95rem; color: var(--dc-text-muted); line-height: 1.7; margin: 0 0 0.85rem 0; } .dc-about-contact { border-top: 1px solid var(--dc-border); padding-top: 1.5rem; } .dc-about-contact p { font-size: 0.95rem; color: var(--dc-text-muted); margin: 0; } /* ═══════════════════════════════════════════════════ Footer ═══════════════════════════════════════════════════ */ .dc-footer { text-align: center; padding: 1.5rem 1rem 2rem; font-size: 0.8rem; color: var(--dc-text-faint); border-top: 1px solid var(--dc-border); display: flex; justify-content: center; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 3rem; } .dc-footer a { color: var(--dc-text-faint); text-decoration: none; } .dc-footer a:hover { color: var(--dc-orange); } /* ═══════════════════════════════════════════════════ Error boundary ═══════════════════════════════════════════════════ */ .blazor-error-boundary { background: var(--dc-danger-bg); border-left: 4px solid var(--dc-danger); padding: 1rem 1rem 1rem 1.25rem; color: var(--dc-danger); border-radius: var(--dc-radius-xs); } .blazor-error-boundary::after { content: "An error has occurred."; } /* ═══════════════════════════════════════════════════ Responsive ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Header / nav */ .dc-hamburger { display: flex; } .dc-nav { display: none; position: absolute; top: 56px; left: 0; right: 0; background: var(--dc-nav-bg); flex-direction: column; padding: 0.5rem 1rem 1rem; gap: 0.25rem; box-shadow: var(--dc-shadow-lg); z-index: 100; border-bottom: 1px solid var(--dc-border); } .dc-nav.open { display: flex; } .dc-nav .dc-nav-link { padding: 0.7rem 0.75rem; width: 100%; } .dc-header-end { display: none; } .dc-nav-auth { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-top: 1px solid var(--dc-border); margin-top: 0.5rem; padding-top: 0.75rem; } /* Body padding */ .dc-body { padding: 1rem 1rem 3rem !important; } /* Home stacks */ .dc-home-layout { grid-template-columns: 1fr; gap: 1.5rem; } .dc-home-right { order: -1; } .dc-hero { padding: 1.5rem 1.5rem; } /* Cards: 1-col under 480px */ .dc-card-grid { grid-template-columns: 1fr; } /* Form grid collapses */ .dc-form-grid { grid-template-columns: 1fr; } .dc-page-header h3 { font-size: 1.25rem; } /* Tables: horizontal scroll inside a wrapper rather than overflow the page */ .rz-datatable-wrapper, .rz-data-grid-data { overflow-x: auto; } /* Dialog: full-width minus margins */ .rz-dialog { min-width: 0 !important; max-width: calc(100vw - 1.5rem) !important; } } /* ═══════════════════════════════════════════════════ Dark-theme overrides for legacy component CSS (tournament.css / roundview.css / svgbracket.css / tournament-bracket.css / matchdetail.css) These files predate the dark repaint and hardcode light surfaces (#fff, #f3f4f6, #f9fafb, #f8fafc, #fffbeb, #f0f9ff, #eff6ff). Each renders as a glaring white box on the dark page. Selectors below mirror the real class names emitted by their respective Blazor components — verified by reading each CSS file end-to-end, not guessed. Semantic colors that carry meaning (winner blue, loser red, finals amber, success green, danger red) are kept; only the *neutral* white/light-gray surfaces flip. ═══════════════════════════════════════════════════ */ /* ── tracked-player highlight, applied across all three views ── */ /* Match-card-level emphasis: a coloured glow + thicker accent border on the card so the user can spot tracked-player matches at a glance. Round view's own .round-card.tracked rule handles itself; we mirror the same look on .svg-match-card.tracked here. */ .svg-match-card.tracked { outline: 2px solid var(--dc-orange); outline-offset: -2px; box-shadow: 0 0 0 4px rgba(var(--dc-orange-rgb), 0.18); } /* Player slot inside an SVG match card. The round view styles its own .rc-player-row.tracked-player; replicate the same intent here. */ .svg-player-row.tracked-player { background: rgba(var(--dc-orange-rgb), 0.18) !important; border-radius: 0.25rem; } /* ── ClockPage: pause/play is the primary tap target ── The base .clock-btn padding (0.375rem 0.75rem) was sized for tiny chrome buttons. The pause/play in the centre strip is what a player actually slaps between turns — it should be huge and obvious. Override clock.css's .clock-btn-pause to a chunky pill-circle. */ .clock-btn-pause { min-width: 4.25rem; min-height: 4.25rem; padding: 0.5rem !important; font-size: clamp(1.75rem, 6vmax, 2.5rem) !important; line-height: 1 !important; border-radius: 999px !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(var(--dc-orange-rgb), 0.35); } /* Fullscreen toggle — small and dim so it never competes with the pause/play during play. */ .clock-btn-fullscreen { background: rgba(255, 255, 255, 0.08); color: var(--dc-slate-300, #cbd5e1); border: 1px solid rgba(255, 255, 255, 0.18); min-width: 2.25rem; min-height: 2.25rem; padding: 0.25rem; font-size: 0.95rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .clock-btn-fullscreen:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } /* ── ClockPage: no body-level scrollbars on phones ── ClockLayout is position:fixed and contained, but body.css declares min-height:100vh and on mobile 100vh is the viewport WITHOUT chrome (taller than the actual visible area). Body then forces a scroll when the URL bar is shown. Lock body to dvh and hide overflow when the clock layout is mounted so the clock truly fills only what's visible. */ html:has(.clock-layout), body:has(.clock-layout) { height: 100%; height: 100dvh; min-height: 0 !important; overflow: hidden !important; margin: 0; } /* ── SVG bracket: in-shell zoom + fullscreen controls ── Override svgbracket.css's `position: fixed; top: .5rem; right: .5rem;` light-theme styling. The controls now anchor to the bottom-right of the bracket *frame* (a non-scrolling sibling of the shell). They can't live inside .svg-bracket-shell because that's an overflow:scroll container — absolute children of a scroll container scroll WITH the content, which previously made the controls slide around as the user drag-panned. */ .svg-bracket-frame { position: relative; } .svg-bracket-shell { position: relative; } .svg-bracket-controls { position: absolute; bottom: 0.85rem; right: 0.85rem; z-index: 5; display: inline-flex; gap: 0.45rem; align-items: center; width: auto; pointer-events: none; } .svg-bracket-controls > * { pointer-events: auto; } .svg-zoom-ui { position: static !important; top: auto !important; right: auto !important; background: rgba(15, 16, 20, 0.82) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--dc-border) !important; border-radius: 9999px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important; color: var(--dc-text-muted) !important; font: 500 0.78rem/1 'Inter', system-ui, sans-serif !important; padding: 0.4rem 0.85rem !important; gap: 0.5rem !important; } .svg-zoom-icon { color: var(--dc-orange); font-size: 0.95rem; line-height: 1; } .svg-zoom-ui input { accent-color: var(--dc-orange) !important; } .svg-zoom-ui span { color: var(--dc-text) !important; min-width: 3.2ch; text-align: right; } .svg-fullscreen-btn { background: rgba(15, 16, 20, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--dc-border); border-radius: 9999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); color: var(--dc-text-muted); cursor: pointer; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; padding: 0; transition: color 0.15s, border-color 0.15s, background 0.15s; } .svg-fullscreen-btn:hover { color: var(--dc-text); border-color: var(--dc-border-soft); } .svg-fullscreen-btn.is-fullscreen { color: var(--dc-orange); border-color: rgba(var(--dc-orange-rgb), 0.5); } /* When the FRAME goes fullscreen (so the controls are still on screen), make it fill the viewport with the page bg and let the inner shell take the full height. */ .svg-bracket-frame:fullscreen { background: var(--dc-bg); width: 100vw; height: 100vh; padding: 1rem; box-sizing: border-box; } .svg-bracket-frame:fullscreen .svg-bracket-shell { height: 100% !important; } /* Standings row — keep it subtle. A faint orange wash + a 2px accent bar on the leading cell is enough to spot the tracked row without visually competing with Active/Eliminated badges in the same row. */ .rz-data-grid tbody tr.standings-row.tracked > td { background: rgba(var(--dc-orange-rgb), 0.06) !important; color: var(--dc-text) !important; } .rz-data-grid tbody tr.standings-row.tracked > td:first-child { box-shadow: inset 2px 0 0 0 var(--dc-orange); } /* ── tournament.css (TournamentViewComponent + match cards) ── */ /* Both bracket renderers use a "shell" scroll container with a hardcoded #f8fafc light bg. Without overriding both class names (.bracket-shell from tournament.css and .svg-bracket-shell from svgbracket.css) the SVG tree view renders its dark-translucent match cards on top of a light surface, which mixes back to a light-blue tone — exactly what the user spotted as a "different palette" on the Tree tab. */ .bracket-shell, .svg-bracket-shell { background: transparent !important; } /* The bracket variants on .match (and its parallel .round-card / .svg-match-card classes below) tint a card by its bracket lane. Translate the light pastels to translucent overlays on the dark surface so the bracket identity reads but stays in palette. */ .match.bracket-winner, .round-card.bracket-winner, .svg-match-card.bracket-winner { background: rgba(37, 99, 235, 0.12) !important; border-color: rgba(147, 197, 253, 0.45) !important; } .match.bracket-loser, .round-card.bracket-loser, .svg-match-card.bracket-loser { background: rgba(220, 38, 38, 0.12) !important; border-color: rgba(252, 165, 165, 0.45) !important; } .match.bracket-final, .round-card.bracket-final, .svg-match-card.bracket-final { background: rgba(217, 119, 6, 0.14) !important; border-color: rgba(252, 211, 77, 0.45) !important; } /* Match-card text */ .match-label, .svg-match-label, .rc-label { color: var(--dc-text) !important; } .match-sources, .svg-match-sources, .rc-sources { color: var(--dc-text-faint) !important; } .source-sep, .svg-source-sep, .rc-source-sep { color: var(--dc-text-faint) !important; } .vs-text, .svg-vs-text, .rc-vs { color: var(--dc-text-faint) !important; } .bye-player, .svg-bye-player, .rc-bye-player { color: var(--dc-text) !important; } .bye-label, .svg-bye-label, .rc-bye-label { color: var(--dc-text-faint) !important; } /* Player slot pills inside the match card (default white pill). The .slot-winner / .slot-loser variants stay semantic (green/red). */ .player-slot, .svg-player-row, .rc-player-row { background: var(--dc-surface) !important; border-color: var(--dc-border) !important; color: var(--dc-text) !important; } .player-slot:not(:disabled):hover { background: var(--dc-surface-3) !important; border-color: var(--dc-info) !important; box-shadow: 0 0 0 1px var(--dc-info) !important; } .player-slot:disabled { background: var(--dc-surface) !important; opacity: 0.5; } .svg-score, .rc-score { color: var(--dc-text) !important; } .rc-slot-label, .svg-slot-label { color: var(--dc-text-faint) !important; } .rc-score-summary, .svg-score-summary { color: var(--dc-text-muted) !important; border-top-color: var(--dc-border) !important; } /* State pills — only the neutral "pending" needs flipping; ready / inprogress / finished are semantic light-on-light pills that are readable enough on the dark background as-is. */ .rc-state-pending, .svg-state-pending, .md-state-pending, .standings-status-pending { background: var(--dc-surface) !important; color: var(--dc-text-muted) !important; } /* Zoom slider widget (tournament.css + svgbracket.css both ship one) */ .zoom-ui, .svg-zoom-ui { background: var(--dc-surface-2) !important; border-color: var(--dc-border) !important; color: var(--dc-text-muted) !important; box-shadow: var(--dc-shadow-sm) !important; } .zoom-ui span, .svg-zoom-ui span { color: var(--dc-text) !important; } /* Standings progress bar */ .standings-progress-bar { background: var(--dc-surface) !important; } .standings-progress-text { color: var(--dc-text-muted) !important; } /* ── tournament-bracket.css (older bracket renderer) ── */ /* The ancient renderer's .win-btn paints a light-gray button. */ .win-btn { background: var(--dc-surface) !important; color: var(--dc-text) !important; } .win-btn:not(:disabled):hover { background: var(--dc-surface-3) !important; } .source-labels, .match-winner { color: var(--dc-text-faint) !important; } /* ── roundview.css (RoundView page) ── */ /* The component is now a single flex row — round nav as the headline, bracket/group dropdowns only when there are multiple, then the combined find-player input takes whatever space is left. */ .round-view-toolbar { display: flex !important; /* The original roundview.css set flex-direction: column to stack two .round-view-toolbar-row wrappers vertically. We removed those wrappers when we collapsed the toolbar to a single row, so we need to flip back to row explicitly — otherwise every direct child stacks and the toolbar grows to ~300px tall. */ flex-direction: row !important; align-items: center; gap: 0.4rem; flex-wrap: wrap; background: var(--dc-surface-2) !important; border: 1px solid var(--dc-border) !important; box-shadow: none !important; padding: 0.4rem 0.55rem !important; margin-bottom: 0.5rem !important; border-radius: var(--dc-radius); } /* The round label is the headline — always visible, never wraps mid-text. */ .rv-round-label { font-weight: 600; white-space: nowrap; } /* Single combined Find-player input: pushes itself right and shrinks gracefully on narrow viewports so the whole toolbar fits in one row on phones bigger than ~360px. */ .round-view-toolbar .track-select { margin-left: auto; flex: 1 1 140px; min-width: 120px; max-width: 240px; width: auto !important; } .round-view-toolbar .track-select-input { width: 100% !important; } @media (max-width: 600px) { .round-view-toolbar { padding: 0.35rem 0.5rem !important; gap: 0.3rem; } .rv-round-label { font-size: 0.85rem; } .rv-match-count { font-weight: 400; } /* Tournament-status / -manage page chrome compresses too. */ .dc-page-header { gap: 0.5rem; margin-bottom: 0.6rem !important; } .dc-page-header h3 { font-size: 1.1rem !important; } /* The view-mode buttons (Round / Tree / Standings) row directly above the bracket — keep it tight. */ .dc-body > div[style*="margin-bottom: 0.5rem"] { margin-bottom: 0.35rem !important; } } .rv-label { color: var(--dc-text-muted) !important; } .rv-separator { color: var(--dc-border-soft) !important; } .rv-round-label { color: var(--dc-text) !important; } .rv-match-count { color: var(--dc-text-faint) !important; } .rv-empty { color: var(--dc-text-faint) !important; } /* Player path breadcrumb — keeps the warm-amber identity but on dark */ .player-path { background: rgba(255, 200, 90, 0.08) !important; border-color: rgba(255, 200, 90, 0.35) !important; } .player-path-name { color: #fcd34d !important; } .player-path-arrow { color: var(--dc-text-faint) !important; } .player-path-step { background: var(--dc-surface) !important; border-color: var(--dc-border) !important; color: var(--dc-text) !important; } .player-path-step:hover { background: var(--dc-surface-3) !important; border-color: rgba(147, 197, 253, 0.5) !important; } .player-path-step.current { background: rgba(37, 99, 235, 0.18) !important; border-color: #3b82f6 !important; color: #93c5fd !important; } /* Track-player search-select dropdown */ .track-select-input { background: var(--dc-surface) !important; color: var(--dc-text) !important; border-color: var(--dc-border) !important; } .track-select-input::placeholder { color: var(--dc-text-faint) !important; } .track-select-input:focus { border-color: var(--dc-orange) !important; box-shadow: var(--dc-focus-ring) !important; } .track-select-clear { color: var(--dc-text-faint) !important; } .track-select-clear:hover { color: var(--dc-text) !important; } .track-select-dropdown { background: var(--dc-surface-2) !important; border-color: var(--dc-border) !important; box-shadow: var(--dc-shadow) !important; } .track-select-option { color: var(--dc-text) !important; } .track-select-option:hover { background: var(--dc-surface-3) !important; color: var(--dc-text) !important; } .track-select-option.selected { background: rgba(var(--dc-orange-rgb), 0.18) !important; color: var(--dc-text) !important; } .track-select-more { color: var(--dc-text-faint) !important; border-top-color: var(--dc-border) !important; } /* TournamentInfoPanel chrome (lives inside roundview.css) */ .tournament-info-panel { background: var(--dc-surface-2) !important; border-color: var(--dc-border) !important; color: var(--dc-text); } .tip-summary { color: var(--dc-text) !important; } .tip-summary:hover { background: var(--dc-surface-3) !important; } .tip-body { border-top-color: var(--dc-border) !important; } .tip-chip { background: var(--dc-surface) !important; color: var(--dc-text) !important; } .tip-chip-phase { background: rgba(var(--dc-orange-rgb), 0.14) !important; color: var(--dc-text) !important; } .tip-label { color: var(--dc-text-muted) !important; } /* SVG bracket connector wires — tournament.css and svgbracket.css both render an absolutely-positioned inside the bracket shell with `stroke-width: 2px` but no `stroke` declared, so wires inherit the default black and disappear on the dark page (the user noted the Tree view tab "had a partially different palette" — the missing wires are why the bracket looked unfinished). Force a muted slate stroke that reads on the dark surface. */ #wires, #svgBracket .bracket-wires, .bracket-shell svg { stroke: var(--dc-border-soft) !important; } #wires path, #svgBracket .bracket-wires path, .bracket-shell svg path { stroke: var(--dc-border-soft) !important; } /* ── matchdetail.css (modal panel that opens when you click a match) ── */ .match-detail-panel { background: var(--dc-surface-2) !important; color: var(--dc-text); } .md-header { border-bottom-color: var(--dc-border) !important; } .md-label { color: var(--dc-text) !important; } .md-bracket-badge { background: var(--dc-surface) !important; color: var(--dc-text-muted) !important; } .md-close { color: var(--dc-text-muted) !important; } .md-close:hover { color: var(--dc-text) !important; } .md-review-flags { background: rgba(255, 200, 90, 0.10) !important; border-color: rgba(255, 200, 90, 0.35) !important; } .md-review-flag { color: var(--dc-warning) !important; } .md-section-title, .md-nav-label { color: var(--dc-text-muted) !important; } .md-score-row { background: var(--dc-surface) !important; } .md-slot-label, .md-vs, .md-match-length, .md-bye-label, .md-meta-label, .md-meta-id { color: var(--dc-text-faint) !important; } .md-player-name, .md-score-value, .md-nav-value, .md-meta-value { color: var(--dc-text) !important; } .md-meta-row { border-bottom-color: var(--dc-border) !important; } .md-score-summary { color: var(--dc-text-muted) !important; }