/* ===================================================================== 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; --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; --color-button-secondary-bg: transparent; --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); --color-dialog-bg: #152631; --color-field-bg: #121F28; --color-field-text: var(--sl-cream); --shot-frame-bg: #121F28; --callout-bg: linear-gradient(135deg, rgba(24, 46, 58, .72), rgba(18, 31, 40, .52)); --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: the mountain at the top of the page, its peaks to the right, under an even veil, fading into the page's own dark by 760px. */ @media (max-width: 620px) { [data-theme="modern-a"] { --page-background: linear-gradient(rgba(18, 31, 40, .62), rgba(18, 31, 40, .62)) 0 0 / 100% 760px no-repeat, linear-gradient(180deg, rgba(18, 31, 40, 0) 0, rgba(18, 31, 40, 0) 420px, #121F28 760px) 0 0 / 100% 760px no-repeat, url("/brand/img/modern-dark-phone.webp") right -120px top 64px / 220% auto 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; --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); /* 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; --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); --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. Phones scroll a background they are asked to hold still, so the terrain runs down the page instead: Dean's image above its own mirror, one tile, repeated, which meets itself without a seam. The words run the full width of the screen, so the veil is even. 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(rgba(7, 16, 23, .80), rgba(7, 16, 23, .80)), url("/brand/img/topographic-terrain-run.webp") center top / 100% auto repeat-y, #071017; --section-pad: 36px; --section-land: 0px; --hero-pad-bottom: 36px; --section-tight-top: 36px; --slab-pad: 56px; --slab-pull: 0px; } } /* ===================================================================== 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; }/* 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: the picture above its own mirror, repeated down the page under an even mist, as Liquid metal's is - the words run the full width of a phone, so there is no side for the landscape to stand on. */ @media (max-width: 620px) { [data-theme="chrome-flow"] { --page-background: linear-gradient(rgba(232, 224, 214, .74), rgba(232, 224, 214, .74)), url("/brand/img/chrome-flow-run.webp") center top / 100% auto repeat-y, #E2D8CD; } } /* ===================================================================== 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; } @media (max-width: 620px) { [data-theme="ridge-peak"] { --page-background: linear-gradient(rgba(250, 248, 242, .70), rgba(250, 248, 242, .70)) 0 0 / 100% 900px no-repeat, linear-gradient(180deg, rgba(250, 248, 242, 0) 0, rgba(250, 248, 242, 0) 520px, #FAF8F2 900px) 0 0 / 100% 900px no-repeat, url("/brand/img/ridge-peak-phone.webp") right -60px top 64px / 150% auto no-repeat, #FAF8F2; } }