/* ============================================================ sf-styles.css - SystemFlow shared design tokens & nav styles No framework dependencies. Import in every page's . ============================================================ */ /* ── Global design tokens ─────────────────────────────────── */ :root { --rust: #D4634A; --rust-dim: rgba(212, 99, 74, 0.14); --clay: #E8A87C; --clay-dim: rgba(232, 168, 124, 0.14); --green: #34D399; --amber: #F59E0B; --red: #EF4444; --purple: #A78BFA; --cyan: #38BDF8; --gold: #EAB308; } /* ── Dark mode tokens (default) ───────────────────────────── */ html.dark { --bg: #131316; --surface1: #1C1D20; --surface2: #232427; --surface3: #2B2C30; --border: rgba(255, 255, 255, 0.07); --border-md: rgba(255, 255, 255, 0.12); --text: #F2F1EF; --text-sec: rgba(255, 255, 255, 0.52); --text-dim: rgba(255, 255, 255, 0.26); --nav-bg: rgba(19, 19, 22, 0.82); --nav-border: rgba(255, 255, 255, 0.07); } /* ── Light mode tokens ────────────────────────────────────── */ html.light, html:not(.dark) { --rust: #C2553A; --rust-dim: rgba(194, 85, 58, 0.12); --clay: #B9774A; --bg: #F0ECE6; --surface1: #F7F4EF; --surface2: #ECE7E0; --surface3: #E0DBD2; --border: rgba(0,0,0,0.09); --border-md: rgba(0,0,0,0.12); --text: #1A1813; --text-sec: #4A4339; --text-dim: #9b9388; --nav-bg: rgba(247, 244, 239, 0.85); --nav-border: rgba(0,0,0,0.09); } /* ── Scrollbar ────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.3); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.5); } /* ── Nav bar (.sf-nav) ────────────────────────────────────── */ .sf-nav { position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 9999; display: flex; align-items: center; padding: 0 16px; gap: 12px; background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--nav-border); box-sizing: border-box; /* Smooth theme transition */ transition: background 0.2s ease, border-color 0.2s ease; } /* Left cluster: logo + separator + page label */ .sf-nav__left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .sf-nav__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 8px var(--rust-dim); flex-shrink: 0; } .sf-nav__brand { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; text-decoration: none; transition: color 0.2s ease; } .sf-nav__sep { width: 1px; height: 16px; background: var(--border-md); flex-shrink: 0; } .sf-nav__page { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 13px; color: var(--text-sec); white-space: nowrap; transition: color 0.2s ease; } /* Center links */ .sf-nav__center { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; } .sf-nav__link { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 13px; color: var(--text-sec); text-decoration: none; padding: 4px 10px; border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; white-space: nowrap; } .sf-nav__link:hover { color: var(--text); background: var(--surface3); } .sf-nav__link--active { color: var(--rust); background: var(--rust-dim); } .sf-nav__link--active:hover { color: var(--rust); background: var(--rust-dim); } /* Right cluster: theme toggle + sign out */ .sf-nav__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; } /* Theme toggle button */ .sf-nav__theme-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; border-radius: 6px; cursor: pointer; color: var(--text-sec); transition: color 0.15s ease, background 0.15s ease; flex-shrink: 0; } .sf-nav__theme-btn:hover { color: var(--text); background: var(--surface3); } .sf-nav__theme-btn svg { display: block; } /* Sign out link */ .sf-nav__signout { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 13px; color: var(--text-dim); text-decoration: none; padding: 4px 10px; border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; cursor: pointer; white-space: nowrap; } .sf-nav__signout:hover { color: var(--red); background: rgba(239, 68, 68, 0.08); } /* ── Responsive: hide center links on mobile ──────────────── */ @media (max-width: 767px) { .sf-nav__center { display: none; } }