/* =====================================================================
ClearKeywords - STYLESHEET
A clean, plain, content-first design system.
Structure:
1. Variables - every design decision lives here
2. Reset & Base - sensible defaults
3. Typography - type scale, measure, rhythm
4. Layout - containers, sections, grids
5. Components - nav, footer, buttons, forms, cards,
badges, tables, tooltips, callouts
6. Page Patterns - hero/launcher, tool pages, brief +
title/meta generator, blog, legal/404
7. Responsive - tablet and mobile adjustments
FONT NOTE
The font stack below puts Inter first. Inter is not bundled here
to avoid a render-blocking @import in a single-file stylesheet.
To enable it, add this to your :
Without it, the stack falls back to the OS system font (San
Francisco, Segoe UI Variable, Roboto) - all close cousins of
Inter, so the design holds up either way.
===================================================================== */
/* =====================================================================
1. VARIABLES
===================================================================== */
:root {
/* ---- Colour: a strictly limited, neutral palette ------------------
One off-white page colour, one paper-white surface, one charcoal
ink, one muted grey for secondary text, one quiet border colour,
and a single restrained accent reserved for primary CTAs. */
--color-bg: #F7F6F3;
/* page background - off-white */
--color-surface: #FFFFFF;
/* cards, inputs, the "paper" */
--color-surface-2: #F1EFEA;
/* table headers, soft fills */
--color-ink: #1B1B1A;
/* headings, body text, hover & selected states (not pure black) */
--color-muted: #6E6D68;
/* secondary / supporting text */
--color-border: #E4E1DA;
/* default hairline border */
--color-border-strong: #D3CFC6;
/* inputs, slightly firmer edges */
/* The single accent - used only for primary CTA buttons and the
small selected-state wash in the title/meta tool. Everything
else (active tabs, hovers, focus) uses --color-ink. */
--color-accent: #3D6B52;
/* deep, muted forest green */
--color-accent-hover: #1B1B1A;
/* primary CTA hover = ink, per spec */
--color-accent-on: #FFFFFF;
/* text on the accent */
--color-accent-light: #E8EFE9;
/* pale accent wash, "selected" state */
/* Inverse surfaces (used sparingly: tooltips, the "next step" box) */
--color-ink-on: #FAFAF8;
/* text on an ink background */
/* ---- Typography ---------------------------------------------------
Inter first, system fonts as a faithful fallback. */
--font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
/* Base sizes */
--text-xs: 0.8125rem;
/* 13px - captions, labels */
--text-sm: 0.9375rem;
/* 15px - secondary text, UI */
--text-base: 1rem;
/* 16px - default UI text */
--text-md: 1.0625rem;
/* 17px - long-form article body */
--text-lg: 1.25rem;
/* 20px - lede, large UI */
/* Heading scale - bold, with clear jumps, never shouting */
--text-h4: 1.125rem;
/* 18px */
--text-h3: clamp(1.25rem, 1.6vw + 0.9rem, 1.5rem);
/* 20 -> 24px */
--text-h2: clamp(1.75rem, 2.6vw + 1rem, 2.375rem);
/* 28 -> 38px */
--text-h1: clamp(2.25rem, 4vw + 1.25rem, 3.5rem);
/* 36 -> 56px */
--weight-body: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--leading-tight: 1.2;
/* headings */
--leading-base: 1.6;
/* UI text */
--leading-loose: 1.7;
/* long-form article copy */
/* ---- Spacing scale -------------------------------------------------
Generous by default. These feed almost every gap, margin, and
padding in the system, so increasing them increases the "air"
on the page everywhere at once. */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-8: 3rem;
--space-10: 4rem;
--space-12: 5rem;
/* Section / card rhythm - the main "whitespace" levers */
--section-y: clamp(3.5rem, 7vw, 6.5rem);
--section-y-tight: clamp(2.5rem, 5vw, 4rem);
--gutter: clamp(1.25rem, 4vw, 3rem);
--card-pad: clamp(1.5rem, 2.6vw, 2.25rem);
--card-pad-tight: clamp(1.1rem, 2vw, 1.5rem);
--grid-gap: clamp(1.25rem, 2.4vw, 2rem);
--grid-gap-tight: clamp(1rem, 1.8vw, 1.5rem);
/* ---- Radius -------------------------------------------------------
Subtle and consistent. Pills for tags/badges, a single 8px
radius for cards, controls and surfaces. */
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
--radius-pill: 999px;
/* ---- Shadow -------------------------------------------------------
Very soft, used sparingly: a hint of lift on hover and on the
one floating element (the jargon tooltip). Buttons stay flat. */
--shadow-sm: 0 1px 2px rgba(27, 27, 26, 0.05);
--shadow-md: 0 12px 28px rgba(27, 27, 26, 0.08);
/* ---- Layout widths --------------------------------------------------
Unchanged from the previous system on purpose - these numbers
are tuned against the grid min-widths below, so widening them
would silently change column counts. Whitespace comes from the
spacing tokens above, not from stretching the canvas. */
--container-max: 1040px;
--container-wide: 1180px;
--content-max: 720px;
/* ~68-72ch reading measure */
--hero-max: 980px;
--tool-max: 980px;
--tool-wide-max: 1120px;
/* Grid minimums - change these to control cards-per-row */
--grid-card-min: 16rem;
--grid-card-min-small: 13.5rem;
--grid-blog-min: 18rem;
--grid-related-min: 17rem;
--grid-step-min: 14rem;
/* Component sizing */
--control-height: 46px;
--control-height-sm: 38px;
--button-height: 46px;
--button-height-sm: 38px;
--button-height-lg: 52px;
/* Focus ring */
--focus-ring: var(--color-ink);
/* Callouts */
--callout-tip-bg: var(--color-accent-light);
--callout-tip-border: var(--color-accent);
--callout-tip-text: var(--color-ink);
--callout-warning-bg: var(--color-surface-2);
--callout-warning-border: var(--color-ink);
--callout-warning-text: var(--color-ink);
}
/* =====================================================================
2. RESET & BASE
===================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
min-height: 100vh;
background: var(--color-bg);
color: var(--color-ink);
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--weight-body);
line-height: var(--leading-base);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
img,
svg {
max-width: 100%;
display: block;
}
/* Overflow protection: children scale to their container */
:where(section, div, article, aside, header, footer, nav, main, form,
table, th, td, a, p, h1, h2, h3, h4, h5, h6, li, button, input,
textarea, select) {
min-width: 0;
}
:where(p, h1, h2, h3, h4, h5, h6, a, button, td, th, li, span) {
overflow-wrap: break-word;
}
a {
color: inherit;
text-underline-offset: 0.18em;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
ul,
ol {
padding-left: 1.35rem;
}
::selection {
background: var(--color-ink);
color: var(--color-ink-on);
}
:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
[hidden] {
display: none !important;
}
/* Screen-reader-only labels (used on every form input's