.page { width: min(100% - 2rem, var(--clce-page-max)); margin-inline: auto; } .site-header { background: var(--clce-paper); border-bottom: 1px solid var(--clce-rule); } .site-header-page { position: relative; } .site-header-utility { position: absolute; top: var(--size-2); right: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: var(--size-3); font-size: var(--font-size-0); color: var(--clce-fg-muted); z-index: 5; } .site-header-utility a, .site-header-utility .link-btn, .site-header-utility .auth-greeting { color: var(--clce-fg-muted); text-decoration: none; white-space: nowrap; } .site-header-utility a:hover, .site-header-utility .link-btn:hover { color: var(--clce-accent); text-decoration: underline; } .site-header-utility .auth-greeting { font-weight: var(--font-weight-6); } .site-header-utility form { display: inline; margin: 0; } .link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } /* Hamburger + nav-overlay live below in the mobile-nav block. */ .site-header-inner { display: flex; flex-direction: column; align-items: stretch; gap: var(--size-3); padding-block: var(--size-4); } .site-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--size-4); } .site-title { font-family: var(--clce-font-heading); font-size: var(--font-size-5); color: var(--clce-burgundy-9); text-decoration: none; font-weight: var(--font-weight-6); white-space: nowrap; /* Title shrinks if the row gets too narrow, instead of overflowing. */ min-width: 0; } @media (max-width: 600px) { /* "Calvary Lutheran Church" doesn't fit on one line at phone widths. Drop nowrap, let it wrap to two lines, and step the size down. */ .site-title { white-space: normal; font-size: var(--font-size-4); line-height: var(--font-lineheight-2); } } @media (max-width: 380px) { .site-title { font-size: var(--font-size-3); } } .site-nav .nav-list { display: flex; gap: var(--size-4); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; align-items: center; justify-content: flex-start; } .site-nav a, .site-nav button { color: var(--clce-fg); text-decoration: none; background: none; border: 0; padding: var(--size-1) 0; font: inherit; cursor: pointer; } .site-nav a:hover, .site-nav button:hover { color: var(--clce-accent); text-decoration: underline; } .has-submenu { position: relative; } .has-submenu > button::after { content: " ▾"; font-size: 0.7em; color: var(--clce-fg-muted); } .submenu { position: absolute; top: 100%; left: 0; min-width: 14rem; list-style: none; margin: 0; padding: var(--size-2); background: var(--clce-paper); border: 1px solid var(--clce-rule); border-radius: var(--radius-2); box-shadow: var(--shadow-3); display: none; z-index: 10; } .submenu li { padding: var(--size-1) 0; } .submenu a { display: block; } .has-submenu:hover > .submenu, .has-submenu:focus-within > .submenu { display: block; } /* === Mobile nav (hamburger + slide-in panel) ============================ * * z-index strategy (lowest → highest): * submenus (desktop): 10 * utility bar: 5 * nav overlay backdrop: 900 * nav panel: 950 * hamburger / close btn: 1000 (always tappable above panel) * * Stacking-context discipline: * - Overlay + panel are direct children of so they share the root * stacking context (no surprise ancestor with transform/filter/opacity * traps them). * - position: fixed for the panel — viewport-anchored, immune to iOS * Safari address-bar collapse undocking. * - data-nav-open attribute lives on (not ) so future * transforms on body can't trap the overlay's stacking. * * Progressive enhancement: * - is the initial state. * - layout.blade.php inlines a 1-line script that swaps to .js as early * as possible. CSS rules below are gated on .js so users without JS * get the inline-flat menu fallback (still functional). */ .nav-toggle-button, .nav-close-button { display: none; background: transparent; border: 0; cursor: pointer; padding: var(--size-2); font: inherit; color: var(--clce-fg); /* Don't let the flex layout squeeze these buttons away even when the title is wider than the available row. */ flex-shrink: 0; } .hamburger-icon, .hamburger-icon::before, .hamburger-icon::after { content: ""; display: block; width: 1.5rem; height: 2px; background: currentColor; } @media (prefers-reduced-motion: no-preference) { .hamburger-icon, .hamburger-icon::before, .hamburger-icon::after { transition: transform 0.2s, opacity 0.2s; } } .hamburger-icon::before { transform: translateY(-0.45rem); } .hamburger-icon::after { transform: translateY(0.35rem); } .nav-close-button { font-size: 2rem; line-height: 1; padding: var(--size-2) var(--size-3); } .nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 900; -webkit-tap-highlight-color: transparent; } @media (max-width: 900px) { .site-header-inner { grid-template-columns: 1fr auto; } .site-nav .nav-list { gap: var(--size-2); } /* JS-enhanced behavior — slide-in panel + hamburger toggle. */ .js .nav-toggle-button { display: inline-flex; align-items: center; justify-content: center; z-index: 1000; position: relative; } .js .site-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(20rem, 85vw); max-width: 85vw; background: var(--clce-paper); border-left: 1px solid var(--clce-rule); padding: var(--size-6) var(--size-4) var(--size-4); z-index: 950; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); -webkit-overflow-scrolling: touch; } @media (prefers-reduced-motion: no-preference) { .js .site-nav { transition: transform 0.2s ease-out; } } /* Both .js and data-nav-open live on , so descendant selectors like `[data-nav-open] .js .site-nav` would require them to be on different elements — they aren't. Use the same-element selector. */ [data-nav-open] .site-nav { transform: translateX(0); } /* Hide the hamburger when the panel is open — the panel's own × button handles closing, and a redundant button overlapping the panel just adds noise. */ [data-nav-open] .nav-toggle-button { display: none; } [data-nav-open] body { overflow: hidden; } .js .nav-close-button { display: block; position: absolute; top: var(--size-2); right: var(--size-2); z-index: 1000; } .js .site-nav .nav-list { flex-direction: column; align-items: stretch; gap: var(--size-3); } .js .site-nav .nav-list > li > a, .js .site-nav .nav-list > li > button, .js .site-nav .nav-list > li > span { font-size: var(--font-size-3); display: block; width: 100%; text-align: left; } .js .submenu { position: static; display: block; box-shadow: none; border: 0; padding: var(--size-2) 0 0 var(--size-3); background: transparent; min-width: 0; } .js .has-submenu > button::after { content: ""; } /* No-JS fallback at narrow widths: flat inline menu, hamburger hidden. */ .no-js .site-nav .nav-list { flex-direction: column; align-items: stretch; gap: var(--size-2); padding-block: var(--size-3); } .no-js .submenu { position: static; display: block; box-shadow: none; border: 0; padding: var(--size-2) 0 0 var(--size-3); background: transparent; } .no-js .has-submenu > button { display: none; } /* button has no JS to handle */ } /* Hide mobile-only chrome on desktop. */ @media (min-width: 901px) { .nav-toggle-button, .nav-close-button, .nav-overlay { display: none !important; } /* Mobile auth widget falls back to static — restore its absolute pos. */ .site-header-utility { position: absolute; padding: 0; } } /* Narrow-width auth widget (above the nav). */ @media (max-width: 900px) { .site-header-utility { position: static; padding: var(--size-1) var(--size-3); justify-content: flex-end; } } .site-main { flex: 1; padding-block: var(--size-6); /* tabindex="-1" makes

focus-target for the skip link, but we don't want a focus ring on click — only on keyboard skip-link activation. */ } .site-main:focus { outline: none; } .site-main:focus-visible { outline: 2px solid var(--clce-burgundy-7); outline-offset: 2px; } /* Body text column is narrower than the header's page width for readability, but left-aligned to the page (not centered) so its left edge sits flush under the title and nav. Wide body elements (hero images, image grids) that should escape the prose width should be moved out of .prose or given their own full-bleed treatment. */ .site-main .prose { max-width: var(--clce-content-max); } .site-footer { background: var(--clce-burgundy-9); color: var(--clce-burgundy-1); padding-block: var(--size-6); margin-top: var(--size-7); font-size: var(--font-size-1); } .site-footer a { color: var(--clce-burgundy-1); } .site-footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--size-6); align-items: start; } @media (max-width: 720px) { .site-footer-grid { grid-template-columns: 1fr; gap: var(--size-5); } } .site-footer-heading { font-family: var(--clce-font-heading); font-size: var(--font-size-3); color: var(--clce-burgundy-1); margin: 0 0 var(--size-3); letter-spacing: 0.02em; } .site-footer-address { font-style: normal; line-height: var(--font-lineheight-4); } .site-footer-list { list-style: none; padding: 0; margin: 0; line-height: var(--font-lineheight-4); } .site-footer-copyright { margin-top: var(--size-4); color: var(--clce-burgundy-3); font-size: var(--font-size-0); }