/* ========================================================================== Shared styles for the standalone document pages (/about/, /privacy/, /terms/). Layered on top of styles.css, which supplies the design tokens and the header/footer chrome these pages reuse. Language switching here is pure CSS, driven by the [data-active-lang] attribute lang-cookie.js sets synchronously in — the same approach loppemarked/ uses. The home page instead toggles inline styles from scripts.js, which these pages deliberately do not load: they render from their own markup and never call the API. ========================================================================== */ html[data-active-lang="en"] [data-lang="dk"], html[data-active-lang="dk"] [data-lang="en"] { display: none !important; } /* The language pill has no script to mark the active option, so derive it from the same attribute rather than loading scripts.js for one class. */ html[data-active-lang="en"] .lang-pill-option[hreflang="en"], html[data-active-lang="dk"] .lang-pill-option[hreflang="da"] { background: rgba(255, 255, 255, 0.18); } /* Section anchors are the linking contract for the other UN17 sites (/privacy/#potluck and friends), so keep every target clear of the sticky header when one is jumped to. */ html { scroll-padding-top: 84px; } /* ========================================================================== Page header band ========================================================================== */ .doc-hero { background: var(--dark); color: #fff; padding: clamp(48px, 7vw, 84px) clamp(20px, 4vw, 48px) clamp(36px, 5vw, 56px); } .doc-hero-inner { max-width: 1180px; margin: 0 auto; } .doc-hero .kicker { color: var(--gold); } .doc-hero h1 { margin: 0 0 14px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; } .doc-lede { margin: 0; max-width: 62ch; color: rgba(255, 255, 255, 0.72); font-size: 1.05rem; } .doc-meta { margin: 22px 0 0; color: rgba(255, 255, 255, 0.45); font-size: 0.85rem; } /* ========================================================================== Two-column body: sticky contents rail beside the document ========================================================================== */ .doc-layout { max-width: 1180px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px) 64px; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; } @media (max-width: 860px) { .doc-layout { grid-template-columns: minmax(0, 1fr); } } .doc-toc { position: sticky; top: 84px; } @media (max-width: 860px) { .doc-toc { position: static; padding-bottom: 8px; border-bottom: 1px solid var(--border); } } .doc-toc-heading { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--text-faint); margin: 0 0 12px; } .doc-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .doc-toc-list a { color: var(--text-soft); font-size: 0.9rem; } .doc-toc-list a:hover { color: var(--ink); } /* ========================================================================== Document body ========================================================================== */ .doc-body { max-width: 74ch; } .doc-body h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 44px 0 12px; padding-top: 4px; } .doc-body section:first-of-type h2 { margin-top: 0; } .doc-body h3 { font-size: 1.05rem; margin: 26px 0 8px; } .doc-body p { margin: 0 0 14px; } .doc-body ul { margin: 0 0 14px; padding-left: 22px; } .doc-body li { margin-bottom: 7px; } /* Marks the app a section is about, so a reader landing on a deep link knows which of the six sites they are reading about. */ .doc-app-url { display: inline-block; font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--text-faint); background: var(--card-tint); border: 1px solid var(--border-soft); border-radius: 100px; padding: 3px 12px; margin: 0 0 12px; } .doc-app-url:hover { color: var(--ink); text-decoration: none; } /* A short fact list under an app heading — the answers to "is there a sign-in, what is stored, who can see it". */ .doc-facts { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--border-soft); } .doc-facts li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 0.95rem; } @media (max-width: 560px) { .doc-facts li { grid-template-columns: minmax(0, 1fr); gap: 2px; } } .doc-fact-label { font-style: normal; font-weight: 600; color: var(--text-soft); } /* Callout for the things we deliberately do not claim to know yet. */ .doc-note { border-left: 3px solid var(--gold); background: var(--card-tint); padding: 16px 20px; margin: 0 0 18px; } .doc-note p:last-child { margin-bottom: 0; } .doc-note-heading { font-family: var(--font-display); font-weight: 600; margin: 0 0 8px; } /* Cross-links to the sibling documents, at the foot of the body column. */ .doc-siblings { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 18px; font-size: 0.9rem; }