/* ============================================================ PM Hub — blog design system Applies the approved type, colour and component language to the markup already inside published posts. No content is rewritten. Covers two legacy systems: .pmhx navy + Sora/Inter (post 189) .pmart-* violet + Newsreader (posts 41, 149) Selectors are prefixed with .pmhub-skin on so they beat the single-class rules in post content without needing !important. Deactivate the plugin to revert instantly. ============================================================ */ .pmhub-skin { --ink: #0E1525; --body: #3A4256; --muted: #6B7280; --violet: #7C3AED; --violet-txt: #6D28D9; --violet-lt: #A78BFA; --blue: #2563EB; --grad: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%); --line: #ECECF2; --line-2: #E4DBFC; --tint: #F5F1FE; --wash: #F8F8FB; --ok: #15803D; --bad: #B3372F; --display: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ---------- typography ---------- */ .pmhub-skin .pmhx, .pmhub-skin .pmart-body { font-family: var(--sans); color: var(--body); line-height: 1.7; } .pmhub-skin .pmhx h1, .pmhub-skin .pmhx h2, .pmhub-skin .pmhx h3, .pmhub-skin .pmhx h4, .pmhub-skin .pmhx h5, .pmhub-skin .pmart-body h2, .pmhub-skin .pmart-body h3, .pmhub-skin .pmart-body h4 { font-family: var(--display); color: var(--ink); font-weight: 600; letter-spacing: -.02em; } .pmhub-skin .pmhx .pmh-h1 { letter-spacing: -.025em; line-height: 1.08; } .pmhub-skin .pmhx h2 { line-height: 1.16; } .pmhub-skin .pmhx h2::before { background: var(--violet); } .pmhub-skin .pmhx a, .pmhub-skin .pmart-body a { color: var(--violet-txt); } .pmhub-skin .pmhx a:hover { color: var(--violet); } .pmhub-skin .pmhx .pmh-kicker, .pmhub-skin .pmhx .pmh-step, .pmhub-skin .pmhx .pmh-label { color: var(--violet-txt); font-family: var(--sans); } .pmhub-skin .pmhx .pmh-standfirst { color: var(--ink); } .pmhub-skin .pmhx .pmh-crumbs { color: var(--muted); } .pmhub-skin .pmhx .pmh-meta { color: var(--body); } .pmhub-skin .pmhx .pmh-shortprice, .pmhub-skin .pmhx .pmh-num, .pmhub-skin .pmhx .pmh-rank, .pmhub-skin .pmhx table td { font-variant-numeric: tabular-nums; } /* ---------- dark blocks ---------- */ .pmhub-skin .pmhx .pmh-quick, .pmhub-skin .pmhx .pmh-cta { background: var(--ink); border-radius: 18px; } .pmhub-skin .pmhx .pmh-quick { color: #C9CEDA; } .pmhub-skin .pmhx .pmh-quick .pmh-label { color: var(--violet-lt); } .pmhub-skin .pmhx .pmh-quick a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .pmhub-skin .pmhx .pmh-cta-row a { border-radius: 11px; font-weight: 700; } /* ---------- tool profile ---------- */ .pmhub-skin .pmhx .pmh-tool { border: 1px solid var(--line); border-radius: 18px; box-shadow: none; } .pmhub-skin .pmhx .pmh-tool h3 { font-size: 1.35rem; } .pmhub-skin .pmhx .pmh-bestfor { color: var(--violet-txt); font-weight: 600; } .pmhub-skin .pmhx .pmh-rank { background: var(--grad); border-radius: 13px; font-family: var(--display); font-weight: 600; } .pmhub-skin .pmhx .pmh-rank::after { border-color: rgba(255,255,255,.28); } /* ---------- chips, pills, cards ---------- */ .pmhub-skin .pmhx .pmh-chip { background: var(--wash); border: 1px solid var(--line); border-radius: 999px; } .pmhub-skin .pmhx .pmh-chip--p, .pmhub-skin .pmhx .pmh-shortprice { background: var(--tint); border-color: var(--line-2); color: var(--violet-txt); font-weight: 700; } .pmhub-skin .pmhx .pmh-card, .pmhub-skin .pmhx .pmh-glance, .pmhub-skin .pmhx .pmh-specs, .pmhub-skin .pmhx .pmh-shortcard, .pmhub-skin .pmhx .pmh-toc { border: 1px solid var(--line); border-radius: 14px; box-shadow: none; } .pmhub-skin .pmhx .pmh-card--num { border-top: 3px solid var(--violet); } .pmhub-skin .pmhx .pmh-minor { border-left-color: var(--violet); } .pmhub-skin .pmhx .pmh-shortcard:hover { border-color: var(--violet); } .pmhub-skin .pmhx .pmh-num { background: var(--ink); border-radius: 9px; } /* ---------- pros, cons, verdict, notes ---------- */ .pmhub-skin .pmhx .pmh-pros { border-top-color: var(--ok); } .pmhub-skin .pmhx .pmh-cons { border-top-color: var(--bad); } .pmhub-skin .pmhx .pmh-pros li::before { color: var(--ok); } .pmhub-skin .pmhx .pmh-cons li::before { color: var(--bad); } .pmhub-skin .pmhx .pmh-verdict, .pmhub-skin .pmhx .pmh-note { background: var(--tint); border-left: 3px solid var(--violet); border-radius: 0 12px 12px 0; } .pmhub-skin .pmhx .pmh-take { background: var(--tint); border: 1px solid var(--line-2); border-radius: 14px; } .pmhub-skin .pmhx .pmh-take li::before { color: var(--violet); } /* ---------- tables ---------- */ .pmhub-skin .pmhx .pmh-tablewrap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .pmhub-skin .pmhx table th { background: var(--ink); color: #fff; font-family: var(--sans); letter-spacing: .1em; } .pmhub-skin .pmhx table tbody tr:hover td { background: var(--wash); } /* ---------- table of contents and FAQ ---------- */ .pmhub-skin .pmhx .pmh-toc a:hover { color: var(--violet-txt); border-left-color: var(--violet); } .pmhub-skin .pmhx .pmh-faq details[open] { border-color: var(--line-2); } .pmhub-skin .pmhx .pmh-faq summary { font-family: var(--display); font-weight: 600; } /* ---------- shortlist card text ---------- */ .pmhub-skin .pmhx .pmh-shortname { font-family: var(--display); color: var(--ink); font-weight: 600; } .pmhub-skin .pmhx .pmh-shortfor { color: var(--muted); } .pmhub-skin .pmhx .pmh-a { color: var(--violet-txt); font-weight: 600; } .pmhub-skin .pmhx .pmh-tool-head h3 { font-family: var(--display); } /* ---------- posts on the older .pmart system (41, 149) ---------- */ .pmhub-skin .pmart-body blockquote { border-left-color: var(--violet); } .pmhub-skin .pmart-eyebrow { color: var(--violet-txt); } .pmhub-skin .pmart-rel-card { border-radius: 16px; } .pmhub-skin .pmart-rel-card:hover { border-color: var(--violet); } /* ---------- reading progress bar, previously teal ---------- */ .pmhub-skin .pml-progress { background: var(--grad) !important; } /* ---------- accessibility fixes carried over from the audit ---------- */ /* #7a879b on white measured 3.64:1 and failed AA at these sizes */ .pmhub-skin .pmhx .pmh-specs span, .pmhub-skin .pmhx .pmh-glance span { color: #69778C; } .pmhub-skin .pmhx a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .pmhub-skin *, .pmhub-skin *::before, .pmhub-skin *::after { transition: none !important; } }