/* MAS sitewide header: "Directory With Answer Bar". Reads tokens.css only. Destined for components.css (or mu-plugins/assets/mas-header.css). */ .mas-hdr { --hdr-bar: 80px; --hdr-x: clamp(16px, 3vw, 40px); --hdr-max: 82.5rem; /* 1320px at the default text size; grows with a larger browser font so the bar never crowds */ position: sticky; top: 0; z-index: 1000; font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; } .mas-hdr *, .mas-hdr *::before, .mas-hdr *::after { box-sizing: border-box; } .mas-hdr a { color: inherit; text-decoration: none; } .mas-hdr :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } .mas-hdr__in { max-width: var(--hdr-max); margin: 0 auto; padding: 0 var(--hdr-x); display: flex; align-items: center; } /* ---------- Main bar ---------- */ .mas-hdr__bar { height: var(--hdr-bar); background: var(--paper); border-bottom: 1px solid var(--line); position: relative; } .mas-hdr__bar > .mas-hdr__in { height: 100%; gap: clamp(16px, 2vw, 36px); } .mas-hdr__logo { flex: none; display: block; } .mas-hdr__logo img { display: block; width: clamp(150px, 13vw, 180px); height: auto; } .mas-hdr__nav { height: 100%; } .mas-hdr__menus { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; gap: clamp(12px, 1.6vw, 28px); } .mas-hdr__menus > li { display: flex; } .mas-hdr__trigger { font: inherit; font-size: var(--text-body); color: var(--navy); background: none; border: 0; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 0 2px; height: 100%; position: relative; transition: color .18s; white-space: nowrap; } .mas-hdr__trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--blue); transform: scaleX(0); transition: transform .22s cubic-bezier(.16,1,.3,1); } .mas-hdr__trigger svg { width: 12px; height: 8px; transition: transform .2s cubic-bezier(.16,1,.3,1); } .mas-hdr__trigger[aria-expanded="true"] { color: var(--blue); } .mas-hdr__trigger[aria-expanded="true"]::after { transform: scaleX(1); } .mas-hdr__trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .mas-hdr__trigger:focus-visible { outline-offset: -3px; } .mas-hdr__cta { margin-left: auto; display: flex; align-items: center; gap: 18px; flex: none; } .mas-hdr__phone { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--text-body); font-weight: 600; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; } .mas-hdr__phone svg { width: 18px; height: 18px; color: var(--blue); } .mas-hdr__find { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--navy); cursor: pointer; padding: 0; } .mas-hdr__find[aria-expanded="true"] { color: var(--blue); } .mas-hdr__login { display: flex; align-items: center; min-height: 44px; font-size: var(--text-body); color: var(--navy); white-space: nowrap; } .mas-hdr__quote { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; background: var(--blue); color: var(--paper) !important; font-size: var(--text-btn); font-weight: var(--w-btn); border-radius: var(--r-btn); white-space: nowrap; transition: background .18s, box-shadow .18s; } /* Search row: drops under the bar when the search button is pressed */ .mas-hdr__searchbar { background: var(--canvas); border-bottom: 1px solid var(--line); padding: 14px 0; } .mas-hdr__searchbar[hidden] { display: none; } .mas-hdr__search { display: flex; align-items: center; height: 48px; border: 1px solid var(--line-strong); background: var(--paper); } .mas-hdr__searchbar .mas-hdr__search { flex: 1; max-width: 720px; margin-left: auto; } .mas-hdr__search:focus-within { border-color: var(--blue); outline: 2px solid var(--blue); outline-offset: -1px; } .mas-hdr__search input { font: inherit; font-size: var(--text-body); color: var(--ink); border: 0; background: transparent; flex: 1; min-width: 0; height: 100%; padding: 0 14px; outline: none; } .mas-hdr__search input::placeholder { color: var(--ink-soft); } .mas-hdr__search input:focus-visible { outline: none; } .mas-hdr__search button { display: grid; place-items: center; width: 48px; height: 100%; border: 0; background: transparent; color: var(--navy); cursor: pointer; } /* ---------- Panels ---------- */ .mas-hdr__panel { position: absolute; top: 100%; left: 50%; width: min(var(--pw, 70rem), calc(100vw - 2 * var(--hdr-x))); transform: translate(-50%, 0); background: var(--paper); border: 1px solid var(--line); border-top: 0; box-shadow: var(--shadow-lg); } .mas-hdr__panel[hidden] { display: none; } .mas-hdr__panel.is-entering { animation: mas-hdr-in .22s cubic-bezier(.16,1,.3,1); } @keyframes mas-hdr-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } } .mas-hdr__panel--2 { --pw: 56.25rem; } .mas-hdr__cols { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 0 56px; padding: 30px 40px 26px; } .mas-hdr__panel--3 .mas-hdr__cols { --cols: 3; gap: 0 44px; } .mas-hdr__label { font-family: var(--font); font-size: var(--text-sm); line-height: 1.3; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; padding: 0 0 10px; border-bottom: 1px solid var(--line); } .mas-hdr__col ul { list-style: none; margin: 0; padding: 0; } .mas-hdr__col li.mas-hdr__has-fig { display: flex; align-items: baseline; gap: 12px; } .mas-hdr__col li a { display: flex; align-items: baseline; justify-content: flex-start; gap: 12px; min-height: 40px; padding: 9px 0; font-size: var(--text-body); line-height: 1.3; color: var(--navy); } .mas-hdr__col li a.mas-hdr__all { color: var(--blue); font-weight: 600; } .mas-hdr__arrow { display: inline-block; width: 15px; height: 11px; margin-left: 7px; vertical-align: -1px; transition: transform .2s cubic-bezier(.16,1,.3,1); } .mas-hdr__fig { flex: none; font-size: var(--text-prose-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; border-radius: var(--r-sm); padding: 0 4px; } .mas-hdr__fig b { font-weight: 600; color: var(--good); font-size: var(--text-prose-sm); } /* Answer bar: closes every panel */ .mas-hdr__answer { background: var(--blue); color: var(--paper); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 28px; padding: 16px 40px; font-size: var(--text-body); line-height: 1.35; } .mas-hdr__answer-v { font-size: var(--text-figure-lead); font-weight: 300; font-variant-numeric: tabular-nums; margin-left: 2px; border-radius: var(--r-sm); padding: 0 4px; } /* Shown only when live rates are unavailable, so it reads at the same size as the live line it replaces. */ .mas-hdr__answer-sub { color: var(--paper); font-size: var(--text-body); } .mas-hdr__answer a:not(.mas-hdr__btn-light) { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; } .mas-hdr__answer :focus-visible { outline-color: var(--paper); } .mas-hdr__btn-light { margin-left: auto; align-self: center; display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; background: var(--paper); color: var(--navy) !important; font-size: var(--text-btn); border-radius: var(--r-btn); white-space: nowrap; transition: background .18s; } /* New York visitors: MAS is not licensed there, so the answer bar carries only that notice */ .mas-hdr__ny { display: none; } .mas-hdr.is-ny .mas-hdr__answer > * { display: none; } .mas-hdr.is-ny .mas-hdr__answer > .mas-hdr__ny { display: inline; } /* Hover only where a real pointer hovers, so taps don't leave links stuck blue */ @media (hover: hover) { .mas-hdr__login:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } .mas-hdr__find:hover { color: var(--blue); } .mas-hdr__search button:hover { color: var(--blue); } .mas-hdr__trigger:hover { color: var(--blue); } .mas-hdr__phone:hover { color: var(--blue); } .mas-hdr__quote:hover { background: var(--blue-600); box-shadow: var(--shadow-md); } .mas-hdr__col li a:hover span:first-child { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } .mas-hdr__col li a:hover .mas-hdr__arrow { transform: translateX(3px); } .mas-hdr__btn-light:hover { background: var(--blue-100); } } /* Signature: live figures re-set in place when the state changes */ /* .is-updated sits on the [data-live] element, or on the inside a term figure ("up to 6.65%"). */ .mas-hdr .is-updated { animation: mas-hdr-flash 1.1s cubic-bezier(.16,1,.3,1); } @keyframes mas-hdr-flash { 0% { background: rgba(29,78,216,.22); } 100% { background: transparent; } } .mas-hdr .mas-hdr__answer .is-updated { animation-name: mas-hdr-flash-dark; } @keyframes mas-hdr-flash-dark { 0% { background: rgba(255,255,255,.28); } 100% { background: transparent; } } /* ---------- Laptop band: phone number becomes an icon so the bar never crowds ---------- */ .mas-hdr__burger, .mas-hdr__call { display: none; } .mas-hdr__call { place-items: center; width: 44px; height: 44px; color: var(--navy); } .mas-hdr__call svg { width: 22px; height: 22px; } @media (min-width: 70.0625em) and (max-width: 84.9375em) { .mas-hdr__logo img { width: 140px; } .mas-hdr__cta > .mas-hdr__phone { display: none; } .mas-hdr__cta > .mas-hdr__call { display: grid; } .mas-hdr__cta { gap: 8px; } } /* ---------- Tablet and phone ---------- */ @media (max-width: 70em) { .mas-hdr__find, .mas-hdr__login, .mas-hdr__searchbar { display: none !important; } .mas-hdr__bar { height: 68px; } .mas-hdr__bar > .mas-hdr__in { gap: 12px; } .mas-hdr__logo img { width: 140px; } .mas-hdr__nav, .mas-hdr__phone { display: none; } .mas-hdr__cta { gap: 8px; } .mas-hdr__quote { min-height: 44px; padding: 0 16px; font-size: var(--text-prose-sm); } .mas-hdr__call { display: grid; } .mas-hdr__burger { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--navy); cursor: pointer; padding: 0; } .mas-hdr__burger svg { width: 26px; height: 26px; } .mas-hdr.is-drawer .mas-hdr__nav { display: block; position: fixed; top: var(--drawer-top, 68px); right: 0; bottom: 0; left: 0; height: auto; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); } .mas-hdr__menus { display: block; height: auto; } .mas-hdr__menus > li { display: block; border-bottom: 1px solid var(--line); } .mas-hdr__trigger { width: 100%; justify-content: space-between; height: 60px; padding: 0 var(--hdr-x); font-size: var(--text-lede); } .mas-hdr__trigger::after { display: none; } .mas-hdr__panel { position: static; transform: none; width: auto; border: 0; box-shadow: none; animation: none !important; } .mas-hdr__cols, .mas-hdr__panel--3 .mas-hdr__cols { grid-template-columns: 1fr; gap: 22px; padding: 4px var(--hdr-x) 22px; } .mas-hdr__col li a { min-height: 44px; font-size: var(--text-body); } .mas-hdr__answer { padding: 16px var(--hdr-x); } .mas-hdr__btn-light { margin-left: 0; } .mas-hdr__drawer-foot { display: grid; gap: 4px; padding: 18px var(--hdr-x) 32px; font-size: var(--text-body); } .mas-hdr__drawer-foot a { display: flex; align-items: center; min-height: 44px; color: var(--navy); } .mas-hdr__drawer-foot .mas-hdr__phone { display: flex; } .mas-hdr__drawer-foot form { margin: 8px 0 0; } .mas-hdr__drawer-foot .mas-hdr__search { height: 46px; } .mas-hdr__drawer-foot .mas-hdr__search input { width: 100%; font-size: var(--text-body); } .mas-hdr__drawer-foot .mas-hdr__search button { width: 46px; } } @media (min-width: 70.0625em) { .mas-hdr__drawer-foot { display: none; } } @media (max-width: 23.75em) { .mas-hdr__logo { flex: 0 1 118px; min-width: 72px; } .mas-hdr__logo img { width: 100%; } .mas-hdr__quote { padding: 0 12px; font-size: var(--text-prose-sm); } } /* Very large browser text on a small phone (only reachable at ~2x text): tighten the bar's gaps. */ @media (max-width: 12em) { .mas-hdr__bar > .mas-hdr__in { gap: 6px; padding: 0 10px; } .mas-hdr__cta { gap: 2px; } } @media (prefers-reduced-motion: reduce) { .mas-hdr *, .mas-hdr *::before, .mas-hdr *::after { animation: none !important; transition: none !important; } /* Keep the "this number just changed" cue: it only fades a background color, nothing moves. */ .mas-hdr .is-updated { animation: mas-hdr-flash 1.1s ease-out !important; } .mas-hdr .mas-hdr__answer .is-updated { animation-name: mas-hdr-flash-dark !important; } } /* Skip link (goes before the header in the template) */ .mas-hdr-skip { position: absolute; left: 12px; top: -60px; z-index: 1100; background: var(--navy); color: var(--paper); padding: 12px 18px; font-family: var(--font); font-size: var(--text-body); } .mas-hdr-skip:focus { top: 12px; } /* Prototype page only: not part of the port */ .mas-hdr-proto { margin: 0; background: var(--canvas); } .mas-hdr-proto__spacer { height: 120vh; } /* ---------- Site override guard ---------- The Elementor kit (.elementor-kit-183797 button, button:hover) and Hello's reset.css paint every