/* ========================================================================== Floris Wamelink, shared styles Pure monochrome. His work is the only colour. Motion vocabulary in app.js. ========================================================================== */ :root{ --ground:#FCFCFB; --ground-warm:#F2F3F6; --ink:#0F0E0E; --ink-soft:#2A2A2A; --meta:#6B6B6B; --line:rgba(15,14,14,.10); --line-strong:rgba(15,14,14,.18); --nav-h:64px; --ease:cubic-bezier(.16,1,.3,1); --pad:clamp(20px,5vw,88px); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--ground); color:var(--ink); font-family:"Inter",system-ui,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} .display{font-family:"Switzer",system-ui,sans-serif;font-weight:500;letter-spacing:-0.02em;line-height:0.98} .tag{ font-family:"Inter",sans-serif; font-size:11px;font-weight:500; text-transform:uppercase;letter-spacing:0.15em; color:var(--meta); } /* ---------- motion primitives ---------- Initial hidden states apply ONLY under html.motion, so no-JS / reduced-motion renders everything visible. app.js adds .motion in before paint. */ .line-mask{display:block;overflow:hidden} .line-inner{display:block} .frame-reveal{clip-path:inset(0 0 0 0)} html.motion .line-inner{transform:translateY(110%)} html.motion .reveal{opacity:0;transform:translateY(26px)} html.motion .frame-reveal{clip-path:inset(100% 0 0 0)} html.motion .frame-reveal img{transform:scale(1.12)} /* ---------- custom cursor ---------- */ .cursor{ position:fixed;top:0;left:0;z-index:300; width:14px;height:14px;margin:-7px 0 0 -7px; border-radius:999px;background:var(--ink); pointer-events:none;opacity:0; display:flex;align-items:center;justify-content:center; will-change:transform; } .cursor__label{ font-family:"Switzer",system-ui,sans-serif;font-size:12px;letter-spacing:0.02em; color:var(--ground);opacity:0;white-space:nowrap;transform:scale(.6); } .cursor.is-active{width:72px;height:72px;margin:-36px 0 0 -36px} .cursor.is-active .cursor__label{opacity:1;transform:scale(1)} body.has-cursor, body.has-cursor a, body.has-cursor .index-item{cursor:none} /* ---------- page-transition overlay ---------- */ .transition{ position:fixed;inset:0;z-index:200; background:var(--ground); transform:translateY(-100%); pointer-events:none;will-change:transform; } html.motion .transition{transform:translateY(0)} /* ---------- intro loader ---------- */ .loader{ position:fixed;inset:0;z-index:250; background:var(--ground); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:22px;will-change:transform,clip-path; } .loader__name{ font-family:"Switzer",system-ui,sans-serif;font-weight:500; font-size:clamp(34px,7vw,86px);line-height:0.94;letter-spacing:-0.03em; text-align:center; } .loader__count{ font-family:"Switzer",system-ui,sans-serif;font-size:13px;color:var(--meta); font-variant-numeric:tabular-nums;letter-spacing:0.02em; } .loader__rule{width:min(46vw,320px);height:1px;background:var(--line-strong);transform-origin:0 50%;transform:scaleX(0)} html:not(.motion) .loader{display:none} /* ---------- nav ---------- */ .nav{ position:fixed;top:0;left:0;width:100%;height:var(--nav-h); display:flex;align-items:center;justify-content:space-between; padding:0 var(--pad);z-index:120; background:rgba(252,252,251,0.82); border-bottom:1px solid transparent; transition:border-color .4s var(--ease),background .4s var(--ease); } .nav.scrolled{border-color:var(--line)} .nav__mark{font-family:"Switzer",system-ui,sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.01em} .nav__links{display:flex;gap:clamp(16px,3vw,28px);align-items:center} .nav__links a{ font-size:13px;letter-spacing:0.02em;color:var(--ink-soft); position:relative;padding:6px 2px;min-height:44px;display:flex;align-items:center; } .nav__links a::after{ content:"";position:absolute;left:0;bottom:12px;width:100%;height:1px; background:var(--ink);transform:scaleX(0);transform-origin:0 50%; transition:transform .35s var(--ease); } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after{transform:scaleX(1)} /* ---------- hero ---------- */ .hero{ position:relative;min-height:100svh; display:flex;flex-direction:column;justify-content:flex-end; padding:var(--pad);padding-bottom:clamp(28px,5vh,56px); overflow:hidden; } .hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ground-warm)} .hero__media img, .hero__media video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 42%; will-change:transform;transform:scale(1.08); } .hero__media .hero__poster{z-index:0} #heroCanvas{ position:absolute;inset:0;z-index:1;display:block; width:100%;height:100%; } .hero__scrim{ position:absolute;inset:0;z-index:1; background:linear-gradient(to bottom,rgba(252,252,251,0.10) 0%,rgba(252,252,251,0) 30%,rgba(252,252,251,0) 55%,rgba(252,252,251,0.74) 100%); } .hero__inner{position:relative;z-index:2;max-width:1200px} .hero__eyebrow{margin-bottom:22px} .hero__title{font-size:clamp(52px,12vw,168px);line-height:0.92;letter-spacing:-0.03em;color:var(--ink)} .hero__role{margin-top:22px;max-width:560px;font-size:clamp(15px,1.6vw,18px);color:var(--ink-soft);line-height:1.5} .hero__cue{position:absolute;bottom:clamp(24px,4vh,40px);right:var(--pad);z-index:2;display:flex;align-items:center;gap:10px} .hero__cue .tag{color:var(--ink-soft)} .hero__cue .line{width:1px;height:38px;background:var(--line-strong);overflow:hidden;position:relative} .hero__cue .line::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--ink);animation:cue 2.4s var(--ease) infinite} @keyframes cue{0%{transform:translateY(0)}60%,100%{transform:translateY(200%)}} /* page hero (work / about): shorter, no image */ .pagehead{ padding:calc(var(--nav-h) + clamp(56px,12vh,140px)) var(--pad) clamp(40px,7vh,88px); border-bottom:1px solid var(--line); } .pagehead__eyebrow{margin-bottom:20px} .pagehead__title{font-size:clamp(44px,10vw,150px);line-height:0.9;letter-spacing:-0.03em} .pagehead__sub{margin-top:24px;max-width:620px;font-size:clamp(16px,1.9vw,22px);color:var(--ink-soft);line-height:1.45} /* ---------- section frame ---------- */ .section{padding:clamp(64px,12vh,150px) var(--pad)} .section--tight{padding-top:clamp(40px,6vh,72px)} .section-head{ display:flex;align-items:flex-end;justify-content:space-between; gap:24px;flex-wrap:wrap; border-top:1px solid var(--line);padding-top:22px;margin-bottom:clamp(40px,7vh,88px); } .section-head h2{font-size:clamp(28px,4.5vw,54px);letter-spacing:-0.02em;font-weight:500} .section-head .count{font-variant-numeric:tabular-nums} /* ---------- project block ---------- */ .project{margin-bottom:clamp(72px,14vh,168px);scroll-margin-top:calc(var(--nav-h) + 20px)} .project__meta{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:26px} .project__index{font-family:"Switzer",system-ui,sans-serif;font-size:13px;color:var(--meta);font-variant-numeric:tabular-nums} .project__title{font-size:clamp(30px,5.2vw,68px);letter-spacing:-0.025em;font-weight:500;line-height:1.0;flex:1 1 auto} .project__desc{max-width:520px;color:var(--ink-soft);font-size:clamp(14px,1.4vw,16px);margin-top:6px} .project__header{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:34px} @media(min-width:900px){ .project__header{grid-template-columns:1.2fr 0.8fr;align-items:end;gap:48px} .project__desc{margin-top:0;justify-self:end} } /* image frames */ .frame{position:relative;overflow:hidden;background:var(--ground-warm)} .frame img{width:100%;height:100%;object-fit:cover} .frame--tall{aspect-ratio:3/4} .frame--wide{aspect-ratio:16/10} .frame--full{aspect-ratio:16/9} .frame--square{aspect-ratio:1/1} @media(max-width:640px){ .frame--full{aspect-ratio:4/5} .frame--wide{aspect-ratio:4/5} } .grid{display:grid;gap:clamp(10px,1.4vw,20px)} .grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} @media(min-width:720px){ .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr 1fr 1fr} } .grid--gap-top{margin-top:clamp(10px,1.4vw,20px)} .cap{margin-top:14px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;border-top:1px solid var(--line);padding-top:12px} .cap .tag{color:var(--meta)} /* ---------- objects grid ---------- */ .objects .frame{aspect-ratio:4/5} .objects-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px)} @media(min-width:720px){.objects-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1080px){.objects-grid{grid-template-columns:repeat(4,1fr)}} .object figcaption{margin-top:10px} .object figcaption .name{font-size:13px;color:var(--ink-soft);display:block} /* ---------- work index (hover-preview) ---------- */ .index{position:relative;padding:clamp(48px,9vh,110px) var(--pad)} .index-list{list-style:none;border-top:1px solid var(--line)} .index-item{border-bottom:1px solid var(--line)} .index-item a{ display:flex;align-items:baseline;gap:clamp(16px,3vw,40px); padding:clamp(18px,3.4vh,34px) 0;position:relative; } .index-item .n{ font-family:"Switzer",system-ui,sans-serif;font-size:13px;color:var(--meta); font-variant-numeric:tabular-nums;flex:0 0 auto;padding-top:.4em; } .index-item .t{ font-family:"Switzer",system-ui,sans-serif;font-weight:500; font-size:clamp(28px,6vw,84px);letter-spacing:-0.03em;line-height:0.98; color:var(--ink);flex:1 1 auto;transition:transform .5s var(--ease),opacity .4s var(--ease); } .index-item .m{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--meta);flex:0 0 auto;padding-top:.7em} @media(hover:hover) and (pointer:fine){ .index-list:hover .index-item .t{opacity:.32} .index-item:hover .t{opacity:1;transform:translateX(clamp(8px,1.4vw,22px))} } .index-preview{ position:fixed;top:0;left:0;z-index:110; width:clamp(220px,22vw,340px);aspect-ratio:4/5; overflow:hidden;pointer-events:none;opacity:0; transform:translate3d(-50%,-50%,0) scale(.94); will-change:transform,opacity;background:var(--ground-warm); margin-left:var(--preview-x,0);margin-top:var(--preview-y,0); } .index-preview img{width:100%;height:100%;object-fit:cover} .index-grid{display:none} @media(hover:none){ .index-preview{display:none} .index-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px} .index-grid .frame{aspect-ratio:4/5} } /* ---------- kinetic statement ---------- */ .kinetic{padding:clamp(90px,22vh,260px) var(--pad);text-align:left} .kinetic__line{ font-family:"Switzer",system-ui,sans-serif;font-weight:500; font-size:clamp(40px,9vw,140px);line-height:0.98;letter-spacing:-0.035em; max-width:16ch; } .kinetic__line .word{display:inline-block;will-change:transform,opacity} html.motion .kinetic__line .word{opacity:.12} .kinetic__foot{margin-top:clamp(28px,5vh,56px);max-width:460px;color:var(--ink-soft);font-size:clamp(15px,1.7vw,19px)} /* ---------- horizontal rhythm-break strip ---------- */ .strip{position:relative;overflow:hidden;background:var(--ground)} .strip__track{display:flex;gap:clamp(12px,1.6vw,24px);padding:clamp(40px,8vh,90px) var(--pad);will-change:transform} .strip__item{flex:0 0 auto;width:min(72vw,540px);aspect-ratio:4/5;overflow:hidden;background:var(--ground-warm)} .strip__item img{width:100%;height:100%;object-fit:cover} .strip__label{ position:absolute;left:var(--pad);top:clamp(20px,4vh,40px);z-index:2; font-size:12px;letter-spacing:0.15em;text-transform:uppercase;color:var(--meta); } /* ---------- teaser / link rows ---------- */ .linkrow{ display:flex;align-items:center;justify-content:space-between;gap:20px; padding:clamp(28px,5vh,52px) var(--pad);border-top:1px solid var(--line); } .linkrow a{ font-family:"Switzer",system-ui,sans-serif;font-weight:500; font-size:clamp(22px,4vw,44px);letter-spacing:-0.02em;position:relative; display:inline-flex;align-items:center;gap:16px; } .linkrow a .arrow{transition:transform .4s var(--ease);display:inline-block} .linkrow a:hover .arrow{transform:translateX(10px)} /* ---------- about ---------- */ .about{display:grid;grid-template-columns:1fr;gap:clamp(32px,6vw,72px);align-items:start} @media(min-width:900px){.about{grid-template-columns:0.9fr 1.1fr}} .about__portrait{aspect-ratio:3/4;overflow:hidden;background:var(--ground-warm)} .about__portrait img{width:100%;height:100%;object-fit:cover} .about__body p{font-size:clamp(16px,1.8vw,22px);line-height:1.5;color:var(--ink);margin-bottom:22px;letter-spacing:-0.01em} .about__body p.lead{font-family:"Switzer",system-ui,sans-serif;font-weight:400;font-size:clamp(20px,2.6vw,32px);line-height:1.28;letter-spacing:-0.02em} .disciplines{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;border-top:1px solid var(--line);padding-top:26px} .disciplines span{font-size:12px;letter-spacing:0.04em;color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:999px;padding:7px 14px} .placeholder{color:var(--meta);font-style:normal;background:var(--ground-warm);padding:0 4px;border-radius:2px} .exhibitions{margin-top:clamp(40px,7vh,72px);border-top:1px solid var(--line);padding-top:28px} .exhibitions h3{font-size:clamp(18px,2.2vw,24px);font-weight:500;margin-bottom:16px;letter-spacing:-0.01em} /* ---------- statement (about big line) ---------- */ .statement{padding:clamp(64px,14vh,180px) var(--pad) clamp(48px,9vh,120px)} .statement__big{font-size:clamp(30px,5.6vw,80px);line-height:1.02;letter-spacing:-0.03em;max-width:20ch} /* ---------- contact ---------- */ .contact{padding:clamp(72px,16vh,180px) var(--pad) clamp(40px,8vh,72px);scroll-margin-top:var(--nav-h)} .contact__big{font-size:clamp(40px,9vw,128px);line-height:0.96;letter-spacing:-0.03em;font-weight:500} .contact__rows{margin-top:clamp(40px,7vh,72px);border-top:1px solid var(--line)} .crow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);min-height:44px} .crow .k{font-size:12px;text-transform:uppercase;letter-spacing:0.15em;color:var(--meta)} .crow .v{font-size:clamp(16px,2.2vw,24px);font-family:"Switzer",system-ui,sans-serif;letter-spacing:-0.01em} .crow a.v{position:relative;display:inline-flex;align-items:center;min-height:44px} .crow a.v::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)} .crow a.v:hover::after{transform:scaleX(1)} /* ---------- footer ---------- */ .footer{ padding:clamp(28px,5vh,44px) var(--pad); display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; border-top:1px solid var(--line); } .footer__mark{font-family:"Switzer",system-ui,sans-serif;font-weight:600;font-size:15px} .footer small{color:var(--meta);font-size:12px} .footer a.credit{color:var(--meta);font-size:12px;position:relative;display:inline-flex;align-items:center;min-height:44px} .footer a.credit:hover{color:var(--ink)} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .line-inner,.reveal,.frame-reveal,.frame-reveal img,.kinetic__line .word{transform:none!important;opacity:1!important;clip-path:none!important} .hero__media img,.hero__media video{transform:none!important} .hero__cue .line::after{animation:none;display:none} .loader,.cursor,.transition{display:none!important} *{scroll-behavior:auto!important} }