/** * assets/css/layout.css * Step 15.8: this file was missing from the live server entirely (404) — * every across the project links it, and several comments elsewhere * (components.css's header/sidebar notes) describe rules that were * supposed to live here, but the file itself was never actually present. * That's the real root cause behind everything reported this session on * both mobile AND desktop: no base font/reset, the sidebar rendering as a * plain bulleted list in normal page flow instead of a side column next to * the content, and the hero/sections running full-bleed edge-to-edge with * no page margins. Rebuilt from scratch here using the existing design * tokens in variables.css and the component classes already referenced * throughout includes/ and sections/ (.page-wrapper, .sidebar, * .main-content), so no PHP/HTML had to change to wire this back up. */ /* --------------------------------------------------------------------------- BASE / RESET --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); margin: 0 0 var(--space-4); line-height: var(--lh-tight); } p { margin: 0 0 var(--space-4); } img { max-width: 100%; display: block; } a { color: var(--color-primary); } ul, ol { margin: 0; padding: 0; } button { font-family: inherit; cursor: pointer; background: none; border: none; } /* --------------------------------------------------------------------------- SITE HEADER — outer spacing/positioning only. The header's internal row layout (logo/name/tagline vs. the WhatsApp/hamburger actions) is owned by components.css (Step 15.6), not here, so it isn't duplicated below. --------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; padding: var(--space-3) var(--space-6); background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); } @media (max-width: 768px) { .site-header { padding: var(--space-3) var(--space-4); } } /* --------------------------------------------------------------------------- PAGE WRAPPER — sidebar + main-content grid (desktop/tablet), collapsing to a single column on mobile (where the sidebar itself is hidden by components.css's Step 15.4 rule in favor of the hamburger menu). --------------------------------------------------------------------------- */ .page-wrapper { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: var(--space-6); max-width: 1280px; margin: 0 auto; padding: var(--space-6); transition: grid-template-columns var(--transition-base); } @media (max-width: 1024px) { .page-wrapper { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-4); } } @media (max-width: 768px) { .page-wrapper { display: block; padding: var(--space-4); } } /* Step 15.11: horizontal collapse. Previously toggling the sidebar only shrank `.sidebar__nav`'s own height (a vertical accordion) — the `.sidebar` grid column itself stayed a fixed 260px/220px, so the main content next to it never actually got any wider. Requested change: the sidebar should collapse down to a slim icon rail and the page content should expand to fill the freed-up width. `.page-wrapper--sidebar-collapsed` is toggled by initSidebarAccordion() (assets/js/main.js) on the same `.page-wrapper` that defines the grid, alongside `.sidebar--collapsed` on the `