/* ==========================================================================
Ad Server — Design System (clean · light · minimal)
Single source of truth for the whole site. Link this file, then build on top.
Fonts (add to each page's ):
Rules (do NOT break the aesthetic):
- NO glow blobs, NO grid backgrounds, NO gradient-filled text, NO pulsing dots.
- ONE accent (blue), used sparingly: links, focus, active states, one badge.
- Primary button is near-black, not blue. Hairline borders. Generous whitespace.
- Flat surfaces; at most one soft shadow on raised elements. Respect reduced motion.
========================================================================== */
:root {
/* Surfaces — warm neutral, not cold blue-gray */
--bg: #ffffff;
--bg-subtle: #f6f5f2; /* alternating sections, page wells */
--surface: #ffffff; /* cards */
--surface-2: #faf9f6; /* inset / hover wells */
/* Ink */
--text: #191917;
--text-2: #5c5c55;
--text-3: #8f8f88;
/* Hairlines */
--line: #e8e7e1;
--line-2: #dcdbd4;
/* Single accent (blue) — restrained */
--accent: #2563eb;
--accent-press:#1d4ed8;
--accent-weak: #eef2fe; /* tints / soft fills */
--accent-line: #cfdcfb;
/* Status (muted, for data/badges only — never decoration) */
--ok: #157a52;
--ok-weak: #e7f3ec;
--warn: #9a6a14;
--warn-weak: #f6efe0;
--danger: #b42318;
--danger-weak: #fbecea;
/* Shape & shadow */
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 18px;
--shadow: 0 1px 2px rgba(25,25,23,.04), 0 8px 24px -12px rgba(25,25,23,.12);
--shadow-sm: 0 1px 2px rgba(25,25,23,.05);
/* Type */
--font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Layout */
--container: 1160px;
--gutter: 24px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--text);
line-height: 1.6;
font-size: 16px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Typography ---------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--text); }
h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 3.5vw, 42px); }
h3 { font-size: 20px; letter-spacing: -0.01em; }
p { color: var(--text-2); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-press); }
.eyebrow {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-3);
display: inline-flex;
align-items: center;
gap: 8px;
}
.eyebrow .num { color: var(--accent); } /* editorial "01 /" numbering */
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-3); }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--text-2); line-height: 1.6; }
/* Layout -------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 10vw, 120px) 0; }
.section--well { background: var(--bg-subtle); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stack > * + * { margin-top: 16px; }
/* Buttons ------------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 18px; border-radius: var(--radius-sm);
font: 600 14px/1 var(--font-sans); cursor: pointer;
border: 1px solid transparent; text-decoration: none;
transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--text); color: #fff; }
.btn-primary:hover { background: #000; color: #fff; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--text-3); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-press); }
.btn-lg { padding: 14px 24px; font-size: 15px; border-radius: var(--radius); }
.btn-block { width: 100%; }
/* Cards --------------------------------------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card--hover:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.card--raised { box-shadow: var(--shadow-sm); }
/* Forms --------------------------------------------------------------------- */
.label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.input, .select, .textarea {
width: 100%; padding: 11px 13px; font: 400 15px/1.4 var(--font-sans);
color: var(--text); background: var(--surface);
border: 1px solid var(--line-2); border-radius: var(--radius-sm);
transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus,
:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
/* Badges / pills ------------------------------------------------------------ */
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 100px;
font: 600 12px/1 var(--font-sans); letter-spacing: .01em;
background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line);
}
.badge-accent { background: var(--accent-weak); color: var(--accent-press); border-color: var(--accent-line); }
.badge-ok { background: var(--ok-weak); color: var(--ok); border-color: transparent; }
.badge-warn { background: var(--warn-weak); color: var(--warn); border-color: transparent; }
.badge-danger { background: var(--danger-weak); color: var(--danger); border-color: transparent; }
/* Tables (dashboards) ------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: .08em; color: var(--text-3);
padding: 12px 16px; border-bottom: 1px solid var(--line-2);
}
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--text); }
.table tr:hover td { background: var(--surface-2); }
/* Top navigation ------------------------------------------------------------ */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.8); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease, background .2s ease; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; letter-spacing: -.02em; }
.nav-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--text); color: #fff; display: grid; place-items: center; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link { color: var(--text-2); font-size: 14px; font-weight: 500; }
.nav-link:hover { color: var(--text); }
/* Motion (subtle, optional) ------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .06s; }
[data-delay="2"] { transition-delay: .12s; }
[data-delay="3"] { transition-delay: .18s; }
[data-delay="4"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.reveal { opacity: 1; transform: none; }
}
/* Scrollbar (light, unobtrusive) ------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
/* Responsive helpers -------------------------------------------------------- */
@media (max-width: 768px) {
.nav-links { display: none; }
}