/* ========================================================= MOHAMED SAID — Senior Multimedia Designer Design system + motion language ========================================================= */ :root{ /* colour — the light theme is the default, so it lives here in the base rather than in an override: with JavaScript off nothing writes `data-theme` at all, and whatever :root holds is what the visitor gets */ --bg:#FFFFFF; --bg-2:#F3F2F0; --fg:#111111; --muted:#5C5C5C; --accent:#D93B10; --accent-rgb:217,59,16; --on-accent:#FFFFFF; --fg-rgb:17,17,17; --scrim-rgb:255,255,255; --line:rgba(17,17,17,.14); --line-soft:rgba(17,17,17,.06); /* type that steps back: unhovered names in the services and toolkit lists, and the idle side of a switch */ --recede:#C9C7C3; --idle:#B2B0AC; --idle-2:#DCDAD6; --dim:#6B6B6B; --ghost:#EFEDE9; /* the plate behind the about portrait */ --panel-1:#F0EEEA; --panel-2:#E2E0DB; /* the drifting colour behind the page, and the light that follows the pointer — one orange family, three temperatures of it: the brand at the centre, a deeper ember, and an amber that keeps it from flattening */ --aura-1:217,59,16; --aura-2:232,104,38; --aura-3:242,166,78; --spot-rgb:235,124,64; --spot-o:.5; /* generated artwork — js/data.js draws its inline SVG against these, which is what lets one drawing serve both themes */ --art-1:#F1EFEB; --art-2:#E3E1DC; --art-ink:#141414; --art-label:#6B6B6B; /* type */ --sans:'General Sans','Satoshi','Neue Montreal',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace; /* easing */ --e-out:cubic-bezier(.16,1,.3,1); --e-inout:cubic-bezier(.76,0,.24,1); --e-soft:cubic-bezier(.33,1,.68,1); /* rhythm */ --gut:clamp(20px,4.4vw,72px); --sec-pad:clamp(96px,14vh,180px); --nav-h:76px; } /* ========================================================= DARK THEME The same design with the lights off: a palette swap, not a second stylesheet. `data-theme` is written on by the inline script in each page's head, before first paint, so the theme never flashes on load. The accent steps back up here. #D93B10 is what the brand orange has to become to stay legible on white; on black it can be the full #FF4A1C again. ========================================================= */ html[data-theme="dark"]{ --bg:#0A0A0A; --bg-2:#0E0E0E; --fg:#F5F5F5; --fg-rgb:245,245,245; --muted:#8A8A8A; --accent:#FF4A1C; --accent-rgb:255,74,28; --on-accent:#0A0A0A; --scrim-rgb:10,10,10; --line:rgba(245,245,245,.11); --line-soft:rgba(245,245,245,.06); --recede:#3A3A3A; --idle:#4A4A4A; --idle-2:#2C2C2C; --dim:#5E5E5E; --ghost:#1A1A1A; --panel-1:#161616; --panel-2:#0C0C0C; --art-1:#171717; --art-2:#0B0B0B; --art-ink:#F5F5F5; --art-label:#8A8A8A; --aura-1:255,74,28; --aura-2:255,116,40; --aura-3:255,176,86; --spot-rgb:255,122,64; --spot-o:1; } *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} html,body{margin:0;padding:0;} body{ background:var(--bg); color:var(--fg); font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; text-rendering:optimizeLegibility; } img,svg,video{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;} h1,h2,h3,p,figure{margin:0;} ::selection{background:var(--accent);color:var(--on-accent);} /* scroll locks ------------------------------------------------ */ html.is-booting,html.is-locked{overflow:hidden;height:100%;} html.is-locked body{overflow:hidden;} html.lenis,html.lenis body{height:auto;} .lenis.lenis-smooth{scroll-behavior:auto !important;} /* shared bits -------------------------------------------------- */ .sec-kicker,.work__kicker,.about__kicker,.hero__eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:flex;align-items:center;gap:12px; } .sec-kicker i,.work__kicker i,.about__kicker i,.hero__eyebrow i{ display:block;width:34px;height:1px;background:var(--accent);flex:none; } .mask{display:block;overflow:hidden;} /* split text primitives */ span.w{display:inline-block;vertical-align:top;} span.c{display:inline-block;will-change:transform,opacity;} /* .masked clips its words so characters can rise out of a hard edge */ .masked span.w{ overflow:hidden; /* Display line-heights here are below 1, so glyph ink overflows its line box by roughly .2em top and bottom. With a tight mask the characters that have already landed show cropped tops and descenders for the whole length of the reveal, then snap complete when the mask lifts. Pad both edges (negative margins keep the layout identical) and start the travel low enough that the padded box still hides the character at rest. */ padding:.24em 0 .26em; margin:-.24em 0 -.26em; } /* ========================================================= GRAIN + PROGRESS ========================================================= */ /* ========================================================= AURA A slow colour drift behind the page: three soft radials on one composited layer, blended into the ground rather than painted onto it — `screen` lifts the dark theme, `multiply` tints the white one. The animation is transform-only, and it stops on phones and under reduced-motion, where the grain already stops for the same reason. ========================================================= */ .aura{ position:fixed;inset:-25%; z-index:6;pointer-events:none; opacity:.5;mix-blend-mode:multiply; background: radial-gradient(36% 40% at 22% 26%,rgba(var(--aura-1),.22),transparent 64%), radial-gradient(32% 36% at 78% 20%,rgba(var(--aura-2),.18),transparent 62%), radial-gradient(40% 44% at 62% 80%,rgba(var(--aura-3),.14),transparent 66%); animation:aura 38s var(--e-soft) infinite alternate; will-change:transform; } @keyframes aura{ 0%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(-2.5%,2%,0) scale(1.07);} 100%{transform:translate3d(2%,-2.5%,0) scale(1.03);} } html[data-theme="dark"] .aura{mix-blend-mode:screen;opacity:.55;} /* The second source: the same idea as the aura, but it follows the pointer and trails a beat behind it — the cursor loop in js/main.js already runs an eased follow every frame, so this rides that one loop rather than opening another. Nothing to follow on touch, and nothing to chase under reduced-motion, so it is absent in both. */ .spot{ position:fixed;top:0;left:0; width:62vmax;height:62vmax;margin:-31vmax 0 0 -31vmax; z-index:5;pointer-events:none; opacity:0;transition:opacity 1.2s var(--e-out); mix-blend-mode:multiply; background:radial-gradient(circle at 50% 50%, rgba(var(--spot-rgb),.17),rgba(var(--spot-rgb),.06) 40%,transparent 66%); will-change:transform; } .spot.is-on{opacity:var(--spot-o);} html[data-theme="dark"] .spot{mix-blend-mode:screen;} @media (hover:none),(pointer:coarse){.spot{display:none;}} @media (prefers-reduced-motion:reduce){.spot{display:none;}} .grain{ position:fixed;inset:-150%; z-index:9000;pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1.2s steps(6) infinite; will-change:transform; mix-blend-mode:overlay; } @keyframes grain{ 0%{transform:translate3d(0,0,0)} 16%{transform:translate3d(-2%,1%,0)} 33%{transform:translate3d(1%,-2%,0)} 50%{transform:translate3d(-1%,2%,0)} 66%{transform:translate3d(2%,1%,0)} 83%{transform:translate3d(-2%,-1%,0)} 100%{transform:translate3d(0,0,0)} } .scroll-progress{ position:fixed;top:0;left:0;right:0;height:1px;z-index:8000; background:var(--line-soft);pointer-events:none;opacity:0;transition:opacity .5s; } .scroll-progress.is-on{opacity:1;} .scroll-progress__bar{ display:block;height:100%;width:100%;background:var(--accent); transform:scaleX(0);transform-origin:0 50%;will-change:transform; } /* ========================================================= CURSOR ========================================================= */ .cursor{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;opacity:0;transition:opacity .4s;} .cursor.is-on{opacity:1;} .cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform;} .cursor__dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--fg);} .cursor__ring{ width:46px;height:46px;margin:-23px 0 0 -23px; border:1px solid rgba(var(--fg-rgb),.35); display:grid;place-items:center; backdrop-filter:blur(1px); } .cursor__label{ font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--on-accent);opacity:0;white-space:nowrap;transform:scale(.8); transition:opacity .3s var(--e-out),transform .4s var(--e-out); } .cursor.has-label .cursor__ring{background:var(--accent);border-color:var(--accent);} .cursor.has-label .cursor__label{opacity:1;transform:scale(1);} .cursor.has-label .cursor__dot{opacity:0;} @media (hover:none),(pointer:coarse){.cursor{display:none;}} /* The grain shimmer repaints a full-viewport layer forever. On phones that is the single most expensive idle cost on the page, and the texture reads the same standing still — so keep the grain, drop the animation. */ @media (max-width:820px),(prefers-reduced-motion:reduce){ .grain,.aura{animation:none;} } /* ========================================================= LOADER ========================================================= */ .loader{ position:fixed;inset:0;z-index:9200;background:var(--bg); display:grid;place-items:center;padding:var(--gut); } .loader__inner{width:min(1240px,100%);} .loader__name{ display:flex;align-items:baseline;flex-wrap:wrap; font-size:clamp(2.1rem,7.4vw,7rem); font-weight:600;letter-spacing:-.045em;line-height:1; } .loader__name span{display:inline-block;opacity:0;transform:translateY(.55em);} .loader__name em{display:inline-block;width:.34em;} .loader__meta{ display:flex;justify-content:space-between;align-items:flex-end; margin-top:clamp(18px,3vh,34px); font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); } .loader__count{color:var(--fg);font-size:clamp(11px,1.6vw,14px);} .loader__track{margin-top:14px;height:1px;background:var(--line);overflow:hidden;} .loader__fill{display:block;height:100%;width:100%;background:var(--fg);transform:scaleX(0);transform-origin:0 50%;} .loader.is-out{pointer-events:none;} /* ========================================================= INTRO CINEMATIC ========================================================= */ .intro{ position:fixed;inset:0;z-index:9100;background:var(--bg); display:grid;place-items:center;padding:calc(var(--gut) * 1.2); opacity:0;visibility:hidden; } .intro.is-live{opacity:1;visibility:visible;} .intro__stage{ position:relative;width:min(1280px,100%); min-height:min(46vh,420px); display:grid;place-items:center; } .intro__line{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:100%;text-align:center; opacity:0;visibility:hidden; } .intro__line--sign{text-align:center;} .intro__text{ display:inline-block;position:relative; font-size:clamp(1.65rem,5.6vw,5.1rem); font-weight:500;letter-spacing:-.035em;line-height:1.05; } .intro__line--type{white-space:nowrap;} .caret{ position:absolute;left:0;top:50%; width:2px;height:.92em;margin-top:-.46em; background:var(--accent); opacity:0; will-change:transform; } .caret.is-blinking{animation:blink .9s steps(2,start) infinite;} @keyframes blink{0%,100%{opacity:1}50%{opacity:0}} .intro__line--stack{display:grid;place-items:center;} .intro__swap{ grid-area:1/1; font-size:clamp(2rem,8.2vw,7.6rem); font-weight:600;letter-spacing:-.05em;line-height:1; opacity:0;white-space:nowrap; } .intro__line--duo{display:flex;flex-direction:column;gap:.02em;align-items:center;} .intro__big{ font-size:clamp(2.2rem,9vw,8.4rem); font-weight:600;letter-spacing:-.05em;line-height:.94; } .intro__big--accent{color:var(--accent);} .intro__mid{ display:inline-block; font-size:clamp(1.5rem,5vw,4.4rem); font-weight:400;letter-spacing:-.03em;line-height:1.08; max-width:16ch; } .intro__sign{ display:block; font-size:clamp(2.6rem,11.5vw,11.5rem); font-weight:600;letter-spacing:-.055em;line-height:.9; text-transform:uppercase; } .intro__signrole{ display:flex;align-items:center;justify-content:center;gap:12px; margin-top:clamp(14px,2.4vh,26px); font-family:var(--mono);font-size:clamp(10px,1.1vw,12px); letter-spacing:.24em;text-transform:uppercase;color:var(--muted); opacity:0; } .intro__signrole i{display:block;width:40px;height:1px;background:var(--accent);} .intro__skip{ position:absolute;right:var(--gut);bottom:var(--gut); font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);opacity:0;transition:color .35s,opacity .6s; } .intro__skip:hover{color:var(--fg);} .intro.is-live .intro__skip{opacity:1;} /* ========================================================= NAV ========================================================= */ .nav{ position:fixed;top:0;left:0;right:0;z-index:7000; height:var(--nav-h); display:flex;align-items:center;justify-content:space-between; padding:0 var(--gut); opacity:0;transform:translateY(-12px);pointer-events:none; transition:opacity .8s var(--e-out),transform .8s var(--e-out); } .nav.is-ready{opacity:1;transform:none;pointer-events:auto;} .nav::before{ content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(to bottom,rgba(var(--scrim-rgb),.86),rgba(var(--scrim-rgb),0)); backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px); opacity:0;transition:opacity .5s var(--e-out); border-bottom:1px solid transparent; } .nav.is-solid::before{opacity:1;} .nav.is-dim{opacity:.28;} .nav.is-dim:hover{opacity:1;} .nav__brand{display:flex;align-items:center;gap:11px;font-weight:500;letter-spacing:-.02em;font-size:14px;} .nav__mark{ width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none; box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5); animation:pulse 3.4s var(--e-out) infinite; } @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45)}70%{box-shadow:0 0 0 11px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}} .nav__links{display:flex;gap:clamp(18px,2.4vw,38px);} .nav__links a{ position:relative; font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);padding:6px 0;transition:color .4s var(--e-out); } .nav__links a::after{ content:'';position:absolute;left:0;bottom:2px;width:100%;height:1px;background:var(--fg); transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--e-out); } .nav__links a:hover{color:var(--fg);} .nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%;} .nav__links a.is-active{color:var(--fg);} .nav__links a.is-active::after{background:var(--accent);transform:scaleX(1);transform-origin:0 50%;} .nav__toggle{display:none;align-items:center;gap:10px;} .nav__toggle-lines{display:block;width:22px;} .nav__toggle-lines i{display:block;height:1px;background:var(--fg);margin:5px 0;transition:transform .5s var(--e-out),opacity .3s;} .nav__toggle-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;} body.menu-open .nav__toggle-lines i:nth-child(1){transform:translateY(3px) rotate(45deg);} body.menu-open .nav__toggle-lines i:nth-child(2){transform:translateY(-3px) rotate(-45deg);} /* mobile menu */ .menu{ position:fixed;inset:0;z-index:6900;background:var(--bg); display:flex;flex-direction:column;justify-content:center; padding:var(--gut); clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--e-inout); visibility:hidden; } body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible;} .menu__inner{display:flex;flex-direction:column;gap:clamp(4px,1.4vh,14px);} .menu__inner a{ display:flex;align-items:baseline;gap:16px; font-size:clamp(2.4rem,11vw,5rem);font-weight:600;letter-spacing:-.045em;line-height:1.05; opacity:0;transform:translateY(40px); transition:opacity .7s var(--e-out),transform .8s var(--e-out),color .35s; } body.menu-open .menu__inner a{opacity:1;transform:none;} body.menu-open .menu__inner a:nth-child(1){transition-delay:.16s} body.menu-open .menu__inner a:nth-child(2){transition-delay:.22s} body.menu-open .menu__inner a:nth-child(3){transition-delay:.28s} body.menu-open .menu__inner a:nth-child(4){transition-delay:.34s} body.menu-open .menu__inner a:nth-child(5){transition-delay:.40s} .menu__inner a em{font-family:var(--mono);font-size:11px;font-style:normal;letter-spacing:.14em;color:var(--accent);} .menu__inner a:active{color:var(--accent);} .menu__foot{ margin-top:auto;padding-top:26px;border-top:1px solid var(--line); display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); } /* ========================================================= HERO ========================================================= */ .hero{ position:relative;min-height:100svh; display:flex;flex-direction:column;justify-content:flex-end; padding:calc(var(--nav-h) + 30px) var(--gut) clamp(26px,4vh,48px); overflow:hidden; } .hero__grid{ position:absolute;inset:0; background-image:linear-gradient(to right,var(--line-soft) 1px,transparent 1px); background-size:calc(100% / 6) 100%; opacity:0;transition:opacity 1.4s var(--e-out); } .hero.is-in .hero__grid{opacity:1;} .hero__inner{margin-top:auto;} .hero__eyebrow{margin-bottom:clamp(16px,3vh,30px);} .hero__name{ font-size:clamp(3.1rem,13.6vw,15.5rem); font-weight:600;letter-spacing:-.055em;line-height:.85; text-transform:uppercase; } .hero__name > span{display:block;} /* name and portrait share one row: the plate sits beside the name, bottom-aligned with it, and mirrors to the other side under RTL */ .hero__head{ display:flex;align-items:flex-end; gap:clamp(18px,3.4vw,56px); } .hero__name{flex:0 1 auto;min-width:0;} /* the plate takes a quarter of the row, so the name is stepped down to sit beside it — one line per word, never breaking mid-word */ .hero__head .hero__name{font-size:clamp(2.2rem,8.4vw,10rem);} .hero__head .hero__name > span{white-space:nowrap;} /* no portrait set: the name takes the whole row back at its full scale */ .hero__head:has(.hero__portrait:empty) .hero__name{font-size:clamp(3.1rem,13.6vw,15.5rem);} .hero__portrait{ position:relative;flex:none; width:clamp(190px,25vw,460px); /* no plate behind it: the cut-out stands on the page itself, so there is no background box and no fixed ratio cropping the figure */ margin:0 0 clamp(6px,1.2vh,16px); margin-inline-start:auto; } .hero__portrait:empty{display:none;} .hero__portrait img, .hero__portrait video{ display:block;width:100%;height:auto; /* shown plain: full colour, no filter, no scale, no hover treatment */ } .hero__meta{ display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(20px,5vw,90px); margin-top:clamp(26px,5vh,60px); padding-top:clamp(18px,2.6vh,28px);border-top:1px solid var(--line); } .hero__role{ font-family:var(--mono);font-size:clamp(11px,1.15vw,13px); letter-spacing:.22em;text-transform:uppercase;color:var(--fg); } .hero__blurb{max-width:34ch;color:var(--muted);font-size:clamp(13px,1.15vw,16px);line-height:1.5;text-align:right;} .hero__foot{ display:flex;justify-content:space-between;align-items:center; margin-top:clamp(28px,5vh,64px); font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted); } .hero__scrollhint{display:flex;align-items:center;gap:10px;} .hero__scrollhint i{ display:block;width:1px;height:26px;background:linear-gradient(var(--accent),transparent); animation:hint 2.2s var(--e-out) infinite;transform-origin:0 0; } @keyframes hint{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:0}} .hero__scrollhint.is-off{opacity:0;transition:opacity .5s;} /* ========================================================= SERVICES ========================================================= */ .services{position:relative;padding:var(--sec-pad) 0 clamp(60px,10vh,140px);} .services__title{ min-height:88svh;display:flex;flex-direction:column;justify-content:center; padding:0 var(--gut); } .services__titleinner{ display:flex;flex-wrap:wrap;align-items:baseline;gap:0 clamp(18px,3vw,58px); font-size:clamp(4rem,18vw,20rem); font-weight:600;letter-spacing:-.06em;line-height:.82;text-transform:uppercase; } .st-word{display:block;will-change:transform;} .st-word[data-st="1"]{color:var(--accent);} .services__lede{ margin-top:clamp(26px,4vh,52px);max-width:40ch; color:var(--muted);font-size:clamp(14px,1.35vw,19px); } .services__list{border-top:1px solid var(--line);} .srv{ position:relative;display:block; border-bottom:1px solid var(--line); padding:clamp(22px,3.6vw,44px) var(--gut); overflow:hidden; transition:background-color .7s var(--e-out); } .srv__bg{ position:absolute;inset:0;background:var(--bg-2); transform:scaleY(0);transform-origin:50% 100%; transition:transform .8s var(--e-out); pointer-events:none; } .srv:hover .srv__bg{transform:scaleY(1);transform-origin:50% 0;} .srv__row{ position:relative;display:flex;align-items:baseline;gap:clamp(14px,2.6vw,40px); will-change:transform; } .srv__num{ font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted); flex:none;padding-top:.55em;transition:color .5s var(--e-out); } .srv__name{ font-size:clamp(2.1rem,7.6vw,7.2rem); font-weight:500;letter-spacing:-.05em;line-height:.98; transition:color .5s var(--e-out); will-change:transform; } .srv__name .c{transition:transform .6s var(--e-out),opacity .5s;} .srv__desc{ margin-left:auto;max-width:30ch;text-align:right; color:var(--muted);font-size:clamp(12.5px,1.05vw,15px);line-height:1.5; opacity:.55;transition:opacity .6s var(--e-out),transform .7s var(--e-out); transform:translateX(0); } .srv:hover .srv__num{color:var(--accent);} .srv:hover .srv__desc{opacity:1;} .srv.is-hot .srv__name{color:var(--fg);} .services__list:hover .srv:not(:hover) .srv__name{color:var(--recede);} .service-preview{ position:fixed;top:0;left:0;z-index:5000; width:clamp(180px,17vw,260px);aspect-ratio:4/5; margin:-.5px 0 0 -.5px; pointer-events:none;opacity:0; overflow:hidden; will-change:transform; } .service-preview__inner{width:100%;height:100%;transform:scale(1.12);} .service-preview svg,.service-preview img,.service-preview video{width:100%;height:100%;object-fit:cover;} /* ========================================================= WORK — horizontal reel ========================================================= */ .work{position:relative;background:var(--bg);} .work__pin{ position:relative;height:100svh;overflow:hidden; display:flex;align-items:center; padding-bottom:40px; /* reserves the HUD strip so cards centre above it */ } .work__track{display:flex;align-items:center;height:100%;will-change:transform;} .work__lead{ flex:none;width:clamp(320px,44vw,720px); padding:0 var(--gut); display:flex;flex-direction:column;justify-content:center; } .work__heading{ margin-top:clamp(16px,2.4vh,28px); font-size:clamp(2.8rem,8.4vw,8rem); font-weight:600;letter-spacing:-.055em;line-height:.86;text-transform:uppercase; } .work__heading > span{display:block;} .work__note{margin-top:clamp(18px,3vh,32px);max-width:26ch;color:var(--muted);font-size:14px;} .work__arrow{ margin-top:clamp(24px,4vh,44px);width:76px;height:1px;background:var(--line);position:relative; } .work__arrow::after{ content:'';position:absolute;left:0;top:0;height:1px;width:34px;background:var(--accent); animation:slide 2.6s var(--e-inout) infinite; } @keyframes slide{0%{transform:translateX(0);opacity:0}20%{opacity:1}100%{transform:translateX(42px);opacity:0}} .proj{ flex:none;position:relative; /* Width is capped by the viewport height as well as its width: a 4:5 visual plus its meta block must fit inside the pinned reel, or the reel's overflow:hidden slices the description off. */ width:min(clamp(300px,42vw,640px), calc((100svh - 250px) * 0.8)); margin-right:clamp(26px,4vw,80px); cursor:pointer; } .proj:first-of-type{margin-left:0;} .proj__visual{ position:relative;overflow:hidden; aspect-ratio:4/5; background:var(--bg-2); transform:translateZ(0); } .proj__media{ position:absolute;inset:0; transform:scale(1.02); transition:transform 1.1s var(--e-out),filter .9s var(--e-out); will-change:transform; } .proj__media svg,.proj__media img,.proj__media video{width:100%;height:100%;object-fit:cover;} .proj:hover .proj__media{transform:scale(1.07);} .proj__veil{ position:absolute;inset:0;background:rgba(var(--scrim-rgb),.34); transition:opacity .8s var(--e-out);opacity:1; } .proj:hover .proj__veil{opacity:0;} .proj__num{ position:absolute;left:0;top:0; padding:14px 18px; font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--fg); mix-blend-mode:difference; } .proj__meta{ display:flex;justify-content:space-between;align-items:flex-start;gap:20px; padding-top:16px; } .proj__title{ font-size:clamp(1.35rem,2.5vw,2.4rem);font-weight:500;letter-spacing:-.035em;line-height:1.05; transition:transform .7s var(--e-out); } .proj:hover .proj__title{transform:translateX(8px);} /* a project can sit under more than one category, so the card carries a row of tags rather than a single line — they wrap, and each is its own door */ .proj__cats{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:8px;} .proj__cat{ font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); } /* a thin rule between tags, so two categories never read as one long label */ .proj__cats .proj__cat + .proj__cat{position:relative;} .proj__cats .proj__cat + .proj__cat::before{ content:"";position:absolute;left:-6px;top:50%;width:1px;height:9px; transform:translateY(-50%);background:currentColor;opacity:.35; } .proj__year{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--muted);flex:none;padding-top:6px;} .proj__desc{ margin-top:12px;max-width:34ch;color:var(--muted);font-size:13.5px;line-height:1.5; opacity:0;transform:translateY(8px); transition:opacity .7s var(--e-out),transform .7s var(--e-out); } .proj:hover .proj__desc{opacity:1;transform:none;} /* a project with a live link says so on the card, so the reel reads as work you can go and see rather than a closed gallery */ .proj__live{ display:block;margin-top:12px; font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent); } .work__end{ flex:none;width:clamp(260px,30vw,520px);padding:0 var(--gut); display:flex;flex-direction:column;justify-content:center;gap:18px; } .work__endtitle{font-size:clamp(1.6rem,3.4vw,3.2rem);font-weight:500;letter-spacing:-.04em;line-height:1.02;} .work__endnote{color:var(--muted);font-size:14px;max-width:24ch;} .work__hud{ position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(20px,3.4vh,38px); display:flex;align-items:center;gap:20px; font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); pointer-events:none; } .work__index em{font-style:normal;color:var(--fg);} .work__index i{font-style:normal;} .work__line{flex:1;height:1px;background:var(--line);display:block;overflow:hidden;} .work__line b{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;will-change:transform;} /* ========================================================= ABOUT ========================================================= */ .about{position:relative;} .about__pin{ position:relative;min-height:100svh; padding:var(--sec-pad) var(--gut); display:flex;flex-direction:column;justify-content:center; overflow:hidden; } .about__words{ position:absolute;inset:0;pointer-events:none; display:flex;flex-direction:column;justify-content:center; /* six lines at .84 leading must fit the pin, or the first and last words get sliced in half by the section's overflow:hidden */ font-size:clamp(2.2rem,min(13vw,13.5vh),13rem); font-weight:600;letter-spacing:-.06em;line-height:.84;text-transform:uppercase; color:var(--ghost); } .about__words > span{display:block;will-change:transform;white-space:nowrap;} .about__content{position:relative;max-width:min(1080px,100%);} .about__statement{ margin-top:clamp(22px,3.6vh,44px); font-size:clamp(1.6rem,4.2vw,4rem); font-weight:400;letter-spacing:-.035em;line-height:1.1; max-width:20ch; } .about__cols{ display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,52px); margin-top:clamp(38px,7vh,90px);padding-top:clamp(20px,3vh,32px);border-top:1px solid var(--line); } .about__lab{ display:block;margin-bottom:12px; font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent); } .about__col p{color:var(--muted);font-size:clamp(13px,1.05vw,15px);line-height:1.55;max-width:34ch;} .about__col--stats{display:flex;gap:clamp(20px,3vw,44px);align-items:flex-start;} .about__stat{display:flex;flex-direction:column;gap:2px;} .about__stat em{font-style:normal;font-size:clamp(2rem,3.6vw,3.4rem);font-weight:500;letter-spacing:-.04em;line-height:1;} .about__stat i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} .about__portrait{ position:absolute;right:var(--gut);top:50%;transform:translateY(-50%); width:clamp(150px,17vw,290px); display:none; } .about__portraitmask{overflow:hidden;aspect-ratio:3/4;background:var(--bg-2);} .about__portraitimg{ width:100%;height:100%; background: radial-gradient(120% 90% at 50% 12%,rgba(var(--accent-rgb),.20),transparent 62%), repeating-linear-gradient(115deg,rgba(var(--fg-rgb),.045) 0 2px,transparent 2px 7px), linear-gradient(var(--panel-1),var(--panel-2)); background-size:cover;background-position:center; transform:scale(1.08);will-change:transform; } .about__portrait figcaption{ margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); } @media (min-width:1180px){.about__portrait{display:block;}.about__content{max-width:70%;}} /* ========================================================= CLIENTS A logo strip that drifts. Every mark is shown in the colours its owner drew it in; the dark theme puts a white plate under each one rather than recolouring it, so the ground is white in both themes. `data-tone` therefore has one job left: naming artwork that is itself white, which is the only kind that would disappear into that ground and so is turned. ========================================================= */ .clients[hidden]{display:none;} .clients{padding:clamp(56px,9vh,110px) 0;} .clients__head{padding:0 var(--gut);margin-bottom:clamp(26px,4.5vh,52px);} .clients__heading{ margin-top:clamp(12px,2vh,20px); font-size:clamp(1.7rem,4.4vw,3.4rem);font-weight:500;letter-spacing:-.045em;line-height:1; } .clients__marquee{ position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .clients__track{ display:flex;align-items:center;width:max-content; gap:clamp(34px,5.5vw,92px);padding:0 clamp(17px,2.75vw,46px); animation:client-drift var(--clients-dur,40s) linear infinite; will-change:transform; } @keyframes client-drift{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);} } /* a strip that already fits has nowhere to travel */ .clients__marquee.is-static{-webkit-mask-image:none;mask-image:none;} .clients__marquee.is-static .clients__track{ animation:none;width:100%;justify-content:center;flex-wrap:wrap;row-gap:clamp(20px,3vh,34px); } .clients__marquee.is-static .client[aria-hidden="true"]{display:none;} .clients__marquee:hover .clients__track{animation-play-state:paused;} .client{flex:none;display:flex;align-items:center;justify-content:center;} .client__mark{display:flex;align-items:center;justify-content:center;} /* The height is set on the mark itself rather than inherited down a chain of percentages: the row that holds it is auto-sized, so `height:100%` has nothing definite to resolve against and every logo would fall back to its own pixel size. object-fit keeps a wide mark from being squeezed when the max-width catches it. */ .client img,.client svg,.client video{ height:clamp(30px,3.8vw,52px);width:auto; max-width:clamp(110px,15vw,210px);object-fit:contain; filter:none;opacity:1; transition:opacity .5s var(--e-out),filter .5s var(--e-out); } /* Every logo is shown in its own colours, in both themes. Brand colour is what a mark is meant to be read as, so the strip stops recolouring it. The dark theme gets a white plate under each one instead: a logo drawn for paper has no contrast against a near-black page, and giving it the white ground it was drawn for is what lets the colour survive the theme. */ html[data-theme="dark"] .client__mark{ background:#fff;border-radius:6px; padding:clamp(10px,1.3vw,17px) clamp(14px,1.8vw,24px); transition:box-shadow .5s var(--e-out); } html[data-theme="dark"] .client:hover .client__mark{ box-shadow:0 0 0 1px rgba(255,255,255,.5); } /* The one mark that cannot keep its own colours: artwork drawn in white. The ground behind it is now white in both themes, so it would disappear into the plate. It is monochrome by definition, so turning it costs no colour. */ .client[data-tone="light"] img, .client[data-tone="light"] svg{filter:invert(1);} /* ========================================================= TOOLKIT ========================================================= */ .toolkit{position:relative;padding:var(--sec-pad) var(--gut);overflow:hidden;} .toolkit__heading{ margin-top:clamp(14px,2.2vh,24px); font-size:clamp(2.2rem,6vw,5.4rem);font-weight:500;letter-spacing:-.05em;line-height:.94; } .toolkit__list{ position:relative;z-index:2; display:flex;flex-wrap:wrap;align-items:baseline; gap:0 clamp(14px,2vw,38px); margin-top:clamp(40px,7vh,88px); } .tool{ position:relative;display:inline-flex;align-items:baseline;gap:8px; font-size:clamp(1.5rem,5.2vw,4.6rem); font-weight:500;letter-spacing:-.045em;line-height:1.18; color:var(--idle); transition:color .55s var(--e-out),transform .7s var(--e-out); will-change:transform;cursor:default; } .tool sup{ font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--muted); transform:translateY(-.2em);opacity:0;transition:opacity .5s; } .tool:hover{color:var(--fg);} .tool:hover sup{opacity:1;} .toolkit__list:hover .tool:not(:hover){color:var(--idle-2);} .toolkit__glow{ position:absolute;top:0;left:0;width:640px;height:640px;margin:-320px 0 0 -320px; border-radius:50%;pointer-events:none;z-index:1;opacity:0; background:radial-gradient(circle,rgba(var(--accent-rgb),.13),transparent 62%); will-change:transform; } /* ========================================================= CONTACT ========================================================= */ .contact{position:relative;padding:var(--sec-pad) var(--gut) clamp(28px,4vh,44px);min-height:100svh;display:flex;} .contact__inner{width:100%;margin:auto 0 0;} .contact__heading{ font-size:clamp(2.9rem,13vw,14rem); font-weight:600;letter-spacing:-.06em;line-height:.86;text-transform:uppercase; } .ch-line{display:block;} .ch-line--accent{color:var(--accent);} .contact__body{ display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:clamp(24px,4vw,60px); margin-top:clamp(34px,6vh,74px);padding-top:clamp(20px,3vh,30px);border-top:1px solid var(--line); } .contact__q{font-size:clamp(1.05rem,2.1vw,1.75rem);font-weight:400;letter-spacing:-.02em;} .contact__a{color:var(--muted);font-size:clamp(1.05rem,2.1vw,1.75rem);letter-spacing:-.02em;max-width:22ch;} .cta{ position:relative;display:inline-flex;align-items:center;gap:16px; padding:clamp(16px,1.8vw,24px) clamp(24px,2.8vw,40px); border:1px solid var(--line);border-radius:100px; overflow:hidden;isolation:isolate;will-change:transform; font-family:var(--mono);font-size:clamp(11px,1.1vw,13px);letter-spacing:.16em;text-transform:uppercase; } .cta__bg{ position:absolute;inset:0;z-index:-1;background:var(--accent); transform:translateY(101%);transition:transform .7s var(--e-inout); } .cta:hover .cta__bg{transform:translateY(0);} .cta:hover{color:var(--on-accent);border-color:var(--accent);} .cta__label{display:block;overflow:hidden;height:1.1em;position:relative;} .cta__label i{display:block;font-style:normal;transition:transform .65s var(--e-out);} .cta:hover .cta__label i{transform:translateY(-1.1em);} .cta__arrow{ width:22px;height:1px;background:currentColor;position:relative;flex:none; transition:width .5s var(--e-out); } .cta__arrow::after{ content:'';position:absolute;right:0;top:-3px;width:7px;height:7px; border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg); } .cta:hover .cta__arrow{width:34px;} .contact__grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,50px); margin-top:clamp(46px,8vh,110px); } .contact__lab{ display:block;margin-bottom:14px; font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted); } .link{ display:block;width:fit-content;margin-bottom:6px; font-size:clamp(14px,1.4vw,19px);letter-spacing:-.01em; } .link span{ display:inline-block;position:relative;padding-bottom:3px; } .link span::after{ content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor; transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--e-out); } .link:hover span::after{transform:scaleX(1);transform-origin:0 50%;} .foot{ display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; margin-top:clamp(50px,9vh,120px);padding-top:20px;border-top:1px solid var(--line); font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); } .foot__top{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .4s;} .foot__top:hover{color:var(--accent);} /* ========================================================= PROJECT DETAIL ========================================================= */ .detail{ position:fixed;inset:0;z-index:8500; visibility:hidden;pointer-events:none; background:var(--bg); opacity:0; } .detail.is-open{visibility:visible;pointer-events:auto;opacity:1;} .detail__flip{ position:fixed;top:0;left:0;overflow:hidden;opacity:0; will-change:transform,width,height;pointer-events:none;z-index:2; background:var(--bg-2); } .detail__flip svg,.detail__flip img,.detail__flip video{width:100%;height:100%;object-fit:cover;} .detail__scroll{ position:absolute;inset:0;overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch;z-index:3;opacity:0; scrollbar-width:none; } .detail__scroll::-webkit-scrollbar{display:none;} /* focused programmatically when the project opens, so it takes the arrow keys; :focus-visible still draws a ring for anyone who gets here by keyboard */ .detail__scroll:focus{outline:none;} .detail__close{ position:fixed;top:calc(var(--nav-h) / 2);right:var(--gut);transform:translateY(-50%); z-index:5;width:44px;height:44px;border:1px solid var(--line);border-radius:50%; display:grid;place-items:center;opacity:0; transition:border-color .4s,background-color .4s,transform .5s var(--e-out); } .detail__close span{position:absolute;width:14px;height:1px;background:var(--fg);} .detail__close span:nth-child(1){transform:rotate(45deg);} .detail__close span:nth-child(2){transform:rotate(-45deg);} .detail__close:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-50%) rotate(90deg);} .detail__hud{ position:fixed;left:var(--gut);top:calc(var(--nav-h) / 2);transform:translateY(-50%); z-index:5;display:flex;align-items:center;gap:12px;opacity:0; font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); } .detail__hud i{display:block;width:26px;height:1px;background:var(--accent);} .detail__hud span:last-child{color:var(--fg);} .dt-hero{position:relative;height:100svh;display:flex;align-items:flex-end;padding:var(--gut);overflow:hidden;} .dt-hero__media{position:absolute;inset:0;} .dt-hero__media svg,.dt-hero__media img,.dt-hero__media video{width:100%;height:100%;object-fit:cover;} .dt-hero__scrim{ position:absolute;inset:0; background:linear-gradient(to top,rgba(var(--scrim-rgb),.92),rgba(var(--scrim-rgb),.1) 58%,rgba(var(--scrim-rgb),.55)); } .dt-hero__inner{position:relative;z-index:2;width:100%;} .dt-hero__cat{margin-bottom:14px;} .dt-hero__title{ font-size:clamp(2.6rem,10vw,10rem);font-weight:600;letter-spacing:-.055em;line-height:.86;text-transform:uppercase; } .dt-body{padding:clamp(60px,12vh,150px) var(--gut) 0;} /* ========================================================= A PROJECT'S OWN PAGE When a project points at a file in projects/, that file's markup lands here instead of the generated body. These rules deliberately sit above every component below them: bare tags in the fragment pick up the page's type and rhythm, while anything using the site's own classes — dt-lead, dt-fact, dt-step, dt-vis — keeps its component styling, because those rules come later and win the tie. ========================================================= */ .dt-custom > :first-child{margin-top:0;} .dt-custom h2{ margin:clamp(40px,7vh,90px) 0 clamp(14px,2vh,22px); font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:500;letter-spacing:-.04em;line-height:1.05; } .dt-custom h3{ margin:clamp(32px,5vh,64px) 0 12px; font-size:clamp(1.15rem,2.2vw,1.7rem);font-weight:500;letter-spacing:-.03em; } .dt-custom h4{margin:0 0 8px;font-size:clamp(1.05rem,1.8vw,1.3rem);font-weight:500;letter-spacing:-.02em;} .dt-custom p{margin:0 0 1.15em;color:var(--muted);font-size:15px;line-height:1.65;max-width:66ch;} .dt-custom strong{color:var(--fg);font-weight:500;} .dt-custom a:not(.dt-cta){ color:var(--fg);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:var(--line);transition:text-decoration-color .4s; } .dt-custom a:not(.dt-cta):hover{text-decoration-color:var(--accent);} .dt-custom ul,.dt-custom ol{margin:0 0 1.2em;padding-inline-start:1.2em;color:var(--muted);font-size:15px;line-height:1.7;max-width:66ch;} .dt-custom li{margin-bottom:.45em;} .dt-custom li::marker{color:var(--accent);} .dt-custom blockquote{ margin:clamp(28px,5vh,56px) 0;padding-inline-start:clamp(16px,2.5vw,28px); border-inline-start:1px solid var(--accent); font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.45;letter-spacing:-.02em;max-width:44ch; } .dt-custom img,.dt-custom video{width:100%;height:auto;display:block;} .dt-custom > figure{margin:clamp(28px,5vh,56px) 0;} .dt-custom figcaption{ margin-top:10px; font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); } .dt-custom iframe{width:100%;aspect-ratio:16/9;border:0;display:block;} .dt-custom pre{ overflow-x:auto;margin:clamp(20px,3vh,34px) 0;padding:clamp(16px,2.4vw,26px); background:var(--bg-2);border:1px solid var(--line-soft); font-family:var(--mono);font-size:12.5px;line-height:1.6; } .dt-custom code{font-family:var(--mono);font-size:.92em;} .dt-custom table{width:100%;border-collapse:collapse;margin:clamp(24px,4vh,44px) 0;font-size:14px;} .dt-custom th,.dt-custom td{padding:12px 14px;border-bottom:1px solid var(--line-soft);text-align:start;} .dt-custom th{ font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);font-weight:400; } .dt-custom td{color:var(--muted);} .dt-custom hr{border:0;border-top:1px solid var(--line);margin:clamp(36px,6vh,72px) 0;} /* the gallery is a grid; its figures carry their own spacing */ .dt-visuals .dt-vis{margin:0;} .dt-lead{ font-size:clamp(1.4rem,3.4vw,3rem);font-weight:400;letter-spacing:-.035em;line-height:1.14;max-width:24ch; } .dt-facts{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,40px); margin-top:clamp(46px,8vh,100px);padding-top:24px;border-top:1px solid var(--line); } .dt-fact span{ display:block;margin-bottom:12px; font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent); } .dt-fact p{color:var(--muted);font-size:14px;line-height:1.6;} .dt-process{margin-top:clamp(60px,11vh,140px);} .dt-h3{ font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:clamp(26px,4vh,48px); } .dt-step{ display:grid;grid-template-columns:64px 1fr;gap:clamp(14px,2vw,32px); padding:clamp(18px,3vh,32px) 0;border-bottom:1px solid var(--line-soft); } .dt-step em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent);padding-top:.45em;} .dt-step h4{margin:0 0 8px;font-size:clamp(1.15rem,2.2vw,1.8rem);font-weight:500;letter-spacing:-.03em;} .dt-step p{color:var(--muted);font-size:14px;line-height:1.6;max-width:58ch;} .dt-visuals{margin-top:clamp(60px,11vh,140px);display:grid;gap:clamp(14px,2.4vw,30px);grid-template-columns:repeat(6,1fr);} .dt-vis{position:relative;overflow:hidden;background:var(--bg-2);} .dt-vis svg,.dt-vis img,.dt-vis video{width:100%;height:100%;object-fit:cover;} .dt-vis--wide{grid-column:span 6;aspect-ratio:16/9;} .dt-vis--half{grid-column:span 3;aspect-ratio:4/3;} .dt-vis--third{grid-column:span 2;aspect-ratio:1/1;} .dt-vis__label{ position:absolute;left:14px;bottom:12px; font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); } /* ---------- a shot the scroll seeks through ---------- A full-bleed figure whose video is never played: the stage sticks to the viewport while the track scrolls past behind it, and the distance travelled is the position in the clip. Scrolling opens the laptop; going back up closes it. The markup in projects/ carries only file paths — js/main.js decides what to build from them, because a pointer on a desktop can seek an all-keyframe file every frame and a phone on a cellular connection should not be asked to try. One block of markup, three outcomes: .is-scrub pointer, motion allowed the full file, seeked by scroll .is-loop touch, or a small screen a lighter file, played as a loop .is-manual prefers-reduced-motion the poster, with controls The stage is black in both themes on purpose: the footage is black-backed, so `contain` letterboxing disappears into the ground instead of framing the shot with a bar. Nothing here may sit inside a .dt-reveal — GSAP leaves a transform on those, and a transformed ancestor is a containing block, which is the one thing position:sticky cannot survive. */ .dt-scrub,.dt-custom > .dt-scrub{ position:relative;margin:clamp(40px,7vh,90px) calc(var(--gut) * -1) 0; background:#000; } .dt-scrub__stage{ position:relative;overflow:hidden;background:#000;aspect-ratio:16/9; } .dt-scrub video,.dt-scrub > img{ position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000; } /* the track is the scroll budget for the clip: 300svh of page against a 100svh stage leaves two screens of travel for ten seconds of footage */ .dt-scrub.is-scrub{height:var(--scrub-track,300svh);} .dt-scrub.is-scrub .dt-scrub__stage{position:sticky;top:0;height:100svh;aspect-ratio:auto;} .dt-scrub .dt-scrub__cap{ position:absolute;left:var(--gut);bottom:24px;z-index:3;margin:0; display:flex;align-items:center;gap:10px; font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:rgba(245,245,245,.6); } .dt-scrub .dt-scrub__cap i{display:block;width:22px;height:1px;background:var(--accent);} .dt-scrub:not(.is-scrub) .dt-scrub__cap{top:18px;bottom:auto;} /* the invitation, and its own withdrawal the moment it is taken up */ .dt-scrub__hint{ position:absolute;right:var(--gut);bottom:24px;z-index:3; font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:rgba(245,245,245,.42); opacity:0;transition:opacity .7s var(--e-out); } .dt-scrub.is-scrub .dt-scrub__hint{opacity:1;} .dt-scrub.is-moving .dt-scrub__hint{opacity:0;} .dt-scrub__bar{ position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3; background:rgba(245,245,245,.12);opacity:0;transition:opacity .7s; } .dt-scrub.is-scrub .dt-scrub__bar{opacity:1;} .dt-scrub__bar i{ display:block;width:100%;height:100%;background:var(--accent); transform:scaleX(0);transform-origin:left center; } /* Under 820px the stage is a plain 16:9 loop, so it keeps the rhythm of the gallery rather than eating three screens of a phone. */ @media (max-width:820px){ .dt-scrub .dt-scrub__cap{bottom:14px;} .dt-scrub__hint{display:none;} } .dt-motion{ margin-top:clamp(40px,7vh,90px);position:relative; aspect-ratio:16/9;background:var(--bg-2);overflow:hidden;display:grid;place-items:center; } .dt-motion > svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55;} /* a real reel is the content, not a backdrop — it keeps its full opacity */ .dt-motion > img,.dt-motion > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .dt-motion__play{ position:relative;z-index:2;width:88px;height:88px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center; font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg); transition:background-color .5s,color .5s,border-color .5s; } .dt-motion:hover .dt-motion__play{background:var(--accent);border-color:var(--accent);color:var(--on-accent);} /* the one outbound link in the overlay */ .dt-cta{ display:inline-flex;align-items:center;gap:clamp(20px,4vw,44px); margin-top:clamp(34px,6vh,64px);padding:16px 22px; border:1px solid var(--line);color:var(--fg); transition:background-color .5s,border-color .5s,color .5s; } .dt-cta__text{display:flex;flex-direction:column;gap:7px;font-size:14px;letter-spacing:-.01em;} .dt-cta__text em{ font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);transition:color .5s; } .dt-cta__arrow{font-size:17px;line-height:1;transition:transform .5s var(--e-out);} .dt-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);} .dt-cta:hover .dt-cta__text em{color:var(--on-accent);} .dt-cta:hover .dt-cta__arrow{transform:translate(3px,-3px);} .dt-next{ margin-top:clamp(70px,13vh,170px);padding:clamp(40px,8vh,90px) 0 clamp(50px,9vh,110px); border-top:1px solid var(--line); display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap; } .dt-next__lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:block;} .dt-next__title{font-size:clamp(1.9rem,6vw,5rem);font-weight:600;letter-spacing:-.05em;line-height:.94;text-transform:uppercase;transition:color .4s;} .dt-next__btn:hover .dt-next__title{color:var(--accent);} .dt-reveal{opacity:0;transform:translateY(28px);} /* ========================================================= A CATEGORY, AS A VIEW The same overlay family as the project detail, one layer below it: opening a project from a category leaves the category standing, so closing the project returns to the list. Nothing new typographically — the heading is the contact scale, the rows are the services list. ========================================================= */ .cat{ position:fixed;inset:0;z-index:8400; visibility:hidden;pointer-events:none;opacity:0; background:var(--bg); } .cat.is-open{visibility:visible;pointer-events:auto;opacity:1;} .cat__scroll{ position:absolute;inset:0;overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch;scrollbar-width:none; } .cat__scroll::-webkit-scrollbar{display:none;} .cat__scroll:focus{outline:none;} .cat__inner{padding:calc(var(--nav-h) + clamp(30px,7vh,80px)) 0 clamp(50px,10vh,120px);} .cat__head{padding:0 var(--gut) clamp(30px,6vh,68px);} .cat__title{ margin:clamp(12px,2vh,20px) 0 0; font-size:clamp(2.6rem,11vw,11rem); font-weight:600;letter-spacing:-.06em;line-height:.86;text-transform:uppercase; } .cat__desc{ margin:clamp(18px,3vh,32px) 0 0; color:var(--muted);font-size:clamp(1rem,1.9vw,1.5rem); letter-spacing:-.02em;line-height:1.45;max-width:38ch; } /* the rows, built like the services list */ /* the category on a card is a link to this view, and says so */ .proj__cat{cursor:pointer;transition:color .4s var(--e-out);} .proj__cat:hover{color:var(--accent);} .cat__list{border-top:1px solid var(--line);} .cat__row{ position:relative;display:block;width:100%;text-align:start; border-bottom:1px solid var(--line); padding:clamp(18px,2.8vw,34px) var(--gut); overflow:hidden; transition:background-color .7s var(--e-out); } .cat__row__bg{ position:absolute;inset:0;background:var(--bg-2); transform:scaleY(0);transform-origin:50% 100%; transition:transform .8s var(--e-out);pointer-events:none; } .cat__row:hover .cat__row__bg{transform:scaleY(1);transform-origin:50% 0;} .cat__row__in{ position:relative;display:flex;align-items:center; gap:clamp(14px,2.6vw,36px); } .cat__num{ flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em; color:var(--muted);transition:color .5s var(--e-out); } .cat__row:hover .cat__num{color:var(--accent);} /* the thumbnail is not decoration: the project overlay expands out of it, so it has to be a real .proj__visual for the FLIP to have something to measure and grow from */ .cat__row .proj__visual{ flex:none;width:clamp(64px,9vw,128px);aspect-ratio:4/3; overflow:hidden;background:var(--bg-2); } .cat__row .proj__media{width:100%;height:100%;} .cat__row .proj__media svg, .cat__row .proj__media img, .cat__row .proj__media video{width:100%;height:100%;object-fit:cover;display:block;} .cat__name{ font-size:clamp(1.4rem,4.4vw,3.6rem); font-weight:500;letter-spacing:-.05em;line-height:1; transition:color .5s var(--e-out); } .cat__year{ margin-inline-start:auto;flex:none; font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted); } /* nothing filed here yet — said plainly, with the way out */ .cat__empty{padding:clamp(30px,7vh,80px) var(--gut);border-top:1px solid var(--line);} .cat__empty p{ color:var(--muted);font-size:clamp(1rem,1.9vw,1.5rem); letter-spacing:-.02em;max-width:34ch;margin:0 0 clamp(20px,3vh,32px); } .cat__close{ position:fixed;top:calc(var(--nav-h) / 2);right:var(--gut);transform:translateY(-50%); z-index:5;width:44px;height:44px;border:1px solid var(--line);border-radius:50%; display:grid;place-items:center;opacity:0; transition:border-color .4s,background-color .4s,transform .5s var(--e-out); } .cat.is-open .cat__close{opacity:1;} .cat__close span{position:absolute;width:14px;height:1px;background:var(--fg);} .cat__close span:nth-child(1){transform:rotate(45deg);} .cat__close span:nth-child(2){transform:rotate(-45deg);} .cat__close:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-50%) rotate(90deg);} @media (max-width:820px){ .cat__row__in{gap:14px;} .cat__row .proj__visual{width:66px;} .cat__year{display:none;} } /* ========================================================= GENERATED ARTWORK js/data.js draws its SVG with fixed hex values, which is what keeps a drawing correct anywhere it is dropped — the dashboard preview, a saved file, a page without this stylesheet. Here those exact values are re-pointed at the theme tokens, so the same markup reads dark on black and dark-on-paper in the light theme. A CSS rule outranks a presentation attribute, so no JavaScript and no re-render is involved. ========================================================= */ svg [fill="#F5F5F5"]{fill:var(--art-ink);} svg [stroke="#F5F5F5"]{stroke:var(--art-ink);} svg [fill="#8A8A8A"]{fill:var(--art-label);} svg [fill="#0E0E0E"]{fill:var(--art-2);} svg [fill="#0A0A0A"]{fill:var(--on-accent);} svg [fill="#FF4A1C"]{fill:var(--accent);} svg [stroke="#FF4A1C"]{stroke:var(--accent);} svg stop[stop-color="#171717"]{stop-color:var(--art-1);} svg stop[stop-color="#0B0B0B"]{stop-color:var(--art-2);} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1024px){ .about__cols{grid-template-columns:1fr 1fr;} .about__col--stats{grid-column:span 2;} .dt-facts{grid-template-columns:1fr 1fr;} .dt-vis--third{grid-column:span 3;} } @media (max-width:820px){ :root{--nav-h:64px;} .nav__links{display:none;} .nav__toggle{display:flex;} .hero__meta{flex-direction:column;align-items:flex-start;gap:14px;} .hero__blurb{text-align:left;} .services__title{min-height:70svh;} .services__titleinner{flex-direction:column;gap:0;} .srv__row{flex-wrap:wrap;} .srv__desc{margin-left:0;text-align:left;max-width:38ch;opacity:.8;flex-basis:100%;margin-top:12px;} .service-preview{display:none;} /* work reel becomes vertical storytelling */ .work__pin{height:auto;display:block;overflow:visible;padding-bottom:0;} .work__track{display:block;height:auto;transform:none !important;} .work__lead{width:auto;padding:var(--sec-pad) var(--gut) clamp(30px,6vh,50px);} .proj{width:auto;margin:0 0 clamp(40px,7vh,70px);padding:0 var(--gut);} .proj__visual{aspect-ratio:3/4;} .proj__desc{opacity:1;transform:none;} .proj__veil{opacity:0;} .work__end{width:auto;padding:0 var(--gut) var(--sec-pad);} .work__hud{display:none;} .about__cols{grid-template-columns:1fr;} .about__col--stats{grid-column:span 1;} .contact__grid{grid-template-columns:1fr;gap:30px;} .contact__body{flex-direction:column;align-items:flex-start;} .dt-facts{grid-template-columns:1fr;gap:22px;} .dt-vis--half,.dt-vis--third{grid-column:span 6;} .dt-step{grid-template-columns:44px 1fr;} .intro__line--type{white-space:normal;} .intro__text{line-height:1.16;} } @media (max-width:640px){ .hero__head{flex-direction:column-reverse;align-items:flex-start;gap:0;} /* stacked, so the name takes the full row again — still a step down from the old scale, and the plate keeps its new size */ .hero__head .hero__name{font-size:clamp(2.4rem,11.5vw,7rem);} .hero__portrait{ width:clamp(150px,44vw,260px); margin:0 0 clamp(14px,2.2vh,24px); margin-inline-start:0; } } @media (max-width:520px){ .hero__foot{flex-direction:column;align-items:flex-start;gap:10px;} .dt-cta{display:flex;justify-content:space-between;width:100%;} .loader__name{font-size:clamp(1.7rem,10vw,3rem);} .foot{justify-content:flex-start;gap:12px;} } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.15s !important;scroll-behavior:auto !important; } .grain,.aura{animation:none;} .clients__track{animation:none;width:100%;justify-content:center;flex-wrap:wrap;row-gap:22px;} .clients__track .client[aria-hidden="true"]{display:none;} .clients__marquee{-webkit-mask-image:none;mask-image:none;} .cursor{display:none;} .intro{display:none;} .work__pin{height:auto;display:block;overflow:visible;padding-bottom:0;} .work__track{display:block;transform:none !important;} .work__lead,.work__end{width:auto;padding-left:var(--gut);padding-right:var(--gut);} .work__lead{padding-top:var(--sec-pad);padding-bottom:40px;} .proj{width:auto;margin:0 0 60px;padding:0 var(--gut);} .work__hud{display:none;} .proj__veil{opacity:0;} .proj__desc{opacity:1;transform:none;} .about__words{opacity:.5;} } /* no-JS / failed-CDN fallback: everything visible */ .no-motion [data-reveal], .no-motion .dt-reveal{opacity:1 !important;transform:none !important;} .no-motion .intro,.no-motion .loader{display:none;} .no-motion .work__pin{height:auto;display:block;overflow:visible;padding-bottom:0;} .no-motion .work__track{display:block;transform:none;} .no-motion .proj{width:auto;margin:0 0 60px;padding:0 var(--gut);} .no-motion .work__lead,.no-motion .work__end{width:auto;padding:var(--sec-pad) var(--gut);} .no-motion .nav{opacity:1;transform:none;pointer-events:auto;} /* ========================================================= LANGUAGE SWITCH ========================================================= */ .nav__end{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px);} .langsw{ display:flex;align-items:center;gap:10px; font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; } .langsw i{display:block;width:1px;height:11px;background:var(--line);flex:none;} .langsw__opt{ color:var(--idle);padding:5px 0; transition:color .4s var(--e-out); } .langsw__opt:hover{color:var(--fg);} .langsw__opt.is-active{color:var(--fg);} .langsw__opt.is-active:hover{color:var(--fg);cursor:default;} /* the Arabic label needs an Arabic face even while the page is in English */ .langsw__opt--ar{ font-family:'Tajawal','Segoe UI','Noto Sans Arabic',Tahoma,sans-serif; font-size:13px;letter-spacing:normal;line-height:1; } /* ========================================================= THEME SWITCH One control, not a pair: the label names the room you are about to walk into, and the disc fills the half you are leaving behind. Below 520px the label drops and the disc carries it alone. ========================================================= */ .themesw{ display:inline-flex;align-items:center;gap:8px;flex:none; font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--idle);padding:5px 0; transition:color .4s var(--e-out); } .themesw:hover{color:var(--fg);} .themesw__icon{ position:relative;width:12px;height:12px;flex:none; border:1px solid currentColor;border-radius:50%;overflow:hidden; } .themesw__icon::after{ content:'';position:absolute;top:-1px;bottom:-1px;left:-1px;width:50%; background:currentColor;transition:transform .55s var(--e-inout); transform:translateX(100%); } html[data-theme="dark"] .themesw__icon::after{transform:translateX(0);} @media (max-width:520px){.themesw__label{display:none;}} /* ========================================================= ARABIC TYPOGRAPHY Tajawal for Arabic; the monospace stack keeps its Latin faces first so numerals stay in the mono voice and only Arabic glyphs fall through to Tajawal. ========================================================= */ html[lang="ar"]{ --sans:'Tajawal','General Sans','Segoe UI',Tahoma,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Tajawal',sans-serif; } /* Arabic is cursive: letter-spacing prises the joins of a word apart, and the negative tracking this design leans on collapses them into each other. Clear it everywhere, then hand it back to the runs that stay Latin — numerals, brand names and product names. */ html[lang="ar"] *{letter-spacing:normal;} html[lang="ar"] .loader__count, html[lang="ar"] .srv__num, html[lang="ar"] .proj__num, html[lang="ar"] .proj__year, html[lang="ar"] .work__index, html[lang="ar"] .menu__inner a em, html[lang="ar"] .dt-step em, html[lang="ar"] .tool sup, html[lang="ar"] .langsw{letter-spacing:.14em;} html[lang="ar"] .proj__title, html[lang="ar"] .dt-hero__title, html[lang="ar"] .cat__title, html[lang="ar"] .cat__name, html[lang="ar"] .dt-next__title{letter-spacing:-.045em;} html[lang="ar"] .tool{letter-spacing:-.045em;} html[lang="ar"] .langsw__opt--ar{letter-spacing:normal;} /* Arabic sits taller than Latin — ascenders reach higher, descenders and the dots below the baseline reach lower. Every display line-height in this design is set under 1 for Latin caps and clips Arabic outright. */ html[lang="ar"] .loader__name{line-height:1.25;} html[lang="ar"] .intro__text{line-height:1.35;} html[lang="ar"] .intro__swap{line-height:1.3;} html[lang="ar"] .intro__big{line-height:1.22;} html[lang="ar"] .intro__mid{line-height:1.42;max-width:20ch;} html[lang="ar"] .intro__sign{line-height:1.2;} html[lang="ar"] .menu__inner a{line-height:1.3;} html[lang="ar"] .hero__name{line-height:1.08;} html[lang="ar"] .hero__blurb{max-width:38ch;} html[lang="ar"] .services__titleinner{line-height:1.1;} html[lang="ar"] .srv__name{line-height:1.25;} /* .86 is set for Latin caps and clips the hamza off an Arabic alef */ html[lang="ar"] .cat__title{line-height:1.14;} html[lang="ar"] .cat__name{line-height:1.25;} html[lang="ar"] .work__heading{line-height:1.15;} html[lang="ar"] .work__endtitle{line-height:1.35;} html[lang="ar"] .about__statement{line-height:1.45;max-width:24ch;} html[lang="ar"] .toolkit__heading{line-height:1.25;} html[lang="ar"] .contact__heading{line-height:1.15;} html[lang="ar"] .contact__a{max-width:26ch;} html[lang="ar"] .dt-lead{line-height:1.5;max-width:28ch;} /* six drift words at Arabic leading still have to fit inside the pin */ html[lang="ar"] .about__words{font-size:clamp(2rem,min(11vw,11vh),11rem);line-height:1.1;} /* the word mask has to clear the deeper Arabic descenders */ html[lang="ar"] .masked span.w{padding:.30em 0 .38em;margin:-.30em 0 -.38em;} /* ========================================================= RTL MIRROR Flex and grid already follow the writing direction; what follows is the part that does not — physical offsets, transform origins and the arrow glyphs. ========================================================= */ [dir="rtl"] .scroll-progress__bar, [dir="rtl"] .loader__fill, [dir="rtl"] .work__line b{transform-origin:100% 50%;} [dir="rtl"] .nav__links a::after, [dir="rtl"] .link span::after{transform-origin:0 50%;} [dir="rtl"] .nav__links a:hover::after, [dir="rtl"] .nav__links a.is-active::after, [dir="rtl"] .link:hover span::after{transform-origin:100% 50%;} [dir="rtl"] .intro__skip{right:auto;left:var(--gut);} [dir="rtl"] .hero__blurb{text-align:left;} [dir="rtl"] .srv__desc{margin-left:0;margin-right:auto;text-align:left;} [dir="rtl"] .about__portrait{right:auto;left:var(--gut);} [dir="rtl"] .detail__close{right:auto;left:var(--gut);} [dir="rtl"] .cat__close{right:auto;left:var(--gut);} [dir="rtl"] .detail__hud{left:auto;right:var(--gut);} [dir="rtl"] .dt-vis__label{left:auto;right:14px;} /* the shot itself never mirrors — a laptop opens the way it opens — but the captions and the progress fill read from the other edge */ [dir="rtl"] .dt-scrub .dt-scrub__cap{left:auto;right:var(--gut);} [dir="rtl"] .dt-scrub__hint{right:auto;left:var(--gut);} [dir="rtl"] .dt-scrub__bar i{transform-origin:right center;} [dir="rtl"] .proj__num{left:auto;right:0;} [dir="rtl"] .proj:hover .proj__title{transform:translateX(-8px);} [dir="rtl"] .dt-cta:hover .dt-cta__arrow{transform:translate(-3px,-3px);} /* The pinned reel is a transform-driven track: its travel, its ScrollTrigger start/end keywords and its scrollWidth math are all written against left-to-right flow. Keeping the track itself LTR preserves that machinery exactly; each panel switches back to RTL so its own copy reads correctly. */ [dir="rtl"] .work__track{direction:ltr;} [dir="rtl"] .work__lead, [dir="rtl"] .work__end, [dir="rtl"] .proj{direction:rtl;} [dir="rtl"] .work__arrow::after{left:auto;right:0;animation-name:slide-rtl;} @keyframes slide-rtl{0%{transform:translateX(0);opacity:0}20%{opacity:1}100%{transform:translateX(-42px);opacity:0}} /* "01 / 05" is one Latin numeric run and must not be reordered */ [dir="rtl"] .work__index{direction:ltr;} /* the CTA arrowhead points the way the reader is going */ [dir="rtl"] .cta__arrow::after{ right:auto;left:0; border-top:1px solid currentColor;border-right:0; border-left:1px solid currentColor; transform:rotate(-45deg); } @media (max-width:820px){ [dir="rtl"] .hero__blurb{text-align:right;} [dir="rtl"] .srv__desc{margin-right:0;text-align:right;} }