/* ========================================================================== Flying Tumbler — Explorer: mobile refinements Layered OVER the Claude Design export. Never edit the generated pages; re-add the to this file after any re-export. ========================================================================== */ @media (max-width: 700px) { /* 1 — Hero wordmark collided with the kicker text. The wordmark is already in the sticky header 40px above it, so drop the duplicate. */ img[src*="wordmark-stacked"], img[src*="arch-paddy-coords"], img[src*="paddy-flying-cream"] { display: none !important; } /* 2 — Sticky header: the brand lockup was locked at flex:0 0 auto and ran to 735px inside a 390px screen. Let it wrap and shrink. */ header[style*="position: sticky"] { flex-wrap: wrap !important; gap: 6px 10px !important; padding: 9px 12px !important; } header[style*="position: sticky"] * { min-width: 0 !important; } /* the brand lockup row: ←Home / wordmark / page label / partner credit — let it break onto a second line instead of crushing together */ header[style*="position: sticky"] > div:first-child { flex-wrap: wrap !important; gap: 6px 10px !important; width: 100% !important; } header[style*="position: sticky"] > div:first-child > *:last-child { flex-basis: 100% !important; margin-top: 2px !important; } header[style*="position: sticky"] [style*="flex: 0 0 auto"] { flex: 0 1 auto !important; min-width: 0 !important; } /* the "presented by " lockup — keep it, just let it breathe */ header[style*="position: sticky"] a[href*="Landing"] { padding: 5px 9px !important; } /* 2b — orphaned vertical divider rules left floating once the header wraps */ header[style*="position: sticky"] [style*="width: 1px"] { display: none !important; } /* 3 — In-header nav links ran off the right edge. Wrap them onto a second row instead of clipping mid-word. */ header[style*="position: sticky"] nav { flex-wrap: wrap !important; gap: 4px 12px !important; width: 100% !important; order: 3 !important; } /* 4 — The fixed bottom pill bar is replaced on mobile by the top-right menu button (mobile-nav.js). Hide it and reclaim the space. */ [data-ft-hidden-bar] { display: none !important; } body { padding-bottom: 0 !important; } /* the header's own inline nav is duplicated in the menu — hide it */ header[style*="position: sticky"] nav { display: none !important; } /* 5 — Top eyebrow bar wrapped to three lines and ate the first screen. Tighten it so the hero starts higher. */ body > div:first-child > div:first-child { line-height: 1.3 !important; } div[style*="text-transform: uppercase"][style*="letter-spacing"] { letter-spacing: .06em !important; } /* 6 — Global safety net: nothing may push the page sideways. */ /* clip, NOT hidden: overflow-x:hidden on turns into the scroll container, which breaks window scroll events and position:sticky. */ html, body { max-width: 100% !important; overflow-x: clip !important; } img, video, svg, table { max-width: 100% !important; } /* 7 — Any remaining rigid flex row shrinks instead of overflowing. */ [style*="display: flex"] > [style*="flex: 0 0 auto"] { min-width: 0 !important; } } /* ------------------------------------------------------------------ 8 — LEGIBILITY. The export sets type in fixed px, and the dominant sizes are 10–12px: fine on a 1400px desktop, far too small on a phone. Scale the small end up. Display sizes use clamp() and already adapt. ------------------------------------------------------------------ */ [style*="font-size:8px;"], [style*="font-size: 8px;"], [style*="font-size:8px\""], [style*="font-size: 8px\""] { font-size: 11px !important; } [style*="font-size:8.5px;"], [style*="font-size: 8.5px;"], [style*="font-size:8.5px\""], [style*="font-size: 8.5px\""] { font-size: 11px !important; } [style*="font-size:9px;"], [style*="font-size: 9px;"], [style*="font-size:9px\""], [style*="font-size: 9px\""] { font-size: 11.5px !important; } [style*="font-size:9.5px;"], [style*="font-size: 9.5px;"], [style*="font-size:9.5px\""], [style*="font-size: 9.5px\""] { font-size: 12px !important; } [style*="font-size:10px;"], [style*="font-size: 10px;"], [style*="font-size:10px\""], [style*="font-size: 10px\""] { font-size: 12.5px !important; } [style*="font-size:10.5px;"], [style*="font-size: 10.5px;"], [style*="font-size:10.5px\""], [style*="font-size: 10.5px\""] { font-size: 13px !important; } [style*="font-size:11px;"], [style*="font-size: 11px;"], [style*="font-size:11px\""], [style*="font-size: 11px\""] { font-size: 13.5px !important; } [style*="font-size:11.5px;"], [style*="font-size: 11.5px;"], [style*="font-size:11.5px\""], [style*="font-size: 11.5px\""] { font-size: 14px !important; } [style*="font-size:12px;"], [style*="font-size: 12px;"], [style*="font-size:12px\""], [style*="font-size: 12px\""] { font-size: 14.5px !important; } [style*="font-size:12.5px;"], [style*="font-size: 12.5px;"], [style*="font-size:12.5px\""], [style*="font-size: 12.5px\""] { font-size: 15px !important; } [style*="font-size:13px;"], [style*="font-size: 13px;"], [style*="font-size:13px\""], [style*="font-size: 13px\""] { font-size: 15.5px !important; } [style*="font-size:13.5px;"], [style*="font-size: 13.5px;"], [style*="font-size:13.5px\""], [style*="font-size: 13.5px\""] { font-size: 16px !important; } [style*="font-size:14px;"], [style*="font-size: 14px;"], [style*="font-size:14px\""], [style*="font-size: 14px\""] { font-size: 16.5px !important; } [style*="font-size:15px;"], [style*="font-size: 15px;"], [style*="font-size:15px\""], [style*="font-size: 15px\""] { font-size: 17px !important; } [style*="font-size:16px;"], [style*="font-size: 16px;"], [style*="font-size:16px\""], [style*="font-size: 16px\""] { font-size: 17.5px !important; } /* wide letter-spacing on small uppercase labels costs width and hurts readability at phone size — tighten it */ [style*="letter-spacing:.18em"], [style*="letter-spacing: .18em"], [style*="letter-spacing:0.18em"], [style*="letter-spacing: 0.18em"], [style*="letter-spacing:.2em"], [style*="letter-spacing: .2em"], [style*="letter-spacing:0.2em"], [style*="letter-spacing: 0.2em"], [style*="letter-spacing:.16em"], [style*="letter-spacing: .16em"], [style*="letter-spacing:0.16em"], [style*="letter-spacing: 0.16em"], [style*="letter-spacing:.14em"], [style*="letter-spacing: .14em"], [style*="letter-spacing:0.14em"], [style*="letter-spacing: 0.14em"] { letter-spacing: .07em !important; } /* 9 — DE-CROWD. Two- and three-column grids fall to a single column; 148px-wide columns of body copy are unreadable. */ [style*="display:grid"], [style*="display: grid"] { grid-template-columns: 1fr !important; gap: 18px !important; } /* a little more air between stacked blocks */ [style*="display:grid"] > *, [style*="display: grid"] > * { min-width: 0 !important; } /* Narrow phones */ @media (max-width: 430px) { header[style*="position: sticky"] { font-size: 92% !important; } } /* ========================================================================== Mobile menu (paired with mobile-nav.js) ========================================================================== */ @media (max-width: 700px) { #ft-mnav { position: fixed; top: 10px; right: 12px; z-index: 999; } #ft-mnav-btn { -webkit-appearance: none; appearance: none; cursor: pointer; width: 46px; height: 46px; border-radius: 12px; background: #FBBC14; border: 1px solid rgba(52,63,73,.22); box-shadow: 0 4px 14px rgba(26,24,56,.28); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; } #ft-mnav-btn span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #2C2950; transition: transform .18s ease, opacity .18s ease; } #ft-mnav.open #ft-mnav-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #ft-mnav.open #ft-mnav-btn span:nth-child(2) { opacity: 0; } #ft-mnav.open #ft-mnav-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } #ft-mnav-panel { position: fixed; top: 64px; right: 12px; left: 12px; max-height: calc(100vh - 84px); overflow-y: auto; -webkit-overflow-scrolling: touch; background: #FBF8F1; border: 1px solid #E7DFD0; border-radius: 14px; box-shadow: 0 18px 44px rgba(26,24,56,.3); padding: 12px; z-index: 999; } #ft-mnav-panel[hidden] { display: none !important; } .ft-mnav-cta { display: block; text-align: center; text-decoration: none; background: #FBBC14; color: #2C2950 !important; font-weight: 700; font-size: 16px; letter-spacing: .01em; padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; } .ft-mnav-list { display: flex; flex-direction: column; } .ft-mnav-list a { display: block; text-decoration: none; color: #2C2950 !important; font-size: 16px; line-height: 1.25; font-weight: 600; padding: 13px 8px; border-bottom: 1px solid #ECE5D7; } .ft-mnav-list a:last-child { border-bottom: 0; } .ft-mnav-list a:active { background: #F4EFE3; } }