/* * ═══════════════════════════════════════════════════ * SHARED DESIGN SYSTEM — v1.0 * Use across all apps on the M1 Air server * Fonts: load via Google Fonts in each app's * * ═══════════════════════════════════════════════════ */ /* ── DESIGN TOKENS ───────────────────────────────── */ :root { /* Backgrounds */ --bg: #0e0f11; /* page background */ --surface: #16181c; /* cards, panels */ --surface2: #1e2128; /* inputs, nested surfaces */ /* Borders */ --border: #2a2d35; /* Accent colours */ --accent: #c8f060; /* primary — lime green */ --accent2: #60c8f0; /* blue */ --accent3: #f06090; /* pink/red */ --accent4: #f0c060; /* yellow */ --accent5: #a060f0; /* purple */ --accent6: #60f0c0; /* teal */ /* Text */ --text: #e8eaf0; --text-muted: #7a7f90; --text-dim: #4a4f60; /* Shape */ --radius: 12px; --radius-sm: 6px; /* Typography */ --font-display: 'Syne', sans-serif; --font-mono: 'DM Mono', monospace; } /* ── LIGHT THEME ─────────────────────────────────── */ body.light { --bg: #f0f2f0; --surface: #ffffff; --surface2: #e8ece8; --border: #d0d8d0; --text: #1a1f1a; --text-muted: #5a6b5a; --text-dim: #a0b0a0; } body.light header { background: var(--bg); } body.light input[type="time"], body.light input[type="number"], body.light select { color: var(--text); } body.light select option { background: #ffffff; color: var(--text); } body.light .callout-num { color: #1a4a1a; } body.light .callout-sm-num { color: #1a4a1a; } /* ── SMOOTH THEME TRANSITIONS ────────────────────── */ body { transition: background 0.4s, color 0.4s; } header, .card, .form-card, .chart-card, .annual-card, .callout, .tab-bar, input, select { transition: background 0.4s, border-color 0.4s, color 0.4s; } /* ── RESET ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-mono); min-height: 100vh; overflow-x: hidden; } /* ── PAGE ENTRY ANIMATION ────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp 0.3s ease; } /* ── HEADER ──────────────────────────────────────── */ header { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 100; } .logo { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--text); } .logo span { color: var(--accent); } /* ── TABS ────────────────────────────────────────── */ .tab-bar { display: flex; gap: 4px; background: var(--surface); padding: 4px; border-radius: var(--radius); flex-wrap: wrap; } .tab-btn { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 18px; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; background: transparent; color: var(--text-muted); white-space: nowrap; } .tab-btn.active { background: var(--accent); color: #0e0f11; } .tab-btn:hover:not(.active) { background: var(--surface2); color: var(--text); } .tab-panel { display: none; } .tab-panel.active { display: block; animation: fadeUp 0.3s ease; } /* ── MAIN LAYOUT ─────────────────────────────────── */ main { padding: 32px; max-width: 1500px; margin: 0 auto; } /* ── CARDS ───────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: border-color 0.2s; } .card:hover { border-color: var(--text-dim); } .card-title { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; } .card-heading { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: 20px; } /* ── SECTION HEADINGS ────────────────────────────── */ .page-heading { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .section-label { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; display: block; } /* ── FORM ELEMENTS ───────────────────────────────── */ .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 28px; } .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: border-color 0.2s; } .form-card:hover { border-color: var(--text-dim); } input[type="text"], input[type="number"], input[type="time"], input[type="date"], input[type="password"], input[type="email"], select, textarea { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.9rem; transition: border-color 0.2s; appearance: none; -webkit-appearance: none; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } select option { background: var(--surface2); } textarea { resize: vertical; min-height: 100px; line-height: 1.6; } /* ── BUTTONS ─────────────────────────────────────── */ .btn-primary { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; padding: 14px 36px; background: var(--accent); color: #0e0f11; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; white-space: nowrap; } .btn-primary:hover { background: #d8ff70; transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-secondary { font-family: var(--font-mono); font-size: 0.75rem; padding: 7px 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; white-space: nowrap; } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .btn-danger { font-family: var(--font-mono); font-size: 0.75rem; padding: 7px 12px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; } .btn-danger:hover { border-color: var(--accent3); color: var(--accent3); } /* ── STATUS / SAVE FEEDBACK ──────────────────────── */ .save-status { font-size: 0.8rem; color: var(--text-muted); opacity: 0; transition: opacity 0.3s; } .save-status.visible { opacity: 1; color: var(--accent); } /* ── FILTER / TAG PILLS ──────────────────────────── */ .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .filter-btn { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; } .filter-btn:hover { border-color: var(--text-muted); color: var(--text); } .filter-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(200,240,96,0.08); } /* ── CALLOUT NUMBERS ─────────────────────────────── */ .callout { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 28px; min-width: 110px; text-align: center; } .callout-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--accent); line-height: 1; } .callout-label { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; } .callout-sm { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; min-width: 100px; text-align: center; } .callout-sm-num { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--accent); line-height: 1; } .callout-sm-label { font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; } /* ── EMPTY STATE ─────────────────────────────────── */ .empty-state { text-align: center; padding: 40px; color: var(--text-dim); font-size: 0.85rem; } /* ── SCROLLBAR ───────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* ── RESPONSIVE ──────────────────────────────────── */ @media (max-width: 900px) { main { padding: 16px; } header { padding: 12px 16px; flex-wrap: wrap; gap: 8px; } .tab-bar { width: 100%; } .tab-btn { font-size: 0.68rem; padding: 6px 12px; } .btn-secondary { font-size: 0.68rem; padding: 6px 10px; } .form-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { main { padding: 10px; } header { padding: 10px 12px; } .logo { font-size: 1rem; } .tab-btn { font-size: 0.62rem; padding: 5px 9px; } .form-card { padding: 14px; } .btn-primary { padding: 12px 24px; font-size: 0.85rem; } .filter-btn { font-size: 0.62rem; padding: 4px 10px; } .callout { padding: 14px 16px; min-width: 80px; } .callout-num { font-size: 1.8rem; } }