/* ============================================================ HEC Sticky Sidebar Layout Companion CSS for the "HEC Sticky Sidebar Layout" pattern. All rules fenced to .hec-sticky-layout so nothing bleeds. Add to the metro-block-theme stylesheet via GitLab. ============================================================ */ /* --- The sticky mechanics --------------------------------- */ /* Columns are flex children that stretch to full row height by default, which kills position:sticky. align-self:flex-start shrinks the sidebar column to its content so it has room to travel. Both parts are required. */ .hec-sticky-layout .hec-sticky-sidebar { position: -webkit-sticky; position: sticky; top: 120px; /* adjust to clear the site header; bump up if a sticky header overlaps */ align-self: flex-start; } /* Sticky breaks if any ancestor between the sidebar and has overflow hidden/auto/clip. If it refuses to stick, that's the first thing to check in the inspector. */ /* --- Sidebar card styling (ADS-style details panel) -------- */ .hec-sticky-layout .hec-sidebar-card { background: #f5f5f5; border-top: 4px solid #E2231A; padding: 28px 24px; } .hec-sticky-layout .hec-sidebar-label { font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: #1F2327; margin: 0 0 2px; } .hec-sticky-layout .hec-sidebar-value { font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 1.5; color: #1F2327; margin: 0 0 14px; } .hec-sticky-layout .hec-sidebar-divider { border: none; border-top: 1px solid #d9d9d9; margin: 0 0 14px; width: 100%; } .hec-sticky-layout .hec-sidebar-cta .wp-block-button__link { background-color: #E2231A; color: #ffffff; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 0; width: 100%; text-align: center; } .hec-sticky-layout .hec-sidebar-cta .wp-block-button__link:hover { background-color: #1F2327; color: #ffffff; } /* --- Mobile: stack and unstick ----------------------------- */ /* Core columns stack below 782px. A pinned sidebar on mobile would just cover the content, so turn sticky off. */ @media (max-width: 781px) { .hec-sticky-layout .hec-sticky-sidebar { position: static; align-self: stretch; } }