/* ============================================================= Metabud Media — Mobile responsive overrides The prototype was built desktop-first with inline JSX styles (which always win over external CSS). React renders inline styles in kebab-case, so all attribute selectors below target the kebab-case form. !important is required to beat inline. ============================================================= */ /* overflow-x:clip contains stray horizontal overflow WITHOUT creating a scroll container — so `position: sticky` (the header) keeps working. (overflow-x:hidden here would silently break sticky.) */ html, body { overflow-x: clip; } /* Hamburger + mobile dropdown menu: hidden on desktop, shown ≤900px. .mb-burger toggle button, .mb-mobile-menu dropdown, .mb-hide-mobile = desktop-only els. */ .mb-burger { display: none; } @media (min-width: 901px) { .mb-mobile-menu { display: none !important; } } /* ============================================================ TABLET + MOBILE (<= 900px) ============================================================ */ @media (max-width: 900px) { /* Collapse every inline grid to one column. minmax(0, 1fr) — NOT 1fr — so a wide/nowrap child can't inflate the track past the viewport (1fr = minmax(auto,1fr) grows to max-content; minmax(0,1fr) lets the track shrink and content wrap). */ [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; } /* Reset spans on grid ITEMS. A tile spanning 4 tracks on a 1-column grid makes the grid auto-create 3 zero-width implicit columns, so the spanning bento tiles (AI / Social / add-on) get crushed into a narrow strip. NOTE: the browser serializes the JSX's gridColumn + gridRow into the `grid-area` shorthand, so we must target that. grid-area:auto resets every placement to a single cell. */ [style*="grid-area"], [style*="grid-column"], [style*="grid-row"] { grid-area: auto !important; } /* Section / header / footer max-width containers tighten */ section > div[style*="max-width"], header > div[style*="max-width"], footer > div[style*="max-width"] { padding-left: 20px !important; padding-right: 20px !important; } /* Section vertical padding token — tightened section gaps on mobile (R2 + F6). !important is required: Page.jsx sets --section-pad-y as a JS inline style on (112px), which would otherwise beat this stylesheet rule. */ :root { --section-pad-y: 36px !important; } /* Known padding patterns from JSX */ [style*="padding: 72px 32px"], [style*="padding: 96px 32px"], [style*="padding: 104px 32px"], [style*="padding: 112px 32px"], [style*="padding: 128px 32px"] { padding: 36px 20px !important; } /* Section tops/bottoms that hardcode a different first value (case-studies cards top, insights articles top) — tighten them to match. */ [style*="padding: 56px 32px"] { padding-top: 36px !important; } /* Hero section — tight bottom so there's no dead space below the stat strip (R2) */ [style*="padding: 32px 32px 16px"] { padding: 32px 20px 12px !important; } [style*="padding: 64px 32px"] { padding: 32px 20px 48px !important; } /* Generic: stack a horizontal flex row vertically on mobile (e.g. the Process timeline ribbon, so its CTA doesn't get clipped). */ .mb-stack-mobile { flex-direction: column !important; align-items: flex-start !important; } /* Header: hide center nav + desktop CTA, show hamburger */ header nav { display: none !important; } .mb-burger { display: inline-flex !important; } .mb-hide-mobile { display: none !important; } header > div[style*="grid-template-columns"] { grid-template-columns: 1fr auto !important; gap: 12px !important; padding: 12px 14px !important; } /* HERO — collapse panel-on-image to stacked, kill min-height */ section[id="top"] > div { min-height: 0 !important; } section[id="top"] > div > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; padding: 36px 22px !important; gap: 28px !important; min-height: 0 !important; align-items: start !important; } /* Hero stat card: full width, smaller padding */ section[id="top"] div[style*="rgba(20, 19, 15, 0.55)"], section[id="top"] div[style*="rgba(20,19,15,0.55)"] { min-width: 0 !important; width: 100% !important; padding: 18px !important; } /* Hero h1: keep readable */ section[id="top"] h1 { font-size: clamp(40px, 11vw, 64px) !important; line-height: 1.02 !important; } /* Hero headline keeps its explicit 4-line structure on mobile (matches desktop): "Where Growth Is / Engineered / And Brands Are / Evolved". (We intentionally do NOT hide its
s.) */ /* Subheadline still reflows naturally on mobile — its desktop 3-line
s would wrap awkwardly on a narrow screen. */ section[id="top"] p br { display: none !important; } /* Manifesto pillar boxes ran very long in 2-up — tighten padding, number, and type so they stay compact (R3) */ .mb-manifesto-cards { gap: 10px !important; } .mb-manifesto-cards > div { padding: 16px !important; gap: 14px !important; } .mb-manifesto-cards > div > span:first-child { font-size: 30px !important; min-width: 0 !important; } .mb-manifesto-cards h3 { font-size: 15px !important; } .mb-manifesto-cards p { font-size: 12.5px !important; line-height: 1.5 !important; } /* FAQ question row: keep the "+" toggle inline — the generic grid-collapse above would otherwise stack it onto its own line (R12) */ .mb-faq-q { grid-template-columns: 1fr auto !important; gap: 16px !important; } /* Case-studies video hero: centering + logo-only handled in the base styles; here just tighten padding/type and keep the country line on ONE line on mobile (R18) */ .mb-case-hero { padding: 48px 22px !important; gap: 18px !important; } .mb-case-hero h1 { font-size: clamp(32px, 9vw, 56px) !important; max-width: none !important; } .mb-case-mark { height: 60px !important; } .mb-hero-regions { font-size: 11px !important; letter-spacing: 2px !important; white-space: nowrap !important; } /* Stat-strip below hero: 4-up → 2-up. minmax(0,1fr) lets wide cells (e.g. the long "HUL · Nykaa · Dentsu International" pedigree) wrap instead of pushing the track past the viewport. */ section[id="top"] > div + div[style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 0 !important; padding: 22px 0 !important; } section[id="top"] > div + div[style*="repeat(4"] > div { border-left: 0 !important; padding: 0 18px !important; } /* Clean vertical divider between the two mobile stat columns (mirrors the desktop strip) so the gutter reads as structure, not dead space. */ section[id="top"] > div + div[style*="repeat(4"] > div:nth-child(2n) { border-left: 1px solid var(--line) !important; } /* Other 4-up stat strips (e.g. About founder) → 2-up. Placed after the generic grid-collapse rule so it wins on equal specificity. */ .mb-stats-2up { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 0 !important; } .mb-stats-2up > div { border-left: 0 !important; } /* Multi-card sections → 2-up on mobile (less endless scrolling). Declared after the generic collapse rule so it wins on equal specificity. */ .mb-cards-2up { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; align-items: stretch !important; } /* Service tiles are content-rich — tighten padding + type so 2-up fits. */ .mb-services-2up > div { padding: 16px !important; } .mb-services-2up h3 { font-size: 18px !important; line-height: 1.12 !important; } .mb-services-2up p { font-size: 12.5px !important; line-height: 1.5 !important; } /* Footer: brand full-width, link columns 2-up; let the long email wrap. */ .mb-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 24px !important; } .mb-footer-brand { grid-column: 1 / -1 !important; } /* Contact column full-width so the long email sits on one line instead of breaking mid-domain in a half-width column (R13) */ .mb-footer-contact { grid-column: 1 / -1 !important; } .mb-footer-grid a { overflow-wrap: anywhere; } /* "The system" (Process) steps → 2-up. Keep the seamless border-divided look (gap:0): left divider only on the right column, tighten type. */ .mb-process-2up { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; } .mb-process-2up > li { border-left: 0 !important; padding: 22px 16px !important; } .mb-process-2up > li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.12) !important; } .mb-process-2up h3 { font-size: 24px !important; } .mb-process-2up p { font-size: 13px !important; } /* Marquee items: shrink display type so the row doesn't dwarf the page */ div[style*="animation: marquee"] > div { font-size: 20px !important; gap: 10px !important; } div[style*="animation: marquee"] { gap: 36px !important; } /* Tweaks panel: hide on mobile — desktop-only authoring tool */ .twk-panel { display: none !important; } /* Floating WhatsApp button: tighten offsets */ a[href*="wa.me"][style*="position: fixed"] { right: 16px !important; bottom: 16px !important; padding: 12px 16px !important; font-size: 13px !important; } /* Sticky elements release on mobile (e.g. problem-section left rail) */ [style*="position: sticky"] { position: static !important; } /* …except the floating header, which stays pinned (higher specificity wins) */ header[style*="position: sticky"] { position: sticky !important; top: 0 !important; } /* Bento-tile illustrations must scale */ svg[width] { max-width: 100% !important; height: auto !important; } /* Buttons/links: allow wrapping. index.html sets a global `a, button { white-space: nowrap }`, which forces wide buttons (e.g. FAQ "Ask Anshuman") to overflow their column. Override it. */ a, button { white-space: normal !important; } /* Sections that switch to flex on mobile: ensure padding */ section[style*="ink-900"] > div { padding: 56px 20px !important; } } /* ============================================================ PHONE (<= 640px) — tighter still ============================================================ */ @media (max-width: 640px) { [style*="padding: 72px 32px"], [style*="padding: 96px 32px"], [style*="padding: 104px 32px"], [style*="padding: 112px 32px"], [style*="padding: 128px 32px"] { padding: 26px 16px !important; } [style*="padding: 56px 32px"] { padding-top: 26px !important; } section > div[style*="max-width"], header > div[style*="max-width"], footer > div[style*="max-width"] { padding-left: 16px !important; padding-right: 16px !important; } :root { --section-pad-y: 26px !important; } /* Header CTA: compact */ header a[href*="wa.me"] { padding: 9px 12px !important; font-size: 12px !important; } header a[href*="wa.me"] svg { display: none; } /* Hero type drops one more step */ section[id="top"] h1 { font-size: clamp(34px, 10vw, 52px) !important; } section[id="top"] p { font-size: 16px !important; } /* Stat strip — shrink ONLY the count-up numbers. The 4th cell is the founder-pedigree TEXT ("HUL · Nykaa · Dentsu International") — it must stay small, else 34px makes the unbreakable "International" overflow the narrow column and balloons that cell's height. */ section[id="top"] > div + div[style*="repeat(4"] > div > span[data-count-to] { font-size: 34px !important; } section[id="top"] > div + div[style*="repeat(4"] > div > span:not([data-count-to]):first-child { font-size: 15px !important; line-height: 1.3 !important; } /* Section H2s scale with viewport */ h2[style*="font-display"] { font-size: clamp(32px, 8vw, 48px) !important; } }