/* ------------------------------------------------------------------ Maulwurf Media — single-page site Design: minimal personal/company card. One column, generous space, restrained "burnt copper" accent (a nod to soil + wiring — a mole digging through the underground of technology). Light/dark follow the system, no hardcoded theme. ------------------------------------------------------------------ */ /* ---- design tokens ------------------------------------------------ */ :root { --bg: #fbfaf7; --fg: #1c1a16; --muted: #5f5646; --rule: rgba(28, 26, 22, 0.12); --accent: #a8551f; --accent-contrast: #fffdfa; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --content-width: 620px; } @media (prefers-color-scheme: dark) { :root { --bg: #15130f; --fg: #eeece4; --muted: #a39a85; --rule: rgba(238, 236, 228, 0.14); --accent: #d98a4f; --accent-contrast: #15130f; } } /* ---- reset ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- language toggle ------------------------------------------------ */ /* Default (no JS / English): only English strings are shown. Adding the "lang-nl" class to flips visibility to the Dutch strings. */ [data-lang="nl"] { display: none; } html.lang-nl [data-lang="en"] { display: none; } html.lang-nl [data-lang="nl"] { display: inherit; } .page-header { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 1.5rem 1.5rem 0; display: flex; justify-content: flex-end; } .lang-switch { display: flex; align-items: center; gap: 0.4em; font-size: 0.8125rem; letter-spacing: 0.02em; } .lang-switch span[aria-hidden] { color: var(--rule); } .lang-btn { appearance: none; background: none; border: none; padding: 0.25em 0.15em; margin: 0; font: inherit; color: var(--muted); cursor: pointer; } .lang-btn:hover { color: var(--fg); } .lang-btn[aria-current="true"] { color: var(--accent); font-weight: 600; } .lang-btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ---- main content --------------------------------------------------- */ main { flex: 1 0 auto; width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 4rem 1.5rem 3rem; } h1 { margin: 0; font-size: clamp(2.1rem, 5vw + 1rem, 2.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .tagline { margin: 0.85rem 0 0; font-size: 1.125rem; font-weight: 400; color: var(--muted); line-height: 1.5; } main p { margin: 0 0 1.25em; } .prose { margin-top: 2.5rem; } .prose p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; } a:hover { text-decoration-color: currentColor; } /* ---- contact block ---------------------------------------------------- */ .contact { margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--rule); } .contact-label { margin: 0 0 0.5em; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .contact .email { font-size: 1.1875rem; font-weight: 500; } /* ---- footer ------------------------------------------------------------ */ footer { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 1.5rem 1.5rem 2.5rem; border-top: 1px solid var(--rule); } footer p { margin: 0; font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--muted); } /* ---- small screens ------------------------------------------------------ */ @media (max-width: 420px) { main { padding-top: 3rem; } h1 { font-size: 2rem; } } /* ---- motion --------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { a, .lang-btn { transition: color 150ms ease, text-decoration-color 150ms ease; } }