/* swag-city-plus | homepage styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: #1B0D0A; font-family: 'Courier New', 'Monaco', monospace; color: #F4D3B8; } .scene { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } /* the scene-frame holds the image AND the hotspots together, so hotspot percentages position correctly relative to the image, not the viewport */ .scene-frame { position: relative; /* aspect ratio matches the homepage.png (1024 x 571) */ aspect-ratio: 1024 / 571; max-width: 100vw; max-height: 100vh; width: auto; height: auto; } /* fit to whichever dimension is the constraint */ @media (min-aspect-ratio: 1024/571) { .scene-frame { height: 100vh; } } @media (max-aspect-ratio: 1024/571) { .scene-frame { width: 100vw; } } .scene-bg { width: 100%; height: 100%; display: block; /* critical for crisp pixel art — never let the browser smooth-scale */ image-rendering: pixelated; image-rendering: crisp-edges; user-select: none; -webkit-user-drag: none; } .hotspot { position: absolute; display: block; cursor: pointer; transition: filter 0.15s ease, background 0.15s ease; /* default: invisible */ } .hotspot:hover { background: rgba(244, 211, 184, 0.12); filter: drop-shadow(0 0 12px rgba(244, 211, 184, 0.6)); } .hotspot:focus-visible { outline: 2px dashed #F4D3B8; outline-offset: 2px; } /* DEBUG MODE — press 'd' to toggle, or add class="debug" to . shows where each hotspot lives so you can fine-tune positions */ .debug .hotspot { background: rgba(244, 211, 184, 0.25); border: 1px dashed #F4D3B8; } .debug .hotspot::after { content: attr(aria-label); position: absolute; bottom: -1.5em; left: 0; font-size: 10px; color: #F4D3B8; background: #1B0D0A; padding: 2px 4px; white-space: nowrap; }