/* gms — Shared Styles */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { --ink: #0A0A0B; --ink-2: #121214; --ink-3: #1C1C1F; --line: #26262A; --bone: #F2EFEA; --bone-dim: #AFAEAA; --bone-muted: #6F6E6B; --accent: #0059FF; --accent-ink: #F2EFEA; --display: 'Space Grotesk', sans-serif; --sans: 'Inter', sans-serif; --mono: 'JetBrains Mono', monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } [data-theme="light"] { --ink: #F2EFEA; --ink-2: #EAE7E1; --ink-3: #DEDBD5; --line: #C9C6C0; --bone: #0A0A0B; --bone-dim: #4B4B4D; --bone-muted: #7A7976; --accent: #0049D6; --accent-ink: #F2EFEA; } /* Accent palette — switchable via data-accent on */ [data-accent="blue"] { --accent: #0059FF; } [data-accent="green"] { --accent: oklch(0.80 0.18 148); } [data-accent="red"] { --accent: oklch(0.72 0.22 25); } [data-accent="purple"] { --accent: oklch(0.72 0.22 305); } [data-accent="pink"] { --accent: oklch(0.76 0.22 355); } [data-theme="light"][data-accent="blue"] { --accent: #0049D6; } [data-theme="light"][data-accent="green"] { --accent: oklch(0.48 0.20 148); } [data-theme="light"][data-accent="red"] { --accent: oklch(0.55 0.22 25); } [data-theme="light"][data-accent="purple"] { --accent: oklch(0.50 0.22 305); } [data-theme="light"][data-accent="pink"] { --accent: oklch(0.58 0.22 355); } html { transition: background 0.4s var(--ease), color 0.4s var(--ease); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--ink); color: var(--bone); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body { cursor: none; transition: background 0.4s var(--ease), color 0.4s var(--ease); } @media (pointer: coarse) { body { cursor: auto; } } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: none; } img, video { max-width: 100%; display: block; } ::selection { background: var(--accent); color: var(--accent-ink); } /* Layout */ .container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 32px; } @media (max-width: 768px) { .container { padding: 0 20px; } } .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } /* Typography */ .display { font-family: var(--display); font-weight: 500; letter-spacing: -0.03em; line-height: 0.92; } .huge { font-size: clamp(56px, 11vw, 200px); } .big { font-size: clamp(40px, 7vw, 112px); } .med { font-size: clamp(32px, 4.5vw, 72px); } .mono-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); } .mono-xs { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } /* Custom Cursor */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 100001; /* above loader (100000) and cookie banner (90000) so the cursor is never covered */ mix-blend-mode: difference; will-change: transform; } .cursor-dot { width: 6px; height: 6px; background: var(--bone); border-radius: 50%; transform: translate(-50%, -50%); } .cursor-ring { width: 36px; height: 36px; border: 1px solid var(--bone); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.25s var(--ease), height 0.25s var(--ease), background 0.2s var(--ease); } .cursor-ring.hover { width: 64px; height: 64px; background: var(--bone); mix-blend-mode: difference; } .cursor-ring.hover-accent { width: 64px; height: 64px; background: var(--accent); border-color: var(--accent); mix-blend-mode: normal; } @media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } } /* Light-mode cursor: difference-blend washes out on light bg, so make it solid + bigger + shadowed */ [data-theme="light"] .cursor-dot, [data-theme="light"] .cursor-ring { mix-blend-mode: normal; } [data-theme="light"] .cursor-dot { width: 8px; height: 8px; background: var(--bone); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 70%, transparent), 0 2px 8px rgba(0,0,0,0.25); } [data-theme="light"] .cursor-ring { border-width: 1.5px; border-color: var(--bone); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 60%, transparent), 0 4px 14px rgba(0,0,0,0.18); } [data-theme="light"] .cursor-ring.hover { background: color-mix(in srgb, var(--bone) 88%, transparent); border-color: var(--bone); } [data-theme="light"] .cursor-ring.hover-accent { background: var(--accent); border-color: var(--accent); } /* Header */ .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 0; transition: transform 0.4s var(--ease), background 0.3s var(--ease), backdrop-filter 0.3s; } .hdr.scrolled { background: color-mix(in srgb, var(--ink) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .hdr.hidden { transform: translateY(-120%); } .hdr-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: inline-flex; align-items: center; position: relative; height: 38px; padding: 0 4px; isolation: isolate; transition: transform 0.3s var(--ease), filter 0.3s var(--ease); } /* Header logo: inline SVG wordmark filled with the live accent var → recolours instantly on accent change, auto-correct in light/dark (var(--accent) flips). Inline SVG renders reliably everywhere (CSS mask was unreliable). */ .logo-mark { display: block; height: 44px; width: auto; fill: var(--accent); transition: fill 0.3s var(--ease), filter 0.3s var(--ease); } @media (max-width: 600px) { .logo-mark { height: 36px; } } .logo:hover { transform: translateY(-1px); } .logo:hover .logo-mark { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 60%, transparent)); } .nav { display: flex; align-items: center; gap: 2px; } .nav > a { padding: 10px 16px; font-size: 14px; font-weight: 500; border-radius: 999px; position: relative; transition: color 0.2s; } .nav > a::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--ink-3); transform: scale(0.6); opacity: 0; transition: all 0.3s var(--ease); z-index: -1; } .nav > a:hover::before { transform: scale(1); opacity: 1; } .nav > a.active { color: var(--accent); } .nav > a.active::before { background: var(--ink-3); transform: scale(1); opacity: 1; } .hdr-cta { display: flex; align-items: center; gap: 12px; } .theme-toggle { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: border-color 0.2s, background 0.2s; } .theme-toggle:hover { border-color: var(--bone); background: var(--ink-3); } /* Accent color picker */ .color-picker { position: relative; } .color-toggle { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: border-color 0.2s, background 0.2s, transform 0.3s var(--ease); } .color-toggle:hover { border-color: var(--bone); background: var(--ink-3); transform: rotate(45deg); } .color-toggle .color-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); } .color-menu { position: absolute; top: calc(100% + 12px); right: 0; background: color-mix(in srgb, var(--ink-2) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 999px; padding: 8px; display: flex; gap: 6px; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(0.92); transform-origin: top right; transition: opacity 0.22s var(--ease), transform 0.28s var(--ease); z-index: 110; box-shadow: 0 18px 38px rgba(0,0,0,0.35); } .color-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .color-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; position: relative; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .color-swatch::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 transparent; transition: box-shadow 0.25s var(--ease); } .color-swatch:hover { transform: scale(1.1); } .color-swatch:hover::after { box-shadow: 0 0 12px currentColor; } .color-swatch.active { border-color: var(--bone); } .color-swatch[data-accent="blue"] { color: #0059FF; } .color-swatch[data-accent="green"] { color: oklch(0.80 0.18 148); } .color-swatch[data-accent="red"] { color: oklch(0.72 0.22 25); } .color-swatch[data-accent="purple"] { color: oklch(0.72 0.22 305); } .color-swatch[data-accent="pink"] { color: oklch(0.76 0.22 355); } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-weight: 500; font-size: 15px; border: 1px solid transparent; position: relative; overflow: hidden; transition: color 0.3s var(--ease); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--bone); border-radius: 999px; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); } .btn-primary:hover::before { transform: scaleX(1); transform-origin: left; } .btn-primary > * { position: relative; z-index: 1; } /* On hover the bone fill slides in; flip label + arrow to accent so the text stays readable (was bone-on-bone = invisible). */ .btn-primary:hover { color: var(--accent); } .btn-primary:hover .btn-arrow { background: var(--accent); } .btn-primary:hover .btn-arrow svg path { stroke: var(--bone); } .btn-ghost { border-color: var(--line); color: var(--bone); } .btn-ghost:hover { border-color: var(--bone); } .btn-arrow { width: 22px; height: 22px; border-radius: 50%; background: currentColor; display: grid; place-items: center; opacity: 0.2; transition: opacity 0.3s; } .btn:hover .btn-arrow { opacity: 1; } .btn-arrow svg { width: 11px; height: 11px; } .btn-arrow svg path { stroke: var(--accent); } .btn-primary .btn-arrow { background: var(--ink); } .btn-primary .btn-arrow svg path { stroke: var(--accent); } /* Hamburger (mobile) */ .burger { display: none; } .nav-foot { display: none; } /* Custom cursor is pointless on phones / narrow viewports — hide it so no stray dot ever shows (covers emulators where pointer:fine still matches). */ @media (max-width: 900px) { .cursor-dot, .cursor-ring { display: none !important; } body { cursor: auto; } } @media (max-width: 900px) { .hdr-cta .btn-primary { display: none; } .hdr-cta { gap: 8px; } .burger { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; color: var(--bone); background: var(--ink-2); transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); } .burger:active { transform: scale(0.94); } /* Full-screen mobile nav overlay */ .nav { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: flex-start; gap: 0; padding: max(104px, calc(env(safe-area-inset-top, 0px) + 96px)) 24px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--ink); min-height: 100vh; min-height: 100dvh; transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform .42s var(--ease), opacity .3s var(--ease), visibility 0s .42s; overflow-y: auto; } html.nav-open .nav { transform: none; opacity: 1; visibility: visible; transition: transform .42s var(--ease), opacity .3s var(--ease); } html.nav-open { overflow: hidden; } /* Menu items: full-width rows with a trailing arrow + divider (clean list) */ .nav > a { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--display); font-weight: 500; font-size: clamp(30px, 8.5vw, 46px); letter-spacing: -.02em; padding: 22px 2px; width: 100%; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--bone); transform: translateY(12px); opacity: 0; transition: color .2s var(--ease), transform .5s var(--ease), opacity .5s var(--ease); } html.nav-open .nav > a { transform: none; opacity: 1; } html.nav-open .nav > a:nth-child(1) { transition-delay: .10s; } html.nav-open .nav > a:nth-child(2) { transition-delay: .16s; } html.nav-open .nav > a:nth-child(3) { transition-delay: .22s; } html.nav-open .nav > a:nth-child(4) { transition-delay: .28s; } .nav > a::before { display: none; } .nav > a::after { content: '\2192'; font-family: var(--sans); font-size: 22px; font-weight: 400; color: var(--bone-dim); transition: transform .25s var(--ease), color .2s; } .nav > a:hover::after, .nav > a:active::after { transform: translateX(4px); color: var(--bone); } .nav > a.active { color: var(--accent); } .nav > a.active::after { color: var(--accent); } /* Footer block (phone + CTA) injected by shared.js */ .nav-foot { margin-top: auto; padding-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; transform: translateY(12px); opacity: 0; transition: transform .5s var(--ease) .34s, opacity .5s var(--ease) .34s; } html.nav-open .nav-foot { transform: none; opacity: 1; } .nav-foot .btn { flex: 1 1 0; justify-content: center; min-width: 0; padding: 12px 16px; font-size: 14px; white-space: nowrap; } html.nav-open .logo { position: relative; z-index: 110; } /* Keep the theme toggle + close button visible; hide the accent picker while open */ html.nav-open .color-picker { display: none; } html.nav-open .burger { border-color: var(--accent); color: var(--accent); position: relative; z-index: 110; } html.nav-open .burger svg { display: none; } html.nav-open .burger::after { content: '\2715'; font-size: 16px; line-height: 1; } } @media (max-width: 600px) { .hdr { padding: 14px 0; } .hdr.scrolled { padding: 12px 0; } .theme-toggle, .color-toggle, .burger { width: 38px; height: 38px; } } /* Ticker / Marquee */ .ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; overflow: hidden; white-space: nowrap; } .ticker-track { display: inline-flex; gap: 48px; animation: ticker 40s linear infinite; font-family: var(--display); font-size: clamp(24px, 4vw, 42px); font-weight: 500; letter-spacing: -0.02em; } .ticker-track span { display: inline-flex; align-items: center; gap: 48px; } .ticker-track .dot { color: var(--accent); } @keyframes ticker { to { transform: translateX(-50%); } } /* Sections shared */ section { position: relative; } .sec-pad { padding: 120px 0; } @media (max-width: 768px) { .sec-pad { padding: 80px 0; } } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 60px; flex-wrap: wrap; } .sec-head h2 { max-width: 900px; } /* Footer */ .ftr { background: var(--ink-2); padding: 80px 0 32px; border-top: 1px solid var(--line); } .ftr-hero { padding: 60px 0 80px; border-bottom: 1px solid var(--line); margin-bottom: 60px; } .ftr-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; } @media (max-width: 900px) { .ftr-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .ftr-cols { grid-template-columns: 1fr; } } .ftr-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 20px; font-weight: 500; } .ftr-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .ftr-col a { font-size: 16px; transition: color 0.2s; display: inline-flex; align-items: center; gap: 8px; } .ftr-col a:hover { color: var(--accent); } .ftr-col .big-contact { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; } .ftr-base { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 32px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-dim); flex-wrap: wrap; } .ftr-base a:hover { color: var(--bone); } .ftr-links { display: flex; gap: 24px; flex-wrap: wrap; } /* Reveal */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal.in { opacity: 1; transform: none; } .split-reveal .line { display: block; overflow: hidden; } .split-reveal .line > span { display: inline-block; transform: translateY(110%); transition: transform 0.9s var(--ease); } .split-reveal.in .line > span { transform: none; } /* Utility */ .accent { color: var(--accent); } .muted { color: var(--bone-dim); } .italic-serif { font-family: Georgia, serif; font-style: italic; } /* Tweaks panel */ .tweaks-panel { position: fixed; bottom: 24px; right: 24px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 20px; min-width: 280px; z-index: 200; transform: translateY(calc(100% + 40px)); opacity: 0; transition: all 0.4s var(--ease); box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .tweaks-panel.open { transform: none; opacity: 1; } .tweaks-panel h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 14px; font-weight: 500; } .tweak-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .tweak-row:last-child { margin-bottom: 0; } .tweak-chip { padding: 8px 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); transition: all 0.2s; } .tweak-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* ===== Cookie consent banner ===== */ .cc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90000; display: flex; justify-content: center; padding: 18px; opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); } .cc.show { opacity: 1; transform: none; pointer-events: auto; } .cc-card { width: min(720px, 100%); background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; box-shadow: 0 30px 80px -24px rgba(0,0,0,.65); } .cc-view { display: grid; gap: 18px; } .cc-view[hidden] { display: none; } .cc-title { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: -.01em; } .cc-head .cc-title { margin-bottom: 8px; } .cc p { color: var(--bone-dim); font-size: 14px; line-height: 1.65; } .cc a { color: var(--accent); } .cc a:hover { text-decoration: underline; } .cc-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .cc-btn { padding: 11px 18px; border-radius: 999px; cursor: none; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--line); color: var(--bone); background: transparent; transition: border-color .2s, background .2s, color .2s, filter .2s; } .cc-ghost:hover { border-color: var(--bone); } .cc-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .cc-primary:hover { filter: brightness(1.08); } .cc-opt { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); } .cc-opt:first-of-type { border-top: none; padding-top: 0; } .cc-opt-h { font-weight: 500; font-size: 15px; } .cc-opt-d { color: var(--bone-dim); font-size: 13px; margin-top: 3px; max-width: 52ch; line-height: 1.5; } .cc-sw { position: relative; width: 46px; height: 26px; flex-shrink: 0; } .cc-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: none; } .cc-sw span { position: absolute; inset: 0; background: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; transition: background .2s, border-color .2s; } .cc-sw span::after { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--bone-dim); transition: left .2s, background .2s; } .cc-sw input:checked + span { background: color-mix(in srgb, var(--accent) 28%, var(--ink-3)); border-color: var(--accent); } .cc-sw input:checked + span::after { left: 25px; background: var(--accent); } .cc-sw--locked { opacity: .55; } @media (max-width: 600px) { .cc { padding: 12px; } .cc-card { padding: 20px; } .cc-actions { justify-content: stretch; } .cc-btn { flex: 1 1 auto; text-align: center; } }