/* Slate — shared theme (Superhuman-inspired) */ :root { /* Mysteria palette — default cream theme */ --mysteria: #1b1938; --mysteria-deep: #14122a; --charcoal: #292827; --warm-cream: #e9e5dd; --warm-cream-hover: #ddd8cd; --parchment: #dcd7d3; --parchment-soft: #efece7; --page: #ffffff; --page-soft: #faf8f4; --lavender: #cbb7fb; --amethyst: #714cb6; --white-95: rgba(255, 255, 255, 0.95); --white-80: rgba(255, 255, 255, 0.80); --white-60: rgba(255, 255, 255, 0.60); --white-20: rgba(255, 255, 255, 0.20); --white-10: rgba(255, 255, 255, 0.10); --radius-sm: 8px; --radius-lg: 16px; --radius-xl: 24px; --container: 1200px; --container-narrow: 960px; /* Type scale (system fonts; Superhuman-inspired weights) */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Menlo", "JetBrains Mono", monospace; } /* Theme variants applied to */ body[data-theme="dark"] { --page: #0f0d1f; --page-soft: #14122a; --charcoal: #f2efe8; --parchment: #2a2746; --parchment-soft: #1b1938; --warm-cream: #e9e5dd; --warm-cream-hover: #ffffff; color-scheme: dark; } body[data-theme="accent"] { /* Lavender-forward cream */ --warm-cream: #cbb7fb; --warm-cream-hover: #b89ff8; --page-soft: #f6f1ff; --parchment: #e4d9fb; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-weight: 450; font-size: 16px; line-height: 1.5; color: var(--charcoal); background: var(--page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Type */ h1, h2, h3, h4 { font-weight: 560; line-height: 0.98; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(40px, 5.5vw, 72px); letter-spacing: -0.028em; } h2 { font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -0.022em; line-height: 0.98; } h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 540; line-height: 1.14; letter-spacing: -0.02em; } h4 { font-size: 20px; font-weight: 540; line-height: 1.2; letter-spacing: -0.01em; } p { margin: 0; } a { color: inherit; text-decoration: none; } /* Layout */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background 120ms ease, color 120ms ease, transform 120ms ease; white-space: nowrap; } .btn-cream { background: var(--warm-cream); color: var(--charcoal); } .btn-cream:hover { background: var(--warm-cream-hover); } .btn-dark { background: var(--charcoal); color: var(--page); } .btn-dark:hover { transform: translateY(-1px); } .btn-ghost-light { background: transparent; color: var(--white-95); border: 1px solid var(--white-20); } .btn-ghost-light:hover { background: var(--white-10); } .btn-ghost-dark { background: transparent; color: var(--charcoal); border: 1px solid var(--parchment); } .btn-ghost-dark:hover { background: var(--parchment-soft); } .btn-lg { padding: 18px 28px; font-size: 17px; } /* Nav */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--parchment); } .nav--on-dark { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 1px solid var(--white-10); color: var(--white-95); backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .nav-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 620; font-size: 24px; letter-spacing: -0.01em; } .nav-brand img { width: 36px; height: 36px; border-radius: 6px; display: block; } .nav-links { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 500; } .nav-links a { opacity: 0.9; transition: opacity 120ms; } .nav-links a:hover { opacity: 1; } .nav-cta-wrap { display: flex; align-items: center; gap: 8px; } .nav-cta { padding: 9px 16px; font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); background: var(--warm-cream); color: var(--charcoal); } .nav-cta:hover { background: var(--warm-cream-hover); } .nav--on-dark .nav-cta { background: var(--warm-cream); color: var(--charcoal); } @media (max-width: 780px) { .nav-links { display: none; } } /* Footer */ .footer { background: var(--page-soft); border-top: 1px solid var(--parchment); padding: 64px 0 40px; color: var(--charcoal); } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; margin-bottom: 48px; } .footer-col h5 { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin: 0 0 16px; } .footer-col a { display: block; padding: 6px 0; font-size: 14px; opacity: 0.85; } .footer-col a:hover { opacity: 1; } .footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 620; font-size: 18px; margin-bottom: 12px; } .footer-brand img { width: 28px; height: 28px; border-radius: 6px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--parchment); font-size: 13px; opacity: 0.65; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 8px; } } /* Sections */ .section { padding: 96px 0; } .section-soft { background: var(--page-soft); } .section-dark { background: var(--mysteria); color: var(--white-95); } @media (max-width: 780px) { .section { padding: 64px 0; } } .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-bottom: 16px; } .eyebrow-accent { color: var(--amethyst); opacity: 1; } .section-intro { max-width: 720px; margin-bottom: 56px; } .section-intro p { margin-top: 16px; font-size: 18px; line-height: 1.5; opacity: 0.75; } /* Utility */ .muted { opacity: 0.65; } .mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; } /* Tweaks panel */ .tweaks { position: fixed; right: 20px; bottom: 20px; z-index: 100; background: var(--charcoal); color: var(--page); border-radius: var(--radius-lg); padding: 16px; width: 260px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); font-size: 13px; display: none; } .tweaks.open { display: block; } .tweaks h6 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; } .tweaks-row { margin-bottom: 14px; } .tweaks-row:last-child { margin-bottom: 0; } .tweaks-row-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; margin-bottom: 6px; } .tweaks-seg { display: flex; background: rgba(255,255,255,0.08); border-radius: 6px; padding: 3px; } .tweaks-seg button { flex: 1; background: transparent; border: none; color: inherit; padding: 7px 8px; font-size: 12px; font-weight: 600; border-radius: 4px; cursor: pointer; font-family: inherit; } .tweaks-seg button.active { background: rgba(255,255,255,0.15); }