/* ============================================================================ WALLPAPERS Five, all drawn in CSS and inline SVG rather than shipped as images: nothing to download, nothing to go blurry on a big screen, and the palette stays tied to the brand tokens instead of being baked into a JPEG. The choice lives in a data-wp attribute on , set before first paint. The default (no class) is the original purple-and-green haze, kept as CRT HAZE so a first-time visitor sees what they have always seen. ============================================================================ */ /* 1 — TINFOIL. The hat, enlarged. Crossed conic sheens give the crumple, and the repeating fine lines are the brushed-metal grain. */ html[data-wp="wp-foil"] .desktop, .wp-swatch.wp-foil{ background: linear-gradient(rgba(3,7,11,.62),rgba(3,7,11,.78)), repeating-linear-gradient(64deg,rgba(255,255,255,.055) 0 2px,transparent 2px 7px), repeating-linear-gradient(-23deg,rgba(255,255,255,.04) 0 1px,transparent 1px 9px), conic-gradient(from 200deg at 30% 25%,#8d97a6,#e7edf6 12%,#69727f 26%,#cfd7e3 42%,#767f8c 58%,#eaf0f8 72%,#7c8592 88%,#9aa3b1), conic-gradient(from 20deg at 72% 70%,#79828f,#dde4ee 18%,#6b7480 38%,#c6cedb 62%,#7b8490 82%,#aab3c0); background-blend-mode:normal,overlay,overlay,normal,soft-light; } /* 2 — CORKBOARD. The conspiracy wall: cork grain, red string, brass pins. */ html[data-wp="wp-cork"] .desktop, .wp-swatch.wp-cork{ background: linear-gradient(rgba(10,6,3,.40),rgba(8,5,3,.62)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg stroke='%23c8352f' stroke-width='1.6' opacity='.85' fill='none'%3E%3Cpath d='M40 52 L150 120 L262 46 M150 120 L96 238 M150 120 L244 226 M96 238 L244 226 M40 52 L96 238'/%3E%3C/g%3E%3Cg fill='%23e8b04b' stroke='%236b4a13' stroke-width='1.2'%3E%3Ccircle cx='40' cy='52' r='4.5'/%3E%3Ccircle cx='150' cy='120' r='4.5'/%3E%3Ccircle cx='262' cy='46' r='4.5'/%3E%3Ccircle cx='96' cy='238' r='4.5'/%3E%3Ccircle cx='244' cy='226' r='4.5'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 20% 30%,rgba(0,0,0,.20) 0 2px,transparent 3px), radial-gradient(circle at 62% 71%,rgba(0,0,0,.16) 0 2px,transparent 3px), repeating-linear-gradient(41deg,#a6743c 0 3px,#9c6b35 3px 6px,#b07f45 6px 10px); background-size:auto,300px 300px,17px 17px,23px 23px,auto; } /* 3 — CONNECTOME. Neurons on black: the thing the site actually runs on. */ html[data-wp="wp-neuro"] .desktop, .wp-swatch.wp-neuro{ background: radial-gradient(circle at 68% 30%,rgba(255,79,168,.20),transparent 42%), radial-gradient(circle at 22% 74%,rgba(24,255,139,.16),transparent 40%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg stroke='%2318ff8b' stroke-width='.8' opacity='.30' fill='none'%3E%3Cpath d='M52 74 L148 40 L236 96 L330 62 M148 40 L120 168 M236 96 L212 210 L330 62 M120 168 L60 286 M212 210 L300 300 M60 286 L182 356 L300 300 M330 62 L386 186 L300 300'/%3E%3C/g%3E%3Cg fill='%2318ff8b'%3E%3Ccircle cx='52' cy='74' r='2.4'/%3E%3Ccircle cx='148' cy='40' r='3'/%3E%3Ccircle cx='236' cy='96' r='2.6'/%3E%3Ccircle cx='330' cy='62' r='3.2'/%3E%3Ccircle cx='120' cy='168' r='2.4'/%3E%3Ccircle cx='60' cy='286' r='2.8'/%3E%3Ccircle cx='182' cy='356' r='2.4'/%3E%3Ccircle cx='300' cy='300' r='3'/%3E%3Ccircle cx='386' cy='186' r='2.4'/%3E%3C/g%3E%3Cg fill='%23ff4fa8'%3E%3Ccircle cx='212' cy='210' r='4.4'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#04070c,#070b12 60%,#04060a); background-size:auto,auto,420px 420px,auto; } /* 4 — BRICK. The alley wall the cat gets sprayed on. */ html[data-wp="wp-brick"] .desktop, .wp-swatch.wp-brick{ background: linear-gradient(rgba(6,8,12,.52),rgba(6,8,12,.72)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='170'%3E%3Cg font-family='monospace' font-weight='bold' opacity='.5'%3E%3Ctext x='14' y='42' font-size='23' fill='%2318ff8b' transform='rotate(-6 14 42)'%3ETHC%3C/text%3E%3Ctext x='150' y='96' font-size='13' fill='%23e9e4d8' transform='rotate(4 150 96)'%3EWAKE UP%3C/text%3E%3Ctext x='28' y='140' font-size='12' fill='%23ff4fa8' transform='rotate(-3 28 140)'%3EQUESTION%3C/text%3E%3C/g%3E%3C/svg%3E"), repeating-linear-gradient(0deg,transparent 0 33px,rgba(0,0,0,.45) 33px 37px), repeating-linear-gradient(90deg,transparent 0 76px,rgba(0,0,0,.40) 76px 80px), linear-gradient(#7d3a2e,#6d3227 40%,#5c2a21); background-size:auto,260px 170px,auto,auto,auto; } /* 5 — REDACTED. A page of a file with everything that matters blacked out. */ html[data-wp="wp-redact"] .desktop, .wp-swatch.wp-redact{ background: linear-gradient(rgba(4,6,9,.55),rgba(4,6,9,.75)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='260'%3E%3Cg fill='%23060a0e'%3E%3Crect x='24' y='30' width='190' height='13'/%3E%3Crect x='24' y='72' width='118' height='13'/%3E%3Crect x='158' y='72' width='150' height='13'/%3E%3Crect x='24' y='114' width='250' height='13'/%3E%3Crect x='24' y='156' width='88' height='13'/%3E%3Crect x='128' y='156' width='132' height='13'/%3E%3Crect x='24' y='198' width='206' height='13'/%3E%3C/g%3E%3Cg fill='%232b3a42' opacity='.55'%3E%3Crect x='228' y='30' width='84' height='13'/%3E%3Crect x='290' y='114' width='26' height='13'/%3E%3Crect x='276' y='156' width='40' height='13'/%3E%3C/g%3E%3Ctext x='24' y='240' font-family='monospace' font-size='11' fill='%23ff4fa8' opacity='.75'%3EDECLASSIFIED IN PART%3C/text%3E%3C/svg%3E"), linear-gradient(#0b1116,#080d11); background-size:auto,340px 260px,auto; } /* The picker in Settings. Each swatch is the wallpaper itself, shrunk. */ .wp-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px;margin-top:11px} .wp-opt{border:1px solid #3d5b66;background:none;padding:0;cursor:pointer;color:#cddad6;font:inherit; font-size:10px;letter-spacing:1px;overflow:hidden} .wp-opt:hover{border-color:var(--green)} .wp-opt.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green)} .wp-swatch{height:58px;display:block} .wp-opt span{display:block;padding:6px 4px;background:#0a141a} /* the swatches reuse the same paint, scaled down so the pattern still reads */ .wp-swatch.wp-cork{background-size:auto,150px 150px,12px 12px,16px 16px,auto} .wp-swatch.wp-neuro{background-size:auto,auto,170px 170px,auto} .wp-swatch.wp-brick{background-size:auto,130px 85px,auto,auto,auto} .wp-swatch.wp-redact{background-size:auto,170px 130px,auto} .wp-swatch.wp-crt{background:radial-gradient(circle at 75% 28%,rgba(68,16,80,.55),transparent 45%), radial-gradient(circle at 20% 80%,rgba(0,135,105,.3),transparent 50%), repeating-linear-gradient(120deg,#071019 0 2px,#09090f 3px 5px)} /* ============================================================================ EASTER EGGS — the abduction. Fixed overlay, pointer-events:none throughout, so nothing here can ever swallow a click meant for the page underneath. ============================================================================ */ .egg-scene{position:fixed;inset:0;z-index:8000;pointer-events:none;overflow:hidden} .egg-scene.s-out{opacity:0;transition:opacity .6s ease} .egg-cow{position:absolute;bottom:64px;left:-140px;width:120px;height:90px; transform-origin:50% 100%} .egg-scene.s-walk .egg-cow{animation:eggWalk 2.6s linear forwards} .egg-scene.s-stop .egg-cow{left:26%} .egg-scene.s-lift .egg-cow{animation:eggLift 2.1s cubic-bezier(.5,0,.7,1) forwards} .egg-scene.s-gone .egg-cow{opacity:0} @keyframes eggWalk{ 0%{left:-140px} 100%{left:26%} } @keyframes eggLift{ 0% {bottom:64px;transform:rotate(0) scale(1);opacity:1} 55% {bottom:44vh;transform:rotate(320deg) scale(.72);opacity:1} 100%{bottom:66vh;transform:rotate(760deg) scale(.14);opacity:0} } .egg-ufo{position:absolute;top:-130px;left:calc(26% - 30px);width:230px;height:115px} .egg-scene.s-ship .egg-ufo{animation:eggDrop 1.5s cubic-bezier(.2,.8,.3,1) forwards} .egg-scene.s-gone .egg-ufo{animation:eggZip .9s ease-in forwards} @keyframes eggDrop{ 0%{top:-130px} 100%{top:7vh} } @keyframes eggZip { 0%{top:7vh;opacity:1} 100%{top:-40vh;left:78%;opacity:0} } .egg-lamps circle{fill:#ffe9a8;animation:eggLamp 1.1s steps(1) infinite} .egg-lamps circle:nth-child(2){animation-delay:.2s} .egg-lamps circle:nth-child(3){animation-delay:.4s} .egg-lamps circle:nth-child(4){animation-delay:.6s} .egg-lamps circle:nth-child(5){animation-delay:.8s} @keyframes eggLamp{0%,49%{fill:#ffe9a8}50%,100%{fill:#6b4d1f}} .egg-beam{position:absolute;top:7vh;left:26%;width:0;height:0;opacity:0; background:linear-gradient(rgba(24,255,139,.55),rgba(24,255,139,.03)); clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)} .egg-scene.s-beam .egg-beam{width:230px;height:70vh;opacity:1;margin-left:-30px; transition:opacity .5s ease;animation:eggPulse 1.3s ease-in-out infinite} .egg-scene.s-gone .egg-beam{opacity:0;transition:opacity .5s ease} @keyframes eggPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.45)}} .egg-cap{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%); background:rgba(4,8,11,.9);border:1px solid var(--green);color:var(--green); font-family:"Courier New",monospace;font-size:13px;letter-spacing:1.5px; padding:9px 16px;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis} .egg-scene.egg-still .egg-cow,.egg-scene.egg-still .egg-ufo{display:none} /* five taps on the cat: the hat does its job */ body.egg-static:after{content:"";position:fixed;inset:0;z-index:7999;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 2px,transparent 2px 4px); animation:eggStatic .09s steps(2) infinite;mix-blend-mode:screen} @keyframes eggStatic{0%{transform:translateY(0)}100%{transform:translateY(4px)}} /* the MKultraFLY desktop icon: a drawn mark, not an emoji like its neighbours */ .mk-icon img{display:block;margin:0 auto;filter:drop-shadow(0 0 7px rgba(24,255,139,.45))} .mk-icon:hover img{filter:drop-shadow(0 0 12px rgba(24,255,139,.75))} /* ============================================================================ THE INTRO WIZARD ON A PHONE Each stage is position:absolute;inset:0 with justify-content:center. That is fine while the content fits. On a 375-wide screen every stage is taller than the box, and a centred flex child that overflows pushes its own top out of the scrollable area — the first lines become unreachable no matter how you scroll. Stop centring once it cannot fit, and give the scroll room to clear the button bar. ============================================================================ */ @media (max-width:700px){ .boot-stage{ justify-content:flex-start; /* never centre what does not fit */ padding:16px 15px 84px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* the type was sized for a desktop column */ .boot-stage h2.mega{font-size:clamp(30px,11vw,46px);line-height:.96} .boot-num{font-size:26px} .boot-head{gap:10px;margin-bottom:13px} .boot-stage p,.boot-stage li{font-size:11.5px;line-height:1.62} .boot-stage .kicker{font-size:10px;letter-spacing:2px} .bios{font-size:10px;line-height:1.55} .bios .l{max-width:60%} /* the cards in "what you can do" stack instead of squeezing */ .cando{grid-template-columns:1fr!important;gap:8px} .cando>*{padding:11px 12px} .cd-ico{font-size:20px} .lore p{font-size:11.5px} .boundary p{font-size:11px} .title-card .title-cat{width:88px;height:88px} /* a fixed bar over a scrolling stage needs to look like a bar, not a smudge */ .boot-bar{background:linear-gradient(transparent,rgba(3,9,13,.92) 38%);height:60px; align-items:flex-end;padding-bottom:9px} } @media (max-width:420px){ .boot-stage{padding:13px 12px 88px} .boot-stage h2.mega{font-size:clamp(26px,10.5vw,38px)} .boot-ghost{font-size:9px;padding:8px 9px} } /* the tour card becomes a bottom sheet on a phone */ @media (max-width:700px){ .tour-box{padding:12px 13px 11px} .tour-box h4{font-size:14px;margin:3px 0 6px} .tour-box p{font-size:11.5px;line-height:1.6} .tour-act{margin-top:10px} .tour-act button{padding:9px 14px;font-size:11.5px} } /* On a phone the legend and the spike badge share the bottom strip of the canvas and overlap — "DAN" printing straight through "UNTRAINED · SPIKES". Give the badge its own line above the legend instead. */ @media (max-width:700px){ .fly-legend{right:auto;left:6px;max-width:calc(100% - 12px);flex-wrap:wrap} .fly-badge{bottom:auto;top:6px;right:6px;max-width:58%} } /* ============================================================================ DESKTOP ICONS — all of them, on screen. The grid was two fixed columns growing downward. With thirteen icons that runs past the bottom of a short window, and .desktop-area is overflow:hidden, so the extras were simply cut off with no way to reach them. Column-wrapping flex inside a bounded height fixes it properly: icons fill the first column, then start a second, then a third. They cannot fall off the bottom because the container never exceeds the area it sits in. ============================================================================ */ .icons{ display:flex!important; flex-direction:column; flex-wrap:wrap; align-content:flex-start; bottom:14px; /* bounded height is what makes wrap work */ max-height:calc(100% - 36px); gap:14px 10px; z-index:2; /* above the posters, always */ } /* The posters are decoration. They were pinned bottom-left, which is exactly where the icon column now reaches, so one sat on top of the SUBJECT 7 icon. Move the left one clear, and stop both from ever catching a click meant for an icon underneath. */ .poster,.wall-copy{pointer-events:none} .poster-left{left:auto;right:210px;bottom:22px} /* Below this width there is no room for decoration beside a full icon column. */ @media(max-width:1200px){ .wall-copy,.poster{display:none!important} } @media(max-width:760px){ .icons{gap:10px 6px;max-height:calc(100% - 22px)} } /* the Top Conspiracies list */ .tc-list{display:grid;gap:5px;margin:12px 0 4px} .tc-row{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center; background:#0b171d;border:1px solid #23383f;padding:8px 10px} .tc-n{color:#5f7178;font-size:11px;text-align:right} .tc-mid b{display:block;font-size:12.5px;color:#fff} .tc-mid span{font-size:10px;color:#7e9196;letter-spacing:1px} .tc-tag{font-style:normal;font-size:8.5px;letter-spacing:1.2px;color:var(--pink); border:1px solid var(--pink);padding:1px 4px;margin-left:7px;vertical-align:1px} .tc-z{color:var(--green);font-weight:700;font-size:13px} /* the "open this page in your wallet" panel, for phones with no injected wallet */ .w-open{position:absolute;top:100%;right:0;margin-top:6px;width:min(280px,88vw);z-index:60; background:#0a161b;border:1px solid var(--green);padding:12px 13px; box-shadow:0 14px 34px rgba(0,0,0,.6);text-align:left} .w-open b{display:block;color:var(--green);font-size:12px;margin-bottom:5px} .w-open p{color:#b6c6c4;font-size:11px;line-height:1.6;margin:0 0 10px} .w-open a{display:block;background:var(--green);color:#08100d;text-decoration:none; font-weight:800;font-size:11.5px;letter-spacing:1px;padding:9px 11px;margin-bottom:6px;text-align:center} .w-open a:nth-of-type(2){background:#2f6fe0;color:#fff} .w-open a:nth-of-type(3){background:#1b1f26;color:#cddad6;border:1px solid #3d5b66} .w-close{display:block;text-align:center;color:#7e9196;font-size:10.5px;cursor:pointer;margin-top:2px} .wallet-box{position:relative} /* wallet chooser rows */ .w-pick{display:flex;align-items:center;gap:9px;width:100%;background:#0d1b21; border:1px solid #3d5b66;color:#dce7e3;font:inherit;font-size:12px;font-weight:700; padding:9px 11px;margin-bottom:6px;cursor:pointer;text-align:left} .w-pick:hover{border-color:var(--green)} .w-pick.on{border-color:var(--green);color:var(--green)} .w-pick img{width:20px;height:20px;border-radius:4px;flex:0 0 auto} .w-copy{width:100%;background:#1b1f26;border:1px solid #3d5b66;color:#cddad6;font:inherit; font-size:11px;letter-spacing:.8px;padding:9px 10px;cursor:pointer;margin-top:2px} .w-copy:hover{border-color:var(--green)} .w-hint{display:block;color:#7e9196;font-size:10px;line-height:1.5;margin:7px 0 4px}