/* ============================================================================ Delta Precision Group — global.css Loaded on every page. Concatenated source split (build spec §7): tokens → reset → base → layout → components → utilities RULE: page-scoped CSS must never hardcode a hex literal — use these tokens. Brand direction locked from client mockups (Sep 2026): cyan/teal accents, navy grid hero, Raleway / DM Sans, lime CTA. (Headings and body switched from Space Grotesk / Inter on 2026-10-05, client — the old woff2 files stay in assets/fonts/ unreferenced, kept only to switch back. JetBrains Mono dropped 2026-10-15, client: labels are DM Sans, and code falls back to the system monospace stack, so no mono font is downloaded.) ============================================================================ */ /* ---------------------------------------------------------------------------- 0. FONTS (self-hosted woff2, assets/fonts) — font-display:swap kills FOIT. Paths are relative to this file (assets/css/ → ../fonts/). ---------------------------------------------------------------------------- */ @font-face{font-family:"Raleway";src:url("../fonts/raleway-v37-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Raleway";src:url("../fonts/raleway-v37-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-v17-latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-v17-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-v17-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-v17-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} /* ---------------------------------------------------------------------------- 1. TOKENS — the shared contract. Decided once; no page overrides a token. ---------------------------------------------------------------------------- */ :root{ /* -- brand / accent -------------------------------------------------- */ --dpg-cyan:#24c7d9; /* accent on DARK sections (hero, CTA band) */ --dpg-teal:#0798aa; /* accent on LIGHT sections (body of page) */ --dpg-lime:#c9f36b; /* primary CTA button */ --dpg-lime-hover:#d6f77e; /* lightened lime, primary CTA hover */ --dpg-lime-tint:#d2f69f; /* pale lime SURFACE — "What we deliver" cards (client, Step 15v). A ground, never text */ --dpg-lime-wash:#e3ffb3; /* paler lime SURFACE — GIS "Our services" cards, borderless (client, Step 16d). Never text */ --dpg-signal:#5fd38f; --dpg-danger:#b42318; /* form errors — 6.5:1 on white, 6.2:1 on --dpg-slate-50 (Step 19i) */ /* Teal for TEXT on a light surface. --dpg-teal is the brand fill (icons, chips, rules) but only reaches 3.1-3.45:1 as text and fails AA at body and label sizes; this darker step is 4.98:1 on the cyan band and 5.5:1 on white. Client's own case-study mockup uses exactly this value. */ --dpg-teal-ink:#0e7380; /* live "systems online" status dot */ /* -- dark backgrounds ------------------------------------------------ */ --dpg-navy:#0b1b2b; /* primary dark background (hero, CTA) */ --dpg-navy-deep:#0f172a; /* alternate deep navy (slate-900) */ --dpg-ink:#061a22; /* deeper, cooler dark ground — see .dpg-section--ink */ --dpg-grid-line:#24c7d917; /* grid lines on DARK bands (cyan @ ~9%) */ --dpg-grid-line-light:#0a192912; /* same grid on LIGHT bands (navy @ ~7%) */ --dpg-dot-line:#ffffff33; /* DOT for the blog banner's texture — white at 20%, matching the reference SVG's opacity=0.2. White rather than cyan because both references lift the ground equally on all three channels: a neutral lightening, not a hue. The SVG draws BLACK at .2 because that site is light-ground; inverted here, the alpha is the same. */ /* -- neutral / slate ramp (adopted wholesale) ----------------------- */ --dpg-white:#ffffff; --dpg-slate-50:#f8fafc; /* light section backgrounds */ --dpg-slate-100:#f1f5f9; /* tinted callouts */ --dpg-slate-200:#e2e8f0; /* universal border colour */ --dpg-slate-300:#cbd5e1; /* light outline button border */ --dpg-slate-400:#94a3b8; --dpg-slate-500:#64748b; --dpg-slate-600:#475569; --dpg-slate-700:#334155; --dpg-slate-800:#1e293b; --dpg-slate-900:#0f172a; /* -- semantic text --------------------------------------------------- */ --dpg-heading:#0a1929; /* section headings on light bg */ --dpg-text:#4a5a6e; /* body copy on light bg */ --dpg-heading-on-dark:#d2dee3; /* headings on dark sections */ --dpg-text-on-dark:#ffffff; /* hero H1 / strong text on dark */ --dpg-text-on-dark-muted:#94a3b8; /* hero supporting / muted on dark */ /* -- surfaces & lines ------------------------------------------------ */ --dpg-tint-cyan:#e8f5f7; /* case-study band; the one non-slate surface */ /* Comparison columns. Text first, surface second; the pairs are 8.8:1 and 7.7:1, so the note inside a cell can step back to .85 opacity and still clear AA. These are the only non-slate, non-brand hues on the site. */ --dpg-without-text:#6b3a3a; --dpg-without-bg:#fff9f9; --dpg-with-text:#2d5a2d; --dpg-with-bg:#f5fbf5; --dpg-navbar-bg:rgba(245,248,250,.92); --dpg-border:var(--dpg-slate-200); --dpg-border-on-dark:rgba(255,255,255,.14); /* -- fonts ----------------------------------------------------------- */ --dpg-font-heading:"Raleway", system-ui, sans-serif; --dpg-font-body:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --dpg-font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* code only — system fonts, nothing downloaded */ /* -- type scale (fluid clamps; desktop maxima match the mockups) ----- */ --dpg-fs-h1:clamp(2.25rem, 1.35rem + 3.9vw, 3.5rem); /* hero, → 56px */ --dpg-fs-h2:clamp(1.75rem, 1.15rem + 1.7vw, 2.25rem); /* section, → 36px */ --dpg-fs-h3:clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem); /* → 24px */ --dpg-fs-lead:1.15rem; /* hero supporting text (18.4px) */ --dpg-fs-body:1.1rem; /* body copy (17.6px) */ --dpg-fs-small:0.9375rem; /* 15px */ --dpg-fs-label:0.75rem; /* mono badges / eyebrows (12px) */ --dpg-fs-stat:clamp(2rem, 1.4rem + 2.2vw, 2.75rem); /* One hero metric owning a whole card needs a step above --dpg-fs-stat, which peaks at 44px and is sized for the 4-across proof strip. Peaks 120px, against ~125px measured off the client's case-study mockup. */ --dpg-fs-stat-xl:clamp(3.5rem, 2rem + 6vw, 7.5rem); /* proof figures, → 44px */ --dpg-lh-tight:1.1; /* hero H1 */ --dpg-lh-heading:1.2; /* section headings */ --dpg-lh-lead:1.7; /* hero supporting */ --dpg-lh-body:1.8; /* body copy (31.68/17.6) */ /* -- spacing --------------------------------------------------------- */ --dpg-gutter:16px; /* steps up at 640 / 1024 below */ --dpg-container:1280px; --dpg-section-pad:80px; --dpg-cta-pad:96px; /* -- hero photo placement (tuned on a 1536px screen) ------------------ */ --dpg-hero-media-start:333px; /* photo begins this far right of the container's left edge */ --dpg-hero-media-fade:260px; /* left fade length; fixed, NOT a % (see §5.5) */ /* A tier above every heading, for a numeral that IS the artwork rather than a heading — currently only the 404's "4 0 4". Same justification as --dpg-fs-stat-xl: the mockup needed a size the scale did not have, so the SCALE grew a step rather than the class growing a hardcoded px value (field guide §1.4). Peaks 208px, floors at 80px. */ --dpg-fs-display:clamp(5rem, 2rem + 14vw, 13rem); /* -- motion ---------------------------------------------------------- */ /* One source of truth for interaction timing. `.18s ease` had been copied into five rules by hand before these existed (Step 10ad); a duration is a design value like any other and belongs on a scale, not in the rule. --fast is state feedback the eye should barely register (colour, rotation); --med is something that physically moves and needs to be followed (the mobile accordion opening). No --slow: nothing here should be slower. prefers-reduced-motion is handled ONCE, globally, in §2 — do not add local `transition:none` rules, they are already covered. */ --dpg-t-fast:.18s; --dpg-t-med:.26s; --dpg-ease:cubic-bezier(.4,0,.2,1); /* -- radii ----------------------------------------------------------- */ --dpg-r-xs:2px; --dpg-r-sm:4px; --dpg-r-md:8px; --dpg-r-lg:12px; --dpg-r-xl:16px; --dpg-r-pill:999px; /* -- shadows (soft, low-opacity, multi-layer) ------------------------ */ --dpg-shadow-sm:0 1px 2px rgba(10,25,41,.05), 0 1px 3px rgba(10,25,41,.06); --dpg-shadow-md:0 2px 4px rgba(10,25,41,.04), 0 8px 20px rgba(10,25,41,.08); --dpg-shadow-lg:0 12px 32px rgba(10,25,41,.12), 0 4px 8px rgba(10,25,41,.06); /* -- z-index --------------------------------------------------------- */ --dpg-z-header:100; --dpg-z-anchor:90; } @media (min-width:640px){ :root{ --dpg-gutter:24px; } } @media (min-width:1024px){ :root{ --dpg-gutter:32px; } } /* ---------------------------------------------------------------------------- 2. RESET (minimal; neutralises the defaults we care about) ---------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{margin:0;} /* dl/dd joined this list at Step 10g, when .dpg-service introduced the site's first description list. Browsers give dl a block margin and dd a 40px inline start indent; both would fight a grid-laid dl. Reset here rather than inside the component, so any future
is safe by default. */ h1,h2,h3,h4,p,figure,dl,dd{margin:0;} img,svg,video{display:block;max-width:100%;height:auto;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;cursor:pointer;} ul,ol{margin:0;padding:0;list-style:none;} /* ---------------------------------------------------------------------------- 3. BASE (page defaults, headings, links, focus) ---------------------------------------------------------------------------- */ /* Build spec §8 budgets "CSS scroll-behavior:smooth + scroll-margin-top on section IDs so the sticky anchor bar does not overlap headings". The second half has been on .dpg-section since Step 02 (scroll-margin-top:140px) and the reduced-motion blanket below has ALWAYS carried scroll-behavior:auto!important to guard this declaration — so the guard predates the thing it guards. Added at `Step 10av`, when the Contact hero's jump to #project-form became the site's first in-page anchor that actually resolves: dpg/anchor-nav sits on no page (handoff §5B/5), so until now there was nothing to scroll to. */ html{scroll-behavior:smooth;} body{ font-family:var(--dpg-font-body); font-size:var(--dpg-fs-body); line-height:var(--dpg-lh-body); color:var(--dpg-text); background:var(--dpg-white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* RALEWAY'S DEFAULT FIGURES ARE OLD-STYLE — "46,677" and "3 → 26" bob above and below the baseline (seen in the first render after the 2026-10-05 font switch). Lining figures are set here once and inherited by every element; DM Sans is lining already, so only Raleway changes. */ font-variant-numeric:lining-nums; } h1,h2,h3{font-family:var(--dpg-font-heading);font-weight:700;color:var(--dpg-heading);} /* Visible keyboard focus everywhere (accessibility floor). */ :focus-visible{outline:2px solid var(--dpg-teal);outline-offset:3px;border-radius:var(--dpg-r-xs);} /* Skip link (paired with
) */ .dpg-skip-link{position:absolute;left:-9999px;top:0;z-index:1000;padding:.75rem 1rem; background:var(--dpg-navy);color:var(--dpg-white);font-family:var(--dpg-font-body);font-size:var(--dpg-fs-label);} .dpg-skip-link:focus{left:.5rem;top:.5rem;} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;} } /* ---------------------------------------------------------------------------- 4. LAYOUT (container + section rhythm). ONE container, never duplicated. ---------------------------------------------------------------------------- */ .dpg-container{ width:100%; max-width:var(--dpg-container); margin-inline:auto; padding-inline:var(--dpg-gutter); } .dpg-section{padding-block:var(--dpg-section-pad);scroll-margin-top:140px;} .dpg-section--tint{background:var(--dpg-slate-50);} .dpg-section--tint-cyan{background:var(--dpg-tint-cyan);} .dpg-section--dark{background:var(--dpg-navy);color:var(--dpg-text-on-dark-muted);} /* A SECOND dark ground, deeper and shifted toward teal. --dpg-navy belongs to the site's loudest moments — hero, CTA, why-delta — and a problem section is a different register: heavier and cooler, not another hero. It is written as --dark PLUS --ink rather than a standalone modifier, so every dark-context rule already in this file (eyebrow, prose, steps rule, section title, note links) applies untouched and --ink overrides nothing but the background. Contrast on #061a22: slate-400 6.9:1, cyan 8.7:1, heading-on-dark 12.9:1, white 17.8:1 — all pass AA comfortably. */ .dpg-section--dark.dpg-section--ink{background:var(--dpg-ink);} .dpg-section + .dpg-section{border-top:1px solid var(--dpg-border);} /* No light divider where a dark band meets a light one, on either side. Each exemption needs two classes to outrank the adjacency rule above — a bare .dpg-section--dark (0,1,0) loses to .dpg-section + .dpg-section (0,2,0). */ .dpg-section + .dpg-section--dark, .dpg-section + .dpg-cta, .dpg-section--dark + .dpg-section, .dpg-cta + .dpg-section{border-top:0;} /* ---------------------------------------------------------------------------- 5. COMPONENTS ---------------------------------------------------------------------------- */ /* 5.1 — Grid background utility (client-supplied recipe) ----------------- Always an overlay layer, so it carries its own positioning - the band it sits in paints the background colour and must be position:relative. Retint the lines by setting --dpg-grid-line on the band (see 5.17). */ .dpg-grid-bg{ position:absolute;inset:0;z-index:0; background-image: linear-gradient(var(--dpg-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--dpg-grid-line) 1px, transparent 1px); background-size:64px 64px; } /* 5.2 — Badges & eyebrows ----------------------------------------------- */ /* Hero badge (mockup img 4): pill, status dot, mono, UPPERCASE, on dark. */ .dpg-badge{ display:inline-flex;align-items:center;align-self:flex-start;gap:.55rem; padding:.4rem .85rem; border:1px solid var(--dpg-border-on-dark); border-radius:var(--dpg-r-pill); background:rgba(255,255,255,.03); font-family:var(--dpg-font-body); font-size:var(--dpg-fs-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--dpg-slate-400); } /* Two card variants of the badge. Both keep the hero badge's mono / 12px / uppercase / .14em typography and only restate what differs. --lime is the one filled chip on the site: it marks the single pillar that has delivered client evidence (build spec §1), so the fill is the point. Navy on lime is 13.7:1. --plain is a label, not a chip: no fill, no border, NO PADDING, so its text starts on the card's content edge and lines up with the heading beneath it. It takes the same muted greys the eyebrow uses, and flips on a dark card for the same reason the eyebrow does — slate-500 on navy is only 3.66:1, while slate-400 is 6.79:1. On white, slate-500 is 4.76:1. */ .dpg-badge--lime{ border-color:transparent;border-radius:var(--dpg-r-lg);padding:.25rem .75rem; background:var(--dpg-lime);color:var(--dpg-navy); } .dpg-badge--plain{border:0;background:none;padding:0;color:var(--dpg-slate-500);} .dpg-card--dark .dpg-badge--plain{color:var(--dpg-slate-400);} /* The hero's dot is a green "systems online" signal; on a lime chip it is just a bullet, so it takes the text colour and drops the glow. */ .dpg-badge--lime .dpg-badge__dot{background:currentColor;box-shadow:none;} .dpg-badge__dot{ width:7px;height:7px;border-radius:50%; background:var(--dpg-signal); box-shadow:0 0 0 3px rgba(95,211,143,.18); flex:none; } /* Section eyebrow (mockup img 5): accent dash + label, mono, Title Case. */ .dpg-eyebrow{ display:flex;align-items:center;gap:.7rem; margin-bottom:1.1rem; font-family:var(--dpg-font-body); font-size:var(--dpg-fs-label); font-weight:700; letter-spacing:.12em; color:var(--dpg-slate-500); } .dpg-eyebrow::before{ content:"";width:26px;height:2px;flex:none; background:var(--dpg-teal); /* light-section accent */ } .dpg-eyebrow__num{color:var(--dpg-heading);} /* the "02" reads darker */ .dpg-eyebrow--caps{text-transform:uppercase;} /* Position only. Everything else — the dash, the darker __num, the on-dark colours — stays exactly as it is everywhere else, so a centred eyebrow is the same object as a left-aligned one rather than a second design. */ .dpg-eyebrow--center{justify-content:center;} /* On dark bands the eyebrow flips to the cyan accent + light text. The list is the set of dark contexts: a --dark section and the hero. Add a new dark band here rather than restyling the eyebrow inside it. THE CTA BAND IS LIGHT since live's 2026-10 edit (--dpg-slate-200): it keeps the cyan dash but takes the light-section text colours. That edit had put the dark number on all three contexts, which made every --dark section's "0N" navy on navy (axe 1.01:1) — split back out at Step 19f. */ .dpg-section--dark .dpg-eyebrow, .dpg-hero .dpg-eyebrow{color:var(--dpg-slate-400);} .dpg-section--dark .dpg-eyebrow::before, .dpg-hero .dpg-eyebrow::before, .dpg-cta .dpg-eyebrow::before{background:var(--dpg-cyan);} .dpg-section--dark .dpg-eyebrow__num, .dpg-hero .dpg-eyebrow__num{color:var(--dpg-heading-on-dark);} .dpg-cta .dpg-eyebrow{color:var(--dpg-slate-500);} .dpg-cta .dpg-eyebrow__num{color:var(--dpg-heading);} /* THE CYAN BAND IS A THIRD EYEBROW CONTEXT, and this rule fixes a live defect rather than enabling a new design (found at Step 10l). --dpg-slate-500 is 4.76:1 on white and 4.27:1 on --dpg-tint-cyan. The eyebrow is 12px, so the threshold is 4.5:1 and the cyan band FAILS it. That has been true on the homepage since Step 12f: dpg/daxbot-proof pairs .dpg-section--tint-cyan with a .dpg-eyebrow, so the shipped Daxbot band has been carrying a sub-AA label. slate-600 is 6.80:1 on cyan and stays a muted label rather than becoming body text. Scoped to the band, not applied globally, because slate-500 passes everywhere else the eyebrow appears. Added to the context list above rather than restyled inside the band, which is the extension point Step 12r established. */ .dpg-section--tint-cyan .dpg-eyebrow{color:var(--dpg-slate-600);} /* Tag list (Step 16g): a labelled row of short mono chips — the four native tools on the Mechanical pillar's §2, pulled out of the paragraph that names them so a scanning engineer finds their own platform. A real