/* makeme42 — interactive switcher * Anti-landing aesthetic: black, sharp corners, mono + Syne display, accent * per concept. Fully responsive (phone / tablet / desktop), dvh-based, safe * areas honoured. Only ONE concept renders at a time. */ :root { --accent: #ff0040; --ink: #161616; --pad-x: clamp(20px, 4vw, 38px); --pad-top: clamp(16px, 2.6vh, 22px); /* brand removed — description rises to its old spot */ --pad-bottom: clamp(84px, 11vh, 104px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: #000; color: #fff; font-family: 'Space Mono', monospace; -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; } button { font-family: inherit; cursor: pointer; } .muted { opacity: 0.55; } @keyframes mm-pulse { 0%,100% { transform: scale(1); opacity: .5 } 50% { transform: scale(1.6); opacity: .95 } } @keyframes mm-blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } } @keyframes mm-fade { from { opacity: 0 } to { opacity: 1 } } /* ===================== WEBGL GATE ===================== */ /* When the device has no WebGL we refuse entry: hide the whole experience and show only the gate. .no-webgl is set on before first paint. */ .no-webgl #stage, .no-webgl .chrome, .no-webgl .index, .no-webgl .toast { display: none !important; } .gate { display: none; } .no-webgl .gate { display: flex; position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; align-items: center; justify-content: center; text-align: center; font-family: 'Space Mono', monospace; padding: calc(40px + var(--safe-t)) calc(var(--pad-x) + var(--safe-r)) calc(40px + var(--safe-b)) calc(var(--pad-x) + var(--safe-l)); } .gate-inner { max-width: 580px; } .gate-tag { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(20px, 3vw, 26px); letter-spacing: -1px; margin-bottom: clamp(20px, 4vh, 36px); } .gate-title { margin: 0; font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(48px, 13vw, 116px); line-height: .82; letter-spacing: -3px; } .gate-sub { margin-top: clamp(20px, 4vh, 30px); font-size: clamp(12px, 2.6vw, 15px); line-height: 1.6; text-transform: uppercase; letter-spacing: 2px; } .gate-hint { margin-top: 18px; font-size: 11px; line-height: 1.6; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); } /* ===================== STAGE ===================== */ #stage { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; background: #000; overflow: hidden; outline: none; touch-action: none; /* pointer drags drive the visuals */ cursor: crosshair; } #cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(45deg, #0a0a0a 0 12px, #0e0e0e 12px 24px); padding: 30px; z-index: 2; } .fallback.show { display: flex; } .fb-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(28px, 6vw, 48px); color: var(--accent); } .fb-sub { margin-top: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; opacity: .6; } /* ===================== OVERLAY (blend-difference text) ===================== */ .overlay { position: absolute; inset: 0; padding: calc(var(--pad-top) + var(--safe-t)) calc(var(--pad-x) + var(--safe-r)) var(--pad-bottom) calc(var(--pad-x) + var(--safe-l)); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; mix-blend-mode: difference; color: #fff; z-index: 3; } .meta-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; } .copy { max-width: min(46vw, 360px); line-height: 1.6; } .hero { max-width: 980px; } .title { margin: 0; font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(44px, 11.5vw, 122px); line-height: .82; letter-spacing: -3px; } .title.mono { font-family: 'Syne', sans-serif; } .hint { margin-top: 16px; max-width: 760px; font-size: clamp(10px, 1.4vw, 12px); text-transform: uppercase; letter-spacing: 3px; opacity: 0; transition: opacity 1s; } /* ===================== BEACON (the hidden "leave a message" button) ===================== */ /* Small, non-blocking; JS positions it (left/top px), transform centres it on the point. Found via each concept's mechanic, then it persists so you can keep playing and open the message form whenever you want. */ .beacon { position: fixed; z-index: 8; display: none; align-items: center; gap: 9px; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--accent); color: #fff; font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; padding: 11px 16px; min-height: 44px; max-width: 86vw; white-space: nowrap; transform: translate(-50%, -50%) scale(.9); opacity: 0; transition: opacity .5s ease, transform .5s ease, border-color .15s, background .15s, color .15s; } .beacon.show { display: inline-flex; opacity: 1; transform: translate(-50%, -50%) scale(1); } .beacon:hover, .beacon:focus-visible { background: var(--accent); color: #000; outline: none; } .beacon:hover .beacon-dot, .beacon:focus-visible .beacon-dot { background: #000; animation: none; } .beacon-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; animation: mm-pulse 1.6s ease-in-out infinite; } .beacon-label { line-height: 1; } /* ===================== MESSAGE MODAL ===================== */ .msg { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; padding: calc(20px + var(--safe-t)) calc(16px + var(--safe-r)) calc(20px + var(--safe-b)) calc(16px + var(--safe-l)); } .msg.open { display: flex; } .msg-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: mm-fade .25s ease; } .msg-card { position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: #0c0c0c; border: 1px solid var(--accent); padding: clamp(24px, 5vw, 40px); animation: mm-fade .25s ease; } .msg-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; background: transparent; border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 15px; transition: border-color .15s, color .15s; } .msg-close:hover { border-color: var(--accent); color: var(--accent); } .msg-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 3px; color: var(--accent); margin-bottom: 14px; } .msg-heading { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(26px, 5vw, 38px); line-height: .92; margin-bottom: 18px; padding-right: 36px; } .msg-text { width: 100%; background: #000; border: 1px solid #222; color: #fff; font-family: 'Space Mono', monospace; font-size: 16px; line-height: 1.5; padding: 14px; resize: vertical; min-height: 120px; letter-spacing: .3px; /* 16px avoids iOS focus auto-zoom */ } .msg-text:focus { outline: none; border-color: var(--accent); } .msg-text::placeholder { color: rgba(255,255,255,.35); } .msg-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; flex-wrap: wrap; } .msg-count { font-size: 10px; letter-spacing: 1px; opacity: .45; } .msg-send { background: var(--accent); color: #000; border: none; font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; padding: 13px 22px; min-height: 46px; transition: transform .12s, opacity .15s; } .msg-send:hover { transform: translateY(-2px); } .msg-send:disabled { opacity: .35; cursor: default; transform: none; } .msg-foot { margin-top: 14px; font-size: 10px; letter-spacing: 1px; opacity: .45; line-height: 1.5; } .msg-error { margin-top: 12px; font-size: 11px; line-height: 1.5; letter-spacing: .5px; color: #ff5a5a; border-left: 2px solid #ff5a5a; padding-left: 10px; } .msg.msg-terminal .msg-error { color: #ff7a7a; border-color: #ff7a7a; } .msg-sent-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(34px, 7vw, 50px); line-height: .9; color: var(--accent); } .msg-sent-body { margin-top: 14px; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; opacity: .8; word-break: break-word; } .msg-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; } .msg-more { background: var(--accent); color: #000; border: none; font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; padding: 14px 26px; min-height: 48px; transition: transform .12s; } .msg-more:hover { transform: translateY(-2px); } .msg-done { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25); font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; padding: 14px 20px; min-height: 48px; transition: border-color .15s, color .15s; } .msg-done:hover { border-color: var(--accent); color: var(--accent); } /* glitch concept → terminal-styled message modal */ .msg.msg-terminal .msg-card { background: #050805; } .msg.msg-terminal .msg-tag::before { content: '> '; } .msg.msg-terminal .msg-heading { font-family: 'Space Mono', monospace; font-weight: 700; font-size: clamp(18px, 4.4vw, 24px); letter-spacing: 0; } .msg.msg-terminal .msg-text { color: var(--accent); caret-color: var(--accent); } /* ===================== CHROME ===================== */ /* The persistent switcher (brand, session badge, counter, "all versions" button, prev/next arrows, footer version bar) was removed — navigation is now random-only (refresh or "ЕЩЁ" after sending). The hidden index grid remains reachable via the "g" key for power users; its accent dot: */ .index-title .dot { color: var(--accent); } /* ===================== INDEX GRID ===================== */ .index { position: fixed; inset: 0; z-index: 20; background: #0a0a0a; opacity: 0; visibility: hidden; transition: opacity .25s; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: calc(24px + var(--safe-t)) calc(var(--pad-x) + var(--safe-r)) calc(40px + var(--safe-b)) calc(var(--pad-x) + var(--safe-l)); } .index.open { opacity: 1; visibility: visible; } .index-head { position: relative; border-bottom: 2px solid var(--ink); padding-bottom: 16px; margin-bottom: 22px; } .index-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(32px, 7vw, 60px); line-height: .9; letter-spacing: -2px; padding-right: 60px; } .index-sub { margin-top: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; opacity: .55; max-width: 520px; } .index-close { position: absolute; top: 0; right: 0; width: 46px; height: 46px; background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 18px; transition: border-color .15s, color .15s; } .index-close:hover { border-color: var(--accent); color: var(--accent); } .index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .tile { position: relative; text-align: left; background: #0e0e0e; border: 1px solid #1d1d1d; color: #fff; padding: 16px 16px 18px; min-height: 116px; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, transform .15s, background .15s; } .tile:hover { border-color: var(--ac); transform: translateY(-3px); background: #121212; } .tile.active { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); } .tile-num { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 30px; color: var(--ac); line-height: 1; } .tile-dot { position: absolute; top: 18px; right: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--ac); } .tile-name { margin-top: auto; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; } .tile-en { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; opacity: .5; } /* ===================== TOAST ===================== */ .toast { position: fixed; left: 50%; bottom: calc(84px + var(--safe-b)); transform: translateX(-50%) translateY(12px); z-index: 15; max-width: min(90vw, 460px); text-align: center; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 12px; line-height: 1.6; letter-spacing: .5px; padding: 13px 18px; opacity: 0; visibility: hidden; transition: opacity .4s, transform .4s; cursor: pointer; } .toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ===================== MOBILE ===================== */ @media (max-width: 760px) { :root { --pad-bottom: clamp(48px, 9vh, 72px); } .copy { max-width: 62vw; font-size: 10px; } .meta-top { gap: 10px; } .title { letter-spacing: -2px; overflow-wrap: anywhere; } /* message form must sit above the on-screen keyboard, not be centered under it */ .msg { align-items: flex-start; } .msg-card { max-height: calc(100dvh - 24px); } .msg-text { min-height: 84px; } .msg-tag { padding-right: 44px; } /* keep the anonymity tag clear of the ✕ */ .index-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .tile { min-height: 100px; padding: 13px; } .tile-num { font-size: 26px; } .toast { bottom: calc(96px + var(--safe-b)); font-size: 11px; } } @media (max-width: 420px) { .copy { max-width: 78vw; } /* description stays — it's the only top text now */ .title { font-size: clamp(30px, 12vw, 52px); } /* fits long single-word titles (НАЛОЖЕНИЕ, ПЕРЕСБОРКА) */ .index-grid { grid-template-columns: repeat(2, 1fr); } } /* ===================== REDUCED MOTION ===================== */ @media (prefers-reduced-motion: reduce) { .beacon-dot { animation: none !important; } .beacon, .hint, .toast, .tile, .msg-send, .msg-more, .msg-done { transition: none; } .msg-backdrop, .msg-card { animation: none; } }