/* bully — editorial HUD on a black ground. * * Two registers on purpose: the landing is oversized display type with * technical mono readouts, and the terminal keeps the phosphor look of the * product itself. Green is the market, red is you. */ :root { color-scheme: dark; --bg: #080908; --bg-2: #0d0f0d; --panel: #0a0d0a; --line: #1e2620; --fg: #ecefe9; --dim: #7d8b7f; --green: #35ff88; --green-soft: rgba(53, 255, 136, .12); --red: #ff4d4d; --gold: #ffd24a; --orange: #ff9840; --display: "Archivo Black", Impact, "Haettenschweiler", sans-serif; --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --gut: clamp(16px, 4vw, 56px); } * { box-sizing: border-box; } /* The hero art and the marquee both bleed past the viewport on purpose. * iOS Safari does not always honour the clip when it is only on , so * both elements carry it — the page must never scroll sideways. */ html { scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* The header is fixed, so an anchored heading would land underneath it. */ :target, section[id], header[id] { scroll-margin-top: 72px; } body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* faint scanlines + a technical grid; decorative only */ .crt { position: fixed; inset: 0; pointer-events: none; z-index: 60; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 12.5vw); } @media (prefers-reduced-motion: no-preference) { .crt { animation: flicker 7s infinite; } @keyframes flicker { 0%,100% {opacity:.85} 50% {opacity:.65} } } /* ---------------------------------------------------------- preloader */ .loader { position: fixed; inset: 0; z-index: 100; background: var(--bg); color: var(--fg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: var(--gut); } .loader__word { font: 400 clamp(56px, 16vw, 200px)/.85 var(--display); letter-spacing: -.03em; color: var(--green); text-shadow: 0 0 60px rgba(53,255,136,.35); } .loader__row { width: min(420px, 80vw); display: flex; justify-content: space-between; font: 11px/1 var(--mono); letter-spacing: .16em; color: var(--dim); } .loader__bar { width: min(420px, 80vw); height: 2px; background: var(--line); overflow: hidden; } .loader__bar i { display: block; height: 100%; width: 0%; background: var(--green); } .loader--done { pointer-events: none; } /* Visible to assistive tech only — used for the terminal input's real label, since the visible one is a shell prompt string. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------- HUD marks */ .hud { position: fixed; z-index: 50; pointer-events: none; font: 400 18px/1 var(--mono); color: var(--dim); } .hud--tl { top: 12px; left: 12px; } .hud--tr { top: 12px; right: 12px; } .hud--bl { bottom: 12px; left: 12px; } .hud--br { bottom: 12px; right: 12px; } /* ---------------------------------------------------------- top bar */ .top { position: fixed; top: 0; left: 0; right: 0; z-index: 55; display: flex; align-items: center; gap: 18px; padding: 14px var(--gut); font: 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(180deg, rgba(8,9,8,.94), rgba(8,9,8,0)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .top__brand { font: 400 17px/1 var(--display); letter-spacing: .01em; text-decoration: none; color: var(--fg); flex: none; } .top__brand sup { font-size: .5em; vertical-align: super; color: var(--green); } .top__meta { display: flex; gap: 20px; color: var(--dim); } .top__cell b { color: var(--fg); font-weight: 400; margin-left: 8px; } .top__cell--tape b { color: var(--green); } .top__cell--cd b { color: var(--gold); } .top__cell--cd.is-live b { color: var(--green); } .top__nav { margin-left: auto; display: flex; gap: 16px; } .top__nav a { color: var(--dim); text-decoration: none; } .top__nav a:hover { color: var(--green); } /* ---------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; border: 1px solid var(--line); border-radius: 2px; font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--fg); background: transparent; cursor: pointer; transition: background .18s, border-color .18s, color .18s; flex: none; } .btn:hover { border-color: var(--green); color: var(--green); background: var(--green-soft); } .btn--primary { background: var(--green); border-color: var(--green); color: #04140a; } .btn--primary:hover { background: #7dffb4; border-color: #7dffb4; color: #04140a; } .btn--buy { padding: 9px 14px; } .btn--sm { padding: 8px 12px; } .btn--lg { padding: 18px 34px; font-size: 13px; } /* ---------------------------------------------------------- hero */ .hero { /* Full-bleed on normal screens, but capped so a tall portrait display * doesn't stretch the poster into a field of empty black. */ min-height: min(100svh, 940px); padding: 104px var(--gut) 48px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .hero__eyebrow { position: relative; z-index: 2; margin: 0 0 clamp(14px, 3vw, 30px); font: 11px/1 var(--mono); letter-spacing: .22em; color: var(--dim); } /* Type sits ON the poster, not beside it — the bull is the loudest thing on * the page and the headline is what you read through it. */ .hero__stack { margin: 0; position: relative; z-index: 2; pointer-events: none; } .hs { display: block; overflow: hidden; font: 400 clamp(34px, 11.2vw, 168px)/.86 var(--display); letter-spacing: -.035em; text-transform: uppercase; } /* The headline crosses the artwork, so each word carries its own dark halo — * without it the light letters dissolve into the bull's green rim light. */ .hs i { display: inline-block; font-style: normal; will-change: transform; text-shadow: 0 0 26px rgba(5,7,5,.92), 0 0 60px rgba(5,7,5,.75); } .hs--2 { padding-left: clamp(20px, 9vw, 150px); } .hs--4 { padding-left: clamp(40px, 22vw, 380px); } .green { color: var(--green); } .red { color: var(--red); } .hero__art { position: absolute; z-index: 1; margin: 0; right: calc(var(--gut) - 7vw); top: 54%; transform: translateY(-50%); width: clamp(340px, 46vw, 760px); pointer-events: none; } .hero__art img { width: 100%; opacity: .92; /* The source art is already black-on-black; feathering the left edge lets * the headline cross over it without a visible rectangle seam. */ -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 34%, #000 100%); mask-image: linear-gradient(100deg, transparent 0%, #000 34%, #000 100%); } .hero__cap { /* The artwork deliberately bleeds past the gutter; the caption must not * follow it off-screen, so it is pulled back inside by the same amount. */ position: absolute; right: 7vw; bottom: -6px; white-space: nowrap; font: 10px/1 var(--mono); letter-spacing: .18em; color: var(--dim); } .hero__foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px; margin-top: clamp(28px, 5vw, 64px); } .hero__desc { flex: 1 1 380px; max-width: 620px; margin: 0; font: 12px/1.75 var(--mono); letter-spacing: .06em; color: var(--dim); } .hero__cta { display: flex; gap: 10px; flex-wrap: wrap; } .hero__scroll { position: absolute; right: var(--gut); bottom: 26px; font: 10px/1 var(--mono); letter-spacing: .2em; color: var(--dim); } /* ---------------------------------------------------------- marquee */ .marq { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--green); color: #04140a; padding: 12px 0; } .marq__track { display: flex; width: max-content; } .marq__track span { font: 400 clamp(20px, 3.2vw, 40px)/1 var(--display); letter-spacing: -.01em; white-space: nowrap; } /* ---------------------------------------------------------- sections */ .sec-head { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; align-items: baseline; margin-bottom: clamp(28px, 5vw, 64px); } .sec-head__no { font: 11px/1 var(--mono); letter-spacing: .16em; color: var(--green); } .sec-head h2 { margin: 0; font: 400 clamp(28px, 6.5vw, 92px)/.9 var(--display); letter-spacing: -.03em; text-transform: uppercase; } .sec-head__note { grid-column: 2; margin: 4px 0 0; font: 11px/1.6 var(--mono); letter-spacing: .14em; color: var(--dim); } .chain, .term, .labels, .token { padding: clamp(56px, 10vw, 140px) var(--gut); border-bottom: 1px solid var(--line); } /* ---------------------------------------------------------- food chain rows */ .row { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px 24px; align-items: center; padding: clamp(20px, 3.4vw, 40px) 0; border-top: 1px solid var(--line); position: relative; } .row:last-child { border-bottom: 1px solid var(--line); } .row__no { font: 11px/1 var(--mono); letter-spacing: .14em; color: var(--dim); } .row__word { margin: 0; font: 400 clamp(38px, 9vw, 130px)/.86 var(--display); letter-spacing: -.04em; text-transform: uppercase; } .row--hot .row__word { color: var(--green); } .row--bear .row__word { color: var(--red); } .row__desc { margin: 0; max-width: 46ch; font: 12px/1.8 var(--mono); letter-spacing: .05em; color: var(--dim); } .row__img { position: absolute; right: 0; bottom: -10px; width: clamp(90px, 13vw, 190px); opacity: .9; pointer-events: none; } /* ---------------------------------------------------------- labels */ .lab { display: grid; grid-template-columns: minmax(140px, 22%) 1fr; gap: 10px 24px; align-items: baseline; padding: clamp(14px, 2.2vw, 26px) 0; border-top: 1px solid var(--line); } .lab:last-of-type { border-bottom: 1px solid var(--line); } .lab__tag { font: 400 clamp(20px, 3.4vw, 42px)/1 var(--display); letter-spacing: -.02em; } .lab__tag--diamond { color: var(--green); } .lab__tag--bagholder { color: var(--red); } .lab__tag--dust { color: var(--dim); } .lab__tag--rug { color: #c96565; } .lab__tag--blind { color: var(--gold); } .lab__tag--unchecked { color: #6b8a70; } .lab__def { font: 12px/1.7 var(--mono); letter-spacing: .05em; color: var(--dim); } /* ---------------------------------------------------------- cope block */ .cope { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; margin-top: clamp(40px, 7vw, 96px); padding: clamp(24px, 4vw, 48px); border: 1px solid var(--line); background: var(--bg-2); } .cope__meter { text-align: center; } .cope__big { display: block; font: 400 clamp(64px, 13vw, 150px)/.85 var(--display); letter-spacing: -.05em; } .cope__big b { font-weight: 400; color: var(--green); } .cope__big i { font-style: normal; font-size: .32em; color: var(--dim); } .cope__verdict { display: block; margin-top: 10px; font: 11px/1 var(--mono); letter-spacing: .22em; color: var(--dim); } .cope__text h3 { margin: 0 0 12px; font: 400 clamp(20px, 3vw, 34px)/1 var(--display); letter-spacing: -.02em; } .cope__text p { margin: 0 0 12px; max-width: 58ch; color: var(--dim); font-size: 14px; } .cope__formula { margin: 0 0 12px; padding: 12px 14px; overflow-x: auto; border-left: 2px solid var(--green); background: rgba(53,255,136,.05); font: 12px/1.6 var(--mono); color: var(--fg); } .dimtext { font: 11px/1.7 var(--mono) !important; letter-spacing: .05em; color: var(--dim); } code { font-family: var(--mono); color: var(--green); } /* ---------------------------------------------------------- token */ .ca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--line); background: var(--bg-2); } .ca__label { font: 10px/1 var(--mono); letter-spacing: .2em; color: var(--dim); } .ca__value { flex: 1 1 240px; min-width: 0; overflow-x: auto; white-space: nowrap; font: 13px/1.4 var(--mono); color: var(--gold); cursor: pointer; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 28px 0; background: var(--line); border: 1px solid var(--line); } .stat { background: var(--bg); padding: clamp(20px, 3vw, 34px) 18px; text-align: center; } .stat b { display: block; font: 400 clamp(26px, 4.4vw, 52px)/1 var(--display); letter-spacing: -.03em; color: var(--green); } .stat span { display: block; margin-top: 8px; font: 10px/1 var(--mono); letter-spacing: .18em; color: var(--dim); } /* ---------------------------------------------------------- footer */ .end { padding: clamp(56px, 9vw, 120px) var(--gut) 40px; } .end__word { margin: 0 0 clamp(28px, 5vw, 60px); /* "GET BULLIED" is 6.92em wide at this tracking and cannot wrap ( ), so * the size has to be small enough that it fits the gutter box at every width. * 15.5vw overflowed on every phone; the 36px floor also covers 280-300px. */ font: 400 clamp(36px, 12.4vw, 210px)/.82 var(--display); letter-spacing: -.045em; color: var(--green); text-shadow: 0 0 90px rgba(53,255,136,.22); } .end__grid { display: flex; flex-wrap: wrap; gap: 28px 48px; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line); } .end__grid p { max-width: 52ch; margin: 0; font: 11px/1.8 var(--mono); letter-spacing: .05em; color: var(--dim); } .end__links { display: flex; flex-direction: column; gap: 6px; font: 11px/1.8 var(--mono); letter-spacing: .14em; } .end__links a { color: var(--dim); text-decoration: none; display: inline-block; padding: 6px 0; /* thumb-sized hit area */ } .end__links a:hover { color: var(--green); } .end__fine { margin: 40px 0 0; font: 10px/1 var(--mono); letter-spacing: .16em; color: #748576; } /* ---------------------------------------------------------- terminal */ .frame { max-width: 980px; margin: 0 auto; height: min(76svh, 660px); display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); font: 14px/1.55 var(--mono); box-shadow: 0 0 90px rgba(53,255,136,.06); } .bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none; } .bar__dot { width: 12px; height: 12px; border-radius: 999px; flex: none; background: radial-gradient(circle at 30% 30%, #9dffc6, var(--green) 55%, #0a6b38); box-shadow: 0 0 14px rgba(53, 255, 136, .55); } .bar__title { font-weight: 700; letter-spacing: .06em; } .bar__sub { color: var(--dim); font-weight: 400; letter-spacing: 0; } .bar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); } .bar__btn { font: 12px var(--mono); cursor: pointer; text-decoration: none; color: #b6ffd6; background: var(--green-soft); border: 1px solid rgba(53,255,136,.4); border-radius: 4px; padding: 3px 9px; } .bar__btn:hover { background: rgba(53,255,136,.25); } .screen:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; } .screen { flex: 1; overflow-y: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .screen pre { margin: 0 0 2px; white-space: pre-wrap; word-break: break-word; font: inherit; } /* Column output is a monospace table 43 characters wide — narrower than an * iPhone SE can show. pre-wrap would fold the rows and destroy the alignment * that makes it readable, so tables opt out of wrapping and scroll inside * their own box instead. The page itself still never scrolls sideways. */ /* Selector must out-specify `.screen pre` above (0,1,1) or the wrap wins. */ .screen pre.ln--table { white-space: pre; word-break: normal; overflow-x: auto; padding-bottom: 4px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .ln--banner { color: var(--green); text-shadow: 0 0 18px rgba(53,255,136,.45); margin-bottom: 6px; } .ln--cmd { margin-top: 10px; } .ln--sys { color: var(--dim); } .ln--err { color: var(--red); } .ln--gold { color: var(--gold); font-weight: 700; letter-spacing: .05em; } .ln--roast { color: #fff; margin: 6px 0 4px; padding: 10px 12px; border-left: 2px solid var(--green); background: rgba(53,255,136,.06); } .dim { color: var(--dim); } .up { color: var(--green); } .down { color: var(--red); } .t-diamond { color: var(--green); } .t-bagholder { color: var(--red); } .t-dust { color: var(--dim); } .t-rug { color: #c96565; } .t-blind { color: var(--gold); } .t-unchecked { color: #8ea393; } .band-min { color: var(--green); } .band-low { color: #9ade6b; } .band-mid { color: var(--gold); } .band-high { color: var(--orange); } .band-max { color: var(--red); text-shadow: 0 0 14px rgba(255,77,77,.5); } .ca-inline { color: var(--gold); cursor: pointer; border-bottom: 1px dotted rgba(255,210,74,.45); } .ca-inline:hover { background: rgba(255,210,74,.12); } .screen a { color: var(--green); } .promptline { display: flex; align-items: center; gap: 8px; flex: none; padding: 10px 14px; border-top: 1px solid var(--line); } .promptline__ps1 { color: var(--green); flex: none; } .promptline__input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--fg); font: inherit; caret-color: var(--green); } .promptline__input::placeholder { color: var(--dim); } .foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); } /* Real