/* Overlay on top of GSB's wholesale stylesheet (css/gsb_source.css). Only what their stack doesn't cover, plus our progressive-enhancement guarantees. GSB's CSS handles the chrome, hero panel, photo border, type, colours, and tab show/hide (.tab-content / .current). */ /* Progressive enhancement: GSB hides non-current tab panels off-screen. With no JS the tab widget can't run, so reveal every panel (content stays accessible) and hide the non-functional tab bar. Drupal adds `js` to when scripting is available. */ html:not(.js) .tab-content { position: static !important; opacity: 1 !important; visibility: visible !important; top: auto !important; } html:not(.js) nav.tabs[data-faculty-tabs] { display: none; } /* GSB's IA puts multiple

sub-sections inside each tab (e.g. Experience = Academic Degrees + Appointments + Awards), so the in-panel section titles are meaningful headings, not duplicates of the tab label — keep them visible. */ /* Primary nav — the source mega-menu is JS-populated (no backend here), so we render a static nav in its place, styled to sit in GSB's white header. The source nav is evenly spaced and a touch larger than our first pass. */ .gsb-refresh-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2.25rem; align-items: center; } .gsb-refresh-nav .gsb-nav-top { color: #8c1515; text-decoration: none; font-weight: 600; font-size: 1.0625rem; white-space: nowrap; letter-spacing: 0.01em; display: inline-block; padding: 0.25rem 0; } .gsb-refresh-nav .gsb-nav-top:hover { text-decoration: underline; } /* Header dropdowns (1.7-#3): adopt GSB's actual menu structure + open-on-hover behaviour. Each primary item reveals a panel of the real GSB sub-links (resolved to the source; Faculty → our rebuilt section). Opens on hover and on keyboard focus; Escape closes (JS). */ .gsb-nav-item { position: relative; } .gsb-nav-panel { position: absolute; top: 100%; left: 0; z-index: 50; background: #fff; border-top: 3px solid #8c1515; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); padding: 1.25rem 1.5rem; margin-top: 0.5rem; min-width: 30rem; max-width: 44rem; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s; } .gsb-nav-item--right .gsb-nav-panel { left: auto; right: 0; } .gsb-nav-item:hover .gsb-nav-panel, .gsb-nav-item:focus-within .gsb-nav-panel { opacity: 1; visibility: visible; transform: translateY(0); } .gsb-nav-panel ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; } .gsb-nav-panel li { break-inside: avoid; margin: 0 0 0.5rem; } .gsb-nav-panel a { color: #2e2d29; text-decoration: none; font-weight: 400; font-size: 0.95rem; line-height: 1.3; display: inline-block; } .gsb-nav-panel a:hover { color: #8c1515; text-decoration: underline; } /* Keep the menu usable without a megamenu backend on small screens: panels fall back to inline (no absolute overlay) below the desktop breakpoint. */ @media (max-width: 991px) { .gsb-nav-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; min-width: 0; padding: 0.5rem 0 0.5rem 1rem; margin: 0; border-top: 0; } .gsb-nav-panel ul { columns: 1; } } /* Breadcrumb / "All Faculty Profiles" sub-bar (HIGH-2). GSB renders a white bar below the header: trail on the left, an All-Faculty link on the right. The .breadcrumb DOM is mirrored so GSB's own .breadcrumb CSS ("›" separators, type) styles the trail; we only lay out the bar. */ .gsb-refresh-subnav { border-bottom: 1px solid #eaeaea; background: #fff; } .gsb-refresh-subnav__inner { max-width: 1170px; margin: 0 auto; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .gsb-refresh-subnav .breadcrumb { padding: 0.75rem 0; } .gsb-refresh-subnav .breadcrumb__item:last-child::after { content: none; } .gsb-refresh-subnav__all { color: #8c1515; font-weight: 600; text-decoration: none; font-size: 1rem; white-space: nowrap; } .gsb-refresh-subnav__all:hover { text-decoration: underline; } /* Hero name — the source headline is a large serif; scale ours up to match (our first pass inherited the smaller responsive h1 size). */ .c-node-faculty__title h1 { font-size: 2.75rem; line-height: 1.15; font-weight: 400; } /* Attribution link sits with the real action links but reads as a footnote. */ .c-node-faculty__sas-source a { font-style: italic; } /* Hero indent (1.7-#1) + arc (1.7-#2). The hero text and the headshot must sit in the same centred content column as the breadcrumb (the source aligns the name to the body indent, not the page edge). Constraining the wrapper to the 1170px column also pulls the headshot off the viewport edge, so the full- bleed green arc (measured x≈924–1280 / ~24rem on the source) reads as one continuous field around the photo instead of two split bands. */ .faculty-header-wrapper { max-width: 1170px; margin: 0 auto; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } @media (min-width: 992px) { .faculty-header { background-image: url(../images/faculty-header-background.svg); background-repeat: no-repeat; background-position: right top; background-size: 22rem auto; } } /* Bio "Show More" (MEDIUM-8): GSB collapses the bio behind a Show More toggle. Progressive enhancement — JS adds .is-collapsed + the button; with no JS the full bio stays visible. */ .c-faculty-prose--bio.is-collapsed { max-height: 11.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); } .faculty-show-more { display: inline-block; margin: 0.5rem 0 1.5rem; padding: 0; background: none; border: 0; cursor: pointer; color: #636f00; font: 600 1.125rem/1.4 "Source Sans 3", system-ui, sans-serif; } .faculty-show-more::after { content: " ›"; } .faculty-show-more:hover { text-decoration: underline; } /* Independent-rebuild disclaimer strip below the footer. */ .gsb-refresh-disclaimer { background: #650b0b; color: #fff; font: 0.75rem/1.5 "Source Sans 3", system-ui, sans-serif; text-align: center; padding: 0.5rem 1rem; }