/* DAPER — custom styles layered on top of Tailwind CDN */ :root { --ink: #0a0a0a; --paper: #f7f6f2; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } html { -webkit-text-size-adjust: 100%; overflow-x: clip; /* clip only — never make the scroll container */ } /* Native smooth scrolling only when Lenis is NOT driving the scroll — the two fight each other (Lenis calls scrollTo every frame). */ html.no-gsap { scroll-behavior: smooth; } html.lenis { scroll-behavior: auto !important; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { font-feature-settings: 'ss01', 'cv01'; word-break: keep-all; overflow-wrap: anywhere; } /* ─────────── Loader ─────────── */ #loader { transition: opacity 0.6s var(--ease-out), visibility 0.6s; } #loader.is-done { opacity: 0; visibility: hidden; } .loader-dots span { animation: loader-bounce 1s var(--ease-out) infinite; } .loader-dots span:nth-child(2) { animation-delay: 0.12s; } .loader-dots span:nth-child(3) { animation-delay: 0.24s; } @keyframes loader-bounce { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.35; } 40% { transform: translateY(-10px) scale(1.15); opacity: 1; } } /* ─────────── Custom cursor (fine pointers only) ─────────── */ .cursor { display: none; } @media (pointer: fine) { .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 200; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 999px; background: var(--ink); pointer-events: none; mix-blend-mode: difference; transform: translate3d(-100px, -100px, 0) scale(1); transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), margin 0.3s var(--ease-out), opacity 0.3s; opacity: 0; } .cursor.is-visible { opacity: 1; } .cursor.is-hover { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: #fff; } .cursor.is-down { transform-origin: center; } } /* Skip link */ .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: 0.5rem 0.9rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; } .skip-link:focus { top: 1rem; } /* ─────────── Header ─────────── */ #site-header { background: rgba(255, 255, 255, 0); border-bottom: 1px solid transparent; transform: translateY(0); transition: background 0.4s, border-color 0.4s, transform 0.5s var(--ease-out), backdrop-filter 0.4s; } #site-header.is-scrolled { background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom-color: #ececec; } #site-header.is-hidden { transform: translateY(-100%); } #site-header.on-dark:not(.is-scrolled) { color: #fff; } #site-header.on-dark:not(.is-scrolled) .nav-link { color: #a3a3a3; } #site-header.on-dark:not(.is-scrolled) .nav-link:hover, #site-header.on-dark:not(.is-scrolled) .nav-link.is-active { color: #fff; } #site-header.on-dark:not(.is-scrolled) .lang-switch { color: #fff; border-color: #404040; } #site-header.on-dark:not(.is-scrolled) img { filter: invert(1); } .nav-link { position: relative; padding-bottom: 2px; transition: color 0.2s ease; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out); } .nav-link:hover, .nav-link.is-active { color: var(--ink); } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; } /* ─────────── Backgrounds ─────────── */ .dot-grid { background-image: radial-gradient(circle at 1px 1px, rgba(10, 10, 10, 0.14) 1px, transparent 0); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%); } .dot-grid-dark { background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.09) 1px, transparent 0); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 65%); mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 65%); } /* ─────────── Hero ─────────── */ #hero-canvas { opacity: 0; transition: opacity 1.2s ease 0.3s; } #hero-canvas.is-ready { opacity: 1; } .word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; } .word { display: inline-block; transform: translateY(110%); will-change: transform; } .hero-eyebrow, .hero-desc, .hero-cta, .hero-scroll, .hero-mark { opacity: 0; } .hero-dot { display: inline-block; vertical-align: 0.1em; margin-left: 0.14em; width: 0.2em; height: 0.2em; border-radius: 999px; background: var(--ink); transform: scale(0); } .scroll-line > span { animation: scroll-line 1.8s var(--ease-out) infinite; } @keyframes scroll-line { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* Hero outline mark — drawn on by stroke */ .hero-mark { opacity: 1; } .hero-mark-path { stroke-dasharray: 1400; stroke-dashoffset: 1400; opacity: 0.18; } .hero-mark-dots circle { opacity: 0; } html.no-gsap .hero-mark-path { stroke-dashoffset: 0; } html.no-gsap .hero-mark-dots circle { opacity: 0.18; } /* Giant section index numbers */ .section-index { position: absolute; right: -0.04em; top: -0.12em; z-index: 0; font-size: clamp(9rem, 22vw, 20rem); font-weight: 800; line-height: 1; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px rgba(10, 10, 10, 0.12); pointer-events: none; user-select: none; } .section-index--light { -webkit-text-stroke-color: rgba(255, 255, 255, 0.14); } /* Manifesto — words light up as you scroll */ .m-word { transition: color 0.4s ease; } .m-word.is-lit { color: #fff; } html.no-gsap .m-word { color: #fff; } /* ─────────── Buttons ─────────── */ .btn-magnetic { position: relative; overflow: hidden; transition: transform 0.4s var(--ease-out), background 0.3s; will-change: transform; } .btn-magnetic::before { content: ''; position: absolute; inset: 0; background: #262626; transform: translateY(101%); transition: transform 0.45s var(--ease-out); } .btn-magnetic:hover::before { transform: translateY(0); } .btn-magnetic > * { position: relative; } .btn-ghost { transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease-out); } .btn-ghost:hover { border-color: var(--ink); background: #fff; } /* ─────────── Marquee ─────────── */ .marquee-track { animation: marquee 32s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─────────── Story (scroll pinned) ─────────── */ .story-step { opacity: 0; transform: translateY(24px); } .story-step[data-step='0'] { opacity: 1; transform: none; } .story-paper { opacity: 0; } .story-grid { opacity: 0; } .story-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; } .story-dots circle { opacity: 0; } .story-word { opacity: 0; } /* ─────────── Reveal (GSAP driven, CSS fallback) ─────────── */ [data-reveal], [data-split] { opacity: 0; } html.no-gsap [data-reveal], html.no-gsap [data-split], html.no-gsap .hero-eyebrow, html.no-gsap .hero-desc, html.no-gsap .hero-cta, html.no-gsap .hero-scroll, html.no-gsap .hero-mark, html.no-gsap .story-step, html.no-gsap .story-paper, html.no-gsap .story-grid, html.no-gsap .story-dots circle, html.no-gsap .story-word { opacity: 1 !important; transform: none !important; } html.no-gsap .word { transform: none; } html.no-gsap .hero-dot { transform: scale(1); } html.no-gsap .story-line { stroke-dashoffset: 0; } html.no-gsap .story-step { position: relative; margin-bottom: 2rem; } html.no-gsap .story-pin { min-height: 0; } html.no-gsap .hero-mark { opacity: 0.035 !important; } /* ─────────── Service cards ─────────── */ .service-card { transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.4s; transform-style: preserve-3d; } .service-card:hover { border-color: var(--ink); box-shadow: 0 30px 60px -30px rgba(10, 10, 10, 0.25); } .card-glow { background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(10, 10, 10, 0.05), transparent 45%); } /* ─────────── Process ─────────── */ .process-node { transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.4s var(--ease-out); } .process-step.is-lit .process-node { background: #fff; color: var(--ink); border-color: #fff; transform: scale(1.1); } /* ─────────── Contact ─────────── */ .contact-ring { animation: ring 8s ease-in-out infinite; } @keyframes ring { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.06); opacity: 0.5; } } /* Legal body */ .legal-body h2 + p { margin-top: 0.5rem; } /* ─────────── Reduced motion ─────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } html { scroll-behavior: auto; } .cursor { display: none !important; } } /* ─────────── Print ─────────── */ @media print { #site-header, #site-footer, .skip-link, #loader, .cursor, #scroll-progress, #hero-canvas, .marquee { display: none !important; } [data-reveal], [data-split], .hero-eyebrow, .hero-desc, .hero-cta, .story-step { opacity: 1 !important; transform: none !important; } .word { transform: none !important; } }