/* ===================================================================== NEXUS DASHBOARD — shared chrome Design tokens here MUST match the ones inlined in dashboard/calendar/ index.html so a CSS edit in one place doesn't break the other. THEMING ------------------------------------------------------------------- Three modes: - auto (default): follow the OS via prefers-color-scheme - light (manual) - dark (manual) Theme is applied by setting data-theme="light" or "dark" on the element. dashboard.js does this before paint (Nexus.applyTheme) reading nexus_theme from localStorage. If unset or "auto", the prefers-color-scheme media query controls it. The surface/text/line tokens swap with the theme. Brand accent (purple), event colours (blue/green/yellow/...), and semantic colours (success/danger) intentionally do NOT swap — they read correctly on both backgrounds and switching them would change the calendar's visual identity. ===================================================================== */ :root { /* Brand accents + semantic colours — same in both themes */ --accent: #B34DB4; --accent-soft: rgba(179,77,180,0.18); --accent-hover: #C661C7; --info: #2F95FF; --danger: #F87171; --success: #34D399; --warning: #FBBF24; /* Radii */ --r-sm: 6px; --r: 10px; --r-lg: 16px; /* Font */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif; /* Layout */ --nav-width: 220px; } /* DARK THEME — explicit + the prefers-color-scheme fallback */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg: #0E0E10; --bg-elev: #16161a; --bg-elev-2: #1c1c21; --bg-input: rgba(255,255,255,0.04); --nav-pill-bg: rgba(28,28,34,0.82); /* frosted mobile nav pill (dark) */ /* Lines */ --line: rgba(255,255,255,0.10); --line-soft: rgba(255,255,255,0.06); --line-strong: rgba(255,255,255,0.18); /* Text */ --text: #ffffff; --text-soft: rgba(255,255,255,0.68); --text-muted: rgba(255,255,255,0.42); --text-dim: rgba(255,255,255,0.28); /* Shadows — heavier in dark mode where ambient light is low */ --shadow-soft: 0 6px 18px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.04); --shadow-pop: 0 24px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.04); /* Overlay scrim — the modal/popover backdrop */ --scrim: rgba(0,0,0,0.55); } /* LIGHT THEME — the same tokens, different values. Apple's macOS light Calendar uses near-white surfaces with subtle gray separators; text is true-ish black at high contrast. The brand purple is unchanged — it pops on white the same way it pops on near-black. */ :root[data-theme="light"] { color-scheme: light; /* Surfaces — soft off-white tiers (NOT pure white) so cards on top can still feel raised via a slightly whiter elev tone. */ --bg: #F5F5F7; /* page background */ --bg-elev: #FFFFFF; /* cards, nav, popovers */ --bg-elev-2: #F9F9FB; /* nested cards / selected segment */ --bg-input: rgba(0,0,0,0.03); --nav-pill-bg: rgba(255,255,255,0.90); /* frosted mobile nav pill (light) */ /* Lines — black with low alpha so they sit on any surface */ --line: rgba(0,0,0,0.10); --line-soft: rgba(0,0,0,0.06); --line-strong: rgba(0,0,0,0.18); /* Text — true black tier for primary; alpha-blacks for hierarchy */ --text: #1a1a1c; --text-soft: rgba(0,0,0,0.65); --text-muted: rgba(0,0,0,0.45); --text-dim: rgba(0,0,0,0.30); /* Shadows — much lighter, since they read on white */ --shadow-soft: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04); --shadow-pop: 0 16px 40px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06); /* Scrim stays dark — it has to read as "behind" the modal */ --scrim: rgba(0,0,0,0.35); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* --------------------------------------------------------------------- APP SHELL — sidebar + main grid --------------------------------------------------------------------- */ .app-shell { display: grid; grid-template-columns: var(--nav-width) 1fr; min-height: 100vh; transition: grid-template-columns 0.22s cubic-bezier(0.4, 0, 0.2, 1); } /* Collapsed nav state — triggered by JS toggling .nav-collapsed on .app-shell */ .app-shell.nav-collapsed { grid-template-columns: 64px 1fr; } .app-shell.nav-collapsed .nav { padding: 20px 8px; /* Don't set overflow:hidden here — it clips the account menu popup */ } /* Hide text labels when collapsed */ .app-shell.nav-collapsed .nav-brand-text, .app-shell.nav-collapsed .nav-account-info, .app-shell.nav-collapsed .nav-item-label { display: none; } /* Center items when collapsed */ .app-shell.nav-collapsed .nav-item { justify-content: center; padding: 10px; } .app-shell.nav-collapsed .nav-brand { justify-content: center; padding: 4px 4px 20px; gap: 0; } /* When collapsed, drop the top profile photo — the collapse/expand chevron is all that's needed up top, and the account avatar stays at the bottom. */ .app-shell.nav-collapsed .nav-brand-avatar { display: none; } .app-shell.nav-collapsed .nav-collapse-btn { margin-left: 0; } .app-shell.nav-collapsed .nav-collapse-btn svg { transform: rotate(180deg); } .app-shell.nav-collapsed .nav-account-row { justify-content: center; padding: 8px 4px; } /* Collapse button */ .nav-collapse-btn { width: 26px; height: 26px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; transition: background 0.12s, color 0.12s; } .nav-collapse-btn:hover { background: var(--line-soft); color: var(--text); } .nav-collapse-btn svg { transition: transform 0.22s cubic-bezier(0.4,0,0.2,1); } /* --------------------------------------------------------------------- SIDEBAR NAV --------------------------------------------------------------------- */ .nav { background: var(--bg-elev); border-right: 1px solid var(--line-soft); padding: 20px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; /* overflow: hidden was clipping the account menu popup. Use overflow: visible so the menu can escape the nav bounds. The collapse animation uses width transition, not overflow. */ overflow: visible; transition: padding 0.22s cubic-bezier(0.4, 0, 0.2, 1); min-width: 0; } .nav-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; border-bottom: 1px solid var(--line-soft); margin-bottom: 14px; min-width: 0; } /* Avatar in the top-left brand area — shows the artist's profile photo when available (loaded async via /sync/pull). Until the photo arrives we show initials in a coloured circle so the layout doesn't flicker. */ .nav-brand-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 13px; overflow: hidden; flex-shrink: 0; } .nav-brand-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .nav-brand-text { color: var(--text); font-weight: 600; font-size: 15px; letter-spacing: 0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } /* Share button in the top-left brand header — copies the artist's public page link (flash / availability / waitlist) to the clipboard. */ .nav-brand-share { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--text-soft); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.06s; } .nav-brand-share svg { width: 15px; height: 15px; } .nav-brand-share:hover { color: var(--text); border-color: var(--accent); } .nav-brand-share:active { transform: scale(0.92); } .nav-brand-share.copied { color: #fff; background: var(--accent); border-color: var(--accent); } .nav-items { display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text-soft); font-size: 13px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .nav-item:hover { background: var(--bg-input); color: var(--text); } .nav-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-item.is-active .nav-item-label { font-weight: 600; } .nav-item-icon { width: 18px; height: 18px; flex-shrink: 0; } .nav-item-label { font-weight: 500; } .nav-account { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); } .nav-account-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; position: relative; } .nav-account-row:hover { background: var(--bg-input); } .nav-account-avatar { width: 28px; height: 28px; border-radius: 50%; background: #3a3a3f; display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 11px; font-weight: 600; flex-shrink: 0; overflow: hidden; } .nav-account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .nav-account-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .nav-account-name { font-size: 12px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-account-meta { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Account dropdown */ .nav-account-menu { position: fixed; /* JS sets top/left at open time via setAccountMenuPos() */ min-width: 180px; width: max-content; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 6px; display: none; z-index: 9999; } .nav-account-menu.is-open { display: block; } .nav-account-menu button { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: none; padding: 8px 10px; color: var(--text-soft); font-size: 13px; text-align: left; border-radius: 6px; } .nav-account-menu button:hover { background: var(--bg-input); color: var(--text); } .nav-account-menu button.danger:hover { color: var(--danger); } /* --------------------------------------------------------------------- MAIN CONTENT AREA --------------------------------------------------------------------- */ .main { min-width: 0; width: 100%; display: flex; flex-direction: column; } .main-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--line-soft); background: var(--bg); } .main-title { margin: 0; font-size: 20px; font-weight: 600; color: var(--text); } .main-body { padding: 24px 28px; flex: 1; min-width: 0; width: 100%; } /* ===================================================================== MOBILE — sidebar -> bottom tab bar --------------------------------------------------------------------- The default desktop grid puts a 220px sidebar to the left of the main content. On phones (<= 720px viewport) we: * collapse the grid to a single column * pin .nav to the BOTTOM of the screen as a horizontal tab bar * rearrange .nav internals so the brand + account row hide (the account row is reachable via the Settings tab) and only the nav items show, equally distributed * pad the main content's bottom by the height of the tab bar so page content doesn't slide under it * shrink page padding from 24/28 to 14/14 — desktop padding is too generous on narrow screens ===================================================================== */ :root { /* Used in the .main padding-bottom calc below; bumping the bar height here is the single source of truth. */ --mobile-tabbar-height: 82px; } @media (max-width: 720px) { /* MOBILE LAYOUT — two-row grid: scrollable .main on top, nav as a real bottom row (NOT position:fixed). The DOM is: .app-shell > #nexus-nav > .nav (the nav) .app-shell > .main (the page) So we target #nexus-nav (the actual grid child), not .nav, when placing it into the grid track. Earlier rules used `.app-shell > .nav` which never matched because .nav is a grand-child, not a child. */ html, body { height: 100%; overflow: hidden; /* scroll inside .main, not the page */ /* Belt-and-braces: nothing should ever push the viewport wider. */ max-width: 100vw; overflow-x: hidden; } .app-shell { position: relative; /* anchor for the floating nav overlay */ grid-template-columns: 1fr; grid-template-rows: 1fr auto; /* main, then nav */ height: 100dvh; /* dvh handles iOS address-bar resize */ min-height: 100dvh; max-height: 100dvh; /* hard cap so .main can't push the nav off */ max-width: 100vw; overflow-x: hidden; } /* nav-collapsed adds 64px 1fr on desktop — override back to 1fr on mobile */ .app-shell.nav-collapsed { grid-template-columns: 1fr; } /* main is the scroll container — page content scrolls here, nav stays put. overflow-x is ONLY clipped at the body/app-shell level, not here, because inner sections (.flash-cats) need horizontal scroll of their own. */ .app-shell > .main { grid-row: 1; grid-column: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; /* required for overflow inside a grid track */ min-width: 0; /* required so children can't expand it */ width: 100%; max-width: 100vw; } /* The #nexus-nav wrapper floats OVER the scrolling content (not a solid row), so the frosted pill actually has page content behind it to blur. The transparent padding zone around the pill passes taps through to the content underneath. */ .app-shell > #nexus-nav { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; z-index: 90; pointer-events: none; } .app-shell > #nexus-nav .nav-items { pointer-events: auto; } /* Calendar is full-bleed and height-sensitive: keep the bar as a solid row BENEATH it (not a floating overlay), so it can never cover the grid — the way it worked before the overlay change. Everywhere else the bar floats over content as frosted glass. */ body.calendar-active .app-shell > #nexus-nav { position: static; grid-row: 2; grid-column: 1; z-index: auto; pointer-events: auto; } /* nav itself — a floating glass pill sitting in its own grid row */ #nexus-nav > .nav { position: static; /* override desktop sticky */ height: auto; width: 100%; flex-direction: row; align-items: stretch; border-right: none; border-top: none; background: transparent; /* the pill is the visual, not the whole row */ padding: 8px max(18px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); z-index: 90; } /* Brand + account row are dead weight at the bottom of the screen. Brand identity belongs in the page header; account actions live inside Settings. Hide both. */ .nav-brand, .nav-account { display: none !important; } /* Frosted floating pill holding the tabs */ .nav-items { flex: 1; flex-direction: row; align-items: center; justify-content: space-between; gap: 2px; height: 58px; padding: 0 8px; background: var(--nav-pill-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line-soft); border-radius: 20px; overflow: hidden; /* never let a long active label push past the screen */ box-shadow: 0 14px 30px -14px rgba(40, 20, 60, 0.30), 0 2px 6px rgba(20, 18, 30, 0.05); } .nav-item { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 0; padding: 10px 6px; border-radius: 13px; min-width: 0; color: var(--text-muted); transition: padding 0.24s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease, box-shadow 0.24s ease; } .nav-item:hover { background: transparent; /* hover is meaningless on touch devices */ color: var(--text-soft); } .nav-item.is-active { flex: 0 1 auto; background: linear-gradient(135deg, #E85BC4 0%, #B34DB4 48%, #7B3FD0 100%); color: #fff; padding: 10px 12px; box-shadow: 0 8px 16px -8px rgba(179, 77, 180, 0.6); } .nav-item-icon { width: 22px; height: 22px; flex-shrink: 0; } /* Label slides open on activation instead of popping in */ .nav-item-label { max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; font-weight: 700; line-height: 1; transition: max-width 0.26s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; } .nav-item.is-active .nav-item-label { max-width: 82px; margin-left: 6px; opacity: 1; } @media (prefers-reduced-motion: reduce) { .nav-item, .nav-item-label { transition: none; } } /* (no extra padding needed at bottom — nav is now its own grid row, not a fixed overlay) */ .main-header { padding: 14px 16px; } .main-title { font-size: 17px; } .main-body { padding: 16px 14px; min-width: 0; max-width: 100%; } /* Clear the floating nav so the last content can scroll above it. Calendar sets its own fixed height below, so it's excluded. */ body:not(.calendar-active) .main-body { padding-bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0) + 10px); } /* Calendar route: main-body should fill the grid row above the tab bar. Use flex:1 + the dvh cap rather than a calculated height — this is robust at every viewport size including iPad/small-laptop breakpoints. */ body.calendar-active .main-body { height: calc(100dvh - var(--mobile-tabbar-height) - env(safe-area-inset-bottom, 0)); max-height: calc(100dvh - var(--mobile-tabbar-height) - env(safe-area-inset-bottom, 0)); flex: 1; min-height: 0; } body.calendar-active .app-shell { height: 100dvh; max-height: 100dvh; min-height: 0; } /* ===================================================================== Tighter page furniture on mobile — the existing components default to comfortable desktop spacing; these overrides keep them usable when real estate is scarce. NOTE on cascade: per-component overrides for things defined in dashboard/index.html's inline