/* ═══════════════════════════════════════════════════════════════ epa · legal document pages ─────────────────────────────────────────────────────────────── Shared by privacy.html and terms.html — same template, same type scale, so the two pages stop drifting from each other by copy-paste. Depends on assets/styles.css for fonts, color and the shared --fs-* tokens (--fs-caption, --fs-body); link that stylesheet first. ═══════════════════════════════════════════════════════════════ */ :root { --legal-brand: 28px; /* the "epa" wordmark link at the top */ --legal-h1: 40px; /* page title — "Privacy Policy" */ --legal-h2: 24px; /* numbered section headings */ --legal-fine: 13px; /* footer line */ } * { box-sizing: border-box; margin: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; line-height: 1.65; } main { max-width: 680px; margin: 0 auto; padding: 56px 24px 96px; } .brand { font-family: var(--serif); font-size: var(--legal-brand); color: var(--wine); text-decoration: none; } h1 { font-family: var(--serif); font-weight: 500; font-size: var(--legal-h1); margin: 36px 0 6px; } .updated { color: rgba(33,28,24,.55); font-size: var(--fs-caption); margin-bottom: 8px; } .draft { background: rgba(201,162,39,.16); color: #6E5716; border-radius: 10px; padding: 10px 14px; font-size: var(--fs-caption); margin: 18px 0 30px; } /* Who operates epa. One plain line under the date, not a boxed legal notice — the statutory detail (head office, capital) lives in the footer instead, the way European sites keep an imprint at the bottom. */ .operator { color: rgba(33,28,24,.62); font-size: var(--fs-caption); margin: 0 0 30px; } /* Arabic runs inside otherwise-Latin lines: isolate so the bidi algorithm doesn't drag neighbouring punctuation into the RTL run. */ .ar { direction: rtl; unicode-bidi: isolate; } h2 { font-family: var(--serif); font-weight: 500; font-size: var(--legal-h2); margin: 34px 0 10px; } p, li { color: rgba(33,28,24,.82); font-size: var(--fs-body); } /* Logical property, not padding-left: the Arabic pages are the same markup with dir="rtl", so the bullet indent has to follow the reading direction rather than sit on the left in both. */ ul { padding-inline-start: 22px; margin: 10px 0; } a { color: var(--wine); } /* ─── Arabic ────────────────────────────────────────────────────── Circular has no Arabic glyphs, so the Arabic pages fall back to the platform's own Arabic face. SF Arabic on current Apple systems, Segoe/Noto elsewhere. Latin runs inside Arabic text (epa, Apple, Google) still resolve to Circular through the tail of the stack. */ [lang="ar"] { --sans-ar: 'SF Arabic', 'Geeza Pro', 'Noto Sans Arabic', 'Segoe UI', Tahoma, 'Circular', system-ui, sans-serif; } /* `body` sets its own font-family, so a rule on the element alone loses to it for everything inside. Name body (and the headings, which ask for --serif) explicitly. */ [lang="ar"] body { font-family: var(--sans-ar); line-height: 1.9; /* Arabic needs more air than Latin */ } [lang="ar"] h1, [lang="ar"] h2 { font-family: var(--sans-ar); } /* The wordmark is a Latin logotype and stays Circular and LTR even on the Arabic pages, so it reads as the mark rather than as a word. */ [lang="ar"] .brand { font-family: var(--serif); direction: ltr; display: inline-block; } /* Language switch, sitting quietly beside the "last updated" line. */ .langswitch { font-size: var(--fs-caption); margin: 0 0 4px; } .langswitch a { color: rgba(33,28,24,.55); text-decoration: underline; } .langswitch a:hover { color: var(--wine); } footer { margin-top: 56px; font-size: var(--legal-fine); color: rgba(33,28,24,.5); }