:root { /* ALIAS LAYER onto the generated tokens (static/css/tokens.css, from design-engine/tokens.json). The site keeps its own variable names — renaming --navy to --c-primary-navy across 560 lines would be churn and risk for no gain, and RULING 2 says restyle, not restructure. What changes is where the VALUES come from: every colour below now resolves to a token. Nothing is authored here. If you want to change a colour, change tokens.json and re-run scripts/brand/emit_tokens.py. */ --navy: var(--c-primary-navy); --navy-mid: var(--c-secondary-navy); --navy-light: var(--c-deep-slate); --gold: var(--c-luxury-gold); --gold-light: var(--c-soft-gold); --white: var(--c-white); --off-white: var(--c-light-grey); /* Muted text is the cream at an alpha — ONE system, not a second grey (Ruling 4). */ --text-muted: rgba(var(--c-light-grey-rgb), 0.62); --text-dim: rgba(var(--c-light-grey-rgb), 0.32); /* --hairline was USED THREE TIMES AND NEVER DECLARED, so those borders rendered NOTHING. It is declared SOLID, not as a gradient: every call site is `border: 1px solid var(--hairline)`, and a linear-gradient is invalid in a border-colour context — it would render nothing, i.e. it would not fix the bug at all. The engine's DISSOLVING rule is a different thing (a background gradient on a 1px element) and is available as --hairline-fade for the W3 grammar pass. */ --hairline: var(--hairline-solid); /* Hero photograph dim. A multiplier, not a colour — no new hex, and nothing in tokens.json expresses "how bright is this one photo", which is a per-image art-direction call rather than a brand value. Named here rather than inlined so the level is adjustable in one place and the .hero-bg::before rule stays about WHERE the filter applies (see its note) rather than how much. */ --hero-photo-dim: 0.62; /* was 0.72 — Dan wanted darker still; see A/B/C renders (0.58/0.62/0.66) for the alternatives. Seam step re-measured at this value: +/-0.02, same continuity as 0.72's +0.06 (both well inside "under ~0.5"), so the ::before/sibling-gradient technique holds. */ } /* ══ TYPE SCALE — derived from design-engine/tokens.json RATIOS, not copied from its px ══ The engine is absolute px on a 1080x1080 canvas; this site is fluid clamp(). Copying 78px would put a 78px headline on a phone. So each step is the engine's size ÷ its body (17px), applied to this site's 1rem base. The RELATIONSHIPS carry; the numbers don't. */ :root { --t-display-xl: 5.06rem; /* engine displayXl 86/17 */ --t-display-l: 3.88rem; /* engine displayL 66/17 */ --t-stat: 3.41rem; /* engine statValue 58/17 */ --t-display-m: 2.71rem; /* engine displayM 46/17 */ --t-body-l: 1.29rem; /* engine bodyL 22/17 */ --t-label: 0.88rem; /* engine label 15/17 */ --t-source: 0.76rem; /* engine source 13/17 */ --t-micro: 0.71rem; /* engine micro 12/17 */ /* Tracking: the engine's is px at a FIXED size; on a fluid site it must be em or it stops scaling. Converted at the engine's own size: label 2.6px/15px, source 2.2px/13px. */ --track-label-em: 0.173em; --track-source-em: 0.169em; --track-micro-em: 0.100em; } /* ══ THE NUMERAL FIX — not cosmetic. Every number on this site IS the product. ══ Cormorant Garamond defaults to OLD-STYLE (text) figures: the decimal sits mid-height, so "3.75%" renders as "3·75%" — an interpunct. On a mortgage rate. Inherited from body, so it reaches every figure without a per-element list that would rot. */ body { font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; } /* TABULAR as well, wherever a figure is the content: columns of numbers must align. */ .stat-num, .data-value, .cf-value, .lead-figure .fig, .fill { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--navy); color:var(--off-white); font-family:'Jost',sans-serif; font-weight:300; overflow-x:hidden; } /* ══ GLOBAL LINK COLOUR (2026-08-10) — the STRUCTURAL fix, not a per-component patch ══ Until this rule existed there was no element-level `a` selector anywhere in this stylesheet or any of the six scoped ones — not even `a{color:inherit}` (an earlier uncommitted attempt at this same fix, found and superseded while building this one; it took a different, incompatible approach and covered none of the rest of what's below). Every anchor was dressed individually by class, and any anchor whose class was missed fell through to the browser's own link blue. That was not hypothetical: a full sweep of all 641 built pages, verified in a real browser, found 1,227 anchors rendering at rgb(0,0,238) on navy — 2.03:1, below AA at any text size — plus 1,314 more anchors with no author colour rule at all, invisible-proof today only because every child inside them happens to carry its own colour. TWO PARTS. (1) `--link`/`--link-hover` custom properties, declared once here and consumed by the `a` rule below at specificity (0,0,1) — the lowest an element selector can have, so every existing class rule (`.nav-links a`, `.cd-root a`, `.footer-col a`, `.inline` and the rest) keeps winning, order-independently; this is a FLOOR, not an override. (2) Light plates (`.ep-root`, `.yi-root`) re-declare the `--link` VARIABLE on themselves, not the anchor colour — see their own stylesheets. Custom properties inherit, so a plate declares its surface once and every anchor inside it, including ones added later, resolves correctly through this same floor rule. That is what actually fixes the CLASS of bug: a hardcoded colour here would fix today's blue and reproduce the exact same failure the first time a link lands on a light band (and one already had — see yield-index.css's .yi-methodology note, fixed alongside this). White, not cream: on the three navy tones this measures 15.8–19.1:1. On `.ep-root`/`.yi-root`'s cream and white plates it would be 1.00–1.09:1 — invisible — which is exactly why those declare their own `--link` instead of taking this one. The persistent underline is deliberate, not decorative: white text in a cream-toned paragraph (`--off-white`) is close enough that colour alone won't tell a reader a run of text is a link — WCAG 1.4.1, use more than colour to convey information. Existing button/pill/nav anchors all already set their own `text-decoration:none` at higher specificity, so this only reaches the naked prose links the floor exists for. */ :root { --link: var(--c-white); --link-hover: var(--gold-light); } a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(var(--c-white-rgb), 0.4); text-underline-offset: 0.15em; transition: color 0.3s, text-decoration-color 0.3s; } a:hover, a:focus-visible { color: var(--link-hover); text-decoration-color: var(--link-hover); } /* :visited — previously unset anywhere, so a naked anchor went UA purple (#551A8B, ~1.73:1 on navy) the moment it was clicked, worse than the blue this whole fix removes. Same colour as unvisited: this is a reference/citation site, not a link-heavy directory where "already read" is a useful signal, so there is no reason to introduce a second link colour. */ a:visited { color: var(--link); } /* :focus-visible — previously unset anywhere on an anchor; kept keyboard-only (not :focus) so a mouse click doesn't leave a ring behind. Gold outline reads clearly against every band on the site, dark or light, without needing its own light-plate override. */ a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; } /* NAV */ #navbar { position:fixed; top:0; left:0; right:0; z-index:100; padding:1.4rem 5rem; display:flex; align-items:center; justify-content:space-between; transition:background 0.5s ease, padding 0.4s ease, border-color 0.5s ease; /* At rest the navbar is transparent (it only gains a background past 60px of scroll), and it spans the full width - so it overlaps the hero photograph, which is now UNWASHED on the right. Measured: "Newsletter" was landing on a lit window at 1.66:1. This scrim is a NAV affordance, not a wash on the image: it darkens only the top ~90px, which is sky, and protects the links over any future hero. */ background:linear-gradient(180deg, rgba(var(--c-primary-navy-rgb),0.92) 0%, rgba(var(--c-primary-navy-rgb),0.55) 55%, rgba(var(--c-primary-navy-rgb),0) 100%); border-bottom:1px solid transparent; } #navbar.scrolled { background:rgba(var(--c-primary-navy-rgb),0.96); backdrop-filter:blur(14px); padding:0.9rem 5rem; border-bottom-color:rgba(var(--c-luxury-gold-rgb),0.15); } .nav-logo { display:flex; align-items:center; gap:0.9rem; text-decoration:none; } .nav-logo img { /* 88, not 110: at 110 the mark competed with the hero figure. A logo should sit quietly — the £270,080 is the message. 88px keeps the framed variant well above Ruling 8's floor (stroke 1.32px vs the 0.96 minimum), so it stays D-full rather than losing its frame. The glow comes down with it (0.2 -> 0.12): it is a GOLD HALO, so it was part of what pulled the eye. It still reads the token via --c-luxury-gold-rgb — the token itself is untouched, this is one rule's local use of it. The mark's own frame is dimmed in the asset (logo-nav.png), not here, because CSS opacity cannot dim the gold without also dimming the cream letters. */ height:88px; width:88px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(var(--c-luxury-gold-rgb),0.12)); } .nav-logo-text { font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:0.22em; color:var(--gold); text-transform:uppercase; line-height:1.4; border-left:1px solid rgba(var(--c-luxury-gold-rgb),0.3); padding-left:0.9rem; } .nav-links { /* 2.2rem, not 2.8rem — history (item count has changed several times since): this was originally tuned when an 8th flat item (PRS Checker) pushed the row 28px past its available width at 1440px, where the flex row's default flex-shrink:1 "fit" that not by overflowing but by silently squeezing .nav-cta narrower than its "Subscribe Free" text needs — wrapping it onto two lines that then overlapped the divider below the nav. 2.2rem reclaims enough per gap to clear that shortfall with real headroom at 1440px and above. THAT HEADROOM DISAPPEARS well before the ~1000px hamburger breakpoint, though — this rule was only ever verified at 1440px/1920px, not at the intermediate desktop widths between the hamburger cutoff and ~1140px, where today's item set (Rental/Compliance dropdowns + Data + Newsletter + Contact + the CTA) is too wide for 2.2rem gaps to fit on one line even though the hamburger hasn't taken over yet — the exact "silently squeezing .nav-cta... wrapping it onto two lines" failure this rule was written to prevent, just re-appearing in a width band nobody checked. See the scoped fix for that band, just below. */ /* margin:0 clears the global `ul{margin:0 0 1rem 1.2rem;}` prose-bullet rule — the SAME reset .footer-col ul already carries (see its own note). Not cosmetic here: #navbar is `align-items:center`, and flexbox centres an item's MARGIN box, so that inherited 1rem bottom-only margin was centring a box 16px taller than the row and lifting the links 8px above the logo (measured: logo centre y=66.4 vs nav y=58.4). Zeroing it makes the two centres agree without touching the nav's own padding or the logo's height. */ display:flex; align-items:center; gap:2.2rem; list-style:none; margin:0; } /* 2026-08-07 — FIX for the dead zone above: measured (Playwright) that at 1001px (the narrowest width the desktop nav still renders at — anything at or below 1000px is already handled by the hamburger, below) the row needs ~723px at the base 2.2rem gap against ~613-634px actually available (that available figure itself moves a little run to run — a vertical scrollbar appearing/disappearing shifts it by its own width — so the fix is sized against the tighter end of that range, not the looser one), so .nav-cta wraps and its box doesn't grow to fit, clipping "Subscribe Free" against the divider exactly like the original 2.8rem->2.2rem fix above was written to prevent. A first pass at var(--s-sm) (12px) still wrapped — re-measured and found only ~6px of margin at the worst case, well inside the scrollbar-width swing above, so it wasn't reliably enough. var(--s-xs) (8px, still an EXISTING spacing-scale step, not a new value) is: at the same 1001px worst case the row needs ~587px against the same ~613px available, a real ~26px margin even at the tighter end — growing further as the width increases toward the point (~1140px) where the base 2.2rem already fits on its own. Upper bound 1145px (a few px of buffer past that measured 1140px crossover) so there's no visible seam where the row is tighter than it needs to be right as the base rule would have taken over anyway. Nothing else in this band changes — this touches ONLY .nav-links' own gap, not the larger max-width:1000px block's section/footer/logo rules, which already render correctly across this whole band and don't need the mobile treatment early. */ @media (min-width:1001px) and (max-width:1145px) { .nav-links { gap:var(--s-xs); } } .nav-links a { font-family:'Jost',sans-serif; font-weight:400; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-muted); text-decoration:none; transition:color 0.3s; } .nav-links a:hover { color:var(--gold); } .nav-cta { color:var(--navy) !important; background:var(--gold); padding:0.65rem 1.7rem !important; letter-spacing:0.16em !important; font-family:'Cinzel',serif !important; transition:background 0.3s !important; } .nav-cta:hover { background:var(--gold-light) !important; color:var(--navy) !important; } /* Hamburger — desktop default is invisible. Only the mobile query (below, ~1000px) turns the bars on; nothing about the flex nav above 1000px changes. */ .nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:26px; height:22px; background:none; border:0; padding:0; cursor:pointer; } .nav-toggle span { display:block; width:100%; height:2px; background:var(--gold); transition:transform 0.25s ease, opacity 0.25s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } /* ── RENTAL NAV DROPDOWN (2026-08-03) — the site's first nav submenu; everything else in .nav-links is a flat link. ".nav-dropdown-link" is a REAL link to /rental (the section landing page), not a JS-only toggle — the caret is a SEPARATE control that only opens/closes the submenu, so "Rental" always has somewhere real to land even if the submenu is never opened. Desktop reveal is hover/focus, CSS-only; base.html's script adds the caret click-toggle (touch- capable desktop, keyboard) and the mobile accordion override below. ── */ .nav-dropdown { position:relative; display:flex; align-items:center; gap:0.35rem; } .nav-dropdown-caret { display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0.2rem; margin:0; cursor:pointer; color:var(--text-muted); transition:color 0.3s, transform 0.25s ease; } .nav-dropdown-caret:hover { color:var(--gold); } .nav-dropdown:hover .nav-dropdown-caret, .nav-dropdown.is-open .nav-dropdown-caret, .nav-dropdown:focus-within .nav-dropdown-caret { transform:rotate(180deg); color:var(--gold); } .nav-dropdown-menu { position:absolute; top:100%; left:-1.3rem; margin-top:0.9rem; min-width:210px; list-style:none; background:rgba(var(--c-primary-navy-rgb),0.98); backdrop-filter:blur(14px); border:1px solid rgba(var(--c-luxury-gold-rgb),0.15); border-radius:6px; padding:0.6rem 0; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px); transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.is-open .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); } .nav-dropdown-menu li { width:100%; } .nav-dropdown-menu a { display:block; padding:0.55rem 1.3rem; font-family:'Jost',sans-serif; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); text-decoration:none; white-space:nowrap; transition:color 0.3s, background 0.3s; } .nav-dropdown-menu a:hover { color:var(--gold); background:rgba(var(--c-luxury-gold-rgb),0.06); } /* HERO */ .hero { position:relative; height:100vh; min-height:700px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .hero-bg { position:absolute; inset:0; background-size:cover; background-position:center 65%; animation:kenBurns 22s ease-in-out infinite alternate; } @keyframes kenBurns { 0% { transform:scale(1.0) translateX(0px); } 100% { transform:scale(1.09) translateX(-8px); } } .hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(var(--c-primary-navy-rgb),0.5) 0%,rgba(var(--c-primary-navy-rgb),0.3) 35%,rgba(var(--c-primary-navy-rgb),0.72) 78%,rgba(var(--c-primary-navy-rgb),1) 100%); } .hero-content { position:relative; z-index:2; text-align:center; padding:0 2rem; max-width:860px; } .hero-eyebrow { font-family:'Cinzel',serif; font-size:0.6rem; letter-spacing:0.4em; color:var(--gold); text-transform:uppercase; margin-bottom:2rem; opacity:0; animation:fadeUp 1s ease 0.4s forwards; } .hero-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(2.6rem,6vw,var(--t-display-xl)); line-height:1.08; color:var(--white); letter-spacing:0.01em; margin-bottom:1.3rem; opacity:0; animation:fadeUp 1s ease 0.6s forwards; } .hero-title em { font-style:italic; color:var(--gold-light); } /* ══ THE HERO INTRO — what UKPP does, before the number ═══════════════════════════════════════ A cold visitor meets £270,080 with no idea whose site this is. This slot answers that above the figure. TWO OPTIONS live here; exactly ONE is rendered (see index.html). They share the slot so the choice is copy, not layout. A — THE SLOGAN. Asserts the category ("Property Intelligence. Simplified."). B — THE STANDFIRST. Describes what the page does, and the page then does it. ══════════════════════════════════════════════════════════════════════════════════════════ */ /* Option A. Cinzel gold, tracked — the brand voice, sized ABOVE the eyebrow (0.82rem vs 0.58) so it leads rather than competes. Flat gold, no gradient: §1 spends one accent. */ .hero-slogan { font-family:'Cinzel',serif; font-size:0.82rem; letter-spacing:0.3em; color:var(--gold); text-transform:uppercase; line-height:1.6; margin-bottom:0.7rem; display:block; opacity:0; animation:fadeUp 1s ease 0.2s forwards; } .hero-slogan-sub { font-family:'Jost',sans-serif; font-weight:300; font-size:0.9rem; color:var(--text-muted); letter-spacing:0.06em; line-height:1.7; margin-bottom:2.4rem; max-width:34ch; opacity:0; animation:fadeUp 1s ease 0.3s forwards; } /* Option B. Jost, cream-muted, sentence case — deliberately NOT gold and NOT Cinzel: this is a sentence, not a badge, and dressing it in the brand's ceremonial type would turn a description back into a claim. It sits at 1.05rem, just above the standfirst's 1rem, so it reads as the frame around the number rather than a second summary. */ .hero-standfirst { font-family:'Jost',sans-serif; font-weight:300; font-size:1.05rem; color:var(--text-muted); letter-spacing:0.04em; line-height:1.75; max-width:46ch; /* margin-bottom removed — .hero-content's gap supplies it */ padding-left:1rem; border-left:1px solid rgba(var(--c-luxury-gold-rgb),0.35); opacity:0; animation:fadeUp 1s ease 0.2s forwards; } .hero-subtitle { font-family:'Jost',sans-serif; font-weight:300; font-size:1rem; color:var(--text-muted); letter-spacing:0.05em; line-height:1.8; /* margin-bottom removed — .hero-content's gap supplies it (this class is hero-only; nothing else references it, so no scoping needed the way .section-eyebrow required). */ opacity:0; animation:fadeUp 1s ease 0.8s forwards; } .hero-actions { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp 1s ease 1s forwards; } .btn-primary { font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--navy); background:var(--gold); padding:1.05rem 3rem; text-decoration:none; display:inline-block; transition:background 0.3s, transform 0.2s, box-shadow 0.3s; box-shadow:0 4px 28px rgba(var(--c-luxury-gold-rgb),0.3); } .btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 10px 36px rgba(var(--c-luxury-gold-rgb),0.45); } .btn-secondary { font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); background:transparent; border:1px solid rgba(var(--c-luxury-gold-rgb),0.45); padding:1.05rem 3rem; text-decoration:none; display:inline-block; transition:border-color 0.3s, color 0.3s, transform 0.2s, background 0.3s; } .btn-secondary:hover { border-color:var(--gold); background:rgba(var(--c-luxury-gold-rgb),0.06); color:var(--gold-light); transform:translateY(-2px); } .hero-scroll { position:absolute; bottom:2.8rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:0.6rem; opacity:0; animation:fadeUp 1s ease 1.4s forwards; } .hero-scroll span { font-family:'Cinzel',serif; font-size:0.48rem; letter-spacing:0.35em; color:var(--text-dim); text-transform:uppercase; } .scroll-line { width:1px; height:52px; background:linear-gradient(to bottom,rgba(var(--c-luxury-gold-rgb),0.8),transparent); animation:scrollPulse 2.2s ease-in-out infinite; } @keyframes scrollPulse { 0%,100% { opacity:0.35; transform:scaleY(1); } 50% { opacity:1; transform:scaleY(0.65); } } /* DIVIDER */ /* SECTIONS */ section { padding:7rem 5rem; } .section-eyebrow { font-family:'Cinzel',serif; font-size:0.58rem; letter-spacing:0.38em; color:var(--gold); text-transform:uppercase; margin-bottom:1rem; display:block; } .section-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(1.9rem,3.8vw,var(--t-display-m)); line-height:1.15; color:var(--white); margin-bottom:1.2rem; } .section-title em { font-style:italic; color:var(--gold-light); } .section-lead { font-family:'Jost',sans-serif; font-weight:300; font-size:0.95rem; color:var(--text-muted); line-height:1.85; max-width:540px; } /* COVER */ .cover-card.visible { opacity:1; transform:translateY(0); } .cover-card:hover::after { transform:scaleX(1); } /* STATS */ /* INTEL */ /* .intel-section removed 2026-07-21 — unused: no template references it (the live section is .intel-brief, a different class with its own rule below). Confirmed dead before removing. */ .intel-inner { max-width:1240px; margin:0 auto; } .intel-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:3.5rem; flex-wrap:wrap; gap:2rem; } .intel-grid { display:grid; grid-template-columns:1.65fr 1fr 1fr; gap:2px; } .intel-card { background:var(--navy-light); padding:2.6rem; position:relative; overflow:hidden; opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease, background 0.3s; text-decoration:none; display:block; color:inherit; } .intel-card.visible { opacity:1; transform:translateY(0); } .intel-card:hover { background:var(--navy-mid); } .intel-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(to right,var(--gold),var(--gold-light)); transform:scaleX(0); transform-origin:left; transition:transform 0.45s ease; } .intel-card:hover::before { transform:scaleX(1); } .intel-tag { font-family:'Cinzel',serif; font-size:0.52rem; letter-spacing:0.28em; color:var(--gold); text-transform:uppercase; margin-bottom:1.1rem; display:block; } .intel-card-title { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:1.25rem; color:var(--white); line-height:1.32; margin-bottom:1rem; } .intel-card.featured .intel-card-title { font-size:1.75rem; line-height:1.22; } .intel-excerpt { font-family:'Jost',sans-serif; font-weight:300; font-size:0.84rem; color:var(--text-muted); line-height:1.82; margin-bottom:1.5rem; } .intel-date { font-family:'Jost',sans-serif; font-size:0.68rem; color:var(--text-dim); letter-spacing:0.1em; } .intel-arrow { position:absolute; bottom:2.2rem; right:2.2rem; color:var(--gold); font-size:1.3rem; opacity:0; transform:translateX(-8px); transition:opacity 0.3s, transform 0.3s; } .intel-card:hover .intel-arrow { opacity:1; transform:translateX(0); } /* SUBSCRIBE */ .subscribe-section { background:var(--navy-mid); position:relative; overflow:hidden; text-align:center; padding:8rem 5rem; } .subscribe-section::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:900px; height:900px; background:radial-gradient(circle,rgba(var(--c-luxury-gold-rgb),0.055) 0%,transparent 62%); pointer-events:none; } .subscribe-inner { position:relative; z-index:1; max-width:640px; margin:0 auto; } .subscribe-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(2.2rem,4.2vw,3.5rem); color:var(--white); line-height:1.12; margin-bottom:1.1rem; } .subscribe-title em { font-style:italic; color:var(--gold-light); } .subscribe-lead { font-family:'Jost',sans-serif; font-weight:300; font-size:0.95rem; color:var(--text-muted); line-height:1.85; margin-bottom:2.8rem; } .subscribe-form { display:flex; max-width:500px; margin:0 auto 1.3rem; box-shadow:0 8px 48px rgba(var(--c-primary-navy-rgb),0.75); } .subscribe-form input { flex:1; padding:1.05rem 1.5rem; background:var(--navy-light); border:1px solid rgba(var(--c-luxury-gold-rgb),0.28); border-right:none; color:var(--white); font-family:'Jost',sans-serif; font-size:0.9rem; outline:none; transition:border-color 0.3s; } .subscribe-form input::placeholder { color:var(--text-dim); } .subscribe-form input:focus { border-color:rgba(var(--c-luxury-gold-rgb),0.65); } .subscribe-form button { font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; background:var(--gold); color:var(--navy); border:none; padding:1.05rem 2rem; cursor:pointer; transition:background 0.3s; white-space:nowrap; } .subscribe-form button:hover { background:var(--gold-light); } .subscribe-note { font-family:'Jost',sans-serif; font-size:0.72rem; color:var(--text-dim); } .subscribe-note a { color:var(--gold); text-decoration:none; } /* Inline subscribe feedback (on-site form): honest pending / success / error states. */ .subscribe-status { font-family:'Jost',sans-serif; font-size:0.82rem; min-height:1.2em; margin:0.9rem 0 0.2rem; } .subscribe-status.pending { color:var(--text-dim); } .subscribe-status.success { color:var(--gold-light); } .subscribe-status.error { color:var(--ui-error); } .subscribe-platforms { margin-top:3.2rem; display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; } .also-on { font-family:'Cinzel',serif; font-size:0.52rem; letter-spacing:0.25em; color:var(--text-dim); text-transform:uppercase; } /* colour bumped --text-dim -> --text-muted (2026-08-10): found while proving the link-contrast fix — same 2.71:1 AA failure as the footer anchors above, same token, just not one Dan had named. --text-muted (0.62 alpha, the same value .nav-links a already uses) keeps the pill visually quiet without failing AA. */ .platform-pill { font-family:'Cinzel',serif; font-size:0.55rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-muted); border:1px solid rgba(var(--c-luxury-gold-rgb),0.18); padding:0.52rem 1.3rem; text-decoration:none; transition:color 0.3s, border-color 0.3s; } .platform-pill:hover { color:var(--gold); border-color:rgba(var(--c-luxury-gold-rgb),0.45); } /* FOOTER */ footer { background:var(--navy); padding:4rem 5rem 2.5rem; border-top:1px solid rgba(var(--c-luxury-gold-rgb),0.1); } .footer-inner { max-width:1240px; margin:0 auto; /* EVEN, not 1.8fr-then-three-narrow. The old ratio gave the brand a 393px column to hold a 230px tagline — a ~160px hole — and squeezed the three link lists into 218px each, bunched hard right. That is what read as "left-heavy": weight at both ends and a gap where the eye expects rhythm. Four equal columns distribute the sections across the full width instead. Not CENTRED: these are ragged-right link lists, and centring them would stack every list on its own axis so no two items share a left edge — the FT/Bloomberg register this borrows from aligns footer lists, it does not centre them. Distribution fixes the balance; centring would cost scannability to fix it twice. */ display:grid; grid-template-columns:repeat(4, 1fr); gap:2.5rem 3rem; margin-bottom:3rem; } /* THE MARK'S OWN ROW — above the grid, sharing the grid's max-width and centring so it starts on the same left edge as "UK Property Portal" below it rather than floating off it. */ .footer-mark { max-width:1240px; margin:0 auto 2.2rem; } .footer-mark img { height:52px; object-fit:contain; display:block; filter:drop-shadow(0 2px 8px rgba(var(--c-luxury-gold-rgb),0.15)); } /* The slogan sits WITH the mark — one lockup, so it stays identity rather than drifting into a claim. Indented to the mark's optical left edge and dimmed: it labels the mark, it is not an announcement. */ .footer-mark .footer-slogan { margin:0.85rem 0 0; } /* THE BRAND NAME IS NOW A COLUMN HEADING, and is typed as one. It was 0.68rem/0.22em against the h4s' 0.55rem/0.28em. Lifting the logo out aligns the four heading TOPS, but tops are not baselines: at a different size and line-height the type still sat on its own line, ~2px off the other three. Since the mark above now carries the brand statement, this text's job here is to label its column exactly as "Intelligence" labels the next one — so it takes the same type and the baseline is shared by construction, not by a magic number. Same declarations as `.footer-col h4` below; kept as a separate rule because the element is a
in a different parent, and merging the selectors would tie the brand block's markup to the link columns'. */ .footer-brand-name { font-family:'Cinzel',serif; font-size:0.55rem; letter-spacing:0.28em; color:var(--gold); text-transform:uppercase; margin-bottom:1.2rem; } /* OPTION C — the slogan as a wordmark tagline under the mark. Cinzel gold at eyebrow scale, sitting with the brand name rather than over the data. Identity, not a claim. */ .footer-slogan { font-family:'Cinzel',serif; font-size:0.55rem; letter-spacing:0.24em; color:var(--gold); text-transform:uppercase; margin-bottom:0.9rem; opacity:0.75; } /* 30ch, not 230px: the cap exists to keep the line readable, and readability is measured in CHARACTERS, not pixels. At 230px it under-filled the new equal column and reopened the hole the grid change just closed. 30ch tracks the font and fills the column without running long. */ .footer-tagline { font-family:'Jost',sans-serif; font-size:0.82rem; color:var(--text-dim); line-height:1.7; max-width:30ch; } .footer-col h4 { font-family:'Cinzel',serif; font-size:0.55rem; letter-spacing:0.28em; color:var(--gold); text-transform:uppercase; margin-bottom:1.2rem; } /* margin:0 clears the global `ul{margin:0 0 1rem 1.2rem;}` rule (prose bullet-list indent, below) — without it these links sit 1.2rem/19.2px right of their own h4, at every width down to 600px. Was previously reset only inside the <=600px mobile block (see its own note there, now removed as redundant); this had never been true at any wider viewport, including desktop. */ .footer-col ul { list-style:none; margin:0; } .footer-col li { margin-bottom:0.6rem; } /* No colour of its own (2026-08-10, was --text-dim = 2.71:1, failing AA) — falls through to the sitewide `a{color:var(--link)}` floor, white at 19.09:1, same system as every other plain link on the site rather than a special faded treatment nothing else uses. */ .footer-col a { font-family:'Jost',sans-serif; font-size:0.82rem; text-decoration:none; transition:color 0.3s; } .footer-col a:hover { color:var(--gold); } .footer-bottom { max-width:1240px; margin:0 auto; padding-top:1.8rem; border-top:1px solid rgba(var(--c-white-rgb),0.05); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; } .footer-copy { font-family:'Jost',sans-serif; font-size:0.7rem; color:var(--text-dim); } .footer-legal { display:flex; gap:1.8rem; } /* No colour of its own — same fix and same reason as .footer-col a above. */ .footer-legal a { font-family:'Jost',sans-serif; font-size:0.7rem; text-decoration:none; transition:color 0.3s; } .footer-legal a:hover { color:var(--gold); } .footer-disclaimer { max-width:1240px; margin:1.2rem auto 0; font-family:'Jost',sans-serif; font-size:0.66rem; color:rgba(var(--c-light-grey-rgb),0.2); line-height:1.7; } /* ANIMATIONS */ @keyframes fadeUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } } .reveal { opacity:0; transform:translateY(28px); transition:opacity 0.85s ease, transform 0.85s ease; } .reveal.visible { opacity:1; transform:translateY(0); } /* RESPONSIVE */ @media (max-width:1000px) { #navbar { padding:0.6rem 1.5rem; } #navbar.scrolled { padding:0.5rem 1.5rem; } /* Hamburger takes over reachability here: .nav-links used to just be display:none with no way back in (a crawl-orphan/keyboard/mobile dead end). It's still hidden by default, but now as a collapsible dropdown the toggle opens — never a permanent dead end. `nav` is already `position:fixed` (see base rule above), which is itself a positioning context, so `top:100%` here anchors under the bar without any extra positioning hook needed. */ .nav-toggle { display:flex; } .nav-links { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; list-style:none; background:rgba(var(--c-primary-navy-rgb),0.98); backdrop-filter:blur(14px); padding:0.5rem 1.5rem 1.2rem; border-bottom:1px solid rgba(var(--c-luxury-gold-rgb),0.15); } .nav-links.open { display:flex; } .nav-links li { width:100%; } .nav-links a { display:block; padding:0.9rem 0; } .nav-links li:not(:last-child) a { border-bottom:1px solid rgba(248,245,239,0.06); } .nav-links .nav-cta { display:inline-block; margin-top:0.9rem; } /* RENTAL DROPDOWN -> MOBILE ACCORDION. No hover exists on touch, so the desktop hover-reveal above is dead weight here — the caret becomes the ONLY way to open it (base.html's script), and the menu goes from an absolutely-positioned popover to a static, indented, height- animated block nested inside the same row. #nav-links (an ID) is used for the submenu-link overrides below purely for specificity: .nav-links li:not(:last-child) a already sets a border-bottom on every non-last top-level link, including these nested ones, at any depth (a plain .nav-dropdown-menu a class selector can't outrank that rule's own specificity). */ .nav-dropdown { position:static; display:flex; align-items:center; justify-content:space-between; width:100%; } .nav-dropdown-link { flex:1 1 auto; } .nav-dropdown-caret { padding:0.9rem 0 0.9rem 1rem; } .nav-dropdown-menu { position:static; width:100%; max-width:none; margin:0; padding:0; min-width:0; background:none; border:0; backdrop-filter:none; border-radius:0; opacity:1; visibility:visible; pointer-events:auto; transform:none; max-height:0; overflow:hidden; transition:max-height 0.3s ease; } .nav-dropdown.is-open .nav-dropdown-menu { max-height:20rem; } #nav-links .nav-dropdown-menu a { padding:0.7rem 0 0.7rem 1.2rem; font-size:0.66rem; color:var(--text-dim); border-bottom:1px solid rgba(248,245,239,0.04); } #nav-links .nav-dropdown-menu li:last-child a { border-bottom:0; } /* 64, not 60: Ruling 8's floor for the full mark is 64px @1x — below it the gold square's stroke goes sub-pixel and smudges. 60px measures fine in practice (Δ27; the true crossing is 56px, and the stated 64 is a deliberate conservative round-up) — but a system that obeys its own rule everywhere beats one that relies on knowing where the rule is soft. 4px is a cheap way to make the sweep provably clean. The nav-logo-text hides here, so the mark stands alone. */ .nav-logo img { height:64px; width:64px; } .nav-logo-text { display:none; } /* 3.5rem/1.75rem, not 5rem/2.5rem: measured with .brief-page/.section-pad-y (below) as too much air between mobile sections — inter-section gaps ran noticeably looser than desktop's own 7rem:5rem RATIO would predict, adding real scroll distance with no readability gain. Vertical only tightened here; horizontal keeps its own (smaller) proportional cut. Pages that need MORE top clearance than this (the first section under the fixed nav) carry .brief-page, which sets its own padding-top and wins on source order — this rule no longer has to double as both "the general mobile section rhythm" and "nav clearance" at once. */ section, .subscribe-section { padding:3.5rem 1.75rem; } /* .intel-section removed — dead selector */ .intel-grid { grid-template-columns:1fr; } .footer-inner { grid-template-columns:1fr 1fr; gap:2.5rem; } footer { padding:3.5rem 2.5rem 2rem; } .subscribe-platforms { margin-top:2rem; } /* was 3.2rem — same rhythm tightening as the section padding above */ } @media (max-width:600px) { .subscribe-form { flex-direction:column; } .subscribe-form input { border-right:1px solid rgba(var(--c-luxury-gold-rgb),0.28); } .footer-inner { grid-template-columns:1fr; } .footer-bottom { flex-direction:column; text-align:center; } /* ── MOBILE FOOTER (the 1-col stack). Desktop (>600px) is untouched — every rule here is inside this query, so the 4-column distributed footer, its shared heading baseline and the 52px D-small mark are byte-identical above 600px. ────────────────────────────────────────────── */ /* 1. THE MARK — D-full at 72px. Desktop's 52px is below Ruling 8's 64px floor (frame smudges), so it stays frameless D-small. Mobile sizes up past the floor and the 's swaps in logo.png (framed), so the gold border draws cleanly (~1.08px stroke). inline-block so the centring below applies. */ .footer-mark img { height:72px; width:72px; display:inline-block; } /* 2. BREATHING ROOM under the slogan: 2.2rem -> 3.4rem between it and "UK Property Portal". */ .footer-mark { text-align:center; margin-bottom:3.4rem; } /* 3. CENTER all four sections + the mark lockup — headings, links, tagline and the social row. */ .footer-brand, .footer-col { text-align:center; } .footer-tagline { margin-left:auto; margin-right:auto; } .footer-follow ul { justify-content:center; } } /* ===== INTELLIGENCE EXCERPT (on-page brief) ===== */ .intel-brief { position:relative; background:var(--navy); padding:7rem 5rem 6rem; overflow:hidden; } .intel-brief::before { content:''; position:absolute; top:-10%; left:50%; transform:translateX(-50%); width:140%; height:60%; background:radial-gradient(ellipse at center, rgba(var(--c-luxury-gold-rgb),0.07) 0%, transparent 60%); pointer-events:none; } .brief-inner { position:relative; z-index:1; max-width:780px; margin:0 auto; } .brief-eyebrow { font-family:'Cinzel',serif; font-size:0.6rem; letter-spacing:0.4em; color:var(--gold); text-transform:uppercase; text-align:center; margin-bottom:1.4rem; } .brief-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(2.2rem,5vw,var(--t-display-l)); line-height:1.1; color:var(--white); text-align:center; letter-spacing:0.01em; margin-bottom:1rem; } .brief-title em { font-style:italic; color:var(--gold-light); } .brief-meta { font-family:'Jost',sans-serif; font-weight:400; font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-dim); display:flex; align-items:center; justify-content:center; gap:0.9rem; margin-bottom:4rem; flex-wrap:wrap; } .brief-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--gold); opacity:0.6; } .data-strip { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(var(--c-luxury-gold-rgb),0.18); border-bottom:1px solid rgba(var(--c-luxury-gold-rgb),0.18); margin-bottom:4rem; } .data-cell { padding:1.6rem 1rem; text-align:center; border-right:1px solid rgba(var(--c-luxury-gold-rgb),0.18); } .data-cell:last-child { border-right:none; } .data-label { font-family:'Jost',sans-serif; font-size:0.6rem; font-weight:400; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-dim); margin-bottom:0.6rem; } .data-value { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:1.9rem; color:var(--off-white); line-height:1; } .data-delta { font-family:'Jost',sans-serif; font-size:0.7rem; font-weight:400; letter-spacing:0.04em; margin-left:0.3rem; } /* RULING 6 — the up/down COLOURS are retired. The same number means opposite things to different readers: a falling mortgage rate is good news to a landlord, a falling house price is bad news to a seller. Colour must not tell the reader which. Direction is carried by the SIGN, which the delta text already has ("+3.8% yoy"), and emphasis by gold — never by hue. The .up/.down classes REMAIN in the markup (Ruling 2: no class renames); they simply no longer colour anything. Re-adding a green here is re-adding an opinion. */ .data-delta.up, .data-delta.down { color:var(--text-muted); } .intel-item { margin-bottom:3.2rem; } .intel-item:last-of-type { margin-bottom:0; } .item-tag { font-family:'Cinzel',serif; font-size:0.62rem; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:0.7rem; margin-bottom:1rem; } .item-tag::before { content:''; width:22px; height:1px; background:var(--gold); opacity:0.7; } .item-headline { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.5rem,3vw,var(--t-display-m)); line-height:1.2; color:var(--white); margin-bottom:1rem; letter-spacing:0.01em; } .item-headline em { font-style:italic; color:var(--gold-light); } .item-body { font-family:'Jost',sans-serif; font-weight:300; font-size:1.02rem; color:var(--text-muted); line-height:1.85; } .item-body + .item-body { margin-top:1rem; } .item-body strong { color:var(--off-white); font-weight:400; } .lead-figure { display:flex; align-items:baseline; gap:1.1rem; margin:1.6rem 0; padding-left:1.4rem; border-left:2px solid var(--gold); } .lead-figure .fig { font-family:'Cormorant Garamond',serif; font-weight:500; font-style:italic; font-size:3rem; color:var(--gold-light); line-height:0.9; } .lead-figure .fig-text { font-family:'Jost',sans-serif; font-weight:300; font-size:0.92rem; color:var(--text-muted); line-height:1.5; } .item-rule { height:1px; background:rgba(var(--c-luxury-gold-rgb),0.18); margin:3.2rem 0; } .gate { position:relative; } .gate-fade { position:relative; max-height:150px; overflow:hidden; } .gate-fade::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 0%, rgba(var(--c-primary-navy-rgb),0.6) 45%, var(--navy) 92%); } .gate-cta { text-align:center; margin-top:2.2rem; } .gate-line { font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300; font-size:1.3rem; color:var(--off-white); line-height:1.5; max-width:520px; margin:0 auto 0.8rem; } .gate-sub { font-family:'Jost',sans-serif; font-weight:300; font-size:0.9rem; color:var(--text-muted); margin-bottom:2rem; } .gate-sub strong { color:var(--gold-light); font-weight:400; } .gate-note { font-family:'Jost',sans-serif; font-size:0.72rem; color:var(--text-dim); margin-top:1.3rem; letter-spacing:0.04em; } @media (max-width:680px) { .intel-brief { padding:5rem 1.6rem 3rem; } .data-strip { grid-template-columns:repeat(2,1fr); margin-bottom:2.8rem; } .data-cell:nth-child(2) { border-right:none; } .data-cell:nth-child(1), .data-cell:nth-child(2) { border-bottom:1px solid rgba(var(--c-luxury-gold-rgb),0.18); } .data-value { font-size:1.6rem; } /* INTER-BLOCK RHYTHM — desktop's 3.2-4rem gaps between brief items/rules/facts read as long, un-scannable scroll on a phone (a brief page can be 8-10 of these blocks deep). Same order, same elements, just closer together; nothing here changes what a block IS, only the air around it. */ .intel-item { margin-bottom:2.2rem; } .item-rule { margin:2.2rem 0; } .citable-facts { margin-bottom:2.6rem; } .brief-faq { margin-top:2.6rem; padding-top:2rem; } .brief-related { margin-top:2.4rem; padding-top:2rem; } } /* ===== Static asset wiring (was injected via JS in the original) ===== */ .hero-bg { background-image:url('/static/images/banner.jpg'); } /* ===== LEGAL PAGES ===== */ .legal-bar{padding:1.6rem 5rem;border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;} .legal-bar a.home{font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.22em;color:var(--gold);text-transform:uppercase;text-decoration:none;} .legal-bar a.back{font-family:'Jost',sans-serif;font-size:0.72rem;letter-spacing:0.14em;color:var(--text-muted);text-decoration:none;text-transform:uppercase;} .legal-bar a.back:hover{color:var(--gold);} .legal-wrap{max-width:760px;margin:0 auto;padding:5rem 2rem 6rem;} .legal-eyebrow{font-family:'Cinzel',serif;font-size:0.6rem;letter-spacing:0.4em;color:var(--gold);text-transform:uppercase;margin-bottom:1.2rem;} h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.2rem,5vw,var(--t-display-l));color:var(--white);line-height:1.1;margin-bottom:0.6rem;} .updated{font-family:'Jost',sans-serif;font-size:0.78rem;color:var(--text-dim);letter-spacing:0.06em;margin-bottom:3rem;} h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.6rem;color:var(--gold-light);margin:2.8rem 0 0.9rem;} p,li{font-family:'Jost',sans-serif;font-weight:300;font-size:1rem;color:var(--text-muted);} /* SCOPED to .legal-wrap (2026-07-21) — this was written for /privacy and /terms body copy, but as a bare `p` element selector it beat the sitewide `*{margin:0}` reset (an element selector always outranks the universal selector on specificity, regardless of source order) and was silently taxing every

on the site that didn't declare its own margin-bottom: measured on .hero-source, and it also reached .section-lead/.item-body/.subscribe-lead elsewhere on the homepage. Scoping to where it was actually meant to apply removes that leak everywhere else. */ .legal-wrap p{margin-bottom:1rem;} ul{margin:0 0 1rem 1.2rem;} li{margin-bottom:0.5rem;} strong{color:var(--off-white);font-weight:400;} a.inline{color:var(--gold);text-decoration:none;} a.inline:hover{text-decoration:underline;} .fill{color:var(--gold-light);font-style:italic;} .legal-foot{border-top:1px solid var(--hairline);padding:2rem 5rem;text-align:center;font-family:'Jost',sans-serif;font-size:0.72rem;color:var(--text-dim);letter-spacing:0.06em;} @media(max-width:680px){.legal-bar,.legal-foot{padding-left:1.4rem;padding-right:1.4rem;}} /* ===== BRIEF ARCHIVE + BRIEF PAGE ===== */ .brief-page { padding-top:9rem; } .brief-back { display:inline-block; font-family:'Jost',sans-serif; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); text-decoration:none; margin-bottom:2rem; transition:color 0.3s; } .brief-back:hover { color:var(--gold); } .archive-list { display:flex; flex-direction:column; gap:1.4rem; margin-top:3rem; } .archive-card { display:block; text-decoration:none; padding:2rem 2.2rem; background:var(--navy-mid); border:1px solid var(--hairline); transition:border-color 0.4s, transform 0.3s, background 0.4s; } .archive-card:hover { border-color:rgba(var(--c-luxury-gold-rgb),0.5); transform:translateY(-3px); background:var(--navy-light); } .archive-edition { font-family:'Cinzel',serif; font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:0.8rem; } .archive-title { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:1.5rem; color:var(--white); line-height:1.25; margin-bottom:0.7rem; } .archive-title em { font-style:italic; color:var(--gold-light); } .archive-summary { font-family:'Jost',sans-serif; font-weight:300; font-size:0.95rem; color:var(--text-muted); line-height:1.7; margin-bottom:1rem; } .archive-arrow { font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); } @media (max-width:680px) { .brief-page { padding-top:7rem; } .archive-card { padding:1.5rem 1.4rem; } } /* MEMBERS COMING-SOON (members.html, 2026-08-06) — reuses .archive-card's box wholesale and changes exactly one thing: .archive-card is built for clickable cards, so it lifts and brightens on hover. These three roadmap cards are

s with nowhere to go (the products aren't live — that's the point of the page), and a card that animates under the cursor but does nothing when clicked reads as a broken link. Cancelling the affordance is more honest than inventing a destination for it. Nothing else about the card is touched. */ .ma-card { cursor:default; } .ma-card:hover { border-color:var(--hairline); transform:none; background:var(--navy-mid); } /* COUNTY GROUPING (region.html, 2026-08-03) — a heading-only label above a county's cities, NEVER a data value: ONS PIPR has no county tier, so nothing renders here but the name itself. Distinct type from .archive-title (Cormorant, city names) so it reads as a grouping, not another card. */ .county-group { margin-top:2.8rem; } .county-group:first-child { margin-top:0; } .county-heading { font-family:'Cinzel',serif; font-weight:500; font-size:0.85rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; padding-bottom:0.7rem; border-bottom:1px solid var(--hairline); } /* ===== SOCIAL ICONS ===== */ /* THE SOCIAL ROW — side by side, not stacked. Two icon links stacked vertically wasted the column and read as a list of two things rather than a set of handles. They now sit on one row. The `li` still exists (the markup is a real list, and it stays one for a screen reader) — only its box goes inline. The Newsletter link is pushed to its own full-width row: it is a TEXT destination, not a social handle, and letting it flow into the icon row would make "𝕏 Newsletter" read as one item. */ .footer-follow ul { display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; } .footer-follow li { margin-bottom:0; } .footer-follow li:has(> a:not(.social-link)) { flex-basis:100%; margin-top:0.2rem; } .social-link { display:inline-flex; align-items:center; gap:0.5rem; color:var(--gold); text-decoration:none; transition:color 0.3s; } .social-link:hover { color:var(--gold-light); } .social-icon { width:0.95rem; height:0.95rem; flex-shrink:0; fill:currentColor; vertical-align:middle; } /* ===== GEO/AEO: citable facts, FAQ, related editions, archive search ===== */ .citable-facts { margin:0 0 4rem; padding:2rem 2rem 1.4rem; border:1px solid rgba(var(--c-luxury-gold-rgb),0.22); background:linear-gradient(180deg, rgba(var(--c-luxury-gold-rgb),0.05), transparent); border-radius:2px; } .cf-title { font-family:'Cinzel',serif; font-size:0.72rem; font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); margin-bottom:0.5rem; } .cf-sub { font-family:'Jost',sans-serif; font-weight:300; font-size:0.82rem; color:var(--text-dim); margin-bottom:1.4rem; } .cf-list { display:grid; gap:0; } .cf-row { display:grid; grid-template-columns:1fr auto; grid-template-areas:"label value" "src src"; align-items:baseline; padding:0.9rem 0; border-top:1px solid rgba(var(--c-luxury-gold-rgb),0.14); } .cf-row:first-child { border-top:none; } .cf-label { grid-area:label; font-family:'Jost',sans-serif; font-weight:400; font-size:0.9rem; letter-spacing:0.02em; color:var(--off-white); } .cf-value { grid-area:value; margin:0; font-family:'Cormorant Garamond',serif; font-weight:500; font-style:italic; font-size:1.5rem; color:var(--gold-light); line-height:1; text-align:right; } .cf-src { grid-area:src; margin:0.35rem 0 0; font-family:'Jost',sans-serif; font-weight:300; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); } /* All four padding sides declared (was padding-top only): the other three fell through to the bare `section{padding:7rem 5rem}` element rule at every width — measured 80px/112px it never asked for, narrowing the FAQ block inside its own content column instead of running full width like the rest of the brief. See brief-related below for a related, worse instance of the same root cause (a bare-element rule leaking through an incomplete override). */ .brief-faq { margin:4rem 0 0; padding:3rem 0 0; border-top:1px solid rgba(var(--c-luxury-gold-rgb),0.18); } .faq-title { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.4rem,3vw,var(--t-display-m)); color:var(--white); margin-bottom:1.6rem; letter-spacing:0.01em; } .faq-item { margin-bottom:1.6rem; } .faq-q { font-family:'Jost',sans-serif; font-weight:500; font-size:1rem; color:var(--off-white); margin-bottom:0.4rem; letter-spacing:0.01em; } .faq-a { font-family:'Jost',sans-serif; font-weight:300; font-size:0.98rem; color:var(--text-muted); line-height:1.75; } /* This is a