Initial commit

2026-07-06 11:34:03 +02:00
commit 67b4eda6aa
12 changed files with 2735 additions and 0 deletions
@@ -0,0 +1,131 @@
+/* ============================================================
+   WijiBoard — Design Tokens, Reset & Typography
+   web/styles/base.css
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+/* ── Design tokens ─────────────────────────────────────────── */
+:root {
+  /* Background layers */
+  --bg:           #0d0f14;
+  --surface:      #161923;
+  --surface-2:    #1e2330;
+  --surface-3:    #252a3a;
+
+  /* Borders */
+  --border:       rgba(255, 255, 255, 0.07);
+  --border-hover: rgba(255, 255, 255, 0.14);
+
+  /* Accent palette */
+  --accent-blue:   #448aff;
+  --accent-green:  #00e676;
+  --accent-red:    #ff5252;
+  --accent-amber:  #ffca28;
+  --accent-purple: #e040fb;
+
+  /* Text */
+  --text-primary:   #e8eaf0;
+  --text-secondary: #a0a8bc;
+  --text-muted:     #6c7385;
+
+  /* Glow effects */
+  --glow-blue:   0 0 28px rgba(68,  138, 255, 0.45);
+  --glow-green:  0 0 28px rgba(0,   230, 118, 0.50);
+  --glow-red:    0 0 28px rgba(255,  82,  82, 0.38);
+  --glow-amber:  0 0 20px rgba(255, 202,  40, 0.40);
+
+  /* Layout */
+  --sidebar-width:    240px;
+  --topbar-height:    60px;
+  --content-padding:  24px;
+
+  /* Shape */
+  --radius-xl: 20px;
+  --radius-lg: 16px;
+  --radius-md: 12px;
+  --radius-sm: 8px;
+  --radius-xs: 5px;
+
+  /* Motion */
+  --transition:      0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 0.38s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Reset ─────────────────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  background: var(--bg);
+  color: var(--text-primary);
+  font-size: 14px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* Ambient background glow */
+  background-image:
+    radial-gradient(ellipse 70% 40% at 50% 0%,  rgba(68, 138, 255, 0.09) 0%, transparent 70%),
+    radial-gradient(ellipse 40% 30% at 90% 80%,  rgba(0,  230, 118, 0.06) 0%, transparent 60%);
+}
+
+/* ── Typography scale ───────────────────────────────────────── */
+h1 { font-size: 1.6rem;  font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
+h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;  line-height: 1.3; }
+h3 { font-size: 1rem;    font-weight: 600; letter-spacing: -0.01em;  }
+h4 { font-size: 0.875rem;font-weight: 600; }
+
+p  { color: var(--text-secondary); line-height: 1.7; }
+a  { color: var(--accent-blue); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+small { font-size: 0.75rem; color: var(--text-muted); }
+
+/* ── Utility: visually hidden ───────────────────────────────── */
+.sr-only {
+  position: absolute; width: 1px; height: 1px;
+  padding: 0; margin: -1px; overflow: hidden;
+  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
+}
+
+/* ── Utility: scrollbars ────────────────────────────────────── */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface-3) transparent;
+}
+*::-webkit-scrollbar          { width: 5px; height: 5px; }
+*::-webkit-scrollbar-track    { background: transparent; }
+*::-webkit-scrollbar-thumb    { background: var(--surface-3); border-radius: 3px; }
+*::-webkit-scrollbar-thumb:hover { background: var(--surface-2); }
+
+/* ── Utility: spinner ───────────────────────────────────────── */
+@keyframes spin { to { transform: rotate(360deg); } }
+.spinner {
+  width: 16px; height: 16px;
+  border: 2px solid rgba(255,255,255,0.15);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: spin 0.65s linear infinite;
+}
+
+/* ── Utility: pulse ─────────────────────────────────────────── */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+
+/* ── Utility: fade-in ───────────────────────────────────────── */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.fade-in { animation: fadeIn 0.3s var(--transition) both; }