/* ========================================================================== Theme tokens + dark mode. Loaded after the Webflow stylesheets, so these declarations win ties on equal specificity. Light-mode token values are identical to the colours that were hard-coded in robertwinters.webflow.css, so light mode looks exactly as it did before; dark mode swaps the token values only. Theme resolution order: 1. explicit choice on , written by js/theme.js 2. the OS preference, for first visits and when JavaScript is off ========================================================================== */ :root { color-scheme: light; --bg: #fff; --bg-elevated: #f9fafb; --bg-sunken: #edf0f3; --bg-pressed: #e0e3e6; --bg-footer: #0e0f11; --text: #0e0f11; --text-strong: #04173f; --text-body: #3c404b; --text-muted: #5e6875; --text-faint: #aaafb6; --border: #d0d4d9; --border-soft: #e0e3e6; --accent: #3a85ff; --accent-hover: #5b9aff; --accent-active: #2761fa; --accent-soft: #deebff; --accent-soft-strong: #bdd7ff; --on-accent: #fff; --danger: #d0342c; /* Webflow's own form defaults; kept as-is so light mode is unchanged. */ --input-text: #333; --input-placeholder: #999; --glow: #deebff; --glow-neutral: #edf0f3; --shadow: rgba(93, 99, 112, 0.15); --shadow-strong: rgba(93, 99, 112, 0.2); /* Filters for fixed-colour artwork (the wordmark, the signature). */ --logo-filter: none; --ink-filter: none; --ink-blend: normal; } /* No-JS / first-visit fallback: follow the OS unless light was chosen. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e0f11; --bg-elevated: #17191d; --bg-sunken: #1e2127; --bg-pressed: #262a31; --bg-footer: #08090a; --text: #f4f6f8; --text-strong: #dfe6f2; --text-body: #c2c9d2; --text-muted: #99a2ad; --text-faint: #7f8791; --border: #313640; --border-soft: #24282f; --accent: #6ea3ff; --accent-hover: #8fb8ff; --accent-active: #4b8bff; --accent-soft: #17243c; --accent-soft-strong: #1e3057; --on-accent: #0e0f11; --danger: #ff7875; --input-text: #c2c9d2; --input-placeholder: #7f8791; --glow: rgba(58, 133, 255, 0.16); --glow-neutral: rgba(0, 0, 0, 0.45); --shadow: rgba(0, 0, 0, 0.5); --shadow-strong: rgba(0, 0, 0, 0.65); --logo-filter: brightness(0) invert(1); --ink-filter: invert(1); --ink-blend: screen; } } /* Explicit choice. Listed last so it beats the OS preference either way. */ [data-theme="dark"] { color-scheme: dark; --bg: #0e0f11; --bg-elevated: #17191d; --bg-sunken: #1e2127; --bg-pressed: #262a31; --bg-footer: #08090a; --text: #f4f6f8; --text-strong: #dfe6f2; --text-body: #c2c9d2; --text-muted: #99a2ad; --text-faint: #7f8791; --border: #313640; --border-soft: #24282f; --accent: #6ea3ff; --accent-hover: #8fb8ff; --accent-active: #4b8bff; --accent-soft: #17243c; --accent-soft-strong: #1e3057; --on-accent: #0e0f11; --danger: #ff7875; --input-text: #c2c9d2; --input-placeholder: #7f8791; --glow: rgba(58, 133, 255, 0.16); --glow-neutral: rgba(0, 0, 0, 0.45); --shadow: rgba(0, 0, 0, 0.5); --shadow-strong: rgba(0, 0, 0, 0.65); --logo-filter: brightness(0) invert(1); --ink-filter: invert(1); --ink-blend: screen; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ body { background-color: var(--bg); color: var(--text); } p, ul { color: var(--text-body); } a { color: var(--accent); } blockquote { border-left: 1px solid var(--border); color: var(--text-body); } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ .heading { color: var(--text); } .heading.s.caption { color: var(--text-faint); } .body-text { color: var(--text-body); } .body-text.m.caption { color: var(--text-faint); } .tagline { color: var(--accent); } .bold-text { color: var(--text-strong); } .text-span-3 { color: var(--text-faint); } .input-caption { color: var(--text-muted); } .c-t-neutral-100 { color: var(--text); } .c-t-primary-60 { color: var(--accent); } .c-b-primary-10 { background-color: var(--accent-soft); } .avatar-label-text { color: var(--text); } /* -------------------------------------------------------------------------- Navbar -------------------------------------------------------------------------- */ .navbar { background-color: var(--bg); } .nav-link { color: var(--text-body); } .nav-link:hover, .nav-link.w--current { color: var(--accent-hover); } @media screen and (max-width: 991px) { .navbar-menu { background-color: var(--bg); } } /* -------------------------------------------------------------------------- Theme toggle -------------------------------------------------------------------------- */ .navbar-actions { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 4px; } .theme-toggle { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-left: 8px; border: 1px solid var(--border); border-radius: 50%; background-color: transparent; color: var(--text-body); cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-transition: color 250ms ease, border-color 250ms ease, background-color 250ms ease; transition: color 250ms ease, border-color 250ms ease, background-color 250ms ease; } .theme-toggle:hover { border-color: var(--accent-hover); background-color: var(--bg-elevated); color: var(--accent-hover); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* Show the icon for the theme the button switches *to*. */ .theme-toggle .theme-toggle-sun { display: none; } [data-theme="dark"] .theme-toggle .theme-toggle-sun { display: block; } [data-theme="dark"] .theme-toggle .theme-toggle-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .theme-toggle-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .theme-toggle-moon { display: none; } } @media screen and (max-width: 991px) { .theme-toggle { margin-right: 12px; margin-left: 0; } } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .button { background-color: var(--accent); color: var(--on-accent); } .button:hover, .button:focus { background-color: var(--accent-hover); } .button:active { background-color: var(--accent-active); } .button.outline { background-color: var(--bg); box-shadow: inset 0 0 0 1px var(--border); color: var(--text); } .button.outline:hover { background-color: var(--bg-sunken); } .button.medium, .button.medium:hover { box-shadow: 1px 10px 20px 1px var(--glow); } .button.medium.secondary, .button.medium.secondary:hover { background-color: var(--accent-soft); box-shadow: 4px 4px 20px 1px var(--glow); color: var(--accent); } .button.medium.secondary:active { background-color: var(--accent-soft-strong); color: var(--accent-active); } .button.medium.outline { box-shadow: 1px 10px 20px 1px var(--glow-neutral), inset 0 0 0 1px var(--border); } .button.medium.outline:hover { background-color: var(--bg-sunken); } .button.medium.outline:active { background-color: var(--bg-pressed); } .button.medium.outline:focus { background-color: var(--bg-elevated); } .link-icon:hover, .link-icon:focus { color: var(--accent-hover); } .link-icon:active { color: var(--accent-active); } .link-icon.icon-right { color: var(--accent); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .w-input, .w-select { background-color: var(--bg); border-color: var(--border); color: var(--input-text); } .w-input::-webkit-input-placeholder { color: var(--input-placeholder); } .w-input::placeholder, .w-select::placeholder { color: var(--input-placeholder); } .input { border-color: var(--border); background-color: var(--bg-elevated); } .input:hover { border-color: var(--accent-hover); } .input:active { border-color: var(--accent-active); } .input:focus { border-color: var(--accent); background-color: var(--bg); } /* -------------------------------------------------------------------------- Cards, sections, panels -------------------------------------------------------------------------- */ .card { color: var(--text); } .card:hover, .card:focus { color: var(--accent); } .card.card-box, .card.card-horizontal { background-color: var(--bg); box-shadow: 0 4px 8px 0 var(--shadow); } .card.card-box:hover, .card.card-horizontal:hover { box-shadow: 0 6px 10px 0 var(--shadow-strong); } .card.card-box:hover { border-color: var(--accent); color: var(--accent); } .card.card-box:active, .card.card-horizontal:active { box-shadow: 0 2px 6px 0 var(--shadow-strong); } .card-image:hover { box-shadow: 6px 6px 20px 7px var(--glow-neutral); } .testimonial-box, .testimonial-box-2 { background-color: var(--bg-elevated); } .hero-section.c-b-primary-10 { background-color: var(--bg-elevated); } .next-case { background-image: none; background-color: var(--bg-elevated); } .avatar.default, .avatar.small, .avatar.large { border-color: var(--bg); } .material-icons.icon-input-left, .material-icons.icon-input-right { color: var(--text-muted); } .material-icons.feature-icon-small { color: var(--accent); } /* -------------------------------------------------------------------------- Footer — always dark; the tokens keep it in step with the page around it. -------------------------------------------------------------------------- */ .footer-2 { border-top: 1px solid var(--border-soft); } .footer-2.dark { background-color: var(--bg-footer); } .footer-bottom-2 { border-top: 1px solid var(--border-soft); color: var(--text-muted); } /* -------------------------------------------------------------------------- Fixed-colour artwork -------------------------------------------------------------------------- */ /* The wordmark is a single-colour navy SVG, so it is filtered rather than swapped for a second file. */ .navbar img[src$="robertwinterslogo.svg"] { -webkit-filter: var(--logo-filter); filter: var(--logo-filter); } /* Client logos: every one ships as a real light/dark pair, hidden by turn. Both files are in the markup, so switching theme never waits on a fetch and the hidden one stays out of the accessibility tree. Dark mode used to recolour the light files with a CSS filter that stacked two zero-offset drop-shadows to compound their alpha. It worked in Chromium and rendered far too dark on iOS Safari, which appears to treat a shadow with no offset and no blur as a no-op — leaving the logos at the ~30% alpha the source artwork actually has. Baked pixels have no such opinion, so the dark files are generated instead: alpha normalised to full coverage, painted #acacac. Do not reintroduce a filter here. Tomorrowland is the one logo with usable source art, from images/tomorrowland-seeklogo.png with the tagline cropped and a 5x downsample: light #969696, mask dilated 2px at source resolution dark #acacac, no dilate It is line art among solid marks, so matching their fill colour leaves it reading far too light. Weight is bought two ways and they are not equivalent: tone costs nothing, a dilate costs detail. The binding constraint is the ring between pupil and iris in the emblem — 19px at source, about 1.2px once the logo is drawn at 131px wide. A dilate of radius r closes every gap under 2r, so anything past ~3 shuts that ring and the eye turns into a blob. Hence the order: take contrast first, then the smallest dilate that still clears the ring. Dark needs less of both — a light mark on a dark ground blooms. */ .logo-theme-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-theme-light { display: none; } :root:not([data-theme="light"]) .logo-theme-dark { display: inline-block; } } [data-theme="dark"] .logo-theme-light { display: none; } [data-theme="dark"] .logo-theme-dark { display: inline-block; } /* The signature is dark ink on an opaque white plate, so it would vanish on a dark page. Inverting it gives white ink on black; `screen` then drops the black plate so the page shows through instead of a grey rectangle. */ .container-2 img[src*="Singature"] { -webkit-filter: var(--ink-filter); filter: var(--ink-filter); mix-blend-mode: var(--ink-blend); }