/* Classbeat — base styles. Mobile first. */ :root { --bg: #f6f7fb; --surface: #ffffff; --text: #1d2033; --muted: #646a85; --border: #e3e6f0; --accent: #4f46e5; --accent-ink: #ffffff; --accent-soft: #eef0ff; --ok: #0f8a5f; --ok-soft: #e6f6ef; --warn: #a15c00; --warn-soft: #fff4e0; --danger: #c0352b; --danger-soft: #fdecea; --radius: 14px; --shadow: 0 1px 2px rgba(20, 22, 50, .05), 0 4px 16px rgba(20, 22, 50, .05); color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --bg: #11131c; --surface: #1a1d29; --text: #eceef7; --muted: #9aa0bb; --border: #2b2f40; --accent: #8b85ff; --accent-ink: #11131c; --accent-soft: #24264a; --ok: #4fd1a1; --ok-soft: #173329; --warn: #f2b45a; --warn-soft: #3a2c15; --danger: #ff7a70; --danger-soft: #3d1c1a; --shadow: none; color-scheme: dark; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } a { color: var(--accent); } h1 { font-size: 1.6rem; line-height: 1.2; margin: .2em 0 .8em; letter-spacing: -.01em; } h2 { font-size: 1.1rem; margin: 0 0 .8em; } h3 { font-size: 1rem; margin: 1.2em 0 .6em; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Top bar */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 650; margin-right: auto; } .mainnav { display: flex; gap: 4px; order: 3; width: 100%; overflow-x: auto; align-items: center; } .navmore { margin-left: 4px; } .navmore + .bell { margin-left: 0; } .mainnav a { padding: 6px 12px; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; } .mainnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .logout { margin: 0; } @media (min-width: 720px) { .mainnav { order: 0; width: auto; } .brand { margin-right: 16px; } .logout { margin-left: auto; } } .container { max-width: 1080px; margin: 0 auto; padding: 20px 16px 48px; } .footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 24px 16px 40px; } /* Cards & grids */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; } .card.narrow { max-width: 560px; } .card.wide { max-width: 720px; margin-inline: auto; } .grid-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } .grid-cards .card { margin: 0; } @media (min-width: 760px) { .grid-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } .grid-2 { display: grid; gap: 0 14px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 560px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .hero { margin: 4px 0 18px; } .hero h1 { margin: 0 0 .3em; font-size: 2rem; } .hero p { margin: 0; } .stats { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; } @media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .stat span { display: block; color: var(--muted); font-size: .85rem; } .stat strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; } /* Forms */ .form label { display: block; margin-bottom: 14px; font-weight: 550; font-size: .92rem; } .form label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 450; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; } .form label.check input { margin: 4px 0 0; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--accent); } .form label.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .form small { display: block; font-weight: 400; margin-top: 4px; } .form.inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .form.inline label { margin: 0; flex: 1 1 160px; } input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; } input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent); } fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 2px; margin: 0 0 18px; } legend { padding: 0 6px; font-weight: 650; } .code-input { font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; min-height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); } .btn-block { width: 100%; } button.link { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 6px 8px; } button.link:hover { color: var(--text); } /* Alerts & pills */ .alert { padding: 12px 14px; border-radius: 10px; margin: 0 0 16px; background: var(--accent-soft); } .alert ul { margin: 0; padding-left: 18px; } .alert-success { background: var(--ok-soft); color: var(--ok); } .alert-error { background: var(--danger-soft); color: var(--danger); } .alert-info { background: var(--accent-soft); color: var(--text); } .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--accent-soft); color: var(--accent); } .pill-ok, .pill-active { background: var(--ok-soft); color: var(--ok); } .pill-trial { background: var(--warn-soft); color: var(--warn); } .pill-blocked, .pill-cancelled { background: var(--danger-soft); color: var(--danger); } .badge { font-size: .7rem; padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); } /* Tables */ .table-wrap { overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: .92rem; } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; } th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Misc */ .muted { color: var(--muted); } .small { font-size: .85rem; } .wrap { word-break: break-all; } .dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; } .dl dt { color: var(--muted); } .dl dd { margin: 0; } .steps { padding-left: 20px; } .steps li { margin-bottom: 12px; } .secret { margin: 8px 0; padding: 12px; border-radius: 10px; background: var(--bg); border: 1px dashed var(--border); font: 600 1.1rem/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; word-break: break-all; } .codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .codes code { display: block; padding: 8px; text-align: center; background: var(--bg); border-radius: 8px; font-size: 1rem; } .checks { list-style: none; padding: 0; columns: 2; } .checks .ok { color: var(--ok); } .checks .fail { color: var(--danger); font-weight: 600; } /* Auth pages */ body.plain { display: flex; min-height: 100vh; align-items: flex-start; justify-content: center; } .auth-wrap { width: 100%; max-width: 440px; padding: 40px 16px; } .auth-wrap:has(.card.wide) { max-width: 760px; } .auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .auth-brand strong { display: block; font-size: 1.2rem; } .auth-brand span { color: var(--muted); font-size: .9rem; } .checks.single { columns: 1; } /* Signed in as school administrator (support) */ .impersonation-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--border); font-weight: 600; font-size: .9rem; } .impersonation-bar form { margin: 0; } .impersonation-bar ~ .topbar { top: 0; position: relative; } .btn-small { min-height: 34px; padding: 6px 12px; font-size: .85rem; } td.actions { white-space: nowrap; } td.actions form { margin: 0 0 6px; } /* Platform management (0.3.0) */ .page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .page-head h1 { margin-bottom: .2em; } .pill-lg { font-size: .95rem; padding: 4px 14px; } .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; } .tabs a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: .9rem; } .tabs a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .status-actions { display: flex; flex-direction: column; gap: 10px; } .status-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; } .status-form input:not([type="hidden"]) { margin: 0; width: auto; flex: 1 1 140px; } .status-form .inline-label { display: flex; gap: 6px; align-items: center; margin: 0; font-weight: 500; } .status-form .inline-label input { width: 70px; flex: 0 0 70px; } .inline-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; } hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; } textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; resize: vertical; } input:disabled { opacity: .7; } .upper { text-transform: uppercase; } .nowrap { white-space: nowrap; } .pager { display: flex; gap: 8px; justify-content: space-between; margin: 12px 0 0; } .plain-list { list-style: none; padding: 0; margin: 0 0 8px; } .plain-list li { padding: 6px 0; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .plain-list li:last-child { border-bottom: 0; } .money-list { list-style: none; padding: 0; margin: 0 0 8px; font-size: 1.15rem; font-variant-numeric: tabular-nums; } .money-list li { padding: 4px 0; } a.stat { text-decoration: none; color: inherit; } a.stat:hover { border-color: var(--accent); } tr.muted td { color: var(--muted); } .pill-level-warning { background: var(--warn-soft); color: var(--warn); } .pill-level-success { background: var(--ok-soft); color: var(--ok); } .announcement { border-left: 4px solid var(--accent); background: var(--surface); border-radius: 10px; padding: 12px 16px; margin: 0 0 12px; box-shadow: var(--shadow); } .announcement p { margin: 4px 0 0; } .announcement-warning { border-left-color: var(--warn); background: var(--warn-soft); } .announcement-success { border-left-color: var(--ok); background: var(--ok-soft); } .form .grid-2 .check { margin-top: 0; } .grid-cards { margin-bottom: 16px; } /* School setup (0.4.0) */ .progress { width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--bg); overflow: hidden; margin: 0 0 12px; appearance: none; } .progress::-webkit-progress-bar { background: var(--bg); border-radius: 999px; } .progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; } .progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; } .setup-steps { list-style: none; padding: 0; margin: 0; } .setup-steps li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); } .setup-steps li:last-child { border-bottom: 0; } .setup-steps li > span:nth-child(2) { flex: 1; } .setup-steps .tick { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; font-weight: 700; font-size: .85rem; } .setup-steps li.done .tick { background: var(--ok); border-color: var(--ok); color: #fff; } .setup-steps li.done strong { color: var(--muted); text-decoration: line-through; } .check-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 8px; } .check-grid .check, .check-list .check { margin: 0; } .check-list { display: grid; gap: 6px; max-height: 360px; overflow-y: auto; margin-bottom: 12px; padding-right: 4px; } .mini-check { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-weight: 450; } .mini-check input { width: 18px; height: 18px; accent-color: var(--accent); } .cell-input { margin: 0 !important; padding: 6px 8px !important; min-width: 120px; } .code-cell { width: 90px; min-width: 70px; } .color-input { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); cursor: pointer; } .tabs .count { opacity: .7; font-size: .8em; margin-left: 2px; } .pill-role { background: var(--bg); color: var(--text); border: 1px solid var(--border); font-weight: 500; } .pill-import-new { background: var(--ok-soft); color: var(--ok); } .pill-import-update { background: var(--accent-soft); color: var(--accent); } .pill-import-error { background: var(--danger-soft); color: var(--danger); } .text-danger { color: var(--danger); } tr.row-error td { background: color-mix(in srgb, var(--danger-soft) 50%, transparent); } details summary { cursor: pointer; margin: 4px 0 10px; } input[type="file"] { padding: 9px; } @media (max-width: 640px) { .hide-sm { display: none; } } /* Timetable & Today (0.5.0) */ .lesson { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px 10px 16px; margin: 0 0 8px; background: var(--bg); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; } .lesson-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--subject, var(--accent)); } .lesson-time { flex: 0 0 44px; text-align: center; line-height: 1.1; } .lesson-time strong { display: block; font-size: 1.15rem; } .lesson-time span { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; } .lesson-body { flex: 1; min-width: 0; } .lesson-title { font-weight: 650; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .lesson-class { font-weight: 600; font-size: .8rem; padding: 1px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); } .lesson-meta { margin-top: 2px; } .lesson-note { margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); display: inline-block; } .lesson-cancelled { opacity: .7; } .lesson-cancelled .lesson-title { text-decoration: line-through; text-decoration-thickness: 2px; } .lesson-cancelled .lesson-title .pill { text-decoration: none; } .lesson-replaced { opacity: .6; } .lesson.is-now { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); background: var(--surface); } .pill-now { background: var(--accent); color: var(--accent-ink); } .closure { padding: 10px 12px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-weight: 600; margin: 0 0 10px; } .week { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .week { grid-template-columns: repeat(5, minmax(0, 1fr)); } .week .lesson { flex-direction: column; gap: 4px; padding-left: 14px; } .week .lesson-time { text-align: left; display: flex; gap: 6px; align-items: baseline; flex: none; } .week .lesson-time strong { font-size: 1rem; } } .day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; } .day.is-today { border-color: var(--accent); } .day-title { font-size: .95rem; margin: 0 0 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .week-nav .btn { min-width: 44px; } .schedule-pick { margin-bottom: 12px; } .tt-grid { min-width: 820px; } .tt-grid th, .tt-grid td { padding: 6px; vertical-align: top; } .tt-slot { white-space: nowrap; width: 90px; } .tt-cell select { margin: 0 0 4px; padding: 5px 6px; font-size: .82rem; } .tt-cell select:last-child { margin-bottom: 0; } .tt-cell.filled { background: var(--accent-soft); border-radius: 8px; } .sticky-actions { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 8px; } .subject-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--subject, var(--accent)); margin-right: 6px; vertical-align: middle; } .changes-table td { vertical-align: top; } .change-form { min-width: 260px; margin-top: 6px; } tr.row-cancelled td { background: color-mix(in srgb, var(--danger-soft) 60%, transparent); } tr.row-changed td, tr.row-extra td { background: color-mix(in srgb, var(--warn-soft) 60%, transparent); } .code-sample { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: .85rem; overflow-x: auto; } .today-card h2 { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } /* ---------- Step 5: homework, agenda, planner, Beat ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .card.narrow-wide { max-width: 720px; } .card-warn { border-color: var(--warn); background: var(--warn-soft); } .btn-big { padding: 12px 22px; font-size: 1.05rem; } .btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; } .form-danger { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .plain-list { margin: 0 0 8px; padding-left: 18px; } .plain-list li { margin: 3px 0; } .pill-hw-homework { background: var(--accent-soft); color: var(--accent); } .pill-hw-test { background: var(--danger-soft); color: var(--danger); } .pill-hw-quiz { background: var(--warn-soft); color: var(--warn); } .pill-hw-assignment { background: var(--ok-soft); color: var(--ok); } .hw-list { list-style: none; margin: 0; padding: 0; } .hw { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 12px 12px 16px; margin: 0 0 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; } .hw-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--subject, var(--accent)); } .hw-body { flex: 1; min-width: 0; } .hw-title { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 2px; } .hw-subject { font-weight: 600; font-size: .9rem; } .hw-name { display: block; } .hw-desc { margin: 4px 0; white-space: normal; } .hw-actions { flex: none; } .hw-progress { display: flex; gap: 8px; align-items: center; margin-top: 6px; } .hw-progress progress { width: 120px; } .hw.is-done .hw-name, .hw.is-done .hw-subject { text-decoration: line-through; opacity: .6; } .hw.is-overdue { border-color: var(--danger); } .hw.is-test { background: linear-gradient(90deg, var(--danger-soft), var(--surface) 40%); } .hw-plan { margin-top: 6px; } .hw-plan summary, .add-todo summary { cursor: pointer; color: var(--accent); } .hw-plan form, .add-todo form { margin-top: 6px; } .planned { color: var(--accent); font-weight: 600; } .tickbox { flex: none; width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; cursor: pointer; padding: 0; transition: transform .15s, background .15s; } .tickbox:hover { border-color: var(--accent); } .tickbox.on { background: var(--ok); border-color: var(--ok); } .tickbox.small-box { width: 22px; height: 22px; border-radius: 6px; font-size: .8rem; } .hw-check { margin: 0; } .agenda-days { display: grid; gap: 14px; } @media (min-width: 900px) { .agenda-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .agenda-days .card { margin: 0; } .agenda-day.is-today { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .agenda-day.is-weekend { background: transparent; } .planned-head { margin: 8px 0 2px; } .todo-list { list-style: none; margin: 8px 0 0; padding: 0; } .todo-list li { display: flex; gap: 8px; align-items: center; padding: 4px 0; } .todo-list li.is-done .todo-title { text-decoration: line-through; opacity: .6; } .todo-title { flex: 1; } .inline-form { display: inline; margin: 0; } .hw-mini { list-style: none; margin: 0 0 10px; padding: 0; } .hw-mini li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--border); } .hw-mini li:last-child { border-bottom: 0; } .hw-mini li.is-overdue strong { color: var(--danger); } .hw-mini .subject-dot { margin-top: 6px; } .lesson-hw { margin-top: 4px; padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); display: inline-block; } .lesson-hw-test, .lesson-hw-quiz { background: var(--danger-soft); color: var(--danger); } .lesson-hw.is-done { opacity: .6; text-decoration: line-through; } .type-pick { display: flex; gap: 8px; flex-wrap: wrap; border: 0; padding: 0; margin: 0 0 12px; } .type-pick legend { width: 100%; margin-bottom: 6px; font-weight: 600; } .form .type-pick label.check.chip { padding: 6px 12px; border-radius: 999px; margin: 0; } /* Stats and badges */ .stats-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .stat strong { font-size: 1.3rem; line-height: 1.1; } .stat-icon { font-size: 1.2rem; } .stat progress { width: 100%; height: 6px; } .badges { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .badge-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px dashed var(--border); opacity: .55; filter: grayscale(1); } .badge-item.earned { opacity: 1; filter: none; border-style: solid; border-color: var(--accent); background: var(--accent-soft); } .badge-icon { font-size: 1.6rem; width: 36px; text-align: center; } .how-list { padding-left: 20px; } .how-list li { margin: 4px 0; } .form label.check.pick-item { border-left: 5px solid var(--subject, var(--accent)); } /* Planner timer */ .focus-card { text-align: center; padding: 22px 16px; position: relative; overflow: hidden; } .focus-card.is-break { background: linear-gradient(180deg, var(--ok-soft), var(--surface)); border-color: var(--ok); } .focus-card.is-finished { background: linear-gradient(180deg, var(--accent-soft), var(--surface)); } .focus-beat { display: block; margin: 0 auto 4px; } .focus-phase { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--accent); } .is-break .focus-phase { color: var(--ok); } .focus-time { margin: 4px 0; font-size: clamp(3rem, 14vw, 5.5rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .focus-what { margin: 6px 0 12px; font-weight: 600; min-height: 1.4em; } .focus-move { max-width: 460px; margin: 0 auto 14px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--ok); } .move-title { margin: 0 0 4px; font-weight: 700; font-size: 1.1rem; } .focus-buttons { justify-content: center; } .timeline { list-style: none; margin: 0; padding: 0; } .tl { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; } .tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex: none; } .tl-break .tl-dot { background: var(--ok); } .tl.is-past { opacity: .45; } .tl.is-current { font-weight: 600; } .tl.is-current .tl-dot { box-shadow: 0 0 0 4px var(--accent-soft); } #finish-card.highlight { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Beat, the mascot */ .beat { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .beat-btn { position: relative; display: block; width: 72px; height: 72px; border-radius: 50%; transition: transform .2s; filter: drop-shadow(0 6px 14px rgba(40, 30, 140, .25)); } .beat-btn:hover, .beat-btn:focus-visible { transform: translateY(-3px) rotate(-4deg); } .beat-btn img { width: 72px; height: 72px; display: block; } .beat-count { position: absolute; top: -2px; right: -2px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--danger); color: #fff; font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); } .beat-jump { animation: beat-jump 1.1s ease; } @keyframes beat-jump { 0%, 100% { transform: none; } 20% { transform: translateY(-14px); } 40% { transform: none; } 60% { transform: translateY(-8px); } 80% { transform: none; } } .beat-panel { width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 12px 40px rgba(20, 22, 50, .18); padding: 14px; } .beat-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .beat-title { font-weight: 800; color: var(--accent); } .beat-close { font-size: 1.1rem; } .beat-bubble { background: var(--accent-soft); border-radius: 14px 14px 14px 4px; padding: 10px 12px; margin-bottom: 10px; } .beat-bubble p { margin: 0; } .beat-hello { margin-bottom: 2px !important; } .beat-search { display: flex; gap: 6px; margin-bottom: 6px; } .beat-search input { flex: 1; min-width: 0; } .beat-results, .beat-list { list-style: none; margin: 0 0 8px; padding: 0; } .beat-results li, .beat-list li { padding: 6px 0; border-bottom: 1px solid var(--border); } .beat-results li:last-child, .beat-list li:last-child { border-bottom: 0; } .beat-head { margin: 10px 0 2px; font-weight: 700; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .beat-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; } .beat-action { display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); text-decoration: none; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-align: left; } .beat-action:hover { border-color: var(--accent); } .beat-stats { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); margin: 6px 0 0; } .beat-page-head { display: flex; gap: 12px; align-items: center; } .beat-page .beat-results { display: none; } body:has(.beat) .footer { padding-bottom: 100px; } @media (prefers-reduced-motion: reduce) { .beat-btn, .beat-jump, .tickbox { transition: none; animation: none; } } /* Student style: "kids" (primary school) is playful; "teen" (secondary) is calmer. */ .style-kids .hw, .style-kids .stat, .style-kids .agenda-day { border-radius: 18px; } .style-kids .tickbox { border-radius: 50%; width: 34px; height: 34px; } .style-kids .tickbox.on { background: linear-gradient(135deg, #22c38e, #0f8a5f); transform: scale(1.06); } .style-kids .stat strong { font-size: 1.5rem; } .style-kids .beat-bubble { background: linear-gradient(135deg, #eef0ff, #ffe9f2); } .style-kids .focus-time { color: var(--accent); } .style-teen .emo, .style-teen .stat-icon, .style-teen .beat-action span[aria-hidden] { display: none; } .style-teen .beat-btn { width: 56px; height: 56px; } .style-teen .beat-btn img { width: 56px; height: 56px; } .style-teen .beat-btn:hover, .style-teen .beat-btn:focus-visible { transform: translateY(-2px); } .style-teen .beat-bubble { border-radius: 12px; } .style-teen .badge-icon { font-size: 1.2rem; } .style-teen .beat-action { font-weight: 550; } .style-pick { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 12px; } .style-option { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } .style-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .planner-grid { align-items: start; } @media (max-width: 520px) { .stats-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .stat-level { grid-column: 1 / -1; } } /* Colour swatches (student accent) */ /* Colour swatches */ .swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; } .swatch { position: relative; cursor: pointer; } .swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .swatch-dot { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--sw, #7c4ddb); border: 3px solid #fff; box-shadow: 0 0 0 2px #e4e0ee; transition: transform .15s; } .swatch:hover .swatch-dot { transform: scale(1.08); } .swatch input:checked + .swatch-dot { box-shadow: 0 0 0 3px var(--text); transform: scale(1.1); } .swatch input:focus-visible + .swatch-dot { outline: 3px solid #3b82f6; outline-offset: 3px; } .swatch-default .swatch-dot { background: conic-gradient(#7c4ddb 0 25%, #3b82f6 0 50%, #22a05a 0 75%, #ea7a1a 0); } .swatch.accent-purple { --sw: #7c4ddb; } .swatch.accent-blue { --sw: #3b82f6; } .swatch.accent-teal { --sw: #0d9488; } .swatch.accent-green { --sw: #22a05a; } .swatch.accent-orange { --sw: #ea7a1a; } .swatch.accent-pink { --sw: #db2777; } .swatch.accent-red { --sw: #dc3c3c; } .swatch.accent-navy { --sw: #3346a8; } .color-students { list-style: none; margin: 0; padding: 0; } .color-students li { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); } .inline-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; } .inline-colors .swatches { margin: 0; gap: 6px; } .inline-colors .swatch-dot { width: 26px; height: 26px; } /* ---------- Step 6: attendance, grades, messages, notifications ---------- */ .navmore { position: relative; } .navmore summary { list-style: none; cursor: pointer; padding: 6px 12px; border-radius: 999px; color: var(--muted); font-weight: 550; } .navmore summary::-webkit-details-marker { display: none; } .navmore summary::after { content: " ▾"; font-size: .8em; } .navmore summary.is-active, .navmore[open] summary { color: var(--accent); background: var(--accent-soft); } .navmore-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 30px rgba(20, 22, 50, .14); padding: 6px; z-index: 60; display: flex; flex-direction: column; } .navmore-menu a { padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; } .navmore-menu a:hover, .navmore-menu a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); } .bell, .sbell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); } .bell:hover { background: var(--accent-soft); color: var(--accent); } .sbell { background: #fff; border: 1px solid #eee6d3; color: var(--text); width: 44px; height: 44px; box-shadow: 0 2px 8px rgba(60, 40, 120, .06); } .bell-count, .nav-count, .snav-badge, .msg-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1; } .bell-count { position: absolute; top: -2px; right: -2px; border: 2px solid var(--surface); } .snav-badge { margin-left: auto; } .inbox-card { border-color: var(--accent); } .notif-list { list-style: none; margin: 0; padding: 0; } .notif-list li { border-bottom: 1px solid var(--border); } .notif-list li:last-child { border-bottom: 0; } .notif-list a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px; color: inherit; text-decoration: none; } .notif-list a > span:nth-child(2) { flex: 1; } .notif-list li.is-unread strong { color: var(--accent); } .notif-list.compact a { padding: 8px 0; } .notif-icon { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--muted); } .is-unread .notif-icon { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .notif-grade { background: #f4b400 !important; } .notif-absence, .notif-absence_report { background: var(--danger) !important; } .msg-list { list-style: none; margin: 0; padding: 0; } .msg-list li { border-bottom: 1px solid var(--border); } .msg-list li:last-child { border-bottom: 0; } .msg-list a { display: flex; gap: 12px; align-items: center; padding: 12px 4px; color: inherit; text-decoration: none; } .msg-list a:hover { background: var(--bg); } .msg-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; display: flex; align-items: center; justify-content: center; } .msg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .msg-top { display: flex; justify-content: space-between; gap: 8px; } .msg-subject { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-list li.is-unread .msg-subject, .msg-list li.is-unread strong { color: var(--accent); } .chat { display: flex; flex-direction: column; gap: 10px; } .bubble-row { display: flex; } .bubble-row.mine { justify-content: flex-end; } .bubble { max-width: min(80%, 560px); padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--bg); border: 1px solid var(--border); } .mine .bubble { background: var(--accent-soft); border-color: transparent; border-radius: 16px 16px 4px 16px; } .bubble-meta { color: var(--muted); margin-bottom: 4px; } .bubble-body { white-space: normal; overflow-wrap: anywhere; } .chat-reply { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px; } .chat-reply textarea { width: 100%; } .recipients { min-height: 180px; } .hw-ask { display: inline-block; margin-top: 6px; margin-right: 12px; font-weight: 600; } .sempty-inline { text-align: center; padding: 24px 8px; } .att-table td { vertical-align: middle; } .att-pick { display: flex; flex-wrap: wrap; gap: 6px; } .att-opt { position: relative; cursor: pointer; } .att-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .att-opt span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: .85rem; font-weight: 600; background: var(--surface); } .att-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .att-present input:checked + span { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); } .att-absent input:checked + span { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); } .att-late input:checked + span { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } .att-removed input:checked + span { background: #2b2f40; color: #fff; border-color: #2b2f40; } .row-info { background: var(--warn-soft); } .pill-abs-absent, .pill-abs-removed { background: var(--danger-soft); color: var(--danger); } .pill-abs-late { background: var(--warn-soft); color: var(--warn); } .pill-abs-sick, .pill-abs-excused { background: var(--accent-soft); color: var(--accent); } .abs-form select { width: auto; padding: 4px 8px; } .abs-list li { margin: 6px 0; } .grade-grid th, .grade-grid td { text-align: center; } .grade-grid th:first-child, .grade-grid td:first-child { text-align: left; } .gcol a { color: inherit; } .grade-input { width: 58px; text-align: center; padding: 6px 4px !important; font-weight: 700; } .grade-low, .grade-input.grade-low { color: var(--danger) !important; } .grade-input.grade-low { background: var(--danger-soft); } .gavg.grade-low strong { color: var(--danger); } .grade-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .grade-chips li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--bg); border-left: 5px solid var(--subject, var(--accent)); } .grade-big { font-size: 1.6rem; font-weight: 800; min-width: 52px; text-align: center; color: var(--ok); } .grade-subject-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .grade-subject-head h2 { margin: 0; } .grade-avg { font-size: 1.5rem; font-weight: 800; padding: 4px 12px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); } .grade-avg.grade-low { background: var(--danger-soft); } .grade-list li { margin: 4px 0; } .report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .report-table td, .report-table th { text-align: center; } .report-table td:first-child, .report-table th:first-child { text-align: left; } @media print { .topbar, .footer, .no-print, .beat, .sside, .stop, .impersonation-bar { display: none !important; } body, body.student { background: #fff !important; } .sapp { display: block !important; background: none !important; } .card, .scard { box-shadow: none !important; border: 1px solid #ccc !important; } .scontent, .container { padding: 0 !important; max-width: none !important; } } .viewas-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .viewas-select { flex: 1 1 320px; margin: 0; } .viewas-row .btn { margin-bottom: 2px; } .demo-hint { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; } .viewas-full { background: #e7f6ee; color: #0f6b46; } /* Attachments */ .atts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .att { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } .att-icon { flex: none; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 800; color: #fff; background: #64748b; letter-spacing: .02em; } .att-word .att-icon { background: #2b579a; } .att-excel .att-icon { background: #217346; } .att-ppt .att-icon { background: #d24726; } .att-pdf .att-icon { background: #c0352b; } .att-info { display: flex; flex-direction: column; min-width: 0; } .att-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .att-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; display: block; } .file-drop { display: block; border: 2px dashed var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; margin: 6px 0 10px; } .file-drop:hover { border-color: var(--accent); } .file-drop input { display: block; margin-top: 6px; width: 100%; } .file-viewer { padding: 8px; } .file-frame { width: 100%; height: min(78vh, 900px); border: 0; border-radius: 10px; background: #fff; } .file-img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 10px; } .file-title { overflow-wrap: anywhere; } /* Classbeat logo on login and install pages */ .auth-brand-logo { flex-direction: column; align-items: center; text-align: center; gap: 4px; } .auth-logo { width: 200px; height: auto; background: #fff; border-radius: 18px; padding: 10px 14px; } .auth-brand-logo span { color: var(--muted); font-weight: 600; } /* Phone menu bar: four main tabs plus "More" (a sheet with everything else). Hidden on larger screens. */ .mmore { display: none; } @media (max-width: 860px) { .m-extra { display: none !important; } .mmore { display: block; flex: 1 1 0; position: static; } .mmore summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; font-size: .66rem; font-weight: 650; color: var(--muted, #6b7280); position: relative; border-radius: 12px; } .mmore summary::-webkit-details-marker { display: none; } .mmore[open] summary { color: var(--accent, #7c4ddb); } .mmore[open]::before { content: ""; position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: -1; } .mmore-sheet { position: fixed; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); max-height: calc(100vh - 120px); overflow-y: auto; background: var(--surface, #fff); color: var(--text, #17212b); border-radius: 20px; box-shadow: 0 -10px 40px rgba(15, 23, 42, .22); padding: 14px; z-index: 60; } .mmore-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mmore-grid a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px; background: var(--bg, #f3f6f8); color: inherit; text-decoration: none; font-size: .8rem; font-weight: 650; text-align: center; } .mmore-grid a[aria-current="page"] { color: var(--accent, #7c4ddb); outline: 2px solid currentColor; } .mmore-list { margin-top: 10px; display: flex; flex-direction: column; } .mmore-list a { padding: 12px 8px; border-bottom: 1px solid var(--border, #e5e7eb); color: inherit; text-decoration: none; font-weight: 600; } .mmore-list a:last-child { border-bottom: 0; } .mmore-logout { margin: 10px 0 0; } .mmore-logout button { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border, #e5e7eb); background: none; color: inherit; font: inherit; font-weight: 650; cursor: pointer; } .mmore-badge { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #f0715a; color: #fff; font-size: .6rem; display: inline-flex; align-items: center; justify-content: center; } .mmore-grid .mmore-badge { top: 6px; right: 8px; } } .mainnav .nav-ic { display: none; } @media (max-width: 860px) { body:not(.staff):not(.student) .mainnav { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; order: 0; width: 100%; margin: 0; gap: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); overflow: visible; justify-content: space-between; } body:not(.staff):not(.student) .mainnav > a { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; font-size: .66rem; font-weight: 650; } body:not(.staff):not(.student) .mainnav > a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body:not(.staff):not(.student) .mainnav .nav-ic { display: block; } body:not(.staff):not(.student) .mainnav .nav-count { position: absolute; top: 0; right: calc(50% - 22px); min-width: 16px; height: 16px; font-size: .6rem; padding: 0 4px; } body:not(.staff):not(.student) .topbar .navmore, body:not(.staff):not(.student) .topbar .logout { display: none; } body:not(.staff):not(.student) .container { padding-bottom: 96px; } body:not(.staff):not(.student) .footer { padding-bottom: 90px; } } /* Sheet items are links inside the bar's