/* ── Reset ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Prevent any element from making the page wider than the viewport. This stops the browser from auto-zooming and going off-center on mobile. Uses `clip` rather than `hidden` — `overflow-x: hidden` on makes iOS Safari re-anchor `position: fixed` descendants (the mobile tab bar, install banner, sidebar overlay) to the full document instead of the viewport, so they end up scrolled far below the fold on any page taller than one screen. `clip` blocks the same overflow without establishing that scroll container. */ html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overflow-x: clip; max-width: 100%; } /* ── Theme tokens ───────────────────────────────────────────────────────────── */ :root { --bg: #131009; --surface: #1d1710; --surface2: #261e14; --border: rgba(255,255,255,.06); --text: #ede3d4; --muted: #9a8468; --accent: #c8853a; --green: #5aad6f; --yellow: #d4a030; --red: #c85c50; --radius: 10px; } /* ── Base ───────────────────────────────────────────────────────────────────── */ body { background: var(--bg); color: var(--text); font-family: 'Outfit', -apple-system, sans-serif; font-size: 14px; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-top: calc(58px + env(safe-area-inset-top, 0px)); /* compensate for fixed header + iOS notch/island */ } /* ── Header / Nav ───────────────────────────────────────────────────────────── */ header { display: flex; align-items: center; padding: 0 28px; padding-top: env(safe-area-inset-top, 0px); height: calc(58px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--border); background: linear-gradient(135deg, var(--surface) 0%, #17120a 100%); flex-shrink: 0; position: fixed; top: 0; left: 0; right: 0; z-index: 201; /* above sidebar (200) and sidebar overlay (199) */ } .nav-brand { font-size: 18px; font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -.2px; font-family: 'Lora', serif; margin-right: 24px; } .nav-brand span { color: var(--accent); } .nav-link { display: flex; align-items: center; height: 58px; padding: 0 14px; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s; } .nav-link:hover { color: var(--text); } .nav-link.active { color: var(--text); border-bottom-color: var(--accent); } .nav-spacer { flex: 1; } /* ── Sidebar (fixed, always visible) ───────────────────────────────────────── */ .sidebar { position: fixed; left: 0; top: calc(58px + env(safe-area-inset-top, 0px)); width: 216px; height: calc(100vh - 58px - env(safe-area-inset-top, 0px)); height: calc(100dvh - 58px - env(safe-area-inset-top, 0px)); background: var(--surface); border-right: 1px solid var(--border); padding: 14px 10px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; z-index: 200; box-shadow: 4px 0 20px rgba(0,0,0,.3); } /* Push content past the fixed sidebar, fill remaining width */ .sidebar ~ main, .sidebar ~ footer.site-footer, .sidebar ~ #save-bar { margin-left: 216px; margin-right: 0; max-width: none; } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: color .15s, background .15s; white-space: nowrap; } .sidebar-link:hover { color: var(--text); background: rgba(255,255,255,.02); } .sidebar-link.active { color: var(--accent); background: rgba(200,133,58,.11); font-weight: 600; } .sidebar-link.sub { padding: 7px 12px; font-size: 12.5px; font-weight: 400; } .sidebar-link.sub.active { font-weight: 500; } .sidebar-icon { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; } .sidebar-icon svg { width: 100%; height: 100%; } .sidebar-label { overflow: hidden; text-overflow: clip; } .sidebar-divider { height: 1px; background: var(--border); margin: 5px 2px; flex-shrink: 0; } .sidebar-section { display: flex; flex-direction: column; gap: 1px; } .sidebar-section-label { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); opacity: .55; padding: 2px 12px 4px; pointer-events: none; } /* ── Sidebar trial / plan block ───────────────────────────────────────────── Pinned to the bottom of the sidebar. Flat by design: a hairline rule and type, no panel or fill — it should read as part of the sidebar, not as a card sitting inside it. Rendered only for trialing and lapsed users. */ .sidebar-plan { margin-top: auto; flex-shrink: 0; display: flex; align-items: center; padding: 12px 12px 2px; border-top: 1px solid var(--border); text-decoration: none; } .sidebar-plan[hidden] { display: none; } .sidebar-plan-full { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sidebar-plan-label { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); opacity: .55; white-space: nowrap; } .sidebar-plan-cta { font-size: 12.5px; font-weight: 500; color: var(--accent); white-space: nowrap; } .sidebar-plan:hover .sidebar-plan-cta { text-decoration: underline; } .sidebar-plan:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; } .sidebar-plan.urgent .sidebar-plan-label { color: var(--yellow); opacity: .9; } /* Collapsed-rail token — only ever visible in the desktop icon rail. */ .sidebar-plan-rail { display: none; } /* ── Sidebar rail (desktop only) ─────────────────────────────────────────────── Collapses to an icon-only rail; widens to show labels when the pointer (or keyboard focus) is on it. The rail overlays content rather than pushing it — main's margin-left stays fixed at the collapsed width in both states. */ @media (min-width: 769px) { .sidebar { width: 64px; overflow-x: hidden; transition: width .16s ease; } .sidebar:hover, .sidebar:focus-within { width: 236px; box-shadow: 6px 0 28px rgba(0,0,0,.45); } .sidebar ~ main, .sidebar ~ footer.site-footer, .sidebar ~ #save-bar { margin-left: 64px; } /* Collapsed: no gap reserved for the hidden label, icon sits centered. */ .sidebar-link { gap: 0; } .sidebar:hover .sidebar-link, .sidebar:focus-within .sidebar-link { gap: 12px; } .sidebar-label { opacity: 0; max-width: 0; overflow: hidden; transition: opacity .1s ease, max-width .16s ease; } .sidebar-section-label { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; transition: opacity .1s ease, max-height .16s ease; } .sidebar:hover .sidebar-label, .sidebar:focus-within .sidebar-label { opacity: 1; max-width: 160px; transition-delay: .05s; } .sidebar:hover .sidebar-section-label, .sidebar:focus-within .sidebar-section-label { opacity: 1; max-height: 20px; padding-top: 2px; padding-bottom: 4px; transition-delay: .05s; } /* Trial block in the rail: the countdown collapses to a bare numeral ("9d"), carrying the same optical weight as the icons above it, then unfolds into the full label on hover using the same machinery as .sidebar-label. */ .sidebar-plan { padding: 12px 0 2px; justify-content: center; transition: padding .16s ease; } .sidebar-plan-rail { display: block; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-align: center; color: var(--accent); opacity: 1; max-width: 40px; overflow: hidden; transition: opacity .1s ease, max-width .16s ease; } .sidebar-plan.urgent .sidebar-plan-rail { color: var(--yellow); } .sidebar-plan-full { opacity: 0; max-width: 0; overflow: hidden; transition: opacity .1s ease, max-width .16s ease; } .sidebar:hover .sidebar-plan, .sidebar:focus-within .sidebar-plan { padding: 12px 12px 2px; justify-content: flex-start; } .sidebar:hover .sidebar-plan-rail, .sidebar:focus-within .sidebar-plan-rail { opacity: 0; max-width: 0; } .sidebar:hover .sidebar-plan-full, .sidebar:focus-within .sidebar-plan-full { opacity: 1; max-width: 180px; transition-delay: .05s; } } @media (prefers-reduced-motion: reduce) { .sidebar-plan, .sidebar-plan-rail, .sidebar-plan-full { transition: none; } } /* ── Nav ticker search ──────────────────────────────────────────────────────── */ .nav-search { position: relative; display: flex; align-items: center; margin-right: 10px; } .nav-search input { background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 13px; font-family: 'Outfit', sans-serif; padding: 6px 58px 6px 12px; width: 180px; outline: none; transition: border-color .15s, width .2s; } .nav-search input::placeholder { color: var(--muted); } .nav-search input:focus { border-color: var(--accent); width: 214px; } .nav-search-kbd { position: absolute; right: 30px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; font-style: normal; font-weight: 400; letter-spacing: .02em; color: var(--muted); opacity: .55; background: none; border: none; padding: 0; line-height: 1; pointer-events: none; transition: opacity .15s; } .nav-search input:not(:placeholder-shown) ~ .nav-search-kbd { opacity: 0; } .nav-search button { position: absolute; right: 6px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0; line-height: 1; transition: color .15s; } .nav-search button:hover { color: var(--accent); } .nav-search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 260px; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 8px 28px rgba(0,0,0,.5); z-index: 200; overflow: hidden; } .nav-search-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; transition: background .1s; text-decoration: none; } .nav-search-item:hover, .nav-search-item.active { background: rgba(200,133,58,.1); } .nav-search-symbol { font-weight: 700; font-size: 13px; color: var(--accent); min-width: 54px; flex-shrink: 0; } .nav-search-name { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ticker-logo { width: 22px; height: 22px; border-radius: 50%; background: var(--surface2); flex-shrink: 0; overflow: hidden; /* Most brand logos from the assets API carry an opaque white or brand-color square background (baked into the SVG itself, not transparent), so on a dark row they read as a bright foreign patch rather than an icon. A hairline ring contains that patch as a deliberate "badge" instead. */ border: 1px solid var(--border); } .ticker-logo-hero { width: 40px; height: 40px; } .nav-search-type { margin-left: auto; font-size: 10px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; } .nav-search-empty { padding: 10px 14px; font-size: 12px; color: var(--muted); text-align: center; } /* ── User menu ──────────────────────────────────────────────────────────────── */ .user-menu-wrap { position: relative; margin-left: 12px; } .user-avatar-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border); color: var(--accent); font-size: 13px; font-weight: 700; font-family: 'Outfit', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; } .user-avatar-btn:hover { border-color: var(--accent); background: rgba(200,133,58,.1); } .user-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.5); z-index: 300; overflow: hidden; } .user-dropdown.open { display: block; } .user-dropdown-header { padding: 13px 16px 11px; } .user-dropdown-email { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; color: var(--text); cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: 'Outfit', sans-serif; text-decoration: none; transition: background .1s; } .user-dropdown-item:hover { background: rgba(200,133,58,.08); color: var(--accent); } .user-dropdown-item svg { opacity: .6; flex-shrink: 0; } .user-dropdown-divider { border-top: 1px solid var(--border); margin: 4px 0; } .user-dropdown-item.danger { color: var(--muted); } .user-dropdown-item.danger:hover { background: rgba(200,92,80,.08); color: var(--red); } .user-dropdown-cur-toggle { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; font-size: 13px; color: var(--text); cursor: pointer; transition: background .15s; user-select: none; } .user-dropdown-cur-toggle:hover { background: rgba(200,133,58,.06); } .cur-val { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); } .cur-chevron { font-size: 11px; transition: transform .2s; display: inline-block; } .user-dropdown-cur-toggle.open .cur-chevron { transform: rotate(90deg); } .user-dropdown-cur-picker { display: none; flex-wrap: wrap; gap: 4px; padding: 4px 12px 10px; } .user-dropdown-cur-picker.open { display: flex; } .cur-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: border-color .15s, color .15s, background .15s; line-height: 1.4; } .cur-pill:hover { border-color: var(--accent); color: var(--accent); } .cur-pill.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } /* ── Footer ─────────────────────────────────────────────────────────────────── */ footer.site-footer { border-top: 1px solid var(--border); padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--muted); margin-top: auto; } footer.site-footer a { color: var(--muted); text-decoration: none; transition: color .15s; } footer.site-footer a:hover { color: var(--accent); } footer.site-footer .footer-links { display: flex; gap: 18px; } /* ── Value state classes ────────────────────────────────────────────────────── */ .val-good { color: var(--green); } .val-warn { color: var(--yellow); } .val-na { color: var(--muted); } /* ── Skeleton loader ────────────────────────────────────────────────────────── */ .skeleton { background: var(--border); border-radius: 4px; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } /* ── Status bar — smooth expand/collapse, no layout jump ────────────────────── */ /* body #status has specificity (1,0,1) — beats per-page #status at (1,0,0) */ body #status { display: block; /* always in flow; use max-height instead of display:none */ overflow: hidden; max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; padding-left: 16px; padding-right: 16px; margin: 0; border-radius: var(--radius); font-size: 13px; transition: max-height .3s ease, opacity .22s ease, padding-top .3s ease, padding-bottom .3s ease; } body #status.error { max-height: 48px; opacity: 1; padding-top: 10px; padding-bottom: 10px; background: rgba(248,81,73,.12); color: var(--red); } /* ── Toast notification ─────────────────────────────────────────────────────── */ #toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 20px; padding: 9px 16px; border-radius: 8px; font-size: 13px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 999; } #toast.show { opacity: 1; } #toast.toast-ok { border-color: var(--green); color: var(--green); } #toast.toast-err { border-color: var(--red); color: var(--red); } #toast.toast-warn { border-color: var(--accent); color: var(--accent); } /* ── Install app banner (Add to Home Screen prompt) ───────────────────────────── */ #install-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); background: linear-gradient(135deg, var(--surface) 0%, #17120a 100%); border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(0,0,0,.3); transform: translateY(100%); transition: transform .3s ease; } #install-banner.show { transform: translateY(0); } .install-banner-icon { font-size: 18px; color: var(--accent); flex-shrink: 0; } .install-banner-text { flex: 1; font-size: 13px; color: var(--text); line-height: 1.4; } .install-banner-text strong { color: var(--accent); font-weight: 600; } .install-banner-btn { flex-shrink: 0; padding: 8px 16px; background: var(--accent); color: #1a0f06; border: none; border-radius: 7px; font-size: 13px; font-weight: 700; font-family: 'Outfit', sans-serif; cursor: pointer; } .install-banner-close { flex-shrink: 0; background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer; } .install-banner-close:hover { color: var(--text); } /* ── Mobile hamburger button ────────────────────────────────────────────────── */ .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; padding: 7px 9px; flex-shrink: 0; transition: border-color .15s; order: -1; margin-right: 8px; } .menu-toggle:hover { border-color: var(--muted); } .menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--muted); transition: background .15s; } .menu-toggle:hover span { background: var(--text); } /* ── Sidebar overlay (mobile) ───────────────────────────────────────────────── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 199; cursor: pointer; } body.sidebar-open .sidebar-overlay { display: block; } /* ── Mobile bottom tab bar (quick nav floater) ───────────────────────────────── */ .mobile-tabbar { display: none; position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1000; gap: 2px; padding: 5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .mtab { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: var(--muted); text-decoration: none; transition: color .15s, background .15s; } .mtab svg { width: 20px; height: 20px; flex-shrink: 0; } .mtab.active { color: var(--on-accent, #1a0f06); background: var(--accent); } body.sidebar-open .mobile-tabbar { display: none; } /* ── Mobile breakpoint (≤ 768px) ────────────────────────────────────────────── */ @media (max-width: 768px) { /* Base — every element that doesn't have an explicit size inherits this */ body { font-size: 11px !important; line-height: 1.7; } /* Headings — explicit overrides because templates hardcode these */ h1, .page-top h1 { font-size: 16px !important; } h2, .chart-card h2, .table-card h2, .toolbar-title h2 { font-size: 13px !important; } h3, .chart-card h3, .table-card h3 { font-size: 12px !important; } /* Sidebar links */ .sidebar-link { font-size: 12.5px !important; padding: 10px 12px !important; } .sidebar-link.sub { font-size: 12px !important; } .sidebar-section-label { font-size: 10.5px !important; } /* Nav brand */ .nav-brand { font-size: 14px !important; margin-right: 0; } /* Header */ header { padding-left: 12px; padding-right: 12px; gap: 6px; } /* left/right only — keep the base rule's safe-area padding-top */ .nav-search { display: none; } .menu-toggle { display: flex; } .mobile-tabbar { display: flex; } /* Sidebar becomes a slide-in drawer */ .sidebar { transform: translateX(-100%); transition: transform .25s ease; z-index: 200; } body.sidebar-open .sidebar { transform: translateX(0); } /* Remove the sidebar content offset */ .sidebar ~ main, .sidebar ~ footer.site-footer, .sidebar ~ #save-bar { margin-left: 0; } /* Main — generous padding so content breathes. --page-pad mirrors the horizontal value so full-bleed children (see .chart-bleed) can cancel it out without hardcoding the number twice. Bottom padding also clears the floating bottom tab bar. */ main { --page-pad: 18px; padding: 24px var(--page-pad) calc(92px + env(safe-area-inset-bottom, 0px)) !important; } /* Toolbar layout */ .toolbar { flex-direction: column; align-items: flex-start; gap: 16px !important; padding: 18px 20px !important; } .toolbar-right { width: 100%; flex-wrap: wrap; gap: 10px; } #dash-search { width: 100%; max-width: 100%; } /* Column panel anchors to left on mobile */ .col-panel { right: auto; left: 0; } /* Footer */ footer.site-footer { padding: 22px 18px; flex-direction: column; align-items: flex-start; gap: 14px; } /* General button/label text — targets inline-styled elements */ button, .btn, .filter-btn, .period-btn, .tab-btn, .list-tab, .list-action-btn, .pag-btn { font-size: 11px !important; } /* Badges / counts / small labels */ .section-badge, #watch-count, .nav-search-type { font-size: 9px !important; } /* Watchlist tabs — tabs row scrolls, action buttons stay on next line */ .list-tabs-wrap { flex-wrap: wrap !important; gap: 10px !important; padding: 14px 16px !important; } #list-tabs { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1 1 100%; /* own full row so actions sit below */ padding-bottom: 2px; } #list-tabs::-webkit-scrollbar { display: none; } .list-actions { width: 100%; justify-content: flex-start !important; margin-left: 0 !important; } } /* ── Small phones (≤ 480px) ─────────────────────────────────────────────────── */ @media (max-width: 480px) { body { font-size: 10.5px !important; } main { --page-pad: 14px; padding: 20px var(--page-pad) 48px !important; } .toolbar { padding: 16px !important; } } /* ── iOS auto-zoom prevention ───────────────────────────────────────────────── */ @media (max-width: 768px) { input, select, textarea { font-size: 16px !important; } } /* ── Tap-target enforcement (≤ 768px) ───────────────────────────────────────── */ @media (max-width: 768px) { .filter-btn, .period-btn, .pag-btn, .tab-btn, .btn-action { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .nw-period-btn { min-width: 40px; } .menu-toggle { width: 44px; height: 44px; padding: 9px 11px; } .user-avatar-btn { width: 44px; height: 44px; } } /* ── Page entrance animations ───────────────────────────────────────────────── */ @keyframes enterUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes enterLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes enterFade { from { opacity: 0; } to { opacity: 1; } } @keyframes bodyReveal { from { opacity: 0; } to { opacity: 1; } } /* Header and sidebar are visible before the loader clears, so we only animate the main content elements below. */ /* Stagger metric cards on page load */ body.page-animate .card:nth-child(1) { animation: enterUp 0.5s 0.06s ease both; } body.page-animate .card:nth-child(2) { animation: enterUp 0.5s 0.12s ease both; } body.page-animate .card:nth-child(3) { animation: enterUp 0.5s 0.18s ease both; } body.page-animate .card:nth-child(4) { animation: enterUp 0.5s 0.24s ease both; } body.page-animate .card:nth-child(5) { animation: enterUp 0.5s 0.30s ease both; } body.page-animate .card:nth-child(6) { animation: enterUp 0.5s 0.36s ease both; } body.page-animate .card:nth-child(7) { animation: enterUp 0.5s 0.42s ease both; } body.page-animate .card:nth-child(8) { animation: enterUp 0.5s 0.48s ease both; } /* Charts, table, AI card animate in later */ body.page-animate .charts-row { animation: enterUp 0.55s 0.38s ease both; } body.page-animate .table-card { animation: enterUp 0.55s 0.48s ease both; } body.page-animate #ai-portfolio-card { animation: enterUp 0.55s 0.54s ease both; } body.page-animate #nw-chart-card { animation: enterUp 0.55s 0.60s ease both; } /* Generic section entrance for other pages */ body.page-animate .page-section-1 { animation: enterUp 0.5s 0.06s ease both; } body.page-animate .page-section-2 { animation: enterUp 0.5s 0.16s ease both; } body.page-animate .page-section-3 { animation: enterUp 0.5s 0.26s ease both; } body.page-animate .page-section-4 { animation: enterUp 0.5s 0.36s ease both; } body.page-animate .page-section-5 { animation: enterUp 0.5s 0.46s ease both; } body.page-animate .page-section-6 { animation: enterUp 0.5s 0.56s ease both; } /* ── Improved skeleton shimmer ──────────────────────────────────────────────── */ .skeleton { background: linear-gradient( 90deg, var(--surface2) 25%, rgba(200,133,58,.07) 50%, var(--surface2) 75% ); background-size: 200% 100%; animation: skeleton-sweep 1.6s infinite; } @keyframes skeleton-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ── Mobile nav search (visible on mobile) ──────────────────────────────────── */ @media (max-width: 768px) { /* Collapse the spacer so search can take the center */ .nav-spacer { display: none; } /* Show the search and let it flex-fill the center */ .nav-search { display: flex; flex: 1; margin: 0 8px; min-width: 0; } .nav-search input { width: 100% !important; min-width: 0; font-size: 16px !important; /* prevent iOS zoom */ padding-right: 32px; /* no kbd hint on touch devices, just the button */ } .nav-search input:focus { width: 100% !important; } .nav-search-kbd { display: none; } /* Cmd/Ctrl+K is a desktop-keyboard affordance */ /* Remove sync button entirely on mobile — it crowds the search bar */ #sync-btn { display: none !important; } #synced-at { display: none; } } /* ── Mobile chart sizing ────────────────────────────────────────────────────── */ @media (max-width: 768px) { .chart-wrap { height: 200px !important; width: 100% !important; box-sizing: border-box; } .chart-wrap canvas { display: block !important; max-width: 100% !important; } .chart-card { padding: 18px !important; } .chart-card h2, .chart-card h3 { font-size: 11.5px !important; margin-bottom: 14px !important; } } /* ── Full-bleed time-series charts on phones ────────────────────────────────── */ /* A phone is ~390px wide. A card border plus the page's own 18px inset on each side spends nearly a tenth of that screen on chrome wrapped around a line whose entire job is to show a shape. Opting a card into .chart-bleed cancels main's horizontal padding so the plot runs to the glass, and drops the side border and radius so nothing boxes it in — the top and bottom hairlines stay and read as a band, which is what separates the chart from its neighbours. The card's header keeps the page inset, so titles still line up with the content above and below. Opt in per element: only the wide line charts want this. A doughnut just centres itself in the extra width, and the mini-chart grid needs its gutter. Marking the plot container .chart-bleed-plot is what exempts it from the inset — every other child of the card keeps it. */ @media (max-width: 768px) { body .chart-bleed { margin-left: calc(-1 * var(--page-pad)) !important; margin-right: calc(-1 * var(--page-pad)) !important; /* The mobile overflow guard caps these cards at max-width:100%, which is the width of the grid track — that silently eats the negative margins' extra width and leaves the card short of the edge. The bleed is the deliberate exception to that guard. */ max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; box-shadow: none !important; /* The plot reaches the edges; a hover shadow around it has nothing to sit on. */ overflow: visible; } body .chart-bleed > :not(.chart-bleed-plot) { padding-left: var(--page-pad); padding-right: var(--page-pad); } /* Chart.js sizes to the canvas's offsetParent, so the plot wrapper itself must carry no inset of its own. */ body .chart-bleed > .chart-bleed-plot { padding-left: 0 !important; padding-right: 0 !important; } } /* ── Mobile metric cards — 2 columns ────────────────────────────────────────── */ @media (max-width: 768px) { .cards { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .card { padding: 18px 16px !important; } .card .value { font-size: 15px !important; margin-bottom: 6px !important; } .card .label { font-size: 9px !important; letter-spacing: .4px; margin-bottom: 4px !important; } .card .sub { font-size: 9.5px !important; margin-top: 6px !important; } } /* ── Mobile table improvements ──────────────────────────────────────────────── */ @media (max-width: 768px) { .table-card table { font-size: 11px !important; } .table-card thead th, .table-card tbody td { padding: 12px 11px !important; } .table-card thead th { font-size: 10px !important; letter-spacing: .3px; } } /* ── Global overflow guard for all pages ────────────────────────────────────── */ /* Prevents any page from being wider than the screen, which causes mobile browsers to zoom out and render off-center. */ @media (max-width: 768px) { main, header, .sidebar, footer.site-footer { max-width: 100vw; } /* Cards and chart cards must never exceed viewport */ .card, .chart-card, .table-card { max-width: 100%; } /* Metric cards can clip inner content safely */ .card { overflow: hidden; } /* table-card must NOT be overflow:hidden — its tab row needs to scroll */ /* Grids that could overflow on small screens */ .charts-row { grid-template-columns: 1fr !important; } /* Net worth period bar: hide less-used periods so row doesn't wrap */ #nw-period-bar [data-period="2y"], #nw-period-bar [data-period="3y"] { display: none; } } /* ── Hover glow on interactive cards ────────────────────────────────────────── */ .card { transition: box-shadow .25s ease, transform .25s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 24px rgba(200,133,58,.07); } .chart-card { transition: box-shadow .25s ease; -webkit-tap-highlight-color: transparent; } .chart-wrap { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .chart-wrap canvas { -webkit-tap-highlight-color: transparent; touch-action: pan-y; } .chart-card:hover { box-shadow: 0 6px 28px rgba(0,0,0,.4), 0 0 20px rgba(200,133,58,.05); } /* ── Button ripple wave ──────────────────────────────────────────────────────── */ @keyframes ripple-out { from { transform: scale(0); opacity: .4; } to { transform: scale(3); opacity: 0; } } .ripple-wave { position: absolute; border-radius: 50%; background: rgba(255,255,255,.18); pointer-events: none; animation: ripple-out .52s ease-out forwards; } /* ── Table row entrance ──────────────────────────────────────────────────────── */ @keyframes rowSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .row-enter { animation: rowSlideIn .22s ease both; } /* ── Value flash when data updates ──────────────────────────────────────────── */ @keyframes valPop { 0% { opacity: 0; transform: translateY(5px) scale(.95); } 60% { opacity: 1; transform: translateY(-1px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .val-flash { animation: valPop .32s ease both; } /* ── Active filter / period / pag buttons ────────────────────────────────────── */ .filter-btn.active, .tab-btn.active, .period-btn.active, .pag-btn.active, .nw-period-btn.active { /* no glow — flat active state via color/background only, set per-component */ } /* ── Input / select focus ring ───────────────────────────────────────────────── */ input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2.5px rgba(200,133,58,.2); } /* ── Table row hover — warm tint ─────────────────────────────────────────────── */ .table-card tbody tr { transition: background .12s ease; } .table-card tbody tr:hover { background: rgba(200,133,58,.045) !important; } /* ── Screener pill active glow ───────────────────────────────────────────────── */ .sc-pill.active { box-shadow: 0 0 0 1px rgba(200,133,58,.4) inset, 0 0 14px rgba(200,133,58,.15); } .sc-preset.selected { box-shadow: 0 0 0 1px rgba(200,133,58,.35) inset; } /* ── Sidebar active link accent bar ──────────────────────────────────────────── */ .sidebar-link { position: relative; } .sidebar-link.active::before { content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 2.5px; height: 55%; background: var(--accent); border-radius: 2px; box-shadow: 0 0 8px rgba(200,133,58,.55); } /* ── Chart card heading accent dot ───────────────────────────────────────────── */ .chart-card h2::before, .chart-card h3::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-right: 8px; opacity: .75; flex-shrink: 0; vertical-align: middle; position: relative; top: -1px; } /* ── Card redesign ─────────────────────────────────────────────────────────────── Uses body-prefixed selectors (specificity 0,1,1) to beat per-page