Initial commit

frontend/src/styles/global.css

@@ -0,0 +1,124 @@
+@import './retro-theme.css';
+
+@font-face {
+  font-family: 'Press Start 2P';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/press-start-2p-latin.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'VT323';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/vt323-latin.woff2') format('woff2');
+}
+
+html {
+  font-size: 18px;
+}
+
+body {
+  font-family: 'VT323', monospace;
+  background: var(--retro-bg);
+  color: var(--retro-fg);
+  line-height: 1.4;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: var(--retro-green);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+button, .btn {
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.65rem;
+  padding: 12px 16px;
+  border: 3px solid var(--retro-green);
+  background: var(--retro-panel);
+  color: var(--retro-green);
+  cursor: pointer;
+  text-transform: uppercase;
+  box-shadow: 3px 3px 0px rgba(0,0,0,0.15);
+}
+
+button:disabled, .btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+input[type="text"],
+input[type="password"] {
+  font-family: 'VT323', monospace;
+  font-size: 1.1rem;
+  padding: 10px 12px;
+  border: 2px solid var(--retro-border);
+  background: #fff;
+  color: var(--retro-fg);
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+input:focus {
+  border-color: var(--retro-green);
+}
+
+.retro-heading {
+  font-family: 'Press Start 2P', cursive;
+  font-size: clamp(0.9rem, 3vw, 1.4rem);
+  line-height: 1.6;
+  color: var(--retro-green);
+  background: linear-gradient(135deg, var(--retro-green), var(--retro-green-light), var(--retro-green));
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+@keyframes gradient-shift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  button, .btn {
+    transition: transform 0.1s ease, box-shadow 0.1s ease;
+  }
+  button:hover, .btn:hover {
+    transform: translate(-1px, -1px);
+    box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
+  }
+  button:active, .btn:active {
+    transform: translate(2px, 2px);
+    box-shadow: 1px 1px 0px rgba(0,0,0,0.15);
+  }
+  .retro-heading {
+    animation: gradient-shift 3s ease infinite;
+  }
+}
+
+@media (max-width: 768px) {
+  html { font-size: 17px; }
+}
+
+@media (max-width: 480px) {
+  html { font-size: 16px; }
+  button, .btn { font-size: 0.55rem; padding: 10px 12px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

frontend/src/styles/retro-theme.css

@@ -0,0 +1,12 @@
+:root {
+  --retro-bg: #fafafa;
+  --retro-fg: #111111;
+  --retro-green: #1a4a1a;
+  --retro-green-light: #2e8b2e;
+  --retro-accent: #0f380f;
+  --retro-border: #cccccc;
+  --retro-panel: #ffffff;
+  --retro-shadow: rgba(0, 0, 0, 0.12);
+  --retro-danger: #8b1a1a;
+  --retro-warning: #8b5a1a;
+}