/* Musketeers — one stylesheet, no build, no JavaScript. * * Dark mode is prefers-color-scheme rather than a class a script toggles, * which is what lets this site run with script-src 'none'. The Nuxt version * needed @nuxtjs/color-mode for the same effect and paid for it by needing * script everywhere it was served. */ :root { --white: #ffffff; --cool-grey: #f4f4f5; --border: #e4e4e7; --mid-grey: #71717a; --charcoal: #0b0b0c; --cornflower: #748cc0; --navy: #071d4b; --light-blue: #bacae8; --bg: var(--white); --fg: var(--charcoal); --muted: var(--mid-grey); --rule: var(--border); --tag-bg: rgba(186, 202, 232, 0.4); --tag-fg: var(--navy); } /* Dark, three times over, because the viewer has three states and not two. * * No stamp on is the DEFAULT — nobody has chosen, so the system * decides. The :not([data-theme="light"]) guard is what makes an explicit * light choice beat a dark OS; without it the media query wins and the toggle * only appears to work in one direction. The third block is the explicit dark * choice on a light system. Every token is defined in :root above, so a * colour is never only defined inside one of these. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1a1a1c; --fg: var(--white); --muted: #a1a1aa; --rule: #2e2e32; --tag-bg: var(--navy); --tag-fg: var(--light-blue); } } :root[data-theme="dark"] { --bg: #1a1a1c; --fg: var(--white); --muted: #a1a1aa; --rule: #2e2e32; --tag-bg: var(--navy); --tag-fg: var(--light-blue); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .container { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; } /* ── header ─────────────────────────────────────────────────────────────── */ header .container { display: flex; height: 5rem; align-items: center; justify-content: space-between; gap: 1.5rem; } .logo { display: inline-flex; align-items: center; transition: opacity .15s; } .logo:hover { opacity: .7; } .logo img { height: 1.75rem; width: auto; display: block; } nav { display: flex; align-items: center; gap: 1.5rem; } nav a { font-size: .875rem; color: var(--muted); text-decoration: none; transition: color .15s; } nav a:hover, nav a[aria-current="page"] { color: var(--fg); } /* The toggle ships hidden and JavaScript reveals it. Where script does not * run — /t/musketeers/ serves these same bytes under script-src 'none' — a * button that cannot do anything is worse than no button, and the site still * follows the system there. */ .theme { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--rule); border-radius: 9999px; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; } .theme:hover { color: var(--fg); border-color: var(--muted); } .theme svg { width: 1rem; height: 1rem; display: block; } /* ── the page ───────────────────────────────────────────────────────────── */ main { padding: 5rem 0 8rem; } @media (min-width: 768px) { main { padding: 8rem 0 12rem; } } h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; margin: 0; max-width: 36rem; text-wrap: balance; } h2 { font-size: 1.125rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; } p { max-width: 28rem; } .lede { margin-top: 2.5rem; color: var(--muted); } .after { margin-top: 4rem; color: var(--muted); } a.quiet { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: border-color .15s; } a.quiet:hover { border-color: currentColor; } :focus-visible { outline: 2px solid var(--cornflower); outline-offset: 3px; } /* ── lists ──────────────────────────────────────────────────────────────── */ .rows { list-style: none; margin: 3rem 0 0; padding: 0; } .rows li { padding: 1rem 0; font-size: 1.125rem; border-top: 1px solid var(--rule); } .rows li:last-child { border-bottom: 1px solid var(--rule); } .products { list-style: none; margin: 4rem 0 0; padding: 0; display: grid; gap: 3rem; } .products li { display: flex; align-items: flex-start; gap: 1.25rem; } .products img { height: 3.5rem; width: 3.5rem; flex: none; border-radius: 1rem; object-fit: cover; } .product-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; } .tag { display: inline-flex; align-items: center; border-radius: 9999px; background: var(--tag-bg); color: var(--tag-fg); padding: .125rem .625rem; font-size: .75rem; font-weight: 500; } .products p { margin: .5rem 0 0; color: var(--muted); } /* ── footer ─────────────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--rule); } footer .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2.5rem; padding-bottom: 2.5rem; font-size: .875rem; color: var(--muted); } footer a { color: inherit; text-decoration: none; } footer a:hover { color: var(--fg); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }