/* ========================================================================== CPG PROPERTIES — DARK THEME -------------------------------------------------------------------------- Properties-owned. The shared token file, base.css and components.css are checksummed against CPG Holding and are not touched: this sheet only re-points custom properties under [data-cpg-theme="dark"] and repairs the places where the light sheets painted a flat colour instead of a token. The theme attribute is written on before first paint by the boot script in the layout, so there is no flash of the wrong theme, and it follows the operating system until a visitor chooses for themselves. One structural problem had to be solved. `--cpg-ink` is dual-duty in the light theme: it is the text colour on a light ground AND the background of every dark panel. Dark mode cannot keep both. So the token becomes the FOREGROUND ink — every `color: var(--cpg-ink)` turns light automatically — and the panels that used it as a surface are re-pointed at `--cpg-ink-surface`, an elevated dark. That selector list is derived from the light stylesheets rather than hand-written, so it cannot drift. ========================================================================== */ :root[data-cpg-theme="dark"] { color-scheme: dark; /* --- Ground and elevation --------------------------------------------- Darkest at the page, one step up for panels, one more for cards, so the ink sections that used to sit against bone still separate from it. */ --cpg-bone: #0b0c0d; --cpg-paper: #131417; --cpg-white: #16181b; --cpg-shell: #16181b; --cpg-ink-surface: #16181b; --cpg-surface: #0b0c0d; --cpg-surface-raised: #16181b; --cpg-surface-sunken: #131417; --cpg-surface-ink: #16181b; --cpg-surface-media: #22252a; /* --- Ink now means foreground ------------------------------------------ Measured on the #0b0c0d ground: #ECE9E2 = 16.4:1, #B9B6AE = 8.3:1, #9A968D = 5.8:1 — all clear AA for body text, AAA for the first. */ --cpg-ink: #ECE9E2; --cpg-ink-800: #D8D5CE; --cpg-ink-700: #B9B6AE; --cpg-ink-600: #9A968D; --cpg-text: #ECE9E2; --cpg-text-muted: #A6A29A; --cpg-text-subtle: #C2BFB7; --cpg-text-on-ink: #FFFFFF; --cpg-text-on-ink-muted: #CDCCCA; --cpg-text-on-ink-dim: #B4B1AA; /* --- Lines --------------------------------------------------------------- */ --cpg-rule: #26292E; --cpg-rule-strong: #343840; --cpg-border-control: #565C66; --cpg-rule-on-ink: rgba(255, 255, 255, 0.16); --cpg-rule-on-ink-strong: rgba(255, 255, 255, 0.32); /* --- Copper ------------------------------------------------------------- On a dark ground the light-surface copper is the wrong one: the "as text on dark" value is promoted so accents keep their 4.5:1. */ --cpg-copper: #C1440E; --cpg-copper-ink: #E2703A; --cpg-copper-lit: #E2703A; --cpg-copper-tint: #2A1610; /* --- Status: keep the hue, darken the ground it sits on ------------------ */ --cpg-status-available: #7FBF8E; --cpg-status-available-bg: #14231A; --cpg-status-reserved: #E2703A; --cpg-status-reserved-bg: #2A1610; --cpg-status-sold: #A6A29A; --cpg-status-sold-bg: #1D2024; --cpg-status-info: #8FB6D6; --cpg-status-info-bg: #121C24; --cpg-danger: #F0857A; --cpg-danger-bg: #2A1412; --cpg-success: #7FBF8E; --cpg-success-bg: #14231A; --cpg-focus-ring: #F7B98F; --cpg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --cpg-shadow-md: 0 6px 24px -12px rgba(0, 0, 0, 0.72); --cpg-shadow-lg: 0 24px 60px -32px rgba(0, 0, 0, 0.85); } /* The route layers keep their own local palettes; flip those in step. */ :root[data-cpg-theme="dark"] .cpgx-project { --cpgx-ink: #ECE9E2; --cpgx-paper: #131417; --cpgx-white: #16181b; --cpgx-line: rgba(255, 255, 255, 0.16); } :root[data-cpg-theme="dark"] .cpgh, :root[data-cpg-theme="dark"] .cpgp { --cpgh-ink: #16181b; --cpgh-media: #22252a; } /* The editorial layer carries its own palette, scoped to the body, and loads after the route sheets. Flip it in step. --cpge-black is dual-duty exactly like --cpg-ink, so it becomes the foreground and its background uses are re-pointed below. --cpge-white is NOT flipped: seventeen rules use it as white text on a dark panel, and those must stay white. Its background uses are re-pointed instead. */ :root[data-cpg-theme="dark"] .cpg-body--properties, :root[data-cpg-theme="dark"].cpg-body--properties { --cpge-black: #ECE9E2; --cpge-paper: #131417; --cpge-line: #26292E; --cpge-line-dark: rgba(255, 255, 255, 0.16); --cpge-muted: #A6A29A; --cpge-accent: #C6CDCA; --cpg-copper: #C6CDCA; --cpg-copper-ink: #C6CDCA; --cpg-copper-lit: #D3D9D6; --cpg-copper-tint: #1B211F; --cpg-focus-ring: #A9BDB4; --cpg-status-reserved: #C0B69A; background: var(--cpg-bone); } /* The project microsite carries a third palette, --asy-*, on .cpgx-project. --asy-ink is dual-duty like the others: forty-four rules use it as text and a handful as a surface, so it becomes the foreground and the surfaces are re-pointed by the derived blocks below. */ :root[data-cpg-theme="dark"] .cpgx-project { --asy-ground: #0b0c0d; --asy-white: #16181b; --asy-ink: #ECE9E2; --asy-text: #A6A29A; --asy-lead: #C2BFB7; --asy-rule: #26292E; --asy-rule-soft: rgba(255, 255, 255, 0.10); --asy-dim: rgba(255, 255, 255, 0.30); --asy-label: rgba(255, 255, 255, 0.42); } /* Photography is authored for a light page; a touch less brightness keeps a full-bleed render from glaring against the dark ground. Never applied to logos, icons or anything carrying meaning through colour alone. */ :root[data-cpg-theme="dark"] .cpgh-media img, :root[data-cpg-theme="dark"] .cpgx-media-card img, :root[data-cpg-theme="dark"] .cpgp-card__media img { filter: brightness(0.92) saturate(0.96); } /* Panels that painted themselves with the ink token (86 selectors, derived from the light sheets) */ [data-cpg-theme="dark"] .cpg-surface-ink, [data-cpg-theme="dark"] .cpg-badge, [data-cpg-theme="dark"] .cpg-badge--own, [data-cpg-theme="dark"] .cpg-crosslink:hover, [data-cpg-theme="dark"] .cpg-footer, [data-cpg-theme="dark"] .cpg-hero, [data-cpg-theme="dark"] .cpg-chip[aria-current="true"], [data-cpg-theme="dark"] .cpg-pagination .page-item.active .page-link, [data-cpg-theme="dark"] .cpg-body--properties .cpg-header .cpg-crosslink:hover, [data-cpg-theme="dark"] .cpg-body--properties .cpg-header .cpg-btn, [data-cpg-theme="dark"] body.cpg-body--properties:has(.cpgh) .cpg-header .cpg-btn--ink, [data-cpg-theme="dark"] body.cpg-body--properties:has(.cpgh) .cpg-header.cpgh-solid .cpg-btn--ink, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-pill--dark, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-navigator__link--ink, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-navigator__link--copper, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-feature, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-completed__link, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-portfolio-tabs a[aria-current="page"], [data-cpg-theme="dark"] .cpg-body--properties .cpgp-glance, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-place, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-table thead, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-card__badges .cpgh-badge, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-register__aside, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-sibling, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-confirm, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-footprint, [data-cpg-theme="dark"] .cpg-body--properties .cpg-footer, [data-cpg-theme="dark"] body.cpg-body--properties:has(.cpgh) .cpg-footer, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-proof__card--feature, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-hero-facts, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-hero-facts .cpgp-metric, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-showcase, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-showcase__background .cpgh-media, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-showcase__arrow:hover, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-showcase__arrow:focus-visible, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-hero[data-cpgh-hero-slider], [data-cpg-theme="dark"] .cpg-body--properties .cpgh-hero-stage, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-hero-discover-dock, [data-cpg-theme="dark"] body:has(.cpgh) .cpg-nav__link[aria-current="page"], [data-cpg-theme="dark"] body:has(.cpgh) .cpg-header.cpgh-solid .cpg-btn--ink, [data-cpg-theme="dark"] body:has(.cpgh) .cpg-header.is-menu-open .cpg-btn--ink, [data-cpg-theme="dark"] .cpgh-hero, [data-cpg-theme="dark"] .cpgh-navigator__link--ink, [data-cpg-theme="dark"] .cpgh-pill--dark, [data-cpg-theme="dark"] .cpgh-pill--copper:hover, [data-cpg-theme="dark"] .cpgh-proof__card--feature, [data-cpg-theme="dark"] .cpgh-feature, [data-cpg-theme="dark"] .cpgh-completed__link, [data-cpg-theme="dark"] .cpgh-step__media, [data-cpg-theme="dark"] .cpgh-cta, [data-cpg-theme="dark"] .cpgh-panels.is-enhanced .cpgh-panels__dot[aria-current="true"], [data-cpg-theme="dark"] .cpgh-story__tag a, [data-cpg-theme="dark"] body:has(.cpgp) .cpg-nav__link[aria-current="page"], [data-cpg-theme="dark"] .cpgp-hero, [data-cpg-theme="dark"] body:has(.cpgp) .cpg-subnav__link[aria-current="true"], [data-cpg-theme="dark"] body:has(.cpgp) .cpg-chip[aria-current="true"], [data-cpg-theme="dark"] .cpgp-card__cue, [data-cpg-theme="dark"] .cpgp-footprint, [data-cpg-theme="dark"] .cpgp-result__badges .cpgh-badge, [data-cpg-theme="dark"] .cpgp-table thead th, [data-cpg-theme="dark"] .cpgp-glance, [data-cpg-theme="dark"] .cpgp-metric, [data-cpg-theme="dark"] .cpgp-highlight:nth-child(2n), [data-cpg-theme="dark"] .cpgp-process__step:nth-child(even), [data-cpg-theme="dark"] body:has(.cpgp) .cpg-masterplan__figure, [data-cpg-theme="dark"] body:has(.cpgp) .cpg-plot[aria-pressed="true"], [data-cpg-theme="dark"] .cpgp-enquire, [data-cpg-theme="dark"] .cpgp-unit__badges .cpgh-badge, [data-cpg-theme="dark"] .cpgp-unit__actions .cpgp-action--quiet:hover, [data-cpg-theme="dark"] .cpgp-register__aside, [data-cpg-theme="dark"] .cpgp-confirm, [data-cpg-theme="dark"] .cpgp-place, [data-cpg-theme="dark"] .cpgp-notice-pair__panel--ink, [data-cpg-theme="dark"] .cpgp-figure-cell:first-child, [data-cpg-theme="dark"] .cpgp-sibling, [data-cpg-theme="dark"] .cpgx-band--ink, [data-cpg-theme="dark"] .cpgx-cinematic, [data-cpg-theme="dark"] .cpgx-project .cpg-btn, [data-cpg-theme="dark"] .cpgx-project .cpgx-glass-action, [data-cpg-theme="dark"] .cpgx-project .cpg-btn--ink:hover, [data-cpg-theme="dark"] .cpgx-project .cpgx-reference-location__dot, [data-cpg-theme="dark"] .cpgx-project .cpgx-general-plan__legend i, [data-cpg-theme="dark"] .cpgx-project .cpgx-layouts__arrow:hover, [data-cpg-theme="dark"] .cpgx-project .cpgx-layouts__dot[aria-selected="true"], [data-cpg-theme="dark"] .cpgx-pfnav__all span, [data-cpg-theme="dark"] .cpg-register { background-color: var(--cpg-ink-surface); } /* Cards that hardcoded a white background (64 selectors, derived from the light sheets) */ [data-cpg-theme="dark"] .cpg-body--properties .cpg-mega, [data-cpg-theme="dark"] .cpg-body--properties .cpgh, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-discover__input, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-navigator__link, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-intro > *, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-proof__card, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-proof__card--feature, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-sat, [data-cpg-theme="dark"] .cpg-body--properties .cpgp, [data-cpg-theme="dark"] .cpg-body--properties .cpg-subnav, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-result, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-gallery > li, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-slate > li, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-card, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-form, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-unit__rail, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-showcase__panel, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-showcase__arrow, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-hero-slider__title-link, [data-cpg-theme="dark"] body.cpg-body--properties .cpg-footer .cpg-properties-footer__button, [data-cpg-theme="dark"] .cpg-properties-footer__socials a:hover, [data-cpg-theme="dark"] .cpg-properties-footer__socials a:focus-visible, [data-cpg-theme="dark"] body:has(.cpgh) .cpg-crosslink:hover, [data-cpg-theme="dark"] body:has(.cpgh) .cpg-header .cpg-btn--ink, [data-cpg-theme="dark"] body:has(.cpgh) .cpg-header.cpgh-solid .cpg-header__nav, [data-cpg-theme="dark"] .cpgh-pill--dark .cpgh-pill__arrow, [data-cpg-theme="dark"] .cpgh-pill--copper .cpgh-pill__arrow, [data-cpg-theme="dark"] .cpgh-project-marquee, [data-cpg-theme="dark"] .cpgh-proof__card, [data-cpg-theme="dark"] .cpgh-unit, [data-cpg-theme="dark"] body:has(.cpgp) .cpg-header__nav, [data-cpg-theme="dark"] body:has(.cpgp) .cpg-chip, [data-cpg-theme="dark"] body:has(.cpgp) .cpg-input, [data-cpg-theme="dark"] body:has(.cpgp) .cpg-select, [data-cpg-theme="dark"] body:has(.cpgp) .cpg-textarea, [data-cpg-theme="dark"] body:has(.cpgp) .cpg-empty, [data-cpg-theme="dark"] .cpgp-controls, [data-cpg-theme="dark"] .cpgp-card, [data-cpg-theme="dark"] .cpgp-filters-rail, [data-cpg-theme="dark"] .cpgp-result, [data-cpg-theme="dark"] .cpgp-table-wrap, [data-cpg-theme="dark"] .cpgp-facts, [data-cpg-theme="dark"] .cpgp-highlight, [data-cpg-theme="dark"] .cpgp-line, [data-cpg-theme="dark"] body:has(.cpgp) .cpg-legend, [data-cpg-theme="dark"] body:has(.cpgp) .cpg-plot, [data-cpg-theme="dark"] body:has(.cpgp) .cpg-plot-panel, [data-cpg-theme="dark"] .cpgp-unit__rail, [data-cpg-theme="dark"] .cpgp-form, [data-cpg-theme="dark"] .cpgx-band--white, [data-cpg-theme="dark"] .cpgx-glass-action:hover, [data-cpg-theme="dark"] .cpgx-project .cpgx-line-card, [data-cpg-theme="dark"] .cpgx-masterplan-shell, [data-cpg-theme="dark"] .cpgx-glass-action--large span:last-child, [data-cpg-theme="dark"] .cpgx-project .cpgx-hero, [data-cpg-theme="dark"] .cpgx-project .cpg-subnav, [data-cpg-theme="dark"] .cpgx-project .cpgx-subnav, [data-cpg-theme="dark"] .cpgx-project .cpgx-reference-location__context, [data-cpg-theme="dark"] .cpgx-project .cpgx-layouts__arrow, [data-cpg-theme="dark"] .cpgx-project .cpgx-payment__box--result, [data-cpg-theme="dark"] .cpgx-project .cpgx-purchase, [data-cpg-theme="dark"] .cpgx-project .cpgx-enquire .cpgx-glass-action, [data-cpg-theme="dark"] .cpgx-project .cpgx-voices, [data-cpg-theme="dark"] .cpgx-project .cpgx-pfnav { background-color: var(--cpg-surface-raised); } /* Bands that hardcoded the paper background (10 selectors, derived from the light sheets) */ [data-cpg-theme="dark"] .cpg-body--properties .cpgh-navigator__link:hover, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-unit:hover, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-portfolio-tabs a:hover, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-result:hover, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-controls, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-filters-rail, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-form__more, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-route:hover, [data-cpg-theme="dark"] .cpgx-project, [data-cpg-theme="dark"] .cpgx-band--paper { background-color: var(--cpg-surface-sunken); } /* Ink panels the light sheet marked !important (0 selectors, derived from the light sheets) */ { background-color: var(--cpg-ink-surface) !important; } /* White surfaces the light sheet marked !important (14 selectors, derived from the light sheets) */ [data-cpg-theme="dark"] .cpg-body--properties .cpg-header, [data-cpg-theme="dark"] body.cpg-body--properties:has(.cpgh) .cpg-header, [data-cpg-theme="dark"] body.cpg-body--properties:has(.cpgh) .cpg-header.cpgh-solid, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-highlight, [data-cpg-theme="dark"] .cpg-body--properties .cpgp-process__step, [data-cpg-theme="dark"] .cpgh-hero, [data-cpg-theme="dark"] .cpgh-cta, [data-cpg-theme="dark"] .cpgh-feature, [data-cpg-theme="dark"] .cpgh-proof__card--feature, [data-cpg-theme="dark"] .cpgp-hero, [data-cpg-theme="dark"] .cpgp-enquire, [data-cpg-theme="dark"] .cpgp-confirm, [data-cpg-theme="dark"] .cpgp-footprint, [data-cpg-theme="dark"] .cpgp-register__aside { background-color: var(--cpg-surface-raised) !important; } /* Paper bands the light sheet marked !important (0 selectors, derived from the light sheets) */ { background-color: var(--cpg-surface-sunken) !important; } /* Text pinned to a near-black literal (17 selectors, derived from the light sheets) */ [data-cpg-theme="dark"] .cpg-body--properties .cpgh-eyebrow, [data-cpg-theme="dark"] .cpg-body--properties .cpg-subnav__link, [data-cpg-theme="dark"] .cpg-body--properties .cpgh-proof__index, [data-cpg-theme="dark"] body.cpg-body--properties .cpg-footer .cpg-properties-footer__button, [data-cpg-theme="dark"] .cpg-properties-footer__socials a:hover, [data-cpg-theme="dark"] .cpg-properties-footer__socials a:focus-visible, [data-cpg-theme="dark"] .cpgh-hero, [data-cpg-theme="dark"] .cpgh-panels__text, [data-cpg-theme="dark"] .cpgh-counter__value, [data-cpg-theme="dark"] .cpgh-counter__text, [data-cpg-theme="dark"] .cpgh-story__panel p, [data-cpg-theme="dark"] .cpgx-section-lead, [data-cpg-theme="dark"] .cpgx-glass-chip--active, [data-cpg-theme="dark"] .cpgx-glass-action, [data-cpg-theme="dark"] .cpgx-cinematic__cta-icon, [data-cpg-theme="dark"] .cpgx-text-link, [data-cpg-theme="dark"] .cpgx-glass-action--large span:last-child { color: var(--cpg-text); } /* Text pinned to a mid-dark literal (0 selectors, derived from the light sheets) */ { color: var(--cpg-text-muted); } /* Near-black text the light sheet marked !important (11 selectors, derived from the light sheets) */ [data-cpg-theme="dark"] .cpg-body--properties .cpg-nav__link, [data-cpg-theme="dark"] body.cpg-body--properties:has(.cpgh) .cpg-nav__link, [data-cpg-theme="dark"] .cpgh-hero, [data-cpg-theme="dark"] .cpgh-cta, [data-cpg-theme="dark"] .cpgh-feature, [data-cpg-theme="dark"] .cpgh-proof__card--feature, [data-cpg-theme="dark"] .cpgp-hero, [data-cpg-theme="dark"] .cpgp-enquire, [data-cpg-theme="dark"] .cpgp-confirm, [data-cpg-theme="dark"] .cpgp-footprint, [data-cpg-theme="dark"] .cpgp-register__aside { color: var(--cpg-text) !important; } /* Mid-dark text the light sheet marked !important (0 selectors, derived from the light sheets) */ { color: var(--cpg-text-muted) !important; } /* --- Repairs the derived lists cannot make ------------------------------- */ /* The white "light" pill and its dark arrow are the inverted CTA; they stay inverted, which is the strongest contrast available on a dark ground. */ :root[data-cpg-theme="dark"] .cpgh-pill--light { background: #FFFFFF; color: #0b0c0d; } :root[data-cpg-theme="dark"] .cpgh-pill--light .cpgh-pill__arrow { background: #0b0c0d; color: #FFFFFF; } /* Section scrims were tuned to lift white text off a photograph on a light page. On the dark ground they can ease off without losing the text. */ :root[data-cpg-theme="dark"] .cpgp-hero__scrim, :root[data-cpg-theme="dark"] .cpgx-hero__scrim { opacity: .88; } /* Borders that were drawn with the old ink value would now be invisible. */ :root[data-cpg-theme="dark"] .cpgh-panels.is-enhanced .cpgh-panels__dot { border-color: var(--cpg-rule-strong); background: var(--cpg-surface-raised); } :root[data-cpg-theme="dark"] .cpgh-panels.is-enhanced .cpgh-panels__dot-mark { background: var(--cpg-text-muted); } :root[data-cpg-theme="dark"] .cpgh-panels.is-enhanced .cpgh-panels__dot[aria-current="true"] { background: var(--cpg-ink); border-color: var(--cpg-ink); } :root[data-cpg-theme="dark"] .cpgh-panels.is-enhanced .cpgh-panels__dot[aria-current="true"] .cpgh-panels__dot-mark { background: #0b0c0d; } /* Text the light sheets pinned to a literal near-black. */ :root[data-cpg-theme="dark"] .cpgh-counter__value { color: var(--cpg-text); } :root[data-cpg-theme="dark"] .cpgh-panels__text, :root[data-cpg-theme="dark"] .cpgh-counter__text, :root[data-cpg-theme="dark"] .cpgh-story__panel p, :root[data-cpg-theme="dark"] .cpgx-interior__lead, :root[data-cpg-theme="dark"] .cpgx-pool__lead, :root[data-cpg-theme="dark"] .cpgx-layouts__intro p, :root[data-cpg-theme="dark"] .cpgx-layouts__description, :root[data-cpg-theme="dark"] .cpgx-benefits__item p, :root[data-cpg-theme="dark"] .cpgx-roi p, :root[data-cpg-theme="dark"] .cpgx-purchase__step p, :root[data-cpg-theme="dark"] .cpgx-purchase__privacy, :root[data-cpg-theme="dark"] .cpgx-purchase__fields .cpg-label { color: var(--cpg-text-muted); } :root[data-cpg-theme="dark"] .cpgh-panels__eyebrow, :root[data-cpg-theme="dark"] .cpgh-panels__title, :root[data-cpg-theme="dark"] .cpgh-panels__cta, :root[data-cpg-theme="dark"] .cpgh-story__title, :root[data-cpg-theme="dark"] .cpgh-story__item-title, :root[data-cpg-theme="dark"] .cpgx-interior__title, :root[data-cpg-theme="dark"] .cpgx-pool__title, :root[data-cpg-theme="dark"] .cpgx-layouts__title, :root[data-cpg-theme="dark"] .cpgx-layouts__arrow, :root[data-cpg-theme="dark"] .cpgx-benefits__title, :root[data-cpg-theme="dark"] .cpgx-roi__title, :root[data-cpg-theme="dark"] .cpgx-purchase__title, :root[data-cpg-theme="dark"] .cpgx-purchase__step h3, :root[data-cpg-theme="dark"] .cpgx-layouts__panel-name, :root[data-cpg-theme="dark"] .cpgx-layouts__type { color: var(--cpg-text); } :root[data-cpg-theme="dark"] .cpgx-purchase__rule { background: var(--cpg-rule-strong); } :root[data-cpg-theme="dark"] .cpgx-purchase__fields .cpg-input, :root[data-cpg-theme="dark"] .cpgx-purchase__fields .cpg-select { border-bottom-color: var(--cpg-border-control); color: var(--cpg-text); } :root[data-cpg-theme="dark"] .cpgx-layouts__panel-shell { background: linear-gradient(90deg, #131417, #16181b); border-color: var(--cpg-rule); } :root[data-cpg-theme="dark"] .cpgx-payment__box, :root[data-cpg-theme="dark"] .cpgx-payment__op--box { background: var(--cpg-surface-raised); color: var(--cpg-text); } :root[data-cpg-theme="dark"] .cpgx-payment__months a { color: var(--cpg-text); } :root[data-cpg-theme="dark"] .cpgx-payment__months a[aria-current="true"] { background: var(--cpg-ink); color: #0b0c0d; } :root[data-cpg-theme="dark"] .cpgx-pool__spec { background: linear-gradient(145deg, rgba(60, 66, 70, .78), rgba(34, 38, 42, .72)); } /* --- Header chrome -------------------------------------------------------- The editorial layer paints the bar and its links with literal light values, some marked !important, so the theme has to answer in kind. */ :root[data-cpg-theme="dark"] .cpg-body--properties .cpg-nav__link, :root[data-cpg-theme="dark"] body.cpg-body--properties:has(.cpgh) .cpg-header .cpg-nav__link { color: var(--cpg-text-muted) !important; } :root[data-cpg-theme="dark"] .cpg-body--properties .cpg-nav__link:hover, :root[data-cpg-theme="dark"] .cpg-body--properties .cpg-nav__link[aria-current="page"] { color: var(--cpg-text) !important; } :root[data-cpg-theme="dark"] .cpg-header { border-bottom-color: var(--cpg-rule); } /* The ink call to action is fed through --cpg-btn-* custom properties and, in the editorial layer, through --cpge-black. Both now resolve to the foreground, so the button is restated as a light chip on the dark bar. */ :root[data-cpg-theme="dark"] .cpg-header .cpg-btn--ink, :root[data-cpg-theme="dark"] body.cpg-body--properties:has(.cpgh) .cpg-header .cpg-btn--ink, :root[data-cpg-theme="dark"] body.cpg-body--properties:has(.cpgh) .cpg-header.cpgh-solid .cpg-btn--ink { background: var(--cpg-ink) !important; border-color: var(--cpg-ink) !important; color: #0b0c0d !important; } :root[data-cpg-theme="dark"] .cpg-header .cpg-btn--ink:hover { background: var(--cpg-ink-700) !important; border-color: var(--cpg-ink-700) !important; } /* Any other ink button on a light card follows the same inversion. */ :root[data-cpg-theme="dark"] .cpg-btn--ink { --cpg-btn-fg: #0b0c0d; } :root[data-cpg-theme="dark"] .cpg-btn--outline { --cpg-btn-fg: var(--cpg-text); --cpg-btn-border: var(--cpg-border-control); } :root[data-cpg-theme="dark"] .cpg-btn--outline:hover { --cpg-btn-bg: var(--cpg-ink); --cpg-btn-fg: #0b0c0d; } /* --- Contrast repairs found by the dark-mode audit ----------------------- */ /* The skip link is the first thing a keyboard visitor meets. It was painted with the ink token, which is now the foreground. */ :root[data-cpg-theme="dark"] .cpg-skip-link { background: var(--cpg-ink-surface); color: var(--cpg-text); border: 1px solid var(--cpg-rule-strong); } /* The story tag took its background from the ink token and its text from the white token; both moved, leaving it invisible against itself. */ :root[data-cpg-theme="dark"] .cpgh-story__tag a { background: var(--cpg-ink); color: #0b0c0d; } :root[data-cpg-theme="dark"] .cpgh-story__tag a:hover { background: var(--cpg-copper-lit); color: #0b0c0d; } /* The standing illustrative-data notice keeps its copper voice on a dark ground rather than the light tint it uses on paper. */ :root[data-cpg-theme="dark"] .cpg-alert--error, :root[data-cpg-theme="dark"] .cpg-sample-notice { background: var(--cpg-status-reserved-bg) !important; color: var(--cpg-copper-lit) !important; border-color: var(--cpg-copper) !important; } :root[data-cpg-theme="dark"] .cpg-alert--success { background: var(--cpg-success-bg) !important; color: var(--cpg-status-available) !important; } /* Eyebrows, indices and accents the editorial layer pinned to literals. */ :root[data-cpg-theme="dark"] .cpgh-eyebrow, :root[data-cpg-theme="dark"] .cpgx-kicker, :root[data-cpg-theme="dark"] .cpgp-eyebrow { color: var(--cpg-text-muted) !important; } :root[data-cpg-theme="dark"] .cpgh-proof__index, :root[data-cpg-theme="dark"] .cpgh-step__n { color: var(--cpg-copper-lit) !important; } /* Any remaining ink-token button keeps a readable pairing: light chip, dark label. This is the inverse of the light theme and is deliberate. */ :root[data-cpg-theme="dark"] .cpgh-pill--dark, :root[data-cpg-theme="dark"] .cpgh-navigator__link--ink { color: #0b0c0d !important; } :root[data-cpg-theme="dark"] .cpgh-pill--dark { background: var(--cpg-ink) !important; } :root[data-cpg-theme="dark"] .cpgh-pill--dark .cpgh-pill__arrow { background: #0b0c0d; color: var(--cpg-ink); } /* The homepage hero title is a knockout, not a panel: the plate has to stay literally white and the type literally black in both themes, because the effect is a `screen` blend that lets the slide play through the letters. The derived block above claims it as a white surface, which in dark mode would paint a dark plate and hide the name inside it. */ :root[data-cpg-theme="dark"] .cpg-body--properties .cpgh-hero-slider__title-link { background: #FFFFFF !important; color: #000000 !important; } :root[data-cpg-theme="dark"] .cpg-body--properties .cpgh-hero[data-cpgh-hero-slider] .cpgh-hero__headline { color: #000000 !important; } /* The light theme paints every dark box with its own panel variables so the flat blacks became one charcoal. In dark mode those variables hand back to the tokens the derived blocks above already flip, so the dark composition is unchanged: an ink chip stays a light chip, an ink band stays a light band, and nothing here re-darkens them. */ :root[data-cpg-theme="dark"] .cpg-body--properties { --cpg-panel-ink: var(--cpg-ink); --cpge-panel: var(--cpge-black); --cpgx-panel: var(--cpgx-ink); --asy-panel: var(--asy-ink); /* This one does not invert: it stands in for surfaces that were literal near-blacks and stayed dark in both themes. */ --cpg-panel-fixed: #16181b; } /* The homepage's solid action follows the same inverse pairing as the other ink chips in dark mode: a light face with a dark label, rather than white type on a light ground. */ :root[data-cpg-theme="dark"] .cpgh-switch-btn { background: var(--cpg-ink) !important; color: #0b0c0d !important; } /* ========================================================================== THE SAME THEME, DRIVEN BY THE OPERATING SYSTEM -------------------------------------------------------------------------- The boot script writes data-cpg-theme before first paint, so this block is for the visitor who has scripting off: their system preference still reaches the page. An explicit light choice always wins, because the selector excludes it. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-cpg-theme="light"]) { color-scheme: dark; /* --- Ground and elevation --------------------------------------------- Darkest at the page, one step up for panels, one more for cards, so the ink sections that used to sit against bone still separate from it. */ --cpg-bone: #0b0c0d; --cpg-paper: #131417; --cpg-white: #16181b; --cpg-shell: #16181b; --cpg-ink-surface: #16181b; --cpg-surface: #0b0c0d; --cpg-surface-raised: #16181b; --cpg-surface-sunken: #131417; --cpg-surface-ink: #16181b; --cpg-surface-media: #22252a; /* --- Ink now means foreground ------------------------------------------ Measured on the #0b0c0d ground: #ECE9E2 = 16.4:1, #B9B6AE = 8.3:1, #9A968D = 5.8:1 — all clear AA for body text, AAA for the first. */ --cpg-ink: #ECE9E2; --cpg-ink-800: #D8D5CE; --cpg-ink-700: #B9B6AE; --cpg-ink-600: #9A968D; --cpg-text: #ECE9E2; --cpg-text-muted: #A6A29A; --cpg-text-subtle: #C2BFB7; --cpg-text-on-ink: #FFFFFF; --cpg-text-on-ink-muted: #CDCCCA; --cpg-text-on-ink-dim: #B4B1AA; /* --- Lines --------------------------------------------------------------- */ --cpg-rule: #26292E; --cpg-rule-strong: #343840; --cpg-border-control: #565C66; --cpg-rule-on-ink: rgba(255, 255, 255, 0.16); --cpg-rule-on-ink-strong: rgba(255, 255, 255, 0.32); /* --- Copper ------------------------------------------------------------- On a dark ground the light-surface copper is the wrong one: the "as text on dark" value is promoted so accents keep their 4.5:1. */ --cpg-copper: #C1440E; --cpg-copper-ink: #E2703A; --cpg-copper-lit: #E2703A; --cpg-copper-tint: #2A1610; /* --- Status: keep the hue, darken the ground it sits on ------------------ */ --cpg-status-available: #7FBF8E; --cpg-status-available-bg: #14231A; --cpg-status-reserved: #E2703A; --cpg-status-reserved-bg: #2A1610; --cpg-status-sold: #A6A29A; --cpg-status-sold-bg: #1D2024; --cpg-status-info: #8FB6D6; --cpg-status-info-bg: #121C24; --cpg-danger: #F0857A; --cpg-danger-bg: #2A1412; --cpg-success: #7FBF8E; --cpg-success-bg: #14231A; --cpg-focus-ring: #F7B98F; --cpg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --cpg-shadow-md: 0 6px 24px -12px rgba(0, 0, 0, 0.72); --cpg-shadow-lg: 0 24px 60px -32px rgba(0, 0, 0, 0.85); } /* The route layers keep their own local palettes; flip those in step. */ :root:not([data-cpg-theme="light"]) .cpgx-project { --cpgx-ink: #ECE9E2; --cpgx-paper: #131417; --cpgx-white: #16181b; --cpgx-line: rgba(255, 255, 255, 0.16); } :root:not([data-cpg-theme="light"]) .cpgh, :root:not([data-cpg-theme="light"]) .cpgp { --cpgh-ink: #16181b; --cpgh-media: #22252a; } /* The editorial layer carries its own palette, scoped to the body, and loads after the route sheets. Flip it in step. --cpge-black is dual-duty exactly like --cpg-ink, so it becomes the foreground and its background uses are re-pointed below. --cpge-white is NOT flipped: seventeen rules use it as white text on a dark panel, and those must stay white. Its background uses are re-pointed instead. */ :root:not([data-cpg-theme="light"]) .cpg-body--properties, :root:not([data-cpg-theme="light"]).cpg-body--properties { --cpge-black: #ECE9E2; --cpge-paper: #131417; --cpge-line: #26292E; --cpge-line-dark: rgba(255, 255, 255, 0.16); --cpge-muted: #A6A29A; --cpge-accent: #C6CDCA; --cpg-copper: #C6CDCA; --cpg-copper-ink: #C6CDCA; --cpg-copper-lit: #D3D9D6; --cpg-copper-tint: #1B211F; --cpg-focus-ring: #A9BDB4; --cpg-status-reserved: #C0B69A; background: var(--cpg-bone); } /* The project microsite carries a third palette, --asy-*, on .cpgx-project. --asy-ink is dual-duty like the others: forty-four rules use it as text and a handful as a surface, so it becomes the foreground and the surfaces are re-pointed by the derived blocks below. */ :root:not([data-cpg-theme="light"]) .cpgx-project { --asy-ground: #0b0c0d; --asy-white: #16181b; --asy-ink: #ECE9E2; --asy-text: #A6A29A; --asy-lead: #C2BFB7; --asy-rule: #26292E; --asy-rule-soft: rgba(255, 255, 255, 0.10); --asy-dim: rgba(255, 255, 255, 0.30); --asy-label: rgba(255, 255, 255, 0.42); } /* Photography is authored for a light page; a touch less brightness keeps a full-bleed render from glaring against the dark ground. Never applied to logos, icons or anything carrying meaning through colour alone. */ :root:not([data-cpg-theme="light"]) .cpgh-media img, :root:not([data-cpg-theme="light"]) .cpgx-media-card img, :root:not([data-cpg-theme="light"]) .cpgp-card__media img { filter: brightness(0.92) saturate(0.96); } /* Panels that painted themselves with the ink token (86 selectors, derived from the light sheets) */ :root:not([data-cpg-theme="light"]) .cpg-surface-ink, :root:not([data-cpg-theme="light"]) .cpg-badge, :root:not([data-cpg-theme="light"]) .cpg-badge--own, :root:not([data-cpg-theme="light"]) .cpg-crosslink:hover, :root:not([data-cpg-theme="light"]) .cpg-footer, :root:not([data-cpg-theme="light"]) .cpg-hero, :root:not([data-cpg-theme="light"]) .cpg-chip[aria-current="true"], :root:not([data-cpg-theme="light"]) .cpg-pagination .page-item.active .page-link, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpg-header .cpg-crosslink:hover, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpg-header .cpg-btn, :root:not([data-cpg-theme="light"]) body.cpg-body--properties:has(.cpgh) .cpg-header .cpg-btn--ink, :root:not([data-cpg-theme="light"]) body.cpg-body--properties:has(.cpgh) .cpg-header.cpgh-solid .cpg-btn--ink, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-pill--dark, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-navigator__link--ink, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-navigator__link--copper, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-feature, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-completed__link, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-portfolio-tabs a[aria-current="page"], :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-glance, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-place, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-table thead, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-card__badges .cpgh-badge, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-register__aside, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-sibling, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-confirm, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-footprint, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpg-footer, :root:not([data-cpg-theme="light"]) body.cpg-body--properties:has(.cpgh) .cpg-footer, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-proof__card--feature, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-hero-facts, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-hero-facts .cpgp-metric, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-showcase, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-showcase__background .cpgh-media, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-showcase__arrow:hover, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-showcase__arrow:focus-visible, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-hero[data-cpgh-hero-slider], :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-hero-stage, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-hero-discover-dock, :root:not([data-cpg-theme="light"]) body:has(.cpgh) .cpg-nav__link[aria-current="page"], :root:not([data-cpg-theme="light"]) body:has(.cpgh) .cpg-header.cpgh-solid .cpg-btn--ink, :root:not([data-cpg-theme="light"]) body:has(.cpgh) .cpg-header.is-menu-open .cpg-btn--ink, :root:not([data-cpg-theme="light"]) .cpgh-hero, :root:not([data-cpg-theme="light"]) .cpgh-navigator__link--ink, :root:not([data-cpg-theme="light"]) .cpgh-pill--dark, :root:not([data-cpg-theme="light"]) .cpgh-pill--copper:hover, :root:not([data-cpg-theme="light"]) .cpgh-proof__card--feature, :root:not([data-cpg-theme="light"]) .cpgh-feature, :root:not([data-cpg-theme="light"]) .cpgh-completed__link, :root:not([data-cpg-theme="light"]) .cpgh-step__media, :root:not([data-cpg-theme="light"]) .cpgh-cta, :root:not([data-cpg-theme="light"]) .cpgh-panels.is-enhanced .cpgh-panels__dot[aria-current="true"], :root:not([data-cpg-theme="light"]) .cpgh-story__tag a, :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-nav__link[aria-current="page"], :root:not([data-cpg-theme="light"]) .cpgp-hero, :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-subnav__link[aria-current="true"], :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-chip[aria-current="true"], :root:not([data-cpg-theme="light"]) .cpgp-card__cue, :root:not([data-cpg-theme="light"]) .cpgp-footprint, :root:not([data-cpg-theme="light"]) .cpgp-result__badges .cpgh-badge, :root:not([data-cpg-theme="light"]) .cpgp-table thead th, :root:not([data-cpg-theme="light"]) .cpgp-glance, :root:not([data-cpg-theme="light"]) .cpgp-metric, :root:not([data-cpg-theme="light"]) .cpgp-highlight:nth-child(2n), :root:not([data-cpg-theme="light"]) .cpgp-process__step:nth-child(even), :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-masterplan__figure, :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-plot[aria-pressed="true"], :root:not([data-cpg-theme="light"]) .cpgp-enquire, :root:not([data-cpg-theme="light"]) .cpgp-unit__badges .cpgh-badge, :root:not([data-cpg-theme="light"]) .cpgp-unit__actions .cpgp-action--quiet:hover, :root:not([data-cpg-theme="light"]) .cpgp-register__aside, :root:not([data-cpg-theme="light"]) .cpgp-confirm, :root:not([data-cpg-theme="light"]) .cpgp-place, :root:not([data-cpg-theme="light"]) .cpgp-notice-pair__panel--ink, :root:not([data-cpg-theme="light"]) .cpgp-figure-cell:first-child, :root:not([data-cpg-theme="light"]) .cpgp-sibling, :root:not([data-cpg-theme="light"]) .cpgx-band--ink, :root:not([data-cpg-theme="light"]) .cpgx-cinematic, :root:not([data-cpg-theme="light"]) .cpgx-project .cpg-btn, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-glass-action, :root:not([data-cpg-theme="light"]) .cpgx-project .cpg-btn--ink:hover, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-reference-location__dot, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-general-plan__legend i, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-layouts__arrow:hover, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-layouts__dot[aria-selected="true"], :root:not([data-cpg-theme="light"]) .cpgx-pfnav__all span, :root:not([data-cpg-theme="light"]) .cpg-register { background-color: var(--cpg-ink-surface); } /* Cards that hardcoded a white background (64 selectors, derived from the light sheets) */ :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpg-mega, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-discover__input, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-navigator__link, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-intro > *, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-proof__card, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-proof__card--feature, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-sat, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpg-subnav, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-result, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-gallery > li, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-slate > li, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-card, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-form, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-unit__rail, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-showcase__panel, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-showcase__arrow, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-hero-slider__title-link, :root:not([data-cpg-theme="light"]) body.cpg-body--properties .cpg-footer .cpg-properties-footer__button, :root:not([data-cpg-theme="light"]) .cpg-properties-footer__socials a:hover, :root:not([data-cpg-theme="light"]) .cpg-properties-footer__socials a:focus-visible, :root:not([data-cpg-theme="light"]) body:has(.cpgh) .cpg-crosslink:hover, :root:not([data-cpg-theme="light"]) body:has(.cpgh) .cpg-header .cpg-btn--ink, :root:not([data-cpg-theme="light"]) body:has(.cpgh) .cpg-header.cpgh-solid .cpg-header__nav, :root:not([data-cpg-theme="light"]) .cpgh-pill--dark .cpgh-pill__arrow, :root:not([data-cpg-theme="light"]) .cpgh-pill--copper .cpgh-pill__arrow, :root:not([data-cpg-theme="light"]) .cpgh-project-marquee, :root:not([data-cpg-theme="light"]) .cpgh-proof__card, :root:not([data-cpg-theme="light"]) .cpgh-unit, :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-header__nav, :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-chip, :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-input, :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-select, :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-textarea, :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-empty, :root:not([data-cpg-theme="light"]) .cpgp-controls, :root:not([data-cpg-theme="light"]) .cpgp-card, :root:not([data-cpg-theme="light"]) .cpgp-filters-rail, :root:not([data-cpg-theme="light"]) .cpgp-result, :root:not([data-cpg-theme="light"]) .cpgp-table-wrap, :root:not([data-cpg-theme="light"]) .cpgp-facts, :root:not([data-cpg-theme="light"]) .cpgp-highlight, :root:not([data-cpg-theme="light"]) .cpgp-line, :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-legend, :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-plot, :root:not([data-cpg-theme="light"]) body:has(.cpgp) .cpg-plot-panel, :root:not([data-cpg-theme="light"]) .cpgp-unit__rail, :root:not([data-cpg-theme="light"]) .cpgp-form, :root:not([data-cpg-theme="light"]) .cpgx-band--white, :root:not([data-cpg-theme="light"]) .cpgx-glass-action:hover, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-line-card, :root:not([data-cpg-theme="light"]) .cpgx-masterplan-shell, :root:not([data-cpg-theme="light"]) .cpgx-glass-action--large span:last-child, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-hero, :root:not([data-cpg-theme="light"]) .cpgx-project .cpg-subnav, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-subnav, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-reference-location__context, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-layouts__arrow, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-payment__box--result, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-purchase, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-enquire .cpgx-glass-action, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-voices, :root:not([data-cpg-theme="light"]) .cpgx-project .cpgx-pfnav { background-color: var(--cpg-surface-raised); } /* Bands that hardcoded the paper background (10 selectors, derived from the light sheets) */ :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-navigator__link:hover, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-unit:hover, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-portfolio-tabs a:hover, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-result:hover, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-controls, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-filters-rail, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-form__more, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-route:hover, :root:not([data-cpg-theme="light"]) .cpgx-project, :root:not([data-cpg-theme="light"]) .cpgx-band--paper { background-color: var(--cpg-surface-sunken); } /* Ink panels the light sheet marked !important (0 selectors, derived from the light sheets) */ { background-color: var(--cpg-ink-surface) !important; } /* White surfaces the light sheet marked !important (14 selectors, derived from the light sheets) */ :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpg-header, :root:not([data-cpg-theme="light"]) body.cpg-body--properties:has(.cpgh) .cpg-header, :root:not([data-cpg-theme="light"]) body.cpg-body--properties:has(.cpgh) .cpg-header.cpgh-solid, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-highlight, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgp-process__step, :root:not([data-cpg-theme="light"]) .cpgh-hero, :root:not([data-cpg-theme="light"]) .cpgh-cta, :root:not([data-cpg-theme="light"]) .cpgh-feature, :root:not([data-cpg-theme="light"]) .cpgh-proof__card--feature, :root:not([data-cpg-theme="light"]) .cpgp-hero, :root:not([data-cpg-theme="light"]) .cpgp-enquire, :root:not([data-cpg-theme="light"]) .cpgp-confirm, :root:not([data-cpg-theme="light"]) .cpgp-footprint, :root:not([data-cpg-theme="light"]) .cpgp-register__aside { background-color: var(--cpg-surface-raised) !important; } /* Paper bands the light sheet marked !important (0 selectors, derived from the light sheets) */ { background-color: var(--cpg-surface-sunken) !important; } /* Text pinned to a near-black literal (17 selectors, derived from the light sheets) */ :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-eyebrow, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpg-subnav__link, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-proof__index, :root:not([data-cpg-theme="light"]) body.cpg-body--properties .cpg-footer .cpg-properties-footer__button, :root:not([data-cpg-theme="light"]) .cpg-properties-footer__socials a:hover, :root:not([data-cpg-theme="light"]) .cpg-properties-footer__socials a:focus-visible, :root:not([data-cpg-theme="light"]) .cpgh-hero, :root:not([data-cpg-theme="light"]) .cpgh-panels__text, :root:not([data-cpg-theme="light"]) .cpgh-counter__value, :root:not([data-cpg-theme="light"]) .cpgh-counter__text, :root:not([data-cpg-theme="light"]) .cpgh-story__panel p, :root:not([data-cpg-theme="light"]) .cpgx-section-lead, :root:not([data-cpg-theme="light"]) .cpgx-glass-chip--active, :root:not([data-cpg-theme="light"]) .cpgx-glass-action, :root:not([data-cpg-theme="light"]) .cpgx-cinematic__cta-icon, :root:not([data-cpg-theme="light"]) .cpgx-text-link, :root:not([data-cpg-theme="light"]) .cpgx-glass-action--large span:last-child { color: var(--cpg-text); } /* Text pinned to a mid-dark literal (0 selectors, derived from the light sheets) */ { color: var(--cpg-text-muted); } /* Near-black text the light sheet marked !important (11 selectors, derived from the light sheets) */ :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpg-nav__link, :root:not([data-cpg-theme="light"]) body.cpg-body--properties:has(.cpgh) .cpg-nav__link, :root:not([data-cpg-theme="light"]) .cpgh-hero, :root:not([data-cpg-theme="light"]) .cpgh-cta, :root:not([data-cpg-theme="light"]) .cpgh-feature, :root:not([data-cpg-theme="light"]) .cpgh-proof__card--feature, :root:not([data-cpg-theme="light"]) .cpgp-hero, :root:not([data-cpg-theme="light"]) .cpgp-enquire, :root:not([data-cpg-theme="light"]) .cpgp-confirm, :root:not([data-cpg-theme="light"]) .cpgp-footprint, :root:not([data-cpg-theme="light"]) .cpgp-register__aside { color: var(--cpg-text) !important; } /* Mid-dark text the light sheet marked !important (0 selectors, derived from the light sheets) */ { color: var(--cpg-text-muted) !important; } /* --- Repairs the derived lists cannot make ------------------------------- */ /* The white "light" pill and its dark arrow are the inverted CTA; they stay inverted, which is the strongest contrast available on a dark ground. */ :root:not([data-cpg-theme="light"]) .cpgh-pill--light { background: #FFFFFF; color: #0b0c0d; } :root:not([data-cpg-theme="light"]) .cpgh-pill--light .cpgh-pill__arrow { background: #0b0c0d; color: #FFFFFF; } /* Section scrims were tuned to lift white text off a photograph on a light page. On the dark ground they can ease off without losing the text. */ :root:not([data-cpg-theme="light"]) .cpgp-hero__scrim, :root:not([data-cpg-theme="light"]) .cpgx-hero__scrim { opacity: .88; } /* Borders that were drawn with the old ink value would now be invisible. */ :root:not([data-cpg-theme="light"]) .cpgh-panels.is-enhanced .cpgh-panels__dot { border-color: var(--cpg-rule-strong); background: var(--cpg-surface-raised); } :root:not([data-cpg-theme="light"]) .cpgh-panels.is-enhanced .cpgh-panels__dot-mark { background: var(--cpg-text-muted); } :root:not([data-cpg-theme="light"]) .cpgh-panels.is-enhanced .cpgh-panels__dot[aria-current="true"] { background: var(--cpg-ink); border-color: var(--cpg-ink); } :root:not([data-cpg-theme="light"]) .cpgh-panels.is-enhanced .cpgh-panels__dot[aria-current="true"] .cpgh-panels__dot-mark { background: #0b0c0d; } /* Text the light sheets pinned to a literal near-black. */ :root:not([data-cpg-theme="light"]) .cpgh-counter__value { color: var(--cpg-text); } :root:not([data-cpg-theme="light"]) .cpgh-panels__text, :root:not([data-cpg-theme="light"]) .cpgh-counter__text, :root:not([data-cpg-theme="light"]) .cpgh-story__panel p, :root:not([data-cpg-theme="light"]) .cpgx-interior__lead, :root:not([data-cpg-theme="light"]) .cpgx-pool__lead, :root:not([data-cpg-theme="light"]) .cpgx-layouts__intro p, :root:not([data-cpg-theme="light"]) .cpgx-layouts__description, :root:not([data-cpg-theme="light"]) .cpgx-benefits__item p, :root:not([data-cpg-theme="light"]) .cpgx-roi p, :root:not([data-cpg-theme="light"]) .cpgx-purchase__step p, :root:not([data-cpg-theme="light"]) .cpgx-purchase__privacy, :root:not([data-cpg-theme="light"]) .cpgx-purchase__fields .cpg-label { color: var(--cpg-text-muted); } :root:not([data-cpg-theme="light"]) .cpgh-panels__eyebrow, :root:not([data-cpg-theme="light"]) .cpgh-panels__title, :root:not([data-cpg-theme="light"]) .cpgh-panels__cta, :root:not([data-cpg-theme="light"]) .cpgh-story__title, :root:not([data-cpg-theme="light"]) .cpgh-story__item-title, :root:not([data-cpg-theme="light"]) .cpgx-interior__title, :root:not([data-cpg-theme="light"]) .cpgx-pool__title, :root:not([data-cpg-theme="light"]) .cpgx-layouts__title, :root:not([data-cpg-theme="light"]) .cpgx-layouts__arrow, :root:not([data-cpg-theme="light"]) .cpgx-benefits__title, :root:not([data-cpg-theme="light"]) .cpgx-roi__title, :root:not([data-cpg-theme="light"]) .cpgx-purchase__title, :root:not([data-cpg-theme="light"]) .cpgx-purchase__step h3, :root:not([data-cpg-theme="light"]) .cpgx-layouts__panel-name, :root:not([data-cpg-theme="light"]) .cpgx-layouts__type { color: var(--cpg-text); } :root:not([data-cpg-theme="light"]) .cpgx-purchase__rule { background: var(--cpg-rule-strong); } :root:not([data-cpg-theme="light"]) .cpgx-purchase__fields .cpg-input, :root:not([data-cpg-theme="light"]) .cpgx-purchase__fields .cpg-select { border-bottom-color: var(--cpg-border-control); color: var(--cpg-text); } :root:not([data-cpg-theme="light"]) .cpgx-layouts__panel-shell { background: linear-gradient(90deg, #131417, #16181b); border-color: var(--cpg-rule); } :root:not([data-cpg-theme="light"]) .cpgx-payment__box, :root:not([data-cpg-theme="light"]) .cpgx-payment__op--box { background: var(--cpg-surface-raised); color: var(--cpg-text); } :root:not([data-cpg-theme="light"]) .cpgx-payment__months a { color: var(--cpg-text); } :root:not([data-cpg-theme="light"]) .cpgx-payment__months a[aria-current="true"] { background: var(--cpg-ink); color: #0b0c0d; } :root:not([data-cpg-theme="light"]) .cpgx-pool__spec { background: linear-gradient(145deg, rgba(60, 66, 70, .78), rgba(34, 38, 42, .72)); } /* --- Header chrome -------------------------------------------------------- The editorial layer paints the bar and its links with literal light values, some marked !important, so the theme has to answer in kind. */ :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpg-nav__link, :root:not([data-cpg-theme="light"]) body.cpg-body--properties:has(.cpgh) .cpg-header .cpg-nav__link { color: var(--cpg-text-muted) !important; } :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpg-nav__link:hover, :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpg-nav__link[aria-current="page"] { color: var(--cpg-text) !important; } :root:not([data-cpg-theme="light"]) .cpg-header { border-bottom-color: var(--cpg-rule); } /* The ink call to action is fed through --cpg-btn-* custom properties and, in the editorial layer, through --cpge-black. Both now resolve to the foreground, so the button is restated as a light chip on the dark bar. */ :root:not([data-cpg-theme="light"]) .cpg-header .cpg-btn--ink, :root:not([data-cpg-theme="light"]) body.cpg-body--properties:has(.cpgh) .cpg-header .cpg-btn--ink, :root:not([data-cpg-theme="light"]) body.cpg-body--properties:has(.cpgh) .cpg-header.cpgh-solid .cpg-btn--ink { background: var(--cpg-ink) !important; border-color: var(--cpg-ink) !important; color: #0b0c0d !important; } :root:not([data-cpg-theme="light"]) .cpg-header .cpg-btn--ink:hover { background: var(--cpg-ink-700) !important; border-color: var(--cpg-ink-700) !important; } /* Any other ink button on a light card follows the same inversion. */ :root:not([data-cpg-theme="light"]) .cpg-btn--ink { --cpg-btn-fg: #0b0c0d; } :root:not([data-cpg-theme="light"]) .cpg-btn--outline { --cpg-btn-fg: var(--cpg-text); --cpg-btn-border: var(--cpg-border-control); } :root:not([data-cpg-theme="light"]) .cpg-btn--outline:hover { --cpg-btn-bg: var(--cpg-ink); --cpg-btn-fg: #0b0c0d; } /* --- Contrast repairs found by the dark-mode audit ----------------------- */ /* The skip link is the first thing a keyboard visitor meets. It was painted with the ink token, which is now the foreground. */ :root:not([data-cpg-theme="light"]) .cpg-skip-link { background: var(--cpg-ink-surface); color: var(--cpg-text); border: 1px solid var(--cpg-rule-strong); } /* The story tag took its background from the ink token and its text from the white token; both moved, leaving it invisible against itself. */ :root:not([data-cpg-theme="light"]) .cpgh-story__tag a { background: var(--cpg-ink); color: #0b0c0d; } :root:not([data-cpg-theme="light"]) .cpgh-story__tag a:hover { background: var(--cpg-copper-lit); color: #0b0c0d; } /* The standing illustrative-data notice keeps its copper voice on a dark ground rather than the light tint it uses on paper. */ :root:not([data-cpg-theme="light"]) .cpg-alert--error, :root:not([data-cpg-theme="light"]) .cpg-sample-notice { background: var(--cpg-status-reserved-bg) !important; color: var(--cpg-copper-lit) !important; border-color: var(--cpg-copper) !important; } :root:not([data-cpg-theme="light"]) .cpg-alert--success { background: var(--cpg-success-bg) !important; color: var(--cpg-status-available) !important; } /* Eyebrows, indices and accents the editorial layer pinned to literals. */ :root:not([data-cpg-theme="light"]) .cpgh-eyebrow, :root:not([data-cpg-theme="light"]) .cpgx-kicker, :root:not([data-cpg-theme="light"]) .cpgp-eyebrow { color: var(--cpg-text-muted) !important; } :root:not([data-cpg-theme="light"]) .cpgh-proof__index, :root:not([data-cpg-theme="light"]) .cpgh-step__n { color: var(--cpg-copper-lit) !important; } /* Any remaining ink-token button keeps a readable pairing: light chip, dark label. This is the inverse of the light theme and is deliberate. */ :root:not([data-cpg-theme="light"]) .cpgh-pill--dark, :root:not([data-cpg-theme="light"]) .cpgh-navigator__link--ink { color: #0b0c0d !important; } :root:not([data-cpg-theme="light"]) .cpgh-pill--dark { background: var(--cpg-ink) !important; } :root:not([data-cpg-theme="light"]) .cpgh-pill--dark .cpgh-pill__arrow { background: #0b0c0d; color: var(--cpg-ink); } /* The homepage hero title is a knockout, not a panel: the plate has to stay literally white and the type literally black in both themes, because the effect is a `screen` blend that lets the slide play through the letters. The derived block above claims it as a white surface, which in dark mode would paint a dark plate and hide the name inside it. */ :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-hero-slider__title-link { background: #FFFFFF !important; color: #000000 !important; } :root:not([data-cpg-theme="light"]) .cpg-body--properties .cpgh-hero[data-cpgh-hero-slider] .cpgh-hero__headline { color: #000000 !important; } /* The light theme paints every dark box with its own panel variables so the flat blacks became one charcoal. In dark mode those variables hand back to the tokens the derived blocks above already flip, so the dark composition is unchanged: an ink chip stays a light chip, an ink band stays a light band, and nothing here re-darkens them. */ :root:not([data-cpg-theme="light"]) .cpg-body--properties { --cpg-panel-ink: var(--cpg-ink); --cpge-panel: var(--cpge-black); --cpgx-panel: var(--cpgx-ink); --asy-panel: var(--asy-ink); /* This one does not invert: it stands in for surfaces that were literal near-blacks and stayed dark in both themes. */ --cpg-panel-fixed: #16181b; } /* The homepage's solid action follows the same inverse pairing as the other ink chips in dark mode: a light face with a dark label, rather than white type on a light ground. */ :root:not([data-cpg-theme="light"]) .cpgh-switch-btn { background: var(--cpg-ink) !important; color: #0b0c0d !important; } } /* --- The header control --------------------------------------------------- */ .cpg-theme-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--cpg-rule-strong); border-radius: var(--cpg-radius-pill); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--cpg-duration-fast) var(--cpg-ease), border-color var(--cpg-duration-fast) var(--cpg-ease); } .cpg-theme-toggle:hover { background: rgba(127, 127, 127, .14); border-color: var(--cpg-border-control); } .cpg-theme-toggle:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 2px; } .cpg-theme-toggle svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* One icon is shown at a time: the sun offers light, the moon offers dark. */ .cpg-theme-toggle__moon { display: none; } :root[data-cpg-theme="dark"] .cpg-theme-toggle__sun { display: none; } :root[data-cpg-theme="dark"] .cpg-theme-toggle__moon { display: block; } .cpg-drawer .cpg-theme-toggle { width: auto; min-height: 2.75rem; padding-inline: 1rem; gap: .5rem; grid-auto-flow: column; } @media (prefers-reduced-motion: reduce) { .cpg-theme-toggle { transition: none; } } /* -------------------------------------------------------------------------- The homepage's warm ground #FFFCF8 in light. The token lives on .cpgh rather than on :root, so the dark value has to be set at the same depth or it never wins. -------------------------------------------------------------------------- */ :root[data-cpg-theme="dark"] .cpgh { --cpgh-warm: #16181b; } @media (prefers-color-scheme: dark) { :root:not([data-cpg-theme="light"]) .cpgh { --cpgh-warm: #16181b; } }