/* ============================================================================= KUNA LOGISTICS — DESIGN TOKENS · tokens.css The single source of truth. Every other file (styles, JS-set CSS vars, SEO pages) imports this and references var(--token) — never raw hex. Brand: Kuna Logistics — a venture of Kuna Limited (UK) Voice: Premium, trustworthy, "expensive-feeling". Deep-green HERITAGE EDITORIAL — a firm that won't drop your sofa or miss a B2B SLA. Engine: The LOOK is the lead engine. Editorial restraint + one warm CTA colour that earns the click. Best-of map (which sketch each decision comes from): · Palette + paper grain + rotating seal ......... B-editorial (base) · Bodoni Moda serif display + italic accents .... H-luxe · Tight Swiss grid discipline / hairline rules .. G-swiss · Word-by-word masked headline reveal ........... A-kinetic · Tactile OFFSET-SHADOW button (translate+grow) . J-bold · Scroll-staggered reveals + slow seal spin ..... B-editorial / A-kinetic Usage notes are inline. Colours are documented with their AA contrast intent. ========================================================================== */ /* ---------------------------------------------------------------------------- FONTS — load once here so the whole site shares one @import. Display: Fraunces (serif, optical sizing 9..144, ital for accents). Body: Archivo (clean grotesk; variable). Pairs with the logo.svg wordmark. These match the shipped homepage (index.html) EXACTLY — the SEO landing pages and the funnel entry must read as one brand, not two. (Earlier this file specced Bodoni Moda + Inter; the homepage shipped Fraunces + Archivo, so a user clicking a Camden SEO page through to the home saw two typefaces. Fraunces/Archivo is now the single source of truth across the whole site.) font-display:swap is enforced by Google's URL (&display=swap). --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Archivo:wght@400;500;600&display=swap'); :root { /* ========================================================================== 1 · COLOR — deep-green heritage palette + brass + ONE warm CTA signal ========================================================================== */ /* --- Greens (brand spine) --- */ --forest: #1f3b30; /* primary brand green — wordmark, headings, primary btn */ --forest-deep: #16291f; /* darkest — dark sections, footer, quote shell, seal disc */ --forest-2: #234436; /* hover/active step-up on forest surfaces */ --moss: #2f5a45; /* mid green — secondary fills, focus ring, dividers on dark */ --sage: #3d6b54; /* lightest brand green — used sparingly for tints */ /* --- Paper / surfaces (cool pale, chroma ≈ 0 — NOT cream) --- */ --paper: #f4f5f3; /* page background */ --paper-2: #ffffff; /* raised cards / inputs on light */ --paper-3: #ecefe9; /* recessed wash / alt rows */ --sage-wash: #e7ece6; /* faint green tint for chips, ghost-btn hover */ /* --- Ink (text on paper) --- */ --ink: #1c2420; /* primary body text — ~13:1 on paper */ --ink-soft: #3b443e; /* secondary text — AA (≈8:1) on paper */ --ink-faint: #5d655f; /* tertiary, ≥16px only — AA (≈4.7:1) on paper */ --on-dark: #eef0ea; /* primary text on forest surfaces — AA */ --on-dark-soft: #c4cabd; /* secondary text on forest — AA at ≥16px */ --on-dark-faint: #9aa093; /* legal / micro on forest — large-text only */ /* --- Lines / hairlines (Swiss grid) --- */ --line: #d8dcd6; /* hairline on paper */ --line-strong: #c2c8c1; /* emphasised divider / input border on paper */ --line-dark: rgba(255,255,255,0.13); /* hairline on forest surfaces */ --line-dark-2: rgba(255,255,255,0.22); /* input border on forest */ /* --- Brass accent (metallic, DECORATIVE / display only) --- */ --brass: #cda349; /* spec accent — SVG strokes, rules, ≥24px display text */ --brass-bright: #e3c074; /* gradient light stop / hairline highlight */ --brass-deep: #b08832; /* gradient dark stop */ --brass-text: #856017; /* AA small brass text on paper (~4.6:1) — for <24px */ --brass-soft: #c79a52; /* brass on dark forest — AA at ≥16px */ --brass-wash: #f0e7d6; /* pale brass tint — CTA strip surface */ /* --- WARM CTA SIGNAL COLOUR ------------------------------------------------- Name: "EMBER" — a warm terracotta-rust (#c7522a). This is the ONE colour outside the green/brass system. It is reserved EXCLUSIVELY for the primary action ("Get an instant quote" / "Reveal price"). Rust reads as premium-industrial (sealing-wax / shipping-stencil heritage), pops hard against forest #1f3b30, and is NOT the cliché SaaS blue/purple. Use it scarcely — one ember object per viewport — so it always means "act". --------------------------------------------------------------------------- */ --ember: #bd4a23; /* primary CTA fill — AA: white text ≈5.0:1 (was #c7522a, only ~4.2:1) */ --ember-bright: #c44d24; /* CTA hover — AA-safe (white ≈4.7:1); the "lift" is carried by the offset-shadow growth + translate, NOT a luminance jump that would drop white text below 4.5:1 */ --ember-deep: #a23f1d; /* CTA active / pressed + offset-shadow ink on light (white ≈6.4:1) */ --ember-on: #ffffff; /* text/icon ON ember — pure white for max headroom; AA on every ember state */ --ember-wash: #f6e7df; /* faintest ember tint — focus glow, hover wash */ /* --- Semantic aliases (reference these in components, not the raw names) --- */ --bg: var(--paper); --surface: var(--paper-2); --text: var(--ink); --text-2: var(--ink-soft); --text-3: var(--ink-faint); --accent: var(--brass); /* decorative metallic */ --cta: var(--ember); /* the action colour */ --cta-on: var(--ember-on); --focus: var(--moss); /* focus ring on light surfaces */ --focus-dark: var(--brass-soft); /* focus ring on forest surfaces */ /* ========================================================================== 2 · TYPOGRAPHY — Bodoni Moda display + Inter body, modular scale ========================================================================== */ /* --- Family stacks (match the shipped homepage) --- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace; /* tabular figures: prices/timers */ /* --- Modular scale (base 17px, ratio ≈ 1.25 major-third; clamps for fluid) --- Body baseline is 17px (premium, calm). Steps named by role + px hint. */ --fs-micro: 0.72rem; /* 12.2px — legal, captions */ --fs-small: 0.82rem; /* 14px — meta, chips */ --fs-label: 0.76rem; /* 13px — uppercase eyebrows/labels */ --fs-body: 1rem; /* 17px — body (html font-size:106.25%) */ --fs-body-lg: 1.12rem; /* 19px — hero sub / lead paragraphs */ --fs-h5: 1.3rem; /* 22px — small headings, step titles */ --fs-h4: clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem); /* card / service h3 */ --fs-h3: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem); /* section sub-headings */ --fs-h2: clamp(2.1rem, 1.2rem + 3.6vw, 3.4rem); /* section headings */ --fs-h1: clamp(3rem, 1.4rem + 6.6vw, 6rem); /* hero headline */ --fs-display: clamp(3.6rem, 1.5rem + 8vw, 7.5rem); /* oversized editorial flourishes */ /* --- Line-height --- */ --lh-tight: 0.98; /* display headlines */ --lh-snug: 1.12; /* sub-headings */ --lh-body: 1.65; /* body copy (readable measure) */ --lh-relaxed: 1.75; /* long-form paragraphs */ /* --- Letter-spacing --- */ --tracking-display: -0.038em; /* tight Bodoni display — within the -0.04em floor so letters never touch at ~100px (was -0.045em) */ --tracking-tight: -0.03em; /* sub-heads / wordmark */ --tracking-body: 0; --tracking-label: 0.16em; /* uppercase eyebrows */ --tracking-wide: 0.28em; /* widest — logo sub-label "LOGISTICS" */ /* --- Weights (Inter + Bodoni share these names) --- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --- Measure (max line length) --- */ --measure: 34ch; /* hero sub / tight columns */ --measure-wide: 62ch; /* body paragraphs */ /* ========================================================================== 3 · SPACING — 4 / 8px rhythm, named by t-shirt size ========================================================================== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 5.25rem; /* 84px — section vertical padding */ --space-10: 7rem; /* 112px — major section breaks */ /* Section rhythm aliases */ --section-pad-y: var(--space-9); --gutter: 1.75rem; /* 28px — wrap horizontal padding (desktop) */ --gutter-sm: 1.25rem; /* 20px — wrap padding (mobile) */ /* ========================================================================== 4 · LAYOUT — container widths + the Swiss grid ========================================================================== */ --container: 1180px; /* main content max-width */ --container-narrow: 920px; /* prose / single-column blocks */ --container-wide: 1320px; /* full-bleed feature bands */ --grid-cols: 12; /* base grid columns */ --grid-gap: 1.5rem; /* 24px column gap */ /* ========================================================================== 5 · RADII — small, architectural (editorial = near-square, not pill) ========================================================================== */ --r-xs: 2px; /* inputs, chips, buttons (sharp/editorial) */ --r-sm: 3px; /* cards */ --r-md: 4px; /* large surfaces / quote shell */ --r-lg: 8px; /* feature panels */ --r-pill: 999px; /* eyebrow pills, seal, avatars */ /* ========================================================================== 6 · SHADOWS — soft editorial elevation + the J-bold OFFSET shadow ========================================================================== */ /* Soft, long, low-opacity green-tinted shadows (premium depth, not harsh) */ --shadow-sm: 0 8px 22px -16px rgba(22,41,31,0.40); --shadow: 0 18px 44px -28px rgba(22,41,31,0.42); --shadow-lg: 0 28px 60px -38px rgba(22,41,31,0.46); --shadow-card-hover: 0 26px 52px -34px rgba(22,41,31,0.46); /* J-BOLD OFFSET SHADOW — hard, ink-coloured, no blur. Gives the primary CTA its tactile "physical button" feel. The button sits ON it; hover GROWS the offset (lifts toward user), active COLLAPSES it (presses in). Pair these three with: rest → translate(0); hover → translate(-2px,-2px); active → translate(2px,3px). See --dur-press / --ease-spring below. */ --offset-shadow: 4px 5px 0 0 var(--ember-deep); /* rest */ --offset-shadow-hover: 6px 8px 0 0 var(--ember-deep); /* hover (lifted) */ --offset-shadow-active: 2px 2px 0 0 var(--ember-deep); /* active (pressed) */ /* Forest variant for dark-surface secondary buttons (offset in deep green) */ --offset-shadow-forest: 4px 5px 0 0 var(--forest-deep); --offset-shadow-forest-hover: 6px 8px 0 0 var(--forest-deep); --offset-shadow-forest-active:2px 2px 0 0 var(--forest-deep); /* Focus ring (a11y) */ --ring: 0 0 0 3px var(--ember-wash); --ring-dark: 0 0 0 3px rgba(199,154,82,0.28); /* ========================================================================== 7 · MOTION — durations + easings (respect prefers-reduced-motion) ========================================================================== */ --dur-fast: 0.18s; /* micro: button colour, link underline */ --dur-press: 0.14s; /* offset-shadow press (snappy) */ --dur-base: 0.28s; /* hover lifts, card transforms */ --dur-reveal: 0.8s; /* scroll-reveal fade+rise */ --dur-word: 0.66s; /* word-by-word headline slide */ --stagger-step: 0.08s; /* delay between staggered children/words */ --dur-seal: 40s; /* legacy: full perpetual rotation (no longer used) */ --dur-seal-intro: 2.4s; /* the seal's single settling rotation on load (lands, never loops) */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* default ease-out */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* strong ease-out (reveals) */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* exits (shorter) */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* tactile button overshoot */ /* ========================================================================== 8 · Z-INDEX — semantic scale, no magic 9999 ========================================================================== */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-toast: 400; } /* ----------------------------------------------------------------------------- GLOBAL PRIMITIVES the design system guarantees (kept minimal — full component styling lives in styles.css; these are the non-negotiable resets/atmosphere). --------------------------------------------------------------------------- */ html { font-size: 106.25%; /* 17px base */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Paper grain — flat layered gradients (no images), brass + forest tints */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-base); background: radial-gradient(120% 80% at 85% -10%, rgba(205,163,73,0.05), transparent 55%), radial-gradient(90% 70% at -10% 110%, rgba(31,59,48,0.045), transparent 50%); } ::selection { background: var(--brass-soft); color: var(--forest-deep); } /* Tabular figures wherever numbers must not jitter (prices, timers, stats) */ .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }