/* ========================================================================== Piso9 Studio — main stylesheet Palette and type roles are documented in CLAUDE.md. ========================================================================== */ /* --- Fonts (self-hosted, woff2 only) ------------------------------------- */ /* Orbitron — wordmark & headings. Only 700 is used. (OFL, via Google Fonts) */ @font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/orbitron-700.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; } /* VT323 — terminal/OSD accents (hero CTA, embed button). (OFL) */ @font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/vt323-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; } /* Satoshi — UI & body. (Fontshare ITF FFL) */ @font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/satoshi-400.woff2") format('woff2'); } @font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/satoshi-500.woff2") format('woff2'); } @font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/satoshi-700.woff2") format('woff2'); } /* --- Base ----------------------------------------------------------------- */ :root { --bg: #0a0a0a; --fg: #fafafa; --accent: #ff8c00; --muted: #a3a3a3; --dim: #808080; /* AA 4.5:1 sobre --bg y --card; el diseño original usaba #737373 */ --line: #262626; --card: #141414; --font-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Orbitron", "Satoshi", sans-serif; --font-mono: "VT323", ui-monospace, Menlo, Consolas, monospace; } html { scroll-behavior: smooth; } /* --- TV-only mode ---------------------------------------------------------- Set on by an inline script before first paint; removed by hero.js when WebGL is unavailable. The page becomes just the TV (100vh, no scroll); the sections below stay in the DOM as sr-only fallback (screen readers and crawlers keep them — display:none would drop them from the a11y tree). */ .p9-tv, .p9-tv body { height: 100%; overflow: hidden; } .p9-tv main, .p9-tv .site-footer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } a { color: var(--fg); text-decoration: none; transition: color 120ms linear; } a:hover { color: var(--accent); } ::selection { background: var(--accent); color: var(--bg); } /* --- Hero ------------------------------------------------------------------ */ .hero { position: relative; height: 100vh; min-height: 560px; background: var(--bg); } piso9-hero { position: absolute; inset: 0; } /* Static wordmark shown only when JS is disabled (inside