.elementor .e-default-h1{/* ============================================================ Roundup article styles — affiliate-portal ------------------------------------------------------------ For posts generated by the `roundup-article-html` skill. WHY THIS FILE EXISTS The skill emits a self-contained HTML document with its CSS and JS in . Until 2026-09-08 the publish pipeline discarded the whole , so ~19 published roundups reached WordPress with every class attribute and neither a stylesheet nor a script. The pipeline is fixed, but that CSS was never stored, so it cannot be recovered for posts already generated. This file is therefore a FRESH design for that markup, not a reconstruction. It targets the 32 class names measured to appear in >=80% of 36 generated roundups, which cover a median 91% of the classes any one article uses. TWO THINGS IT MUST DO BEYOND LOOKS 1. Reveal the accordion panels. They are marked with the HTML `hidden` attribute and were opened by the (now absent) JS, so their spec tables are currently INVISIBLE on every published roundup. That is lost content, not lost styling. 2. Hide the dead controls. The filter and sort bars do nothing without their JS. A button that visibly does nothing is worse than no button. INSTALL Appearance > Customise > Additional CSS, or a child theme's style.css, or a code-snippets plugin. Scoped to .roundup-article throughout, so it cannot leak into the rest of the site. ============================================================ */ .roundup-article { --ra-fg: #1c1e21; --ra-muted: #5b6470; --ra-line: #e3e7ec; --ra-bg-soft: #f6f8fa; --ra-accent: #0b6e4f; --ra-accent-soft: #e8f4ef; --ra-warn: #a8630b; --ra-radius: 10px; color: var(--ra-fg); line-height: 1.65; } /* ── Recovered content ────────────────────────────────────── The UA stylesheet gives [hidden] display:none. These panels were opened by script that no longer exists, so without this rule their contents are unreachable. Scoped to the accordion ids so nothing else is unhidden. */ .roundup-article [id^="acc-"][hidden] { display: block !important; } /* ── Dead controls ────────────────────────────────────────── Filter and sort need JS that is not present. Hidden rather than styled: a control that cannot work should not look like one. */ .roundup-article .filter-bar, .roundup-article .sort-bar { display: none; } /* The accordion toggle is likewise inert, and its panel is now always open. Demote it from a button to a section label so the wording ("Full Specs") is kept without implying it does anything. */ .roundup-article .acc-toggle { all: unset; display: block; margin: 1.25rem 0 0.5rem; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; color: var(--ra-fg); cursor: default; } .roundup-article .acc-icon { display: none; } /* ── Intro furniture ────────────────────────────────────────*/ .roundup-article .eyebrow { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ra-accent); } .roundup-article .sub { margin: 0 0 1.5rem; font-size: 1.1rem; color: var(--ra-muted); } .roundup-article .section-intro { margin: 0 0 1.25rem; color: var(--ra-muted); } /* ── Table of contents ────────────────────────────────────── Deliberately NOT position:sticky. The class name asks for it, but a sticky block of unknown height inside someone else's theme is a reliable way to cover the content on a phone. */ .roundup-article .sticky-toc { margin: 0 0 1.75rem; padding: 1rem 1.25rem; background: var(--ra-bg-soft); border: 1px solid var(--ra-line); border-radius: var(--ra-radius); } .roundup-article .sticky-toc ul { margin: 0; padding-left: 1.1rem; } .roundup-article .sticky-toc li { margin: 0.2rem 0; } .roundup-article .sticky-toc a { text-decoration: none; } .roundup-article .sticky-toc a:hover { text-decoration: underline; } /* ── Trust box and verdict ──────────────────────────────────*/ .roundup-article .trust-box { margin: 0 0 1.75rem; padding: 1rem 1.25rem; background: var(--ra-accent-soft); border-left: 4px solid var(--ra-accent); border-radius: 0 var(--ra-radius) var(--ra-radius) 0; font-size: 0.95rem; } .roundup-article .verdict-card { display: flex; gap: 0.9rem; align-items: flex-start; margin: 1.5rem 0; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--ra-line); border-radius: var(--ra-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06); } .roundup-article .vc-icon { flex: 0 0 auto; font-size: 1.4rem; line-height: 1.2; } /* ── Product cards ──────────────────────────────────────────*/ .roundup-article .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin: 1.5rem 0 2rem; } .roundup-article .pcard { padding: 1.25rem; background: #fff; border: 1px solid var(--ra-line); border-radius: var(--ra-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06); } /* `pcard` is used on both the grid cards and the full write-up sections, so the full-width variant must not inherit the grid card's cramped padding. */ .roundup-article section.pcard { margin: 2rem 0; padding: 1.5rem; } .roundup-article .cbody { margin-top: 0.75rem; } .roundup-article .ctitle { margin: 0.35rem 0 0.5rem; font-size: 1.15rem; line-height: 1.3; } .roundup-article .cfeature, .roundup-article .cverdict, .roundup-article .cbestfor { margin: 0.4rem 0; font-size: 0.95rem; } .roundup-article .cbestfor { color: var(--ra-muted); } .roundup-article .cverdict { padding-left: 0.75rem; border-left: 3px solid var(--ra-line); } /* ── Badges ─────────────────────────────────────────────────*/ .roundup-article .cbadge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--ra-bg-soft); color: var(--ra-muted); } .roundup-article .cb-best { background: var(--ra-accent); color: #fff; } .roundup-article .cb-budget { background: #eef4ff; color: #1d4ed8; } .roundup-article .cb-power { background: #fdf1e3; color: var(--ra-warn); } .roundup-article .cb-personal { background: #f3eefe; color: #6d28d9; } .roundup-article .cb-default { background: var(--ra-bg-soft); color: var(--ra-muted); } /* ── Tables ───────────────────────────────────────────────── Comparison tables are wide by nature. The wrapper scrolls so the PAGE never does — a table that widens the body breaks every other section. */ .roundup-article .table-scroll { overflow-x: auto; margin: 1.25rem 0; border: 1px solid var(--ra-line); border-radius: var(--ra-radius); -webkit-overflow-scrolling: touch; } .roundup-article .fstable, .roundup-article .ctable, .roundup-article .tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .roundup-article .table-scroll > .fstable { border: 0; } .roundup-article .fstable th, .roundup-article .ctable th, .roundup-article .tbl th { padding: 0.7rem 0.85rem; text-align: left; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ra-muted); background: var(--ra-bg-soft); border-bottom: 1px solid var(--ra-line); white-space: nowrap; } .roundup-article .fstable td, .roundup-article .ctable td, .roundup-article .tbl td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--ra-line); vertical-align: top; } .roundup-article .fstable tr:last-child td, .roundup-article .ctable tr:last-child td, .roundup-article .tbl tr:last-child td { border-bottom: 0; } .roundup-article .fstable tbody tr:hover { background: #fbfcfd; } /* ── Decision flow ──────────────────────────────────────────*/ .roundup-article .decision-flow { margin: 1.75rem 0; padding: 1.25rem; background: var(--ra-bg-soft); border-radius: var(--ra-radius); } .roundup-article .df-step { padding: 0.9rem 0; border-bottom: 1px dashed var(--ra-line); } .roundup-article .df-step:last-child { border-bottom: 0; } .roundup-article .df-question { margin: 0 0 0.4rem; font-weight: 700; } .roundup-article .df-choice { margin: 0.3rem 0 0.3rem 1rem; padding-left: 0.75rem; border-left: 3px solid var(--ra-accent); font-size: 0.95rem; } /* ── Small screens ──────────────────────────────────────────*/ @media (max-width: 600px) { .roundup-article .cards-grid { grid-template-columns: 1fr; gap: 1rem; } .roundup-article .pcard, .roundup-article section.pcard { padding: 1rem; } .roundup-article .verdict-card { flex-direction: column; gap: 0.5rem; } } /* ── Print ──────────────────────────────────────────────────*/ @media print { .roundup-article .sticky-toc { display: none; } .roundup-article .table-scroll { overflow: visible; border: 0; } .roundup-article .pcard { break-inside: avoid; box-shadow: none; } }\n}