(.pagebg, z 0), so every page scrolls over it and it stays put. The shared grain (.grain, tokens.css) sits at z 2. Heroes are transparent on the video with a vignette at z 1 (under the grain) and their copy at z 3 (over it). .pagebody wraps everything after the hero and dims the video with black at --page-dim so cream text stays legible; the vignette ends at the same level, so there is no seam. The contact / start decks (.sap, start.css) keep their own fixed video and veil. */ :root{--page-dim:.55} .pagebg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--ink)} /* the gradient asset fades to black in its lower third; sit the frame a little high so the glow fills more of the viewport, and on portrait screens oversize it so the black tail stays below the fold */ .pagebg__media{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%} @media (orientation:portrait){ .pagebg__media{height:130%} } .pagebody{position:relative} .pagebody::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:rgba(0,0,0,var(--page-dim))} .pagebody>*{position:relative;z-index:3} .hero,.abhero3,.work-hero{background:transparent} .hero>*,.abhero3>*,.work-hero>*{position:relative;z-index:3} .hero::after,.abhero3::after,.work-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 30%,rgba(0,0,0,.55) 78%,rgba(0,0,0,var(--page-dim)) 100%)} /* showreel tile — centered electric-blue block */ .reel{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);z-index:2; width:min(800px,63vw);aspect-ratio:628/348;background:var(--ink); border-radius:3px;overflow:hidden; display:grid;place-items:center;transition:transform .6s var(--ease-out)} .reel__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .reel__pix{position:relative;z-index:1;width:7px;height:7px;background:var(--cream); box-shadow:7px 7px 0 var(--cream),14px 14px 0 var(--cream); transition:transform .45s var(--ease)} .reel__tag{position:absolute;left:16px;bottom:13px;z-index:1;font-size:12px; letter-spacing:.04em;color:var(--cream);text-shadow:0 1px 10px rgba(0,0,0,.45)} .reel__tag i{font-style:normal;opacity:.7;transition:transform .4s var(--ease)} .reel:hover .reel__tag i{transform:translate(3px,-3px)} .reel:hover .reel__pix{transform:translate(2px,2px)} /* =================== shared label bar =================== */ .bar{display:flex;justify-content:space-between;align-items:center;gap:18px; padding:16px var(--shell) 0;flex-wrap:wrap} .bar__name{font-size:14px;color:var(--cream);letter-spacing:-.01em} .bar__tags{display:flex;gap:8px;flex-wrap:wrap} .bar__tags i{font-style:normal;font-size:12px;color:var(--cream); border:1px solid var(--line-2);border-radius:40px;padding:7px 14px; transition:border-color .3s,background .3s,color .3s} .proj:hover .bar__tags i,.feat:hover .bar__tags i{border-color:var(--cream-40)} /* =================== FEATURED =================== */ .feat{padding-top:clamp(40px,7vw,90px)} .feat__media{display:block;margin:0 var(--shell);overflow:hidden;border-radius:2px; aspect-ratio:1352/514} .feat__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02); transition:transform 1.2s var(--ease-out)} .feat:hover .feat__media img{transform:scale(1.035)} /* subtle hover zoom */ /* =================== PROJECTS (staggered) =================== */ .projects{padding-top:clamp(48px,6vw,80px)} .proj{margin-top:clamp(40px,6vw,80px)} .proj:first-child{margin-top:0} .proj__media{display:block;overflow:hidden;border-radius:2px;aspect-ratio:808/396;background:var(--ink-3)} .proj__media img{width:100%;height:100%;object-fit:cover;object-position:right center; transform:scale(1.02);transition:transform 1.2s var(--ease-out)} .proj:hover .proj__media img{transform:scale(1.035)} /* subtle hover zoom */ .proj__media--solid{aspect-ratio:780/420; background:linear-gradient(160deg,var(--green),var(--black))} .proj--right .proj__media{margin-left:clamp(40px,28vw,42%);margin-right:var(--shell)} .proj--left .proj__media{margin-left:var(--shell);margin-right:clamp(40px,30vw,44%)} /* =================== MISSION =================== */ .mission{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px); padding:clamp(110px,16vw,230px) var(--shell) clamp(60px,9vw,120px)} /* NOTE: stylesheet.md §11 lists this as Title-S, but the rendered design is a column heading at 1.7→2.6rem opposite the lede. The doc drifted, not the CSS — left on the H3 role (nearest by size + weight) rather than shrunk to Title-S. */ .mission__label{font-size:var(--fz-h3);font-weight:500;letter-spacing:-.025em; line-height:1.02;align-self:start} .mission__lede{font-size:var(--fz-lede);font-weight:400;line-height:1.16; letter-spacing:-.02em;max-width:none} /* =================== MISSION IMAGES =================== */ .m-imgs{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:0; padding:clamp(20px,3vw,40px) 0 clamp(60px,9vw,120px)} .m-imgs figure{overflow:hidden} .m-imgs__a{width:clamp(160px,20vw,290px);aspect-ratio:290/224} .m-imgs__b{justify-self:end;width:min(50vw,720px);aspect-ratio:720/300} .m-imgs img{width:100%;height:100%;object-fit:cover} /* =================== GLOBALLY =================== */ .globe{position:relative;padding:clamp(50px,8vw,120px) var(--shell) clamp(50px,8vw,110px); display:grid;grid-template-columns:1.2fr 1fr; grid-template-areas:"title img" "sub btn"; gap:clamp(20px,4vw,40px) clamp(24px,5vw,70px);align-items:start} .globe__ring{position:absolute;right:8%;top:-6%;width:min(58vw,720px);aspect-ratio:1; border:1px solid var(--line);border-radius:50%;z-index:0;pointer-events:none} .globe__title{grid-area:title;align-self:center;position:relative;z-index:1; font-size:clamp(2.8rem,8.5vw,7.4rem);font-weight:500;line-height:.96;letter-spacing:-.035em} .globe__img{grid-area:img;justify-self:end;width:min(34vw,470px);aspect-ratio:470/210; overflow:hidden;border-radius:2px;position:relative;z-index:1} .globe__img img{width:100%;height:100%;object-fit:cover} .globe__sub{grid-area:sub;max-width:34ch;font-size:14px;line-height:1.55;color:var(--cream); align-self:end;position:relative;z-index:1} .globe .pill{grid-area:btn;align-self:end;justify-self:center} /* ============================================================ PRIMARY CTA — the single filled button, reused everywhere. .pill (page CTAs), .nav__links .nav__cta (nav "Start a project") and .signup__btn (newsletter/forms) are ONE component: same fill, size, radius and magnetic hover, all driven by the --cta-* tokens so the Design editor tunes them in one place. See stylesheet.md §7. ============================================================ */ .pill, .nav__links .nav__cta, .signup__btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--cta-gap,9px); background:var(--cta-bg,var(--cream));color:var(--cta-fg,var(--ink)); border:1px solid var(--cta-bg,var(--cream)); padding:var(--cta-py,10px) var(--cta-px,20px);border-radius:var(--r-btn,8px); font-size:var(--cta-fz,13px);font-weight:var(--cta-fw,500);letter-spacing:-.011em;line-height:1; white-space:nowrap;transition:transform .4s var(--ease); } /* Secondary / lower-emphasis — the only permitted variant (one filled primary per view). Outline, inherits the CTA size. */ .pill--ghost{background:transparent;color:var(--cream);border-color:var(--line-2)} .pill--ghost:hover{border-color:var(--cream)} /* =================== SERVICES =================== */ .services{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,70px); align-items:center;padding:clamp(60px,9vw,130px) var(--shell)} .services__img{aspect-ratio:430/520;overflow:hidden;border-radius:2px} .services__img img{width:100%;height:100%;object-fit:cover} .services__title{font-size:var(--fz-lede);font-weight:500;line-height:1.02; letter-spacing:-.025em;margin-bottom:14px} /* matches Our Mission title */ .services__body{font-size:clamp(1rem,1.3vw,1.15rem);color:var(--cream);line-height:1.55; max-width:44ch;margin-bottom:clamp(28px,3vw,44px)} /* matches Globally-collaborative body */ .svc{list-style:none} .svc li{border-bottom:1px solid var(--line)} .svc li:first-child{border-top:1px solid var(--line)} .svc a{display:flex;justify-content:space-between;align-items:center; padding:16px 0;font-size:clamp(1rem,1.4vw,1.25rem);transition:padding-left .4s var(--ease)} /* horizontal right arrow (matches the scroll-to-top --arrow-r style), Fountain Frolic, revealed sliding in from the left on hover */ .svc a i{font-style:normal;font-size:0;position:relative;display:block;width:18px;height:18px; flex:0 0 auto;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s} .svc a i::before{content:"";position:absolute;inset:0;background:var(--cream); -webkit-mask:var(--arrow-r) center/18px no-repeat;mask:var(--arrow-r) center/18px no-repeat} .svc a:hover{padding-left:12px} .svc a:hover i{opacity:1;transform:translateX(0)} .services .pill{margin-top:clamp(28px,3vw,44px)} /* =================== STATS =================== */ .stats{display:grid;grid-template-columns:repeat(4,1fr); padding:clamp(60px,9vw,120px) var(--shell) clamp(60px,9vw,120px)} /* each stat centred between its dividers; whole row centred on the page */ .stat{padding:0 clamp(14px,2vw,28px);border-left:1px solid var(--line);text-align:center} .stat:first-child{border-left:none} .stat__num{display:block;font-size:var(--fz-num);font-weight:700; letter-spacing:.01em;line-height:1} /* Helvetica Neue's "1" is a narrow glyph in a full-width (tabular) cell, leaving extra slack each side; pull it in so digit spacing reads optically even. */ .stat__num .d1{margin:0 -.12em 0 -.04em;letter-spacing:inherit} .stat__lab{display:block;margin-top:14px;font-size:14px;color:var(--cream)} /* =================== START =================== */ .start{padding:0 var(--shell) clamp(50px,7vw,90px)} /* Homepage: when the start cards sit directly under the stats (testimonials hidden), give them a matching top padding so the stats get equal space above and below. Self-scopes via the sibling combinator (comments/whitespace are ignored) — when testimonials return, .stats is followed by .quotes, not .start, so this no longer applies. */ .stats + .start{padding-top:clamp(60px,9vw,130px)} .start__title{font-size:var(--fz-title);font-weight:500;line-height:1.02; letter-spacing:-.03em;margin-bottom:clamp(36px,5vw,60px)} .start__cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,30px)} /* "Green flood": the paper card floods to Plankton Green from the base on hover, text turns cream and the arrow disc inverts to cream-on-green. */ .scard{background:var(--cream);color:var(--ink);border-radius:var(--r-card,4px); padding:clamp(26px,2.6vw,38px);min-height:clamp(200px,21vw,272px); display:flex;flex-direction:column;justify-content:space-between; position:relative;overflow:hidden; transition:transform .55s var(--ease),box-shadow .55s var(--ease)} .scard>*{position:relative;z-index:1} .scard::before{content:"";position:absolute;inset:0;z-index:0;background:var(--green); transform:translateY(101%);transition:transform .6s var(--ease-out)} .scard h3{font-size:var(--fz-subhead);font-weight:500;letter-spacing:-.025em;line-height:1.06; transition:color .45s var(--ease) .05s} .scard__foot{display:flex;justify-content:space-between;align-items:center;gap:16px} .scard__foot span{font-size:13px;color:rgba(0,0,0,.66);transition:color .45s var(--ease) .05s} .scard__foot i{font-style:normal;width:38px;height:38px;border-radius:50%;flex:0 0 auto; background:var(--ink);color:var(--cream);position:relative;font-size:0; transition:transform .45s var(--ease),background .4s var(--ease),color .4s var(--ease)} .scard__foot i::before{content:"";position:absolute;inset:0;background:currentColor; -webkit-mask:var(--arrow-r) center/16px no-repeat;mask:var(--arrow-r) center/16px no-repeat} .scard:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.4)} .scard:hover::before{transform:translateY(0)} .scard:hover h3{color:var(--cream)} .scard:hover .scard__foot span{color:var(--cream-60)} .scard:hover .scard__foot i{background:var(--cream);color:var(--green)} /* =================== FOOTER =================== */ .foot{position:relative;padding:clamp(160px,24vw,360px) var(--shell) 30px;overflow:hidden; margin-top:clamp(30px,5vw,60px)} /* the gradient/video bleeds up behind the content and dissolves into the black page via a long mask — no hard top edge, no premature fade-out */ .foot__video,.foot__grad{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center bottom;z-index:0; -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 72%); mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 72%)} .foot__video+.foot__grad{display:none} /* video replaces the static gradient when present */ .foot__grad{background:url("img/footer-poster.jpg") center bottom/cover no-repeat} /* keep the video/gradient as a true background; only lift the content */ .foot>*:not(.foot__video):not(.foot__grad){position:relative;z-index:1} .foot__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px); padding-bottom:clamp(70px,13vw,180px)} .foot__h{font-size:var(--fz-title-s);font-weight:400} .signup{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line-2); padding-bottom:11px;margin-top:22px;max-width:420px} .signup input{flex:1;min-width:0;width:0;background:none;border:none;outline:none;font-size:1rem;color:var(--cream)} .signup input::placeholder{color:var(--cream-40)} /* .signup__btn inherits the shared CTA rule above — no bespoke button styles here. */ .foot__line{font-size:var(--fz-title-s);font-weight:400;line-height:1.32; letter-spacing:-.01em;max-width:34ch;align-self:stretch; padding-left:clamp(26px,5vw,70px);border-left:1px solid var(--line)} /* logo left · legal line truly centred · socials right. The copy is absolutely centred so an unequal logo/social width can't shove it off-centre (grid fr tracks won't shrink below the wide logo). Below ~1360px it drops to its own row. */ .foot__bottom{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:24px} /* logo lockup at 2× the previous size */ .foot__brand{justify-self:start;--m:clamp(68px,10vw,128px);display:flex;align-items:center;gap:calc(var(--m)*.097)} .foot__copy{position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;margin:0; text-align:center;font-size:13px;color:var(--cream-60);letter-spacing:-.01em} .foot__brand .star{width:var(--m);height:var(--m);flex:0 0 auto; transition:transform 1s var(--ease-out)} .foot__brand .wordmark{height:calc(var(--m)*.702);width:auto;display:block;flex:0 0 auto} .foot__brand:hover .star{transform:rotate(180deg)} /* baseline so the FAQ link (plain text) lines up with the social links even when they carry a taller ↗ glyph — otherwise stretch top-aligns it and it reads lifted */ .foot__social{display:flex;align-items:baseline;gap:22px;padding-bottom:6px} .foot__social{justify-self:end} /* same trick as the nav links: bigger hit area, unchanged visual layout */ .foot__social a{font-size:13px;color:var(--cream);opacity:.8;padding:10px;margin:-10px;position:relative} .foot__social a:hover{opacity:1} /* wipe-in underline on hover, matching .nav__links a */ .foot__social a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)} .foot__social a:hover::after{transform:scaleX(1);transform-origin:left} .foot__social i{font-style:normal} /* Anything below large desktop stacks the bottom row left — same format as the mobile footer. Only ≥1441px gets the horizontal (logo · centred legal · socials) row. */ @media (min-width:861px) and (max-width:1440px){ .foot__bottom{display:grid;grid-template-columns:1fr;grid-template-areas:none;justify-items:start;gap:22px} .foot__copy{position:static;transform:none;justify-self:start;text-align:left} .foot__social{justify-self:start} } /* =================== RESPONSIVE =================== */ @media (max-width:860px){ .nav__burger{display:flex} .reel{width:78vw} .mission{grid-template-columns:1fr;gap:18px} .mission__lede{max-width:none} .m-imgs{padding-bottom:70px} .proj--right .proj__media{margin-left:var(--shell)} .proj--left .proj__media{margin-right:var(--shell)} .globe{grid-template-columns:1fr;grid-template-areas:"title" "img" "sub" "btn";gap:24px} .globe__img{justify-self:start;width:min(70vw,470px)} .globe .pill{justify-self:start} .services{grid-template-columns:1fr;gap:30px} .stats{grid-template-columns:1fr 1fr;gap:30px 0} .stat{padding-left:clamp(16px,2vw,28px)} .stat:nth-child(odd){border-left:none;padding-left:0} .start__cards{grid-template-columns:1fr} .foot__top{grid-template-columns:1fr} .foot__line{justify-self:start;border-left:none;padding-left:0} .foot__bottom{display:grid;grid-template-columns:1fr;grid-template-areas:none;justify-items:start;gap:22px} .foot__copy{position:static;transform:none;justify-self:start;text-align:left} .foot__social{justify-self:start} } /* =================== MOBILE MENU — full-screen frost =================== The overlay (.nav__menu) is a direct child of , NOT inside .nav: GSAP transforms .nav, and a transformed ancestor would become the containing block for the fixed overlay and shrink it to the bar. Desktop is untouched (everything here is inside the ≤860px query). Only brand colours: black frost, Fountain Frolic text, Plankton Green accents. */ .nav__menu{display:none} /* desktop: no overlay */ @media (max-width:860px){ .nav__links{display:none} /* hide the desktop row */ /* burger → X (stays in the bar, above the frost) */ .nav__burger i{transition:transform .4s var(--ease-out),opacity .3s var(--ease)} html.menu-open .nav__burger i:nth-child(1){transform:translateY(3.75px) rotate(45deg)} html.menu-open .nav__burger i:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)} /* the overlay — viewport-sized, sits below the bar (z 200) so logo + X stay crisp on top */ .nav__menu{ position:fixed;inset:0;z-index:150; display:flex;flex-direction:column; padding:clamp(96px,15vh,150px) var(--shell) clamp(36px,7vh,72px); background:rgba(0,0,0,.58); -webkit-backdrop-filter:blur(22px) saturate(125%); backdrop-filter:blur(22px) saturate(125%); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .45s var(--ease),visibility .45s var(--ease); } html.menu-open{overflow:hidden} html.menu-open .nav__menu{opacity:1;visibility:visible;pointer-events:auto} /* big, left-aligned links, vertically centred above the social row */ .nav__menu-links{ display:flex;flex-direction:column;flex:1 1 auto;min-height:0; justify-content:center;align-items:flex-start;gap:clamp(6px,1.4vh,14px); } .nav__menu-links > a{ font-size:clamp(2rem,11vw,3.4rem); color:var(--cream);font-weight:500;letter-spacing:-.03em;line-height:1.02; opacity:0;transform:translateY(42px);will-change:transform; transition:transform .6s var(--ease-out),opacity .55s var(--ease-out); } html.menu-open .nav__menu-links > a{opacity:1;transform:translateY(0)} /* primary action — a 1px Fountain Frolic hairline (like the homepage rules) that starts just past the text and bleeds off the right edge of the page. */ .nav__menu-links .nav__cta{position:relative} .nav__menu-links .nav__cta::after{ content:"";position:absolute;top:55%;left:calc(100% + 16px); width:100vw;height:1px;background:var(--line-2); } .nav__menu-links > a:nth-child(1){transition-delay:.06s} .nav__menu-links > a:nth-child(2){transition-delay:.12s} .nav__menu-links > a:nth-child(3){transition-delay:.18s} .nav__menu-links > a:nth-child(4){transition-delay:.24s} .nav__menu-links > a:nth-child(5){transition-delay:.30s} .nav__menu-links > a:nth-child(6){transition-delay:.36s} /* social row at the foot of the overlay */ .nav__meta{ display:flex;flex-direction:column;gap:14px;flex:0 0 auto; opacity:0;transition:opacity .5s var(--ease) .28s; } html.menu-open .nav__meta{opacity:1} .nav__meta-social{display:flex;gap:24px} .nav__meta-social a{font-size:14px;color:var(--cream-60)} @media (prefers-reduced-motion:reduce){ .nav__menu,.nav__menu-links > a,.nav__meta{transition-duration:.001ms;transition-delay:0s} } } /* /site_assets/studio.css */ /* =========================================================== AURALIS — studio component layer Shared by the 4 improved homepages (home-a..d). Loads ON TOP of tokens.css + site.css (reuses nav, hero, .reel, .bar, .pill, .tags, .stats, footer, cursor, grain). =========================================================== */ /* ---------- section heading system ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:10px; font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-60)} .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px; flex-wrap:wrap;margin-bottom:clamp(34px,5vw,64px)} .sec-head h2{font-size:var(--fz-h2);font-weight:500;letter-spacing:-.03em;line-height:1; margin-top:16px} .sec-head p{color:var(--cream-60);max-width:34ch;line-height:1.5;font-size:15px} /* ---------- POSITIONING statement ---------- */ /* relative + z-index keeps the statement/foot text above the centred spine, so the hairline runs cleanly behind the copy rather than across it */ .position{position:relative;z-index:3;padding:clamp(90px,13vw,200px) var(--shell) clamp(60px,9vw,120px)} .position p{font-size:var(--fz-statement);font-weight:500;line-height:1.12; letter-spacing:-.025em;max-width:24ch} /* resting state must clear WCAG AA against black (5.91:1 at 60%) */ .position .dim{color:var(--cream-60);transition:color .6s var(--ease)} .position .dim.lit{color:var(--cream)} @media (prefers-reduced-motion:reduce){ .position .dim{color:var(--cream);transition:none} } .position__foot{display:flex;gap:clamp(24px,4vw,60px);flex-wrap:wrap; margin-top:clamp(36px,5vw,64px)} /* vertical spine: drops from the showreel down to the first case, centred on the page — same hairline weight as the horizontal .feature__rule lines. Positioned by studio.js (top/height measured from showreel + first feature). */ #top{position:relative} .home-spine{position:absolute;left:50%;width:1px; background:rgba(230,228,196,.18);z-index:1;pointer-events:none; opacity:0;transition:opacity .6s var(--ease)} @media (max-width:880px){ .home-spine{display:none} } .position__foot div{max-width:30ch} .position__foot b{display:block;font-weight:500;font-size:var(--fz-kicker);margin-bottom:6px} .position__foot span{color:var(--cream-60);font-size:14px;line-height:1.5} /* ---------- DEEP FEATURE rows ---------- */ .features{padding:clamp(40px,6vw,80px) var(--shell) clamp(60px,9vw,120px)} .feature{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px); align-items:center;padding:clamp(28px,4vw,60px) 0;border-top:1px solid var(--line)} .feature:last-child{border-bottom:1px solid var(--line)} /* edge-bleed lines instead of full dividers (Home A) */ .features--lines .feature{border:none} .feature__rule{background:rgba(230,228,196,.32);pointer-events:none} /* both variants: the text + a horizontal line share a centred row, with a gap between the text and the line */ .features--lines .feature__col{display:flex;align-items:center;gap:clamp(22px,3vw,46px)} .features--lines .feature__txt{flex:0 1 auto;min-width:0} .features--lines .feature__rule{flex:1 1 0;min-width:30px;height:1px} /* image left / text right: line runs from the text out to the screen's right edge */ .features--lines .feature:not(.feature--flip) .feature__rule{margin-right:calc(-1 * var(--shell))} /* image right / text left: line runs from the text and stops at the image (the grid column-gap leaves a gap before the image) */ /* testimonials — un-boxed, holds several */ .quotes{padding:clamp(60px,9vw,130px) var(--shell);border-top:1px solid var(--line)} .quote{display:grid;grid-template-columns:2fr 1fr;gap:clamp(20px,4vw,60px);align-items:start; padding:clamp(28px,4vw,52px) 0;border-top:1px solid var(--line)} .quote:first-child{border-top:none} .quote__q{font-size:var(--fz-h3);font-weight:500;line-height:1.18; letter-spacing:-.02em;max-width:28ch} .quote__who{color:var(--cream-60);font-size:14px;line-height:1.6;justify-self:start} .quote__who b{display:block;color:var(--cream);font-weight:500} .feature__media{overflow:hidden;border-radius:3px;aspect-ratio:4/3;background:var(--ink-3)} .feature__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02); transition:transform 1.2s var(--ease-out)} .feature:hover .feature__media img{transform:scale(1.035)} /* subtle hover zoom */ .feature--flip .feature__media{order:2} .feature__no{font-size:12px;letter-spacing:.12em;color:var(--cream-40);text-transform:uppercase} .feature__tags{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 24px} .feature__tags span{font-size:13px;color:var(--cream);border:1px solid var(--line-2); border-radius:var(--r-chip,10px);padding:8px 15px;line-height:1;white-space:nowrap; transition:border-color .3s,background .3s} .feature:hover .feature__tags span{border-color:var(--cream-40)} .feature__name{font-size:var(--fz-h3);font-weight:500;letter-spacing:-.025em; margin:12px 0 6px;line-height:1.02} .feature__sector{color:var(--cream-60);font-size:15px;margin-bottom:22px} .feature__move{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.55;color:var(--cream); max-width:42ch;margin-bottom:26px} .feature__metric{display:flex;align-items:center;gap:16px;margin-bottom:24px} .feature__metric b{font-size:var(--fz-num-s);font-weight:600;letter-spacing:-.04em;line-height:1} .feature__metric span{color:var(--cream-60);font-size:14px;max-width:18ch;line-height:1.4} .feature__link{display:inline-flex;align-items:center;gap:9px;font-size:14px; border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:border-color .3s,gap .3s} .feature__link:hover{border-color:var(--cream);gap:14px} /* ---------- PRINCIPLES ---------- */ .principles{padding:clamp(60px,9vw,130px) var(--shell);border-top:1px solid var(--line)} .prin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,50px)} .prin{border-top:1px solid var(--line-2);padding-top:24px} .prin b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--blue);margin-bottom:clamp(40px,6vw,90px)} .prin h3{font-size:var(--fz-subhead);font-weight:500;letter-spacing:-.02em;margin-bottom:14px} .prin p{color:var(--cream-60);line-height:1.55;font-size:15px;max-width:32ch} /* ---------- CLIENTS marquee + TESTIMONIAL ---------- */ .proof{padding:clamp(50px,8vw,110px) var(--shell);border-top:1px solid var(--line)} .clients{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:22px 0;margin-bottom:clamp(50px,8vw,100px)} .clients__row{display:flex;gap:clamp(40px,6vw,90px);width:max-content;white-space:nowrap; align-items:center} .clients__row span{font-size:var(--fz-title-s);font-weight:500;letter-spacing:-.02em; color:var(--cream-60);opacity:.7} .clients__row span::after{content:"✳";margin-left:clamp(40px,6vw,90px);color:var(--blue);font-size:.6em; vertical-align:middle} .testi{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,4vw,60px);align-items:start} .testi__q{font-size:var(--fz-h3);font-weight:500;line-height:1.18;letter-spacing:-.02em; max-width:24ch} .testi__who{color:var(--cream-60);font-size:14px;line-height:1.6;padding-top:10px} .testi__who b{color:var(--cream);font-weight:500;display:block} /* ---------- WORK INDEX (cursor preview) ---------- */ .windex{padding:clamp(50px,7vw,110px) var(--shell)} .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px} .filters button{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-60); border:1px solid var(--line-2);border-radius:var(--r-toggle,40px);padding:8px 14px;transition:.3s} .filters button.on,.filters button:hover{color:var(--ink);background:var(--cream);border-color:var(--cream)} .wrows{list-style:none;border-top:1px solid var(--line)} .wrow{border-bottom:1px solid var(--line)} .wrow a{display:grid;grid-template-columns:48px 1fr 1fr 110px;gap:20px;align-items:center; padding:clamp(20px,2.8vw,34px) 0;transition:padding-left .45s var(--ease),opacity .3s} .wrow__no{font-size:13px;color:var(--cream-40)} .wrow__name{font-size:var(--fz-h3);font-weight:500;letter-spacing:-.025em;line-height:1} .wrow__cat{color:var(--cream-60);font-size:14px} .wrow__yr{color:var(--cream-40);font-size:13px;text-align:right} .wrow a:hover{padding-left:18px} .wrow.dim{opacity:.28} .wpeek{position:fixed;top:0;left:0;width:300px;height:210px;z-index:60;pointer-events:none; overflow:hidden;border-radius:3px;opacity:0;transform:translate(-50%,-50%) scale(.85); transition:opacity .35s var(--ease),transform .35s var(--ease)} .wpeek.show{opacity:1;transform:translate(-50%,-50%) scale(1)} .wpeek img{width:100%;height:100%;object-fit:cover} /* ---------- SERVICES SWITCHBOARD ---------- */ .switch{padding:clamp(60px,9vw,130px) var(--shell);border-top:1px solid var(--line)} .switch__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start} .switch__list{list-style:none;border-top:1px solid var(--line)} .switch__item{border-bottom:1px solid var(--line)} .switch__item button{display:flex;justify-content:space-between;align-items:center;width:100%; text-align:left;gap:16px;padding:clamp(18px,2.4vw,28px) 0;transition:padding-left .4s var(--ease)} .switch__item h3{font-size:var(--fz-h3);font-weight:500;letter-spacing:-.02em; color:var(--cream-40);transition:color .35s} .switch__item .ix{font-size:12px;color:var(--cream-40);letter-spacing:.1em} .switch__item.on button{padding-left:14px} .switch__item.on h3{color:var(--cream)} .switch__item.on .ix{color:var(--blue)} .switch__item p{max-height:0;overflow:hidden;color:var(--cream-60);font-size:15px;line-height:1.5; max-width:42ch;transition:max-height .5s var(--ease),margin .5s var(--ease),opacity .4s} .switch__item.on p{max-height:120px;margin:0 0 18px;opacity:1} .switch__item:not(.on) p{opacity:0} .switch__panel{position:sticky;top:90px;border-radius:4px;overflow:hidden;background:var(--ink-3)} .switch__media{aspect-ratio:4/3;position:relative} .switch__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .6s var(--ease)} .switch__media img.on{opacity:1} .switch__cap{display:flex;justify-content:space-between;align-items:center;gap:16px; padding:18px 22px;flex-wrap:wrap} .switch__cap b{font-weight:500} .switch__cap span{color:var(--cream-60);font-size:13px} .switch__cap em{font-style:normal;color:var(--blue);font-weight:500} /* ---------- HORIZONTAL TRACK (Home D) ---------- */ .htrack-sec{position:relative} .htrack-sec .sec-head{padding:clamp(60px,9vw,120px) var(--shell) 0} .htrack{overflow:hidden;padding:clamp(40px,5vw,70px) 0} .htrack__row{display:flex;gap:clamp(18px,2vw,32px);padding:0 var(--shell);width:max-content} .hcard{flex:0 0 clamp(300px,40vw,560px)} .hcard__media{aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:var(--ink-3)} .hcard__media img{width:100%;height:100%;object-fit:cover} .hcard__bar{display:flex;justify-content:space-between;align-items:baseline;gap:14px; padding:16px 2px 0;flex-wrap:wrap} .hcard__bar b{font-weight:500;font-size:var(--fz-title-s)} .hcard__bar span{color:var(--cream-60);font-size:13px} .hcard__bar em{font-style:normal;color:var(--blue);font-size:13px;font-weight:500} /* ---------- KINETIC STATS (Home D) ---------- */ .kstats{padding:clamp(70px,10vw,150px) var(--shell);border-top:1px solid var(--line); text-align:center} .kstats__lead{font-size:var(--fz-h3);font-weight:500;letter-spacing:-.02em; max-width:20ch;margin:0 auto clamp(40px,6vw,80px)} .kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)} .kstat b{display:block;font-size:var(--fz-num);font-weight:600;letter-spacing:-.04em;line-height:1} .kstat span{display:block;margin-top:12px;color:var(--cream-60);font-size:14px} /* ---------- CONTACT (strong CTA) ---------- */ .contact{position:relative;padding:clamp(160px,24vw,360px) var(--shell) 30px;overflow:hidden; margin-top:clamp(30px,5vw,60px)} /* gradient bleeds up behind the content and dissolves into black via a long mask */ .contact__grad{position:absolute;inset:0;z-index:0; background:url("img/footer-poster.jpg") center bottom/cover no-repeat; -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 72%); mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 72%)} .contact>*{position:relative;z-index:1} .contact__big{font-size:var(--fz-display);font-weight:500;letter-spacing:-.035em;line-height:.96; max-width:16ch} .contact__big a{position:relative;white-space:nowrap} .contact__big a::after{content:"";position:absolute;left:0;bottom:.08em;width:100%;height:2px; background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .contact__big a:hover::after{transform:scaleX(1)} .contact__row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap; margin-top:clamp(50px,8vw,110px);padding-top:30px;border-top:1px solid var(--line)} .contact__mail{display:inline-flex;align-items:center;gap:12px;font-size:var(--fz-title-s); font-weight:500;letter-spacing:-.02em} .contact__meta{display:flex;gap:clamp(24px,4vw,60px);flex-wrap:wrap} .contact__meta div b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--cream-40);margin-bottom:8px} .contact__meta div span{font-size:15px;color:var(--cream)} .contact__meta a{display:block;color:var(--cream);font-size:15px} .contact__brand{display:flex;justify-content:space-between;align-items:flex-end;gap:24px; margin-top:clamp(50px,8vw,110px);padding-top:28px;border-top:1px solid var(--line);flex-wrap:wrap} .contact__brand .wm{--m:clamp(34px,5vw,64px);display:flex;align-items:center;gap:calc(var(--m)*.097)} .contact__brand .wm .star{width:var(--m);height:var(--m);flex:0 0 auto; transition:transform 1s var(--ease-out)} .contact__brand .wm .wordmark{height:calc(var(--m)*.702);width:auto;display:block;flex:0 0 auto} .contact__brand .wm:hover .star{transform:rotate(180deg)} .contact__brand small{color:var(--cream-40);font-size:12px} /* ---------- STICKY CHAPTER RAIL (Home A) ---------- */ .rail{position:fixed;left:var(--shell);top:50%;transform:translateY(-50%);z-index:120; display:flex;flex-direction:column;gap:14px;mix-blend-mode:difference} .rail a{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--cream);opacity:.4;transition:opacity .3s} .rail a i{font-style:normal;width:18px;height:1px;background:currentColor;transition:width .35s} .rail a.on{opacity:1} .rail a.on i{width:34px} .has-rail main{--rail-pad:0} /* compact studio strip (Home B) */ .studio-strip{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(30px,5vw,70px); padding:clamp(60px,9vw,130px) var(--shell);border-top:1px solid var(--line);align-items:start} .studio-strip p{font-size:clamp(1.4rem,2.6vw,2.2rem);font-weight:500;line-height:1.2; letter-spacing:-.02em;max-width:24ch} .studio-strip ul{list-style:none} .studio-strip li{display:flex;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line); font-size:15px;color:var(--cream-60)} .studio-strip li span{color:var(--cream)} /* ---------- responsive ---------- */ @media (max-width:880px){ .rail{display:none} .feature,.feature--flip .feature__media,.prin-grid,.testi,.switch__grid, .kgrid,.studio-strip{grid-template-columns:1fr} .feature--flip .feature__media{order:0} .prin-grid{gap:34px} .prin b{margin-bottom:18px} .switch__panel{position:relative;top:0;margin-top:10px} .kgrid{grid-template-columns:1fr 1fr;gap:34px 20px} .wrow a{grid-template-columns:32px 1fr;gap:12px} .wrow__cat,.wrow__yr{display:none} .wpeek{display:none} .clients__row span{font-size:1.2rem} .features--lines .feature{border-bottom:1px solid var(--line)} .feature__rule{display:none} .quote{grid-template-columns:1fr;gap:12px} } /* globally collaborative — show the image at its true proportions (no crop) */ .globe__img{aspect-ratio:707/549} /* ---------- GLOBALLY COLLABORATIVE — comp layout (Home A) ---------- */ .gcol{position:relative;overflow:hidden;margin-top:clamp(20px,3vw,44px); padding-bottom:clamp(40px,6vw,80px)} /* images bleed to the page edges, sat at the top */ .gcol__imgA{position:absolute;left:0;top:0;z-index:1; width:clamp(150px,20vw,300px);aspect-ratio:300/248;overflow:hidden} .gcol__imgB{position:absolute;right:0;top:0;z-index:1; width:clamp(330px,50vw,740px);aspect-ratio:707/549;overflow:hidden} .gcol figure img{width:100%;height:100%;object-fit:cover} /* big ring behind everything */ .gcol__ring{position:absolute;left:50%;top:clamp(20px,3vw,52px);transform:translateX(-50%); width:min(60vw,690px);aspect-ratio:1;border:1px solid var(--line);border-radius:50%; z-index:0;pointer-events:none} /* text layer */ .gcol__body{position:relative;z-index:2;padding:0 var(--shell)} .gcol__title{padding-top:clamp(210px,37vw,520px);font-weight:500;line-height:.95; letter-spacing:-.035em;font-size:var(--fz-display)} .gcol__bottom{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,3vw,34px); margin-top:clamp(36px,6vw,90px)} .gcol__sub{max-width:44ch;font-size:clamp(1rem,1.3vw,1.15rem);color:var(--cream);line-height:1.55} @media (max-width:780px){ .gcol__imgA,.gcol__imgB{position:static;width:100%;aspect-ratio:16/10;margin-bottom:14px} .gcol__ring{display:none} .gcol__title{padding-top:18px;font-size:clamp(2.4rem,13vw,3.6rem)} .gcol__bottom{gap:18px} } /* ---------- TRUST — "Collaborated with" logo marquee ---------- */ /* Logos are full-resolution PNGs already coloured Fountain Frolic, rendered as plain (CSS masks resample badly and broke up fine detail). Height is optically normalised per mark via --f and rounded to a whole pixel so edges stay crisp; width follows the image. The track holds the row twice and slides -50% for a seamless loop. */ .trust{--logo-h:46px;--logo-gap:clamp(28px,4.4vw,68px); display:grid;gap:clamp(26px,3vw,42px);padding:clamp(40px,5vw,70px) 0;overflow:hidden} .trust__label{margin:0;text-align:center;font-size:12px;font-weight:400;letter-spacing:.14em; text-transform:uppercase;color:var(--cream-60)} .trust__viewport{overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,var(--ink) 14%,var(--ink) 86%,transparent); mask:linear-gradient(90deg,transparent,var(--ink) 14%,var(--ink) 86%,transparent)} .trust__track{display:flex;width:max-content;animation:trust-marquee 55s linear infinite;will-change:transform} .trust__row{list-style:none;margin:0;padding:0 var(--logo-gap) 0 0;display:flex;align-items:center;gap:var(--logo-gap)} .trust__row li{display:flex} .tl{display:block;flex:none;width:auto;height:calc(var(--logo-h) * var(--f)); height:round(calc(var(--logo-h) * var(--f)), 1px)} @keyframes trust-marquee{to{transform:translateX(-50%)}} @media (max-width:760px){ .trust{--logo-h:32px;--logo-gap:40px} } /* hero holds the marquee: nav clearance · showreel (centred in the free space) · marquee, all inside the first screen. Bottom padding lifts the composition off the fold. */ .hero--fit{display:flex;flex-direction:column;align-items:center;padding-top:clamp(76px,10vh,104px)} .hero--fit .reel{position:relative;top:auto;left:auto;transform:none;margin:auto 0;flex:none; width:min(800px,63vw,calc((100svh - 440px) * 628 / 348))} /* shrinks on short screens so the marquee always fits */ .hero--fit .trust{position:relative;z-index:3;width:100%;flex:none; padding:clamp(20px,3vh,36px) 0 clamp(64px,13vh,150px);gap:clamp(18px,2.6vh,30px)} /* the showreel→case spine would only be a ~20px stub below the showreel here */ .hero--fit ~ .home-spine{display:none} @media (max-width:880px){ .hero--fit .reel{width:min(78vw,calc((100svh - 380px) * 628 / 348))} } @media (prefers-reduced-motion:reduce){ .trust__track{animation:none;width:auto;justify-content:center} .trust__row{flex-wrap:wrap;justify-content:center;row-gap:22px;padding:0 var(--shell)} .trust__row[aria-hidden]{display:none} .trust__viewport{-webkit-mask:none;mask:none} } /* /site_assets/about.css */ /* =========================================================== AURALIS — About page styles (shared by the 3 options) Tokens only · Helvetica Neue · black background. Option A = .about--editorial (abhero / roster) Option B = .about--grid (abhero2 / tgrid / values) Option C = .about--cinematic (abhero3 / tfeat) Reuses .position .stats .start .scard .foot .pill from site.css =========================================================== */ /* ---- team headshot placeholder (shared) ---------------------------------- Plankton-green card fill with the member's initials in faded Fountain Frolic. Drop a real portrait in as inside the media box and it layers on top of the placeholder (object-fit:cover). */ .t-ph{ position:absolute;inset:0;display:grid;place-items:center; background:var(--ink-3); font-size:clamp(2.4rem,5vw,4rem);font-weight:500;letter-spacing:-.03em; color:var(--cream-24);user-select:none; } .t-media{position:relative;overflow:hidden;border-radius:2px;background:var(--ink-3)} .t-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transform:scale(1.02);transition:transform 1.2s var(--ease-out); /* desaturate the portraits to match the site's black & white treatment */ filter:grayscale(1) contrast(1.04)} .t-media:hover img{transform:scale(1.035)} /* subtle hover zoom */ /* shared section heading bar */ .team__head{display:flex;align-items:flex-end;justify-content:space-between; gap:24px;flex-wrap:wrap;padding:0 var(--shell)} .team__title{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:500;line-height:1; letter-spacing:-.03em} .team__intro{max-width:38ch;font-size:14px;line-height:1.6;color:var(--cream-60)} /* ===================================================================== OPTION A — EDITORIAL ROSTER ===================================================================== */ .abhero{padding:clamp(150px,20vw,260px) var(--shell) clamp(50px,8vw,110px)} .abhero__kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--cream-60);margin-bottom:clamp(22px,3vw,40px)} .abhero__kicker::before{content:"";display:inline-block;width:26px;height:1px; background:var(--cream-40);vertical-align:middle;margin-right:12px} .abhero__title{font-size:clamp(2.4rem,6.6vw,6rem);font-weight:500;line-height:1.0; letter-spacing:-.035em;max-width:18ch} .abhero__foot{display:grid;grid-template-columns:1.5fr 1fr; gap:clamp(28px,5vw,80px);align-items:start; margin-top:clamp(48px,7vw,100px);padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line)} .abhero__lede{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.5; letter-spacing:-.015em;max-width:46ch} .abhero__meta{display:flex;flex-direction:column;gap:20px} .abhero__meta div{display:flex;flex-direction:column;gap:5px} .abhero__meta b{font-size:12px;letter-spacing:.1em;text-transform:uppercase; font-weight:500;color:var(--cream-60)} .abhero__meta span{font-size:15px;color:var(--cream)} /* standalone intro block (Option A's lede + meta, used below the C hero) */ .ab-intro{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,5vw,80px); align-items:start;padding:clamp(56px,8vw,110px) var(--shell) clamp(20px,3vw,40px)} .team{padding:clamp(40px,7vw,90px) 0 clamp(20px,3vw,40px)} .team__head .pill{align-self:center} .roster{list-style:none;margin-top:clamp(40px,6vw,80px)} .tmember{display:grid;grid-template-columns:clamp(220px,30vw,380px) 1fr; gap:clamp(24px,4vw,64px);align-items:start; padding:clamp(34px,4vw,56px) var(--shell); border-top:1px solid var(--line)} .tmember:last-child{border-bottom:1px solid var(--line)} .tmember .t-media{aspect-ratio:4/5;width:100%} .tmember__body{position:relative;padding-top:6px} .tmember__name{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:500; letter-spacing:-.025em;line-height:1.04} /* names stay on a single line on desktop; wrap on tablet/mobile */ @media (min-width:1025px){.tmember__name{white-space:nowrap}} .tmember__bio{margin-top:20px;font-size:15px;line-height:1.62;color:var(--cream-60); max-width:62ch} /* ===================================================================== OPTION B — MANIFESTO + GRID ===================================================================== */ .abhero2{position:relative;padding:clamp(150px,20vw,260px) var(--shell) clamp(60px,9vw,120px); display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,5vw,80px); align-items:end;overflow:hidden} .abhero2__ring{position:absolute;right:-10%;top:6%;width:min(60vw,640px);aspect-ratio:1; border:1px solid var(--line);border-radius:50%;pointer-events:none;z-index:0} .abhero2__ring::after{content:"";position:absolute;inset:16%;border-radius:50%; border:1px solid var(--line)} .abhero2>*{position:relative;z-index:1} .abhero2__title{font-size:clamp(2.8rem,8vw,7rem);font-weight:500;line-height:.98; letter-spacing:-.04em} .abhero2__side{padding-bottom:8px} .abhero2__kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--cream-60);margin-bottom:18px} .abhero2__lede{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55; color:var(--cream);max-width:44ch;margin-bottom:28px} .tgrid-sec{padding:clamp(50px,8vw,110px) 0 clamp(20px,3vw,40px)} .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px); padding:clamp(40px,6vw,72px) var(--shell) 0} .tcard{display:flex;flex-direction:column} .tcard .t-media{aspect-ratio:3/4;width:100%} .tcard__name{margin-top:20px;font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:500; letter-spacing:-.02em;line-height:1.06} .tcard__role{margin-top:9px;font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--cream);opacity:.66} .tcard__bio{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--cream-60); display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden; transition:-webkit-line-clamp .3s} .tcard:hover .tcard__bio{-webkit-line-clamp:initial} /* values / ethos band */ .values{padding:clamp(80px,12vw,160px) var(--shell)} .values__title{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:400;line-height:1.18; letter-spacing:-.02em;max-width:22ch;margin-bottom:clamp(40px,5vw,70px)} .values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)} .values__item{border-top:1px solid var(--line);padding-top:22px} .values__item b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase; color:var(--cream-60);font-weight:500;margin-bottom:14px} .values__item p{font-size:15px;line-height:1.6;color:var(--cream)} /* ===================================================================== OPTION C — CINEMATIC ===================================================================== */ .abhero3{position:relative;min-height:88svh;display:flex;align-items:flex-end; padding:clamp(120px,16vw,200px) var(--shell) clamp(50px,8vw,100px);overflow:hidden} /* media and vignette: the page composition in site.css (.pagebg video, .abhero3::after) */ .abhero3__inner{position:relative;z-index:3;max-width:none;width:100%} .abhero3__kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--cream);opacity:.8;margin-bottom:22px} .abhero3__title{font-size:clamp(2.4rem,7.4vw,6.6rem);font-weight:500;line-height:1.02; letter-spacing:-.04em;max-width:none} .abhero3__lede{margin-top:clamp(24px,3vw,38px);font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.5;color:var(--cream);max-width:50ch} .tfeat-sec{padding:clamp(60px,9vw,120px) 0 clamp(20px,3vw,40px)} .tfeat{position:relative;display:grid;grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px);align-items:center; padding:clamp(48px,7vw,100px) var(--shell)} .tfeat:nth-child(even) .t-media{order:2} .tfeat .t-media{aspect-ratio:1/1;width:100%} .tfeat__no{font-size:clamp(3rem,7vw,6rem);font-weight:500;line-height:1; letter-spacing:-.04em;color:var(--cream);opacity:.14;margin-bottom:18px} .tfeat__name{font-size:clamp(1.8rem,3.4vw,3rem);font-weight:500;letter-spacing:-.03em; line-height:1.02} .tfeat__role{margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--cream-60)} .tfeat__bio{margin-top:22px;font-size:15px;line-height:1.64;color:var(--cream-60); max-width:52ch} /* position statement (mirrors the homepage component, so option C is self-contained without loading studio.css) */ .position{padding:clamp(70px,11vw,170px) var(--shell) clamp(40px,6vw,90px)} .position p{font-size:clamp(1.7rem,4.3vw,3.7rem);font-weight:500;line-height:1.12; letter-spacing:-.025em;max-width:24ch} .position__foot{display:flex;gap:clamp(24px,4vw,60px);flex-wrap:wrap; margin-top:clamp(36px,5vw,64px);padding-top:26px;border-top:1px solid var(--line)} .position__foot div{max-width:30ch} .position__foot b{display:block;font-weight:500;font-size:1.05rem;margin-bottom:6px} .position__foot span{color:var(--cream-60);font-size:14px;line-height:1.5} /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width:860px){ .abhero__foot,.ab-intro{grid-template-columns:1fr;gap:30px} .abhero2{grid-template-columns:1fr;gap:30px} .abhero2__ring{display:none} .tmember{grid-template-columns:1fr;gap:20px} .tmember .t-media{aspect-ratio:16/11;max-width:420px} .tgrid{grid-template-columns:repeat(2,1fr)} .values__grid{grid-template-columns:1fr} .tcard__bio{-webkit-line-clamp:initial} .tfeat{grid-template-columns:1fr;gap:22px} .tfeat:nth-child(even) .t-media{order:0} .tfeat .t-media{aspect-ratio:16/11;max-width:480px} } @media (max-width:560px){ .tgrid{grid-template-columns:1fr;max-width:420px} } /* /site_assets/social.css */ /* =========================================================== AURALIS — /social (social media showcase) Loads ON TOP of tokens.css + site.css + studio.css + about.css (reuses nav, abhero3, .position, .trust, .sec-head, .eyebrow, .filters, .feature rows, .stats, .mission, .gcol, .start, footer, cursor, grain). Adds the hero lockup, the services switchboard and the locations row. Only brand tokens — no raw colour. =========================================================== */ /* ---------- gradient, dim and grain ---------- The fixed gradient video (.pagebg), the hero vignette, the .pagebody dim and the grain (.grain) are the site-wide page composition: see site.css and tokens.css. */ /* ---------- hero lockup ---------- "Social" set edge to edge across the shell with one word beside it in a slot that rotates: media, impact, content, leverage. The slot is an inline grid with every word in the same cell, so it is as wide as the widest word and the line never shifts; social.js measures the lockup and sets --fs so it always spans the shell (the clamp is only the pre-measure fallback). Words rise out of clip masks on load (GSAP when it is there, a CSS keyframe otherwise); the slot then swaps words by class: the leaving word slides up and out, the next slides up in. */ .abhero3--lockup{padding-top:clamp(110px,14vw,170px)} .abhero3--lockup .abhero3__kicker{margin-bottom:clamp(18px,2.4vw,30px)} .lockup{--fs:clamp(2.6rem,21vw,22rem);margin:0;max-width:none;font-weight:500;line-height:.86; letter-spacing:-.045em;color:var(--cream)} .lockup__in{display:inline-flex;align-items:last baseline;gap:.07em;white-space:nowrap; font-size:var(--fs);vertical-align:top} .lockup__big{display:block;clip-path:inset(-.16em -.06em -.04em)} .lockup__slot{display:inline-grid;font-size:.5em;line-height:.96;letter-spacing:-.03em;clip-path:inset(-.12em -.06em -.16em)} .lockup__m{grid-area:1/1;display:block;transform:translateY(112%)} .lockup__m.is-on,.lockup__m.is-out{transition:transform .95s var(--ease-inout)} .lockup__m.is-on{transform:none} .lockup__m.is-out{transform:translateY(-112%)} @media (prefers-reduced-motion:reduce){ .lockup__m{transform:none;opacity:0} .lockup__m.is-on,.lockup__m.is-out{transition:opacity .5s} .lockup__m.is-on{opacity:1} .lockup__m.is-out{opacity:0} } .lockup__w{display:inline-block} /* hidden while carries lockup-arm (set inline in the page head), shown by social.js: a CSS rise when GSAP is absent, a GSAP tween (inline opacity + transform) when it is present. The stylesheet never sets a transform here: GSAP would read a translateY(%) as pixels and keep it. */ .lockup-arm .lockup__w{opacity:0} .lockup.is-ready .lockup__w{opacity:1;animation:lockup-rise 1.1s var(--ease-out) both} @keyframes lockup-rise{from{transform:translateY(120%)}to{transform:none}} .abhero3--lockup .abhero3__lede{margin-top:clamp(26px,3.6vw,48px)} /* secondary call to action under the lede: scrolls to the plans (site.js smooth-scrolls in-page anchors) */ .abhero3__ctas{margin-top:clamp(22px,2.6vw,34px);display:flex;flex-wrap:wrap;gap:10px} /* desktops: the "Collaborated with" strip is part of the first screen. The hero gives up the height the strip needs (label, logos and a slim top padding) instead of filling 88svh on its own, so on a 16:9 display the logos sit above the fold. Phones keep the top-aligned hero below. */ @media (min-width:721px){ .abhero3--lockup{min-height:calc(100svh - 170px);padding-bottom:clamp(28px,3.4vw,48px)} .abhero3--lockup + .pagebody > .trust{padding-top:clamp(8px,1.6vw,22px)} } /* short desktop screens (a 1280×720 laptop): tighter hero spacing so the logos still clear the fold */ @media (min-width:721px) and (max-height:800px){ .abhero3--lockup{padding-top:clamp(96px,13vh,140px)} .abhero3--lockup .abhero3__lede{margin-top:clamp(20px,2.6vw,32px)} .abhero3__ctas{margin-top:clamp(18px,2vw,26px)} } /* phones: start at the top with the About hero's top padding, not pinned to the foot of a tall box */ @media (max-width:720px){ .abhero3--lockup{min-height:0;align-items:flex-start;padding-top:clamp(120px,16vw,200px)} } @supports not (align-items:last baseline){ .lockup__in{align-items:flex-end} .lockup__slot{padding-bottom:.02em} } /* ---------- cursor hand-off at embeds ---------- A browser never passes mouse events from inside a third-party iframe to the page, so the custom cursor cannot follow the pointer over an Instagram or TikTok post; without this it freezes at the edge. social.js flags the body while the pointer is over a frame and the native cursor takes over cleanly. */ body.cursor-off .cursor{opacity:0} body.has-cursor.cursor-off,body.has-cursor.cursor-off a{cursor:auto} /* ---------- one size for every reel ---------- Instagram reels and TikTok players share one 9:16 frame at one width; whatever the platform draws inside is pinned to fill it. */ :root{--reel-w:250px} .embed__frame.embed__frame--reel,.embed__frame.embed__frame--reel[data-lazy]{aspect-ratio:9/16} .embed__frame.embed__frame--reel>*,.embed__frame.embed__frame--reel blockquote,.embed__frame.embed__frame--reel iframe{ position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;aspect-ratio:auto !important} .embed__frame--reel .embed__fb{aspect-ratio:auto} .sgrid .embed--reel{flex-basis:min(100%,var(--reel-w));width:min(100%,var(--reel-w))} /* ---------- reel strip under the hero (one tile per client) ---------- */ .reels{overflow:hidden;padding:clamp(24px,4vw,56px) 0 0} .reels__row{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory; padding:0 var(--shell) 16px;scroll-padding-left:var(--shell);scrollbar-width:none; -webkit-overflow-scrolling:touch} .reels__row::-webkit-scrollbar{display:none} /* tile never wider than the screen minus the gutters, so a 320px cover screen still shows one whole tile */ .rtile{flex:0 0 min(var(--reel-w),calc(100vw - 2 * var(--shell) - 24px)); scroll-snap-align:start;min-width:0} .rtile__bar{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding:14px 2px 0;flex-wrap:wrap} .rtile__bar b{font-weight:500;font-size:var(--fz-title-s);letter-spacing:-.02em} .rtile__bar span{font-size:12px;color:var(--cream-60);border:1px solid var(--line-2); border-radius:var(--r-chip,10px);padding:7px 12px;line-height:1;white-space:nowrap} /* ---------- position statement: the single lit line, no foot items ---------- */ .position--solo{padding-bottom:clamp(50px,8vw,120px)} .position--solo p{max-width:26ch} /* ---------- services: switchboard ---------- Five numbered rows; the hovered (or focused) row opens its description and bullets, and the sticky panel beside the list crossfades to that service's image, drifting a little with the pointer. The Production slot is the studio showreel, playing while it is the active one. Below 880px, and on any device without hover, the same list opens and closes on tap instead (social.js). */ .sv{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:start} .sv__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .sv__row{display:grid;grid-template-columns:1fr;column-gap:12px;align-items:start; padding:clamp(18px,2.4vw,28px) 0;border-bottom:1px solid var(--line);outline:none; transition:padding-left .45s var(--ease)} /* the title is a button, so it can be reached and toggled from the keyboard; the row wears its focus ring */ .sv__btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin:0;padding:0;border:0; background:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;text-align:left;cursor:pointer} .sv__btn:focus-visible{outline:0} .sv__row:has(.sv__btn:focus-visible){box-shadow:inset 2px 0 0 var(--cream)} /* where taps drive the list, a thin plus on the title says it opens; it turns into a cross while open */ .sv__btn::after{content:"";display:none;flex:0 0 auto;width:13px;height:13px;margin-left:auto;opacity:.7; background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat, linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat; transition:transform .45s var(--ease),opacity .35s} .sv__row.is-on .sv__btn::after{transform:rotate(45deg);opacity:1} @media (max-width:880px),(hover:none){ .sv__btn::after{display:block} } .sv__title{font-size:var(--fz-h3);font-weight:500;letter-spacing:-.025em;line-height:1.02; color:var(--cream-60);transition:color .35s} .sv__body{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .55s var(--ease),opacity .4s,margin .55s var(--ease)} .sv__bodyin{min-height:0;overflow:hidden} .sv__body p{color:var(--cream-60);font-size:15px;line-height:1.5;max-width:42ch;margin:14px 0 0} .sv__body ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px} .sv__body li{font-size:14px;color:var(--cream);line-height:1.4;padding-left:16px;position:relative} .sv__body li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--cream)} .sv__row.is-on{padding-left:14px} .sv__row.is-on .sv__title{color:var(--cream)} .sv__row.is-on .sv__body{grid-template-rows:1fr;opacity:1;margin-bottom:4px} /* while the service images are held back (no .sv__panel in the markup) the list runs full width; hovering still opens a service and the list still rotates on its own (social.js) */ .sv:not(:has(.sv__panel)){grid-template-columns:1fr} .sv__fig{margin:0} .sv__fig--inline{display:none} .sv__panel{position:sticky;top:96px;border-radius:var(--r-btn,8px);overflow:hidden;background:var(--ink-3); clip-path:inset(0 round var(--r-btn,8px))} .sv__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)} .sv__media .sv__fig{position:absolute;inset:0;opacity:0;transform:scale(1.06); transition:opacity .7s var(--ease),transform 1.3s var(--ease)} .sv__media .sv__fig.is-on{opacity:1;transform:scale(1)} /* each thumbnail sets its focal point (--fx/--fy) and crop (--z) inline */ .sv__fig img,.sv__fig video{object-position:var(--fx,50%) var(--fy,50%);transform-origin:var(--fx,50%) var(--fy,50%)} .sv__media img,.sv__media video{display:block;width:100%;height:100%;object-fit:cover; transform:translate(calc(var(--mx,0) * 12px),calc(var(--my,0) * 12px)) scale(calc(1.06 * var(--z,1))); transition:transform .6s var(--ease-out)} .sv__cap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 20px; font-size:14px;border-top:1px solid var(--line)} .sv__cap b{font-weight:500} .sv__cap span{color:var(--cream-60);font-size:12px;letter-spacing:.12em} /* section titles carry the homepage's .start__title; inside a section head they sit flush */ .sec-head h2.start__title{font-size:var(--fz-title);letter-spacing:-.03em;line-height:1.02;margin:0} /* no dotted eyebrows on this page: any label left (embed fallbacks, payment steps) is plain text */ .eyebrow{gap:0} .eyebrow::before{content:none} /* ---------- calls to action ---------- One filled primary (.pill, the nav's "Start a project" look) after each main block. */ .cta-row{display:flex;justify-content:center;margin-top:clamp(28px,4vw,48px)} .cta-row--cases{padding:clamp(40px,6vw,80px) var(--shell) 0;margin-top:0} /* phones: a pinned "Start your content project" so every screen has a way in; social.js hides it while an inline CTA, the start cards or the footer are on screen */ .stickycta{display:none} @media (max-width:720px){ .stickycta{display:inline-flex;position:fixed;left:var(--shell);bottom:18px;z-index:170;--cta-py:14px;--cta-fz:14px; box-shadow:0 14px 34px rgba(0,0,0,.45);opacity:0;transform:translateY(14px);pointer-events:none; transition:opacity .35s var(--ease),transform .35s var(--ease)} .stickycta.is-on{opacity:1;transform:none;pointer-events:auto} } /* case links at the homepage's list-link size, with its arrow */ .feature__link{font-size:clamp(1rem,1.4vw,1.25rem);gap:12px;padding-bottom:6px} .feature__link:hover{gap:16px} .feature__link i{font-style:normal;font-size:0;position:relative;display:block;width:18px;height:18px;flex:0 0 auto} .feature__link i::before{content:"";position:absolute;inset:0;background:currentColor; -webkit-mask:var(--arrow-r) center/18px no-repeat;mask:var(--arrow-r) center/18px no-repeat} /* site stats on phones: hairlines between the rows as well as the columns */ @media (max-width:860px){ .stats:not(.stats--3){row-gap:0} .stats:not(.stats--3) .stat:nth-child(-n+2){padding-bottom:30px} .stats:not(.stats--3) .stat:nth-child(n+3){padding-top:30px;border-top:1px solid var(--line)} } /* ---------- locations under the site metrics ---------- */ .places{padding:0 var(--shell) clamp(60px,9vw,120px);margin-top:calc(-1 * clamp(20px,3.5vw,48px)); display:grid;gap:18px;justify-items:center;text-align:center} .places__label{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-60)} .places__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .places__list li{font-size:14px;color:var(--cream);border:1px solid var(--line-2);border-radius:var(--r-chip,10px); padding:9px 16px;line-height:1;white-space:nowrap} /* static labels: no hover or tap state (abdullah, 2026-11-07) */ /* ---------- showcase sections ---------- */ .sw{padding:clamp(60px,9vw,130px) var(--shell);border-top:1px solid var(--line)} .sw--tight{padding-bottom:0;border-top:1px solid var(--line)} .sw--tight .sec-head{margin-bottom:0} .stats--3{grid-template-columns:repeat(3,1fr);padding:0 0 clamp(40px,6vw,80px); border-bottom:1px solid var(--line);margin-bottom:clamp(40px,6vw,80px)} .stats--3 .stat__lab{color:var(--cream-60);max-width:22ch;margin-inline:auto} /* category / client blocks */ .cat{padding-top:clamp(40px,6vw,80px);scroll-margin-top:110px} .vgroup+.vgroup{margin-top:clamp(40px,6vw,80px)} .cat__head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap; padding-bottom:16px;margin-bottom:clamp(20px,3vw,32px);border-bottom:1px solid var(--line)} .cat__head h3{font-size:var(--fz-h3);font-weight:500;letter-spacing:-.025em;line-height:1.02} .cat__head p{color:var(--cream-60);font-size:15px;line-height:1.5;max-width:46ch;flex:1 1 24ch} .cat__n{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-40);margin-left:auto} .cat__n::after{content:" pieces"} /* format tabs: anchor links styled like the work-index filter chips; social.js shows one .cat panel at a time and marks the active chip */ .filters{margin-bottom:0} .filters a.is-active{color:var(--ink);background:var(--cream);border-color:var(--cream)} .cat[hidden]{display:none} .tabpanels .cat{padding-top:clamp(28px,4vw,48px)} .filters a{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-60); border:1px solid var(--line-2);border-radius:var(--r-toggle,40px);padding:8px 14px;transition:.3s;line-height:1.2} .filters a:hover{color:var(--ink);background:var(--cream);border-color:var(--cream)} /* embed grid + cards */ /* cards are a fixed ~250px (about 80% of the earlier column) and every row is centred, including a short last row; on phones one 80%-wide centred column */ .sgrid{--card-w:min(100%,250px);display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(18px,2.4vw,32px);align-items:flex-start} .embed{flex:0 0 var(--card-w);width:var(--card-w);min-width:0;display:flex;flex-direction:column;gap:12px} .embed__cap,.views{text-align:center;justify-content:center} .embed__cap{font-size:14px;color:var(--cream-60);line-height:1.5} .views{display:flex;gap:8px;flex-wrap:wrap} .views span{font-size:13px;color:var(--cream);border:1px solid var(--line-2); border-radius:var(--r-chip,10px);padding:8px 15px;line-height:1;white-space:nowrap} .views span b{font-weight:500} /* ---------- embed frame ---------- Instagram and TikTok draw their own white card inside an iframe we cannot restyle; X honours data-theme="dark". The frame gives every one of them the site's CTA radius, a hairline in Fountain Frolic, and the Plankton Green media fill behind it while it loads. clip-path (not overflow) is what actually rounds an iframe's corners in Safari. */ .embed__frame{position:relative;border-radius:var(--r-btn,8px);overflow:hidden; clip-path:inset(0 round var(--r-btn,8px));background:var(--ink-3);min-width:0;max-width:100%} /* Instagram posts wait in a