/** * EXS Theme — gold & navy brand styling, groupbooks-style two-row mast. */ :root { --exs-navy: #0a1a30; --exs-navy-light: #16395f; --exs-gold: #d5b150; --exs-gold-dark: #b8943a; --exs-cream: #f7f1e1; --content-left: 0px; } /* ---- Remove side columns so mast and content span full width ---- */ .site-header__initial, .social-bar { display: none; } .site-header__inner { width: 100%; } .container { max-width: none; } .page-wrapper { max-width: none; background: var(--color--white); } /* ---- Mast: brand row (logo) ---- */ .site-header { background: linear-gradient(180deg, #0d4da5 9%, #215ea0 21%, #ffffff 61%); border-bottom: 3px solid var(--exs-gold); } .site-header__inner { background: transparent; } .site-header__inner__container { flex-direction: column; align-items: center; gap: 0; max-width: none; width: 100%; margin-inline: 0; padding-inline: 1.5rem; } .site-branding { padding: 1rem 0; background-image: none; background-color: transparent; margin-inline: 0; min-width: 0; } .site-branding__name, .site-branding__name a { color: #f6f6f6 !important; } .site-branding__name a { font-size: 3rem; text-shadow: -1px 2px 8px var(--exs-gold); -webkit-text-stroke: 3px #735b1b; paint-order: stroke fill; } /* ---- Mast: navigation row (full width gold bar) ---- */ /* Scoped to desktop only: on mobile, .header-nav is the off-canvas menu drawer. */ html { overflow-x: hidden; } @media (min-width: 75rem) { .header-nav { width: 90%; background-color: var(--exs-gold); box-shadow: 0 0 0 100vmax var(--exs-gold); height: 36px !important; min-height: 0 !important; overflow: hidden; } body:not(.is-always-mobile-nav) .header-nav { padding-inline-end: revert; justify-content: center; } /* flex-basis (not height) governs size in this column-flex ancestor. */ .header-nav { flex-basis: 36px !important; } body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner { padding-block: 4px; } /* * Olivero's base .primary-nav__menu rule sets flex-wrap: wrap and is * never reset for desktop widths, so the menu items can wrap onto a * second row inside the 36px-tall gold nav bar. nav-resize.js's * ResizeObserver then sees the menu as taller than a single nav item * and permanently adds is-always-mobile-nav to (no recovery * until the viewport is resized). Force a single row, and keep link * labels (e.g. "Downloads") from wrapping internally too. */ body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 { flex-wrap: nowrap !important; } body:not(.is-always-mobile-nav) .primary-nav__menu-link, body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner, body:not(.is-always-mobile-nav) .secondary-nav__menu-link { white-space: nowrap; } body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner::after { border-top-width: 2px; border-top-color: currentColor; } .block-search-wide__button { height: 36px; padding-block: 6px; } .region--secondary-menu, .region--secondary-menu > div, #block-exs-theme-account-menu { height: 36px; } .secondary-nav__menu-link { display: flex; align-items: center; height: 36px; } /* ---- Search-wide dropdown: smaller, centered ---- */ .block-search-wide__wrapper { width: min(40rem, 90vw); max-width: 40rem; inset-inline-start: 0; inset-inline-end: 0; margin-inline: auto; height: 36px; border-inline-start: none; border-radius: 0 0 8px 8px; } .block-search-wide__wrapper.is-active { max-height: 36px; } .block-search-wide__wrapper input[type="search"] { height: 36px; min-height: 36px; font-size: 1rem; padding-inline-start: 1rem; } [dir] .block-search-wide__wrapper input[type="search"]:focus { background-size: 100% 2px; } .block-search-wide__wrapper .search-form__submit { position: static; width: 2.5rem; } .block-search-wide__wrapper .search-form__submit .icon--search { width: 1rem; inset-inline-end: 0.75rem; } .block-search-wide__button svg { width: 1rem; height: 1rem; } } .primary-nav__menu-link-inner, .primary-nav__menu-link { color: var(--exs-navy) !important; } .primary-nav__menu-link.is-active .primary-nav__menu-link-inner, .primary-nav__menu-link:hover .primary-nav__menu-link-inner { color: var(--exs-navy-light) !important; } /* Same hover/active indicator style as the "My account" secondary nav link (thin currentColor underline, sized in the @media (min-width: 75rem) block above). */ .primary-nav__menu-link.is-active .primary-nav__menu-link-inner::after { transform: scaleX(1); } /* ---- Footer ---- */ .site-footer { background-color: var(--exs-navy); color: var(--exs-cream); } .site-footer a { color: var(--exs-gold); } /* ---- General links & buttons ---- */ .button--primary, input.button--primary { background-color: var(--exs-gold); border-color: var(--exs-gold-dark); color: var(--exs-navy); } .button--primary:hover, input.button--primary:hover { background-color: var(--exs-gold-dark); } /* ---- Homepage slideshow (hero region) ---- */ .exs-slideshow { position: relative; width: 100%; height: 28rem; max-height: 60vh; overflow: hidden; background-color: var(--exs-navy); } .exs-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease-in-out; display: flex; align-items: center; color: inherit; text-decoration: none; cursor: pointer; } .exs-slide.is-active { opacity: 1; z-index: 1; } .exs-slide__caption { max-width: 38rem; margin: 0 5vw; color: var(--exs-cream); background: rgba(10, 26, 48, 0.6); padding: 2rem; border-radius: 4px; } .exs-slide__caption h2 { color: var(--exs-gold); margin-top: 0; font-size: 1.75rem; } .exs-slide__caption p { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.5; } @media (max-width: 600px) { .exs-slideshow { height: 22rem; } .exs-slide__caption { padding: 1rem; max-width: 90vw; } .exs-slide__caption h2 { font-size: 1.25rem; } } /* ---- Brand grid (Our Brands page / front page) ---- */ #block-exs-brand-cards { margin-block-start: -5.5rem; } .exs-brand-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin: 0; } .exs-brand-card { flex: 1 1 15rem; max-width: 18rem; border: 1px solid var(--exs-gold); border-radius: 6px; padding: 1rem; background: #fff; text-align: center; box-shadow: 0 2px 6px rgba(10, 26, 48, 0.15); margin-top: 1.5rem; } .exs-brand-card h3 { margin-top: 0; color: var(--exs-navy-light); } .exs-brand-card a.exs-brand-card__link { color: var(--exs-navy-light); font-weight: 600; }