/* public/css/coutts-system.css ============================================================================ COUTTS CONSULTANTS — SITE-WIDE DESIGN SYSTEM (Stage 4A) ---------------------------------------------------------------------------- ONE definition of type, spacing, proportion and component geometry, consumed by every page stylesheet. WHY THIS FILE EXISTS, AND WHY THE PREVIOUS ATTEMPT DID NOT WORK ---------------------------------------------------------------------------- A global type scale already existed in tl.css (--fs-hero … --fs-micro) and a density scale alongside it (--coutts-section-*, --coutts-gap-*). The audit found that of 679 font-size declarations across the 14 stylesheets, exactly 10 used it — 1%. tl.css, the file that DEFINES the scale, used it for 10 of its own 301 declarations. The system was real, and nothing inherited it. Worse, marketplace.css already referenced a --cx-* namespace in eight places (--cx-sans, --cx-navy, --cx-ink, --cx-muted, --cx-line, --cx-paper, --cx-gold-ink, --cx-gold-soft) and that namespace was DEFINED NOWHERE in the codebase, so all eight silently resolved to their inline fallbacks. This file therefore adopts --cx-* as the canonical namespace: it activates the references marketplace.css already carries, and every other page stylesheet now derives its local variables from these tokens instead of restating literal values. That is the mechanism by which the pages actually inherit the system rather than merely coexisting with it (§23). HOW THE CASCADE IS ARRANGED ---------------------------------------------------------------------------- coutts-system.css defines --cx-* (this file) tl.css maps --fs-*, --coutts-* → --cx-* nav.css maps --cc-* → --cx-* footer.css maps --f-* → --cx-* page stylesheets map --kc-*, --svc-*, --jx-*, --ml-*, --mp-*, --l-*, --kins-*, --kli-* → --cx-* The page-local names are kept deliberately. They are referenced 1,314 times across the stylesheets; rewriting those call sites would be a far larger and riskier change than redefining the ~120 places the names are DECLARED. The local names now behave as aliases, so a change here reaches all 1,314. WHAT THIS FILE DELIBERATELY DOES NOT DO ---------------------------------------------------------------------------- It sets no colours on elements, no layout, and no component rules. It is tokens only. Stage 4A is standardisation, not redesign (§20), so nothing here can move a section, change an image, or restyle a hero. Brand COLOUR values are tokenised but intentionally NOT unified — the audit found three different golds (#D4AF37, #C9A227, #8A6E12) and four navies in active use, and reconciling them changes the appearance of approved pages. Those are listed in the Stage 4A report for a decision rather than being silently changed here. ============================================================================ */ :root { /* ------------------------------------------------------------------------ 1. TYPEFACE (§2) ------------------------------------------------------------------------ The site loads exactly two families (layouts/app.blade.php): Manrope 500/600/700 display — headings Inter 400/500/600 body, UI, labels The audit found six page types NOT using either. service-category.css, jurisdictions.css, listing.css, legal.css, footer.css and marketplace.css each declared their own stack beginning -apple-system / system-ui, so Services, Jurisdictions, Listing, Legal, Marketplace pages and the footer rendered in the operating system's UI font — San Francisco on macOS, Segoe UI on Windows — while Home, Knowledge and the navigation rendered in Inter and Manrope. That is the single largest reason the pages read as separate websites, and it is invisible in code review because every one of those stacks looks like a perfectly reasonable font stack on its own. --cx-sans is the ONE body/UI stack and --cx-display the ONE heading stack. The system fonts remain, as fallbacks, after the brand fonts. ---------------------------------------------------------------------- */ --cx-display: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --cx-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Long-form editorial serif. The ONLY sanctioned serif, used for Insight and Guide running prose, where knowledge.css already established it. It is not a fallback for anything — see --cx-display, which previously had `serif` as its fallback in 33 tl.css rules, meaning a Manrope load failure silently rendered those headings in Times. */ --cx-serif: 'Iowan Old Style', 'Charter', 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif; /* ------------------------------------------------------------------------ 2. TYPE SCALE (§3, §4, §19) ------------------------------------------------------------------------ 150 distinct font-size values were in use. They were not 150 intentions: clustering them showed roughly eleven, with the rest being drift of a hundredth of a rem either side (.82/.84/.85/.86 all appear, 91 times between them). The scale below is built FROM those clusters, so adopting it moves most elements by a hundredth of a rem or not at all. It is not a new proportion imposed on approved pages. Fluid where the size is large enough for viewport scaling to matter; fixed below that, because clamping small text produces sub-pixel sizes that render inconsistently and can fall under the legibility floor. ---------------------------------------------------------------------- */ /* Display — hero titles only. Page H1s must NOT use these (§3). */ --cx-fs-display: clamp(1.75rem, 3.4vw, 2.6rem); --cx-fs-hero: clamp(1.6rem, 2.8vw, 2.1rem); /* Headings */ --cx-fs-h1: clamp(1.35rem, 2.45vw, 1.8rem); --cx-fs-h2: clamp(1.15rem, 1.85vw, 1.42rem); --cx-fs-h3: clamp(1.02rem, 1.45vw, 1.12rem); --cx-fs-h4: .98rem; /* Body */ --cx-fs-lead: 1.05rem; /* standfirsts, section intros */ --cx-fs-body: .94rem; /* default running copy */ --cx-fs-sm: .88rem; /* dense copy, card descriptions */ --cx-fs-xs: .84rem; /* the .82–.86 cluster — 91 declarations used it */ /* Card titles are their own role (§10 lists card heading size explicitly). Without this token the .82rem card titles had to round to .88 or .78, either of which is a visible change to approved cards. */ --cx-fs-card-title: var(--cx-fs-xs); /* Utility. --cx-fs-meta is the FLOOR for anything a visitor must read. See the legibility note at section 3. */ --cx-fs-meta: .78rem; /* dates, reading time, counts */ --cx-fs-label: .74rem; /* eyebrows, badges, uppercase labels */ --cx-fs-micro: .72rem; /* smallest sanctioned size — 11.5px */ /* Forms. 1rem is not a style choice: below 16px, iOS Safari zooms the viewport on focus and the visitor is left scrolled sideways. */ --cx-fs-input: 1rem; --cx-fs-form-label: .875rem; /* ------------------------------------------------------------------------ 3. LINE HEIGHT (§5) ------------------------------------------------------------------------ 31 distinct values were in use. Five are enough. --cx-lh-display is 1.15 rather than the 1.05–1.1 found on some hero rules: §5 forbids excessively tight leading on large headings, and at 2.6rem a 1.05 multiplier collides ascenders and descenders as soon as a jurisdiction name wraps to two lines. ---------------------------------------------------------------------- */ --cx-lh-display: 1.15; --cx-lh-heading: 1.25; --cx-lh-snug: 1.4; /* card titles, buttons, navigation */ --cx-lh-body: 1.6; /* default running copy */ --cx-lh-relaxed: 1.75; /* long-form Guide and Insight prose */ /* ------------------------------------------------------------------------ 4. SPACING (§6, §7, §19) ------------------------------------------------------------------------ A 4px-based scale. Named by size, not by purpose, so the same token can serve a card's padding and a grid's gap without one being wrong. ---------------------------------------------------------------------- */ --cx-space-1: 4px; --cx-space-2: 8px; --cx-space-3: 12px; --cx-space-4: 16px; --cx-space-5: 20px; --cx-space-6: 24px; --cx-space-8: 32px; --cx-space-10: 40px; --cx-space-12: 48px; --cx-space-16: 64px; --cx-space-20: 80px; /* Vertical rhythm between major sections (§7). Fluid, so the gap between sections shrinks on a phone without every section needing its own media query. */ --cx-section-compact: clamp(24px, 3.2vw, 32px); --cx-section-standard: clamp(32px, 4.5vw, 48px); --cx-section-feature: clamp(40px, 6vw, 64px); /* Paragraph rhythm (§6). One value, so prose reads identically whether it is in a Guide, an Insight, a listing description or a legal page. */ --cx-paragraph-gap: 1em; /* Distance from a section heading to the copy beneath it, and from that copy to the content. The predictable relationship §7 asks for. */ --cx-heading-gap: var(--cx-space-3); --cx-intro-gap: var(--cx-space-6); /* ------------------------------------------------------------------------ 5. CONTENT WIDTH (§8, §9) ------------------------------------------------------------------------ --cx-container is the site's standard measure. It is 1180px because that is already what the footer, marketplace, Speak to Coutts, Guides, Jurisdictions and Legal pages use — it is the existing majority, not a new decision. --cx-container-wide (1520px) exists ONLY for the Home Page, which is an approved reference design (§20) built around four-across card grids that would cramp at 1180. It is tokenised rather than removed so the discrepancy is visible and adjustable in one place. NOTE FOR THE REPORT: a 1520px Home Page above a 1180px footer means the footer's left edge sits 170px inboard of the homepage content on a 1600px screen. That is a genuine §9 alignment break. It is NOT resolved here, because resolving it means changing the Home Page, which this stage forbids. It needs a decision. --cx-measure is the readable line length for prose, in ch rather than px so it tracks the font rather than the viewport. ---------------------------------------------------------------------- */ --cx-container: 1180px; --cx-container-wide: 1520px; --cx-container-prose: 820px; --cx-measure: 68ch; /* The single horizontal gutter. Every container uses this, which is what makes equivalent elements align across page types (§9). */ --cx-gutter: clamp(1rem, 4vw, 2.4rem); /* ------------------------------------------------------------------------ 6. RADIUS (§10) ------------------------------------------------------------------------ 30 distinct radii were in use, including 2px, 3px, 4px, 5px and 6px as five separate decisions. Six tokens replace them. ---------------------------------------------------------------------- */ --cx-radius-xs: 4px; --cx-radius-sm: 6px; --cx-radius: 8px; --cx-radius-lg: 10px; --cx-radius-xl: 14px; --cx-radius-pill: 999px; /* ------------------------------------------------------------------------ 7. CARDS (§10) ------------------------------------------------------------------------ Consistency, not uniformity: these govern geometry only. A card's content structure, image ratio and CTA remain its own. ---------------------------------------------------------------------- */ --cx-card-pad-compact: 14px; --cx-card-pad: 18px; --cx-card-pad-feature: 24px; --cx-card-gap: var(--cx-space-3); /* image → text, title → body */ --cx-card-radius: var(--cx-radius-lg); /* ------------------------------------------------------------------------ 8. BUTTONS (§11) ------------------------------------------------------------------------ Heights are min-heights at the call site, never fixed heights — a button whose label wraps must grow rather than clip. ---------------------------------------------------------------------- */ --cx-btn-h: 42px; --cx-btn-h-sm: 34px; --cx-btn-h-lg: 50px; --cx-btn-pad-x: 20px; --cx-btn-pad-x-sm: 14px; --cx-btn-pad-x-lg: 28px; --cx-btn-fs: var(--cx-fs-meta); --cx-btn-fs-lg: var(--cx-fs-sm); --cx-btn-weight: 600; --cx-btn-radius: var(--cx-radius-sm); --cx-btn-gap: 8px; /* label → arrow (§11) */ /* ------------------------------------------------------------------------ 9. FORMS (§16) ------------------------------------------------------------------------ */ --cx-input-h: 44px; --cx-input-pad-x: 14px; --cx-input-radius: var(--cx-radius-sm); --cx-field-gap: var(--cx-space-4); /* ------------------------------------------------------------------------ 10. BREADCRUMBS (§13) ------------------------------------------------------------------------ */ --cx-breadcrumb-fs: var(--cx-fs-meta); --cx-breadcrumb-pad-y: var(--cx-space-3); --cx-breadcrumb-gap: var(--cx-space-2); /* ------------------------------------------------------------------------ 11. STATISTICS (§15) ------------------------------------------------------------------------ tabular-nums is applied at the call site so a row of figures does not change width as the numbers change. ---------------------------------------------------------------------- */ --cx-stat-fs: clamp(1.5rem, 3vw, 2.1rem); --cx-stat-weight: 600; --cx-stat-lh: var(--cx-lh-display); --cx-stat-label-fs: var(--cx-fs-label); --cx-stat-gap: var(--cx-space-2); /* ------------------------------------------------------------------------ 12. NEUTRAL / TEXT COLOUR (§12) ------------------------------------------------------------------------ Contrast ratios are stated against the ground each token is for. §12's hard rule forbids faint grey, excessive opacity and dark-on-dark for small text, so every value here that carries small text is at or above WCAG AA 4.5:1. Brand navy and gold are NOT redefined here — see the file header. ---------------------------------------------------------------------- */ --cx-ink: #1B2430; /* 14.1:1 on white — headings and body */ --cx-ink-soft: #33404F; /* 9.7:1 — long-form prose */ --cx-muted: #55606E; /* 6.7:1 — metadata, the FAINTEST permitted */ --cx-line: #E3E7EE; /* hairlines — never text */ --cx-paper: #F7F5EF; --cx-white: #FFFFFF; /* On dark grounds. --cx-on-dark-dim is the floor: below this, small labels on navy fall under AA and §12 is breached. */ --cx-on-dark: #F4F6F9; --cx-on-dark-mute: #9AA6B6; /* 6.4:1 on #0B1626 */ --cx-on-dark-dim: #7E8B9C; /* 4.6:1 on #0B1626 — smallest labels only */ /* ------------------------------------------------------------------------ 12a. BRAND COLOUR — DECLARED, NOT RECONCILED ------------------------------------------------------------------------ These three exist because marketplace.css already referenced them (var(--cx-navy, …), var(--cx-gold-ink, …), var(--cx-gold-soft, …)) against a namespace that was never defined. Each value below is IDENTICAL to the inline fallback that reference was already resolving to, so defining them changes nothing on screen — it only makes the references resolve and puts the values somewhere findable. --cx-navy is #0B1626 because that is the majority: service-category, jurisdictions, listing, knowledge-insight, marketplace and legal all use it. The navigation (#0B1220), footer (#050F1B) and Knowledge listing (#071525) use three other near-blacks and are NOT changed here. THE GOLD PROBLEM, FOR THE REPORT. Three golds are in active use: #D4AF37 tl.css, knowledge.css, nav.css — 1.9:1 on white #C9A227 service-category, jurisdictions, listing, knowledge-insight — 2.4:1 on white #8A6E12 marketplace, legal — 4.6:1 on white The first two FAIL WCAG AA as text on white and are only safe as rules, borders and fills. --cx-gold-ink is the one that is safe for text, which is why §12's contrast rule and any gold-text reconciliation have to be settled together. Reconciling them changes the appearance of approved pages, so Stage 4A declares them and stops. ---------------------------------------------------------------------- */ --cx-navy: #0B1626; --cx-gold-ink: #8A6E12; /* AA on white — the only gold safe for TEXT */ --cx-gold-soft: #D9B65A; /* for dark grounds */ /* ------------------------------------------------------------------------ 13. MOTION ------------------------------------------------------------------------ */ --cx-ease: cubic-bezier(.4, 0, .2, 1); --cx-duration: .28s; --cx-duration-sm: .18s; /* ======================================================================== STAGE 4B — COMPONENT TIER ------------------------------------------------------------------------ Builds on the Stage 4A tokens above rather than competing with them (§30). Everything here is geometry, elevation and interaction; no component's structure, content or image behaviour is expressed in this file. WHAT THE 4B AUDIT FOUND 48 distinct button classes, of which 9 are a gold primary button 75 distinct card classes 127 distinct box-shadow values 10 transition durations (.15 .16 .18 .2 .28 .3 .35 .4 .5 .6) 8 hover transforms (translateY -1 to -4px, scale 1.02 to 1.05) 5 stylesheets using `outline: none` These are not 127 elevation decisions or 10 timing decisions. They are the same handful of intentions, re-typed. ======================================================================== */ /* ---- Interaction timing (§26) ----------------------------------------- Three speeds. --cx-t-fast is for colour and opacity, which read as instant; --cx-t-base for movement and elevation; --cx-t-slow for the larger image and panel transitions that already existed. Written as complete `transition` values as well as durations, so a rule can say `transition: var(--cx-t-base)` and inherit the easing too — the audit found easing specified as `ease` almost everywhere, which is why movement felt slightly different from component to component. */ --cx-t-fast: var(--cx-duration-sm) var(--cx-ease); --cx-t-base: var(--cx-duration) var(--cx-ease); --cx-t-slow: .4s var(--cx-ease); /* ---- Hover language (§6, §26) ----------------------------------------- ONE lift and ONE image scale. §6 rules out excessive scaling and large movement, so the 4px lift and the 1.05 scale found in the audit are brought back to the restrained end of the range that was already in majority use (-2px appeared 12 times, more than any other value). */ --cx-hover-lift: -2px; --cx-hover-scale: 1.03; /* ---- Elevation (§25) --------------------------------------------------- Four levels. Every shadow is the same navy at varying opacity rather than a mix of pure black and tinted greys, which is what made equivalent cards on different pages sit at visibly different depths. */ --cx-shadow-0: none; --cx-shadow-1: 0 1px 2px rgba(11, 22, 38, .06); --cx-shadow-2: 0 4px 14px rgba(11, 22, 38, .08); --cx-shadow-3: 0 10px 26px rgba(11, 22, 38, .10); --cx-shadow-4: 0 16px 36px rgba(11, 22, 38, .14); /* hover peak only */ /* ---- Borders (§24) ----------------------------------------------------- */ --cx-border-w: 1px; --cx-border: var(--cx-border-w) solid var(--cx-line); --cx-border-strong: var(--cx-border-w) solid #CFD6E0; --cx-border-dark: var(--cx-border-w) solid rgba(255, 255, 255, .12); /* ---- Focus (§27) ------------------------------------------------------- A single visible ring. The audit found five stylesheets setting `outline: none`; the global rule at the foot of this file guarantees a replacement so removing the browser default can never leave an element with no focus indicator at all. */ --cx-focus-color: #8A6E12; --cx-focus-w: 2px; --cx-focus-offset: 3px; /* ---- Dividers (§22) ---------------------------------------------------- */ --cx-divider: var(--cx-border-w) solid var(--cx-line); --cx-divider-dark: var(--cx-border-w) solid rgba(255, 255, 255, .09); /* ---- Badges and eyebrows (§11, §12) ------------------------------------ Eyebrow letter-spacing was between .06em and .14em across the site. .1em is the majority value and the one the Home Page uses. */ --cx-eyebrow-tracking: .1em; --cx-eyebrow-weight: 600; --cx-badge-pad-y: 3px; --cx-badge-pad-x: 8px; --cx-badge-radius: var(--cx-radius-xs); --cx-badge-fs: var(--cx-fs-micro); /* ---- Arrow links (§9) -------------------------------------------------- The gap between label and arrow, and how far the arrow travels on hover. Travel is deliberately small: §9 asks for consistency, §26 for restraint. */ --cx-arrow-gap: 6px; --cx-arrow-travel: 3px; /* ---- Card geometry (§3, §4) -------------------------------------------- --cx-card-title-lines and --cx-card-desc-lines drive the -webkit-line-clamp that keeps a long title from making one card in a grid dramatically taller than its neighbours (§4). They are limits on VISUAL overflow, not a substitute for content: the full text stays in the DOM and is read out by assistive technology. */ --cx-card-border: var(--cx-border); --cx-card-shadow: var(--cx-shadow-2); --cx-card-shadow-hover: var(--cx-shadow-4); --cx-card-title-lines: 2; --cx-card-desc-lines: 3; --cx-card-media-ratio: 16 / 10; /* ---- CTA panels (§14) --------------------------------------------------- */ --cx-cta-radius: var(--cx-radius-xl); --cx-cta-pad: clamp(24px, 4vw, 40px); } /* ============================================================================ RESPONSIVE (§18) ---------------------------------------------------------------------------- The type scale is already fluid via clamp(), so headings resize continuously rather than jumping at a breakpoint. What genuinely needs to change at small sizes is DENSITY, not proportion — §18 is explicit that everything must not simply be scaled down together. So the tokens adjusted below are padding, gutters and section rhythm. Font sizes are left alone deliberately: shrinking body copy on a phone is how sites become unreadable, and §4 and §18 both forbid it. ============================================================================ */ @media (max-width: 767.98px) { :root { --cx-card-pad-feature: 18px; --cx-card-pad: 16px; --cx-btn-pad-x-lg: 22px; --cx-gutter: 1rem; /* Prose gains leading on a narrow measure, where lines are short and a tight rhythm reads as cramped. */ --cx-lh-body: 1.65; } } /* Coarse pointers need a larger target regardless of viewport width — a tablet in landscape is wide but still touched. */ @media (pointer: coarse) { :root { --cx-btn-h: 46px; --cx-btn-h-sm: 40px; --cx-input-h: 48px; } } @media (prefers-reduced-motion: reduce) { :root { --cx-duration: 0s; --cx-duration-sm: 0s; } } /* ============================================================================ STAGE 4B — GLOBAL FOCUS GUARANTEE (§27) ---------------------------------------------------------------------------- The audit found `outline: none` in five stylesheets. Each was paired with a custom focus treatment somewhere, but not on every element and not on every page, so keyboard focus could vanish entirely on some controls. This rule is a floor, not an override. It uses :focus-visible, so it never fires on mouse click — only on keyboard navigation and other cases where the browser judges a focus ring appropriate. Any component with its own :focus-visible rule later in the cascade still wins, because this sits in the first stylesheet loaded. The consequence is that removing a browser default can no longer leave an element unreachable-looking: the worst case is this ring instead of a bespoke one. ============================================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: var(--cx-focus-w) solid var(--cx-focus-color); outline-offset: var(--cx-focus-offset); border-radius: var(--cx-radius-xs); } /* On dark grounds the ink gold ring is too low-contrast to see. These are the navy-backed regions that already exist: the header, the footer, hero copy blocks and dark CTA bands. */ .cc-header :focus-visible, .ft :focus-visible, .ch-hero :focus-visible, .hp-hero :focus-visible, [data-ground="dark"] :focus-visible { outline-color: var(--cx-gold-soft); } /* ============================================================================ STAGE 4C — IMAGE RENDERING ---------------------------------------------------------------------------- The CSS half of the focal-point system. partials/image.blade.php sets three custom properties inline per image; this reads them. The split exists because neither half can work alone: object-position cannot be set per-image from a stylesheet, and a media query cannot be written in a style attribute. Values inline, logic here. WHY --img-pos DEFAULTS TO 50% 50% Any that has not been through ImagePresenter still renders exactly as it does today. The system is additive: adopting it improves an image, not adopting it changes nothing. ============================================================================ */ .cx-img { display: block; width: 100%; height: 100%; /* cover unless the profile said contain — guide covers carry a title and must not be cropped (§19). `fill` is never emitted (§25). */ object-fit: var(--img-fit, cover); /* THE FIX. 27 `object-fit: cover` rules in this codebase had no object-position at all, so all of them cropped to dead centre regardless of where the subject was — the Kuwait problem in §5. */ object-position: var(--img-pos, 50% 50%); background-color: var(--cx-paper); /* what shows while the file loads */ } /* Responsive focal point (§23). Only takes effect where a mobile value was actually set; ImagePresenter defaults --img-pos-m to the desktop value, so for most photographs this rule is a no-op. */ @media (max-width: 767.98px) { .cx-img { object-position: var(--img-pos-m, var(--img-pos, 50% 50%)); } } /* Aspect-ratio boxes (§9, §20). The CONTAINER takes the ratio and the image fills it, so the box changes shape and the photograph never does. Ratios follow the approved designs rather than the designs following the images. */ .cx-ratio { position: relative; overflow: hidden; } .cx-ratio--card { aspect-ratio: 16 / 10; } .cx-ratio--wide { aspect-ratio: 16 / 9; } .cx-ratio--juris { aspect-ratio: 4 / 3; } .cx-ratio--panel { aspect-ratio: 3 / 2; } .cx-ratio--square { aspect-ratio: 1 / 1; } /* Guide and Insight covers (§19). No ratio and object-fit: contain, so a portrait publication cover is shown whole rather than having its title cropped away to satisfy a landscape box. */ .cx-ratio--cover { aspect-ratio: auto; } .cx-ratio--cover .cx-img { object-fit: contain; height: auto; } /* Missing image (§26). A restrained branded panel — deliberately NOT another country's photograph, and deliberately visible as an absence so it gets reported rather than disguised. */ .cx-img--missing { background: linear-gradient(135deg, var(--cx-paper) 0%, #EFEBE1 100%); border: var(--cx-border); min-height: 100%; } /* Overlay for text-over-image components (§12). A gradient rather than a flat opacity: §13 rules out imposing one numeric opacity on every photograph, because a bright skyline and a dark interior do not need the same treatment. A gradient that is transparent across the top two-thirds and eases into navy behind the text gives comparable PERCEIVED contrast where the text actually sits, while leaving most of the photograph untouched. The Home Page Hero does NOT use this and is not affected (§3, §42). */ .cx-scrim { position: absolute; inset: 0; display: block; pointer-events: none; background: linear-gradient( to bottom, rgba(11, 22, 38, 0) 0%, rgba(11, 22, 38, .06) 42%, rgba(11, 22, 38, .55) 78%, rgba(11, 22, 38, .86) 100%); }