/* ===== MOBILE NAV EMERGENCY FIX ===== Put this at the VERY TOP of style.css to override conflicting rules. This ensures the hamburger is visible and the mobile panel + overlay stack correctly. */ html, body { overflow-x: hidden !important; } /* header basic placement */ .site-header { position: sticky !important; top: 0 !important; z-index: 99999 !important; /* very top */ background: #fff !important; } /* Ensure hamburger is visible on mobile */ #mobile-nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; padding: 8px !important; z-index: 100010 !important; position: relative !important; } /* Hamburger lines contrast */ .hamburger .line { background: #0b2545 !important; height: 3px !important; } /* Overlay & panel stacking */ #mobile-nav-overlay { position: fixed !important; inset: 0 !important; z-index: 100005 !important; /* below nav but above page */ pointer-events: none; /* will be enabled when visible */ opacity: 0; transition: opacity .22s ease; } #mobile-nav-overlay.visible { pointer-events: auto; opacity: 1; } /* Panel (nav) — ensure it's off-canvas initially and on top when open */ #site-nav { position: fixed !important; right: 0 !important; top: 0 !important; height: 100vh !important; width: 84% !important; max-width: 420px !important; background: #fff !important; transform: translateX(110%) !important; transition: transform .28s cubic-bezier(.2,.9,.2,1) !important; z-index: 100010 !important; box-shadow: 0 14px 40px rgba(10,20,30,0.12) !important; overflow-y: auto !important; } /* Visible state */ #site-nav.open { transform: translateX(0) !important; } /* Make sure links are clickable and visible */ #site-nav a { display: block !important; color: #0f1724 !important; padding: 12px 16px !important; background: transparent !important; border-radius: 10px !important; } /* Prevent any element from sitting above the nav/panel and stealing clicks */ * { -webkit-tap-highlight-color: rgba(0,0,0,0.05); } /* Debug helper: visible border around nav while testing (remove later) */ #site-nav.debug { outline: 2px dashed rgba(11,37,69,0.08) !important; } /* --- EMERGENCY HEADER & NAV FIX --- */ .site-header { position: sticky !important; top: 0 !important; z-index: 2200 !important; background: #ffffff !important; box-shadow: 0 1px 0 rgba(14,39,63,0.04) !important; } .site-header, .site-header * { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } #mobile-nav-overlay { z-index: 2100 !important; } #site-nav { z-index: 2205 !important; } html, body { overflow-x: hidden !important; } /* Emergency header visibility fixes — paste at top of style.css or inside */ .site-header { position: sticky !important; top: 0 !important; z-index: 2200 !important; /* put header above overlays */ background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 1px 0 rgba(14,39,63,0.04) !important; } /* Ensure the header elements are visible and not transparent */ .site-header, .site-header * { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; color: inherit !important; } /* Make overlay sit under header but above page */ #mobile-nav-overlay { z-index: 2100 !important; /* below header (2200) */ } /* Ensure the slide-in nav sits above header when opened if needed */ #site-nav { z-index: 2205 !important; /* above header when explicitly open */ } /* Defensive: remove any accidental body.nav-open toggles on load */ body.nav-open { overflow: hidden; } /* keep behavior but we will remove class via JS if stuck */ /* ToolOrbitHub — Refined stylesheet Single-file, consolidated, mobile-nav + overlay + safe-padding fixes Paste / replace your current style.css with this file. */ /* === Variables & base === */ :root{ --brand:#0b2545; --accent-1:#ff9900; --accent-2:#e68a00; --muted:#6b7280; --bg:#ffffff; --card-bg:#ffffff; --max-width:1180px; --pad-desktop:28px; --pad-mobile:18px; --radius:12px; --shadow-subtle: 0 6px 20px rgba(11,37,69,0.06); --shadow-strong: 0 10px 30px rgba(11,37,69,0.09); --font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; --text: #111827; --link: var(--brand); --max-read-width:900px; } /* === Reset / base === */ * { box-sizing: border-box; } html,body { height:100%; margin:0; padding:0; font-family:var(--font-family); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-overflow-scrolling:touch; } img, video, iframe { max-width:100%; height:auto; display:block; } a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; opacity:0.95; } /* Wrapper & spacing */ .wrap { max-width:var(--max-width); margin:0 auto; padding:0 var(--pad-mobile); box-sizing:border-box; } @media(min-width:1000px){ .wrap { padding:0 var(--pad-desktop); } } /* Typography */ h1 { font-size:1.9rem; margin:10px 0 14px; line-height:1.12; color:var(--brand); font-weight:800; } h2 { font-size:1.15rem; margin:20px 0 10px; color:var(--brand); font-weight:700; } h3 { font-size:1rem; margin:14px 0 6px; font-weight:700; } p, li { font-size:1rem; color:var(--text); line-height:1.6; margin:10px 0; } .small { font-size:0.92rem; color:var(--muted); } .meta { color:var(--muted); font-size:0.95rem; } /* Prevent accidental horizontal scroll globally */ html, body { overflow-x: hidden; } /* === Header & nav === */ .site-header { background:linear-gradient(180deg,#fff,#fff); border-bottom:1px solid #eef2f7; position:sticky; top:0; z-index:1300; } .header-inner { display:flex; align-items:center; gap:16px; padding:12px 0; } .brand { display:flex; align-items:center; gap:12px; font-weight:800; color:var(--brand); font-size:1.05rem; text-decoration:none; flex:0 0 auto; } .site-logo { max-height:64px; height:auto; width:auto; display:block; object-fit:contain; } .brand-name { line-height:1; font-weight:800; } .brand-sub { margin-top:2px; font-size:0.9rem; color:var(--muted); } /* Desktop nav */ .site-nav { margin-left:auto; display:flex; gap:18px; align-items:center; } .site-nav a { padding:6px 8px; border-radius:8px; color:var(--brand); font-weight:600; white-space:nowrap; } /* Mobile toggle */ .mobile-nav-toggle { display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer; color:var(--brand); position:relative; z-index:1402; } .hamburger { display:inline-block; width:36px; height:22px; position:relative; } .hamburger .line { position:absolute; left:0; right:0; height:3px; background:var(--brand); border-radius:3px; transition: transform .22s ease, opacity .18s ease, top .22s cubic-bezier(.2,.9,.2,1); } .hamburger .line-1 { top:0; } .hamburger .line-2 { top:9px; } .hamburger .line-3 { top:18px; } /* Desktop breakpoint */ @media(min-width:900px){ .mobile-nav-toggle { display:none !important; } .site-nav { display:flex !important; position:static !important; box-shadow:none !important; background:transparent !important; } } /* === Mobile nav panel & overlay === Overlay sits below nav but above page; nav must have higher z-index. */ #mobile-nav-overlay { position:fixed; inset:0; background: rgba(11,37,69,0.54); opacity:0; visibility:hidden; pointer-events:none; z-index:1399; transition: opacity .22s ease, visibility .22s ease; } /* Panel/menu */ #site-nav { position: fixed; top: 62px; left: 50%; transform: translate(-50%, -8px); width: calc(100% - 48px); max-width: 360px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-strong); padding: 14px; z-index: 1400; opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.2,.9,.2,1), opacity .22s ease; display: none; } /* Visible states (toggled by JS) */ body.nav-open #site-nav, #site-nav.open { display:block; transform: translate(-50%, 0); opacity:1; pointer-events:auto; } body.nav-open #mobile-nav-overlay, #mobile-nav-overlay.visible { opacity:1; visibility:visible; pointer-events:auto; } /* Mobile nav items layout */ #site-nav a { display:block; padding:12px 14px; color:var(--brand); font-weight:600; border-radius:10px; margin-bottom:8px; position:relative; z-index:1401; text-align:center; } /* Hamburger open state */ .mobile-nav-toggle.is-open .line-1 { transform: translateY(6px) rotate(45deg); } .mobile-nav-toggle.is-open .line-2 { opacity:0; transform: scaleX(.2); } .mobile-nav-toggle.is-open .line-3 { transform: translateY(-6px) rotate(-45deg); } /* Staggered animation for links when open */ @keyframes navItemIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } #site-nav.open a { animation-name:navItemIn; animation-duration:340ms; animation-fill-mode:forwards; animation-timing-function:cubic-bezier(.2,.9,.2,1); } #site-nav.open a:nth-child(1){ animation-delay:0.04s; } #site-nav.open a:nth-child(2){ animation-delay:0.09s; } #site-nav.open a:nth-child(3){ animation-delay:0.14s; } #site-nav.open a:nth-child(4){ animation-delay:0.19s; } #site-nav.open a:nth-child(5){ animation-delay:0.24s; } /* ensure overlay doesn't trap clicks when invisible */ #mobile-nav-overlay { pointer-events: none; } #mobile-nav-overlay.visible { pointer-events: auto; } /* === Hero, layout, cards === */ .site-main { padding:28px 0 80px; } .hero { display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; margin-top:36px; margin-bottom:18px; } .hero > div { flex:1; min-width:260px; } .card, .tool-card { background:var(--card-bg); border-radius:var(--radius); padding:18px; border:1px solid #eef4fb; box-shadow:var(--shadow-subtle); display:flex; flex-direction:column; } .card:hover, .tool-card:hover { box-shadow:var(--shadow-strong); transform: translateY(-4px); transition:transform .12s ease, box-shadow .12s ease; } /* Grid utilities */ .tools-grid { display:grid; gap:18px; grid-template-columns:1fr; margin-top:12px; } @media(min-width:760px){ .tools-grid{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1100px){ .tools-grid{ grid-template-columns:repeat(3,1fr); } } .reviews-grid { display:grid; gap:18px; grid-template-columns:1fr; } @media(min-width:760px){ .reviews-grid{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1100px){ .reviews-grid{ grid-template-columns:repeat(3,1fr); } } /* Buttons */ .btn, .cta-primary, .cta-secondary { display:inline-block; text-decoration:none; border-radius:10px; padding:12px 16px; font-weight:700; font-size:0.98rem; } .cta-primary { background: linear-gradient(180deg,var(--accent-1),var(--accent-2)); color:#fff; border:0; box-shadow:0 6px 18px rgba(230,138,0,0.20); } .cta-primary:hover { background: linear-gradient(180deg,var(--accent-2),#d17600); transform:translateY(-1px); } .cta-secondary { background:#fff; color:var(--brand); border:1px solid #e6eef6; padding:10px 14px; font-weight:700; } /* Article / review */ article { max-width:var(--max-read-width); margin:0 auto; } article h1 { font-size:1.75rem; } article p, article li { font-size:1.02rem; line-height:1.72; } article ul, article ol { margin:12px 0 12px 20px; } /* Pros / cons */ .procon { display:flex; gap:12px; flex-wrap:wrap; margin:14px 0; } .procon .box { flex:1; min-width:180px; border-radius:10px; padding:12px; background:#fff; border:1px solid #eef4fb; } /* Tables */ .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0; } .compare-table, .comparison-table { width:100%; border-collapse:collapse; min-width:720px; } .compare-table th, .compare-table td, .comparison-table th, .comparison-table td { padding:10px; border:1px solid #eef4fb; text-align:left; vertical-align:top; font-size:0.95rem; } /* Footer */ .site-footer { border-top:1px solid #eef2f7; padding:24px 0; text-align:center; color:var(--muted); font-size:0.95rem; } /* Forms */ input[type="email"], input[type="text"], textarea { width:100%; padding:10px; border-radius:10px; border:1px solid #e6eaf0; font-size:0.98rem; } /* Sticky mobile CTA */ .mobile-cta { display:none; } @media(max-width:760px){ .mobile-cta { position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:9999; width:calc(100% - 36px); max-width:680px; display:flex; gap:12px; align-items:center; padding:10px 12px; background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); border-radius:12px; box-shadow:0 10px 30px rgba(230,138,0,0.18); color:#fff; font-weight:700; } .mobile-cta a { color:#fff; font-weight:800; text-align:center; flex:1; } .mobile-cta .close { background:transparent; border:0; color:#fff; font-size:18px; } } /* Accessibility: focus */ a:focus, button:focus, input:focus { outline:3px solid rgba(255,153,0,0.18); outline-offset:3px; } /* Safe paddings on small screens (prevent edges touching) */ @media(max-width:760px){ .wrap, .site-main, article, .card { padding-left:16px !important; padding-right:16px !important; } h1 { font-size:1.45rem; } .site-logo { max-height:44px; } .header-inner { padding:10px 0; } .hero { margin-top:18px; gap:14px; } .card { padding:12px; } } /* Blog & review article tweaks */ .site-main article { max-width:900px; margin:0 auto; line-height:1.65; } .site-main .comparison-table { margin:14px 0 22px; } .site-main h1 { font-size:30px; margin-bottom:10px; color:#0f172a; } /* Emergency fixes: ensure page doesn't push beyond viewport */ html, body { overscroll-behavior-x: none; } /* final minor polish */ .card { border-radius:12px; border:1px solid #eef4fb; box-shadow:0 8px 30px rgba(11,37,69,0.03); } .tool-card .btn, .card .btn { margin-top:auto; display:inline-block; } /* ensure elements that should be above menu remain so (CTA etc) */ .mobile-cta, .sticky-cta, .sticky-cta-wrapper { z-index: 50 !important; } /* small helpers */ .kicker { font-size:0.9rem; color:var(--muted); font-weight:700; letter-spacing:0.6px; text-transform:uppercase; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* responsive table / overflow hint */ .table-wrap:after { content: "↔ Swipe to view"; display:block; font-size:0.82rem; color:var(--muted); margin-top:6px; text-align:right; opacity:0.9; } /* End of refined stylesheet */ /* ---------- Desktop-first override (final, put at EOF of style.css) ---------- Ensures the desktop nav is visible and the mobile panel / hamburger remain hidden on larger screens (>= 900px). This overrides any earlier conflicting rules. */ @media (min-width: 900px) { /* Hide the mobile toggle on desktop */ .mobile-nav-toggle { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Ensure primary nav is visible, inline and not positioned off-canvas */ #site-nav, .site-nav { display: flex !important; position: static !important; right: auto !important; left: auto !important; top: auto !important; transform: none !important; width: auto !important; height: auto !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; z-index: auto !important; overflow: visible !important; align-items: center !important; gap: 18px !important; } /* In case body.nav-open was set earlier, keep desktop nav usable */ body.nav-open #site-nav, body.nav-open .site-nav { display: flex !important; } /* Make sure overlay and off-canvas menu can't appear above desktop content */ #mobile-nav-overlay { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; z-index: -1 !important; } /* If any mobile-only transform left the page scrolled, prevent overflow */ html, body { overflow-x: hidden !important; } } /* Also ensure at medium widths (760-899) desktop nav shows and hamburger is hidden */ @media (min-width: 760px) and (max-width: 899px) { .mobile-nav-toggle { display: none !important; visibility: hidden !important; } .site-nav { display:flex !important; position:static !important; transform:none !important; } } /* FORCE: hide mobile hamburger on desktop */ @media (min-width: 900px) { /* hide the toggle button and its visual lines */ .mobile-nav-toggle, #mobile-nav-toggle, .mobile-nav-toggle .hamburger, .mobile-nav-toggle .line, .hamburger { display: none !important; visibility: hidden !important; pointer-events: none !important; opacity: 0 !important; } /* make sure it cannot affect layout or stacking */ .mobile-nav-toggle { width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } } /* ---------- Responsive table scroll fix (global) ---------- */ .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; padding-bottom: 6px; box-sizing: border-box; } .table-wrap table, .table-wrap .comparison-table, .table-wrap .compare-table { width: 100%; min-width: 420px; max-width: none; border-collapse: collapse; box-sizing: border-box; } .table-wrap th, .table-wrap td { white-space: nowrap; padding: 10px; box-sizing: border-box; } @media (max-width: 520px) { .table-wrap table, .comparison-table { min-width: 320px; } .table-wrap th, .table-wrap td { padding: 8px 6px; font-size: 0.95rem; } } .table-wrap:after { content: "↔ Swipe to view"; display: block; font-size: 0.82rem; color: var(--muted); margin-top: 6px; text-align: right; opacity: 0.9; }