/* ─────────────────────────────────────────────────────────────────
Argos Data — Color & Type tokens
Sources: Figma "Argos Data (1).fig" (Manual + Webpage---preview)
Brand colors confirmed in Manual / Slide 5 ("Argos AI data brand colors")
───────────────────────────────────────────────────────────────── */
/* Hide the browser's default clear (×) button on
so it doesn't double up with our custom clear button. The native
button is unstyleable and has no hover state — the custom one in
the nav search bar (and the mobile search panel) replaces it. */
.argos-search-input::-webkit-search-cancel-button,
.argos-search-input::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
/* Search clear (×) button — only the icon stroke color is allowed to
change. Every other visual is suppressed with !important so no
browser default (Chrome's hover tint, Safari's button gradient,
Firefox's focus ring, iOS WebKit's tap-highlight square) can leak
through. The colors use CSS custom properties (set per-instance
via inline style based on isLight) so the :hover rule below can
pick up the right tone for the current tone (light / dark).
border-radius: 999 is a safety net — even if a background slipped
through against all of these guards, it would paint as a circle,
not a 36×36 square. */
.argos-search-clear,
.argos-search-clear:hover,
.argos-search-clear:focus,
.argos-search-clear:active,
.argos-search-clear:focus-visible,
.argos-search-clear:focus-within {
background: none !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 999px !important;
outline: none !important;
outline-offset: 0 !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent !important;
-webkit-appearance: none !important;
appearance: none !important;
-webkit-touch-callout: none;
user-select: none;
}
.argos-search-clear {
color: var(--icon-color);
transition: color 140ms cubic-bezier(.22, .8, .26, 1);
}
.argos-search-clear:hover {
color: var(--icon-color-hover);
}
@font-face {
font-family: "Inter Variable";
/* Subsetted WOFF2 — restricted to Latin + Latin-1 supplement + common
typographic punctuation + currency/letterlike symbols. Site content
is English-only; non-Latin scripts in content would fall back to
the system-ui stack via the font-family list below. Variable axis
`wght` 100-900 is preserved. ~93 KB (89% smaller than the original
TTF, 72% smaller than the unsubsetted WOFF2). WOFF2 is supported
by ~96% of global browsers (Chrome 36+, Firefox 39+, Safari 10+,
Edge 14+); pre-2017 browsers fall back to the system font in the
stack — same as font-display:swap behavior pre-load. */
/* File extension note: the file is named `.woff` even though the
binary content is WOFF2 (verify with `xxd` — starts with wOF2 magic
bytes). Astro's @astrojs/node static handler in standalone mode
refuses to serve `.woff2` files (returns 301 instead of 200) but
happily serves `.woff`. Browsers detect font format from magic
bytes — the `format("woff2-variations")` hint here tells the CSS
engine to parse the content as WOFF2 regardless of URL extension.
This works on every evergreen browser. */
src: url("./InterVariable.woff") format("woff2-variations"),
url("./InterVariable.woff") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* UI labels (small UI buttons / pill labels, ~12px) use Inter at 500 weight
with letter-spacing. The site uses a single typeface — Inter — throughout. */
:root {
/* ───── Brand palette — Light ───── */
--argos-white: #FFFFFF; /* primary background */
--argos-paper: #F2F2F0; /* warm off-white, secondary surface */
--argos-paper-2: #E1E1E1; /* subtle divider / muted swatch */
--argos-yellow: #EEE36B; /* gradient accent — hero highlights only */
/* ───── Brand palette — Dark ───── */
--argos-black: #000000; /* primary ink, primary buttons */
--argos-green: #30AA74; /* signature accent — CTAs, hero blocks */
--argos-green-soft: #3CA276; /* prompt color in image directions */
--argos-navy: #0E1F3E; /* deep navy, contact / location cards */
--argos-navy-deep: #002042; /* deeper navy used in vector accents */
/* ───── Greys ───── */
--argos-grey-900: #1A1A1A;
--argos-grey-700: #4D4D4D;
--argos-grey-500: #666666;
--argos-grey-300: #D9D9D9;
--argos-grey-200: #E1E1E1;
--argos-grey-100: #F2F2F0;
/* ───── Semantic tokens ───── */
--bg: var(--argos-white);
--bg-alt: var(--argos-paper);
--bg-inverse: var(--argos-black);
--bg-feature: var(--argos-green);
--bg-deep: var(--argos-navy);
--fg: var(--argos-black);
--fg-muted: var(--argos-grey-700);
--fg-subtle: var(--argos-grey-500);
--fg-on-dark: var(--argos-white);
--fg-link: var(--argos-black);
--border: var(--argos-black);
--border-subtle: var(--argos-grey-300);
/* Brand gradient — radial yellow into white. Used for hero / contact cards. */
--argos-gradient-yellow:
radial-gradient(circle at 50% 50%, #EEE36B 12%, #FFFFFF 100%);
--argos-gradient-light:
radial-gradient(circle at 70% 30%, #EEE36B 0%, #FFFFFF 70%);
/* ───── Type families ───── */
--font-display: "Inter Variable", "Inter", system-ui, sans-serif;
--font-body: "Inter Variable", "Inter", system-ui, sans-serif;
--font-ui: "Inter Variable", "Inter", system-ui, sans-serif;
/* ───── Type scale ─────
Reduced May 2026: hero menu title was too large in v1, so the
entire heading scale stepped down one notch. The cascade now
reads hero → major section → standard section → sub.
Use these tokens (or the matching px values) for every page. */
--fs-xs: 12px; /* pill labels */
--fs-sm: 14px;
--fs-base: 16px;
--fs-md: 18px; /* body / supporting copy on slides */
--fs-lg: 24px; /* paragraph at slide scale, eyebrow */
--fs-xl: 32px; /* small section heading, card title */
--fs-2xl: 44px; /* sub-heading */
--fs-3xl: 56px; /* standard section heading (h2) */
--fs-4xl: 64px; /* major section heading (Solutions, Platform, Experience, Blog) */
--fs-display: 72px; /* final CTA / large restated statements */
--fs-hero: 84px; /* page hero h1 — set by user, do not exceed */
--fs-mega: 250px; /* full-bleed display ("Typography", "Inter") */
/* ───── Type weights (Inter Variable) ───── */
--fw-regular: 400;
--fw-medium: 500; /* body / supporting */
--fw-semibold: 600; /* headings — "Variable: Weight 600" called out */
--fw-bold: 700; /* hero display */
/* ───── Line heights ───── */
--lh-tight: 1.05;
--lh-display: 1.10; /* the "1.1" line-height seen on every heading */
--lh-body: 1.40; /* pill labels: 1.4 */
--lh-prose: 1.55;
/* ───── Spacing — mostly multiples of 4/8 in source layouts ───── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-8: 48px;
--space-10: 64px;
--space-12: 96px;
--space-16: 128px;
/* ───── Radii — pill (37px), card (28px / 48px / 49px), nav (61px) ───── */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 28px; /* contact / case-study cards */
--radius-xl: 48px; /* image masks, large feature cards */
--radius-pill: 37px; /* buttons */
--radius-nav: 61px; /* top-nav capsule */
/* ───── Shadows — minimal, mostly flat. Borders carry the weight. ───── */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
}
/* ─────── Semantic typography classes ─────── */
html, body {
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: var(--fw-medium);
line-height: var(--lh-prose);
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.h-mega, .display-mega {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-mega);
line-height: var(--lh-display);
letter-spacing: -0.04em;
}
/* Hero h1 — page-opening headline. 84px is the ceiling. */
.h-hero, h1.hero {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-hero);
line-height: 1.02;
letter-spacing: -0.035em;
margin: 0;
}
/* Default h1 tracks the hero token so any new page that drops a
bare