/* ================================================================ BUSINESS MODELS INC. — REDESIGN V2 "SIGNAL" Editorial brutalist. Ink + bone + one signal accent. Advanced CSS: scroll-driven animation-timeline, @property conic borders, variable-font width morphing, blend-mode inversion, clip-path wipes, cursor-tracked 3D tilt, view transitions. ================================================================ */ @property --spin { syntax: ""; inherits: false; initial-value: 0deg; } @property --glare-o { syntax: ""; inherits: false; initial-value: 0; } :root { --ink: #0d0d0d; /* neutral black */ --ink-2: #171717; --bone: #f0e9dd; --bone-2: #e2dac9; --grey: #918e8e; --signal: #ff2e63; /* BMI pink */ --signal-2: #a855f7; /* purple */ --glow: rgba(255, 46, 99, 0.5); --grad: linear-gradient(100deg, #ff2e63, #a855f7); --blue: #38bdf8; --line-d: rgba(240, 233, 221, 0.13); --line-l: rgba(10, 9, 8, 0.16); --f-disp: "Archivo", sans-serif; --f-mono: "Spline Sans Mono", monospace; --wide: "wdth" 105, "wght" 880; --narrow: "wdth" 66, "wght" 500; --ease: cubic-bezier(0.22, 1, 0.36, 1); --snap: cubic-bezier(0.87, 0, 0.13, 1); --nav-h: 92px; --r: 22px; --gut: clamp(20px, 4.5vw, 96px); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* decorative layers may bleed sideways; never let them create horizontal scroll. body only: clip on would stop the viewport from scrolling entirely */ body { overflow-x: clip; } body { background: var(--ink); color: var(--bone); font-family: var(--f-disp); font-variation-settings: "wdth" 96, "wght" 420; font-size: clamp(16.5px, 1.08vw, 18.5px); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } ::selection { background: var(--signal); color: var(--ink); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: #2b2b2b; border: 2px solid var(--ink); border-radius: 6px; } /* page transitions */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out 0.3s ease both; } ::view-transition-new(root) { animation: vt-in 0.55s var(--ease) both; } @keyframes vt-out { to { opacity: 0; filter: brightness(2); } } @keyframes vt-in { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } } /* ---------------- typographic voice ---------------- */ h1, h2, h3 { line-height: 0.92; letter-spacing: -0.015em; text-wrap: balance; } .mega { font-variation-settings: "wdth" 105, "wght" 900; font-size: clamp(3.4rem, 11.8vw, 12.5rem); margin-left: -0.045em; /* optical alignment: giant glyph side-bearing compensation */ text-transform: uppercase; line-height: 0.84; letter-spacing: -0.028em; } .h-xl { font-variation-settings: var(--wide); font-size: clamp(2rem, 4vw, 3.6rem); text-transform: none; letter-spacing: -0.02em; } .h-lg { font-variation-settings: "wdth" 105, "wght" 840; font-size: clamp(1.6rem, 3vw, 2.6rem); text-transform: none; letter-spacing: -0.02em; } .h-md { font-variation-settings: "wdth" 104, "wght" 700; font-size: clamp(1.15rem, 1.9vw, 1.6rem); } .mono { font-family: var(--f-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .lede { color: var(--grey); font-size: clamp(1.1rem, 1.4vw, 1.3rem); max-width: 58ch; line-height: 1.6; } .sec--bone .lede { color: #55524c; } .accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* variable-font width morph, driven by scroll position */ /* width + weight morph. Containers wrap normally, so intermediate (narrower) states can never overflow — the final wide state IS the layout size. Never apply .morph-w to nowrap elements like .bleed. */ @supports (animation-timeline: view()) { .morph-w { animation: morph-width linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } @keyframes morph-width { /* width stays at its final value the whole time so line breaks never change mid-animation; only the weight goes thin -> bold */ from { font-variation-settings: "wdth" 105, "wght" 100; opacity: 0.3; } to { font-variation-settings: "wdth" 105, "wght" 880; opacity: 1; } } } /* per-letter rise (JS splits [data-letters] into spans) */ .ltr { display: inline-block; translate: 0 145%; /* start deeper so letters stay hidden behind the extended mask */ animation: ltr-up 0.9s var(--snap) forwards; animation-delay: calc(var(--li) * 0.035s + 0.15s); transform-origin: 0 100%; } .ltr-mask { display: inline-block; overflow: clip; vertical-align: bottom; /* extend the clip box so descenders (g y j) and ascenders never get cut by the tight heading line-height; negative margins cancel the layout shift */ padding: 0.12em 0 0.24em; margin: -0.12em 0 -0.24em; } .word { display: inline-block; white-space: nowrap; } /* per-letter hover flip: white ↔ orange */ .ltr { transition: color 0.15s ease, -webkit-text-fill-color 0.15s ease, translate 0s; } [data-letters] .ltr-mask:hover .ltr { color: var(--signal); -webkit-text-fill-color: var(--signal); } [data-letters] .accent .ltr-mask:hover .ltr { color: var(--bone); -webkit-text-fill-color: var(--bone); } /* solid pink words: letters flip to white on hover */ .pink { color: var(--signal); } [data-letters] .pink .ltr-mask:hover .ltr { color: var(--bone); -webkit-text-fill-color: var(--bone); } @keyframes ltr-up { to { translate: 0 0; } } /* image poured into type */ .img-text { background-image: linear-gradient(120deg, var(--signal), var(--signal-2)); background-size: cover; background-position: center 30%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------------- preloader ---------------- */ .preloader { position: fixed; inset: 0; z-index: 4000; background: var(--ink); display: grid; place-items: center; transition: clip-path 0.85s var(--snap); clip-path: inset(0); } .preloader.done { clip-path: inset(0 0 100% 0); } .preloader .pl-inner { text-align: center; } .preloader .pl-count { font-variation-settings: var(--wide); font-size: clamp(5rem, 18vw, 14rem); line-height: 1; text-transform: uppercase; } .preloader .pl-word { display: block; margin-top: 10px; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--grey); } /* ---------------- cursor ---------------- */ .cursor-dot { position: fixed; top: 0; left: 0; z-index: 3000; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); pointer-events: none; translate: -50% -50%; transition: width 0.3s var(--snap), height 0.3s var(--snap), background 0.25s, border 0.25s; border: 0 solid transparent; display: grid; place-items: center; font-family: var(--f-disp); font-size: 0; font-variation-settings: "wdth" 100, "wght" 650; color: var(--bone); } .cursor-dot.is-link { width: 40px; height: 40px; background: transparent; border: 1.5px solid var(--signal); } .cursor-dot.is-drag { width: 68px; height: 68px; background: var(--signal); font-size: 0.76rem; letter-spacing: 0.06em; color: #fff; } .cursor-dot.is-drag::after { content: "← DRAG →"; } @media (hover: none), (pointer: coarse) { .cursor-dot { display: none; } } /* ---------------- scroll progress + section index ---------------- */ .scroll-progress { position: fixed; top: 0; left: 0; z-index: 1600; width: 100%; height: 2px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); } @supports (animation-timeline: scroll()) { .scroll-progress { animation: sp linear both; animation-timeline: scroll(root); } @keyframes sp { to { transform: scaleX(1); } } } .edge-meta { display: none !important; } .edge-meta-off { position: fixed; right: 14px; bottom: 18px; z-index: 900; writing-mode: vertical-rl; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--grey); opacity: 0.7; pointer-events: none; } @media (max-width: 960px) { .edge-meta { display: none; } } /* ---------------- nav ---------------- */ .site-nav { position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gut); background: color-mix(in srgb, var(--ink) 72%, transparent); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--line-d); transition: transform 0.5s var(--ease); } .site-nav.is-hidden { transform: translateY(-100%); } .wordmark { font-variation-settings: "wdth" 105, "wght" 800; font-size: 1.02rem; letter-spacing: -0.01em; white-space: nowrap; } /* animated BMI logo: artwork is near-black, inverted to white on dark surfaces */ .logo-img { display: block; height: clamp(56px, 7.4vh, 72px); width: auto; filter: invert(1); } .page-light .site-nav .logo-img { filter: none; } .logo-img--ink { filter: none; height: 56px; } .footer-logos { display: flex; align-items: center; gap: 28px; } .footer-brand .btn--book { margin-top: 22px; font-size: 0.85rem; padding: 13px 24px; } .mt-md { margin-top: 18px; } .footer-logos .footer-miro { height: 26px; width: auto; opacity: 0.9; } .footer-brand .wordmark { font-size: 1.3rem; } .nav-links { display: flex; gap: clamp(16px, 2.4vw, 40px); align-items: center; } .nav-links > li { position: relative; } .nav-link { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); padding: 10px 0; position: relative; transition: color 0.3s; } .nav-link::before { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 1px; background: var(--signal); scale: 0 1; transform-origin: 100% 0; transition: scale 0.4s var(--snap); } .nav-link:hover, .nav-link.active { color: var(--bone); } .nav-link:hover::before, .nav-link.active::before { scale: 1 1; transform-origin: 0 0; } /* ---- letter ripple: pink runs through the word letter by letter. the page you are on holds the pink ---- */ .lw { display: inline-block; white-space: nowrap; } .lt { display: inline-block; transition: color 0.22s ease calc(var(--rd, 0) * 28ms), translate 0.3s var(--snap) calc(var(--rd, 0) * 28ms); } .nav-link:hover .lt, .menu-big:hover .lt { color: var(--signal); translate: 0 -2px; } .nav-link.active .lt { color: var(--signal); } .menu-big:hover .lt { translate: 0 -5px; } .nav-drop { border-radius: 14px; overflow: clip; position: absolute; top: 100%; left: -14px; min-width: 190px; background: var(--ink-2); border: 1px solid var(--line-d); padding: 6px; opacity: 0; visibility: hidden; translate: 0 10px; transition: 0.3s var(--ease); } .nav-links > li:hover .nav-drop, .nav-links > li:focus-within .nav-drop { opacity: 1; visibility: visible; translate: 0 0; } .nav-drop a { display: block; padding: 10px 14px; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); transition: 0.25s; } .nav-drop a:hover { background: var(--ink); color: var(--signal); padding-left: 20px; } .nav-cta { font-family: var(--f-disp); font-size: 0.88rem; font-variation-settings: "wdth" 100, "wght" 600; letter-spacing: 0; text-transform: none; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--bone); position: relative; overflow: hidden; z-index: 1; transition: color 0.35s, border-color 0.35s; } .nav-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal); translate: -101% 0; transition: translate 0.4s var(--snap); } .nav-cta:hover { color: var(--ink); border-color: var(--signal); } .nav-cta:hover::before { translate: 0 0; } /* ================= CJK typography: Chinese needs air where Latin caps need none ================= */ html[lang="zh-Hant"] .hero h1, html[lang="zh-Hant"] .d-hero h1 { line-height: 1.14; letter-spacing: 0.02em; } html[lang="zh-Hant"] .hero h1 .mega, html[lang="zh-Hant"] .mega { margin-left: 0; letter-spacing: 0.02em; } html[lang="zh-Hant"] .nav-link { font-size: 0.98rem; letter-spacing: 0.14em; } html[lang="zh-Hant"] .menu-big { line-height: 1.3; } html[lang="zh-Hant"] h2, html[lang="zh-Hant"] h3 { line-height: 1.3; } html[lang="zh-Hant"] .statement h2, html[lang="zh-Hant"] .road-cta h2 { line-height: 1.35; } html[lang="zh-Hant"] .sec-label { font-size: 0.9rem; } html[lang="zh-Hant"] .mt-kicker, html[lang="zh-Hant"] .p-lbl, html[lang="zh-Hant"] .cf-lab { font-size: 0.9rem; } /* three languages, one slider */ .lang-slider { display: inline-flex; border: 1px solid var(--line-d); border-radius: 100px; padding: 3px; gap: 2px; margin-right: 4px; } .lang-slider a { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--grey); padding: 6px 10px; border-radius: 100px; transition: color 0.3s, background-color 0.3s; } .lang-slider a:hover { color: var(--bone); } .lang-slider a.on { color: #0d0d0d; background: var(--signal); } .page-light .lang-slider { border-color: var(--line-l); } .page-light .lang-slider a { color: #75716a; } .page-light .lang-slider a:hover { color: var(--ink); } .page-light .lang-slider a.on { color: #fff; background: var(--signal); } .nav-burger { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; position: relative; z-index: 1300; } .nav-burger span { position: absolute; left: 8px; right: 8px; height: 2px; background: var(--bone); transition: 0.35s var(--snap); } .nav-burger span:nth-child(1) { top: 16px; } .nav-burger span:nth-child(2) { top: 26px; } body.menu-open .nav-burger span { background: var(--ink); } body.menu-open .nav-burger span:nth-child(1) { top: 21px; rotate: 45deg; } body.menu-open .nav-burger span:nth-child(2) { top: 21px; rotate: -45deg; } /* full-screen menu — inverted bone panel */ .menu-overlay { position: fixed; inset: 0; z-index: 1200; background: var(--bone); color: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gut); clip-path: inset(0 0 100% 0); transition: clip-path 0.65s var(--snap); visibility: hidden; } body.menu-open .menu-overlay { clip-path: inset(0); visibility: visible; } .menu-big { display: flex; align-items: baseline; gap: 18px; font-variation-settings: var(--wide); font-size: clamp(2rem, 7vw, 4.6rem); line-height: 1.12; border-bottom: 1px solid var(--line-l); padding: 6px 0; opacity: 0; translate: -30px 0; transition: 0.3s; } body.menu-open .menu-big { opacity: 1; translate: 0 0; transition: opacity 0.5s var(--ease) calc(0.18s + var(--i) * 0.05s), translate 0.5s var(--ease) calc(0.18s + var(--i) * 0.05s), color 0.25s, padding-left 0.3s var(--ease); } .menu-big .idx { font-family: var(--f-mono); font-size: 0.78rem; color: var(--grey); } .menu-big:hover { color: var(--signal); padding-left: 16px; } /* ---------------- layout ---------------- */ .wrap { padding-inline: var(--gut); max-width: 1560px; margin-inline: auto; } /* every section has an explicit top boundary so blocks never blur together */ .sec { position: relative; padding-block: clamp(100px, 14vh, 180px); } /* consecutive sections share the boundary — no double padding stack */ .sec + .sec { padding-top: clamp(50px, 7vh, 100px); } .sec--bone + .sec, .sec--ember + .sec, .ticker + .sec, .ticker + section { border-top: 0; } .sec--bone { background: var(--bone); color: var(--ink); } /* ember section — black with a soft pink/purple aurora bleeding through */ .sec--ember { position: relative; overflow: visible; } .sec--ember::before { content: ""; position: absolute; /* glows overflow into the sections above AND below — no cut-offs */ left: 0; right: 0; top: -55%; bottom: -75%; z-index: -1; pointer-events: none; background: radial-gradient(circle 820px at 88% 32%, rgba(255, 46, 99, 0.32), transparent 70%), radial-gradient(circle 760px at 4% 68%, rgba(168, 85, 247, 0.22), transparent 72%); } /* ember tint behind the pinned rail so the section reads as one block */ .rail-sec { background: linear-gradient(180deg, var(--ink) 0%, #1c1c1c66 30%, #1c1c1c66 70%, var(--ink) 100%); } /* charcoal step — softer than pure black */ .sec--coal { background: radial-gradient(circle 700px at 90% 4%, rgba(168, 85, 247, 0.1), transparent 62%), radial-gradient(circle 640px at 6% 96%, rgba(255, 46, 99, 0.08), transparent 62%), #1c1c1c; background-size: 135% 135%, 135% 135%, auto; animation: sec-glow 16s ease-in-out infinite alternate; } @keyframes sec-glow { from { background-position: 0% 0%, 100% 100%, 0 0; } to { background-position: 70% 45%, 30% 55%, 0 0; } } /* every plain dark section carries a drifting aurora — nothing sits on flat black */ .sec::after, .d-hero::after { content: ""; position: absolute; inset: -18% -4%; z-index: -1; pointer-events: none; background: radial-gradient(circle 720px at 86% 8%, rgba(168, 85, 247, 0.22), transparent 64%), radial-gradient(circle 640px at 8% 94%, rgba(255, 46, 99, 0.16), transparent 64%); filter: blur(52px); animation: glow-drift 14s ease-in-out infinite alternate; } .d-hero { position: relative; } /* every dark surface breathes: coal keeps the aurora too, only light surfaces opt out */ .sec--bone::after, .sec--ember::after, .page-light .sec::after, .page-light .d-hero::after { content: none; } .sec--coal::after { opacity: 0.85; } .sec--ember::before { animation: glow-drift 14s ease-in-out infinite alternate; } .sec--bone ::selection { background: var(--ink); color: var(--bone); } .rule { border: 0; border-top: 1px solid var(--line-d); } .sec--bone .rule { border-color: var(--line-l); } .sec-label { display: flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-bottom: clamp(26px, 4vh, 44px); } .sec-label::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.12; } .sec-label .n { color: var(--signal); } .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(34px, 6vh, 70px); } /* reveal */ [data-reveal] { opacity: 0; translate: 0 40px; transition: opacity 0.85s var(--ease) calc(var(--i, 0) * 80ms), translate 0.85s var(--ease) calc(var(--i, 0) * 80ms); } [data-reveal].in-view { opacity: 1; translate: 0 0; } /* scroll-driven image parallax */ .par { overflow: clip; } @supports (animation-timeline: view()) { .par > img, .par .st-media img, .par .wtd-media img { scale: 1.56; animation: par-y linear both; animation-timeline: view(); } @keyframes par-y { from { translate: 0 26%; } to { translate: 0 -26%; } } } /* duotone image treatment — colour floods back on hover */ .tone img { filter: grayscale(1) contrast(1.08) brightness(0.92); transition: filter 0.7s var(--ease), scale 0.9s var(--ease); } .tone:hover img { filter: grayscale(0) contrast(1) brightness(1); } /* ---------------- buttons ---------------- */ .btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-disp); font-size: 0.95rem; font-variation-settings: "wdth" 100, "wght" 600; letter-spacing: 0; text-transform: none; padding: 16px 30px; border-radius: 999px; border: 1px solid currentColor; position: relative; overflow: hidden; z-index: 1; transition: color 0.35s var(--ease); cursor: pointer; background: none; } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal); clip-path: circle(0% at var(--mx, 50%) var(--my, 50%)); transition: clip-path 0.55s var(--snap); } .btn:hover { color: var(--ink); border-color: var(--signal); } .btn:hover::before { clip-path: circle(140% at var(--mx, 50%) var(--my, 50%)); } .btn .arr { transition: translate 0.3s var(--ease); } .btn:hover .arr { translate: 5px 0; } .btn--solid { background: var(--signal); border-color: var(--signal); color: #fff; } .btn--solid::before { background: var(--bone); } .ulink { font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; position: relative; padding-bottom: 4px; } .ulink::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; scale: 1 1; transform-origin: 0 0; transition: scale 0.4s var(--snap); } .ulink:hover::after { scale: 0 1; transform-origin: 100% 0; } /* ---------------- ember glow field ---------------- */ .glow-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle 620px at 76% 12%, var(--glow), transparent 70%), radial-gradient(circle 480px at 90% 42%, rgba(168, 85, 247, 0.26), transparent 70%), radial-gradient(circle 520px at 6% 94%, rgba(56, 189, 248, 0.13), transparent 70%); filter: blur(6px) saturate(1.15); animation: glow-breathe 9s ease-in-out infinite alternate; } @keyframes glow-breathe { from { opacity: 0.75; transform: scale(1) rotate(0.001deg); } to { opacity: 1; transform: scale(1.12) rotate(1deg); } } @supports (animation-timeline: scroll()) { .hero .glow-field { animation: glow-scroll linear both; animation-timeline: scroll(root); animation-range: 0vh 110vh; } @keyframes glow-scroll { to { translate: 0 -24%; opacity: 0.15; scale: 1.35; } } } /* glass surface (Profico / AgentAI style) */ .glass { background: rgba(240, 233, 221, 0.045); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); border: 1px solid rgba(240, 233, 221, 0.11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 60px -30px rgba(0, 0, 0, 0.6); } /* headline that bleeds off both viewport edges (GANDER-style crop) */ .bleed { font-variation-settings: var(--wide); font-size: 7vw; /* refined by [data-fit] JS to exactly fill the viewport */ line-height: 0.84; text-transform: uppercase; white-space: nowrap; letter-spacing: -0.03em; user-select: none; } .bleed .fill-img { filter: contrast(1.15) brightness(1.08); } .bleed .fill-img { background-size: cover; background-position: center 28%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .bleed .stroke { color: transparent; -webkit-text-stroke: 2px var(--bone); } /* ---------------- hero (pure typography) ---------------- */ .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; padding: calc(var(--nav-h) + clamp(28px, 4.5vh, 52px)) 0 clamp(48px, 8vh, 80px); position: relative; overflow: clip; } .hero > .wrap, .hero .hero-meta { position: relative; z-index: 2; } .hero .mega .accent { } .hero .wrap { width: 100%; } .hero-meta { display: flex; justify-content: space-between; gap: 20px; font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey); padding-bottom: 12px; margin-bottom: clamp(20px, 3.5vh, 40px); flex-wrap: wrap; } .hero-meta .live { color: var(--signal); animation: blink 1.6s steps(2) infinite; } @keyframes blink { 50% { opacity: 0.25; } } .hero h1 { position: relative; z-index: 2; } .hero .ghost { position: absolute; inset: auto 0 42%; font-variation-settings: var(--wide); font-size: clamp(6rem, 24vw, 24rem); text-transform: uppercase; line-height: 1; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(233, 229, 220, 0.09); pointer-events: none; user-select: none; white-space: nowrap; z-index: 0; } @supports (animation-timeline: scroll()) { .hero .ghost { animation: ghost-slide linear both; animation-timeline: scroll(root); animation-range: 0vh 130vh; } @keyframes ghost-slide { to { translate: -14% 0; opacity: 0; } } } .hero-foot { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 3vh, 28px); margin-top: clamp(20px, 3.5vh, 40px); } .hero-foot .lede { max-width: 46ch; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* scroll hint — pure CSS animation */ .scroll-hint { margin-left: clamp(10px, 2vw, 26px); align-self: center; } /* when the hint is alone (no buttons before it), it aligns flush with the text edge */ .hero-actions .scroll-hint:first-child { margin-left: 0; } .scroll-hint { display: flex; align-items: center; gap: 12px; font-family: var(--f-disp); font-size: 0.8rem; font-variation-settings: "wdth" 100, "wght" 550; letter-spacing: 0.04em; color: var(--bone); } .scroll-hint .wheel { width: 22px; height: 36px; border: 1.5px solid var(--bone); border-radius: 12px; position: relative; } .scroll-hint .wheel::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; border-radius: 3px; background: var(--signal); translate: -50% 0; animation: wheel-drop 1.8s ease-in-out infinite; } @keyframes wheel-drop { 0% { opacity: 1; translate: -50% 0; } 70% { opacity: 0; translate: -50% 13px; } 100% { opacity: 0; translate: -50% 0; } } @supports (animation-timeline: scroll()) { .scroll-hint { animation: hint-fade linear both; animation-timeline: scroll(root); animation-range: 10vh 80vh; } @keyframes hint-fade { to { opacity: 0; } } } /* ---------------- ticker ---------------- */ .ticker { overflow: clip; user-select: none; padding-block: 22px; display: flex; background: var(--ink); } .ticker .logo-item { display: flex; align-items: center; } .ticker .logo-item img { width: auto; object-fit: contain; filter: brightness(0) invert(0.6); opacity: 0.85; transition: filter 0.3s, opacity 0.3s; } .ticker .logo-item:hover img { filter: brightness(0) invert(1); opacity: 1; } .sec--bone .ticker, .ticker--bone { background: var(--bone); border-color: var(--line-l); color: var(--ink); } .ticker-track { display: flex; gap: 48px; flex-shrink: 0; min-width: 100%; padding-right: 48px; animation: tick 36s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-track span { display: flex; align-items: center; white-space: nowrap; } .ticker-track .sep { color: var(--signal); font-variation-settings: "wdth" 100, "wght" 700; font-size: 0.85rem; letter-spacing: 0.05em; } @keyframes tick { to { transform: translateX(-100%); } } /* ---------------- pillar panels: sticky horizontal rail ---------------- */ .rail-sec { position: relative; } .rail-pin { position: sticky; top: 0; height: 100svh; overflow: clip; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3.5vh, 40px); padding-top: var(--nav-h); } .rail-head { width: 100%; } .rail-head h2 { font-variation-settings: var(--wide); font-size: clamp(2rem, 5.2vw, 4.4rem); text-transform: uppercase; } .rail-track { display: flex; gap: clamp(20px, 3vw, 44px); padding-inline: var(--gut); will-change: transform; } .rail-sec { height: 380svh; } @supports (animation-timeline: scroll()) { .rail-sec { view-timeline: --rail block; } .rail-track { animation: rail-x linear both; animation-timeline: --rail; animation-range: contain 0% contain 100%; } @keyframes rail-x { to { transform: translateX(calc(-100% + 100vw - var(--gut) * 2)); } } } /* pink line that draws across a card's top as it lands on the stack */ .panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--grad); border-radius: var(--r) var(--r) 0 0; transform-origin: 0 50%; scale: var(--line, 0) 1; z-index: 2; } /* horizontal drag strip — bleeds off the right edge of the page */ .drag-strip { display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; padding: 10px var(--gut) 26px; cursor: grab; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .drag-strip::-webkit-scrollbar { display: none; } .drag-strip.dragging { cursor: grabbing; user-select: none; } .drag-strip .panel { flex: 0 0 min(72vw, 620px); } .panel { flex: 0 0 min(78vw, 760px); border: 1px solid rgba(240, 233, 221, 0.11); background: rgba(240, 233, 221, 0.045); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 60px -30px rgba(0, 0, 0, 0.6); padding: clamp(26px, 3.4vw, 56px); display: grid; grid-template-rows: auto 1fr auto; gap: 20px; min-height: min(54svh, 520px); position: relative; overflow: clip; } .panel .p-idx { font-variation-settings: var(--wide); font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.25px var(--signal); paint-order: stroke fill; } .panel:hover .p-idx { color: var(--signal); } .panel h3 { font-variation-settings: "wdth" 104, "wght" 760; font-size: clamp(1.3rem, 2.4vw, 2rem); } .panel ul { border-top: 1px solid var(--line-d); } .panel ul li { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); padding: 14px 0; border-bottom: 1px solid var(--line-d); display: flex; justify-content: space-between; align-items: center; transition: color 0.3s, padding-left 0.3s var(--ease); } .panel ul li::after { content: "→"; color: var(--signal); } .panel ul li:hover { color: var(--bone); padding-left: 10px; } .panel .p-tag { position: absolute; top: 26px; right: 26px; color: var(--grey); } /* ---------------- 3D tilt cards (pointer-tracked) ---------------- */ .tilt-scene { perspective: 1100px; } .tilt { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.18s ease-out; position: relative; overflow: clip; } .tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.08), transparent 55%); opacity: var(--glare-o, 0); transition: --glare-o 0.3s; } .tilt:hover::after { --glare-o: 1; } /* ---------------- conic-border stat chips ---------------- */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .chip { border-radius: var(--r); --spin: 0deg; position: relative; padding: clamp(26px, 3vw, 44px); background: rgba(240, 233, 221, 0.04); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-d); overflow: clip; } @keyframes chip-spin { to { --spin: 360deg; } } /* --- interactive stat chips --- */ .chip { transition: border-color 0.35s, box-shadow 0.45s var(--ease); cursor: default; } .chip:hover { border-color: rgba(255, 46, 99, 0.5); box-shadow: 0 0 28px -14px rgba(255, 46, 99, 0.35); } .chip.tilt::after { background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 46, 99, 0.16), transparent 60%); } .chip .num { display: inline-block; transition: scale 0.45s var(--snap); } .chip:hover .num { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .chip .lbl { transition: color 0.3s; } .chip:hover .lbl { color: var(--bone); } .chip .num { font-variation-settings: var(--wide); font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1; text-transform: uppercase; } .chip .lbl { font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); margin-top: 12px; display: block; } /* ---------------- case index rows + cursor-tracked preview ---------------- */ .case-index { border-top: 1px solid var(--line-d); counter-reset: cr; } /* home: exactly five rows share one full screen once you scroll past heading + intro */ .case-index { display: grid; grid-auto-rows: 1fr; min-height: calc(100svh - var(--nav-h)); } .sec--bone .case-index { border-color: var(--line-l); } .case-row { counter-increment: cr; display: grid; grid-template-columns: 110px 1.1fr 2fr auto; align-items: center; gap: clamp(14px, 2.6vw, 44px); padding: clamp(20px, 2.8vw, 36px) 12px clamp(20px, 2.8vw, 36px) 0; border-bottom: 1px solid var(--line-d); position: relative; transition: opacity 0.3s; } .sec--bone .case-row { border-color: var(--line-l); } .case-row::before { content: counter(cr, decimal-leading-zero); font-family: var(--f-disp); font-variation-settings: "wdth" 105, "wght" 800; font-size: clamp(1.3rem, 2vw, 1.9rem); color: transparent; -webkit-text-stroke: 1.25px var(--grey); transition: 0.3s; } .case-row:hover::before { color: var(--signal); -webkit-text-stroke: 1.25px var(--signal); } .case-index:hover .case-row:not(:hover) { opacity: 0.3; } .case-row .cr-client { font-variation-settings: "wdth" 104, "wght" 760; font-size: clamp(1.1rem, 2vw, 1.7rem); transition: color 0.3s, translate 0.35s var(--ease); } .case-row:hover .cr-client { color: var(--signal); translate: 10px 0; } .case-row .cr-title { color: var(--grey); font-size: clamp(1.05rem, 1.35vw, 1.3rem); } .case-row .cr-arrow { font-size: 1.3rem; transition: rotate 0.4s var(--snap); } .case-row:hover .cr-arrow { rotate: 45deg; color: var(--signal); } /* ---------------- media tiles ---------------- */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: clamp(16px, 2vw, 26px); align-items: stretch; /* all cards end on the same bottom line */ } /* cards sit on one line; the IMAGE bands step in equal increments */ @media (min-width: 961px) { .tile-grid > :nth-child(3n+1) .mt-media { height: clamp(170px, 22vh, 240px); } .tile-grid > :nth-child(3n+2) .mt-media { height: calc(clamp(170px, 22vh, 240px) + 70px); } .tile-grid > :nth-child(3n+3) .mt-media { height: calc(clamp(170px, 22vh, 240px) + 140px); } } .mtile { border-radius: var(--r); overflow: clip; border: 1px solid var(--line-d); background: var(--ink-2); display: flex; flex-direction: column; position: relative; overflow: clip; } .sec--bone .mtile { border-color: var(--line-l); background: #f2efe7; } .mtile .mt-media { height: clamp(170px, 23vh, 250px); /* uniform image band on every card */ flex: 0 0 auto; overflow: clip; position: relative; } .mtile .mt-media img { width: 100%; height: 100%; object-fit: cover; } .mtile:hover .mt-media img { scale: 1.06; } .mtile .mt-body { padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 12px; flex: 1; } .mtile .mt-kicker { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--signal); } .mtile h3 { font-variation-settings: "wdth" 104, "wght" 720; font-size: clamp(1.1rem, 1.7vw, 1.45rem); } .mtile p { color: var(--grey); font-size: 0.92rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sec--bone .mtile p { color: #55524c; } .mtile .mt-cta { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; display: flex; gap: 10px; } .mtile .mt-cta .arr { transition: translate 0.3s var(--ease); } .mtile:hover .mt-cta .arr { translate: 6px 0; } .mtile::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--grad); scale: 0 1; transform-origin: 0 0; transition: scale 0.5s var(--snap); } .mtile:hover::after { scale: 1 1; } /* ---------------- service index rows ---------------- */ .svc-list { border-top: 1px solid var(--line-d); counter-reset: svc; } .sec--bone .svc-list { border-color: var(--line-l); } .svc-row { counter-increment: svc; display: grid; grid-template-columns: 110px 1.4fr 1fr auto; gap: clamp(14px, 2.5vw, 46px); align-items: center; padding: clamp(20px, 3vw, 40px) 12px clamp(20px, 3vw, 40px) 0; border-bottom: 1px solid var(--line-d); position: relative; overflow: clip; } .sec--bone .svc-row { border-color: var(--line-l); } .svc-row::before { content: counter(svc, decimal-leading-zero); font-family: var(--f-disp); font-variation-settings: "wdth" 105, "wght" 800; font-size: clamp(1.3rem, 2vw, 1.9rem); color: transparent; -webkit-text-stroke: 1.25px var(--grey); transition: 0.3s; } .svc-row:hover::before { color: var(--ink); -webkit-text-stroke: 1.25px var(--ink); } .svc-row::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad); translate: 0 101%; transition: translate 0.4s var(--snap); } .svc-row:hover::after { translate: 0 0; } .svc-row:hover { color: var(--ink); border-color: var(--signal); } .svc-row:hover::before { color: var(--ink); } .svc-row h3 { font-variation-settings: "wdth" 105, "wght" 780; font-size: clamp(1.15rem, 2.2vw, 1.8rem); text-transform: none; transition: translate 0.35s var(--ease); } .svc-row:hover h3 { translate: 12px 0; } .svc-row .sr-tag { color: var(--grey); font-size: clamp(1.05rem, 1.35vw, 1.3rem); max-width: 46ch; transition: color 0.3s; } .svc-row:hover .sr-tag { color: rgba(11, 11, 13, 0.75); } .svc-row .sr-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line-d); display: grid; place-items: center; font-size: 1.15rem; color: var(--grey); transition: 0.4s var(--snap); } .page-light .svc-row .sr-arrow, .sec--bone .svc-row .sr-arrow { border-color: var(--line-l); color: #75716a; } .svc-row:hover .sr-arrow { background: var(--ink); border-color: var(--ink); color: var(--bone); rotate: -45deg; scale: 1.08; } /* ---------------- split ---------------- */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); gap: clamp(30px, 5vw, 90px); align-items: center; } .frame { border: 1px solid var(--line-d); padding: 10px; border-radius: var(--r); overflow: clip; } .frame .par, .frame img { border-radius: calc(var(--r) - 10px); } .sec--bone .frame { border-color: var(--line-l); } .frame .par { aspect-ratio: 4 / 3; } .frame img { width: 100%; height: 100%; object-fit: cover; } /* ---------------- accordion ---------------- */ .acc { border-top: 1px solid var(--line-d); counter-reset: acc; } .sec--bone .acc { border-color: var(--line-l); } .acc details { border-bottom: 1px solid var(--line-d); } .sec--bone .acc details { border-color: var(--line-l); } .acc summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 18px; padding: clamp(18px, 2.4vw, 30px) 0; counter-increment: acc; transition: color 0.3s; } .acc summary::-webkit-details-marker { display: none; } .acc summary::before { content: counter(acc, decimal-leading-zero); font-family: var(--f-mono); font-size: 0.95rem; color: var(--grey); } .acc summary .q { font-variation-settings: "wdth" 104, "wght" 700; font-size: clamp(1.2rem, 2.2vw, 1.8rem); } .acc summary .plus { font-family: var(--f-mono); font-size: 1.1rem; transition: rotate 0.4s var(--snap), color 0.3s; } .acc details[open] summary { color: var(--signal); } .acc details[open] .plus { rotate: 45deg; color: var(--signal); } .acc .acc-body { padding: 0 0 28px 56px; color: var(--grey); max-width: 72ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); animation: acc-in 0.45s var(--ease); } .sec--bone .acc .acc-body { color: #55524c; } @keyframes acc-in { from { opacity: 0; translate: 0 -8px; } } .acc .acc-body ul { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .acc .acc-body ul li { display: flex; gap: 12px; } .acc .acc-body ul li::before { content: "//"; color: var(--signal); font-family: var(--f-mono); } /* ---------------- quote ---------------- */ .quote { padding-left: clamp(20px, 3vw, 40px); border-left: 2px solid var(--signal); font-variation-settings: "wdth" 104, "wght" 560; font-size: clamp(1.3rem, 2.6vw, 2.2rem); line-height: 1.3; } .quote cite { display: block; margin-top: 20px; font-style: normal; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); } /* ---------------- team ---------------- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: clamp(12px, 1.6vw, 20px); } .member { position: relative; overflow: clip; border-radius: var(--r); border: 1px solid var(--line-d); aspect-ratio: 3 / 3.7; background: var(--ink-2); } .member { cursor: pointer; } .member .m-media { position: absolute; inset: 0; } .member .m-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* b/w portrait crossfades to the real color photo on hover */ .member .m-color { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--snap); } .member:hover .m-color { opacity: 1; } /* portraits keep their smooth studio backgrounds: no contrast push, no banding. a whisper of film grain dithers away the posterization baked into the sources */ .member .m-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; 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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); background-size: 160px 160px; opacity: 0.16; mix-blend-mode: overlay; } .member.tone img { filter: grayscale(1); } .member.tone .m-color { filter: none; } .member.tone:hover img { filter: grayscale(1); } .member.tone:hover .m-color { filter: none; } /* bio text lives hidden in the card; the lightbox reads it from here */ .member .m-bio { display: none; } .member { cursor: pointer; } /* ---------------- contact form ---------------- */ .cform { position: relative; display: grid; gap: 30px; align-content: start; padding: clamp(28px, 3.4vw, 50px); background: rgba(240, 233, 221, 0.03); border: 1px solid var(--line-d); border-radius: var(--r); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; } /* the panel breathes: gradient hairline on top, aurora drifting inside */ .cform::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); background-size: 230% 230%; animation: grad-move 7s ease-in-out infinite; } .cform::after { content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none; background: radial-gradient(480px circle at 88% 6%, rgba(168, 85, 247, 0.16), transparent 62%), radial-gradient(420px circle at 6% 96%, rgba(255, 46, 99, 0.13), transparent 62%); animation: glow-drift 12s ease-in-out infinite alternate; } .cform > * { position: relative; z-index: 1; } .cform label { display: grid; gap: 12px; } .cf-lab { display: flex; gap: 10px; align-items: baseline; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); transition: color 0.3s; } .cf-lab i { font-style: normal; color: var(--signal); } .cform label:focus-within .cf-lab { color: var(--bone); } .cform input, .cform textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line-d); border-radius: 0; padding: 10px 2px 14px; color: var(--bone); font: inherit; font-size: 1.12rem; /* focus draws the brand gradient along the baseline, left to right */ background: linear-gradient(90deg, var(--signal), var(--signal-2)) no-repeat left bottom / 0% 2px; transition: background-size 0.55s var(--ease), border-color 0.3s; } .cform ::placeholder { color: rgba(240, 233, 221, 0.28); } .cform input:focus, .cform textarea:focus { outline: none; border-color: transparent; background-size: 100% 2px; } .cform textarea { resize: vertical; min-height: 140px; } .cf-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .cf-pill input { position: absolute; opacity: 0; pointer-events: none; } .cf-pill span { display: inline-block; padding: 10px 18px; border: 1px solid var(--line-d); border-radius: 100px; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); cursor: pointer; transition: color 0.3s, border-color 0.3s, background-color 0.3s; } .cf-pill:hover span { color: var(--bone); border-color: rgba(255, 46, 99, 0.5); } .cf-pill input:checked + span { color: #0d0d0d; border-color: transparent; background: var(--grad); background-size: 230% 230%; animation: grad-move 7s ease-in-out infinite; } .cf-pill input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; } .cform button { justify-self: start; } .cf-note { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); } .cform-done { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.6; color: var(--bone); } .cform-err { color: var(--signal); font-size: 1rem; } .cform-err a { color: var(--bone); text-decoration: underline; } /* full-screen quote band: the testimonial owns the whole viewport */ .quote-screen { min-height: calc(100svh - var(--nav-h)); display: grid; align-items: center; } .quote-screen .quote { font-variation-settings: "wdth" 102, "wght" 300; font-size: clamp(1.7rem, 3.4vw, 3.1rem); line-height: 1.4; } /* ---------------- team lightbox: color photo left, story on black right ---------------- */ .tm-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: clamp(18px, 4vw, 64px); background: rgba(13, 13, 13, 0.74); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity 0.35s; } .tm-modal.open { opacity: 1; pointer-events: auto; } .tm-frame { position: relative; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); width: min(1020px, 100%); max-height: 86svh; background: #0d0d0d; border: 1px solid var(--line-d); border-radius: var(--r); overflow: hidden; transform: translateY(26px) scale(0.97); transition: transform 0.5s var(--ease); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.85); } .tm-frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; background: var(--grad); background-size: 230% 230%; animation: grad-move 7s ease-in-out infinite; } .tm-modal.open .tm-frame { transform: none; } .tm-photo { min-height: 460px; } .tm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .tm-panel { padding: clamp(30px, 4.4vw, 58px); display: flex; flex-direction: column; overflow-y: auto; } .tm-panel h3 { font-variation-settings: var(--wide); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.05; text-transform: uppercase; color: var(--bone); } .tm-role { font-family: var(--f-mono); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-top: 12px; } .tm-loc { font-family: var(--f-mono); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); margin-top: 6px; } .tm-bio { margin-top: 24px; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.75; color: rgba(240, 233, 221, 0.82); } .tm-close { position: absolute; top: 16px; right: 16px; z-index: 4; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-d); background: rgba(13, 13, 13, 0.6); color: var(--bone); font-size: 17px; line-height: 1; cursor: pointer; transition: border-color 0.3s, rotate 0.45s var(--snap); } .tm-close:hover { border-color: var(--signal); rotate: 90deg; } @media (max-width: 780px) { .tm-frame { grid-template-columns: 1fr; max-height: 90svh; overflow-y: auto; } .tm-photo { min-height: 0; height: 42svh; } } .member .m-info { z-index: 3; position: absolute; inset: auto 0 0 0; padding: 14px 16px; background: var(--ink); border-top: 1px solid var(--line-d); translate: 0 calc(100% - 46px); transition: translate 0.45s var(--snap); } .member:hover .m-info { translate: 0 0; } .member .m-info strong { display: block; font-variation-settings: "wdth" 104, "wght" 700; text-transform: uppercase; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .member .m-info span { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); display: block; } .member .m-info .m-loc { color: var(--signal); margin-top: 2px; } /* ---------------- filters ---------------- */ .filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vh, 44px); } .filter-pill { font-family: var(--f-disp); font-size: 0.85rem; letter-spacing: 0; text-transform: none; font-variation-settings: "wdth" 100, "wght" 550; padding: 10px 18px; border: 1px solid var(--line-d); background: none; color: var(--grey); cursor: pointer; transition: 0.3s; } .sec--bone .filter-pill { border-color: var(--line-l); } .filter-pill:hover { color: var(--bone); border-color: var(--grey); } .sec--bone .filter-pill:hover { color: var(--ink); } .filter-pill.active { background: var(--signal); border-color: var(--signal); color: #fff; } /* ---------------- detail pages ---------------- */ .d-hero.d-hero--tight { min-height: 0; } .d-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; padding: calc(var(--nav-h) + clamp(26px, 4vh, 48px)) 0 clamp(36px, 6vh, 70px); position: relative; overflow: clip; } .d-hero > .wrap { width: 100%; } .crumbs { display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); margin-bottom: clamp(24px, 4vh, 40px); } .crumbs a:hover { color: var(--signal); } .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 clamp(28px, 3.5vw, 60px); border-block: 1px solid var(--line-d); margin-block: clamp(30px, 5vh, 54px); } .meta-grid > div { padding: clamp(24px, 3.2vh, 34px) 0 clamp(26px, 3.6vh, 38px); } .meta-grid .mg-lbl { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; } .meta-grid .mg-val { font-variation-settings: "wdth" 104, "wght" 650; text-transform: uppercase; font-size: 0.95rem; } .d-media { border: 1px solid var(--line-d); padding: 10px; border-radius: var(--r); overflow: clip; margin-top: clamp(26px, 5vh, 50px); } .d-media .par { aspect-ratio: 21 / 9; } .d-media img { width: 100%; height: 100%; object-fit: cover; } .prose { max-width: 92ch; } .prose h2 { font-variation-settings: "wdth" 104, "wght" 750; font-size: clamp(1.4rem, 2.3vw, 2rem); text-transform: uppercase; margin: 2.4em 0 0.7em; display: flex; align-items: baseline; gap: 14px; } .prose h2::before { content: "//"; color: var(--signal); font-family: var(--f-mono); font-size: 0.8em; } .prose p { color: var(--grey); margin-bottom: 1.15em; font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.7; } .prose ul { margin-bottom: 1.4em; display: flex; flex-direction: column; gap: 10px; } .prose ul li { display: flex; gap: 12px; color: var(--grey); font-size: clamp(1.05rem, 1.3vw, 1.2rem); } .prose ul li::before { content: "//"; color: var(--signal); font-family: var(--f-mono); flex: 0 0 auto; } /* pager */ .pager { display: grid; grid-template-columns: 1fr 1fr; } .pager a { padding: clamp(28px, 4vw, 52px) var(--gut); display: flex; flex-direction: column; gap: 10px; position: relative; overflow: clip; z-index: 1; } .pager a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-2); translate: 0 101%; transition: translate 0.4s var(--snap); } .pager a:hover::before { translate: 0 0; } .pager a + a { border-left: 1px solid var(--line-d); text-align: right; align-items: flex-end; } .pager .p-lbl { font-family: var(--f-mono); font-size: 0.73rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); } .pager .p-title { font-variation-settings: "wdth" 104, "wght" 700; font-size: clamp(0.95rem, 1.5vw, 1.3rem); } /* ---------------- CTA band ---------------- */ .cta-band { /* shallow bottom padding: the copy hands over to the giant footer CTA right below */ padding: clamp(80px, 12vh, 150px) var(--gut) clamp(36px, 6vh, 70px); text-align: left; position: relative; overflow: visible; /* always bone, so the band and the giant footer CTA read as one light block */ background: var(--bone); color: var(--ink); } .cta-band .big { color: var(--ink); } .cta-band p { color: #55524c; } /* let the glow rise into the section above instead of being cut off */ .cta-band .glow-field { top: -45%; bottom: 0; left: 0; right: 0; z-index: -1; filter: blur(60px) saturate(1.15); } .cta-band > * { position: relative; } .cta-band .big { font-variation-settings: var(--wide); font-size: clamp(2rem, 5.5vw, 5rem); text-transform: uppercase; line-height: 0.9; margin-bottom: 30px; } .cta-band .big .accent { display: block; } .cta-band p { color: var(--grey); max-width: 52ch; } /* ---------------- footer (inverted bone) ---------------- */ .site-footer { background: var(--bone); color: var(--ink); overflow: clip; } .footer-giant-wrap { overflow: clip; border-bottom: 1px solid var(--line-l); } .footer-giant { display: block; font-variation-settings: var(--wide); font-size: min(8vw, 8.5rem); line-height: 1.02; white-space: nowrap; letter-spacing: -0.03em; padding: clamp(24px, 4vh, 48px) var(--gut) 0; transition: color 0.3s; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: clamp(28px, 4vw, 70px); padding: clamp(40px, 7vh, 80px) var(--gut); max-width: 1680px; margin-inline: auto; } .footer-grid h4 { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: #7a766d; margin-bottom: 18px; font-weight: 500; } .footer-grid ul { display: flex; flex-direction: column; gap: 10px; } .footer-grid a { font-variation-settings: "wdth" 102, "wght" 600; font-size: 0.92rem; transition: color 0.25s, padding-left 0.3s var(--ease); } .footer-grid a:hover { color: var(--signal); padding-left: 6px; } .footer-grid a.btn:hover { color: var(--ink); padding-left: 24px; } .footer-offices li { font-size: 0.88rem; color: #55524c; } .footer-offices strong { display: block; font-variation-settings: "wdth" 104, "wght" 720; text-transform: uppercase; color: var(--ink); } .footer-brand p { color: #55524c; font-size: 0.9rem; max-width: 32ch; margin-top: 14px; } .footer-bottom { border-top: 1px solid var(--line-l); padding: 20px var(--gut); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 0.73rem; letter-spacing: 0.16em; text-transform: uppercase; color: #7a766d; } .footer-bottom .fb-links { display: flex; gap: 22px; } .footer-bottom a:hover { color: var(--signal); } /* ---------------- utilities ---------------- */ .mt-lg { margin-top: clamp(36px, 6vh, 72px); } .mb-lg { margin-bottom: clamp(36px, 6vh, 72px); } .mb-md { margin-bottom: clamp(20px, 3vh, 40px); } /* ---------------- UI label typeface override ---------------- Replaces the monospace UI voice with tight, bold Archivo. */ .mono, .nav-link, .nav-drop a, .nav-cta, .sec-label, .hero-meta, .ticker-track span, .filter-pill, .crumbs, .meta-grid .mg-lbl, .footer-grid h4, .footer-bottom, .pager .p-lbl, .chip .lbl, .panel ul li, .mtile .mt-kicker, .mtile .mt-cta, .member .m-info span, .quote cite, .edge-meta, .ulink, .btn, .menu-big .idx, .preloader .pl-word, .acc summary .plus { font-family: var(--f-disp); font-variation-settings: "wdth" 90, "wght" 650; letter-spacing: 0.045em; } .case-row::before, .svc-row::before, .acc summary::before { font-family: var(--f-disp); font-variation-settings: "wdth" 90, "wght" 650; letter-spacing: 0.045em; } .nav-link, .nav-drop a { font-size: 0.8rem; } .sec-label { font-size: 0.8rem; letter-spacing: 0.06em; } .hero-meta { font-size: 0.76rem; } .btn { font-size: 0.82rem; } .nav-cta { font-size: 0.8rem; } .ulink { font-size: 0.82rem; } .filter-pill { font-size: 0.76rem; } .ticker-track span { font-size: 0.85rem; letter-spacing: 0.1em; } /* ---------------- responsive ---------------- */ @media (max-width: 960px) { .nav-links, .site-nav .nav-cta { display: none; } .nav-burger { display: block; } .case-row { grid-template-columns: 1fr auto; } .case-row::before, .case-row .cr-title { display: none; } .svc-row { grid-template-columns: 1fr auto; } .svc-row::before, .svc-row .sr-tag { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .pager { grid-template-columns: 1fr; } .pager a + a { border-left: 0; border-top: 1px solid var(--line-d); } .hero-foot { grid-template-columns: 1fr; } .rail-sec { height: auto; } .rail-pin { position: static; height: auto; } .rail-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; animation: none; } .panel { flex: 0 0 86vw; scroll-snap-align: start; } .meta-grid > div { padding: 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal], .ltr { opacity: 1; translate: 0 0; } } /* ================= LIGHT PAGE MODE (Projects, Blogs) ================= */ .page-light { background: var(--bone); color: var(--ink); } .page-light .site-nav { background: color-mix(in srgb, var(--bone) 78%, transparent); border-bottom: 1px solid var(--line-l); } .page-light .nav-link { color: #75716a; } .page-light .nav-link:hover, .page-light .nav-link.active { color: var(--ink); } .page-light .nav-cta { border-color: var(--ink); } .page-light .nav-cta:hover { color: #fff; } .page-light .nav-burger span { background: var(--ink); } .page-light .nav-drop { background: #faf7f0; border-color: var(--line-l); } .page-light .nav-drop a { color: #75716a; } .page-light .nav-drop a:hover { background: var(--bone-2); color: var(--ink); } .page-light .menu-overlay { background: var(--ink); color: var(--bone); } .page-light .menu-big { border-color: var(--line-d); } body.page-light.menu-open .nav-burger span { background: var(--bone); } .page-light .glow-field { opacity: 0.45; } .page-light .hero-meta, .page-light .crumbs, .page-light .edge-meta { color: #8a8578; } .page-light .scroll-hint { color: #55524c; } .page-light .scroll-hint .wheel { border-color: #55524c; } .page-light .lede { color: #55524c; } .page-light .sec-label { color: #8a8578; } .page-light .sec--coal { background: var(--bone-2); } .page-light .sec--ember { background: radial-gradient(circle 700px at 84% -8%, rgba(255, 46, 99, 0.12), transparent 70%), radial-gradient(circle 560px at 4% 105%, rgba(168, 85, 247, 0.1), transparent 70%), var(--bone); } .page-light .case-index, .page-light .case-row, .page-light .svc-list, .page-light .svc-row, .page-light .acc, .page-light .acc details { border-color: var(--line-l); } .page-light .cr-title, .page-light .sr-tag, .page-light .prose p, .page-light .prose ul li, .page-light .acc .acc-body, .page-light .mtile p { color: #55524c; } .page-light .meta-grid { border-color: var(--line-l); } .page-light .mg-lbl { color: #8a8578; } .page-light .frame, .page-light .d-media { border-color: var(--line-l); } .page-light .mtile { background: #faf7f0; border-color: var(--line-l); } .page-light .pager { border-color: var(--line-l); } .page-light .pager a::before { background: var(--bone-2); } .page-light .pager .p-lbl { color: #8a8578; } .page-light .cta-band p { color: #55524c; } .page-light .chip { background: #faf7f0; border-color: var(--line-l); } .page-light .chip::after { background: #f5f1e8; } .page-light .chip .lbl { color: #8a8578; } .page-light .quote cite { color: #8a8578; } .page-light ::-webkit-scrollbar-track { background: var(--bone); } /* ================================================================ ELEMENT INTERACTION LAYER — awwwards-grade micro-interactions ================================================================ */ /* ---- label roll: text slides up, duplicate rolls in from below ---- */ .roll { display: inline-block; overflow: clip; position: relative; } .roll > .roll-inner { display: inline-block; transition: translate 0.4s var(--snap); } .roll > .roll-inner > span { display: block; } .roll > .roll-inner > span:last-child { position: absolute; top: 100%; left: 0; } a:hover .roll .roll-inner, button:hover .roll .roll-inner { translate: 0 -100%; } /* ---- magnetic buttons handled in JS (transform), give them will-change ---- */ .btn, .nav-cta { will-change: transform; } /* card hover: simple lift + border brighten (beam removed) */ .mtile:hover, .panel:hover { border-color: rgba(255, 46, 99, 0.45); } /* ---- image curtain reveal + color flood ---- */ .mt-media, .par { position: relative; } .mt-media img, .d-media .par img, .frame .par img { clip-path: inset(0 0 0 0); } [data-reveal] .mt-media img { transition: scale 0.9s var(--ease), filter 0.7s var(--ease); } .mt-media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--ink-2); transform-origin: 0 0; scale: 1 1; transition: scale 0.9s var(--snap) 0.1s; pointer-events: none; } .page-light .mt-media::after, .sec--bone .mt-media::after { background: var(--bone-2); } [data-reveal].in-view .mt-media::after { scale: 1 0; transform-origin: 0 100%; } /* ---- case rows: gradient sweep across the client name ---- */ .case-row .cr-client { background-image: linear-gradient(100deg, #ff2e63, #a855f7 50%, currentColor 50%); background-size: 210% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; transition: background-position 0.55s var(--snap), translate 0.35s var(--ease); } .case-row:hover .cr-client { color: transparent; -webkit-text-fill-color: transparent; background-position: 0 0; } .case-row .cr-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line-d); display: grid; place-items: center; font-size: 1.15rem; color: var(--grey); transition: 0.4s var(--snap); } .page-light .case-row .cr-arrow { border-color: var(--line-l); color: #75716a; } .case-row:hover .cr-arrow { background: var(--signal); border-color: var(--signal); color: #fff; rotate: 45deg; scale: 1.08; } /* stat chip glow pulse removed with all text shadows */ /* ---- accordions: buttery height animation (modern CSS) ---- */ .acc details { interpolate-size: allow-keywords; } .acc details::details-content { block-size: 0; overflow: clip; transition: block-size 0.5s var(--snap), content-visibility 0.5s allow-discrete; } .acc details[open]::details-content { block-size: auto; } /* ================= manifesto: words light up as you scroll (home only) ================= */ .manifesto { max-width: 1200px; } .mani-text { font-variation-settings: "wdth" 100, "wght" 200; font-size: clamp(1.3rem, 2.45vw, 2.55rem); line-height: 1.3; letter-spacing: 0.004em; text-wrap: pretty; } /* scramble works on any [data-scramble] element, inheriting its color */ [data-scramble] .sw { display: inline-block; white-space: nowrap; } [data-scramble] .sl { display: inline-block; text-align: center; } [data-scramble] .sl.mix { opacity: 0.38; } [data-reveal][data-scramble] { opacity: 1; translate: 0 0; } .mani-text .sl { color: var(--bone); } .mani-text .sl.mix { color: rgba(240, 233, 221, 0.34); opacity: 1; } /* the key message: heavier weight, brand gradient poured through the words */ .mani-key { font-variation-settings: "wdth" 100, "wght" 560; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .mani-key .sl { color: inherit; } .mani-key .sl.mix { -webkit-text-fill-color: rgba(240, 233, 221, 0.34); } /* black with a full aurora gradient breathing behind the thin type */ .sec--mani { position: relative; overflow: visible; } .sec--mani::before { content: ""; position: absolute; inset: -35% -8% -45%; z-index: -1; pointer-events: none; background: radial-gradient(circle 780px at 90% 6%, rgba(168, 85, 247, 0.34), transparent 64%), radial-gradient(circle 700px at 4% 88%, rgba(255, 46, 99, 0.26), transparent 62%), radial-gradient(circle 900px at 55% 120%, rgba(120, 40, 190, 0.18), transparent 70%); filter: blur(52px) saturate(1.1); } .mani-foot { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; margin-top: clamp(30px, 5vh, 52px); } .mani-foot .mono { color: var(--grey); } /* ---------------- section intros: one readable line that says what the section is ---------------- */ .sec-intro { font-size: clamp(1.15rem, 1.65vw, 1.5rem); line-height: 1.55; color: rgba(240, 233, 221, 0.75); max-width: 58ch; margin-top: clamp(26px, 4.5vh, 46px); margin-bottom: clamp(36px, 6vh, 60px); text-wrap: pretty; } .page-light .sec-intro, .sec--bone .sec-intro { color: #55524c; } /* ================= editorial index: giant outlined links (inspiration hub only) ================= */ .x-index { display: grid; } .xlink { position: relative; display: grid; grid-template-columns: auto 1fr minmax(220px, 30ch) auto; gap: clamp(20px, 3.5vw, 56px); align-items: center; padding: clamp(34px, 6.5vh, 64px) 0; } .xlink .x-idx { color: var(--grey); font-size: 0.78rem; } .xlink .x-word { font-variation-settings: var(--wide); font-size: clamp(3.2rem, 8.5vw, 8.5rem); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.5px rgba(240, 233, 221, 0.5); background: var(--grad); background-size: 0% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-size 0.7s var(--snap), -webkit-text-stroke-color 0.4s; } .xlink:hover .x-word { background-size: 100% 100%; -webkit-text-stroke-color: transparent; } .xlink .x-dot { color: var(--signal); -webkit-text-stroke: 0; } .xlink .x-side { color: var(--grey); font-size: 1.05rem; line-height: 1.55; } .xlink .x-kick { display: block; color: var(--bone); margin-bottom: 8px; font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; } .xlink .x-arr { font-size: clamp(1.6rem, 2.6vw, 2.6rem); translate: 0 6px; opacity: 0.4; transition: translate 0.45s var(--snap), opacity 0.3s, color 0.3s; } .xlink:hover .x-arr { translate: 6px -4px; opacity: 1; color: var(--signal); } /* floating photo preview follows in on hover */ .xlink .x-img { position: absolute; right: clamp(240px, 30vw, 560px); top: 50%; width: clamp(180px, 20vw, 300px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); translate: 0 -44%; rotate: 4deg; scale: 0.85; opacity: 0; pointer-events: none; z-index: 2; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); transition: opacity 0.35s ease, scale 0.45s var(--snap), rotate 0.45s var(--snap); } .xlink:hover .x-img { opacity: 1; scale: 1; rotate: -3deg; } @media (max-width: 960px) { .xlink { grid-template-columns: auto 1fr auto; } .xlink .x-side, .xlink .x-img { display: none; } } /* ================= what-we-do: parallax photo band with glass steps (home only) ================= */ .whatwedo { position: relative; overflow: clip; padding: clamp(120px, 18vh, 220px) 0; } .whatwedo > .wrap { position: relative; z-index: 2; } .wtd-media { position: absolute; inset: 0; z-index: 0; } .wtd-media img { position: absolute; left: 0; top: -25%; width: 100%; height: 150%; object-fit: cover; filter: saturate(1.25) brightness(1.1); } /* the media div already carries the parallax headroom, so no extra zoom here */ @supports (animation-timeline: view()) { .par .wtd-media img { scale: 1.1; animation-name: par-y-soft; } } /* dark feathered edges: the photo melts into the black sections above and below */ .wtd-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--ink), transparent 20%, transparent 82%, var(--ink)), linear-gradient(100deg, rgba(13, 13, 13, 0.92) 28%, rgba(13, 13, 13, 0.4) 52%, transparent 70%); } .whatwedo .wrap { position: relative; z-index: 2; } .wtd-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: stretch; margin-top: clamp(24px, 4vh, 44px); } /* left column centers itself; cards distribute to match its full height */ .wtd-grid > div:first-child { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .wtd-grid h2 { font-variation-settings: "wdth" 100, "wght" 200; font-size: clamp(1.9rem, 3.4vw, 3.5rem); line-height: 1.2; letter-spacing: 0.002em; text-wrap: pretty; } .wtd-sub { margin-top: clamp(22px, 3.5vh, 36px); max-width: 48ch; color: rgba(240, 233, 221, 0.78); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.65; text-wrap: pretty; } .wtd-keys { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-variation-settings: "wdth" 100, "wght" 520; } .wtd-steps { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(12px, 1.8vh, 18px); } .wtd-step { position: relative; overflow: clip; flex: 1; display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 1.6vw, 24px); align-items: center; padding: clamp(18px, 2.6vh, 28px) clamp(20px, 2.2vw, 32px); border-radius: 16px; background: rgba(13, 13, 13, 0.3); backdrop-filter: blur(7px) saturate(1.35); -webkit-backdrop-filter: blur(7px) saturate(1.35); border: 1px solid rgba(240, 233, 221, 0.16); transition: border-color 0.35s, translate 0.35s var(--snap), background 0.35s; } .wtd-step:hover { border-color: rgba(255, 46, 99, 0.55); background: rgba(13, 13, 13, 0.68); translate: 6px 0; } /* gradient line draws left to right on hover, then keeps breathing */ .wtd-step::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); background-size: 230% 230%; animation: grad-move 7s ease-in-out infinite; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.6s var(--snap); } .wtd-step:hover::before { transform: scaleX(1); } .wtd-step .n { font-variation-settings: var(--wide); font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .wtd-step h3 { font-variation-settings: "wdth" 104, "wght" 750; text-transform: uppercase; font-size: clamp(1rem, 1.3vw, 1.2rem); margin-bottom: 6px; } .wtd-step p { color: rgba(240, 233, 221, 0.82); line-height: 1.55; font-size: clamp(0.95rem, 1.15vw, 1.05rem); } @media (max-width: 960px) { .wtd-grid { grid-template-columns: 1fr; } } /* ================= DNA value cards (about only) ================= */ .dna-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); } @media (max-width: 960px) { .dna-grid { grid-template-columns: 1fr; } } .dna-card { position: relative; overflow: clip; background: var(--ink-2); border: 1px solid var(--line-d); border-radius: var(--r); padding: clamp(26px, 3.4vh, 40px) clamp(22px, 2.2vw, 34px); transition: border-color 0.35s, translate 0.4s var(--snap); } .dna-card:hover { border-color: rgba(255, 46, 99, 0.5); translate: 0 -6px; } .dna-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); background-size: 230% 230%; animation: grad-move 7s ease-in-out infinite; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.6s var(--snap); } .dna-card:hover::before { transform: scaleX(1); } .dna-card .dna-n { display: block; margin-bottom: 16px; font-variation-settings: var(--wide); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.25px var(--signal); } .dna-card h3 { font-variation-settings: "wdth" 104, "wght" 750; font-size: clamp(1.05rem, 1.4vw, 1.3rem); margin-bottom: 10px; } .dna-card p { color: var(--grey); line-height: 1.6; } /* ================= giant numeral strip (about only, on bone) ================= */ .numline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: clamp(24px, 4vw, 60px); align-items: end; } .nl-num { display: block; font-variation-settings: var(--wide); font-size: clamp(3rem, 6.5vw, 6rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--ink); } .nl-lbl { display: block; margin-top: 12px; font-family: var(--f-disp); font-variation-settings: "wdth" 90, "wght" 650; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8a8578; } /* ================= plain two-column partner text (tools only) ================= */ .duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: clamp(36px, 5vw, 90px); } .duo-h { font-variation-settings: var(--wide); font-size: clamp(2rem, 3.4vw, 3.2rem); text-transform: uppercase; line-height: 1; margin-bottom: 18px; } .duo p { color: var(--grey); line-height: 1.65; margin-bottom: 16px; max-width: 52ch; } /* projects grid: bento rhythm, every sixth card goes wide with a taller image */ .tile-grid--flat { grid-auto-flow: dense; } .tile-grid--flat > :nth-child(n) .mt-media { height: clamp(180px, 22vh, 240px); } @media (min-width: 961px) { .tile-grid--flat > :nth-child(6n+1) { grid-column: span 2; } .tile-grid--flat > :nth-child(6n+1) .mt-media { height: clamp(260px, 34vh, 360px); } } /* blogs grid: magazine rhythm, offset from the projects pattern */ .tile-grid--mag { grid-auto-flow: dense; } @media (min-width: 961px) { .tile-grid--mag > :nth-child(5n+1) { grid-column: span 2; } .tile-grid--mag > :nth-child(5n+1) .mt-media { height: clamp(280px, 36vh, 380px) !important; } } /* philosophy line at the foot of detail pages */ .phil { margin-top: clamp(30px, 5vh, 48px); font-family: var(--f-disp); font-variation-settings: "wdth" 90, "wght" 650; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); } .phil::before { content: "/// "; color: var(--signal); } /* footer giant arrow: rotates from east to north-east on hover */ .fg-arr { display: inline-block; line-height: 0; vertical-align: 0.03em; transition: rotate 0.5s var(--snap); } .fg-arr svg { width: 0.58em; height: auto; display: inline-block; } .footer-giant:hover .fg-arr { rotate: -45deg; color: var(--signal-2); -webkit-text-fill-color: var(--signal-2); } /* ================= category-of-one on the black hole (about only) ================= */ .vs-band .wtd-scrim { background: linear-gradient(to bottom, var(--ink), rgba(13, 13, 13, 0.8) 22%, rgba(13, 13, 13, 0.8) 78%, var(--ink)); } /* ================= category-of-one comparison (about only) ================= */ .vs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: stretch; } .vs-col { border-radius: var(--r); padding: clamp(30px, 4vw, 56px); } .vs-col.them { background: var(--ink-2); border: 1px solid var(--line-d); } .vs-col.us { position: relative; overflow: clip; background: linear-gradient(165deg, rgba(255, 46, 99, 0.13), rgba(168, 85, 247, 0.13)), var(--ink-2); box-shadow: 0 0 70px -14px rgba(255, 46, 99, 0.35), 0 0 90px -20px rgba(168, 85, 247, 0.3); } .vs-col.us::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); } .vs-col h3 { font-family: var(--f-disp); font-variation-settings: "wdth" 90, "wght" 650; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: clamp(20px, 3vh, 32px); } .vs-col.them h3 { color: var(--grey); } .vs-col.us h3 { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .vs-col li { display: flex; gap: 16px; align-items: baseline; padding-block: clamp(12px, 1.8vh, 18px); font-size: clamp(1.02rem, 1.4vw, 1.25rem); line-height: 1.5; } .vs-col.them li { color: var(--grey); } .vs-col.them li::before { content: "✕"; color: #62605b; flex: 0 0 auto; } .vs-col.us li { color: var(--bone); font-variation-settings: "wdth" 100, "wght" 560; } .vs-col.us li::before { content: "✓"; color: var(--signal); flex: 0 0 auto; } @media (max-width: 860px) { .vs { grid-template-columns: 1fr; } } /* ================= timeline (about only) ================= */ .timeline { position: relative; display: grid; gap: clamp(36px, 6vh, 64px); padding-left: clamp(28px, 4vw, 56px); } .timeline::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, #ff2e63, #a855f7 55%, rgba(168, 85, 247, 0.12)); } .tl-item { position: relative; display: grid; grid-template-columns: clamp(90px, 10vw, 140px) 1fr; gap: clamp(18px, 3vw, 44px); align-items: start; } .tl-item::before { content: ""; position: absolute; left: calc(-1 * clamp(28px, 4vw, 56px) - 4px); top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 18px rgba(255, 46, 99, 0.75); } .tl-year { font-variation-settings: var(--wide); font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .tl-item h3 { font-variation-settings: "wdth" 104, "wght" 750; font-size: clamp(1.1rem, 1.7vw, 1.5rem); margin-bottom: 8px; } .tl-item p { color: var(--grey); max-width: 62ch; line-height: 1.6; } /* ================= 3D book covers (books only) ================= */ .frame.book { border: none; padding: 0; background: none; overflow: visible; max-width: min(440px, 84%); margin-inline: auto; align-self: center; } .frame.book .par, .frame.book .bk-media { aspect-ratio: 3 / 4; border-radius: 10px; overflow: clip; box-shadow: 0 32px 70px -20px rgba(0, 0, 0, 0.55), 0 0 60px -22px rgba(255, 46, 99, 0.3); transition: translate 0.5s var(--snap), box-shadow 0.5s var(--snap); } .frame.book:hover .par, .frame.book:hover .bk-media { translate: 0 -10px; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5), 0 0 80px -20px rgba(168, 85, 247, 0.4); } /* book covers are deliberately plain images: no reveal, no parallax, no filters. they must be visible under every condition */ .frame.book img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1 !important; filter: none !important; animation: none !important; scale: none !important; translate: none !important; } /* expanded book content on the listing */ .bk-sum { margin-top: clamp(16px, 2.4vh, 26px); color: var(--grey); max-width: 56ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.65; } .bk-hi { margin-top: clamp(14px, 2vh, 22px); display: flex; flex-direction: column; gap: 10px; } .bk-hi li { display: flex; gap: 12px; color: var(--grey); font-size: clamp(1rem, 1.2vw, 1.12rem); } .bk-hi li::before { content: "//"; color: var(--signal); font-family: var(--f-mono); flex: 0 0 auto; } /* ================= live office clocks (contact only) ================= */ .off-clock { display: block; margin: 6px 0 14px; } .off-clock b { font-variation-settings: var(--wide); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: normal; letter-spacing: 0.01em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-variant-numeric: tabular-nums; } .off-clock .mono { color: var(--grey); font-size: 0.74rem; } /* ================= statement word rise: masked words slide up on scroll ================= */ [data-words] .wm { display: inline-block; overflow: clip; vertical-align: bottom; padding: 0.1em 0 0.2em; margin: -0.1em 0 -0.2em; } [data-words] .wd { display: inline-block; translate: 0 130%; transition: translate 0.95s var(--snap) calc(var(--wi, 0) * 50ms); } [data-words].in-view .wd { translate: 0 0; } /* the word rise replaces the plain fade for these elements */ [data-reveal][data-words] { opacity: 1; translate: 0 0; } /* ================= highlighter: pink sweep on dark, ink sweep on bone ================= */ .hl, .hl-ink { background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 55%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0.05em 0.14em; transition: background-size 1.15s var(--snap) 0.3s, color 0.4s ease 0.45s; } .hl { background-image: linear-gradient(var(--signal), var(--signal)); } .hl-ink { background-image: linear-gradient(var(--ink), var(--ink)); } [data-reveal].in-view .hl { background-size: 100% 100%; color: var(--ink); } [data-reveal].in-view .hl-ink { background-size: 100% 100%; color: var(--bone); } /* ================= lifecycle journey: strategy to shipped, one line ================= */ .lifecycle { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; margin-top: clamp(28px, 4vh, 46px); } .lc-step { display: inline-flex; align-items: baseline; gap: 9px; font-family: var(--f-mono); font-size: clamp(0.78rem, 0.95vw, 0.92rem); letter-spacing: 0.13em; text-transform: uppercase; color: var(--bone); padding: 11px 18px; border: 1px solid var(--line-d); border-radius: 100px; background: rgba(240, 233, 221, 0.03); opacity: 0; translate: 0 14px; transition: opacity 0.6s var(--ease) calc(var(--i, 0) * 90ms), translate 0.6s var(--ease) calc(var(--i, 0) * 90ms), border-color 0.3s; } .lifecycle.in-view .lc-step { opacity: 1; translate: 0 0; } .lc-step:hover { border-color: rgba(255, 46, 99, 0.55); } .lc-step i { font-style: normal; color: var(--signal); font-size: 0.74em; } .lc-step--hot { background: var(--grad); background-size: 230% 230%; animation: grad-move 7s ease-in-out infinite; color: #0d0d0d; border-color: transparent; font-variation-settings: "wght" 640; } .lc-step--hot i { color: #0d0d0d; } .lc-link { width: clamp(14px, 2.4vw, 40px); height: 2px; margin: 0 7px; border-radius: 2px; background: var(--grad); background-size: 230% 230%; animation: grad-move 7s ease-in-out infinite; } .sec--bone .lc-step { border-color: var(--line-l); color: var(--ink); background: #faf7f0; } .sec--bone .lc-step--hot { color: #0d0d0d; border-color: transparent; background: var(--grad); background-size: 230% 230%; } /* ---- the route: nine stops, one metro line, over a drifting starfield ---- */ .route-band { padding: clamp(60px, 9vh, 110px) 0 clamp(80px, 12vh, 150px); } /* the comparison band above hands over to the route without a black void between them */ .vs-band { padding-bottom: clamp(80px, 11vh, 130px); } .route-band .wtd-scrim { background: linear-gradient(to bottom, var(--ink), transparent 20%, transparent 82%, var(--ink)), linear-gradient(100deg, rgba(13, 13, 13, 0.92) 32%, rgba(13, 13, 13, 0.55) 56%, rgba(13, 13, 13, 0.12) 80%, transparent 94%); } .route { position: relative; z-index: 2; margin-top: clamp(36px, 5vh, 58px); max-width: 1020px; padding-left: clamp(44px, 5vw, 64px); } .route::before { content: ""; position: absolute; left: clamp(8px, 1.2vw, 16px); top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--signal), var(--signal-2), var(--signal)); background-size: 100% 300%; animation: grad-move 8s ease-in-out infinite; border-radius: 2px; } .route-step { position: relative; display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 10px 36px; align-items: baseline; padding: clamp(20px, 3.2vh, 34px) 0; transition: translate 0.45s var(--ease); } .route-step:hover { translate: 8px 0; } .route-step::before { content: ""; position: absolute; left: calc(-1 * clamp(44px, 5vw, 64px) + clamp(8px, 1.2vw, 16px) - 6px); top: 50%; translate: 0 -50%; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--signal); } .route-step h3 { display: flex; gap: 14px; align-items: baseline; font-variation-settings: "wdth" 110, "wght" 760; font-size: clamp(1.5rem, 2.6vw, 2.3rem); text-transform: uppercase; color: var(--bone); line-height: 1; } .route-step h3 i { font-style: normal; font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.12em; color: var(--signal); } .route-step p { color: rgba(240, 233, 221, 0.78); font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.65; max-width: 58ch; } .route-step--hot h3 span { background: var(--grad); background-size: 230% 230%; animation: grad-move 7s ease-in-out infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .route-step--hot::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 18px rgba(255, 46, 99, 0.8); } @media (max-width: 760px) { .route-step { grid-template-columns: 1fr; gap: 8px; } } /* ---- the wave, horizontal: drag along the road, the nearest stop swells, its dot blooms, and the line itself flows sideways ---- */ .route-view { position: relative; z-index: 2; margin-top: clamp(36px, 5vh, 58px); padding-bottom: 46px; } .route--wave { --rgap: clamp(40px, 5vw, 80px); --raily: 14px; display: flex; gap: 0; overflow-x: auto; overflow-y: clip; margin-top: 0; padding: 26px 12vw 30px 6vw; scrollbar-width: none; cursor: grab; user-select: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 3%, #000 95%, transparent); } .route--wave::-webkit-scrollbar { display: none; } .route--wave.dragging { cursor: grabbing; } /* kill the vertical incarnation inside the wave */ .route--wave { padding-left: 6vw; } .route--wave::before { content: none; } .route--wave .route-step { display: block; flex: 0 0 auto; width: clamp(250px, 27vw, 330px); margin-right: var(--rgap); padding: calc(var(--raily) + 34px) 0 0; position: relative; translate: 0 calc(var(--w, 0) * -12px); scale: calc(1 + var(--w, 0) * 0.1); transform-origin: center top; opacity: calc(0.68 + var(--w, 0) * 0.32); transition: translate 0.2s linear, scale 0.2s linear, opacity 0.2s linear; } .route--wave .route-step:hover { translate: 0 calc(var(--w, 0) * -12px); } /* the line, drawing itself from stop to stop as the road reveals */ .route--wave .route-step::before { content: none; } .route--wave .route-step:not(:last-child)::after { content: ""; position: absolute; top: var(--raily); left: 12px; width: calc(100% + var(--rgap) - 44px); height: 4px; translate: 0 -50%; background: linear-gradient(90deg, var(--signal), var(--signal-2), var(--signal)); background-size: 300% 100%; animation: grad-move 6s linear infinite; border-radius: 2px; scale: 0 1; transform-origin: 0 50%; transition: scale 0.65s var(--ease) 0.1s; } .route--wave .route-step.drawn:not(:last-child)::after { scale: 1 1; } /* the last stop's line runs on and fades out: the road keeps going without us */ .route--wave .route-step:last-child::after { content: ""; position: absolute; top: var(--raily); left: 12px; width: calc(var(--rgap) + 14vw); height: 4px; translate: 0 -50%; background: linear-gradient(90deg, var(--signal), var(--signal-2) 55%, transparent 96%); border-radius: 2px; scale: 0 1; transform-origin: 0 50%; transition: scale 0.9s var(--ease) 0.25s; } .route--wave .route-step.drawn:last-child::after { scale: 1 1; } /* solid station dots. small = plain, close or hovered = bigger with the icon inside */ .route--wave .rt-dot { position: absolute; left: 12px; top: var(--raily); translate: -50% -50%; width: calc(16px + var(--w, 0) * 26px); height: calc(16px + var(--w, 0) * 26px); background: var(--signal); border-radius: 50%; box-shadow: 0 0 calc(var(--w, 0) * 32px) rgba(255, 46, 99, calc(0.25 + var(--w, 0) * 0.6)); display: grid; place-items: center; z-index: 1; transition: width 0.2s linear, height 0.2s linear, box-shadow 0.2s linear; } .route--wave .rt-dot svg { width: 58%; height: 58%; color: #fff; opacity: var(--w, 0); scale: calc(0.4 + var(--w, 0) * 0.6); transition: opacity 0.2s linear, scale 0.2s linear; } /* direct hover always wakes the stop fully */ .route--wave .route-step:hover .rt-dot { width: 42px; height: 42px; box-shadow: 0 0 32px rgba(255, 46, 99, 0.85); } .route--wave .route-step:hover .rt-dot svg { opacity: 1; scale: 1; } .route--wave .route-step h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); } .route--wave .route-step p { margin-top: 12px; max-width: none; } /* the road's closing statement, same sky, same section, full-width like the other bands */ .road-cta { position: relative; z-index: 2; margin-top: clamp(60px, 9vh, 120px); min-height: 62svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .road-cta h2 { font-variation-settings: "wdth" 104, "wght" 300; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.14; max-width: 18ch; color: #fff; } /* the rail below, for mouse users */ .route-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 4px; background: rgba(240, 233, 221, 0.1); cursor: pointer; touch-action: none; } .route-bar:hover { background: rgba(240, 233, 221, 0.16); } .route-thumb { position: absolute; top: 0; height: 100%; border-radius: 4px; background: var(--grad); background-size: 230% 230%; animation: grad-move 7s ease-in-out infinite; transition: box-shadow 0.3s; } .route-bar:hover .route-thumb { box-shadow: 0 0 14px rgba(255, 46, 99, 0.55); } /* ---- technology chips: the stack, worn lightly ---- */ .tech-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .tech-chip { font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); padding: 10px 18px; border: 1px solid var(--line-d); border-radius: 100px; transition: color 0.3s, border-color 0.3s, box-shadow 0.3s; } .tech-chip:hover { color: var(--bone); border-color: rgba(168, 85, 247, 0.6); box-shadow: 0 0 22px -10px rgba(168, 85, 247, 0.5); } .tech-chip--ask { color: var(--bone); background: rgba(240, 233, 221, 0.04); } .tech-chip--ask:hover { border-color: rgba(255, 46, 99, 0.6); box-shadow: 0 0 22px -10px rgba(255, 46, 99, 0.5); } /* ================= mobile polish: alignment, spacing, touch honesty ================= */ @media (max-width: 760px) { /* burger off the raw edge */ .nav-burger { margin-right: 6px; } /* short heroes collapse to their content instead of leaving a void. the home hero keeps its full-screen photo moment */ .hero:not(:has(.hero-media)) { min-height: auto; padding-bottom: clamp(56px, 9vh, 84px); } /* case pager: stack, align left, tighten */ .pager { grid-template-columns: 1fr; } .pager a { padding: 24px var(--gut); } .pager a + a { border-left: 0; border-top: 1px solid var(--line-d); text-align: left; align-items: flex-start; } .page-light .pager a + a { border-color: var(--line-l); } /* the road's closing statement breathes without a chasm */ .road-cta { min-height: 0; margin-top: clamp(48px, 8vh, 90px); } /* tighter photo bands */ .whatwedo { padding: clamp(70px, 11vh, 120px) 0; } .route-band { padding: clamp(56px, 8vh, 90px) 0 clamp(70px, 10vh, 110px); } } /* touch screens have no hover: show each person's info fully, no half-hidden peek */ @media (hover: none) { .member .m-info { translate: 0 0; } } /* ================= drag-strip scroll bar: for mouse users ================= */ .strip-scroll { position: relative; height: 5px; margin-top: clamp(26px, 4vh, 42px); border-radius: 4px; background: rgba(240, 233, 221, 0.1); cursor: pointer; touch-action: none; } .strip-scroll:hover { background: rgba(240, 233, 221, 0.16); } .strip-thumb { position: absolute; top: 0; height: 100%; border-radius: 4px; background: var(--grad); background-size: 230% 230%; animation: grad-move 7s ease-in-out infinite; transition: box-shadow 0.3s; } .strip-scroll:hover .strip-thumb { box-shadow: 0 0 14px rgba(255, 46, 99, 0.55); } /* ================= living gradients: every brand gradient slowly breathes ================= */ @keyframes grad-move { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .accent, .scroll-progress, .panel::before, .mtile::after, .svc-row::after, .wtd-keys, .mani-key, .wtd-step .n, .vs-col.us::before, .vs-col.us h3, .tl-year, .off-clock b, .btn--solid, .chip:hover .num { background-size: 230% 230%; animation: grad-move 7s ease-in-out infinite; } .xlink:hover .x-word { background-size: 230% 100%; animation: grad-move 7s ease-in-out infinite; } /* aurora glows drift slowly too */ @keyframes glow-drift { from { transform: translate3d(-0.8%, -0.5%, 0) scale(1); } to { transform: translate3d(0.8%, 0.6%, 0) scale(1.02); } } /* content sections keep their glow perfectly still; only heroes and the manifesto drift */ .sec--mani::before, .hero .glow-field { animation: glow-drift 11s ease-in-out infinite alternate; } /* ---- footer giant: gradient wipes through on hover ---- */ .footer-giant { background-image: linear-gradient(100deg, #ff2e63, #a855f7, #ff2e63); background-size: 230% 100%; background-position: 0% 0; -webkit-background-clip: text; background-clip: text; transition: color 0.45s ease; } .footer-giant:hover { color: transparent; -webkit-text-fill-color: transparent; animation: grad-move 5s ease-in-out infinite; } /* ---- nav links: little dot appears under on hover ---- */ .nav-link::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); translate: -50% 6px; opacity: 0; transition: 0.3s var(--snap); } .nav-link:hover::after, .nav-link.active::after { translate: -50% 0; opacity: 1; } /* ---- focus rings ---- */ :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; } /* ---- filter pills: springy press ---- */ .filter-pill { transition: 0.3s, scale 0.2s var(--snap); } .filter-pill:active { scale: 0.93; } .btn:active { scale: 0.97; } /* ---- team cards: pink scanline sweeps up on hover ---- */ .member::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(255, 46, 99, 0.25), transparent 40%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .member:hover::after { opacity: 1; } /* ================= photo morph in hero heading + parallax bands ================= */ .morph-stack { position: relative; display: inline-block; } .morph-stack .img-text { background-size: cover; background-position: 50% 40%; animation: morph-pan 16s ease-in-out infinite alternate; } .morph-stack .layer2 { position: absolute; inset: 0; opacity: 0; animation: morph-pan 16s ease-in-out infinite alternate; } /* 4-image cycle, 20s: beach -> forest -> dunes -> desert */ .morph-stack .l1 { animation: morph-pan 16s ease-in-out infinite alternate, fade-a 20s ease-in-out infinite; } .morph-stack .l2 { animation: morph-pan 16s ease-in-out infinite alternate, fade-b 20s ease-in-out infinite; } .morph-stack .l3 { animation: morph-pan 16s ease-in-out infinite alternate, fade-c 20s ease-in-out infinite; } @keyframes morph-pan { from { background-position: 50% 30%; } to { background-position: 50% 65%; } } @keyframes fade-a { 0%, 20% { opacity: 0; } 27%, 45% { opacity: 1; } 52%, 100% { opacity: 0; } } @keyframes fade-b { 0%, 45% { opacity: 0; } 52%, 70% { opacity: 1; } 77%, 100% { opacity: 0; } } @keyframes fade-c { 0%, 70% { opacity: 0; } 77%, 95% { opacity: 1; } 100% { opacity: 0; } } .px-band { height: min(64vh, 600px); overflow: clip; position: relative; } .px-band img { width: 100%; height: 132%; object-fit: cover; } /* ================= statement bands: bold claims, gradient or photo ================= */ .statement { position: relative; min-height: 100svh; /* fills the screen */ display: grid; align-items: center; justify-items: start; text-align: left; padding: clamp(70px, 12vh, 140px) var(--gut); overflow: clip; } .statement h2 { font-variation-settings: "wdth" 100, "wght" 200; /* thin, elegant */ font-size: clamp(2.6rem, 6.2vw, 6.4rem); /* much bigger */ line-height: 1.08; letter-spacing: -0.01em; max-width: 24ch; margin-bottom: 44px; color: #fff; } .statement .btn { border-color: #fff; color: #fff; } .statement .btn::before { background: #fff; } .statement .btn:hover { color: var(--ink); } .statement--grad { background: radial-gradient(circle 640px at 78% 18%, rgba(255, 46, 99, 0.32), transparent 70%), radial-gradient(circle 560px at 16% 88%, rgba(168, 85, 247, 0.26), transparent 70%), var(--ink); } .statement--grad h2 { color: var(--bone); } .statement--grad .btn { border: 0; background: var(--signal); color: #fff; } .statement--photo { padding: 0; } .statement--photo .st-media { position: absolute; inset: 0; } .statement--photo .st-media img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; } /* square/tall images: big canvas, anchored low so the sparse top stays as travel room */ .statement--tall .st-media img { top: -32.5%; height: 165%; object-position: 50% 78%; } /* directional scrim: dark where the text sits, vibrant toward the top right */ .statement--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(13, 13, 13, 0.8) 22%, rgba(13, 13, 13, 0.45) 55%, rgba(13, 13, 13, 0.08) 82%); } /* full-screen photo bands zoom far less than small cards: more image, still moving */ @supports (animation-timeline: view()) { .par .st-media img { scale: 1.04; animation-name: par-y-softer; } /* tall source images earn the fast travel: real headroom, no zoom */ .statement--tall .st-media img { scale: 1.02; animation-name: par-y-fast; } @keyframes par-y-soft { from { translate: 0 16%; } to { translate: 0 -16%; } } @keyframes par-y-softer { from { translate: 0 8%; } to { translate: 0 -8%; } } @keyframes par-y-fast { from { translate: 0 18%; } to { translate: 0 -18%; } } } .statement--photo .st-content { position: relative; z-index: 2; padding: clamp(70px, 12vh, 140px) var(--gut); } /* ================= photographic hero background ================= */ .hero-media { position: absolute; inset: 0; z-index: 0; overflow: clip; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } @supports (animation-timeline: scroll()) { .hero-media img { animation: hero-zoom linear both; animation-timeline: scroll(root); animation-range: 0vh 120vh; } @keyframes hero-zoom { from { scale: 1.02; } to { scale: 1.16; filter: brightness(0.55); } } } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--ink) 0%, transparent 34%), linear-gradient(100deg, rgba(13,13,13,0.55) 0%, transparent 55%); } .hero--photo .glow-field { display: none; } .hero--photo .hero-meta { color: #fff; } .hero--photo .wrap, .hero--photo .hero-meta { position: relative; z-index: 2; } /* ================= fee overview + booking modal (service pages) ================= */ .fee-list { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; max-width: 940px; } .fee-card { display: flex; gap: 20px; align-items: flex-start; border: 1px solid var(--line-d); border-radius: 16px; padding: 24px 26px; cursor: pointer; position: relative; transition: border-color 0.3s, background-color 0.3s; } .fee-card:hover { border-color: rgba(255, 46, 99, 0.45); } .fee-card:has(input:checked) { border-color: var(--signal); background: rgba(255, 46, 99, 0.05); } .fee-card input { position: absolute; opacity: 0; pointer-events: none; } .fee-dot { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--grey); margin-top: 4px; transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; } .fee-card input:checked + .fee-dot { border-color: var(--signal); background: var(--signal); box-shadow: inset 0 0 0 3.5px #161513; } .fee-main { flex: 1; display: flex; flex-direction: column; gap: 9px; } .fee-name { font-family: var(--f-disp); font-variation-settings: "wdth" 100, "wght" 650; font-size: 1.08rem; color: var(--bone); } .fee-desc { color: var(--grey); font-size: 0.94rem; line-height: 1.6; max-width: 62ch; } .fee-badges { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: #7a766d; margin-top: 2px; } .fee-price { font-family: var(--f-disp); font-variation-settings: "wdth" 100, "wght" 700; font-size: 1.45rem; color: var(--bone); white-space: nowrap; text-align: right; } .fee-price i { display: block; font-style: normal; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-top: 4px; } @media (max-width: 640px) { .fee-card { flex-wrap: wrap; } .fee-price { flex-basis: 100%; text-align: left; margin-left: 38px; } .fee-price i { display: inline; margin-left: 8px; } } .bkq-modal { position: fixed; inset: 0; z-index: 2400; display: grid; place-items: center; padding: 18px; } .bkq-modal[hidden] { display: none; } .bkq-back { position: absolute; inset: 0; background: rgba(8, 8, 8, 0.74); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .bkq-panel { position: relative; width: min(680px, 100%); max-height: 88svh; overflow: auto; background: #161513; border: 1px solid var(--line-d); border-radius: 20px; padding: clamp(24px, 4vw, 46px); } .bkq-x { position: absolute; top: 16px; right: 18px; background: none; border: 0; color: var(--bone); font-size: 1.35rem; cursor: pointer; z-index: 2; transition: color 0.3s, rotate 0.3s; } .bkq-x:hover { color: var(--signal); rotate: 90deg; } .bkq-svc { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--signal); margin-bottom: 10px; } .bkq-h { font-family: var(--f-disp); font-variation-settings: "wdth" 100, "wght" 700; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--bone); margin-bottom: 26px; } .bkq-form { border-radius: 14px; } .bkq-select { width: 100%; border: 0; border-bottom: 1px solid var(--line-d); border-radius: 0; padding: 10px 2px 14px; color: var(--bone); font: inherit; font-size: 1.05rem; background: transparent; cursor: pointer; } .bkq-select:focus { outline: none; border-color: var(--signal); } .bkq-select option { background: #161513; color: var(--bone); } .bkq-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 560px) { .bkq-two { grid-template-columns: 1fr; } } .bkq-when { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .cform .bkq-when label { display: flex; gap: 12px; align-items: center; cursor: pointer; color: var(--bone); font-size: 1rem; } .bkq-when input { accent-color: var(--signal); width: 17px; height: 17px; } /* ================= session pages: stacked concept cards on bone ================= */ .sess-list { display: flex; flex-direction: column; gap: 18px; margin-top: 44px; max-width: 1040px; } .sess-card { display: flex; gap: clamp(20px, 3vw, 34px); align-items: flex-start; border: 1px solid var(--line-l); border-radius: 18px; padding: clamp(24px, 3.4vw, 44px); background: rgba(13, 13, 13, 0.025); position: relative; overflow: hidden; transition: border-color 0.35s, translate 0.35s var(--ease), box-shadow 0.35s; } .sess-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); background-size: 230% 230%; opacity: 0; transition: opacity 0.35s; } .sess-card:hover { border-color: rgba(255, 46, 99, 0.55); translate: 0 -5px; box-shadow: 0 18px 44px rgba(13, 13, 13, 0.09); } .sess-card:hover::before { opacity: 1; animation: grad-move 7s ease-in-out infinite; } .sess-ico { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; background: var(--signal); display: grid; place-items: center; box-shadow: 0 10px 26px rgba(255, 46, 99, 0.35); } .sess-ico svg { width: 26px; height: 26px; } .sess-n { display: block; font-size: 0.72rem; letter-spacing: 0.2em; color: var(--signal); margin-bottom: 8px; } .sess-card h3 { font-family: var(--f-disp); font-variation-settings: "wdth" 100, "wght" 700; font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--ink); margin-bottom: 10px; } .sess-card p { color: #55524c; line-height: 1.7; font-size: clamp(1rem, 1.2vw, 1.12rem); max-width: 72ch; } @media (max-width: 620px) { .sess-card { flex-direction: column; } } /* session drag-strip: icon medallion in panel; bone prose */ .panel { position: relative; } .panel .sess-ico { position: absolute; top: 26px; right: 26px; box-shadow: 0 8px 22px rgba(255, 46, 99, 0.3); } .panel .sess-ico svg { width: 24px; height: 24px; } .sec--bone .prose h2 { color: var(--ink); } .sec--bone .prose p, .sec--bone .prose ul li { color: #4a4740; } .sec--bone .phil { color: #8a857c; } /* session pages: livelier parallax on the statement bands */ @supports (animation-timeline: view()) { .statement--brisk .st-media img { scale: 1.08; animation-name: par-y-brisk; animation-range: cover 22% cover 78%; } @keyframes par-y-brisk { from { translate: 0 17%; } to { translate: 0 -17%; } } } /* session panels: icon leads top-left, extra height; four parallax personalities */ .panel--sess { min-height: min(62svh, 600px); } .sess-top { display: flex; align-items: center; gap: 18px; } .panel--sess .sess-ico { position: static; flex: 0 0 52px; width: 52px; height: 52px; } .panel--sess .p-tag { max-width: 40%; text-align: right; } @supports (animation-timeline: view()) { .statement--drift .st-media img { scale: 1.1; animation-name: par-y-drift; animation-range: cover 20% cover 80%; } @keyframes par-y-drift { from { translate: 0 14%; scale: 1.18; } to { translate: 0 -14%; scale: 1.06; } } .statement--rush .st-media img { scale: 1.06; animation-name: par-y-rush; animation-range: cover 26% cover 74%; } @keyframes par-y-rush { from { translate: 0 18%; } to { translate: 0 -18%; } } .statement--counter .st-media img { animation-name: par-y-zoomin; animation-range: cover 22% cover 78%; } @keyframes par-y-zoomin { from { translate: 0 14%; scale: 1.06; } to { translate: 0 -14%; scale: 1.18; } } } /* session bands: tall portrait sources get the big canvas, journey ends on the picture's anchor (ridge, figure, horizon) instead of a random middle slice */ .statement--brisk .st-media img, .statement--drift .st-media img, .statement--rush .st-media img, .statement--counter .st-media img { top: -32.5%; height: 165%; } .statement--brisk::after, .statement--drift::after, .statement--rush::after, .statement--counter::after { background: linear-gradient(105deg, rgba(13, 13, 13, 0.85) 24%, rgba(13, 13, 13, 0.5) 56%, rgba(13, 13, 13, 0.1) 84%); } /* session hero: meta strip lives inside the hero, one seamless header */ .hero-meta-strip { position: relative; z-index: 2; margin-top: clamp(48px, 8vh, 90px); padding-bottom: 0; } .hero-meta-strip .meta-grid { margin-top: 0; } .hero:has(.hero-meta-strip) { padding-bottom: clamp(18px, 3vh, 32px); } /* session panels: opaque body so stacked cards never bleed text through */ .panel--sess { background: #1b1a18; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.75); } /* session hero: glow dissolves before the hero ends, no clipped edge */ .hero:has(.hero-meta-strip) .glow-field { mask-image: linear-gradient(to bottom, #000 78%, transparent 98%); -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 98%); } /* two-card sessions: clean side-by-side, no drag */ .sess-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.5vw, 36px); margin-top: 44px; } .sess-duo .panel { min-height: 0; } @media (max-width: 820px) { .sess-duo { grid-template-columns: 1fr; } } /* session series tiles: room under the heading, uniform image crops */ .sess-next .tile-grid { margin-top: clamp(32px, 5vh, 56px); } .sess-next .mt-media { aspect-ratio: 16 / 9; overflow: hidden; } .sess-next .mt-media img { width: 100%; height: 100%; object-fit: cover; } /* two-up session cards: the pink line draws itself on hover */ .sess-duo .panel::before { transition: scale 0.6s var(--snap); } .sess-duo .panel:hover { --line: 1; border-color: rgba(255, 46, 99, 0.5); } /* hero copy: white on dark/imagery heroes, untouched grey/ink on light pages */ body:not(.page-light) .hero .hero-meta { color: #fff; } body:not(.page-light) .hero .hero-meta .live { color: var(--signal); } body:not(.page-light) .hero .lede { color: #fff; } /* art-of-killing blog hero (tall portrait): crop to the raised hand, not the sky */ img[src*="2a1cbba36dc6"] { object-position: 50% 52% !important; } /* ================= cookie notification ================= */ .cookie-note { position: fixed; z-index: 3000; left: 18px; bottom: 18px; width: min(430px, calc(100vw - 36px)); background: rgba(22, 21, 19, 0.92); border: 1px solid var(--line-d); border-radius: 16px; padding: 22px 24px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); translate: 0 24px; opacity: 0; transition: translate 0.5s var(--snap), opacity 0.5s; } .cookie-note.on { translate: 0 0; opacity: 1; } .cookie-note[hidden] { display: none; } .cookie-note p { color: var(--grey); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; } .cookie-note p strong { color: var(--bone); } .cookie-note p a { color: var(--bone); text-decoration: underline; } .cookie-note p a:hover { color: var(--signal); } .cn-actions { display: flex; gap: 10px; flex-wrap: wrap; } .cn-actions .btn { font-size: 0.8rem; padding: 11px 20px; } /* cookie banner: the decline button must be visible before hover */ .cookie-note .cn-actions .btn { color: var(--bone); border-color: rgba(240, 233, 221, 0.45); } .cookie-note .cn-actions .btn--solid { color: #fff; border-color: var(--signal); } /* cookie banner: all three choices on one line */ .cookie-note { width: min(600px, calc(100vw - 36px)); } .cn-actions { flex-wrap: nowrap; gap: 8px; } .cn-actions .btn { font-size: 0.72rem; padding: 10px 16px; white-space: nowrap; letter-spacing: 0; } @media (max-width: 460px) { .cn-actions { flex-wrap: wrap; } } /* cookie buttons: hover fill needs dark text (was white-on-bone) */ .cookie-note .cn-actions .btn:hover, .cookie-note .cn-actions .btn--solid:hover { color: var(--ink); } /* drag deck: promote cards to their own layers, never transition mid-drag */ .drag-strip .panel { will-change: transform, filter; transition: border-color 0.3s; }