/* ===== Marine palette & base ===== */ :root{ --bg:#08121f; /* deep navy */ --brand:#12b4ff; /* marine cyan accent */ --brand-2:#7fd3ff; /* light aqua */ --ink:#e6f2ff; /* pale ink for soft tints */ } html,body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans"; } /* Utility tokens */ .text-brand-2{ color:var(--brand-2) } .bg-brand{ background-color:var(--brand) } .bg-brand-2{ background-color:var(--brand-2) } /* Cards, hover, subtle neumorph look */ .hcard{ background: linear-gradient(135deg, rgba(255,255,255,.03), transparent); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px rgba(0,0,0,.25); border-radius: 1rem; } /* Dotted background (hero decorations) */ .dots{ background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 0) 0 0/24px 24px; } /* Buttons */ .btn-anim{ transition: transform .15s ease, filter .2s ease, background-color .2s ease, color .2s ease; } .btn-anim:hover{ transform: translateY(-1px) } /* Prebuilt buttons for convenience */ .btn-primary{ display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.25rem; border-radius: .75rem; background: var(--brand); color:#001018; font-weight:600; box-shadow: 0 10px 20px rgba(18,180,255,.25); } .btn-primary:hover{ filter:brightness(1.08) } .btn-ghost{ display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.25rem; border-radius: .75rem; border:1px solid rgba(255,255,255,.15); color:white; background: transparent; } .btn-ghost:hover{ background: rgba(255,255,255,.06) } /* Small pill badge */ .badge{ display:inline-flex; align-items:center; gap:.5rem; color:var(--brand-2); font-weight:600; font-size:.85rem; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:.4rem .75rem; border-radius:.75rem; } /* Ribbons on slides */ .ribbon{ position:absolute; left:1rem; bottom:-1.5rem; padding:.7rem 1rem; border-radius: .9rem; box-shadow: 0 15px 30px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1); } .ribbon-brand{ background: var(--brand); color:#001018 } .ribbon-dark{ background: rgba(0,0,0,.65); color:#fff } .ribbon-brand-2{ background: var(--brand-2); color:#001018 } /* List dot helper */ .li-dot{ display:flex; align-items:flex-start; gap:.6rem } .li-dot::before{ content:""; margin-top:.45rem; width:.5rem; height:.5rem; border-radius:999px; background:var(--brand-2); } /* WhatsApp floating button (shows on all pages if included) */ .whatsapp-fab{ position: fixed; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap:.5rem; padding:.7rem .9rem; border-radius: 999px; background: #25D366; color:#001012; font-weight:700; border: 1px solid rgba(0,0,0,.15); box-shadow: 0 12px 28px rgba(37,211,102,.35), 0 1px 0 rgba(255,255,255,.6) inset; z-index: 60; transition: transform .15s ease, filter .2s ease; } .whatsapp-fab:hover{ transform: translateY(-1px); filter:brightness(1.08) } .whatsapp-fab img{ display:block } /* Make sure images don't drag UI when loading */ img{ image-rendering:auto } /* ==== Reveal on scroll (entrance animations) ==== */ :root{ --reveal-distance: 16px; /* décalage vertical d’entrée */ --reveal-duration: 640ms; /* durée standard */ --reveal-ease: cubic-bezier(.2,.7,.2,1); } /* État initial (invisible) */ .reveal-base{ opacity: 0; transform: translateY(var(--reveal-distance)) scale(.98); will-change: transform, opacity; } /* Variantes (tu peux les réutiliser si besoin) */ .reveal-up { transform: translateY(var(--reveal-distance)); } .reveal-down { transform: translateY(calc(var(--reveal-distance) * -1)); } .reveal-left { transform: translateX(var(--reveal-distance)); } .reveal-right{ transform: translateX(calc(var(--reveal-distance) * -1)); } .reveal-zoom { transform: scale(.96); } /* État visible */ .reveal-in{ opacity: 1; transform: none; transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease); } /* Stagger par défaut (peut être écrasé en inline via style="--reveal-delay:120ms") */ .reveal-in{ transition-delay: var(--reveal-delay, 0ms); } /* Sécurité accessibilité : réduit les effets si demandé */ @media (prefers-reduced-motion: reduce){ .reveal-base{ opacity: 1 !important; transform: none !important; } .reveal-in{ transition: none !important; } } /* Bonus doux au survol des cartes (déjà présent, je renforce un peu la sensation) */ .hcard:hover, .hcard:focus-visible{ transform: translateY(-6px) scale(1.02); } /* Option : légère “respiration” des rubans si tu veux */ @keyframes floaty{ from{ transform: translateY(0) } 50%{ transform: translateY(-3px) } to{ transform: translateY(0) } } .ribbon{ animation: floaty 6s ease-in-out infinite; } /* ==== Halo bleu au hover sur les cadres ==== */ :root{ --glow: 11,132,177; /* RGB du bleu pétrole (#0b84b1) — modifie si besoin */ } /* Base : on s'assure que les cartes sont positionnées */ .hcard, .partner{ position: relative; z-index: 0; /* permet de superposer le halo sans gêner */ } /* Anneau/halo externe (hors contenu) */ .hcard::after, .partner::after{ content:""; position: absolute; inset: -2px; /* déborde un peu pour bien voir la lueur */ border-radius: inherit; pointer-events: none; z-index: -1; /* sous le contenu de la carte */ box-shadow: 0 0 0 0 rgba(var(--glow), 0), /* état initial invisible */ 0 0 0 0 rgba(var(--glow), 0), 0 0 0 0 rgba(var(--glow), 0); transition: box-shadow .25s ease; } /* Effet glow au hover/focus */ .hcard:hover::after, .hcard:focus-visible::after, .partner:hover::after, .partner:focus-visible::after{ box-shadow: 0 0 0 2px rgba(var(--glow), .35), /* anneau fin bleu */ 0 0 22px 6px rgba(var(--glow), .45), /* halo proche */ 0 0 60px 12px rgba(var(--glow), .25); /* halo diffus lointain */ } /* Option : pulsation douce du halo au hover (décommente si tu veux un effet vivant) */ /* @keyframes glowPulse{ 0%,100%{ box-shadow: 0 0 0 2px rgba(var(--glow), .35), 0 0 22px 6px rgba(var(--glow), .45), 0 0 60px 12px rgba(var(--glow), .25); } 50%{ box-shadow: 0 0 0 2px rgba(var(--glow), .42), 0 0 26px 8px rgba(var(--glow), .55), 0 0 70px 16px rgba(var(--glow), .32); } } .hcard:hover::after, .partner:hover::after{ animation: glowPulse 2.2s ease-in-out infinite; } */ /* Accessibilité : pas de pulsation si l’utilisateur réduit les animations */ @media (prefers-reduced-motion: reduce){ .hcard:hover::after, .partner:hover::after{ animation: none !important; } } .glow-blue{ position: relative; z-index:0; } .glow-blue::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; z-index:-1; transition:box-shadow .25s ease; } .glow-blue:hover::after, .glow-blue:focus-visible::after{ box-shadow: 0 0 0 2px rgba(var(--glow), .35), 0 0 22px 6px rgba(var(--glow), .45), 0 0 60px 12px rgba(var(--glow), .25); } /* ==== Halo bleu — seulement pour les cartes avec médias (img / video) ==== */ /* Compatibilité : :has() est supporté par Chrome, Edge, Safari, Firefox récents. */ :root{ --glow: 11,132,177; } /* même bleu pétrole (#0b84b1) */ /* Prépare les cartes avec médias */ .hcard{ position: relative; z-index: 0; } .hcard::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; z-index:-1; box-shadow: 0 0 0 0 rgba(var(--glow),0), 0 0 0 0 rgba(var(--glow),0), 0 0 0 0 rgba(var(--glow),0); transition: box-shadow .25s ease; } /* Glow uniquement si la carte contient un média (img/video/.aspect-video) ET est en hover/focus */ .hcard:has(img), .hcard:has(video), .hcard:has(.aspect-video), .hcard:has(.himg){ /* état normal = pas de glow */ } .hcard:has(img):hover::after, .hcard:has(video):hover::after, .hcard:has(.aspect-video):hover::after, .hcard:has(.himg):hover::after, .hcard:has(img):focus-visible::after, .hcard:has(video):focus-visible::after, .hcard:has(.aspect-video):focus-visible::after, .hcard:has(.himg):focus-visible::after{ box-shadow: 0 0 0 2px rgba(var(--glow), .35), 0 0 22px 6px rgba(var(--glow), .45), 0 0 60px 12px rgba(var(--glow), .25); } /* Option : renforcer légèrement le zoom au survol quand un média est présent */ .hcard:has(img):hover, .hcard:has(video):hover, .hcard:has(.aspect-video):hover, .hcard:has(.himg):hover{ transform: translateY(-7px) scale(1.025); } /* Respecte les préférences de l’utilisateur */ @media (prefers-reduced-motion: reduce){ .hcard:has(img):hover, .hcard:has(video):hover, .hcard:has(.aspect-video):hover, .hcard:has(.himg):hover{ transform: none !important; } } /* Fallback sans :has() — activer en ajoutant .has-media sur la carte */ .hcard.has-media:hover::after, .hcard.has-media:focus-visible::after{ box-shadow: 0 0 0 2px rgba(var(--glow), .35), 0 0 22px 6px rgba(var(--glow), .45), 0 0 60px 12px rgba(var(--glow), .25); } /* ==== Boat under each menu tab on hover (desktop + mobile) ==== */ /* Couleur du bateau = var(--brand-2). On utilise un mask SVG pour pouvoir changer la couleur en CSS. */ :root{ --boat-w: 28px; /* largeur bateau (desktop) */ --boat-h: 16px; /* hauteur bateau (desktop) */ --boat-w-m: 22px; /* largeur bateau (mobile) */ --boat-h-m: 14px; /* hauteur bateau (mobile) */ } /* Animation douce de “balancement” */ @keyframes boatBob { 0%,100% { transform: translate(-50%,0) scale(1); } 50% { transform: translate(-50%,-2px) scale(1.02); } } /* -------- Desktop: .navlink -------- */ .navlink{ position: relative; display: inline-block; padding-bottom: 0.5rem; /* un peu d’air pour loger le bateau */ } .navlink::after{ content:""; position:absolute; left: 50%; bottom: -12px; width: var(--boat-w); height: var(--boat-h); opacity: 0; transform: translate(-50%, 6px) scale(.96); transition: opacity .22s ease, transform .22s ease; /* Couleur du bateau via background + mask */ background: var(--brand-2); -webkit-mask: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ ") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,\ \ \ \ \ \ ") no-repeat center / contain; } /* Affichage au survol/focus */ .navlink:hover::after, .navlink:focus-visible::after{ opacity: 1; transform: translate(-50%, 0) scale(1); animation: boatBob 2.4s ease-in-out infinite; } /* -------- Mobile: .navlink-mobile -------- */ .navlink-mobile{ position: relative; padding-bottom: 0.65rem; } .navlink-mobile::after{ content:""; position:absolute; left: 14px; /* aligné au texte mobile */ bottom: -6px; width: var(--boat-w-m); height: var(--boat-h-m); opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .2s ease, transform .2s ease; background: var(--brand-2); -webkit-mask: url("data:image/svg+xml;utf8,\ \ \ \ \ ") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,\ \ \ \ \ ") no-repeat center / contain; } .navlink-mobile:hover::after, .navlink-mobile:focus-visible::after{ opacity: 1; transform: translateY(0) scale(1); animation: boatBob 2.4s ease-in-out infinite; } /* Accessibilité : réduit les animations si l’utilisateur le demande */ @media (prefers-reduced-motion: reduce){ .navlink:hover::after, .navlink-mobile:hover::after{ animation: none !important; } } /* 1) Ask the browser to render native controls in dark mode */ html, body, form { color-scheme: dark; } /* 2) Dark select (works with all your selects) */ select, .select-dark{ background: rgba(255,255,255,.06); color: #e6f2ff; /* text */ border: 1px solid rgba(255,255,255,.15); border-radius: .75rem; padding: .6rem .8rem; } /* 3) Dropdown panel + items (Chrome/Edge/Firefox honor option styling) */ select option, select optgroup, .select-dark option, .select-dark optgroup{ background-color: #0b1626; /* slightly lighter than --bg for contrast */ color: #e6f2ff; } /* Placeholder look (first disabled+selected item) */ select option[disabled][selected], .select-dark option[disabled][selected]{ color: rgba(230,242,255,.55); } /* Hover highlight on some engines */ select option:hover, .select-dark option:hover{ background-color: rgba(18,180,255,.15); } /* Focus ring */ select:focus, .select-dark:focus{ outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 2px rgba(127,211,255,.35), 0 0 24px rgba(18,180,255,.25); }