/* ============================================== CES Combo Reel Lander Styles MSN-style article lander with infinite scroll Breakpoint Reference (shared between sections): - C1: < 600px (mobile) - C2: 600px - 941px (small tablet) - C3: 942px - 1263px (large tablet) - C4: 1264px - 1575px (small desktop) - C5: > 1575px (large desktop) ============================================== */ /* ============================================== CSS Custom Properties ============================================== */ :root { --ces-tile-radius: 8px; --ces-gap-large: 12px; --ces-bg-secondary: #F2FBFF; } /* ============================================== Main Container ============================================== */ .ces-main { background-color: var(--ces-bg-secondary); min-height: 100vh; } .dark-theme .ces-main { background-color: #111827; } /* ============================================== Navigation - Grid layout for lg breakpoint ============================================== */ @media (min-width: 1024px) and (max-width: 1499px) { .lg\:flex.xxl\:grid { display: grid !important; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; } .lg\:flex.xxl\:grid > *:nth-child(2) { justify-self: center; } } /* CES Background Pattern - Light Mode */ .ces-lander-bg { background-color: var(--ces-bg-secondary); background-image: url('/images/backgrounds/ces-bg-light.svg'); background-repeat: repeat; background-position: center top; min-height: 100vh; } /* CES Background Pattern - Dark Mode */ .dark-theme .ces-lander-bg, .dark .ces-lander-bg { background-color: #111827; background-image: url('/images/backgrounds/ces-bg-dark.svg'); } /* ============================================== Body-Level CES Background Applied to for full-page pattern coverage ============================================== */ body.ces-lander-body { background-color: var(--ces-bg-secondary, #F2FBFF); margin: 0; } .dark body.ces-lander-body, body.ces-lander-body.dark, .dark-theme body.ces-lander-body, body.ces-lander-body.dark-theme { background-color: #111827; } /* ============================================== CES Header with Frosted Glass Effect ============================================== */ .ces-header-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background-color: rgba(242, 251, 255, 0.85) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .dark .ces-header-blur, .dark-theme .ces-header-blur { background-color: rgba(17, 24, 39, 0.85) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } /* ============================================== Section Title ============================================== */ .ces-section-title { font-size: 1.25rem; font-weight: 700; color: #111827; margin-bottom: 1rem; } .dark-theme .ces-section-title { color: #fff; } /* ============================================== SPONSORED CONTENT SECTION MSN-style: 4 tiles, last tile is 2x width All tiles have SAME HEIGHT ============================================== */ .ces-sponsored-section { border-top: 1px solid var(--border-color); } .dark-theme .ces-sponsored-section { border-color: #374151; } /* ============================================== MORE FOR YOU SECTION MSN-style grid with named areas Fixed row height, slot1 is always 2x2 ============================================== */ .ces-mfy-section { padding: 2rem 0; border-top: 1px solid var(--border-color); } .dark-theme .ces-mfy-section { border-color: #374151; } /* More for You Grid Container */ .ces-mfy-grid { display: grid; gap: var(--ces-gap-large); } /* Grid Area Assignments */ .ces-mfy-grid .ces-mfy-tile:nth-child(1) { grid-area: slot1; } .ces-mfy-grid .ces-mfy-tile:nth-child(2) { grid-area: slot2; } .ces-mfy-grid .ces-mfy-tile:nth-child(3) { grid-area: slot3; } .ces-mfy-grid .ces-mfy-tile:nth-child(4) { grid-area: slot4; } /* C1: Mobile - 1 column, 2 tiles */ @media (max-width: 599px) { .ces-mfy-grid { grid-template-columns: 1fr; grid-template-rows: 200px 200px; grid-template-areas: "slot1" "slot2"; } .ces-mfy-grid .ces-mfy-tile:nth-child(n+3) { display: none; } } /* C2: Small tablet - 2 columns, 3 tiles, single row height */ @media (min-width: 600px) and (max-width: 941px) { .ces-mfy-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px; grid-template-areas: "slot1 slot1" "slot2 slot3"; } .ces-mfy-grid .ces-mfy-tile:nth-child(n+4) { display: none; } } /* C3: Large tablet - 1 row, featured 2-wide + 2 regular */ @media (min-width: 942px) and (max-width: 1263px) { .ces-mfy-grid { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px; grid-template-areas: "slot1 slot2 slot3"; } .ces-mfy-grid .ces-mfy-tile:nth-child(n+4) { display: none; } } /* C4: Small desktop - 1 row, featured 2-wide + 3 regular */ @media (min-width: 1264px) and (max-width: 1575px) { .ces-mfy-grid { grid-template-columns: 2fr 1fr 1fr 1fr; grid-template-rows: 240px; grid-template-areas: "slot1 slot2 slot3 slot4"; } .ces-mfy-grid .ces-mfy-tile:nth-child(n+5) { display: none; } } /* C5: Large desktop - 1 row, featured 2-wide + 3 regular */ @media (min-width: 1576px) { .ces-mfy-grid { grid-template-columns: 2fr 1fr 1fr 1fr; grid-template-rows: 260px; grid-template-areas: "slot1 slot2 slot3 slot4"; } .ces-mfy-grid .ces-mfy-tile:nth-child(n+5) { display: none; } } /* ============================================== Mid-Article Taboola Header ============================================== */ [id^="taboola-mid-article-thumbnails-4x1-b"] .trc_rbox_header { display: none !important; } /* ============================================== More for You Tile Styling ============================================== */ .ces-mfy-tile { position: relative; overflow: hidden; border-radius: var(--ces-tile-radius); background: #000; } .ces-mfy-tile a { display: block; height: 100%; text-decoration: none; color: inherit; } /* Main image - absolute fill (direct child of link, not avatar) */ .ces-mfy-tile > a > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .ces-mfy-tile:hover > a > img { transform: scale(1.05); } /* Gradient overlay */ .ces-mfy-tile .ces-tile-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, transparent 100%); color: white; } /* Source row */ .ces-mfy-tile .ces-tile-source { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .ces-mfy-tile .ces-avatar { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; } .ces-mfy-tile .ces-tile-source span { font-size: 11px; color: rgba(255,255,255,0.8); } .ces-mfy-tile .ces-tile-source .ces-dot { color: rgba(255,255,255,0.5); } .ces-mfy-tile .ces-tile-source .ces-timestamp { color: rgba(255,255,255,0.6); } /* Title */ .ces-mfy-tile .ces-tile-title { font-size: 13px; font-weight: 600; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Featured tile (slot1 - 2x2) gets larger styling */ .ces-mfy-tile:first-child .ces-tile-overlay { padding: 16px; } .ces-mfy-tile:first-child .ces-tile-title { font-size: 18px; font-weight: 700; -webkit-line-clamp: 3; } .ces-mfy-tile:first-child .ces-tile-source span { font-size: 12px; } .ces-mfy-tile:first-child .ces-avatar { width: 20px; height: 20px; } /* ============================================== Article Card (for article content) ============================================== */ .ces-article-card { transition: background-color 0.2s; } /* Article Section — flush spacing between scroll articles */ .ces-article-section { margin-top: 0.5rem; } /* Leaderboard Ad Container */ .ces-leaderboard-ad { display: flex; justify-content: center; align-items: center; width: 100%; max-width: none; margin: 0.5rem 0 0 0; min-height: 90px; } /* DMC-97: Affinity Banner */ .affinity-banner-container { display: flex; justify-content: center; align-items: center; min-height: 90px; } .affinity-banner-link { display: block; line-height: 0; } .affinity-banner-link img { max-width: 100%; height: auto; } /* ============================================== Article Truncation & Continue Reading (MSN Style) ============================================== */ .ces-article-truncated { max-height: 1200px; overflow: hidden; position: relative; } .ces-article-truncated::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 150px; background: linear-gradient(to bottom, transparent, white); pointer-events: none; } .dark-theme .ces-article-truncated::after { background: linear-gradient(to bottom, transparent, rgb(31, 41, 55)); } /* Expanded state */ .ces-article-expanded { max-height: none; overflow: visible; } .ces-article-expanded::after { display: none; } /* Continue Reading container */ .ces-continue-reading-container { display: flex; flex-direction: column; align-items: center; padding: 24px 0; margin-top: -60px; position: relative; z-index: 10; } .ces-continue-reading-container.hidden { display: none; } /* Continue Reading button (MSN blue pill) */ .ces-continue-reading-btn { background: #0078D4; color: white; padding: 12px 32px; border-radius: 24px; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; transition: background 0.2s; box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3); } .ces-continue-reading-btn:hover { background: #106EBE; } .ces-continue-reading-btn svg { width: 20px; height: 20px; } /* Back to Home button */ .ces-back-to-home-btn { background: white; color: #374151; padding: 10px 24px; border-radius: 24px; font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #E5E7EB; cursor: pointer; margin-top: 12px; transition: background 0.2s; text-decoration: none; } .ces-back-to-home-btn:hover { background: #F9FAFB; } .ces-back-to-home-btn svg { width: 20px; height: 20px; } .dark-theme .ces-back-to-home-btn { background: rgb(31, 41, 55); color: #E5E7EB; border-color: rgb(55, 65, 81); } .dark-theme .ces-back-to-home-btn:hover { background: rgb(55, 65, 81); } /* ============================================== Infinite Scroll ============================================== */ #ces-loading { opacity: 0; transition: opacity 0.3s ease; } #ces-loading.visible { opacity: 1; } #ces-scroll-trigger { height: 40px; margin-bottom: 2rem; } /* ============================================== Taboola Widget Containers ============================================== */ .ces-taboola-section { border-top: 1px solid var(--border-color); } .dark-theme .ces-taboola-section { border-color: #374151; } .thumbnails-a-2x1 .logoDiv a span, .thumbnails-a-4x1 .logoDiv a span { font-size: 11.0px !important; color: #4b5563 !important; display: inline !important; font-weight: normal !important; } /* ============================================== Taboola Widget Styles (Combo Reel) - Right Rail: 4x1 vertical stack in sidebar - Right Reel: Taboola carousel in sidebar - Mid-Article: 4x1 horizontal strip ============================================== */ /* Right Rail 4x1 — vertical column stack */ [id^="taboola-right-rail-thumbnails"] [id^="internal_trc"] { display: flex !important; flex-direction: column !important; gap: 1rem !important; justify-content: flex-start !important; padding: 0.5rem !important; width: 100% !important; } [id^="taboola-right-rail-thumbnails"] .videoCube { width: 100% !important; flex: none !important; border-radius: var(--ces-tile-radius) !important; overflow: hidden !important; } /* Right Reel — let Taboola's carousel render naturally, no overrides */ .ces-sidebar-reel { width: 100%; } /* Reel clipping fix — Taboola's .tbl-rr-hidden-container collapses to 50px */ [id^="taboola-right-reel-thumbnails"].tbl-rr-hidden-container { height: auto !important; } /* ============================================== Taboola Text Colors ============================================== */ .trc_related_container .video-title, .trc_related_container span.video-title, .tbl-feed-card .video-title, [id^="taboola-"] .video-title { color: #f3f4f6 !important; } .trc_related_container .branding, .trc_related_container .branding-inner, .trc_related_container .branding-separator, .tbl-feed-card .branding, [id^="taboola-"] .branding, [id^="taboola-"] .branding-inner, [id^="taboola-"] .branding-separator { color: #9ca3af !important; } .trc_related_container .video-description, .trc_related_container span.video-description, .tbl-feed-card .video-description, [id^="taboola-"] .video-description { color: #9ca3af !important; } /* Right-rail Taboola sits on a light card — counteract global dark text overrides */ [id^="taboola-right-rail-"] .video-title, [id^="taboola-right-rail-"] span.video-title { color: #1f2937 !important; } [id^="taboola-right-rail-"] .branding, [id^="taboola-right-rail-"] .branding-inner, [id^="taboola-right-rail-"] .branding-separator { color: #6b7280 !important; } [id^="taboola-right-rail-"] .video-description, [id^="taboola-right-rail-"] span.video-description { color: #6b7280 !important; } /* Right Reel always renders on a light card — force dark text regardless of page theme */ [id^="taboola-right-reel-thumbnails"] .video-title, [id^="taboola-right-reel-thumbnails"] span.video-title { color: #1f2937 !important; } [id^="taboola-right-reel-thumbnails"] .branding, [id^="taboola-right-reel-thumbnails"] .branding-inner, [id^="taboola-right-reel-thumbnails"] .branding-separator { color: #6b7280 !important; } [id^="taboola-right-reel-thumbnails"] .video-description, [id^="taboola-right-reel-thumbnails"] span.video-description { color: #6b7280 !important; } /* Right Reel — always dark text (light card background in all themes) */ .dark-theme [id^="taboola-right-reel-thumbnails"] .video-title, .dark-theme [id^="taboola-right-reel-thumbnails"] span.video-title { color: #1f2937 !important; } .dark-theme [id^="taboola-right-reel-thumbnails"] .branding, .dark-theme [id^="taboola-right-reel-thumbnails"] .branding-inner, .dark-theme [id^="taboola-right-reel-thumbnails"] .branding-separator { color: #6b7280 !important; } .dark-theme [id^="taboola-right-reel-thumbnails"] .video-description, .dark-theme [id^="taboola-right-reel-thumbnails"] span.video-description { color: #6b7280 !important; } /* Taboola Dark Mode Text Colors */ .dark-theme .trc_rbox_header_span, .dark-theme [id^="taboola-"] .trc_rbox_header_span { color: #f3f4f6 !important; } .dark-theme [id^="taboola-"] .video-title, .dark-theme .trc_related_container .video-title { color: #f3f4f6 !important; } .dark-theme [id^="taboola-"] .video-description, .dark-theme .trc_related_container .video-description { color: #9ca3af !important; } .dark-theme [id^="taboola-"] .branding, .dark-theme [id^="taboola-"] .branding-inner, .dark-theme .trc_related_container .branding { color: #9ca3af !important; } .dark-theme [id^="taboola-"] .video-label, .dark-theme .trc_related_container .video-label { color: #f3f4f6 !important; } .dark-theme [id^="taboola-"] .trc_desktop_disclosure_link span, .dark-theme [id^="taboola-"] .trc_mobile_disclosure_link span { color: #9ca3af !important; } .dark-theme [id^="taboola-"] .videoCube:hover .video-title { color: #60a5fa !important; } /* Taboola 4x1 — prevent horizontal scrollbar from Taboola's overflow: auto */ [id^="taboola-mid-article-"] .trc_rbox_div, [id^="taboola-mfy-"] .trc_rbox_div { overflow: hidden !important; } /* Right-rail — prevent scrollbar on inner border element */ [id^="taboola-right-rail-"] .trc_rbox_border_elm { overflow: hidden !important; } /* Taboola 4x1 tile hover — zoom-in pop-out effect (mid-article + MFY) */ [id^="taboola-mid-article-"] .trc_spotlight_item, [id^="taboola-mfy-"] .trc_spotlight_item { transition: transform 0.25s ease, box-shadow 0.25s ease; } [id^="taboola-mid-article-"] .trc_spotlight_item:hover, [id^="taboola-mfy-"] .trc_spotlight_item:hover { transform: scale(1.04); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); z-index: 1; } /* ============================================== Accessibility ============================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ces-sponsored-tile .ces-tile-image-wrapper img, .ces-mfy-tile img, .ces-continue-reading-btn { transition: none; } } /* Smooth scroll for infinite scroll */ html { scroll-behavior: smooth; } /* ============================================== CES Weather Widget (Slimlined - 241x48) ============================================== */ .ces-weather-widget { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); cursor: pointer; transition: box-shadow 0.2s, background-color 0.2s; max-width: 241px; height: 48px; } .ces-weather-widget:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .dark-theme .ces-weather-widget, .dark .ces-weather-widget { background: rgba(31, 41, 55, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .dark-theme .ces-weather-widget:hover, .dark .ces-weather-widget:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .ces-weather-location { font-size: 14px; font-weight: 500; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .dark-theme .ces-weather-location, .dark .ces-weather-location { color: #f3f4f6; } .ces-weather-icon { width: 32px; height: 32px; flex-shrink: 0; } .ces-weather-temp { font-size: 18px; font-weight: 600; color: #1f2937; cursor: pointer; } .dark-theme .ces-weather-temp, .dark .ces-weather-temp { color: #f3f4f6; } @media (max-width: 600px) { .ces-weather-widget { padding: 6px 12px; gap: 6px; height: 40px; } .ces-weather-location { font-size: 12px; max-width: 80px; } .ces-weather-icon { width: 28px; height: 28px; } .ces-weather-temp { font-size: 16px; } } /* ============================================== CES Logo (220x96) ============================================== */ .ces-logo { max-width: 110px; height: auto; object-fit: contain; } @media (max-width: 600px) { .ces-logo { width: 90px; height: auto; } } .ces-sidebar-ad { display: flex; justify-content: center; width: 100%; min-height: 250px; } /* DMC-77: MSN-style GAM ad layout */ .msn-sidebar-stack { display: flex; flex-direction: column; gap: 1rem; } .msn-sidebar-stack .ces-sidebar-ad { min-height: 250px; width: 100%; } .ces-hero-ad { width: 100%; display: flex; justify-content: center; overflow: hidden; margin-bottom: 1rem; } .ces-inline-ad { width: 100%; display: flex; justify-content: center; overflow: hidden; }