Réalisation de clipsRap français

SpongeProductions

Index

Lectures relevées publiquement,à la date indiquée.

Réalisation

Relevé le

Artistes

Chargement 000

Sponge Productions

/* Sans JS, TOUT ce que le JS révèle doit être révélé ici. La page est masquée par défaut (`.page { opacity: 0 }`) pour ne jamais montrer un demi-chargement : sans cette règle, le site est un écran noir. */ .page { opacity: 1 !important; } #preloader { display: none !important; } #site-header-logo { opacity: 1 !important; } /* La scène épinglée n'existe pas non plus : les sections reprennent une hauteur et se déroulent les unes après les autres, en flux normal. */ .o-section[data-pin] .o-section__inner { position: static !important; height: auto !important; min-height: 0 !important; /* La marge latérale vient de `.o-container` : la remplacer par 0 collerait tout le texte au bord gauche de la fenêtre. */ padding: var(--site-padding-y) var(--site-padding-x) !important; } /* Les blocs sont composés en absolu dans une section fixe : sans repère fixe ils se superposeraient tous en haut de page. On les remet en flux — SAUF ceux qui contiennent eux-mêmes un enfant en `position: absolute` (la vignette du showreel, les variantes de format). Les passer en `static` ferait fuir cet enfant jusqu'à la section, et une miniature de 320 px recouvrirait tout l'écran. */ .o-section[data-pin] .o-section__inner > *:not(#hero-video-wrapper), #metier-items, .metier-item { position: static !important; inset: auto !important; width: auto !important; height: auto !important; max-height: none !important; transform: none !important; opacity: 1 !important; text-align: start !important; margin: 0 0 2.5rem !important; } #hero-video-wrapper { position: relative !important; inset: auto !important; width: min(420px, 60vw) !important; margin-bottom: 2.5rem !important; opacity: 1 !important; } /* Les coupes de ligne sont écrites en `<span>` sans espace de fin : c'est le JS qui en fait des blocs. Sans lui, « Sponge » et « Productions » se recolleraient. On rétablit donc la coupe en CSS. */ [data-split] > span { display: block; } /* Ce qui n'a plus de sens sans JS : la scène 3D, les repères de parcours, le curseur dessiné, le lecteur plein écran. */ #canvas, #scroll-indicator, #site-footer, #metier-counter, #bande-progress, #video-overlay, .cursor, #absorption-instruction { display: none !important; } /* La bande redevient une galerie qui défile à la main. */ #bande-items-wrapper { position: static !important; display: flex !important; gap: 1rem; overflow-x: auto; height: auto !important; transform: none !important; } .bande-item { position: relative !important; inset: auto !important; flex: 0 0 min(300px, 62vw); height: 60vh !important; opacity: 1 !important; transform: none !important; } /* Les trois formats sont montrés côte à côte plutôt qu'un seul : sans JS, le sélecteur ne peut pas basculer. */ #formules-details-title-wrapper, #formules-details-desc-wrapper { height: auto !important; } #formules-details-title-wrapper span, #formules-details-desc-wrapper > div, .formules-extra-item > div { position: static !important; display: block !important; opacity: 1 !important; transform: none !important; margin-bottom: 0.5em; } #formules-hero-options { display: none !important; }