/* ============================================================= AXENDELL — BASE Reset, typography, layout primitives, accessibility primitives. ============================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; } body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } ul, ol { list-style: none; } /* ─── Headings ────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -0.01em; color: var(--text-primary); } /* ─── Focus visible ring (a11y) ───────────────────────────── */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; border-radius: var(--rad-xs); } /* ─── Scrollbar (subtle) ──────────────────────────────────── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: var(--rad-pill); } ::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,.30); } /* ─── Selection ───────────────────────────────────────────── */ ::selection { background: rgba(212, 175, 55, .35); color: var(--text-primary); } /* ─── Container ───────────────────────────────────────────── */ .ax-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* ─── Section ─────────────────────────────────────────────── */ .ax-section { padding-block: clamp(48px, 8vw, 96px); } /* ─── Section header ──────────────────────────────────────── */ .ax-section-head { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 720px; margin-bottom: var(--sp-9); } .ax-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-gold); } .ax-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent-gold); opacity: .7; } .ax-section-title { font-size: clamp(28px, 4vw, 44px); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.1; } .ax-section-title .gold { color: var(--accent-gold); } .ax-section-desc { color: var(--text-secondary); font-size: var(--fs-md); max-width: 56ch; } /* ─── Visually hidden (a11y) ──────────────────────────────── */ .ax-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─── Reveal (intersection observer driven) ───────────────── */ .ax-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; } .ax-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .ax-reveal { opacity: 1; transform: none; } }