/* ══════════════════════════════════════════════════════════════════ The Peace Missile — page « coming soon » Palette : nuit #060A16 · crème #EDE6D6 · or #E3AC46 · rouge #C8231E ══════════════════════════════════════════════════════════════════ */ /* ── Polices auto-hébergées (aucune requête vers Google) ────────── */ @font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/archivo-black-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/archivo-black-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Variables ───────────────────────────────────────────────────── */ :root { --night: #060A16; --cream: #EDE6D6; --gold: #E3AC46; --gold-lite: #FBE49A; --red: #C8231E; --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif; --body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --ease: cubic-bezier(.16, .9, .24, 1); --footer-h: 52px; } /* ── Base ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--night); scroll-behavior: smooth; scroll-snap-type: y mandatory; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--night); color: var(--cream); font-family: var(--body); font-weight: 400; /* Pas d'`overflow` ici : cela ferait du un conteneur de défilement et neutraliserait le `position: sticky` de la scène. Le débordement horizontal du décor est déjà rogné par `.stage`. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--gold); text-decoration: none; transition: color .25s ease; } a:hover { color: var(--gold-lite); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; } .pm-defs { position: absolute; pointer-events: none; } .gold { color: var(--gold); } /* ── Structure du défilement ─────────────────────────────────────── */ .scroller { position: relative; } .snap { height: 100vh; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; } .stage { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; z-index: 2; } /* ── Décor : champ d'étoiles ─────────────────────────────────────── */ .starfield, .twinkles { position: absolute; inset: 0; pointer-events: none; } .starfield { animation: pmSwirl 900s linear infinite; } .twinkles { animation: pmSwirl 1400s linear infinite reverse; } .starfield__sway { position: absolute; inset: 0; animation: pmSway 190s ease-in-out infinite; } .starfield__layer { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-repeat: repeat; } .starfield__layer--a { animation: pmDriftA 240s linear infinite; background-size: 420px 420px; background-image: radial-gradient(1.2px 1.2px at 38px 62px, rgba(255,255,255,.85), transparent), radial-gradient(1px 1px at 176px 128px, rgba(255,255,255,.55), transparent), radial-gradient(1.4px 1.4px at 300px 244px, rgba(255,238,214,.8), transparent), radial-gradient(1px 1px at 92px 330px, rgba(255,255,255,.5), transparent), radial-gradient(1.1px 1.1px at 372px 46px, rgba(203,224,255,.7), transparent), radial-gradient(1px 1px at 246px 366px, rgba(255,255,255,.45), transparent), radial-gradient(1.5px 1.5px at 138px 200px, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 404px 296px, rgba(255,226,190,.5), transparent); } .starfield__layer--b { animation: pmDriftB 400s linear infinite; background-size: 700px 700px; background-image: radial-gradient(1.8px 1.8px at 120px 90px, rgba(255,255,255,.7), transparent), radial-gradient(1.2px 1.2px at 520px 210px, rgba(255,214,170,.6), transparent), radial-gradient(2px 2px at 300px 520px, rgba(255,255,255,.5), transparent), radial-gradient(1.2px 1.2px at 650px 640px, rgba(190,214,255,.55), transparent), radial-gradient(1.4px 1.4px at 60px 420px, rgba(255,255,255,.4), transparent); } .twinkles i { position: absolute; top: var(--t); left: var(--l); width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--c) 45%, transparent); animation: pmTwinkle var(--d) ease-in-out var(--y) infinite; } /* Position, taille, teinte, durée et décalage de chaque étoile. Placé ici plutôt qu'en attribut `style` pour permettre une CSP stricte. */ .twinkles i:nth-child(1) { --t: 14%; --l: 11%; --s: 2.5px; --c: #FFFFFF; --d: 7.5s; animation-delay: 0s; } .twinkles i:nth-child(2) { --t: 26%; --l: 79%; --s: 2px; --c: #FFE9C4; --d: 9s; animation-delay: 1.6s; } .twinkles i:nth-child(3) { --t: 63%; --l: 8%; --s: 2px; --c: #CBE0FF; --d: 11s; animation-delay: 3.2s; } .twinkles i:nth-child(4) { --t: 74%; --l: 88%; --s: 2.5px; --c: #FFFFFF; --d: 8.5s; animation-delay: .8s; } .twinkles i:nth-child(5) { --t: 38%; --l: 33%; --s: 1.8px; --c: #FFFFFF; --d: 12s; animation-delay: 5s; } .twinkles i:nth-child(6) { --t: 10%; --l: 57%; --s: 2px; --c: #FFF6DC; --d: 10s; animation-delay: 2.4s; } .twinkles i:nth-child(7) { --t: 85%; --l: 43%; --s: 2px; --c: #FFFFFF; --d: 9.5s; animation-delay: 6.2s; } .twinkles i:nth-child(8) { --t: 52%; --l: 92%; --s: 1.8px; --c: #E3AC46; --d: 13s; animation-delay: 4.4s; } .twinkles i:nth-child(9) { --t: 20%; --l: 42%; --s: 1.6px; --c: #FFFFFF; --d: 14s; animation-delay: 8.5s; } .twinkles i:nth-child(10) { --t: 68%; --l: 66%; --s: 2px; --c: #FFE9C4; --d: 11.5s; animation-delay: 7.1s; } /* ── Décor : halo ────────────────────────────────────────────────── */ .glow { position: absolute; left: 50%; top: 42%; width: min(1100px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: .65; background: radial-gradient(circle, rgba(200,35,30,.30) 0%, rgba(140,20,40,.16) 34%, rgba(20,48,94,.14) 56%, rgba(6,10,22,0) 74%); animation: pmGlow 9s ease-in-out infinite; } /* ── Bloc central ────────────────────────────────────────────────── */ .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 3.5vh, 44px); padding: 0 5vw; transition: transform 1.05s var(--ease); will-change: transform; } /* le blason remonte et rétrécit dès la 2ᵉ étape */ .stage[data-step="0"] .center { transform: translate3d(0, 0, 0); } .stage:not([data-step="0"]) .center { transform: translate3d(0, -9svh, 0) scale(.7); } .badge { position: relative; width: clamp(230px, 30vw, 380px); aspect-ratio: 1; } .badge__float { position: absolute; inset: 0; animation: pmFloat 11s ease-in-out infinite; } .badge__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .badge__rings use { opacity: 0; transform-box: view-box; transform-origin: 50% 56%; animation: pmRing 5.4s cubic-bezier(.25,.6,.3,1) infinite; } .badge__rings use:nth-child(2) { animation-delay: 1.8s; } .badge__rings use:nth-child(3) { animation-delay: 3.6s; } .badge__crest { position: relative; width: 100%; height: 100%; display: block; filter: drop-shadow(0 26px 60px rgba(0,0,0,.55)); } .crest__word { font-family: var(--display); fill: url(#pmText); stroke: #0A1B36; paint-order: stroke; } .crest__bob { transform-box: fill-box; transform-origin: 50% 100%; animation: pmBob 6s ease-in-out infinite; } .crest__flame { transform-box: fill-box; transform-origin: 50% 0%; animation: pmFlicker 260ms ease-in-out infinite; } .crest__shine { animation: pmSweep 8s ease-in-out infinite; } .crest__shine-clip { pointer-events: none; } /* Le blason réagit au doigt comme à la souris. */ .badge { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* décollage : au survol du blason, ou à la dernière étape */ .crest__rocket { transition: transform 1.1s var(--ease); } .crest__plume { opacity: 0; transform: translateY(0) scaleY(.4); transform-origin: 300px 244px; mix-blend-mode: screen; transition: opacity .45s ease, transform 1.1s var(--ease); } .badge:hover .crest__rocket, .stage[data-step="4"] .crest__rocket { transform: translateY(-30px); } .badge:hover .crest__plume, .stage[data-step="4"] .crest__plume { opacity: .62; transform: translateY(-28px) scaleY(1); } /* ── Boucle au clic / au toucher ───────────────────────────────── La fusée s'élance, fait un tour complet et revient se poser. Le pivot est placé au centre de la fusée, pas au milieu du groupe, sinon elle tournerait autour de sa flamme. */ .crest__ship { transform-box: fill-box; transform-origin: 50% 34%; } .badge.is-launching .crest__ship { animation: pmLoop 1.9s cubic-bezier(.32,.03,.28,1); } .badge.is-launching .crest__plume { animation: pmPlumeBurst 1.9s ease-out; } /* ── Accroche « Coming soon » ────────────────────────────────────── */ .wordmark { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; transition: opacity .55s ease; } .stage:not([data-step="0"]) .wordmark { opacity: 0; } .wordmark__title { margin: 0; font-family: var(--display); font-size: clamp(22px, 3.2vw, 46px); font-weight: 400; letter-spacing: .34em; text-indent: .34em; color: #F4EEE0; text-transform: uppercase; line-height: 1; } .wordmark__sub { margin: 0; max-width: 30ch; font-size: clamp(11px, 1vw, 13px); letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; color: rgba(237,230,214,.42); text-wrap: balance; } /* ── Panneaux de texte ───────────────────────────────────────────── */ .panels { position: absolute; left: 0; right: 0; bottom: calc(var(--footer-h) + 8px); height: max(210px, 30svh); display: grid; place-items: center; padding: 0 6vw; pointer-events: none; } .panel { grid-area: 1 / 1; width: min(900px, 100%); text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .95s var(--ease); will-change: opacity, transform; } .panel.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .panel.is-past { transform: translateY(-16px); } .panel__tagline { margin: 0; font-size: clamp(19px, 2.3vw, 34px); line-height: 1.42; letter-spacing: .01em; color: #E8E1D2; text-wrap: pretty; } .panel__eyebrow { margin: 0 0 clamp(14px, 2vh, 24px); font-size: 10px; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; color: rgba(227,172,70,.7); } .panel__text { margin: 0; font-size: clamp(17px, 1.95vw, 29px); line-height: 1.5; color: #E8E1D2; text-wrap: pretty; } .panel__brand { font-family: var(--display); font-weight: 400; letter-spacing: .04em; color: #F1D18A; } /* ── Dernière étape : valeurs + contact ──────────────────────────── */ .panel--final { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vh, 18px); } .values { display: flex; align-items: center; gap: clamp(16px, 3vw, 44px); } .values__item { appearance: none; background: none; border: 0; padding: 14px 6px; /* ≥ 44 px de haut : confort tactile */ cursor: pointer; font-family: var(--display); font-size: clamp(13px, 1.3vw, 18px); letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; color: rgba(244,238,224,.55); transition: color .3s ease; } .values__item:hover, .values__item:focus-visible, .values__item.is-on { color: var(--gold-lite); } .values__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); flex: none; } .values__caption { margin: 0; min-height: 1.5em; font-size: clamp(13px, 1.15vw, 16px); letter-spacing: .04em; color: rgba(237,230,214,.72); text-wrap: pretty; } .cta { display: inline-flex; align-items: center; gap: 9px; padding: 11px 24px; border: 1px solid rgba(227,172,70,.45); border-radius: 999px; font-size: clamp(12px, 1.1vw, 14px); letter-spacing: .16em; text-indent: .16em; text-transform: uppercase; color: var(--gold); background: rgba(227,172,70,.05); transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--ease); } .cta:hover { background: rgba(227,172,70,.13); border-color: rgba(251,228,154,.75); color: var(--gold-lite); transform: translateY(-2px); } .cta svg { transition: transform .3s var(--ease); } .cta:hover svg { transform: translateX(3px); } /* ── Indication « Défiler » ──────────────────────────────────────── */ .cue { position: absolute; left: 50%; bottom: calc(var(--footer-h) + 10px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; font-size: 10px; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: rgba(237,230,214,.5); animation: pmCue 2.6s ease-in-out infinite; transition: opacity .45s ease; } .stage:not([data-step="0"]) .cue { opacity: 0; } .cue__line { width: 1px; height: 34px; background: linear-gradient(to bottom, rgba(227,172,70,.9), rgba(227,172,70,0)); } /* ── Repères d'étape ─────────────────────────────────────────────── */ .dots { position: absolute; right: clamp(4px, 1.6vw, 24px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; } /* La pastille visible fait 6 px, mais la zone cliquable est bien plus large : c'est elle qui doit rester confortable au doigt. */ .dots button { appearance: none; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .dots button::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(237,230,214,.22); transition: background .3s ease, transform .3s var(--ease); } .dots button:hover::after { background: rgba(237,230,214,.5); } .dots button[aria-current="true"]::after { background: var(--gold); transform: scale(1.5); } /* ── Pied de page ────────────────────────────────────────────────── */ .footer { position: absolute; left: 0; right: 0; bottom: 0; height: var(--footer-h); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 0 5vw calc(env(safe-area-inset-bottom, 0px) / 2); font-size: 11px; letter-spacing: .12em; color: rgba(237,230,214,.3); } .footer a { display: inline-block; padding: 9px 6px; /* zone de contact agrandie sans changer le visuel */ margin: -9px -6px; color: rgba(237,230,214,.45); } .footer a:hover { color: var(--gold); } .footer__sep { opacity: .5; } /* ── Sans JavaScript ─────────────────────────────────────────────── */ .noscript { position: fixed; inset: auto 0 0 0; z-index: 20; padding: 22px 5vw calc(22px + env(safe-area-inset-bottom, 0px)); background: rgba(6,10,22,.94); border-top: 1px solid rgba(227,172,70,.25); text-align: center; font-size: 14px; line-height: 1.6; } .noscript p { margin: 0 0 6px; } /* ── Écrans étroits ──────────────────────────────────────────────── */ @media (max-width: 640px) { /* le pied de page passe sur deux lignes : on lui laisse la place */ :root { --footer-h: 68px; } .wordmark__sub { letter-spacing: .18em; text-indent: .18em; } .dots { right: 2px; gap: 2px; } .dots button { width: 32px; height: 32px; } .values { gap: 10px; } .panels { padding: 0 7vw; } } /* très petits écrans : le pied de page doit tenir sur une ligne */ @media (max-width: 380px) { .footer { font-size: 10px; letter-spacing: .06em; gap: 7px; } } /* écrans bas (paysage mobile) : on resserre */ @media (max-height: 560px) { .badge { width: clamp(150px, 22vh, 230px); } .panels { height: max(170px, 34svh); } .cue { display: none; } } /* ── Respect de « réduire les animations » ───────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; scroll-snap-type: none; } .starfield, .twinkles, .twinkles i, .starfield__layer, .starfield__sway, .badge__float, .badge__rings, .glow, .crest__bob, .crest__flame, .crest__shine, .cue, .crest__ship, .crest__plume { animation: none !important; } .badge { cursor: default; } .badge__rings { display: none; } .center, .panel, .wordmark, .cta, .crest__rocket, .crest__plume { transition-duration: .01ms !important; } } /* ── Animations ──────────────────────────────────────────────────── */ @keyframes pmRing { 0% { transform: scale(.92); opacity: 0; } 14% { opacity: .5; } 100% { transform: scale(2.05); opacity: 0; } } @keyframes pmBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes pmFloat { 0%, 100% { transform: translateY(0) rotate(-.25deg); } 50% { transform: translateY(-14px) rotate(.25deg); } } @keyframes pmSweep { 0%, 18% { transform: translateX(0) skewX(-16deg); opacity: 0; } 30% { opacity: 1; } 62%, 100% { transform: translateX(1000px) skewX(-16deg); opacity: 0; } } @keyframes pmGlow { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .65; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: .9; } } @keyframes pmDriftA { to { transform: translate3d(-420px, 420px, 0); } } @keyframes pmDriftB { to { transform: translate3d(-700px, 700px, 0); } } @keyframes pmSwirl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pmTwinkle { 0%, 100% { opacity: .12; transform: scale(.75); } 50% { opacity: .95; transform: scale(1.35); } } @keyframes pmSway { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(14px, -9px, 0); } } @keyframes pmFlicker { 0%, 100% { opacity: .8; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.14); } } @keyframes pmCue { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } } /* Un tour complet, puis retour exact à la position de départ. Les distances sont en unités du viewBox (600 × 600) : le léger rétrécissement au sommet évite que la fusée ne déborde du blason. */ @keyframes pmLoop { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 14% { transform: translate(0, -20px) rotate(0deg) scale(1); } 26% { transform: translate(6px, -29px) rotate(-30deg) scale(.92); } 42% { transform: translate(17px, -42px) rotate(-140deg) scale(.85); } 58% { transform: translate(3px, -45px) rotate(-244deg) scale(.85); } 72% { transform: translate(-10px, -33px) rotate(-330deg) scale(.94); } 84% { transform: translate(-2px, -14px) rotate(-360deg) scale(1); } 92% { transform: translate(0, 5px) rotate(-360deg) scale(1); } 97% { transform: translate(0, -2px) rotate(-360deg) scale(1); } 100% { transform: translate(0, 0) rotate(-360deg) scale(1); } } /* La flamme s'allume au décollage et s'éteint à l'atterrissage. */ @keyframes pmPlumeBurst { 0% { opacity: 0; transform: translateY(0) scaleY(.4); } 8% { opacity: .8; transform: translateY(-4px) scaleY(1.2); } 60% { opacity: .7; transform: translateY(-5px) scaleY(1); } 82% { opacity: .25; transform: translateY(-2px) scaleY(.7); } 92% { opacity: 0; transform: translateY(0) scaleY(.4); } 100% { opacity: 0; transform: translateY(0) scaleY(.4); } }