/* ============================================================================= styles/TerraTheme.css - THE PALETTE. Defined ONCE, for every public page. ----------------------------------------------------------------------------- WHAT THIS FILE IS FOR Terra's public pages each have their own stylesheet, which is fine - they are genuinely different layouts. What was NOT fine is that each one also carried its own COPY of the colours. By 2026-08-14 there were FOUR palettes: styles/TerraLanding.css --page-bg / --surface / --text / --brand (login, pricing, checkout, subscribed, disclaimer, reset password, admin) styles/TerraLandingPage.css --paper / --card / --ink / --accent (the landing page) TerraQuickStart.html --qs-* (inline) TerraResidualLandValuation.html --art-* (inline) Four names for one background, and FOUR DIFFERENT GREENS: #3f8b63, #5aa87d, and #3f9a6b twice. The two article pages were also on a different dark grey (#14171c against everything else's #101315), which is why they never quite looked like the rest of the site. The first two files had actually been kept in step BY HAND - there is a comment in TerraLandingPage.css reading "these two values ARE the --brand-dark token from TerraLanding.css". That works right up until someone changes one and not the other, which is exactly what had happened. HOW IT WORKS Two layers: 1. CANONICAL ROLE TOKENS (--terra-*) - the real values, defined here and nowhere else. Change the brand green in ONE place and every public page follows. 2. ALIASES - each page family's existing token names, pointing at the role tokens above. So `--brand`, `--accent`, `--qs-accent` and `--art-accent` all still exist and every existing rule keeps working unchanged; they simply resolve to the same source now. The alias layer is why this change is safe: NO page's stylesheet rules were rewritten. Only where the numbers come from. LOAD IT FIRST. Every page links this BEFORE its own stylesheet, so a page can still override a token deliberately (later definition of equal specificity wins). Nothing does today, but the door is open for a genuine exception. ⚠️ THE APP (TerraFrontEnd.html) IS NOT INCLUDED. It has its own theme system: `data-terra-theme` rather than `data-theme`, and a USER-CONFIGURABLE accent (--terra-accent) with several tokens derived from it in CSS via color-mix(). Folding that in would mean deciding what a user's chosen accent does to the marketing pages, which is a design question, not a tidy-up. Left alone deliberately. THEME SWITCHING is unchanged and was already consistent: a small script in each page's reads localStorage 'terraThemePreset' (written by the app's Settings switcher) and sets data-theme="light" for any non-dark value. Dark is the default and lives on bare :root. ============================================================================= */ /* ============================================================================= 0. THE BRAND FACE ----------------------------------------------------------------------------- The TERRA wordmark is set in Days One on every public page, and it is meant to be pixel-identical everywhere - "the brand should not shift as a visitor moves between pages", as the note in TerraLanding.html puts it. Declared here because this file is the one thing every public page loads. Before this, the face was declared only in TerraLanding.css and TerraLandingPage.css, so the two pages with inline styles (Quick Start and the insights article) could not use it and fell back to bold Inter with wide letter-spacing - a visibly different wordmark. Those two files still carry their own identical @font-face. That is harmless: the browser keys a font on family + source, so the same declaration twice is one font and one download, not two. ============================================================================= */ @font-face { font-family: 'Days One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/fonts/daysone-latin.woff2') format('woff2'); } /* ============================================================================= 1. CANONICAL ROLE TOKENS - DARK (the default) ============================================================================= */ :root { /* ---- Grounds ------------------------------------------------------------- Two, and the difference is deliberate. --terra-paper is the marketing ground (the landing page); --terra-bg is the utility ground (login, pricing, admin, the article pages). In DARK they are the same value, so the distinction is invisible here - it only appears in light mode, where the landing page sits on white and the utility pages on a warm off-white so their white cards still read as cards. See the light block below. */ --terra-paper: #101315; --terra-bg: #101315; /* ---- Raised surfaces ----------------------------------------------------- --terra-surface is a card; --terra-surface-2 is a slightly lighter band or inset used to separate a strip of page from the ground; --terra-surface-alt is the subtlest of the three, for alternating page sections. */ --terra-surface: #171d20; --terra-surface-2: #1c2226; --terra-surface-alt: #161b1e; /* ---- Text ---------------------------------------------------------------- --terra-ink is body text, --terra-ink-2 a softened variant for secondary paragraphs, --terra-muted for captions and labels. Where the four old palettes disagreed on muted, the HIGHER-CONTRAST value won: #a3aeaa rather than #93a09a on dark, and #5c6b64 rather than #6f7a72 on light. A tie-break on legibility rather than on which file was newer. */ --terra-ink: #e7ece9; --terra-ink-2: #bcc6c1; --terra-muted: #a3aeaa; --terra-heading: #ffffff; /* ---- Lines --------------------------------------------------------------- Two weights: --terra-line for a quiet divider, --terra-line-2 where a border has to hold a shape (inputs, cards, buttons). */ --terra-line: #2b3338; --terra-line-2: #3a444a; /* ---- Brand green --------------------------------------------------------- THE ONE PLACE TO CHANGE THE GREEN. Four shades, because the pages genuinely use different weights for different jobs and every one of them is wanted: --terra-accent the canopy green. Landing page buttons and rules. --terra-accent-deep a darker, quieter green. Login/pricing buttons. --terra-accent-text green used AS TEXT - links, tag pills, the "go" arrows. Must stay legibly green in BOTH themes, so it is pale on dark and mid-dark on light. Never a fill. --terra-wordmark the TERRA logotype. Tracks accent-text on dark and goes near-black on light. See the warning below. --terra-on-accent is what goes ON TOP of an accent fill, and must always be checked against whichever accent it sits on. */ --terra-accent: #5aa87d; --terra-accent-hover: #74bd93; --terra-accent-deep: #3f8b63; --terra-accent-deep-hover: #4e9b72; --terra-accent-text: #9ad3b4; /* ⚠️ THE WORDMARK IS ITS OWN ROLE, not a second name for --terra-accent-text. In DARK the two are identical, which is exactly why they look interchangeable and are not: in LIGHT the wordmark goes near-black (#01291a) while accent-text has to stay a READABLE GREEN (#20503a), because accent-text colours the links, the tag pills and the "go" arrows. Merging them turned every link on the landing page black in light mode. */ --terra-wordmark: #9ad3b4; --terra-on-accent: #0b1310; --terra-tint: #1b2a22; /* ---- Depth --------------------------------------------------------------- Two shadows: a large one for modals and hero cards, a small one for the everyday raised element. */ --terra-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); --terra-shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.35); --terra-radius: 12px; /* ---- Bands and footer ---------------------------------------------------- A "band" is a full-width strip in the opposite polarity to the page, used on the landing page to break up a long scroll. The footer is dark in BOTH themes by design, which is why its tokens are near-identical below. */ --terra-band: #1a2620; --terra-band-ink: #dfe7e2; --terra-footer-bg: #0a0f0d; --terra-footer-ink: #aeb9b2; --terra-footer-line: #1a231e; --terra-header-bg: rgba(16, 19, 21, 0.88); /* ---- Type ---------------------------------------------------------------- */ --terra-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --terra-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ============================================================================= 2. CANONICAL ROLE TOKENS - LIGHT ----------------------------------------------------------------------------- Only the values change; nothing new is introduced here. Every COLOUR token above is redefined below. A colour defined in one block and not the other would silently keep its dark value in light mode, which is the classic way a theme springs a leak - so if you add a colour above, add it below too. Three tokens are deliberately absent from the light block because they do not vary by theme at all: --terra-radius, --terra-serif and --terra-sans. A corner radius and a font stack are the same in both themes. ============================================================================= */ :root[data-theme='light'] { /* ⚠️ THE TWO GROUNDS DIVERGE HERE, AND IT IS DELIBERATE. The landing page is designed on WHITE with tinted bands between sections. The utility pages put WHITE CARDS on their ground, so their ground has to be off-white or the cards have no edge and dissolve into the page. Making both #ffffff would flatten the login and pricing cards; making both #f4f3ef would all but erase the landing page's --terra-surface-alt bands, which are #f5f3ec. So: two grounds, one card colour. */ --terra-paper: #ffffff; --terra-bg: #f4f3ef; --terra-surface: #ffffff; --terra-surface-2: #eef1ec; --terra-surface-alt: #f5f3ec; --terra-ink: #16211c; --terra-ink-2: #43514a; --terra-muted: #5c6b64; --terra-heading: #14171c; --terra-line: #e6e2d8; --terra-line-2: #d9d4c8; --terra-accent: #2f6a4f; --terra-accent-hover: #20503a; --terra-accent-deep: #12524d; --terra-accent-deep-hover: #0d3f3b; /* On a LIGHT ground the pale green is unreadable, so both go dark - but not to the same degree. accent-text must still READ AS GREEN (it colours links); the wordmark is nearly black by design. */ --terra-accent-text: #20503a; --terra-wordmark: #01291a; --terra-on-accent: #ffffff; --terra-tint: #e9f1ec; --terra-shadow: 0 18px 50px rgba(22, 33, 28, 0.1); --terra-shadow-sm: 0 6px 20px rgba(22, 33, 28, 0.07); /* The band and footer stay DARK in light mode - they are meant to be the opposite polarity to the page, which is the whole point of a band. */ --terra-band: #16211c; --terra-band-ink: #dfe7e2; --terra-footer-bg: #0e1712; --terra-footer-ink: #aeb9b2; --terra-footer-line: #1f2b24; --terra-header-bg: rgba(255, 255, 255, 0.86); } /* ============================================================================= 3. ALIASES - the names the existing stylesheets already use ----------------------------------------------------------------------------- Defined once, OUTSIDE the theme blocks, because each one points at a role token rather than at a literal. When :root[data-theme='light'] redefines the role token, every alias follows automatically - so these do not need repeating per theme, and cannot fall out of step. ============================================================================= */ :root { /* ---- styles/TerraLanding.css ----------------------------------------- login, pricing, checkout, subscribed, disclaimer, reset password, admin. Note --brand maps to the DEEP accent and --brand-strong to the canopy one: that preserves exactly what these pages looked like before this file existed, rather than quietly restyling seven pages during a tidy-up. */ --page-bg: var(--terra-bg); /* ⚠️ --surface IS THE CARD, so it must follow --terra-surface, not --terra-surface-2. Matching on the DARK value alone is a trap: this sheet's old --surface was #1c2226 in dark (which is --terra-surface-2) but #ffffff in LIGHT (which is --terra-surface). Aliasing on the dark match would have given these pages #eef1ec cards on their #f4f3ef ground in light mode - near-identical, so every card would have lost its edge and dissolved into the page. The dark value shifts imperceptibly (#1c2226 -> #171d20); the light value stays exactly white, which is the one that mattered. */ --surface: var(--terra-surface); --text: var(--terra-ink); --muted: var(--terra-muted); --border: var(--terra-line-2); --shadow: var(--terra-shadow); --radius: var(--terra-radius); --brand: var(--terra-accent-deep); --brand-hover: var(--terra-accent-deep-hover); --brand-strong: var(--terra-accent); --brand-dark: var(--terra-wordmark); /* THE T MARK IS NOT A COLOUR AND IS NOT DEFINED HERE. It is now three pieces of artwork chosen by what sits behind it, and styles/TerraNav.css owns both the choice and the light override - see its header. Two reasons it does not live in this sheet, and the second is the binding one. It is not a colour, so it does not belong in a palette; and this file is INLINED WHOLESALE into the self-contained Quick Start guide that the welcome email attaches, where a url() would point at a file the recipient does not have. ⚠️ The token it replaced, --nav-t-filter, was once declared BOTH here and in TerraNav.css, both on a plain :root. Link order decided the winner, the theme-aware one lost, and the mark stayed white in light mode - invisible on the admin dashboard's white bar. tests/themeTokens.node.test.mjs fails if any token is ever declared twice at one specificity again. */ /* ---- styles/TerraLandingPage.css ------------------------------------- the landing page. */ --paper: var(--terra-paper); --alt: var(--terra-surface-alt); --alt2: var(--terra-surface-2); --card: var(--terra-surface); --ink: var(--terra-ink); --ink2: var(--terra-ink-2); --line: var(--terra-line); --line2: var(--terra-line-2); --accent: var(--terra-accent); --accent-hover: var(--terra-accent-hover); --accent-text: var(--terra-accent-text); --on-accent: var(--terra-on-accent); --tint: var(--terra-tint); --wordmark: var(--terra-wordmark); --band: var(--terra-band); --band-ink: var(--terra-band-ink); --header-bg: var(--terra-header-bg); --footer-bg: var(--terra-footer-bg); --footer-ink: var(--terra-footer-ink); --footer-line: var(--terra-footer-line); --shadow-sm: var(--terra-shadow-sm); --serif: var(--terra-serif); --sans: var(--terra-sans); /* ---- TerraQuickStart.html (inline