/* ========================================================================== Excel Learning Hub — responsive.css Breakpoint overrides only. Component styles stay in style.css; this file just repositions/resizes them at each tier. Tiers: mobile (default) / tablet 640px+ / desktop 1024px+ / large 1280px+ ========================================================================== */ /* ---- Mobile default: nav links visible & stacked so navigation works with zero JavaScript (progressive enhancement). JS adds .nav--js to once main.js loads, which is what enables the collapsible behavior below at the mobile tier. Without JS, links just wrap. ---- */ .menu-toggle { display: none; } @media (max-width: 1023px) { .menu-toggle { display: flex; } .nav-links { flex-basis: 100%; order: 3; } .nav-links ul { flex-direction: column; gap: 0; padding: var(--space-2) 0; } .nav-links a { display: block; padding: var(--space-2) 0; } /* Only collapse behind the toggle once JS has confirmed it can run the open/close behavior (class added by main.js). */ body.nav--js .nav-links { display: none; } body.nav--js .nav-links.is-open { display: block; } .site-header__inner { flex-wrap: wrap; } .hero__inner { grid-template-columns: 1fr; } .hero h1 { font-size: 2rem; } .grid--3, .grid--4 { grid-template-columns: 1fr; } .feature-list { grid-template-columns: 1fr; } .site-footer__grid { grid-template-columns: 1fr 1fr; } .lesson-layout { grid-template-columns: 1fr; } .lesson-sidebar { display: none; } /* sticky in-page nav is a desktop aid; mobile keeps it simple per brief */ } @media (max-width: 639px) { .hero { padding: var(--space-5) 0; } .hero h1 { font-size: 1.75rem; } .section { padding: var(--space-5) 0; } .site-footer__grid { grid-template-columns: 1fr; } .callout { padding: var(--space-4); } .formula-box__code { padding-right: 0; padding-bottom: 40px; } .lesson-nav-buttons { grid-template-columns: 1fr; } .lesson-nav-buttons__next { text-align: left; grid-column: 1; } } /* ---- Tablet: 2-column grids where mobile was 1 and desktop is 3/4 --- */ @media (min-width: 640px) and (max-width: 1023px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } /* ---- Large desktop: slightly wider container ------------------------ */ @media (min-width: 1280px) { :root { --container-width: 1280px; } }