/* GENERATED by tools/app-tokens.mjs — DO NOT EDIT. * * Source of truth: assets/css/styles.css (8 :root blocks, 4 @font-face rules). * The marketing site and this portal are separate Netlify origins and must * still look like one company, so the design tokens are carried across * rather than re-invented. Change them in styles.css and regenerate: * * node tools/app-tokens.mjs * * Block order is significant — later :root blocks override earlier ones. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/archivo-var.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-var.woff2') format('woff2'); } @font-face { font-family: 'Aboreto'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/aboreto-400.woff2') format('woff2'); } @font-face { font-family: 'Questrial'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/questrial-400.woff2') format('woff2'); } :root { /* Paper — cool neutral so it sits under slate + green without muddying */ --paper: #F5F4F0; --paper-2: #ECEAE3; --paper-3: #E0DDD3; --white: #FFFFFF; /* Ink */ --ink: #1B2229; --stone: #5C6771; --faint: #636B73; /* was #8C959C (2.78:1) — now 4.9:1 on paper, 4.6:1 on paper-2 */ /* Brand green — primary accent, buttons, links */ --x-bronze: #095E41; --x-bronze-deep: #063F2C; --x-bronze-soft: #0E7A54; --sage: #9ACBB2; /* lightened from #7FB79A for AA on slate */ /* Brand slate — inverted bands, so the badge sits on its own colour family */ --slate: #374550; --slate-deep: #28313A; /* Secondary accent aliases: green on light, sage on dark */ --clay: #095E41; --clay-soft: #9ACBB2; /* Lines */ --line: rgba(27, 34, 41, 0.13); --line-2: rgba(27, 34, 41, 0.26); --line-warm: rgba(9, 94, 65, 0.24); /* On dark (inverted bands) */ --bone: #F3F5F4; --bone-mute: rgba(243, 245, 244, 0.72); --bone-line: rgba(243, 245, 244, 0.20); /* Shadow */ --sh-sm: 0 1px 2px rgba(27,34,41,0.05); --sh: 0 1px 2px rgba(27,34,41,0.05), 0 14px 28px -22px rgba(27,34,41,0.45); --sh-lg: 0 2px 4px rgba(27,34,41,0.05), 0 30px 60px -35px rgba(27,34,41,0.5); /* Type */ --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); --step-1: clamp(1.18rem, 1.09rem + 0.44vw, 1.46rem); --step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem); --step-3: clamp(1.95rem, 1.6rem + 1.75vw, 3.1rem); --step-4: clamp(2.5rem, 1.85rem + 3.2vw, 4.6rem); --step-5: clamp(3.1rem, 1.95rem + 5.8vw, 7.2rem); --gutter: clamp(1.15rem, 4vw, 3.5rem); --max: 1320px; --max-narrow: 820px; --nav-h: 82px; --r-sm: 3px; --r: 6px; --r-lg: 12px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } :root { --glass: rgba(255, 255, 255, 0.58); --glass-strong: rgba(255, 255, 255, 0.74); --glass-edge: rgba(255, 255, 255, 0.92); --glass-ring: rgba(27, 34, 41, 0.07); --glass-lift: 0 1px 0 rgba(255,255,255,0.85) inset, 0 0 0 1px var(--glass-ring), 0 16px 40px -26px rgba(27, 34, 41, 0.42); --glass-lift-h: 0 1px 0 rgba(255,255,255,0.95) inset, 0 0 0 1px rgba(9, 94, 65, 0.16), 0 26px 60px -30px rgba(27, 34, 41, 0.5); --blur: blur(18px) saturate(150%); } :root { --r-sm: 6px; --r: 12px; --r-lg: 18px; } :root { /* 1. FILL — was a flat rgba(255,255,255,0.58). Same average opacity, but graded, so a card looks lit rather than painted. Slightly denser at the top also means text at the top of a card sits on MORE opacity, not less, so this reads better and measures better at the same time. */ --glass-grad: linear-gradient( 168deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.62) 42%, rgba(255, 255, 255, 0.52) 100%); /* 2. ELEVATION — was 3 layers. Six, with the near pair tight and dark and the far pair wide and weak, is what makes an object sit ON a surface instead of floating over a grey smudge. */ --glass-lift: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(27, 34, 41, 0.045), 0 0 0 1px rgba(27, 34, 41, 0.055), 0 1px 2px rgba(27, 34, 41, 0.035), 0 8px 18px -10px rgba(27, 34, 41, 0.16), 0 30px 60px -34px rgba(27, 34, 41, 0.34); --glass-lift-h: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(27, 34, 41, 0.05), 0 0 0 1px rgba(9, 94, 65, 0.14), 0 2px 4px rgba(27, 34, 41, 0.05), 0 14px 28px -14px rgba(9, 94, 65, 0.16), 0 42px 74px -38px rgba(27, 34, 41, 0.42); } :root { --r-sm: 4px; --r: 10px; --r-lg: 14px; } :root { /* GROUNDS — warm, and three of them. `--paper` keeps its name because 6,800 lines reference it; what it means is "the page". */ --paper: #161A1D; --paper-2: #1D2226; --paper-3: #262D33; /* the mid-tone: cards, rails, raised blocks */ --white: #191E21; /* form fields and the estimate card */ /* INK IS LIGHT, AND WARM. */ --ink: #FFFFFF; --stone: #AFA48F; --faint: #9C9080; --bone: #FFFFFF; --bone-mute: rgba(255, 255, 255, 0.72); --bone-line: rgba(255, 255, 255, 0.18); /* THE GREEN, AND A SECOND ONE UNDER IT. --volt on --paper ....... 6.65 (links, marks, rules) --paper on --volt ....... 6.65 (button labels: the ground, not the ink) --volt on --paper-3 ..... 5.19 (marks on the mid-tone) --ink on --paper ...... 14.62 (body and headings) --stone on --paper ...... 6.71 (secondary copy) */ /* MATCHED TO THE MARK, 2026-09-08 — the same system styles.css runs. This file was a copy of the site's PRE-STEEL tokens, so the office and the site were two different brands. --mark (steel) is every text mark and rule; --volt (green) is a fill. */ --mark: #9EA9B3; --mark-hi: #BAC3C9; --volt: #33703C; --volt-hi: #26552E; --sage: #9EA9B3; /* the quiet green: planting, rules, tints */ --clay: #33703C; --clay-soft: #9EA9B3; /* Bands still go darker than the page — depth, not a floating panel. */ --slate: #0D2318; --slate-deep: #0E1113; --line: rgba(255, 255, 255, 0.13); --line-2: rgba(255, 255, 255, 0.24); --line-warm: rgba(158, 169, 179, 0.30); /* GEOMETRY — square, and wider than the reference's 1140px, because the pictures are the argument and they need the room. */ --r-sm: 0px; --r: 0px; --r-lg: 0px; --max: 1280px; --nav-h: 216px; --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } :root { --sh-sm: none; --sh: none; --sh-lg: none; } :root { --nav-h: 216px; }