/* ========================================================================== Curriculum Assessments — shared stylesheet -------------------------------------------------------------------------- Every page in this repo links this one file. Rules are grouped by page family, and each page declares its family with a class on : Navigation pages: the root course picker, the per-course unit pickers, and the per-unit assessment pickers. teacher.html, the student-link generator. The assessment pages themselves. The class is not optional. The three families disagree about `.wrap`, `.meta`, `button.primary`, `button.secondary` and `.hint`, and the teacher page styles bare `label` / `select` / `input` elements that would otherwise hit the radio buttons and textareas on every assessment. Scoping keeps those apart. A page with no family class will render unstyled-ish: base typography only, no layout width. ========================================================================== */ /* --- Design tokens ------------------------------------------------------- The union of the palettes the pages previously declared individually. */ :root{ --ink:#1f2430; --sub:#5b6472; --line:#e2e6ec; --bg:#f7f8fa; --card:#ffffff; --accent:#3a6ea5; --accent-ink:#ffffff; --good:#1e7d43; --good-bg:#e7f6ec; --neutral:#8a6d1f; --neutral-bg:#fbf3e0; --radius:14px; } /* --- Base: identical on every page --------------------------------------- */ *{box-sizing:border-box;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.5; } .wrap{margin:0 auto;} .eyebrow{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);} h1{font-size:26px; margin:6px 0 4px;} .meta{color:var(--sub); font-size:15px;} [hidden]{display:none !important;} /* ========================================================================== Navigation pages — body.page-index ========================================================================== */ .page-index .wrap{max-width:640px; padding:36px 18px 80px;} .page-index .meta{margin-bottom:26px;} a.item{ display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:10px; text-decoration:none; color:var(--ink); font-size:16px; font-weight:600; transition:border-color .15s; } a.item:hover{border-color:var(--accent);} a.item span{display:block; font-size:13px; font-weight:400; color:var(--sub); margin-top:2px;} /* Units that exist in the catalog but have not been built yet. */ .item.disabled{opacity:.55; cursor:default;} .item.disabled:hover{border-color:var(--line);} /* "<- All units" breadcrumb on the per-unit pickers. */ a.back{display:inline-block; margin-bottom:18px; font-size:14px; color:var(--accent); text-decoration:none; font-weight:600;} /* The dashed "For teachers" card at the bottom of the root course picker. */ a.item.item-teacher{border-style:dashed; color:var(--accent);} /* "<- All courses" breadcrumb rendered as an a.item that sheds the card look. */ a.item.item-breadcrumb{ margin-bottom:18px; display:inline-block; padding:0; background:none; border:none; font-weight:600; font-size:14px; color:var(--accent); } /* ========================================================================== Student-link generator — body.page-teacher ========================================================================== */ .page-teacher .wrap{max-width:640px; padding:36px 18px 80px;} .page-teacher .meta{margin-bottom:26px;} .page-teacher .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-bottom:18px;} .page-teacher label{display:block; font-size:13px; font-weight:600; color:var(--sub); margin-bottom:4px;} .page-teacher select, .page-teacher input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:15px; margin-bottom:16px; font-family:inherit;} .page-teacher select:disabled{background:#f1f3f5; color:var(--sub); cursor:not-allowed;} .page-teacher select:last-of-type, .page-teacher input:last-of-type{margin-bottom:0;} .page-teacher button.primary{ display:block; width:100%; padding:14px; font-size:16px; font-weight:700; background:var(--accent); color:var(--accent-ink); border:none; border-radius:12px; cursor:pointer; margin-top:4px; } .page-teacher button.primary:disabled{background:#aab6c4; cursor:not-allowed;} .page-teacher .result{display:none;} .page-teacher .result.show{display:block;} .page-teacher .link-box{display:flex; gap:8px; align-items:center; margin-top:14px;} .page-teacher .link-box input{margin-bottom:0; background:#f1f3f5; font-size:13px;} .page-teacher button.secondary{ padding:10px 16px; font-size:14px; font-weight:600; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; cursor:pointer; flex:none; } .page-teacher .hint{color:var(--sub); font-size:13px; margin-top:8px;} .page-teacher .copied{color:#1e7d43; font-weight:600;} /* ========================================================================== Assessment pages — body.page-assessment ========================================================================== */ .page-assessment .wrap{max-width:760px; padding:28px 18px 80px;} .page-assessment .meta{margin-bottom:18px;} header.top{margin-bottom:22px;} /* Student name + teacher email, above the questions. */ .setup-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:26px;} .setup-card label{display:block; font-size:13px; font-weight:600; color:var(--sub); margin-bottom:4px;} .setup-card input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:15px; margin-bottom:14px; font-family:inherit;} .setup-card input:last-child{margin-bottom:0;} .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;} @media (max-width:520px){ .row2{grid-template-columns:1fr;} } /* Teacher email arrived via ?teacherEmail= and is locked read-only. */ .setup-card input.locked{background:#f1f3f5;} /* --- Questions --- */ .q-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px;} .q-num{font-size:13px; font-weight:700; color:var(--accent); margin-bottom:6px;} .q-prompt{font-size:17px; font-weight:600; margin-bottom:14px;} .video-box{position:relative; width:100%; padding-top:66%; background:#0d1117; border-radius:10px; overflow:hidden; margin-bottom:16px;} .video-box iframe{position:absolute; inset:0; width:100%; height:100%; border:0;} .choices{display:grid; gap:9px;} .choice{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:11px 14px; cursor:pointer; font-size:15px; transition:border-color .15s, background .15s; } .choice:hover{border-color:var(--accent);} .choice input{accent-color:var(--accent); width:17px; height:17px; flex:none;} .choice.selected{border-color:var(--accent); background:#eef4fa;} .open-answer{width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:15px; font-family:inherit; resize:vertical; min-height:64px;} /* --- Drag/tap matching questions (word bank onto numbered videos) --- */ .match-row{display:flex; align-items:center; gap:14px; margin-bottom:14px;} .match-row .video-box{flex:1 1 auto; margin-bottom:0;} .match-num{flex:none; width:22px; text-align:center; font-weight:700; color:var(--sub); font-size:14px;} .match-target{ flex:1 1 auto; min-width:120px; max-width:200px; border:2px dashed var(--line); border-radius:10px; padding:11px 12px; font-size:14px; font-weight:600; text-align:center; color:var(--sub); cursor:pointer; transition:border-color .15s, background .15s; user-select:none; } .match-target.filled{border-style:solid; border-color:var(--accent); background:#eef4fa; color:var(--ink);} .match-target.dragover{border-color:var(--accent); background:#eef4fa;} .match-target .remove-x{margin-left:8px; color:var(--sub); font-weight:400;} .match-bank{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding:14px 16px; border-top:1px solid var(--line); position:sticky; bottom:86px; background:var(--card); border-radius:10px; box-shadow:0 -6px 16px rgba(31,36,48,.08); z-index:5; } .match-pill{ border:1px solid var(--line); border-radius:20px; padding:8px 14px; font-size:14px; font-weight:600; background:var(--card); cursor:grab; user-select:none; transition:border-color .15s, opacity .15s; } .match-pill:hover{border-color:var(--accent);} .match-pill.armed{border-color:var(--accent); background:#eef4fa;} .match-pill.used{opacity:.35; cursor:default; pointer-events:none;} .match-hint{color:var(--sub); font-size:13px; margin-top:2px; margin-bottom:14px;} /* Matching UI frozen after the student submits. */ .match-pill.locked, .match-target.locked{pointer-events:none;} /* --- Submit + results --- */ .submit-bar{position:sticky; bottom:0; background:linear-gradient(180deg, rgba(247,248,250,0), var(--bg) 30%); padding:18px 0 4px;} .page-assessment button.primary{ display:block; width:100%; padding:14px; font-size:16px; font-weight:700; background:var(--accent); color:var(--accent-ink); border:none; border-radius:12px; cursor:pointer; } .page-assessment button.primary:disabled{background:#aab6c4; cursor:not-allowed;} .page-assessment button.secondary{ padding:11px 16px; font-size:14px; font-weight:600; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; cursor:pointer; } .results-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:center; margin-bottom:22px;} .results-score{font-size:22px; font-weight:800; color:var(--good);} .results-sub{color:var(--sub); font-size:15px; margin-bottom:16px;} .results-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;} .page-assessment .hint{color:var(--sub); font-size:13px; margin-top:6px;} .unanswered-flag{color:#b3261e; font-size:13px; font-weight:600; margin-top:8px;} @media print{ .submit-bar, .results-actions, .setup-card input{display:none;} }