/** * @file * GMA Community News Hub — responsive styling (Layout/UX §7). * * Two jobs: * 1. The §7 NO-OVERFLOW rules (1–11 below), implemented verbatim. These are a * HARD GATE: Phase 8's overflow check (§9.2) runs with the §7.11 safety net * DISABLED and must still pass, so each rule fixes a real root cause rather * than masking it. The grid (#4), min-width:0 on text children (#5), * overflow-wrap + 2-line clamp (#6) and the contained chip scroll (#7) are * what keep a single card / the chip row from ever exceeding a 320px * viewport. * 2. The calm, ad-free visual design — built entirely on the theme's brand * tokens (web/themes/custom/gma/css/brand.css): ocean-blue --gma-primary, * wheat-gold --gma-accent, --gma-surface/-border/-ink/-text-muted, * --gma-radius, --gma-shadow*, --gma-font-sans. No new hardcoded palette; * every color falls back to a token literal so the Hub still reads if the * theme CSS is ever absent. * * Everything is scoped under .gma-news (and the card under .gma-newshub-card — * a deliberate namespace; the theme's brand.css owns a different .gma-news-card) * so the Hub never leaks styles into the rest of the site. The full-bleed rules * at the end are the one exception: they target the THEME chrome wrappers under * body.gma-news-fullbleed, which gma_news_preprocess_html() sets only on the Hub * shell routes. */ /* ════════════════════════════════════════════════════════════════════════ §7.1 BOX MODEL — borders/padding never widen an element past its track. ════════════════════════════════════════════════════════════════════════ */ .gma-news *, .gma-news *::before, .gma-news *::after { box-sizing: border-box; } /* ════════════════════════════════════════════════════════════════════════ §7.2 FLUID CONTAINER — the root is fluid, never a fixed px width, and centers within the brand max-width with fluid gutters. ════════════════════════════════════════════════════════════════════════ */ .gma-news { max-width: var(--gma-max-w, 1320px); width: 100%; margin-inline: auto; padding-inline: clamp(0.75rem, 0.5rem + 2vw, 2rem); padding-block: clamp(1.25rem, 1rem + 2vw, 2.5rem); color: var(--gma-ink, #1C1A19); font-family: var(--gma-font-sans, system-ui, sans-serif); } /* ════════════════════════════════════════════════════════════════════════ BILINGUAL — Telugu labels (FR-9.1/9.2). A te-language member sees the section titles, chips, picker chrome and any Telugu announcement title in Telugu; those elements carry lang="te" (set in the controller/template). This rule gives them the Noto Sans Telugu face + a touch more line-height so the script breathes. Scoped under .gma-news and with the same --gma-font-telugu token + literal fallback the rest of this file uses, so the Hub renders correctly even if the theme's brand.css :lang(te) rule isn't present. English text in the same feed is NOT marked lang="te", so it keeps the Latin sans. overflow-wrap:anywhere keeps a long Telugu compound from widening a chip / tile / headline past the 320px viewport (the §7 no-overflow guarantee). ════════════════════════════════════════════════════════════════════════ */ .gma-news [lang="te"], .gma-news[lang="te"] { font-family: var(--gma-font-telugu, 'Noto Sans Telugu', 'Noto Sans', sans-serif); line-height: 1.5; overflow-wrap: anywhere; } /* ════════════════════════════════════════════════════════════════════════ §7.3 RESPONSIVE MEDIA — replaced media can't overflow; the embed wrapper is a fixed 16:9 box and its image/iframe cover it. ════════════════════════════════════════════════════════════════════════ */ .gma-news img, .gma-news svg, .gma-news video, .gma-news iframe { max-width: 100%; height: auto; } .gma-news .news-embed { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; position: relative; background: var(--gma-primary-tint, #EAF1F6); } .gma-news .news-embed img, .gma-news .news-embed iframe { width: 100%; height: 100%; object-fit: cover; display: block; /* An iframe is replaced content; height:auto from §7.3 would collapse it inside the aspect-ratio box, so pin it to the box here. */ border: 0; } /* ════════════════════════════════════════════════════════════════════════ §7.4 COLLAPSING CARD GRID — THE critical rule. auto-fill with minmax(min(100%, 17.5rem), 1fr) guarantees a single card never exceeds the viewport at 320px: min(100%, 17.5rem) caps the track at the container width. ════════════════════════════════════════════════════════════════════════ */ .gma-news .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 1rem; } /* ════════════════════════════════════════════════════════════════════════ EDITORIAL MASONRY — the "newspaper front page" Latest feed. A rigid grid leaves white space below short cards to keep rows aligned; a newspaper has NONE. So the Latest feed ([data-gma-feed]) switches to CSS multi-column masonry: cards flow top-to-bottom down each column and pack with ZERO vertical gaps (each column is filled like a printed news column). Variable text height is exactly what makes the columns knit together seamlessly. This OVERRIDES the display:grid above for the feed only — search/chip/load-more still target the same [data-gma-feed] container, and a masonry column flow accepts appended cards just fine. Other .news-grid uses (From-GMA, teaser) keep the grid. - The FULL-WIDTH lead uses `column-span: all` — a real newspaper banner that breaks across all columns at the top, then the columns resume below it. - A few FEATURE cards (--feat-wide / --feat-tall, from the same rhythm) get a bigger headline + longer dek so the page has visual hierarchy like a curated front page — variety comes from card EMPHASIS, not from gaps. (In a column flow a card can't span 2 columns mid-flow; emphasis carries the mosaic feel.) - break-inside: avoid keeps a card from being split across a column break. Column COUNT scales with width (1 mobile → 2 → 3 → 4); on 1 column it's just a clean stack, so the §7 320px no-overflow guarantee is untouched. ════════════════════════════════════════════════════════════════════════ */ .gma-news .news-grid[data-gma-feed] { display: block; /* leave grid; become a column container */ column-count: 1; column-gap: 1rem; } @media (min-width: 34rem) { .gma-news .news-grid[data-gma-feed] { column-count: 2; } } @media (min-width: 60rem) { .gma-news .news-grid[data-gma-feed] { column-count: 3; } } @media (min-width: 86rem) { .gma-news .news-grid[data-gma-feed] { column-count: 4; } } /* Each card is a column item: never split across columns, and the bottom margin IS the inter-card vertical gap (column flow has no row-gap). */ .gma-news .news-grid[data-gma-feed] > .gma-newshub-card { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 1rem; /* A column item is in normal flow — width:100% of the column, height natural (this is what removes the gaps: cards are their CONTENT height, not a track height). display:flow-root contains the flex body cleanly. */ display: flow-root; } /* The lead is the banner: full width across all columns at the top. */ .gma-news .news-grid[data-gma-feed] > .gma-newshub-card--lead { column-span: all; margin-bottom: 1.25rem; } /* FEATURE emphasis — bigger headline / longer dek so the page reads as a curated mosaic (hierarchy via size, since column flow can't span columns mid-page). */ .gma-news .news-grid[data-gma-feed] > .gma-newshub-card--feat-wide .gma-newshub-card__headline, .gma-news .news-grid[data-gma-feed] > .gma-newshub-card--feat-tall .gma-newshub-card__headline { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); -webkit-line-clamp: 3; line-clamp: 3; } .gma-news .news-grid[data-gma-feed] > .gma-newshub-card--feat-tall .gma-newshub-card__excerpt { -webkit-line-clamp: 5; line-clamp: 5; } /* Feature cards get a hair more padding + a subtle accent top border so the bigger tiles read as deliberate, fully-filled features — never blank. */ .gma-news .news-grid[data-gma-feed] > .gma-newshub-card--feat-wide, .gma-news .news-grid[data-gma-feed] > .gma-newshub-card--feat-tall { border-top: 3px solid var(--gma-accent, #B8922E); } /* ════════════════════════════════════════════════════════════════════════ §7.5 FLEX/GRID TEXT CHILDREN SHRINK — min-width:0 lets a text-bearing grid/flex child shrink below its content's intrinsic min-width (otherwise a long word forces the track wider than the viewport). ════════════════════════════════════════════════════════════════════════ */ .gma-news .news-grid > *, .gma-newshub-card, .gma-newshub-card__media, .gma-newshub-card__body, .gma-news__lead > *, .gma-newshub-card__meta, .gma-newshub-card__meta > *, .gma-news__head > * { min-width: 0; } /* ════════════════════════════════════════════════════════════════════════ §7.6 TEXT WRAPS — headlines + long tokens (URLs, source names) break anywhere; the headline clamps to 2 lines. ════════════════════════════════════════════════════════════════════════ */ .gma-newshub-card__headline { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .gma-newshub-card__source, .gma-newshub-card__time, .gma-newshub-card__excerpt, .gma-newshub-card__tile-topic, .gma-news__pick-link, .gma-news__pick-meta, .gma-news__empty { overflow-wrap: anywhere; } /* ════════════════════════════════════════════════════════════════════════ §7.7 CHIP ROW WRAPS (no horizontal scrollbar). Chips flow onto multiple rows; by default the row is COLLAPSED to ~one line and a "More ▾" toggle (.gma-news__more-topics, revealed by JS only when the chips overflow one row) expands it. This beats a scrollbar for discoverability: members see there are more topics and reach any of them in one click — no sideways scrolling, nothing hidden off-screen. ════════════════════════════════════════════════════════════════════════ */ /* Chip BAR: the topic nav (flexes/wraps + collapses) next to the always-visible Customize action. Customize is OUTSIDE the collapsible nav so the chip-row collapse can never hide the "change my topics" control. align-items:start so the fixed Customize button sits at the top when the nav wraps to many rows. */ .gma-news__chipbar { display: flex; flex-wrap: wrap; align-items: start; gap: 0.5rem 0.75rem; margin-bottom: 0.25rem; } .gma-news__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; /* Grow to fill the bar so Customize is pushed to the end; min-width:0 lets it shrink and wrap rather than forcing the bar wider than the viewport. */ flex: 1 1 auto; min-width: 0; /* So focus rings aren't clipped. */ padding-block: 0.25rem 0.5rem; } /* Customize never shrinks and never wraps internally; it just moves to the next line as a whole when the bar is too narrow — always fully visible. */ .gma-news__customize { flex: 0 0 auto; } .gma-news__customize-icon { display: inline-flex; align-items: center; margin-inline-end: 0.4rem; } .gma-news__customize-icon svg { display: block; } .gma-news__customize-text { white-space: nowrap; } /* Collapsed = ~one row tall (44px chip + the block padding). Overflow rows are clipped until expanded. JS adds .is-collapsed ONLY when the row actually overflows one line, so a feed with few topics is never needlessly clipped. */ .gma-news__chips.is-collapsed { max-height: calc(44px + 0.75rem); overflow: hidden; } .gma-news__chip { flex: 0 0 auto; white-space: nowrap; } /* "More ▾ / Less ▴" topic-row toggle. Starts hidden; JS reveals it only when the chip row overflows one line. A quieter, dashed cousin of the chips. */ .gma-news__more-topics { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; /* §7 touch target */ padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.9rem; font-weight: 700; line-height: 1.1; cursor: pointer; background: var(--gma-surface, #fff); color: var(--gma-primary, #154D79); border: 1px dashed var(--gma-border, #C9C2B4); } .gma-news__more-topics:hover { border-color: var(--gma-primary, #154D79); border-style: solid; } .gma-news__more-topics:focus-visible { outline: 2px solid var(--gma-primary, #154D79); outline-offset: 2px; } /* Caret flips when expanded (aria-expanded=true). */ .gma-news__more-topics-caret { transition: transform 0.15s ease; } .gma-news__more-topics[aria-expanded="true"] .gma-news__more-topics-caret { transform: rotate(180deg); } /* §7.8 (No admin tables in the Hub — that's the console, Task 24. Skipped.) */ /* ════════════════════════════════════════════════════════════════════════ §7.9 FLUID TYPE & SPACING — rem/%/fr/clamp(); min-height (not height) where content grows. ════════════════════════════════════════════════════════════════════════ */ .gma-news__title { font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2rem); font-weight: 800; line-height: 1.15; color: var(--gma-primary, #154D79); margin: 0; } .gma-news__section-title { font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem); font-weight: 800; color: var(--gma-ink, #1C1A19); margin: 0 0 0.9rem; } .gma-newshub-card__headline { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem); font-weight: 700; line-height: 1.3; /* Horizontal padding now lives on __body (media is edge-to-edge), so the headline only carries vertical rhythm within the body. */ margin: 0 0 0.4rem; color: var(--gma-ink, #1C1A19); } /* §7.10 NO 100vw — full-width elements use width:100% (see root + media). */ /* ════════════════════════════════════════════════════════════════════════ VISUAL DESIGN — calm, uncluttered, brand-token driven. ════════════════════════════════════════════════════════════════════════ */ /* ── Header: title + fluid search, aligned ───────────────────────────────── */ .gma-news__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .gma-news__search { flex: 1 1 16rem; /* Cap the search on desktop, full-width when it wraps under the title. */ max-width: 22rem; margin-left: auto; } .gma-news__search-input { width: 100%; font: inherit; font-size: 0.95rem; color: var(--gma-ink, #1C1A19); background: var(--gma-surface, #fff); border: 1px solid var(--gma-border, #E4E7DD); border-radius: 999px; padding: 0.6rem 1rem; min-height: 44px; } .gma-news__search-input::placeholder { color: var(--gma-text-muted, #6B6354); } .gma-news__search-input:focus-visible { outline: 2px solid var(--gma-primary, #154D79); outline-offset: 1px; border-color: var(--gma-primary, #154D79); } .gma-news__search-input:disabled { background: var(--gma-bg, #FAF6EC); cursor: not-allowed; opacity: 0.7; } /* ── Topic landing page intro: the "doorway into programs" (Layout §7) ───── A focused header for /news/{topic}: the topic name (accented in the topic color), a one-line description, and — when the topic maps to a GMA program — the program-link CTA. §7-safe: fluid type, no fixed widths, text wraps. */ .gma-news__topic-intro { /* A calm tinted panel with a left accent in the topic color. */ background: var(--gma-primary-tint, #EAF1F6); border: 1px solid var(--gma-border, #E4E7DD); border-left: 4px solid var(--topic-color, var(--gma-primary, #154D79)); border-radius: var(--gma-radius, 14px); padding: clamp(1rem, 0.85rem + 1vw, 1.5rem) clamp(1rem, 0.85rem + 1.2vw, 1.75rem); margin: 0 0 clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem); } .gma-news__topic-name { font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.25rem); font-weight: 800; line-height: 1.12; /* The topic color reads as the accent; fall back to brand primary. */ color: var(--topic-color, var(--gma-primary, #154D79)); margin: 0; overflow-wrap: anywhere; } .gma-news__topic-desc { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); line-height: 1.45; color: var(--gma-ink, #1C1A19); margin: 0.5rem 0 0; max-width: 60ch; /* comfortable measure; not a layout-fixing width */ overflow-wrap: anywhere; } /* The CTA: a brand-accent "doorway" button, ≥44px touch target. */ .gma-news__topic-cta { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-top: 1rem; padding: 0.55rem 1.25rem; border-radius: 999px; background: var(--gma-accent, #B8922E); color: #3a1a00; font-weight: 700; text-decoration: none; max-width: 100%; transition: background 0.16s, color 0.16s, transform 0.16s; } .gma-news__topic-cta:hover { background: var(--gma-accent-dark, #8F7022); color: #fff; transform: translateY(-1px); } .gma-news__topic-cta:focus-visible { outline: 2px solid var(--gma-primary, #154D79); outline-offset: 2px; } .gma-news__topic-cta-arrow { font-weight: 800; line-height: 1; } .gma-news__topic-cta-text { overflow-wrap: anywhere; } /* ── Chips: pill buttons, active filled with its --chip-color ─────────────── */ .gma-news__chip, .gma-news__customize { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* §7 touch target ≥ 44px */ padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.9rem; font-weight: 700; line-height: 1.1; text-decoration: none; cursor: pointer; transition: background 0.16s, color 0.16s, border-color 0.16s, box-shadow 0.16s; } /* Inactive chip: outlined, ink text. */ .gma-news__chip { background: var(--gma-surface, #fff); color: var(--gma-ink, #1C1A19); border: 1px solid var(--gma-border, #E4E7DD); } .gma-news__chip:hover { border-color: var(--chip-color, var(--gma-primary, #154D79)); color: var(--chip-color, var(--gma-primary, #154D79)); } .gma-news__chip:focus-visible { outline: 2px solid var(--chip-color, var(--gma-primary, #154D79)); outline-offset: 2px; } /* Active chip: filled with its topic color (brand primary fallback). */ .gma-news__chip.is-active { background: var(--chip-color, var(--gma-primary, #154D79)); border-color: var(--chip-color, var(--gma-primary, #154D79)); color: #fff; } /* Customize: gentle gold-tinted action, set apart from topic chips. a11y (§9.3 / WCAG 1.4.3): text is a deepened gold-brown (#73591D) on the gold tint — 5.73:1, clearing the 4.5:1 floor (the token --gma-accent-dark #8F7022 only reached 4.03:1). Keeps the gold identity; just darker for contrast. */ .gma-news__customize { background: var(--gma-accent-tint, #F4EFD9); color: #73591D; border: 1px solid var(--gma-accent, #B8922E); } .gma-news__customize:hover { background: var(--gma-accent, #B8922E); color: #fff; } .gma-news__customize:focus-visible { outline: 2px solid var(--gma-accent, #B8922E); outline-offset: 2px; } /* ════════════════════════════════════════════════════════════════════════ INTEREST PICKER (Task 23, Layout/UX §7.1) — a dismissible overlay: dimmed backdrop + a centered card holding a tappable topic-tile grid, a language toggle, and Save. §7-safe: the card is max-width-capped but never wider than the viewport (width:min), the tile grid is auto-fill minmax(min(100%,…)) so a single tile can't exceed 320px, and the card scrolls internally if tall. ════════════════════════════════════════════════════════════════════════ */ .gma-news__picker { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; /* Dimmed backdrop; the click-to-dismiss target is this element itself. */ background: rgba(16, 46, 69, 0.55); padding: clamp(0.75rem, 0.5rem + 2vw, 2rem); /* Allow the (rare) very tall card to scroll the overlay rather than clip. */ overflow-y: auto; } .gma-news__picker[hidden] { display: none; } .gma-news__picker-card { position: relative; /* Cap width on desktop but never exceed the viewport (minus the overlay padding) — keeps the §7 no-overflow guarantee at 320px. */ width: min(34rem, 100%); max-width: 100%; max-height: calc(100vh - 2 * clamp(0.75rem, 0.5rem + 2vw, 2rem)); overflow-y: auto; background: var(--gma-surface, #fff); border: 1px solid var(--gma-border, #E4E7DD); border-radius: var(--gma-radius, 14px); box-shadow: var(--gma-shadow-lg, 0 12px 34px rgba(28, 26, 25, 0.18)); padding: clamp(1.25rem, 1rem + 2vw, 2rem); } .gma-news__picker-close { position: absolute; top: 0.5rem; inset-inline-end: 0.5rem; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--gma-text-muted, #6B6354); font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 50%; transition: background 0.16s, color 0.16s; } .gma-news__picker-close:hover { background: var(--gma-bg, #FAF6EC); color: var(--gma-ink, #1C1A19); } .gma-news__picker-close:focus-visible { outline: 2px solid var(--gma-primary, #154D79); outline-offset: 2px; } .gma-news__picker-title { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); font-weight: 800; color: var(--gma-primary, #154D79); /* Leave room for the close button so the heading never collides with it. */ margin: 0 2.5rem 0.35rem 0; line-height: 1.2; overflow-wrap: anywhere; } .gma-news__picker-intro { font-size: 0.95rem; color: var(--gma-text-muted, #6B6354); margin: 0 0 1.1rem; overflow-wrap: anywhere; } /* The tile grid: auto-fill, min(100%,…) caps a track to the card width so a single tile never overflows 320px; tiles wrap to as many columns as fit. */ .gma-news__picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 0.6rem; margin-bottom: 1.25rem; } /* A tile = a tappable pill. The checkbox is visually hidden; the label is the styled target so the whole pill is the hit area (≥44px tall). */ .gma-news__tile { display: block; min-width: 0; } .gma-news__tile-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .gma-news__tile-label { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 0.5rem 0.85rem; border: 1.5px solid var(--gma-border, #E4E7DD); border-radius: 999px; background: var(--gma-surface, #fff); color: var(--gma-ink, #1C1A19); font-size: 0.9rem; font-weight: 700; line-height: 1.2; cursor: pointer; user-select: none; overflow-wrap: anywhere; /* a long topic label wraps, never overflows */ transition: background 0.14s, color 0.14s, border-color 0.14s, box-shadow 0.14s; } .gma-news__tile-label:hover { border-color: var(--topic-color, var(--gma-primary, #154D79)); color: var(--topic-color, var(--gma-primary, #154D79)); } /* Checked tile: filled with its topic color (brand-primary fallback), white text. The :checked sibling drives the fill — pure CSS, no JS for the look. a11y (§9.3 / WCAG 1.4.3): same as the card badge — darken the fill 38% toward black so white text clears 4.5:1 on every topic color (the light saffron/gold topics fail with pure white). The border keeps the full-strength topic color so the tile still reads as that hue. Fallback is the raw topic color. */ .gma-news__tile-input:checked + .gma-news__tile-label { background: var(--topic-color, var(--gma-primary, #154D79)); background: color-mix(in srgb, var(--topic-color, var(--gma-primary, #154D79)) 62%, #000); border-color: var(--topic-color, var(--gma-primary, #154D79)); color: #fff; } /* Keyboard focus on the hidden checkbox shows a ring on its visible label. */ .gma-news__tile-input:focus-visible + .gma-news__tile-label { outline: 2px solid var(--gma-primary, #154D79); outline-offset: 2px; } /* Language toggle: a label + two radio options, wraps on narrow screens. */ .gma-news__picker-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-bottom: 1.25rem; font-size: 0.95rem; color: var(--gma-ink, #1C1A19); } .gma-news__picker-lang-label { font-weight: 700; } .gma-news__lang-opt { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; cursor: pointer; } .gma-news__lang-opt input { width: 1.05rem; height: 1.05rem; accent-color: var(--gma-primary, #154D79); } /* Save: the brand-accent primary action, full-width, ≥44px. */ .gma-news__picker-save { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0.7rem 1.5rem; border: 0; border-radius: 999px; background: var(--gma-accent, #B8922E); color: #3a1a00; font: inherit; font-weight: 800; cursor: pointer; transition: background 0.16s, color 0.16s, transform 0.16s; } .gma-news__picker-save:hover { background: var(--gma-accent-dark, #8F7022); color: #fff; transform: translateY(-1px); } .gma-news__picker-save:focus-visible { outline: 2px solid var(--gma-primary, #154D79); outline-offset: 2px; } .gma-news__picker-save:disabled { opacity: 0.65; cursor: progress; transform: none; } /* ════════════════════════════════════════════════════════════════════════ HUB CARD — namespace `gma-newshub-card` (NOT `gma-news-card`). The site theme's brand.css owns a DIFFERENT `.gma-news-card` (the homepage date-chip news row, display:grid 52px 1fr) and loads AFTER this file; sharing the class let that grid HIJACK the Hub card and crush the headline to ~26px. This distinct namespace is the permanent fix — these styles can never be overridden by the theme component again. Layout is flex column (media on top, then a padded __body holding badge + headline + excerpt + meta); the theme grid was the only thing that ever broke that. ════════════════════════════════════════════════════════════════════════ */ .gma-newshub-card { background: var(--gma-surface, #fff); border: 1px solid var(--gma-border, #E4E7DD); border-radius: var(--gma-radius, 14px); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--gma-shadow-sm, 0 1px 2px rgba(28,26,25,.06), 0 1px 3px rgba(28,26,25,.04)); transition: box-shadow 0.18s, transform 0.18s; } /* Subtle hover lift only on cards that actually link somewhere (have a headline anchor or are a clickable video). */ .gma-newshub-card:has(.gma-newshub-card__headline a):hover, .gma-newshub-card--video:hover { transform: translateY(-3px); box-shadow: var(--gma-shadow, 0 4px 14px rgba(28,26,25,.07)); } /* ── Media: now an (a decorative duplicate of the headline link, tabindex -1 / aria-hidden in the markup — the headline is the real focusable link). Edge-to-edge to the card's rounded top; news-embed (§7.3) supplies the 16:9 box + overflow. ────────────────────────────────────────────────────────── */ .gma-newshub-card__media { display: block; flex: 0 0 auto; text-decoration: none; cursor: pointer; color: inherit; } .gma-newshub-card__thumb { display: block; } /* ── TILE — a positioned fill for the 16:9 media area. No longer used as a "branded fallback" for imageless NEWS cards (those now render no media box at all — the topic lives in the body badge). It survives for two callers that still need a filled media surface: • __tile--video : a video that has no thumbnail (a quiet topic wash behind the play overlay so the card still reads as playable). • __tile--placeholder : the blurred anonymous-teaser shells (neutral fill, styled in the teaser block below). The base rule supplies only positioning + a neutral wash; variants set their own background. (The old centered emblem/topic-name children are gone.) ───── */ .gma-newshub-card__tile { position: absolute; inset: 0; display: block; background: var(--gma-primary-tint, #EAF1F6); } /* Video-without-thumbnail surface: a soft topic wash so the play button reads. */ .gma-newshub-card__tile--video { background: var(--gma-primary-tint, #EAF1F6); background: linear-gradient(135deg, color-mix(in srgb, var(--topic-color, var(--gma-primary, #154D79)) 22%, #fff) 0%, color-mix(in srgb, var(--topic-color, var(--gma-primary, #154D79)) 10%, #fff) 100%); } /* ── Body: the padded wrapper for badge + headline + excerpt + meta. The media is edge-to-edge, so ALL the card's text padding lives here. flex column + flex:1 so the meta can sink to the bottom (margin-top:auto) and equal-height grid cards keep their meta aligned. ─────────────────────────────────────── */ .gma-newshub-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 0.75rem 0.85rem 0.85rem; } /* ── No-media card: when there's no real image/video the media box is omitted entirely (a clean text card). Give the body a touch more top padding so the badge breathes against the card's rounded top edge instead of hugging it. ── */ .gma-newshub-card--nomedia .gma-newshub-card__body { padding-top: 0.95rem; } /* ── Badge: small topic pill WITH a text label (a11y: color isn't the only signal) ───────────────────────────────────────────────────────────────── */ .gma-newshub-card__badge { display: inline-flex; align-items: center; align-self: flex-start; /* a11y (§9.3 / WCAG 1.4.3): white badge text needs 4.5:1 on the topic color, but the lighter topics (saffron #E8A33D ~2.2:1, gold #C9A227, education #D9912E) fail with pure white. Darken the badge fill by mixing the topic color 38% toward black — every topic then clears 4.5:1 (worst case ~5.1:1) while keeping its hue. Fallback (no color-mix support) is the raw topic color. The badge ALSO carries a text label, so color is never the only signal even where the fill is borderline. */ background: var(--topic-color, var(--gma-primary, #154D79)); background: color-mix(in srgb, var(--topic-color, var(--gma-primary, #154D79)) 62%, #000); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.15rem 0.55rem; border-radius: 999px; margin: 0 0 0.5rem; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* short topic label inside a contained pill */ } .gma-newshub-card__headline a { color: inherit; text-decoration: none; } .gma-newshub-card__headline a:hover { color: var(--gma-primary, #154D79); text-decoration: underline; } .gma-newshub-card__headline a:focus-visible { outline: 2px solid var(--gma-primary, #154D79); outline-offset: 2px; } /* ── Excerpt: a short muted dek under the headline (was always in the data but the old template never rendered it). Clamps to 2 lines so card heights stay even; overflow-wrap (set in §7.6) keeps a long token from widening the card. */ .gma-newshub-card__excerpt { font-size: 0.9rem; line-height: 1.45; color: var(--gma-text-muted, #6B6354); margin: 0 0 0.6rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gma-newshub-card__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; font-size: 0.8rem; color: var(--gma-text-muted, #6B6354); margin-top: auto; /* push meta to the card bottom */ padding-top: 0.2rem; } .gma-newshub-card__source { font-weight: 600; } /* ── Play overlay for video cards (CSS-only triangle, no emoji) ───────────── */ .gma-newshub-card__play { position: absolute; inset: 0; margin: auto; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: rgba(16, 46, 69, 0.72); /* --gma-dark @ ~72% */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); pointer-events: none; /* the whole card handles the click */ transition: background 0.18s, transform 0.18s; } .gma-newshub-card__play::after { content: ""; position: absolute; top: 50%; left: 50%; /* Equilateral right-pointing triangle, optically centered. */ transform: translate(-40%, -50%); border-style: solid; border-width: 0.6rem 0 0.6rem 1rem; border-color: transparent transparent transparent #fff; } .gma-newshub-card--video { cursor: pointer; } .gma-newshub-card--video:hover .gma-newshub-card__play { background: var(--gma-primary, #154D79); transform: scale(1.06); } /* ════════════════════════════════════════════════════════════════════════ LEAD STORY — the magazine hero. The first Latest card (loop.first → --lead) spans the full grid width (grid-column: 1 / -1, valid inside the §7.4 auto-fill grid) and, once there's room (≥45rem), lays out media-left / text-right with a much larger headline + a longer (3-4 line) excerpt. On narrow screens it simply stacks like a bigger normal card. No fixed widths, no 100vw — the spanning + internal 2-col grid stay §7 no-overflow safe. ════════════════════════════════════════════════════════════════════════ */ .gma-newshub-card--lead { grid-column: 1 / -1; } @media (min-width: 45rem) { /* Two-column hero ONLY when the lead actually has media. A no-media lead has no left image to pair the text with, so it stays a single full-width text block (still the bigger headline/excerpt below) rather than leaving an empty media column. */ .gma-newshub-card--lead:not(.gma-newshub-card--nomedia) { /* media | text. minmax(0,…) on both tracks lets each shrink (§7.5) so a long word/URL never forces the row wider than the grid. */ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; } /* The media fills the taller hero row rather than keeping the 16:9 box. */ .gma-newshub-card--lead .gma-newshub-card__media.news-embed { aspect-ratio: auto; height: 100%; min-height: 15rem; } .gma-newshub-card--lead .gma-newshub-card__body { justify-content: center; padding: clamp(1rem, 0.8rem + 1.2vw, 1.75rem); } /* Bigger hero headline; allow up to 3 lines (override the 2-line card clamp). */ .gma-newshub-card--lead .gma-newshub-card__headline { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); line-height: 1.18; -webkit-line-clamp: 3; line-clamp: 3; } /* A longer dek on the hero: larger text, clamp to 4 lines. */ .gma-newshub-card--lead .gma-newshub-card__excerpt { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem); -webkit-line-clamp: 4; line-clamp: 4; } } /* ── Lead: From-GMA (wider) + Picks (narrower); stacks < ~800px ───────────── */ .gma-news__lead { display: grid; /* auto-fit + min(100%, 20rem): two columns on desktop, one column when the container is narrower than ~40rem. min(100%,…) keeps the §7 no-overflow guarantee. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.25rem, 1rem + 2vw, 2.5rem); margin-bottom: clamp(1.75rem, 1.5rem + 1.5vw, 3rem); } /* From-GMA takes the larger share when both columns are present. */ .gma-news__from-gma { min-width: 0; } .gma-news__picks { min-width: 0; } @media (min-width: 50rem) { /* Explicit 2-col proportions once there's room — ONLY when BOTH blocks are present. The single-block variants below override this to one full-width column so an empty side never leaves a half-width gap. */ .gma-news__lead { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } } /* Single-block lead: collapse to ONE full-width column so the present block never sits beside an empty half. (The template only renders a block when it has content and only renders the section when at least one block does, so there's never a giant empty region — this just makes the lone block span.) */ .gma-news__lead--solo-picks, .gma-news__lead--solo-gma { grid-template-columns: 1fr; } @media (min-width: 50rem) { .gma-news__lead--solo-picks, .gma-news__lead--solo-gma { grid-template-columns: 1fr; } } /* Picks-only: a slim full-width rail, not a tall aside. The numbered list flows into responsive columns so a handful of picks read as a compact horizontal band. Two deliberate choices kill the old "4 across + 1 stranded with a huge dead zone" bug: • auto-FIT (not auto-fill): empty tracks are collapsed, so when N picks wrap to an uneven last row the present items STRETCH to fill the width instead of leaving blank columns beside the lone straggler. • a hard 3-column ceiling: 5 picks lay out as a balanced 3 + 2, never 4 + 1. The ceiling is applied per-breakpoint (1 col mobile → 2 → 3) so it never forces a track narrower than the 320px no-overflow floor. min(100%,…) keeps any single column from overflowing 320px (§7.4). Drop the per-item bottom divider here — columns read cleaner without it. */ .gma-news__lead--solo-picks .gma-news__picks-list { display: grid; grid-template-columns: 1fr; /* mobile: one column */ gap: 0.85rem 1.5rem; } @media (min-width: 34rem) { .gma-news__lead--solo-picks .gma-news__picks-list { grid-template-columns: repeat(2, minmax(min(100%, 18rem), 1fr)); } } @media (min-width: 62rem) { .gma-news__lead--solo-picks .gma-news__picks-list { grid-template-columns: repeat(3, minmax(min(100%, 16rem), 1fr)); } } .gma-news__lead--solo-picks .gma-news__pick { border-bottom: 0; padding-bottom: 0; } /* The solo-picks rail is a slim band, not a tall two-column block, so it doesn't need the full lead→latest gap. Tighten it to a normal section rhythm so "Latest" follows on without a cavernous dead space. */ .gma-news__lead--solo-picks { margin-bottom: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); } .gma-news__from-gma-grid { /* Inside the (often narrower) From-GMA column, keep cards comfortable. */ grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); } /* Picks: a clean numbered list, no cards. */ .gma-news__picks-list { list-style: none; margin: 0; padding: 0; counter-reset: gma-pick; display: flex; flex-direction: column; gap: 0.85rem; } .gma-news__pick { counter-increment: gma-pick; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.6rem; align-items: start; padding-bottom: 0.85rem; border-bottom: 1px solid var(--gma-border, #E4E7DD); } .gma-news__pick:last-child { border-bottom: 0; padding-bottom: 0; } .gma-news__pick::before { content: counter(gma-pick); grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--gma-primary-tint, #EAF1F6); color: var(--gma-primary, #154D79); font-size: 0.8rem; font-weight: 800; } .gma-news__pick-link { font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: var(--gma-ink, #1C1A19); text-decoration: none; } a.gma-news__pick-link:hover { color: var(--gma-primary, #154D79); text-decoration: underline; } .gma-news__pick-meta { grid-column: 2; font-size: 0.78rem; color: var(--gma-text-muted, #6B6354); margin-top: 0.1rem; } /* ── Latest section ──────────────────────────────────────────────────────── */ .gma-news__latest { margin-top: 0.5rem; } /* ── Nudge: soft brand-tint banner ───────────────────────────────────────── */ .gma-news__nudge { background: var(--gma-primary-tint, #EAF1F6); border: 1px solid var(--gma-border, #E4E7DD); border-left: 4px solid var(--gma-primary, #154D79); color: var(--gma-ink, #1C1A19); border-radius: var(--gma-radius-sm, 8px); padding: 0.85rem 1.1rem; margin: 0 0 1.25rem; font-size: 0.95rem; } /* ── Empty states ────────────────────────────────────────────────────────── */ .gma-news__empty { color: var(--gma-text-muted, #6B6354); font-size: 0.95rem; margin: 0; } .gma-news__empty--latest { background: var(--gma-bg, #FAF6EC); border: 1px dashed var(--gma-border, #E4E7DD); border-radius: var(--gma-radius, 14px); padding: 2rem 1.25rem; text-align: center; } /* ── Load more: brand-styled, ≥44px touch target ─────────────────────────── */ .gma-news__more { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 1.5rem auto 0; padding: 0.6rem 1.75rem; border-radius: 999px; border: 1px solid var(--gma-primary, #154D79); background: var(--gma-surface, #fff); color: var(--gma-primary, #154D79); font: inherit; font-weight: 700; cursor: pointer; transition: background 0.16s, color 0.16s; } .gma-news__more:hover { background: var(--gma-primary, #154D79); color: #fff; } .gma-news__more:focus-visible { outline: 2px solid var(--gma-primary, #154D79); outline-offset: 2px; } .gma-news__more[hidden] { display: none; } /* Center the button on its own row under the grid. */ .gma-news__latest { display: flex; flex-direction: column; } .gma-news__latest .gma-news__more { align-self: center; } /* ════════════════════════════════════════════════════════════════════════ ANONYMOUS TEASER — blurred placeholder cards + prominent join CTA. The blurred cards are decorative (aria-hidden in the markup); they exist only to hint at the value behind the join wall — zero real data. ════════════════════════════════════════════════════════════════════════ */ .gma-news__teaser { position: relative; } .gma-news__teaser-grid { margin-bottom: 1.5rem; } .gma-newshub-card--blur { filter: blur(6px); pointer-events: none; user-select: none; min-height: 14rem; } /* The blurred card's inner blocks: muted neutral fills, no color, no text. The placeholders live inside __body (which supplies the horizontal padding), so the line/source bars only need vertical margins. */ .gma-newshub-card--blur .gma-newshub-card__tile--placeholder { background: var(--gma-text-muted, #6B6354); opacity: 0.22; } .gma-newshub-card--blur .gma-newshub-card__badge--placeholder { background: var(--gma-text-muted, #6B6354); opacity: 0.35; width: 4.5rem; height: 1.1rem; margin-bottom: 0.5rem; } .gma-newshub-card--blur .gma-newshub-card__line { display: block; height: 0.8rem; margin: 0 0 0.5rem; border-radius: 4px; background: var(--gma-border, #E4E7DD); } .gma-newshub-card--blur .gma-newshub-card__line--short { width: 60%; } .gma-newshub-card--blur .gma-newshub-card__source--placeholder { display: block; height: 0.7rem; width: 40%; margin: 0.1rem 0 0; border-radius: 4px; background: var(--gma-border, #E4E7DD); } /* CTA: prominent, centered, brand-accent join button. */ .gma-news__cta { text-align: center; background: var(--gma-surface, #fff); border: 1px solid var(--gma-border, #E4E7DD); border-radius: var(--gma-radius, 14px); box-shadow: var(--gma-shadow, 0 4px 14px rgba(28,26,25,.07)); padding: clamp(1.5rem, 1.25rem + 2vw, 2.75rem) 1.25rem; max-width: 34rem; margin-inline: auto; } .gma-news__cta-msg { font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem); font-weight: 700; color: var(--gma-ink, #1C1A19); margin: 0 0 1.25rem; overflow-wrap: anywhere; } .gma-news__cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .gma-news__join, .gma-news__login { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.65rem 1.75rem; border-radius: 999px; font-weight: 700; text-decoration: none; transition: background 0.16s, color 0.16s, border-color 0.16s; } .gma-news__join { background: var(--gma-accent, #B8922E); color: #3a1a00; } .gma-news__join:hover { background: var(--gma-accent-dark, #8F7022); color: #fff; } .gma-news__login { background: transparent; color: var(--gma-primary, #154D79); border: 1px solid var(--gma-primary, #154D79); } .gma-news__login:hover { background: var(--gma-primary-tint, #EAF1F6); } .gma-news__join:focus-visible, .gma-news__login:focus-visible { outline: 2px solid var(--gma-primary, #154D79); outline-offset: 2px; } /* ── Inline video player route (/news/video/{nid}) ───────────────────────── */ .gma-news-video__back { margin: 0 0 0.75rem; } .gma-news-video__back a { color: var(--gma-primary, #154D79); font-weight: 600; text-decoration: none; } .gma-news-video__back a:hover { text-decoration: underline; } .gma-news-video__title { font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.8rem); font-weight: 800; color: var(--gma-ink, #1C1A19); margin: 0 0 1rem; overflow-wrap: anywhere; } .gma-news-video__frame { border-radius: var(--gma-radius, 14px); overflow: hidden; background: #000; margin-bottom: 1rem; } .gma-news-video__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.85rem; color: var(--gma-text-muted, #6B6354); } /* ════════════════════════════════════════════════════════════════════════ FULL-BLEED /news — an immersive, news-first page members return to daily. gma_news_preprocess_html() adds body.gma-news-fullbleed ONLY on the Hub shell routes (gma_news.hub / .topic / .video), so these rules NEVER touch any other page. We hide the site chrome (the topbar/quick-info+donation bar, the brand row, the main nav menubar, and the footer) and let the Hub fill the viewport edge-to-edge, keeping a sane inner gutter so text isn't jammed to the edge. THEME SELECTORS (found by reading web/themes/custom/gma/templates/page.html.twig + topbar.html.twig — the page-level chrome for every non-front page): - .gma-topbar : the utility/quick-info bar (stats · EIN · Donate · Member Login) — topbar.html.twig's root region wrapper. - .gma-brand-row : the live-text wordmark row (#gma-header in page.html.twig). - .gma-menubar : the main navigation bar (#gma-menubar in page.html.twig). - .gma-footer : the site