/* * Breakpoint theme: primary navigation (Oct 2026 design system). * * Ported verbatim from the Claude Design handoff (ui_kits/website/nav/nav.css): * tokens first, then components. Class prefixes: bp-nav (bar), bp-mp * (mega-panel), bp-ps (port search), bp-ms (mobile sheet), bp-crumbs. * Theme additions are at the end of the file. */ :root{ --nav-blue:#0076A9;--nav-blue-press:#005E87;--nav-cyan:#27BBFA;--nav-ink:#14232C;--nav-ink-2:#46565F;--nav-line:#E3E8EB;--nav-tint:#F2F6F8;--nav-abyss:#02131B;--nav-white:#FFFFFF; --nav-font:"DIN Next LT Pro",Arial,Helvetica,sans-serif;--nav-head:"Oswald","DIN Next LT Pro",sans-serif; --nav-fs-item:16px;--nav-fs-panel-h:13px;--nav-fs-link:15px;--nav-fs-desc:14px;--nav-fs-crumb:13px;--nav-fs-mobile:18px; --nav-bar-h:76px;--nav-bar-h-m:64px;--nav-gut:40px;--nav-inset:18px;--nav-pad:24px; --nav-r-panel:12px;--nav-r-btn:6px;--nav-r-field:8px; --nav-shadow:0 24px 64px rgba(2,19,27,.26),0 2px 8px rgba(2,19,27,.12); --nav-scrim:linear-gradient(to bottom,rgba(2,19,27,.82) 0%,rgba(2,19,27,.55) 55%,rgba(2,19,27,0) 100%); --nav-ease:cubic-bezier(.22,1,.36,1);--nav-dur:220ms; } @media(max-width:1279px){:root{--nav-gut:28px}} .bp-nav *{box-sizing:border-box} .bp-nav{position:fixed;top:0;left:0;right:0;z-index:50;font-family:var(--nav-font);color:var(--nav-white)} .bp-nav:before{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:var(--nav-scrim);pointer-events:none;transition:opacity var(--nav-dur) ease} .bp-nav.is-solid:before{opacity:0} .bp-nav.is-solid .bp-nav-bar{background:var(--nav-abyss);box-shadow:0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(2,19,27,.3)} .bp-nav-bar{position:relative;height:var(--nav-bar-h);display:flex;align-items:center;gap:20px;padding:0 var(--nav-gut);max-width:1600px;margin:0 auto;transition:background var(--nav-dur) ease} .bp-nav-logo{display:flex;flex:0 0 auto;border-radius:4px}.bp-nav-logo-m{display:none!important}.bp-nav-logo img{height:44px;width:auto;display:block} .bp-nav-items{display:flex;align-items:center;justify-content:center;gap:2px;flex:1;margin:0;padding:0;list-style:none;min-width:0} .bp-nav-item{position:relative} .bp-nav-link{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:0;background:none;color:inherit;font:500 var(--nav-fs-item)/1 var(--nav-font);letter-spacing:.01em;white-space:nowrap;cursor:pointer;text-decoration:none;border-radius:6px;position:relative} .bp-nav-link:after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--nav-cyan);transform:scaleX(0);transform-origin:left;transition:transform var(--nav-dur) var(--nav-ease)} .bp-nav-link svg{width:14px;height:14px;transition:transform var(--nav-dur) var(--nav-ease);opacity:.85} .bp-nav-link:hover,.bp-nav-link.is-hover{color:var(--nav-cyan)} .bp-nav-link[aria-expanded="true"]{color:var(--nav-white)}.bp-nav-link[aria-expanded="true"]:after,.bp-nav-link[aria-current]:after{transform:scaleX(1)} .bp-nav-link[aria-expanded="true"] svg{transform:rotate(180deg)} .bp-nav-link:active{color:var(--nav-mist,#CDD6DC)} .bp-nav :focus{outline:none} .bp-nav :focus-visible,.bp-nav .is-focus{outline:2px solid var(--nav-cyan);outline-offset:2px} .bp-nav-tools{display:flex;align-items:center;gap:12px;flex:0 0 auto} .bp-nav-dl{display:inline-flex;align-items:center;height:44px;padding:0 18px;border:1.5px solid currentColor;border-radius:var(--nav-r-btn);color:var(--nav-white);text-decoration:none;font:600 14px/1 var(--nav-font);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:color var(--nav-dur),background var(--nav-dur)} .bp-nav-dl:hover,.bp-nav-dl.is-hover{background:var(--nav-white);color:var(--nav-abyss);border-color:var(--nav-white)} .bp-nav-dl:active{background:var(--nav-cyan);border-color:var(--nav-cyan);color:var(--nav-abyss)} .bp-nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:0;background:none;color:var(--nav-ink);cursor:pointer;border-radius:6px} /* top-bar search: field at >=1440, icon that expands below */ .bp-nav-search{position:relative} .bp-nav-search .bp-ps-field{width:208px} .bp-nav-search-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:0;background:none;color:inherit;cursor:pointer;border-radius:6px} .bp-nav-search-btn:hover{color:var(--nav-cyan)} @media(max-width:1439px){.bp-nav-search-btn{display:flex}.bp-nav-search .bp-ps{position:absolute;right:0;top:50%;transform:translateY(-50%);width:300px;display:none;z-index:3}.bp-nav-search.is-open .bp-ps{display:block}.bp-nav-search.is-open .bp-nav-search-btn{visibility:hidden}.bp-nav-search .bp-ps-field{width:100%}} /* port search (shared by top bar, States panel and mobile sheet) */ .bp-ps{position:relative;font-family:var(--nav-font)} .bp-ps-field{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:var(--nav-r-field);background:var(--nav-white);border:1.5px solid var(--nav-line);color:var(--nav-ink);transition:border-color var(--nav-dur),box-shadow var(--nav-dur)} .bp-ps-field svg{flex:0 0 auto;color:var(--nav-ink-2)} .bp-ps-field input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 15px/1 var(--nav-font);color:var(--nav-ink);padding:0} .bp-ps-field input::placeholder{color:var(--nav-ink-2);opacity:1} .bp-ps-field:hover,.bp-ps-field.is-hover{border-color:#B9C5CC} .bp-ps-field:focus-within,.bp-ps-field.is-focus{border-color:var(--nav-blue);box-shadow:0 0 0 3px rgba(0,118,169,.22)} .bp-nav-bar .bp-ps-field{background:rgba(2,19,27,.42);border-color:rgba(255,255,255,.4);color:var(--nav-white)} .bp-nav-bar .bp-ps-field svg{color:rgba(255,255,255,.85)}.bp-nav-bar .bp-ps-field input{color:var(--nav-white)}.bp-nav-bar .bp-ps-field input::placeholder{color:rgba(255,255,255,.82)} .bp-nav-bar .bp-ps-field:hover{border-color:rgba(255,255,255,.7)} .bp-nav-bar .bp-ps-field:focus-within{background:var(--nav-white);border-color:var(--nav-white);box-shadow:0 0 0 3px rgba(39,187,250,.45)} .bp-nav-bar .bp-ps-field:focus-within input{color:var(--nav-ink)}.bp-nav-bar .bp-ps-field:focus-within svg{color:var(--nav-ink-2)}.bp-nav-bar .bp-ps-field:focus-within input::placeholder{color:var(--nav-ink-2)} .bp-ps-clear{display:none;width:28px;height:28px;align-items:center;justify-content:center;border:0;background:none;color:var(--nav-ink-2);cursor:pointer;border-radius:4px}.bp-ps.has-q .bp-ps-clear{display:flex} .bp-ps-pop{margin:10px 0 0;font-size:13px;line-height:1.7;color:var(--nav-ink-2)}.bp-ps-pop b{font-weight:600;color:var(--nav-ink);margin-right:4px} .bp-ps-pop a{color:var(--nav-blue);text-decoration:none;white-space:nowrap}.bp-ps-pop a:hover{text-decoration:underline} .bp-ps-pop a:not(:last-child):after{content:"\00B7";display:inline-block;margin:0 6px;color:var(--nav-ink-2)} .bp-ps.has-q .bp-ps-pop{display:none} .bp-ps-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;margin:0;padding:6px;list-style:none;background:var(--nav-white);border-radius:var(--nav-r-panel);box-shadow:var(--nav-shadow);border:1px solid var(--nav-line);display:none;min-width:260px} .bp-ps.is-listing .bp-ps-list{display:block} .bp-ps-inline .bp-ps-list{position:static;box-shadow:none;margin-top:6px;border:1px solid var(--nav-line)} .bp-ps-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px;border-radius:8px;color:var(--nav-ink);font-size:15px;cursor:pointer;text-decoration:none} .bp-ps-opt em{font-style:normal;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bp-ps-opt mark{background:none;color:inherit;font-weight:700} .bp-ps-opt span{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--nav-ink-2)} .bp-ps-opt:hover,.bp-ps-opt[aria-selected="true"]{background:var(--nav-tint);color:var(--nav-blue)} .bp-ps-opt[aria-selected="true"] span{color:var(--nav-blue)} .bp-ps-hint{padding:8px 12px 4px;font-size:12px;color:var(--nav-ink-2)} .bp-ps-none{padding:12px;font-size:14px;line-height:1.5;color:var(--nav-ink)}.bp-ps-none a{display:inline-block;margin-top:6px;font-weight:700;color:var(--nav-blue);text-decoration:none}.bp-ps-none a:hover{text-decoration:underline} /* mega-panels */ .bp-mp{position:absolute;left:var(--nav-inset);right:var(--nav-inset);top:calc(var(--nav-bar-h) + 6px);max-width:1404px;margin:0 auto;background:var(--nav-white);color:var(--nav-ink);border-radius:var(--nav-r-panel);box-shadow:var(--nav-shadow);padding:var(--nav-pad) calc(var(--nav-pad) + 2px);max-height:calc(100vh - var(--nav-bar-h) - 24px);overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity var(--nav-dur) ease,transform var(--nav-dur) var(--nav-ease),visibility 0s linear var(--nav-dur)} .bp-mp.is-open{opacity:1;transform:none;visibility:visible;transition-delay:0s} .bp-mp-grid{display:grid;gap:28px} .bp-mp-h{margin:0 0 12px;font:700 var(--nav-fs-panel-h)/1.2 var(--nav-head);letter-spacing:.14em;text-transform:uppercase;color:var(--nav-blue)} .bp-mp-h a{color:inherit;text-decoration:none;border-radius:3px}.bp-mp .bp-mp-h a:hover,.bp-ms .bp-mp-h a:hover{color:var(--nav-blue-press);text-decoration:underline;text-underline-offset:3px}.bp-ms .bp-mp-h a{display:inline-flex;align-items:center;min-height:44px} .bp-mp ul{list-style:none;margin:0;padding:0} .bp-mp-links li+li{margin-top:2px} .bp-mp-links a{display:block;width:fit-content;padding:5px 0;color:var(--nav-ink);font-size:var(--nav-fs-link);line-height:1.35;text-decoration:none;border-radius:3px} .bp-mp a:hover,.bp-mp a.is-hover{color:var(--nav-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px} .bp-mp a:focus-visible,.bp-mp a.is-focus,.bp-ms a:focus-visible,.bp-ms button:focus-visible,.bp-ps-opt:focus-visible{outline:2px solid var(--nav-blue);outline-offset:2px} .bp-mp-card{display:block;padding:12px 14px;margin:0 -14px;border-radius:8px;text-decoration:none;color:var(--nav-ink)} .bp-mp-card b{display:block;font-size:16px;font-weight:600;line-height:1.3} .bp-mp-card small{display:block;margin-top:3px;font-size:var(--nav-fs-desc);line-height:1.4;color:var(--nav-ink-2)} .bp-mp .bp-mp-card:hover{background:var(--nav-tint);text-decoration:none}.bp-mp .bp-mp-card:hover b{color:var(--nav-blue);text-decoration:underline;text-underline-offset:3px} .bp-mp-all{display:flex;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--nav-line)} .bp-all{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:700;font-size:15px;color:var(--nav-blue);text-decoration:none} .bp-all svg{transition:transform var(--nav-dur) var(--nav-ease)}.bp-all:hover{text-decoration:underline;text-underline-offset:3px}.bp-all:hover svg{transform:translateX(3px)} .bp-mp-fish .bp-mp-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.bp-mp-fish .bp-mp-links a{white-space:nowrap} .bp-mp-coasts .bp-mp-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 28px} .bp-mp-data .bp-mp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px} .bp-mp-features .bp-mp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 28px} .bp-mp-states .bp-mp-grid{grid-template-columns:minmax(250px,1.2fr) minmax(0,1fr) minmax(0,2.2fr) minmax(0,1fr)} .bp-mp-states .bp-mp-search{padding-right:28px;border-right:1px solid var(--nav-line)} .bp-mp-split{display:grid;grid-template-columns:1fr 1fr;gap:0 24px} .bp-mp-country{min-height:0}/* reserved: country selector lands here (above the grid) when /ca/, /mx/ etc. ship */ /* mobile + tablet: below 1100px the bar condenses to logo + hamburger, everything moves into the sheet */ @media(max-width:1099px){ .bp-nav{color:var(--nav-ink)}.bp-nav:before{display:none} .bp-nav-bar{height:var(--nav-bar-h-m);background:var(--nav-white);box-shadow:0 1px 0 var(--nav-line);padding:0 16px 0 20px} .bp-nav.is-solid .bp-nav-bar{background:var(--nav-white);box-shadow:0 1px 0 var(--nav-line),0 6px 18px rgba(2,19,27,.08)} .bp-nav-logo img{height:38px}.bp-nav-logo-d{display:none!important}.bp-nav-logo-m{display:block!important} .bp-nav-items,.bp-nav-search,.bp-nav-dl,.bp-mp{display:none} .bp-nav-tools{margin-left:auto}.bp-nav-burger{display:flex} .bp-nav :focus-visible{outline-color:var(--nav-blue)} } .bp-ms{position:fixed;inset:0;z-index:60;background:var(--nav-white);color:var(--nav-ink);font-family:var(--nav-font);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform 320ms var(--nav-ease),visibility 0s linear 320ms} .bp-ms.is-open{transform:none;visibility:visible;transition-delay:0s} .bp-ms-top{display:flex;align-items:center;justify-content:space-between;height:var(--nav-bar-h-m);padding:0 16px 0 20px;border-bottom:1px solid var(--nav-line);flex:0 0 auto} .bp-ms-top img{height:38px;width:auto;display:block} .bp-ms-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--nav-ink);cursor:pointer;border-radius:6px} .bp-ms-body{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:16px 20px 32px} .bp-ms-body>.bp-ps{margin-bottom:8px} .bp-ms-list{list-style:none;margin:0;padding:0} .bp-ms-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0 2px;border:0;border-bottom:1px solid var(--nav-line);background:none;color:var(--nav-ink);font:500 var(--nav-fs-mobile)/1.2 var(--nav-font);text-align:left;text-decoration:none;cursor:pointer;border-radius:0} .bp-ms-row svg{width:18px;height:18px;flex:0 0 auto;color:var(--nav-ink-2);transition:transform var(--nav-dur) var(--nav-ease)} .bp-ms-row[aria-expanded="true"]{color:var(--nav-blue)}.bp-ms-row[aria-expanded="true"] svg{transform:rotate(180deg);color:var(--nav-blue)} .bp-ms-row:active{background:var(--nav-tint)} .bp-ms-acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows 280ms var(--nav-ease)} .bp-ms-acc.is-open{grid-template-rows:1fr} .bp-ms-acc>div{overflow:hidden} .bp-ms-acc-in{padding:6px 2px 18px;border-bottom:1px solid var(--nav-line)} .bp-ms-acc .bp-mp-h{margin:14px 0 4px} .bp-ms-links{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .bp-ms-links a{display:flex;align-items:center;min-height:44px;color:var(--nav-ink);font-size:16px;text-decoration:none;line-height:1.25} .bp-ms-links a:active,.bp-ms-links a:hover{color:var(--nav-blue)} .bp-ms .bp-mp-card{margin:0;padding:10px 0;min-height:44px} .bp-ms .bp-mp-card:active b{color:var(--nav-blue)} .bp-ms-all{display:flex;align-items:center;min-height:44px;margin-top:8px} .bp-ms-dl{display:flex;align-items:center;justify-content:center;height:52px;margin-top:24px;border:1.5px solid var(--nav-blue);border-radius:var(--nav-r-btn);color:var(--nav-blue);font:600 15px/1 var(--nav-font);letter-spacing:.14em;text-transform:uppercase;text-decoration:none} .bp-ms-dl:active{background:var(--nav-blue);color:var(--nav-white)} .bp-ms-scrim{position:fixed;inset:0;z-index:59;background:rgba(2,19,27,.55);opacity:0;visibility:hidden;transition:opacity 320ms ease,visibility 0s linear 320ms}.bp-ms-scrim.is-open{opacity:1;visibility:visible;transition-delay:0s} /* tablet (600-1099): the sheet docks right at 440px over a scrim; phones get the full screen */ @media(min-width:600px){.bp-ms{left:auto;width:440px;box-shadow:-20px 0 60px rgba(2,19,27,.3)}} @media(max-width:599px){.bp-ms-scrim{display:none}} @media(min-width:1100px){.bp-ms,.bp-ms-scrim{display:none}} /* breadcrumbs */ .bp-crumbs{font-family:var(--nav-font);font-size:var(--nav-fs-crumb);line-height:1.4;color:var(--nav-ink-2);container-type:inline-size} .bp-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0;padding:0;list-style:none} .bp-crumbs li{display:flex;align-items:center;flex:0 0 auto;white-space:nowrap}.bp-crumbs li:last-child{flex:0 1 auto;min-width:0} .bp-crumbs li+li:not(.bp-crumbs-more + li):before{content:"";width:14px;height:14px;margin:0 6px;flex:0 0 auto;background:currentColor;opacity:.55;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat} .bp-crumbs a{color:var(--nav-ink-2);text-decoration:none;border-radius:3px;padding:2px 0} .bp-crumbs a:hover{color:var(--nav-blue);text-decoration:underline;text-underline-offset:3px} .bp-crumbs a:focus-visible{outline:2px solid var(--nav-blue);outline-offset:2px} .bp-crumbs [aria-current]{color:var(--nav-ink);font-weight:500}.bp-crumbs li:last-child{white-space:normal} .bp-crumbs-more{display:none!important} @container (max-width:520px){.bp-crumbs li:not(:nth-last-child(-n+2)):not(.bp-crumbs-more){display:none}.bp-crumbs-more{display:flex!important}} .bp-crumbs.is-dark{color:#CDD6DC}.bp-crumbs.is-dark a{color:#CDD6DC}.bp-crumbs.is-dark a:hover{color:var(--nav-cyan)}.bp-crumbs.is-dark [aria-current]{color:var(--nav-white)} @media(prefers-reduced-motion:reduce){.bp-nav *,.bp-nav:before,.bp-ms,.bp-ms *{transition:none!important}} /* ----- Theme additions ----- */ /* The