/* * LaunchGate Universal Responsive CSS Kit * ---------------------------------------- * Drop-in responsive behavior for all LaunchGate landing pages. * * Usage: * 1. Add data-lg-responsive attribute to * 2. Link this stylesheet: * * All selectors scoped under [data-lg-responsive] to avoid conflicts * with existing page styles or Tailwind utilities. */ /* ========================================================================== Custom Properties (override per-page if needed) ========================================================================== */ [data-lg-responsive] { --lg-bp-tablet: 1024px; --lg-bp-mobile: 768px; --lg-bp-small: 480px; } /* ========================================================================== Base / Desktop Defaults ========================================================================== */ /* Prevent horizontal overflow from any element poking out */ [data-lg-responsive] { overflow-x: hidden; } /* All images constrained to their container */ [data-lg-responsive] img { max-width: 100%; height: auto; } /* Tables get horizontal scroll wrapper behavior */ [data-lg-responsive] .table-wrapper, [data-lg-responsive] .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Typography scaling via clamp — works at all widths */ [data-lg-responsive] h1 { font-size: clamp(1.8rem, 5vw, 3.5rem); } [data-lg-responsive] h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); } [data-lg-responsive] h3 { font-size: clamp(1.25rem, 3vw, 2rem); } [data-lg-responsive] h4 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); } [data-lg-responsive] p, [data-lg-responsive] li, [data-lg-responsive] td, [data-lg-responsive] th { font-size: max(14px, 1rem); } /* 1. Hamburger button — hidden on desktop */ [data-lg-responsive] .lg-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; cursor: pointer; z-index: 1001; background: none; border: none; padding: 4px; position: relative; } [data-lg-responsive] .lg-hamburger span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } /* Animated X state */ [data-lg-responsive] .lg-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } [data-lg-responsive] .lg-hamburger.active span:nth-child(2) { opacity: 0; } [data-lg-responsive] .lg-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== Breakpoint: Tablet (<=1024px) ========================================================================== */ @media (max-width: 1024px) { /* 3. Grid collapse — 4-col grids become 2-col */ [data-lg-responsive] .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } /* Generic grids with 3+ explicit columns — reduce to 2 */ [data-lg-responsive] .grid-3 { grid-template-columns: repeat(2, 1fr) !important; } /* 6. Hero padding reduction */ [data-lg-responsive] .hero, [data-lg-responsive] [class*="hero"] { padding-top: 80px; padding-bottom: 60px; } /* Container padding tightened */ [data-lg-responsive] .container, [data-lg-responsive] [class*="container"] { padding-left: 24px; padding-right: 24px; } } /* ========================================================================== Breakpoint: Mobile (<=768px) ========================================================================== */ @media (max-width: 768px) { /* 1. Hamburger visible on mobile */ [data-lg-responsive] .lg-hamburger { display: flex; } /* 2. Mobile nav overlay — hidden by default, shown with .lg-mobile-nav-open */ [data-lg-responsive] .lg-mobile-nav-open { position: fixed !important; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 60px 20px; overflow-y: auto; } [data-lg-responsive] .lg-mobile-nav-open a { font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); text-decoration: none; padding: 12px 0; display: block; text-align: center; } /* 3. Grid collapse — all multi-column grids to 1 or 2 cols */ [data-lg-responsive] .grid-2 { grid-template-columns: 1fr !important; } [data-lg-responsive] .grid-3, [data-lg-responsive] .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } /* 4. Footer — 2-col layout */ [data-lg-responsive] .footer-grid, [data-lg-responsive] footer .grid-4, [data-lg-responsive] footer .grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 24px; } /* 6. Hero sections — less padding */ [data-lg-responsive] .hero, [data-lg-responsive] [class*="hero"] { padding-top: 60px; padding-bottom: 40px; } /* Scale down hero background effects (pseudo-elements, blur circles) */ [data-lg-responsive] .hero::before, [data-lg-responsive] [class*="hero"]::before { transform: scale(0.7); opacity: 0.5; } /* 8. Button groups — wrap and center */ [data-lg-responsive] .button-group, [data-lg-responsive] .btn-group, [data-lg-responsive] [class*="cta-buttons"], [data-lg-responsive] [class*="button-row"] { flex-wrap: wrap; justify-content: center; gap: 12px; } /* 9. Counter / stat strips — column layout */ [data-lg-responsive] .stats, [data-lg-responsive] .counters, [data-lg-responsive] [class*="stat-strip"], [data-lg-responsive] [class*="counter-row"] { flex-direction: column; align-items: center; gap: 16px; } /* 10. Carousel nav buttons — pull inside viewport */ [data-lg-responsive] .carousel-prev, [data-lg-responsive] .carousel-next, [data-lg-responsive] [class*="carousel"] > button { position: static; margin: 8px; } /* 11. Status bar (#lg-status-bar) — wrap items */ [data-lg-responsive] #lg-status-bar { flex-wrap: wrap; gap: 8px 16px; padding: 8px 16px; font-size: 12px; } /* Hide pipe separators on mobile (they don't wrap well) */ [data-lg-responsive] #lg-status-bar > span[style*="opacity:0.4"] { display: none; } /* 12. Pipeline / timeline — horizontal scroll */ [data-lg-responsive] .pipeline, [data-lg-responsive] .timeline, [data-lg-responsive] [class*="pipeline"], [data-lg-responsive] [class*="timeline-horizontal"] { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } /* Container padding — mobile tightened */ [data-lg-responsive] .container, [data-lg-responsive] [class*="container"] { padding-left: 16px; padding-right: 16px; } /* Section padding reduction */ [data-lg-responsive] section { padding-left: 16px; padding-right: 16px; } } /* ========================================================================== Breakpoint: Small / Phone (<=480px) ========================================================================== */ @media (max-width: 480px) { /* 3. All grids collapse to single column */ [data-lg-responsive] .grid-2, [data-lg-responsive] .grid-3, [data-lg-responsive] .grid-4 { grid-template-columns: 1fr !important; } /* 4. Footer — single column */ [data-lg-responsive] .footer-grid, [data-lg-responsive] footer .grid-4, [data-lg-responsive] footer .grid-3, [data-lg-responsive] footer .grid-2 { grid-template-columns: 1fr !important; } /* 7. Card grids — ensure single column */ [data-lg-responsive] .card-grid, [data-lg-responsive] [class*="cards"] { grid-template-columns: 1fr !important; } /* 6. Hero — minimal padding */ [data-lg-responsive] .hero, [data-lg-responsive] [class*="hero"] { padding-top: 40px; padding-bottom: 30px; } /* 8. Buttons — full width on very small screens */ [data-lg-responsive] .button-group a, [data-lg-responsive] .button-group button, [data-lg-responsive] .btn-group a, [data-lg-responsive] .btn-group button { width: 100%; text-align: center; } /* 9. Stat items — full width */ [data-lg-responsive] .stats > *, [data-lg-responsive] .counters > *, [data-lg-responsive] [class*="stat-strip"] > * { width: 100%; text-align: center; } /* 11. Status bar — stacked vertically */ [data-lg-responsive] #lg-status-bar { flex-direction: column; align-items: center; text-align: center; padding: 10px 12px; gap: 6px; } /* Tables — force horizontal scroll */ [data-lg-responsive] table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } }