/* * AAG 2026 — design tokens, resets and primitives. * * Two typefaces replace the six the live site loads. Gold is the only accent * colour in the system. Dark surfaces carry the actor track, the bone surface * carries the corporate track. * * Everything is scoped under .aag on , which the plugin only adds on its * own templates. Nothing here can reach a live PopularFX page. */ /* ---------------------------------------------------------------- fonts -- */ /* Self-hosted, latin subset. No request ever leaves the origin. */ @font-face { font-family: "Sora"; src: url("../fonts/sora-latin-variable.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-variable.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212; } /* --------------------------------------------------------------- tokens -- */ .aag { --aag-ink-900: #0E0E0F; --aag-ink-850: #141416; --aag-ink-800: #17171A; --aag-ink-700: #1F1F23; --aag-ink-600: #2A2A2F; --aag-bone-050: #FAF8F4; --aag-bone-100: #F4F0E9; --aag-bone-200: #E7E0D5; --aag-gold-400: #F0D8B8; --aag-gold-500: #E5C59C; --aag-gold-600: #C9A470; --aag-gold-700: #8A6E42; /* AA-safe gold text on bone */ --aag-text-hi: #F6F3EE; --aag-text-mid: #B6B0A6; --aag-text-low: #87817A; --aag-text-ink: #151517; --aag-text-ink-mid: #4A4741; --aag-line-dark: rgba(255, 255, 255, .08); --aag-line-ink: rgba(21, 21, 23, .12); --aag-line-gold: rgba(229, 197, 156, .28); --ff-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ff-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --fs-display: clamp(2.75rem, 6.4vw, 5.25rem); --fs-h1: clamp(2.25rem, 4.6vw, 3.75rem); --fs-h2: clamp(1.875rem, 3.2vw, 2.75rem); --fs-h3: clamp(1.375rem, 1.9vw, 1.75rem); --fs-lead: clamp(1.0625rem, 1.3vw, 1.25rem); --fs-body: 1.0625rem; --fs-sm: .9375rem; --fs-xs: .8125rem; --sp-section: clamp(72px, 9vw, 152px); --wrap: 1240px; --wrap-narrow: 820px; --measure: 68ch; --gutter: clamp(20px, 4vw, 48px); --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-1: 180ms; --dur-2: 320ms; --dur-3: 600ms; --header-h: 88px; --shadow-lift: 0 24px 60px -24px rgba(0, 0, 0, .55); } /* ---------------------------------------------------------------- reset -- */ .aag *, .aag *::before, .aag *::after { box-sizing: border-box; } .aag { margin: 0; background: var(--aag-ink-900); color: var(--aag-text-hi); font-family: var(--ff-body); font-size: var(--fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .aag img, .aag svg, .aag video { max-width: 100%; height: auto; display: block; } .aag h1, .aag h2, .aag h3, .aag h4 { font-family: var(--ff-display); font-weight: 600; line-height: 1.06; letter-spacing: -.022em; margin: 0 0 .5em; text-wrap: balance; } .aag h1 { font-size: var(--fs-h1); } .aag h2 { font-size: var(--fs-h2); } .aag h3 { font-size: var(--fs-h3); letter-spacing: -.012em; } .aag p { margin: 0 0 1.15em; max-width: var(--measure); } .aag p:last-child { margin-bottom: 0; } .aag a { color: inherit; } .aag ul, .aag ol { margin: 0 0 1.15em; padding-left: 1.25em; } .aag strong { font-weight: 600; color: var(--aag-text-hi); } /* Focus: one visible gold ring on every interactive element, both surfaces. */ .aag :focus-visible { outline: 2px solid var(--aag-gold-500); outline-offset: 3px; border-radius: 3px; } .aag .aag-surface--bone :focus-visible { outline-color: var(--aag-gold-700); } .aag-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 14px 22px; background: var(--aag-gold-500); color: var(--aag-text-ink); font-weight: 600; } .aag-skip:focus { left: 12px; top: 12px; } .aag-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------- primitives -- */ .aag-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .aag-wrap--narrow { max-width: var(--wrap-narrow); } .aag-section { position: relative; padding-block: var(--sp-section); } .aag-surface--ink { background: var(--aag-ink-900); color: var(--aag-text-hi); } .aag-surface--ink-800 { background: var(--aag-ink-800); color: var(--aag-text-hi); } .aag-surface--bone { background: var(--aag-bone-100); color: var(--aag-text-ink); } .aag-surface--bone p { color: var(--aag-text-ink-mid); } .aag-surface--bone .aag-eyebrow { color: var(--aag-gold-700); } .aag-eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--aag-gold-500); margin: 0 0 1.1rem; } .aag-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; } .aag-lead { font-size: var(--fs-lead); color: var(--aag-text-mid); max-width: 62ch; } .aag-surface--bone .aag-lead { color: var(--aag-text-ink-mid); } .aag-gold { color: var(--aag-gold-500); } .aag-surface--bone .aag-gold { color: var(--aag-gold-700); } /* Ghost numerals used by the service rails and the values row. */ .aag-numeral { font-family: var(--ff-display); font-size: clamp(3rem, 6vw, 5rem); font-weight: 300; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--aag-line-gold); font-variant-numeric: tabular-nums; user-select: none; } .aag-surface--bone .aag-numeral { -webkit-text-stroke-color: rgba(138, 110, 66, .35); } /* ---------------------------------------------------------------- reveal -- */ /* * Gated on .js, which aag.js sets on as its first act. With JS off or * broken the selector never matches, so every [data-reveal] element renders * fully visible. Content can never be hidden by a script failure. */ html.js .aag [data-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); will-change: opacity, transform; } /* Stagger, keyed off the attribute value so no inline style is needed. */ html.js .aag [data-reveal="1"] { transition-delay: 70ms; } html.js .aag [data-reveal="2"] { transition-delay: 140ms; } html.js .aag [data-reveal="3"] { transition-delay: 210ms; } html.js .aag [data-reveal="4"] { transition-delay: 280ms; } html.js .aag [data-reveal="5"] { transition-delay: 350ms; } html.js .aag [data-reveal="6"] { transition-delay: 420ms; } html.js .aag [data-reveal="7"] { transition-delay: 490ms; } html.js .aag [data-reveal="8"] { transition-delay: 560ms; } html.js .aag [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .aag [data-reveal], html.js .aag [data-reveal].is-in { opacity: 1; transform: none; transition: none; } .aag *, .aag *::before, .aag *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }