:root { --bg: #03070d; --paper: #f1f0ea; --muted: rgba(241,240,234,.56); --ease: cubic-bezier(.22,1,.36,1); --type: "obviously-variable", "Obviously", Arial, sans-serif; --secondary: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; background: var(--bg); color: var(--paper); }
body { min-height: 100svh; overflow: hidden; font-family: var(--secondary); -webkit-font-smoothing: antialiased; }
.splash { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient(95% 78% at 50% 54%, #0b1928 0%, transparent 57%), radial-gradient(65% 60% at 0% 100%, #071728 0%, transparent 72%), radial-gradient(65% 60% at 100% 0%, #101326 0%, transparent 72%), #020407; display: grid; grid-template-rows: auto 1fr auto; padding: 28px clamp(20px, 4vw, 64px) 34px; }
.splash::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .11; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.68'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.masthead, .footer { position: relative; z-index: 3; display: flex; align-items: center; justify-content: flex-end; }
.footer { background: transparent; }
.language-switcher { display: flex; align-items: center; gap: .7rem; color: rgba(241,240,234,.48); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
.language-switcher button, .language-active { color: inherit; font: inherit; letter-spacing: inherit; }
.language-switcher button { border: 0; padding: 0; background: none; cursor: pointer; transition: color 240ms ease; }
.language-switcher button:hover, .language-switcher button:focus-visible, .language-switcher button.language-active { color: var(--paper); outline: none; }
.hero { min-height: 0; position: relative; z-index: 2; }
.logo-trigger { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: min(22vw, 240px); height: min(22vw, 240px); padding: 0; border: 0; color: var(--paper); background: none; cursor: pointer; transform: translate(-50%,-50%); transition: width 650ms var(--ease), height 650ms var(--ease); contain: layout style; }
.logo-art { position: absolute; inset: 0; display: grid; place-items: center; overflow: visible; }
.logo-art svg { position: absolute; inset: 0; z-index: 1; display: block; inline-size: 100%; block-size: 100%; min-block-size: 0; max-block-size: 100%; overflow: visible; filter: drop-shadow(0 0 16px rgba(130,212,255,.26)); }
.x-shape { transform-origin: 50% 50%; }
.logo-type { position: absolute; left: calc(var(--anchor-x, 50%) + 5%); top: var(--anchor-y, 50%); z-index: 2; display: inline-flex; align-items: baseline; font-family: var(--type); font-size: clamp(1.9rem, 5.2vw, 4.55rem); line-height: .8; letter-spacing: -.08em; font-variation-settings: "wght" 620, "wdth" 115; text-shadow: 0 0 24px rgba(0,0,0,.16); transform: translate(0,-50%); transition: transform 560ms var(--ease), opacity 320ms var(--ease); }
.vrai-letter { display: inline-block; color: var(--paper); }
.brand-activists { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; row-gap: .1em; width: min(92vw, 1200px); padding: 0 1rem; color: var(--paper); font-family: var(--type); font-size: clamp(1.2rem, 8.6vw, 9.5rem); line-height: .9; letter-spacing: -.055em; white-space: nowrap; opacity: 0; transform: translateY(1.5rem) scale(.84); pointer-events: none; transition: opacity 320ms var(--ease), transform 560ms var(--ease), color 160ms linear; }
.activist-line { display: flex; justify-content: center; }
.activist-letter { display: inline-block; animation: activist-wave 3.6s ease-in-out infinite both; animation-delay: calc(var(--wave-index) * -.13s); animation-play-state: paused; }
.activist-space { flex: 0 0 .2em; animation: none; }
.footer { align-items: end; justify-content: center; }
.footer-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; }
.manifesto { margin: 0; color: var(--muted); font-family: var(--secondary); font-size: clamp(.78rem, 1vw, .94rem); line-height: 1.38; letter-spacing: -.015em; text-align: center; }
.contact { display: inline-flex; align-items: center; justify-content: center; color: var(--paper); font-family: var(--secondary); font-size: clamp(.78rem, 1vw, .94rem); text-decoration: none; letter-spacing: .02em; transition: color 300ms ease, background 1000ms var(--ease), padding 400ms var(--ease); }
.contact:hover, .contact:focus-visible { padding: .52rem .82rem .48rem; color: var(--bg); border-color: transparent; border-radius: 0; background: linear-gradient(135deg, var(--cta-a, #d8c75a), var(--cta-b, #9aca9a) 52%, var(--cta-c, #48bdf6)); outline: none; }
.logo-trigger:is(:hover, :focus-visible), .logo-trigger.is-active { outline: none; }
.logo-trigger:is(:hover, :focus-visible), .logo-trigger.is-active { width: calc(100vw - clamp(40px, 7vw, 96px)); height: calc(100% - clamp(36px, 5.6vh, 72px)); }
.logo-trigger:is(:hover, :focus-visible) .logo-art, .logo-trigger.is-active .logo-art { filter: saturate(1.18); }
.logo-trigger:is(:hover, :focus-visible) .logo-type, .logo-trigger.is-active .logo-type { opacity: 0; transform: translate(0,-50%) scale(.72); }
.logo-trigger:is(:hover, :focus-visible) .brand-activists, .logo-trigger.is-active .brand-activists { opacity: 1; color: var(--bg); transform: translateY(0) scale(1); }
.logo-trigger:is(:hover, :focus-visible) .activist-letter, .logo-trigger.is-active .activist-letter { animation-play-state: running; }
.logo-trigger:is(:hover, :focus-visible)::after, .logo-trigger.is-active::after { content: ""; position: absolute; inset: 15%; z-index: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.34) 0, rgba(255,255,255,.08) 10%, transparent 40%); opacity: 0; animation: flash .85s var(--ease) both; mix-blend-mode: screen; }
@keyframes flash { 0% { opacity: 0; transform: scale(.55); } 22% { opacity: .8; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes activist-wave { 0%,100% { font-variation-settings: "wght" 100, "wdth" 60; } 50% { font-variation-settings: "wght" 900, "wdth" 140; } }
.splash.is-mobile .logo-trigger:is(:hover, :focus-visible), .splash.is-mobile .logo-trigger.is-active { width: min(40vw, 170px); height: min(40vw, 170px); }
.splash.is-mobile .logo-trigger:is(:hover, :focus-visible) .logo-type, .splash.is-mobile .logo-trigger.is-active .logo-type { opacity: 1; transform: translate(0,-50%) scale(1); }
.splash.is-mobile .logo-trigger:is(:hover, :focus-visible) .brand-activists, .splash.is-mobile .logo-trigger.is-active .brand-activists { opacity: 0; transform: translateY(1.5rem) scale(.84); }
.splash.is-mobile .logo-trigger:is(:hover, :focus-visible) .activist-letter, .splash.is-mobile .logo-trigger.is-active .activist-letter { animation-play-state: paused; }
@media (max-width: 620px) { .splash { padding: 22px 18px 24px; } .language-switcher { font-size: .58rem; } .logo-trigger { width: min(40vw, 170px); height: min(40vw, 170px); } .brand-activists { width: calc(100% - 1rem); font-size: clamp(2rem, 9.8vw, 4.6rem); letter-spacing: -.07em; } .manifesto { max-width: 29rem; font-size: .68rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }