/* Auto-generated from @axiom-foundation/ui/tokens.css. * Do not edit by hand — `bun update @axiom-foundation/ui` then rebuild. */ /* ═══════════════════════════════════════════ Axiom Foundation shared design tokens Import via: @import "@axiom-foundation/ui/tokens.css" ═══════════════════════════════════════════ */ :root { /* Color palette — statute paper & legal ink */ --color-paper: #faf9f6; --color-paper-elevated: #ffffff; --color-ink: #1c1917; --color-ink-secondary: #57534e; --color-ink-muted: #78716c; /* Borders. `--color-rule` is decorative (1.19:1, intentionally hairline). `--color-rule-strong` is for interactive boundaries — form input borders, dividers between actionable regions — and clears WCAG SC 1.4.11 (3:1 non-text) at 4.56:1 on paper. Use it on inputs. */ --color-rule: #e7e5e4; --color-rule-subtle: #f5f5f4; --color-rule-strong: #78716c; /* Brand accent — primary actions, links, focus indicators */ --color-accent: #92400e; --color-accent-hover: #7c2d12; --color-accent-light: rgba(146, 64, 14, 0.06); /* Focus ring. Apply to every interactive element's :focus-visible outline. 6.73:1 on paper / 7.09:1 on paperElevated — comfortable SC 1.4.11 margin. */ --color-focus-ring: #92400e; /* Code surfaces */ --color-code-bg: #1c1917; --color-code-text: #e7e5e4; --color-code-comment: #a8a29e; --color-code-keyword: #fbbf24; --color-code-string: #fdba74; --color-code-number: #7dd3fc; --color-code-function: #86efac; --color-code-variable: #bfdbfe; --color-code-operator: #d6d3d1; --color-code-punctuation: #a8a29e; --color-code-tag: #fbbf24; --color-code-attribute: #7dd3fc; /* Status colors. All AA on paper as text. Warning bumped from #b45309 (4.77:1) to #92400e (6.73:1) for AA margin on small text/low-DPI. */ --color-success: #166534; --color-warning: #92400e; --color-error: #991b1b; /* Animation curves */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* Typography — next/font sets --font-geist-sans, --font-mono on */ :root { --f-display: var(--font-geist-sans), -apple-system, sans-serif; --f-body: var(--font-geist-sans), -apple-system, sans-serif; --f-mono: var(--font-mono), "Fira Code", monospace; --f-serif: var(--font-serif), "Georgia", "Times New Roman", serif; } /* ── Base resets ── */ html { background: var(--color-paper); color: var(--color-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { font-family: var(--f-body); font-feature-settings: "kern", "liga", "calt", "ss01"; line-height: 1.6; min-height: 100vh; overflow-x: hidden; position: relative; } /* Subtle paper grain — fixed, behind content. Gives the cream stock its texture without ever moving on scroll. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } /* Hairline vintage rules that frame the content column — only visible on wide screens so they read as marginalia rather than chrome. */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(to right, transparent calc(50% - 720px), var(--color-rule-subtle) calc(50% - 720px), var(--color-rule-subtle) calc(50% - 719px), transparent calc(50% - 719px)), linear-gradient(to right, transparent calc(50% + 719px), var(--color-rule-subtle) calc(50% + 719px), var(--color-rule-subtle) calc(50% + 720px), transparent calc(50% + 720px)); } @media (max-width: 1500px) { body::after { display: none; } } ::selection { background: rgba(146, 64, 14, 0.15); color: var(--color-ink); } h1, h2, h3, h4, h5, h6 { font-family: var(--f-body); font-weight: 700; line-height: 1.15; letter-spacing: -0.04em; color: var(--color-ink); } a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 0.08em; transition: color 150ms; } a:hover { color: var(--color-accent-hover); } code, pre { font-family: var(--f-mono); font-size: 0.875em; } pre { background: var(--color-code-bg); border: 1px solid #2a2826; border-radius: 4px; padding: 1.25rem; overflow-x: auto; color: var(--color-code-text); } /* Prism syntax theme. CodeBlock adds ``code-syntax`` and language classes everywhere, so all product code surfaces share one predictable palette. */ .code-syntax { color: var(--color-code-text); text-shadow: none; tab-size: 2; } .code-syntax .token.comment, .code-syntax .token.prolog, .code-syntax .token.doctype, .code-syntax .token.cdata { color: var(--color-code-comment); font-style: italic; } .code-syntax .token.punctuation { color: var(--color-code-punctuation); } .code-syntax .token.property, .code-syntax .token.tag, .code-syntax .token.constant, .code-syntax .token.symbol, .code-syntax .token.deleted { color: var(--color-code-tag); } .code-syntax .token.boolean, .code-syntax .token.number { color: var(--color-code-number); } .code-syntax .token.selector, .code-syntax .token.string, .code-syntax .token.char, .code-syntax .token.inserted { color: var(--color-code-string); } .code-syntax .token.attr-name { color: var(--color-code-attribute); } .code-syntax .token.operator, .code-syntax .token.entity, .code-syntax .token.url { color: var(--color-code-operator); } .code-syntax .token.atrule, .code-syntax .token.attr-value, .code-syntax .token.keyword { color: var(--color-code-keyword); font-weight: 500; } .code-syntax .token.function, .code-syntax .token.builtin, .code-syntax .token.class-name { color: var(--color-code-function); } .code-syntax .token.regex, .code-syntax .token.important, .code-syntax .token.variable { color: var(--color-code-variable); } .code-syntax .token.important, .code-syntax .token.bold { font-weight: 700; } .code-syntax .token.italic { font-style: italic; } /* ── Keyframes ── */ @keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes terminal-reveal { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: fade-up 0.8s var(--ease-out) both; } .animate-fade-in { animation: fade-in 0.6s var(--ease-out) both; } /* ── Typography utilities ── */ .font-heading { font-family: var(--f-body); font-weight: 700; letter-spacing: -0.04em; } .font-body { font-family: var(--f-body); } .font-display { font-family: var(--f-display); } .font-mono { font-family: var(--f-mono); } /* Section eyebrow label */ .eyebrow { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent); } /* Editorial kicker — section ordinal, e.g. "§ 01 · ARCHIVE" */ .kicker { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink-muted); } .kicker::before, .kicker::after { content: ""; width: 1.75rem; height: 1px; background: var(--color-rule); } .kicker .kicker-mark { font-family: var(--f-serif); font-style: italic; font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--color-accent); } /* Serif italic accent — for in-flow editorial emphasis */ .serif-italic { font-family: var(--f-serif); font-style: italic; font-weight: 400; } /* Tabular numerals — for stats and figures */ .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "lnum"; } /* Hanging serial — small numbered tag for cards */ .serial { font-family: var(--f-mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.18em; color: var(--color-ink-muted); text-transform: uppercase; } /* Page-level heading — thin geometric uppercase */ .heading-page { font-family: var(--f-body); font-weight: 300; font-size: clamp(1.85rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: 0.11em; text-transform: uppercase; } /* Section-level heading — thin geometric uppercase */ .heading-section { font-family: var(--f-body); font-weight: 300; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: 0.1em; text-transform: uppercase; } /* Subsection heading — thin geometric uppercase */ .heading-sub { font-family: var(--f-body); font-weight: 300; font-size: 1.1rem; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; } /* ── Page-wide gradient fill — brown→ink, synced via JS --gx offset ── */ .gradient-fill { background: linear-gradient(to right, var(--color-accent), var(--color-ink)); background-size: 100vw 1em; background-position-x: var(--gx, 0px); } .text-gradient, .heading-page, .heading-section, .heading-sub { background: linear-gradient(to right, var(--color-accent), var(--color-ink)); background-size: 100vw 1em; background-position-x: var(--gx, 0px); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Color utilities ── */ .text-secondary { color: var(--color-ink-secondary); } .text-muted { color: var(--color-ink-muted); } /* ── Card utilities ── */ .card { border: 1px solid var(--color-rule); background: var(--color-paper-elevated); border-radius: 4px; } .card:hover { border-color: var(--color-accent); transform: translateY(-1px); } /* Editorial card — hairline top rule (cooler than full borders). Use when the card is content-rich (stats, copy) rather than a button. */ .card-edition { position: relative; background: var(--color-paper-elevated); border: 1px solid var(--color-rule); border-radius: 4px; transition: border-color 240ms var(--ease-out), transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); } .card-edition::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--color-accent), var(--color-ink)); background-size: 100vw 1em; background-position-x: var(--gx, 0px); opacity: 0; transition: opacity 240ms var(--ease-out); } .card-edition:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: 0 1px 0 var(--color-rule), 0 18px 40px -28px rgba(28, 25, 23, 0.25); } .card-edition:hover::before { opacity: 1; } /* ────────────────────────────────────────────────────────── The ∀ glyph (Axiom wordmark) ∀ is part of our wordmark. Treat it like a logo, not a letter: • Never set `font-style: italic` on it. Slanting the glyph distorts the wordmark. • Render in a geometric sans (display family), not the serif body family. • When it appears inline alongside text, use `.glyph-axiom` to lock the family and weight. Inline ∀ used in copy must use this class. Do not nest it inside `.serif-italic`, `.kicker-mark`, or any other class that applies `font-style: italic` or a serif family. ────────────────────────────────────────────────────────── */ .glyph-axiom { font-family: var(--f-display); font-style: normal; font-weight: 300; letter-spacing: 0; display: inline-block; } /* ── Button utilities ── */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 4px; padding: 0.875rem 1.75rem; font-size: 0.95rem; font-weight: 500; background: linear-gradient(to right, var(--color-accent), var(--color-ink)); background-size: 100vw 1em; background-position-x: var(--gx, 0px); color: white; text-decoration: none; transition: all 150ms; border: none; cursor: pointer; } .btn-primary:hover { filter: brightness(0.85); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(146, 64, 14, 0.15); color: white; } .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 4px; border: 1px solid var(--color-rule); padding: 0.875rem 1.75rem; font-size: 0.95rem; font-weight: 500; color: var(--color-ink); background: transparent; text-decoration: none; transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); cursor: pointer; } .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-1px); box-shadow: 0 6px 18px -10px rgba(146, 64, 14, 0.4); } /* Quiet underlined link — for editorial body copy and footers */ .link-quiet { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size 220ms var(--ease-out), color 150ms var(--ease-out); padding-bottom: 1px; } .link-quiet:hover { background-size: 100% 1px; color: var(--color-accent); } /* Scroll-down cue for the hero — animated thin line */ .scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 0.65rem; font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink-muted); text-decoration: none; transition: color 200ms var(--ease-out); } .scroll-cue:hover { color: var(--color-accent); } .scroll-cue-line { position: relative; width: 1px; height: 36px; background: var(--color-rule); overflow: hidden; } .scroll-cue-line::after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 14px; background: var(--color-accent); animation: scroll-cue-fall 1.8s var(--ease-out) infinite; } @keyframes scroll-cue-fall { 0% { transform: translateY(-14px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(36px); opacity: 0; } } /* ── Nav bar ── */ .nav-bar { background: rgba(250, 249, 246, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-rule); } .nav-bar a, .nav-bar a:hover { text-decoration: none; }