/* ============================================================ Tweak overrides for index.html — palette, voice, surface. Activated by classes on . ============================================================ */ /* ---- Palette tokens (defaults are the current Trust palette) -- */ body { --tw-accent: #A6E6DA; --tw-accent-deep: #2A9D8F; --tw-accent-warm: #7FC174; --tw-eyebrow: #A6E6DA; --tw-veil-tint: 5, 11, 13; /* dark teal-black for hero veil */ --tw-btn-from: #A6E6DA; --tw-btn-to: #2A9D8F; --tw-btn-ink: #062119; } /* Editorial Mono — high-contrast charcoal + warm amber accent */ body.tw-pal-editorial { --tw-accent: #F2C46B; --tw-accent-deep: #B8852A; --tw-accent-warm: #F2C46B; --tw-eyebrow: #C9C5BD; --tw-veil-tint: 14, 13, 12; /* near-black */ --tw-btn-from: #F4E7CC; --tw-btn-to: #D9A845; --tw-btn-ink: #1B1714; } /* Operational — deep cyber blues */ body.tw-pal-operational { --tw-accent: #7DD3FC; --tw-accent-deep: #0EA5E9; --tw-accent-warm: #38BDF8; --tw-eyebrow: #7DD3FC; --tw-veil-tint: 4, 10, 22; --tw-btn-from: #BAE6FD; --tw-btn-to: #0EA5E9; --tw-btn-ink: #061229; } /* Warm Advisory — cream + terracotta */ body.tw-pal-warm { --tw-accent: #F4B690; --tw-accent-deep: #C26A3C; --tw-accent-warm: #E8A47A; --tw-eyebrow: #F4B690; --tw-veil-tint: 24, 13, 8; --tw-btn-from: #F8D4B8; --tw-btn-to: #C26A3C; --tw-btn-ink: #2A1208; } /* ---- Apply palette throughout (best-effort overrides) -------- */ body[class*="tw-pal-"] .hero.hero-bg-image .hero-bg-veil { background: linear-gradient(90deg, rgba(var(--tw-veil-tint), 0.94) 0%, rgba(var(--tw-veil-tint), 0.80) 28%, rgba(var(--tw-veil-tint), 0.46) 50%, rgba(var(--tw-veil-tint), 0.12) 72%, rgba(var(--tw-veil-tint), 0) 100%), linear-gradient(180deg, rgba(var(--tw-veil-tint), 0.25) 0%, rgba(var(--tw-veil-tint), 0) 30%, rgba(var(--tw-veil-tint), 0) 70%, rgba(var(--tw-veil-tint), 0.55) 100%) !important; } body[class*="tw-pal-"] .hero.hero-bg-image { background-color: rgb(var(--tw-veil-tint)) !important; } body[class*="tw-pal-"] .eyebrow, body[class*="tw-pal-"] .hero.hero-interactive .eyebrow { color: var(--tw-eyebrow) !important; } body[class*="tw-pal-"] em, body[class*="tw-pal-"] .hero em { color: var(--tw-accent) !important; } body[class*="tw-pal-"] .button.primary, body[class*="tw-pal-"] .hero-actions .button.primary, body[class*="tw-pal-"] a.button.primary { background: linear-gradient(135deg, var(--tw-btn-from) 0%, var(--tw-btn-to) 100%) !important; color: var(--tw-btn-ink) !important; border-color: transparent !important; } body[class*="tw-pal-"] .hero-chapter.is-active .hero-chapter-bar::after { background: linear-gradient(90deg, var(--tw-accent), var(--tw-accent-warm)) !important; } body[class*="tw-pal-"] .feature-tile-tag { color: var(--tw-accent-deep) !important; } body[class*="tw-pal-"] .contact-cta { border-color: var(--tw-accent) !important; color: #fff !important; } /* ---- Surface language --------------------------------------- */ /* Editorial — hairline borders, sharper corners, more serif italics */ body.tw-surf-editorial .feature-tile, body.tw-surf-editorial .feature-tile--light, body.tw-surf-editorial .metric, body.tw-surf-editorial .hero-player, body.tw-surf-editorial .button, body.tw-surf-editorial .contact-cta { border-radius: 4px !important; } body.tw-surf-editorial .feature-tile { border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: none !important; } body.tw-surf-editorial .feature-tile--light { border-color: rgba(0,0,0,0.08) !important; } body.tw-surf-editorial .hero.hero-interactive h1 { font-family: 'Instrument Serif', Georgia, serif !important; font-weight: 400 !important; letter-spacing: -0.02em !important; font-size: clamp(48px, 7.4vw, 88px) !important; } body.tw-surf-editorial .hero.hero-interactive h1 em { font-style: italic; } body.tw-surf-editorial .section-head h2, body.tw-surf-editorial h2 { font-family: 'Instrument Serif', Georgia, serif !important; font-weight: 400 !important; letter-spacing: -0.015em !important; } body.tw-surf-editorial .eyebrow { letter-spacing: 0.28em !important; font-size: 11px !important; text-transform: uppercase !important; } body.tw-surf-editorial .feature-tile-tag { text-transform: uppercase !important; letter-spacing: 0.22em !important; font-size: 10px !important; } /* Monumental — sans bold maxed, no eyebrows, no tile tags, big air */ body.tw-surf-monumental .hero.hero-interactive h1 { font-size: clamp(56px, 9.2vw, 128px) !important; font-weight: 800 !important; letter-spacing: -0.04em !important; line-height: 0.92 !important; } body.tw-surf-monumental .hero.hero-interactive h1 em { font-style: normal !important; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; text-decoration-color: var(--tw-accent, #A6E6DA); } body.tw-surf-monumental .hero.hero-interactive .eyebrow, body.tw-surf-monumental .hero.hero-interactive .hero-player { display: none !important; } body.tw-surf-monumental .hero-content > p:not([data-hero-sub]) { display: none; } body.tw-surf-monumental .feature-tile-tag { display: none !important; } body.tw-surf-monumental .feature-tile { border-radius: 0 !important; } body.tw-surf-monumental .button, body.tw-surf-monumental .contact-cta { border-radius: 0 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; font-size: 13px !important; } body.tw-surf-monumental .section-head h2, body.tw-surf-monumental h2 { font-size: clamp(40px, 5.6vw, 84px) !important; letter-spacing: -0.025em !important; line-height: 1.02 !important; } /* ---- Voice — keep wrapper styles consistent ---------------- */ /* (Actual copy is rewritten by JS; nothing to do here.) */ /* ============================================================ Hero Layout variants — opt-in via body.tw-hero-* classes. Default ("anchored") = the styles in hero-interactive.css. ============================================================ */ /* ---- Editorial: smaller image to the right, serif headline, less chrome -- */ body.tw-hero-editorial .hero.hero-bg-image .hero-bg { left: 58%; } body.tw-hero-editorial .hero.hero-bg-image .hero-bg-veil { background: linear-gradient(90deg, rgba(5, 11, 13, 1) 0%, rgba(5, 11, 13, 1) 54%, rgba(5, 11, 13, 0.55) 64%, rgba(5, 11, 13, 0.1) 76%, rgba(5, 11, 13, 0) 88%), linear-gradient(180deg, rgba(5, 11, 13, 0.2) 0%, rgba(5, 11, 13, 0) 30%, rgba(5, 11, 13, 0) 70%, rgba(5, 11, 13, 0.55) 100%) !important; } body.tw-hero-editorial .hero.hero-interactive h1 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; font-size: clamp(48px, 6.8vw, 88px); line-height: 1.08; max-width: 640px; margin-bottom: 32px; } /* Let the wrapped active chapter contribute its full height to the H1 so the subhead doesn't crash into it */ body.tw-hero-editorial .hero h1[data-hero-headline] > span[data-chapter].is-active { display: inline; } body.tw-hero-editorial .hero .hero-player, body.tw-hero-editorial .hero .metric-row { display: none; } body.tw-hero-editorial .hero.hero-interactive p[data-hero-sub] { font-size: 22px; max-width: 540px; } body.tw-hero-editorial .hero .hero-content > .eyebrow { letter-spacing: 0.32em; font-size: 11px; opacity: 0.7; } /* ---- Atmosphere: full-bleed image, dimmed globe, headline floats centered ---- */ body.tw-hero-atmosphere .hero.hero-bg-image .hero-bg { left: 0; opacity: 0.55; filter: saturate(0.85); } body.tw-hero-atmosphere .hero.hero-bg-image .hero-bg-veil { background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(5, 11, 13, 0.55) 0%, rgba(5, 11, 13, 0.78) 60%, rgba(5, 11, 13, 0.92) 100%), linear-gradient(180deg, rgba(5, 11, 13, 0.4) 0%, rgba(5, 11, 13, 0.2) 50%, rgba(5, 11, 13, 0.7) 100%) !important; } body.tw-hero-atmosphere .hero.hero-interactive .hero-content { margin-left: auto; margin-right: auto; max-width: 900px; padding-left: 24px; padding-right: 24px; text-align: center; } body.tw-hero-atmosphere .hero.hero-interactive h1 { font-size: clamp(48px, 7vw, 88px); font-weight: 600; letter-spacing: -0.025em; max-width: 100%; } body.tw-hero-atmosphere .hero.hero-interactive p[data-hero-sub] { max-width: 620px; margin-left: auto; margin-right: auto; } body.tw-hero-atmosphere .hero-actions { justify-content: center; } body.tw-hero-atmosphere .hero .metric-row { justify-content: center; } /* ---- Split: hard 50/50 — solid dark left panel, clean image right panel ---- */ body.tw-hero-split .hero.hero-bg-image .hero-bg { left: 50%; } body.tw-hero-split .hero.hero-bg-image .hero-bg-veil { background: linear-gradient(90deg, rgba(5, 11, 13, 1) 0%, rgba(5, 11, 13, 1) 50%, rgba(5, 11, 13, 0) 50%, rgba(5, 11, 13, 0) 100%), linear-gradient(180deg, rgba(5, 11, 13, 0) 0%, rgba(5, 11, 13, 0) 70%, rgba(5, 11, 13, 0.35) 100%) !important; } body.tw-hero-split .hero.hero-interactive .hero-content { max-width: 560px; } /* Narrow viewports: all variants fall back to single-column readable */ @media (max-width: 900px) { body.tw-hero-editorial .hero.hero-bg-image .hero-bg, body.tw-hero-split .hero.hero-bg-image .hero-bg { left: 0; } body.tw-hero-editorial .hero.hero-bg-image .hero-bg-veil, body.tw-hero-split .hero.hero-bg-image .hero-bg-veil { background: linear-gradient(180deg, rgba(5, 11, 13, 0.55) 0%, rgba(5, 11, 13, 0.78) 100%) !important; } body.tw-hero-atmosphere .hero.hero-interactive .hero-content { text-align: left; } body.tw-hero-atmosphere .hero-actions, body.tw-hero-atmosphere .hero .metric-row { justify-content: flex-start; } } /* ============================================================ Two more hero variants with the globe shrunk to a corner element. ============================================================ */ /* ---- Badge: small globe pinned top-right, softly masked so it fades into dark -- */ body.tw-hero-badge .hero.hero-bg-image .hero-bg { top: 80px; right: 40px; bottom: auto; left: auto; width: clamp(320px, 40vw, 560px); aspect-ratio: 16 / 10; background-size: cover; background-position: 70% center; -webkit-mask-image: radial-gradient(ellipse farthest-side at 50% 50%, #000 0%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse farthest-side at 50% 50%, #000 0%, #000 30%, transparent 100%); } body.tw-hero-badge .hero.hero-bg-image .hero-bg-veil { background: linear-gradient(180deg, rgba(5, 11, 13, 0.15) 0%, rgba(5, 11, 13, 0) 35%, rgba(5, 11, 13, 0) 70%, rgba(5, 11, 13, 0.55) 100%) !important; } /* Headline pulls left and grows, since the globe is no longer competing for space */ body.tw-hero-badge .hero.hero-interactive h1 { max-width: 820px; font-size: clamp(44px, 6.4vw, 84px); } /* ---- Horizon: small globe at bottom-right, masked into the dark like a setting sun --- */ body.tw-hero-horizon .hero.hero-bg-image .hero-bg { top: auto; left: auto; right: -30px; bottom: -30px; width: clamp(420px, 48vw, 700px); aspect-ratio: 16 / 10; background-size: cover; background-position: 65% 30%; -webkit-mask-image: radial-gradient(ellipse farthest-side at 50% 50%, #000 0%, #000 32%, transparent 100%); mask-image: radial-gradient(ellipse farthest-side at 50% 50%, #000 0%, #000 32%, transparent 100%); } body.tw-hero-horizon .hero.hero-bg-image .hero-bg-veil { background: linear-gradient(180deg, rgba(5, 11, 13, 0.4) 0%, rgba(5, 11, 13, 0.15) 30%, rgba(5, 11, 13, 0) 60%, rgba(5, 11, 13, 0) 100%) !important; } body.tw-hero-horizon .hero.hero-interactive h1 { max-width: 760px; } /* Hairline at the globe horizon — subtle anchor across the hero */ body.tw-hero-horizon .hero.hero-bg-image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22%; height: 1px; background: linear-gradient(90deg, rgba(166, 230, 218, 0) 0%, rgba(166, 230, 218, 0.16) 30%, rgba(166, 230, 218, 0.24) 75%, rgba(166, 230, 218, 0) 100%); z-index: 1; pointer-events: none; } @media (max-width: 900px) { body.tw-hero-badge .hero.hero-bg-image .hero-bg { width: 220px; top: 18px; right: 14px; } body.tw-hero-horizon .hero.hero-bg-image .hero-bg { width: 320px; right: -40px; bottom: -50px; } body.tw-hero-horizon .hero.hero-bg-image::after { display: none; } } /* ============================================================ Anchored variants with the globe scaled down. Same composition as the original "anchored" — same veil, same position — only the bg image is shrunk via a transform on .hero-bg, anchored right. ============================================================ */ body.tw-hero-anchored-90 .hero.hero-bg-image .hero-bg { transform: scale(0.90); transform-origin: 100% 50%; } body.tw-hero-anchored-85 .hero.hero-bg-image .hero-bg { transform: scale(0.85); transform-origin: 100% 50%; } /* ============================================================ Variant overrides applied to the video layer so it tracks the same positioning logic as the static background-image fallback. ============================================================ */ body.tw-hero-badge .hero.hero-bg-image .hero-bg-video { object-position: 70% center; } body.tw-hero-horizon .hero.hero-bg-image .hero-bg-video { object-position: 65% 30%; } @media (max-width: 1100px) { .hero.hero-bg-image .hero-bg-video { object-position: 78% center; } } @media (max-width: 720px) { .hero.hero-bg-image .hero-bg-video { object-position: 68% center; } } /* ============================================================ Cinematic — alt video, full bleed, full opacity, headline in a frosted-glass card on the left so the action plays around it. ============================================================ */ body.tw-hero-cinematic .hero.hero-bg-image .hero-bg { transform: none; opacity: 0.95; inset: 0; background-position: center; } body.tw-hero-cinematic .hero.hero-bg-image .hero-bg-video { object-position: center; } body.tw-hero-cinematic .hero.hero-bg-image .hero-bg-veil { background: linear-gradient(90deg, rgba(5, 11, 13, 0.55) 0%, rgba(5, 11, 13, 0.30) 38%, rgba(5, 11, 13, 0.0) 72%, rgba(5, 11, 13, 0.0) 100%), linear-gradient(180deg, rgba(5, 11, 13, 0.18) 0%, rgba(5, 11, 13, 0) 40%, rgba(5, 11, 13, 0.55) 100%) !important; } /* Frosted-glass card around the headline + actions */ body.tw-hero-cinematic .hero.hero-interactive .hero-content { background: rgba(5, 11, 13, 0.42); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 18px; padding: 36px 38px 32px; max-width: 620px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); } body.tw-hero-cinematic .hero.hero-interactive .hero-content > .eyebrow { margin-top: 0; } body.tw-hero-cinematic .hero.hero-interactive h1 { font-size: clamp(40px, 5.6vw, 72px); } @media (max-width: 720px) { body.tw-hero-cinematic .hero.hero-interactive .hero-content { padding: 24px 22px; border-radius: 14px; } } /* Alt video #2 — shift the globe further right on the screen */ body.tw-hero-video-alt-2 .hero.hero-bg-image .hero-bg { transform: scale(1.25) translateX(30%); transform-origin: 100% 50%; opacity: 1; } body.tw-hero-video-alt-2 .hero.hero-bg-image .hero-bg-video { object-position: 75% center; } /* ============================================================ Immersive — globe expanded across the full hero so the motion plays behind everything. The headline rides on a strong left gradient + soft scrim over the rest, no glass card. ============================================================ */ body.tw-hero-immersive .hero.hero-bg-image .hero-bg { transform: scale(1.15); transform-origin: 50% 50%; opacity: 0.4; inset: 0; background-position: center; } body.tw-hero-immersive .hero.hero-bg-image .hero-bg-video { object-position: center; object-fit: cover; } body.tw-hero-immersive .hero.hero-bg-image .hero-bg-veil { background: linear-gradient(90deg, rgba(5, 11, 13, 0.90) 0%, rgba(5, 11, 13, 0.62) 28%, rgba(5, 11, 13, 0.30) 55%, rgba(5, 11, 13, 0.18) 80%, rgba(5, 11, 13, 0.10) 100%), linear-gradient(180deg, rgba(5, 11, 13, 0.25) 0%, rgba(5, 11, 13, 0) 35%, rgba(5, 11, 13, 0) 65%, rgba(5, 11, 13, 0.50) 100%) !important; } /* Slight text shadow on headline keeps it readable against the moving globe */ body.tw-hero-immersive .hero.hero-interactive h1, body.tw-hero-immersive .hero.hero-interactive p[data-hero-sub] { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45); } @media (max-width: 720px) { body.tw-hero-immersive .hero.hero-bg-image .hero-bg { transform: scale(1.25); } } /* ============================================================ Mega — globe scaled up 300% so it bleeds across the page and floats behind the headline. Heavier vignette to keep text legible. ============================================================ */ body.tw-hero-mega .hero.hero-bg-image .hero-bg { transform: scale(1) translateX(-15%); transform-origin: 50% 50%; opacity: 0.7; inset: 0; background-position: center; } body.tw-hero-mega .hero.hero-bg-image .hero-bg-video { object-position: center; object-fit: cover; } body.tw-hero-mega .hero.hero-bg-image .hero-bg-veil { background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(5, 11, 13, 0.10) 0%, rgba(5, 11, 13, 0.45) 60%, rgba(5, 11, 13, 0.85) 100%), linear-gradient(90deg, rgba(5, 11, 13, 0.70) 0%, rgba(5, 11, 13, 0.35) 35%, rgba(5, 11, 13, 0.15) 65%, rgba(5, 11, 13, 0.30) 100%), linear-gradient(180deg, rgba(5, 11, 13, 0.20) 0%, rgba(5, 11, 13, 0) 35%, rgba(5, 11, 13, 0) 65%, rgba(5, 11, 13, 0.50) 100%) !important; } body.tw-hero-mega .hero.hero-interactive h1, body.tw-hero-mega .hero.hero-interactive p[data-hero-sub] { text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5); } /* Alt video #3 — full-bleed cover with the globe pulled left. Each modern effect (grain / vignette / drift / edge glow) is opt-in via a body.tw-v3-* class; intensity is tw-v3-int-{subtle|medium|strong}. */ body.tw-hero-video-alt-3 .hero.hero-bg-image .hero-bg { background-image: none !important; transform: none; opacity: 0.42; inset: 0; } body.tw-hero-video-alt-3 .hero.hero-bg-image .hero-bg-video { object-fit: cover; object-position: 30% center; } body.tw-hero-video-alt-3 .hero.hero-bg-image .hero-bg-veil { background: linear-gradient(90deg, rgba(var(--tw-veil-tint), 0.96) 0%, rgba(var(--tw-veil-tint), 0.86) 30%, rgba(var(--tw-veil-tint), 0.62) 55%, rgba(var(--tw-veil-tint), 0.32) 78%, rgba(var(--tw-veil-tint), 0.18) 100%), linear-gradient(180deg, rgba(var(--tw-veil-tint), 0.34) 0%, rgba(var(--tw-veil-tint), 0.10) 35%, rgba(var(--tw-veil-tint), 0.10) 68%, rgba(var(--tw-veil-tint), 0.68) 100%) !important; } /* ---- Ken Burns drift (only when toggle on) ---- */ body.tw-hero-video-alt-3.tw-v3-drift .hero.hero-bg-image .hero-bg-video { animation: heroV3KenBurns 22s ease-in-out infinite alternate; } body.tw-hero-video-alt-3.tw-v3-drift.tw-v3-int-subtle .hero.hero-bg-image .hero-bg-video { animation-duration: 32s; } body.tw-hero-video-alt-3.tw-v3-drift.tw-v3-int-strong .hero.hero-bg-image .hero-bg-video { animation: heroV3KenBurnsStrong 18s ease-in-out infinite alternate; } @keyframes heroV3KenBurns { 0% { transform: scale(1.04) translateX(-1%); } 100% { transform: scale(1.10) translateX(1.5%); } } @keyframes heroV3KenBurnsStrong { 0% { transform: scale(1.06) translateX(-2.5%); } 100% { transform: scale(1.18) translateX(3%); } } /* ---- Teal vignette (replaces standard veil when toggle on) ---- */ body.tw-hero-video-alt-3.tw-v3-vignette .hero.hero-bg-image .hero-bg-veil { background: radial-gradient(ellipse 70% 90% at 12% 50%, rgba(5, 11, 13, 0.75) 0%, rgba(5, 11, 13, 0.42) 40%, rgba(5, 11, 13, 0) 80%), radial-gradient(circle at 88% 92%, rgba(42, 157, 143, 0.18) 0%, rgba(42, 157, 143, 0) 45%), radial-gradient(circle at 92% 8%, rgba(166, 230, 218, 0.10) 0%, rgba(166, 230, 218, 0) 38%), linear-gradient(180deg, rgba(5, 11, 13, 0.15) 0%, rgba(5, 11, 13, 0) 35%, rgba(5, 11, 13, 0) 65%, rgba(5, 11, 13, 0.55) 100%) !important; } body.tw-hero-video-alt-3.tw-v3-vignette.tw-v3-int-subtle .hero.hero-bg-image .hero-bg-veil { background: radial-gradient(ellipse 70% 90% at 12% 50%, rgba(5, 11, 13, 0.55) 0%, rgba(5, 11, 13, 0.28) 40%, rgba(5, 11, 13, 0) 80%), radial-gradient(circle at 88% 92%, rgba(42, 157, 143, 0.10) 0%, rgba(42, 157, 143, 0) 45%), linear-gradient(180deg, rgba(5, 11, 13, 0.10) 0%, rgba(5, 11, 13, 0) 35%, rgba(5, 11, 13, 0) 70%, rgba(5, 11, 13, 0.40) 100%) !important; } body.tw-hero-video-alt-3.tw-v3-vignette.tw-v3-int-strong .hero.hero-bg-image .hero-bg-veil { background: radial-gradient(ellipse 70% 90% at 12% 50%, rgba(5, 11, 13, 0.90) 0%, rgba(5, 11, 13, 0.55) 40%, rgba(5, 11, 13, 0) 80%), radial-gradient(circle at 88% 92%, rgba(42, 157, 143, 0.30) 0%, rgba(42, 157, 143, 0) 50%), radial-gradient(circle at 92% 8%, rgba(166, 230, 218, 0.18) 0%, rgba(166, 230, 218, 0) 42%), linear-gradient(180deg, rgba(5, 11, 13, 0.25) 0%, rgba(5, 11, 13, 0) 35%, rgba(5, 11, 13, 0) 65%, rgba(5, 11, 13, 0.70) 100%) !important; } /* ---- Filmic grain overlay (only when toggle on) ---- */ body.tw-hero-video-alt-3.tw-v3-grain .hero.hero-bg-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.18; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; } body.tw-hero-video-alt-3.tw-v3-grain.tw-v3-int-subtle .hero.hero-bg-image::after { opacity: 0.10; } body.tw-hero-video-alt-3.tw-v3-grain.tw-v3-int-strong .hero.hero-bg-image::after { opacity: 0.32; } /* ---- Hairline edge glow (only when toggle on) ---- */ body.tw-hero-video-alt-3.tw-v3-edge .hero.hero-bg-image { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(166, 230, 218, 0.18); } body.tw-hero-video-alt-3.tw-v3-edge.tw-v3-int-subtle .hero.hero-bg-image { box-shadow: inset 0 -1px 0 rgba(166, 230, 218, 0.10); } body.tw-hero-video-alt-3.tw-v3-edge.tw-v3-int-strong .hero.hero-bg-image { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -2px 0 rgba(166, 230, 218, 0.35), inset 0 0 80px rgba(42, 157, 143, 0.18); } /* ============================================================ Reimagined — Envelop's take on a big editorial hero. Massive uppercase headline left, supporting paragraph + CTA right. Inspired by generic editorial layouts (e.g. Pentagram-style consulting hero patterns), not any one brand. Uses Envelop's own teal accent, not anyone else's mark. ============================================================ */ /* Headline gets its full bleed; remove chrome we don't need */ body.tw-hero-reimagined .hero .hero-player, body.tw-hero-reimagined .hero .metric-row, body.tw-hero-reimagined .hero-content > .eyebrow { display: none !important; } /* Two-column composition: huge type left, supporting text right */ body.tw-hero-reimagined .hero.hero-interactive .hero-content { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr); gap: 56px; align-items: end; max-width: 1480px; padding-top: 100px; padding-bottom: 80px; } /* Headline column: the big type, two stacked lines */ body.tw-hero-reimagined .hero.hero-interactive h1 { grid-column: 1; font-size: clamp(56px, 9.4vw, 168px); font-weight: 800; line-height: 0.92; letter-spacing: -0.035em; text-transform: uppercase; margin: 0; max-width: none; font-family: var(--font-display, var(--font-sans, 'Inter', system-ui, sans-serif)); } body.tw-hero-reimagined .hero.hero-interactive h1 .rim-line { display: block; } body.tw-hero-reimagined .hero.hero-interactive h1 em { font-style: normal; color: var(--tw-accent, #A6E6DA); /* Envelop's own accent geometry — a thin underline mark, not a literal ">" */ position: relative; background-image: linear-gradient(180deg, transparent 78%, currentColor 78%, currentColor 86%, transparent 86%); background-repeat: no-repeat; background-size: 100% 100%; padding-right: 0.05em; } /* Supporting column: subhead + CTA pinned bottom-right */ body.tw-hero-reimagined .hero.hero-interactive .hero-content > p[data-hero-sub] { grid-column: 2; grid-row: 1; align-self: end; max-width: 360px; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; margin: 0 0 56px 0; color: rgba(255, 255, 255, 0.78); } body.tw-hero-reimagined .hero.hero-interactive .hero-content > p[data-hero-sub]::before { content: ""; display: block; width: 56px; height: 2px; background: var(--tw-accent, #A6E6DA); margin-bottom: 22px; } body.tw-hero-reimagined .hero .hero-actions { grid-column: 2; grid-row: 2; margin: 0; justify-content: flex-start; } /* The headline area can sit above the supporting paragraph in a single column on narrow screens */ @media (max-width: 1024px) { body.tw-hero-reimagined .hero.hero-interactive .hero-content { grid-template-columns: 1fr; gap: 32px; align-items: start; padding-top: 80px; } body.tw-hero-reimagined .hero.hero-interactive h1 { font-size: clamp(48px, 11vw, 96px); } body.tw-hero-reimagined .hero.hero-interactive .hero-content > p[data-hero-sub] { grid-column: 1; grid-row: auto; max-width: 520px; margin: 0; } body.tw-hero-reimagined .hero .hero-actions { grid-column: 1; grid-row: auto; } } /* Dim the globe a bit so the type takes the lead */ body.tw-hero-reimagined .hero.hero-bg-image .hero-bg { opacity: 0.55; } body.tw-hero-reimagined .hero.hero-bg-image .hero-bg-veil { background: linear-gradient(90deg, rgba(5, 11, 13, 0.85) 0%, rgba(5, 11, 13, 0.55) 38%, rgba(5, 11, 13, 0.20) 70%, rgba(5, 11, 13, 0) 100%), linear-gradient(180deg, rgba(5, 11, 13, 0.25) 0%, rgba(5, 11, 13, 0) 35%, rgba(5, 11, 13, 0) 65%, rgba(5, 11, 13, 0.45) 100%) !important; } /* ============================================================ Reimagined Small — same layout as 'reimagined', smaller type. Body class is tw-hero-reimagined-small (also gets tw-hero-reimagined stamped on it via JS so all the layout/grid/etc. carries over). ============================================================ */ body.tw-hero-reimagined-small .hero.hero-interactive h1 { font-size: clamp(40px, 5.4vw, 92px); letter-spacing: -0.025em; line-height: 0.98; } body.tw-hero-reimagined-small .hero.hero-interactive .hero-content { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.55fr); gap: 64px; padding-top: 80px; padding-bottom: 60px; } body.tw-hero-reimagined-small .hero.hero-interactive .hero-content > p[data-hero-sub] { max-width: 340px; margin-bottom: 36px; } @media (max-width: 1024px) { body.tw-hero-reimagined-small .hero.hero-interactive h1 { font-size: clamp(36px, 7vw, 68px); } } /* Alt video #3 — uppercase headline for the "Reimagine Infrastructure" treatment */ body.tw-hero-video-alt-3 .hero.hero-interactive h1 { text-transform: uppercase; letter-spacing: -0.02em; /* No overflow:hidden here — we don't want to clip horizontal indent. Each rim-line masks its own inner span instead. */ } /* Stack "REIMAGINE" then indent "INFRASTRUCTURE" so it reads on the next line, right-shifted */ body.tw-hero-video-alt-3 .hero.hero-interactive h1 .rim-line--word { display: block; /* width: max-content sizes the line to its content + padding, so overflow:hidden can clip the translateY without also clipping the long second word. */ width: max-content; max-width: none; overflow: hidden; padding-bottom: 0.06em; /* room for descenders */ } body.tw-hero-video-alt-3 .hero.hero-interactive h1 .rim-line--indent { padding-left: var(--rim-indent, 4.5em); transition: padding-left 600ms cubic-bezier(0.22, 0.85, 0.18, 1.0); } /* The inner span carries the snap-in transform; the outer rim-line clips it. */ body.tw-hero-video-alt-3 .hero.hero-interactive h1 .rim-inner { display: inline-block; transform: translateY(110%); opacity: 0; animation: rimLineSnap 1100ms cubic-bezier(0.22, 0.85, 0.18, 1.0) forwards; } body.tw-hero-video-alt-3 .hero.hero-interactive h1 .rim-line--word:nth-child(1) .rim-inner { animation-delay: 120ms; } /* INFRASTRUCTURE: starts under the M in REIMAGINE during the snap-up, then slides further left to its resting position after a brief hold. */ body.tw-hero-video-alt-3 .hero.hero-interactive h1 .rim-line--word:nth-child(2) .rim-inner { animation: rimLineSnapShift 1700ms cubic-bezier(0.22, 0.85, 0.18, 1.0) 420ms forwards; } @keyframes rimLineSnap { 0% { transform: translateY(110%); opacity: 0; } 55% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } /* Two-stage: snap up at M position, hold, then slide RIGHT to settle at N. */ @keyframes rimLineSnapShift { 0% { transform: translateY(110%) translateX(-2.5em); opacity: 0; } 30% { opacity: 1; } 45% { transform: translateY(0) translateX(-2.5em); opacity: 1; } 62% { transform: translateY(0) translateX(-2.5em); opacity: 1; } 100% { transform: translateY(0) translateX(0); opacity: 1; } } /* Subhead + actions fade in after the headline has snapped + shifted */ body.tw-hero-video-alt-3 .hero.hero-interactive .hero-content > p[data-hero-sub], body.tw-hero-video-alt-3 .hero.hero-interactive .hero-actions { opacity: 0; transform: translateY(14px); animation: rimSubFade 720ms cubic-bezier(0.22, 0.85, 0.18, 1.0) 1900ms forwards; } body.tw-hero-video-alt-3 .hero.hero-interactive .hero-actions { animation-delay: 2080ms; } @keyframes rimSubFade { to { opacity: 1; transform: translateY(0); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { body.tw-hero-video-alt-3 .hero.hero-interactive h1 .rim-inner, body.tw-hero-video-alt-3 .hero.hero-interactive .hero-content > p[data-hero-sub], body.tw-hero-video-alt-3 .hero.hero-interactive .hero-actions { animation: none; opacity: 1; transform: none; } } /* Alt video #3 — second line (the rotating noun) should match the weight + slant of the first line, just colored with the accent. Override the default em italics and any font-family/size shifts the base hero CSS applies to . */ body.tw-hero-video-alt-3 .hero.hero-interactive h1 em { font-style: normal; font-weight: inherit; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; } /* Alt video #3 — second line is white, one middle letter pops in teal */ body.tw-hero-video-alt-3 .hero.hero-interactive h1 em { color: #fff; } body.tw-hero-video-alt-3 .hero.hero-interactive h1 em .rim-accent { color: var(--tw-accent, #A6E6DA); } /* Alt video #3 — teal light beam sitting just left of the second word. Tracks the dynamic indent so it always sits where the word lands. */ body.tw-hero-video-alt-3 .hero.hero-interactive h1 { position: relative; } body.tw-hero-video-alt-3 .hero.hero-interactive h1::after { content: ""; position: absolute; left: calc(var(--rim-indent, 4.5em) - 0.28em); bottom: 0.06em; width: 4px; height: 1.0em; background: var(--tw-accent, #A6E6DA); border-radius: 2px; box-shadow: 0 0 10px rgba(166, 230, 218, 0.55), 0 0 28px rgba(166, 230, 218, 0.32), 0 0 56px rgba(42, 157, 143, 0.22); /* Hidden by default. Revealed by JS adding .rim-beam-on. */ opacity: 0; transform: scaleY(0); transform-origin: 50% 100%; /* Snappy show, instant hide via transition. */ transition: left 600ms cubic-bezier(0.22, 0.85, 0.18, 1.0), opacity 220ms ease-out, transform 360ms cubic-bezier(0.32, 1.6, 0.55, 1.0); pointer-events: none; } body.tw-hero-video-alt-3 .hero.hero-interactive h1.rim-beam-on::after { opacity: 0.92; transform: scaleY(1); } @media (prefers-reduced-motion: reduce) { body.tw-hero-video-alt-3 .hero.hero-interactive h1::after { transition: opacity 120ms linear; } }