/** * WFA — GeneratePress chrome overrides * /wp-content/themes/wfa-theme/wfa/wfa-chrome.css * * Light touch on purpose. Most of GeneratePress's header and footer is * better controlled in Appearance then Customize, which gives you the * settings without code. This file only does the things the Customizer * cannot: apply the brand type tokens and tidy the footer disclosure. * * Tokens come from wfa-brand.css. Fallbacks are included so nothing * collapses if that file fails to load. */ /* --------------------------------------------------------------- Header Wide-tracked capitals for the wordmark, small caps for the menu. Styles GeneratePress's own markup, so nothing needs re-registering. --------------------------------------------------------------- */ /* LAYER ORDER for the whole site, in one place: 0/1 hero video and its copy 60 search bar anchored under the header (homepage overlay) 90 search bar docked to the foot of the viewport 100 site header, and therefore every nav dropdown inside it 200 skip link, which must beat everything when focused The header is given a layer explicitly so its dropdowns clear page content on inner pages as well as the homepage. */ .site-header { position: relative; z-index: 100; /* No rule under the header: the search bar's own outline marks where the header ends, and dropdowns still open flush at 70px. */ border-bottom: 0; background: var(--wfa-bg, #faf7f2); } /* Fixed bar. Vertical padding is removed and the contents are centred instead, so the height holds regardless of the wordmark size. The height is a token because the dropdown panels are positioned against it. Change it here and the panels follow. */ :root { --wfa-header-h: 70px; } .site-header .inside-header { display: flex; align-items: center; height: var(--wfa-header-h); min-height: var(--wfa-header-h); padding-top: 0; padding-bottom: 0; } /* A logo image would otherwise set the bar height itself. The logo is an SVG, and in the header's flex row its wrapper was shrinking to 0px wide, taking the image with it (max-width: 100% of nothing), so no logo showed at all. Fixed height, natural width, and the wrapper is not allowed to shrink. */ .site-header .site-logo { flex: 0 0 auto; } .site-header .site-logo img, .site-header .header-image { height: 44px; max-height: 44px; width: auto; max-width: none; } /* GeneratePress sizes nav items with line-height, not padding, so the links have to match the bar or they will overflow it. */ .main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .mobile-bar-items a { line-height: var(--wfa-header-h); } /* DO NOT force heights or align-self on the navigation here. A previous version set align-self: stretch on .main-navigation to make a top: 100% dropdown land on the header's bottom border. It did the opposite: GeneratePress wraps the menu in .inside-navigation, which keeps its natural height, so stretching the outer box pushed every menu item to the top of the bar. The line-height above already makes each item exactly bar height, so the dropdown's own top: 100% is enough on its own. */ /* Sub-menu items keep their own height, not the bar's */ .main-navigation ul ul li a { line-height: 1.4; } /* Wordmark: capitals, generous tracking, light weight. text-transform means the Site Title setting can stay as normal sentence case in the Customizer. */ .main-title, .site-title, .main-title a, .site-title a { font-family: var(--wfa-ui, system-ui, sans-serif); font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 400; text-transform: uppercase; letter-spacing: .34em; line-height: 1; color: var(--wfa-text, #14171a); text-decoration: none; } /* The tracking adds space after the final letter, which pushes the wordmark visually off-centre. Pull it back. */ .main-title, .site-title { margin-right: -.34em; } .site-description { margin-top: .35rem; font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wfa-muted, #5f6a70); } /* Primary menu */ .main-navigation, .main-navigation ul ul { background: var(--wfa-bg, #faf7f2); } .main-navigation { border-top: 0; border-bottom: 0; } /* NO line-height here. It is set once, above, to the bar height. A line-height: 1.2 used to sit in this rule and, being later in the file with identical specificity, it won: every menu item was 14.4px tall instead of 70px, so a dropdown at top: 100% opened 28.8px above the header's bottom border. Measured, not guessed. */ .main-navigation .main-nav ul li a { font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: .13em; color: var(--wfa-text, #14171a); padding-left: 1.1rem; padding-right: 1.1rem; } .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li a:focus-visible, .main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-ancestor > a { color: var(--wfa-accent, #0f5548); background: transparent; } /* Dropdown caret: thinner and closer to the label than the default */ .main-navigation .main-nav ul li.menu-item-has-children > a .dropdown-menu-toggle { padding-left: .4rem; font-size: .7rem; opacity: .55; } /* Sub-menus keep the capitals but drop the tracking, which is hard to read in a stacked list. */ .main-navigation ul ul { border: 1px solid var(--wfa-line, #e2dcd2); box-shadow: 0 10px 28px rgba(20, 23, 26, .10); min-width: 230px; padding: .3rem 0; } .main-navigation ul ul li a { font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .85rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.4; padding-top: .65rem; padding-bottom: .65rem; color: var(--wfa-text, #14171a); } .main-navigation ul ul li:hover > a, .main-navigation ul ul li a:focus-visible, .main-navigation ul ul li.current-menu-item > a { background: var(--wfa-accent-soft, #e4ece9); color: var(--wfa-accent, #0f5548); } /* Sub-menu items sit flush inside the panel padding rather than inheriting the top level's wide horizontal padding. */ .main-navigation ul ul li a { padding-left: 1.1rem; padding-right: 1.1rem; } /* Mobile toggle */ .main-navigation .menu-toggle { font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: .13em; color: var(--wfa-text, #14171a); } .main-navigation .menu-toggle:hover, .main-navigation .menu-toggle:focus-visible { color: var(--wfa-accent, #0f5548); background: transparent; } /* Mobile menu items get a divider each, so the stacked capitals read as a list rather than a block of text. */ /* Once the menu drops below the bar on phones, items stack as a list and need their own height rather than the 70px bar line-height. */ @media (max-width: 768px) { .main-navigation .main-nav ul li a { border-bottom: 1px solid var(--wfa-line, #e2dcd2); line-height: 1.4; padding-top: 1rem; padding-bottom: 1rem; } } /* Footer */ .site-footer, .site-info { background: var(--wfa-surface, #f2ede4); border-top: 1px solid var(--wfa-line, #e2dcd2); color: var(--wfa-muted, #5f6a70); } .site-info { font-size: .8rem; line-height: 1.6; } .site-info a { color: var(--wfa-muted, #5f6a70); } .wfa-footer-disclosure { display: block; max-width: 70ch; margin: 0 auto .6rem; font-size: .78rem; line-height: 1.6; } /* GeneratePress container: the custom templates set their own width, so stop the parent padding doubling up on them. */ .wfa-wrap, .wfa-home, .wfa-destination { box-sizing: border-box; } .page-template-default .wfa-wrap, .single .wfa-wrap { padding-left: 0; padding-right: 0; } @media (max-width: 768px) { .page-template-default .wfa-wrap, .single .wfa-wrap { padding-left: 1rem; padding-right: 1rem; } } /* Skip link parity with GeneratePress */ .wfa-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: .75rem 1rem; background: var(--wfa-accent, #0f5548); color: #fff; } .wfa-skip:focus { left: 0; } /* --------------------------------------------------------------- Persistent jobs search Anchored near the top, docks to the bottom on scroll. Square to match the rest of the site: no radius on the bar, the submit button or the dropdown panels. The field padding is a token because the dropdown panels are positioned and inset from it. --------------------------------------------------------------- */ :root { --wfa-field-pad-x: 1.1rem; --wfa-field-pad-y: .7rem; } /* No borders of its own. The bar inside already carries one on all four sides, and the header supplies the line above. */ .wfa-searchbar-anchor { padding: 0 1rem; border-top: 0; border-bottom: 0; background: var(--wfa-bg, #faf7f2); } .wfa-searchbar-anchor__inner { max-width: 1100px; margin: 0 auto; } .wfa-searchbar { display: flex; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--wfa-line, #e2dcd2); border-radius: 0; background: var(--wfa-bg, #faf7f2); box-shadow: 0 1px 2px rgba(20, 23, 26, .04); } .wfa-searchbar__field { display: flex; flex-direction: column; justify-content: center; flex: 1 1 0; min-width: 0; padding: var(--wfa-field-pad-y) var(--wfa-field-pad-x); border-right: 1px solid var(--wfa-line, #e2dcd2); } .wfa-searchbar__field--text { flex: 1.3 1 0; } /* Small capitals, matching the header's language. */ .wfa-searchbar__label { font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--wfa-text, #14171a); margin-bottom: .25rem; padding-left: 0; } /* The selectors are doubled up with the form element type because GeneratePress styles inputs with input[type="search"], which outranks a single class. Its 1px border and 15px left padding were drawing the keyword field as a box and pushing its text out of line with the label above it. */ .wfa-searchbar__select, .wfa-searchbar__input, input.wfa-searchbar__input[type="search"], input.wfa-searchbar__input[type="text"] { appearance: none; -webkit-appearance: none; width: 100%; padding: 0 1.2rem 0 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--wfa-text, #14171a); font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .95rem; line-height: 1.4; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* Keyword is the one field you type into, so it keeps a rule beneath it as the affordance. The two dropdowns signal themselves with a caret and need none. */ input.wfa-searchbar__input[type="search"], input.wfa-searchbar__input[type="text"] { padding-right: .4rem; padding-bottom: .2rem; border-bottom: 1px solid var(--wfa-line, #e2dcd2); cursor: text; transition: border-color .16s ease; } input.wfa-searchbar__input[type="search"]:focus, input.wfa-searchbar__input[type="text"]:focus { border-bottom-color: var(--wfa-accent, #0f5548); outline: 0; } /* Safari draws its own decorations inside a search input. */ .wfa-searchbar__input::-webkit-search-decoration, .wfa-searchbar__input::-webkit-search-cancel-button { -webkit-appearance: none; } @media (prefers-reduced-motion: reduce) { input.wfa-searchbar__input[type="search"], input.wfa-searchbar__input[type="text"] { transition: none; } } /* Custom caret. A native select arrow cannot be restyled, so the arrow is drawn as a background image and the native one removed with appearance: none. */ .wfa-searchbar__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75L6 6.25l4.5-4.5' fill='none' stroke='%2314171a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .1rem center; background-size: 11px 8px; } /* Firefox keeps a focus ring inside the control; this removes the inner dotted outline without removing the real focus indicator below. */ .wfa-searchbar__select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--wfa-text, #14171a); } .wfa-searchbar__input { cursor: text; } .wfa-searchbar__input::placeholder { color: var(--wfa-muted, #5f6a70); opacity: 1; } .wfa-searchbar__select:hover { color: var(--wfa-accent, #0f5548); } .wfa-searchbar__select:focus-visible, .wfa-searchbar__input:focus-visible { outline: 2px solid var(--wfa-accent, #0f5548); outline-offset: 4px; border-radius: 2px; } /* The open option list is drawn by the operating system. Chrome and Firefox honour these, Safari ignores them and shows its own picker. That is expected: a fully styled list would mean a JavaScript dropdown, losing keyboard support and the native mobile picker. */ .wfa-searchbar__select option { background: var(--wfa-bg, #faf7f2); color: var(--wfa-text, #14171a); padding: .4rem; } .wfa-searchbar__select option:checked { font-weight: 600; } @media (prefers-color-scheme: dark) { .wfa-searchbar__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75L6 6.25l4.5-4.5' fill='none' stroke='%23f2efe9' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); } } .wfa-searchbar__submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex: 0 0 auto; min-height: 48px; align-self: stretch; padding: 0 1.8rem; border: 0; border-radius: 0; background: var(--wfa-ink, #14171a); color: #fff; font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .95rem; font-weight: 500; cursor: pointer; transition: background .18s ease; } .wfa-searchbar__submit:hover, .wfa-searchbar__submit:focus-visible { background: var(--wfa-accent, #0f5548); } .wfa-searchbar__submit-icon { font-size: 1rem; transform: rotate(-45deg); } /* Docked state */ .wfa-searchdock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform .2s ease; pointer-events: none; } .wfa-searchdock.is-visible { transform: translateY(0); pointer-events: auto; } .wfa-searchdock .wfa-searchbar { max-width: 1100px; margin: 0 auto; background: var(--wfa-bg, #faf7f2); box-shadow: 0 6px 24px rgba(20, 23, 26, .16); } /* Stop the docked bar covering the last of the page */ body.wfa-dock-open { padding-bottom: 90px; } /* Phones: the pill becomes two rows, not a squeezed single line */ @media (max-width: 760px) { .wfa-searchbar { flex-wrap: wrap; gap: .25rem; padding: 0; border-radius: 0; } .wfa-searchbar__field { flex: 1 1 40%; padding: .35rem .6rem; border-right: 0; } .wfa-searchbar__field--text { flex: 1 1 100%; border-top: 1px solid var(--wfa-line, #e2dcd2); padding-top: .5rem; } .wfa-searchbar__submit { flex: 1 1 100%; min-height: 52px; border-radius: 0; } .wfa-searchdock .wfa-searchbar { border-radius: 0; } body.wfa-dock-open { padding-bottom: 160px; } } @media (prefers-reduced-motion: reduce) { .wfa-searchdock { transition: none; } } /* --------------------------------------------------------------- Dark site footer --------------------------------------------------------------- */ .wfa-sitefooter { padding: clamp(3rem, 7vw, 5rem) 1rem clamp(2rem, 4vw, 3rem); background: #16191d; color: #e9e6e0; } .wfa-sitefooter__inner { max-width: 1100px; margin: 0 auto; } .wfa-sitefooter__brand { text-align: center; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(233, 230, 224, .14); } .wfa-sitefooter__mark { margin: 0 0 .6rem; font-family: var(--wfa-display, Georgia, serif); font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: .02em; } .wfa-sitefooter__strap { margin: 0 auto; max-width: 46ch; font-size: .92rem; line-height: 1.6; color: rgba(233, 230, 224, .62); } .wfa-sitefooter__cols { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); padding: 2.5rem 0; } @media (min-width: 800px) { .wfa-sitefooter__cols { grid-template-columns: repeat(4, 1fr); } } .wfa-sitefooter__heading { margin: 0 0 .9rem; font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(233, 230, 224, .55); } .wfa-sitefooter__list { list-style: none; margin: 0; padding: 0; } .wfa-sitefooter__list li { margin-bottom: .55rem; } .wfa-sitefooter__list a { color: #e9e6e0; text-decoration: none; font-size: .94rem; } .wfa-sitefooter__list a:hover, .wfa-sitefooter__list a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* Newsletter and partnership side by side. Single column below 800px, where a 50:50 split would leave the email field too narrow to type in. */ .wfa-sitefooter__split { display: grid; gap: 2rem; grid-template-columns: 1fr; padding: 2rem 0; border-top: 1px solid rgba(233, 230, 224, .14); } @media (min-width: 800px) { .wfa-sitefooter__split { grid-template-columns: 1fr 1fr; gap: 3rem; } .wfa-sitefooter__partner { padding-left: 3rem; border-left: 1px solid rgba(233, 230, 224, .14); } } .wfa-sitefooter__blurb { margin: 0 0 1rem; max-width: 44ch; font-size: .88rem; line-height: 1.6; color: rgba(233, 230, 224, .62); } .wfa-sitefooter__cta { display: inline-block; min-height: 44px; padding: .75rem 1.3rem; border: 1px solid rgba(233, 230, 224, .45); border-radius: var(--wfa-radius, 2px); color: #e9e6e0; font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .92rem; font-weight: 500; text-decoration: none; transition: background .16s ease, color .16s ease, border-color .16s ease; } .wfa-sitefooter__cta:hover, .wfa-sitefooter__cta:focus-visible { background: #e9e6e0; border-color: #e9e6e0; color: #16191d; } /* Never underlined, in any state. The site's general a:hover underline was reaching it. */ .wfa-sitefooter a.wfa-sitefooter__cta, .wfa-sitefooter a.wfa-sitefooter__cta:hover, .wfa-sitefooter a.wfa-sitefooter__cta:focus, .wfa-sitefooter a.wfa-sitefooter__cta:visited { text-decoration: none; } @media (prefers-reduced-motion: reduce) { .wfa-sitefooter__cta, .wfa-sitefooter__signup .wfa-subscribe__button { transition: none; } } .wfa-sitefooter__signup .wfa-subscribe { margin: 0; padding: 0; border: 0; max-width: 480px; } /* Email field: just a line, like the keyword field in the search bar. */ .wfa-sitefooter__signup .wfa-subscribe__form { align-items: flex-end; gap: 1rem; } .wfa-sitefooter__signup .wfa-subscribe__input { min-height: 44px; padding: .5rem 0; border: 0; border-bottom: 1px solid rgba(233, 230, 224, .45); border-radius: 0; background: transparent; box-shadow: none; color: #e9e6e0; font-family: var(--wfa-ui, system-ui, sans-serif); font-size: 1rem; } .wfa-sitefooter__signup .wfa-subscribe__input::placeholder { color: rgba(233, 230, 224, .5); opacity: 1; } /* GeneratePress paints every focused email field near-white with dark text (input[type="email"]:focus). Stay dark instead, and outrank it. */ .wfa-sitefooter__signup input.wfa-subscribe__input, .wfa-sitefooter__signup input.wfa-subscribe__input:focus, .wfa-sitefooter__signup input.wfa-subscribe__input:active { background: transparent; color: #e9e6e0; } .wfa-sitefooter__signup input.wfa-subscribe__input:focus { outline: none; border-bottom-color: #e9e6e0; } /* The placeholder clears as soon as the field is clicked, ready to type. */ .wfa-sitefooter__signup input.wfa-subscribe__input:focus::placeholder { color: transparent; } /* Browser autofill would otherwise paint the field pale yellow or blue. */ .wfa-sitefooter__signup input.wfa-subscribe__input:-webkit-autofill, .wfa-sitefooter__signup input.wfa-subscribe__input:-webkit-autofill:hover, .wfa-sitefooter__signup input.wfa-subscribe__input:-webkit-autofill:focus { -webkit-text-fill-color: #e9e6e0; -webkit-box-shadow: 0 0 0 1000px #16191d inset; caret-color: #e9e6e0; transition: background-color 9999s ease 0s; } /* Subscribe: the same outline button as the partnerships email. */ .wfa-sitefooter__signup .wfa-subscribe__button { min-height: 44px; padding: .75rem 1.3rem; border: 1px solid rgba(233, 230, 224, .45); border-radius: var(--wfa-radius, 2px); background: transparent; color: #e9e6e0; font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .92rem; font-weight: 500; line-height: normal; letter-spacing: normal; text-transform: none; text-decoration: none; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; } /* GeneratePress also fills button:focus, which would leave the button light after a click. Only hover and keyboard focus fill it. */ .wfa-sitefooter__signup button.wfa-subscribe__button:focus { background: transparent; border-color: rgba(233, 230, 224, .45); color: #e9e6e0; } .wfa-sitefooter__signup button.wfa-subscribe__button:hover, .wfa-sitefooter__signup button.wfa-subscribe__button:focus-visible { background: #e9e6e0; border-color: #e9e6e0; color: #16191d; } .wfa-sitefooter__signup .wfa-subscribe__msg { background: rgba(233, 230, 224, .08); border-left-color: #e9e6e0; color: #e9e6e0; } .wfa-sitefooter__legal { padding-top: 1.5rem; border-top: 1px solid rgba(233, 230, 224, .14); text-align: center; } /* auto margins centre the block itself, text-align centres the lines inside it. Both are needed because the paragraphs are measure-capped. */ .wfa-sitefooter__legal p { margin: 0 auto .5rem; max-width: 74ch; font-size: .76rem; line-height: 1.6; color: rgba(233, 230, 224, .5); } .wfa-sitefooter__legal p:last-child { margin-bottom: 0; } /* GeneratePress's own footer would repeat the credit underneath */ body.wfa-has-sitefooter .site-info { display: none; } /* --------------------------------------------------------------- Custom select Enhanced from the native control by wfa-select.js. Until the script runs, the native select shows and works normally. --------------------------------------------------------------- */ .wfa-select { position: relative; width: 100%; min-width: 0; } /* The real select stays for form submission, hidden but focusable-safe */ .wfa-select__native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wfa-select__button { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: 0; border: 0; background: transparent; color: var(--wfa-text, #14171a); font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .95rem; line-height: 1.4; text-align: left; cursor: pointer; } .wfa-select__button:hover { color: var(--wfa-accent, #0f5548); } .wfa-select__button:focus-visible { outline: 2px solid var(--wfa-accent, #0f5548); outline-offset: 4px; border-radius: 2px; } .wfa-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wfa-select__caret { flex: 0 0 auto; width: 9px; height: 9px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: .7; transition: transform .16s ease; } .wfa-select.is-open .wfa-select__caret { transform: rotate(225deg) translate(-2px, -2px); } /* The panel */ .wfa-select__list { position: absolute; left: -.8rem; right: -.8rem; top: calc(100% + .9rem); z-index: 120; max-height: 280px; overflow-y: auto; margin: 0; list-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* Same shell as the header dropdowns. The horizontal inset lives on the rows rather than here, so the keyboard cursor's highlight can run the full width of the panel. */ padding: calc(var(--wfa-panel-inset, 1.5rem) - var(--wfa-panel-row-y, .5rem)) 0; background: var(--wfa-panel-bg, #faf7f2); border: 1px solid var(--wfa-panel-border, #e2dcd2); border-radius: 0; box-shadow: var(--wfa-panel-shadow, 0 6px 20px rgba(20, 23, 26, .07)); } /* Docked bar sits at the foot of the screen, so the panel opens upward */ .wfa-select.is-up .wfa-select__list { top: auto; bottom: calc(100% + .9rem); border-radius: 0; box-shadow: 0 -6px 20px rgba(20, 23, 26, .07); } /* Square bar, so the panel lines up with its field rather than hanging past it the way it did under the rounded pill. The panel overhangs the field by exactly the field's own horizontal padding, which puts its edges on the bar's divider lines. The row padding then equals that same value, so an option's text sits directly under its label. The extra 1px in the offset is the panel's own border, so it is the CONTENT box that lines up, not the border box. Measured on the live page: label and option text land on the same pixel. The .9rem drop clears the field's lower padding and the bar's border so the panel's top edge meets the bar's bottom edge. */ .wfa-select__list { left: calc((var(--wfa-field-pad-x) + 1px) * -1); right: calc((var(--wfa-field-pad-x) + 1px) * -1); top: calc(100% + .9rem); } .wfa-select__option { padding-left: var(--wfa-field-pad-x); padding-right: var(--wfa-field-pad-x); } /* Matches the nav dropdowns: no dividers, no fill on hover, more air. Row text sits at the same inset as a header panel's. */ .wfa-select__option { padding: var(--wfa-panel-row-y, .5rem) var(--wfa-panel-inset, 1.5rem); font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .92rem; font-weight: 400; line-height: 1.4; color: var(--wfa-text, #14171a); cursor: pointer; } .wfa-select__option + .wfa-select__option { border-top: 0; } /* NO filled rows, in any state. The header dropdowns never paint one, and a filled row is the only thing that made these two look like different components: every typographic property already matches. is-active is the keyboard cursor and still needs to be followable while arrowing through a thirty item list, so it is marked with a rule under the label rather than a block of colour behind it. That keeps the line-based language used elsewhere on the site and reads as deliberate rather than as a stray grey box sitting on the selected row the moment the panel opens. */ .wfa-select__option:hover, .wfa-select__option.is-active { background: transparent; color: var(--wfa-accent, #0f5548); } .wfa-select__option.is-active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .wfa-select__option[aria-selected="true"] { font-weight: 600; } .wfa-select__option[aria-selected="true"]::after { content: ""; float: right; width: 5px; height: 9px; margin-top: .25rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } @media (max-width: 760px) { .wfa-select__list { left: -.6rem; right: -.6rem; max-height: 240px; } } @media (prefers-reduced-motion: reduce) { .wfa-select__caret { transition: none; } } /* --------------------------------------------------------------- Footer running totals Figure large, label small beneath it. --------------------------------------------------------------- */ .wfa-sitefooter__stats { padding: 2rem 0; border-top: 1px solid rgba(233, 230, 224, .14); } .wfa-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem clamp(3rem, 7vw, 6rem); list-style: none; margin: 0; padding: 0; text-align: center; } .wfa-stats__item { flex: 0 0 auto; min-width: 0; } /* No underline in any state. The hover is a quiet lift in contrast on both lines rather than a link decoration, so the figures keep reading as data rather than as navigation. */ .wfa-sitefooter .wfa-stats__link, .wfa-sitefooter .wfa-stats__link:hover, .wfa-sitefooter .wfa-stats__link:focus, .wfa-sitefooter .wfa-stats__link:focus-visible { display: block; text-decoration: none; color: inherit; } .wfa-sitefooter .wfa-stats__link:hover .wfa-stats__value, .wfa-sitefooter .wfa-stats__link:focus-visible .wfa-stats__value { color: #fff; } .wfa-sitefooter .wfa-stats__link:hover .wfa-stats__label, .wfa-sitefooter .wfa-stats__link:focus-visible .wfa-stats__label { color: rgba(233, 230, 224, .82); } .wfa-sitefooter .wfa-stats__link:focus-visible { outline: 2px solid rgba(233, 230, 224, .6); outline-offset: 6px; border-radius: 2px; } .wfa-stats__value { display: block; font-family: var(--wfa-display, Georgia, serif); font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: #e9e6e0; transition: color .16s ease; } .wfa-stats__label { display: block; margin-top: .4rem; font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(233, 230, 224, .55); transition: color .16s ease; } /* Two per row on phones, rather than a cramped single line or a tall stack of four. The row gap collapses to zero because the columns already carry the horizontal spacing. */ @media (max-width: 620px) { .wfa-stats { gap: 2rem 0; } .wfa-stats__item { flex: 0 0 50%; } } @media (prefers-reduced-motion: reduce) { .wfa-stats__value, .wfa-stats__label { transition: none; } } /* --------------------------------------------------------------- Mega menu Applied automatically to any top level item with grandchildren. Second level items become column headings, third level become the links beneath them. --------------------------------------------------------------- */ .wfa-has-mega .main-navigation { position: relative; } /* The panel */ .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu { position: absolute; left: 0; right: 0; top: 100%; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2rem; max-width: none; padding: 2rem clamp(1rem, 4vw, 2.5rem); border: 1px solid var(--wfa-line, #e2dcd2); border-radius: 0; box-shadow: 0 14px 34px rgba(20, 23, 26, .12); background: var(--wfa-bg, #faf7f2); } /* Constrain the inner content to the site measure while the panel itself spans the header. */ .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu > li { width: auto; float: none; } /* Column heading */ .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu > li.wfa-mega__group > a { display: block; padding: 0 0 .7rem; margin-bottom: .7rem; border-bottom: 1px solid var(--wfa-line, #e2dcd2); font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; line-height: 1.3; color: var(--wfa-muted, #5f6a70); cursor: default; background: transparent; } .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu > li.wfa-mega__group:hover > a { background: transparent; color: var(--wfa-muted, #5f6a70); } /* Headings have no dropdown of their own to signal */ .main-navigation .main-nav ul li.wfa-mega .dropdown-menu-toggle { display: none; } /* Third level: in the flow beneath its heading, not a flyout */ .main-navigation .main-nav ul li.wfa-mega ul.sub-menu ul.sub-menu { position: static; display: block; width: auto; min-width: 0; padding: 0; border: 0; box-shadow: none; background: transparent; opacity: 1; visibility: visible; left: auto; top: auto; transform: none; pointer-events: auto; } .main-navigation .main-nav ul li.wfa-mega ul.sub-menu ul.sub-menu li a { display: block; padding: .45rem 0; border: 0; font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .86rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.4; color: var(--wfa-text, #14171a); background: transparent; } .main-navigation .main-nav ul li.wfa-mega ul.sub-menu ul.sub-menu li a:hover, .main-navigation .main-nav ul li.wfa-mega ul.sub-menu ul.sub-menu li a:focus-visible { color: var(--wfa-accent, #0f5548); background: transparent; text-decoration: underline; text-underline-offset: 3px; } /* Narrower screens: two columns before it collapses entirely */ @media (min-width: 769px) and (max-width: 1100px) { .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2rem; } } /* Phones: GeneratePress stacks the menu, so the panel becomes a plain nested list. Grid and absolute positioning both have to come off. */ @media (max-width: 768px) { .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu { position: static; display: block; padding: .5rem 0 1rem; border: 0; border-top: 1px solid var(--wfa-line, #e2dcd2); box-shadow: none; } .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu > li.wfa-mega__group > a { margin: 1rem 0 .25rem; padding: 0 1rem .6rem; border-bottom: 1px solid var(--wfa-line, #e2dcd2); } .main-navigation .main-nav ul li.wfa-mega ul.sub-menu ul.sub-menu li a { padding: .7rem 1rem .7rem 1.6rem; border-bottom: 1px solid var(--wfa-line, #e2dcd2); } } /* --------------------------------------------------------------- Language switcher Sits in the nav bar to the right of the menu, divided from it by a vertical rule. Opens with details and summary, no JavaScript. --------------------------------------------------------------- */ .wfa-lang { position: relative; display: flex; align-items: center; align-self: center; margin-left: 1.1rem; padding-left: 1.1rem; } /* The divider. A border on a flex item would run the full 70px, so this is a pseudo element sized to the text instead. */ .wfa-lang::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: var(--wfa-line, #e2dcd2); } .wfa-lang__toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .2rem; color: var(--wfa-text, #14171a); font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .74rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; line-height: 1; cursor: pointer; list-style: none; } .wfa-lang__toggle::-webkit-details-marker { display: none; } .wfa-lang__toggle:hover, .wfa-lang[open] .wfa-lang__toggle { color: var(--wfa-accent, #0f5548); } .wfa-lang__toggle:focus-visible { outline: 2px solid var(--wfa-accent, #0f5548); outline-offset: 3px; border-radius: 2px; } .wfa-lang__globe { flex: 0 0 auto; display: block; } .wfa-lang__list { position: absolute; right: 0; top: 100%; z-index: 130; min-width: 170px; max-height: 320px; overflow-y: auto; margin: 0; padding: .3rem 0; list-style: none; background: var(--wfa-bg, #faf7f2); border: 1px solid var(--wfa-line, #e2dcd2); box-shadow: 0 12px 30px rgba(20, 23, 26, .12); } .wfa-lang__item + .wfa-lang__item { border-top: 1px solid var(--wfa-line, #e2dcd2); } .wfa-lang__item a { display: block; padding: .6rem 1rem; font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .86rem; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--wfa-text, #14171a); text-decoration: none; } .wfa-lang__item a:hover, .wfa-lang__item a:focus-visible { background: var(--wfa-accent-soft, #e4ece9); color: var(--wfa-accent, #0f5548); } .wfa-lang__item a[aria-current="true"] { font-weight: 600; } /* Phones: the nav bar stacks, so the panel drops inline rather than floating off the right edge of a narrow screen. */ @media (max-width: 768px) { .wfa-lang { margin-left: .6rem; padding-left: .6rem; } .wfa-lang__list { right: auto; left: -.6rem; min-width: 150px; } } /* --------------------------------------------------------------- Homepage: header and search bar float over the hero video Both are taken out of the flow so the video starts at the very top of the viewport. Everything reverts to normal on inner pages. --------------------------------------------------------------- */ /* The header outranks the search bar. Both used to sit on 60, so the search bar won on markup order and the dropdowns opened behind it. */ .home .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 0; } .home .wfa-searchbar-anchor { position: absolute; top: var(--wfa-header-h); left: 0; right: 0; z-index: 60; background: transparent; border-bottom: 0; } /* Header content flips to white over the footage. CHILD COMBINATORS, not descendants. This rule used to read `.main-nav ul li a`, which matches a link at ANY depth, so it painted the dropdown links white as well and they vanished against their light panel. Restricting it to `> ul > li > a` keeps it on the bar where it belongs and lets sub-menu links keep the normal text colour. */ .home .site-header .main-title, .home .site-header .site-title, .home .site-header .main-title a, .home .site-header .site-title a, .home .main-navigation .main-nav > ul > li > a, .home .main-navigation .menu-toggle, .home .wfa-lang__toggle { color: #fff; } .home .site-header .site-description { color: rgba(255, 255, 255, .7); } .home .main-navigation, .home .main-navigation ul ul { background: transparent; } /* Same restriction on the hover and current states, or hovering a dropdown row would turn it white again. */ .home .main-navigation .main-nav > ul > li:hover > a, .home .main-navigation .main-nav > ul > li > a:focus-visible, .home .main-navigation .main-nav > ul > li.current-menu-item > a, .home .main-navigation .main-nav > ul > li.current-menu-ancestor > a, .home .wfa-lang__toggle:hover { color: rgba(255, 255, 255, .72); } .home .wfa-lang::before { background: rgba(255, 255, 255, .35); } /* Dropdown panels keep the solid background, or they are unreadable */ .home .main-navigation ul ul, .home .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu { background: var(--wfa-bg, #faf7f2); } /* Belt and braces: dropdown rows are explicitly dark, at a specificity that beats anything in the overlay block above. */ .home .main-navigation .main-nav ul ul li a, .home .main-navigation .main-nav ul li.wfa-mega ul.sub-menu ul.sub-menu li a { color: var(--wfa-text, #14171a); } .home .main-navigation .main-nav ul ul li:hover > a, .home .main-navigation .main-nav ul ul li a:focus-visible, .home .main-navigation .main-nav ul ul li.current-menu-item > a { color: var(--wfa-accent, #0f5548); } .home .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu > li.wfa-mega__group > a { color: var(--wfa-muted, #5f6a70); } .home .wfa-lang__list { background: var(--wfa-bg, #faf7f2); } .home .wfa-lang__item a { color: var(--wfa-text, #14171a); } /* The search pill stays solid. A transparent search field over moving footage is unusable, and this is the primary action on the page. */ .home .wfa-searchbar { background: var(--wfa-bg, #faf7f2); box-shadow: 0 8px 28px rgba(13, 17, 20, .28); } /* Once the menu stacks, a transparent overlaid header stops working: the open panel would sit over the video with no ground behind it. */ @media (max-width: 768px) { .home .site-header, .home .main-navigation, .home .main-navigation ul { background: var(--wfa-bg, #faf7f2); } .home .site-header { position: relative; } .home .wfa-searchbar-anchor { position: relative; top: auto; background: var(--wfa-bg, #faf7f2); border-bottom: 0; } .home .site-header .main-title, .home .site-header .main-title a, .home .main-navigation .main-nav ul li a, .home .main-navigation .menu-toggle, .home .wfa-lang__toggle { color: var(--wfa-text, #14171a); } .home .wfa-hero--video .wfa-hero__inner { padding-top: 0; } } /* --------------------------------------------------------------- Dropdown panels One treatment across all three: standard sub-menus, the mega menu, and the language switcher. Loaded late so it settles the earlier blocks. Minimal on purpose. An accent top bar, dividers on every row and tracked capitals were three separate things competing inside one small panel. The panel is now a single hairline box with generous spacing, and the LABELS do the work. Square corners throughout, matching the rest of the site. --------------------------------------------------------------- */ :root { --wfa-panel-bg: var(--wfa-bg, #faf7f2); --wfa-panel-border: var(--wfa-line, #e2dcd2); --wfa-panel-accent: var(--wfa-accent, #0f5548); --wfa-panel-shadow: 0 6px 20px rgba(20, 23, 26, .07); /* Inset is the same on all four sides. The row padding is part of the top and bottom measurement, so the shell carries the remainder: .5rem row + 1rem shell = 1.5rem, matching the sides. */ --wfa-panel-inset: 1.5rem; --wfa-panel-row-y: .5rem; } /* Panel shell: one uniform hairline, no accent bar, no radius. Horizontal padding lives here rather than on the rows, which is only possible because hover no longer paints a background. */ .main-navigation ul ul, .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu, .wfa-lang__list { background: var(--wfa-panel-bg); border: 1px solid var(--wfa-panel-border); border-radius: 0; box-shadow: var(--wfa-panel-shadow); padding: calc(var(--wfa-panel-inset) - var(--wfa-panel-row-y)) var(--wfa-panel-inset); min-width: 250px; } /* Top level panels open flush against the header's bottom border. Each menu item is already exactly bar height (line-height), so 100% is the bar's lower edge. The offset token is a nudge if it lands a pixel or two out on your screen: positive moves it down. */ .main-navigation .main-nav > ul > li > ul.sub-menu { top: calc(100% + var(--wfa-panel-offset, 0px)); } /* Panels must clear the search bar and the hero beneath them. The header sits above both, and the panel sits above everything inside the header. Without this the dropdown paints behind the search pill, because the header and the search bar were on the same layer and the search bar comes later in the markup. */ .main-navigation ul ul, .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu { z-index: 140; } .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu { padding: 2rem clamp(1rem, 4vw, 2.5rem); } /* Items: Title Case as written in the menu, no transform, no tracking. The top level stays in tracked capitals; the panel is where the eye slows down to read, and capitals slow it down too much. */ .main-navigation .main-nav ul ul li a, .main-navigation .main-nav ul li.wfa-mega ul.sub-menu ul.sub-menu li a, .wfa-lang__item a { font-family: var(--wfa-ui, system-ui, sans-serif); font-size: .92rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.4; padding: var(--wfa-panel-row-y) 0; color: var(--wfa-text, #14171a); text-decoration: none; background: transparent; white-space: nowrap; } /* No dividers anywhere. The spacing separates the rows. Specificity matters here: an earlier :not(:last-child) rule used to win this and kept drawing the lines. That rule is now deleted rather than out-specified. */ .main-navigation ul ul li > a, .main-navigation .main-nav ul ul li > a, .wfa-lang__item a, .wfa-lang__item + .wfa-lang__item { border-bottom: 0; border-top: 0; } /* Hover is a colour shift only. A full width background wash is heavy in a panel this quiet, and reads as a button rather than a link. */ .main-navigation .main-nav ul ul li:hover > a, .main-navigation .main-nav ul ul li a:focus-visible, .main-navigation .main-nav ul ul li.current-menu-item > a, .main-navigation .main-nav ul li.wfa-mega ul.sub-menu ul.sub-menu li a:hover, .main-navigation .main-nav ul li.wfa-mega ul.sub-menu ul.sub-menu li a:focus-visible, .wfa-lang__item a:hover, .wfa-lang__item a:focus-visible { background: transparent; color: var(--wfa-panel-accent); text-decoration: none; } .main-navigation .main-nav ul ul li a:focus-visible, .wfa-lang__item a:focus-visible { outline: 2px solid var(--wfa-panel-accent); outline-offset: -2px; } .main-navigation .main-nav ul ul li.current-menu-item > a { font-weight: 500; } /* Mega menu columns: same type, but flush inside the grid cell rather than carrying the panel's own horizontal padding. */ .main-navigation .main-nav ul li.wfa-mega ul.sub-menu ul.sub-menu li a { padding-left: 0; padding-right: 0; padding-top: .55rem; padding-bottom: .55rem; border-bottom: 0; } /* Column headings keep capitals so the hierarchy inside the panel still reads, but lighter than before. */ .main-navigation .main-nav ul li.wfa-mega > ul.sub-menu > li.wfa-mega__group > a { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 0 0 .8rem; margin-bottom: .4rem; color: var(--wfa-muted, #5f6a70); border-bottom: 1px solid var(--wfa-panel-border); } .wfa-lang__list { min-width: 190px; } .wfa-lang__item + .wfa-lang__item { border-top: 0; } /* Stacked menu on phones: this is a list on a page, not a floating panel, so rows get dividers back and a larger tap target. */ @media (max-width: 768px) { .main-navigation ul ul, .wfa-lang__list { box-shadow: none; border: 0; padding: 0; min-width: 0; } .main-navigation .main-nav ul ul li a, .main-navigation .main-nav ul li.wfa-mega ul.sub-menu ul.sub-menu li a, .wfa-lang__item a { padding: 1rem 1.25rem; font-size: .95rem; white-space: normal; border-bottom: 1px solid var(--wfa-panel-border); } .main-navigation .main-nav ul li.wfa-mega ul.sub-menu ul.sub-menu li a { padding-left: 1.9rem; } /* The bar height forced on the top level items above would make every stacked row 70px tall and push the panels off. */ .main-navigation .main-nav, .main-navigation .main-nav > ul, .main-navigation .main-nav > ul > li, .wfa-lang { height: auto; } .main-navigation .main-nav > ul > li > ul.sub-menu { top: auto; } } /* --------------------------------------------------------------- Eight-item bar Loaded last, so it settles the top-level nav spacing. Eight tracked capitals plus the wordmark plus the language switcher is close to the 1100px container's limit. Tightening the horizontal padding buys back roughly 75px, which is enough. The tracking is left alone because that is what makes the labels read as a system. IF IT STILL WRAPS on your screen, the next lever is tracking, not size: change --wfa-nav-tracking below to .10em. Reducing the font size instead makes the bar look apologetic. --------------------------------------------------------------- */ :root { --wfa-nav-pad: .8rem; --wfa-nav-tracking: .13em; } .main-navigation .main-nav ul li a { padding-left: var(--wfa-nav-pad); padding-right: var(--wfa-nav-pad); letter-spacing: var(--wfa-nav-tracking); white-space: nowrap; } /* Between the container width and the point the menu collapses, the bar is at its most cramped. Tighten a little further rather than wrap. */ @media (min-width: 769px) and (max-width: 1160px) { :root { --wfa-nav-pad: .62rem; --wfa-nav-tracking: .1em; } .main-title, .site-title, .main-title a, .site-title a { letter-spacing: .22em; font-size: 1.05rem; } .main-title, .site-title { margin-right: -.22em; } } /* Sub-menu items are in a panel, not the bar, so the tightened bar padding above must not reach them. Their horizontal inset comes from the panel shell now, so the rows carry none. */ .main-navigation ul ul li a { padding-left: 0; padding-right: 0; } /* Stacked menu on phones has the full width of the screen, so the bar compromises above do not apply. */ @media (max-width: 768px) { .main-navigation .main-nav ul li a { padding-left: 1rem; padding-right: 1rem; letter-spacing: .13em; white-space: normal; } } /* --------------------------------------------------------------- Jobs search bar: monochrome states The two dropdown triggers are