/** * layout.css — Structural scaffolding * ----------------------------------------------------------------------------- * Containers, section rhythm, the fixed header/navigation and the footer. * Section-specific presentation lives in sections.css. */ /* ---- Containers -------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } /* Vertical rhythm for standard sections. */ .section { padding-block: var(--section-pad); } /* Reveal-on-scroll animation (progressive enhancement). Elements start hidden ONLY when JS has flagged support via , so the site remains fully visible if JavaScript is disabled. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; } /* ===================================================================== */ /* Header / navigation */ /* ===================================================================== */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } /* Subtle top-down scrim so the (white) brand + nav stay legible over bright areas of the hero image OR a future hero video. Fades out once scrolled, when the header gains its own solid background. */ .site-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(12, 11, 8, 0.38), rgba(12, 11, 8, 0)); opacity: 1; transition: opacity var(--dur) var(--ease); } .site-header.is-scrolled::before { opacity: 0; } .site-header__inner { position: relative; /* sit above the header scrim (::before) */ z-index: 1; max-width: var(--container-wide); margin-inline: auto; padding: 0 var(--gutter); height: var(--header-h); display: flex; align-items: center; justify-content: space-between; } .site-header__brand { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.04em; color: var(--color-on-dark); transition: color var(--dur) var(--ease); } /* Solid state — applied by main.js once the page is scrolled. */ .site-header.is-scrolled { background-color: var(--color-bg); box-shadow: 0 1px 0 var(--color-line); } .site-header.is-scrolled .site-header__brand, .site-header.is-scrolled .site-nav__menu a { color: var(--color-ink); } .site-header.is-scrolled .site-nav__toggle span { background-color: var(--color-ink); } /* ---- Navigation menu --------------------------------------------------- */ .site-nav__menu { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); } .site-nav__menu a { font-size: var(--fs-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-on-dark); padding-block: 0.5rem; position: relative; } /* Understated underline on hover. */ .site-nav__menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: currentColor; transition: width var(--dur) var(--ease); } .site-nav__menu a:hover::after, .site-nav__menu a:focus-visible::after { width: 100%; } .site-nav__cta { border: 1px solid currentColor; padding: 0.55rem 1.4rem !important; border-radius: var(--radius-sm); } .site-nav__cta::after { display: none; } .site-nav__cta:hover { opacity: 0.75; } /* ---- Mobile menu toggle (hamburger) ------------------------------------ */ .site-nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; background: none; border: none; cursor: pointer; /* `position` is required for z-index to apply — without it the toggle sat BELOW the slide-in menu panel, so tapping the X did nothing. */ position: relative; z-index: var(--z-nav); -webkit-tap-highlight-color: transparent; } /* Invisible padding around the hamburger so the tap target clears 44px without changing how the icon looks or where it sits. */ .site-nav__toggle::before { content: ""; position: absolute; inset: -8px; } .site-nav__toggle span { display: block; height: 1.5px; width: 100%; background-color: var(--color-on-dark); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), background-color var(--dur) var(--ease); } /* ===================================================================== */ /* Footer */ /* ===================================================================== */ .site-footer { background-color: var(--color-dark); color: var(--color-on-dark); padding-block: var(--space-2xl) var(--space-xl); text-align: center; } .site-footer__brand { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0.04em; margin-inline: auto; } .site-footer__meta { font-size: var(--fs-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-on-dark-soft); margin: var(--space-sm) auto 0; } .site-footer__fineprint { font-size: var(--fs-small); color: var(--color-on-dark-soft); opacity: 0.7; margin: var(--space-lg) auto 0; max-width: 46ch; } /* ===================================================================== */ /* Responsive — navigation collapses into a slide-in panel on small screens */ /* ===================================================================== */ @media (max-width: 900px) { .site-nav__toggle { display: flex; } .site-nav__menu { position: fixed; inset: 0 0 0 auto; width: min(80vw, 340px); flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-lg); padding: var(--gutter); background-color: var(--color-bg); transform: translateX(100%); box-shadow: var(--shadow-soft); /* Below the toggle (--z-nav) so the X stays tappable, above page content. */ z-index: calc(var(--z-nav) - 1); overflow-y: auto; /* usable on short screens / landscape phones */ overscroll-behavior: contain; /* The parked panel is made `visibility: hidden` so it can never intercept taps near the right edge. The 0s-duration visibility transition is DELAYED until the slide-out finishes, so the panel still animates away exactly as before instead of vanishing instantly. */ visibility: hidden; transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur); } .site-nav__menu.is-open { transform: translateX(0); visibility: visible; transition: transform var(--dur) var(--ease), visibility 0s linear 0s; } /* Slightly taller tap targets in the mobile panel (links keep their content width, so the panel looks the same). */ .site-nav__menu a { display: block; padding-block: 0.6rem; } /* On the mobile panel, links are always dark on the light panel. */ .site-nav__menu a { color: var(--color-ink); font-size: 1.05rem; } .site-nav__cta { color: var(--color-ink); } /* Hamburger → close (X) animation when open. */ .site-nav__toggle.is-open span { background-color: var(--color-ink); } .site-nav__toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .site-nav__toggle.is-open span:nth-child(2) { opacity: 0; } .site-nav__toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } }