/* Cream light theme — applied when has class "theme-cream".
Scoped overrides only; style.css is the source of truth. */
html.theme-cream {
/* Variable swap — this alone flips most of the site, because style.css
uses var(--white) and var(--black) extensively. The pairs invert
symmetrically: a "white badge on black bg" becomes a "dark badge on
cream bg", which reads correctly. */
--white: #1A1A1A;
--white-50: #6B6B6B;
--black: #F8F7F2;
--black-50: rgba(26, 26, 26, 0.5);
--card-fill: transparent;
}
/* Page background. .body-black sets background-color via var(--black),
so the variable swap above already handles this — but assert it
explicitly in case a hardcoded #000 sneaks in somewhere. */
html.theme-cream body.body-black {
background-color: #F8F7F2;
color: #1A1A1A;
}
/* Hardcoded #fff text colors that don't go through var(--white).
These are the y0-specific selectors only — Webflow boilerplate
(.styleguide-*, .intro-header, .utility-page-wrap, etc.) is not
used on any live page so we leave it alone. */
html.theme-cream .primary-button,
html.theme-cream .navbar-brand,
html.theme-cream .navbar-brand:hover,
html.theme-cream .text-block,
html.theme-cream .text-block-4 {
color: #1A1A1A;
}
/* Hardcoded #1a1b1f / #1a1a1a backgrounds → transparent + thin border.
These are the "card" surfaces from the Webflow export. */
html.theme-cream [style*="background-color: #1a1a1a"],
html.theme-cream [style*="background-color:#1a1a1a"] {
background-color: transparent !important;
border: 1px solid #E0DED8 !important;
}
/* Known card / dark-section selectors with hardcoded fills (lines
2282, 2414, 2981 use #1a1b1f; lines 3691, 3862, 4630 use #1a1a1a).
Map them by the most distinctive class on each rule. Add more here
if Task 5's browser sweep finds dark patches still visible on cream. */
html.theme-cream .signup-form,
html.theme-cream .signup-form-2,
html.theme-cream .blog-post-summary,
html.theme-cream .pricing-card,
html.theme-cream .stats-card,
html.theme-cream .feature-card {
background-color: transparent !important;
border: 1px solid #E0DED8 !important;
}
/* Theme toggle — glassmorphic floating button with feather-style sun/moon
SVG icons. Theme-aware fill: dark glass on dark theme, light glass on
cream. backdrop-filter is progressive — without it the rgba background
alone keeps the button readable on either surface. */
.theme-toggle {
position: fixed;
bottom: 24px;
right: 24px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.15);
background-color: rgba(20, 20, 20, 0.55);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
opacity: 0.55;
z-index: 9999;
-webkit-appearance: none;
appearance: none;
transition: opacity 0.2s ease, transform 0.2s ease,
background-color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { opacity: 1; transform: scale(1.06); }
.theme-toggle:active { transform: scale(0.94); }
/* Touch devices: there's no hover, so don't leave the button at low
opacity. Show it confidently at rest. */
@media (hover: none) {
.theme-toggle { opacity: 0.85; }
}
.theme-toggle:focus-visible {
outline: 2px solid rgba(255, 204, 0, 0.6);
outline-offset: 3px;
opacity: 1;
}
.theme-toggle svg {
width: 18px;
height: 18px;
display: block;
}
/* Cream variant — flip the glass tones. */
html.theme-cream .theme-toggle {
border-color: rgba(26, 26, 26, 0.15);
background-color: rgba(248, 247, 242, 0.7);
color: rgba(26, 26, 26, 0.9);
}
html.theme-cream .theme-toggle:focus-visible {
outline-color: rgba(26, 26, 26, 0.5);
}
/* ----- Patches from browser sweep ----- */
/* Nav and surrounding rules hardcode #fff for color, so they stay white
on cream and become invisible. Flip to dark. */
html.theme-cream .link,
html.theme-cream .section-4,
html.theme-cream .social-icon,
html.theme-cream .menu-button-2,
html.theme-cream .menu-button-2.w--open,
html.theme-cream .w-nav-button.w--open {
color: #1A1A1A;
}
/* Hero CTAs (.nav_cta_text) and newsletter pill (.nav_cta_text-2) on
main are ghost outlines: 1px translucent-white border + 85% white text
on transparent fill. On cream those translucent whites disappear.
Mirror with solid #1A1A1A — translucent dark on cream reads dirty
rather than refined, per earlier design pass.
Force transparent fill explicitly to defend against (a) any cached
pre-refactor style.css that still has the #1a1a1a or var(--black-50)
fill, (b) future Webflow re-exports that might reintroduce one.
Exclude .primary because its filled var(--white) bg is the
intentional dark CTA on cream. */
html.theme-cream .nav_cta_text:not(.primary),
html.theme-cream .nav_cta_text-2 {
background-color: transparent;
border-color: #1A1A1A;
color: #1A1A1A;
}
/* Hover: dark theme uses var(--brand-yellow) bg + var(--black) text =
dark-on-yellow. On cream var(--black) flips to cream, so yellow + cream
text has no contrast. Re-assert dark text for cream hover. (The
.nav_cta_text-2:hover rule on main hardcodes #000 + #fc0, which works
identically on either theme — no override needed there.) */
html.theme-cream .nav_cta_text:hover {
color: #1A1A1A;
}
/* Mobile menu drawer — hardcoded #000 background on the open state. */
html.theme-cream .nav-menu-wrapper-2 {
background-color: #F8F7F2;
}
/* Inline style on program-manager.html "we're hiring!" badge hardcodes
rgba(255,255,255,0.4). Match via attribute selector — !important is
required to beat the inline color declaration. Solid dark, not
translucent — opacity-on-cream looks dirty. */
html.theme-cream [style*="rgba(255,255,255,0.4)"],
html.theme-cream [style*="rgba(255, 255, 255, 0.4)"] {
color: #1A1A1A !important;
}
/* Multicolor wordmark logo (y0-multicolor.svg) is white-filled — invisible
on cream. Swap to a dark-filled variant; the yellow period accent is
preserved in the new file. content: url() on ![]()
works in modern
browsers and avoids inlining the SVG. */
html.theme-cream img[src$="y0-multicolor.svg"] {
content: url("images/y0-multicolor-dark.svg");
}
/* world-map.png is pure white pixels on transparent — built for dark.
On cream it disappears entirely. Invert flips white → black; the
transparent areas pass through unchanged. */
html.theme-cream img[src$="world-map.png"] {
filter: invert(1);
}
/* globe.png is pure brand-yellow on transparent. Match the world-map
treatment — brightness(0) drops it to pure black on cream so the two
illustrations read as a coherent pair. */
html.theme-cream img[src$="globe.png"] {
filter: brightness(0);
}