/* =========================================================== AUDIT FIXES — single source of truth, loaded LAST in Combines Phase 1 (UI/UX), Phase 2 (responsive/cross-browser), and Phase 3 (verification regressions). =========================================================== */ /* ─── x-overflow safety ─── */ html{overflow-x:hidden} /* ─── Safari/iOS webkit prefixes ─── */ .topbar{position:-webkit-sticky;position:sticky} .chat-pop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .mm-drawer{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} /* ─── @supports fallbacks for older browsers ─── */ @supports not (gap:1px){ .topbar nav a + a{margin-left:6px} } @supports not (aspect-ratio:1){ .b-portrait .face,.cs .cv{height:auto;min-height:340px} } /* ─── Hero: FOUNDER-GRADE sticker no longer clipped ─── */ .b-greeting{overflow:visible} .b-greeting .sticker-stack{right:14px;top:-14px;z-index:3} .b-greeting .sticker-stack .sticker{transform:rotate(6deg)} /* ─── Chat widget anchor + footer clearance ─── Phase 3 fix: at ≥1500px the calc() positioned the widget exactly over the right footer text. Solution: keep widget at right:24px on viewport, and add robust padding-right to footer so text never reaches widget area. */ .chat-fab{right:24px;bottom:24px} .chat-pop{right:24px;bottom:96px} @media (min-width:1500px){ .chat-fab{right:max(24px, calc((100vw - 1320px) / 2 - 72px))} .chat-pop{right:max(24px, calc((100vw - 1320px) / 2 - 72px))} } footer.foot,footer.foot-mag,.foot,.foot-mag{padding-bottom:90px} .foot-bottom{padding-right:110px} @media (max-width:640px){ .foot-bottom{padding-right:14px;flex-direction:column;align-items:flex-start} } /* ─── Section gap trim (services↔ventures, hero↔ticker) ─── */ section.tight-bot{padding-bottom:40px} section.tight-top{padding-top:40px} section.hero{padding-bottom:8px} .ticker-row{margin-top:0} /* ─── H4 → H3 visual style preservation (already done in index inline, harmless) ─── */ .b-countries h3{font-family:var(--display);font-size:30px;margin-top:6px} .b-countries h3 b{color:var(--coral)} .b-cta h3{font-family:var(--display);font-size:28px;margin-top:8px;line-height:1.05} .b-cta h3 em{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--deepblue)} /* ─── Photo card meta — round bottom corners ─── */ .b-portrait .meta{border-radius:0 0 22px 22px} /* ─── Verified entity pill restyle (Phase 3 — universal selector w/ !important to beat inline style) ─── */ .kicker.verified,.creds-wrap .kicker{ background:var(--lime) !important; color:var(--ink) !important; border:2px solid var(--ink) !important; box-shadow:2px 2px 0 var(--ink) !important; padding:8px 18px !important; font-size:12px !important; font-weight:700 !important; border-radius:999px !important; } /* ─── Country chips center alignment ─── */ .flag-row{justify-content:center} /* ─── Hero H1 line-height for descender safety ─── */ .b-greeting h1,.b-headline h1{line-height:1.04} /* ─── Live Builds card entrance — equalize stagger (Phase 3: stronger selector) ─── */ .cards .tc.reveal, .cards .tc.reveal[data-d], .cards .tc.reveal[data-d="1"], .cards .tc.reveal[data-d="2"], .cards .tc.reveal[data-d="3"]{transition-delay:0s !important} .cards .tc.reveal.in{opacity:1 !important} /* ─── Decorative pills (.stickers-float) — Phase 3: fix zero-width regression ─── */ @media (min-width:1600px){ .final-cta .stickers-float{ position:absolute; inset:0; max-width:1380px; margin:0 auto; left:0;right:0; transform:none; pointer-events:none; } } /* ─── Focus-visible states for a11y ─── */ .btn-pop:focus-visible{outline:3px solid var(--deepblue);outline-offset:3px} .btn-pop.alt:focus-visible{outline:3px solid var(--coral);outline-offset:3px} .btn-ghost-pop:focus-visible{outline:3px solid var(--coral);outline-offset:4px;border-radius:4px} .btn-pop:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--coral)} .btn-pop.alt:active{box-shadow:2px 2px 0 var(--deepblue)} .topbar nav a:focus-visible{outline:2px solid var(--sun);outline-offset:2px} .topbar .cta:focus-visible{outline:3px solid var(--paper);outline-offset:3px} .chat-fab:focus-visible{outline:3px solid var(--paper);outline-offset:4px} /* ─── Tap targets ≥44×44 at ALL widths (Phase 3: broadened from <480 only) ─── */ .topbar .cta{min-height:44px;display:inline-flex;align-items:center;padding-top:10px;padding-bottom:10px} .btn-pop,.btn-pop.alt,.btn-ghost-pop{min-height:44px;padding-top:12px;padding-bottom:12px;display:inline-flex;align-items:center} .b-cta .arrow{min-height:44px;display:inline-flex;align-items:center;padding:8px 0} /* ─── Tablet (768–1000): show full nav (overrides per-page inline that hides nav at 1000) ─── */ @media (min-width:768px) and (max-width:1000px){ .topbar nav{display:flex !important} .mm-toggle{display:none !important} .topbar nav .nav-dd .dd-menu{display:block !important} .topbar nav a{font-size:12px;padding:6px 11px} .topbar .cta{font-size:12.5px;padding:9px 14px} .topbar{padding-left:18px} } /* ─── Tablet 2-column grids (640–1000) — fills 50% empty space ─── */ @media (min-width:640px) and (max-width:1000px){ .stats-stickers,.svc-grid,.vent-grid,.quotes-grid,.creds-row,.impact-grid,.posts-grid,.modules, .journal-grid,.jl-grid,.j-grid{ grid-template-columns:1fr 1fr !important } /* 3-card layouts (Live Builds): auto-fit prevents lonely orphan */ .cards{grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) !important} } /* ─── Mobile (<480) — aggressive scaling + tighter tap targets ─── */ @media (max-width:480px){ h1{font-size:clamp(36px,11vw,72px)} h2{font-size:clamp(28px,7vw,52px)} .b-num .big{font-size:clamp(96px,26vw,140px)} .stats-stickers .num{font-size:clamp(54px,14vw,90px)} .b-greeting h1,.b-headline h1{line-height:1.04;overflow-wrap:anywhere} /* Hide decorative FOUNDER-GRADE sticker on tiny viewports */ .b-greeting .sticker-stack{display:none} /* Hi pill — let it wrap */ .b-greeting .hi{flex-wrap:wrap;line-height:1.3} /* Chat widget smaller on mobile */ .chat-fab{width:52px;height:52px;right:14px;bottom:14px} .chat-fab svg{width:24px;height:24px} /* Reduce hero padding */ .b-greeting{padding:24px} .stats-stickers .st{padding:22px} } /* ─── Small mobile (<360) ─── */ @media (max-width:360px){ .b-num .big{font-size:clamp(80px,24vw,100px)} .b-greeting{padding:20px} .wrap{padding:0 18px} } /* ─── Reduced motion ─── */ @media (prefers-reduced-motion: reduce){ .reveal{transition:none !important;opacity:1 !important;transform:none !important} .ticker-track,.b-portrait .ring,.b-num .conf,.chat-fab{animation:none !important} } /* ─── Phase 4: dropdown hover-bridge fix ─── Problem: 14px gap between nav trigger and .dd-menu causes hover to be lost when cursor crosses that gap, so the menu closes before user can click. Fix: invisible ::after bridge fills the gap. It's pointer-events:none by default (so it never blocks content below the topbar), and only activates when the dropdown is open — keeping hover alive across the gap. */ .topbar nav .nav-dd{position:relative} .topbar nav .nav-dd::after{ content:""; position:absolute; top:100%; left:-14px; right:-14px; height:20px; pointer-events:none; } .topbar nav .nav-dd:hover::after, .topbar nav .nav-dd:focus-within::after{ pointer-events:auto; } /* Forgiving close: small delay before hiding the menu so brief mouse exits don't accidentally close it. Opens instantly, closes ~150ms after. */ .topbar nav .nav-dd .dd-menu{ transition: opacity .2s ease .15s, transform .2s ease .15s, visibility .2s ease .15s !important; } .topbar nav .nav-dd:hover .dd-menu, .topbar nav .nav-dd:focus-within .dd-menu{ transition-delay: 0s !important; } /* ─── Phase 4: touch-friendly dropdown ─── On touch devices, tapping a dropdown trigger usually just navigates away before the user sees the menu. We let the link still work, but JS handlers on those pages should ideally toggle the dropdown on first tap. For now, ensure :focus-within keeps menu open on tap-to-focus. */ @media (hover:none){ .topbar nav .nav-dd .dd-menu{transition-delay:0s !important} } /* ─── Phase 4: dropdown click-target inside menu items ─── */ .topbar nav .nav-dd .dd-menu a{min-height:36px} /* ─── Phase 4: prevent body horizontal scroll from sticker rotation overflow ─── */ body{overflow-x:hidden} /* ─── Phase 4: chat popup max-height on short viewports ─── */ .chat-pop{max-height:calc(100vh - 120px);overflow-y:auto}