/* Presentation choice for Tempo's 21/10/2026 request: one shared navigation. */ .tempo-header { position: relative; z-index: 40; background: #090909; color: #fff; border-bottom: 1px solid #ffffff14; } .tempo-header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: 71px; align-items: center; column-gap: 0.5rem; max-width: 1600px; margin-inline: auto; padding-inline: 0.75rem; } .tempo-logo-link { grid-area: 1 / 1; display: inline-flex; align-items: center; width: 112px; max-width: 100%; border-radius: 0.25rem; } .tempo-header-logo { width: 100%; height: auto; object-fit: contain; } .tempo-primary-navigation { display: none; grid-area: 2 / 1 / auto / -1; min-width: 0; border-top: 1px solid #ffffff1a; padding-block: 0.75rem; } .tempo-primary-navigation > ul { display: grid; gap: 0.25rem; } .tempo-nav-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; width: 100%; min-height: 44px; padding: 0.5rem 0.75rem; border-radius: 0.5rem; color: #e2e8f0; font-size: 1rem; line-height: 1.5; font-weight: 600; white-space: nowrap; transition: color 0.2s, background 0.2s; } .tempo-nav-trigger:hover, .tempo-nav-trigger[data-state='open'] { background: #ffffff0d; color: #fff; } .tempo-nav-trigger[data-current-group] { color: #fff; background: #ffffff08; box-shadow: inset 0 -2px #ed1c24; } .tempo-nav-trigger > svg { flex-shrink: 0; transition: transform 0.2s; } .tempo-nav-trigger[data-state='open'] > svg { transform: rotate(180deg); } .tempo-header-extras { display: none; grid-area: 3 / 1 / auto / -1; min-width: 0; padding-block: 0.75rem; border-top: 1px solid #ffffff1a; } .tempo-header-utilities { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .tempo-utility-button { display: flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.4rem; border-radius: 0.5rem; color: #e2e8f0; font-size: 0.8125rem; } .tempo-utility-button:hover { background: #ffffff10; } .tempo-header-actions { grid-area: 1 / 2; display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .tempo-login-button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 0.625rem; border: 1px solid #ffffff40; border-radius: 0.5rem; color: #fff; font-size: 0.875rem; font-weight: 600; white-space: nowrap; transition: background 0.2s, border-color 0.2s; } .tempo-login-button:hover { background: #ffffff10; border-color: #ffffff80; } .tempo-login-button > span { max-width: clamp(2rem, calc(100vw - 18rem), 6rem); } .tempo-panel-summary { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 0.5rem; color: #e2e8f0; } .tempo-panel-summary:hover { background: #ffffff10; color: #fff; } .tempo-panel-count { position: absolute; top: 0; right: -0.125rem; min-width: 17px; padding-inline: 0.2rem; border: 2px solid #090909; border-radius: 999px; background: #ed1c24; color: #fff; font-size: 0.5625rem; line-height: 1.4; text-align: center; } .tempo-interest-button { display: none; grid-area: 4 / 1 / auto / -1; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; margin-bottom: 1rem; padding: 0.5rem 0.875rem; border: 1px solid #ed1c24; border-radius: 0.5rem; background: #ed1c24; color: #fff; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; transition: background 0.2s; } .tempo-interest-button:hover { background: #c9151c; } .tempo-header-toggle { grid-area: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #ffffff33; border-radius: 0.5rem; color: #fff; cursor: pointer; } .tempo-header-toggle:hover, .tempo-header-toggle[aria-expanded='true'] { background: #ffffff10; } .tempo-header[data-expanded] .tempo-primary-navigation { display: block; } .tempo-header[data-expanded] .tempo-header-extras { display: flex; } .tempo-header[data-expanded] .tempo-interest-button { display: inline-flex; } .tempo-header :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .tempo-submenu { max-width: min( calc(100vw - 1.5rem), var(--radix-dropdown-menu-content-available-width) ); } @media (min-width: 640px) { .tempo-header-inner { grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 0.75rem; padding-inline: 1.5rem; } .tempo-logo-link { width: 132px; } .tempo-interest-button { display: inline-flex; grid-area: 1 / 3; margin-bottom: 0; } .tempo-header-toggle { grid-area: 1 / 4; } } @media (min-width: 1280px) { .tempo-header-inner { grid-template-columns: auto minmax(0, 1fr) auto auto auto; column-gap: 0.25rem; padding-inline: 1.25rem; } .tempo-logo-link { width: 100px; } .tempo-login-button > span { max-width: 3rem; } .tempo-primary-navigation, .tempo-header[data-expanded] .tempo-primary-navigation { display: block; grid-area: 1 / 2; border: 0; padding: 0; justify-self: center; } .tempo-primary-navigation > ul { display: flex; align-items: center; gap: 0; } .tempo-nav-trigger { justify-content: center; padding-inline: 0.25rem; font-size: 1.125rem; letter-spacing: 0.025em; } .tempo-header-extras, .tempo-header[data-expanded] .tempo-header-extras { display: flex; grid-area: 1 / 3; padding: 0 0.5rem 0 0; border: 0; border-right: 1px solid #ffffff1a; } .tempo-header-utilities { flex-wrap: nowrap; } .tempo-header-actions { grid-area: 1 / 4; } .tempo-interest-button { grid-area: 1 / 5; } .tempo-header-toggle { display: none; } } @media (min-width: 1440px) { .tempo-header-inner { column-gap: 0.75rem; padding-inline: 2rem; } .tempo-nav-trigger { padding-inline: 0.375rem; font-size: 1.125rem; } .tempo-logo-link { width: 132px; } .tempo-login-button > span { max-width: 5rem; } .tempo-header-extras { padding-right: 0.75rem; } .tempo-primary-navigation > ul { gap: 0.125rem; } } @media (min-width: 1536px) { .tempo-header-inner { column-gap: 1rem; } .tempo-nav-trigger { padding-inline: 0.75rem; } .tempo-login-button > span { max-width: 6rem; } }