/* ============================================================================ SignalGround Universal Shell — header + footer styles ---------------------------------------------------------------------------- Injected by /sg-shell.js into every FB-* HTML page via server middleware. Pages opt out with data-no-shell on or (e.g. signalground-auth.html which has its own topbar). Light Fluent theme, Azure Blue #0078D4, Segoe UI. Added 2026-05-21. ============================================================================ */ /* CSS custom properties scoped to shell elements only, so we don't collide with page-level vars. Page styles take precedence everywhere else. */ #sg-header-mount, #sg-footer-mount { --sg-shell-blue: #0078D4; --sg-shell-blue-dark: #106EBE; --sg-shell-bg: #ffffff; --sg-shell-bg-soft: #F3F2F1; --sg-shell-text: #323130; --sg-shell-text-dim: #605E5C; --sg-shell-border: #EDEBE9; } /* ---------- HEADER ---------- */ .sg-shell-header { position: sticky; top: 0; z-index: 9999; height: 56px; background: var(--sg-shell-bg); border-bottom: 1px solid var(--sg-shell-border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.04); box-sizing: border-box; } .sg-shell-brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--sg-shell-text); } .sg-shell-brand-text { font-weight: 600; font-size: 18px; color: var(--sg-shell-blue); letter-spacing: 0.2px; } .sg-shell-brand-text em { font-style: normal; color: var(--sg-shell-text); } .sg-shell-brand-tag { font-size: 12px; color: var(--sg-shell-text-dim); font-weight: 500; border-left: 1px solid var(--sg-shell-border); padding-left: 16px; white-space: nowrap; } .sg-shell-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; } .sg-shell-org { font-weight: 600; color: var(--sg-shell-text); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sg-shell-tier { padding: 2px 8px; background: var(--sg-shell-blue); color: white; border-radius: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; } .sg-shell-code { color: var(--sg-shell-text-dim); font-family: 'Consolas', 'Courier New', monospace; font-size: 12px; } .sg-shell-dash { padding: 6px 14px; background: var(--sg-shell-blue); color: white; text-decoration: none; border-radius: 3px; font-size: 13px; font-weight: 500; transition: background 0.15s ease; border: 0; cursor: pointer; font-family: inherit; } .sg-shell-dash:hover { background: var(--sg-shell-blue-dark); color: white; text-decoration: none; } /* ---------- FOOTER ---------- */ .sg-shell-footer { height: 48px; background: var(--sg-shell-bg-soft); border-top: 1px solid var(--sg-shell-border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 12px; color: var(--sg-shell-text-dim); box-sizing: border-box; margin-top: 24px; } .sg-shell-footer-meta { display: flex; gap: 16px; align-items: center; } .sg-shell-footer-meta a { color: var(--sg-shell-text-dim); text-decoration: none; transition: color 0.15s ease; } .sg-shell-footer-meta a:hover { color: var(--sg-shell-blue); text-decoration: underline; } /* ---------- MOBILE ---------- */ @media (max-width: 720px) { .sg-shell-header { padding: 0 12px; height: 52px; } .sg-shell-brand-tag { display: none; } .sg-shell-code { display: none; } .sg-shell-org { max-width: 120px; font-size: 12px; } .sg-shell-brand-text { font-size: 16px; } .sg-shell-footer { padding: 8px 12px; flex-direction: column; gap: 4px; justify-content: center; height: auto; } }