PROFERIS - Mi³osz Stocki
132 lines
4.7 KiB
CSS
132 lines
4.7 KiB
CSS
/* ============================================================
|
|
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; }
|