/* ========================================================================== Design tokens — Orkla India Source of truth: Figma (get_variable_defs, homepage frame 11151:3218). Responsive strategy: override token values at the project breakpoints so the whole system scales from one place. Breakpoints: Desktop 1920–1440 · Tablet 1280–768 · Phone-L 767–480 · Phone-P 479–320 ========================================================================== */ :root { /* ---- Brand / Primary (Orkla maroon) ---- */ --c-primary: #720421; /* Primary/500 */ --c-primary-100: #e0829b; /* Primary/100 — impact stat-badge outline */ --c-primary-400: #8d233f; /* Primary/400 — News filter active pill (Figma 11363:7993) */ --c-primary-600: #5a031a; /* Primary/600 */ --c-primary-900: #170107; /* Primary/900 */ --c-primary-05: #7204210d; /* 5% — nurture-cards band tint (Figma 11290:2798) */ --c-primary-06: #7204210f; /* 6% — brand-card tint */ --c-primary-10: #7204211a; /* 10% */ --c-primary-20: #72042133; /* 20% */ /* ---- Neutrals / surfaces ---- */ --c-dark: #111111; /* Dark/500 */ --c-black: #000000; --c-white: #ffffff; --c-white-20: #ffffff33; /* White opacity 20% */ --c-surface: #f8f8f8; /* surface/constant/Surface */ --c-cream: #f2e2cf; /* hero slider arrow buttons (Figma) */ --c-tan-100: #f4e6d0; /* Our Brands hero band — gradient start (Figma 11197:3837) */ --c-tan-200: #e4cca8; /* Our Brands hero band — gradient end, reached at 56.25% */ /* ---- Text ---- */ --c-text: #24272c; /* text/gray/darker — primary text */ --c-text-body: #6f6f6f; /* base/text-paragraph */ --c-text-muted: #575d6a; /* text/gray/dark, Gray/700 */ /* ---- Semantic: the two answers on a disclaimer gate ---- The only place in the design that uses a colour other than the brand ramp to mean something: on Figma 11363:7662 "I Confirm" is green and "I Do Not Confirm" is red, so the choice reads before the words do. Both come straight from the file's own Success/Danger ramps. */ --c-success-600: #208c53; /* Success/600 — gate confirm */ --c-danger-700: #872721; /* Danger/700 — gate decline */ /* ---- Gray ramp ---- */ --c-gray-100: #eef0f3; --c-gray-200: #dee1e7; --c-gray-800: #3a3e47; /* Gray/800 — contact-card body text */ --c-gray-300: #bdc3d0; --c-gray-400: #a7afc1; /* Gray/400 — IR mega-menu tree chevron */ --c-gray-500: #929cb2; --c-gray-600: #747c8e; /* gray/600 — breadcrumb link */ --c-gray-700: #575d6a; --c-gray-05: #929cb20d; /* Gray opacity 5% */ --c-gray-10: #929cb21a; /* Gray opacity 10% */ --c-gray-30: #929cb24d; /* Gray opacity 30% — News filter-tab hairline */ --c-border: #dfe1e7; /* greyscale-100 */ /* ---- Typography: families (self-hosted; system fallbacks until woff2 land) ---- */ --ff-heading: "FK Roman Standard Trial", Georgia, "Times New Roman", Times, serif; --ff-body: "Messina Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---- Font weights ---- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Type scale: FLUID (8 Aug 2026) ------------------------------------ Every rung interpolates linearly between a 480px and a 1920px viewport, so type scales continuously instead of stepping at three breakpoints. The endpoints are the OLD ladder's endpoints — max = the old 1920 value, min = the old ≤479 value — so nothing changes at either extreme. What changes is everything in between, and that is the point: the ladder had no rung between 1281 and 1920, so a 1366px laptop rendered full desktop type. It now lands proportionally (e.g. --fs-6xl: 60 → 49.2 at 1366). Each formula is clamp(MIN, INTERCEPT + SLOPEvw, MAX) where SLOPE = (MAX - MIN) / 1440 * 100 (vw per px of range) INTERCEPT = MIN - (MAX - MIN) / 3 (in rem, ÷16) Derived, not eyeballed — each one hits MAX exactly at 1920 and MIN exactly at 480. The vw term is added to a rem base rather than used alone so browser text-resizing still works (a pure-vw font-size cannot be zoomed, which is a WCAG 1.4.4 failure). Widths that matter, for reference (verified, not estimated): 1920 1600 1440 1366 1280 768 480 --fs-6xl 60 53.8 50.7 49.2 47.6 37.6 32 --fs-4xl 48 44.4 42.7 41.8 40.9 35.2 32 --fs-2xl 32 30.2 29.3 28.9 28.4 25.6 24 For the three big display rungs the 1280 column lands within ~1px of the old ≤1280 value (47.6 vs 48, 40.9 vs 40, 36.4 vs 36), so tablet is effectively unchanged; the 1366/1440 columns are the bug being fixed. Three rungs DO change materially in the mid range, because they used to be flat rather than laddered: --fs-2xl held 32 all the way from 1920 to 768 and now reads 28.4 at 1280, while --fs-xl (24) and --fs-l2 (18) were flat at every width and now ease down to 20 and 16. That is the intended behaviour — they were flat only because no one had laddered them — but it is the part of this change most likely to be noticed on tablet. */ --fs-s: 0.875rem; /* 14 — flat, the micro-label rung; see note below */ --fs-m: 1rem; /* 16 — flat ON PURPOSE, see note below */ --fs-l2: clamp(1rem, 0.9583rem + 0.1389vw, 1.125rem); /* 16 → 18 */ --fs-l: clamp(1.125rem, 1.0833rem + 0.1389vw, 1.25rem); /* 18 → 20 */ --fs-xl: clamp(1.25rem, 1.1667rem + 0.2778vw, 1.5rem); /* 20 → 24 H6 */ --fs-2xl: clamp(1.5rem, 1.3333rem + 0.5556vw, 2rem); /* 24 → 32 H5 */ --fs-3xl: clamp(2rem, 1.8333rem + 0.5556vw, 2.5rem); /* 32 → 40 stat figures */ --fs-4xl: clamp(2rem, 1.6667rem + 1.1111vw, 3rem); /* 32 → 48 H3 */ --fs-5xl: clamp(2rem, 1.4167rem + 1.9444vw, 3.75rem); /* 32 → 60 H2 */ /* --fs-m is the only rung left flat, and deliberately: 16px is the floor below which mobile Safari zooms form fields on focus, and shrinking base body copy below 16 is an accessibility regression rather than a refinement. If a genuinely smaller step is ever needed, add a --fs-s rather than lowering this. That step was needed on 13 Aug 2026, and --fs-s above is it: the Results table's column headers are 14px in the design, and they are the label that says what a wordless icon opens. It is flat for the same reason --fs-m is and not for the opposite one — at 14 there is nothing left to ladder down into. Use it for labels that are read as labels; never for prose. */ /* --fs-6xl (H1) is 60 at the top, NOT Figma's 72 — client instruction 7 Aug 2026: "we have 72px title on the whole website, need to make it 60px sitewide". Do not restore 72 from the design file; the frames still say 72 and that is a known, accepted divergence. Deliberately the same curve as --fs-5xl above: H1 and H2 are the same size at every width and are told apart by --lh-tight and --ls-h1 alone. The strict 60/72 cut would put H1 BELOW the H2 it sits above, so H2 is the floor here — if a visible gap is ever wanted back, lower --fs-5xl; never raise this. */ --fs-6xl: clamp(2rem, 1.4167rem + 1.9444vw, 3.75rem); /* 32 → 60 H1 */ /* ---- Line heights / tracking ---- */ /* The line-heights are unitless multipliers, so they already scale with the fluid font-sizes above with no work needed — 1.2 of 49.2px is 59px at 1366 just as 1.2 of 60px is 72px at 1920. Nothing to convert here. */ --lh-tight: 1.2; /* H1 */ --lh-heading: 1.3; /* H3 */ --lh-base: 1.4; /* body, H2, H5, H6 */ /* Tracking is em, not px, so it scales with the fluid size instead of staying fixed while the text shrinks (a fixed -1px is 3x tighter, optically, on a 32px heading than on a 60px one). */ --ls-h1: -0.008em; /* was -0.5px; -0.5/60 at the H1 max */ --ls-h3: -0.01em; /* was -1px — see below */ /* --ls-h3 was WRONG as well as fixed. It came from a Figma letterSpacing reported as "-1", but Figma reports tracking as a PERCENTAGE, so -1 means -1% = -0.01em, which resolves to -0.32px on 32px text. The literal -1px was roughly 3x too tight. Seven rules share this token and all of them loosen slightly as a result; that is the correction, not a regression. This is the same percent-vs-px trap that produces the five hardcoded -0.32px values in main.css (32 x -0.01), now folded into this token. */ /* ---- Spacing scale (px from Figma) ---- */ --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px; /* ---- Interior-page vertical rhythm ---- ONE knob for the gap between stacked content-sections. Every section on the Content Sections template uses this as its own top+bottom padding, so the gap between any two adjacent sections is always 2×this value — identical on every page and unaffected by adding, removing, or reordering sections. Change this single value to retune the whole interior rhythm. */ --section-pad: clamp(var(--sp-48), 4.5vw, 64px); /* ---- Radius ---- */ --radius-sm: 4px; /* IR mega-menu selected tree row */ --radius-md: 8px; /* nav dropdown panel */ --radius-lg: 12px; --radius-xl: 16px; /* Our Brands logo cards (Figma variable "16") */ /* ---- Layout ---- */ --container-max: 1200px; /* content max; refined per section from Figma */ --container-pad: 24px; /* side gutter */ /* --header-h is 80 at the top, NOT Figma's 100 — client instruction 10 Aug 2026, alongside the wider spacing standardisation. The frames still draw a 1920×100 bar and that is a known, accepted divergence; do not restore 100 from the design file. Nothing else needs touching when this moves. Six rules derive from it — the bar's own min-height, the mobile drawer's `top`, the search takeover's two viewport calcs, the search page header, and the anchor `scroll-margin` — and the nav dropdown hangs off `top: 100%`, so it follows the bar rather than a number. No JavaScript reads it. That is the whole reason this is one line. The bar is not cramped at 80: the tallest child is the 44px logo, so there is 18px of clearance above and below it, and the nav links carry only 10px of their own block padding. There is no internal vertical padding to tighten — .site-header__inner sets padding-inline alone, on purpose. The ≤767 override below stays at 64. It was never derived from this value. */ --header-h: 80px; --header-pad: 48px; /* header side gutter — INLINE only; the bar's height is --header-h above, not this. */ } /* Tablet 1280–768 */ @media (max-width: 1280px) { :root { /* The four font-size rungs that used to live here are gone: at 1280 the clamps reach 47.6 / 47.6 / 40.9 / 36.4 (6xl / 5xl / 4xl / 3xl) on their own, against the 48 / 48 / 40 / 36 this block used to declare — within ~1px of every one of them. Re-adding a font-size here would flatten the curve back into a step. */ --container-pad: 20px; --header-pad: 32px; } } /* Phone landscape 767–480 */ @media (max-width: 767px) { :root { /* Font-size rungs removed — at 767 the clamps land at 37.6 / 37.6 / 35.2 / 33.6 / 25.6 / 18.4 (6xl / 5xl / 4xl / 3xl / 2xl / l), against the 36 / 36 / 32 / 32 / 24 / 18 this block used to force. Each is 0.4–3.2px larger, and they keep easing down to the old values by 480 instead of jumping to them here. */ --container-pad: 16px; --header-pad: 16px; --header-h: 64px; } } /* Phone portrait 479–320 — no token overrides left. Every clamp() above bottoms out at its MIN at exactly 480px and holds that value all the way down, which is what this block used to do by hand. Kept as a comment rather than deleted so the breakpoint set still reads as three tiers alongside main.css. */