/* --- Theme tokens --------------------------------------------------------- Default: warm tarmac grey with deep-black logo (concrete/apron aesthetic). To switch to dark, set data-theme="dark" on . Both palettes prepared. */ :root { --bg-center: #d6d2cc; --bg-mid: #c5c1bb; --bg-edge: #a9a59e; --fg: #0a0a0a; --muted: rgba(10, 10, 10, 0.62); --hairline: rgba(10, 10, 10, 0.22); --logo-max: clamp(13.75rem, 42vw, 26.25rem); /* 220 → 420px */ --subline-size: clamp(0.6875rem, 1.4vw, 0.8125rem); /* 11 → 13px */ --subline-track: 0.34em; --gap-logo-subline: clamp(1.5rem, 3vw, 2.25rem); --gap-subline-rule: clamp(1.25rem, 2.4vw, 1.875rem); } html[data-theme="dark"] { --bg-center: #16161a; --bg-mid: #0e0e10; --bg-edge: #050507; --fg: #f5f5f0; --muted: rgba(245, 245, 240, 0.58); --hairline: rgba(245, 245, 240, 0.26); } /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--fg); background-color: var(--bg-mid); background-image: radial-gradient( ellipse 95% 70% at 50% 36%, var(--bg-center) 0%, var(--bg-mid) 50%, var(--bg-edge) 100% ); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* --- Layout -------------------------------------------------------------- */ main { min-height: 100dvh; min-height: 100vh; /* fallback */ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem 4.5rem; position: relative; text-align: center; } /* Logo via CSS mask: external SVG, theme-aware color, alt via aria-label. Replace /assets/logo.svg with your final vector — coloring stays automatic. */ .logo { display: block; width: var(--logo-max); max-width: 100%; aspect-ratio: 528 / 360; background-color: var(--fg); -webkit-mask: url("/assets/logo.svg") no-repeat center / contain; mask: url("/assets/logo.svg") no-repeat center / contain; } .subline { margin-top: var(--gap-logo-subline); font-size: var(--subline-size); font-weight: 500; letter-spacing: var(--subline-track); text-transform: uppercase; color: var(--muted); line-height: 1.05; text-wrap: balance; } .subline .line { white-space: nowrap; } .subline .sep { display: inline-block; margin: 0 0.55em; color: var(--hairline); font-weight: 400; transform: translateY(-0.04em); } /* On narrow viewports, drop the pipe and stack the two halves */ @media (max-width: 30em) { :root { --subline-track: 0.28em; } .subline .sep { display: none; } .subline .line { display: block; margin: 0.45em 0; } } /* Stamp-mark hairline beneath subline — small intentional detail */ .rule { margin-top: var(--gap-subline-rule); width: 2.25rem; /* 36px */ height: 1px; background: var(--hairline); } /* --- Impressum link (decent, bottom-center) ------------------------------ */ .colophon { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); font-size: 0.6875rem; /* 11px */ letter-spacing: 0.18em; text-transform: uppercase; } .colophon a { color: var(--fg); opacity: 0.32; text-decoration: none; transition: opacity 200ms ease; } .colophon a:hover, .colophon a:focus-visible { opacity: 0.7; outline: none; } .colophon a:focus-visible { text-decoration: underline; text-underline-offset: 0.35em; } .colophon .dot { display: inline-block; margin: 0 0.55em; color: var(--fg); opacity: 0.22; transform: translateY(-0.05em); } /* --- Legal pages (Impressum, Datenschutz) ------------------------------ */ main.legal-main { min-height: 100dvh; min-height: 100vh; display: block; padding: clamp(3rem, 9vh, 6rem) 1.5rem clamp(3rem, 7vh, 5rem); } .legal { max-width: 38rem; margin: 0 auto; text-align: left; color: var(--fg); } .legal h1 { font-size: clamp(0.75rem, 1.4vw, 0.8125rem); font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); margin-bottom: 2.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--hairline); } .legal h2 { font-size: 0.6875rem; /* 11px */ font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.75rem; } .legal section { margin-top: 2rem; } .legal section:first-of-type { margin-top: 0; } .legal p { font-size: 0.9375rem; /* 15px */ line-height: 1.65; color: var(--fg); margin: 0 0 0.85rem; } .legal p:last-child { margin-bottom: 0; } .legal .lede { font-size: 1rem; line-height: 1.6; color: var(--fg); opacity: 0.82; margin-bottom: 2.5rem; } .legal a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--hairline); transition: text-decoration-color 200ms ease; } .legal a:hover, .legal a:focus-visible { text-decoration-color: var(--fg); outline: none; } .legal .back { display: inline-block; margin-top: 3rem; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); opacity: 0.45; text-decoration: none; transition: opacity 200ms ease; } .legal .back:hover, .legal .back:focus-visible { opacity: 0.85; outline: none; } /* --- Motion -------------------------------------------------------------- */ @keyframes pa-rise { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: translateY(0); } } @keyframes pa-fade { from { opacity: 0; } to { opacity: 1; } } .logo { animation: pa-rise 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } .subline { animation: pa-rise 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 280ms both; } .rule { animation: pa-rule 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 540ms both; transform-origin: center; } .colophon { animation: pa-fade 900ms ease 800ms both; } @keyframes pa-rule { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .logo, .subline, .rule, .colophon { animation: none; } }