/* ============================================================ GEM — Mobile refinements. PURELY ADDITIVE: desktop (>=900px) is untouched except that the theme-owned burger/overlay are hidden there. ============================================================ */ /* ------------------------------------------------------------ Mobile menu — theme-owned. The nav bar is position:fixed with a backdrop blur, which traps any fixed descendant (this is why WP's own overlay rendered as a scrolling strip). Our overlay lives on , is truly full-screen, and locks page scroll. Bar shows ONLY the logo and the hamburger below 900px. ------------------------------------------------------------ */ .gem-mobile-burger { display: none; appearance: none; background: none; border: none; color: var(--warm-white); padding: 8px; cursor: pointer; } .gem-mobile-burger svg { width: 24px; height: 24px; display: block; } .gem-mobile-burger:hover { color: var(--antique-gold); } #gem-mobile-menu { position: fixed; inset: 0; z-index: 100000; display: none; flex-direction: column; background: rgba(10, 10, 10, 0.98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 108px 8% 48px; overflow: hidden; } #gem-mobile-menu.is-open { display: flex; } #gem-mobile-menu .gem-mm-links { display: flex; flex-direction: column; width: 100%; } #gem-mobile-menu .gem-mm-link { font-family: "DM Mono", monospace; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--warm-white); text-decoration: none; padding: 18px 0; border-bottom: 1px solid var(--border-strong); } #gem-mobile-menu .gem-mm-link:hover { color: var(--antique-gold); } #gem-mobile-menu .gem-mm-close { position: absolute; top: 24px; right: 6%; appearance: none; background: none; border: none; color: var(--warm-white); padding: 8px; cursor: pointer; } #gem-mobile-menu .gem-mm-close svg { width: 22px; height: 22px; display: block; } #gem-mobile-menu .gem-mm-close:hover { color: var(--antique-gold); } /* Page cannot scroll behind the open menu */ html.gem-mm-locked, body.gem-mm-locked { overflow: hidden !important; height: 100%; } @media (max-width: 899px) { /* Bar: logo + hamburger only. All WP responsive machinery and the CTA button are hidden; the original rule hiding .gem-nav-links stays in force (we don't revive it). */ .gem-mobile-burger { display: flex; } .gem-nav .wp-block-navigation__responsive-container, .gem-nav .wp-block-navigation__responsive-container-open, .gem-nav .gem-nav-cta-btn { display: none !important; } } /* ------------------------------------------------------------ DESKTOP LOCKDOWN (>=900px): exactly the classic menu, nothing else — even if a cached/customized header part carries stale overlay settings, the inline links row is forced back. ------------------------------------------------------------ */ @media (min-width: 900px) { .gem-mobile-burger, #gem-mobile-menu, .gem-nav .wp-block-navigation__responsive-container-open, .gem-nav .wp-block-navigation__responsive-container-close { display: none !important; } .gem-nav .wp-block-navigation__responsive-container { display: block !important; position: static !important; width: auto !important; height: auto !important; background: transparent !important; padding: 0 !important; overflow: visible !important; } .gem-nav .wp-block-navigation__responsive-container-content { display: flex !important; align-items: center; } .gem-nav .gem-nav-cta-btn { display: block !important; } } /* ------------------------------------------------------------ Homepage performance strip: 5-column grid → stacked panels ------------------------------------------------------------ */ @media (max-width: 900px) { .perf-grid { grid-template-columns: 1fr 1fr; } .perf-fund { padding: 44px 28px; } } @media (max-width: 640px) { .perf-grid { grid-template-columns: 1fr; } .shifts-controls { flex-wrap: wrap; gap: 20px; margin-top: 36px; } } /* ------------------------------------------------------------ Themes accordion: 4-column bar → compact 3-column, hide the caption; panel stacks visual above copy ------------------------------------------------------------ */ @media (max-width: 700px) { .eq-idx-bar { grid-template-columns: 44px 1fr 32px; gap: 16px; } .eq-idx-cap { display: none; } .eq-idx-panel { grid-template-columns: 1fr; gap: 24px; padding: 4px 4px 36px; } } /* ------------------------------------------------------------ Process stepper: detail stacks; nodes tighten, then stack ------------------------------------------------------------ */ @media (max-width: 760px) { .eq-proc-detail { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; padding-top: 40px; } .eq-proc-node-name { font-size: 11px; letter-spacing: 1.5px; } } @media (max-width: 480px) { .eq-proc-rail { grid-template-columns: 1fr; gap: 20px; } .eq-proc-track { display: none; } .eq-proc-node { flex-direction: row; text-align: left; gap: 12px; } } /* ------------------------------------------------------------ Returns table: horizontal scroll instead of crushing columns ------------------------------------------------------------ */ @media (max-width: 700px) { .wp-block-table.eq-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .wp-block-table.eq-table table { min-width: 560px; } } /* ------------------------------------------------------------ General small-screen comfort ------------------------------------------------------------ */ @media (max-width: 640px) { .gem-cta-actions.wp-block-buttons, .hero-ctas.wp-block-buttons { flex-wrap: wrap; gap: 14px; } .gem-page-main { padding: 130px 0 80px; } .gem-insights-query .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; } .gem-footer-cols { gap: 32px; } } /* ------------------------------------------------------------ Whole-site small-screen polish ------------------------------------------------------------ */ @media (max-width: 899px) { html, body { overflow-x: hidden; } } @media (max-width: 640px) { .shifts-stage { height: 400px; } h1, h2, h3, .gem-page-title { overflow-wrap: break-word; } .gem-cta-actions .wp-block-button__link { width: 100%; text-align: center; } .gem-cta-actions .wp-block-button { width: 100%; } }