/* ============================================================================ TripMuse — cross-page mobile + polish. Loaded LAST so it wins. Applies to the homepage and single articles. ============================================================================ */ /* --- DevTools confirmed itself carries computed display:flex on the live site (Chrome's inline "flex" badge) — almost certainly the active theme's own sticky-footer scaffold (body{display:flex;flex-direction: column;...}). That makes every top-level TripMuse section a flex item, sized/positioned by flex rules instead of normal block stacking — no fix on a section's OWN display can undo how its FLEX PARENT sizes it. Restore plain document flow once, here, and every child stacks normally again. (Also inlined directly in each template's tag as a second, cache-independent guarantee — see front-page.php etc.) --- */ body{ display:block !important; } /* --- Skip link: keep it for accessibility, but hidden until keyboard focus --- */ .skip-link{ position:absolute !important; left:-9999px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; white-space:nowrap !important; background:#fff; color:#173049; border:2px solid #173049; border-radius:10px; padding:8px 14px; font-family:'Fredoka',sans-serif; font-weight:600; z-index:100000; } .skip-link:focus{ left:12px !important; top:12px !important; width:auto !important; height:auto !important; overflow:visible !important; } /* --- Content pages must scroll on a light background. The shared tripmuse.css sets a dark, non-scrolling flipbook stage on (background:#221d3a; overflow:hidden; height:100%) — undo that here so the homepage/posts/archives render fully on cream. --- */ html, body{ height:auto !important; min-height:100%; max-width:100%; overflow-x:hidden !important; overflow-y:visible !important; background:#FBF7EC !important; } img,svg{ max-width:100%; } /* --- Card / figure images: real photos FILL their box (cover), no gaps or text overlap. Fallback illustrations (no inline "cover") stay centered. --- */ .pcard .ph, .rel .ph, .cat-feature .lead .ph, .fcard .top, .art-figure .frame .scene{ position:relative; overflow:hidden; } .pcard .ph > img[style*="cover"], .rel .ph > img[style*="cover"], .cat-feature .lead .ph > img[style*="cover"], .fcard .top.photo > img, .art-figure .frame .scene > img[style*="cover"]{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; display:block; } .pcard .badge{ max-width:calc(100% - 24px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Taller lead image on single posts */ .art-figure .frame .scene{ height:clamp(340px, 42vw, 560px) !important; } /* --- Defensive: DevTools confirmed .merge-cta measures 273x4px live — a `height:auto` guard alone is powerless against that, since `height` has no effect on an element removed from layout by `display:none`. These sections' own CSS never sets display:none on themselves (checked tripmuse-home-c.css / tripmuse-pages.css), so whatever does this is external. Fix: force each container back to ITS OWN correct display value — never a blanket `revert`, which would replace a real `flex`/`grid` with `block` and break the very layout being protected. --- */ .wn, .wn-head, .feedwrap, .feed-head, .lead-sec, .panel, .panel-h, .board, .matchup, .vs-card, .vs-head, .merge-cta, .doc-news, .doc-news-in{ display:block !important; height:auto !important; max-height:none !important; min-height:0 !important; visibility:visible !important; opacity:1 !important; transform:none !important; } .vibebar, .merge-in .acts, .doc-news form{ display:flex !important; height:auto !important; max-height:none !important; min-height:0 !important; visibility:visible !important; opacity:1 !important; transform:none !important; } .feed-grid, .vs-grid, .merge-in, .merge-in .art{ display:grid !important; height:auto !important; max-height:none !important; min-height:0 !important; visibility:visible !important; opacity:1 !important; transform:none !important; } /* No `display` here: .fcard/.brow/.vibe-chip/.eyebrow/.vs-opt need their own inline-flex/flex values (not the browser default a `revert` would apply), and .fcard specifically must keep respecting `.fcard.hide{display:none}` — the vibe filter's actual show/hide mechanism — which forcing display here would silently break. No direct evidence any of these individual leaf elements collapse via display anyway; the confirmed case is container-level (handled above). No `transform` either: chips/cards/vs-opt have legitimate :hover lift transforms a blanket reset would permanently disable. */ .wn h2, .wn p, .wn span, .wn svg, .wn-head .eyebrow, .vibebar .vibe-chip, .feed-head .count, .feed-grid .fcard:not(.hide), .feed-grid .fcard:not(.hide) *, .board .brow, .matchup .vs-opt, .matchup .vs-opt *, .merge-in > *, .merge-in .txt h2, .merge-in .txt p, .doc-news-in > *, .doc-news-in input, .doc-news-in button{ height:auto !important; max-height:none !important; min-height:0 !important; visibility:visible !important; opacity:1 !important; } /* .brow's own .bar needs its fixed 11px track height (tripmuse-home-c.css) — visibility only here, never height. */ .board .brow .bar{ visibility:visible !important; opacity:1 !important; } /* --- Archive pagination (category / blog index) --- */ .tm-pager{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:26px auto 6px; padding:0 16px; } .tm-pager .page-numbers{ display:inline-block; padding:9px 15px; border:2px solid #173049; border-radius:12px; background:#fff; color:#173049; font-family:'Fredoka',sans-serif; font-weight:600; text-decoration:none; box-shadow:2px 2px 0 #173049; } .tm-pager .page-numbers.current{ background:#FACC15; } .tm-pager .page-numbers.dots{ border:0; box-shadow:none; background:transparent; padding:9px 6px; } .tm-pager a.page-numbers:hover{ transform:translate(-1px,-1px); } /* --------------------------------------------------------------------------- NAV — 4 items (Blog · Categories · Magazine · Open TripMerge), collapsing to a CSS-only hamburger on small screens (no JavaScript needed). --------------------------------------------------------------------------- */ .tm-burger{ display:none; } .dnav-drop{ display:contents; } /* desktop: children flow into the nav row */ .dnav-drop .dnav-links{ display:flex; } .dnav-drop .dnav-cta{ margin-left:auto; } @media (max-width:960px){ .dnav-in{ position:relative; padding:0 14px !important; gap:10px !important; height:62px !important; } .dbrand .by{ display:none !important; } .dbrand{ font-size:20px !important; gap:8px !important; } /* hamburger button */ .tm-burger{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:46px; height:46px; margin-left:auto; flex:0 0 auto; border:2px solid #173049; border-radius:12px; background:#fff; box-shadow:2px 2px 0 #173049; cursor:pointer; } .tm-burger span{ display:block; width:22px; height:2.6px; background:#173049; border-radius:2px; transition:transform .2s, opacity .2s; } .tm-navtoggle:checked ~ .tm-burger span:nth-child(1){ transform:translateY(7.6px) rotate(45deg); } .tm-navtoggle:checked ~ .tm-burger span:nth-child(2){ opacity:0; } .tm-navtoggle:checked ~ .tm-burger span:nth-child(3){ transform:translateY(-7.6px) rotate(-45deg); } /* dropdown panel */ .dnav-drop{ display:none !important; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:8px; padding:14px 16px 18px; background:var(--cream,#FBF7EC); border-bottom:2px solid #173049; box-shadow:0 12px 24px rgba(23,48,73,.12); } .tm-navtoggle:checked ~ .dnav-drop{ display:flex !important; } .dnav-drop .dnav-links{ display:flex !important; flex-direction:column; gap:0; margin:0 !important; } .dnav-drop .dnav-links a{ padding:13px 8px; font-size:18px; border-bottom:1px solid rgba(23,48,73,.08); } .dnav-drop .dnav-cta{ margin:10px 0 0 !important; } .dnav-drop .dnav-cta .dbtn{ width:100%; justify-content:center; } .chipbar{ top:62px !important; } .chipbar-in{ padding:12px 14px !important; } } /* --------------------------------------------------------------------------- HERO — edge-to-edge and comfortably sized on phones. --------------------------------------------------------------------------- */ @media (max-width:820px){ .scene-hero{ border-left:0 !important; border-right:0 !important; width:100% !important; } .scene-intro{ padding:20px 16px 0 !important; } .scene-intro h1{ font-size:clamp(26px,7.6vw,40px) !important; line-height:1.03 !important; } .scene-intro p{ font-size:15px !important; } .scene-stage{ max-width:100% !important; } } /* --------------------------------------------------------------------------- ARTICLE + shared sections — readable padding, single-column stacks. --------------------------------------------------------------------------- */ @media (max-width:820px){ .art-hero-in,.merge-in,.doc-news-in,.related,.art-tags,.art-bio{ padding-left:18px !important; padding-right:18px !important; } .art-body{ padding-left:18px !important; padding-right:18px !important; font-size:18px; } .merge-in{ grid-template-columns:1fr !important; } .merge-in .art{ display:none !important; } .rel-grid{ grid-template-columns:1fr !important; } .art-hero h1{ font-size:clamp(28px,8vw,40px) !important; } } /* --------------------------------------------------------------------------- FOOTER — stack neatly on phones. --------------------------------------------------------------------------- */ @media (max-width:820px){ .dfoot-in{ padding-left:18px !important; padding-right:18px !important; } .dfoot-top{ flex-direction:column; align-items:flex-start; gap:16px; } .dfoot-links{ flex-wrap:wrap; gap:14px 18px; } .dfoot-bot{ flex-direction:column; gap:6px; } }