/* ========================================================================== legal.css Shared stylesheet for the Vika Taylor legal hub at https://vikataylor.com/legal/ Serves all seventeen documents: the hub index, and privacy / terms / cookies in en, de, fr, es, pt, plus the German Impressum. Design language is lifted from the hub site (vikataylor.com): near-black warm background, off-white ink, coral accent #FA9F87, Fraunces for display type, JetBrains Mono for small uppercase labels. Dark only, by design. THREE THINGS THIS FILE IS RESPONSIBLE FOR 1. Looking like the rest of vikataylor.com. 2. Internationalisation. Every layout declaration uses CSS logical properties, so setting dir="rtl" on mirrors the whole document with no second stylesheet. Arabic and Hebrew are not shipped yet; the capability is built now so that adding them is a translation job and not a rebuild. Script-specific font fallbacks are declared with :lang() so a future translation renders real glyphs instead of tofu. 3. Accessibility. Every text colour below carries its measured WCAG 2.1 contrast ratio against the surface it sits on. Nothing used for text is below 4.5:1. Ratios were computed from the sRGB relative luminance formula, not estimated. CONVENTIONS - No physical left / right / top / bottom in layout. Only the [dir="rtl"] section near the end mentions physical directions, and only for the handful of things logical properties genuinely cannot fix. - Surfaces are declared as flat hex values rather than translucent overlays, so the stated contrast ratios are exact rather than approximate. The hex values are the composites of the hub's translucent coral tints over the page background, so they look identical. ========================================================================== */ /* ========================================================================== 1. FONTS Self-hosted, same woff2 files the rest of the network serves from /fonts/. Declared here rather than only in /fonts/fonts.css so that a legal page which links nothing but legal.css still gets the real faces. Where a page also links /fonts/fonts.css the browser reuses the same URLs from cache, so this costs no extra bytes. No request reaches fonts.googleapis.com or fonts.gstatic.com. That is a legal requirement here, not a preference: LG Muenchen I, 20.01.2022, 3 O 17493/20. Fonts are SIL Open Font License 1.1. Subsets are latin + latin-ext only. Everything outside those ranges falls through to the :lang() stacks in section 3. ========================================================================== */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 200 700; font-display: swap; src: url('/fonts/fraunces-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 200 700; font-display: swap; src: url('/fonts/fraunces-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 400; font-display: swap; src: url('/fonts/fraunces-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 400; font-display: swap; src: url('/fonts/fraunces-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/jetbrains-mono-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/jetbrains-mono-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== 2. TOKENS Contrast is stated per colour. Two surfaces matter: --bg-0, the page, and --surface-hi, the lightest thing anything sits on. Where two numbers are given they are (on --bg-0 / on --surface-hi), so the second is the worst case anywhere in the document. ========================================================================== */ :root { color-scheme: dark; /* --- Surfaces --- */ --bg-0: #0d0a08; /* page background */ --bg-1: #16110d; /* foot of the page gradient */ --surface: #171110; /* note panels, cards. = coral 4% over --bg-0 */ --surface-hi: #1c1513; /* card hover. = coral 6% over --bg-0, lightest surface */ /* --- Ink. Ratios: (on --bg-0 / on --surface-hi) --- */ --ink: #f1e8d6; /* 16.22:1 / 14.80:1 headings, emphasis */ --ink-soft: #c2b69c; /* 9.84:1 / 8.97:1 body copy, list items */ --ink-mute: #9c907a; /* 6.28:1 / 5.73:1 mono labels, dates, footer */ /* The hub site uses #857a66 for its faintest ink. That measures 4.67:1 on --bg-0 but only 4.33:1 once it sits on a card, which is below AA. These documents are long and the faint ink is used for real text, so it is raised here to #9c907a. --ink-faint is kept as an alias because pages copied from the hub reference it by that name. */ --ink-faint: var(--ink-mute); /* --- Accent --- */ --accent: #FA9F87; /* 9.75:1 / 8.90:1 links, rules, markers */ --accent-glow: #ffc1ad; /* 12.67:1 / 11.56:1 hover, focus ring */ --on-accent: #0d0a08; /* 9.75:1 on --accent. Text on a coral fill. */ /* --- Lines. Non-text, so judged against WCAG 1.4.11 (3:1), not 4.5:1. --- */ --line: rgba(250, 159, 135, 0.18); /* 1.37:1 decorative rules only */ --line-strong: rgba(250, 159, 135, 0.42); /* 2.56:1 decorative, emphasis */ --line-ui: rgba(250, 159, 135, 0.55); /* 3.58:1 boundary of a real control */ /* --- Type --- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', monospace; --step--1: 0.8125rem; /* 13px fine print */ --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0938rem); /* 16 -> 17.5px body */ --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);/* 17 -> 19px lead */ --step-2: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);/* 18 -> 21px h3 */ --step-3: clamp(1.375rem, 1.2rem + 0.9vw, 1.6875rem); /* 22 -> 27px h2 */ --step-4: clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem); /* 34 -> 52px h1 */ --label: 0.6875rem; /* 11px, the mono label size used across the network */ /* Small-caps label treatment, held in tokens so the scripts that cannot take it can switch it off in one place. Tracking prises Arabic and Indic joining forms apart, and "uppercase" is meaningless in a unicameral script, so both are neutralised per language in section 3. */ --label-tracking: 0.16em; --label-tracking-wide: 0.24em; --label-case: uppercase; --lh-text: 1.75; /* long legal prose wants air */ --lh-tight: 1.15; /* --- Measure. The target is roughly 68 characters of running text. ch alone will not deliver that: ch is the advance width of "0", and in a proportional face that is far wider than the average letter. Measured on this stylesheet, "0" is 0.55em in SF and 0.64em in DejaVu Sans, while the average English character is about 0.47em, so a flat 68ch renders 85 to 95 characters depending on which system font the visitor happens to have. min() takes whichever bound is tighter: the em bound holds the line at roughly 68 characters everywhere, and the ch bound pulls it in further for a font with unusually narrow digits. Verified in a browser at 66 to 70 characters per line, not calculated on paper. --- */ --measure: min(56ch, 30em); --measure-head: min(22ch, 12em); /* --- Rhythm --- */ --space-2xs: 0.375rem; --space-xs: 0.625rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: clamp(2rem, 4vw, 2.75rem); --space-xl: clamp(2.75rem, 6vw, 4rem); --radius: 10px; --radius-pill: 999px; /* --- Direction-aware values. Overridden wholesale in the RTL block. --- */ --glyph-back: '\2190'; /* left arrow, points back toward the start edge */ --glyph-forward: '\2192'; /* right arrow, points on toward the end edge */ --nudge: 4px; /* hover travel, positive is toward the end edge */ --panel-highlight-pos: 100% 0; /* background-position of the card sheen */ } /* ========================================================================== 3. SCRIPT FALLBACKS Fraunces and JetBrains Mono are subset to latin + latin-ext. They have no Arabic, Hebrew, Devanagari, Bengali, Tamil, Telugu, Malayalam, Gurmukhi, Thai, CJK, Cyrillic or Greek coverage at all. Each block below redefines the three font tokens for one script using fonts that ship with macOS, iOS, Windows, Android or a normal Linux desktop, so a future translation renders rather than showing tofu boxes. Custom properties inherit, so setting lang on is enough. Sizes are nudged where a script needs more vertical room than Latin. ========================================================================== */ /* Cyrillic. Russian, Ukrainian, Belarusian, Bulgarian, Serbian, Macedonian, Kazakh. Georgia carries Cyrillic on macOS and Windows, so the serif character of the headings survives. */ :lang(ru), :lang(uk), :lang(be), :lang(bg), :lang(sr), :lang(mk), :lang(kk) { --font-display: Georgia, 'Noto Serif', 'PT Serif', 'Times New Roman', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Noto Sans Mono', 'DejaVu Sans Mono', monospace; } /* Greek. Georgia also covers Greek. */ :lang(el) { --font-display: Georgia, 'Noto Serif', 'Times New Roman', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif; --font-mono: ui-monospace, Menlo, Consolas, 'Noto Sans Mono', monospace; } /* Arabic script. Arabic, Persian, Urdu, Pashto, Kurdish (Sorani). RTL. */ :lang(ar), :lang(fa), :lang(ur), :lang(ps), :lang(ckb) { --font-display: 'Noto Naskh Arabic', 'Geeza Pro', 'Traditional Arabic', 'Segoe UI', Tahoma, serif; --font-body: 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, Arial, sans-serif; --font-mono: 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', monospace; --lh-text: 1.95; /* Arabic sits taller and needs the extra leading */ } /* Hebrew script. Hebrew, Yiddish. RTL. */ :lang(he), :lang(yi) { --font-display: 'Noto Serif Hebrew', 'New Peninim MT', David, 'Segoe UI', serif; --font-body: 'Noto Sans Hebrew', 'Arial Hebrew', Arial, 'Segoe UI', sans-serif; --font-mono: 'Noto Sans Hebrew', 'Arial Hebrew', monospace; --lh-text: 1.85; } /* Devanagari. Hindi, Marathi, Nepali, Sanskrit. */ :lang(hi), :lang(mr), :lang(ne), :lang(sa) { --font-display: 'Noto Serif Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', 'Mangal', serif; --font-body: 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', 'Mangal', sans-serif; --font-mono: 'Noto Sans Devanagari', 'Nirmala UI', monospace; --lh-text: 1.9; /* headroom for the shirorekha and stacked matras */ } /* Bengali and Assamese. */ :lang(bn), :lang(as) { --font-display: 'Noto Serif Bengali', 'Kohinoor Bangla', 'Nirmala UI', 'Vrinda', serif; --font-body: 'Noto Sans Bengali', 'Bangla Sangam MN', 'Nirmala UI', 'Vrinda', sans-serif; --font-mono: 'Noto Sans Bengali', 'Nirmala UI', monospace; --lh-text: 1.9; } /* Tamil. */ :lang(ta) { --font-display: 'Noto Serif Tamil', 'Tamil MN', 'Nirmala UI', 'Latha', serif; --font-body: 'Noto Sans Tamil', 'Tamil Sangam MN', 'Nirmala UI', 'Latha', sans-serif; --font-mono: 'Noto Sans Tamil', 'Nirmala UI', monospace; --lh-text: 1.9; } /* Telugu. */ :lang(te) { --font-display: 'Noto Serif Telugu', 'Kohinoor Telugu', 'Nirmala UI', 'Gautami', serif; --font-body: 'Noto Sans Telugu', 'Telugu Sangam MN', 'Nirmala UI', 'Gautami', sans-serif; --font-mono: 'Noto Sans Telugu', 'Nirmala UI', monospace; --lh-text: 1.9; } /* Malayalam. */ :lang(ml) { --font-display: 'Noto Serif Malayalam', 'Kohinoor Malayalam', 'Nirmala UI', 'Kartika', serif; --font-body: 'Noto Sans Malayalam', 'Malayalam Sangam MN', 'Nirmala UI', 'Kartika', sans-serif; --font-mono: 'Noto Sans Malayalam', 'Nirmala UI', monospace; --lh-text: 1.9; } /* Gurmukhi. Punjabi. */ :lang(pa) { --font-display: 'Noto Serif Gurmukhi', 'Gurmukhi MN', 'Nirmala UI', 'Raavi', serif; --font-body: 'Noto Sans Gurmukhi', 'Gurmukhi Sangam MN', 'Nirmala UI', 'Raavi', sans-serif; --font-mono: 'Noto Sans Gurmukhi', 'Nirmala UI', monospace; --lh-text: 1.9; } /* Gujarati, Kannada, Sinhala, Odia. Grouped: same fallback pattern. */ :lang(gu), :lang(kn), :lang(si), :lang(or) { --font-display: 'Noto Serif', 'Nirmala UI', serif; --font-body: 'Noto Sans Gujarati', 'Noto Sans Kannada', 'Noto Sans Sinhala', 'Noto Sans Oriya', 'Nirmala UI', sans-serif; --font-mono: 'Nirmala UI', monospace; --lh-text: 1.9; } /* Thai, Lao, Khmer, Burmese. */ :lang(th), :lang(lo), :lang(km), :lang(my) { --font-display: 'Noto Serif Thai', 'Thonburi', 'Leelawadee UI', serif; --font-body: 'Noto Sans Thai', 'Noto Sans Lao', 'Noto Sans Khmer', 'Noto Sans Myanmar', 'Leelawadee UI', Thonburi, sans-serif; --font-mono: 'Noto Sans Thai', 'Leelawadee UI', monospace; --lh-text: 1.95; /* Thai stacks tone marks two levels above the baseline */ } /* Japanese. */ :lang(ja) { --font-display: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; --font-body: 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', Meiryo, sans-serif; --font-mono: 'Osaka-Mono', 'MS Gothic', 'Noto Sans Mono CJK JP', monospace; /* CJK sets one full-width glyph per em, so the measure is expressed in em directly: about 38 characters, the usual Japanese line length. */ --measure: 38em; } /* Korean. */ :lang(ko) { --font-display: 'Apple SD Gothic Neo', 'Noto Serif KR', 'Malgun Gothic', serif; --font-body: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; --font-mono: 'D2Coding', 'Noto Sans Mono CJK KR', monospace; --measure: 40em; /* Hangul syllable blocks are full width, as above */ } /* Chinese, simplified. zh-CN and zh-SG are listed as well because a plain zh-CN tag does not match :lang(zh-Hans) in most engines. */ :lang(zh), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG) { --font-display: 'Songti SC', 'Noto Serif SC', 'SimSun', serif; --font-body: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', 'Heiti SC', sans-serif; --font-mono: 'Noto Sans Mono CJK SC', 'SimSun', monospace; --measure: 38em; } /* Chinese, traditional. */ :lang(zh-Hant), :lang(zh-TW), :lang(zh-HK), :lang(zh-MO) { --font-display: 'Songti TC', 'Noto Serif TC', 'PMingLiU', serif; --font-body: 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', 'Heiti TC', sans-serif; --font-mono: 'Noto Sans Mono CJK TC', 'PMingLiU', monospace; --measure: 38em; } /* ========================================================================== 4. RESET AND BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: 2rem; } body { /* RTL does not change the block axis, so vh is correct in both directions. dvh is the same value on desktop and the honest one on phones with a collapsing toolbar; browsers that do not know it keep the vh line. */ min-block-size: 100vh; min-block-size: 100dvh; background-color: var(--bg-0); background-image: linear-gradient(to bottom, var(--bg-0) 0%, var(--bg-1) 100%); background-attachment: fixed; color: var(--ink-soft); font-family: var(--font-body); font-size: var(--step-0); line-height: var(--lh-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-wrap: break-word; hyphens: auto; /* honours the document lang for break points */ -webkit-hyphens: auto; /* Logical box. inline = across the line, block = down the page. */ padding-block: clamp(1.5rem, 5vw, 3.5rem); padding-inline: clamp(1.25rem, 4vw, 2.5rem); max-inline-size: 46rem; margin-inline: auto; } /* Legal text is a list of defined terms and clause numbers. Automatic hyphenation is right for prose and wrong for those, so it is switched off where a broken word would change the meaning. */ h1, h2, h3, h4, code, .mono, .updated, .label, table { hyphens: manual; -webkit-hyphens: manual; } ::selection { background: var(--accent); color: var(--on-accent); } /* 9.75:1 */ :focus-visible { outline: 2px solid var(--accent-glow); /* 12.67:1 against the page, far above the 3:1 minimum */ outline-offset: 3px; border-radius: 2px; } /* Skip link. Positioned with logical insets so it lands on the correct edge in both directions. */ .skip { position: absolute; inset-block-start: -10rem; inset-inline-start: 0; z-index: 100; background: var(--accent); color: var(--on-accent); /* 9.75:1 */ padding: 0.5rem 0.875rem; font-family: var(--font-mono); font-size: var(--label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); text-decoration: none; border-end-end-radius: var(--radius); } .skip:focus { inset-block-start: 0; } /*
carries id="main" tabindex="-1" so the skip link moves focus and not only the scroll position. Focus lands there programmatically, never by tabbing, so it must not paint a ring around the whole document body. */ main:focus { outline: none; } /* ========================================================================== 5. TYPOGRAPHY ========================================================================== */ h1 { font-family: var(--font-display); font-weight: 200; font-size: var(--step-4); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--ink); /* 16.22:1 */ font-variation-settings: 'opsz' 96; max-inline-size: var(--measure-head); margin-block-end: var(--space-xs); text-wrap: balance; } h1 em { font-style: italic; font-weight: 300; color: var(--accent); } /* 9.75:1 */ h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); /* 16.22:1 */ max-inline-size: 34ch; margin-block-start: var(--space-xl); margin-block-end: var(--space-s); padding-block-start: var(--space-m); border-block-start: 1px solid var(--line); text-wrap: balance; scroll-margin-block-start: 1.5rem; } h2:first-of-type { border-block-start: 0; padding-block-start: 0; margin-block-start: var(--space-l); } h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); line-height: 1.3; color: var(--ink); /* 16.22:1 */ max-inline-size: 40ch; margin-block-start: var(--space-l); margin-block-end: var(--space-2xs); scroll-margin-block-start: 1.5rem; } h4 { font-family: var(--font-mono); font-weight: 500; font-size: var(--label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--ink-mute); /* 6.28:1 */ margin-block-start: var(--space-m); margin-block-end: var(--space-2xs); } p { max-inline-size: var(--measure); margin-block-end: var(--space-s); text-align: start; /* never left: this is what mirrors in RTL */ } /* Opening paragraph of a document or a section. */ .lead { font-size: var(--step-1); color: var(--ink); /* 16.22:1 */ max-inline-size: min(52ch, 28em); } strong, b { color: var(--ink); font-weight: 600; } /* 16.22:1 */ em, i { font-style: italic; } small, .fine { font-size: var(--step--1); color: var(--ink-mute); /* 6.28:1 */ line-height: 1.65; } abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; } hr { block-size: 1px; border: 0; background: var(--line); margin-block: var(--space-l); } blockquote { margin-block: var(--space-m); margin-inline-start: 0; padding-inline-start: var(--space-s); border-inline-start: 2px solid var(--accent); color: var(--ink-soft); /* 9.84:1 */ font-style: italic; max-inline-size: var(--measure); } code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.875em; color: var(--ink); /* 16.22:1 */ background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding-block: 0.1em; padding-inline: 0.35em; overflow-wrap: anywhere; } /* Identifiers, URLs and measurement IDs stay left to right even inside an RTL paragraph. isolate keeps them from reordering the words around them. */ .ltr, code, kbd, samp { direction: ltr; unicode-bidi: isolate; } /* --- Lists ------------------------------------------------------------- */ ul, ol { max-inline-size: var(--measure); margin-block-end: var(--space-s); padding-inline-start: 1.5rem; /* logical: becomes padding-right in RTL */ } li { margin-block-end: var(--space-2xs); } li > ul, li > ol { margin-block: var(--space-2xs) 0; } li::marker { color: var(--accent); } /* 9.75:1 */ ol > li::marker { font-family: var(--font-mono); font-size: 0.85em; } /* Native ::marker needs no direction handling: the browser places it on the start edge and mirrors it automatically. Only the hand-built arrow list below carries a directional glyph, and that is flipped in section 9. */ .arrow-list { list-style: none; padding-inline-start: 0; } .arrow-list > li { position: relative; padding-inline-start: 1.5rem; } .arrow-list > li::before { content: var(--glyph-forward); position: absolute; inset-inline-start: 0; color: var(--accent); /* 9.75:1 */ font-family: var(--font-mono); } /* Definition lists: used for "term means this" blocks in the documents. */ dl { max-inline-size: var(--measure); margin-block-end: var(--space-s); } dt { font-family: var(--font-mono); font-size: var(--label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--ink); /* 16.22:1 */ margin-block-start: var(--space-s); } dd { margin-inline-start: 0; padding-inline-start: var(--space-s); border-inline-start: 1px solid var(--line); color: var(--ink-soft); /* 9.84:1 */ } /* --- Links ------------------------------------------------------------- */ a { color: var(--accent); /* 9.75:1 on the page, 8.90:1 on a card */ text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(250, 159, 135, 0.45); transition: color 0.2s ease, text-decoration-color 0.2s ease; } a:hover { color: var(--accent-glow); text-decoration-color: currentColor; } /* 12.67:1 */ a:visited { color: var(--accent); } /* A deep-linked clause should be findable without relying on colour alone. */ :target { background: var(--surface); outline: 1px solid var(--line-strong); outline-offset: 6px; border-radius: 2px; } /* ========================================================================== 6. COMPONENTS ========================================================================== */ /* --- Eyebrow and page meta --------------------------------------------- */ .eyebrow, .label, .updated { font-family: var(--font-mono); font-size: var(--label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); line-height: 1.6; } .eyebrow { color: var(--accent); margin-block-end: var(--space-s); } /* 9.75:1 */ .label { color: var(--ink-mute); } /* 6.28:1 */ .updated { color: var(--ink-mute); margin-block-end: var(--space-l); } /* 6.28:1 */ /* Dates and version numbers read left to right even in an RTL document. */ .updated time, .updated .mono { unicode-bidi: isolate; } /* --- Note panel. The reference treatment on the hub privacy page, with a start-edge accent rule added so it survives forced-colors mode. ---- */ .note { background: var(--surface); border: 1px solid var(--line); border-inline-start: 2px solid var(--accent); border-radius: var(--radius); padding-block: var(--space-s); padding-inline: var(--space-s); margin-block: var(--space-m); max-inline-size: var(--measure); color: var(--ink-soft); /* 9.31:1 on --surface */ font-size: 0.9375rem; } .note strong { color: var(--ink); } /* 15.35:1 on --surface */ .note > :last-child { margin-block-end: 0; } .note p { max-inline-size: none; } /* Variants (.note--summary, .note--unfinished, .note-strong) are defined together in section 6b, next to the rest of the document chrome. */ /* --- Visible placeholder ------------------------------------------------ FACTS.md requires that a missing required value appears as an obvious bracketed gap rather than being invented or quietly dropped. Wrap the bracket in this class so it is impossible to mistake for finished copy. A page that still contains one of these must be served noindex. */ .placeholder { font-family: var(--font-mono); font-size: 0.9em; color: var(--accent-glow); /* 12.67:1 */ background: var(--surface-hi); border: 1px dashed var(--line-ui); border-radius: 4px; padding-block: 0.05em; padding-inline: 0.4em; /* These markers carry a full sentence explaining what is missing, so they must wrap. nowrap here would push a 320px viewport into a horizontal scroll. box-decoration-break redraws the dashed border on every line fragment so a wrapped placeholder still reads as one object. */ overflow-wrap: anywhere; box-decoration-break: clone; -webkit-box-decoration-break: clone; unicode-bidi: isolate; } /* --- Document cards. Used on the hub index. ----------------------------- */ .doc-list { list-style: none; padding-inline-start: 0; max-inline-size: none; display: grid; gap: var(--space-s); margin-block: var(--space-m) var(--space-l); } .doc-list > li { margin-block-end: 0; } .doc-card { display: block; background-color: var(--surface); /* Decorative sheen. background-position is one of the few properties with no logical equivalent, so it is flipped by hand in section 9. */ background-image: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(250, 159, 135, 0.07), transparent 70%); background-position: var(--panel-highlight-pos); background-size: 70% 100%; background-repeat: no-repeat; border: 1px solid var(--line-ui); /* 3.58:1, this is the boundary of a control */ border-radius: var(--radius); padding-block: var(--space-s); padding-inline: var(--space-s); text-decoration: none; color: var(--ink-soft); /* 9.31:1 on --surface */ transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .doc-card:hover, .doc-card:focus-visible { background-color: var(--surface-hi); border-color: var(--accent); transform: translateY(-1px); } .doc-card .doc-title { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); color: var(--ink); /* 14.80:1 at the lightest hover state */ margin-block-end: 0.15rem; } .doc-card .doc-title em { font-style: italic; color: var(--accent); } /* 8.90:1 */ .doc-card .doc-desc { display: block; font-size: 0.9375rem; color: var(--ink-soft); /* 8.97:1 at the lightest hover state */ max-inline-size: var(--measure); } .doc-card .doc-go { display: inline-block; margin-block-start: var(--space-xs); font-family: var(--font-mono); font-size: var(--label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--accent); /* 8.90:1 */ } .doc-card .doc-go::after { content: var(--glyph-forward); display: inline-block; margin-inline-start: 0.5em; transition: transform 0.25s ease; } .doc-card:hover .doc-go::after { transform: translateX(var(--nudge)); } /* The row of other-language links under each card. Not inside the card link, because a link cannot legally nest inside another link. */ .doc-langs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block-start: var(--space-2xs); padding-inline-start: var(--space-2xs); font-family: var(--font-mono); font-size: var(--label); letter-spacing: var(--label-tracking); color: var(--ink-mute); /* 6.28:1 */ } /* Spacing does the separating. A punctuation separator between flex items wraps on its own and can start a line with a stray slash. */ .doc-langs { gap: 0.45rem 0.9rem; } .doc-langs .sep { /* A separator glyph is still text as far as WCAG 1.4.3 is concerned, so it is coloured at 6.28:1 rather than left as a faint rule. Mark it aria-hidden in the markup: it carries no meaning for a screen reader. */ color: var(--ink-mute); /* 6.28:1 */ } /* --- Chips. Language switcher and small navigation pills. --------------- */ .lang-switch { margin-block: var(--space-m); } .lang-list { list-style: none; padding-inline-start: 0; max-inline-size: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: var(--space-xs) 0; } .lang-list > li { margin-block-end: 0; } .chip { display: inline-flex; align-items: baseline; gap: 0.5em; padding-block: 0.4rem; padding-inline: 0.85rem; border: 1px solid var(--line-ui); /* 3.58:1 */ border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-soft); /* 9.31:1 */ font-family: var(--font-mono); font-size: var(--label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .chip:hover { background: var(--surface-hi); border-color: var(--accent); color: var(--ink); } .chip .chip-native { text-transform: none; letter-spacing: 0; font-family: var(--font-body); color: var(--ink-mute); /* 5.73:1 at the lightest hover state */ } .chip[aria-current='page'], .chip[aria-current='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); /* 9.75:1 */ } .chip[aria-current='page'] .chip-native, .chip[aria-current='true'] .chip-native { color: var(--on-accent); } /* --- Table of contents -------------------------------------------------- */ .toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding-block: var(--space-s); padding-inline: var(--space-s); margin-block: var(--space-m); max-inline-size: var(--measure); } .toc > .label { display: block; margin-block-end: var(--space-xs); } .toc ol, .toc ul { margin-block-end: 0; padding-inline-start: 1.25rem; max-inline-size: none; font-size: 0.9375rem; } /* --- Button styled as a link. The Cookie settings control lives in /consent.js and expects id="cookieSettings". Withdrawing consent has to be as easy as giving it, GDPR Art. 7(3). ------------------------ */ .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); /* 9.75:1 */ cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(250, 159, 135, 0.45); } .linkish:hover { color: var(--accent-glow); text-decoration-color: currentColor; } /* --- Back link and page footer ------------------------------------------ */ .back { display: inline-block; margin-block-start: var(--space-xl); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--ink-mute); /* 6.28:1 */ text-decoration: none; border-block-end: 1px solid var(--line); padding-block-end: 2px; transition: color 0.25s ease, border-color 0.25s ease; } /* No arrow is drawn here on purpose. Several documents type their own arrow into the markup, and a pseudo-element would double it. Use the .glyph-back utility below instead of a literal arrow character: it is the only version that turns around under dir="rtl". */ .back:hover { color: var(--ink); border-block-end-color: var(--accent); } /* Direction-aware arrows. Put an empty in the markup instead of a literal arrow and it points the right way in both directions. Decorative, so aria-hidden. */ .glyph-back::before { content: var(--glyph-back); } .glyph-forward::before { content: var(--glyph-forward); } .glyph-back, .glyph-forward { color: var(--accent); /* 9.75:1 */ margin-inline-end: 0.55em; font-family: var(--font-mono); unicode-bidi: isolate; } .page-foot { margin-block-start: var(--space-xl); padding-block-start: var(--space-m); border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: baseline; justify-content: space-between; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--ink-mute); /* 6.28:1 */ } .page-foot a, .page-foot .linkish { color: inherit; font: inherit; text-decoration: underline; text-decoration-color: rgba(250, 159, 135, 0.3); text-underline-offset: 3px; } .page-foot a:hover, .page-foot .linkish:hover { color: var(--ink); text-decoration-color: var(--accent); } .page-foot ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding-inline-start: 0; margin-block-end: 0; max-inline-size: none; } .page-foot li { margin-block-end: 0; } /* ========================================================================== 6b. DOCUMENT CHROME The four policy documents share a masthead, a language row and a footer. These class names are the ones the shipped pages use, so they live here rather than being repeated seventeen times. ========================================================================== */ /* --- Masthead ----------------------------------------------------------- */ .doc-head { margin-block-end: var(--space-l); } .doc-head .updated { margin-block-end: var(--space-s); } /* The eyebrow doubles as a breadcrumb on the document pages, so the link inside it keeps the eyebrow colour and is distinguished by its underline rather than by a second colour. */ .eyebrow a { color: inherit; text-decoration: underline; text-decoration-color: rgba(250, 159, 135, 0.4); text-underline-offset: 3px; } .eyebrow a:hover { color: var(--accent-glow); text-decoration-color: currentColor; } /* --- Horizontal nav rows. Used twice: the language row under the title, and the document row in the footer. ---------------------------------- */ .doc-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.1rem; margin-block: var(--space-s); font-family: var(--font-mono); font-size: var(--label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); line-height: 1.6; color: var(--ink-mute); /* 6.28:1 */ } .doc-nav a, .doc-nav .linkish { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-soft); /* 9.84:1 */ text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(250, 159, 135, 0.3); text-underline-offset: 4px; background: none; border: 0; padding: 0; cursor: pointer; transition: color 0.25s ease, text-decoration-color 0.25s ease; } .doc-nav a:hover, .doc-nav .linkish:hover { color: var(--ink); text-decoration-color: var(--accent); } /* The current language is a plain span, not a link, so it needs to look selected without relying on colour alone: it also loses the underline that every sibling carries. */ .doc-nav [aria-current] { color: var(--accent); /* 9.75:1 */ text-decoration: none; } /* The footer nav is a skip target (id="cookie-settings", tabindex="-1"), so it must show a focus ring when it receives programmatic focus. */ .doc-nav:focus-visible, .doc-nav:target { outline: 2px solid var(--accent-glow); outline-offset: 6px; border-radius: 2px; } /* Language row under the masthead. Separated by a hairline so it reads as part of the title block rather than as body content. */ .langs { padding-block-start: var(--space-xs); border-block-start: 1px solid var(--line); } /* --- Note variants ------------------------------------------------------ .note--summary the plain-language summary GDPR Art. 12 asks for .note--unfinished the document still contains bracketed placeholders .note-strong kept as an alias of --unfinished for earlier markup ------------------------------------------------------------------------ */ .note--summary { border-inline-start-color: var(--accent); background: var(--surface-hi); } .note--summary > p:first-child { color: var(--ink); } /* 14.80:1 */ .note--unfinished, .note-strong { border: 1px dashed var(--line-ui); /* 3.58:1, dashed so it reads as provisional */ border-inline-start: 3px solid var(--accent-glow); } .note--unfinished strong, .note-strong strong { color: var(--accent-glow); } /* 11.56:1 */ /* --- Table of contents: the documents label it with .eyebrow, the hub with .label. Accept either. ------------------------------------------------ */ .toc > .eyebrow, .toc > .label { display: block; margin-block-end: var(--space-xs); } .toc a { text-decoration-color: rgba(250, 159, 135, 0.3); } /* --- Document footer ---------------------------------------------------- */ .doc-foot { margin-block-start: var(--space-xl); padding-block-start: var(--space-m); border-block-start: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--label-tracking); text-transform: var(--label-case); line-height: 1.8; color: var(--ink-mute); /* 6.28:1 */ } .doc-foot p { max-inline-size: var(--measure); margin-block-end: var(--space-2xs); } .doc-foot a { color: inherit; text-decoration: underline; text-decoration-color: rgba(250, 159, 135, 0.3); text-underline-offset: 3px; } .doc-foot a:hover { color: var(--ink); text-decoration-color: var(--accent); } .doc-foot .doc-nav { margin-block: 0 var(--space-s); } /* The back link sits inside the footer on the document pages and on its own on the hub index. Reset the inherited footer spacing so both look right. */ .doc-foot .back { margin-block-start: var(--space-xs); text-transform: var(--label-case); } /* ========================================================================== 7. TABLES Legal documents carry data tables: cookies, storage keys, retention. Two mechanisms keep them usable at 320px with no horizontal scroll: fixed layout with wrapping cells above 40em, and a stacked card layout below it. Give each a data-label matching its column header and the stacked view keeps its headers. ========================================================================== */ table { inline-size: 100%; max-inline-size: 100%; border-collapse: collapse; table-layout: fixed; /* stops a long token forcing the page wide */ margin-block: var(--space-m); font-size: 0.9375rem; text-align: start; } caption { caption-side: top; text-align: start; font-family: var(--font-mono); font-size: var(--label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--ink-mute); /* 6.28:1 */ padding-block-end: var(--space-xs); } th, td { text-align: start; /* mirrors automatically in RTL */ vertical-align: top; padding-block: 0.65rem; padding-inline: 0.75rem; border-block-end: 1px solid var(--line); overflow-wrap: anywhere; /* long keys and IDs wrap instead of scrolling */ } thead th { font-family: var(--font-mono); font-weight: 500; font-size: var(--label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--ink); /* 16.22:1 */ border-block-end: 1px solid var(--line-ui); padding-inline-start: 0.75rem; } tbody th { color: var(--ink); font-weight: 600; } /* 16.22:1 */ td { color: var(--ink-soft); } /* 9.84:1 */ /* Stacked layout. 40em covers every phone including a 320px viewport. Scoped to screen: an A4 page at these margins measures about 41em, so an unscoped max-width query would sometimes stack a printed table and sometimes not, depending on paper size. Paper always gets a table. */ @media screen and (max-width: 40em) { table, thead, tbody, tr, th, td { display: block; inline-size: auto; } /* A table-caption inside a block box shrinks to fit and breaks one word per line, so it becomes a plain block for the stacked layout. */ caption { display: block; inline-size: auto; } /* Column headers are removed from view but stay in the accessibility tree, because each cell repeats its own header through data-label. */ thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Not every table author remembers data-label. Where a table has none, hiding the header row would throw the column names away entirely, so it comes back as a compact legend above the stacked cards: the column order is stated once and the values below follow it. Wrapped in :has() so a browser that does not support it simply keeps the row hidden, which is the behaviour above rather than a broken layout. */ table:not(:has(td[data-label])) thead { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; white-space: normal; display: block; margin-block-end: var(--space-xs); } table:not(:has(td[data-label])) thead tr { display: flex; flex-wrap: wrap; gap: 0 0.5rem; background: none; border: 0; border-radius: 0; padding: 0; margin-block-end: 0; } table:not(:has(td[data-label])) thead th { display: inline; border: 0; padding: 0; } table:not(:has(td[data-label])) thead th + th::before { content: '/'; color: var(--ink-mute); /* 6.28:1 */ margin-inline-end: 0.5rem; } tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-block-end: var(--space-xs); padding-block: 0.25rem; padding-inline: 0.75rem; } td, tbody th { border-block-end: 1px solid var(--line); padding-inline: 0; } tr > :last-child { border-block-end: 0; } td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--ink-mute); /* 5.95:1 on --surface */ margin-block-end: 0.15rem; } } /* Escape hatch: wrap a genuinely wide table in
and it scrolls rather than overflowing the page. The stacked layout above should mean this is never needed. */ .table-wrap { max-inline-size: 100%; overflow-x: auto; } /* ========================================================================== 8. LAYOUT HELPERS ========================================================================== */ .stack > * + * { margin-block-start: var(--space-s); } .prose { max-inline-size: var(--measure); } .measure-wide { max-inline-size: none; } .center { margin-inline: auto; } .text-start { text-align: start; } .text-end { text-align: end; } .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== 9. RIGHT TO LEFT Everything above is written in logical properties, so setting dir="rtl" on already mirrors the margins, padding, borders, text alignment, list indentation and native list markers. What follows is the residue: things with a baked-in direction that no logical property covers. No Arabic or Hebrew translation ships yet, but the operator has asked for both, so the capability is in place and testable today by setting dir="rtl" on any existing page. ========================================================================== */ [dir='rtl'] { /* 1. Directional glyphs. The back arrow must point toward the start edge, which in RTL is the right-hand side of the screen. */ --glyph-back: '\2192'; /* right arrow */ --glyph-forward: '\2190'; /* left arrow */ /* 2. Motion. translateX is physical, so a positive nudge would move a hover arrow the wrong way. Flip the sign once, here. */ --nudge: -4px; /* 3. background-position has no logical form. The card sheen has to be moved to the other side by hand. */ --panel-highlight-pos: 0 0; } /* 4. List markers. Native ::marker mirrors on its own, but the ordered-list marker of a legal clause reads better with the number isolated so a trailing full stop does not jump to the wrong side of the digits. */ [dir='rtl'] ol > li::marker { unicode-bidi: isolate; } /* 5. The hand-drawn markers need no rule of their own. .arrow-list, .back's companion .glyph-back and the .doc-go arrow all read their character from --glyph-back / --glyph-forward, and their position from inset-inline-start, so flipping the two variables at the top of this block turns every one of them around. If you add a directional glyph anywhere, put it in a variable here rather than typing the character into the markup: a literal arrow in HTML cannot be mirrored. 6. Latin runs inside RTL prose. Email addresses, URLs, measurement IDs and storage keys must not be reordered by the bidi algorithm. */ [dir='rtl'] code, [dir='rtl'] .ltr, [dir='rtl'] .mono, [dir='rtl'] a[href^='mailto:'], [dir='rtl'] a[href^='http'] { direction: ltr; unicode-bidi: isolate; text-align: start; } /* 7. Numeric table columns. Mark a cell with class="num" and it stays on the end edge in both directions, with Latin digits kept in order. */ [dir='rtl'] .num { direction: ltr; unicode-bidi: isolate; text-align: end; } /* 8. Automatic hyphenation is a Latin and Cyrillic convention. Arabic and Hebrew do not hyphenate, and Arabic justification uses kashida, which no browser exposes to CSS. Switch it off rather than produce nonsense. */ [dir='rtl'] body { hyphens: none; -webkit-hyphens: none; } /* 9. Letter-spacing and uppercasing are Latin conventions. Tracking prises apart the connected letterforms of Arabic and the Indic scripts, and "uppercase" does nothing at all in a unicameral script. Both are held in tokens, so switching them off is one declaration per language rather than a list of every class that happens to use a small label. This is not RTL-specific, which is why it keys on :lang and not on [dir]. */ :lang(ar), :lang(fa), :lang(ur), :lang(ps), :lang(ckb), :lang(he), :lang(yi), :lang(hi), :lang(mr), :lang(ne), :lang(sa), :lang(bn), :lang(as), :lang(ta), :lang(te), :lang(ml), :lang(pa), :lang(gu), :lang(kn), :lang(si), :lang(or), :lang(th), :lang(lo), :lang(km), :lang(my), :lang(ja), :lang(ko), :lang(zh) { --label-tracking: 0; --label-tracking-wide: 0; --label-case: none; } /* ========================================================================== 10. MOTION, FORCED COLOURS, PRINT ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Transform-based hover travel is removed outright, not just shortened. */ .doc-card:hover { transform: none; } .doc-card:hover .doc-go::after { transform: none; } } /* Windows high contrast and similar. System colours replace the palette; the job here is to make sure the borders that carry meaning still exist. */ @media (forced-colors: active) { .doc-card, .chip, .note, .toc, table, th, td { border-color: CanvasText; } .doc-card:hover, .chip:hover { border-color: Highlight; } :focus-visible { outline: 2px solid Highlight; } .placeholder { border-color: CanvasText; } } /* --- Print -------------------------------------------------------------- People print policies, file them, and hand them to a lawyer. A near-black page would empty a cartridge and still print grey text, so paper gets its own palette. That palette is applied by repointing the tokens rather than by overriding component by component. Every rule above reads --ink, --accent and the rest, so eleven declarations convert the entire stylesheet. Overriding selectors one at a time is how a print sheet silently rots: any component added later would keep its dark-theme colour and print at 1.2:1 on white. Ratios below are against white paper. ------------------------------------------------------------------------ */ @media print { @page { margin: 18mm; } :root { --bg-0: #ffffff; --bg-1: #ffffff; --surface: #ffffff; --surface-hi: #ffffff; --ink: #111111; /* 18.88:1 */ --ink-soft: #333333; /* 12.63:1 body copy */ --ink-mute: #555555; /* 7.46:1 labels and fine print */ --ink-faint: #555555; /* 7.46:1 */ /* The coral measures 2.02:1 on white, which is unreadable. Print takes the same hue darkened until it clears AA rather than dropping to black, so a printed page still looks like it came from this site. */ --accent: #6b4a34; /* 7.91:1 */ --accent-glow: #111111; /* 18.88:1 */ --on-accent: #ffffff; /* 7.91:1 on --accent */ --line: #cccccc; --line-strong: #999999; --line-ui: #767676; /* 4.54:1, above the 3:1 a control boundary needs */ } html, body { background: #ffffff !important; background-image: none !important; color: var(--ink-soft); font-size: 11pt; line-height: 1.55; max-inline-size: none; padding: 0; margin: 0; hyphens: none; -webkit-hyphens: none; } /* Measure is a screen concern. On paper the page box already sets it. */ p, li, dl, dd, ul, ol, h1, h2, h3, blockquote, .note, .toc, .lead, .prose, .doc-card .doc-desc { max-inline-size: none; } /* Pagination: never orphan a heading or split a clause across a page. */ h1, h2, h3, h4 { break-after: avoid-page; page-break-after: avoid; } p, li, tr, dt, dd, .note, .doc-card, caption { break-inside: avoid-page; page-break-inside: avoid; } h2 { margin-block-start: 1.6em; padding-block-start: 0.8em; } /* Panels print as outlines. Nothing may depend on background graphics, which most people leave switched off in the print dialog. */ .note, .toc, .doc-card, .chip, tr { background: none !important; background-image: none !important; border: 1px solid var(--line-strong); border-radius: 0; } .note { border-inline-start: 3px solid var(--ink-soft); } .note--unfinished, .note-strong { border: 1px dashed var(--ink); } a { color: var(--ink-soft); text-decoration: underline; } /* A printed policy has to stand on its own, so every link exposes where it goes. Absolute links print as typed; site-relative links are expanded to the host they are served from. In-page anchors are skipped: a fragment is meaningless on paper. */ a[href^='http']::after, a[href^='mailto:']::after { content: ' (' attr(href) ')'; } a[href^='/']::after { content: ' (vikataylor.com' attr(href) ')'; } a[href^='http']::after, a[href^='mailto:']::after, a[href^='/']::after { font-family: var(--font-mono); font-size: 0.85em; color: var(--ink-mute); /* 7.46:1 */ word-break: break-all; unicode-bidi: isolate; } a[href^='#']::after { content: ''; } table { font-size: 9.5pt; } th, td { border-block-end: 1px solid var(--line); padding-inline: 0.5em; } thead { display: table-header-group; } /* repeat headers across pages */ /* Interactive furniture has no meaning on paper. The language rows go too: their links are relative and would print as a wall of URLs. */ .skip, .back, .lang-switch, .langs, .doc-langs, .linkish, .no-print, .glyph-back, .glyph-forward, .doc-go, #vt-consent, #cookieSettings { display: none !important; } .page-foot, .doc-foot { display: block; border-block-start: 1px solid var(--line); color: var(--ink-mute); /* 7.46:1 */ } .page-foot ul { display: block; } /* An unfinished document must look unfinished on paper too. */ .placeholder { color: var(--ink); /* 18.88:1 */ background: none; border: 1px dashed var(--ink); } :target { outline: 0; background: none; } }