/* -------------------------------------------------------------------------- 1. BACKGROUND — Hero Video -------------------------------------------------------------------------- */ /* Animation */ [data-bunny-background-init] :is(.bunny-bg__placeholder, .bunny-bg__loading) { transition: opacity 0.3s linear, visibility 0.3s linear; } /* Placeholder */ [data-bunny-background-init][data-player-status="playing"] .bunny-bg__placeholder, [data-bunny-background-init][data-player-status="paused"] .bunny-bg__placeholder, [data-bunny-background-init][data-player-activated="true"][data-player-status="ready"] .bunny-bg__placeholder { opacity: 0; visibility: hidden; } /* Play/Pause */ [data-bunny-background-init][data-player-status="playing"] .bunny-bg__play-svg, [data-bunny-background-init][data-player-status="loading"] .bunny-bg__play-svg { display: none; } [data-bunny-background-init][data-player-status="playing"] .bunny-bg__pause-svg, [data-bunny-background-init][data-player-status="loading"] .bunny-bg__pause-svg{ display: block; } /* Loading */ [data-bunny-background-init][data-player-status="loading"] .bunny-bg__loading { opacity: 1; visibility: visible; } /* -------------------------------------------------------------------------- Expanding Feature Pills -------------------------------------------------------------------------- */ /* Max width of expanded pill/content */ [data-feature-pills-init] { --content-item-expanded: 33em; } @media screen and (max-width: 991px){ [data-feature-pills-init] { --content-item-expanded: 100%; } } @media screen and (max-width: 767px){ [data-feature-pills-init] { --content-item-expanded: 100%; } } /* Default state + transition */ [data-feature-pills-button] { opacity: 1; pointer-events: auto; transition: opacity 400ms ease-in-out 300ms; } [data-feature-pills-inner] { opacity: 0; pointer-events: none; transition: opacity 300ms ease-in-out 0ms; } [data-feature-pills-visual] { opacity: 0; transition: opacity 350ms ease-in-out; } [data-feature-pills-cover] { opacity: 1; transition: opacity 350ms ease-in-out; } /* Active Pill */ [data-feature-pills-item][data-active="true"] [data-feature-pills-button] { opacity: 0; pointer-events: none; transition: opacity 50ms ease-in-out 0ms; } [data-feature-pills-item][data-active="true"] [data-feature-pills-inner] { opacity: 1; pointer-events: auto; } /* Active Visual */ [data-feature-pills-visual][data-active="true"] { opacity: 1; } [data-feature-pills-cover][data-active="false"] { opacity: 0; } /* Close button */ [data-feature-pills-close] { transform: scale(0) rotate(135deg); opacity: 0; pointer-events: none; transition: all 500ms cubic-bezier(.7, 0, .3, 1); } [data-feature-pills-active="true"] [data-feature-pills-close] { transform: scale(1) rotate(45deg); opacity: 1; pointer-events: auto; } /* 'edit' mode where buttons are hidden and inner content is shown */ [data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-collection] { overflow: auto; justify-content: start; } [data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-button] { display: none; } [data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-content] { position: relative; pointer-events: auto; } [data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-inner] { opacity: 1; transform: translate(0px, 0em); } /* -------------------------------------------------------------------------- Cascading Slider -------------------------------------------------------------------------- */ [data-cascading-viewport] { --gap: 0.5em; } [data-cascading-slide] { --clip: 0; --radius: 0.75em; } [data-cascading-slide][data-status="active"] { cursor: default; } [data-cascading-slide] .cascading-slider__h { transition-delay: 0ms; } [data-cascading-slide][data-status="active"] .cascading-slider__h { transition-delay: 400ms; opacity: 1; transform: translate(0px, 0em); } .wf-design-mode [data-cascading-viewport] { display: flex; flex-direction: row; gap: 1em; overflow: auto; } .wf-design-mode [data-cascading-slide] { position: relative; width: 60%; flex: 0 0 auto; } .wf-design-mode .cascading-slider__h { opacity: 1; transform: translate(0px, 0em); } /* -------------------------------------------------------------------------- Highlight Marker Text Reveal -------------------------------------------------------------------------- */ [data-highlight-marker-reveal]{ visibility: hidden; } .wf-design-mode [data-highlight-marker-reveal]{ visibility: visible; } [data-highlight-marker-reveal] .highlight-marker-line{ width: auto; display: inline-block !important; margin: -0.055em 0px; } .highlight-marker-bar{ position: absolute; inset: -0.055em 0px; z-index: 1; pointer-events: none; } /* -------------------------------------------------------------------------- Rotating Text -------------------------------------------------------------------------- */ [data-rotating-words] { display: inline-block; position: relative; } .rotating-text__inner { display: inline-block; } .rotating-text__word { display: block; white-space: nowrap; position: absolute; top: 0; left: 0; } .rotating-line{ padding-bottom: 0.1em; margin-bottom: -0.1em; white-space: nowrap; } .rotating-line-mask{ overflow-x: visible !important; overflow-y: clip !important; } /* -------------------------------------------------------------------------- Flick Cards Slider -------------------------------------------------------------------------- */ [data-flick-cards-dragger] { position: absolute; inset: 0; z-index: 1; pointer-events: auto; touch-action: pan-y; } /* Position Slides (also in Webflow Designer) */ [data-flick-cards-item-status] .flick-card__media, :is(.wf-design-mode, .w-editor) .flick-card__media { transition: opacity 0.2s ease; opacity: 0.5; } [data-flick-cards-item-status="2-before"] .flick-card__media, [data-flick-cards-item-status="2-after"] .flick-card__media, :is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(2) .flick-card__media, :is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(1) .flick-card__media{ transition: opacity 0.2s ease; opacity: 0.75; } [data-flick-cards-item-status="active"] .flick-card__media, :is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__media { opacity: 1; } :is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) {z-index: 4;} :is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(2) {transform: translate(25%, 1%) rotate(10deg) scale(0.9, 0.9);z-index: 3;} :is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(3) {transform: translate(45%, 5%) rotate(15deg) scale(0.8, 0.8);z-index: 2;} :is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(1) {transform: translate(-25%, 1%) rotate(-10deg) scale(0.9, 0.9);z-index: 3;} :is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(2) {transform: translate(-45%, 5%) rotate(-15deg) scale(0.8, 0.8);z-index: 2;} /* Animate Button */ [data-flick-cards-item-status] .flick-card__btn, :is(.wf-design-mode, .w-editor) .flick-group__item .flick-card__btn { transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1), 1s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; transform: translate(0%, 50%) rotate(0.001deg); } [data-flick-cards-item-status="active"] .flick-card__btn, :is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__btn { opacity: 1; transform: translate(0%, 0%) rotate(0.001deg); } /* -------------------------------------------------------------------------- Accordion CSS Animation -------------------------------------------------------------------------- */ /* Animate Accordion Bottom Grid */ .accordion-css__item-bottom { transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-accordion-status="active"] .accordion-css__item-bottom { grid-template-rows: 1fr; } /* Animate Icon */ .accordion-css__item-icon { transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-accordion-status="active"] .accordion-css__item-icon { transform: rotate(0.001deg); } /* ========================================================================== Mini Showreel Player (sticky) - SG Media Approche lightbox custom SANS Flip: carte flottante bas-droite immobile + lightbox centree qui apparait en fondu au clic. La video vit dans la lightbox. ========================================================================== */ /* --- Carte flottante bas-droite (wrapper sticky) --- */ .mini-showreel-sticky { position: fixed; right: 1.5em; bottom: 1.5em; z-index: 60; width: 15em; /* direction C: carte compacte 4:5 (~15 x 18.75em) */ max-width: calc(100vw - 3em); pointer-events: none; } .mini-showreel-sticky .mini-showreel { pointer-events: auto; width: 100%; } /* ========================================================================== DIRECTION C — Carte "cadre cinematique" (mode CEO) Carte sombre compacte, cover 4:5, degrade navy en bas, libelle en overlay ("Un mot du" micro-label + "CEO" en Anton), X en badge debordant haut-gauche. Tout ici surcharge le CSS Osmo de base (declare avant, meme specificite). ========================================================================== */ /* Le play natif Osmo dans la barre info reste masque (overlay centre a la place) */ .mini-showreel__info .mini-showreel__play-svg { display: none; } /* --- La carte: sombre, compacte, coins arrondis --- */ .mini-showreel__card { position: relative; /* ancre le X en absolute */ padding: 0; /* la cover remplit la carte, libelle en overlay */ gap: 0; background-color: #0d1622; /* fond cinematique (au lieu du #f4f4f4 clair) */ color: #ffffff; border-radius: 0.875em; overflow: visible; /* laisse le X badge deborder */ box-shadow: 0 18px 50px -12px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.35); } /* --- La cover en 4:5, recadree sur le visage de Samuel --- */ .mini-showreel__media { border-radius: 0.875em; overflow: hidden; } .mini-showreel__video { position: relative; aspect-ratio: 4 / 5; border-radius: 0.875em; background-color: #0d1622; } .mini-showreel__video .mini-showreel__cover-image, .mini-showreel__video img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; /* cadre sur le visage (cover d'origine 16:9) */ } /* Degrade navy fondu sur le bas de la cover, pour asseoir le libelle */ .mini-showreel__video::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient( 180deg, rgba(13,22,34,0) 42%, rgba(13,22,34,.30) 62%, rgba(20,40,62,.92) 100% ); } /* --- Play translucide centre (au-dessus du degrade) --- */ .mini-showreel__play-overlay { z-index: 3; } /* --- Libelle en OVERLAY bas (au lieu de la barre info sous la cover) --- */ .mini-showreel__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: auto; padding: 0 0.85em 0.7em; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0.1em; } /* Micro-label "Un mot du" — navy sur fond blanc, discret */ .mini-showreel__eyebrow { display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.6em; letter-spacing: 0.16em; text-transform: uppercase; color: #43678D; background: #ffffff; padding: 0.2em 0.5em; border-radius: 0.2em; line-height: 1; } /* "CEO" en Anton (display), gros, la signature de la direction C */ .mini-showreel__text { font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 1.9em; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: #ffffff; } /* --- Le X: badge navy debordant en haut-GAUCHE de la carte --- */ .mini-showreel__x { position: absolute; top: -0.6em; left: -0.6em; z-index: 5; width: 1.75em; height: 1.75em; border: 2px solid #0d1622; /* liseret pour detacher du contenu */ box-shadow: 0 4px 12px rgba(0,0,0,.4); } /* --- Bascule carte <-> pastille (JSW, pilote par data-showreel-mode) --- */ [data-mini-showreel-player][data-showreel-mode="pill"] .mini-showreel__card { display: none; } [data-mini-showreel-player][data-showreel-mode="pill"] .mini-showreel__pill { display: flex; align-items: center; justify-content: center; } [data-mini-showreel-player][data-showreel-mode="card"] .mini-showreel__pill { display: none; } /* --- LIGHTBOX custom: cachee par defaut, visible en fondu quand active --- Note: le CSS Osmo de base (Webflow) definit deja .mini-showreel-lightbox et son __dark. On renforce la specificite (double classe) + !important pour que nos regles "active" gagnent sur les regles Osmo declarees apres. */ .mini-showreel-lightbox.mini-showreel-lightbox { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s ease; z-index: 9999; } .mini-showreel-lightbox.mini-showreel-lightbox[data-mini-showreel-status="active"] { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Fond sombre cliquable (ferme). Plus opaque (~85%) pour isoler la video. */ .mini-showreel-lightbox__dark.mini-showreel-lightbox__dark { opacity: 0; background-color: rgba(0, 0, 0, 0.85); transition: opacity 0.4s ease; pointer-events: auto; cursor: pointer; } [data-mini-showreel-status="active"] .mini-showreel-lightbox__dark.mini-showreel-lightbox__dark { opacity: 1 !important; visibility: visible !important; } /* Taille de la video: fluide 78vw, plafonnee a 1440px (desktop pas trop gros). */ .mini-showreel-lightbox__safearea { width: 78vw; max-width: 1440px; margin-left: auto; margin-right: auto; } /* Le player video remplit la cible centree, avec un petit scale d'entree */ .mini-showreel__player { width: 100%; height: 100%; } .mini-showreel-lightbox__target { transform: scale(0.96); transition: transform 0.4s ease; } [data-mini-showreel-status="active"] .mini-showreel-lightbox__target { transform: scale(1); } /* Zone cliquable: la video (target/player) passe au-dessus du fond sombre et devient cliquable, pour que le clic sur la video fasse play/pause (gere en JS). Le fond __dark reste dessous et cliquable pour fermer au clic a-cote. */ .mini-showreel-lightbox__safearea { position: relative; z-index: 2; pointer-events: none; } .mini-showreel-lightbox__target { pointer-events: auto; } .mini-showreel-lightbox [data-bunny-player-init] { pointer-events: auto; } /* --- Bouton X de fermeture visible (coin haut-droit): cercle blanc, X noir --- */ /* Double le style de la classe Webflow (creee via MCP) pour garantir l'affichage. */ .mini-showreel-lightbox__close { position: absolute; top: 1.5em; right: 1.5em; width: 2.75em; height: 2.75em; border-radius: 50%; background-color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: transform 0.2s ease, background-color 0.2s ease; } .mini-showreel-lightbox__close:hover { background-color: #f0f0f0; transform: scale(1.06); } .mini-showreel-lightbox__close-svg { width: 1.1em; height: 1.1em; } /* X noir (les lignes SVG passent en noir, quel que soit leur stroke d'origine) */ .mini-showreel-lightbox__close-svg line { stroke: #000000; } /* --- CSS bonus officiel Osmo: interface bunny visible seulement en lightbox --- */ /* Au repos la lightbox est cachee de toute facon; ces regles evitent tout flash. */ .mini-showreel-lightbox:not([data-mini-showreel-status="active"]) [data-bunny-player-init] .bunny-player__interface { opacity: 0; } /* --- Responsive mobile: carte/pastille reduites; PLEIN ECRAN NATIF --- */ /* Sur mobile la video s'ouvre en plein ecran natif (lecteur iOS / Fullscreen API), pas dans la lightbox custom. On garde neanmoins les regles de taille de la lightbox au cas ou le JS retomberait sur le fallback lightbox (pas de fullscreen natif dispo): dans ce cas elle s'affiche quasi plein ecran. */ @media (max-width: 767px) { /* Carte plus petite au chargement (~200px) pour moins masquer le contenu */ .mini-showreel-sticky { right: 1em; bottom: 1em; width: min(100vw - 2em, 12.5em); } /* Direction C: libelle un peu plus resserre sur la petite carte mobile */ .mini-showreel__text { font-size: 1.55em; } .mini-showreel__eyebrow { font-size: 0.55em; } .mini-showreel__x { top: -0.5em; left: -0.5em; width: 1.6em; height: 1.6em; } .mini-showreel__pill { width: 3.5em; height: 3.5em; } /* Fallback lightbox (si aucun fullscreen natif): video quasi plein ecran */ .mini-showreel-lightbox { padding: 0; } .mini-showreel-lightbox__safearea { width: 92vw; max-width: none; } } /* -------------------------------------------------------------------------- FIX espace noir sous le footer — lightbox a 0px au repos, plein ecran a l'ouverture -------------------------------------------------------------------------- La lightbox et son wrapper Relume (.demo-section-2) laissaient une bande noire (fond du site) apres le footer. On force les DEUX a 0px tant que la lightbox n'est pas active, et on ne rend la lightbox plein ecran QUE quand on clique sur la video (data-mini-showreel-status="active", pose par le JS). -------------------------------------------------------------------------- */ .demo-section-2 { min-height: 0 !important; height: 0 !important; padding: 0 !important; overflow: hidden !important; } .mini-showreel-lightbox.mini-showreel-lightbox { height: 0; } .mini-showreel-lightbox.mini-showreel-lightbox[data-mini-showreel-status="active"] { height: 100vh; }