/* ============================================================= HZL Microsite — Mobile Responsive Overrides Breakpoints: 768px — tablet landscape 640px — tablet portrait / large phone ← primary mobile 480px — mid phone (iPhone SE, etc.) 375px — small phone (iPhone 13 mini) ============================================================= */ /* ================================================================ 1. GLOBAL — spacing, overflow guard, font scaling ================================================================ */ @media (max-width: 640px) { :root { --gutter: 1.25rem; /* tighter side padding */ } /* Horizontal-scroll guard. MUST be `clip`, never `hidden`/`auto`: `overflow-x:hidden` forces computed `overflow-y:auto`, which turns into a scroll container and silently breaks `position:sticky` for every pinned cinematic section. `clip` guards the X axis without creating a scroll container. */ body { overflow-x: clip; } } /* ================================================================ 1b. STICKY-PIN FIX — override shared `overflow-x:hidden !important` shared/home-header.css sets `html,body{overflow-x:hidden!important}` at ≤767px. That makes a scroll container and breaks `position:sticky`, so every pinned cinematic section (number theater, about, business-snapshot, investment-case, business-excellence, esg) un-pins and its content scrolls away (renders blank). `clip` blocks horizontal scroll WITHOUT creating a scroll container, restoring pins. Loads after home-header.css → equal specificity, later !important wins. ================================================================ */ @media (max-width: 767px) { body { overflow-x: clip !important; } } /* ================================================================ 2. HERO — video canvas section ================================================================ */ @media (max-width: 640px) { /* Shorter scroll track on mobile (faster reach) */ .hero { height: 200vh; } /* Pull-quote text — smaller on mobile */ .hero__text--b p { font-size: clamp(1rem, 4vw, 1.25rem); padding: 0 1.5rem; } /* Hide progress bar on mobile (too small to be useful) */ .hero__progress { display: none; } } /* ================================================================ 3. ABOUT — sticky reset + proper mobile flow ================================================================ */ /* Mobile-only CTA hidden on desktop */ .about__cta--mobile { display: none; } @media (max-width: 640px) { /* 250vh scroll travel so video zoom works on mobile */ .about { height: 250vh !important; overflow: clip !important; background: transparent !important; } /* Sticky pin — JS controls video zoom */ .about__sticky { position: sticky !important; top: 0 !important; height: 100svh !important; min-height: 0 !important; overflow: hidden !important; display: block !important; padding: 0 !important; gap: 0 !important; } /* Hide marquee — too wide for mobile */ .about__marquee { display: none !important; } /* Header: top-left, below nav */ .about__header { position: absolute !important; top: calc(var(--bar-h, 56px) + 1.25rem) !important; left: 1.25rem !important; right: auto !important; bottom: auto !important; transform: none !important; max-width: calc(100vw - 2.5rem) !important; width: auto !important; z-index: 2 !important; } /* Hide original CTA from header; mobile CTA is in footer */ .about__header .about__cta { display: none !important; } .about__tagline { font-size: clamp(18px, 5.5vw, 26px) !important; letter-spacing: 0.01em !important; line-height: 1.15 !important; } /* Video window: JS controls position/size */ .about__img-window { position: absolute !important; transform: none !important; aspect-ratio: auto !important; } /* Footer: body copy + mobile CTA at bottom. Track the video's floored top (max(30vh,250px) in about.js) so the body copy never collides with the video on short phones. */ .about__footer { position: absolute !important; top: calc(max(30vh, 250px) + 220px) !important; left: 1.25rem !important; right: 1.25rem !important; bottom: auto !important; transform: none !important; width: auto !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } .about__desc { font-size: 17px !important; line-height: 1.6 !important; color: #ffffff !important; } /* Mobile CTA shown inside footer */ .about__cta--mobile { display: inline-flex !important; align-self: flex-start !important; } /* Stats — 2-column grid */ .about__stats { gap: 0.65rem; } } /* ================================================================ 4. INVESTMENT CASE — show hero content without full scroll ================================================================ */ @media (max-width: 640px) { /* Override the initial JS-set opacity:0 so title is readable */ .inv-case__hero-content { opacity: 1 !important; transform: none !important; } /* Remove the hero video-scrub canvas on mobile — video currentTime scrubbing doesn't work on phones (it shows a frozen frame), so the canvas adds no value. Show the intro text on an on-brand navy gradient instead. (inv-case.js also skips loading the video <=640.) */ .inv-case__hero-bg { display: none !important; } /* De-pin the intro hero on mobile so the headline + card deck read as ONE continuous scroll instead of two separate full-screen pinned phases. The hero becomes a compact gradient header that flows straight into the cards below. */ .inv-case__hero-track { height: auto !important; } .inv-case__sticky-hero { position: relative !important; top: auto !important; height: auto !important; min-height: 52vh !important; background: linear-gradient(160deg, #0a3a5c 0%, #06183a 55%, #040214 100%) !important; align-items: center !important; padding: calc(var(--utility-h, 0px) + var(--bar-h, 56px) + 2rem) 20px 2.5rem !important; } /* Card deck track — drives the fly-off animation over its pinned phase. Taller = each card gets more scroll to fly off (was 170vh → cards flew past too fast on phones). Only the pinned phase grows; the 100vh sticky scroll-out (matched by SP's -100vh overlap below) is unchanged. */ .inv-case__track { height: 240vh; } /* Kill the redundant blank-navy screen after the cards. The 100vh sticky scrolls out over the last ~100vh of the track while faded to opacity 0, leaving a full empty screen before Strategic Priorities. Pull SP up to overlap that scroll-out so it fills the gap instead of blank navy. */ .sp { margin-top: -100vh !important; } /* The sticky has no background, so SP (pulled up behind it) showed through during the card fly-off. Give it a solid bg: it fully covers SP while the cards animate, then fades out (opacity → 0) to reveal SP at the end — no blank, no overlap. */ .inv-case__sticky { background: #040214 !important; } /* Slightly smaller card deck on mobile */ .inv-case__deck { width: 300px; height: 390px; } .inv-case__card { height: 330px; padding: 22px 24px; } .inv-case__card-title { font-size: 20px; } .inv-case__card-body { font-size: 13px; } .inv-case__card-num { font-size: 52px; } } /* ================================================================ 5. KPI 3D CHART — horizontal scroll + nav fix ================================================================ */ @media (max-width: 640px) { /* Let the chart body scroll horizontally */ .kpi3d { overflow: clip; /* clip pseudo-elements without blocking child scroll */ padding-left: 0; padding-right: 0; } .kpi3d__body { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ padding: 0 0 8px; width: 100%; } .kpi3d__body::-webkit-scrollbar { display: none; } /* Chrome/Safari */ /* Keep fixed-pixel chart sizes but let them scroll */ .kpi3d__unit-row { width: 613px; margin-left: 16px; margin-right: 16px; width: calc(613px + 32px); /* add side breathing room */ } .kpi3d__chart { padding-left: 16px; padding-right: 16px; } /* Heading — slightly smaller on mobile */ .kpi3d__head { padding: 0 1rem 36px; } .kpi3d__heading { font-size: clamp(14px, 4vw, 26px); white-space: normal; line-height: 1.2; } /* Nav: hide side tabs, center only */ .kpi3d__nav { padding: 0 1rem; margin-top: 32px; } .kpi3d__nav-sides { display: none; } .kpi3d__nav-active-name { font-size: 15px; min-width: 100px; } .kpi3d__nav-arrow { width: 36px; height: 36px; } .kpi3d__nav-arrow svg { width: 14px; height: 14px; } /* Axis label smaller */ .kpi3d__axis-label { font-size: 14px; margin-top: 8px; } /* Bar value number smaller */ .kpi3d__bar-val { font-size: 18px; margin-bottom: 6px; } /* Year label smaller */ .kpi3d__bar-yr { font-size: 14px; margin-top: 10px; } /* Remove forced full-viewport height */ .kpi3d { min-height: 0 !important; } /* One chart at a time — hide panel B, expand panel A */ .kpi3d__dual { gap: 0 !important; } .kpi3d__panel:last-child { display: none !important; } .kpi3d__panel:first-child { flex: 1 !important; width: 100% !important; border-right: none !important; padding: 0 0.5rem !important; } /* Chart body — full width, no horizontal scroll needed now */ .kpi3d__body { overflow-x: visible !important; width: 100% !important; } .kpi3d__unit-row { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } .kpi3d__chart { padding-left: 8px !important; padding-right: 8px !important; gap: 6px !important; } .kpi3d__layout .kpi3d__dual .kpi3d__bar-col { width: 36px !important; } } /* ================================================================ 6. QUICK LINKS (below KPI) — font size for mobile ================================================================ */ @media (max-width: 640px) { .kpi-ql { padding: 2.5rem 1.25rem; } .kpi-ql__heading { font-size: 24px; margin-bottom: 1.5rem; } .kpi-ql__card { height: auto; min-height: 68px; font-size: 13px; padding: 1rem 1.25rem; letter-spacing: 0.06em; } } /* ================================================================ 7. CHAIRPERSON — mobile layout: text top, image bottom ================================================================ */ /* Hide mobile-only elements on desktop */ .chairperson__mobile-title { display: none; } .chairperson__mobile-img { display: none; } @media (max-width: 640px) { /* Section: vertical flex, dark bg replaces full-bleed photo */ .chairperson { height: auto !important; min-height: 0 !important; overflow: clip !important; display: flex !important; flex-direction: column !important; background: url('../assets/images/Mobile/CHAIRPERSON CEO CFO_Mobile.png.jpg') center/cover no-repeat !important; position: relative !important; z-index: 10 !important; isolation: isolate !important; } /* (ceo-qna/cfo clip handled in section 7b) */ /* Hide desktop-only visuals */ .chairperson__bg { display: none !important; } .chairperson__overlay { display: none !important; } .chairperson__portrait-wrap { display: none !important; } .chairperson__giant-back { display: none !important; } .chairperson__giant-front { display: none !important; } /* messagewidth: normal flow column */ .messagewidth { height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } /* Mobile title: "Message From / the Chairperson" */ .chairperson__mobile-title { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 2rem 1.25rem 0.75rem !important; } .chairperson__mobile-title span { font-family: 'proxima-nova', var(--font-display), sans-serif !important; font-size: clamp(30px, 9.5vw, 44px) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -0.02em !important; line-height: 1.0 !important; color: rgba(238,242,246,0.92) !important; } /* Bottom content block: pull-quote + name + CTA */ .chairperson__bottom { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; padding: 0.75rem 1.25rem 1.5rem !important; max-width: 100% !important; width: 100% !important; gap: 1rem !important; } .chairperson__quote { font-size: 23px !important; line-height: 1.55 !important; color: #ffffff !important; } /* Mobile image: slightly smaller */ .chairperson__mobile-img { display: block !important; width: 78% !important; height: auto !important; align-self: center !important; flex-shrink: 0 !important; } } /* ================================================================ 7b. CEO Q&A + CFO Statement — same mobile layout as chairperson ================================================================ */ /* Hide mobile-only elements on desktop */ .ceo-qna__mobile-title, .cfo-statement__mobile-title { display: none; } .ceo-qna__mobile-img, .cfo-statement__mobile-img { display: none; } @media (max-width: 640px) { /* Sections: vertical flex, dark bg */ .ceo-qna, .cfo-statement { height: auto !important; min-height: 0 !important; overflow: clip !important; display: flex !important; flex-direction: column !important; background: url('../assets/images/Mobile/CHAIRPERSON CEO CFO_Mobile.png.jpg') center/cover no-repeat !important; position: relative !important; z-index: 10 !important; isolation: isolate !important; } /* Hide desktop-only visuals */ .ceo-qna__bg, .cfo-statement__bg { display: none !important; } .ceo-qna__overlay, .cfo-statement__overlay { display: none !important; } .ceo-qna__portrait-wrap, .cfo-statement__portrait-wrap { display: none !important; } .ceo-qna__giant-back, .cfo-statement__giant-back { display: none !important; } .ceo-qna__giant-front, .cfo-statement__giant-front { display: none !important; } /* Mobile titles */ .ceo-qna__mobile-title, .cfo-statement__mobile-title { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 2rem 1.25rem 0.75rem !important; } .ceo-qna__mobile-title span, .cfo-statement__mobile-title span { font-family: 'proxima-nova', var(--font-display), sans-serif !important; font-size: clamp(30px, 9.5vw, 44px) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -0.02em !important; line-height: 1.0 !important; color: rgba(238,242,246,0.92) !important; } /* Bottom content: in flow */ .ceo-qna__bottom, .cfo-statement__bottom { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; padding: 0.75rem 1.25rem 1.5rem !important; max-width: 100% !important; width: 100% !important; gap: 1rem !important; } .ceo-qna__quote, .cfo-statement__quote { font-size: 16px !important; line-height: 1.45 !important; color: #ffffff !important; } /* Mobile images: full width */ .ceo-qna__mobile-img, .cfo-statement__mobile-img { display: block !important; width: 100% !important; height: auto !important; flex-shrink: 0 !important; } } /* ================================================================ 8. BUSINESS EXCELLENCE — already has 640px, minor tweaks ================================================================ */ @media (max-width: 640px) { .bed-flow__label { font-size: 11px; letter-spacing: 0.14em; } .bed-flow__sub { font-size: 14px; } .bed-flow__cta { font-size: 13px; padding: 0.65rem 1.5rem; } } /* ================================================================ 9. STRATEGIC PRIORITIES — image first, then content ================================================================ */ @media (max-width: 640px) { /* No scroll travel — simple flow */ .sp { height: auto !important; min-height: 0 !important; } .sp__sticky { position: relative !important; top: auto !important; height: auto !important; overflow: visible !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 0 !important; } /* 1st — hero image, full width. Force opacity:1 — the desktop scroll-reveal JS leaves the wrap at opacity:0, and the mobile reset rule (strategic-priorities.css) omitted .sp__hero-wrap, so without this the image area is 210px of blank space instead of the Strategic Priorities photo. */ .sp__hero-wrap { position: relative !important; inset: auto !important; width: 100% !important; height: 56vw !important; order: 1 !important; opacity: 1 !important; pointer-events: none !important; } .sp__hero-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } .sp__hero-scrim { background: linear-gradient(to bottom, rgba(4,2,20,0.0) 0%, rgba(4,2,20,0.5) 85%, rgba(4,2,20,0.85) 100% ) !important; } /* Hide decorative bg on mobile */ .sp__bg { display: none !important; } /* 2nd — header */ .sp__header { order: 2 !important; position: relative !important; z-index: auto !important; padding: 1.25rem 1.25rem 0.5rem !important; text-align: left !important; } .sp__eyebrow { margin-bottom: 8px !important; } .sp__headline-line { font-size: clamp(1.6rem, 8vw, 2.8rem) !important; line-height: 1.05 !important; } /* 3rd — cards: horizontal swipe slider */ /* Grid: clipping viewport for transform slider */ .sp__grid { order: 3 !important; position: relative !important; z-index: auto !important; display: block !important; overflow: hidden !important; padding: 1rem 0 0.5rem !important; max-width: 100% !important; } /* Track: flex row, animated via transform */ .sp__cards-track { display: flex !important; flex-direction: row !important; gap: 12px !important; padding: 0 1.25rem !important; transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important; will-change: transform !important; } .sp__card { flex-shrink: 0 !important; width: 80vw !important; padding: 1.25rem !important; min-height: 0 !important; grid-column: auto !important; } .sp__card:hover { transform: none !important; } /* Slider nav: prev/next arrows + dots */ .sp__slider-nav { order: 4 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 1.25rem !important; padding: 0 1.25rem 2rem !important; } .sp__nav-btn { width: 42px !important; height: 42px !important; border-radius: 50% !important; border: 1.5px solid rgba(127,185,66,0.7) !important; background: rgba(4,2,20,0.6) !important; color: #7fb942 !important; font-size: 18px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: background 0.2s !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; position: relative !important; z-index: 10 !important; } .sp__nav-btn:active { background: rgba(127,185,66,0.2) !important; } .sp__nav-dots { display: flex !important; gap: 6px !important; align-items: center !important; } .sp__nav-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: rgba(238,242,246,0.3) !important; transition: background 0.2s, transform 0.2s !important; display: block !important; } .sp__nav-dot--active { background: #7fb942 !important; transform: scale(1.4) !important; } /* 5th — CTA as a footer action. Without an explicit order it defaulted to 0 and jumped ABOVE the hero image and header. Sits last now. */ .sp__cta-wrap { order: 5 !important; padding: 0 1.25rem 2.25rem !important; text-align: center !important; } .sp__cta { width: 100% !important; justify-content: center !important; } } /* Hide slider nav on desktop */ .sp__slider-nav { display: none; } /* Desktop: track wrapper transparent to grid — cards act as direct grid items */ .sp__cards-track { display: contents; } /* ================================================================ 10. SUSTAINABILITY — force card visible on mobile ================================================================ */ @media (max-width: 640px) { /* Make card fully visible on mobile without needing deep scroll */ .sustain__card { transform: none !important; border-radius: 0 !important; opacity: 1 !important; } .sustain__overlay { opacity: 1 !important; transform: none !important; } .sustain__stat { opacity: 1 !important; transform: none !important; } /* 50% black patch over background image */ .sustain__img-scrim { background: rgba(0, 0, 0, 0.50) !important; } /* Remove text shadows */ .sustain__title, .sustain__body, .sustain__stat-label { text-shadow: none !important; } /* Shorten the track since animation is bypassed */ .sustain__track { height: 100svh; } .sustain__sticky { position: relative; height: auto; min-height: 100svh; } } /* ================================================================ 10b. STORIES THAT SHAPE HZL 2.0 — mobile horizontal slider ================================================================ */ @media (max-width: 640px) { .cs--stories .cs__inner { padding-inline: 0; overflow: visible; } .cs--stories { overflow-x: clip; } .cs--stories .cs__header { padding-inline: 1.5rem; margin-bottom: 1.25rem; } .cs--stories .cs__row--three { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; gap: 10px !important; height: auto !important; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; padding-left: 1rem; } .cs--stories .cs__card { flex: 0 0 calc(100vw - 3.5rem) !important; width: calc(100vw - 3.5rem) !important; height: 68vw !important; border-radius: 6px !important; } /* Nav bar */ .cs-stories-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding: 1.1rem 0 0.5rem; } .cs-stories-nav__btn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(127, 185, 66, 0.45); background: rgba(127, 185, 66, 0.08); color: #7fb942; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, border-color 0.2s; -webkit-tap-highlight-color: transparent; } .cs-stories-nav__btn:disabled { opacity: 0.28; cursor: default; } .cs-stories-nav__dots { display: flex; gap: 7px; align-items: center; } .cs-stories-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(127, 185, 66, 0.28); border: none; padding: 0; cursor: pointer; transition: background 0.22s, transform 0.22s; -webkit-tap-highlight-color: transparent; } .cs-stories-dot.is-active { background: #7fb942; transform: scale(1.35); } } /* Hide nav on desktop */ @media (min-width: 641px) { .cs-stories-nav { display: none; } } /* ================================================================ 11. CASE STUDIES — already has 560px ================================================================ */ @media (max-width: 560px) { .cs__eyebrow { display: none; } } /* ================================================================ 12. FSG (FOUNDATIONS FOR SUSTAINABLE GROWTH) — card height ================================================================ */ @media (max-width: 640px) { .fsg__card { min-height: 200px; } .fsg__title { font-size: 24px; } /* Disable clip-path hover on touch (JS handles mousemove) */ .fsg__clip-overlay { display: none; } .fsg { padding-block: clamp(2.5rem, 6vw, 4rem); } } /* ================================================================ 13. FOOTER — already has 640px, minor tweaks ================================================================ */ @media (max-width: 640px) { .ft__tagline { font-size: clamp(1.4rem, 6vw, 2rem); } } /* ================================================================ 14. ARC NAV — hide on very small phones to save space ================================================================ */ @media (max-width: 420px) { #arc-nav { display: none; } :root { --arc-nav-h: 0px; } } /* ================================================================ 14b. PRODUCT OPERATIONAL PERFORMANCE — mine terrain section ================================================================ */ @media (max-width: 640px) { .mine__title { font-size: clamp(22px, 6.5vw, 32px) !important; line-height: 1.05 !important; } } /* ================================================================ 15. PRODUCTION PERFORMANCE — bento chart ================================================================ */ @media (max-width: 640px) { .prod-perf__grid { grid-template-columns: 1fr; } } /* ================================================================ 16. AWARDS section — mobile horizontal slider ================================================================ */ @media (max-width: 640px) { .awards__grid { grid-template-columns: 1fr 1fr; gap: 1rem; } /* Remove inner padding so slider goes edge-to-edge */ .aw__inner { padding-inline: 0 !important; } /* Center col: compact, padded */ .aw__center-col { text-align: center; padding: 0 1.5rem 1.25rem; order: unset; } .aw__trophy-wrap { display: none; } /* hide trophy on mobile to save space */ /* Collapse original 3-col layout */ .aw__layout { display: block !important; } .aw__cards-col { display: none !important; /* JS moves cards into track */ } /* JS-built slider wrapper */ .aw__mobile-slider { overflow-x: clip; } .aw__mobile-track { display: flex; flex-direction: row; gap: 10px; padding-left: 1rem; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } /* Cards in slider */ .aw__mobile-track .aw__card { flex: 0 0 calc(100vw - 3.5rem) !important; width: calc(100vw - 3.5rem) !important; opacity: 1 !important; translate: 0 !important; transition: none !important; } /* Nav */ .aw-mob-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding: 1.1rem 0 0.5rem; } .aw-mob-nav__btn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(127, 185, 66, 0.45); background: rgba(127, 185, 66, 0.08); color: #7fb942; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; -webkit-tap-highlight-color: transparent; } .aw-mob-nav__btn:disabled { opacity: 0.28; cursor: default; } .aw-mob-nav__dots { display: flex; gap: 7px; align-items: center; } .aw-mob-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(127, 185, 66, 0.28); border: none; padding: 0; cursor: pointer; transition: background 0.22s, transform 0.22s; -webkit-tap-highlight-color: transparent; } .aw-mob-dot.is-active { background: #7fb942; transform: scale(1.35); } } @media (min-width: 641px) { .aw-mob-nav { display: none; } } /* ================================================================ 17. GROUP STRUCTURE (.gs) ================================================================ */ @media (max-width: 640px) { /* Section: allow content to breathe, remove clip on last row */ .gs { overflow: clip !important; /* clips visually but doesn't break layout */ padding-bottom: 4rem !important; } /* Layout: stack to single column */ .gs__layout { flex-direction: column !important; padding: 0 1.25rem !important; gap: 1.5rem !important; } /* Left panel full width */ .gs__left { flex: none !important; max-width: 100% !important; min-height: 0 !important; width: 100% !important; } /* Title: wrap properly */ .gs__title { font-size: 26px !important; white-space: normal !important; } /* Right panel full width */ .gs__right { width: 100% !important; flex: none !important; } /* Viewport: auto height, visible so labels don't clip */ .gs__viewport { height: auto !important; overflow: visible !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1.5rem !important; } /* Cluster: vertical stack, no 3D */ .gs__cluster { position: relative !important; width: 100% !important; height: auto !important; transform: none !important; perspective: none !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: flex-start !important; gap: 12px !important; } /* Tilt wrapper: transparent passthrough */ .gs__tilt { position: static !important; transform: none !important; display: contents !important; } /* Center circle: full-width row, sandwiched between share% and sub logos */ .gs__center { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: 220px !important; height: 220px !important; order: 1 !important; flex: 0 0 100% !important; display: flex !important; justify-content: center !important; margin: 0.5rem 0 !important; } .gs__circle { width: 220px !important; height: 220px !important; padding: 24px 0 !important; } .gs__c-name { font-size: 18px !important; } .gs__c-top, .gs__c-bot { font-size: 11px !important; } /* Ripple rings: scale down */ .gs__ripple--1 { width: 360px !important; height: 360px !important; } .gs__ripple--2 { width: 280px !important; height: 280px !important; } .gs__ripple--pulse { width: 260px !important; height: 260px !important; } /* Ring: display:contents so share/sub nodes become direct cluster children */ .gs__ring { display: contents !important; } /* Nodes: cancel JS-injected absolute positioning */ .gs__node { position: relative !important; left: 0 !important; top: 0 !important; transform: none !important; width: 96px !important; height: 96px !important; } /* Share % tiles: order 0 → appear ABOVE the circle */ .gs__node--share { order: 0 !important; flex: 0 0 96px !important; } /* Sub logo tiles: order 2 → appear BELOW the circle */ .gs__node--sub { order: 2 !important; flex: 0 0 96px !important; cursor: pointer !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; box-shadow: none !important; } /* Share tiles: no shadow on mobile */ .gs__node--share { box-shadow: none !important; } /* Labels: anchored to the node (position:relative above), sit in row-gap space */ .gs__node-label { position: absolute !important; top: calc(100% + 7px) !important; left: 50% !important; transform: translateX(-50%) !important; width: 96px !important; font-size: 10px !important; line-height: 1.3 !important; white-space: normal !important; text-align: center !important; } /* Detail card: bottom sheet on mobile */ .gs__card { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-width: 100% !important; border-radius: 20px 20px 0 0 !important; transform: translateY(110%) !important; max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1100 !important; /* Push content below the close button (36px tall at top:16px = ends at 52px) */ padding-top: 64px !important; } .gs.is-open .gs__card, .gs__card.is-open { transform: translateY(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Close button: move to LEFT side — chatbot widget covers x=53–363, button at x=16 is safe */ .gs__card-close { left: 16px !important; right: auto !important; top: 16px !important; z-index: 1101 !important; } /* Backdrop: semi-transparent overlay, above chatbot, below card */ #gsBackdrop { display: none; position: fixed; inset: 0; z-index: 1050; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .gs.is-open ~ * #gsBackdrop, body.gs-open #gsBackdrop { display: block; } /* Show backdrop when gs has is-open — use JS class on body */ #gsBackdrop.is-visible { display: block; } } /* ================================================================ 18. ESG SECTION ================================================================ */ @media (max-width: 640px) { .esg__grid { grid-template-columns: 1fr; } } /* ================================================================ 19. KPI NUMBER THEATER (horizontal scroll, giant numbers) ================================================================ */ @media (max-width: 640px) { /* ── Number sizing ─────────────────────────────────────── */ .kpi__slide-value { font-size: clamp(2.8rem, 13vw, 4.2rem) !important; letter-spacing: -0.02em; } .kpi__slide-prefix { font-size: clamp(0.9rem, 3.5vw, 1.5rem) !important; } .kpi__slide-unit { font-size: clamp(0.75rem, 3vw, 1.2rem) !important; } /* Body — centred, pulled up slightly so it sits between the two images */ .kpi__slide-body { width: 88% !important; top: 54% !important; } /* Figure row */ .kpi__slide-figure { flex-wrap: nowrap; align-items: flex-end; justify-content: center; max-width: 100%; } /* Headline — center the whole block (not line-by-line) so all lines start at the same left edge, giving a clean aligned look */ .kpi__headline { text-align: center !important; } .kpi__headline-text { display: inline-block !important; /* shrinks to widest line width */ text-align: left !important; /* all lines share the same left edge */ font-size: clamp(1.6rem, 9.5vw, 4rem) !important; white-space: normal; letter-spacing: -0.03em !important; max-width: 96vw; width: auto; padding: 0; } /* ── Image A — above the number, clear of fixed header (~80px) ── */ .kpi__img--a { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; top: 11% !important; /* was 5% — now clears the ~80px fixed header */ bottom: auto !important; width: 78% !important; /* slightly wider for visual impact */ height: 27% !important; border-radius: 12px !important; } /* Show faces — workers are in upper-mid portion of the image */ .kpi__img--a img { object-position: center 35% !important; } /* Soft fade on image A */ .kpi__img--a::after { background: linear-gradient( to bottom, rgba(255, 255, 255, 0.15) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.20) 100% ) !important; } /* ── Image B — below the number, nudged up from very bottom ── */ .kpi__img--b { display: block !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; top: auto !important; bottom: 8% !important; /* was 5% — gives bottom breathing room */ width: 78% !important; height: 22% !important; border-radius: 12px !important; } /* Soft fade on image B */ .kpi__img--b::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.15) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.20) 100% ); pointer-events: none; } /* Hide image C */ .kpi__img--c { display: none !important; } /* ── Footer (label + badge) ────────────────────────────── Desktop keeps the label on one nowrap line beside the badge. On a phone that long label ("HIGHEST-EVER MINED METAL PRODUCTION") overflows the viewport and clips on both edges. Stack the footer and let the label wrap. */ .kpi__slide-footer { flex-direction: column; gap: 0.55rem; padding-top: 0.7rem; } .kpi__slide-label { white-space: normal !important; font-size: clamp(0.82rem, 3.4vw, 1.05rem) !important; letter-spacing: 0.06em; max-width: 100%; } /* Bottom chrome: hide the "next slide" hint on phones — its long label (e.g. "Second-best Refined Metal Production") collides with the centre dot indicators. The dots already convey position, so the counter (bottom-left) + dots (centre) are enough. */ .kpi__next-hint { display: none !important; } } /* ================================================================ 20. GENERAL SECTION HEADINGS — scale down on mobile ================================================================ */ @media (max-width: 640px) { /* Any leftover 35px headings should scale on smallest screens */ h1, h2, h3 { word-break: break-word; overflow-wrap: break-word; } } /* Extra small — 375px and below */ @media (max-width: 390px) { .kpi3d__bar-val { font-size: 16px; } .kpi3d__bar-yr { font-size: 12px; } .fsg__card-title { font-size: 0.95rem; } .bed-flow__title { font-size: 28px; } } /* ================================================================ 21. GLOBAL — white-space overflow guards (nowrap on mobile) ================================================================ */ @media (max-width: 900px) { /* Board title bleeds intentionally at large sizes but must wrap below 900px */ .bod__title { white-space: normal !important; font-size: clamp(22px, 4vw, 35px); } } @media (max-width: 768px) { /* Case studies section heading must wrap */ .cs__heading { white-space: normal !important; font-size: clamp(22px, 5.5vw, 35px); } } /* ================================================================ 22. HEADER — tablet (768px–1024px) tightening ================================================================ */ @media (max-width: 1024px) and (min-width: 769px) { .nav-bar { height: 62px; } .brand__logo--vedanta { height: 22px; } .brand__logo--hzl { height: 34px; } .brand__divider { height: 30px; } .cta-download { font-size: 0.78rem; padding: 0.5rem 0.9rem; } .saver-toggle { display: none; } } /* Narrow header — drop Download button at 900px */ @media (max-width: 900px) { .nav-bar__inner { gap: 0.75rem; } } /* ================================================================ 22b. HEADER — mobile (≤768px): full brand lockup Show Vedanta + divider + HZL + toggle + play + hamburger ================================================================ */ @media (max-width: 768px) { /* Nav bar height */ .nav-bar { height: 56px !important; } .nav-bar__inner { padding-inline: 0.9rem !important; gap: 0 !important; justify-content: space-between !important; } /* ── Brand lockup: Vedanta | HZL ───────────────────────── */ .nav-bar__inner .brand__logo--vedanta, .nav-bar__inner .brand__divider { display: block !important; /* override header.css 560px hide */ } .brand { gap: 0.35rem !important; } .brand__logo--vedanta { height: 15px !important; } .brand__logo--hzl { height: 28px !important; } .brand__divider { height: 22px !important; } /* ── Right actions: toggle + play + hamburger ─────────── */ .nav-actions { gap: 0.4rem !important; } /* Show saver toggle */ .nav-actions .saver-toggle { display: flex !important; align-items: center; gap: 0; } .saver-toggle__label { display: none !important; } .saver-toggle__img { width: 30px !important; height: 15px !important; } /* Show TTS play button */ .nav-actions .tts-toggle { display: flex !important; align-items: center; gap: 0; padding: 0 2px; } .tts-toggle span:not(.tts-toggle__icon) { display: none !important; } .tts-toggle__icon { width: 26px !important; height: 26px !important; } } /* ================================================================ 23. HERO — extreme small (320px–375px) ================================================================ */ @media (max-width: 375px) { .hero { height: 180vh; } .hero__title { font-size: clamp(1.85rem, 9vw, 2.8rem); } .hero__text--a { bottom: 8%; } .hero__scroll-cue { bottom: 1.25rem; } } /* ================================================================ 24. BUSINESS SNAPSHOT — tablet (641px–768px) ================================================================ */ @media (max-width: 768px) { .bs__headline { font-size: clamp(18px, 5vw, 30px) !important; } .bs__slide-cat { font-size: 13px; letter-spacing: 0.14em; } } @media (max-width: 480px) { .bs__stage1 { top: 52%; padding: 0 16px; } .bs__ops { padding: 0 12px; } } /* ================================================================ 25. CASE STUDIES — tablet split-header stack + mobile fixes ================================================================ */ @media (max-width: 860px) { .cs__header--split { flex-direction: column; align-items: flex-start; gap: 1rem; } .cs__header-rhs { max-width: 100%; } .cs__heading { font-size: clamp(22px, 4.5vw, 32px); } } @media (max-width: 640px) { .cs { padding: 3.5rem 0 3rem; } .cs--scoop { padding: 2rem 0 1.5rem; } .cs__header { margin-bottom: 1.5rem; gap: 0.75rem; } .cs__card--full { height: 300px; } } @media (max-width: 480px) { /* Scoop slider: show 1 card almost full-width */ .scoop-card { flex: 0 0 calc(92vw - 2rem); } .cs--scoop .cs__inner { padding: 0 0.85rem; } .scoop-slider { margin-top: 1.25rem; } .cs__header-desc { font-size: 13px; } } @media (max-width: 375px) { .cs__card--full { height: 250px; } .scoop-card__body { padding: 0.75rem 0.9rem 1rem; } .scoop-card__title { font-size: 12px; } } /* ================================================================ 26. ESG — social tabs & overlay on mobile ================================================================ */ @media (max-width: 640px) { /* Tighten the left face padding so social tabs don't get squeezed */ .esg__face-l--social { padding: calc(var(--utility-h, 0px) + var(--bar-h, 76px) + 0.5rem) 1.25rem 0.75rem !important; gap: 0.55rem !important; } /* Social tabs: compact on mobile */ .social-tabs { gap: 0.5rem; } .social-tabs__grid { gap: 0.35rem; } .social-tabs__btn { padding: 0.4rem 0.55rem; border-radius: 8px; } .social-tabs__btn-num { font-size: 0.48rem; } .social-tabs__btn-name { font-size: 9.5px; } /* Photo overlay: readable on small image face */ .social-photo-overlay { padding: 0 1rem; bottom: 7rem; } .social-photo-overlay__sub { font-size: 18px; margin-bottom: 0.55rem; line-height: 1.2; } } @media (max-width: 375px) { .social-tabs__btn-name { font-size: 9px; } .social-photo-overlay__sub { font-size: 15px; } } /* ================================================================ 27. STRATEGIC PRIORITIES — tablet (641px–960px) ================================================================ */ @media (max-width: 960px) and (min-width: 641px) { .sp__sticky { padding-inline: clamp(20px, 3vw, 40px); gap: 14px; } .sp__headline { font-size: clamp(24px, 3.5vw, 42px); } } /* ================================================================ 28. SUSTAINABILITY — tablet layout ================================================================ */ @media (max-width: 768px) and (min-width: 641px) { .sustain__track { height: 150svh; } .sustain__card { border-radius: 8px; } } /* ================================================================ 29. BOARD OF DIRECTORS — tablet & mobile nav positioning ================================================================ */ @media (max-width: 640px) { .bod { min-height: auto; padding: 1.5rem 0 2rem; } .bod__header { padding-top: 1.75rem; } .bod__footer { padding-bottom: 0.5rem; } /* Nav arrows already positioned in board.css; just ensure touch size */ .bod__nav { width: 40px; height: 40px; } } /* ================================================================ 30. AWARDS — tablet tweaks (641px–860px) ================================================================ */ @media (max-width: 860px) and (min-width: 641px) { .aw__card__title { font-size: 0.95rem; } } /* ================================================================ 31. FSG — inner padding on mobile ================================================================ */ @media (max-width: 480px) { .fsg__inner { padding-inline: 1rem; } .fsg__card-title { font-size: 1rem; } .fsg__title { font-size: 22px; } } /* ================================================================ 32. FOOTER — 480px and 375px tweaks ================================================================ */ @media (max-width: 480px) { .ft__inner { padding: 3.5rem 1.25rem 2rem; } .ft__grid { gap: 1.5rem; } .ft__col-title { margin-bottom: 1rem; } .ft__social-row { gap: 0.65rem; } .ft__social-btn { width: 40px; height: 40px; } /* min 44px touch target */ .ft__bottom { gap: 0.75rem; } .ft__legal { gap: 0.9rem; } } @media (max-width: 375px) { .ft__tagline { font-size: 1.2rem; } .ft__desc { font-size: 0.76rem; } } /* ================================================================ 33. WIDGETS — Zincky chat on very small screens ================================================================ */ @media (max-width: 375px) { .zincky-chat { width: calc(100vw - 1.5rem); right: 0; bottom: 0; border-radius: 16px 16px 0 0; } .zincky-widget { right: 0.5rem; bottom: 0.5rem; } .zincky-chat__messages { height: 180px; } .fab-cluster { right: 0.5rem; bottom: 0.5rem; } .a11y-widget { left: 0.5rem; bottom: 0.5rem; } } /* ================================================================ 34. NAVIGATION DRAWER — small phone polish ================================================================ */ @media (max-width: 375px) { .cine-item__label { font-size: 26px; } .mobile-drawer__head { padding: 1.1rem 1.25rem; } .mobile-drawer__body { padding: 0 1.25rem; } .mobile-drawer__utility { padding: 0.75rem 1.25rem; } .mobile-drawer__cta { padding: 0.5rem 1.25rem 1.25rem; } } /* ================================================================ 35. GROUP STRUCTURE — 375px polish ================================================================ */ @media (max-width: 375px) { .gs__center { width: 180px !important; height: 180px !important; } .gs__circle { width: 180px !important; height: 180px !important; } .gs__c-name { font-size: 15px !important; } .gs__ring { grid-template-columns: repeat(3, 80px) !important; column-gap: 8px !important; } .gs__node { width: 80px !important; height: 80px !important; } .gs__node-label { width: 80px !important; font-size: 9px !important; } } /* ================================================================ 36. KPI THEATER — tablet (641px–900px) ================================================================ */ @media (max-width: 900px) and (min-width: 641px) { .kpi__slide-value { font-size: clamp(4rem, 10vw, 7rem) !important; } .kpi__headline-text { font-size: clamp(3.5rem, 11vw, 6rem) !important; } } /* ================================================================ 37. PRODUCTION PERFORMANCE — tablet ================================================================ */ @media (max-width: 900px) { .prod-perf__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .prod-perf__grid { grid-template-columns: 1fr; } } /* ================================================================ 38. INVESTMENT CASE — tablet (641px–900px) ================================================================ */ @media (max-width: 900px) and (min-width: 641px) { .inv-case__deck { width: 360px; height: 440px; } .inv-case__card { height: 380px; } } /* ================================================================ 39. CHAIRPERSON / CEO / CFO — 480px and 375px polish ================================================================ */ @media (max-width: 480px) { /* chairperson/ceo-qna/cfo-statement bottoms are in flow on mobile — handled in sections 7/7b */ .chairperson__quote { font-size: 20px !important; line-height: 1.2 !important; } .ceo-qna__quote, .cfo-statement__quote { font-size: 16px !important; line-height: 1.45 !important; } } @media (max-width: 375px) { .chairperson__line, .ceo-qna__line, .cfo-statement__line { font-size: clamp(22px, 7vw, 36px) !important; } } /* ================================================================ 40. ARC NAV — tablet positioning ================================================================ */ @media (max-width: 768px) and (min-width: 421px) { #arc-nav { bottom: 0.5rem; } } /* ================================================================ 40b. BUSINESS SNAPSHOT — shorter on phones Desktop is 500vh for slow number pacing; that's ~5 screens on a phone. Shorten to ~3 screens. business-snapshot.js computes the About→BS dissolve fraction from the live height, so this is safe. */ @media (max-width: 640px) { .bs { height: 320vh; } } /* ================================================================ 41. PREVENT HORIZONTAL SCROLL — global catch-all ================================================================ */ @media (max-width: 768px) { /* Any section that hasn't been individually clipped */ .aw, .fsg, .bod, .kpi, .bs, .cs, .cs--scoop, .sp, .esg { max-width: 100vw; overflow-x: clip; } /* Ensure all images are capped */ img { max-width: 100%; height: auto; } /* Prevent wide pre-formatted text from blowing out layout */ pre, code { white-space: pre-wrap; word-break: break-word; } } /* ================================================================ 42. ULTRA-SMALL — 320px baseline safety net ================================================================ */ @media (max-width: 320px) { :root { --gutter: 0.9rem; } body { font-size: 15px; } h1 { font-size: clamp(1.4rem, 8vw, 2rem) !important; } h2 { font-size: clamp(1.2rem, 7vw, 1.7rem) !important; } h3 { font-size: clamp(1rem, 6vw, 1.4rem) !important; } .about__cta, .aw__cta, .bed-flow__cta, .bod__cta, .bs__cta, .ceo-qna__cta, .cfo-statement__cta, .esg__cta, .sp__card-cta, .cs__view-all, .sustain__cta { font-size: 0.65rem; padding: 0.55em 1.1em; } .zincky-chat { width: calc(100vw - 1rem); } .scoop-card { flex: 0 0 calc(96vw - 1.5rem); } } /* ================================================================ 43. FSG "OUR APPROACH" — Mobile slider ================================================================ */ @media (max-width: 640px) { .fsg { overflow-x: clip; } .fsg__inner { padding-inline: 0 !important; z-index: 602 !important; } .fsg__header { padding-inline: 1.25rem; } .fsg__grid { display: flex !important; flex-direction: row !important; gap: 10px !important; padding-left: 1rem; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .fsg__card { flex: 0 0 calc(100vw - 3.5rem) !important; width: calc(100vw - 3.5rem) !important; min-height: 72vw; } .fsg-mob-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.25rem; padding-bottom: 0.5rem; position: relative; z-index: 601; } .fsg-mob-nav__btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(127, 185, 66, 0.45); background: transparent; color: #7fb942; cursor: pointer; } .fsg-mob-nav__dots { display: flex; align-items: center; gap: 8px; } .fsg-mob-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(127, 185, 66, 0.28); border: none; padding: 0; cursor: pointer; transition: transform 0.2s, background 0.2s; } .fsg-mob-dot.is-active { background: #7fb942; transform: scale(1.35); } } @media (min-width: 641px) { .fsg-mob-nav { display: none; } }