/* ============================================================ 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; } } /* ══════════════════════ operational notice banner ══════════════════════ Staff-published banner (shared/sf-notice.js). Sits in normal flow at the top of and pushes the page down: a fixed overlay on a canvas app covers the toolbar the reader needs in order to act on the warning. */ .sf-notice { position: relative; z-index: 500; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px 0 12px; font: 500 12.5px/1 var(--sans, system-ui, sans-serif); color: var(--sf-notice-fg, #0a0a0c); background: var(--sf-notice-bg, #34d399); border-bottom: 1px solid rgba(0, 0, 0, 0.18); overflow: hidden; animation: sf-notice-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes sf-notice-in { from { transform: translateY(-100%); } } .sf-notice[data-severity="info"] { --sf-notice-bg: #34d399; --sf-notice-fg: #062018; } .sf-notice[data-severity="warn"] { --sf-notice-bg: #fbbf24; --sf-notice-fg: #241a02; } .sf-notice[data-severity="critical"] { --sf-notice-bg: #f87171; --sf-notice-fg: #2a0707; } .sf-notice-ico { display: inline-flex; flex: none; } .sf-notice-ico svg { width: 15px; height: 15px; } .sf-notice[data-severity="critical"] .sf-notice-ico { animation: sf-notice-pulse 1.6s ease-in-out infinite; } @keyframes sf-notice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* The track clips; the message scrolls inside it only when it overflows. */ .sf-notice-track { flex: 1; min-width: 0; overflow: hidden; } .sf-notice-msg { white-space: nowrap; } .sf-notice.is-scrolling .sf-notice-msg { display: inline-block; padding-left: 100%; animation: sf-notice-marquee var(--sf-notice-dur, 18s) linear infinite; } @keyframes sf-notice-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } .sf-notice.is-scrolling:hover .sf-notice-msg { animation-play-state: paused; } .sf-notice-left { flex: none; font: 600 11px/1 var(--mono, ui-monospace, monospace); opacity: 0.72; font-variant-numeric: tabular-nums; } .sf-notice-x { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; opacity: 0.65; transition: opacity 0.15s, background 0.15s; } .sf-notice-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.12); } .sf-notice-x svg { width: 12px; height: 12px; } /* The app shell is 100vh; without this the banner would push the canvas out of the viewport and create a scrollbar on a page that must never scroll. */ html.sf-has-notice .app { height: calc(100vh - 34px); } @media (prefers-reduced-motion: reduce) { .sf-notice { animation: none; } .sf-notice.is-scrolling .sf-notice-msg { animation: none; padding-left: 0; } .sf-notice[data-severity="critical"] .sf-notice-ico { animation: none; } }