/* ============================================================================ PIGËON — landing page Extends theme/pigeon-theme.css. Everything here exists to drag the page back to 2004 hardware: low contrast, milky blacks, soft edges, no modern polish. ========================================================================= */ body { margin: 0; } /* The soft-focus pass. A 2004 frame upscaled to a modern panel is never sharp. This MUST live on the scrolling content, never on or any ancestor of the fixed chrome: an element with a filter becomes the containing block for its position:fixed descendants, which re-anchors them to the full page box and makes them scroll. That silently breaks the corner links and the grade/scanline overlays. */ .lofi { filter: contrast(0.94) saturate(0.88) brightness(1.03); } .pg-shell { max-width: 940px; } /* --------------------------------------------------------- CORNER LINKS -- */ /* HUD chips framing the screen, the way a game pins its readouts to the corners. The stack owns the fixed position so a corner can hold more than one chip; the chips themselves just sit in it. */ .corner-stack { position: fixed; /* Above the entry gate (z-index 10). The gate is a prompt, not a wall — the socials and the mute toggle must stay visible and clickable through it. */ z-index: 20; display: flex; gap: var(--pg-2); } .corner-stack--l { top: var(--pg-3); left: var(--pg-3); } .corner-stack--r { top: var(--pg-3); right: var(--pg-3); } .corner-stack--br { bottom: var(--pg-3); right: var(--pg-3); } .corner { display: flex; align-items: center; gap: var(--pg-2); padding: var(--pg-2) var(--pg-3); border: 1px solid var(--pg-kerb); background: var(--pg-scrim); color: var(--pg-dust); text-decoration: none; font-family: var(--pg-font-hud); font-size: var(--pg-text-xs); letter-spacing: 0.16em; text-transform: uppercase; text-shadow: var(--pg-outline-thin); transition: color 0.16s var(--pg-ease), border-color 0.16s var(--pg-ease); } /* ------------------------------------------------------------------ GATE -- */ /* Only rendered when the browser blocks audible autoplay. Sits above everything, outside the filtered content wrapper so it stays truly fixed. */ .gate { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; gap: var(--pg-4); text-align: center; padding: var(--pg-5); cursor: pointer; /* Enough to carry the wordmark, not so much that it blacks out the page behind it. */ background: rgba(20, 13, 6, 0.72); } .gate[hidden] { display: none; } .gate__mark { font-size: clamp(3rem, 16vw, 8rem); line-height: 0.86; margin: 0; filter: drop-shadow(3px 4px 0 rgba(26, 17, 9, 0.85)); } .gate__hint { margin: 0; font-size: var(--pg-text-sm); letter-spacing: 0.22em; text-transform: uppercase; color: var(--pg-dust); animation: gate-pulse 1.8s var(--pg-ease) infinite; } @keyframes gate-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* The mute toggle lives in the bottom-right stack. */ .corner--audio { cursor: pointer; appearance: none; } .corner--audio[hidden] { display: none; } /* One icon, two states: swap the sound waves for a cross. */ .corner--audio .cross { display: none; } .corner--audio.is-muted .wave { display: none; } .corner--audio.is-muted .cross { display: block; } .corner--audio.is-muted { color: var(--pg-smog); } .corner svg, .corner img { width: 18px; height: 18px; display: block; } /* The Dexscreener mark is a full-colour bitmap; grade it into the page and let it come up to full strength on hover, same as the photo wall. */ .corner img { filter: sepia(0.3) saturate(0.8) brightness(0.92); transition: filter 0.16s var(--pg-ease); } .corner:hover img, .corner:focus-visible img { filter: none; } .corner:hover, .corner:focus-visible { color: var(--pg-gold-hi); border-color: var(--pg-gold); outline: none; } @media (max-width: 560px) { .corner { padding: var(--pg-2); } } /* ------------------------------------------------------------------ HERO -- */ .hero { padding-block: var(--pg-7) var(--pg-6); text-align: center; } .hero__mark { font-size: clamp(4rem, 19vw, 11rem); margin: 0; /* Hard offset shadow, not a soft blur — the era had no real drop shadows. */ filter: drop-shadow(3px 4px 0 rgba(26, 17, 9, 0.85)); } .hero__sub { font-size: clamp(0.75rem, 3vw, 1.3rem); margin-top: var(--pg-2); } .hero__ticker { font-family: var(--pg-font-hud); font-size: var(--pg-text-sm); letter-spacing: 0.3em; color: var(--pg-green-hi); text-shadow: var(--pg-outline); margin-top: var(--pg-4); } /* ------------------------------------------------------------------ GAME -- */ .game-wrap { max-width: 640px; margin-inline: auto; } /* A 4:3 CRT window. Everything inside is drawn at 320x240. */ .game-frame { position: relative; aspect-ratio: 4 / 3; border: 3px solid var(--pg-wall-dark); outline: 1px solid rgba(201, 185, 146, 0.14); background: #877d70; overflow: hidden; cursor: pointer; touch-action: manipulation; user-select: none; } .game-frame:focus-visible { outline: 2px solid var(--pg-gold-hi); outline-offset: 2px; } #game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* Chunky upscale first, then a hair of blur: pixels the size of a PS2's, softened the way a CRT softened them. */ image-rendering: pixelated; filter: blur(0.4px); } /* Interlace + banding, scoped to the screen rather than the page. */ .game-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(20, 12, 4, 0.34) 0px, rgba(20, 12, 4, 0.34) 1px, transparent 1px, transparent 3px), radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(26, 17, 9, 0.45) 100%); } .game-hud { position: absolute; top: var(--pg-3); right: var(--pg-3); z-index: 2; align-items: flex-end; } .game-hud .pg-hud__money { font-size: clamp(1.4rem, 5vw, 2.1rem); } .game-best { position: absolute; top: var(--pg-3); left: var(--pg-3); z-index: 2; font-family: var(--pg-font-hud); font-size: var(--pg-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pg-dust); text-shadow: var(--pg-outline); } .game-best b { display: block; font-family: var(--pg-font-display); font-size: var(--pg-text-lg); font-weight: 400; color: var(--pg-gold-hi); } /* Bottom-centre dialogue line, exactly where the game puts it. */ .game-sub { position: absolute; left: 0; right: 0; bottom: var(--pg-4); z-index: 2; padding-inline: var(--pg-4); font-size: clamp(0.7rem, 2.4vw, 1.05rem); } .game-msg { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; gap: var(--pg-2); text-align: center; padding: var(--pg-4); background: rgba(36, 26, 16, 0.55); } .game-msg[hidden] { display: none; } .game-msg .pg-splash { font-size: clamp(2rem, 9vw, 3.6rem); } .game-legend { display: flex; justify-content: space-between; gap: var(--pg-4); flex-wrap: wrap; margin-top: var(--pg-3); } /* ----------------------------------------------------------------- MEMES -- */ /* Masonry via columns — the shots have wildly different aspect ratios and forcing them into a uniform grid would crop the joke out of half of them. */ .wall { columns: 3 220px; column-gap: var(--pg-3); } .shot { break-inside: avoid; margin: 0 0 var(--pg-3); border: 1px solid var(--pg-kerb); background: var(--pg-panel-solid); transition: border-color 0.18s var(--pg-ease), transform 0.18s var(--pg-ease); } .shot img { display: block; width: 100%; height: auto; /* Pulled into the same grade as everything else, so the photos sit in the page's world instead of floating on top of it. */ filter: sepia(0.28) saturate(0.82) contrast(0.94) brightness(0.96); } .shot figcaption { font-family: var(--pg-font-hud); font-size: var(--pg-text-xs); letter-spacing: 0.08em; color: var(--pg-dust); padding: var(--pg-2) var(--pg-3); border-top: 1px solid var(--pg-kerb); } .shot:hover { border-color: var(--pg-gold); transform: translateY(-2px); } .shot:hover img { filter: none; } /* -------------------------------------------------------- CONTRACT (HERO) -- */ .ca { display: flex; align-items: center; gap: var(--pg-2); flex-wrap: wrap; justify-content: center; margin-top: var(--pg-5); } .ca__label { color: var(--pg-smog); } .ca__value { font-family: var(--pg-font-mono); font-size: var(--pg-text-sm); color: var(--pg-chalk); background: var(--pg-concrete); border: 1px solid var(--pg-kerb); padding: var(--pg-2) var(--pg-3); overflow-x: auto; white-space: nowrap; max-width: 100%; } .ca__btn { padding: var(--pg-2) var(--pg-4); } .ca__warn { text-align: center; margin-top: var(--pg-2); } /* ----------------------------------------------------------- LEADERBOARD -- */ .board-panel { margin-top: var(--pg-4); } .board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .row { display: grid; grid-template-columns: 2.5ch 1fr auto; gap: var(--pg-3); align-items: baseline; padding: var(--pg-2) 0; border-bottom: 1px solid rgba(90, 65, 42, 0.4); font-family: var(--pg-font-hud); font-size: var(--pg-text-sm); } .row:last-child { border-bottom: 0; } .row__rank { color: var(--pg-smog); font-variant-numeric: tabular-nums; text-align: right; } .row__name { color: var(--pg-chalk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row__score { font-family: var(--pg-font-display); font-size: var(--pg-text-lg); color: var(--pg-green-hi); line-height: 1; } /* Top three wear the gold. */ .row--top .row__rank { color: var(--pg-gold-hi); } .row--top .row__score { color: var(--pg-gold-hi); } .submit-form { display: flex; flex-direction: column; gap: var(--pg-2); padding-bottom: var(--pg-4); margin-bottom: var(--pg-3); border-bottom: 1px solid var(--pg-kerb); } .submit-form[hidden] { display: none; } .submit-form__row { display: flex; gap: var(--pg-2); } .submit-form__row .pg-input { flex: 1 1 auto; } .submit-form__row .pg-btn { flex: 0 0 auto; white-space: nowrap; } /* ----------------------------------------------------------------- STEPS -- */ /* Numbered because buying really is a sequence — the order carries meaning. */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pg-3); } .step { display: grid; grid-template-columns: auto 1fr; gap: var(--pg-4); align-items: baseline; border-left: 3px solid var(--pg-gold); padding: var(--pg-3) var(--pg-4); background: var(--pg-scrim); } .step__n { font-family: var(--pg-font-display); font-size: var(--pg-text-xl); color: var(--pg-gold-hi); line-height: 1; } .step__t { font-family: var(--pg-font-hud); font-size: var(--pg-text-sm); letter-spacing: 0.06em; color: var(--pg-chalk); margin: 0 0 var(--pg-1); } .step p { margin: 0; color: var(--pg-smog); font-size: var(--pg-text-sm); } /* ---------------------------------------------------------------- LAYOUT -- */ section { padding-block: var(--pg-6); } .sec-head { margin-bottom: var(--pg-4); } .sec-head h2 { font-size: clamp(1.6rem, 5vw, var(--pg-text-3xl)); margin: var(--pg-1) 0 0; color: var(--pg-dust); } .sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--pg-5); } .site-foot { padding-block: var(--pg-6); border-top: 1px solid var(--pg-kerb); display: flex; justify-content: space-between; gap: var(--pg-4); flex-wrap: wrap; align-items: center; } .site-foot a { color: var(--pg-dust); } .site-foot a:hover { color: var(--pg-gold-hi); } .disclaimer { font-size: var(--pg-text-xs); color: var(--pg-smog); max-width: 68ch; margin-top: var(--pg-4); } @media (max-width: 560px) { .step { grid-template-columns: 1fr; gap: var(--pg-1); } .game-legend { justify-content: center; } }