/* ============================================================ MAC Engineering — Design System Light editorial direction · corporate serif display · logo gold & burgundy ============================================================ */ :root { color-scheme: light; --background: oklch(1 0 0); --foreground: oklch(0.18 0 0); --card: oklch(0.985 0 0); /* Logo gold — MAC wordmark #A88645 */ --primary: oklch(0.6386 0.0932 81.95); --primary-foreground: oklch(1 0 0); /* Logo burgundy — roof & brush strokes #7A222F */ --accent: oklch(0.3952 0.1212 16.30); --accent-foreground: oklch(1 0 0); --muted: oklch(0.965 0 0); --muted-foreground: oklch(0.5 0 0); --border: oklch(0.912 0 0); --hairline: oklch(0.9 0 0); --radius: 0; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-serif: "Arvo", ui-serif, Georgia, "Times New Roman", serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ----------------------------- Reset ----------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; background-color: var(--background); -webkit-text-size-adjust: 100%; /* belt-and-braces against sideways scroll from x-offset reveals on browsers that ignore overflow-x on */ overflow-x: clip; } /* Fluid viewport scale — every size in this stylesheet is in rem, so scaling the root font-size with the viewport scales the entire design like a canvas. Above the 1440px design width the page grows proportionally and always fills the screen edge to edge. */ @media (min-width: 1440px) { html { font-size: calc(100vw / 90); /* = 16px at a 1440px viewport */ } } body { font-family: var(--font-sans); background-color: var(--background); color: var(--foreground); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.04; text-wrap: balance; } em { font-style: italic; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------- Utilities --------------------------- */ /* Full-bleed layout — no max-width cap; content spans the viewport with generous side padding, which scales with the fluid root font-size. */ .container { width: 100%; padding-inline: 1.5rem; } @media (min-width: 768px) { .container { padding-inline: 4rem; } } @media (min-width: 1200px) { .container { padding-inline: 6rem; } } .eyebrow { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-foreground); } /* Logo gable — the burgundy roof over MAC, reduced to a shallow inverted-V. Wide angle (~24°) so it reads as architecture, not a UI chevron. Colour follows the logo: burgundy on light, gold-tinted white over photography. */ .eyebrow .rule { display: block; flex-shrink: 0; width: 2.85rem; height: 0.72rem; overflow: visible; color: var(--accent); } .eyebrow .rule path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .eyebrow--light { color: color-mix(in oklch, white 82%, transparent); } .eyebrow--light .rule { color: color-mix(in oklch, white 72%, var(--primary)); } .section { padding-block: 4rem; } /* keep anchored sections clear of the fixed header */ main section[id] { scroll-margin-top: 4.5rem; } @media (min-width: 768px) { .section { padding-block: 5.5rem; } } .section-title { font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem); margin-top: 1.25rem; max-width: 42rem; } /* Scroll animations & reveals are driven by GSAP + ScrollTrigger (see script.js). GSAP applies inline styles, and when it is unavailable or reduced motion is preferred, no hidden state is set so all content stays visible. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------------------- Scroll storytelling ---------------------- */ /* Reading progress bar — fills left to right as the page is scrolled. Starts at scaleX(0), so it stays invisible when GSAP doesn't run. */ .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100; pointer-events: none; } .scroll-progress__bar { display: block; height: 100%; background-color: var(--accent); transform: scaleX(0); transform-origin: left; } /* word s created by the headline splitter in script.js */ .word { display: inline-block; } /* character s created by the careers letter-splitter in script.js */ .char { display: inline-block; } /* `gsap-anim` is set on when GSAP is active: native CSS smooth-scroll is disabled so Lenis can drive the page, and parallax images get extra height so they can drift without exposing gaps. */ html.gsap-anim { scroll-behavior: auto; } /* Lenis smooth scroll (see script.js) — Lenis toggles these classes on . `lenis-stopped` locks the page while the preloader is up. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } html.gsap-anim .hero__bg img, html.gsap-anim .careers__bg img, html.gsap-anim .project__media img, html.gsap-anim .news__media img { height: 140%; } /* ----------------------------- Buttons --------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.95rem 1.6rem; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .btn .icon { width: 1rem; height: 1rem; transition: transform 0.3s var(--ease); } .btn-primary { background-color: var(--accent); color: var(--accent-foreground); } .btn-primary:hover { background-color: color-mix(in oklch, var(--accent) 88%, black); } .btn-primary:hover .icon { transform: translate(2px, -2px); } /* ghost button lives on the dark hero */ .btn-ghost { border-color: color-mix(in oklch, white 55%, transparent); color: white; } .btn-ghost:hover { background-color: white; color: var(--foreground); } /* ----------------------------- Header ---------------------------- */ /* Default: header sits over the hero and scrolls away with it */ .header { position: absolute; inset: 0 0 auto 0; z-index: 50; background-color: transparent; border-bottom: 1px solid transparent; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); } .header__bar { display: flex; height: 5rem; align-items: center; justify-content: space-between; transition: height 0.3s var(--ease); } .brand { display: flex; align-items: center; } .brand__logo { display: block; height: 3.75rem; width: auto; transition: height 0.3s var(--ease); } .nav { display: none; align-items: center; gap: 1.9rem; } .nav a { position: relative; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklch, white 78%, transparent); transition: color 0.25s var(--ease); } /* underline grows from the centre outward — quieter, more considered */ .nav a::after { content: ""; position: absolute; left: 50%; bottom: -0.4rem; width: 0; height: 1px; background-color: var(--accent); transform: translateX(-50%); transition: width 0.35s var(--ease); } .nav a:hover, .nav a.active { color: white; } .nav a:hover::after, .nav a.active::after { width: 100%; } /* right-hand cluster: social icons · hairline · contact button */ .header__actions { display: none; align-items: center; gap: 1.1rem; } .header__social { display: flex; align-items: center; gap: 0.25rem; } .header__social a { display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; border-radius: 999px; color: color-mix(in oklch, white 70%, transparent); transition: color 0.25s var(--ease), background-color 0.25s var(--ease); } .header__social a:hover { color: white; background-color: color-mix(in oklch, white 14%, transparent); } .header__social svg { width: 0.95rem; height: 0.95rem; } .header__divider { width: 1px; height: 1.35rem; background-color: color-mix(in oklch, white 30%, transparent); } /* quiet outlined button — present but never louder than the content */ .header__cta { display: inline-flex; align-items: center; gap: 0.5rem; background-color: transparent; border: 1px solid color-mix(in oklch, white 35%, transparent); padding: 0.6rem 1.2rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklch, white 85%, transparent); transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .header__cta:hover { color: white; border-color: color-mix(in oklch, white 75%, transparent); } /* Stuck state — becomes fixed and drops in once the hero is passed */ .header.scrolled { position: fixed; background-color: color-mix(in oklch, var(--background) 90%, transparent); border-bottom-color: var(--border); backdrop-filter: blur(14px); animation: headerDrop 0.55s var(--ease); } /* Backdrop blur is a continuous compositor tax while the header is stuck. Phones skip it and use a solid fill instead. */ @media (max-width: 767px) { .header.scrolled { backdrop-filter: none; background-color: var(--background); } } @keyframes headerDrop { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .header.scrolled { animation: none; } } .header.scrolled .header__bar { height: 3.25rem; } .header.scrolled .brand__logo { height: 2.4rem; } .header.scrolled .nav a { color: var(--muted-foreground); } .header.scrolled .nav a:hover, .header.scrolled .nav a.active { color: var(--foreground); } .header.scrolled .header__social a { color: var(--muted-foreground); } .header.scrolled .header__social a:hover { color: var(--accent); background-color: color-mix(in oklch, var(--accent) 10%, transparent); } .header.scrolled .header__divider { background-color: var(--border); } .header.scrolled .header__cta { border-color: var(--border); color: var(--muted-foreground); } .header.scrolled .header__cta:hover { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 55%, var(--border)); } .header.scrolled .menu-toggle { color: var(--foreground); border-color: var(--border); } .menu-toggle { display: inline-flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border: 1px solid color-mix(in oklch, white 45%, transparent); color: white; background: transparent; cursor: pointer; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .menu-toggle svg { width: 1.1rem; height: 1.1rem; } .menu-toggle .icon-close { display: none; } .menu-toggle[aria-expanded="true"] .icon-open { display: none; } .menu-toggle[aria-expanded="true"] .icon-close { display: block; } .mobile-nav { display: none; border-top: 1px solid var(--border); background-color: var(--background); /* on short (landscape) phones the menu is taller than the screen — 3.25rem is the compact header bar height above it */ max-height: calc(100dvh - 3.25rem); overflow-y: auto; overscroll-behavior: contain; } .mobile-nav.open { display: block; } .mobile-nav__list { display: flex; flex-direction: column; padding: 0.5rem 1.5rem 1.5rem; } .mobile-nav__list a { border-bottom: 1px solid var(--border); padding-block: 0.9rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--foreground); } .mobile-nav__list a:last-child { border-bottom: 0; } .mobile-nav__cta { margin-top: 1.25rem; justify-content: center; background-color: var(--accent); color: var(--accent-foreground); padding: 0.9rem 1rem; } .mobile-nav__social { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1.25rem; } .mobile-nav__list .mobile-nav__social a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .mobile-nav__list .mobile-nav__social a:hover { color: var(--accent); border-color: var(--accent); } .mobile-nav__social svg { width: 1.1rem; height: 1.1rem; } @media (min-width: 900px) { /* logo left · nav dead-centre · socials + contact right */ .header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .brand { justify-self: start; } .nav { display: flex; justify-self: center; } .header__actions { display: flex; justify-self: end; } .menu-toggle { display: none; } .mobile-nav { display: none !important; } } /* ------------------------------ Hero ----------------------------- */ .hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; } .hero__bg { position: absolute; inset: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in oklch, black 72%, transparent), color-mix(in oklch, black 30%, transparent) 45%, color-mix(in oklch, black 12%, transparent) 70%, color-mix(in oklch, black 28%, transparent) ); } .hero__inner { position: relative; width: 100%; padding-block: 6.5rem 4rem; } .hero__content { max-width: 46rem; } .hero__title { color: white; font-size: clamp(1.875rem, 1.25rem + 2.4vw, 3rem); line-height: 1.08; margin-top: 1.5rem; } .hero__title em { color: color-mix(in oklch, var(--primary) 55%, white); } .hero__lead { margin-top: 1.5rem; max-width: 32rem; font-size: 1rem; line-height: 1.6; color: color-mix(in oklch, white 82%, transparent); text-wrap: pretty; } .hero__stats { margin-top: 2.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: 100%; border-top: 1px solid color-mix(in oklch, white 30%, transparent); } .hero__stat { padding: 1.25rem 1.25rem 0.25rem; border-left: 1px solid color-mix(in oklch, white 16%, transparent); } /* first column has no left divider (2-col layout) */ .hero__stat:nth-child(odd) { border-left: 0; padding-left: 0; } .hero__stat dt { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); line-height: 1; letter-spacing: -0.02em; color: white; } .hero__stat dt span { font-size: 0.5em; margin-left: 0.15em; color: color-mix(in oklch, var(--primary) 55%, white); } .hero__stat dd { margin-top: 0.5rem; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.04em; line-height: 1.45; color: color-mix(in oklch, white 78%, transparent); } @media (min-width: 768px) { .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* reset odd-child rule, then strip only the first item's divider */ .hero__stat:nth-child(odd) { border-left: 1px solid color-mix(in oklch, white 16%, transparent); padding-left: 1.25rem; } .hero__stat:first-child { border-left: 0; padding-left: 0; } } .hero__scroll { position: absolute; right: 1.5rem; bottom: 2.5rem; z-index: 2; display: none; flex-direction: column; align-items: center; gap: 0.6rem; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in oklch, white 80%, transparent); } .hero__scroll svg { width: 1.1rem; height: 1.1rem; animation: nudge 1.8s var(--ease) infinite; } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @media (min-width: 768px) { .hero__scroll { display: flex; right: 4rem; } } @media (min-width: 1200px) { .hero__scroll { right: 6rem; } } @media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } } /* -------------------------- Section head ------------------------- */ .section-head { display: flex; flex-direction: column; gap: 1.5rem; } .section-head__note { max-width: 24rem; font-size: 0.9375rem; line-height: 1.65; color: var(--muted-foreground); text-wrap: pretty; } .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--foreground); transition: color 0.25s var(--ease); } .link-arrow .icon { width: 1rem; height: 1rem; transition: transform 0.3s var(--ease); } .link-arrow:hover { color: var(--accent); } .link-arrow:hover .icon { transform: translate(2px, -2px); } @media (min-width: 768px) { .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } } /* ----------------------------- Careers --------------------------- */ .careers { position: relative; isolation: isolate; overflow: hidden; background-color: var(--foreground); color: var(--background); padding-block: 5.5rem; } @media (min-width: 768px) { .careers { padding-block: 7.5rem; } } .careers__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .careers__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: grayscale(1) contrast(1.12); } .careers__scrim { position: absolute; inset: 0; background: linear-gradient( to right, color-mix(in oklch, black 78%, transparent), color-mix(in oklch, black 62%, transparent) 48%, color-mix(in oklch, black 52%, transparent) ), linear-gradient( to top, color-mix(in oklch, black 42%, transparent), transparent 42%, color-mix(in oklch, black 28%, transparent) ); } .careers__inner { position: relative; z-index: 1; display: grid; gap: 2.5rem; } @media (min-width: 768px) { .careers__inner { grid-template-columns: 1fr auto; align-items: end; gap: 4rem; } } .careers__title { margin-top: 1.25rem; font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.5rem); color: var(--background); max-width: 34rem; } .careers__title em { color: color-mix(in oklch, var(--primary) 55%, white); } .careers__lead { margin-top: 1.25rem; max-width: 36rem; font-size: 0.9375rem; line-height: 1.65; color: color-mix(in oklch, white 72%, transparent); text-wrap: pretty; } .careers__btn { justify-self: start; } /* White space between the What We Do story and the portfolio below it */ #projects { padding-top: 7rem; } @media (min-width: 768px) { #projects { padding-top: 9.5rem; } } /* ------------------------- Capabilities -------------------------- */ /* Decorative diagonal strip — a soft band of gold light sweeping behind the cards, feathered on every edge so it melts into the page, traced by two delicate drafting hairlines that fade in and out along their length. */ .section--strip { position: relative; overflow: hidden; } .section--strip .container { position: relative; } .cap-strip { position: absolute; inset: 0; pointer-events: none; } .cap-strip__band, .cap-strip__echo { position: absolute; left: -10%; right: -10%; transform: rotate(-5deg); } /* reversed variant — the band sweeps the opposite way */ .cap-strip--reverse .cap-strip__band, .cap-strip--reverse .cap-strip__echo { transform: rotate(5deg); } /* feathered wash of light — no hard edges anywhere */ .cap-strip__band { top: 42%; height: 20rem; background: linear-gradient( 180deg, transparent, color-mix(in oklch, var(--primary) 10%, transparent) 32%, color-mix(in oklch, var(--primary) 16%, transparent) 50%, color-mix(in oklch, var(--primary) 10%, transparent) 68%, transparent ); -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); } /* two parallel hairlines, like faint guides on a drafting sheet */ .cap-strip__echo { top: 38%; height: 12rem; } .cap-strip__echo::before, .cap-strip__echo::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; } .cap-strip__echo::before { top: 0; background: linear-gradient( 90deg, transparent 8%, color-mix(in oklch, var(--primary) 42%, transparent) 40%, color-mix(in oklch, var(--primary) 42%, transparent) 60%, transparent 92% ); } .cap-strip__echo::after { bottom: 0; background: linear-gradient( 90deg, transparent 2%, color-mix(in oklch, var(--primary) 28%, transparent) 30%, color-mix(in oklch, var(--primary) 28%, transparent) 78%, transparent 98% ); } @media (min-width: 768px) { .cap-strip__band { height: 26rem; } .cap-strip__echo { height: 17rem; } } /* tall variant — fixed-height bands get diluted in tall sections (e.g. Projects), so size the strip relative to the section instead to keep the same visual weight as in shorter sections. */ .cap-strip--tall .cap-strip__band { top: 38%; height: 46%; } .cap-strip--tall .cap-strip__echo { top: 34%; height: 32%; } /* Projects strips — two tapering wedges drawn as SVG polygons: each starts wide at the left edge and narrows to a point near the right edge, the pair crossing in the middle of the section. Fills are a faint gold wash and the edges carry hairlines, matching the drafting-sheet look. */ .projects-strips { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .projects-strips svg { display: block; width: 100%; height: 100%; } .projects-strips polygon { fill: color-mix(in oklch, var(--primary) 5%, transparent); stroke: color-mix(in oklch, var(--primary) 30%, transparent); stroke-width: 1px; } .cap-grid { margin-top: 3rem; display: grid; gap: 1.5rem; } @media (min-width: 640px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } } /* four-up only on wide screens so each card keeps real presence */ @media (min-width: 1200px) { .cap-grid { grid-template-columns: repeat(4, 1fr); } } .cap { position: relative; overflow: hidden; border: 1px solid var(--border); background-color: var(--card); padding: 2.5rem 1.75rem 2.25rem; transition: border-color 0.4s var(--ease), translate 0.4s var(--ease), box-shadow 0.4s var(--ease), background-color 0.4s var(--ease); } /* full-width accent bar sweeps across the top on hover */ .cap::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background-color: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); } .cap:hover { border-color: color-mix(in oklch, var(--primary) 45%, var(--border)); background-color: color-mix(in oklch, var(--primary) 5%, var(--card)); /* `translate` (not `transform`) so the lift composes with the inline transform GSAP's scrubbed reveal leaves on the card */ translate: 0 -6px; box-shadow: 0 26px 50px -28px color-mix(in oklch, var(--primary) 55%, transparent); } .cap:hover::before { transform: scaleX(1); } .cap__id { position: absolute; top: 1.4rem; right: 1.4rem; z-index: 2; font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; line-height: 1; color: color-mix(in oklch, var(--primary) 34%, transparent); transition: color 0.35s var(--ease), transform 0.35s var(--ease); } .cap:hover .cap__id { color: var(--primary); transform: translateY(-2px); } /* filled gold chip by default — logo wordmark colour */ .cap__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; background-color: color-mix(in oklch, var(--primary) 12%, var(--card)); color: var(--primary); transition: background-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.4s var(--ease); } .cap:hover .cap__icon { background-color: var(--accent); color: var(--accent-foreground); transform: rotate(-6deg) scale(1.06); } .cap__icon svg { width: 1.625rem; height: 1.625rem; } .cap__title { margin-top: 1.4rem; font-size: 1.0625rem; letter-spacing: -0.01em; } .cap__desc { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.7; color: var(--muted-foreground); text-wrap: pretty; } .cap__shot { display: block; margin: 1.35rem -1.75rem 0; overflow: hidden; aspect-ratio: 16 / 10; background-color: var(--muted); } .cap__shot img { width: 100%; height: 100%; object-fit: cover; display: block; /* standalone `scale` so hover zoom composes with the GSAP Ken Burns transform */ transition: scale 0.9s var(--ease); } .cap:hover .cap__shot img { scale: 1.05; } @media (prefers-reduced-motion: reduce) { .cap:hover .cap__shot img { scale: 1; } } /* ------------- What We Do: horizontal scroll storytelling ------------- */ /* On wide screens script.js adds .is-horizontal, pins the section to the viewport and drives .cap-grid sideways with the scroll. Everything here is gated behind that class, so without JS (or with reduced motion) the vertical grid above is what renders. */ .cap-progress { display: none; } #capabilities.is-horizontal { display: flex; flex-direction: column; justify-content: center; height: 100vh; height: 100svh; padding-block: 0; /* clear the fixed header while pinned; on shorter viewports the clearance is bought with svh so the pinned content always fits */ padding-top: min(6.5rem, 9svh); scroll-margin-top: 0; /* anchor straight to the pin start */ } #capabilities.is-horizontal .cap-grid { /* positioned so each card's offsetLeft reads relative to the track — script.js uses it to clamp animation end-points for the last cards */ position: relative; display: flex; align-items: stretch; width: max-content; gap: 1.5rem; margin-top: min(2rem, 3svh); will-change: transform; } /* Compact chapter card: photograph on top, copy below. Kept narrow so two-to-three chapters share the viewport at once — the pinned scroll distance equals the track width, so slimmer cards mean a much shorter horizontal journey. */ #capabilities.is-horizontal .cap { display: flex; flex-direction: column; flex: 0 0 auto; width: clamp(18rem, 23vw, 22rem); padding: 0 1.5rem min(1.5rem, 2.4svh); } /* alternating offsets give the row an editorial, skyline rhythm */ #capabilities.is-horizontal .cap:nth-child(odd) { margin-bottom: min(1rem, 1.6svh); } #capabilities.is-horizontal .cap:nth-child(even) { margin-top: min(1rem, 1.6svh); } /* the photograph leads the card, bleeding to its edges; max-height keeps the pinned 100svh section from overflowing on short laptop screens */ #capabilities.is-horizontal .cap__shot { order: -1; margin: 0 -1.5rem 0; aspect-ratio: 16 / 10; height: auto; max-height: 28vh; width: calc(100% + 3rem); border-bottom: 1px solid var(--border); } #capabilities.is-horizontal .cap__icon { width: 2.75rem; height: 2.75rem; margin-top: min(1.25rem, 2svh); } #capabilities.is-horizontal .cap__icon svg { width: 1.375rem; height: 1.375rem; } #capabilities.is-horizontal .cap__title { margin-top: 0.9rem; font-size: 1.0625rem; } #capabilities.is-horizontal .cap__desc { margin-top: 0.55rem; font-size: 0.875rem; line-height: 1.6; } #capabilities.is-horizontal .cap__shot img { will-change: transform; } /* chapter index sits on the photograph */ #capabilities.is-horizontal .cap__id { color: color-mix(in oklch, white 86%, var(--primary)); text-shadow: 0 1px 18px rgb(0 0 0 / 0.42); } #capabilities.is-horizontal .cap-progress { display: flex; align-items: center; gap: 1.5rem; margin-top: min(2rem, 2.5svh); } .cap-progress__count { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1; color: var(--muted-foreground); white-space: nowrap; } .cap-progress__count-current { color: var(--primary); } .cap-progress__rail { position: relative; flex: 1; height: 2px; overflow: hidden; background-color: var(--hairline); } .cap-progress__fill { position: absolute; inset: 0; background-color: var(--accent); transform: scaleX(0); transform-origin: left center; } .cap-progress__hint { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-foreground); white-space: nowrap; } /* --------------------------- Projects ---------------------------- */ .project { display: block; color: inherit; } .project__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background-color: var(--muted); } /* hover zoom uses the standalone `scale` property so it composes with the GSAP parallax transform applied inline on the same image */ .project__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease); } .project:hover .project__media img { scale: 1.06; } .project__caption { padding-top: 1.25rem; } .project__meta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .project__meta span { font-family: var(--font-sans); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); border: 1px solid var(--border); padding: 0.35rem 0.6rem; } /* CTA tile that fills the grid instead of leaving it empty */ .project--cta { display: flex; align-items: stretch; background-color: var(--foreground); color: var(--background); } .project__cta-inner { display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; padding: 2.5rem 2rem; } .project--cta .project__type { color: color-mix(in oklch, var(--primary) 55%, white); } .project--cta .project__title { color: var(--background); } .project--cta .project__note { color: color-mix(in oklch, white 72%, transparent); } .project--cta .link-arrow { margin-top: 0.5rem; color: var(--background); } .project--cta:hover .link-arrow { color: color-mix(in oklch, var(--primary) 55%, white); } .project--cta:hover .link-arrow .icon { transform: translate(2px, -2px); } .project__type { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .project__title { margin-top: 0.6rem; font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.25rem); letter-spacing: -0.015em; transition: color 0.25s var(--ease); } .project:hover .project__title { color: var(--primary); } .project__note { margin-top: 0.75rem; max-width: 36rem; font-size: 0.9375rem; line-height: 1.6; color: var(--muted-foreground); text-wrap: pretty; } .project--feature { margin-top: 3rem; } .project--feature .project__media { aspect-ratio: 21 / 9; } .project--feature .project__title { font-size: clamp(1.1875rem, 0.95rem + 0.85vw, 1.5rem); } .projects-grid { margin-top: 3rem; display: grid; gap: 3rem 2.5rem; } @media (min-width: 768px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } } /* ------------------------------ News ----------------------------- */ .news-grid { margin-top: 3rem; display: grid; gap: 2.5rem 2rem; } @media (min-width: 768px) { .news-grid { grid-template-columns: repeat(3, 1fr); } } .news { display: flex; flex-direction: column; } .news__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background-color: var(--muted); } .news__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease); } .news:hover .news__media img { scale: 1.06; } .news__body { border-top: 1px solid var(--hairline); padding-top: 1.25rem; margin-top: 1.25rem; } .news__tag { display: inline-block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .news__title { margin-top: 0.85rem; font-size: 1rem; letter-spacing: -0.01em; text-wrap: balance; } .news__desc { margin-top: 0.85rem; font-size: 0.9375rem; line-height: 1.65; color: var(--muted-foreground); } /* ---------------------------- Contact ---------------------------- */ .contact { border-top: 1px solid var(--hairline); } .contact__inner { display: grid; gap: 3.5rem; } .contact__title { font-size: clamp(1.75rem, 1.15rem + 2vw, 2.625rem); line-height: 1.08; margin-top: 1.25rem; } .contact__title em { color: var(--primary); } .contact__lead { margin-top: 1.25rem; max-width: 32rem; font-size: 1rem; line-height: 1.65; color: var(--muted-foreground); text-wrap: pretty; } .contact-card { border-top: 1px solid var(--hairline); } .contact-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.35rem; border-bottom: 1px solid var(--hairline); transition: padding-left 0.3s var(--ease); } a.contact-row:hover { padding-left: 0.5rem; } .contact-row--static { cursor: default; } .contact-row__label { display: flex; flex-direction: column; gap: 0.3rem; } .contact-row__label span { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-foreground); } .contact-row__label strong { font-size: 1.0625rem; font-weight: 500; } .contact-row__arrow { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--muted-foreground); transition: color 0.25s var(--ease), transform 0.3s var(--ease); } a.contact-row:hover .contact-row__arrow { color: var(--accent); transform: translate(2px, -2px); } .contact-book { margin-top: 1.75rem; width: 100%; } @media (min-width: 768px) { .contact__inner { grid-template-columns: repeat(12, 1fr); gap: 3rem; } .contact__intro { grid-column: span 7; } .contact__panel { grid-column: span 5; } .contact__lead { font-size: 1.0625rem; } } /* ----------------------------- Footer ---------------------------- */ .footer { border-top: 1px solid var(--hairline); background-color: var(--card); } .footer__inner { display: grid; gap: 3rem; padding-block: 4rem; } .footer__about { max-width: 22rem; margin-top: 1.5rem; font-size: 0.9375rem; line-height: 1.65; color: var(--muted-foreground); text-wrap: pretty; } .footer__col h3 { font-family: var(--font-sans); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 600; } .footer__col ul { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; } .footer__col a { font-size: 0.9375rem; color: var(--foreground); transition: color 0.25s var(--ease); } .footer__col a:hover { color: var(--accent); } .footer__bottom { margin-top: 4rem; display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px solid var(--hairline); padding-top: 1.5rem; } .footer__bottom p { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); } @media (min-width: 768px) { .footer__inner { grid-template-columns: repeat(12, 1fr); } .footer__brand-block { grid-column: span 5; } .footer__col { grid-column: span 2; } .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } } /* ============================================================ Preloader — drafting-sheet boot screen The wordmark rises out of clip masks, a live counter tracks real asset loading, then three curtain panels lift away. ============================================================ */ html.is-preloading, html.is-preloading body { overflow: hidden; } .preloader { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; color: var(--foreground); } /* Curtain panels — the opaque background that lifts away on exit */ .preloader__panels { position: absolute; inset: 0; display: flex; } .preloader__panel { flex: 1 1 0; background: var(--background); } .preloader__panel + .preloader__panel { border-left: 1px solid oklch(0.955 0 0); } /* Faint drafting grid, masked away from the center so the wordmark sits on clean paper */ .preloader__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, oklch(0.18 0 0 / 0.05) 1px, transparent 1px), linear-gradient(to bottom, oklch(0.18 0 0 / 0.05) 1px, transparent 1px); background-size: 4.5rem 4.5rem; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 25%, black 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 25%, black 75%); opacity: 0; animation: preloader-fade 1.2s var(--ease) 0.2s forwards; } /* Sheet frame + crosshair registration marks at each corner */ .preloader__frame { position: absolute; inset: 1.75rem; border: 1px solid var(--hairline); pointer-events: none; opacity: 0; animation: preloader-fade 1s var(--ease) 0.35s forwards; } .preloader__mark { position: absolute; width: 1.0625rem; height: 1.0625rem; } .preloader__mark::before, .preloader__mark::after { content: ""; position: absolute; background: var(--accent); } .preloader__mark::before { left: 50%; top: 0; width: 1px; height: 100%; } .preloader__mark::after { top: 50%; left: 0; height: 1px; width: 100%; } .preloader__mark--tl { top: -0.53125rem; left: -0.53125rem; } .preloader__mark--tr { top: -0.53125rem; right: -0.53125rem; } .preloader__mark--bl { bottom: -0.53125rem; left: -0.53125rem; } .preloader__mark--br { bottom: -0.53125rem; right: -0.53125rem; } /* Logo — rises out of its clip mask */ .preloader__center { position: relative; text-align: center; padding-inline: 1.5rem; } .preloader__word { display: flex; justify-content: center; font-family: var(--font-serif); font-weight: 400; font-size: clamp(5.5rem, 19vw, 13rem); line-height: 1; letter-spacing: 0.01em; } .preloader__letter-box { display: inline-block; overflow: hidden; padding-top: 0.06em; } .preloader__letter { display: inline-block; transform: translateY(118%); animation: preloader-rise 1.1s var(--ease) forwards; } .preloader__letter-box:nth-child(1) .preloader__letter { animation-delay: 0.18s; } .preloader__logo { display: block; width: clamp(11rem, 26vw, 17rem); height: auto; } /* Footer row — cycling status word + live percentage */ .preloader__foot { position: absolute; left: 1.75rem; right: 1.75rem; bottom: 1.75rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 0 1.25rem 1.25rem; opacity: 0; animation: preloader-fade 1s var(--ease) 0.55s forwards; } .preloader__status { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-foreground); padding-bottom: 0.55rem; transition: opacity 0.24s var(--ease), transform 0.24s var(--ease); } .preloader__status--out { opacity: 0; transform: translateY(-0.4em); } .preloader__pct { font-family: var(--font-serif); font-style: italic; font-size: clamp(2.75rem, 7vw, 4.75rem); line-height: 0.9; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; } .preloader__pct em { font-size: 0.42em; margin-left: 0.1em; } /* Progress rule along the very bottom edge of the screen */ .preloader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left center; } /* Exit — the class freezes the CSS entrance animations at their final values so GSAP inline transforms are free to take over */ .preloader--exiting .preloader__letter { animation: none; transform: none; } .preloader--exiting .preloader__grid, .preloader--exiting .preloader__frame, .preloader--exiting .preloader__foot { animation: none; opacity: 1; } /* Fallback exit (no GSAP): a simple fade */ .preloader--done { opacity: 0; pointer-events: none; transition: opacity 0.6s ease; } .preloader--skip { display: none; } @keyframes preloader-rise { to { transform: translateY(0); } } @keyframes preloader-fade { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .preloader { display: none; } }