/* Theme Name: Goldwater Theme URI: Author: Unified Media LLC Author URI: Description: Custom block theme for the Barry Goldwater Scholarship and Excellence in Education Foundation. Formerly a Spectra One child; made standalone 4 August 2026. Requires at least: 7.0 Tested up to: 7.0 Requires PHP: 5.7 Version: 1.0.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: goldwater Tags: */ /* ===== ON !important IN THIS FILE ===== * About a fifth of the rules here use !important. That is high, and it is * mostly deliberate. Five things in this stack out-specify ordinary theme * CSS, and each cluster exists to beat one of them: * * header, .section-sidebar-nav core's navigation block ships its own * layout and colour rules at high specificity; * the mobile panel in particular cannot be * restyled without them. Tested 9 Aug: * stripping these changes 45 to 69 elements. * LOAD-BEARING - do not remove. * * .gw-band, .gw-fyp, .gw-card these carry inline block styles saved in the * page content, which beat any stylesheet rule * regardless of selector. * * body.home .wp-block-cover core pins margin-left/right to auto with its * .alignwide own !important on constrained-layout * children. * * audience colour rules historically fought the Spectra One parent * (.parent-pageid-*) theme, which was removed on 4 August. These * are the most likely to be removable now. * * A removal pass was attempted on 9 August and abandoned - see ledger ST-77. * The short version: testing whether an !important is needed requires the page, * the viewport width AND the interaction state where its rule actually applies. * Sampling one page with the menu closed reports rules as safe when they are * not, because a rule that does not apply cannot change anything when stripped. * If you attempt this again, build the full matrix first. */ /* ===== TRANSITION TIMING ===== * One duration for everything: 0.15s, tunable from one place. If it ever * needs to become tiered again, the honest split is: cards (lift, shadow, * accent bar, card title), small interface (chips, filters, search field, * submenu), chrome (burger morph, nav panel, masthead shrink, accordion) * and buttons; the map tooltip wants to feel instant and the two max-height * panel reveals are a slower kind of movement than a colour change. * The @keyframes animation declarations are not transitions. */ /* ===== BREAKPOINTS ===== * Four boundaries, each written as an adjacent pair so no range overlaps and * none leaves a gap at fractional viewport widths (which zoom produces): * phone max-width: 599px / min-width: 600px * mobile max-width: 781.98px / min-width: 782px <- WordPress core's * own mobile boundary; matching it keeps theme rules and core * block rules switching at the same instant * desktop max-width: 1050px / min-width: 1051px <- sidebar boundary, * the most-used query in this file * wide min-width: 1240px * Component-specific one-offs remain at 480, 640, 700 and 1199; those are * deliberate, not drift. * Use these values. Adding a sixth number is how the drift starts. */ /* Title-band gray, shared by the band itself and anything that echoes it (e.g. the Scholar Stories link rows). */ :root{--gw-title-band:var(--wp--preset--color--fill);--gw-band-pad:85.4px} /* * ============================================================================ * GOLDWATER THEME — style.css * ============================================================================ * * All theme CSS lives here. There is deliberately NO "Additional CSS" in the * Customizer / global styles: it was migrated into this file so that the block * editor and the front end render identically (see functions.php, which * enqueues this file with a filemtime cache-buster and calls add_editor_style). * * ONE EXCEPTION, added 16 August 2026: styling for BGS Database markup * (.bgs-*, .dt-*) lives in the plugin, in the THEME-ORIGINATED RULES block at * the end of bgs-database/assets/css/frontend.css. The plugin is single-site * and now carries its own appearance. Two form rules are deliberately split * across both files and say so in their own comments. * * AUTHORING RULES * --------------- * 1. An element should get its styling automatically from its section and its * box type. Do not add classes in the block editor to achieve a default. * 2. If an element genuinely needs something extra, use a defined class here. * Only if that is impractical should an inline style be used. * 3. The front page, and parts of the Foundation section, carry bespoke * styling and are exempt from rules 1 and 2. * 4. Type scale: at most two sizes each for h1/h2/h3, ul and ol — the bare * block-editor default, and the variant used inside a box. * * SECTION COLOR * -------------- * Section accent is driven by body classes, not by per-element color: * .parent-pageid-61 / .page-id-61 Students * .parent-pageid-63 Letter Writers * .parent-pageid-65 Campus Representatives * .parent-pageid-67 / .page-id-67 Scholars (awardee plum) * Each sets --gw-step-color, --gw-callout-wash and --gw-callout-rule, which the * step markers and box types then consume. Adding a section means adding one * selector to those variable blocks — not restyling the components. * * BOX TYPES * --------- * gw-callout gw-caution gw-panel gw-card gw-stat gw-do gw-dont gw-inset * plus modifiers gw-card--compact and gw-stat--compact. Each box type is * described under four banners, on purpose, so one concern can be changed * without hunting: BOX TYPES (color), BOX TYPOGRAPHY (size), BOX SPACING * (padding) and BOX MARGINS (rhythm). Keep that split when editing. * * A NOTE ON !important * -------------------- * Box color/border rules use !important to beat the inline styles that Spectra * and the block editor emit. When you add an !important rule, strip the inline * declaration it defeats from the page content in the same pass — otherwise the * inline value survives in the editor UI as a lie about what is rendering. * BOX TYPOGRAPHY intentionally omits !important so a genuine per-element * override is still possible. * * CONTENTS * -------- * Every banner in the file, in order. Search the title, not a line number. * * BASE RULES (recovered from the retired Spectra One parent) * TABLE COLUMN COLLAPSE * OPEN MOBILE MENU LAYOUT * HERO WIDTH BY BREAKPOINT * LINK HOVER TIMING * HOW IT WORKS STEPS ON MOBILE * BLOCK QUOTES * HOME PAGE BAND AND PATH BOX GUTTERS * HOME PAGE HERO ON PHONES * BAKED DESIGN SYSTEM * GOLDWATER CONSOLIDATED STYLESHEET * FORM REST STATE * FORM FOCUS * BUTTON SYSTEM * TITLEBAND * POST & PAGE BODY-SPACING KNOBS (mobile) * SECTIONCOLOR * LINK HOVER COLOR BY AUDIENCE * MOBILE NAV (approved spec, <599px) * SITE SEARCH * SEARCH RESULTS PAGE * FOCUS RINGS * NEWS INDEX REDESIGN * ARROW LINKS * SCHOLARS SECTION * SCHOLARS SECTION CONTENT * SIDEBAR WEIGHTS * FAQ ACCORDION PADDING * FAQ ACCORDION STYLE * SIDEBAR ON DEEPER CHILD PAGES * STATUTE GALLERY (page scans) * LIGHTBOX CAPTION (mirrored from the block caption) * FAQ QUESTION TYPE (accordion questions read as sans, not display serif) * NUMBERED STEP MARKERS (numeral only, no container) * CALLOUT COLOR RULES * BOX TYPES * BOX TYPOGRAPHY * ROSTER (repeating people entries: name, dates, affiliation) * BIO METADATA (Foundation people cards and pages) * BAKED DEFAULTS * BUTTON VARIANTS * BOX SPACING * BOX MARGINS * HOME PAGE * SEARCH RESULT TILES * CLICKABLE CARDS * MILESTONES TIMELINE (Our History) * IMAGE CAPTIONS AND PORTRAITS * CATEGORY MARKERS ON SEARCH RESULTS * STYLE GUIDE (/style-guide/, private) * TYPE RAMP: H3 AND H4 * TITLE-AREA EYEBROW * TABLET NAVIGATION * SCHOLAR STORIES AND NEWS CARD IMAGES * SCHOLAR STORIES PAGE (/scholars/scholar-stories/, page 1367) * MOBILE REFINEMENTS * PORTAL UNAVAILABLE (TEMPORARY — see the banner for how to revert) * */ /* ===== BASE RULES (recovered from the retired Spectra One parent) ===== * Do not delete these without checking what depends on them: * - border-box is assumed by every width and padding pair on the site; * without it tables and the directory header wrap. * - the flex column on .wp-site-blocks plus margin-top:auto on the footer * is what keeps the footer at the bottom of short pages. * - zeroing horizontal padding on flow groups is what lets the title band * reach the edges of the viewport; core gives every group 18px. */ html { box-sizing: border-box; } *, ::before, ::after { box-sizing: inherit; } .wp-site-blocks { display: flex; min-height: 100vh; min-height: 100dvh; /* dvh avoids iOS Safari 100vh address-bar overflow */ flex-direction: column; justify-content: flex-start; } .wp-site-blocks footer { margin-block-start: auto; margin-top: auto; } /* GUARD: theme.json root padding (styles.spacing.padding) owns the page * gutter, and core generates the negative margins that let alignfull escape * it. Never add a rule zeroing horizontal padding on flow groups - it * out-specifies core's and cancels root padding silently. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } /* ===== TABLE COLUMN COLLAPSE ===== * Core gives .wp-block-column word-break: break-word, and it inherits into * any table placed in a column. An auto-layout table then treats one * character as a legal minimum, so a narrow column collapses to a sliver * and its text stacks vertically - "April" ran down the page one letter at * a time on /scholars/instructions/. Normal word breaking restores a * sensible minimum width; genuinely long unbroken strings still wrap * because overflow-wrap stays on. */ .wp-block-table table { word-break: normal; overflow-wrap: break-word; } /* ===== OPEN MOBILE MENU LAYOUT ===== * .primary-nav is absolutely positioned at both mobile breakpoints to place * it in the closed header. These rules are scoped to the open state * (gw-mnav-open) so that positioning cannot follow the list into the open * panel and pin it to the right edge over the search box; the closed header * keeps the positioning it needs at every width. */ @media (max-width:1050px) { /* ul.primary-nav, not .primary-nav: the class is on BOTH the nav element and the list inside it. Targeting both moved the nav, and the nav is what holds the toggle button at the right of the header - so the burger, which morphs into the close X while the menu is open, jumped to the left edge. Only the list should flow. */ html.gw-mnav-open header ul.primary-nav { position: static !important; width: 100% !important; justify-content: flex-start; } } /* ===== HERO WIDTH BY BREAKPOINT ===== * The hero is alignwide, so on desktop it stops at the wide size like the * rest of the page. At tablet and below it should reach the viewport edges, * which it did for free while post-content padding was zero. Under root * padding it needs to cancel that padding explicitly, the same way the * section bar does. Scoped to the front page: alignwide covers is a pattern * that could appear elsewhere and should stay constrained there. */ @media (max-width:1050px) { body.home .wp-block-cover.alignwide { /* !important because core pins margin-left/right to auto with its own !important on constrained-layout children; without it these are ignored. */ margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important; margin-right: calc(-1 * var(--wp--style--root--padding-right)) !important; width: auto; max-width: none; } } /* ===== LINK HOVER TIMING ===== * Body-copy links fade colour at the sitewide 0.15s. :where() keeps * specificity at zero so this cannot outrank any of the colour rules it is * animating. Buttons are excluded - they run their own transition across * four properties. Deliberately NOT suppressed under prefers-reduced-motion: * that guidance concerns movement, and a colour fade neither moves nor * scales. The 3px card lift is suppressed; this is not. */ :where(.entry-content, .wp-block-post-content) a:not(.wp-element-button) { transition: color 0.15s ease; } /* ===== HOW IT WORKS STEPS ON MOBILE ===== * Five steps in a wrapping flex row. Below the mobile breakpoint they break * 3 + 2, and with the default justify-content the second row left-aligned * under the first, leaving an obvious hole on the right. Centring each line * puts the orphan pair under the middle of the row above. * Scoped to mobile: above the breakpoint all five sit on one line and the * connectors between them assume a left-to-right run, so desktop is left * alone. Applies on the home page and on Students Overview, which share this * markup through synced pattern 1456. */ @media (max-width:781px) { .gw-steps { justify-content: center; } } /* ===== BLOCK QUOTES ===== * The left rule uses --gw-step-color, which already resolves to the section * accent where a page has one - gold on Students, purple on Scholars, teal on * Letter Writers - and falls back to the default gold elsewhere. Same variable * the numbered step markers use, so a quote and a step marker on the same page * are the same colour. * margin-left is zeroed so the rule sits on the text column rather than 40px * inside it, matching the callout and search-result treatments. */ .wp-block-quote { border-left: 3px solid var(--gw-step-color, var(--wp--preset--color--secondary)); padding-left: var(--wp--preset--spacing--small); margin-left: 0; } /* ===== HOME PAGE BAND AND PATH BOX GUTTERS ===== * On a phone the band supplies the 16px site gutter and each Find your path * box 24px of its own, so a box edge lands at 16 - the same inset as every * other card on the site - and text at 41. Band headings sit at 16, in line * with headings on every other page. * !important is needed because both paddings are inline block styles saved * in the page, not stylesheet rules. Desktop is untouched. Both classes * appear only on the home page, so the scope is narrower than the selectors * suggest. */ @media (max-width:781px) { .gw-band { padding-left: var(--wp--preset--spacing--x-small) !important; padding-right: var(--wp--preset--spacing--x-small) !important; } .gw-fyp { padding-left: var(--wp--preset--spacing--small) !important; padding-right: var(--wp--preset--spacing--small) !important; } } /* ===== HOME PAGE HERO ON PHONES ===== * The hero text and buttons sit 48px from the cover top instead of centring * in a full-height cover, and the cover is shorter, so the dates card and * the page content arrive sooner. !important because the cover's min-height * and padding are inline block styles saved in the page. */ @media (max-width:599px){ body.home .wp-block-cover{min-height:520px !important; padding-top:48px !important; padding-bottom:88px !important;} } /* ===== BAKED DESIGN SYSTEM ===== */ /* ============================================================ GOLDWATER CONSOLIDATED STYLESHEET Every selector appears once per media context. A pre-consolidation backup lives in the punch-list folder as style-css-backup-2026-08-01-pre-ST-20.css (near-exact; see its header note). Order of play, top to bottom: CONTENTS in the file header lists every banner in order and is the only index. A second, coarser list used to live here and drifted out of step with it. Breakpoints: 599 / 781 / 1050-1051 are the system (phone / tablet boundary / hamburger-to-desktop). 480, 640, 700, 782, 1240 and 1051-1199 are deliberate content-driven one-offs. Palette, font families, spacing presets and block sizes live in theme.json; hover accents are palette entries (*-hover, fill, wash, primary-hover). The !important declarations are load-bearing against Spectra and core: reduce opportunistically when touching a rule, never in bulk. ============================================================ */ .primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a, .primary-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .primary-nav .wp-block-navigation-submenu:has(.current-menu-item) > .wp-block-navigation-item__content { color: var(--wp--preset--color--secondary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 10px; text-decoration-color: var(--wp--preset--color--primary); } .primary-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--secondary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 10px; text-decoration-color: var(--wp--preset--color--primary); } .primary-nav .wp-block-navigation__submenu-container a { text-decoration: none; font-size: 15px; } .section-sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item { display: none; } .section-sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item:has(.current-menu-item), .section-sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item, .section-sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor { display: block; } .section-sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--secondary); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding-bottom: 10px; } .section-sidebar-nav .wp-block-navigation__submenu-icon { display: none; } .section-sidebar-nav .wp-block-navigation__submenu-container { position: static !important; visibility: visible !important; opacity: 1 !important; display: block; width: auto !important; min-width: 0 !important; border: none !important; background: transparent !important; padding: 0 !important; height: auto !important; overflow: visible !important; } .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item { background: var(--wp--preset--color--tertiary); border-left: 3px solid var(--wp--preset--color--secondary); padding-left: 14px; } .footer-nav a { color: var(--wp--preset--color--body); } .wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 8px; } .wp-block-post-terms a, .wp-block-post-terms a:visited { background: var(--wp--preset--color--heading); color: var(--wp--preset--color--background) !important; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; text-decoration: none; transition: background 0.15s ease; } .wp-block-post-terms a:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background) !important; } .wp-block-post-terms .wp-block-post-terms__separator { display: none; } .wp-block-post-title a:hover { color: var(--wp--preset--color--students-hover) !important; } a.wp-block-read-more:hover { color: var(--wp--preset--color--students-hover) !important; } @media (min-width:1240px) { .has-global-padding > .alignwide { padding-left: 0; padding-right: 0; } } .wp-block-post-title a { text-decoration: none; } a.wp-block-read-more { text-decoration: none; } .wp-block-image a { text-decoration: none; } .wp-block-navigation__responsive-container-open svg { display: none; } .wp-block-navigation__responsive-container-open { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23191815'%3E%3Cpath d='M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 30px 30px; width: 30px; height: 30px; } .wp-block-navigation .mobile-utility { display: none; } .primary-nav .wp-block-navigation__responsive-container.is-menu-open .mobile-utility { display: block; width: 100%; max-width: 320px; } .primary-nav .wp-block-navigation__responsive-container.is-menu-open .mobile-utility a { display: block; text-align: center; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--secondary); border-radius: 6px; padding: 10px 16px; font-size: 16px; text-decoration: none; } .primary-nav .wp-block-navigation__responsive-container.is-menu-open .mobile-utility.mobile-utility-outline a { background: var(--wp--preset--color--background); color: var(--wp--preset--color--heading); border: 1px solid var(--wp--preset--color--outline); } @media (max-width:1050px){ main > .wp-block-group:has(.section-sidebar-nav){padding-top: 0 !important; margin-top: 0 !important;} } @media (max-width:599px){ header > .wp-block-group, header .wp-block-group.has-tertiary-background-color{position: relative;} } .section-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:has(.current-menu-item), .section-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item, .section-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor { display: block; } .section-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: center; } .section-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { display: none; padding: 0; text-align: center; } .section-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--body); font-family: var(--wp--preset--font-family--playfair-display); font-size: 21px; font-weight: 500; letter-spacing: normal; text-transform: none; padding: 0; } .section-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { text-align: center; } .section-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item { padding: 6px 0; text-align: center; } .section-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > a { color: var(--wp--preset--color--body); font-family: var(--wp--preset--font-family--playfair-display); font-size: 15px; } .section-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item { background: transparent; border-left: none; padding-left: 0; } .section-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a { color: var(--wp--preset--color--secondary) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--wp--preset--color--primary); } .news-cat-filter ul.wp-block-categories { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; } .news-cat-filter li { margin: 0; padding: 0; } .news-cat-filter li a, .news-cat-filter .news-cat-all a { display: inline-block; border: 1px solid var(--wp--preset--color--outline); color: var(--wp--preset--color--body); background: transparent; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 12px; border-radius: 2px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .news-cat-filter li.current-cat > a, .news-cat-filter .is-active a { background: var(--wp--preset--color--secondary); border-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--background) !important; } .footer-nav .wp-block-navigation-item a:hover,.footer-nav .wp-block-navigation-item.current-menu-item>a,.footer-nav .wp-block-navigation-item.current-menu-ancestor>a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--wp--preset--color--primary)}.primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container{background-color:var(--wp--preset--color--background) !important}footer .wp-block-spectra-icon svg.spectra-custom-svg { width: 24px !important; height: 24px !important; }.primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .primary-nav .wp-block-navigation__submenu-container .current-menu-item > a { text-underline-offset: 6px; } body.page-id-67 .entry-content{padding-bottom:var(--wp--preset--spacing--xx-large,5rem)}/* ===== FORM REST STATE ===== * The masthead search and the search block used on the search results and * locator pages: #d6d5d1 border, 4px radius, on the page background. * The five BGS fields that used to share this rule - the directory and * honorable-mentions search box, the Year and State selects, the * entries-per-page select, and the School and Field of Study combo inputs - * moved to the plugin on 16 August 2026. Their resting appearance now lives * in the THEME-ORIGINATED RULES block at the end of * bgs-database/assets/css/frontend.css. The two halves have to be kept in * sync by hand; change one, check the other. * The masthead search keeps its own size - 15px type in a 42px field is * right for a header and wrong for a filter row - so only its corner radius * comes into line here. */ .gw-search input[type="search"], .wp-block-search__input {border: 1px solid var(--wp--preset--color--outline); border-radius: 4px; background-color: var(--wp--preset--color--background);}/* ===== FORM FOCUS ===== * One focus treatment for every field on the site: the field edge turns * primary gold, a 2px gold ring sits outside it, and a 1px secondary-gold * hairline closes the ring. The hairline is the point. Primary gold on white * is 1.7:1, well under the 3:1 that WCAG 2.1 SC 1.4.11 asks of a focus * indicator, and it is genuinely hard to see on a dim screen; secondary gold * is 6.1:1, so the indicator as a whole reads clearly while still looking * gold. Section 508 currently points at WCAG 2.0, which has no non-text * contrast rule, so this is deliberately ahead of the standard rather than * required by it. * Covers the masthead search and the search block used on the search * results and locator pages. The BGS fields - the directory and honorable- * mentions search box, the Year and State selects, the entries-per-page * select, and the School and Field of Study combo inputs - take the same * treatment from the THEME-ORIGINATED RULES block at the end of * bgs-database/assets/css/frontend.css. The two halves used to be one rule * and must not be allowed to drift apart; change one, check the other. * NOTE: the outline reset also suppresses the plugin's own * .bgs-combo-input:focus-visible outline, which would otherwise draw a * second, offset ring around the two combo inputs. */ .gw-search input[type="search"]:focus, .wp-block-search__input:focus {outline: none; border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 2px var(--wp--preset--color--primary), 0 0 0 3px var(--wp--preset--color--secondary);}/* end BGS map+schools */ /* ---- Foundation section: Spectra stat counters ---- */ .wp-block-spectra-counter { text-align: left; } .wp-block-spectra-counter .spectra-counter-number { font-family: "Playfair Display", serif; font-weight: 500; line-height: 1.15; letter-spacing: 0.5px; } .wp-block-spectra-counter span.spectra-counter-number { display: inline-flex; align-items: baseline; } .wp-block-spectra-counter .spectra-counter-child-wrapper { justify-content: flex-start; } /* ---- BGS shared UI polish ---- */ /* ============ BUTTON SYSTEM ============ Primary = solid gold, ink text, hover one step deeper (#D4AC2B). Secondary = white outline, hover soft gray fill (section tint inside audience sections). Ghost = on-dark hero secondary only, hover fills to gold. One radius (6px) for true buttons; pagers/chips stay 4px. Focus ring everywhere. */ .wp-element-button{transition:background-color 0.15s ease,color 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease;border-radius:6px !important} .wp-element-button:focus-visible,.wp-block-categories .cat-item > a:focus-visible,p.news-cat-all > a:focus-visible,.wp-block-query-pagination a:focus-visible{outline:2px solid var(--wp--preset--color--secondary);outline-offset:2px} .wp-element-button.has-primary-background-color{color:var(--wp--preset--color--heading) !important} .wp-element-button.has-primary-background-color:hover,.wp-block-search__button:hover{background-color:var(--wp--preset--color--primary-hover) !important;border-color:var(--wp--preset--color--primary-hover) !important;color:var(--wp--preset--color--heading) !important;box-shadow:none !important} .wp-element-button.has-background-background-color:hover{background-color:var(--wp--preset--color--fill) !important;border-color:var(--wp--preset--color--neutral) !important} :is(.parent-pageid-61,.page-id-61) main .wp-element-button.has-background-background-color:hover{background-color:var(--wp--preset--color--students-light) !important;border-color:var(--wp--preset--color--students-accent) !important} :is(.parent-pageid-63,.page-id-63) main .wp-element-button.has-background-background-color:hover{background-color:var(--wp--preset--color--letter-writers-light) !important;border-color:var(--wp--preset--color--letter-writers-accent) !important} :is(.parent-pageid-65,.page-id-65) main .wp-element-button.has-background-background-color:hover{background-color:var(--wp--preset--color--campus-reps-light) !important;border-color:var(--wp--preset--color--campus-reps-accent) !important} .wp-block-cover .wp-element-button.has-primary-color:not(.has-background):hover{background-color:var(--wp--preset--color--primary) !important;color:var(--wp--preset--color--heading) !important;border-color:var(--wp--preset--color--primary) !important} .wp-block-query .wp-block-post-terms a:hover,body.single-post .wp-block-post-terms a:hover{color:var(--wp--preset--color--students-hover) !important} /* Icon "bullets" hug the first line of wrapped text */ .wp-block-group.is-layout-flex:has(> .wp-block-spectra-icon) { align-items: flex-start; } .wp-block-group.is-layout-flex:has(> .wp-block-spectra-icon) > .wp-block-spectra-icon { margin-top: 3px; } /* Cards/boxes inside columns stretch to equal height per row */ .wp-block-column > .wp-block-group.has-background, .wp-block-column > .wp-block-group.has-border-color { height: 100%; box-sizing: border-box; } /* FAQ accordion details padding: align answers under the question text */ /* ---- Accordion (FAQ) styling ---- */ .wp-block-spectra-accordion-child-header-icon svg { fill: var(--wp--preset--color--secondary); color: var(--wp--preset--color--secondary); } /* Query-loop grids: equal-height cards in query grids */ .wp-block-post-template.is-layout-grid > li > .wp-block-group { height: 100%; box-sizing: border-box; } /* ---- Unified pagination + category filter ---- */ /* Query-loop pagination (News, Webinars) */ .wp-block-query-pagination { gap: 6px; } .wp-block-query-pagination .wp-block-query-pagination-numbers { display: flex; gap: 6px; } .wp-block-query-pagination .page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next { border: 1px solid var(--wp--preset--color--outline); border-radius: 4px; background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--heading); font-size: 14px; line-height: 1; padding: 8px 12px; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; } .wp-block-query-pagination a.page-numbers:hover, .wp-block-query-pagination-previous:hover, .wp-block-query-pagination-next:hover { background-color: var(--wp--preset--color--quaternary); border-color: var(--wp--preset--color--neutral); } .wp-block-query-pagination .page-numbers.current { background-color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--secondary); font-weight: 600; } .wp-block-query-pagination .page-numbers.dots { border: none; background: none; } /* heading links: no underline at rest, underline on hover */ .wp-block-heading a { text-decoration: none; } .wp-block-heading a:hover { text-decoration: underline; } /* [style*="font-size"] not [style]: the editor puts style="white-space:pre-wrap" on every editable heading, so a bare [style] test fired in the editor and stripped the underline and the 54px lead-in there. Only three headings on the whole site carry an author inline style and all three are font-size, so the narrowed test is identical on the front end. */ .wp-block-post-content h2.wp-block-heading:not([style*="font-size"]):not(:first-child){margin-top:var(--wp--preset--spacing--large)} /* Top of the body column and the sidebar nav must line up. The h2 rule above excludes :first-child because it outranks WP's own first-child reset; the rule below exists because the hidden mobile .gw-secbar occupies the :first-child slot, leaving the nav to inherit the x-small flow margin from :root :where(.is-layout-flow) > * . */ .wp-block-column > .gw-secbar + .section-sidebar-nav{margin-top:0} .wp-block-post-content h2.wp-block-heading[style*="font-size"]{border-bottom:0;padding-bottom:0} /* 1120px, not 920: five labels share this row, and the longest — "Find your Campus Rep (CR)" — needs 200px to stay on one line. At 920 each step got 168px of text width and that label wrapped its last word. 1120 gives 208px, so there is a little slack for font rendering differences between platforms. Still narrower than the 1164px heading and paragraph above it, which is deliberate: the row is meant to sit inside the text measure. Below 640px a separate rule wraps the steps into three columns and this cap does not apply. */ .gw-steps{display:flex;max-width:1120px;margin:6px auto 0} .gw-steps__step{flex:1;text-align:center;position:relative;padding:0 8px} .gw-steps__step::before{content:"";position:absolute;top:30px;left:-50%;width:100%;height:3px;background:rgba(117,96,27,.22);z-index:0} .gw-steps__step:first-child::before{display:none} .gw-steps__disc{position:relative;z-index:1;width:60px;height:60px;border-radius:14px;background:var(--wp--preset--color--students-tint);margin:0 auto 14px;box-shadow:0 0 0 7px var(--wp--preset--color--tertiary)} .gw-steps__disc::after{content:"";position:absolute;inset:0;background:var(--wp--preset--color--secondary);-webkit-mask:var(--g) center / 54% no-repeat;mask:var(--g) center / 54% no-repeat} .gw-steps__badge{position:absolute;top:-9px;right:-9px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--wp--preset--color--secondary);color:var(--wp--preset--color--background);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--wp--preset--color--tertiary)} .gw-steps__lab{font-weight:600;color:var(--wp--preset--color--heading);font-size:15px;line-height:1.25} .gw-steps__step--1 .gw-steps__disc::after{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M132-120q-24%200-42-18t-18-42v-600q0-24%2018-42t42-18h696q24%200%2042%2018t18%2042v600q0%2024-18%2042t-42%2018H132Zm0-60h696v-600H132v600Zm68-100h200v-80H200v80Zm382-80%20198-198-57-57-141%20142-57-57-56%2057%20113%20113Zm-382-80h200v-80H200v80Zm0-160h200v-80H200v80Zm-68%20420v-600%20600Z'%2F%3E%3C%2Fsvg%3E")} .gw-steps__step--2 .gw-steps__disc::after{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M440.5-500Q378-500%20334-544.06%20290-588.13%20290-650q0-63%2044.06-106.5Q378.13-800%20440-800q63%200%20106.5%2043.5t43.5%20106q0%2062.5-43.5%20106.5t-106%2044Zm-.5-60q38%200%2064-26.44T530-650q0-38-26-64t-63.5-26q-37.5%200-64%2026T350-650.5q0%2037.5%2026.44%2064T440-560ZM898-20%20758-160q-23%2017-47.5%2023.5t-50.07%206.5q-71.01%200-120.72-49.62Q490-229.24%20490-300.12t49.62-120.38q49.62-49.5%20120.5-49.5t120.38%2049.71Q830-370.58%20830-299.57q0%2025.57-6.5%2050.07T800-202L940-62l-42%2042ZM738.5-221.5Q770-253%20770-300t-31.5-78.5Q707-410%20660-410t-78.5%2031.5Q550-347%20550-300t31.5%2078.5Q613-190%20660-190t78.5-31.5ZM120-160v-94q0-37%2017.5-63t50.5-43q47-23%20122.5-43.5T464-419q-8%2013-15%2028.5T438-360q-78-1-136%2018.5T212-306q-14%208-23%2021.5t-9%2030.5v34h258q11%2017%2020%2031.5t20%2028.5H120Zm320-490Zm-2%20430Z'%2F%3E%3C%2Fsvg%3E")} .gw-steps__step--3 .gw-steps__disc::after{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M480-462%20140-685v465h390v60H140q-24%200-42-18t-18-42v-520q0-24%2018-42t42-18h680q24%200%2042%2018t18%2042v310h-60v-255L480-462Zm0-60%20340-218H140l340%20218ZM774-44l-42-42%2073-74H590v-60h215l-74-74%2043-42%20146%20146L774-44ZM140-685v499-244%204-314%2055Z'%2F%3E%3C%2Fsvg%3E")} .gw-steps__step--4 .gw-steps__disc::after{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M560-80v-123l221-220q9-9%2020-13t22-4q12%200%2023%204.5t20%2013.5l37%2037q9%209%2013%2020t4%2022q0%2011-4.5%2022.5T902.09-300L683-80H560Zm300-263-37-37%2037%2037ZM620-140h38l121-122-18-19-19-18-122%20121v38ZM220-80q-24%200-42-18t-18-42v-680q0-24%2018-42t42-18h340l240%20240v116h-60v-76H520v-220H220v680h280v60H220Zm290-400Zm251%20199-19-18%2037%2037-18-19Z'%2F%3E%3C%2Fsvg%3E")} .gw-steps__step--5 .gw-steps__disc::after{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'm346-60-76-130-151-31%2017-147-96-112%2096-111-17-147%20151-31%2076-131%20134%2062%20134-62%2077%20131%20150%2031-17%20147%2096%20111-96%20112%2017%20147-150%2031-77%20130-134-62-134%2062Zm27-79%20107-45%20110%2045%2067-100%20117-30-12-119%2081-92-81-94%2012-119-117-28-69-100-108%2045-110-45-67%20100-117%2028%2012%20119-81%2094%2081%2092-12%20121%20117%2028%2070%20100Zm107-341Zm-43%20133%20227-225-45-41-182%20180-95-99-46%2045%20141%20140Z'%2F%3E%3C%2Fsvg%3E")} @media (max-width:640px){.gw-steps{flex-wrap:wrap;max-width:380px}.gw-steps__step{flex:0 0 33.33%;padding:0 4px 22px}.gw-steps__step::before{display:none}} .gw-fyp{background:var(--fyp-bg,var(--wp--preset--color--students-light))!important;border:1px solid rgba(0,0,0,.07)!important;border-bottom:4px solid var(--fyp-accent,var(--wp--preset--color--secondary))!important;border-radius:4px!important} .gw-fyp--students{--fyp-accent:var(--wp--preset--color--students-accent);--fyp-bg:var(--wp--preset--color--students-light)} .gw-fyp--refs{--fyp-accent:var(--wp--preset--color--letter-writers-accent);--fyp-bg:var(--wp--preset--color--letter-writers-light)} .gw-fyp--crs{--fyp-accent:var(--wp--preset--color--campus-reps-accent);--fyp-bg:var(--wp--preset--color--campus-reps-light)} .gw-band{margin-top:0!important;padding-top:90px!important;padding-bottom:90px!important} .gw-band>h2{margin-bottom:6px!important} .gw-band>h2+p{margin-top:0!important;margin-bottom:40px!important} .gw-band .wp-block-columns{margin-top:0!important} .gw-band .gw-steps{margin-top:4px!important} .gw-band:has(.gw-steps){padding-bottom:104px!important} .gw-band:has(.wp-block-columns){padding-bottom:106px!important} .gw-fyp :is(h2,h3,h4) a{color:var(--wp--preset--color--heading)!important} /* Headline hover uses the site-wide audience hover variable rather than a fixed secondary gold, so these follow the same hover language as every other link. On the home page there is no section body class, so it resolves to the students value, which is the site default. */ .gw-fyp :is(h2,h3,h4) a:hover{color:var(--gw-accent-hover,var(--wp--preset--color--students-hover))!important} /* Hover lift, matching the news cards: same 3px rise and the same shadow, referenced through the card preset added in ST-66 rather than repeating the value. The box already carries !important on its background and borders, but not on shadow or transform, so no !important is needed here. Motion is dropped for anyone who has asked to reduce it; the shadow still changes, so the hover remains visible without movement. */ .gw-fyp{transition:box-shadow 0.15s ease, transform 0.15s ease} .gw-fyp:hover{box-shadow:var(--wp--preset--shadow--card);transform:translateY(-3px)} @media (prefers-reduced-motion:reduce){ .gw-fyp{transition:box-shadow 0.15s ease} .gw-fyp:hover{transform:none} } /* == TITLEBAND == */ .gw-fyp--crs .wp-block-spectra-icon{color:var(--wp--preset--color--campus-reps-accent)!important;background-color:var(--wp--preset--color--campus-reps-tint)!important} .wp-block-post-title{color:var(--wp--preset--color--heading)!important} .wp-block-post-title.has-secondary-color{color:var(--wp--preset--color--heading)!important} /* Every title band is the same height whether or not the section adds an audience eyebrow above the page title. The eyebrow is a ::before on the H1 (24px plus spacing = 27px), so without this the Scholars, News and Foundation pages started 27px higher than the four audience sections and their sidebars sat out of line with them. 238px is the eyebrow height plus a one-line 56px title plus the band's 72px padding, top and bottom. */ /* All title bands share one height (eyebrow + a 56px title line + 72px padding top and bottom) so bodies and sidebars line up across sections. Sections that print an audience eyebrow above the title keep the title on the padding; sections without one centre it, so the spare 27px is shared above and below instead of hanging underneath. Eyebrow selectors mirror the ::before rules further down. */ /* One band height across the site (238px) so bodies and sidebars line up. How the spare space is distributed is driven by a variable rather than by competing selectors — the earlier version lost a specificity fight between a :not() chain and a body.blog override, and the News padding silently never applied. Set the variable, not the padding. */ .wp-block-group.has-quaternary-background-color:has(.wp-block-post-title,.wp-block-query-title,h1){background:var(--gw-title-band)!important;min-height:238px;box-sizing:border-box;padding-top:var(--gw-band-pad,85.4px)!important;padding-bottom:var(--gw-band-pad,85.4px)!important} /* Default band padding (no eyebrow) is set with --gw-title-band at the top of this file: 85.4px centres a single 67px title line inside 238px. */ /* Audience sections print an eyebrow above the title, which fills the space: keep the standard 72px. */ :is(.parent-pageid-61,.page-id-61,.parent-pageid-63,.page-id-63,.parent-pageid-65,.page-id-65,.parent-pageid-67,.page-id-67){--gw-band-pad:72px} /* News adds filter pills under the title: 64.5 + 67 title + 10 gap + 32 pills + 64.5 = 238. The pills also drop the wrapper's 18px inline padding so they start level with the title text instead of indented under it. */ body.blog{--gw-band-pad:64.5px} /* ============ POST & PAGE BODY-SPACING KNOBS (mobile) ============ Specificity (.single / .page prefixes) makes these order-independent of the band rules above. */ /* ---- Single-post spacing on mobile ---- The template now owns the structure (band margins 0, 16px band gutters, body wrapper margin 0 + one padding knob). Mobile only tightens the two knobs: the band's vertical padding and the body wrapper's top padding (smaller than the desktop x-large). No stacked margins. */ @media (max-width:781px){ .single .wp-block-group.has-quaternary-background-color:has(.wp-block-post-title){ padding-top:40px !important; padding-bottom:40px !important; } .single .wp-block-group.has-quaternary-background-color:has(.wp-block-post-title) + .wp-block-group.has-global-padding{ padding-top:32px !important; } } /* ---- Page templates (default + sidebar) body spacing ---- Same de-stacking as single posts: the body wrapper's own padding is the only gap between the title band and the content. The sidebar template's wrapper margin lives in the template (margin-top:0); here we zero the first content block's own top margin and give mobile a smaller knob. */ .page .wp-block-post-content > :first-child{ margin-block-start:0 !important; } @media (max-width:781px){ .page .wp-block-group.has-quaternary-background-color:has(.wp-block-post-title) + .wp-block-group{ padding-top:32px !important; } } .news-cat-filter{padding-left:0!important;padding-right:0!important;margin-top:10px!important} :is(.parent-pageid-61,.page-id-61) .wp-block-group.has-quaternary-background-color:has(.wp-block-post-title,.wp-block-query-title,h1){background:var(--wp--preset--color--students-light)!important} :is(.parent-pageid-63,.page-id-63) .wp-block-group.has-quaternary-background-color:has(.wp-block-post-title,.wp-block-query-title,h1){background:var(--wp--preset--color--letter-writers-light)!important} :is(.parent-pageid-65,.page-id-65) .wp-block-group.has-quaternary-background-color:has(.wp-block-post-title,.wp-block-query-title,h1){background:var(--wp--preset--color--campus-reps-light)!important} :is(.parent-pageid-61,.page-id-61,.parent-pageid-63,.page-id-63,.parent-pageid-65,.page-id-65,.parent-pageid-67,.page-id-67) h1.wp-block-post-title::before{display:block;font-family:Inter,sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;line-height:24px;min-height:24px;margin:0 0 3px;padding-left:31px;background-repeat:no-repeat;background-position:left center;background-size:23px 23px} :is(.parent-pageid-61,.page-id-61) h1.wp-block-post-title::before{content:"For Students";color:var(--wp--preset--color--students-accent);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'%2375601B'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M480-60q-72-68-165-104t-195-36v-440q101%200%20194%2036.5T480-498q73-69%20166-105.5T840-640v440q-103%200-195.5%2036T480-60Zm0-104q63-47%20134-75t146-37v-276q-73%2013-143.5%2052.5T480-394q-66-66-136.5-105.5T200-552v276q75%209%20146%2037t134%2075ZM367-647q-47-47-47-113t47-113q47-47%20113-47t113%2047q47%2047%2047%20113t-47%20113q-47%2047-113%2047t-113-47Zm169.5-56.5Q560-727%20560-760t-23.5-56.5Q513-840%20480-840t-56.5%2023.5Q400-793%20400-760t23.5%2056.5Q447-680%20480-680t56.5-23.5ZM480-760Zm0%20366Z'%2F%3E%3C%2Fsvg%3E")} :is(.parent-pageid-63,.page-id-63) h1.wp-block-post-title::before{content:"For Letter Writers";color:var(--wp--preset--color--letter-writers-accent);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'%230E718D'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M320-160q-33%200-56.5-23.5T240-240v-120h120v-90q-35-2-66.5-15.5T236-506v-44h-46L60-680q36-46%2089-65t107-19q27%200%2052.5%204t51.5%2015v-55h480v520q0%2050-35%2085t-85%2035H320Zm120-200h240v80q0%2017%2011.5%2028.5T720-240q17%200%2028.5-11.5T760-280v-440H440v24l240%20240v56h-56L510-514l-8%208q-14%2014-29.5%2025T440-464v104ZM224-630h92v86q12%208%2025%2011t27%203q23%200%2041.5-7t36.5-25l8-8-56-56q-29-29-65-43.5T256-684q-20%200-38%203t-36%209l42%2042Zm376%20350H320v40h286q-3-9-4.5-19t-1.5-21Zm-280%2040v-40%2040Z'%2F%3E%3C%2Fsvg%3E")} :is(.parent-pageid-65,.page-id-65) h1.wp-block-post-title::before{content:"For Campus Reps";color:var(--wp--preset--color--campus-reps-accent);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'%23426B35'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M200-280v-280h80v280h-80Zm240%200v-280h80v280h-80ZM80-120v-80h800v80H80Zm600-160v-280h80v280h-80ZM80-640v-80l400-200%20400%20200v80H80Zm178-80h444-444Zm0%200h444L480-830%20258-720Z'%2F%3E%3C%2Fsvg%3E")} /* == SECTIONCOLOR == */ .parent-pageid-63 main,.page-id-63 main{--wp--preset--color--secondary:var(--wp--preset--color--letter-writers-accent)} .parent-pageid-63 main .wp-block-navigation a,.parent-pageid-63 main .wp-block-navigation a:hover,.page-id-63 main .wp-block-navigation a,.page-id-63 main .wp-block-navigation a:hover{color:var(--wp--preset--color--letter-writers-accent)!important} .parent-pageid-65 main,.page-id-65 main{--wp--preset--color--secondary:var(--wp--preset--color--campus-reps-accent)} .parent-pageid-65 main .wp-block-navigation a,.parent-pageid-65 main .wp-block-navigation a:hover,.page-id-65 main .wp-block-navigation a,.page-id-65 main .wp-block-navigation a:hover{color:var(--wp--preset--color--campus-reps-accent)!important} /* Section-tinted sidebar active item (matches section title-area light variants) */ :is(.parent-pageid-61,.page-id-61) .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item{background:var(--wp--preset--color--students-light)} :is(.parent-pageid-63,.page-id-63) .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item{background:var(--wp--preset--color--letter-writers-light)} :is(.parent-pageid-65,.page-id-65) .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item{background:var(--wp--preset--color--campus-reps-light)} :is(.parent-pageid-67,.page-id-67) .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item{background:var(--wp--preset--color--scholars-light)} /* Section body links: dark accent normal, brighter hover, underlined both states */ :is(.parent-pageid-61,.page-id-61) main .entry-content a:not(.wp-element-button){color:var(--wp--preset--color--students-accent)!important;text-decoration:underline} :is(.parent-pageid-63,.page-id-63) main .entry-content a:not(.wp-element-button){color:var(--wp--preset--color--letter-writers-accent)!important;text-decoration:underline} :is(.parent-pageid-65,.page-id-65) main .entry-content a:not(.wp-element-button){color:var(--wp--preset--color--campus-reps-accent)!important;text-decoration:underline} /* Header: de-yellowed light background + gold brand rule under header */ header .wp-block-group.has-tertiary-background-color{background-color:#FBFAF8 /* masthead band; single use, deliberately unnamed */ !important;border-bottom:3px solid var(--wp--preset--color--primary)} /* Default link hover: mid-gold for visibility (audience-section hovers override this) */ /* === LINK HOVER COLOR BY AUDIENCE === One variable replaces four hardcoded rules. Sections set it; the masthead and footer reset it so site chrome always hovers in the brand gold. */ header,footer{--gw-accent-hover:var(--wp--preset--color--students-hover);} :root :where(a:where(:not(.wp-element-button))):hover{color:var(--gw-accent-hover) !important} /* body links carry an !important color per audience (0,3,3), so the hover needs one notch more specificity to land. Everything else — sidebar, title area — is covered by the rule above. */ :root body main :is(.entry-content,.wp-block-post-content) a:not(.wp-element-button):hover{color:var(--gw-accent-hover) !important} /* Primary nav dropdown: card panel with gold top edge, row hover, no underline */ .primary-nav .wp-block-navigation__submenu-container{padding:8px 0 12px;border:1px solid var(--wp--preset--color--outline) !important;border-top:3px solid var(--wp--preset--color--primary) !important;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.07);overflow:hidden} .primary-nav .wp-block-navigation__submenu-container > li > a:hover{background-color:var(--wp--preset--color--quaternary)} .primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{ text-underline-offset: 6px; text-decoration:none; } /* News: brand the category chips */ .wp-block-query .wp-block-post-terms a,body.single-post .wp-block-post-terms a{background:var(--wp--preset--color--students-tint) !important;color:var(--wp--preset--color--secondary) !important} /* Title bands: heading-block titles match post-title near-black (e.g. News) */ .wp-block-group.has-quaternary-background-color h1.wp-block-heading.has-secondary-color{color:var(--wp--preset--color--heading) !important} /* News category filter: hover fill + radius to match pagination */ .wp-block-categories .cat-item > a, p.news-cat-all > a{border-radius:4px;transition:background-color 0.15s ease} /* :not(.is-active): the AJAX filter marks the active chip with is-active, not current-cat, so without it the hover kept overriding a freshly clicked chip until the pointer left. Mirrors the All chip. */ .wp-block-categories .cat-item:not(.current-cat):not(.is-active) > a:hover, p.news-cat-all:not(.is-active) > a:hover{background-color:var(--wp--preset--color--quaternary);color:var(--wp--preset--color--body) !important} /* Featured query-loop card: section tint + accent border in audience sections */ :is(.parent-pageid-61,.page-id-61) main .wp-block-query .wp-block-group.has-tertiary-background-color{background-color:var(--wp--preset--color--students-light) !important;border-color:var(--wp--preset--color--students-accent) !important} :is(.parent-pageid-63,.page-id-63) main .wp-block-query .wp-block-group.has-tertiary-background-color{background-color:var(--wp--preset--color--letter-writers-light) !important;border-color:var(--wp--preset--color--letter-writers-accent) !important} :is(.parent-pageid-65,.page-id-65) main .wp-block-query .wp-block-group.has-tertiary-background-color{background-color:var(--wp--preset--color--campus-reps-light) !important;border-color:var(--wp--preset--color--campus-reps-accent) !important} /* Sidebar level-2 items: hover state + right chevron, fade in/out, no layout shift */ .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item{ display: block; padding: 6px 10px 6px 17px; position:relative; border-left:3px solid transparent; padding-left:14px; transition:background-color 0.15s ease,border-left-color 0.15s ease; } .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.current-menu-item):hover{background:var(--wp--preset--color--wash);border-left-color:var(--wp--preset--color--neutral)} .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item::after{content:"\203A";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:17px;font-weight:600;line-height:1;color:var(--wp--preset--color--neutral);opacity:0;transition:opacity 0.15s ease} .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.current-menu-item):hover::after{opacity:1} .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item::after{color:var(--wp--preset--color--secondary);opacity:1} /* Primary nav dropdown items: fade hover */ .primary-nav .wp-block-navigation__submenu-container > li > a{transition:background-color 0.15s ease} /* ============ MOBILE NAV (approved spec, <=599px) ============ */ @media (max-width:1050px){ /* burger bars + morph */ .gw-bars{width:24px;height:16px;position:relative;display:block} .gw-bars span{position:absolute;left:0;width:100%;height:2px;background:var(--wp--preset--color--heading);border-radius:2px;transition:transform 0.15s ease,opacity 0.15s ease,top 0.15s ease} .gw-bars span:nth-child(1){top:0} .gw-bars span:nth-child(2){top:7px} .gw-bars span:nth-child(3){top:14px} header .primary-nav .wp-block-navigation__responsive-container-open svg{display:none} html.gw-mnav-open header .primary-nav .gw-bars span:nth-child(1){top:7px;transform:rotate(45deg)} html.gw-mnav-open header .primary-nav .gw-bars span:nth-child(2){opacity:0} html.gw-mnav-open header .primary-nav .gw-bars span:nth-child(3){top:7px;transform:rotate(-45deg)} /* primary panel below masthead */ header .primary-nav .wp-block-navigation__responsive-container{display:block !important;position:fixed !important;left:0;right:0;top:var(--gw-head-h,73px) !important;bottom:0 !important;height:auto !important;min-height:0 !important;background:var(--wp--preset--color--background) !important;z-index:9980;overflow-y:auto;opacity:0;transform:translateY(-14px);pointer-events:none;visibility:hidden;/* no transition on the closed state: the fade lives on html.gw-mnav-open only, so breakpoint crossings can never animate the overlay */padding:4px 0 20px !important} html.gw-mnav-open header .primary-nav .wp-block-navigation__responsive-container{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity 0.15s ease,transform 0.15s ease,top 0.15s ease} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close{display:none !important} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{display:block;padding:0} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container{display:block;padding:0;margin:0} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item{display:block;width:auto;margin:0;border-bottom:1px solid var(--wp--preset--color--outline);padding:0} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;font-family:Inter,sans-serif;font-size:16px;font-weight:500;color:var(--wp--preset--color--heading);text-decoration:none !important;transition:background-color 0.15s ease,border-left-color 0.15s ease,color 0.15s ease} /* caret on parents */ header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation-submenu.has-child.gw-open > .wp-block-navigation-item__content{color:var(--wp--preset--color--secondary)} /* accordion submenus */ header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container{display:block !important;position:static !important;visibility:visible !important;opacity:1 !important;width:auto !important;min-width:0 !important;border:none !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;background:var(--wp--preset--color--fill) !important;height:auto !important;overflow:hidden;transition:max-height 0.15s ease !important} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item{display:block;margin:0;padding:0;border:0} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content{display:block;padding:11px 18px 11px 30px;font-family:Inter,sans-serif;font-size:14px;color:var(--wp--preset--color--body);text-decoration:none !important;border-left:3px solid transparent;transition:background-color 0.15s ease,border-left-color 0.15s ease,color 0.15s ease} /* hovers (non-current) */ header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item:not(.current-menu-item) > .wp-block-navigation-item__content:hover{background:var(--wp--preset--color--wash);border-left-color:var(--wp--preset--color--neutral);color:var(--wp--preset--color--heading)} /* current page marker (only the page itself) */ header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .current-menu-item:not(:has(.current-menu-item)) > .wp-block-navigation-item__content{border-left-color:var(--wp--preset--color--secondary);background:var(--wp--preset--color--fill);color:var(--wp--preset--color--heading);font-weight:600} :is(.parent-pageid-61,.page-id-61) header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .current-menu-item:not(:has(.current-menu-item)) > .wp-block-navigation-item__content{border-left-color:var(--wp--preset--color--students-accent);background:var(--wp--preset--color--students-light)} :is(.parent-pageid-63,.page-id-63) header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .current-menu-item:not(:has(.current-menu-item)) > .wp-block-navigation-item__content{border-left-color:var(--wp--preset--color--letter-writers-accent);background:var(--wp--preset--color--letter-writers-light)} :is(.parent-pageid-65,.page-id-65) header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .current-menu-item:not(:has(.current-menu-item)) > .wp-block-navigation-item__content{border-left-color:var(--wp--preset--color--campus-reps-accent);background:var(--wp--preset--color--campus-reps-light)} /* ---- section menu bar + in-place panel ---- */ .section-sidebar-nav .wp-block-navigation__responsive-container-open{ width: calc(100% + 32px); margin-left: -16px; height: 48px; border: none; border-radius: 0; background-color: var(--wp--preset--color--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%2375601b'%3E%3Cpath d='M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z'/%3E%3C/svg%3E"); background-position: right 16px center; background-size: 30px 30px; display:none !important; } .gw-secbar{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:6px var(--wp--preset--spacing--x-small);background:var(--wp--preset--color--background);border-top:1px solid var(--wp--preset--color--outline);border-bottom:1px solid var(--wp--preset--color--outline)} .gw-seclabel{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wp--preset--color--secondary);line-height:1} /* The glyph is aligned to the button's right edge rather than centred, so it lands 3px in - the same inset the primary burger's 24px bars have inside its 30px box. That puts both glyphs at the same distance from the screen edge while this button keeps its larger 38px touch target. */ .gw-secburger{width:38px;height:38px;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;padding:0 3px 0 0} .gw-secburger .gw-bars{width:24px;height:16px} /* at 16px tall the shared 0/7/14 spacing applies */ .gw-secbar.gw-sec-open .gw-bars span:nth-child(1){top:6px;transform:rotate(45deg)} .gw-secbar.gw-sec-open .gw-bars span:nth-child(2){opacity:0} .gw-secbar.gw-sec-open .gw-bars span:nth-child(3){top:6px;transform:rotate(-45deg)} .section-sidebar-nav.gw-sec-open .wp-block-navigation__responsive-container{max-height:420px;border-bottom:1px solid var(--wp--preset--color--outline)} .section-sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{display:none} } @media (max-width:781px){ /* masthead: sticky + shrink. Sticky runs to 781; 782-1050 is covered by the tablet sticky block. */ header{position:sticky;top:0;z-index:9990} } /* Section-menu companions */ /* ---- Section bar hugs the title band while the bar is visible ---- On sidebar pages at <=1050px the collapsed section menu bar butts up against the title band; the body's breathing room moves below the bar (16px column padding + the columns' stack gap, ~32px total, matching the mobile body knob). Overrides both the template's x-large padding and the generic .page 32px mobile rule (the :has(.gw-secbar) arm out-specifies it). */ @media (max-width:1050px){ .page .wp-block-group.has-quaternary-background-color:has(.wp-block-post-title) + .wp-block-group:has(.gw-secbar){ padding-top:0 !important; } .page .wp-block-group:has(.gw-secbar) .wp-block-column:has(.wp-block-post-content){ padding-top:16px; } /* ---- Section-menu panel items: left bar + audience colors ---- Mirrors the primary menu's mobile item treatment. The bar + wash live on the LINK, which is padded out to be the entire row (no dead space at the row's top/bottom, and the bar spans the full colored height). The row li is padded 16px to undo the panel's full-bleed pull, so the bar lands at the visible screen edge instead of being clipped by the container. Colors come from --gw-step-color / --gw-callout-wash, the same per-audience variables the step markers and callouts consume (secondary/#F6F6F4 on non-audience sections). */ .section-sidebar-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > .wp-block-navigation-item{ padding:0 16px !important; border-left:none !important; background:transparent !important; } .section-sidebar-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content{ display:flex; align-items:center; padding:13px 15px; border-left:3px solid transparent; background:transparent; transition:background-color .15s ease,border-left-color .15s ease; } .section-sidebar-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.current-menu-item) > .wp-block-navigation-item__content:hover{ background:var(--wp--preset--color--wash); border-left-color:var(--wp--preset--color--neutral); } .section-sidebar-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item:not(:has(.current-menu-item)) > .wp-block-navigation-item__content{ border-left-color:var(--gw-step-color,var(--wp--preset--color--secondary)); background:var(--gw-callout-wash,var(--wp--preset--color--fill)); } } @media (min-width:600px) and (max-width:781px){ /* The WP admin bar is FIXED from 600px up (absolute below 600, where it scrolls away). Logged-in users need the sticky header offset under it; visitors get 0 via the var fallback. */ header{top:var(--wp-admin--admin-bar--height,0px)} /* doubled class outranks the base <=781 top:50px rule that appears later in the file */ /* the header does NOT shrink at 600-781 -- it keeps its full ~100px height (same as tablet), so the bar offset is +99 for the usual 1px tuck */ .wp-block-column.wp-block-column:has(.gw-secbar){ top:calc(var(--wp-admin--admin-bar--height,0px) + 99px); } } @media (max-width:599px){ /* shrink-on-scroll + at-rest logo sizing are phone-only: from 600 up the header keeps its full height and larger logo */ html.gw-shrink header .wp-block-image img{height:36px} html.gw-shrink header .wp-block-group.has-tertiary-background-color{padding-top:6px !important;padding-bottom:6px !important} header .wp-block-image{ max-width: 240px; margin:0 !important; text-align:left !important; } } @media (prefers-reduced-motion:reduce){ .gw-bars span,header .primary-nav .wp-block-navigation__responsive-container,.wp-block-navigation__submenu-container,.section-sidebar-nav .wp-block-navigation__responsive-container{transition:none !important} } /* MOBILE NAV FIXES */ @media (min-width:1051px){ .gw-secbar{display:none !important} } @media (max-width:1050px){ /* solid panel background (outranks core's :not(.is-menu-open) inherit rule) */ header .primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open.is-menu-open){background:var(--wp--preset--color--background) !important} /* full-bleed section bar + panel (escape column gutters) */ /* The section bar bleeds to the viewport edge by cancelling the root * gutter, not by using 100vw. Viewport units include the scrollbar, so the * old calc(50% - 50vw) pushed this 8px past both edges on any page tall * enough to scroll - which was every sidebar page - and that overhang was * the sole cause of horizontal scrolling on mobile. Cancelling the root * padding variable instead keeps it exact and follows the gutter if it ever * changes. */ .gw-secbar, .section-sidebar-nav{ margin-left:calc(-1 * var(--wp--style--root--padding-left)) !important; margin-right:calc(-1 * var(--wp--style--root--padding-right)) !important; width:auto !important; max-width:none !important; } .section-sidebar-nav .wp-block-navigation__responsive-container{ display:block !important; position:static !important; height:auto !important; background:var(--wp--preset--color--background) !important; max-height:0; overflow:hidden; transition:max-height 0.15s ease; padding:0 !important; margin:0 !important; width:100% !important; } /* no chevrons in the section menu on mobile */ .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item::after{display:none !important} /* comfortable tap targets */ /* MOBILE NAV: native mobile-utility items styled as buttons */ /* mobile-utility and -outline are used by Campus Rep Login. The top padding sets the gap between the last menu item's rule and the button; 16px matches the menu's own rhythm. */ header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .mobile-utility{border-bottom:0;padding:16px 18px 5px} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .mobile-utility:last-child{padding-bottom:20px} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .mobile-utility > .wp-block-navigation-item__content{display:block;text-align:center;font-family:Inter,sans-serif;border:1px solid var(--wp--preset--color--outline);border-radius:6px;padding:12px;font-size:15px;font-weight:600;color:var(--wp--preset--color--heading)} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .mobile-utility > .wp-block-navigation-item__content:hover{background:var(--wp--preset--color--fill);border-color:var(--wp--preset--color--neutral);color:var(--wp--preset--color--heading) !important} /* MOBILE NAV: section panel cleanup */ .section-sidebar-nav .wp-block-navigation__responsive-container-close{display:none !important} .section-sidebar-nav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{display:block;width:100%;padding:0} .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item{ padding:12px 18px 12px 14px; width:100%; box-sizing:border-box; } } @media (max-width:599px){ body{overflow-x:clip} } /* MOBILE NAV: svg chevrons (match desktop) + sidebar panel gap removal */ @media (max-width:1050px){ header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-submenu.has-child{display:flex;flex-wrap:wrap;align-items:center} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-submenu.has-child > .wp-block-navigation-item__content{flex:1 1 auto} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon{display:inline-flex !important;align-items:center;justify-content:center;width:40px;height:40px;margin:0 8px 0 0;padding:0;background:none;border:0;color:var(--wp--preset--color--neutral);transition:transform 0.15s ease,color 0.15s ease} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation-submenu.gw-open > .wp-block-navigation__submenu-icon{transform:rotate(180deg);color:var(--wp--preset--color--secondary)} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation-submenu > .wp-block-navigation__submenu-container{flex-basis:100%} .section-sidebar-nav .wp-block-navigation__responsive-container .wp-block-navigation__container{ display:block; width:100%; margin:0; padding:0; gap:0 !important; } .section-sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item{ width:100%; padding:0 !important; margin:0 !important; } .section-sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon{display:none !important} .section-sidebar-nav .wp-block-navigation__submenu-container{ width:100% !important; padding-top:0 !important; margin-top:0 !important; } .section-sidebar-nav{ display:block !important; margin-top:0 !important; } /* MOBILE NAV: chevron size, hover containment */ header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__submenu-icon svg{width:14px !important;height:14px !important} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation-submenu:not(.gw-open) > .wp-block-navigation__submenu-container{ max-height:0 !important; overflow:hidden !important; } header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation-submenu.gw-open > .wp-block-navigation__submenu-container{ max-height:480px !important; overflow:hidden !important; } /* MOBILE NAV: full-width hover/marker on top-level rows (covers chevron zone) */ header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:not(.mobile-utility){border-left:3px solid transparent;transition:background-color 0.15s ease,border-left-color 0.15s ease} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:not(.current-menu-item):not(.mobile-utility):hover{background:var(--wp--preset--color--wash);border-left-color:var(--wp--preset--color--neutral)} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .current-menu-item:not(:has(.current-menu-item)){border-left-color:var(--wp--preset--color--secondary);background:var(--wp--preset--color--fill)} header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .current-menu-item:not(:has(.current-menu-item)) > .wp-block-navigation-item__content{font-weight:600;color:var(--wp--preset--color--heading)} :is(.parent-pageid-61,.page-id-61) header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .current-menu-item:not(:has(.current-menu-item)){border-left-color:var(--wp--preset--color--students-accent);background:var(--wp--preset--color--students-light)} :is(.parent-pageid-63,.page-id-63) header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .current-menu-item:not(:has(.current-menu-item)){border-left-color:var(--wp--preset--color--letter-writers-accent);background:var(--wp--preset--color--letter-writers-light)} :is(.parent-pageid-65,.page-id-65) header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .current-menu-item:not(:has(.current-menu-item)){border-left-color:var(--wp--preset--color--campus-reps-accent);background:var(--wp--preset--color--campus-reps-light)} /* MOBILE NAV: icons in panel utility buttons */ header .primary-nav .wp-block-navigation__responsive-container .wp-block-navigation__container > .mobile-utility > .wp-block-navigation-item__content img{width:15px;height:15px;vertical-align:-2px;margin-right:8px;display:inline-block} } /* MOBILE NAV: center hamburger vertically */ @media (max-width:599px){ header .primary-nav{ position: absolute; right: 16px; top:0 !important; bottom:0 !important; height:auto !important; display:flex; align-items:center; } } /* MOBILE NAV: masthead vertical centering (empty desktop-nav row margin, missing bottom padding, inline-block logo link) */ @media (max-width:1050px){ header .wp-block-group:has(> .primary-nav){ padding-top: 0 !important; padding-bottom: 0 !important; position: static; margin:0 !important; } } @media (max-width:599px){ header .wp-block-group.has-tertiary-background-color{ transition:padding 0.15s ease; padding-bottom:16px !important; } header .wp-block-image a{display:block} } /* MOBILE NAV: logo keeps aspect ratio + left anchor (was width-pinned, SVG letterboxed centered); bars centered in burger */ @media (max-width:1050px){ header .primary-nav .wp-block-navigation__responsive-container-open{ background-image:none !important; align-self:center; margin:0; align-items:center !important; justify-content:center !important; } } @media (max-width:599px){ header .wp-block-image img{ height:44px; display:block; transition:height 0.15s ease; width:auto !important; } } /* ============ SITE SEARCH ============ */ /* Desktop: bare magnifier in utility bar; field grows leftward around it */ .gw-search{position:relative;display:flex;align-items:center;height:42px;margin-left:6px;width:42px;transition:width 0.15s ease} .gw-search.open{width:250px} .gw-search input{position:absolute;right:0;top:0;height:42px;width:42px;opacity:0;border:1px solid var(--wp--preset--color--outline);border-radius:6px;background:var(--wp--preset--color--background);padding:0 40px 0 0;font-family:Inter,sans-serif;font-size:15px;color:var(--wp--preset--color--heading);outline:none;transition:width 0.15s ease,opacity 0.15s ease,padding 0.15s ease;pointer-events:none;box-sizing:border-box} .gw-search.open input{width:250px;opacity:1;padding:0 40px 0 12px;pointer-events:auto} .gw-search input:focus{border-color:var(--wp--preset--color--secondary)} .gw-search .gw-search-toggle{position:absolute;right:0;top:0;width:42px;height:42px;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;padding:0} .gw-search svg{width:18px;height:18px;stroke:var(--wp--preset--color--heading);fill:none;stroke-width:2;transition:stroke 0.15s ease} .gw-search .gw-search-toggle:hover svg{stroke:var(--wp--preset--color--secondary)} @media (min-width:1051px){ .gw-msearch{display:none !important} } /* Mobile: tinted strip with contained field, first row of primary panel */ @media (max-width:1050px){ .gw-msearch{background:var(--wp--preset--color--fill);border-bottom:1px solid var(--wp--preset--color--outline);padding:10px 18px} .gw-msearch .gw-msearch-box{display:flex;align-items:center;gap:9px;background:var(--wp--preset--color--background);border:1px solid var(--wp--preset--color--outline);border-radius:6px;padding:9px 12px} .gw-msearch svg{width:15px;height:15px;stroke:var(--wp--preset--color--neutral);fill:none;stroke-width:2;flex:0 0 auto} .gw-msearch input{flex:1;border:0 !important;outline:none;font-family:Inter,sans-serif;font-size:15px;color:var(--wp--preset--color--heading);background:transparent;padding:0} } /* ============ SEARCH RESULTS PAGE ============ */ body.search .wp-block-query-title{color:var(--wp--preset--color--heading) !important;margin-top:0} .gw-sr-eyebrow{font-family:Inter,sans-serif;font-weight:700;font-size:14px;line-height:24px;letter-spacing:.12em;text-transform:uppercase;color:var(--wp--preset--color--secondary);margin:0 0 3px} .gw-sr-count{font-family:Inter,sans-serif;font-size:15px;color:var(--wp--preset--color--neutral);margin:10px 0 0} body.search .wp-block-search__input{border-radius:6px;border:1px solid var(--wp--preset--color--outline);font-family:Inter,sans-serif} body.search li.type-page .wp-block-post-date{display:none} .gw-sr-chip{font-family:Inter,sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px;color:var(--gw-sec,var(--wp--preset--color--secondary))} .gw-sr-chip + .wp-block-post-title{margin-top:0;} body.search .wp-block-post-excerpt{max-width:720px} body.search .wp-block-post-excerpt mark{background:var(--wp--preset--color--students-tint);color:inherit;padding:0 2px;border-radius:2px} /* gw-noresults is shared by the search no-results panel and the 404 page. The padding box below is search-only: on the 404 the class rides a TOP-LEVEL constrained group whose global padding is the page gutter, and the shorthand's zero sides put the content flush against the screen edge at sub-desktop widths. Search's group is nested inside the already-padded results wrapper, so it keeps the tighter box. */ body.search .gw-noresults{padding:6px 0 30px} .gw-noresults h2{color:var(--wp--preset--color--heading)} .gw-noresults ul{margin-top:12px} .gw-noresults li{margin-bottom:6px} /* Single post: back to news link */ .gw-backlink{margin-top:44px;font-family:Inter,sans-serif;font-size:14px;font-weight:600} .gw-backlink a{color:var(--wp--preset--color--secondary);text-decoration:none} .gw-backlink a:hover{text-decoration:underline} /* Single post: previous/next band (Option C) */ .gw-postnav{display:grid;grid-template-columns:1fr 1fr;background:var(--wp--preset--color--fill);border-top:3px solid var(--wp--preset--color--primary);margin-top:26px;font-family:Inter,sans-serif} .gw-postnav .wp-block-post-navigation-link{padding:24px 28px;margin:0;transition:background-color 0.15s ease} .gw-postnav .wp-block-post-navigation-link:hover{background:#EFEEEA /* one step deeper than fill; single use, deliberately unnamed */} .gw-postnav .post-navigation-link-next{text-align:right;border-left:1px solid var(--wp--preset--color--outline);grid-column:2} .gw-postnav .post-navigation-link__label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--neutral);margin-bottom:6px} .gw-postnav .post-navigation-link-previous .post-navigation-link__label::before{content:"\2190 "} .gw-postnav .post-navigation-link-next .post-navigation-link__label::after{content:" \2192"} .gw-postnav .wp-block-post-navigation-link a{font-family:"Playfair Display",serif;font-size:18px;line-height:1.35;color:var(--wp--preset--color--heading);text-decoration:none !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .gw-postnav .wp-block-post-navigation-link a:hover{color:var(--wp--preset--color--secondary) !important} @media (max-width:599px){ .gw-postnav{grid-template-columns:1fr} .gw-postnav .post-navigation-link-next{text-align:left;border-left:0;border-top:1px solid var(--wp--preset--color--outline);grid-column:1} } /* Category archives: near-black title (matches News/Search) */ body.archive .wp-block-query-title{color:var(--wp--preset--color--heading) !important;margin-top:0} /* 404 page */ .error404 h1.gw-404-title{margin-top:0} .error404 .wp-block-search__input{border-radius:6px;border:1px solid var(--wp--preset--color--outline);font-family:Inter,sans-serif} /* ============================================================ FOCUS RINGS Keyboard-only (:focus-visible); mouse clicks never show rings. Outside ring by default; inset (-2px) where containers clip: dropdown panels, sidebar, mobile menu rows. Sidebar rings pick up the section accent (explicit rules below; the main- scoped --secondary override also covers markup inside main). Buttons/chips/pagination already ringed by the button system. ============================================================ */ header a:not(.wp-element-button):focus-visible, header button:focus-visible, footer a:focus-visible, .gw-secbar button:focus-visible, .gw-backlink a:focus-visible, .gw-postnav a:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 2px; border-radius: 3px; } header .wp-block-navigation__submenu-container a:focus-visible, .section-sidebar-nav a:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: -2px; border-radius: 0; } :is(.parent-pageid-61,.page-id-61) :is(.section-sidebar-nav,.gw-secbar) a:focus-visible { outline-color: var(--wp--preset--color--students-accent); } :is(.parent-pageid-63,.page-id-63) :is(.section-sidebar-nav,.gw-secbar) a:focus-visible { outline-color: var(--wp--preset--color--letter-writers-accent); } :is(.parent-pageid-65,.page-id-65) :is(.section-sidebar-nav,.gw-secbar) a:focus-visible { outline-color: var(--wp--preset--color--campus-reps-accent); } @media (max-width:1050px){ header .wp-block-navigation a:focus-visible{outline-offset: -2px; border-radius: 0;} } /* ============================================================ NEWS INDEX REDESIGN Lead story (first item, full-width) + 2-col excerpt grid. Cards: hover-only gold top accent (transparent at rest, so neighbors never reflow) + meta underline at rest. ============================================================ */ .wp-block-post-template.gw-news-loop{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;} .gw-news-loop > li{margin:0;height:100%;} .gw-news-card:hover{box-shadow:0 10px 26px rgba(15,11,2,.09);transform:translateY(-3px);} .gw-news-card .wp-block-post-date{font-size:12.5px;letter-spacing:.02em;margin:0;} .gw-news-card .wp-block-post-terms{font:600 11px Inter,sans-serif;text-transform:uppercase;letter-spacing:1.5px;margin:0;} .gw-news-card .wp-block-post-terms a{background:var(--wp--preset--color--students-tint);color:var(--wp--preset--color--secondary);padding:3px 9px;border-radius:3px;text-decoration:none;} .gw-news-card .wp-block-post-terms a:hover{background:var(--wp--preset--color--primary);color:var(--wp--preset--color--heading);} .gw-news-card .wp-block-post-excerpt{margin:0 0 14px;} .gw-news-card .wp-block-post-excerpt p{font-size:14px;line-height:1.55;color:var(--wp--preset--color--body);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .gw-news-card .wp-block-read-more::after{content:"\2192";transition:transform 0.15s ease;} .gw-news-card .wp-block-read-more:hover{color:var(--wp--preset--color--students-hover);} .gw-news-card .wp-block-read-more:hover::after{transform:translateX(3px);} /* Lead story = first item */ .gw-news-loop > li:first-child{grid-column:1 / -1;} .gw-news-loop > li:first-child .gw-news-card{background:var(--wp--preset--color--tertiary);border-left:5px solid var(--wp--preset--color--primary);padding:28px 32px;} .gw-news-loop > li:first-child .gw-news-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,11,2,.07);} .gw-news-loop > li:first-child .wp-block-post-title{font-size:29px;line-height:1.2;margin-bottom:12px;} .gw-news-loop > li:first-child .wp-block-post-excerpt p{font-size:15.5px;line-height:1.65;-webkit-line-clamp:3;} @media (max-width:781px){.wp-block-post-template.gw-news-loop{grid-template-columns:1fr;}.gw-news-loop > li:first-child .wp-block-post-title{font-size:23px;}} /* News cards: left-align all content (title/meta/read-more) */ .gw-news-card{ height:100%; display:flex; flex-direction:column; background:var(--wp--preset--color--background); position:relative; border:1px solid var(--wp--preset--color--outline); border-radius:4px; padding:20px 24px; transition:box-shadow 0.15s ease,transform 0.15s ease,border-color 0.15s ease; text-align:left; align-items:stretch; } .gw-news-card .wp-block-post-title,.gw-news-card .wp-block-post-title a{text-align:left;} .gw-news-card .wp-block-read-more{ margin-top:auto; font-size:13.5px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; align-self:flex-start; justify-content:flex-start; } /* Undo constrained-layout auto-centering of card children (meta row) */ .gw-news-card > *{margin-left:0 !important;margin-right:0 !important;max-width:100% !important;} /* News underlines: cards keep only the meta rule; no title underline; lead has none */ .gw-news-card .wp-block-post-title{ font-size:20px; line-height:1.3; margin:0 0 9px; border-bottom:none !important; } .gw-news-loop > li:first-child .gw-news-meta{border-bottom:none !important;} .gw-news-meta{ align-items:center; gap:12px; padding-bottom:11px; margin-bottom:12px; border-bottom:1px solid var(--wp--preset--color--outline); justify-content:flex-start; width:100%; display:flex; flex-wrap:nowrap; padding-left:0 !important; padding-right:0 !important; } /* Card hover accent as overlay strip (no layout impact, gray border intact) */ .gw-news-card::before{content:"";position:absolute;inset:-1px;border-radius:5px;border-top:3px solid transparent;transition:border-top-color 0.15s ease;pointer-events:none;} .gw-news-card:hover::before{border-top-color:var(--wp--preset--color--primary);} .gw-news-loop > li:first-child .gw-news-card::before{display:none;} /* ============================================================ ARROW LINKS: links ending in an arrow get an animated ::after arrow on hover + no underline. Class added sitewide by JS (functions.php) which strips the literal arrow. ============================================================ */ .gw-arrow-link{text-decoration:none !important;white-space:nowrap;} .gw-arrow-link::after{content:"\00a0\2192";display:inline-block;transition:transform 0.15s ease;} .gw-arrow-link:hover::after{transform:translateX(4px);} /* ============================================================ SCHOLARS SECTION Every page under Scholars (67) serves people who already hold the award, so the whole section takes the plum set: accent #804B97, tint #E4D7EA, light #F6F1F8 (registered in theme.json). The section keys off its page ids like Students, Letter Writers and Campus Reps do. ============================================================ */ /* Title band takes the plum wash on these pages. */ body:is(.parent-pageid-67,.page-id-67) .wp-block-group.has-quaternary-background-color:has(.wp-block-post-title,.wp-block-query-title,h1){ background-color:var(--wp--preset--color--scholars-light) !important; } /* Awardee eyebrow: same metrics as the other audience sections (see the shared h1::before rule above), with the medal supplied as a background glyph. */ body:is(.parent-pageid-67,.page-id-67) h1.wp-block-post-title::before{ content:'For Goldwater Scholars'; color:var(--wp--preset--color--scholars-accent); background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'%23804B97'%20viewBox%3D'0%20-960%20960%20960'%3E%3Cpath%20d%3D'M480-120%20200-272v-240L40-600l440-240%20440%20240v320h-80v-276l-80%2044v240L480-120Zm0-332%20274-148-274-148-274%20148%20274%20148Zm0%20241%20200-108v-151L480-360%20280-470v151l200%20108Zm0-241Zm0%2090Zm0%200Z'%2F%3E%3C%2Fsvg%3E"); } /* ============================================================ SCHOLARS SECTION CONTENT Scholars is an audience section like the other three: secondary is remapped inside main, so anything already keyed to it (sidebar label, active markers, accents) turns plum without duplicating those rules. ============================================================ */ body:is(.parent-pageid-67,.page-id-67) main{ --wp--preset--color--secondary:var(--wp--preset--color--scholars-accent); } /* Body links: plum, brightening on hover. #9C5DB6 is the brighter step, chosen to stay at 4.5:1 on white rather than matching the older section hovers, which all sit near 2.9:1. */ body:is(.parent-pageid-67,.page-id-67) main .entry-content a:not(.wp-element-button), body:is(.parent-pageid-67,.page-id-67) main .wp-block-post-content a:not(.wp-element-button){ color:var(--wp--preset--color--scholars-accent) !important; text-decoration:underline; } /* ============================================================ SIDEBAR WEIGHTS Consistent across every sidebar, audience-specific or not. ============================================================ */ .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item > a{ color: var(--wp--preset--color--neutral); font-size: 14px; font-weight:400 !important; } .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item > a{ color: var(--wp--preset--color--secondary); font-weight:600 !important; } /* ============================================================ FAQ ACCORDION PADDING The answer area carried 7px of its own padding, but the item is a flex column with an 18px row gap, so the top measured 25px against 7-8px on the other three sides. Drop the gap and set one even value so the answer is inset equally all round. ============================================================ */ .wp-block-spectra-accordion-child-details{ padding:14px !important; } /* ============================================================ FAQ ACCORDION STYLE Audience color comes from --secondary, which each section already remaps inside main: bronze by default and on Students, teal on Letter Writers, green on Campus Reps, plum on Scholars. One rule set therefore covers every FAQ page. Spectra handles the open/close animation itself; nothing here touches display or height. ============================================================ */ .wp-block-spectra-accordion{ row-gap:10px !important; } /* A permanent transparent edge means the accent can appear without nudging the text sideways when an item opens. */ .wp-block-spectra-accordion-child-item{ border: 1px solid var(--wp--preset--color--outline); border-radius: 4px; background-color: var(--wp--preset--color--background); overflow: hidden; row-gap:0 !important; border-left:3px solid transparent !important; /* Spectra animates the panel with transition:max-height 0.15s on this element, so it has to be restated here or declaring a transition wipes it out. */ transition:max-height 0.15s, border-left-color 0.15s ease; } .wp-block-spectra-accordion-child-item.is-active{ border-left-color:var(--wp--preset--color--secondary) !important; } .wp-block-spectra-accordion-child-header{ cursor: pointer; padding:12px 14px !important; transition:background-color 0.15s ease; } .wp-block-spectra-accordion-child-header:hover{ background-color: var(--wp--preset--color--quaternary); background:var(--wp--preset--color--wash); } .wp-block-spectra-accordion-child-header:focus-visible{ outline:2px solid var(--wp--preset--color--secondary); outline-offset:-2px; } /* The plus/minus takes the audience color. */ .wp-block-spectra-accordion-child-header-icon, .wp-block-spectra-accordion-child-header-icon svg{ color:var(--wp--preset--color--secondary) !important; fill:var(--wp--preset--color--secondary) !important; } /* Open question echoes the accent, like the current item in the sidebar. */ .wp-block-spectra-accordion-child-item.is-active .wp-block-spectra-accordion-child-header-content{ color:var(--wp--preset--color--secondary); } /* Answer is smaller than the question, for hierarchy. */ .wp-block-spectra-accordion-child-details p{ font-size:16px !important; } /* === SIDEBAR ON DEEPER CHILD PAGES === */ .section-sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item:has(.current-menu-ancestor){display:block} .section-sidebar-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:has(.current-menu-ancestor){display:block} .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-ancestor{background:var(--wp--preset--color--surface);border-left:3px solid var(--wp--preset--color--secondary);padding-left:14px} .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-ancestor > a{color:var(--wp--preset--color--secondary);font-weight:600} .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-ancestor::after{opacity:1} /* === STATUTE GALLERY (page scans) === */ .wp-block-gallery.has-nested-images.gw-statute-gallery figure.wp-block-image{flex-direction:column} .wp-block-gallery.has-nested-images.gw-statute-gallery figure.wp-block-image img{border:1px solid var(--wp--preset--color--outline);background:var(--wp--preset--color--background);transition:border-color 0.15s ease,box-shadow 0.15s ease} .wp-block-gallery.has-nested-images.gw-statute-gallery figure.wp-block-image:hover img{border-color:var(--wp--preset--color--secondary);box-shadow:0 3px 12px rgba(15,11,2,.09)} .wp-block-gallery.has-nested-images.gw-statute-gallery figure.wp-block-image figcaption{position:static;background:none;padding:11px 1px 0;margin:0;max-width:100%;color:var(--wp--preset--color--body);font-size:13px;line-height:1.5;text-align:left;text-shadow:none;overflow:visible;text-overflow:clip;white-space:normal} .wp-block-gallery.has-nested-images.gw-statute-gallery figure.wp-block-image figcaption strong{display:block;margin-bottom:2px;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--secondary)} .wp-block-gallery.has-nested-images.gw-statute-gallery figure.wp-block-image figcaption br{display:none} .wp-block-gallery.has-nested-images.gw-statute-gallery figcaption.blocks-gallery-caption{margin:20px 0 0;max-width:100%;width:100%;padding-top:15px;border-top:1px solid var(--wp--preset--color--outline);font-size:14px;line-height:1.6;text-align:left;color:var(--wp--preset--color--body)} /* === LIGHTBOX CAPTION (mirrored from the block caption) === */ .wp-lightbox-overlay .gw-lightbox-caption{position:absolute;left:0;right:0;bottom:0;z-index:2000003;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:15px;row-gap:3px;margin:0;padding:16px 76px;background:rgba(255,255,255,.96);border-top:1px solid var(--wp--preset--color--outline);color:var(--wp--preset--color--body);font-size:14.5px;line-height:1.5;text-align:center;pointer-events:none} .wp-lightbox-overlay .gw-lightbox-caption:empty{display:none} .wp-lightbox-overlay .gw-lightbox-count{flex:0 0 auto;padding-right:15px;border-right:1px solid var(--wp--preset--color--outline);font-weight:600;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--wp--preset--color--heading)} .wp-lightbox-overlay .gw-lightbox-text{max-width:76ch} .wp-lightbox-overlay .gw-lightbox-text strong{margin-right:10px;font-weight:600;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--wp--preset--color--secondary)} .wp-lightbox-overlay .gw-lightbox-text br{display:none} .wp-lightbox-overlay .gw-lightbox-caption a{pointer-events:auto} @media (max-width:781px){ .wp-lightbox-overlay .gw-lightbox-caption{padding:13px 20px;font-size:13.5px;column-gap:0;flex-direction:column;align-items:center} .wp-lightbox-overlay .gw-lightbox-count{padding-right:0;border-right:0;margin-bottom:2px} .wp-lightbox-overlay .gw-lightbox-text strong{display:block;margin:0 0 2px} } /* === FAQ QUESTION TYPE (accordion questions read as sans, not display serif) === */ .wp-block-spectra-accordion-child-header-content{ font-size: 19px; color: var(--wp--preset--color--heading); font-family:var(--wp--preset--font-family--inter)!important; font-weight:600!important; } /* === NUMBERED STEP MARKERS (numeral only, no container) === Add the class gw-step-n to the small group holding the number. Color follows the audience section; other pages use secondary. */ .gw-step-n{flex:0 0 42px!important;padding:0!important;background:none!important;text-align:right;min-width:0;} .gw-step-n.gw-step-n>*{margin:0!important;font-size:26px!important;line-height:1.15!important;font-weight:400!important;color:var(--gw-step-color)!important;} @media (max-width:599px){.gw-step-n{flex-basis:32px!important;}.gw-step-n>*{font-size:22px!important;}} /* === CALLOUT COLOR RULES === Add gw-callout to an emphasis callout. Wash and rule follow the audience section; non-audience pages and all posts use cream + gold. */ :root,body{ --gw-accent-hover:var(--wp--preset--color--students-hover); --gw-step-color:var(--wp--preset--color--secondary); --gw-callout-wash:var(--wp--preset--color--tertiary); --gw-callout-rule:var(--wp--preset--color--primary); } body:is(.parent-pageid-61,.page-id-61){ --gw-step-color:var(--wp--preset--color--students-accent); --gw-callout-wash:var(--wp--preset--color--students-light); --gw-callout-rule:var(--wp--preset--color--students-accent); } body:is(.parent-pageid-63,.page-id-63){ --gw-accent-hover:var(--wp--preset--color--letter-writers-hover); --gw-step-color:var(--wp--preset--color--letter-writers-accent); --gw-callout-wash:var(--wp--preset--color--letter-writers-light); --gw-callout-rule:var(--wp--preset--color--letter-writers-accent); } body:is(.parent-pageid-65,.page-id-65){ --gw-accent-hover:var(--wp--preset--color--campus-reps-hover); --gw-step-color:var(--wp--preset--color--campus-reps-accent); --gw-callout-wash:var(--wp--preset--color--campus-reps-light); --gw-callout-rule:var(--wp--preset--color--campus-reps-accent); } body:is(.parent-pageid-67,.page-id-67){ --gw-accent-hover:var(--wp--preset--color--scholars-hover); --gw-step-color:var(--wp--preset--color--scholars-accent); --gw-callout-wash:var(--wp--preset--color--scholars-light); --gw-callout-rule:var(--wp--preset--color--scholars-accent); } .gw-callout{background-color:var(--gw-callout-wash)!important;border:0!important;border-left:3px solid var(--gw-callout-rule)!important;border-radius:0 4px 4px 0!important;} /* === BOX TYPES === gw-callout emphasis | gw-caution consequence | gw-panel neutral container gw-card repeating peer | gw-do / gw-dont opposition | gw-stat headline figure */ .gw-panel{background-color:var(--wp--preset--color--quaternary)!important;border-left:0!important;border-radius:4px!important;} .gw-card{background-color:var(--wp--preset--color--background)!important;border:1px solid var(--wp--preset--color--outline)!important;border-radius:4px!important;} .gw-caution{background-color:var(--wp--preset--color--tertiary)!important;border:0!important;border-left:3px solid var(--wp--preset--color--warning)!important;border-radius:0 4px 4px 0!important;} .gw-do{background-color:var(--wp--preset--color--quaternary)!important;border:0!important;border-left:3px solid var(--wp--preset--color--success)!important;border-radius:0 4px 4px 0!important;} .gw-dont{background-color:var(--wp--preset--color--quaternary)!important;border:0!important;border-left:3px solid var(--wp--preset--color--error)!important;border-radius:0 4px 4px 0!important;} .gw-stat{background-color:var(--gw-callout-wash)!important;border:0!important;border-radius:4px!important;} /* === BOX TYPOGRAPHY === Defaults inside every box type. No !important: an inline size on a block is a deliberate override and still wins. */ .gw-callout p,.gw-caution p,.gw-panel p,.gw-card p,.gw-stat p,.gw-do p,.gw-dont p,.gw-inset p,.gw-callout li,.gw-caution li,.gw-panel li,.gw-card li,.gw-stat li,.gw-do li,.gw-dont li,.gw-inset li{font-size:16px;} .gw-callout h4,.gw-caution h4,.gw-panel h4,.gw-card h4,.gw-stat h4,.gw-do h4,.gw-dont h4,.gw-inset h4{font-size:18px;} p.gw-label,span.gw-label,.gw-label{font-size:14px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gw-step-color,var(--wp--preset--color--secondary));} /* === ROSTER (repeating people entries: name, dates, affiliation) === One entry per gw-roster__item; the divider and rhythm live here, not inline. Last item drops its rule so the list does not end on a line. */ .gw-roster__item{padding-bottom:14px;border-bottom:1px solid var(--wp--preset--color--outline);} .gw-roster__item:last-child{border-bottom:0;padding-bottom:0;} /* === BIO METADATA (Foundation people cards and pages) === gw-bio-name: the person's name line when it is a paragraph, not a heading. Role eyebrows use gw-label; affiliations fall to the box default. */ p.gw-bio-name{font-weight:600;line-height:1.35;} /* === BAKED DEFAULTS === Element defaults so body content needs no inline styles or extra classes. Inline styles and preset classes still win where deliberately set. */ /* === BUTTON VARIANTS === Two variants, no inline styles needed: primary = has-primary-background-color (gold fill) secondary = has-background-background-color (white + outline) Size comes from context: 14px in body content, 16px in the front-page hero. */ .wp-element-button,.wp-block-button__link{font-size:14px;} .wp-block-button__link.has-background-background-color{border:1px solid var(--wp--preset--color--outline);} .home .wp-block-cover .wp-element-button,.home .wp-block-cover .wp-block-button__link{font-size:16px;} /* === BOX SPACING === Padding belongs to the box type, never to the individual block. WHEN TO USE --compact (cards and stats only): * the card sits in a grid of three or more across, OR * its main content is a photo or a display figure rather than prose. Everything else takes the default medium padding. Panels never vary. In use today: compact = Governance bio cards, About counter tiles, CR nomination-cap stats. Medium = eligibility criteria, wayfinding cards, award figures, every panel. */ /* The :root prefixes below are load-bearing. Core zeroes left/right padding on a nested .has-global-padding via a :where() selector that ties with a bare class, and style.css loads AFTER core on the front end but BEFORE it in the block editor - so a bare .gw-card lost its side padding in the editor only. Keep the prefix on the --compact rules too: they override the base rule by source order and would be outranked without it. */ :root .gw-panel,:root .gw-card,:root .gw-stat{padding:var(--wp--preset--spacing--medium);} :root .gw-card--compact,:root .gw-stat--compact{padding:var(--wp--preset--spacing--small);} /* Board patterns: gw-board-card rides on the Governance grid's gw-card--compact groups (scoped separately because compact cards elsewhere must not inherit it); gw-board-profile sits on each profile page's top columns block. Core's mobile stacking rule (flex-basis:100% !important) wins below 782px. The h3 rule carries :root because the theme's ":root body h3" 26px reset outranks a bare class selector. */ .gw-board-card .wp-block-image img{border-radius:4px} :root .gw-board-card h3{margin-top:14px} .gw-board-profile{margin-top:var(--wp--preset--spacing--medium)} .gw-board-profile > .wp-block-column:first-child{flex:0 1 33.33%} .gw-board-profile > .wp-block-column:last-child{flex:0 1 66.66%} .gw-board-profile .wp-block-image img{border-radius:4px} /* Statistic figures: the number called out in a gw-card or gw-stat box. One of three number kinds: statistic (this class, 34px), sequence step (.gw-step-n), timeline year (a plain h3 at ramp size). Family, weight and line height come from the h3 ramp. Home page number tiles are page art direction by decision, not a component. */ .gw-stat-n{font-size:34px;} :root .gw-callout,:root .gw-caution,:root .gw-do,:root .gw-dont{padding:var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);} :root .gw-inset{padding:16px 18px;} /* Statute gallery sits well clear of the prose around it. */ .gw-statute-gallery{margin-block:var(--wp--preset--spacing--60);} /* === BOX MARGINS === A box owns the gap above it, and cancels the stray top margin on its first and last children so content sits flush inside the padding. */ .gw-panel>*:first-child,.gw-card>*:first-child,.gw-stat>*:first-child,.gw-callout>*:first-child,.gw-caution>*:first-child,.gw-do>*:first-child,.gw-dont>*:first-child,.gw-inset>*:first-child{margin-top:0;} .gw-panel>*:last-child,.gw-card>*:last-child,.gw-stat>*:last-child,.gw-callout>*:last-child,.gw-caution>*:last-child,.gw-do>*:last-child,.gw-dont>*:last-child,.gw-inset>*:last-child{margin-bottom:0;} :root .gw-panel,:root .gw-card,:root .gw-stat,:root .gw-callout,:root .gw-caution,:root .gw-do,:root .gw-dont{margin-top:var(--wp--preset--spacing--medium);} /* ============================================================================ HOME PAGE The front page carries bespoke styling and is exempt from the sitewide type and box rules. What lives here is only the part that was worth aligning: the label treatment, box copy size, and the audience cards. Hero display type, the five-step graphic and the column widths are deliberately untouched. ========================================================================== */ /* Eyebrow labels use the sitewide gw-label component (14px / 600 / .09em / uppercase / secondary). Secondary reads at 6.1:1 where gold on white fails AA at 1.74:1. */ .home .gw-label{margin-bottom:0;} .home .gw-card .gw-label{margin-bottom:4px;} /* Copy inside a box is 16px sitewide. */ .home .gw-fyp p, .home .wp-block-post-excerpt, .home .wp-block-post-excerpt__excerpt{font-size:16px;} /* AUDIENCE CARDS (Find your path) ------------------------------------------- Each card is tinted and rule-lined for its audience. Links below the divider take the audience accent; the card title stays near-black because it sits above the divider and is a heading, not navigation. The divider itself is left neutral on purpose — the accent is already carried by the bottom bar and the links, and tinting it too makes the rule compete with what it separates. */ .home .gw-fyp a{text-decoration:none;} .home .gw-fyp a:hover,.home .gw-fyp a:focus-visible{text-decoration:underline;} .home .gw-fyp--students a{color:var(--wp--preset--color--students-accent);} .home .gw-fyp--refs a{color:var(--wp--preset--color--letter-writers-accent);} .home .gw-fyp--crs a{color:var(--wp--preset--color--campus-reps-accent);} .home .gw-fyp :is(h1,h2,h3,h4) a{color:var(--wp--preset--color--heading);} /* ============================================================================ SEARCH RESULT TILES The audience chip is written in PHP, on render_block_core/post-title. Only the four audience areas get one — Students, Letter Writers, Campus Reps, and the awardee-facing pages under Scholars. Everything else (Foundation, Donate, Required Statements, news posts, the front page) gets no chip at all and no section class, so the colors below fall back to the base accent. The result also carries gw-sec--, which supplies --gw-sec and --gw-wash from the palette. ========================================================================== */ /* The per-result group used a constrained layout, which added WordPress global padding and indented the title 18px from the page grid while the chip sat outside it. Fixed in the search template (layout set to default) rather than with a CSS offset, so chip and title share the same edge at every width. */ /* Search-result hover: a light wash plus a left accent bar, both driven by custom properties the search script sets per result from the audience map. --gw-wash is that audience's -light tint, the same wash the Find-your-path cards use on the front page; --gw-sec is its accent. Results with no audience fall back to the neutral #FAFAF9 wash and a gray bar, so the hover still registers without implying a section. */ /* padding-left is 17 rather than the 16px gutter: the 3px hover border makes the text land at the same 16px inset as the right side, and on hover the border sits flush with the content edge. */ body.search .wp-block-post-template > li{position:relative;border-left:3px solid transparent;padding:18px 20px 18px 17px;margin:0;transition:background-color 0.15s ease,border-left-color 0.15s ease} body.search .wp-block-post-template > li:hover{background:var(--gw-wash,var(--wp--preset--color--wash));border-left-color:var(--gw-sec,var(--wp--preset--color--neutral))} /* Result separation. The rule sits IN THE GAP between results, not on the box. Drawing it as a border-top on the li made it look welded to the top edge of the hover wash; as an absolutely-positioned line halfway up the margin, there is clear white above and below every result when it lights up on hover. Inset left/right to match the li padding so it lines up with the text. Drawn as a border, not a 1px-tall filled box: browsers snap border widths to device pixels but not element heights, so a filled 1px box renders heavier than every other hairline on the page on a fractional-DPR display. */ body.search .wp-block-post-template > li + li{margin-top:48px;} body.search .wp-block-post-template > li + li::before{ content:"";position:absolute;top:-24px;left:20px;right:20px;height:0; border-top:1px solid var(--wp--preset--color--outline); } /* ============================================================================ CLICKABLE CARDS Search results, news cards and the front-page announcement all contain a title and a "Read more" pointing at the same place. Rather than two links per card, the title link is stretched over the whole card with a pseudo element, so the card is one target and "Read more" becomes decoration. Deliberately NOT done by wrapping the card in an (the accessible name would become the entire card text) or with a JS click handler (breaks middle-click, cmd-click and text selection). The stretched link keeps one real anchor, so new-tab, keyboard focus and the accessibility tree stay correct. Every hover effect is driven from the CARD, not from the individual element, so the title, the read-more color and the arrow all move together wherever the pointer is. :focus-within mirrors :hover so keyboard users get the same feedback — none of these cards responded to the keyboard before. Anything inside a card that must stay separately clickable needs position:relative and z-index:1 to sit above the overlay. ========================================================================== */ body.search .wp-block-post-template > li, .gw-news-card, .home .wp-block-query .wp-block-post > .wp-block-group{position:relative;} body.search .wp-block-post-template > li .wp-block-post-title a::after, .gw-news-card .wp-block-post-title a::after, .home .wp-block-query .wp-block-post > .wp-block-group .wp-block-post-title a::after{content:"";position:absolute;inset:0;z-index:1;} /* read-more is decoration once the card is the link */ body.search .wp-block-post-template > li .wp-block-read-more, .gw-news-card .wp-block-read-more, .home .wp-block-query .wp-block-post > .wp-block-group .wp-block-read-more{pointer-events:none;transition:color 0.15s ease;} body.search .wp-block-post-template > li .wp-block-read-more::after, .gw-news-card .wp-block-read-more::after, .home .wp-block-query .wp-block-post > .wp-block-group .wp-block-read-more::after{display:inline-block;transition:transform 0.15s ease;} body.search .wp-block-post-template > li:hover .wp-block-read-more::after, .gw-news-card:hover .wp-block-read-more::after, .home .wp-block-query .wp-block-post > .wp-block-group:hover .wp-block-read-more::after, body.search .wp-block-post-template > li:focus-within .wp-block-read-more::after, .gw-news-card:focus-within .wp-block-read-more::after, .home .wp-block-query .wp-block-post > .wp-block-group:focus-within .wp-block-read-more::after{transform:translateX(3px);} /* read-more color is driven from the card, not from the element. It has pointer-events:none so it can never receive :hover itself — the original .gw-news-card .wp-block-read-more:hover rule stopped firing once the card became the link. !important is needed to beat the block's has-*-color class, which WordPress emits with !important. */ body.search .wp-block-post-template > li:hover .wp-block-read-more, .gw-news-card:hover .wp-block-read-more, .home .wp-block-query .wp-block-post > .wp-block-group:hover .wp-block-read-more, body.search .wp-block-post-template > li:focus-within .wp-block-read-more, .gw-news-card:focus-within .wp-block-read-more, .home .wp-block-query .wp-block-post > .wp-block-group:focus-within .wp-block-read-more{color:var(--wp--preset--color--students-hover) !important;} /* keyboard parity with hover */ body.search .wp-block-post-template > li:focus-within, .gw-news-card:focus-within, .home .wp-block-query .wp-block-post > .wp-block-group:focus-within{outline:2px solid var(--wp--preset--color--primary);outline-offset:3px;} body.search .wp-block-post-template > li .wp-block-post-title a:focus, .gw-news-card .wp-block-post-title a:focus, .home .wp-block-query .wp-block-post > .wp-block-group .wp-block-post-title a:focus{outline:none;} /* anything that must stay separately clickable sits above the overlay */ body.search .wp-block-post-template > li .wp-block-post-terms a, .gw-news-card .wp-block-post-terms a, .home .wp-block-query .wp-block-post > .wp-block-group .wp-block-post-terms a{position:relative;z-index:2;} /* the front-page announcement gains the same lift the news cards have */ .home .wp-block-query .wp-block-post > .wp-block-group{ transition:box-shadow 0.15s ease,transform 0.15s ease; } .home .wp-block-query .wp-block-post > .wp-block-group:hover, .home .wp-block-query .wp-block-post > .wp-block-group:focus-within{ box-shadow:0 10px 26px rgba(15,11,2,.09);transform:translateY(-3px); } /* news cards already lift; mirror it on keyboard focus */ .gw-news-card:focus-within{box-shadow:0 10px 26px rgba(15,11,2,.09);transform:translateY(-3px);} .gw-news-card:focus-within::before{opacity:1;} /* category marker: the link is stripped by the news script, leaving an inert span that keeps the chip look */ .gw-news-card .wp-block-post-terms .gw-term-static{ background:var(--wp--preset--color--students-tint); color:var(--wp--preset--color--secondary); padding:3px 9px;border-radius:3px;display:inline-block; } /* BGS stat cards: the plugin now defaults to 4px via --bgs-radius (1.20.7), so the override that used to live here is gone. Set --bgs-radius on .bgs-wrap if the site radius ever changes. */ /* === MILESTONES TIMELINE (Our History) === Replaces 15 inline declarations that were spread over the wrapper group, its seven entry groups and their seven year headings. Apply .gw-timeline to the wrapper only; everything below is derived from it. The rail is a ::before rather than a border-left so it can start at the first marker instead of overshooting above it. The marker's white box-shadow is what makes the rail appear to break at each year. The wrapper has no top border or padding, so the first entry's top margin would collapse THROUGH it and move the whole section instead of the entry. That is why :first-child is zeroed rather than reduced. The year sets no size of its own: the site h3 ramp (22px) supplies it, so only the margin and line-height are set here. */ .gw-timeline{position:relative;margin-top:var(--wp--preset--spacing--medium);padding-left:36px;} .gw-timeline::before{content:"";position:absolute;left:0;top:8px;bottom:0;width:2px;background:var(--wp--preset--color--primary);} .gw-timeline > .wp-block-group{position:relative;margin-top:30px;} .gw-timeline > .wp-block-group:first-child{margin-top:0;} .gw-timeline > .wp-block-group::before{content:"";position:absolute;top:8px;left:-40.5px;width:11px;height:11px;border-radius:50%;background:var(--wp--preset--color--secondary);box-shadow:0 0 0 4px var(--wp--preset--color--background);} .gw-timeline h3{margin-top:0;line-height:1.25;} /* === IMAGE CAPTIONS AND PORTRAITS === Standalone content images had no caption treatment of their own. The block default is 13px, centered, #555 — which matches neither the palette body color nor the left-aligned captions the statute gallery already uses on /foundation/our-history/the-act/. The rule below puts a lone image caption on the same footing as those per-scan captions (13px, left, body color, 11px above) so the two contexts read as one system rather than two. Gallery captions keep their own rules — see STATUTE GALLERY and LIGHTBOX CAPTION above. The direct-child selector deliberately does not reach inside a gallery, so nothing there changes. .gw-portrait supplies only the width and the clearance beneath. The float and its 36px gutter come from the block's own "Align right" setting, so no width and no float is ever written inline. The selector carries an element name (figure.gw-portrait) because core's own ".is-layout-flow > .alignright" is two classes; a single class would lose on cascade order. */ .entry-content > figure.wp-block-image > figcaption{margin:0;padding:11px 1px 0;color:var(--wp--preset--color--body);font-size:13px;line-height:1.5;text-align:left;} .entry-content > figure.gw-portrait{width:288px;max-width:100%;margin-bottom:24px;} .gw-portrait img{display:block;width:100%;height:auto;border:1px solid var(--wp--preset--color--outline);background:var(--wp--preset--color--background);} /* A floated portrait is normally taller than the copy beside it, so block-level boxes that follow must start on a clean line instead of sliding under the photo. Without this the panel on Who Was Barry Goldwater? keeps its full width and runs beneath the image. */ .entry-content > .gw-portrait ~ .wp-block-group, .entry-content > .gw-portrait ~ h2{clear:both;} @media (max-width:700px){ .entry-content > figure.gw-portrait{float:none;width:100%;margin-left:0;} } /* ============================================================ CATEGORY MARKERS ON SEARCH RESULTS Search results carry a bare post-terms block with no .gw-news-card ancestor, so none of the news-card chip rules reached it. The term link is also stripped to an inert .gw-term-static span by the same script that runs on the news index, so both the anchor and the span are covered and the chip survives either way. ============================================================ */ body.search .wp-block-post-terms{font:600 11px Inter,sans-serif;text-transform:uppercase;letter-spacing:1.5px;margin:0;} body.search .wp-block-post-terms a, body.search .wp-block-post-terms .gw-term-static{display:inline-block;background:var(--wp--preset--color--students-tint);color:var(--wp--preset--color--secondary);padding:3px 9px;border-radius:3px;text-decoration:none;} body.search .wp-block-post-terms a:hover{background:var(--wp--preset--color--primary);color:var(--wp--preset--color--heading);} /* ============================================================ STYLE GUIDE (/style-guide/, private) Permanent documentation. Two rules kept it small: 1. The guide demonstrates rather than describes. Every component on those pages uses the site's own classes, so if a component changes the guide changes with it and cannot quietly lie. 2. Nothing here restates a color. Section demos re-point the same three custom properties the sections themselves use, and the swatches are filled from the palette presets, so a change in theme.json flows through to the guide untouched. Everything is prefixed sg- and used only inside the style guide. ============================================================ */ /* Section scopes: reproduce a section's theming outside that section. These mirror the body:is(.parent-pageid-NN) rules above — same variables, same presets, so the two cannot drift apart. */ .sg-scope--students{--gw-callout-wash:var(--wp--preset--color--students-light);--gw-callout-rule:var(--wp--preset--color--students-accent);--gw-step-color:var(--wp--preset--color--students-accent);} .sg-scope--letter-writers{--gw-callout-wash:var(--wp--preset--color--letter-writers-light);--gw-callout-rule:var(--wp--preset--color--letter-writers-accent);--gw-step-color:var(--wp--preset--color--letter-writers-accent);} .sg-scope--campus-reps{--gw-callout-wash:var(--wp--preset--color--campus-reps-light);--gw-callout-rule:var(--wp--preset--color--campus-reps-accent);--gw-step-color:var(--wp--preset--color--campus-reps-accent);} .sg-scope--scholars{--gw-callout-wash:var(--wp--preset--color--scholars-light);--gw-callout-rule:var(--wp--preset--color--scholars-accent);--gw-step-color:var(--wp--preset--color--scholars-accent);} /* A demo stage: the reader has to be able to see where the example starts and stops, or the page reads as ordinary content. */ /* The top margin is the theme's own block gap, not a number picked here: these boxes sit in the flow with everything else, and WordPress's layout rule (margin-block-start on .is-layout-flow > *) has the same specificity as a class, so a margin shorthand starting at 0 silently wins and the box collides with the paragraph above it. Bottom stays tight because .sg-spec is meant to read as a caption attached to the box. */ .sg-demo{border:1px solid var(--wp--preset--color--outline);border-radius:4px;padding:20px 22px;margin:var(--wp--preset--spacing--x-small) 0 8px;background:var(--wp--preset--color--background);} .sg-demo > *:first-child{margin-top:0;} .sg-demo > *:last-child{margin-bottom:0;} .sg-demo-label{display:block;font:600 10px/1 Inter,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--wp--preset--color--neutral);margin:0 0 8px;} /* What a reader most needs to know about each item. */ .sg-tag{display:inline-block;font:600 10px/1.6 Inter,sans-serif;letter-spacing:1.1px;text-transform:uppercase;padding:3px 9px;border-radius:3px;} .sg-tag--default{background:var(--wp--preset--color--surface);color:var(--wp--preset--color--neutral);} .sg-tag--class{background:var(--wp--preset--color--students-tint);color:var(--wp--preset--color--secondary);} .sg-tag--new{background:var(--wp--preset--color--scholars-light);color:var(--wp--preset--color--scholars-accent);} .sg-spec{font:400 13px/1.6 Inter,sans-serif;color:var(--wp--preset--color--neutral);margin:0 0 22px;} .sg-spec code,.sg-code{font:500 12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--wp--preset--color--surface);padding:2px 6px;border-radius:3px;color:var(--wp--preset--color--secondary);} /* Palette. Chips carry no hex of their own — one class per preset slug. */ .sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px;margin:var(--wp--preset--spacing--x-small) 0 24px;} .sg-swatch{border:1px solid var(--wp--preset--color--outline);border-radius:4px;overflow:hidden;} .sg-swatch-chip{display:block;height:66px;} .sg-swatch-name{display:block;font:600 11px/1.4 ui-monospace,Menlo,monospace;color:var(--wp--preset--color--heading);padding:8px 10px 2px;} .sg-swatch-note{display:block;font:400 11px/1.5 Inter,sans-serif;color:var(--wp--preset--color--neutral);padding:0 10px 9px;} .sg-chip--primary{background:var(--wp--preset--color--primary);} .sg-chip--secondary{background:var(--wp--preset--color--secondary);} .sg-chip--tertiary{background:var(--wp--preset--color--tertiary);} .sg-chip--quaternary{background:var(--wp--preset--color--quaternary);} .sg-chip--background{background:var(--wp--preset--color--background);} .sg-chip--surface{background:var(--wp--preset--color--surface);} .sg-chip--outline{background:var(--wp--preset--color--outline);} .sg-chip--heading{background:var(--wp--preset--color--heading);} .sg-chip--body{background:var(--wp--preset--color--body);} .sg-chip--neutral{background:var(--wp--preset--color--neutral);} .sg-chip--students-accent{background:var(--wp--preset--color--students-accent);} .sg-chip--students-light{background:var(--wp--preset--color--students-light);} .sg-chip--students-tint{background:var(--wp--preset--color--students-tint);} .sg-chip--letter-writers-accent{background:var(--wp--preset--color--letter-writers-accent);} .sg-chip--letter-writers-tint{background:var(--wp--preset--color--letter-writers-tint);} .sg-chip--letter-writers-light{background:var(--wp--preset--color--letter-writers-light);} .sg-chip--campus-reps-accent{background:var(--wp--preset--color--campus-reps-accent);} .sg-chip--campus-reps-light{background:var(--wp--preset--color--campus-reps-light);} .sg-chip--campus-reps-tint{background:var(--wp--preset--color--campus-reps-tint);} .sg-chip--scholars-accent{background:var(--wp--preset--color--scholars-accent);} .sg-chip--scholars-light{background:var(--wp--preset--color--scholars-light);} .sg-chip--scholars-tint{background:var(--wp--preset--color--scholars-tint);} .sg-chip--info{background:var(--wp--preset--color--info);} .sg-chip--warning{background:var(--wp--preset--color--warning);} .sg-chip--success{background:var(--wp--preset--color--success);} .sg-chip--error{background:var(--wp--preset--color--error);} .sg-chip--students-hover{background:var(--wp--preset--color--students-hover);} .sg-chip--letter-writers-hover{background:var(--wp--preset--color--letter-writers-hover);} .sg-chip--campus-reps-hover{background:var(--wp--preset--color--campus-reps-hover);} .sg-chip--scholars-hover{background:var(--wp--preset--color--scholars-hover);} /* Swatch chips: one class per preset shown on the Color page */ .sg-chip--primary-hover{background:var(--wp--preset--color--primary-hover);} .sg-chip--fill{background:var(--wp--preset--color--fill);} .sg-chip--wash{background:var(--wp--preset--color--wash);} .sg-chip--foreground{background:var(--wp--preset--color--foreground);} .sg-chip--chart-gold-light{background:var(--wp--preset--color--chart-gold-light);} .sg-chip--chart-teal-light{background:var(--wp--preset--color--chart-teal-light);} .sg-chip--chart-green-light{background:var(--wp--preset--color--chart-green-light);} .sg-chip--chart-plum-light{background:var(--wp--preset--color--chart-plum-light);} .sg-chip--chart-stone-light{background:var(--wp--preset--color--chart-stone-light);} /* One row per section on the Color page, so the sets read as sets. */ .sg-swatches--row{grid-template-columns:repeat(4,1fr);} /* ============================================================ TYPE RAMP: H3 AND H4 The whole ladder in one place. h1 comes from the template, h2 is 26px in the global styles; the two levels below them are set here. h3 is 22px Playfair 500 with margins 26px above and 6px below. Asymmetric on purpose: a subsection heading belongs to the text beneath it, so it groups with what it introduces rather than floating between two blocks. Both selectors are heavier than they look, for one reason worth knowing before editing either. This stylesheet loads AFTER the theme.json styles on the front end but BEFORE them in the block editor, so a plain element selector wins on the site and loses in the editor, where headings then render at the old clamp(28px, 3.6vw, 36px). The :root prefix outranks theme.json in both places without !important. Two things it deliberately does not outrank: WordPress's own :root :where(.is-layout-*) > :first-child rule, which zeroes the top margin of a heading that opens a container, and the component rules further down (timeline years, chart card labels) which set their own sizes. Anything that has to beat a block attribute — spacing WordPress writes inline from the editor's own controls — needs !important, because an inline style outranks every selector. The status eyebrow rule is the one example in here. Without the h4 rule the global styles leave it at clamp(24px, 3vw, 28px) semi-bold, at or above h2 (a fixed 26px). Set in Inter rather than Playfair on purpose: the serif carries the two levels above it, and switching to the sans at this level separates a minor heading from a section heading by more than size alone. ============================================================ */ /* Sizes, weights and letter spacing for h3 and h4 now live in theme.json under styles.elements, so the block editor gets them as defaults rather than losing a specificity tie. Margins have to stay here: WordPress writes its own flow margins as :root :where(.is-layout-flow) > * at 0,1,0, which outranks the bare element rule theme.json emits at 0,0,1. Keep the two files in step — the values below are duplicated in theme.json so the editor shows the same spacing. */ :root body h3 { margin-top: 26px; margin-bottom: 6px; } .entry-content h4, .wp-block-post-content h4 { margin-top: 22px; margin-bottom: 6px; } /* The portrait rule is scoped to a direct child of the content area (.entry-content > figure.gw-portrait), so inside a demo stage it would render full width and document the wrong thing. This teaches the demo stage to behave like the content area for that one component; the page itself states the constraint so nobody copies the nesting. */ .sg-demo > figure.gw-portrait{width:288px;margin-bottom:24px;} @media (max-width:700px){.sg-demo > figure.gw-portrait{float:none;width:100%;margin-left:0;}} /* The audience palette, in one place. --gw-sec is the accent and --gw-wash the tint; a search result carries gw-sec-- from PHP and a style-guide demo carries sg-scope--, so both read the same two declarations rather than each keeping a copy. Nothing here hard-codes a color. */ .gw-sec--students,.sg-scope--students{--gw-sec:var(--wp--preset--color--students-accent);--gw-wash:var(--wp--preset--color--students-light);} .gw-sec--letter-writers,.sg-scope--letter-writers{--gw-sec:var(--wp--preset--color--letter-writers-accent);--gw-wash:var(--wp--preset--color--letter-writers-light);} .gw-sec--campus-reps,.sg-scope--campus-reps{--gw-sec:var(--wp--preset--color--campus-reps-accent);--gw-wash:var(--wp--preset--color--campus-reps-light);} /* The Scholars audience was called "awardees" internally until 11 August 2026, in the palette slugs, this stylesheet and the style guide, while gw_search_section() in functions.php emitted "scholars" - so this selector could never match and search results from that section rendered with no tint. Renamed throughout. Deliberately no .gw-sec--impact rule: Impact gets no section colour. */ .gw-sec--scholars,.sg-scope--scholars{--gw-sec:var(--wp--preset--color--scholars-accent);--gw-wash:var(--wp--preset--color--scholars-light);} /* A demo stage tinted with the section's own wash, so section badges and icons are shown against the background they actually sit on. */ .sg-stage{background:var(--gw-wash,var(--wp--preset--color--surface));} .sg-swatch-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;} .sg-num{font:400 26px/1.15 "Playfair Display",Georgia,serif;color:var(--gw-step-color,var(--wp--preset--color--secondary));} /* ============================================================ TITLE-AREA EYEBROW A small label above a page title, in the banner. The section eyebrows ("For Letter Writers" and its siblings) are drawn as h1.wp-block-post-title::before, so their metrics live in the TITLEBAND section. This class reproduces those metrics exactly — Inter 700 at 14px/24px, letter-spacing 1.68px, a 23px glyph at 31px of left padding, 3px above the title — so a label written by the template is indistinguishable from a section eyebrow. Written by the template rather than by an author, so it cannot drift out of sync with the thing it reports. Private is the only variant so far; the base class exists so the next one does not arrive as another one-off. A private page inside a section shows both: this element sits before the h1, the section eyebrow is drawn inside it, so Private stacks on top at the same rhythm. ============================================================ */ .gw-page-eyebrow { display: flex; align-items: center; /* 22px between chips: wide enough to read as separate flags, tight enough that two of them still look like one line rather than a list. */ gap: 22px; height: 24px; margin: 0 0 3px; font-family: Inter, sans-serif; font-weight: 700; font-size: 14px; line-height: 24px; letter-spacing: 1.68px; text-transform: uppercase; } /* Each chip is icon plus label, on the same 31px indent the section eyebrows use so the icons line up down the page. */ .gw-eyebrow-chip { display: block; padding-left: 31px; background-repeat: no-repeat; background-position: 0 50%; background-size: 23px 23px; white-space: nowrap; } /* Private is a visibility fact and keeps the section accent. The three unpublished states share the warning color: they all mean the same thing to a reader — this page is not live yet. */ .gw-eyebrow-chip--private { color: var( --wp--preset--color--secondary ); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%2375601B'%3E%3Cpath d='M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm240-200q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80Z'/%3E%3C/svg%3E"); } .gw-eyebrow-chip--draft, .gw-eyebrow-chip--pending, .gw-eyebrow-chip--scheduled { color: var( --wp--preset--color--warning ); } .gw-eyebrow-chip--draft { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23b45309'%3E%3Cpath d='m499-287 335-335-52-52-335 335 52 52Zm-261 87q-100-5-149-42T40-349q0-65 53.5-105.5T242-503q39-3 58.5-12.5T320-542q0-26-29.5-39T193-600l7-80q103 8 151.5 41.5T400-542q0 53-38.5 83T248-423q-64 5-96 23.5T120-349q0 35 28 50.5t94 18.5l-4 80Zm280 7L353-358l382-382q20-20 47.5-20t47.5 20l70 70q20 20 20 47.5T900-575L518-193Zm-159 33q-17 4-30-9t-9-30l33-159 165 165-159 33Z'/%3E%3C/svg%3E"); } .gw-eyebrow-chip--pending { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23b45309'%3E%3Cpath d='M538.5-138.5Q480-197 480-280t58.5-141.5Q597-480 680-480t141.5 58.5Q880-363 880-280t-58.5 141.5Q763-80 680-80t-141.5-58.5ZM747-185l28-28-75-75v-112h-40v128l87 87Zm-547 65q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v250q-18-13-38-22t-42-16v-212h-80v120H280v-120h-80v560h212q7 22 16 42t22 38H200Zm308.5-651.5Q520-783 520-800t-11.5-28.5Q497-840 480-840t-28.5 11.5Q440-817 440-800t11.5 28.5Q463-760 480-760t28.5-11.5Z'/%3E%3C/svg%3E"); } .gw-eyebrow-chip--scheduled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23b45309'%3E%3Cpath d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z'/%3E%3C/svg%3E"); } /* The section eyebrows are drawn inside the title, so the title carries no gap above it. This one is a real element before the title, which makes the title a sibling and gives it the default block gap — 18px of daylight the section eyebrows never have. Collapse it so both read identically. */ .gw-page-eyebrow + h1.wp-block-post-title, .gw-page-eyebrow + .wp-block-post-title { /* !important is doing real work here. The sidebar template leaves the title's margin alone, but the default page template sets it as a block attribute, so it arrives as an inline style worth 72px and no selector can outrank it. The rule only matches a title that directly follows a status row, so an unflagged page keeps its spacing. */ margin-top: 0 !important; } /* Inside a query loop the same eyebrow is a card label, not a page banner: it sits above an h2 alongside the 11px section chips on search results, so it takes their size and rhythm. The lock is kept — it is what makes the label read at a glance — scaled to the smaller line. */ .gw-page-eyebrow--compact { height: 18px; margin: 0 0 6px; gap: 14px; font-size: 11px; line-height: 18px; letter-spacing: 1.1px; } .gw-page-eyebrow--compact .gw-eyebrow-chip { padding-left: 24px; background-size: 17px 17px; } /* ============================================================ TABLET NAVIGATION Both menus run in their collapsed form up to 1050px. Seven top-level items need 956px to stay on one row at the tightened gap below, and the 26% sidebar column is unusable near the same width, so one breakpoint governs three: the primary overlay trigger, the section bar (whose presentation rules above now run to 1050px), and stacking of the sidebar columns. Core triggers its own overlay at 600px, so the two rules below re-assert it from 600 to 1050. ============================================================ */ /* Row spacing. The Impact split made seven top-level items; their labels measure 776px together, so the row only fits if the gaps do. At 1051px — the narrowest desktop — 964px is available, capping the gap at 31px; the old 54px wrapped the row onto two lines. From 1200px the content column is capped at 1100px and 44px still leaves 60px spare, so wide screens keep a looser row. Measured at 1051, 1120, 1200 and 1600. */ @media (min-width:1051px){header .primary-nav .wp-block-navigation__container{gap:44px}} @media (min-width:1051px) and (max-width:1199px){header .primary-nav .wp-block-navigation__container{gap:30px}} @media (min-width:600px) and (max-width:1050px){ header .primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex} /* Core has its own @media (min-width:600px) rule that puts the panel back in the flow (position:relative, z-index:auto, background:inherit) and outranks the panel rules above, 0,3,0 to 0,2,1. Hand those four properties back so the drop panel behaves here exactly as it does on a phone. */ header .primary-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){position:fixed;width:auto;z-index:9980;background-color:var(--wp--preset--color--tertiary)} /* scroll lock travels with the panel, not with phone widths */ html.gw-mnav-open{overflow:hidden} /* the burger takes the right edge of its row, under the search icon, so it reads the same way as the section bar burger below it */ header .primary-nav .wp-block-navigation__responsive-container-open{margin-left:auto;margin-right:0} /* with the utility bar hidden, the burger moves up onto the logo row and the row it used to occupy collapses, taking 30px of dead space with it */ header .wp-block-group.has-tertiary-background-color{position:relative; /* clears the logo from the gold line and centers the hamburger; !important against the band's inline padding-bottom:0 block attribute. Desktop menu spacing lives in the header template part (4px above, 16px below). */ padding-bottom:14px !important; } header .wp-block-group:has(> .primary-nav){padding-top:0 !important;padding-bottom:0 !important;position:static} /* Both burgers are inset by the site gutter so they land on the same vertical line. Neither element uses viewport units: vw includes the scrollbar and sits ~8px off on any scrolling page. */ header .primary-nav{ justify-content:flex-end; position:absolute; top:36px; right:var(--wp--preset--spacing--x-small); width:auto; } } @media (max-width:1050px){ /* sidebar pages: stack the nav column above the body so the section bar can run full width, the same way core stacks columns below 782px */ /* utility bar: the Campus Rep Login button and the search icon (both inside .wp-block-buttons) belong to the panel at this width, which carries its own search field and login button */ header .wp-block-buttons{display:none} .wp-block-columns:has(> .wp-block-column > .section-sidebar-nav){flex-wrap:wrap !important} .wp-block-columns:has(> .wp-block-column > .section-sidebar-nav) > .wp-block-column{flex-basis:100% !important} } /* ~~~~~~~~~~~~ ON THIS PAGE OUTLINE ~~~~~~~~~~~~ Nested inside the current item of the section menu, so it borrows the menu indent language. The whole menu sticks, but only while it fits the viewport: the outline never scrolls inside itself. Desktop only; labels clamp to two lines with the full heading on hover. Hover color comes from --gw-accent-hover via the global link rule. */ :where(h2,h3)[id]{scroll-margin-top:24px} @media (max-width:1050px){:where(h2,h3)[id]{scroll-margin-top:96px}} .gw-tocnav{list-style:none;margin:0;padding:0 0 6px} .gw-tocnav li{margin:0} .gw-tocnav a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;line-height:1.35;padding:4px 12px 4px 28px;text-decoration:none;color:var(--wp--preset--color--body);border-left:2px solid transparent} .gw-tocnav li.lvl3 a{padding-left:40px;font-size:12.5px} /* section menus color their links per audience with !important, so the outline states need the same weight: body gray at rest, audience hover, accent bar when current */ main .section-sidebar-nav .gw-tocnav a{color:var(--wp--preset--color--body) !important} main .section-sidebar-nav .gw-tocnav a:hover{color:var(--gw-accent-hover) !important} main .section-sidebar-nav .gw-tocnav a.is-current{color:var(--wp--preset--color--heading) !important;font-weight:600 !important} .gw-tocnav a.is-current{border-left-color:var(--gw-step-color,var(--wp--preset--color--secondary));color:var(--wp--preset--color--heading);background:var(--wp--preset--color--background)} .section-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(.gw-tocnav)::after{top:16px;transform:none} @media (min-width:1051px){.section-sidebar-nav.gw-can-stick{position:sticky;top:var(--gw-stick-top,40px);transition:top 0.15s ease}} @media (max-width:1050px){.gw-tocnav{display:none} /* No menu fade while the window is resizing: crossing the 1050px breakpoint otherwise shows the closed overlay fading out for a quarter second, because its hidden state is opacity/visibility with a transition. The gw-resizing class is set by the mobile nav script during live resize and removed 200ms after the last resize event. */ html.gw-resizing header .primary-nav .wp-block-navigation__responsive-container{transition:none !important;} } /* Search block button (Section 508): global styles gave it white text on the gold fill, 1.9:1. Dark text matches the site's other gold buttons and reads at 12.5:1. */ .wp-block-search .wp-block-search__button, .wp-block-search .wp-block-search__button:hover{color:var(--wp--preset--color--heading);} /* ============================================================ SCHOLAR STORIES AND NEWS CARD IMAGES News cards may carry a featured image: the featured (first, full-width) card shows it left at 25% stretched to the text block with a 205px floor and keeps its teaser; two-column cards show it left at 41% and drop the teaser. Category pills and dates never wrap; on image cards the meta row wraps as whole units, so the date drops to its own line only when space runs out. Below 782px image cards stack, image on top. Scholar Story posts get an in-column hero and a sticky rail of other stories; the rail follows the news-card hover language (hairline at rest, gold top accent + lift on hover). ============================================================ */ .gw-news-card .gw-news-thumb{margin:0} .gw-news-card .gw-news-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px} .gw-news-card:has(.gw-news-thumb img){display:flex;flex-direction:row;gap:20px;align-items:flex-start} .gw-news-card:has(.gw-news-thumb img) > .gw-news-body{flex:1 1 auto;min-width:0} .gw-news-card .gw-news-thumb a{display:block;height:100%} /* the featured-image block renders an is-placeholder figure when a post has no image; the card must look exactly as it did before images existed */ .gw-news-card .is-placeholder{display:none !important} .gw-news-card > a:has(> .is-placeholder){display:none} .wp-block-post-template li:first-child .gw-news-card:has(.gw-news-thumb img){align-items:stretch} .wp-block-post-template li:first-child .gw-news-card .gw-news-thumb{flex:0 0 25%;min-height:205px} .wp-block-post-template li:not(:first-child) .gw-news-card .gw-news-thumb{flex:0 0 41%;aspect-ratio:4/3} .wp-block-post-template li:not(:first-child) .gw-news-card:has(.gw-news-thumb img) .wp-block-post-excerpt{display:none} .gw-news-card .taxonomy-category a, .gw-news-card time{white-space:nowrap} .gw-news-card:has(.gw-news-thumb img) .gw-news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px} @media (max-width:781px){ .gw-news-card:has(.gw-news-thumb img){flex-direction:column;align-items:stretch} .gw-news-card .gw-news-thumb{flex:none !important;min-height:0 !important;aspect-ratio:16/9 !important} } body.gw-scholar-story .gw-featured-image{display:none} .gw-story-layout{display:flex;gap:40px;align-items:flex-start} .gw-story-main{flex:1 1 auto;min-width:0} .gw-story-main .gw-story-hero{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:4px;margin:0} /* The rail starts 33px below the top of the hero image. */ .gw-story-rail{flex:0 0 280px;position:sticky;top:40px;margin-top:33px} .gw-story-raillabel{font-family:Inter,sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--secondary);margin:0 0 14px} .gw-story-railcard{position:relative;display:block;background:var(--wp--preset--color--background);border:1px solid var(--wp--preset--color--outline);border-radius:6px;padding:10px;margin:0 0 12px;text-decoration:none !important;transition:transform 0.15s ease,box-shadow 0.15s ease} .gw-story-railcard::before{content:"";position:absolute;inset:-1px;border-radius:7px;border-top:3px solid transparent;transition:border-top-color 0.15s ease;pointer-events:none} .gw-story-railcard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,11,2,.09)} .gw-story-railcard:hover::before{border-top-color:var(--wp--preset--color--primary)} .gw-story-railcard img{display:block;width:100%;height:140px;object-fit:cover;border-radius:4px} .gw-story-railtitle{display:block;font-family:"Playfair Display",serif;font-weight:500;font-size:15px;line-height:1.35;color:var(--wp--preset--color--heading);padding:10px 2px 4px} .gw-story-railall{display:block;text-align:center;font-family:Inter,sans-serif;font-weight:600;font-size:13px;color:var(--wp--preset--color--secondary);padding:10px;text-decoration:none} @media (max-width:1050px){ .gw-story-layout{flex-direction:column} .gw-story-rail{position:static;margin-top:0;flex:none;width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:stretch} .gw-story-raillabel,.gw-story-railall{grid-column:1/-1} .gw-story-railcard{margin:0} } /* ============================================================ SCHOLAR STORIES PAGE (/scholars/scholar-stories/, page 1367) No sidebar. Top half is a 50/50 split: the lead story image rides up into the title band on the left, the page title and a white intro box sit on the right with the box overlapping the band bottom. Below: three quiet links to the other Scholars pages, then a three-column card grid and the pager. Type is deliberately borrowed wholesale from the News cards so the site keeps one card vocabulary: lead title = h2/featured-card (29px/34.8, -1px), card title 20px/26 -1px, excerpt 15.5px, date 12.5px +.25px in neutral, eyebrow = the institution eyebrow spec, read-more = the core .wp-block-read-more treatment. Insets come from the News card (28/32), and the column gutter matches that inset so the space between the two columns equals the space inside the box. ============================================================ */ /* --- top section ------------------------------------------------- */ /* One H1, left where the template puts it, shifted across to line up with the intro text. Core pins margin-left:auto!important on constrained children so the offset must be padding, and a percentage would resolve against the wrong box — hence half the content width, plus half the gutter, plus the box inset, in px. */ /* Desktop only. The 630px offset aligns the title with the intro text in the two-column top section; once the columns stack there is nothing to align to, and the padding pushed the title off a phone screen entirely (843px band, horizontal overflow) and squeezed it to a sliver on tablet. */ @media (min-width:1051px){ body.gw-stories-page .wp-block-group.has-quaternary-background-color .wp-block-post-title{padding-left:calc(var(--wp--style--global--content-size) / 2 + 48px)} } /* The section is pulled up into the band, which paints its own background over anything that merely overlaps it — so the section needs its own stacking context to sit on top. */ body.gw-stories-page .gw-stories-top{display:flex;gap:32px;align-items:flex-start;margin:0 0 40px;position:relative;z-index:1} /* Equal halves; negative pulls lift the section into the band so the lead image starts 40px below the band top and the intro box overlaps the band bottom by 40px. The two pulls differ because the columns start at different heights — the lead leads with an image, the aside with the heading. */ body.gw-stories-page .gw-stories-lead{flex:0 0 calc(50% - 16px);min-width:0;margin-top:-270px} body.gw-stories-page .gw-stories-aside{flex:0 0 calc(50% - 16px);min-width:0;margin-top:-112px} /* --- lead story (no card chrome) --------------------------------- */ .gw-stories-lead a{text-decoration:none !important} .gw-stories-lead .wp-block-post-featured-image{margin:0;position:relative;overflow:hidden;border-radius:4px} .gw-stories-lead .wp-block-post-featured-image img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px} /* gold bar wipes across the foot of the image on hover */ .gw-stories-lead .wp-block-post-featured-image::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--wp--preset--color--primary);transform:scaleX(0);transform-origin:left;transition:transform 0.15s ease;pointer-events:none} .gw-stories-lead:hover .wp-block-post-featured-image::after{transform:scaleX(1)} .gw-stories-lead .gw-scholar-school{margin:14px 2px 6px} .gw-stories-lead .wp-block-post-title{font-size:29px;line-height:34.8px;letter-spacing:-1px;margin:0 2px 6px} .gw-stories-lead .wp-block-post-title a{color:var(--wp--preset--color--heading) !important;transition:color 0.15s ease} .gw-stories-lead:hover .wp-block-post-title a{color:var(--gw-accent-hover) !important} .gw-stories-lead .wp-block-post-date{font-size:12.5px;letter-spacing:.25px;color:var(--wp--preset--color--neutral);margin:0 2px 10px} .gw-stories-lead .wp-block-post-excerpt{margin:0 2px} .gw-stories-lead .wp-block-post-excerpt p{font-size:15.5px;line-height:1.65;margin:0} .gw-stories-lead .wp-block-read-more{margin-top:12px} /* --- title + intro box ------------------------------------------- */ /* Same trap as the cards: the parent theme zeroes horizontal padding on flow groups at (0,3,0), so the inset needs (0,4,0) to survive. */ .gw-stories-introbox.wp-block-group.is-layout-flow{background:var(--wp--preset--color--background);border-radius:6px;padding:28px 32px} .gw-stories-introbox p{font-size:15.5px;line-height:1.65;margin:0} /* --- quiet rows to the other Scholars pages ---------------------- */ .gw-stories-links{margin:18px 0 0;border-top:1px solid var(--wp--preset--color--outline)} .gw-stories-link{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 8px;margin:0 -8px;border-bottom:1px solid var(--wp--preset--color--outline);border-radius:4px;text-decoration:none !important;transition:background 0.15s ease} .gw-stories-link:hover{background:var(--gw-title-band)} .gw-stories-link-t{font-family:"Playfair Display",serif;font-weight:500;font-size:17px;color:var(--wp--preset--color--heading) !important;transition:color 0.15s ease} .gw-stories-link-d{flex:1;text-align:right;font-family:Inter,sans-serif;font-size:12.5px;letter-spacing:.25px;color:var(--wp--preset--color--neutral) !important;transition:color 0.15s ease} .gw-stories-link .gw-stories-ar{font-size:15px;color:var(--wp--preset--color--secondary) !important;transition:transform 0.15s ease,color 0.15s ease} .gw-stories-link:hover .gw-stories-link-t, .gw-stories-link:hover .gw-stories-link-d, .gw-stories-link:hover .gw-stories-ar{color:var(--gw-accent-hover) !important} .gw-stories-link:hover .gw-stories-ar{transform:translateX(4px)} /* --- card grid ---------------------------------------------------- */ .gw-scholar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} /* Cards fill their row: the grid item stretches, the card fills it, and the read-more is pushed to the foot with margin-top:auto — the same mechanism the News cards use, so rows stay even however long a title runs. */ /* The flow rule :root :where(.is-layout-flow) > * puts an 18px block-start margin on every list item after the first, which eats into the grid row and drops those cards 18px — they look bottom-aligned and shorter. Zeroing it here is what actually equalises the rows. */ .gw-scholar-grid > li{display:flex;margin:0} .gw-scholar-grid .gw-scholar-card{position:relative;height:100%;display:flex;flex-direction:column;background:var(--wp--preset--color--background);border:1px solid var(--wp--preset--color--outline);border-radius:6px;transition:transform 0.15s ease,box-shadow 0.15s ease} /* Parent theme zeroes horizontal padding on flow groups at (0,3,0), so the card inset needs (0,4,0) to hold on the front end and in the editor. */ .gw-scholar-grid .gw-scholar-card.wp-block-group.is-layout-flow{padding:12px} .gw-scholar-card::before{content:"";position:absolute;inset:-1px;border-radius:7px;border-top:3px solid transparent;transition:border-top-color 0.15s ease;pointer-events:none} .gw-scholar-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,11,2,.09)} .gw-scholar-card:hover::before{border-top-color:var(--wp--preset--color--primary)} .gw-scholar-card .gw-scholar-thumb{margin:0} .gw-scholar-card .gw-scholar-thumb a{display:block} .gw-scholar-card .gw-scholar-thumb img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px} .gw-scholar-card .gw-scholar-school{margin:10px 2px 4px} .gw-scholar-card .wp-block-post-title{font-size:20px;line-height:26px;letter-spacing:-1px;margin:0 2px 6px} .gw-scholar-card .wp-block-post-title a{color:var(--wp--preset--color--heading) !important;transition:color 0.15s ease} .gw-scholar-card:hover .wp-block-post-title a{color:var(--gw-accent-hover) !important} .gw-scholar-card .wp-block-post-date{font-size:12.5px;letter-spacing:.25px;color:var(--wp--preset--color--neutral);margin:0 2px 6px} .gw-scholar-card .wp-block-post-excerpt{margin:0 2px} /* Excerpts run their full length — no clamp. Equal row heights come from the grid and the read-more pinned with margin-top:auto, so a longer blurb makes the whole row taller rather than being cut off. */ .gw-scholar-card .wp-block-post-excerpt p{font-size:15.5px;line-height:1.55;margin:0} /* Read-more: the sized, arrowed treatment lived only inside .gw-news-card, so these pages had unstyled links. Same values, same arrow, same hover. */ body.gw-stories-page .wp-block-read-more{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--wp--preset--color--secondary)} body.gw-stories-page .wp-block-read-more::after{content:"\2192";transition:transform 0.15s ease} body.gw-stories-page .gw-scholar-card:hover .wp-block-read-more::after, body.gw-stories-page .gw-stories-lead:hover .wp-block-read-more::after{transform:translateX(3px)} body.gw-stories-page .gw-scholar-card:hover .wp-block-read-more, body.gw-stories-page .gw-stories-lead:hover .wp-block-read-more{color:var(--gw-accent-hover)} .gw-scholar-card .wp-block-read-more{margin:8px 2px 2px;margin-top:auto} /* --- responsive --------------------------------------------------- */ @media (max-width:1050px){ .gw-scholar-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* The page uses the sidebar template purely so the section menu exists: the mobile script builds the section bar and hamburger from .section-sidebar-nav, and this page wants that menu on small screens like every other section page. On desktop the sidebar column is hidden and the content column spans the full width, which is the layout the design was built against. */ body.gw-stories-page .wp-block-columns:has(.section-sidebar-nav){display:block} body.gw-stories-page .wp-block-columns:has(.section-sidebar-nav) > .wp-block-column:first-child{display:none} body.gw-stories-page .wp-block-columns:has(.section-sidebar-nav) > .wp-block-column:last-child{width:100%;flex-basis:100%;max-width:none} @media (max-width:1050px){ /* Below the sidebar breakpoint the section menu returns, so show its column again and let the theme collapse it into the bar + hamburger. */ body.gw-stories-page .wp-block-columns:has(.section-sidebar-nav) > .wp-block-column:first-child{display:block} /* Below 1050px the sidebar collapses site-wide, and with it the two-column top section: the title's alignment offset is gone, so the columns stack. Reading order becomes title, intro, feature — the aside is moved ahead of the lead with flex order so the desktop DOM (feature first) is untouched. The Impact/Directory rows are hidden because the section hamburger covers navigation here and the rows would only push the stories down. */ body.gw-stories-page .gw-stories-top{flex-direction:column;gap:24px} body.gw-stories-page .gw-stories-aside{order:1;flex:none;width:100%;margin-top:0} body.gw-stories-page .gw-stories-lead{order:2;flex:none;width:100%;margin-top:0} body.gw-stories-page .gw-stories-links{display:none} body.gw-stories-page .wp-block-group.has-quaternary-background-color{min-height:0} /* Stacked, the intro box no longer pushes up into the gray band, so its own 28/32 inset just double-pads the text against the page margins. Drop the horizontal inset (and the background, which is white on white) and let the copy line up with everything else in the column. */ body.gw-stories-page .gw-stories-introbox.wp-block-group.is-layout-flow{padding:0;background:none;border-radius:0} /* The query wrapper carries a 20px inline padding of its own, which left the cards indented 20px past the intro and the feature image once stacked. */ body.gw-stories-page .gw-scholar-stories{padding-left:0!important;padding-right:0!important} /* Stacked, the intro needs the same breathing room off the title band that the overview pages give their opening paragraph (67px there on mobile; the box already contributes 16px of the gap, so 16 more here). */ body.gw-stories-page .gw-stories-introbox{padding-top:16px!important} } @media (max-width:781px){ .gw-scholar-grid{grid-template-columns:minmax(0,1fr)} } /* Institution eyebrow. Class-based so the lead story, the cards and anything later can share it; spacing is set per context. */ .gw-scholar-school{font-family:Inter,sans-serif;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--wp--preset--color--secondary)} /* Scholar strip ([gw_scholar_strip], overview pages): five random story pictures and a Meet the Scholars link in one raised box. The whole box lifts on hover anywhere; each picture mini-lifts and the link lights up (global accent hover) only when directly hovered, so all read as discrete links. Below 782px the link wraps to its own line, right-aligned. */ .gw-scholar-strip{display:flex;align-items:center;gap:12px;padding:12px;margin:28px 0;background:var(--wp--preset--color--background);border:1px solid var(--wp--preset--color--outline);border-radius:8px;transition:transform 0.15s ease,box-shadow 0.15s ease} .gw-scholar-strip:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,11,2,.09)} .gw-strip-pic{display:block;flex:1 1 0;min-width:0;line-height:0;border-radius:4px;transition:transform 0.15s ease,box-shadow 0.15s ease} .gw-strip-pic:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(15,11,2,.14)} .gw-strip-pic img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:4px;display:block} .gw-strip-meet{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:0 6px;font-family:Inter,sans-serif;font-weight:600;font-size:14px;color:var(--wp--preset--color--heading);text-decoration:none !important;white-space:nowrap} .gw-strip-ar{font-size:16px;transition:transform 0.15s ease} .gw-strip-meet:hover .gw-strip-ar{transform:translateX(5px)} @media (max-width:781px){ .gw-scholar-strip{flex-wrap:wrap} .gw-strip-meet{width:100%;justify-content:flex-end;padding:4px 2px 0} } /* External-link buttons (Scholar Story posts, Read Full Story): the arrow icon gets a little air and rides slightly up; screen-reader text supplies the new-tab warning. */ .gw-ext-button .gw-ext-ic{display:inline-block;margin-left:7px;font-size:.9em;transform:translateY(-1px)} .gw-ext-button .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* Story design: the title band is a decorative gray backdrop. Its own title, date, and pill are hidden (they re-render in the article column via functions.php) and the hero rides up into the band, starting level with where the pill used to sit. The rail card image splits the band edge half-and-half (margin on .gw-story-rail above). Band bottom padding beats the template inline padding, hence the !important. Under 782px the band and pull shrink to suit a short image. */ body.gw-scholar-story .wp-block-group.has-quaternary-background-color:has(.wp-block-post-title){padding-bottom:272px !important} body.gw-scholar-story .wp-block-group.has-quaternary-background-color .wp-block-post-title, body.gw-scholar-story .wp-block-group.has-quaternary-background-color .wp-block-post-date, body.gw-scholar-story .wp-block-group.has-quaternary-background-color .wp-block-post-terms{display:none} body.gw-scholar-story .gw-story-layout{margin-top:-362px} .gw-story-figure{margin:0} .gw-story-caption{font-family:Inter,sans-serif;font-size:13px;line-height:1.5;color:var(--wp--preset--color--neutral);margin:10px 2px 0} .gw-story-title{margin:22px 0 10px;font-size:37px;line-height:1.3} .gw-story-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-family:Inter,sans-serif;font-size:14px;margin:0 0 26px} .gw-story-meta .gw-story-metapill{margin:0} .gw-story-inst{font-weight:600;color:var(--wp--preset--color--heading)} .gw-story-metasep,.gw-story-date{color:var(--wp--preset--color--neutral)} @media (max-width:781px){ body.gw-scholar-story .wp-block-group.has-quaternary-background-color:has(.wp-block-post-title){padding-bottom:160px !important} body.gw-scholar-story .gw-story-layout{margin-top:-250px} .gw-story-title{font-size:30px} } /* Front page hero slideshow: five Scholar Story pictures cross-fading behind the cover gradient. Each slide runs the same 30s animation offset by 6s, so one is always at full opacity while the next fades in. Deliberately no controls. Under reduced-motion the animation is dropped and the first slide simply stays put. */ .gw-hero-slides{position:absolute;inset:0;overflow:hidden;z-index:0} .gw-hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:gwHeroFade 30s linear infinite} /* hero-shuffle.js pauses the cycle until the fresh images have decoded, then holds the opening frame a beat before letting it run. */ .gw-hero-slides.gw-hero-hold .gw-hero-slide{animation-play-state:paused} /* Starts at full opacity so the hero is never blank on the first frame; slides carry negative delays so exactly one is visible at t=0. */ /* Hold at full opacity THROUGH the handover: the incoming slide finishes its 95-100% fade-in while the outgoing one is still solid, and only then does the outgoing slide drop (20-25%). A symmetric crossfade dips both slides to ~50% mid-fade and the pale cover bleeds through as a blank flash; at every instant at least one slide must be fully opaque. */ @keyframes gwHeroFade{0%{opacity:1}20%{opacity:1}25%{opacity:0}95%{opacity:0}100%{opacity:1}} @media (prefers-reduced-motion:reduce){ .gw-hero-slide{animation:none;opacity:0} .gw-hero-slide:first-child{opacity:1} } /* Scholar Stories pager: same chips as the News pager (Inter 14, 8x12, 4px radius, hairline outline, gold current page, left aligned, 6px gaps). Matching by declaration rather than by reusing .gw-pg, which is applied in the Blog Home template markup rather than by a filter. */ /* Infinite scroll: the Load more control. Same chip language as the pager it replaces (Inter 600 14, hairline, 4px radius) so nothing new is introduced. The status paragraph is for screen readers; it carries no visual weight. */ .gw-load-more{margin:28px 0 0;text-align:center} .gw-load-more-btn{font-family:Inter,sans-serif;font-weight:600;font-size:14px;line-height:1.2;padding:10px 18px;border:1px solid var(--wp--preset--color--outline);border-radius:4px;background:var(--wp--preset--color--background);color:var(--wp--preset--color--heading);cursor:pointer;transition:background 0.15s ease,color 0.15s ease} .gw-load-more-btn:hover{background:var(--gw-title-band);color:var(--gw-accent-hover)} .gw-load-more-btn[disabled]{opacity:.6;cursor:default} .gw-load-more-status{font-family:Inter,sans-serif;font-size:12.5px;color:var(--wp--preset--color--neutral);margin:10px 0 0;min-height:1em} .gw-scholar-pager{margin:18px 0 0;gap:6px;justify-content:flex-start} /* The infinite-scroll script hides the pager with the hidden attribute, but the block layout sets display:flex on this element and an author rule beats the browser's [hidden]{display:none}. Without this the pager stays visible underneath the Load more button. */ .gw-scholar-pager .wp-block-query-pagination-numbers{display:flex;gap:6px} .gw-scholar-pager .page-numbers, .gw-scholar-pager .wp-block-query-pagination-previous, .gw-scholar-pager .wp-block-query-pagination-next{display:inline-block;font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:1.2;padding:8px 12px;border:1px solid var(--wp--preset--color--outline);border-radius:4px;background:var(--wp--preset--color--background);color:var(--wp--preset--color--foreground);text-decoration:none !important} /* Explicit color: a Spectra rule paints the current page number in the primary gold, which on a gold chip is invisible. */ .gw-scholar-pager .page-numbers.current{font-weight:600;background:var(--wp--preset--color--primary);border-color:var(--wp--preset--color--secondary);color:var(--wp--preset--color--heading) !important} .gw-scholar-pager .page-numbers.dots{border-color:transparent;background:none} .gw-scholar-pager a:hover{background:var(--wp--preset--color--quaternary)} /* text-size-adjust defaults to auto, which lets iOS Safari font-boost wide, text-heavy blocks unevenly — the long Field of Study column in the directory looked larger than its neighbors on a phone. Set site-wide so every page renders at the authored size with no boosting. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* ============ MOBILE REFINEMENTS ============ Kept in arrival order: the 600-781 masthead offsets earlier in the file deliberately outrank the base top:50px sticky rule below by doubled-class specificity. */ /* ---- Sticky secondary/section menu on mobile + tablet ---- Admin-bar aware via var(--wp-admin--admin-bar--height): 46px mobile / 32px tablet for logged-in users, 0 for visitors. */ @media (min-width:782px) and (max-width:1050px){ /* 1050 = upper bound of the hamburger menus; sticky must cover the whole collapsed range */ .wp-site-blocks > header.wp-block-template-part{ position:sticky; top:var(--wp-admin--admin-bar--height, 0px); z-index:9990; } } @media (max-width:781px){ .wp-block-column:has(.gw-secbar){ position:sticky; top:50px; /* 1px under the 51px header: closes a subpixel gap when pinned */ z-index:100; background:var(--wp--preset--color--background); } } @media (min-width:782px) and (max-width:1050px){ /* 1050 = upper bound of the hamburger menus; sticky must cover the whole collapsed range */ .wp-block-column:has(.gw-secbar){ position:sticky; top:calc(var(--wp-admin--admin-bar--height, 0px) + 99px); /* 1px tuck under the 100px header */ z-index:100; background:var(--wp--preset--color--background); } } .gw-secbar{ box-shadow:0 2px 6px rgba(0,0,0,.12); } /* ---- Tighter body-list indent on mobile ---- */ @media (max-width:781px){ /* :not(.wp-block-post-template): a query loop renders as a UL, and the front-page announcement card sat 20px off-centre when this indent caught it. Body lists only. */ .wp-block-post-content ul:not(.wp-block-post-template), .wp-block-post-content ol, .entry-content ul:not(.wp-block-post-template), .entry-content ol{ padding-left:20px !important; } } /* ---- Section menu fills viewport minus header + section bar, scrolls on overflow ---- */ .section-sidebar-nav.gw-sec-open .wp-block-navigation__responsive-container{ max-height: calc(100vh - 102px) !important; max-height: calc(100dvh - 102px) !important; overflow-y: auto !important; } /* ---- Lighter macOS text rendering (match Windows weight) ---- */ body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- Find-your-path / Logins cards: icon and title share one row ---- The card's icon sits in a flex group; the title is appended to that group so the two read as one line, vertically centred. The margin reset is needed because the h3 ramp gives every heading a 26px top margin. NOT inside a media query - this is the layout at every width. */ .gw-fyp .wp-block-group.is-layout-flex:has(> .wp-block-spectra-icon){align-items:center;gap:14px} .gw-fyp .wp-block-group.is-layout-flex > h3{margin:0} /* ---- Logins page buttons: audience hover, per card ---- The overview pages get their audience button hover from the section body class; /logins/ is a top-level page with no section, and its three cards each belong to a different audience anyway. Scoping to the card class gives each button its own audience wash and border on hover, matching the Students and Letter Writers overview pages. */ .gw-fyp--students .wp-element-button.has-background-background-color:hover{background-color:var(--wp--preset--color--students-light) !important;border-color:var(--wp--preset--color--students-accent) !important} .gw-fyp--refs .wp-element-button.has-background-background-color:hover{background-color:var(--wp--preset--color--letter-writers-light) !important;border-color:var(--wp--preset--color--letter-writers-accent) !important} .gw-fyp--crs .wp-element-button.has-background-background-color:hover{background-color:var(--wp--preset--color--campus-reps-light) !important;border-color:var(--wp--preset--color--campus-reps-accent) !important} /* ---- Mobile: pull listing content up under the hero (news/blog, search, archives) ---- */ @media (max-width:781px){ body.blog main > .wp-block-group.has-global-padding:has(.wp-block-query), body.archive main > .wp-block-group.has-global-padding:has(.wp-block-query), body.search main > .wp-block-group.has-global-padding:has(.wp-block-query){ margin-top:0 !important; padding-top:24px !important; } /* ---- Logins page: student card inner divider ---- The Prospective Students card on /logins/ splits into two columns with a vertical rule between them (border-left on the second column, set in the block). When core columns stack below 782px the vertical rule would sit uselessly on the left edge, so it flips to a horizontal rule above the second half. */ .gw-login-split > .wp-block-column:last-child{ border-left:none !important; border-top:1px solid var(--wp--preset--color--outline); padding-left:0 !important; padding-top:16px; } } /* ============================================================ PORTAL UNAVAILABLE (TEMPORARY — added 21 August 2026) ============================================================ Everything below is a holding state while the Scholarship America nomination portal is unavailable. It is meant to be DELETED, not maintained. Nothing above this banner depends on it. TO REVERT, in this order: 1. Delete this whole banner and the rules under it. 2. Delete the "PORTAL UNAVAILABLE" line from the CONTENTS index. 3. Republish page 1503 (/logins/), currently a draft. 4. On page 85 (/students/nomination/) restore both buttons: "Submit Interest Form" href=https://apply.scholarsapply.org/barrygoldwater/ "Submit Application" href=https://apply.scholarsapply.org/barrygoldwater/login.php 5. On page 402 (/campus-representatives/overview/) restore: "Campus Rep Login" href=https://apply.scholarsapply.org/barrygoldwater/admin/nominator.php Each of those three buttons also needs target="_blank" and rel="noreferrer noopener" put back, and the gw-soon class removed from its wrapping wp:button block. 6. Bump the theme version so the editor and the front end both pick the change up. Why it is built this way: the masthead login is hidden in CSS only, so the header template part and the navigation menu are untouched. The three portal buttons keep valid block markup — a wp:button with no url is a legitimate state — so the editor shows no validation warning. ============================================================ */ /* The masthead login button. Hidden rather than removed so the icon-copy script in functions.php still finds it; that script reads the DOM, not visibility, and the mobile item it feeds is hidden just below. */ :root header .wp-block-buttons > .wp-block-button{display:none} /* The same login inside the open mobile panel. Belt and braces: the nav item is a post-type link to page 1503, and WordPress does not render a post-type link whose target is unpublished, so while 1503 is a draft this item is already absent from the markup and the rule matches nothing. It is kept so that republishing 1503 before this block is deleted does not put the mobile login back on its own. .mobile-utility is carried by exactly one navigation item, the Logins link, so the selector cannot catch anything else. */ :root .wp-block-navigation-item.mobile-utility{display:none} /* With the login gone the utility bar reads as empty, so the desktop search is held open to fill it. This overrides .gw-search.open rather than replacing it: the toggle script still adds and removes .open, and the first click still focuses the field, so nothing in functions.php needs touching. Restoring the collapse animation means deleting these two rules and nothing else. */ :root header .gw-search{width:250px} :root header .gw-search input{width:250px;opacity:1;padding:0 40px 0 12px;pointer-events:auto} /* Deactivated portal buttons. gw-soon sits on the wp-block-button wrapper, so the label stays untouched and the note can sit outside the control. */ :root .wp-block-button.gw-soon > .wp-block-button__link{ background-color:var(--wp--preset--color--fill) !important; border-color:var(--wp--preset--color--outline) !important; color:var(--wp--preset--color--neutral) !important; cursor:default; box-shadow:none; } .wp-block-button.gw-soon{position:relative;} .wp-block-button.gw-soon::after{ content:"Coming soon"; display:block; margin-top:6px; font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--wp--preset--color--neutral); text-align:center; }