/* Design tokens + reset. Light/dark via [data-theme] on ; 'system' resolves in js/main.js from prefers-color-scheme. */ :root { /* brand gradient (login, logo, primary actions, active states) */ --brand-a: #3b5bdb; --brand-b: #7048e8; --brand-c: #0ea5e9; --brand-grad: linear-gradient(135deg, var(--brand-a), var(--brand-b) 55%, var(--brand-c) 120%); /* brand + semantic color */ --blue: #1a56db; --blue-soft: #dbe7ff; --green: #0e9f6e; --amber: #c27803; --red: #dc2626; --success: var(--green); --warning: var(--amber); --danger: var(--red); --success-soft: rgba(14, 159, 110, .14); --warning-soft: rgba(194, 120, 3, .14); --danger-soft: rgba(220, 38, 38, .1); --on-color: #ffffff; /* text on saturated backgrounds */ /* school identity palette (Board + anywhere a school gets a color) */ --school-1: #2456a6; --school-2: #a03050; --school-3: #b8860b; --school-4: #0e8f8f; --school-5: #2e8b57; --school-6: #c2185b; --school-7: #e07b28; --school-8: #6d4c41; --school-9: #7d4fb3; --school-other: #78838f; /* surfaces */ --bg: #f4f6fb; --surface: #ffffff; --surface-2: #eef1f8; --border: #d9dfeb; --text: #111827; --text-muted: #6b7280; /* elevation: flat cards / raised (hover, popover) / overlay (modal, palette) */ --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 6px rgba(16, 24, 40, .07); --shadow-2: 0 4px 16px rgba(16, 24, 40, .13), 0 1px 4px rgba(16, 24, 40, .08); --shadow-3: 0 12px 40px rgba(2, 8, 20, .38); /* spacing scale (4px rhythm) */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; /* type scale */ --fs-xs: .72rem; --fs-sm: .82rem; --fs-md: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.35rem; /* motion */ --dur-1: .12s; --dur-2: .22s; --ease: cubic-bezier(.2, .7, .3, 1); --radius: 14px; --radius-sm: 9px; --tabbar-h: calc(58px + env(safe-area-inset-bottom)); --font-size: 16px; --photo-size: 44px; } html[data-theme="dark"] { --bg: #0f172a; --surface: #1e293b; --surface-2: #273449; --border: #334155; --text: #e5e9f0; --text-muted: #94a3b8; --blue-soft: #1e3a8a; --shadow: 0 1px 3px rgba(0, 0, 0, .5); --shadow-2: 0 4px 14px rgba(0, 0, 0, .55); --shadow-3: 0 12px 40px rgba(0, 0, 0, .7); /* school palette brightened for dark surfaces */ --school-1: #4a7ed0; --school-2: #c04d6f; --school-3: #d1a232; --school-4: #2fb3b3; --school-5: #4aab77; --school-6: #e0488a; --school-7: #e8944e; --school-8: #96705f; --school-9: #9b73d0; --school-other: #8e99a6; } html[data-fontsize="large"] { --font-size: 18px; } html[data-fontsize="xlarge"] { --font-size: 20px; } html[data-photosize="large"] { --photo-size: 60px; } html[data-font="system"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } html[data-font="serif"] body { font-family: Georgia, "Times New Roman", serif; } html[data-font="rounded"] body { font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } /* the hidden attribute must always win, even over display:flex classes */ [hidden] { display: none !important; } html { font-size: var(--font-size); } @font-face { font-family: "Manrope"; src: url("../fonts/manrope-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } body { font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100dvh; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } h1 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; } h2 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.015em; } h3 { font-size: 1rem; } .muted { color: var(--text-muted); font-size: .875rem; } .error-text { color: var(--red); font-size: .875rem; margin-top: .5rem; } /* Interaction baseline: a visible keyboard focus ring everywhere, and no motion for those who ask for none. */ :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } [dir="auto"] { unicode-bidi: plaintext; } .fullscreen-center { position: fixed; inset: 0; display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; background: var(--bg); z-index: 50; } .loading-logo { font-size: 1.6rem; font-weight: 800; letter-spacing: .04em; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .spinner { width: 34px; height: 34px; border: 4px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Loading skeleton shell: shown before camp data arrives */ .skel-shell { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; padding: var(--s4); max-width: 560px; margin: 0 auto; } .skel-head { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s2) 0 var(--s4); } .skel-list { display: flex; flex-direction: column; gap: var(--s2); } .skel-row { display: flex; align-items: center; gap: var(--s3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); } .skel-avatar { width: var(--photo-size); height: var(--photo-size); border-radius: 50%; flex: none; } .skel-lines { flex: 1; display: flex; flex-direction: column; gap: var(--s2); } .skel-line { height: 10px; border-radius: 5px; } .skel-line.w-20 { width: 20%; } .skel-line.w-25 { width: 25%; } .skel-line.w-30 { width: 30%; } .skel-line.w-35 { width: 35%; } .skel-line.w-40 { width: 40%; } .skel-line.w-45 { width: 45%; } .skel-line.w-50 { width: 50%; } .skel-line.w-55 { width: 55%; } .skel-line.w-60 { width: 60%; } .skel-avatar, .skel-line { background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } /* avatar photos fade in instead of popping */ .avatar img { opacity: 0; transition: opacity var(--dur-2) var(--ease); } .avatar img.loaded { opacity: 1; }