/* ================================================================ 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; /* "proximity" (not "mandatory") -- a scroll gesture that comes to rest near a section boundary settles cleanly at its top instead of stopping mid-heading with the sticky header slicing across it; ordinary scrolling through the middle of a long section is completely unaffected, since proximity only pulls in near a snap point rather than fighting every scroll. */ scroll-snap-type: y proximity; 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 { position: relative; display: flex; align-items: center; gap: 9px; white-space: nowrap; color: #aaa5af; } .header-network-trigger { display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 4px 6px; margin: -4px -6px; border-radius: 6px; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; transition: background 0.15s ease; } .header-network-trigger:hover, .header-network-trigger:focus-visible { background: rgba(255,255,255,0.06); } .header-network-trigger::after { content: "▾"; font-size: 9px; color: #6d6873; margin-left: 2px; } /* Chain-switcher popover -- lists all four Press-dial chains at once, so it needs each one's own fixed brand color rather than the single live --theme variable (which only reflects whichever chain is currently connected). */ .header-network-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 220px; background: #141216; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,0.5); padding: 6px; z-index: 60; } .header-network-menu[hidden] { display: none; } .header-network-option { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 9px 10px; border-radius: 6px; color: var(--paper); font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.06em; text-align: left; cursor: pointer; transition: background 0.12s ease; } button.header-network-option:hover, button.header-network-option:focus-visible { background: rgba(255,255,255,0.08); } .header-network-option.is-current { background: rgba(255,255,255,0.05); } .header-network-option-soon { cursor: default; color: #6d6873; } .header-network-option-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #6d6873; } .header-network-option[data-chain="369"] .header-network-option-dot { background: #8c42ff; box-shadow: 0 0 8px rgba(140,66,255,0.6); } .header-network-option[data-chain="8453"] .header-network-option-dot { background: #0052ff; box-shadow: 0 0 8px rgba(0,82,255,0.6); } .header-network-option[data-chain="4663"] .header-network-option-dot { background: #00c805; box-shadow: 0 0 8px rgba(0,200,5,0.6); } .header-network-option[data-chain="1"] .header-network-option-dot { background: #8a93a3; box-shadow: 0 0 8px rgba(138,147,163,0.5); } .header-network-option-soon .header-network-option-dot { box-shadow: none; opacity: 0.5; } .header-network-option-name { flex: 1 1 auto; } .header-network-option-status { font-size: 10px; letter-spacing: 0.1em; color: #6d6873; } .header-network-option.is-current .header-network-option-status { color: var(--theme); } .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.9; 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.94; 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; /* Sits above .manifesto-brand-ghost, which follows this note later in the DOM (see .manifesto-layout) and would otherwise paint on top of it, making the note look translucent -- it isn't, the ghost is just badly stacked. */ z-index: 1; 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.92; 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.91; 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 ================================================================ */ /* The zone is the coordinate space every screen, light and hotspot is positioned against. Its height comes from the machine art in normal flow (see .press-machine-art below), NOT from aspect-ratio -- an aspect-ratio here only matches the art while every browser agrees on how to resolve it against the grid row, and when one didn't, the art got letterboxed inside a wider zone and every overlay drifted off the machine. Content-sized height cannot disagree: the box IS the image. */ .press-machine-zone { position: relative; width: 100%; height: auto; 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); } /* Transparent click/focus target laid over the art. It no longer contains the image, so it carries no drop-shadow (that moved onto the art itself) and no size of its own beyond the zone. */ .press-machine { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; } /* height:auto + no object-fit is the whole fix: the image renders at its natural ratio and the zone hugs it exactly, so % coordinates on the overlays are % of the artwork. */ .press-machine-art { display: block; width: 100%; height: auto; filter: drop-shadow(0 35px 45px rgba(0,0,0,0.6)); transition: transform 0.35s ease, filter 0.35s ease; } /* Scale the ZONE, not the art. Scaling the art alone left every screen, lamp and hotspot behind at the unscaled size/position, so the overlays visibly slid off the machine on hover. Transforming the zone moves the artwork and everything pinned to it together, as one physical object. */ .press-machine-zone { transition: transform 0.35s ease; } .press-machine-zone:hover { transform: scale(1.008); } /* The shake is now built FROM the actual engine audio, not a generic loop: each keyframe below lands on a real detected bass "thump" in harley-evo-startup.mp3 (found by band-pass-filtering the file to the 40-180Hz combustion-thump range, enveloping it, and peak-picking -- see /root/pressrender/audio_analysis/ from the session that generated this). One keyframe animation covers the irregular startup rev (0 -> 5.745s, PRESS_AUDIO.engine.loopStart, played once the instant the engine starts, same tick as audio.play()); a second covers one full idle-loop cycle (5.745 -> 26.47s, 20.725s long) and repeats forever in lockstep with the audio's own loop, which is why its duration matches PRESS_AUDIO.engine.loopEnd - loopStart exactly. JS (playPressWakeSound / stopPressSound in app.js) swaps between the two classes on the same timer that drives the audio itself, so the visual beat and the audio beat drift apart by no more than normal browser timer jitter, not by mismatched durations. Both are animated transforms, so for as long as either runs it takes over from the hover-scale transform below -- an acceptable trade, since the press spends most of its awake life running, not being hovered. transform-origin is set near the V-twin in the artwork (measured from the source photo) so the rotate component of each thump reads as pivoting from the engine, not the whole machine's geometric center. */ @keyframes pressEngineStartupThumps { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 14.0818% { transform: translate3d(5px, 3.5px, 0) rotate(-0.24deg); } 14.8651% { transform: translate3d(2.25px, 1.575px, 0) rotate(-0.108deg); } 15.7354% { transform: translate3d(0.75px, 0.525px, 0) rotate(-0.036deg); } 16.8668% { transform: translate3d(0, 0, 0) rotate(0deg); } 19.5474% { transform: translate3d(-4.99px, 3.493px, 0) rotate(0.2395deg); } 20.3307% { transform: translate3d(-2.2455px, 1.5718px, 0) rotate(0.1078deg); } 21.201% { transform: translate3d(-0.7485px, 0.5239px, 0) rotate(0.0359deg); } 22.3325% { transform: translate3d(0, 0, 0) rotate(0deg); } 27.6762% { transform: translate3d(4.788px, -3.3516px, 0) rotate(0.2298deg); } 28.4595% { transform: translate3d(2.1546px, -1.5082px, 0) rotate(0.1034deg); } 29.3299% { transform: translate3d(0.7182px, -0.5027px, 0) rotate(0.0345deg); } 30.4613% { transform: translate3d(0, 0, 0) rotate(0deg); } 36.4491% { transform: translate3d(-4.782px, -3.3474px, 0) rotate(-0.2295deg); } 37.2324% { transform: translate3d(-2.1519px, -1.5063px, 0) rotate(-0.1033deg); } 38.1027% { transform: translate3d(-0.7173px, -0.5021px, 0) rotate(-0.0344deg); } 39.2341% { transform: translate3d(0, 0, 0) rotate(0deg); } 41.0618% { transform: translate3d(4.608px, 3.2256px, 0) rotate(0.2212deg); } 41.8451% { transform: translate3d(2.0736px, 1.4515px, 0) rotate(0.0995deg); } 42.7154% { transform: translate3d(0.6912px, 0.4838px, 0) rotate(0.0332deg); } 43.8468% { transform: translate3d(0, 0, 0) rotate(0deg); } 47.1192% { transform: translate3d(-4.62px, 3.234px, 0) rotate(0.2218deg); } 47.9025% { transform: translate3d(-2.079px, 1.4553px, 0) rotate(0.0998deg); } 48.7728% { transform: translate3d(-0.693px, 0.4851px, 0) rotate(0.0333deg); } 49.9043% { transform: translate3d(0, 0, 0) rotate(0deg); } 69.6432% { transform: translate3d(4.708px, -3.2956px, 0) rotate(-0.226deg); } 70.4265% { transform: translate3d(2.1186px, -1.483px, 0) rotate(-0.1017deg); } 71.2968% { transform: translate3d(0.7062px, -0.4943px, 0) rotate(-0.0339deg); } 72.4282% { transform: translate3d(0, 0, 0) rotate(0deg); } 74.3951% { transform: translate3d(-4.516px, -3.1612px, 0) rotate(0.2168deg); } 75.1784% { transform: translate3d(-2.0322px, -1.4225px, 0) rotate(0.0975deg); } 76.0487% { transform: translate3d(-0.6774px, -0.4742px, 0) rotate(0.0325deg); } 77.1802% { transform: translate3d(0, 0, 0) rotate(0deg); } 79.2341% { transform: translate3d(4.444px, 3.1108px, 0) rotate(0.2133deg); } 80.0174% { transform: translate3d(1.9998px, 1.3999px, 0) rotate(0.096deg); } 80.8877% { transform: translate3d(0.6666px, 0.4666px, 0) rotate(0.032deg); } 82.0191% { transform: translate3d(0, 0, 0) rotate(0deg); } 83.9164% { transform: translate3d(-4.396px, 3.0772px, 0) rotate(-0.211deg); } 84.6997% { transform: translate3d(-1.9782px, 1.3847px, 0) rotate(-0.095deg); } 85.5701% { transform: translate3d(-0.6594px, 0.4616px, 0) rotate(-0.0317deg); } 86.7015% { transform: translate3d(0, 0, 0) rotate(0deg); } 100% { transform: translate3d(0, 0, 0) rotate(0deg); } } @keyframes pressEngineIdleThumps { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 0.9988% { transform: translate3d(2.9478px, 2.0635px, 0) rotate(-0.129deg); } 1.2159% { transform: translate3d(1.3265px, 0.9286px, 0) rotate(-0.058deg); } 1.4572% { transform: translate3d(0.4422px, 0.3095px, 0) rotate(-0.0193deg); } 1.7708% { transform: translate3d(0, 0, 0) rotate(0deg); } 2.3546% { transform: translate3d(-2.9696px, 2.0787px, 0) rotate(0.1299deg); } 2.5718% { transform: translate3d(-1.3363px, 0.9354px, 0) rotate(0.0585deg); } 2.813% { transform: translate3d(-0.4454px, 0.3118px, 0) rotate(0.0195deg); } 3.1267% { transform: translate3d(0, 0, 0) rotate(0deg); } 4% { transform: translate3d(2.8582px, -2.0008px, 0) rotate(0.125deg); } 4.2171% { transform: translate3d(1.2862px, -0.9003px, 0) rotate(0.0563deg); } 4.4584% { transform: translate3d(0.4287px, -0.3001px, 0) rotate(0.0188deg); } 4.772% { transform: translate3d(0, 0, 0) rotate(0deg); } 6.316% { transform: translate3d(-2.8877px, -2.0214px, 0) rotate(-0.1263deg); } 6.5332% { transform: translate3d(-1.2995px, -0.9096px, 0) rotate(-0.0569deg); } 6.7744% { transform: translate3d(-0.4332px, -0.3032px, 0) rotate(-0.019deg); } 7.0881% { transform: translate3d(0, 0, 0) rotate(0deg); } 7.6429% { transform: translate3d(2.9402px, 2.0581px, 0) rotate(0.1286deg); } 7.8601% { transform: translate3d(1.3231px, 0.9262px, 0) rotate(0.0579deg); } 8.1013% { transform: translate3d(0.441px, 0.3087px, 0) rotate(0.0193deg); } 8.415% { transform: translate3d(0, 0, 0) rotate(0deg); } 8.9264% { transform: translate3d(-2.8416px, 1.9891px, 0) rotate(0.1243deg); } 9.1435% { transform: translate3d(-1.2787px, 0.8951px, 0) rotate(0.0559deg); } 9.3848% { transform: translate3d(-0.4262px, 0.2984px, 0) rotate(0.0186deg); } 9.6984% { transform: translate3d(0, 0, 0) rotate(0deg); } 10.2485% { transform: translate3d(2.8365px, -1.9855px, 0) rotate(-0.1241deg); } 10.4656% { transform: translate3d(1.2764px, -0.8935px, 0) rotate(-0.0558deg); } 10.7069% { transform: translate3d(0.4255px, -0.2978px, 0) rotate(-0.0186deg); } 11.0205% { transform: translate3d(0, 0, 0) rotate(0deg); } 13.5103% { transform: translate3d(-2.8301px, -1.9811px, 0) rotate(0.1238deg); } 13.7274% { transform: translate3d(-1.2735px, -0.8915px, 0) rotate(0.0557deg); } 13.9686% { transform: translate3d(-0.4245px, -0.2972px, 0) rotate(0.0186deg); } 14.2823% { transform: translate3d(0, 0, 0) rotate(0deg); } 14.9723% { transform: translate3d(2.8877px, 2.0214px, 0) rotate(0.1263deg); } 15.1894% { transform: translate3d(1.2995px, 0.9096px, 0) rotate(0.0569deg); } 15.4306% { transform: translate3d(0.4332px, 0.3032px, 0) rotate(0.019deg); } 15.7443% { transform: translate3d(0, 0, 0) rotate(0deg); } 21.6695% { transform: translate3d(-2.8864px, 2.0205px, 0) rotate(-0.1263deg); } 21.8866% { transform: translate3d(-1.2989px, 0.9092px, 0) rotate(-0.0568deg); } 22.1279% { transform: translate3d(-0.433px, 0.3031px, 0) rotate(-0.0189deg); } 22.4415% { transform: translate3d(0, 0, 0) rotate(0deg); } 23.4017% { transform: translate3d(2.8224px, -1.9757px, 0) rotate(0.1235deg); } 23.6188% { transform: translate3d(1.2701px, -0.8891px, 0) rotate(0.0556deg); } 23.8601% { transform: translate3d(0.4234px, -0.2964px, 0) rotate(0.0185deg); } 24.1737% { transform: translate3d(0, 0, 0) rotate(0deg); } 28.1399% { transform: translate3d(-2.7942px, -1.956px, 0) rotate(0.1222deg); } 28.3571% { transform: translate3d(-1.2574px, -0.8802px, 0) rotate(0.055deg); } 28.5983% { transform: translate3d(-0.4191px, -0.2934px, 0) rotate(0.0183deg); } 28.9119% { transform: translate3d(0, 0, 0) rotate(0deg); } 29.7177% { transform: translate3d(2.9888px, 2.0922px, 0) rotate(-0.1308deg); } 29.9349% { transform: translate3d(1.345px, 0.9415px, 0) rotate(-0.0588deg); } 30.1761% { transform: translate3d(0.4483px, 0.3138px, 0) rotate(-0.0196deg); } 30.4897% { transform: translate3d(0, 0, 0) rotate(0deg); } 32.386% { transform: translate3d(-2.8122px, 1.9685px, 0) rotate(0.123deg); } 32.6031% { transform: translate3d(-1.2655px, 0.8858px, 0) rotate(0.0554deg); } 32.8444% { transform: translate3d(-0.4218px, 0.2953px, 0) rotate(0.0185deg); } 33.158% { transform: translate3d(0, 0, 0) rotate(0deg); } 33.7853% { transform: translate3d(2.8058px, -1.964px, 0) rotate(0.1228deg); } 34.0024% { transform: translate3d(1.2626px, -0.8838px, 0) rotate(0.0552deg); } 34.2437% { transform: translate3d(0.4209px, -0.2946px, 0) rotate(0.0184deg); } 34.5573% { transform: translate3d(0, 0, 0) rotate(0deg); } 36.6273% { transform: translate3d(-2.8237px, -1.9766px, 0) rotate(-0.1235deg); } 36.8444% { transform: translate3d(-1.2707px, -0.8895px, 0) rotate(-0.0556deg); } 37.0856% { transform: translate3d(-0.4236px, -0.2965px, 0) rotate(-0.0185deg); } 37.3993% { transform: translate3d(0, 0, 0) rotate(0deg); } 40.7768% { transform: translate3d(2.9094px, 2.0366px, 0) rotate(0.1273deg); } 40.994% { transform: translate3d(1.3092px, 0.9165px, 0) rotate(0.0573deg); } 41.2352% { transform: translate3d(0.4364px, 0.3055px, 0) rotate(0.0191deg); } 41.5489% { transform: translate3d(0, 0, 0) rotate(0deg); } 42.2678% { transform: translate3d(-2.8442px, 1.9909px, 0) rotate(0.1244deg); } 42.4849% { transform: translate3d(-1.2799px, 0.8959px, 0) rotate(0.056deg); } 42.7262% { transform: translate3d(-0.4266px, 0.2986px, 0) rotate(0.0187deg); } 43.0398% { transform: translate3d(0, 0, 0) rotate(0deg); } 51.5464% { transform: translate3d(2.9338px, -2.0536px, 0) rotate(-0.1284deg); } 51.7636% { transform: translate3d(1.3202px, -0.9241px, 0) rotate(-0.0578deg); } 52.0048% { transform: translate3d(0.4401px, -0.308px, 0) rotate(-0.0193deg); } 52.3185% { transform: translate3d(0, 0, 0) rotate(0deg); } 52.8203% { transform: translate3d(-2.9427px, -2.0599px, 0) rotate(0.1287deg); } 53.0374% { transform: translate3d(-1.3242px, -0.927px, 0) rotate(0.0579deg); } 53.2786% { transform: translate3d(-0.4414px, -0.309px, 0) rotate(0.0193deg); } 53.5923% { transform: translate3d(0, 0, 0) rotate(0deg); } 54.3209% { transform: translate3d(2.8032px, 1.9622px, 0) rotate(0.1226deg); } 54.538% { transform: translate3d(1.2614px, 0.883px, 0) rotate(0.0552deg); } 54.7793% { transform: translate3d(0.4205px, 0.2943px, 0) rotate(0.0184deg); } 55.0929% { transform: translate3d(0, 0, 0) rotate(0deg); } 60.3812% { transform: translate3d(-2.8787px, 2.0151px, 0) rotate(-0.1259deg); } 60.5983% { transform: translate3d(-1.2954px, 0.9068px, 0) rotate(-0.0567deg); } 60.8396% { transform: translate3d(-0.4318px, 0.3023px, 0) rotate(-0.0189deg); } 61.1532% { transform: translate3d(0, 0, 0) rotate(0deg); } 64.5404% { transform: translate3d(2.8774px, -2.0142px, 0) rotate(0.1259deg); } 64.7575% { transform: translate3d(1.2948px, -0.9064px, 0) rotate(0.0566deg); } 64.9988% { transform: translate3d(0.4316px, -0.3021px, 0) rotate(0.0189deg); } 65.3124% { transform: translate3d(0, 0, 0) rotate(0deg); } 67.1797% { transform: translate3d(-2.7891px, -1.9524px, 0) rotate(0.122deg); } 67.3969% { transform: translate3d(-1.2551px, -0.8786px, 0) rotate(0.0549deg); } 67.6381% { transform: translate3d(-0.4184px, -0.2929px, 0) rotate(0.0183deg); } 67.9517% { transform: translate3d(0, 0, 0) rotate(0deg); } 70.5814% { transform: translate3d(2.9069px, 2.0348px, 0) rotate(-0.1272deg); } 70.7986% { transform: translate3d(1.3081px, 0.9157px, 0) rotate(-0.0572deg); } 71.0398% { transform: translate3d(0.436px, 0.3052px, 0) rotate(-0.0191deg); } 71.3534% { transform: translate3d(0, 0, 0) rotate(0deg); } 74.0314% { transform: translate3d(-2.8032px, 1.9622px, 0) rotate(0.1226deg); } 74.2485% { transform: translate3d(-1.2614px, 0.883px, 0) rotate(0.0552deg); } 74.4897% { transform: translate3d(-0.4205px, 0.2943px, 0) rotate(0.0184deg); } 74.8034% { transform: translate3d(0, 0, 0) rotate(0deg); } 78.2678% { transform: translate3d(2.8224px, -1.9757px, 0) rotate(0.1235deg); } 78.4849% { transform: translate3d(1.2701px, -0.8891px, 0) rotate(0.0556deg); } 78.7262% { transform: translate3d(0.4234px, -0.2964px, 0) rotate(0.0185deg); } 79.0398% { transform: translate3d(0, 0, 0) rotate(0deg); } 100% { transform: translate3d(0, 0, 0) rotate(0deg); } } .press-machine-zone.engine-startup-thumps, .press-machine-zone.engine-idle-rumble { transform-origin: 47% 63%; will-change: transform; } .press-machine-zone.engine-startup-thumps { animation: pressEngineStartupThumps 5.745s linear 1 forwards; } .press-machine-zone.engine-idle-rumble { animation: pressEngineIdleThumps 20.725s linear infinite; } @media (prefers-reduced-motion: reduce) { .press-machine-zone.engine-startup-thumps, .press-machine-zone.engine-idle-rumble { animation: none; } } .press-machine-zone:hover .press-machine-art { filter: brightness(1.06) contrast(1.03) drop-shadow(0 35px 45px rgba(0,0,0,0.6)); } .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-retired { 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(5, 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.9; 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: 760px; padding: 70px 0; 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.88; 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), .signal-card:nth-child(4) { 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: 700px; } /* 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: 680px; } .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.92; } .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.92; 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: "04"; } .signal-card:nth-child(5)::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: 710px; 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: 50%; top: 50%; width: 152%; height: 0.1em; border-radius: 999px; background: var(--red-hot); box-shadow: 0 0 2px rgba(255,59,47,0.85), 0 0 12px rgba(255,59,47,0.35), 0 2px 3px rgba(0,0,0,0.25); transform-origin: center; pointer-events: none; /* A big emphatic X over the whole letter, not a tidy edit-mark strike. Undrawn until .vandalized-word.is-revealed is added by the scroll observer (see initScrollObservers()'s "theory" zone in app.js) -- each stroke draws on along its own diagonal instead of appearing pre-drawn on load. */ clip-path: inset(0 100% 0 0); transition: clip-path 0.4s cubic-bezier(.16,1,.3,1); } .theory-strike-one { transform: translate(-50%, -50%) rotate(42deg); } .theory-strike-two { height: 0.084em; opacity: 0.95; transform: translate(-50%, -50%) rotate(-39deg); transition-delay: 0.16s; } .vandalized-word.is-revealed .theory-strike-one { clip-path: inset(0 0 0 0); } .vandalized-word.is-revealed .theory-strike-two { clip-path: inset(0 0 0 0); } .theory-correction { position: absolute; z-index: 6; left: 46%; top: -0.78em; transform: translateX(-50%) rotate(-8deg) scale(0.25) translateY(0.2em); opacity: 0; color: var(--red-hot); font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; /* Bigger and rougher than the rest of the correction chrome -- this is the whole punchline, it needs to read as scrawled-on-in-a-hurry, not a tidy little superscript. */ font-size: 0.58em; font-weight: 900; line-height: 1; letter-spacing: -0.07em; white-space: nowrap; text-shadow: 0.03em 0.03em 0 rgba(0,0,0,0.14), 0 0 0.09em rgba(255,255,255,0.35); /* Hand-chalked texture: displaces the glyph edges with fractal noise (see the #chalkTexture near the top of ) so the "47" reads as scrawled/chalked-in rather than clean vector type. */ filter: url(#chalkTexture); pointer-events: none; /* Pops in once the strikes have finished drawing (see .vandalized-word.is-revealed below) instead of sitting pre-written on page load. */ transition: opacity 0.28s ease 0.62s, transform 0.5s cubic-bezier(.34,1.56,.64,1) 0.62s; } .vandalized-word.is-revealed .theory-correction { opacity: 1; transform: translateX(-50%) rotate(-8deg) scale(1) translateY(0); animation: theoryCorrectionJolt 0.42s ease 1.12s both; } /* A real drawn arrow (not a CSS line-hack): a hand-scrawled curved shaft with its own arrowhead, running from just under the "47" down to the crossed-out "A" -- see the