/* ================================================================== Yorix - the DPDP guide pages. Lifted out of understand-dpdp.html verbatim on 09-09-2026, when that page was split into four (the guide, the glossary, the GDPR mapping and the business questions). Nothing in it was changed in the move; the four pages now share one definition of the guide's typography, section rhythm, tables, section navigation and in-page search. Load order matters and is the same as before: css/style.css first, then this file. Several rules here deliberately restate properties set in style.css - .hero above all - and rely on arriving later. ================================================================== */ :root{ --paper:#F9F8F4; --panel:#EEF2EF; --ink:#1B2530; --muted:#586470; /* Brought into the site palette 07-09-2026, so the whole site reads as one brand. Original kept below, commented. --pine:#0E4F45; */ --pine:#1f5e64; /* Original kept below, commented. --pine-deep:#0A3A33; */ --pine-deep:#17484d; --hair:#E1DFD5; --hair-strong:#CFCDBF; /* Was the gold accent, which scored only 3.61 against white and failed contrast where it is used as .sec-num text. The new value scores 7.39. Original kept below, commented. --accent:#B67A2E; */ --accent:#1f5e64; --col: 860px; /* Header overrides removed 09-09-2026. Narrowing the header to this page's 860px reading column put the logo and nav ~160px to the right of where they sit on every other page, so the whole structure appeared to shift on each navigation. The header now uses the site default (--maxw, 1180px) and the 860px column sits centred beneath it, which is the ordinary shape of an article page. Originals kept below, commented. --header-maxw: var(--col); --header-padx: 28px; */ } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; } /* Aligned to the site gutter 09-09-2026. The header is 1180px wide across the whole site; this column is 860px, and centring it left the first letter of every paragraph 160px to the right of the logo above it. The column keeps its 860px measure - that is a reading decision, not a layout one - but now starts exactly where the logo does, so there is one left edge on the page instead of two. Original kept below, commented. .wrap{max-width:var(--col);margin:0 auto;padding:0 28px;} */ .wrap{ /* Same offset as .topbar, .hero, .panel-inner and .footer-content: the page's outer gutter, then --pad. The 860px measure is kept, so only where the column starts has changed. */ max-width:calc(var(--col) + 2 * var(--pad)); margin-left:max(0px, calc((100% - var(--maxw)) / 2)); margin-right:auto; padding:0 var(--pad); } /* eyebrow / label utility */ .eyebrow{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--pine); font-weight:500; } /* header */ .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink);} .brand .mark{ font-family:"Spectral",serif;font-weight:600;font-size:20px;letter-spacing:-0.01em; } .brand .sub{ font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:0.12em; text-transform:uppercase;color:var(--muted); } /* hero */ /* hero */ .hero{ /* css/style.css also defines .hero — display:flex, align-items:center, max-width:1180px, margin:0 auto, min-height:calc(100vh - 132px). Same specificity, and this block loads later, so ONLY the properties restated here win; the rest still apply. Reset them explicitly: this hero is a full-bleed band like .site-footer. */ display:block; align-items:normal; max-width:none; min-height:0; margin:0; /* Hero band re-hued 07-09-2026. The previous value was derived from the gradient TEAL end only, so it expressed none of the teal-to-green travel that gives the brand its character. #225943 is taken from the MIDDLE of the gradient, placing this band at the centre of the family rather than at one edge. White text scores 8.15 on it. Set on the rule rather than on --pine-deep, because that token also colours the .verdict.yes text and should not move. Original kept below. background:var(--pine-deep); */ background:#225943; color:var(--paper); padding:88px 0 78px; } .hero .eyebrow{color:#8FC7B8;} .hero h1{ font-family:"Spectral",serif; font-weight:500; font-size:clamp(30px,5.4vw,50px); line-height:1.12; letter-spacing:-0.015em; margin:20px 0 0; max-width:16ch; } .hero .lede{ color:#CFE0DA; font-size:19px; margin-top:26px; max-width:54ch; } .hero .thesis{ margin-top:40px; padding:26px 28px; border-left:2px solid var(--accent); background:rgba(255,255,255,0.04); } .hero .thesis .q-small{color:#9FB4AE;font-size:15px;} .hero .thesis .q-big{ font-family:"Spectral",serif;font-style:italic; font-size:clamp(21px,3.4vw,27px);line-height:1.3;margin-top:8px;color:#fff; } .hero-cards{ margin-top:42px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .hero-card{ padding:22px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); border-radius:6px; } .hero-card h3{ margin:10px 0 8px; color:#ffffff; font-size:20px; } .hero-card p{ margin:0; color:#CFE0DA; font-size:15px; line-height:1.6; } @media(max-width:900px){ .hero-cards{ grid-template-columns:1fr; } } /* section rhythm */ section.doc{padding:60px 0;border-bottom:1px solid var(--hair);} .sec-num{ font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--accent); letter-spacing:0.1em; } h2{ font-family:"Spectral",serif;font-weight:600; font-size:clamp(24px,3.6vw,32px);line-height:1.18;letter-spacing:-0.01em; margin:10px 0 0; } h3{ font-family:"Spectral",serif;font-weight:500; font-size:21px;line-height:1.3;margin:38px 0 6px;color:var(--ink); } p{margin:14px 0;color:#2A343E;} /* Justified body copy. Scoped to the document sections — a bare `p` selector would also catch the hero lede, the hero cards and the footer, which are too narrow to justify without rivers. hyphens:auto needs the lang attribute, which sets. */ section.doc p{ text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; } /* Not the pull-quotes: 21px serif in a narrow box justifies into visible gaps. They read better ragged. */ section.doc .pull p{ text-align:left; hyphens:manual; } /* Below ~560px the column is about 40 characters wide. Justifying that forces gaps you could park a bus in. Ragged right is the better compromise on a phone. */ @media(max-width:560px){ section.doc p{ text-align:left; hyphens:manual; } } .muted{color:var(--muted);} a.inline{color:var(--pine);} ul.clean{list-style:none;padding:0;margin:16px 0;} ul.clean li{ position:relative;padding:5px 0 5px 24px;color:#2A343E; } ul.clean li::before{ content:"";position:absolute;left:2px;top:14px;width:7px;height:7px; background:var(--pine);border-radius:1px; } /* the recurring "questions to answer" motif */ .questions{ background:var(--panel); border:1px solid var(--hair-strong); border-radius:4px; padding:26px 28px; margin:26px 0; } .questions .eyebrow{margin-bottom:14px;display:block;} .questions ol{margin:0;padding-left:0;list-style:none;counter-reset:q;} .questions li{ counter-increment:q;position:relative;padding:9px 0 9px 40px; border-top:1px solid var(--hair); } .questions li:first-child{border-top:none;} .questions li::before{ content:counter(q,decimal-leading-zero); position:absolute;left:0;top:9px; font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--pine); } /* pull callout */ .pull{ margin:34px 0;padding:28px 30px; border-left:3px solid var(--pine); background:#fff; } .pull p{font-family:"Spectral",serif;font-size:21px;line-height:1.4;color:var(--ink);margin:8px 0;} /* yes/no inline answer chips */ .verdict{ display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:12px; letter-spacing:0.1em;text-transform:uppercase;padding:3px 10px;border-radius:3px; margin:6px 0; } .verdict.no{background:#F3E4E0;color:#8A3C2C;} .verdict.yes{background:#E1EDE7;color:var(--pine-deep);} .verdict.maybe{background:#F1EBDD;color:#7A5A22;} /* steps */ .steps{margin:26px 0;} .step{ display:grid;grid-template-columns:56px 1fr;gap:22px; padding:26px 0;border-top:1px solid var(--hair); } .step:first-child{border-top:none;} .step .n{ font-family:"Spectral",serif;font-size:34px;color:var(--pine); line-height:1;font-weight:600; } .step h3{margin:0 0 6px;} .step p{margin:6px 0;} @media(max-width:520px){ .step{grid-template-columns:1fr;gap:6px;} .step .n{font-size:26px;} } /* ---------- footer ---------- */ /* NOTE: this page carries its own styles, so the footer rules must live here too (not only in styles-final.css). Matches the landing footer. */ /* Same dark brand ramp as the other pages. --band-grad is defined in style.css, which this page loads before its own block. .site-footer{background:var(--pine-deep);padding:64px 0;} */ .site-footer{background:var(--band-grad);padding:64px 0;} /* Widened to the site grid 09-09-2026, so the footer lines up with the header above it instead of with this page's narrower reading column. Original kept below, commented. .site-footer .footer-content{max-width:var(--col);margin:0 auto;padding:0 28px;} */ .site-footer .footer-content{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);} .site-footer .footer-main{max-width:640px;} .site-footer .mark{ font-family:"Spectral",serif;font-size:22px;font-weight:600; color:#fff;margin-bottom:16px; } .site-footer .footer-text{ color:#CFE0DA;font-size:15px;line-height:1.7;margin:0 0 26px;max-width:52ch; } .site-footer .footer-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px;} .site-footer .btn-primary, .site-footer .btn-secondary{ display:inline-block;text-decoration:none; font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:15px;font-weight:600;padding:14px 24px;border-radius:8px; transition:transform .15s ease,background .18s ease,border-color .18s ease,color .18s ease; } /* Footer CTA is a large surface, so it takes the brand gradient with dark text, matching .btn-primary in style.css. White text fails on this gradient. Original kept below, commented. .site-footer .btn-primary{background:#16706b;color:#fff;} */ .site-footer .btn-primary{background:var(--brand-grad);color:var(--on-brand);} /* Original kept below, commented. .site-footer .btn-primary:hover{background:#0e5450;transform:translateY(-1px);} */ .site-footer .btn-primary:hover{filter:brightness(0.93);transform:translateY(-1px);} .site-footer .btn-secondary{background:#fff;color:var(--ink);border:1.5px solid #fff;} /* Matched to the rest of the site: white by default, brand gradient on hover with dark text. Original kept below, commented. .site-footer .btn-secondary:hover{background:transparent;color:#fff;transform:translateY(-1px);} */ .site-footer .btn-secondary:hover{background:var(--brand-grad);color:var(--on-brand);border-color:transparent;transform:translateY(-1px);} /* Primary yields to white while the secondary is hovered, so only one button reads as the active choice. See the note in css/style.css. */ .site-footer .footer-actions:has(.btn-secondary:hover) .btn-primary{background:#fff;color:var(--ink);} .site-footer .disc{color:#7C948D;font-size:12px;line-height:1.6;max-width:70ch;margin:0;} @media(max-width:520px){ .site-footer .footer-actions{flex-direction:column;} .site-footer .btn-primary, .site-footer .btn-secondary{width:100%;text-align:center;} } :focus-visible{outline:2px solid var(--accent);outline-offset:3px;} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} /* Definitions and jargon (section 06). Added 06-09-2026. A dl rather than a list of paragraphs: the term/definition relationship is the content, so the markup should say so. */ .gloss{margin:0;} .gloss dt{ font-family:"IBM Plex Sans",system-ui,sans-serif; font-weight:600;color:var(--ink);margin:20px 0 3px; } .gloss dd{ margin:0;color:#2A343E; text-align:justify;text-justify:inter-word;hyphens:auto; } /* Used for the two "this is not a statutory requirement" caveats. */ .gloss-note{ background:var(--panel);border-left:3px solid var(--hair-strong); padding:12px 16px;margin:16px 0 4px;color:var(--muted); font-size:15px;text-align:left; } /* The GDPR mapping. Narrow screens scroll the table itself rather than the page, so the body never scrolls sideways. */ .map-wrap{overflow-x:auto;margin:18px 0 0;} .map{border-collapse:collapse;width:100%;font-size:15px;} .map th,.map td{ border-bottom:1px solid var(--hair); padding:10px 14px;text-align:left;vertical-align:top; } /* Header band, matching sections 09 and 10. Original kept below. .map th{ font-family:"IBM Plex Mono",monospace;font-size:12px; letter-spacing:0.08em;text-transform:uppercase; color:var(--muted);font-weight:500;white-space:nowrap; } */ .map th{ font-family:"IBM Plex Mono",monospace;font-size:12px; letter-spacing:0.08em;text-transform:uppercase; background:var(--pine);color:#fff; font-weight:500;white-space:nowrap; border-bottom:none;padding-top:11px;padding-bottom:11px; } .map th:first-child{border-radius:4px 0 0 0;} .map th:last-child{border-radius:0 4px 0 0;} .map tbody tr:last-child td{border-bottom:none;} @media(max-width:560px){ .gloss dt{margin-top:18px;} .map th,.map td{padding:9px 10px;} } /* Questions businesses usually ask (section 07). Added 07-09-2026. h3/p rather than a dl: each question is a heading so it can carry an id, be linked to, and be found by the in-page search. */ .qa-q{ font-family:"IBM Plex Sans",system-ui,sans-serif; font-weight:600;font-size:17px;line-height:1.4; color:var(--ink);margin:34px 0 8px; } .qa-a{margin:0;color:#2A343E;text-align:justify;text-justify:inter-word;hyphens:auto;} /* The verdict word. Every answer opens with one so that a run of necessary qualifications does not read as evasion. */ .qa-lead{font-weight:600;color:var(--pine);} /* Closing block: the readiness checklist. Not a Q&A item - it is the way out of the section, so it is set apart rather than in the list. */ .qa-close{ margin:44px 0 0;padding:26px 28px; background:var(--panel);border-left:3px solid var(--pine); border-radius:4px; } .qa-close h3{margin:0 0 10px;font-size:19px;} .qa-close p{margin:10px 0;text-align:left;} .qa-check{ list-style:none;margin:14px 0;padding:0; display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px; } .qa-check li{ padding-left:16px;position:relative; color:var(--ink);font-size:15px;line-height:1.5; } .qa-check li::before{ content:"";position:absolute;left:0;top:9px; width:6px;height:6px;border-radius:50%;background:var(--pine); } @media(max-width:560px){ .qa-q{margin-top:28px;font-size:16px;} .qa-close{padding:20px 18px;} .qa-check{grid-template-columns:1fr;} } /* What you will be told (section 08). Added 07-09-2026. Two-part blocks, visually distinct from the 07 question list so a scrolling reader can tell the sections apart without reading them. The labels are real spans rather than ::before content, because generated content is not reliably announced by screen readers. */ .myth{ margin:26px 0 0;padding:18px 20px; background:var(--paper);border:1px solid var(--hair);border-radius:4px; } .myth-claim{margin:0 0 12px;color:var(--muted);font-style:italic;text-align:left;} .myth-truth{margin:0;color:#2A343E;text-align:justify;text-justify:inter-word;hyphens:auto;} /* The label sits on its own line above each half, in mono, so the claim/correction rhythm is legible at a glance while scrolling. */ .myth-tag{ display:block;font-family:"IBM Plex Mono",monospace; font-size:11px;letter-spacing:0.1em;text-transform:uppercase; font-style:normal;color:var(--hair-strong);margin-bottom:5px; } .myth-tag--true{color:var(--pine);} .myth-note{ margin:34px 0 0;padding:16px 20px; background:var(--panel);border-left:3px solid var(--hair-strong); color:var(--muted);font-size:15px;text-align:left; } @media(max-width:560px){ .myth{padding:16px 15px;} .myth-note{padding:14px 15px;} } /* The Act, section by section (section 09). Added 07-09-2026. 44 rows of reference material. Three columns on desktop; below 700px each row stacks, because a three-column table of prose is unusable on a phone and most campaign traffic will be mobile. The stacked labels come from data-label attributes rather than being invented in CSS, so the header text exists once in the markup. */ .acts-note{ margin:14px 0 0;padding:12px 16px; background:var(--panel);border-left:3px solid var(--hair-strong); color:var(--muted);font-size:14px;text-align:left; } .acts-wrap{margin:22px 0 0;overflow-x:auto;} .acts{border-collapse:collapse;width:100%;font-size:15px;} .acts th,.acts td{ border-bottom:1px solid var(--hair); padding:12px 14px;text-align:left;vertical-align:top;line-height:1.55; } /* Header band. Original kept below, commented, pending a run. .acts thead th{ font-family:"IBM Plex Mono",monospace;font-size:12px; letter-spacing:0.08em;text-transform:uppercase; color:var(--muted);font-weight:500;white-space:nowrap; border-bottom:1px solid var(--hair-strong); } */ .acts thead th{ font-family:"IBM Plex Mono",monospace;font-size:12px; letter-spacing:0.08em;text-transform:uppercase; background:var(--pine);color:#fff; font-weight:500;white-space:nowrap; border-bottom:none;padding-top:11px;padding-bottom:11px; } .acts thead th:first-child{border-radius:4px 0 0 0;} .acts thead th:last-child{border-radius:0 4px 0 0;} /* The section label: narrow, and the only bold column, so the eye can run down it looking for a number without reading the prose. */ .acts tbody th{ width:22%;font-weight:600;color:var(--ink); font-size:14px;padding-right:18px; } .acts td{color:#2A343E;width:39%;} .acts tbody tr:target{background:var(--panel);} @media(max-width:700px){ .acts,.acts tbody,.acts tr,.acts td,.acts tbody th{display:block;width:auto;} .acts thead{display:none;} .acts tbody tr{ border-bottom:1px solid var(--hair);padding:16px 0; } .acts th,.acts td{border-bottom:none;padding:0;} .acts tbody th{font-size:16px;margin-bottom:8px;padding-right:0;} .acts td{margin-top:10px;} .acts td::before{ content:attr(data-label);display:block; font-family:"IBM Plex Mono",monospace;font-size:11px; letter-spacing:0.08em;text-transform:uppercase; color:var(--hair-strong);margin-bottom:3px; } } /* The one-line summary at the close of section 05. Added 07-09-2026. Set apart from the journey steps above it: those describe how an organisation gets there, this describes what the obligations are. */ .chain{ margin:38px 0 0;padding:22px 24px; background:var(--panel);border-left:3px solid var(--pine);border-radius:4px; } .chain-lead{ margin:0 0 10px;font-family:"IBM Plex Mono",monospace; font-size:11px;letter-spacing:0.1em;text-transform:uppercase; color:var(--muted);text-align:left; } .chain-seq{ margin:0;color:var(--ink);font-size:16px;line-height:1.85; text-align:left; } /* The arrows carry the sequence, so they are given weight of their own rather than blending into the words either side. */ .chain-seq span{ color:var(--pine);font-weight:600;padding:0 2px; } /* Section 10's exclusions table is two columns, not three. */ .acts--excl tbody th{width:34%;} .acts--excl td{width:66%;} @media(max-width:560px){ .chain{padding:18px 16px;} .chain-seq{font-size:15px;line-height:1.8;} } /* ---------- Section navigation and separation. Added 07-09-2026 ---------- Two problems, solved separately: 1. "Where am I?" - a slim sticky bar naming the current section, which opens into the full list. Built by the script at the foot of the page, so there is no markup for it here. 2. "This is a new section" - alternating background bands. The sections live inside .wrap (an 860px centred column), so a plain background would paint a tinted rectangle floating in the page. The box-shadow/clip-path pair below spreads the colour to the full viewport width without changing any markup: the shadow extends 100vmax sideways, and the clip trims it vertically so it does not bleed into the sections above and below. ------------------------------------------------------------------- */ section.doc:nth-of-type(even){ background:var(--panel); box-shadow:0 0 0 100vmax var(--panel); clip-path:inset(0 -100vmax); } /* The sticky bar. Hidden until the reader is past the hero, so it never competes with the opening screen. */ /* Offset below the sticky site header, added 09-09-2026. The header is now position:sticky at z-index 70 across the site; left at top:0 this bar would sit underneath it and never be seen. It now docks directly below the compacted header, so the reader keeps both the site nav and the section they are in. Original kept below, commented. .secnav{ position:fixed;top:0;left:0;right:0;z-index:60; background:var(--pine-deep); transform:translateY(-100%); transition:transform .22s ease; } */ .secnav{ position:fixed;top:var(--topbar-stuck-h);left:0;right:0;z-index:60; background:var(--pine-deep); /* Its own height plus the header offset, so it is fully clear of the viewport when hidden rather than peeking below the header. */ transform:translateY(calc(-100% - var(--topbar-stuck-h))); transition:transform .22s ease; } .secnav.is-on{transform:translateY(0);} .secnav-toggle{ display:flex;align-items:center;gap:12px; width:100%;max-width:var(--col);margin:0 auto; padding:10px 28px; background:none;border:0;cursor:pointer; font-family:inherit;text-align:left;color:#fff; } .secnav-num{ font-family:"IBM Plex Mono",monospace;font-size:11px; letter-spacing:0.12em;color:#8FC7B8;flex:none; } .secnav-title{ font-family:"Spectral",Georgia,serif;font-size:15px; flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .secnav-caret{ flex:none;font-size:11px;color:#8FC7B8; transition:transform .2s ease; } .secnav[data-open="true"] .secnav-caret{transform:rotate(180deg);} .secnav-toggle:focus-visible{outline:2px solid #8FC7B8;outline-offset:-2px;} /* The list. Same dark band, so it reads as the bar unfolding rather than as a separate menu appearing over the page. */ .secnav-list{ list-style:none;margin:0 auto;padding:6px 28px 16px; max-width:var(--col); border-top:1px solid rgba(255,255,255,0.12); max-height:70vh;overflow-y:auto; } .secnav-list a{ display:flex;gap:12px;align-items:baseline; padding:8px 0;text-decoration:none;color:#CFE0DA;font-size:14px; } .secnav-list a:hover,.secnav-list a:focus-visible{color:#fff;} .secnav-list .n{ font-family:"IBM Plex Mono",monospace;font-size:11px; letter-spacing:0.1em;color:#8FC7B8;flex:none;min-width:22px; } .secnav-list li[aria-current="true"] a{color:#fff;font-weight:600;} @media(max-width:560px){ .secnav-toggle{padding:9px 18px;gap:9px;} .secnav-list{padding:6px 18px 14px;} .secnav-title{font-size:14px;} } @media(prefers-reduced-motion:reduce){ .secnav,.secnav-caret{transition:none;} } /* ---------- In-page search. Added 07-09-2026 ---------------------- Lives inside the section-navigation panel rather than as a second control: the panel shows the section list when the box is empty and results when it is not. One thing to find, one place to look. ------------------------------------------------------------------ */ /* Anything an anchor or a search result can land on sits clear of the sticky bar. Declared here rather than in script so that plain #id links get the same treatment. 96px = bar height plus breathing room. */ /* Raised 09-09-2026: the sticky site header (62px) now sits above this bar, so an anchor has both to clear. Original kept below. section.doc, section.doc h2, section.doc h3, .gloss dt, .qa-q, .myth, .acts tbody tr, .map tbody tr, .chain{ scroll-margin-top:96px; } */ section.doc, section.doc h2, section.doc h3, .gloss dt, .qa-q, .myth, .acts tbody tr, .map tbody tr, .chain{ scroll-margin-top:calc(var(--topbar-stuck-h) + 56px); } .secnav-search{ display:flex;align-items:center;gap:9px; max-width:var(--col);margin:0 auto; padding:10px 28px 4px; } .secnav-search input{ flex:1;min-width:0; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:5px; padding:8px 11px; color:#fff;font-family:inherit;font-size:14px; } /* Matched to the magnifier. The previous value sat near 3.4 against the bar, below the 4.5 needed for text. Original kept below. .secnav-search input::placeholder{color:rgba(255,255,255,0.45);} */ .secnav-search input::placeholder{color:#CFE0DA;opacity:1;} .secnav-search input:focus{ outline:none;border-color:#8FC7B8; background:rgba(255,255,255,0.12); } .secnav-count{ flex:none;font-family:"IBM Plex Mono",monospace; font-size:11px;letter-spacing:0.08em;color:#8FC7B8; white-space:nowrap; } .secnav-results{ list-style:none;margin:0 auto;padding:4px 28px 16px; max-width:var(--col);max-height:62vh;overflow-y:auto; } .secnav-results li{border-top:1px solid rgba(255,255,255,0.08);} .secnav-results li:first-child{border-top:0;} .secnav-results button{ display:block;width:100%;text-align:left; background:none;border:0;cursor:pointer; padding:9px 0;font-family:inherit;color:#CFE0DA; } .secnav-results button:hover, .secnav-results button:focus-visible{color:#fff;outline:none;} .secnav-results button:focus-visible{ box-shadow:inset 0 0 0 2px #8FC7B8;border-radius:3px; } .secnav-where{ display:block;font-family:"IBM Plex Mono",monospace; font-size:10px;letter-spacing:0.1em;text-transform:uppercase; color:#8FC7B8;margin-bottom:3px; } .secnav-snip{display:block;font-size:14px;line-height:1.5;} /* The matched term, so the eye lands on why this result is here. */ .secnav-snip mark{ background:rgba(143,199,184,0.28);color:#fff; padding:0 1px;border-radius:2px; } .secnav-empty{ padding:14px 28px 20px;max-width:var(--col);margin:0 auto; color:rgba(255,255,255,0.55);font-size:14px; } /* Where a result lands. A brief wash rather than a permanent mark, so the page is not left decorated after the reader has found the thing. */ .search-hit{ animation:searchhit 1.8s ease-out 1; border-radius:3px; } @keyframes searchhit{ 0%,55%{background:rgba(31,94,100,0.16);} 100%{background:transparent;} } @media(prefers-reduced-motion:reduce){ .search-hit{animation:none;background:rgba(31,94,100,0.14);} } @media(max-width:560px){ .secnav-search{padding:9px 18px 4px;} .secnav-results{padding:4px 18px 14px;} .secnav-empty{padding:12px 18px 18px;} } /* ---------- Search affordance. Added 07-09-2026 ------------------- Search existed but was invisible: it only appeared once the panel was opened, so nobody who had not been told would find it. The magnifier makes it visible at every screen size; the shortcut serves people who search often without taking any space. The toggle keeps its own rules; these only apply once it sits inside .secnav-bar, which the script creates at runtime. ------------------------------------------------------------------ */ .secnav-bar{ display:flex;align-items:stretch; max-width:var(--col);margin:0 auto; } .secnav-bar .secnav-toggle{ flex:1;min-width:0;max-width:none;margin:0; } /* Lightened 07-09-2026: #8FC7B8 scored 5.33 against the bar and read as decoration rather than a control. #CFE0DA scores 7.40 and is the colour already used for the footer text and the section list, so it is consistent rather than a new value. Original kept below. .secnav-find{ flex:none;display:flex;align-items:center;gap:7px; background:none;border:0;cursor:pointer; padding:10px 28px 10px 14px; color:#8FC7B8;font-family:inherit; } */ .secnav-find{ flex:none;display:flex;align-items:center;gap:7px; background:none;border:0;cursor:pointer; padding:10px 28px 10px 14px; color:#CFE0DA;font-family:inherit; } .secnav-find:hover{color:#fff;} .secnav-find:focus-visible{outline:2px solid #8FC7B8;outline-offset:-2px;} .secnav-find svg{width:16px;height:16px;flex:none;} /* The shortcut hint. Hidden on narrow screens, where there is no keyboard to press and the space is better spent on the title. */ .secnav-key{ font-family:"IBM Plex Mono",monospace;font-size:10px; letter-spacing:0.08em; /* border lifted with the text it sits around, 07-09-2026 border:1px solid rgba(255,255,255,0.25);border-radius:3px; */ border:1px solid rgba(207,224,218,0.45);border-radius:3px; padding:1px 5px;line-height:1.5; } @media(max-width:640px){ .secnav-key{display:none;} .secnav-find{padding:10px 18px 10px 10px;} } /* ================================================================== The split into four pages. Added 09-09-2026. understand-dpdp.html was ten sections and ~115KB on one URL. The glossary, the GDPR mapping and the business questions are now pages of their own, which needs three things this stylesheet did not have: a way to move between the four parts, a breadcrumb, and a way to close a page by pointing at the others. ================================================================== */ /* ---- the sub-page hero ------------------------------------------- The guide's own hero carries three cards and a thesis block. These pages carry a heading and a line, so the band is shallower. Same colour, so a reader arriving on one of them is plainly still in the same guide. ------------------------------------------------------------------ */ .hero--sub{ padding:62px 0 54px; } .hero--sub h1{ max-width:22ch; font-size:clamp(28px,4.6vw,42px); } .hero--sub .lede{ margin-top:20px; } /* ---- breadcrumb -------------------------------------------------- Marked up as a nav with aria-current on the last item; the matching BreadcrumbList sits in each page's JSON-LD. ------------------------------------------------------------------ */ .crumbs{ background:var(--paper); border-bottom:1px solid var(--hair); font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; } .crumbs .wrap{ display:flex;align-items:center;flex-wrap:wrap;gap:9px; padding-top:11px;padding-bottom:11px; color:var(--muted); } .crumbs a{color:var(--pine);text-decoration:none;} .crumbs a:hover{text-decoration:underline;text-underline-offset:3px;} .crumbs span[aria-hidden]{color:var(--hair-strong);} .crumbs [aria-current]{color:var(--ink);} /* ---- the four parts ---------------------------------------------- A strip rather than four more items in the site nav: these belong to each other, not to the top-level navigation, and adding them there would take it from five items to nine. ------------------------------------------------------------------ */ .guide-tabs{ background:var(--panel); border-bottom:1px solid var(--hair-strong); } .guide-tabs .wrap{ display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px; padding-top:12px;padding-bottom:12px; } .guide-tabs-label{ font-family:"IBM Plex Mono",monospace; font-size:11px;letter-spacing:0.14em;text-transform:uppercase; color:var(--muted);flex:none; } .guide-tabs ul{ display:flex;flex-wrap:wrap;gap:6px; list-style:none;margin:0;padding:0; } .guide-tabs a{ display:block; padding:6px 13px; border:1px solid transparent; border-radius:999px; font-size:14px; color:var(--pine); text-decoration:none; transition:background .18s ease,color .18s ease,border-color .18s ease; } .guide-tabs a:hover, .guide-tabs a:focus-visible{ background:var(--pine);color:#fff;border-color:var(--pine); } /* The page you are on is a marker, not a link you want to press. */ .guide-tabs a[aria-current="page"]{ background:#fff; border-color:var(--hair-strong); color:var(--ink); font-weight:600; cursor:default; } .guide-tabs a[aria-current="page"]:hover{ background:#fff;color:var(--ink);border-color:var(--hair-strong); } /* ---- signpost cards ---------------------------------------------- Used both mid-guide, where sections 06 and 07 used to be, and as the closing block of every page in the set. ------------------------------------------------------------------ */ /* Not .sec-num: js/guide.js builds the section navigation from every section carrying one, and a words-long label would break the numeric column. This section is a signpost, not a section of the argument, so it is deliberately absent from that list. */ .sec-label{ font-family:"IBM Plex Mono",monospace;font-size:12px; letter-spacing:0.1em;text-transform:uppercase;color:var(--muted); } .next-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:26px; } .next-card{ display:flex;flex-direction:column;gap:8px; padding:22px 22px 24px; background:#fff; border:1px solid var(--hair-strong); border-radius:6px; text-decoration:none; transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; } .next-card:hover, .next-card:focus-visible{ border-color:var(--pine); transform:translateY(-2px); box-shadow:0 10px 24px rgba(27,37,48,0.08); } .next-card-label{ font-family:"Spectral",Georgia,serif; font-size:19px;line-height:1.3;color:var(--ink); } .next-card-blurb{ font-size:14.5px;line-height:1.55;color:var(--muted); } /* The arrow is decoration and is generated, so it stays out of the accessible name of the link. */ .next-card-label::after{ content:" \2192"; color:var(--pine); } @media(max-width:560px){ .guide-tabs .wrap{gap:6px 12px;} .guide-tabs-label{width:100%;} .next-grid{grid-template-columns:1fr;} .hero--sub{padding:44px 0 40px;} } /* The section bar and its search panel follow the same gutter, so the bar that names the section you are in lines up with the section itself rather than floating 160px to its left. Same expression as .wrap. */ .secnav-bar, .secnav-toggle, .secnav-list, .secnav-search, .secnav-results, .secnav-empty{ max-width:calc(var(--col) + 2 * var(--pad)); margin-left:max(0px, calc((100% - var(--maxw)) / 2)); margin-right:auto; padding-left:var(--pad); padding-right:var(--pad); } /* Once js/guide.js wraps the toggle in .secnav-bar the gutter is already on the wrapper, so the toggle and the magnifier give up their own or it is applied twice. */ .secnav-bar .secnav-toggle{ max-width:none;margin-left:0;margin-right:0; padding-left:0;padding-right:0; } .secnav-bar .secnav-find{ padding-right:0; } /* ------------------------------------------------------------------ The search box, folded into the panel. Added 09-09-2026. It was rendered permanently inside the section bar, which made that bar about 145px tall. On its own that was liveable. Stacked under the 62px sticky site header it is 207px of fixed chrome on a 700px laptop viewport, which is most of the reason to have a sticky bar gone. Hiding it when the panel is closed also matches how the affordance script already behaves: the magnifier and Ctrl+K open the panel and then focus the box, so there is a way in that does not depend on the box being on screen. ------------------------------------------------------------------ */ .secnav .secnav-search, .secnav .secnav-results, .secnav .secnav-empty{ display:none; } .secnav[data-open="true"] .secnav-search{ display:flex; } /* These two also carry the hidden attribute, set by the search script depending on whether the query matched; [hidden] must still win. */ .secnav[data-open="true"] .secnav-results:not([hidden]){ display:block; } .secnav[data-open="true"] .secnav-empty:not([hidden]){ display:block; } /* ================================================================== Search across the whole guide, and the signpost cards. 09-09-2026. ================================================================== */ /* ---- results from another page ----------------------------------- A cross-page result is a real , so it needs the styling the