/* ============================================================ ARDES — Colors & Type Foundations (v2: monochrome) ============================================================ Editorial black / white / grey scale. No warmth, no accents outside the greyscale. Backgrounds may go pure white. ============================================================ */ /* ---------- Fonts ---------------------------------------------------- Display: Newsreader (Google Fonts) — editorial serif with even strokes; far more readable at body & small display sizes than the Bodoni-style high-contrast didones. Substitute for GT Sectra. Body: Hanken Grotesk (Google Fonts) — substitute for Söhne / Neue Haas Grotesk. See README.md → "Font substitutions" — flagged for the user. --------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap'); :root { /* ============== COLOR SYSTEM (monochrome) ============== */ /* Whites & near-whites */ --c-white: #FFFFFF; /* primary page background */ --c-paper: #F4F4F4; /* secondary / elevated surface */ --c-line-soft: #ECECEC; /* lightest hairline */ /* Greys */ --c-grey-100: #E1E1E1; --c-grey-200: #C8C8C8; --c-grey-300: #A8A8A8; --c-grey-400: #8A8A8A; /* captions, meta */ --c-grey-500: #6B6B6B; --c-grey-600: #4A4A4A; /* body copy */ --c-grey-700: #2E2E2E; --c-grey-800: #1A1A1A; /* headlines */ /* Pure */ --c-black: #000000; /* Functional */ --c-line: #D4D4D4; /* default hairline */ --c-line-strong: #9A9A9A; /* stronger hairline */ --c-overlay: rgba(10, 10, 10, 0.55); /* image scrim */ --c-overlay-soft: rgba(10, 10, 10, 0.20); /* ----- Back-compat aliases (older files use these names) ----- */ --c-wool-white: var(--c-white); --c-bone: var(--c-paper); --c-sand-stone: var(--c-grey-100); --c-cappuccino: var(--c-grey-300); --c-dawn-grey: var(--c-grey-400); --c-urban-grey: var(--c-grey-600); --c-anthracite: var(--c-grey-800); --c-moss: var(--c-grey-800); /* accent = ink */ --c-moss-deep: var(--c-black); /* hover = pure black */ --c-violet: var(--c-grey-600); /* ---------- Semantic tokens ---------- */ --bg: var(--c-white); --bg-elevated: var(--c-paper); --bg-inverse: var(--c-grey-800); --fg: var(--c-grey-800); /* headlines, primary text */ --fg-body: var(--c-grey-600); /* body copy */ --fg-muted: var(--c-grey-400); /* captions, meta */ --fg-on-dark: var(--c-white); --accent: var(--c-grey-800); --accent-hover: var(--c-black); --border: var(--c-line); --border-strong: var(--c-line-strong); /* ============== TYPE SYSTEM ============== */ --font-display: 'Newsreader', 'GT Sectra', 'Source Serif Pro', Georgia, serif; --font-sans: 'Hanken Grotesk', 'Söhne', 'Neue Haas Grotesk', -apple-system, system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; /* Editorial type scale */ --t-display-xl: clamp(72px, 9vw, 144px); --t-display-lg: clamp(56px, 6vw, 96px); --t-display-md: clamp(40px, 4.4vw, 64px); --t-h1: clamp(36px, 3.6vw, 52px); --t-h2: clamp(28px, 2.6vw, 40px); --t-h3: 22px; --t-h4: 17px; --t-body-lg: 19px; --t-body: 16px; --t-body-sm: 14px; --t-caption: 12px; --lh-display: 1.05; --lh-heading: 1.15; --lh-body: 1.65; --lh-tight: 1.35; --ls-display: -0.02em; --ls-heading: -0.01em; --ls-body: 0; --ls-caption: 0.14em; /* ============== LAYOUT / SPACING ============== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; --max-width: 1440px; --gutter: clamp(24px, 4vw, 64px); --col-gap: clamp(16px, 2vw, 32px); --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --hairline: 1px; --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.10); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 560ms; } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ html, body { background: var(--bg); color: var(--fg-body); font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { color: var(--fg); font-family: var(--font-display); font-weight: 500; font-optical-sizing: auto; letter-spacing: var(--ls-heading); line-height: var(--lh-heading); text-wrap: balance; margin: 0; } h1 { font-size: var(--t-h1); letter-spacing: var(--ls-display); line-height: var(--lh-display); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } h4 { font-size: var(--t-h4); font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; } p { font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-body); text-wrap: pretty; margin: 0 0 1em; } .lead, p.lead { font-size: var(--t-body-lg); line-height: 1.55; color: var(--fg); } .eyebrow, .kicker { font-family: var(--font-sans); font-size: var(--t-caption); font-weight: 500; letter-spacing: var(--ls-caption); text-transform: uppercase; color: var(--fg-muted); } .caption { font-family: var(--font-sans); font-size: var(--t-body-sm); color: var(--fg-muted); line-height: 1.5; } .display-xl { font-family: var(--font-display); font-weight: 500; font-size: var(--t-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--fg); } .display-lg { font-family: var(--font-display); font-weight: 500; font-size: var(--t-display-lg); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--fg); } .display-md { font-family: var(--font-display); font-weight: 500; font-size: var(--t-display-md); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--fg); } .display-italic { font-style: italic; } hr, .hairline { border: 0; height: 1px; background: var(--border); margin: 0; } a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } a:hover { color: var(--c-black); } ::selection { background: var(--c-grey-800); color: var(--c-white); }