/* MarVal Power — Design tokens Texture-led renewable: warm sand + sage + cream accents, bolder rounds, magazine-style photo masks. MarVal brand colours preserved. */ :root { /* ─── Brand colour ──────────────────────────────────────────── */ --navy: oklch(0.22 0.04 245); /* #062338 */ --navy-deep: oklch(0.16 0.04 245); /* hero / final-CTA bleed */ --navy-soft: oklch(0.30 0.04 245); /* hover state on dark band */ --green: oklch(0.68 0.18 138); /* #53AB35 — CTA only */ --green-soft: oklch(0.74 0.14 138); /* hover state */ --green-deep: oklch(0.58 0.20 138); /* :active CTA */ /* ─── Texture-led: warm earth surfaces ─────────────────────── Renewable energy expressed through warm sand, sage and cream rather than bright green. Brand green stays for CTAs only. */ --white: oklch(0.998 0.001 245); /* primary page bg */ --cream: oklch(0.975 0.012 90); /* warm cream — section accent */ --cream-soft: oklch(0.955 0.018 88); /* warm sand card surface */ --cream-deep: oklch(0.91 0.030 86); /* eyebrow chip bg, avatar circles */ --sand: oklch(0.93 0.026 82); /* warm sand block */ --sand-deep: oklch(0.86 0.038 78); /* sand divider, chip border */ --sage: oklch(0.78 0.045 138); /* muted sage accent surface */ --sage-deep: oklch(0.62 0.055 142); /* sage rule, eyebrow on light */ --moss: oklch(0.42 0.060 142); /* deep editorial accent */ /* ─── Tinted neutrals ──────────────────────────────────────── */ --surface: var(--white); --subtle: oklch(0.97 0.010 82); /* slight warm tint */ --hairline: oklch(0.91 0.012 86); --border: oklch(0.84 0.018 84); --border-strong: oklch(0.70 0.024 80); --muted: oklch(0.48 0.022 80); --text: oklch(0.22 0.04 245); --text-strong: oklch(0.14 0.05 245); --text-on-dark: oklch(0.96 0.01 245); --muted-on-dark: oklch(0.78 0.02 245); --hairline-on-dark: oklch(0.32 0.04 245); /* Sticky-stacking heights for sticky header + sticky anchor nav */ --header-h: 64px; --anchor-nav-h: 46px; /* ─── Typography ────────────────────────────────────────────── */ --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* same family — emphasis via weight/italic */ /* Type scale — BeyondBMI v3 (fs-* values ported verbatim). */ --text-xs: 0.72rem; /* 11.5px — eyebrow / caption */ --text-sm: 0.9rem; /* 14.4px — body-sm / dense meta */ --text-base: 1.02rem; /* 16.3px — body (BeyondBMI fs-body) */ --text-lg: 1.15rem; /* 18.4px — lead / h5 (fs-body-large) */ --text-xl: clamp(1.2rem, 1.6vw, 1.5rem); /* 19 → 24px — h4 */ --text-2xl: clamp(1.35rem, 2.4vw, 1.8rem); /* 22 → 29px — h3 (BeyondBMI fs-h3) */ --text-3xl: clamp(1.7rem, 3.2vw, 2.5rem); /* 27 → 40px — h2-sm */ --text-4xl: clamp(2rem, 4.2vw, 3.1rem); /* 32 → 50px — h2 (BeyondBMI fs-h2) */ --text-5xl: clamp(2.5rem, 5.2vw, 4.2rem); /* 40 → 67px — h1 (BeyondBMI fs-h1) */ --text-6xl: clamp(3rem, 6.4vw, 5.2rem); /* 48 → 83px — stat XL (fs-h1-mega) */ /* Semantic aliases — components reference these, NOT the raw --text-* steps. Change once here, and every heading / stat / paragraph in the app follows. */ --font-h1: var(--text-5xl); /* hero display */ --font-h2-hero: var(--text-5xl); /* hero-scale section title (hub-hero, final-cta) */ --font-h2: var(--text-4xl); /* standard section title */ --font-h2-sm: var(--text-3xl); /* compact section title / large card title */ --font-h3: var(--text-2xl); /* card title, sub-section */ --font-h4: var(--text-xl); /* feature block / popup heading */ --font-h5: var(--text-lg); /* small popup title / compact card head */ --font-lead: var(--text-lg); /* section intro / lede */ --font-body: var(--text-base); /* paragraph body */ --font-body-sm: var(--text-sm); /* dense secondary text */ --font-eyebrow: var(--text-xs); /* uppercase eyebrow */ --font-caption: var(--text-xs); /* legal / meta / micro-chip */ --font-stat-xl: var(--text-6xl); /* headline stat (vcard-all__num) */ --font-stat-lg: var(--text-5xl); /* big stat number */ --font-stat-md: var(--text-4xl); /* stat-strip figure, process-step num */ --font-stat-sm: var(--text-2xl); /* trust-strip num, in-card stat */ /* Line heights — pair with the semantic aliases above */ --lh-display: 1.02; --lh-heading: 1.08; --lh-heading-sm: 1.15; --lh-body: 1.6; --lh-lead: 1.55; --lh-tight: 1.2; /* ─── Spacing rhythm (more generous than v1) ──────────────── */ /* Section rhythm — tightened to Refined's spec (40 / 56 / 72px desktop). Reserve --space-section-breathing for hero + final CTA only. */ --space-section-tight: clamp(2rem, 4vw, 3.5rem); /* 32 → 56 */ --space-section-default: clamp(2.5rem, 6vw, 4.5rem); /* 40 → 72 */ --space-section-breathing: clamp(3.5rem, 8vw, 7rem); /* 56 → 112, hero/feature only */ --max-width: 1380px; --max-narrow: 1080px; --max-prose: 65ch; /* ─── Radii (texture-led — bolder rounds everywhere) ────── */ --radius-sharp: 10px; --radius-card: 28px; --radius-image: 32px; --radius-image-lg: 40px; --radius-pill: 999px; /* ─── Shadows ──────────────────────────────────────────── */ --shadow-card: 0 1px 2px rgba(6, 35, 56, 0.05), 0 6px 24px rgba(6, 35, 56, 0.07); --shadow-card-hover: 0 2px 4px rgba(6, 35, 56, 0.08), 0 16px 40px rgba(6, 35, 56, 0.12); --shadow-cta: 0 2px 4px rgba(83, 171, 53, 0.22), 0 12px 32px rgba(83, 171, 53, 0.30); --shadow-elevated: 0 32px 64px -20px rgba(6, 35, 56, 0.22); /* ─── Motion ───────────────────────────────────────────── */ --ease-out-quart: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 400ms; --dur-extra: 900ms; /* ─── Z-index scale ────────────────────────────────────── */ --z-nav: 40; --z-callback: 50; --z-overlay: 60; /* ─── Bento / Refined-aligned card chain ─────────────────── One token chain feeds every card in Sectors, Why, Process. Inner radius is derived: --bento-radius-inner = --bento-radius − --bento-pad. */ --bento-radius: 36px; --bento-pad: clamp(1.25rem, 2.4vw, 2rem); /* 20–32 */ --bento-radius-inner: calc(var(--bento-radius) - var(--bento-pad)); --bento-gap: clamp(1rem, 1.6vw, 1.5rem); /* 16–24 */ --bento-gap-grid: clamp(1rem, 1.8vw, 2rem); /* 16–32 (Refined card grid) */ --bento-surface: var(--cream); /* warm cream section bg */ --bento-card-bg: var(--white); --bento-card-border: var(--hairline); --bento-shadow: 0 1px 3px 0 rgb(40 28 18 / 0.05); --bento-shadow-hover: 0 8px 18px -4px rgb(40 28 18 / 0.10), 0 3px 6px -3px rgb(40 28 18 / 0.06); --bento-icon-bg: var(--sage); /* sage-tinted accent */ --bento-focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--green); /* ─── Editorial layer (Mobbin-driven redesign, Phase 1+) ─── New primitives that back the editorial section variants used across the redesigned homepage, sector pages, and case studies. */ /* Huge numerals — Craft Agency / Trawelt style process rows and hero counters. */ --font-editorial-num: clamp(3.5rem, 9vw, 7rem); /* 56 → 112 — process rows */ --font-editorial-num-xl: clamp(5rem, 14vw, 11rem); /* 80 → 176 — hero / detail */ /* Image-forward card overlay (Tripadvisor + Instagram Creators treatment). */ --photo-overlay-editorial: linear-gradient(180deg, oklch(0.16 0.04 245 / 0.10) 0%, oklch(0.16 0.04 245 / 0.48) 55%, oklch(0.10 0.04 245 / 0.86) 100%); --photo-overlay-editorial-hover: linear-gradient(180deg, oklch(0.16 0.04 245 / 0.06) 0%, oklch(0.16 0.04 245 / 0.36) 55%, oklch(0.10 0.04 245 / 0.72) 100%); /* Sticky TOC (case-study detail long-form). */ --sticky-toc-w: 220px; --sticky-toc-offset: calc(var(--header-h) + 32px); /* Case-study metadata rail. */ --metadata-rail-h: clamp(72px, 8vw, 96px); /* Motion for scrubbed / scroll-anchored animations. */ --dur-scrub: 800ms; --ease-scrub: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-extra: 0ms; --dur-scrub: 0ms; } }