/* * "Courses by Study Area" — sticky category pill nav plus one section per * course category. Piggybacks on the .fc-courses utilities in * featured-courses.css for the cards themselves. */ /* * Anchor jumps land under the sticky pill bar, not behind it. The clip keeps * the bar's 100vw breakout from adding a horizontal scrollbar, and must live * on — on any nearer ancestor it clips the breakout back to that * ancestor's width. */ html:has( .fc-areas ) { overflow-x: clip; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:has( .fc-areas ) { scroll-behavior: auto; } } .fc-areas { --fc-area-top: 104px; } /* Pill nav ---------------------------------------------------------------- */ /* * Breaks out of the content container so the white bar spans the viewport, * matching the reference site. Same technique as .fc-banner. */ .fc-area-nav { position: sticky; top: var( --fc-area-top ); z-index: 30; width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX( -50% ); border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; background: rgba( 255, 255, 255, .95 ); backdrop-filter: blur( 8px ); } .fc-area-nav__inner { display: flex; gap: .5rem; max-width: 1200px; margin: 0 auto; padding: .75rem 1.25rem; overflow-x: auto; scrollbar-width: thin; } .fc-areas a.fc-area-pill { display: inline-flex; align-items: center; gap: .375rem; flex: 0 0 auto; padding: .375rem 1rem; border: 1px solid #e2e8f0; border-radius: 9999px; color: var( --slate-600 ); font-size: .875rem; font-weight: 500; white-space: nowrap; transition: color .2s, background-color .2s, border-color .2s; } .fc-areas a.fc-area-pill:hover, .fc-areas a.fc-area-pill:focus-visible { border-color: var( --teal ); background-color: rgba( 13, 148, 136, .1 ); color: var( --teal ); } .fc-area-pill__icon { font-size: 1rem; line-height: 1; } /* Sections ---------------------------------------------------------------- */ .fc-area { /* Clears the sticky bar plus a little breathing room on anchor jumps. */ scroll-margin-top: calc( var( --fc-area-top ) + 5.5rem ); padding-top: 4rem; } .fc-area:first-of-type { padding-top: 3rem; } .fc-area__head { display: flex; align-items: flex-start; gap: 1rem; } .fc-area__icon { font-size: 2.25rem; line-height: 1.1; } .fc-areas .fc-area__title { margin: 0; color: var( --navy ); font-size: 1.5rem; font-weight: 800; line-height: 1.2; } .fc-area__desc { max-width: 42rem; margin: .5rem 0 0; color: var( --slate-600 ); } .fc-area__grid { margin-top: 2rem; } @media (min-width: 640px) { .fc-areas .fc-area__title { font-size: 1.875rem; } } @media (max-width: 1024px) { .fc-areas { --fc-area-top: 68px; } }