/* ============================================================================ Equity Tracker — Material 3 redesign. Tokens are the M3 baseline scheme (seed #6750A4) from the design handoff; dark scheme applies via the `md-dark` class on (set by app.js). Breakpoint: <840px = compact (bottom nav, FABs, sheets); ≥840px = expanded. ============================================================================ */ /* ---- Fonts (vendored, no network) ---- */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/roboto-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/roboto-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/roboto-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Roboto Flex"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("/static/fonts/roboto-flex-latin-wght-normal.woff2") format("woff2-variations"); } /* ---- M3 tokens ---- */ :root { --md-primary: #6750A4; --md-on-primary: #FFFFFF; --md-primary-container: #EADDFF; --md-on-primary-container: #21005D; --md-secondary-container: #E8DEF8; --md-on-secondary-container: #1D192B; --md-tertiary-container: #FFD8E4; --md-on-tertiary-container: #31111D; --md-error: #B3261E; --md-surface: #FEF7FF; --md-on-surface: #1D1B20; --md-on-surface-variant: #49454F; --md-surface-container-lowest: #FFFFFF; --md-surface-container-low: #F7F2FA; --md-surface-container: #F3EDF7; --md-surface-container-high: #ECE6F0; --md-surface-container-highest: #E6E0E9; --md-outline: #79747E; --md-outline-variant: #CAC4D0; --md-inverse-surface: #322F35; --md-inverse-on-surface: #F5EFF7; --md-elevation-1: 0px 1px 2px 0px rgba(0,0,0,0.30), 0px 1px 3px 1px rgba(0,0,0,0.15); --md-elevation-2: 0px 1px 2px 0px rgba(0,0,0,0.30), 0px 2px 6px 2px rgba(0,0,0,0.15); --md-elevation-3: 0px 1px 3px 0px rgba(0,0,0,0.30), 0px 4px 8px 3px rgba(0,0,0,0.15); --md-elevation-4: 0px 2px 3px 0px rgba(0,0,0,0.30), 0px 6px 10px 4px rgba(0,0,0,0.15); --md-font-brand: "Roboto Flex", "Roboto", system-ui, sans-serif; --md-font-plain: "Roboto", system-ui, sans-serif; --app-up: #386A20; /* Chart/donut categorical palette (M3 tone 40) */ --series-1: #6750A4; --series-2: #00696E; --series-3: #984061; --series-4: #386A20; --series-5: #8B5000; --series-6: #4758A9; --series-7: #7C5800; --series-8: #904A42; color-scheme: light; } .md-dark { --md-primary: #D0BCFF; --md-on-primary: #381E72; --md-primary-container: #4F378B; --md-on-primary-container: #EADDFF; --md-secondary-container: #4A4458; --md-on-secondary-container: #E8DEF8; --md-tertiary-container: #633B48; --md-on-tertiary-container: #FFD8E4; --md-error: #F2B8B5; --md-surface: #141218; --md-on-surface: #E6E0E9; --md-on-surface-variant: #CAC4D0; --md-surface-container-lowest: #0F0D13; --md-surface-container-low: #1D1B20; --md-surface-container: #211F26; --md-surface-container-high: #2B2930; --md-surface-container-highest: #36343B; --md-outline: #938F99; --md-outline-variant: #49454F; --md-inverse-surface: #E6E0E9; --md-inverse-on-surface: #322F35; --app-up: #9CD67D; /* Palette stepped for dark (M3 tone 80) */ --series-1: #D0BCFF; --series-2: #4DD9E2; --series-3: #FFB0C9; --series-4: #9CD67D; --series-5: #FFB870; --series-6: #B9C3FF; --series-7: #F8BD26; --series-8: #FFB4A9; color-scheme: dark; } /* ---- Base ---- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--md-surface); color: var(--md-on-surface); font-family: var(--md-font-plain); font-size: 14px; line-height: 20px; -webkit-tap-highlight-color: transparent; } a { color: var(--md-primary); } /* ---- State layer ---- */ .md-state { position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1); pointer-events: none; border-radius: inherit; } .md-interactive { position: relative; cursor: pointer; } .md-interactive:hover > .md-state { opacity: 0.08; } .md-interactive:active > .md-state { opacity: 0.10; } /* ---- Buttons ---- */ .md-btn { position: relative; border: none; cursor: pointer; height: 40px; padding: 0 24px; border-radius: 9999px; font-family: var(--md-font-plain); font-size: 14px; font-weight: 500; letter-spacing: 0.1px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--md-primary); text-decoration: none; transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1); } .md-btn .mi { width: 18px; height: 18px; } .md-btn-filled { background: var(--md-primary); color: var(--md-on-primary); } .md-btn-filled:hover { box-shadow: var(--md-elevation-1); } .md-btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } .md-btn-tonal:hover { box-shadow: var(--md-elevation-1); } .md-btn-text { padding: 0 12px; } .md-btn-outlined-error { color: var(--md-error); border: 1px solid var(--md-error); } .md-icon-btn { position: relative; border: none; cursor: pointer; background: transparent; width: 40px; height: 40px; border-radius: 9999px; color: var(--md-on-surface-variant); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .md-icon-btn.small { width: 32px; height: 32px; } .md-fab { position: fixed; right: 16px; bottom: 96px; z-index: 60; border: none; cursor: pointer; height: 56px; padding: 0 20px; border-radius: 16px; background: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: var(--md-elevation-3); display: none; align-items: center; gap: 12px; font-family: var(--md-font-plain); font-size: 14px; font-weight: 500; } .md-fab:hover { box-shadow: var(--md-elevation-4); } /* ---- Cards ---- */ .md-card { border-radius: 12px; padding: 20px 24px; margin: 0 0 16px; } .md-card-elevated { background: var(--md-surface-container-low); box-shadow: var(--md-elevation-1); } .md-card-filled { background: var(--md-surface-container-highest); } .md-card-outlined { background: var(--md-surface); border: 1px solid var(--md-outline-variant); } .md-card h2 { margin: 0 0 12px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px; } .md-card h3 { margin: 24px 0 10px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--md-on-surface-variant); } /* ---- Badges / helper text ---- */ .badge { font-size: 11px; line-height: 16px; color: var(--md-on-secondary-container); background: var(--md-secondary-container); border-radius: 9999px; padding: 1px 8px; flex: none; vertical-align: middle; } .muted { color: var(--md-on-surface-variant); } .helper { margin: 8px 0 4px; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); } .delta-up { color: var(--app-up); } .delta-down { color: var(--md-error); } .delta-na { color: var(--md-on-surface-variant); } .num { text-align: right; font-variant-numeric: tabular-nums; } /* ---- Filled text fields ---- */ .field { display: flex; flex-direction: column; background: var(--md-surface-container-highest); border-radius: 4px 4px 0 0; border-bottom: 1px solid var(--md-on-surface-variant); padding: 8px 16px 9px; } .field:focus-within { border-bottom: 2px solid var(--md-primary); padding-bottom: 8px; } .field > span { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--md-on-surface-variant); } .field:focus-within > span { color: var(--md-primary); } .field input, .field select, .field textarea { border: none; outline: none; background: transparent; font-family: var(--md-font-plain); font-size: 16px; line-height: 24px; color: var(--md-on-surface); padding: 0; width: 100%; min-width: 0; } .field textarea { resize: vertical; } .field input[type="date"] { font-size: 15px; } .field.compact { padding: 8px 12px 9px; } .field.currency { max-width: 140px; } .stacked-form { display: flex; flex-direction: column; gap: 16px; } .stacked-form .actions { display: flex; justify-content: flex-start; gap: 8px; } /* Outlined value inputs (quick update) */ .value-input { width: 100%; min-width: 0; box-sizing: border-box; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--md-font-plain); font-size: 15px; line-height: 22px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--md-outline); background: transparent; color: var(--md-on-surface); outline: none; min-height: 44px; } .value-input:focus { border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); } /* ---- Shell: top app bar ---- */ .topbar { position: sticky; top: 0; z-index: 40; background: var(--md-surface-container); box-shadow: var(--md-elevation-1); } .topbar-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 4px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; margin-right: 20px; } .brand .logo { width: 32px; height: 32px; border-radius: 10px; background: var(--md-primary-container); color: var(--md-on-primary-container); display: inline-flex; align-items: center; justify-content: center; } .brand .name { font-family: var(--md-font-brand); font-size: 22px; line-height: 28px; font-weight: 500; } .tabs { display: flex; align-items: stretch; gap: 4px; height: 64px; } .tab { position: relative; height: 64px; padding: 0 16px; background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; font-family: var(--md-font-plain); font-size: 14px; font-weight: 500; letter-spacing: 0.1px; color: var(--md-on-surface-variant); text-decoration: none; } .tab.active { color: var(--md-primary); } .tab .indicator { position: absolute; bottom: 0; left: 14px; right: 14px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; } .tab.active .indicator { background: var(--md-primary); } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; } .mobile-title { display: none; } .back-btn { display: none; } /* ---- Shell: bottom nav (mobile) ---- */ .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: 80px; background: var(--md-surface-container); display: none; grid-template-columns: repeat(4, 1fr); align-items: center; } .bottomnav a { height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; } .bottomnav .pill { position: relative; width: 64px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--md-on-surface-variant); background: transparent; } .bottomnav a.active .pill { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } .bottomnav .label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--md-on-surface-variant); } .bottomnav a.active .label { color: var(--md-on-surface); font-weight: 700; } /* ---- Content ---- */ .content { max-width: 1160px; margin: 0 auto; padding: 24px 24px 64px; } .page-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .page-head h1 { margin: 0; font-family: var(--md-font-brand); font-size: 28px; line-height: 36px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Layout grids ---- */ .tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .two-col-32 { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; } /* ---- Stat tiles ---- */ .tile { margin: 0; } .tile .tile-label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--md-on-surface-variant); } .tile .tile-value { font-family: var(--md-font-brand); font-size: 36px; line-height: 44px; margin-top: 4px; } .tile .tile-caption { font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); margin-top: 2px; } .hero-card { display: none; background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: 20px; padding: 20px; margin-bottom: 12px; } .hero-card .tile-label { color: inherit; } .hero-card .tile-value { font-size: 40px; line-height: 48px; margin-top: 2px; font-family: var(--md-font-brand); } .hero-card .tile-caption { color: inherit; opacity: 0.8; } /* ---- Chart cards ---- */ .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .card-head h2 { margin: 0; } .chart-wrap { position: relative; height: 300px; } .chart-donut { height: 200px; max-width: 260px; margin: 0 auto 16px; } .range-picker { display: flex; gap: 8px; } .range-option { position: relative; height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--md-outline-variant); background: transparent; color: var(--md-on-surface-variant); font-size: 14px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; } .range-option.selected { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; } /* ---- Data tables (grid rows) ---- */ .table-head { display: grid; gap: 2px 12px; padding: 0 0 6px; border-bottom: 1px solid var(--md-outline-variant); font-size: 11px; font-weight: 500; letter-spacing: 0.5px; color: var(--md-on-surface-variant); text-transform: uppercase; } .table-row { display: grid; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--md-surface-container-high); font-size: 14px; line-height: 20px; } .cols-cat { grid-template-columns: 1fr 100px 68px 68px; } .cols-assets { grid-template-columns: 1fr 104px 64px 64px; } .cols-vals { grid-template-columns: 110px 110px 1fr 40px; } .cols-quick { grid-template-columns: 1fr 120px 150px; } .cols-categories { grid-template-columns: 1fr 90px 60px 72px; } .table-row.clickable { border-radius: 8px; padding: 9px 8px; margin: 0 -8px; text-decoration: none; color: inherit; } .cell-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; } .swatch-row { display: flex; align-items: center; gap: 10px; min-width: 0; } .swatch[data-slot="1"] { background: var(--series-1); } .swatch[data-slot="2"] { background: var(--series-2); } .swatch[data-slot="3"] { background: var(--series-3); } .swatch[data-slot="4"] { background: var(--series-4); } .swatch[data-slot="5"] { background: var(--series-5); } .swatch[data-slot="6"] { background: var(--series-6); } .swatch[data-slot="7"] { background: var(--series-7); } .swatch[data-slot="8"] { background: var(--series-8); } .swatch[data-slot="other"] { background: var(--md-outline); } /* ---- List items (assets) ---- */ .list-item { position: relative; display: flex; align-items: center; gap: 16px; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; min-height: 56px; text-decoration: none; color: inherit; } .list-item .avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; } .avatar.av-0 { background: var(--md-primary-container); color: var(--md-on-primary-container); } .avatar.av-1 { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } .avatar.av-2 { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); } .list-item .body { flex: 1; min-width: 0; } .list-item .body .head-line { display: block; font-size: 16px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-item .body .supp { display: block; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); } .list-item .trailing { text-align: right; flex: none; } .list-item .trailing .value { display: block; font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums; } .list-item .trailing .delta { display: block; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } /* ---- Inline valuation add row (web) ---- */ .val-add-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .val-add-row .field { flex: 1 1 120px; } .val-add-row .md-btn { flex: none; } .sheet-head { display: none; } .sheet-actions { display: none; } /* ---- Dialog ---- */ .dialog-layer { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; } .dialog-layer.open { display: flex; } .scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); } .dialog { position: relative; min-width: 300px; max-width: 420px; margin: 16px; background: var(--md-surface-container-high); color: var(--md-on-surface); border-radius: 28px; padding: 24px; box-shadow: var(--md-elevation-3); } .dialog h2 { margin: 0 0 12px; font-family: var(--md-font-brand); font-size: 24px; line-height: 32px; font-weight: 400; } .dialog p { margin: 0 0 20px; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); } .dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; } .dialog .confirm-btn { color: var(--md-error); } /* ---- Snackbar ---- */ .snackbar { position: fixed; left: 24px; bottom: 24px; z-index: 110; background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); border-radius: 4px; padding: 14px 16px; font-size: 14px; line-height: 20px; box-shadow: var(--md-elevation-3); min-width: 240px; max-width: 480px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1); } .snackbar.show { opacity: 1; transform: none; } /* ---- Account menu ---- */ .account-menu { position: relative; } .account-menu .menu { position: absolute; right: 0; top: 48px; z-index: 70; min-width: 220px; padding: 8px 0; background: var(--md-surface-container); border-radius: 4px; box-shadow: var(--md-elevation-2); display: none; } .account-menu .menu.open { display: block; } .account-menu .menu-email { padding: 8px 16px 10px; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-menu .menu-item { position: relative; display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: 10px 16px; min-height: 44px; font-family: var(--md-font-plain); font-size: 14px; color: var(--md-on-surface); } /* ---- Empty state ---- */ .empty-state { text-align: center; padding: 48px 20px; } .empty-state p { color: var(--md-on-surface-variant); max-width: 480px; margin: 10px auto 16px; } /* ---- Auth pages ---- */ .auth-card { max-width: 480px; margin: 48px auto; } /* ============================================================================ COMPACT (<840px): bottom nav, FABs, bottom sheets, single column ============================================================================ */ @media (max-width: 839px) { .content { padding: 4px 16px 120px; } .topbar { background: var(--md-surface); box-shadow: none; } .topbar-inner { padding: 0 8px; } .brand, .tabs { display: none; } .mobile-title { display: block; flex: 1; font-family: var(--md-font-brand); font-size: 22px; line-height: 28px; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .back-btn { display: inline-flex; } .desktop-only { display: none !important; } .bottomnav { display: grid; } .md-fab { display: inline-flex; } .page-head { display: none; } .md-card { padding: 16px; margin-bottom: 12px; } .tile-row { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .tile-row .tile.hero-source { display: none; } .hero-card { display: block; } .tile .tile-value { font-size: 26px; line-height: 34px; } .two-col, .two-col-32 { grid-template-columns: 1fr; gap: 12px; } .chart-wrap { height: 190px; } .chart-donut { height: 150px; max-width: 200px; margin-bottom: 12px; } /* Tables collapse to stacked rows on the smallest columns */ .cols-cat { grid-template-columns: 1fr 92px 56px 56px; font-size: 13px; } .cols-vals { grid-template-columns: 96px 1fr auto 36px; } .cols-quick { grid-template-columns: 1fr 118px; } .cols-quick .quick-last { display: none; } .table-head.cols-quick { grid-template-columns: 1fr 118px; } /* Add-forms become bottom sheets, opened by the FAB */ .sheetable { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; margin: 0; background: var(--md-surface-container-low); border-radius: 28px 28px 0 0; padding: 8px 24px 28px; max-height: 80%; overflow: auto; box-shadow: var(--md-elevation-3); transform: translateY(105%); transition: transform 350ms cubic-bezier(0.05, 0.7, 0.1, 1); } .sheetable.open { transform: none; } .sheet-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.4); display: none; } .sheet-scrim.open { display: block; } .sheet-head { display: flex; flex-direction: column; align-items: stretch; } .sheet-head .drag-handle { align-self: center; width: 32px; height: 4px; border-radius: 2px; background: var(--md-outline-variant); margin: 6px 0 10px; } .sheet-head h2 { margin: 0 0 16px; font-family: var(--md-font-brand); font-size: 24px; line-height: 32px; font-weight: 400; } .sheetable > h2 { display: none; } .sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; } .sheetable .field.currency { max-width: 120px; } .val-add-row { flex-direction: column; align-items: stretch; } .val-add-row .field { flex: none; } /* Snackbar clears the bottom nav */ .snackbar { left: 16px; right: 16px; bottom: 92px; min-width: 0; } /* Mobile list rows get comfier */ .list-item { padding: 8px; gap: 12px; } .list-item .body .head-line { font-size: 15px; line-height: 22px; } .list-item .body .supp { font-size: 13px; line-height: 18px; } .list-item .trailing .value { font-size: 15px; line-height: 22px; } .list-item .trailing .delta { font-size: 11px; line-height: 15px; } } @media (min-width: 840px) { .mobile-only { display: none !important; } }