@font-face { font-family: 'montserrat'; src: url('assets/font/montserrat/Montserrat-VariableFont_wght.ttf') format('truetype'); } .montserrat { font-family: 'montserrat', sans-serif; } /* ============================================================ Color system — mirrored from Planium so the dashboard looks like part of the same family. Every color in the app comes from these variables; light mode overrides them via the html[data-theme="light"] block below. Never set colors through cryoclass classes: cryoclass writes inline styles, which no stylesheet can override. ============================================================ */ :root { /* Native controls (inputs, scrollbars) follow the theme */ color-scheme: dark; /* backgrounds, darkest to lightest */ --bg-app: #070604; --bg-deep: #070B0B; --bg-inset: #0E1214; --bg-card: #131619; --bg-raised: #1a1f25; --bg-chip: #2B3038; --divider: #141820; /* text, brightest to dimmest */ --text-bright: #ffffff; --text-primary: #f0f0f0; --text-secondary: #999999; --text-muted: #888888; --text-dim: #777777; --text-faint: #555555; /* accent (brand blue) */ --accent: #E27F06; --accent-deep: #a15b05; --accent-soft: #E27F06; --accent-tint: rgba(226, 127, 6, 0.10); --accent-line: rgba(226, 127, 6, 0.19); /* status */ --danger: #FF6B6B; --danger-strong: #FF4B4B; --danger-bg: #3a1414; --warning: #FFBB00; --warning-bg: #1c1400; --success: #5ECB7F; --success-tint: rgba(94, 203, 127, 0.16); --white: #ffffff; } /* ============================================================ Light mode — swaps the palette above. Activated by , set before first paint by the bootstrap script in index.html and toggled from the Account tab. Anything not overridden here works on both themes. ============================================================ */ html[data-theme="light"] { color-scheme: light; --bg-app: #eef1f4; --bg-deep: #e8ecf0; --bg-inset: #e3e7ec; --bg-card: #ffffff; --bg-raised: #f2f5f8; --bg-chip: #e5e9ee; --divider: #dfe4ea; --text-bright: #0b0f14; --text-primary: #1e2630; --text-secondary: #5f6a76; --text-muted: #6e7883; --text-dim: #7b8490; --text-faint: #9aa3ad; --accent-soft: #E27F06; --accent-tint: rgba(226, 127, 6, 0.08); --accent-line: rgba(226, 127, 6, 0.25); --danger: #D93A3A; --danger-strong: #C22525; --danger-bg: #fdeaea; --warning: #A87B00; --warning-bg: #fff5d9; --success: #2F9C55; --success-tint: rgba(47, 156, 85, 0.14); } /* Text sitting on accent/status-filled surfaces stays white in light mode — the light --text-bright is near-black and would vanish on the brand blue. */ html[data-theme="light"] .bgAccent, html[data-theme="light"] .bgDangerStrong { color: var(--white); } /* text colors */ .textBright { color: var(--text-bright); } .textPrimary { color: var(--text-primary); } .textSecondary { color: var(--text-secondary); } .textMuted { color: var(--text-muted); } .textDim { color: var(--text-dim); } .textFaint { color: var(--text-faint); } .textAccent { color: var(--accent); } .textAccentSoft { color: var(--accent-soft); } .textDanger { color: var(--danger); } .textWarning { color: var(--warning); } .textSuccess { color: var(--success); } /* background colors */ .bgApp { background-color: var(--bg-app); } .bgDeep { background-color: var(--bg-deep); } .bgInset { background-color: var(--bg-inset); } .bgCard { background-color: var(--bg-card); } .bgRaised { background-color: var(--bg-raised); } .bgChip { background-color: var(--bg-chip); } .bgAccent { background-color: var(--accent); } .bgAccentTint { background-color: var(--accent-tint); } .bgDangerStrong { background-color: var(--danger-strong); } /* border colors (width/style set elsewhere) */ .edgeAccent { border-color: var(--accent); } .edgeChip { border-color: var(--bg-chip); } /* Dotted separator used in the login connect-visual */ .borderDottedDim { border: 0; border-top: 2px dotted var(--text-dim); } /* ============================================================ Dashboard components ============================================================ */ /* Login inputs, matching the Softium sign form's feel */ .authInput { background-color: var(--bg-inset); color: var(--text-primary); border: 1px solid var(--bg-chip); border-radius: 8px; padding: 12px; font-family: 'Nunito', sans-serif; font-size: 0.95rem; outline: none; box-sizing: border-box; width: 100%; } .authInput:focus { border-color: var(--accent); } .authInput::placeholder { color: var(--text-dim); } /* Home stat tiles: two columns, single column on narrow screens */ .statGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-bottom: 20px; } /* Segmented chips (Reports tab) + small toggle button (Account tab) */ .segChip { background-color: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--bg-chip); border-radius: 20px; padding: 8px 14px; font-family: 'Nunito', sans-serif; font-size: 0.85rem; } .segChipActive { background-color: var(--accent-tint); color: var(--accent-soft); border-color: var(--accent-line); } /* Small status chips on cards */ .chipAccent, .chipWarning, .chipDanger { border-radius: 12px; padding: 3px 10px; font-size: 0.72rem; font-weight: bold; width: fit-content; white-space: nowrap; } .chipAccent { background-color: var(--accent-tint); color: var(--accent-soft); } .chipWarning { background-color: var(--warning-bg); color: var(--warning); } .chipDanger { background-color: var(--danger-bg); color: var(--danger); } /* Profile pictures: wrapper draws the lettered fallback circle */ .pfpWrap { position: relative; border-radius: 50%; background-color: var(--bg-chip); display: flex; align-items: center; justify-content: center; overflow: hidden; } .pfpWrap img { object-fit: cover; } .pfpLetter { color: var(--text-secondary); font-weight: bold; } /* Arrow between the two parties on a report card */ .reportArrow { color: var(--text-dim); flex-shrink: 0; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }