/* ─── Tokens ────────────────────────────────────────────────────── Theme-aware via [data-theme] on . Dark is the default; a [data-theme="light"] override flips every variable. */ :root { /* Surfaces */ --bg: #1A1A1C; --bg-elevated: #212124; --surface: rgba(255, 255, 255, 0.045); --surface-hover: rgba(255, 255, 255, 0.08); --surface-strong: rgba(255, 255, 255, 0.10); --surface-solid: #2B2B2E; --appbar-bg: rgba(26, 26, 28, 0.55); --drawer-bg: rgba(26, 26, 28, 0.45); --dialog-bg: rgba(43, 43, 46, 0.78); --input-bg: rgba(255, 255, 255, 0.04); /* Borders */ --border-subtle: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.14); /* Text */ --text-primary: #F1EFEA; --text-secondary: #A8A6A0; --text-tertiary: #78766F; /* Accent — Homestead yellow */ --accent: #F2B705; --accent-strong: #FFC72E; --accent-soft: rgba(242, 183, 5, 0.14); --accent-ring: rgba(242, 183, 5, 0.30); --on-accent: #2B2B2E; /* Status */ --success: #4ADE80; --warning: #F59E0B; --error: #F87171; /* Background orbs */ --orb-1: rgba(242, 183, 5, 0.14); --orb-2: rgba(255, 179, 71, 0.08); /* Effects */ --glass-blur: blur(20px) saturate(160%); --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.07); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-dialog: 0 30px 80px rgba(0, 0, 0, 0.55); /* Radii */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 18px; } [data-theme="light"] { --bg: #F7F6F3; --bg-elevated: #FFFFFF; --surface: rgba(255, 255, 255, 0.70); --surface-hover: rgba(255, 255, 255, 0.92); --surface-strong: #FFFFFF; --surface-solid: #FFFFFF; --appbar-bg: rgba(255, 255, 255, 0.70); --drawer-bg: rgba(255, 255, 255, 0.60); --dialog-bg: rgba(255, 255, 255, 0.90); --input-bg: rgba(255, 255, 255, 0.80); --border-subtle: rgba(43, 43, 46, 0.08); --border: rgba(43, 43, 46, 0.16); --text-primary: #23221F; --text-secondary: #5C5A54; --text-tertiary: #8A877F; /* Readable gold — legible as link/active text and as a button fill */ --accent: #9A6E00; --accent-strong: #7E5A00; --accent-soft: rgba(242, 183, 5, 0.18); --accent-ring: rgba(242, 183, 5, 0.40); --on-accent: #FFFFFF; --orb-1: rgba(242, 183, 5, 0.24); --orb-2: rgba(255, 179, 71, 0.16); --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.95); --shadow-card: 0 8px 24px rgba(43, 40, 30, 0.08); --shadow-dialog: 0 30px 80px rgba(43, 40, 30, 0.20); } html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Two soft accent orbs give the glass something to refract. Fixed so the gradient stays put while content scrolls. */ html, body { background: radial-gradient(900px circle at 12% 8%, var(--orb-1) 0%, transparent 55%), radial-gradient(800px circle at 88% 92%, var(--orb-2) 0%, transparent 55%), var(--bg); background-attachment: fixed; min-height: 100vh; } .mud-layout, .mud-main-content { background-color: transparent !important; color: var(--text-primary); } a, .btn-link { color: var(--accent); } .cursor-pointer { cursor: pointer; } /* ─── AppBar — glass with subtle bottom rule ───────────────────── */ .mud-appbar.mud-appbar-color-default, .mud-appbar { background-color: var(--appbar-bg) !important; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); box-shadow: none !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } /* ─── Drawer — glass with subtle right rule, nav as pill items ─── */ .mud-drawer { background-color: var(--drawer-bg) !important; color: var(--text-primary); border-right: 1px solid var(--border-subtle); box-shadow: none !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .mud-nav-menu { padding: 8px; } .mud-drawer .mud-nav-link { color: var(--text-secondary); border-radius: var(--radius-sm); margin: 2px 0; padding: 10px 12px; transition: background-color .15s, color .15s; } .mud-drawer .mud-nav-link:hover { background-color: var(--surface); color: var(--text-primary); } .mud-drawer .mud-nav-link.active, .mud-drawer .mud-nav-link.mud-nav-link-active { background-color: var(--accent-soft); color: var(--accent); } .mud-drawer .mud-nav-link .mud-icon-default { color: inherit; } .mud-divider { border-color: var(--border-subtle) !important; background-color: var(--border-subtle) !important; } /* ─── Cards & papers — glass: semi-transparent, blurred, top highlight ─ */ .mud-card, .mud-paper { background-color: var(--surface) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border-subtle); border-radius: var(--radius-md) !important; box-shadow: var(--glass-highlight) !important; } /* Clickable container cards — lift and pick up the accent on hover/focus */ .container-card { cursor: pointer; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; } .container-card:hover, .container-card:focus-visible { transform: translateY(-2px); border-color: var(--accent-ring); box-shadow: var(--glass-highlight), 0 12px 30px rgba(0, 0, 0, 0.28) !important; outline: none; } .mud-card-header { padding: 20px 24px 0 24px; } .mud-card-content { padding: 20px 24px 24px 24px; } /* Outlined paper used as empty-state placeholder — keep it transparent */ .mud-paper-outlined { background-color: transparent !important; } /* ─── Buttons ──────────────────────────────────────────────────── */ .mud-button-root { border-radius: var(--radius-sm) !important; text-transform: none; letter-spacing: 0; font-weight: 600; } .mud-button-label { text-transform: none; letter-spacing: 0; font-weight: 600; } .mud-icon-button { border-radius: var(--radius-sm) !important; } /* ─── Inputs ───────────────────────────────────────────────────── */ .mud-input-root, .mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-sm) !important; } /* ─── Progress bar ─────────────────────────────────────────────── */ .mud-progress-linear { border-radius: 999px; overflow: hidden; } .mud-progress-linear .mud-progress-linear-bar { border-radius: 999px; } /* ─── Chip ─────────────────────────────────────────────────────── */ .mud-chip { border-radius: 6px; font-weight: 600; } /* ─── Table — glass, minimal dividers ──────────────────────────── */ .mud-table { background-color: var(--surface) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--text-primary); border-radius: var(--radius-md) !important; overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--glass-highlight) !important; } .mud-table .mud-table-head .mud-table-cell { background-color: transparent; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.06em; border-bottom: 1px solid var(--border-subtle); padding-top: 14px; padding-bottom: 14px; } .mud-table .mud-table-head .mud-table-cell .mud-table-sort-label, .mud-table .mud-table-head .mud-table-cell .mud-table-sort-label-icon { color: var(--text-secondary); } .mud-table .mud-table-body .mud-table-cell { color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); padding-top: 14px; padding-bottom: 14px; } .mud-table .mud-table-body tr:last-child .mud-table-cell { border-bottom: none; } .mud-table-hover tbody tr:hover { background-color: var(--surface-hover) !important; } /* Dense tables (used inside expansion panels) lose their card chrome so they read as part of the panel body. */ .mud-expand-panel .mud-table { background-color: transparent !important; border: none; border-radius: 0 !important; } /* ─── Expansion panels — glass ─────────────────────────────────── */ .mud-expand-panel { background-color: var(--surface) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border-subtle); border-radius: var(--radius-md) !important; box-shadow: var(--glass-highlight) !important; margin-bottom: 12px; } .mud-expansion-panels { box-shadow: none !important; } .mud-expand-panel-header { padding: 18px 24px; } .mud-expand-panel-text { padding: 0 24px 20px 24px; } /* ─── Avatar ───────────────────────────────────────────────────── */ .mud-avatar { border-radius: 10px; } /* ─── Dialog — glass with stronger backdrop ────────────────────── */ .mud-dialog { background-color: var(--dialog-bg) !important; backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg) !important; box-shadow: var(--glass-highlight), var(--shadow-dialog) !important; } /* ─── Focus ring (matches accent) ──────────────────────────────── */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--bg), 0 0 0 0.25rem var(--accent-ring); } .content { padding-top: 1.1rem; } /* ─── Login page ───────────────────────────────────────────────── */ .account-layout { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; background: radial-gradient(900px circle at 50% -10%, var(--orb-1) 0%, transparent 55%), radial-gradient(800px circle at 50% 110%, var(--orb-2) 0%, transparent 55%), var(--bg); } .login-card { width: 100%; max-width: 420px; background-color: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 3rem 2.25rem; box-shadow: var(--glass-highlight), 0 24px 60px rgba(0, 0, 0, 0.45); } .login-icon { display: block; margin: 0 auto 0.75rem; height: 88px; width: auto; } .login-brand { text-align: center; font-weight: 700; font-size: 1.75rem; color: var(--text-primary); margin-bottom: 2rem; letter-spacing: 0.01em; } /* ─── AppBar brand ─────────────────────────────────────────────── */ .brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); } .brand-link:hover { text-decoration: none; } .brand-icon { height: 30px; width: auto; display: block; } .brand-name { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.01em; color: var(--text-primary); } .login-field { margin-bottom: 1.25rem; } .login-field label { display: block; color: var(--text-secondary); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.45rem; font-weight: 600; } .login-input { width: 100%; background-color: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.8rem 0.95rem; color: var(--text-primary); font-size: 0.95rem; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; } .login-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .login-button { width: 100%; background-color: var(--accent); color: var(--on-accent); border: none; border-radius: var(--radius-sm); padding: 0.9rem; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; margin-top: 0.75rem; transition: background-color 0.15s, transform 0.05s; } .login-button:hover { background-color: var(--accent-strong); } .login-button:active { transform: translateY(1px); } .login-error { background-color: rgba(248, 113, 113, 0.10); color: #FCA5A5; border: 1px solid rgba(248, 113, 113, 0.30); border-radius: var(--radius-sm); padding: 0.75rem 0.95rem; margin-bottom: 1.25rem; font-size: 0.875rem; } .login-validation { color: #FCA5A5; font-size: 0.78rem; margin-top: 0.3rem; display: block; } .login-hint { margin-top: 1.5rem; text-align: center; color: var(--text-secondary); font-size: 0.78rem; } /* ─── Terminal page ────────────────────────────────────────────── */ .terminal-toolbar { display: flex; align-items: center; margin-bottom: 12px; padding: 8px 14px; background-color: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--glass-highlight); } .terminal-host { width: 100%; height: calc(100vh - 240px); min-height: 360px; background-color: #0A0E14; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px; overflow: hidden; box-shadow: var(--glass-highlight); } .terminal-host .xterm, .terminal-host .xterm-viewport, .terminal-host .xterm-screen { background-color: transparent !important; } /* ─── Identity scaffolding bits (kept) ─────────────────────────── */ h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }