/* ============================================================================= IDF Kenya — responsive.css (v3.0 — Complete Rewrite) Single source of truth for ALL responsive overrides. LOAD ORDER (enforced in every page — LAST stylesheet): 1. styles.css — tokens, navbar, footer 2. components.css — navbar + footer component styles 3. sections.css — shared section styles (hero, stats, projects, etc.) 4. sidenav.css — desktop sidenav + mobile tab nav 5. [page].css — page-specific (about, ourwork, regions, contact, resources, resources-lightbox-enhancements) 6. responsive.css — THIS FILE — always last BREAKPOINT SYSTEM (mobile-first override approach, desktop-default base): ┌──────────────────────────────────────────────────────────────────────────┐ │ ≤1280px Ultra-wide safety — container clamp() handles this natively │ │ ≤1100px Desktop → Tablet threshold │ │ · Sidenav collapses (sidenav.css handles display:none) │ │ · Mobile tab nav appears │ │ · Layout gutters tighten │ │ ≤960px Tablet portrait │ │ · Two-column section grids stack to single column │ │ · Story cards / work-body stack vertically │ │ ≤768px Small tablet / large phone │ │ · Hero adjustments, form layout changes │ │ · Desktop nav hidden, hamburger shown (820px in styles.css; │ │ kept at 820px there — this file only adds overrides) │ │ ≤600px Mobile │ │ · Hero height reduced, pills hidden │ │ · Tight padding, compact sections │ │ ≤480px Small mobile │ │ · Single-column grids, stacked CTAs │ │ ≤375px Extra-small (iPhone SE, etc.) │ │ · Minimum safe padding, logo simplification │ └──────────────────────────────────────────────────────────────────────────┘ RATIONALE FOR BREAKPOINTS: · 1100px — matches existing sidenav.css threshold; sidenav becomes unusable at this width alongside the main content column. · 960px — natural inflection where two-column magazine-spread cards (regions, work-body) become too narrow to read comfortably. · 768px — industry-standard tablet portrait; contact form .form-row collapses, hero heights drop. · 600px — hero pills and decorative elements become cluttered on small phones; this is the primary "mobile" threshold. · 480px — small phones (iPhone SE 375px + breathing room). · 375px — minimum viewport handled by browsers; safety net only. ORGANISATION: A. CSS Custom Property Overrides (responsive tokens) B. Global / Container / Typography C. Navbar + Mobile Drawer D. Footer E. Sidenav + Mobile Tab Nav (About, Regions, Work, Resources) F. Home page (index.html) — Hero + Section-level grids G. About page H. Regions page I. Our Work page J. Resources page K. Contact page L. Shared / Utility overrides ============================================================================= */ /* ============================================================================= A. CSS CUSTOM PROPERTY OVERRIDES Responsive token scaling — reduces spacing and sizing on smaller viewports. ============================================================================= */ @media (max-width: 960px) { :root { --section-gap: 56px; --section-gap-sm: 36px; } } @media (max-width: 600px) { :root { --section-gap: 44px; --section-gap-sm: 28px; --container-pad: clamp(1rem, 4vw, 1.5rem); } } @media (max-width: 375px) { :root { --container-pad: 1rem; } } /* ============================================================================= B. GLOBAL / CONTAINER / TYPOGRAPHY ============================================================================= */ /* Prevent horizontal overflow at all sizes. CRITICAL: overflow-x:hidden on silently creates a new scroll container, which breaks position:sticky on every child element (sidenav, mobile-tab-nav, site-header all stop sticking). overflow-x:clip is visually identical but does NOT create a scroll container — position:sticky keeps working correctly on all viewports. */ html, body { overflow-x: clip; max-width: 100%; } img, video, iframe, embed, object { max-width: 100%; } /* Container: let clamp() do the work; just enforce no overflow */ .container { width: 100%; max-width: var(--container-max, 1280px); margin-inline: auto; padding-inline: var(--container-pad, clamp(1rem, 4vw, 2rem)); } /* ── ≤ 600px — base font size scales down slightly ── */ @media (max-width: 600px) { :root { font-size: 15px; /* relative to html; rem units scale proportionally */ } } @media (max-width: 375px) { :root { font-size: 14px; } } /* ============================================================================= C. NAVBAR + MOBILE DRAWER Base navbar responsive rules live in styles.css + components.css. This section adds missing overrides and closes gaps. ============================================================================= */ /* ── ≤ 1024px — reduce nav link gap ── */ @media (max-width: 1024px) { .desktop-nav__list { gap: 1.5rem; } .nav-link { font-size: 0.8125rem; } } /* ── ≤ 820px — show hamburger, hide desktop nav ── (Primary rule lives in components.css at 820px — these are safety additions) */ @media (max-width: 820px) { .desktop-nav, .desktop-cta { display: none !important; } .hamburger-btn { display: flex !important; } /* Tighter nav-inner gap on mobile */ .nav-inner { gap: 0.75rem; padding-inline: clamp(1rem, 4vw, 1.5rem); } /* Reduce logo to compact mobile size */ .logo__img { width: 40px !important; height: 40px !important; } .site-header { padding: 10px 0; } .site-header.is-scrolled { padding: 8px 0; } /* Sync --navbar-height with actual mobile header height (logo 40px + padding-top 10px + padding-bottom 10px = 60px). mobile-tab-nav uses this variable for its sticky top offset — without this override the 80px default leaves a ~20px gap. */ :root { --navbar-height: 60px; } } /* ── ≤ 480px — smallest logo state ── */ @media (max-width: 480px) { .logo__tagline { display: none; } .logo__img { width: 36px !important; height: 36px !important; } .site-header.is-scrolled .logo__img { width: 32px !important; height: 32px !important; } .logo__primary { font-size: 0.95rem !important; } /* logo 36px + padding 10px*2 = 56px */ :root { --navbar-height: 56px; } } /* ── ≤ 375px — absolute minimum nav ── */ @media (max-width: 375px) { .nav-inner { padding-inline: 0.875rem; } .logo__primary { font-size: 0.88rem !important; } .logo__full { display: none !important; } } /* Mobile drawer: ensure full viewport scroll lock works on iOS */ .mobile-drawer.is-open { -webkit-overflow-scrolling: touch; } /* ── Touch targets: nav links min 44px height ── */ @media (max-width: 820px) { .mobile-nav-link { min-height: 52px; padding: 1rem clamp(1rem, 4vw, 1.5rem); } } @media (max-width: 480px) { .mobile-nav-link { font-size: 0.9375rem; padding: 0.875rem 1rem; } } /* ============================================================================= D. FOOTER ============================================================================= */ /* ── ≤ 1024px — 2-column footer grid ── */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; padding: 4rem 0 3rem; } .footer-brand { max-width: 100%; grid-column: span 2; /* brand takes full width on tablet */ } } /* ── ≤ 768px — single column footer ── */ @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; padding: 3.5rem 0 2.5rem; } .footer-brand { grid-column: 1; align-items: flex-start; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; } .footer-bottom-left { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .social-links { flex-direction: row; flex-wrap: wrap; gap: 0.75rem 1.5rem; } .back-to-top { align-self: flex-start; } } /* ── ≤ 480px — compact footer ── */ @media (max-width: 480px) { .footer-grid { padding: 2.5rem 0 2rem; } .footer-logo__img { width: clamp(130px, 40vw, 160px); } .footer-legal-links { flex-wrap: wrap; gap: 0.5rem; } } /* ============================================================================= E. SIDENAV + MOBILE TAB NAV Desktop sidenav: hidden ≤ 1100px (via sidenav.css). Mobile tab nav: shown ≤ 1100px (via sidenav.css). This section handles layout side-effects of that swap. ============================================================================= */ /* ── ≤ 1100px — layout wrappers that contain a sidenav ── .about-layout, .work-layout, .regions-layout, .res-layout all share the same flex+gap pattern. */ @media (max-width: 1100px) { /* FIX: THE MISSING RULE — sidenav.css has NO display:none for .sidenav. Without this, the vertical sidenav stays rendered in the flex row on mobile (flex-shrink:0 prevents it shrinking), crowding the main column and making the layout appear broken or overflowed. */ .sidenav { display: none; } .about-layout, .work-layout, .regions-layout, .res-layout { padding-inline: clamp(1rem, 3vw, 1.5rem); gap: 0; } .about-main, .work-main, .regions-main, .res-main { padding-top: var(--section-gap-sm, 36px); padding-bottom: var(--section-gap, 56px); width: 100%; } /* Mobile tab nav: appears below the fixed header. display:block makes it visible; position:sticky is set in sidenav.css. */ .mobile-tab-nav { display: block; } /* Ensure horizontal scroll works for overflow items */ .mobile-tab-nav__inner { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; display: flex; flex-wrap: nowrap; padding: 0 12px; } .mobile-tab-nav__inner::-webkit-scrollbar { display: none; } .mobile-tab-nav__link { flex-shrink: 0; white-space: nowrap; } /* Anchor offset: section headings must clear both the fixed navbar AND the sticky mobile tab nav (~50px) */ .about-section::before, .work-section::before, .county-section::before, .res-section::before { height: 130px; margin-top: -130px; } } /* ── ≤ 600px — mobile tab nav link sizing ── */ @media (max-width: 600px) { .mobile-tab-nav__link { font-size: 0.76rem; padding: 11px 12px; min-height: 44px; /* touch target */ } .mobile-tab-nav__link i { font-size: 0.72rem; } } /* ── ≤ 375px — minimum tab label sizing ── */ @media (max-width: 375px) { .mobile-tab-nav__link { font-size: 0.72rem; padding: 10px 10px; } } /* ============================================================================= F. HOME PAGE (index.html) ============================================================================= */ /* ─── F1. HERO ─────────────────────────────────────────────────────── */ /* ≤ 768px: keep full-screen hero; centre content */ @media (max-width: 768px) { .hero { height: 100vh; min-height: 560px; } .hero-inner, .hero-content { text-align: center; } .hero-actions { justify-content: center; } .hero-sub { max-width: 100%; } .hero-impact { gap: 20px; flex-wrap: wrap; justify-content: center; } .hero-impact-stat + .hero-impact-stat { padding-left: 20px; } .hero-impact-number { font-size: clamp(1.3rem, 3vw, 1.6rem); } } /* ≤ 600px: hero content tightens */ @media (max-width: 600px) { .hero { min-height: 500px; } .hero-content { padding: 16px 16px 28px; } .hero-eyebrow { font-size: 0.65rem; } .hero-actions { flex-direction: column; gap: 10px; } .hero-actions .btn { width: 100%; text-align: center; justify-content: center; } .hero-impact { flex-direction: column; gap: 0; } .hero-impact-stat + .hero-impact-stat { padding-left: 0; padding-top: 14px; margin-top: 14px; border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.08); } } /* ─── F2. ABOUT SECTION (index.html) ────────────────────────────────── */ @media (max-width: 1100px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-image-deco { display: none; /* offset deco border clips on narrow viewports */ } } @media (max-width: 768px) { .about-section { padding: 60px 0; } .about-image-wrap img { height: clamp(260px, 50vw, 380px); } } @media (max-width: 480px) { .about-section { padding: 48px 0; } .award-card { left: 0; top: -16px; } } /* ─── F3. STATS SECTION ─────────────────────────────────────────────── */ @media (max-width: 992px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 768px) { .stats-section { padding: 60px 0; } .stat-card { padding: 28px 20px; } .stat-number { font-size: 2.4rem; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: repeat(2, 1fr); /* keep 2-col on small phones */ gap: 12px; } .stat-number { font-size: 2rem; } } @media (max-width: 375px) { .stats-grid { grid-template-columns: 1fr; /* single column only on truly tiny screens */ } } /* ─── F4. PROJECTS SECTION ──────────────────────────────────────────── */ @media (max-width: 992px) { .projects-grid { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 768px) { .projects-section { padding: 70px 0; } } @media (max-width: 480px) { .projects-section { padding: 48px 0; } .project-img { height: 200px; } .project-body { padding: 22px 20px; } } /* ─── F5. QUOTE SECTION ─────────────────────────────────────────────── */ @media (max-width: 768px) { .quote-section { padding: 70px 0; } } @media (max-width: 480px) { .quote-section blockquote { font-size: clamp(1.1rem, 4vw, 1.4rem); } .quote-mark { font-size: 4.5rem; } } /* ─── F6. PARTNERS SECTION ──────────────────────────────────────────── */ @media (max-width: 768px) { .partners-section { padding: 40px 0; } .partners-logos { gap: 20px 28px; } .partner-item img { max-height: 35px; max-width: 90px; } } @media (max-width: 480px) { .partners-logos { gap: 16px 20px; } .partner-item { min-width: 100px; padding: 12px 16px; } } /* ─── F7. CTA SECTION ───────────────────────────────────────────────── */ @media (max-width: 768px) { .cta-section { padding: 60px 0; } } @media (max-width: 600px) { .cta-buttons { flex-direction: column; align-items: center; gap: 12px; } .cta-buttons .btn, .cta-buttons a { width: 100%; max-width: 320px; text-align: center; justify-content: center; } } /* ─── F8. INNER PAGE HERO (shared across about, regions, work, etc.) ── */ @media (max-width: 768px) { .page-hero { height: 300px; margin-top: 72px; } .page-hero-content { padding: 0 var(--container-pad) 32px; } } @media (max-width: 480px) { .page-hero { height: 260px; } } /* ─── F9. PAGE CONTENT BODY ─────────────────────────────────────────── */ @media (max-width: 768px) { .page-content { padding: 48px 0 72px; } .photo-grid { grid-template-columns: 1fr; gap: 12px; } .photo-grid img { height: 200px; } } @media (max-width: 480px) { .page-content { padding: 36px 0 60px; } .contact-form { padding: 24px 16px; } } /* ============================================================================= G. ABOUT PAGE (about.html) ============================================================================= */ /* ─── G1. PAGE HERO ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .about-hero { height: 360px; } .about-hero-content { padding: 0 var(--container-pad) 40px; } } @media (max-width: 600px) { .about-hero { height: 320px; } .about-hero-nav-pills { display: none; /* mobile tab nav replaces these */ } .about-hero-content p { font-size: 0.95rem; } } @media (max-width: 375px) { .about-hero { height: 280px; } } /* ─── G2. HISTORY SECTION ─────────────────────────────────────────────── */ @media (max-width: 960px) { .history-grid { grid-template-columns: 1fr; gap: 32px; } .history-img-deco { display: none; } .history-badge { left: 0; right: auto; } } @media (max-width: 600px) { .history-img { max-height: 280px; } .history-timeline { padding-left: 24px; } } /* ─── G3. MISSION & VISION ─────────────────────────────────────────────── */ @media (max-width: 960px) { .mv-cards { grid-template-columns: 1fr; gap: 16px; } } /* ─── G4. CORE VALUES ──────────────────────────────────────────────────── */ @media (max-width: 960px) { .values-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .values-grid { grid-template-columns: 1fr; } } /* ─── G5. PARTNERS (about page) ─────────────────────────────────────────── */ @media (max-width: 600px) { .partner-chip { min-width: 110px; height: 66px; padding: 12px 16px; } .partner-quote { padding: 28px 22px; } } /* ─── G6. TEAM ─────────────────────────────────────────────────────────── */ @media (max-width: 960px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 375px) { .team-grid { grid-template-columns: 1fr; } } /* ─── G7. JOIN US / CAREERS ──────────────────────────────────────────────── */ @media (max-width: 960px) { .join-grid { grid-template-columns: 1fr; gap: 14px; } .join-cta-box { grid-template-columns: 1fr; padding: 36px 28px; gap: 24px; } .join-cta-actions { flex-direction: row; flex-wrap: wrap; gap: 12px; } } @media (max-width: 600px) { .join-cta-box { padding: 28px 20px; } .join-cta-actions { flex-direction: column; width: 100%; } .btn-idf-primary, .btn-idf-outline-white, .btn-idf-outline-navy { justify-content: center; width: 100%; } } /* ─── G8. HIDE-MOBILE UTILITY ──────────────────────────────────────────── */ /* Base: hidden (set in about.css). Revealed at tablet+ */ @media (min-width: 769px) { .hide-mobile { display: block; } } /* ============================================================================= H. REGIONS PAGE (regions.html) ============================================================================= */ /* ─── H1. PAGE HERO ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .regions-hero { height: 360px; } .regions-hero-content { padding: 0 var(--container-pad) 40px; } } @media (max-width: 600px) { .regions-hero { height: 320px; } .regions-hero-pills { display: none; /* mobile tab nav replaces hero pills */ } } @media (max-width: 375px) { .regions-hero { height: 280px; } } /* ─── H2. STORY CARD — magazine spread ─────────────────────────────── */ /* ≤ 960px: stack vertically (image on top, content below) */ @media (max-width: 960px) { .story-card, .story-card--flip { grid-template-columns: 1fr; grid-template-rows: 360px 1fr; min-height: unset; border-radius: var(--r-xl, 28px); overflow: hidden; /* re-apply now that emblem stays inside */ } /* Image always on top regardless of flip class */ .story-img-panel, .story-card--flip .story-img-panel { grid-column: 1; grid-row: 1; min-height: 360px; border-radius: 0; } /* Content card below */ .story-content, .story-card--flip .story-content { grid-column: 1; grid-row: 2; margin-left: 0; margin-right: 0; padding: 32px 28px; border-radius: 0; box-shadow: none; border-top: 3px solid var(--idf-blue, #2E6DB4); /* accent replaces pseudo */ } /* Pseudo accent line — invisible at this size (replaced by border-top) */ .story-content::before { display: none; } /* Badge group: uniform top-left on both card orientations */ .image-badge-group, .story-card--flip .image-badge-group { top: 14px; left: 14px; right: auto; flex-direction: row; } /* Photo label: left-align on both */ .story-card--flip .story-photo-label { right: auto; left: 28px; text-align: left; } /* SVG emblem: left-align on both */ .story-card--flip .county-svg-emblem { right: auto; left: 24px; } } /* ≤ 768px: reduce image row */ @media (max-width: 768px) { .story-card, .story-card--flip { grid-template-rows: 300px 1fr; } .story-img-panel, .story-card--flip .story-img-panel { min-height: 300px; } .story-content, .story-card--flip .story-content { padding: 28px 24px; } } /* ≤ 600px: compact mobile */ @media (max-width: 600px) { .story-card, .story-card--flip { grid-template-rows: 240px 1fr; } .story-img-panel, .story-card--flip .story-img-panel { min-height: 240px; } .story-content, .story-card--flip .story-content { padding: 24px 18px 20px; } .image-badge-group, .story-card--flip .image-badge-group { top: 10px; left: 10px; gap: 7px; } .story-stats { flex-direction: column; } .story-stat { border-right: none; border-bottom: 1px solid var(--idf-border, rgba(27,46,75,0.1)); } .story-stat:last-child { border-bottom: none; } .story-actions { flex-direction: column; gap: 10px; } .btn-idf-primary, .btn-idf-outline-navy { justify-content: center; width: 100%; } } @media (max-width: 375px) { .story-card, .story-card--flip { grid-template-rows: 200px 1fr; } .story-img-panel, .story-card--flip .story-img-panel { min-height: 200px; } } /* ============================================================================= I. OUR WORK PAGE (ourwork.html) ============================================================================= */ /* ─── I1. PAGE HERO ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .work-hero { height: 360px; } .work-hero-content { padding: 0 var(--container-pad) 40px; } } @media (max-width: 600px) { .work-hero { height: 320px; } .work-hero-pills { display: none; } } @media (max-width: 375px) { .work-hero { height: 280px; } } /* ─── I2. PROJECT BANNER ─────────────────────────────────────────────── */ @media (max-width: 960px) { .work-banner { height: 320px; border-radius: var(--r-xl, 28px); } .work-banner-meta { padding: 0 24px 28px; } } @media (max-width: 600px) { .work-banner { height: 260px; border-radius: var(--r-lg, 18px); } .work-banner-donors { display: none; /* donor logos too small to be legible on mobile */ } .work-banner-meta { padding: 0 16px 24px; } } /* ─── I3. PROJECT BODY (narrative + metrics) ─────────────────────────── */ /* ≤ 960px: stack narrative above metrics */ @media (max-width: 960px) { .work-body { grid-template-columns: 1fr; margin-top: 0; } .work-narrative { border-radius: 0; padding: 36px 28px; box-shadow: none; border: 1px solid var(--idf-border, rgba(27,46,75,0.1)); border-top: none; border-bottom: none; } .work-narrative::before { top: 0; } .work-metrics { border-radius: 0 0 var(--r-xl, 28px) var(--r-xl, 28px); padding: 32px 28px; flex-direction: row; flex-wrap: wrap; gap: 0; } .work-metrics-title { width: 100%; } .work-metric { flex: 1 1 calc(50% - 12px); padding: 14px 12px; } .work-facts { flex-direction: row; flex-wrap: wrap; } .work-fact { flex: 1 1 calc(50% - 6px); } } @media (max-width: 768px) { .work-narrative { padding: 28px 22px; } .work-metrics { padding: 24px 22px; } } @media (max-width: 600px) { .work-narrative { padding: 24px 18px; } .work-metrics { flex-direction: column; border-radius: 0 0 var(--r-lg, 18px) var(--r-lg, 18px); padding: 20px 18px; } .work-metric { flex: unset; width: 100%; padding: 12px 0; } .work-fact { flex: unset; width: 100%; } .work-actions { flex-direction: column; gap: 10px; } .btn-idf-primary, .btn-idf-outline-navy { justify-content: center; width: 100%; } } /* ─── I4. GALLERY STRIP ──────────────────────────────────────────────── */ @media (max-width: 960px) { .work-gallery { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .work-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } } @media (max-width: 375px) { .work-gallery { grid-template-columns: 1fr; } } /* ============================================================================= J. RESOURCES PAGE (resources.html) ============================================================================= */ /* ─── J1. PAGE HERO ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .res-hero { min-height: 360px; } .res-hero-content { padding: 0 var(--container-pad) 40px; } .res-hero-stats { flex-wrap: wrap; gap: 10px; } .res-hero-stat { min-width: 90px; padding: 10px 14px; } } @media (max-width: 600px) { .res-hero { min-height: 300px; } .res-hero-jumps { display: none; /* mobile tab nav replaces these */ } .res-hero-stats { gap: 8px; } } /* ─── J2. NEWSLETTER GRID ────────────────────────────────────────────── */ @media (max-width: 960px) { .res-nl-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .res-nl-grid { grid-template-columns: 1fr; } } /* ─── J3. GALLERY GRID ──────────────────────────────────────────────── */ @media (max-width: 960px) { .res-photo-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .res-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } @media (max-width: 375px) { .res-photo-grid { grid-template-columns: 1fr; } } /* ─── J4. VIDEO GRID ────────────────────────────────────────────────── */ @media (max-width: 960px) { .res-video-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .res-video-grid { grid-template-columns: 1fr; } } /* ─── J5. FILTER BAR ─────────────────────────────────────────────────── */ @media (max-width: 600px) { .res-filter-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; display: flex; flex-wrap: nowrap; gap: 8px; padding-bottom: 4px; /* avoid clipping box-shadows */ } .res-filter-bar::-webkit-scrollbar { display: none; } .res-filter-btn { flex-shrink: 0; white-space: nowrap; } } /* ─── J6. SECTION HEADER ROW ─────────────────────────────────────────── */ @media (max-width: 600px) { .res-section-header { flex-direction: column; align-items: flex-start; gap: 10px; } } /* ─── J7. LIGHTBOX ───────────────────────────────────────────────────── */ /* Lightbox arrows: smaller on mobile but still 44px touch target */ @media (max-width: 600px) { .res-lightbox-prev, .res-lightbox-next { width: 40px; height: 40px; min-width: 40px; min-height: 44px; /* touch target height */ } /* Reset arrow translateX hover on mobile — avoid layout jitter on tap */ .res-lightbox-prev:hover { transform: translateY(-50%); } .res-lightbox-next:hover { transform: translateY(-50%); } } /* ============================================================================= K. CONTACT PAGE (contact.html) ============================================================================= */ /* ─── K1. PAGE HERO ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .contact-hero { height: 360px; } .contact-hero-content { padding: 0 var(--container-pad) 40px; } } @media (max-width: 600px) { .contact-hero { height: 300px; } .contact-hero-pills { display: none; } } /* ─── K2. CONTACT GRID ───────────────────────────────────────────────── */ /* ≤ 1024px: single column, form on top */ @media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } /* Form first on mobile (higher priority for users wanting to contact) */ .contact-info-col { order: 2; } .contact-form-col { order: 1; } } /* ≤ 768px: compact main layout */ @media (max-width: 768px) { .contact-main { padding: 40px clamp(1rem, 4vw, 1.5rem) 60px; } .contact-form-col { padding: 32px 24px 28px; } /* Form row: 2-column → 1-column */ .form-row { grid-template-columns: 1fr; gap: 0; } /* Map info card: hidden on mobile (info shown in header instead) */ .contact-map-info-card { display: none; } .contact-map-header { padding: 0 var(--container-pad) 24px; flex-direction: column; align-items: flex-start; } .contact-map-wrap { height: 320px; } /* Trust strip: stack vertically */ .contact-trust-inner { flex-direction: column; align-items: flex-start; gap: 14px; } .contact-trust-divider { display: none; } } /* ≤ 600px: further mobile compression */ @media (max-width: 600px) { .contact-main { padding: 32px 1rem 48px; } .contact-form-col { padding: 24px 16px 20px; border-radius: var(--r-lg, 18px); } .contact-map-section { padding: 48px 0 0; } .contact-map-wrap { height: 280px; } /* Success state action buttons */ .success-actions { flex-direction: column; align-items: stretch; gap: 10px; } .btn-success-primary, .btn-success-outline { justify-content: center; width: 100%; } } /* ─── K3. CONTACT CARDS (info column) ───────────────────────────────── */ @media (max-width: 480px) { .contact-card { padding: 18px 16px; } .contact-card-icon { width: 40px; height: 40px; font-size: 0.9rem; } .contact-hours { padding: 18px 16px; } } /* ============================================================================= L. SHARED / UTILITY OVERRIDES ============================================================================= */ /* ─── L1. SECTION HEADERS ─────────────────────────────────────────────── */ @media (max-width: 600px) { .section-header h2 { font-size: clamp(1.5rem, 5vw, 2rem); } .section-header p { font-size: 0.9rem; } } /* ─── L2. BUTTONS — ensure 44px touch target on mobile ──────────────── */ @media (max-width: 768px) { .btn, .btn-primary, .btn-outline-white, .btn-outline-navy, .btn-idf-primary, .btn-idf-outline-white, .btn-idf-outline-navy { min-height: 44px; padding-block: 11px; } .cta-btn { min-height: 44px; padding-block: 10px; } } /* ─── L3. SCROLL REVEAL — disable transform on reduce-motion ──────────── */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-up, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; } .reveal.visible, .reveal.revealed, .reveal-up.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; } } /* ─── L4. FOCUS-VISIBLE — maintain across all viewports ──────────────── */ *:focus-visible { outline: 2px solid var(--idf-green, #3A7D44); outline-offset: 3px; border-radius: 3px; } /* ─── L5. PRINT — basic print reset ──────────────────────────────────── */ @media print { .site-header, .mobile-drawer, .sidenav, .mobile-tab-nav, .back-to-top, .hamburger-btn, .hero-actions, .cta-section, .contact-map-section, .res-hero-jumps { display: none !important; } body { font-size: 11pt; color: #000; background: #fff; } .hero, .about-hero, .work-hero, .regions-hero, .res-hero, .contact-hero { height: auto; min-height: unset; margin-top: 0; } }