/* ============================================================================ tokens.css — PER-CLIENT FILE #1 of 2 ---------------------------------------------------------------------------- Everything that changes between clients: palette, typefaces, type scale, grid, spacing, motion curves. Edit this + site.config.js and nothing else. Every number here was measured off the reference at 1440x900 and 390x844. Measured values are marked ref: ... Deliberate departures are marked DEPARTURE: ... ========================================================================== */ :root { /* ---------------------------------------------------------------- colour AR&C Agriventures Corporation. The palette is the logo's own, unmodified. The mark is a single blue gradient; both ends of it are sampled here: #025186 bottom-left limb of the "A" (darkest point of the gradient) #35A1CD top-right of the "C" (lightest point) #35A0CC "AGRIVENTURES CORPORATION" (flat, = the light stop) Nothing is recoloured — the client asked for the original brand blues, so the accent IS the wordmark colour. Deep marine ink and pond green are support tones, not new brand colours. Reference equivalents, for orientation: --c-brown #89685c -> --c-accent #35A1CD --c-dark-brown #201c1b -> --c-ink #0D1C26 CONTRAST, measured against --c-bg (#000): --c-accent 7.13:1 AA body, AAA large PASS --c-accent-light 10.60:1 PASS --c-text 21.00:1 PASS #000 on --c-accent (header CTA ground) 7.13:1 PASS --c-accent-deep is a gradient/shadow tone only (2.52:1) and is never used for text or for a text ground. */ --c-accent: #35a1cd; /* brand blue — light stop / wordmark */ --c-accent-light: #6fc3e4; /* lifted blue — hover grounds, highlights */ --c-accent-deep: #025186; /* deep marine — dark stop of the mark */ --c-accent-shine: #d9f0fb; /* pale tint — hero title highlight band */ --c-teal: #3e6f69; /* pond green — sampled from the pond water */ --c-teal-deep: #2a4a46; /* pond green, shadowed */ --c-ink: #0d1c26; /* deep marine ground (mobile menu) */ --c-ink-lift: #17303d; /* marine, lifted (backdrop falloff) */ --c-black: #000; --c-white: #fff; --c-accent-20: rgb(53 161 205 / 0.2); --c-accent-25: rgb(53 161 205 / 0.25); --c-accent-40: rgb(53 161 205 / 0.4); --c-accent-60: rgb(53 161 205 / 0.6); --c-white-20: rgb(255 255 255 / 0.2); /* Muted label tone. Was white @ 0.40, which composites to #666 = 3.66:1 on black and fails AA for the real copy that uses it (.services__desc, .stats__label, .creds__row-year). Lifted to 0.56 = #8F8F8F = 6.49:1. */ --c-white-56: rgb(255 255 255 / 0.56); --c-black-30: rgb(0 0 0 / 0.3); /* semantic */ --c-bg: var(--c-black); --c-text: var(--c-white); --c-title: var(--c-accent); --c-rule: var(--c-white-20); /* ------------------------------------------------------------ typefaces */ --font-display: 'Big Shoulders Display', 'Saira Extra Condensed', 'Oswald', 'Arial Narrow', sans-serif; --font-text: 'Archivo', 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; /* Per-font vertical metrics, used by .leading-trim to trim a line box down to its cap height. Derived from the font's own metrics: --fos = (descent - ascent) / 2 + capHeight - 0.5 --foe = (ascent - descent) / 2 - 0.5 (both in em) Note line-height cancels out of both, so one pair of values is correct for every heading size. The reference hardcodes -(ascent - cap) and -descent, which is only right when ascent + descent == 1em. That holds for Moniqa (0.78 + 0.21) but NOT for most faces — Big Shoulders' content area is 1.19em, and the naive values over-trim the cap by a fifth. Use the formula above when swapping fonts; measure ascent/descent with canvas TextMetrics (fontBoundingBoxAscent / fontBoundingBoxDescent at a known size). Big Shoulders Display : asc .98 desc .21 cap .80 Archivo : asc .88 desc .21 cap .69 ref (Moniqa): --fos -0.0795em / --foe -0.2105em */ --display-fos: -0.085em; --display-foe: -0.115em; --text-fos: -0.145em; --text-foe: -0.165em; /* Big Shoulders' cap is 0.80em against Moniqa's 0.70em while its advance is ~2% narrower, so it is intrinsically "taller per unit width" than the original (ratio 2.97 vs 2.55). No open face matches both. 0.97 balances the residual error at about +9% cap height / -9% ink width instead of loading it all onto one axis. Set to 1 if you swap in a face whose cap is already 0.70em. */ --display-size-adjust: 0.97; /* ------------------------------------------------------- scale (two-rate) The reference does NOT use a fluid vw root. It pins html to 62.5% (10px) and scales through these tokens, at two independent rates: geometry compresses 1 -> 0.5 across 1200px -> 980px text compresses 1 -> 0.7 across 1200px -> 980px i.e. type deliberately shrinks slower than layout. Reproduced exactly. CAVEAT: because the root is fixed at 10px, 1rem == 10px always and rem is NOT a fraction of the viewport. Anything that must stay a fixed share of the viewport (media overscan, off-canvas parking) is written in vw/vh/svh in template.css, never rem. */ --scale-px: 1px; --scale-rem: 1rem; --scale-text-px: 1px; --scale-text-rem: 1rem; /* ------------------------------------------------------------------ grid 12 columns, ZERO gutter, edge to edge. There is no page gutter on this site at all — every indent is a whole or half column via .title-offset. ref: --grid-col: calc((100vw - 0vw * 11) / 12) => 120px at 1440 */ --grid-columns: 12; --grid-gutter: 0vw; /* --vw100 is kept in sync with documentElement.clientWidth by app.js. It must NOT be 100vw: with a classic desktop scrollbar 100vw is 15px wider than the content box, so column offsets computed from it drift out of step with the grid's own 1fr tracks. The reference gets away with 100vw only because Locomotive hides the native scrollbar. */ --vw100: 100vw; --grid-col: calc((var(--vw100) - var(--grid-gutter) * (var(--grid-columns) - 1)) / var(--grid-columns)); /* ------------------------------------------------------------ type scale ref @1440 (root 10px): h1 344 / h2 172 / h3 114 / h4 72 body 13, button 10, all uppercase, tracking 0.05em throughout. Tracking does NOT tighten with size on this site — it is a flat 0.05em. */ --fs-d1: calc(34.4rem * var(--display-size-adjust)); --fs-d2: calc(17.2rem * var(--display-size-adjust)); --fs-d3: calc(11.4rem * var(--display-size-adjust)); --fs-d4: calc(7.2rem * var(--display-size-adjust)); --fs-quote: 2rem; /* ref: 20px blockquote */ --fs-body: 1.6rem; /* 16px everywhere (ref: 13px) — client request */ --fs-btn: 1rem; /* ref: 10px */ --fs-small: 1rem; --lh-d1: 0.93; /* ref: 0.93 */ --lh-d2: 0.93; /* ref: 0.93 */ --lh-d3: 0.965; /* ref: 0.965 */ --lh-d4: 0.972; /* ref: 0.972 */ --lh-body: 1.538; /* ref: 1.538 */ --lh-btn: 1.6; /* ref: 1.6 */ --ls: 0.05em; /* ref: 0.05em everywhere */ /* --------------------------------------------------------------- spacing ref: --spacing ladder 20 / 40 / 60 / 80 px at desktop scale */ --sp-1: calc(var(--scale-px) * 20); --sp-2: calc(var(--scale-px) * 40); --sp-3: calc(var(--scale-px) * 60); --sp-4: calc(var(--scale-px) * 80); /* ---------------------------------------------------------------- motion The reference's full easing registry, lifted verbatim. easeOut is the house curve — 51 of the 100 cubic-beziers in their CSS are this one. */ --e-out: cubic-bezier(0.25, 0.74, 0.22, 0.99); /* HOUSE CURVE */ --e-in: cubic-bezier(0.47, 0.04, 0.5, -0.06); /* anticipation */ --e-in-out: cubic-bezier(0.55, 0, 0.1, 1); --e-in-out-subtle: cubic-bezier(0.25, 0.1, 0.25, 1); --e-in-out-long: cubic-bezier(0.7, 0, 0.3, 1); --e-in-out-slider: cubic-bezier(0.7, 0, 0.2, 1); /* ref: base .animation-- transition is .4s; the named reveals override to 1.6s, and the line-split text reveal to 2.4s */ --d-base: 0.4s; --d-slow: 1.6s; --d-text: 1.1s; /* was 2.4s (ref) — felt like a delay on long copy */ --d-reveal: 0.9s; /* scroll reveals (titles, images, tape). Was 1.6s (ref) */ /* reveal geometry, ref values */ --title-scale: 1.35; /* ref: .title { --title-scale: 1.35 } */ --title-translate-y: 0%; --text-translate-y: 230%; /* ref: .text--animation */ --text-rotate: -2deg; /* ref: the tell-tale 2 degree tilt */ --text-scale: 1; /* full-bleed media overscan. ref: hero iframe is 160rem wide on a 144rem viewport = 111.1%. Written in vw so it survives any root change. */ --overscan: calc(var(--vw100) * 1.112); --overscan-offset: calc(var(--vw100) * -0.056); --header-h: 5.5rem; --z-header: 60; --z-overlay: 80; } /* --------------------------------------------------------------------------- Mid range: 980px -> 1200px. Geometry 0.5 -> 1, text 0.7 -> 1. ref media query reproduced (the reference also gates on aspect-ratio to separate a landscape phone from a narrow desktop; kept below). ------------------------------------------------------------------------ */ @media (min-width: 980px) and (max-width: 1199px) { :root { --scale-px: max(0.5px, min(1px, calc(0.5px + 0.5 * ((100vw - 980px) / 220)))); --scale-rem: max(0.5rem, min(1rem, calc(0.5rem + 5 * ((100vw - 980px) / 220)))); --scale-text-px: max(0.7px, min(1px, calc(0.7px + 0.3 * ((100vw - 980px) / 220)))); --scale-text-rem: max(0.7rem, min(1rem, calc(0.7rem + 3 * ((100vw - 980px) / 220)))); --fs-d1: calc(24rem * var(--display-size-adjust)); --fs-d2: calc(13rem * var(--display-size-adjust)); --fs-d3: calc(8.6rem * var(--display-size-adjust)); --fs-d4: calc(5.6rem * var(--display-size-adjust)); } } /* --------------------------------------------------------------------------- Tablet: 668px -> 979px. 8 columns. ------------------------------------------------------------------------ */ @media (min-width: 668px) and (max-width: 979px) { :root { --grid-columns: 8; --fs-d1: calc(16rem * var(--display-size-adjust)); --fs-d2: calc(10rem * var(--display-size-adjust)); --fs-d3: calc(6rem * var(--display-size-adjust)); --fs-d4: calc(4.6rem * var(--display-size-adjust)); --fs-quote: 1.9rem; --fs-body: 1.6rem; /* 16px (ref drops to 11px here) */ --fs-btn: 1.4rem; /* DEPARTURE: ref drops to 9px here */ --fs-small: 1.3rem; } } /* --------------------------------------------------------------------------- Phone: <= 667px. 6 columns (ref: title-offset measures 65px at 390 = 390/6). DEPARTURE — THE IMPORTANT ONE. The reference's own phone layout drops body copy to 10px, buttons to 8px and inputs to 10px. That is unreadable, fails touch legibility, and a sub 16px input makes iOS Safari zoom on focus. Display sizes are kept at the reference's measured mobile values (114 / 72 / 43) because those are well judged; everything textual is raised to a real reading size. token ref mobile here why ---------- ----------- ------ -------------------------------------- --fs-body 10px 16px readable body minimum --fs-btn 8px 16px touch legibility --fs-small 10px 14px hard floor, never below input 10px 16px prevents iOS zoom-on-focus ------------------------------------------------------------------------ */ @media (max-width: 667px) { :root { --grid-columns: 6; --fs-d1: calc(11.4rem * var(--display-size-adjust)); /* ref: 114px */ --fs-d2: calc(7.2rem * var(--display-size-adjust)); /* ref: 72px */ --fs-d3: calc(4.3rem * var(--display-size-adjust)); /* ref: 43px */ --fs-d4: calc(3.4rem * var(--display-size-adjust)); --lh-d3: 1.047; /* ref: 1.047 at 390 */ --fs-quote: 1.9rem; --fs-body: 1.6rem; /* DEPARTURE (ref 1.0rem) */ --fs-btn: 1.6rem; /* DEPARTURE (ref 0.8rem) */ --fs-small: 1.4rem; /* DEPARTURE (ref 1.0rem) */ --sp-1: 16px; --sp-2: 28px; --sp-3: 44px; --sp-4: 64px; --header-h: 5.6rem; /* Overscan must stay viewport-relative on phones. */ --overscan: calc(var(--vw100) * 1.18); --overscan-offset: calc(var(--vw100) * -0.09); } } /* Very small phones: hold the floor, do not keep shrinking. */ @media (max-width: 359px) { :root { --fs-d2: calc(6rem * var(--display-size-adjust)); --fs-d3: calc(3.8rem * var(--display-size-adjust)); } }