/* ─── PIRE landing page — pire.ai Brand source of truth: business/branding/ (pire-business repo) v1 — AD-110, 2026-05-04 ──────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --black: #000000; --white: #FFFFFF; --amber: #C8973A; --text-primary-light: #222222; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ─── Theme tokens — driven by [data-theme] on ─── */ [data-theme="dark"] { --bg: var(--black); --fg: var(--white); --toggle-border-opacity: 0.4; } [data-theme="light"] { --bg: var(--white); --fg: var(--text-primary-light); --toggle-border-opacity: 0.3; } /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { background: var(--bg); /* Smooth crossfade when toggling — but instant on system theme change so it doesn't feel laggy */ transition: background-color 200ms ease; } body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── Layout ─── */ main { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: clamp(20px, 6vw, 48px); gap: clamp(1.5rem, 4vw, 2.5rem); } /* ─── Logo (dual variant) ─── */ .logo { width: clamp(160px, 50vw, 280px); height: auto; display: block; } [data-theme="dark"] .logo-light { display: none; } [data-theme="light"] .logo-dark { display: none; } /* ─── Tagline ─── */ .tagline { color: var(--fg); font-size: clamp(0.8125rem, 2.2vw, 1rem); font-weight: 400; letter-spacing: 0.06em; text-align: center; max-width: min(640px, 92vw); line-height: 1.6; transition: color 200ms ease; } /* Acronym-letter highlight — theme-aware: - Dark mode: amber accent (var(--amber)), weight 500. Amber on black is WCAG AAA at 8.1:1. - Light mode: pure black (var(--black) = #000) + weight 700. Amber fails WCAG AA on white per palette.md, so the contrast lever shifts from color (dark mode) to weight + black (light mode) — the caps stand out as a clear acronym on white. */ .tagline .acronym-letter { font-weight: 500; } [data-theme="dark"] .tagline .acronym-letter { color: var(--amber); } [data-theme="light"] .tagline .acronym-letter { color: var(--black); font-weight: 700; } /* ─── Theme toggle button ─── */ .theme-toggle { position: fixed; top: clamp(12px, 3vw, 24px); right: clamp(12px, 3vw, 24px); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid; border-color: rgb(from var(--fg) r g b / var(--toggle-border-opacity)); border-radius: 50%; color: var(--fg); font-family: var(--font-sans); font-size: 0.95rem; line-height: 1; cursor: pointer; opacity: 0.55; transition: opacity 180ms ease, transform 180ms ease, color 200ms ease, border-color 200ms ease; -webkit-tap-highlight-color: transparent; z-index: 10; } /* Fallback for browsers without rgb(from ...) color modifier (Safari < 16.4) */ @supports not (color: rgb(from white r g b / 0.5)) { [data-theme="dark"] .theme-toggle { border-color: rgba(255, 255, 255, 0.4); } [data-theme="light"] .theme-toggle { border-color: rgba(34, 34, 34, 0.3); } } .theme-toggle:hover, .theme-toggle:focus-visible { opacity: 1; outline: none; } .theme-toggle:focus-visible { box-shadow: 0 0 0 2px var(--amber); } .theme-toggle:active { transform: scale(0.92); } /* ─── Accessibility helper ─── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─── Reduced motion ─── */ @media (prefers-reduced-motion: reduce) { html, body, .tagline, .theme-toggle { transition: none; } }