/* ============================================================================ DU/ART — AI LAB · BASE Reset, root typography, the "room" (grain + vignette + fonts), layout primitives and utilities. Import tokens.css BEFORE this file. ============================================================================ */ /* Fonts — self-host in production (see /src/styles/fonts). During prototyping these can come from Google Fonts: Space Grotesk 400/500/700 · Inter 400/500/600 · JetBrains Mono 400/500 · Caveat 400/600 */ /* --------------------------------------------------------------- * * RESET * --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; min-height: 100dvh; font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body); color: var(--text-primary); background-color: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video, canvas { display: block; max-width: 100%; } [hidden] { display: none !important; } /* the hidden attribute must win over component display rules */ input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } :where(h1, h2, h3, h4) { line-height: var(--lh-snug); font-weight: var(--fw-semibold); } p { text-wrap: pretty; } h1, h2, h3, h4 { text-wrap: balance; } /* --------------------------------------------------------------- * * THE ROOM — page atmosphere. * Apply `.room` to (app) to get the warm radial wash, * film grain and vignette that define the identity. * --------------------------------------------------------------- */ .room { background-color: var(--bg-page); background-image: radial-gradient(1200px 600px at 80% -10%, rgba(255,90,47,0.10), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(255,90,47,0.04), transparent 60%); color: var(--text-primary); } /* Film grain overlay (page-wide, non-interactive) */ .room::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain); background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; opacity: var(--grain-opacity); } /* Vignette */ .room::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-vignette); background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%); } ::selection { background: var(--c-accent); color: var(--c-charcoal-900); } /* --------------------------------------------------------------- * * TYPOGRAPHIC PRIMITIVES * --------------------------------------------------------------- */ .display { font-family: var(--font-display); letter-spacing: var(--ls-display); line-height: var(--lh-tight); } .mono { font-family: var(--font-mono); } .hand { font-family: var(--font-hand); } .text-accent { color: var(--text-accent); } .display-1 { font-family: var(--font-display); font-size: var(--fs-display-1); letter-spacing: var(--ls-display); line-height: var(--lh-tight); font-weight: var(--fw-medium); } .display-2 { font-family: var(--font-display); font-size: var(--fs-display-2); letter-spacing: var(--ls-display); line-height: var(--lh-tight); font-weight: var(--fw-medium); } .h1 { font-family: var(--font-display); font-size: var(--fs-h1); letter-spacing: var(--ls-display); } .h2 { font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: var(--ls-display); } .h3 { font-family: var(--font-display); font-size: var(--fs-h3); } .h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: var(--fw-semibold); } .lede { font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--text-secondary); } .body { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--text-primary); } .small { font-size: var(--fs-sm); color: var(--text-secondary); } .muted { color: var(--text-secondary); } .faint { color: var(--text-tertiary); } /* Eyebrow — the recurring mono kicker with a leading dot + index */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-label-x); color: var(--text-secondary); } .eyebrow .dot { width: 6px; height: 6px; background: var(--c-accent); border-radius: var(--radius-full); } .eyebrow .num { color: var(--c-accent); } /* --------------------------------------------------------------- * * LAYOUT PRIMITIVES * --------------------------------------------------------------- */ .container { width: 100%; max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--layout-gutter); } .container--app { max-width: var(--layout-app-max); } .container--reading { max-width: var(--layout-reading); } /* Section vertical rhythm (marketing surfaces) */ .section { padding-block: var(--space-15) var(--space-13); } .section--tight { padding-block: var(--space-14) var(--space-12); } @media (max-width: 900px) { .section, .section--tight { padding-block: var(--space-12) var(--space-11); } } .stack > * + * { margin-top: var(--space-4); } .stack-2 > * + * { margin-top: var(--space-2); } .stack-6 > * + * { margin-top: var(--space-6); } .stack-9 > * + * { margin-top: var(--space-9); } .row { display: flex; align-items: center; gap: var(--space-3); } .row--between { justify-content: space-between; } .row--wrap { flex-wrap: wrap; } .grid { display: grid; gap: var(--space-6); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } @media (max-width: 900px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } .container { padding-inline: var(--layout-gutter-sm); } } /* --------------------------------------------------------------- * * UTILITIES * --------------------------------------------------------------- */ .hairline { border: 0; border-top: 1px solid var(--border-subtle); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .no-scroll { overflow: hidden; } /* Reveal on scroll — add `.in` via IntersectionObserver */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } .reveal.in { opacity: 1; transform: none; } /* Global focus-visible ring */ :focus-visible { outline: none; box-shadow: var(--focus-ring); } /* --------------------------------------------------------------- * * REDUCED MOTION * --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .room::before { opacity: 0.08; } .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }