HOMEPAGE

<!-- === SWWS Landing Hero — HTML only =================== --> <section id="swws-hero" class="swws-hero" aria-label="Sebastien Wierinck WorkShop — Hero"> <!-- Calques du diaporama (fond) --> <div class="swws-bg-2"></div> <div class="swws-bg-3"></div> <div class="swws-bg-4"></div> <!-- Contenu principal --> <div class="swws-hero__content"> <span class="swws-eyebrow"> <span class="swws-dot"></span> Sebastien Wierinck WorkShop </span> <h2 class="swws-h2"> <span>A design practice</span> <span>at the intersection of</span> <span>furniture, public art,</span> <span>and digital craft.</span> </h2> <p class="swws-contact"> </p> <a class="swws-cta" id="sw-mail-link" title="Send us an email"> Contact us <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"> <path d="M4 4h16v16H4z" stroke="currentColor" stroke-width="2" fill="none"/> <path d="M4 4l8 7 8-7" stroke="currentColor" stroke-width="2" fill="none"/> </svg> </a> </div> <button class="swws-scroll-indicator" aria-label="Scroll to content"> <svg viewBox="0 0 24 24" width="28" height="28" stroke="currentColor" fill="none" stroke-width="2"> <path d="M6 9l6 6 6-6"/> </svg> </button> <script> // --- EMAIL PROTECTION --- const mailName = "sw"; const mailDomain = "swws.net"; const mailLink = document.getElementById("sw-mail-link"); mailLink.href = mailto:${mailName}@${mailDomain}; mailLink.setAttribute("aria-label", Send an email to ${mailName}@${mailDomain}); </script> <div class="swws-hero__bottom-fade"></div> </section> <!-- === /SWWS Landing Hero ============================== -->

