/** * News niche pack — custom CSS. * * This pack matches the theme's own default yellow/blue palette exactly * (like Magazine), so .post-title/.link-hover/.section-rule/.menu-item need * no color-scoped override here. * * Every override below fixes a confirmed bug where a shared component class * in the compiled stylesheet (main.css, `@layer utilities`) bakes in its * own display/padding/font-size/color that wins the cascade over the * Tailwind classes put on the same element in this pack's markup, because * both live in the same layer and equal-specificity same-layer rules * resolve by source order, not by which one "looks" more specific. This * file is a plain, unlayered stylesheet, so everything in it outranks any * `@layer utilities` rule automatically, regardless of source order. * * A sacrificial no-op first rule guards against a confirmed bug elsewhere * in this project (see niche-sports.css) where something in this file's * serve/parse pipeline silently drops the very first rule after the * header comment. */ .site-style-news {} /* -- Smart header z-index: the shared reveal-on-scroll-up script (ctrspace-x-script.js initFixedHeader) adds a bare `.fixed` class to `.main-header` past 500px of scroll, but that class only sets `position: fixed` via Tailwind's own utility - no `top`/`z-index` come with it, so the header freezes wherever it was with no stacking priority, letting later content paint over it. -- */ .site-style-news .main-header.fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 60; } /* -- Nav link sizing: shared `.menu-item` is a big tap target (px-8 py-4 text-lg); the prototype's own is a tight inline link (.9375rem, .25rem 0, no horizontal padding), with spacing coming from the nav's own flex `gap`. -- */ .site-style-news .menu-item { padding: .25rem 0; font-size: .9375rem; font-weight: 500; } /* -- Pill button sizing: shared `.button-4` is a large CTA (px-10 py-5 text-3xl); the prototype's is a modest inline pill. -- */ .site-style-news .button-4 { padding: 1rem 2.5rem; font-size: 1.125rem; } /* -- Primary button layout: shared `.btn-primary` never sets `display` at all (unlike the prototype's own, which is `inline-flex; align-items: center; justify-content:center;`), so a button with an icon next to its label (Subscribe buttons) drops the icon onto its own line - Tailwind's preflight makes SVGs `display:block`. Same fix already applied to every other niche pack this project touches (see niche-sports.css). -- */ .site-style-news .btn-primary { display: inline-flex; align-items: center; justify-content: center; } /* The header's desktop Subscribe button (`btn-primary … xl:inline-flex hidden`) relied on Tailwind's single-class `.hidden` to stay off on mobile; the fix above has higher specificity (`.site-style-news .btn-primary`) and silently defeated it, showing the button at every width. Restore the responsive toggle with matching specificity. */ .site-style-news .btn-primary.hidden { display: none; } @media (min-width: 1322px) { .site-style-news .btn-primary.hidden.xl\:inline-flex { display: inline-flex; } } /* -- Primary button text: shared `.btn-primary` uses dark text (text-neutral-950); the prototype's is `color:#fff` - white text (and any inline SVG using currentColor) on every button in this pack. -- */ .site-style-news .btn-primary { color: var(--color-neutral-0); } .dark .site-style-news .btn-primary { color: var(--color-neutral-0); } /* -- Primary button sizing: same shared-class conflict as `.menu-item` and `.button-4` above - one compound selector per size combination actually used in this pack, so each still gets its own intended size instead of collapsing to the shared default (px-6 py-2 text-lg). -- */ .site-style-news .btn-primary.px-5.py-2 { padding: .5rem 1.25rem; font-size: .875rem; } .site-style-news .btn-primary.px-4.py-1\.5 { padding: .375rem 1rem; font-size: .875rem; } .site-style-news .btn-primary.px-8.py-3 { padding: .75rem 2rem; font-size: 1rem; } .site-style-news .btn-primary.px-7.py-3 { padding: .75rem 1.75rem; font-size: 1rem; } .site-style-news .btn-primary.px-7.py-2\.5 { padding: .625rem 1.75rem; font-size: 1rem; } .site-style-news .btn-primary.w-full { padding: .625rem 1.5rem; font-size: 1rem; } /* -- Share icon circles: the shared `ctrspace_render_share_icons()` helper (used on the single-post byline, the single-post author bio, and the author archive header) never sets a background - just a border - so on a patterned card (author bio's `pattern-grid`) the texture shows through the circle. The prototype's own author-page icons explicitly set `bg-neutral-0`; extended here to every use of the same shared component so it's consistent wherever it appears in this pack. -- */ .site-style-news a.size-9.rounded-full { background-color: var(--color-neutral-0); } .dark .site-style-news a.size-9.rounded-full { background-color: var(--color-neutral-dark-0); } /* -- Footer link spacing: shared `.footer-menu` adds its own `py-2` vertical padding meant for a plain sidebar widget list; stacked on top of the column `