/* ═══════════════════════════════════════════════════ mobile.css — compareproteinprices.com v3 goes inside after your existing styles. ═══════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════ 1. HAMBURGER BUTTON Shown on mobile, hidden on desktop via media query ═══════════════════════════════════════════════════ */ .hamburger { display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; background: transparent; border: none; cursor: pointer; padding: 0; flex-shrink: 0; /* z-index not needed — hamburger is in normal flow */ } .hamburger span { display: block; width: 100%; height: 2px; background: #e8eaf6; /* explicit hex — never inherits transparency */ border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } .hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* ═══════════════════════════════════════════════════ 2. MOBILE DRAWER Must be a DIRECT CHILD of in the HTML. This avoids iOS Safari stacking-context bugs where position:fixed inside a z-index parent goes transparent. ═══════════════════════════════════════════════════ */ .mobile-drawer { /* Slide off to the right when closed */ position: fixed; top: 0; right: 0; width: 280px; height: 100%; height: 100dvh; /* Solid, opaque background — explicit hex, NOT a CSS variable */ background-color: #0d1128; border-left: 2px solid #00ff88; box-shadow: -8px 0 48px rgba(0, 0, 0, 0.95); /* Use transform to slide in/out — avoids overflow-x clipping on body */ transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; /* highest in document */ overflow-y: auto; display: flex; flex-direction: column; padding: 72px 0 32px; } .mobile-drawer.open { transform: translateX(0); } /* Drawer nav links */ .mobile-drawer-links { list-style: none; padding: 0; margin: 0; flex: 1; } .mobile-drawer-links li { border-bottom: 1px solid rgba(40, 53, 147, 0.4); } .mobile-drawer-links a { display: flex; align-items: center; padding: 16px 28px; min-height: 54px; font-family: 'JetBrains Mono', monospace; font-size: 0.97rem; font-weight: 600; color: #9fa8da; text-decoration: none; transition: color 0.2s, background 0.2s; } .mobile-drawer-links a:hover, .mobile-drawer-links a.active { color: #00ff88; background: rgba(0, 255, 136, 0.05); } /* CTA button at bottom of drawer */ .mobile-drawer-cta { display: flex; align-items: center; justify-content: center; margin: 20px 24px 0; padding: 13px 20px; background: linear-gradient(135deg, #00ff88, #00ccff); color: #0a0e27 !important; -webkit-text-fill-color: #0a0e27 !important; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; font-weight: 700; border-radius: 8px; text-decoration: none; text-align: center; } /* ═══════════════════════════════════════════════════ 3. OVERLAY (also direct child of ) ═══════════════════════════════════════════════════ */ .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.78); z-index: 9998; /* just below drawer */ cursor: pointer; } .nav-overlay.open { display: block; } /* ═══════════════════════════════════════════════════ MAIN MOBILE BREAKPOINT — 768px and below ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Show hamburger */ .hamburger { display: flex; } /* Desktop nav-links: hide on mobile (the mobile-drawer replaces them) */ .site-nav .nav-links { display: none; } /* Tighten nav bar */ .site-nav { flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 16px 0; } .nav-logo { font-size: 0.88rem; } /* ── HERO ── */ .hero-section { padding: 40px 0 32px; } .hero-sub { font-size: 1rem; } .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 2px; } .hero-actions .btn { text-align: center; padding: 14px 20px; } /* ── CONTAINER ── */ .container { padding: 0 16px; } /* ── TRUST BAR ── */ .trust-bar { padding: 12px 16px; margin-bottom: 44px; } .trust-item { font-size: 0.74rem; padding: 3px 6px; } /* ── SECTION SPACING ── */ .how-section, .picks-section, .blog-section, .faq-section { margin-bottom: 52px; } .compare-section { padding: 44px 0 0; } /* ── SUBSCRIBE BAR ── */ .subscribe-bar { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; } .subscribe-bar-text strong { font-size: 0.88rem; } .subscribe-form { flex-direction: column; width: 100%; gap: 8px; } .subscribe-form input[type="email"] { width: 100%; } .subscribe-btn { width: 100%; padding: 12px 20px; font-size: 0.9rem; } /* ── FILTERS ── */ .filters-section { padding: 16px; } .filters-grid { grid-template-columns: 1fr 1fr; gap: 12px; } /* Multiselect panels: fixed so they never clip off screen */ #brand-ms-panel, .multiselect-panel { position: fixed; left: 16px; right: 16px; top: auto; min-width: unset; width: auto; max-height: 50dvh; z-index: 1000; border-radius: 12px; } /* ── SEARCH + BUTTON ROW ── */ .search-sort-row { grid-template-columns: 1fr; gap: 10px; } .price-drop-filter-btn, button.reset-btn { flex: 1; justify-content: center; min-height: 44px; } /* ── TABLE ── */ .table-container { border-radius: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* VISIBLE COLUMNS on mobile (6 of 11): 1 Price/g 2 Price 3 Net Weight 5 Product Name 10 Certified 11 Buy HIDDEN: 4 Brand 6 Flavor 7 Servings 8 Protein/Serve 9 Protein% (Brand and Flavor are now in the filter panel above) */ #products-table th:nth-child(4), #products-table td:nth-child(4), #products-table th:nth-child(6), #products-table td:nth-child(6), #products-table th:nth-child(7), #products-table td:nth-child(7), #products-table th:nth-child(8), #products-table td:nth-child(8), #products-table th:nth-child(9), #products-table td:nth-child(9) { display: none; } th, td { padding: 9px 7px; } table { font-size: 0.8rem; } .price-cell { font-size: 0.85rem; } .price-badge { font-size: 0.58rem; padding: 2px 4px; } /* Certified col — icon-only using font-size trick */ #products-table th:nth-child(10) { font-size: 0.6rem; letter-spacing: 0; padding: 9px 5px; min-width: 34px; } #products-table td:nth-child(10) .trustified { font-size: 0; padding: 4px 6px; min-width: 28px; justify-content: center; gap: 0; } #products-table td:nth-child(10) .trustified.verified::after { content: '✓'; font-size: 0.82rem; color: #00ff88; } #products-table td:nth-child(10) .trustified.unverified::after { content: '—'; font-size: 0.82rem; color: #5c6bc0; } .buy-button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; font-size: 0.76rem; } /* ── PICK CARDS ── */ .pick-card { padding: 20px; } .pick-price { font-size: 1.35rem; } /* ── FAQ ── */ .faq-q { padding: 15px 18px; font-size: 0.9rem; } .faq-a { padding: 0 18px; } .faq-item.open .faq-a { padding: 0 18px 14px; } /* ── STATS BAR ── */ .stats-bar { font-size: 0.82rem; } /* ── FOOTER ── */ .site-footer { padding: 24px 0; } .footer-links { gap: 14px; } .footer-links a { font-size: 0.8rem; } /* ════ OVERPAYING CALCULATOR PAGE ════ */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .savings-banner { flex-direction: column; gap: 12px; } .savings-stats { gap: 14px; } .best-vfm { flex-direction: column; text-align: center; } /* ════ BLOG PAGE ════ */ .newsletter { padding: 28px 18px !important; } .newsletter-form { flex-direction: column; align-items: stretch; } .newsletter-form input { width: 100% !important; } .newsletter-form .btn { width: 100%; text-align: center; } .article-featured { grid-template-columns: 1fr !important; } .article-featured .feat-body { padding: 24px; } .article-featured .feat-hero { min-height: 140px !important; } .filter-btn { padding: 9px 16px; min-height: 40px; } /* ════ ARTICLE PAGE ════ */ .article-nav { grid-template-columns: 1fr; gap: 10px; } .article-nav .next { text-align: left; } .author-block { flex-direction: column; align-items: flex-start; gap: 12px; } .article-share { flex-wrap: wrap; gap: 8px; } } /* ═══════════════════════════════════════════════════ SMALL MOBILE — 420px and below ═══════════════════════════════════════════════════ */ @media (max-width: 420px) { .filters-grid { grid-template-columns: 1fr; } .nav-logo { font-size: 0.8rem; } /* Also hide Net Weight on very small screens to keep table readable */ #products-table th:nth-child(3), #products-table td:nth-child(3) { display: none; } /* Product name — wrap so it doesn't overflow */ #products-table td:nth-child(5) { max-width: 130px; white-space: normal; line-height: 1.3; font-size: 0.76rem; } } /* ═══════════════════════════════════════════════════ PROTEIN INDEX PAGE — mobile overrides Supplements the inline responsive CSS already in protein-index.html (700px + 480px breakpoints). Targets elements not covered by those rules. ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Page header ─────────────────────────────── */ .page-header { padding: 28px 0 24px; } .label-chip { font-size: 0.65rem; padding: 4px 12px; } /* ── Controls bar range buttons: full-width row ─ */ .ctrl-group { width: 100%; } .range-btns { width: 100%; } .range-btn { flex: 1; text-align: center; } select.ctrl-select { width: 100%; min-width: 0 !important; } /* ── Product search ──────────────────────────── */ .product-select-bar { flex-direction: column; align-items: stretch; gap: 8px; } .product-select-bar .ctrl-label { padding-top: 0 !important; } .prod-search-wrap { max-width: 100%; width: 100%; } /* Results dropdown: fixed so it never clips off-screen */ .prod-results-list { position: fixed !important; left: 16px !important; right: 16px !important; top: auto !important; width: auto !important; max-height: 45dvh; z-index: 500; } /* ── Product chart card header: stack title + Amazon btn ── */ .chart-card-hdr { flex-direction: column; align-items: flex-start; gap: 12px; } #prod-aff-btn-wrap { width: 100%; } #prod-aff-btn { width: 100%; justify-content: center; box-sizing: border-box; } /* ── Gainers / Losers mover rows ─────────────── */ .mover-name { white-space: normal; overflow: visible; font-size: 0.78rem; line-height: 1.35; } .mover-row { align-items: flex-start; } .mover-change { font-size: 0.82rem; } .mover-px { font-size: 0.65rem; } /* ── Section headings ────────────────────────── */ .section-head { flex-direction: column; gap: 4px; } .section-head h2 { font-size: 0.95rem; } /* ── Constituents table ──────────────────────── */ .table-scroll { -webkit-overflow-scrolling: touch; } .idx-table { font-size: 0.76rem; } .idx-table th, .idx-table td { padding: 10px; } /* ── Brand toggle row: range buttons always first ── */ #brand-range-btns { order: -1; margin-left: 0; flex-shrink: 0; } #brand-all-btn { order: 0; } #brand-none-btn { order: 1; } .brand-pill { font-size: 0.68rem; padding: 4px 10px; } .brand-ctrl-btn { font-size: 0.68rem; padding: 4px 10px; } #brand-chart-wrap { height: 280px !important; } /* Brand legend: hide live values (too cramped), keep dots + names */ .brand-legend { gap: 8px 14px; font-size: 0.68rem; } .brand-legend-val { display: none; } /* ── KPI cards ───────────────────────────────── */ #kpi-hilow > div { flex-wrap: wrap; gap: 4px; } .kpi-sub { font-size: 0.65rem; } .ad-row { gap: 6px; } .ad-pill { font-size: 0.75rem; padding: 3px 8px; } /* ── Methodology box ─────────────────────────── */ .meth-box { padding: 18px 16px; } .meth-box p { font-size: 0.78rem; } .meth-box code { font-size: 0.72rem; } } @media (max-width: 420px) { /* Further reduce brand pills on very small screens */ .brand-pill, .brand-ctrl-btn { font-size: 0.6rem; padding: 4px 8px; } /* Tighter table */ .idx-table th, .idx-table td { padding: 8px; } /* Period trio rows */ .trio-row { font-size: 0.75rem; } /* Footer: stack on tiny screens */ .site-footer { flex-direction: column; text-align: center; gap: 8px; } } /* NOTE: constituent table mobile rules are inside protein-index.html