/* ============================================================= quarto-nav.css — Override Quarto's Bootstrap 5 navbar and page chrome to match the FYS: Progress design system. ============================================================= */ /* ── Navbar ──────────────────────────────────────────────────── */ .navbar { background: var(--bg) !important; border-bottom: 1px solid var(--rule); padding: 0; min-height: 56px; font-family: var(--font-sans); } .navbar-brand { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500; color: var(--ink) !important; padding: 0; } .navbar-brand:hover { color: var(--ink) !important; text-decoration: none; } /* "Progress" in the brand gets terracotta via the title span Quarto generates */ .navbar-title { color: var(--ink); font-family: var(--font-serif); font-size: 1.05rem; } .navbar-nav .nav-link { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mid) !important; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: color 0.2s ease, border-color 0.2s ease; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--accent) !important; border-bottom-color: var(--accent); text-decoration: none; } /* Hamburger toggler — styled to match site */ .navbar-toggler { border: none; padding: 8px; border-radius: 3px; transition: background 0.2s ease; } .navbar-toggler:hover { background: var(--bg-hover); } .navbar-toggler:focus { box-shadow: none; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231C1812' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); width: 20px; height: 20px; } /* Mobile dropdown */ @media (max-width: 991px) { .navbar-collapse { background: var(--bg); border-bottom: 2px solid var(--accent); padding: 0.25rem 0; box-shadow: 0 6px 16px rgba(28,24,18,0.10); } .navbar-nav .nav-link { padding: 0.85rem var(--sp-lg); border-bottom: 1px solid var(--rule); border-left: none; } .navbar-nav .nav-item:last-child .nav-link { border-bottom: none; } .navbar-nav .nav-link.active { background: var(--accent-pale); border-bottom: 1px solid var(--rule); } } /* ── Page layout ─────────────────────────────────────────────── */ /* Quarto wraps content in these — make them transparent */ #quarto-content, #quarto-document-content, main.content { padding: 0; max-width: 100%; } /* Remove Quarto's default title block (we use custom headers on most pages) */ #title-block-header { display: none; } /* ── Session title block (paginated pages only) ───────────────── */ /* paginate.js adds .is-paginated to on session-note pages. */ body.is-paginated #title-block-header { display: block; padding-bottom: var(--sp-lg); margin-bottom: var(--sp-xl); border-bottom: 1px solid var(--rule); } body.is-paginated #title-block-header h1.title { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 500; line-height: 1.2; color: var(--ink); margin: 0 0 0.25rem; } body.is-paginated #title-block-header .subtitle.lead { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-light); margin: 0; } /* Hide empty metadata div and description (session notes don't need it) */ body.is-paginated #title-block-header .quarto-title-meta, body.is-paginated #title-block-header .description { display: none; } /* ── Footer ──────────────────────────────────────────────────── */ .nav-footer { background: var(--bg-alt); border-top: 1px solid var(--rule); padding-block: var(--sp-xl); font-family: var(--font-serif); font-size: 0.95rem; color: var(--ink-mid); } .nav-footer a { color: var(--ink-mid); font-family: var(--font-sans); font-size: 0.78rem; } .nav-footer a:hover { color: var(--accent); text-decoration: none; } .nav-footer strong { color: var(--ink); } /* ── Session notes (prose pages with toc) ────────────────────── */ .session-note-body { max-width: var(--col-text); margin-inline: auto; padding-inline: var(--sp-lg); padding-block: var(--sp-2xl); font-family: var(--font-serif); font-size: 1rem; line-height: 1.75; } .session-note-body h2 { font-size: 1.4rem; margin-top: var(--sp-2xl); margin-bottom: var(--sp-sm); padding-bottom: var(--sp-xs); border-bottom: 1px solid var(--rule); } .session-note-body h3 { font-size: 1.1rem; margin-top: var(--sp-xl); color: var(--ink-mid); } /* ── Blockquotes (sage — key claims) ────────────────────────── */ blockquote, .session-note-body blockquote { border-left: 4px solid var(--bg-quote-border); padding: var(--sp-sm) var(--sp-lg); margin-block: var(--sp-md); background: var(--bg-quote); font-style: italic; color: var(--ink); border-radius: 0; } /* ── Discussion callout (slate blue — questions/prompts) ─────── */ .discuss { border-left: 4px solid var(--bg-discuss-border); padding: var(--sp-sm) var(--sp-lg); margin-block: var(--sp-md); background: var(--bg-discuss); color: var(--ink); border-radius: 0; } .discuss p:last-child { margin-bottom: 0; } .discuss::before { content: "Discussion"; display: block; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg-discuss-border); margin-bottom: 0.4em; } /* ── Module grid: restore 3-column layout against Bootstrap ─────── */ /* Bootstrap's box model slightly narrows containers, pushing auto-fill from 3 to 2 columns. Force 3 explicitly at wide viewports. */ @media (min-width: 860px) { .module-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ── Instructor toggle button ────────────────────────────────────────── */ .instructor-toggle { display: inline-flex; align-items: center; gap: 0.4em; margin-bottom: var(--sp-lg); font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9A7520; background: #FBF3DC; border: 1px solid #C8A040; border-radius: 3px; padding: 0.3em 0.75em; cursor: pointer; transition: background 0.15s; } .instructor-toggle:hover { background: #F5E8B8; } .instructor-toggle::before { content: "👁"; font-size: 0.85em; } /* ── Instructor callout (amber — teaching notes, not student-facing) ── */ .instructor { border-left: 4px solid var(--bg-discuss-border); padding: var(--sp-sm) var(--sp-lg); margin-block: var(--sp-md); background: #FBF3DC; color: var(--ink); border-radius: 0; border-left-color: #C8A040; background: #FBF3DC; } .instructor p:last-child { margin-bottom: 0; } .instructor::before { content: "Instructor"; display: block; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9A7520; margin-bottom: 0.4em; } /* ── Glossary terms ──────────────────────────────────────────── */ .term { border-bottom: 1px dotted var(--accent); cursor: help; font-style: normal; /* don't inherit italic from blockquotes */ } /* Bootstrap tooltip overrides — match site design */ .glossary-tooltip .tooltip-inner { background: var(--ink); font-family: var(--font-sans); font-size: 0.8rem; line-height: 1.5; max-width: 300px; text-align: left; padding: 0.5em 0.8em; border-radius: 3px; } .glossary-tooltip .tooltip-arrow::before { border-top-color: var(--ink); } /* Standard definition text — white */ .glossary-tooltip .glossary-def { color: #fff; } /* Context-specific example — sage green, italic, separated by a fine rule */ .glossary-tooltip .glossary-example { color: #a8cca0; font-style: italic; margin-top: 0.45em; padding-top: 0.45em; border-top: 1px solid rgba(255,255,255,0.15); } .glossary-tooltip .glossary-example::before { content: "e.g. "; font-style: normal; font-weight: 600; font-size: 0.72em; letter-spacing: 0.06em; text-transform: uppercase; color: #7fb87a; } /* ── Embedded quiz blocks ────────────────────────────────────── */ .quiz { border: 1px solid var(--rule); border-radius: 4px; padding: var(--sp-md) var(--sp-lg); margin-block: var(--sp-xl); background: var(--bg-alt); } .quiz-q { font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-md); } .quiz-q::before { content: "Check your understanding "; display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 0.4em; } .quiz-opts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4em; } .quiz-opts li { font-family: var(--font-sans); font-size: 0.88rem; padding: 0.55em 0.9em; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg); cursor: pointer; transition: background 0.15s, border-color 0.15s; line-height: 1.5; } .quiz-opts li:hover:not(.quiz-opt--correct):not(.quiz-opt--wrong) { background: var(--bg-hover); border-color: var(--ink-light); } .quiz--answered .quiz-opts li { cursor: default; } .quiz-opt--correct { background: var(--bg-quote) !important; border-color: var(--bg-quote-border) !important; font-weight: 600; } .quiz-opt--wrong { background: #fde8e8 !important; border-color: #c47070 !important; } .quiz-opt--reveal { background: var(--bg-quote) !important; border-color: var(--bg-quote-border) !important; opacity: 0.75; } .quiz-feedback { font-size: 0.82rem; margin-top: 0.4em; padding-top: 0.4em; border-top: 1px solid rgba(0,0,0,0.08); font-style: italic; } .quiz-feedback--correct { color: #2a5c2a; } .quiz-feedback--wrong { color: #7a2020; } .quiz-retry { display: inline-block; margin-top: var(--sp-md); font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); background: none; border: 1px solid var(--accent); border-radius: 3px; padding: 0.3em 0.8em; cursor: pointer; transition: background 0.15s; } .quiz-retry:hover { background: var(--accent-pale); } /* ── Section pagination nav (CORE-style) ─────────────────────── */ .section-nav { margin-top: var(--sp-2xl); padding-top: var(--sp-lg); border-top: 2px solid var(--rule); } .section-nav__progress { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-light); margin-bottom: var(--sp-sm); display: block; } .section-nav__links { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-md); } .section-nav__btn { appearance: none; -webkit-appearance: none; background: none; border: none; outline: none; box-shadow: none; cursor: pointer; padding: 0; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; color: var(--accent); line-height: 1.4; transition: color var(--ease); max-width: 46%; } .section-nav__btn:hover, .section-nav__btn:focus { color: var(--accent-dark); outline: none; } .section-nav__btn span { display: block; font-weight: 400; font-size: 0.78rem; color: var(--ink-mid); margin-top: 2px; } .section-nav__btn:hover span { color: var(--ink); } .section-nav__next { text-align: right; margin-left: auto; } @media (max-width: 600px) { .section-nav__links { flex-direction: column; gap: var(--sp-md); } .section-nav__btn { max-width: 100%; } .section-nav__next { text-align: left; margin-left: 0; } } /* ── Orbit loading placeholder ───────────────────────────────── */ /* :not(:defined) targets the element before its web component JS upgrades it */ orbit-reviewarea:not(:defined) { display: flex; align-items: center; justify-content: center; min-height: 120px; background: var(--bg-alt); border: 1px solid var(--rule); border-radius: 4px; margin-block: var(--sp-xl); font-family: var(--font-sans); font-size: 0.78rem; color: var(--ink-light); } orbit-reviewarea:not(:defined)::before { content: "Loading review cards…"; } /* ── Orbit fallback (shown when CDN unavailable) ─────────────── */ .orbit-fallback { border: 1px solid var(--rule); border-radius: 4px; padding: var(--sp-md) var(--sp-lg); margin-block: var(--sp-xl); background: var(--bg-alt); } .orbit-fallback__label { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); margin-bottom: var(--sp-md); } .orbit-fallback__card { border-bottom: 1px solid var(--rule); padding-block: var(--sp-md); } .orbit-fallback__card:last-child { border-bottom: none; } .orbit-fallback__front { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-sm); } .orbit-fallback__num { display: inline-block; width: 1.4em; height: 1.4em; line-height: 1.4em; text-align: center; background: var(--accent); color: #fff; border-radius: 50%; font-size: 0.72rem; margin-right: 0.5em; flex-shrink: 0; } .orbit-fallback__back { font-family: var(--font-sans); font-size: 0.85rem; color: var(--ink-mid); background: var(--bg-quote); border-left: 3px solid var(--bg-quote-border); padding: var(--sp-sm) var(--sp-md); margin-block: var(--sp-sm); line-height: 1.6; } .orbit-fallback__reveal { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); background: none; border: 1px solid var(--accent); border-radius: 3px; padding: 0.25em 0.7em; cursor: pointer; transition: background 0.15s; } .orbit-fallback__reveal:hover { background: var(--accent-pale); } /* ── Print ───────────────────────────────────────────────────── */ @media print { .navbar, .nav-footer { display: none; } }