/* compliance.css — 3 plate variants. Activation: */ /* Default risk strip styles already in chrome.css. These override copy slot + add jurisdiction banner. */ .regulator-badges { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .regulator-badges .reg { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 4px 8px; border-radius: 4px; background: var(--bg-card-2); color: var(--text); border: 1px solid var(--border); } /* ─── 1 · single-regulator ─────────────────────────────── */ body[data-compliance="single-regulator"] .risk-strip .reg-rotator { display: none; } body[data-compliance="single-regulator"] .risk-strip .reg-single { display: inline; } /* ─── 2 · multi-regulator-strip · animated rotation ───── */ body[data-compliance="multi-regulator-strip"] .risk-strip .reg-single { display: none; } .reg-rotator { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); } .reg-rotator .reg-list { position: relative; display: inline-block; height: 1.4em; min-width: 5.5em; overflow: hidden; vertical-align: bottom; } .reg-rotator .reg-list span { display: block; height: 1.4em; line-height: 1.4em; color: var(--accent); font-weight: 600; animation: reg-roll 12s steps(1, end) infinite; } @keyframes reg-roll { 0%, 22% { transform: translateY(0); } 25%, 47% { transform: translateY(-1.4em); } 50%, 72% { transform: translateY(-2.8em); } 75%, 97% { transform: translateY(-4.2em); } 100% { transform: translateY(0); } } /* ─── 3 · restricted-jurisdiction-banner ───────────────── */ .restricted-banner { display: none; background: #fff7ed; color: #7c2d12; border-bottom: 1px solid #fed7aa; font-size: 13px; position: relative; z-index: 49; } [data-theme="dark"] .restricted-banner { background: rgba(251,146,60,.08); color: #FDBA74; border-bottom: 1px solid rgba(251,146,60,.25); } .restricted-banner .container { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; min-height: 60px; } .restricted-banner .icon { width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgba(251,146,60,.2); display: grid; place-items: center; font-weight: 800; color: #C2410C; } [data-theme="dark"] .restricted-banner .icon { color: #FDBA74; } .restricted-banner b { color: inherit; font-weight: 700; } .restricted-banner a { color: inherit; text-decoration: underline; } body[data-compliance="restricted-jurisdiction-banner"] .restricted-banner { display: block; }