/* * Landing page — dark. * * The console runs on #0e0e0e. Leaving the landing page on the template's * #e4e4e4 meant crossing a hard seam every time you moved between them, so this * inverts the marketing palette to match. * * WHY THIS IS A VARIABLE OVERRIDE AND NOT A REWRITE * * webflow.css is vendored verbatim, and its palette variables turned out to be * almost perfectly role-separated: --lightgrey appears 71 times and is a * background every single time; --grey appears in 233 border declarations and * essentially nowhere else. Redefining the variables therefore inverts the whole * page without touching a single compiled rule. * * Two variables are NOT role-separated — --dark is a text colour 29 times and a * background 15 times, and --light is a background 46 times and a text colour 6 * times. Inverting them naively would produce dark text on dark blocks. I cross- * referenced both lists against the classes this site actually renders: none of * the 15 --dark-background classes appear on our page (they belong to deleted * template sections — .team-nav-button, .port-hero-info-decor, .cookie-tabs-link * and so on), and the only surviving --light-as-text rule is .w--current, fixed * explicitly at the bottom of this file. * * SCOPING * * `:root:has(.sp-marketing)` rather than a bare `:root`. Stylesheet links * persist across client-side navigation, so a bare :root override would follow * the user into the console and fight the product tokens. Keying on a wrapper * element the marketing layout renders means the override applies only while a * marketing page is actually mounted. */ :root:has(.sp-marketing) { /* Backgrounds */ --lightgrey: #0e0e0e; /* page */ --light: #181818; /* raised sections and cards */ --white: #181818; /* Text. --darklighter is here, not with the backgrounds, because the Sefi sections use it as their body-text colour (Hero, CapitalIncubation, Header). The four webflow rules that paint a background with it — .graphic-block, .portfolio-link, .apply-intro-text-2, .button-outline-text-2 — all belong to deleted template sections and never render. */ --dark: #f2f2f0; --darklighter: #f2f2f0; --dark-60: #9a9996; /* Rules and borders — the template's line grid */ --grey: #2e2e2c; --lightergrey: #3a3a37; /* --orange is unchanged. It is the one colour that works on both. */ } /* * The nav's active link is the single rule that used --light as a text colour. * With --light now a dark surface it would render invisible, so it is pinned to * the text colour directly. */ :root:has(.sp-marketing) .w--current { color: #f2f2f0; } /* * The template paints its own background on , which sits outside the * wrapper. Without this the real page background stays light and shows through * at overscroll. */ :root:has(.sp-marketing) .body { background-color: #0e0e0e; color: #f2f2f0; } /* * The mobile-menu icons are flat SVGs stroked #4E4E4E, which measures 2.3:1 on * #0e0e0e — under the 3:1 WCAG minimum for a non-text UI control. They are * tags, so the stroke cannot be restyled; inverting maps #4E4E4E to * #B1B1B1, which measures 9.0:1. The icons are single-colour, so an invert has * no other visible effect. */ :root:has(.sp-marketing) img[src*="ico_hamburger"] { filter: invert(1); }