/* Header */ .header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--layout-px-mobile); transition: background-color var(--transition-fast), color var(--transition-fast); } @media (min-width: 768px) { .header { height: 70px; padding: 0 var(--layout-px-desktop); } } .header-transparent { background-color: transparent; /* The original design used mix-blend-mode: difference so the nav text would adapt to whatever was behind the header. That was dropped: (a) it inverted the logo image colors, and (b) .header is position: fixed which creates an isolated stacking context, so the blend would have to live on the .header element itself, where it reaches the logo too. In practice the header always sits over white content (carousel starts below, series hero is in a white-bg mask), so a fixed dark color works in every case. */ color: var(--color-zinc-900); } .header-solid { background-color: var(--color-white); color: var(--color-zinc-900); } .header-brand { /* font-family inherited from (default_font_family). */ font-weight: 500; font-size: 1.125rem; letter-spacing: -0.05em; text-transform: uppercase; color: var(--color-zinc-900); text-decoration: none; } .header-nav ul { display: flex; list-style: none; gap: var(--space-8); margin: 0; padding: 0; } .header-nav a { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 300; text-decoration: none; color: inherit; opacity: 0.8; transition: opacity var(--transition-fast); } .header-nav a:hover { opacity: 1; } @media (max-width: 768px) { .header-nav { display: none; } } .header-logo { height: 36px; max-height: 36px; width: auto; object-fit: contain; display: block; } @media (min-width: 768px) { .header-logo { height: 44px; max-height: 44px; } }