/* ========================================================= labelled. — coming soon Tokens match studio-site/design-system.md exactly. ========================================================= */ /* Self-hosted fonts — see note in index.html for why. */ @font-face { font-family: 'Fraunces'; src: url('assets/fonts/fraunces-variable.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('assets/fonts/inter-variable.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter Tight'; src: url('assets/fonts/inter-tight-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } :root { --ink: #111315; --paper: #ECE9E2; --paper-2: #B7B3AB; --rule: #2A2E33; --accent-blue: #6F8BEF; --accent-lilac: #A989E1; --accent-peach: #E5B46D; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-wordmark: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --t-display: clamp(2.2rem, 5.4vw, 3.75rem); --t-lede: clamp(1.0625rem, 1.3vw, 1.25rem); --t-meta: 0.8125rem; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur: 400ms; --outer: clamp(24px, 6vw, 96px); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--paper); color: var(--ink); } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img, svg { display: block; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ========================================================= Page — single centred column, no scroll on desktop ========================================================= */ .page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--outer) var(--outer) calc(var(--outer) * 0.6); } /* big centred brand sculpture — the page's main visual. Adapted from studio-site's hero treatment (design-system.md §8a), recentred instead of grid-positioned. */ .sculpture { position: relative; width: clamp(140px, 20vw, 220px); aspect-ratio: 1 / 1; margin-bottom: 12px; pointer-events: none; } .sculpture-mark { display: block; width: 100%; height: 100%; animation: sculpture-float 14s cubic-bezier(0.45, 0, 0.55, 1) infinite; will-change: transform; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35)); } @keyframes sculpture-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .sculpture-echo { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sculpture-trace 18s linear infinite; } .sculpture-echo--2 { animation-duration: 22s; animation-delay: -7s; } @keyframes sculpture-trace { 0% { stroke-dashoffset: 1; } 45% { stroke-dashoffset: 0; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } } /* accent dots — small floating colour markers, the logo's own vocabulary */ .accent-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; opacity: 0.85; filter: blur(0.2px); will-change: transform, opacity; } .accent-dot--blue { background: #6F8BEF; box-shadow: 0 0 24px 2px rgba(111,139,239,0.32); animation: dot-drift 11s ease-in-out infinite; } .accent-dot--lilac { background: #A989E1; box-shadow: 0 0 24px 2px rgba(169,137,225,0.30); animation: dot-drift 13s ease-in-out -3s infinite; } .accent-dot--peach { background: #E5B46D; box-shadow: 0 0 22px 2px rgba(229,180,109,0.28); width: 8px; height: 8px; animation: dot-drift 10s ease-in-out -2s infinite; } .accent-dot--yellow { background: #F0D58C; box-shadow: 0 0 22px 2px rgba(240,213,140,0.24); width: 7px; height: 7px; animation: dot-drift 12s ease-in-out -5s infinite; } .accent-dot--teal { background: #64B7C7; box-shadow: 0 0 22px 2px rgba(100,183,199,0.28); animation: dot-drift 14s ease-in-out -1s infinite; } @keyframes dot-drift { 0%, 100% { transform: translate(0, 0); opacity: 0.85; } 50% { transform: translate(6px, -8px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sculpture-mark, .sculpture-echo, .accent-dot { animation: none !important; } } .wordmark { display: block; font-family: var(--font-wordmark); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--paper-2); margin-bottom: 40px; } .wordmark-dot { color: var(--paper-2); } .display { font-family: var(--font-display); font-size: var(--t-display); font-weight: 500; font-optical-sizing: auto; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 24px; max-width: 19ch; } .display--hero { font-size: clamp(3rem, 9vw, 6.5rem); margin: 0 0 16px; max-width: none; } .sub { font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-2); max-width: 36ch; margin: 0 0 44px; } /* ========================================================= Form — bottom-border input, no fills, no pill buttons ========================================================= */ .notify-form { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 320px; margin: 0 auto; } .notify-form input { width: 100%; text-align: center; background: transparent; border: none; border-bottom: 1px solid var(--rule); color: var(--paper); font-family: var(--font-body); font-size: 1rem; padding: 10px 2px; transition: border-color var(--dur) var(--ease); } .notify-form input::placeholder { color: var(--paper-2); } .notify-form input:focus { outline: none; border-bottom: 2px solid var(--accent-blue); padding-bottom: 9px; } .notify-form button { width: 100%; background: var(--paper); color: var(--ink); font-weight: 600; font-size: 0.9375rem; padding: 12px 22px; border-radius: 6px; transition: opacity var(--dur) var(--ease); } .notify-form button:hover { opacity: 0.85; } .notify-form button:active { transform: translateY(1px); } .notify-form button:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; } /* Honeypot — off-canvas, not display:none (some bots skip display:none fields) */ .hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -9999px; } .consent-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; max-width: 380px; margin-top: 18px; text-align: left; cursor: pointer; } .consent-row input[type="checkbox"] { margin-top: 3px; width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--accent-blue); } .consent-row span { font-size: 0.8125rem; line-height: 1.5; color: var(--paper-2); } .consent-row a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; } .consent-row a:hover { text-decoration-color: var(--paper); } .form-status { min-height: 1.2em; font-size: 0.875rem; color: var(--accent-blue); margin: 14px 0 0; max-width: 380px; } .form-status.error { color: var(--accent-peach); } /* ========================================================= Footer ========================================================= */ .page-footer { margin-top: 72px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; padding-top: 24px; border-top: 1px solid var(--rule); width: 100%; max-width: 380px; } .footer-meta { font-size: var(--t-meta); color: var(--paper-2); white-space: nowrap; } .footer-rule { display: none; } .footer-links { display: flex; gap: 16px; } .footer-links a { font-size: var(--t-meta); color: var(--paper-2); position: relative; transition: color var(--dur) var(--ease); } .footer-links a:hover { color: var(--paper); } .footer-links a::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: var(--paper); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease); } .footer-links a:hover::after { transform: scaleX(1); } /* ========================================================= Privacy policy — simple left-aligned prose ========================================================= */ .prose-page { max-width: 640px; margin: 0 auto; padding: var(--outer) var(--outer) calc(var(--outer) * 1.4); } .prose-back, .prose-footer-link a { font-size: var(--t-meta); color: var(--paper-2); transition: color var(--dur) var(--ease); } .prose-back { display: inline-block; margin-bottom: 32px; } .prose-back:hover, .prose-footer-link a:hover { color: var(--paper); } .prose-h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; } .prose-meta { font-size: var(--t-meta); color: var(--paper-2); margin: 0 0 36px; } .prose-h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; margin: 36px 0 12px; padding-top: 20px; border-top: 1px solid var(--rule); } .prose-p { font-size: 1rem; line-height: 1.65; color: var(--paper-2); margin: 0 0 4px; } .prose-p strong { color: var(--paper); font-weight: 600; } .prose-p a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; } .prose-p a:hover { text-decoration-color: var(--paper); } .prose-footer-link { margin-top: 48px; }