/* ========================================================================= Orbit — design tokens (light + dark) Light mode is the default. Dark mode applies automatically via prefers-color-scheme, or can be forced with . ========================================================================= */ :root { /* Palette (light mode) */ --c-bg: #fafaf9; --c-surface: #ffffff; --c-surface-alt: #f5f5f4; --c-fg: #1e293b; /* slate-800 */ --c-muted: #64748b; /* slate-500 */ --c-border: #e2e8f0; /* slate-200 */ --c-accent: #4f46e5; /* indigo-600 */ --c-accent-hover: #4338ca; /* indigo-700 */ --c-accent-soft: #eef2ff; /* indigo-50 */ --c-warm: #f59e0b; /* amber-500 */ --c-success-bg: #d1fae5; --c-success-fg: #065f46; --c-warning-bg: #fef3c7; --c-warning-fg: #78350f; --c-error-bg: #fee2e2; --c-error-fg: #991b1b; --c-event-text: #1a1a2e; /* dark text that reads on all pastel chips */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.10); /* Type */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* Rhythm */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; } @media (prefers-color-scheme: dark) { :root { --c-bg: #0f172a; /* slate-900 */ --c-surface: #1e293b; /* slate-800 */ --c-surface-alt: #334155; /* slate-700 */ --c-fg: #e2e8f0; /* slate-200 */ --c-muted: #94a3b8; /* slate-400 */ --c-border: #334155; /* slate-700 */ --c-accent: #a5b4fc; /* indigo-300 - brighter for dark bg */ --c-accent-hover: #c7d2fe; --c-accent-soft: #1e1b4b; /* indigo-950 */ --c-warm: #fbbf24; --c-success-bg: #065f46; --c-success-fg: #d1fae5; --c-warning-bg: #78350f; --c-warning-fg: #fef3c7; --c-error-bg: #991b1b; --c-error-fg: #fee2e2; --c-event-text: #0f172a; /* pastels stay light; text stays dark */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.55); } } /* Explicit overrides (for the future theme switcher). */ html[data-theme="light"] { color-scheme: light; --c-bg: #fafaf9; --c-surface: #fff; --c-surface-alt: #f5f5f4; --c-fg: #1e293b; --c-muted: #64748b; --c-border: #e2e8f0; --c-accent: #4f46e5; --c-accent-hover: #4338ca; --c-accent-soft: #eef2ff; --c-warm: #f59e0b; } html[data-theme="dark"] { color-scheme: dark; --c-bg: #0f172a; --c-surface: #1e293b; --c-surface-alt: #334155; --c-fg: #e2e8f0; --c-muted: #94a3b8; --c-border: #334155; --c-accent: #a5b4fc; --c-accent-hover: #c7d2fe; --c-accent-soft: #1e1b4b; --c-warm: #fbbf24; } /* ========================================================================= Base ========================================================================= */ * { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; font-family: var(--font-sans); background: var(--c-bg); color: var(--c-fg); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-4); } h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; } h2 { font-size: 1.25rem; font-weight: 600; } h3 { font-size: 1rem; font-weight: 600; } p { margin: 0 0 var(--space-4); } a { color: var(--c-accent); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--c-accent-hover); text-decoration: underline; } code { font-family: var(--font-mono); font-size: 0.9em; } hr { border: none; border-top: 1px solid var(--c-border); margin: var(--space-6) 0; } /* ========================================================================= Header / Nav ========================================================================= */ .app-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--c-border); background: var(--c-surface); } .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 1.125rem; text-decoration: none; color: var(--c-fg); letter-spacing: -0.01em; } .brand:hover { color: var(--c-accent); text-decoration: none; } .brand svg { color: var(--c-accent); flex-shrink: 0; } .app-header nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .app-header nav a { color: var(--c-fg); font-size: 0.95rem; } .app-header nav a:hover { color: var(--c-accent); text-decoration: none; } .app-header nav span { color: var(--c-muted); font-size: 0.9rem; } .lang-switcher select { background: var(--c-surface-alt); color: var(--c-fg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 2px 6px; font-size: 0.85rem; cursor: pointer; } .theme-toggle { background: var(--c-surface-alt); color: var(--c-fg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 2px 8px; font-size: 0.85rem; font-family: inherit; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); line-height: 1.5; } .theme-toggle:hover { background: var(--c-accent-soft); color: var(--c-accent); } .theme-toggle span { display: none; } .theme-toggle[data-theme-mode="auto"] .theme-icon-auto, .theme-toggle[data-theme-mode="light"] .theme-icon-light, .theme-toggle[data-theme-mode="dark"] .theme-icon-dark, .theme-toggle .theme-label { display: inline; } /* ========================================================================= Main / Layout ========================================================================= */ .app-main { max-width: 1200px; margin: 0 auto; padding: var(--space-6); } .app-footer { text-align: center; padding: var(--space-6); color: var(--c-muted); font-size: 0.85rem; } .app-footer a { color: var(--c-muted); } .app-footer a:hover { color: var(--c-accent); } /* ========================================================================= Flash messages ========================================================================= */ .messages { list-style: none; padding: 0; margin: 0 0 var(--space-4); } .messages li { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); border-radius: var(--radius); background: var(--c-warning-bg); color: var(--c-warning-fg); font-size: 0.95rem; } .messages .msg-success { background: var(--c-success-bg); color: var(--c-success-fg); } .messages .msg-error { background: var(--c-error-bg); color: var(--c-error-fg); } .messages .msg-info { background: var(--c-accent-soft); color: var(--c-accent); } /* ========================================================================= Forms ========================================================================= */ form p { margin-bottom: var(--space-3); } label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: var(--space-1); color: var(--c-fg); } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="number"], textarea, select { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-fg); font-family: inherit; font-size: 0.95rem; transition: border-color 0.15s, box-shadow 0.15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); } textarea { min-height: 80px; resize: vertical; } button, input[type="submit"] { display: inline-block; background: var(--c-accent); color: white; border: none; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font-family: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background 0.15s; } button:hover, input[type="submit"]:hover { background: var(--c-accent-hover); } /* Secondary-ish pattern: a button that's visually lighter. */ button.secondary, form[method="post"] button[type="submit"][data-style="ghost"] { background: var(--c-surface-alt); color: var(--c-fg); border: 1px solid var(--c-border); } /* ========================================================================= Cards (auth, modal) ========================================================================= */ .auth-card, .modal-card, .event-detail { max-width: 560px; margin: var(--space-8) auto; padding: var(--space-6); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .event-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); } .event-detail dt { color: var(--c-muted); font-weight: 500; font-size: 0.9rem; } .event-detail dd { margin: 0; } .event-detail-actions { margin-top: var(--space-6); display: flex; gap: var(--space-3); } /* ========================================================================= Hero / landing ========================================================================= */ .hero { max-width: 640px; margin: var(--space-12) auto; text-align: center; padding: var(--space-8) var(--space-6); } .hero h1 { font-size: 2.5rem; margin-bottom: var(--space-4); } .hero p { color: var(--c-muted); font-size: 1.1rem; margin-bottom: var(--space-6); } .hero .hero-mark { color: var(--c-accent); margin-bottom: var(--space-6); } .hero .hero-mark svg { width: 72px; height: 72px; } .hero .tagline { color: var(--c-fg); font-weight: 500; font-style: italic; } /* ========================================================================= Calendar grid ========================================================================= */ .calendar-root { display: flex; flex-direction: column; gap: var(--space-4); } .calendar-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .calendar-header h1 { margin: 0; } .calendar-header nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: 0.95rem; } .calendar-header nav .date-picker { width: auto; padding: 2px 6px; font-size: 0.9rem; } .calendar-header nav .nav-step-group { display: inline-flex; gap: var(--space-2); } .calendar-grid { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .calendar-grid table, .day-grid { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .calendar-grid th, .calendar-grid td, .day-grid th, .day-grid td { border: 1px solid var(--c-border); padding: var(--space-2); vertical-align: top; text-align: left; } .calendar-grid thead th, .day-grid thead th { background: var(--c-surface-alt); color: var(--c-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; } .calendar-grid .day-cell { width: 1%; font-weight: 600; background: var(--c-surface-alt); white-space: nowrap; } .calendar-grid .day-cell a { color: var(--c-fg); } .days-stepper { text-align: center; padding: var(--space-2); background: var(--c-surface-alt); } .days-stepper-btn { display: inline-block; min-width: 2em; padding: 0 var(--space-2); margin: 0 var(--space-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-fg); font-weight: 600; text-decoration: none; line-height: 1.6; user-select: none; } .days-stepper-btn:hover { background: var(--c-accent-soft); color: var(--c-accent); text-decoration: none; } .days-stepper-btn--disabled { opacity: 0.3; cursor: default; } .days-stepper-btn--disabled:hover { background: var(--c-surface); color: var(--c-fg); } .days-stepper-count { color: var(--c-muted); font-size: 0.9rem; } /* Event chip */ .event { display: block; padding: 3px 8px; margin: 2px 0; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 500; line-height: 1.35; cursor: pointer; text-decoration: none; color: var(--c-event-text); transition: filter 0.15s, transform 0.15s; } .event:hover { filter: brightness(0.95); transform: translateY(-1px); text-decoration: none; } /* ========================================================================= Member filter panel ========================================================================= */ .member-filter { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); } .member-filter summary { cursor: pointer; font-weight: 500; color: var(--c-muted); list-style: none; } .member-filter summary::before { content: "▸ "; display: inline-block; transition: transform 0.15s; } .member-filter[open] summary::before { transform: rotate(90deg); } .member-filter ul { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .member-filter li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: grab; font-size: 0.9rem; } .member-filter li:active { cursor: grabbing; } .member-filter .drag-handle { color: var(--c-muted); font-size: 0.7rem; user-select: none; } /* ========================================================================= Manage page — member list ========================================================================= */ .manage-members { list-style: none; padding: 0; } .manage-members li { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .manage-members small { color: var(--c-muted); } /* ========================================================================= Responsive tweaks ========================================================================= */ @media (max-width: 640px) { .app-header { padding: var(--space-3) var(--space-4); flex-direction: column; align-items: stretch; } .app-header nav { justify-content: center; } .app-main { padding: var(--space-4); } .hero { margin: var(--space-6) auto; padding: var(--space-4); } .hero h1 { font-size: 2rem; } .calendar-grid, .day-grid { font-size: 0.8rem; } .calendar-header { flex-direction: column; align-items: flex-start; } } /* ========================================================================= Day timeline ========================================================================= */ .day-timeline { --px-per-hour: 40px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: grid; grid-template-rows: auto auto 1fr; } .day-timeline-header, .day-timeline-allday, .day-timeline-body { display: grid; grid-template-columns: 60px repeat(var(--dt-cols), 1fr); } .day-timeline-header { background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border); } .day-timeline-gutter-corner, .day-timeline-gutter-label, .day-timeline-column-head { padding: var(--space-2); font-size: 0.8rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; border-right: 1px solid var(--c-border); } .day-timeline-column-head:last-child { border-right: none; } .day-timeline-allday { border-bottom: 1px solid var(--c-border); min-height: 32px; } .day-timeline-allday-cell { padding: 2px; border-right: 1px solid var(--c-border); } .day-timeline-allday-cell:last-child { border-right: none; } .day-timeline-body { position: relative; height: calc(24 * var(--px-per-hour)); grid-template-rows: 1fr; background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(var(--px-per-hour) - 1px), var(--c-border) calc(var(--px-per-hour) - 1px), var(--c-border) var(--px-per-hour) ); } .day-timeline-hour-gutter { position: relative; height: 100%; border-right: 1px solid var(--c-border); } .day-timeline-hour-label { position: absolute; right: var(--space-2); font-size: 0.75rem; color: var(--c-muted); transform: translateY(-0.6em); } .day-timeline-column { position: relative; height: 100%; border-right: 1px solid var(--c-border); } .day-timeline-column:last-child { border-right: none; } .event--timed { position: absolute; margin: 0; min-height: 18px; overflow: hidden; padding: 1px 6px; font-size: 0.75rem; line-height: 1.3; box-sizing: border-box; background: var(--c-accent-soft); color: var(--c-event-text); border: 1px solid var(--c-accent); border-radius: var(--radius-sm); white-space: nowrap; text-overflow: ellipsis; } .event--timed .event-time { font-weight: 500; margin-right: 4px; } .event-placeholder { visibility: hidden; height: calc(0.8rem + 10px); margin: 2px 0; } .event-placeholder--allday { height: calc(0.8rem + 10px); } @media (max-width: 640px) { .day-timeline { --px-per-hour: 32px; } .day-timeline-column-head { font-size: 0.7rem; } }