/* =============================================================
GLOBAL.CSS
Design system tokens, resets, and shared utility classes.
Every other CSS file depends on these variables.
============================================================= */
/* ----------------------------------------------------------
1. DESIGN TOKENS
---------------------------------------------------------- */
:root {
/* ============================================================
COLOR SYSTEM — THE ONLY PLACE COLORS ARE DEFINED.
Every other CSS / PHP / JS file in the theme references these
tokens via var(--token). No hex / rgb() values live anywhere
else. To re-theme the site, edit the values in this section.
Transparent tints elsewhere are built with
color-mix(in srgb, var(--token) NN%, transparent), so they
follow these base colors automatically.
============================================================ */
/* ---- 1. BRAND ---- */
--color-primary-orange: #0A8A56; /* the one accent color, used everywhere */
--color-primary-orange-dark: #07693F; /* hover/active state for the accent */
--color-primary-orange-bright: #0C9A63; /* brighter accent for primary-button hover */
--color-primary-orange-light: #3DBB8A; /* accent on dark surfaces (hover titles) */
--color-primary-black: #0A1628; /* the one "ink" — dark surfaces & dark text */
--color-primary-black-soft: #0F1D31; /* raised card / tile on an ink surface */
/* Legacy aliases — older CSS still references these names. */
--color-primary-indigo: var(--color-primary-orange);
--color-primary-indigo-hover: var(--color-primary-orange-dark);
/* ---- 2. BASE ---- */
--color-white: #FFFFFF;
--color-black: #000000;
--color-black-soft: #111111; /* near-black: neutral shadows */
/* ---- 3. NEUTRALS — light surfaces ---- */
--color-neutral-canvas: #F2F6F4; /* light section background */
--color-neutral-grid-gray: #DAE3DE; /* light section borders/rules */
--color-neutral-text-gray: #555555; /* light section secondary text */
--color-neutral-paper: #EEF3F0; /* dark-section "paper" text / light bg */
--color-neutral-muted: #8796A3; /* dark section secondary text */
--color-neutral-text-light: #9A968C; /* tertiary text on light */
--color-logo-muted: #B4BEC6;
/* Warm light surfaces (blog, testimonials, mega-menu) */
--color-warm-canvas: #F6F5F1;
--color-warm-canvas-alt: #F0ECE3;
--color-warm-sand: #E8E4D8;
--color-warm-sand-deep: #E6E2D6;
--color-warm-paper: #E4E1D8;
--color-warm-line: #E3E0D8;
--color-warm-line-strong: #D8D3C4;
--color-warm-line-deep: #CFCBBF;
--color-paper-dim: #D8DCD5;
--color-border-light: #C5D0CA;
--color-border-mid: #AEBBB5;
/* ---- 4. NEUTRALS — text on light backgrounds ---- */
--color-text-strong: #1A1A1A;
--color-text-ink: #1D1F1B;
--color-text-body: #2A2C27;
--color-text-body-alt: #3A3A3A;
--color-text-print: #333333;
--color-text-dark-soft: #3D3F39;
--color-text-soft: #4A4A45;
--color-text-muted: #55554F;
--color-text-muted-alt: #55574F;
--color-text-warm: #5C5A54;
--color-text-subtle: #6B6E66;
--color-text-subtle-alt: #6B6B64;
--color-text-faint: #7A7D74;
--color-text-faint-alt: #8A8A82;
--color-text-placeholder: #8A9184;
--color-text-faint-light: #A2A59B;
/* ---- 5. DARK SURFACES & TEXT ON DARK ---- */
--color-dark-surface: #171A16;
--color-dark-surface-2: #1C1F1A;
--color-dark-surface-3: #181C13;
--color-dark-surface-hover: #1B1E1A;
--color-on-dark-mute: #A3AFBA;
--color-on-dark-sage: #9FB3C0;
--color-on-dark-soft: #B4BBB2;
--color-overlay-base: #080907; /* lightbox / modal scrim base */
--color-shadow-cool: #14141A; /* soft card shadow base */
--color-fallback-tile-1: #0F0F1A; /* "no image" gradient tile */
--color-fallback-tile-2: #1E1B4B;
--color-fallback-tile-3: #312E81;
/* ---- 6. STATUS ---- */
--color-success: #10B981;
--color-error: #B3261E;
--color-error-border: #C0392B;
--color-error-strong: #B91C1C;
--color-error-bg: #FEF2F2;
--color-error-border-soft: #FCA5A5;
--color-error-on-dark: #E07A5F;
--color-gold: #C9A227; /* award / highlight glow */
--color-star: #F5B400; /* rating stars */
/* ---- 7. THIRD-PARTY BRAND COLORS (social buttons) ---- */
--color-social-facebook: #1877F2;
--color-social-x: #000000;
--color-social-youtube: #FF0000;
--color-social-instagram: #E1306C;
--color-social-linkedin: #0A66C2;
/* ---- 8. PRINT ---- */
--color-print-border: #CCCCCC;
/* ---- 9. DERIVED (transparent tints built from the tokens above) ---- */
--color-neutral-line: color-mix(in srgb, var(--color-neutral-paper) 22%, transparent); /* dark section hairlines */
--color-neutral-line-strong: color-mix(in srgb, var(--color-neutral-paper) 40%, transparent);
--color-menu-divider: color-mix(in srgb, var(--color-white) 10%, transparent);
--color-menu-muted: color-mix(in srgb, var(--color-white) 55%, transparent);
/* ---- 10. ICONS WITH EMBEDDED COLOR ----
SVG data-URIs can't read CSS variables, so their stroke color is
part of the URL. They live here, next to the palette, so a color
change is a one-file edit. Keep the stroke in sync with the token
named in each comment (%23 = "#"). */
--icon-select-chevron-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230A1628' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* = --color-primary-black */
--icon-chevron-ink: url("data:image/svg+xml;utf8,"); /* = --color-primary-black */
--icon-chevron-muted: url("data:image/svg+xml;utf8,"); /* muted green-gray, dark forms */
--icon-check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); /* = --color-primary-black */
/* ============================================================
TYPOGRAPHY — one clean sans-serif family, used for both body
copy and headings. --font-heading/--font-serif/--font-display
are kept as aliases so existing CSS using those names doesn't
need to change, but they all resolve to the same typeface.
============================================================ */
--font-body: 'Inter', sans-serif;
--font-heading: var(--font-body);
--font-sans: var(--font-body); /* legacy alias */
--font-serif: var(--font-body); /* legacy alias */
--font-display: var(--font-body); /* legacy alias */
--fs-body: 18px;
--fs-label: 14px;
--lh-body: 1.8;
/* Italic vs normal text — controllable from wp-admin → Site Customizer → Typography.
Four groups so each kind of text can be switched on its own:
heading = headlines, titles, eyebrows, big stat numbers
quote = blockquotes, pull-quotes, testimonial quotes
accent = the highlighted phrase inside a headline ()
note = small helper / empty-state text
Values: italic | normal. Defaults below = the original look. */
--font-style-heading: italic;
--font-style-quote: italic;
--font-style-accent: italic;
--font-style-note: italic;
/* Spacing scale — use these instead of ad hoc px values in new work */
--space-4: 4px;
--space-8: 8px;
--space-16: 16px;
--space-24: 24px;
--space-32: 32px;
--space-48: 48px;
--space-64: 64px;
--space-88: 88px;
/* Layout */
--header-height: 88px;
--header-height-mobile: 72px;
--grid-desktop-max: 1440px;
--grid-desktop-margins: 80px;
/* Motion */
--transition-hover-duration: 200ms;
--transition-hover-timing: ease-out;
}
/* ----------------------------------------------------------
2. RESETS
---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Smooth in-page scrolling for anchor-link CTAs (header CTA → proposal
form, hero CTA → services section, service hero CTA → service
collection, etc). scroll-margin-top keeps the target from landing
underneath the fixed 76px header. Respects reduced-motion. */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
.js-scroll-target {
scroll-margin-top: 96px;
}
body {
background-color: var(--color-neutral-canvas);
color: var(--color-primary-black);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
margin: 0;
padding: 0;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; background: none; border: none; cursor: pointer; }
:focus-visible {
outline: 2px solid var(--color-primary-indigo);
outline-offset: 2px;
}
/* ----------------------------------------------------------
3. SHARED UTILITY — BUTTONS
---------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 14px 24px;
border-radius: 2px;
transition: background-color var(--transition-hover-duration) var(--transition-hover-timing),
color var(--transition-hover-duration) var(--transition-hover-timing);
}
.btn--filled {
background-color: var(--color-primary-orange);
color: var(--color-white);
border: 1px solid var(--color-primary-orange);
}
.btn--filled:hover { background-color: var(--color-primary-orange-dark); }
.btn--outline {
background-color: transparent;
color: var(--color-primary-indigo);
border: 1px solid var(--color-primary-indigo);
}
.btn--outline:hover {
background-color: var(--color-primary-indigo);
color: var(--color-white);
}
/* ----------------------------------------------------------
4. SHARED UTILITY — GRID BACKGROUND TEXTURE
---------------------------------------------------------- */
.grid-bg {
background-color: var(--color-neutral-canvas);
background-image:
linear-gradient(var(--color-neutral-grid-gray) 1px, transparent 1px),
linear-gradient(90deg, var(--color-neutral-grid-gray) 1px, transparent 1px);
background-size: 32px 32px;
}
/* ----------------------------------------------------------
5. SHARED UTILITY — EYEBROW LABEL
---------------------------------------------------------- */
.eyebrow {
color: var(--color-primary-orange);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0 0 12px;
}
/* ----------------------------------------------------------
6. RESPONSIVE VISIBILITY HELPERS
---------------------------------------------------------- */
.d-desktop-only { display: none; }
.d-mobile-only { display: block; }
@media (min-width: 1024px) {
.d-desktop-only { display: block; }
.d-mobile-only { display: none; }
}
/* ----------------------------------------------------------
7. DEMO CONTENT PLACEHOLDER (remove in production)
---------------------------------------------------------- */
.demo-content {
max-width: var(--grid-desktop-max);
margin: 0 auto;
padding: var(--space-48) var(--space-16);
color: var(--color-neutral-text-gray);
}