/* ============================================================ ANVIL v2 — core language Shared by every light page in the portfolio. Linked LAST in so it is the authoritative layer over per-page CSS. Spec: skills/design-language/ANVILv2.md ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* color */ --red: #e63227; /* brand / fill / large display / UI accent */ --red-ink: #c41e16; /* small red TEXT — ~5.7:1 on --bg, passes AA */ --bg: #fafafa; --text: #000; --tile-bg: #2c2e33; --tile-text: #fff; --tile-border: rgba(0, 0, 0, .18); /* type */ --font-display: 'Michroma', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; /* surface */ --header-bg: rgba(255, 255, 255, .25); --header-bg-solid: rgba(255, 255, 255, .92); /* fallback + mobile + reduced-transparency */ --header-backdrop: blur(14px); --header-shadow: 0 22px 20px -12px rgba(0, 0, 0, .12); --shadow-sm: 0 8px 12px -6px rgba(0, 0, 0, .14); /* elements < ~26px tall */ /* motion */ --motion-fast: 120ms; --motion: 200ms; --ease: cubic-bezier(.2, .7, .3, 1); /* spatial */ --edge: 1rem; --content-max: 1100px; } /* ── Glass fallback (token override — fixes every var(--header-bg) surface site-wide with no per-element edits) ── */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --header-bg: var(--header-bg-solid); } } @media (max-width: 768px), (prefers-reduced-transparency: reduce) { :root { --header-bg: var(--header-bg-solid); --header-backdrop: none; } } /* ── Base ── */ html { scrollbar-width: thin; scrollbar-color: var(--text) transparent; scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle, rgba(0,0,0,.04) 1px, transparent 1px); background-size: 24px 24px; } @media (max-width: 768px) { body::before { display: none; } } /* ── Signature ── */ .accent { color: var(--red); } /* Section label / hero tag / footer label — TEXT is red-ink (AA at .72rem), the leading dot stays brand --red (it's a 6px graphic, ≥3:1). */ .section-label, .hero-tag, .foot-label { font-family: var(--font-mono); font-size: .72rem; color: var(--red-ink); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: .55rem; } .section-label { margin-bottom: 1.6rem; } .hero-tag { margin-bottom: 2rem; } .foot-label { margin-bottom: 1.4rem; } .section-label::before, .hero-tag::before, .foot-label::before { content: ''; width: 6px; height: 6px; background: var(--red); border-radius: 50%; flex-shrink: 0; } /* Project-page status label — small red text, so AA-safe red-ink (project pages only) */ .project-status { color: var(--red-ink); } #hero h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.9rem); font-weight: 400; letter-spacing: 0; line-height: 1.25; margin-bottom: 1.4rem; text-transform: uppercase; -webkit-text-stroke: 1px currentColor; /* display size — stroke is fine here */ paint-order: stroke fill; } /* ── Interaction & states ── */ :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } /* On busy glass, add a white spacer ring so the red always reads */ .on-glass:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red); } [disabled], [aria-disabled="true"] { opacity: .45; pointer-events: none; } /* ── Motion guard ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }