/* ============================================================ ORIGINAL THEME CSS (kept intact) ============================================================ */ :root { --light-grey: #e7e7e7; --separator-color: var(--light-grey); } .section-links-container { border-block-start: 2px solid; border-block-end: 1px solid; } .section-links-container, .whole-menu .navmenu, .is-sticky .whole-menu .navmenu .section-links-container { --header-footer-foreground: #fff; } .section-links-container .menu-item { font-weight: 700; text-transform: uppercase; } .whole-menu .navmenu .section-links { color: var(--primary-color-text); } .whole-menu .navmenu .topmenu-hamburger .accent *, .whole-menu .navmenu .topmenu-hamburger #mega-menu-close-icon--normal .accent * { stroke: var(--primary-color-text); } .slot > .headline-style-bordersOnly > .slot-heading { --slot-heading-border-width: 3px; --slot-heading-padding-block: 6px; margin-block-start: var(--margin-big); border: 0 none; border-block-end: var(--slot-heading-border-width) solid var(--separator-color); padding-block: var(--slot-heading-padding-block); } .slot > .headline-style-bordersOnly > .slot-heading > *:first-child { position: relative; } .slot > .headline-style-bordersOnly > .slot-heading > *:first-child:after { --heading-highlight-width: calc(var(--slot-heading-border-width) + 1px); content: ''; position: absolute; top: calc(100% + var(--slot-heading-padding-block)); left: 0; width: 100%; border-block-end: var(--heading-highlight-width) solid; } .slot > .breaking_news_full_width.slot-style-fullwidth_infill:not([class*="one_third_width"]):not([class*="two_third_width"]) > .content { padding-block: 0; } .slot > .breaking_news_full_width .root > .breaking-news-content, .slot > .breaking_news_full_width .root > .breaking-news-content .swiper-slide, .slot > .breaking_news_full_width .root > .breaking-news-content .swiper-slide .teaser-title { min-height: 0; height: auto; } .slot { --unit-14-desktop: 294px; } .slot[class$="-ad"], .slot[class$="-ad"] img { max-width: 300px; margin-inline: auto; } .stay-updated-placeholder { background: #000; color: #fff; padding: 30px; font-size: large; } .slot-layout.two_by_one_column_grid .column-0 { --unit-1-desktop: 460px; } .slot-layout.two_by_one_column_grid .column-1 { --unit-1-desktop: 300px; min-width: 300px; } .slot-layout.two_by_one_column_grid .column-0 .teaser { min-height: 0; } .slot-layout.two_by_one_column_grid .column-1 .teaser { width: 100%; } @media (min-width: 1024px) { .slot > .headline-style-bordersOnly > .slot-heading > *:first-child { padding: 0; } .slot > .breaking_news_full_width .root > .breaking-news-content .swiper-button-prev, .slot > .breaking_news_full_width .root > .breaking-news-content .swiper-button-next { top: 50%; } .page > .root > .root > .end-column { --one-third: 300px; --unit-1-desktop: var(--one-third); } } /* ============================================================ CUSTOM OVERRIDES (append-only) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Atex Websites: site frame ============================================================ */ /* Tokens for our visual system & card sizing */ :root{ /* Grid/small cards (defaults) */ --card-h: 360px; --radius: 14px; /* Visual system */ --page-bg: #f6f7f9; --card-bg: #fff; --card-border: rgba(15,23,42,.08); --shadow-tight: 0 1px 2px rgba(0,0,0,.06); --shadow-soft: 0 8px 20px rgba(0,0,0,.06); --shadow-hover-tight: 0 2px 4px rgba(0,0,0,.07); --shadow-hover-soft: 0 12px 28px rgba(0,0,0,.10); /* Hero/top two cards */ --lead-h: 380px; --lead-radius: 16px; --lead-grad-a: rgba(0,0,0,0); --lead-grad-b: rgba(0,0,0,.45); --lead-grad-c: rgba(0,0,0,.72); /* Header CTAs */ --cta: #ff6a00; --cta-hover: #e76000; --ink-900: #0f172a; /* Opinion panel */ --opinion-bg: #0e1623; --opinion-radius: 20px; --opinion-card-radius: 16px; --opinion-border: rgba(15,23,42,.10); /* Digital Editions */ --de-blue: #1667d9; --de-blue-hover: #0f56bd; --de-blue-ring: rgba(22,103,217,.35); } /* Page background */ body{ background: var(--page-bg) !important; } /* Let shadows breathe + consistent gaps */ .slot, .slot-group, .slot__items, .grid, .row, .col, .teaser-list, .teasers, .cards, .cards-wrap, .molecule-13{ overflow: visible !important; overflow-clip-margin: 24px; gap: 12px !important; } .slot__items, .teasers, .cards { padding-inline: 2px; } /* ========================= SMALL / GRID TEASERS ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â base ========================= */ .teaser.teaser-type-news{ display:flex; flex-direction:column; height: var(--card-h) !important; background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--card-border); box-shadow: var(--shadow-tight), var(--shadow-soft); overflow:hidden; margin-bottom:20px; transition: transform .18s ease, box-shadow .18s ease; width:100% !important; max-width:none !important; inline-size:auto !important; justify-self:stretch !important; align-self:stretch !important; isolation:isolate; } .teaser.teaser-type-news:hover{ transform: translateY(-1px); box-shadow: var(--shadow-hover-tight), var(--shadow-hover-soft); } /* KEY FIX: allow non-hero images to determine their own height */ .teaser.teaser-type-news .teaser-image{ order:0; flex:0 0 auto; height: auto !important; width:100%; overflow:hidden; margin:0 !important; } .teaser.teaser-type-news .teaser-image img{ width:100% !important; height:auto !important; object-fit:cover !important; display:block; } .teaser.teaser-type-news .teaser-content{ order:1; flex:1 1 auto; display:flex; flex-direction:column; padding:10px 14px 14px; overflow:hidden; } .teaser.teaser-type-news .teaser-title{ margin:.25rem 0 0; font-size:1rem; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } .teaser.teaser-type-news .teaser-text{ margin-top:.4rem; font-size:.9rem; line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } /* ========================= HERO / TOP TEASERS (.molecule-7) ========================= */ .molecule-7 .teaser.teaser-type-news.teaser-has-media{ position:relative !important; display:block !important; height: var(--lead-h) !important; border-radius: var(--lead-radius) !important; overflow:hidden !important; background:#000 !important; border:none !important; box-shadow: var(--shadow-tight), var(--shadow-soft) !important; } /* full-bleed */ .molecule-7 .teaser .teaser-image, .molecule-7 .teaser .teaser-image-link, .molecule-7 .teaser .ace-image, .molecule-7 .teaser .narrow-format, .molecule-7 .teaser .wider-format{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; margin:0 !important; } .molecule-7 .teaser .teaser-image img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; transform:scale(1); transition:transform .35s ease; } .molecule-7 .teaser:hover .teaser-image img{ transform:scale(1.02); } /* readability gradient */ .molecule-7 .teaser.teaser-type-news::before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, var(--lead-grad-a) 35%, var(--lead-grad-b) 72%, var(--lead-grad-c) 100%); } /* overlay text */ .molecule-7 .teaser .teaser-content{ position:absolute !important; left:0; right:0; bottom:0; top:auto !important; z-index:2; color:#fff !important; padding:14px 20px 18px !important; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; min-height:auto !important; height:auto !important; pointer-events:none; } .molecule-7 .teaser .teaser-content a{ color:#fff !important; pointer-events:auto; } .molecule-7 .teaser .teaser-keyword{ margin:0 0 6px 0 !important; } .molecule-7 .teaser [class*="byline"]{ display:none !important; } .molecule-7 .teaser .teaser-keyword .keyword-text a{ display:inline-block; padding:6px 10px; border-radius:999px; background:#0b63c9; color:#fff !important; font-weight:700; font-size:.85rem; letter-spacing:.02em; text-transform:uppercase; } .molecule-7 .teaser .teaser-title{ margin:0; line-height:1.1; font-weight:800; font-size: clamp(1.25rem, 1.2vw + 1rem, 2.1rem); text-shadow: 0 1px 2px rgba(0,0,0,.5); display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:3; } .molecule-7 .teaser .teaser-text{ display:none !important; } /* ============================================================ HERO SPACING ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â tighten space under primary cards, keep separator ============================================================ */ .two-big-wrapper .root.molecule-7, .two-big-wrapper .root.molecule-7 > .root.with-big-fonts, .two-big-wrapper .root.molecule-7 > .root.with-big-fonts > .root.with-byline{ margin-bottom: 0 !important; padding-bottom: 0 !important; } .two-big-wrapper .root.molecule-7 .teaser.teaser-type-news{ margin-bottom: 0 !important; } .two-big-wrapper + .root.separator{ display: block !important; margin-top: 8px !important; margin-bottom: 8px !important; height: auto !important; } /* ========================= HEADER CTA BUTTONS (robust selectors) ========================= */ .topmenu-links .submenu-toolbar ul{ display:flex; align-items:center; gap:16px; list-style:none; margin:0; padding:0; } .topmenu-links .submenu-toolbar ul li{ margin:0; } .topmenu-links .submenu-toolbar a.sidebar-button.DEFAULT{ appearance:none; display:inline-flex; align-items:center; justify-content:center; padding:12px 24px !important; min-height:44px; font-size:1rem; font-weight:700; line-height:1; white-space:nowrap; border-radius:9999px; text-decoration:none !important; background:#fff !important; color:var(--ink-900) !important; border:1px solid rgba(15,23,42,.12) !important; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, filter .15s ease; } .topmenu-links .submenu-toolbar a.sidebar-button.DEFAULT:hover{ transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.08); } .topmenu-links .submenu-toolbar a.sidebar-button.DEFAULT:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(255,106,0,.35), 0 8px 18px rgba(0,0,0,.10); } .topmenu-links .submenu-toolbar a.sidebar-button.DEFAULT[title="Sign in"], .topmenu-links .submenu-toolbar a.sidebar-button.DEFAULT[title="Log in"]{ background:#fff !important; color:var(--ink-900) !important; border-color: rgba(15,23,42,.16) !important; border-width:2px !important; padding:12px 22px !important; } .topmenu-links .submenu-toolbar a.sidebar-button.DEFAULT[title="Subscribe"]{ background: var(--cta) !important; color:#fff !important; border-color: transparent !important; padding:12px 28px !important; box-shadow: 0 10px 24px rgba(255,106,0,.28); } .topmenu-links .submenu-toolbar a.sidebar-button.DEFAULT[title="Subscribe"]:hover{ background: var(--cta-hover) !important; box-shadow: 0 12px 28px rgba(255,106,0,.30); } /* ========================= LOGIN BUTTON (white pill style) ========================= */ /* Position auth-menu next to Subscribe button */ @media (min-width: 1024px){ .menu-inner-container.topmenu-inner .auth-menu{ grid-column: 3 !important; justify-self: end !important; align-self: center !important; display: flex !important; align-items: center !important; margin: 0 !important; transform: translateY(50px) translateX(-140px) !important; /* align with Subscribe */ } } .auth-menu .login-button{ appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px !important; /* match Subscribe padding */ height: 48px !important; /* match Subscribe height */ min-height: 48px !important; box-sizing: border-box; font-size: 1rem; font-weight: 700; line-height: 1; white-space: nowrap; border-radius: 9999px; text-decoration: none !important; background: #fff !important; color: #000 !important; border: 2px solid rgba(15,23,42,.16) !important; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; } .auth-menu .login-button:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.10); border-color: rgba(15,23,42,.24) !important; } .auth-menu .login-button:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(15,23,42,.20), 0 4px 12px rgba(0,0,0,.10); } .auth-menu .login-button p{ margin: 0; padding: 0; font-size: inherit; font-weight: inherit; color: inherit; line-height: 1; } .auth-menu .login-button .icon{ width: 18px; height: 18px; stroke: #000 !important; fill: none !important; } /* ========================= NAV BAR & DIGITAL EDITIONS (text only) ========================= */ /* keep items vertically centered */ .whole-menu .navmenu .section-links{ align-items: center !important; } /* left-align items and use fixed gaps */ nav.navbar > ul.inline-navigation-list{ display:flex !important; justify-content:flex-start !important; align-items:center !important; gap: 28px !important; } nav.navbar > ul.inline-navigation-list > li.menu-item{ flex: 0 0 auto !important; margin-left: 0 !important; } /* --- Digital Editions: blue text, no pill --- */ /* ensure the LI behaves like a normal item (undo any previous hack) */ nav.navbar > ul.inline-navigation-list > li#SectionMenuItem-digital-editions{ display: block !important; } /* robust link selector: ID + title fallback */ nav.navbar > ul.inline-navigation-list > li#SectionMenuItem-digital-editions > a, nav.navbar > ul.inline-navigation-list > a[title="Digital Editions"]{ color: var(--de-blue) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: inline-block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-decoration: none !important; } /* hover/focus */ nav.navbar > ul.inline-navigation-list > li#SectionMenuItem-digital-editions > a:hover, nav.navbar > ul.inline-navigation-list > a[title="Digital Editions"]:hover, nav.navbar > ul.inline-navigation-list > li#SectionMenuItem-digital-editions > a:focus-visible, nav.navbar > ul.inline-navigation-list > a[title="Digital Editions"]:focus-visible{ color: var(--de-blue-hover) !important; outline: none !important; } /* ========================= OPINION SECTION (panel + text cards) ========================= */ .slot-layout.full_width_1_noimg.with-padding.with-background.theme-monochrome.slot-style-coloured.headline-style-solidInfill{ background: var(--opinion-bg) !important; color:#fff; border-radius: var(--opinion-radius); padding: 22px 28px 26px !important; box-shadow: 0 8px 22px rgba(0,0,0,.18); } .slot-layout.full_width_1_noimg.with-background .slot-heading{ color:#fff !important; margin: 0 0 14px 0; } .slot-layout.full_width_1_noimg.with-background .separator{ display:none !important; } .slot-layout.full_width_1_noimg.with-background .flex-container{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px !important; } .slot-layout.full_width_1_noimg.with-background .molecule-1 .teaser{ background:#fff; color:var(--ink-900); border-radius: var(--opinion-card-radius); border: 1px solid var(--opinion-border); box-shadow: var(--shadow-tight), var(--shadow-soft); padding: 18px 20px 16px; } .slot-layout.full_width_1_noimg.with-background .molecule-1 .teaser .teaser-keyword{ display:none !important; } .slot-layout.full_width_1_noimg.with-background .molecule-1 .teaser .teaser-title{ font-weight:800; font-size: clamp(1.1rem, .6vw + 1rem, 1.6rem); line-height:1.2; margin:0 0 8px; } .slot-layout.full_width_1_noimg.with-background .molecule-1 .teaser .teaser-text{ font-style: italic; color:#334155; line-height:1.6; } .slot-layout.full_width_1_noimg.with-background .with-byline [class*="byline"]{ color:#64748b; font-weight:600; margin:2px 0 8px; } /* Mobile + tablet responsive layout for Opinion panel */ @media (max-width: 767px){ .slot-layout.full_width_1_noimg.with-background.theme-monochrome.slot-style-coloured.headline-style-solidInfill .flex-container{ grid-template-columns: 1fr !important; /* stack cards */ gap: 14px !important; } .slot-layout.full_width_1_noimg.with-padding.with-background.theme-monochrome.slot-style-coloured.headline-style-solidInfill{ padding: 18px 16px 20px !important; /* tighter panel padding on phones */ border-radius: var(--opinion-radius); } } /* Optional: 2 columns on tablets */ @media (min-width: 768px) and (max-width: 1023px){ .slot-layout.full_width_1_noimg.with-background.theme-monochrome.slot-style-coloured.headline-style-solidInfill .flex-container{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 16px !important; } } /* ============================================================ MINI CARDS UNDER HERO ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Keep mini row short; standardize others ============================================================ */ @media (min-width: 1024px){ .root.flex-container.four-cols > .molecule-1 .teaser.teaser-type-news{ height: 340px !important; min-height: 0 !important; overflow: hidden !important; } .two-big-wrapper + .root.separator + .root.flex-container.four-cols > .molecule-1 .teaser.teaser-type-news{ height: 300px !important; min-height: 0 !important; overflow: hidden !important; } .two-big-wrapper + .root.separator + .root.flex-container.four-cols > .molecule-1 .teaser .teaser-content{ padding: 8px 12px 12px !important; gap: 4px !important; display: flex; flex-direction: column; } .two-big-wrapper + .root.separator + .root.flex-container.four-cols > .molecule-1 .teaser .teaser-title{ -webkit-line-clamp: 3 !important; } .two-big-wrapper + .root.separator + .root.flex-container.four-cols > .molecule-1 .teaser .teaser-text{ -webkit-line-clamp: 2 !important; margin-top: 4px !important; } .two-big-wrapper + .root.separator + .root.flex-container.four-cols > .molecule-1 .teaser [class*="byline"]{ display: none !important; } } /* ========================= NEWSLETTER SIGNUP PANEL ========================= */ .ti-slot-stay-updated .slot-layout.html_only.with-background{ background: var(--opinion-bg) !important; color: #fff; border-radius: var(--opinion-radius); padding: 22px 28px 26px !important; box-shadow: 0 8px 22px rgba(0,0,0,.18); } .ti-slot-stay-updated .content{ display: grid; grid-template-columns: 1fr 460px; grid-template-rows: auto auto; align-items: center; gap: 6px 24px; } .ti-slot-stay-updated .content::before{ content: "Stay Updated"; grid-column: 1; grid-row: 1; font-weight: 800; font-size: clamp(1.25rem, 1.2vw + 1rem, 2rem); line-height: 1.15; } .ti-slot-stay-updated .content::after{ content: "Subscribe to our newsletter for the latest headlines and exclusive content."; grid-column: 1; grid-row: 2; color: #cbd5e1; font-size: clamp(.95rem, .2vw + .9rem, 1.125rem); line-height: 1.6; margin-top: 2px; } .ti-slot-stay-updated .newsletter-block__form{ grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 12px; } .ti-slot-stay-updated #newsletter-email{ flex: 1 1 auto; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(15,23,42,.12); background: #fff; color: var(--ink-900); box-shadow: 0 1px 2px rgba(0,0,0,.04); outline: none; } .ti-slot-stay-updated #newsletter-email::placeholder{ color: #6b7280; } .ti-slot-stay-updated #newsletter-email:focus{ box-shadow: 0 0 0 3px rgba(59,130,246,.2), 0 2px 6px rgba(0,0,0,.08); border-color: rgba(59,130,246,.35); } .ti-slot-stay-updated .btn.primary{ height: 52px; padding: 0 22px; border-radius: 14px; font-weight: 800; border: none; background: var(--cta); color: #fff !important; box-shadow: 0 6px 14px rgba(255,106,0,.25); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; cursor: pointer; } .ti-slot-stay-updated .btn.primary:hover{ background: var(--cta-hover); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(255,106,0,.28); } /* Screen-reader helper */ .ti-slot-stay-updated .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Responsive: stack on tablet & down */ @media (max-width: 1023px){ .ti-slot-stay-updated .content{ grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 10px 0; } .ti-slot-stay-updated .newsletter-block__form{ grid-column: 1; grid-row: 3; } .ti-slot-stay-updated .btn.primary{ padding: 0 18px; } } /* ========================= Sticky right rail (works for all ad slots) ========================= */ @media (min-width:1024px){ .slot-layout.two_by_one_column_grid { align-items: start !important; overflow: visible !important; transform: none !important; contain: none !important; } .slot-layout.two_by_one_column_grid .root.column-1 { position: sticky !important; top: 16px !important; align-self: start !important; height: max-content !important; z-index: 10; } .slot.ti-slot-topnews-ad .content, .slot.ti-slot-regional-ad .content { padding: 0 !important; } .slot.ti-slot-topnews-ad .content img, .slot.ti-slot-regional-ad .content img { display:block; width:100%; height:auto; border-radius:12px; box-shadow: var(--shadow-tight), var(--shadow-soft); } } /* Global offsets (adjust to your header size) */ :root{ --rail-gap: 22px; --sticky-header-h: 92px; --rail-top-offset: calc(var(--sticky-header-h) + var(--rail-gap)); } @media (min-width:1024px){ .slot-layout.two_by_one_column_grid .root.column-1{ position: sticky !important; top: var(--rail-top-offset) !important; align-self: start !important; height: max-content !important; z-index: 10; } } /* ========================= SIDEBAR — Desktop + Mobile ========================= */ /* Desktop behaviour (closed by default, capped width, slide-in) */ @media (min-width:1024px){ .sidebar-overlay{ position:fixed !important; inset:0 !important; display:none !important; /* closed by default */ align-items:stretch !important; justify-content:flex-start !important; z-index:9999 !important; } .sidebar-overlay.open{ display:flex !important; } .sidebar-overlay .sidebar-menu{ flex:0 0 auto !important; width:min(600px,86vw) !important; max-width:600px !important; height:100vh !important; background:#fff !important; box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 20px 60px rgba(0,0,0,.25) !important; overflow:hidden !important; transform:translateX(-100%); transition:transform .25s ease; } .sidebar-overlay.open .sidebar-menu{ transform:translateX(0); } .sidebar-overlay .sidebar-content{ height:100% !important; overflow:auto !important; padding:22px 28px !important; background:#fff !important; } .sidebar-overlay .sidebar-blanket{ flex:1 1 auto !important; background:rgba(0,0,0,.38) !important; backdrop-filter:blur(1px); opacity:0; transition:opacity .25s ease; } .sidebar-overlay.open .sidebar-blanket{ opacity:.38; } .sidebar-overlay .close-btn{ position:absolute !important; top:10px; right:10px; z-index:2; } } /* Mobile keeps full-width drawer */ @media (max-width:1023px){ .sidebar-overlay .sidebar-menu{ width:100vw !important; max-width:none !important; height:100vh !important; } } /* ========================= Menu visuals + accordion ========================= */ /* Lighter dividers under top-level items */ .sidebar-overlay .submenu-toolbar > ul > li{ border-bottom:1px solid #e6e6e6 !important; } .sidebar-overlay .submenu-toolbar > ul > li:last-child{ border-bottom:none !important; } /* Larger top-level items */ .sidebar-overlay .submenu-toolbar > ul > li > a, .sidebar-overlay .submenu-toolbar > ul > li > span{ font-size:1.15rem; font-weight:600; display:flex; align-items:center; gap:.5rem; line-height:1.3; cursor:pointer; padding-block:14px; /* a touch more vertical space */ } /* Submenus collapsed by default */ .sidebar-overlay .menu-submenu{ display:none; padding:6px 0 8px 12px; } .sidebar-overlay .menu-item.open > .menu-submenu{ display:block; } /* Submenu item sizing */ .sidebar-overlay .submenu-toolbar .menu-submenu a{ font-size:1rem; font-weight:400; display:block; padding:4px 0; } /* Wider Sign in / Subscribe buttons */ .sidebar-overlay .top-menu-wrapper a.top-menu-item{ display:inline-flex; align-items:center; justify-content:center; padding:12px 22px !important; min-width:170px !important; font-size:1.0625rem; border-radius:9999px; } /* Close (X) button — consistent weight with hamburger */ .sidebar-overlay .close-btn{ width:40px; height:40px; padding:0; color:#111; } .sidebar-overlay .close-btn .icon{ width:20px; height:20px; } .sidebar-overlay .close-btn .accent line{ stroke:currentColor !important; stroke-width:3 !important; stroke-linecap:round !important; fill:none !important; } /* ========================= Accordion carets (mobile) ========================= */ @media (max-width:1023px){ /* Make parent rows tappable */ .sidebar-overlay .submenu-toolbar ul li.has-submenu > a, .sidebar-overlay .submenu-toolbar ul li.has-submenu > span{ position:relative; display:flex; align-items:center; padding-right:28px; /* space for caret */ cursor:pointer; } /* caret injected by JS */ .sidebar-overlay .submenu-toolbar ul li.has-submenu > .ti-caret, .sidebar-overlay .submenu-toolbar ul li.has-submenu > a .ti-caret, .sidebar-overlay .submenu-toolbar ul li.has-submenu > span .ti-caret{ position:absolute; right:6px; top:50%; transform:translateY(-50%) rotate(0deg); font-size:1.1em; line-height:1; opacity:.75; transition:transform .2s ease, opacity .2s ease; } .sidebar-overlay .submenu-toolbar ul li.has-submenu.open > .ti-caret, .sidebar-overlay .submenu-toolbar ul li.has-submenu.open > a .ti-caret, .sidebar-overlay .submenu-toolbar ul li.has-submenu.open > span .ti-caret{ transform:translateY(-50%) rotate(90deg); opacity:1; } /* submenus collapsed by default; JS toggles [hidden] */ .sidebar-overlay .submenu-toolbar ul li .menu-submenu[hidden]{ display:none !important; } } /* ========================= TOP STORIES (Most Read) — consolidated ========================= */ /* Reset layout & theme cruft just for this widget */ .ti-slot-mostread, .ti-slot-mostread > .slot-layout, .ti-slot-mostread .slot > .slot-layout, .ti-slot-mostread .content, .ti-slot-mostread .root{ display:block !important; height:auto !important; min-height:0 !important; overflow:visible !important; } .ti-slot-mostread .slot-layout::before, .ti-slot-mostread .slot-layout::after, .ti-slot-mostread [class*="with-background"]::before, .ti-slot-mostread [class*="with-background"]::after{ content:none !important; } .ti-slot-mostread .divider{ display:none !important; } /* Card chrome */ .ti-slot-mostread{ background:#fff !important; border:1px solid var(--card-border) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-tight), var(--shadow-soft) !important; overflow:hidden !important; } /* Header */ .ti-slot-mostread .header{ margin:0 !important; padding:14px 18px !important; background:#fff !important; color:var(--de-blue) !important; font-weight:800 !important; font-size:1.6rem !important; line-height:1.2 !important; border-radius:var(--radius) var(--radius) 0 0 !important; border-top:1px solid rgba(15,23,42,.10) !important; border-bottom:1px solid rgba(15,23,42,.10) !important; } /* List rows */ .ti-slot-mostread .root.bullet{ height:auto !important; min-height:0 !important; background:transparent !important; padding:0 !important; border:0 !important; } .ti-slot-mostread .item.item-style-number{ display:grid !important; grid-template-columns:3ch 1fr !important; column-gap:14px !important; align-items:start !important; padding:16px 18px !important; background:#fff !important; border-bottom:1px solid rgba(15,23,42,.10) !important; } .ti-slot-mostread .root.bullet:last-child .item.item-style-number{ border-bottom:none !important; } /* Numbers */ .ti-slot-mostread .number-box.style-number{ grid-column:1 !important; justify-self:end !important; text-align:right !important; margin:0 !important; font-variant-numeric:tabular-nums; font-weight:800 !important; font-size:1.05rem !important; line-height:1.2 !important; padding-top:2px !important; color:var(--de-blue) !important; } /* Teaser reset + headline style */ .ti-slot-mostread .teaser.teaser-type-news{ height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } .ti-slot-mostread .item.item-style-number > .teaser{ grid-column:2 !important; } .ti-slot-mostread .teaser .teaser-content, .ti-slot-mostread .teaser .teaser-title{ margin:0 !important; padding:0 !important; } .ti-slot-mostread .teaser .teaser-title, .ti-slot-mostread .teaser .teaser-title a{ font-weight:800 !important; font-size:1.1rem !important; line-height:1.45 !important; color:#0f172a !important; text-decoration:none !important; } .ti-slot-mostread .teaser .teaser-title a:hover{ text-decoration:underline !important; } /* ========================= RELATED STORIES — match Top Stories card ========================= */ /* Reset theme cruft for this widget only */ .ti-slot-article-related, .ti-slot-article-related > .slot-layout, .ti-slot-article-related .slot > .slot-layout, .ti-slot-article-related .content, .ti-slot-article-related .root{ display:block !important; height:auto !important; min-height:0 !important; overflow:visible !important; } .ti-slot-article-related .slot-layout::before, .ti-slot-article-related .slot-layout::after, .ti-slot-article-related [class*="with-background"]::before, .ti-slot-article-related [class*="with-background"]::after{ content:none !important; } .ti-slot-article-related .divider{ display:none !important; } /* Card chrome */ .ti-slot-article-related{ background:#fff !important; border:1px solid var(--card-border) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-tight), var(--shadow-soft) !important; overflow:hidden !important; } /* Heading */ .ti-slot-article-related .header{ margin:0 !important; padding:14px 18px !important; background:#fff !important; color:var(--de-blue) !important; font-weight:800 !important; font-size:1.6rem !important; line-height:1.2 !important; border-radius:var(--radius) var(--radius) 0 0 !important; border-top:1px solid rgba(15,23,42,.10) !important; border-bottom:1px solid rgba(15,23,42,.10) !important; } /* List rows */ .ti-slot-article-related .root.bullet{ background:transparent !important; padding:0 !important; border:0 !important; } .ti-slot-article-related .item.item-style-none{ display:grid !important; grid-template-columns:3ch 1fr !important; column-gap:14px !important; align-items:start !important; padding:16px 18px !important; background:#fff !important; border-bottom:1px solid rgba(15,23,42,.10) !important; } .ti-slot-article-related .root.bullet:last-child .item.item-style-none{ border-bottom:none !important; } /* Numbers 1–5 */ .ti-slot-article-related .number-box.style-none{ grid-column:1 !important; justify-self:end !important; text-align:right !important; margin:0 !important; font-variant-numeric:tabular-nums; font-weight:800 !important; font-size:1.05rem !important; line-height:1.2 !important; padding-top:2px !important; color:var(--de-blue) !important; } /* Teaser reset + bold headline */ .ti-slot-article-related .teaser.teaser-type-news{ margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } .ti-slot-article-related .teaser .teaser-content, .ti-slot-article-related .teaser .teaser-title{ margin:0 !important; padding:0 !important; } .ti-slot-article-related .teaser .teaser-title, .ti-slot-article-related .teaser .teaser-title a{ font-weight:800 !important; font-size:1.1rem !important; line-height:1.45 !important; color:#0f172a !important; text-decoration:none !important; } .ti-slot-article-related .teaser .teaser-title a:hover{ text-decoration:underline !important; } /* RELATED STORIES — fix oversized rows & narrow text */ .ti-slot-article-related .item.item-style-none{ padding:12px 16px !important; /* smaller rows */ grid-template-columns:3ch 1fr !important; /* keep number | headline */ } /* Kill interlaced/media layout and any fixed heights */ .ti-slot-article-related .teaser.teaser-type-news{ display:block !important; height:auto !important; min-height:0 !important; overflow:visible !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } /* Nuke media placeholders that create tall cards */ .ti-slot-article-related .teaser .teaser-image, .ti-slot-article-related .teaser .ace-image, .ti-slot-article-related .teaser .narrow-format, .ti-slot-article-related .teaser .wider-format{ display:none !important; } /* Make content a simple full-width block (no interlaced grid) */ .ti-slot-article-related .teaser .teaser-content{ display:block !important; grid-column:auto !important; width:100% !important; max-width:none !important; padding:0 !important; margin:0 !important; } /* Headline: normal flow, no clamps */ .ti-slot-article-related .teaser .teaser-title{ display:block !important; margin:0 !important; font-weight:800 !important; font-size:1.05rem !important; line-height:1.4 !important; color:#0f172a !important; -webkit-line-clamp:unset !important; } .ti-slot-article-related .teaser .teaser-title a{ color:inherit !important; text-decoration:none !important; } .ti-slot-article-related .teaser .teaser-title a:hover{ text-decoration:underline !important; } /* RELATED STORIES — kill interlaced media gutter + fixed heights */ .ti-slot-article-related .item.item-style-none{ display:grid !important; grid-template-columns:3ch 1fr !important; /* number | headline */ column-gap:14px !important; align-items:start !important; padding:16px 18px !important; height:auto !important; min-height:0 !important; } /* Place number + teaser into the two columns */ .ti-slot-article-related .number-box.style-none{ grid-column:1 !important; justify-self:end !important; } .ti-slot-article-related .item.item-style-none > .teaser{ grid-column:2 !important; } /* Hard reset the teaser to remove card/interlaced behaviour */ .ti-slot-article-related .teaser.teaser-type-news{ display:block !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } /* This is the troublemaker: remove the reserved media gutter */ .ti-slot-article-related .teaser-content[class*="teaser-interlaced"]{ display:block !important; padding:0 !important; margin:0 !important; width:100% !important; max-width:none !important; min-height:0 !important; } /* Hide any media placeholders that force height */ .ti-slot-article-related .teaser .teaser-image, .ti-slot-article-related .teaser .ace-image, .ti-slot-article-related .teaser .narrow-format, .ti-slot-article-related .teaser .wider-format{ display:none !important; } /* Headline: normal width, bold, unclamped */ .ti-slot-article-related .teaser .teaser-title{ margin:0 !important; font-weight:800 !important; font-size:1.05rem !important; line-height:1.4 !important; color:#0f172a !important; -webkit-line-clamp:unset !important; } .ti-slot-article-related .teaser .teaser-title a{ color:inherit !important; text-decoration:none !important; } .ti-slot-article-related .teaser .teaser-title a:hover{ text-decoration:underline !important; } /* ========================================= ARTICLE TEMPLATE — make end-column sticky ========================================= */ @media (min-width:1024px){ /* 0) Safety: ancestors must NOT have overflow/transform/contain */ .article .jsx-658558227.root, .article .jsx-658558227.root > .start-column, .article .jsx-658558227.end-column, .article .jsx-658558227.end-column > .jsx-3251034894.ace-times-origins-layout{ overflow: visible !important; transform: none !important; contain: none !important; } /* 1) Ensure the two columns don't vertically center */ .article .jsx-658558227.root{ align-items: flex-start !important; /* if this container is flex/grid */ } .article .start-column, .article .end-column{ align-self: flex-start !important; } /* 2) Stick the whole right column (ads + related) */ .article .jsx-658558227.end-column{ position: sticky !important; top: var(--rail-top-offset) !important; /* uses your existing token */ height: max-content !important; /* column shrinks to content */ z-index: 10; } /* 3) Make sure inner stacks don't create new containing blocks */ .article .end-column *{ will-change: auto !important; /* undo any "optimizations" */ filter: none !important; /* filters also break sticky */ perspective: none !important; } } /* ========================================= ARTICLE TEMPLATE — make entire end-column sticky ========================================= */ @media (min-width:1024px){ /* Parent row (start + end) should not center vertically */ .jsx-658558227.root{ align-items: flex-start !important; /* if this is the 2-col flex row */ overflow: visible !important; /* prevent sticky killers */ transform: none !important; contain: none !important; filter: none !important; perspective: none !important; } /* The sticky rail (ads + related) */ .jsx-658558227.end-column{ position: sticky !important; top: var(--rail-top-offset, 16px) !important; /* CRUCIAL: stop behaving like a fluid, full-height column */ flex: 0 0 var(--one-third, 300px) !important; /* width control */ align-self: flex-start !important; height: max-content !important; /* not 100% */ min-height: 0 !important; max-width: var(--one-third, 300px) !important; /* belt-and-braces: remove other sticky killers */ overflow: visible !important; transform: none !important; contain: none !important; filter: none !important; perspective: none !important; z-index: 10; } /* The inner layout wrapper in that rail must not create a new containing block */ .jsx-658558227.end-column > .jsx-3251034894.ace-times-origins-layout{ overflow: visible !important; transform: none !important; contain: none !important; } } /* Adjust sticky offset and spacing for Related Stories */ @media (min-width:1024px){ .jsx-658558227.end-column{ top: calc(var(--rail-top-offset) - 12px) !important; /* raises it a bit */ } /* Add spacing between ad block and related stories */ .ti-slot-section-default-ad{ margin-bottom: 18px !important; } /* Optional: tighten the Related Stories card itself */ .ti-slot-article-related .header{ padding-top: 10px !important; padding-bottom: 10px !important; } } /* ========================================= Reduce vertical gap above Related Stories ========================================= */ @media (min-width:1024px){ /* Tighten the layout container spacing */ .jsx-3251034894.ace-times-origins-layout{ margin-top: 0 !important; padding-top: 0 !important; gap: 12px !important; /* smaller gap between ad + related */ } /* Remove unnecessary filler divs between slots */ .ti-slot-section-default-ad + .ti-slot-article-related{ margin-top: 8px !important; /* tighten spacing between ad + related */ } /* In case any internal padding remains */ .ti-slot-article-related{ margin-top: 0 !important; padding-top: 0 !important; } /* Optional — if the ad container itself adds extra space */ .ti-slot-section-default-ad .slot-group-space-filler{ display: none !important; } } /* ========================================= ARTICLE PAGE — main image + caption styling ========================================= */ /* Round the main article image */ .article-image img { border-radius: var(--radius) !important; box-shadow: var(--shadow-soft) !important; overflow: hidden !important; display: block !important; } /* Ensure parent containers don’t clip the radius */ .article-image, .article-image-banner, .article-image .ace-image, .article-image .narrow-format, .article-image .wider-format { border-radius: var(--radius) !important; overflow: hidden !important; } /* ========================================= ARTICLE IMAGE CAPTION — clean neutral style ========================================= */ .figure-caption { background: #f7f8fa !important; /* subtle light grey */ border-radius: var(--radius) !important; padding: 10px 14px !important; margin-top: 6px !important; font-size: 0.95rem !important; line-height: 1.45 !important; color: #374151 !important; /* balanced neutral text */ border: 1px solid rgba(0,0,0,0.05) !important; box-shadow: var(--shadow-soft) !important; } /* Bold intro (e.g. "CHAMPIONS:") */ .figure-caption strong, .figure-caption b { font-weight: 700 !important; color: #111827 !important; } /* ========================================= ARTICLE HEADER — section tag, byline, date ========================================= */ /* Section label (e.g., "Community") */ .article-header .article-keyword .keyword-text{ color: var(--de-blue) !important; font-weight: 800 !important; font-size: 1.05rem !important; /* up a touch */ line-height: 1.2 !important; letter-spacing: .2px !important; /* subtle polish */ } /* Byline: name bigger + bold */ .article-byline .byline-name .author-name-text{ font-weight: 800 !important; font-size: 1.1rem !important; /* clear bump but not shouty */ color: #0f172a !important; } /* Optional: tighten byline block spacing */ .article-byline .byline-text{ gap: 8px !important; margin-top: 6px !important; } /* Date: slightly larger and calmer tone */ .article-date span{ font-size: 1.025rem !important; /* small increase */ line-height: 1.35 !important; color: #4b5563 !important; /* neutral grey for hierarchy */ } /* If a thin divider sits between name/date, keep it subtle */ .article-byline .byline-horizontal-separator, .article-byline .opinion-horizontal-separator{ background: rgba(15,23,42,.12) !important; height: 1px !important; } /* ========================= DIGITAL EDITIONS ARCHIVE — collapsible accordion ========================= */ .de-archive { font-family: inherit; color: #111; background: #fff; border-radius: 14px; padding: 24px 28px; box-shadow: var(--shadow-tight), var(--shadow-soft); margin-block: 2rem; } .de-archive button.year-header, .de-archive button.month-header { appearance: none; background: none; border: none; color: var(--de-blue); font-weight: 800; font-size: 1.25rem; text-align: left; width: 100%; padding: 10px 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: color .15s ease; } .de-archive button.month-header { font-size: 1.05rem; font-weight: 700; color: #1f2937; padding-left: 1.5rem; } .de-archive button:hover { color: var(--de-blue-hover); } .de-archive button::after { content: "▸"; font-size: 1rem; transition: transform .2s ease; opacity: .6; } .de-archive button[aria-expanded="true"]::after { transform: rotate(90deg); opacity: 1; } /* nested containers hidden by default */ .de-archive .months, .de-archive .edition-list { display: none; padding-left: 1.5rem; margin: 0; } .de-archive .edition-list { list-style: none; padding-left: 2.2rem; margin-top: .25rem; } .de-archive .edition-item { margin: .25rem 0; } .de-archive .edition-item a { text-decoration: none; color: var(--de-blue); transition: color .15s ease; } .de-archive .edition-item a:hover { color: var(--de-blue-hover); text-decoration: underline; } /* when expanded */ .de-archive .months[aria-hidden="false"], .de-archive .edition-list[aria-hidden="false"] { display: block; } /* ========================================= SECTION HEADER — blue bar only, compact ========================================= */ :root{ --section-underline-h: 2px; /* thickness */ --section-underline-w: 48px; /* length */ --section-underline-offset: 6px; /* distance below text */ } .section-heading{ margin: 14px 0 8px !important; padding-bottom: calc(var(--section-underline-offset) + var(--section-underline-h) + 1px) !important; background: none !important; border: 0 !important; box-shadow: none !important; } /* remove template adornments + immediate separators */ .section-heading::before, .section-heading::after, .section-heading .slot-heading::before, .section-heading .slot-heading::after{ content: none !important; } .section-heading + .separator, .section-heading + .root.separator{ display: none !important; } /* size/weight/color — boosted selectors cover nested spans */ .section-heading .slot-heading, .section-heading .slot-heading > span, .section-heading .slot-heading > span > span{ margin: 0 !important; border: 0 !important; font-weight: 800 !important; color: var(--de-blue, #1667d9) !important; /* a bit larger than before */ font-size: clamp(1.1rem, 1.6vw + 0.5rem, 2.5rem) !important; line-height: 1.2 !important; } /* short blue underline, positioned lower */ .section-heading .slot-heading > span{ position: relative !important; display: inline-block !important; padding-bottom: 4px !important; } .section-heading .slot-heading > span::after{ content: "" !important; position: absolute !important; left: 0; bottom: calc(-1 * (var(--section-underline-h) + var(--section-underline-offset))); width: var(--section-underline-w); border-bottom: var(--section-underline-h) solid currentColor; } /* defensive: ensure no background leaks from wrappers */ .section-heading, .section-heading *{ background-color: transparent !important; } /* ========================================= BREADCRUMBS — NEM theme polish ========================================= */ .breadcrumb-container{ display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; font-size: clamp(.85rem, .18vw + .85rem, 1rem) !important; font-weight: 600 !important; /* base weight */ color: var(--ink-900, #0f172a) !important; letter-spacing: .01em !important; } /* Links → brand blue, bolder, underline on hover */ .breadcrumb-container a{ color: var(--de-blue, #1667d9) !important; text-decoration: none !important; font-weight: 700 !important; } .breadcrumb-container a:hover, .breadcrumb-container a:focus-visible{ color: var(--de-blue-hover, #0f56bd) !important; text-decoration: underline !important; outline: none !important; } /* Separator: lighter tone, a bit of space */ .breadcrumb-container .breadcrumb-separator{ margin: 0 4px !important; opacity: .45 !important; font-weight: 700 !important; } /* Current page (last item): darkest + boldest */ .breadcrumb-container > span:last-child{ color: #0f172a !important; font-weight: 800 !important; } /* Optional: soften visited links slightly */ .breadcrumb-container a:visited{ color: #1458b9 !important; } /* ========================================= SECTION PAGES — balanced small cards Fixed card height, tall image, tiny gap (scoped via breadcrumb so homepage unaffected) ========================================= */ body:has(.breadcrumb-container){ /* tune these */ --section-card-h: clamp(330px, 34vw, 350px); /* total card height */ --section-img-share: 60%; /* % of card used by image */ --section-gap: 4px; /* gap under image */ } /* Card: fixed height again (prevents giant cards) */ body:has(.breadcrumb-container) .molecule-1 .teaser.teaser-type-news{ display:flex !important; flex-direction:column !important; height: var(--section-card-h) !important; /* constrain total size */ overflow:hidden !important; /* trim excess text */ } /* Image takes a percentage of card height */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image{ order:0 !important; height: var(--section-img-share) !important; /* e.g. 60% of card */ flex: 0 0 var(--section-img-share) !important; margin:0 !important; overflow:hidden !important; } /* Ensure wrappers + truly fill */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image-link{ display:block !important; height:100% !important; margin:0 !important; } body:has(.breadcrumb-container) .molecule-1 .teaser .ace-image, body:has(.breadcrumb-container) .molecule-1 .teaser .narrow-format, body:has(.breadcrumb-container) .molecule-1 .teaser .wider-format{ height:100% !important; aspect-ratio:auto !important; } body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; aspect-ratio:auto !important; } /* Content occupies the rest, with a tiny top gap */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-content{ order:1 !important; flex:1 1 auto !important; padding: var(--section-gap) 14px 14px !important; /* small gap under image */ margin-top:0 !important; } /* Keep things compact underneath */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-keyword{ margin-top:0 !important; } body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-title{ margin-top:2px !important; } /* Optional: tighter text to avoid overflow growing the card */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-title{ -webkit-line-clamp: 3 !important; } body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-text{ -webkit-line-clamp: 2 !important; } /* SECTION PAGES — relax spacing + taller images */ body:has(.breadcrumb-container){ /* more total height + bigger image + larger gap under image */ --section-card-h: clamp(360px, 38vw, 420px); --section-img-share: 66%; --section-gap: 12px; } /* give the keyword (section label) a touch more breathing room */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-keyword{ margin-top: 4px !important; /* was 0 */ } /* Optional: make phones a bit taller again */ @media (max-width: 767px){ body:has(.breadcrumb-container){ --section-card-h: clamp(380px, 72vw, 440px); --section-img-share: 70%; --section-gap: 12px; } } /* ===== Mobile gutters (inset cards/headlines) ===== */ :root{ --mobile-gutter: 14px; /* tweak to taste: 12–18px works well */ } @media (max-width: 767px){ /* Inset standard cards */ .teaser.teaser-type-news{ margin-inline: var(--mobile-gutter) !important; } /* Inset the 2 big hero cards */ .molecule-7 .teaser.teaser-type-news.teaser-has-media{ margin-inline: var(--mobile-gutter) !important; } /* Inset slot headings that otherwise run edge-to-edge */ .slot > .slot-heading{ margin-inline: var(--mobile-gutter) !important; } /* Keep the thin separator aligned with the inset */ .two-big-wrapper + .root.separator{ margin-inline: var(--mobile-gutter) !important; } /* Prevent accidental horizontal scroll if any child overflows */ .page, .slot, .content{ overflow-x: clip; } } /* ===== Hide sign-in / subscribe buttons on mobile ===== */ /* Hide Sign in / Subscribe on phones & tablets (≤1023px) */ @media (max-width: 1023px){ /* Common Atex/Piano containers */ .header-login, .header-signin, .header-subscribe, .user-menu, /* guest menu */ [class*="signin"], [class*="subscribe"], [class*="esuite"], .esuite { display: none !important; } /* Topbar items (defensive selectors) */ .topmenu-links .submenu-toolbar ul > li > a[title="Sign in"], .topmenu-links .submenu-toolbar ul > li > a[title="Subscribe"], .topmenu-links .submenu-toolbar ul > li > a[href*="/login"], .topmenu-links .submenu-toolbar ul > li > a[href*="subscribe"], .topmenu-links .submenu-toolbar ul > li > a[href*="subscriptions"]{ display: none !important; } } /* (Optional) keep desktop unchanged ≥1024px */ /* SECTION PAGES — remove interlaced gutter on desktop only */ @media (min-width: 1024px){ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-content[class*="teaser-interlaced"]{ display:block !important; margin:0 !important; padding: var(--section-gap) 14px 14px !important; min-height:0 !important; height:auto !important; grid:none !important; } /* ensure image first, content second (desktop only) */ body:has(.breadcrumb-container) .molecule-1 .teaser.teaser-type-news{ display:flex !important; flex-direction:column !important; } body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image{ order:0 !important; } body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-content{ order:1 !important; } /* kill any stray top margin on the first line (e.g., the section label) */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-content > *:first-child{ margin-top:0 !important; } } /* ========================================================== SECTION PAGE CARDS — remove interlaced offset on desktop ========================================================== */ @media (min-width: 1024px){ body:has(.breadcrumb-container) .molecule-1 .teaser.teaser-type-news.teaser-has-media { display: flex !important; flex-direction: column !important; position: relative !important; overflow: hidden !important; } /* Reset the image to normal flow, no absolute positioning */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image { position: static !important; height: 66% !important; /* keeps the nice proportion you liked */ flex: 0 0 auto !important; margin: 0 !important; } /* Force any interlaced styles off the content */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-content[class*="teaser-interlaced"] { position: static !important; top: auto !important; grid: none !important; margin: 0 !important; padding: 6px 14px 14px !important; height: auto !important; min-height: 0 !important; } /* Make sure section name sits tight under the image */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-content > *:first-child { margin-top: 0 !important; } } /* SECTION PAGES — make the image truly fill the image area (desktop only) */ @media (min-width:1024px){ /* The card uses a fixed height; image gets ~66% of it */ body:has(.breadcrumb-container) .molecule-1 .teaser.teaser-has-media{ display:flex !important; flex-direction:column !important; } /* Image container */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image{ position:relative !important; height: var(--section-img-share) !important; /* you already set 66% */ flex: 0 0 var(--section-img-share) !important; margin:0 !important; padding:0 !important; line-height:0 !important; overflow:hidden !important; } /* kill any aspect-ratio sizers/pseudo placeholders */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image::before, body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image::after{ content:none !important; display:none !important; } /* Force all wrappers to fill */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image-link{ display:block !important; height:100% !important; margin:0 !important; } body:has(.breadcrumb-container) .molecule-1 .teaser .ace-image{ position:relative !important; width:100% !important; height:100% !important; } body:has(.breadcrumb-container) .molecule-1 .teaser .ace-image > .narrow-format, body:has(.breadcrumb-container) .molecule-1 .teaser .ace-image > .wider-format{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; } body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; aspect-ratio:auto !important; } /* Content block tight under the image */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-content{ order:1 !important; padding: var(--section-gap) 14px 14px !important; margin:0 !important; min-height:0 !important; height:auto !important; } body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-content > *:first-child{ margin-top:0 !important; } } /* ========================================================== SECTION PAGE CARDS — fixed image height on desktop ========================================================== */ @media (min-width:1024px){ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image{ height:219px !important; flex:0 0 219px !important; overflow:hidden !important; margin:0 !important; position:relative !important; line-height:0 !important; } /* make every nested wrapper fill that fixed height */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image-link, body:has(.breadcrumb-container) .molecule-1 .teaser .ace-image, body:has(.breadcrumb-container) .molecule-1 .teaser .ace-image > .narrow-format, body:has(.breadcrumb-container) .molecule-1 .teaser .ace-image > .wider-format{ height:100% !important; width:100% !important; position:absolute !important; inset:0 !important; } /* and the image itself should fully cover */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-image img{ height:100% !important; width:100% !important; object-fit:cover !important; display:block !important; } /* tighten the content gap under the image */ body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-content{ padding:6px 14px 14px !important; margin:0 !important; } body:has(.breadcrumb-container) .molecule-1 .teaser .teaser-content > *:first-child{ margin-top:0 !important; } } /* ========================================= ARTICLE BODY — larger, easier-to-read text ========================================= */ /* Base body size + rhythm (about +8–12%) */ .article-body{ /* scales slightly with viewport but stays sensible */ font-size: clamp(1.05rem, 0.30vw + 1rem, 1.18rem) !important; line-height: 1.7 !important; color: #0f172a; /* ensures good contrast on light bg */ overflow-wrap: anywhere; /* stop long strings breaking layout */ } /* Paragraph spacing */ .article-body p{ margin: 0 0 0.9em !important; /* tighter than default but airy */ } /* Lists: match body size and give a bit of breathing room */ .article-body ul, .article-body ol{ margin: 0 0 1em 1.25em !important; } .article-body li{ margin: 0.35em 0 !important; } /* Headings inside the story: modest scale so they don’t shout */ .article-body h2{ font-size: 1.35em !important; line-height: 1.3 !important; margin: 1.2em 0 .5em !important; font-weight: 800 !important; } .article-body h3{ font-size: 1.2em !important; line-height: 1.3 !important; margin: 1em 0 .5em !important; font-weight: 700 !important; } /* Blockquotes: readable and clearly set off */ .article-body blockquote{ margin: 1.1em 0 !important; padding: .6em 1em !important; border-left: 4px solid rgba(15,23,42,.15) !important; background: #f8fafc !important; font-style: italic; } /* Optional: keep the text column to a comfortable measure on wide screens */ @media (min-width: 1024px){ .article-body{ max-width: 72ch; } /* adjust 68–76ch to taste */ } /* ========================================= No Image Cards ========================================= */ /* Grid article teasers (mega-slot-grid) — no-image variant only */ .mega-slot-grid .molecule-1 .teaser.teaser-type-news.teaser-layout-default:not(:has(.teaser-image)){ background:#0e1623 !important; color:#fff !important; border:none !important; box-shadow:0 4px 18px rgba(0,0,0,.35); border-radius:var(--radius, 14px); display:flex; flex-direction:column; padding:28px 20px 24px !important; overflow:hidden; /* keeps text inside rounded corners */ } /* keyword tag */ .mega-slot-grid .molecule-1 .teaser.teaser-type-news:not(:has(.teaser-image)) .teaser-keyword .keyword-text a{ color:#7cc6ff !important; text-transform:uppercase; font-weight:700; letter-spacing:.03em; } /* title + links */ .mega-slot-grid .molecule-1 .teaser.teaser-type-news:not(:has(.teaser-image)) .teaser-title, .mega-slot-grid .molecule-1 .teaser.teaser-type-news:not(:has(.teaser-image)) .teaser-title a{ color:#fff !important; text-decoration:none !important; line-height:1.3; font-weight:800; font-size:clamp(1.05rem, .5vw + 1rem, 1.4rem); margin-top:12px !important; } /* blurb/excerpt */ .mega-slot-grid .molecule-1 .teaser.teaser-type-news:not(:has(.teaser-image)) .teaser-text{ color:#e2e8f0 !important; margin-top:10px !important; line-height:1.5; font-size:.95rem; } /* small nudge so content sits nicely */ .mega-slot-grid .molecule-1 .teaser.teaser-type-news:not(:has(.teaser-image)) .teaser-content{ margin-top:12px !important; } /* ========================================= HERO / TOP TEASERS — make overlays image-only ========================================= */ /* Only hero cards WITH media get the full-bleed treatment */ .molecule-7 .teaser.teaser-type-news.teaser-has-media{ position: relative !important; display: block !important; height: var(--lead-h) !important; border-radius: var(--lead-radius) !important; overflow: hidden !important; background: #000 !important; border: none !important; box-shadow: var(--shadow-tight), var(--shadow-soft) !important; } /* full-bleed media containers (scoped to has-media) */ .molecule-7 .teaser.teaser-type-news.teaser-has-media .teaser-image, .molecule-7 .teaser.teaser-type-news.teaser-has-media .teaser-image-link, .molecule-7 .teaser.teaser-type-news.teaser-has-media .ace-image, .molecule-7 .teaser.teaser-type-news.teaser-has-media .narrow-format, .molecule-7 .teaser.teaser-type-news.teaser-has-media .wider-format{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; } .molecule-7 .teaser.teaser-type-news.teaser-has-media .teaser-image img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transform: scale(1); transition: transform .35s ease; } .molecule-7 .teaser.teaser-type-news.teaser-has-media:hover .teaser-image img{ transform: scale(1.02); } /* readability gradient — IMAGE CARDS ONLY */ .molecule-7 .teaser.teaser-type-news.teaser-has-media::before{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--lead-grad-a) 35%, var(--lead-grad-b) 72%, var(--lead-grad-c) 100%); } /* overlay text — IMAGE CARDS ONLY */ .molecule-7 .teaser.teaser-type-news.teaser-has-media .teaser-content{ position: absolute !important; left: 0; right: 0; bottom: 0; top: auto !important; z-index: 2; color: #fff !important; padding: 14px 20px 18px !important; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: auto !important; height: auto !important; pointer-events: none; } .molecule-7 .teaser.teaser-type-news.teaser-has-media .teaser-content a{ color:#fff !important; pointer-events:auto; } .molecule-7 .teaser.teaser-type-news.teaser-has-media .teaser-keyword{ margin:0 0 6px 0 !important; } /* ========================================= HERO — NO IMAGE variant (prevent leaks/flicker) ========================================= */ .molecule-7 .teaser.teaser-type-news:not(.teaser-has-media){ position: relative !important; /* create a containing block */ display: flex !important; height: var(--lead-h) !important; border-radius: var(--lead-radius) !important; overflow: hidden !important; background: #0e1623 !important; color: #fff !important; border: 1px solid rgba(0,0,0,.2) !important; box-shadow: var(--shadow-tight), var(--shadow-soft) !important; } /* kill any gradient overlay for no-image cards */ .molecule-7 .teaser.teaser-type-news:not(.teaser-has-media)::before{ content: none !important; } /* place content normally, with comfortable padding */ .molecule-7 .teaser.teaser-type-news:not(.teaser-has-media) .teaser-content{ position: static !important; padding: 20px 22px !important; pointer-events: auto !important; margin-top: 6px; /* nudge down a touch */ } /* white text + tidy sizing */ .molecule-7 .teaser.teaser-type-news:not(.teaser-has-media) .teaser-keyword .keyword-text a{ color:#fff !important; text-transform:uppercase; font-weight:700; letter-spacing:.03em; } .molecule-7 .teaser.teaser-type-news:not(.teaser-has-media) .teaser-title a{ color:#fff !important; } .molecule-7 .teaser.teaser-type-news:not(.teaser-has-media) .teaser-title{ margin: 8px 0 0 !important; font-weight: 800; font-size: clamp(1.25rem, 1.2vw + 1rem, 2.1rem); line-height: 1.15; } .molecule-7 .teaser.teaser-type-news:not(.teaser-has-media) .teaser-text{ color:#e2e8f0 !important; } /* ensure byline stays hidden like image heroes */ .molecule-7 .teaser.teaser-type-news:not(.teaser-has-media) [class*="byline"]{ display:none !important; } /* ========================================= TABLET FIX — prevent single stretched cards ========================================= */ /* Applies between mobile and desktop (landscape/portrait tablets) */ @media (min-width: 768px) and (max-width: 1023px) { /* Section grids: show 2 cards per row instead of 1 */ .root.flex-container.four-cols, .root.flex-container.three-cols { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } /* Ensure cards scale naturally */ .root.flex-container.four-cols .teaser.teaser-type-news, .root.flex-container.three-cols .teaser.teaser-type-news { height: auto !important; min-height: 0 !important; } /* Keep hero/top two cards tidy */ .two-big-wrapper .molecule-7 .teaser.teaser-type-news { height: 320px !important; } /* Slightly reduce font for hero titles so they fit better on tablets */ .molecule-7 .teaser .teaser-title { font-size: clamp(1.1rem, 1vw + 0.9rem, 1.8rem) !important; } /* Optional: tighten padding for tablet width */ .teaser.teaser-type-news .teaser-content { padding: 10px 14px 14px !important; } } /* ========================= HOMEPAGE BESPOKE GRIDS (fix: only one card showing) ========================= */ /* Make the bespoke wrappers grid-based */ .flex-container.four-cols{ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px !important; } .flex-container.three-cols{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px !important; } /* Reset any full-width/flex-basis coming from global teaser rules */ .flex-container.four-cols > .root, .flex-container.three-cols > .root{ width: auto !important; max-width: none !important; flex: initial !important; } /* The injected separators between items aren’t needed in a grid */ .flex-container.four-cols ~ .separator, .flex-container.three-cols ~ .separator, .flex-container.four-cols .separator, .flex-container.three-cols .separator{ display: none !important; } /* Responsive fallbacks */ @media (max-width: 1024px){ .flex-container.four-cols{ grid-template-columns: repeat(2, minmax(0,1fr)); } .flex-container.three-cols{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px){ .flex-container.four-cols, .flex-container.three-cols{ grid-template-columns: 1fr; } } /* Center Sign in / Subscribe with the logo (desktop only) */ @media (min-width: 1024px){ /* Make the top bar a 3-column row and center everything vertically */ .topmenu-inner{ /* .menu-inner-container.topmenu-inner */ display: grid !important; grid-template-columns: auto 1fr auto; /* icons | logo | CTAs */ align-items: center !important; } /* Ensure each region participates in the centering */ .topmenu-icons, .navmenu-logo-wrapper, .topmenu-links{ align-self: center !important; } /* Align the buttons themselves */ .topmenu-links .submenu-toolbar ul{ display: flex; align-items: center; gap: 10px; } .topmenu-links .sidebar-button{ display: inline-flex; align-items: center; line-height: 1; height: 40px; /* keeps the pills nicely centered */ padding: 0 14px; /* retain pill shape without extra top padding */ } /* Kill any stray top padding/margins that push them up */ .topmenu-links, .topmenu-links .submenu-toolbar, .topmenu-links .submenu-toolbar ul{ margin-top: 0 !important; padding-top: 0 !important; } } /* Revert my earlier grid tweak on the header */ @media (min-width: 1024px){ .topmenu-inner{ display: unset !important; grid-template-columns: unset !important; align-items: unset !important; } } /* Only adjust the Sign in / Subscribe block */ @media (min-width: 1024px){ .topmenu-links{ display: flex; /* keeps the pills aligned */ align-items: center; transform: translateY(8px); /* ↓ tweak 6–12px to taste */ } .topmenu-links .submenu-toolbar{ margin: 0 !important; padding: 0 !important; } .topmenu-links .submenu-toolbar ul{ display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; } .topmenu-links .sidebar-button{ display: inline-flex; align-items: center; height: 40px; line-height: 40px; padding: 0 14px; } } /* Desktop header layout: left icons, centered logo, right CTAs */ @media (min-width: 1024px){ .menu-inner-container.topmenu-inner{ display: grid !important; grid-template-columns: auto 1fr auto; /* L | center | R */ align-items: center; /* vertical alignment */ column-gap: 16px; } /* Left group stays left */ .topmenu-icons, #topmenu-social{ grid-column: 1 !important; justify-self: start; float: none !important; } /* Center the logo */ .navmenu-logo-wrapper{ grid-column: 2 !important; justify-self: center; align-self: center; float: none !important; } /* Right-align CTAs and drop them slightly to align with logo baseline */ .topmenu-links{ grid-column: 3 !important; justify-self: end; align-self: center; float: none !important; transform: translateY(50px); /* tweak 0–10px to taste */ } .topmenu-links .submenu-toolbar ul{ display: flex; gap: 12px; margin: 0; padding: 0; } .topmenu-links .sidebar-button{ display: inline-flex; align-items: center; height: 40px; line-height: 40px; padding: 0 14px; } } /* Desktop header: refine logo column size & vertical offset */ @media (min-width:1024px){ .menu-inner-container.topmenu-inner{ display:grid !important; grid-template-columns: 1fr minmax(520px, 1.7fr) 1fr !important; align-items:center; } .topmenu-icons, #topmenu-social{ justify-self:start; } .topmenu-links{ justify-self:end; } .navmenu-logo-wrapper{ justify-self:center; width: clamp(340px, 20vw, 600px); /* ↓ from 380/24vw/680 */ max-width:none; transform: translateY(-15px); } .navmenu-logo.longform-logo img{ position: static !important; width: 100% !important; height: auto !important; max-height: 80px; /* soft ceiling so it never feels oversized */ object-fit: contain !important; } } /* SITE HEADER ONLY — do NOT style article headers */ header:not(.article-header){ position: sticky; top: 0; z-index: 9999; transform: none !important; /* never slide away */ transition: none; } /* If any script toggles this, ignore it */ header:not(.article-header).sticky-hidden{ transform: none !important; } /* Opaque background for the site header area only */ header:not(.article-header), header:not(.article-header) .whole-menu .topmenu, header:not(.article-header) .navmenu{ background: #f6f7f9; /* your header background */ } /* === MOBILE: always show submenu items === */ @media (max-width:1023px){ /* show any child

scope. Verified on Temora: the nav is duplicated four times and one copy (anchor class `top-menu-item`) renders OUTSIDE

, so scoping to

silently misses it. All four copies are

children; the in-article CTA is not. This file only ever HIDES things - it never force-shows them - so the existing responsive rules further up the stylesheet keep working unchanged. ========================================================== */ /* ---------------------------------------------------------- 1. Visibility switching ---------------------------------------------------------- */ /* Signed out, AND the unknown state before GTM has run. Scoping the default to :not(.atx-auth-in) means anonymous visitors - the overwhelming majority - never get a flash of the account button. NOT scoped to

: one of the four nav copies renders outside it. `li:has(> a)` is what keeps this off the in-article paywall CTA. */ html:not(.atx-auth-in) li:has(> a[href*="SubAdm_signin"]), html:not(.atx-auth-in) li:has(> a[href*="/api/auth/logout"]) { display: none !important; } /* Signed in - retire the sign-in button. */ html.atx-auth-in li:has(> a[href*="JWTLogin.aspx"]) { display: none !important; } /* Safety net for any browser without :has(). Hides the anchor rather than the

, so the flex gap doesn't collapse, but nothing leaks. This one DOES stay scoped, because without :has() there's no

guard left to keep it off the in-article CTA.

covers three copies; a.top-menu-item covers the fourth. */ html:not(.atx-auth-in) header a[href*="SubAdm_signin"], html:not(.atx-auth-in) header a[href*="/api/auth/logout"], html:not(.atx-auth-in) a.top-menu-item[href*="SubAdm_signin"], html:not(.atx-auth-in) a.top-menu-item[href*="/api/auth/logout"] { display: none !important; } html.atx-auth-in header a[href*="JWTLogin.aspx"], html.atx-auth-in a.top-menu-item[href*="JWTLogin.aspx"] { display: none !important; } /* DO NOT hide Subscribe from signed-in users. /api/auth/info returns only {valid, crmCustId} - authentication state and a customer ID, with no subscription status. There is therefore no way to distinguish a paying subscriber from a registered account that isn't subscribed, and hiding this button would remove the second group's only path to paying. Revisit only if Atex adds subscription status to that endpoint: html.atx-auth-in header li:has(> a[href*="index.aspx"]) { display: none !important; } */ /* ---------------------------------------------------------- 2. Styling - matches the existing white-pill "Sign in" rule ---------------------------------------------------------- */ .topmenu-links .submenu-toolbar a.sidebar-button.DEFAULT[href*="SubAdm_signin"] { background: #fff !important; color: var(--ink-900) !important; border-color: rgba(15, 23, 42, .16) !important; border-width: 2px !important; padding: 12px 22px !important; } .topmenu-links .submenu-toolbar a.sidebar-button.DEFAULT[href*="/api/auth/logout"] { background: transparent !important; color: var(--ink-900) !important; border-color: rgba(15, 23, 42, .16) !important; border-width: 2px !important; padding: 12px 18px !important; } /* ---------------------------------------------------------- 3. Mobile parity The topbar copies of Sign in / Subscribe are already hidden below 1024px because they also live in the fold-out menu. The account buttons need the same treatment or they'll be the only ones left in the topbar on phones. ---------------------------------------------------------- */ @media (max-width: 1023px) { .topmenu-links .submenu-toolbar ul > li > a[href*="SubAdm_signin"], .topmenu-links .submenu-toolbar ul > li > a[href*="/api/auth/logout"] { display: none !important; } }

Temora Independent, Thursday, 8 October, 2026

Temora Independent, Thursday, 1 October, 2026

Temora Independent, Thursday, 24 September, 2026

Temora Independent, Thursday, 17 September, 2026

Temora Independent, Thursday, 10 September, 2026

Most popular stories

Riverina’s golden paddocks seen from space

Temora Independent, Thursday, 8 October, 2026