/* ============================================================================
pace club — Design System (theme.css)
Drop this into a new project as the base layer. Load the two fonts in your
first (see the comment block at the bottom), then build on these
tokens and component classes. Everything is driven by the CSS variables in
:root — use the variables, never hardcode colors.
============================================================================ */
/* ---------------------------------------------------------------- tokens --- */
:root {
/* surfaces, darkest → lightest */
--bg: #0d0c11; /* page background */
--bg-2: #100f15; /* slightly raised background */
--card: #16151c; /* cards, panels */
--card-2: #1d1c24; /* modals, nested cards */
/* borders — translucent white, never solid grey */
--border: rgba(255,255,255,0.08);
--border-strong: rgba(255,255,255,0.14);
/* text */
--text: #f2f1f4; /* primary */
--text-dim: #9b99a3; /* secondary / labels */
--text-faint: #6a6873; /* meta / timestamps */
/* accent + status. each has a solid + a 12% "dim" tint for fills.
pattern: bright status text sits on its own dim tint. */
--accent: #65c4ff; --accent-dim: rgba(101,196,255,0.12); /* blue — primary action / focus */
--green: #4ade80; --green-dim: rgba(74,222,128,0.12); /* success / done */
--amber: #fbbf24; --amber-dim: rgba(251,191,36,0.12); /* warning / in-progress */
--danger: #f87171; --danger-dim: rgba(248,113,113,0.12); /* destructive / error */
--radius: 14px; /* default card corner */
}
/* ------------------------------------------------------------- base/reset -- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.13); border-radius: 5px; }
/* --------------------------------------------------------------- headings -- */
/* Condensed uppercase display face. Apply .gothic to any heading.
Because the face is condensed you can go large (24–40px) without shouting. */
.gothic {
font-family: 'League Gothic', 'Oswald', sans-serif;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.02em;
}
.h1 { font-size: 32px; line-height: 1; }
.h2 { font-size: 26px; line-height: 1; }
.h3 { font-size: 20px; letter-spacing: .05em; }
/* Section title convention: dimmed gothic label above a block of content. */
.section-title {
font-family: 'League Gothic', sans-serif;
text-transform: uppercase;
font-size: 20px;
letter-spacing: .05em;
color: var(--text-dim);
margin-bottom: 12px;
}
/* Small form label above an input. */
.label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
/* Meta line (timestamps, secondary info). */
.meta { font-size: 12px; color: var(--text-faint); }
/* ---------------------------------------------------------------- cards ---- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card-raised { background: var(--card-2); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 20px; }
.card-accent { border-color: rgba(101,196,255,0.30); background: var(--accent-dim); }
/* --------------------------------------------------------------- buttons --- */
.btn { border: 0; font-weight: 600; font-size: 13.5px; padding: 10px 18px; border-radius: 10px; cursor: pointer; transition: all .15s; }
.btn.primary { background: var(--accent); color: #0d0c11; } /* dark text on blue */
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border-strong); }
.btn.ghost:hover { color: var(--text); border-color: var(--text-dim); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger-dim); }
.btn.danger:hover { background: var(--danger-dim); }
.btn:disabled { opacity: .5; cursor: default; }
/* Icon-only / text button (nav arrows, inline actions). */
.icon-btn { border: 0; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 15px; padding: 5px 8px; border-radius: 7px; transition: all .15s; }
.icon-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.icon-btn:disabled { opacity: .3; cursor: default; }
/* ---------------------------------------------------------------- inputs --- */
input, textarea, select {
width: 100%;
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: 10px;
color: var(--text);
font: inherit;
font-size: 14px;
padding: 11px 13px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 84px; }
.field { margin-bottom: 16px; }
/* ------------------------------------------------------- pills / tags ------ */
/* Status pill (small, 10px) — colored text on its dim tint. */
.pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 20px; }
.pill.blue { color: var(--accent); background: var(--accent-dim); }
.pill.green { color: var(--green); background: var(--green-dim); }
.pill.amber { color: var(--amber); background: var(--amber-dim); }
.pill.red { color: var(--danger); background: var(--danger-dim); }
.pill.grey { color: var(--text-dim); background: rgba(255,255,255,0.07); }
/* Neutral tag (11px) — categories / labels. */
.tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; background: rgba(255,255,255,0.07); color: var(--text-dim); }
.tag.blue { color: var(--accent); background: var(--accent-dim); }
.tag.green { color: var(--green); background: var(--green-dim); }
.tag.amber { color: var(--amber); background: var(--amber-dim); }
.tag.red { color: var(--danger); background: var(--danger-dim); }
/* ----------------------------------------------------- chips (filters) ----- */
.chip { font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; transition: all .12s; }
.chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* --------------------------------------------------------- progress bar ---- */
.bar { background: var(--bg); border-radius: 20px; height: 12px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 20px; transition: width .3s; }
.bar > i.full { background: var(--green); }
/* --------------------------------------------------------- live dot -------- */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; animation: pulse 2s infinite; }
.live-dot.amber { background: var(--amber); }
.live-dot.red { background: var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* ----------------------------------------------------------- modal --------- */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-bg.show { display: flex; }
.modal { background: var(--card-2); border: 1px solid var(--border-strong); border-radius: var(--radius); width: min(520px, 100%); padding: 26px; }
.modal-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
/* ----------------------------------------------------------- toast --------- */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(90px); background: var(--card-2); border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 20px; font-size: 13.5px; font-weight: 600; z-index: 200; transition: transform .3s cubic-bezier(.22,1,.36,1); box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.toast.show { transform: translateX(-50%) translateY(0); }
/* --------------------------------------------------------- app shell ------- */
/* Centered content column with comfortable gutters. */
.app { max-width: 1480px; margin: 0 auto; padding: 18px 24px 60px; }
/* Sticky top bar. */
.topbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 20px; margin-bottom: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); position: sticky; top: 10px; z-index: 50; backdrop-filter: blur(12px); }
.spacer { flex: 1; }
/* Vertical sidebar nav item. */
.nav-item { display: block; padding: 12px 16px; border-radius: 10px; color: var(--text-dim); font-weight: 600; cursor: pointer; }
.nav-item:hover { color: var(--text); }
.nav-item.active { background: var(--card); color: var(--text); }
@media (max-width: 720px) {
.app { width: 90%; max-width: 90%; padding: 12px 0 44px; margin: 0 auto; }
html, body { overflow-x: hidden; }
}
/* ============================================================================
Load these fonts in before this stylesheet:
Principles:
- Layer dark surfaces by lightness (bg → card → card-2), not by hard borders.
- Borders are always low-opacity white. Never solid grey.
- Color is semantic and sparse: blue = action/focus, green = done,
amber = in-progress/warning, red = destructive.
- Headings are the one loud element (big condensed uppercase); the rest stays
quiet and legible.
- Rounded but not bubbly: 10–14px, pills fully round (20px).
- Motion is minimal: brightness/border shifts, not transforms.
============================================================================ */