/* ========================================================================== Tower Performance LLC — design tokens Generated from DESIGN-SYSTEM.md v1.0. Do not introduce ad-hoc hex values in components; every colour used on the site must appear here first. The two brand hexes are taken from the logo SVG itself, never re-sampled from the PNG or a screenshot. ========================================================================== */ :root { /* --- Brand — authoritative, do not alter ------------------------------ */ --tp-green: #24b04d; --tp-gray: #7f7f7f; /* --- Green scale, derived from #24B04D -------------------------------- */ /* Each step keeps the lightness of the previous ramp so the palette's tonal structure is unchanged; only the hue and saturation moved with the brand. The 600 and 700 steps are solved to their contrast targets rather than eyeballed. Regenerate with .audit/build-color-scale.php. */ --tp-green-50: #eff9f2; --tp-green-100: #d5efdc; --tp-green-200: #a8dfb8; --tp-green-300: #71ca8b; --tp-green-400: #3fb862; --tp-green-500: #24b04d; /* BRAND — 2.84:1 on white, so shapes and surfaces only. Never put text on it, and never use it as a background for white text. See --tp-action. */ --tp-green-600: #1a8038; /* 5.01:1 — smallest green that carries white text */ --tp-green-700: #176c30; /* 6.51:1 — the workhorse text green */ --tp-green-800: #135928; /* 8.44:1 */ --tp-green-900: #0d3c1b; /* 12.51:1 */ /* --- Gray scale, derived from #7F7F7F --------------------------------- */ --tp-gray-50: #f8f8f8; --tp-gray-100: #f0f0f0; --tp-gray-200: #dedede; --tp-gray-300: #c5c5c5; --tp-gray-400: #a5a5a5; --tp-gray-500: #7f7f7f; /* BRAND */ --tp-gray-600: #676767; /* 5.66:1 — smallest legible gray */ --tp-gray-700: #505050; /* 8.06:1 */ --tp-gray-800: #343434; --tp-gray-900: #212121; /* charcoal — primary body text, 16.10:1 */ --tp-gray-950: #141414; --tp-charcoal: var(--tp-gray-900); /* --- Semantic: surfaces ---------------------------------------------- */ --tp-surface: #ffffff; --tp-surface-alt: var(--tp-gray-50); --tp-surface-sunken: var(--tp-gray-100); --tp-surface-inverse: var(--tp-gray-900); --tp-surface-footer: var(--tp-gray-950); /* --- Semantic: text --------------------------------------------------- */ --tp-text: var(--tp-gray-900); --tp-text-secondary: var(--tp-gray-700); --tp-text-muted: var(--tp-gray-600); --tp-text-inverse: #ffffff; --tp-text-link: var(--tp-green-700); --tp-text-link-hover: var(--tp-green-800); /* --- The greens, and why there is more than one ---------------------- Four greens reach the screen, each with one job and no overlap. They are not interchangeable: contrast decides which one a given context can use, so collapsing them would break either legibility or the brand. --tp-green #24b04d the logo, and shapes on light surfaces only. 2.84:1 on white, so never text, never a fill behind white text. --tp-green-600 #1a8038 button and control fills. The lightest green that carries a white label at 5.01:1. --tp-green-700 #176c30 all green *text* on a light surface — links, eyebrows, statistics. 6.51:1. --tp-green-400 #3fb862 all green text on charcoal, where the ladder inverts: 6.33:1 there, but 2.6:1 on white. White is always #ffffff. Sampling a screenshot of white text on green returns something like #fbfdfc because the edge pixels are antialiased against the fill; that is a measurement artefact, not a second white. */ /* --- Semantic: lines -------------------------------------------------- */ --tp-border: var(--tp-gray-200); --tp-border-strong: var(--tp-gray-300); --tp-rule-accent: var(--tp-green); /* --- Semantic: interactive ------------------------------------------- These are backgrounds for white text, so they start at 600 rather than at the brand green. The new brand green is 2.84:1 against white — below even the 3:1 floor for UI components — so a primary button filled with it could not carry a readable label. The previous green was 3.59:1 and had the same problem in a milder form; the brighter brand colour simply made it impossible to ignore. --tp-rule-accent above still uses the brand green, because a rule is a shape and carries no text. */ --tp-action: var(--tp-green-600); --tp-action-hover: var(--tp-green-700); --tp-action-active: var(--tp-green-800); --tp-focus-ring: var(--tp-green-700); /* --- Status — deliberately outside the brand palette so a success message can never be mistaken for a call to action ---------------- */ --tp-danger: #b42318; --tp-warning: #b54708; --tp-info: #175cd3; /* --- Typography ------------------------------------------------------- */ --tp-font-heading: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif; --tp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --tp-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace; /* Fluid scale. Base 17px — chosen because this audience frequently reads on tablets in bright field conditions. */ --tp-display: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem); --tp-h1: clamp(2.125rem, 1.45rem + 2.7vw, 3.25rem); --tp-h2: clamp(1.6875rem, 1.32rem + 1.5vw, 2.375rem); --tp-h3: clamp(1.375rem, 1.27rem + 0.42vw, 1.6875rem); --tp-h4: clamp(1.1875rem, 1.15rem + 0.16vw, 1.3125rem); --tp-lead: clamp(1.1875rem, 1.11rem + 0.31vw, 1.375rem); --tp-body: 1.0625rem; --tp-body-sm: 0.9375rem; --tp-caption: 0.84375rem; --tp-eyebrow: 0.78125rem; --tp-leading-display: 1.02; --tp-leading-h1: 1.08; --tp-leading-h2: 1.15; --tp-leading-h3: 1.25; --tp-leading-body: 1.65; --tp-track-display: -0.02em; --tp-track-h1: -0.018em; --tp-track-h2: -0.014em; --tp-track-h3: -0.01em; --tp-track-eyebrow: 0.11em; /* --- Space — 4px base ------------------------------------------------- */ --tp-space-1: 0.25rem; --tp-space-2: 0.5rem; --tp-space-3: 0.75rem; --tp-space-4: 1rem; --tp-space-5: 1.25rem; --tp-space-6: 1.5rem; --tp-space-8: 2rem; --tp-space-10: 2.5rem; --tp-space-12: 3rem; --tp-space-16: 4rem; --tp-space-20: 5rem; --tp-space-24: 6rem; --tp-space-32: 8rem; --tp-space-40: 10rem; /* Section rhythm: 96px mobile to 160px desktop. Generous separation is what actually delivers the "premium rather than generic contractor" read. */ --tp-section-y: clamp(var(--tp-space-24), 8vw, var(--tp-space-40)); --tp-section-y-tight: clamp(var(--tp-space-16), 6vw, var(--tp-space-24)); /* --- Layout ----------------------------------------------------------- */ --tp-container: 80rem; /* 1280px */ --tp-container-wide: 90rem; /* 1440px — full-bleed photography only */ --tp-measure: 45rem; /* 720px — enforces the 62–72ch measure */ --tp-gutter: clamp(1.5rem, 4vw, 3rem); /* --- Radius — near-square. The tower silhouette has no soft corner. --- */ --tp-radius-sm: 2px; --tp-radius-md: 3px; --tp-radius-lg: 4px; --tp-radius-full: 999px; /* --- Elevation — borders before shadows, tinted charcoal not black ---- */ --tp-shadow-sm: 0 1px 2px rgb(31 34 34 / 0.05); --tp-shadow-md: 0 2px 8px rgb(31 34 34 / 0.07); --tp-shadow-lg: 0 8px 28px rgb(31 34 34 / 0.1); /* --- Motion ----------------------------------------------------------- */ --tp-ease: cubic-bezier(0.2, 0, 0.2, 1); --tp-fast: 140ms; --tp-base: 220ms; --tp-slow: 380ms; /* --- Header ----------------------------------------------------------- */ /* One height, at rest and scrolled alike. The bar does not condense: see .tp-header__inner in components.css for why it cannot without shrinking the lockup, which reads as a wordmark that is too small for the nav beside it. */ --tp-header-h: 5rem; /* The logo height, which also drives the nav's vertical alignment. It tracks the viewport, not the scroll position: below the nav breakpoint the header also carries the phone number and the menu toggle, and a full-size lockup would be 165px wide and overflow a phone. */ --tp-header-logo-h: clamp(2.5rem, 5.5vw, 3.5rem); /* The utility strip above the main bar. Doubles as the header's negative sticky offset, so the strip scrolls out of view and the pinned header is --tp-header-h tall, which is what the scroll-padding above assumes. */ --tp-header-utility-h: 2.375rem; } @media (max-width: 60rem) { :root { --tp-header-h: 4.25rem; } }