/* ============================================================ HeroSection — RenderBox CSS v4 (mobile-tuned) Desktop CSS is identical to v3. All mobile rules are gated behind @media (max-width: 767px) — tablet+ uses scaled desktop canvas. ============================================================ */ /* ---- SCOPED RESET ---- */ #HeroSection_root__Mx7K2, #HeroSection_root__Mx7K2 *, #HeroSection_root__Mx7K2 *::before, #HeroSection_root__Mx7K2 *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ---- ROOT SECTION (desktop unchanged) ---- */ #HeroSection_root__Mx7K2 { position: relative !important; width: 1920px !important; height: 1140px !important; overflow: hidden !important; background: #000000 !important; transform-origin: top left !important; transform: scale(1); clip-path: none !important; } /* ---- SHARED LAYER BASE (desktop unchanged) ---- */ #HeroSection_root__Mx7K2 .HeroSection_layer__Kp1A2 { position: absolute !important; left: 0 !important; width: 1920px !important; background-repeat: no-repeat !important; background-position: top left !important; pointer-events: none !important; will-change: transform; } /* ---- CLOUD ---- */ #HeroSection_root__Mx7K2 .HeroSection_cloud__Qw5T1 { top: 0 !important; height: 373px !important; background-image: url(https://mbbcinsights.ca/files/new/1778965688_8046370_cloud-0.png) !important; background-size: 1920px 373px !important; z-index: 1 !important; } /* ---- JUNGLE ---- */ #HeroSection_root__Mx7K2 .HeroSection_jungle__Lp8N4 { top: -62px !important; height: 1434px !important; background-image: url(https://mbbcinsights.ca/files/new/1778965688_046353_jungle-1.png) !important; background-size: 1920px 1434px !important; z-index: 2 !important; } /* ---- BIKER ---- */ #HeroSection_root__Mx7K2 .HeroSection_biker__Rn2A6 { top: 147px !important; height: 933px !important; background-image: url(https://mbbcinsights.ca/files/new/1778965687_78046380_biker2.png) !important; background-size: 1920px 933px !important; z-index: 4 !important; } /* ---- DEPTH ---- */ #HeroSection_root__Mx7K2 .HeroSection_depth__Wy6F8 { top: 0 !important; height: 1434px !important; background-image: url(https://mbbcinsights.ca/files/new/1778965687_8046380_depth-3.png) !important; background-size: 1920px 1434px !important; z-index: 5 !important; } /* ---- BOTTOM FADE ---- */ #HeroSection_root__Mx7K2 .HeroSection_bottomFade__Km3D5 { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 1920px !important; height: 520px !important; background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.92) 18%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.22) 68%, transparent 100%) !important; z-index: 6 !important; pointer-events: none !important; } /* ---- HEADLINE STACK ---- */ #HeroSection_root__Mx7K2 .HeroSection_headline__Fq9W1 { position: absolute !important; left: 472px !important; top: 367px !important; width: 931px !important; z-index: 3 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; will-change: transform, opacity; opacity: 1; transform: translateY(0); transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1), transform 0.9s cubic-bezier(0.19, 1, 0.22, 1) !important; } /* ---- TITLE ---- */ #HeroSection_root__Mx7K2 .HeroSection_title__Zn5X7 { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-family: GreatForest, Lato, cursive !important; font-weight: 400 !important; font-size: 80px !important; line-height: 1.02 !important; letter-spacing: -0.02em !important; color: #ffffff !important; text-align: left !important; z-index: auto !important; } #HeroSection_root__Mx7K2 .HeroSection_titleMark__Bc7 { display: inline-block !important; font-size: 0.72em !important; line-height: 0.95 !important; letter-spacing: 0.01em !important; } /* ---- SUBTITLE ---- */ #HeroSection_root__Mx7K2 .HeroSection_subtitle__Wm6R0 { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-family: lato, sans-serif !important; font-weight: 400 !important; font-size: 52px !important; line-height: 1.18 !important; letter-spacing: -0.015em !important; color: rgba(255, 255, 255, 0.94) !important; text-align: left !important; z-index: auto !important; } #HeroSection_root__Mx7K2 .HeroSection_nav__Jx4C7 { position: absolute !important; top: 44px !important; left: 360px !important; width: 1200px !important; height: 80px !important; margin: 0 !important; z-index: 10 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; padding: 0 28px 0 20px !important; border-radius: 20px !important; background: rgba(255, 255, 255, 0.14) !important; backdrop-filter: blur(22px) saturate(160%) !important; -webkit-backdrop-filter: blur(22px) saturate(160%) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important; pointer-events: auto !important; will-change: transform, opacity; overflow: visible !important; } #HeroSection_root__Mx7K2 .HeroSection_navLogo__Eh9W2 { display: flex !important; align-items: center !important; text-decoration: none !important; flex: 0 0 auto !important; min-width: 0 !important; user-select: none !important; } #HeroSection_root__Mx7K2 .HeroSection_logoImg__Tp7M3 { display: block !important; height: 80px !important; width: auto !important; max-width: 400px !important; object-fit: contain !important; background: transparent !important; border-radius: 0 !important; padding: 0 !important; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25)) !important; } #HeroSection_root__Mx7K2 .HeroSection_navConnector__Hn3V6 { flex: 1 1 auto !important; display: flex !important; align-items: center !important; min-width: 32px !important; padding: 0 20px !important; height: 100% !important; } #HeroSection_root__Mx7K2 .HeroSection_navLine__Hn3V6 { display: block !important; width: 100% !important; height: 1px !important; background: #7A4E2A !important; opacity: 0.72 !important; border-radius: 1px !important; } #HeroSection_root__Mx7K2 .HeroSection_navItems__Pq0Z5 { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 36px !important; flex: 0 0 auto !important; min-width: 0 !important; } #HeroSection_root__Mx7K2 .HeroSection_pageLink__Vu3P9 { font-family: "Inter", sans-serif !important; font-weight: 600 !important; font-size: 20px !important; line-height: 1 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; color: #473823 !important; text-decoration: none !important; cursor: pointer !important; white-space: nowrap !important; flex-shrink: 0 !important; transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important; opacity: 0.94 !important; padding: 8px 14px !important; border-radius: 10px !important; border: 1px solid transparent !important; background: transparent !important; } #HeroSection_root__Mx7K2 .HeroSection_pageLink__Vu3P9:hover { color: #7E3224 !important; opacity: 1 !important; transform: translateY(-1px) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.22) 100%) !important; backdrop-filter: blur(12px) saturate(150%) !important; -webkit-backdrop-filter: blur(12px) saturate(150%) !important; border-color: rgba(255, 255, 255, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.14) !important; } #HeroSection_root__Mx7K2 .HeroSection_pageLink__Vu3P9:active { transform: translateY(0) scale(0.98) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%) !important; } #HeroSection_root__Mx7K2 .HeroSection_pageLink__Vu3P9:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55) !important; outline-offset: 3px !important; } /* ---- ENTRY ANIM CLASSES ---- */ #HeroSection_root__Mx7K2 .HeroSection_animIn__Dc1K9 { opacity: 0; } #HeroSection_root__Mx7K2 .HeroSection_animIn__Dc1K9.HeroSection_animated__Rj3X5 { opacity: 1 !important; transform: translateY(0) !important; } #HeroSection_root__Mx7K2 .HeroSection_slideUp__Ef2T4 { transform: translateY(40px); } /* ---- GAP KILLER ---- */ #HeroSection_gapKiller__Bg001 { display: block !important; width: 100% !important; height: 80px !important; background: #000000 !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; } /* ============================================================ REDUCE-MOTION — stop parallax everywhere ============================================================ */ @media (prefers-reduced-motion: reduce) { #HeroSection_root__Mx7K2 .HeroSection_layer__Kp1A2 { transform: none !important; transition: none !important; } #HeroSection_root__Mx7K2 .HeroSection_pageLink__Vu3P9 { transition: none !important; } } /* ============================================================ MOBILE PORTRAIT — dedicated mobile layer art (b1/b2/b3) Separate from desktop scale canvas; jungle hidden on mobile. ============================================================ */ /* Phone portrait only — tablet (768+) uses scaled desktop canvas */ @media (max-width: 767px) { #HeroSection_root__Mx7K2 { width: 100vw !important; max-width: 100vw !important; height: 85vh !important; min-height: 580px !important; max-height: 820px !important; transform: none !important; clip-path: none !important; } #HeroSection_root__Mx7K2 .HeroSection_layer__Kp1A2 { width: 100% !important; background-repeat: no-repeat !important; } #HeroSection_root__Mx7K2 .HeroSection_jungle__Lp8N4 { display: none !important; } #HeroSection_root__Mx7K2 .HeroSection_cloud__Qw5T1 { top: 0 !important; height: 75% !important; background-image: url(https://mbbcinsights.ca/files/new/1779287563_b1.png) !important; background-size: cover !important; background-position: center top !important; z-index: 1 !important; } #HeroSection_root__Mx7K2 .HeroSection_biker__Rn2A6 { top: auto !important; bottom: 0 !important; height: 65% !important; background-image: url(https://mbbcinsights.ca/files/new/1779287563_b2.png) !important; background-size: cover !important; background-position: center bottom !important; z-index: 4 !important; } #HeroSection_root__Mx7K2 .HeroSection_depth__Wy6F8 { top: auto !important; bottom: 0 !important; height: 28% !important; background-image: url(https://mbbcinsights.ca/files/new/1779287562_b3.png) !important; background-size: cover !important; background-position: center bottom !important; z-index: 5 !important; } #HeroSection_root__Mx7K2 .HeroSection_bottomFade__Km3D5 { width: 100% !important; height: 20% !important; background: linear-gradient(to top, #000000 0%, rgba(0,0,0,0.5) 50%, transparent 100%) !important; } #HeroSection_root__Mx7K2 .HeroSection_headline__Fq9W1 { left: 0 !important; right: 0 !important; top: var(--hs-headline-top-mobile, 132px) !important; margin-top: 64px !important; bottom: auto !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; width: 100% !important; max-width: 100% !important; gap: 10px !important; align-items: center !important; z-index: 8 !important; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45) !important; } /* Mobile nav — same glass bar + connector as desktop */ #HeroSection_root__Mx7K2 .HeroSection_nav__Jx4C7 { top: 12px !important; left: 12px !important; right: 12px !important; width: auto !important; height: 52px !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 14px 0 12px !important; border-radius: 14px !important; gap: 0 !important; justify-content: flex-start !important; } #HeroSection_root__Mx7K2 .HeroSection_navLogo__Eh9W2 { max-width: 38% !important; flex: 0 0 auto !important; } #HeroSection_root__Mx7K2 .HeroSection_logoImg__Tp7M3 { height: 36px !important; max-width: 100% !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; } #HeroSection_root__Mx7K2 .HeroSection_navConnector__Hn3V6 { min-width: 12px !important; padding: 0 10px !important; } #HeroSection_root__Mx7K2 .HeroSection_navItems__Pq0Z5 { gap: 12px !important; flex: 0 1 auto !important; justify-content: flex-end !important; } #HeroSection_root__Mx7K2 .HeroSection_pageLink__Vu3P9 { font-size: clamp(9px, 2.6vw, 12px) !important; letter-spacing: 0.05em !important; padding: 5px 8px !important; color: #473823 !important; border-radius: 8px !important; } #HeroSection_root__Mx7K2 .HeroSection_pageLink__Vu3P9:hover { color: #ffffff !important; padding: 5px 10px !important; } #HeroSection_root__Mx7K2 .HeroSection_title__Zn5X7 { font-size: clamp(22px, 6vw, 36px) !important; line-height: 1.12 !important; text-align: center !important; width: 100% !important; } #HeroSection_root__Mx7K2 .HeroSection_subtitle__Wm6R0 { font-size: clamp(12px, 3.2vw, 16px) !important; line-height: 1.45 !important; text-align: center !important; width: 100% !important; max-width: 28ch !important; margin-left: auto !important; margin-right: auto !important; } #HeroSection_gapKiller__Bg001 { height: 12px !important; } [data-hero-wrap="1"] { content-visibility: auto !important; contain-intrinsic-size: 0 600px !important; } #HeroSection_root__Mx7K2 .HeroSection_layer__Kp1A2 { contain: layout paint !important; } } /* Tablet / small laptop — scaled desktop canvas */ @media (min-width: 1024px) and (max-width: 1400px) { #HeroSection_root__Mx7K2 .HeroSection_headline__Fq9W1 { left: 360px !important; top: 340px !important; width: 820px !important; gap: 12px !important; } #HeroSection_root__Mx7K2 .HeroSection_title__Zn5X7 { font-size: 68px !important; line-height: 1.04 !important; } #HeroSection_root__Mx7K2 .HeroSection_subtitle__Wm6R0 { font-size: 44px !important; line-height: 1.16 !important; } } /* Small phones */ @media (max-width: 480px) { #HeroSection_root__Mx7K2 { min-height: 540px !important; } #HeroSection_root__Mx7K2 .HeroSection_headline__Fq9W1 { padding-left: 16px !important; padding-right: 16px !important; gap: 8px !important; } #HeroSection_root__Mx7K2 .HeroSection_nav__Jx4C7 { top: 10px !important; left: 10px !important; right: 10px !important; height: 48px !important; padding: 0 10px 0 10px !important; } #HeroSection_root__Mx7K2 .HeroSection_logoImg__Tp7M3 { height: 32px !important; } #HeroSection_root__Mx7K2 .HeroSection_navItems__Pq0Z5 { gap: 8px !important; } #HeroSection_root__Mx7K2 .HeroSection_navConnector__Hn3V6 { min-width: 8px !important; padding: 0 8px !important; } } /* ============================================================ RAW SCALE CARDS — nitas glassmorphism Scope: #RawScaleCards_root__Kx9M2 RenderBox v9 compliant · full-viewport height · max-w 1200px ============================================================ */ /* --- RESET --- */ #RawScaleCards_root__Kx9M2, #RawScaleCards_root__Kx9M2 *, #RawScaleCards_root__Kx9M2 *::before, #RawScaleCards_root__Kx9M2 *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ── ROOT — full viewport height ──────────────────────────── */ #RawScaleCards_root__Kx9M2 { position: relative !important; width: 100% !important; min-height: 100vh !important; background-color: #000000 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 5rem 0 !important; overflow: hidden !important; font-family: "Lato", system-ui, sans-serif !important; -webkit-font-smoothing: antialiased !important; color: rgba(255,255,255,0.85) !important; border-top: 1px solid rgba(255,255,255,0.05) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; } /* ── BACKGROUND ────────────────────────────────────────────── */ #RawScaleCards_root__Kx9M2 .RawScaleCards_bgPortal__Qr7T1 { position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 0 !important; overflow: hidden !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_bgImage__Ws4V6 { position: absolute !important; inset: 0 !important; background-image: url("https://images.unsplash.com/photo-1633625463244-19e22598bceb?q=80&w=2400&auto=format&fit=crop") !important; background-size: cover !important; background-position: center !important; opacity: 0.10 !important; filter: grayscale(1) contrast(1.2) !important; transform: scale(1.08) translateY(0); transition: transform 0.1s linear !important; will-change: transform; } #RawScaleCards_root__Kx9M2 .RawScaleCards_bgFade__Yz8A3 { position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, rgba(0,0,0,0.7) 70%, #000 100%), linear-gradient(to bottom, rgba(0,0,0,0.85), transparent 25%, transparent 75%, rgba(0,0,0,0.85)) !important; z-index: 1 !important; } /* Brand grid */ #RawScaleCards_root__Kx9M2 .RawScaleCards_bgPortal__Qr7T1::after { content: ""; position: absolute; inset: 0; opacity: 0.025; pointer-events: none; background-image: linear-gradient(rgba(158,243,0,0.8) 1px, transparent 1px), linear-gradient(90deg, rgba(158,243,0,0.8) 1px, transparent 1px); background-size: 140px 140px; z-index: 2; } /* ── GRID — 2×2 · max 1200px ──────────────────────────────── */ #RawScaleCards_root__Kx9M2 .RawScaleCards_grid__Bc1D5 { position: relative !important; z-index: 10 !important; width: 100% !important; max-width: 75rem !important; margin: 0 auto !important; padding: 0 2.5rem !important; display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 1fr 1fr !important; gap: 1.5rem !important; /* Fill the available vertical space inside the flex root */ flex: 1 !important; align-items: stretch !important; } /* ── BASE CARD ─────────────────────────────────────────────── */ #RawScaleCards_root__Kx9M2 .RawScaleCards_card__Ef2G7 { position: relative !important; display: flex !important; flex-direction: column !important; text-decoration: none !important; color: inherit !important; background: rgba(8,14,4,0.82) !important; backdrop-filter: blur(28px) saturate(160%) !important; -webkit-backdrop-filter: blur(28px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 1.25rem !important; padding: 2.5rem 2.25rem 2rem !important; min-height: 280px !important; overflow: hidden !important; cursor: default !important; isolation: isolate !important; box-shadow: 0 2px 0 rgba(255,255,255,0.05) inset, 0 32px 64px -16px rgba(0,0,0,0.85) !important; /* Entry animation — NO !important on opacity/transform (Rule #2.5) */ opacity: 0; transform: translateY(32px); transition: opacity 0.75s cubic-bezier(0.19,1,0.22,1), transform 0.65s cubic-bezier(0.19,1,0.22,1), background 0.35s ease, border-color 0.4s ease, box-shadow 0.45s ease !important; } #RawScaleCards_root__Kx9M2 a.RawScaleCards_card__Ef2G7 { cursor: pointer !important; } /* Glass top-edge sheen */ #RawScaleCards_root__Kx9M2 .RawScaleCards_card__Ef2G7::before { content: ""; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: linear-gradient(to right, transparent 5%, rgba(255,255,255,0.16) 40%, rgba(255,255,255,0.08) 65%, transparent 95%) !important; pointer-events: none !important; z-index: 3 !important; transition: background 0.35s ease !important; } /* Inner glass sheen */ #RawScaleCards_root__Kx9M2 .RawScaleCards_card__Ef2G7::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(145deg, rgba(255,255,255,0.035) 0%, transparent 50%) !important; pointer-events: none !important; z-index: 0 !important; border-radius: inherit !important; } /* ── ENTRY ANIMATION STATES ────────────────────────────────── */ #RawScaleCards_root__Kx9M2 .RawScaleCards_card__Ef2G7.RawScaleCards_is-visible__Pn6Q8 { opacity: 1 !important; transform: translateY(0) !important; } #RawScaleCards_root__Kx9M2.RawScaleCards_force-show .RawScaleCards_card__Ef2G7 { opacity: 1 !important; transform: translateY(0) !important; } /* ── 3D HOVER ──────────────────────────────────────────────── */ #RawScaleCards_root__Kx9M2 a.RawScaleCards_card__Ef2G7:hover { background: rgba(12,22,6,0.90) !important; border-color: rgba(255,255,255,0.15) !important; transform: translateY(-7px) rotateX(2deg) scale(1.015) !important; box-shadow: 0 2px 0 rgba(255,255,255,0.09) inset, 0 50px 90px -20px rgba(0,0,0,0.90), 0 18px 36px -8px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.055) !important; } #RawScaleCards_root__Kx9M2 a.RawScaleCards_card__Ef2G7:hover::before { background: linear-gradient(to right, transparent 5%, rgba(255,255,255,0.32) 40%, rgba(255,255,255,0.16) 65%, transparent 95%) !important; } /* ── LIME CARD ─────────────────────────────────────────────── */ #RawScaleCards_root__Kx9M2 .RawScaleCards_card--lime__Op5Q7 { background: linear-gradient(155deg, rgba(16,28,4,0.90) 0%, rgba(8,14,4,0.86) 55%) !important; border-color: rgba(158,243,0,0.16) !important; box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset, 0 32px 64px -16px rgba(0,0,0,0.85), 0 0 48px -14px rgba(158,243,0,0.07) !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_card--lime__Op5Q7::before { background: linear-gradient(to right, transparent 5%, rgba(158,243,0,0.28) 40%, rgba(158,243,0,0.10) 65%, transparent 95%) !important; } #RawScaleCards_root__Kx9M2 a.RawScaleCards_card--lime__Op5Q7:hover { background: linear-gradient(155deg, rgba(20,36,5,0.92) 0%, rgba(10,18,4,0.90) 55%) !important; border-color: rgba(158,243,0,0.38) !important; transform: translateY(-7px) rotateX(2deg) scale(1.015) !important; box-shadow: 0 2px 0 rgba(158,243,0,0.09) inset, 0 50px 90px -20px rgba(0,0,0,0.90), 0 18px 36px -8px rgba(0,0,0,0.65), 0 0 70px -10px rgba(158,243,0,0.18), 0 0 0 1px rgba(158,243,0,0.10) !important; } #RawScaleCards_root__Kx9M2 a.RawScaleCards_card--lime__Op5Q7:hover::before { background: linear-gradient(to right, transparent 5%, rgba(158,243,0,0.50) 40%, rgba(158,243,0,0.22) 65%, transparent 95%) !important; } /* ── WARNING CARD ──────────────────────────────────────────── */ #RawScaleCards_root__Kx9M2 .RawScaleCards_card--warning__De4F6 { background: linear-gradient(155deg, rgba(14,22,4,0.90) 0%, rgba(8,14,4,0.86) 55%) !important; border-color: rgba(84,130,0,0.20) !important; box-shadow: 0 2px 0 rgba(255,255,255,0.03) inset, 0 32px 64px -16px rgba(0,0,0,0.85), 0 0 36px -14px rgba(84,130,0,0.05) !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_card--warning__De4F6::before { background: linear-gradient(to right, transparent 5%, rgba(84,130,0,0.30) 40%, rgba(84,130,0,0.12) 65%, transparent 95%) !important; } /* ── CORNER ACCENT — hidden per request ────────────────────── */ #RawScaleCards_root__Kx9M2 .RawScaleCards_corner__Lm2N4 { display: none !important; } /* ── CARD INNER LAYOUT ─────────────────────────────────────── */ #RawScaleCards_root__Kx9M2 .RawScaleCards_cardInner__Qr1T3 { position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; gap: 1rem !important; align-items: flex-start !important; text-align: left !important; flex: 1 !important; height: 100% !important; } /* ── LABEL — top-right, Lato xs uppercase ──────────────────── */ #RawScaleCards_root__Kx9M2 .RawScaleCards_label__Sv4W6 { position: absolute !important; top: 0 !important; right: 0 !important; display: block !important; font-family: "Lato", system-ui, sans-serif !important; font-size: clamp(0.65rem, 0.9vw, 0.8rem) !important; font-weight: 700 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.35) !important; line-height: 1.4 !important; } /* ── VALUE — GreatForest display ────────────────────────────── */ #RawScaleCards_root__Kx9M2 .RawScaleCards_value__Ux7Y9 { font-family: greatforest, Georgia, cursive !important; font-style: italic !important; font-weight: 800 !important; font-size: clamp(2.5rem, 5vw, 4rem) !important; line-height: 1 !important; letter-spacing: -0.03em !important; text-transform: uppercase !important; color: #ffffff !important; text-align: left !important; text-shadow: 4px 6px 0 #1e2e14 !important; margin-top: 1.75rem !important; flex-shrink: 0 !important; } /* String values — cards 3 & 4 */ #RawScaleCards_root__Kx9M2 .RawScaleCards_card--default__Hj5K9:not(:first-child) .RawScaleCards_value__Ux7Y9, #RawScaleCards_root__Kx9M2 .RawScaleCards_card--warning__De4F6 .RawScaleCards_value__Ux7Y9 { font-family: greatforest, Georgia, cursive !important; font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important; line-height: 1.1 !important; text-shadow: 3px 4px 0 #1e2e14 !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_value--lime__Rs8T0 { color: #9EF300 !important; text-shadow: 4px 6px 0 rgba(50,80,0,0.55) !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_value--warning__Gh7I9 { color: #9EF300 !important; text-shadow: 3px 4px 0 rgba(50,80,0,0.45) !important; } /* ── DESCRIPTION ───────────────────────────────────────────── */ #RawScaleCards_root__Kx9M2 .RawScaleCards_desc__Za0B2 { font-family: "Lato", system-ui, sans-serif !important; font-size: clamp(0.875rem, 2.4vw, 1.0625rem) !important; font-weight: 400 !important; line-height: 1.55 !important; padding-top: 1.5rem !important; letter-spacing: 0.01em !important; color: rgba(255,255,255,0.55) !important; text-transform: none !important; text-align: left !important; max-width: 100% !important; flex: 1 !important; } /* ── LINK ROW ──────────────────────────────────────────────── */ #RawScaleCards_root__Kx9M2 .RawScaleCards_linkRow__Cd3E5 { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; margin-top: auto !important; padding-top: 1rem !important; justify-content: flex-start !important; flex-shrink: 0 !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_linkText__Fg6H8 { font-family: "Lato", system-ui, sans-serif !important; font-size: clamp(0.7rem, 0.9vw, 0.8rem) !important; font-weight: 900 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.50) !important; transition: color 0.3s ease !important; text-align: left !important; } #RawScaleCards_root__Kx9M2 a.RawScaleCards_card__Ef2G7:hover .RawScaleCards_linkText__Fg6H8 { color: #ffffff !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_linkText--lime__Uv1W3 { color: rgba(158,243,0,0.78) !important; } #RawScaleCards_root__Kx9M2 a.RawScaleCards_card--lime__Op5Q7:hover .RawScaleCards_linkText--lime__Uv1W3 { color: #9EF300 !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_linkArrow__Ij9K1 { font-size: 0.875rem !important; color: rgba(255,255,255,0.40) !important; transition: transform 0.3s cubic-bezier(0.19,1,0.22,1), color 0.3s ease !important; display: inline-block !important; } #RawScaleCards_root__Kx9M2 a.RawScaleCards_card__Ef2G7:hover .RawScaleCards_linkArrow__Ij9K1 { transform: translateX(6px) !important; color: #ffffff !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_linkArrow--lime__Xy4Z6 { color: rgba(158,243,0,0.60) !important; } #RawScaleCards_root__Kx9M2 a.RawScaleCards_card--lime__Op5Q7:hover .RawScaleCards_linkArrow--lime__Xy4Z6 { color: #9EF300 !important; transform: translateX(6px) !important; } /* ── RESPONSIVE — desktop / tablet / mobile ───────────────── */ /* Large desktop */ @media (min-width: 1280px) { #RawScaleCards_root__Kx9M2 .RawScaleCards_grid__Bc1D5 { max-width: 75rem !important; gap: 1.75rem !important; padding: 0 2.5rem !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_card__Ef2G7 { padding: 2.75rem 2.5rem 2.25rem !important; min-height: 18rem !important; } } /* Desktop / laptop */ @media (min-width: 1024px) and (max-width: 1279px) { #RawScaleCards_root__Kx9M2 { padding: 4.5rem 0 !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_grid__Bc1D5 { max-width: 75rem !important; gap: 1.5rem !important; padding: 0 2rem !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_card__Ef2G7 { padding: 2.25rem 2rem 1.875rem !important; min-height: 16.5rem !important; } } /* Tablet — 2×2 grid */ @media (min-width: 768px) and (max-width: 1023px) { #RawScaleCards_root__Kx9M2 { min-height: auto !important; padding: 3.5rem 0 !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_grid__Bc1D5 { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; gap: 1.125rem !important; padding: 0 1.5rem !important; max-width: 100% !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_card__Ef2G7 { padding: 1.75rem 1.5rem 1.5rem !important; min-height: 15rem !important; border-radius: 1.125rem !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_value__Ux7Y9 { font-size: clamp(2rem, 4.5vw, 3rem) !important; margin-top: 1.5rem !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_card--default__Hj5K9:not(:first-child) .RawScaleCards_value__Ux7Y9, #RawScaleCards_root__Kx9M2 .RawScaleCards_card--warning__De4F6 .RawScaleCards_value__Ux7Y9 { font-size: clamp(1.25rem, 2.8vw, 1.75rem) !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_desc__Za0B2 { font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important; padding-top: 1rem !important; } } /* Mobile — single column */ @media (max-width: 767px) { #RawScaleCards_root__Kx9M2 { min-height: auto !important; padding: 3rem 0 !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_grid__Bc1D5 { grid-template-columns: 1fr !important; grid-template-rows: unset !important; gap: 1rem !important; padding: 0 1.25rem !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_card__Ef2G7 { padding: 1.625rem 1.375rem 1.375rem !important; min-height: unset !important; border-radius: 1rem !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_cardInner__Qr1T3 { gap: 0.75rem !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_value__Ux7Y9 { margin-top: 1.25rem !important; font-size: clamp(2rem, 8vw, 2.75rem) !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_card--default__Hj5K9:not(:first-child) .RawScaleCards_value__Ux7Y9, #RawScaleCards_root__Kx9M2 .RawScaleCards_card--warning__De4F6 .RawScaleCards_value__Ux7Y9 { font-size: clamp(1.25rem, 5.5vw, 1.75rem) !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_desc__Za0B2 { padding-top: 0.875rem !important; line-height: 1.55 !important; } } /* Small phones */ @media (max-width: 479px) { #RawScaleCards_root__Kx9M2 { padding: 2.5rem 0 !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_grid__Bc1D5 { gap: 0.875rem !important; padding: 0 1rem !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_card__Ef2G7 { padding: 1.5rem 1.25rem 1.25rem !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_label__Sv4W6 { font-size: 0.625rem !important; letter-spacing: 0.16em !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_value__Ux7Y9 { font-size: clamp(1.875rem, 9vw, 2.5rem) !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_desc__Za0B2 { font-size: 0.8125rem !important; } #RawScaleCards_root__Kx9M2 .RawScaleCards_linkText__Fg6H8 { font-size: 0.625rem !important; letter-spacing: 0.14em !important; } } /* Touch — disable 3D lift */ @media (hover: none), (pointer: coarse) { #RawScaleCards_root__Kx9M2 a.RawScaleCards_card__Ef2G7:hover { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════ RawScale Module — RenderBox CMS Optimised CSS Root: #RawScale_root__Kx7M2 FONT CHANGES (only changes from original): - Removed @import url('https://fonts.cdnfonts.com/css/great-forest') CMS already loads GreatForest globally — no import needed. - 'Great Forest' → GreatForest (CMS name: no space, no quotes) - 'Lato' → lato (CMS name: lowercase, no quotes) SIZE CHANGES: - Font sizes and line-heights aligned to AdvSplit module patterns: clamp(min, vw, max) ranges tuned to match AdvSplit heading/body scale. - Mobile breakpoints expanded and tightened for full readability. ═══════════════════════════════════════════════════════════════════ */ /* ── Scoped reset ─────────────────────────────────────────────────── */ #RawScale_root__Kx7M2, #RawScale_root__Kx7M2 *, #RawScale_root__Kx7M2 *::before, #RawScale_root__Kx7M2 *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── Root section ─────────────────────────────────────────────────── */ #RawScale_root__Kx7M2 { background: #000000 !important; position: relative !important; width: 100% !important; padding-top: 4rem !important; padding-bottom: 4rem !important; overflow: hidden !important; color: #F8F8F8 !important; font-family: lato, system-ui, -apple-system, sans-serif !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } @media (min-width: 768px) { #RawScale_root__Kx7M2 { padding-top: 6rem !important; padding-bottom: 6rem !important; } } @media (min-width: 1024px) { #RawScale_root__Kx7M2 { padding-top: 8rem !important; padding-bottom: 8rem !important; } } /* ══════════════════════════════════════════════════════════════════ BACKGROUND IMAGE ══════════════════════════════════════════════════════════════════ */ #RawScale_root__Kx7M2 .RawScale_bgWrap__Kx7M2 { position: absolute !important; top: 0 !important; right: 0 !important; width: 50% !important; height: 100% !important; pointer-events: none !important; overflow: hidden !important; z-index: 0 !important; opacity: 0 !important; transform: translateX(50px) skewY(10deg) !important; transition: opacity 1.2s ease, transform 1.2s ease !important; } #RawScale_root__Kx7M2 .RawScale_bgWrap__Kx7M2.RawScale_bgVisible__Kx7M2 { opacity: 0.15 !important; transform: translateX(0px) skewY(0deg) !important; } #RawScale_root__Kx7M2 .RawScale_bgImg__Kx7M2 { width: 100% !important; height: 120% !important; object-fit: cover !important; object-position: center !important; filter: grayscale(1) contrast(1.5) !important; display: block !important; } /* ══════════════════════════════════════════════════════════════════ MAIN GRID — 7fr / 5fr (lg), single col (mobile) ══════════════════════════════════════════════════════════════════ */ #RawScale_root__Kx7M2 .RawScale_mainGrid__Kx7M2 { max-width: 1700px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; margin-top: 0 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 2.5rem !important; align-items: center !important; position: relative !important; z-index: 10 !important; } @media (min-width: 640px) { #RawScale_root__Kx7M2 .RawScale_mainGrid__Kx7M2 { padding-left: 2rem !important; padding-right: 2rem !important; gap: 3rem !important; } } @media (min-width: 1024px) { #RawScale_root__Kx7M2 .RawScale_mainGrid__Kx7M2 { grid-template-columns: 7fr 5fr !important; gap: 6rem !important; margin-top: 0 !important; } } /* ══════════════════════════════════════════════════════════════════ VOLT GREEN BOX ══════════════════════════════════════════════════════════════════ */ #RawScale_root__Kx7M2 .RawScale_greenBox__Kx7M2 { background:#9EF300 !important; color: #000000 !important; padding: 2rem !important; position: relative !important; overflow: hidden !important; clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%) !important; box-shadow: 50px 50px 0px 0px rgba(207, 255, 4, 0.05) !important; opacity: 0 !important; transform: translateY(50px) skewY(5deg) !important; transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1) !important; } @media (min-width: 640px) { #RawScale_root__Kx7M2 .RawScale_greenBox__Kx7M2 { padding: 3rem !important; } } @media (min-width: 768px) { #RawScale_root__Kx7M2 .RawScale_greenBox__Kx7M2 { padding: 5rem !important; } } @media (min-width: 1024px) { #RawScale_root__Kx7M2 .RawScale_greenBox__Kx7M2 { padding: 6rem !important; } } #RawScale_root__Kx7M2 .RawScale_greenBox__Kx7M2.RawScale_boxVisible__Kx7M2 { opacity: 1 !important; transform: translateY(0px) skewY(0deg) !important; } /* Activity icon */ #RawScale_root__Kx7M2 .RawScale_boxIconWrap__Kx7M2 { position: absolute !important; top: 0 !important; right: 0 !important; padding: 1.5rem !important; opacity: 0.1 !important; color: #000000 !important; pointer-events: none !important; transition: transform 2s ease !important; } @media (min-width: 640px) { #RawScale_root__Kx7M2 .RawScale_boxIconWrap__Kx7M2 { padding: 2rem !important; } } #RawScale_root__Kx7M2 .RawScale_greenBox__Kx7M2:hover .RawScale_boxIconWrap__Kx7M2 { transform: scale(1.25) !important; } /* ── Heading: GreatForest display font ───────────────────────────── */ #RawScale_root__Kx7M2 .RawScale_headingWrap__Kx7M2 { margin-bottom: 2rem !important; display: flex !important; flex-direction: column !important; } @media (min-width: 640px) { #RawScale_root__Kx7M2 .RawScale_headingWrap__Kx7M2 { margin-bottom: 2.5rem !important; } } @media (min-width: 1024px) { #RawScale_root__Kx7M2 .RawScale_headingWrap__Kx7M2 { margin-bottom: 3rem !important; } } /* FONT SIZE — matched to AdvSplit pattern: AdvSplit uses clamp(2rem, 7.5vw, 5rem) for its main headline lines. RawScale display heading is larger/bolder; we scale up proportionally: clamp(2.75rem, 7vw, 7.5rem) mirrors the same vw-based fluidity while keeping a safe minimum (2.75rem) for small phones. Line-height tightened to 1.2 → 1.15 matching AdvSplit's tight display style. */ #RawScale_root__Kx7M2 .RawScale_headLine__Kx7M2 { display: block !important; font-family: GreatForest, Georgia, serif !important; font-size: clamp(2.75rem, 5vw, 5.5rem) !important; font-weight: 900 !important; line-height: 1.15 !important; color: #000000 !important; opacity: 0 !important; transform: translateY(60px) !important; transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1), transform 0.9s cubic-bezier(0.19, 1, 0.22, 1) !important; } #RawScale_root__Kx7M2 .RawScale_headLine2__Kx7M2 { transition-delay: 0.12s !important; } #RawScale_root__Kx7M2 .RawScale_headLine__Kx7M2.RawScale_lineVisible__Kx7M2 { opacity: 1 !important; transform: translateY(0px) !important; } /* ── Body copy inside green box ───────────────────────────────────── */ /* FONT SIZE — matched to AdvSplit cardPara pattern: AdvSplit uses clamp(1.5rem, 1.5vw, 1.05rem) [note: their clamp is inverted for a reason; we interpret the intent as a body range of ~0.95rem–1.1rem at desktop]. For the green box (dark text, important read), we use a slightly larger base so it remains comfortable on mobile: clamp(0.95rem, 2.2vw, 1.2rem). Line-height: 1.65 → 1.6 consistent with AdvSplit body copy. font-weight stays 700, text-transform uppercase preserved. */ #RawScale_root__Kx7M2 .RawScale_boxDesc__Kx7M2 { font-family: lato, sans-serif !important; font-size: clamp(0.95rem, 2.2vw, 1.2rem) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: -0.025em !important; color: rgba(0, 0, 0, 0.8) !important; max-width: 36rem !important; line-height: 1.6 !important; margin-bottom: 3rem !important; } @media (min-width: 1024px) { #RawScale_root__Kx7M2 .RawScale_boxDesc__Kx7M2 { margin-bottom: 4rem !important; } } /* ── Track items ──────────────────────────────────────────────────── */ #RawScale_root__Kx7M2 .RawScale_tracks__Kx7M2 { display: flex !important; gap: 2rem !important; flex-wrap: wrap !important; } @media (min-width: 640px) { #RawScale_root__Kx7M2 .RawScale_tracks__Kx7M2 { gap: 3rem !important; } } #RawScale_root__Kx7M2 .RawScale_trackItem__Kx7M2 { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } #RawScale_root__Kx7M2 .RawScale_trackDim__Kx7M2 { opacity: 0.3 !important; } /* trackLabel: monospace micro-label — kept at original 0.625rem as AdvSplit doesn't have an equivalent and this is a decorative detail that must stay legible but intentionally tiny. */ #RawScale_root__Kx7M2 .RawScale_trackLabel__Kx7M2 { font-family: "Courier New", "Courier", monospace !important; font-size: 0.625rem !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; color: #000000 !important; } #RawScale_root__Kx7M2 .RawScale_trackBar__Kx7M2 { height: 6px !important; width: 8rem !important; background: #000000 !important; display: block !important; } /* ══════════════════════════════════════════════════════════════════ RIGHT COLUMN ══════════════════════════════════════════════════════════════════ */ #RawScale_root__Kx7M2 .RawScale_rightCol__Kx7M2 { display: flex !important; flex-direction: column !important; gap: 2rem !important; opacity: 0 !important; transform: translateY(30px) !important; transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1) 0.3s, transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0.3s !important; } @media (min-width: 1024px) { #RawScale_root__Kx7M2 .RawScale_rightCol__Kx7M2 { gap: 3rem !important; } } #RawScale_root__Kx7M2 .RawScale_rightCol__Kx7M2.RawScale_colVisible__Kx7M2 { opacity: 1 !important; transform: translateY(0px) !important; } /* ── Micro-label ──────────────────────────────────────────────────── */ /* Matched to AdvSplit cardH3 intent: uppercase, prominent. Scaled up from original 0.625rem to clamp(0.75rem, 1.5vw, 0.875rem) so "Funding & Support" reads comfortably as a section label on mobile. */ #RawScale_root__Kx7M2 .RawScale_microLabel__Kx7M2 { font-family: lato !important; font-size: clamp(0.75rem, 1.5vw, 0.875rem) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.2em !important; color: #9EF300 !important; } /* ── Quote / right-col body text ──────────────────────────────────── */ /* FONT SIZE — matched to AdvSplit cardPara pattern. AdvSplit cardPara: clamp(1.5rem, 1.5vw, 1.05rem) Here the right col "quote" carries the main body narrative; we apply a readable range: clamp(1rem, 2.5vw, 1.5rem). Line-height: 1 → 1.55 for body-copy readability (AdvSplit uses 1.65). Font-style italic and font-weight 900 preserved. */ #RawScale_root__Kx7M2 .RawScale_quote__Kx7M2 { font-family: lato, sans-serif !important; font-size: clamp(1.5rem, 1.75vw, 1.25rem) !important; font-style: italic !important; font-weight: 900 !important; color: rgba(248, 248, 248, 0.4) !important; line-height: 1.5 !important; } #RawScale_root__Kx7M2 .RawScale_quoteHighlight__Kx7M2 { color: #F8F8F8 !important; text-decoration: underline !important; text-decoration-color: #9EF300 !important; text-decoration-thickness: 4px !important; text-underline-offset: 8px !important; } /* ── Info row ─────────────────────────────────────────────────────── */ #RawScale_root__Kx7M2 .RawScale_infoRow__Kx7M2 { display: flex !important; align-items: center !important; gap: 1.25rem !important; } @media (min-width: 640px) { #RawScale_root__Kx7M2 .RawScale_infoRow__Kx7M2 { gap: 1.5rem !important; } } #RawScale_root__Kx7M2 .RawScale_infoIcon__Kx7M2 { width: 3.5rem !important; height: 3.5rem !important; min-width: 3.5rem !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #F8F8F8 !important; cursor: crosshair !important; transition: background 0.3s ease, color 0.3s ease !important; } @media (min-width: 640px) { #RawScale_root__Kx7M2 .RawScale_infoIcon__Kx7M2 { width: 4rem !important; height: 4rem !important; min-width: 4rem !important; } } #RawScale_root__Kx7M2 .RawScale_infoIcon__Kx7M2:hover { background:#9EF300 !important; color: #000000 !important; } /* infoText: monospace small text — kept close to original but bumped minimum from 0.625rem to 0.75rem so it's legible on mobile. Line-height 1.8 preserved (AdvSplit doesn't use monospace body, so we keep the original rhythm here). */ #RawScale_root__Kx7M2 .RawScale_infoText__Kx7M2 { font-family: "Courier New", "Courier", monospace !important; font-size: clamp(0.75rem, 1.4vw, 0.875rem) !important; text-transform: uppercase !important; line-height: 1.8 !important; color: rgba(248, 248, 248, 0.5) !important; max-width: 20rem !important; } /* ═══════════════════════════════════════════════════════════════════════════ ZoomScroll — RenderBox CMS v9 CSS GreatForest / lato — exact CMS font names (no quotes, correct case) Rule #2.5 — !important on static props, NEVER on JS-animated props Rule #7 — NO position:fixed Rule #9 — overflow-x:clip (not hidden) — preserves position:sticky ═══════════════════════════════════════════════════════════════════════════ */ #ZoomScroll_root__Zm9X4, #ZoomScroll_root__Zm9X4 *, #ZoomScroll_root__Zm9X4 *::before, #ZoomScroll_root__Zm9X4 *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } #ZoomScroll_root__Zm9X4 { position: relative !important; display: block !important; width: 100% !important; background: #000000 !important; color: #ffffff !important; font-family: lato, system-ui, -apple-system, sans-serif !important; -webkit-font-smoothing: antialiased !important; overflow-x: clip !important; overflow-y: visible !important; --volt: #ceff00; --font-display: GreatForest, Georgia, serif; --font-body: lato, sans-serif; --expo: cubic-bezier(0.19, 1, 0.22, 1); } #ZoomScroll_root__Zm9X4 .ZoomScroll_volt__Vo0B0 { color: var(--volt) !important; } /* ═══ ZOOM TRACK ═══ */ #ZoomScroll_root__Zm9X4 .ZoomScroll_zoomTrack__Zt1T1 { position: relative !important; display: block !important; width: 100% !important; height: 190vh !important; overflow: visible !important; z-index: 20 !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_animPanel__Ap2U2 { contain: layout style paint !important; position: sticky !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100vh !important; overflow: hidden !important; z-index: 5 !important; pointer-events: none !important; will-change: opacity !important; opacity: 1; transform: translate3d(0, 0, 0) !important; backface-visibility: hidden !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_panelBg__Pg3V3 { position: absolute !important; inset: 0 !important; z-index: 0 !important; background: #000000 !important; pointer-events: none !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_bokehLayer__Bk4W4 { position: absolute !important; inset: 0 !important; z-index: 1 !important; overflow: hidden !important; pointer-events: none !important; contain: strict !important; transform: translate3d(0, 0, 0) !important; backface-visibility: hidden !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_bokehParticle__Bp0C0 { position: absolute !important; border-radius: 50% !important; background: rgba(255,255,255,0.05) !important; filter: blur(80px) !important; will-change: transform !important; pointer-events: none !important; backface-visibility: hidden !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_vignette__Vi5X5 { position: absolute !important; inset: 0 !important; z-index: 2 !important; background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.4) 50%, #000 100%) !important; pointer-events: none !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_panelFrame__Pf6Y6 { position: absolute !important; inset: 3rem !important; z-index: 3 !important; border: 1px solid rgba(255,255,255,0.05) !important; border-radius: 40px !important; pointer-events: none !important; opacity: 0.2 !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_panelBody__Pb7Z7 { position: absolute !important; inset: 0 !important; z-index: 10 !important; pointer-events: none !important; contain: layout style paint !important; transform: translate3d(0, 0, 0) !important; backface-visibility: hidden !important; } /* ═══ SIDE HEADINGS ═══ */ #ZoomScroll_root__Zm9X4 .ZoomScroll_tfHead__Th8A8 { position: absolute !important; top: 38% !important; left: 24px !important; right: 24px !important; font-family: lato, sans-serif !important; font-size: 10vw !important; font-weight: 900 !important; line-height: 0.85 !important; letter-spacing: -0.05em !important; text-transform: uppercase !important; font-style: italic !important; color: #ffffff !important; text-align: center !important; white-space: nowrap !important; will-change: transform, opacity !important; opacity: 1; transform: translate3d(0, -50%, 0); backface-visibility: hidden !important; z-index: 15 !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_tsHead__Ts5G5 { position: absolute !important; bottom: 38% !important; left: 24px !important; right: 24px !important; font-family: lato, sans-serif !important; font-size: 10vw !important; font-weight: 900 !important; line-height: 0.85 !important; letter-spacing: -0.05em !important; text-transform: uppercase !important; font-style: italic !important; color: #ffffff !important; text-align: center !important; white-space: nowrap !important; will-change: transform, opacity !important; opacity: 1; transform: translate3d(0, 50%, 0); backface-visibility: hidden !important; z-index: 15 !important; } @media (min-width: 640px) { #ZoomScroll_root__Zm9X4 .ZoomScroll_tfHead__Th8A8, #ZoomScroll_root__Zm9X4 .ZoomScroll_tsHead__Ts5G5 { font-size: 60px !important; } } @media (min-width: 768px) { #ZoomScroll_root__Zm9X4 .ZoomScroll_tfHead__Th8A8 { top: 31% !important; left: 48px !important; right: auto !important; font-size: 7vw !important; text-align: left !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_tsHead__Ts5G5 { bottom: 31% !important; right: 48px !important; left: auto !important; font-size: 7vw !important; text-align: right !important; } } @media (min-width: 1024px) { #ZoomScroll_root__Zm9X4 .ZoomScroll_tfHead__Th8A8 { left: 128px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_tsHead__Ts5G5 { right: 128px !important; } } /* ═══ PERSPECTIVE WRAPPER + LETTER ROWS ═══ */ #ZoomScroll_root__Zm9X4 .ZoomScroll_perspWrap__Pw1C1 { contain: layout style paint !important; position: absolute !important; inset: 0 !important; z-index: 11 !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: none !important; overflow: hidden !important; perspective: 1400px !important; perspective-origin: 50% 50% !important; transform: translate3d(0, 0, 0) !important; backface-visibility: hidden !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_letterRow__Lr2D2 { position: absolute !important; left: 0 !important; right: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; transform-style: preserve-3d !important; font-family: GreatForest, Georgia, serif !important; line-height: 1 !important; } /* ONE — volt, glow */ #ZoomScroll_root__Zm9X4 .ZoomScroll_oneLetter__Ol3E3 { font-family: GreatForest, Georgia, serif !important; font-size: 15vw !important; font-style: italic !important; font-weight: 900 !important; line-height: 0.85 !important; letter-spacing: -0.05em !important; color: #ceff00 !important; text-shadow: 0 0 20px rgba(158,243,0,0.4) !important; display: inline-block !important; padding: 0 4px !important; text-rendering: geometricPrecision !important; -webkit-font-smoothing: antialiased !important; opacity: 0; visibility: visible; } /* PLACE — white, glow */ #ZoomScroll_root__Zm9X4 .ZoomScroll_placeLetter__Pl4F4 { font-family: GreatForest, Georgia, serif !important; font-size: 15vw !important; font-style: italic !important; font-weight: 900 !important; line-height: 0.85 !important; letter-spacing: -0.05em !important; color: #ffffff !important; text-shadow: 0 0 20px rgba(255,255,255,0.3) !important; display: inline-block !important; padding: 0 4px !important; text-rendering: geometricPrecision !important; -webkit-font-smoothing: antialiased !important; opacity: 0; visibility: visible; } @media (min-width: 768px) { #ZoomScroll_root__Zm9X4 .ZoomScroll_oneLetter__Ol3E3, #ZoomScroll_root__Zm9X4 .ZoomScroll_placeLetter__Pl4F4 { font-size: 9vw !important; padding: 0 8px !important; } } /* ═══ CARDS SECTION ═══ */ #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsSec__Cs7I7 { position: relative !important; display: block !important; width: 100% !important; min-height: 50vh !important; z-index: 10 !important; background: #000000 !important; padding: 16px 24px 64px !important; overflow: hidden !important; margin-top: -100vh !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsEnv__Ce8J8 { position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsGlow__Cg9K9 { position: absolute !important; inset: 0 !important; background: radial-gradient(circle at 50% 50%, rgba(206,255,0,0.05), transparent 70%) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsGrid__Cg0L0 { position: absolute !important; inset: 0 !important; opacity: 0.1 !important; background-image: radial-gradient(rgba(206,255,0,1) 0.5px, transparent 0.5px) !important; background-size: 24px 24px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsInner__Ci1M1 { position: relative !important; z-index: 10 !important; max-width: 1400px !important; margin: 0 auto !important; width: 100% !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsHdr__Ch2N2 { margin-bottom: clamp(32px, 5vh, 64px) !important; display: flex !important; flex-direction: column !important; gap: 24px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_titleDiv__Td1W1 { width: 96px !important; height: 4px !important; background: var(--volt) !important; transform-origin: left !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsDesc__Cd3Y3 { font-family: var(--font-body) !important; font-size: 32px !important; line-height: 38px !important; font-weight: 700 !important; font-style: italic !important; text-transform: uppercase !important; letter-spacing: -0.01em !important; color: rgba(255,255,255,0.8) !important; max-width: 1000px !important; text-align: left !important; } /* ═══ COMMUNITY EVIDENCE HUB ═══ ┌─ To adjust font sizes & line heights on MOBILE, edit the │ @media (max-width: 767px) block near the bottom of this file. │ Look for the comment: "MOBILE — Evidence Hub type adjustments" └─────────────────────────────────────────────────────────────── */ #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHub__Eh1A1 { display: flex !important; flex-direction: column !important; gap: 20px !important; padding: 32px 0 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubTitle__Et2B2 { font-family: var(--font-body) !important; /* ── DESKTOP font-size: change "11px" below ── */ font-size: 11px !important; font-weight: 900 !important; letter-spacing: 0.6em !important; text-transform: uppercase !important; color: var(--volt) !important; text-align: left !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubList__El3C3 { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubItem__Ei4D4 { display: flex !important; align-items: baseline !important; gap: 24px !important; padding: 16px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; text-align: left !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubItem__Ei4D4:last-child { border-bottom: none !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubNum__En5E5 { font-family: var(--font-body) !important; /* ── DESKTOP number font-size: change "11px" below ── */ font-size: 11px !important; font-weight: 900 !important; letter-spacing: 0.15em !important; color: rgba(206,255,0,0.5) !important; min-width: 28px !important; flex-shrink: 0 !important; text-align: left !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubLabel__El6F6 { font-family: var(--font-display) !important; /* ── DESKTOP label font-size: change "clamp(28px,4vw,52px)" below ── */ font-size: clamp(28px, 4vw, 52px) !important; /* ── DESKTOP label line-height: change "1.05" below ── */ line-height: 1.05 !important; font-weight: 900 !important; font-style: italic !important; text-transform: uppercase !important; letter-spacing: -0.04em !important; color: rgba(255,255,255,0.85) !important; text-align: left !important; } /* ═══ CARD LINK WRAPPER ═══ */ #ZoomScroll_root__Zm9X4 .ZoomScroll_cardLink__Cl0A0 { display: block !important; width: 100% !important; height: 100% !important; text-decoration: none !important; color: inherit !important; outline: none !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardLink__Cl0A0:focus-visible .ZoomScroll_cardInner__Ci8D8 { outline: 2px solid var(--volt) !important; outline-offset: 4px !important; } /* ═══ BENTO GRID ═══ */ #ZoomScroll_root__Zm9X4 .ZoomScroll_bentoGrid__Bg3Z3 { display: grid !important; grid-template-columns: 1fr !important; gap: 40px !important; width: 100% !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_bentoCard__Bc1A1 { width: 100% !important; display: block !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_floatWrap__Fw5B5 { width: 100% !important; height: 100% !important; will-change: transform !important; } /* ═══ GLASS CARD ═══ */ #ZoomScroll_root__Zm9X4 .ZoomScroll_cardInner__Ci8D8 { position: relative !important; min-height: 400px !important; background: rgba(255,255,255,0.01) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 24px !important; cursor: pointer !important; padding: 24px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 24px !important; overflow: hidden !important; will-change: transform !important; transform-style: preserve-3d !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; box-shadow: 0 50px 120px -30px rgba(0,0,0,0.9) !important; transition: border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease !important; text-align: left !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardInner__Ci8D8:hover { background: rgba(255,255,255,0.025) !important; border-color: rgba(158,243,0,0.25) !important; box-shadow: 0 50px 120px -30px rgba(0,0,0,0.95), 0 0 40px -10px rgba(158,243,0,0.12) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cInternalGlow__Cg9E9 { position: absolute !important; inset: 0 !important; z-index: 0 !important; border-radius: 24px !important; box-shadow: inset 0 2px 30px rgba(255,255,255,0.04) !important; pointer-events: none !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cIrid__Ci0F0 { position: absolute !important; inset: 0 !important; z-index: 0 !important; opacity: 0.2 !important; pointer-events: none !important; will-change: transform, background !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cGrain__Cg1G1 { position: absolute !important; top: -20% !important; left: -20% !important; right: -20% !important; bottom: -20% !important; z-index: 0 !important; opacity: 0.03 !important; mix-blend-mode: overlay !important; pointer-events: none !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important; background-size: 200px 200px !important; will-change: transform !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cNumBg__Cn2H2 { position: absolute !important; top: -4rem !important; right: -4rem !important; z-index: 0 !important; overflow: hidden !important; mix-blend-mode: overlay !important; pointer-events: none !important; will-change: transform !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cNumTxt__Ct3I3 { font-family: var(--font-display) !important; font-size: 25vw !important; font-style: italic !important; font-weight: 900 !important; text-transform: uppercase !important; color: transparent !important; opacity: 0.04 !important; -webkit-text-stroke: 1px rgba(255,255,255,1) !important; display: block !important; line-height: 1 !important; user-select: none !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cSpotlight__Cs4J4 { position: absolute !important; inset: 0 !important; z-index: 10 !important; border-radius: 24px !important; pointer-events: none !important; will-change: opacity, background !important; opacity: 0; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cTop__Ct5K5 { position: relative !important; z-index: 20 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; transform: translateZ(40px) !important; transition: transform 0.5s ease !important; text-align: left !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cMeta__Cm6L6 { display: flex !important; align-items: center !important; gap: 20px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cMetaLine__Cl7M7 { width: 48px !important; height: 1px !important; background: rgba(206,255,0,0.6) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cMetaLabel__Cl8N8 { font-family: var(--font-body) !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: 0.8em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.4) !important; white-space: nowrap !important; transition: color 0.5s ease !important; text-align: left !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardInner__Ci8D8:hover .ZoomScroll_cMetaLabel__Cl8N8 { color: var(--volt) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cTitle__Ct9O9 { font-family: var(--font-display) !important; font-size: 28px !important; font-style: italic !important; text-transform: uppercase !important; font-weight: 900 !important; letter-spacing: -0.05em !important; line-height: 2 !important; color: #ffffff !important; transition: color 0.7s var(--expo) !important; text-align: left !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardInner__Ci8D8:hover .ZoomScroll_cTitle__Ct9O9 { color: var(--volt) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cBottom__Cb0P0 { position: relative !important; z-index: 20 !important; display: flex !important; flex-direction: column !important; gap: 24px !important; padding-top: clamp(20px, 3vh, 32px) !important; border-top: 1px solid rgba(255,255,255,0.05) !important; flex: 1 1 auto !important; transform: translateZ(60px) !important; transition: transform 0.5s ease !important; text-align: left !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cBody__Cb1Q1 { font-family: var(--font-body) !important; font-size: 32px !important; line-height: 38px !important; font-weight: 500 !important; color: rgba(255,255,255,0.4) !important; flex: 1 1 auto !important; transition: color 0.7s var(--expo) !important; text-align: left !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardInner__Ci8D8:hover .ZoomScroll_cBody__Cb1Q1 { color: rgba(255,255,255,0.9) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cArrow__Ca2R2 { align-self: flex-end !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 64px !important; height: 64px !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #ffffff !important; transition: border-color 0.7s var(--expo), background-color 0.7s var(--expo), color 0.7s var(--expo), transform 0.7s var(--expo) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardInner__Ci8D8:hover .ZoomScroll_cArrow__Ca2R2 { border-color: var(--volt) !important; background-color: var(--volt) !important; color: #000000 !important; transform: rotate(-45deg) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cCta__Cc4R4 { position: relative !important; z-index: 20 !important; font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: var(--volt) !important; padding-top: 16px !important; border-top: 1px solid rgba(206,255,0,0.15) !important; text-align: left !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cFlare__Cf3S3 { position: absolute !important; bottom: -5rem !important; right: -5rem !important; width: 240px !important; height: 240px !important; background: rgba(206,255,0,0.1) !important; border-radius: 50% !important; filter: blur(100px) !important; pointer-events: none !important; z-index: 0 !important; transition: opacity 0.7s ease, transform 0.7s ease !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardInner__Ci8D8:hover .ZoomScroll_cFlare__Cf3S3 { opacity: 0.25 !important; transform: scale(1.2) translate(-10px,-10px) !important; } /* ═══ ENTRY ANIMATION CLASSES ═══ */ #ZoomScroll_root__Zm9X4 .ZoomScroll_animIn__Ai6R6.ZoomScroll_slideUp__Su7S7 { opacity: 0 !important; transform: translateY(80px) !important; transition: opacity 1.5s var(--expo), transform 1.5s var(--expo) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_animIn__Ai6R6.ZoomScroll_slideUp__Su7S7.ZoomScroll_animated__An5B5 { opacity: 1 !important; transform: translateY(0) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_animIn__Ai6R6.ZoomScroll_scaleIn__Si2X2 { opacity: 0 !important; transform: scaleX(0) !important; transform-origin: left !important; transition: opacity 1.2s var(--expo), transform 1.2s var(--expo) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_animIn__Ai6R6.ZoomScroll_scaleIn__Si2X2.ZoomScroll_animated__An5B5 { opacity: 1 !important; transform: scaleX(1) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_animIn__Ai6R6.ZoomScroll_fadeBlur__Fb4Z4 { opacity: 0 !important; filter: blur(10px) !important; transition: opacity 1.2s var(--expo) 0.15s, filter 1.2s var(--expo) 0.15s !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_animIn__Ai6R6.ZoomScroll_fadeBlur__Fb4Z4.ZoomScroll_animated__An5B5 { opacity: 1 !important; filter: blur(0px) !important; } /* ═══ TABLET (768–1023) ═══ */ @media (min-width: 768px) and (max-width: 1023px) { #ZoomScroll_root__Zm9X4 .ZoomScroll_zoomTrack__Zt1T1 { height: 185vh !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsSec__Cs7I7 { padding: 24px 32px 64px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_oneLetter__Ol3E3, #ZoomScroll_root__Zm9X4 .ZoomScroll_placeLetter__Pl4F4 { font-size: 11vw !important; } } /* ═══ DESKTOP OVERRIDES (768px+) ═══ */ @media (min-width: 768px) { #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsSec__Cs7I7 { padding: 32px 48px 80px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardInner__Ci8D8 { min-height: 480px !important; border-radius: 52px !important; padding: 48px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cInternalGlow__Cg9E9 { border-radius: 52px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cSpotlight__Cs4J4 { border-radius: 52px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cArrow__Ca2R2 { width: 96px !important; height: 96px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cBottom__Cb0P0 { flex-direction: row !important; align-items: flex-end !important; justify-content: space-between !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cTitle__Ct9O9 { font-size: 48px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cNumTxt__Ct3I3 { font-size: 16vw !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cTop__Ct5K5 { gap: 32px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHub__Eh1A1 { flex-direction: row !important; align-items: flex-start !important; gap: 48px !important; padding: 40px 0 !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubTitle__Et2B2 { min-width: 140px !important; padding-top: 8px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubList__El3C3 { flex: 1 !important; } } @media (min-width: 1024px) { #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsSec__Cs7I7 { padding: 32px 96px 96px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardInner__Ci8D8 { padding: 64px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cTitle__Ct9O9 { font-size: clamp(32px, 6vw, 48px) !important; } } /* ═══ MOBILE (max-width: 767px) ═══ */ @media (max-width: 767px) { #ZoomScroll_root__Zm9X4 .ZoomScroll_zoomTrack__Zt1T1 { height: 175vh !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsSec__Cs7I7 { padding: 16px 16px 48px !important; } /* ── MOBILE — Evidence Hub type adjustments ────────────────────────── To change the hub TITLE size: edit font-size on .evidenceHubTitle__Et2B2 To change the ITEM LABEL size: edit font-size on .evidenceHubLabel__El6F6 To change the ITEM LABEL height: edit line-height on .evidenceHubLabel__El6F6 To change the NUMBER size: edit font-size on .evidenceHubNum__En5E5 ─────────────────────────────────────────────────────────────────── */ #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubTitle__Et2B2 { font-size: 10px !important; /* ← MOBILE hub title size */ letter-spacing: 0.5em !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubLabel__El6F6 { font-size: 24px !important; /* ← MOBILE label font-size */ line-height: 1.1 !important; /* ← MOBILE label line-height */ } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubNum__En5E5 { font-size: 10px !important; /* ← MOBILE number font-size */ min-width: 22px !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubItem__Ei4D4 { gap: 16px !important; padding: 14px 0 !important; } /* ── MOBILE — Card body & description type adjustments ─────────────── To change card body size: edit font-size on .cBody__Cb1Q1 To change card body height: edit line-height on .cBody__Cb1Q1 To change desc size: edit font-size on .cardsDesc__Cd3Y3 To change desc height: edit line-height on .cardsDesc__Cd3Y3 ─────────────────────────────────────────────────────────────────── */ #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsDesc__Cd3Y3 { font-size: 20px !important; /* ← MOBILE desc font-size */ line-height: 28px !important; /* ← MOBILE desc line-height */ } #ZoomScroll_root__Zm9X4 .ZoomScroll_cBody__Cb1Q1 { font-size: 20px !important; /* ← MOBILE card body font-size */ line-height: 28px !important; /* ← MOBILE card body line-height */ } #ZoomScroll_root__Zm9X4 .ZoomScroll_cTop__Ct5K5, #ZoomScroll_root__Zm9X4 .ZoomScroll_cBottom__Cb0P0 { transform: none !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardInner__Ci8D8 { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(15,22,10,0.55) !important; transform-style: flat !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_cGrain__Cg1G1, #ZoomScroll_root__Zm9X4 .ZoomScroll_cIrid__Ci0F0, #ZoomScroll_root__Zm9X4 .ZoomScroll_cFlare__Cf3S3 { display: none !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_bokehParticle__Bp0C0 { filter: blur(40px) !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_tfHead__Th8A8, #ZoomScroll_root__Zm9X4 .ZoomScroll_tsHead__Ts5G5 { left: 16px !important; right: 16px !important; text-align: center !important; white-space: normal !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_tsHead__Ts5G5 { font-size: clamp(28px, 8vw, 48px) !important; line-height: 1.05 !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_tfHead__Th8A8 { font-size: clamp(28px, 8vw, 48px) !important; line-height: 1.05 !important; } #ZoomScroll_root__Zm9X4 .ZoomScroll_panelFrame__Pf6Y6 { inset: 1.25rem !important; border-radius: 24px !important; } } @media (max-width: 480px) { #ZoomScroll_root__Zm9X4 .ZoomScroll_cardsDesc__Cd3Y3 { font-size: 18px !important; /* ← NARROW MOBILE desc font-size */ line-height: 26px !important; /* ← NARROW MOBILE desc line-height */ } #ZoomScroll_root__Zm9X4 .ZoomScroll_cBody__Cb1Q1 { font-size: 18px !important; /* ← NARROW MOBILE card body font-size */ line-height: 26px !important; /* ← NARROW MOBILE card body line-height */ } #ZoomScroll_root__Zm9X4 .ZoomScroll_evidenceHubLabel__El6F6 { font-size: 20px !important; /* ← NARROW MOBILE label font-size */ line-height: 1.15 !important; /* ← NARROW MOBILE label line-height */ } #ZoomScroll_root__Zm9X4 .ZoomScroll_cardInner__Ci8D8 { min-height: 300px !important; padding: 20px !important; border-radius: 20px !important; } } /* ============================================================ COMMUNITY MODULE — RenderBox CMS Compliant CSS v3 Scope: #Community_root__Cm7X1 CHANGES FROM v2: 1. Badge (.Community_badge__Rn3S7) styles removed entirely — element gone from HTML. 2. .Community_descCard__Hn4D2 glass effect strengthened — background lifted from rgba(0,0,0,0.1) to rgba(10,20,10,0.55), border made visible, backdrop-filter kept. 3. .Community_descWrap__Pb0T5 width widened to match steps block (72rem) so card doesn't feel narrower than the content below it. 4. .Community_descText__Wq8M6 overflow guard added — word-break + overflow-wrap prevent kinetic word spans from escaping the card on any viewport. 5. Mobile pass tightened. ANIMATION PROPERTY RULE (Rule #2.5 Corollary): Any property driven by JS scroll math or class-toggle must have NO !important. Static structural/visual props keep !important to beat CMS overrides. ============================================================ */ /* --- RESET --- */ #Community_root__Cm7X1, #Community_root__Cm7X1 *, #Community_root__Cm7X1 *::before, #Community_root__Cm7X1 *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ============================================================ ROOT SECTION ============================================================ */ #Community_root__Cm7X1 { position: relative !important; width: 100% !important; min-height: 80vh !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; padding: 6rem 0 6rem 0 !important; background: #000000 !important; font-family: lato, system-ui, -apple-system, sans-serif !important; -webkit-font-smoothing: antialiased !important; } @media (min-width: 1024px) { #Community_root__Cm7X1 { padding: 8rem 0 8rem 0 !important; } } /* ============================================================ BACKGROUND LAYER bgWrap is the parallax target — JS drives transform & opacity. filter is static so it keeps !important. transform and opacity must NOT have !important (JS-driven). ============================================================ */ #Community_root__Cm7X1 .Community_bgWrap__Bk4M2 { position: absolute !important; top: -15% !important; left: 0 !important; right: 0 !important; bottom: -15% !important; z-index: 1 !important; filter: grayscale(1) contrast(1.25) !important; transform: translateY(0px) scale(1.1); opacity: 0.2; will-change: transform, opacity; } #Community_root__Cm7X1 .Community_bgImage__Lx8N5 { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-image: url(https://mbbcinsights.ca/files/new/1779398595_ale_DHMEN_0.4x.webp) !important; background-size: cover !important; background-position: center !important; } #Community_root__Cm7X1 .Community_bgGradH__Wy6P9 { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(to right, #000000, transparent, #000000) !important; } #Community_root__Cm7X1 .Community_bgGradV__Qt3R7 { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent, #000000) !important; } /* ============================================================ NOISE TEXTURE ============================================================ */ #Community_root__Cm7X1 .Community_noise__Hn7D4 { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 2 !important; opacity: 0.12 !important; mix-blend-mode: overlay !important; pointer-events: none !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important; background-repeat: repeat !important; background-size: 200px 200px !important; } /* ============================================================ ANIMATED GRID ============================================================ */ #Community_root__Cm7X1 .Community_grid__Cm5J0 { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 2 !important; opacity: 0.05 !important; pointer-events: none !important; background-image: repeating-linear-gradient(0deg, #c6f135 0px, transparent 1px, transparent 80px), repeating-linear-gradient(90deg, #c6f135 0px, transparent 1px, transparent 80px) !important; background-size: 80px 80px !important; } /* ============================================================ CONTENT CONTAINER JS drives translateY float — no !important on transform. opacity permanently 1 via !important (no JS opacity needed). ============================================================ */ #Community_root__Cm7X1 .Community_container__Fx9K6 { position: relative !important; z-index: 10 !important; width: 100% !important; max-width: 1280px !important; margin: 0 auto !important; padding: 4rem 2rem !important; opacity: 1 !important; transform: translateY(0px); will-change: transform; } #Community_root__Cm7X1 .Community_inner__Vp4L8 { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 3rem !important; max-width: 72rem !important; margin: 0 auto !important; } /* ============================================================ HEADLINE - font-family → Great Forest (display font) on headline + all lines - Base lines (0 & 2): plain, no italic, no shadow - Line index 1 ("EVIDENCE"): green accent, italic, offset shadow ============================================================ */ #Community_root__Cm7X1 .Community_headline__Jd9W4 { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; font-family: GreatForest, Georgia, serif !important; font-weight: 900 !important; text-transform: uppercase !important; line-height: 1.5 !important; letter-spacing: -0.04em !important; color: #ffffff !important; } #Community_root__Cm7X1 .Community_lineClip__Dw3H7 { display: block !important; overflow: visible !important; clip-path: inset(-4px -300px 0 -300px) !important; } /* Base state for ALL lines — GreatForest, no accent, no skew, no shadow */ #Community_root__Cm7X1 .Community_line__Aq2F8 { display: block !important; font-family: GreatForest, Georgia, serif !important; font-weight: 900 !important; font-size: clamp(2.5rem, 7.5vw, 5.5rem) !important; font-style: normal !important; color: #ffffff !important; text-shadow: none !important; /* transform & opacity driven by JS drop-in — no !important */ transform: translateY(110%) skewX(-12deg); opacity: 0; transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease; } /* Dropped/visible state — JS adds this class */ #Community_root__Cm7X1 .Community_line__Aq2F8.Community_dropped__Fn6Q9 { transform: translateY(0) skewX(-12deg); opacity: 1; } /* EVIDENCE accent — targets the second lineClip child */ #Community_root__Cm7X1 .Community_lineClip__Dw3H7:nth-child(2) .Community_line__Aq2F8 { font-style: italic !important; color: #c6f135 !important; text-shadow: 6px 6px 0 #4a6741 !important; } /* ============================================================ DESCRIPTION BLOCK Glass card is now clearly visible — lifted background, proper border, full-width containment of kinetic text. ============================================================ */ #Community_root__Cm7X1 .Community_descWrap__Pb0T5 { position: relative !important; width: 100% !important; /* Match inner max-width so card fills the content column */ max-width: 72rem !important; } #Community_root__Cm7X1 .Community_descCard__Hn4D2 { /* Glass effect — dark tinted, clearly distinguishable from bg */ background: rgba(8, 18, 8, 0.62) !important; backdrop-filter: blur(16px) saturate(1.4) !important; -webkit-backdrop-filter: blur(16px) saturate(1.4) !important; /* Visible border with subtle lime tint */ border: 1px solid rgba(198, 241, 53, 0.18) !important; border-radius: 1.25rem !important; padding: 2rem 2.5rem !important; /* Static — no JS animation on this element */ opacity: 1 !important; transform: translateY(0) !important; /* Ensure text never escapes the card */ overflow: hidden !important; width: 100% !important; } /* Lato for body/description text */ #Community_root__Cm7X1 .Community_descText__Wq8M6 { font-family: lato, sans-serif !important; font-size: 1.125rem !important; font-weight: 500 !important; color: rgba(223, 229, 232, 0.92) !important; line-height: 1.7 !important; text-align: left !important; /* Prevent overflow from kinetic word spans */ word-break: break-word !important; overflow-wrap: break-word !important; /* Ensure p fills card width and wraps correctly */ width: 100% !important; display: block !important; } @media (min-width: 768px) { #Community_root__Cm7X1 .Community_descText__Wq8M6 { font-size: 1.25rem !important; } } /* Word spans — kinetic animation removed, text renders statically */ #Community_root__Cm7X1 .Community_kWord__Rw5J3 { display: inline !important; overflow: visible !important; vertical-align: baseline !important; margin-right: 0.25em !important; } #Community_root__Cm7X1 .Community_kInner__Vn9B6 { display: inline !important; transform: none !important; opacity: 1 !important; transition: none !important; } #Community_root__Cm7X1 .Community_kInner__Vn9B6.Community_kVisible__Tq7P0 { transform: none !important; opacity: 1 !important; } #Community_root__Cm7X1 .Community_descFooter__Ck3X0 { display: flex !important; align-items: center !important; gap: 1rem !important; margin-top: 1.5rem !important; justify-content: flex-start !important; opacity: 1 !important; transform: translateX(0) !important; } #Community_root__Cm7X1 .Community_descLine__Bv6N4 { height: 1px !important; width: 2rem !important; background: #c6f135 !important; flex-shrink: 0 !important; } #Community_root__Cm7X1 .Community_descLabel__Gt5P7 { font-family: "Courier New", Courier, monospace !important; font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; color: #c6f135 !important; } /* ============================================================ STEP PATHWAY BLOCK 3-step horizontal layout on desktop, vertical stack on mobile. Each step: numbered circle + label + title. Dividers between steps. ============================================================ */ #Community_root__Cm7X1 .Community_steps__Sp1K3 { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; max-width: 72rem !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 1rem !important; background: rgba(0, 0, 0, 0.15) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; overflow: hidden !important; } @media (min-width: 768px) { #Community_root__Cm7X1 .Community_steps__Sp1K3 { flex-direction: row !important; align-items: stretch !important; } } /* Individual step */ #Community_root__Cm7X1 .Community_step__St1A1 { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 1rem !important; padding: 1.5rem !important; flex: 1 !important; opacity: 1 !important; transform: translateY(0) !important; } @media (min-width: 768px) { #Community_root__Cm7X1 .Community_step__St1A1 { flex-direction: column !important; align-items: flex-start !important; padding: 2.5rem 2.25rem !important; gap: 1.25rem !important; } } /* Number circle */ #Community_root__Cm7X1 .Community_stepNum__Sn1B2 { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 3rem !important; height: 3rem !important; border-radius: 9999px !important; border: 1.5px solid #c6f135 !important; background: rgba(198, 241, 53, 0.07) !important; } @media (min-width: 768px) { #Community_root__Cm7X1 .Community_stepNum__Sn1B2 { width: 3.5rem !important; height: 3.5rem !important; } } #Community_root__Cm7X1 .Community_stepNumText__Sx1C3 { font-family: "Courier New", Courier, monospace !important; font-size: 0.9rem !important; font-weight: 700 !important; color: #c6f135 !important; line-height: 1 !important; letter-spacing: 0.05em !important; } /* Step body */ #Community_root__Cm7X1 .Community_stepBody__Sb1D4 { display: flex !important; flex-direction: column !important; gap: 0.25rem !important; text-align: left !important; } /* Step label (e.g. "Step 01") */ #Community_root__Cm7X1 .Community_stepLabel__Sl1E5 { font-family: "Courier New", Courier, monospace !important; font-size: 0.65rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.2em !important; color: rgba(198, 241, 53, 0.6) !important; line-height: 1 !important; } /* Step title */ #Community_root__Cm7X1 .Community_stepTitle__St1F6 { font-family: GreatForest, Georgia, serif !important; font-size: clamp(1.1rem, 2.2vw, 1.4rem) !important; font-weight: 900 !important; color: #ffffff !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; text-transform: uppercase !important; } /* Dividers between steps */ #Community_root__Cm7X1 .Community_stepDivider__Sd1G7 { flex-shrink: 0 !important; background: rgba(255, 255, 255, 0.06) !important; } /* Vertical divider on mobile (horizontal stack → horizontal line) */ #Community_root__Cm7X1 .Community_stepDivider__Sd1G7 { width: 100% !important; height: 1px !important; } /* Horizontal divider on desktop (row layout → vertical line) */ @media (min-width: 768px) { #Community_root__Cm7X1 .Community_stepDivider__Sd1G7 { width: 1px !important; height: auto !important; align-self: stretch !important; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 639px) { #Community_root__Cm7X1 { padding: 4rem 0 4rem 0 !important; } #Community_root__Cm7X1 .Community_container__Fx9K6 { padding: 0 1.25rem !important; } #Community_root__Cm7X1 .Community_inner__Vp4L8 { gap: 2rem !important; } #Community_root__Cm7X1 .Community_descCard__Hn4D2 { padding: 1.5rem 1.25rem !important; } #Community_root__Cm7X1 .Community_descText__Wq8M6 { font-size: 1rem !important; } #Community_root__Cm7X1 .Community_steps__Sp1K3 { max-width: 100% !important; } #Community_root__Cm7X1 .Community_step__St1A1 { padding: 1.25rem !important; } #Community_root__Cm7X1 .Community_stepTitle__St1F6 { font-size: 1.05rem !important; } } @media (min-width: 640px) and (max-width: 1023px) { #Community_root__Cm7X1 .Community_stepTitle__St1F6 { font-size: 1.15rem !important; } #Community_root__Cm7X1 .Community_descCard__Hn4D2 { padding: 1.75rem 2rem !important; } } /* ============================================================ HUB TEASE MODULE v4 — RenderBox + Mobile Optimized Scoped entirely under #HubTeaseModule_root__Ht3M9 All critical properties use !important (RenderBox Rule #1 & #2) No position:fixed anywhere (RenderBox Rule #7) No inline !important in JS (RenderBox Rule #2.5) ============================================================ */ /* ── RESET ─────────────────────────────────────────────────── */ #HubTeaseModule_root__Ht3M9, #HubTeaseModule_root__Ht3M9 *, #HubTeaseModule_root__Ht3M9 *::before, #HubTeaseModule_root__Ht3M9 *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ── ROOT CONTAINER ────────────────────────────────────────── */ #HubTeaseModule_root__Ht3M9 { position: relative !important; width: 100% !important; min-height: 110svh !important; overflow: hidden !important; background: #000000 !important; padding: 5rem 0 !important; border-top: 1px solid rgba(255,255,255,0.05) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; font-family: greatforest, Lato, cursive !important; -webkit-font-smoothing: antialiased !important; display: flex !important; align-items: center !important; isolation: isolate !important; } @media (min-width: 640px) { #HubTeaseModule_root__Ht3M9 { padding: 7rem 0 !important; } } @media (min-width: 1024px) { #HubTeaseModule_root__Ht3M9 { padding: 8rem 0 !important; } } /* ── FULL-BLEED PARALLAX MTB BACKDROP ────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_bgScene__Bs1A2 { position: absolute !important; top: -10% !important; left: -2% !important; right: -2% !important; bottom: -10% !important; width: 104% !important; height: 120% !important; pointer-events: none !important; z-index: 2 !important; will-change: transform; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_bgScene__Bs1A2::before { content: !important; position: absolute !important; inset: 0 !important; background-image: url(https://mbbcinsights.ca/files/new/1779385320_.600x600p57x39.webp) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; filter: grayscale(100%) contrast(1.1) brightness(0.85) !important; opacity: 0.45 !important; transform: scale(1.08) !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_bgScene__Bs1A2::after { content: !important; position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse at center, transparent 10%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.80) 100%), linear-gradient(180deg, rgba(0,0,0,0.40), transparent 30%, transparent 70%, rgba(0,0,0,0.50)) !important; } /* Mobile: FULL MOBILE OPTIMIZATION for photo */ @media (max-width: 639px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_bgScene__Bs1A2 { top: 0 !important; bottom: 0 !important; height: 100% !important; background-size: cover !important; background-position: 50% center !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_bgScene__Bs1A2::before { opacity: 0.50 !important; background-position: 50% center !important; transform: scale(1.1) !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_bgScene__Bs1A2::after { background: radial-gradient(ellipse at center, transparent 15%, rgba(0,0,0,0.28) 70%, rgba(0,0,0,0.75) 100%), linear-gradient(180deg, rgba(0,0,0,0.38), transparent 30%, transparent 70%, rgba(0,0,0,0.45)) !important; } } /* ── GLASS BG ─────────────────────────────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_glassBg__Qw5N8 { position: absolute !important; inset: 0 !important; background: rgba(0,0,0,0.08) !important; pointer-events: none !important; z-index: 3 !important; } /* ── GRID / NOISE LAYERS ────────────────────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_tacticalGrid__Zr4L6 { position: absolute !important; inset: 0 !important; opacity: 0.045 !important; pointer-events: none !important; z-index: 3 !important; will-change: transform; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_gridPattern__Yt2K9 { position: absolute !important; inset: 0 !important; background-image: linear-gradient(rgba(158,243,0,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(158,243,0,0.12) 1px, transparent 1px) !important; background-size: 140px 140px !important; } @media (max-width: 639px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_gridPattern__Yt2K9 { background-size: 80px 80px !important; } } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_noise__Bm8X3 { position: absolute !important; inset: 0 !important; background-image: url(https://mbbcinsights.ca/files/new/1779385320_.600x600p57x39.webp) !important; opacity: 0.025 !important; pointer-events: none !important; z-index: 3 !important; } /* ── VOLT ACCENT ORBS ───────────────────────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_accentShape__Vn1J7 { position: absolute !important; border-radius: 50% !important; pointer-events: none !important; z-index: 3 !important; will-change: transform; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_accentLeft__Pq9R4 { top: 10% !important; left: -8rem !important; width: 500px !important; height: 500px !important; background: rgba(158,243,0,0.10) !important; filter: blur(120px) !important; opacity: 0.55 !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_accentRight__Ws6T2 { bottom: 10% !important; right: -8rem !important; width: 600px !important; height: 600px !important; background: rgba(158,243,0,0.07) !important; filter: blur(150px) !important; opacity: 0.45 !important; } @media (max-width: 639px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_accentLeft__Pq9R4 { width: 280px !important; height: 280px !important; left: -4rem !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_accentRight__Ws6T2 { width: 320px !important; height: 320px !important; right: -4rem !important; } } /* Arch accent */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_archAccent__Bc3E5 { position: absolute !important; top: 0 !important; right: 0 !important; width: 33% !important; height: 100% !important; pointer-events: none !important; overflow: hidden !important; opacity: 0.08 !important; z-index: 3 !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_accentBorder__Df7G1 { position: absolute !important; top: 50% !important; left: 50% !important; width: 150% !important; height: 150% !important; transform: translate(-50%, -50%) rotate(45deg) !important; border: 80px solid rgba(255,255,255,0.04) !important; } /* ── CONTENT WRAPPER ────────────────────────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_content__Xy2Z5 { position: relative !important; z-index: 10 !important; width: 100% !important; max-width: 1400px !important; margin: 0 auto !important; padding: 0 1.25rem !important; } @media (min-width: 480px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_content__Xy2Z5 { padding: 0 2rem !important; } } @media (min-width: 640px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_content__Xy2Z5 { padding: 0 2.5rem !important; } } @media (min-width: 1024px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_content__Xy2Z5 { padding: 0 4rem !important; } } /* ══════════════════════════════════════════════════════════════ MAIN GRID — mobile: stacked (headline first), desktop: 2-col ══════════════════════════════════════════════════════════════ */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_grid__Ab3C4 { display: grid !important; grid-template-columns: 1fr !important; gap: 2.25rem !important; align-items: stretch !important; } @media (min-width: 1024px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_grid__Ab3C4 { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important; column-gap: 4rem !important; align-items: stretch !important; } } /* ── LEFT COL: glass boxes ──────────────────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoCol__Op5Q2 { display: flex !important; flex-direction: column !important; gap: 1.25rem !important; justify-content: space-between !important; min-width: 0 !important; order: 2 !important; } @media (min-width: 640px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoCol__Op5Q2 { gap: 1.5rem !important; } } @media (min-width: 1024px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoCol__Op5Q2 { order: 1 !important; gap: 2rem !important; } } /* ── RIGHT COL: kinetic headline ────────────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headlineCol__De5F6 { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; min-width: 0 !important; order: 1 !important; } @media (min-width: 1024px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headlineCol__De5F6 { order: 2 !important; justify-content: space-between !important; } } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headline__Mn4O7 { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; flex: 1 !important; gap: 2.5rem !important; } /* ── HEADLINE WRAPPER ──────────────────────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_layeredHeading__Pq7R9 { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; gap: 2.5rem !important; margin-left: 24px !important; } /* ══════════════════════════════════════════════════════════════ HEADLINE LINES ══════════════════════════════════════════════════════════════ */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headingLine__St2U5 { display: block !important; white-space: nowrap !important; font-family: greatforest, Lato, cursive !important; font-weight: 900 !important; font-size: clamp(2.25rem, 9vw, 7rem) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; font-style: italic !important; color: #ffffff !important; text-transform: uppercase !important; text-shadow: 8px 8px 0 #4a7c1a, 10px 10px 0 rgba(74,124,26,0.6), 0 0 60px rgba(158,243,0,0.12) !important; user-select: none !important; position: relative !important; z-index: 5 !important; transform: skewX(-10deg) !important; transform-origin: left center !important; animation: hubteaseLineBreath 7s ease-in-out infinite !important; overflow: visible !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headingLine__St2U5:nth-of-type(2) { animation-delay: -2.5s !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headingLine__St2U5:nth-of-type(3) { animation-delay: -4.8s !important; } @keyframes hubteaseLineBreath { 0%, 100% { transform: skewX(-10deg) translateY(0); } 50% { transform: skewX(-10deg) translateY(-5px); } } /* ── Mobile headline sizing ─────────────────────────────────── */ @media (max-width: 480px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headingLine__St2U5 { font-size: clamp(1.75rem, 14vw, 3.5rem) !important; text-shadow: 5px 5px 0 #4a7c1a, 7px 7px 0 rgba(74,124,26,0.55), 0 0 40px rgba(158,243,0,0.10) !important; } } @media (min-width: 481px) and (max-width: 767px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headingLine__St2U5 { font-size: clamp(3.5rem, 13vw, 6rem) !important; } } @media (min-width: 768px) and (max-width: 1023px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headingLine__St2U5 { font-size: clamp(3rem, 8vw, 6rem) !important; } } /* ── PER-CHAR KINETIC TYPOGRAPHY ─────────────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headingChar__Hc1 { display: inline-block !important; transform-origin: 50% 100% !important; animation: hubteaseDropChar 0.9s cubic-bezier(0.19, 1, 0.22, 1) calc(var(--w-delay, 0s) + var(--i, 0) * 42ms) backwards, hubteaseCharWave 4.8s ease-in-out calc(2.2s + var(--i, 0) * 95ms) infinite; } @keyframes hubteaseDropChar { from { transform: translateY(120%) rotateX(-80deg) skewX(-5deg); opacity: 0; } to { transform: translateY(0) rotateX(0) skewX(0deg); opacity: 1; } } @keyframes hubteaseCharWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Reduced-motion */ @media (prefers-reduced-motion: reduce) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headingLine__St2U5, #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headingChar__Hc1, #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoBox__Uv9W1 { animation: none !important; } } /* ══════════════════════════════════════════════════════════════ GLASS INFO BOXES — HEIGHTS INCREASED FOR 18px FONT (Issue #3) ══════════════════════════════════════════════════════════════ */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoBox__Uv9W1 { position: relative !important; background: rgba(255,255,255,0.045) !important; backdrop-filter: blur(60px) saturate(140%) !important; -webkit-backdrop-filter: blur(60px) saturate(140%) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 1.125rem !important; padding: 2.5rem 2.25rem !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.08) !important; overflow: hidden !important; width: 100% !important; cursor: pointer !important; z-index: 5 !important; flex: 1 !important; transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important; animation: hubteaseBoxFloat 8s ease-in-out infinite !important; min-height: 320px !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoBox__Uv9W1:nth-of-type(2) { animation-delay: -4.2s !important; } @keyframes hubteaseBoxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* FIXED: Issue #2 — desktop-only 110% width override */ @media (min-width: 1024px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoBox__Uv9W1 { width: 110% !important; } } /* Hover — desktop only */ @media (hover: hover) and (pointer: fine) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoBox__Uv9W1:hover { background: rgba(158,243,0,0.05) !important; border-color: rgba(158,243,0,0.38) !important; box-shadow: 0 32px 60px -16px rgba(124,191,0,0.25), 0 25px 50px -12px rgba(0,0,0,0.55), inset 0 1px 0 rgba(158,243,0,0.22) !important; animation-play-state: paused !important; transform: translateY(-10px) !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoBox__Uv9W1:hover .HubTeaseModule_boxTitle__Vw5X9 { color: #9EF300 !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoBox__Uv9W1:hover .HubTeaseModule_iconBadge__Mn9O3 { transform: scale(1.10) !important; background: rgba(158,243,0,0.20) !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoBox__Uv9W1:hover::before { background: linear-gradient(to right, transparent, #9EF300, transparent) !important; } } /* Glass highlight stripe */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoBox__Uv9W1::before { content: !important; position: absolute !important; top: 0 !important; left: 1.25rem !important; right: 1.25rem !important; height: 1px !important; background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent) !important; pointer-events: none !important; z-index: 2 !important; transition: background 0.4s ease !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoBox__Uv9W1::after { content: !important; position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, rgba(255,255,255,0.055), transparent 42%) !important; pointer-events: none !important; z-index: 1 !important; } /* ── BOX INNER LAYOUT ───────────────────────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_boxContent__Gh5I8 { position: relative !important; z-index: 3 !important; display: flex !important; flex-direction: column !important; gap: 1.25rem !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_boxHeader__Jk7L1 { display: flex !important; align-items: flex-start !important; gap: 0.875rem !important; } /* ── ICON BADGE ─────────────────────────────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_iconBadge__Mn9O3 { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 2.5rem !important; height: 2.5rem !important; background: rgba(158,243,0,0.10) !important; border: 1px solid rgba(158,243,0,0.28) !important; border-radius: 0.625rem !important; transition: transform 0.45s ease, background 0.45s ease !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_badgeIcon__Pq1R5 { width: 1.15rem !important; height: 1.15rem !important; color: #9EF300 !important; } /* ── META LABEL ─────────────────────────────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_metaLabel__St3U7 { display: block !important; font-family: lato ;, monospace !important; font-size: 0.68rem !important; color: #9EF300 !important; text-transform: uppercase !important; letter-spacing: 0.18em !important; font-weight: 700 !important; margin-bottom: 0.3rem !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_metaLabel__St3U7:empty { display: none !important; } /* ── BOX TITLE — FIXED: Issue #3 — larger to pair with 18px body */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_boxTitle__Vw5X9 { font-family: greatforest, Lato, cursive !important; font-style: italic !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.01em !important; color: #ffffff !important; font-size: clamp(1.5rem, 3.5vw, 2rem) !important; line-height: 1.3 !important; transition: color 0.4s ease !important; } /* ── BOX DESCRIPTION — FIXED: Issue #3 — 18px desktop, 16px tablet, 15px mobile */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_boxDesc__Yz7A1 { font-family: lato , system-ui, sans-serif !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.7 !important; letter-spacing: 0.06em !important; color: rgba(255,255,255,0.70) !important; text-transform: uppercase !important; text-align: left !important; word-spacing: 0.04em !important; } @media (max-width: 1023px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_boxDesc__Yz7A1 { font-size: 16px !important; line-height: 1.65 !important; } } @media (max-width: 639px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_boxDesc__Yz7A1 { font-size: 15px !important; line-height: 1.6 !important; letter-spacing: 0.04em !important; } } /* ── Hide legacy elements ───────────────────────────────────── */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_heroPortal__Lk5H8 { display: none !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_ctaBtn__Yz3A6 { display: none !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_boxIconBg__Ab7C9 { display: none !important; } /* ══════════════════════════════════════════════════════════════ MOBILE — max-width: 639px — ENHANCED FOR 18px FONT + IMAGE ══════════════════════════════════════════════════════════════ */ @media (max-width: 639px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_grid__Ab3C4 { gap: 2rem !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_headlineCol__De5F6 { justify-content: flex-start !important; align-items: flex-start !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_layeredHeading__Pq7R9 { gap: 0.35rem !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoBox__Uv9W1 { padding: 1.75rem 1.375rem !important; border-radius: 0.9rem !important; min-height: 280px !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_boxContent__Gh5I8 { gap: 1rem !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_boxDesc__Yz7A1 { letter-spacing: 0.06em !important; line-height: 1.75 !important; } /* MOBILE IMAGE OPTIMIZATION */ #HubTeaseModule_root__Ht3M9 .HubTeaseModule_bgScene__Bs1A2 { height: 100svh !important; } #HubTeaseModule_root__Ht3M9 .HubTeaseModule_bgScene__Bs1A2::before { background-size: cover !important; background-position: 50% 30% !important; transform: scale(1.15) !important; } } /* Tablet adjustments for boxes — FIXED: Issue #3 */ @media (max-width: 1023px) { #HubTeaseModule_root__Ht3M9 .HubTeaseModule_infoBox__Uv9W1 { padding: 2.25rem 1.75rem !important; min-height: 300px !important; } } /* ============================================================ ADVOCACY SPLIT MODULE — nitas, scoped & fixed Scope: #AdvSplit_root__As9X1 ALL source properties preserved. Bug-fix diff documented. ============================================================ */ /* --- RESET --- */ #AdvSplit_root__As9X1, #AdvSplit_root__As9X1 *, #AdvSplit_root__As9X1 *::before, #AdvSplit_root__As9X1 *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } #AdvSplit_root__As9X1 { position: relative !important; width: 100% !important; min-height: 100vh !important; display: flex !important; flex-direction: column !important; background: #000000 !important; overflow: hidden !important; border-top: 1px solid rgba(255,255,255,0.05) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; font-family: "Lato", lato, sans-serif !important; -webkit-font-smoothing: antialiased !important; } /* ── MOBILE-FIRST BASE STYLES ───────────────────────────── */ #AdvSplit_root__As9X1 .AdvSplit_panel__Pn7D8 { position: relative !important; flex: 1 !important; overflow: hidden !important; outline: none !important; cursor: default !important; min-height: 60vh !important; } #AdvSplit_root__As9X1 .AdvSplit_panelLeft__Pl8E9 { border-bottom: 1px solid rgba(255,255,255,0.10) !important; } #AdvSplit_root__As9X1 .AdvSplit_contentL__Cl2I3, #AdvSplit_root__As9X1 .AdvSplit_contentR__Cr3G4 { position: relative !important; z-index: 20 !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; padding: 2rem !important; } #AdvSplit_root__As9X1 .AdvSplit_contentR__Cr3G4 { align-items: flex-end !important; text-align: right !important; } #AdvSplit_root__As9X1 .AdvSplit_headline__Hl7N8 { display: flex !important; flex-direction: column !important; align-items: flex-start !important; font-family: GreatForest, Lato, cursive !important; font-weight: 800 !important; text-transform: uppercase !important; line-height: 1.2 !important; letter-spacing: -0.04em !important; color: #ffffff !important; margin-bottom: 1.5rem !important; } #AdvSplit_root__As9X1 .AdvSplit_headlineRight__Hr6J7 { align-items: flex-end !important; } #AdvSplit_root__As9X1 .AdvSplit_hLine__Hl9P0 { display: block !important; font-family: GreatForest, Lato, cursive !important; font-size: clamp(1rem, 6vw, 2rem) !important; font-style: italic !important; transform-origin: left center !important; text-shadow: 6px 6px 0 #4a6741 !important; transform: translateY(0) skewX(-12deg); opacity: 1; transition: transform 1s cubic-bezier(0.19,1,0.22,1), opacity 0.5s ease; white-space: nowrap !important; line-height: 1.5 !important; } #AdvSplit_root__As9X1 .AdvSplit_headlineRight__Hr6J7 .AdvSplit_hLine__Hl9P0 { transform-origin: right center !important; } #AdvSplit_root__As9X1 .AdvSplit_cardPara__Cp1A2 { font-family: "Lato", lato, sans-serif !important; font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important; font-weight: 500 !important; line-height: 1.65 !important; color: rgba(255,255,255,0.75) !important; } #AdvSplit_root__As9X1 .AdvSplit_cardH3__Ch7T8 { font-family: "Lato", lato, sans-serif !important; font-weight: 700 !important; font-size: clamp(1.1rem, 4vw, 2rem) !important; text-transform: uppercase !important; letter-spacing: -0.02em !important; color: rgba(255,255,255,0.90) !important; line-height: 1.2 !important; } #AdvSplit_root__As9X1 .AdvSplit_cardH4__Ch8U9 { font-family: GreatForest, Lato, cursive !important; font-weight: 800 !important; font-size: clamp(1rem, 3vw, 1.6rem) !important; text-transform: uppercase !important; letter-spacing: -0.02em !important; color: #9EF300 !important; line-height: 1.35 !important; } #AdvSplit_root__As9X1 .AdvSplit_cta__Ct9V0 { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem !important; background: #9EF300 !important; color: #000000 !important; padding: 1.25rem 2rem !important; border-radius: 0.75rem !important; font-family: "Lato", lato, sans-serif !important; font-weight: 900 !important; font-size: clamp(0.9rem, 3vw, 1.5rem) !important; text-transform: uppercase !important; letter-spacing: -0.03em !important; text-decoration: none !important; overflow: hidden !important; box-shadow: 0 20px 40px -12px rgba(124,191,0,0.40) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } #AdvSplit_root__As9X1 .AdvSplit_cta__Ct9V0:hover { transform: scale(1.05) !important; box-shadow: 0 28px 50px -10px rgba(124,191,0,0.55) !important; } #AdvSplit_root__As9X1 .AdvSplit_ctaArrow__Ca4Y5 { position: relative !important; z-index: 1 !important; flex-shrink: 0 !important; width: 2rem !important; height: 2rem !important; transition: transform 0.3s ease !important; } #AdvSplit_root__As9X1 .AdvSplit_ctaLeft__Ctl1:hover .AdvSplit_ctaArrow__Ca4Y5 { transform: translateX(0.75rem) !important; } #AdvSplit_root__As9X1 .AdvSplit_ctaArrowRev__Car4 { transform: rotate(180deg) !important; } #AdvSplit_root__As9X1 .AdvSplit_ctaRight__Ctr3:hover .AdvSplit_ctaArrowRev__Car4 { transform: rotate(180deg) translateX(0.75rem) !important; } /* ── DESKTOP OVERRIDES (1024px+) ────────────────────────── */ @media (min-width: 1024px) { #AdvSplit_root__As9X1 { flex-direction: row !important; } #AdvSplit_root__As9X1 .AdvSplit_panel__Pn7D8 { min-height: 100vh !important; } #AdvSplit_root__As9X1 .AdvSplit_panelLeft__Pl8E9 { border-bottom: none !important; border-right: 1px solid rgba(255,255,255,0.10) !important; } #AdvSplit_root__As9X1 .AdvSplit_contentL__Cl2I3, #AdvSplit_root__As9X1 .AdvSplit_contentR__Cr3G4 { padding: 6rem !important; } #AdvSplit_root__As9X1 .AdvSplit_headline__Hl7N8 { margin-bottom: 2rem !important; } #AdvSplit_root__As9X1 .AdvSplit_hLine__Hl9P0 { font-size: clamp(2.5rem, 9vw, 6rem) !important; text-shadow: 10px 10px 0 #4a6741 !important; } #AdvSplit_root__As9X1 .AdvSplit_cardPara__Cp1A2 { font-size: clamp(0.95rem, 1.2vw, 1.1rem) !important; } #AdvSplit_root__As9X1 .AdvSplit_cardH3__Ch7T8 { font-size: clamp(1.25rem, 3vw, 2rem) !important; } #AdvSplit_root__As9X1 .AdvSplit_cardH4__Ch8U9 { font-size: clamp(1.1rem, 2.2vw, 1.6rem) !important; } #AdvSplit_root__As9X1 .AdvSplit_cta__Ct9V0 { padding: 1.5rem 3rem !important; font-size: clamp(1rem, 2vw, 1.5rem) !important; } #AdvSplit_root__As9X1 .AdvSplit_ctaArrow__Ca4Y5 { width: 2.5rem !important; height: 2.5rem !important; } } /* ── GLOBAL GLASS ENVIRONMENT ──────────────────────────── */ #AdvSplit_root__As9X1 .AdvSplit_glassEnv__Ge3Z4 { position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 20 !important; transform: translateY(0px); will-change: transform; } #AdvSplit_root__As9X1 .AdvSplit_glassBlur__Gb4A5 { position: absolute !important; inset: 0 !important; background: rgba(255,255,255,0.01) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; } #AdvSplit_root__As9X1 .AdvSplit_glassGrid__Gg5B6 { position: absolute !important; inset: 0 !important; opacity: 0.03 !important; background-image: linear-gradient(rgba(124,191,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(124,191,0,0.05) 1px, transparent 1px) !important; background-size: 160px 160px !important; } #AdvSplit_root__As9X1 .AdvSplit_glassNoise__Gn6C7 { position: absolute !important; inset: 0 !important; opacity: 0.20 !important; background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") !important; background-size: 200px 200px !important; background-repeat: repeat !important; } /* ── BACKGROUND IMAGES ─────────────────────────────────── */ #AdvSplit_root__As9X1 .AdvSplit_imgWrap__Iw9F0 { position: absolute !important; inset: 0 !important; overflow: hidden !important; z-index: 0 !important; } #AdvSplit_root__As9X1 .AdvSplit_bgImg__Bi0G1 { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; filter: grayscale(100%) !important; opacity: 0.30; transform: scale(1) translateY(0px); transition: opacity 1s ease, transform 1s ease, filter 1s ease; will-change: transform, opacity; } #AdvSplit_root__As9X1 .AdvSplit_bgImg__Bi0G1.AdvSplit_imgHovered__Ih5 { opacity: 0.70; transform: scale(1.10) translateY(var(--img-parallax-y, 0px)); filter: grayscale(0%) !important; } #AdvSplit_root__As9X1 .AdvSplit_bgImg__Bi0G1.AdvSplit_imgDimmed__Id6 { opacity: 0.30; transform: scale(1.00) translateY(var(--img-parallax-y, 0px)); } /* ── GRADIENT OVERLAYS ─────────────────────────────────── */ #AdvSplit_root__As9X1 .AdvSplit_gradL__Gl1H2 { position: absolute !important; inset: 0 !important; z-index: 10 !important; background: linear-gradient(to right, rgba(0,0,0,0.80), rgba(0,0,0,0.40), transparent) !important; backdrop-filter: blur(1px) !important; -webkit-backdrop-filter: blur(1px) !important; } #AdvSplit_root__As9X1 .AdvSplit_gradR__Gr2F3 { position: absolute !important; inset: 0 !important; z-index: 10 !important; background: linear-gradient(to left, rgba(0,0,0,0.80), rgba(0,0,0,0.40), transparent) !important; backdrop-filter: blur(1px) !important; -webkit-backdrop-filter: blur(1px) !important; } /* ── SECTION ENTER & ANIMATION STATES ──────────────────── */ #AdvSplit_root__As9X1 .AdvSplit_enter__En3J4 { display: flex !important; flex-direction: column !important; opacity: 0 !important; transform: translateY(30px) !important; transition: opacity 0.8s cubic-bezier(0.19,1,0.22,1), transform 0.8s cubic-bezier(0.19,1,0.22,1), filter 0.7s ease !important; } #AdvSplit_root__As9X1 .AdvSplit_enterLeft__El4K5 { align-items: flex-start !important; } #AdvSplit_root__As9X1 .AdvSplit_enterRight__Er4H5 { align-items: flex-end !important; } #AdvSplit_root__As9X1 .AdvSplit_enter__En3J4.AdvSplit_visible__Vi7 { opacity: 1 !important; transform: translateY(0) !important; } #AdvSplit_root__As9X1 .AdvSplit_enter__En3J4.AdvSplit_blurred__Bl8 { filter: blur(6px) !important; opacity: 0.20 !important; transform: scale(0.95) !important; } /* ── HEADLINE LINE ANIMATION ───────────────────────────── */ #AdvSplit_root__As9X1 .AdvSplit_lineClip__Lc8O9 { display: block !important; overflow: hidden !important; perspective: 1000px !important; } #AdvSplit_root__As9X1 .AdvSplit_hLine__Hl9P0 { transform: translateY(110%) skewX(-12deg) !important; opacity: 0 !important; } #AdvSplit_root__As9X1 .AdvSplit_hLine__Hl9P0.AdvSplit_dropped__Dr9 { transform: translateY(0) skewX(-12deg) !important; opacity: 1 !important; } /* ── CHARACTER-LEVEL TYPOGRAPHY ANIMATION ──────────────── */ #AdvSplit_root__As9X1 .AdvSplit_hChar__Hc1 { display: inline-block !important; transform: translateY(110%) rotateX(-90deg) !important; opacity: 0 !important; transition: transform 0.7s cubic-bezier(0.19,1,0.22,1), opacity 0.4s ease !important; transform-origin: 50% 100% !important; } #AdvSplit_root__As9X1 .AdvSplit_hChar__Hc1.AdvSplit_charIn__Ci2 { transform: translateY(0) rotateX(0) !important; opacity: 1 !important; } #AdvSplit_root__As9X1 .AdvSplit_hSpace__Hs3 { display: inline-block !important; width: 0.3em !important; } /* ── GLASS CARD ────────────────────────────────────────── */ #AdvSplit_root__As9X1 .AdvSplit_voltBar__Vb3R4 { display: none !important; } #AdvSplit_root__As9X1 .AdvSplit_glassCard__Gc0Q1 { position: relative !important; background: rgba(0, 0, 0, 0.55) !important; border: 1px solid rgba(255,255,255,0.10) !important; padding: 2rem !important; border-radius: 1rem !important; overflow: hidden !important; margin-bottom: 2rem !important; max-width: 36rem !important; width: 100% !important; opacity: 0 !important; transform: translateY(40px) !important; transition: transform 0.8s cubic-bezier(0.19,1,0.22,1), opacity 0.8s cubic-bezier(0.19,1,0.22,1) !important; } #AdvSplit_root__As9X1 .AdvSplit_glassCard__Gc0Q1.AdvSplit_cardVisible__Cv0 { opacity: 1 !important; transform: translateY(0) !important; } #AdvSplit_root__As9X1 .AdvSplit_cardBody__Cb6S7 { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } #AdvSplit_root__As9X1 .AdvSplit_cardBodyRight__Cbr0 { align-items: flex-end !important; text-align: right !important; } /* ── CTA BUTTON ANIMATION ──────────────────────────────── */ #AdvSplit_root__As9X1 .AdvSplit_cta__Ct9V0 { opacity: 0 !important; transform: translateY(20px) !important; transition: transform 0.6s cubic-bezier(0.19,1,0.22,1), opacity 0.6s cubic-bezier(0.19,1,0.22,1) !important; } #AdvSplit_root__As9X1 .AdvSplit_cta__Ct9V0.AdvSplit_ctaVisible__Cv1 { opacity: 1 !important; transform: translateY(0) !important; } #AdvSplit_root__As9X1 .AdvSplit_ctaShine__Cs2W3 { position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(to right, transparent, rgba(255,255,255,0.40), transparent) !important; transition: left 1s ease !important; pointer-events: none !important; } #AdvSplit_root__As9X1 .AdvSplit_cta__Ct9V0:hover .AdvSplit_ctaShine__Cs2W3 { left: 100% !important; } #AdvSplit_root__As9X1 .AdvSplit_ctaLabel__Cl3X4 { position: relative !important; z-index: 1 !important; } /* ── CENTER DIVIDER ────────────────────────────────────── */ #AdvSplit_root__As9X1 .AdvSplit_divider__Dv5Z6 { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) translateY(0px); display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1rem !important; z-index: 30 !important; pointer-events: none !important; will-change: transform; } #AdvSplit_root__As9X1 .AdvSplit_divLineTop__Dt6A7 { width: 1px !important; height: 16rem !important; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.40), transparent) !important; } #AdvSplit_root__As9X1 .AdvSplit_divLineBot__Db0D1 { width: 1px !important; height: 16rem !important; background: linear-gradient(to top, transparent, rgba(255,255,255,0.40), transparent) !important; } #AdvSplit_root__As9X1 .AdvSplit_logoMark__Lm9D0 { width: 5rem !important; height: 5rem !important; flex-shrink: 0 !important; display: block !important; } /* ── Mobile: hide divider ── */ @media (max-width: 1023px) { #AdvSplit_root__As9X1 .AdvSplit_divider__Dv5Z6 { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } #AdvSplit_root__As9X1 .AdvSplit_divLineTop__Dt6A7, #AdvSplit_root__As9X1 .AdvSplit_divLineBot__Db0D1, #AdvSplit_root__As9X1 .AdvSplit_logoMark__Lm9D0 { display: none !important; } } /* ── Desktop: ensure divider is visible ── */ @media (min-width: 1024px) { #AdvSplit_root__As9X1 .AdvSplit_divider__Dv5Z6 { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } #AdvSplit_root__As9X1 .AdvSplit_divLineTop__Dt6A7, #AdvSplit_root__As9X1 .AdvSplit_divLineBot__Db0D1, #AdvSplit_root__As9X1 .AdvSplit_logoMark__Lm9D0 { display: block !important; } } #module_footer_section_1{ ; margin-top:3.5vw; justify-content:center; padding-top:2vw; padding-right:4vw; padding-bottom:2vw; padding-left:4vw; border-style:none; border-bottom-width:.020vw; border-color:#d9d9d9; }#module_footer_column_1{ ; justify-content:center; border-style:none; }#module_footer_row_1{ ; justify-content:center; border-style:none; }#module_footer_items_1{ ; cursor:default; width:13vw; height:5vw; font-weight:400; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_1:hover{ ; }#module_footer_row_2{ ; justify-content:center; padding-top:2vw; border-style:none; }#module_footer_items_2{ ; cursor:default; text-align:center; line-height:1.5vw; color:#fff; font-weight:500; font-size:.9vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; margin-bottom:36px; }#module_footer_items_2:hover{ ; }#module_footer_row_3{ ; justify-content:center; border-style:none; }#module_footer_items_3{ ; cursor:default; line-height:2vw; color:#ffffff; font-weight:300; font-size:1vw; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_3:hover{ ; color:#d9c1a3; }#module_footer_items_6{ ; cursor:default; line-height:2vw; color:#ffffff; font-weight:300; font-size:16px; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; margin-left:4vw; }#module_footer_items_6:hover{ ; }#module_footer_items_7{ ; cursor:default; line-height:2vw; color:#ffffff; font-weight:300; font-size:16px; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; margin-left:4vw; }#module_footer_items_7:hover{ ; }#module_footer_section_2{ ; justify-content:center; border-style:none; }#module_footer_row_5{ ; justify-content:center; padding-top:1.5vw; padding-bottom:1.5vw; border-style:none; }#module_footer_items_12{ ; cursor:default; text-align:center; line-height:2vw; color:#ffffff; font-weight:400; font-size:16px; transition-duration:600ms; transition-delay:0ms; transition-timing-function:ease; visibility:visible; opacity:1; border-style:none; }#module_footer_items_12:hover{ ; }#public_footer_main_1{;background-color:#000;background-size:100% 100%;background-repeat:no-repeat;background-position:left;background-attachment:scroll;width:100%;max-width:100%;border-style:none;}#public_footer_main_1:hover{;} #public_footer_main_1{ position:relative; margin-right:auto !important; margin-left:auto !important; overflow:hidden !important; } #public_footer_main_1 > div{ position:relative; z-index:12; } #public_footer_main_1 #public_footer_main_1 .new_admin_layer { position: absolute; width: 100%; height: 100%; z-index: 10; transition: all 600ms ease; background-color: rgba(0,0,0,0); display: flex; right:0; top:0; } #public_footer_main_1 .layer_first_child { width: 100%; } #public_footer_main_1:hover .new_admin_layer { border-radius: 0 !important; background-color: rgba(0,0,0,0); } #msg_footer.msg_footer, #msg_footer_complete.msg_footer{ position: fixed; top: 50px; right: 10px; width: 400px; height: 50px; z-index: 10000; border-radius: 3px; } #msg_footer .d_flex, #msg_footer_complete .d_flex{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 100%; padding: 0 15px; } #msg_footer.green_msg_footer { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; } #msg_footer.red_msg_footer, #msg_footer_complete.red_msg_footer{ background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; } #msg_footer .close_msg, #msg_footer_complete .close_msg{ cursor: pointer; font-size: 25px; padding-right: 15px; } #msg_footer .close_msg:hover, #msg_footer_complete .close_msg:hover{ color: #000; } .border_red{ border: 1px solid #e20000; } footer a{ color: inherit; } .dno{display:none!important;} #body_popup_1,#body_popup_2{ position:fixed; display:flex; text-align:center; top:0; bottom:0; right:0; left:0; z-index:99999; visibility:hidden; opacity: 0; background:rgba(0,0,0,0.5); } #body_popup_1.open-popup,#body_popup_2.open-popup{ visibility:visible; opacity: 1; } #body_popup_1 > div,#body_popup_2 > div{ display:block; background:#fff; padding:10px; margin:auto; transform:translateY(-150px); -webkit-transition:transform .3s;-moz-transition:transform .3s;-ms-transition:transform .3s;-o-transition:transform .3s;transition:transform .3s; text-align:center; border-radius:10px; position:relative; z-index:999999; } #body_popup_1.open-popup > div,#body_popup_1.open-popup > div{ transform:translateY(0); } #body_popup_1 .icon-close-popup{ position:absolute; font-size:30px; height:30px; width:30px; border-radius:50%; color:red; top:-10px; right:-10px; background-color:transparent; z-index:9999; } #body_popup_1 .icon-close-popup i{ position:absolute; top:0; right:0; } #body_popup_1 .container-html{ height:100%; overflow:auto; max-height:90vh; } #body_popup_1 .container-html::-webkit-scrollbar{ width:5px; height:100%; } #body_popup_1 .container-html::-webkit-scrollbar-track{ background-color:transparent; } #body_popup_1 .container-html::-webkit-scrollbar-thumb{ background-color:#777; border-radius:20%; } #body_popup_1 .icon-close-popup{ color:#fff; top:0; right:0; } #module_waiting_box{ position:fixed; background:rgba(256,256,256,0.8); width:100%; height:100%; -webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s; top:0; right:0; opacity:0; z-index:9999999999999; visibility:hidden; } #module_waiting_box.show-waiting{ visibility:visible; opacity:1; } #module_waiting_box .spinner { margin: 100px auto 0; width: 70px; text-align: center; } #module_waiting_box .spinner > div { width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } #module_waiting_box .spinner .bounce1 { -webkit-animation-delay: -0.35s; animation-delay: -0.35s; } #module_waiting_box .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 95%, 100% { -webkit-transform: scale(0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 95%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.0); transform: scale(1.0); } } body{direction: ltr;text-align: left;}