/* ============================================================ * MARTYN'S LAW — grouped.org.uk re-skin (violet accent) * Gives the hero a rounded "board" (grouped's hero-panel * signature) and runs the page on a VIOLET accent. Loaded LAST. * * data-theme="violet" is removed from . Most accents in * martyns-law.css flow through var(--accent, …); repointing * --accent to violet fixes them in bulk. The rest are overridden * below with the violet scale. * ============================================================ */ /* Violet scale used across this re-skin */ :root { /* Aligned to the OnSite Launch Campaign violet (brand). Primary = the * deep violet used for buttons / links / on-light accents (campaign * --ge-blue); bright = the on-dark accent (campaign --ge-sky). */ --v-accent: #4B38A0; /* primary — buttons, links, on-light accents */ --v-accent-deep: #3A2B7A; /* hover / solid grounds */ --v-accent-bright: #8572DA; /* on-dark accent — matches campaign --ge-sky */ --v-on-dark: #C8B8FF; /* violet text on dark */ --v-wash: #F2EEFB; /* light tint background — matches campaign --ge-blue-2 */ --v-wash-border: #E1DAF4; /* light tint border */ } /* 1. PALETTE — accent → violet ------------------------------ */ body { --accent: var(--v-accent); --accent-hover: var(--v-accent-deep); --link: var(--v-accent); --v2-violet-active: var(--v-accent-deep); } /* Primary button → navy pill, matching the site-wide [data-theme="violet"] * default. This page has no data-theme, so without this a bare .btn--primary * would fall back to foundation's sky-blue. Nav / hero / final-CTA keep their * own higher-specificity treatments; this only catches in-body buttons. */ .btn--primary { background: var(--ge-navy); color: var(--ge-white); border-color: var(--ge-navy); } .btn--primary .btn__arrow { background: var(--ge-white); color: var(--ge-navy); } .btn--primary:hover { background: var(--v-accent-deep); border-color: var(--v-accent-deep); color: var(--ge-white); } .btn--primary:hover .btn__arrow { background: var(--ge-white); color: var(--v-accent-deep); } /* Match the OnSite Launch Campaign page width (its marketing-page.css * widens the container + nav to 1640px). */ .container { max-width: 1640px; } .nav__inner { max-width: 1640px; } /* Match the campaign's larger nav CTAs. */ .nav__cta { padding: 15px 30px; font-size: 16px; } @media (min-width: 768px) { .nav__inner { height: 100px; } } /* 2. HERO VARIANT A → violet rounded board ------------------ */ /* Height tuned to match the OnSite Launch Campaign hero board. */ .hero-ml--a { padding-top: clamp(108px, 9vw, 124px); padding-bottom: clamp(14px, 1.6vw, 20px); } .hero-ml--a .hero-ml__split { background: var(--v-accent-deep); border-radius: clamp(24px, 2.4vw, 36px); padding: clamp(28px, 3.2vw, 44px); align-items: center; overflow: hidden; box-shadow: none; } @media (min-width: 960px) { .hero-ml--a .hero-ml__split { padding: clamp(40px, 3.4vw, 56px) clamp(44px, 4vw, 64px); } } /* Match the campaign hero board height. */ @media (min-width: 900px) { .hero-ml--a .hero-ml__split { min-height: clamp(520px, 48vw, 680px); } } /* Copy flips on-dark */ .hero-ml--a .hero-ml__copy h1 { color: var(--ge-white); } .hero-ml--a .hero-ml__lede { color: rgba(255, 255, 255, 0.82); } .hero-ml--a .eyebrow--ghost { color: var(--ge-white); border-color: rgba(255, 255, 255, 0.35); } /* Heading highlight → lilac pill, violet text */ .hero-ml--a .hero-ml__copy h1 .hl { background: var(--ge-violet-2, #E8E4F9); color: var(--v-accent); padding: 0.1em 16px 0.22em; line-height: 1.15; } /* Key-dates rail on-dark */ .hero-ml--a .hero-ml__rail { border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: var(--sp-5); margin-top: var(--sp-2); } .hero-ml--a .hero-ml__rail-date { color: var(--v-on-dark); } .hero-ml--a .hero-ml__rail-label { color: var(--ge-white); } /* Countdown tiles on the violet board */ .hero-ml--a .hero-ml__countdown-eyebrow { color: var(--v-on-dark); } .hero-ml--a .hero-ml__cd-unit { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); } .hero-ml--a .hero-ml__cd-num { color: var(--ge-white); } .hero-ml--a .hero-ml__cd-lbl { color: rgba(255, 255, 255, 0.62); } .hero-ml--a .hero-ml__cd-sep { color: rgba(255, 255, 255, 0.28); } /* Countdown sits as a WHITE tile in the bottom-right corner of the hero photo. */ .hero-ml--a .hero-ml__countdown--tile { position: absolute; right: clamp(14px, 1.6vw, 24px); bottom: clamp(14px, 1.6vw, 24px); z-index: 4; margin: 0; width: max-content; max-width: calc(100% - 2 * clamp(14px, 1.6vw, 24px)); background: var(--ge-white); border: 1px solid var(--ge-neutral-lt3); border-radius: clamp(16px, 1.8vw, 22px); padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2vw, 26px); display: inline-flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); } /* Dark-on-white inside the tile (overrides the on-violet styling above) */ .hero-ml--a .hero-ml__countdown--tile .hero-ml__countdown-eyebrow { color: var(--v-accent); } .hero-ml--a .hero-ml__countdown--tile .hero-ml__cd-unit { background: var(--v-wash); border-color: var(--v-wash-border); } .hero-ml--a .hero-ml__countdown--tile .hero-ml__cd-num { color: var(--v-accent); } .hero-ml--a .hero-ml__countdown--tile .hero-ml__cd-lbl { color: var(--ge-text-secondary); } .hero-ml--a .hero-ml__countdown--tile .hero-ml__cd-sep { color: var(--v-wash-border); } /* Ghost button reads on the violet board */ .hero-ml--a .hero-ml__actions .btn--ghost { color: var(--ge-white); border-color: rgba(255, 255, 255, 0.35); background: transparent; } .hero-ml--a .hero-ml__actions .btn--ghost:hover { border-color: var(--ge-white); background: rgba(255, 255, 255, 0.10); } /* Primary button on the violet board → white pill, navy arrow */ .hero-ml--a .hero-ml__actions .btn--primary { background: var(--ge-white); border-color: var(--ge-white); color: var(--v-accent-deep); } .hero-ml--a .hero-ml__actions .btn--primary .btn__arrow { background: var(--ge-navy); color: var(--ge-white); } .hero-ml--a .hero-ml__actions .btn--primary:hover { background: var(--ge-navy); border-color: var(--ge-navy); color: var(--ge-white); } .hero-ml--a .hero-ml__actions .btn--primary:hover .btn__arrow { background: var(--ge-white); color: var(--ge-navy); } /* Photo sits inside the board, bleeding to the right/top/bottom edges so it * fills the right column edge-to-edge (clipped by the board's rounded corner), * matching grouped's hero-panel where the image fills the right side. */ .hero-ml--a .hero-ml__split { align-items: stretch; } .hero-ml--a .hero-ml__copy { justify-content: center; } .hero-ml--a .hero-ml__photo { border-radius: 0; box-shadow: none; min-height: 360px; } @media (min-width: 960px) { .hero-ml--a .hero-ml__photo { min-height: 100%; margin: calc(-1 * clamp(40px, 3.4vw, 56px)) calc(-1 * clamp(44px, 4vw, 64px)) calc(-1 * clamp(40px, 3.4vw, 56px)) 0; } } .hero-ml--a .hero-ml__chip-dot { background: var(--v-accent-bright); box-shadow: 0 0 0 4px rgba(123, 98, 217, 0.18); } /* 3. HARD-CODED HEXES → violet ------------------------------ */ /* Enhanced tier header */ .tiers__th-tier--enhanced { background: var(--v-accent-bright); } @media (max-width: 760px) { .tiers__row-cell--enhanced::before { color: var(--v-accent); } } /* What-is pull quote */ .what-is__quote { background: var(--v-wash); border-color: var(--v-wash-border); } .what-is__quote-mark { color: var(--v-accent-bright); } .what-is__quote-cite { color: var(--v-accent); } /* Proof band emphasised number */ .proof-band--ml .proof-band__num { color: var(--v-on-dark); } /* Sources chips hover */ .sources__chip:hover { border-color: var(--v-accent); background: var(--v-wash); box-shadow: 0 6px 16px rgba(97, 77, 186, 0.12); } .sources__chip:hover .sources__chip-icon { color: var(--v-accent); } /* 4. FINAL CTA — flat solid violet section, white card ------ */ .final-cta { background: var(--v-accent-deep); position: relative; overflow: hidden; } /* Large white GroupEd symbol watermark in the section background */ .final-cta::before { content: ""; position: absolute; top: 50%; right: -8%; transform: translateY(-50%) rotate(-8deg); height: 150%; aspect-ratio: 1 / 1; background: var(--ge-white); -webkit-mask: url('../assets/images/grouped-symbol-white.svg') no-repeat center / contain; mask: url('../assets/images/grouped-symbol-white.svg') no-repeat center / contain; opacity: 0.07; pointer-events: none; z-index: 0; } /* Pill sits on the WHITE card, so it must stay a violet tint (a white * pill would vanish). Matches the card's violet accent. */ .final-cta h2 .hl { background: var(--ge-violet-2, #E8E4F9); color: var(--v-accent); } /* Email link → navy on the white card */ .final-cta__small a { color: var(--ge-navy); } /* Compliance — title pill matches the other section pills (sky tint), * item icons switch from sky to violet. */ .compliance__head h2 .hl { background: var(--ge-blue-3); color: var(--ge-blue); } .compliance__item-icon { color: var(--v-accent); } .compliance__item:hover .compliance__item-icon { background: var(--v-accent); color: var(--ge-white); } /* Section title pills — lilac ground + violet text, comfortable padding */ .tiers__head h2 .hl, .what-is__body h2 .hl, .prepare__head h2 .hl, .timeline-ml__head h2 .hl, .compliance__head h2 .hl, .faq__rail h2 .hl { background: var(--ge-violet-2, #E8E4F9); color: var(--v-accent); padding: 0.1em 16px 0.22em; line-height: 1.15; } /* TIERS — navy section background, on-dark heading; white table card. * Standard tier header → lilac (was navy), Enhanced stays violet. */ .tiers { background: var(--ge-navy); } .tiers__head h2 { color: var(--ge-white); } .tiers__head p { color: rgba(255, 255, 255, 0.80); } .tiers__head .eyebrow--ghost { color: var(--ge-white); border-color: rgba(255, 255, 255, 0.35); } .tiers__th-tier:not(.tiers__th-tier--enhanced) { background: var(--ge-violet-2, #E8E4F9); color: var(--ge-navy); } .tiers__th-tier:not(.tiers__th-tier--enhanced) h3 { color: var(--ge-navy); } .tiers__th-tier:not(.tiers__th-tier--enhanced) .tiers__th-label { color: var(--v-accent); } .tiers__th-tier:not(.tiers__th-tier--enhanced) .tiers__th-tier-capacity { color: var(--ge-text-secondary); } /* Prepare list — number badges on a lilac ground */ .prepare__num { background: var(--ge-violet-2, #E8E4F9); color: var(--v-accent); } .final-cta__card::after { display: none; } /* Drop shadows removed from all tiles/cards per design direction */ .final-cta__card, .tiers__table-wrap, .hero-ml__photo { box-shadow: none; } /* Nav link hover/active underline → navy (match index) */ .nav__link::after { background: var(--ge-navy); } .nav__link:hover { color: var(--ge-navy); } /* 5. CTA hover → violet ------------------------------------- */ .nav .btn--primary:hover, .final-cta .btn--primary:hover { background: var(--v-accent-deep); border-color: var(--v-accent-deep); color: var(--ge-white); } .nav .btn--primary:hover .btn__arrow, .final-cta .btn--primary:hover .btn__arrow { background: var(--ge-white); color: var(--v-accent-deep); } /* 6. HERO VARIANT B (dark full-bleed) → violet -------------- */ .hero-ml--b { background: linear-gradient(95deg, rgba(24, 16, 60, 0.96) 0%, rgba(24, 16, 60, 0.72) 42%, rgba(74, 57, 149, 0.42) 100%), url('../assets/images/hero-corridor-students.jpg') center right / cover no-repeat, linear-gradient(120deg, #1B1148 0%, #2E2070 45%, #4A3995 100%); } @media (min-width: 768px) { .hero-ml--b { background: linear-gradient(100deg, rgba(24, 16, 60, 0.94) 0%, rgba(24, 16, 60, 0.55) 55%, rgba(74, 57, 149, 0.38) 100%), url('../assets/images/hero-corridor-students.jpg') center / cover no-repeat, linear-gradient(120deg, #1B1148 0%, #2E2070 45%, #4A3995 100%); } } .hero-ml__dark-inner h1 .hl { color: var(--v-accent); } .hero-ml__dark-rail .hero-ml__rail-date, .hero-ml__banner-eyebrow, .hero-ml__banner-countdown-eyebrow { color: var(--v-on-dark); } .hero-ml__banner-countdown-dot { background: var(--v-accent-bright); box-shadow: 0 0 0 3px rgba(123, 98, 217, 0.20); } .hero-ml--b .btn--ghost:hover { background: var(--v-wash); }