/* ============================================================================= * vmi-responsive.css — global responsive base layer (mob-foundation) * ----------------------------------------------------------------------------- * Loaded LAST in every in-scope (after theme.css / normalize.css / * webflow.css / style_rep.css / page CSS), via includes/head-vmi-responsive.php, * so it can override the Webflow/theme cascade without editing exported bundles. * * This is the FOUNDATION other mobile cards build on. Keep it conservative: * - breakpoint + spacing + typography TOKENS (documentation + reuse), * - low-specificity, NON-!important fluid base (overridable defaults), * - media-scoped, NON-DESTRUCTIVE fixed-width neutralization (the only place * !important is used, to reliably win the horizontal-scroll battle on phones). * * Do NOT add page-specific layout here — that belongs to the per-surface cards. * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1. TOKENS — standardized across the whole mobile set. * Breakpoint model: * phone <= 480px * tablet 481 – 1024px * small-desktop 1025 – 1280px * desktop > 1280px * Custom properties are documentation + reuse hooks for later cards; they do * not drive @media queries directly (CSS media queries can't read var()). * -------------------------------------------------------------------------- */ :root { /* breakpoints */ --vmi-bp-phone: 480px; --vmi-bp-tablet: 1024px; --vmi-bp-small-desktop: 1280px; /* spacing scale (rem-based, 4px step at 16px root) */ --vmi-space-3xs: 0.125rem; /* 2px */ --vmi-space-2xs: 0.25rem; /* 4px */ --vmi-space-xs: 0.5rem; /* 8px */ --vmi-space-sm: 0.75rem; /* 12px */ --vmi-space-md: 1rem; /* 16px */ --vmi-space-lg: 1.5rem; /* 24px */ --vmi-space-xl: 2rem; /* 32px */ --vmi-space-2xl: 3rem; /* 48px */ /* fluid typography — scales between the phone and small-desktop breakpoints */ --vmi-font-size-base: clamp(0.875rem, 0.80rem + 0.35vw, 1rem); --vmi-font-size-sm: clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem); --vmi-font-size-lg: clamp(1.125rem, 1.00rem + 0.6vw, 1.375rem); --vmi-font-size-h1: clamp(1.5rem, 1.20rem + 1.5vw, 2.25rem); /* misc responsive knobs for later cards */ --vmi-tap-target-min: 44px; /* WCAG 2.5.5 minimum touch target */ } /* ----------------------------------------------------------------------------- * 2. FLUID BASE — low specificity, NON-!important (overridable defaults). * box-sizing: normalize.css and vmi-shell.css do NOT set a global reset * (only scoped selectors); webflow.css sets `* { box-sizing }` but omits the * ::before/::after pseudo-elements. This completes the reset harmlessly for * both the table-shell stack and the webflow stack. * -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Media + tables never force horizontal scroll on small screens. */ img, svg, video, canvas, table { max-width: 100%; } /* ----------------------------------------------------------------------------- * 3. PHONE breakpoint (<= 480px) — NON-DESTRUCTIVE horizontal-scroll fix. * !important is used ONLY here (media-scoped) so these overrides reliably win * over the Webflow/theme bundles WITHOUT editing those exported files. * -------------------------------------------------------------------------- */ @media (max-width: 480px) { /* Fixed-width Webflow/theme container offenders (verified present in the * bundles) that push content wider than the viewport: * .container -> ehon-energy-1.webflow.css (width:100%; max-width:1440%!) * test-site-de674e.webflow.css * .w-container -> webflow.css (max-width:940px) * .container-2 -> ehon-energy-1.webflow.css (max-width:940px) * .w-layout-grid -> ehon-energy-1.webflow.css / test-site-de674e.webflow.css * Neutralize their fixed widths so they collapse to the viewport on phones. */ .container, .w-container, .container-2, .w-layout-grid { max-width: 100% !important; width: auto !important; } /* Clamp the page to the viewport width. `html` is always safe. For `body`, * shell pages (body.vmi-shell in vmi-shell.css) already set `overflow:hidden` * and own their internal scrolling — do NOT fight that. Only add the * overflow-x fallback to NON-shell pages. */ html { max-width: 100%; overflow-x: hidden; } body:not(.vmi-shell) { max-width: 100%; overflow-x: hidden; } } /* ----------------------------------------------------------------------------- * 4. TABLET breakpoint (<= 1024px) — reserved for later cards. * No 481–1024px-only fixed-width offenders were identified during the * foundation audit (Webflow's own media queries already relax .w-container / * .container-2 to max-width:728px then none in this range). Left intentionally * empty; per-surface mobile cards add their tablet rules here. * -------------------------------------------------------------------------- */ /* @media (max-width: 1024px) { } */