/* ============================================================= RABBY RAZ - Mohammed Shafwat Hossain Design system + site styles. Static, no build step. ============================================================= */ /* ---------- fonts ---------- Archivo + Inter, self-hosted VARIABLE woff2 (SIL Open Font License). One file per family per subset; the wght axis covers every weight used. latin-ext is only fetched when the page actually needs it (French oe, etc). -------------------------------------------------------------------- */ @font-face{font-family:Archivo;src:url(../fonts/archivo-var-latin.woff2)format("woff2"); font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Archivo;src:url(../fonts/archivo-var-latin-ext.woff2)format("woff2"); font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Inter;src:url(../fonts/inter-var-latin.woff2)format("woff2"); font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Inter;src:url(../fonts/inter-var-latin-ext.woff2)format("woff2"); font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ---------- tokens ---------- */ :root{ --black:#050505; --dark:#090909; --soft:#111111; --white:#F2EFE9; --text-2:#AAA7A0; --muted:#7E7E7E; /* 5.02:1 on --black. #737373 was 4.30:1, under AA for 11-13px */ --accent:#F04A23; --line:rgba(242,239,233,.14); --line-soft:rgba(242,239,233,.07); --display:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif; --body:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif; --wrap:1560px; --gutter:clamp(20px,4vw,72px); --section-y:clamp(88px,13vh,180px); --ease:cubic-bezier(.22,.61,.36,1); --r:clamp(10px,.9vw,14px); /* coins arrondis des visuels */ --r-sm:8px; /* vignettes < 120px : un rayon plein serait disproportionné */ --dur:.7s; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--black);color:var(--text-2); font-family:var(--body);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; /* No overflow-x:hidden here on purpose. It would make a scroll container, which breaks window scrolling and every position:sticky descendant (the About rail, the capabilities visual). Nothing on the page overflows horizontally; that is enforced per component instead. */ } img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} h1,h2,h3,h4{margin:0;font-family:var(--display);color:var(--white);font-weight:800; letter-spacing:-.025em;line-height:.92;text-transform:uppercase} p{margin:0 0 1.1em} ul{margin:0;padding:0;list-style:none} ::selection{background:var(--accent);color:#fff} /* keep the scrollbar visible (brief 60) but tone it down */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--black)} ::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:0} ::-webkit-scrollbar-thumb:hover{background:#3d3d3d} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);width:100%} .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:12px 20px} .skip:focus{left:12px;top:12px} /* ---------- shared editorial atoms ---------- */ .meta{ font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--muted); } .meta .num{color:var(--accent);margin-right:14px} .section-label{ display:flex;align-items:baseline;gap:16px; padding-bottom:20px;margin-bottom:clamp(36px,5vw,64px); border-bottom:1px solid var(--line); } .section-label .num{ font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent) } .section-label .txt{ font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted) } .h-xl{font-size:clamp(2.6rem,7.4vw,7rem)} .h-lg{font-size:clamp(2.1rem,5vw,4.4rem)} .h-md{font-size:clamp(1.5rem,2.6vw,2.5rem);letter-spacing:-.015em} .lead{font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.55;color:var(--text-2);max-width:60ch} .dim{color:var(--muted)} section{padding-block:var(--section-y)} .arrow-link{ display:inline-flex;align-items:center;gap:10px; font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:var(--white);padding-bottom:6px;border-bottom:1px solid var(--line); transition:border-color .35s var(--ease),color .35s var(--ease) } .arrow-link .a{transition:transform .35s var(--ease);color:var(--accent)} .arrow-link:hover{border-color:var(--accent)} .arrow-link:hover .a{transform:translate(3px,-3px)} /* ---------- scroll progress ---------- */ .progress{ position:fixed;top:0;left:0;height:2px;width:100%;z-index:120; background:transparent;pointer-events:none } .progress i{ display:block;height:100%;width:0;background:var(--accent); transform-origin:0 50%;transition:width .1s linear } /* ---------- header ---------- */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:100; padding-block:22px; transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease); border-bottom:1px solid transparent; } .site-header.is-scrolled{ background:rgba(5,5,5,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); padding-block:14px;border-bottom-color:var(--line-soft) } .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{ font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.02em; text-transform:uppercase;color:var(--white);white-space:nowrap } .brand sup{font-size:.55em;vertical-align:super;color:var(--accent)} .nav-main{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)} .nav-main a{ font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase; color:var(--text-2);position:relative;padding-block:4px;transition:color .3s var(--ease) } .nav-main a::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent); transition:width .35s var(--ease) } .nav-main a:hover,.nav-main a.is-active{color:var(--white)} .nav-main a:hover::after,.nav-main a.is-active::after{width:100%} .lang{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase} .lang a{color:var(--muted);transition:color .3s var(--ease)} .lang a.is-on{color:var(--white)} .lang a:hover{color:var(--accent)} .lang span{color:#333} .menu-btn{display:none} /* ---------- mobile menu ---------- */ .menu-panel{ position:fixed;inset:0;z-index:99;background:var(--black); display:flex;flex-direction:column;justify-content:center; padding:110px var(--gutter) 40px; opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s } .menu-panel.is-open{opacity:1;visibility:visible} .menu-panel nav{display:flex;flex-direction:column;gap:2px} .menu-panel nav a{ font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(2.2rem,11vw,3.4rem);line-height:1.05;color:var(--white); padding-block:8px;border-bottom:1px solid var(--line-soft) } .menu-foot{margin-top:auto;padding-top:36px;display:flex;flex-direction:column;gap:14px} /* ============================================================= HERO ============================================================= */ .hero{ position:relative;min-height:100svh;padding:0; display:flex;flex-direction:column;justify-content:flex-end; overflow:hidden; } .hero-media{position:absolute;inset:0;z-index:0} .hero-media video,.hero-media img{ width:100%;height:100%;object-fit:cover } /* Readability scrim (brief 10). The reel is the hero, so the middle band is left almost clear and the work reads at full strength. Darkness is applied only where it earns its keep: a short wash under the header, and a longer one from just above the name down to the bottom rail. No left-weighted wash and no flat veil, both of which buried the work. */ .hero-media::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom, rgba(5,5,5,.72) 0%, /* under the header only */ rgba(5,5,5,.26) 11%, rgba(5,5,5,.04) 28%, /* clear band: the reel plays at full strength */ rgba(5,5,5,.04) 46%, rgba(5,5,5,.24) 60%, rgba(5,5,5,.58) 74%, rgba(5,5,5,.86) 90%, rgba(5,5,5,.95) 100%); } .hero-inner{ position:relative;z-index:2;padding-bottom:clamp(28px,4vh,52px);width:100%; /* Both type sizes live here so the optical alignment below can be derived from them rather than guessed. */ --logo-fs:clamp(1.9rem,14.6vw,13.5rem); --name-fs:clamp(13px,2.15vw,30px); } .hero-inner::before{ content:"";position:absolute;left:50%;transform:translateX(-50%); top:-52%;bottom:-40%;width:100vw;z-index:-1;pointer-events:none; background:linear-gradient(to bottom, rgba(5,5,5,0) 0%, rgba(5,5,5,.16) 22%, rgba(5,5,5,.48) 42%, /* intro line lands here */ rgba(5,5,5,.70) 58%, rgba(5,5,5,.82) 78%, rgba(5,5,5,.90) 100%); } /* ---- hero name ------------------------------------------------------ Intro line carries the legal name plus the hinge, on a single row. The logotype below stays the full-bleed display element. */ .hero-intro{ /* One phrase: "MOHAMMED SHAFWAT HOSSAIN also known as", the hinge sitting directly after the name rather than pushed to the far edge. */ display:flex;flex-wrap:wrap;align-items:baseline; gap:0 .7em; margin:0 0 clamp(6px,1.1vh,14px); /* Optical alignment. The boxes of the intro and the logotype start at the same x, but the glyphs do not: Archivo's left side bearing is ~0.075em, so at 210px the R's ink sits ~16px in while the 30px M's sits ~2px in. Nudge the intro right by the difference so the M lines up with the R. Derived from the two font sizes, so it stays true at every width. */ margin-left:calc(var(--logo-fs) * 0.075 - var(--name-fs) * 0.076); } .hi-name{ font-family:var(--display);font-weight:600; font-size:var(--name-fs);line-height:1.15;letter-spacing:.01em; text-transform:uppercase;color:var(--white); } .hi-aka{ font-family:var(--body);font-weight:500; font-size:clamp(9px,1vw,14px);letter-spacing:.2em; text-transform:uppercase;color:rgba(242,239,233,.86); } .hero-name{ /* Single row, vw-locked so it spans the measure without ever pushing the document sideways. */ font-size:var(--logo-fs);line-height:.86;letter-spacing:-.045em; white-space:nowrap;color:var(--white);margin:0 0 clamp(18px,3vh,34px); } .hero-bottom{ display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; gap:clamp(18px,3vw,48px);padding-top:22px;border-top:1px solid var(--line) } .hero-pos{display:flex;flex-direction:column;gap:8px;max-width:46ch} .hero-roles{ font-family:var(--display);font-weight:600;font-size:clamp(12px,1.05vw,14px); letter-spacing:.13em;text-transform:uppercase;color:var(--white) } .hero-roles em{font-style:normal;color:var(--accent)} .hero-sub{font-size:14px;color:var(--text-2);margin:0} .hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .btn-reel{ display:inline-flex;align-items:center;gap:12px; padding:14px 26px;border:1px solid var(--line);border-radius:999px; font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--white); transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease) } .btn-reel:hover{background:var(--accent);border-color:var(--accent);color:#fff} .btn-reel .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none} .btn-reel:hover .dot{background:#fff} .hero-scroll{ display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--muted) } .hero-scroll .bar{ width:34px;height:1px;background:var(--line);position:relative;overflow:hidden } .hero-scroll .bar::after{ content:"";position:absolute;inset:0;background:var(--accent); animation:sweep 2.4s var(--ease) infinite } @keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}} .vid-toggle{ position:absolute;right:var(--gutter);top:50%;z-index:3; width:44px;height:44px;border:1px solid var(--line);border-radius:50%; display:grid;place-items:center;color:var(--white); background:rgba(5,5,5,.35);backdrop-filter:blur(6px); transition:border-color .3s var(--ease),background .3s var(--ease) } .vid-toggle:hover{border-color:var(--accent);background:rgba(5,5,5,.6)} /* ---------- showreel modal ---------- */ .reel-modal{ position:fixed;inset:0;z-index:200;background:rgba(5,5,5,.97); display:flex;align-items:center;justify-content:center;padding:var(--gutter); opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s } .reel-modal.is-open{opacity:1;visibility:visible} .reel-frame{width:min(1400px,100%);aspect-ratio:16/9;background:#000;position:relative} .reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .reel-close{ position:absolute;top:calc(var(--gutter) - 6px);right:var(--gutter); display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--white) } .reel-close:hover{color:var(--accent)} /* ============================================================= EXPERIENCE STRIP ============================================================= */ .exp{padding-block:clamp(48px,7vh,90px);border-bottom:1px solid var(--line-soft)} .exp-h{ font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:.01em;color:var(--muted); text-transform:none;font-weight:500;font-family:var(--body);margin-bottom:clamp(24px,3vw,40px) } .exp-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)} .exp-col .meta{display:block;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line)} .exp-list li{ font-family:var(--display);font-weight:600;font-size:clamp(15px,1.5vw,21px); letter-spacing:-.01em;text-transform:uppercase;color:var(--white); line-height:1.25;margin-bottom:10px } /* ============================================================= WORK ============================================================= */ .work-intro{padding-bottom:clamp(40px,6vh,80px)} .work-intro-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,80px);align-items:end} .work-intro h2{margin-bottom:18px} .filters{display:flex;flex-wrap:wrap;gap:22px;margin-top:clamp(34px,5vw,56px); padding-top:22px;border-top:1px solid var(--line)} .filters button{ font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase; color:var(--muted);padding-bottom:4px;border-bottom:1px solid transparent; transition:color .3s var(--ease),border-color .3s var(--ease) } .filters button:hover{color:var(--white)} .filters button.is-on{color:var(--accent);border-bottom-color:var(--accent)} /* featured project - asymmetric editorial */ .feature{padding-block:clamp(60px,9vh,130px);border-top:1px solid var(--line-soft)} .feature-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,60px);align-items:start;margin-bottom:clamp(28px,4vw,52px)} .feature-no{ font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3.4rem); color:var(--accent);line-height:1;letter-spacing:-.03em } .feature-title{margin-bottom:20px} .feature-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,64px);align-items:start} .feature-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 28px;margin-top:28px} .feature-facts dt{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:5px} .feature-facts dd{margin:0;font-size:14px;color:var(--white);line-height:1.45} .feature-media{display:grid;gap:clamp(12px,1.6vw,20px);margin-top:clamp(30px,4vw,54px)} .fm-2{grid-template-columns:1fr 1fr} .fm-3{grid-template-columns:1.4fr 1fr 1fr} .feature-media figure{margin:0;overflow:hidden;background:var(--soft);cursor:pointer} .feature-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} .feature-media figure:hover img{transform:scale(1.035)} .ratio-4x5{aspect-ratio:4/5} .ratio-1x1{aspect-ratio:1/1} .ratio-16x9{aspect-ratio:16/9} .ratio-3x2{aspect-ratio:3/2} /* more work list: thumbnail + title + discipline + type + arrow */ .more-list{border-top:1px solid var(--line)} .more-row{ display:grid;grid-template-columns:52px 96px 1fr auto auto 24px; gap:clamp(12px,2.4vw,34px);align-items:center; padding-block:clamp(14px,1.8vw,20px); border-bottom:1px solid var(--line-soft); transition:background .4s var(--ease),padding-inline .4s var(--ease) } .more-row:hover,.more-row:focus-visible{background:rgba(242,239,233,.03);padding-inline:14px} .more-row .n{font-size:11px;letter-spacing:.12em;color:var(--accent)} .more-row .thumb{display:block;width:96px;aspect-ratio:16/9;overflow:hidden;background:var(--soft)} .more-row .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .more-row:hover .thumb img{transform:scale(1.07)} .more-row .t{font-family:var(--display);font-weight:600;text-transform:uppercase; font-size:clamp(1rem,1.9vw,1.55rem);color:var(--white);letter-spacing:-.015em;line-height:1.15} .more-row .c,.more-row .y{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .more-row .go{color:var(--accent);font-size:13px;opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease)} .more-row:hover .go,.more-row:focus-visible .go{opacity:1;transform:translate(2px,-2px)} /* ============================================================= FILM ============================================================= */ .film-sec{background:var(--black);border-top:1px solid var(--line-soft)} .film-head{max-width:26ch;margin-bottom:clamp(40px,6vw,80px)} .film-lead{max-width:56ch;margin-top:24px} .film-hero{margin-top:clamp(36px,5vw,64px)} .film-hero figure{margin:0;position:relative;overflow:hidden;background:var(--soft);aspect-ratio:2.39/1} .film-hero img{width:100%;height:100%;object-fit:cover} .film-hero figcaption{ display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline; padding-top:18px;border-top:1px solid var(--line);margin-top:18px } /* Featured film: poster keeps its own aspect, credits sit beside it. */ .film-feature{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(26px,5vw,72px);align-items:center; margin-top:clamp(36px,5vw,64px);padding-top:clamp(30px,4vw,52px); border-top:1px solid var(--line) } .film-poster{margin:0;padding:0;border:0;overflow:hidden;background:var(--soft);cursor:pointer; position:relative;display:block;width:100%} .film-poster img{width:100%;height:auto;display:block} .film-feature-body h3{margin:14px 0 16px} .film-badge{ display:inline-block;font-size:10px;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:var(--accent); border:1px solid rgba(240,74,35,.4);border-radius:999px;padding:6px 14px;margin:0 0 26px } .film-feature-body .feature-facts{margin-top:0} .feature-facts dd.tbd{color:var(--muted);font-style:normal} /* YouTube facade: the poster is ours, nothing is requested from YouTube until the visitor presses play. Full films live there, so embedding beats hosting. */ .yt-stage{position:relative} .yt-stage img{display:block} .yt-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .yt-play{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:clamp(48px,4.6vw,70px);aspect-ratio:1;border-radius:50%; background:rgba(240,74,35,.94);display:grid;place-items:center;pointer-events:none; transition:transform .35s var(--ease),background .35s var(--ease),opacity .3s var(--ease) } .yt-play::after{ content:"";border-left:clamp(12px,1.2vw,17px) solid #fff; border-top:clamp(8px,.85vw,11px) solid transparent; border-bottom:clamp(8px,.85vw,11px) solid transparent;margin-left:4px } .yt-stage:hover .yt-play{transform:translate(-50%,-50%) scale(1.08);background:#F04A23} .yt-stage:focus-visible{outline:2px solid var(--white);outline-offset:3px} .yt-stage.is-playing .yt-play{opacity:0} .film-card .dur{font-family:var(--body);font-size:11px;letter-spacing:.06em;color:var(--muted);white-space:nowrap} .film-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);margin-top:clamp(40px,6vw,72px)} .film-card .yt-stage{display:block;width:100%;margin:0;padding:0;border:0;position:relative; overflow:hidden;background:var(--soft);aspect-ratio:16/9;cursor:pointer} .film-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),opacity .5s var(--ease)} .film-card:hover img{transform:scale(1.04)} .film-card .cap{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding-top:14px;border-top:1px solid var(--line-soft);margin-top:14px} .film-card .t{margin-right:auto;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:15px;color:var(--white);letter-spacing:-.01em} /* ============================================================= VISUAL ARCHIVE ============================================================= */ .archive-grid{ columns:4;column-gap:clamp(12px,1.6vw,20px);margin-top:clamp(34px,5vw,60px) } .archive-grid figure{ margin:0 0 clamp(12px,1.6vw,20px);break-inside:avoid;overflow:hidden; background:var(--soft);position:relative;cursor:pointer } .archive-grid img{width:100%;height:auto;transition:transform 1s var(--ease),filter .5s var(--ease)} .archive-grid figure:hover img{transform:scale(1.05)} .archive-grid figcaption{ position:absolute;inset:auto 0 0 0;padding:14px; background:linear-gradient(to top,rgba(5,5,5,.9),rgba(5,5,5,0)); opacity:0;transition:opacity .4s var(--ease) } .archive-grid figure:hover figcaption,.archive-grid figure:focus-within figcaption{opacity:1} /* lightbox */ .lightbox{ position:fixed;inset:0;z-index:200;background:rgba(5,5,5,.96); display:flex;align-items:center;justify-content:center;padding:var(--gutter); opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s } .lightbox.is-open{opacity:1;visibility:visible} .lightbox img{max-width:100%;max-height:86vh;object-fit:contain} /* ============================================================= CAPABILITIES ============================================================= */ .cap-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:start} .cap-list li{border-bottom:1px solid var(--line-soft)} .cap-list button{ display:flex;align-items:baseline;gap:16px;width:100%;text-align:left; padding-block:clamp(10px,1.3vw,16px); font-family:var(--display);font-weight:600;text-transform:uppercase; font-size:clamp(1rem,1.85vw,1.55rem);letter-spacing:-.015em;color:#8A8A8A; transition:color .35s var(--ease),padding-left .35s var(--ease) } .cap-list button:hover,.cap-list button.is-on{color:var(--white);padding-left:10px} .cap-list .i{font-family:var(--body);font-size:10px;letter-spacing:.14em;color:var(--accent);opacity:0;transition:opacity .3s var(--ease)} .cap-list button:hover .i,.cap-list button.is-on .i{opacity:1} .cap-visual{position:sticky;top:22vh;aspect-ratio:4/5;background:var(--soft);overflow:hidden} .cap-visual img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .45s var(--ease) } .cap-visual img.is-on{opacity:1} .cap-note{margin-top:clamp(28px,4vw,48px);max-width:52ch} /* ============================================================= SECTORS ============================================================= */ .sector-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start} .sector-head{margin-bottom:0} .sector-list{border-top:1px solid var(--line)} .sector-list li{ display:flex;align-items:baseline;gap:18px; padding-block:clamp(11px,1.4vw,17px);border-bottom:1px solid var(--line-soft) } .sector-list .n{font-size:11px;letter-spacing:.12em;color:var(--accent);flex:none} .sector-list .t{ font-family:var(--display);font-weight:600;text-transform:uppercase; font-size:clamp(1rem,1.7vw,1.4rem);letter-spacing:-.015em;color:var(--white) } /* ============================================================= ABOUT - sticky chapters ============================================================= */ .about{border-top:1px solid var(--line-soft)} .about-open{margin-bottom:clamp(60px,9vh,130px)} .about-open .h-xl{max-width:18ch} .about-open .kicker{ font-family:var(--display);font-weight:600;font-size:clamp(13px,1.2vw,17px); letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:22px } .chapters{display:grid;grid-template-columns:260px 1fr;gap:clamp(28px,5vw,90px);align-items:start} .chap-rail{position:sticky;top:24vh;display:flex;flex-direction:column;gap:14px} .chap-rail li{ font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em; text-transform:uppercase;color:#6E6E6E;display:flex;align-items:center;gap:12px; transition:color .4s var(--ease) } .chap-rail li::before{ content:"";width:0;height:1px;background:var(--accent);transition:width .45s var(--ease) } .chap-rail li.is-on{color:var(--white)} .chap-rail li.is-on::before{width:26px} .chapter{padding-block:clamp(40px,7vh,90px);border-top:1px solid var(--line-soft)} .chapter:first-child{border-top:0;padding-top:0} .chapter .lbl{margin-bottom:22px} .chapter h3{margin-bottom:26px;font-size:clamp(1.5rem,3.1vw,2.9rem)} .chapter p{max-width:58ch} .chapter figure{margin:clamp(28px,4vw,46px) 0 0;overflow:hidden;background:var(--soft)} .chapter figure img{width:100%;height:auto} /* Archival snapshot: the source is small, so it is shown at its own size rather than upscaled into mush. Reads as a document, not a hero image. */ .chapter figure.archival{max-width:337px;background:none} .chapter figure.portrait{max-width:clamp(260px,32vw,420px)} .chapter figure.mark{max-width:clamp(180px,24vw,300px)} .chapter figure.archival figcaption{padding-top:10px} .about-end{ padding-block:clamp(80px,14vh,190px);text-align:left;border-top:1px solid var(--line-soft) } .about-end .stack{display:flex;flex-direction:column;gap:clamp(6px,1vw,14px);margin-bottom:clamp(40px,6vw,72px)} .about-end .stack span{ font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(1.1rem,3.1vw,2.6rem);line-height:1.06;letter-spacing:-.025em;color:#8A8A8A; transition:color .5s var(--ease) } .about-end .stack span.is-in{color:var(--white)} .about-end .stack span b{font-weight:800;color:var(--accent)} .sign{padding-top:30px;border-top:1px solid var(--line)} /* ============================================================= TIMELINE ============================================================= */ .tl{border-top:1px solid var(--line);margin-top:clamp(30px,4vw,56px)} .tl-row{ display:grid;grid-template-columns:150px 1fr 1.2fr;gap:clamp(16px,3vw,48px); padding-block:clamp(22px,2.8vw,36px);border-bottom:1px solid var(--line-soft);align-items:baseline } .tl-row .yr{font-family:var(--display);font-weight:800;font-size:clamp(1rem,1.7vw,1.4rem);color:var(--accent);letter-spacing:-.01em} .tl-row .ttl{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(.95rem,1.5vw,1.25rem);color:var(--white);letter-spacing:-.01em} .tl-row .desc{font-size:15px;color:var(--text-2)} /* ============================================================= VENTURES ============================================================= */ .ventures{border-top:1px solid var(--line-soft)} .venture{ display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,56px); align-items:center;padding-block:clamp(30px,4.5vw,58px);border-bottom:1px solid var(--line-soft) } .venture:first-of-type{border-top:1px solid var(--line)} .venture .vno{font-size:11px;letter-spacing:.14em;color:var(--accent)} .venture h3{font-size:clamp(1.6rem,4vw,3.2rem);margin-bottom:12px} .venture .role{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .venture p{max-width:56ch;margin-bottom:0} .venture .vmark{width:clamp(90px,10vw,150px);opacity:.85} .venture .vmark img{width:100%;height:auto} /* Assets that are artwork on a white ground: give them their own light plate rather than letting them float on the page black. A logo lockup must never be cropped, so contain it and pad it instead of letting the surrounding ratio box cover-crop it. */ .on-light{background:#fff} .feature-media figure img.on-light, .cs-media figure img.on-light{object-fit:contain;padding:clamp(18px,3vw,44px)} .venture-band img.on-light{object-fit:contain} .venture-media{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px); margin:clamp(20px,2.6vw,34px) 0 0 } .venture-media figure{margin:0;overflow:hidden;background:var(--soft);cursor:pointer} .venture-media img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover; transition:transform .9s var(--ease)} .venture-media figure:hover img{transform:scale(1.04)} .venture-band{margin:clamp(14px,1.8vw,22px) 0 0;overflow:hidden} .venture-band img{width:100%;height:auto;display:block} .venture-band figcaption{padding-top:12px} @media (max-width:900px){ .venture-media{grid-template-columns:repeat(2,1fr)} } /* Venture film: self-hosted, plays in place. Same media language as every other figure on the page; the badge is only an affordance over the poster and gets out of the way as soon as playback starts. */ .venture-film{margin:clamp(14px,1.8vw,22px) 0 0} .vf-stage{position:relative;width:100%;aspect-ratio:16/9;background:var(--soft);overflow:hidden} .vf-video{width:100%;height:100%;display:block;object-fit:cover;background:#000} .vf-play,.csv-play{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:clamp(56px,6vw,82px);aspect-ratio:1;border:0;padding:0;border-radius:50%; background:rgba(240,74,35,.94);display:grid;place-items:center;cursor:pointer; transition:transform .35s var(--ease),background .35s var(--ease),opacity .3s var(--ease) } .vf-play::after,.csv-play::after{ content:"";border-left:clamp(14px,1.5vw,20px) solid #fff; border-top:clamp(9px,1vw,13px) solid transparent; border-bottom:clamp(9px,1vw,13px) solid transparent;margin-left:5px } .vf-play:hover,.csv-play:hover{transform:translate(-50%,-50%) scale(1.08);background:#F04A23} .vf-play:focus-visible,.csv-play:focus-visible{outline:2px solid var(--white);outline-offset:4px} .vf-play.is-off,.csv-play.is-off{opacity:0;pointer-events:none} .venture-film figcaption{padding-top:12px} /* ============================================================= CONTACT + FOOTER ============================================================= */ .contact{border-top:1px solid var(--line-soft);padding-block:clamp(90px,16vh,210px)} .contact h2{font-size:clamp(3rem,10.5vw,10rem);line-height:.86;margin-bottom:8px} .contact h2 .fade{color:#8A8A8A;transition:color .6s var(--ease)} .contact h2 .fade.is-in{color:var(--white)} .contact-body{ display:grid;grid-template-columns:1fr auto;gap:clamp(28px,5vw,70px); align-items:end;margin-top:clamp(40px,6vw,80px);padding-top:34px;border-top:1px solid var(--line) } .contact-links{display:flex;flex-wrap:wrap;gap:12px 34px} .contact-links a{ font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2); padding-bottom:5px;border-bottom:1px solid var(--line-soft);transition:color .3s var(--ease),border-color .3s var(--ease) } .contact-links a:hover{color:var(--white);border-bottom-color:var(--accent)} .btn-primary{ display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:#050505; padding:18px 34px;border-radius:999px;font-size:12px;font-weight:500; letter-spacing:.16em;text-transform:uppercase; transition:transform .35s var(--ease),background .35s var(--ease) } .btn-primary:hover{transform:translateY(-2px);background:#FF6440} .site-footer{border-top:1px solid var(--line);padding-block:clamp(48px,7vh,90px)} .footer-mark{ font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(3rem,15vw,13rem);line-height:.82;letter-spacing:-.04em;color:var(--white); margin-bottom:clamp(30px,4vw,54px) } .footer-mark sup{font-size:.32em;vertical-align:super;color:var(--accent)} .footer-grid{ display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,60px); padding-top:32px;border-top:1px solid var(--line-soft) } .footer-grid h3{font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:500;margin-bottom:16px;text-transform:uppercase} .footer-grid li{margin-bottom:9px} .footer-grid a{font-size:13px;color:var(--text-2);transition:color .3s var(--ease)} .footer-grid a:hover{color:var(--accent)} .footer-bot{ display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between; margin-top:clamp(34px,5vw,60px);padding-top:24px;border-top:1px solid var(--line-soft) } /* ============================================================= CASE STUDY (brief 56) ============================================================= */ .cs-hero{ position:relative;min-height:76svh;display:flex;align-items:flex-end; padding:0 0 clamp(34px,5vh,64px);overflow:hidden; } .cs-hero-media{position:absolute;inset:0;z-index:0} .cs-hero-media img{width:100%;height:100%;object-fit:cover} .cs-hero-media::after{ content:"";position:absolute;inset:0; background: linear-gradient(100deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.76) 30%,rgba(5,5,5,.36) 62%,rgba(5,5,5,.24) 100%), linear-gradient(to bottom,rgba(5,5,5,.82) 0%,rgba(5,5,5,.24) 26%,rgba(5,5,5,.5) 72%,rgba(5,5,5,.95) 100%); } .cs-hero .wrap{position:relative;z-index:2} .cs-back{ display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(20px,4vh,44px); font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2); transition:color .3s var(--ease) } .cs-back:hover{color:var(--accent)} .cs-title{font-size:clamp(2.4rem,8vw,7.5rem);line-height:.88;margin:14px 0 22px} .cs-tagline{max-width:44ch} .cs-info{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px); padding-block:clamp(30px,4vw,50px);border-top:1px solid var(--line);border-bottom:1px solid var(--line-soft) } .cs-info dt{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .cs-info dd{margin:0;font-size:15px;line-height:1.45;color:var(--white)} .cs-block{padding-block:clamp(50px,7vh,110px);border-bottom:1px solid var(--line-soft)} .cs-block-grid{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(24px,5vw,80px);align-items:start} .cs-block h2{font-size:clamp(1.5rem,3vw,2.6rem);margin-bottom:0} .cs-block .n{display:block;font-size:11px;letter-spacing:.16em;color:var(--accent);margin-bottom:14px;font-family:var(--body);font-weight:500} .cs-block p{max-width:62ch} .cs-block p:last-child{margin-bottom:0} .cs-media{display:grid;gap:clamp(12px,1.6vw,20px);margin-top:clamp(28px,4vw,48px)} .cs-media.two{grid-template-columns:1fr 1fr} .cs-media.three{grid-template-columns:repeat(3,1fr)} .cs-media figure{margin:0;overflow:hidden;background:var(--soft);cursor:pointer} .cs-media img{width:100%;height:100%;object-fit:cover;display:block} .cs-media figcaption{padding-top:12px;font-size:12px;color:var(--muted);line-height:1.45} /* Vertical social films: 9:16 cards, self-hosted, nothing fetched until play. Badge declarations are shared with the venture film above. */ .cs-video{display:grid;gap:clamp(12px,1.6vw,20px);margin-top:clamp(28px,4vw,48px); grid-template-columns:repeat(3,1fr)} .csv-card{margin:0} .csv-stage{position:relative;width:100%;aspect-ratio:9/16;background:var(--soft);overflow:hidden} .csv-stage video{width:100%;height:100%;display:block;object-fit:cover;background:#000} .csv-play{width:clamp(44px,4vw,60px)} .csv-play::after{border-left-width:clamp(11px,1.1vw,15px)} .csv-card figcaption{padding-top:12px;font-size:12px;color:var(--muted);line-height:1.45} .csv-card .dur{color:var(--text-2)} @media (max-width:900px){.cs-video{grid-template-columns:1fr 1fr}} @media (max-width:560px){.cs-video{grid-template-columns:1fr}} .cs-work{border-top:1px solid var(--line-soft);padding-top:clamp(26px,3vw,40px);margin-top:clamp(30px,4vw,48px)} .cs-work h3{font-size:clamp(1.05rem,1.8vw,1.4rem);margin-bottom:10px} .cs-work p{font-size:15px;max-width:60ch} .cs-work + .cs-work{margin-top:clamp(26px,3vw,40px)} .cs-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-soft); border:1px solid var(--line-soft);margin-top:clamp(26px,3.5vw,44px)} .cs-stat{background:var(--black);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:12px} .cs-stat .fig{font-family:var(--display);font-weight:800;letter-spacing:-.03em; font-size:clamp(1.6rem,3.2vw,2.9rem);line-height:1;color:var(--white)} .cs-stat .cap{font-size:12px;line-height:1.45;color:var(--muted)} .cs-source{margin-top:22px;font-size:12px;line-height:1.6;color:var(--muted);max-width:70ch} .cs-next{padding-block:clamp(50px,8vh,120px)} .cs-next a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap} .cs-next .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .cs-next .t{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(1.8rem,5.5vw,4.4rem);letter-spacing:-.03em;color:var(--white);line-height:1; transition:color .35s var(--ease)} .cs-next a:hover .t{color:var(--accent)} @media (max-width:1180px){ .cs-info{grid-template-columns:repeat(2,1fr)} .cs-stats{grid-template-columns:repeat(3,1fr)} .cs-block-grid{grid-template-columns:1fr;gap:20px} } @media (max-width:640px){ .cs-info{grid-template-columns:1fr 1fr} .cs-stats{grid-template-columns:1fr} .cs-media.two,.cs-media.three{grid-template-columns:1fr} } /* ============================================================= CUSTOM CURSOR (pointer devices only - brief 19) ============================================================= */ .cursor{ position:fixed;top:0;left:0;z-index:300;pointer-events:none; width:12px;height:12px;border-radius:50%;background:var(--accent); transform:translate(-50%,-50%);opacity:0; transition:width .3s var(--ease),height .3s var(--ease),opacity .3s var(--ease),background .3s var(--ease) } .cursor.is-live{opacity:1} .cursor.is-big{ width:72px;height:72px;background:rgba(240,74,35,.92) } .cursor .lbl{ position:absolute;inset:0;display:grid;place-items:center; font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff; opacity:0;transition:opacity .25s var(--ease);font-family:var(--body) } .cursor.is-big .lbl{opacity:1} /* ============================================================= REVEALS (brief 53) - IntersectionObserver driven ============================================================= */ /* Scoped to .js on . Without JavaScript nothing is ever hidden, because the .is-in class that reveals it would never be added. The class is set by a tiny inline script in , so there is no flash of hidden content. */ .js .rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)} .js .rv.is-in{opacity:1;transform:none} .rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s} .mask{overflow:hidden;display:block} .js .mask>span{display:block;transform:translateY(102%);transition:transform 1s var(--ease)} .js .mask.is-in>span{transform:none} /* ============================================================= RESPONSIVE (brief 57 - deliberate, not shrunk) ============================================================= */ @media (max-width:1180px){ .archive-grid{columns:3} .feature-body{grid-template-columns:1fr;gap:26px} .cap-wrap{grid-template-columns:1fr} .cap-visual{display:none} .tl-row{grid-template-columns:120px 1fr;row-gap:8px} .tl-row .desc{grid-column:2} } @media (max-width:1180px){ .sector-wrap{grid-template-columns:1fr;gap:26px} } @media (max-width:900px){ .exp-cols{grid-template-columns:1fr 1fr;gap:28px 32px} /* thumbnail stays, but the two metadata columns would crush the title */ /* Two rows: thumb spans both, title over discipline, arrow pinned right. Auto-placement put the arrow on a third row, under the thumbnail. */ .more-row{grid-template-columns:76px 1fr 16px;gap:4px 14px;align-items:center} .more-row .n{display:none} .more-row .thumb{grid-column:1;grid-row:1/3;width:76px;align-self:center} .more-row .t{grid-column:2;grid-row:1;font-size:1.05rem} .more-row .c{grid-column:2;grid-row:2;white-space:normal} .more-row .y{display:none} .more-row .go{grid-column:3;grid-row:1/3;opacity:1;align-self:center;justify-self:end} /* The base scrim is now already light and the copy has its own local wash, so the phone only needs a slightly earlier ramp: the hero copy block occupies proportionally more of a tall, narrow screen. */ .hero-media::after{ background:linear-gradient(to bottom, rgba(5,5,5,.70) 0%, rgba(5,5,5,.22) 12%, rgba(5,5,5,.06) 30%, rgba(5,5,5,.10) 44%, rgba(5,5,5,.34) 56%, rgba(5,5,5,.66) 72%, rgba(5,5,5,.92) 100%); } .hero-inner::before{top:-34%;bottom:-30%} .hero-intro{justify-content:flex-start;gap:0 .6em} .nav-main,.header-inner .lang{display:none} .menu-btn{ display:inline-flex;align-items:center;gap:9px;font-size:11px; letter-spacing:.16em;text-transform:uppercase;color:var(--white) } .work-intro-grid{grid-template-columns:1fr;gap:24px} .chapters{grid-template-columns:1fr;gap:0} .chap-rail{display:none} .film-grid{grid-template-columns:repeat(2,1fr)} .film-feature{grid-template-columns:1fr;gap:26px} .fm-3{grid-template-columns:1fr 1fr} .footer-grid{grid-template-columns:1fr 1fr} .venture{grid-template-columns:auto 1fr;row-gap:18px} .venture .vmark{grid-column:2} .contact-body{grid-template-columns:1fr;align-items:start} .vid-toggle{top:auto;bottom:calc(100% - 100svh + 84px)} } @media (max-width:640px){ body{font-size:16px} .exp-cols{grid-template-columns:1fr;gap:24px} .archive-grid{columns:2} .film-grid,.fm-2,.fm-3{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .feature-facts{grid-template-columns:1fr 1fr} .hero-bottom{flex-direction:column;align-items:flex-start;gap:20px} .exp-list{gap:16px 26px} .tl-row{grid-template-columns:1fr;row-gap:6px} .tl-row .desc{grid-column:1} } /* touch: no hover-dependent behaviour, no cursor (brief 57) */ @media (hover:none){ .cursor{display:none} .archive-grid figcaption{opacity:1;background:linear-gradient(to top,rgba(5,5,5,.85),rgba(5,5,5,0))} } /* ============================================================= REDUCED MOTION (brief 59) - information preserved, motion removed ============================================================= */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important } /* Must out-specify ".js .rv", or reduced-motion visitors would depend on JavaScript to reveal the page. */ .js .rv{opacity:1;transform:none} .js .mask>span{transform:none} .about-end .stack span,.contact h2 .fade{color:var(--white)} .cursor{display:none} .hero-scroll .bar::after{animation:none} } /* print: keep it readable */ @media print{ body{background:#fff;color:#000} .site-header,.hero-media,.cursor,.progress,.menu-panel{display:none} } /* --------------------------------------------------------------------- Coins arrondis. Chaque conteneur ci-dessous a déjà overflow:hidden, donc arrondir le conteneur suffit à découper l'image - inutile de toucher aux , et les zooms au survol restent clippés proprement. Deux exclusions volontaires : les médias plein cadre (hero, hero d'étude de cas) qui touchent les bords de l'écran, et les logos .vmark qui sont détourés sur fond transparent. -------------------------------------------------------------------- */ .feature-media figure, .film-hero figure, .film-poster, .film-card .yt-stage, .archive-grid figure, .cap-visual, .chapter figure, .venture-media figure, .venture-band, .vf-stage, .cs-media figure, .csv-stage, .lightbox img{border-radius:var(--r)} .more-row .thumb{border-radius:var(--r-sm)}