/* ========================================================= SHARE COLLECTIVE — core stylesheet Font: Mona Sans · Theme: dark / cinematic, black & white ========================================================= */ /* --- Self-hosted Mona Sans (optional). Drop MonaSans.woff2 into /assets/fonts/ and this takes over. Otherwise the Google Fonts link in each is used. --- */ @font-face { font-family: 'Mona Sans Local'; src: url('../fonts/MonaSans.woff2') format('woff2 supports variations'), url('../fonts/MonaSans.woff2') format('woff2-variations'); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; } /* --------------------------------------------------------- 1. Tokens --------------------------------------------------------- */ :root { --ink: #000000; --ink-2: #0A0A0A; --ink-3: #141414; --paper: #FFFFFF; --muted: rgba(255, 255, 255, .52); --muted-2: rgba(255, 255, 255, .30); --line: rgba(255, 255, 255, .13); --line-soft: rgba(255, 255, 255, .07); --acid: #FFFFFF; /* highlight */ --violet: #FFFFFF; /* glow */ --coral: #FFFFFF; /* glow */ --font: 'Mona Sans', 'Mona Sans Local', 'Mona Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --gut: clamp(20px, 4.2vw, 72px); /* page gutter */ --sec: clamp(88px, 13vh, 190px); /* section rhythm */ --maxw: 1680px; --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, .05, .36, 1); --dur: .9s; --nav-h: 78px; } /* --------------------------------------------------------- 2. Reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); /* stops the elastic rubber-band overscroll past the top and bottom */ overscroll-behavior-y: none; /* keep horizontal clipping on . Putting it on would turn the body into its own scroll container, which doubles up the page height and breaks position:sticky. */ overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font); font-optical-sizing: auto; background: var(--ink); color: var(--paper); line-height: 1.5; /* `clip` (not `hidden`) trims any stray overflow — from parallax transforms, oversized decorative layers, etc — WITHOUT turning the body into its own scroll container. That keeps the document height equal to the real content height, so the scrollbar is accurate and the page stops dead at the footer. Fixed-position overlays are unaffected. */ overflow: clip; overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; } body.is-locked { overflow: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; } button { cursor: pointer; } ::selection { background: var(--acid); color: var(--ink); } /* --------------------------------------------------------- 3. Type scale --------------------------------------------------------- */ .display { /* min, scales-with-viewport, max — nudge the middle value to resize */ font-size: clamp(2.25rem, 7.4vw, 8.1rem); line-height: .84; letter-spacing: -.045em; font-weight: 800; font-variation-settings: 'wght' 800, 'wdth' 112; text-transform: uppercase; } /* Hero headline keeps the title-case written in the HTML ("We Help You Share") */ .hero .display { text-transform: none; } /* same, for any other headline that wants the casing as typed */ .display--title { text-transform: none; } .h1 { font-size: clamp(2.4rem, 7vw, 6.6rem); line-height: .92; letter-spacing: -.038em; font-weight: 750; font-variation-settings: 'wght' 750, 'wdth' 108; } .h2 { font-size: clamp(1.9rem, 4.4vw, 4rem); line-height: 1.0; letter-spacing: -.03em; font-weight: 700; } .h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 650; } .lede { font-size: clamp(1.05rem, 1.55vw, 1.5rem); line-height: 1.42; letter-spacing: -.014em; color: rgba(255, 255, 255, .78); font-weight: 400; max-width: 30ch; } .body { font-size: clamp(.98rem, 1.05vw, 1.08rem); color: var(--muted); line-height: 1.62; max-width: 62ch; } .eyebrow { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: .7em; } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acid); flex: none; box-shadow: 0 0 10px rgba(255,255,255,.45); } .acid { color: var(--acid); } .italic { font-style: italic; font-variation-settings: 'wght' 500; opacity: .85; } .muted { color: var(--muted); } /* --------------------------------------------------------- 4. Layout helpers --------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: var(--sec); position: relative; } .rule { height: 1px; background: var(--line); width: 100%; } .grid { display: grid; gap: clamp(24px, 3vw, 56px); } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } .g-12 { grid-template-columns: repeat(12, 1fr); } @media (max-width: 900px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } .g-12 { grid-template-columns: repeat(6, 1fr); } } /* --------------------------------------------------------- 5. Atmosphere — grain, orbs, progress --------------------------------------------------------- */ /* Grain sits exactly over the viewport (inset:0) and shifts its background rather than transforming itself — an oversized transformed overlay can add phantom scroll height. */ .grain { position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; animation: grainShift 6s steps(6) infinite; } @keyframes grainShift { 0% { background-position: 0px 0px; } 20% { background-position: -60px 40px; } 40% { background-position: 40px -60px; } 60% { background-position: -40px -40px; } 80% { background-position: 60px 60px; } 100% { background-position: 0px 0px; } } .orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .10; will-change: transform; } .orb--1 { width: 44vw; height: 44vw; left: -10vw; top: 4vh; background: radial-gradient(circle at 30% 30%, var(--violet), transparent 68%); animation: drift1 26s ease-in-out infinite; } .orb--2 { width: 38vw; height: 38vw; right: -8vw; top: 40vh; background: radial-gradient(circle at 60% 40%, var(--acid), transparent 66%); opacity: .07; animation: drift2 34s ease-in-out infinite; } .orb--3 { width: 34vw; height: 34vw; left: 30vw; bottom: -12vh; background: radial-gradient(circle at 50% 50%, var(--coral), transparent 68%); opacity: .08; animation: drift3 30s ease-in-out infinite; } @keyframes drift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(8vw, 10vh, 0) scale(1.15); } } @keyframes drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-10vw, -8vh, 0) scale(.92); } } @keyframes drift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-6vw, -12vh, 0) scale(1.2); } } @media (prefers-reduced-motion: reduce) { .orb { animation: none !important; } } .progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--acid), var(--violet)); z-index: 950; } /* --------------------------------------------------------- 6. Cursor --------------------------------------------------------- */ .cursor, .cursor-dot { position: fixed; top: 0; left: 0; z-index: 990; pointer-events: none; border-radius: 50%; } .cursor { width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .5); margin: -21px 0 0 -21px; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), opacity .3s; display: grid; place-items: center; backdrop-filter: invert(3%); } .cursor-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--acid); } .cursor__label { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink); opacity: 0; transition: opacity .3s; white-space: nowrap; } body.cursor-active .cursor { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--acid); border-color: var(--acid); } body.cursor-active .cursor__label { opacity: 1; } body.cursor-active .cursor-dot { opacity: 0; } @media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } } /* --------------------------------------------------------- 7. Preloader --------------------------------------------------------- */ .loader { position: fixed; inset: 0; z-index: 1000; background: var(--ink); display: grid; place-items: center; transition: transform 1.1s var(--ease), opacity .5s .55s; } .loader.is-done { transform: translateY(-101%); opacity: 0; pointer-events: none; } .loader__inner { display: flex; flex-direction: column; align-items: center; gap: 26px; } .loader__mark { width: 62px; opacity: 0; animation: markIn 1s var(--ease) forwards; } @keyframes markIn { from { opacity: 0; transform: scale(.6) rotate(-25deg); } to { opacity: 1; transform: none; } } .loader__bar { width: min(240px, 46vw); height: 1px; background: var(--line); overflow: hidden; } .loader__bar i { display: block; height: 100%; width: 0%; background: var(--acid); } .loader__num { font-size: .74rem; letter-spacing: .22em; color: var(--muted); font-variant-numeric: tabular-nums; } /* page transition curtain */ .curtain { position: fixed; inset: 0; z-index: 995; background: var(--ink-2); transform: translateY(100%); pointer-events: none; display: grid; place-items: center; } .curtain.is-out { animation: curtainUp 1.05s var(--ease) forwards; } .curtain.is-in { animation: curtainDown .9s var(--ease) forwards; } @keyframes curtainUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes curtainDown { from { transform: translateY(0); } to { transform: translateY(-100%); } } .curtain img { width: 54px; opacity: .9; } /* --------------------------------------------------------- 8. Nav --------------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 940; height: var(--nav-h); display: flex; align-items: center; transition: transform .55s var(--ease), background-color .4s, backdrop-filter .4s, border-color .4s; border-bottom: 1px solid transparent; } .nav.is-stuck { background: rgba(0, 0, 0, .72); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line-soft); } .nav.is-hidden { transform: translateY(-100%); } .nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { width: 26px; transition: transform .6s var(--ease); } .brand:hover img { transform: scale(1.08); } .brand span { font-weight: 700; letter-spacing: -.02em; font-size: 1.02rem; font-variation-settings: 'wght' 700, 'wdth' 105; } .nav__links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); } /* The link clips to exactly one line so the label can roll up on hover. Height, line-height and the hover translate must all be the same value, and there must be no vertical padding — with border-box sizing padding would eat into the height and clip the letterforms. */ .nav__link { --line-h: 1.9em; position: relative; font-size: .88rem; font-weight: 500; letter-spacing: -.01em; overflow: hidden; display: inline-block; height: var(--line-h); line-height: var(--line-h); color: var(--muted); transition: color .35s; } .nav__link span { display: block; line-height: var(--line-h); transition: transform .5s var(--ease); } .nav__link span::after { content: attr(data-t); display: block; color: var(--paper); } .nav__link:hover span { transform: translateY(calc(var(--line-h) * -1)); } .nav__link.is-active { color: var(--paper); } .nav__link.is-active::after { content: ''; position: absolute; bottom: .28em; left: 0; right: 0; height: 1px; background: var(--paper); } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 100px; border: 1px solid var(--line); font-size: .84rem; font-weight: 600; letter-spacing: -.01em; position: relative; overflow: hidden; isolation: isolate; transition: color .4s var(--ease), border-color .4s; } .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--acid); transform: translateY(101%); border-radius: 50% 50% 0 0; transition: transform .55s var(--ease), border-radius .55s var(--ease); } .btn:hover { color: var(--ink); border-color: var(--acid); } .btn:hover::before { transform: translateY(0); border-radius: 0; } .btn--solid { background: var(--acid); color: var(--ink); border-color: var(--acid); } .btn--solid::before { background: var(--ink); } .btn--solid:hover { color: var(--paper); } .btn--lg { padding: 18px 30px; font-size: .95rem; } .btn i { font-style: normal; transition: transform .45s var(--ease); } .btn:hover i { transform: translate(3px, -3px); } .burger { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 50%; } .burger b { display: block; width: 17px; height: 1.5px; background: var(--paper); position: relative; transition: background .3s; } .burger b::before, .burger b::after { content: ''; position: absolute; left: 0; width: 100%; height: 100%; background: var(--paper); transition: transform .45s var(--ease); } .burger b::before { top: -5px; } .burger b::after { top: 5px; } body.menu-open .burger b { background: transparent; } body.menu-open .burger b::before { transform: translateY(5px) rotate(45deg); } body.menu-open .burger b::after { transform: translateY(-5px) rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 935; background: var(--ink-2); padding: calc(var(--nav-h) + 40px) var(--gut) 40px; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); pointer-events: none; } body.menu-open .menu { clip-path: inset(0 0 0 0); pointer-events: auto; } .menu__list { display: flex; flex-direction: column; gap: 4px; } .menu__list a { font-size: clamp(2.4rem, 11vw, 5rem); line-height: 1.02; font-weight: 750; letter-spacing: -.04em; text-transform: uppercase; transform: translateY(110%); opacity: 0; transition: transform .8s var(--ease), opacity .6s, color .3s; display: block; } body.menu-open .menu__list a { transform: none; opacity: 1; } body.menu-open .menu__list li:nth-child(1) a { transition-delay: .1s; } body.menu-open .menu__list li:nth-child(2) a { transition-delay: .17s; } body.menu-open .menu__list li:nth-child(3) a { transition-delay: .24s; } body.menu-open .menu__list li:nth-child(4) a { transition-delay: .31s; } .menu__list a:hover { color: var(--acid); } .menu__foot { display: flex; flex-wrap: wrap; gap: 18px 32px; font-size: .84rem; color: var(--muted); } .menu ul { list-style: none; } @media (max-width: 860px) { .nav__links { display: none; } .burger { display: grid; } /* The full-screen menu only ever opens here — the burger that triggers it is hidden above this width — but scope it explicitly so desktop can never inherit it. */ .menu__list a { text-transform: capitalize; } } /* --------------------------------------------------------- 9. Reveal primitives (driven by JS .is-in) --------------------------------------------------------- */ [data-reveal] { will-change: transform, opacity; } [data-reveal="up"] { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--ease), transform 1s var(--ease); } [data-reveal="fade"] { opacity: 0; transition: opacity 1.1s var(--ease); } [data-reveal="left"] { opacity: 0; transform: translateX(-40px); transition: opacity .9s var(--ease), transform 1s var(--ease); } [data-reveal="right"] { opacity: 0; transform: translateX(40px); transition: opacity .9s var(--ease), transform 1s var(--ease); } [data-reveal="scale"] { opacity: 0; transform: scale(.94); transition: opacity 1s var(--ease), transform 1.2s var(--ease); } [data-reveal].is-in { opacity: 1; transform: none; } /* clip-path mask reveal for media */ .mask { overflow: hidden; position: relative; } .mask > img, .mask > video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.28); transition: transform 1.6s var(--ease); will-change: transform; } .mask.is-in > img, .mask.is-in > video { transform: scale(1); } .mask::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform-origin: 50% 100%; transition: transform 1.25s var(--ease); } .mask.is-in::after { transform: scaleY(0); } /* split text */ .split { display: block; } .split .line { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; } .split .word { display: inline-block; transform: translateY(105%); transition: transform .95s var(--ease); will-change: transform; } .split.is-in .word { transform: translateY(0); } .char-fade .word { opacity: 0; transform: translateY(.4em); transition: opacity .7s var(--ease), transform .7s var(--ease); } .char-fade.is-in .word { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal], .split .word, .char-fade .word { opacity: 1 !important; transform: none !important; } .mask::after { display: none; } .mask > img { transform: none !important; } .grain { animation: none; } } /* --------------------------------------------------------- 10. Hero --------------------------------------------------------- */ .hero { min-height: 100svh; padding-top: calc(var(--nav-h) + clamp(30px, 7vh, 90px)); padding-bottom: clamp(40px, 7vh, 90px); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; overflow: hidden; } /* video wash behind the hero type — deliberately faint, never competes with the headline */ .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* the clip swings from near-black to full-white strobe frames; the low contrast pulls both ends toward the middle so the wash never flashes behind the type */ .hero__bg video { width: 100%; height: 100%; object-fit: cover; opacity: .16; filter: grayscale(.35) contrast(.6) brightness(1.25); } /* feathers the wash into the black so it has no visible edge */ .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--ink), transparent 30%, transparent 60%, var(--ink)), radial-gradient(130% 85% at 50% 45%, transparent 30%, var(--ink)); } .hero__type { position: relative; z-index: 2; text-align: center; } .hero__row { display: flex; align-items: baseline; justify-content: center; gap: clamp(10px, 2vw, 34px); flex-wrap: wrap; } /* .lede caps itself at 30ch, which is far too narrow for the hero paragraph — widen the measure here only, and keep the auto margins so it sits centred */ .hero__type .lede { font-size: clamp(1rem, 1.35vw, 1.3rem); max-width: 56ch; margin-inline: auto; } .hero__meta { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4vh, 44px); /* same clamp as .hero__badge's margin-bottom, so the gap above the headline and the gap below it match. Change them together. */ margin-top: clamp(20px, 4vh, 40px); } .hero__scroll { display: flex; align-items: center; gap: 12px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .hero__scroll b { display: block; width: 1px; height: 42px; background: linear-gradient(var(--acid), transparent); animation: scrollPulse 2s infinite; } @keyframes scrollPulse { 0%,100% { transform: scaleY(.4); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } } /* floating logo marks behind hero */ .floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .floaters img { position: absolute; opacity: .09; will-change: transform; } .floaters img:nth-child(1) { width: 12vw; top: 8%; right: 8%; } .floaters img:nth-child(2) { width: 7vw; top: 62%; left: 4%; } .floaters img:nth-child(3) { width: 5vw; top: 30%; left: 46%; } .hero__badge { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px; font-size: .74rem; letter-spacing: .04em; color: var(--muted); margin-bottom: clamp(20px, 4vh, 40px); } .hero__badge b { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); animation: blink 2.4s infinite; } @keyframes blink { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 70% { opacity: .7; box-shadow: 0 0 0 8px rgba(255,255,255,0); } } /* inline media chip inside big headline */ .chip { display: inline-block; vertical-align: middle; width: clamp(70px, 12vw, 190px); height: clamp(42px, 7vw, 110px); border-radius: 100px; overflow: hidden; margin-inline: .12em; transform: translateY(-.06em); } .chip img { width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------- 11. Marquee --------------------------------------------------------- */ .marquee { --mq-gap: clamp(28px, 4vw, 72px); overflow: hidden; display: flex; width: 100%; user-select: none; position: relative; } .marquee__track { display: flex; gap: var(--mq-gap); flex: none; padding-right: var(--mq-gap); will-change: transform; } .marquee__item { display: flex; align-items: center; gap: var(--mq-gap); flex: none; white-space: nowrap; } .marquee--type .marquee__item { font-size: clamp(2.6rem, 8vw, 8rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; line-height: 1; } .marquee--type .stroke { -webkit-text-stroke: 1px rgba(255,255,255,.35); color: transparent; } .marquee--type .dot { color: var(--muted); font-size: .5em; transform: translateY(-.25em); } /* One gap value drives both the space between names and the space between repeated copies, so the loop seam matches the in-copy rhythm exactly and the scroll reads as continuous. */ .marquee--logos { border-block: 1px solid var(--line); padding-block: clamp(20px, 3vw, 34px); --mq-gap: clamp(40px, 6vw, 96px); } .logo-word { font-size: clamp(1.1rem, 2vw, 1.7rem); font-weight: 650; letter-spacing: -.02em; text-transform: uppercase; color: #fff; transition: color .4s, opacity .4s; display: inline-flex; align-items: center; gap: 10px; } .logo-word:hover { color: var(--paper); } /* --------------------------------------------------------- 12. Services / accordion list --------------------------------------------------------- */ .svc { border-top: 1px solid var(--line); } .svc__row { position: relative; display: grid; grid-template-columns: 70px 1fr auto; gap: clamp(16px, 3vw, 46px); align-items: center; padding: clamp(26px, 3.4vw, 46px) 0; border-bottom: 1px solid var(--line); transition: padding-inline .5s var(--ease), color .4s; cursor: pointer; } .svc__row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,.1), transparent 60%); opacity: 0; transition: opacity .5s; } .svc__row:hover::before { opacity: 1; } .svc__row:hover { padding-inline: clamp(10px, 1.6vw, 26px); } .svc__num { font-size: .78rem; color: var(--muted-2); letter-spacing: .1em; font-variant-numeric: tabular-nums; } .svc__name { font-size: clamp(1.5rem, 3.6vw, 3.1rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: rgba(255,255,255,.72); transition: color .4s; } .svc__row:hover .svc__name { color: var(--acid); } .svc__tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 42ch; } .tag { font-size: .72rem; padding: 6px 12px; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); white-space: nowrap; } @media (max-width: 760px) { .svc__row { grid-template-columns: 44px 1fr; } .svc__tags { grid-column: 2; justify-content: flex-start; } } /* Full-width service list — one name per line, set big, number to the right. Sized so the longest name ("Graphic Design & Brand Creation") holds one line on a desktop width; below that it wraps rather than shrinking further. */ .svcbig { border-top: 1px solid var(--line); } .svcbig__row { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: clamp(14px, 2.4vw, 40px); padding: clamp(20px, 2.6vw, 38px) 0; border-bottom: 1px solid var(--line); transition: padding-inline .5s var(--ease); } .svcbig__row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,.1), transparent 60%); opacity: 0; transition: opacity .5s; } .svcbig__row:hover::before { opacity: 1; } .svcbig__row:hover { padding-inline: clamp(10px, 1.6vw, 26px); } a.svcbig__row { cursor: pointer; } .svcbig__lead { display: flex; align-items: baseline; gap: clamp(12px, 1.6vw, 22px); flex-wrap: wrap; } .svcbig__name { font-size: clamp(1.55rem, 4.5vw, 4.1rem); font-weight: 800; letter-spacing: -.04em; /* lowercase has descenders, so it needs a touch more room than the caps did */ line-height: 1.04; color: rgba(255, 255, 255, .82); transition: color .4s; } .svcbig__row:hover .svcbig__name { color: var(--acid); } .svcbig__num { flex: none; font-size: .78rem; color: var(--muted-2); letter-spacing: .1em; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------- 13. Sticky / pinned + horizontal scroll --------------------------------------------------------- */ .pin { position: relative; } .pin__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; } .hscroll__track { display: flex; gap: clamp(20px, 3vw, 52px); padding-inline: var(--gut); will-change: transform; } .hcard { flex: none; width: clamp(280px, 34vw, 520px); display: flex; flex-direction: column; gap: 18px; } .hcard__media { aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; position: relative; background: var(--ink-3); } .hcard__media img, .hcard__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .hcard:hover .hcard__media img, .hcard:hover .hcard__media video { transform: scale(1.06); } .hcard__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%); } .hcard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .hcard__meta h3 { font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 650; letter-spacing: -.02em; } .hcard__meta span { font-size: .76rem; color: var(--muted); white-space: nowrap; } /* sticky intro card that sits before horizontal cards */ .hintro { flex: none; width: clamp(260px, 30vw, 420px); align-self: center; } /* --------------------------------------------------------- 14. Work list w/ cursor-following preview --------------------------------------------------------- */ .worklist { border-top: 1px solid var(--line); position: relative; } .worklist__row { display: grid; grid-template-columns: 1fr auto auto; gap: clamp(14px, 3vw, 40px); align-items: center; padding: clamp(22px, 2.8vw, 38px) 0; border-bottom: 1px solid var(--line); position: relative; transition: padding-inline .5s var(--ease); } .worklist__row:hover { padding-inline: clamp(8px, 1.4vw, 22px); } .worklist__row h3 { font-size: clamp(1.5rem, 4.2vw, 3.4rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; color: rgba(255,255,255,.72); transition: color .4s; } .worklist__row:hover h3 { color: var(--acid); } .worklist__row .cat { font-size: .8rem; color: var(--muted); } .worklist__row .yr { font-size: .8rem; color: var(--muted-2); font-variant-numeric: tabular-nums; } .preview { position: fixed; top: 0; left: 0; z-index: 800; width: 300px; height: 380px; border-radius: 6px; overflow: hidden; margin: -190px 0 0 -150px; pointer-events: none; opacity: 0; transform: scale(.85) rotate(-6deg); transition: opacity .45s var(--ease), transform .55s var(--ease); } .preview.is-on { opacity: 1; transform: scale(1) rotate(-3deg); } .preview img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .preview { display: none; } .worklist__row { grid-template-columns: 1fr auto; } } /* --------------------------------------------------------- 15. Cards / stats / quotes --------------------------------------------------------- */ .card { border: 1px solid var(--line); border-radius: 10px; padding: clamp(22px, 2.4vw, 38px); background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0)); position: relative; overflow: hidden; isolation: isolate; transition: border-color .45s, transform .6s var(--ease), opacity .9s var(--ease); will-change: transform; } .card::after { content: ''; position: absolute; z-index: -1; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); left: var(--mx, 50%); top: var(--my, 50%); transform: translate(-50%, -50%); opacity: 0; transition: opacity .4s; pointer-events: none; } .card:hover { border-color: rgba(255,255,255,.4); } .card:hover::after { opacity: 1; } .card__k { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; } .card__k sup { font-size: .38em; vertical-align: super; color: var(--acid); } .card p { color: var(--muted); font-size: .95rem; margin-top: 12px; } .quote { font-size: clamp(1.4rem, 3.2vw, 2.7rem); line-height: 1.16; letter-spacing: -.03em; font-weight: 550; max-width: 22ch; } .quote__by { display: flex; align-items: center; gap: 14px; margin-top: 32px; font-size: .86rem; color: var(--muted); } .quote__by b { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #2E2E2E, #FFFFFF); flex: none; } /* logo grid (clients). Only the top and left edges are drawn on the container — every cell draws its own right and bottom border. That way the grid closes itself no matter how many names there are, and a part-filled last row simply ends rather than framing an empty tile. Add or remove names freely. */ .logogrid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .logogrid > div { aspect-ratio: 16 / 10; display: grid; place-items: center; position: relative; text-align: center; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: clamp(.9rem, 1.4vw, 1.25rem); font-weight: 650; letter-spacing: -.02em; color: rgba(255,255,255,.4); transition: color .4s, background-color .5s; overflow: hidden; isolation: isolate; } .logogrid > div::before { content: ''; position: absolute; inset: 0; background: var(--acid); transform: translateY(101%); transition: transform .55s var(--ease); z-index: -1; } .logogrid > div:hover { color: var(--ink); } .logogrid > div:hover::before { transform: translateY(0); } /* cells with a photo behind the name */ .logogrid > div.is-photo { color: var(--paper); } .logogrid > div.is-photo::before { display: none; } /* no white sweep over a photo */ .logogrid > div.is-photo:hover { color: var(--paper); } .logogrid img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: brightness(.34) saturate(.55) contrast(1.05); transform: scale(1.02); transition: filter .55s var(--ease), transform .9s var(--ease); } .logogrid > div.is-photo:hover img { filter: brightness(.78) saturate(1) contrast(1); transform: scale(1.08); } .logogrid > div span { position: relative; z-index: 1; } .logogrid > div.is-photo span { text-shadow: 0 1px 14px rgba(0, 0, 0, .75); } @media (max-width: 1100px) { .logogrid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .logogrid { grid-template-columns: repeat(2, 1fr); } } /* --------------------------------------------------------- 16. Portfolio grid --------------------------------------------------------- */ .filters { display: flex; gap: 10px; flex-wrap: wrap; } .filter { padding: 10px 18px; border: 1px solid var(--line); border-radius: 100px; font-size: .82rem; color: var(--muted); transition: .35s var(--ease); } .filter:hover { color: var(--paper); border-color: var(--muted); } .filter.is-on { background: var(--acid); color: var(--ink); border-color: var(--acid); } .pgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 2.4vw, 40px); } .pitem { grid-column: span 6; transition: opacity .5s, transform .5s, filter .5s; } .pitem[hidden] { display: none; } .pitem.is-dim { opacity: .12; filter: grayscale(1); } .pitem--tall { grid-column: span 5; } .pitem--wide { grid-column: span 7; } .pitem--full { grid-column: span 12; } .pitem--third { grid-column: span 4; } /* three across */ /* a whole card can be a link (the Instagram cards on the portfolio page) */ .pitem > a { display: block; color: inherit; text-decoration: none; } .pitem__media { overflow: hidden; border-radius: 6px; position: relative; background: var(--ink-3); } /* video is styled identically to img so work clips drop into the grid unchanged */ .pitem__media img, .pitem__media video { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; transition: transform 1.1s var(--ease); } .pitem--wide .pitem__media img, .pitem--full .pitem__media img, .pitem--wide .pitem__media video, .pitem--full .pitem__media video { aspect-ratio: 16/9; } .pitem:hover .pitem__media img, .pitem:hover .pitem__media video { transform: scale(1.05); } .pitem__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; } .pitem__bar h3 { font-size: clamp(1.05rem, 1.6vw, 1.5rem); font-weight: 650; letter-spacing: -.02em; } .pitem__bar span { font-size: .78rem; color: var(--muted); } .pitem__play { position: absolute; inset: auto 16px 16px auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); display: grid; place-items: center; font-size: .7rem; letter-spacing: .08em; border: 1px solid var(--line); transform: scale(0); transition: transform .5s var(--ease); } .pitem:hover .pitem__play { transform: scale(1); } /* thirds step down to halves before stacking, rather than 3 across then 1 */ @media (max-width: 1100px) { .pitem--third { grid-column: span 6; } } @media (max-width: 820px) { .pitem, .pitem--tall, .pitem--wide, .pitem--full { grid-column: span 12; } /* The portfolio grids keep two across on phones. Stacked full-width, twelve 4:5 cards made that page ~7250px tall; two across roughly halves it and a gallery is easier to scan in a grid anyway. */ .pitem--third { grid-column: span 6; } .pitem--third .pitem__bar { flex-direction: column; align-items: flex-start; gap: 2px; } .pitem--third .pitem__bar h3 { font-size: .95rem; } .pitem--third .pitem__bar span { font-size: .72rem; } } /* --------------------------------------------------------- 17. Contact --------------------------------------------------------- */ .field { position: relative; border-bottom: 1px solid var(--line); padding-top: 26px; transition: border-color .4s; } .field label { position: absolute; left: 0; top: 26px; font-size: 1rem; color: var(--muted); transition: .45s var(--ease); pointer-events: none; } .field input, .field textarea { width: 100%; padding: 6px 0 16px; font-size: 1.05rem; outline: none; resize: none; } .field textarea { min-height: 120px; } .field.is-filled label, .field:focus-within label { top: 2px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acid); } .field:focus-within { border-bottom-color: var(--acid); } .chips { display: flex; gap: 10px; flex-wrap: wrap; } .chips input { position: absolute; opacity: 0; pointer-events: none; } .chips label { padding: 11px 18px; border: 1px solid var(--line); border-radius: 100px; font-size: .84rem; color: var(--muted); cursor: pointer; transition: .35s var(--ease); display: inline-block; } .chips input:checked + label { background: var(--acid); color: var(--ink); border-color: var(--acid); } .chips label:hover { border-color: var(--muted); color: var(--paper); } .contact-big { font-size: clamp(1.6rem, 4.6vw, 4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; display: inline-block; position: relative; } .contact-big::after { content: ''; position: absolute; left: 0; bottom: .04em; height: 2px; width: 100%; background: var(--acid); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--ease); } .contact-big:hover::after { transform: scaleX(1); transform-origin: 0 50%; } .formnote { font-size: .8rem; color: var(--muted-2); } /* only takes up space once the JS puts a message in it */ .form-error { font-size: .9rem; color: var(--coral, #ff6b5e); margin-top: 20px; } .form-error:empty { display: none; } .form-success { border: 1px solid var(--acid); border-radius: 10px; padding: 22px 26px; background: rgba(255,255,255,.06); display: none; } .form-success.is-on { display: block; animation: popIn .6s var(--ease); } @keyframes popIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------- 18. CTA + footer --------------------------------------------------------- */ .cta { position: relative; overflow: hidden; text-align: center; padding-block: clamp(100px, 18vh, 220px); } .cta__big { font-size: clamp(2.25rem, 7.4vw, 8.1rem); line-height: .85; font-weight: 800; letter-spacing: -.05em; text-transform: capitalize; } .cta__big em { font-style: italic; font-variation-settings: 'wght' 500; -webkit-text-stroke: 1px var(--paper); color: transparent; } .footer { border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 80px) 34px; position: relative; z-index: 1; } .footer a:hover { color: var(--acid); } .footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; } .footer h4 { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; font-weight: 600; } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: .92rem; color: var(--muted); } .footer__bot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--line-soft); font-size: .78rem; color: var(--muted-2); } .footer__mark { width: 34px; opacity: .8; margin-bottom: 20px; } @media (max-width: 900px) { .footer__cols { grid-template-columns: 1fr 1fr; } } /* At 375px, two columns leaves ~150px per cell and the brand blurb wraps to two words a line. Give it the full width and let the link lists share a row. */ @media (max-width: 560px) { .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; } .footer__cols > :first-child { grid-column: 1 / -1; } .footer__cols > :first-child .body { max-width: none; } } /* page header (inner pages) */ .phead { padding-top: calc(var(--nav-h) + clamp(70px, 14vh, 170px)); padding-bottom: clamp(40px, 7vh, 90px); position: relative; z-index: 1; } .phead__meta { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 34px; font-size: .82rem; color: var(--muted); } /* misc */ .stack { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 26px); } .row-between { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; } .sticky-col { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; } .bar-line { height: 1px; background: var(--line); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--ease); } .bar-line.is-in { transform: scaleX(1); } .num-lg { font-size: clamp(3rem, 9vw, 8rem); font-weight: 800; letter-spacing: -.05em; line-height: .85; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------- 19. Monochrome imagery The placeholder images ship in greyscale. When you drop in real colour photography, uncomment this to keep the site fully black and white. --------------------------------------------------------- */ /* .mask > img, .mask > video, .hcard__media img, .pitem__media img, .chip img, .preview img { filter: grayscale(1) contrast(1.05); } */ /* --------------------------------------------------------- 20. Phones The desktop rhythm is generous on purpose; at 375px the same values turned the home page into roughly ten screens of scroll, most of it padding. These tighten it without changing the design. --------------------------------------------------------- */ @media (max-width: 820px) { /* Section rhythm. Desktop is 13vh top AND bottom — ~211px per section on an 812px phone. 7vh still left ~114px between adjacent sections, so this goes tighter again: ~71px between sections. */ :root { --sec: clamp(34px, 4.4vh, 60px); } .cta { padding-block: clamp(44px, 5.5vh, 76px); } .phead { padding-top: calc(var(--nav-h) + clamp(44px, 8vh, 90px)); padding-bottom: clamp(24px, 4vh, 52px); } /* The pinned sideways scroll becomes a native swipe. Pinned, it needed ~2200px of vertical scroll to travel ~1400px sideways — nearly three screens of scrolling to see five cards. horizontal() in site.js stops setting a height below this same width. */ .pin { height: auto !important; } .pin__stage { position: static; height: auto; overflow: visible; display: block; } .hscroll__track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-block: 4px; } .hscroll__track::-webkit-scrollbar { display: none; } .hscroll__track > * { scroll-snap-align: start; flex: 0 0 auto; } /* Hero headline runs larger on phones only. The shared .display clamp bottoms out at 2.25rem, which leaves the headline small against a full-height hero. Desktop keeps the original clamp — this override lives inside the media query on purpose. */ .hero .display { font-size: clamp(3.1rem, 13.5vw, 4.6rem); } /* "Who we are" on phones. The copy column stops sticking — stuck, it held still while the pictures slid past it, which read as the images moving on their own. .sticky-col elsewhere (the contact form) is left alone. */ .wwa__text { position: static; } /* The two portraits sat side by side on desktop but stacked full width here, 419px tall each. Two across brings them back to a sensible size, and the 12% offset that staggers them on desktop just misaligns them once they are a pair again. */ .wwa__media .g-2 { grid-template-columns: 1fr 1fr; gap: 12px; } .wwa__media .g-2 > .mask { margin-top: 0 !important; } /* Contact page: the intro column (text + video) stops sticking, same reason as .wwa__text above — pinned, the rest of the page scrolled past it and the form appeared to slide up over the video. Desktop keeps .sticky-col's normal behaviour. */ .contact__intro { position: static; } }