/* Rough Works — colour schemes ---------------------------------------------------------------------- Switchable via the header swatch (see /assets/js/theme.js). Only the olive family changes; the cream family stays constant across all themes. Default (no data-theme attribute on ) = OLIVE, whose values live in each page's inline :root{} block. Denim + Rust override just the olive-family variables here. `:root[data-theme=...]` outranks the base `:root` on specificity, so these win regardless of stylesheet order. The variable named --accent-green is the page's single "pop" accent slot. Olive keeps its neon green; denim + rust fill it with their tint. ---------------------------------------------------------------------- */ :root[data-theme="denim"] { --olive: #2C4274; /* primary */ --olive-2: color-mix(in oklab, #2C4274 90%, #ffffff); --olive-ink: color-mix(in oklab, #2C4274 82%, #ffffff); --ink: color-mix(in oklab, #2C4274 80%, #000000);/* deepest surface */ --ink-soft: color-mix(in oklab, #2C4274 90%, #ffffff); --accent-green: #C2C5C7; /* denim tint */ } :root[data-theme="rust"] { --olive: #742C2C; /* primary */ --olive-2: color-mix(in oklab, #742C2C 90%, #ffffff); --olive-ink: color-mix(in oklab, #742C2C 82%, #ffffff); --ink: color-mix(in oklab, #742C2C 80%, #000000);/* deepest surface */ --ink-soft: color-mix(in oklab, #742C2C 90%, #ffffff); --accent-green: #C5AB9D; /* rust tint */ } /* Smooth the whole-site recolour when switching. Scoped to colour/shadow so it never interferes with layout or transform-based animations. */ html, body { transition: background-color .4s ease, color .4s ease; } /* Header wordmark: preserve aspect ratio. The nav constrains the logo's width on mobile; without this the default object-fit:fill stretches each themed logo differently (the denim/rust light logos rendered too tall vs the olive default). Contain has no effect on desktop, where the box already matches the logo's aspect. */ .brand-lock img { object-fit: contain; } /* ── Header switcher (three colour dots) ─────────────────────────────── */ .theme-switch { display: inline-flex; align-items: center; gap: 8px; } .theme-dot { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; box-shadow: none; cursor: pointer; line-height: 0; /* Each dot shows its scheme's primary, so all three colours are visible at once and you click the one you want. */ transition: transform .15s ease, outline-color .2s ease; } .theme-dot[data-set-theme="olive"] { background: #3F4528; } .theme-dot[data-set-theme="denim"] { background: #2C4274; } .theme-dot[data-set-theme="rust"] { background: #742C2C; } .theme-dot:hover { transform: scale(1.16); } .theme-dot:active { transform: scale(0.94); } /* Active scheme: cream ring around the selected dot. */ .theme-dot[aria-pressed="true"] { outline: 1px solid var(--cream); outline-offset: 2px; transform: scale(1.08); } .theme-dot:focus-visible { outline: 1px solid var(--cream); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html, body, .theme-dot { transition: none; } }