/* Havenfold — design system Plain CSS, no build step. Warm editorial minimalism: paper tones, serif display type, copper accent. Theme follows the OS by default; [data-theme] on (set by the nav toggle) overrides it. */ /* ---------- Tokens ---------- */ :root { color-scheme: light; /* Light (paper) */ --bg: #f7f4ee; --bg-subtle: #efeae0; --text: #211d18; --text-secondary: #6f6759; --hairline: rgba(33, 29, 24, 0.14); --accent: #a34a24; --accent-strong: #8a3d1c; --accent-contrast: #ffffff; --nav-bg: rgba(247, 244, 238, 0.8); --show-sun: none; --show-moon: block; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; --measure: 42rem; /* narrow text column */ --wide: 68rem; /* wide layout container */ --gutter: clamp(1.25rem, 4vw, 2rem); --section-pad: clamp(6rem, 12vw, 10rem); --ease: cubic-bezier(0.2, 0.6, 0.2, 1); } /* Dark (ink) — applied only via the nav toggle (data-theme="dark"). The site deliberately defaults to light for everyone, so there is no prefers-color-scheme fallback block (decision 2026-07-26). */ :root[data-theme="dark"] { color-scheme: dark; --bg: #171411; --bg-subtle: #201c17; --text: #ece7de; --text-secondary: #a89f92; --hairline: rgba(236, 231, 222, 0.15); --accent: #d98a5c; --accent-strong: #e39d74; --accent-contrast: #221507; --nav-bg: rgba(23, 20, 17, 0.72); --show-sun: block; --show-moon: none; } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 1.0625rem; /* 17px */ line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } img, svg { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ---------- Cross-page fade (View Transitions API) ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; } /* ---------- Layout ---------- */ .container { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); } .container-narrow { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); } .section + .section { border-top: 1px solid var(--hairline); } .section-subtle { background: var(--bg-subtle); } /* ---------- Typography ---------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } h1 em, h2 em { font-style: italic; letter-spacing: 0; } .display { font-size: clamp(2.75rem, 7vw, 5rem); letter-spacing: -0.015em; } h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); } h3 { font-size: 1.4375rem; line-height: 1.25; } .eyebrow { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 1.25rem; } .eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--accent); } .lede { font-size: clamp(1.1875rem, 2.2vw, 1.5rem); line-height: 1.45; color: var(--text-secondary); text-wrap: pretty; max-width: 34em; } .prose > * + * { margin-top: 1.25em; } .prose h2 { margin-top: 2.5em; font-size: 1.625rem; } .prose h2:first-child { margin-top: 0; } .muted { color: var(--text-secondary); } .small { font-size: 0.9375rem; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--nav-bg); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--hairline); } .nav { max-width: var(--wide); margin-inline: auto; padding: 0.75rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nav-brand { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; letter-spacing: 0; color: var(--text); } .nav-brand:hover { text-decoration: none; } .nav-links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); } .nav-links a { font-size: 0.875rem; color: var(--text-secondary); transition: color 0.2s var(--ease); } .nav-links a:hover { color: var(--text); text-decoration: none; } .nav-links a[aria-current="page"] { color: var(--text); border-bottom: 1px solid var(--accent); padding-bottom: 2px; } .theme-toggle { appearance: none; border: 1px solid var(--hairline); background: transparent; color: var(--text-secondary); width: 2.125rem; height: 2.125rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--text-secondary); } .theme-toggle .icon-sun { display: var(--show-sun); } .theme-toggle .icon-moon { display: var(--show-moon); } /* ---------- Components ---------- */ .button { display: inline-block; padding: 0.8125rem 1.5rem; border-radius: 8px; background: var(--accent); color: var(--accent-contrast); font-size: 1rem; font-weight: 500; transition: background-color 0.2s var(--ease), transform 0.2s var(--ease); } .button:hover { text-decoration: none; background: var(--accent-strong); transform: translateY(-1px); } .link-arrow { font-weight: 500; white-space: nowrap; border-bottom: 1px solid var(--accent); padding-bottom: 2px; } .link-arrow::after { content: " \2192"; display: inline-block; transition: transform 0.2s var(--ease); } .link-arrow:hover { text-decoration: none; } .link-arrow:hover::after { transform: translateX(4px); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 4rem); } @media (max-width: 47.9375rem) { .grid-3 { grid-template-columns: 1fr; } } .grid-3 > div { border-top: 1px solid var(--hairline); padding-top: 1.5rem; } .grid-3 h3 { margin-bottom: 0.625rem; } .grid-3 p { color: var(--text-secondary); } .feature-list { list-style: none; padding: 0; counter-reset: feat; display: grid; gap: 1.75rem; } .feature-list li { counter-increment: feat; padding-left: 2.875rem; position: relative; } .feature-list li::before { content: counter(feat, decimal-leading-zero); position: absolute; left: 0; top: 0.3em; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); font-variant-numeric: tabular-nums; } .feature-list strong { display: block; font-weight: 600; margin-bottom: 0.125rem; } .feature-list span { color: var(--text-secondary); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--hairline); padding-block: 2.5rem; } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--text-secondary); } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { color: var(--text-secondary); } .footer-links a:hover { color: var(--text); text-decoration: none; } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--reveal-delay, 0s); } .reveal.is-visible { opacity: 1; transform: none; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body { transition: none; } .reveal { opacity: 1; transform: none; transition: none; } @view-transition { navigation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }