/* * Theme-specific fixes layered on top of assets/css/main.css (which stays * an unmodified copy of the static build's compiled output). Keeping these * separate means main.css can still be re-synced from the static source * without silently reverting anything here. */ /* * Committee members list (About page): .roles__row's default grid * (4rem 1fr 1.2fr) was designed for its other use case — a leading * chapter-number column — which this list doesn't have (it's just * name/role/note), so the name was being squeezed into a ~4rem column and * wrapping across several lines. Give it three real content columns instead. */ @media (min-width: 768px) { .roles--people .roles__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.6fr); } } /* * .reveal's resting state is opacity:0 (see main.css) — assets/js/reveal.js * removes that via an IntersectionObserver as each element scrolls into * view. That script only runs on the front end, never inside wp-admin, so * every block/section using .reveal (nearly all of them) was rendering * completely invisible in the block editor canvas even though the actual * markup and data were there. The editor isn't a scrolling front-end * experience, so just show everything immediately in that context. * `.editor-styles-wrapper` is the class Gutenberg puts on the iframe's * , so this never affects the real front end. */ .editor-styles-wrapper .reveal { opacity: 1 !important; transform: none !important; } /* * The header starts fully see-through (just a faint top-edge gradient) on * every page until the visitor scrolls or opens the mobile menu — see * assets/js/header.js's "overlay" state. That can make the logo/nav hard * to read against a busy hero photo. Give it a constant 50%-opacity tint * instead, layered under the existing gradient so it's still a soft * overlay rather than a solid bar. .site-header--solid (the scrolled/ * no-hero state) already sets its own near-opaque background and is * unaffected by this. */ /* :not(.site-header--solid) keeps this from overriding the scrolled/no-hero state's own near-opaque background-color, which is declared in main.css (loaded earlier) but would otherwise be beaten by this file loading after it. */ .site-header:not(.site-header--solid) { background-color: hsl(var(--secondary) / 0.5); } /* * Site logo (the tree mark) in the header brand lockup and the footer. * Two colour variants exist because the header switches between a * light-on-dark overlay state and a solid light background (see * .site-header--on-dark above) — a single flat-colour PNG can't adapt to * both, so we ship both and toggle visibility with CSS instead of trying * to recolour a raster image. The footer is always dark, so it only ever * needs the white one. */ .site-header__brand { align-items: center; } .site-header__logo { height: 2.25rem; width: auto; } .site-header__logo--light { display: none; } .site-header--on-dark .site-header__logo--dark { display: none; } .site-header--on-dark .site-header__logo--light { display: block; } .site-footer__logo { height: 2.75rem; width: auto; margin-bottom: 1.25rem; } /* * Videos page — grid of YouTube thumbnail cards + the click-to-play modal. * Reuses the same "bordered mosaic" layout as .panel-grid/.gallery-grid * elsewhere on the site (1px gaps showing the border colour through, each * item its own bordered card) rather than inventing a new grid pattern. */ .video-grid { display: grid; gap: 1px; background: hsl(var(--border)); border: 1px solid hsl(var(--border)); } @media (min-width: 640px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .video-card { display: flex; flex-direction: column; align-items: stretch; text-align: left; background: hsl(var(--card)); border: none; padding: 1.5rem; cursor: pointer; font: inherit; color: inherit; transition: background-color 0.5s var(--ease); } .video-card:hover { background: hsl(var(--muted)); } .video-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: hsl(var(--muted)); margin: -1.5rem -1.5rem 0; } .video-card__thumb img { height: 100%; width: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .video-card:hover .video-card__thumb img { transform: scale(1.04); } .video-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: hsl(var(--secondary) / 0.15); transition: background-color 0.4s var(--ease); } .video-card:hover .video-card__play { background: hsl(var(--secondary) / 0.3); } .video-card__play svg { height: 3.5rem; width: 3.5rem; color: hsl(var(--primary-foreground)); filter: drop-shadow(0 2px 10px hsl(0 0% 0% / 0.45)); transition: transform 0.4s var(--ease); } .video-card:hover .video-card__play svg { transform: scale(1.1); } .video-card__title { margin-top: 1.25rem; font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; line-height: 1.4; color: hsl(var(--foreground)); } .video-card__desc { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.7; color: hsl(var(--muted-foreground)); } .video-lightbox { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: hsl(var(--foreground) / 0.95); } .video-lightbox.is-open { display: flex; } .video-lightbox__frame { width: 100%; max-width: 64rem; aspect-ratio: 16 / 9; } .video-lightbox__embed { height: 100%; width: 100%; } .video-lightbox__embed iframe { height: 100%; width: 100%; border: none; } .video-lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; display: inline-flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; color: hsl(var(--background)); border: 1px solid hsl(var(--background) / 0.3); } .video-lightbox__close:hover { background: hsl(var(--background) / 0.1); }