/* bc-chrome.css — the one terminal-nav chrome, shared by the landing and the plugin page (/install). Single source of truth: home.css and install.css must not redefine these. Scoped under .bc-chrome. Two themes, resolved from the browser (prefers-color-scheme) or the saved preference and stamped as data-theme on before first paint. Dark is the terminal at night; light is the same terminal on paper — green-cast ink, the identical layout, and code/terminal panes stay dark in both. */ .bc-chrome { --bc-bg: #070907; --bc-ink: #e8efe9; --bc-ink-hi: #eafff1; --bc-mut: #8b968e; --bc-dim: #55605a; --bc-faint: #43504a; --bc-green: #1ed760; --bc-green-hi: #35e474; --bc-green-text: #7fdca4; --bc-surface: rgba(255, 255, 255, 0.04); --bc-surface-2: rgba(255, 255, 255, 0.06); --bc-surface-3: rgba(255, 255, 255, 0.11); --bc-border: rgba(255, 255, 255, 0.07); --bc-border-2: rgba(255, 255, 255, 0.12); --bc-card: rgba(15, 21, 17, 0.85); --bc-hairline: rgba(255, 255, 255, 0.06); } :root[data-theme="light"] .bc-chrome { --bc-bg: #f2f6f2; --bc-ink: #0d130f; --bc-ink-hi: #04150b; --bc-mut: #57645b; --bc-dim: #7f8c83; --bc-faint: #a3afa6; --bc-green: #1ed760; --bc-green-hi: #17b552; --bc-green-text: #0f8a41; --bc-surface: rgba(13, 19, 15, 0.04); --bc-surface-2: rgba(13, 19, 15, 0.06); --bc-surface-3: rgba(13, 19, 15, 0.1); --bc-border: rgba(13, 19, 15, 0.1); --bc-border-2: rgba(13, 19, 15, 0.16); --bc-card: rgba(255, 255, 255, 0.75); --bc-hairline: rgba(13, 19, 15, 0.08); } /* Same-origin page swaps crossfade in supporting browsers (both pages must carry this rule; docs.css declares its own). */ @view-transition { navigation: auto; } /* the landing's static ambient glow, for pages without the dynamic doodle glow */ .bc-chrome-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(50% 42% at 50% 38%, rgba(30, 215, 96, 0.05), transparent 70%); } :root[data-theme="light"] .bc-chrome-glow { background: radial-gradient(50% 42% at 50% 38%, rgba(30, 215, 96, 0.09), transparent 70%); } .bc-head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; } .bc-nav { display: flex; align-items: center; gap: 8px; font-size: 13px; } .bc-pill { font-size: 13px; color: var(--bc-mut); background: var(--bc-surface); border: 1px solid var(--bc-border); border-radius: 999px; padding: 7px 17px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; transition: color var(--dur-1, 0.15s) ease, background var(--dur-1, 0.15s) ease; } .bc-pill:hover { color: var(--bc-ink-hi); } .bc-pill .bc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bc-green); box-shadow: 0 0 10px rgba(30, 215, 96, 0.8); } .bc-navlink { color: var(--bc-mut); } .bc-navlink:hover { color: var(--bc-ink); } .bc-navlink.pad { margin-left: 6px; } /* one "you are here" language everywhere: the current item wears the green fill */ .bc-pill.is-on, .bc-navlink.is-current { color: var(--bc-ink-hi); background: rgba(30, 215, 96, 0.1); border: 1px solid rgba(30, 215, 96, 0.3); border-radius: 999px; padding: 7px 17px; } .bc-head-r { display: flex; align-items: center; gap: 18px; } .bc-signin { font-size: 13.5px; color: var(--bc-ink-hi); background: var(--bc-surface-2); border: 1px solid var(--bc-border-2); border-radius: 999px; padding: 9px 20px; white-space: nowrap; cursor: pointer; transition: background var(--dur-1, 0.15s) ease; } .bc-signin:hover { background: var(--bc-surface-3); } /* narrow screens: drop secondary text links (they live in the footer), keep the curl/feed pills + sign-in */ @media (max-width: 620px) { .bc-head { padding: 16px 18px; gap: 10px; } .bc-nav .bc-navlink { display: none; } .bc-nav { gap: 7px; } .bc-pill { padding: 7px 14px; } .bc-head-r { gap: 12px; } .bc-signin { padding: 8px 16px; } }