/* ============================================================ Advantage Access — Colors & Type ============================================================ Brand sits at the intersection of Australian land + heavy infrastructure. Warm gold wordmark over deep forest green. Imagery skews warm/earthen (ochre paddocks, dry grass, blue skies) with industrial neutrals (concrete, steel). ============================================================ */ /* Per the May 2026 website build brief: Trebuchet MS for headings, Arial for body. Both web-safe — no @import required. */ :root { /* ---------- BRAND CORE ---------- AA's forest/gold palette — forest is the body/heading dark; gold is the accent and is used sparingly (logo, key metrics, dividers). */ --aa-forest-900: #0F2419; /* deepest — page backgrounds, hero panels */ --aa-forest-800: #1C3B2A; /* primary dark — headings on light bg */ --aa-forest-700: #2D5A3F; /* hover/secondary dark */ --aa-forest-600: #4A7C59; /* sage — supporting */ --aa-forest-500: #6B9374; /* tint for charts/dividers */ --aa-gold-700: #9E7A20; /* gold pressed/dark — hover/pressed CTA */ --aa-gold-600: #E2AF09; /* GOLD PRIMARY — headings, CTAs, accents (brief spec) */ --aa-gold-500: #C8A96E; /* WARM GOLD — secondary accent, dividers (brief spec) */ --aa-gold-400: #E8C26B; /* logo wordmark colour (soft tan) */ --aa-gold-300: #F1D89C; /* gold tint background */ --aa-gold-100: #FAF1DC; /* gold wash — section panels */ /* ---------- NEUTRALS ---------- Warm-leaning, taken from paddock/sand imagery. Avoid cool grey — it fights the gold and the photography. */ --aa-paper: #FAF7F1; /* page background — warm off-white */ --aa-paper-2: #F3EDE0; /* alternate panel */ --aa-bone: #E8E0CE; /* card border, hairline */ --aa-sand-200: #D9CFB8; --aa-sand-400: #A8997A; /* muted body */ --aa-stone-600: #5C5648; /* secondary text */ --aa-stone-800: #2A271F; /* primary text */ --aa-ink: #15140F; /* near-black, never pure */ /* ---------- SEMANTIC ---------- Tied to project gates and risk register language used in the deck (GATE 1 / GATE 2 / Wave 2). */ --aa-go: #4A7C59; /* proceed / approved */ --aa-watch: #C99B05; /* gate hold / review */ --aa-stop: #B3441E; /* fail / risk */ --aa-info: #2B6B8A; /* neutral info (deck supporting blue) */ /* ---------- FOREGROUND / BACKGROUND TOKENS ---------- */ --fg-1: var(--aa-stone-800); /* primary text */ --fg-2: var(--aa-stone-600); /* secondary text */ --fg-3: var(--aa-sand-400); /* tertiary / captions */ --fg-inv: var(--aa-paper); /* text on dark bg */ --fg-accent: var(--aa-gold-600); --fg-brand: var(--aa-forest-800); --bg-1: var(--aa-paper); /* page */ --bg-2: var(--aa-paper-2); /* raised panel */ --bg-3: #ffffff; /* card on warm bg */ --bg-dark: var(--aa-forest-800); --bg-darker: var(--aa-forest-900); --border-1: var(--aa-bone); --border-2: var(--aa-sand-200); --border-strong: var(--aa-forest-800); /* ---------- TYPOGRAPHY ---------- Per the website build brief: web-safe stack only. Headings: Trebuchet MS Body: Arial No @import, no web fonts. The brief explicitly mandates the system stack so the new Astro site has zero font-load cost and renders identically across CMS contexts. --font-display is the heading family (Trebuchet MS). --font-sans is the body family (Arial). --font-serif kept as an internal fallback for long-form pull quotes only — do not introduce a new web font. --font-mono retained for figures, MW values, success-fee data. */ --font-display: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", Tahoma, sans-serif; --font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif; --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* Type scale — headings use --font-display; body uses --font-sans. */ --t-display: 700 56px/1.05 var(--font-display); --t-h1: 700 40px/1.1 var(--font-display); --t-h2: 700 28px/1.2 var(--font-display); --t-h3: 700 20px/1.3 var(--font-display); --t-h4: 700 16px/1.35 var(--font-display); --t-body-lg: 400 18px/1.55 var(--font-sans); --t-body: 400 16px/1.55 var(--font-sans); --t-body-sm: 400 14px/1.5 var(--font-sans); --t-caption: 500 12px/1.4 var(--font-sans); --t-eyebrow: 700 12px/1.2 var(--font-display); /* uppercase + tracked */ --t-mono: 500 14px/1.4 var(--font-mono); --t-quote: 400 24px/1.4 var(--font-serif); /* ---------- SPACING ---------- 4px base; round numbers, no fractional steps. */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---------- RADII ---------- Conservative. Cards: 4-6px. Pills: 999. Buttons: 2px (squared off to read as utility/infrastructure, not consumer). */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 8px; --r-pill: 999px; /* ---------- ELEVATION ---------- Use sparingly. Warm-tinted shadows so cards don't go grey on the paper background. */ --shadow-1: 0 1px 0 rgba(28, 59, 42, 0.06), 0 1px 2px rgba(42, 39, 31, 0.04); --shadow-2: 0 1px 0 rgba(28, 59, 42, 0.06), 0 4px 12px rgba(42, 39, 31, 0.06); --shadow-3: 0 2px 0 rgba(28, 59, 42, 0.08), 0 10px 28px rgba(42, 39, 31, 0.10); --inset-hairline: inset 0 0 0 1px var(--border-1); } /* ---------- BASE ELEMENTS ---------- */ html, body { background: var(--bg-1); color: var(--fg-1); font: var(--t-body); } h1 { font: var(--t-h1); color: var(--fg-brand); letter-spacing: -0.01em; } h2 { font: var(--t-h2); color: var(--fg-brand); letter-spacing: -0.005em; } h3 { font: var(--t-h3); color: var(--fg-brand); } h4 { font: var(--t-h4); color: var(--fg-brand); } p { font: var(--t-body); color: var(--fg-1); text-wrap: pretty; } small, .caption { font: var(--t-caption); color: var(--fg-2); } code, kbd, samp { font: var(--t-mono); color: var(--fg-1); } .eyebrow { font: var(--t-eyebrow); color: var(--aa-gold-700); text-transform: uppercase; letter-spacing: 0.14em; } .lede { font: var(--t-body-lg); color: var(--fg-2); } .metric { font: 700 48px/1 var(--font-display); color: var(--fg-brand); letter-spacing: -0.02em; } .metric-unit { font: 500 14px/1 var(--font-sans); color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.1em; } blockquote { font: var(--t-quote); color: var(--fg-1); border-left: 2px solid var(--aa-gold-600); padding-left: var(--s-5); } /* selection */ ::selection { background: var(--aa-gold-300); color: var(--aa-stone-800); }