/* Copied from sites/shared by scripts/sync-shared.mjs. Do not edit here. */ /* Handy Controls shared look --------------------------------------------------------------- One set of colours, fonts and spacing for handycontrols.com, the quote tool, the partner portal and the goals dashboard. Edit this file in sites/shared/ and run `npm run sync:shared` to copy it into each site. Never edit the copies. Light comes from the main site, dark from the goals dashboard. Dark follows the device unless someone picks a side with the slider, which sets data-theme on . */ :root { --hc-bg: #ffffff; --hc-bg-soft: #f8fafc; --hc-surface: #ffffff; --hc-surface-2: #f1f5f9; --hc-ink: #0f172a; --hc-ink-soft: #475569; --hc-muted: #94a3b8; --hc-line: #e2e8f0; --hc-line-strong: #cbd5e1; --hc-accent: #14b8a6; --hc-accent-ink: #0f766e; --hc-accent-soft: #f0fdfa; --hc-accent-2: #0ea5e9; --hc-warn: #d39200; --hc-warn-ink: #7f5600; --hc-danger: #e11d48; --hc-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .18); --hc-shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, .35); --hc-display: "Space Grotesk", system-ui, sans-serif; --hc-body: "Albert Sans", system-ui, sans-serif; --hc-r-sm: 8px; --hc-r: 14px; --hc-r-lg: 22px; --hc-r-full: 999px; /* 4px scale, so spacing matches across the sites */ --hc-1: 4px; --hc-2: 8px; --hc-3: 12px; --hc-4: 16px; --hc-5: 20px; --hc-6: 24px; --hc-8: 32px; --hc-10: 40px; --hc-12: 48px; --hc-16: 64px; --hc-20: 80px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hc-bg: #12171d; --hc-bg-soft: #161d24; --hc-surface: #1a2129; --hc-surface-2: #212a33; --hc-ink: #e4e9ef; --hc-ink-soft: #b7c1cd; --hc-muted: #97a3b1; --hc-line: #2e3843; --hc-line-strong: #3b4753; --hc-accent: #3fb99a; --hc-accent-ink: #63cdb2; --hc-accent-soft: #14271f; --hc-accent-2: #38bdf8; --hc-warn: #f0b429; --hc-warn-ink: #f4c55a; --hc-danger: #fb7185; --hc-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6); --hc-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .7); color-scheme: dark; } } :root[data-theme="dark"] { --hc-bg: #12171d; --hc-bg-soft: #161d24; --hc-surface: #1a2129; --hc-surface-2: #212a33; --hc-ink: #e4e9ef; --hc-ink-soft: #b7c1cd; --hc-muted: #97a3b1; --hc-line: #2e3843; --hc-line-strong: #3b4753; --hc-accent: #3fb99a; --hc-accent-ink: #63cdb2; --hc-accent-soft: #14271f; --hc-accent-2: #38bdf8; --hc-warn: #f0b429; --hc-warn-ink: #f4c55a; --hc-danger: #fb7185; --hc-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6); --hc-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .7); color-scheme: dark; } body { font-family: var(--hc-body); background: var(--hc-bg); color: var(--hc-ink); } .font-display { font-family: var(--hc-display); } .font-body { font-family: var(--hc-body); } /* Icons: one weight and cap everywhere, drawn in the current text colour. */ .hc-icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .hc-icon-sm { width: 16px; height: 16px; } .hc-icon-lg { width: 28px; height: 28px; stroke-width: 1.6; } /* The dark mode slider, used in every site's header. */ .hc-theme-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--hc-2); width: 52px; height: 28px; padding: 3px; border: 1px solid var(--hc-line); border-radius: var(--hc-r-full); background: var(--hc-surface-2); cursor: pointer; flex: none; transition: background .18s ease, border-color .18s ease; } .hc-theme-toggle:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 2px; } .hc-theme-toggle .hc-theme-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--hc-r-full); background: var(--hc-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); display: grid; place-items: center; color: var(--hc-ink-soft); transition: transform .18s ease; } :root[data-theme="dark"] .hc-theme-toggle .hc-theme-knob, .hc-theme-toggle[aria-pressed="true"] .hc-theme-knob { transform: translateX(24px); } .hc-theme-toggle .hc-icon { width: 13px; height: 13px; stroke-width: 2; } @media (prefers-reduced-motion: reduce) { .hc-theme-toggle, .hc-theme-toggle .hc-theme-knob { transition: none; } } /* Sun while light, moon while dark. */ .hc-theme-toggle .hc-moon { display: none; } :root[data-theme="dark"] .hc-theme-toggle .hc-moon, .hc-theme-toggle[aria-pressed="true"] .hc-moon { display: block; } :root[data-theme="dark"] .hc-theme-toggle .hc-sun, .hc-theme-toggle[aria-pressed="true"] .hc-sun { display: none; }