/* ================================================================ HELLBOX COMICS PRODUCTION VISUAL SYSTEM — PASS 02 LARGE-DISPLAY READABILITY + VERTICAL COMPOSITION ================================================================ */ /* ================================================================ ROOT ================================================================ */ :root { --black: #020202; --black-soft: #070707; --black-panel: #0b0b0c; --black-raised: #101012; --paper: #ece8df; --paper-muted: #aaa49c; --paper-dark: #706b65; /* Reactive brand accent -- swaps with the connected wallet's chain via [data-chain-theme] on , set by applyChainTheme() in app.js. RED is the real default here in :root -- Harrow's own color, shown whenever no wallet is connected (or the connected chain isn't one we theme). PulseChain, Base, and Robinhood Chain each override it via [data-chain-theme="..."] blocks further down, only while a wallet is actually connected to that chain. NOTE: this used to be a plain "--green: #71ff9f" declared twice in this block -- the second one silently won and shadowed the intended color the whole time, which is why the earlier green pass looked wrong. */ --theme: #c62020; --theme-hot: #ff3b2f; --theme-rgb: 198,32,32; --theme-hot-rgb: 255,59,47; --theme-shadow: 0 0 55px rgba(198,32,32,0.18); --theme-gradient: linear-gradient(135deg, #7a1414, #c62020, #ff3b2f); --red: #c62020; --red-hot: #ff3b2f; --orange: #ff6a1a; --yellow: #e7ca77; --line: rgba(255,255,255,0.12); --line-strong: rgba(255,255,255,0.22); --shadow: 0 25px 90px rgba(0,0,0,0.72); --red-shadow: 0 0 60px rgba(198,32,32,0.15); --shell: min(1600px, calc(100vw - 56px)); --header-h: 82px; --section-gap: clamp(92px, 7vw, 145px); --font-ui: "Oswald", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; --font-body: Inter, "Helvetica Neue", Arial, sans-serif; --font-serif: Georgia, "Times New Roman", serif; } /* ================================================================ RESET ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--black); } body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--black); color: var(--paper); font-family: var(--font-body); font-size: 18px; line-height: 1.58; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.drawer-open, body.reader-open { overflow: hidden; } img { display: block; max-width: 100%; } button, a { -webkit-tap-highlight-color: transparent; } button { font: inherit; } a { color: inherit; text-decoration: none; } ::selection { background: var(--theme); color: #fff; } /* ================================================================ GLOBAL TYPE FLOOR ================================================================ */ small { font-size: 15px; line-height: 1.45; } .eyebrow, .section-number, .system-label, .hero-meta, .transmission-label, .header-nav, .header-network, .footer-status, .footer-bottom, .terminal-top span, .press-mini-header, .press-mini-body span, .machine-console-top, .machine-console-readouts span, .press-state span, .classified-label { font-family: var(--font-ui); font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: 0.095em; text-transform: uppercase; } /* ================================================================ ATMOSPHERE ================================================================ */ .site-noise, .site-scanlines, .site-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 900; } .site-noise { opacity: 0.026; background-image: repeating-radial-gradient( circle at 0 0, rgba(255,255,255,0.24) 0, rgba(255,255,255,0.24) 1px, transparent 1px, transparent 4px ); mix-blend-mode: overlay; } .site-scanlines { opacity: 0.12; background: repeating-linear-gradient( to bottom, transparent 0, transparent 3px, rgba(255,255,255,0.014) 4px ); } .site-vignette { box-shadow: inset 0 0 160px rgba(0,0,0,0.72); } .cursor-burn { position: fixed; width: 280px; height: 280px; border-radius: 50%; pointer-events: none; z-index: 10; opacity: 0; transform: translate(-50%, -50%); background: radial-gradient( circle, rgba(var(--theme-rgb),0.09), rgba(120,30,180,0.03) 35%, transparent 70% ); transition: opacity 0.25s ease; } body:hover .cursor-burn { opacity: 1; } /* ================================================================ SHELL ================================================================ */ .section-shell { position: relative; z-index: 2; width: var(--shell); margin: 0 auto; } .section-number { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 11px; margin-bottom: 30px; color: #969098; border: 1px solid var(--line); background: rgba(255,255,255,0.025); } /* ================================================================ HEADER ================================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 800; height: var(--header-h); display: grid; grid-template-columns: minmax(240px, auto) 1fr auto auto; align-items: center; gap: 26px; padding: 0 28px; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(2,2,2,0.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .header-brand { display: inline-flex; align-items: center; gap: 13px; font-family: var(--font-ui); font-size: 16px; font-weight: 900; letter-spacing: 0.1em; } .header-emblem { width: 40px; height: 40px; object-fit: contain; } .header-nav { display: flex; justify-content: center; align-items: center; gap: clamp(18px, 2vw, 38px); } .header-nav a { position: relative; color: #b2adb5; transition: color 0.18s ease; } .header-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -9px; height: 2px; background: var(--theme); transition: right 0.2s ease; } .header-nav a:hover { color: #fff; } .header-nav a:hover::after { right: 0; } .header-network { display: flex; align-items: center; gap: 9px; white-space: nowrap; color: #aaa5af; } .network-light { width: 9px; height: 9px; border-radius: 50%; background: var(--theme); box-shadow: 0 0 14px var(--theme); } .wallet-button { min-height: 48px; padding: 0 20px; border: 1px solid rgba(var(--theme-rgb),0.7); background: rgba(var(--theme-rgb),0.12); color: #fff; font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.09em; cursor: pointer; transition: 0.2s ease; } .wallet-button:hover { border-color: var(--theme); background: var(--theme); box-shadow: 0 0 35px rgba(var(--theme-rgb),0.28); } /* ================================================================ HARROW ORB + DISCOVERY ================================================================ */ .harrow-orb { position: fixed; right: 28px; bottom: 28px; z-index: 750; width: 72px; height: 72px; padding: 8px; border: 1px solid rgba(var(--theme-rgb),0.6); border-radius: 50%; background: #050505; box-shadow: 0 0 35px rgba(var(--theme-rgb),0.19); cursor: pointer; } .harrow-orb img { width: 100%; height: 100%; object-fit: contain; } .harrow-orb-ping { position: absolute; inset: -5px; border: 1px solid rgba(var(--theme-rgb),0.28); border-radius: 50%; animation: orbPing 2.8s infinite; } @keyframes orbPing { 0% { transform: scale(0.9); opacity: 0; } 30% { opacity: 0.8; } 100% { transform: scale(1.38); opacity: 0; } } .discovery-counter { position: fixed; right: 33px; bottom: 113px; z-index: 749; min-width: 64px; padding: 9px 12px; display: flex; justify-content: center; gap: 8px; border: 1px solid var(--line); background: rgba(0,0,0,0.82); font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.08em; } .discovery-counter strong { color: var(--theme-hot); } /* ================================================================ HARROW WHISPER ================================================================ */ .harrow-whisper { position: fixed; left: 50%; bottom: 34px; z-index: 760; max-width: min(780px, calc(100vw - 190px)); padding: 16px 21px; opacity: 0; transform: translate(-50%, 30px); pointer-events: none; border: 1px solid rgba(var(--theme-rgb),0.44); background: rgba(3,3,3,0.95); box-shadow: var(--theme-shadow); transition: opacity 0.22s ease, transform 0.22s ease; } .harrow-whisper[aria-hidden="false"], .harrow-whisper.active { opacity: 1; transform: translate(-50%, 0); } .harrow-whisper span { margin-right: 8px; color: var(--theme-hot); font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.1em; } .harrow-whisper strong { font-size: 17px; } /* ================================================================ HARROW RESPONSE ================================================================ */ .harrow-response { position: fixed; right: 28px; bottom: 114px; z-index: 770; width: min(430px, calc(100vw - 40px)); opacity: 0; transform: translateY(18px) scale(0.98); pointer-events: none; border: 1px solid rgba(var(--theme-rgb),0.48); background: rgba(4,4,5,0.97); box-shadow: 0 28px 100px rgba(0,0,0,0.8); transition: 0.22s ease; } .harrow-response[aria-hidden="false"], .harrow-response.active { opacity: 1; transform: none; pointer-events: auto; } .harrow-response-top { min-height: 46px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--theme-hot); font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.1em; } .harrow-response-top button { border: 0; background: none; color: #fff; font-size: 30px; cursor: pointer; } .harrow-response-body { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 21px; } .harrow-response-body img { width: 92px; aspect-ratio: 1; object-fit: cover; } .harrow-response-body strong { display: block; margin-bottom: 8px; font-size: 21px; } .harrow-response-body p { margin: 0; color: #c1bcc4; font-size: 16px; } /* ================================================================ DRAWER ================================================================ */ .lair-drawer { position: fixed; inset: 0; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .lair-drawer[aria-hidden="false"], .lair-drawer.active { opacity: 1; pointer-events: auto; } .lair-drawer-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,0.76); cursor: pointer; } .lair-drawer-panel { position: absolute; top: 0; right: 0; width: min(640px, 92vw); height: 100%; margin: 0; overflow-y: auto; border-left: 1px solid rgba(var(--theme-rgb),0.4); background: #070708; box-shadow: -30px 0 100px rgba(0,0,0,0.8); } .lair-drawer-header { position: sticky; top: 0; z-index: 3; min-height: 66px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(7,7,8,0.96); font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.1em; } .lair-drawer-header button { border: 0; background: none; color: #fff; font-size: 32px; cursor: pointer; } .lair-drawer-content { padding: 60px 44px; } .lair-drawer-content h2 { margin: 12px 0 28px; font-family: var(--font-ui); font-size: clamp(44px, 4.7vw, 78px); line-height: 0.92; text-transform: uppercase; } .drawer-copy { color: #c7c2ca; font-size: 19px; line-height: 1.7; } .drawer-footnote { margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--line); color: #918b94; font-family: var(--font-ui); font-size: 15px; letter-spacing: 0.07em; } /* ================================================================ HERO ================================================================ */ .hero { position: relative; min-height: 960px; height: max(960px, 100svh); overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.08); background: #020202; } .hero-art { position: absolute; inset: 0; z-index: 0; } .hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .hero-blackout { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 25%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.07) 72%, rgba(0,0,0,0.2) 100% ), linear-gradient( 180deg, rgba(0,0,0,0.53) 0%, transparent 23%, transparent 70%, rgba(0,0,0,0.88) 100% ); } .hero-inner { position: relative; z-index: 3; width: var(--shell); height: 100%; margin: 0 auto; padding-top: calc(var(--header-h) + 62px); padding-bottom: 118px; display: flex; flex-direction: column; justify-content: space-between; } .hero-brand { width: min(640px, 44vw); } .hero-logo-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; } .hero-wordmark { width: 100%; max-height: 175px; object-fit: contain; object-position: left center; } .hero-content { display: grid; grid-template-columns: minmax(480px, 660px) minmax(340px, 440px); gap: clamp(48px, 5vw, 95px); align-items: end; } .hero-copy h1 { margin: 18px 0 24px; font-family: var(--font-ui); font-size: clamp(94px, 8vw, 156px); font-weight: 1000; line-height: 0.78; letter-spacing: -0.065em; text-transform: uppercase; } .hero-copy h1 span { display: block; /* Flagship gradient spot -- this is the one place the theme's full multi-stop gradient shows as an actual gradient (purple/pink/blue on PulseChain, the default) rather than a flat swatch. Falls back to a solid color if background-clip:text isn't supported. */ color: var(--theme-hot); background: var(--theme-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .system-label { display: block; color: #c0bac3; } .hero-description { margin: 0; color: #d6d1d8; font-family: var(--font-ui); font-size: clamp(19px, 1.3vw, 23px); font-weight: 800; line-height: 1.45; letter-spacing: 0.045em; } .hero-description small { display: inline-block; margin-top: 9px; color: #969099; font-size: 15px; } .hero-actions { display: flex; gap: 12px; margin-top: 30px; } .button-primary, .button-ghost { min-height: 52px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 30px; border: 1px solid var(--line-strong); font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.09em; transition: 0.2s ease; } .button-primary { border-color: var(--theme); background: var(--theme); color: #fff; } .button-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(var(--theme-rgb),0.3); } .button-ghost { background: rgba(0,0,0,0.45); } .button-ghost:hover { border-color: #777; background: rgba(255,255,255,0.06); } .hero-transmission { border: 1px solid rgba(255,255,255,0.14); background: rgba(4,4,5,0.79); backdrop-filter: blur(10px); box-shadow: var(--shadow); } .transmission-header { min-height: 45px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.09em; } .live-text { color: var(--red-hot); } .transmission-body { padding: 24px; } .transmission-label { display: block; margin-bottom: 13px; color: #8f8992; } .transmission-body strong { display: block; font-family: var(--font-ui); font-size: clamp(26px, 2vw, 35px); line-height: 1.05; text-transform: uppercase; } .transmission-body small { display: block; margin-top: 15px; color: #b5afb8; font-size: 15px; } .hero-harrow-signature { width: 160px; margin: 0 22px 19px auto; opacity: 0.78; } .hero-meta { position: absolute; z-index: 4; left: 50%; bottom: 25px; width: var(--shell); transform: translateX(-50%); display: flex; justify-content: space-between; color: rgba(255,255,255,0.62); } .hero-scroll-note { position: absolute; z-index: 4; right: 36px; bottom: 70px; writing-mode: vertical-rl; font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.12em; color: #928c95; } /* ================================================================ HERO HOTSPOTS ================================================================ */ .lair-hotspot { position: absolute; z-index: 5; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,255,255,0.42); border-radius: 50%; background: rgba(0,0,0,0.58); color: #fff; font-size: 20px; cursor: pointer; transition: 0.18s ease; } .lair-hotspot::after { content: ""; position: absolute; inset: -10px; border: 1px solid rgba(var(--theme-rgb),0.15); border-radius: 50%; } .lair-hotspot:hover { border-color: var(--theme-hot); background: var(--theme); transform: scale(1.1); box-shadow: 0 0 30px rgba(var(--theme-rgb),0.4); } .hotspot-cabal { left: 67%; top: 34%; } .hotspot-monitor { left: 71%; top: 52%; } .hotspot-harrow { left: 61%; top: 54%; } .hotspot-pages { left: 66%; top: 75%; } .hotspot-redacted { left: 48%; top: 70%; } /* ================================================================ MANIFESTO ================================================================ */ .manifesto-section { position: relative; overflow: hidden; padding: 100px 0 95px; background: #f0ece3; color: #0d0d0e; } .manifesto-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr); gap: clamp(55px, 7vw, 125px); align-items: start; } .manifesto-title h2 { margin: 17px 0 0; max-width: 880px; font-family: var(--font-ui); font-size: clamp(68px, 7.2vw, 132px); line-height: 0.82; letter-spacing: -0.055em; text-transform: uppercase; } .manifesto-title h2 em { display: block; color: var(--theme-hot); background: var(--theme-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: normal; } .manifesto-body { padding-top: 24px; font-size: 19px; line-height: 1.62; } .manifesto-body p { margin: 0 0 20px; } .manifesto-lead { font-size: 24px; font-weight: 700; line-height: 1.42; } .admin-note { position: relative; width: min(440px, 100%); margin-top: 30px; padding: 22px 24px 26px; text-align: left; border: 0; background: #e2cb78; color: #17130c; box-shadow: 10px 14px 25px rgba(0,0,0,0.16); transform: rotate(-1.7deg); cursor: pointer; } .admin-note-top { margin-bottom: 12px; font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.08em; } .admin-note strong { display: block; font-size: 21px; line-height: 1.2; } .admin-note > span { display: block; margin-top: 10px; font-size: 15px; } .admin-note img { width: 120px; margin: 18px 0 0 auto; } .manifesto-brand-ghost { position: absolute; right: -40px; bottom: -25px; width: min(640px, 46vw); opacity: 0.055; transform: rotate(-6deg); pointer-events: none; } /* ================================================================ ARCHIVE ================================================================ */ .archive-section { position: relative; overflow: hidden; padding: 100px 0 105px; background: #050506; } .archive-radiation { position: absolute; width: 900px; height: 900px; left: -300px; top: -250px; border-radius: 50%; background: radial-gradient( circle, rgba(var(--theme-rgb),0.12), transparent 67% ); pointer-events: none; } .section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 470px); gap: 60px; align-items: end; margin-bottom: 48px; } .section-heading h2 { margin: 12px 0 0; font-family: var(--font-ui); font-size: clamp(74px, 7.6vw, 142px); line-height: 0.8; letter-spacing: -0.055em; text-transform: uppercase; } .section-heading h2 em { color: var(--theme-hot); font-style: normal; } .section-intro { color: #b4afb7; font-size: 18px; line-height: 1.55; } .section-intro p { margin: 0 0 9px; } .archive-live-count { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.07em; } .archive-live-count > span { width: 8px; height: 8px; border-radius: 50%; background: var(--theme); box-shadow: 0 0 12px var(--theme); } .archive-terminal { overflow: hidden; border: 1px solid rgba(255,255,255,0.14); background: linear-gradient( 150deg, rgba(255,255,255,0.025), transparent 55% ), #09090a; box-shadow: var(--shadow), var(--theme-shadow); } .terminal-top { min-height: 72px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); } .terminal-top > div { display: flex; flex-direction: column; gap: 4px; } .terminal-top span { color: #8e8991; } .terminal-top strong { font-family: var(--font-ui); font-size: 18px; letter-spacing: 0.06em; } .terminal-top-right { text-align: right; } .terminal-main { position: relative; min-height: 290px; padding: 42px 46px; display: grid; grid-template-columns: 150px minmax(0, 1fr) 260px; align-items: center; gap: 40px; } .terminal-emblem { width: 145px; height: 145px; padding: 18px; border: 1px solid rgba(var(--theme-rgb),0.24); background: #050505; cursor: pointer; } .terminal-emblem img { width: 100%; height: 100%; object-fit: contain; } .terminal-copy > span { color: var(--theme-hot); font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.09em; } .terminal-copy h3 { margin: 10px 0 10px; font-family: var(--font-ui); font-size: clamp(38px, 3.5vw, 62px); line-height: 0.95; } .terminal-copy p { margin: 0 0 23px; color: #b6b0b8; font-size: 18px; } .terminal-action { min-height: 48px; padding: 0 18px; border: 1px solid var(--theme); background: rgba(var(--theme-rgb),0.1); color: #fff; font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.08em; cursor: pointer; } .terminal-action:hover { background: var(--theme); } .harrow-sticky-note { width: 240px; min-height: 160px; padding: 20px; border: 0; background: #e4cd78; color: #18130b; text-align: left; transform: rotate(2deg); box-shadow: 9px 14px 30px rgba(0,0,0,0.25); cursor: pointer; } .harrow-sticky-note > span { font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.09em; } .harrow-sticky-note strong { display: block; margin-top: 12px; font-size: 21px; line-height: 1.2; } .harrow-sticky-note img { width: 100px; margin: 20px 0 0 auto; } .collection-summary { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .collection-summary > div { min-height: 105px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); } .collection-summary > div:last-child { border-right: 0; } .collection-summary span { color: #928d95; font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.09em; } .collection-summary strong { font-family: var(--font-ui); font-size: 34px; } .summary-owned strong { color: var(--theme); } .summary-missing strong { color: var(--red-hot); } .summary-altered strong { color: var(--theme-hot); } .collection-list { min-height: 30px; } .collection-item { padding: 26px; display: grid; grid-template-columns: 1fr auto; gap: 20px; border-bottom: 1px solid var(--line); } .collection-item h3 { margin: 0; font-size: 28px; } .collection-item p { color: #aaa4ad; } .terminal-footer-status { min-height: 56px; padding: 0 24px; display: flex; align-items: center; color: #99949c; font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.08em; } /* ================================================================ OBSESSION WALL ================================================================ */ .evidence-section { position: relative; padding: 100px 0 95px; overflow: hidden; background: linear-gradient( 180deg, #080708, #030303 70% ); } .evidence-heading { margin-bottom: 40px; } .theory-heading { position: relative; } .vandalized-word { position: relative; display: inline-block; } .vandalism-theories { position: absolute; margin-top: -40px; margin-left: 10px; color: var(--red-hot); font-family: var(--font-serif); font-size: 42px; font-weight: 700; transform: rotate(-9deg); } .obsession-wall { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); background: #080606; box-shadow: 0 40px 110px rgba(0,0,0,0.76), 0 0 60px rgba(130,35,35,0.1); } .obsession-wall::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 90px rgba(0,0,0,0.5); } .obsession-wall-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; } .obsession-hotspot { position: absolute; z-index: 5; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid rgba(255,255,255,0.22); border-radius: 50%; background: rgba(6,6,6,0.38); color: transparent; cursor: pointer; transition: 0.18s ease; } .obsession-hotspot::before { content: "+"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.88); font-size: 20px; } .obsession-hotspot::after { content: ""; position: absolute; inset: -9px; border: 1px dashed rgba(197,40,40,0.28); border-radius: 50%; opacity: 0; transition: 0.18s ease; } .obsession-hotspot > span { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); padding: 6px 9px; white-space: nowrap; opacity: 0; color: #fff; background: rgba(0,0,0,0.92); border: 1px solid rgba(255,255,255,0.15); font-family: var(--font-ui); font-size: 13px; font-weight: 900; letter-spacing: 0.07em; transition: opacity 0.18s ease; } .obsession-hotspot:hover { border-color: var(--theme-hot); background: rgba(var(--theme-hot-rgb),0.55); transform: scale(1.15); } .obsession-hotspot:hover::after, .obsession-hotspot:hover > span { opacity: 1; } .obsession-hotspot-richard { left: 19%; top: 32%; } .obsession-hotspot-sec { left: 44%; top: 21%; } .obsession-hotspot-interpol { left: 67%; top: 25%; } .obsession-hotspot-cabal { left: 76%; top: 44%; } .obsession-hotspot-nft { left: 24%; top: 67%; } .obsession-hotspot-sacrifice { left: 43%; top: 73%; } .obsession-hotspot-influencers { left: 78%; top: 69%; } .obsession-hotspot-harrow { left: 52%; top: 48%; width: 52px; height: 52px; border-color: rgba(var(--theme-rgb),0.55); } .obsession-wall-hint { position: absolute; z-index: 4; right: 18px; bottom: 14px; padding: 7px 10px; color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.65); font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.09em; } /* ================================================================ OBSESSION TICKER ================================================================ */ .obsession-strip { overflow: hidden; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); background: var(--theme); color: #fff; } .obsession-track { width: max-content; min-height: 58px; display: flex; align-items: center; gap: 22px; padding: 0 30px; font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.09em; white-space: nowrap; animation: obsessionScroll 40s linear infinite; } .obsession-track i { opacity: 0.45; font-style: normal; } @keyframes obsessionScroll { from { transform: translateX(0); } to { transform: translateX(-35%); } } /* ================================================================ PRESS ================================================================ */ .press-section { position: relative; overflow: hidden; padding: 100px 0 105px; min-height: 980px; background: radial-gradient( circle at 68% 48%, rgba(108,46,174,0.11), transparent 35% ), radial-gradient( circle at 69% 65%, rgba(255,92,24,0.07), transparent 30% ), #030303; } .press-glow { position: absolute; width: 850px; height: 850px; right: -200px; top: 130px; border-radius: 50%; background: radial-gradient( circle, rgba(var(--theme-rgb),0.12), transparent 66% ); filter: blur(25px); pointer-events: none; } .press-stage { display: grid; grid-template-columns: minmax(340px, 0.66fr) minmax(650px, 1.44fr); gap: clamp(40px, 4vw, 75px); align-items: center; } .press-copy { position: relative; z-index: 5; } .press-copy h2 { margin: 14px 0 24px; font-family: var(--font-ui); font-size: clamp(76px, 7.2vw, 132px); font-weight: 1000; line-height: 0.79; letter-spacing: -0.06em; text-transform: uppercase; } .press-copy h2 em { display: block; color: var(--theme-hot); background: var(--theme-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: normal; } .press-lead { margin: 0 0 5px; color: #d1cbd4; font-size: 21px; } .press-copy > p:not(.press-lead) { color: #938d96; font-size: 18px; } .press-object-links { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; margin: 30px 0; } .press-object-link { padding: 0 0 7px; border: 0; border-bottom: 1px solid rgba(255,255,255,0.2); background: none; color: #fff; font-family: var(--font-ui); font-size: 16px; font-weight: 900; letter-spacing: 0.08em; cursor: pointer; } .press-object-link:hover { color: var(--theme-hot); border-color: var(--theme-hot); } .press-mini-terminal { margin-top: 32px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); background: rgba(7,7,8,0.88); } .press-mini-header { min-height: 47px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); } .press-mini-header strong { color: var(--theme-hot); } .press-mini-body { display: grid; grid-template-columns: 1fr 1fr; } .press-mini-body > div { min-height: 82px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .press-mini-body > div:nth-child(even) { border-right: 0; } .press-mini-body span { color: #89838c; } .press-mini-body strong { font-family: var(--font-ui); font-size: 18px; letter-spacing: 0.04em; } /* ================================================================ PRESS MACHINE ================================================================ */ .press-machine-zone { position: relative; width: 100%; aspect-ratio: 1122 / 1402; isolation: isolate; container-type: inline-size; } .machine-field { position: absolute; border-radius: 50%; filter: blur(30px); pointer-events: none; } .machine-field-one { width: 520px; height: 520px; left: 18%; top: 16%; background: rgba(var(--theme-rgb),0.08); } .machine-field-two { width: 380px; height: 300px; left: 28%; bottom: 11%; background: rgba(255,90,20,0.05); } .press-machine { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 35px 45px rgba(0,0,0,0.6)); } .press-machine-art { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 0.35s ease, filter 0.35s ease; } .press-machine:hover .press-machine-art { transform: scale(1.012); filter: brightness(1.06) contrast(1.03); } .press-machine-aura { position: absolute; z-index: -1; inset: 12% 10% 7%; opacity: 0.2; background: radial-gradient( circle, rgba(var(--theme-rgb),0.3), rgba(255,90,20,0.06) 42%, transparent 70% ); filter: blur(30px); transition: opacity 0.3s ease; } .press-machine-zone.awake .press-machine-aura, .press-machine-zone.active .press-machine-aura, .press-machine.awake .press-machine-aura { opacity: 0.7; animation: machineBreathe 2.1s ease-in-out infinite; } @keyframes machineBreathe { 0%, 100% { transform: scale(0.97); opacity: 0.45; } 50% { transform: scale(1.03); opacity: 0.85; } } .press-machine-console { position: absolute; z-index: 7; left: 2%; bottom: 1%; width: min(410px, 46%); overflow: hidden; border: 1px solid rgba(255,255,255,0.15); background: rgba(4,4,5,0.91); box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .machine-console-top { min-height: 42px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); } .machine-console-light { width: 9px; height: 9px; border-radius: 50%; background: #444; } .machine-console-light.active, .press-machine-zone.awake .machine-console-light { background: var(--theme); box-shadow: 0 0 14px var(--theme); } .machine-console-message { padding: 17px; } .machine-console-message > span { color: #8f8992; font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.08em; } .machine-console-message strong { display: block; margin: 7px 0 5px; font-family: var(--font-ui); font-size: 22px; } .machine-console-message p { margin: 0; color: #b0aab3; font-size: 16px; } .machine-console-readouts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); } .machine-console-readouts > div { min-height: 66px; padding: 10px; border-right: 1px solid var(--line); } .machine-console-readouts > div:last-child { border-right: 0; } .machine-console-readouts span { display: block; color: #89838b; font-size: 12px; } .machine-console-readouts strong { display: block; margin-top: 5px; font-family: var(--font-ui); font-size: 17px; } .press-lever { position: absolute; z-index: 9; right: 3%; bottom: 11%; width: 96px; height: 182px; border: 1px solid rgba(255,255,255,0.15); background: rgba(5,5,5,0.7); cursor: pointer; } .press-lever-track { position: absolute; left: 50%; top: 24px; width: 12px; height: 105px; transform: translateX(-50%); border-radius: 10px; background: #1b1b1c; box-shadow: inset 0 0 8px #000; } .press-lever-arm { position: absolute; left: 50%; top: 32px; width: 10px; height: 76px; transform: translateX(-50%) rotate(-9deg); transform-origin: center bottom; background: linear-gradient( 90deg, #3e3e3e, #a4a4a4, #444 ); transition: transform 0.28s ease; } .press-lever-arm i { position: absolute; left: 50%; top: -18px; width: 33px; height: 33px; border-radius: 50%; transform: translateX(-50%); background: #8f1714; box-shadow: inset 0 0 8px rgba(0,0,0,0.5); } .press-lever.pulled .press-lever-arm, .press-machine-zone.pressing .press-lever-arm { transform: translateX(-50%) rotate(19deg) translateY(37px); } .press-lever strong { position: absolute; left: 0; right: 0; bottom: 12px; font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.09em; } .press-warning { position: absolute; z-index: 8; right: 1%; bottom: 3%; color: var(--red-hot); font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.08em; transform: rotate(-4deg); } /* ================================================================ PRESS STATE RAIL ================================================================ */ .press-state-rail { margin-top: 52px; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); } .press-state { position: relative; min-height: 86px; padding: 15px 18px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); color: #77727a; } .press-state:last-child { border-right: 0; } .press-state span { font-size: 13px; } .press-state strong { font-family: var(--font-ui); font-size: 18px; letter-spacing: 0.06em; } .press-state.active { color: #fff; background: rgba(var(--theme-rgb),0.08); } .press-state.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--theme); box-shadow: 0 0 15px var(--theme); } /* ================================================================ HARROW ================================================================ */ .harrow-section { position: relative; overflow: hidden; padding: 100px 0 105px; background: #070607; } .harrow-background-word { position: absolute; left: -2vw; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.018); font-family: var(--font-ui); font-size: 30vw; font-weight: 1000; line-height: 0.7; pointer-events: none; } .harrow-layout { display: grid; grid-template-columns: minmax(390px, 0.78fr) minmax(500px, 1.12fr); gap: clamp(45px, 5vw, 90px); align-items: start; } .harrow-art-column { display: flex; flex-direction: column; gap: 20px; } .harrow-art-frame { position: relative; width: 100%; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); background: #030303; cursor: pointer; box-shadow: var(--shadow); } .harrow-concept { width: 100%; height: auto; transition: transform 0.4s ease, filter 0.4s ease; } .harrow-art-frame:hover .harrow-concept { transform: scale(1.018); filter: contrast(1.05); } .surveillance-overlay { position: absolute; left: 0; right: 0; bottom: 0; min-height: 49px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.74); font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.08em; } .harrow-profile-card { width: 100%; padding: 14px; display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 18px; border: 1px solid var(--line); background: rgba(255,255,255,0.025); color: #fff; text-align: left; cursor: pointer; } .harrow-profile-card img { width: 80px; height: 80px; object-fit: cover; } .harrow-profile-card span, .harrow-profile-card small { color: #918b94; font-family: var(--font-ui); font-size: 13px; font-weight: 900; letter-spacing: 0.08em; } .harrow-profile-card strong { display: block; margin: 3px 0; font-family: var(--font-ui); font-size: 26px; } .harrow-file { padding-top: 8px; } .harrow-file-top { display: flex; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--line); color: #918b94; font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.07em; } .harrow-wordmark-button { width: min(520px, 90%); margin: 28px 0 24px; padding: 0; border: 0; background: none; cursor: pointer; } .harrow-wordmark { width: 100%; } .harrow-role-list { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; } .harrow-role-list strong { padding: 8px 11px; border: 1px solid var(--line); color: #b6b0b8; font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.07em; } .harrow-intro { max-width: 720px; margin: 0 0 10px; color: #cbc6ce; font-size: clamp(20px, 1.35vw, 24px); line-height: 1.5; } .harrow-data { display: grid; grid-template-columns: 1fr 1fr; margin: 36px 0; border: 1px solid var(--line); } .harrow-data > div { min-height: 96px; padding: 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .harrow-data > div:nth-child(even) { border-right: 0; } .harrow-data span { display: block; margin-bottom: 8px; color: #918b94; font-family: var(--font-ui); font-size: 13px; font-weight: 900; letter-spacing: 0.08em; } .harrow-data strong { font-family: var(--font-ui); font-size: 20px; } .self-review { width: 100%; padding: 24px; text-align: left; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.025); color: #fff; cursor: pointer; } .self-review > span, .self-review small { color: #918b94; font-family: var(--font-ui); font-size: 13px; font-weight: 900; letter-spacing: 0.07em; } .self-review p { margin: 14px 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.45; } .harrow-love-note { margin-top: 30px; padding: 24px; border-left: 4px solid var(--theme); background: rgba(var(--theme-rgb),0.06); } .harrow-love-note span { color: var(--theme-hot); font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.08em; } .harrow-love-note strong { display: block; margin: 9px 0; font-size: 21px; } .harrow-love-note p { margin: 0; color: #a29ca5; } .harrow-social-row { display: flex; margin-top: 30px; } .harrow-social-row a { min-width: 310px; padding: 17px 19px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); font-family: var(--font-ui); } .harrow-social-row a:hover { border-color: var(--theme); } /* ================================================================ SIGNALS ================================================================ */ .signals-section { padding: 100px 0 105px; background: #030303; } .signals-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); } .signal-card { min-height: 200px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border: 0; border-right: 1px solid var(--line); background: transparent; color: #fff; text-align: left; cursor: pointer; transition: background 0.2s ease; } .signal-card:last-child { border-right: 0; } .signal-card:hover { background: rgba(var(--theme-rgb),0.07); } .signal-card > span, .signal-card small { color: #918b94; font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.08em; } .signal-card strong { overflow-wrap: anywhere; font-family: var(--font-ui); font-size: clamp(23px, 1.7vw, 31px); } .signal-locked { opacity: 0.6; } /* ================================================================ CLASSIFIED ================================================================ */ .classified-section { position: relative; overflow: hidden; padding: 100px 0 110px; background: linear-gradient( 150deg, #090909, #030303 70% ); } .classified-layout { display: grid; grid-template-columns: minmax(430px, 0.85fr) minmax(500px, 1.15fr); gap: clamp(45px, 6vw, 90px); align-items: center; } .classified-label { color: var(--red-hot); } .classified-copy h2 { margin: 16px 0 22px; font-family: var(--font-ui); font-size: clamp(76px, 7.6vw, 142px); line-height: 0.78; letter-spacing: -0.06em; } .classified-copy h2 em { display: block; color: var(--theme-hot); background: var(--theme-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: normal; } .classified-copy > p { margin: 0; color: #aaa4ad; font-size: 18px; } .redaction-lines { width: min(520px, 100%); margin: 30px 0; } .redaction-lines span { display: block; height: 15px; margin: 9px 0; background: #111; } .redaction-lines span:nth-child(1) { width: 94%; } .redaction-lines span:nth-child(2) { width: 71%; } .redaction-lines span:nth-child(3) { width: 83%; } .classified-object-list { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; } .classified-object-list button { padding: 9px 11px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); color: #a29ca5; font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.07em; cursor: pointer; } .classified-object { position: relative; min-height: 500px; border: 1px solid rgba(255,255,255,0.12); background: radial-gradient( circle, rgba(var(--theme-rgb),0.09), transparent 58% ); color: #fff; cursor: pointer; } .classified-object img { position: absolute; left: 50%; top: 47%; width: 205px; transform: translate(-50%, -50%); opacity: 0.34; } .classified-object > span { position: absolute; left: 50%; bottom: 85px; transform: translateX(-50%); font-family: var(--font-ui); font-size: 18px; letter-spacing: 0.11em; } .classified-object > strong { position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%); color: var(--theme-hot); font-family: var(--font-ui); font-size: 29px; } .classified-orbit { position: absolute; left: 50%; top: 47%; border: 1px solid rgba(var(--theme-rgb),0.18); border-radius: 50%; } .orbit-one { width: 320px; height: 320px; margin: -160px 0 0 -160px; } .orbit-two { width: 420px; height: 420px; margin: -210px 0 0 -210px; border-style: dashed; animation: classifiedSpin 35s linear infinite; } @keyframes classifiedSpin { to { transform: rotate(360deg); } } /* ================================================================ EXIT ================================================================ */ .exit-section { position: relative; min-height: 680px; display: flex; align-items: center; overflow: hidden; background: #ece8df; color: #0a0a0a; } .exit-background { position: absolute; left: -3vw; bottom: -8vw; color: rgba(0,0,0,0.035); font-family: var(--font-ui); font-size: 46vw; font-weight: 1000; line-height: 0.7; } .exit-content { position: relative; z-index: 2; } .exit-content > span { font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.1em; } .exit-content h2 { margin: 15px 0; font-family: var(--font-ui); font-size: clamp(100px, 11vw, 210px); line-height: 0.74; letter-spacing: -0.07em; } .exit-content h2 em { display: block; color: var(--theme-hot); background: var(--theme-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: normal; } .exit-content p { font-size: 21px; } .exit-content a { display: inline-flex; margin-top: 18px; padding: 13px 18px; border: 1px solid #171717; font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.08em; } .exit-afterthought { display: block; margin-top: 24px; font-family: var(--font-serif); font-size: 17px; transform: rotate(-3deg); } /* ================================================================ FOOTER ================================================================ */ .site-footer { background: #020202; } .footer-status { min-height: 58px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #928c95; } .footer-main { display: grid; grid-template-columns: repeat(3, 1fr); } .footer-block { min-height: 215px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); } .footer-block:last-child { border-right: 0; } .footer-block > span { color: #918b94; font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.08em; } .footer-harrow { width: min(250px, 85%); } .footer-bytes { width: min(260px, 90%); } .footer-redacted { font-family: var(--font-ui); font-size: 24px; } .footer-block small { font-size: 16px; } .footer-bottom { min-height: 64px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #87818a; } /* ================================================================ READER ================================================================ */ .hellbox-reader { position: fixed; inset: 0; z-index: 2000; display: none; background: #020202; color: #fff; } .hellbox-reader[aria-hidden="false"], .hellbox-reader.active { display: block; } .reader-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; min-height: 76px; padding: 0 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(2,2,2,0.94); } .reader-brand { display: flex; align-items: center; gap: 12px; } .reader-brand img { width: 42px; height: 42px; object-fit: contain; } .reader-brand span { display: block; color: var(--theme-hot); font-family: var(--font-ui); font-size: 13px; font-weight: 900; letter-spacing: 0.08em; } .reader-brand strong { font-family: var(--font-ui); font-size: 18px; } .reader-counter { display: flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: 0.07em; } .reader-controls { display: flex; justify-content: flex-end; gap: 7px; } .reader-controls button, .reader-bottom button { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); background: #090909; color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 900; letter-spacing: 0.07em; cursor: pointer; } #readerClose { width: 40px; padding: 0; font-size: 24px; } .reader-stage { position: absolute; inset: 76px 0 0; overflow: auto; background: radial-gradient( circle at center, #101012, #020202 68% ); } .reader-session-status { position: fixed; z-index: 4; left: 20px; top: 94px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(0,0,0,0.75); color: #9b959d; font-family: var(--font-ui); font-size: 13px; font-weight: 900; letter-spacing: 0.07em; } .reader-paged { min-height: calc(100vh - 76px); padding: 40px 100px 90px; display: flex; align-items: center; justify-content: center; } .reader-page-frame { max-width: 100%; max-height: calc(100vh - 160px); } .reader-page-image { display: block; margin: auto; box-shadow: 0 30px 90px rgba(0,0,0,0.75); } .reader-page-image.fit-page { max-width: 100%; max-height: calc(100vh - 170px); } .reader-page-image.fit-width { width: min(1400px, 100%); max-height: none; } .reader-arrow { position: fixed; z-index: 4; top: 50%; width: 58px; height: 90px; border: 1px solid var(--line); background: rgba(0,0,0,0.6); color: #fff; font-size: 42px; cursor: pointer; } .reader-arrow-left { left: 20px; } .reader-arrow-right { right: 20px; } .reader-continuous { display: none; width: min(1400px, calc(100vw - 100px)); margin: 0 auto; padding: 50px 0 130px; } .reader-continuous.active { display: block; } .reader-continuous img { width: 100%; margin: 0 auto 30px; } .reader-bottom { position: fixed; z-index: 5; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 7px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: rgba(0,0,0,0.88); } .reader-bottom span { min-width: 85px; text-align: center; font-family: var(--font-ui); font-size: 14px; font-weight: 900; } .reader-loading, .reader-error { position: absolute; inset: 0; z-index: 8; display: none; align-items: center; justify-content: center; background: rgba(2,2,2,0.92); } .reader-loading.active, .reader-error.active { display: flex; } .reader-loading > div, .reader-error > div { width: min(520px, calc(100vw - 60px)); padding: 42px; border: 1px solid var(--line); background: #09090a; } .reader-loading span, .reader-error span { color: var(--theme-hot); font-family: var(--font-ui); font-size: 14px; font-weight: 900; letter-spacing: 0.08em; } .reader-loading h3, .reader-error h3 { margin: 10px 0; font-family: var(--font-ui); font-size: 46px; } .reader-loading p, .reader-error p { color: #aaa5ad; font-size: 17px; } .reader-error button { min-height: 44px; padding: 0 18px; border: 1px solid var(--theme); background: transparent; color: #fff; cursor: pointer; } /* ================================================================ LARGE DESKTOP ================================================================ */ @media (min-width: 1700px) { :root { --shell: min(1700px, calc(100vw - 110px)); } body { font-size: 19px; } .eyebrow, .section-number, .system-label, .header-nav, .header-network { font-size: 16px; } .hero-content { grid-template-columns: minmax(560px, 720px) minmax(380px, 480px); } } /* ================================================================ TALL DESKTOP / LARGE VERTICAL DISPLAY THIS IS THE SCREEN SHOWN IN YOUR SCREENSHOTS ================================================================ */ @media (min-width: 820px) and (max-aspect-ratio: 4 / 5) { :root { --shell: calc(100vw - 46px); --header-h: 78px; } body { font-size: 19px; } small { font-size: 15px; } .eyebrow, .section-number, .system-label, .hero-meta, .transmission-label, .header-network, .footer-status, .footer-bottom, .terminal-top span, .press-mini-header, .press-mini-body span, .machine-console-top, .press-state span, .classified-label { font-size: 15px; } /* HEADER */ .site-header { grid-template-columns: auto 1fr auto; padding: 0 22px; } .header-nav { display: none; } .header-network { justify-self: center; } .header-brand { font-size: 15px; } /* HERO */ .hero { min-height: 900px; height: 100svh; } .hero-art img { object-position: 58% center; } .hero-blackout { background: linear-gradient( 90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.54) 36%, rgba(0,0,0,0.14) 72% ), linear-gradient( 180deg, rgba(0,0,0,0.45), transparent 30%, transparent 65%, rgba(0,0,0,0.9) ); } .hero-inner { padding-top: calc(var(--header-h) + 55px); padding-bottom: 108px; } .hero-brand { width: min(460px, 52vw); } .hero-content { grid-template-columns: minmax(420px, 0.95fr) minmax(320px, 0.75fr); gap: 28px; } .hero-copy h1 { font-size: clamp(88px, 11vw, 126px); } .hero-description { font-size: 19px; } .hero-transmission { align-self: end; } .hero-meta { font-size: 13px; } .hero-scroll-note { display: none; } /* MANIFESTO */ .manifesto-section { padding: 88px 0 82px; } .manifesto-layout { grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr); gap: 46px; } .manifesto-title h2 { font-size: clamp(62px, 9vw, 94px); } .manifesto-body { padding-top: 12px; font-size: 18px; } .manifesto-lead { font-size: 22px; } .manifesto-brand-ghost { width: 45vw; right: -25px; bottom: -20px; } /* ARCHIVE */ .archive-section { padding: 88px 0 90px; } .section-heading { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr); gap: 30px; margin-bottom: 40px; } .section-heading h2 { font-size: clamp(65px, 10vw, 102px); } .section-intro { font-size: 17px; } .terminal-main { grid-template-columns: 120px 1fr 220px; padding: 34px; gap: 26px; } .terminal-emblem { width: 115px; height: 115px; } .terminal-copy h3 { font-size: 40px; } .harrow-sticky-note { width: 210px; min-height: 145px; } /* THEORY */ .evidence-section { padding: 88px 0 80px; } .obsession-wall { aspect-ratio: 16 / 9; } .obsession-wall-art { object-fit: contain; } /* PRESS */ .press-section { min-height: auto; padding: 88px 0 92px; } .press-stage { grid-template-columns: minmax(300px, 0.58fr) minmax(500px, 1.42fr); gap: 28px; align-items: center; } .press-copy h2 { font-size: clamp(62px, 9vw, 92px); } .press-lead { font-size: 19px; } .press-machine-console { left: 0; bottom: 1%; width: 48%; } .press-state-rail { margin-top: 40px; } /* HARROW IMPORTANT: DO NOT STACK THIS ON A LARGE VERTICAL MONITOR */ .harrow-section { padding: 88px 0 92px; } .harrow-layout { grid-template-columns: minmax(330px, 0.78fr) minmax(430px, 1.22fr); gap: 36px; } .harrow-art-column { width: 100%; } .harrow-file { width: 100%; max-width: none; } .harrow-wordmark-button { width: min(420px, 88%); margin-top: 22px; } .harrow-intro { font-size: 19px; } .harrow-data { margin: 28px 0; } .self-review { padding: 20px; } .self-review p { font-size: 20px; } .harrow-love-note { margin-top: 24px; padding: 20px; } .harrow-social-row { margin-top: 24px; } /* KEEP UP */ .signals-section { padding: 88px 0 92px; } .signals-grid { grid-template-columns: 1fr 1fr; } .signal-card { min-height: 175px; border-bottom: 1px solid var(--line); } .signal-card:nth-child(2) { border-right: 0; } /* CLASSIFIED ALSO REMAINS TWO-COLUMN */ .classified-section { padding: 88px 0 95px; } .classified-layout { grid-template-columns: minmax(340px, 0.72fr) minmax(440px, 1.28fr); gap: 34px; } .classified-copy h2 { font-size: clamp(62px, 9vw, 92px); } .classified-object { min-height: 470px; } .classified-object img { width: 180px; } .orbit-one { width: 290px; height: 290px; margin: -145px 0 0 -145px; } .orbit-two { width: 380px; height: 380px; margin: -190px 0 0 -190px; } /* EXIT */ .exit-section { min-height: 620px; } /* FOOTER */ .footer-block { min-height: 190px; } } /* ================================================================ NARROW LANDSCAPE / TABLET ================================================================ */ @media (max-width: 1100px) and (min-aspect-ratio: 4 / 5) { :root { --shell: calc(100vw - 48px); } .header-nav { display: none; } .site-header { grid-template-columns: auto 1fr auto; } .header-network { justify-self: center; } .hero-content { grid-template-columns: minmax(430px, 1fr) minmax(300px, 0.7fr); gap: 35px; } .press-stage { grid-template-columns: minmax(300px, 0.65fr) minmax(520px, 1.35fr); gap: 30px; } .harrow-layout { grid-template-columns: minmax(340px, 0.75fr) 1fr; gap: 42px; } } /* ================================================================ MOBILE ================================================================ */ @media (max-width: 760px) { :root { --shell: calc(100vw - 34px); --header-h: 64px; } body { font-size: 17px; } .site-vignette { box-shadow: inset 0 0 80px rgba(0,0,0,0.65); } .site-header { grid-template-columns: auto 1fr auto; gap: 10px; padding: 0 13px; } .header-brand span { display: none; } .header-emblem { width: 36px; height: 36px; } .header-nav, .header-network { display: none; } .wallet-button { min-height: 42px; padding: 0 12px; font-size: 12px; } .section-number, .eyebrow, .system-label { font-size: 12px; } .hero { min-height: 820px; height: 100svh; } .hero-art img { object-position: 64% center; } .hero-blackout { background: linear-gradient( 180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.32) 40%, rgba(0,0,0,0.92) 76%, #020202 ); } .hero-inner { padding-top: calc(var(--header-h) + 36px); padding-bottom: 95px; } .hero-brand { width: min(380px, 80vw); } .hero-content { grid-template-columns: 1fr; gap: 24px; } .hero-copy h1 { margin: 10px 0 18px; font-size: clamp(65px, 19vw, 92px); } .hero-description { font-size: 17px; } .hero-actions { gap: 8px; flex-wrap: wrap; } .button-primary, .button-ghost { min-height: 46px; padding: 0 14px; font-size: 12px; } .hero-transmission { width: 100%; } .transmission-header { font-size: 11px; } .transmission-body { padding: 17px; } .transmission-body strong { font-size: 24px; } .transmission-body small { font-size: 13px; } .hero-meta { bottom: 17px; gap: 10px; flex-wrap: wrap; font-size: 10px; } .hero-meta span:nth-child(2) { display: none; } .hero-scroll-note { display: none; } .manifesto-section, .archive-section, .evidence-section, .press-section, .harrow-section, .signals-section, .classified-section { padding: 78px 0; } .manifesto-layout, .section-heading, .press-stage, .harrow-layout, .classified-layout { grid-template-columns: 1fr; } .manifesto-title h2 { font-size: clamp(52px, 15vw, 78px); } .manifesto-body { font-size: 17px; } .manifesto-lead { font-size: 21px; } .section-heading { gap: 20px; margin-bottom: 36px; } .section-heading h2 { font-size: clamp(58px, 18vw, 90px); } .section-intro { font-size: 17px; } .terminal-top { padding: 14px; align-items: flex-start; } .terminal-main { padding: 28px 18px; grid-template-columns: 78px 1fr; gap: 18px; } .terminal-emblem { width: 78px; height: 78px; padding: 10px; } .terminal-copy h3 { font-size: 34px; } .harrow-sticky-note { grid-column: 1 / -1; justify-self: center; width: min(260px, 92%); } .collection-summary { grid-template-columns: 1fr 1fr; } .collection-summary > div:nth-child(2) { border-right: 0; } .obsession-wall { width: calc(100% + 34px); margin-left: -17px; aspect-ratio: 16 / 9; } .obsession-hotspot { width: 38px; height: 38px; } .obsession-hotspot > span { display: none; } .obsession-track { min-height: 46px; font-size: 11px; } .press-copy h2 { font-size: clamp(60px, 18vw, 88px); } .press-machine-console { left: 0; bottom: 0; width: 70%; } .machine-console-readouts { grid-template-columns: 1fr 1fr; } .press-lever { right: 0; bottom: 8%; width: 68px; height: 144px; } .press-state-rail { margin-top: 35px; overflow-x: auto; grid-template-columns: repeat(5, minmax(105px, 1fr)); } .harrow-data { grid-template-columns: 1fr; } .harrow-data > div, .harrow-data > div:nth-child(even) { border-right: 0; } .signals-grid { grid-template-columns: 1fr; } .signal-card { min-height: 150px; border-right: 0; border-bottom: 1px solid var(--line); } .classified-copy h2 { font-size: clamp(65px, 18vw, 92px); } .classified-object { min-height: 420px; } .classified-object img { width: 150px; } .orbit-one { width: 230px; height: 230px; margin: -115px 0 0 -115px; } .orbit-two { width: 320px; height: 320px; margin: -160px 0 0 -160px; } .exit-section { min-height: 600px; } .exit-content h2 { font-size: clamp(82px, 25vw, 130px); } .footer-status { padding: 16px; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 11px; } .footer-main { grid-template-columns: 1fr; } .footer-block { min-height: 160px; padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); } .footer-bottom { padding: 18px 20px; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 11px; } .harrow-orb { right: 17px; bottom: 17px; width: 58px; height: 58px; } .discovery-counter { right: 18px; bottom: 87px; font-size: 11px; } .harrow-whisper { bottom: 19px; max-width: calc(100vw - 105px); padding: 11px 13px; } .lair-drawer-content { padding: 45px 24px; } .reader-header { min-height: 64px; padding: 0 10px; grid-template-columns: 1fr auto; } .reader-counter { display: none; } .reader-controls button:not(#readerClose) { display: none; } .reader-stage { inset: 64px 0 0; } .reader-paged { padding: 20px 44px 90px; } .reader-arrow { width: 38px; height: 70px; font-size: 30px; } .reader-arrow-left { left: 3px; } .reader-arrow-right { right: 3px; } .reader-bottom button:first-child, .reader-bottom button:last-child { display: none; } } /* ================================================================ VERY SMALL MOBILE ================================================================ */ @media (max-width: 430px) { .hero-copy h1 { font-size: 64px; } .manifesto-title h2 { font-size: 52px; } .section-heading h2 { font-size: 58px; } .press-copy h2 { font-size: 62px; } .terminal-main { grid-template-columns: 1fr; } .terminal-emblem { width: 74px; height: 74px; } .harrow-sticky-note { justify-self: start; } .press-machine-console { width: 76%; } } /* ================================================================ HOVER-FREE DEVICES ================================================================ */ @media (hover: none) { .obsession-hotspot > span { display: none; } .cursor-burn { display: none; } } /* ================================================================ REDUCED MOTION ================================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ================================================================ PRODUCTION PRECISION PASS 03A THEORY COUNT — SURGICAL FIX ONLY Purpose: - Remove the floating "47*" correction. - Keep the original "A" in the headline. - Attach a restrained handwritten "47" directly to the A. - Do not alter any other section, layout, breakpoint, image, hotspot, Press control, or interaction. ================================================================ */ #theoryCorrection { display: block !important; } .vandalized-word { position: relative; display: inline-block; isolation: isolate; } /* subtle red strike through the original A */ .vandalized-word::after { content: ""; position: absolute; z-index: 2; left: -5%; top: 53%; width: 112%; height: 4px; background: var(--red-hot); transform: rotate(-10deg); transform-origin: center; pointer-events: none; } /* Harrow's correction stays physically attached to the A */ .vandalized-word::before { content: "47"; position: absolute; z-index: 3; left: 50%; top: -0.62em; transform: translateX(-48%) rotate(-8deg); color: var(--red-hot); font-family: var(--font-serif); font-size: 0.31em; font-weight: 700; line-height: 1; letter-spacing: -0.05em; white-space: nowrap; pointer-events: none; } /* keep the correction readable but restrained on narrow screens */ @media (max-width: 760px) { .vandalized-word::after { height: 3px; } .vandalized-word::before { top: -0.58em; font-size: 0.34em; } } /* ================================================================ PRODUCTION PRECISION PASS 04 HERO SCENE COORDINATE SYSTEM + TALL-DESKTOP COMPOSITION The hero artwork is now the master coordinate plane. Hotspots live inside .hero-scene and use percentages measured directly from the 1672 × 941 production artwork. Current production priority: - Tall / rotated desktop displays first. - Landscape desktop, tablet and mobile will receive their own framing passes after this composition is approved. ================================================================ */ /* --------------------------------------------------------------- HERO SCENE WRAPPER --------------------------------------------------------------- */ .hero-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-scene .hero-art { position: absolute; inset: 0; z-index: 0; } .hero-scene .hero-blackout { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* --------------------------------------------------------------- HOTSPOT PRECISION SYSTEM Coordinates below are measured against the original hero art. --------------------------------------------------------------- */ .lair-hotspot { display: grid; place-items: center; transform: translate(-50%, -50%); isolation: isolate; } .lair-hotspot:hover { transform: translate(-50%, -50%) scale(1.1); } .hotspot-mark { position: relative; z-index: 2; display: block; line-height: 1; pointer-events: none; } .hotspot-label { position: absolute; z-index: 4; left: 50%; top: calc(100% + 13px); min-width: max-content; padding: 7px 10px 6px; opacity: 0; transform: translate(-50%, 5px); pointer-events: none; white-space: nowrap; border: 1px solid rgba(var(--theme-hot-rgb),0.42); background: linear-gradient( 90deg, rgba(var(--theme-rgb),0.13), rgba(0,0,0,0) 55% ), rgba(2,2,2,0.94); color: rgba(255,255,255,0.94); font-family: var(--font-ui); font-size: 12px; font-weight: 900; line-height: 1; letter-spacing: 0.09em; text-transform: uppercase; box-shadow: 0 12px 34px rgba(0,0,0,0.5), 0 0 24px rgba(var(--theme-rgb),0.08); transition: opacity 0.16s ease, transform 0.16s ease; } .lair-hotspot:hover .hotspot-label, .lair-hotspot:focus-visible .hotspot-label { opacity: 1; transform: translate(-50%, 0); } .hotspot-pages .hotspot-label, .hotspot-redacted .hotspot-label { top: auto; bottom: calc(100% + 13px); transform: translate(-50%, -5px); } .hotspot-pages:hover .hotspot-label, .hotspot-pages:focus-visible .hotspot-label, .hotspot-redacted:hover .hotspot-label, .hotspot-redacted:focus-visible .hotspot-label { transform: translate(-50%, 0); } /* MASTER ART COORDINATES 1672 × 941 source image */ .hotspot-cabal { left: 62.1%; top: 8.6%; } .hotspot-monitor { left: 39.0%; top: 11.6%; } .hotspot-harrow { left: 82.1%; top: 40.7%; } .hotspot-pages { left: 72.2%; top: 65.9%; } .hotspot-bike { left: 20.1%; top: 37.0%; } .hotspot-redacted { left: 9.5%; top: 69.7%; } /* --------------------------------------------------------------- TALL DESKTOP / ROTATED WIDESCREEN --------------------------------------------------------------- */ @media (min-width: 820px) and (max-aspect-ratio: 4 / 5) { .hero { min-height: 100svh; height: auto; padding-bottom: 0; overflow: hidden; background: radial-gradient( circle at 50% 76%, rgba(var(--theme-rgb),0.055), transparent 32% ), #020202; } /* The scene gets its natural 16:9 shape. Nothing is cropped on this display class. */ .hero-scene { position: relative; inset: auto; width: 100%; aspect-ratio: 1672 / 941; margin-top: var(--header-h); border-bottom: 1px solid rgba(255,255,255,0.09); box-shadow: 0 38px 90px rgba(0,0,0,0.52); } .hero-scene::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 18%; pointer-events: none; background: linear-gradient( 180deg, transparent, rgba(2,2,2,0.22) 44%, rgba(2,2,2,0.92) 100% ); } .hero-art img { width: 100%; height: 100%; object-fit: contain; object-position: center center; /* The production master is intentionally dark. Lift presentation only. */ filter: brightness(1.08) contrast(1.02) saturate(1.02); } /* The source art is already dark and detailed. Vertical displays no longer bury it under the heavy desktop-left blackout. */ .hero-blackout { background: linear-gradient( 180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.01) 48%, rgba(0,0,0,0.26) 100% ); } /* Lower control deck. It deliberately occupies the remaining vertical screen instead of forcing the 16:9 art to impersonate a portrait. */ .hero-inner { position: relative; z-index: 3; width: var(--shell); height: auto; min-height: calc(100svh - var(--header-h) - 56.28vw); margin: 0 auto; padding: clamp(58px, 5.5vw, 88px) 0 118px; display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; } .hero-brand { width: min(360px, 42vw); margin: 0; } .hero-wordmark { width: 100%; max-height: 118px; object-fit: contain; object-position: left center; } .hero-content { width: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr); gap: clamp(34px, 4vw, 58px); align-items: end; } .hero-copy { max-width: 680px; } .hero-copy h1 { margin: 16px 0 24px; font-size: clamp(82px, 10vw, 116px); line-height: 0.79; } .hero-description { font-size: 18px; } .hero-actions { margin-top: 27px; } .hero-transmission { width: 100%; max-width: 440px; justify-self: end; align-self: end; background: linear-gradient( 145deg, rgba(var(--theme-rgb),0.035), transparent 42% ), rgba(4,4,5,0.84); } .transmission-body strong { font-size: clamp(25px, 2.8vw, 34px); } .hero-harrow-signature { width: 150px; } /* Metadata remains at the true bottom of the hero. */ .hero-meta { left: 50%; bottom: 27px; width: var(--shell); transform: translateX(-50%); font-size: 12px; } .hero-scroll-note { display: none; } /* Hotspots stay quiet until approached. They are centered directly over their source objects. */ .lair-hotspot { width: 34px; height: 34px; border-color: rgba(255,255,255,0.46); background: rgba(0,0,0,0.52); box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 22px rgba(var(--theme-rgb),0.07); } .lair-hotspot::after { inset: -9px; border-color: rgba(var(--theme-hot-rgb),0.19); } .lair-hotspot:hover, .lair-hotspot:focus-visible { border-color: var(--theme-hot); background: rgba(var(--theme-hot-rgb),0.9); box-shadow: 0 0 34px rgba(var(--theme-rgb),0.42); } } /* --------------------------------------------------------------- SAFETY FOR SHORTER TALL-DESKTOP WINDOWS --------------------------------------------------------------- */ @media (min-width: 820px) and (max-aspect-ratio: 4 / 5) and (max-height: 1250px) { .hero-inner { min-height: 520px; padding-top: 52px; } .hero-copy h1 { font-size: clamp(72px, 9vw, 98px); } } /* ================================================================ PRODUCTION PRECISION PASS 04 TALL-DESKTOP FULL-SITE ART DIRECTION Scope: - Vertical / rotated widescreen desktop only. - No landscape, tablet or mobile tuning yet. - Preserve functionality; elevate composition and authorship. ================================================================ */ @media (min-width: 820px) and (max-aspect-ratio: 4 / 5) { :root { --vertical-shell: calc(100vw - 38px); --harrow-grid: rgba(var(--theme-hot-rgb),0.055); --harrow-paper: #eee9df; --harrow-ink: #111112; } /* ------------------------------------------------------------ GLOBAL VERTICAL RHYTHM ------------------------------------------------------------ */ .section-shell { width: var(--vertical-shell); } .section-number { position: relative; min-height: 32px; margin-bottom: 34px; padding: 6px 10px 5px; border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.028); box-shadow: inset 3px 0 0 rgba(var(--theme-hot-rgb),0.42); } .section-number::after { content: "HARROW // WORKING NOTES"; margin-left: 18px; color: rgba(255,255,255,0.25); font-size: 10px; letter-spacing: 0.14em; } .eyebrow { letter-spacing: 0.12em; } /* ------------------------------------------------------------ HEADER — MAKE AUTHORSHIP IMPOSSIBLE TO MISS ------------------------------------------------------------ */ .site-header { height: var(--header-h); border-bottom-color: rgba(var(--theme-hot-rgb),0.18); background: linear-gradient(90deg, rgba(var(--theme-rgb),0.035), transparent 26%), rgba(2,2,2,0.94); box-shadow: 0 10px 32px rgba(0,0,0,0.34); } .header-brand span { position: relative; color: rgba(255,255,255,0.92); letter-spacing: 0.105em; } .header-brand span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: linear-gradient(90deg, var(--theme), transparent 72%); opacity: 0.7; } /* ------------------------------------------------------------ HERO — REMOVE DEAD AIR, MAKE THE CONTROL DECK FEEL INTENTIONAL ------------------------------------------------------------ */ .hero { min-height: 0; height: auto; overflow: hidden; background: radial-gradient(circle at 78% 80%, rgba(var(--theme-rgb),0.08), transparent 24%), radial-gradient(circle at 15% 85%, rgba(198,32,32,0.035), transparent 20%), #020202; } .hero-scene { margin-top: var(--header-h); box-shadow: 0 28px 80px rgba(0,0,0,0.72), inset 0 -1px 0 rgba(255,255,255,0.08); } .hero-scene::after { height: 12%; background: linear-gradient(180deg, transparent, rgba(2,2,2,0.85)); } .hero-inner { min-height: 0; width: var(--vertical-shell); margin: 0 auto; padding: 0 0 94px; display: block; } .hero-brand { position: relative; z-index: 6; width: min(330px, 38vw); margin-top: -34px; margin-bottom: 28px; padding: 10px 12px 8px 0; filter: drop-shadow(0 18px 26px rgba(0,0,0,0.65)); } .hero-brand::before { content: "HARROW // LEFT THIS HERE"; position: absolute; left: 5px; top: calc(100% - 1px); color: rgba(255,255,255,0.33); font-family: var(--font-ui); font-size: 9px; font-weight: 900; letter-spacing: 0.12em; } .hero-content { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.68fr); gap: 34px; align-items: end; } .hero-copy { position: relative; max-width: 700px; padding-left: 4px; } .hero-copy::before { content: ""; position: absolute; left: -15px; top: 4px; bottom: 2px; width: 2px; background: linear-gradient(180deg, var(--theme-hot), rgba(var(--theme-hot-rgb),0.06)); box-shadow: 0 0 18px rgba(var(--theme-rgb),0.2); } .hero-copy h1 { margin: 13px 0 22px; font-size: clamp(80px, 9.6vw, 112px); text-shadow: 0 18px 50px rgba(0,0,0,0.55); } .hero-transmission { max-width: 455px; border-color: rgba(var(--theme-hot-rgb),0.28); background: linear-gradient(135deg, rgba(var(--theme-rgb),0.07), transparent 40%), rgba(4,4,5,0.9); box-shadow: 0 28px 72px rgba(0,0,0,0.55), 0 0 36px rgba(var(--theme-rgb),0.07); } .hero-meta { bottom: 23px; width: var(--vertical-shell); color: rgba(255,255,255,0.46); } /* ------------------------------------------------------------ 02 // THE PROBLEM — HARROW'S WORKING NOTES, NOT A CORPORATE PANEL ------------------------------------------------------------ */ .manifesto-section { position: relative; isolation: isolate; padding: 92px 0 96px; overflow: hidden; color: var(--harrow-ink); background: linear-gradient(90deg, rgba(198,32,32,0.055) 0 2px, transparent 2px) 54px 0 / 100% 100%, repeating-linear-gradient(0deg, transparent 0 31px, rgba(0,0,0,0.025) 31px 32px), radial-gradient(circle at 86% 76%, rgba(var(--theme-rgb),0.1), transparent 22%), var(--harrow-paper); } .manifesto-section::before { content: "HARROW // WHY THIS EXISTS"; position: absolute; z-index: -1; right: -42px; top: 138px; color: rgba(0,0,0,0.035); font-family: var(--font-ui); font-size: 108px; font-weight: 1000; line-height: 0.82; letter-spacing: -0.055em; transform: rotate(90deg); transform-origin: top right; white-space: nowrap; } .manifesto-section::after { content: "HARROW // SOURCE MATERIAL"; position: absolute; right: 34px; bottom: 24px; padding: 5px 9px; border: 2px solid rgba(198,32,32,0.36); color: rgba(198,32,32,0.52); font-family: var(--font-ui); font-size: 12px; font-weight: 1000; letter-spacing: 0.12em; transform: rotate(-3deg); } .manifesto-section .section-number { color: rgba(17,17,18,0.52); border-color: rgba(17,17,18,0.12); background: rgba(255,255,255,0.16); box-shadow: inset 3px 0 0 rgba(198,32,32,0.48); } .manifesto-section .section-number::after { color: rgba(17,17,18,0.24); } .manifesto-layout { grid-template-columns: minmax(0, 0.88fr) minmax(390px, 1.12fr); gap: 58px; align-items: start; } .manifesto-title { position: relative; padding: 8px 0 18px; } .manifesto-title::after { content: "PULSECHAIN DID THIS."; display: inline-block; margin-top: 28px; padding: 7px 11px 6px; border: 2px solid rgba(198,32,32,0.62); color: rgba(198,32,32,0.82); font-family: var(--font-ui); font-size: 13px; font-weight: 1000; letter-spacing: 0.12em; transform: rotate(-1.8deg); } .manifesto-title h2 { max-width: 600px; font-size: clamp(68px, 9.8vw, 108px); line-height: 0.78; letter-spacing: -0.065em; } .manifesto-body { position: relative; margin-top: 8px; padding: 30px 34px 34px; border: 1px solid rgba(17,17,18,0.13); border-left: 5px solid rgba(17,17,18,0.88); background: rgba(255,255,255,0.23); box-shadow: 14px 18px 30px rgba(0,0,0,0.07); transform: rotate(0.25deg); } .manifesto-body::before { content: "HARROW // PERSONAL NOTES"; position: absolute; top: -13px; right: 22px; padding: 5px 8px; background: var(--harrow-ink); color: #fff; font-family: var(--font-ui); font-size: 10px; font-weight: 900; letter-spacing: 0.11em; } .manifesto-lead { font-size: 23px; line-height: 1.38; } .admin-note { margin-top: 34px; transform: rotate(-2.1deg); box-shadow: 12px 18px 30px rgba(0,0,0,0.2); } .admin-note::before { content: ""; position: absolute; width: 13px; height: 13px; left: 50%; top: 8px; border-radius: 50%; background: #5d1616; box-shadow: 0 2px 4px rgba(0,0,0,0.45); transform: translateX(-50%); } .manifesto-brand-ghost { display: none; } /* ------------------------------------------------------------ 03 // YOUR STUFF — HARROW'S CHAIN TERMINAL ------------------------------------------------------------ */ .archive-section { position: relative; isolation: isolate; padding: 96px 0 104px; background: linear-gradient(var(--harrow-grid) 1px, transparent 1px), linear-gradient(90deg, var(--harrow-grid) 1px, transparent 1px), radial-gradient(circle at 8% 18%, rgba(var(--theme-rgb),0.15), transparent 25%), radial-gradient(circle at 90% 75%, rgba(198,32,32,0.06), transparent 22%), #040405; background-size: 42px 42px, 42px 42px, auto, auto, auto; } .archive-section::before { content: "HARROW // COLLECTION TERMINAL"; position: absolute; top: 42px; right: 24px; color: rgba(var(--theme-hot-rgb),0.18); font-family: var(--font-ui); font-size: 18px; font-weight: 1000; letter-spacing: 0.18em; transform: rotate(-1deg); } .archive-heading { align-items: end; margin-bottom: 44px; } .archive-heading h2 { text-shadow: 0 0 44px rgba(var(--theme-rgb),0.18); } .archive-terminal { position: relative; border-color: rgba(var(--theme-hot-rgb),0.28); background: linear-gradient(135deg, rgba(var(--theme-rgb),0.045), transparent 32%), linear-gradient(315deg, rgba(198,32,32,0.025), transparent 28%), #070708; box-shadow: 0 34px 90px rgba(0,0,0,0.72), 0 0 55px rgba(var(--theme-rgb),0.1); } .archive-terminal::before { content: "PRIVATE NODE // HARROW ACCESS"; position: absolute; z-index: 8; left: 26px; top: -15px; padding: 6px 10px; border: 1px solid rgba(var(--theme-hot-rgb),0.35); background: #050506; color: var(--theme-hot); font-family: var(--font-ui); font-size: 10px; font-weight: 1000; letter-spacing: 0.12em; } .terminal-top { background: rgba(255,255,255,0.018); } .terminal-main { min-height: 300px; grid-template-columns: 126px 1fr 218px; gap: 30px; padding: 42px 36px 38px; } .terminal-emblem { position: relative; width: 120px; height: 120px; border-color: rgba(var(--theme-hot-rgb),0.3); box-shadow: inset 0 0 24px rgba(var(--theme-rgb),0.06); } .terminal-copy > span { color: var(--theme-hot); } .terminal-copy h3 { font-size: 44px; line-height: 0.92; } .harrow-sticky-note { width: 215px; min-height: 152px; transform: rotate(2.4deg); box-shadow: 14px 18px 32px rgba(0,0,0,0.34); } .collection-summary > div { min-height: 112px; background: rgba(255,255,255,0.008); } .collection-summary strong { font-size: 38px; } /* ------------------------------------------------------------ 04 // OBSESSION WALL — TURN THE SECTION INTO THE WALL'S ROOM ------------------------------------------------------------ */ .evidence-section { position: relative; isolation: isolate; padding: 96px 0 94px; background: linear-gradient(31deg, transparent 0 49.7%, rgba(198,32,32,0.07) 49.8% 50.2%, transparent 50.3%), linear-gradient(-19deg, transparent 0 56.7%, rgba(198,32,32,0.055) 56.8% 57.1%, transparent 57.2%), radial-gradient(circle at 50% 55%, rgba(var(--theme-rgb),0.055), transparent 34%), #030303; } .evidence-section::after { content: "DO NOT CLEAN THIS UP."; position: absolute; right: 30px; top: 42px; color: rgba(255,59,47,0.3); font-family: var(--font-serif); font-size: 18px; font-weight: 700; transform: rotate(-4deg); } .evidence-heading { margin-bottom: 34px; } .theory-heading { text-shadow: 0 0 48px rgba(var(--theme-rgb),0.09); } .obsession-wall { width: calc(100% + 20px); margin-left: -10px; border-color: rgba(198,32,32,0.24); box-shadow: 0 38px 100px rgba(0,0,0,0.78), 0 0 52px rgba(198,32,32,0.055); } .obsession-wall-hint { border: 1px solid rgba(255,255,255,0.09); background: rgba(0,0,0,0.78); } .obsession-strip { box-shadow: 0 0 26px rgba(var(--theme-rgb),0.22); } /* ------------------------------------------------------------ 05 // THE PRESS — KEEP THE ASSET, FRAME IT LIKE A WEAPON ------------------------------------------------------------ */ .press-section { position: relative; isolation: isolate; padding: 100px 0 108px; background: radial-gradient(circle at 71% 44%, rgba(var(--theme-rgb),0.12), transparent 28%), radial-gradient(circle at 73% 66%, rgba(255,92,24,0.075), transparent 24%), linear-gradient(120deg, rgba(255,255,255,0.015), transparent 28%), #020202; } .press-section::before { content: "PRESS"; position: absolute; z-index: -1; right: -40px; top: 92px; color: transparent; -webkit-text-stroke: 1px rgba(var(--theme-hot-rgb),0.055); font-family: var(--font-ui); font-size: 255px; font-weight: 1000; line-height: 0.8; letter-spacing: -0.08em; } .press-stage { grid-template-columns: minmax(280px, 0.5fr) minmax(530px, 1.5fr); gap: 24px; align-items: center; } .press-copy { padding-left: 18px; border-left: 2px solid rgba(255,106,26,0.52); } .press-copy::before { content: "HARROW // PUBLISHING ENGINE"; display: block; margin-bottom: 18px; color: rgba(255,106,26,0.58); font-family: var(--font-ui); font-size: 10px; font-weight: 1000; letter-spacing: 0.14em; } .press-copy h2 { font-size: clamp(66px, 9.6vw, 98px); text-shadow: 0 0 42px rgba(255,106,26,0.08); } .press-machine-console { width: 50%; background: rgba(3,3,4,0.91); border-color: rgba(var(--theme-hot-rgb),0.24); box-shadow: 0 18px 48px rgba(0,0,0,0.56); } .press-state-rail { margin-top: 34px; border-color: rgba(255,255,255,0.13); box-shadow: 0 18px 46px rgba(0,0,0,0.32); } .press-state.active { background: linear-gradient(180deg, rgba(var(--theme-rgb),0.08), rgba(var(--theme-rgb),0.015)); } /* ------------------------------------------------------------ 06 // HARROW — THE OPERATOR ------------------------------------------------------------ */ .harrow-section { position: relative; isolation: isolate; overflow: hidden; padding: 102px 0 112px; background: linear-gradient(var(--harrow-grid) 1px, transparent 1px), linear-gradient(90deg, var(--harrow-grid) 1px, transparent 1px), radial-gradient(circle at 15% 24%, rgba(var(--theme-rgb),0.13), transparent 25%), radial-gradient(circle at 81% 66%, rgba(198,32,32,0.055), transparent 23%), #040405; background-size: 48px 48px, 48px 48px, auto, auto, auto; } .harrow-section::before { content: "CREATOR // OPERATOR"; position: absolute; right: 22px; top: 44px; color: rgba(var(--theme-hot-rgb),0.2); font-family: var(--font-ui); font-size: 15px; font-weight: 1000; letter-spacing: 0.16em; } .harrow-background-word { opacity: 0.045; font-size: 31vw; right: -5vw; bottom: -7vw; letter-spacing: -0.08em; } .harrow-layout { grid-template-columns: minmax(330px, 0.7fr) minmax(470px, 1.3fr); gap: 42px; align-items: start; } .harrow-art-column { position: sticky; top: calc(var(--header-h) + 26px); } .harrow-art-frame { position: relative; transform: rotate(-0.8deg); border-color: rgba(var(--theme-hot-rgb),0.28); box-shadow: 0 30px 78px rgba(0,0,0,0.62), 0 0 42px rgba(var(--theme-rgb),0.09); } .harrow-art-frame::before { content: "APPROVED BY HARROW"; position: absolute; z-index: 5; right: 14px; top: 14px; padding: 5px 7px; border: 1px solid rgba(255,59,47,0.5); background: rgba(0,0,0,0.62); color: rgba(255,59,47,0.82); font-family: var(--font-ui); font-size: 9px; font-weight: 1000; letter-spacing: 0.11em; transform: rotate(2deg); } .harrow-profile-card { position: relative; width: 92%; margin: -2px 0 0 5%; transform: rotate(0.7deg); border-color: rgba(255,255,255,0.14); box-shadow: 12px 18px 35px rgba(0,0,0,0.3); } .harrow-file { position: relative; overflow: hidden; padding: 0 0 4px; } .harrow-file::before { content: "100% HARROW"; position: absolute; z-index: 0; right: -20px; top: 170px; color: rgba(255,255,255,0.025); font-family: var(--font-ui); font-size: 140px; font-weight: 1000; line-height: 0.8; letter-spacing: -0.07em; transform: rotate(-7deg); pointer-events: none; } .harrow-file > * { position: relative; z-index: 1; } .harrow-file-top { border-color: rgba(var(--theme-hot-rgb),0.2); } .harrow-wordmark-button { width: min(470px, 94%); margin-top: 18px; filter: drop-shadow(0 0 18px rgba(255,255,255,0.06)); } .harrow-role-list { margin-top: 18px; } .harrow-role-list strong { border-color: rgba(var(--theme-hot-rgb),0.22); background: rgba(var(--theme-rgb),0.035); } .harrow-authorship-declaration { margin: 22px 0 28px; padding: 17px 19px 18px; border-left: 3px solid var(--theme-hot); border-top: 1px solid rgba(var(--theme-hot-rgb),0.15); border-bottom: 1px solid rgba(var(--theme-hot-rgb),0.15); background: linear-gradient(90deg, rgba(var(--theme-rgb),0.09), transparent 68%); transform: rotate(-0.25deg); } .harrow-authorship-declaration span { display: block; margin-bottom: 7px; color: rgba(255,255,255,0.48); font-family: var(--font-ui); font-size: 10px; font-weight: 900; letter-spacing: 0.12em; } .harrow-authorship-declaration strong { display: block; color: #fff; font-family: var(--font-ui); font-size: 18px; font-weight: 1000; line-height: 1.2; letter-spacing: 0.035em; } .harrow-intro { max-width: 720px; font-size: 19px; line-height: 1.52; } .harrow-data { border-color: rgba(var(--theme-hot-rgb),0.16); background: rgba(255,255,255,0.012); } .harrow-data > div { min-height: 94px; background: linear-gradient(135deg, rgba(var(--theme-rgb),0.025), transparent 54%); } .self-review { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.018); } .harrow-love-note { border-left-width: 4px; background: linear-gradient(90deg, rgba(var(--theme-rgb),0.1), rgba(var(--theme-rgb),0.028)); } /* ------------------------------------------------------------ 07 // KEEP UP — OUTGOING SIGNALS, NOT A SOCIAL-LINK GRID ------------------------------------------------------------ */ .signals-section { position: relative; isolation: isolate; padding: 98px 0 106px; background: radial-gradient(circle at 82% 18%, rgba(var(--theme-rgb),0.1), transparent 22%), linear-gradient(90deg, rgba(var(--theme-rgb),0.026) 1px, transparent 1px), #020202; background-size: auto, 58px 100%, auto; } .signals-section::before { content: "OUTGOING // HARROW"; position: absolute; top: 44px; right: 26px; color: rgba(var(--theme-hot-rgb),0.2); font-family: var(--font-ui); font-size: 15px; font-weight: 1000; letter-spacing: 0.15em; } .signal-heading { margin-bottom: 40px; } .signals-grid { gap: 12px; border: 0; background: transparent; } .signal-card { position: relative; min-height: 188px; overflow: hidden; padding: 28px 30px; border: 1px solid rgba(255,255,255,0.12) !important; background: linear-gradient(135deg, rgba(var(--theme-rgb),0.05), transparent 42%), rgba(255,255,255,0.008); box-shadow: 0 18px 46px rgba(0,0,0,0.2); } .signal-card::before { position: absolute; right: 16px; top: 12px; color: rgba(var(--theme-hot-rgb),0.18); font-family: var(--font-ui); font-size: 44px; font-weight: 1000; line-height: 1; } .signal-card:nth-child(1)::before { content: "01"; } .signal-card:nth-child(2)::before { content: "02"; } .signal-card:nth-child(3)::before { content: "03"; } .signal-card:nth-child(4)::before { content: "██"; color: rgba(198,32,32,0.18); } .signal-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32%; height: 2px; background: linear-gradient(90deg, var(--theme), transparent); opacity: 0.55; transition: width 0.2s ease; } .signal-card:hover::after { width: 100%; } .signal-card:hover { transform: translateY(-3px); border-color: rgba(var(--theme-hot-rgb),0.42) !important; background: linear-gradient(135deg, rgba(var(--theme-rgb),0.09), transparent 52%), rgba(255,255,255,0.014); box-shadow: 0 24px 55px rgba(0,0,0,0.28), 0 0 28px rgba(var(--theme-rgb),0.06); } /* ------------------------------------------------------------ 08 // CLASSIFIED — MAKE IT FEEL ACTUALLY OFF-LIMITS ------------------------------------------------------------ */ .classified-section { position: relative; isolation: isolate; padding: 102px 0 110px; background: linear-gradient(28deg, transparent 0 63%, rgba(198,32,32,0.025) 63.2% 63.5%, transparent 63.7%), radial-gradient(circle at 70% 52%, rgba(var(--theme-rgb),0.07), transparent 30%), #030303; } .classified-section::before { content: "ACCESS // NO"; position: absolute; top: 43px; right: 26px; color: rgba(255,59,47,0.26); font-family: var(--font-ui); font-size: 15px; font-weight: 1000; letter-spacing: 0.16em; } .classified-layout { grid-template-columns: minmax(300px, 0.62fr) minmax(500px, 1.38fr); gap: 42px; align-items: center; } .classified-copy { padding-left: 18px; border-left: 2px solid rgba(255,59,47,0.42); } .classified-copy h2 { font-size: clamp(66px, 9.8vw, 102px); } .redaction-lines span { height: 11px; background: linear-gradient(90deg, #0d0d0e, #19191a); box-shadow: inset 0 -1px 0 rgba(255,255,255,0.025); } .classified-object-list button { border-color: rgba(255,255,255,0.13); background: rgba(255,255,255,0.012); } .classified-object { position: relative; min-height: 510px; overflow: hidden; border-color: rgba(var(--theme-hot-rgb),0.19); background: radial-gradient(circle at center, rgba(var(--theme-rgb),0.055), transparent 48%), rgba(255,255,255,0.006); box-shadow: 0 30px 72px rgba(0,0,0,0.42); } .classified-object::after { content: "REDACTED // HARROW"; position: absolute; z-index: 6; left: -10%; right: -10%; top: 47%; padding: 10px 0 9px; background: rgba(3,3,3,0.88); border-top: 1px solid rgba(255,59,47,0.18); border-bottom: 1px solid rgba(255,59,47,0.18); color: rgba(255,59,47,0.36); font-family: var(--font-ui); font-size: 16px; font-weight: 1000; letter-spacing: 0.22em; text-align: center; transform: rotate(-7deg); pointer-events: none; } .classified-object img { width: 195px; filter: drop-shadow(0 0 26px rgba(var(--theme-rgb),0.2)); } /* ------------------------------------------------------------ 09 // EXIT — A PAGE TORN OUT OF HARROW'S NOTEBOOK ------------------------------------------------------------ */ .exit-section { position: relative; isolation: isolate; min-height: 630px; overflow: hidden; color: #0b0b0c; background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(0,0,0,0.022) 38px 39px), radial-gradient(circle at 78% 26%, rgba(198,32,32,0.07), transparent 24%), #ebe7de; border-top: 7px solid #020202; } .exit-section::before { content: "HARROW // DONE TALKING"; position: absolute; top: 30px; right: 34px; color: rgba(0,0,0,0.16); font-family: var(--font-ui); font-size: 14px; font-weight: 1000; letter-spacing: 0.15em; transform: rotate(-2deg); } .exit-section::after { content: "— H"; position: absolute; right: 8%; bottom: 9%; color: rgba(198,32,32,0.16); font-family: var(--font-serif); font-size: 112px; font-weight: 700; transform: rotate(-9deg); } .exit-content { position: relative; z-index: 2; max-width: 760px; } .exit-content h2 { text-shadow: 8px 10px 0 rgba(0,0,0,0.035); } .exit-content a { max-width: 330px; min-height: 52px; padding: 0 18px; border: 1px solid rgba(0,0,0,0.64); background: rgba(255,255,255,0.14); font-size: 12px; letter-spacing: 0.07em; } .exit-content a:hover { background: #0b0b0c; color: #fff; } /* ------------------------------------------------------------ FOOTER — CREDIT THE CORRECT PERSON ------------------------------------------------------------ */ .site-footer { background: linear-gradient(90deg, rgba(var(--theme-rgb),0.025), transparent 28%), #020202; border-top: 1px solid rgba(var(--theme-hot-rgb),0.18); } .footer-status { color: rgba(255,255,255,0.48); background: rgba(255,255,255,0.012); } .footer-block { min-height: 205px; background: linear-gradient(135deg, rgba(255,255,255,0.014), transparent 60%); } .footer-block:first-child { box-shadow: inset 3px 0 0 rgba(var(--theme-hot-rgb),0.28); } .footer-harrow { width: 190px; filter: drop-shadow(0 0 15px rgba(255,255,255,0.045)); } .footer-bottom { min-height: 58px; color: rgba(255,255,255,0.34); background: rgba(0,0,0,0.24); } } /* ================================================================ PRODUCTION PRECISION PASS 05 VERTICAL DESKTOP — ENVIRONMENT AS INTERFACE Locked target: - min-width: 820px - max-aspect-ratio: 4 / 5 Goals: - Cover the hero duplicate-cigarette artifact without new artwork. - Make the "47" correction look physically scribbled. - Map theory hotspots directly to the 1672 × 941 wall artwork. - Rebuild the Press around the original 1536 × 1024 machine art. - The real lever in the artwork is now the interactive lever. - Merge discovery count into Harrow's orb. - Tighten section transitions and remove accidental dead space. ================================================================ */ /* --------------------------------------------------------------- HARROW ORB — ONE OBJECT, NOT TWO FLOATING WIDGETS --------------------------------------------------------------- */ .harrow-orb { overflow: visible; } .harrow-orb-discovery { position: absolute; z-index: 4; right: -8px; top: -9px; min-width: 38px; height: 24px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid rgba(var(--theme-hot-rgb),0.45); border-radius: 999px; background: rgba(2,2,2,0.94); color: rgba(255,255,255,0.66); font-family: var(--font-ui); font-size: 10px; font-weight: 1000; line-height: 1; letter-spacing: 0.06em; box-shadow: 0 7px 20px rgba(0,0,0,0.6), 0 0 18px rgba(var(--theme-rgb),0.12); pointer-events: none; } .harrow-orb-discovery strong { color: var(--theme-hot); font-size: 11px; } /* --------------------------------------------------------------- THEORY HEADING — A PHYSICAL CORRECTION, NOT A CSS LABEL --------------------------------------------------------------- */ .vandalized-word::before, .vandalized-word::after { content: none !important; } .vandalism-theories { display: none !important; } .vandalized-word { position: relative; display: inline-block; isolation: isolate; margin: 0 0.035em; } .theory-original-a { position: relative; z-index: 1; display: inline-block; } .theory-strike { position: absolute; z-index: 4; left: -8%; width: 116%; height: 0.045em; border-radius: 999px; background: var(--red-hot); box-shadow: 0 0 1px rgba(255,59,47,0.72), 0 0 7px rgba(255,59,47,0.13); transform-origin: center; pointer-events: none; } .theory-strike-one { top: 48%; transform: rotate(-11deg); } .theory-strike-two { top: 58%; left: -4%; width: 108%; height: 0.032em; opacity: 0.9; transform: rotate(7deg); } .theory-correction { position: absolute; z-index: 6; left: 48%; top: -0.48em; transform: translateX(-50%) rotate(-8deg); color: var(--red-hot); font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; font-size: 0.34em; font-weight: 900; line-height: 1; letter-spacing: -0.09em; white-space: nowrap; text-shadow: 0.02em 0.02em 0 rgba(0,0,0,0.1); pointer-events: none; } .theory-correction.active { animation: theoryCorrectionJolt 0.42s ease both; } .theory-correction-arrow { position: absolute; z-index: 5; left: 78%; top: 3%; width: 0.24em; height: 0.04em; background: var(--red-hot); transform: translate(-50%, -50%) rotate(63deg); transform-origin: left center; pointer-events: none; } .theory-correction-arrow::after { content: ""; position: absolute; right: -0.015em; top: 50%; width: 0.08em; height: 0.08em; border-right: 0.025em solid var(--red-hot); border-bottom: 0.025em solid var(--red-hot); transform: translateY(-50%) rotate(-45deg); } @keyframes theoryCorrectionJolt { 0% { transform: translateX(-50%) rotate(-8deg) scale(1); } 35% { transform: translateX(-50%) rotate(-11deg) scale(1.14); } 100% { transform: translateX(-50%) rotate(-8deg) scale(1); } } /* --------------------------------------------------------------- THEORY WALL — MASTER COORDINATES FROM THE ORIGINAL 1672 × 941 ART --------------------------------------------------------------- */ .obsession-wall { aspect-ratio: 1672 / 941; } .obsession-wall-art { width: 100%; height: 100%; object-fit: contain; object-position: center; } .obsession-hotspot { transform: translate(-50%, -50%); width: 34px; height: 34px; min-width: 34px; min-height: 34px; border-color: rgba(255,255,255,0.34); background: rgba(2,2,2,0.42); box-shadow: 0 0 0 1px rgba(0,0,0,0.42), 0 0 18px rgba(198,32,32,0.04); } .obsession-hotspot::after { inset: -8px; border-color: rgba(255,59,47,0.22); } .obsession-hotspot:hover, .obsession-hotspot:focus-visible { transform: translate(-50%, -50%) scale(1.14); border-color: rgba(255,59,47,0.86); background: rgba(126,17,17,0.68); box-shadow: 0 0 26px rgba(198,32,32,0.28); } /* Note / subject centers measured from the supplied source art. */ .obsession-hotspot-richard { left: 15.7%; top: 9.4%; } .obsession-hotspot-cabal { left: 49.3%; top: 11.5%; } .obsession-hotspot-sec { left: 73.2%; top: 10.6%; } .obsession-hotspot-interpol { left: 91.1%; top: 10.7%; } .obsession-hotspot-influencers { left: 81.1%; top: 39.8%; } .obsession-hotspot-harrow { left: 49.0%; top: 39.7%; width: 40px; height: 40px; min-width: 40px; min-height: 40px; } .obsession-hotspot-sacrifice { left: 30.6%; top: 58.6%; } .obsession-hotspot-nft { left: 17.4%; top: 62.8%; } /* --------------------------------------------------------------- PRESS — THE ASSET IS THE MACHINE. THE MACHINE IS THE INTERFACE. --------------------------------------------------------------- */ .press-real-lever { background: transparent; } .press-lever-sensor, .press-lever-callout { pointer-events: none; } /* --------------------------------------------------------------- VERTICAL DESKTOP REFINEMENT --------------------------------------------------------------- */ @media (min-width: 820px) and (max-aspect-ratio: 4 / 5) { /* ----------------------------------------------------------- SECTION RHYTHM — LESS EMPTY BLACK, MORE INTENTIONAL TRANSITION ----------------------------------------------------------- */ .archive-section { padding-bottom: 86px; } .evidence-section { padding-top: 84px; padding-bottom: 82px; } .press-section { padding-top: 84px; padding-bottom: 86px; } .harrow-section { padding-top: 88px; padding-bottom: 92px; } .signals-section { padding-top: 86px; padding-bottom: 92px; } .classified-section { padding-top: 88px; padding-bottom: 96px; } /* ----------------------------------------------------------- WALLET TERMINAL — FIX THE CLIPPED "PRIVATE NODE" TAB ----------------------------------------------------------- */ .archive-terminal::before { left: 50%; top: 9px; transform: translateX(-50%); padding: 4px 8px; border-color: rgba(var(--theme-hot-rgb),0.24); background: rgba(5,5,6,0.82); color: rgba(var(--theme-hot-rgb),0.66); font-size: 9px; letter-spacing: 0.1em; } /* ----------------------------------------------------------- THEORY ----------------------------------------------------------- */ .evidence-heading { position: relative; } .theory-heading { overflow: visible; } .obsession-wall { width: 100%; margin-left: 0; border-color: rgba(198,32,32,0.22); } .obsession-hotspot > span { top: calc(100% + 10px); padding: 5px 7px; background: rgba(0,0,0,0.9); border-color: rgba(255,255,255,0.1); font-size: 10px; letter-spacing: 0.06em; } /* ----------------------------------------------------------- PRESS INTRO — AUTHOR'S NOTES ABOVE THE MACHINE, NOT BESIDE IT ----------------------------------------------------------- */ .press-stage { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } .press-copy { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(360px, 1.22fr); column-gap: 46px; row-gap: 0; padding-left: 18px; padding-bottom: 14px; } .press-copy::before { grid-column: 1 / -1; margin-bottom: 15px; } .press-copy > .eyebrow, .press-copy > h2, .press-copy > .press-lead, .press-copy > p:not(.press-lead), .press-copy > .press-object-links { grid-column: 1; } .press-copy h2 { max-width: 390px; margin-bottom: 18px; font-size: clamp(68px, 9.2vw, 96px); } .press-copy > p:not(.press-lead) { margin-top: 7px; margin-bottom: 0; } .press-object-links { margin-top: 23px; margin-bottom: 0; } .press-mini-terminal { grid-column: 2; grid-row: 2 / 8; width: 100%; max-width: 520px; margin: 5px 0 0 auto; align-self: end; border-color: rgba(var(--theme-hot-rgb),0.2); background: linear-gradient( 135deg, rgba(var(--theme-rgb),0.05), transparent 45% ), rgba(7,7,8,0.84); } /* REMOVED 2026-09-06: the entire retired-lever, retired- 1536x1024-coordinate-plane system lived here (.press-machine- zone/.press-machine/.press-machine-art re-forced to the old image's aspect ratio, .machine-field-one/two repositioned for it, .press-machine-status and the whole .press-real-lever hover/pulse interaction -- none of which exist in the current v2 markup at all). It was silently winning the cascade at this breakpoint too. Deleted along with its mobile twin; .press-warning below is real and untouched. */ .press-warning { z-index: 11; right: 1.2%; bottom: 7.4%; padding: 4px 6px; background: rgba(2,2,2,0.68); font-size: 10px; letter-spacing: 0.07em; transform: rotate(-4deg); pointer-events: none; } /* ----------------------------------------------------------- MACHINE CONSOLE — BELOW THE ART, NEVER COVERING IT ----------------------------------------------------------- */ .press-machine-console { position: relative; z-index: 4; left: auto; bottom: auto; width: 100%; margin-top: -3px; display: grid; grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr); border-color: rgba(var(--theme-hot-rgb),0.2); background: linear-gradient( 90deg, rgba(var(--theme-rgb),0.045), transparent 36% ), rgba(4,4,5,0.92); box-shadow: 0 22px 56px rgba(0,0,0,0.42); } .machine-console-top { grid-column: 1 / -1; } .machine-console-message { min-height: 104px; padding: 18px 20px; border-right: 1px solid var(--line); } .machine-console-readouts { border-top: 0; align-self: stretch; } .machine-console-readouts > div { min-height: 104px; display: flex; flex-direction: column; justify-content: center; } .press-state-rail { margin-top: 18px; } /* ----------------------------------------------------------- TRANSITIONS — EMPTY SPACE BECOMES SIGNAL / STRING / MACHINE BLEED INSTEAD OF "NEXT WEBSITE SECTION" ----------------------------------------------------------- */ .archive-section::after { content: ""; position: absolute; z-index: 0; left: 57%; bottom: 0; width: 48%; height: 74px; background: linear-gradient( 13deg, transparent 47%, rgba(198,32,32,0.13) 48% 49%, transparent 50% ); transform: translateX(-10%); pointer-events: none; } .press-section::after { content: "OUTPUT // ROUTED TO HARROW"; position: absolute; z-index: 1; right: 30px; bottom: 20px; padding-top: 14px; color: rgba(var(--theme-hot-rgb),0.2); font-family: var(--font-ui); font-size: 10px; font-weight: 1000; letter-spacing: 0.14em; border-top: 1px solid rgba(var(--theme-hot-rgb),0.11); pointer-events: none; } .harrow-section::after { content: "SIGNAL LEAK // OUTGOING"; position: absolute; right: 28px; bottom: 18px; color: rgba(var(--theme-hot-rgb),0.18); font-family: var(--font-ui); font-size: 10px; font-weight: 1000; letter-spacing: 0.14em; pointer-events: none; } .signals-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52px; background: linear-gradient( 180deg, transparent, rgba(198,32,32,0.018) ); pointer-events: none; } } /* ================================================================ PASS 05A — THEORY CORRECTION FINAL POSITION ================================================================ */ @media (min-width: 820px) and (max-aspect-ratio: 4 / 5) { .theory-heading { font-size: clamp(62px, 8.2vw, 88px) !important; white-space: nowrap; } #theoryCorrection { display: block !important; } .theory-correction { left: 72%; top: -0.60em; font-size: 0.32em; transform: translateX(-50%) rotate(-9deg); } .theory-correction-arrow { left: 72%; top: -1%; width: 0.34em; transform: translate(-50%, -50%) rotate(118deg); } .obsession-hotspot-richard { left: 15.7%; top: 5.6%; } } /* ================================================================ COMPLETENESS PASS 06 STORY BACKBONE — NO NEW ART ASSETS Adds: - A visible Reader object even before the first publication exists. - Press object mapping for chain / QC / output. - Clickable Bytes infrastructure lore in the footer. ================================================================ */ /* --------------------------------------------------------------- ARCHIVE — DORMANT READER --------------------------------------------------------------- */ .terminal-footer-row { min-height: 56px; display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--line); } .terminal-footer-row .terminal-footer-status { min-height: 56px; } .reader-dormant-object { min-width: 155px; padding: 0 18px; border: 0; border-left: 1px solid var(--line); background: linear-gradient( 180deg, rgba(var(--theme-rgb),0.025), transparent ), rgba(255,255,255,0.008); color: rgba(var(--theme-hot-rgb),0.62); font-family: var(--font-ui); font-size: 10px; font-weight: 1000; letter-spacing: 0.1em; cursor: pointer; transition: background 0.16s ease, color 0.16s ease; } .reader-dormant-object:hover, .reader-dormant-object:focus-visible { color: #fff; background: rgba(var(--theme-rgb),0.08); } /* --------------------------------------------------------------- PRESS OBJECTS — HIDDEN BY DEFAULT UNTIL A COMPOSITION IS LOCKED --------------------------------------------------------------- */ .press-art-hotspot { display: none; } /* --------------------------------------------------------------- FOOTER — INFRASTRUCTURE IS AN OBJECT TOO --------------------------------------------------------------- */ .footer-object-button { width: fit-content; max-width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; transition: transform 0.16s ease, filter 0.16s ease; } .footer-object-button:hover, .footer-object-button:focus-visible { transform: translateY(-2px); filter: drop-shadow(0 0 15px rgba(var(--theme-rgb),0.18)); } /* --------------------------------------------------------------- VERTICAL DESKTOP — COMPLETE THE ENVIRONMENTAL INTERFACE --------------------------------------------------------------- */ @media (min-width: 820px) and (max-aspect-ratio: 4 / 5) { /* Press art hotspots sit on the exact supplied 1536 × 1024 art. */ .press-art-hotspot { position: absolute; z-index: 10; width: 30px; height: 30px; padding: 0; display: block; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; background: rgba(2,2,2,0.38); color: rgba(255,255,255,0.82); font-family: var(--font-ui); font-size: 16px; line-height: 1; box-shadow: 0 0 0 1px rgba(0,0,0,0.38), 0 0 18px rgba(var(--theme-rgb),0.05); cursor: crosshair; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; } .press-art-hotspot > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); } .press-art-hotspot > small { position: absolute; left: 50%; top: calc(100% + 8px); padding: 4px 6px; opacity: 0; transform: translateX(-50%) translateY(3px); border: 1px solid rgba(var(--theme-hot-rgb),0.2); background: rgba(2,2,2,0.9); color: rgba(255,255,255,0.82); font-family: var(--font-ui); font-size: 8px; font-weight: 1000; line-height: 1; letter-spacing: 0.1em; white-space: nowrap; transition: opacity 0.16s ease, transform 0.16s ease; } .press-art-hotspot:hover, .press-art-hotspot:focus-visible { transform: translate(-50%, -50%) scale(1.13); border-color: rgba(var(--theme-hot-rgb),0.78); background: rgba(80,31,140,0.62); box-shadow: 0 0 24px rgba(var(--theme-rgb),0.24); } .press-art-hotspot:hover > small, .press-art-hotspot:focus-visible > small { opacity: 1; transform: translateX(-50%) translateY(0); } .press-hotspot-chain { left: 40.3%; top: 13.1%; } .press-hotspot-qc { left: 21.4%; top: 73.4%; } .press-hotspot-output { left: 63.2%; top: 66.8%; } /* A tiny bit more room for the reader object without growing the section. */ .reader-dormant-object { min-width: 150px; } } /* ================================================================ GATE 0.1 — STANDARD LAPTOP + MOBILE STABILIZATION 2026-08-28 Scope: - Repair hero interaction blocking. - Replace obvious "+" markers with latent environmental discovery. - Build a dedicated mobile composition instead of shrinking desktop. - Make the theory ticker seamless and materially stronger. - Stabilize the current Press on mobile until Press V2 exists. - Leave tall and ultrawide desktop composition tuning frozen. ================================================================ */ /* --------------------------------------------------------------- ART VIEWPORT WRAPPERS They are structurally invisible outside the dedicated mobile pass. --------------------------------------------------------------- */ .hero-scene-viewport, .obsession-wall-viewport, .press-machine-viewport { display: contents; } /* --------------------------------------------------------------- HERO INTERACTION REPAIR The visible content deck may sit above the art, but empty portions can no longer intercept clicks intended for environmental objects. --------------------------------------------------------------- */ .hero-inner, .hero-meta, .hero-scroll-note { pointer-events: none; } .hero-logo-button, .hero-actions, .hero-actions a, .hero-transmission, .hero-transmission *, .hero-copy a, .hero-copy button { pointer-events: auto; } /* --------------------------------------------------------------- LATENT ENVIRONMENTAL HOTSPOTS No map pins. No plus signs. The room teaches the visitor to poke it. --------------------------------------------------------------- */ .lair-hotspot { width: 58px; height: 58px; padding: 0; border: 0 !important; border-radius: 50%; background: transparent !important; color: transparent !important; box-shadow: none !important; cursor: pointer; transition: transform 0.18s ease; } .lair-hotspot:hover { transform: translate(-50%, -50%) scale(1.02); } .hotspot-mark { display: none !important; } .lair-hotspot::after { content: ""; position: absolute; inset: -44px; border: 0 !important; border-radius: 50%; opacity: 0; transform: scale(0.72); background: radial-gradient( circle, rgba(255,255,255,0.12) 0%, rgba(var(--theme-hot-rgb),0.09) 22%, transparent 68% ); mix-blend-mode: screen; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .lair-hotspot:hover::after, .lair-hotspot:focus-visible::after { opacity: 0.72; transform: scale(1); } .lair-hotspot:focus-visible { outline: 1px solid rgba(var(--theme-hot-rgb),0.72); outline-offset: 7px; } .hotspot-label { top: calc(100% + 20px); border-color: rgba(var(--theme-hot-rgb),0.28); background: rgba(2,2,2,0.93); font-size: 10px; letter-spacing: 0.11em; } body.hotspot-near .cursor-burn { opacity: 1; background: radial-gradient( circle, rgba(var(--theme-hot-rgb),0.14), rgba(120,30,180,0.035) 34%, transparent 70% ); } /* Theory wall: the evidence itself is the invitation. */ .obsession-hotspot { width: 58px; height: 58px; min-width: 58px; min-height: 58px; border: 0 !important; background: transparent !important; color: transparent !important; box-shadow: none !important; cursor: pointer; } .obsession-hotspot::before { content: none !important; } .obsession-hotspot::after { content: ""; position: absolute; inset: -30px; border: 0 !important; border-radius: 50%; opacity: 0; transform: scale(0.74); background: radial-gradient( circle, rgba(255,59,47,0.13), rgba(var(--theme-rgb),0.055) 28%, transparent 68% ); mix-blend-mode: screen; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .obsession-hotspot:hover, .obsession-hotspot:focus-visible { transform: scale(1.01); } .obsession-hotspot:hover::after, .obsession-hotspot:focus-visible::after { opacity: 0.8; transform: scale(1); } .obsession-hotspot:focus-visible { outline: 1px solid rgba(255,59,47,0.72); outline-offset: 5px; } .obsession-hotspot > span { top: calc(100% + 17px); } /* Press object markers follow the same rule. */ .press-art-hotspot > span { display: none !important; } .press-art-hotspot { border-color: transparent !important; background: transparent !important; color: transparent !important; box-shadow: none !important; } .press-art-hotspot::after { content: ""; position: absolute; inset: -28px; border-radius: 50%; opacity: 0; background: radial-gradient( circle, rgba(var(--theme-hot-rgb),0.14), transparent 68% ); mix-blend-mode: screen; pointer-events: none; transition: opacity 0.18s ease; } .press-art-hotspot:hover::after, .press-art-hotspot:focus-visible::after { opacity: 0.85; } /* A nearly subliminal signal on touch devices. It never becomes an icon. */ @media (hover: none) { .lair-hotspot::after, .obsession-hotspot::after { animation: hellboxLatentObject 15s ease-in-out infinite; } .lair-hotspot:nth-of-type(2)::after, .obsession-hotspot:nth-of-type(2)::after { animation-delay: -3s; } .lair-hotspot:nth-of-type(3)::after, .obsession-hotspot:nth-of-type(3)::after { animation-delay: -6s; } .lair-hotspot:nth-of-type(4)::after, .obsession-hotspot:nth-of-type(4)::after { animation-delay: -9s; } .lair-hotspot:nth-of-type(5)::after, .obsession-hotspot:nth-of-type(5)::after { animation-delay: -12s; } .hotspot-label, .obsession-hotspot > span, .press-art-hotspot > small { display: none !important; } } @keyframes hellboxLatentObject { 0%, 82%, 100% { opacity: 0; transform: scale(0.76); } 88% { opacity: 0.11; transform: scale(0.92); } 93% { opacity: 0.035; transform: scale(1); } } /* --------------------------------------------------------------- HARROW BRAIN — TRUE SEAMLESS LOOP --------------------------------------------------------------- */ .obsession-track { width: max-content; min-height: 58px; padding: 0; gap: 0; display: flex; align-items: stretch; animation: hellboxBrainLoop 72s linear infinite; } .obsession-sequence { flex: none; min-height: 58px; padding: 0 26px; display: flex; align-items: center; gap: 22px; white-space: nowrap; } .obsession-sequence i { opacity: 0.42; font-style: normal; } @keyframes hellboxBrainLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --------------------------------------------------------------- STANDARD LAPTOP / ORDINARY DESKTOP Deliberately excludes tall rotated displays and ultrawides. --------------------------------------------------------------- */ @media (min-width: 761px) and (min-aspect-ratio: 4 / 5) and (max-aspect-ratio: 16 / 9) { .hero-art img { filter: brightness(1.14) contrast(1.025) saturate(1.025); } .hero-blackout { background: linear-gradient( 180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.015) 48%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0.72) 100% ); } .hero-copy { position: relative; isolation: isolate; } .hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -42px -72px -36px -52px; background: radial-gradient( ellipse at 34% 55%, rgba(0,0,0,0.76), rgba(0,0,0,0.5) 38%, transparent 72% ); filter: blur(8px); pointer-events: none; } .hero-wordmark { filter: drop-shadow(0 15px 22px rgba(0,0,0,0.78)); } .harrow-section { padding-top: 78px; padding-bottom: 82px; } .harrow-layout { gap: clamp(38px, 4vw, 64px); } .harrow-love-note, .harrow-social-row { margin-top: 22px; } .signals-section, .classified-section { padding-top: 82px; padding-bottom: 86px; } .harrow-orb { right: 15px; bottom: 15px; width: 56px; height: 56px; } } /* --------------------------------------------------------------- MOBILE — AUTHORED COMPOSITION, NOT SHRUNK DESKTOP --------------------------------------------------------------- */ @media (max-width: 760px) { :root { --shell: calc(100vw - 32px); --header-h: 56px; } html, body { max-width: 100%; overflow-x: hidden; } body { font-size: 16px; line-height: 1.5; } /* HEADER */ .site-header { height: var(--header-h); grid-template-columns: 38px 1fr; gap: 10px; padding: 0 12px; background: rgba(2,2,2,0.96); border-bottom-color: rgba(var(--theme-hot-rgb),0.2); } .header-brand { min-width: 0; } .header-emblem { width: 34px; height: 34px; } .wallet-button { justify-self: end; width: auto; min-width: 128px; max-width: 178px; min-height: 38px; padding: 0 14px; font-size: 11px; letter-spacing: 0.105em; } /* MOBILE ART ROOMS */ .hero-scene-viewport, .obsession-wall-viewport { position: relative; display: block; width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hero-scene-viewport::-webkit-scrollbar, .obsession-wall-viewport::-webkit-scrollbar { display: none; } /* .press-machine-viewport deliberately NOT included above anymore (2026-09-06) -- the machine now scales to fit its column via aspect-ratio and never needs to scroll/pan. It falls back to display:contents (see base rule), i.e. no wrapper box at all. */ /* HERO */ .hero { min-height: 0; height: auto; padding: 0; overflow: hidden; } .hero-scene-viewport { margin-top: var(--header-h); border-bottom: 1px solid rgba(255,255,255,0.09); background: #020202; } .hero-scene { position: relative; inset: auto; width: clamp(760px, 190vw, 840px); aspect-ratio: 1672 / 941; overflow: hidden; } .hero-scene .hero-art, .hero-scene .hero-blackout { position: absolute; inset: 0; } .hero-art img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: brightness(1.15) contrast(1.02) saturate(1.02); } .hero-blackout { background: linear-gradient( 180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.01) 58%, rgba(0,0,0,0.24) 100% ); } .hero-inner { position: relative; z-index: 3; width: var(--shell); height: auto; min-height: 0; margin: 0 auto; padding: 0 0 24px; display: block; } .hero-brand { position: relative; z-index: 4; width: min(282px, 76vw); margin: -26px 0 24px; filter: drop-shadow(0 15px 26px rgba(0,0,0,0.82)); } .hero-wordmark { max-height: none; } .hero-content { display: grid; grid-template-columns: 1fr; gap: 18px; } .hero-copy { position: relative; isolation: isolate; } .hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -22px -18px -18px; border-radius: 16px; background: radial-gradient( ellipse at 22% 38%, rgba(var(--theme-rgb),0.07), transparent 56% ); pointer-events: none; } .system-label { font-size: 11px; letter-spacing: 0.09em; } .hero-copy h1 { margin: 12px 0 18px; font-size: clamp(54px, 15vw, 68px); line-height: 0.83; letter-spacing: -0.055em; } .hero-copy h1 span { white-space: nowrap; } .hero-description { font-size: 16px; line-height: 1.42; } .hero-description small { font-size: 11px; } .hero-actions { margin-top: 24px; gap: 10px; flex-wrap: nowrap; } .button-primary, .button-ghost { min-height: 48px; padding: 0 16px; font-size: 11px; letter-spacing: 0.08em; } .button-primary { flex: 1 1 auto; } .button-ghost { flex: 0 0 auto; } .hero-transmission { width: 100%; margin: 0; } .transmission-header { min-height: 40px; padding: 0 12px; font-size: 10px; } .transmission-body { padding: 17px; } .transmission-body strong { font-size: clamp(22px, 6.5vw, 28px); } .transmission-body small { font-size: 13px; } .hero-harrow-signature { width: 112px; margin: 0 16px 14px auto; } .hero-meta { position: relative; left: auto; bottom: auto; width: var(--shell); margin: 0 auto; padding: 16px 0 18px; transform: none; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 9px; } .hero-meta span:nth-child(2) { display: none; } .hero-scroll-note { display: none; } .lair-hotspot { width: 64px; height: 64px; } /* HARROW INTERRUPTIONS — NEVER SIT ON TOP OF THE PAGE COPY */ .harrow-whisper { left: 12px; right: 12px; top: calc(var(--header-h) + 8px); bottom: auto; width: auto; max-width: none; padding: 10px 12px; display: grid; grid-template-columns: auto 1fr; gap: 8px; transform: translateY(-12px); font-size: 13px; line-height: 1.3; } .harrow-whisper[aria-hidden="false"], .harrow-whisper.active { transform: translateY(0); } .harrow-whisper span { margin: 0; font-size: 11px; } .harrow-whisper strong { font-size: 13px; } .harrow-response { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-height: min(68dvh, 560px); overflow-y: auto; } .harrow-response-body { grid-template-columns: 64px 1fr; padding: 16px; } .harrow-response-body img { width: 64px; } /* HARROW ORB — PEEKS IN, DOES NOT LIVE ON TOP OF THE CONTENT */ .harrow-orb { right: -14px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 50px; height: 50px; padding: 6px; opacity: 0.78; transition: right 0.18s ease, opacity 0.18s ease; } .harrow-orb:hover, .harrow-orb:focus-visible, .harrow-orb:active { right: 8px; opacity: 1; } .harrow-orb-discovery { right: 24px; top: -7px; min-width: 32px; height: 21px; padding: 0 6px; font-size: 9px; } .harrow-orb-discovery strong { font-size: 9px; } body.drawer-open .harrow-orb, body.reader-open .harrow-orb { display: none; } /* GLOBAL MOBILE RHYTHM */ .manifesto-section, .archive-section, .evidence-section, .press-section, .harrow-section, .signals-section, .classified-section { padding: 64px 0 68px; } .section-number { margin-bottom: 34px; font-size: 11px; } .section-heading { gap: 20px; margin-bottom: 30px; } .eyebrow { font-size: 11px; } /* THE PROBLEM */ .manifesto-title h2 { margin-top: 14px; font-size: clamp(50px, 14.2vw, 64px); line-height: 0.86; letter-spacing: -0.045em; } .manifesto-body { padding-top: 4px; font-size: 17px; } .manifesto-lead { font-size: 21px; line-height: 1.4; } .admin-note { width: 100%; margin-top: 26px; padding: 20px; } /* ARCHIVE */ .section-heading h2, .archive-heading h2 { font-size: clamp(56px, 16vw, 72px); line-height: 0.84; } .section-intro { font-size: 16px; } .terminal-top { min-height: 66px; padding: 12px 14px; } .terminal-top strong { font-size: 15px; } .terminal-main { min-height: 0; padding: 26px 16px 30px; grid-template-columns: 64px 1fr; gap: 16px; } .terminal-emblem { width: 64px; height: 64px; padding: 8px; } .terminal-copy > span { font-size: 11px; } .terminal-copy h3 { font-size: 31px; } .terminal-copy p { font-size: 16px; } .harrow-sticky-note { grid-column: 1 / -1; width: min(300px, 88%); min-height: 150px; margin-top: 8px; padding: 20px; } .collection-summary { grid-template-columns: 1fr 1fr; } .collection-summary > div { min-height: 88px; padding: 15px; } .collection-summary > div:nth-child(2n) { border-right: 0; } .terminal-footer-row { grid-template-columns: 1fr; } .reader-dormant-object { min-height: 50px; border-left: 0; border-top: 1px solid var(--line); } /* THEORY */ .evidence-heading { margin-bottom: 26px; } .theory-heading { white-space: normal !important; font-size: clamp(52px, 14.6vw, 66px) !important; line-height: 0.84; letter-spacing: -0.045em; } .theory-heading em { display: block; } .vandalized-word { margin-left: 0.02em; } .theory-correction { left: 58%; top: -0.54em; font-size: 0.27em; transform: translateX(-50%) rotate(-9deg); } .theory-correction-arrow { left: 60%; top: 3%; width: 0.28em; transform: translate(-50%, -50%) rotate(119deg); } .obsession-wall-viewport { width: calc(100% + 16px); margin-left: -8px; border-top: 1px solid rgba(198,32,32,0.14); border-bottom: 1px solid rgba(198,32,32,0.14); } .obsession-wall { width: clamp(760px, 190vw, 840px); aspect-ratio: 1672 / 941; margin: 0; border: 0; } .obsession-hotspot { width: 64px; height: 64px; min-width: 64px; min-height: 64px; } .obsession-wall-hint { right: 18px; bottom: 14px; font-size: 10px; } .obsession-track, .obsession-sequence { min-height: 50px; } .obsession-track { font-size: 10px; animation-duration: 58s; } .obsession-sequence { gap: 17px; padding: 0 18px; } /* PRESS — TEMPORARY MOBILE STABILIZATION UNTIL PRESS V2 */ .press-stage { display: grid; grid-template-columns: 1fr; gap: 28px; } .press-copy { padding-left: 0; border-left: 0; } .press-copy h2 { max-width: none; font-size: clamp(56px, 16vw, 72px); line-height: 0.84; } .press-mini-terminal { width: 100%; margin-top: 24px; } /* REMOVED 2026-09-06: this whole cluster (.press-machine-zone, .press-machine, .press-machine-art, .press-machine-status, .press-real-lever, .press-art-hotspot + its 3 hotspot children) was sized for the OLD v1 machine image (aspect-ratio: 1536/1024, a landscape image) and for classes that don't exist in the current v2 markup at all (.press-machine-status, .press-real-lever, .press-art-hotspot). Because this block sits later in the file than the correct v2 mobile tuning above (the smaller max-width:760px block, and the max-width:430px block below), it was WINNING the cascade and silently overriding both -- forcing the zone into a landscape aspect-ratio and stretching/letterboxing the actual portrait (1122x1402) image inside it. That's what made every overlay screen land outside the visible machine art on phones: real bug, not a guess. Deleting it lets the already-correct, already-tuned rules (min-height + centered %-width + auto height, same technique as the verified-working desktop case) take effect on mobile for the first time. First pass -- please screenshot and confirm before I touch the numbers further. */ .press-machine-console { position: relative; left: auto; bottom: auto; width: 100%; margin: 14px 0 0; display: block; } .machine-console-message { padding: 17px; } .machine-console-readouts { grid-template-columns: 1fr 1fr; } .machine-console-readouts > div { min-height: 70px; } .press-state-rail { margin-top: 16px; overflow-x: auto; grid-template-columns: repeat(5, minmax(116px, 1fr)); scrollbar-width: none; } .press-state-rail::-webkit-scrollbar { display: none; } /* HARROW */ .harrow-layout { grid-template-columns: 1fr; gap: 42px; } .harrow-art-column { gap: 16px; } .harrow-profile-card { grid-template-columns: 70px 1fr; gap: 14px; } .harrow-profile-card img { width: 70px; height: 70px; } .harrow-file-top { font-size: 10px; } .harrow-wordmark-button { width: 100%; margin: 24px 0 20px; } .harrow-role-list { gap: 7px; margin-bottom: 24px; } .harrow-role-list strong { padding: 7px 9px; font-size: 11px; } .harrow-intro { font-size: 18px; } .harrow-data { grid-template-columns: 1fr 1fr; margin: 28px 0; } .harrow-data > div, .harrow-data > div:nth-child(even) { min-height: 100px; padding: 14px; border-right: 1px solid var(--line); } .harrow-data > div:nth-child(2n) { border-right: 0; } .harrow-data span { font-size: 10px; } .harrow-data strong { font-size: 16px; } .self-review, .harrow-love-note { padding: 19px; } .self-review p { font-size: 19px; } .harrow-social-row a { width: 100%; min-width: 0; } /* SIGNALS / CLASSIFIED / EXIT */ .signals-grid { grid-template-columns: 1fr; } .signal-card { min-height: 124px; padding: 20px; } .classified-layout { grid-template-columns: 1fr; gap: 36px; } .classified-copy h2 { font-size: clamp(56px, 16vw, 72px); } .classified-object { min-height: 360px; } .exit-section { min-height: 520px; } .exit-content h2 { font-size: clamp(74px, 22vw, 104px); } .footer-main { grid-template-columns: 1fr; } .footer-block { min-height: 140px; } } @media (max-width: 760px) { /* REMOVED 2026-09-06: "pointer-events: none" on .press-machine made the wake button itself untappable on phones -- this was from when a separate .press-art-hotspot layer sat on top and handled taps while the base image was inert underneath. The current v2 machine has no separate hotspot layer: the image IS the button (#pressMachine), so disabling its pointer events here silently made tapping the machine do nothing on mobile. That's the other half of why it looked dead -- not just the misplaced screens. */ .hero-scene-viewport:focus-visible, .obsession-wall-viewport:focus-visible, .press-machine-viewport:focus-visible { outline: 1px solid rgba(var(--theme-hot-rgb),0.42); outline-offset: -1px; } } /* ================================================================ GATE 0.1 — ACCESSIBILITY, MOBILE CONTROL, AND LOCALIZATION SHELL VERSION 20260828-GATE0-1-02 ================================================================ */ /* --------------------------------------------------------------- ACCESSIBLE FOUNDATIONS --------------------------------------------------------------- */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .skip-link { position: fixed; z-index: 2000; left: 14px; top: 12px; padding: 11px 14px; transform: translateY(-180%); border: 1px solid var(--theme-hot); background: #050506; color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; transition: transform 0.16s ease; } .skip-link:focus { transform: translateY(0); } :where( a, button, select, [tabindex="0"] ):focus-visible { outline: 2px solid var(--theme-hot); outline-offset: 4px; } main:focus { outline: 0; } section[id], #top { scroll-margin-top: calc(var(--header-h) + 18px); } .hero-scene-viewport, .obsession-wall-viewport, .press-machine-viewport { touch-action: pan-x pan-y; } .hero-scene-viewport.is-dragging, .obsession-wall-viewport.is-dragging, .press-machine-viewport.is-dragging { cursor: grabbing; user-select: none; } /* The discovery counter is not game UI. It remains absent until the visitor has actually found something. */ .harrow-orb-discovery { display: none; } body.has-discoveries .harrow-orb-discovery { display: flex; } /* --------------------------------------------------------------- ACCESSIBILITY PANEL --------------------------------------------------------------- */ body.access-panel-open { overflow: hidden; } .access-panel { position: fixed; inset: 0; z-index: 1200; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .access-panel[aria-hidden="false"], .access-panel.active { opacity: 1; pointer-events: auto; } .access-panel-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } .access-panel-card { position: absolute; top: 0; right: 0; width: min(560px, 94vw); height: 100%; overflow-y: auto; border-left: 1px solid rgba(var(--theme-hot-rgb),0.4); background: linear-gradient(145deg, rgba(var(--theme-rgb),0.055), transparent 42%), #070708; box-shadow: -34px 0 110px rgba(0,0,0,0.8); transform: translateX(103%); transition: transform 0.22s ease; } .access-panel[aria-hidden="false"] .access-panel-card, .access-panel.active .access-panel-card { transform: translateX(0); } .access-panel-header { position: sticky; top: 0; z-index: 2; min-height: 92px; padding: 18px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(7,7,8,0.96); } .access-panel-header span { color: var(--theme-hot); font-family: var(--font-ui); font-size: 11px; font-weight: 900; letter-spacing: 0.1em; } .access-panel-header h2 { margin: 7px 0 0; font-family: var(--font-ui); font-size: clamp(28px, 4vw, 42px); line-height: 0.95; text-transform: uppercase; } .access-panel-close { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); background: transparent; color: #fff; font-size: 28px; cursor: pointer; } .access-panel-body { padding: 28px 24px 48px; } .access-setting-group { margin: 0; padding: 0; border: 0; } .access-setting-group legend, .access-language label { display: block; margin-bottom: 12px; color: #918b94; font-family: var(--font-ui); font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .access-setting { width: 100%; min-height: 58px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-bottom: 0; background: rgba(255,255,255,0.018); color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-align: left; cursor: pointer; } .access-setting:last-of-type { border-bottom: 1px solid var(--line); } .access-setting strong { color: #8d8791; font-size: 12px; } .access-setting[aria-pressed="true"] { border-color: rgba(var(--theme-hot-rgb),0.65); background: rgba(var(--theme-rgb),0.1); } .access-setting[aria-pressed="true"] strong { color: var(--theme-hot); } .access-language { margin-top: 34px; } .access-language select { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 0; background: #09090a; color: #fff; font: 800 14px/1 var(--font-ui); letter-spacing: 0.05em; } .access-language p { margin: 13px 0 0; color: #aaa4ad; font-size: 14px; line-height: 1.55; } .access-keyboard-note { margin: 34px 0 0; padding-top: 16px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: #8f8992; font-family: var(--font-ui); font-size: 12px; font-weight: 900; letter-spacing: 0.09em; } .access-keyboard-note strong { color: var(--paper); } .footer-bottom button { padding: 0; border: 0; background: transparent; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; cursor: pointer; } .footer-bottom button:hover, .footer-bottom button:focus-visible { color: var(--theme-hot); } /* --------------------------------------------------------------- MOBILE NAVIGATION --------------------------------------------------------------- */ .mobile-menu-button, .mobile-nav { display: none; } .mobile-nav { position: fixed; z-index: 790; left: 10px; right: 10px; top: calc(var(--header-h) + 7px); padding: 8px; border: 1px solid rgba(var(--theme-hot-rgb),0.34); background: rgba(4,4,5,0.98); box-shadow: 0 28px 80px rgba(0,0,0,0.78); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; } .mobile-nav[aria-hidden="false"], .mobile-nav.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .mobile-nav a, .mobile-nav button { width: 100%; min-height: 48px; padding: 0 14px; display: flex; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #d7d2da; font-family: var(--font-ui); font-size: 12px; font-weight: 900; letter-spacing: 0.09em; text-align: left; cursor: pointer; } .mobile-nav > :last-child { border-bottom: 0; color: var(--theme-hot); } .header-nav a[aria-current="true"], .mobile-nav a[aria-current="true"] { color: #fff; } .header-nav a[aria-current="true"]::after { right: 0; } /* --------------------------------------------------------------- TICKER CONTROL Moving text receives a real pause mechanism. --------------------------------------------------------------- */ .obsession-strip { position: relative; } .ticker-toggle { position: absolute; z-index: 4; right: 10px; top: 50%; min-width: 58px; min-height: 34px; padding: 0 9px; transform: translateY(-50%); border: 1px solid rgba(255,255,255,0.28); background: rgba(70,18,126,0.84); color: #fff; font-family: var(--font-ui); font-size: 9px; font-weight: 900; letter-spacing: 0.08em; cursor: pointer; } .obsession-strip.is-paused .obsession-track { animation-play-state: paused; } /* --------------------------------------------------------------- TRANSMISSION DISCLOSURE Desktop remains fully open; mobile can collapse the interruption. --------------------------------------------------------------- */ .transmission-header-actions { display: flex; align-items: center; gap: 10px; } .transmission-toggle { display: none; min-width: 44px; min-height: 32px; padding: 0 8px; border: 1px solid rgba(var(--theme-hot-rgb),0.28); background: transparent; color: #fff; font-family: var(--font-ui); font-size: 9px; font-weight: 900; letter-spacing: 0.08em; cursor: pointer; } /* --------------------------------------------------------------- STANDARD LAPTOP OBJECT VISIBILITY The source art stays untouched. These are restrained local lifts. --------------------------------------------------------------- */ @media (min-width: 761px) and (min-aspect-ratio: 4 / 5) and (max-aspect-ratio: 16 / 9) { .hero-scene::before { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient( ellipse 21% 36% at 18% 42%, rgba(255,255,255,0.075), transparent 72% ), radial-gradient( ellipse 19% 24% at 10% 72%, rgba(255,188,108,0.075), transparent 72% ); mix-blend-mode: screen; pointer-events: none; } } /* --------------------------------------------------------------- MOBILE CONTROL + COMPRESSION --------------------------------------------------------------- */ @media (max-width: 760px) { .site-header { grid-template-columns: 34px minmax(0, 1fr) 44px; gap: 8px; transition: transform 0.18s ease; will-change: transform; } .site-header.header-hidden { transform: translateY(calc(-100% - 3px)); } .wallet-button { justify-self: stretch; width: 100%; min-width: 0; max-width: none; } .mobile-menu-button { width: 44px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: #fff; font-family: var(--font-ui); font-size: 8px; font-weight: 900; letter-spacing: 0.07em; cursor: pointer; } .mobile-nav { display: block; } body.mobile-scrolling .harrow-orb { opacity: 0; transform: translateX(24px); pointer-events: none; } body.header-hidden-state .harrow-whisper { top: 8px; } .hero-scene-viewport::before, .obsession-wall-viewport::before, .press-machine-viewport::before { content: ""; position: sticky; z-index: 20; left: 0; top: 0; float: left; width: 24px; height: 100%; background: linear-gradient(90deg, rgba(2,2,2,0.42), transparent); pointer-events: none; } .hero-scene-viewport::after, .obsession-wall-viewport::after, .press-machine-viewport::after { content: ""; position: sticky; z-index: 20; right: 0; top: 0; float: right; width: 24px; height: 100%; background: linear-gradient(270deg, rgba(2,2,2,0.42), transparent); pointer-events: none; } .hero-scene::before { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient( ellipse 21% 37% at 18% 43%, rgba(255,255,255,0.09), transparent 74% ), radial-gradient( ellipse 19% 25% at 10% 73%, rgba(255,184,100,0.095), transparent 74% ); mix-blend-mode: screen; pointer-events: none; } .transmission-toggle { display: inline-flex; align-items: center; justify-content: center; } .hero-transmission:not(.is-expanded) .transmission-body { padding-top: 14px; padding-bottom: 14px; } .hero-transmission:not(.is-expanded) .transmission-label, .hero-transmission:not(.is-expanded) .transmission-body small, .hero-transmission:not(.is-expanded) .hero-harrow-signature { display: none; } .hero-transmission:not(.is-expanded) .transmission-body strong { font-size: clamp(18px, 5vw, 22px); line-height: 1.08; } .ticker-toggle { right: 6px; min-width: 50px; min-height: 30px; font-size: 8px; } .obsession-sequence { padding-right: 78px; } /* Portrait identity becomes one object rather than two stacked cards. */ .harrow-art-column { position: relative; padding-bottom: 74px; } .harrow-profile-card { position: absolute; z-index: 6; left: 14px; right: 14px; bottom: 0; width: auto; min-height: 90px; padding: 12px 14px; background: rgba(5,5,6,0.93); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); box-shadow: 0 18px 55px rgba(0,0,0,0.65); } /* Signals read as outgoing channels rather than giant social cards. */ .signal-card { position: relative; min-height: 96px; padding: 16px 58px 16px 16px; display: grid; align-content: center; gap: 5px; } .signal-card::after { position: absolute; right: 15px; top: 14px; color: rgba(var(--theme-hot-rgb),0.2); font-family: var(--font-ui); font-size: 30px; font-weight: 1000; line-height: 1; } .signal-card:nth-child(1)::after { content: "01"; } .signal-card:nth-child(2)::after { content: "02"; } .signal-card:nth-child(3)::after { content: "03"; } .signal-card:nth-child(4)::after { content: "04"; } .signal-card strong { font-size: 20px; } .signal-card small { font-size: 10px; } .access-panel-card { width: 100%; border-left: 0; } .access-panel-header { padding-top: calc(16px + env(safe-area-inset-top)); } .footer-bottom { padding-bottom: calc(16px + env(safe-area-inset-bottom)); } } /* --------------------------------------------------------------- USER-CONTROLLED ACCESS MODES --------------------------------------------------------------- */ body.a11y-large-text { font-size: 112%; } body.a11y-large-text .drawer-copy, body.a11y-large-text .section-intro, body.a11y-large-text .manifesto-body, body.a11y-large-text .harrow-intro, body.a11y-large-text .hero-description { font-size: 1.08em; } body.a11y-high-contrast { --paper: #ffffff; --paper-muted: #dedede; --paper-dark: #b8b8b8; --line: rgba(255,255,255,0.3); --line-strong: rgba(255,255,255,0.58); } body.a11y-high-contrast .site-noise, body.a11y-high-contrast .site-scanlines { display: none; } body.a11y-high-contrast .hero-blackout { background: linear-gradient(180deg, transparent 0 45%, rgba(0,0,0,0.84) 100%); } body.a11y-reduce-motion *, body.a11y-reduce-motion *::before, body.a11y-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; } body.a11y-reduce-motion .obsession-track { animation: none !important; transform: none !important; } body.a11y-reduce-motion .obsession-sequence[aria-hidden="true"] { display: none; } body.a11y-reduce-motion .lair-hotspot::after, body.a11y-reduce-motion .obsession-hotspot::after, body.a11y-reduce-motion .harrow-orb-ping { animation: none !important; } /* System preferences remain authoritative unless the visitor chooses a stricter setting in the Hellbox access panel. */ @media (prefers-reduced-motion: reduce) { .obsession-track { animation: none !important; transform: none !important; } .obsession-sequence[aria-hidden="true"] { display: none; } .ticker-toggle { display: none; } } @media (prefers-contrast: more) { :root { --line: rgba(255,255,255,0.28); --line-strong: rgba(255,255,255,0.55); } .site-noise, .site-scanlines { display: none; } } @media (forced-colors: active) { .site-noise, .site-scanlines, .site-vignette, .cursor-burn, .hero-blackout, .press-glow, .archive-radiation { display: none !important; } .lair-hotspot, .obsession-hotspot, .press-art-hotspot { border: 1px solid ButtonText !important; } .skip-link, .wallet-button, .button-primary, .button-ghost, .ticker-toggle, .mobile-menu-button { forced-color-adjust: auto; } } /* Hidden overlays are removed from the focus/navigation tree visually as well. */ .mobile-nav[aria-hidden="true"], .access-panel[aria-hidden="true"] { visibility: hidden; } .mobile-nav[aria-hidden="false"], .access-panel[aria-hidden="false"] { visibility: visible; } /* ========================================================= PRESS MACHINE v2 -- press body + control tower Coordinate plane: hellbox-press-machine.png, 1122 x 1402 (verified against the actual hosted file 2026-09-06). All positions below are a first pass measured off that image -- verify in-browser against the render and nudge; nothing here is pixel-final. Gate 5 Track B work. ========================================================= */ .press-screen { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: clamp(1px, 0.6cqw, 4px); padding: clamp(2px, 0.8cqw, 6px) clamp(3px, 1.4cqw, 10px); font-family: var(--font-ui); color: var(--theme-hot); text-align: center; pointer-events: none; overflow: hidden; /* The photographed machine has placeholder readout text painted directly onto its screen bezels. Without an opaque backing here, that painted text shows through behind our real dynamic text -- a double-exposure ghosting effect. This panel covers it. */ background: radial-gradient(120% 140% at 50% 0%, rgba(var(--theme-rgb),0.12), transparent 65%), var(--black-panel); border-radius: clamp(2px, 0.8cqw, 5px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 2px 6px rgba(0,0,0,0.65); } .press-screen span { display: block; color: #8f8992; font-size: clamp(7px, 1.6cqw, 11px); letter-spacing: 0.06em; } .press-screen strong { display: block; font-size: clamp(9px, 2.1cqw, 15px); letter-spacing: 0.04em; } /* Screen A -- issue/phase/price status. Left screen. */ .press-screen-issue { left: 19.2%; top: 34%; width: 14.2%; height: 5.6%; } /* Screen C -- live pool/rarity odds, with the selected issue's title on top. Box measured against the real photo's screen glass -- the previous box started above the glass and ran into the paper-tray mechanism below it. Padding/fonts/gaps tightened below so the same 4-line stack (title + 3 lines) still fits at this shorter height. */ .press-screen-odds { left: 37.8%; top: 32.5%; width: 24.2%; height: 8.8%; padding: clamp(1px, 0.5cqw, 3px) clamp(2px, 1cqw, 6px); /* flex-start, not center: with center, overflow clips evenly off both ends, which was slicing the top of the title off. Content should never be taller than the box now that the line-gaps below are responsive, but flex-start means if it ever is, the title (identity) survives and only the last line gets tight. */ justify-content: flex-start; gap: clamp(1px, 0.3cqw, 2px); } .press-screen-odds strong { font-size: clamp(8px, 2.3cqw, 16px); } .press-screen-odds span { font-size: clamp(6px, 1.7cqw, 12px); } .press-screen-odds #pressOddsTitle { color: var(--theme-hot); font-size: clamp(6px, 1.7cqw, 12px); font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Screen C's two operable views -- odds vs. issue stats. Only one is ever shown; the toggle button below flips between them. */ .press-odds-view { display: flex; flex-direction: column; /* Was a fixed 6px -- didn't shrink with the container like the font sizes did, so on a narrow phone the text got small but the gaps between lines stayed full-size and the stack overflowed its box. */ gap: clamp(0px, 0.4cqw, 2px); } .press-odds-view-hidden { display: none; } /* The toggle itself -- overlaid in the screen's corner rather than taking a flow line, so it reads as a small physical control under the display, not more readout text. .press-screen sets pointer-events:none on the whole box; this un-sets it just for the button so it's actually clickable/focusable. */ .press-screen-toggle { position: absolute; right: 2px; bottom: 1px; pointer-events: auto; border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.45); color: #8f8992; font-family: var(--font-ui); font-size: clamp(5px, 1.1cqw, 8px); letter-spacing: 0.05em; line-height: 1; padding: clamp(1px, 0.4cqw, 2px) clamp(2px, 0.7cqw, 5px); cursor: pointer; } .press-screen-toggle:hover { background: rgba(var(--theme-rgb),0.3); color: #fff; } /* Tower screen D -- wallet / eligibility, carrying the selected issue's global supply. Box measured against the real photo's screen glass on the tower cabinet -- the previous box started above the glass (into the painted logo) and ran too far down into painted body text below it. Gap switched from a fixed 4px to a responsive clamp so the 3-line stack doesn't overflow at this shorter height. */ .press-screen-wallet { left: 79.3%; top: 43.5%; width: 12.5%; height: 5%; padding: clamp(1px, 0.4cqw, 3px) clamp(2px, 0.8cqw, 5px); justify-content: center; gap: clamp(0px, 0.3cqw, 2px); } .press-screen-wallet span { font-size: clamp(6px, 1.7cqw, 12px); color: var(--theme-hot); } /* Clock -- digital insert over the analog gauge face. Box measured to match the small black digital-readout window on the gauge, not the whole analog dial around it. */ .press-readout-clock { position: absolute; left: 69.3%; top: 31.3%; width: 5.1%; height: 1.5%; text-align: center; font-family: var(--font-ui); font-size: clamp(6px, 1.6cqw, 11px); letter-spacing: 0.05em; color: #2a2a2a; pointer-events: none; } /* Chain pulse lamp -- small dot near the gauge, dark until a real on-chain event fires. No baseline glow by design. Repositioned onto the metal bracket beside the gauge bezel -- the old spot landed in empty black background with nothing under it. */ .press-lamp-chain { position: absolute; left: 75.5%; top: 26.5%; width: 10px; height: 10px; border-radius: 50%; background: #2a2a2a; pointer-events: none; transition: background 0.3s ease, box-shadow 0.3s ease; } .press-lamp-chain.pulse { background: var(--theme); box-shadow: 0 0 12px var(--theme); } /* Fault tower -- reuses the painted traffic-light housing. Dark by default; the section's existing machine-awake / machine-alert / machine-pulling classes (already toggled by setPressState) drive which lamp glows -- no separate JS state needed for this part. */ .press-fault-tower { position: absolute; left: 62.2%; top: 16.8%; width: 6.6%; height: 11.3%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; pointer-events: none; } .press-fault-lamp { width: 30%; aspect-ratio: 1; border-radius: 50%; background: transparent; opacity: 0.25; transition: opacity 0.3s ease, box-shadow 0.3s ease; } .press-fault-lamp-red { background: #5a1210; } .press-fault-lamp-amber { background: #5a3d10; } .press-fault-lamp-green { background: #123d1a; } /* Startup smoke -- pure CSS, no image asset. Dormant (opacity 0, no animation) until .press-machine-zone.startup-smoke is added on first wake, then JS strips the trigger class once the whole sequence has played out. How smoke actually behaves in a confined space: it rises from the source, and when it hits the ceiling it doesn't stop -- it BANKS, spreading out sideways along the ceiling while still climbing a little, and that spreading mass is what accumulates into a layer that thickens downward over time. Critically, the accumulated layer has to visibly be MADE of the same clouds that traveled there -- not a separate flat effect underneath them. So there is no more distinct "ceiling layer" element: the 40 puffs below both make the trip AND are the accumulated result once parked. Each puff is two nested elements so two independent motions can combine without fighting over the same `transform`: - .press-smoke-puff-N (outer) drives the big journey via pressSmokeDrift: rise (0-21%) -> bank/settle onto the ceiling pile (21-35%) -> HOLD there, fully parked (35-85%) -> vent out toward the filtration system, reusing its own bank direction (85-100%). - .press-smoke-puff-inner (inner) runs its own small, continuous, never-synced pressSmokeIdle loop the whole time -- a little breathing/drifting wobble -- so once a puff is parked at the ceiling it keeps looking alive instead of freezing into a static shape. Durations/delays are staggered so puffs are continuously arriving and settling throughout, not all at once, and each puff's parked height (--dy-bank) is correlated to its own delay -- the earliest arrivals settle tight against the ceiling, later ones settle progressively lower, so the pile is seen actually filling the top and then thickening downward, the way Cody asked for, made of the real puffs rather than a gradient trick. */ .press-smoke-puff { position: absolute; pointer-events: none; opacity: 0; z-index: 3; transform: translate(0, 0) scale(0.3) rotate(0deg); } .press-smoke-puff-inner { width: 100%; height: 100%; border-radius: 46% 54% 42% 58% / 55% 45% 62% 38%; background: radial-gradient( circle at 38% 38%, rgba(225,223,230,0.94), rgba(225,223,230,0.55) 45%, rgba(225,223,230,0) 76% ); filter: blur(3px); animation: pressSmokeIdle var(--idle-dur, 7s) ease-in-out var(--idle-delay, 0s) infinite; } /* A few alternate blob silhouettes so overlapping puffs don't all read as the same stamped shape. */ .press-smoke-puff-2 .press-smoke-puff-inner, .press-smoke-puff-5 .press-smoke-puff-inner, .press-smoke-puff-8 .press-smoke-puff-inner, .press-smoke-puff-11 .press-smoke-puff-inner, .press-smoke-puff-14 .press-smoke-puff-inner, .press-smoke-puff-17 .press-smoke-puff-inner, .press-smoke-puff-20 .press-smoke-puff-inner, .press-smoke-puff-23 .press-smoke-puff-inner, .press-smoke-puff-26 .press-smoke-puff-inner, .press-smoke-puff-29 .press-smoke-puff-inner, .press-smoke-puff-32 .press-smoke-puff-inner, .press-smoke-puff-35 .press-smoke-puff-inner, .press-smoke-puff-38 .press-smoke-puff-inner { border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%; } .press-smoke-puff-3 .press-smoke-puff-inner, .press-smoke-puff-6 .press-smoke-puff-inner, .press-smoke-puff-9 .press-smoke-puff-inner, .press-smoke-puff-12 .press-smoke-puff-inner, .press-smoke-puff-15 .press-smoke-puff-inner, .press-smoke-puff-18 .press-smoke-puff-inner, .press-smoke-puff-21 .press-smoke-puff-inner, .press-smoke-puff-24 .press-smoke-puff-inner, .press-smoke-puff-27 .press-smoke-puff-inner, .press-smoke-puff-30 .press-smoke-puff-inner, .press-smoke-puff-33 .press-smoke-puff-inner, .press-smoke-puff-36 .press-smoke-puff-inner, .press-smoke-puff-39 .press-smoke-puff-inner { border-radius: 50% 50% 38% 62% / 60% 40% 58% 42%; } /* Start points cluster tight at the engine. --dx-rise/--dy-rise is where each one is at the 21% mark (near the ceiling, mostly straight up); --dx-bank/--dy-bank is where it settles after spreading sideways along the ceiling and is where it stays parked through the whole hold phase. Alternating left/right bank directions is what spreads the accumulated mass across the whole width instead of piling straight up over the engine. The --idle-* custom properties drive that puff's own independent breathing wobble once parked (and subtly the whole time it's alive). */ .press-smoke-puff-1 { left: 42%; top: 61%; width: 11%; height: 11%; --dx-rise: -2%; --dy-rise: -47.3%; --scale-mid: 1.3; --rot-mid: -3deg; --dx-bank: -22%; --dy-bank: -58.9%; --scale-end: 2.1; --rot-end: -10deg; --idle-dur: 5.5s; --idle-delay: 3.64s; --idle-dx: -0.7%; --idle-dy: -1.6%; --idle-scale: 1.08; --idle-rot: -2.3deg; } .press-smoke-puff-2 { left: 47%; top: 59%; width: 12%; height: 12%; --dx-rise: 2%; --dy-rise: -36.7%; --scale-mid: 1.35; --rot-mid: 3deg; --dx-bank: 24%; --dy-bank: -47.8%; --scale-end: 2.2; --rot-end: 11deg; --idle-dur: 6.7s; --idle-delay: 3.84s; --idle-dx: -1.7%; --idle-dy: -1.1%; --idle-scale: 1.04; --idle-rot: 2.3deg; } .press-smoke-puff-3 { left: 44%; top: 64%; width: 10%; height: 10%; --dx-rise: -4%; --dy-rise: -38%; --scale-mid: 1.2; --rot-mid: -5deg; --dx-bank: -14%; --dy-bank: -48.6%; --scale-end: 1.9; --rot-end: -13deg; --idle-dur: 6.9s; --idle-delay: 0.37s; --idle-dx: -0.6%; --idle-dy: -2.2%; --idle-scale: 1.06; --idle-rot: 1.2deg; } .press-smoke-puff-4 { left: 52%; top: 61%; width: 11%; height: 11%; --dx-rise: 4%; --dy-rise: -28.6%; --scale-mid: 1.3; --rot-mid: 5deg; --dx-bank: 16%; --dy-bank: -37.4%; --scale-end: 2.0; --rot-end: 12deg; --idle-dur: 9.5s; --idle-delay: 3.93s; --idle-dx: 1.5%; --idle-dy: -2.8%; --idle-scale: 1.07; --idle-rot: 2.3deg; } .press-smoke-puff-5 { left: 38%; top: 60%; width: 12%; height: 12%; --dx-rise: -6%; --dy-rise: -26.1%; --scale-mid: 1.4; --rot-mid: -7deg; --dx-bank: -30%; --dy-bank: -39.4%; --scale-end: 2.4; --rot-end: -15deg; --idle-dur: 9.4s; --idle-delay: 1.23s; --idle-dx: -1.3%; --idle-dy: -2.4%; --idle-scale: 1.04; --idle-rot: 2.3deg; } .press-smoke-puff-6 { left: 56%; top: 60%; width: 12%; height: 12%; --dx-rise: 6%; --dy-rise: -62.9%; --scale-mid: 1.4; --rot-mid: 7deg; --dx-bank: 30%; --dy-bank: -74.1%; --scale-end: 2.4; --rot-end: 15deg; --idle-dur: 7.9s; --idle-delay: 1.27s; --idle-dx: -1.6%; --idle-dy: -1.3%; --idle-scale: 1.09; --idle-rot: 0.9deg; } .press-smoke-puff-7 { left: 46%; top: 57%; width: 9%; height: 9%; --dx-rise: 1%; --dy-rise: -32.6%; --scale-mid: 1.25; --rot-mid: 2deg; --dx-bank: 10%; --dy-bank: -43.3%; --scale-end: 2.0; --rot-end: 6deg; --idle-dur: 8.2s; --idle-delay: 1.08s; --idle-dx: 1.3%; --idle-dy: -1%; --idle-scale: 1.03; --idle-rot: -2.9deg; } .press-smoke-puff-8 { left: 46%; top: 68%; width: 9%; height: 9%; --dx-rise: -1%; --dy-rise: -42.2%; --scale-mid: 1.15; --rot-mid: -2deg; --dx-bank: -8%; --dy-bank: -51.6%; --scale-end: 1.7; --rot-end: -5deg; --idle-dur: 7.6s; --idle-delay: 3.5s; --idle-dx: 1.9%; --idle-dy: -1.1%; --idle-scale: 1.08; --idle-rot: -1.8deg; } .press-smoke-puff-9 { left: 40%; top: 62%; width: 10%; height: 10%; --dx-rise: -3%; --dy-rise: -50.3%; --scale-mid: 1.3; --rot-mid: -4deg; --dx-bank: -36%; --dy-bank: -62.9%; --scale-end: 2.3; --rot-end: -17deg; --idle-dur: 6.3s; --idle-delay: 0.96s; --idle-dx: -0.4%; --idle-dy: -1.4%; --idle-scale: 1.04; --idle-rot: 0deg; } .press-smoke-puff-10 { left: 54%; top: 62%; width: 10%; height: 10%; --dx-rise: 3%; --dy-rise: -30.5%; --scale-mid: 1.3; --rot-mid: 4deg; --dx-bank: 36%; --dy-bank: -39.7%; --scale-end: 2.3; --rot-end: 17deg; --idle-dur: 6.6s; --idle-delay: 0.01s; --idle-dx: -0.6%; --idle-dy: -2.2%; --idle-scale: 1.09; --idle-rot: -1.1deg; } .press-smoke-puff-11 { left: 43%; top: 63%; width: 11%; height: 11%; --dx-rise: -2%; --dy-rise: -57%; --scale-mid: 1.25; --rot-mid: -3deg; --dx-bank: -18%; --dy-bank: -69.5%; --scale-end: 2.0; --rot-end: -9deg; --idle-dur: 8.5s; --idle-delay: 1.91s; --idle-dx: 0.8%; --idle-dy: -1.9%; --idle-scale: 1.04; --idle-rot: 2.7deg; } .press-smoke-puff-12 { left: 50%; top: 63%; width: 11%; height: 11%; --dx-rise: 2%; --dy-rise: -48.4%; --scale-mid: 1.25; --rot-mid: 3deg; --dx-bank: 18%; --dy-bank: -62.3%; --scale-end: 2.0; --rot-end: 9deg; --idle-dur: 8.7s; --idle-delay: 1.89s; --idle-dx: -1.3%; --idle-dy: -1.7%; --idle-scale: 1.05; --idle-rot: 1.9deg; } .press-smoke-puff-13 { left: 48%; top: 58%; width: 10%; height: 10%; --dx-rise: 0%; --dy-rise: -59.9%; --scale-mid: 1.35; --rot-mid: 1deg; --dx-bank: 6%; --dy-bank: -70.3%; --scale-end: 2.15; --rot-end: 4deg; --idle-dur: 6.3s; --idle-delay: 3.94s; --idle-dx: -0.3%; --idle-dy: -2.6%; --idle-scale: 1.07; --idle-rot: -2.4deg; } .press-smoke-puff-14 { left: 36%; top: 63%; width: 11%; height: 11%; --dx-rise: -5%; --dy-rise: -38.9%; --scale-mid: 1.3; --rot-mid: -6deg; --dx-bank: -28%; --dy-bank: -47.4%; --scale-end: 2.15; --rot-end: -14deg; --idle-dur: 9.0s; --idle-delay: 0.65s; --idle-dx: 0.7%; --idle-dy: -2.4%; --idle-scale: 1.07; --idle-rot: 3deg; } .press-smoke-puff-15 { left: 58%; top: 63%; width: 11%; height: 11%; --dx-rise: 5%; --dy-rise: -47.9%; --scale-mid: 1.3; --rot-mid: 6deg; --dx-bank: 28%; --dy-bank: -58.7%; --scale-end: 2.15; --rot-end: 14deg; --idle-dur: 8.5s; --idle-delay: 0.34s; --idle-dx: -1.5%; --idle-dy: -1%; --idle-scale: 1.03; --idle-rot: 0.5deg; } .press-smoke-puff-16 { left: 45%; top: 66%; width: 9%; height: 9%; --dx-rise: -1%; --dy-rise: -54%; --scale-mid: 1.15; --rot-mid: -1deg; --dx-bank: -4%; --dy-bank: -65.6%; --scale-end: 1.75; --rot-end: -3deg; --idle-dur: 7.4s; --idle-delay: 0.46s; --idle-dx: -0.1%; --idle-dy: -1%; --idle-scale: 1.06; --idle-rot: -1.1deg; } .press-smoke-puff-17 { left: 36%; top: 60%; width: 9%; height: 9%; --dx-rise: -4%; --dy-rise: -32.1%; --scale-mid: 1.37; --rot-mid: -2deg; --dx-bank: -19%; --dy-bank: -42.6%; --scale-end: 1.81; --rot-end: -10deg; --idle-dur: 7.6s; --idle-delay: 2.06s; --idle-dx: 0%; --idle-dy: -2.2%; --idle-scale: 1.05; --idle-rot: 1.8deg; } .press-smoke-puff-18 { left: 40%; top: 64%; width: 12%; height: 12%; --dx-rise: 0%; --dy-rise: -42.9%; --scale-mid: 1.31; --rot-mid: 3deg; --dx-bank: 11%; --dy-bank: -51.2%; --scale-end: 1.9; --rot-end: 4deg; --idle-dur: 6.3s; --idle-delay: 0.17s; --idle-dx: -1.8%; --idle-dy: -2%; --idle-scale: 1.03; --idle-rot: 2.4deg; } .press-smoke-puff-19 { left: 54%; top: 66%; width: 11%; height: 11%; --dx-rise: 6%; --dy-rise: -48.2%; --scale-mid: 1.27; --rot-mid: 6deg; --dx-bank: 25%; --dy-bank: -61%; --scale-end: 2.08; --rot-end: 13deg; --idle-dur: 8.4s; --idle-delay: 0.41s; --idle-dx: 1.1%; --idle-dy: -2.5%; --idle-scale: 1.09; --idle-rot: -1.8deg; } .press-smoke-puff-20 { left: 59%; top: 67%; width: 12%; height: 12%; --dx-rise: 2%; --dy-rise: -57.6%; --scale-mid: 1.35; --rot-mid: 2deg; --dx-bank: 17%; --dy-bank: -68.8%; --scale-end: 2.18; --rot-end: 13deg; --idle-dur: 9.3s; --idle-delay: 2.45s; --idle-dx: -1.9%; --idle-dy: -2.4%; --idle-scale: 1.05; --idle-rot: 0.8deg; } .press-smoke-puff-21 { left: 39%; top: 62%; width: 13%; height: 13%; --dx-rise: -4%; --dy-rise: -25.5%; --scale-mid: 1.31; --rot-mid: -6deg; --dx-bank: -29%; --dy-bank: -38.8%; --scale-end: 1.67; --rot-end: -7deg; --idle-dur: 6.4s; --idle-delay: 0.73s; --idle-dx: -0.7%; --idle-dy: -2.6%; --idle-scale: 1.05; --idle-rot: 0.9deg; } .press-smoke-puff-22 { left: 40%; top: 63%; width: 12%; height: 12%; --dx-rise: 4%; --dy-rise: -52%; --scale-mid: 1.14; --rot-mid: 5deg; --dx-bank: 22%; --dy-bank: -65.4%; --scale-end: 1.97; --rot-end: 11deg; --idle-dur: 6.9s; --idle-delay: 0.89s; --idle-dx: 0.2%; --idle-dy: -1.9%; --idle-scale: 1.07; --idle-rot: 0.7deg; } .press-smoke-puff-23 { left: 47%; top: 58%; width: 8%; height: 8%; --dx-rise: -1%; --dy-rise: -46.8%; --scale-mid: 1.34; --rot-mid: -4deg; --dx-bank: -8%; --dy-bank: -55%; --scale-end: 2.4; --rot-end: -10deg; --idle-dur: 6.4s; --idle-delay: 2.0s; --idle-dx: 1.2%; --idle-dy: -2.2%; --idle-scale: 1.06; --idle-rot: 2deg; } .press-smoke-puff-24 { left: 51%; top: 58%; width: 12%; height: 12%; --dx-rise: -5%; --dy-rise: -27.6%; --scale-mid: 1.2; --rot-mid: -3deg; --dx-bank: -11%; --dy-bank: -41.2%; --scale-end: 2.19; --rot-end: -13deg; --idle-dur: 9.4s; --idle-delay: 1.05s; --idle-dx: -1.4%; --idle-dy: -1.1%; --idle-scale: 1.07; --idle-rot: 0.2deg; } .press-smoke-puff-25 { left: 56%; top: 61%; width: 11%; height: 11%; --dx-rise: -4%; --dy-rise: -44.9%; --scale-mid: 1.33; --rot-mid: -4deg; --dx-bank: -29%; --dy-bank: -56.6%; --scale-end: 1.65; --rot-end: -8deg; --idle-dur: 6.0s; --idle-delay: 0.25s; --idle-dx: 0.8%; --idle-dy: -1.8%; --idle-scale: 1.06; --idle-rot: 1.7deg; } .press-smoke-puff-26 { left: 41%; top: 60%; width: 11%; height: 11%; --dx-rise: 0%; --dy-rise: -29.9%; --scale-mid: 1.34; --rot-mid: 7deg; --dx-bank: 22%; --dy-bank: -38.3%; --scale-end: 2.14; --rot-end: 16deg; --idle-dur: 8.2s; --idle-delay: 1.52s; --idle-dx: 0%; --idle-dy: -1.1%; --idle-scale: 1.07; --idle-rot: 1.2deg; } .press-smoke-puff-27 { left: 58%; top: 68%; width: 12%; height: 12%; --dx-rise: 4%; --dy-rise: -40.6%; --scale-mid: 1.22; --rot-mid: 5deg; --dx-bank: 17%; --dy-bank: -51.1%; --scale-end: 1.99; --rot-end: 6deg; --idle-dur: 7.1s; --idle-delay: 1.26s; --idle-dx: 0.8%; --idle-dy: -2%; --idle-scale: 1.04; --idle-rot: -1.2deg; } .press-smoke-puff-28 { left: 49%; top: 57%; width: 12%; height: 12%; --dx-rise: 0%; --dy-rise: -48.7%; --scale-mid: 1.11; --rot-mid: -3deg; --dx-bank: -21%; --dy-bank: -57.6%; --scale-end: 2.01; --rot-end: -11deg; --idle-dur: 7.5s; --idle-delay: 3.49s; --idle-dx: 1.2%; --idle-dy: -1.7%; --idle-scale: 1.08; --idle-rot: -2.1deg; } .press-smoke-puff-29 { left: 41%; top: 63%; width: 10%; height: 10%; --dx-rise: 1%; --dy-rise: -49.3%; --scale-mid: 1.21; --rot-mid: 3deg; --dx-bank: 32%; --dy-bank: -61.6%; --scale-end: 2.14; --rot-end: 12deg; --idle-dur: 6.3s; --idle-delay: 3.56s; --idle-dx: -0.3%; --idle-dy: -1.7%; --idle-scale: 1.04; --idle-rot: 2.7deg; } .press-smoke-puff-30 { left: 41%; top: 59%; width: 10%; height: 10%; --dx-rise: -3%; --dy-rise: -32.8%; --scale-mid: 1.17; --rot-mid: -7deg; --dx-bank: -19%; --dy-bank: -46.2%; --scale-end: 2.06; --rot-end: -4deg; --idle-dur: 6.6s; --idle-delay: 0.07s; --idle-dx: -1.8%; --idle-dy: -2.3%; --idle-scale: 1.07; --idle-rot: -1.7deg; } .press-smoke-puff-31 { left: 57%; top: 67%; width: 9%; height: 9%; --dx-rise: -3%; --dy-rise: -55.2%; --scale-mid: 1.22; --rot-mid: -1deg; --dx-bank: -17%; --dy-bank: -67.3%; --scale-end: 1.85; --rot-end: -14deg; --idle-dur: 9.2s; --idle-delay: 3.03s; --idle-dx: -0.9%; --idle-dy: -1.6%; --idle-scale: 1.04; --idle-rot: 2.1deg; } .press-smoke-puff-32 { left: 39%; top: 61%; width: 13%; height: 13%; --dx-rise: 3%; --dy-rise: -46.5%; --scale-mid: 1.32; --rot-mid: 1deg; --dx-bank: 24%; --dy-bank: -58.9%; --scale-end: 2.29; --rot-end: 5deg; --idle-dur: 9.1s; --idle-delay: 2.65s; --idle-dx: 1.4%; --idle-dy: -1.9%; --idle-scale: 1.08; --idle-rot: 2.3deg; } .press-smoke-puff-33 { left: 37%; top: 58%; width: 12%; height: 12%; --dx-rise: -2%; --dy-rise: -45.3%; --scale-mid: 1.27; --rot-mid: -4deg; --dx-bank: -7%; --dy-bank: -55.2%; --scale-end: 2.14; --rot-end: -11deg; --idle-dur: 9.4s; --idle-delay: 2.42s; --idle-dx: -1.3%; --idle-dy: -2.3%; --idle-scale: 1.06; --idle-rot: 1.8deg; } .press-smoke-puff-34 { left: 41%; top: 62%; width: 11%; height: 11%; --dx-rise: 2%; --dy-rise: -39%; --scale-mid: 1.33; --rot-mid: 1deg; --dx-bank: 20%; --dy-bank: -48.6%; --scale-end: 2.4; --rot-end: 4deg; --idle-dur: 9.1s; --idle-delay: 0.73s; --idle-dx: 1.1%; --idle-dy: -1.3%; --idle-scale: 1.08; --idle-rot: 1.1deg; } .press-smoke-puff-35 { left: 56%; top: 68%; width: 10%; height: 10%; --dx-rise: 1%; --dy-rise: -26.7%; --scale-mid: 1.31; --rot-mid: 5deg; --dx-bank: 36%; --dy-bank: -40.6%; --scale-end: 1.66; --rot-end: 14deg; --idle-dur: 7.6s; --idle-delay: 0.98s; --idle-dx: -0.2%; --idle-dy: -1.6%; --idle-scale: 1.07; --idle-rot: 0.9deg; } .press-smoke-puff-36 { left: 41%; top: 68%; width: 12%; height: 12%; --dx-rise: -1%; --dy-rise: -58.9%; --scale-mid: 1.16; --rot-mid: -3deg; --dx-bank: -27%; --dy-bank: -69.6%; --scale-end: 2.03; --rot-end: -7deg; --idle-dur: 9.0s; --idle-delay: 3.81s; --idle-dx: 0.8%; --idle-dy: -1.8%; --idle-scale: 1.05; --idle-rot: -0.6deg; } .press-smoke-puff-37 { left: 55%; top: 58%; width: 10%; height: 10%; --dx-rise: 1%; --dy-rise: -36.1%; --scale-mid: 1.15; --rot-mid: 4deg; --dx-bank: 27%; --dy-bank: -44.8%; --scale-end: 1.73; --rot-end: 16deg; --idle-dur: 5.5s; --idle-delay: 3.98s; --idle-dx: -0.4%; --idle-dy: -1.2%; --idle-scale: 1.07; --idle-rot: -2.7deg; } .press-smoke-puff-38 { left: 55%; top: 64%; width: 9%; height: 9%; --dx-rise: -1%; --dy-rise: -39.5%; --scale-mid: 1.37; --rot-mid: -6deg; --dx-bank: -32%; --dy-bank: -52.1%; --scale-end: 1.81; --rot-end: -6deg; --idle-dur: 9.3s; --idle-delay: 2.57s; --idle-dx: -0.6%; --idle-dy: -2.3%; --idle-scale: 1.04; --idle-rot: -0.2deg; } .press-smoke-puff-39 { left: 58%; top: 66%; width: 13%; height: 13%; --dx-rise: 1%; --dy-rise: -47.3%; --scale-mid: 1.34; --rot-mid: 2deg; --dx-bank: 18%; --dy-bank: -59.3%; --scale-end: 2.34; --rot-end: 14deg; --idle-dur: 7.9s; --idle-delay: 2.38s; --idle-dx: -0.1%; --idle-dy: -1.1%; --idle-scale: 1.04; --idle-rot: 0.3deg; } .press-smoke-puff-40 { left: 41%; top: 66%; width: 9%; height: 9%; --dx-rise: -5%; --dy-rise: -51.3%; --scale-mid: 1.17; --rot-mid: -6deg; --dx-bank: -20%; --dy-bank: -61.4%; --scale-end: 2.25; --rot-end: -6deg; --idle-dur: 9.4s; --idle-delay: 0.32s; --idle-dx: -1.8%; --idle-dy: -2%; --idle-scale: 1.05; --idle-rot: -0.1deg; } .press-machine-zone.startup-smoke .press-smoke-puff-1 { animation: pressSmokeDrift 9.3s cubic-bezier(0.22,0.7,0.36,1) 0.82s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-2 { animation: pressSmokeDrift 9.6s cubic-bezier(0.22,0.7,0.36,1) 1.37s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-3 { animation: pressSmokeDrift 9.4s cubic-bezier(0.22,0.7,0.36,1) 1.35s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-4 { animation: pressSmokeDrift 8.8s cubic-bezier(0.22,0.7,0.36,1) 1.96s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-5 { animation: pressSmokeDrift 9.7s cubic-bezier(0.22,0.7,0.36,1) 1.91s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-6 { animation: pressSmokeDrift 8.9s cubic-bezier(0.22,0.7,0.36,1) 0.17s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-7 { animation: pressSmokeDrift 8.9s cubic-bezier(0.22,0.7,0.36,1) 1.87s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-8 { animation: pressSmokeDrift 9.0s cubic-bezier(0.22,0.7,0.36,1) 1.23s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-9 { animation: pressSmokeDrift 9.4s cubic-bezier(0.22,0.7,0.36,1) 0.45s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-10 { animation: pressSmokeDrift 9.1s cubic-bezier(0.22,0.7,0.36,1) 2.24s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-11 { animation: pressSmokeDrift 9.2s cubic-bezier(0.22,0.7,0.36,1) 0.25s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-12 { animation: pressSmokeDrift 9.8s cubic-bezier(0.22,0.7,0.36,1) 0.6s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-13 { animation: pressSmokeDrift 9.8s cubic-bezier(0.22,0.7,0.36,1) 0.19s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-14 { animation: pressSmokeDrift 9.0s cubic-bezier(0.22,0.7,0.36,1) 1.34s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-15 { animation: pressSmokeDrift 9.3s cubic-bezier(0.22,0.7,0.36,1) 0.82s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-16 { animation: pressSmokeDrift 9.8s cubic-bezier(0.22,0.7,0.36,1) 0.23s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-17 { animation: pressSmokeDrift 10.2s cubic-bezier(0.22,0.7,0.36,1) 1.49s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-18 { animation: pressSmokeDrift 10.1s cubic-bezier(0.22,0.7,0.36,1) 1.19s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-19 { animation: pressSmokeDrift 9.5s cubic-bezier(0.22,0.7,0.36,1) 0.87s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-20 { animation: pressSmokeDrift 8.9s cubic-bezier(0.22,0.7,0.36,1) 0.2s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-21 { animation: pressSmokeDrift 9.2s cubic-bezier(0.22,0.7,0.36,1) 2.31s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-22 { animation: pressSmokeDrift 9.8s cubic-bezier(0.22,0.7,0.36,1) 0.43s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-23 { animation: pressSmokeDrift 9.1s cubic-bezier(0.22,0.7,0.36,1) 1.01s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-24 { animation: pressSmokeDrift 9.1s cubic-bezier(0.22,0.7,0.36,1) 1.87s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-25 { animation: pressSmokeDrift 9.4s cubic-bezier(0.22,0.7,0.36,1) 1.19s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-26 { animation: pressSmokeDrift 10.0s cubic-bezier(0.22,0.7,0.36,1) 2.22s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-27 { animation: pressSmokeDrift 9.4s cubic-bezier(0.22,0.7,0.36,1) 1.28s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-28 { animation: pressSmokeDrift 9.8s cubic-bezier(0.22,0.7,0.36,1) 1.12s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-29 { animation: pressSmokeDrift 10.1s cubic-bezier(0.22,0.7,0.36,1) 0.82s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-30 { animation: pressSmokeDrift 9.8s cubic-bezier(0.22,0.7,0.36,1) 1.64s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-31 { animation: pressSmokeDrift 9.6s cubic-bezier(0.22,0.7,0.36,1) 0.4s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-32 { animation: pressSmokeDrift 9.2s cubic-bezier(0.22,0.7,0.36,1) 1.08s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-33 { animation: pressSmokeDrift 9.5s cubic-bezier(0.22,0.7,0.36,1) 1.19s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-34 { animation: pressSmokeDrift 9.8s cubic-bezier(0.22,0.7,0.36,1) 1.46s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-35 { animation: pressSmokeDrift 9.0s cubic-bezier(0.22,0.7,0.36,1) 1.89s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-36 { animation: pressSmokeDrift 9.2s cubic-bezier(0.22,0.7,0.36,1) 0.18s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-37 { animation: pressSmokeDrift 9.3s cubic-bezier(0.22,0.7,0.36,1) 1.71s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-38 { animation: pressSmokeDrift 9.2s cubic-bezier(0.22,0.7,0.36,1) 1.34s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-39 { animation: pressSmokeDrift 9.7s cubic-bezier(0.22,0.7,0.36,1) 0.84s forwards; } .press-machine-zone.startup-smoke .press-smoke-puff-40 { animation: pressSmokeDrift 10.0s cubic-bezier(0.22,0.7,0.36,1) 0.72s forwards; } @keyframes pressSmokeDrift { 0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); } 7% { opacity: 0.88; } 21% { opacity: 0.85; transform: translate(var(--dx-rise), var(--dy-rise)) scale(var(--scale-mid)) rotate(var(--rot-mid)); } 35% { opacity: 0.6; transform: translate(var(--dx-bank), var(--dy-bank)) scale(var(--scale-end)) rotate(var(--rot-end)); } 85% { opacity: 0.6; transform: translate(var(--dx-bank), var(--dy-bank)) scale(var(--scale-end)) rotate(var(--rot-end)); } 100% { opacity: 0; transform: translate(calc(var(--dx-bank) * 1.6), calc(var(--dy-bank) * 1.15)) scale(calc(var(--scale-end) * 1.4)) rotate(var(--rot-end)); } } /* The idle "alive" wobble every parked (and traveling) puff runs continuously and independently -- small enough not to fight the big pressSmokeDrift journey above, but enough that a wall of parked smoke visibly breathes instead of freezing solid. */ @keyframes pressSmokeIdle { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(var(--idle-dx, 1.5%), var(--idle-dy, -2%)) scale(var(--idle-scale, 1.05)) rotate(var(--idle-rot, 2deg)); } } .press-section.machine-alert .press-fault-lamp-red { opacity: 1; box-shadow: 0 0 14px #ff4433; } .press-section.machine-awake.machine-pulling .press-fault-lamp-amber { opacity: 1; box-shadow: 0 0 14px #ffb433; } .press-section.machine-awake:not(.machine-alert):not(.machine-pulling) .press-fault-lamp-green { opacity: 1; box-shadow: 0 0 14px #33ff6a; } /* Quantity selector -- the one real input on the press body besides the plate rack. Box measured against the real dial/display area -- the previous box cut off the dial's left edge. */ .press-quantity { position: absolute; left: 62.5%; top: 46%; width: 11%; height: 6.5%; display: flex; align-items: center; justify-content: space-between; gap: 4px; } .press-quantity-btn { flex: 0 0 auto; width: 22%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.55); color: #fff; font-family: var(--font-ui); font-size: clamp(8px, 1.9cqw, 13px); line-height: 1; cursor: pointer; } .press-quantity-btn:hover { background: rgba(var(--theme-rgb),0.35); } .press-quantity-btn:disabled { opacity: 0.35; cursor: not-allowed; } .press-quantity-value { flex: 1 1 auto; text-align: center; font-family: var(--font-ui); font-size: clamp(8px, 2.0cqw, 14px); color: var(--theme-hot); } /* Ink level -- the FUEL/ART/FREEDOM tube on the left. JS sets --ink-pct; fill grows from the bottom. */ .press-ink { position: absolute; left: 15.7%; top: 43%; width: 3%; height: 15%; overflow: hidden; pointer-events: none; } .press-ink-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ink-pct, 0%); background: linear-gradient(180deg, #ffcf5c, #b8811f); transition: height 0.4s ease; } /* Print-issue plate rack -- box remeasured against the real bezel frame; the old box cut the frame's left edge and clipped the "ISSUE 05" plate below its bottom edge. Internals split into an optional prev nav, the variable-length list itself, and an optional next nav, so the rack can honestly show 0 issues, 3, 5, or page through 20+. */ .press-plate-rack { position: absolute; left: 21.8%; top: 51.5%; width: 7.8%; height: 14.3%; display: flex; flex-direction: column; justify-content: space-between; /* Same fix as .press-screen: the photo has "ISSUE 01-05" painted directly on this bezel. Without an opaque backing behind the nav buttons / plate list / empty state, that painted text ghosts through our real content. */ background: var(--black-panel); border-radius: clamp(1px, 0.5cqw, 3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); } .press-plate-list { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; } .press-plate-nav { flex: 0 0 auto; height: clamp(8px, 1.7cqw, 12px); line-height: 1; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.85); color: #918b94; font-family: var(--font-ui); font-size: clamp(6px, 1.4cqw, 10px); cursor: pointer; padding: 0; } .press-plate-nav:hover { background: rgba(var(--theme-rgb),0.2); color: #fff; } .press-plate-nav:disabled, .press-plate-nav[hidden] { display: none; } .press-plate { flex: 1 1 auto; margin: 1px 0; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.85); color: #918b94; font-family: var(--font-ui); font-size: clamp(6px, 1.6cqw, 11px); cursor: pointer; text-align: left; padding-left: clamp(2px, 1cqw, 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .press-plate:hover { background: rgba(var(--theme-rgb),0.2); color: #fff; } .press-plate.selected { background: rgba(var(--theme-rgb),0.4); color: #fff; box-shadow: inset 0 0 0 1px var(--theme-hot); } .press-plate:disabled { opacity: 0.4; cursor: not-allowed; } /* Announced but not yet mint_live -- visible so it's not a mystery gap in the rack, but visually distinct from a plate you can actually pull from right now. */ .press-plate.press-plate-soon { color: #6b6570; font-style: italic; } .press-plate.press-plate-soon.selected { color: #cbb8ff; } /* Honest empty state -- no issues currently minting. Fills the whole rack rather than leaving it looking broken/blank. */ .press-plate-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed rgba(255,255,255,0.15); background: rgba(0,0,0,0.85); color: #6b6570; font-family: var(--font-ui); font-size: clamp(6px, 1.4cqw, 10px); letter-spacing: 0.04em; padding: clamp(1px, 0.6cqw, 4px); } /* Output tray -- box unchanged. Now dual-purpose: cover-art preview for the selected issue before a pull, ejected-card result after one (still unimplemented, see pullPressLever()). */ .press-output { position: absolute; left: 30%; top: 78%; width: 32%; height: 10%; pointer-events: none; display: flex; align-items: center; justify-content: center; } .press-output-cover { max-width: 100%; max-height: 100%; object-fit: contain; } .press-output-empty { font-family: var(--font-ui); font-size: clamp(6px, 1.4cqw, 10px); letter-spacing: 0.04em; color: #6b6570; text-align: center; } /* Tower wallet-connect slot -- the ONE real connect entry point. Sits over the card-slot/tap-icon art; the press body's own painted "WALLET CONNECT" plate is flavor only, no hotspot. */ .press-wallet-slot { position: absolute; left: 78%; top: 63%; width: 14%; height: 5%; border: 0; background: transparent; cursor: pointer; } .press-wallet-slot:hover { background: rgba(var(--theme-rgb),0.15); } /* The button -- was the lever. Plain scale+glow CSS press. */ .press-button { position: absolute; left: 77%; top: 68%; width: 17%; height: 5%; border: 0; background: transparent; cursor: pointer; } .press-button-glow { position: absolute; inset: -20%; border-radius: 12px; background: radial-gradient(circle, rgba(255,60,50,0.45), transparent 70%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .press-button:hover .press-button-glow { opacity: 0.5; } .press-button.pulled { transform: scale(0.94); } .press-button.pulled .press-button-glow { opacity: 1; } .press-warning { position: absolute; left: 77%; top: 73.5%; width: 17%; text-align: center; color: var(--red-hot); font-family: var(--font-ui); font-size: clamp(6px, 1.6cqw, 11px); font-weight: 900; letter-spacing: 0.06em; pointer-events: none; } .press-lever-callout { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-ui); font-size: clamp(6px, 1.6cqw, 11px); letter-spacing: 0.05em; color: var(--red-hot); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .press-button:hover .press-lever-callout { opacity: 1; } /* PulseChain (chain 369) -- Hellbox's home chain. Not the default anymore (that's red, Harrow's own color, for when no wallet/chain is connected at all) -- this applies only once PulseChain is actually detected, same as Base and Robinhood below. */ [data-chain-theme="pulsechain"] { --theme: #8c42ff; --theme-hot: #ff2e9c; --theme-rgb: 140,66,255; --theme-hot-rgb: 255,46,156; --theme-shadow: 0 0 55px rgba(140,66,255,0.18); --theme-gradient: linear-gradient(135deg, #8c42ff, #ff2e9c, #00c2ff); } /* Base (Coinbase L2, chain 8453) -- real chain, real brand blue. */ [data-chain-theme="base"] { --theme: #0052ff; --theme-hot: #4c8dff; --theme-rgb: 0,82,255; --theme-hot-rgb: 76,141,255; --theme-shadow: 0 0 55px rgba(0,82,255,0.2); --theme-gradient: linear-gradient(135deg, #003399, #0052ff, #4c8dff); } /* Robinhood Chain (Arbitrum L2, chain 4663, mainnet launched mid-2026) -- real chain, real brand green. */ [data-chain-theme="robinhood"] { --theme: #00c805; --theme-hot: #19e60d; --theme-rgb: 0,200,5; --theme-hot-rgb: 25,230,13; --theme-shadow: 0 0 55px rgba(var(--theme-rgb),0.2); --theme-gradient: linear-gradient(135deg, #00c805, #19e60d, #00c805); }