/* ===================================================================== "Scholarly Ledger" — academic theme for the public site. Palette: Ink Navy / Parchment / Oxblood / Brass Type: Fraunces (display) + Source Sans 3 (body) + IBM Plex Mono (data) ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { --ink: #6E1423; /* heading text color — inverts in dark mode */ --ink-soft: #2E2A28; /* body text — inverts in dark mode */ --parchment: #F7F7F4; /* page background — inverts in dark mode */ --parchment-deep: #EFEDE4; /* alt section background — inverts in dark mode */ --oxblood: #7A1425; /* primary action color (buttons, links) */ --oxblood-dark: #55101A; /* hover state */ --brass: #C9A227; /* gold accent */ --sage: #2E7D32; /* success / completed status */ --border: #E2DECF; --border-strong: #CFC7AE; /* Fixed tokens — deliberately NOT redefined in dark mode, because these sit on the maroon navbar / gold badges, which stay the same brand colors in both themes. */ --ink-bg: #6E1423; /* navbar/masthead background, dark badges */ --light-text: #F7F7F4; /* light text on the maroon navbar/hero/footer */ --masthead-text: #EFEDE4; /* masthead strip text */ --fixed-dark-text: #2E2A28; /* dark text on brass/gold badges */ --font-display: 'Poppins', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* --------------------------------------------------------------------- Dark mode — toggled via . Only the invertible tokens change; navbar/badge/masthead colors above stay fixed since they're brand-colored surfaces, not page background/text. --------------------------------------------------------------------- */ html[data-theme="dark"] { --ink: #EDE7DD; /* headings become light on dark bg */ --ink-soft: #C9C2B4; /* body text, softened light */ --parchment: #1B1512; /* page background — deep warm charcoal */ --parchment-deep: #241D18; /* alt section background, slightly lighter */ --oxblood: #C8556B; /* brightened maroon — stays legible on dark bg */ --oxblood-dark: #E07D8F; /* hover, even brighter */ --brass: #E0BB55; /* brightened gold for dark bg contrast */ --sage: #6FBF73; /* brightened green */ --border: #3A322C; --border-strong: #4A413A; } html[data-theme="dark"] .card, html[data-theme="dark"] .citation, html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .timetable-card, html[data-theme="dark"] .metric-card { background-color: #241D18; color: var(--ink-soft); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { border-color: var(--border-strong); } html[data-theme="dark"] .table { color: var(--ink-soft); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--ink-soft); } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--parchment-deep); color: var(--ink); border-color: var(--border-strong) var(--border-strong) var(--parchment-deep); } * { box-sizing: border-box; } html, body { background-color: var(--parchment); color: var(--ink-soft); font-family: var(--font-body); font-size: 16px; line-height: 1.65; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; } a { color: var(--oxblood); } a:hover { color: var(--oxblood-dark); } /* --------------------------------------------------------------------- Masthead — thin university-letterhead strip above the nav --------------------------------------------------------------------- */ .masthead { background: var(--ink-bg); color: var(--masthead-text); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; padding: 6px 12px; border-bottom: 1px solid var(--brass); } /* --------------------------------------------------------------------- Navigation --------------------------------------------------------------------- */ .navbar { background-color: var(--ink-bg) !important; border-bottom: 3px solid var(--brass); padding-top: 0.9rem; padding-bottom: 0.9rem; } /* Bootstrap's navbar .container is flex-nowrap by default, which is what was clipping items off the right edge instead of wrapping them onto a second line. Letting it wrap fixes that without touching the mobile hamburger breakpoint. */ .navbar > .container { flex-wrap: wrap; row-gap: 8px; } .navbar-collapse { flex-grow: 0; flex-basis: 100%; } .navbar-nav { flex-wrap: wrap; row-gap: 4px; } .navbar-brand { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--light-text) !important; display: flex; align-items: center; gap: 10px; white-space: nowrap; } @media (max-width: 1300px) { .navbar-brand { font-size: 1.05rem; } } .navbar-brand .seal { width: 30px; height: 30px; flex-shrink: 0; object-fit: contain; } .navbar-dark .navbar-nav .nav-link { font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.03em; color: rgba(247,247,244,0.75) !important; padding: 0.4rem 0.9rem !important; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s ease, border-color .15s ease; } .navbar-dark .navbar-nav .nav-link:hover { color: var(--light-text) !important; } .navbar-dark .navbar-nav .nav-link.active { color: var(--light-text) !important; border-bottom-color: var(--brass); } /* --------------------------------------------------------------------- Buttons --------------------------------------------------------------------- */ .btn-primary { background-color: var(--oxblood); border-color: var(--oxblood); font-weight: 600; letter-spacing: 0.02em; border-radius: 3px; } .btn-primary:hover, .btn-primary:focus { background-color: var(--oxblood-dark); border-color: var(--oxblood-dark); } .btn-outline-primary { color: var(--oxblood); border-color: var(--oxblood); border-radius: 3px; font-weight: 600; } .btn-outline-primary:hover { background-color: var(--oxblood); border-color: var(--oxblood); } .btn-outline-secondary { border-radius: 3px; } /* --------------------------------------------------------------------- Cards — "index card" treatment: parchment surface + oxblood rule --------------------------------------------------------------------- */ .card { background-color: #FFFFFF; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 1px 2px rgba(110,20,35,0.08); } .card-title { font-family: var(--font-display); color: var(--ink); } /* --------------------------------------------------------------------- Badges — small-caps academic labels instead of default pill colors --------------------------------------------------------------------- */ .badge { font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 2px; padding: 0.35em 0.6em; } .badge.bg-info { background-color: var(--brass) !important; color: var(--fixed-dark-text) !important; } .badge.bg-secondary { background-color: var(--ink-bg) !important; color: var(--light-text) !important; } .badge.bg-success { background-color: var(--sage) !important; } .badge.bg-warning { background-color: var(--brass) !important; color: var(--fixed-dark-text) !important; } .badge.bg-primary { background-color: var(--oxblood) !important; } /* --------------------------------------------------------------------- Hero (home page) --------------------------------------------------------------------- */ .hero { background: linear-gradient(180deg, rgba(110,20,35,0.94), rgba(110,20,35,0.94)), repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 40px); color: var(--light-text); padding: 56px 0 48px; border-bottom: 4px solid var(--brass); } .hero .frame { width: 148px; height: 148px; border-radius: 4px; border: 3px solid var(--brass); padding: 4px; flex-shrink: 0; } .hero .frame img, .hero .frame .initials { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; } .hero .initials { display: flex; align-items: center; justify-content: center; background: var(--oxblood); font-family: var(--font-display); font-size: 2.4rem; color: var(--light-text); } .hero .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); margin-bottom: 6px; } .hero h1 { color: var(--light-text); font-size: 2.1rem; margin-bottom: 4px; } .hero .designation { font-size: 1.05rem; color: rgba(247,247,244,0.85); margin-bottom: 10px; } /* Stat strip under the hero */ .stat-strip { background: var(--parchment-deep); border-bottom: 1px solid var(--border-strong); } .stat-strip .stat { text-align: center; padding: 18px 8px; border-right: 1px solid var(--border-strong); } .stat-strip .stat:last-child { border-right: none; } .stat-strip .stat .num { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 500; color: var(--oxblood); display: block; } .stat-strip .stat .label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } /* --------------------------------------------------------------------- Section eyebrow labels (used instead of plain

) --------------------------------------------------------------------- */ .section-eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .section-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); } .section-title { margin-bottom: 1.5rem; } /* --------------------------------------------------------------------- Citation list — the signature element: publications styled as a real bibliography, not a spreadsheet-like table. Uses flexbox (not a text-indent hanging-indent hack) so the year column never overlaps the author/title text, however long the entry wraps. --------------------------------------------------------------------- */ .citation-list { list-style: none; padding: 0; margin: 0; } .citation { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); font-size: 0.98rem; } .citation:first-child { padding-top: 0; } .citation .cite-year { flex: 0 0 3.4em; font-family: var(--font-mono); font-weight: 500; color: var(--oxblood); white-space: nowrap; } .citation .cite-body { flex: 1 1 auto; min-width: 0; } .citation .cite-authors { font-weight: 600; color: var(--ink); } .citation .cite-title { font-style: italic; } .citation .cite-meta { color: var(--ink-soft); } .citation .cite-badge { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brass); border: 1px solid var(--brass); border-radius: 2px; padding: 1px 6px; margin-left: 6px; white-space: nowrap; display: inline-block; } .citation .cite-link { font-family: var(--font-mono); font-size: 0.82rem; margin-left: 6px; } /* --------------------------------------------------------------------- Filter bar (research page controls) --------------------------------------------------------------------- */ .filter-bar { background: var(--parchment-deep); border: 1px solid var(--border); border-radius: 4px; padding: 14px; } /* --------------------------------------------------------------------- Timeline (administrative duties) — vertical rule + year markers; justified here since order is genuinely chronological. --------------------------------------------------------------------- */ .timeline { position: relative; padding-left: 2.4rem; } .timeline::before { content: ""; position: absolute; left: 0.55rem; top: 6px; bottom: 6px; width: 2px; background: var(--border-strong); } .timeline-item { position: relative; padding-bottom: 28px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ""; position: absolute; left: -2.05rem; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--oxblood); border: 2px solid var(--light-text); box-shadow: 0 0 0 2px var(--border-strong); } .timeline-item .years { font-family: var(--font-mono); font-size: 0.8rem; color: var(--oxblood); font-weight: 500; } /* --------------------------------------------------------------------- Forms --------------------------------------------------------------------- */ .form-control, .form-select { border-radius: 3px; border-color: var(--border-strong); background-color: #FFFFFF; } .form-control:focus, .form-select:focus { border-color: var(--oxblood); box-shadow: 0 0 0 0.2rem rgba(122,20,37,0.14); } .form-label { font-size: 0.82rem; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; } /* --------------------------------------------------------------------- Table refinements (courses, generic listings) --------------------------------------------------------------------- */ .table { --bs-table-bg: transparent; } .table thead th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--border-strong) !important; } /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ footer.site-footer { background: var(--ink); color: rgba(247,247,244,0.7); border-top: 4px solid var(--brass); } footer.site-footer a { color: rgba(247,247,244,0.85); text-decoration: none; } footer.site-footer a:hover { color: #fff; text-decoration: underline; } /* --------------------------------------------------------------------- Accessibility: visible keyboard focus, respect reduced motion --------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* --------------------------------------------------------------------- Responsive --------------------------------------------------------------------- */ @media (max-width: 767px) { .hero { padding: 40px 0; text-align: center; } .hero .d-flex { flex-direction: column; align-items: center; } .stat-strip .stat { border-right: none; border-bottom: 1px solid var(--border-strong); } .citation { flex-direction: column; gap: 4px; } .citation .cite-year { flex: none; } } /* --------------------------------------------------------------------- Scholarly Metrics Dashboard (home page) — category-colored tiles: Publications (maroon), Guidance (green), Service (gold), Google Scholar (blue), Scopus (plum). Each gets a tinted background wash + matching top accent + matching number color, so the grid reads like a proper analytics dashboard rather than uniform white boxes. --------------------------------------------------------------------- */ .metrics-section { background: var(--parchment-deep); border-bottom: 1px solid var(--border-strong); padding: 40px 0 44px; } .metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (min-width: 992px) { .metrics-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } } .metric-card { background: #FFFFFF; border: 1px solid var(--border); border-top: 3px solid var(--brass); border-radius: 4px; padding: 16px 10px; text-align: center; transition: transform .15s ease, box-shadow .15s ease; } .metric-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(22,13,8,0.10); } .metric-num { display: block; font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; color: var(--ink); line-height: 1.1; } .metric-label { display: block; margin-top: 4px; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); } /* Publications — maroon */ .metric-cat-pub { background: linear-gradient(180deg, rgba(122,20,37,0.07), rgba(122,20,37,0.02)); border-top-color: var(--oxblood); } .metric-cat-pub .metric-num { color: var(--oxblood); } /* Student Guidance — green */ .metric-cat-guide { background: linear-gradient(180deg, rgba(46,125,50,0.08), rgba(46,125,50,0.02)); border-top-color: var(--sage); } .metric-cat-guide .metric-num { color: var(--sage); } /* Years of Service — gold */ .metric-cat-service { background: linear-gradient(180deg, rgba(201,162,39,0.12), rgba(201,162,39,0.03)); border-top-color: var(--brass); } .metric-cat-service .metric-num { color: #8a6d1f; } /* Google Scholar — blue */ .metric-cat-scholar { background: linear-gradient(180deg, rgba(31,92,139,0.08), rgba(31,92,139,0.02)); border-top-color: #1F5C8B; } .metric-cat-scholar .metric-num { color: #1F5C8B; } /* Scopus — plum */ .metric-cat-scopus { background: linear-gradient(180deg, rgba(106,63,160,0.08), rgba(106,63,160,0.02)); border-top-color: #6A3FA0; } .metric-cat-scopus .metric-num { color: #6A3FA0; } /* --------------------------------------------------------------------- Dynamic teaching / motivational quote (home page) --------------------------------------------------------------------- */ .quote-block { margin: 2.5rem auto; max-width: 720px; text-align: center; padding: 0 1rem; } .quote-block p { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--ink); line-height: 1.5; margin-bottom: 0.5rem; } .quote-block footer { font-family: var(--font-mono); font-size: 0.8rem; color: var(--brass); letter-spacing: 0.04em; } /* --------------------------------------------------------------------- Current Timetable — compact card (thumbnail + info), not a raw full-width image dump. --------------------------------------------------------------------- */ .timetable-card { display: flex; align-items: center; gap: 20px; background: #FFFFFF; border: 1px solid var(--border); border-top: 3px solid var(--brass); border-radius: 4px; padding: 20px; box-shadow: 0 1px 2px rgba(110,20,35,0.08); max-width: 620px; } .timetable-thumb { position: relative; flex: 0 0 150px; width: 150px; height: 150px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; display: block; } .timetable-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; } .timetable-thumb:hover img { transform: scale(1.06); } .timetable-thumb--pdf { display: flex; align-items: center; justify-content: center; background: var(--parchment-deep); font-size: 2.8rem; color: var(--oxblood); } .timetable-zoom-hint { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; opacity: 0; transition: opacity .15s ease; } .timetable-thumb:hover .timetable-zoom-hint, .timetable-thumb:focus-visible .timetable-zoom-hint { opacity: 1; } .timetable-info h5 { font-family: var(--font-display); color: var(--ink); } @media (max-width: 575px) { .timetable-card { flex-direction: column; text-align: center; max-width: 100%; } } /* --------------------------------------------------------------------- Recent Activities gallery (home page) — auto-scrolling marquee strip with a click-to-zoom lightbox. --------------------------------------------------------------------- */ .gallery-section { background: var(--parchment-deep); border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); } .gallery-section .container { padding-bottom: 1rem; } .gallery-marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .gallery-track { display: flex; gap: 16px; width: max-content; padding: 4px 16px 16px; animation: gallery-scroll 32s linear infinite; } .gallery-marquee:hover .gallery-track { animation-play-state: paused; } @keyframes gallery-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .gallery-track { animation: none; } } .gallery-tile { position: relative; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); flex: 0 0 200px; width: 200px; aspect-ratio: 1 / 1; cursor: pointer; } .gallery-tile:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; } .gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; } .gallery-tile:hover img { transform: scale(1.08); } .gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75)); color: #fff; font-size: 0.72rem; padding: 20px 8px 6px; line-height: 1.3; } .gallery-date { display: block; font-family: var(--font-mono); font-size: 0.62rem; opacity: 0.8; } .gallery-zoom-hint { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; opacity: 0; transition: opacity .15s ease; } .gallery-tile:hover .gallery-zoom-hint, .gallery-tile:focus-visible .gallery-zoom-hint { opacity: 1; } /* Lightbox */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(10,8,6,0.92); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity .2s ease; padding: 24px; } .lightbox-overlay.active { opacity: 1; visibility: visible; } .lightbox-img { max-width: min(90vw, 1000px); max-height: 78vh; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); } .lightbox-caption { color: var(--light-text); font-family: var(--font-body); font-size: 0.95rem; text-align: center; max-width: 700px; } .lightbox-close { position: absolute; top: 18px; right: 24px; background: none; border: none; color: var(--light-text); font-size: 2.2rem; line-height: 1; cursor: pointer; padding: 4px 10px; } .lightbox-close:hover { color: var(--brass); } @media (max-width: 767px) { .gallery-tile { flex-basis: 150px; width: 150px; } } /* --------------------------------------------------------------------- Back to Top floating button --------------------------------------------------------------------- */ .back-to-top { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--oxblood); color: #fff; border: none; display: none; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 3px 10px rgba(0,0,0,0.25); cursor: pointer; z-index: 1500; opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, background .15s ease; } .back-to-top.visible { display: flex; opacity: 1; transform: translateY(0); } .back-to-top:hover { background: var(--oxblood-dark); } /* --------------------------------------------------------------------- Theme toggle button (navbar) --------------------------------------------------------------------- */ .theme-toggle { background: none; border: 1px solid rgba(247,247,244,0.35); color: var(--light-text); border-radius: 4px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; cursor: pointer; transition: background .15s ease; } .theme-toggle:hover { background: rgba(247,247,244,0.12); } /* --------------------------------------------------------------------- Breadcrumb navigation --------------------------------------------------------------------- */ .site-breadcrumb { font-family: var(--font-mono); font-size: 0.78rem; padding: 10px 0; color: var(--ink-soft); } .site-breadcrumb a { color: var(--oxblood); text-decoration: none; } .site-breadcrumb a:hover { text-decoration: underline; } .site-breadcrumb .sep { margin: 0 6px; opacity: 0.5; } .site-breadcrumb .current { color: var(--ink-soft); } /* --------------------------------------------------------------------- QR / vCard card (Contact page) --------------------------------------------------------------------- */ .vcard-card { background: #FFFFFF; border: 1px solid var(--border); border-top: 3px solid var(--brass); border-radius: 4px; padding: 20px; text-align: center; } html[data-theme="dark"] .vcard-card { background-color: #241D18; } .vcard-card img { border-radius: 4px; border: 1px solid var(--border); } /* --------------------------------------------------------------------- Publication Analytics card (Research page) --------------------------------------------------------------------- */ .analytics-card { background: #FFFFFF; border: 1px solid var(--border); border-top: 3px solid var(--oxblood); border-radius: 4px; padding: 20px; } html[data-theme="dark"] .analytics-card { background-color: #241D18; } .analytics-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; } .analytics-header h5 { font-family: var(--font-display); color: var(--ink); } .analytics-stats { display: flex; gap: 20px; } .analytics-stat { text-align: right; } .analytics-stat-num { display: block; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--oxblood); line-height: 1.1; } .analytics-stat-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); white-space: nowrap; } .analytics-chart-wrap { position: relative; height: 220px; } @media (max-width: 575px) { .analytics-stats { gap: 14px; } .analytics-stat { text-align: left; } } /* --------------------------------------------------------------------- Ph.D. Scholar Progress Dashboard (Research > Ph.D. Guided tab) — horizontal stepper, scrollable on narrow screens. --------------------------------------------------------------------- */ .phd-dashboard-card { background: #FFFFFF; border: 1px solid var(--border); border-top: 3px solid var(--oxblood); border-radius: 4px; padding: 22px 24px; } html[data-theme="dark"] .phd-dashboard-card { background-color: #241D18; } .phd-dashboard-header h5 { font-family: var(--font-display); color: var(--ink); } .phd-stepper-h-wrap { margin-top: 18px; overflow-x: auto; padding-bottom: 6px; } .phd-stepper-h { display: flex; align-items: flex-start; min-width: max-content; } .phd-step-h { flex: 0 0 112px; width: 112px; text-align: center; position: relative; padding: 0 4px; cursor: default; } .phd-step-h::before { /* connecting line back to the previous step's center */ content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--border-strong); z-index: 0; } .phd-step-h:first-child::before { display: none; } .phd-step-h-marker { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; background: var(--parchment); border: 2px solid var(--border-strong); color: #fff; } .phd-step-h-done .phd-step-h-marker { background: var(--sage); border-color: var(--sage); } .phd-step-h-label { font-size: 0.7rem; font-weight: 600; color: var(--ink); line-height: 1.25; padding: 0 2px; } .phd-step-h-pending .phd-step-h-label { color: var(--ink-soft); font-weight: 500; } .phd-step-h-date { font-family: var(--font-mono); font-size: 0.62rem; color: var(--brass); margin-top: 2px; } .phd-step-h-docs { margin-top: 4px; font-size: 0.75rem; } .phd-step-h-docs a { margin: 0 2px; } .phd-h-substeps { margin-top: 5px; display: flex; justify-content: center; gap: 3px; flex-wrap: wrap; } .phd-h-sub { font-family: var(--font-mono); font-size: 0.58rem; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); color: var(--ink-soft); } .phd-h-sub-done { background: var(--sage); border-color: var(--sage); color: #fff; } @media (max-width: 575px) { .phd-step-h { flex-basis: 92px; width: 92px; } }