/** * PAL Neighbourhood Guide — Stylesheet * Property Around London * Based on Prototype F design system * * Version: 2.11.0 * Last updated: 18 May 2026 * * v2.11.0 2026-05-18 Editorial Verdict block visual hierarchy tightened * after the v3.4.0 template flip. The h3 "Who's * {Name} for?" was too prominent and the inner h4 * advisory headings ("{Area} is likely to suit you * if:", "Look elsewhere if you:", "The Real * Picture") read as buried because they had no * scoped rule and inherited a near-body-text size. * Flipped the hierarchy: section h3 now matches the * restrained Future Outlook / Value Assessment h4 * style (Spectral 600 / heading-md, padding below), * while the inner advisory h4s step up to * heading-lg with deliberate 32px / 16px vertical * rhythm so each conditional block reads as its * own sub-section. New rules in section 14a-iv. * * v2.10.0 2026-05-17 Sticky TOC restored. `.pal-guide` and `html/body` * changed from `overflow-x: hidden` to `overflow-x: clip`. * `hidden` silently kills `position: sticky` on every * descendant (CSS Overflow L3 spec); `clip` is the * modern equivalent that clips visually without * creating a new scrolling context. iOS Safari * horizontal-overflow defensive behaviour from * v2.8.4 is preserved — `clip` clips identically. * * Refactored: 14 April 2026 * Changes from v1: * - Merged March 2026 patch into main body (no more duplicate selectors) * - Merged duplicate :root blocks into single token source * - Introduced design tokens for typography, colour, spacing, shadows * - Fixed border-radius: 50 bug (→ 50%) * - Fixed shadow scale so sm < md < lg < xl genuinely progresses * - Replaced ~60 hardcoded hex greys with semantic colour tokens * - Replaced ad-hoc font sizes with type-scale tokens * - Replaced ad-hoc spacing with spacing-scale tokens * - Reduced !important from 63 → specificity strategy on .pal-guide wrapper * - Standardised breakpoints to 3 values (480 / 768 / 900) * * Breakpoints: * --bp-phone: 480px (single-column everything) * --bp-tablet: 768px (2-col grids collapse, school columns stack) * --bp-desktop: 900px (sidebar hides, main layout stacks) */ /* ============================================================ 0. DESIGN TOKENS ============================================================ */ :root { /* ── PAL Palette ── */ --pal-navy: #1a2332; --pal-green: #2d5f3f; --pal-cream: #f8f6f1; --pal-red: #c44536; --pal-blue: #4a7c8c; --pal-gold: #d4a574; /* Derived tints */ --pal-navy-dark: #243044; --pal-green-light: rgba(45,95,63,0.08); --pal-blue-light: rgba(74,124,140,0.15); --pal-gold-light: rgba(212,165,116,0.12); --pal-red-light: rgba(196,69,54,0.08); /* Crime signal colours (merged from separate :root block) */ --pal-signal-green: #3d7c4a; --pal-signal-amber: #e6a23c; --pal-signal-red: #d85149; /* ── Semantic Text Colours ── */ --text-heading: var(--pal-navy); /* Headings, strong text */ --text-primary: #2c3e50; /* Dark body text, input text */ --text-body: #5a6a72; /* Standard body copy */ /* v2.9.0 (11 May 2026) — WCAG AA contrast fix. --text-muted was #6c757d (4.34:1 on cream) and --text-caption was #95a5a6 (2.37:1 on cream) — both failed WCAG AA 4.5:1. The body p default in this stylesheet uses --text-muted, so every paragraph on every guide was failing legal accessibility minimums. Darkened both tokens to AA-passing values; visual hierarchy below body kept by leaving caption slightly lighter than muted/body. */ --text-muted: #5a6a72; /* Secondary body, labels — 5.20:1 on cream (was #6c757d / 4.34:1) */ --text-caption: #647078; /* Captions, metadata, sources — 4.71:1 on cream (was #95a5a6 / 2.37:1) */ --text-faint: #b0b8c4; /* Disclaimers, placeholders — NOTE: still <4.5:1, only acceptable for non-essential text */ --text-white-high: rgba(255,255,255,0.92); /* White text on dark bg */ --text-white-mid: rgba(255,255,255,0.7); /* Muted white on dark bg */ --text-white-low: rgba(255,255,255,0.5); /* Faint white on dark bg */ /* ── Typography Scale ── */ --font-display: 'Spectral', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Heading sizes */ --heading-xl: 1.5rem; /* Section titles */ --heading-lg: 1.2rem; /* Sub-section headings */ --heading-md: 1.05rem; /* Card headings, sub-headings */ /* v2.9.1 (11 May 2026) — P0-2 from the 11 May Wwai Lexicon audit. --text-base was 0.92rem (14.72px), below the 16px modern body baseline. Lifted to 1rem; --heading-sm bumped in step from 0.9rem to 1.05rem so sidebar headings don't end up smaller than the body they introduce (they remain visually distinct via Spectral serif + weight 600 vs Inter regular on body). --text-sm and below intentionally left alone so card descriptions and labels read as a clearer step below body. */ --heading-sm: 1.05rem; /* Sidebar headings, small titles — was 0.9rem; lifted to keep above body */ /* Body text sizes */ --text-base: 1rem; /* Standard body copy — was 0.92rem (14.72px); now 16px (modern baseline) */ --text-sm: 0.85rem; /* Compact text, card descriptions */ --text-xs: 0.78rem; /* Small labels, legend items */ --text-xxs: 0.72rem; /* Source citations, fine print */ --text-tiny: 0.65rem; /* Badges, disclaimers */ /* Data/display sizes */ --data-hero: 2.2rem; /* Hero price, big stat */ --data-lg: 1.5rem; /* Price cards, commute times */ --data-md: 1.4rem; /* Stat values */ --data-sm: 1.15rem; /* Budget tabs, inline data */ /* Line heights */ --lh-tight: 1.1; /* Display numbers, hero text */ --lh-snug: 1.35; /* Headings */ --lh-normal: 1.6; /* UI text, captions */ --lh-relaxed: 1.75; /* Body copy */ /* ── Spacing Scale ── */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-7: 2rem; /* 32px */ --sp-8: 2.5rem; /* 40px */ --sp-9: 3rem; /* 48px */ /* ── Borders & Shadows ── */ --border-subtle: 1px solid rgba(26,35,50,0.04); --border-light: 1px solid rgba(26,35,50,0.06); --border-medium: 1px solid rgba(26,35,50,0.10); /* Shadow scale: sm < md < lg < xl (fixed — v1 had md > lg) */ --shadow-sm: 0 1px 3px rgba(26,35,50,0.03); --shadow-md: 0 2px 4px rgba(26,35,50,0.03), 0 8px 20px rgba(26,35,50,0.05); --shadow-lg: 0 4px 8px rgba(26,35,50,0.04), 0 16px 40px rgba(26,35,50,0.07); --shadow-xl: 0 4px 8px rgba(26,35,50,0.08), 0 12px 28px rgba(26,35,50,0.12); /* ── Radii ── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 9999px; /* ── Easing ── */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* ── Section Anchor Colours ── */ --anchor-executive: var(--pal-navy); --anchor-prices: var(--pal-gold); --anchor-schools: var(--pal-green); --anchor-transport: var(--pal-blue); --anchor-crime: var(--pal-red); --anchor-council: var(--pal-navy); --anchor-community: var(--pal-green); --anchor-verdict: var(--pal-gold); } /* ============================================================ 1. BASE RESET & GLOBAL ============================================================ Specificity strategy: all rules scoped under .pal-guide or .pal-guide.pal-guide (double-class) to outweigh inherited parent-theme globals without needing !important. ============================================================ */ .pal-guide * { margin: 0; padding: 0; box-sizing: border-box; } .pal-guide { scroll-behavior: smooth; } .pal-guide { font-family: var(--font-body); font-size: 16px; color: var(--text-primary); background: var(--pal-cream); /* v2.10.0 (17 May 2026) — Switched from `overflow-x: hidden` to `overflow-x: clip`. The `hidden` variant silently kills `position: sticky` on every descendant because it creates a new scrolling context (per CSS Overflow Module Level 3). `clip` has identical visual clipping behaviour but does NOT create a new scrolling context, so the sticky TOC sidebar (`.pal-guide-sidebar`, `position: sticky; top: 75px`) now actually sticks while the user scrolls. The iOS Safari horizontal-scale defensive fix from v2.8.4 is preserved — `clip` clips horizontal overflow exactly the same way `hidden` did. Browser support: Chrome 90+, Firefox 81+, Safari 16+, Edge 90+ — universal by 2026. */ overflow-x: clip; line-height: var(--lh-relaxed); } /* v2.8.4 (24 Apr 2026) — Defensive html/body width pinning. Background: iOS Safari has a legacy behaviour where, if a page ever renders with horizontal content > viewport width, Safari silently applies a scale-to-fit factor (typically 0.9x) to make the page fit. That scale gets cached per-domain and persists across page loads until the user clears website data — even AFTER the overflow source is removed. Result: a stubborn ~39px empty strip on the right side of every section, visible only on iOS Safari. These rules pin html and body to exactly the viewport width so there is no room for any element to accidentally re-introduce horizontal overflow in the future. Paired with the Deploy E min-width:0 fix (line ~400) and the viewport-meta hardening in single-neighborhoods.php. */ html, body { width: 100%; max-width: 100vw; /* v2.10.0 (17 May 2026) — `clip` instead of `hidden` for the same sticky-positioning reason documented above on `.pal-guide`. The iOS Safari horizontal-overflow defensive behaviour is preserved because `clip` clips overflow identically to `hidden`. */ overflow-x: clip; margin-left: 0; margin-right: 0; } /* ── Double-class specificity override for body text ── This single block replaces the ~40 !important flags that were scattered across .pal-section-text, .pal-section p, etc. */ .pal-guide.pal-guide p, .pal-guide.pal-guide li, .pal-guide.pal-guide td, .pal-guide.pal-guide th { font-size: var(--text-base); color: var(--text-muted); font-family: var(--font-body); line-height: var(--lh-relaxed); } .pal-guide.pal-guide p, .pal-guide.pal-guide li { margin-bottom: var(--sp-3); } .pal-guide.pal-guide strong { color: var(--text-primary); } /* Section intro/body text — inherits from the global reset above */ .pal-section-text { margin-bottom: var(--sp-4); } /* Grain texture overlay */ .pal-guide.grain::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } /* ============================================================ 2. NAVIGATION ============================================================ */ .pal-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: var(--sp-3) var(--sp-7); background: rgba(248,246,241,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: var(--border-light); display: flex; align-items: center; justify-content: space-between; } .pal-nav-logo { font-family: var(--font-display); font-weight: 700; font-size: var(--sp-4); color: var(--pal-navy); text-decoration: none; } .pal-nav-logo:hover { color: var(--pal-green); } .pal-breadcrumb { font-size: var(--text-xs); color: var(--text-caption); display: flex; gap: 0.4rem; align-items: center; } .pal-breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; } .pal-breadcrumb a:hover { color: var(--pal-green); } .pal-breadcrumb a:focus-visible { outline: 2px solid var(--pal-green); outline-offset: 2px; } .pal-breadcrumb-sep { color: #d0d0d0; } .pal-breadcrumb-current { color: var(--text-primary); font-weight: 500; } /* ============================================================ 3. HERO ============================================================ */ .pal-hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end; overflow: hidden; margin-top: 50px; /* v2.8.2 (24 Apr 2026) — Fallback background so a broken hero image doesn't leave a 555px cream void on mobile. Behind the image itself. */ background: var(--pal-navy, #1a2332); } .pal-hero-img { position: absolute; inset: 0; background: var(--pal-navy, #1a2332); } .pal-hero-img img { width: 100%; height: 100%; object-fit: cover; } .pal-hero-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 25%, transparent 45% ); z-index: 1; pointer-events: none; } .pal-hero-content { position: relative; z-index: 2; padding: var(--sp-9) var(--sp-9) var(--sp-8); max-width: 800px; text-shadow: 0 2px 16px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.6), 0 0 40px rgba(0,0,0,0.3); } .pal-hero-badges { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; } .pal-h-badge { padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 600; } .pal-h-badge--zone { background: rgba(74,124,140,0.8); color: white; } .pal-h-badge--borough { background: rgba(26,35,50,0.8); color: white; } .pal-h-badge--rating { background: rgba(45,95,63,0.8); color: white; } .pal-h-badge--price { background: rgba(212,165,116,0.8); color: white; } .pal-h-badge--read { background: rgba(90,106,114,0.8); color: white; } .pal-hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 600; color: white; line-height: 1.08; letter-spacing: -0.03em; margin-bottom: var(--sp-3); } .pal-hero h1 .pal-postcode { font-size: 0.45em; font-weight: 500; vertical-align: middle; background: rgba(255,255,255,0.12); padding: 0.15em 0.5em; border-radius: 6px; margin-left: var(--sp-2); letter-spacing: 0.02em; } .pal-hero-sub { font-family: var(--font-display) !important; font-size: clamp(1.1rem, 1.8vw, 1.45rem) !important; font-weight: 700 !important; color: #ffffff !important; line-height: 1.2 !important; max-width: 700px; letter-spacing: -0.02em; margin-bottom: 0; } .pal-hero-meta { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .pal-hero-updated { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 600; background: rgba(45,95,63,0.8); color: white; margin: 0; } .pal-hero-updated .dot { width: 5px; height: 5px; border-radius: 50%; background: #6fcf8d; } /* ============================================================ 4. EXECUTIVE SUMMARY ============================================================ */ .pal-exec { max-width: 1100px; margin: -2rem auto 0; padding: 0 var(--sp-7); position: relative; z-index: 3; } .pal-exec-card { background: white; border-radius: var(--radius-xl); padding: var(--sp-8); border: var(--border-subtle); box-shadow: var(--shadow-xl); } .pal-exec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-7); padding-bottom: var(--sp-4); border-bottom: 3px solid var(--anchor-executive); } .pal-exec-header h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--text-heading); } .pal-verdict-badge { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: 600; color: var(--pal-gold); } /* Stat grid */ .pal-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-7); } .pal-stat-box { text-align: center; padding: var(--sp-5) var(--sp-3); background: var(--pal-cream); border-radius: var(--radius-md); transition: transform 0.3s var(--ease-bounce); } .pal-stat-box:hover { transform: translateY(-2px); } .pal-stat-box:focus-visible { outline: 2px solid var(--pal-green); outline-offset: 2px; } .pal-stat-icon { font-size: var(--data-md); margin-bottom: 0.4rem; } .pal-stat-val { font-family: var(--font-mono); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; color: var(--pal-gold); letter-spacing: -0.02em; } .pal-stat-lbl { font-size: var(--text-xs); font-weight: 600; color: var(--text-body); margin-top: var(--sp-1); text-transform: uppercase; letter-spacing: 0.06em; } /* Two-column exec narrative */ .pal-exec-narrative { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); margin-bottom: var(--sp-7); } .pal-exec-narrative-col h3 { font-family: var(--font-display); font-size: var(--sp-4); font-weight: 600; color: var(--text-heading); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); } .pal-exec-narrative-col p { font-size: var(--text-base); color: var(--text-muted); line-height: var(--lh-relaxed); } /* Key strengths / considerations */ .pal-exec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); } .pal-exec-col h3 { font-family: var(--font-display); font-size: var(--sp-4); font-weight: 600; color: var(--text-heading); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); } .pal-guide.pal-guide .pal-exec-col ul { list-style: none; padding-left: 0; margin: 0; } .pal-guide.pal-guide .pal-exec-col li { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; padding: 0.35rem 0 0.35rem var(--sp-6); position: relative; list-style: none; } .pal-guide.pal-guide .pal-exec-col li::before { content: ''; position: absolute; left: 0; top: 0.85em; width: 7px; height: 7px; border-radius: 50%; } .pal-exec-col li p { margin: 0; } .pal-exec-col li strong { font-weight: 600; } .pal-strengths li::before { background: var(--pal-green); } .pal-considerations li::before { background: var(--pal-red); } /* ============================================================ 5. MAIN LAYOUT (content + sidebar) ============================================================ */ .pal-guide-layout { max-width: 1100px; margin: 0 auto; padding: var(--sp-9) var(--sp-7); display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-9); } /* v2.8.3 (24 Apr 2026) — CSS Grid min-width fix. Grid items (main, aside) default to `min-width: auto`, which means they refuse to shrink below their content's intrinsic minimum width. On mobile, any nested element with non-wrapping text (e.g. the budget tab bar, a data table, a long unbreakable string) pushes `main` to ~654px on a 428px viewport — the `1fr` track in grid-template-columns can't enforce the narrower size. Result: sections visually clip on the right edge because overflow-x:hidden on .pal-guide just hides the excess. Setting min-width:0 tells the grid item it IS allowed to shrink, so `1fr` actually means "whatever column width the grid says" rather than "at least my content's natural width". Verified live 24 Apr 2026: main goes from 654px → 396px on a 428px viewport. */ .pal-guide-layout > main, .pal-guide-layout > aside { min-width: 0; } /* ============================================================ 6. TABLE OF CONTENTS (sticky sidebar) ============================================================ STICKY FIX (Apr 2026): `position: sticky` must be on the sidebar