/* Dark mode + small site-wide overrides. Dark theme is activated by JS toggling .theme-dark on . System preference is honored by default; localStorage override wins. Keep this file standalone so the Webflow exports can be re-run without losing it. */ /* Tighter horizontal padding on tablet/mobile, applied site-wide so every section matches the rhythm of the homepage Overview section. Webflow's defaults are 5rem desktop and 2.5rem on small phones — too breathy on narrow screens. These step down: 2rem → 1.75rem → 1.5rem. */ @media screen and (max-width: 991px) { .page-padding { padding-left: 2rem; padding-right: 2rem; } } @media screen and (max-width: 767px) { .page-padding { padding-left: 1.75rem; padding-right: 1.75rem; } } @media screen and (max-width: 479px) { .page-padding { padding-left: 1.5rem; padding-right: 1.5rem; } } /* The Work section wrapper had a -2rem horizontal break-out designed against the old 2.5rem mobile page-padding. With the new tighter padding it now overflows the viewport. Reset the break-out so tiles sit inside the page-padding gutters at every breakpoint. */ @media screen and (max-width: 479px) { .work-collection_wrapper { width: auto; margin-left: 0; margin-right: 0; } .project-title-div { padding-left: 0; padding-right: 0; } } :root.theme-dark { --white: #0f1011; --black: #ededed; --lightest-grey: #ffffff14; --light-grey: #ffffff29; --dark-grey: #ffffffa8; --grey: #ffffff8c; --mint: #1f2d18; } /* Surfaces, borders, and shadows hardcoded in the Webflow CSS */ .theme-dark body { background-color: var(--white); color: var(--black); } .theme-dark .form-input:hover { border-color: #ffffff47; } .theme-dark .form-input:focus { box-shadow: 0 0 0 .125rem #fff; } .theme-dark .form-input::placeholder { color: #ffffffa8; } .theme-dark .error-message { background-color: #3a1f2e; color: #ffd0e5; } /* Blockquote bar is hardcoded solid #000 */ .theme-dark blockquote { border-left-color: var(--black); } /* Header/footer/nav accent sections in dark mode. Use a dark olive-green accent that sits one tone above the body bg — so the page reads as a single dark color family that blends smoothly from nav → hero → body → footer. !important guards the value against any cached/stale CSS or Webflow inline color overrides. */ .theme-dark .section-nav, .theme-dark .section-nav.is-multi-colored, .theme-dark .section-header, .theme-dark .section-header.is-multi-colored, .theme-dark .section-footer, .theme-dark .section-footer.is-multi-colored { background-color: #1c2718 !important; } /* The "Footer-2.png" decorative illustration above the footer is a baked-in pastel scene that clashes with the dark surface. Hide it in dark mode. */ .theme-dark .about-image-wrapper { display: none; } /* Link underlines on dark need real contrast — the inherited light-mode shade was #00000030 / #ffffff14 which barely reads. Use a strong dim underline (--dark-grey, ~65% white) and flip to full --black on hover. */ .theme-dark .text-style-link { box-shadow: inset 0 -3px 0 0 var(--dark-grey); } /* Keep the underline at the same y-position on hover — color change only. */ .theme-dark .text-style-link:hover { box-shadow: inset 0 -3px 0 0 var(--black); } .theme-dark .text-rich-text a { box-shadow: inset 0 -3px var(--dark-grey); } .theme-dark .text-rich-text a:hover { box-shadow: inset 0 -3px var(--black); } /* Focus-visible outlines on links are hardcoded #000. */ .theme-dark a:focus-visible, .theme-dark a[data-wf-focus-visible] { outline-color: var(--black); } /* Work-tile hover outline is hardcoded #000 — invisible on dark. Flip to a bright accent so the tile clearly reads as targeted. */ .theme-dark .project-thumbnail-link:hover { outline-color: var(--black); } .theme-dark .project-thumbnail-link:focus-visible, .theme-dark .project-thumbnail-link[data-wf-focus-visible] { outline: 2px solid var(--black); outline-offset: 4px; } /* Interactive list-item hover state uses hardcoded #000 borders. */ .theme-dark .list-item.is-interactive:hover { border-color: var(--black); border-bottom-color: var(--black); } /* Hard-coded hairlines and outlines in webflow.css */ .theme-dark *[style*="border-bottom: 1px solid black"], .theme-dark *[style*="border-bottom: 1px solid #000"] { border-bottom-color: var(--lightest-grey) !important; } /* Mobile menu button bars are hardcoded #fff (visible on white). Flip for dark. */ .theme-dark .menu-icon-line-top, .theme-dark .menu-icon-line-bottom, .theme-dark .menu-icon-line-middle, .theme-dark .menu-icon-line-middle-inner { background-color: var(--black); } /* SVG glyphs with attribute fill="black" (logo, social icons) */ .theme-dark svg [fill="black"], .theme-dark svg [fill="#000"], .theme-dark svg [fill="#000000"] { fill: var(--black); } /* Text-highlight color (set inline in each page ) */ .theme-dark ::selection { background: #3a5328; color: #fff; } /* Images: subtle dim so bright screenshots don't burn against dark surfaces. Skip transparent UI icons by allowing an opt-out via [data-no-dim]. */ .theme-dark img:not([data-no-dim]) { filter: brightness(.88) contrast(1.02); } /* Theme toggle button (injected by js/theme.js). Stronger border + larger icon so it reads clearly against the mint nav in light mode and the dark nav in dark mode. */ .theme-toggle { appearance: none; background-color: var(--white); border: 1.5px solid var(--black); color: var(--black); width: 2.75rem; height: 2.75rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin-left: 1rem; transition: background-color .2s ease, color .2s ease, transform .15s ease; } .theme-toggle:hover { background-color: var(--black); color: var(--white); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0) scale(.96); } .theme-toggle:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; } .theme-toggle svg { width: 1.375rem; height: 1.375rem; display: block; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } .theme-dark .theme-toggle .icon-sun { display: block; } .theme-dark .theme-toggle .icon-moon { display: none; } /* Desktop: smaller circular frame than the base .theme-toggle, same icon size, ghost (no fill) until hover inherits .theme-toggle:hover. */ .theme-toggle--desktop { flex: 0 0 auto; align-self: center; width: 2.25rem; height: 2.25rem; background-color: transparent; } .theme-toggle--desktop svg { width: 1.375rem; height: 1.375rem; } /* Mobile variant: slide switch pinned to the bottom of the slide-out .nav-menu. Hidden until the nav collapses (Webflow's "small" breakpoint is 991px). */ .theme-toggle--mobile { display: none; align-items: center; gap: .75rem; background: transparent; border: 0; padding: 0; margin: 0; width: auto; height: auto; border-radius: 0; cursor: pointer; color: var(--black); font-family: inherit; font-size: 1.125rem; font-weight: 500; letter-spacing: .015625rem; line-height: 1; } .theme-toggle--mobile:hover { background: transparent; color: var(--black); transform: none; } .theme-toggle--mobile:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; border-radius: 4px; } .theme-toggle--mobile .theme-toggle__label { white-space: nowrap; } .theme-toggle--mobile .theme-toggle__track { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; border-radius: 999px; background-color: var(--lightest-grey); border: 1.5px solid var(--black); transition: background-color .2s ease; flex: 0 0 auto; } .theme-toggle--mobile .theme-toggle__thumb { position: absolute; top: 50%; left: 2px; width: calc(1.5rem - 8px); height: calc(1.5rem - 8px); border-radius: 50%; background-color: var(--black); transform: translateY(-50%); transition: transform .2s ease, background-color .2s ease; } /* Switched-on state: thumb slides right; track flips to filled. */ .theme-dark .theme-toggle--mobile .theme-toggle__track { background-color: var(--black); } .theme-dark .theme-toggle--mobile .theme-toggle__thumb { background-color: var(--white); transform: translate(calc(2.75rem - 1.5rem), -50%); } @media (max-width: 991px) { .nav-container .theme-toggle--desktop { display: none; } /* Stack menu from the top so the toggle can sit on the bottom via margin-top: auto */ .nav-menu { justify-content: flex-start; } .nav-menu .logo-wrapper { flex: 0 0 auto; } .nav-menu .theme-toggle--mobile { display: inline-flex; margin-top: auto; align-self: flex-start; } } /* Mobile menu: pin the theme switcher to the bottom of the slide-out drawer. The existing margin-top:auto can fight justify-content:space-between on the .nav-menu, so we use absolute positioning when the drawer is active. */ @media (max-width: 768px) { .nav-menu { position: relative; } .nav-menu .theme-toggle--mobile { position: absolute; left: 5rem; /* matches .nav-menu padding-left */ bottom: 2rem; margin-top: 0; /* override the prior margin-top:auto */ } } /* Figma embed loading state — dark variant */ .theme-dark .w-richtext figure.rich-media-figure.is-iframe-landscape .rich-media-figure__embed, .theme-dark .w-richtext figure.rich-media-figure.is-iframe-square .rich-media-figure__embed { background-color: #1F2225; } .theme-dark .w-richtext figure.rich-media-figure.is-iframe-landscape .rich-media-figure__embed::before, .theme-dark .w-richtext figure.rich-media-figure.is-iframe-square .rich-media-figure__embed::before { border-color: #3A3D40; border-top-color: #C8CCD0; } .theme-dark .w-richtext figure.rich-media-figure.is-iframe-landscape .rich-media-figure__embed::after, .theme-dark .w-richtext figure.rich-media-figure.is-iframe-square .rich-media-figure__embed::after { color: #C8CCD0; }