/* Custom overrides on top of the Webflow export. Kept in a separate file so the generated stylesheets can still be re-exported/replaced safely later. */ /* Hide the "Made in Webflow" badge. Webflow's own script re-injects the badge on every load, so it must be hidden here (removing the from the HTML alone isn't enough). */ .w-webflow-badge { display: none !important; } /* -------------------------------------------------------------- My Projects: full-screen scroll-snap gallery. Each project fills the viewport (starting right under the fixed header - the intro text section was removed); its first image is a full-bleed cover background, and the title/description sit bottom-left. .projects-scroll (wrapping the project list + footer) is the explicit scroll-snap container: this page has no , so it renders in quirks mode where document.scrollingElement is - relying on scroll-snap-type on html/body directly is unreliable across browsers there, so we use a normal overflow:auto container instead. It's still the full viewport height, so it looks/feels exactly like the page itself is scrolling; a single scroll gesture moves between projects and the last project scrolls seamlessly into the footer (and back up again). -------------------------------------------------------------- */ .projects-scroll { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; /* No scroll-behavior: smooth here - combined with scroll-snap-type mandatory it can conflict and freeze scrolling entirely in some engines (confirmed: scrollTop assignment silently did nothing with both set, worked fine with just scroll-snap-type). Native snap easing already feels smooth without it. */ } .work-wrapper { /* !important needed: Webflow's IX2 script re-applies an inline height (e.g. "height: 8vh") on load, which would otherwise beat a plain class rule. */ height: 100vh !important; width: 100%; flex-shrink: 0; /* .section-11 is a flex column - without this, items shrink to fit */ border-top: none; cursor: default; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; } .work-wrapper::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 45%); z-index: 1; pointer-events: none; } .project-bg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 0; } .work-wrapper .infos { position: absolute; left: 0; bottom: 0; z-index: 2; width: 30%; height: auto; align-items: flex-end; padding: 3em; } .work-wrapper .flex-block-37 { width: 100%; height: auto; } .work-wrapper .paragraph-36 { width: 100%; opacity: 1; } .work-wrapper .text-block-12, .work-wrapper .heading-8, .work-wrapper .paragraph-36 { color: #fff !important; } .projects-scroll .section-footer { scroll-snap-align: start; } /* -------------------------------------------------------------- Mentions légales page: white text in the Bricolage Grotesque font (titles bold, body copy regular), and a tighter gap between the big page title and the intro paragraph below it. Scoped to .mentions-legales-page so the shared heading-h1/ heading-h4/paragraph-32/paragraph-18 classes keep their default look everywhere else on the site. -------------------------------------------------------------- */ .mentions-legales-page .heading-h1, .mentions-legales-page .heading-h4 { color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; } .mentions-legales-page .paragraph-32, .mentions-legales-page .paragraph-18 { color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; } .mentions-legales-page .heading-h1.margin-bottom-48 { margin-bottom: 1rem; } /* -------------------------------------------------------------- Responsive fixes. Webflow already ships breakpoints at 991 / 767 / 479px, but a few sections were left desktop-only and break on small screens. These rules restack/resize them instead of just shrinking fonts. -------------------------------------------------------------- */ @media (max-width: 767px) { /* My Projects: full-width text block over the background image */ .work-wrapper .infos { width: 100%; padding: 1.5em 1.2em; } .work-wrapper .flex-block-37 { width: 100%; } .flex-block-35 { grid-column-gap: 1em; grid-row-gap: 0.3em; flex-wrap: wrap; } /* Homepage: sticky background-video block and project grid gaps */ .div-block-10 { /* vw, not %: parent is width:auto and centered, so a % width here can't resolve and collapses to 0 */ width: 92vw; height: 50vh; } .colonne-g, .colonne-d { grid-column-gap: 1em; grid-row-gap: 1em; } } @media (max-width: 479px) { .flex-block-35 { grid-row-gap: 0.2em; } .heading-8 { font-size: 1.4rem; } .colonne-g, .colonne-d { grid-column-gap: 0.75em; grid-row-gap: 0.75em; } }