/* ========================================================================== Shared design system for the utility-sites family. Keep this file identical across sites — site-specific look-and-feel goes in each site's src/css/site.css instead, layered on top of these tokens. ========================================================================== */ :root { /* Brand */ --color-accent: #4f46e5; --color-accent-hover: #4338ca; --color-accent-contrast: #ffffff; /* Surfaces & text (light mode) */ --color-bg: #f7f7fb; --color-surface: #ffffff; --color-border: #e2e2ea; --color-text: #1d1d26; --color-text-muted: #5c5c6b; --color-shadow: rgba(20, 20, 40, 0.06); /* Feedback */ --color-success: #1a7f4e; --color-danger: #c62839; /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --content-width: 760px; color-scheme: light dark; } /* Dark mode has three states, not two: an explicit choice from the header toggle stamps data-theme="dark"/"light" on (see theme-toggle.js); with no explicit choice, only prefers-color-scheme applies. The :not([data-theme="light"]) guard stops the OS media query from overriding an explicit light choice while the OS is in dark mode. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #14141a; --color-surface: #1c1c24; --color-border: #2d2d38; --color-text: #eeeef2; --color-text-muted: #a3a3b2; --color-shadow: rgba(0, 0, 0, 0.35); --color-accent: #818cf8; --color-accent-hover: #a5b4fc; --color-accent-contrast: #14141a; } } :root[data-theme="dark"] { --color-bg: #14141a; --color-surface: #1c1c24; --color-border: #2d2d38; --color-text: #eeeef2; --color-text-muted: #a3a3b2; --color-shadow: rgba(0, 0, 0, 0.35); --color-accent: #818cf8; --color-accent-hover: #a5b4fc; --color-accent-contrast: #14141a; } /* ---- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.55; font-size: 17px; } img, svg { max-width: 100%; display: block; } a { color: var(--color-accent); } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--space-3); } p { margin: 0 0 var(--space-4); } button, input, select, textarea { font: inherit; color: inherit; } /* ---- Layout -------------------------------------------------------------*/ .site-header { border-bottom: 1px solid var(--color-border); background: var(--color-surface); } .site-header__inner { max-width: var(--content-width); margin: 0 auto; padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .site-header__brand { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; } .site-logo { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--color-text); white-space: nowrap; } .site-logo span { color: var(--color-accent); } .wordmark-tagline { font-size: 0.85rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-nav a { color: var(--color-text-muted); text-decoration: none; font-size: 0.95rem; margin-left: var(--space-5); } .site-nav a:hover { color: var(--color-text); } .theme-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; margin-left: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; } .theme-toggle:hover { color: var(--color-text); border-color: var(--color-text-muted); } .theme-toggle__icon { width: 16px; height: 16px; display: none; } /* No explicit choice yet (data-theme unset) -> show the "system" icon. */ .theme-toggle__icon--auto { display: block; } :root[data-theme="light"] .theme-toggle__icon--auto, :root[data-theme="dark"] .theme-toggle__icon--auto { display: none; } :root[data-theme="light"] .theme-toggle__icon--light { display: block; } :root[data-theme="dark"] .theme-toggle__icon--dark { display: block; } main { max-width: var(--content-width); margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); } .site-footer { border-top: 1px solid var(--color-border); margin-top: var(--space-7); } .site-footer__inner { max-width: var(--content-width); margin: 0 auto; padding: var(--space-6) var(--space-5); color: var(--color-text-muted); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; justify-content: space-between; } .site-footer__links a { color: var(--color-text-muted); margin-right: var(--space-4); text-decoration: none; } .site-footer__links a:hover { text-decoration: underline; } /* ---- Components ---------------------------------------------------------*/ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: 0 1px 2px var(--color-shadow); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--color-accent); color: var(--color-accent-contrast); border: none; border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); font-weight: 600; font-size: 1rem; cursor: pointer; transition: background-color 0.15s ease; } .btn:hover { background: var(--color-accent-hover); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn--secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); } .btn--secondary:hover { background: var(--color-bg); } .field { width: 100%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 1rem; } .field:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; } .field-row { display: flex; gap: var(--space-3); flex-wrap: wrap; } .field-group { margin-bottom: var(--space-4); } .field-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-2); } /* Reserve space up front so ad slots never cause layout shift (CLS). */ .ad-slot { display: flex; align-items: center; justify-content: center; margin: var(--space-6) auto; overflow: hidden; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: 0.8rem; } .ad-slot--leaderboard { max-width: 728px; min-height: 90px; } .ad-slot--rectangle { max-width: 336px; min-height: 280px; } .faq-item { border-bottom: 1px solid var(--color-border); padding: var(--space-4) 0; } .faq-item h3 { font-size: 1.05rem; } .faq-item p { color: var(--color-text-muted); margin-bottom: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .text-muted { color: var(--color-text-muted); } .section { margin-top: var(--space-8); } .section > h2 { font-size: 1.4rem; } @media (max-width: 480px) { body { font-size: 16px; } .site-nav a { margin-left: var(--space-3); } .wordmark-tagline { display: none; } .theme-toggle { margin-left: var(--space-3); } }