/* Eduversal Handbook Reader — shared design module * Canonical source: Central Hub/handbook.html * Synced to AH/TH via npm run sync:handbook * Edit this file, then run sync to propagate. */ :root { --accent: #6c5ce7; --accent-dk: #4e3db8; --accent-2: #ddd6fe; } body { background: var(--paper); } /* Dual-mode visibility toggle. JS flips a class on based on URL: 'is-browser-mode' shows the grid view, 'is-reader-mode' shows the single-handbook reader. Both modes pre-rendered in HTML for fast first paint; CSS hides the inactive one. */ body.is-reader-mode .hb-browser { display: none; } body.is-browser-mode .hb-reader { display: none; } /* ── Browser-mode shell (mirrors /references pattern) ─────────── */ /* Hero — Knowledge family (canonical, data-accent="mor"). Reads the same --hero-grad-mor token shared-styles.css uses for .page-hero, so the handbook reader matches /references, /roles-positions, etc. AH+TH carry the token in their own tokens.css. Fallback gradient preserves visual identity if the variable ever goes missing. */ .hero { background: var(--hero-grad-mor, linear-gradient(140deg, #1e1b4b 0%, #3730a3 45%, #6c5ce7 100%)); padding: 28px 40px 0; color: #fff; position: relative; overflow: hidden; /* Fixed minimum keeps the hero the same height whether 3 or 4 KPI tiles render, and matches the AH+TH handbook hero band. */ min-height: 280px; display: flex; align-items: center; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 20%, rgba(108,92,231,.35) 0%, transparent 60%); pointer-events: none; } .hero-inner { max-width: 1200px; margin: 0 auto; width: 100%; /* width: 100% is critical — .hero is a flex container, so .hero-inner (a flex item) defaults to content-sized rather than 1200px-wide. Without it, margin: 0 auto centres a narrow block instead of the expected full 1200px clamp, and KPI tiles end up far right of the search box. Matches AH/TH .hb-browser-hero-inner. */ padding-left: 40px; display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; } @media (max-width: 720px) { .hero-inner { padding-left: 0; } } .hero-title { width: 100%; } .hero-eyebrow { font-size: .65rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(196,181,253,.85); margin-bottom: 6px; } .hero h1 { font-family: 'Lora', serif; font-size: 2rem; margin: 0 0 8px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; } .hero p { color: rgba(255,255,255,.72); font-size: .92rem; margin: 0; line-height: 1.5; } .hero p code { background: rgba(255,255,255,.12); padding: 1px 6px; border-radius: 3px; color: #ddd6fe; font-family: 'DM Mono', monospace; font-size: 11.5px; } .hero-kpis { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; padding-bottom: 28px; } .hero-kpi { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px 18px; min-width: 130px; backdrop-filter: blur(4px); } .hero-kpi.hero-kpi-primary { background: linear-gradient(135deg, rgba(108,92,231,.32) 0%, rgba(108,92,231,.18) 100%); border-color: rgba(196,181,253,.4); min-width: 170px; } .hero-kpi-num { font-family: 'Lora', serif; font-size: 2.4rem; line-height: 1; font-weight: 600; letter-spacing: -.02em; color: #fff; font-feature-settings: 'tnum'; } .hero-kpi-primary .hero-kpi-num { font-size: 2.8rem; } .hero-kpi-lbl { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 6px; } .hero-kpi-primary .hero-kpi-lbl { color: rgba(221,214,254,.85); } .hero-kpi-sub { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 3px; font-weight: 400; } @media (max-width: 720px) { .hero { padding: 22px 22px 0; min-height: 0; /* let mobile reflow to natural height */ align-items: flex-start; } .hero h1 { font-size: 1.55rem; } .hero-kpi-primary .hero-kpi-num { font-size: 2.2rem; } .hero-kpi-num { font-size: 1.8rem; } } /* Info strip (2026-05-26) — three side-by-side category cards between hero and sticky toolbar. Tells the reader what each shelf is FOR before they meet the search/facet/bookshelf layer. Mor-tinted on a paper background so it reads as an extension of the hero, not a separate section. */ .hb-info-strip { max-width: 1200px; margin: 0 auto; padding: 24px 32px 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .hb-info-card { background: linear-gradient(180deg, rgba(108,92,231,.045) 0%, rgba(108,92,231,.015) 100%); border: 1px solid rgba(108,92,231,.16); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; } .hb-info-card-head { display: flex; align-items: center; gap: 10px; font-family: 'Lora', serif; font-size: 1rem; font-weight: 600; color: var(--ink); letter-spacing: -.005em; } .hb-info-card-emoji { font-size: 1.25rem; line-height: 1; flex-shrink: 0; } .hb-info-card-desc { color: var(--ink-2); font-size: .86rem; line-height: 1.5; margin: 0; } .hb-info-card-desc strong { color: var(--ink); font-weight: 600; } @media (max-width: 860px) { .hb-info-strip { grid-template-columns: 1fr; padding: 18px 22px 6px; gap: 12px; } .hb-info-card { padding: 14px 16px; } } /* Sticky search toolbar — search + facet chips. Round 1 has a single 'Induction Handbooks' facet; future rounds add Role / Mentor / Policy chips by appending to .hb-facets in the markup. */ .hb-toolbar { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--border); transition: box-shadow .15s, background .15s; } .hb-toolbar.is-stuck { background: rgba(248,250,252,0.94); backdrop-filter: saturate(160%) blur(8px); box-shadow: 0 6px 16px -16px rgba(15,23,42,0.4); } .hb-toolbar-inner { max-width: 1200px; margin: 0 auto; padding: 16px 32px 12px; display: flex; flex-direction: column; gap: 12px; } .hb-search-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .hb-search { flex: 1; min-width: 260px; max-width: 560px; position: relative; display: flex; align-items: center; } .hb-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; } .hb-search input { width: 100%; padding: 11px 36px 11px 42px; font-family: inherit; font-size: 14px; font-weight: 500; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; } .hb-search input::placeholder { color: var(--ink-3); font-weight: 400; } .hb-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); } .hb-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--ink-3); font-size: 18px; padding: 2px 8px; border-radius: 6px; line-height: 1; } .hb-search-clear:hover { color: var(--ink); background: #f3f4f6; } .hb-search-info { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; } /* Facet chips. Single 'Induction Handbooks' chip in Round 1 — sits beside 'All' for symmetry. Grid layout matches /references so when future categories land (Role, Mentor, Policy) the row fills naturally to 4 cols. */ .hb-facets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; } .hb-facet { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: background .12s, border-color .12s, color .12s; text-align: left; min-width: 0; font-family: inherit; } .hb-facet > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; display: inline-flex; align-items: center; gap: 7px; } .hb-facet-emoji { font-size: 14px; line-height: 1; flex-shrink: 0; } .hb-facet:hover { background: #f8fafc; border-color: #cbd5e1; color: var(--ink); } .hb-facet.active { background: var(--accent); border-color: var(--accent); color: #fff; } .hb-facet .count { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--accent-2); color: var(--accent-dk); font-variant-numeric: tabular-nums; flex-shrink: 0; } .hb-facet.active .count { background: rgba(255,255,255,0.22); color: #fff; } .hb-facet.is-empty { opacity: 0.5; } .hb-facet.is-empty .count { background: #f3f4f6; color: var(--ink-3); } .hb-facet.active.is-empty .count { background: rgba(255,255,255,0.22); color: #fff; } /* Per-category active accents — mirror the kind-badge palette so the browser facet bar and the reader-toolbar pill speak the same colour language. The bucket-to-kind merge (role bucket = role-operational + aicf-companion, school bucket = school-facing + policy-topic) is intentional and documented in bootBrowserMode(); we pick the primary kind's hue for each bucket. */ .hb-facet[data-cat="induction"].active { background: #6c5ce7; border-color: #6c5ce7; } .hb-facet[data-cat="role"].active { background: #db2777; border-color: #db2777; } .hb-facet[data-cat="school"].active { background: #0891b2; border-color: #0891b2; } .hb-facet[data-cat="induction"]:not(.active) .count { background: #ede9fe; color: #5b21b6; } .hb-facet[data-cat="role"]:not(.active) .count { background: #fce7f3; color: #9d174d; } .hb-facet[data-cat="school"]:not(.active) .count { background: #cffafe; color: #155e75; } @media (max-width: 960px) { .hb-facets { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Bookshelf strip (2026-05-26) ────────────────────────────────── Semantic book-metaphor layer above the accordion+card grid below. 3 horizontal "shelves" (one per category bucket: induction / role / school). Each shelf renders its handbooks as vertical spine cards so the dashboard reads as "10 books across 3 categories" at a glance. Grid + facet + search semantics below are unchanged — the shelf is an extra surface, not a replacement. Spines deep-link into the reader (same href contract as .hb-card). */ .hb-shelves { max-width: 1200px; margin: 0 auto; /* Bottom padding gives the last shelf room to breathe before the canonical .page-footer kicks in (footer carries its own top margin via .page-footer's own padding-top in base.css, but on tall viewports the wood-edge of the bottom shelf was sitting flush against the mor footer band — needed 64-px breathing room). */ padding: 22px 32px 64px; display: flex; flex-direction: column; gap: 18px; } .hb-shelf { /* Subtle wood-shelf imprint at the bottom edge — single visual signature for the "rafta duran kitap" metaphor without leaning on a literal 3D bookshelf. */ border-bottom: 3px solid #8b5a2b; padding-bottom: 6px; transition: opacity .15s, filter .15s; } .hb-shelf.is-dimmed { opacity: .35; filter: grayscale(.4); } .hb-shelf.is-empty { display: none; } .hb-shelf-label { display: flex; align-items: center; gap: 8px; font-family: 'Lora', serif; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; letter-spacing: .12em; text-transform: uppercase; } .hb-shelf-emoji { font-size: 14px; line-height: 1; } .hb-shelf-count { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--accent-2); color: var(--accent-dk); font-variant-numeric: tabular-nums; } .hb-shelf-rail { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 12px; align-items: flex-end; scrollbar-width: thin; } .hb-shelf-rail::-webkit-scrollbar { height: 6px; } .hb-shelf-rail::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .hb-spine { flex: 0 0 104px; height: 260px; position: relative; cursor: pointer; text-decoration: none; background: #fff; border: 1px solid var(--border); border-radius: 4px 6px 6px 4px; box-shadow: 0 6px 12px -8px rgba(15,23,42,.25), inset 1px 0 0 rgba(255,255,255,.6); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 8px 12px 24px; transition: transform .15s, box-shadow .15s; color: inherit; } .hb-spine::before { /* Coloured cloth band on the spine's left edge — reads as the book's cover wrap when looking at a shelf side-on. Width intentionally larger than .hb-card's 4px inset so the metaphor lands at a glance. */ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: var(--spine-band, #7c3aed); border-radius: 4px 0 0 4px; box-shadow: inset -1px 0 0 rgba(0,0,0,.08); } .hb-spine:hover { transform: translateY(-6px); box-shadow: 0 14px 24px -10px rgba(15,23,42,.35), inset 1px 0 0 rgba(255,255,255,.6); } .hb-spine:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hb-spine.filtered-out { display: none !important; } /* Per-kind band colour (mirrors .hb-facet[data-cat].active palette above + the kind-badge family — keep these three blocks aligned). */ .hb-spine[data-kind="induction"] { --spine-band: #7c3aed; } .hb-spine[data-kind="role"] { --spine-band: #db2777; } .hb-spine[data-kind="school"] { --spine-band: #0891b2; } .hb-spine[data-kind="policy-topic"] { --spine-band: #f59e0b; } .hb-spine[data-kind="aicf-companion"] { --spine-band: #ea580c; } .hb-spine-kind { font-size: 18px; line-height: 1; } .hb-spine-title { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Lora', serif; font-weight: 600; font-size: 12.5px; color: var(--ink); line-height: 1.25; flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; /* Allow the title to wrap to multiple "columns" in vertical-rl writing mode — without this nowrap, anything longer than 12 characters got truncated as "Subject Specialist Han…". With normal+break-word the runtime breaks at word boundaries (or mid-word as a last resort) and a 3-word title flows into 2-3 columns inside the spine. */ white-space: normal; word-break: break-word; max-height: 180px; max-width: 56px; overflow: hidden; } .hb-spine-audience { font-size: 9px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; text-align: center; max-width: 72px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .hb-spine-thickness { font-size: 10px; color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; } .hb-spine-chips { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; max-width: 64px; } .hb-spine-chip { font-size: 8px; padding: 1px 4px; border-radius: 3px; background: var(--accent-2); color: var(--accent-dk); font-weight: 700; letter-spacing: .04em; line-height: 1.4; } /* Chip family palette — match the cambridge-crossref popover hues so a CTS spine chip reads the same colour as a CTS chip in the reader. */ .hb-spine-chip[data-chip="cts"] { background: #ede9fe; color: #5b21b6; } .hb-spine-chip[data-chip="csls"] { background: #ccfbf1; color: #0f766e; } .hb-spine-chip[data-chip="aicf"] { background: #ffedd5; color: #9a3412; } .hb-spine-chip[data-chip="es"] { background: #cffafe; color: #155e75; } .hb-spine-chip[data-chip="nn"] { background: #fee2e2; color: #991b1b; } .hb-spine-chip[data-chip="skl"] { background: #dcfce7; color: #166534; } .hb-spine-chip[data-chip="pigp"] { background: #fee2e2; color: #991b1b; } @media (max-width: 720px) { .hb-shelves { padding: 14px 16px 2px; gap: 12px; } .hb-spine { flex: 0 0 88px; height: 220px; padding: 10px 6px 9px 20px; } .hb-spine::before { width: 12px; } .hb-spine-title { font-size: 11.5px; max-height: 150px; max-width: 48px; } .hb-spine-audience { font-size: 8px; max-width: 60px; } .hb-spine-thickness { font-size: 9px; } } /* Bookshelf empty-state — replaces the old .hb-results-empty that lived inside the accordion. Shown only when search yields zero spine matches. */ .hb-shelves-empty { display: none; max-width: 1200px; margin: 0 auto; padding: 60px 20px; text-align: center; color: var(--ink-3); font-size: 13px; } .hb-shelves-empty.visible { display: block; } .hb-shelves-empty strong { color: var(--ink-2); display: block; margin-bottom: 6px; font-size: 14px; } /* ── Spine preview modal (2026-05-26) ────────────────────────────── Spine click opens this modal with the handbook's metadata; the "Open handbook" anchor opens the full reader in a new tab so the modal stays available for cross-handbook comparison. Replaces the accordion+card grid that used to live below the bookshelf strip. Pattern mirrors shared-styles.css .modal-overlay / .modal so it reads native against the rest of the design system. */ .hb-modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: hb-modal-fade .15s ease-out; } .hb-modal-overlay[hidden] { display: none; } @keyframes hb-modal-fade { from { opacity: 0; } to { opacity: 1; } } .hb-modal { position: relative; background: #fff; border-radius: 14px; box-shadow: 0 28px 60px -20px rgba(15, 23, 42, 0.45); max-width: 560px; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; padding: 28px 28px 22px; animation: hb-modal-pop .18s ease-out; } @keyframes hb-modal-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .hb-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; cursor: pointer; font-size: 24px; line-height: 1; color: var(--ink-3); padding: 4px 8px; border-radius: 6px; transition: background .12s, color .12s; } .hb-modal-close:hover { background: #f3f4f6; color: var(--ink); } .hb-modal-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; } .hb-modal-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; background: #ede9fe; color: #5b21b6; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; } /* Modal icon palette mirrors spine band per-kind so the modal reads as the same book the user just clicked on the shelf. */ .hb-modal[data-kind="role"] .hb-modal-icon { background: #fce7f3; color: #9d174d; } .hb-modal[data-kind="school"] .hb-modal-icon { background: #cffafe; color: #155e75; } .hb-modal[data-kind="policy-topic"] .hb-modal-icon { background: #fef3c7; color: #92400e; } .hb-modal[data-kind="aicf-companion"] .hb-modal-icon { background: #ffedd5; color: #9a3412; } .hb-modal-head-text { flex: 1; min-width: 0; padding-top: 2px; } .hb-modal-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; } .hb-modal-title { font-family: 'Lora', serif; font-size: 1.4rem; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.25; } .hb-modal-desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: 0 0 14px; } .hb-modal-desc:empty { display: none; } .hb-modal-meta { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); margin-bottom: 12px; } .hb-modal-meta:empty { display: none; } .hb-modal-meta .pill { padding: 3px 9px; border-radius: 999px; background: #f3f4f6; color: var(--ink-2); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; } .hb-modal-meta .pill.firestore { background: #ddd6fe; color: #5b21b6; font-family: 'DM Mono', monospace; font-size: 11px; } .hb-modal-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 18px; } .hb-modal-chips:empty { display: none; } .hb-modal-chip { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: .04em; } .hb-modal-chip[data-chip="cts"] { background: #ede9fe; color: #5b21b6; } .hb-modal-chip[data-chip="aicf"] { background: #ffedd5; color: #9a3412; } .hb-modal-chip[data-chip="es"] { background: #cffafe; color: #155e75; } .hb-modal-chip[data-chip="nn"] { background: #fee2e2; color: #991b1b; } .hb-modal-chip[data-chip="skl"] { background: #dcfce7; color: #166534; } .hb-modal-chip[data-chip="pigp"] { background: #fee2e2; color: #991b1b; } .hb-modal-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 6px; } .hb-modal-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 10px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s, transform .1s; } .hb-modal-btn-secondary { background: #fff; border-color: var(--border); color: var(--ink-2); } .hb-modal-btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; color: var(--ink); } .hb-modal-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -6px rgba(108, 92, 231, 0.55); } .hb-modal-btn-primary:hover { background: var(--accent-dk); box-shadow: 0 8px 18px -6px rgba(108, 92, 231, 0.7); transform: translateY(-1px); } .hb-modal-btn-primary svg { width: 14px; height: 14px; } @media (max-width: 560px) { .hb-modal { padding: 22px 18px 18px; } .hb-modal-title { font-size: 1.2rem; } .hb-modal-actions { flex-direction: column-reverse; } .hb-modal-btn { width: 100%; justify-content: center; } } /* ── Canonical page-footer integration (2026-05-26) ──────────────── Custom .hb-page-footer chrome is retired. Each hub's handbook.html now ships the canonical