/* Kintsugi header styles. Loaded from to avoid header reflow after paint. */ #ai_header { position: sticky; top: 0; background-color: transparent; border-bottom: 1px solid transparent; box-shadow: none; transition: background-color 0.3s ease-in-out, border-bottom 0.3s ease-in-out, box-shadow 0.3s ease-in-out; z-index: 50; } #ai_header .header-logo-link { width: 76px; min-width: 76px; height: 64px; } #ai_header .header-logo-link--mobile { width: 92px; min-width: 92px; height: 88px; } #ai_header .header-logo { display: block; width: auto; height: 64px; aspect-ratio: 1950 / 1650; object-fit: contain; } @media (min-width: 1024px) { #ai_header .header-logo-link { width: 95px; min-width: 95px; height: 80px; } #ai_header .header-logo { height: 80px; } } #ai_header.header-solid { position: sticky; top: 0; background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray-light) !important; box-shadow: var(--shadow-sm) !important; z-index: 50; } #ai_header.header-non-homepage { position: sticky; top: 0; background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray-light) !important; box-shadow: var(--shadow-sm) !important; z-index: 50; } #ai_header * { font-family: var(--font-primary); } #ai_header *:not(.fas):not(.fab):not(.far):not(.fa) { font-family: var(--font-primary); } #ai_header .fas, #ai_header .fab, #ai_header .far, #ai_header .fa { font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'FontAwesome', sans-serif !important; } #ai_header .nav-link, #ai_header .site-button { font-family: var(--font-heading); } .bg-forest-primary { background-color: rgba(122, 155, 118, 0.1); } .text-forest-primary { color: var(--forest-primary); } .text-brand-primary { color: var(--brand-primary); } .bg-brand-primary { background-color: var(--brand-primary); } .hover\:bg-brand-dark:hover { background-color: var(--brand-dark); } .hover\:text-brand-primary:hover { color: var(--brand-primary); } .border-brand-primary { border-color: var(--brand-primary); } .focus\:ring-brand-primary:focus { --tw-ring-color: var(--brand-primary); } #ai_header:not(.header-solid):not(.header-non-homepage) .text-gray-800 { color: var(--white) !important; } #ai_header:not(.header-solid):not(.header-non-homepage) .text-gray-600 { color: rgba(255, 255, 255, 0.8) !important; } #ai_header:not(.header-solid):not(.header-non-homepage) .text-gray-700 { color: var(--white) !important; } #ai_header .dropdown-menu .text-gray-700, #ai_header .dropdown-menu .text-gray-900 { color: var(--gray-dark) !important; } #ai_header #mobile-menu { background-color: white !important; } #ai_header #mobile-menu .text-gray-800, #ai_header #mobile-menu a.text-gray-800 { color: var(--gray-800) !important; } #ai_header #mobile-menu .text-gray-700, #ai_header #mobile-menu a.text-gray-700 { color: var(--gray-dark) !important; } #ai_header #mobile-menu .text-gray-600, #ai_header #mobile-menu a.text-gray-600 { color: var(--gray-600) !important; } #ai_header #mobile-menu .text-gray-500 { color: var(--gray-medium) !important; } #ai_header #mobile-menu .text-gray-400 { color: var(--gray-400) !important; } #ai_header:not(.header-solid):not(.header-non-homepage) .header-signin { border-color: rgba(255, 255, 255, 0.8); color: var(--white); } #ai_header:not(.header-solid):not(.header-non-homepage) .header-signin:hover { background-color: rgba(255, 255, 255, 0.1); border-color: var(--white); } #ai_header:not(.header-solid):not(.header-non-homepage) .header-subscribe { background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--white); } #ai_header:not(.header-solid):not(.header-non-homepage) #mobile-menu-button { color: rgba(255, 255, 255, 0.8); } #ai_header:not(.header-solid):not(.header-non-homepage) #mobile-menu-button:hover { color: var(--white); } .rounded-full { border-radius: 9999px; } .w-120 { width: 30rem; } .dropdown-menu { position: absolute; top: 100%; left: 0; display: block; opacity: 0; visibility: hidden; pointer-events: none; z-index: 9999; transform: translateY(-10px); transition: all 0.2s ease-in-out; } .group:hover .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .mobile-submenu.dropdown-menu { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; z-index: auto; } .mobile-submenu.dropdown-menu.hidden { display: none; } .nav-item.group { position: relative; z-index: 100; } .nav-item.group:hover { z-index: 1000; } .submenu-item:hover { background-color: var(--gray-light); } .dropdown-menu h3 { color: var(--deep-indigo); border-bottom: 1px solid var(--gray-light); padding-bottom: 4px; } .mobile-submenu-toggle .fa, .mobile-submenu-toggle .fas { transition: transform var(--transition-fast); } .nav-link.active-page { color: var(--forest-primary) !important; font-weight: 600; } .mobile-menu-item .active-page { color: var(--forest-primary) !important; font-weight: 600; } .nav-link[aria-disabled="true"], .mobile-menu-item a[aria-disabled="true"] { pointer-events: none; cursor: not-allowed; opacity: 0.6; } .nav-link[aria-disabled="true"]:hover, .mobile-menu-item a[aria-disabled="true"]:hover { color: var(--gray-400) !important; } .site-button { transition: all 150ms ease; font-weight: 600; } #ai_header .header-subscribe, #ai_header .header-signin, #ai_header .header-account { border-radius: 9999px; } #ai_header:not(.header-solid):not(.header-non-homepage) .dropdown-menu a.submenu-item { color: #4b5563 !important; } #ai_header:not(.header-solid):not(.header-non-homepage) .dropdown-menu a.submenu-item:hover { color: var(--brand-primary) !important; } #ai_header .dropdown-menu a.submenu-item { color: #4b5563 !important; }