/* ============================================================ MASCOT Consultants — "The Threshold" Door opens once → into a calm, scrollable house. Principle: rich world, boring/instant controls. ============================================================ */ :root { /* ---- default site palette: bold gallery (black + bone) with the authentic brand triad ---- */ --orange: #e67817; /* brand orange — primary accent */ --yellow: #f8c301; /* brand yellow */ --brown: #8f5444; /* brand brown */ /* the logo's three bars, as a usable triad */ --c-yellow: #f8c301; --c-orange: #e67817; --c-brown: #8f5444; --ink: #100f0e; /* near-black text on light */ --dtext: #f5f2ec; /* text on dark sections */ --dark: #0f0e0c; /* dark sections — true black */ --darker: #070605; --paper: #f5f2ea; /* bone light sections */ --paper2: #eae5da; --cream: #f7f4ec; --muted: #8d8a84; --line-d: rgba(255,255,255,0.16); --line-l: rgba(16,15,14,0.16); --walnut-a: #8a5d38; --walnut-b: #79502f; --walnut-c: #6b4628; --font: 'Hanken Grotesk', -apple-system, Segoe UI, Roboto, Arial, sans-serif; --gutter: clamp(1.25rem, 5vw, 6rem); --ease: cubic-bezier(0.22, 1, 0.36, 1); --maxw: 1500px; } /* ============================================================ SITE THEMES — override on ============================================================ */ /* BRIGHT EDITORIAL — warm near-black + bright bone + punchy orange */ body.theme-bright { --orange: #f0670f; --yellow: #ffc400; --ink: #1a1613; --dtext: #f4ede1; --dark: #1b1712; --darker: #120e0a; --paper: #faf7f1; --paper2: #f0ebe0; --cream: #fbf8f1; --muted: #9a9183; --line-l: rgba(26,22,19,0.14); } /* WARM RICH — earthy but saturated & deeper (turn up the vibrance) */ body.theme-warm { --orange: #e2611a; --yellow: #f7b81f; --brown: #a85a3e; --ink: #241a12; --dtext: #f7ead6; --dark: #20160e; --darker: #150d07; --paper: #f4ecdd; --paper2: #ecdcc4; --cream: #f7f0e2; --muted: #9c876c; --line-l: rgba(36,26,18,0.16); } /* COOL CONTEMPORARY — cool greys + warm accent pop (matches the door) */ body.theme-cool { --orange: #ef6a17; --yellow: #f5c518; --ink: #181b1c; --dtext: #eaeeef; --dark: #14181a; --darker: #0c0f11; --paper: #f1f3f2; --paper2: #e3e7e6; --cream: #f4f6f5; --muted: #899193; --line-d: rgba(255,255,255,0.15); --line-l: rgba(20,24,26,0.14); } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { font-family: var(--font); font-size: clamp(0.95rem, 1.05vw, 1.0625rem); line-height: 1.6; color: var(--ink); background: var(--dark); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: var(--orange); color: #fff; } /* ---------- shared bits ---------- */ /* orange section eyebrows removed site-wide (per request) */ .kicker { display: none; } .kicker--center { justify-content: center; width: 100%; text-align: center; } .kicker__dot { width: 7px; height: 7px; background: var(--orange); flex: none; } .btn { display: inline-flex; align-items: center; gap: 0.7rem; padding: 1rem 1.7rem; border: 1px solid currentColor; border-radius: 100px; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em; transition: background .4s var(--ease), color .4s var(--ease), gap .3s var(--ease); } .btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; gap: 1.1rem; } /* ---------- grain + cursor glow ---------- */ .grain { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } .glow { position: fixed; top: 0; left: 0; width: 520px; height: 520px; z-index: 1; pointer-events: none; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; transition: opacity .6s ease; background: radial-gradient(closest-side, rgba(255,225,170,0.10), transparent 70%); mix-blend-mode: screen; will-change: left, top; } body.pointer-active .glow { opacity: 1; } @media (pointer: coarse) { .glow { display: none; } } /* ---- custom cursor (archipelago-style): a SOLID filled ball, white + mix-blend-mode:difference, so it INVERTS against whatever is behind it — colour shifts continuously over bg/images/text ---- */ .cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); opacity: 0; will-change: left, top; mix-blend-mode: difference; color: #fff; width: 20px; height: 20px; border-radius: 50%; background: currentColor; transition: width .28s var(--ease), height .28s var(--ease), opacity .3s var(--ease); } body.pointer-active .cursor { opacity: 1; } /* over interactive elements: the ball swells (difference-blend inverts whatever it covers) */ body.cursor-hover .cursor { width: 64px; height: 64px; } /* hide the native cursor on fine pointers when our cursor is active */ @media (pointer: fine) { body.has-cursor, body.has-cursor * { cursor: none !important; } } @media (pointer: coarse) { .cursor { display: none; } } /* ---------- loading screen: logo · tagline+statement (bottom-centre) · self-drawing skyline (bottom-right) ---------- */ .loader { position: fixed; inset: 0; z-index: 9500; background: #efe8da; overflow: hidden; animation: loaderOut 0.85s var(--ease) 2.6s forwards; } /* logo + text as one block, its centre (top-of-logo → last-line-of-text) sitting at the screen centre */ .loader__group { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: min(640px, 86vw); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(1.3rem, 3.4vh, 2.6rem); } .loader__logo { line-height: 0; } .loader__logo img { display: block; height: clamp(120px, 22vh, 220px); width: auto; opacity: 0; transform: translateY(8px) scale(.96); filter: drop-shadow(0 14px 40px rgba(43,33,25,.16)); animation: loaderLogo .8s var(--ease) .15s forwards; } .loader__foot { width: 100%; } .loader__tag { margin: 0; font-weight: 800; font-size: clamp(1.35rem, 3vw, 2.4rem); letter-spacing: -0.02em; color: #2b2119; opacity: 0; transform: translateY(12px); animation: loaderUp .7s var(--ease) .55s forwards; } .loader__text { margin: 1rem auto 0; max-width: 52ch; font-size: clamp(.84rem, 1.05vw, .98rem); line-height: 1.6; color: #8a7a62; opacity: 0; transform: translateY(12px); animation: loaderUp .7s var(--ease) .8s forwards; } .loader__sketch { position: absolute; right: -1.5%; bottom: 0; width: clamp(420px, 48vw, 840px); height: auto; z-index: 1; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 100%); } /* stroke-draw: each path animates dashoffset 1 → 0 with a per-element delay (--d) and duration (--t) */ .loader__sketch .ls { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lsDraw var(--t, .45s) var(--ease) var(--d, .5s) forwards; } .loader__sketch .ld { stroke-width: 0.8; } @keyframes lsDraw { to { stroke-dashoffset: 0; } } @keyframes loaderLogo { to { opacity: 1; transform: translate(0, 0) scale(1); } } @keyframes loaderUp { to { opacity: 1; transform: none; } } @keyframes loaderOut { to { transform: translateY(-100%); visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .loader { animation: loaderOut .6s var(--ease) 1.1s forwards; } .loader__logo img, .loader__tag, .loader__text { animation-duration: .01s; animation-delay: 0s; } .loader__sketch .ls { animation-duration: .01s; animation-delay: 0s; } } /* ============================================================ NAV — always present (the navigation guarantee) ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 7000; display: flex; align-items: center; justify-content: space-between; padding: clamp(1rem, 2vw, 1.6rem) var(--gutter); color: #f3e8d2; /* light text — reads on the dark facade hero */ transition: transform .5s var(--ease), color .4s var(--ease); } .nav__brand-a { color: #f5ecdb; } .nav.is-solid .nav__brand-a { color: var(--ink); } /* nav background is ALWAYS transparent — only the text colour flips for dark vs light sections */ .nav.is-solid { color: var(--ink); } /* dark text over light sections */ .nav.is-hidden { transform: translateY(-110%); } .nav__brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; } .nav__mark { display: inline-flex; gap: 2px; height: 1.05em; } .nav__mark i { display: block; width: 4px; height: 100%; border-radius: 1px; } .nav__mark i:nth-child(1) { background: var(--c-yellow); } .nav__mark i:nth-child(2) { background: var(--c-orange); } .nav__mark i:nth-child(3) { background: var(--c-brown); } .nav__brand-b { color: var(--orange); font-weight: 600; margin-left: 0.35em; } .nav.is-solid .nav__brand-b { color: var(--orange); } .nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.4rem); } .nav__links a { font-size: 0.9rem; font-weight: 500; position: relative; } .nav__links a:not(.nav__cta)::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: currentColor; transition: width .35s var(--ease); } .nav__links a:not(.nav__cta):hover::after { width: 100%; } .nav__cta { border: 1px solid currentColor; border-radius: 100px; padding: 0.5rem 1.1rem; } .nav__cta:hover { background: var(--orange); border-color: var(--orange); color: #fff; } .nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; } .nav__burger span { width: 24px; height: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .35s; } .nav.is-open .nav__burger span:first-child { transform: translateY(7px) rotate(45deg); } .nav.is-open .nav__burger span:last-child { transform: translateY(-7px) rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 6500; background: var(--dark); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; padding: var(--gutter); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s; } .menu.is-open { opacity: 1; visibility: visible; } .menu a { font-size: clamp(2rem, 9vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; } .menu a:hover { color: var(--orange); } /* ============================================================ HERO — "Step into our heritage" (Sethi House threshold, ported from the Claude Design) Photographic facade; the central arch is a carved door whose two leaves swing open on scroll to reveal a lit void + the Mascot logo. Sticky stage: the hero holds while the door opens, then scrolls away. ============================================================ */ .hero { position: relative; min-height: 100vh; background: transparent; color: #F3E8D2; --accent: #B07A2E; --accent-bright: #E8C681; } /* fixed overlay: holds the viewport while the runway provides the scroll distance */ .js .hero { position: fixed; inset: 0; height: auto; z-index: 6000; } body.hero-done .hero { visibility: hidden; pointer-events: none; } .hero__defs { position: absolute; } .hero__stage { position: absolute; inset: 0; overflow: hidden; background: #1a120a; will-change: opacity; } /* the world holds the facade + door; a GENTLE dolly only (never a huge GPU layer) */ .hero__world { position: absolute; inset: 0; transform-origin: 50% 52%; will-change: transform; } /* doorway light bloom — grows to cream and covers the facade during the punch-through */ /* the "space" we step into: a warm-DARK glow that darkens to walnut (going into a dim room, not white light) */ .hero__bloom { position: absolute; left: 50%; top: 52%; width: 60vmax; height: 60vmax; border-radius: 50%; transform: translate(-50%,-50%) scale(0); pointer-events: none; opacity: 0; will-change: transform, opacity; background: radial-gradient(circle, #3a2a1a 0%, #2f2418 52%, #2b2119 100%); filter: blur(8px); } /* the shared logo that flies from the doorway and becomes the Brand logo (continuity) */ .entry-logo { position: fixed; left: 0; top: 0; z-index: 6300; width: clamp(150px, 20vh, 260px); pointer-events: none; opacity: 0; transform-origin: 0 0; will-change: transform, opacity; } .entry-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(0,0,0,.4)); } /* the runway is what you actually scroll; walnut so the punch-through lands on the dark second section */ .hero-runway { height: 170vh; background: #2b2119; } /* cover-fit facade (ratio 1.7806 — matches the source photo exactly) */ .hero__bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: max(100vw, 178.06vh); height: max(100vh, 56.16vw); background: url('/The_Enchanting_Sethi_House.jpg') center / 100% 100% no-repeat; } .hero__grade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 40% 42% at 49.4% 52%, rgba(255,206,128,.16), transparent 60%), radial-gradient(ellipse 90% 80% at 50% 46%, transparent 50%, rgba(12,8,3,.55) 100%); } /* kicker — sits centred just above the arch */ .hero__kicker { position: absolute; left: 50.1%; top: 31.4%; transform: translateX(-50%); z-index: 7; margin: 0; text-align: center; pointer-events: none; font-size: clamp(11px, 0.95vw, 13px); font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: var(--accent-bright); text-shadow: 0 1px 6px rgba(10,6,2,.9), 0 0 2px rgba(10,6,2,.7); will-change: opacity; } /* ---- the carved door (positioned over the central arch of the facade) ---- */ .hero__door { position: absolute; left: 43.05%; top: 34.8%; width: 14.2%; height: 34.8%; z-index: 5; perspective: 1500px; perspective-origin: 50% 42%; transform-style: preserve-3d; } .hero__void { position: absolute; inset: 0; clip-path: url(#archFull); overflow: hidden; opacity: .12; display: flex; align-items: center; justify-content: center; will-change: opacity; background: radial-gradient(circle at 50% 42%, #FBEFD2 0%, #F0C877 26%, #CB933F 56%, #4f3415 92%), linear-gradient(180deg,#3a2a16,#160e05); } .hero__void-strip { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); filter: blur(3px); background: linear-gradient(180deg, transparent, #FFE6AE 45%, #FFE6AE 55%, transparent); opacity: .9; } .hero__logo { position: relative; z-index: 1; width: 62%; height: auto; opacity: 0; transform: translateY(14px) scale(.9); will-change: opacity, transform; filter: drop-shadow(0 6px 20px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(0,0,0,.4)); } /* swinging leaves (carved-wood PNGs from the source design) */ .hero__leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; } .hero__leaf--l { left: 0; transform-origin: left center; background: url('/images/leaf-left.png') center / 100% 100% no-repeat; } .hero__leaf--r { right: 0; transform-origin: right center; background: url('/images/leaf-right.png') center / 100% 100% no-repeat; } .hero__leaf-edge { position: absolute; top: 2%; bottom: 0; width: 14px; transform-origin: right center; transform: rotateY(90deg); background: linear-gradient(90deg,#2a1206,#6e371c 55%,#3a1c0d); box-shadow: inset 0 0 9px rgba(0,0,0,.55); } .hero__leaf--l .hero__leaf-edge { right: 0; } .hero__leaf--r .hero__leaf-edge { left: 0; transform-origin: left center; transform: rotateY(-90deg); background: linear-gradient(90deg,#3a1c0d,#6e371c 45%,#2a1206); } .hero__archshade { position: absolute; inset: 0; clip-path: url(#archFull); pointer-events: none; box-shadow: inset 0 0 16px 3px rgba(20,12,4,.6), inset 0 0 0 2px rgba(40,24,10,.4); } /* ---- threshold step at the foot of the door ---- */ .hero__step { position: absolute; left: 49.7%; top: 66.4%; transform: translateX(-50%); width: 18%; perspective: 640px; z-index: 7; } .hero__step-top { height: 3.4vh; transform-origin: top center; transform: rotateX(62deg); border-radius: 2px 2px 0 0; background: linear-gradient(180deg,#aa6e40 0%,#7c4622 68%,#643718 100%); box-shadow: inset 0 1px 0 rgba(255,224,176,.55), inset 0 -3px 8px rgba(40,20,8,.4), 0 -1px 5px rgba(0,0,0,.25); } .hero__step-face { height: 2.6vh; margin-top: -1px; background: linear-gradient(180deg,#5e3017,#2f1305); box-shadow: 0 16px 26px -8px rgba(18,10,3,.72); display: flex; justify-content: space-evenly; align-items: flex-start; overflow: hidden; } .hero__step-face i { width: 9%; height: 74%; background: linear-gradient(180deg,#5a2c16,#2a1206); border-radius: 0 0 3px 3px; } /* ---- top scrim so the nav reads over the facade ---- */ .hero__scrim { position: absolute; top: 0; left: 0; right: 0; height: 200px; z-index: 6; pointer-events: none; background: linear-gradient(180deg, rgba(14,9,4,.7), transparent); } /* ---- headline ---- */ .hero__intro { position: absolute; left: 0; right: 0; top: clamp(86px, 12vh, 150px); z-index: 7; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .hero__intro-glow { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); width: min(680px, 82vw); height: 230px; background: radial-gradient(ellipse at center, rgba(14,9,4,.6), transparent 70%); filter: blur(6px); } .hero__headline { position: relative; margin: clamp(22px,3.2vh,42px) 0 0; font-weight: 400; font-size: clamp(34px, 5.2vw, 76px); line-height: .98; letter-spacing: -.015em; color: #F6ECD7; text-align: center; text-wrap: balance; text-shadow: 0 2px 18px rgba(10,6,2,.7); will-change: opacity, transform; } /* ---- scroll prompt (clicking it also enters) ---- */ .hero__prompt { position: absolute; bottom: 40px; left: 0; right: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 14px; will-change: opacity; text-decoration: none; } .hero__prompt-line { width: 2px; height: 40px; border-radius: 2px; background: linear-gradient(180deg, #FBEFD2, var(--accent-bright) 45%, rgba(232,198,129,0)); box-shadow: 0 0 14px rgba(232,198,129,.55); transform-origin: top; animation: heroPulse 2.2s ease-in-out infinite; } .hero__prompt-tx { font-size: clamp(12px, 1vw, 14px); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #F8EFD9; text-shadow: 0 1px 12px rgba(10,6,2,.85), 0 0 2px rgba(10,6,2,.6); transition: color .3s var(--ease); } .hero__prompt:hover .hero__prompt-tx { color: #fff; } @keyframes heroPulse { 0%,100% { transform: scaleY(.35); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } } /* ============================================================ THE HOUSE — the scroll spine ============================================================ */ .house { position: relative; z-index: 2; } /* entrance: the first section emerges OUT of the doorway, then hands off to normal scroll. Scoped to the first section (not the whole house) so ScrollTrigger positions stay correct. Kept in flow (pinned via transform) so the runway still provides scroll distance. */ body.entering [data-emerge] { will-change: transform; } /* ---- section tones: deep pigments, warm ↔ cool ↔ light rhythm ---- */ /* background on the attribute itself (not `.house > section`) so it survives GSAP's pin-spacer wrap */ [data-tone] { background: var(--bg); color: var(--fg); } .house > section { padding: clamp(5rem, 13vh, 11rem) var(--gutter); } [data-tone="ink"] { --bg: #16110d; --fg: #f1e9da; --muted: #a99f8c; --line: rgba(255,255,255,0.14); } /* ——— "Warm Haveli" palette: walnut-anchored, all warm; light tones use walnut as ink so the family holds ——— */ [data-tone="bone"] { --bg: #efe8da; --fg: #2b2119; --muted: #8a7a62; --line: rgba(43,33,25,0.15); } [data-tone="oat"] { --bg: #e5d8c0; --fg: #2b2119; --muted: #8a7355; --line: rgba(43,33,25,0.16); } [data-tone="clay"] { --bg: #6e4430; --fg: #f7ebdf; --muted: #d6ae96; --line: rgba(255,255,255,0.16); } [data-tone="espresso"] { --bg: #1e1710; --fg: #efe3d2; --muted: #a8997f; --line: rgba(255,255,255,0.12); } [data-tone="walnut"] { --bg: #2b2119; --fg: #f0e6d8; --muted: #b09a82; --line: rgba(255,255,255,0.13); } [data-tone="coral"] { --bg: #f5a07a; --fg: #3a1d0f; --muted: #8c4a2c; --line: rgba(58,29,15,0.22); } [data-tone="sage"] { --bg: #484a3c; --fg: #f3f1e6; --muted: #b3b6a3; --line: rgba(255,255,255,0.16); } [data-tone="petrol"] { --bg: #154032; --fg: #e9f1ea; --muted: #95ad9c; --line: rgba(255,255,255,0.16); } [data-tone="sand"] { --bg: #f2e6d2; --fg: #2a1c10; --muted: #9c8a6c; --line: rgba(42,28,16,0.16); } /* legacy fallback */ section[data-section="dark"] { --bg: var(--dark); --fg: var(--dtext); } section[data-section="light"] { --bg: var(--paper); --fg: var(--ink); } /* ---- reveal-on-scroll ---- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); } [data-reveal].in { opacity: 1; transform: none; } .word { display: inline-block; opacity: 0.12; transition: opacity .5s var(--ease); } .word.in { opacity: 1; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } .word { opacity: 1; } .door__cue-line { animation: none; } } /* ---- intro / practice — pinned, centred, words light up on scroll (frame fills, no dead space) ---- */ .house > section.intro { padding: 0; } .intro__pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(2.2rem, 5vh, 4.5rem); padding: clamp(6rem, 10vh, 9rem) var(--gutter) clamp(3rem, 6vh, 5rem); } .intro__inner { max-width: min(1280px, 90vw); margin: 0 auto; text-align: center; } .intro__lead { font-size: clamp(1.7rem, calc(3.4vw + 0.6vh), min(5rem, 6.6vh)); font-weight: 600; line-height: 1.24; letter-spacing: -0.02em; } .intro__lead .w { color: color-mix(in srgb, var(--fg) 16%, transparent); transition: color .25s linear; } .intro__lead .w.lit { color: var(--fg); } .intro__meta { max-width: var(--maxw); width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; border-top: 1px solid var(--line); padding-top: clamp(1.5rem, 3vh, 2.4rem); } .stat__num { display: block; font-size: clamp(2rem, calc(3.2vw + 0.5vh), 4.4rem); font-weight: 700; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; } .stat__cap { display: block; font-size: 0.84rem; color: var(--muted); margin-top: 0.5rem; max-width: 22ch; } @media (max-width: 900px) { .intro__meta { grid-template-columns: repeat(2, 1fr); } } /* ---- logo reel — logo window to motion → solid (video placeholder) ---- */ /* logo reel — ONE video (perfect sync), CSS-sticky so the next section scrolls in after */ .lr-wrap { position: relative; height: 200vh; } .logoreel { padding: 0; height: 100vh; position: sticky; top: 0; overflow: hidden; } .lr__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* cream covering everything EXCEPT a logo-shaped hole (video shows through); clipped to above the seam */ .lr__cream { position: absolute; inset: 0; background: var(--bg); will-change: clip-path; clip-path: inset(0 0 0 0); -webkit-mask-image: url(/images/logo-white.png), linear-gradient(#000, #000); -webkit-mask-position: center, center; -webkit-mask-size: auto min(52vh, 62vw), cover; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; mask-image: url(/images/logo-white.png), linear-gradient(#000, #000); mask-position: center, center; mask-size: auto min(52vh, 62vw), cover; mask-repeat: no-repeat, no-repeat; mask-composite: exclude; } /* solid logo; clipped to below the seam */ .lr__solidwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; clip-path: inset(100% 0 0 0); will-change: clip-path; } .lr__solid { height: min(52vh, 62vw); width: auto; filter: drop-shadow(0 14px 44px rgba(0,0,0,0.45)); } body.no-pin .lr__cream { clip-path: inset(0 0 100% 0); } body.no-pin .lr__solidwrap { clip-path: inset(0 0 0 0); } /* ---- selected work — pinned horizontal gallery ---- */ .house > section.work { padding: 0; height: 100vh; overflow: hidden; } .work__pin { height: 100vh; display: flex; align-items: stretch; overflow: hidden; } .work__track { display: flex; flex-direction: column; width: max-content; height: 100%; will-change: transform; } /* full-width header band — rule · big "Featured Work" · rule (spans the whole scrollable width, scrolls with everything) */ .work__header { width: 100%; display: flex; flex-direction: column; gap: clamp(0.7rem, 1.4vh, 1.2rem); padding: clamp(3.2rem, 8vh, 5.5rem) var(--gutter) 0; } .work__rule { height: 1px; background: var(--line); } .work__heading { font-size: clamp(2.4rem, 6.5vw, 7rem); font-weight: 700; letter-spacing: -0.03em; line-height: 0.92; } /* the text + gallery row, below the band */ .work__row { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; gap: clamp(1rem, 2vw, 2.2rem); padding: clamp(1.4rem, 3.5vh, 2.6rem) var(--gutter) clamp(2rem, 5vh, 3.5rem); } .work__intro { flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; max-width: min(70vw, 24rem); padding-right: clamp(2rem, 3.5vw, 4rem); } .work__lead { font-size: clamp(1rem, 1.25vw, 1.2rem); color: var(--muted); line-height: 1.55; max-width: 34ch; } .work__hint { margin-top: 1.3rem; color: var(--muted); font-size: 0.9rem; } .wcard { flex: 0 0 auto; width: min(74vw, 400px); height: auto; display: flex; flex-direction: column; text-align: left; } .wcard__media { flex: 1; overflow: hidden; border-radius: 5px; background: var(--paper2); position: relative; } .wcard__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12,9,6,0.5)); opacity: 0; transition: opacity .5s var(--ease); } .wcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .wcard:hover .wcard__media img { transform: scale(1.06); } .wcard:hover .wcard__media::after { opacity: 1; } .wcard__row { display: flex; align-items: baseline; gap: 0.9rem; padding-top: 1rem; } .wcard__n { font-size: 0.74rem; font-weight: 700; color: var(--orange); letter-spacing: 0.06em; flex: none; } .wcard__meta { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; } .wcard__label { font-size: 1.1rem; font-weight: 600; line-height: 1.1; } .wcard__place { font-size: 0.8rem; color: var(--muted); } .wcard__enter { font-size: 0.82rem; color: var(--muted); opacity: 0; transform: translateX(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease); white-space: nowrap; align-self: center; } .wcard:hover .wcard__enter { opacity: 1; transform: none; color: var(--orange); } .work__end { flex: 0 0 auto; width: min(70vw, 340px); padding-inline: clamp(1rem, 3vw, 3rem); display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; } .work__end p { font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } /* reduced-motion / no-GSAP fallback: heading on top, cards scroll horizontally by hand */ body.no-pin .house > section.work { height: auto; } body.no-pin .work__pin { height: auto; } body.no-pin .work__track { width: auto; height: auto; } body.no-pin .work__row { height: 62vh; overflow-x: auto; } /* ---- statement (writes on as you scroll) ---- */ .statement { position: relative; display: flex; align-items: center; justify-content: center; min-height: 92vh; overflow: hidden; } .statement__mono { position: absolute; top: 50%; left: 50%; translate: -50% -50%; font-size: 84vh; font-weight: 800; line-height: 1; color: rgba(255,255,255,0.024); pointer-events: none; user-select: none; } .statement__text { position: relative; max-width: 20ch; margin: 0 auto; font-size: clamp(1.8rem, calc(4vw + 0.6vh), min(5.2rem, 7vh)); font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; text-align: center; } .statement__text .w { color: color-mix(in srgb, var(--fg) 16%, transparent); transition: color .25s linear; } .statement__text .w.lit { color: var(--fg); } /* ---- shared section header (lead + rule + big title) ---- */ .sec__head { max-width: var(--maxw); margin: 0 auto clamp(2.5rem, 6vh, 4.5rem); } .sec__lead { font-size: clamp(1rem, 1.3vw, 1.25rem); color: var(--muted); max-width: 46ch; line-height: 1.55; margin-bottom: clamp(1.2rem, 3vh, 2rem); } .sec__title-row { display: flex; align-items: center; gap: 1.4rem; border-top: 1px solid var(--line); padding-top: clamp(1rem, 2.5vh, 1.8rem); } .sec__rule { display: none; } .sec__title { font-size: clamp(2.2rem, 5.5vw, 5.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; } /* ---- news & announcements ---- */ .news__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1.2rem, 2vw, 2rem); } .newscard { display: flex; flex-direction: column; gap: 0.65rem; padding: clamp(1.3rem, 1.8vw, 1.9rem); border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--fg) 3%, transparent); transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); } .newscard:hover { transform: translateY(-5px); border-color: var(--orange); background: color-mix(in srgb, var(--fg) 5%, transparent); } .newscard__media { aspect-ratio: 16/10; border-radius: 5px; overflow: hidden; margin-bottom: 0.2rem; } .newscard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .newscard:hover .newscard__media img { transform: scale(1.05); } .newscard__meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.76rem; color: var(--muted); letter-spacing: 0.03em; } .newscard__tag { color: var(--orange); text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; font-size: 0.66rem; } .newscard__title { font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; } .newscard__blurb { font-size: 0.92rem; color: var(--muted); line-height: 1.5; flex: 1; } .newscard__more { font-size: 0.84rem; font-weight: 700; color: var(--orange); margin-top: 0.3rem; } /* ---- process (timeline rail fills as you scroll) ---- */ .process__list { position: relative; max-width: var(--maxw); margin: 0 auto; padding-left: clamp(40px, 5.5vw, 96px); } .process__rail { position: absolute; left: clamp(6px, 1.6vw, 26px); top: clamp(1.8rem, 4.2vh, 3.2rem); bottom: clamp(1.8rem, 4.2vh, 3.2rem); width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; } .process__rail-fill { position: absolute; inset: 0 0 auto 0; height: 0; background: var(--fg); } .pstep { position: relative; display: grid; grid-template-columns: minmax(72px, auto) 1fr minmax(96px, 156px); gap: clamp(1.3rem, 3.5vw, 3.6rem); padding: clamp(1.6rem, 3.8vh, 2.9rem) 0; align-items: center; } .pstep + .pstep { border-top: 1px solid var(--line); } .pstep__n { font-size: clamp(2.2rem, 4.6vw, 4.6rem); font-weight: 700; line-height: 0.88; opacity: 0.42; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; align-self: start; } .pstep__title { font-size: clamp(1.6rem, 3vw, 2.9rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1; } .pstep__desc { margin-top: 0.75rem; font-size: clamp(0.98rem, 1.3vw, 1.25rem); color: var(--muted); line-height: 1.5; max-width: 52ch; } /* hand-drawn step sketch (draws itself in when the step reveals) */ .pstep__sketch { color: var(--orange); justify-self: end; } .pstep__sketch .psk { width: clamp(84px, 11vw, 150px); height: auto; display: block; } .psk .ps { stroke-dasharray: 1; stroke-dashoffset: 1; } .pstep.in .psk .ps { animation: lsDraw .8s var(--ease) forwards; } .pstep.in .psk .ps:nth-child(2) { animation-delay: .08s; } .pstep.in .psk .ps:nth-child(3) { animation-delay: .16s; } .pstep.in .psk .ps:nth-child(4) { animation-delay: .24s; } .pstep.in .psk .ps:nth-child(5) { animation-delay: .32s; } .pstep.in .psk .ps:nth-child(6) { animation-delay: .40s; } .pstep.in .psk .ps:nth-child(7) { animation-delay: .48s; } @media (prefers-reduced-motion: reduce) { .psk .ps { stroke-dashoffset: 0; animation: none; } } @media (max-width: 640px) { .process__list { padding-left: 0; } .process__rail { display: none; } .pstep { grid-template-columns: auto 1fr; gap: 0.4rem 1.2rem; } .pstep__sketch { display: none; } } /* ---- announcement popup (subtle, dismissible) ---- */ .announce { position: fixed; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 8000; width: min(360px, 86vw); display: flex; align-items: stretch; background: #1d1813; color: #f3ece0; border-radius: 11px; box-shadow: 0 20px 54px -18px rgba(0,0,0,0.55); overflow: hidden; transform: translateY(150%); opacity: 0; transition: transform .6s var(--ease), opacity .5s var(--ease); } .announce.is-in { transform: none; opacity: 1; } .announce__link { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.95rem 1.1rem; text-decoration: none; color: inherit; } .announce__tag { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); font-weight: 700; } .announce__text { font-size: 0.92rem; font-weight: 600; line-height: 1.28; } .announce__cta { font-size: 0.78rem; color: #c9bba4; margin-top: 0.15rem; } .announce__close { flex: none; width: 38px; align-self: stretch; color: #9b8e7c; font-size: 0.85rem; border-left: 1px solid rgba(255,255,255,0.08); transition: color .25s, background .25s; } .announce__close:hover { color: #fff; background: rgba(255,255,255,0.06); } @media (max-width: 640px) { .announce { display: none; } } /* ---- design expertise (sticky image swaps with hovered discipline) ---- */ .caps__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 6vw, 6rem); max-width: var(--maxw); margin: 0 auto; align-items: start; } .caps__left { position: sticky; top: 16vh; } .caps__viewer { position: relative; aspect-ratio: 4/3; border-radius: 5px; overflow: hidden; background: var(--paper2); } .caps__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .5s var(--ease), transform .9s var(--ease); } .caps__img.is-active { opacity: 1; transform: scale(1); } .caps__list { list-style: none; } .caps__list li { display: flex; align-items: center; gap: 1.2rem; padding: 1.15rem 0.4rem; border-top: 1px solid var(--line); font-size: clamp(1rem, 1.6vw, 1.4rem); font-weight: 500; transition: padding-left .35s var(--ease), color .35s var(--ease); } .caps__list li:last-child { border-bottom: 1px solid var(--line); } .caps__n { font-size: 0.78rem; font-weight: 700; color: var(--orange); flex: none; letter-spacing: 0.06em; } .caps__name { flex: 1; } .caps__arrow { color: var(--orange); opacity: 0; transform: translateX(-8px); transition: opacity .35s var(--ease), transform .35s var(--ease); } .caps__list li.is-active { padding-left: 1.1rem; } .caps__list li.is-active .caps__arrow { opacity: 1; transform: none; } @media (max-width: 900px) { .caps__grid { grid-template-columns: 1fr; } .caps__left { position: static; } .caps__viewer { display: none; } } /* ---- brand landing (door's logo settles here) + clients ---- */ .house > section.brand { padding: 0; } .brand { position: relative; min-height: 100vh; } /* textured drawing-board background (matches the hero) instead of flat cream */ .brand::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: multiply; background-image: radial-gradient(rgba(110,88,56,.05) 0.8px, transparent 1.4px), radial-gradient(rgba(255,255,255,.05) 0.8px, transparent 1.4px); background-size: 5px 5px, 6px 6px; background-position: 0 0, 2px 3px; } /* the logo sits slightly above centre; the fixed entry-logo lands exactly here (invisible swap) */ .brand__logo { position: absolute; top: 40vh; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: center; } .brand__logo img { height: clamp(180px, 26vh, 300px); width: auto; filter: drop-shadow(0 0 70px rgba(248,195,1,0.16)) drop-shadow(0 14px 44px rgba(0,0,0,0.45)); } body.entering .brand__logo { opacity: 0; } /* hidden during entry — the fixed entry-logo shows instead */ .brand__trusted { padding: 60vh var(--gutter) clamp(3rem, 7vh, 6rem); text-align: center; overflow: hidden; } /* (old single-img .entry-logo removed — the shared travelling logo is defined up in the hero block) */ .clients { overflow: hidden; text-align: center; } .ticker { margin-top: 2.2rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker__row { display: flex; gap: 2.4rem; white-space: nowrap; width: max-content; align-items: center; animation: ticker 48s linear infinite; } .ticker--rev { margin-top: 0.6rem; } .ticker--rev .ticker__row { animation-duration: 62s; animation-direction: reverse; } .ticker__row span { font-size: clamp(1.2rem, 2.4vw, 2rem); font-weight: 600; color: var(--muted); } .ticker__ghost { color: transparent !important; -webkit-text-stroke: 1px rgba(205,191,171,0.32); } .ticker__dot { color: var(--orange); font-size: 0.6em; } @keyframes ticker { to { transform: translateX(-50%); } } .proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 940px; margin: clamp(3rem, 7vw, 5.5rem) auto 0; } .proof__num { display: block; font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; } .proof__cap { display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-top: 0.4rem; } @media (max-width: 560px) { .proof { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } } /* ---- meet the team ---- */ .team__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(1.2rem, 2vw, 2.2rem); } .member { display: flex; flex-direction: column; gap: 0.6rem; } .member__photo { aspect-ratio: 3/4; border-radius: 7px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, #3a2c1d, #1f1710); border: 1px solid var(--line); } .member__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); } .member__mark { display: flex; gap: 5px; align-items: flex-end; opacity: 0.45; transition: opacity .4s var(--ease), transform .5s var(--ease); } .member__mark i { width: 7px; border-radius: 1px; } .member__mark i:nth-child(1) { height: 32px; background: var(--c-yellow); } .member__mark i:nth-child(2) { height: 46px; background: var(--c-orange); } .member__mark i:nth-child(3) { height: 32px; background: var(--c-brown); } .member:hover .member__mark { opacity: 0.85; transform: translateY(-5px); } .member__name { font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 700; line-height: 1.18; } .member__role { font-size: 0.85rem; color: var(--muted); } /* ---- contact ---- */ .btn--light { color: #f5efe4; border-color: rgba(255,255,255,0.5); } .btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; } .contact__cta { max-width: var(--maxw); margin: 0 auto clamp(2.5rem, 6vh, 4.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.4rem, 3vw, 3rem); } .contact__email { font-size: clamp(1.4rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; border-bottom: 2px solid var(--orange); padding-bottom: 0.08em; transition: color .3s var(--ease); } .contact__email:hover { color: var(--orange); } .contact__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vh, 3rem); } .loc__city { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.8rem; } .loc__addr { color: var(--fg); opacity: 0.75; margin-bottom: 0.6rem; } .loc__tel a { border-bottom: 1px solid var(--orange); padding-bottom: 1px; } .loc__rows { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; margin-top: 1.2rem; font-size: 0.85rem; } .loc__rows dt { color: var(--muted); } .loc__rows dd { font-weight: 500; } @media (max-width: 760px) { .contact__grid { grid-template-columns: 1fr; } } /* ---- digital visiting card ---- */ .vcard-wrap { max-width: var(--maxw); margin: 0 auto clamp(2.5rem, 6vh, 4rem); display: grid; grid-template-columns: minmax(0, 34rem) 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; } .vcard__note { max-width: 26ch; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.45; color: var(--muted); } @media (max-width: 900px) { .vcard-wrap { grid-template-columns: 1fr; } .vcard__note { max-width: 40ch; } } .vcard { position: relative; max-width: 34rem; padding: clamp(1.6rem, 3vw, 2.4rem); padding-left: calc(clamp(1.6rem, 3vw, 2.4rem) + 6px); background: color-mix(in srgb, var(--fg) 6%, transparent); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); overflow: hidden; } /* brand three-bar motif down the card edge */ .vcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--c-yellow) 0 33.33%, var(--c-orange) 33.33% 66.66%, var(--c-brown) 66.66% 100%); } .vcard__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .vcard__logo { height: clamp(72px, 8vw, 96px); width: auto; display: block; } .vcard__since { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .vcard__role { font-size: 0.84rem; line-height: 1.5; color: var(--muted); white-space: pre-line; margin-bottom: 1.2rem; } .vcard__rows { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1.2rem; font-size: 0.9rem; border-top: 1px solid var(--line); padding-top: 1.1rem; } .vcard__rows dt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .vcard__rows dd { font-weight: 500; } .vcard__rows a { border-bottom: 1px solid var(--orange); padding-bottom: 1px; transition: color .3s var(--ease); } .vcard__rows a:hover { color: var(--orange); } .vcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line); } .vcard__reg { font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); } .vcard__save { font-size: 0.84rem; font-weight: 600; color: var(--orange); border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity .3s var(--ease); } .vcard__save:hover { opacity: 0.7; } @media (max-width: 560px) { .vcard__rows { grid-template-columns: 1fr; gap: 0.1rem; } .vcard__rows dd { margin-bottom: 0.55rem; } } /* ---- footer ---- */ .footer { padding: clamp(3rem, 7vh, 5.5rem) var(--gutter) clamp(2rem, 4vh, 3rem); } .footer__top { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 2rem; padding-bottom: clamp(1.5rem, 3vh, 2.5rem); border-bottom: 1px solid var(--line); } .footer__brand img { height: clamp(60px, 8vw, 100px); width: auto; display: block; } .footer__nav { display: flex; flex-wrap: wrap; gap: clamp(0.9rem, 2vw, 2rem); } .footer__nav a { font-size: 0.92rem; color: var(--muted); transition: color .25s var(--ease); } .footer__nav a:hover { color: var(--fg); } .footer__social { max-width: var(--maxw); margin: clamp(1.4rem, 3vh, 2.2rem) auto 0; display: flex; flex-wrap: wrap; gap: clamp(0.9rem, 2vw, 2rem); } .footer__social a { font-size: 0.9rem; color: var(--muted); transition: color .25s var(--ease); } .footer__social a:hover { color: var(--fg); } .footer__legal { max-width: var(--maxw); margin: clamp(1.5rem, 3vh, 2.5rem) auto 0; font-size: 0.78rem; color: var(--muted); line-height: 1.7; } /* footer newsletter */ .subscribe { max-width: var(--maxw); margin: clamp(1.6rem, 3.2vh, 2.6rem) auto 0; } .subscribe__label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.7rem; } .subscribe__row { display: flex; align-items: center; gap: 0.6rem; max-width: 420px; border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; } .subscribe__row input { flex: 1; min-width: 0; background: none; border: none; color: var(--fg); font: inherit; font-size: 0.95rem; padding: 0.2rem 0; } .subscribe__row input::placeholder { color: var(--muted); } .subscribe__row input:focus { outline: none; } .subscribe__btn { background: none; border: none; color: var(--fg); font-size: 1.1rem; cursor: pointer; padding: 0 0.3rem; transition: color .25s var(--ease), transform .25s var(--ease); } .subscribe__btn:hover { color: var(--orange); transform: translateX(3px); } /* active nav link */ .nav__links a.is-active { color: var(--orange) !important; } /* "see more" link under home teaser sections */ .sec__more { display: flex; align-items: center; gap: 0.5rem; max-width: var(--maxw); margin: clamp(1.8rem, 4vh, 3rem) auto 0; font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 700; letter-spacing: -0.01em; color: var(--fg); transition: color .3s var(--ease); } .sec__more span { transition: transform .3s var(--ease); } .sec__more:hover { color: var(--orange); } .sec__more:hover span { transform: translateX(5px); } /* ============================================================ INNER PAGES — /work, /work/:slug, /about, /team, /journal, /contact ============================================================ */ .page { position: relative; z-index: 2; min-height: 60vh; } .page-hd { padding: clamp(8rem, 16vh, 12rem) var(--gutter) clamp(1.5rem, 4vh, 3rem); } /* —— Work index —— */ .work-filter { max-width: var(--maxw); margin: clamp(1.4rem, 3vh, 2.2rem) auto 0; display: flex; flex-wrap: wrap; gap: 0.55rem; } .chip { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 1.1rem; border-radius: 100px; border: 1px solid var(--line); color: var(--muted); background: none; cursor: pointer; transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); } .chip:hover { color: var(--fg); border-color: var(--fg); } .chip.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); } .work-grid { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.6rem, 4vh, 3rem) var(--gutter) clamp(4rem, 10vh, 8rem); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 3vw, 3.4rem) clamp(1.4rem, 3vw, 3rem); } .wtile { display: block; } .wtile__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; } .wtile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .wtile:hover .wtile__media img { transform: scale(1.045); } .wtile__row { display: flex; flex-direction: column; gap: 0.18rem; padding: 0.85rem 0.1rem 0; } .wtile__label { font-size: clamp(1.05rem, 1.5vw, 1.45rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .wtile__meta { font-size: 0.85rem; color: var(--muted); } @media (max-width: 700px) { .work-grid { grid-template-columns: 1fr; } } /* —— Project detail —— */ .project__hero { position: relative; height: clamp(56vh, 76vh, 88vh); overflow: hidden; } .project__hero img { width: 100%; height: 100%; object-fit: cover; } .project__hero-grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,9,6,0.32), rgba(12,9,6,0) 38%, rgba(12,9,6,0.72)); } .project__hero-cap { position: absolute; left: 0; right: 0; bottom: clamp(2rem, 6vh, 4.5rem); color: #f3ead9; padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2)); } .project__cat { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-yellow); margin-bottom: 0.6rem; } .project__title { font-size: clamp(2rem, 5.5vw, 5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .project__intro { display: grid; grid-template-columns: 1fr 1.9fr; gap: clamp(2rem, 5vw, 5rem); padding: clamp(3rem, 8vh, 6rem) max(var(--gutter), calc((100% - var(--maxw)) / 2)); } .project__meta dl { display: flex; flex-direction: column; } .project__meta div { display: grid; gap: 0.15rem; border-top: 1px solid var(--line); padding: 0.85rem 0; } .project__meta dt { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .project__meta dd { font-size: 0.98rem; font-weight: 500; } .project__summary { font-size: clamp(1.3rem, 2.3vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.28; margin-bottom: 1.3rem; } .project__para { font-size: clamp(1rem, 1.25vw, 1.18rem); color: var(--muted); line-height: 1.65; max-width: 62ch; } .project__gallery { padding: clamp(2rem, 5vh, 4rem) max(var(--gutter), calc((100% - var(--maxw)) / 2)) clamp(3rem, 7vh, 6rem); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.8rem); } .project__shot { margin: 0; border-radius: 5px; overflow: hidden; } .project__shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .project__shot.is-wide { grid-column: 1 / -1; aspect-ratio: 16 / 8; } .project__shot:not(.is-wide) { aspect-ratio: 4 / 3; } .project__next { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(3rem, 8vh, 6rem) max(var(--gutter), calc((100% - var(--maxw)) / 2)); } .project__next-k { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .project__next-t { font-size: clamp(1.6rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; transition: color .3s var(--ease); } .project__next:hover .project__next-t { color: var(--orange); } /* Opt-in masonry for projects shot entirely in portrait — the default 4:3 crop decapitates tall subjects like colonnades and courtyard voids. */ .project__gallery.is-masonry { display: block; columns: 2; column-gap: clamp(1rem, 2vw, 1.8rem); } .project__gallery.is-masonry .project__shot { break-inside: avoid; margin: 0 0 clamp(1rem, 2vw, 1.8rem); aspect-ratio: auto; } .project__gallery.is-masonry .project__shot img { height: auto; } @media (min-width: 1100px) { .project__gallery.is-masonry { columns: 3; } } @media (max-width: 760px) { .project__intro { grid-template-columns: 1fr; } .project__gallery { grid-template-columns: 1fr; } .project__shot.is-wide { aspect-ratio: 16 / 10; } .project__gallery.is-masonry { columns: 1; } } /* —— About page —— */ .about > section { padding: clamp(3.5rem, 9vh, 7rem) var(--gutter); } .about > .process, .about > .caps { padding: clamp(3.5rem, 9vh, 7rem) var(--gutter); } .about-hd { padding-top: clamp(8.5rem, 17vh, 13rem); } .about-intro { max-width: 46rem; margin-top: clamp(1.4rem, 3vh, 2.4rem); font-size: clamp(1.4rem, 2.7vw, 2.3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.26; } .about-story__in { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .about-story__text p { font-size: clamp(1.05rem, 1.35vw, 1.28rem); line-height: 1.62; color: var(--muted); margin-bottom: 1.2rem; max-width: 60ch; } .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2.2rem); } .about-stat { border-top: 1px solid var(--line); padding-top: 0.8rem; } .about-stat__n { display: block; font-size: clamp(2rem, 3.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .about-stat__l { font-size: 0.85rem; color: var(--muted); } .about-approach__big { max-width: var(--maxw); margin: 0 auto; font-size: clamp(1.6rem, 3.2vw, 2.9rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; } .values__grid { max-width: var(--maxw); margin: clamp(1.5rem, 4vh, 3rem) auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem); } .value { border-top: 1px solid var(--line); padding-top: 1.2rem; } .value__n { font-size: 0.8rem; color: var(--orange); font-weight: 700; letter-spacing: 0.1em; } .value__title { font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; margin: 0.4rem 0 0.6rem; } .value__desc { font-size: clamp(0.98rem, 1.2vw, 1.12rem); color: var(--muted); line-height: 1.55; max-width: 44ch; } .sectors__list { max-width: var(--maxw); margin: clamp(1.5rem, 4vh, 3rem) auto 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 5rem); } .sectors__list li { font-size: clamp(1.3rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; padding: clamp(0.9rem, 2vh, 1.4rem) 0; border-top: 1px solid var(--line); } .awards__list { max-width: var(--maxw); margin: clamp(1.5rem, 4vh, 3rem) auto 0; } .award { display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem; padding: clamp(0.9rem, 2vh, 1.3rem) 0; border-top: 1px solid var(--line); align-items: baseline; } .award__yr { font-size: 0.95rem; color: var(--muted); font-variant-numeric: tabular-nums; } .award__t { font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 600; } .about-cta { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(3.5rem, 9vh, 7rem) var(--gutter); transition: opacity .3s var(--ease); } .about-cta__k { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .about-cta__t { font-size: clamp(2rem, 5vw, 4.2rem); font-weight: 800; letter-spacing: -0.03em; } .about-cta:hover { opacity: 0.82; } @media (max-width: 760px) { .about-story__in { grid-template-columns: 1fr; } .values__grid, .sectors__list { grid-template-columns: 1fr; } } /* —— Team page —— */ .team-page__grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(4rem, 10vh, 8rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(1.2rem, 2vw, 2.2rem); } /* —— Journal —— */ .jfeat { max-width: var(--maxw); margin: 0 auto clamp(2.5rem, 5vh, 4rem); padding: 0 var(--gutter); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; } .jfeat__media { aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; } .jfeat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .jfeat:hover .jfeat__media img { transform: scale(1.04); } .jfeat__body { display: flex; flex-direction: column; gap: 0.7rem; } .jfeat__meta { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .jfeat__title { font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; } .jfeat__excerpt { font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--muted); line-height: 1.55; max-width: 46ch; } .jfeat__more { font-weight: 600; } .journal__grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(4rem, 10vh, 8rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.5vw, 2.6rem); } .jcard { display: flex; flex-direction: column; gap: 0.45rem; } .jcard__media { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; margin-bottom: 0.3rem; } .jcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .jcard:hover .jcard__media img { transform: scale(1.04); } .jcard__meta { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .jcard__title { font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .jcard__excerpt { font-size: 0.92rem; color: var(--muted); line-height: 1.5; } @media (max-width: 860px) { .jfeat { grid-template-columns: 1fr; } .journal__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .journal__grid { grid-template-columns: 1fr; } } /* —— Article —— */ .article__hero { position: relative; height: clamp(42vh, 58vh, 70vh); overflow: hidden; } /* The hero band is wider than the 16:7 cover files, so `cover` crops them a second time. Bias that crop upward — these are group photographs and centre-cropping takes the heads off. */ .article__hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .article__body { padding: clamp(3rem, 8vh, 6rem) max(var(--gutter), calc((100% - 50rem) / 2)) clamp(2rem, 5vh, 4rem); } .article__meta { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; } .article__title { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); } .article__text p { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.7; margin-bottom: 1.3rem; } .article__back { display: inline-block; margin-top: 1.5rem; font-weight: 600; color: var(--muted); } .article__back:hover { color: var(--fg); } /* structured appointment lists inside an article (honours, roles, memberships) */ .article__group { margin-top: clamp(2rem, 5vh, 3.2rem); } .article__group-hd { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); } .article__group-list li { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.5; padding: 0.75rem 0; border-bottom: 1px solid var(--line); } /* article photo gallery — masonry columns so portrait, landscape and panoramic phone shots all sit at their natural aspect ratio instead of being cropped */ .article__gallery { padding: clamp(2.5rem, 6vh, 4.5rem) max(var(--gutter), calc((100% - var(--maxw)) / 2)); columns: 2; column-gap: clamp(1rem, 2vw, 1.8rem); } .article__shot { break-inside: avoid; margin: 0 0 clamp(1rem, 2vw, 1.8rem); } .article__shot img { width: 100%; height: auto; display: block; border-radius: 5px; } .article__cap { font-size: 0.8rem; color: var(--muted); line-height: 1.4; margin-top: 0.55rem; } /* three columns would leave one empty on a short gallery */ @media (min-width: 1100px) { .article__gallery { columns: 3; } .article__gallery.is-few { columns: 2; } } @media (max-width: 620px) { .article__gallery { columns: 1; } } .article__more { padding: clamp(3rem, 7vh, 5rem) var(--gutter); } .article__more .sec__head { margin-bottom: clamp(1.5rem, 3vh, 2.2rem); } .article__more .journal__grid { padding: 0; } /* —— Contact —— */ .contact-main { max-width: var(--maxw); margin: 0 auto; padding: clamp(1rem, 3vh, 2.5rem) var(--gutter) clamp(4rem, 10vh, 8rem); display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .contact-details { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vh, 2.5rem); } .contact-form { display: flex; flex-direction: column; gap: 1.1rem; } .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .cf-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .cf-field > span { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted); } .cf-field input, .cf-field select, .cf-field textarea { font: inherit; font-size: 0.98rem; color: var(--fg); background: color-mix(in srgb, var(--fg) 4%, transparent); border: 1px solid var(--line); border-radius: 6px; padding: 0.8rem 0.9rem; width: 100%; box-sizing: border-box; max-width: 100%; } .cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { outline: none; border-color: var(--orange); } .cf-field textarea { resize: vertical; } .cf-submit { align-self: flex-start; margin-top: 0.5rem; cursor: pointer; background: var(--fg); color: var(--bg); border-color: var(--fg); } .cf-submit:hover { background: var(--orange); border-color: var(--orange); color: #fff; } .hidden-field { position: absolute; left: -9999px; } .contact-thanks h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.8rem; } .contact-thanks p { color: var(--muted); margin-bottom: 1.5rem; max-width: 40ch; } @media (max-width: 800px) { .contact-main { grid-template-columns: 1fr; } } .contact-map { max-width: var(--maxw); margin: 0 auto clamp(4rem, 10vh, 8rem); padding: 0 var(--gutter); } .contact-map iframe { width: 100%; height: clamp(280px, 45vh, 460px); border: 1px solid var(--line); border-radius: 4px; display: block; filter: grayscale(0.2) contrast(1.02); } @media (max-width: 540px) { .cf-row { grid-template-columns: 1fr; } } /* —— 404 —— */ .error-page { display: grid; place-items: center; min-height: 78vh; padding: clamp(6rem, 16vh, 12rem) var(--gutter); text-align: center; } .error-code { font-size: clamp(4rem, 14vw, 11rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--orange); } .error-title { font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; margin: 0.5rem 0 1rem; } .error-text { color: var(--muted); margin-bottom: 2rem; max-width: 34rem; margin-inline: auto; } .error-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; margin-top: 2.2rem; } .error-links a { font-size: 0.95rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); } .error-links a:hover { color: var(--fg); border-bottom-color: currentColor; } /* ============================================================ ROOM — immersive opt-in project space ============================================================ */ .room { position: fixed; inset: 0; z-index: 8000; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; color: #f3ead9; } .room.is-open { opacity: 1; visibility: visible; } .room__bg { position: absolute; inset: -4%; background-size: cover; background-position: center; transform: scale(1.08); transition: transform 1.4s var(--ease), opacity .35s var(--ease); will-change: transform, opacity; } .room.is-open .room__bg { transform: scale(1); } .room__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,9,6,0.45) 0%, rgba(12,9,6,0.25) 40%, rgba(12,9,6,0.85) 100%); } .room__close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); z-index: 3; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.2rem; border: 1px solid rgba(255,255,255,0.4); border-radius: 100px; font-size: 0.85rem; font-weight: 600; backdrop-filter: blur(6px); transition: background .35s var(--ease), color .35s var(--ease); } .room__close:hover { background: #fff; color: var(--ink); } .room__content { position: absolute; left: clamp(1.5rem, 6vw, 6rem); bottom: clamp(4.5rem, 12vh, 8rem); right: clamp(1.5rem, 6vw, 6rem); z-index: 2; max-width: 40ch; } .room__n { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; color: var(--yellow); margin-bottom: 1rem; } .room__title { font-size: clamp(2rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; margin-bottom: 1.2rem; } .room__blurb { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.55; color: #e7ddcb; margin-bottom: 1.2rem; } .room__meta { font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: #bdae98; display: flex; gap: 0.7rem; } .room__nav { position: absolute; right: clamp(1.5rem, 6vw, 6rem); bottom: clamp(1.5rem, 4vh, 2.5rem); z-index: 3; display: flex; align-items: center; gap: 1rem; } .room__nav button { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; font-size: 1.2rem; transition: background .35s var(--ease), color .35s var(--ease); } .room__nav button:hover { background: #fff; color: var(--ink); } .room__count { font-size: 0.85rem; color: #bdae98; min-width: 3.5em; text-align: center; } /* a content reveal inside the room */ .room.is-open .room__content > * { animation: roomIn .8s var(--ease) backwards; } .room.is-open .room__n { animation-delay: .15s; } .room.is-open .room__title { animation-delay: .25s; } .room.is-open .room__blurb { animation-delay: .35s; } .room.is-open .room__meta { animation-delay: .45s; } @keyframes roomIn { from { opacity: 0; transform: translateY(20px); } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .nav__links { display: none; } .nav__burger { display: flex; } .work__grid { grid-template-columns: repeat(2, 1fr); } .caps { grid-template-columns: 1fr; } .intro__meta { grid-template-columns: 1fr; gap: 1.4rem; } .studios__grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .work__grid { grid-template-columns: 1fr; } .door__frame { height: 70vh; } }