/* ============================================================ STYLE PRINCIPAL — Site d'invitation Anna & Wonder ============================================================ Ce fichier contient tous les styles personnalisés qui viennent compléter ou remplacer Tailwind CSS. ORGANISATION : 1. Variables de couleurs (palette du mariage) 2. Base : body, typo, scroll 3. Décorations : grain, glassmorphism, dégradés dorés 4. Composants : boutons, champs, chips, cartes 5. Animations : pétales, scroll-reveal, marquee, shake 6. Sections spécifiques : héros, galerie, lightbox 7. Accessibilité : reduce-motion ============================================================ */ /* === 1. PALETTE DE COULEURS ============================== */ /* On centralise les couleurs dans des variables CSS pour pouvoir les réutiliser partout et changer le thème facilement. */ :root { --rose: #E8B4B0; --rose-soft: #F5D5D0; --rose-faint: #FBF0EE; --cream: #FAF7F2; --sand: #F2EBE0; --cocoa: #5C3A2E; --cocoa-deep: #3F2A22; --gold: #C9A961; --gold-deep: #B08D45; } /* === 2. BASE GÉNÉRALE ==================================== */ html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--cream); color: var(--cocoa); overflow-x: hidden; } /* Thème sombre activé par la classe .dark sur */ .dark body { background: #1A1410; color: #EFE4D8; } /* === 3. EFFET GRAIN DE PAPIER ============================ */ /* Texture subtile sur tout le site pour un rendu "imprimé" */ .grain::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; 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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.23 0 0 0 0 0.18 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .35; mix-blend-mode: multiply; } .dark .grain::before { opacity: .25; mix-blend-mode: screen; } /* === GLASSMORPHISM ======================================= */ /* Effet "verre dépoli" utilisé sur de nombreuses cartes */ .glass { background: rgba(255, 255, 255, .55); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255, 255, 255, .6); } .dark .glass { background: rgba(40, 28, 22, .55); border-color: rgba(201, 169, 97, .18); } /* === SÉPARATEUR DORÉ ===================================== */ .divider { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--gold); } .divider::before, .divider::after { content: ''; flex: 1; max-width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* === EFFETS DE RÉVÉLATION AU SCROLL ====================== */ /* Les éléments avec .reveal apparaissent en glissant doucement quand ils entrent dans le viewport. La classe .in est ajoutée par main.js via un IntersectionObserver. */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: .12s; } .reveal-delay-2 { transition-delay: .24s; } .reveal-delay-3 { transition-delay: .36s; } /* === HÉROS : IMAGE DE FOND ET PARALLAXE ================== */ .hero { background: linear-gradient(180deg, rgba(250,247,242,0) 0%, rgba(250,247,242,.55) 75%, rgba(250,247,242,1) 100%), radial-gradient(80% 60% at 30% 20%, rgba(245,213,208,.85), transparent 60%), radial-gradient(60% 50% at 80% 30%, rgba(201,169,97,.25), transparent 60%), url('../images/hero.jpeg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } .dark .hero { background: linear-gradient(180deg, rgba(26,20,16,.2) 0%, rgba(26,20,16,.75) 75%, rgba(26,20,16,1) 100%), radial-gradient(80% 60% at 30% 20%, rgba(92,58,46,.6), transparent 60%), url('../images/hero.jpeg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } /* === COMPATIBILITÉ MOBILE ================================ La propriété "background-attachment: fixed" est mal supportée sur mobile (surtout iOS Safari) — ça fait DISPARAÎTRE l'image. On force le mode "scroll" sur tous les écrans tactiles et les écrans < 1024px pour garantir l'affichage. ========================================================= */ @media (max-width: 1024px), (hover: none) and (pointer: coarse) { .hero, .dark .hero { background-attachment: scroll !important; } } /* === PÉTALES QUI TOMBENT ================================= */ /* Petits éléments roses générés en JS qui descendent du haut */ .petal { position: absolute; width: 18px; height: 18px; pointer-events: none; background: radial-gradient(circle at 30% 30%, #F7C9C2, #D9928D); border-radius: 80% 20% 70% 30% / 60% 40% 60% 40%; opacity: .7; animation: fall linear infinite; filter: blur(.2px); } @keyframes fall { 0% { transform: translate3d(0,-10vh,0) rotate(0deg); opacity: 0; } 10% { opacity: .85; } 100% { transform: translate3d(40px,110vh,0) rotate(540deg); opacity: 0; } } /* === BANDEAU "SAVE THE DATE" QUI DÉFILE ================== */ .marquee { white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: inline-flex; gap: 3rem; animation: scroll 28s linear infinite; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* === DÉCORATION DORÉE ==================================== */ .flourish { color: var(--gold); } /* === CARTES DU COMPTE À REBOURS ========================== */ .digit-card { background: rgba(255,255,255,.6); border: 1px solid rgba(201,169,97,.35); border-radius: 1.25rem; backdrop-filter: blur(14px); box-shadow: 0 8px 30px -10px rgba(92,58,46,.2), inset 0 1px 0 rgba(255,255,255,.6); } .dark .digit-card { background: rgba(63,42,34,.55); border-color: rgba(201,169,97,.35); box-shadow: 0 8px 30px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(201,169,97,.2); } /* === BOUTONS PRINCIPAUX ================================== */ .btn-gold { background: linear-gradient(135deg, #D4BB72, #B08D45); color: #fff; letter-spacing: .08em; box-shadow: 0 8px 24px -8px rgba(176,141,69,.55), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .3s ease, box-shadow .3s ease, filter .3s ease; } .btn-gold:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 30px -8px rgba(176,141,69,.65); } .btn-ghost { border: 1px solid var(--gold); color: var(--cocoa); letter-spacing: .08em; transition: all .3s ease; } .btn-ghost:hover { background: var(--gold); color: #fff; } .dark .btn-ghost { color: #EFE4D8; } /* === LIGNE VERTICALE DES TIMELINES ======================= */ .timeline-line { background: linear-gradient(180deg, transparent, var(--gold), var(--gold), transparent); } /* === GALERIE PHOTOS ====================================== */ .gallery-item { position: relative; overflow: hidden; border-radius: 1.25rem; cursor: pointer; } .gallery-item img { transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease; } .gallery-item:hover img { transform: scale(1.08); filter: saturate(1.15); } .gallery-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(60,40,30,.55)); opacity: 0; transition: opacity .4s ease; } .gallery-item:hover::after { opacity: 1; } /* === LIGHTBOX ============================================ */ .lightbox { background: rgba(20,12,8,.92); backdrop-filter: blur(10px); } /* === CHAMPS DE FORMULAIRE ================================ */ .field { background: rgba(255,255,255,.6); border: 1px solid rgba(201,169,97,.4); border-radius: .85rem; padding: .85rem 1rem; width: 100%; color: var(--cocoa); transition: all .25s ease; font-family: 'Inter', sans-serif; } .field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,169,97,.18); } .dark .field { background: rgba(40,28,22,.55); color: #EFE4D8; border-color: rgba(201,169,97,.3); } /* === CHIPS (boutons radio/check stylisés) ================ */ .chip { cursor: pointer; padding: .7rem 1.2rem; border-radius: 9999px; border: 1px solid rgba(201,169,97,.5); transition: all .25s ease; font-size: .9rem; letter-spacing: .04em; user-select: none; } .chip input { display: none; } .chip.checked { background: linear-gradient(135deg, #D4BB72, #B08D45); color: #fff; border-color: transparent; } /* Animation "shake" : lorsqu'on essaie de sélectionner une 3ᵉ boisson au-delà de la limite de 2 */ .drink-chip.shake { animation: shake .45s cubic-bezier(.36,.07,.19,.97); } @keyframes shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX( 2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX( 4px); } } /* === CARTES "CADEAUX" ==================================== */ .qr-card { background: linear-gradient(135deg, #FFFFFF, #F5D5D0 140%); border: 1px solid rgba(201,169,97,.35); } .dark .qr-card { background: linear-gradient(135deg, #2A1C16, #3F2A22); } /* === ANIMATION PULSE (bouton WhatsApp) =================== */ .pulse-ring { box-shadow: 0 0 0 0 rgba(201,169,97,.55); animation: pulseRing 2.5s infinite; } @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(201,169,97,.5); } 70% { box-shadow: 0 0 0 22px rgba(201,169,97,0); } 100% { box-shadow: 0 0 0 0 rgba(201,169,97,0); } } /* === LOADER DE DÉMARRAGE ================================= */ .loader { position: fixed; inset: 0; z-index: 200; background: var(--cream); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.25rem; transition: opacity .8s ease, visibility .8s ease; } .dark .loader { background: #1A1410; } .loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .ring { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(201,169,97,.25); border-top-color: var(--gold); animation: spin 1.1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* === ÉLÉMENTS TYPOGRAPHIQUES ============================= */ .eyebrow { letter-spacing: .4em; text-transform: uppercase; font-size: .72rem; color: var(--gold-deep); } .dark .eyebrow { color: #D4BB72; } /* Petit flottement infini (pour la flèche du héros) */ .float { animation: float 6s ease-in-out infinite; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* === TITRE DÉGRADÉ SCINTILLANT =========================== */ /* Effet "shine" qui balaie le titre principal du héros */ .title-shine { background: linear-gradient(90deg, #5C3A2E 0%, #C9A961 50%, #5C3A2E 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shine 6s linear infinite; } .dark .title-shine { background: linear-gradient(90deg, #EFE4D8 0%, #D4BB72 50%, #EFE4D8 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @keyframes shine { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } /* === CARTE ============================================== */ .map-wrap { border-radius: 1.5rem; overflow: hidden; border: 1px solid rgba(201,169,97,.35); } /* === FOND DÉCORÉ DU FOOTER =============================== */ .ornament-bg { background: radial-gradient(60% 50% at 50% 0%, rgba(245,213,208,.6), transparent 60%), linear-gradient(180deg, #FAF7F2, #F2EBE0); } .dark .ornament-bg { background: radial-gradient(60% 50% at 50% 0%, rgba(92,58,46,.7), transparent 60%), linear-gradient(180deg, #1A1410, #221814); } /* === ACCESSIBILITÉ : RESPECT DE PREFERS-REDUCED-MOTION === */ /* Si l'utilisateur a activé la réduction des animations dans son OS, on désactive toutes les transitions et animations. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================================ BILLET ÉLECTRONIQUE PERSONNEL (dans le hero) ============================================================ Affiché uniquement si l'invité a une table assignée. Style "carte d'embarquement" avec perforations latérales. ============================================================ */ .ticket-card { background: linear-gradient(135deg, #FFFFFF 0%, #FAF7F2 100%); border-radius: 1.5rem; box-shadow: 0 25px 60px -15px rgba(60,40,30,.35), inset 0 1px 0 rgba(255,255,255,.8); overflow: hidden; position: relative; border: 1px solid rgba(201,169,97,.3); text-align: left; } .dark .ticket-card { background: linear-gradient(135deg, #2A1C16 0%, #3F2A22 100%); border-color: rgba(201,169,97,.25); box-shadow: 0 25px 60px -15px rgba(0,0,0,.6); } /* === EN-TÊTE DU BILLET === */ .ticket-header { background: linear-gradient(135deg, var(--ticket-color, #C9A961), rgba(176,141,69,.85)); color: white; padding: 1.5rem 1.75rem; text-align: center; } .ticket-eyebrow { font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .4em; font-size: .65rem; opacity: .85; margin: 0 0 .25rem; } .ticket-couple { font-family: 'Great Vibes', cursive; font-size: 2.25rem; margin: 0; line-height: 1; } .ticket-event { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1rem; margin: .5rem 0 0; opacity: .95; } /* === PERFORATIONS (effet "à découper") === */ .ticket-perforation { position: relative; height: 24px; background: var(--cream, #FAF7F2); background-image: linear-gradient(to right, rgba(201,169,97,.4) 50%, transparent 50%); background-size: 12px 1px; background-repeat: repeat-x; background-position: center; } .dark .ticket-perforation { background-color: #1A1410; } .ticket-perforation::before, .ticket-perforation::after { content: ''; position: absolute; top: 50%; width: 24px; height: 24px; background: var(--cream, #FAF7F2); border-radius: 50%; transform: translateY(-50%); } .ticket-perforation::before { left: -12px; } .ticket-perforation::after { right: -12px; } .dark .ticket-perforation::before, .dark .ticket-perforation::after { background: #1A1410; } /* === CORPS DU BILLET === */ .ticket-body { padding: 1.5rem 1.75rem; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; } @media (max-width: 480px) { .ticket-body { grid-template-columns: 1fr; text-align: center; } .ticket-qr { justify-self: center; } } .ticket-info-row + .ticket-info-grid { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(201,169,97,.3); } .ticket-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .ticket-label { font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .25em; font-size: .6rem; color: var(--gold-deep); margin: 0 0 .2rem; } .ticket-value { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 600; color: var(--cocoa-deep); margin: 0; line-height: 1.2; } .ticket-value-big { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--cocoa-deep); margin: 0; line-height: 1; } .dark .ticket-value, .dark .ticket-value-big { color: #EFE4D8; } /* === QR CODE === */ .ticket-qr { text-align: center; } #qrcode-ticket { background: white; padding: .75rem; border-radius: .75rem; display: inline-block; box-shadow: 0 4px 12px -4px rgba(60,40,30,.2); } #qrcode-ticket img, #qrcode-ticket canvas { display: block; } .ticket-qr-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .8rem; color: var(--gold-deep); margin: .5rem 0 0; } /* === PIED DU BILLET === */ .ticket-footer { background: rgba(245,213,208,.3); padding: 1rem 1.75rem; border-top: 1px dashed rgba(201,169,97,.3); text-align: center; } .dark .ticket-footer { background: rgba(92,58,46,.4); } .ticket-venue { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .85rem; color: var(--cocoa); margin: 0 0 .75rem; } .dark .ticket-venue { color: rgba(239,228,216,.8); } .ticket-download { background: transparent; border: 1px solid var(--gold); color: var(--cocoa); padding: .55rem 1.25rem; border-radius: 9999px; font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; cursor: pointer; transition: all .25s ease; font-family: 'Inter', sans-serif; } .ticket-download:hover { background: var(--gold); color: white; } .dark .ticket-download { color: #EFE4D8; } /* ============================================================ CARTE VIP — Message personnalisé pour l'invité dans le hero ============================================================ Affichage très visible et élégant du nom de l'invité. Couleur dorée, ornements, animation subtile. ============================================================ */ .vip-greeting { margin: 1.5rem auto 2rem; max-width: 580px; padding: 0 1rem; } .vip-greeting-inner { background: rgba(255, 255, 255, .65); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(201, 169, 97, .5); border-radius: 1.25rem; padding: 1.5rem 2rem; text-align: center; position: relative; box-shadow: 0 15px 40px -10px rgba(201, 169, 97, .35), inset 0 1px 0 rgba(255, 255, 255, .8); animation: vipShimmer 4s ease-in-out infinite; } /* Effet de brillance subtile qui passe sur la carte */ @keyframes vipShimmer { 0%, 100% { box-shadow: 0 15px 40px -10px rgba(201, 169, 97, .35), inset 0 1px 0 rgba(255, 255, 255, .8); } 50% { box-shadow: 0 18px 50px -10px rgba(201, 169, 97, .5), inset 0 1px 0 rgba(255, 255, 255, 1); } } .dark .vip-greeting-inner { background: rgba(40, 28, 22, .65); border-color: rgba(201, 169, 97, .4); } /* Petites étoiles décoratives en haut */ .vip-eyebrow { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .85rem; letter-spacing: .3em; color: var(--gold-deep); text-transform: uppercase; margin-bottom: .5rem; } .vip-welcome { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: var(--cocoa); margin: 0; opacity: .85; } .dark .vip-welcome { color: #EFE4D8; } /* LE NOM EN GRAND — c'est l'élément clé */ .vip-name { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 600; margin: .25rem 0 .75rem; line-height: 1.1; background: linear-gradient(135deg, #B08D45 0%, #D4BB72 50%, #B08D45 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shine 5s linear infinite; letter-spacing: .02em; } .vip-subtitle { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .95rem; color: rgba(60, 40, 30, .75); margin: 0; line-height: 1.4; } .dark .vip-subtitle { color: rgba(239, 228, 216, .75); } /* Sur mobile, on adoucit un peu */ @media (max-width: 480px) { .vip-greeting-inner { padding: 1.25rem 1.5rem; } .vip-subtitle { font-size: .85rem; } } /* ============================================================ BOUTONS DE TÉLÉCHARGEMENT DU BILLET (PNG + PDF) ============================================================ */ .ticket-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; } .ticket-actions .ticket-download { flex: 1; min-width: 130px; max-width: 180px; } /* Variante PDF : style légèrement différent pour distinguer */ .ticket-download-pdf { background: linear-gradient(135deg, #D4BB72, #B08D45) !important; border-color: transparent !important; color: white !important; } .ticket-download-pdf:hover { filter: brightness(1.08); transform: translateY(-1px); } /* Sur mobile, les boutons en colonne pour plus de lisibilité */ @media (max-width: 380px) { .ticket-actions { flex-direction: column; } .ticket-actions .ticket-download { max-width: 100%; } } /* ============================================================ LIBELLÉ DE PRÉSENCE SUR LE BILLET ============================================================ Affiche "Singleton", "Couple" ou "Groupe de N" au lieu d'un simple chiffre. Le texte étant plus long, on adapte la taille. ============================================================ */ .ticket-value-presence { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 600; color: var(--cocoa-deep); margin: 0; line-height: 1.1; letter-spacing: -.01em; } .dark .ticket-value-presence { color: #EFE4D8; } /* Sur mobile, on réduit légèrement pour que ça tienne */ @media (max-width: 480px) { .ticket-value-presence { font-size: 1.1rem; } } /* ============================================================ LIEN VERS L'ACCUEIL — BOUTON CLIQUABLE BIEN DÉLIMITÉ ============================================================ Le lien apparaît comme un vrai bouton, clairement séparé de l'adresse de la salle. Seule la phrase est cliquable. ============================================================ */ .ticket-home-wrapper { text-align: center; margin: .75rem 0; } .ticket-home-link { display: inline-block; padding: .6rem 1.25rem; background: rgba(201, 169, 97, .12); border: 1px solid rgba(201, 169, 97, .35); border-radius: 9999px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .95rem; color: var(--gold-deep); font-weight: 500; text-decoration: none; letter-spacing: .01em; transition: all .25s ease; cursor: pointer; } .ticket-home-link:hover { background: rgba(201, 169, 97, .25); border-color: var(--gold); color: var(--cocoa-deep); transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(201, 169, 97, .4); } /* URL en dessous, juste pour info (non cliquable) */ .ticket-home-url-display { font-family: 'Inter', sans-serif; font-size: .7rem; color: rgba(60, 40, 30, .5); margin: .4rem 0 0; letter-spacing: .03em; } /* Mode sombre */ .dark .ticket-home-link { background: rgba(212, 187, 114, .15); border-color: rgba(212, 187, 114, .35); color: #D4BB72; } .dark .ticket-home-link:hover { background: rgba(212, 187, 114, .25); color: #EFE4D8; } .dark .ticket-home-url-display { color: rgba(239, 228, 216, .45); }