/* === SWWS Landing Hero — Styles =================== / @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap'); .swws-hero, .swws-hero * { box-sizing: border-box; } .swws-hero { position: relative; height: 100dvh; width: 100%; isolation: isolate; overflow: clip; display: grid; place-items: center; color: #fff; text-align: center; background: #000; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; } / === Fond diaporama === / .swws-hero::before, .swws-hero::after, .swws-bg-2, .swws-bg-3, .swws-bg-4 { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.65) saturate(130%); animation: fadeSlideshow 25s infinite both; animation-timing-function: ease-in-out; opacity: 0; z-index: 0; pointer-events: none; will-change: opacity; } / === Images du diaporama (5 images, 25s total) === / .swws-hero::before { background-image: url('https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/775095d7-97ff-423c-8787-04648236bdb6/005/w=3840,quality=90,fit=scale-down'); animation-delay: 0s; } .swws-hero::after { background-image: url('https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/e00f1546-30d8-444d-a663-cb1d9946d1b6/Buffet-Enfilade-SebastienWierinckSebastienNormand061/w=3840,quality=90,fit=scale-down'); animation-delay: 5s; } .swws-bg-2 { background-image: url('https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/335a8dc2-1eb5-4821-a21d-e2c8f9fdaec8/WORMS-SWWSSbastienNormand012_WEB/w=3840,quality=90,fit=scale-down'); animation-delay: 10s; } .swws-bg-3 { background-image: url('https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/f6a0da9d-d7c7-41c3-b17a-c9ea5bf66fec/CD104-02/w=1920,quality=90,fit=scale-down'); animation-delay: 15s; } .swws-bg-4 { background-image: url('https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/29cd6995-4e66-4d1b-8201-cd78b7abdfdf/J1-OS015-001c/w=1920,quality=90,fit=scale-down'); animation-delay: 20s; } / === Animation du diaporama avec chevauchement doux === / @keyframes fadeSlideshow { 0% { opacity: 0; } 2% { opacity: 1; } / fade-in plus tôt / 24% { opacity: 1; } / reste visible plus longtemps / 28% { opacity: 0; } / fade-out progressif / 100% { opacity: 0; } } / === Version mobile : changer une image (ex. slide 3) === / @media (max-width: 720px), (max-aspect-ratio: 3/4) { .swws-hero::after { background-image: url('https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/9287334a-a8a7-4177-9d78-f8666b50dc5a/DRAPED_CONSOLE_prototype_Sebastien-Wierinck-24/w=1080,quality=90,fit=scale-down'); background-position: center top; } } / === Contenu === / .swws-hero__content { position: relative; z-index: 5; padding: 2rem 1rem; max-width: min(900px, 90vw); } .swws-eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem .7rem; border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); font-weight: 600; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; } .swws-dot { width:.5rem; aspect-ratio:1; border-radius:50%; background:#FFFF00; box-shadow:0 0 .5rem #FFFF00; } .swws-h2 { margin: 1rem 0 .6rem; font-weight: 700; font-size: clamp(32px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.015em; } .swws-h3 { margin: .5rem 0 1.5rem; font-weight: 400; font-size: clamp(20px, 2.5vw, 28px); line-height: 1.4; opacity: .92; } .swws-contact { font-weight: 400; font-size: 16px; line-height: 1.7; color: #fff; opacity: 0.9; margin-bottom: 2rem; } .swws-contact a { color: #fff; text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; } .swws-contact a:hover { color: #feedcf; } / === Bouton jaune === / .swws-cta { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.4rem; border-radius: 0px; color: #111; background: rgba(254,237,207,0.9); border: 1px solid rgba(255,255,0,.35); text-decoration: none; font-weight: 600; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .swws-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.35); background: rgba(255,255,0,1); color: #111; } .swws-cta svg { width: 18px; height: 18px; } .swws-hero__bottom-fade { position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(to bottom, transparent, #fff); pointer-events: none; z-index: 6; } @media (prefers-color-scheme: dark) { .swws-hero__bottom-fade { background: linear-gradient(to bottom, transparent, #0b0d16); } } / === SWWS — YOYO Horizontal Gallery (aspect ratio edition) === / #block-29a95fdcc23e804aaabfc41158ab7cef .notion-collection__header-wrapper { margin-bottom: 12px; } / Rail horizontal / #block-29a95fdcc23e804aaabfc41158ab7cef .notion-collection-gallery { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(180px, 36vw); gap: 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 8px 24px 24px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: relative; } #block-29a95fdcc23e804aaabfc41158ab7cef .notion-collection-gallery::-webkit-scrollbar { display: none; } / Cartes / #block-29a95fdcc23e804aaabfc41158ab7cef .notion-collection-card.gallery { scroll-snap-align: center; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } #block-29a95fdcc23e804aaabfc41158ab7cef .notion-collection-card.gallery:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.18); box-shadow: 0 10px 30px rgba(0,0,0,.25); } / Couverture image — proportion fixe / #block-29a95fdcc23e804aaabfc41158ab7cef .notion-collection-card__cover { width: 100%; aspect-ratio: 4 / 5; / 👈 proportion stable (4:5 = vertical élégant) / object-fit: cover !important; object-position: center 45% !important; display: block; } / Contenu sous l’image / #block-29a95fdcc23e804aaabfc41158ab7cef .notion-collection-card__content { padding: 12px 12px 14px; color: #5B5B5B; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.45; background: transparent; } / Effet “edges fade” pour indiquer le scroll / #block-29a95fdcc23e804aaabfc41158ab7cef .notion-collection-gallery { -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%); } / ---- Mobile adjustments ---- / @media (max-width: 720px) { #block-29a95fdcc23e804aaabfc41158ab7cef .notion-collection-gallery { grid-auto-columns: 30vw; / carte presque plein écran / gap: 16px; padding: 8px 12px 24px; } #block-29a95fdcc23e804aaabfc41158ab7cef .notion-collection-card__cover { aspect-ratio: 5 / 4; / plus proche du carré, mieux sur téléphone / } } / YOYOLIGHT — ne cacher le header vide qu'en version téléphone / @media (max-width: 768px) { #block-29a95fdcc23e804aaabfc41158ab7cef > .notion-collection__header-wrapper { display: none !important; margin: 0 !important; padding: 0 !important; } / petit espace fluide entre le titre H2 et la galerie / #block-29a95fdcc23e804aaabfc41158ab7cef .notion-collection-gallery { margin-top: 8px !important; } } / === Hero H2 Dynamic Line Reveal ====================== / .swws-h2 { display: flex; flex-direction: column; align-items: center; overflow: hidden; } .swws-h2 span { display: block; transform: translateY(120%); opacity: 0; animation: swwsLineReveal 0.9s ease-out forwards; } / Animation: chaque ligne remonte et apparaît / @keyframes swwsLineReveal { to { transform: translateY(0); opacity: 1; } } / Décalage progressif (effet cascade) / .swws-h2 span:nth-child(1) { animation-delay: 0.2s; } .swws-h2 span:nth-child(2) { animation-delay: 0.45s; } .swws-h2 span:nth-child(3) { animation-delay: 0.7s; } .swws-h2 span:nth-child(4) { animation-delay: 0.95s; } / Ajuste la typo et le rythme visuel / .swws-h2 { font-weight: 700; font-size: clamp(32px, 6vw, 72px); line-height: 1.1; letter-spacing: -0.015em; text-align: center; color: #fff; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; } / Respecte les préférences utilisateur / @media (prefers-reduced-motion: reduce) { .swws-h2 span { animation: none !important; opacity: 1 !important; transform: none !important; } } / === SWWS — Callout “GO TO PORTFOLIO” ===================== / #block-29b95fdcc23e8082ad10e30472ee6809 { background: #000 !important; border: none !important; padding: 3rem 1.5rem !important; text-align: center !important; } #block-29b95fdcc23e8082ad10e30472ee6809 .notion-callout__content { color: #fff !important; text-align: center !important; } #block-29b95fdcc23e8082ad10e30472ee6809 h2 { color: #fff !important; font-size: clamp(28px, 4vw, 48px); letter-spacing: 0.04em; font-weight: 700; text-transform: uppercase; margin: 0; } #block-29b95fdcc23e8082ad10e30472ee6809 a.notion-link { color: #fff !important; text-decoration: none !important; border-bottom: 2px solid #fff; padding-bottom: 4px; transition: color .25s ease, border-color .25s ease; } #block-29b95fdcc23e8082ad10e30472ee6809 a.notion-link:hover { color: #ffeb3b !important; border-color: #ffeb3b; } / === SWWS — Callout “SECONDARY / WHITE VERSION” ===================== / #block-2a195fdcc23e80efadffc6de8a38332c { background: #fff !important; border: none !important; padding: 3rem 1.5rem !important; text-align: center !important; } #block-2a195fdcc23e80efadffc6de8a38332c .notion-callout__content { color: #000 !important; text-align: center !important; } #block-2a195fdcc23e80efadffc6de8a38332c h2 { color: #000 !important; font-size: clamp(28px, 4vw, 48px); letter-spacing: 0.04em; font-weight: 700; text-transform: uppercase; margin: 0; } #block-2a195fdcc23e80efadffc6de8a38332c a.notion-link { color: #000 !important; text-decoration: none !important; border-bottom: 2px solid #000; padding-bottom: 4px; transition: color .25s ease, border-color .25s ease; } #block-2a195fdcc23e80efadffc6de8a38332c a.notion-link:hover { color: #ffeb3b !important; / même jaune accent / border-color: #ffeb3b; } / === Responsive (mobile) ===================== / @media (max-width: 768px) { #block-29b95fdcc23e8082ad10e30472ee6809, #block-2a195fdcc23e80efadffc6de8a38332c { padding: 2rem 1rem !important; } #block-29b95fdcc23e8082ad10e30472ee6809 h2, #block-2a195fdcc23e80efadffc6de8a38332c h2 { font-size: clamp(22px, 5vw, 36px); } } / === Scroll indicator (arrow down) === / .swws-scroll-indicator { position: absolute; bottom: 10vh; left: 50%; transform: translateX(-50%); background: none; border: none; color: #feedcf; / ton beige clair / cursor: pointer; opacity: 0.8; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 10; animation: swwsArrowBounce 1.6s ease-in-out infinite; } .swws-scroll-indicator:hover { opacity: 1; transform: translate(-50%, 2px); } @keyframes swwsArrowBounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } @media (prefers-reduced-motion: reduce) { .swws-scroll-indicator { animation: none; } } .swws-scroll-indicator svg { width: 60px; / ajuster ici / height: 202px; / garder le même ratio */ }