/* ═════════════════════════════════════════════════════════════════ Interior nav — shared page chrome for all interior pages Fixed navbar with tiled plate-pattern background, white inner container, and hamburger toggle. Used by every page except the home page. Apply class .interior-page to on any interior page. ═════════════════════════════════════════════════════════════════ */ /* ── Nav variables ─────────────────────────────────── Tune these on .interior-page to adjust all pages. */ .interior-page { --nav-top-gap: 25px; --nav-side-gap: 35px; --nav-height: 120px; /* Fixed distance between the white inner container and the column collars. The tiled strip still extends behind the collars; only the inner box stays clear. */ --nav-inner-collar-gap: 16px; --nav-inner-inset-left: calc(var(--collar-gap-left) + var(--truss-col-width) / 2 + var(--collar-width) / 2 + var(--nav-inner-collar-gap) - var(--nav-side-gap)); --nav-inner-inset-right: calc(var(--collar-gap-right) + var(--truss-col-width) / 2 + var(--collar-width) / 2 + var(--nav-inner-collar-gap) - var(--nav-side-gap)); /* Fixed typography (>1000px): overrides the clamp() sizing from nav-typography.css for the interior nav. */ --interior-nav-brand-size: 30px; --interior-nav-link-size: 22px; --interior-nav-link-gap: 30px; } /* ── Page scaffolding ──────────────────────────────── */ .interior-page { background-color: var(--purple-white); color: var(--purple-dark); font-family: var(--font-nav); padding-top: calc(var(--nav-top-gap) + var(--nav-height) + 20px); /* Sticky footer: the column flex makes main fill any leftover viewport height, so the footer hugs the bottom of short pages and follows the content on long ones. */ min-height: 100vh; display: flex; flex-direction: column; } .interior-page > main { flex: 1 0 auto; } .interior-page .site-footer { flex-shrink: 0; } /* ── Nav bar ───────────────────────────────────────── Fixed, tiled plate-pattern, white inner container. */ .interior-nav { position: fixed; top: var(--nav-top-gap); left: var(--nav-side-gap); right: var(--nav-side-gap); z-index: 100; display: flex; align-items: center; height: var(--nav-height); /* Padding = collar extent + fixed gap, minus the strip's own inset from the viewport edge. Result: the white inner box holds a constant distance from the collars at any width while the tiled strip still slides behind them. */ padding-block: 0; padding-inline-start: var(--nav-inner-inset-left); padding-inline-end: var(--nav-inner-inset-right); background-image: url('../../images/big-plate.svg'); background-repeat: repeat; background-size: 120px 120px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); font-family: var(--font-nav); } /* White inner container — floats on the plate pattern */ .interior-nav__inner { position: relative; z-index: 1; display: flex; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0.5rem 1rem; background: #fff; border-radius: 4px; } .interior-nav__brand { display: flex; align-items: center; gap: 0.4em; font-size: var(--interior-nav-brand-size); font-weight: 800; color: var(--purple-dark); text-decoration: none; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); flex-shrink: 0; } .interior-nav__icon { height: 1.2em; width: auto; } /* ── Hamburger toggle ─────────────────────────────── */ .interior-nav__toggle { display: none; margin-left: auto; padding: 0.4rem 0.6rem; background: none; border: 1px solid var(--purple-light); border-radius: 4px; cursor: pointer; line-height: 1; } .interior-nav__toggle-icon, .interior-nav__toggle-icon::before, .interior-nav__toggle-icon::after { display: block; width: 22px; height: 2px; background: var(--purple-dark); transition: transform 0.2s ease, opacity 0.2s ease; } .interior-nav__toggle-icon { position: relative; } .interior-nav__toggle-icon::before, .interior-nav__toggle-icon::after { content: ""; position: absolute; left: 0; } .interior-nav__toggle-icon::before { top: -6px; } .interior-nav__toggle-icon::after { top: 6px; } /* Open state — turns hamburger into X */ .interior-nav__toggle[aria-expanded="true"] .interior-nav__toggle-icon { background: transparent; } .interior-nav__toggle[aria-expanded="true"] .interior-nav__toggle-icon::before { transform: translateY(6px) rotate(45deg); } .interior-nav__toggle[aria-expanded="true"] .interior-nav__toggle-icon::after { transform: translateY(-6px) rotate(-45deg); } /* ── Nav links ────────────────────────────────────── */ .interior-nav__links { display: flex; gap: var(--interior-nav-link-gap); margin: 0 0 0 auto; padding: 0; list-style: none; } .interior-nav__links a { text-decoration: none; color: var(--purple-dark); font-size: var(--interior-nav-link-size); font-weight: 500; white-space: nowrap; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); } .interior-nav__links a:hover, .interior-nav__links a.active { color: var(--purple-light); font-weight: 700; } /* ── Responsive ────────────────────────────────────── Below the breakpoint the interior nav mirrors the home page's below-breakpoint navbar exactly: a flat, fixed, full-width bar. The plate pattern and the white inner box go away, links stay in a row until 480px, and the burger dropdown hangs below the bar on mobile. */ @media (max-width: 1000px) { /* Page clears the fixed bar instead of the tall hero nav. The vars update too, so docs anchor scroll-margins stay correct against the shorter bar. */ .interior-page { --nav-top-gap: 0; --nav-height: clamp(3.5rem, 8vw, 4rem); padding-top: calc(var(--nav-height) + 1rem); background-color: var(--purple-white-mobile); } .interior-nav { top: 0; left: 0; right: 0; width: 100%; height: clamp(3.5rem, 8vw, 4rem); padding: 0 1rem; background: #f0f0f0; /* same flat colour as the home bar */ box-shadow: 0 0.05vw 0 0 rgba(0, 0, 0, 0.08), 0 0.2vw 0.8vw rgba(0, 0, 0, 0.18); } /* Thin lighter top edge, like the home bar */ .interior-nav::before { content: ""; position: absolute; top: -0.25vw; left: 0; right: 0; height: 0.25vw; background: #ffffff; } /* The white inner box disappears: the bar itself is the box */ .interior-nav__inner { width: 100%; max-width: none; margin: 0; padding: 0; background: transparent; border-radius: 0; flex-wrap: nowrap; } .interior-nav__brand { font-size: clamp(22px, 3vw, 32px); text-shadow: none; } .interior-nav__icon { height: 1em; } /* Links stay in a row until the burger breakpoint */ .interior-nav__toggle { display: none; } .interior-nav__links { display: flex; flex-direction: row; flex-basis: auto; gap: clamp(20px, 5vw, 50px); margin: 0.2em 0 0 auto; padding: 0; border-top: none; } .interior-nav__links a { font-size: clamp(16px, 2vw, 20px); font-weight: 500; text-shadow: none; } .interior-nav__links a.active { color: var(--purple-dark); font-weight: 500; } } /* ── Mobile (≤480px): burger menu, exactly like home ── */ @media (max-width: 480px) { .interior-nav__toggle { display: block; margin-left: auto; padding: 0.65rem 0.6rem; /* extra top/bottom room for the icon */ } /* Dropdown: full-width panel hanging below the fixed bar */ .interior-nav__links { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: center; gap: 0.75rem; margin: 0; padding: 0.75rem 1rem; background: #f0f0f0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .interior-nav__links.is-open { display: flex; } }