/* sazo.com — production styles */ :root { --bg: #F5EDE8; --surface: #FDF8F5; --ink: #33181C; --ink-muted: #7A5F5C; --accent: #8A2F3B; --accent-2: #C89A93; --border: #E2D3CC; --font-display: "Manrope", system-ui, -apple-system, sans-serif; --font-body: "DM Sans", system-ui, -apple-system, sans-serif; --tracking-display: -0.03em; --tracking-hero: -0.035em; --tracking-caps: 0.14em; --text-hero: clamp(56px, 8.5vw, 104px); --text-micro: 12px; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); } .page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; position: relative; overflow: hidden; } .atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .atmosphere canvas { position: absolute; inset: 0; filter: blur(5px); } .site-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: clamp(20px, 3.4vw, 34px) clamp(20px, 3.3vw, 48px); position: relative; z-index: 1; } .site-logo { font: 800 clamp(30px, 2.6vw, 46px)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--ink); text-decoration: none; } .dot { color: var(--accent); } .dot-anim { animation: sazoDot 7s ease-in-out infinite; } .contact-link { font: 500 15px/1 var(--font-body); color: var(--ink); opacity: 0.75; cursor: pointer; transition: opacity 150ms ease, color 150ms ease; } .contact-link:hover { opacity: 1; color: var(--accent); } .site-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 64px) clamp(20px, 3.3vw, 48px); max-width: 1120px; box-sizing: border-box; width: 100%; margin: 0 auto; position: relative; z-index: 1; } .hero { margin: 0; font: 800 var(--text-hero)/1.04 var(--font-display); letter-spacing: var(--tracking-hero); } .contact-block { margin-top: clamp(56px, 9vw, 96px); } .kicker { font: 700 var(--text-micro)/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; } .email-link { font: 700 21px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--accent); cursor: pointer; border-bottom: 2px solid transparent; transition: border-color 150ms ease; } .email-link:hover { border-bottom-color: var(--accent); } .back-link { font: 700 17px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--accent); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 150ms ease; } .back-link:hover { border-bottom-color: var(--accent); } .lead { font: 400 19px/1.6 var(--font-body); color: var(--ink-muted); margin: 28px 0 0; max-width: 40ch; } .site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: clamp(20px, 2.2vw, 28px) clamp(20px, 3.3vw, 48px); border-top: 1px solid var(--border); position: relative; z-index: 1; font: 400 13px/1.4 var(--font-body); color: var(--ink-muted); } /* Intro overlay — inert until JS adds .intro-active to */ #intro { display: none; } .intro-active #intro { display: block; position: fixed; inset: 0; z-index: 50; } .intro-active .site-logo { visibility: hidden; } #intro .intro-bg { position: absolute; inset: 0; background: var(--bg); } #intro .intro-logo { position: absolute; top: 0; left: 0; font: 800 46px/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--ink); transform-origin: top left; white-space: nowrap; opacity: 0; transition: opacity 400ms ease; } @keyframes sazoDot { 0%, 100% { color: var(--accent); } 50% { color: var(--accent-2); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }