/* AeroIQ canonical token layer (ADR-0005) — the SINGLE source of production values. TWO TIERS (enforced by scripts/validate-theme.mjs + review discipline): Tier 1 PRIMITIVES — the only place raw design values may exist. Tier 2 SEMANTIC ROLES — reference primitives (var()/calc()); consumers use ONLY these (or the approved Tier-1 names the contract maps to their property family). theme.json references tokens via var(--aq-*) / var:preset; it never redeclares values. Human-readable record: docs/design/design-system.md (contract section is generated). Deferred (added when a component consumes them — design-system §6): surface-card, surface-dark-raised, cta-scrim, card shadow/radius, pink-card surface, cool-tech ramp. */ :root { /* ================= TIER 1 — PRIMITIVES ================= */ /* colour */ --aq-brand: #f2622e; /* fills, on-dark accents, large graphics — never normal text on light */ --aq-brand-ink: #c2410c; /* LOCKED (owner-approved 2026-07-12) — orange text on LIGHT surfaces only */ --aq-on-brand: #101113; /* label on orange fills (5.9:1) */ --aq-text: #101113; /* primary text on light */ --aq-text-muted: #52545a; /* secondary text on light (≥6.9:1) */ --aq-text-faint: rgba(16, 17, 19, 0.3); /* decorative marks on light (card numbers) — never copy */ --aq-text-eyebrow: #6c6b62; /* muted mono eyebrow on light surfaces — AA-safe near-match of Figma #86857c (which fails AA at 3.7:1); measured ~5.4:1 on white, ~4.9:1 on --aq-surface-alt (owner sign-off 2026-07-26) */ --aq-text-on-dark: #ffffff; --aq-text-on-dark-muted: #b7b6ad; --aq-surface-page: #ffffff; /* page base = LIGHT sections (hero/services/industries). Owner sign-off 2026-07-26: WAS #f6f5f1, but the Figma frame base is white and #f6f5f1 is the SEMI-LIGHT role → moved to --aq-surface-alt */ --aq-surface-alt: #f6f5f1; /* SEMI-LIGHT section bands (products, process, footer) — the only light sections that paint a tint over the white base */ --aq-surface-card: #ffffff; /* light card surface (distinct role from surface-page; both #fff today, diverge if a warm base is later chosen) */ --aq-fill-tile: rgba(16, 17, 19, 0.05); /* icon-tile fill on light surfaces */ --aq-surface-dark: #18191b; --aq-scrim-ink: rgba(16, 17, 19, 0.55); /* text-over-image chip/overlay backing */ --aq-hairline-light: rgba(16, 17, 19, 0.1); --aq-hairline-dark: rgba(255, 255, 255, 0.12); /* typography — families */ --aq-font-heading: "Hanken Grotesk", system-ui, sans-serif; /* round-1 D: Hanken Grotesk Bold picked over rendered samples (client 2026-08-25) */ --aq-font-body: "Hanken Grotesk", system-ui, sans-serif; --aq-font-mono: "Geist Mono", ui-monospace, monospace; /* RESTRICTED: eyebrows/technical accents only (ADR-0005) */ /* typography — size scale */ --aq-fs-eyebrow: 0.75rem; --aq-fs-body-sm: 0.875rem; --aq-fs-body: 1rem; --aq-fs-lede: 1.25rem; /* 20px — Figma hero-lede spec; raised from 1.125rem in the F1 polish pass (design-system deferred item, plan §3) */ --aq-fs-h3: clamp(1.25rem, 1.05rem + 0.6vw, 1.375rem); --aq-fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3rem); --aq-fs-h1: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); /* ordinary page/post H1 */ --aq-fs-display: clamp(2.5rem, 1.5rem + 4.5vw, 4.5rem); /* hero/display role (.aq-display) */ --aq-fs-404: clamp(4.5rem, 3rem + 9vw, 9rem); /* the 404 page's decorative status numeral (.aq-404-code) — owner-directed 2026-08-13 */ /* 404 backdrop wash (owner-directed): white gradient over the crash-landed drone — stronger where the copy sits (top-left), lighter over the drone (bottom-right). AA record, worst case = muted text over the drone's near-black lens through the 0.62 stop: effective lum ≈ 0.62 → 4.8:1 ✓; everywhere the copy actually sits the wash is ≥0.8 → muted ≥6.4:1 ✓. */ --aq-scrim-404: linear-gradient(105deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.8) 55%, rgba(255, 255, 255, 0.62) 100%); /* typography — weight / line-height / tracking */ --aq-fw-regular: 400; --aq-fw-medium: 500; --aq-fw-semibold: 600; --aq-fw-bold: 700; /* heading weight — pairs with --aq-font-heading everywhere that family is used */ --aq-lh-tight: 1.05; --aq-lh-heading: 1.15; --aq-lh-body: 1.6; --aq-track-tight: -0.02em; --aq-track-eyebrow: 0.08em; /* spacing scale */ --aq-space-3xs: 0.25rem; --aq-space-2xs: 0.5rem; --aq-space-xs: 0.75rem; --aq-space-sm: 1rem; --aq-space-md: 1.5rem; --aq-space-lg: 2rem; --aq-space-xl: 3rem; --aq-space-2xl: 4rem; --aq-space-3xl: 6rem; /* border-width scale */ --aq-bw-1: 1px; --aq-bw-2: 2px; --aq-bw-3: 3px; /* radius scale (first consumers: buttons, chips, capability card, hero media) */ --aq-radius-sm: 0.5rem; --aq-radius-md: 0.75rem; --aq-radius-lg: 1.5rem; --aq-radius-pill: 999px; --aq-radius-card: 1rem; /* card surfaces (services/products/industries) */ /* interaction floor (first consumer: mobile Hub-Group nav; project 44px touch-target minimum) */ --aq-tap-min: 2.75rem; --aq-tap-aa-min: 1.5rem; /* 24px — WCAG 2.5.8 (AA) target minimum. The floor for standalone TEXT links, where the 44px button standard would visibly space out every section link; buttons and controls keep --aq-tap-min. */ /* split-media presence floor (consumers: Platform Hub hero/narrative splits; the hero-split media-ratio variant on About/Contact — owner-revised 2026-08-10) */ --aq-media-split-min: 20rem; /* 320px — REDUCED from 26rem/416px (owner 2026-08-28: too tall). The floor now only catches genuinely short copy; every other split takes its height from the copy column beside it. */ /* PDP primary-media ceiling (first consumer: P3 gallery panel — tall packshots stay contained) */ --aq-pdp-media-max: 34rem; /* PDP GALLERY WIDTH ceiling — deliberately LARGER than --aq-split-media-max (32rem) because the roles differ: an editorial photo SUPPORTS the copy, but a packshot IS the content on a product page, so it earns more room before it stops growing. Measured 2026-08-28: at 40rem the image stays 640px at the shell (vs 754 uncapped, 512 at the editorial cap) while the summary column gains 130px and the key-spec chips stop wrapping to three rows. */ --aq-pdp-gallery-max: 40rem; /* data-table reading ceiling (first consumer: P3 spec table — full-width tables read badly) */ --aq-table-max: 52rem; /* enquiry drawer width ceiling (first consumer: Contact E1 desktop drawer — Figma 460px evidence → clean 30rem tier, NOT a copied frame value) */ --aq-drawer-max: 30rem; /* elevation (first consumer: service cards) */ --aq-shadow-card: 0 1px 2px rgba(16, 17, 19, 0.04), 0 12px 32px -8px rgba(16, 17, 19, 0.1); --aq-shadow-card-hover: 0 2px 4px rgba(16, 17, 19, 0.05), 0 20px 44px -10px rgba(16, 17, 19, 0.16); /* raised card on hover */ /* dark media-panel ramp (first consumer: product cards — audit §3e/§3b/§3f, near-dupes merged: #3a434c→#3c444c). Decorative gradient stops only — NOT semantic surfaces; no green semantic/state token exists (ADR-0005). */ --aq-dk-azure-hi: #3c444c; --aq-dk-azure-lo: #23282e; --aq-dk-steel-hi: #26303c; --aq-dk-steel-lo: #181e26; --aq-dk-warm-hi: #4a423a; --aq-dk-warm-lo: #2a2622; --aq-dk-green-hi: #384640; --aq-dk-green-lo: #222a26; /* pink CTA card (first consumer: products "Not sure what fits?" card) */ --aq-pink-hi: #fdf3ed; --aq-pink-lo: #fbeae0; --aq-text-copper: #7a4a35; /* body text on pink surfaces (6.7:1 on --aq-pink-hi) */ /* icon sizes (icon-tile glyphs use spacing tokens; these are standalone glyphs) */ --aq-icon-sm: 1.125rem; --aq-icon-lg: 2.5rem; /* pathway media panel (Figma 560px real scale) + its deep drop shadow */ --aq-pathway-media-h: 35rem; --aq-shadow-media: 0 40px 80px -50px rgba(0, 0, 0, 0.6); /* products media panel height (Figma 176px at real card scale) */ --aq-media-h: 11rem; /* industries photo panel height (Figma 200px at real card scale) */ --aq-media-photo-h: 12.5rem; /* underline-offset scale */ --aq-uo-150: 0.15em; /* motion (ADR-0013) — durations + easings; consumers use these, never raw values. The prefers-reduced-motion block in base.css is the master off-switch (zeros all durations). */ --aq-motion-fast: 150ms; /* interaction states — hover / focus / active */ --aq-motion-base: 300ms; /* entrances / scroll reveals (slice 2) */ --aq-motion-slow: 500ms; /* larger on-load orchestration (slice 3) */ --aq-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* general UI / state change */ --aq-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entrance deceleration */ /* interaction offsets (transform distances; negate in-place with calc) */ --aq-lift: 2px; /* hover lift — buttons, icons */ --aq-lift-card: 4px; /* hover lift — cards (larger surface) */ --aq-nudge: 3px; /* arrow / element nudge on hover */ --aq-reveal-rise: 24px; /* scroll-reveal Y offset (from-state; motion.js animates it to 0) */ --aq-stagger: 80ms; /* cascade step between staggered items (reveals + hero entrance) */ /* layout scale */ --aq-measure: 75ch; /* prose line-length (utility role .aq-measure) — owner-set 2026-07-12 */ --aq-content: 40rem; /* general constrained width (contentSize) — evidence: design-system §1 */ --aq-shell-max: 96rem; /* 96rem = 1536px — Tailwind 2xl tier; matches the Figma content band */ --aq-heading-max: 65rem; /* display-heading wrap width (hero) — owner-set 2026-07-12 */ --aq-h2-max: 48rem; /* section-H2 wrap width (recurring across sections) */ --aq-card-w: 21rem; /* hero capability card (Figma 340px; owner sign-off 2026-07-26 — was 16rem/256px, too tight) */ --aq-card-min: 24rem; /* card-grid minimum column width (3 cols at shell) */ --aq-field-min: 18rem; /* text-input basis before it wraps to its own row (catalogue search) */ --aq-split-media-max: 32rem; /* 512px — THE split-media width ceiling (one ceiling, one home: this was --aq-portrait-max, whose sticky-portrait role is the same job). The media column stops growing here so every further pixel goes to the copy column; uncapped it ran to ~718px at the shell. Clean Tailwind lg tier, NOT a copied frame value. */ --aq-split-media-ratio: 16 / 10; /* editorial split media PANEL SHAPE. The panel owns its own height instead of being stretched to the copy column's height — that old rule made crop severity depend on how much copy a page happened to have (measured 2026-08-28: 35% of the source surviving at 1024px). 1.6 is the balance point across our 1.12–2.39 source ratios, and it is what guarantees presence, so no separate min-height floor. */ --aq-step-min: 13rem; /* process-step minimum column width (5 cols at shell) */ --aq-keyspec-min: 9.5rem; /* PDP key-spec chip minimum width (2-up in the summary column, 3-up on wide; product-data demo build 2026-08-28) */ --aq-mega-content-min: 44rem; /* 704px — the least width a dropdown band keeps for its own content. Dropdown content starts under its MENU ITEM (client request), so a far-right item on a narrow desktop would otherwise squeeze its own columns; alignment yields to legibility at this floor. */ --aq-mega-col-min: 13rem; /* 208px — minimum width of a mega-panel column. The cluster is a grid so columns SPREAD across the shell; packed left they left half a 1440px panel empty (owner screenshots 2026-08-31) */ --aq-mega-photo-min: 11rem; /* 176px — minimum width of an industry PHOTO tile, so they sit side by side instead of stacking and overflowing the panel */ --aq-statband-min: 9rem; /* headline-figure minimum column width. Sized so a phone still gets TWO figures per row (2 x 144px + gap fits 326px of content at 390px): the band is meant to be read at a glance, and one figure per row turns four of them into a scroll (round-2 §12.4) */ --aq-logo-w-narrow: 6.75rem; /* 108px — HEADER logo on narrow phones (≤25em) ONLY. At 360px the 142px mark + search + CTA + burger needed 391px of a 328px row, so the burger sat OFF-SCREEN and the main menu was unreachable (found by the 2026-08-28 full-site sweep; pre-existing). Paired with a tighter row gap, this frees ~50px and every control fits. The footer logo is untouched. */ --aq-logo-w: 8.875rem; /* 142px — logo display width: FOOTER always; HEADER below 64em (.aq-footer-brand img / .aq-header-row img — theme CSS only, never core block styles, which load per-block). */ --aq-badge-w: 13.375rem; /* 214px — DJI Enterprise Authorized Dealer badge display width. The supplied SVG's OWN authored size (214×48 viewBox). It sat at --aq-logo-w until Luke's 2026-09-25 final review asked for the badge to be larger; a mark carrying DJI usage rules is safest shown at the size it was drawn at rather than an invented one. Needs its own home because .aq-footer-brand img sets every image in that column to --aq-logo-w. */ --aq-logo-h: 2.8125rem; /* 45px — DESKTOP header logo height (owner 2026-08-21, revised −25% from 60px the same day): still the bar's height-definer (1px over the 44px CTA → bar ≈ 61px with 2× --aq-space-2xs padding); ratio preserved via width:auto. SVG lockup (633:125, round-1 D-6 artwork) renders ≈228px wide at this height. */ --aq-logo-h-compact: 2.5rem; /* 40px — tight-desktop (1024–1179) logo height: the 5.06-ratio SVG at 45px wrapped the row there; 40px ≈ 202px wide fits the space the retired raster occupied, CTA keeps the bar 61px. */ /* fluid rhythm primitives */ --aq-gutter: clamp(1rem, 3.5vw, 2.5rem); /* fluid page side padding (root gutters). RAISED 2rem→2.5rem 2026-08-28: the page gutter must stay LARGER than the gap between columns inside it, or each column reads as grouped with the screen edge instead of with its partner. It was 32px against a 48px column gap between ~1067px and the shell cap. Now 36–40px against a 32px split gap at every width in that band. */ --aq-space-section: clamp(2.5rem, 6vw, 5rem); /* owner-revised 2026-08-10 (was clamp(3rem, 8vw, 7rem) — sections read too airy) */ /* ================= TIER 2 — SEMANTIC ROLES ================= */ /* focus ring (dual ring — verified on light/dark/orange; design-system §7). Owner 2026-09-02: "thin and toned down" — the 5px band of near-black read as a heavy filled box on small controls. Halved to a 3px perimeter and the halo moved off --aq-text (18.9:1 on white) to --aq-text-muted (7.6:1): still emphatic, no longer a slab. Re-verified ≥3:1 on all four surfaces — the binding case is unchanged, the WHITE inner ring at 3.20:1 against brand orange, which the previous ring also relied on. The halo COLOUR is its own role now: it is not "the text colour", and a future tone change should not have to reach into a text token. */ --aq-focus-ring-width: var(--aq-bw-1); --aq-focus-ring-style: solid; --aq-focus-ring-color: var(--aq-text-on-dark); --aq-focus-ring-offset: var(--aq-bw-1); --aq-focus-halo-color: var(--aq-text-muted); --aq-focus-halo-width: calc(var(--aq-focus-ring-width) + var(--aq-focus-ring-offset) + var(--aq-bw-1)); --aq-focus-ring-halo: 0 0 0 var(--aq-focus-halo-width) var(--aq-focus-halo-color); /* form error voice (first consumer: Contact D4 error states — the approved frame styles every error in the LOCKED ink orange; no new red is minted) */ --aq-color-error: var(--aq-brand-ink); /* inline content links */ --aq-content-link-color: var(--aq-brand-ink); --aq-link-underline-thickness: var(--aq-bw-1); --aq-link-underline-thickness-active: var(--aq-bw-2); --aq-link-underline-offset: var(--aq-uo-150); /* product-card media gradients (compose primitives; 155deg from evidence) */ --aq-grad-media-azure: linear-gradient(155deg, var(--aq-dk-azure-hi), var(--aq-dk-azure-lo)); --aq-grad-media-steel: linear-gradient(155deg, var(--aq-dk-steel-hi), var(--aq-dk-steel-lo)); --aq-grad-media-warm: linear-gradient(155deg, var(--aq-dk-warm-hi), var(--aq-dk-warm-lo)); --aq-grad-media-green: linear-gradient(155deg, var(--aq-dk-green-hi), var(--aq-dk-green-lo)); /* pink CTA card surface + the brand-tinted hairline (derived from the ONE orange at component level — audit §3b: no minted alpha ladder) */ --aq-grad-pink: linear-gradient(165deg, var(--aq-pink-hi), var(--aq-pink-lo)); --aq-hairline-brand: color-mix(in srgb, var(--aq-brand) 30%, transparent); /* photo scrim for text-over-image panels (audit §6: scrim required) — derived from the one ink, no minted alpha ladder */ --aq-scrim-photo: linear-gradient( 180deg, color-mix(in srgb, var(--aq-text) 5%, transparent) 45%, color-mix(in srgb, var(--aq-text) 50%, transparent) ); /* pathway photo scrim (green-dark tint over imagery) + glass chip fill — both composed from existing primitives, no minted alpha ladder */ --aq-scrim-pathway: linear-gradient( 155deg, color-mix(in srgb, var(--aq-dk-green-lo) 42%, transparent), color-mix(in srgb, var(--aq-dk-green-lo) 60%, transparent) ); --aq-fill-glass: color-mix(in srgb, var(--aq-text-on-dark) 10%, transparent); /* Frosted sticky header (owner decision 2026-08-13). AA record: ink #101113 over the glass at its worst-case backdrop (the dark band #18191b showing through 80% page-white) ≈ #c9c9cb → ≈11:1 ✓. Brand-ink #c2410c over the same worst case ≈ 3.1:1 ✗ — orange NEVER paints on the glass (the locked light-surfaces-only rule): the bar's top-level nav hover keeps ink with an underline cue instead (base.css). */ --aq-surface-glass: color-mix(in srgb, var(--aq-surface-page) 80%, transparent); --aq-blur-glass: 12px; /* A DENSER glass for the big dropdown BANDS. The 80% bar is a 61px strip, so very little shows through it. The mega panel is ~470px tall over hero photography, and at 80% the page ghosted through as dirty grey shapes behind the columns (owner screenshots 2026-08-31). Same frosted treatment the owner signed on 2026-08-13, just opaque enough that a tall panel reads as a surface rather than a smear. */ --aq-surface-glass-panel: color-mix(in srgb, var(--aq-surface-page) 96%, transparent); --aq-header-h: 4.8125rem; /* real bar height, browser-measured 77px @1280 / 74.6px @390 — anchors scroll-padding */ /* CTA photo scrim — ink base warming toward the right (audit §6: per-image contrast verification required; verified against the original cta-fjord-drone.jpg and re-checked 2026-09-17 on its replacement cta-lets-talk.jpg (the client's banner; axe colour-contrast clean on every CTA surface in the 23-page sweep): worst-case white H2 under the 60% ink stop measured 4.89:1 in-browser; 52% measured 3.82:1 and FAILS — do not lighten below 60%) */ --aq-cta-scrim: linear-gradient( 80deg, color-mix(in srgb, var(--aq-surface-dark) 60%, transparent) 55%, color-mix(in srgb, var(--aq-dk-warm-lo) 50%, transparent) ); }