/* This is the critical CSS for the global styles. It should contain only the styles that are necessary for the initial render of the page. The rest of the styles should be in the main.css file, which will be loaded asynchronously after the initial render. Please check the specific css file per template for styles that are specific to each page. */ /* ============================================ CRITICAL CSS — Prevents Cumulative Layout Shift (CLS) Load this inline or as the first stylesheet in ============================================ */ /* ── 1. PAGE BACKGROUND Prevents white flash before main CSS loads ============================================ */ @font-face { font-family: GilroyBold; src: url(../../vendor/fonts/Gilroy-Bold.ttf); font-display: swap; } body { background-color: #F8F9FB; margin: 0; font-family: 'GilroyReg', Arial, Helvetica, sans-serif; } .main-wrapper { background-color: #F8F9FB; } .container{ max-width: 1320px; margin: 0px auto; padding-left: 15px; padding-right: 15px; } .row{ display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } #aside-menu{ visibility: hidden; left: -100vw; overflow: hidden; } .w-100{ width: 100%; } @media (min-width: 1200px) { .col-xl-9 { -ms-flex: 0 0 75%; flex: 0 0 auto; width: 75%; } .col-xl-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } @media (min-width: 768px) { .col-md-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-md-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } .nav-container .menu-bars, .nav-container .menu-user{ font-size: 25px; } /* ── 2. HEADER / NAV — Reserve exact heights nav-container: 90px, top-city-menu: 70px, strip: 5px Without this the whole page shifts down when the header renders ============================================ */ #header-menu { background-color: #000; } #header-menu .nav-container, #header-menu .d-flex.nav-container#desktop-line { height: 90px; display: flex; } .top-city-menu { height: 70px; } .city-header-strip { height: 5px; } .menu-logo img, #header-menu .menu-logo.cust_v_middle img { height: 75px; } .nav-container { padding: 0; color: #fff; justify-content: space-between; } .cust_v_middle { flex: 1 1 0; margin: auto 0; } /* ── 3. SUBCHANNEL / SUBMENU ============================================ */ #subchannel-menu #subchannel-container .channel_subcategory_container { display: flex; } .events-deals-submenu { min-height: 50px; } .channel_subcategory_container span{ margin: 11px 0; } /* ── 3b. HEADER — Mobile height ============================================ */ @media (max-width: 499px) { #header-menu .nav-container, #header-menu .d-flex.nav-container#desktop-line { height: 55px; } .menu-logo img, #header-menu .menu-logo.cust_v_middle img { height: 45px; } } /* ── 4. ARTICLE — Hide/show rules before CSS loads Prevents article meta blocks from flashing then hiding ============================================ */ @media (min-width: 768px) { .article-date-author.d-md-none.d-block, .article-date-author.d-md-none.d-block, .article-share-tags.d-md-none.d-flex { display: none; } } @media (max-width: 767px) { .article-featured-image .col-md-3.d-md-block.d-none { display: none; } } /* ── 5. IMAGES — Prevent reflow when images load Aspect ratio containers ensure space is reserved upfront ============================================ */ /* Featured slider image */ .featured-slider-image { height: 25em; width: 100%; object-fit: cover; object-position: center; border-radius: 10px; display: block; } /* Channel/article card thumbnails — 16:9 aspect ratio placeholder */ .channel-page-thumbnail, .channel-post-thumbnail { aspect-ratio: 16 / 9; background-color: #e8e8e8; background-size: cover; background-position: center; overflow: hidden; width: 100%; } /* Event featured image */ .event-featured-image { height: 40rem; position: relative; background-color: #e8e8e8; border-radius: 10px; overflow: hidden; } /* Article featured image — aspect ratio 8:5 (desktop), 3:2 (mobile) */ .article-featured-image { width: 100%; overflow: hidden; } /* Featured card images — aspect ratio 6:4 */ .featured-card-image, .channel_featured_card img { aspect-ratio: 6 / 4; width: 100%; object-fit: cover; display: block; } /* Event/week thumbnail images */ .week-event-img, .this-week-events .events-list .event-list img, .featured-events .featured-events-list .featured-event-list img { width: 100%; height: 8em; border-radius: 8px; object-fit: cover; display: block; background-color: #e8e8e8; } /* Inline event/article thumbnail images — fixed 85×85 */ .event-thumb img, .article-event-thumb img { width: 85px; height: 85px; border-radius: 5px; object-fit: cover; flex-shrink: 0; } /* ── 5b. CHANNEL LOGO (article_channel_logo) — The confirmed CLS culprit Image has height:70px in article.css but NO width, so browser can't reserve space before the image file arrives. Setting width:auto + fixed height here lets the browser allocate the correct vertical space immediately. ============================================ */ .article_channel_logo, img#article_channel_logo { height: 70px; width: auto; display: block; flex-shrink: 0; } .channel-logo-container { min-height: 70px; display: flex; align-items: center; } @media (max-width: 767px) { .article_channel_logo, img#article_channel_logo { height: 60px; } .channel-logo-container { min-height: 60px; } } /* ── 6. CHANNEL CARDS — Reserve minimum card height Prevents list reflow as lazy-loaded content appears ============================================ */ .channel-post { overflow: visible; min-height: 250px; display: flex; position: relative; } .channel-post-content { border-radius: 10px; overflow: hidden; width: 100%; background: #fff; border: 1px solid #d9d9d9; } /* ── 7. ADS — Reserve space so content doesn't jump when ads inject ============================================ */ .ads { min-height: 90px; } @media (max-width: 767px) { .ads { min-height: 60px; } } /* ── 8. FOOTER PLACEHOLDER Prevents content from jumping up before footer loads ============================================ */ #footer { min-height: 200px; background-color: #1c1c1c; } /* ── 9. FONT FAMILIES — Fallback stack prevents text reflow on font swap Gilroy fonts load async; these fallbacks match their metrics closely ============================================ */ h1, h2, h3, h4, h5, h6 { font-family: 'GilroyBold', Arial, Helvetica, sans-serif; }