/* ============================================================================= Akyeba operator PWA — light theme ============================================================================= */ /* Marketing uses a dark-academic palette; the operator app stays light because teachers will use it in classrooms with strong sunlight. We keep the brand accent (terracotta) so the two surfaces still feel like the same product. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500..700;1,9..144,500..700&family=Inter:wght@400;500;600;700&display=swap'); :root { --bg: #FFFBF5; --surface: #FFFFFF; --surface-2: #FAF5EA; --text: #1A1F2C; --muted: #6B7280; --border: #E5E1D8; --accent: #C68B5D; --accent-hi: #B0784D; --accent-bg: rgba(198, 139, 93, 0.10); --danger: #C2410C; --shadow: 0 1px 2px rgba(26, 31, 44, 0.06); --pad-x: clamp(1rem, 4vw, 1.5rem); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; } input { font-family: inherit; } /* ── State switching ────────────────────────────────────────────────────── Sections declare which screen they belong to. Only the active screen shows. Default = splash; the app sets a class on after boot. */ section[data-screen] { display: none; min-height: 100vh; } body.screen-splash section[data-screen="splash"] { display: block; } body.screen-login section[data-screen="login"] { display: block; } body.screen-newpassword section[data-screen="newpassword"] { display: block; } body.screen-home section[data-screen="home"] { display: block; } body.screen-attendance section[data-screen="attendance"] { display: block; } body:not([class*="screen-"]) section[data-screen="splash"] { display: block; } /* ── Brand mark ───────────────────────────────────────────────────────── */ .logo-mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: #0E1320; color: var(--accent); font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 600; font-size: 32px; box-shadow: var(--shadow); flex-shrink: 0; } .logo-mark.small { width: 32px; height: 32px; font-size: 20px; border-radius: 8px; } /* Mark + wordmark on the same line — used in the auth screens so teachers see the product name, not just an icon. */ .auth-brand { display: inline-flex; align-items: center; gap: 0.75rem; align-self: flex-start; } .wordmark { font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; color: var(--text); } .wordmark.small { font-size: 1.05rem; } .wordmark .dot { color: var(--accent); } /* ── Splash ───────────────────────────────────────────────────────────── */ .splash { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 1rem; } .splash-tag { color: var(--muted); font-size: 0.875rem; } /* ── Auth shell (login + new-password) ────────────────────────────────── */ .auth-shell { max-width: 420px; margin: 0 auto; min-height: 100vh; padding: clamp(2rem, 6vh, 3.5rem) var(--pad-x) clamp(2rem, 6vh, 3.5rem); display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; position: relative; } /* Subtle warm-light wash at the top — adds depth without leaning on imagery the M1.4 shell doesn't ship. */ .auth-shell::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(198, 139, 93, 0.08), transparent 65%); pointer-events: none; z-index: -1; } .auth-shell h1 { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-size: clamp(2rem, 7vw, 2.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin-top: 0.5rem; color: var(--text); } .auth-shell h1 em { font-style: italic; color: var(--accent); } .auth-sub { color: var(--muted); font-size: 1rem; margin-bottom: 0.75rem; } .auth-shell form { display: flex; flex-direction: column; gap: 1rem; } .auth-hint { color: var(--muted); font-size: 0.8125rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--border); } .field { display: flex; flex-direction: column; gap: 0.45rem; } .field span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--muted); } .field input { background: var(--surface); border: 1px solid #D6D1C5; /* darker than --border so fields read on warm bg */ border-radius: 10px; padding: 0.9rem 1rem; font-size: 16px; /* keeps iOS from auto-zooming on focus */ color: var(--text); box-shadow: 0 1px 2px rgba(26, 31, 44, 0.04); transition: border-color 0.15s, box-shadow 0.15s; } .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); } .btn-primary { width: 100%; background: var(--accent); color: white; border: none; border-radius: 10px; padding: 1rem 1.5rem; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 4px 12px rgba(198, 139, 93, 0.22); margin-top: 0.5rem; transition: background 0.15s, transform 0.1s, box-shadow 0.15s; } .btn-primary:hover:not(:disabled) { background: var(--accent-hi); } .btn-primary:active:not(:disabled) { transform: translateY(1px); } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .btn-icon { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; transition: color 0.15s, border-color 0.15s; } .btn-icon:hover { color: var(--accent); border-color: var(--accent); } .form-error { color: var(--danger); font-size: 0.875rem; background: rgba(194, 65, 12, 0.08); border-left: 3px solid var(--danger); padding: 0.625rem 0.75rem; border-radius: 6px; } /* ── Top bar (home + later screens) ───────────────────────────────────── */ .top-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem var(--pad-x); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .top-bar .brand { display: flex; align-items: center; gap: 0.65rem; font-weight: 600; font-size: 0.9375rem; } /* ── Home ─────────────────────────────────────────────────────────────── */ .home { max-width: 720px; margin: 0 auto; padding: clamp(1.25rem, 4vw, 2rem) var(--pad-x) 6rem; } .hello-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .hello-row h1 { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-size: clamp(1.6rem, 5vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .role-line { color: var(--muted); margin-top: 0.25rem; } .net-status { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(34, 197, 94, 0.10); color: #15803D; } .net-status[data-online="false"] { background: rgba(245, 158, 11, 0.12); color: #B45309; } .section-head { margin: 2.25rem 0 1rem; } .section-head h2 { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; } .section-head .muted { font-size: 0.875rem; color: var(--muted); margin-top: 0.15rem; } .muted { color: var(--muted); } .assignments-list { display: grid; gap: 0.625rem; } .assignment-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; box-shadow: var(--shadow); transition: border-color 0.15s, transform 0.15s; display: flex; align-items: center; gap: 1rem; } .assignment-card:active { transform: scale(0.99); } .assignment-card .icon { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); } .assignment-card .meta { flex: 1; min-width: 0; } .assignment-card .meta-title { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .assignment-card .meta-sub { color: var(--muted); font-size: 0.8125rem; } .assignment-card .pill { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; padding: 0.25rem 0.5rem; border-radius: 4px; background: var(--accent-bg); color: var(--accent); } .empty-state { background: var(--surface-2); border: 1px dashed var(--border); border-radius: 10px; padding: 1.5rem; text-align: center; color: var(--muted); font-size: 0.875rem; } /* Coming-up teaser block */ .coming-up { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); } .coming-up h2 { font-size: 0.95rem; color: var(--muted); margin-bottom: 0.75rem; } .coming-up ul { list-style: none; display: grid; gap: 0.5rem; } .coming-up li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.875rem; padding: 0.65rem 0.85rem; background: var(--surface-2); border-radius: 8px; } .coming-up .badge { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--muted); } /* ── Outbox indicator (fixed bottom) ─────────────────────────────────── */ .outbox-indicator { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: #0E1320; color: white; padding: 0.6rem 1rem; border-radius: 999px; font-size: 0.8125rem; display: flex; align-items: center; gap: 0.6rem; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 20; } .outbox-indicator button { background: var(--accent); color: white; border: none; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } /* ── Attendance (M1.5.2) ─────────────────────────────────────────────── */ /* Make assignment cards on the home screen feel actionable when they lead somewhere — TEACHER_OF and FORM_TEACHER_OF cards become tappable entry points to the daily-roll screen. */ .assignment-card.actionable { cursor: pointer; position: relative; } .assignment-card.actionable:hover { border-color: var(--accent); } .assignment-card.actionable::after { content: '›'; color: var(--muted); font-size: 1.5rem; line-height: 1; margin-left: 0.25rem; } .attendance-screen { max-width: 720px; margin: 0 auto; padding: clamp(1rem, 3vw, 1.5rem) var(--pad-x) 8rem; } .screen-head { margin-bottom: 1.5rem; } .screen-head h1 { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .screen-head .muted { color: var(--muted); font-size: 0.9375rem; margin-top: 0.25rem; } .date-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; font-size: 0.875rem; } .date-row span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--muted); } .date-row input { background: var(--surface); border: 1px solid #D6D1C5; border-radius: 8px; padding: 0.55rem 0.75rem; font-size: 16px; color: var(--text); } .date-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } /* Status summary — at-a-glance counts that update as the teacher marks each student. */ .status-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1.5rem; } .status-summary span { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.625rem 0.75rem; text-align: center; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.03em; } .status-summary strong { display: block; font-family: 'Fraunces', Georgia, serif; font-feature-settings: 'tnum'; font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1; margin-top: 0.25rem; } .status-summary span[data-status="PRESENT"] strong { color: #15803D; } .status-summary span[data-status="LATE"] strong { color: #B45309; } .status-summary span[data-status="ABSENT"] strong { color: var(--danger); } .status-summary span[data-status="EXCUSED"] strong { color: var(--muted); } /* Roster — list of student rows with a segmented status control */ .roster { display: grid; gap: 0.65rem; } .student-row { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 1rem; display: grid; gap: 0.65rem; transition: border-color 0.15s; } .student-row:focus-within { border-color: var(--accent); } .student-row .student-name { font-size: 0.95rem; font-weight: 500; line-height: 1.25; } .student-row .student-id { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em; display: block; margin-top: 0.15rem; } /* Segmented status control — 4 buttons in a row, mobile-friendly */ .status-toggle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--surface-2); border-radius: 8px; padding: 4px; } .status-toggle button { background: transparent; border: none; padding: 0.55rem 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--muted); border-radius: 6px; letter-spacing: 0.02em; cursor: pointer; transition: background 0.12s, color 0.12s; } .status-toggle button:active { transform: scale(0.98); } .status-toggle button.active[data-status="PRESENT"] { background: #15803D; color: white; } .status-toggle button.active[data-status="LATE"] { background: #B45309; color: white; } .status-toggle button.active[data-status="ABSENT"] { background: var(--danger); color: white; } .status-toggle button.active[data-status="EXCUSED"] { background: #475569; color: white; } .reason-input { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.55rem 0.75rem; font-size: 0.875rem; color: var(--text); font-family: inherit; width: 100%; } .reason-input::placeholder { color: var(--muted); } .reason-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .reason-input[hidden] { display: none; } /* Sticky save bar — always reachable on a long roster */ .sticky-actions { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 251, 245, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--border); padding: 0.85rem var(--pad-x) calc(0.85rem + env(safe-area-inset-bottom)); z-index: 30; } .sticky-actions-row { max-width: 720px; margin: 0 auto; display: flex; gap: 0.65rem; align-items: center; } .sticky-actions-row .btn-primary { flex: 1; margin-top: 0; } .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap; } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; } /* When the page is scrolled to the bottom, give the sticky bar a little extra visual lift since the backdrop blur is doing all the separation work. */ @media (max-width: 480px) { .attendance-screen { padding-bottom: 9rem; } .status-toggle button { font-size: 0.72rem; } .status-summary { grid-template-columns: repeat(2, 1fr); } }