/* --------------------------------------------------------------- Tokens Palette drawn from version-control conventions: paper background, ink text, three semantic accents (added / pending / interactive) rather than one decorative accent. ------------------------------------------------------------------ */ :root { color-scheme: light; --paper: #EEF1EC; --paper-raised: #F8FAF6; --ink: #1B1F1D; --ink-muted: #667169; --ink-strong: #000000; --rule: #D7DBD3; --rule-strong: #B9C1B4; --added: #2E7D4F; --added-bg: #E3F1E7; --added-border: #BFE0CB; --pending: #B5762A; --pending-bg: #F5E9D8; --accent: #3457D5; --accent-bg: #E7ECFB; --danger: #B3372C; --danger-bg: #F6E5E3; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif; --radius: 6px; } /* Dark palette -- applied when the OS prefers dark and the visitor hasn't overridden it, or whenever they've explicitly picked dark via the topbar toggle (which stamps data-theme on , see base.html). An explicit "light" choice is guarded against here so it always wins over the OS preference. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #14160F; --paper-raised: #1C1F19; --ink: #E8ECE4; --ink-muted: #93A08F; --ink-strong: #FFFFFF; --rule: #2C332A; --rule-strong: #3D473A; --added: #4FBE7B; --added-bg: #17301F; --added-border: #2E5A3B; --pending: #E3A85C; --pending-bg: #3A2C15; --accent: #8299FF; --accent-bg: #1F2740; --danger: #E38477; --danger-bg: #3A211C; } } :root[data-theme="dark"] { color-scheme: dark; --paper: #14160F; --paper-raised: #1C1F19; --ink: #E8ECE4; --ink-muted: #93A08F; --ink-strong: #FFFFFF; --rule: #2C332A; --rule-strong: #3D473A; --added: #4FBE7B; --added-bg: #17301F; --added-border: #2E5A3B; --pending: #E3A85C; --pending-bg: #3A2C15; --accent: #8299FF; --accent-bg: #1F2740; --danger: #E38477; --danger-bg: #3A211C; } * { box-sizing: border-box; } /* The `hidden` attribute is used throughout (search filtering, the pool page's sort switch) to show/hide elements from JS. Several components set their own `display` (flex, in particular), which -- despite matching specificity -- wins over the UA stylesheet's `[hidden]` rule because author styles always beat UA styles. Force it back. */ [hidden] { display: none !important; } html { -webkit-font-smoothing: antialiased; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.5; transition: background-color 0.15s ease, color 0.15s ease; display: flex; flex-direction: column; min-height: 100%; } /* Pins the footer to the bottom of the viewport on short pages (login, an empty list) instead of leaving it floating right under the content. */ .page { flex: 1 0 auto; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } a { color: var(--accent); } /* --------------------------------------------------------------- Top bar — styled like an editor's tab strip. The wordmark reads as a filename with an extension, the way the project itself is framed: an ongoing file the student keeps editing. Falls back to the school's own logo/name once branding is configured. ------------------------------------------------------------------ */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; background: var(--paper-raised); border-bottom: 1px solid var(--rule); height: 3.25rem; gap: 1rem; } .brand { font-family: var(--font-mono); font-weight: 500; font-size: 0.95rem; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 0.15rem; flex-shrink: 0; } .brand-logo { height: 1.9rem; max-width: 10rem; object-fit: contain; } .brand-name { font-weight: 600; margin-left: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; } .brand .ext { color: var(--ink-muted); } .brand .cursor { display: inline-block; width: 2px; height: 1em; background: var(--added); margin-left: 0.3rem; animation: blink 1.1s steps(1) infinite; } @media (prefers-reduced-motion: reduce) { .brand .cursor { animation: none; } } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .tabs { display: flex; height: 100%; flex: 1; overflow-x: auto; } .tab { display: flex; align-items: center; padding: 0 1.1rem; font-family: var(--font-mono); font-size: 0.82rem; text-decoration: none; color: var(--ink-muted); border-bottom: 2px solid transparent; letter-spacing: 0.01em; white-space: nowrap; } .tab:hover { color: var(--ink); } .tab.is-active { color: var(--ink); border-bottom-color: var(--accent); } .topbar-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; font-size: 0.95rem; line-height: 1; background: none; border: 1px solid var(--rule-strong); border-radius: 4px; color: var(--ink-muted); cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink); } .logout-form { display: flex; align-items: center; gap: 0.6rem; margin: 0; flex-shrink: 0; } .whoami { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); } .logout-btn { font-family: var(--font-mono); font-size: 0.78rem; background: none; border: 1px solid var(--rule-strong); border-radius: 4px; color: var(--ink-muted); padding: 0.3rem 0.6rem; cursor: pointer; } .logout-btn:hover { color: var(--danger); border-color: var(--danger); } /* --------------------------------------------------------------- Auth (login page) ------------------------------------------------------------------ */ .auth-card { max-width: 360px; margin: 2rem auto 0; } .auth-error { background: var(--danger-bg); color: var(--danger); border-radius: var(--radius); padding: 0.6rem 0.8rem; font-size: 0.85rem; margin-bottom: 1rem; } .auth-form { display: flex; flex-direction: column; gap: 0.4rem; } .auth-form label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-muted); margin-top: 0.6rem; } .auth-form input[type="text"], .auth-form input[type="password"] { font-family: var(--font-sans); font-size: 0.95rem; padding: 0.55rem 0.7rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); } .auth-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .auth-submit { margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.9rem; background: var(--ink); color: var(--paper-raised); border: none; border-radius: var(--radius); padding: 0.65rem; cursor: pointer; } .auth-submit:hover { background: var(--ink-strong); } /* --------------------------------------------------------------- Page shell ------------------------------------------------------------------ */ .page { max-width: 700px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; } .page-eyebrow { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin: 0 0 0.4rem; } h1 { font-family: var(--font-sans); font-weight: 600; font-size: 1.6rem; margin: 0 0 0.35rem; letter-spacing: -0.01em; } .hint { color: var(--ink-muted); margin: 0 0 1.75rem; font-size: 0.92rem; max-width: 52ch; } /* --------------------------------------------------------------- List toolbar — search (+ the pool page's sort switch), shared across the goal pool, plan, and courses pages. ------------------------------------------------------------------ */ .list-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .search-field { position: relative; flex: 1; min-width: 200px; } .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--ink-muted); font-size: 0.95rem; pointer-events: none; } .search-input { width: 100%; font-family: var(--font-sans); font-size: 0.9rem; padding: 0.55rem 0.75rem 0.55rem 2.1rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); } .search-input::placeholder { color: var(--ink-muted); } .search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } /* Suppress the default WebKit search-cancel decoration -- it clashes with the custom search icon on the left. */ .search-input::-webkit-search-cancel-button { -webkit-appearance: none; } /* Plain text input -- same footprint as .search-input, minus the reserved space for the search icon (used for things like a project or step title rather than an actual search box). */ .text-input { font-family: var(--font-sans); font-size: 0.9rem; padding: 0.55rem 0.75rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); } .text-input::placeholder { color: var(--ink-muted); } .text-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .inline-select { font-family: var(--font-sans); font-size: 0.88rem; padding: 0.55rem 0.65rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); } .inline-select:disabled { color: var(--ink-muted); } .inline-form { display: flex; gap: 0.5rem; align-items: center; margin: 0; } .inline-form .text-input, .inline-form .inline-select { flex: 1; min-width: 0; } .project-create-form { max-width: 420px; margin-bottom: 1.75rem; } .project-controls { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.1rem; } .tag-custom { background: var(--rule); color: var(--ink-muted); } .sort-switch { display: flex; flex-shrink: 0; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; } .sort-option { font-family: var(--font-mono); font-size: 0.78rem; background: var(--paper-raised); color: var(--ink-muted); border: none; padding: 0.5rem 0.8rem; cursor: pointer; } .sort-option:not(:last-child) { border-right: 1px solid var(--rule-strong); } .sort-option:hover { color: var(--ink); } .sort-option.is-active { background: var(--accent-bg); color: var(--accent); } /* --------------------------------------------------------------- Goal list — file-tree flavored rows (used on the pool + checklist) ------------------------------------------------------------------ */ .goal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .goal-card { display: flex; align-items: center; gap: 0.85rem; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.7rem 0.9rem; transition: background-color 0.15s ease, border-color 0.15s ease; } .goal-card.is-complete { background: var(--added-bg); border-color: var(--added-border); } .goal-row { display: flex; align-items: center; gap: 0.65rem; flex: 1; cursor: pointer; min-width: 0; } .goal-row input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--added); flex-shrink: 0; } .goal-title { font-size: 0.94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .is-complete .goal-title { color: var(--added); } .goal-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; flex-shrink: 0; } .tag { font-family: var(--font-mono); font-size: 0.7rem; background: var(--accent-bg); color: var(--accent); padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; } .tag::before { content: "::"; opacity: 0.55; margin-right: 0.1rem; } .tag-optional { background: var(--pending-bg); color: var(--pending); } .add-btn, .remove-btn { border: none; background: none; cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); white-space: nowrap; flex-shrink: 0; padding: 0.25rem 0.4rem; border-radius: 4px; } .add-btn::before { content: "+ "; } .add-btn:hover { background: var(--accent-bg); } .remove-btn { color: var(--ink-muted); font-size: 1.05rem; line-height: 1; padding: 0.1rem 0.35rem; } .remove-btn:hover { color: var(--danger); background: var(--danger-bg); } .in-plan-badge { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted); white-space: nowrap; flex-shrink: 0; } .in-plan-badge::before { content: "✓ "; color: var(--added); } .empty-state { color: var(--ink-muted); padding: 2.5rem 0; text-align: center; font-size: 0.92rem; border: 1px dashed var(--rule-strong); border-radius: var(--radius); } /* --------------------------------------------------------------- Plan page — the signature element: a git-log timeline. A spine runs down the left; each goal is a commit node. Filled green = landed, hollow = pending. This is the one place the design takes a real risk, so everything else stays quiet. ------------------------------------------------------------------ */ .plan-timeline { list-style: none; margin: 0; padding: 0 0 0 0.35rem; position: relative; } .plan-timeline::before { content: ""; position: absolute; left: 1.05rem; top: 0.9rem; bottom: 0.9rem; width: 2px; background: var(--rule-strong); } .plan-timeline li { list-style: none; position: relative; padding-left: 2.6rem; margin-bottom: 0.5rem; } .timeline-node { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--rule-strong); transition: background-color 0.15s ease, border-color 0.15s ease; z-index: 1; } .goal-card.is-complete .timeline-node { background: var(--added); border-color: var(--added); } .plan-timeline .goal-card { padding: 0.65rem 0.9rem; } .drag-handle { cursor: grab; color: var(--ink-muted); user-select: none; font-size: 0.9rem; flex-shrink: 0; } .drag-handle:active { cursor: grabbing; } /* --------------------------------------------------------------- Course checklist — framed as a build/test status. ------------------------------------------------------------------ */ .course-header { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; } .course-complete-badge { font-family: var(--font-mono); font-size: 0.75rem; background: var(--added-bg); color: var(--added); padding: 0.2rem 0.6rem; border-radius: 999px; } .course-complete-badge::before { content: "✓ "; } /* --------------------------------------------------------------- Courses overview — one section per course, stacked. ------------------------------------------------------------------ */ .course-section { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--rule); } .course-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .course-section h2 { font-size: 1.15rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; } .course-desc { margin-top: 0.2rem; margin-bottom: 1rem; } .build-status { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-muted); margin: 0.6rem 0 1.75rem; } .build-bar { display: flex; gap: 3px; margin-top: 0.4rem; } .build-bar span { flex: 1; height: 6px; border-radius: 2px; background: var(--rule); } .build-bar span.is-filled { background: var(--added); } /* --------------------------------------------------------------- Manage (school admin) section ------------------------------------------------------------------ */ .manage-shell { display: flex; gap: 2rem; align-items: flex-start; } .manage-nav { flex-shrink: 0; width: 160px; display: flex; flex-direction: column; gap: 0.2rem; position: sticky; top: 1.5rem; } .manage-nav a { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-muted); text-decoration: none; padding: 0.45rem 0.6rem; border-radius: 4px; } .manage-nav a:hover { background: var(--paper-raised); color: var(--ink); } .manage-nav a.is-active { background: var(--accent-bg); color: var(--accent); } .manage-main { flex: 1; min-width: 0; } .manage-table { width: 100%; border-collapse: collapse; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; font-size: 0.9rem; } .manage-table th { text-align: left; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); background: var(--paper); padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule); } .manage-table td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule); vertical-align: middle; } .manage-table tr:last-child td { border-bottom: none; } .manage-table .row-actions { display: flex; gap: 0.6rem; justify-content: flex-end; font-family: var(--font-mono); font-size: 0.78rem; } .manage-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .btn-primary { font-family: var(--font-mono); font-size: 0.82rem; background: var(--ink); color: var(--paper-raised); border: none; border-radius: var(--radius); padding: 0.5rem 0.9rem; text-decoration: none; cursor: pointer; display: inline-block; } .btn-primary:hover { background: var(--ink-strong); } .btn-secondary { font-family: var(--font-mono); font-size: 0.82rem; background: none; color: var(--ink-muted); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.5rem 0.9rem; text-decoration: none; cursor: pointer; display: inline-block; } .btn-secondary:hover { color: var(--ink); border-color: var(--ink); } .btn-danger-link { color: var(--danger); background: none; border: none; font-family: var(--font-mono); font-size: 0.78rem; cursor: pointer; padding: 0; } .manage-form { max-width: 480px; display: flex; flex-direction: column; gap: 0.3rem; } .manage-form label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-muted); margin-top: 0.8rem; } .manage-form input[type="text"], .manage-form input[type="file"], .manage-form textarea, .manage-form select { font-family: var(--font-sans); font-size: 0.95rem; padding: 0.55rem 0.7rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); width: 100%; } .manage-form textarea { min-height: 80px; resize: vertical; } .manage-form .checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; flex-direction: row; } .manage-form .checkbox-row label { margin: 0; } .manage-form .field-error { color: var(--danger); font-size: 0.78rem; } .manage-form .checkbox-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } .manage-form .checkbox-list label { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: normal; color: var(--ink); text-transform: none; letter-spacing: normal; margin: 0; } .credential-box { background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; max-width: 480px; } .credential-row { display: flex; align-items: center; gap: 0.75rem; } .credential-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-muted); width: 8.5rem; flex-shrink: 0; } .credential-value { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--ink); user-select: all; } .manage-form-actions { display: flex; gap: 0.6rem; margin-top: 1.5rem; } .current-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .current-logo img { height: 2.5rem; max-width: 12rem; object-fit: contain; border: 1px solid var(--rule); border-radius: 4px; padding: 0.3rem; background: var(--paper); } .requirement-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.9rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); margin-bottom: 0.4rem; } .requirement-row form { margin: 0; display: flex; align-items: center; gap: 0.5rem; } .requirement-row .goal-title { flex: 1; } /* --------------------------------------------------------------- Toasts ------------------------------------------------------------------ */ #toast-region { position: fixed; bottom: 1.5rem; right: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 10; } .toast { background: var(--ink); color: var(--paper-raised); padding: 0.6rem 1rem; border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.82rem; box-shadow: 0 8px 24px rgba(0,0,0,0.18); max-width: 320px; } /* --------------------------------------------------------------- Footer ------------------------------------------------------------------ */ .footer { flex-shrink: 0; border-top: 1px solid var(--rule); padding: 1.25rem 1.5rem; text-align: center; } .footer p { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-muted); } .footer-credit { color: var(--ink); font-weight: 500; } /* --------------------------------------------------------------- Small screens ------------------------------------------------------------------ */ @media (max-width: 480px) { .page { padding: 1.5rem 1rem 4rem; } .goal-tags { display: none; } .topbar { padding: 0 1rem; } .manage-shell { flex-direction: column; } .manage-nav { width: 100%; flex-direction: row; overflow-x: auto; position: static; } }