/* ========================================================================== Activ.ie Homepage — Design Tokens & Base Reset (theme-scoped) Migrated from the activ-ie-prototype-pages plugin's tokens.css. All previously-global selectors (:root, *, html, body, main, img, h1-h4, p, ul, a, button, input/textarea/select, :focus-visible) are scoped under body.activ-elementor-homepage so this file cannot affect any other page when Gecko Child loads it. The scoped custom-property declaration still cascades to every descendant, so this is a purely mechanical, zero-visual-change scoping pass — see 03-guides/homepage-installation-guide.md for the full rationale. The `html{scroll-behavior:smooth}` rule from the original file is applied instead via `#activ-homepage-html` further down, since it targets an ancestor of body and can't be scoped as a descendant rule; that ID only ever exists on this template's own tag. ========================================================================== */ /* ========================================================================== Activ.ie — Design Tokens & Base Reset Shared across homepage / research-insights / members prototypes. Scope: applies globally within a prototype page (this file IS the foundation layer, not a leaked third-party stylesheet). ========================================================================== */ body.activ-elementor-homepage { /* Colour system */ --activ-purple: #CB6CE6; --activ-purple-deep: #9A3FB8; --activ-purple-ink: #3D1F49; --activ-green: #1E8F4E; --activ-green-deep: #146638; --off-white: #FBF9FC; --charcoal: #211A26; --soft-lilac: #F1E4FA; --pale-green: #E3F3E7; --soft-pink: #FBE4EC; --muted-blue: #E3EEF7; --muted-blue-ink: #2E5A78; --warm-neutral: #F3EFEA; --error: #B3261E; --white: #FFFFFF; /* Typography */ --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --text-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); --text-h1: clamp(1.875rem, 1.4rem + 2vw, 3rem); --text-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem); --text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); --text-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem); --text-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem); --text-body: 1rem; --text-small: 0.875rem; --text-eyebrow: 0.8125rem; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-30: 7.5rem; /* Section padding — compresses per breakpoint via media queries below */ --section-pad-y: var(--space-24); --page-gutter: var(--space-16); /* Radius */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 999px; /* Shadow */ --shadow-1: 0 1px 2px rgba(33,26,38,0.04), 0 2px 8px rgba(33,26,38,0.06); --shadow-2: 0 8px 24px rgba(33,26,38,0.10); --shadow-3: 0 16px 40px rgba(33,26,38,0.14); --shadow-glow-cta: 0 0 0 4px rgba(203,108,230,0.15); /* Border */ --border-hairline: 1px solid rgba(33,26,38,0.08); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-entrance: 450ms; --dur-hover: 180ms; --dur-press: 100ms; --content-max: 1280px; /* ----------------------------------------------------------------------- Homepage visual-refresh accent tokens (2026-07 pass) Additive only — existing tokens above are unchanged so Research & Members keep rendering exactly as before. These are mid-tone accents used for gradients, icon strokes and halos on the homepage only. ------------------------------------------------------------------------- */ --activ-lilac-deep: #A84ED2; --activ-pink-accent: #E286D8; --activ-mint: #83CFC0; --activ-mint-deep: #4FA893; --pale-mint: #E3F5F1; --gradient-headline: linear-gradient(95deg, var(--activ-lilac-deep) 0%, var(--activ-purple) 33%, var(--activ-pink-accent) 66%, var(--activ-mint) 100%); --gradient-cta-panel: linear-gradient(135deg, var(--activ-lilac-deep) 0%, var(--activ-purple) 60%, var(--activ-pink-accent) 100%); } @media (max-width: 1279px) and (min-width: 1024px) { body.activ-elementor-homepage { --page-gutter: var(--space-12); } } @media (max-width: 1023px) and (min-width: 768px) { body.activ-elementor-homepage { --section-pad-y: var(--space-20); --page-gutter: var(--space-8); } } @media (max-width: 767px) { body.activ-elementor-homepage { --section-pad-y: var(--space-16); --page-gutter: 1.25rem; } } @media (max-width: 360px) { body.activ-elementor-homepage { --page-gutter: 1rem; } } /* ------------------------------------------------------------------------- Reset ------------------------------------------------------------------------- */ body.activ-elementor-homepage, body.activ-elementor-homepage *, body.activ-elementor-homepage *::before, body.activ-elementor-homepage *::after { box-sizing: border-box; } #activ-homepage-html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { #activ-homepage-html { scroll-behavior: auto; } } body.activ-elementor-homepage { margin: 0; font-family: var(--font-body); font-size: var(--text-body); color: var(--charcoal); background: var(--off-white); line-height: 1.6; overflow-x: hidden; } body.activ-elementor-homepage main { overflow-x: clip; display: block; } body.activ-elementor-homepage img { max-width: 100%; display: block; } body.activ-elementor-homepage h1, body.activ-elementor-homepage h2, body.activ-elementor-homepage h3, body.activ-elementor-homepage h4 { font-family: var(--font-display); margin: 0; line-height: 1.15; font-weight: 700; } body.activ-elementor-homepage p { margin: 0; } body.activ-elementor-homepage ul { margin: 0; padding: 0; list-style: none; } body.activ-elementor-homepage a { color: inherit; text-decoration: none; } body.activ-elementor-homepage button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } body.activ-elementor-homepage input, body.activ-elementor-homepage textarea, body.activ-elementor-homepage select { font: inherit; color: inherit; } /* ------------------------------------------------------------------------- Layout utilities ------------------------------------------------------------------------- */ .activ-container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--page-gutter); } .activ-section { padding-block: var(--section-pad-y); overflow-x: clip; } .activ-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .activ-skip-link { position: absolute; left: var(--space-4); top: -60px; background: var(--charcoal); color: var(--white); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); z-index: 1000; transition: top var(--dur-hover) var(--ease-out); } .activ-skip-link:focus { top: var(--space-4); } /* ------------------------------------------------------------------------- Typography helpers ------------------------------------------------------------------------- */ .activ-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--activ-purple-deep); } .activ-lede { font-size: var(--text-body-lg); color: rgba(33,26,38,0.75); line-height: 1.55; margin-bottom: var(--space-4); } /* ------------------------------------------------------------------------- Focus states — global, never removed without replacement ------------------------------------------------------------------------- */ body.activ-elementor-homepage :focus-visible { outline: 2px solid var(--activ-purple); outline-offset: 2px; border-radius: 4px; } /* ------------------------------------------------------------------------- Entrance animation ------------------------------------------------------------------------- */ .activ-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-entrance) var(--ease-out), transform var(--dur-entrance) var(--ease-out); } .activ-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .activ-reveal { opacity: 1; transform: none; transition: none; } }