/* * Homepage hero: replaces the "Latest News" title + 2-column card grid with * a magazine-style hero (1 large story + 3 stacked stories), reusing the * exact same TagDiv Composer block (td_flex_block_1, td_module_flex_1 cards) * and its live WordPress data - no PHP/template changes, no database edits. * * Targeting problem this file solves: * The grid's marker class (.td-second-articles) is NOT unique - it's reused * on 3 sections of this homepage (the hero grid + two lower sections we were * told not to touch), and TDC's tdi_NN instance IDs regenerate on every * Composer save, so neither can be used directly. Instead, every rule below * is scoped with: * * .tdc-row:has(X):not(.tdc-row:has(X) ~ .tdc-row:has(X)) * * which matches "a .tdc-row containing X, with no earlier sibling .tdc-row * that also contains X" - i.e. only the FIRST matching row on the page. This * is robust to TDC regenerating tdi_NN IDs on re-save (order-based, not * ID-based) and never touches the 2nd/3rd sections sharing the same classes. */ /* ---- Hide the "Latest News" title above the grid (first td_block_title row only) ---- Hides the whole row (not just the inner .td-block-title-wrap), so the row/column/block wrapper's own padding doesn't leave an empty gap behind - that residual space was the "large empty vertical space above the hero". */ .tdc-content-wrap .tdc-row:has(.td_block_title):not(.tdc-row:has(.td_block_title) ~ .tdc-row:has(.td_block_title)) { display: none; } /* ---- Dark overlay + white title, red category: applies to all 4 visible hero cards, all breakpoints ---- */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-module-container { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-image-container { position: absolute; inset: 0; width: 100%; height: 100%; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-module-thumb { height: 100%; } /* Image framing fix. These cards render the featured image as - a CSS background, not an - so object-fit/object-position have no effect here; background-size/background-position are the equivalent. Two things were actively cropping/shifting the image before this file touched it at all: 1. tdi_82's own compiled CSS sets `.td-image-wrap{padding-bottom:100%}` - a padding-based aspect-ratio hack forcing a 1:1 SQUARE crop before the image ever reached the card's actual (rectangular) shape. Overridden below with a real aspect-ratio box instead. 2. tdi_82's own compiled CSS also sets `.entry-thumb{background-position:center 40%}` - shifted off-center vertically. Reset to center center below (requirement 3). background-size:cover is kept (also the plugin's own base default) - needed so the image fills its box without stretching (requirement 5). */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-image-wrap { position: relative; display: block; padding-bottom: 0; /* neutralizes the 1:1 padding-bottom aspect-ratio hack */ aspect-ratio: 16 / 9; width: 100%; height: auto; min-height: 100%; /* falls back to filling the card exactly as before on the shorter stacked cards, where a strict 16:9 box would otherwise leave a gap below the image */ } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .entry-thumb { height: 100%; background-size: cover; background-position: center center !important; } /* * display:flex + justify-content:flex-end is what makes a 1-line title * behave the same as a 2-line one: without it, title+date flow from the * *top* of this box in normal block order, so a shorter (1-line) title * leaves its leftover space at the *bottom* - right where the gradient is * darkest and content should read as anchored - while a 2-line title * (near this box's min-height reservation) happens to fill it almost * exactly, so only short titles looked "floating" above the shadow * instead of sitting in it. Flexing the group to the end of the box means * any leftover space from a shorter title goes *above* the title instead * (toward the badge), and the date row - the actual bottom-most content - * lands at the same fixed distance from the card's bottom edge on every * card, long title or short. */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-module-meta-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; min-height: 116px; /* reserves a predictable box so the category badge (positioned separately, above this) never overlaps title/author/date - see .td-post-category below. The stacked-cards-only condensing lives in the nth-child(n+2) overrides further down - this base rule (shared with the large card) is back to its original spacing. */ box-sizing: border-box; background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 65%, rgba(0, 0, 0, 0) 100%); border: none; display: flex; flex-direction: column; justify-content: flex-end; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .entry-title, .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .entry-title a { color: #ffffff !important; } /* Cap titles to 2 lines so the meta-info min-height reservation above is always enough, regardless of how long a given post's title is - this is what guarantees the category badge never overlaps it. */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .entry-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-post-author-name a, .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-post-author-name span, .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-post-date, .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .entry-date { color: rgba(255, 255, 255, 0.85) !important; } /* Category badge over the image, directly above the title, inside the same overlay - not a separate strip above the image (that was the earlier bug) and not overlapping the title/author/date. .td-post-category lives inside .td-image-container (now absolutely positioned to fill the whole card, see above), so anchoring it absolute here places it against the image. The bottom offset (120px) equals the meta-info min-height (116px) plus a 4px gap - the same 4px gap is reused for the large card override below. The stacked-cards-only condensing lives in the nth-child(n+2) overrides further down. The 2-line title clamp above guarantees the meta-info box is never taller than its reservation, so there's no overlap regardless of title length. Badge padding/font-size reduced ~25% from the block's own defaults (8px 16px / 14px) to free up the vertical room the smaller stacked cards need - see the size overrides below too. */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-post-category { position: absolute; left: 20px; bottom: 120px; z-index: 3; margin: 0; padding: 6px 12px !important; font-size: 11px !important; /* already red (#dd0000) by default from the block's own config - unchanged */ } /* Hero cards don't need a separate "Read more" button or the grid's own load-more/pagination controls - the whole card is the link. */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-read-more, .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-load-more-wrap, .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-next-prev-wrap { display: none; } /* ---- Card container: full width by default (mobile/tablet stack) ---- */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_block_inner { display: flex; flex-direction: column; gap: 16px; margin: 0; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap { width: 100%; float: none; margin: 0; padding: 0; } /* Only 4 cards make the hero (1 large + 3 stacked); the block still queries 6 dynamically (its own "limit" setting, untouched) - the extra 2 are just not displayed here. */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap:nth-child(n+5) { display: none; } /* ---- Desktop: 1 large story left, 3 stacked stories middle ---- */ @media (min-width: 1019px) { /* Height reduced 620px -> 460px (~-26%, matches the ~25% target). Column split (3.5fr:1fr) and row-span layout are unchanged - card 1 still spans all 3 rows and stretches to fill them (CSS Grid's default align-self:stretch), so at ~801px wide (75% hero column x 3.5/4.5, minus gaps) x 460px tall it lands at ~1.74:1, i.e. "roughly 16:9" (1.78:1) - reusing the existing stretch behavior rather than fighting it with an explicit aspect-ratio that would have to override the row-span stretch anyway. The 3 stacked cards shrink proportionally since they're 1fr rows of the same shorter grid (shorter per requirement 4; their width/column is untouched, so they read "wider" relative to their new height). column-gap reduced (horizontal, between the featured and stacked column) per requirement 5; row-gap (between the 3 stacked cards themselves) left as-is. The sidebar beside it (.td-pb-span4, Follow ArtistHeat panel) is taller than this at the >=1019px breakpoint and the two columns don't stretch to match each other, which leaves empty space below the hero before the row (sized to the taller sidebar) actually ends. Raising this height to close that gap made the hero itself read as oversized/disproportionate instead - reverted. See latest-articles-refine.css instead: the Latest News row is pulled up to meet the hero's own (shorter, unchanged) bottom edge, while its Trending This Week column is pushed back down by the same amount so it stays aligned with the sidebar above it. */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_block_inner { display: grid; grid-template-columns: 3.5fr 1fr; grid-template-rows: repeat(3, 1fr); column-gap: 12px; row-gap: 20px; height: 460px; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap { height: 100%; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-module-container { aspect-ratio: auto; height: 100%; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap:nth-child(2) { grid-column: 2; grid-row: 1; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap:nth-child(3) { grid-column: 2; grid-row: 2; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap:nth-child(4) { grid-column: 2; grid-row: 3; } /* * ---- Large story (1st column) - condensed, bottom-left ---- * * Same condensing approach as the stacked cards below, scaled for this * card's own bigger 30px title (kept at 30px - this card has plenty of * height, unlike the stacked cards, so there's no need to shrink the * font, just tighten the spacing around it). * * Padding cut from a uniform 30px to 12px top / 20px sides / 20px * bottom - the tighter top pulls the title closer to the badge above * it, and the tighter sides pull the whole block further into the * bottom-left corner. The 20px side padding also now exactly matches * the badge's own left offset (the shared 20px from the base rule * above), so the badge's left edge lines up flush with the title's - * previously off by 10px (badge at 20px, title inset by the old 30px * padding). * * min-height recalculated for the unchanged 30px title (2 lines ~72px) * + author/date row, with a tightened 5px inter-gap (was 8px): 12px * pad + 72px title + 5px gap + 18px date row + 20px pad = 127px, * rounded up to 128px. Badge sits a tight 2px above that (was 4px) at * 130px. */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap:nth-child(1) .entry-title { font-size: 30px !important; line-height: 1.2 !important; margin-bottom: 5px !important; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap:nth-child(1) .td-module-meta-info { padding: 12px 20px 20px; min-height: 128px; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap:nth-child(1) .td-post-category { bottom: 130px; /* 128px meta-info min-height + 2px gap */ } /* * ---- Stacked stories (2nd column, 3 cards) - condensed, bottom-left ---- * * Everything below is scoped to nth-child(n+2) only - the large card * (nth-child(1)) and the base/mobile rules above are untouched. * * Own (smaller) overlay padding instead of inheriting the shared 20px * base: 6px top, 12px sides/bottom - noticeably tighter on every edge, * which is also what pulls the badge+title block further into the * bottom-left corner of each card (less inset = closer to the corner). * The badge's own left offset and size are tightened to match. * * min-height recalculated for this card's own 16px title (2 lines * ~40px) + author/date row, with a tightened 4px inter-gap (was 6px): * 6px pad + 40px title + 4px gap + 16px date row + 12px pad = 78px. * Badge sits a tight 2px above that at 80px. Both comfortably fit the * ~140px card height (460px hero height / 3 rows, minus gaps). */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap:nth-child(n+2) .entry-title { font-size: 16px !important; line-height: 1.25 !important; margin-bottom: 4px !important; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap:nth-child(n+2) .td-module-meta-info { padding: 6px 12px 12px; min-height: 78px; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap:nth-child(n+2) .td-post-category { left: 12px; /* matches this card's own tighter side padding, was the shared 20px */ bottom: 80px; /* 78px meta-info min-height + 2px gap */ padding: 4px 10px !important; font-size: 10px !important; } } @media (min-width: 768px) and (max-width: 1018px) { .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td_module_wrap:nth-child(1) .td-module-container { aspect-ratio: 16 / 9; } } /* * ---- Parent row/column width fix (desktop only, >=1019px) ---- * * The 78/22 split set above for the hero/stacked cards was already correct * relative to its own container - the container itself was the problem. * newspaper/style.css (parent theme, unmodified) has a global rule: * * .td-container, .tdc-row, .tdc-row-composer { width: 1068px; margin: 0 auto; } * * which applies to any .tdc-row that doesn't carry a stretch_row_XXXX * class - and the row wrapping the hero grid + sidebar has none, so the * *entire* hero+sidebar row was capped at 1068px total before the 8/4 * (66.66%/33.33%) column split even applied, leaving the hero column only * ~712px wide regardless of the internal card-grid ratio. Fixed here by: * 1. widening that specific row past 1068px, * 2. changing its two columns from the default 8/4 (66.66%/33.33%) grid * split to 75%/25%. * * Both are scoped with the same :has()/:not() "first matching row only" * pattern as the rest of this file, so no other .tdc-row on the site (which * reuses the same generic width:1068px rule) or other .td-pb-span8/ * .td-pb-span4 columns elsewhere on this page are affected. Column width is * overridden on width, max-width, flex, and flex-basis together since the * exact active mechanism wasn't identifiable from the compiled CSS alone * (no bare .td-pb-span8{width:...} rule exists in any plugin/theme file) - * overriding all of them guarantees the new split takes hold regardless. */ @media (min-width: 1019px) { /* 1. Row: 1068px -> up to 1400px, never wider than the viewport (keeps it centered and prevents horizontal overflow per requirement 6). */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) { width: min(1400px, calc(100vw - 40px)); max-width: min(1400px, calc(100vw - 40px)); margin-left: auto; margin-right: auto; } .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .vc_row, .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .tdc-columns { width: 100%; max-width: 100%; } /* 2. Hero column: 66.66% -> 75% */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-pb-span8 { width: 75% !important; max-width: 75% !important; flex: 0 0 75% !important; flex-basis: 75% !important; } /* Sidebar column: 33.33% -> 25%. Its own widgets/content are untouched - only the containing column's width changes. */ .tdc-content-wrap .tdc-row:has(.td-second-articles):not(.tdc-row:has(.td-second-articles) ~ .tdc-row:has(.td-second-articles)) .td-pb-span4 { width: 25% !important; max-width: 25% !important; flex: 0 0 25% !important; flex-basis: 25% !important; } }