/* * SteliPro Panorama shared header candidate v0.1. * * Intentionally isolated from page content. The stylesheet becomes active * only when the integration adds `steli-panorama-header` to . It does * not style main, headings, forms, theme containers or legacy selectors. */ body.steli-panorama-header { --pano-header-ink: #062f45; --pano-header-deep: #041f2d; --pano-header-orange: #ff6b08; --pano-header-orange-dark: #e95700; --pano-header-height: 86px; --pano-header-gutter: clamp(18px, 2.1vw, 40px); --pano-header-max: 1840px; margin-top: 0 !important; overflow-y: visible; } html:has(body.steli-panorama-header) { overflow-x: clip; } body.steli-panorama-header { overflow-x: clip; } body.steli-panorama-header > noscript { display: block !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; line-height: 0 !important; } body.steli-panorama-header.pano-locked { overflow: hidden; } body.steli-panorama-header .pano-header, body.steli-panorama-header .pano-header *, body.steli-panorama-header .pano-header *::before, body.steli-panorama-header .pano-header *::after, body.steli-panorama-header .pano-drawer, body.steli-panorama-header .pano-drawer *, body.steli-panorama-header .pano-drawer *::before, body.steli-panorama-header .pano-drawer *::after { box-sizing: border-box; } body.steli-panorama-header .pano-drawer[hidden] { display: none !important; } body.steli-panorama-header .pano-header :where(a, button, summary), body.steli-panorama-header .pano-drawer :where(a, button, summary) { -webkit-tap-highlight-color: transparent; font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif; } body.steli-panorama-header .pano-header :where(a, button, summary):focus-visible, body.steli-panorama-header .pano-drawer :where(a, button, summary):focus-visible { outline: 3px solid #2d89b5; outline-offset: 3px; } body.steli-panorama-header .pano-header { position: sticky; top: 0; z-index: 100; isolation: isolate; width: 100%; max-width: 100%; color: var(--pano-header-ink); background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid rgba(6, 47, 69, 0.14); backdrop-filter: blur(16px); } body.steli-panorama-header.admin-bar .pano-header { top: 32px; } body.steli-panorama-header .pano-header-inner { width: min( calc(100% - (var(--pano-header-gutter) * 2)), var(--pano-header-max) ); min-height: var(--pano-header-height); display: grid; grid-template-columns: 218px minmax(0, 1fr) auto; align-items: center; gap: clamp(22px, 2.4vw, 38px); margin-inline: auto; } body.steli-panorama-header > .container:has(> #breadcrumbs) { width: min( calc(100% - (var(--pano-header-gutter) * 2)), var(--pano-header-max) ); margin-inline: auto; } body.steli-panorama-header #breadcrumbs { position: relative; z-index: 1; padding-block: 10px; color: var(--pano-header-ink); font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 600; } body.steli-panorama-header #breadcrumbs a { color: var(--pano-header-ink); text-decoration: none; } body.steli-panorama-header #breadcrumbs a:hover, body.steli-panorama-header #breadcrumbs a:focus-visible { color: var(--pano-header-orange); } body.steli-panorama-header .pano-logo { min-width: 0; display: inline-flex; align-items: center; color: inherit; text-decoration: none; } body.steli-panorama-header .pano-logo img { width: 205px; height: auto; max-width: 100%; display: block; object-fit: contain; filter: none; } body.steli-panorama-header .pano-main-nav { min-width: 0; display: flex; align-items: stretch; justify-content: center; gap: clamp(14px, 1.75vw, 29px); } body.steli-panorama-header .pano-main-nav > a { display: inline-flex; align-items: center; padding-block: 30px; color: inherit; font-size: 11.36px; font-weight: 850; letter-spacing: 0.105em; line-height: 1.2; text-decoration: none; text-transform: uppercase; white-space: nowrap; } body.steli-panorama-header .pano-main-nav > a:hover, body.steli-panorama-header .pano-main-nav > a[aria-current="page"] { color: var(--pano-header-orange); } body.steli-panorama-header .pano-header-actions { min-width: 0; display: flex; align-items: center; gap: 8px; } body.steli-panorama-header :is(.pano-language, .pano-menu-button) { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding-inline: 12px; color: var(--pano-header-ink); background: transparent; border: 1px solid rgba(6, 47, 69, 0.22); border-radius: 0; cursor: pointer; font-size: 11.84px; font-weight: 850; line-height: 1; text-align: center; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } body.steli-panorama-header :is(.pano-language, .pano-menu-button):hover { border-color: var(--pano-header-orange); } body.steli-panorama-header .pano-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 13px 22px; color: var(--pano-header-ink); background: transparent; border: 1px solid transparent; border-radius: 0; cursor: pointer; font-size: 16px; font-weight: 820; line-height: 1.2; text-align: center; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } body.steli-panorama-header .pano-button:hover { transform: translateY(-2px); } body.steli-panorama-header .pano-button-orange, body.steli-panorama-header .pano-header-cta { color: #fff; background: var(--pano-header-orange); border-color: var(--pano-header-orange); } body.steli-panorama-header .pano-button-orange:hover, body.steli-panorama-header .pano-header-cta:hover { color: #fff; background: var(--pano-header-orange-dark); border-color: var(--pano-header-orange-dark); } body.steli-panorama-header .pano-header-cta { padding-inline: 18px; white-space: nowrap; } body.steli-panorama-header .pano-menu-button { display: none; font-size: 18.56px; } body.steli-panorama-header .pano-main-nav [data-products-menu] { align-self: stretch; display: flex; } body.steli-panorama-header .pano-product-disclosure { position: relative; display: flex; align-items: stretch; color: inherit; } body.steli-panorama-header .pano-product-disclosure > summary { display: flex; align-items: center; gap: 7px; padding: 28px 0; color: inherit; list-style: none; cursor: pointer; font-size: 11.36px; font-weight: 850; letter-spacing: 0.105em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; } body.steli-panorama-header .pano-product-disclosure > summary::-webkit-details-marker { display: none; } body.steli-panorama-header .pano-product-disclosure > summary::marker { content: ""; } body.steli-panorama-header .pano-product-disclosure > summary:hover, body.steli-panorama-header .pano-product-disclosure[open] > summary { color: var(--pano-header-orange); } body.steli-panorama-header .pano-product-disclosure > summary span { font-size: 0.9em; transition: transform 0.2s ease; } body.steli-panorama-header .pano-product-disclosure[open] > summary span { transform: rotate(180deg); } body.steli-panorama-header .pano-product-dropdown { position: absolute; top: 100%; left: 50%; z-index: 130; width: min(860px, calc(100vw - 32px)); max-height: min(72vh, 690px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 1px; overflow: auto; color: #102d3b; background: #d8e0e3; border-top: 3px solid var(--pano-header-orange); box-shadow: 0 22px 55px rgba(4, 31, 45, 0.22); overscroll-behavior: contain; transform: translateX(-50%); } body.steli-panorama-header .pano-product-group { min-width: 0; padding: 20px; background: #fff; } body.steli-panorama-header .pano-product-group > strong { display: block; margin-bottom: 11px; color: var(--pano-header-orange); font-size: 10.24px; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; } body.steli-panorama-header .pano-main-nav .pano-product-dropdown a { display: block; padding: 9px 10px; color: #173746; border: 0; font-size: 12.48px; font-weight: 700; letter-spacing: 0; line-height: 1.3; text-decoration: none; text-transform: none; white-space: normal; } body.steli-panorama-header .pano-main-nav .pano-product-dropdown a:hover, body.steli-panorama-header .pano-main-nav .pano-product-dropdown a:focus-visible { color: #fff; background: var(--pano-header-ink); outline: 0; } body.steli-panorama-header .pano-drawer { position: fixed; inset: 0; z-index: 300; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.24s ease, visibility 0.24s ease; } body.steli-panorama-header .pano-drawer.is-open { visibility: visible; opacity: 1; pointer-events: auto; } body.steli-panorama-header .pano-drawer-shade { position: absolute; inset: 0; margin: 0; padding: 0; background: rgba(4, 31, 45, 0.7); border: 0; cursor: pointer; } body.steli-panorama-header .pano-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(90vw, 420px); padding: 26px 28px 34px; overflow-y: auto; color: #fff; background: var(--pano-header-ink); box-shadow: -16px 0 40px rgba(4, 31, 45, 0.24); overscroll-behavior: contain; transform: translateX(100%); transition: transform 0.28s ease; } body.steli-panorama-header .pano-drawer.is-open .pano-drawer-panel { transform: translateX(0); } body.steli-panorama-header .pano-drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; } body.steli-panorama-header .pano-drawer-top img { width: min(205px, 62vw); height: auto; max-width: 100%; display: block; filter: brightness(0) invert(1); } body.steli-panorama-header .pano-drawer-top > button { width: 44px; height: 44px; flex: 0 0 44px; margin: 0; padding: 0; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 0; cursor: pointer; font-size: 21.6px; } body.steli-panorama-header .pano-drawer-nav { display: grid; } body.steli-panorama-header .pano-drawer-nav > a { padding: 17px 0; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.15); font-size: 16.64px; font-weight: 700; line-height: 1.35; text-decoration: none; } body.steli-panorama-header .pano-drawer .pano-product-disclosure { display: block; } body.steli-panorama-header .pano-drawer .pano-product-disclosure > summary { justify-content: space-between; padding: 17px 0; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.15); font-size: 16.64px; font-weight: 700; letter-spacing: 0; text-transform: none; } body.steli-panorama-header .pano-drawer .pano-product-dropdown { position: static; width: auto; max-height: none; grid-template-columns: 1fr; gap: 0; padding: 8px 0 14px; overflow: visible; color: inherit; background: transparent; border: 0; box-shadow: none; transform: none; } body.steli-panorama-header .pano-drawer .pano-product-group { padding: 10px 0 0; background: transparent; } body.steli-panorama-header .pano-drawer .pano-product-group > strong { margin-bottom: 5px; color: var(--pano-header-orange); } body.steli-panorama-header .pano-drawer .pano-product-dropdown a { display: block; padding: 9px 0; color: rgba(255, 255, 255, 0.84); font-size: 14.08px; font-weight: 600; line-height: 1.35; text-decoration: none; } body.steli-panorama-header .pano-drawer-actions { display: grid; gap: 10px; margin-top: 26px; } body.steli-panorama-header .pano-drawer-language { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255, 255, 255, 0.34); font-size: 12.48px; font-weight: 850; letter-spacing: 0.08em; text-decoration: none; } @media (max-width: 1120px) { body.steli-panorama-header .pano-header-inner { grid-template-columns: 190px minmax(0, 1fr) auto; gap: 18px; } body.steli-panorama-header .pano-logo img { width: 185px; } body.steli-panorama-header .pano-main-nav { gap: 13px; } body.steli-panorama-header .pano-main-nav > a, body.steli-panorama-header .pano-product-disclosure > summary { font-size: 10.56px; letter-spacing: 0.075em; } body.steli-panorama-header .pano-header-cta { display: none; } } @media (max-width: 960px) { body.steli-panorama-header { --pano-header-height: 76px; } body.steli-panorama-header .pano-header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; } body.steli-panorama-header .pano-main-nav { display: none; } body.steli-panorama-header .pano-menu-button { display: inline-grid; } body.steli-panorama-header .pano-header-cta { display: inline-flex; } } @media (max-width: 782px) { body.steli-panorama-header.admin-bar .pano-header { top: 46px; } } @media (max-width: 600px) { body.steli-panorama-header.admin-bar .pano-header { top: 0; } } @media (max-width: 767px) { body.steli-panorama-header { --pano-header-height: 70px; --pano-header-gutter: 18px; } body.steli-panorama-header .pano-header-inner { min-height: var(--pano-header-height); } body.steli-panorama-header .pano-logo img { width: min(188px, 56vw); } body.steli-panorama-header .pano-header-actions .pano-language { display: none; } } @media (max-width: 520px) { body.steli-panorama-header .pano-header-cta { display: none; } } @media (max-width: 430px) { body.steli-panorama-header .pano-logo img { width: min(205px, 66vw); } body.steli-panorama-header .pano-drawer-panel { width: min(94vw, 390px); padding: 22px 20px 28px; } } @media (prefers-reduced-motion: reduce) { body.steli-panorama-header .pano-header *, body.steli-panorama-header .pano-header *::before, body.steli-panorama-header .pano-header *::after, body.steli-panorama-header .pano-drawer, body.steli-panorama-header .pano-drawer *, body.steli-panorama-header .pano-drawer *::before, body.steli-panorama-header .pano-drawer *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (forced-colors: active) { body.steli-panorama-header .pano-header :is(.pano-button, .pano-language, .pano-menu-button), body.steli-panorama-header .pano-drawer :is(.pano-button, .pano-drawer-language) { border: 1px solid ButtonText; } }