/* ============================================================ HEADER — Publishing Engine stylesheet Pulled into of the Notified-hosted page. Scoped under .header so nothing here leaks onto the rest of the site. REQUIRES (ask Notified to add these to too): - Foundation Sites CSS (grid-container / grid-x / cell classes): https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/css/foundation.min.css - Google Fonts (Material Symbols Outlined, Google Sans Code, Inter): https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght,MONO@0,300..800,1;1,300..800,1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap ============================================================ */ /* Scoped reset (mirrors the site-wide reset in main.css, confined to .header) */ .header, .header *, .header *::before, .header *::after { box-sizing: border-box; } .header a { color: inherit; text-decoration: none; } .header button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; appearance: none; -webkit-appearance: none; } .header ul, .header ol { margin: 0; padding: 0; list-style: none; } .header input, .header textarea, .header select { font: inherit; color: inherit; } /* Shared typography/utility classes used inside the header markup */ .type-h3 { font-family: "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif; font-size: clamp(1.8125rem, 2.5vw + 1.25rem, 3.75rem); line-height: 110%; font-weight: 700; letter-spacing: -1.26px; } .type-cta { font-family: "Google Sans Code", "Roboto Mono", monospace; font-size: 12px; line-height: 110%; font-weight: 500; letter-spacing: 0px; } .space-6-clamp { margin-bottom: clamp(1.3125rem, 9.9545px + 3.0682vw, 3rem); } /* ── HEADER ── */ .nav-outer { display: none } .mobile-header { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: #191919; padding: 0 15px; z-index: 100; transition: transform .3s ease } .mobile-header--hidden { transform: translateY(-100%) } .mobile-header .logo img { display: block; height: 24px; width: auto } .mobile-header .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0 } .mobile-header .burger .bar { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; transform-origin: center } .mobile-header .burger--open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg) } .mobile-header .burger--open .bar:nth-child(2) { opacity: 0; transform: scaleX(0) } .mobile-header .burger--open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg) } .mobile-nav { position: fixed; top: 0; right: 0; width: 100%; max-width: 420px; height: 100dvh; background: #191919; z-index: 200; overflow-y: auto; padding: 80px 0 40px; transform: translateX(100%); transition: transform .3s ease } .mobile-nav--open { transform: translateX(0) } .mobile-nav .close { position: absolute; top: 12px; right: 15px; width: 32px; height: 60px; background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center } .mobile-nav .close .close-bar { position: absolute; width: 22px; height: 2px; background: #fff; border-radius: 2px } .mobile-nav .close .close-bar:nth-child(1) { transform: rotate(45deg) } .mobile-nav .close .close-bar:nth-child(2) { transform: rotate(-45deg) } .mobile-nav .list { list-style: none; margin: 0; padding: 0 } .mobile-nav .item { border-bottom: 1px solid hsla(0, 0%, 100%, .1) } .mobile-nav .item--search { padding: 24px 20px; border-bottom: 1px solid hsla(0, 0%, 100%, .1) } .mobile-nav .item--contact { padding: 0; border-bottom: none } .mobile-nav .item .trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 20px 20px; background: none; border: none; cursor: pointer; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.36px; text-align: left } .mobile-nav .item .trigger .chevron { display: block; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .25s ease; flex-shrink: 0 } .mobile-nav .item .accordion-drop { max-height: 0; overflow: hidden; transition: max-height .3s ease } .mobile-nav .item .accordion-drop .accordion-body { padding: 0 20px 20px } .mobile-nav .item .accordion-drop .accordion-body .section { margin-bottom: 20px } .mobile-nav .item .accordion-drop .accordion-body .section .section-heading { color: #979797; font-family: "Google Sans Code", "Roboto Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; margin-top: 10px } .mobile-nav .item .accordion-drop .accordion-body .section .sub-list { list-style: none; margin: 0; padding: 0; margin-left: 10px } .mobile-nav .item .accordion-drop .accordion-body .section .sub-list .sub-item { padding: 8px 0; border-bottom: 1px solid hsla(0, 0%, 100%, .06) } .mobile-nav .item .accordion-drop .accordion-body .section .sub-list .sub-item:last-child { border-bottom: none } .mobile-nav .item .accordion-drop .accordion-body .section .sub-list .sub-item a { color: #fff; font-size: 13px; font-weight: 500; letter-spacing: -0.3px; text-decoration: none } .mobile-nav .item .accordion-drop .accordion-body .section .sub-list .sub-item a:hover { color: #979797 } .mobile-nav .item .contact-link { display: block; padding: 16px 20px; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.36px; text-decoration: none } .mobile-nav .item .contact-link:hover { color: #979797 } .mobile-nav .item .search .search-field { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #fff; padding-bottom: 8px } .mobile-nav .item .search .search-field label { color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap } .mobile-nav .item .search .search-field input[type=text] { flex: 1; background: rgba(0, 0, 0, 0); border: none; color: #fff; font-size: 14px; outline: none; height: 32px } .mobile-nav .item .search .search-field button[type=submit] { background: none; border: none; cursor: pointer; color: #fff; width: 32px; height: 32px; padding: 0; flex-shrink: 0 } .mobile-nav .item .search .search-field button[type=submit]::before { content: ""; font-family: "Material Symbols Outlined"; font-size: 22px; color: #fff; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24 } .mobile-nav .item--open .chevron { transform: rotate(-135deg) } .mobile-nav .item--open .accordion-drop { max-height: 2000px } .mobile-nav__overlay { display: block; position: fixed; inset: 0; z-index: 199; background: rgba(0, 0, 0, .5) } @media(min-width: 1024px) { body.admin-bar .nav-outer { top: 62px } .mobile-header { display: none } .mobile-nav__overlay { display: none } .nav-outer { display: grid; grid-template-columns: 10fr 180px; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10; width: 100%; gap: 3px; .nav-container, .nav-contact, .content-cols { border: 1px solid #fff; } } } .nav-outer:has(.nav-links:hover) .nav-container, .nav-outer:has(.search-links a:hover) .nav-container, .nav-outer:has(.search-links .search-open) .nav-container, .nav-outer:has(.menu-dropdown:hover) .nav-container { border-bottom-left-radius: 0 } .nav-outer:has(.nav-links:hover) .nav-contact, .nav-outer:has(.search-links a:hover) .nav-contact, .nav-outer:has(.search-links .search-open) .nav-contact, .nav-outer:has(.menu-dropdown:hover) .nav-contact { border-bottom-right-radius: 0 } .nav-outer .nav-container { background: #191919; height: 60px; padding: 0 15px 0 15px; border-radius: 6px; display: flex; gap: 30px } .nav-outer .nav-container .logo { width: fit-content; align-items: center; display: flex; height: inherit } .nav-outer .nav-container .navbar { width: fit-content; align-items: center; display: flex; height: inherit } .nav-outer .nav-container .navbar ul.nav-links { display: flex; align-items: flex-end; justify-content: center; height: inherit; width: fit-content; padding: 0; margin: 0 } .nav-outer .nav-container .navbar ul.nav-links>li { height: inherit; padding-left: 15px } .nav-outer .nav-container .navbar ul.nav-links>li>a { color: #fff; text-align: center; text-box: trim-both cap alphabetic; font-size: clamp(0.75rem, 0.2415vw + 0.6957rem, 0.875rem); font-style: normal; font-weight: 700; letter-spacing: -0.36px; display: block; height: inherit; display: flex; align-items: flex-end; padding-bottom: 9px; font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif; text-decoration: none } .nav-outer .nav-container .navbar ul.nav-links>li>a:hover { color: #979797; cursor: unset } .nav-outer .nav-container .navbar ul.nav-links>li:hover .menu-dropdown { display: block } .nav-outer .nav-container .navbar ul.nav-links>li.active .menu-dropdown { display: block } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown { width: 100%; max-width: 100%; position: absolute; left: 0; display: none; top: 59px } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown.active { display: block } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content { height: inherit } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content.search-drop { height: auto } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: clamp(0rem, 10.1449vw + -2.2826rem, 5.25rem); padding-inline: 15px; padding-bottom: 80px; background: #191919; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; height: inherit } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols.all { grid-template-columns: 1fr } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols.all .search { width: 948px; height: 150px; margin: auto; display: flex; align-items: flex-end; margin-bottom: clamp(5px, -11.3636px + 4.5455vw, 45px) } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols.all .search .search-field { display: grid; width: 100%; grid-template-columns: auto 1fr 50px; align-items: center; height: 39px } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols.all .search .search-field label { color: #fff; font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; letter-spacing: -0.48px; text-box: trim-both cap alphabetic; padding-right: 10px; white-space: nowrap; height: inherit; align-content: center } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols.all .search .search-field button[type=submit] { color: #fff; height: inherit } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols.all .search .search-field button[type=submit]::before { content: ""; font-family: "Material Symbols Outlined"; color: #fff; font-size: 30px; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24 } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols.all .search .search-field input { height: inherit; border: 0; margin: 0; color: #000 } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col { padding-top: 12px; display: flex; flex-direction: column } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col.center { row-gap: clamp(1.5625rem, 4.8309vw + 0.4755rem, 4.0625rem) } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col .type-h3 { font-size: clamp(3rem, 2.9126vw + 0.8374rem, 3.75rem); color: #fff } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col .type-cta { color: #fff; font-size: clamp(0.75rem, 0.4831vw + 0.6413rem, 1rem); color: var(--C3-Graphene-Gray, #8C8C8C); font-style: normal; font-weight: 700; line-height: 16px; font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif; margin-bottom: 35px } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col ul { padding: 0; margin: 0; margin-left: 20px } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col ul li { color: #fff; text-box: trim-both cap alphabetic; font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif; font-size: clamp(0.625rem, 0.9662vw + 0.4076rem, 1.125rem); font-style: normal; font-weight: 500; letter-spacing: -0.48px; padding-bottom: 15px; position: relative; line-height: 1.1 } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col ul li:has(span) { padding-left: 20px } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col ul li:has(span)::before { content: "" } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col ul li a { color: inherit; font-size: inherit } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col ul li a:hover { color: #979797 } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col ul li::before { content: ">"; padding-right: 15px; font-weight: 300; position: absolute; left: -20px } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col .caption { display: flex; align-items: flex-start; justify-content: space-between; text-box: trim-both cap alphabetic; font-family: "Google Sans Code", "Roboto Mono", monospace; padding-top: 15px; font-size: clamp(0.75rem, 0.2415vw + 0.6957rem, 0.875rem); font-style: normal; font-weight: 500; line-height: 130%; letter-spacing: -0.36px; text-decoration: underline; column-gap: clamp(0.5625rem, 11.3527vw + -1.9918rem, 6.4375rem) } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col .caption a { color: #fff; text-decoration: underline; font-size: inherit } .nav-outer .nav-container .navbar ul.nav-links>li .menu-dropdown .drop-content .content-cols .drop-col .caption span { color: #979797; font-size: inherit } .nav-outer .nav-container .searchbar { width: fit-content; align-items: center; display: flex; height: inherit; margin-left: auto } .nav-outer .nav-container .searchbar ul.search-links { display: flex; align-items: flex-end; justify-content: center; height: inherit; width: fit-content; padding: 0; margin: 0 } .nav-outer .nav-container .searchbar ul.search-links>li { height: inherit; padding-left: 15px } .nav-outer .nav-container .searchbar ul.search-links>li>a { color: #fff; text-align: center; text-box: trim-both cap alphabetic; font-size: clamp(0.75rem, 0.2415vw + 0.6957rem, 0.875rem); font-style: normal; font-weight: 700; letter-spacing: -0.36px; display: block; height: inherit; display: flex; align-items: flex-end; padding-bottom: 9px; font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif; text-decoration: none } .nav-outer .nav-container .searchbar ul.search-links>li>a:hover { color: #979797; cursor: unset } .nav-outer .nav-container .searchbar ul.search-links>li:hover .menu-dropdown { display: block } .nav-outer .nav-container .searchbar ul.search-links>li.active .menu-dropdown { display: block } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown { width: 100%; max-width: 100%; position: absolute; left: 0; display: none; top: 59px } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown.active { display: block } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content { height: inherit } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content.search-drop { height: auto } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: clamp(0rem, 10.1449vw + -2.2826rem, 5.25rem); padding-inline: 15px; padding-bottom: 80px; background: #191919; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; height: inherit } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols.all { grid-template-columns: 1fr } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols.all .search { width: 948px; height: 150px; margin: auto; display: flex; align-items: flex-end; margin-bottom: clamp(5px, -11.3636px + 4.5455vw, 45px) } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols.all .search .search-field { display: grid; width: 100%; grid-template-columns: auto 1fr 50px; align-items: center; height: 39px } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols.all .search .search-field label { color: #fff; font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; letter-spacing: -0.48px; text-box: trim-both cap alphabetic; padding-right: 10px; white-space: nowrap; height: inherit; align-content: center } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols.all .search .search-field button[type=submit] { color: #fff; height: inherit } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols.all .search .search-field button[type=submit]::before { content: ""; font-family: "Material Symbols Outlined"; color: #fff; font-size: 30px; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24 } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols.all .search .search-field input { height: inherit; border: 0; margin: 0; color: #000 } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col { padding-top: 12px; display: flex; flex-direction: column } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col.center { row-gap: clamp(1.5625rem, 4.8309vw + 0.4755rem, 4.0625rem) } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col .type-h3 { font-size: clamp(3rem, 2.9126vw + 0.8374rem, 3.75rem); color: #fff } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col .type-cta { color: #fff; font-size: clamp(0.75rem, 0.4831vw + 0.6413rem, 1rem); color: var(--C3-Graphene-Gray, #8C8C8C); font-style: normal; font-weight: 700; line-height: 16px; font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif; margin-bottom: 35px } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col ul { padding: 0; margin: 0; margin-left: 20px } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col ul li { color: #fff; text-box: trim-both cap alphabetic; font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif; font-size: clamp(0.625rem, 0.9662vw + 0.4076rem, 1.125rem); font-style: normal; font-weight: 500; letter-spacing: -0.48px; padding-bottom: 15px; position: relative; line-height: 1.1 } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col ul li:has(span) { padding-left: 20px } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col ul li:has(span)::before { content: "" } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col ul li a { color: inherit; font-size: inherit } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col ul li a:hover { color: #979797 } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col ul li::before { content: ">"; padding-right: 15px; font-weight: 300; position: absolute; left: -20px } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col .caption { display: flex; align-items: flex-start; justify-content: space-between; text-box: trim-both cap alphabetic; font-family: "Google Sans Code", "Roboto Mono", monospace; padding-top: 15px; font-size: clamp(0.75rem, 0.2415vw + 0.6957rem, 0.875rem); font-style: normal; font-weight: 500; line-height: 130%; letter-spacing: -0.36px; text-decoration: underline; column-gap: clamp(0.5625rem, 11.3527vw + -1.9918rem, 6.4375rem) } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col .caption a { color: #fff; text-decoration: underline; font-size: inherit } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown .drop-content .content-cols .drop-col .caption span { color: #979797; font-size: inherit } .nav-outer .nav-container .searchbar ul.search-links>li:hover .menu-dropdown { display: none } .nav-outer .nav-container .searchbar ul.search-links>li.search-open .menu-dropdown { display: block } .nav-outer .nav-container .searchbar ul.search-links>li .menu-dropdown { height: auto } .nav-outer .nav-contact { background: #191919; height: 60px; padding: 0 15px 0 15px; border-radius: 6px; display: flex; position: relative; cursor: pointer; align-items: flex-end; padding-bottom: 7px; color: #fff; text-align: left; text-box: trim-both cap alphabetic; font-size: clamp(0.75rem, 0.2415vw + 0.6957rem, 0.875rem); line-height: 1.1; font-style: normal; font-weight: 700; letter-spacing: -0.36px; font-family: var(--font-helvetica-now-display), "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif; text-decoration: none } .nav-outer .nav-contact:hover { background-color: #fff; color: #000 } .nav-outer .nav-contact:hover::after { color: #000 !important } .nav-outer .nav-contact::after { content: ""; font-family: "Material Symbols Outlined"; position: absolute; top: 5px; right: 5px; color: #fff; font-size: 20px; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24 } }