/* ========================================================= * BASELINE — Sticky Home — Sticky banner + scrolling sections * ========================================================= * * FILE: 09-scrolly-home.css * VERSION: 1.0 * Last Updated: 2026-03-21 * * SCOPE * ----- * ONLY inside: * .sticky-home * * PURPOSE * ------- * This file defines the visual and layout behavior for: * - A single sticky banner at the top of the page * - A background image layer controlled by JavaScript * - Title and subtitle text layered above the background * - Normal scrolling content sections below the banner * * IMPORTANT * --------- * - NO LOGIC OR STRUCTURAL CHANGES HAVE BEEN MADE. * - This snapshot reflects the working production version. * * ========================================================= */ /* --------------------------------------------------------- * MODULE 09A — GLOBAL CSS VARIABLES * --------------------------------------------------------- * Stores shared values used by the sticky banner system. * --------------------------------------------------------- */ :root{ /* Height of the sticky site header (in pixels). JS calculates this and writes it to this variable. Used to offset the sticky banner below the site header. */ --km-header-h: 0px; } /* --------------------------------------------------------- * MODULE 09B — ROOT WRAPPER FOR THE SCROLLY PAGE * --------------------------------------------------------- * Establishes the base layout context for the scrolly page. * --------------------------------------------------------- */ .sticky-home{ /**** Establish a positioning context for descendants. ****/ position: relative; /**** Never clip scrollable content within this wrapper. ****/ overflow: visible; /**** Remove Elementor container padding that created banner gaps/strip. ****/ padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* --------------------------------------------------------- * MODULE 09C — STICKY BANNER (THE ONLY STICKY ELEMENT) * --------------------------------------------------------- * Controls the top sticky hero/banner area. * --------------------------------------------------------- */ .sticky-home .scrolly-banner{ /**** Stick below the header offset supplied via --km-header-h. ****/ position: sticky; top: var(--km-header-h); /**** Keep banner above section content. ****/ z-index: 999999; /**** Banner sizing. ****/ height: 35vh; width: 100%; /**** Clip background/overlay to the banner bounds. ****/ overflow: hidden; /**** Final layout: flex to control title/sub spacing (Elementor-safe). ****/ display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; /**** Controlled spacing between title and subtitle. ****/ gap: 10px !important; /**** Remove any vertical padding Elementor may add. ****/ padding-top: 0 !important; padding-bottom: 0 !important; /**** Center-align banner text content. ****/ text-align: center; } /* --------------------------------------------------------- * MODULE 09D — BACKGROUND LAYER * --------------------------------------------------------- * JavaScript sets the background-image on this element. * --------------------------------------------------------- */ .sticky-home .scrolly-banner__bg{ /**** Fill the banner as an absolute layer. ****/ position: absolute; inset: 0; /**** Sit behind overlay/text. ****/ z-index: 0; /**** Fallback while image loads. ****/ background-color: #000; /**** Background image behavior. ****/ background-repeat: no-repeat; background-size: cover; background-position: 50% 35%; /**** Neutralize Elementor transforms/transitions that can interfere. ****/ transform: none !important; transition: none !important; /**** Explicit edges (helps when parent has padding quirks). ****/ left: 0; right: 0; } /* --------------------------------------------------------- * MODULE 09E — READABILITY OVERLAY * --------------------------------------------------------- * Adds a subtle overlay between image and text. * --------------------------------------------------------- */ .sticky-home .scrolly-banner::before{ content:""; position:absolute; inset:0; /**** Above BG, below text. ****/ z-index: 1; /**** Subtle gradient for text readability. ****/ background: linear-gradient( 90deg, rgba(0,0,0,.40), rgba(0,0,0,.10) ); /**** Never block interactions. ****/ pointer-events:none; } /* --------------------------------------------------------- * MODULE 09F — BANNER TEXT BASE * --------------------------------------------------------- * Shared positioning / stacking for title and subtitle. * --------------------------------------------------------- */ .sticky-home .scrolly-banner__title, .sticky-home .scrolly-banner__sub{ /**** Above BG + overlay. ****/ position: relative; z-index: 3 !important; /**** Normalize default element margins (Elementor widgets vary). ****/ margin: 0 !important; } /* ========================================================= * MODULE 09G — BANNER TITLE * ========================================================= */ .sticky-home .scrolly-banner .scrolly-banner__title{ font-size: 66px; font-weight: 800; line-height: 1.05; /**** White outline via shadow only. ****/ text-shadow: -1px 0 #fff, 1px 0 #fff, 0 -1px #fff, 0 1px #fff; } /* ========================================================= * MODULE 09H — BANNER SUBTITLE * ========================================================= */ .sticky-home .scrolly-banner .scrolly-banner__sub{ font-size: 36px; font-weight: 400; line-height: 1.2; /**** Keep readable line lengths on large screens. ****/ max-width: 1100px; /**** Panel padding (and a small left bias per your last tweak). ****/ padding: 8px 16px; padding-left: 16px !important; /**** Include padding within max-width. ****/ box-sizing: border-box; /**** Translucent panel. ****/ background-color: rgba(255, 255, 255, 0.2); border-radius: 12px; /**** Subtitle panel behavior (current baseline). ****/ display: inline-block; width: fit-content !important; /**** Keep the inline-block centered as a flex child. ****/ align-self: center !important; /**** Grey outline via shadow only. ****/ text-shadow: -1px 0 #999, 1px 0 #999, 0 -1px #999, 0 1px #999; /**** Allow wrapping. ****/ white-space: normal !important; text-align: center !important; } /* --------------------------------------------------------- * MODULE 09I — SCROLLY SECTIONS * --------------------------------------------------------- * Normal-flow content sections that scroll under the banner. * --------------------------------------------------------- */ .sticky-home .scrolly-section{ position: relative; z-index: 1; background: #fff; } /* --------------------------------------------------------- * MODULE 09J — SECTION INNER WRAPPER * --------------------------------------------------------- * Controls width and spacing for section content. * --------------------------------------------------------- */ .sticky-home .scrolly-section__inner{ max-width: 1100px; margin: 0 auto; /**** Base padding. ****/ padding: 32px 16px; /**** Reduce vertical gap between scrolly steps by 40px: original bottom intent was 48px; reduced to 8px. ****/ padding-bottom: 8px; box-sizing: border-box; } /* --------------------------------------------------------- * MODULE 09K — SECTION HEADINGS BELOW THE BANNER * --------------------------------------------------------- */ .sticky-home .km_section_heading{ width: 100%; margin: 0; } /* --------------------------------------------------------- * MODULE 09L — CANONICAL LEFT ALIGNMENT FOR SCROLLY SECTIONS * --------------------------------------------------------- * Normalizes alignment / padding for inner section content. * --------------------------------------------------------- */ .sticky-home .scrolly-section__inner > *{ margin-left: 0; margin-right: 0; } .sticky-home .scrolly-section__inner .km_section_heading{ width: 100%; margin-left: 0; margin-right: 0; margin-top: 0 !important; margin-bottom: 0px !important; padding-left: 0; padding-right: 0; box-sizing: border-box; } .sticky-home .scrolly-section__inner .elementor-widget, .sticky-home .scrolly-section__inner .elementor-widget-container{ padding-left: 0; padding-right: 0; } .sticky-home .scrolly-section__inner .km_welcome__inner .km_section_heading{ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .sticky-home .scrolly-section__inner .km_welcome__inner{ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: 100%; box-sizing: border-box; } .sticky-home .scrolly-section__inner > .km_section_heading, .sticky-home .scrolly-section__inner > * > .km_section_heading{ padding-top: 0 !important; } /* --------------------------------------------------------- * MODULE 09M — MOBILE ADJUSTMENTS * --------------------------------------------------------- */ @media (max-width: 767px){ .sticky-home .scrolly-banner{ height: 50vh; } .sticky-home .scrolly-banner__title{ font-size: 16px; } } /* Suppress banner subtitle on mobile + tablet */ @media (max-width: 1024px){ .sticky-home .scrolly-banner .scrolly-banner__sub{ display: none !important; } } /* ========================================================= * MODULE 09N — STICKY BANNER LOGO * ========================================================= */ .sticky-home .scrolly-banner .km-logo{ position: absolute !important; left: 5vh !important; top: 50% !important; transform: translateY(-50%) !important; /**** Above BG (0) and overlay (1), below title/sub (3). ****/ z-index: 2 !important; /**** Never affect banner layout. ****/ margin: 0 !important; } /* Prevent Elementor padding inside banner from pushing logo in */ .sticky-home .scrolly-banner, .sticky-home .scrolly-banner .elementor-widget, .sticky-home .scrolly-banner .elementor-widget-container{ padding-left: 0 !important; } /* Hide banner logo below 1620px viewport width */ @media (max-width: 1619px){ .sticky-home .km-logo{ display: none !important; } } /* Final subtitle padding tweak */ .sticky-home .scrolly-banner .scrolly-banner__sub{ padding: 8px 24px !important; padding-left: 32px !important; } /* ========================================================= * MODULE 09O — KMA DAILY QUOTE: HERO STYLING * Last Updated: 2026-03-03 * ========================================================= */ .km-daily-quote{ color: #ffff00; text-align: center; font-style: italic; font-style: bold; background-color:rgba(ff,ff,ff,0.2);; border-radius: 12px; padding: 12px; } .km-daily-quote__text{ font-size: 20px; line-height: 1.5; } .km-daily-quote__author{ margin-top: 6px; font-size: 14px; opacity: 0.9; }