/* ═══════════════════════════════════════════════════════════════════════ SHELL LAYOUT — Single source of truth All page-frame, scroll-containment, and body-overflow rules live here. No other CSS file should set overflow on html/body or position the .page-scroll-container / .page-shell children. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. Font import (shared across all pages) ── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap'); /* ── 2. Global resets ── */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; margin: 0; overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { height: 100%; margin: 0; overflow: hidden; } /* ── 3. Page Shell (fixed-frame layout) ────────────────────────────── Used by: corporate (1corporate), IC (ic) Structure: body > .page-shell > { header, #global-banner-stack, .page-scroll-container, footer } Everything is absolutely-positioned inside the fixed shell. ──────────────────────────────────────────────────────────────────── */ .page-shell { position: fixed; inset: 0; z-index: 9998; isolation: isolate; overflow: hidden; } .page-shell > header, .page-shell > #global-banner-stack, .page-shell > .page-scroll-container, .page-shell > footer { position: absolute; left: 0; right: 0; } .page-shell > header { top: 0; z-index: 30; transform: translateY(0); } .page-shell > header.header-hidden { transform: translateY(calc(-1 * var(--header-height))); } .page-shell > #global-banner-stack { top: var(--header-height, 0px); z-index: 20; transform: translateY(var(--header-offset, 0px)); } .page-shell > .page-scroll-container { top: calc(var(--header-height) + var(--banner-stack-height)); bottom: calc(var(--footer-height) + var(--header-offset, 0px)); z-index: 10; transform: translateY(var(--header-offset, 0px)); } .page-shell > footer { bottom: 0; z-index: 30; transform: none; -webkit-transform: none; } /* ── 4. Bare Scroll Container ──────────────────────────────────────── Used by: ~25 division base templates that have .page-scroll-container directly on body without a .page-shell wrapper. ──────────────────────────────────────────────────────────────────── */ .page-scroll-container { position: fixed; top: calc(var(--header-height) + var(--banner-stack-height)); right: 0; bottom: calc(var(--footer-height) + var(--header-offset, 0px)); left: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; transform: translateZ(0) translateY(var(--header-offset, 0px)); transition: transform 220ms cubic-bezier(.2, .9, .2, 1); } /* ── 5. Home-page overrides ── */ body.home-page .page-scroll-container { background-color: #000; } body.home-page .page-scroll-container main { position: relative; z-index: 1; background-color: var(--soft-white); min-height: 100%; } /* ── 6. Main-Scroll variant ────────────────────────────────────────── Used by: Capital Markets (learmondcapitalmarkets) A flexbox-based scrollable main with hidden scrollbar. ──────────────────────────────────────────────────────────────────── */ #main-scroll { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; min-height: 0; border: 0 !important; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } #main-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; /* Chrome/Safari/Blink */ } /* ── 7. Natural-scroll opt-out ─────────────────────────────────────── Pages that don't use any shell / scroll container and need normal document-flow scrolling. Add one of these classes to . Used by: MSMG (html.msmg-html), Daily Motivation, Postgres/Data, Entertainment, or any page that sets html.natural-scroll. ──────────────────────────────────────────────────────────────────── */ html.msmg-html, html.natural-scroll { overflow-y: visible !important; overflow-x: hidden !important; height: auto !important; } html.msmg-html body, html.natural-scroll body { overflow-y: visible !important; overflow-x: hidden !important; height: auto !important; } /* Also neutralize .page-scroll-container when inside a natural-scroll page */ html.natural-scroll .page-scroll-container { position: static !important; overflow: visible !important; transform: none !important; height: auto !important; } /* ── 8. Utilities ── */ .no-scroll { overflow-y: hidden !important; }