/** * Cresset header — DEFERRED chunk (handle: cr-header-panels). * * Mega panels, slide-outs, Resources panel, search drawer and mobile drawer. * Loaded non-blocking; the matching `display: none` base rules are inlined in * so nothing here can flash before this file arrives. */ /* --- Dropdown / mega panels -------------------------------------------- */ .cr-nav__item.is-open > .cr-mega, .cr-nav__item--has-sub:hover > .cr-mega { display: flex; align-items: flex-start; } /* Right-edge items (Resources) keep the panel on-screen. */ .cr-nav__item--align-right > .cr-mega { left: auto; right: -20px; } .cr-mega__card { background: #fff; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 0; padding: 16px 20px; position: relative; /* cover the subnav shadow */ z-index: 16; } .is-open .cr-mega__card { background: #fff; } /* When a slide-out (Office Locations / Trust Services) is open, the main card and the slide-out card read as ONE continuous card (matches prod): equal heights, and the main card's inner edge goes flush — square corners plus its right-side shadow clipped so only the slide-out casts the shadow there (no double-shadow seam). */ .cr-mega:has(.cr-slideout.is-open) { align-items: stretch; } .cr-mega:has(.cr-slideout.is-open) > .cr-mega__card:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; clip-path: inset(-12px 0 -12px -12px); /* paint ON TOP of the slide-out so the slide-out's left shadow is hidden behind this opaque card rather than hard-clipped (which left a line just left of the divider). This card's own right shadow stays clipped flush. */ position: relative; z-index: 2; } .cr-mega__menu { list-style: none; margin: 0; padding: 0; } .cr-mega__menu li { margin: 0 0 11px; white-space: nowrap; } .cr-mega__menu li:last-child { margin-bottom: 0; } .cr-mega__menu a { display: inline-flex; align-items: center; gap: 4px; color: #414042; font-size: 15px; font-weight: 400; text-decoration: none; padding: 3px 0; /* Navy slide-underline for card items. */ background-image: linear-gradient(#005172, #005172); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.5s ease-out, color 0.3s ease; } .cr-mega__menu a:hover { color: #ff9e1b; background-size: 100% 1px; } .cr-mega__slideout-caret { width: 12px; height: 12px; transform: rotate(-90deg); margin-left: 5px; } /* --- Slide-outs (Office Locations / Trust Services) -------------------- */ /* .cr-slideout.is-open::after { content: ''; position: absolute; width: 10px; height: calc(100% - 10px); top: 5px; left: 3px; border-left: 1px solid #eeeeee; z-index: 15; pointer-events: none; }*/ .cr-slideout__panel { /* flex so the inner slide-out card stretches to the panel's full (stretched) height — Trust's short list otherwise left the card at its content height inside a taller panel (didn't reach 100% like prod). */ display: flex; overflow: hidden; max-width: 0; opacity: 0; border-radius: 0 10px 10px 0; /* cr-header.js sets the dynamic duration; this is the fallback. */ transition: opacity 0.8s ease, max-width 0.8s ease; } /* Slide-out drop shadow: the inner card's shadow is clipped away by this panel's overflow:hidden, so the slide-out cast no shadow (unlike prod's single-panel dropdown). Put the shadow on the panel itself — an element's own box-shadow isn't clipped by its own overflow — scoped to the open state so a 0-width closed panel leaves no shadow sliver at the seam. The panel's clip-path keeps the left edge flush (no double-shadow seam with the main card), and the right border-radius keeps the merged card's corners rounded. */ .cr-slideout.is-open .cr-slideout__panel { box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 0; } .cr-mega__card--locations, .cr-mega__card--trust { border-top-left-radius: 0; border-bottom-left-radius: 0; /* the slide-out's drop shadow is cast by .cr-slideout__panel; this inner card's own .cr-mega__card shadow would be clipped by the panel's overflow:hidden into a hard line right at the seam (an extra divider). */ box-shadow: none; } .cr-mega__locations-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; grid-template-rows: repeat(6, auto); column-gap: 25px; align-content: start; } .cr-mega__locations-grid li { margin: 0 0 11px; white-space: nowrap; } .cr-mega__locations-grid a { color: #414042; font-size: 15px; text-decoration: none; padding: 3px 0; background-image: linear-gradient(#005172, #005172); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.5s ease-out, color 0.3s ease; } .cr-mega__locations-grid a:hover { color: #ff9e1b; background-size: 100% 1px; } .cr-mega__menu--trust li { width: 175px; padding-left: 5px; } /* Trust slide-out has only a couple of items — sit them at the BOTTOM of the full-height card (matches the main card's lower items) rather than the top. */ .cr-mega__card--trust { display: flex; flex-direction: column; justify-content: flex-end; } /* --- Resources panel (podcast CTA + menu) ------------------------------ */ .cr-mega__card--resources { display: flex; align-items: flex-start; gap: 20px; } .cr-mega__cta { display: block; text-decoration: none; flex-shrink: 0; width: 355px; } .cr-mega__cta img { display: block; width: 355px; height: auto; border-radius: 4px; } .cr-mega__cta-text { display: inline-block; margin-top: 12px; color: #005172; font-size: 17px; } .cr-mega__cta:hover .cr-mega__cta-text { color: #ff9e1b; } .cr-mega__divider { align-self: stretch; border-left: 1px solid #eeeeee; } /* --- Search panel (top drawer) ------------------------------------------ Ports the header off-canvas search + Explore Topics pills (the pill styles come from layout/search-popup.css, with the kit accent color hardcoded as navy). */ .cr-search.is-open { display: block; } .cr-search__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 30; } .cr-search__drawer { position: absolute; top: 0; left: 0; right: 0; z-index: 40; background: #fff; padding: 40px 50px 30px; box-shadow: rgba(0, 0, 0, 0.1) 0 10px 10px 0; } .cr-search button.cr-search__close { all: unset; position: absolute; top: 14px; right: 20px; color: #414042; cursor: pointer; padding: 6px; } .cr-search__form { position: relative; } .cr-search__input { width: 100%; border: 0; border-radius: 200px; background: #efefef; padding: 18px 24px 18px 58px; font-size: 16px; color: #414042; } .cr-search__input:focus { outline: 2px solid #005172; } .cr-search button.cr-search__submit { all: unset; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: #414042; cursor: pointer; line-height: 0; } .cr-search__form.is-loading .cr-icon--search { animation: cressetSpin 2s linear infinite; } @keyframes cressetSpin { to { transform: rotate(360deg); } } .cr-search__form.is-loading .cr-search__input, .cr-search__form.is-loading .cr-search__submit { pointer-events: none; } .cr-search .recent-searches { margin-top: 24px; } .cr-search .recent-searches p { margin-block-end: 0; } .cr-search .recent-searches strong { color: #005172; } .cr-search .recent-searches ul { padding: 0; margin: 5px 0 0; display: flex; gap: 20px; row-gap: 12px; flex-wrap: wrap; list-style: none; } .cr-search .recent-searches li { display: flex; overflow: hidden; border-radius: 200px; } .cr-search .recent-searches a { position: relative; z-index: 0; color: #005172; border: 2px solid #005172; border-radius: 200px; padding: 3px 10px 2px; text-decoration: none; } .cr-search .recent-searches a::before { content: ''; position: absolute; left: 0; top: 0; height: 102%; width: 0; z-index: -1; background-color: #005172; transition: width 0.3s; } .cr-search .recent-searches a:hover { color: #fff; } .cr-search .recent-searches a:hover::before { width: 101%; } /* --- Mobile drawer ------------------------------------------------------ */ .cr-drawer__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 10000; } .cr-drawer__panel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; z-index: 10001; background: #fff; padding: 20px 20px 24px; overflow-y: auto; } /* Prod's drawer gets more breathing room on tablet (wider padding). */ @media (min-width: 768px) and (max-width: 1024px) { .cr-drawer__panel { padding: 50px 50px 24px; } } .cr-drawer button.cr-drawer__close { all: unset; position: absolute; /* 4px + 6px padding puts the 28px glyph 10px from the top-right corner, matching prod's close. */ top: 4px; right: 4px; color: #ff9e1b; cursor: pointer; padding: 6px; } .cr-drawer__close .cr-icon { width: 28px; height: 28px; } .cr-drawer__search { position: relative; /* Full width minus room for the close button (matches prod: search left edge at the panel padding, right edge clears the top-right close). */ margin-right: 55px; margin-bottom: 11px; } .cr-drawer__search input { width: 100%; border: 1px solid #cdcdcd; border-radius: 40px; background: #eee; padding: 18px 24px 18px 52px; font-size: 16px; color: #414042; } .cr-drawer__search input:focus { outline: 2px solid #005172; } .cr-drawer button[type="submit"] { all: unset; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: #414042; cursor: pointer; line-height: 0; } .cr-drawer__menu { list-style: none; margin: 0; padding: 0; } .cr-drawer__row { display: flex; align-items: center; justify-content: flex-start; } .cr-drawer__row > a { flex-grow: 0; padding: 15px 0; color: #000; font-size: 19px; font-weight: 500; letter-spacing: 1px; text-transform: capitalize; text-decoration: none; } .cr-drawer__item.button > .cr-drawer__row > a { color: #000; font-weight: 400; } /* Parent toggle: the whole row is a button (label + chevron), so tapping anywhere on it opens the submenu — a much larger target than the old chevron-only button, and it never navigates. */ .cr-drawer button.cr-drawer__sub-toggle { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; padding-right: 10px; color: #005172; /* chevron colour (currentColor) */ cursor: pointer; transition: color 0.25s ease; } /* Label inside the toggle — matches the top-level leaf-link typography. */ .cr-drawer__sub-label { padding: 15px 0; color: #000; font-size: 19px; font-weight: 500; letter-spacing: 1px; text-transform: capitalize; transition: color 0.25s ease; } .cr-drawer__sub-toggle:hover .cr-drawer__sub-label { color: #005172; } /* Chevron (angle-down glyph): points RIGHT when the submenu is closed (rotate -90deg), rotates DOWN when open. */ .cr-drawer__sub-toggle .cr-icon { width: 12px; height: 12px; transform: rotate(-90deg); transition: transform 0.25s ease; } .cr-drawer__sub-toggle[aria-expanded="true"] .cr-icon { transform: rotate(0deg); } .cr-drawer__submenu { list-style: none; margin: 0; padding: 0; background: #f6f6f6; /* Accordion: collapsed by default; expands when the parent item's sub-toggle is aria-expanded="true" (rule below). max-height is a ceiling above the tallest submenu (Resources ≈ 8 items); opacity + padding animate in tandem for a smooth reveal. */ max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.32s ease, opacity 0.25s ease, padding 0.32s ease; } .cr-drawer__item:has( .cr-drawer__sub-toggle[aria-expanded="true"] ) > .cr-drawer__submenu { max-height: 500px; opacity: 1; padding: 10px 0; } /* Respect reduced-motion: reveal instantly, no slide. */ @media (prefers-reduced-motion: reduce) { .cr-drawer__submenu { transition: none; } } /* Submenu items: a step down from the top level — smaller, lighter, indented, and tighter vertical rhythm than the main items. */ .cr-drawer__submenu a { display: block; padding: 8px 0 8px 20px; color: #000; font-size: 17px; font-weight: 400; letter-spacing: 1px; text-transform: capitalize; text-decoration: none; } .cr-drawer__submenu a:hover, .cr-drawer__row > a:hover { color: #005172; } /* Active LINK state = orange (#ff9e1b): current page's item + any expanded dropdown's parent link. Placed after :hover so open/current wins. */ .cr-drawer__row > a[aria-current="page"], .cr-drawer__submenu a[aria-current="page"], .cr-drawer__sub-toggle[aria-expanded="true"] .cr-drawer__sub-label { color: #ff9e1b; } /* Chevron active colour: #ffbc6c when its submenu is open (navy #005172 when closed, set on the base rule above). */ .cr-drawer button.cr-drawer__sub-toggle[aria-expanded="true"] { color: #ffbc6c; } .cr-drawer__login { display: inline-block; margin-top: 20px; color: #aaabad; font-size: 19px; text-transform: capitalize; text-decoration: none; } .cr-drawer__login:hover { color: #005172; }