/* ============================================================ WealthWorld design system — logo-driven rebrand Brand: royal blue (#0B4DA5) + gold checks (#F5A81C → #FFD84D) Typography: Poppins (headings/brand) + IBM Plex Sans (body) Themes: light (default, matches the logo canvas) and dark, switched via [data-bs-theme] on . ============================================================ */ :root, [data-bs-theme="light"] { --background: #F4F6FB; --surface: #FFFFFF; --surface-2: #EDF1F9; --border: rgba(11, 77, 165, 0.14); --border-strong: rgba(11, 77, 165, 0.38); --foreground: #14243F; --muted-foreground: #5A6A85; --brand: #0B4DA5; /* royal blue from the logo */ --brand-contrast: #FFFFFF; --accent: #F5A81C; /* gold check */ --accent-2: #FFD84D; /* light gold check */ --accent-contrast: #1B2A4A; --ring: rgba(11, 77, 165, 0.30); --destructive: #C0564C; --destructive-soft: #B54338; --success: #2E8B7A; --radius: 0.85rem; --shadow: 0 8px 24px rgba(20, 36, 63, 0.08); /* chart tokens */ --ww-chart-text: #5A6A85; --ww-chart-grid: rgba(11, 77, 165, 0.10); --ww-c1: #0B4DA5; --ww-c2: #F5A81C; --ww-c3: #3E7BD6; --ww-c4: #FFD84D; --ww-c5: #2E8B7A; --ww-c6: #8A63B8; --ww-c7: #D97742; --ww-c8: #5A93A8; --ww-c9: #B05A78; --ww-c10: #7C8AA5; --ww-c11: #C7A008; --ww-c12: #4E6E5D; --ww-c13: #7A5C3E; --ww-c14: #3E6E8C; --ww-c15: #A34E9E; --ww-c16: #6B7280; } [data-bs-theme="dark"] { --background: #0A182E; --surface: #102341; --surface-2: #172C50; --border: rgba(126, 168, 240, 0.16); --border-strong: rgba(126, 168, 240, 0.40); --foreground: #E9EEF8; --muted-foreground: #9DAECB; --brand: #7FA9F0; /* lifted blue for dark contrast */ --brand-contrast: #0A182E; --accent: #FFC53D; --accent-2: #FFDf70; --accent-contrast: #1B2A4A; --ring: rgba(255, 197, 61, 0.35); --destructive: #E58A80; --destructive-soft: #C0564C; --success: #57C2AE; --shadow: 0 10px 30px rgba(2, 8, 20, 0.55); --ww-chart-text: #B9C6DE; --ww-chart-grid: rgba(126, 168, 240, 0.12); --ww-c1: #6FA0EC; --ww-c2: #FFC53D; --ww-c3: #9DBDF2; --ww-c4: #FFDF70; --ww-c5: #57C2AE; --ww-c6: #B49AE0; --ww-c7: #EC9A6A; --ww-c8: #7FB4C9; --ww-c9: #D98BA5; --ww-c10: #9AA9C4; --ww-c11: #E8C84A; --ww-c12: #8FB8A3; --ww-c13: #C9A47C; --ww-c14: #7FB0D0; --ww-c15: #D28BCB; --ww-c16: #A8B2C2; } html, body { background: var(--background); color: var(--foreground); font-family: 'IBM Plex Sans', system-ui, sans-serif; min-height: 100vh; transition: background-color .2s ease, color .2s ease; } body { display: flex; flex-direction: column; } main { flex: 1; } h1, h2, h3, .ww-display, .ww-wordmark { font-family: 'Poppins', 'IBM Plex Sans', sans-serif; font-weight: 600; letter-spacing: 0.005em; } h1 { font-size: 1.85rem; color: var(--brand); } h2, h3 { color: var(--foreground); } .ww-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } [data-bs-theme="light"] .ww-eyebrow { color: #C57F00; } /* darker gold for AA contrast on light */ .ww-muted { color: var(--muted-foreground); } .ww-num { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; } /* ---------- navbar / footer ---------- */ .ww-navbar { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .ww-brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; } .ww-brand .ww-logo { width: 34px; height: 34px; flex: none; } .ww-wordmark { color: var(--brand) !important; font-size: 1.15rem; line-height: 1; } .ww-user { color: var(--muted-foreground); font-size: .9rem; } .ww-footer { border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: .85rem; } /* theme toggle */ .ww-theme-toggle { border: 1px solid var(--border-strong); background: transparent; color: var(--foreground); border-radius: 999px; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; font-size: 1rem; line-height: 1; } .ww-theme-toggle:hover { background: var(--surface-2); } /* ---------- cards ---------- */ .card, .ww-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--foreground); } .card-header { background: transparent; border-bottom: 1px solid var(--border); font-family: 'Poppins', sans-serif; } .ww-stat { background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; } .ww-stat .label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); } .ww-stat .value { font-family: 'IBM Plex Mono', monospace; font-size: 1.3rem; color: var(--brand); } /* ---------- buttons ---------- */ .btn-gold { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-contrast); font-weight: 600; border-radius: calc(var(--radius) - 3px); } .btn-gold:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-contrast); } .btn-outline-gold { border: 1px solid var(--border-strong); color: var(--brand); background: transparent; border-radius: calc(var(--radius) - 3px); } .btn-outline-gold:hover { background: var(--surface-2); color: var(--brand); border-color: var(--brand); } .btn:focus-visible { box-shadow: 0 0 0 3px var(--ring); } /* ---------- forms ---------- */ .form-control, .form-select { background: var(--surface); border: 1px solid var(--border-strong); color: var(--foreground); border-radius: calc(var(--radius) - 5px); } .form-control::placeholder { color: var(--muted-foreground); opacity: .8; } .form-control:focus, .form-select:focus { background: var(--surface); color: var(--foreground); border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); } .form-label { color: var(--muted-foreground); font-size: .9rem; } .form-text { color: var(--muted-foreground); } .text-danger { color: var(--destructive) !important; } /* ---------- tables ---------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--foreground); border-color: var(--border); } .table thead th { color: var(--muted-foreground); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--border-strong); } .table td { border-color: var(--border); vertical-align: middle; } .table-hover tbody tr:hover { background: var(--surface-2); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--foreground); } /* ---------- badges ---------- */ .badge-bracket-Low { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 45%, transparent); } .badge-bracket-Medium { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-contrast); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); } [data-bs-theme="dark"] .badge-bracket-Medium { color: var(--accent); } .badge-bracket-High { background: color-mix(in srgb, var(--destructive-soft) 15%, transparent); color: var(--destructive); border: 1px solid color-mix(in srgb, var(--destructive-soft) 45%, transparent); } .badge-mode-SIP { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); } .badge-mode-Lumpsum { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-contrast); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); } [data-bs-theme="dark"] .badge-mode-Lumpsum { color: var(--accent); } /* ---------- wizard stepper ---------- */ .ww-step { display: flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-foreground); font-size: .82rem; background: var(--surface); } .ww-step-index { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid currentColor; font-family: 'IBM Plex Mono', monospace; font-size: .7rem; } .ww-step.active { border-color: var(--brand); color: var(--brand); } .ww-step.done { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); } /* ---------- option cards (screen 6) ---------- */ .ww-option { transition: transform .15s ease, border-color .15s ease; cursor: pointer; height: 100%; } .ww-option:hover { transform: translateY(-3px); border-color: var(--brand); } .ww-option.recommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); } .ww-ribbon { position: absolute; top: -0.7rem; left: 1rem; background: var(--accent); color: var(--accent-contrast); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; } /* ---------- login hero ---------- */ .ww-login-wrap { min-height: 70vh; display: grid; place-items: center; } .ww-login-card { max-width: 470px; width: 100%; padding: 2.5rem; text-align: center; } .ww-login-card .ww-logo { width: 72px; height: 72px; margin: 0 auto 1rem; display: block; } .btn-google { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: .7rem 1rem; background: #fff; color: #1f2430; font-weight: 600; border-radius: calc(var(--radius) - 3px); border: 1px solid var(--border-strong); } .btn-google:hover { background: #f1f3f7; color: #1f2430; } .ww-alert { border-radius: var(--radius); } .alert-danger { background: color-mix(in srgb, var(--destructive-soft) 12%, var(--surface)); color: var(--destructive); border: 1px solid color-mix(in srgb, var(--destructive-soft) 40%, transparent); } /* ---------- global busy loader ---------- */ .ww-loader { position: fixed; inset: 0; z-index: 2000; display: none; place-items: center; background: color-mix(in srgb, var(--background) 82%, transparent); backdrop-filter: blur(4px); } .ww-loader.show { display: grid; } .ww-loader-box { text-align: center; } .ww-spinner { width: 3.2rem; height: 3.2rem; margin: 0 auto 1rem; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: ww-spin 0.8s linear infinite; } @keyframes ww-spin { to { transform: rotate(360deg); } } .ww-loader-msg { font-family: 'Poppins', sans-serif; color: var(--foreground); font-size: 1.05rem; } .ww-loader-sub { color: var(--muted-foreground); font-size: .85rem; margin-top: .25rem; } /* ---------- motion & print ---------- */ @media (prefers-reduced-motion: reduce) { .ww-option { transition: none; } .ww-spinner { animation-duration: 2s; } html, body { transition: none; } } @media print { :root, [data-bs-theme="dark"], [data-bs-theme="light"] { --background: #fff; --surface: #fff; --surface-2: #fff; --foreground: #111; --muted-foreground: #444; --brand: #0B4DA5; } .ww-navbar .ww-theme-toggle, .ww-footer, .btn, form, .ww-loader { display: none !important; } }