/* ============================================================ DK's Ink — Nocturne edit Pitch black. Blackletter monoliths. Classical statues. ============================================================ */ /* Fonts are loaded via in the HTML (parallel, non-blocking) rather than @import here, which serialises requests behind the CSS. */ /* Local Lordish font. */ @font-face { font-family: "Lordish"; src: url('fonts/Lordish.woff2?v=2') format('woff2'), url('fonts/Lordish.ttf?v=2') format('truetype'); font-weight: 400; font-style: normal; font-display: optional; } /* Local Streetbomber font — current editorial tier. */ @font-face { font-family: "Streetbomber"; src: url('fonts/Streetbomber.woff2?v=1') format('woff2'), url('fonts/Streetbomber.ttf?v=1') format('truetype'); font-weight: 400 900; font-style: normal; font-display: swap; } /* Local Skate Hip Hop Tag font — current editorial tier. */ @font-face { font-family: "Skate Hip Hop Tag"; src: url('fonts/SkateHipHopTag.woff2?v=1') format('woff2'), url('fonts/SkateHipHopTag.otf?v=1') format('opentype'); font-weight: 400 900; font-style: normal; font-display: swap; } /* Metric-matched Arial fallback for Satoshi — keeps layout stable when Satoshi is loading so the body text doesn't reflow on font swap. */ @font-face { font-family: "Satoshi Fallback"; src: local("Arial"); size-adjust: 105%; ascent-override: 95%; descent-override: 22%; line-gap-override: 0%; } :root { --ink: #000000; --void: #050505; --smoke: #0e0e0e; --graphite: #161616; --steel: #232323; --iron: #383838; --ash: #7a7a7a; --stone: #9c9c9c; --fog: #c4c4c4; --paper: #d6d6d6; --snow: #ebebeb; --white: #f0f0f0; --pure: #ffffff; --bg: var(--ink); --fg: var(--white); --fg-muted: var(--fog); --fg-dim: var(--ash); --rule: rgba(240,240,240,0.10); --rule-strong:rgba(240,240,240,0.32); --font-body: "Satoshi", "Satoshi Fallback", -apple-system, "Segoe UI", system-ui, sans-serif; /* "mono" kept as a token name but is now a clean grotesk — labels read as modern tracked caps, not typewriter. */ --font-mono: "Satoshi", "Satoshi Fallback", -apple-system, "Segoe UI", system-ui, sans-serif; --font-display: "Lordish", "UnifrakturMaguntia", "Times New Roman", serif; --font-serif: "Skate Hip Hop Tag", "Streetbomber", "Cormorant", "Times New Roman", Georgia, serif; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --container: 1440px; --gutter-d: 40px; --gutter-m: 20px; } * { box-sizing: border-box; } :root { --ease-apple: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } html { scroll-behavior: smooth; scrollbar-gutter: stable; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.62; letter-spacing: 0.002em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { overflow-x: hidden; position: relative; } ::selection { background: var(--white); color: var(--ink); } a { color: inherit; text-decoration: none; } button { font-family: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; } img { display: block; max-width: 100%; } /* Image backdrop — fixed full-viewport low-opacity image behind everything */ .backdrop { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: var(--backdrop-opacity, 0.18); background: var(--backdrop-img, none) center / cover no-repeat; filter: grayscale(100%) contrast(1.1); animation: drift-slow 28s ease-in-out infinite; } .no-backdrop .backdrop { display: none; } /* Starfield / dust overlay (very subtle) */ .starfield { position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: radial-gradient(1px 1px at 12% 18%, rgba(240,240,240,0.5) 50%, transparent 51%), radial-gradient(1px 1px at 28% 72%, rgba(240,240,240,0.4) 50%, transparent 51%), radial-gradient(1px 1px at 46% 36%, rgba(240,240,240,0.7) 50%, transparent 51%), radial-gradient(1px 1px at 58% 84%, rgba(240,240,240,0.3) 50%, transparent 51%), radial-gradient(1px 1px at 72% 22%, rgba(240,240,240,0.5) 50%, transparent 51%), radial-gradient(1px 1px at 88% 56%, rgba(240,240,240,0.4) 50%, transparent 51%), radial-gradient(1px 1px at 4% 54%, rgba(240,240,240,0.3) 50%, transparent 51%), radial-gradient(1px 1px at 94% 92%, rgba(240,240,240,0.5) 50%, transparent 51%), radial-gradient(1px 1px at 36% 8%, rgba(240,240,240,0.6) 50%, transparent 51%); background-size: 380px 380px; background-repeat: repeat; opacity: 0.6; mix-blend-mode: screen; } .no-stars .starfield { display: none; } /* ------------------------------------------------------------ Ambient flow animations ------------------------------------------------------------ */ @keyframes drift-slow { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, -8px); } } @keyframes flow-in { 0% { opacity: 0; transform: translateY(0.5em) rotate(2deg); filter: blur(10px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } } @keyframes line-sweep { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } } .flow-letter { display: inline-block; animation: flow-in 1.1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 150ms); white-space: pre; transform-origin: 50% 100%; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Animations disabled globally (toggleable via Tweaks panel) */ body.no-anim *, body.no-anim *::before, body.no-anim *::after { animation: none !important; transition: none !important; } body.no-anim .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } body.no-anim .work { opacity: 1 !important; transform: none !important; } body.no-anim .flow-letter { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } /* Respect OS-level reduced-motion preference — total stop. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } .work { opacity: 1 !important; transform: none !important; } .flow-letter { opacity: 1 !important; transform: none !important; filter: none !important; } } /* Mobile-only persistent section bar on the home page — always visible while scrolled into the content, swaps the current section, never hides. */ .m-sectionbar { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 130; height: 52px; align-items: center; gap: 12px; padding: 0 16px; background: var(--ink); border-bottom: 1px solid var(--rule); transform: translateY(-100%); transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1); } @media (max-width: 880px) { .m-sectionbar { display: flex; } } .m-sectionbar.is-on { transform: translateY(0); } /* When the persistent section bar takes over on mobile, slide the main top nav out so the two fixed bars never stack/overlap at top:0. */ @media (max-width: 880px) { body.m-sectionbar-on .topbar { transform: translateY(-100%); } .topbar { transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1); } } .m-sectionbar__menu { flex-shrink: 0; margin-left: auto; width: 44px; height: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: 0; cursor: pointer; } .m-sectionbar__menu span { display: block; width: 20px; height: 1.5px; background: var(--white); } .m-sectionbar__home { flex-shrink: 0; display: inline-flex; align-items: center; text-decoration: none; } .m-sectionbar__mark { font-family: var(--font-display); font-weight: 100; font-size: 24px; line-height: 1; color: var(--white); } .m-sectionbar__cur { flex: 0 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: visible; } .m-sectionbar__cur { position: relative; } .m-sectionbar__cur::before { content: ""; position: absolute; left: -12px; right: -12px; top: 50%; height: 168%; transform: translateY(-50%); z-index: 0; background: rgba(240,240,240,0.18); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; pointer-events: none; } .m-sectionbar__cur .n, .m-sectionbar__cur .t { position: relative; z-index: 1; } .m-sectionbar__cur .n { flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--fog); } .m-sectionbar__cur .t { font-family: var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: 0.01em; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-sectionbar__cur.swap { animation: sb-swap 420ms var(--ease-out); } @keyframes sb-swap { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .m-sectionbar { transition: none; } .m-sectionbar__cur.swap { animation: none; } } /* Keyboard focus — mono outline that fits the theme, only on keyboard nav. */ :focus-visible { outline: 2px solid var(--white); outline-offset: 3px; } /* Magnetic CTAs — smooth settle when the pointer leaves; the JS sets transform live on move, so we only transition the return-to-rest. */ .is-magnetic { transition: transform 600ms var(--ease-out); will-change: transform; } .is-magnetic:hover { transition: transform 120ms linear; } /* Display-heading mask reveal — the big serif/display titles rise from behind a clip edge as they enter, instead of a flat fade. Reads like SplitText. */ .works-head__title, .legacy__lead, .book__intro h3, .aftercare__title { clip-path: inset(-0.15em -0.1em -0.15em -0.1em); } .reveal .works-head__title, .reveal.book__intro h3, .reveal .legacy__lead { --mask-y: 110%; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 100%); } .reveal:not(.in) .works-head__title { transform: translateY(0.18em); opacity: 0; } .reveal.in .works-head__title { transform: none; opacity: 1; transition: transform 1.1s var(--ease-out) 0.08s, opacity 0.9s var(--ease-out) 0.08s; } .field input:focus-visible, .field textarea:focus-visible, .wv-input:focus-visible { outline: none; } /* Skip-to-content link — visible only when focused. */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -100px; left: 12px; z-index: 300; background: var(--white); color: var(--ink); padding: 12px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: top 200ms var(--ease-apple); } .skip-link:focus { top: 12px; } /* ------------------------------------------------------------ Cursor ------------------------------------------------------------ */ html.cursor-custom, html.cursor-custom * { cursor: none !important; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); mix-blend-mode: difference; } .cursor-dot { width: 5px; height: 5px; background: var(--white); border-radius: 50%; transition: width 200ms ease, height 200ms ease; } .cursor-ring { width: 32px; height: 32px; border: 1px solid rgba(240,240,240,0.5); border-radius: 50%; transition: width 240ms cubic-bezier(.2,.8,.2,1), height 240ms cubic-bezier(.2,.8,.2,1), opacity 200ms; } .cursor-dot.is-hover { width: 12px; height: 12px; } .cursor-ring.is-hover { width: 52px; height: 52px; border-color: rgba(240,240,240,0.85); } @media (pointer: coarse) { html.cursor-custom, html.cursor-custom * { cursor: auto !important; } .cursor-dot, .cursor-ring { display: none !important; } } /* ------------------------------------------------------------ Reveal ------------------------------------------------------------ */ /* ------------------------------------------------------------ Reveal — editorial clip-wipe + lift. Content rises while a mask unveils it bottom-to-top; reads more "print plate" than fade-up. ------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(44px); clip-path: inset(0 0 8% 0); filter: blur(5px); transition: opacity 1.1s var(--ease-out), transform 1.25s cubic-bezier(0.16, 0.84, 0.24, 1), clip-path 1.25s var(--ease-out), filter 0.95s var(--ease-out); } .reveal.in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); filter: blur(0); } .reveal.delay-1 { transition-delay: 100ms; } .reveal.delay-2 { transition-delay: 200ms; } .reveal.delay-3 { transition-delay: 300ms; } .reveal.delay-4 { transition-delay: 400ms; } /* ------------------------------------------------------------ Containers ------------------------------------------------------------ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter-d); position: relative; } @media (max-width: 720px) { .container { padding: 0 var(--gutter-m); } } .section { padding: var(--s-10) 0; position: relative; } @media (max-width: 720px) { .section { padding: var(--s-8) 0; } } /* ------------------------------------------------------------ Top bar ------------------------------------------------------------ */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 20px var(--gutter-d); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); border-bottom: 1px solid rgba(240, 240, 240, 0.08); } .topbar__brand { display: flex; flex-direction: column; gap: 2px; line-height: 1; } /* Logo slot — empty frame for user's mark, sits top-left. */ .topbar__logo { display: inline-flex; align-items: center; justify-self: start; text-decoration: none; } .topbar__logo-slot { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--white); letter-spacing: -0.02em; transition: opacity 300ms var(--ease-out); } .topbar__logo:hover .topbar__logo-slot { opacity: 0.7; } /* Right cluster — IG anchor + Waiver pill. */ .topbar__right { justify-self: end; display: inline-flex; align-items: center; gap: 16px; } .topbar__ig { --ink-fill: var(--white); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 100px; border: 1px solid var(--rule-strong); color: var(--white); transition: color 280ms var(--ease-out), border-color 280ms var(--ease-out); } .topbar__ig:hover, .topbar__ig:focus-visible, .topbar__ig:active { color: var(--ink); border-color: var(--white); } .topbar__ig svg { position: relative; z-index: 2; } .topbar__brand strong { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); } .topbar__brand small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--fog); } .topbar__nav { display: flex; gap: 4px; align-items: center; justify-self: center; } .topbar__nav a { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--fog); padding: 7px 14px; position: relative; white-space: nowrap; border-radius: 100px; transition: color 320ms var(--ease-out); } /* Ink-splatter highlight — an irregular blot wipes in behind the label on hover, and fills solid white when the tab's section is active. Each tab gets its OWN blob shape + rotation so no two highlights match. */ .topbar__nav a::before { content: ""; position: absolute; inset: -22px -12px; background: var(--white); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cpath fill='%23000' d='M28 40c-9-2-18-9-15-19 3-9 16-9 24-13 9-5 15-6 26-6 9 0 15-4 26-3 9 0 14 5 24 5 11 0 21-4 30 1 8 4 6 14 12 19 6 6 17 7 17 16 0 10-12 11-20 15-7 3-12 9-21 11-9 2-16-2-26-1-9 0-15 4-25 3-9 0-15-5-25-6-9 0-19 3-27-2-7-4-4-14-9-19z'/%3E%3Ccircle fill='%23000' cx='18' cy='28' r='5'/%3E%3Ccircle fill='%23000' cx='184' cy='52' r='6'/%3E%3Ccircle fill='%23000' cx='30' cy='62' r='4'/%3E%3Ccircle fill='%23000' cx='170' cy='18' r='4'/%3E%3Ccircle fill='%23000' cx='100' cy='8' r='3'/%3E%3Ccircle fill='%23000' cx='95' cy='73' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cpath fill='%23000' d='M28 40c-9-2-18-9-15-19 3-9 16-9 24-13 9-5 15-6 26-6 9 0 15-4 26-3 9 0 14 5 24 5 11 0 21-4 30 1 8 4 6 14 12 19 6 6 17 7 17 16 0 10-12 11-20 15-7 3-12 9-21 11-9 2-16-2-26-1-9 0-15 4-25 3-9 0-15-5-25-6-9 0-19 3-27-2-7-4-4-14-9-19z'/%3E%3Ccircle fill='%23000' cx='18' cy='28' r='5'/%3E%3Ccircle fill='%23000' cx='184' cy='52' r='6'/%3E%3Ccircle fill='%23000' cx='30' cy='62' r='4'/%3E%3Ccircle fill='%23000' cx='170' cy='18' r='4'/%3E%3Ccircle fill='%23000' cx='100' cy='8' r='3'/%3E%3Ccircle fill='%23000' cx='95' cy='73' r='3'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transform: scale(0.55) rotate(-4deg); opacity: 0; transition: transform 480ms cubic-bezier(0.34, 1.2, 0.4, 1), opacity 320ms var(--ease-out); z-index: -1; } /* Per-tab ink shapes — each silhouette is genuinely distinct (see below). */ /* Ink / blood SPLATTER family — organic, reference-style splats with a round core, bulb-tipped radiating arms and flung droplets. Each varies. */ /* Tab 1 (About) */ .topbar__nav a:nth-child(1)::before { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* Tab 2 (Portfolio) */ .topbar__nav a:nth-child(2)::before { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* Tab 3 (Book) */ .topbar__nav a:nth-child(3)::before { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* Tab 4 (Care) */ .topbar__nav a:nth-child(4)::before { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* Tab 5 (FAQ) */ .topbar__nav a:nth-child(5)::before { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .navlink__roll { position: relative; display: inline-block; } .topbar__nav a:hover { color: var(--ink); } .topbar__nav a:hover::before { transform: scale(1) rotate(-3deg); opacity: 1; } .topbar__nav a:nth-child(2):hover::before, .topbar__nav a:nth-child(2).is-active::before { transform: scale(1.02) rotate(3deg); } .topbar__nav a:nth-child(3):hover::before, .topbar__nav a:nth-child(3).is-active::before { transform: scale(1.05) rotate(-5deg); } .topbar__nav a:nth-child(4):hover::before, .topbar__nav a:nth-child(4).is-active::before { transform: scale(1.02) rotate(4deg); } .topbar__nav a:nth-child(5):hover::before, .topbar__nav a:nth-child(5).is-active::before { transform: scale(1.04) rotate(-2deg); } /* Active-section state — splatter stays, slightly rotated for organic feel. */ .topbar__nav a.is-active { color: var(--ink); font-weight: 400; } .topbar__nav a.is-active::before { transform: scale(1.04) rotate(2deg); opacity: 1; } .topbar__nav a .count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--fog); margin-left: 4px; } .topbar__cta { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--ink); padding: 8px 18px; border-radius: 100px; background: var(--white); position: relative; overflow: hidden; transition: color 320ms var(--ease-out); } .topbar__cta::before { content: none; } .topbar__cta > * { position: relative; z-index: 2; } .topbar__cta:hover { color: var(--white); } /* ===================================================================== Liquid ink fill — rising ink with a wavy waterline crest. Used on: Waiver, Instagram, Save as PDF, Send consult request. ===================================================================== */ .ink-btn { position: relative; overflow: hidden; isolation: isolate; } .ink-btn > *:not(.ink-fill) { position: relative; z-index: 2; } .ink-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 0; background: var(--ink-fill, var(--ink)); transform: translateY(calc(100% + 22px)); transition: transform 920ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } /* Wavy waterline sitting on top of the rising body. */ .ink-fill::before { content: ""; position: absolute; left: -4%; right: -4%; bottom: 100%; height: 14px; background: var(--ink-fill, var(--ink)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='14' viewBox='0 0 110 14'%3E%3Cpath fill='%23000' d='M0 7 C 14 1 27 1 41 7 S 69 13 82 7 96 1 110 7 L110 14 L0 14 Z'/%3E%3C/svg%3E") repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='14' viewBox='0 0 110 14'%3E%3Cpath fill='%23000' d='M0 7 C 14 1 27 1 41 7 S 69 13 82 7 96 1 110 7 L110 14 L0 14 Z'/%3E%3C/svg%3E") repeat-x; -webkit-mask-size: 110px 14px; mask-size: 110px 14px; } .ink-btn:hover .ink-fill, .ink-btn:focus-visible .ink-fill { transform: translateY(0); } .ink-btn:hover .ink-fill::before, .ink-btn:focus-visible .ink-fill::before { animation: ink-wave 1.4s linear infinite; } @keyframes ink-wave { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 110px 0; mask-position: 110px 0; } } body.no-anim .ink-fill { transition: none; } body.no-anim .ink-fill::before { animation: none; } @media (prefers-reduced-motion: reduce) { .ink-btn:hover .ink-fill::before { animation: none; } } .topbar__cta:hover { opacity: 1; } /* CTA label sits above the ink-fill so the text never gets painted over. */ .cta__label { position: relative; z-index: 2; } /* Mobile hamburger button — hidden by default, only shown < 880px */ .topbar__menu-btn { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; width: 40px; height: 40px; justify-self: end; position: relative; z-index: 60; } @media (max-width: 880px) { .topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px var(--gutter-m); } .topbar__nav { display: none; } .topbar__cta { display: none; } .topbar__right { display: none; } .topbar__menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; width: auto; height: auto; padding: 8px 18px; border: 0; border-radius: 100px; background: var(--white); color: var(--ink); --ink-fill: var(--ink); font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; transition: color 320ms var(--ease-out); } .topbar__menu-label { position: relative; z-index: 2; } .topbar__menu-btn:hover { color: var(--white); } .topbar__logo span { font-size: 24px; } } /* Mobile menu — dim scrim + top dropdown panel (not a full-screen takeover). */ .mobile-menu { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease-apple); } .mobile-menu.is-open { opacity: 1; pointer-events: auto; } .mobile-menu__panel { position: absolute; top: 0; left: 0; right: 0; background: var(--ink); border-bottom: 1px solid rgba(240, 240, 240, 0.12); padding: 10px var(--gutter-m) 24px; display: flex; flex-direction: column; transform: translateY(-100%); transition: transform 360ms var(--ease-apple); } .mobile-menu.is-open .mobile-menu__panel { transform: none; } .mobile-menu__bar { display: flex; align-items: center; justify-content: space-between; height: 44px; margin-bottom: 8px; } .mobile-menu__title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fog); } .mobile-menu__close { width: 44px; height: 44px; margin-right: -10px; background: transparent; border: 0; position: relative; cursor: pointer; } .mobile-menu__close span { position: absolute; top: 50%; left: 50%; width: 18px; height: 1.5px; background: var(--white); } .mobile-menu__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } .mobile-menu__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); } .mobile-menu__nav { display: flex; flex-direction: column; gap: 0; } .mobile-menu__nav a { display: flex; align-items: baseline; gap: 20px; padding: 15px 0; border-bottom: 1px solid rgba(240, 240, 240, 0.08); font-family: var(--font-display); font-size: clamp(28px, 7vw, 40px); line-height: 1; color: var(--white); text-decoration: none; letter-spacing: -0.01em; } .mobile-menu__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--fog); min-width: 32px; align-self: flex-start; padding-top: 8px; } .mobile-menu__cta { display: flex; align-items: baseline; gap: 14px; } .mobile-menu__cta svg { align-self: center; width: 14px; height: 14px; } .mobile-menu__foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fog); padding-top: 20px; border-top: 1px solid rgba(240, 240, 240, 0.08); } .mobile-menu__foot a { color: var(--white); text-decoration: none; } /* Lightbox */ .lb { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 64px 64px 80px; animation: lb-in 280ms var(--ease-apple); } @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } } .lb__stage { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .lb__img { width: min(78vw, 660px); height: min(calc(100vh - 200px), 78vh); max-width: 100%; object-fit: cover; object-position: center 42%; display: block; filter: contrast(1.03); animation: lb-img-in 360ms var(--ease-apple); } /* Lightbox frame-adjust controls */ .lb__frame { position: relative; overflow: hidden; } .lb__adjust { position: absolute; left: 0; top: -38px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fog); background: transparent; border: 1px solid var(--rule-on-dark, rgba(240,240,240,0.2)); border-radius: 100px; padding: 7px 16px; cursor: pointer; transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out), background 200ms var(--ease-out); z-index: 5; } .lb__adjust:hover { color: var(--white); border-color: var(--white); } .lb__adjust.is-on { color: var(--ink); background: var(--white); border-color: var(--white); } .lb__ctl { position: absolute; left: 0; bottom: 0; z-index: 6; width: min(300px, 80vw); } @media (max-width: 720px) { .lb__adjust { top: auto; bottom: -42px; left: 50%; transform: translateX(-50%); } .lb__ctl { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); } } @keyframes lb-img-in { from { opacity: 0; } to { opacity: 1; } } .lb__meta { display: flex; flex-direction: column; gap: 4px; } .lb__num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fog); } .lb__title { font-family: var(--font-body); font-weight: 400; font-size: 15px; letter-spacing: -0.005em; color: var(--white); } .lb__close { position: absolute; top: 28px; right: 28px; width: 40px; height: 40px; background: transparent; border: 0; cursor: pointer; z-index: 2; } .lb__close span { position: absolute; top: 50%; left: 50%; width: 24px; height: 1.5px; background: var(--white); transform-origin: center; } .lb__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } .lb__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); } .lb__close:hover span { background: var(--fog); } .lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; background: transparent; border: 1px solid rgba(240, 240, 240, 0.24); cursor: pointer; z-index: 2; transition: border-color 200ms, background 200ms; } .lb__nav:hover { border-color: var(--white); background: rgba(240, 240, 240, 0.04); } .lb__nav--prev { left: 28px; } .lb__nav--next { right: 28px; } .lb__arrow { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--white); border-bottom: 1.5px solid var(--white); transform-origin: center; } .lb__arrow--left { transform: translate(-40%, -50%) rotate(135deg); } .lb__arrow--right { transform: translate(-60%, -50%) rotate(-45deg); } @media (max-width: 720px) { .lb { padding: 24px 12px 64px; } .lb__nav { width: 44px; height: 44px; } .lb__nav--prev { left: 12px; } .lb__nav--next { right: 12px; } .lb__img { width: min(90vw, 520px); height: min(calc(100vh - 150px), 70vh); } /* Drop the close button clear of the magnetic header / notch + enlarge the hit target for easy one-handed tapping. */ .lb__close { top: calc(env(safe-area-inset-top, 0px) + 74px); right: 16px; width: 48px; height: 48px; border: 1px solid var(--rule-on-dark, rgba(240,240,240,0.2)); border-radius: 50%; background: rgba(13,13,13,0.55); backdrop-filter: blur(2px); z-index: 140; } } @media (max-width: 880px) { .topbar__nav { display: none; } } /* ------------------------------------------------------------ Hero ------------------------------------------------------------ */ .hero { position: relative; height: 260vh; background: #0d0d0d; z-index: 1; isolation: isolate; } .hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #0d0d0d; display: flex; align-items: stretch; } /* Fade ONLY the inner layers (video + title + content) near the end of the pin so the hero dissolves into About — the pin itself stays a solid black plate so the page backdrop NEVER shows through the hero. */ .hero__pin > * { opacity: calc(1 - clamp(0, (var(--scroll-progress, 0) - 0.7) * 3.6, 1)); } .hero__bg-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.18em; pointer-events: none; z-index: 6; } /* Title halves split apart + fade as the hero scrolls (osmo word-split vibe). */ .hero__title-half { display: inline-block; transition: transform 90ms linear; opacity: calc(var(--bl-opacity, 0.95) * (1 - var(--hp, 0) * 1.8)); } .hero__title-half--l { transform: translateX(calc(var(--hp, 0) * -42vw)); } .hero__title-half--r { transform: translateX(calc(var(--hp, 0) * 42vw)); } .hero__bg-title span.hero__title-half { font-family: var(--font-display); font-size: clamp(140px, 22vw, 400px); line-height: 1; color: var(--white); letter-spacing: -0.01em; white-space: nowrap; user-select: none; text-transform: none; /* Soft shadow halo to lift it off the photo without blocky outline */ text-shadow: 0 2px 20px rgba(0, 0, 0, 0.85), 0 6px 60px rgba(0, 0, 0, 0.7), 0 0 1px rgba(240, 240, 240, 0.4); } .hero__statue { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; --scroll-progress: 0; transform: translateY(calc(var(--scroll-progress) * -20px)); transition: transform 80ms linear; } .hero__statue img, .hero__statue .hero__media { width: 100vw; max-width: none; height: 100vh; height: 100svh; max-height: none; object-fit: cover; object-position: center 41%; /* Full opacity + full brightness the entire time the hero is on screen; only zooms + softly blurs near the very end as it scrolls away. */ transform: scale(calc(1 + var(--scroll-progress, 0) * 0.8)); filter: grayscale(100%) brightness(1) contrast(1.04) blur(calc(var(--scroll-progress, 0) * 8px)); transition: transform 80ms linear, filter 100ms linear; background: var(--ink); } .hero__content { position: relative; z-index: 4; width: 100%; display: grid; grid-template-rows: 1fr auto; padding: 140px var(--gutter-d) 48px; opacity: calc(1 - var(--scroll-progress, 0) * 1.2); transform: translateY(calc(var(--scroll-progress, 0) * -30px)); transition: opacity 80ms linear, transform 80ms linear; will-change: opacity, transform; } @media (max-width: 720px) { .hero__content { padding: 120px var(--gutter-m) 32px; } } .hero__copy-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; width: 100%; } .hero__copy { align-self: end; display: flex; flex-direction: column; gap: 18px; max-width: 460px; } .hero__copy--left { max-width: 520px; } .hero__copy--right { max-width: 360px; text-align: right; align-items: flex-end; } @media (max-width: 760px) { .hero__copy-row { flex-direction: column; align-items: flex-start; gap: 24px; } .hero__copy--right { text-align: left; align-items: flex-start; } } .hero__eyebrow { font-family: var(--font-serif); font-weight: 600; font-size: clamp(20px, 2.6vw, 32px); line-height: 1.25; letter-spacing: -0.01em; color: var(--white); font-style: normal; position: relative; display: inline-block; padding-left: 56px; max-width: 16ch; text-shadow: 0 1px 14px rgba(0,0,0,0.85), 0 2px 36px rgba(0,0,0,0.6); } .hero__eyebrow::before { content: ""; position: absolute; left: 0; top: -16px; width: 40px; height: 1px; background: var(--white); animation: line-sweep 5s cubic-bezier(.4,0,.2,1) infinite; } .hero__lead { font-family: var(--font-body); font-weight: 400; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -0.015em; line-height: 1.18; color: var(--white); margin: 0; } .hero__sub { font-family: var(--font-serif); font-weight: 600; font-size: 15px; line-height: 1.55; letter-spacing: 0.01em; color: var(--snow); max-width: 30ch; text-shadow: 0 1px 12px rgba(0,0,0,0.85), 0 2px 30px rgba(0,0,0,0.6); margin: 0; } .hero__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: 56px; flex-wrap: wrap; } /* ------------------------------------------------------------ Section markers — eyebrow + blackletter giant + body ------------------------------------------------------------ */ .sec { position: relative; } .sec__giant { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1; overflow: clip; } .sec__giant span { font-family: var(--font-display); font-size: clamp(120px, 16vw, 280px); line-height: 1; color: var(--white); opacity: var(--bl-sec-opacity, 0.12); letter-spacing: -0.01em; white-space: nowrap; user-select: none; } .sec__eyebrow { font-family: var(--font-body); font-weight: 400; font-style: italic; font-size: 12px; letter-spacing: 0.04em; color: var(--fog); margin-bottom: 10px; display: inline-block; position: relative; padding-left: 36px; } .sec__eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 1px; background: var(--fog); animation: line-sweep 5s cubic-bezier(.4,0,.2,1) infinite; } /* ------------------------------------------------------------ Legacy / About ------------------------------------------------------------ */ .legacy { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; min-height: 76vh; } @media (max-width: 880px) { .legacy { grid-template-columns: 1fr; gap: 40px; min-height: auto; } } .legacy__copy { position: relative; z-index: 3; max-width: 540px; } .legacy__lead { font-family: var(--font-serif); font-weight: 600; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.018em; line-height: 1.28; margin: 0 0 24px; color: var(--white); } .legacy__lead em { font-family: var(--font-serif); font-style: italic; font-weight: 700; letter-spacing: 0; } .legacy__body { font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 1.7; color: var(--fog); margin: 0 0 28px; max-width: 44ch; } /* RevealText — word-stagger masked rise for body copy. */ .rt__para { display: block; } .rt__para + .rt__para { margin-top: 1em; } .rt__w { display: inline-block; overflow: hidden; vertical-align: top; margin-right: 0.26em; } .rt__in { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform 720ms var(--ease-out), opacity 720ms var(--ease-out); } .rt.in .rt__in { transform: translateY(0); opacity: 1; } body.no-anim .rt__in { transform: none !important; opacity: 1 !important; transition: none !important; } .legacy__meta { display: grid; grid-template-columns: repeat(3, auto); gap: 32px; padding-top: 24px; border-top: 1px solid var(--rule); } .legacy__meta dt { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fog); margin-bottom: 4px; } .legacy__meta dd { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--white); transition: transform 460ms var(--ease-out), opacity 320ms var(--ease-out); } .legacy__meta > div { cursor: default; } .legacy__meta > div:hover dd { transform: translateY(-6px); } .legacy__meta > div:hover dt { opacity: 1; color: var(--white); } .legacy__meta dt { transition: color 320ms var(--ease-out), opacity 320ms var(--ease-out); } .legacy__statue { position: relative; height: 70vh; max-height: 720px; display: flex; align-items: center; justify-content: center; z-index: 3; --p: 0; transform: scale(calc(0.92 + var(--p) * 0.08)); transition: transform 120ms linear; will-change: transform; } .legacy__statue img, .legacy__statue video { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(100%) brightness(calc(0.96 + var(--p, 0) * 0.08)) contrast(1.04); transition: filter 200ms linear; will-change: filter; } /* Tight white flash-sheet frame hugging the video edge directly. */ .legacy__statue video { box-shadow: 0 0 0 2px rgba(240, 240, 240, 1), 0 0 0 3px rgba(240, 240, 240, 0.2); } @media (max-width: 880px) { .legacy__statue { height: 60vh; } } .legacy__card { position: absolute; bottom: 14%; right: -20px; width: 200px; padding: 16px 18px 18px; background: rgba(8,8,8,0.85); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 1px solid rgba(240,240,240,0.18); /* cut corner top-right */ clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); z-index: 4; } .legacy__card .stamp { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog); margin-bottom: 6px; display: block; } .legacy__card h5 { font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: 0; margin: 0 0 8px; color: var(--white); } .legacy__card p { font-size: 11px; line-height: 1.5; color: var(--fog); margin: 0; } /* ------------------------------------------------------------ Works ------------------------------------------------------------ */ .works-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: var(--s-5); position: relative; z-index: 3; } .works-head__l { display: flex; flex-direction: column; gap: 12px; } .sec__desc { position: relative; z-index: 3; font-family: var(--font-serif); font-weight: 600; font-size: 15px; line-height: 1.6; color: var(--fog); max-width: 74ch; margin: 0 0 var(--s-7); } .works-head__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.005em; line-height: 1; color: var(--white); margin: 0; } .works-head__index { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fog); white-space: nowrap; } .works-head__tools { justify-self: end; } .works-head__hint { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog); white-space: nowrap; } /* -------- Expanding gallery -------- */ .xg { list-style: none; margin: 0 0 var(--s-7); padding: 0; display: flex; gap: 8px; height: 520px; position: relative; z-index: 3; } .xg__panel { position: relative; flex: 1 1 0; min-width: 40px; overflow: hidden; cursor: pointer; outline: none; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); transition: flex-grow 620ms var(--ease-out); } .xg__panel.is-active { flex-grow: 6; cursor: zoom-in; } .xg__panel::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(240,240,240,0.22); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); transition: box-shadow 400ms var(--ease-out); } .xg__panel.is-active::after { box-shadow: inset 0 0 0 1px rgba(240,240,240,0.55); } .xg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: grayscale(100%) contrast(1.05) brightness(0.62); transform: scale(calc(1.7 * var(--fz, 1))) translate(calc((50 - var(--fx, 50)) * 0.7%), calc((50 - var(--fy, 50)) * 0.7%)); transition: filter 620ms var(--ease-out), transform 620ms var(--ease-out); } .xg__panel.is-active .xg__img { filter: grayscale(100%) contrast(1.06) brightness(1); transform: scale(calc(1.7 * var(--fz, 1))) translate(calc((50 - var(--fx, 50)) * 0.7%), calc((50 - var(--fy, 50)) * 0.7%)); } .xg__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 45%, transparent 75%); opacity: 0.85; transition: opacity 500ms var(--ease-out); } .xg__panel.is-active .xg__scrim { opacity: 1; } /* Collapsed: vertical title rail + index. */ .xg__edge { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; transition: opacity 320ms var(--ease-out); } .xg__edge-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--fog); } .xg__edge-title { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); white-space: nowrap; } .xg__panel.is-active .xg__edge { opacity: 0; } /* Expanded: full meta block. */ .xg__open { position: absolute; left: 0; bottom: 0; z-index: 4; padding: 28px 32px; display: flex; flex-direction: column; gap: 6px; max-width: 90%; opacity: 0; transform: translateY(12px); transition: opacity 460ms var(--ease-out) 120ms, transform 560ms var(--ease-out) 120ms; pointer-events: none; } .xg__panel.is-active .xg__open { opacity: 1; transform: none; } .xg__open-num { font-family: var(--font-mono); font-size: 11px; margin-bottom: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fog); } .xg__open-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 52px); line-height: 1; letter-spacing: -0.005em; color: var(--white); } .xg__open-sub { font-family: var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: 0.02em; color: var(--snow); } .xg__open-cue { margin-top: 12px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); } .xg__arrow { display: inline-block; width: 26px; height: 1px; background: currentColor; position: relative; } .xg__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); } body.no-anim .xg__panel, body.no-anim .xg__img { transition: none !important; } @media (max-width: 760px) { /* Vertical stack of the same animated expanding cards as desktop — tap a card to expand it (image un-dims + meta slides in), tap again to open fullscreen. Mirrors the desktop interaction, just stacked. */ .xg { flex-direction: column; height: auto; } .xg__panel { flex: none; min-width: 0; height: 76px; min-height: 76px; transition: height 620ms var(--ease-out); } .xg__panel.is-active { height: 420px; } .xg__edge { flex-direction: row; align-items: center; } .xg__edge-title { writing-mode: horizontal-tb; transform: none; } .xg__open { padding: 18px 20px; max-width: 100%; } .xg__open-title { font-size: clamp(24px, 7vw, 40px); line-height: 1.02; } .xg__open-sub, .xg__open-num { white-space: normal; } .xg__edge { padding: 12px 14px; max-width: 100%; } .xg__edge-title { font-size: 12px; letter-spacing: 0.08em; max-width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; } .works-head__hint { display: none; } } /* ------------------------------------------------------------ Booking ------------------------------------------------------------ */ .book { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; position: relative; z-index: 3; } @media (max-width: 880px) { .book { grid-template-columns: 1fr; gap: 40px; } } .book__intro h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 6vw, 84px); letter-spacing: -0.005em; line-height: 1; margin: 0 0 24px; color: var(--white); } .book__intro p { font-size: 13px; font-weight: 400; line-height: 1.7; color: var(--fog); margin: 0 0 28px; max-width: none; } /* Pricing breakdown block — sits in book__intro above contact dl */ .pricing { margin: 24px 0 28px; padding: 20px 0 8px; border-top: 1px solid var(--rule); } .pricing__head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fog); display: block; margin-bottom: 14px; } .pricing__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(240,240,240,0.06); font-size: 13px; color: var(--white); } .pricing__row:last-of-type { border-bottom: 0; } .pricing__row span:last-child { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fog); white-space: nowrap; } .pricing__row--muted { color: var(--fog); } .pricing__row--muted span:last-child { color: var(--snow); } .pricing__note { margin: 14px 0 0; font-family: var(--font-body); font-weight: 400; font-size: 11px; line-height: 1.55; color: var(--ash); } /* Filled deposit-pay CTA — solid white box, dark text */ .cta--filled { background: var(--white); color: var(--ink); text-decoration: none; display: inline-flex; } .cta--filled:hover { background: var(--snow); color: var(--ink); } /* Sticky mobile action bar — fixed bottom, only shown < 720px */ .mobile-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; display: none; gap: 8px; pointer-events: none; } .mobile-bar__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 14px; background: rgba(13,13,13,0.92); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(240,240,240,0.22); color: var(--white); font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; pointer-events: auto; } .mobile-bar__btn--primary { background: var(--white); color: var(--ink); border-color: var(--white); } .mobile-bar__btn:active { transform: scale(0.98); } @media (max-width: 720px) { .mobile-bar { display: flex; } /* Add a bit of bottom padding to the footer so the bar doesn't cover the IG icon */ .footer { padding-bottom: 90px; } } /* Hide bar when mobile menu is open so it doesn't show through */ .mobile-menu.is-open ~ .mobile-bar { display: none; } .book__intro dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 0; padding-top: 4px; } .book__intro dt { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog); margin-bottom: 4px; } .book__intro dd { margin: 0; font-size: 12px; color: var(--snow); } .form { display: flex; flex-direction: column; gap: 28px; } .form__row { display: flex; gap: 32px; } .form__row > * { flex: 1; } @media (max-width: 560px) { .form__row { flex-direction: column; gap: 28px; } } .field { display: flex; flex-direction: column; gap: 8px; } .field__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fog); display: flex; justify-content: space-between; } .field input, .field textarea, .field select { background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px; padding: 12px 14px; font-family: var(--font-body); font-weight: 400; font-size: 15px; color: var(--white); outline: none; transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); width: 100%; resize: vertical; } .field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7a7a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; resize: none; cursor: pointer; } .field select option { background: #0d0d0d; color: var(--white); } .field input::placeholder, .field textarea::placeholder { color: var(--ash); font-weight: 400; } .field input:hover, .field textarea:hover, .field select:hover { border-color: var(--fog); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--white); box-shadow: none; outline: none; } .field textarea { min-height: 100px; line-height: 1.6; } .upload { border: 1px dashed var(--rule-strong); padding: 20px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color 200ms, background 200ms; position: relative; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); } .upload:hover { border-color: var(--white); background: rgba(240,240,240,0.02); } .upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .upload__title { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--white); } .upload__hint { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog); } .upload.has-file { border-style: solid; border-color: var(--white); } .cta { --ink-fill: var(--white); align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; padding: 16px 26px; border: 1px solid var(--white); background: transparent; color: var(--white); font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; transition: color 240ms var(--ease-out); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); } .cta:hover { color: var(--ink); } .cta__arrow { display: inline-block; width: 18px; height: 18px; position: relative; } .cta__arrow::before { content: ""; position: absolute; top: 50%; left: 0; right: 4px; height: 1px; background: currentColor; transform: translateY(-50%); } .cta__arrow::after { content: ""; position: absolute; right: 0; top: 4px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); } .deposit-note { margin-top: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fog); display: flex; align-items: center; gap: 12px; } .deposit-note::before { content: ""; width: 24px; height: 1px; background: var(--fog); } .form__submitted { border: 1px solid var(--white); padding: 36px; display: flex; flex-direction: column; gap: 12px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); } .form__submitted h4 { font-family: var(--font-display); font-weight: 400; font-size: 36px; margin: 0; color: var(--white); } /* ------------------------------------------------------------ FAQ ------------------------------------------------------------ */ .faq__list { border-top: 1px solid var(--rule); position: relative; z-index: 3; } .faq__item { border-bottom: 1px solid var(--rule); position: relative; } /* Ink line wipes down the left edge of the active/hovered row. */ .faq__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--white); transform: scaleY(0); transform-origin: top; transition: transform 520ms var(--ease-out); z-index: 4; } .faq__item.open::before { transition: transform 2400ms cubic-bezier(0.16, 0.7, 0.12, 1); } .faq__item:hover::before, .faq__item.open::before { transform: scaleY(1); } .faq__head { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0; cursor: pointer; width: 100%; text-align: left; color: var(--white); transition: color 240ms var(--ease-out), padding-left 420ms var(--ease-out); } .faq__head:hover, .faq__item.open .faq__head { padding-left: 18px; } .faq__item.open .faq__num { color: var(--white); } .faq__num { transition: color 320ms var(--ease-out); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--fog); width: 40px; flex-shrink: 0; } .faq__q { flex: 1; font-family: var(--font-body); font-weight: 400; font-size: clamp(16px, 1.6vw, 20px); letter-spacing: -0.005em; line-height: 1.3; } .faq__sign { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .faq__sign::before, .faq__sign::after { content: ""; position: absolute; background: currentColor; } .faq__sign::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); } .faq__sign::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); transition: transform 320ms cubic-bezier(.2,.8,.2,1); } .faq__item.open .faq__sign::after { transform: translateX(-50%) scaleY(0); } .faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 400ms cubic-bezier(.2,.8,.2,1); } .faq__item.open .faq__body { grid-template-rows: 1fr; } .faq__body > div { overflow: hidden; } /* Liquid ink fill — a solid panel pours in from the LEFT of each answer box. The whole fill is run through an animated SVG turbulence/displacement filter so its leading edge wobbles and ripples organically like real liquid, with a droplet-led waterline and a soft meniscus highlight. Drains back on close. */ .faq__answer { position: relative; overflow: hidden; } .faq__ink { position: absolute; inset: -8px; z-index: 0; background: var(--steel); transform: translateX(calc(-100% - 56px)); transition: transform 2700ms cubic-bezier(0.16, 0.7, 0.12, 1); pointer-events: none; filter: url(#faqLiquid); will-change: transform; } .faq__item.open .faq__ink { transform: translateX(0); } .faq__ink::before { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 46px; background: var(--steel); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='140' viewBox='0 0 46 140'%3E%3Cpath fill='%23000' d='M0 0 L20 0 C 34 23 8 46 20 70 C 32 94 8 117 20 140 L0 140 Z'/%3E%3Ccircle fill='%23000' cx='34' cy='34' r='4.5'/%3E%3Ccircle fill='%23000' cx='40' cy='82' r='3.2'/%3E%3Ccircle fill='%23000' cx='33' cy='112' r='2.6'/%3E%3Ccircle fill='%23000' cx='42' cy='18' r='2'/%3E%3Ccircle fill='%23000' cx='38' cy='128' r='1.8'/%3E%3C/svg%3E") repeat-y; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='140' viewBox='0 0 46 140'%3E%3Cpath fill='%23000' d='M0 0 L20 0 C 34 23 8 46 20 70 C 32 94 8 117 20 140 L0 140 Z'/%3E%3Ccircle fill='%23000' cx='34' cy='34' r='4.5'/%3E%3Ccircle fill='%23000' cx='40' cy='82' r='3.2'/%3E%3Ccircle fill='%23000' cx='33' cy='112' r='2.6'/%3E%3Ccircle fill='%23000' cx='42' cy='18' r='2'/%3E%3Ccircle fill='%23000' cx='38' cy='128' r='1.8'/%3E%3C/svg%3E") repeat-y; -webkit-mask-size: 46px 140px; mask-size: 46px 140px; } /* Meniscus — a faint lighter band riding just behind the waterline. */ .faq__ink::after { content: ""; position: absolute; top: 0; bottom: 0; right: -2px; width: 10px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.10)); opacity: 0; transition: opacity 400ms var(--ease-out); } .faq__item.open .faq__ink::after { opacity: 1; transition-delay: 1050ms; } .faq__item.open .faq__ink::before { animation: faq-wave 2.6s ease-in-out infinite; } @keyframes faq-wave { 0% { -webkit-mask-position: 0 0; mask-position: 0 0; } 50% { -webkit-mask-position: 0 70px; mask-position: 0 70px; } 100% { -webkit-mask-position: 0 140px; mask-position: 0 140px; } } .faq__body p { position: relative; z-index: 1; margin: 0; padding: 18px 24px 30px 60px; max-width: 92ch; color: var(--fog); font-weight: 400; font-size: 14px; line-height: 1.7; /* Text eases up + fades in once the ink has begun filling. */ opacity: 0; transform: translateY(8px); transition: opacity 620ms var(--ease-out) 980ms, transform 680ms var(--ease-out) 980ms; } .faq__item.open .faq__body p { opacity: 1; transform: none; } body.no-anim .faq__ink { transition: none; } body.no-anim .faq__ink::before { animation: none; } body.no-anim .faq__ink { filter: none; } body.no-anim .faq__body p { transform: none; transition: opacity 200ms; } @media (prefers-reduced-motion: reduce) { .faq__item.open .faq__ink::before { animation: none; } } @media (max-width: 560px) { .faq__body p { padding-left: 40px; padding-right: 0; } .faq__num { width: 28px; } } /* ------------------------------------------------------------ Aftercare timeline ------------------------------------------------------------ */ .aftercare__intro { font-family: var(--font-serif); font-weight: 600; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55; color: var(--fog); max-width: 680px; margin: 0 0 var(--s-8); position: relative; z-index: 3; } .aftercare__list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 3; border-top: 1px solid var(--rule); } .aftercare__step { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding: 36px 0; border-bottom: 1px solid var(--rule); align-items: baseline; position: relative; transition: padding-left 480ms var(--ease-out); } /* Ink line wipes in from the left + the number swells on hover. */ .aftercare__step::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--white); transform: scaleY(0); transform-origin: top; transition: transform 520ms var(--ease-out); } .aftercare__step:hover { padding-left: 20px; } .aftercare__step:hover::before { transform: scaleY(1); } .aftercare__num { transition: transform 480ms var(--ease-out), color 320ms var(--ease-out); display: inline-block; } .aftercare__step:hover .aftercare__num { transform: translateY(-4px) scale(1.06); } .aftercare__step:hover .aftercare__stamp { color: var(--white); } @media (max-width: 720px) { .aftercare__step { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; } .aftercare__step:hover { padding-left: 12px; } } .aftercare__col--stamp { display: flex; align-items: baseline; gap: 20px; } .aftercare__num { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 56px); line-height: 1; color: var(--white); letter-spacing: -0.02em; } .aftercare__stamp { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fog); white-space: nowrap; } .aftercare__title { font-family: var(--font-body); font-weight: 400; font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.005em; line-height: 1.25; color: var(--white); margin: 0 0 12px; } .aftercare__body { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--fog); margin: 0; max-width: 88ch; } .aftercare__download { display: flex; align-items: center; gap: 20px; margin-top: 48px; flex-wrap: wrap; position: relative; z-index: 3; } .aftercare__download-hint { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fog); } /* Print stylesheet — only the aftercare section, formatted for paper */ @media print { @page { margin: 1.5cm; size: A4 portrait; } body.print-aftercare { background: white !important; margin: 0; padding: 0; } /* Hide every sibling — JS also hides them; this is a belt-and-braces backstop */ body.print-aftercare #aftercare ~ *, body.print-aftercare .cursor-dot, body.print-aftercare .cursor-ring { display: none !important; } body.print-aftercare #aftercare { display: block !important; position: static !important; padding: 0 !important; margin: 0 !important; background: white !important; color: black !important; transform: none !important; width: 100% !important; max-width: 100% !important; } /* Reset every animation/transform inside so nothing is clipped or shifted */ body.print-aftercare #aftercare * { transform: none !important; opacity: 1 !important; animation: none !important; transition: none !important; visibility: visible !important; } body.print-aftercare #aftercare .sec__giant, body.print-aftercare #aftercare .aftercare__download, body.print-aftercare #aftercare .aftercare__download-hint { display: none !important; } body.print-aftercare #aftercare .works-head__title, body.print-aftercare #aftercare .aftercare__num { color: black !important; } body.print-aftercare #aftercare .works-head__index, body.print-aftercare #aftercare .aftercare__stamp { color: #444 !important; } body.print-aftercare #aftercare .aftercare__intro, body.print-aftercare #aftercare .aftercare__title, body.print-aftercare #aftercare .aftercare__body { color: black !important; } body.print-aftercare #aftercare .aftercare__step { border-bottom-color: #ccc !important; page-break-inside: avoid; break-inside: avoid; } body.print-aftercare #aftercare .works-head { border-bottom-color: #000 !important; } } /* ------------------------------------------------------------ Footer ------------------------------------------------------------ */ .footer { padding: var(--s-9) 0 var(--s-6); border-top: 1px solid var(--rule); position: relative; z-index: 3; } .footer__mark { font-family: var(--font-display); font-size: clamp(64px, 13vw, 180px); line-height: 1; letter-spacing: -0.01em; color: var(--white); margin: 0; user-select: none; display: inline-block; transition: letter-spacing 700ms var(--ease-out), opacity 1s var(--ease-out), transform 1.1s var(--ease-out); } /* Footer brand row — written mark, divider, simple DK mark centered together. */ .footer__brandrow { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 40px); margin: 0 0 var(--s-7); } .footer__brand-div { flex: 0 0 1px; width: 1px; align-self: stretch; min-height: 1em; background: var(--rule-strong); } .footer__logomark { font-family: var(--font-display); font-size: clamp(40px, 7vw, 96px); line-height: 1; letter-spacing: -0.02em; color: var(--white); user-select: none; white-space: nowrap; } @media (max-width: 600px) { .footer__brandrow { flex-wrap: wrap; gap: 16px; } .footer__brand-div { display: none; } } /* Footer mark rises + opens its tracking as it enters view. */ .reveal:not(.in) .footer__mark { opacity: 0; transform: translateY(0.12em); letter-spacing: -0.06em; } .reveal.in .footer__mark { opacity: 1; transform: none; letter-spacing: -0.01em; } /* Footer links — quiet slide + underline wipe on hover. */ .footer__col a { position: relative; display: inline-block; width: fit-content; background-image: linear-gradient(var(--white), var(--white)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: color 280ms var(--ease-out), transform 360ms var(--ease-out), background-size 360ms var(--ease-out); } .footer__col a:hover { color: var(--white); transform: translateX(4px); background-size: 100% 1px; } .footer__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding-top: var(--s-5); border-top: 1px solid var(--rule); } .footer__cols { display: flex; gap: 56px; flex-wrap: wrap; } .footer__col { display: flex; flex-direction: column; gap: 6px; } .footer__col .stamp { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog); margin-bottom: 6px; } .footer__col a, .footer__col span { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--snow); } /* Footer address — single-line Maps link with the standard underline wipe. */ .footer__addr { display: inline-block; width: fit-content; } .footer__addr:hover { transform: translateX(4px); } .footer__ig { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rule-strong); color: var(--white); --ink-fill: var(--white); position: relative; overflow: hidden; transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); } .footer__ig:hover, .footer__ig:focus-visible, .footer__ig:active { color: var(--ink); border-color: var(--white); } .footer__ig svg { position: relative; z-index: 2; } .footer__copy { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog); } /* Footer base — copyright + secondary legal links. */ .footer__base { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: var(--s-7); padding-top: 24px; border-top: 1px solid var(--rule); } .footer__copyright { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fog); } /* Secondary legal links in the footer base (mirrors pages.css). */ .footer__legal { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; } .footer__legal a { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog); text-decoration: none; transition: color 200ms var(--ease-out); } .footer__legal a:hover { color: var(--white); } /* ============================================================ Editorial Cormorant — bold weight for high-contrast drama. ============================================================ */ .hero__eyebrow, .hero__sub, .sec__desc, .legacy__lead, .aftercare__intro { font-weight: 700; } /* ============================================================ Lordish display → 100 weight site-wide (brand direction). (Lordish is a single-master face; weight applies where the renderer supports it and is harmless otherwise.) ============================================================ */ .topbar__logo-slot, .hero__bg-title span.hero__title-half, .sec__giant span, .works-head__title, .xg__open-title, .book__intro h3, .form__submitted h4, .aftercare__num, .footer__mark, .footer__logomark, .legacy__meta dd, .mobile-menu__nav a { font-weight: 100; } /* ============================================================ Satoshi (body/UI) → lighter treatment. Drop heavy 600/700 chrome weights back to a refined 400, letting size + spacing carry hierarchy instead of weight. ============================================================ */ .topbar__nav a, .topbar__cta, .topbar__menu-btn, .navlink__roll, .sec__eyebrow, .works-head__hint, .field__label, .cta, .footer__col a, .mobile-menu__title { font-weight: 400; } /* --- Section-bar ink blobs: 5 distinct organic shapes (variation) --- */ .m-sectionbar__cur.s0::before,.pg-sectionbar__cur.s0::before{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");} .m-sectionbar__cur.s1::before,.pg-sectionbar__cur.s1::before{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");} .m-sectionbar__cur.s2::before,.pg-sectionbar__cur.s2::before{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");} .m-sectionbar__cur.s3::before,.pg-sectionbar__cur.s3::before{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");} .m-sectionbar__cur.s4::before,.pg-sectionbar__cur.s4::before{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");}