/* ===================================================================== STONELEDGER DESIGN TOKENS — the ONE place every brand value lives. The design specification (docs/design-specification.md) defines four visual themes on ONE component system. This file is that system's dictionary: every colour, surface, shadow and radius a page may use, defined once per theme. Pages and components use the semantic names (--color-page, --color-button-primary-bg, ...) and never a hex value, so - switching theme is one attribute: - a recolour is an edit HERE, and nowhere else - a fifth theme is one more block below, and nothing else The four themes, in the order of the switch (Dean, 3 Oct 2026, after trying four new ones: "Ridge peak theme should replace modern tech light and go first. chrome flow should replace cloud theme and go second. Then there should be modern tech dark, and then there should be liquid metal"): ridge-peak 01 Ridge Peak (sun) Modern Tech light's cream and burgundy, Dean's red ridge in the hero chrome-flow 02 Chrome Flow (diamond) Cloud's frosted glass over Dean's liquid chrome (the default) modern-a 03 Modern Tech, dark (moon) dark navy / yellow / cream liquid-metal 04 Liquid metal (mountain) near-black / chrome contours / smoked glass / ivory A browser that last chose a theme that has gone opens in the one that replaced it (theme-boot.js): Modern Tech light in Ridge Peak, Cloud ("glass") and the two landscapes not chosen in Chrome Flow. The retired themes are kept, to be tried again elsewhere, in docs/themes-archive/. Burgundy is #8B1538 (Dean, 18 Sep 2026 — the specification's #B31538 was corrected). Yellow is never a text colour on a light background. ===================================================================== */ :root { /* ---------------- PALETTE (shared by all four) ---------------- */ --sl-yellow: #FFEE00; --sl-burgundy: #8B1538; --sl-cream: #F4EBDC; --sl-deep-slate: #0B1F2D; --sl-slate: #1E3347; --sl-mid-grey: #64748B; --sl-navy-2: #102B3A; --sl-warm-white: #FAF8F2; /* The Metallic range, lightest to darkest. */ --sl-metal-1: #F5F7F8; --sl-metal-2: #E4E9ED; --sl-metal-3: #CBD5DC; --sl-metal-4: #94A6B3; --sl-metal-5: #526777; /* ---------------- TYPE ---------------- The Stoneledger wordmark is the supplied artwork (brand/img/wordmark.png), never set in a font. --font-display is for other serif display lines. Dean's boards name Tiempos Headline, a paid Klim font; Newsreader (free, OFL) stands in until a licence is bought. */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --tracking-eyebrow: 0.18em; /* ---------------- SPACE (4px base) ---------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Space above and below each page section, and where a section lands under the header when its link in the menu is clicked: its top this far below the header's bottom edge (the header is 68px, and html scroll-padding-top is 84px, so 0 here means 16px of air). */ --section-pad: var(--space-9); --section-land: 16px; --hero-pad-bottom: var(--space-8); --section-tight-top: 0px; /* ---------------- SHAPE ---------------- Controls 8–10, cards 12–16, marketing panels 18–24. Never 30+. */ --radius-control: 10px; --radius-card: 14px; --radius-panel: 20px; --radius-pill: 999px; /* ---------------- MOTION (150–250ms) ---------------- */ --duration: 200ms; --ease: cubic-bezier(.2, .7, .2, 1); --page-max: 1240px; --gutter: clamp(16px, 4vw, 40px); /* Semantic states. Controlled, never louder than the brand. Light-theme values here; the dark theme overrides them. */ --color-success: #1F8A4C; --color-warning: #9A6700; --color-error: #B42318; --color-info: #2E5E8C; } /* ===================================================================== THE SHARED STARTING VALUES Every theme below overrides these. They are what theme 01 Yellow Tech was until it was removed (2 Oct 2026); nothing shows them on their own, because every page always carries a data-theme. A value added here leaks into any theme that does not set its own, so new values go in the themes' blocks. ===================================================================== */ :root { --color-page: var(--sl-yellow); --page-background: radial-gradient(1100px 620px at 78% 8%, #FFF8A6 0%, rgba(255, 248, 166, 0) 62%), var(--sl-yellow); --color-surface: #FFF34D; --color-surface-raised: #FFF9B8; --color-surface-muted: #FFF12A; --color-surface-inverse: var(--sl-deep-slate); --color-surface-inverse-2: var(--sl-navy-2); --color-text-primary: var(--sl-deep-slate); --color-text-secondary: color-mix(in srgb, var(--sl-deep-slate) 86%, var(--sl-yellow)); --color-text-muted: color-mix(in srgb, var(--sl-deep-slate) 74%, var(--sl-yellow)); --color-text-on-inverse: var(--sl-cream); --color-text-on-inverse-muted: color-mix(in srgb, var(--sl-cream) 66%, var(--sl-deep-slate)); --color-brand-primary: var(--sl-burgundy); /* the wordmark */ --color-brand-secondary: var(--sl-deep-slate); --color-accent: var(--sl-deep-slate); /* rules, eyebrows, icons ON the page */ --color-accent-on-inverse: var(--sl-yellow); /* the same, on navy */ --color-border: rgba(11, 31, 45, .14); --color-border-strong: rgba(11, 31, 45, .32); --color-button-primary-bg: var(--sl-deep-slate); --color-button-primary-text: var(--sl-yellow); --color-button-primary-hover: var(--sl-slate); --color-button-secondary-bg: transparent; --color-button-secondary-text: var(--sl-deep-slate); --color-button-secondary-border: var(--sl-deep-slate); --color-link: var(--sl-deep-slate); --color-nav-bg: rgba(255, 244, 110, .82); --color-nav-text: var(--sl-deep-slate); --color-nav-active: var(--sl-burgundy); --color-nav-border: rgba(11, 31, 45, .12); /* Log in, top right: a cyan button of see-through glass in every theme, with NO glow (Dean, 27 Sep 2026 - the first version carried an outer glow and was nearly opaque). The header shows through a translucent cyan tint, blurred; the only highlight is a 1px glass edge along the top. Here on the yellow header the tint stays denser than elsewhere, because a thin cyan over yellow mixes to lime green; Metallic, Modern Tech light and Glass set a thinner one, Modern Tech dark its own. */ --color-login-bg: linear-gradient(180deg, rgba(186, 234, 255, .60) 0%, rgba(84, 190, 246, .54) 100%); --color-login-bg-hover: linear-gradient(180deg, rgba(186, 234, 255, .74) 0%, rgba(84, 190, 246, .68) 100%); --color-login-border: rgba(18, 146, 186, .48); --color-login-text: var(--sl-deep-slate); --color-login-shine: inset 0 1px 0 rgba(255, 255, 255, .55); --color-icon: var(--sl-deep-slate); --color-icon-tile: #FFF9C9; --color-chart-primary: var(--sl-yellow); --color-chart-secondary: #3E5A70; --color-focus: var(--sl-deep-slate); --color-switch-bg: rgba(11, 31, 45, .08); /* Burgundy since 27 Sep 2026 (Dean): the selected position is the same burgundy as Modern Tech light's, and the accountants page's On this page highlight takes this same colour. */ --color-switch-thumb: var(--sl-burgundy); --color-switch-icon: var(--sl-deep-slate); --color-switch-icon-on: #FFFFFF; /* The dashboard illustration: navy against the yellow page. */ --mock-bg: var(--sl-deep-slate); --mock-sidebar: #0A1B27; --mock-card: var(--sl-navy-2); --mock-border: rgba(255, 255, 255, .10); --mock-text: var(--sl-cream); --mock-muted: color-mix(in srgb, var(--sl-cream) 62%, var(--sl-deep-slate)); --mock-active-bg: rgba(255, 238, 0, .12); --mock-active-text: var(--sl-yellow); --mock-bar-1: var(--sl-yellow); --mock-bar-2: #3E5A70; --mock-positive: #4ADE80; --mock-wordmark: var(--sl-cream); --color-panel-bg: #FFF9B8; /* The greyscale logo, top left. Dean first asked for it on theme 02 only, then (18 Sep 2026, evening) on every theme. */ --nav-logo-tile: block; /* Forms and the register-interest dialog. */ --color-dialog-bg: #FFFCEB; --color-field-bg: #FFFFFF; --color-field-text: var(--sl-deep-slate); /* Product screenshots: the colour behind a card shot that is shorter than its frame -- the product's own page colour in this theme -- and the glass call-outs laid over the CIS screens. */ --shot-frame-bg: #F7F3E8; --callout-bg: linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .34)); --callout-ink: var(--sl-deep-slate); --callout-border: rgba(255, 255, 255, .75); --callout-pin: var(--sl-deep-slate); --callout-pin-ink: var(--sl-yellow); /* A highlighted phrase (). Yellow on every other theme; here the page IS yellow, so the highlight turns over: yellow ink on navy. */ --color-highlight-bg: var(--sl-deep-slate); --color-highlight-text: var(--sl-yellow); /* Only theme 05 Glass uses these: frosted blur, the dark glass hero panel, and glass slabs behind sections. */ --glass-blur: none; --hero-panel-bg: none; --hero-panel-border: 0; --hero-panel-pad: 0; --hero-panel-pull: 0px; --hero-panel-edge: 0px; --hero-panel-shadow: none; --slab-bg: none; --slab-border: 0; --slab-pad: 0; --slab-pull: 0px; --slab-edge: 0px; --slab-shadow: none; /* A calculator's own panel (6 Oct 2026, the legibility sweep, tools/site-visible.mjs). None where every section already stands on a glass slab (Chrome Flow, Liquid metal); set where the theme's picture runs bare behind the working and the labels (Ridge Peak, Modern Tech dark). */ --tool-panel-bg: none; --tool-panel-border: 0; --tool-panel-pad: 0px; --tool-panel-shadow: none; --mountain-glow: none; --mountain-filter: none; /* Liquid metal shows its terrain behind the hero instead of the mountain. */ --hero-mountain-opacity: 1; --shadow-card: 0 1px 2px rgba(11, 31, 45, .06), 0 6px 18px rgba(11, 31, 45, .08); --shadow-raised: 0 18px 44px rgba(11, 31, 45, .28); --highlight-top: none; } /* ===================================================================== 03 — MODERN TECH ROUTE A "CLEAN. SCALABLE. PRODUCT-LED." Deep slate with depth (faint radial glow, never flat black). Yellow wordmark and primary action, cream text, burgundy secondary. Cards are engineered: thin light borders, slightly lighter navy. ===================================================================== */ [data-theme="modern-a"] { /* The monochrome pass (Dean, 4 Oct 2026: "here are two filepaths for the modern tech dark theme. the image for the website background"; "make sure its just the background colours and designs moving, not the font colours or other design elements"). Dean's black and white mountain stands behind the hero to the right, scrolling with the page, its foot fading into the page by 1000px, its left edge into the page on a window wider than the picture. The illustrated mountain it replaces keeps its room, unseen. Only backgrounds move: the page and the surfaces' dark blue taken 40% of the way towards the picture's charcoal (its sky is #1D1E20), so the two blend. Every word, accent, border and button is as it was. Raised 100px (Dean, 4 Oct 2026: "move the mountain in the background slightly up so that more of it can be seen as its currently quite hidden behind the product screenshots ... just a bit higher"), with its left-edge fade and its foot's fade raised with it. */ --color-page: #121F28; --page-background: linear-gradient(90deg, #121F28 0%, rgba(18, 31, 40, .92) 26%, rgba(18, 31, 40, .45) 52%, rgba(18, 31, 40, .08) 78%, rgba(18, 31, 40, 0) 100%) 0 0 / 100% 1000px no-repeat, linear-gradient(180deg, rgba(18, 31, 40, 0) 0, rgba(18, 31, 40, 0) 700px, rgba(18, 31, 40, .72) 900px, #121F28 1000px) 0 -100px / 100% 1000px no-repeat, linear-gradient(90deg, #121F28 0, rgba(18, 31, 40, 0) 440px) right 0 top -100px / 1777px 1000px no-repeat, image-set(url("/brand/img/modern-dark.webp") 1x, url("/brand/img/modern-dark-2x.webp") 2x) right 0 top -100px / auto 1000px no-repeat, #121F28; --hero-mountain-opacity: 0; --color-surface: #152631; --color-surface-raised: #182E3A; --color-surface-muted: #14232C; /* On a dark page the "contrast" card is the RAISED one, edged in yellow, not a darker one that would disappear into the page. */ --color-surface-inverse: #182E3A; --color-surface-inverse-2: #152631; --card-inverse-border: rgba(255, 238, 0, .40); --color-text-primary: var(--sl-cream); --color-text-secondary: color-mix(in srgb, var(--sl-cream) 80%, var(--sl-deep-slate)); --color-text-muted: color-mix(in srgb, var(--sl-cream) 62%, var(--sl-deep-slate)); --color-text-on-inverse: var(--sl-cream); --color-text-on-inverse-muted: color-mix(in srgb, var(--sl-cream) 62%, var(--sl-deep-slate)); --color-brand-primary: var(--sl-yellow); --color-brand-secondary: var(--sl-burgundy); --color-accent: var(--sl-yellow); --color-accent-on-inverse: var(--sl-yellow); --color-border: rgba(255, 255, 255, .10); --color-border-strong: rgba(255, 255, 255, .20); --color-button-primary-bg: var(--sl-yellow); --color-button-primary-text: var(--sl-deep-slate); --color-button-primary-hover: #FFF45C; /* The page's own dark at 62%, not see-through (6 Oct 2026, the legibility sweep): unseen on the page, but where a button comes over the mountain's snow - the 404 page on a tablet, 2.8:1 - it stands off it. */ --color-button-secondary-bg: rgba(18, 31, 40, .62); --color-button-secondary-text: var(--sl-cream); --color-button-secondary-border: rgba(244, 235, 220, .38); --color-link: var(--sl-yellow); --color-nav-bg: rgba(18, 31, 40, .80); --color-nav-text: color-mix(in srgb, var(--sl-cream) 82%, var(--sl-deep-slate)); /* Log in on the dark header: see-through cyan glass, light lettering, no glow. */ --color-login-bg: linear-gradient(180deg, rgba(110, 228, 255, .20) 0%, rgba(34, 176, 224, .11) 100%); --color-login-bg-hover: linear-gradient(180deg, rgba(110, 228, 255, .30) 0%, rgba(34, 176, 224, .19) 100%); --color-login-border: rgba(120, 230, 255, .55); --color-login-text: #D4F7FF; --color-login-shine: inset 0 1px 0 rgba(255, 255, 255, .20); --color-nav-active: var(--sl-yellow); --color-nav-border: rgba(255, 255, 255, .08); --color-icon: var(--sl-yellow); --color-icon-tile: rgba(255, 238, 0, .08); --color-chart-primary: var(--sl-yellow); --color-chart-secondary: #4A6478; --color-focus: var(--sl-yellow); --color-switch-bg: rgba(255, 255, 255, .06); --color-switch-thumb: var(--sl-yellow); --color-switch-icon: color-mix(in srgb, var(--sl-cream) 70%, var(--sl-deep-slate)); --color-switch-icon-on: var(--sl-deep-slate); --mock-bg: #13222B; --mock-sidebar: #111C23; --mock-card: #162833; --mock-border: rgba(255, 255, 255, .10); --mock-text: var(--sl-cream); --mock-muted: color-mix(in srgb, var(--sl-cream) 60%, var(--sl-deep-slate)); --mock-active-bg: rgba(255, 238, 0, .10); --mock-active-text: var(--sl-yellow); --mock-bar-1: var(--sl-yellow); --mock-bar-2: #4A6478; --mock-positive: #4ADE80; --mock-wordmark: var(--sl-yellow); --color-panel-bg: linear-gradient(160deg, #162B37, #14232C); --tool-panel-bg: var(--color-panel-bg); --tool-panel-border: 1px solid var(--color-border); --tool-panel-pad: var(--space-6); --tool-panel-shadow: var(--shadow-card); --color-dialog-bg: #152631; --color-field-bg: #121F28; --color-field-text: var(--sl-cream); --shot-frame-bg: #121F28; /* The product picture's call-outs, a shade more solid since 10 Oct 2026 (.72/.52 to .84/.70): their 13px words read at 4.1:1 where a bright part of the screenshot showed through. */ --callout-bg: linear-gradient(135deg, rgba(24, 46, 58, .84), rgba(18, 31, 40, .70)); --callout-ink: var(--sl-cream); --callout-border: rgba(255, 255, 255, .22); --callout-pin: var(--sl-yellow); --callout-pin-ink: var(--sl-deep-slate); --color-highlight-bg: var(--sl-yellow); --color-highlight-text: var(--sl-deep-slate); --color-success: #4ADE80; --color-warning: #FBBF24; --color-error: #F87171; --color-info: #7DB7E8; /* The illustrated mountain's glow went with it (4 Oct 2026). */ --mountain-glow: none; --mountain-filter: none; --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .28); --shadow-raised: 0 22px 56px rgba(0, 0, 0, .45); --highlight-top: inset 0 1px 0 rgba(255, 255, 255, .05); } /* Modern Tech dark at phone width (5 Oct 2026, Dean: "on the mobile, double check how the backgrounds are flowing in as it needs to look better. Computer version is ok"). As on the computer, the words stand on calm dark and the mountain stands clear of them: here it rises below them, behind the product picture - the page's own dark to 300px, then the mountain, its snow peaks just under the hero's buttons, fading into the page by 1100px. Until then its snow lay behind the headline, under a veil that greyed it. All four themes' phones are laid out this way. */ @media (max-width: 620px) { [data-theme="modern-a"] { --page-background: linear-gradient(180deg, #121F28 0, #121F28 300px, rgba(18, 31, 40, 0) 470px) 0 0 / 100% 470px no-repeat, linear-gradient(180deg, rgba(18, 31, 40, .30) 0, rgba(18, 31, 40, .30) 760px, rgba(18, 31, 40, .80) 1000px, #121F28 1100px) 0 0 / 100% 1100px no-repeat, url("/brand/img/modern-dark.webp") 66% 300px / auto 800px no-repeat, #121F28; /* The calm version: the same mountain under a heavy veil, for the pages whose words or form run on where it rises (site.css, "calm"). */ --page-background-calm: linear-gradient(180deg, #121F28 0, #121F28 300px, rgba(18, 31, 40, 0) 470px) 0 0 / 100% 470px no-repeat, linear-gradient(180deg, rgba(18, 31, 40, .85) 0, rgba(18, 31, 40, .85) 760px, #121F28 1100px) 0 0 / 100% 1100px no-repeat, url("/brand/img/modern-dark.webp") 66% 300px / auto 800px no-repeat, #121F28; } } /* ===================================================================== 01 — RIDGE PEAK: its colours (Modern Tech light's, Route B, "FLEXIBLE. MODULAR. FUTURE-READY." - Ridge Peak replaced it on 3 Oct 2026 and keeps every colour; its background is further down.) Warm white and cream, deep slate text, burgundy wordmark, yellow for actions only. Modular blocks, soft blue-grey borders, lots of air. ===================================================================== */ [data-theme="ridge-peak"] { --color-page: var(--sl-warm-white); --page-background: radial-gradient(900px 560px at 80% 10%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 66%), var(--sl-warm-white); --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-surface-muted: var(--sl-cream); --color-surface-inverse: var(--sl-deep-slate); --color-surface-inverse-2: var(--sl-navy-2); --color-text-primary: var(--sl-deep-slate); --color-text-secondary: #2C3E4F; --color-text-muted: #5B6B7A; --color-text-on-inverse: var(--sl-cream); --color-text-on-inverse-muted: color-mix(in srgb, var(--sl-cream) 66%, var(--sl-deep-slate)); --color-brand-primary: var(--sl-burgundy); --color-brand-secondary: var(--sl-deep-slate); --color-accent: var(--sl-deep-slate); --color-accent-on-inverse: var(--sl-yellow); --color-border: #DCE3E8; --color-border-strong: #B9C5CF; --tool-panel-bg: var(--color-surface); --tool-panel-border: 1px solid var(--color-border); --tool-panel-pad: var(--space-6); --tool-panel-shadow: var(--shadow-card); --color-button-primary-bg: var(--sl-yellow); --color-button-primary-text: var(--sl-deep-slate); --color-button-primary-hover: #F7E200; --color-button-secondary-bg: #FFFFFF; --color-button-secondary-text: var(--sl-deep-slate); --color-button-secondary-border: var(--sl-deep-slate); --color-link: var(--sl-deep-slate); --color-nav-bg: rgba(250, 248, 242, .86); --color-nav-text: var(--sl-deep-slate); /* Log in: see-through cyan glass, thin, as on the other light themes. */ --color-login-bg: linear-gradient(180deg, rgba(180, 238, 252, .34) 0%, rgba(96, 208, 244, .26) 100%); --color-login-bg-hover: linear-gradient(180deg, rgba(180, 238, 252, .48) 0%, rgba(96, 208, 244, .40) 100%); --color-nav-active: var(--sl-burgundy); --color-nav-border: #E6E1D6; --color-icon: var(--sl-deep-slate); --color-icon-tile: #F1F4F6; --color-chart-primary: var(--sl-deep-slate); --color-chart-secondary: #C9D3DB; --color-focus: var(--sl-deep-slate); --color-switch-bg: #FFFFFF; /* Selectors are burgundy in this theme (Dean, 19 Sep 2026), matching the product; actions stay yellow. */ --color-switch-thumb: var(--sl-burgundy); --color-switch-icon: #5B6B7A; --color-switch-icon-on: #FFFFFF; /* Light dashboard: white sidebar, pale blue-grey selection. */ --mock-bg: #FFFFFF; --mock-sidebar: #FBFAF6; --mock-card: #FFFFFF; --mock-border: #E3E8EC; --mock-text: var(--sl-deep-slate); --mock-muted: #5B6B7A; --mock-sidebar-text: #33475A; --mock-active-bg: #E8EEF3; --mock-active-text: var(--sl-deep-slate); --mock-bar-1: var(--sl-deep-slate); --mock-bar-2: var(--sl-yellow); --mock-positive: var(--color-success); --mock-wordmark: var(--sl-burgundy); --color-panel-bg: #FFFFFF; --color-dialog-bg: #FFFFFF; --color-field-bg: var(--sl-warm-white); --shot-frame-bg: #F7F5EF; --callout-pin: var(--sl-burgundy); --callout-pin-ink: #FFFFFF; --color-highlight-bg: var(--sl-yellow); --color-highlight-text: var(--sl-deep-slate); --mountain-glow: none; --mountain-filter: none; --shadow-card: 0 1px 2px rgba(11, 31, 45, .05), 0 8px 24px rgba(11, 31, 45, .06); --shadow-raised: 0 18px 44px rgba(11, 31, 45, .14); --highlight-top: none; } /* ===================================================================== 02 — CHROME FLOW: its colours and glass (Cloud's, value "glass" - Chrome Flow replaced it on 3 Oct 2026 and keeps every colour and every pane of glass; its background is further down. Cloud itself, with its haze and its dark glass hero, is in docs/themes-archive/.) Frosted glass: translucent panels, a blur of what is behind, a thin bright edge, a faint inner highlight; the sections sit on light glass slabs. Buttons deep slate. ===================================================================== */ [data-theme="chrome-flow"] { --color-surface: rgba(255, 255, 255, .30); --surface-card: linear-gradient(160deg, rgba(255, 255, 255, .50) 0%, rgba(255, 255, 255, .24) 100%); --color-surface-raised: rgba(255, 255, 255, .58); --color-surface-muted: rgba(255, 255, 255, .18); --color-surface-inverse: rgba(16, 22, 28, .74); --color-surface-inverse-2: rgba(16, 22, 28, .60); --card-inverse-border: rgba(255, 255, 255, .22); --color-text-primary: var(--sl-deep-slate); --color-text-secondary: #22323F; --color-text-muted: #3A4A57; --color-text-on-inverse: #F5F7F8; --color-text-on-inverse-muted: rgba(245, 247, 248, .74); --color-brand-primary: var(--sl-deep-slate); --color-brand-secondary: var(--sl-burgundy); --color-accent: var(--sl-deep-slate); --color-accent-on-inverse: var(--sl-yellow); --color-border: rgba(255, 255, 255, .58); --color-border-strong: rgba(11, 31, 45, .30); --color-button-primary-bg: linear-gradient(180deg, #243B51 0%, #0B1F2D 100%); --color-button-primary-text: #FFFFFF; --color-button-primary-hover: linear-gradient(180deg, #2E4A64 0%, #12283A 100%); --color-button-secondary-bg: rgba(11, 31, 45, .70); --color-button-secondary-text: #F5F7F8; --color-button-secondary-border: rgba(255, 255, 255, .38); --color-link: var(--sl-deep-slate); --color-nav-bg: rgba(255, 255, 255, .30); --color-nav-text: var(--sl-deep-slate); /* Log in: the same cyan, thinner, so the sky shows through as it does through everything else in this theme. */ --color-login-bg: linear-gradient(180deg, rgba(170, 236, 255, .36) 0%, rgba(72, 196, 246, .28) 100%); --color-login-bg-hover: linear-gradient(180deg, rgba(170, 236, 255, .50) 0%, rgba(72, 196, 246, .42) 100%); --color-nav-active: var(--sl-burgundy); --color-nav-border: rgba(255, 255, 255, .55); --color-icon: var(--sl-deep-slate); --color-icon-tile: rgba(255, 255, 255, .46); --color-chart-primary: var(--sl-deep-slate); --color-chart-secondary: var(--sl-metal-4); --color-focus: var(--sl-deep-slate); --color-switch-bg: rgba(255, 255, 255, .38); --color-switch-thumb: var(--sl-deep-slate); --color-switch-icon: #22323F; --color-switch-icon-on: #FFFFFF; /* The frame round a product window screenshot. */ --mock-bg: rgba(255, 255, 255, .34); --mock-sidebar: rgba(255, 255, 255, .44); --mock-card: rgba(255, 255, 255, .5); --mock-border: rgba(255, 255, 255, .6); --mock-text: var(--sl-deep-slate); --mock-muted: #3A4A57; --mock-sidebar-text: #22323F; --mock-active-bg: var(--sl-deep-slate); --mock-active-text: #FFFFFF; --mock-bar-1: var(--sl-deep-slate); --mock-bar-2: var(--sl-metal-4); --mock-positive: var(--color-success); --mock-wordmark: var(--sl-deep-slate); --color-panel-bg: linear-gradient(160deg, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .18) 100%); /* Deep slate buttons everywhere (Dean). On the dark glass panels they carry a light edge, or they would vanish into the glass. */ --color-closing-button-bg: linear-gradient(180deg, #2A4560 0%, #0F2536 100%); --color-closing-button-text: #FFFFFF; --color-closing-button-border: rgba(255, 255, 255, .34); --color-dialog-bg: rgba(234, 238, 241, .86); --color-field-bg: rgba(255, 255, 255, .82); --color-field-text: var(--sl-deep-slate); --shot-frame-bg: rgba(236, 240, 243, .55); --callout-bg: linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .28)); --callout-pin: var(--sl-deep-slate); --callout-pin-ink: #FFFFFF; --color-highlight-bg: var(--sl-yellow); --color-highlight-text: var(--sl-deep-slate); /* Every word and picture sits exactly where it does in the other four themes (Dean, 27 Sep 2026: "everything is a bit lower ... it jumps down a bit when you switch"). The glass panels are drawn OUTWARD into the section's own spacing rather than pushing the content down: each one has padding and an equal negative margin, so it takes up no room in the layout. It used to swap the sections' 96px for 36px and then add a 56px slab plus its 1px border inside, which left every section's content 3px high and the hero 57px low, and two sections with no slab 120px and 24px short -- different on every screen of the page. Still true from 19 Sep 2026 (Dean): the boxes sit close together -- each slab's edge is 36px inside its section, so neighbouring slabs are 72px apart, as before -- and a clicked section's box lands right under the header bar: the content is 60px inside the box, so it lands 60px down, which puts the box's edge at the header. */ --section-land: 60px; --glass-blur: blur(18px) saturate(1.4); --hero-panel-bg: linear-gradient(160deg, rgba(22, 28, 34, .80) 0%, rgba(12, 18, 24, .70) 100%); --hero-panel-border: 1px solid rgba(255, 255, 255, .24); /* 36px + the 1px border, pulled back out: the panel's top edge sits 11px under the header and the words start where they do elsewhere. It cannot pull further than the hero's own 48px -- the hero clips. */ --hero-panel-pad: 36px; --hero-panel-pull: -37px; --hero-panel-edge: 1px; /* the border's width, given back to the gutter */ --hero-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 70px rgba(11, 20, 28, .34); --slab-bg: linear-gradient(160deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .12) 100%); --slab-border: 1px solid rgba(255, 255, 255, .58); /* Stoneledger Hosts' sample month (site/hosts.css): the page's own colour under the glass, so its figures read wherever the art behind is bright (7 Oct 2026). */ --hx-demo-veil: rgba(246, 244, 240, .70); /* 59px + the 1px border = 60, pulled back out: the edge lands 36px inside the section's 96px, which is where it always sat. */ --slab-pad: 59px; --slab-pull: -60px; --slab-edge: 1px; /* the border's width, given back to the gutter */ --slab-shadow: inset 0 1px 0 rgba(255, 255, 255, .70), 0 24px 60px rgba(11, 20, 28, .14); --mountain-glow: radial-gradient(50% 30% at 52% 86%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%); --mountain-filter: none; --shadow-card: 0 10px 30px rgba(11, 20, 28, .14); --shadow-raised: 0 24px 60px rgba(11, 20, 28, .26); --highlight-top: inset 0 1px 0 rgba(255, 255, 255, .75); } /* Phone width: the slabs keep the layout Cloud had before 27 Sep 2026. There the sections are 64px and the hero only 24px from the top, too little to pull a slab's padding back out of, so lining them up on a phone means giving the boxes less padding -- a design change, and the mobile pass is deliberately last (Dean, 18 Sep 2026). It belongs to that pass. */ @media (max-width: 620px) { [data-theme="chrome-flow"] { --section-pad: 36px; --section-land: 0px; --hero-pad-bottom: 36px; --section-tight-top: 36px; --hero-panel-pad: 56px; --hero-panel-pull: 0px; --slab-pad: 56px; --slab-pull: 0px; } } /* ===================================================================== 04 — LIQUID METAL (Dean, 2 Oct 2026; reference "Stoneledger Liquid Metal UI Showcase.png" in the brand folder, where it is called Topographic Cloud; it was briefly called Cloud, a name that now belongs to theme 02) Near-black blue-graphite, with Dean's liquid chrome contour mountains across the top of the page behind the hero, fading into the dark well before the first section. See-through smoked glass (Dean asked for the boxes to be more see-through), off-white words, and ivory for every action and every selected thing. The wordmark is the brand burgundy lifted towards the board's crimson, or it would vanish. ===================================================================== */ [data-theme="liquid-metal"] { --color-page: #071017; /* The hero exactly as it was first approved: the terrain to the right, 1000px tall, scrolling with the page. From its foot it carries on down the whole page (Dean, 2 Oct 2026: "needs to run down the page, not just be fixed to the top") as one strip of the same image and its mirror, repeated, which starts with the image's own bottom row - so it meets the hero's picture without a seam, at the same size and the same place, on any width of window. Held still instead, it slid up out of the hero on taller windows. A sharper copy goes to high-density screens. The words below the hero sit on see-through smoked glass (the slabs), as the product's do. */ --page-background: linear-gradient(90deg, #071017 0%, rgba(7, 16, 23, .94) 28%, rgba(7, 16, 23, .45) 58%, rgba(7, 16, 23, .12) 100%) 0 0 / 100% 100% no-repeat, linear-gradient(180deg, rgba(7, 16, 23, 0) 0, rgba(7, 16, 23, 0) 640px, rgba(7, 16, 23, .55) 1000px) top / 100% 1000px no-repeat, linear-gradient(rgba(7, 16, 23, .55), rgba(7, 16, 23, .55)) 0 1000px / 100% 100% no-repeat, image-set(url("/brand/img/topographic-terrain.webp") 1x, url("/brand/img/topographic-terrain-2x.webp") 2x) right top / auto 1000px no-repeat, url("/brand/img/topographic-terrain-continues.webp") right top 1000px / auto 2000px repeat-y, #071017; --color-surface: rgba(12, 23, 30, .52); --surface-card: linear-gradient(160deg, rgba(18, 30, 37, .58) 0%, rgba(10, 19, 25, .44) 100%); --color-surface-raised: rgba(22, 34, 42, .72); --color-surface-muted: rgba(255, 255, 255, .04); --color-surface-inverse: rgba(22, 34, 42, .70); --color-surface-inverse-2: rgba(16, 27, 34, .66); --card-inverse-border: rgba(243, 234, 221, .28); --color-text-primary: #F5F4F0; --color-text-secondary: #CDD1D2; --color-text-muted: #A3ABAE; --color-text-on-inverse: #F5F4F0; --color-text-on-inverse-muted: #A3ABAE; --color-brand-primary: #B5173B; /* The crimson for words and figures - the prices, the savings - lifted further than the wordmark's, on the same hue: under a price the wordmark's crimson came to 2.7:1 on this near-black page (6 Oct 2026, the legibility sweep, tools/site-visible.mjs); this comes to 5.2:1, so the price tables' figures, on their smoke over the terrain, stay over AA's 4.5:1 for small type (#E5335C, a step darker, came to 4.0-4.4 there). The other themes have none, so their words keep the wordmark's colour. */ --color-brand-ink: #E9496E; /* And a dark halo under those figures and the price tables' small print: unseen on the dark, it keeps them readable where a bright streak of the chrome shows through the see-through glass behind them. */ --text-halo: 0 0 2px rgba(7, 16, 23, .95), 0 0 6px rgba(7, 16, 23, .9), 0 0 16px rgba(7, 16, 23, .85), 0 0 30px rgba(7, 16, 23, .7); /* The price comparison tables keep a light smoke of their own, so the brightest streaks behind their figures show at well under half strength. A shade deeper since 10 Oct 2026 (.6 to .72): Stoneledger's £8 and £50 in crimson read at 4.4:1 over the brightest streak at 1440. */ --table-backing: rgba(7, 16, 23, .72); /* And Stoneledger's own row in them is marked with half the ivory, so the crimson in it stands off a dark band, not a grey one. */ --us-row-bg: color-mix(in srgb, var(--color-accent) 6%, transparent); /* The footer's small print on a veil of its own dark, as Chrome Flow's is on its light: the terrain runs on under every page, streaks and all (6 Oct 2026, the legibility sweep: under AA on a phone). */ --foot-veil: linear-gradient(180deg, rgba(7, 16, 23, 0) 0, rgba(7, 16, 23, .62) 120px); --color-brand-secondary: var(--sl-burgundy); --color-accent: #E9DCC4; --color-accent-on-inverse: #E9DCC4; --color-border: rgba(255, 255, 255, .10); --color-border-strong: rgba(255, 255, 255, .22); --color-button-primary-bg: #F4EBDE; --color-button-primary-text: #101820; --color-button-primary-hover: #FFF6EA; --color-button-secondary-bg: rgba(255, 255, 255, .04); --color-button-secondary-text: #F5F4F0; --color-button-secondary-border: rgba(245, 244, 240, .34); --color-link: #F1E4D0; --color-nav-bg: rgba(6, 14, 20, .64); --color-nav-text: #E3E5E5; /* Log in on the dark header: see-through cyan glass, light lettering, no glow, as on Modern Tech dark. */ --color-login-bg: linear-gradient(180deg, rgba(110, 228, 255, .20) 0%, rgba(34, 176, 224, .11) 100%); --color-login-bg-hover: linear-gradient(180deg, rgba(110, 228, 255, .30) 0%, rgba(34, 176, 224, .19) 100%); --color-login-border: rgba(120, 230, 255, .55); --color-login-text: #D4F7FF; --color-login-shine: inset 0 1px 0 rgba(255, 255, 255, .20); --color-nav-active: #F3EADD; --color-nav-border: rgba(255, 255, 255, .08); --color-icon: #E9DCC4; --color-icon-tile: rgba(255, 255, 255, .05); --color-chart-primary: #E9DCC4; --color-chart-secondary: #767D80; --color-focus: #E8DCC8; --color-switch-bg: rgba(255, 255, 255, .06); --color-switch-thumb: #F3EADD; --color-switch-icon: #B9BDBF; --color-switch-icon-on: #101820; --mock-bg: rgba(13, 23, 29, .74); --mock-sidebar: #0A1318; --mock-card: #121E25; --mock-border: rgba(255, 255, 255, .10); --mock-text: #F5F4F0; --mock-muted: #A3ABAE; --mock-sidebar-text: #CDD1D2; --mock-active-bg: #F3EADD; --mock-active-text: #101820; --mock-bar-1: #E9DCC4; --mock-bar-2: #767D80; --mock-positive: #4ADE80; --mock-wordmark: #B5173B; --color-panel-bg: linear-gradient(160deg, rgba(18, 30, 37, .60) 0%, rgba(10, 19, 25, .48) 100%); --color-closing-button-bg: #F4EBDE; --color-closing-button-text: #101820; --color-closing-button-border: transparent; --color-dialog-bg: rgba(14, 26, 33, .90); --color-field-bg: rgba(18, 30, 37, .95); --color-field-text: #F5F4F0; --shot-frame-bg: #071017; --callout-bg: linear-gradient(135deg, rgba(22, 34, 42, .62), rgba(10, 19, 25, .46)); --callout-ink: #F5F4F0; --callout-border: rgba(255, 255, 255, .20); --callout-pin: #F3EADD; --callout-pin-ink: #101820; --color-highlight-bg: #F3EADD; --color-highlight-text: #101820; --color-success: #4ADE80; --color-warning: #FBBF24; --color-error: #F87171; --color-info: #7DB7E8; --glass-blur: blur(16px) saturate(1.2); --hero-panel-bg: none; --hero-panel-border: 0; --hero-panel-pad: 0; --hero-panel-pull: 0px; --hero-panel-edge: 0px; --hero-panel-shadow: none; /* Every section on see-through smoked glass, drawn outward into the section's own spacing exactly as Glass's slabs are, so the words sit where they do in every other theme and nothing jumps on switching. */ --section-land: 60px; --slab-bg: linear-gradient(160deg, rgba(14, 25, 32, .58) 0%, rgba(10, 19, 25, .46) 100%); --slab-border: 1px solid rgba(225, 232, 234, .11); /* Stoneledger Hosts' sample month: its crimson figure measured 2.1:1 where the bright metal shows through the glass (the legibility sweep, 7 Oct 2026), so the page's own colour goes under it. */ --hx-demo-veil: rgba(7, 16, 23, .62); --slab-pad: 59px; --slab-pull: -60px; --slab-edge: 1px; --slab-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .30); /* The terrain behind the hero is the art here; the mountain keeps its room, unseen, so the hero lays out exactly as in the other themes. */ --mountain-glow: none; --mountain-filter: none; --hero-mountain-opacity: 0; --hero-grid-blur: none; --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 34px rgba(0, 0, 0, .30); --shadow-raised: 0 22px 56px rgba(0, 0, 0, .45); --highlight-top: inset 0 1px 0 rgba(255, 255, 255, .07); } /* Phone width (5 Oct 2026, Dean: the phone's backgrounds "need to look better. Computer version is ok"). The computer's own layering, sized for a phone: the page's dark to 400px, so the words stand on calm; then the terrain, 800px tall, rising behind the product picture; then running on down the page from its own bottom row, at the same size, as it does on the computer. Until then a phone repeated a small tile of the picture above its mirror every 440px or so, which read as stripes. The veil is heavier than the computer's because a phone's words run the full width - the crimson words most of all. The slabs take Glass's phone spacing, for the same reason Glass does (see above). */ @media (max-width: 620px) { [data-theme="liquid-metal"] { --page-background: linear-gradient(180deg, #071017 0, #071017 400px, rgba(7, 16, 23, 0) 570px) 0 0 / 100% 570px no-repeat, linear-gradient(180deg, rgba(7, 16, 23, .50) 0, rgba(7, 16, 23, .50) 720px, rgba(7, 16, 23, .72) 1060px) 0 0 / 100% 1060px no-repeat, linear-gradient(rgba(7, 16, 23, .72), rgba(7, 16, 23, .72)) 0 1060px / 100% 100% no-repeat, url("/brand/img/topographic-terrain.webp") 70% 400px / auto 800px no-repeat, url("/brand/img/topographic-terrain-continues.webp") 70% 1200px / auto 1600px repeat-y, #071017; /* The calm version, for the pages whose words or form run on where the terrain rises (site.css, "calm"). */ --page-background-calm: linear-gradient(180deg, #071017 0, #071017 400px, rgba(7, 16, 23, 0) 570px) 0 0 / 100% 570px no-repeat, linear-gradient(rgba(7, 16, 23, .82), rgba(7, 16, 23, .82)) 0 0 / 100% 100% no-repeat, url("/brand/img/topographic-terrain.webp") 70% 400px / auto 800px no-repeat, url("/brand/img/topographic-terrain-continues.webp") 70% 1200px / auto 1600px repeat-y, #071017; --section-pad: 36px; --section-land: 0px; --hero-pad-bottom: 36px; --section-tight-top: 36px; --slab-pad: 56px; --slab-pull: 0px; } } /* A tablet held upright, 621-900px, every page in one column: the hero's words still run most of the width over the terrain (2.4:1 under the introduction at 621px; 3.3 to 4.5 at 768, under AA for its 18px), so the phone's layering carries on to there, as Ridge Peak's does: the page's dark to 400px, then the terrain rising. Every page but the home page takes the calm version (site.css), as Ridge Peak's and Chrome Flow's do. */ @media (min-width: 621px) and (max-width: 900px) { [data-theme="liquid-metal"] { --page-background: linear-gradient(180deg, #071017 0, #071017 400px, rgba(7, 16, 23, 0) 570px) 0 0 / 100% 570px no-repeat, linear-gradient(180deg, rgba(7, 16, 23, .50) 0, rgba(7, 16, 23, .50) 720px, rgba(7, 16, 23, .72) 1060px) 0 0 / 100% 1060px no-repeat, linear-gradient(rgba(7, 16, 23, .72), rgba(7, 16, 23, .72)) 0 1060px / 100% 100% no-repeat, url("/brand/img/topographic-terrain.webp") 70% 400px / auto 800px no-repeat, url("/brand/img/topographic-terrain-continues.webp") 70% 1200px / auto 1600px repeat-y, #071017; --page-background-calm: linear-gradient(180deg, #071017 0, #071017 400px, rgba(7, 16, 23, 0) 570px) 0 0 / 100% 570px no-repeat, linear-gradient(rgba(7, 16, 23, .82), rgba(7, 16, 23, .82)) 0 0 / 100% 100% no-repeat, url("/brand/img/topographic-terrain.webp") 70% 400px / auto 800px no-repeat, url("/brand/img/topographic-terrain-continues.webp") 70% 1200px / auto 1600px repeat-y, #071017; } } /* ===================================================================== 02 — CHROME FLOW: its background (Dean, 3 Oct 2026, one of three landscapes tried that evening and the one chosen: "take the cloud theme and i want you to build 3 new themes which layer in each of the below images"; "remember the colour ways etc for fonts should remain the same as cloud theme, its really just the layering in of the background". Reference: "Stoneledger Chrome Landscape Showcase.png" in the brand folder.) Cloud's colours and glass (its block above) with Dean's silver and bronze liquid metal laid in exactly as Liquid metal's terrain is (Dean: "the way you layered the liquid metal background image into the background for that theme is perfect"): behind the hero to the right, 1000px tall, scrolling with the page, then running on down the whole page from its own bottom row, so it never slides out of the hero on a tall window. The picture is mirrored so its main peak stands to the right of the words, as in the showcase. On a window wider than the picture (1777px at this size) its left edge fades into the mist rather than ending in a line. The hero's mountain goes ("the hero graphic can be removed") and keeps its room unseen; the hero has no dark glass panel, so its words take Cloud's own deep slate. A mist the colour of the picture's sky keeps the words' side of the hero calm, and veils the landscape below the hero, where the sections sit on Cloud's light glass slabs. ===================================================================== */ [data-theme="chrome-flow"] { --color-page: #E2D8CD; --page-background: linear-gradient(90deg, rgba(236, 229, 220, .95) 0%, rgba(236, 229, 220, .86) 28%, rgba(236, 229, 220, .40) 54%, rgba(236, 229, 220, .06) 84%, rgba(236, 229, 220, 0) 100%) 0 0 / 100% 100% no-repeat, linear-gradient(180deg, rgba(232, 224, 214, 0) 0, rgba(232, 224, 214, 0) 640px, rgba(232, 224, 214, .58) 1000px) top / 100% 1000px no-repeat, linear-gradient(rgba(232, 224, 214, .58), rgba(232, 224, 214, .58)) 0 1000px / 100% 100% no-repeat, linear-gradient(90deg, #E2D8CD 0, rgba(226, 216, 205, 0) 440px) right top / 1777px 100% no-repeat, image-set(url("/brand/img/chrome-flow.webp") 1x, url("/brand/img/chrome-flow-2x.webp") 2x) right top / auto 1000px no-repeat, url("/brand/img/chrome-flow-continues.webp") right top 1000px / auto 2000px repeat-y, #E2D8CD; /* The footer's small print on a veil of its own (6 Oct 2026, the legibility sweep: 2.5 to 3:1 on a phone, under AA on a computer). The picture runs on under every page, so wherever a page ends, its chrome can come up under the footer. */ --foot-veil: linear-gradient(180deg, rgba(236, 229, 220, 0) 0, rgba(236, 229, 220, .72) 120px); /* A product page's comparison table, at every width (9 Oct 2026, the legibility sweep: 4.28:1 under its small print at 1440, its last column over the chrome): the mist a tablet's price table keeps. */ --pp-cmp-backing: rgba(236, 229, 220, .62); }/* No dark panel round the hero, and the landscape sharp behind it, in the mountain's place. */ [data-theme="chrome-flow"] { --hero-panel-bg: none; --hero-panel-border: 0; --hero-panel-pad: 0; --hero-panel-pull: 0px; --hero-panel-edge: 0px; --hero-panel-shadow: none; --hero-grid-blur: none; --hero-mountain-opacity: 0; --mountain-glow: none; } /* Phone width (5 Oct 2026, Dean: the phone's backgrounds "need to look better. Computer version is ok"). The computer's own layering, sized for a phone: the page's colour to 360px, so the words stand on calm; then the picture, 800px tall, its main peak just under the hero's buttons and rising behind the product picture; then running on down the page from its own bottom row, at the same size, under the computer's mist. Until then a phone repeated a small tile of the picture above its mirror every 440px or so, which read as stripes. */ @media (max-width: 620px) { [data-theme="chrome-flow"] { --page-background: linear-gradient(180deg, #E2D8CD 0, #E2D8CD 360px, rgba(226, 216, 205, 0) 530px) 0 0 / 100% 530px no-repeat, linear-gradient(180deg, rgba(236, 229, 220, .22) 0, rgba(236, 229, 220, .22) 700px, rgba(232, 224, 214, .58) 1060px) 0 0 / 100% 1060px no-repeat, linear-gradient(rgba(232, 224, 214, .58), rgba(232, 224, 214, .58)) 0 1060px / 100% 100% no-repeat, url("/brand/img/chrome-flow.webp") 70% 360px / auto 800px no-repeat, url("/brand/img/chrome-flow-continues.webp") 70% 1160px / auto 1600px repeat-y, #E2D8CD; /* The calm version, for the pages whose words or form run on where the picture rises (site.css, "calm"). */ --page-background-calm: linear-gradient(180deg, #E2D8CD 0, #E2D8CD 360px, rgba(226, 216, 205, 0) 530px) 0 0 / 100% 530px no-repeat, linear-gradient(rgba(236, 229, 220, .80), rgba(236, 229, 220, .80)) 0 0 / 100% 100% no-repeat, url("/brand/img/chrome-flow.webp") 70% 360px / auto 800px no-repeat, url("/brand/img/chrome-flow-continues.webp") 70% 1160px / auto 1600px repeat-y, #E2D8CD; } } /* Tablet widths (6 Oct 2026, the legibility sweep: the introduction at 3.2 to 4.5:1 on the chrome at 1024 and 768, under AA for its 18px), as Ridge Peak's. 901-1199px, the hero still in two columns: the computer's layering with the mist held across to the end of the words' column. */ @media (min-width: 901px) and (max-width: 1199px) { [data-theme="chrome-flow"] { --page-background: linear-gradient(90deg, rgba(236, 229, 220, .95) 0%, rgba(236, 229, 220, .90) 56%, rgba(236, 229, 220, .40) 66%, rgba(236, 229, 220, .06) 86%, rgba(236, 229, 220, 0) 100%) 0 0 / 100% 100% no-repeat, linear-gradient(180deg, rgba(232, 224, 214, 0) 0, rgba(232, 224, 214, 0) 640px, rgba(232, 224, 214, .58) 1000px) top / 100% 1000px no-repeat, linear-gradient(rgba(232, 224, 214, .58), rgba(232, 224, 214, .58)) 0 1000px / 100% 100% no-repeat, linear-gradient(90deg, #E2D8CD 0, rgba(226, 216, 205, 0) 440px) right top / 1777px 100% no-repeat, image-set(url("/brand/img/chrome-flow.webp") 1x, url("/brand/img/chrome-flow-2x.webp") 2x) right top / auto 1000px no-repeat, url("/brand/img/chrome-flow-continues.webp") right top 1000px / auto 2000px repeat-y, #E2D8CD; } } /* 621-900px, every page in one column: the phone's layering - the page's colour behind the hero's words, the picture rising below them, behind the home page's product picture. Every other page's words carry on where it rises (a section's heading on it at 768, 2.6:1), so they take the calm version (site.css), as Ridge Peak's do. */ @media (min-width: 621px) and (max-width: 900px) { [data-theme="chrome-flow"] { --page-background: linear-gradient(180deg, #E2D8CD 0, #E2D8CD 360px, rgba(226, 216, 205, 0) 530px) 0 0 / 100% 530px no-repeat, linear-gradient(180deg, rgba(236, 229, 220, .22) 0, rgba(236, 229, 220, .22) 700px, rgba(232, 224, 214, .58) 1060px) 0 0 / 100% 1060px no-repeat, linear-gradient(rgba(232, 224, 214, .58), rgba(232, 224, 214, .58)) 0 1060px / 100% 100% no-repeat, url("/brand/img/chrome-flow.webp") 70% 360px / auto 800px no-repeat, url("/brand/img/chrome-flow-continues.webp") 70% 1160px / auto 1600px repeat-y, #E2D8CD; --page-background-calm: linear-gradient(180deg, #E2D8CD 0, #E2D8CD 360px, rgba(226, 216, 205, 0) 530px) 0 0 / 100% 530px no-repeat, linear-gradient(rgba(236, 229, 220, .80), rgba(236, 229, 220, .80)) 0 0 / 100% 100% no-repeat, url("/brand/img/chrome-flow.webp") 70% 360px / auto 800px no-repeat, url("/brand/img/chrome-flow-continues.webp") 70% 1160px / auto 1600px repeat-y, #E2D8CD; } } /* A tablet or phone (6 Oct 2026, the legibility sweep): a price table runs the full width, over the chrome on the right as well, so it keeps a little of the mist of its own (2.4 to 2.7:1 under its small print). */ @media (max-width: 1199px) { [data-theme="chrome-flow"] { --table-backing: rgba(236, 229, 220, .62); /* the guide and tool pages' cards (.crc-card) the same way: a row's third card sits over the chrome (16 Oct 2026) */ --card-backing: rgba(236, 229, 220, .62); } } /* ===================================================================== 01 — RIDGE PEAK: its background (Dean, 3 Oct 2026, tried that evening and chosen to replace Modern Tech light: "then there is the modern tech light theme. i want you to do the same and layer in this image ... hero graphic can be removed and the image layered in". Reference: "ChatGPT Image Oct 3, 2026, 08_24_44 PM.png" in the brand folder.) Modern Tech light's colours (its block above) with Dean's red ridge standing in the hero to the right, its summit right of centre at every width, scrolling with the page. It is one mountain cut out, so it is laid on the cream rather than filling the page: its left and lower slopes are feathered away (tools/brand/make-landscape-themes.py), a warm haze sits behind it, and its foot dissolves into the page, which is Modern Tech light's own. ===================================================================== */ [data-theme="ridge-peak"] { --page-background: linear-gradient(90deg, rgba(250, 248, 242, .97) 0%, rgba(250, 248, 242, .90) 30%, rgba(250, 248, 242, .40) 50%, rgba(250, 248, 242, 0) 68%) 0 0 / 100% 1100px no-repeat, linear-gradient(180deg, rgba(250, 248, 242, 0) 0, rgba(250, 248, 242, 0) 760px, rgba(250, 248, 242, .82) 1060px, #FAF8F2 1240px) 0 0 / 100% 1240px no-repeat, image-set(url("/brand/img/ridge-peak.webp") 1x, url("/brand/img/ridge-peak-2x.webp") 2x) calc(50% + 388px) 92px / auto 1000px no-repeat, radial-gradient(1200px 820px at calc(50% + 300px) 420px, rgba(242, 208, 190, .62) 0%, rgba(246, 226, 212, .34) 45%, rgba(250, 248, 242, 0) 72%) 0 0 / 100% 1240px no-repeat, #FAF8F2; --hero-mountain-opacity: 0; --mountain-glow: none; } /* Phone width (5 Oct 2026, Dean: the phone's backgrounds "need to look better. Computer version is ok"). As on the computer, the words stand on the cream and the peak stands clear of them: here it rises below them, its summit just under the hero's buttons, behind the product picture, in its warm haze, its foot dissolving into the cream by 1180px. Until then it stood behind the headline - the burgundy name on the red rock - under a veil that paled it. The computer's copy, so the summit is sharp. */ @media (max-width: 620px) { [data-theme="ridge-peak"] { --page-background: linear-gradient(180deg, rgba(250, 248, 242, .10) 0, rgba(250, 248, 242, .10) 640px, rgba(250, 248, 242, .55) 900px, rgba(250, 248, 242, .88) 1060px, #FAF8F2 1180px) 0 0 / 100% 1180px no-repeat, url("/brand/img/ridge-peak.webp") 30% 560px / auto 600px no-repeat, radial-gradient(560px 460px at 60% 760px, rgba(242, 208, 190, .55) 0%, rgba(246, 226, 212, .30) 45%, rgba(250, 248, 242, 0) 72%) 0 0 / 100% 1180px no-repeat, #FAF8F2; /* The calm version, for the pages whose words or form run on where the peak rises (site.css, "calm"). */ --page-background-calm: linear-gradient(180deg, rgba(250, 248, 242, .82) 0, rgba(250, 248, 242, .82) 900px, #FAF8F2 1180px) 0 0 / 100% 1180px no-repeat, url("/brand/img/ridge-peak.webp") 30% 560px / auto 600px no-repeat, radial-gradient(560px 460px at 60% 760px, rgba(242, 208, 190, .55) 0%, rgba(246, 226, 212, .30) 45%, rgba(250, 248, 242, 0) 72%) 0 0 / 100% 1180px no-repeat, #FAF8F2; } } /* Tablet widths (6 Oct 2026, the legibility sweep, tools/site-visible.mjs). The computer's layering ran on down to 621px, and on a narrower window the peak, still at the computer's size and place, came in behind the words: 1.0 to 1.3:1 under the introduction on almost every page, and on the home page the burgundy name and the saving on the red rock. 901-1199px, the hero still in two columns: the computer's layering, with the cream held across to the end of the words' column and the peak drawn to the right of it, its summit at about three-quarters of the width. */ @media (min-width: 901px) and (max-width: 1199px) { [data-theme="ridge-peak"] { --page-background: linear-gradient(90deg, rgba(250, 248, 242, .97) 0%, rgba(250, 248, 242, .92) 56%, rgba(250, 248, 242, .40) 64%, rgba(250, 248, 242, 0) 74%) 0 0 / 100% 1100px no-repeat, linear-gradient(180deg, rgba(250, 248, 242, 0) 0, rgba(250, 248, 242, 0) 760px, rgba(250, 248, 242, .82) 1060px, #FAF8F2 1240px) 0 0 / 100% 1240px no-repeat, image-set(url("/brand/img/ridge-peak.webp") 1x, url("/brand/img/ridge-peak-2x.webp") 2x) calc(50% + 424px) 92px / auto 1000px no-repeat, radial-gradient(1000px 760px at calc(50% + 300px) 420px, rgba(242, 208, 190, .62) 0%, rgba(246, 226, 212, .34) 45%, rgba(250, 248, 242, 0) 72%) 0 0 / 100% 1240px no-repeat, #FAF8F2; /* The saving, top right, comes down beside the summit here, and the price tables meet the foot of the peak: each on a little cream. */ --peaks-backing: rgba(250, 248, 242, .86); --table-backing: rgba(250, 248, 242, .62); } } /* 621-900px, every page in one column: as on a phone, the words stand on the cream and the peak rises below them - on the home page its summit just under the buttons and the saving, behind the product picture - dissolving into the cream by 1300px. The other pages' words carry on where it rises, so they take it under a heavy veil (site.css, "calm"). */ @media (min-width: 621px) and (max-width: 900px) { [data-theme="ridge-peak"] { --page-background: linear-gradient(180deg, rgba(250, 248, 242, .10) 0, rgba(250, 248, 242, .10) 760px, rgba(250, 248, 242, .55) 1000px, rgba(250, 248, 242, .88) 1160px, #FAF8F2 1300px) 0 0 / 100% 1300px no-repeat, image-set(url("/brand/img/ridge-peak.webp") 1x, url("/brand/img/ridge-peak-2x.webp") 2x) calc(50% + 250px) 540px / auto 760px no-repeat, radial-gradient(760px 600px at 62% 820px, rgba(242, 208, 190, .55) 0%, rgba(246, 226, 212, .30) 45%, rgba(250, 248, 242, 0) 72%) 0 0 / 100% 1300px no-repeat, #FAF8F2; --page-background-calm: linear-gradient(180deg, rgba(250, 248, 242, .82) 0, rgba(250, 248, 242, .82) 1000px, #FAF8F2 1300px) 0 0 / 100% 1300px no-repeat, image-set(url("/brand/img/ridge-peak.webp") 1x, url("/brand/img/ridge-peak-2x.webp") 2x) calc(50% + 250px) 540px / auto 760px no-repeat, radial-gradient(760px 600px at 62% 820px, rgba(242, 208, 190, .55) 0%, rgba(246, 226, 212, .30) 45%, rgba(250, 248, 242, 0) 72%) 0 0 / 100% 1300px no-repeat, #FAF8F2; } }