/* ========================================================================== Bloomsbury Publication — Layout System -------------------------------------------------------------------------- Single source of truth for page geometry: container width, gutters, section rhythm and heading pattern. LOAD ORDER: this file is loaded LAST in (after theme-uplift.css and after any per-page $extraCss) so it is the final authority on geometry. Page stylesheets keep owning colour/decoration; they must not set container widths or section margins any more. MIGRATION: pages are moved onto this system one at a time. A page is "migrated" once its sections use .bp-section + .bp-shell. Legacy selectors for pages not yet migrated are left untouched. Migrated: home, pricing, contact, about, get-started, author-questionnaire, sitemap, terms, privacy, and all 10 service pages. ========================================================================== */ :root { /* --- Horizontal rhythm ------------------------------------------------ */ /* One gutter, one content measure. Nothing else may define these. */ --bp-gutter: clamp(1.125rem, 4vw, 2.5rem); --bp-measure: 1200px; /* content column */ --bp-measure-narrow: 780px; /* long-form prose */ --bp-measure-text: 62ch; /* single paragraph run */ /* Total shell width = content + both gutters. Used by .bp-shell, the nav pill and the footer card so every left edge on the page lines up. */ --bp-shell: calc(var(--bp-measure) + (var(--bp-gutter) * 2)); --bp-shell-narrow: calc(var(--bp-measure-narrow) + (var(--bp-gutter) * 2)); /* Heading + copy measures. Every section heading wraps at the same width, so no title runs the full 1200px while its neighbour wraps at 700. */ --bp-measure-title: 44rem; /* section h2 */ --bp-measure-lead: 36rem; /* section intro paragraph */ /* Kicker / eyebrow. One token drives the hero badge and every section top-heading, so they are always the same size. */ --bp-eyebrow-size: 0.875rem; /* 14px */ --bp-eyebrow-tracking: 0.08em; /* --- Vertical rhythm -------------------------------------------------- */ --bp-section-y: clamp(3rem, 5.5vw, 5rem); /* between sections */ --bp-section-y-tight: clamp(2rem, 3.5vw, 3rem); --bp-stack-1: 0.5rem; /* label -> heading */ --bp-stack-2: 1rem; /* heading -> lead */ --bp-stack-3: 2rem; /* head block -> body */ --bp-stack-4: 3rem; /* body -> section CTA */ --bp-cta-gap: 2rem; /* space above any section CTA */ /* --- Chrome ----------------------------------------------------------- */ --bp-nav-pill-h: 68px; --bp-nav-pad-y: 14px; /* Balanced on both axes; 12px + ~20px line box = 44px hit target. */ --bp-nav-item-pad: 12px; /* Total space the sticky nav occupies. Hero pulls up by exactly this. */ --bp-nav-offset: calc(var(--bp-nav-pill-h) + (var(--bp-nav-pad-y) * 2)); } @media (max-width: 768px) { :root { --bp-nav-pill-h: 58px; --bp-nav-pad-y: 10px; } } /* ========================================================================== Primitives ========================================================================== */ /* Horizontal container. Every piece of page content sits in one of these. */ .bp-shell { width: 100%; max-width: var(--bp-shell); margin-inline: auto; padding-inline: var(--bp-gutter); } .bp-shell--narrow { max-width: var(--bp-shell-narrow); } .bp-shell--flush { padding-inline: 0; } /* Vertical rhythm. Sections carry padding, never margin. */ .bp-section { padding-block: var(--bp-section-y); } .bp-section--tight { padding-block: var(--bp-section-y-tight); } /* Smart spacing: two consecutive sections that sit on the same surface would otherwise stack padding-bottom + padding-top. Drop the lower one's top so the gap between any two sections is exactly one --bp-section-y. Sections with their own background use data-surface="tint" and keep both. */ .bp-section[data-surface="page"] + .bp-section[data-surface="page"] { padding-block-start: 0; } /* Last section before the footer should not double up with footer padding. */ .bp-section:last-of-type { padding-block-end: var(--bp-section-y); } /* ========================================================================== Section heading pattern (kicker -> h2 -> lead) Replaces the old
kicker so heading levels stay sequential. ========================================================================== */ .section-head { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; margin-bottom: var(--bp-stack-3); } .section-head--start { align-items: flex-start; text-align: left; } .section-eyebrow, .section-eyebrow.section-eyebrow { margin: 0 0 var(--bp-stack-1); color: var(--bp-accent); font-family: var(--bp-font-sans); font-size: var(--bp-eyebrow-size); font-weight: 600; letter-spacing: var(--bp-eyebrow-tracking); text-transform: uppercase; line-height: 1.4; } .section-title, .section-title.section-title { max-width: var(--bp-measure-title); margin: 0; font-family: var(--bp-font-display); font-size: clamp(1.85rem, 3.4vw, 2.6rem); font-weight: 650; line-height: 1.18; letter-spacing: -0.02em; color: var(--bp-ink); text-wrap: balance; } /* Accent half of a two-tone heading: same face and weight as the heading, only the colour changes. It used to switch to a different family. */ .section-title .span-color { color: var(--bp-accent) !important; font-family: inherit !important; font-weight: inherit !important; } .section-lead, .section-lead.section-lead { max-width: var(--bp-measure-lead); margin: var(--bp-stack-2) 0 0; font-size: 1.02rem; line-height: 1.7; color: var(--bp-ink-soft); text-wrap: pretty; } .section-lead + .section-lead { margin-top: 0.7rem; } /* Card/tile heading — one size for every h3 that sits inside a section. Wrapped in :where() so it contributes ZERO specificity: it is a default, and any component class must be able to override it. */ .section-subtitle, :where(.bp-section h3) { font-family: var(--bp-font-sans); font-size: clamp(1.1rem, 1.6vw, 1.28rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--bp-ink); } /* Body copy inside sections. This was `.bp-section p, .bp-section li` — specificity (0,1,1), which beat every single-class component rule below it. It was silently forcing .section-eyebrow, .section-lead, .plan-card__col-title, .plan-card__tagline, .plan-card__saving, .bp-form__lead, .bp-form__hint, .bp-form__privacy and .plan-grid__footnote all to 0.98rem. :where() drops it to (0,0,0) so it is a true default. */ :where(.bp-section p, .bp-section li) { font-size: 0.98rem; line-height: 1.65; } /* --bp-cta-gap: the single space above any section CTA, site-wide. It was 32 / 40 / 48px in three different places on one page. */ .section-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: var(--bp-cta-gap); } /* ========================================================================== Accessibility helpers ========================================================================== */ .visually-hidden, .visually-hidden.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 2000; padding: 10px 18px; border-radius: 0 0 var(--bp-radius-sm) var(--bp-radius-sm); background: var(--bp-primary); color: #fff; font-family: var(--bp-font-sans); font-weight: 600; text-decoration: none; transition: transform 160ms var(--bp-ease); } .skip-link:focus-visible { transform: translate(-50%, 0); color: #fff; } /* Scroll-to-anchor must clear the sticky nav. */ :where(main) :target, [id][data-scroll-target] { scroll-margin-top: calc(var(--bp-nav-offset) + 1rem); } /* ========================================================================== Chrome: nav pill + footer card share the shell width ========================================================================== */ nav { padding-block: var(--bp-nav-pad-y); } #nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100% - (var(--bp-gutter) * 2), var(--bp-shell)); height: var(--bp-nav-pill-h); padding-inline: var(--bp-nav-item-pad); } /* Even inset all round instead of 6px top/bottom vs 16px sides. */ .dropdown-content { padding: 6px; min-width: 232px; } .dropdown-content li a { display: block; padding: 9px 10px; border-radius: 6px; font-size: 0.92rem; line-height: 1.35; } /* hero-home.css previously set its own nav width/padding — keep it aligned. */ body:has(.hero--editorial) nav { padding-block: var(--bp-nav-pad-y); } body:has(.hero--editorial) #nav-inner { width: min(100% - (var(--bp-gutter) * 2), var(--bp-shell)); } /* --- Nav items ------------------------------------------------------------ Links and the Services