/* LogHog — the public document pages: privacy.html, terms.html, support.html * (go-live steps 17, 18 and 20). One stylesheet for the three, since they are the * same page with different words. They need no sign-in and load no app code: the * app links to the LIVE copies on loghog.co.uk, opened in the browser, so a change * to the wording never waits for an App Store update. * * The theme follows the app's own choice where this browser has one (the inline * script in each page's ), and the app's default, dark, where it does not. */ :root { --bg: #0f0f0f; --surface: #1a1a1a; --surface2: #222222; --border: #2e2e2e; --border2: #3a3a3a; --text: #f0ede8; --text2: #b3aea7; --text3: #7a7671; --accent: #c8a96e; --red: #c0614a; } html.light { --bg: #f4f3ef; --surface: #ffffff; --surface2: #eceae4; --border: #dedad2; --border2: #ccc9c0; --text: #1c1a17; --text2: #55524e; --text3: #78756f; --accent: #046307; --red: #b83c2a; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.65; padding: max(20px, env(safe-area-inset-top)) 16px max(40px, env(safe-area-inset-bottom)); } .doc { max-width: 680px; margin: 0 auto; } .doc-brand { display: inline-flex; align-items: center; gap: 9px; margin: 8px 0 36px; text-decoration: none; color: var(--text3); font-family: 'DM Serif Display', serif; font-size: 18px; letter-spacing: -0.2px; } .doc-brand img { width: 30px; height: 30px; border-radius: 6px; object-fit: contain; } h1 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 34px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.3px; } .doc-date { font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); margin: 0 0 28px; } h2 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 22px; line-height: 1.25; margin: 40px 0 10px; scroll-margin-top: 20px; } h3 { font-size: 15px; font-weight: 500; margin: 22px 0 6px; } p { margin: 0 0 14px; color: var(--text2); } p strong, li strong { color: var(--text); font-weight: 500; } ul { margin: 0 0 14px; padding-left: 20px; color: var(--text2); } li { margin-bottom: 6px; } li::marker { color: var(--text3); } a { color: var(--accent); text-underline-offset: 2px; } /* The short version, at the top: what most readers came for. */ .doc-summary { background: var(--surface); border: 1px solid var(--border2); border-radius: 12px; padding: 18px 20px 6px; margin: 0 0 12px; } .doc-summary h2 { margin-top: 0; font-size: 19px; } .doc-summary ul { padding-left: 18px; } /* Who does what with your data: one row per service. */ .doc-table { width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: 14px; } .doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--border); color: var(--text2); } .doc-table th { font-family: 'DM Mono', monospace; font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); } .doc-table td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; padding-right: 14px; } @media (max-width: 520px) { /* A table three columns wide does not fit a phone; each row becomes a card. */ .doc-table thead { display: none; } .doc-table, .doc-table tbody, .doc-table tr, .doc-table td { display: block; width: 100%; } .doc-table tr { border-bottom: 1px solid var(--border); padding: 10px 0; } .doc-table td { border: none; padding: 1px 0; white-space: normal; } } /* A contact line with a copy button: a mailto: does nothing on a phone with no Mail app. */ .doc-contact { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; } .doc-contact a { font-weight: 500; } .doc-copy { margin-left: auto; background: transparent; border: 1px solid var(--border2); border-radius: 6px; color: var(--text2); font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 6px 12px; cursor: pointer; -webkit-appearance: none; } .doc-steps { counter-reset: s; list-style: none; padding-left: 0; } .doc-steps li { counter-increment: s; position: relative; padding-left: 30px; } .doc-steps li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border2); font-family: 'DM Mono', monospace; font-size: 11px; line-height: 18px; text-align: center; color: var(--text3); } .doc-foot { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text3); } .doc-foot a { color: var(--text2); text-decoration: none; } .doc-foot a[aria-current="page"] { color: var(--text); } .doc-foot span { margin-left: auto; } @media (hover: hover) { .doc-copy:hover { border-color: var(--accent); color: var(--accent); } .doc-foot a:hover { color: var(--accent); } }