/* ========================================================================== TurMap — site styles -------------------------------------------------------------------------- One stylesheet for all three pages. No framework, no build step. Layout order below, so you can jump straight to what you want to change: 1. Tokens — colours, fonts, spacing. Change these first. 2. Reset — the handful of resets actually worth having 3. Page frame — , the centred column, header, footer 4. Home page — hero, download badge, feature cards, prose 5. Document page — the long-form privacy pages 6. Print Colour tokens come from docs/turmap-brand-and-store.md §4: navy #1a2e4a, accent #e8833a, cream #faf8f4. ========================================================================== */ /* 1. Tokens ================================================================ Light mode is the default. Dark mode overrides only the colour tokens further down — no layout rules are repeated there, so you can restyle the site by editing this block alone. */ :root { --ink: #1a2e4a; /* body text, headings */ --ink-soft: #55637a; /* secondary text, captions */ --ground: #faf8f4; /* page background */ --panel: #f1ece3; /* subtle raised blocks */ --rule: #ddd5c8; /* hairlines */ --accent: #c25f18; /* links. Darker than brand #e8833a so it clears 4.5:1 contrast on cream. */ --accent-plain: #e8833a; /* the true brand orange, for non-text marks */ --measure: 34rem; /* reading column width */ --gutter: 1.25rem; /* page side padding on narrow screens */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --ink: #f1ece3; --ink-soft: #a8b3c4; --ground: #14243a; --panel: #1e3352; --rule: #2e4569; --accent: #f0964f; /* lighter than brand orange, for contrast on navy */ } } /* 2. Reset ================================================================= */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; } img { max-width: 100%; height: auto; display: block; } /* 3. Page frame ============================================================ */ body { font-family: var(--font); font-size: 1.0625rem; /* 17px — comfortable on a phone */ line-height: 1.65; color: var(--ink); background: var(--ground); -webkit-text-size-adjust: 100%; } /* Every page wraps its content in
. */ .column { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } /* --- Site header: wordmark, repeated on every page --- */ .site-header { padding-block: 2.5rem 0; } .wordmark { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } /* The orange bar in the wordmark — the "trace" mark, reduced to one rectangle. Delete this rule and the in the HTML if you want a plain text wordmark. */ .wordmark .mark { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.45rem; background: var(--accent-plain); border-radius: 2px; transform: translateY(1px); } /* --- Site footer --- */ .site-footer { margin-top: 4rem; padding-block: 1.5rem 3rem; border-top: 1px solid var(--rule); font-size: 0.9375rem; color: var(--ink-soft); } .site-footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.75rem; } /* 4. Home page ============================================================= */ /* --- Hero: headline, benefit line, audience, platforms --- */ .hero { padding-block: 3rem 0.5rem; } .hero h1 { font-size: 2.25rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 650; margin-bottom: 0.75rem; } /* The one flat benefit line under the headline. */ .hero .lede { font-size: 1.1875rem; color: var(--ink-soft); margin-bottom: 1.25rem; } /* Who it's for. Short. */ .hero .audience { margin-bottom: 0.75rem; } /* "For iPhone and iPad" — small, quiet, near the top on purpose. */ .hero .platforms { font-size: 0.9375rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; } /* --- Download / App Store badge --- */ .download { padding-block: 1.75rem; } /* Apple's real badge is a fixed-aspect image; this just keeps it from stretching and gives it room. Apple's guidelines set the minimum size and the clear space around it — check them rather than trusting this. */ .download img { height: 60px; width: auto; } /* Stand-in shown until the App Store listing exists. It deliberately does NOT look like Apple's badge: a convincing fake badge that doesn't click through is worse than an honest label. Delete this rule with the markup. */ .badge-placeholder { display: inline-block; padding: 0.7rem 1.25rem; border: 1.5px dashed var(--rule); border-radius: 8px; color: var(--ink-soft); font-size: 0.9375rem; font-weight: 500; margin: 0; } .download-note { margin-top: 1rem; font-size: 0.9375rem; color: var(--ink-soft); max-width: 30rem; } /* --- Feature cards --- */ .cards { padding-block: 1.5rem; } /* Two columns where there's room, one on a phone. auto-fit means no media query is needed — the cards reflow on their own. */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem 2rem; } .card h3 { font-size: 1rem; font-weight: 650; margin-bottom: 0.35rem; } .card p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; } /* --- Prose sections --- */ .prose { margin-block: 2rem; } .prose h2 { font-size: 1.25rem; margin-top: 2.5rem; margin-bottom: 0.65rem; } .prose p + p { margin-top: 0.85rem; } /* Marks unwritten copy so it can't be shipped by accident. Delete the rule and the markup together once the section is written. */ .placeholder-note { padding: 0.85rem 1rem; background: var(--panel); border-left: 3px solid var(--accent-plain); border-radius: 0 6px 6px 0; color: var(--ink-soft); font-style: italic; } /* 5. Document pages (privacy, personvern) ================================== */ .doc { padding-block: 2rem; } .doc h1 { font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .doc .updated { color: var(--ink-soft); font-size: 0.9375rem; margin-bottom: 2rem; } .doc h2 { font-size: 1.25rem; margin-top: 2.5rem; margin-bottom: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); } .doc h3 { font-size: 1.0625rem; margin-top: 1.75rem; margin-bottom: 0.5rem; } .doc p { margin-bottom: 1rem; } .doc ul { margin-bottom: 1rem; padding-left: 1.25rem; } .doc li { margin-bottom: 0.4rem; } /* The summary box at the top of each policy. */ .doc .summary { padding: 1.25rem; background: var(--panel); border-radius: 8px; margin-bottom: 2rem; } .doc .summary p:last-child { margin-bottom: 0; } /* Tables: the storage table and the rights table. They go horizontally scrollable rather than squashed on a phone. */ .table-wrap { overflow-x: auto; margin-bottom: 1.5rem; } .doc table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; } .doc th, .doc td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--rule); } .doc th { font-weight: 600; } /* Language switch between the English and Norwegian policies. */ .lang-switch { font-size: 0.9375rem; color: var(--ink-soft); margin-bottom: 1.5rem; } /* 6. Print ================================================================= */ @media print { .site-footer nav, .lang-switch { display: none; } body { color: #000; background: #fff; font-size: 11pt; } a { color: #000; } }