/* ============================================
Stripi-Inspired Design System for Xide
(file kept as google-style.css for compat)
See DESIGN.md for the full token spec.
Note: Inter is intentionally NOT @import-ed here.
@import is a sequential blocking request that stalls
first paint. Pages can choose to Inter in their
own ; otherwise the system stack below renders
instantly and looks correct in the Stripi spec.
============================================ */
/* ==================== CSS Variables ==================== */
:root {
/* ---- Stripi brand palette (canonical names) ---- */
--stripi-primary: #533afd;
--stripi-primary-deep: #4434d4;
--stripi-primary-press: #2e2b8c;
--stripi-primary-soft: #665efd;
--stripi-primary-subdued: #b9b9f9;
--stripi-primary-bg: #eeebff;
--stripi-brand-dark-900: #1c1e54;
--stripi-ink: #0d253d;
--stripi-ink-secondary: #273951;
--stripi-ink-mute: #64748d;
--stripi-ink-mute-2: #61718a;
--stripi-on-primary: #ffffff;
--stripi-canvas: #ffffff;
--stripi-canvas-soft: #f6f9fc;
--stripi-canvas-cream: #f5e9d4;
--stripi-hairline: #e3e8ee;
--stripi-hairline-input: #a8c3de;
--stripi-ruby: #ea2261;
--stripi-magenta: #f96bee;
--stripi-lemon: #9b6829;
--stripi-shadow-blue: 0, 55, 112;
/* ---- Brand-aliased "g-*" tokens (every page reads these) ---- */
--g-blue: var(--stripi-primary);
--g-blue-hover: var(--stripi-primary-deep);
--g-blue-dark: var(--stripi-primary-press);
--g-blue-light: var(--stripi-primary-bg);
--g-green: #1f9d55;
--g-green-light: #e3f7ec;
--g-red: var(--stripi-ruby);
--g-red-light: #fde6ee;
--g-yellow: #b87b07;
--g-yellow-light: #fbf2db;
/* ---- Semantic text/surface tokens ---- */
--text-primary: var(--stripi-ink);
--text-secondary: var(--stripi-ink-mute);
--text-disabled: #a4afc1;
--text-link: var(--stripi-primary);
--text-on-primary: var(--stripi-on-primary);
--text-color: var(--text-primary); /* alias */
--text-muted: var(--text-secondary); /* alias */
--bg-primary: var(--stripi-canvas);
--bg-secondary: var(--stripi-canvas-soft);
--bg-tertiary: #eef3f8;
--bg-hover: rgba(83, 58, 253, 0.06);
--bg-active: rgba(83, 58, 253, 0.10);
--bg-color: var(--bg-primary); /* alias */
--surface: var(--bg-secondary); /* alias */
--card-bg: var(--bg-primary); /* alias */
--border-light: var(--stripi-hairline);
--border-medium: var(--stripi-hairline-input);
--border-focus: var(--stripi-primary);
--border-color: var(--border-light); /* alias */
--primary-color: var(--stripi-primary); /* alias */
/* ---- Shadows ---- */
--shadow-sm: 0 1px 3px rgba(var(--stripi-shadow-blue), 0.08);
--shadow-md: 0 1px 3px rgba(var(--stripi-shadow-blue), 0.08), 0 8px 24px rgba(var(--stripi-shadow-blue), 0.06);
--shadow-lg: 0 8px 32px rgba(var(--stripi-shadow-blue), 0.10), 0 2px 8px rgba(var(--stripi-shadow-blue), 0.04);
--shadow-xl: 0 16px 48px rgba(var(--stripi-shadow-blue), 0.12), 0 4px 12px rgba(var(--stripi-shadow-blue), 0.06);
--shadow-card: var(--shadow-sm);
/* ---- Spacing (8px base, with sub-tokens) ---- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* ---- Border radii (Stripi uses pill for buttons, lg for cards) ---- */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* ---- Typography ---- */
--font-family: 'Inter', 'Sohne', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display', 'Segoe UI', 'SF Pro Display', system-ui, Roboto, sans-serif;
--font-mono: 'SF Mono', Consolas, 'Courier New', monospace;
--text-xs: 11px;
--text-sm: 13px;
--text-base: 15px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 22px;
--text-2xl: 28px;
--text-3xl: 36px;
--text-4xl: 48px;
--text-5xl: 56px;
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--leading-tight: 1.15;
--leading-normal: 1.4;
--leading-relaxed: 1.6;
/* ---- Motion ---- */
--transition-fast: 0.12s ease;
--transition-normal: 0.2s ease;
--transition-slow: 0.32s ease;
/* ---- z-index ---- */
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-backdrop: 400;
--z-modal: 500;
--z-toast: 550;
--z-tooltip: 600;
}
/* ==================== Dark mode ==================== */
[data-theme="dark"] {
/* Brighter text for high contrast on dark surfaces. */
--text-primary: #f4f7ff;
--text-secondary: #b4c0d6;
--text-disabled: #6e7a92;
--text-link: #a195ff;
--text-color: var(--text-primary);
--text-muted: var(--text-secondary);
--bg-primary: #0d1126;
--bg-secondary: #181d36;
--bg-tertiary: #232a48;
--bg-hover: rgba(161, 149, 255, 0.12);
--bg-active: rgba(161, 149, 255, 0.20);
--bg-color: var(--bg-primary);
--surface: var(--bg-secondary);
--card-bg: var(--bg-secondary);
--border-light: #2a3454;
--border-medium: #3a4870;
--border-color: var(--border-light);
--g-blue: #a195ff;
--g-blue-hover: #beb6ff;
--g-blue-dark: #8478f0;
--g-blue-light: rgba(161, 149, 255, 0.18);
--g-green: #4ade80;
--g-green-light: rgba(74, 222, 128, 0.18);
--g-red: #ff7a9b;
--g-red-light: rgba(255, 122, 155, 0.18);
--g-yellow: #ffd166;
--g-yellow-light: rgba(255, 209, 102, 0.18);
--primary-color: var(--g-blue);
--stripi-canvas-cream: #2a2418;
--stripi-hairline: #2a3454;
--stripi-hairline-input: #3a4870;
--stripi-ink: #f4f7ff;
--stripi-ink-secondary: #c8d2e6;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
--shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-card: var(--shadow-sm);
}
/* In dark mode, weight 300 reads too thin on small body text. Bump body to 400. */
[data-theme="dark"] body { font-weight: var(--font-normal); }
[data-theme="dark"] .g-input,
[data-theme="dark"] .g-select,
[data-theme="dark"] .g-textarea,
[data-theme="dark"] p { font-weight: var(--font-normal); }
/* Tables: data-dense surfaces need readable weight in BOTH modes.
Weight 300 makes 13px / 14px numerics blur on light surfaces too. */
.g-table td,
.g-table th,
.data-table td,
.data-table th,
.data-table.compact td,
.data-table.compact th,
.stocks-table td,
.stocks-table th,
.sim-detail-table td,
.sim-detail-table th,
.stock-list-table td,
.stock-list-table th,
table.compact td,
table.compact th {
font-weight: var(--font-normal);
}
/* Heads: keep slight emphasis */
.g-table th,
.data-table th,
.data-table.compact th,
.stocks-table th,
.sim-detail-table th,
.stock-list-table th {
font-weight: var(--font-medium);
}
/* Symbol links and money cells get extra weight to read at 13/14px */
.g-stock-symbol,
.symbol-link,
a.symbol-link,
.g-stock-price {
font-weight: var(--font-semibold);
}
/* Numeric value cells (gain/loss, change %, ROI, market cap) */
.g-table .g-value-positive,
.g-table .g-value-negative,
.data-table .change.positive,
.data-table .change.negative,
.stocks-table .g-value-positive,
.stocks-table .g-value-negative {
font-weight: var(--font-medium);
}
/* ==================== Reset & Base ==================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }
body {
margin: 0;
font-family: var(--font-family);
font-weight: var(--font-light);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--text-primary);
background-color: var(--bg-primary);
font-feature-settings: "ss01", "cv11";
letter-spacing: -0.01em;
transition: background-color var(--transition-normal), color var(--transition-normal);
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: var(--font-light);
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: var(--leading-tight);
}
h1 { font-size: var(--text-4xl); letter-spacing: -0.04em; }
h2 { font-size: var(--text-3xl); letter-spacing: -0.03em; }
h3 { font-size: var(--text-2xl); letter-spacing: -0.025em; }
h4 { font-size: var(--text-xl); letter-spacing: -0.02em; }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }
p { margin: 0 0 var(--space-4) 0; color: var(--text-primary); }
a {
color: var(--text-link);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover { color: var(--stripi-primary-deep); text-decoration: underline; }
[data-theme="dark"] a:hover { color: #a195ff; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea, button {
font-family: inherit;
font-size: inherit;
}
::selection { background: var(--stripi-primary-subdued); color: var(--stripi-ink); }
[data-theme="dark"] ::selection { background: rgba(138, 125, 255, 0.4); color: #fff; }
/* ==================== Utility text colors ==================== */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--g-green); }
.text-danger { color: var(--g-red); }
.text-warning { color: var(--g-yellow); }
.text-info { color: var(--g-blue); }
/* ==================== Layout ==================== */
.g-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-6);
width: 100%;
}
.g-container-sm { max-width: 640px; }
.g-container-md { max-width: 768px; }
.g-container-lg { max-width: 1024px; }
.g-container-xl { max-width: 1280px; }
.g-container-full{ max-width: 100%; }
.g-page {
min-height: 100vh;
background-color: var(--bg-primary);
display: flex;
flex-direction: column;
}
.g-main { flex: 1; }
/* ==================== Header ==================== */
.g-header {
background-color: var(--bg-primary);
border-bottom: 1px solid var(--border-light);
position: sticky;
top: 0;
z-index: var(--z-sticky);
backdrop-filter: saturate(180%) blur(12px);
}
.g-header-inner {
max-width: 1280px;
margin: 0 auto;
padding: var(--space-3) var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}
.g-logo {
display: flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
color: var(--text-primary);
font-weight: var(--font-medium);
}
.g-logo:hover { text-decoration: none; }
.g-logo-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--stripi-primary) 0%, var(--stripi-primary-soft) 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-bold);
font-size: 16px;
letter-spacing: -0.02em;
box-shadow: 0 2px 8px rgba(83, 58, 253, 0.32);
}
.g-logo-text {
font-size: var(--text-md);
font-weight: var(--font-medium);
letter-spacing: -0.02em;
}
.g-logo-text span { color: var(--stripi-primary); font-weight: var(--font-semibold); }
.g-nav {
display: flex;
align-items: center;
gap: var(--space-1);
}
.g-nav-link {
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
color: var(--text-secondary);
font-size: var(--text-sm);
font-weight: var(--font-medium);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-2);
transition: all var(--transition-fast);
}
.g-nav-link:hover {
background: var(--bg-hover);
color: var(--text-primary);
text-decoration: none;
}
.g-nav-link.active {
background: var(--bg-active);
color: var(--stripi-primary);
}
.g-nav-link i { font-size: 13px; }
.g-user-menu { position: relative; }
.g-user-btn {
display: flex;
align-items: center;
gap: var(--space-2);
background: transparent;
border: 1px solid var(--border-light);
padding: 4px 12px 4px 4px;
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition-fast);
}
.g-user-btn:hover { background: var(--bg-hover); border-color: var(--border-medium); }
.g-user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--stripi-primary) 0%, var(--stripi-primary-soft) 100%);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: var(--font-semibold);
font-size: 12px;
}
.g-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 240px;
background: var(--bg-primary);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-2);
display: none;
z-index: var(--z-dropdown);
animation: dropdownIn 0.18s ease;
}
.g-dropdown.show { display: block; }
@keyframes dropdownIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.g-dropdown-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: var(--text-sm);
text-decoration: none;
transition: background var(--transition-fast);
}
.g-dropdown-item:hover { background: var(--bg-hover); text-decoration: none; }
.g-dropdown-item i { width: 16px; color: var(--text-secondary); font-size: 13px; }
.g-dropdown-divider {
height: 1px;
background: var(--border-light);
margin: var(--space-2) 0;
}
.g-theme-toggle {
width: 36px;
height: 36px;
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.g-theme-toggle:hover {
background: var(--bg-hover);
color: var(--text-primary);
border-color: var(--border-medium);
}
.g-mobile-menu-btn {
display: none;
width: 40px;
height: 40px;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
background: transparent;
color: var(--text-primary);
cursor: pointer;
align-items: center;
justify-content: center;
}
/* ==================== Buttons ==================== */
.g-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 8px 16px;
border-radius: var(--radius-full);
border: 1px solid transparent;
background: transparent;
color: var(--text-primary);
font-size: var(--text-base);
font-weight: var(--font-medium);
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
letter-spacing: -0.01em;
min-height: 36px;
}
.g-btn:hover { text-decoration: none; }
.g-btn:focus-visible { outline: 2px solid var(--stripi-primary); outline-offset: 2px; }
.g-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.g-btn-primary {
background: var(--stripi-primary);
color: var(--stripi-on-primary);
}
.g-btn-primary:hover { background: var(--stripi-primary-deep); color: #fff; }
.g-btn-primary:active { background: var(--stripi-primary-press); }
.g-btn-secondary {
background: var(--bg-primary);
color: var(--stripi-primary);
border: 1px solid var(--border-light);
}
.g-btn-secondary:hover {
background: var(--bg-hover);
border-color: var(--stripi-primary-soft);
color: var(--stripi-primary-deep);
}
.g-btn-text {
background: transparent;
color: var(--text-primary);
padding: 8px 12px;
}
.g-btn-text:hover { background: var(--bg-hover); color: var(--stripi-primary); }
.g-btn-danger { background: var(--stripi-ruby); color: #fff; }
.g-btn-danger:hover { background: #c91a52; color: #fff; }
.g-btn-success { background: var(--g-green); color: #fff; }
.g-btn-success:hover { filter: brightness(0.92); color: #fff; }
.g-btn-icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--radius-full);
background: transparent;
border: 1px solid var(--border-light);
color: var(--text-secondary);
}
.g-btn-icon:hover {
background: var(--bg-hover);
color: var(--stripi-primary);
border-color: var(--stripi-primary-soft);
}
.g-btn-sm { padding: 6px 12px; font-size: var(--text-sm); min-height: 30px; }
.g-btn-lg { padding: 12px 24px; font-size: var(--text-md); min-height: 44px; }
.g-btn-block { width: 100%; }
/* ==================== Forms ==================== */
.g-form-group { margin-bottom: var(--space-4); }
.g-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-primary);
margin-bottom: var(--space-2);
letter-spacing: -0.01em;
}
.g-input, .g-select, .g-textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--stripi-hairline-input);
border-radius: var(--radius-sm);
background: var(--bg-primary);
color: var(--text-primary);
font-size: var(--text-base);
font-weight: var(--font-light);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
letter-spacing: -0.01em;
}
/* Make every