/* ============================================================ ISKCON Kirtan Ministry — device / responsive fixes Loads LAST (after site.css, footer.css, pages*.css, header.css) so every rule here wins the cascade. Scoped per component. Widths audited: 360 / 390 / 414 / 600 / 768 / 820 / 1024 / 1280 / 1440. ============================================================ */ /* ------------------------------------------------------------ 1. GLOBAL: horizontal-overflow guard `clip` (not `hidden`) — it does NOT create a scroll container, so Divi's position:fixed header (body.et_fixed_nav) and anchor scrolling are unaffected. No sticky elements exist in the plugin layers (verified). Unsupporting browsers ignore it and keep the existing per-page #page-container clip from whnf2026.css as the fallback. ------------------------------------------------------------ */ html, body { overflow-x: clip; } /* Media can never force a wider canvas inside redesigned sections */ .whnf26-section img, .whnf26-hero img, .whnf26-count img, .ikm-page-full img, .ikm-page-section img, .ikm-page-hero img, .ikm-page-doc img, .ikm-p2-section img, .ikm-p2-hero img, .ikm-p3-section img, .ikm-p3-hero img, .ikm-foot img { max-width: 100%; height: auto; } .whnf26-section iframe, .whnf26-section video, .ikm-page-section iframe, .ikm-p2-section iframe, .ikm-p3-section iframe { max-width: 100%; } /* Long unbroken strings (URLs, emails) never push the layout */ .ikm-page-doc, .ikm-page-transcript, .ikm-page-note, .whnf26-empty, .whnf26-report__body, .ikm-foot-copy, .ikm-p2-prose, .ikm-p3-prose { overflow-wrap: break-word; word-wrap: break-word; } /* ------------------------------------------------------------ 2. iOS: dynamic-viewport heights (svh) for vh-sized elements. 72vh/60vh heroes and 72vh popup images jump / get cropped when the Safari URL bar collapses; svh uses the small viewport. ------------------------------------------------------------ */ @supports (min-height: 1svh) { .whnf26-hero { min-height: 72svh; } .whnf26-hero--compact { min-height: 42svh; } @media (max-width: 620px) { .whnf26-hero { min-height: 60svh; } } .whnf26-popup__link img { max-height: 72svh; } @media (max-width: 480px) { .whnf26-popup__link img { max-height: 62svh; } } } /* Popups must fit short viewports (360x640, landscape phones): cap height and let the box scroll internally instead of clipping */ .whnf26-popup__box, .whnf26-spop__box { max-height: min(90vh, 640px); overflow-y: auto; -webkit-overflow-scrolling: touch; } @supports (max-height: 1svh) { .whnf26-popup__box, .whnf26-spop__box { max-height: min(90svh, 640px); } } @media (max-width: 480px) { .whnf26-spop__box { padding: 30px 20px 24px; } .whnf26-spop__box h2 { font-size: 22px; } } /* ------------------------------------------------------------ 3. iOS: inputs under 16px trigger zoom-on-focus. pages.css contact form is already 16px; these layers are not: whnf26 report form (15px), footer newsletter (14px), subscribe band + scroll popup (15px), CF7 selects (15px). ------------------------------------------------------------ */ @media (max-width: 767px) { .whnf26-form__card .wpcf7-form input[type="text"], .whnf26-form__card .wpcf7-form input[type="email"], .whnf26-form__card .wpcf7-form input[type="tel"], .whnf26-form__card .wpcf7-form input[type="number"], .whnf26-form__card .wpcf7-form input[type="url"], .whnf26-form__card .wpcf7-form input[type="date"], .whnf26-form__card .wpcf7-form select, .whnf26-form__card .wpcf7-form textarea, .whnf26-sub__field input, .whnf26-spop .whnf26-sub__field input, .ikm-foot-form input[type="email"], .et-l--footer input[type="email"], .et-l--footer input[type="text"], .subscribe-section .et_pb_contact_field input, .subscribe-section .et_pb_contact_field textarea { font-size: 16px !important; } } /* ------------------------------------------------------------ 4. HEADER — tablet/mobile (<=980px: Divi hamburger mode) ------------------------------------------------------------ */ @media (max-width: 980px) { /* 44px hamburger tap target (was ~42px) */ .mobile_menu_bar { padding: 8px; min-width: 44px; min-height: 44px; box-sizing: border-box; } /* The nav has ~20 nested items; with the always-fixed header the panel exceeds a phone's viewport and the tail was unreachable. Cap it to the space under the bar and let it scroll. */ #main-header .et_mobile_menu { max-height: calc(100vh - 90px); max-height: calc(100svh - 90px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } /* ------------------------------------------------------------ 5. HEADER — 981-1120px: 6 items + carets + 2 pills + dividers Estimated line width at header.css's 1350px tier (13px font, 16px gaps) is ~845px vs a 92%-wide container (902px @981px): it fits only marginally and wraps to two lines with real font metrics. Compress this range so one line is guaranteed (~750px used, ~150px slack) — forcing the hamburger up to 1120px is NOT needed. ------------------------------------------------------------ */ @media (min-width: 981px) and (max-width: 1120px) { #top-menu { gap: 6px 12px !important; flex-wrap: nowrap; } #top-menu > li > a { font-size: 12px !important; } #top-menu > li.menu-item-6000 > a, #top-menu > li.menu-item-1386 > a { padding: 6px 12px !important; font-size: 12px !important; } #top-menu > li.menu-item-5358, #top-menu > li.menu-item-1386 { padding-left: 12px; } #top-menu > li.menu-item-has-children > a::after { margin-left: 5px; } #main-header #logo { max-height: 38px !important; } .et_header_style_left #et-top-navigation { margin-left: 14px !important; } #et_top_search { margin: 0 0 0 12px !important; } } /* ------------------------------------------------------------ 6. COUNTDOWN — 4 boxes (4x72px + 3x18px gap = 342px) exceed the ~320px content box at 360px viewports and wrapped 3+1. Switch to a clean 2x2 grid on small phones. ------------------------------------------------------------ */ @media (max-width: 420px) { .whnf26-count__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 300px; margin: 0 auto; } .whnf26-count__box { min-width: 0; } .whnf26-count__title { font-size: 22px; padding: 0 16px; } } /* ------------------------------------------------------------ 7. FORMS — reCAPTCHA v2 widget is a fixed 304px iframe; inside .ikm-page-form-card (28px side padding) it overflows at <=400px viewports (inner width ~264px at 360px). Slim the card and scale the widget on the smallest phones. ------------------------------------------------------------ */ @media (max-width: 560px) { .ikm-page-form-card { padding: 24px 18px; } } @media (max-width: 400px) { .ikm-page-form-card .cf7sr-g-recaptcha, .whnf26-form__card .cf7sr-g-recaptcha { transform: scale(0.86); transform-origin: 0 0; } } /* Report form card breathing room at phone widths */ @media (max-width: 420px) { .whnf26-form__card { padding: 20px 14px; } } /* ------------------------------------------------------------ 8. TOUCH TARGETS — bring sub-44px controls up to standard on phones/tablets without bloating desktop. ------------------------------------------------------------ */ @media (pointer: coarse), (max-width: 980px) { /* TOC pills on Kirtan Standards / doc pages (~38px) */ .ikm-page-toc a { min-height: 44px; display: inline-flex; align-items: center; } /* Footer social pills (~32px) and link rows (~31px) */ .ikm-foot-pill { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } .ikm-foot-links a { padding: 10px 0; } /* Popup close buttons (38px) */ .whnf26-popup__close, .whnf26-spop__close { width: 44px; height: 44px; } /* Inline links keep a comfortable hit area */ .ikm-p3-link-row a, .ikm-page-info-card a { padding: 4px 0; display: inline-block; } } /* ------------------------------------------------------------ 9. SINGLE REPORT META TABLE — fixed 220px/130px label column plus unbroken values (URLs) could overflow narrow screens. ------------------------------------------------------------ */ .whnf26-single-meta { overflow-x: auto; -webkit-overflow-scrolling: touch; } .whnf26-single-meta td { overflow-wrap: break-word; word-break: break-word; } @media (max-width: 420px) { .whnf26-single-meta th { width: 104px; } .whnf26-single-meta th, .whnf26-single-meta td { padding: 8px 10px; font-size: 13px; } } /* ------------------------------------------------------------ 10. TABLET GRID STAGES (601-980px) — grids that jumped from 3 columns straight to 1 leave awkward over-wide cards. Give them a 2-column stage; a lone last card centers itself. ------------------------------------------------------------ */ @media (min-width: 621px) and (max-width: 980px) { .ikm-p2-team-grid { grid-template-columns: repeat(2, 1fr); max-width: none; } .ikm-page-pillars { grid-template-columns: repeat(2, 1fr); } .ikm-page-pillars > .ikm-page-pillar:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 480px; justify-self: center; width: 100%; } } @media (min-width: 621px) and (max-width: 900px) { .whnf26-events__grid { grid-template-columns: repeat(2, 1fr); } .whnf26-events__grid > .whnf26-event:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 520px; justify-self: center; width: 100%; } } /* ------------------------------------------------------------ 11. PHONE POLISH (<=600px) ------------------------------------------------------------ */ @media (max-width: 600px) { /* Cards: tighter padding so content, not chrome, fills 360px */ .ikm-page-card { padding: 24px 18px; } .ikm-page-transcript { padding: 24px 18px; } .ikm-page-transcript p { font-size: 16px; } /* Hero rhythm on phones */ .ikm-page-hero, .ikm-p2-hero, .ikm-p3-hero { padding: 56px 16px 44px; } /* Pull-quote scale on the About page */ .ikm-page-quote { font-size: 18px; padding-left: 18px; } /* Dashboard stats: numbers never touch card edges */ .whnf26-stat { padding: 20px 8px; } .whnf26-stat__label { font-size: 11px; letter-spacing: .12em; } /* Gallery captions readable */ .whnf26-gallery__item figcaption { font-size: 12.5px; } /* Buttons feel native full-width on phones */ .ikm-page-btn, .ikm-p2-btn { display: block; text-align: center; max-width: 360px; margin-left: auto; margin-right: auto; } } /* ------------------------------------------------------------ 12. NOTCHED PHONES — safe-area insets for every layout wrapper (whnf26-wrap already handled in whnf2026.css) ------------------------------------------------------------ */ @supports (padding: max(0px)) { .ikm-page-wrap, .ikm-p2-wrap, .ikm-p3-wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .ikm-foot-inner { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .ikm-foot-copy { padding-bottom: max(18px, env(safe-area-inset-bottom)); } }