@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #1a1a2e; --panel: #12121f; --border: #2a2a4a; --text: #eee; --muted: #888; --coral: #f07860; --purple: #6f32d1; --teal: #7fdbca; } /* defaults stay dark — light is opt-in via the toggle, applied as an attribute on so an inline head script can set it before paint and avoid a flash of the wrong theme. */ :root[data-theme="light"] { --bg: #f2efe4; --panel: #ffffff; --border: #ddd6c4; --text: #1a1a2e; --muted: #7a7568; /* the dark theme's pastel teal (#7fdbca) has poor contrast on a light background — darkened here so it stays readable instead of just re-tinting everything else. */ --teal: #0f8f75; } .theme-toggle { background: var(--panel); border: 1px solid var(--border); color: var(--muted); border-radius: 0; padding: 6px 10px; cursor: pointer; font-size: 12px; transition: border-color .15s, transform .15s; line-height: 1; } .theme-toggle:hover { border-color: var(--coral); transform: scale(1.06); } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: 'Space Mono', monospace; overflow: hidden; display: flex; flex-direction: column; } h1 { letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-size: 13px; text-align: center; } .pixel { image-rendering: pixelated; image-rendering: crisp-edges; display: block; } .btn { background: var(--coral); color: #1a1a2e; border: none; border-radius: 0; padding: 12px 28px; font-family: inherit; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: transform .15s; } .btn:hover { transform: scale(1.05); } .btn.ghost { background: transparent; border: 1px solid var(--coral); color: var(--coral); } .btn.small { padding: 8px 14px; font-size: 10px; } .btn.ghost.active { background: var(--coral); color: #1a1a2e; } .btn:disabled { opacity: .4; cursor: default; transform: none; } /* fixed + negative z-index: pinned to viewport (visible through the whole scroll), painted above body background but below all normal in-flow content. */ #hero-stars { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .star { position: absolute; width: 2px; height: 2px; background: #7fdbca; opacity: .5; } /* ---------- tank section (top of site, fills the viewport — no page scroll needed) ---------- */ #tank-section { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 24px 12px; max-width: 1440px; margin: 0 auto; width: 100%; } #tagline { font-size: 18px; color: var(--muted); text-align: center; margin: 8px 0 4px; flex-shrink: 0; } #subtagline { font-size: 14px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 14px; flex-shrink: 0; } #tank-controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; flex-shrink: 0; } #gallery-filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .filter-chip { padding: 4px 12px; border-radius: 0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; } .filter-chip.active { border-color: var(--coral); color: var(--coral); } #tank-stage { position: relative; flex: 1; min-height: 0; } .gallery-grid.aquarium { position: relative; height: 100%; width: 100%; display: block; overflow: hidden; border: 1px solid var(--border); border-radius: 0; background: linear-gradient(180deg, rgba(111,50,209,.06), rgba(127,219,202,.04)); touch-action: none; transition: background 1.5s ease; cursor: url("assets/dollar-cursor.png") 18 12, pointer; } .gallery-grid.aquarium .gallery-item { position: absolute; margin: 0; cursor: grab; will-change: left, top; background: var(--panel); border: 1px solid var(--border); border-radius: 0; padding: 8px; transition: filter .8s ease; } .gallery-grid.aquarium .gallery-item svg { width: 100%; height: auto; } .gallery-grid.aquarium .gallery-item.dragging { cursor: grabbing; z-index: 5; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); } .gallery-grid.aquarium .gallery-item.bumped { animation: bump .2s ease-out; } @keyframes bump { 0% { filter: brightness(1); } 50% { filter: brightness(1.4); } 100% { filter: brightness(1); } } /* ---------- food pellet ---------- */ .food-pellet { position: absolute; width: 70px; height: 40px; background-image: url("assets/dollar.png"); background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; filter: drop-shadow(0 0 10px rgba(120, 220, 120, .8)); z-index: 3; animation: pelletPulse 1s infinite alternate; } @keyframes pelletPulse { from { transform: scale(1); } to { transform: scale(1.15); } } @keyframes pelletEaten { to { transform: scale(0); opacity: 0; } } /* ---------- feed-me speech bubble ---------- */ .feed-bubble { position: absolute; display: none; transform: translate(-50%, -100%); background: #fff; color: #1a1a2e; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: lowercase; padding: 5px 12px; border-radius: 0; white-space: nowrap; z-index: 8; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.35); } .feed-bubble::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; } /* ---------- stats bar ---------- */ #stats-bar { position: fixed; bottom: 20px; right: 20px; z-index: 50; text-align: right; } #pixel-count { font-size: 13px; font-weight: 700; color: var(--teal); } /* ---------- top nav ---------- */ #site-nav { display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 0; padding: 5px; margin: 10px auto; width: fit-content; } #site-nav a { color: var(--muted); text-decoration: none; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; transition: background .15s, color .15s; padding: 6px 16px; border-radius: 0; } #site-nav a:hover { color: var(--coral); } #site-nav a.active { background: var(--coral); color: #1a1a2e; font-weight: 700; } .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(5,5,15,.75); z-index: 200; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.open { display: flex; } .modal.lore-book { position: relative; background: var(--panel); border: 2px solid var(--border); border-radius: 0; box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--border), 0 20px 60px rgba(0,0,0,.5); padding: 40px 36px 28px; width: min(92vw, 560px); min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; } footer { text-align: center; padding: 8px 8px 16px; color: var(--muted); font-size: 9px; flex-shrink: 0; } footer a { color: var(--muted); text-decoration: none; transition: color .15s; } footer a:hover { color: var(--coral); } @media (max-width: 600px) { #tank-section { padding: 12px 16px 8px; } /* on short mobile screens the fixed corner buttons and the footer text sit at the same bottom edge and overlap — lift the buttons clear of the footer row. */ #stats-bar { bottom: 48px; } #pixel-count { font-size: 10px; } }