/* ─── Base / reset ─────────────────────────────────────────── stqn.tech / stan.boyet.me shared base styles Requires: tokens.css ──────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── Typography ─────────────────────────────────────────── */ h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; color: var(--text); } h1 em { font-style: normal; color: var(--accent); } h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; color: var(--text); } /* Monospace section label */ .label { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; color: var(--text-subtle); letter-spacing: 0.12em; text-transform: uppercase; } .label--accent { color: var(--accent); } /* ─── Links ──────────────────────────────────────────────── */ a { color: var(--accent); text-decoration: none; } .link-underline { border-bottom: 1px solid transparent; transition: border-color 0.15s; } .link-underline:hover { border-bottom-color: currentColor; } /* ─── Buttons ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: transform 0.15s, background 0.15s, color 0.15s; cursor: pointer; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--text); color: #fff; } .btn-primary:hover { background: var(--accent); } .btn-secondary { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .btn-secondary:hover { color: var(--text); border-color: var(--text-muted); } /* ─── Layout helpers ─────────────────────────────────────── */ .container { max-width: 1000px; margin: 0 auto; padding: 0 2rem; } hr.divider { border: none; border-top: 1px solid var(--border); margin: 0 2rem; } /* ─── Scroll reveal ──────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.45s ease, transform 0.45s ease; } .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn:hover { transform: none; } } /* ─── Fonts (include in instead if performance matters) */ /* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); */