/* ========================================================================== ZHR Header v1.0.0 Depth comes from one consistent rule: every raised surface gets an inset top highlight, a gradient running with a single light source, and an ambient shadow tinted with the brand blue rather than pure black. Colours arrive as var(--zhd-*) from the settings screen. Specificity is high and !important guards the properties themes fight over. ========================================================================== */ :root{ --zhd-ink:#1B4BA5; --zhd-ink-soft:#3F6FC9; --zhd-accent:#A36801; --zhd-bar:#FFFFFF; --zhd-text:#12356F; --zhd-h-lg:74px; --zhd-h-sm:62px; --zhd-h:var(--zhd-h-lg); --zhd-logo-h:58px; --zhd-line:rgba(18,42,88,.11); --zhd-r:12px; --zhd-lift:0 1px 2px rgba(16,38,84,.05),0 6px 16px rgba(16,38,84,.07); --zhd-lift-2:0 2px 6px rgba(16,38,84,.10),0 16px 34px -10px rgba(16,38,84,.28); --zhd-lift-3:0 4px 10px rgba(16,38,84,.12),0 24px 48px -16px rgba(16,38,84,.34); } /* Scoped border-box. Most themes set this globally, but not all, and without it the drawer's padding was added on top of its width: on a 390px screen the panel came out 383px wide, leaving 7px of scrim to tap to close. */ .zhr-hd,.zhr-hd *,.zhr-hd *::before,.zhr-hd *::after, .zhr-dr,.zhr-dr *,.zhr-dr *::before,.zhr-dr *::after{box-sizing:border-box} .zhr-sr,.zhr-hd .zhr-sr{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .zhr-skip{ position:absolute;left:-9999px;top:0;z-index:100000; background:var(--zhd-ink);color:#fff!important;padding:12px 20px;border-radius:0 0 10px 0; font-weight:700;text-decoration:none!important; } .zhr-skip:focus{left:0} /* ===== bar ================================================================ */ .zhr-hd{ position:relative;z-index:9990;width:100%; background:linear-gradient(180deg,#fff 0%,var(--zhd-bar) 100%); box-shadow:inset 0 -1px 0 var(--zhd-line); font-family:inherit; } .zhr-hd--sticky{position:fixed;top:0;left:0;right:0} .zhr-hd.is-stuck{ box-shadow:inset 0 -1px 0 var(--zhd-line),var(--zhd-lift-2); backdrop-filter:saturate(160%) blur(10px); background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.88)); } .zhr-hd__spacer{height:var(--zhd-h)} .zhr-hd:not(.zhr-hd--sticky) ~ .zhr-hd__spacer{display:none} .zhr-hd__inner{ max-width:1280px;margin:0 auto;padding:0 22px; height:var(--zhd-h);display:flex;align-items:center;gap:18px; transition:height .28s cubic-bezier(.22,.61,.36,1); } .zhr-hd.is-stuck .zhr-hd__inner{height:calc(var(--zhd-h) - 8px)} /* ===== logo =============================================================== */ .zhr-hd__logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none!important} /* Height comes from the settings screen via --zhd-logo-h. On small screens it is capped so a large desktop logo cannot outgrow the shorter mobile bar. */ .zhr-hd__logo img{ width:auto!important;max-width:none;display:block; height:var(--zhd-logo-h,58px)!important; transition:transform .3s cubic-bezier(.22,.61,.36,1),height .28s cubic-bezier(.22,.61,.36,1); } .zhr-hd.is-stuck .zhr-hd__logo img{height:calc(var(--zhd-logo-h,58px) - 6px)!important} .zhr-hd__logo:hover img{transform:translateY(-1px) scale(1.02)} .zhr-hd__wordmark{font-size:21px;font-weight:800;color:var(--zhd-text)!important;letter-spacing:-.02em} /* ===== primary menu ======================================================= */ .zhr-hd__nav{flex:1 1 auto;min-width:0;display:flex;justify-content:center} .zhr-hd__menu{ display:flex!important;align-items:center;gap:2px; list-style:none!important;margin:0!important;padding:0!important; } .zhr-hd__menu li{position:relative;margin:0!important;list-style:none!important} .zhr-hd__menu > li > a{ display:block;padding:10px 15px!important;border-radius:10px; font-size:15px!important;font-weight:600!important;color:var(--zhd-text)!important; text-decoration:none!important;white-space:nowrap; transition:background .2s ease,color .2s ease,transform .16s ease,box-shadow .2s ease; } .zhr-hd__menu > li > a:hover, .zhr-hd__menu > li:focus-within > a{ background:linear-gradient(180deg,#fff,#EEF3FC)!important; box-shadow:inset 0 0 0 1px var(--zhd-line),inset 0 1px 0 #fff,0 3px 8px rgba(16,38,84,.09); transform:translateY(-1px); } .zhr-hd__menu > li.current-menu-item > a, .zhr-hd__menu > li.current_page_item > a, .zhr-hd__menu > li.current-menu-parent > a{ color:var(--zhd-ink)!important; background:linear-gradient(180deg,#F3F7FE,#E7EFFC)!important; box-shadow:inset 0 0 0 1px rgba(27,75,165,.2); } .zhr-hd__menu > li.menu-item-has-children > a::after{ content:"";display:inline-block;margin-left:7px;width:6px;height:6px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg);opacity:.6; } /* dropdown, opens with a 3D hinge from the top edge */ .zhr-hd__menu .sub-menu{ position:absolute;top:calc(100% + 10px);left:0;z-index:20; min-width:224px;padding:8px!important;margin:0!important;list-style:none!important; background:linear-gradient(180deg,#fff,#FAFCFF);border-radius:14px; box-shadow:inset 0 0 0 1px var(--zhd-line),inset 0 1px 0 #fff,var(--zhd-lift-3); opacity:0;visibility:hidden;pointer-events:none; transform:perspective(800px) rotateX(-10deg) translateY(-6px);transform-origin:50% 0; transition:opacity .2s ease,transform .24s cubic-bezier(.22,.61,.36,1),visibility .24s; } .zhr-hd__menu > li:hover > .sub-menu, .zhr-hd__menu > li:focus-within > .sub-menu{ opacity:1;visibility:visible;pointer-events:auto; transform:perspective(800px) rotateX(0) translateY(0); } .zhr-hd__menu .sub-menu::before{ /* little pointer */ content:"";position:absolute;top:-5px;left:24px;width:10px;height:10px; background:#fff;transform:rotate(45deg); box-shadow:inset 1px 1px 0 var(--zhd-line); } .zhr-hd__menu .sub-menu a{ display:block;padding:10px 12px!important;border-radius:9px; font-size:14.5px!important;font-weight:600!important;color:var(--zhd-text)!important; text-decoration:none!important;transition:background .16s ease,color .16s ease; } .zhr-hd__menu .sub-menu a:hover{background:#EEF3FC!important;color:var(--zhd-ink)!important} /* ===== action buttons ===================================================== */ .zhr-hd__actions{display:flex;align-items:center;gap:9px;flex:0 0 auto;margin-left:auto} .zhr-hd__btn{ position:relative;display:inline-flex!important;align-items:center;justify-content:center; width:44px;height:44px;flex:0 0 auto;padding:0!important;border:0!important; border-radius:50%!important;cursor:pointer;text-decoration:none!important; background:linear-gradient(180deg,#fff 0%,#F1F5FC 100%)!important; box-shadow:inset 0 0 0 1px var(--zhd-line),inset 0 1px 0 #fff,var(--zhd-lift)!important; color:var(--zhd-text)!important; transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .22s ease,background .22s ease; } /* Same armour as the drawer close button: pin the stroke on the child paths, otherwise a theme rule on `path` blanks the icons out. */ .zhr-hd .zhr-hd__btn svg{width:20px;height:20px;display:block!important} .zhr-hd .zhr-hd__btn svg, .zhr-hd .zhr-hd__btn svg *{ stroke:currentColor!important;stroke-width:1.8!important;fill:none!important; stroke-linecap:round!important;stroke-linejoin:round!important;opacity:1!important; } .zhr-hd__btn:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(27,75,165,.28),inset 0 1px 0 #fff,var(--zhd-lift-2)!important; } .zhr-hd__btn:active{transform:translateY(1px)} .zhr-hd__btn:focus-visible{outline:3px solid rgba(27,75,165,.45);outline-offset:2px} /* the account button is the primary one, so it is filled */ .zhr-hd__btn--acct, .zhr-hd__acct.is-open .zhr-hd__btn--acct{ background:linear-gradient(180deg,var(--zhd-ink-soft) 0%,var(--zhd-ink) 100%)!important; color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 4px rgba(16,38,84,.2), 0 10px 20px -8px rgba(16,38,84,.6)!important; } .zhr-hd__btn--acct:hover{filter:brightness(1.08)} .zhr-hd__count{ position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px; display:inline-flex;align-items:center;justify-content:center; border-radius:999px;background:var(--zhd-accent);color:#fff; font-size:11px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px #fff,0 2px 6px rgba(16,38,84,.3); } .zhr-hd__cta{ display:inline-flex!important;align-items:center;justify-content:center; height:44px;padding:0 20px!important;border-radius:var(--zhd-r)!important;border:0!important; font-size:14.5px!important;font-weight:700!important;white-space:nowrap; text-decoration:none!important; background:linear-gradient(180deg,var(--zhd-ink-soft),var(--zhd-ink))!important;color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 2px 4px rgba(16,38,84,.18), 0 10px 20px -8px rgba(16,38,84,.55)!important; transition:transform .16s ease,filter .2s ease; } .zhr-hd__cta:hover{transform:translateY(-2px);filter:brightness(1.08);color:#fff!important} .zhr-hd__cta:active{transform:translateY(1px)} /* ===== account dropdown =================================================== */ .zhr-hd__acct{position:relative} .zhr-hd__menu-drop{ position:absolute;top:calc(100% + 12px);right:0;z-index:30;min-width:236px; padding:8px!important;border-radius:15px; background:linear-gradient(180deg,#fff,#FAFCFF); box-shadow:inset 0 0 0 1px var(--zhd-line),inset 0 1px 0 #fff,var(--zhd-lift-3); transform-origin:100% 0; animation:zhd-drop .24s cubic-bezier(.22,.61,.36,1) both; } @keyframes zhd-drop{ from{opacity:0;transform:perspective(800px) rotateX(-12deg) translateY(-8px) scale(.98)} to{opacity:1;transform:none} } .zhr-hd__menu-drop::before{ content:"";position:absolute;top:-5px;right:16px;width:10px;height:10px; background:#fff;transform:rotate(45deg);box-shadow:inset 1px 1px 0 var(--zhd-line); } .zhr-hd__greet{ margin:0 0 4px!important;padding:9px 12px 11px; font-size:13px;font-weight:700;color:var(--zhd-ink)!important; border-bottom:1px solid var(--zhd-line); } .zhr-hd__menu-drop ul{list-style:none!important;margin:0!important;padding:0!important} .zhr-hd__menu-drop li{margin:0!important;list-style:none!important} .zhr-hd__menu-drop a{ display:block;padding:10px 12px!important;border-radius:9px; font-size:14.5px!important;font-weight:600!important;color:var(--zhd-text)!important; text-decoration:none!important;transition:background .16s ease,color .16s ease,transform .16s ease; } .zhr-hd__menu-drop a:hover{background:#EEF3FC!important;color:var(--zhd-ink)!important;transform:translateX(2px)} .zhr-hd__menu-drop li:last-child a{color:#9AA5B6!important} .zhr-hd__menu-drop li:last-child a:hover{color:#C0392B!important;background:#FDF0EE!important} /* ===== search ============================================================= */ .zhr-hd__search{ border-top:1px solid var(--zhd-line); background:linear-gradient(180deg,#FBFCFE,#F4F8FD); animation:zhd-slide .26s cubic-bezier(.22,.61,.36,1) both; } @keyframes zhd-slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .zhr-hd__search form{ max-width:1280px;margin:0 auto;padding:14px 22px; display:flex;align-items:center;gap:10px;position:relative; } .zhr-hd__search svg{width:19px;height:19px;stroke:var(--zhd-text);stroke-width:1.8;fill:none; stroke-linecap:round;flex:0 0 auto;opacity:.6} .zhr-hd__search input[type="search"]{ flex:1 1 auto;min-width:0;height:48px;padding:0 16px!important; border:0!important;border-radius:var(--zhd-r)!important;background:#fff!important; box-shadow:inset 0 0 0 1px var(--zhd-line),inset 0 1px 2px rgba(16,38,84,.05)!important; font-size:15px!important;color:var(--zhd-text)!important; } .zhr-hd__search input[type="search"]:focus{ outline:3px solid rgba(27,75,165,.35);outline-offset:1px; } .zhr-hd__search button{ height:48px;padding:0 22px!important;border:0!important;border-radius:var(--zhd-r)!important; font-size:14.5px!important;font-weight:700!important;cursor:pointer; background:linear-gradient(180deg,var(--zhd-ink-soft),var(--zhd-ink))!important;color:#fff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 6px 14px -6px rgba(16,38,84,.6)!important; } /* ===== burger ============================================================= */ .zhr-hd__burger{display:none!important;flex-direction:column;gap:4px} .zhr-hd__burger span{ display:block;width:18px;height:2px;border-radius:2px;background:currentColor; transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .18s ease; } .zhr-hd__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .zhr-hd__burger[aria-expanded="true"] span:nth-child(2){opacity:0} .zhr-hd__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ===== mobile drawer ====================================================== */ .zhr-dr{position:fixed;inset:0;z-index:9995} .zhr-dr[hidden]{display:none} .zhr-dr__scrim{ position:absolute;inset:0;background:rgba(9,20,38,.5); backdrop-filter:blur(3px);animation:zhd-fade .28s ease both; } @keyframes zhd-fade{from{opacity:0}to{opacity:1}} .zhr-dr__panel{ position:absolute;top:0;right:0;bottom:0;width:min(84vw,360px); background:linear-gradient(180deg,#fff,#F7FAFE); box-shadow:-24px 0 60px -20px rgba(9,20,38,.45); padding:18px 20px 30px;overflow-y:auto; animation:zhd-in .34s cubic-bezier(.22,.61,.36,1) both; transform-origin:100% 50%; } @keyframes zhd-in{ from{opacity:.4;transform:perspective(1000px) translateX(100%) rotateY(-12deg)} to{opacity:1;transform:none} } .zhr-dr__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .zhr-dr__title{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--zhd-ink)} /* Themes style bare