/* Dark mode: the sun/moon toggle in the header and the dark palette for the home page. The theme is a `dark` class on , set before first paint by the inline script in the and toggled by js/dark-mode.js. */ /* ---- toggle (theme-toggles "expand" variant, inlined from https://cdn.jsdelivr.net/npm/theme-toggles@4.10.1/css/expand.min.css) ---- */ .theme-toggle { --theme-toggle__expand--duration: 500ms; } .theme-toggle__expand g circle, .theme-toggle__expand g path { transform-origin: center; transition: transform calc(var(--theme-toggle__expand--duration) * 0.65) cubic-bezier(0, 0, 0, 1.25) calc(var(--theme-toggle__expand--duration) * 0.35); } .theme-toggle__expand :first-child path { transition-property: transform, d; transition-duration: calc(var(--theme-toggle__expand--duration) * 0.6); transition-timing-function: cubic-bezier(0, 0, 0.5, 1); } .theme-toggle--toggled .theme-toggle__expand g circle { transform: scale(1.4); transition-delay: 0s; } .theme-toggle--toggled .theme-toggle__expand g path { transform: scale(0.75); transition-delay: 0s; } .theme-toggle--toggled .theme-toggle__expand :first-child path { d: path("M-9 3h25a1 1 0 0017 13v30H0Z"); transition-delay: calc(var(--theme-toggle__expand--duration) * 0.4); transition-timing-function: cubic-bezier(0, 0, 0, 1.25); } @supports not (d: path("")) { .theme-toggle--toggled .theme-toggle__expand :first-child path { transform: translate3d(-9px, 14px, 0); } } .theme-toggle .theme-toggle-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } @media (prefers-reduced-motion: reduce) { .theme-toggle * { transition: none !important; } } /* no sun->moon animation on page load when dark is already active */ .theme-toggle.is-initial * { transition: none !important; } /* ---- toggle placement: left of the hamburger ---- */ .menu-actions { display: flex; align-items: center; gap: 14px; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; color: #000; font-size: 28px; cursor: pointer; transition: color 0.3s ease, background-color 0.3s ease; } .theme-toggle svg { display: block; width: 1em; height: 1em; } .theme-toggle:hover { background-color: rgba(0, 0, 0, 0.06); } .theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ---- dark palette ---- */ html.dark { color-scheme: dark; --dm-bg: #0f1013; --dm-bg-alt: #16171b; --dm-surface: #1e1f24; --dm-text: #f2f2f4; --dm-text-soft: #c9ccd2; --dm-muted: #a5aab2; --dm-line: rgba(255, 255, 255, 0.12); } body, .sec-about, .site-footer, .site-footer-inner { transition: background-color 0.35s ease, color 0.35s ease; } html.dark body, html.dark .p1-bg { background-color: var(--dm-bg); } html.dark body { color: var(--dm-text); } /* The hero and the spacer below it fade from the dark ground to white while scrolling (js/hero-portrait-fade.js writes --hero-fade-bg), so the white stage of the hand video arrives without a hard cut. No transition here on purpose: the colour has to track the scroll position exactly. Both elements are needed: .sec-main1 is the painted box on mobile, while on desktop it collapses to zero height (its children are absolute/fixed) and .sec-main carries the 100vh. */ html.dark .sec-main, html.dark .sec-main1 { background-color: var(--hero-fade-bg, var(--dm-bg)); } /* Only the top screenful of the spacer carries the fading ground - that is all that shows next to the hero while it scrolls away. Painting the whole 2800px box would leave it white for the rest of the page, and its lower edge would then slide up as a bright band in front of "Recent Projects". */ html.dark .fixed-animation-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100vh; background-color: var(--hero-fade-bg, var(--dm-bg)); pointer-events: none; } /* the dot canvas sits at z-index -1, which would bury it under the section background above - lift it back over the ground, still below the text (z-index 2) and the portrait (3) */ html.dark .dot-pattern { z-index: 0; } /* that stage stays white in both themes (the video is white), so the text on it stays black */ html.dark .trusted-text, html.dark .trusted-text h3 { color: #000000; } /* header */ html.dark .theme-toggle { color: #fff; } html.dark .theme-toggle:hover { background-color: rgba(255, 255, 255, 0.1); } html.dark #menu-btn i img, html.dark .site-footer-brand img { filter: invert(1); } html.dark .hamburger .line { background-color: #fff; } html.dark #menu-btn .side-menu-list { background: rgb(24 25 29 / 94%); box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5); } html.dark .side-menu-item > a { color: #9a9ca3; } html.dark .side-menu-item > a:hover { color: #fff; } html.dark .side-menu-list li.side-menu-divider { background-color: var(--dm-line); } /* hero */ html.dark .hero-portrait img { content: url("../img/pn-hero-image-dark-mode.png"); } html.dark .main-heading, html.dark .main-heading h2 { color: var(--dm-text); } html.dark .main-heading h5 { color: var(--dm-muted); } /* the dot canvas paints #bfc2c7 dots on transparent - inverted they land on a warm dark grey that reads as subtle on the dark ground */ html.dark .dot-pattern { filter: invert(1); } html.dark .lineBox-dark .scroll-line { background: #fff; } /* the hand section keeps its white stage (the video is white), the welcome text is already white-on-black and the logofolio banner is a photo */ /* projects */ html.dark .heading-left { color: var(--dm-text) !important; } html.dark .text-font { color: var(--dm-text-soft); } html.dark .reveal-text .reveal-word { color: #4b4e56; } html.dark .reveal-text .reveal-word.is-read { color: #e9e9ec; } html.dark .single-project-box { background-color: var(--dm-surface); } /* about */ html.dark .sec-about { background-color: var(--dm-bg-alt) !important; } html.dark .about-text { color: var(--dm-text-soft); } html.dark .sec-about .btn { background: #f2f2f4; color: #0f1013; } html.dark .sec-about .btn:hover { background: #ffffff; color: #0f1013; } /* footer */ html.dark .site-footer { background: var(--dm-bg-alt); } html.dark .site-footer-inner { background: var(--dm-surface); } html.dark .site-footer-brand span, html.dark .site-footer-nav a, html.dark .site-footer-label, html.dark .site-footer-mail, html.dark .site-footer-mail:hover, html.dark .site-footer-legal a:hover { color: var(--dm-text); } html.dark .site-footer-nav a:hover { color: var(--dm-muted); } /* ---- project & legal pages ---- */ html.dark .page-bg { background-color: var(--dm-bg); } /* hero */ html.dark .project-hero { background: var(--dm-bg); } html.dark .project-hero .project-hero-title, html.dark .project-hero-subtitle, html.dark .project-meta h3 { color: var(--dm-text); } html.dark .project-tag, html.dark .process-tag { background: var(--dm-surface); color: var(--dm-text-soft); } html.dark .item-h2, html.dark .item-heading, html.dark .item-subheading, html.dark .container .item-h2, html.dark .container .item-heading, html.dark .container .item-subheading { color: var(--dm-text); } /* project overview / body copy */ html.dark .project-container, html.dark .media-split-text, html.dark .intro-text-box, html.dark .item-desc { color: var(--dm-text-soft); } html.dark .project-meta { border-color: var(--dm-line); } /* design process cards keep their aurora gradients, on a dark card */ html.dark .design-process { background: var(--dm-bg-alt); } html.dark .process-card { background: var(--dm-surface); } html.dark .process-icon { color: var(--dm-text); } html.dark .process-title { color: var(--dm-text-soft); } /* responsive-screens arrows */ html.dark .responsive-arrow { background: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-line); } html.dark .responsive-arrow--dark { background: var(--dm-text); border-color: var(--dm-text); color: #0f1013; } /* galleries sit on the page ground */ html.dark .hmi-gallery, html.dark .hmi-gallery--light, html.dark .responsive-section { background: transparent; } /* legal / privacy pages (css/legalnotice.css paints body, headings and links #000) */ html.dark .ln-section, html.dark .sec-legalnotice, html.dark .ln-h2, html.dark .ln-h2-mobile { color: var(--dm-text-soft); } html.dark .ln-heading { color: var(--dm-text); } html.dark .ln-section a, html.dark .sec-legalnotice a { color: var(--dm-text); }