/* ACAD — Redesign ----------------------------------------------------------------------- Layout: Top navbar replaces the side rail. Full-width content up to 1100px. Nav houses the /student back-link, all section links, admin section (collapsed behind a trigger), theme picker, and user name. Themes: Four colour modes stored in localStorage under 'acad-theme'. Applied as a data-theme attribute on . Default: classic. classic — navy + gold (the original palette, cleaned up) forest — deep green + amber midnight — true dark, slate base + electric teal paper — near-white, ink, zero distraction Fonts: Source Serif 4 (display headings only, used sparingly) Inter (all UI / body text) IBM Plex Mono (course codes, data, type labels) — same as before but used more intentionally. Signature element: the theme swatches in the navbar — four filled circles that feel like ink-pad dots, not a settings panel. ----------------------------------------------------------------------- */ /* ================================================================== */ /* 0. Font imports */ /* ================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ================================================================== */ /* 1. Tokens — one block per theme */ /* ================================================================== */ :root, [data-theme="classic"] { /* Surface */ --bg: #F5F3EF; --surface: #FFFFFF; --surface-2: #F0EDE7; --border: #E0DBCF; /* Text */ --ink: #14213D; --ink-2: #4A5168; --ink-3: #8A8FA0; /* Accent */ --accent: #B8791A; --accent-muted: rgba(184, 121, 26, 0.12); --accent-text: #8A5910; /* Status */ --ok: #2E7D5C; --ok-muted: rgba(46, 125, 92, 0.12); --danger: #B3432B; --danger-muted: rgba(179, 67, 43, 0.10); /* Nav */ --nav-bg: #14213D; --nav-text: rgba(245, 243, 239, 0.80); --nav-text-hi: #F5F3EF; --nav-active-bg: rgba(184, 121, 26, 0.20); --nav-active-text: #F5C875; --nav-border: rgba(245, 243, 239, 0.10); /* Swatch dot for the theme picker */ --swatch: #B8791A; } [data-theme="forest"] { --bg: #F2F5F0; --surface: #FFFFFF; --surface-2: #EBF0E7; --border: #D4DCCC; --ink: #1A2E1C; --ink-2: #3E5440; --ink-3: #7A9178; --accent: #C07B12; --accent-muted: rgba(192, 123, 18, 0.12); --accent-text: #8A5600; --ok: #1E6B42; --ok-muted: rgba(30, 107, 66, 0.12); --danger: #A93226; --danger-muted: rgba(169, 50, 38, 0.10); --nav-bg: #1A2E1C; --nav-text: rgba(242, 245, 240, 0.78); --nav-text-hi: #F2F5F0; --nav-active-bg: rgba(192, 123, 18, 0.22); --nav-active-text: #F5CC6A; --nav-border: rgba(242, 245, 240, 0.10); --swatch: #1A2E1C; } [data-theme="midnight"] { --bg: #12141A; --surface: #1C1F29; --surface-2: #242836; --border: #2E3347; --ink: #E8EAF2; --ink-2: #9198B2; --ink-3: #555D7A; --accent: #2AB5AC; --accent-muted: rgba(42, 181, 172, 0.14); --accent-text: #2AB5AC; --ok: #34B37A; --ok-muted: rgba(52, 179, 122, 0.14); --danger: #E05C44; --danger-muted: rgba(224, 92, 68, 0.14); --nav-bg: #0E1016; --nav-text: rgba(232, 234, 242, 0.65); --nav-text-hi: #E8EAF2; --nav-active-bg: rgba(42, 181, 172, 0.16); --nav-active-text: #2AB5AC; --nav-border: rgba(232, 234, 242, 0.08); --swatch: #2AB5AC; } [data-theme="paper"] { --bg: #FAFAFA; --surface: #FFFFFF; --surface-2: #F3F3F3; --border: #DEDEDE; --ink: #111111; --ink-2: #444444; --ink-3: #888888; --accent: #111111; --accent-muted: rgba(17, 17, 17, 0.07); --accent-text: #111111; --ok: #1C6B44; --ok-muted: rgba(28, 107, 68, 0.10); --danger: #AA2A18; --danger-muted: rgba(170, 42, 24, 0.08); --nav-bg: #FFFFFF; --nav-text: #555555; --nav-text-hi: #111111; --nav-active-bg: rgba(17, 17, 17, 0.07); --nav-active-text: #111111; --nav-border: #E0E0E0; --swatch: #111111; } /* ================================================================== */ /* 2. Shared design tokens */ /* ================================================================== */ :root { --font-display: 'Source Serif 4', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; --radius-sm: 5px; --radius: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 14px rgba(0,0,0,0.06); --nav-h: 52px; --content-w: 1100px; --content-px: 40px; } /* ================================================================== */ /* 3. Reset & base */ /* ================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 0.2s, color 0.2s; } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.25; color: var(--ink); } h1 { font-size: 2rem; margin-bottom: 0.3em; } h2 { font-size: 1.2rem; margin-bottom: 0.3em; margin-top: 2rem; } h3 { font-size: 1rem; margin-bottom: 0.2em; } p { margin: 0 0 1em; } a { color: var(--ink); text-decoration: none; } code { font-family: var(--font-mono); background: var(--surface-2); border: 1px solid var(--border); padding: 0.1em 0.38em; border-radius: var(--radius-sm); font-size: 0.88em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ================================================================== */ /* 4. Top navigation bar */ /* ================================================================== */ .acad-nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); display: flex; align-items: center; gap: 0; padding: 0 var(--content-px); } /* -- Back to student portal link ----------------------------------- */ .acad-nav__home { display: flex; align-items: center; gap: 6px; color: var(--nav-text); font-size: 0.82rem; font-weight: 500; padding: 6px 10px 6px 0; margin-right: 8px; border-right: 1px solid var(--nav-border); white-space: nowrap; flex-shrink: 0; transition: color 0.15s; } .acad-nav__home:hover { color: var(--nav-text-hi); } .acad-nav__home svg { opacity: 0.6; flex-shrink: 0; } /* -- Brand --------------------------------------------------------- */ .acad-nav__brand { display: flex; align-items: baseline; gap: 8px; margin-left: 14px; margin-right: 28px; flex-shrink: 0; } .acad-nav__mark { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--nav-active-text); letter-spacing: 0.02em; } /* -- Primary nav links --------------------------------------------- */ .acad-nav__links { display: flex; align-items: center; gap: 2px; flex-grow: 1; min-width: 0; /* allows flex shrink without clipping the admin dropdown */ } .acad-nav__link { color: var(--nav-text); font-size: 0.88rem; font-weight: 500; padding: 7px 11px; border-radius: var(--radius-sm); white-space: nowrap; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .acad-nav__link:hover { color: var(--nav-text-hi); background: rgba(255,255,255,0.06); } .acad-nav__link.is-active { background: var(--nav-active-bg); color: var(--nav-active-text); } /* -- Admin dropdown ------------------------------------------------ */ .acad-nav__admin { position: relative; flex-shrink: 0; } .acad-nav__admin-trigger { display: flex; align-items: center; gap: 4px; color: var(--nav-text); font-size: 0.84rem; font-weight: 500; padding: 7px 10px; border-radius: var(--radius-sm); border: none; background: none; cursor: pointer; transition: color 0.15s, background 0.15s; } .acad-nav__admin-trigger:hover, .acad-nav__admin-trigger[aria-expanded="true"] { color: var(--nav-text-hi); background: rgba(255,255,255,0.06); } .acad-nav__admin-trigger svg { transition: transform 0.2s; } .acad-nav__admin-trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .acad-nav__admin-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; z-index: 200; } .acad-nav__admin-menu.is-open { display: block; } .acad-nav__admin-item { display: block; color: var(--ink-2); font-size: 0.88rem; padding: 8px 12px; border-radius: var(--radius-sm); transition: background 0.1s, color 0.1s; } .acad-nav__admin-item:hover, .acad-nav__admin-item.is-active { background: var(--surface-2); color: var(--ink); } /* -- Right-side controls ------------------------------------------- */ .acad-nav__end { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: 12px; } /* -- Theme picker --------------------------------------------------- */ .acad-theme-picker { display: flex; align-items: center; gap: 6px; } .acad-theme-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s, border-color 0.15s; flex-shrink: 0; } .acad-theme-dot:hover { transform: scale(1.18); } .acad-theme-dot.is-active { border-color: var(--nav-text-hi); transform: scale(1.12); } /* Dot colours — fixed, not theme-variable, so they're always visible */ .acad-theme-dot[data-theme="classic"] { background: #B8791A; } .acad-theme-dot[data-theme="forest"] { background: #2E6B2F; } .acad-theme-dot[data-theme="midnight"] { background: #2AB5AC; } .acad-theme-dot[data-theme="paper"] { background: #BBBBBB; border-color: rgba(255,255,255,0.25); } .acad-theme-dot[data-theme="paper"].is-active { border-color: var(--nav-text-hi); } /* -- User chip ----------------------------------------------------- */ .acad-nav__user { color: var(--nav-text); font-size: 0.82rem; font-weight: 500; padding: 4px 10px; border: 1px solid var(--nav-border); border-radius: 100px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } /* ================================================================== */ /* 5. Page shell */ /* ================================================================== */ .acad-shell { min-height: 100vh; } .acad-main { max-width: var(--content-w); margin: 0 auto; padding: 40px var(--content-px) 80px; } /* ================================================================== */ /* 6. Hero / page header */ /* ================================================================== */ .acad-hero { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--border); } .acad-hero h1 { margin-bottom: 6px; } .acad-hero__sub { color: var(--ink-2); margin: 0 0 20px; font-size: 0.97rem; } /* ================================================================== */ /* 7. Search bar */ /* ================================================================== */ .acad-search-bar { display: flex; gap: 8px; max-width: 600px; } .acad-search-bar input[type="search"], .acad-search-bar input[type="text"] { flex-grow: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.95rem; font-family: var(--font-body); background: var(--surface); color: var(--ink); transition: border-color 0.15s; } .acad-search-bar input[type="search"]:focus, .acad-search-bar input[type="text"]:focus { border-color: var(--accent); outline: none; } .acad-search-bar button { padding: 10px 20px; border: none; border-radius: var(--radius); background: var(--ink); color: var(--bg); font-weight: 500; font-size: 0.92rem; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; } .acad-search-bar button:hover { opacity: 0.85; } .acad-search-bar--page { margin-bottom: 28px; max-width: 100%; } /* ================================================================== */ /* 8. Section headings */ /* ================================================================== */ .acad-section { margin-bottom: 0; } /* H2 within .acad-section gets a subtle rule treatment */ .acad-section > h2 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 36px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } /* ================================================================== */ /* 9. Cards — resource & course */ /* ================================================================== */ .acad-resource-grid, .acad-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0 0 28px; } .acad-resource-card, .acad-course-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; cursor: pointer; } .acad-resource-card:hover, .acad-course-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); } .acad-resource-card__type { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .acad-resource-card h3 { font-family: var(--font-body); font-size: 0.93rem; font-weight: 600; margin-bottom: 0; } .acad-resource-card__meta { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-3); margin-top: 6px; } .acad-course-card__code { font-family: var(--font-mono); font-weight: 500; font-size: 0.95rem; color: var(--ink); } .acad-course-card__name { font-size: 0.84rem; color: var(--ink-2); margin-top: 4px; } .acad-rating-pill { align-self: flex-start; margin-top: auto; padding-top: 10px; font-size: 0.75rem; font-weight: 500; color: var(--ok); background: var(--ok-muted); padding: 3px 9px; border-radius: 100px; margin-top: 10px; } .acad-rating-pill--empty { color: var(--ink-3); background: var(--surface-2); } .acad-resource-card__link { display: contents; } /* ================================================================== */ /* 10. Breadcrumb */ /* ================================================================== */ .acad-breadcrumb { font-size: 0.83rem; color: var(--ink-3); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .acad-breadcrumb a { color: var(--ink-3); transition: color 0.15s; } .acad-breadcrumb a:hover { color: var(--ink); } .acad-breadcrumb__sep { opacity: 0.5; } /* Course title line */ .acad-course-name { font-family: var(--font-body); font-weight: 400; font-size: 1.5rem; color: var(--ink-2); margin-left: 10px; } .acad-course-description { color: var(--ink-2); max-width: 660px; margin-top: 6px; } /* ================================================================== */ /* 11. Empty states */ /* ================================================================== */ .acad-empty { color: var(--ink-2); background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius); padding: 18px 20px; font-size: 0.92rem; margin: 0 0 24px; } /* ================================================================== */ /* 12. Signature element: 4-axis rating bars */ /* ================================================================== */ .acad-rating-bars { display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin: 14px 0 4px; } .acad-rating-bar { display: grid; grid-template-columns: 120px 1fr 36px; align-items: center; gap: 12px; } .acad-rating-bar__label { font-size: 0.83rem; color: var(--ink-2); } .acad-rating-bar__track { display: block; height: 7px; background: var(--border); border-radius: 100px; overflow: hidden; } .acad-rating-bar__fill { display: block; height: 100%; background: var(--accent); border-radius: 100px; transition: width 0.4s ease; } .acad-rating-bar__value { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink); text-align: right; } .acad-rating-count { font-size: 0.83rem; color: var(--ink-3); margin: 0 0 8px; } /* ================================================================== */ /* 13. Star rating input */ /* ================================================================== */ #acad-rate-form { max-width: 480px; } .acad-rate-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); } .acad-rate-row span { font-size: 0.88rem; color: var(--ink); } .acad-stars { display: flex; gap: 2px; } .acad-star { background: none; border: none; font-size: 1.25rem; line-height: 1; color: var(--border); cursor: pointer; padding: 2px; transition: color 0.1s; } .acad-star.is-active { color: var(--accent); } .acad-rate-status { display: inline-block; margin-left: 10px; font-size: 0.83rem; color: var(--ok); } #acad-rate-form > .acad-button { margin-top: 16px; } /* ================================================================== */ /* 14. Buttons */ /* ================================================================== */ .acad-button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius); background: var(--ink); color: var(--bg); font-weight: 500; font-size: 0.9rem; border: none; cursor: pointer; transition: opacity 0.15s; } .acad-button:hover { opacity: 0.85; } .acad-button--ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); } .acad-button--ghost:hover { background: var(--surface-2); opacity: 1; } .acad-button--approve { background: var(--ok); color: #fff; } .acad-button--reject { background: transparent; color: var(--danger); border: 1px solid var(--danger); } .acad-button--reject:hover { background: var(--danger-muted); opacity: 1; } /* ================================================================== */ /* 15. Resource embed & actions */ /* ================================================================== */ .acad-resource-actions { display: flex; gap: 8px; margin: 16px 0 20px; flex-wrap: wrap; } .acad-embed { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; background: var(--surface); } .acad-embed iframe { width: 100%; height: 520px; border: none; display: block; } /* ================================================================== */ /* 16. Forms */ /* ================================================================== */ .acad-inline-form { display: flex; gap: 8px; margin: 14px 0 22px; flex-wrap: wrap; } .acad-inline-form input[type="text"], .acad-inline-form select { flex-grow: 1; max-width: 320px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.9rem; background: var(--surface); color: var(--ink); } .acad-form { max-width: 520px; margin-top: 8px; } .acad-form__field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .acad-form__field span, .acad-form__field label { font-size: 0.82rem; font-weight: 500; color: var(--ink-2); } .acad-form__field input, .acad-form__field select, .acad-form__field textarea { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.92rem; background: var(--surface); color: var(--ink); transition: border-color 0.15s; } .acad-form__field input:focus, .acad-form__field select:focus, .acad-form__field textarea:focus { border-color: var(--accent); outline: none; } .acad-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* ================================================================== */ /* 17. Grades table */ /* ================================================================== */ .acad-grades-table { width: 100%; max-width: 580px; border-collapse: collapse; margin: 14px 0 28px; } .acad-grades-table th, .acad-grades-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 0.88rem; } .acad-grades-table th { color: var(--ink-3); font-weight: 500; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface-2); } .acad-grades-table textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.88rem; background: var(--surface); color: var(--ink); resize: vertical; } .acad-empty-cell { color: var(--ink-3); font-style: italic; } /* ================================================================== */ /* 18. Reviews */ /* ================================================================== */ .acad-review-list { display: flex; flex-direction: column; gap: 10px; max-width: 600px; margin: 12px 0 28px; } .acad-review-card, .acad-moderation-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; } .acad-review-card__term { display: block; font-family: var(--font-mono); font-size: 0.76rem; color: var(--accent); margin-bottom: 6px; } .acad-review-card__axes { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.82rem; color: var(--ink-3); margin-bottom: 8px; } .acad-review-card p { margin: 0; font-size: 0.92rem; } .acad-moderation-card__status { font-size: 0.83rem; color: var(--ok); } .acad-review-card--accepted { border-color: var(--ok); } .acad-moderation-card--approved { border-color: var(--ok); } .acad-moderation-card--rejected { border-color: var(--danger); opacity: 0.6; } /* ================================================================== */ /* 19. Wiki */ /* ================================================================== */ .acad-wiki-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; margin: 12px 0 24px; max-width: 680px; line-height: 1.75; } .acad-wiki-list { list-style: none; margin: 12px 0 28px; padding: 0; max-width: 600px; } .acad-wiki-list li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .acad-wiki-list a { font-weight: 500; color: var(--ink); transition: color 0.15s; } .acad-wiki-list a:hover { color: var(--accent); } /* ================================================================== */ /* 20. Progress pills */ /* ================================================================== */ .acad-progress-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 28px; max-width: 680px; } .acad-progress-pill { font-family: var(--font-body); font-size: 0.82rem; padding: 6px 13px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-3); cursor: pointer; transition: all 0.15s; } .acad-progress-pill--in_progress { border-color: var(--accent); color: var(--accent); } .acad-progress-pill--done { background: var(--ok); border-color: var(--ok); color: #fff; } .acad-progress-pill.is-selected { box-shadow: 0 0 0 2px var(--ink); } /* ================================================================== */ /* 21. Status badges & pills */ /* ================================================================== */ .acad-doubt-status { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 100px; margin-left: 6px; } .acad-doubt-status--open { background: var(--accent-muted); color: var(--accent-text); } .acad-doubt-status--answered { background: var(--ok-muted); color: var(--ok); } .acad-doubt-status--closed { background: var(--surface-2); color: var(--ink-3); } .acad-pill-badge { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 100px; margin-top: 8px; } .acad-pill-badge--private { background: var(--surface-2); color: var(--ink-3); } .acad-pill-badge--public { background: var(--ok-muted); color: var(--ok); } /* ================================================================== */ /* 22. Checklist (semester setup) */ /* ================================================================== */ .acad-checklist-wrap { overflow-x: auto; margin: 16px 0 12px; } .acad-checklist { border-collapse: collapse; width: 100%; } .acad-checklist th { text-align: left; font-size: 0.75rem; font-weight: 500; color: var(--ink-3); padding: 6px 10px; white-space: nowrap; background: var(--surface-2); } .acad-checklist th[scope="row"] { font-family: var(--font-mono); color: var(--ink); font-size: 0.84rem; background: none; } .acad-checklist td { padding: 4px 10px; text-align: center; } .acad-checklist-cell { display: inline-block; width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; vertical-align: middle; margin-right: 6px; transition: background 0.15s; /* Reset browser button defaults */ padding: 0; font: inherit; -webkit-appearance: none; appearance: none; line-height: 1; } .acad-checklist-cell--not_started { background: var(--surface); } .acad-checklist-cell--in_progress { background: var(--accent); border-color: var(--accent); } .acad-checklist-cell--done { background: var(--ok); border-color: var(--ok); } .acad-checklist-cell--not_applicable { background: var(--border); border-color: var(--border); } .acad-checklist-legend { font-size: 0.78rem; color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .acad-checklist-legend .acad-checklist-cell { cursor: default; margin-right: 0; } /* ================================================================== */ /* 23. Migration queue */ /* ================================================================== */ #acad-migration-results { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; max-width: 580px; } .acad-migration-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; } .acad-migration-item__filename { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-3); margin: 0 0 10px; word-break: break-all; } .acad-migration-item select, .acad-migration-item input[type="text"] { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.88rem; margin-bottom: 8px; background: var(--surface); color: var(--ink); } .acad-migration-item__actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .acad-migration-item--confirmed { border-color: var(--ok); } .acad-migration-item--rejected { border-color: var(--danger); opacity: 0.6; } /* ================================================================== */ /* 24. Message / error card */ /* ================================================================== */ .acad-card--message { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 36px; max-width: 480px; margin-top: 48px; } .acad-card--message p { color: var(--ink-2); } /* ================================================================== */ /* 25. Admin section label in nav (legacy rail — repurposed for JS) */ /* ================================================================== */ .acad-rail__section-label { /* kept for any PHP that still emits it; visually invisible in new nav */ display: none; } /* ================================================================== */ /* 26. Responsive */ /* ================================================================== */ @media (max-width: 900px) { :root { --content-px: 20px; } .acad-nav { padding: 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .acad-nav::-webkit-scrollbar { display: none; } /* Stop the link row from flex-shrinking: with flex-grow:1 it collapsed and its links overflowed *under* the theme picker. Pinning it to content width lets the whole bar scroll horizontally as one unit instead. */ .acad-nav__links { gap: 0; flex: 0 0 auto; } .acad-nav__link { font-size: 0.83rem; padding: 7px 8px; } .acad-nav__user { display: none; } .acad-rating-bar { grid-template-columns: 90px 1fr 30px; } .acad-form__row { grid-template-columns: 1fr; } .acad-embed iframe { height: 380px; } } @media (max-width: 600px) { .acad-nav__brand, .acad-nav__home { /* Collapse on very small screens */ } .acad-resource-grid, .acad-course-grid { grid-template-columns: 1fr; } .acad-main { padding-top: 28px; } } /* ================================================================== */ /* 27. Dashboard */ /* ================================================================== */ .acad-dash { /* Nothing here — uses .acad-main as its outer shell */ } /* Header row: greeting left, search right */ .acad-dash__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--border); } .acad-dash__greeting h1 { font-size: 2.4rem; margin-bottom: 4px; } .acad-dash__greeting p { color: var(--ink-2); font-size: 0.95rem; margin: 0; } /* Search — compact, right-aligned */ .acad-dash__search { display: flex; gap: 0; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .acad-dash__search input[type="search"] { width: 280px; padding: 10px 14px; border: none; font-size: 0.9rem; font-family: var(--font-body); background: transparent; color: var(--ink); } .acad-dash__search input[type="search"]:focus { outline: none; } .acad-dash__search:focus-within { border-color: var(--accent); } .acad-dash__search button { padding: 0 14px; border: none; background: var(--surface-2); color: var(--ink-2); cursor: pointer; border-left: 1px solid var(--border); transition: background 0.15s, color 0.15s; } .acad-dash__search button:hover { background: var(--accent-muted); color: var(--accent); } /* Two-column grid */ .acad-dash__grid { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; } .acad-dash__col { display: flex; flex-direction: column; gap: 28px; } /* Section containers */ .acad-dash-section { /* minimal wrapper */ } .acad-dash-section--muted { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .acad-dash-section__title { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: 0 0 12px; display: flex; align-items: baseline; justify-content: space-between; } .acad-dash-section__more { font-size: 0.75rem; text-transform: none; letter-spacing: 0; color: var(--accent); font-weight: 500; } .acad-dash-section__more:hover { text-decoration: underline; } /* ------------------------------------------------------------------ */ /* Course rows */ /* ------------------------------------------------------------------ */ .acad-course-rows { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .acad-course-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border); transition: background 0.12s; } .acad-course-row:last-child { border-bottom: none; } .acad-course-row:hover { background: var(--surface-2); } .acad-course-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .acad-course-row__code { font-family: var(--font-mono); font-size: 0.92rem; font-weight: 500; color: var(--ink); transition: color 0.15s; } .acad-course-row__code:hover { color: var(--accent); } .acad-course-row__name { font-size: 0.82rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Signals: progress bar + grade tag */ .acad-course-row__signals { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .acad-signal { display: flex; align-items: center; gap: 7px; } .acad-signal__bar-wrap { width: 80px; height: 6px; background: var(--border); border-radius: 100px; overflow: hidden; } .acad-signal__bar { height: 100%; background: var(--ok); border-radius: 100px; min-width: 2px; transition: width 0.3s ease; } .acad-signal__label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); white-space: nowrap; } .acad-signal__tag { font-size: 0.72rem; color: var(--accent-text); background: var(--accent-muted); padding: 2px 8px; border-radius: 100px; white-space: nowrap; } /* Row action links */ .acad-course-row__actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .acad-row-link { font-size: 0.78rem; font-weight: 500; color: var(--ink-3); padding: 4px 8px; border-radius: var(--radius-sm); transition: background 0.12s, color 0.12s; white-space: nowrap; } .acad-row-link:hover { background: var(--surface-2); color: var(--ink); } /* ------------------------------------------------------------------ */ /* Doubt rows */ /* ------------------------------------------------------------------ */ .acad-doubt-rows { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .acad-doubt-row { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); transition: background 0.12s; } .acad-doubt-row:last-child { border-bottom: none; } .acad-doubt-row:hover { background: var(--surface-2); } .acad-doubt-row__course { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-3); } .acad-doubt-row__title { font-size: 0.88rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acad-doubt-row__answers { font-size: 0.76rem; color: var(--ink-3); white-space: nowrap; } /* ------------------------------------------------------------------ */ /* Jump list (sidebar quick actions) */ /* ------------------------------------------------------------------ */ .acad-jump-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .acad-jump-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; font-size: 0.88rem; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--border); transition: background 0.12s, color 0.12s; } .acad-jump-item:last-child { border-bottom: none; } .acad-jump-item:hover { background: var(--surface-2); color: var(--ink); } .acad-jump-item__count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--border); padding: 1px 7px; border-radius: 100px; } /* ------------------------------------------------------------------ */ /* Catalogue stat */ /* ------------------------------------------------------------------ */ .acad-dash-stat { font-size: 0.83rem; color: var(--ink-2); margin: 0; line-height: 1.6; } .acad-dash-stat__num { font-family: var(--font-mono); font-weight: 500; color: var(--ink); } /* ------------------------------------------------------------------ */ /* Empty state jump grid (first-time user) */ /* ------------------------------------------------------------------ */ .acad-dash__empty-state { margin-top: 8px; } .acad-jump-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .acad-jump-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .acad-jump-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); } .acad-jump-card__icon { font-size: 1.3rem; color: var(--accent); margin-bottom: 2px; } .acad-jump-card strong { font-size: 0.95rem; color: var(--ink); } .acad-jump-card span { font-size: 0.82rem; color: var(--ink-3); } /* ================================================================== */ /* 28. Dashboard responsive */ /* ================================================================== */ @media (max-width: 900px) { .acad-dash__header { flex-direction: column; align-items: stretch; gap: 16px; } .acad-dash__search input[type="search"] { width: 100%; } .acad-dash__grid { grid-template-columns: 1fr; } /* Move side column above main on mobile so quick actions are first */ .acad-dash__col--side { order: -1; } .acad-course-row { grid-template-columns: 1fr; gap: 8px; } .acad-course-row__signals, .acad-course-row__actions { justify-content: flex-start; } .acad-doubt-row { grid-template-columns: auto 1fr; grid-template-rows: auto auto; } .acad-doubt-row__answers { grid-column: 2; } } /* ================================================================== */ /* 29. Admin-specific components */ /* ================================================================== */ .acad-admin-section-head { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: 36px 0 14px; display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .acad-count-badge { font-size: 0.72rem; font-weight: 600; color: var(--accent-text); background: var(--accent-muted); padding: 2px 9px; border-radius: 100px; text-transform: none; letter-spacing: 0; } /* Role badges in manage-admins */ .acad-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 24px; } .acad-role-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .acad-role-card strong { font-size: 0.88rem; color: var(--ink); } .acad-role-card span { font-size: 0.8rem; color: var(--ink-3); line-height: 1.5; } .acad-role-badge { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 100px; } .acad-role-badge--super { background: rgba(184,121,26,0.15); color: var(--accent-text); } .acad-role-badge--content { background: var(--ok-muted); color: var(--ok); } .acad-role-badge--moderator { background: var(--surface-2); color: var(--ink-3); } /* Submission cards */ .acad-submission-list { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin-bottom: 24px; } .acad-submission-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; } .acad-submission-card__meta { display: flex; align-items: baseline; gap: 12px; } .acad-submission-card__who { font-size: 0.78rem; color: var(--ink-3); } .acad-submission-card__note { font-size: 0.85rem; color: var(--ink-2); font-style: italic; margin: 0; } .acad-submission-card__link a { font-size: 0.83rem; color: var(--accent); font-weight: 500; } .acad-submission-card__link a:hover { text-decoration: underline; } /* Form hint text */ .acad-form__hint { font-size: 0.8rem; color: var(--ink-3); margin: -8px 0 10px; } /* ================================================================== */ /* 30. Drive settings page */ /* ================================================================== */ .acad-drive-status-grid { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); max-width: 480px; margin-bottom: 20px; } .acad-drive-status-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 0.88rem; color: var(--ink-2); } .acad-drive-status-row:last-child { border-bottom: none; } .acad-drive-status-pill { font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 100px; } .acad-drive-status-pill--ok { background: var(--ok-muted); color: var(--ok); } .acad-drive-status-pill--warn { background: var(--danger-muted); color: var(--danger); } .acad-drive-status-pill--none { background: var(--surface-2); color: var(--ink-3); } /* Setup steps */ .acad-setup-steps { max-width: 620px; padding-left: 22px; color: var(--ink-2); font-size: 0.9rem; line-height: 1.7; } .acad-setup-steps li { margin-bottom: 10px; } .acad-setup-steps strong { color: var(--ink); } /* ================================================================== */ /* 31. Catalogue completeness page */ /* ================================================================== */ .acad-completeness-course { margin-bottom: 32px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); } .acad-completeness-course__header { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .acad-completeness-course__code { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; color: var(--ink); } .acad-completeness-course__name { font-size: 0.85rem; color: var(--ink-3); flex-grow: 1; } .acad-completeness-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0; } .acad-completeness-cell { padding: 14px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 80px; } .acad-completeness-cell:last-child { border-right: none; } .acad-completeness-cell--empty { background: var(--surface); opacity: 0.6; } .acad-completeness-cell--has { background: var(--surface); } .acad-completeness-cell__type { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; } .acad-completeness-cell__missing { font-size: 0.75rem; color: var(--ink-3); font-style: italic; } .acad-completeness-cell__years { display: flex; flex-wrap: wrap; gap: 4px; } .acad-completeness-cell__sections { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .acad-year-tag { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; background: var(--ok-muted); color: var(--ok); padding: 2px 7px; border-radius: 100px; } .acad-section-tag { font-size: 0.68rem; background: var(--accent-muted); color: var(--accent-text); padding: 1px 6px; border-radius: 100px; } /* Section badge on resource cards */ .acad-resource-card__section { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent-text); background: var(--accent-muted); padding: 1px 7px; border-radius: 100px; display: inline-block; margin-top: 4px; } /* ================================================================== */ /* 20. Tags, folders & faceted browse (flexibility redesign) */ /* ================================================================== */ /* --- Tag chips (display) ------------------------------------------- */ .acad-tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .acad-tag-row--lg { gap: 7px; margin: 4px 0 20px; } .acad-tag { font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.4; color: var(--accent-text); background: var(--accent-muted); padding: 2px 8px; border-radius: 100px; white-space: nowrap; } .acad-tag-row--lg .acad-tag { font-size: 0.74rem; padding: 3px 11px; } a.acad-tag--link { text-decoration: none; transition: background 0.15s, color 0.15s; } a.acad-tag--link:hover { background: var(--accent); color: #fff; } /* --- Faceted filter bar (search page + Find view) ------------------ */ .acad-facets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 22px; } .acad-facets__label { font-size: 0.8rem; color: var(--ink-3); margin-right: 2px; } .acad-facet { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 0.8rem; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: 4px 12px; cursor: pointer; text-decoration:none; transition: border-color 0.15s, background 0.15s, color 0.15s; } .acad-facet:hover { border-color: var(--accent); color: var(--ink); } .acad-facet.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .acad-facet__count { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); } .acad-facet.is-active .acad-facet__count { color: rgba(255,255,255,0.75); } .acad-facet__x { font-size: 0.9rem; line-height: 1; } .acad-facet--clear { color: var(--danger); border-style: dashed; } .acad-facet--clear:hover { border-color: var(--danger); color: var(--danger); } /* --- View toggle (Browse / Find) ----------------------------------- */ .acad-viewtoggle { display: flex; align-items: center; gap: 6px; margin: 0 0 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; } .acad-viewtoggle__btn { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 6px 14px; cursor: pointer; transition: background 0.15s, color 0.15s; } .acad-viewtoggle__btn:hover { color: var(--ink); background: var(--surface-2); } .acad-viewtoggle__btn.is-active { color: var(--accent-text); background: var(--accent-muted); } .acad-viewtoggle__meta { margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); } /* --- View panes ---------------------------------------------------- Without JS, every view stays visible (content is never hidden). Once the toggle script runs it marks the container .is-js, and only then do inactive panes collapse — graceful degradation. */ .acad-course-view.is-js .acad-view { display: none; } .acad-course-view.is-js .acad-view.is-active { display: block; } .acad-course-view.is-js .acad-viewtoggle { display: flex; } .acad-viewtoggle { display: none; } /* the toggle itself is only useful with JS */ .acad-course-view:not(.is-js) .acad-view + .acad-view { margin-top: 24px; } /* --- Browse: Drive-mirroring folder tree --------------------------- */ /* Nested folders (depth > 0): a light, bordered indent. */ .acad-folder { border-left: 2px solid var(--border); margin: 0 0 6px 2px; padding-left: 14px; } .acad-folder__summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 7px 0; font-size: 0.9rem; color: var(--ink); user-select: none; } .acad-folder__summary::-webkit-details-marker { display: none; } .acad-folder__chevron { font-size: 0.7rem; line-height: 1; color: var(--ink-3); transition: transform 0.15s; flex: 0 0 auto; } .acad-folder[open] > .acad-folder__summary .acad-folder__chevron { transform: rotate(90deg); } .acad-folder__icon { display: inline-flex; color: var(--ink-3); flex: 0 0 auto; } .acad-folder__name { font-weight: 500; } .acad-folder__count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); background: var(--surface-2); padding: 0 7px; border-radius: 100px; } .acad-folder__body { padding: 4px 0 8px; } .acad-folder__body .acad-resource-grid { margin-bottom: 12px; } /* Top-level categories (lecture, pyqs, misc …): a distinct anchored header. */ .acad-folder--category { border-left: none; padding-left: 0; margin: 0 0 18px; } .acad-folder--category > .acad-folder__summary { padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.98rem; transition: border-color 0.15s, background 0.15s; } .acad-folder--category[open] > .acad-folder__summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .acad-folder--category > .acad-folder__summary:hover { border-color: var(--accent); } .acad-folder--category > .acad-folder__summary .acad-folder__icon { color: var(--accent); } .acad-folder--category > .acad-folder__summary .acad-folder__name { font-weight: 600; color: var(--ink); } .acad-folder--category > .acad-folder__summary .acad-folder__count { margin-left: auto; background: var(--surface); color: var(--ink-2); } /* Body of an open category: framed to read as one unit with its header. */ .acad-folder--category > .acad-folder__body { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); padding: 14px 16px 6px; } .acad-folder--category > .acad-folder__body .acad-folder { margin-left: 0; } .acad-find__item[hidden] { display: none; } /* --- Tag input widget (Quick-Add) ---------------------------------- */ .acad-tag-input { position: relative; } .acad-tag-input__box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 9px; min-height: 42px; } .acad-tag-input__box:focus-within { border-color: var(--accent); } .acad-tag-input__chips { display: contents; } .acad-tag-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 0.8rem; color: var(--accent-text); background: var(--accent-muted); border-radius: 100px; padding: 3px 5px 3px 11px; } .acad-tag-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; background: transparent; color: var(--accent-text); font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 100px; padding: 0; } .acad-tag-chip__x:hover { background: rgba(0,0,0,0.10); } .acad-tag-input__text { flex: 1 1 120px; min-width: 120px; border: none; outline: none; background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 0.9rem; padding: 3px 2px; } .acad-tag-input__suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; max-height: 240px; overflow-y: auto; } .acad-tag-suggest__opt { display: block; width: 100%; text-align: left; border: none; background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 0.85rem; padding: 8px 12px; cursor: pointer; } .acad-tag-suggest__opt:hover { background: var(--surface-2); } .acad-tag-input__quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .acad-tag-quick { font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-2); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 100px; padding: 3px 11px; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .acad-tag-quick:hover { color: var(--accent-text); border-color: var(--accent); } .acad-tag-quick.is-added { opacity: 0.45; cursor: default; } /* --- Form hint ----------------------------------------------------- */ .acad-form__hint { font-weight: 400; color: var(--ink-3); font-size: 0.78rem; } .acad-form__hint code { font-family: var(--font-mono); font-size: 0.72rem; background: var(--surface-2); padding: 0 4px; border-radius: var(--radius-sm); } /* --- Tag-coverage view (admin Completeness) ------------------------ */ .acad-coverage__total { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); margin-left: auto; margin-right: 14px; } .acad-coverage__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; } .acad-cov-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 100px; padding: 3px 5px 3px 12px; } .acad-cov-tag--suggested { color: var(--accent-text); background: var(--accent-muted); border-color: transparent; } .acad-cov-tag__count { font-family: var(--font-mono); font-size: 0.7rem; background: var(--surface); color: var(--ink-2); padding: 1px 7px; border-radius: 100px; } .acad-cov-tag__years { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-3); padding-right: 8px; } .acad-coverage__missing { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; } .acad-coverage__missing-label { font-size: 0.78rem; color: var(--ink-3); margin-right: 2px; } .acad-cov-tag--missing { color: var(--danger); background: transparent; border: 1px dashed var(--danger-muted); padding: 3px 12px; opacity: 0.85; } .acad-coverage__untagged { margin-top: 10px; font-size: 0.8rem; color: var(--accent-text); } .acad-coverage__empty { margin: 10px 0 0; } /* --- Tag-driven Semester Setup ------------------------------------- */ .acad-plan-course { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm); } .acad-plan-course__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .acad-plan-course__code { font-family: var(--font-mono); font-weight: 500; color: var(--ink); } .acad-plan-course__name { font-size: 0.85rem; color: var(--ink-2); } .acad-plan-items { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .acad-plan-empty { font-size: 0.82rem; color: var(--ink-3); } .acad-plan-item { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 100px; padding: 3px 5px 3px 6px; font-size: 0.82rem; color: var(--ink); } .acad-plan-item__dot { width: 14px; height: 14px; border-radius: 100px; border: 1px solid var(--ink-3); background: var(--surface); cursor: pointer; padding: 0; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; } .acad-plan-item__label { font-weight: 500; } .acad-plan-item__count { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); } .acad-plan-item__remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; background: transparent; color: var(--ink-3); font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 100px; padding: 0; } .acad-plan-item__remove:hover { background: var(--danger-muted); color: var(--danger); } /* Status colour on the dot — same semantics as the legacy checklist */ .acad-plan-item--not_started .acad-plan-item__dot { background: var(--surface); border-color: var(--ink-3); } .acad-plan-item--in_progress .acad-plan-item__dot { background: var(--accent); border-color: var(--accent); } .acad-plan-item--done .acad-plan-item__dot { background: var(--ok); border-color: var(--ok); } .acad-plan-item--not_applicable .acad-plan-item__dot { background: var(--border); border-color: var(--border); } .acad-plan-item--done .acad-plan-item__label { color: var(--ink-2); } /* Legend dots reuse the same status classes */ .acad-plan-dot { display: inline-block; width: 13px; height: 13px; border-radius: 100px; border: 1px solid var(--ink-3); vertical-align: middle; margin: 0 3px 0 10px; } .acad-plan-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px dashed var(--border); padding-top: 12px; } .acad-plan-suggest { font-size: 0.78rem; color: var(--ink-2); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 100px; padding: 3px 11px; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .acad-plan-suggest:hover { color: var(--accent-text); border-color: var(--accent); } .acad-plan-add-form { margin: 0 0 0 auto; gap: 6px; } .acad-plan-add-input { min-width: 160px; } .acad-button--sm { padding: 5px 12px; font-size: 0.8rem; } /* ================================================================== */ /* Drive-browse elevation — the library grid (dashboard) */ /* ================================================================== */ .acad-lib { margin-bottom: 30px; } .acad-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .acad-lib-card { display: flex; flex-direction: column; gap: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px 14px; box-shadow: var(--shadow-sm); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .acad-lib-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); } .acad-lib-card__code { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); } .acad-lib-card__name { font-size: 0.83rem; line-height: 1.35; color: var(--ink-2); /* Clamp to two lines so cards stay even. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.25em; } .acad-lib-card__meta { margin-top: 6px; font-size: 0.74rem; color: var(--ink-3); } .acad-lib-card__count { font-family: var(--font-mono); font-weight: 500; color: var(--accent-text); } .acad-lib-card__count--empty { color: var(--ink-3); font-weight: 400; } .acad-dash-hint { font-size: 0.85rem; line-height: 1.5; color: var(--ink-2); margin: 0; } /* Catalogue-first search: course cards carry a resource count. */ .acad-course-card__meta { margin-top: 8px; font-family: var(--font-mono); font-size: 0.73rem; color: var(--ink-3); } .acad-search-hint { font-size: 0.85rem; color: var(--ink-2); margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } /* ================================================================== */ /* 30. Survival Mode — the days-left study path */ /* ================================================================== */ /* Days-left input paired with an inline unit label. */ .acad-days-field { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--ink-3); } .acad-days-field input[type="number"] { max-width: 72px; } /* Plan header: the mode, its reasoning, and a concrete snapshot. */ .acad-plan-head { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin: 22px 0 8px; } .acad-plan-head__mode { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; } .acad-plan-head__badge { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-text); background: var(--accent-muted); padding: 3px 11px; border-radius: 100px; } .acad-plan-head__course { font-family: var(--font-mono); font-weight: 600; font-size: 1rem; color: var(--ink); } .acad-plan-head__days { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-3); } .acad-plan-head__note { color: var(--ink-2); max-width: 660px; margin: 10px 0 0; font-size: 0.92rem; } .acad-plan-head__stat { margin: 10px 0 0; font-size: 0.85rem; color: var(--ink-3); } .acad-plan-head__stat strong { color: var(--ink); font-weight: 600; } /* The ordered path itself. */ .acad-plan { list-style: none; margin: 20px 0 8px; padding: 0; } .acad-plan-step { position: relative; padding: 0 0 8px 40px; margin-bottom: 20px; } /* Vertical spine connecting the numbered steps. */ .acad-plan-step::before { content: ""; position: absolute; left: 15px; top: 30px; bottom: -18px; width: 2px; background: var(--border); } .acad-plan-step:last-child::before { display: none; } .acad-plan-step__head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 14px; } .acad-plan-step__num { position: absolute; left: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 100px; background: var(--surface); border: 2px solid var(--border); font-family: var(--font-mono); font-weight: 600; font-size: 0.9rem; color: var(--ink-2); z-index: 1; } .acad-plan-step--first .acad-plan-step__num { background: var(--accent); border-color: var(--accent); color: #fff; } .acad-plan-step__titles { padding-top: 3px; } .acad-plan-step__title { font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: var(--ink); margin: 0; text-transform: none; letter-spacing: 0; border: none; padding: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .acad-plan-step__tag { font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-text); background: var(--accent-muted); padding: 2px 9px; border-radius: 100px; } .acad-plan-step__hint { margin: 5px 0 0; font-size: 0.86rem; color: var(--ink-2); max-width: 620px; } .acad-plan-step__more { display: inline-block; margin-top: 2px; font-size: 0.82rem; color: var(--accent-text); } .acad-plan-step__more:hover { text-decoration: underline; } /* Top-rated pick within a step gets a quiet accent edge. */ .acad-resource-card--pick { border-color: var(--accent); } .acad-plan-topics-title { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 36px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } /* Done topics read as muted once cleared from the active pile. */ .acad-progress-list .acad-progress-pill--done { opacity: 0.75; } @media (max-width: 560px) { .acad-plan-step { padding-left: 34px; } .acad-plan-step__num { width: 28px; height: 28px; } .acad-plan-step::before { left: 13px; } } /* --- Pinned courses + pin button ------------------------------------- */ .acad-lib-cell { position: relative; display: flex; } .acad-lib-cell > .acad-lib-card { flex: 1 1 auto; width: 100%; } .acad-pin-btn { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--ink-3); cursor: pointer; opacity: 0.5; transition: opacity .15s, color .15s, border-color .15s, background .15s, transform .1s; } .acad-lib-cell:hover .acad-pin-btn { opacity: 1; } .acad-pin-btn:hover { color: var(--accent-text); border-color: var(--accent); } .acad-pin-btn:active { transform: scale(0.88); } .acad-pin-btn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; } .acad-pin-btn.is-pinned { opacity: 1; color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft, rgba(120, 120, 255, 0.08)); } .acad-pin-btn.is-pinned svg { fill: currentColor; } .acad-pin-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .acad-pinned { margin-bottom: 26px; } .acad-pinned__empty { margin-top: 4px; } /* Course-page pin button — a labelled variant (not the card-corner icon). */ .acad-course-pin { margin: 8px 0 2px; } .acad-pin-btn--wide { position: static; width: auto; height: auto; gap: 6px; padding: 7px 12px; font-size: 0.82rem; font-weight: 500; line-height: 1; opacity: 1; color: var(--ink-2); } .acad-pin-btn--wide.is-pinned { color: var(--accent-text); }