/* iTimeCard — shared base styles and design tokens. Plain CSS, no framework. Page-specific styles live in /CSS/.css */ :root { /* Surfaces */ --background: #faf8ff; --surface: #faf8ff; --surface-container-lowest: #ffffff; --surface-container-low: #f3f3fe; --surface-container: #ededf9; --surface-container-high: #e7e7f3; --surface-container-highest: #e1e2ed; --surface-dim: #d9d9e5; --inverse-surface: #2e3039; --inverse-on-surface: #f0f0fb; /* Primary */ --primary: #004ac6; --primary-container: #2563eb; --on-primary: #ffffff; --on-primary-container: #eeefff; --primary-fixed: #dbe1ff; --primary-fixed-dim: #b4c5ff; /* Secondary (worked/active accents) */ --secondary: #006c49; --secondary-container: #6cf8bb; --on-secondary-container: #00714d; --secondary-fixed-dim: #4edea3; /* Tertiary / status */ --tertiary: #943700; /* Error */ --error: #ba1a1a; --error-container: #ffdad6; --on-error: #ffffff; /* Text + lines */ --on-surface: #191b23; --on-surface-variant: #434655; --outline: #737686; --outline-variant: #c3c6d7; /* Spacing scale */ --space-xs: 4px; --space-base: 8px; --space-sm: 12px; --space-md: 24px; --space-lg: 48px; --space-xl: 64px; /* Radius */ --radius-lg: 4px; --radius-xl: 8px; --radius-full: 12px; --container-max: 1280px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.10); --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Dark theme (toggled by adding .dark to ) */ html.dark { --background: #111318; --surface: #111318; --surface-container-lowest: #0c0e13; --surface-container-low: #191b23; --surface-container: #1d1f27; --surface-container-high: #282a32; --surface-container-highest: #33353d; --surface-dim: #111318; --on-surface: #e2e2e9; --on-surface-variant: #c3c6d7; --outline: #8d909f; --outline-variant: #434655; --primary: #b4c5ff; --on-primary: #00306e; --primary-container: #003ea8; --on-primary-container: #dbe1ff; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { background: var(--background); color: var(--on-surface); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; user-select: none; } /* ---------- Typography helpers ---------- */ .mono { font-family: var(--font-mono); } .label-caps { font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; } .headline { font-size: 20px; line-height: 28px; font-weight: 600; } .display { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; } .muted { color: var(--on-surface-variant); } .small { font-size: 14px; } /* ---------- Layout ---------- */ .container { max-width: var(--container-max); margin: 0 auto; width: 100%; padding: 0 var(--space-md); } /* ---------- App header ---------- */ .app-header { height: 64px; background: var(--surface); border-bottom: 1px solid var(--outline-variant); position: sticky; top: 0; z-index: 40; } .app-header__inner { max-width: var(--container-max); margin: 0 auto; height: 100%; padding: 0 var(--space-md); display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: var(--space-xs); color: var(--primary); font-weight: 700; font-size: 20px; } .brand .material-symbols-outlined { font-variation-settings: 'FILL' 1; font-size: 28px; } /* User menu */ .user-menu { position: relative; } .user-menu__btn { display: flex; align-items: center; gap: var(--space-sm); padding: 4px 8px; border: 0; background: transparent; border-radius: var(--radius-full); cursor: pointer; color: var(--on-surface); } .user-menu__btn:hover { background: var(--surface-container); } .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--primary-fixed-dim); border: 1px solid var(--outline-variant); } .user-menu__dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-full); box-shadow: var(--shadow-md); padding: 6px; display: none; } .user-menu__dropdown.open { display: block; } .user-menu__dropdown a, .user-menu__dropdown button { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: 8px 12px; border: 0; background: transparent; border-radius: var(--radius-lg); color: var(--on-surface); font: inherit; text-align: left; cursor: pointer; } .user-menu__dropdown a:hover, .user-menu__dropdown button:hover { background: var(--surface-container-low); text-decoration: none; } /* ---------- Top navigation ---------- */ .topnav { background: var(--surface-container-low); border-bottom: 1px solid var(--outline-variant); position: sticky; top: 64px; z-index: 30; } .topnav__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); display: flex; align-items: center; gap: var(--space-lg); overflow-x: auto; height: 48px; scrollbar-width: none; } .topnav__inner::-webkit-scrollbar { display: none; } .topnav a { font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; color: var(--on-surface-variant); white-space: nowrap; height: 100%; display: flex; align-items: center; border-bottom: 2px solid transparent; } .topnav a:hover { color: var(--primary); text-decoration: none; } .topnav a.active { color: var(--primary); border-bottom-color: var(--primary); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-base); padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-xl); background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; } .btn:hover { background: var(--primary-container); } .btn:active { transform: scale(0.98); } .btn--secondary { background: transparent; color: var(--primary); border-color: var(--outline-variant); cursor: pointer; } .btn--secondary:hover { background: var(--surface-container); } .btn--danger { background: var(--error); color: var(--on-error); cursor: pointer; } .btn--danger:hover { background: var(--error); filter: brightness(1.05); } .btn--icon { padding: 8px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--outline-variant); color: var(--on-surface-variant); cursor: pointer; } .btn--icon:hover { background: var(--surface-container); } .btn--block { width: 100%; } /* ---------- Cards ---------- */ .card { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-full); padding: var(--space-md); box-shadow: var(--shadow-sm); } /* ---------- Forms ---------- */ .field { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-sm); } .field>label { font-size: 12px; letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; color: var(--on-surface-variant); } input, select, textarea { width: 100%; padding: 10px 12px; font: inherit; color: var(--on-surface); background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0, 74, 198, 0.12); } .field__hint { font-size: 13px; color: var(--on-surface-variant); opacity: 0.8; } /* Toggle switch */ .switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; padding: 0; } .switch__track { position: absolute; inset: 0; background: var(--outline-variant); border-radius: 999px; transition: background 0.15s ease; } .switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; } .switch input:checked+.switch__track { background: var(--primary); } .switch input:checked+.switch__track::after { transform: translateX(20px); } /* ---------- Modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: none; align-items: center; justify-content: center; padding: var(--space-md); z-index: 60; } .modal-backdrop.open { display: flex; } .modal { width: 100%; max-width: 560px; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-full); box-shadow: var(--shadow-md); padding: var(--space-md); } .modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); } /* ---------- Misc helpers ---------- */ .row { display: flex; align-items: center; gap: var(--space-sm); } .row--between { justify-content: space-between; } .stack { display: flex; flex-direction: column; gap: var(--space-md); } .page { max-width: var(--container-max); margin: 0 auto; width: 100%; padding: var(--space-md); } .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-lg); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--secondary-container); color: var(--on-secondary-container); } .hidden { display: none !important; } /* A few shared helpers (used instead of inline styles) */ .text-center { text-align: center; } .text-primary { color: var(--primary); } .text-error { color: var(--error); } .fw-bold { font-weight: 700; } .card--flush { padding: 0; } .brand .badge { margin-left: var(--space-base); }