/* ============================================================================ responsive.css — Mainland website global responsive layer ---------------------------------------------------------------------------- ONE separate file for ALL pages (home, about, ventures, projects, contact, testimonials, vanshvana) + shared header & footer. - Loaded LAST in every page , so it cleanly overrides page styles. - Only max-width media queries (<= 1366px). Large desktop (> 1366px) stays EXACTLY as designed — nothing changed there. Handles: layout grids + TYPOGRAPHY (h1/h2/p) + SECTION spacing. NOTE on headings: the site has NO bare h3{}/h4{} rules — every h3/h4 is class-scoped and some h4/h3 are small uppercase labels (~0.9rem). So we do NOT blanket-resize h3/h4 (that would blow up those labels). h3/h4 already use small clamp mins (~1.3rem) and read fine on mobile. We fix the real culprits: oversized h1 (clamp min up to 4rem) and h2. Device tiers: Laptop <= 1366 | Mini laptop <= 1200 | Tablet <= 1024 Mini tablet <= 768 | Mobile <= 576 | Small mobile <= 400 ============================================================================ */ /* Safety: never allow sideways scrolling; keep media fluid. */ html, body { overflow-x: hidden; max-width: 100%; } img, video, iframe { max-width: 100%; } /* ======================================================================== */ /* LAPTOP (<= 1366px) */ /* ======================================================================== */ @media (max-width: 1366px) { .nav-in { width: 90%; } .wrap { max-width: 1180px; } /* Slightly calmer section rhythm on smaller laptops */ .section { padding: clamp(64px, 8vw, 120px) 0; } } /* ======================================================================== */ /* MINI LAPTOP (<= 1200px) */ /* ======================================================================== */ @media (max-width: 1200px) { .nav-in { width: 94%; } .menu { gap: 26px; } .section { padding: clamp(58px, 7vw, 100px) 0; } /* Hero headings begin to scale down */ .hero h1, .ab-hero h1, .vt-hero h1, .pj-hero h1, .v-hero h1 { font-size: clamp(3rem, 6.2vw, 4.8rem); } .phil-values { gap: 10px; } .pjc-grid, .ct-channels-grid, .ct-projects-grid { gap: 18px; } } /* ======================================================================== */ /* TABLET (<= 1024px) */ /* ======================================================================== */ @media (max-width: 1024px) { header#home{padding-top: 80px;} .ppl-card{flex-wrap: wrap;} .nav-in { width: 92%; padding-left: 22px; padding-right: 22px; } .section { padding: clamp(52px, 6.5vw, 84px) 0; } /* ---- Typography: FIXED sizes for tablet + mobile (per request) ---- Hero title = 35px, Section title = 25px, on ALL pages. These stay constant down to the smallest phones (no further shrinking). */ .hero h1, .ab-hero h1, .vt-hero h1, .pj-hero h1, .v-hero h1, .ct-hero h1 { font-size: 40px; line-height: 46px; } .section h2 { font-size: 35px; line-height: 35px; } .legacy-meta{flex-wrap: wrap; gap: 16px;} .enq-opt{font-size: 14px; padding: 10px 20px;} /* ---- Asymmetric two-column layouts -> single column ---- */ .ab-hero-top, .vt-hero-top, .pj-hero-top, .ct-hero-grid, .vt-explorer, .ct-talk .wrap, .v-loc .wrap, .legacy, .enq-grid, .phil-grid, .ab-future .wrap { grid-template-columns: 1fr; gap: clamp(34px, 5vw, 56px); } /* ---- Four-column grids -> two columns ---- */ .phil-values, .cap-grid, .pj-stats-grid, .v-stats-grid, .ribbon { grid-template-columns: 1fr 1fr; } /* ---- Three-column grids -> two columns ---- */ .pjc-grid, .ct-channels-grid, .ct-projects-grid, .v-plans, .vt-facts, .art-grid { grid-template-columns: 1fr 1fr; } .fgrid { grid-template-columns: 1fr 1fr; gap: 36px; } .legacy-fig img { height: 420px; } } /* ======================================================================== */ /* MINI TABLET (<= 768px) */ /* ======================================================================== */ @media (max-width: 768px) { .section { padding: 54px 0; } .wrap { padding: 0 24px; } .hero { padding-top: 112px; } /* Hero h1 (35px) and Section h2 (25px) stay fixed — set in the <=1024 block. */ p { line-height: 1.7; } /* Three-column rows -> single column */ .pjc-grid, .ct-channels-grid, .ct-projects-grid, .v-plans, .vt-facts, .art-grid { grid-template-columns: 1fr; } .cap-grid { grid-template-columns: 1fr 1fr; } /* Tables / list rows simplify */ .nrow { grid-template-columns: 1fr auto; gap: 12px; } .nrow .ncat, .nrow .ndate { display: none; } .brow { grid-template-columns: 50px 1fr; gap: 14px; } /* .era-track { grid-template-columns: 1fr 1fr; } */ .pj-meta { grid-template-columns: 1fr 1fr; } /* Hero imagery */ .hero-figure img { height: clamp(280px, 50vh, 420px); } .legacy-fig img { height: 360px; } /* Testimonial form: photo + video stack */ .ml-file-row { grid-template-columns: 1fr; } } /* ======================================================================== */ /* MOBILE (<= 576px) */ /* ======================================================================== */ @media (max-width: 576px) { .section { padding: 42px 0; } .wrap { padding: 0 18px; } .hero { padding-top: 100px; } /* Hero h1 (35px) and Section h2 (25px) stay fixed — set in the <=1024 block. */ .hero-sub { font-size: 1rem; } p { font-size: .98rem; line-height: 1.72; } /* Everything multi-column collapses to a single column */ .ribbon, .phil-values, .cap-grid, .pj-stats-grid, .v-stats-grid, .vt-facts, .fgrid { grid-template-columns: 1fr; } .ribbon .cell { border-right: none; } .fgrid { gap: 30px; } /* Hero meta + CTAs stack */ .hero-meta { gap: 14px; } .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn-pill, .hero-cta .btn-line { justify-content: center; } .btn-pill, .btn-line { padding: .9rem 1.5rem; } /* Images */ .hero-figure img { height: clamp(240px, 46vh, 360px); } .legacy-fig img { height: 300px; } .marq span { font-size: 1.4rem; } .mob a { font-size: 2.2rem; } } /* ======================================================================== */ /* SMALL MOBILE (<= 400px) */ /* ======================================================================== */ @media (max-width: 400px) { .wrap { padding: 0 14px; } .nav-in { padding-left: 16px; padding-right: 16px; } .logo img{ height: 28px; } .section { padding: 36px 0; } /* Hero h1 (35px) and Section h2 (25px) stay fixed even here. */ .pj-stats-grid, .v-stats-grid { grid-template-columns: 1fr; } .mob a { font-size: 2rem; } }