gets the same width/centering/edge-padding recipe .site-header-inner/.site-nav-inner/.site-footer-inner already use (var(--max-width-wide) + auto margins + var(--gutter) padding), so an article's or category listing's content lines up with the masthead's own left/right edges - EXCEPT .showcase, reset back to genuinely full-width immediately below (matching main exactly, the same "just don't constrain it" approach that already makes header/nav- bar/footer reliably full-width - see .showcase-section further down for why the constraint moves to a level below .showcase itself instead of being dropped here). Plain `main > *`, not `main > *:not(.showcase)` - :not()'s argument counts toward specificity as if it were written plain (a class selector, here), which made the exclusion-selector version of this rule MORE specific than a bare element selector like `article {}` or a single class like `.category-header {}` - so article's own narrower max-width (below) and, before this fix, a category page's title block were both silently losing their own overrides back to this rule's wider max-width, specificity beating source order regardless of which one actually came later in the file. A plain `main > *` has the same specificity as those single-selector rules, so normal source-order cascade (last one wins) does what was actually intended all along. */ main > * { max-width: var(--max-width-wide); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } main > .showcase { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* ── Showcase sections ────────────────────────────────────────────*/ /* Each section carries its own width/centering now, not the .showcase wrapper (main > .showcase above deliberately resets it back out) - because the L/XL templates (below) need to be full-width, and they can only actually reach that by having a genuinely unconstrained parent to sit inside; nesting them inside a constrained .showcase and then trying to calculate a breakout back out past that constraint is exactly what caused the last several rounds of trouble (vw vs. the scrollbar, container-query units vs. main's own flex sizing, etc.) - all fragile workarounds for a self-imposed problem. A normal section keeps the masthead-matching width via this rule; L/XL cancel it straight out below, the same "just don't constrain it" fix as main itself gets from its own parent. */ .showcase-section { max-width: var(--max-width-wide); margin: 0 auto 20px; padding-left: var(--gutter); padding-right: var(--gutter); } /* Design-authored, admin-supplied markup (see showcase.php) - only minimal spacing here, no opinionated typography, since a prefix/suffix is expected to bring its own. */ .showcase-section-prefix { margin: 0 0 14px; } .showcase-section-suffix { margin: 14px 0 0; } .showcase-breaking {background: var(--palette-breaking);} /* .showcase-home-trending - one-off full-bleed var(--palette-blue) band for the home page's "Trending topics" tags section (set via the Builder tab's own CSS class field, not auto-added by a Template the way showcase-l/showcase-xl below are). Same break-out as those: cancel .showcase-section's own max-width/margin-left/margin-right straight back to genuinely full-width, then re-apply that same width+centering one level down to the section's actual content (prefix/.showcase-tags/ suffix - see _renderShowcaseTagsSection(), showcase.php) so it lines up with the rest of the page inside the full-bleed band. A bespoke class rather than a new Template option since this is one specific section's look, not a reusable layout. */ .showcase-home-trending { max-width: none; margin-left: 0; margin-right: 0; padding: 32px 0; text-align: center; background: linear-gradient(132deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(83, 173, 237, 1) 100%); } .showcase-home-trending .showcase-section-prefix, .showcase-home-trending .showcase-tags, .showcase-home-trending .showcase-section-suffix { max-width: var(--max-width-wide); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* .showcase-tags is itself a flex row (see its own rule further down) - text-align: center above only centers inline/block content, so the pill row needs its own justify-content to actually center as a group rather than just hugging the left edge of its (still full-width, now centered-text) container. */ .showcase-home-trending .showcase-tags { justify-content: center; } /* Overrides the home page's shared title styling (#showcase-home-page .showcase-section-prefix, further down) for this one band only - an id selector beats any number of classes on specificity alone, so this has to repeat that same id rather than just adding a .showcase-home-trending rule, or it would silently lose to the shared rule regardless of source order. Shared font-size/line-height/font-weight/::after still apply; only what actually needs to differ against a coloured band - no uppercase, white with a subtle shadow for legibility over the gradient's lighter end - is repeated here. */ #showcase-home-page .showcase-home-trending .showcase-section-prefix { text-transform: none; color: var(--palette-white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* "L" template (Template dropdown, Builder tab) - its markup lives in components/section-templates/l.php, but its styling lives here with everything else; showcase.php auto-adds a "showcase-l" class to any section using that template, giving these rules a stable selector regardless of what's (or isn't) in the section's own css_class field. Full-bleed width, edge to edge (no background of its own - combine with a utility class like showcase-breaking, below, in the section's own CSS class field for one), while its content stays lined up with everything else. This section lives inside .showcase, and every .showcase-section (above) already gets its own width/centering directly (var(--max-width-wide), centered, var(--gutter) padding) specifically so .showcase itself is never constrained in the first place. That means this template doesn't have to calculate a breakout past anything (earlier attempts at exactly that - width:100vw or 100cqw plus a negative margin - kept hitting new edge cases: vw doesn't subtract the scrollbar's width on most desktop browsers; cqw needs a query container, and main establishing one fought its own flex sizing). It just cancels the same three properties it inherits from .showcase-section (max-width/margin-left/margin-right) back to nothing - the same "just don't constrain it" fix main itself gets from body. */ .showcase-l { max-width: none; margin-left: 0; margin-right: 0; padding: 16px 0; color: var(--palette-black); } .showcase-l .showcase-section-prefix, .showcase-l .showcase-grid, .showcase-l .showcase-section-suffix { max-width: var(--max-width-wide); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* L defaults to the page's dark body colour (var(--palette-black), set above) - only illegible when combined with an accent-coloured band like .showcase-breaking (via the section's own css_class field), so the white override - plus a lighter placeholder tint for images without one, matching the masthead's own image-less-card treatment logic - only applies then, not unconditionally. */ .showcase-l.showcase-breaking, .showcase-l.showcase-breaking .showcase-card-link { color: rgba(255, 255, 255, 1); } .showcase-l.showcase-breaking .showcase-card img { background: rgba(255, 255, 255, 0.12); } /* var(--color-muted) (the meta line's default colour) is a dark grey - low-contrast on the same accent band the two rules above exist to fix, so it gets its own translucent-white override alongside them. */ .showcase-l.showcase-breaking .showcase-card-meta { color: rgba(255, 255, 255, 0.75); } /* Hero layout, not the standard repeating card grid - one column (so a second curated item stacks below rather than squeezing in beside the first), each card laid out image-beside-headline instead of image-above-headline. .showcase-card-link only exists when the item actually has a link (see item-card.php) - .showcase-card itself is targeted too so an unlinked item (no resolvable URL yet) still gets the same side-by-side treatment instead of silently falling back to the default stacked layout. */ /* minmax(0, 1fr), not bare 1fr - a bare 1fr track is implicitly minmax(auto, 1fr), and "auto" resolves to the item's max-content size. The card's image has flex-shrink: 0 (never shrinks below its 50% basis), so paired with a long headline its automatic minimum width can exceed the track's real width and blow the card out past the grid's edge instead of shrinking to fit. */ .showcase-l .showcase-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .showcase-l .showcase-card, .showcase-l .showcase-card-link { display: flex; flex-direction: row; align-items: stretch; gap: 28px; } /* overflow: hidden is what actually makes border-radius round the image's own corners too, not just the text panel's - clipping both children to one unified rounded rectangle rather than rounding each separately. background: #fff (not just .showcase-card-body's own white, above) - the image's aspect-ratio fixes its height independent of the row's actual stretched height, so a row taller than the image (a two-line headline) leaves the image short of the row's full height; this is what shows through that leftover space, and through the flex gap beside it, instead of the grey page background. */ .showcase-l .showcase-card { border-radius: 12px; overflow: hidden; background: #fff; } /* When the item has a link, .showcase-card-link (not .showcase-card) is the one actually holding the image+headline row - but as a flex ITEM of .showcase-card's own row, it defaults to hugging its content's width rather than filling the card, which left the nested img's flex-basis: 50% (below) resolving against that too-small width instead of the card's real width - min-width: 0 overrides the default flex-item min-width: auto, which otherwise refuses to shrink narrower than the image's intrinsic size and would reintroduce the same too-wide-image symptom this whole rule exists to fix. */ .showcase-l .showcase-card-link { flex: 1; min-width: 0; } .showcase-l .showcase-card img { /* 33% (a third of the row) rather than XL's 50% - L reads as a denser feed entry, not a second hero. */ flex: 0 0 33%; min-width: 0; width: auto; /* Overrides the "first section's lead card" hero rule further down (21/9, meant for a full-width image above a headline, and explicitly excludes .showcase-l/.showcase-xl/.showcase-m/.showcase-s via :not() so it can't silently outrank this on specificity) - at a third of the row's width beside the headline rather than above it, that ratio reads as an odd thin strip; object-fit: cover (base .showcase-card img rule) does the actual re-cropping to this ratio. Same 16:9 as M now, for one consistent crop across every feed row size. */ aspect-ratio: 16 / 9; } /* .showcase-card-body (title + meta) takes over h3's old flex-item role here - it, not h3 alone, is what sits beside the image now that a .showcase-card-meta line lives underneath the headline (see item-card.php). */ .showcase-l .showcase-card-body { flex: 1; min-width: 0; background: #fff; /* Explicit, not inherited - .showcase-l.showcase-breaking (further up) turns the whole row's text white for legibility on a coloured band, which would otherwise cascade in here and vanish against this panel's own opaque white. */ color: var(--color-text); justify-content: center; padding: 24px; } .showcase-l .showcase-card h3 { margin: 0; font-size: 1.9em; line-height: 1.25; } /* "XL" template - components/section-templates/xl.php, auto-tagged "showcase-xl" the same way L is tagged "showcase-l" (see above). The straight Major -> XL rename: same full-bleed width breakout and same image-beside-headline row layout as L, just bigger (larger headline type, wider image column) to match Major's original proportions. */ .showcase-xl { max-width: none; margin-left: 0; margin-right: 0; padding: 16px 0; color: var(--palette-black); } .showcase-xl .showcase-section-prefix, .showcase-xl .showcase-grid, .showcase-xl .showcase-section-suffix { max-width: var(--max-width-wide); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* Same conditional white-on-accent-band override as L, above - XL defaults to var(--palette-black) (set above) too. */ .showcase-xl.showcase-breaking, .showcase-xl.showcase-breaking .showcase-card-link { color: rgba(255, 255, 255, 1); } .showcase-xl.showcase-breaking .showcase-card img { background: rgba(255, 255, 255, 0.12); } .showcase-xl.showcase-breaking .showcase-card-meta { color: rgba(255, 255, 255, 0.75); } /* Hero layout, same shape as L (image-beside-headline, single column so a second curated item stacks below) - see .showcase-l above for why .showcase-card-link is targeted alongside .showcase-card. XL's own proportions run bigger throughout: wider gap, a larger image column, and (below) larger headline type. */ /* minmax(0, 1fr), not bare 1fr - same grid-blowout fix as L, above. */ .showcase-xl .showcase-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .showcase-xl .showcase-card, .showcase-xl .showcase-card-link { display: flex; flex-direction: row; align-items: stretch; gap: 32px; } .showcase-xl .showcase-card { border-radius: 12px; overflow: hidden; background: #fff; } .showcase-xl .showcase-card-link { flex: 1; min-width: 0; } .showcase-xl .showcase-card img { /* Roughly half the row, the biggest image column of the four feed sizes (L 33%, M/S narrower still - see their own rules below) - landscape 3/2, wide enough at this width to read as a real photo rather than a crop. */ flex: 0 0 50%; min-width: 0; width: auto; aspect-ratio: 3 / 2; } /* .showcase-card-body (title + meta) takes over h3's old flex-item role here - same reasoning as .showcase-l .showcase-card-body above. */ .showcase-xl .showcase-card-body { flex: 1; min-width: 0; background: #fff; color: var(--color-text); justify-content: center; padding: 28px; } .showcase-xl .showcase-card h3 { margin: 0; font-size: 2.4em; line-height: 1.2; } .showcase-xl .showcase-card-link:hover h3 { text-decoration: underline; } /* "M" template - components/section-templates/m.php (identical markup to every other section template - see that file's own comment). Unlike L/ XL, M is NOT full-bleed. It also isn't just left at .showcase-section's own default width either - L's own row content is ALSO capped at var(--max-width-wide) once full-bleed's background is accounted for (.showcase-l .showcase-grid, above), so the two would otherwise render at the exact same content width and only differ by L's background being able to bleed past it. This explicit, narrower max-width is what actually reads as "M, inset with real margin either side" rather than "L with a shorter background". Same image-beside-headline row shape as L, just smaller throughout (width, image column, gap, type) - "L, scaled down", not a different layout. */ .showcase-m { max-width: 880px; } .showcase-m .showcase-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .showcase-m .showcase-card, .showcase-m .showcase-card-link { display: flex; flex-direction: row; align-items: stretch; gap: 20px; } .showcase-m .showcase-card { border-radius: 12px; overflow: hidden; background: #fff; } .showcase-m .showcase-card-link { flex: 1; min-width: 0; } .showcase-m .showcase-card img { /* Same 33% share of the row as L (this is "L, scaled down", not a different ratio) - it reads smaller in practice purely because M's own row is narrower (880px vs. L's full-bleed/~1000px content). */ flex: 0 0 33%; min-width: 0; width: auto; aspect-ratio: 16 / 9; } .showcase-m .showcase-card-body { flex: 1; min-width: 0; background: #fff; color: var(--color-text); justify-content: center; padding: 18px; } .showcase-m .showcase-card h3 { margin: 0; font-size: 1.35em; line-height: 1.3; } /* "S" template - components/section-templates/s.php. The smallest feed row: narrower still than M's own column (var(--max-width), the same narrower reading-column width article/page content uses, rather than M's var(--max-width-wide)), a smaller image share, and a near-square crop rather than L/M's 4/3 - at this width a landscape crop leaves too thin a strip to read as a real photo. */ .showcase-s { max-width: var(--max-width); } .showcase-s .showcase-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .showcase-s .showcase-card, .showcase-s .showcase-card-link { display: flex; flex-direction: row; align-items: stretch; gap: 14px; } .showcase-s .showcase-card { border-radius: 12px; overflow: hidden; background: #fff; } .showcase-s .showcase-card-link { flex: 1; min-width: 0; } .showcase-s .showcase-card img { flex: 0 0 28%; min-width: 0; width: auto; aspect-ratio: 1 / 1; } .showcase-s .showcase-card-body { flex: 1; min-width: 0; background: #fff; color: var(--color-text); justify-content: center; padding: 12px; } .showcase-s .showcase-card h3 { margin: 0; font-size: 1.05em; line-height: 1.3; } .showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 20px; } /* Columns support (showcase.php's own row_group grouping) - two or more sections sharing a Builder-tab "Row group" value render as N even columns instead of stacked full-width. --showcase-row-columns is set inline per-row (however many sections share that row_group), not a fixed set of N-up classes, since a row's own column count is whatever the admin grouped together, not a small fixed set of layouts. max-width/margin/padding here are the SAME width-capping/centering/ gutter treatment .showcase-section normally gives itself (below) - moved up to the row as a whole rather than left on each section, since a lone section's own max-width does nothing useful once its "section" is really just one narrow grid column (the max-width is already wider than the column, so it never binds) - without this the row stretched edge-to-edge past the page's own content column instead of lining up with every section above/below it. */ .showcase-row { display: grid; grid-template-columns: repeat(var(--showcase-row-columns, 1), 1fr); gap: 32px; max-width: var(--max-width-wide); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* Each column now sits inside the row's own width cap/gutter (above), so its own copy of the same centering/gutter would just add a second, redundant inset - reset here to fill the grid cell edge-to-edge instead. margin-top/-bottom deliberately NOT reset (only left/right, and via longhands, not the margin shorthand) - the row still wants each column's normal trailing space below it. padding-top:0 is a second, separate fix: a section's own Template (S/M/L/XL) can add its own top/bottom padding independently of any of this (.showcase-l/.showcase-xl's own padding:16px 0, above - no equivalent rule for S/M at all), so two row-mates on different templates would otherwise start at different heights - an L column's card sitting 16px lower than an M column's beside it, reading as broken alignment even though each section is doing exactly what its own template intends outside a row. This specificity (two classes) already beats .showcase-l/-xl's own (one class) for padding-left/ -right above; the same rule now wins padding-top too. padding-bottom deliberately left alone - unlike the top edge, different-height columns ending at different points lower down is normal column behaviour, not a mismatch to flatten. */ .showcase-row .showcase-section { max-width: none; margin-left: 0; margin-right: 0; padding-top: 0; padding-left: 0; padding-right: 0; } /* L/XL's OWN gutter/centering doesn't live on .showcase-section at all (that one's already max-width:none/margin:0 for them, so their section can go full-bleed edge to edge) - it's on .showcase-grid/-prefix/-suffix INSTEAD (.showcase-l/.showcase-xl .showcase-grid, near the top of this file: its own max-width:var(--max-width-wide), margin-left/right:auto, padding-left/right:var(--gutter)). The reset above only ever touched the section itself, so an L/XL column in a row was getting the gutter applied TWICE - once from .showcase-row's own padding-left/right, and AGAIN from this inner re-centering, which has no idea it's now sitting inside an already-narrow row column instead of a full viewport section - that's the extra left/right inset that made an L/XL column read as indented compared to an "M" column beside it (M has no such inner-grid gutter to begin with, so it was only ever getting the row's own single gutter). Three classes here beats that rule's own two, so this wins on specificity, not just source order. */ .showcase-row .showcase-l .showcase-grid, .showcase-row .showcase-l .showcase-section-prefix, .showcase-row .showcase-l .showcase-section-suffix, .showcase-row .showcase-xl .showcase-grid, .showcase-row .showcase-xl .showcase-section-prefix, .showcase-row .showcase-xl .showcase-section-suffix { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } @media (max-width: 720px) { /* Stacked, not squeezed - a 3-up row of card grids has no readable width left per column once the viewport itself is phone-sized. Reverts to one column; each section's own unconditional margin-bottom (unaffected by any of this) is what actually spaces them apart once stacked, same as it always has. */ .showcase-row { grid-template-columns: 1fr; gap: 0; } } .showcase-card { display: flex; flex-direction: column; } .showcase-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #f0f0f0; } .showcase-card h3 { font-family: var(--font-headline); font-size: 1.15em; line-height: 1.3; font-weight: 800; margin: 10px 0 0; } /* Same structure-only/no-colour base as .article-flags/.article-flag (see that comment) - sits above the headline in the card's own text block, ahead of h3's own margin-top so a flagged card doesn't get extra top spacing on top of this row's own. Square corners throughout (no border-radius anywhere in this file's flag rules) - this title's own look, not a default worth assuming for every template. */ .showcase-card-flags { display: flex; flex-wrap: wrap; gap: 4px; } .showcase-card-flag { display: inline-block; padding: 2px 7px; font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; background: var(--palette-blue); color: #fff; } .showcase-card-flags + h3 { margin-top: 6px; } /* "Breaking News" example (flagkey breaking-news) - black badge / yellow text, same var(--palette-breaking) gradient .showcase-breaking already uses site-wide. The parent modifier targets .showcase-card-body specifically, not the whole .showcase-card - that's what keeps the image itself from getting tinted too in the standard grid (M/S, image above text, no flex gap between the two to worry about). Add a --{flagkey} pair like this for every flag that needs its own look; anything without one keeps the neutral default above. */ .showcase-card-flag--breaking-news { background: var(--palette-black); color: rgb(249, 255, 0); } .showcase-card--flag-breaking-news .showcase-card-body { background: var(--palette-breaking); padding: 14px; } /* Feed rows (L/M/S/XL) only, below - the standard grid above needs none of this. */ /* The badge sits directly against the headline otherwise (h3's own margin-top is 0 on every feed row template - see each one's own .showcase-card h3 rule, which wins on specificity over .showcase-card-flags + h3 above regardless of source order) - this gives it real breathing room instead. */ .showcase-l .showcase-card-flags, .showcase-m .showcase-card-flags, .showcase-s .showcase-card-flags, .showcase-xl .showcase-card-flags { margin-bottom: 1em; } /* Every feed row template's own gap (L 28px, XL 32px, M 20px, S 14px - see each one's .showcase-card rule above) sits between the image and .showcase-card-body - color on .showcase-card-body alone (above) doesn't reach into that gap, so it showed as an undesired band of plain page background between the image and the coloured text panel. Colouring .showcase-card itself instead (its own flex container, gap included) fills that band too - the image sits opaquely on top of its own share of the row so it's never actually visible through it, only the gap and the text panel are. */ .showcase-l .showcase-card--flag-breaking-news, .showcase-m .showcase-card--flag-breaking-news, .showcase-s .showcase-card--flag-breaking-news, .showcase-xl .showcase-card--flag-breaking-news { background: var(--palette-breaking); } /* Every feed row template's .showcase-card-body now has its own opaque white background by default (each template's own rule, above) so the gradient coloured onto .showcase-card itself (just above) would otherwise be hidden behind it in the text panel - only the image-to- text gap would actually show the gradient. Cancelling back to transparent here lets it show through the whole row, same as before .showcase-card-body had a background of its own to get in the way. align-items/justify-content/padding need no flagged-state override any more - stretch + centered + padded text is every feed row's own default now, not something only the flagged state opts into. */ .showcase-l .showcase-card--flag-breaking-news .showcase-card-body, .showcase-m .showcase-card--flag-breaking-news .showcase-card-body, .showcase-s .showcase-card--flag-breaking-news .showcase-card-body, .showcase-xl .showcase-card--flag-breaking-news .showcase-card-body { background: transparent; } /* Wraps title + meta together (see item-card.php) - lets L/XL's flex row put the whole text block beside the image as one flex item instead of the image row splitting three ways once a meta line exists alongside the headline (see .showcase-l/.showcase-xl .showcase-card-body above). In the default column layout (M/S) it's also what makes the meta line cling to the bottom of the card: a flex column of its own, so .showcase-card-meta's margin-top: auto (below) has somewhere to push against - title stays put, meta eats whatever space a shorter title (one line vs. two) leaves below it, so every card in a row lines its meta up at the same height regardless of title length. flex: 1 is what gives it that spare space to push into in the first place - see .showcase-card-link below for why it's there to hand down. */ .showcase-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; } /* Category · time, same secondary-text treatment as the article byline (.byline, below) - one line, small, muted. The category/time separator is a ::after on category rather than a static string between two spans, so it disappears on its own when time is absent (:not(:last-child)) - an item can have a category with no resolvable time, or vice versa. margin-top: auto (not a fixed value) is what clings this to the bottom of .showcase-card-body's flex column - padding-top is a floor under that, so title and meta never actually touch even when there's no spare height to push into (a two-line title filling the card). */ .showcase-card-meta { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: var(--color-muted); font-size: 0.8em; } .showcase-card-category { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .showcase-card-category:not(:last-child)::after { content: '·'; margin-left: 6px; font-weight: 400; } /* Category page tiles (.category-grid, category.php's own fixed 4-across grid) want the date on its own line below the category, instead of the default row's "category · time" - still an image-above-text tile grid, unlike every showcase section template now (L/M/S/XL are all feed rows sharing the base row-meta layout, so none of them need this override any more - see their own .showcase-card-meta rules elsewhere in this file for the ones that still diverge). The category/time separator is only meaningful in a row, so it's dropped here too. */ .category-grid .showcase-card-meta { flex-direction: column; align-items: flex-start; gap: 2px; } .category-grid .showcase-card-category:not(:last-child)::after { content: none; } /* flex: 1 (not the block it used to be) is what gives .showcase-card-body the row's full spare height to work with in the default column layout - .showcase-card itself already stretches to the tallest card in its grid row (CSS Grid's own default align-items: stretch), but that extra height was previously just dead space after a shorter card's content; now it's available for .showcase-card-meta to push into. L/XL override display/ flex-direction back to their own row layout (see .showcase-l/.showcase-xl .showcase-card-link above) - flex: 1 there is the same value they already set themselves, so this changes nothing for them. */ .showcase-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; } .showcase-card-link:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); } /* The first section's lead story reads bigger, like a front-page splash - plain grid-column span, not a row-span/track-size trick, so it stays predictable regardless of how many other items are in that section. :not(.showcase-l):not(.showcase-m):not(.showcase-s):not(.showcase-xl) because those are their own, more specific feed-row templates with their own sizing - without the exclusion these three rules outrank their own image/h3 rules on specificity alone (5 class-level selectors here vs. 2 there) and silently win regardless of source order, overriding their aspect-ratio and font-size with values meant for a completely different (grid, image-above-text) layout. */ .showcase-section:first-of-type:not(.showcase-l):not(.showcase-m):not(.showcase-s):not(.showcase-xl) .showcase-grid .showcase-card:first-child { grid-column: span 2; } .showcase-section:first-of-type:not(.showcase-l):not(.showcase-m):not(.showcase-s):not(.showcase-xl) .showcase-grid .showcase-card:first-child img { aspect-ratio: 21 / 9; } .showcase-section:first-of-type:not(.showcase-l):not(.showcase-m):not(.showcase-s):not(.showcase-xl) .showcase-grid .showcase-card:first-child h3 { font-size: 1.5em; } /* ── Article / static page ────────────────────────────────────────*/ article { max-width: 720px; margin: 0 auto; } /* .page-view (component-defaults/page.php) - a Page's own dedicated width hook, matching var(--max-width-wide) - the same masthead-matching band main > * already gives every other page kind (showcase sections, category listings, etc.) - NOT the narrower 720px article rule above, which is specific to the reading-column article layout and was never meant to apply here. Overriding max-width back to the (equal, via main > *) wide value looks redundant but isn't - it's what stops a future edit to the more specific `article` rule above from silently narrowing pages too, since without this .page-view has no width opinion of its own at all beyond whatever main > * already provides. .breakout is the escape hatch, for a specific element WITHIN the page body (applied by hand via the page editor's Source Code view - there's no picker for it yet) that needs to be wider even than that - a full-width image, a wide table, an embed. Same "break all the way out to the real viewport edges" meaning as .showcase-l/.showcase-xl/ .showcase-home-trending elsewhere in this file, not a second, weaker kind of "wide" - one breakout vocabulary sitewide. The classic centered-column breakout trick (viewport-relative negative margins) - works regardless of how deeply .page-view itself is nested, as long as it's horizontally centered with no other offset, which it is. */ .page-view { max-width: var(--max-width-wide); margin-left: auto; margin-right: auto; } .page-view .breakout { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } article h1 { font-family: var(--font-headline); font-size: 2.1em; line-height: 1.2; font-weight: 800; margin: 0 0 10px; } .byline { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 20px; } .byline-author { display: flex; align-items: center; gap: 8px; } .byline-photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; } .byline-meta { display: flex; flex-direction: column; font-size: 0.88em; line-height: 1.3; } .byline-name { color: var(--color-text); font-weight: 600; } .byline-position { color: var(--color-muted); } article > img { width: 100%; height: auto; margin-bottom: 20px; } .page-body { font-size: 1.08em; line-height: 1.7; color: var(--palette-black); } /* Direct-child div, not just p - the item body editor's output is a mix of

and plain top-level

depending on how a piece was originally authored/pasted (same quirk TheSelebian app's own styles.css documents for its equivalent rule), so a p-only selector left some paragraphs sitting flush against the one before with no gap at all. */ .page-body p, .page-body > div { margin: 0 0 1em; } .page-body img { max-width: 100%; height: auto; } /* ── Live blog (migration 043/044) - replaces .page-body when is_liveblog is on (see article.php). Newest (and pinned) posts lead - same ordering liveblog_posts.php's own query already returns, maintained incrementally client-side as new ones arrive (item-card.php's renderLiveblogStreamScript). Two-column layout - a fixed time column on the left (relative label over the literal clock time, both computed once at render/insert - see _liveblogRelativeTime()), a bordered box on the right holding the post itself. Square corners throughout, no border-radius - this title's own look (same call already made for flag badges/cards elsewhere in this file), not a default worth assuming for every template. ─*/ .liveblog-stream { display: flex; flex-direction: column; gap: 20px; } /* Summary pane above the stream (migration 046) - tinted the same way a pinned post already is (rgba(89,131,146,0.06)) so it reads as "the standing context for everything below", not just another entry. */ .liveblog-summary-box { background: rgba(89, 131, 146, 0.06); border: 1px solid var(--palette-blue); padding: 20px 24px; margin-bottom: 20px; font-size: 1.05em; line-height: 1.6; color: var(--palette-black); } .liveblog-summary-box p { margin: 0 0 1em; } .liveblog-summary-box p:last-child { margin-bottom: 0; } .liveblog-summary-box img { max-width: 100%; height: auto; display: block; margin: 10px 0; } .liveblog-post { display: flex; align-items: flex-start; gap: 16px; } /* padding-top roughly levels the clock time with the box's own first line of text (its padding-top, below) rather than the box's outer edge. Clock first (bold, the actual time), relative underneath (muted) - markup order matches (item-card.php's own renderLiveblogPost()/its own SSE-update JS twin), block-level elements stack in that order without needing a layout mode of their own here. */ .liveblog-post-time { flex: 0 0 64px; text-align: right; padding-top: 20px; } .liveblog-post-clock { display: block; font-weight: 800; font-size: 0.95em; color: var(--palette-black); margin-bottom: 2px; } .liveblog-post-relative { font-size: 0.8em; color: var(--color-muted); } .liveblog-post-box { flex: 1; min-width: 0; background: #fff; border: 1px solid rgba(1, 22, 30, 0.14); padding: 20px 24px; } .liveblog-post--pinned .liveblog-post-box { border-color: var(--palette-blue); background: rgba(89, 131, 146, 0.06); } .liveblog-post-pin-badge { display: block; margin-bottom: 8px; text-transform: uppercase; font-weight: 700; font-size: 0.75em; letter-spacing: 0.02em; color: var(--palette-blue); } .liveblog-post-title { font-family: var(--font-headline); font-size: 1.3em; line-height: 1.3; font-weight: 800; margin: 0 0 10px; color: var(--palette-black); } .liveblog-post-body { font-size: 1.05em; line-height: 1.6; color: var(--palette-black); } .liveblog-post-body p { margin: 0 0 1em; } .liveblog-post-body p:last-child { margin-bottom: 0; } .liveblog-post-body img { max-width: 100%; height: auto; display: block; margin: 10px 0; } .liveblog-post-author { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(1, 22, 30, 0.1); font-size: 0.8em; font-weight: 700; color: var(--color-muted); } /* ── Article view (redtop's own components/article.php override) ────*/ /* .article-content-area itself needs no rule of its own - it's a direct child of

(not .showcase), so width/centering/gutter-padding already comes from main > * above, same masthead-matching content width every other page type gets. Everything in the header block below (title, cut, time, image) is a plain block/replaced element with no width rule of its own, so it just fills this box's already-constrained width - 100% of "the content area" is the default, not something to declare. */ /* Flag badges (migration 040/042) - structure only here (size, weight, spacing); colour is deliberately NOT set on the base class. Each flag gets its own modifier class keyed off flagkey (article-flag--{flagkey}/showcase-card-flag--{flagkey}, stamped on by article.php/item-card.php) - that's what a real flag's actual look comes from, same idea as showcase-l/showcase-xl/showcase-breaking already being plain classes this stylesheet - not the admin portal - decides the look of. A flag with no matching modifier rule yet just falls back to this neutral default rather than rendering unstyled. */ .article-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .article-flag { display: inline-block; padding: 4px 10px; font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: var(--palette-blue); color: #fff; } /* "Breaking News" example (flagkey breaking-news, from the Flags admin's own slug-from-label default) - black badge / yellow text, same var(--palette-breaking) gradient .showcase-breaking already uses site-wide for an urgent-news band, applied to just .article-flag-header (the badge + headline, article.php) - not the whole .article-content-area (cut/category/time/hero image too), which read as a mistake rather than emphasis. Square corners (no border-radius) - this title's own look. Add a --{flagkey} rule like this pair for every flag that needs its own look; anything without one keeps the neutral default above. */ .article-flag--breaking-news { background: var(--palette-black); color: rgb(249, 255, 0); } .article-flag-header--flag-breaking-news { background: var(--palette-breaking); padding: 24px; margin: 0 0 20px; } /* Same treatment as .showcase-card-category (a showcase/category-tile's own category label) - uppercase, bold, letter-spaced - so a category name reads the same way wherever it shows up on the site. */ .article-category { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-accent); margin: 0 0 8px; } .article-title { font-family: var(--font-headline); font-size: 3.75em; /* 2.1em + 15% */ line-height: 1.2; font-weight: 800; margin: 0 0 12px; } /* cut is TinyMCE-authored (see item-edit.js), same trust/escaping model as .page-body - raw HTML, its own

margins reset since this block already carries its own. */ .article-cut { font-size: 1.2em; line-height: 1.5; color: var(--color-muted); margin: 0 0 14px; } .article-cut p { margin: 0; } .article-time { display: block; font-size: 0.85em; color: var(--color-muted); margin: 0 0 20px; } .article-image-wrap { position: relative; margin: 0 0 24px; } .article-image { width: 100%; height: auto; display: block; } /* Hero video (migration 082) - same wrap/credit/caption shell as the image case above (.article-image-credit/-caption are reused as-is, see article.php), just two different fills: a plain