/** * Behavior Compass — skin flourishes + theme switcher. * * Loaded after compass-base.css. Everything here is keyed by the * [data-skin="…"] attribute the app sets on , so one stylesheet covers * every theme. Colors reference the live theme tokens (var(--bc-*)) so each * flourish recolors itself automatically. */ /* ─── Theme picker — gear toggle + popover menu ─────────────────────────── */ .bc-theme-control { position: relative; grid-column: 3; justify-self: end; } .bc-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: var(--bc-surface); border: 1.5px solid var(--bc-border); border-radius: var(--bc-radius); color: var(--bc-muted); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.12s; } .bc-theme-toggle:hover { color: var(--bc-fg); border-color: var(--bc-accent); } .bc-theme-toggle:focus-visible { outline: none; border-color: var(--bc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-accent) 30%, transparent); } .bc-theme-toggle:active { transform: scale(0.95); } .bc-theme-toggle svg { width: 20px; height: 20px; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .bc-theme-toggle[aria-expanded="true"] { color: var(--bc-fg); border-color: var(--bc-accent); } .bc-theme-toggle[aria-expanded="true"] svg { transform: rotate(60deg); } .bc-theme-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: min(248px, calc(100vw - 24px)); max-height: min(70dvh, 460px); overflow-y: auto; overscroll-behavior: contain; padding: 7px; background: var(--bc-surface); border: 1.5px solid var(--bc-border); border-radius: var(--bc-radius); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.32); transform-origin: top right; animation: bc-menu-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both; text-align: left; } .bc-theme-menu[hidden] { display: none; } @keyframes bc-menu-in { from { opacity: 0; transform: scale(0.94) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } } .bc-theme-menu-label { display: block; padding: 4px 8px 8px; font-family: var(--bc-font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bc-muted); } .bc-theme-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 10px; background: transparent; border: 1.5px solid transparent; border-radius: var(--bc-radius); color: var(--bc-fg); font-family: var(--bc-font-mono); font-size: 13px; letter-spacing: 0.04em; text-align: left; cursor: pointer; transition: background 0.16s, border-color 0.16s, color 0.16s; } .bc-theme-row + .bc-theme-row { margin-top: 2px; } .bc-theme-row:hover { background: var(--bc-surface-2); } .bc-theme-row:focus-visible { outline: none; border-color: var(--bc-accent); } .bc-theme-row.is-active { border-color: var(--bc-accent); background: color-mix(in srgb, var(--bc-accent) 12%, var(--bc-surface)); } .bc-theme-row-name { flex: 1; min-width: 0; } .bc-theme-row-check { color: var(--bc-accent); font-size: 14px; line-height: 1; opacity: 0; } .bc-theme-row.is-active .bc-theme-row-check { opacity: 1; } .bc-theme-swatch { display: inline-grid; grid-template-columns: 1fr 1fr; width: 18px; height: 18px; border-radius: calc(var(--bc-radius) * 0.6); overflow: hidden; border: 1px solid rgba(128, 128, 128, 0.35); flex-shrink: 0; } .bc-theme-swatch i { display: block; } /* ─── tactical — restrained neon over obsidian ──────────────────────────── */ [data-skin="tactical"] body { background: linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px), radial-gradient( 1000px 620px at 50% -18%, color-mix(in srgb, var(--bc-accent) 5%, transparent), transparent 62% ), var(--bc-bg); background-size: 18px 18px, 18px 18px, auto, auto; background-attachment: fixed; } [data-skin="tactical"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.008) 0, rgba(255, 255, 255, 0.008) 1px, transparent 1px, transparent 3px ); } [data-skin="tactical"] .bc-title { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 0 16px color-mix(in srgb, var(--bc-accent) 10%, transparent); } [data-skin="tactical"] .bc-svg { /* luminous amber glow + soft elevation: a backlit instrument bezel */ filter: drop-shadow( 0 0 18px color-mix(in srgb, var(--bc-accent) 22%, transparent) ) drop-shadow(0 10px 26px rgba(0, 0, 0, 0.42)); } /* ─── glass — deep, soft, premium dark ──────────────────────────────────── */ [data-skin="glass"] body { background: radial-gradient( 900px 560px at 85% -8%, color-mix(in srgb, var(--bc-accent) 12%, transparent), transparent 55% ), radial-gradient( 700px 500px at 0% 100%, color-mix(in srgb, var(--bc-pos) 8%, transparent), transparent 55% ), var(--bc-bg); background-attachment: fixed; } [data-skin="glass"] .bc-console, [data-skin="glass"] .bc-panel, [data-skin="glass"] .bc-summary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 40px rgba(0, 0, 0, 0.35); } [data-skin="glass"] .bc-title { text-shadow: 0 0 24px color-mix(in srgb, var(--bc-accent) 22%, transparent); } /* ─── paper — premium light, soft elevation ─────────────────────────────── */ [data-skin="paper"] body { background: radial-gradient( 1200px 700px at 82% -10%, color-mix(in srgb, var(--bc-gold, var(--bc-accent)) 8%, transparent), transparent 55% ), var(--bc-bg); background-attachment: fixed; } [data-skin="paper"] .bc-console, [data-skin="paper"] .bc-panel, [data-skin="paper"] .bc-summary { box-shadow: 0 1px 2px rgba(20, 30, 50, 0.05), 0 10px 28px rgba(20, 30, 50, 0.07); } [data-skin="paper"] .bc-panel, [data-skin="paper"] .bc-summary { padding: 22px; } [data-skin="paper"] .bc-panel { border-left-width: 4px; } [data-skin="paper"] .bc-title { font-weight: 600; position: relative; display: inline-block; padding-bottom: 4px; } [data-skin="paper"] .bc-title::after { content: ""; position: absolute; left: 1px; bottom: -6px; width: 46px; height: 4px; border-radius: 2px; background: var(--bc-gold, var(--bc-accent)); } /* ─── editorial — bold, brutalist rules ─────────────────────────────────── */ [data-skin="editorial"] body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 7px; background: var(--bc-accent); z-index: 6; } [data-skin="editorial"] .bc-title { font-size: clamp(40px, 12vw, 80px); line-height: 0.86; } [data-skin="editorial"] .bc-subtitle { font-weight: 700; } [data-skin="editorial"] .bc-console, [data-skin="editorial"] .bc-panel, [data-skin="editorial"] .bc-summary, [data-skin="editorial"] .bc-tab, [data-skin="editorial"] .bc-chip, [data-skin="editorial"] .bc-btn, [data-skin="editorial"] .bc-adj-input, [data-skin="editorial"] .bc-adj-add, [data-skin="editorial"] .bc-theme-toggle { border-width: 2px; } [data-skin="editorial"] .bc-panel { border-left-width: 7px; } [data-skin="editorial"] #bc-subject { border-bottom-width: 2px; } [data-skin="editorial"] .bc-panel-title, [data-skin="editorial"] .bc-summary-title { font-family: var(--bc-font-display); font-size: 22px; letter-spacing: 0.06em; } /* ─── mono — minimalist, Swiss, hairline ────────────────────────────────── */ [data-skin="mono"] body { background: var(--bc-bg); } [data-skin="mono"] .bc-console, [data-skin="mono"] .bc-panel, [data-skin="mono"] .bc-summary, [data-skin="mono"] .bc-theme-toggle, [data-skin="mono"] .bc-tab { border-width: 1px; box-shadow: none; } [data-skin="mono"] .bc-panel { border-color: var(--bc-line); border-left: 2px solid var(--bc-accent); } [data-skin="mono"] .bc-console, [data-skin="mono"] .bc-summary { border-color: var(--bc-line); } [data-skin="mono"] .bc-title { font-weight: 700; }