/* -------------------------------------------------------------------------- 1. Scaling Hamburger Navigation -------------------------------------------------------------------------- */ /* Nav Dark BG */ .navigation__dark-bg { transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1); } [data-navigation-status="active"] .navigation__dark-bg { opacity: 0.33; visibility: visible; } /* Nav Group BG */ .hamburger-nav__bg { transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1); } [data-navigation-status="active"] .hamburger-nav__bg { width: 100%; height: 100%; } /* Nav Group */ .hamburger-nav__group { transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1), transform 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: scale(0.15) rotate(0.001deg); opacity: 0; visibility: hidden; } [data-navigation-status="active"] .hamburger-nav__group { transform: scale(1) rotate(0.001deg); opacity: 1; visibility: visible; } /* Active Link */ .hamburger-nav__a[aria-current] .hamburger-nav__p { opacity: 0.33; } /* Active Indicator */ .hamburger-nav__dot { transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: scale(0) rotate(0.001deg); opacity: 0.5; } .hamburger-nav__a[aria-current] .hamburger-nav__dot { transform: scale(1) rotate(0.001deg); opacity: 1; } .hamburger-nav:has(.hamburger-nav__a:hover) .hamburger-nav__dot { transform: scale(0) rotate(0.001deg); } .hamburger-nav .hamburger-nav__a:hover .hamburger-nav__dot { transform: scale(1) rotate(0.001deg); opacity: 0.25; } /* Hamburger Button */ .hamburger-nav__toggle { transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: translate(0em, 0em) rotate(0.001deg); } [data-navigation-status="active"] .hamburger-nav__toggle { transform: translate(-1em, 1em) rotate(0.001deg); } .hamburger-nav__toggle .hamburger-nav__toggle-bar { transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: translateY(-0.15em) rotate(0.001deg); } .hamburger-nav__toggle:hover .hamburger-nav__toggle-bar { transform: translateY(0.15em) rotate(0.001deg); } [data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar { transform: translateY(0em) rotate(45deg); } .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) { transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1); transform: translateY(0.15em) rotate(0.001deg); } .hamburger-nav__toggle:hover .hamburger-nav__toggle-bar:nth-child(2) { transform: translateY(-0.15em) rotate(0.001deg); } [data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) { transform: translateY(0em) rotate(-45deg); } /* -------------------------------------------------------------------------- Number Odometer -------------------------------------------------------------------------- */ [data-odometer-element] { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; } [data-odometer-part="mask"], [data-odometer-part="static"] { display: inline-block; overflow: clip; padding: 0.05em; margin: -0.05em; } [data-odometer-part="roller"] { display: block; white-space: pre; text-align: center; will-change: transform; } [data-odometer-part="static"] { display: inline-block; } /* -------------------------------------------------------------------------- Button 070 -------------------------------------------------------------------------- */ :root { --button-070-color: #fff; --button-070-color-background: transparent; --button-070-hover-color: #131313; --button-070-hover-color-background: #fff; --button-070-color-focus: #fff; --button-070-corner-color: #fff; --button-070-corner-size: 0.375em; --button-070-corner-border-radius: 0em; --button-070-corner-border-width: 0.0625em; --button-070-corner-move: 0em; --button-070-hover-corner-color: #131313; --button-070-hover-corner-move: 0.25em; --button-070-hover-corner-border-radius: 0em; --button-070-padding: 0.75em 1em; --button-070-border-radius: 0.25em; --button-070-scale: 0.85; --button-070-focus-inset: -0.125em; --button-070-ease-hover: cubic-bezier(0.32, 0.72, 0, 1); --button-070-ease-focus: cubic-bezier(0.32, 0.72, 0, 1); } .button-070 { -webkit-tap-highlight-color: transparent; transition: color 0.2s var(--button-070-ease-hover); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .button-070:is(:hover, :focus-visible), [data-hover]:is(:hover, :focus-visible) .button-070 { color: var(--button-070-hover-color); transition: color 0.2s 0.05s var(--button-070-ease-hover); } .button-070:is(:hover, :focus-visible) .button-070__bg, [data-hover]:is(:hover, :focus-visible) .button-070 .button-070__bg { background-color: var(--button-070-hover-color-background); scale: 1; transition: background-color 0.2s 0.05s var(--button-070-ease-hover), scale 0.425s 0.05s var(--button-070-ease-hover); } .button-070:is(:hover, :focus-visible) .button-070__corner.is--top-left, [data-hover]:is(:hover, :focus-visible) .button-070 .button-070__corner.is--top-left { translate: calc(var(--button-070-hover-corner-move) * 1) calc(var(--button-070-hover-corner-move) * 1) 0; } .button-070:is(:hover, :focus-visible) .button-070__corner.is--top-right, [data-hover]:is(:hover, :focus-visible) .button-070 .button-070__corner.is--top-right { translate: calc(var(--button-070-hover-corner-move) * -1) calc(var(--button-070-hover-corner-move) * 1) 0; } .button-070:is(:hover, :focus-visible) .button-070__corner.is--bottom-left, [data-hover]:is(:hover, :focus-visible) .button-070 .button-070__corner.is--bottom-left { translate: calc(var(--button-070-hover-corner-move) * 1) calc(var(--button-070-hover-corner-move) * -1) 0; } .button-070:is(:hover, :focus-visible) .button-070__corner.is--bottom-right, [data-hover]:is(:hover, :focus-visible) .button-070 .button-070__corner.is--bottom-right { translate: calc(var(--button-070-hover-corner-move) * -1) calc(var(--button-070-hover-corner-move) * -1) 0; } .button-070:is(:hover, :focus-visible) .button-070__corner, [data-hover]:is(:hover, :focus-visible) .button-070 .button-070__corner { --button-070-corner-border-radius: var(--button-070-hover-corner-border-radius); --button-070-corner-color: var(--button-070-hover-corner-color); transition: border-color 0.2s 0.05s var(--button-070-ease-hover), translate 0.45s 0.05s var(--button-070-ease-hover), border-radius 0.45s 0.05s var(--button-070-ease-hover); } } .button-070:is(:focus-visible)::after { box-shadow: 0 0 0 0.125em var(--button-070-color-focus); } .button-070::after { content: ''; display: block; position: absolute; inset: var(--button-070-focus-inset); border-radius: var(--button-070-border-radius); transition: box-shadow 0.3s var(--button-070-ease-focus); pointer-events: none; z-index: 1; } .button-070__bg { scale: var(--button-070-scale); transition: background-color 0.2s var(--button-070-ease-hover), scale 0.4s var(--button-070-ease-hover); } .button-070__corner { will-change: transform; transition: border-color 0.2s var(--button-070-ease-hover), translate 0.45s var(--button-070-ease-hover), border-radius 0.45s var(--button-070-ease-hover); } .button-070__corner.is--top-left { translate: calc(var(--button-070-corner-move) * -1) calc(var(--button-070-corner-move) * -1) 0; } .button-070__corner.is--top-right { translate: calc(var(--button-070-corner-move) * 1) calc(var(--button-070-corner-move) * -1) 0; } .button-070__corner.is--bottom-left { translate: calc(var(--button-070-corner-move) * -1) calc(var(--button-070-corner-move) * 1) 0; } .button-070__corner.is--bottom-right { translate: calc(var(--button-070-corner-move) * 1) calc(var(--button-070-corner-move) * 1) 0; } /* -------------------------------------------------------------------------- Button height lock — keeps 070 + 019 the same height everywhere -------------------------------------------------------------------------- */ .button-070, .button-019 { font-size: 1rem; line-height: 1; vertical-align: middle; } /* -------------------------------------------------------------------------- Button 070 — Secondary (outline with animated corners) -------------------------------------------------------------------------- */ .button-070.is--secondary { --button-070-color: #fff; --button-070-color-background: transparent; --button-070-hover-color: #131313; --button-070-hover-color-background: #fff; --button-070-color-focus: #fff; --button-070-corner-color: #fff; --button-070-hover-corner-color: #131313; --button-070-padding: 0.75em 2em; } /* -------------------------------------------------------------------------- Button 019 — Primary (square, navy gradient, white text + arrow icon) -------------------------------------------------------------------------- */ :root { --button-019-color: #fff; --button-019-color-background: #43678D; --button-019-color-background-hover: #355377; --button-019-color-focus: #43678D; --button-019-focus-inset: -0.125em; --button-019-padding-top: 0.75em; --button-019-padding-x: 1.25em; --button-019-padding-bottom: 0.75em; --button-019-gap: 0.125em; --button-019-border-radius: 0.25em; /* square-ish */ --button-019-click-scale: 0.955 0.925; --button-019-ease-click: cubic-bezier(0.4, 0, 0.2, 1); --button-019-ease-hover: cubic-bezier(0.32, 0.72, 0, 1); --button-019-ease-focus: cubic-bezier(0.32, 0.72, 0, 1); } .button-019 { color: var(--button-019-color); user-select: none; display: inline-flex; gap: var(--button-019-gap); background-color: transparent; outline: none; padding: 0; line-height: 1; text-decoration: none; position: relative; -webkit-tap-highlight-color: transparent; transition: scale 0.15s var(--button-019-ease-click); } .button-019::after { content: ''; position: absolute; inset: var(--button-019-focus-inset); border-radius: var(--button-019-border-radius); transition: box-shadow 0.3s var(--button-019-ease-focus); pointer-events: none; z-index: 1; } .button-019:active { scale: var(--button-019-click-scale); } .button-019:is(:focus-visible)::after { box-shadow: 0 0 0 0.125em var(--button-019-color-focus); } .button-019__text-wrap { pointer-events: none; display: grid; } .button-019__bg { background-color: var(--button-019-color-background); border-radius: var(--button-019-border-radius); grid-area: 1 / 1; width: 100%; height: 100%; display: grid; position: relative; transition: scale 0.4s var(--button-019-ease-hover), background-color 0.4s var(--button-019-ease-hover); } .button-019__text-wrap .button-019__bg::after { content: ''; grid-area: 1/1; width: 100%; height: 100%; border-radius: var(--button-019-border-radius); background-color: var(--button-019-color-background); transition: translate 0.5s var(--button-019-ease-hover), background-color 0.4s var(--button-019-ease-hover); } .button-019__text { padding: var(--button-019-padding-top) var(--button-019-padding-x) var(--button-019-padding-bottom); z-index: 1; grid-area: 1 / 1; } .button-019__icon-wrap { aspect-ratio: 1; pointer-events: none; width: calc(1em + var(--button-019-padding-top) + var(--button-019-padding-bottom)); display: grid; } .button-019__icon-outer { z-index: 1; grid-area: 1 / 1; display: flex; justify-content: center; align-items: center; } .button-019__icon { flex: none; width: 1em; height: 1em; transition: rotate 0.5s var(--button-019-ease-hover); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .button-019:is(:hover, :focus-visible) .button-019__text-wrap .button-019__bg::after { translate: calc(1em + var(--button-019-padding-top) + var(--button-019-padding-bottom) + var(--button-019-gap)) 0 0; transition-delay: 0.05s; } .button-019:is(:hover, :focus-visible) .button-019__icon-wrap .button-019__bg { scale: 0.85; transition-delay: 0.05s; } .button-019:is(:hover, :focus-visible) .button-019__icon { rotate: 360deg; transition-delay: 0.05s; } .button-019:is(:hover, :focus-visible) .button-019__bg, .button-019:is(:hover, :focus-visible) .button-019__text-wrap .button-019__bg::after { background-color: var(--button-019-color-background-hover); } } /* -------------------------------------------------------------------------- Media Setup (Autoplay, Hover, Click) -------------------------------------------------------------------------- */ [data-media-init] [data-media-placeholder] { transition: opacity 0.2s ease, visibility 0.2s ease; } [data-media-init][data-media-status="playing"] [data-media-placeholder], [data-media-init][data-media-status="paused"] [data-media-placeholder] { visibility: hidden; opacity: 0; } /* -------------------------------------------------------------------------- Custom MP4 Player (Advanced) -------------------------------------------------------------------------- */ /* Animation */ [data-bunny-player-init] :is(.bunny-player__placeholder, .bunny-player__dark, .bunny-player__playpause, .bunny-player__loading) { transition: opacity 0.3s linear, visibility 0.3s linear; } /* Placeholder */ [data-bunny-player-init][data-player-status="playing"] .bunny-player__placeholder, [data-bunny-player-init][data-player-activated="true"][data-player-status="ready"] .bunny-player__placeholder { opacity: 0; visibility: hidden; } /* Dark Overlay */ [data-bunny-player-init][data-player-status="paused"] .bunny-player__dark{ opacity: 0.3; } [data-bunny-player-init][data-player-status="playing"] .bunny-player__dark { opacity: 0; } /* Play/Pause */ [data-bunny-player-init][data-player-status="playing"] .bunny-player__playpause, [data-bunny-player-init][data-player-status="loading"] .bunny-player__playpause { opacity: 0; } [data-bunny-player-init][data-player-status="playing"] .bunny-player__play-svg, [data-bunny-player-init][data-player-status="loading"] .bunny-player__play-svg { display: none; } [data-bunny-player-init][data-player-status="playing"] .bunny-player__pause-svg, [data-bunny-player-init][data-player-status="loading"] .bunny-player__pause-svg{ display: block; } /* Loading */ [data-bunny-player-init][data-player-status="loading"] .bunny-player__loading { opacity: 1; visibility: visible; } /* Interface */ .bunny-player__interface { transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-bunny-player-init][data-player-status="playing"] .bunny-player__interface, [data-bunny-player-init][data-player-status="loading"] .bunny-player__interface{ opacity: 0; transform: translateY(1em) rotate(0.001deg); } [data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__interface, [data-bunny-player-init][data-player-status="loading"][data-player-hover="active"] .bunny-player__interface { opacity: 1; transform: translateY(0em) rotate(0.001deg); } /* Timeline */ [data-bunny-player-init][data-player-status="idle"][data-player-activated="false"] .bunny-player__timeline, [data-bunny-player-init][data-player-status="ready"][data-player-activated="false"] .bunny-player__timeline { pointer-events: none; } /* Timeline Handle */ [data-bunny-player-init] .bunny-player__timeline-handle { transition: transform 0.15s ease-in-out; } [data-bunny-player-init][data-timeline-drag="true"] .bunny-player__timeline-handle { transform: translate(-50%, -50%) scale(1); } /* Fullscreen */ [data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-shrink-svg { display: block; } [data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-scale-svg { display: none; } /* Mute */ [data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-mute-svg { display: block; } [data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-up-svg { display: none; } /* Cover Mode */ [data-bunny-player-init][data-player-update-size="cover"] { height: 100%; top: 0; left: 0; position: absolute; } [data-bunny-player-init][data-player-update-size="cover"] [data-player-before] { display: none; } [data-bunny-player-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-player__video { object-fit: cover; } /* -------------------------------------------------------------------------- Mini Showreel wrapper — retrait de l'espace vide sous le footer -------------------------------------------------------------------------- `.demo-section-2` est un residu du template Relume : elle enveloppe le mini-showreel (lightbox + bouton flottant), tous deux en position fixed, mais garde un min-height: 720px + padding de demo. Resultat : ~720px de vide noir apres le footer. Les deux enfants etant hors-flux (fixed), le wrapper n'a besoin d'aucune hauteur. -------------------------------------------------------------------------- */ .demo-section-2 { min-height: 0; padding: 0; } /* -------------------------------------------------------------------------- Locale Switcher (FR / EN) — navbar (menu) + footer -------------------------------------------------------------------------- Classes posees via le Designer (communes aux deux switchers) : .locales-list -> conteneur (rendu .w-locales-items) .locale-switch__link -> chaque lien de langue (Montserrat, gris, uppercase) .w-locales-item -> wrapper d'item genere par Webflow Webflow pose aria-current="page" (+ .w--current) sur la langue active. La couleur INACTIVE (#6F6D68) vient du Designer et passe sur fond clair (menu) comme sur fond sombre (footer). L'etat ACTIF est CONTEXTUEL : bleu fonce dans le menu clair, blanc dans le footer sombre. -------------------------------------------------------------------------- */ /* Espacement du switcher SOUS les liens, uniquement dans le menu */ .hamburger-nav .locales-list { margin-top: 0.75rem; } /* Separateur vertical entre les langues (FR | EN), les deux contextes */ .locales-list .w-locales-item:not(:first-child) .locale-switch__link { border-left: 1px solid rgba(111, 109, 104, 0.4); /* gris a 40% */ padding-left: 0.6rem; } /* Menu hamburger (fond CLAIR) : actif = bleu fonce de marque. On cible .w--current (classe native Webflow, toujours posee) ET [aria-current="page"] pour la robustesse. */ .hamburger-nav .locale-switch__link.w--current, .hamburger-nav .locale-switch__link[aria-current="page"] { color: var(--_sg-media---brand--dark-blue); /* #23384D */ font-weight: 600; } .hamburger-nav .locale-switch__link.w--current:hover, .hamburger-nav .locale-switch__link[aria-current="page"]:hover { color: var(--_sg-media---brand--dark-blue); } /* Footer (fond SOMBRE) : actif = blanc. La vraie classe du footer est .f-footer-regular (minuscule) — les selecteurs d'attribut CSS sont sensibles a la casse, donc [class*="Footer"] ne matchait jamais. */ .f-footer-regular .locale-switch__link.w--current, .f-footer-regular .locale-switch__link[aria-current="page"] { color: var(--_sg-media---brand--white); /* #fff */ font-weight: 600; } .f-footer-regular .locale-switch__link.w--current:hover, .f-footer-regular .locale-switch__link[aria-current="page"]:hover { color: var(--_sg-media---brand--white); }