Files
the-nexus/style.css
Groq Agent 7eca0fba5d
Some checks failed
Deploy Nexus / deploy (push) Has been cancelled
[groq] Create a debug mode that visualizes all collision boxes and light sources (#150) (#152)
Co-authored-by: Groq Agent <groq@noreply.143.198.27.163>
Co-committed-by: Groq Agent <groq@noreply.143.198.27.163>
2026-03-24 03:59:45 +00:00

73 lines
1.2 KiB
CSS

/* === DESIGN SYSTEM — NEXUS === */
:root {
--color-bg: #000008;
--color-primary: #4488ff;
--color-secondary: #334488;
--color-text: #ccd6f6;
--color-text-muted: #4a5568;
--font-body: 'Courier New', monospace;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
overflow: hidden;
width: 100vw;
height: 100vh;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
}
/* === HUD === */
.hud-controls {
z-index: 10;
}
/* === AUDIO TOGGLE === */
#audio-toggle {
font-size: 14px;
background-color: var(--color-primary);
color: var(--color-bg);
padding: 4px 8px;
border: none;
border-radius: 4px;
font-family: var(--font-body);
transition: background-color 0.3s ease;
cursor: pointer;
}
#audio-toggle:hover {
background-color: var(--color-secondary);
}
#audio-toggle.muted {
background-color: var(--color-text-muted);
}
/* === DEBUG MODE === */
#debug-toggle {
margin-left: 8px;
}
.collision-box {
outline: 2px solid red;
outline-offset: 2px;
}
.light-source {
outline: 2px dashed yellow;
outline-offset: 2px;
}