/* ========================================================================= legal.css — shared chrome for the Resko website's long-form pages (Impressum / Privacy). Dark marketing surface, readable prose column. Loaded after colors_and_type.css. ========================================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--fg1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; border-bottom: 1px solid var(--hairline); background: rgba(0,0,0,0.71); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: var(--tr-wordmark); text-transform: uppercase; color: var(--fg1); text-decoration: none; } .nav-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 500; font-size: 10px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg2); text-decoration: none; cursor: pointer; transition: color var(--dur-fast) var(--ease); } .nav-link:hover { color: var(--fg1); } .header-right { display: flex; align-items: center; gap: 20px; } .arrow { display: inline-block; transition: transform var(--dur-base) var(--ease); } .hover-arrow:hover .arrow { transform: translateX(3px); } .hover-arrow.back:hover .arrow { transform: translateX(-3px); } /* ---------- Document column ---------- */ .doc { max-width: 760px; margin: 0 auto; padding: 88px 48px 120px; } .eyebrow { margin: 0 0 18px; font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--fg3); } .doc h1 { margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4rem); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg1); /* German compounds are long: "Datenschutzerklärung" alone measured 432px in a 390px viewport and pushed the page sideways. Hyphenate instead of shrinking the type — is set by i18n.js, so the browser breaks it on real German syllable boundaries (Daten-schutz-erklä-rung). overflow-wrap is the safety net for any word the dictionary does not know. */ hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .doc-meta { margin: 0 0 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fg3); } .doc-lead { margin: 28px 0 0; font-family: var(--font-body); font-size: 18px; line-height: var(--lh-relaxed); color: var(--fg2); } .doc section { margin-top: 56px; } .doc h2 { margin: 0 0 20px; padding-top: 28px; border-top: 1px solid var(--hairline); font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg1); } .doc h3 { margin: 28px 0 10px; font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: 0; color: var(--fg1); } .doc p, .doc li { font-family: var(--font-body); font-size: 16px; line-height: 1.72; color: var(--fg2); text-wrap: pretty; } .doc p { margin: 0 0 16px; } .doc ul { margin: 0 0 16px; padding-left: 20px; } .doc li { margin-bottom: 8px; } .doc a { color: var(--fg1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fg4); } .doc a:hover { text-decoration-color: var(--voltage); } .doc strong { color: var(--fg1); font-weight: 600; } /* placeholder tokens the user must fill in */ .ph { color: var(--fg3); font-family: var(--font-mono); font-size: 0.92em; background: var(--ink-2); border: 1px solid var(--hairline); border-radius: 2px; padding: 1px 6px; } /* definition-style block for the Impressum identity data */ .idblock { margin: 0 0 16px; font-family: var(--font-body); font-size: 16px; line-height: 1.72; color: var(--fg2); } .idblock .label { display: block; margin-top: 16px; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg3); } .idblock .label:first-child { margin-top: 0; } /* ---------- Footer ---------- */ .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 48px; border-top: 1px solid var(--hairline); background: rgba(0,0,0,0.55); } .footer-left { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .footer-tagline { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg2); } .footer-nav { display: flex; gap: 24px; } .footer-nav .nav-link { color: var(--fg3); } .footer-nav .nav-link:hover { color: var(--fg1); } .footer-nav .nav-link[aria-current="page"] { color: var(--fg1); } .footer-copy { font-family: var(--font-display); font-size: 10px; /* matches .footer-tagline, as on the landing */ letter-spacing: 0.1em; color: var(--fg4); } @media (max-width: 680px) { .site-header, .site-footer { padding-left: 24px; padding-right: 24px; } .doc { padding: 56px 24px 88px; } /* Phone footer: links on their own row, then the slogan and the copyright side by side on one line. `display: contents` on .footer-left lets its two children take part in this grid directly, so no markup change is needed. */ .site-footer { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nav nav" "tag copy"; align-items: center; gap: 14px 16px; } .footer-left { display: contents; } .footer-nav { grid-area: nav; } .footer-tagline { grid-area: tag; } .footer-copy { grid-area: copy; white-space: nowrap; } }