/* Hydroposhan Academy — shared responsive layer (load last in ) * Pair with: css/tokens.css, css/header-premium.css, css/footer-premium.css (main template). * See docs/RESPONSIVE_DESIGN_SYSTEM.md and README.md. * * Breakpoints (convention): 1250 / 1024 / 992 / 900 / 768 / 640 / 500 / 480 / 380 * Primary mobile cut: 768px. Narrow phones: 480px and 500px (touch targets). */ html { -webkit-text-size-adjust: 100%; } *, *::before, *::after { box-sizing: border-box; } .container { width: min(var(--container-max, 1280px), 100%); margin-inline: auto; padding-inline: var(--gutter, 16px); } img, video, iframe, svg { max-width: 100%; height: auto; } body { overflow-x: hidden; } /* Flex/grid page shells: let main shrink instead of forcing horizontal scroll */ main { max-width: 100%; min-width: 0; } /* Prevent long headings/words from overflowing card boundaries */ h1, h2, h3, h4, h5, h6, p, li, a, span { overflow-wrap: anywhere; word-break: break-word; } /* Common content wrappers: allow children to shrink inside flex/grid cards */ .content-card, .section-box, .about-card, .stage-card, .proposal-form, .framework-box, .facility-card, .program-card, .partner-acc-content { min-width: 0; } /* Hero title underline — used on many inner pages (single source; avoids missing styles when class is used without inline CSS) */ .hero-divider { width: 80px; height: 4px; background: linear-gradient(90deg, var(--accent-blue, #0079c6), var(--primary-green, #007305)); margin: 0 auto; border-radius: 4px; } /* Shared top action buttons: keep consistent across pages */ .top-bar .top-action-btn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: center; align-items: center; gap: 10px; width: 100%; } .top-bar .top-action-btn a { min-height: 42px; padding: 8px 16px !important; border-radius: 999px; display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; text-align: center; } /* Unified hamburger button style (all pages) */ #mobile-toggle.mobile-toggle, .mobile-toggle { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border: 1px solid rgba(0, 115, 5, 0.22) !important; border-radius: 10px !important; background: #ffffff !important; color: #004b04 !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 0 !important; line-height: 1 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; cursor: pointer; } #mobile-toggle.mobile-toggle i, .mobile-toggle i { font-size: 1.1rem !important; color: #004b04 !important; line-height: 1 !important; pointer-events: none; } #mobile-toggle.mobile-toggle:focus-visible, .mobile-toggle:focus-visible { outline: 2px solid rgba(0, 115, 5, 0.45) !important; outline-offset: 2px; } /* Upcoming cards: stable layout across devices */ .batch-list-container { display: grid; gap: 16px; } .batch-list-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 18px; } /* Prevent layout break on narrow screens for long URLs/text */ @media (max-width: 768px) { /* Safety fallback: never keep reveal sections hidden on phones */ .reveal { opacity: 1 !important; transform: none !important; } /* Global mobile nav behavior (home + all inner pages) */ .main-nav-container nav { position: relative; flex-wrap: wrap; align-items: center; row-gap: 4px; overflow: visible !important; } .main-nav-container, header { overflow: visible !important; } #mobile-toggle.mobile-toggle, .mobile-toggle { display: inline-flex !important; order: 2; margin-left: auto; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 8px; } .nav-links:not(.active) { display: none !important; clip-path: none !important; opacity: 0 !important; visibility: hidden !important; } .nav-links.active { display: flex !important; flex-direction: column !important; align-items: stretch !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; clip-path: none !important; transform: none !important; position: static !important; z-index: 1002 !important; transition: none !important; flex: none !important; flex-basis: 100% !important; order: 3; width: 100% !important; max-width: 100% !important; padding: 8px 0 16px !important; margin: 0 !important; gap: 0 !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); border-top: 1px solid rgba(0, 0, 0, 0.06); max-height: min(75vh, 520px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-links, .nav-links.active { clip-path: none !important; -webkit-clip-path: none !important; } .nav-links.active a { width: 100%; box-sizing: border-box; text-align: center; justify-content: center !important; padding: 14px 16px !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .top-bar .top-action-btn { grid-template-columns: 1fr; gap: 8px !important; } /* Logo alignment consistency (header + footer + logo-nav templates) */ .main-nav-container nav .nav-logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .main-nav-container nav .nav-logo img { display: block; margin-inline: auto; } .logo-nav .logo, .logo-nav .logo img { margin-inline: auto !important; display: block; text-align: center; } footer .footer-grid > div:first-child { display: flex; justify-content: center; } footer .footer-logo { margin-inline: auto !important; } a:not(.btn):not(.program-hero-btn):not(.btn-card) { overflow-wrap: anywhere; word-break: break-word; } button { max-width: 100%; } } /* --- Inner pages: “premium” header uses .nav-links { display: flex } without a mobile breakpoint, which overrides display:none and keeps the full menu visible on small screens. --- */ @media (max-width: 768px) { body.page-home #mobile-toggle.mobile-toggle, body.page-home .mobile-toggle { min-width: 44px; min-height: 44px; display: flex !important; align-items: center; justify-content: center; padding: 8px; } body:not(.page-home) .main-nav-container nav { position: relative; flex-wrap: wrap; align-items: center; row-gap: 4px; } body:not(.page-home) .nav-logo { order: 1; } body:not(.page-home) #mobile-toggle.mobile-toggle, body:not(.page-home) .mobile-toggle { order: 2; margin-left: auto; min-width: 44px; min-height: 44px; display: flex !important; align-items: center; justify-content: center; padding: 8px; } body:not(.page-home) .nav-links:not(.active) { display: none !important; } body:not(.page-home) .nav-links.active { display: flex !important; flex-direction: column !important; align-items: stretch !important; flex: none !important; flex-basis: 100% !important; order: 3; width: 100% !important; max-width: 100% !important; padding: 8px 0 16px !important; margin: 0 !important; gap: 0 !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); border-top: 1px solid rgba(0, 0, 0, 0.06); max-height: min(75vh, 520px); overflow-y: auto; -webkit-overflow-scrolling: touch; } body:not(.page-home) .nav-links.active a { width: 100%; box-sizing: border-box; text-align: center; justify-content: center !important; padding: 14px 16px !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } body:not(.page-home) .nav-links a:not(.nav-btn)::after { display: none !important; } body:not(.page-home) .top-bar .top-action-btn { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; width: 100%; } body:not(.page-home) .top-bar .top-action-btn a { display: flex !important; justify-content: center; text-align: center; width: 100%; box-sizing: border-box; } /* Homepage top bar: same stacking so links never overflow on narrow phones */ body.page-home .top-bar .top-action-btn { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; width: 100%; } body.page-home .top-bar .top-action-btn a { display: flex !important; justify-content: center; text-align: center; width: 100%; box-sizing: border-box; } /* Inner pages: blog / variants with phone row + action row in top bar */ body:not(.page-home) .top-bar-content { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } body:not(.page-home) .top-contact-info { flex-direction: column !important; align-items: center !important; gap: 6px !important; width: 100%; text-align: center; } /* Stacked top-bar (3 full-width CTAs) + ~80px logo row often exceeds 280px; keep titles fully below fixed header */ :root { --site-fixed-header-offset: calc( clamp(19.5rem, 52vw, 26rem) + env(safe-area-inset-top, 0px) ); } .page-hero { padding-top: var(--site-fixed-header-offset) !important; padding-bottom: 48px !important; } .hero-title { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; line-height: 1.15 !important; padding: 0 12px; word-break: break-word; } .programs-hero { padding: var(--site-fixed-header-offset) 16px 56px !important; } body:not(.page-home) > header + #how-to-enroll.section-padding { padding-top: var(--site-fixed-header-offset) !important; } /* Overlap card onto hero (negative main margin) looks fine on desktop; on mobile it slides under fixed header */ body:not(.page-home) header + .page-hero + main, body:not(.page-home) header + .programs-hero + main { margin-top: 0 !important; } /* Calendar: first content is main > .page-title (no hero section) */ body:not(.page-home) > header + main.container { padding-top: var(--site-fixed-header-offset) !important; } /* Blog article: hero + overlapping article card */ body:not(.page-home) > header + main .blog-hero { padding-top: var(--site-fixed-header-offset) !important; } body:not(.page-home) .article-card-wrapper { margin-top: 0 !important; } /* Homepage hero (stacked top bar on small screens) */ body.page-home .hero { padding-top: var(--site-fixed-header-offset) !important; } .programs-title { font-size: clamp(1.5rem, 6vw, 2.15rem) !important; line-height: 1.2 !important; } .programs-subtitle { font-size: clamp(0.95rem, 3.5vw, 1.05rem) !important; } .content-card { padding-left: 18px !important; padding-right: 18px !important; } .programs-grid { grid-template-columns: 1fr !important; } .horizontal-legal-links { gap: 10px !important; padding-left: 6px !important; padding-right: 6px !important; } .horizontal-legal-links a { font-size: 0.78rem !important; padding: 8px 12px !important; } .global-cta a.btn, .global-cta .btn { width: 100% !important; max-width: 100%; box-sizing: border-box; justify-content: center; } .about-card { padding: 24px 18px !important; } .about-card h3 { font-size: clamp(1.2rem, 4.5vw, 1.65rem) !important; } /* Program certificate / 30-day pages (.logo-nav) */ .logo-nav { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; } .logo-nav .logo { justify-content: center; text-align: center; } .logo-nav nav { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 0 !important; width: 100%; } .logo-nav nav > a { padding: 12px 8px !important; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .logo-nav .nav-cta { flex-direction: column !important; width: 100%; margin-top: 6px; gap: 10px !important; } .logo-nav .nav-cta .btn { width: 100%; justify-content: center; white-space: normal !important; } header .top-bar .top-bar-content > span { display: block; text-align: center; font-size: 0.78rem !important; line-height: 1.45 !important; padding: 0 8px; } } @media (max-width: 480px) { .page-hero { padding-top: var(--site-fixed-header-offset) !important; padding-bottom: 36px !important; } .container { padding-left: 4% !important; padding-right: 4% !important; } .nav-logo img { max-height: 56px; width: auto; } .top-bar .top-action-btn { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; } .top-bar .top-action-btn a { min-height: 40px; font-size: 0.75rem !important; letter-spacing: 0.4px !important; padding: 7px 12px !important; } .top-bar .top-action-btn a:last-child { grid-column: 1 / -1; } } @media (max-width: 992px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px !important; } } @media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr !important; } .footer-grid > div:first-child { text-align: center; } } /* ============================================================================= Site-wide responsive (all pages) — load after page CSS ============================================================================= */ /* View-details modal (common-interactive.js) */ @media (max-width: 640px) { .vd-modal-overlay { padding: 10px !important; align-items: flex-end !important; } .vd-modal-dialog { width: 100% !important; max-width: 100% !important; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 18px 18px 0 0 !important; } .vd-modal-header { padding: 14px 14px 8px !important; } .vd-modal-title { font-size: 1.25rem !important; padding-right: 8px; } .vd-modal-body { padding: 12px 14px 16px !important; } .vd-modal-actions { flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; } .vd-modal-actions .vd-btn { width: 100% !important; justify-content: center !important; box-sizing: border-box; } } /* Anchor offset under fixed header (program pages with #program-main) */ #program-main { scroll-margin-top: 100px; } /* Program hero (e.g. 2-Day Masterclass, 7-Day Microgreens) */ .program-hero .program-hero-inner { max-width: min(1100px, 94vw) !important; } .program-hero h1.program-title { text-wrap: balance; word-break: normal !important; overflow-wrap: anywhere; } .program-hero .program-title .program-title-accent { font-size: 1em !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } @media (max-width: 768px) { #program-main { scroll-margin-top: calc(var(--site-fixed-header-offset, 200px) + 8px); } .program-hero { padding-top: var(--site-fixed-header-offset) !important; padding-left: 12px !important; padding-right: 12px !important; } .program-hero-cta { flex-direction: column !important; align-items: stretch !important; } .program-hero-cta .program-hero-btn { width: 100% !important; justify-content: center !important; box-sizing: border-box; } .program-subtitle { letter-spacing: 0.12em !important; } .program-hero h1.program-title { font-size: clamp(1.35rem, 6.1vw, 2.05rem) !important; line-height: 1.18 !important; } } /* Homepage & shared grids */ @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr !important; } } /* Upcoming batches, program listing, long-form program pages, tables, embedded media — 768px */ @media (max-width: 768px) { .batch-list-card { grid-template-columns: 1fr !important; align-items: stretch !important; text-align: center !important; gap: 18px !important; padding: 22px 16px !important; } .batch-info { align-items: center; } .batch-meta { flex-direction: column !important; align-items: center !important; gap: 10px !important; } .batch-action { width: 100% !important; align-self: stretch !important; } .batch-action .btn { width: 100% !important; box-sizing: border-box !important; } .td-title { font-size: clamp(1.1rem, 4.5vw, 1.25rem) !important; line-height: 1.3 !important; } .curr-grid { grid-template-columns: 1fr !important; } .check-list-grid { grid-template-columns: 1fr !important; } .program-top-cta { flex-direction: column !important; align-items: stretch !important; } .program-top-cta .btn { width: 100% !important; justify-content: center !important; box-sizing: border-box; } .sticky-enroll { flex-direction: column !important; text-align: center !important; gap: 16px !important; padding: 16px !important; } .two-column { grid-template-columns: 1fr !important; } .outcomes-grid { grid-template-columns: 1fr !important; } .cta-buttons { flex-direction: column !important; align-items: stretch !important; } .cta-buttons .btn { width: 100% !important; justify-content: center !important; box-sizing: border-box; } .hero-meta { grid-template-columns: minmax(0, 1fr) !important; } .section-title { font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important; } main table, .content-card table, .program-section table { font-size: 0.86rem; max-width: 100%; } main th, main td, .content-card th, .content-card td, .program-section th, .program-section td { padding: 10px 8px !important; } iframe { max-width: 100% !important; } } /* Homepage institutional section mobile fit */ @media (max-width: 1024px) { .inst-section-container { grid-template-columns: 1fr !important; gap: 24px !important; padding: 24px !important; } .inst-section-container .inst-box { max-width: 100% !important; } .inst-section-container .inst-box > div[style*="margin: -40px -40px 30px -40px"] { margin: -24px -16px 20px -16px !important; border-radius: 12px 12px 0 0 !important; } .inst-section-container .inst-box img { height: clamp(180px, 32vw, 240px) !important; } } @media (max-width: 768px) { .hero-content { padding: 28px 18px !important; } .inst-box { padding: 32px 20px !important; } .inst-section-container .inst-box { padding: 24px 16px !important; border-radius: 12px !important; } .inst-section-container .inst-box h2.serif-text { font-size: clamp(1.55rem, 6vw, 2rem) !important; margin-bottom: 16px !important; line-height: 1.2 !important; } .inst-section-container .inst-box p { font-size: 1rem !important; line-height: 1.6 !important; } .inst-section-container .inst-box > div[style*="border-left: 4px"] { padding: 16px !important; margin-bottom: 24px !important; } .inst-section-container .inst-box > div[style*="display: flex"][style*="justify-content: center"] { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .inst-section-container .inst-box .btn { width: 100% !important; justify-content: center !important; box-sizing: border-box; white-space: normal !important; word-break: keep-all !important; overflow-wrap: normal !important; text-align: center; min-height: 46px; } } /* Touch-friendly legal strip */ @media (max-width: 480px) { .horizontal-legal-links { flex-wrap: wrap !important; justify-content: center !important; } .horizontal-legal-links a { min-height: 44px; display: inline-flex !important; align-items: center !important; } } /* ============================================================================= Global baseline — every page (works with inline utility styles) ============================================================================= */ pre, code { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .map-container { max-width: 100%; box-sizing: border-box; } /* Safety: keep homepage lightbox hidden until explicitly opened */ #home-training-lightbox[aria-hidden="true"] { display: none !important; } #home-training-lightbox.open[aria-hidden="false"] { display: flex !important; } @media (max-width: 480px) { .contact-info-boxes { grid-template-columns: 1fr !important; } } /* Map, large CTAs, program detail main — 768px */ @media (max-width: 768px) { .map-container { height: min(400px, 52vh) !important; min-height: 220px; } .global-cta { padding: 36px 16px !important; margin: 48px auto !important; } .global-cta h3.serif-text, .global-cta .serif-text { font-size: clamp(1.35rem, 5.5vw, 2rem) !important; line-height: 1.2 !important; } .global-cta p { font-size: 1rem !important; } .global-cta .btn, .global-cta a.btn { width: 100% !important; max-width: 100%; box-sizing: border-box; justify-content: center; } main#program-main > section.content-card { padding-left: 16px !important; padding-right: 16px !important; } } /* Calendar & any horizontal table scroll */ .table-responsive { -webkit-overflow-scrolling: touch; max-width: 100%; } /* Shown only under @media (max-width: 768px) for .calendar-table */ .calendar-mobile-only-dates { display: none; } /* Training calendar — long program titles must stay inside the cell */ .calendar-table td:first-child { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-all; } .calendar-table .program-name { max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; word-break: break-all; } .calendar-table .program-meta { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .calendar-enroll-disabled { display: inline-flex !important; align-items: center; justify-content: center; opacity: 0.65; cursor: not-allowed; pointer-events: none; user-select: none; box-sizing: border-box; } /* Desktop: always show Start/End columns (legacy builds hid nth-child 3–4 site-wide) */ @media (min-width: 769px) { .calendar-table thead { display: table-header-group !important; } .calendar-table tbody tr { display: table-row !important; } .calendar-table thead th:nth-child(3), .calendar-table thead th:nth-child(4), .calendar-table tbody td:nth-child(3), .calendar-table tbody td:nth-child(4) { display: table-cell !important; visibility: visible !important; } } /* Calendar: stacked cards on phones + cell padding */ @media (max-width: 768px) { .calendar-table th, .calendar-table td { padding: 12px 14px !important; font-size: 0.92rem !important; white-space: normal !important; /* override any global nowrap on main table */ } .table-responsive { overflow: visible !important; border: none !important; box-shadow: none !important; background: transparent !important; } .calendar-table { min-width: 0 !important; width: 100% !important; border-collapse: separate !important; border-spacing: 0 12px !important; } .calendar-table thead { display: none !important; } .calendar-table tbody, .calendar-table tr, .calendar-table td { display: block !important; width: 100% !important; } .calendar-table tr { background: #fff; border: 1px solid rgba(0, 115, 5, 0.12); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 75, 4, 0.06); padding: 8px 0; min-width: 0; max-width: 100%; box-sizing: border-box; } .calendar-table td { border: none !important; padding: 8px 14px !important; position: relative; text-align: left !important; font-size: 0.94rem !important; } .calendar-table td::before { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0a7f1e; margin-bottom: 4px; } .calendar-table td:nth-child(1)::before { content: "Program"; } .calendar-table td:nth-child(2)::before { content: "Duration"; } .calendar-table td:nth-child(3)::before { content: "Start Date"; } .calendar-table td:nth-child(4)::before { content: "End Date"; } .calendar-table td:nth-child(5)::before { content: "Seats Available"; } .calendar-table td:nth-child(6)::before { content: "Enroll"; } .calendar-table td:last-child { padding-top: 12px !important; } .calendar-table td:last-child a, .calendar-table td:last-child .btn { width: 100% !important; justify-content: center !important; box-sizing: border-box; } /* Inlined under Duration — some mobile engines skip or collapse separate Start/End rows */ .calendar-table tbody tr > td:nth-child(3), .calendar-table tbody tr > td:nth-child(4) { display: none !important; } .calendar-mobile-only-dates { display: grid !important; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0, 115, 5, 0.14); } .calendar-mob-lbl { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0a7f1e; margin-bottom: 2px; } .calendar-mob-val { font-size: 0.94rem; font-weight: 600; color: var(--text-main, #1a1f1b); } .calendar-mob-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } } @media (min-width: 769px) { .calendar-mobile-only-dates { display: none !important; } } /* Extra-narrow: program hero title breathing room */ @media (max-width: 380px) { h1.program-title { font-size: clamp(1.45rem, 9vw, 1.85rem) !important; } } /* How to Enroll — notes grid: never wider than viewport */ .enroll-notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 30px; } @media (max-width: 480px) { .enroll-notes-grid { gap: 20px; } } @media (max-width: 768px) { .help-section .btn-group { flex-direction: column !important; align-items: stretch !important; width: 100%; max-width: 400px; margin-left: auto !important; margin-right: auto !important; } .help-section .btn-group .btn { width: 100% !important; justify-content: center !important; box-sizing: border-box; } } /* Partner With Us page mobile/tablet readability */ @media (max-width: 1024px) { .partner-intro { margin-bottom: 36px !important; } .partner-intro .partner-subtitle { font-size: clamp(1.05rem, 4.2vw, 1.35rem) !important; line-height: 1.35 !important; letter-spacing: 0.06em !important; margin-bottom: 14px !important; word-break: keep-all; } .partner-intro h2.serif-text { font-size: clamp(1.8rem, 6vw, 2.35rem) !important; line-height: 1.2 !important; margin-bottom: 14px !important; } .partner-intro .partner-lead { font-size: clamp(1rem, 3.8vw, 1.15rem) !important; line-height: 1.6 !important; margin-bottom: 18px !important; } .partner-intro .btn-group { width: 100%; max-width: 520px; margin-inline: auto; } .partner-intro .btn-group .btn { width: 100% !important; justify-content: center !important; text-align: center; white-space: normal !important; } .section-box { padding: 22px 16px !important; } .partner-acc-header span { line-height: 1.35 !important; padding-right: 8px; } } /* Partner page: tighten header-to-content spacing for better balance */ @media (max-width: 1024px) { .page-hero + main .content-card { padding-top: 22px !important; } .page-hero + main .partner-intro { margin-top: 0 !important; margin-bottom: 28px !important; } } @media (max-width: 768px) { .partner-intro { text-align: left !important; } .partner-intro .btn-group { gap: 10px !important; } .page-hero + main .content-card { padding-top: 14px !important; } .page-hero + main .partner-intro { margin-bottom: 22px !important; } } /* Insights bottom CTA: force consistent button rendering */ .bottom-cta .btn-group .btn { display: inline-flex !important; align-items: center; justify-content: center; min-height: 46px; text-decoration: none !important; border-radius: 999px !important; font-weight: 700 !important; letter-spacing: 1px !important; } .bottom-cta .btn-group .btn.btn-primary { background: var(--primary-green) !important; color: #fff !important; border: 2px solid var(--primary-green) !important; } .bottom-cta .btn-group .btn.btn-outline { background: #fff !important; color: var(--primary-green) !important; border: 2px solid var(--primary-green) !important; } @media (max-width: 768px) { .bottom-cta .btn-group { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .bottom-cta .btn-group .btn { width: 100% !important; box-sizing: border-box; text-align: center; } } /* ============================================================================= Strict Mobile Overrides (Max-Width: 500px) ============================================================================= */ @media (max-width: 500px) { /* Prevent min-width forcing by any container */ body, html, .container, main { min-width: 0 !important; overflow-x: hidden !important; } /* Fix Top Action Buttons taking up too much vertical space */ body.page-home .top-bar .top-action-btn, body:not(.page-home) .top-bar .top-action-btn { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: stretch !important; gap: 6px !important; } body.page-home .top-bar .top-action-btn a, body:not(.page-home) .top-bar .top-action-btn a { width: 100% !important; padding: 6px 14px !important; font-size: 0.72rem !important; max-width: 100% !important; } body.page-home .top-bar .top-action-btn a:last-child, body:not(.page-home) .top-bar .top-action-btn a:last-child { grid-column: 1 / -1; } /* Fix Hero Badges cramping */ .hero-badges { flex-wrap: wrap !important; gap: 8px !important; } .hero-badges a { font-size: 0.75rem !important; padding: 6px 12px !important; width: 100% !important; justify-content: center !important; } /* Cleaner Footer Links for Mobile */ .horizontal-legal-links { gap: 12px 18px !important; padding: 15px 10px !important; } .horizontal-legal-links a { background: transparent !important; border: none !important; box-shadow: none !important; color: #a7f3d0 !important; padding: 6px !important; font-size: 0.85rem !important; margin-bottom: 0 !important; letter-spacing: 0.5px !important; font-weight: 500 !important; } .horizontal-legal-links a:hover { background: transparent !important; box-shadow: none !important; transform: translateY(-1px) !important; color: #ffffff !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Legacy nav animation block removed: mobile menu is now controlled by common-interactive.js via #global-mobile-menu-panel. */ /* ========================================================================== Final Global Responsive Pass (all pages) ========================================================================== */ @media (max-width: 1024px) { h1 { font-size: clamp(1.7rem, 4.8vw, 2.3rem) !important; line-height: 1.2 !important; } h2 { font-size: clamp(1.4rem, 4vw, 1.95rem) !important; line-height: 1.25 !important; } h3 { font-size: clamp(1.15rem, 3.2vw, 1.45rem) !important; line-height: 1.3 !important; } p, li { line-height: 1.65 !important; } .section-padding { padding: clamp(48px, 8vw, 82px) 0 !important; } .content-card, .step-card, .section-box, .program-card { padding: clamp(18px, 3vw, 28px) !important; } .btn-group, .programs-cta-row, .program-top-cta, .cta-buttons, .hero .btn-group, .inst-btn-group, .help-section .btn-group { gap: 12px !important; } } @media (max-width: 768px) { .container { padding-left: 4% !important; padding-right: 4% !important; } .btn, a.btn, button.btn, .program-hero-btn, .btn-outline, .btn-primary { min-height: 44px !important; padding: 11px 16px !important; font-size: 0.9rem !important; line-height: 1.2 !important; } .btn-group, .programs-cta-row, .program-top-cta, .cta-buttons, .hero .btn-group, .inst-btn-group, .help-section .btn-group { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } .btn-group .btn, .programs-cta-row .btn, .program-top-cta .btn, .cta-buttons .btn, .hero .btn-group .btn, .inst-btn-group .btn, .help-section .btn-group .btn { width: 100% !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; } .programs-grid, .grid-3, .two-col-grid, .two-column, .outcomes-grid, .check-list-grid, .curr-grid, .contact-info-boxes { grid-template-columns: 1fr !important; } .batch-list-card, .program-card, .infra-card, .section-box, .content-card { border-radius: 12px !important; } .table-responsive { overflow-x: auto !important; max-width: 100% !important; } table { width: 100% !important; } th, td { word-break: break-word; } iframe, video, img { max-width: 100% !important; height: auto !important; } /* Homepage training gallery: aspect-ratio tiles + absolute fill (global img rule resets height) */ #home-training-gallery .home-training-gallery-item img { height: 100% !important; object-fit: cover !important; } #global-mobile-menu-panel { width: 100% !important; left: 0 !important; right: 0 !important; border-top: 1px solid rgba(0,0,0,0.06) !important; } } @media (max-width: 480px) { h1 { font-size: clamp(1.45rem, 7.5vw, 1.9rem) !important; } h2 { font-size: clamp(1.25rem, 6.2vw, 1.6rem) !important; } h3 { font-size: clamp(1.05rem, 5.2vw, 1.3rem) !important; } p, li { font-size: 0.96rem !important; } .content-card, .step-card, .section-box, .program-card, .global-cta { padding: 16px !important; } .horizontal-legal-links { justify-content: center !important; } .horizontal-legal-links a { min-height: 40px; } } /* ========================================================================== Responsive Stability Overrides (site-wide) Keeps legacy + new breakpoints consistent on all pages. ========================================================================== */ @media (max-width: 768px) { /* Normalize top bar layout across templates */ .top-bar .top-bar-content { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; align-items: center !important; text-align: center !important; } .top-contact-info { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px 12px !important; width: 100% !important; } /* Keep CTA rows consistent in all pages */ .top-bar .top-action-btn, body.page-home .top-bar .top-action-btn, body:not(.page-home) .top-bar .top-action-btn { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; } .top-bar .top-action-btn a { width: 100% !important; max-width: 100% !important; white-space: normal !important; } /* Safer drawer sizing for long menu lists */ .nav-links.active, body:not(.page-home) .nav-links.active { max-height: min(70vh, 460px) !important; overscroll-behavior: contain; } /* * Wide legacy data tables: horizontal scroll. * Exclude .calendar-table — it uses stacked “cards” on small screens and must wrap text. */ .content-card table:not(.calendar-table), main table:not(.calendar-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* Article / CMS HTML tables: allow wrapping inside the column */ main .content table, main .prose table, article .content table, .legal-content table { white-space: normal !important; } } @media (max-width: 500px) { /* Compact but readable CTA strip */ .top-bar .top-action-btn, body.page-home .top-bar .top-action-btn, body:not(.page-home) .top-bar .top-action-btn { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; } .top-bar .top-action-btn a:last-child { grid-column: 1 / -1; } /* Keep nav logo + toggle on one visual row */ .main-nav-container nav { column-gap: 10px; } .main-nav-container .nav-logo img { max-height: 56px !important; width: auto !important; } } /* ============================================================================= RESPONSIVE_DESIGN_SYSTEM.md — site-wide baseline (all pages / viewports) Fluid type, xs + xxl tuning, prose width, card grid utility, touch targets. ============================================================================= */ @supports (padding: max(0px, env(safe-area-inset-left))) { body { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); } } /* Body: fluid size (this file loads after page