/* sections/media-popup.css — the right-hand media-popup drawer shared by three sections, and the scroll lock it sets. Live: section#mediaPopup.mediaPopup.shTemplReset.defaultLayout.isMpStaff.isCard, appended to by the CMS media-popup script (recon/homepage-loaded-rules.css lines 2445–2500 = the popup shell, 2576–2606 the staff/card layout, 1913–1958 the .secondLvlCss typography, 359 + 2151–2158 the scroll lock). Three clone sections open it: welcome — welcome.js appends body > section#welcome-media-popup (the "real work" pill and the numbers button) people — people.js appends body > section#people-media-popup (the four cards and the phone Swiper slides) campus — campus.js fills and opens the static at the end of the campus section (top layer → above everything, like the live z-index) Each script adds .isShowing to .mediaPopup__inner 300 ms after opening (slides in over .3s), drops it on close (slides out over .3s) and toggles html.shTplGBlockScroll-html + body.shTplGBlockScroll. Every value is the live one; loaded after the section stylesheets because the campus sits inside .section--school-cards. */ /* ---------- shell: dim overlay + 737px cream drawer parked off the right edge (full width on phones) ---------- */ .mediaPopup { background-color: rgba(0, 0, 0, 0.82); inset: 0; overflow: hidden; position: fixed; transition: background-color 0.6s ease-in-out 1s; z-index: 9999998; } /* live 2445 */ dialog.mediaPopup { border: 0; color: inherit; font: inherit; height: 100%; margin: 0; max-height: none; max-width: none; padding: 0; width: 100%; } /* UA reset → the full-viewport block the live
is (1440×900 @1440) */ dialog.mediaPopup::backdrop { background: transparent; } /* the dim is the element's own background, as on the live */ dialog.mediaPopup:focus { outline: none; } /* campus.js parks focus on the dialog for the first 600 ms (live: focus stays on the page until trapFocus) */ .mediaPopup.shTemplReset::before { clear: both; content: ""; display: table; height: 0; margin-top: -1px; } /* live .shTemplReset clearfix (line 2126): the drawer's content sits 1px above the viewport top */ .mediaPopup::after { background: rgba(0, 0, 0, 0.82); inset: 0; content: ""; opacity: 0; position: absolute; } /* live 2446 */ .mediaPopup .mediaPopup__inner { background: rgb(240, 239, 231); margin: 0 0 0 auto; max-width: 46.0625rem; transform: translateX(100%); width: 100%; z-index: 2; } /* 737px, docked right, off-screen until .isShowing */ .mediaPopup .mediaPopup__content, .mediaPopup .mediaPopup__inner { height: 100%; position: relative; transition: 0.3s ease-in-out; } .mediaPopup .mediaPopup__inner.isShowing { transform: translateX(0); transition: 0.3s ease-in-out; } .mediaPopup .mediaPopup__content { min-height: 100%; overflow: hidden auto; } html.touch .mediaPopup .mediaPopup__content { overflow-y: scroll; } /* live 2450 */ .mediaPopup .mediaPopup__content .mediaPopup__desc { background-color: rgb(240, 239, 231); padding: 2.5rem 4.375rem; } /* 40px 70px */ @media (max-width: 991px) { .mediaPopup .mediaPopup__content .mediaPopup__desc { padding: 1.5625rem 1.25rem; } /* 25px 20px */ } .mediaPopup .mediaPopup__featuredPost { background-color: rgb(240, 239, 231); margin: 0; position: relative; } .mediaPopup .mediaPopup__featuredPost::after { clear: both; content: ""; display: table; } .mediaPopup .mediaPopup__url { inset: 0; font-size: 0; position: absolute; z-index: 1; } .mediaPopup.isMpStaff .mediaPopup__featuredPost > .mediaPopup__url { display: none; } /* live: the invisible full-cover "Visit Page" link is hidden for cards */ /* ---------- top nav: 54px stone disc (42px ≤991); the close button is a red 70px disc (58px ≤991) hanging half outside the panel ---------- */ .mediaPopup .mediaPopup__topNav { background: transparent; position: absolute; width: 100%; z-index: 10; } .mediaPopup .mediaPopup__button { background: rgba(162, 150, 139, 0.8); border: 0; border-radius: 50%; cursor: pointer; height: 3.375rem; margin: 0.625rem 0 0; padding: 0; position: relative; transition: 0.3s ease-in-out; width: 3.375rem; } @media (max-width: 991px) { .mediaPopup .mediaPopup__button { height: 2.625rem; margin-right: 3.75rem; margin-top: 1.0625rem; width: 2.625rem; } } .mediaPopup .mediaPopup__button i { inset: 0; margin: auto; position: absolute; transition: 0.2s ease-in-out; } .mediaPopup .mediaPopup__close { background: rgb(214, 38, 45); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px; height: 4.375rem; left: -2.1875rem; position: absolute; top: 0.8125rem; width: 4.375rem; } /* 13px + 10px margin down, left -35px (668,22 @1440) */ @media (max-width: 991px) { .mediaPopup .mediaPopup__close { height: 3.625rem; left: auto; margin-right: 0; margin-top: 0.625rem; right: 0.625rem; top: 0; width: 3.625rem; } /* 58px inside the top-right corner (322,9 @390) */ } .mediaPopup .mediaPopup__close i::after, .mediaPopup .mediaPopup__close i::before { background: rgb(255, 255, 255); content: ""; height: 0.1875rem; left: 50%; line-height: 1; pointer-events: none; position: absolute; top: 50%; transition: 0.3s ease-in-out; width: 1.875rem; } /* two 30×3px white bars */ .mediaPopup .mediaPopup__close i::before { transform: translate(-50%, -50%) rotate(45deg); } .mediaPopup .mediaPopup__close i::after { transform: translate(-50%, -50%) rotate(135deg); } html.no-touch .mediaPopup .mediaPopup__close:hover { background: rgb(255, 181, 108); } /* ---------- 3:2 photo (737×491 @1440, 390×260 @390) ---------- */ .mediaPopup .mediaPopup__singleImage { display: inline-block; font-size: 0; overflow: hidden; position: relative; width: 100%; } /* overflow: live .isMpStaff rule */ .mediaPopup.isCard:not(.friends) .mediaPopup__singleImage { aspect-ratio: 3 / 2; border-radius: 0; box-shadow: none; float: none; height: auto; margin: 0; width: 100%; } .mediaPopup .mediaPopup__singleImage img { display: block; inset: 0; height: 100%; max-height: 100%; object-fit: cover; position: absolute; width: 100%; } /* live: a 40px placeholder with the 1100px image (img:nth-of-type(2), absolute) crossfading over it; the clone has the one image */ .mediaPopup .mediaPopup__singleImage[hidden] { display: none; } /* live: a card without an image renders no .mediaPopup__singleImage at all */ /* ---------- copy: .secondLvlCss (title, hidden category line, red Garamond lede, paragraphs, quote) ---------- */ .mediaPopup .secondLvlCss { margin: 0; max-width: unset; min-width: unset; padding: 0; text-align: left; } .mediaPopup .secondLvlCss h2 { margin: 1.25rem 0; padding-top: 0.375rem; } /* live 2461 + 1913: 6px above the title, so its box is 48.5px tall @1440 */ .mediaPopup .secondLvlCss h2::first-letter { text-transform: uppercase; } .mediaPopup .secondLvlCss .isCardsCategories { color: rgb(1, 19, 39); display: none; font-family: "EB Garamond", serif; font-size: 1rem; letter-spacing: 0.64px; line-height: 1.7; margin: 0.9375rem 0; order: 1; text-transform: uppercase; } /* live 2460: in the DOM, not shown */ .mediaPopup.isMpStaff .isTitle { color: rgb(201, 34, 38); font-family: "EB Garamond", serif; font-size: clamp(2.25rem, 1.78846rem + 0.961538vw, 2.75rem); font-weight: 600; letter-spacing: 0; line-height: 1; margin-top: 4.375rem; order: 2; text-transform: none; word-break: break-word; } /* 36→44px (42.46px @1440) */ @media (max-width: 700px) { .mediaPopup.isMpStaff .isTitle { margin-top: 0; } } .mediaPopup.isCard:not(.friends) .isTitle { margin-bottom: 2.1875rem; margin-top: 0; } /* 35px under the title */ .mediaPopup .mediaPopup__extraDescWrapper { margin-top: 1.25rem; order: 3; position: relative; } .mediaPopup.isMpStaff .mediaPopup__extraDescWrapper { clear: both; padding-top: 1.5625rem; } .mediaPopup.isCard:not(.friends) .mediaPopup__extraDescWrapper { padding-top: 0; } .mediaPopup .secondLvlCss p { color: rgb(84, 84, 84); display: block; font-family: var(--font-ui); font-size: clamp(1.15625rem, 1.06971rem + 0.180288vw, 1.25rem); font-weight: 400; line-height: 1.25; margin: 0 0 1.875rem; } /* 18.5→20px (19.71px @1440), 30px apart */ .mediaPopup .secondLvlCss p.featuredParagraph { color: rgb(191, 29, 36); font-family: "EB Garamond", serif; font-size: clamp(1.40625rem, 1.03125rem + 0.78125vw, 1.8125rem); font-weight: 600; line-height: 1.27; margin-bottom: 2.1875rem; } /* the lede in red Garamond: 22.5→29px (27.75px @1440), 35px below */ @media (max-width: 767px) { .mediaPopup .secondLvlCss p { margin-bottom: 1.25rem; } .mediaPopup .secondLvlCss p.featuredParagraph { margin-bottom: 1.25rem; } } .mediaPopup .secondLvlCss blockquote { color: rgb(84, 84, 84); display: block; font-family: "EB Garamond", serif; font-size: clamp(1.25rem, 0.730769rem + 1.08173vw, 1.8125rem); font-weight: 600; line-height: 1.27; margin: 3.125rem 0; position: relative; text-align: left; } /* 23.75px @1440 */ @media (max-width: 767px) { .mediaPopup .secondLvlCss blockquote { margin: 2.8125rem 0; padding: 1.25rem 0; } } /* live: icon-font quote glyphs in rgb(96,124,157) hanging 50px outside the text on either side; the clone uses typographic quotes */ .mediaPopup .secondLvlCss blockquote::before, .mediaPopup .secondLvlCss blockquote::after { color: rgb(96, 124, 157); font-size: clamp(1rem, 0.596154rem + 0.841346vw, 1.4375rem); font-weight: 400; line-height: 1; position: absolute; } .mediaPopup .secondLvlCss blockquote::before { content: "\201C"; left: -3.125rem; top: -0.125rem; } .mediaPopup .secondLvlCss blockquote::after { content: "\201D"; bottom: -0.125rem; right: -3.125rem; } @media (max-width: 991px) { /* live: the glyphs drop above / below the quote at ≤991 */ .mediaPopup .secondLvlCss blockquote::before { display: block; margin-bottom: 0.625rem; position: static; } .mediaPopup .secondLvlCss blockquote::after { display: block; margin-top: 0.625rem; position: static; text-align: right; } } .mediaPopup .secondLvlCss blockquote p { color: inherit; display: block; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; position: relative; width: 100%; z-index: 2; } /* ---------- scroll lock while a popup is open (live lines 359, 2151–2158) ---------- */ html.shTplGBlockScroll-html { overflow: hidden; padding-right: 0.9375rem; } /* no page scroll, 15px where the scrollbar was */ /* live also writes position: relative (fixed ≤730px) on the body, but its body { position: unset !important } (global.css line 194) wins, so the live body stays static and keeps its scroll offset on phones — the clone writes only what takes effect. */ body.shTplGBlockScroll { overflow: hidden; } @media (max-width: 950px) { body.shTplGBlockScroll::before { background: rgba(0, 0, 0, 0.565); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 60; } } /* ---------- reduced motion, opt-in only (; the live has no such rule) ---------- */ @media (prefers-reduced-motion: reduce) { html.respect-reduced-motion .mediaPopup, html.respect-reduced-motion .mediaPopup .mediaPopup__inner, html.respect-reduced-motion .mediaPopup .mediaPopup__inner.isShowing { transition: none; } }