/* ValWithProof — dark mode. Switched by , which /assets/theme.js sets before first paint from the person's choice or their device setting. The same three colours, inverted in role: the page is black, the type is white, and the "strong colour" — every token that meant "the filled button, the link, the active tab" — turns white too, with black type on it. The teal stays the accent. Grounds that were ALREADY dark in light mode (the hero bands, the brand plates) stay dark, lifted one step off the black so they still read as a surface. How the rest of the product follows: · every stylesheet keeps its own token names; this file re-points them; · the literals that used to be hard-coded (#fff panels, #000000 type, black-alpha hairlines) now read --th-* tokens with the old value as the fallback, so light mode is byte-for-byte what it was; · white type on a strong fill reads --th-on-strong, which is white in light mode and black in dark. The meeting room is not here: it has always been a dark room. */ :root{ --th-surface:#FFFFFF; --th-page:#FFFFFF; --th-ink:#000000; --th-ink-rgb:0, 0, 0; --th-ink2:#41556E; --th-muted:#54667D; --th-well:#F5F6F8; --th-hover:#F0F2F4; --th-line:#E7E9EC; --th-line-strong:#C9CFD6; --th-teal-wash:#F1FBFA; --th-teal-wash-2:#DEF5F4; --th-teal-line:#B9EAE7; --th-danger-wash:#F9EEED; --th-danger-line:#F0D4D2; --th-strong:#000000; --th-on-strong:#FFFFFF; --th-glass:rgba(255, 255, 255, .94); --th-surface-rgb:255, 255, 255; --th-danger:#B3261E; } :root[data-theme="dark"]{ color-scheme:dark; /* ── the shared literals ─────────────────────────────────────────────── */ --th-surface:#0E0F10; --th-page:#000000; --th-ink:#FFFFFF; --th-ink-rgb:255, 255, 255; --th-ink2:#C2C8CF; --th-muted:#9BA3AD; --th-well:#17181A; --th-hover:#1D1E21; --th-line:#26282B; --th-line-strong:#3A3D42; --th-teal-wash:rgba(22, 184, 176, .08); --th-teal-wash-2:rgba(22, 184, 176, .18); --th-teal-line:rgba(22, 184, 176, .42); --th-danger-wash:rgba(233, 119, 108, .12); --th-danger-line:rgba(233, 119, 108, .38); --th-strong:#FFFFFF; --th-on-strong:#000000; --th-glass:rgba(0, 0, 0, .86); --th-surface-rgb:10, 10, 11; --th-danger:#E9776C; /* ── shell family: shell.css, pay, profile, journey, attach, home ────── */ --navy:#111214; /* a dark ground, one step off the page */ --white:#FFFFFF; --bg:#000000; --bg-page:#000000; --bg-rail:#000000; --surface:#0E0F10; --surface-2:#17181A; --surface-hover:#1D1E21; --wash:rgba(22, 184, 176, .08); --wash-2:rgba(22, 184, 176, .18); --line:rgba(255, 255, 255, .12); --line-strong:rgba(255, 255, 255, .22); --line-teal:rgba(22, 184, 176, .5); --text:#FFFFFF; --text-2:#C2C8CF; --text-3:#9BA3AD; --brand:#FFFFFF; --brand-600:#FFFFFF; --brand-700:#FFFFFF; --indigo:#FFFFFF; --grad:linear-gradient(0deg, #FFFFFF, #FFFFFF); --grad-btn:linear-gradient(0deg, #FFFFFF, #FFFFFF); --ok:#FFFFFF; --warn:#FFFFFF; --down:#E9776C; --down-wash:rgba(233, 119, 108, .12); --glow:0 10px 24px -10px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); /* ── founder app + portals family: experts app.css, mentor, admin, investor, sign-in, founder-auth ────────────────────────────────── */ --panel:#0E0F10; --ink:#FFFFFF; --ink2:#C2C8CF; --muted:#9BA3AD; --line2:rgba(255, 255, 255, .07); --g900:#FFFFFF; --g800:#FFFFFF; --g700:#FFFFFF; --g600:#FFFFFF; --g500:#FFFFFF; --g100:rgba(22, 184, 176, .18); --g50:rgba(22, 184, 176, .08); --blue:#FFFFFF; --blue2:#FFFFFF; --gold:#FFFFFF; --gold-soft:#17181A; --danger:#E9776C; --danger-soft:rgba(233, 119, 108, .12); --warn-soft:#17181A; --info:#FFFFFF; --info-soft:rgba(22, 184, 176, .12); --surface-raised:#0E0F10; --well:#17181A; --grad-ink:linear-gradient(120deg, #111214 0%, #111214 100%); --grad-mark:linear-gradient(140deg, #111214 0%, #111214 100%); --e1:0 1px 2px rgba(0, 0, 0, .8); --e2:0 6px 18px -6px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .05); --e3:0 22px 50px -18px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .07); } :root[data-theme="dark"] body{background-color:var(--bg, #000);color:var(--th-ink)} /* Images that are drawn as black-on-transparent (a wordmark, a diagram) would vanish; photographs must not be touched. Only opted-in images flip. */ :root[data-theme="dark"] img[data-invert-dark]{filter:invert(1) hue-rotate(180deg)} /* Form controls the browser draws itself follow color-scheme above; the ones the product styles read the tokens. Autofill paints its own yellow unless told otherwise. */ :root[data-theme="dark"] input:-webkit-autofill{ -webkit-text-fill-color:#FFFFFF; -webkit-box-shadow:0 0 0 1000px #17181A inset; } :root[data-theme="dark"] ::selection{background:rgba(22, 184, 176, .35);color:#FFFFFF} /* Dark grounds: the brand plates and hero bands keep a hairline so they read as a surface on a black page rather than a hole in it. */ :root[data-theme="dark"] .xhero, :root[data-theme="dark"] .hero{box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .1)} /* ── the switch ───────────────────────────────────────────────────────── */ .vwp-theme-btn{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:36px;height:36px;padding:0;margin-left:8px;border-radius:999px;cursor:pointer; color:var(--th-ink);background:transparent;border:1px solid rgba(var(--th-ink-rgb), .14); transition:background-color .16s ease, border-color .16s ease, transform .16s ease; } .vwp-theme-btn:hover{background:rgba(var(--th-ink-rgb), .06);border-color:rgba(var(--th-ink-rgb), .26)} .vwp-theme-btn:active{transform:scale(.94)} .vwp-theme-btn:focus-visible{outline:2px solid #16B8B0;outline-offset:2px} .vwp-theme-btn svg{display:block} .vwp-theme-btn.is-floating{ position:fixed;right:16px;top:16px;z-index:9990;margin:0; background:var(--th-surface);box-shadow:0 4px 14px -6px rgba(0, 0, 0, .35); } @media (prefers-reduced-motion:reduce){ .vwp-theme-btn{transition:none} } /* ── grounds that were navy-into-strong gradients ───────────────────────── In light mode these ran from the navy into the strong colour; in dark the strong colour is white, so the gradient would end in a white corner under white type. They are the flat dark ground instead, which is what they were standing in for. */ :root[data-theme="dark"] .xhero, :root[data-theme="dark"] .ring-top, :root[data-theme="dark"] .ringsheet-top, :root[data-theme="dark"] .door.mentor, :root[data-theme="dark"] .door.mentor:hover, :root[data-theme="dark"] .arrive{background:var(--navy)} :root[data-theme="dark"] .ring-top, :root[data-theme="dark"] .ringsheet-top, :root[data-theme="dark"] .door.mentor, :root[data-theme="dark"] .arrive{box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .1)} /* The founder sign-up button: the product's primary action, white on black. */ :root[data-theme="dark"] button.go{background:#FFFFFF;color:#000000;box-shadow:none} /* Pale-teal type that sat on a navy ground or a strong fill. On the dark hero it is the accent itself; on a fill that turned white it is the black type at a step down. */ :root[data-theme="dark"] .xhero .eyebrow{color:var(--teal, #16B8B0)} :root[data-theme="dark"] .slotr.on .slotr-th, :root[data-theme="dark"] .when.live span{color:rgba(0, 0, 0, .62)}