/* ============================================================ APEXA QLA — V5 BRAND-DESIGNER FEEDBACK OVERRIDES Loaded AFTER style-v4.css. Implements: 1. Buttons rounded + white text + no glow 2. Single font on buttons (Aktiv Grotesk) 3. No white text on light backgrounds (text-shadow safety on hero) 4. No italicised text anywhere 5. Body copy weight 400 (not 300) 6. Standardise body text colour 7. Aktiv Grotesk Extended → -2% letter-spacing globally 8. Therapy Tools UI → Aktiv Grotesk 9. Stories (was Wall of Wins) → Aktiv Grotesk 10. Footer → brand Blue (#25323A) not near-black 11. CTA heading → lighter weight v4 stays untouched; this file is v5-only. ============================================================ */ /* ---------------------------------------------------------- 5 BODY COPY — REGULAR WEIGHT 400 (was 300 in many places) ---------------------------------------------------------- */ body { font-weight: 400; } p, .body-lg, .body-md, .subtitle, .lead, .card__desc, .card__body p, .section__subtitle, .problem-v2__body p, .path-step__desc, .testimonial blockquote p, .apexa-stories__slide blockquote p, .apexa-stories__subtitle, .team-header p, .path-progress__header p, .programmes__intro, .contact-banner__inner p, .heading-accent, .footer-v2__brand p, .footer-v2__nav a { font-weight: 400; } /* ---------------------------------------------------------- 6 STANDARDISE BODY TEXT COLOUR One primary body colour: --text-dark on light sections, #ffffff on dark sections. No more grey-warm/text-muted mix. ---------------------------------------------------------- */ .section--cream p, .section--light p, .section--mist p, .problem-v2 p, .path-step__desc, .card__desc { color: var(--text-dark); opacity: 0.85; } .section--dark p, .team-section p { color: rgba(255, 255, 255, 0.85); } /* ---------------------------------------------------------- 7 AKTIV GROTESK EXTENDED — -2% LETTER-SPACING GLOBALLY Applies wherever Extended (--font-heading) is used. ---------------------------------------------------------- */ .heading-xl, .heading-lg, .heading-md, .hero__title, .hero__title-line, .hero__tagline, .section__heading, .therapy-tools__title, .therapy-tools__eyebrow, .splat__title, .splat__eyebrow, .apexa-stories__title, .apexa-stories__label, .contact-banner__title, .path-progress h2, .path-progress__label, .problem-v2__title, .problem-v2__subtitle, .team-slider__name, .programmes__heading, .card__title, .card__body .card__title, .footer-v2__heading, .testimonial cite, .apexa-stories__author, .skill-bar__name, .skill-bar__value, .skill-tree__label, [class*="__title"], [class*="__heading"], [class*="__eyebrow"], [class*="__label"] { letter-spacing: -0.02em !important; } /* ---------------------------------------------------------- 4 KILL ALL ITALICS , , blockquote, hardcoded font-style: italic Preserve Remix Icons () since those use icon font, not real italics. ---------------------------------------------------------- */ em, i:not([class*="ri-"]):not(.cursor):not(.cursor__inner), cite, blockquote, .problem-v2__title em, .problem-v2__subtitle em, .apexa-stories__title em, .contact-banner__title em, .section__heading em, .heading-xl em, .heading-lg em, .heading-md em { font-style: normal !important; font-family: inherit !important; } /* Emphasised words inside headings keep ORANGE colour but lose italic + Cormorant. They become Aktiv Grotesk Extended in accent colour. */ .heading-xl em, .heading-lg em, .heading-md em, .problem-v2__title em, .problem-v2__subtitle em, .apexa-stories__title em, .contact-banner__title em, .section__heading em { font-family: "aktiv-grotesk-extended", sans-serif !important; font-style: normal !important; color: var(--accent); font-weight: inherit; } /* ---------------------------------------------------------- 1 + 2 BUTTONS - All rounded pill (border-radius: 100px) - WHITE text - No box-shadow / glow - Single font: Aktiv Grotesk Regular (body family) ---------------------------------------------------------- */ .btn, .btn--primary, .btn--outline, .btn--text, .btn--lg, .btn--sm, .btn--accent-pill, .card__cta, .contact-banner__cta, .problem-v2__cta, a.btn, button.btn, .path-progress .btn--primary { border-radius: 100px !important; color: #ffffff !important; box-shadow: none !important; font-family: "aktiv-grotesk", "Inter", sans-serif !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.1em; } .btn--primary { background: var(--accent) !important; color: #ffffff !important; } .btn--primary:hover { background: var(--accent-hover) !important; box-shadow: none !important; transform: translateY(-2px); } .btn--outline { background: transparent !important; border: 1.5px solid rgba(255, 255, 255, 0.55) !important; color: #ffffff !important; box-shadow: none !important; } .btn--outline:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: #ffffff !important; } .btn--text { background: none !important; color: var(--accent) !important; /* text-only stays orange */ } .card__cta { background: var(--accent) !important; color: #ffffff !important; } .card__cta:hover { background: var(--accent-hover) !important; box-shadow: none !important; } .contact-banner__cta { background: var(--dark) !important; color: #ffffff !important; border-radius: 100px !important; box-shadow: none !important; } .contact-banner__cta:hover { background: #0e1419 !important; box-shadow: none !important; } /* Splat reveal button — also a button, kill its glow */ .splat__reveal-btn, .splat__reveal-btn.is-visible, .splat__reveal-btn.is-visible:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset !important; font-family: "aktiv-grotesk", "Inter", sans-serif !important; } /* ---------------------------------------------------------- 11 CTA BANNER HEADING — LIGHTER WEIGHT Was font-weight: 800 (Black). Brand wants lighter. ---------------------------------------------------------- */ .contact-banner__title { font-weight: 300 !important; letter-spacing: -0.02em !important; } /* ---------------------------------------------------------- 8 THERAPY TOOLS UI — AKTIV GROTESK The 3D ring text itself stays Neuton (MSDF atlas baked into tools-3d.js — would need to regenerate atlas from Aktiv). But the surrounding DOM UI all uses Aktiv via these rules. ---------------------------------------------------------- */ .therapy-tools__eyebrow, .therapy-tools__title { font-family: "aktiv-grotesk-extended", "Plus Jakarta Sans", sans-serif !important; } .therapy-tools__active-name { font-family: "aktiv-grotesk-extended", sans-serif !important; font-style: normal !important; } .therapy-tools__active-desc, .therapy-tools__nav-pill, .therapy-tools__nav-pill button { font-family: "aktiv-grotesk", "Inter", sans-serif !important; font-weight: 400 !important; font-style: normal !important; } /* ---------------------------------------------------------- 9 STORIES (was Wall of Wins) — NO RANDOM FONTS Force Aktiv on title + body of stories cards. ---------------------------------------------------------- */ .apexa-stories__title, .apexa-stories__label, .apexa-stories__subtitle, .apexa-stories__author, .apexa-stories__slide blockquote, .apexa-stories__slide blockquote p { font-family: "aktiv-grotesk-extended", "aktiv-grotesk", sans-serif !important; font-style: normal !important; } .apexa-stories__slide blockquote, .apexa-stories__slide blockquote p, .apexa-stories__subtitle { font-family: "aktiv-grotesk", "Inter", sans-serif !important; } /* ---------------------------------------------------------- 10 FOOTER COLOUR — BRAND BLUE (#25323A) NOT NEAR-BLACK Toolkit specifies Blue #25323A. Was using --text-dark which is #1a252b (too dark / almost black). ---------------------------------------------------------- */ .footer-v2 { background: var(--dark) !important; /* #25323A — toolkit Blue */ } /* ---------------------------------------------------------- 3 NO WHITE TEXT ON LIGHT BACKGROUNDS Hero is dark video so white text is fine — but bright video frames (sky, water) can make white feel washed out. Add a subtle text-shadow as legibility safety net. ---------------------------------------------------------- */ .hero__title-line, .hero__tagline, .hero__cta-label, .hero__cta-desc, .hero__scroll-hint, .nav:not(.scrolled) .nav__utility-link, .nav:not(.scrolled) .nav__link-group a { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); } /* ---------------------------------------------------------- GENERAL — strip any remaining --glow-* shadows ---------------------------------------------------------- */ .glow-sun, .glow-mist, .glow-soft { box-shadow: none !important; }