/* ========================================================================== docs-modern.css — instrument-grade dark refresh for the docs subdomain. Linked ONLY by docs pages, AFTER theme.css, so it overrides theme.css's dark-theme design tokens (and a few shared component classes) to match the modernized marketing system (#06080f canvas, blue->violet accent, hairline panels, IBM Plex). It does NOT touch /app, /auth, /sanctuary, or marketing pages (they don't link this file), and the LIGHT theme is left untouched. ========================================================================== */ /* --- Dark design tokens: remap theme.css -> instrument-grade system --- */ :root[data-theme="dark"], [data-theme="dark"] { --bg-primary: #06080f; --bg-secondary: #0b0f1a; --bg-tertiary: #0e1626; --bg-card: rgba(12, 17, 29, 0.92); --bg-header: rgba(6, 8, 15, 0.92); --accent-primary: #5b9ee8; --accent-primary-strong: #3f7fcf; --accent-governance: #8b5cf6; --accent-secondary: #c8a84e; --accent-safe: #4ade80; --accent-alert: #f87171; --accent-warning: #fbbf24; --text-primary: #eef2fb; --text-secondary: #aeb9cd; --text-heading: #f3f6fc; --text-muted: #7f8caa; --text-on-accent: #ffffff; /* elevation surfaces -> layered hairline panels */ --surface-0: #06080f; --surface-0-border: rgba(255,255,255,0.05); --surface-1: #0c111d; --surface-1-border: #1b2536; --surface-2: #0e1626; --surface-2-border: #26324b; --surface-3: #111a2c; --surface-3-border: #2b3852; --surface-4: #16233b; --surface-4-border: #33415e; --text-on-0: #eef2fb; --text-muted-on-0: #aeb9cd; --text-on-1: #eef2fb; --text-muted-on-1: #aeb9cd; --text-on-2: #eef2fb; --text-muted-on-2: #aeb9cd; --text-on-3: #eef2fb; --text-muted-on-3: #aeb9cd; --text-on-4: #eef2fb; --text-muted-on-4: #aeb9cd; --gradient-accent: linear-gradient(135deg, #5b9ee8 0%, #74a4ee 42%, #8b5cf6 100%); } /* --- Canvas: force the new near-black bg (pages hardcode #0a0e1a inline) --- */ [data-theme="dark"] body { background: #06080f !important; color: var(--text-secondary); } /* --- Atmosphere: faint engineering grid that fades toward the top edges --- */ [data-theme="dark"] body { position: relative; } [data-theme="dark"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(123,167,238,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(123,167,238,.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 72%); } [data-theme="dark"] body > * { position: relative; z-index: 1; } /* The rule above flattens every direct child to z-index:1 / position:relative. That also demotes the sticky site header (.hdr is z-index:100) down to the same layer as the page content that follows it, so its hover dropdowns paint UNDERNEATH that content and snap shut the moment the cursor leaves the trigger. Restore the header's own stacking + sticky behaviour with a higher-specificity selector. */ [data-theme="dark"] body > .hdr { position: sticky; z-index: 100; } /* --- Headings: gradient accent on the primary page title --- */ [data-theme="dark"] .doc-main h1, [data-theme="dark"] .container > h1:first-of-type { letter-spacing: -0.02em; } [data-theme="dark"] .doc-main h1 .grad, [data-theme="dark"] h1 .accent, [data-theme="dark"] .gradient-text { background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- Cards / callouts / panels -> layered hairline surfaces with hover lift --- */ [data-theme="dark"] .comparison-card, [data-theme="dark"] .metric-card, [data-theme="dark"] .callout, [data-theme="dark"] .feature-card, [data-theme="dark"] .doc-card, [data-theme="dark"] .card { background: linear-gradient(180deg, #0c111d, #0e1626) !important; border: 1px solid #1b2536 !important; border-radius: 14px !important; box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 14px 40px -28px rgba(5,10,22,.9); transition: transform .2s cubic-bezier(.22,.61,.36,1), border-color .2s, box-shadow .2s; } [data-theme="dark"] .comparison-card:hover, [data-theme="dark"] .metric-card:hover, [data-theme="dark"] .feature-card:hover, [data-theme="dark"] .doc-card:hover { transform: translateY(-3px); border-color: rgba(91,158,232,.5) !important; box-shadow: 0 22px 50px -26px rgba(91,158,232,.4); } /* success / safe callout keeps a green hairline accent */ [data-theme="dark"] .callout.success { border-left: 2px solid var(--accent-safe) !important; } [data-theme="dark"] .callout.warning { border-left: 2px solid var(--accent-warning) !important; } [data-theme="dark"] .callout:not(.success):not(.warning) { border-left: 2px solid var(--accent-primary) !important; } /* --- Code blocks / pre -> deep dark terminal surfaces --- */ [data-theme="dark"] .code-block, [data-theme="dark"] pre, [data-theme="dark"] .terminal { background: #06080f !important; border: 1px solid #1b2536 !important; border-radius: 12px !important; } /* --- Metric values pop with the accent gradient --- */ [data-theme="dark"] .metric-value { background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- Sidebar: mono labels, accent active state --- */ [data-theme="dark"] .doc-sidebar-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } [data-theme="dark"] .doc-sidebar a:hover, [data-theme="dark"] .doc-sidebar a.active { color: #9cc2f5; } /* --- Eyebrows / kickers / badges -> mono accent-tick treatment --- */ [data-theme="dark"] .eyebrow, [data-theme="dark"] .kicker, [data-theme="dark"] .doc-badge { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #bfd2f2; } /* --- Buttons: primary = accent gradient --- */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .button-primary, [data-theme="dark"] a.cta-primary { background: var(--gradient-accent) !important; border: none !important; color: #fff !important; box-shadow: 0 1px 1px rgba(0,0,0,.4), 0 10px 30px -12px rgba(123,99,230,.7); } /* --- Tables: hairline rows on dark --- */ [data-theme="dark"] table th { background: #0b101c; color: var(--text-muted); } [data-theme="dark"] table td, [data-theme="dark"] table th { border-bottom: 1px solid #1b2536; } /* --- Focus ring consistency --- */ [data-theme="dark"] a:focus-visible, [data-theme="dark"] button:focus-visible { outline: 2px solid #5b9ee8; outline-offset: 2px; }