/* v10: aligned the logo's horizon line with the header's divider line (desktop + mobile); fixed the mobile brand-name overlap with the navigation links; moved the sticky positioning from .topnav to .site-header-root so the header actually stays pinned while scrolling (previously it scrolled away - see .site-header-root comment below); made .topnav's background fully opaque (was transparent below the divider line, which let scrolling content peek through behind the now-fixed header); increased --site-header-height to 160px on desktop so the sticky box actually contains the brand subtitle ("FORGOTTEN STORIES") - it used to overflow 44px below the 116px box, which meant it stayed floating over whatever page content scrolled underneath it once the header was actually pinned. */ :root { /* Tall enough to actually contain the brand title + subtitle (previously 116px, which was shorter than the real content - title+subtitle run down to ~160px - so with the header now genuinely sticky/pinned, the subtitle ("FORGOTTEN STORIES") overflowed below the sticky box and stayed floating over whatever page content scrolled underneath it. --site-header-line-y (the logo's decorative horizon line) is unrelated to this and stays as is. */ --site-header-height: 160px; --site-header-line-y: 112px; } .site-header-root { /* Sticky lives here, not on .topnav: .site-header-root's parent is (the full page height), which gives the sticky box room to actually stay pinned. .topnav is this element's only child, so if .topnav itself were sticky, its containing block (.site-header-root) would be exactly as tall as .topnav - leaving no room to stick, and the header would just scroll away with the page instead of staying fixed. */ position: sticky; top: 0; z-index: 50; border: 0; box-shadow: none; background: transparent; } .topnav { position: relative; z-index: 50; min-height: var(--site-header-height); overflow: visible; backdrop-filter: none; /* Opaque for the header's full height (not just down to the divider line) - now that the header is genuinely pinned in place (see .site-header-root above), a transparent tail here would let scrolling page content peek through the gap for a moment as it passes behind the fixed header. The divider line itself is drawn separately by .topnav::after below, so this can be solid color without losing that line. */ background: rgba(239, 238, 237, .94); border: 0; border-bottom: 0; box-shadow: none; } .topnav::after { content: ""; position: absolute; left: 0; right: 0; top: var(--site-header-line-y); height: 2px; background: rgba(72, 71, 68, .42); box-shadow: 0 1px 0 rgba(248, 248, 247, .58); pointer-events: none; } .topnav__inner { width: min(1180px, calc(100% - 32px)); height: var(--site-header-height); margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; position: relative; } .brand { display: inline-flex; align-items: flex-start; gap: 26px; text-decoration: none; min-width: 0; height: var(--site-header-height); position: relative; z-index: 1; } .brand__logo { width: 144px; height: 144px; object-fit: contain; border: 0; box-shadow: none; filter: drop-shadow(0 8px 14px rgba(38, 36, 32, .18)); /* In the logo image, the field/horizon line sits at ~77.8% of its height from the top. margin-top is chosen so that line lines up exactly with --site-header-line-y. */ margin-top: 0; flex: 0 0 auto; } .brand__text { display: block; min-width: 0; line-height: 1; padding-top: 30px; } .brand__title { display: block; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(34px, 4.3vw, 58px); letter-spacing: -.02em; color: var(--ink, #252422); text-shadow: 0 1px 0 rgba(248, 248, 247, .72); white-space: nowrap; } .brand__subtitle { display: block; margin-top: 44px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(18px, 2.05vw, 28px); color: #767470; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; text-shadow: 0 1px 0 rgba(248, 248, 247, .36); white-space: nowrap; } .navlinks { display: flex; align-items: center; gap: 8px; margin-top: 40px; position: relative; z-index: 2; } .navlinks a { border: 1px solid rgba(66, 63, 57, .20); background: rgba(248, 248, 247, .70); color: var(--ink, #252422); text-decoration: none; padding: 10px 14px; border-radius: 999px; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; } .navlinks a:hover { transform: translateY(-1px); background: #f8f8f7; border-color: rgba(66, 63, 57, .34); } .navlinks a[aria-current="page"] { border-color: rgba(66, 63, 57, .40); background: rgba(248, 248, 247, .92); } /* The same centralized header component also has a minimal 3D variant. */ .site-3d-topbar { position: fixed; top: 0; left: 0; right: 0; height: 42px; z-index: 100; display: flex; align-items: center; justify-content: flex-start; padding: 0 14px; box-sizing: border-box; background: rgba(58, 57, 54, .90); color: #fff; } .site-3d-topbar__back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .18); color: #fff; text-decoration: none; font-family: Arial, sans-serif; font-size: 28px; line-height: 1; } .site-3d-topbar__back:hover { background: rgba(255, 255, 255, .16); } @media (max-width: 640px) { /* On narrow screens the brand and navigation no longer fit on one line without overlapping, so the header "wraps" into two rows: the brand (full width), then the links. The divider line here is just a border-bottom, since the row count (and thus height) varies. */ :root { --site-header-height: 150px; } .topnav { background: rgba(239, 238, 237, .94); border-bottom: 2px solid rgba(72, 71, 68, .42); box-shadow: inset 0 -1px 0 rgba(248, 248, 247, .58); } .topnav::after { display: none; } .topnav__inner { height: auto; min-height: 0; flex-wrap: wrap; padding: 14px 0; align-items: flex-start; gap: 10px; } .brand { flex: 1 1 100%; height: auto; gap: 10px; } .brand__subtitle { display: none; } .brand__title { font-size: 22px; white-space: normal; overflow-wrap: anywhere; } .brand__text { padding-top: 14px; flex: 1 1 auto; min-width: 0; } .brand__logo { width: 72px; height: 72px; margin-top: 0; } .navlinks { flex: 1 1 100%; gap: 6px; flex-wrap: wrap; justify-content: flex-start; margin-top: 2px; } .navlinks a { padding: 9px 11px; font-size: 14px; } }