/* ═════════════════════════════════════════════════════════════════════════════ TCF INVITATION — CRITICAL CSS Above-the-fold uniquement : variables charte + body baseline + splash V2. Chargé synchrone dans pour LCP < 1.2s ; le reste (invitation.css ~378 KB) est chargé async via rel="preload" puis converti en stylesheet. IMPORTANT : ne contient QUE ce qui est visible avant la première interaction utilisateur (donc avant que le splash ne se ferme). Ajouter du contenu hors-splash ici annulerait le bénéfice perf. Source : extrait minutieusement de invitation.css (sections root, particle-float, env2-splash et leurs keyframes dépendantes). ═════════════════════════════════════════════════════════════════════════════ */ /* ── Variables charte (utilisées par le splash) ─────────────────────────────── */ :root { --tch-primary: #1E2A5A; --tch-primary-hover: #16204A; --tch-secondary: #1F7A5C; --tch-secondary-hover: #17624A; --tch-tertiary: #1E2A5A; --tch-accent: #C6A15B; --tch-accent-hover: #A8843D; --tch-bg: #FFF7EA; --tch-surface: #FFFFFF; --tch-text: #1a1a2e; --tch-text-muted: #6b6b7b; --tch-error: #DC2626; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); } /* ── Body baseline (anti-FOUC) ──────────────────────────────────────────────── */ body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--tch-bg); color: var(--tch-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Splash V2 « Enveloppe qui s'ouvre » ────────────────────────────────────── */ .env2-splash { --env-primary: var(--tch-primary, #1E2A5A); --env-accent: var(--tch-accent, #C6A15B); position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--env-primary) 0%, color-mix(in srgb, var(--env-primary), #000 30%) 100%); overflow: hidden; } .env2-splash__bg { position: absolute; inset: 0; z-index: 0; } .env2-splash__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(20px) brightness(0.3); } .env2-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .env2-particle { position: absolute; width: 6px; height: 6px; background: var(--env-accent); border-radius: 50%; opacity: 0; animation: particle-float 8s infinite ease-in-out; } .env2-content { position: relative; z-index: 10; text-align: center; perspective: 1500px; } .env2-envelope-wrapper { position: relative; width: 320px; height: 220px; margin: 0 auto 2.5rem; transform-style: preserve-3d; animation: envelope-arrive 1s var(--ease-out-expo), envelope-float 4s ease-in-out 1s infinite; } .env2-envelope { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s var(--ease-spring); } .env2-envelope.opening { transform: translateY(-40px); } .env2-back { position: absolute; inset: 0; background: linear-gradient(145deg, var(--env-accent) 0%, color-mix(in srgb, var(--env-accent), #000 20%) 100%); border-radius: 0 0 12px 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.2); } .env2-flap-top { position: absolute; top: 0; left: 0; right: 0; height: 110px; background: linear-gradient(180deg, color-mix(in srgb, var(--env-accent), #fff 15%) 0%, var(--env-accent) 100%); clip-path: polygon(0 0, 50% 100%, 100% 0); transform-origin: top; transition: transform 0.8s var(--ease-out-expo); z-index: 20; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .env2-envelope.opening .env2-flap-top { transform: rotateX(180deg); z-index: 5; } .env2-flap-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 110px; background: linear-gradient(0deg, color-mix(in srgb, var(--env-accent), #000 10%) 0%, color-mix(in srgb, var(--env-accent), #000 20%) 100%); clip-path: polygon(0 100%, 50% 0, 100% 100%); z-index: 15; } .env2-flap-left { position: absolute; top: 0; left: 0; width: 160px; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--env-accent), #000 15%) 0%, color-mix(in srgb, var(--env-accent), #000 20%) 100%); clip-path: polygon(0 0, 100% 50%, 0 100%); z-index: 10; } .env2-flap-right { position: absolute; top: 0; right: 0; width: 160px; height: 100%; background: linear-gradient(-90deg, color-mix(in srgb, var(--env-accent), #000 15%) 0%, color-mix(in srgb, var(--env-accent), #000 20%) 100%); clip-path: polygon(100% 0, 0 50%, 100% 100%); z-index: 10; } .env2-seal { position: absolute; top: -15px; left: 45%; transform: translateX(-50%); width: 50px; height: 50px; background: radial-gradient(circle at 30% 30%, var(--env-primary), color-mix(in srgb, var(--env-primary), #000 30%)); border-radius: 50%; z-index: 25; box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 -3px 8px rgba(0,0,0,0.3), inset 0 3px 8px rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; animation: seal-pulse 2s ease-in-out infinite; } .env2-seal::before { content: "\2665"; font-size: 20px; color: rgba(255,255,255,0.9); text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .env2-envelope.opening .env2-seal { animation: seal-break 0.6s var(--ease-spring) forwards; } .env2-card { position: absolute; top: 10px; left: 10px; right: 10px; height: 180px; background: linear-gradient(135deg, #fffef8 0%, #fdf9f0 100%); border-radius: 8px; z-index: 8; transform: translateY(0); transition: transform 1s var(--ease-spring); box-shadow: 0 4px 20px rgba(0,0,0,0.15); overflow: hidden; } .env2-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(198,161,91,0.25); border-radius: 4px; pointer-events: none; } .env2-envelope.opening .env2-card { transform: translateY(-135px); transition-delay: 0.4s; } .env2-card__inner { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 12px 12px 8px; background: rgba(255,255,255,0.95); opacity: 1; animation: content-reveal 5s var(--ease-out-expo) 1s; } .env2-card__portraits { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .env2-card__portrait { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--env-accent); box-shadow: 0 2px 8px rgba(198,161,91,0.3); cursor: pointer; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .env2-card__portrait img { width: 100%; height: 100%; object-fit: cover; } .env2-card__amp { font-family: 'Alex Brush', cursive; font-size: 1.2rem; color: var(--env-accent); line-height: 1; } .env2-card__label { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em; color: var(--env-primary); opacity: 0; animation: text-reveal 5s var(--ease-out-expo) forwards; } .env2-card__names { font-family: 'Alex Brush', cursive; font-size: 1.55rem; font-weight: 400; color: var(--tch-error); line-height: 1; margin: 0; opacity: 0; animation: text-reveal 5s var(--ease-out-expo) 0.3s forwards; } .env2-card__date { font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--tch-primary); opacity: 0; animation: text-reveal 5s var(--ease-out-expo) 0.6s forwards; } .env2-card__city { font-family: 'Inter', sans-serif; font-size: 0.55rem; color: var(--tch-text-muted); letter-spacing: 0.15em; text-transform: uppercase; opacity: 0; animation: text-reveal 5s var(--ease-out-expo) 0.8s forwards; } .env2-card__countdown { margin-top: 2px; opacity: 0; animation: text-reveal 5s var(--ease-out-expo) 1s forwards; } .env2-card__countdown-number { font-size: 0.6rem; font-weight: 700; color: var(--env-accent); background: var(--env-primary); padding: 2px 10px; border-radius: 12px; } /* Accueil personnalisé de l'invité reconnu sur le splash V2 (compact pour tenir dans la zone émergée de la carte, sans déborder sur les rabats). */ .env2-card__honour { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-bottom: 2px; max-width: 100%; opacity: 0; animation: text-reveal 5s var(--ease-out-expo) forwards; } .env2-card__honour-eyebrow { font-family: 'Inter', sans-serif; font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--env-accent); display: inline-flex; align-items: center; gap: 4px; } .env2-card__honour-name { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 0.95rem; line-height: 1.1; color: var(--tch-primary); max-width: 100%; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .env2-card__honour--honorific .env2-card__honour-eyebrow { color: var(--tch-accent); } /* Carte avec invité d'honneur : on compresse les éléments standard pour loger le bloc d'honneur, le nom complet (jusqu'à 2 lignes) ET le compte à rebours dans la zone émergée de la carte, sans déborder sur les rabats. */ .env2-card__inner--honour { gap: 1px; } .env2-card__inner--honour .env2-card__portraits { margin-bottom: 1px; } .env2-card__inner--honour .env2-card__portrait { width: 30px; height: 30px; } .env2-card__inner--honour .env2-card__names { font-size: 1.3rem; } .env2-card__inner--honour .env2-card__label { font-size: 0.62rem; letter-spacing: 0.2em; } .env2-card__inner--honour .env2-card__date { font-size: 0.6rem; } .env2-card__inner--honour .env2-card__countdown { margin-top: 1px; } .env2-open-btn { position: relative; display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 2.5rem; background: transparent; border: 2px solid var(--env-accent); border-radius: 100px; color: var(--env-accent); font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; opacity: 0; transform: translateY(20px); animation: btn-entrance 5s var(--ease-out-expo) forwards; overflow: hidden; } .env2-open-btn::after { content: ''; position: absolute; inset: -4px; border: 2px solid var(--env-accent); border-radius: 100px; opacity: 0; animation: btn-pulse 2s ease-out 5s infinite; } .env2-open-btn::before { content: ""; position: absolute; inset: 0; background: var(--env-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out-expo); z-index: -1; } .env2-open-btn i { font-size: 0.9rem; transition: transform 0.3s var(--ease-spring); } .env2-open-btn.hidden { opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s; } .env2-open-btn--discover { background: var(--env-accent); color: var(--env-primary); border-color: var(--env-accent); opacity: 0; animation: discover-entrance 0.8s var(--ease-out-expo) forwards; font-size: 0.85rem; padding: 1.1rem 2.8rem; } .env2-splash.exiting { animation: splash-exit 0.8s var(--ease-in-out-circ) forwards; } @media (max-width: 480px) { .env2-envelope-wrapper { width: 280px; height: 190px; } .env2-flap-top { height: 95px; } .env2-flap-bottom { height: 95px; } .env2-flap-left { width: 140px; } .env2-flap-right { width: 140px; } .env2-card { height: 160px; } .env2-card__names { font-size: 1.35rem; } .env2-card__portrait { width: 28px; height: 28px; } .env2-card__honour-name { font-size: 0.85rem; } .env2-card__inner--honour .env2-card__names { font-size: 1.15rem; } .env2-card__inner--honour .env2-card__portrait { width: 26px; height: 26px; } } /* ── Keyframes du splash ────────────────────────────────────────────────────── */ @keyframes particle-float { 0%, 100% { opacity: 0; transform: translateY(100vh) scale(0); } 10%, 90% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(-100px) scale(1); } } @keyframes envelope-arrive { 0% { opacity: 0; transform: translateY(60px) scale(0.9); filter: blur(10px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes envelope-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes seal-pulse { 0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 4px 15px rgba(0,0,0,0.4), 0 0 0 0 rgba(220,38,38,0.4); } 50% { transform: translateX(-50%) scale(1.05); box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 20px 10px rgba(220,38,38,0); } } @keyframes seal-break { to { transform: translateX(-50%) scale(0) rotate(180deg); opacity: 0; } } @keyframes content-reveal { 0%, 20% { opacity: 0; transform: translateY(20px) scale(0.95); } 30%, 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes text-reveal { 0%, 20% { opacity: 0; transform: translateY(15px); filter: blur(5px); } 30%, 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes btn-entrance { 0%, 50% { opacity: 0; transform: translateY(20px); } 60% { opacity: 1; transform: translateY(0); } 70%, 100% { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 0 rgba(198,161,91,0.4); } } @keyframes btn-pulse { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } } @keyframes discover-entrance { 0% { opacity: 0; transform: translateY(20px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes splash-exit { to { opacity: 0; visibility: hidden; } } /* ── Respect des préférences accessibilité ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .env2-envelope-wrapper, .env2-particle, .env2-seal, .env2-card__inner, .env2-card__label, .env2-card__names, .env2-card__date, .env2-card__city, .env2-card__countdown, .env2-open-btn { animation: none !important; opacity: 1 !important; transform: none !important; } }