/* ========================================================================== Coffer Studios, Design System Fonts: Urbanist only (site-wide), used upright and italic for accents ========================================================================== */ :root { --ink: #0f0f0f; --paper: #ffffff; --paper-soft: #fcfcfc; --muted: #6b7280; --line: #e6e6e6; --surface-dark: #181818; --accent: #066aab; --font-sans: 'Urbanist', sans-serif; --font-serif: 'Urbanist', sans-serif; --container: 1240px; --gutter: clamp(20px, 5vw, 64px); --radius: 4px; } /* ========================================================================== Dark theme, proof-of-concept. Only ever applied via the toggle button on index.html (data-theme="dark" on ); no other page sets this attribute, so this block is inert everywhere else. Remove this block plus the toggle script in index.html to fully revert. ========================================================================== */ [data-theme="dark"] { --ink: #f2f2f2; --paper: #181818; --paper-soft: #202020; --muted: #9a9ea6; --line: #2a2a2a; } [data-theme="dark"] .site-header, [data-theme="dark"] body.has-transparent-header .site-header.is-scrolled { background: #181818; border-bottom-color: #2a2a2a; } [data-theme="dark"] .section--soft { background: var(--paper-soft); } [data-theme="dark"] .service-row:hover { background: #262626; } [data-theme="dark"] .stars { color: var(--ink); } [data-theme="dark"] .cta-split { border: 1px solid var(--line); } [data-theme="dark"] #home-process { background: #000000; } [data-theme="dark"] .notice-box { border-color: #4a4020; background: #2a2410; color: #d4c489; } /* Header while transparent sits over the hero photo, which never changes with the theme, so nav/logo must stay in their light-mode colours there regardless of theme. Only once scrolled to a solid dark bar should they flip (which --ink already does automatically; only the raster logo needs an explicit invert since it isn't colour-driven by CSS). */ [data-theme="dark"] body.has-transparent-header .site-header:not(.is-scrolled) { color: #0f0f0f; } [data-theme="dark"] body.has-transparent-header .site-header:not(.is-scrolled) .main-nav a::after, [data-theme="dark"] body.has-transparent-header .site-header:not(.is-scrolled) .nav-toggle span { background: #0f0f0f; } /* The mobile nav flyout is a solid dark panel of its own, not an overlay on the hero photo, so it needs to opt back out of the "stay dark" rule above even while the header itself is still unscrolled/transparent. */ [data-theme="dark"] body.has-transparent-header .site-header:not(.is-scrolled) .main-nav.is-open { color: var(--ink); } [data-theme="dark"] body.has-transparent-header .site-header:not(.is-scrolled) .main-nav.is-open a::after { background: var(--ink); } /* Every other page has an always-solid header, so the logo always needs to invert in dark mode; the homepage is the one exception (transparent over its unchanging hero photo) until it scrolls to a solid bar. */ [data-theme="dark"] .site-header .logo img { filter: invert(1); } [data-theme="dark"] body.has-transparent-header .site-header:not(.is-scrolled) .logo img { filter: none; } /* Hero buttons sit on the same unchanged hero photo, so pin them to their light-mode look too instead of inverting with the theme. */ [data-theme="dark"] .hero-banner .btn { background: #0f0f0f; color: #ffffff; border-color: #0f0f0f; } [data-theme="dark"] .hero-banner .btn--outline { background: transparent; color: #0f0f0f; border-color: #0f0f0f; } [data-theme="dark"] .hero-banner .btn--outline:hover { background: #0f0f0f; color: #ffffff; } /* ...except Explore Our Process, which is pinned to its orange hover accent (see .btn-explore below) in light mode too, this rule would otherwise silently override that back to black in dark mode. */ [data-theme="dark"] .hero-banner .btn-explore:hover { background: rgb(231,139,28); border-color: rgb(231,139,28); color: #fff; } /* Cookie banner and back-to-top are small floating utility chips, always a dark pill regardless of theme (same idea as the footer, which never changes colour either); pin them rather than let them invert. */ [data-theme="dark"] .back-to-top { background: #0f0f0f; color: #fff; border-color: #0f0f0f; } [data-theme="dark"] .back-to-top:hover { background: #fff; color: #0f0f0f; } [data-theme="dark"] .cookie-banner { background: #0f0f0f; color: #fff; } [data-theme="dark"] .cookie-btn-accept { background: #fff; color: #0f0f0f; } [data-theme="dark"] .cookie-btn-decline { background: transparent; color: #fff; } /* Sun/moon slider toggle for the dark theme POC above. Colours are fixed (not tied to --ink/--paper) since the switch itself needs to look right regardless of which theme is currently active. */ .theme-toggle-switch { /* Same height, radius and bottom offset as .back-to-top so the two fixed corner buttons read as a matched pair. */ position: fixed; bottom: 24px; left: 24px; z-index: 200; width: 72px; height: 40px; padding: 4px; border: none; border-radius: 8px; background: #181818; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: background .3s ease; } .theme-toggle-switch .knob { width: 32px; height: 32px; border-radius: 5px; background: #ffffff; display: flex; align-items: center; justify-content: center; transform: translateX(0); transition: transform .3s ease, background .3s ease; } .theme-toggle-switch .knob svg { width: 16px; height: 16px; } .theme-toggle-switch .icon-sun { color: #181818; } .theme-toggle-switch .icon-moon { display: none; color: #f2f2f2; } .theme-toggle-switch.is-dark { background: #f2f2f2; } .theme-toggle-switch.is-dark .knob { transform: translateX(32px); background: #181818; } .theme-toggle-switch.is-dark .icon-sun { display: none; } .theme-toggle-switch.is-dark .icon-moon { display: block; } [data-theme="dark"] .testimonial-scroll .testimonial-card { background: var(--paper-soft); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Browsers render