/* ============================================================ RIVET — INFINITE GTM OS · Corporate Command (dark) surface Opt-in via on every OS-hierarchy page: os · the-8-models · desert-camel · infinite-pipeline · ai-score · ai-maturity · license. Black #000000 anchor, near-black cards, hairline elevation. Loaded AFTER rivet.css so the token flip wins on equal specificity; structural overrides are attribute-scoped so they beat inline single-class page themes regardless of source order. ============================================================ */ html[data-mode="dark"]{ color-scheme: dark; /* ---- Surfaces: pure-black ground, near-black cards ---- */ --paper: #000000; --paper-2:#0A0A0C; --paper-3:#12121A; --bg: #000000; /* ---- Text: ghost-white body, lifted slates for meta ---- */ --ink: #F8F8FA; /* headings / brand / eyebrow (os-theme sets these to --ink) */ --ink-2: #F8F8FA; --fg: #ECECF2; --fg-soft: #B7B7C6; --fg-mute: #8A8A99; --ink-mute: #8A8A99; /* ---- Lines: hairline on black ---- */ --line: #1E1E2A; --line-soft: rgba(255,255,255,0.08); --line-strong: #2C2C3A; --grid-line: rgba(255,255,255,0.045); /* ---- Cards: separate by hairline, not shadow ---- */ --card-bg: #0A0A0C; --card-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 20px 44px -28px rgba(0,0,0,0.9); --card-shadow-hover: 0 0 0 1px rgba(76,243,254,0.18), 0 26px 60px -30px rgba(0,0,0,0.9); --glass-bg: rgba(255,255,255,0.05); /* ---- Soft accent tints re-based for black ---- */ --magenta-soft: #2a0022; --cyan-soft: #062a31; --lilac-soft: #16112b; } /* Body ground (rivet.css sets body{background:var(--paper)} — flips automatically, but pin it so nothing paints white behind the fixed grid). */ /* Body ground — THE COMMAND duo across the entire page (black-dominant, cyan resolves at the top-right, fixed so it reads as one continuous field the whole scroll, never a flat cyan wash). */ html[data-mode="dark"] body{ background: radial-gradient(72% 55% at 88% 3%, color-mix(in oklab,var(--cyan) 20%, transparent) 0%, transparent 58%), linear-gradient(158deg, #000 44%, color-mix(in oklab,var(--cyan) 12%, #04131c) 100%); background-color:#000; background-attachment: fixed; color:var(--fg); } @media print{ html[data-mode="dark"] body{ background:#000 !important; } } /* ---- Engineering-grid substrate: grid lines only, NO opaque #000 base, so the fixed Command field on body shows through it (incl. behind the navbar and the whole scroll). ---- */ html[data-mode="dark"] .bg-field{ background: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-color:transparent; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 78%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 78%); } html[data-mode="dark"] .__bgfield_disabled{ background: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), #000; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 78%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 78%); } /* ---- Header chrome: dark liquid glass ---- award.css paints these light with !important, so we must match it. */ html[data-mode="dark"] .site-header__inner{ background: rgba(10,10,14,0.72) !important; border-color: var(--line) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important; } html[data-mode="dark"] .site-header.is-scrolled .site-header__inner{ background: rgba(10,10,14,0.92) !important; box-shadow: 0 8px 30px -14px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06) !important; border-color: var(--line) !important; } /* ---- Mega panel: dark frosted card ---- */ html[data-mode="dark"] .mega__card{ background: linear-gradient(180deg, #0C0C10, #08080A) !important; border: 1px solid var(--line) !important; box-shadow: 0 30px 70px -34px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05) !important; } /* ---- Mobile nav panel: dark frosted (award.css light with !important) ---- */ html[data-mode="dark"] .mobile-nav{ background: linear-gradient(155deg, #0C0C10, #08080A) !important; } html[data-mode="dark"] .mega__link:hover{ background: rgba(255,255,255,0.05); } html[data-mode="dark"] .mega__feature{ background: rgba(255,255,255,0.03); border-color: var(--line); } /* ---- Mega group titles + feature eyebrow: readable on the dark card ---- */ html[data-mode="dark"] .mega__group-label{ color:#EDEDF2 !important; } html[data-mode="dark"] .nav__item:has(button[data-nav="os"]) .mega__group-label{ color:var(--cyan) !important; } html[data-mode="dark"] .nav__item:has(button[data-nav="os"]) .mega__feature .eyebrow{ color:var(--cyan) !important; } /* ---- THE COMMAND duo on the OS mega card (black → cyan, bounded) ---- */ html[data-mode="dark"] .nav__item:has(button[data-nav="os"]) .mega__card{ background: radial-gradient(90% 120% at 96% 4%, color-mix(in oklab,var(--cyan) 16%, transparent) 0%, transparent 52%), linear-gradient(150deg, #08080A 46%, color-mix(in oklab,var(--cyan) 14%, #06121a) 100%) !important; } /* ---- Notification banner: keep the dark→purple gradient (was var(--ink)…) ---- */ html[data-mode="dark"] .notif{ background: linear-gradient(100deg, #0A0A0C 30%, #2a0a56 70%, #4a0a78); } /* ---- Skip link: --ink flipped to light, so restore dark-on-light ---- */ html[data-mode="dark"] .skip-link{ background: var(--ink); color: #000; } /* ---- Hero / alt-section grounds (os-theme paints these light) ---- */ html[data-mode="dark"] .phero, html[data-mode="dark"] .hero, html[data-mode="dark"] .hero--mem{ background: radial-gradient(130% 100% at 82% -18%, color-mix(in oklab, var(--cyan) 12%, #000), #000 60%); } html[data-mode="dark"] .section--alt{ background: linear-gradient(180deg, #000, #06060A); } html[data-mode="dark"] .section--paper{ background: #08080A; border-block-color: var(--line); } /* ---- Membership.css cards used on the-8-models & license (hardcoded #fff) ---- */ html[data-mode="dark"] .answer, html[data-mode="dark"] .price, html[data-mode="dark"] .course, html[data-mode="dark"] .schema__row, html[data-mode="dark"] .ccy__btn, html[data-mode="dark"] .ccy__menu{ background: var(--card-bg); border-color: var(--line); box-shadow: var(--card-shadow); } html[data-mode="dark"] .schema{ background: var(--line); border-color: var(--line); } html[data-mode="dark"] .schema__cap{ background:#0A0A0C; } /* ---- Ghost buttons: award.css paints them light-glass; darken for black ground. Leave the finale/ctaband/roi__out variants (already dark) untouched. ---- */ html[data-mode="dark"] .btn--ghost:not(.finale .btn--ghost):not(.ctaband .btn--ghost):not(.roi__out .btn--ghost){ background: rgba(255,255,255,0.06); border-color: var(--line-strong); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } html[data-mode="dark"] .btn--ghost:not(.finale .btn--ghost):not(.ctaband .btn--ghost):not(.roi__out .btn--ghost):hover{ background: rgba(255,255,255,0.12); border-color: var(--fg-mute); } /* Links inside dark content keep the corporate main colour (cyan) */ html[data-mode="dark"] a:not(.btn):not(.brand):not(.mega__link):not(.f2-col a):hover{ color: var(--cyan); }