/* ============================================================ * Martyn's Law information page * Extends onsite.css with sections specific to this page: * - .hero-ml (3 hero variants, switchable via [data-hero-variant]) * - .what-is, .what-is__keyfacts * - .tiers, .tiers__table * - .timeline-ml * - .prepare, .prepare__list * - .compliance (reuses .features pattern from onsite.css) * - .faq, .faq__item * - .tweaks (minimal panel for variant toggle) * ============================================================ */ /* ---- Generic eyebrow tweak: ensure the page-context eyebrow reads quietly ---- */ .hero-ml .eyebrow--ghost { border-color: var(--ge-neutral-lt3); } /* Force the global nav fully white on this page — the violet hero would otherwise tint the 82%-opaque nav background lavender. */ .nav { background: var(--ge-white) !important; } /* Align .container's left/right padding with .nav__inner at mobile widths so headlines line up with the OnSite logo. The desktop padding already matches (foundation.css), but .container has no horizontal padding by default at mobile, while nav has var(--sp-5). */ @media (max-width: 767.98px) { .hero-ml .container, .hero-ml__banner-inner.container { padding-left: var(--sp-4); padding-right: var(--sp-4); } } /* Match nav__inner padding (sp-4 = 16px) between 768–1023 so the hero * headline and banner align pixel-perfectly with the OnSite logo. */ @media (min-width: 768px) and (max-width: 1023px) { .hero-ml--b > .container, .hero-ml--b .hero-ml__banner-inner.container { padding-left: var(--sp-4); padding-right: var(--sp-4); } } /* ============================================================ * Site-wide gutters — match the hero tile exactly so every section's * left/right edges line up with the hero tile (max-width 1280 + * clamp(20px, 4.2vw, 32px) gutters). Scoped to this page via martyns-law.css. * ============================================================ */ .container { padding-left: clamp(20px, 4.2vw, 32px); padding-right: clamp(20px, 4.2vw, 32px); } /* Nav: put the gutter on the bar itself so .nav__inner is a max-width:1280 * box centred exactly like the hero tile — the logo (left) and CTA/toggle * (right) then line up with the hero image's edges at every width. */ .nav { padding-left: clamp(20px, 4.2vw, 32px); padding-right: clamp(20px, 4.2vw, 32px); } .nav__inner { padding-left: 0; padding-right: 0; } /* ============================================================ * HERO — three variants, toggled via [data-hero-variant] on * * Default = "a" (split / editorial) * "b" = dark full-bleed * "c" = paper / centered factsheet * ============================================================ */ .hero-ml { position: relative; } body[data-hero-variant="a"] .hero-ml--b, body[data-hero-variant="a"] .hero-ml--c, body[data-hero-variant="b"] .hero-ml--a, body[data-hero-variant="b"] .hero-ml--c, body[data-hero-variant="c"] .hero-ml--a, body[data-hero-variant="c"] .hero-ml--b { display: none; } /* -------- Variant A: split (headline + photo card) -------- */ .hero-ml--a { padding: var(--sp-16) 0 var(--sp-8); } @media (min-width: 768px) { .hero-ml--a { padding: var(--sp-20) 0 var(--sp-10); } } .hero-ml__split { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: center; } @media (min-width: 960px) { .hero-ml__split { grid-template-columns: 1.05fr 1fr; gap: var(--sp-10); } } .hero-ml__copy { display: flex; flex-direction: column; gap: var(--sp-6); } .hero-ml__copy h1 { font-size: clamp(36px, 5.2vw, 64px); font-weight: var(--fw-light); /* Line-height is unified across hero variants (A/B/C) and the final * CTA h2. Tight enough to feel like a display headline, but tall * enough that an inline-block .hl pill (line-height 1.15 + 0.28em * total padding) doesn't squish against the surrounding lines. */ line-height: 1.2; letter-spacing: var(--tracking-tight, -0.01em); color: var(--ge-navy); margin: 0; } .hero-ml__copy h1 .hl { margin: 0 -2px; } .hero-ml__lede { font-size: clamp(16px, 1.4vw, 19px); font-weight: var(--fw-light); line-height: 1.55; color: var(--ge-text-secondary, #4A5876); max-width: 56ch; margin: 0; } .hero-ml__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); } /* "Key dates" rail under the lede — three little dated chips */ .hero-ml__rail { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-4); padding-top: var(--sp-6); border-top: 1px solid var(--ge-neutral-lt3); } @media (min-width: 540px) { .hero-ml__rail { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } } .hero-ml__rail-item { display: flex; flex-direction: column; gap: 2px; } .hero-ml__rail-date { font-size: 12px; font-weight: var(--fw-regular); letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent, var(--ge-blue-4)); } .hero-ml__rail-label { font-size: 15px; font-weight: var(--fw-light); line-height: 1.35; color: var(--ge-navy); } /* T-minus countdown (replaces the key-dates rail) */ .hero-ml__countdown { display: flex; flex-direction: column; gap: var(--sp-4); } @media (min-width: 540px) { .hero-ml__countdown { grid-template-columns: none; } } .hero-ml__countdown-eyebrow { font-size: 12px; font-weight: var(--fw-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, var(--ge-blue-4)); } .hero-ml__countdown-units { display: flex; align-items: center; gap: var(--sp-3); } .hero-ml__cd-unit { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; padding: var(--sp-4) var(--sp-5); background: var(--ge-white); border: 1px solid var(--ge-neutral-lt3); border-radius: var(--radius-lg, 14px); } .hero-ml__cd-num { font-size: clamp(32px, 4.4vw, 46px); font-weight: var(--fw-light); line-height: 1; letter-spacing: -0.02em; color: var(--ge-navy); font-variant-numeric: tabular-nums; } .hero-ml__cd-lbl { font-size: 11px; font-weight: var(--fw-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ge-text-secondary); } .hero-ml__cd-sep { font-size: clamp(28px, 4vw, 40px); font-weight: var(--fw-light); line-height: 1; color: var(--ge-neutral-lt3); } /* Photo card */ .hero-ml__photo { position: relative; border-radius: var(--radius-xl, 20px); overflow: hidden; background: var(--ge-bg-light); min-height: 380px; box-shadow: var(--shadow-md); } @media (min-width: 960px) { .hero-ml__photo { min-height: 520px; } } .hero-ml__photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; } /* "Royal Assent" floating chip on the photo */ .hero-ml__chip { position: absolute; left: var(--sp-5); bottom: var(--sp-5); display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; box-shadow: 0 6px 18px rgba(15, 20, 56, 0.18); font-size: 13px; color: var(--ge-navy); } .hero-ml__chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--ge-blue-4)); box-shadow: 0 0 0 4px rgba(97, 77, 186, 0.18); } .hero-ml__chip strong { font-weight: var(--fw-regular); color: var(--ge-navy); } /* -------- Variant B: full-bleed dark -------- */ .hero-ml--b { position: relative; padding: clamp(96px, 11vw, 132px) 0 0; background: /* Left-to-right readability overlay: deep violet → transparent so text stays legible */ linear-gradient(95deg, rgba(26, 18, 64, 0.96) 0%, rgba(26, 18, 64, 0.88) 28%, rgba(56, 40, 114, 0.62) 58%, rgba(97, 77, 186, 0.28) 100%), /* Duotone hero photo */ url('../assets/images/hero-corridor-photo.jpg') center right / cover no-repeat, /* Fallback gradient under the image */ linear-gradient(120deg, #1A1240 0%, #382872 45%, #614DBA 100%); color: var(--ge-white); overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; } @media (max-width: 899px) { .hero-ml--b { background: linear-gradient(180deg, rgba(26, 18, 64, 0.88) 0%, rgba(26, 18, 64, 0.72) 55%, rgba(56, 40, 114, 0.55) 100%), url('../assets/images/hero-corridor-photo.jpg') center / cover no-repeat, linear-gradient(120deg, #1A1240 0%, #382872 45%, #614DBA 100%); } } .hero-ml--b > .container { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; /* Force cross-axis fill (otherwise margin:0 auto disables stretch in a * flex-column parent and the container shrinks to its content width, * pushing the headline ~85px right of the OnSite logo). */ width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-4); /* matches nav__inner at the same breakpoint */ } @media (min-width: 1024px) { .hero-ml--b > .container { padding: 0 var(--sp-8); /* matches nav__inner at ≥1024 */ } } /* Floating arc + Feather icons on the right side of the hero */ /* Single large clock icon anchored to the top-right arc. * Arc centre: right:160px, top:100px, radius 360. * Placed at angle ~44° on the arc (mid-curve, prominent over the violet). * Centre point: right ≈ 419, top ≈ 350 → for a 132px icon offset 66. */ .hero-ml__floats { position: absolute; inset: 0; pointer-events: none; z-index: 1; } @media (max-width: 1099px) { .hero-ml__floats { display: none; } } .hero-ml__float--clock { position: absolute; top: 280px; right: 320px; width: 132px; height: 132px; border-radius: 32px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); color: var(--ge-white); display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: hero-float-bob 7s ease-in-out infinite; will-change: transform; box-shadow: 0 18px 50px rgba(15, 20, 56, 0.35); } .hero-ml__float--clock svg { width: 62px; height: 62px; } @keyframes hero-float-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-1.5deg); } } @media (prefers-reduced-motion: reduce) { .hero-ml__float--clock { animation: none; } } @media (prefers-reduced-motion: reduce) { .hero-ml__float { animation: none; } } .hero-ml--b::before { /* Atmospheric outline circle — top right */ content: ""; position: absolute; top: -260px; right: -200px; width: 720px; height: 720px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 50%; pointer-events: none; } .hero-ml--b::after { /* Atmospheric outline arc — bottom left */ content: ""; position: absolute; bottom: -320px; left: -240px; width: 640px; height: 640px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; pointer-events: none; } .hero-ml--b .container { position: relative; z-index: 2; } .hero-ml--b .eyebrow--ghost { color: var(--ge-white); border-color: rgba(255, 255, 255, 0.35); } .hero-ml__dark-inner { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 640px; } /* Two-column split: text + placeholder image */ .hero-ml__split-dark { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: center; } @media (min-width: 900px) { .hero-ml__split-dark { grid-template-columns: 1.05fr 1fr; gap: var(--sp-10); } .hero-ml__split-dark.hero-ml__split-dark--solo { grid-template-columns: minmax(0, 720px); } } .hero-ml__split-dark--solo .hero-ml__dark-inner { max-width: 720px; } .hero-ml__media { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 1000px; border-radius: var(--radius-lg, 16px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 14px, rgba(255, 255, 255, 0.09) 14px, rgba(255, 255, 255, 0.09) 28px ); border: 1px solid rgba(255, 255, 255, 0.18); overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); justify-self: end; } @media (max-width: 899px) { .hero-ml__media { justify-self: stretch; } } .hero-ml__media-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgba(255, 255, 255, 0.72); text-align: center; padding: var(--sp-6); } .hero-ml__media-inner svg { width: 56px; height: 56px; opacity: 0.6; margin-bottom: 6px; } /* When .hero-ml__media holds a real photo instead of the placeholder */ .hero-ml__media--photo { background: none; border-color: rgba(255, 255, 255, 0.22); } .hero-ml__media--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hero-ml__media-label { font-size: 15px; font-weight: var(--fw-regular); letter-spacing: 0.08em; text-transform: uppercase; } .hero-ml__media-sub { font-size: 13px; font-weight: var(--fw-light); color: rgba(255, 255, 255, 0.55); } /* Entrance animation — staggered fade + rise for each child of the text column (the placeholder image fades in on the same beat) */ @keyframes hero-b-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .hero-ml__dark-inner > * { opacity: 0; animation: hero-b-rise 0.9s var(--ease-standard, cubic-bezier(0.2, 0.7, 0.2, 1)) forwards; } .hero-ml__dark-inner > *:nth-child(1) { animation-delay: 0.05s; } .hero-ml__dark-inner > *:nth-child(2) { animation-delay: 0.18s; } .hero-ml__dark-inner > *:nth-child(3) { animation-delay: 0.32s; } .hero-ml__dark-inner > *:nth-child(4) { animation-delay: 0.46s; } .hero-ml__dark-inner > *:nth-child(5) { animation-delay: 0.60s; } /* The .hl pill: subtle background sweep so the highlight feels intentional */ @keyframes hero-b-hl-sweep { 0% { background-position: 200% 0; } 100% { background-position: 0 0; } } .hero-ml__dark-inner h1 { font-size: clamp(36px, 5vw, 64px); font-weight: var(--fw-light); line-height: 1.2; /* unified with other hero variants */ letter-spacing: -0.015em; margin: 0; color: var(--ge-white); } .hero-ml__dark-inner h1 .hl { box-decoration-break: clone; -webkit-box-decoration-break: clone; background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(200, 184, 255, 0.32) 35%, rgba(255, 255, 255, 0.14) 70%, rgba(255, 255, 255, 0.14) 100% ); background-size: 200% 100%; background-position: 200% 0; animation: hero-b-hl-sweep 1.6s var(--ease-standard, cubic-bezier(0.2, 0.7, 0.2, 1)) 0.55s forwards; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .hero-ml__dark-inner > * { opacity: 1; animation: none; } .hero-ml__dark-inner h1 .hl { animation: none; background-position: 0 0; } } .hero-ml__dark-inner h1 .hl { background: var(--ge-white); color: var(--ge-violet-4, #4A3995); padding: 0.08em 14px 0.2em; } .hero-ml__dark-inner .hero-ml__lede { color: rgba(255, 255, 255, 0.82); max-width: 60ch; } .hero-ml__dark-rail { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid rgba(255, 255, 255, 0.18); max-width: 720px; } @media (min-width: 640px) { .hero-ml__dark-rail { grid-template-columns: repeat(3, 1fr); } } .hero-ml__dark-rail .hero-ml__rail-date { color: #C8B8FF; } .hero-ml__dark-rail .hero-ml__rail-label { color: var(--ge-white); } /* Eye-catching enforcement-date callout (variant B) — full-bleed banner */ .hero-ml__banner { position: relative; margin-top: clamp(32px, 4vw, 56px); padding: clamp(20px, 2.6vw, 32px) 0; background: var(--ge-navy); border-top: 1px solid rgba(255, 255, 255, 0.10); z-index: 2; } .hero-ml__banner-inner { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; } @media (min-width: 768px) { .hero-ml__banner-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-8); } } .hero-ml__banner-left { display: flex; flex-direction: column; gap: 2px; } .hero-ml__banner-eyebrow { font-size: 12px; font-weight: var(--fw-regular); letter-spacing: 0.12em; text-transform: uppercase; color: #C8B8FF; } .hero-ml__banner-date { font-size: clamp(36px, 5.4vw, 72px); font-weight: var(--fw-light); line-height: 1; letter-spacing: -0.02em; color: var(--ge-white); background: linear-gradient( 100deg, #FFFFFF 0%, #FFFFFF 38%, #E4D9FF 44%, #FFFFFF 50%, #E4D9FF 100% ); background-size: 220% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; animation: hero-b-banner-shimmer 7s linear infinite; } @keyframes hero-b-banner-shimmer { 0% { background-position: 100% 0; } 18% { background-position: 0% 0; } 100% { background-position: 0% 0; } } @media (prefers-reduced-motion: reduce) { .hero-ml__banner-date { animation: none; background-position: 0 0; } } .hero-ml__banner-sub { font-size: 15px; font-weight: var(--fw-light); color: rgba(255, 255, 255, 0.78); line-height: 1.5; margin: 0; white-space: nowrap; } @media (max-width: 767px) { .hero-ml__banner-sub { white-space: normal; } } /* Banner — converted from a page-load entrance to a scroll-into-view * reveal. The banner sits below the hero text in variant B and may be * below the fold on shorter viewports; triggering on intersection * means it always animates _as the user reaches it_, not before. */ .hero-ml--b .hero-ml__banner { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-standard, cubic-bezier(0.2, 0.7, 0.2, 1)), transform 0.8s var(--ease-standard, cubic-bezier(0.2, 0.7, 0.2, 1)); will-change: opacity, transform; } .hero-ml--b .hero-ml__banner.is-revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .hero-ml--b .hero-ml__banner { opacity: 1; transform: none; transition: none; } } /* ----- Banner countdown (T-minus pill inside the full-width enforcement banner) ----- */ .hero-ml__banner-countdown { display: flex; flex-direction: column; gap: 6px; padding-left: var(--sp-6); border-left: 1px solid rgba(255, 255, 255, 0.18); } @media (max-width: 767px) { .hero-ml__banner-countdown { border-left: none; padding-left: 0; padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, 0.18); } } .hero-ml__banner-countdown-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: var(--fw-regular); letter-spacing: var(--tracking-eyebrow, 0.12em); text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } .hero-ml__banner-countdown-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ge-violet-2, #E8E4F9); box-shadow: 0 0 0 3px rgba(232, 228, 249, 0.20); animation: hero-banner-countdown-pulse 2s ease-in-out infinite; flex-shrink: 0; } @keyframes hero-banner-countdown-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(232, 228, 249, 0.20); } 50% { box-shadow: 0 0 0 6px rgba(232, 228, 249, 0.05); } } @media (prefers-reduced-motion: reduce) { .hero-ml__banner-countdown-dot { animation: none; } } .hero-ml__banner-countdown-grid { display: flex; align-items: baseline; gap: var(--sp-4); } .hero-ml__banner-countdown-unit { display: flex; align-items: baseline; gap: 6px; } .hero-ml__banner-countdown-val { font-size: clamp(24px, 2.4vw, 32px); font-weight: var(--fw-light); line-height: 1; letter-spacing: -0.015em; color: var(--ge-white); font-variant-numeric: tabular-nums; } .hero-ml__banner-countdown-lbl { font-size: 11px; font-weight: var(--fw-regular); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } .hero-ml--b .btn--ghost { color: var(--ge-navy); background: var(--ge-white); border-color: var(--ge-white); } .hero-ml--b .btn--ghost:hover { border-color: var(--ge-white); background: var(--ge-violet-2, #E8E4F9); color: var(--ge-navy); } /* -------- Variant C: centred factsheet -------- */ .hero-ml--c { padding: clamp(80px, 12vw, 160px) 0 clamp(40px, 6vw, 80px); background: radial-gradient(ellipse 1100px 560px at 50% 0%, var(--ge-blue-2, #E8E4F9) 0%, transparent 60%), linear-gradient(180deg, #F4F8FB 0%, #FFFFFF 70%); text-align: center; } .hero-ml__factsheet { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); } .hero-ml__factsheet h1 { font-size: clamp(40px, 6vw, 76px); font-weight: var(--fw-light); line-height: 1.2; /* unified with other hero variants */ letter-spacing: -0.015em; color: var(--ge-navy); margin: 0; } .hero-ml__factsheet .hero-ml__lede { text-align: center; margin: 0 auto; } .hero-ml__factsheet-stamp { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 22px; border: 1px solid var(--ge-neutral-lt3); border-radius: var(--radius-lg, 16px); background: var(--ge-white); box-shadow: var(--shadow-xs); margin-bottom: var(--sp-2); } .hero-ml__factsheet-stamp-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ge-text-secondary, #4A5876); } .hero-ml__factsheet-stamp-act { font-size: 13px; font-weight: var(--fw-regular); color: var(--ge-navy); } /* ============================================================ * WHAT IS MARTYN'S LAW — body text section * ============================================================ */ .what-is { padding: var(--sp-8) 0; background: var(--ge-white); /* Contain the Key-facts slide-in (translateX) so it never flashes a * horizontal scrollbar as it animates into place. */ overflow-x: clip; } @media (min-width: 768px) { .what-is { padding: var(--sp-16) 0; } } .what-is__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); } @media (min-width: 900px) { .what-is__grid { grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); } } .what-is__body { max-width: 60ch; } .what-is__body h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: var(--fw-light); line-height: 1.15; letter-spacing: -0.01em; color: var(--ge-navy); margin: 0 0 var(--sp-6); } .what-is__body h2 .hl { margin: 0 -2px; } .what-is__body p { font-size: var(--fs-body, 16px); font-weight: var(--fw-light); line-height: 1.65; color: var(--ge-text-secondary, #4A5876); margin: 0 0 var(--sp-4); text-wrap: pretty; } .what-is__body p strong { color: var(--ge-navy); font-weight: var(--fw-regular); } /* Pull quote callout — the Home Office "no consultants needed" line */ .what-is__quote { position: relative; margin: var(--sp-8) 0 0; padding: var(--sp-7) var(--sp-6) var(--sp-6); background: var(--ge-violet-1, #F6F4FF); border-radius: var(--radius-lg, 16px); border: 1px solid var(--ge-violet-2, #E8E4F9); display: flex; flex-direction: column; gap: var(--sp-3); overflow: hidden; } .what-is__quote::before { /* Subtle violet wash fading right */ content: ""; position: absolute; inset: 0; background: linear-gradient(232deg, rgba(232, 228, 249, 0.6) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; } .what-is__quote-mark { width: 28px; height: 28px; color: var(--ge-violet-4, #614DBA); position: relative; z-index: 1; } .what-is__quote blockquote { position: relative; z-index: 1; margin: 0; font-size: clamp(18px, 1.9vw, 22px); font-weight: var(--fw-light); line-height: 1.45; color: var(--ge-navy); letter-spacing: -0.005em; text-wrap: balance; } .what-is__quote figcaption { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); } .what-is__quote-cite { font-size: 15px; font-weight: var(--fw-regular); color: var(--ge-violet-4, #614DBA); } .what-is__quote-sub { font-size: 12px; font-weight: var(--fw-light); color: var(--ge-text-secondary, #4A5876); letter-spacing: 0.04em; } /* Key facts panel — right side */ .what-is__keyfacts { background: var(--ge-bg-light); border: 1px solid var(--ge-neutral-lt3); border-radius: var(--radius-lg, 16px); padding: var(--sp-8); align-self: start; } .what-is__keyfacts h3 { font-size: 12px; font-weight: var(--fw-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ge-text-secondary, #4A5876); margin: 0 0 var(--sp-5); } .what-is__keyfacts dl { margin: 0; } .what-is__keyfacts dt { font-size: 13px; color: var(--ge-text-secondary, #4A5876); margin: 0; font-weight: var(--fw-regular); display: flex; align-items: center; gap: 8px; } .what-is__keyfacts dt::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--ge-blue-4)); display: inline-block; } .what-is__keyfacts dd { font-size: 17px; font-weight: var(--fw-light); color: var(--ge-navy); margin: 4px 0 var(--sp-5) 14px; line-height: 1.35; } .what-is__keyfacts dd:last-child { margin-bottom: 0; } /* ============================================================ * TIERS — side-by-side comparison table * ============================================================ */ .tiers { padding: var(--sp-8) 0; background: #EDE8F8; position: relative; overflow: hidden; } /* Decorative corner arc — anchored top-right, behind the content, so it * never takes layout space (was rendering as a full-size block, pushing * the heading down by ~675px). */ .tiers__arc { position: absolute; top: 0; right: 0; width: clamp(280px, 38vw, 520px); height: auto; z-index: 0; pointer-events: none; } .tiers > .container { position: relative; z-index: 1; } @media (min-width: 768px) { .tiers { padding: var(--sp-16) 0; } } .tiers__head { text-align: center; max-width: 720px; margin: 0 auto var(--sp-10); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); } .tiers__head .eyebrow { align-self: center; } .tiers__head h2 { font-size: clamp(28px, 3.6vw, 48px); font-weight: var(--fw-light); line-height: 1.15; letter-spacing: -0.01em; color: var(--ge-navy); margin: 0; } .tiers__head h2 .hl { margin: 0 -2px; } .tiers__head p { font-size: var(--fs-h4, 18px); font-weight: var(--fw-light); color: var(--ge-text-secondary, #4A5876); margin: 0; max-width: 56ch; } .tiers__table-wrap { background: var(--ge-white); border: 1px solid var(--ge-neutral-lt3); border-radius: var(--radius-lg, 16px); overflow: hidden; box-shadow: var(--shadow-sm); max-width: 1080px; margin: 0 auto; } .tiers__table { width: 100%; border-collapse: collapse; font-size: 15px; } /* Column header row */ .tiers__th-empty, .tiers__th-tier { padding: var(--sp-6) var(--sp-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--ge-neutral-lt3); } .tiers__th-tier { width: 30%; background: var(--ge-navy); color: var(--ge-white); cursor: default; } /* Scale the text content on hover, not the cell background. */ .tiers__th-tier > * { transition: transform var(--dur-base) var(--ease-standard); transform-origin: left center; } .tiers__th-tier:hover > * { transform: scale(1.03); } .tiers__th-tier h3 { color: var(--ge-white); } .tiers__th-tier .tiers__th-label { color: rgba(255, 255, 255, 0.7); } .tiers__th-tier .tiers__th-tier-capacity { color: rgba(255, 255, 255, 0.78); } .tiers__th-tier--enhanced { background: #7B62D9; color: var(--ge-white); } .tiers__th-tier--enhanced h3 { color: var(--ge-white); } .tiers__th-tier--enhanced .tiers__th-label { color: rgba(255, 255, 255, 0.78); } .tiers__th-tier--enhanced .tiers__th-tier-capacity { color: rgba(255, 255, 255, 0.85); } .tiers__th-tier + .tiers__th-tier { border-left: 1px solid var(--ge-neutral-lt3); } .tiers__th-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ge-text-secondary, #4A5876); margin: 0 0 6px; display: block; } .tiers__th-tier h3 { font-size: 22px; font-weight: var(--fw-regular); margin: 0; color: inherit; line-height: 1.2; } .tiers__th-tier-capacity { font-size: 13px; color: inherit; opacity: 0.78; margin: 4px 0 0; font-weight: var(--fw-light); } /* Row */ .tiers__row td { padding: var(--sp-5); border-bottom: 1px solid var(--ge-neutral-lt3); vertical-align: top; } .tiers__row:last-child td { border-bottom: 0; } .tiers__row td + td { border-left: 1px solid var(--ge-neutral-lt3); } .tiers__row-req { font-weight: var(--fw-regular); color: var(--ge-navy); font-size: 15px; } .tiers__row-req-desc { display: block; font-size: 13px; font-weight: var(--fw-light); color: var(--ge-text-secondary, #4A5876); margin-top: 4px; line-height: 1.5; } .tiers__row-cell { color: var(--ge-text-secondary, #4A5876); font-size: 15px; line-height: 1.55; font-weight: var(--fw-light); } .tiers__row-cell--enhanced { background: rgba(232, 228, 249, 0.30); } .tiers__check { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-regular); color: var(--accent, var(--ge-blue-4)); margin-bottom: 4px; } .tiers__check svg { width: 16px; height: 16px; } .tiers__row-note { display: block; margin-top: 4px; font-size: 13px; color: var(--ge-text-secondary, #4A5876); font-weight: var(--fw-light); line-height: 1.5; } .tiers__dash { display: inline-flex; align-items: center; gap: 8px; color: var(--ge-neutral-dk2, #95A2B5); } .tiers__dash svg { width: 14px; height: 14px; } /* ============================================================ * TIMELINE * ============================================================ */ .timeline-ml { padding: var(--sp-8) 0; background: var(--ge-white); } @media (min-width: 768px) { .timeline-ml { padding: var(--sp-16) 0; } } .timeline-ml__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); max-width: 720px; margin: 0 0 var(--sp-10); } .timeline-ml__head h2 { font-size: clamp(28px, 3.6vw, 48px); font-weight: var(--fw-light); line-height: 1.15; letter-spacing: -0.01em; color: var(--ge-navy); margin: 0; } .timeline-ml__head h2 .hl { margin: 0 -2px; } .timeline-ml__head p { font-size: var(--fs-h4, 18px); font-weight: var(--fw-light); color: var(--ge-text-secondary, #4A5876); margin: 0; } .timeline-ml__rail { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--sp-6); } @media (min-width: 840px) { .timeline-ml__rail { grid-template-columns: repeat(3, 1fr); gap: 0; } /* Horizontal hairline connecting the dots — draws in from left when revealed */ .timeline-ml__rail::before { content: ""; position: absolute; top: 32px; /* aligns with dot centre */ left: 5%; right: 5%; height: 1px; background: var(--ge-neutral-lt3); z-index: 0; transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .timeline-ml__rail.is-line-drawn::before { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .timeline-ml__rail::before { transform: scaleX(1) !important; transition: none !important; } } .timeline-ml__node { position: relative; padding: 0 var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)), transform 0.6s var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)); } .timeline-ml__rail.is-line-drawn .timeline-ml__node { opacity: 1; transform: translateY(0); } /* Stagger to match where the drawing line crosses each dot (line is 1.4s total: left ~0s, centre ~0.7s, right ~1.3s) */ .timeline-ml__rail.is-line-drawn .timeline-ml__node:nth-child(1) { transition-delay: 0.10s; } .timeline-ml__rail.is-line-drawn .timeline-ml__node:nth-child(2) { transition-delay: 0.70s; } .timeline-ml__rail.is-line-drawn .timeline-ml__node:nth-child(3) { transition-delay: 1.30s; } @media (prefers-reduced-motion: reduce) { .timeline-ml__node { opacity: 1; transform: none; transition: none; } } .timeline-ml__node-dot { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ge-blue-2, #E8E4F9); border: 1px solid var(--ge-blue-2, #E8E4F9); color: var(--ge-navy); font-size: 22px; font-weight: var(--fw-regular); margin-bottom: var(--sp-3); } .timeline-ml__node--current .timeline-ml__node-dot { background: var(--accent, var(--ge-blue-4)); color: var(--ge-white); border-color: var(--accent, var(--ge-blue-4)); box-shadow: 0 0 0 6px rgba(97, 77, 186, 0.15); animation: timeline-pulse 4s ease-out infinite; } @keyframes timeline-pulse { 0% { box-shadow: 0 0 0 0 rgba(97, 77, 186, 0.45), 0 0 0 6px rgba(97, 77, 186, 0.18); } 60% { box-shadow: 0 0 0 24px rgba(97, 77, 186, 0), 0 0 0 6px rgba(97, 77, 186, 0.15); } 100% { box-shadow: 0 0 0 24px rgba(97, 77, 186, 0), 0 0 0 6px rgba(97, 77, 186, 0.15); } } @media (prefers-reduced-motion: reduce) { .timeline-ml__node--current .timeline-ml__node-dot { animation: none; } } .timeline-ml__node-date { font-size: 12px; font-weight: var(--fw-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, var(--ge-blue-4)); } .timeline-ml__node h3 { font-size: 22px; font-weight: var(--fw-regular); margin: 0; line-height: 1.2; color: var(--ge-navy); } .timeline-ml__node p { font-size: 15px; font-weight: var(--fw-light); line-height: 1.55; color: var(--ge-text-secondary, #4A5876); margin: 0; max-width: 38ch; } /* ============================================================ * PREPARE — what you should do now (numbered checklist) * ============================================================ */ .prepare { padding: var(--sp-8) 0; background: var(--ge-bg-light); } @media (min-width: 768px) { .prepare { padding: var(--sp-16) 0; } } .prepare__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4); max-width: 820px; margin: 0 auto var(--sp-12); } .prepare__head-icon { width: 168px; height: 168px; border-radius: 50%; background: var(--ge-white); border: 1px solid var(--ge-neutral-lt3); color: var(--accent, var(--ge-blue-4)); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); box-shadow: 0 12px 32px rgba(15, 20, 56, 0.06); } .prepare__head-icon svg { width: 92px; height: 92px; stroke-width: 1.3; } .prepare__head .eyebrow { align-self: center; } .prepare__head h2 { font-size: clamp(28px, 3.6vw, 48px); font-weight: var(--fw-light); line-height: 1.15; letter-spacing: -0.01em; color: var(--ge-navy); margin: 0; } .prepare__head h2 .hl { margin: 0 -2px; } .prepare__head p { font-size: var(--fs-h4, 18px); font-weight: var(--fw-light); color: var(--ge-text-secondary, #4A5876); margin: 0; } .prepare__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 720px) { .prepare__list { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } } .prepare__item { background: var(--ge-white); border: 1px solid var(--ge-neutral-lt3); border-radius: var(--radius-lg, 16px); padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-5); display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-5); align-items: start; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .prepare__item:hover { border-color: var(--ge-neutral-dk4, #C1CCDB); box-shadow: var(--shadow-sm); } .prepare__num { width: 48px; height: 48px; border-radius: 50%; background: var(--ge-blue-2, #E8E4F9); color: var(--accent, var(--ge-blue-4)); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: var(--fw-regular); } .prepare__item h3 { font-size: 18px; font-weight: var(--fw-regular); margin: 6px 0 6px; color: var(--ge-navy); line-height: 1.25; } .prepare__item p { font-size: 15px; font-weight: var(--fw-light); line-height: 1.55; color: var(--ge-text-secondary, #4A5876); margin: 0; } /* ============================================================ * COMPLIANCE — how OnSite helps (reuses .features visual) * ============================================================ */ .compliance { padding: clamp(var(--sp-8), 6vw, var(--sp-16)) 0; background: var(--ge-white); position: relative; overflow: visible; } /* "Where OnSite Lockdown fits in" → rounded navy tile floating on white, * matching the hero / proof-band / final-CTA tile language. */ .compliance__tile { position: relative; overflow: hidden; background: var(--ge-navy); color: var(--ge-white); border-radius: clamp(24px, 2.4vw, 36px); padding: clamp(32px, 5vw, 72px); box-shadow: 0 40px 90px rgba(26, 18, 64, 0.22), 0 8px 24px rgba(26, 18, 64, 0.12); } .compliance__top { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: center; margin-bottom: var(--sp-12); } @media (min-width: 900px) { .compliance__top { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } } .compliance__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); max-width: 560px; } .compliance__placeholder { margin: 0; display: flex; justify-content: center; position: relative; } .compliance__placeholder img { width: 100%; max-width: 1000px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg, 16px); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); position: relative; z-index: 0; } /* Floating chips overlaid on the image */ .compliance__chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; box-shadow: 0 10px 30px rgba(15, 20, 56, 0.18); font-family: var(--font-sans); color: var(--ge-navy); white-space: nowrap; animation: compliance-chip-bob 6s ease-in-out infinite; will-change: transform; } .compliance__chip-avatar { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--ge-blue-2, #E8E4F9); color: var(--accent, var(--ge-blue-4)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .compliance__chip-avatar svg { width: 18px; height: 18px; } .compliance__chip-badge { position: absolute; bottom: -3px; right: -3px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ge-white); display: inline-flex; align-items: center; justify-content: center; color: var(--ge-white); } .compliance__chip-badge svg { width: 10px; height: 10px; } .compliance__chip-badge--ok { background: #2A8D5B; } .compliance__chip-badge--lock { background: var(--accent, var(--ge-blue-4)); } .compliance__chip-text { display: flex; flex-direction: column; line-height: 1.2; } .compliance__chip-name { font-size: 12px; font-weight: var(--fw-regular); color: var(--ge-navy); } .compliance__chip-sub { font-size: 10.5px; color: var(--ge-text-secondary, #4A5876); font-weight: var(--fw-light); letter-spacing: 0.02em; } /* Chip positions — all anchored on the left of the image, over the uncluttered corridor area (left side of the photo is mostly empty). */ .compliance__chip--1 { top: 10%; left: 4%; animation-delay: 0s; } .compliance__chip--2 { top: 42%; left: 8%; animation-delay: 1.4s; } .compliance__chip--4 { bottom: 12%; left: 4%; animation-delay: 0.8s; } @keyframes compliance-chip-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .compliance__chip { animation: none; } } @media (max-width: 899px) { .compliance__chip-sub { display: none; } .compliance__chip { padding: 6px 12px 6px 6px; } .compliance__chip-name { font-size: 11px; } } .compliance__placeholder-frame { width: 100%; max-width: 1000px; aspect-ratio: 16 / 9; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0px, rgba(255, 255, 255, 0.04) 14px, rgba(255, 255, 255, 0.07) 14px, rgba(255, 255, 255, 0.07) 28px ); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-lg, 16px); overflow: hidden; display: flex; flex-direction: column; } .compliance__placeholder-bar { height: 32px; background: rgba(0, 0, 0, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.10); display: flex; align-items: center; gap: 6px; padding: 0 12px; } .compliance__placeholder-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); } .compliance__placeholder-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255, 255, 255, 0.62); padding: var(--sp-6); text-align: center; } .compliance__placeholder-body svg { width: 48px; height: 48px; opacity: 0.55; margin-bottom: 6px; } .compliance__placeholder-label { font-size: 15px; font-weight: var(--fw-regular); letter-spacing: 0.06em; text-transform: uppercase; } .compliance__placeholder-sub { font-size: 13px; font-weight: var(--fw-light); color: rgba(255, 255, 255, 0.48); } .compliance__head h2 { font-size: clamp(28px, 3.6vw, 48px); font-weight: var(--fw-light); line-height: 1.15; letter-spacing: -0.01em; color: var(--ge-white); margin: 0; } .compliance__head h2 .hl { background: var(--ge-sky); color: var(--ge-white); padding: 0.08em 14px 0.2em; } .compliance__head p { font-size: var(--fs-h4, 18px); font-weight: var(--fw-light); color: rgba(255, 255, 255, 0.78); margin: 0; max-width: 60ch; } .compliance .eyebrow--ghost { color: var(--ge-white); border-color: rgba(255, 255, 255, 0.35); } .compliance__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 640px) { .compliance__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .compliance__grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-5); } } .compliance__item { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius-lg, 16px); padding: var(--sp-6); transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } .compliance__item:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); } .compliance__item-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .compliance__item-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: var(--ge-sky); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); } .compliance__item:hover .compliance__item-icon { background: var(--ge-sky); color: var(--ge-white); } .compliance__item-icon svg { width: 22px; height: 22px; } .compliance__item h3 { font-size: 19px; font-weight: var(--fw-regular); margin: 0 0 8px; color: var(--ge-white); line-height: 1.25; } .compliance__item p { font-size: 15px; font-weight: var(--fw-light); line-height: 1.55; color: rgba(255, 255, 255, 0.72); margin: 0; } .compliance__item-tag { display: inline-block; font-size: 11px; font-weight: var(--fw-regular); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ge-white); margin: 0; } /* ============================================================ * FAQ — accordion * ============================================================ */ .faq { padding: var(--sp-8) 0; background: var(--ge-white); } @media (min-width: 768px) { .faq { padding: var(--sp-16) 0; } } .faq__head { text-align: center; max-width: 720px; margin: 0 auto var(--sp-10); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); } /* Override .eyebrow's default align-self: flex-start so it sits centred */ .faq__head .eyebrow { align-self: center; } .faq__head h2 { font-size: clamp(28px, 3.6vw, 48px); font-weight: var(--fw-light); line-height: 1.15; letter-spacing: -0.01em; color: var(--ge-navy); margin: 0; } .faq__head p { font-size: var(--fs-h4, 18px); font-weight: var(--fw-light); color: var(--ge-text-secondary, #4A5876); margin: 0; } .faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); } .faq__item { background: var(--ge-white); border: 1px solid var(--ge-neutral-lt3); border-radius: var(--radius-lg, 16px); overflow: hidden; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .faq__item[open] { border-color: var(--ge-neutral-dk4, #C1CCDB); box-shadow: var(--shadow-sm); } .faq__summary { list-style: none; cursor: pointer; padding: var(--sp-5) var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); font-size: 17px; font-weight: var(--fw-regular); color: var(--ge-navy); line-height: 1.35; } .faq__summary::-webkit-details-marker { display: none; } .faq__summary::marker { display: none; } .faq__toggle { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--ge-bg-light); color: var(--accent, var(--ge-blue-4)); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); } .faq__toggle svg { width: 16px; height: 16px; } .faq__item[open] .faq__toggle { transform: rotate(45deg); background: var(--accent, var(--ge-blue-4)); color: var(--ge-white); } .faq__body { padding: 0 var(--sp-6) var(--sp-5); color: var(--ge-text-secondary, #4A5876); font-size: 15px; font-weight: var(--fw-light); line-height: 1.65; max-width: 72ch; } .faq__body p { margin: 0 0 var(--sp-3); } .faq__body p:last-child { margin-bottom: 0; } .faq__body a { color: var(--accent, var(--ge-blue-4)); text-decoration: underline; text-underline-offset: 3px; } /* ----- FAQ split layout (sticky rail + categorised groups) ----- */ .faq--split { /* Soft violet-fade wash to relate the section back to the hero */ background: linear-gradient(180deg, rgba(246, 244, 255, 0.6) 0%, var(--ge-white) 55%, var(--ge-white) 100%); } .faq__container { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); max-width: 1240px; } @media (min-width: 960px) { .faq__container { grid-template-columns: minmax(280px, 360px) 1fr; gap: var(--sp-16); align-items: start; } } .faq__rail-inner { display: flex; flex-direction: column; gap: var(--sp-5); } @media (min-width: 960px) { .faq__rail-inner { position: sticky; top: calc(var(--sp-12, 48px) + 24px); } } .faq__rail .eyebrow { align-self: flex-start; } .faq__rail h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: var(--fw-light); line-height: var(--lh-tight, 1.1); color: var(--ge-navy); letter-spacing: -0.01em; margin: 0; } .faq__rail h2 .hl { display: inline; background: var(--ge-violet-4); color: var(--ge-white); padding: 0.08em 10px 0.2em; border-radius: var(--radius-md); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .faq__rail-lede { font-size: 16px; font-weight: var(--fw-light); line-height: var(--lh-body, 1.5); color: var(--ge-text-secondary, #4A5876); margin: 0; max-width: 38ch; } .faq__jump { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-3); border-top: 1px solid var(--ge-neutral-lt3); } .faq__jump-item { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; text-decoration: none; color: var(--ge-navy); border-bottom: 1px solid var(--ge-neutral-lt3); transition: color var(--dur-base) var(--ease-standard); } .faq__jump-item:hover { color: var(--ge-violet-4); } .faq__jump-num { font-size: 12px; font-weight: var(--fw-regular); letter-spacing: 0.12em; color: var(--ge-violet-4); font-variant-numeric: tabular-nums; min-width: 28px; } .faq__jump-label { display: flex; flex-direction: column; gap: 2px; } .faq__jump-title { font-size: 16px; font-weight: var(--fw-regular); line-height: 1.25; } .faq__jump-count { font-size: 12px; font-weight: var(--fw-light); color: var(--ge-text-secondary, #4A5876); text-transform: uppercase; letter-spacing: 0.08em; } .faq__contact { margin-top: var(--sp-4); padding: var(--sp-6); border-radius: var(--radius-lg, 16px); background: var(--ge-violet-1, #F6F4FF); border: 1px solid var(--ge-violet-2, #E8E4F9); display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; } .faq__contact-eyebrow { font-size: 11px; font-weight: var(--fw-regular); letter-spacing: var(--tracking-eyebrow, 0.08em); text-transform: uppercase; color: var(--ge-violet-4); } .faq__contact-body { font-size: 15px; font-weight: var(--fw-light); line-height: 1.55; color: var(--ge-navy); margin: 0; } /* Right column — grouped accordions */ .faq__groups { display: flex; flex-direction: column; gap: var(--sp-12); } .faq__group { scroll-margin-top: 96px; } .faq__group-head { display: flex; align-items: baseline; gap: var(--sp-4); margin: 0 0 var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--ge-neutral-lt3); } .faq__group-num { font-size: 12px; font-weight: var(--fw-regular); letter-spacing: 0.12em; color: var(--ge-violet-4); font-variant-numeric: tabular-nums; } .faq__group-head h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: var(--fw-regular); color: var(--ge-navy); margin: 0; letter-spacing: -0.005em; } .faq--split .faq__list { max-width: none; margin: 0; } .faq--split .faq__item[open] .faq__toggle { background: var(--ge-violet-4); } /* Page-specific override: the proof-band on this page uses a tighter headline and a neutral eyebrow tint (not the sky-blue accent used on the landing). It's also a thin visual break — not a full feature panel. */ .proof-band--ml { min-height: 0; } /* Proof band → rounded floating tile (matches the hero + final-CTA tiles). */ .proof-band--ml { display: block; background: var(--ge-white); overflow: visible; padding: clamp(8px, 2vw, 24px) clamp(20px, 4.2vw, 32px) clamp(28px, 4vw, 52px); } .proof-band--ml .proof-band__tile { position: relative; width: 100%; max-width: 1280px; margin-inline: auto; min-height: 200px; display: flex; align-items: center; border-radius: clamp(24px, 2.4vw, 36px); overflow: hidden; background: var(--ge-navy); box-shadow: 0 40px 90px rgba(26, 18, 64, 0.22), 0 8px 24px rgba(26, 18, 64, 0.12); } @media (min-width: 768px) { .proof-band--ml .proof-band__tile { min-height: 240px; } } @media (min-width: 1200px) { .proof-band--ml .proof-band__tile { min-height: 280px; } } .proof-band--ml .proof-band__inner { padding-inline: clamp(28px, 4vw, 64px); } .proof-band--ml .proof-band__inner { padding-block: var(--sp-7); gap: var(--sp-3); } @media (min-width: 768px) { .proof-band--ml .proof-band__inner { padding-block: var(--sp-8); gap: var(--sp-3); } } .proof-band--ml .proof-band__headline { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; max-width: 56ch; } .proof-band--ml .proof-band__sub { display: none; } .proof-band--ml .proof-band__num { color: #C8B8FF; } /* Position the cropped reception banner so the iPad stays visible across widths */ .proof-band--ml .proof-band__bg { object-position: center 55%; } .sources { padding: var(--sp-10) 0; background: var(--ge-bg-light); border-top: 1px solid var(--ge-neutral-lt3); } .sources__inner { max-width: 820px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4); } .sources__govuk { display: inline-flex; align-items: center; gap: 10px; background: #0B0C0C; color: var(--ge-white); padding: 8px 16px; border-radius: 4px; text-decoration: none; transition: background var(--dur-base) var(--ease-standard); } .sources__govuk:hover { background: #1D1D1B; } .sources__govuk-crown { display: inline-flex; align-items: center; justify-content: center; color: var(--ge-white); } .sources__govuk-crown svg { width: 36px; height: 26px; } .sources__govuk-wordmark { font-family: "Arial", "Helvetica", sans-serif; font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: 0.02em; color: var(--ge-white); } .sources h3 { font-size: clamp(15px, 1.4vw, 17px); font-weight: var(--fw-regular); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ge-text-secondary, #4A5876); margin: 0; max-width: none; line-height: 1.35; text-wrap: balance; } /* Decorative violet arcs behind the final CTA. The base .final-cta already has position: relative; overflow: hidden so the SVG can safely bleed outside the viewport. */ .final-cta { position: relative; } .final-cta__arc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .final-cta > .container { position: relative; z-index: 1; } /* ============================================================ * FINAL CTA — page-specific override (Martyn's Law) * Eye-catching dark violet treatment, brand-consistent. * Overrides .final-cta white styling from onsite.css. * ============================================================ */ .final-cta { background: radial-gradient(60% 80% at 18% 30%, rgba(133, 114, 218, 0.55) 0%, rgba(133, 114, 218, 0) 70%), radial-gradient(50% 70% at 85% 80%, rgba(97, 77, 186, 0.65) 0%, rgba(97, 77, 186, 0) 70%), linear-gradient(125deg, #160E36 0%, #2C1F6E 45%, #4634A4 100%); color: var(--ge-white); isolation: isolate; /* Equal top/bottom padding so the white tile sits centred in the * violet section (onsite.css gives an asymmetric 16px/80px otherwise). */ padding-block: clamp(var(--sp-12), 6vw, var(--sp-20)); } .final-cta::before { /* Soft lavender halo behind the heading */ content: ""; position: absolute; inset: 0; background: radial-gradient(38% 55% at 50% 38%, rgba(232, 228, 249, 0.18) 0%, rgba(232, 228, 249, 0) 70%); pointer-events: none; z-index: 0; display: block; } .final-cta__arc { opacity: 0.9; } .final-cta__card { max-width: 1280px; margin-inline: auto; position: relative; overflow: hidden; background: var(--ge-white); border: 1px solid var(--ge-neutral-lt3, #E6E1F2); border-radius: clamp(24px, 2.4vw, 36px); box-shadow: 0 40px 90px rgba(26, 18, 64, 0.30), 0 8px 24px rgba(26, 18, 64, 0.16); padding: clamp(var(--sp-10), 6vw, 96px) clamp(var(--sp-8), 5vw, 80px); } /* GroupEd "G" symbol watermark, bleeding off the bottom-right corner. */ .final-cta__card::after { content: ""; position: absolute; right: -180px; bottom: -200px; width: 720px; height: 780px; background: var(--ge-violet-4, #614DBA); -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.08; pointer-events: none; z-index: 0; } .final-cta__inner { position: relative; z-index: 1; max-width: none; align-items: center; text-align: center; } .final-cta h2 { color: var(--ge-navy); font-size: clamp(32px, 3.6vw, 46px); line-height: 1.2; /* unified with hero h1s — pill has room to breathe */ letter-spacing: -0.015em; text-wrap: balance; } .final-cta h2 .hl { background: var(--ge-violet-2, #E8E4F9); color: var(--ge-violet-4, #614DBA); padding: 0.08em 16px 0.2em; border-radius: var(--radius-md); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .final-cta__sub { color: var(--ge-text-secondary, #4A5876); font-size: clamp(17px, 1.6vw, 20px); max-width: 60ch; } .final-cta__small { color: var(--ge-text-secondary, #4A5876); } .final-cta__small a { color: var(--ge-violet-4, #614DBA); } .final-cta__small a:hover { color: var(--ge-navy); } /* Conversion CTA button on the white tile — navy at rest, violet on hover * (matches the nav CTA), arrow pill stays light so it reads on the fill. */ .final-cta .btn--primary { background: var(--ge-navy); color: var(--ge-white); border-color: var(--ge-navy); align-self: center; box-shadow: none; transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), color var(--dur-base) var(--ease-standard); } .final-cta .btn--primary:hover { background: var(--accent, var(--ge-violet-4)); color: var(--ge-white); border-color: var(--accent, var(--ge-violet-4)); box-shadow: none; } .final-cta .btn--primary:active { background: var(--v2-violet-active, #382872); transform: translateY(1px); } /* Arrow pill: white at rest (reads on navy), stays white-on-violet on hover. */ .final-cta .btn--primary .btn__arrow { background: var(--ge-white); color: var(--ge-navy); } .final-cta .btn--primary:hover .btn__arrow { background: var(--ge-white); color: var(--accent, var(--ge-violet-4)); } .final-cta__arc { display: block; } /* ============================================================ * NAV CTA button override — navy at rest, violet on hover only, * no glow. (Overrides the violet-theme primary glow for the nav.) * ============================================================ */ .nav .btn--primary { background: var(--ge-navy); color: var(--ge-white); box-shadow: none; } .nav .btn--primary:hover { background: var(--accent, var(--ge-violet-4)); color: var(--ge-white); box-shadow: none; } .nav .btn--primary:active { background: var(--v2-violet-active, #382872); box-shadow: none; } .nav .btn--primary:focus-visible { box-shadow: 0 0 0 3px rgba(97, 77, 186, 0.40), 0 0 0 6px rgba(97, 77, 186, 0.14); } /* Arrow pill: white-on-navy at rest so it reads on the navy button; * flips to violet-on-white on hover. */ .nav .btn--primary .btn__arrow { background: var(--ge-white); color: var(--ge-navy); } .nav .btn--primary:hover .btn__arrow { background: var(--ge-white); color: var(--accent, var(--ge-violet-4)); } .sources__links { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-4); width: 100%; } @media (min-width: 640px) { .sources__links { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); } } .sources__chip { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--ge-white); border: 1px solid var(--ge-neutral-lt3); border-radius: var(--radius-md, 12px); text-decoration: none; color: var(--ge-navy); transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); box-shadow: 0 1px 0 rgba(15, 20, 56, 0.02); } .sources__chip:hover { border-color: var(--ge-violet-3, #8572DA); background: var(--ge-violet-1, #F6F4FF); box-shadow: 0 6px 16px rgba(97, 77, 186, 0.10); } .sources__chip:hover .sources__chip-icon { color: var(--ge-violet-4, #614DBA); transform: translate(2px, -2px); } .sources__chip-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sources__chip-label { font-size: 15px; font-weight: var(--fw-regular); line-height: 1.3; color: var(--ge-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sources__chip-host { font-size: 12px; font-weight: var(--fw-light); color: var(--ge-text-secondary, #4A5876); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sources__chip-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--ge-text-secondary, #4A5876); transition: transform var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); } /* ============================================================ * TWEAKS PANEL — minimal, just for hero variant selection * ============================================================ */ .tweaks { position: fixed; right: 24px; bottom: 24px; z-index: 9000; background: var(--ge-white); border: 1px solid var(--ge-neutral-lt3); border-radius: var(--radius-lg, 16px); box-shadow: 0 16px 48px rgba(15, 20, 56, 0.18); padding: 18px 20px 16px; min-width: 240px; display: none; font-family: var(--font-sans); } .tweaks[data-open="true"] { display: block; } .tweaks__title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ge-text-secondary, #4A5876); margin: 0 0 12px; font-weight: var(--fw-regular); } .tweaks__close { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; width: 24px; height: 24px; color: var(--ge-text-secondary, #4A5876); cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .tweaks__close:hover { background: var(--ge-bg-light); color: var(--ge-navy); } .tweaks__close svg { width: 14px; height: 14px; } .tweaks__section { margin-bottom: 14px; } .tweaks__section:last-child { margin-bottom: 0; } .tweaks__label { font-size: 13px; color: var(--ge-navy); margin: 0 0 8px; font-weight: var(--fw-regular); display: block; } .tweaks__radio-group { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; background: var(--ge-bg-light); border-radius: 10px; padding: 4px; } .tweaks__radio { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; pointer-events: none; } .tweaks__radio-label { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; padding: 8px 6px; border-radius: 7px; cursor: pointer; color: var(--ge-text-secondary, #4A5876); font-weight: var(--fw-regular); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .tweaks__radio:checked + .tweaks__radio-label { background: var(--ge-white); color: var(--ge-navy); box-shadow: 0 1px 3px rgba(15, 20, 56, 0.10); } .tweaks__hint { font-size: 11px; color: var(--ge-text-secondary, #4A5876); margin: 10px 0 0; line-height: 1.4; } /* ============================================================ * TIERS — mobile: collapse the 3-col table into stacked cards. * One card per requirement; each tier shown as a labelled row. * Keeps the semantic intact for desktop + accessibility. * ============================================================ */ @media (max-width: 767px) { /* The wrapper stops being the framed table; cards carry their own frame */ .tiers__table-wrap { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; } .tiers__table { display: block; font-size: 15px; } .tiers__table thead { display: none; } .tiers__table tbody { display: block; } /* Each requirement becomes a self-contained card */ .tiers__row { display: block; background: var(--ge-white); border: 1px solid var(--ge-neutral-lt3); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-sm); overflow: hidden; } .tiers__row + .tiers__row { margin-top: var(--sp-4); } .tiers__row td { display: block; width: 100%; padding: var(--sp-4) var(--sp-5); border-left: 0 !important; border-bottom: 1px solid var(--ge-neutral-lt3); } .tiers__row td:last-child { border-bottom: 0; } /* First cell = the requirement, styled as a card header strip */ .tiers__row td:first-child { background: #F6F3FC; border-bottom: 1px solid var(--ge-neutral-lt2, #E0D9F2); } .tiers__row-req { font-size: 16px; } /* Tier cells: surface the column label that the hidden held */ .tiers__row-cell { display: block; color: var(--ge-text-secondary, #4A5876); } .tiers__row-cell::before { content: attr(data-tier); display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: var(--fw-regular); color: var(--ge-neutral-dk2, #95A2B5); margin-bottom: 8px; } .tiers__row-cell--enhanced { background: rgba(232, 228, 249, 0.35); } .tiers__row-cell--enhanced::before { color: #7B62D9; } /* Tighten the status row so check + label sit on one line */ .tiers__check, .tiers__dash { margin-bottom: 0; } } /* ============================================================ * HERO VARIANT B — Monzo-style floating image tile. * The dark hero photo now lives inside a large rounded card that * floats on the white page; copy sits at the top-left and the * enforcement countdown is a strip pinned to the bottom of the tile. * (Overrides the earlier full-bleed variant-B rules.) * ============================================================ */ .hero-ml--b { background: var(--ge-white); color: var(--ge-navy); display: flex; flex-direction: column; min-height: 100svh; overflow: visible; padding: clamp(78px, 8vw, 96px) clamp(20px, 4.2vw, 32px) clamp(20px, 2.4vw, 36px); } /* Retire the old full-bleed decorations + orphaned floats */ .hero-ml--b::before, .hero-ml--b::after { content: none; display: none; } .hero-ml__floats { display: none; } .hero-ml__tile { position: relative; z-index: 1; flex: 1 1 auto; max-width: 1280px; width: 100%; margin-inline: auto; min-height: 440px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6); padding: clamp(28px, 4vw, 56px); border-radius: clamp(24px, 2.4vw, 36px); overflow: hidden; color: var(--ge-white); background: linear-gradient(100deg, rgba(26, 18, 64, 0.95) 0%, rgba(26, 18, 64, 0.82) 30%, rgba(56, 40, 114, 0.55) 62%, rgba(97, 77, 186, 0.22) 100%), url('../assets/images/hero-corridor-photo.jpg') center right / cover no-repeat, linear-gradient(120deg, #1A1240 0%, #382872 45%, #614DBA 100%); box-shadow: 0 40px 90px rgba(26, 18, 64, 0.26), 0 8px 24px rgba(26, 18, 64, 0.14); } @media (max-width: 899px) { .hero-ml__tile { min-height: clamp(440px, 80vh, 600px); background: linear-gradient(180deg, rgba(26, 18, 64, 0.90) 0%, rgba(26, 18, 64, 0.70) 55%, rgba(56, 40, 114, 0.48) 100%), url('../assets/images/hero-corridor-photo.jpg') center / cover no-repeat, linear-gradient(120deg, #1A1240 0%, #382872 45%, #614DBA 100%); } } /* Copy block — top-left inside the tile */ .hero-ml--b .hero-ml__dark-inner { position: relative; z-index: 2; max-width: 720px; margin: 0; gap: var(--sp-4); /* Fill the space above the navy bar and centre the copy so it sits balanced */ flex: 1 1 auto; justify-content: center; } /* Balance the headline + give the lede an even, comfortable measure */ .hero-ml--b .hero-ml__dark-inner h1 { text-wrap: balance; } .hero-ml--b .hero-ml__dark-inner .hero-ml__lede { max-width: 48ch; text-wrap: pretty; } /* Countdown — a strip pinned to the bottom of the tile, divided by a hairline */ /* Countdown — a navy bar spanning the full width of the tile, flush to its * bottom edge (the tile's rounded overflow clips the corners). */ .hero-ml--b .hero-ml__banner { position: relative; z-index: 2; align-self: stretch; width: auto; margin: var(--sp-2) calc(clamp(28px, 4vw, 56px) * -1) calc(clamp(28px, 4vw, 56px) * -1); padding: clamp(16px, 1.8vw, 24px) clamp(28px, 4vw, 56px); border: none; border-top: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0; background: var(--ge-navy); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; /* Sits above the fold inside the tile — show it without waiting for scroll reveal */ opacity: 1; transform: none; } .hero-ml--b .hero-ml__banner-inner { padding: 0; max-width: none; width: 100%; gap: clamp(20px, 2.6vw, 36px); align-items: center; justify-content: space-between; } /* Smaller enforcement date inside the bar */ .hero-ml--b .hero-ml__banner-date { font-size: clamp(22px, 2.2vw, 30px); } /* Print: cleaner, fewer dark sections */ @media print { .tweaks, .nav, .footer { display: none; } .compliance { background: var(--ge-white); color: var(--ge-navy); } .compliance__item { background: var(--ge-white); border-color: var(--ge-neutral-lt3); } .compliance__item h3, .compliance__head h2 { color: var(--ge-navy); } }