/* ========================================================================= PERSONAL HUB — THEME v3 "Glass" (2026-07-07) One file to restyle everything. Evolves Mission Control into frosted glass: dark dot-grid canvas (default) + light sage toggle, SF Pro Rounded display, IBM Plex Mono telemetry, one domain color per tracker, lime/gold accent. Dual theme: dark is the default; add data-theme="light" on for sage. Change a value, save, refresh. Old var names are KEPT so trackers don't break. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ /* ---- Colors — DARK (default, Mission Control glass) ---- */ --bg: #0e1116; /* page background base */ --surface: rgba(28,34,45,0.62); /* cards / tiles — translucent glass */ --surface-2: rgba(255,255,255,0.06); /* inputs, chips */ --line: rgba(255,255,255,0.10); /* borders */ --chrome: rgba(14,17,22,0.80); /* sticky page headers / bars */ --text: #e9edf2; /* main text */ --muted: #9aa4b3; /* secondary text */ --faint: #7a8495; /* tertiary / labels (WCAG AA on --bg) */ --accent: #cfe24a; /* primary accent = lime/gold */ --accent-2: #9cbf22; /* gradient / hover end */ --accent-ink:#161a0c; /* text on an accent fill */ --glow: rgba(207,226,74,0.30); /* accent glow */ /* ---- Domain colors (one per tracker; shared with the OS map) ---- */ --rose: #e86a8a; /* Instagram / brand */ --amber: #e8a33d; /* Podcasts / work */ --teal: #3fbfae; /* Tasks / research */ --blue: #5b8def; /* Reading */ --violet: #9d7bf4; /* OS map / hub itself */ --green: #46b877; /* The Desk */ /* ---- Shape & type ---- */ --radius: 18px; --tile-min: 250px; --shadow: 0 18px 44px -20px rgba(0,0,0,0.72); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "SF Pro Rounded", ui-rounded, "Hiragino Maru Gothic ProN", "Space Grotesk", var(--font); --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Spacing & chrome ---- */ --gap: 16px; --pad: 24px; --hubbar-h: 38px; } /* explicit dark (toggle → dark) mirrors the base */ :root[data-theme="dark"]{ color-scheme: dark; } /* ---- LIGHT (sage glass) — only when data-theme="light" ---- */ :root[data-theme="light"]{ color-scheme: light; --bg: #B2BAA8; --surface: rgba(255,255,255,0.52); --surface-2: rgba(35,40,30,0.06); --line: rgba(35,40,30,0.13); --chrome: rgba(255,255,255,0.55); --text: #23281E; --muted: #39402f; /* 4.72:1 on the darkest sage ground (AA) */ --faint: #3b422f; /* 4.59:1 worst-case (AA) — hierarchy carried by size in light */ --accent: #384502; /* deep olive — 4.55:1 as text + focus ring on sage (AA) */ --accent-2: #2f3a02; --accent-ink:#ffffff; /* 10.4:1 on the deep-olive accent fill */ --glow: rgba(147,179,18,0.30); --shadow: 0 16px 38px -20px rgba(30,36,22,0.42); } /* ----- base ----- */ *{box-sizing:border-box} /* STRONG scroll container (canonical — pages must not re-declare their own) */ html{height:100%;overflow:hidden} body{ margin:0; height:100% !important; max-height:100vh; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; background: radial-gradient(1100px 520px at 82% -120px, var(--glow), transparent 60%), radial-gradient(900px 480px at 12% -60px, rgba(157,123,244,0.10), transparent 60%), radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0) 0 0 / 26px 26px, var(--bg); background-attachment: fixed; color:var(--text);font-family:var(--font); -webkit-font-smoothing:antialiased} :root[data-theme="light"] body{ background: radial-gradient(1100px 560px at 82% -110px, var(--glow), transparent 58%), radial-gradient(900px 500px at 10% -40px, rgba(255,255,255,0.35), transparent 55%), linear-gradient(150deg, #BCC3B2, #A6AF97); background-attachment: fixed; } @media print{ html{height:auto;overflow:visible} body{height:auto !important;max-height:none;overflow:visible !important} } a{color:inherit;text-decoration:none} :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; } .wrap{max-width:1100px;margin:0 auto;padding:var(--pad)} h1,h2,h3{font-family:var(--font-display)} .mono{font-family:var(--font-mono)} /* ----- global top nav (shared chrome across Work + Personal) ----- */ .topnav{background:rgba(14,17,22,.72);border-bottom:1px solid var(--line); backdrop-filter:blur(10px);position:sticky;top:0;z-index:50} :root[data-theme="light"] .topnav{background:rgba(255,255,255,.42)} .topnav .tnwrap{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:9px var(--pad)} .topnav .tn-brand{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)} .topnav .tn-tabs{margin-left:auto;display:flex;align-items:center;gap:8px} .topnav .tn-tab{font-size:13px;color:var(--muted);padding:6px 13px;border-radius:9px} .topnav .tn-tab:hover{background:var(--surface-2);color:var(--text)} .topnav .tn-tab.active{background:var(--accent);color:var(--accent-ink);font-weight:600} /* theme toggle button (topnav + hubbar) */ .theme-toggle{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px; border:1px solid var(--line);background:var(--surface-2);color:var(--muted);cursor:pointer; font-size:15px;line-height:1;transition:color .12s,border-color .12s} .theme-toggle:hover{color:var(--text);border-color:var(--faint)} @media (max-width:520px){ .topnav .tnwrap{flex-wrap:wrap;gap:8px 10px;padding-top:10px;padding-bottom:10px} .topnav .tn-brand{font-size:10px;letter-spacing:.14em;white-space:nowrap;flex:1 0 100%} .topnav .tn-tabs{margin-left:0} .topnav .tn-tab{font-size:12px;padding:5px 10px;white-space:nowrap} } /* ----- header ----- */ .hub-head{padding:44px 0 6px;text-align:left} .hub-head .eyebrow{ font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase; color:var(--faint);display:flex;align-items:center;gap:10px} .hub-head .eyebrow .live{width:7px;height:7px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 0 var(--glow)} .hub-head h1{margin:12px 0 0;font-family:var(--font-display);font-size:clamp(30px,4.8vw,42px); font-weight:700;letter-spacing:-.02em} .hub-head h1 .os{color:var(--accent)} .hub-head .statline{ display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px; font-family:var(--font-mono);font-size:12.5px;color:var(--muted)} .hub-head .statline b{color:var(--text);font-weight:600} /* ----- ask bar (new; reusable) ----- */ .askbar{display:flex;align-items:center;gap:14px;margin-top:22px;padding:15px 18px; border-radius:var(--radius);background:var(--surface);border:1px solid var(--line); box-shadow:var(--shadow);backdrop-filter:blur(14px)} .askbar .spark{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);font-size:18px} .askbar input{flex:1;border:none;background:transparent;font-family:var(--font-display); font-size:16px;color:var(--text)} .askbar input::placeholder{color:var(--faint)} .askbar .go{font-family:var(--font-mono);font-size:12px;color:var(--faint); border:1px solid var(--line);padding:5px 9px;border-radius:8px} /* ----- tiles (instrument cards, domain-keyed via --dc) ----- */ .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-min),1fr)); gap:var(--gap);margin-top:22px} .tile{--dc:var(--accent); position:relative;background:var(--surface);backdrop-filter:blur(12px); border:1px solid var(--line);border-top:2px solid var(--dc); border-radius:var(--radius);padding:16px 16px 14px;min-height:158px; box-shadow:var(--shadow); display:flex;flex-direction:column;gap:6px; transition:transform .14s, border-color .14s, box-shadow .14s} .tile:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--dc) 50%,var(--line)); border-top-color:var(--dc);box-shadow:0 20px 48px -18px rgba(0,0,0,.55)} .tile .glyph{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center; font-size:22px;background:color-mix(in srgb,var(--dc) 15%,transparent); border:1px solid color-mix(in srgb,var(--dc) 32%,transparent)} .tile .name{font-family:var(--font-display);font-size:17.5px;font-weight:650;margin-top:6px} .tile .sub{color:var(--muted);font-size:12.5px;line-height:1.45} .tile .count{margin-top:auto;padding-top:10px;font-family:var(--font-mono);font-size:11px; letter-spacing:.05em;text-transform:uppercase;color:var(--dc)} /* optional live micro-meter on a tile (segments via inline width + color) */ .tile .meter{margin-top:9px;height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden;display:flex} .tile .meter i{height:100%;display:block} .tile.soon{opacity:.55} .tile.soon .badge{position:absolute;top:12px;right:12px;font-family:var(--font-mono);font-size:10px; background:var(--surface-2);border:1px solid var(--line);color:var(--muted); padding:3px 8px;border-radius:999px} .foot{color:var(--faint);font-size:12px;text-align:center;padding:40px 0 24px; font-family:var(--font-mono)} /* ----- hub header bar (every page except home; hub link top-right) ----- Pages with their own sticky header must offset it: header{top:var(--hubbar-h)} */ .hubbar{position:sticky;top:0;z-index:50;height:var(--hubbar-h); display:flex;align-items:center;gap:12px;padding:0 16px; background:rgba(14,17,22,.80);backdrop-filter:blur(10px); border-bottom:1px solid var(--line)} :root[data-theme="light"] .hubbar{background:rgba(255,255,255,.46)} .hubbar .hb-brand{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--faint);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .hubbar .hb-home{margin-left:auto;display:inline-flex;align-items:center;gap:6px; font-family:var(--font-mono);font-size:12px;color:var(--text); border:1px solid var(--line);border-radius:999px;padding:4px 12px;white-space:nowrap; transition:border-color .12s,color .12s} .hubbar .hb-home:hover{border-color:var(--accent);color:var(--text)} /* ========================================================================= SHARED HUB NAV (design-library component #1) One definition, two modes: .hubnav.persistent — sticky left column inside .shell grid (home) .hubnav.drawer — off-canvas slide-in over content (interior pages) Token-only, so the Redpoint (Work) hub can consume the same component and just swap the palette. Markup + behavior come from hubnav.js. ========================================================================= */ .hubnav{width:250px;padding:22px 15px;display:flex;flex-direction:column;gap:4px; border-right:1px solid var(--line);background:var(--chrome);backdrop-filter:blur(9px)} .hubnav .brand-row{display:flex;align-items:center;gap:11px;padding:4px 10px 12px} .hubnav .mark{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 6px 16px -4px var(--glow)} .hubnav .mark svg{width:20px;height:20px} .hubnav .mark-t{font-family:var(--font-display);font-size:15px;font-weight:700;line-height:1.05;letter-spacing:-.01em} .hubnav .mark-t i{display:block;color:var(--muted);font-weight:400;font-style:normal;font-size:11.5px} .hubnav .hubseg{display:flex;gap:3px;background:var(--surface-2);padding:3px;border-radius:11px;margin:2px 6px 8px} .hubnav .hubseg a{flex:1;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--muted);padding:6px 4px;border-radius:8px} .hubnav .hubseg a:hover{color:var(--text)} .hubnav .hubseg a.on{background:var(--accent);color:var(--accent-ink);font-weight:600} .hubnav .nav-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:12px 12px 5px} .hubnav .nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;color:var(--muted); font-size:14px;font-weight:500;transition:background .15s,color .15s} .hubnav .nav-item:hover{background:var(--surface-2);color:var(--text)} .hubnav .nav-item.active{background:var(--accent);color:var(--accent-ink);font-weight:650;box-shadow:0 8px 20px -8px var(--glow)} .hubnav .nav-item .gl{width:20px;text-align:center;flex:none;font-size:15px} .hubnav .nav-item .nd{margin-left:auto;font-family:var(--font-mono);font-size:10px;background:var(--surface-2);color:var(--muted);padding:1px 8px;border-radius:20px} .hubnav .nav-item.active .nd{background:rgba(0,0,0,.18);color:var(--accent-ink)} .hubnav .spacer{flex:1;min-height:8px} .hubnav .profile{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:13px;background:var(--surface);border:1px solid var(--line)} .hubnav .profile .av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;color:#fff;font-size:12px; background:linear-gradient(135deg,var(--rose),var(--violet))} .hubnav .profile b{font-size:12.5px;font-weight:650} .hubnav .profile span{font-size:11px;color:var(--faint)} /* persistent (home): fills the 250px grid column, sticks on scroll */ .hubnav.persistent{position:sticky;top:0;height:100vh;overflow-y:auto} /* drawer (interior): OPEN by default on desktop and PUSHES the page (no dimming); on mobile it overlays with a scrim. Collapsible via the ≡ button; the open/closed choice is remembered per hubnav.js (localStorage 'hubNav'). */ .hubnav.drawer{position:fixed;top:0;left:0;width:250px;height:100vh;overflow-y:auto;z-index:80; transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1); box-shadow:0 0 60px -12px rgba(0,0,0,.62)} .hubnav.drawer.hn-open{transform:none} /* desktop: open drawer pushes content right instead of covering it */ body{transition:padding-left .26s cubic-bezier(.4,0,.2,1)} @media(min-width:761px){ body.hn-nav-open{padding-left:250px} } /* scrim exists only on mobile, where the drawer overlays the page */ .hub-scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.5);opacity:0;pointer-events:none; transition:opacity .26s ease;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:none} @media(max-width:760px){ .hub-scrim{display:block} } .hub-scrim.hn-open{opacity:1;pointer-events:auto} /* suppress the slide/push on first paint so it reads as already-open, not animating in */ :root.hn-no-anim .hubnav.drawer,:root.hn-no-anim body,:root.hn-no-anim .hub-scrim{transition:none!important} /* hamburger — injected into the .hubbar on interior pages */ .hb-burger{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none; border:1px solid var(--line);background:var(--surface-2);color:var(--muted);cursor:pointer; font-size:15px;line-height:1;transition:color .12s,border-color .12s} .hb-burger:hover{color:var(--text);border-color:var(--faint)} /* home mobile: persistent nav collapses to a wrapping top row (prev .side behavior) */ @media(max-width:760px){ .hubnav.persistent{position:static;height:auto;width:auto;flex-direction:row;flex-wrap:wrap; align-items:center;gap:6px;border-right:none;border-bottom:1px solid var(--line)} .hubnav.persistent .brand-row{padding-bottom:4px} .hubnav.persistent .nav-label,.hubnav.persistent .spacer,.hubnav.persistent .profile{display:none} .hubnav.persistent .nav-item{padding:8px 10px} .hubnav.persistent .nav-item .nd{display:none} .hubnav.persistent .hubseg{margin:0 0 0 auto;width:auto} } @media (prefers-reduced-motion: reduce){ .hubnav.drawer{transition:none} .hub-scrim{transition:none} } /* ----- motion (respects reduced-motion) ----- */ @media (prefers-reduced-motion: no-preference){ .hub-head .eyebrow .live{animation:hubpulse 2.4s ease-out infinite} @keyframes hubpulse{ 0%{box-shadow:0 0 0 0 var(--glow)} 70%{box-shadow:0 0 0 9px rgba(207,226,74,0)} 100%{box-shadow:0 0 0 0 rgba(207,226,74,0)} } .tiles .tile{opacity:0;transform:translateY(8px);animation:tilein .5s ease forwards} .tiles .tile:nth-child(1){animation-delay:.05s} .tiles .tile:nth-child(2){animation-delay:.12s} .tiles .tile:nth-child(3){animation-delay:.19s} .tiles .tile:nth-child(4){animation-delay:.26s} .tiles .tile:nth-child(5){animation-delay:.33s} .tiles .tile:nth-child(6){animation-delay:.40s} @keyframes tilein{to{opacity:1;transform:none}} }