/* ============================================================ GTI Mobilise 2026 — Design tokens Generated from Figma Variables (see figexport/tokens/fig-tokens.css for the raw export) and the values used across the Home page frames. ============================================================ */ :root { /* ---- Brand colour variables (Figma "Variable collection") ---- */ --color-primary-black: #121212; /* Primary Black rgb(18,18,18) */ --color-mint-white: #F7F9F2; /* Mint White rgb(247,249,242) */ --color-sage: #E6ECD6; /* Sage rgb(230,236,214) */ --color-stone: #A3A994; /* Stone rgb(163,169,148) */ --color-emerald: #196D3A; /* Emerald rgb(25,109,58) */ --color-emerald-deep: #034D20; /* gradient end rgb(3,77,32) */ --color-electric-lime: #B7FE02; /* Electric Lime rgb(183,254,2) */ --color-mint: #82FBD4; /* Mint rgb(130,251,212) */ --color-cool-gray: #B9BFCA; /* Cool Gray (dashed rules) rgb(185,191,202) */ --color-alpha-80: rgba(255,255,255,0.8); --color-alpha-24: rgba(255,255,255,0.24); --color-alpha-04: rgba(255,255,255,0.04); /* ---- Extended palette observed on Home ---- */ --color-navy: #0C1420; /* technology / clients sections rgb(12,20,32) */ --color-lime-leaf: #B9D42D; /* Retention card rgb(185,212,45) */ --color-moss: #6A8D25; /* Regeneration card rgb(106,141,37) */ --color-forest: #2C5F2D; /* Reinvention card rgb(44,95,45) */ --color-error-red: #D5573A; /* close ✕ marks rgb(213,87,58) */ /* ---- Semantic aliases ---- */ --bg-page: var(--color-mint-white); --text-body-dark: var(--color-primary-black); --gradient-emerald: linear-gradient(180deg, var(--color-emerald) 0%, var(--color-emerald-deep) 89.63%); /* Same ramp read the other way: deep at the top, lighter green at the foot. */ --gradient-emerald-up: linear-gradient(180deg, var(--color-emerald-deep) 0%, var(--color-emerald) 89.63%); /* ---- Spacing (Figma spacing/N ×4px base) ---- */ --spacing-1: 4px; --spacing-2: 8px; --spacing-4: 16px; --spacing-16: 64px; --spacing-22: 88px; --spacing-24: 96px; --spacing-28: 112px; /* ---- Section rhythm (vertical padding on page sections) ---- */ --section-y: var(--spacing-22); /* 88px — standard */ --section-y-loose: var(--spacing-28); /* 112px — generous */ /* ---- Layout ---- */ --page-max: 1400px; /* content width, plus responsive gutters */ --page-gutter: clamp(16px, 4.45vw, 64px); --grid-gap: 8px; /* signature tight card gap */ --card-pad: 32px; /* padding inside a card surface */ --tab-divider-h: 18px; /* notched section divider height */ /* Mobile silhouette for that divider, drawn at the 390x18 the phone renders so the shoulder curves keep their aspect ratio — see base.css. Each shoulder is one symmetric cubic with horizontal tangents at both ends. The tangents sit at x=47 and x=108 rather than where the raw export measures, because the 2px seam overshoot in base.css scales this mask past the box height, so the tab bottom is reached before the path's own, which compresses the visible curve. Fitted through that scaling against the export: the rendered shoulder leaves the flat top at 14.3% and meets the flat bottom at 23.4%, against the export's 14.4% and 23.5%. Re-fit if the overshoot or the height changes. The viewBox is 390x18 — a 21.67:1 ratio, the same ratio --tab-divider-h holds below, so the curve keeps its proportions at every mobile width instead of shearing the way the 1440-wide desktop path does. */ --tab-divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 18' preserveAspectRatio='none'%3E%3Cpath d='M 0 0 L 47 0 C 77.5 0 77.5 18 108 18 L 282 18 C 312.5 18 312.5 0 343 0 L 390 0 Z' fill='%23000'/%3E%3C/svg%3E"); --header-h: 112px; /* header bar, at rest */ --header-h-scrolled: 76px; /* header bar, once scrolled */ /* ---- Radii ---- */ --radius-card: 4px; --radius-media: 8px; --radius-pill: 48px; --radius-round: 100px; /* ---- Chamfer (cut-corner) geometry, from the exact Figma vectors ---- */ --chamfer-x: 22px; --chamfer-y: 18px; /* The cut-corner outline as a shape, so anything that needs it can clip to it without restating eight points. The corner keeps its px size at any box size — unlike the fixed-viewBox mask SVGs, which only hold their proportions at the one slot they were drawn for. */ --chamfer-clip: polygon( 0 var(--chamfer-y), var(--chamfer-x) 0, calc(100% - var(--chamfer-x)) 0, 100% var(--chamfer-y), 100% calc(100% - var(--chamfer-y)), calc(100% - var(--chamfer-x)) 100%, var(--chamfer-x) 100%, 0 calc(100% - var(--chamfer-y)) ); /* ---- Typography ---- */ --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --text-display-size: clamp(2.5rem, 1.25rem + 3.34vw, 4rem); /* 64/64 Light */ --text-display-lh: 1; --text-section-size: clamp(2rem, 1.5rem + 1.67vw, 3rem); /* 48/52 Light */ --text-section-lh: 1.0833; --text-stat-size: clamp(2.75rem, 2rem + 1.67vw, 4rem); /* 64/64 Light stats */ --text-title-lg-size: clamp(1.75rem, 1.5rem + 0.84vw, 2rem); /* 32/36 Regular */ --text-title-lg-lh: 1.125; --text-card-size: 1.5rem; /* 24/28 Medium */ --text-card-lh: 1.1667; --text-lede-size: 1.25rem; /* 20/24 */ --text-lede-lh: 1.2; --text-body-size: 1rem; /* 16/24 */ --text-body-lh: 1.5; --text-small-size: 0.875rem; /* 14/20 */ --text-small-lh: 1.4286; --tracking-display: -0.04em; --tracking-body: -0.02em; --tracking-mono: 0.12em; --mono-size: 0.75rem; /* 12/16 mono labels */ --mono-lh: 1.3333; --mono-lg-size: 1rem; /* 16/24 mono buttons */ --chip-size: 0.625rem; /* 10/16 chips */ } /* ============================================================ Mobile layer — measured off the Figma mobile exports at 390px. Everything here is a token REDEFINITION, so a component that already reads the token gets the mobile value for free. Values that are not token-driven (hero title, .h-card, .label-pill, .btn) are corrected at their source in base.css. ============================================================ */ @media (max-width: 639px) { :root { /* Layout */ --page-gutter: 16px; /* The export draws the tab's depth as 4.62% of the frame width, not a fixed figure — at 390 that is the 18px desktop value, which is why it looked right there and progressively too shallow as the phone got wider. Holding the ratio also keeps the mask's 390x18 viewBox undistorted at every width. Clamped so the band ends don't run away: 4.62vw tracks 325-433px, and outside that the cap keeps it near the 18px the desktop path steps back to at 640. */ --tab-divider-h: clamp(15px, 4.62vw, 20px); --grid-gap: 4px; --card-pad: 24px; /* Section rhythm — roughly half the desktop figures */ --section-y: 44px; --section-y-loose: 56px; /* Typography */ --text-display-size: 2.625rem; /* 42/42 */ --text-display-lh: 1; --text-section-size: 2.25rem; /* 36/40 — larger than desktop's mobile end */ --text-section-lh: 1.1111; --text-card-lh: 1; /* 24/24 quotes and testimonials */ --text-lede-size: 1.125rem; /* 18 */ --text-body-size: 0.875rem; /* 14/20 */ --text-body-lh: 1.4286; } }