/*
Theme Name: Healthwise360 Child
Theme URI: https://pencompare.co.uk
Description: Child theme for Healthwise360 / PenCompare. Holds the versioned design
tokens (theme.json) and the accessible component layer for comparison,
verification and evidence UI. No business logic lives here: prices,
provider records, verification events and affiliate links are owned by
the Healthwise360 Compare Core plugin.
Author: Healthwise360
Template: kadence
Version: 0.3.0
Requires PHP: 8.3
Text Domain: healthwise360-child
*/
/* ==========================================================================
Healthwise360 component layer
--------------------------------------------------------------------------
Tokens are defined in theme.json and emitted by WordPress as CSS custom
properties. Nothing below hardcodes a hex value: change a token, not this
file.
Reference: master build spec s.13 (design system) and s.14.1 (accessibility).
========================================================================== */
:root {
--hw-focus-width: 3px;
--hw-touch-min: 44px;
}
/* --------------------------------------------------------------------------
0. Jembatan palet Kadence
--------------------------------------------------------------------------
Kadence merender header, footer, tombol dan blok Kadence dari sembilan slot
Customizer-nya sendiri (--global-palette1..12), bukan dari theme.json. Dua
sistem itu sudah pernah melenceng: theme.json menyatakan latar warm white dan
teks navy, sementara yang benar-benar tampil adalah putih murni dan teal.
Mengarahkan setiap slot Kadence ke token theme.json menutup celah itu untuk
selamanya. Ubah satu nilai di theme.json, dan Kadence ikut — tanpa perlu ada
yang membuka Customizer dan menyalin hex dengan tangan.
Selector `html:root` (0,1,1) sengaja dipakai, bukan `:root` (0,1,0), supaya
tetap menang atas CSS inline yang Kadence suntikkan ke .
Slot 2 memakai cta-orange-strong, bukan cta-orange. Di halaman Home slot itu
dipakai sebagai warna teks judul (3x) dan latar hover (9x); oranye brand
#EE7C2C di atas putih hanya 2,78:1 dan gagal WCAG 2.2 AA. Oranye brand tetap
tersedia lewat token cta-orange untuk aksen di atas teal gelap saja.
-------------------------------------------------------------------------- */
html:root {
--global-palette1: var(--wp--preset--color--trust-teal);
--global-palette2: var(--wp--preset--color--cta-orange-strong);
--global-palette3: var(--wp--preset--color--navy);
--global-palette4: var(--wp--preset--color--trust-teal);
--global-palette5: var(--wp--preset--color--grey-muted);
--global-palette6: var(--wp--preset--color--grey-subtle);
--global-palette7: var(--wp--preset--color--warm-white);
--global-palette8: var(--wp--preset--color--white);
--global-palette9: var(--wp--preset--color--white);
--global-palette10: var(--wp--preset--color--mint);
--global-palette11: var(--wp--preset--color--success-green);
--global-palette12: var(--wp--preset--color--link-blue);
}
/* --------------------------------------------------------------------------
1. Focus visibility (WCAG 2.2 AA - 2.4.7, 2.4.11)
A visible, high-contrast focus ring on every interactive element. Kadence
ships a subtle default; regulated journeys need an unmistakable one.
-------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: var(--hw-focus-width) solid var(--wp--preset--color--link-blue);
outline-offset: 2px;
border-radius: 2px;
}
/* Never remove focus styling without replacing it. */
:focus:not(:focus-visible) {
outline: none;
}
/* --------------------------------------------------------------------------
2. Body links (spec s.13.3 - underline in body copy)
-------------------------------------------------------------------------- */
.entry-content a:not(.wp-block-button__link):not(.hw-cta) {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* --------------------------------------------------------------------------
3. Price figures (spec s.13.3 - tabular numerals, no condensed font)
Fixed-width digits so totals align down a column and cannot be misread.
-------------------------------------------------------------------------- */
.hw-price,
.hw-price-total,
td.hw-numeric,
th.hw-numeric {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
letter-spacing: 0;
}
.hw-price-total {
font-weight: 700;
font-size: var(--wp--preset--font-size--lead);
color: var(--wp--preset--color--navy);
}
/* --------------------------------------------------------------------------
4. Status pills (spec s.13.6, s.10.5)
Freshness and verification states. Colour is NEVER the only signal: every
pill carries an icon slot and descriptive text. Do not add a colour-only
variant.
-------------------------------------------------------------------------- */
.hw-status {
display: inline-flex;
align-items: center;
gap: var(--wp--preset--spacing--xxs);
padding: 2px var(--wp--preset--spacing--xs);
border-radius: var(--wp--custom--radius--small);
border: 1px solid currentColor;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
line-height: 1.4;
}
.hw-status__icon {
flex: 0 0 auto;
width: 1em;
height: 1em;
}
.hw-status--current {
color: var(--wp--preset--color--trust-teal);
background: var(--wp--preset--color--trust-teal-surface);
}
.hw-status--review-due,
.hw-status--stale {
color: var(--wp--preset--color--warning-amber);
background: var(--wp--preset--color--warning-amber-surface);
}
.hw-status--expired,
.hw-status--unverified,
.hw-status--suspended {
color: var(--wp--preset--color--error-red);
background: var(--wp--preset--color--error-red-surface);
}
/* --------------------------------------------------------------------------
5. Evidence line
The timestamp and source that must sit beside every price or verification
claim (spec s.10.7).
-------------------------------------------------------------------------- */
.hw-evidence {
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--navy-secondary);
margin-block-start: var(--wp--preset--spacing--xxs);
}
/* --------------------------------------------------------------------------
6. Notices (spec s.13.6)
-------------------------------------------------------------------------- */
.hw-notice {
border-left: 4px solid;
padding: var(--wp--preset--spacing--m);
border-radius: var(--wp--custom--radius--small);
margin-block: var(--wp--preset--spacing--l);
}
.hw-notice--info {
border-color: var(--wp--preset--color--trust-teal);
background: var(--wp--preset--color--trust-teal-surface);
}
.hw-notice--warning {
border-color: var(--wp--preset--color--warning-amber);
background: var(--wp--preset--color--warning-amber-surface);
}
.hw-notice--critical {
border-color: var(--wp--preset--color--error-red);
background: var(--wp--preset--color--error-red-surface);
}
/* Sitewide compliance disclosure. Must stay visible - never collapse it into
a tooltip or hover state (spec s.19 interaction requirements). */
.hw-disclosure {
font-size: var(--wp--preset--font-size--small);
background: var(--wp--preset--color--soft-grey);
border: 1px solid var(--wp--preset--color--grey-border);
border-radius: var(--wp--custom--radius--small);
padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
}
/* --------------------------------------------------------------------------
7. Comparison tables
-------------------------------------------------------------------------- */
.hw-table {
width: 100%;
border-collapse: collapse;
background: var(--wp--preset--color--soft-grey);
}
.hw-table th,
.hw-table td {
padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
border-bottom: 1px solid var(--wp--preset--color--grey-border);
text-align: left;
vertical-align: top;
}
.hw-table th {
font-weight: 700;
color: var(--wp--preset--color--navy);
}
/* Sponsored rows must be visually separated from organic results and must not
resemble an independent result (spec s.10.4). */
.hw-table tr.is-sponsored {
background: var(--wp--preset--color--warm-white);
border-left: 4px solid var(--wp--preset--color--grey-border);
}
.hw-sponsored-label {
display: inline-block;
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--wp--preset--color--navy-secondary);
}
/* --------------------------------------------------------------------------
8. Touch targets (WCAG 2.2 AA - 2.5.8)
-------------------------------------------------------------------------- */
.hw-cta,
.wp-block-button__link,
.hw-filter input[type="checkbox"] + label {
min-height: var(--hw-touch-min);
display: inline-flex;
align-items: center;
}
/* --------------------------------------------------------------------------
9. Screen-reader utilities
-------------------------------------------------------------------------- */
.hw-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.hw-skip-link:focus {
position: fixed;
top: var(--wp--preset--spacing--s);
left: var(--wp--preset--spacing--s);
z-index: 999999;
padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
background: var(--wp--preset--color--navy);
color: var(--wp--preset--color--warm-white);
width: auto;
height: auto;
clip: auto;
}
/* --------------------------------------------------------------------------
10. Reduced motion (spec s.13.6, WCAG 2.3.3)
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
11. Reflow (WCAG 2.2 AA - 1.4.10, 320 CSS px without loss of function)
-------------------------------------------------------------------------- */
@media (max-width: 480px) {
.hw-table,
.hw-table thead,
.hw-table tbody,
.hw-table tr,
.hw-table td {
display: block;
width: 100%;
}
.hw-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.hw-table tr {
margin-block-end: var(--wp--preset--spacing--m);
border: 1px solid var(--wp--preset--color--grey-border);
border-radius: var(--wp--custom--radius--medium);
}
}
/* --------------------------------------------------------------------------
13. Elevation
One shadow, used only on cards that represent a real record or a real total.
Not decoration: if everything lifts, nothing reads as important.
-------------------------------------------------------------------------- */
.hw-card {
/* Bayangan diturunkan dari navy teks (#0D1019), bukan hitam murni, supaya
tepian kartu terasa menyatu dengan palet. */
box-shadow: 0 1px 2px rgba(13, 16, 25, 0.05),
0 12px 28px -16px rgba(13, 16, 25, 0.18);
}
/* --------------------------------------------------------------------------
14. Eyebrow label
-------------------------------------------------------------------------- */
.hw-eyebrow {
display: block;
width: fit-content;
padding: 4px var(--wp--preset--spacing--s);
border-radius: 999px;
background: var(--wp--preset--color--trust-teal-surface);
color: var(--wp--preset--color--trust-teal);
}
.hw-eyebrow.has-text-align-center {
margin-inline: auto;
}
/* --------------------------------------------------------------------------
15. Action rows
-------------------------------------------------------------------------- */
.hw-actions {
justify-content: center;
flex-wrap: wrap;
}
/* --------------------------------------------------------------------------
16. THE RECEIPT (spec s.10 - the complete cost equation)
--------------------------------------------------------------------------
The signature component. A two-column grid: label left, figure right, ruled
total at the foot. Every row is a real paragraph block in reading order, so a
screen reader hears "Consultation fee, twenty pounds" as a pair, and the grid
is purely visual.
Figures use tabular numerals so the decimal points stack. This is the one
place the design is allowed to look like a document rather than a web page,
because that is exactly what it is.
-------------------------------------------------------------------------- */
.hw-receipt {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--l);
align-items: baseline;
}
.hw-receipt > p {
margin-block: 0;
}
.hw-receipt__value {
text-align: right;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.hw-receipt__total-label,
.hw-receipt__total-value {
margin-block-start: var(--wp--preset--spacing--xs);
padding-block-start: var(--wp--preset--spacing--s);
border-top: 2px solid var(--wp--preset--color--navy);
font-weight: 700;
}
.hw-receipt__total-value {
text-align: right;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
font-size: var(--wp--preset--font-size--heading-small);
line-height: 1.2;
}
/* --------------------------------------------------------------------------
17. Stat row (market summary)
Divided cells rather than separate floating cards: these three figures
describe one dataset and should read as one object.
-------------------------------------------------------------------------- */
@media (min-width: 782px) {
.hw-statrow .wp-block-column + .wp-block-column {
border-left: 1px solid var(--wp--preset--color--grey-border);
padding-left: var(--wp--preset--spacing--l);
}
}
@media (max-width: 781px) {
.hw-statrow .wp-block-column + .wp-block-column {
border-top: 1px solid var(--wp--preset--color--grey-border);
padding-top: var(--wp--preset--spacing--m);
}
}
.hw-stat-value {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
font-weight: 700;
}
/* --------------------------------------------------------------------------
18. Keyline
A short teal rule above a card heading. Used to group the principle cards
without adding another surface colour.
-------------------------------------------------------------------------- */
.hw-keyline::before {
content: "";
display: block;
width: 32px;
height: 3px;
border-radius: 2px;
background: var(--wp--preset--color--trust-teal);
margin-block-end: var(--wp--preset--spacing--s);
}
/* --------------------------------------------------------------------------
19. Print
-------------------------------------------------------------------------- */
@media print {
.hw-status,
.hw-evidence,
.hw-disclosure {
border: 1px solid #000;
}
}
/* Card Modifiers & Icons for Tools Hub */
.hw-card--muted { background: var(--wp--preset--color--soft-grey); border-color: var(--wp--preset--color--grey-border); box-shadow: none; }
.hw-card__icon { font-size: 28px; line-height: 1; margin: 0 0 12px; }
.hw-btn-disabled .wp-block-button__link { border-color: var(--wp--preset--color--grey-border); color: var(--wp--preset--color--grey-text-strong); cursor: default; background: transparent; }
/* --------------------------------------------------------------------------
20. Footer
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
20a-bis. Label "Coming soon"
Menggantikan tombol non-fungsional di halaman Tools. Sebelumnya keadaan itu
digambarkan dengan `core/button` tanpa `href`: hasilnya `` yang tetap
masuk urutan tab dan tampak seperti tombol, tapi tidak melakukan apa pun —
dan bagi pembaca layar bukan kontrol sama sekali, karena `` tanpa href
tidak diumumkan sebagai tautan. Sebuah label memang lebih jujur: fiturnya
belum ada, jadi jangan tampilkan sesuatu yang bisa ditekan.
-------------------------------------------------------------------------- */
.hw-badge-soon {
display: inline-block;
margin: 0;
padding: 6px 14px;
border: 1px dashed var(--wp--preset--color--grey-border);
border-radius: 999px;
color: var(--wp--preset--color--grey-muted);
font-weight: 600;
}
/* --------------------------------------------------------------------------
20b. Footer gelap
Footer memakai warna yang sama persis dengan bilah header —
`trust-teal-dark` #163A49, bukan `trust-teal` #1F4C5F yang dipakai seksi
isi. Dengan begitu header dan footer membingkai halaman sebagai sepasang,
dan seksi gelap di tengah tetap terbaca sebagai lapisan yang berbeda.
Kontras di atas #163A49, semuanya dihitung:
putih 12,10:1
on-dark-body 8,27:1
mint 5,45:1 — lulus di semua ukuran teks
Perhatikan mint lulus penuh di sini, sementara di atas `trust-teal` #1F4C5F
ia hanya 4,19:1 dan gagal untuk teks isi. Dua teal yang berbeda punya aturan
aksen yang berbeda; jangan menyalin aturan seksi ke footer begitu saja.
`!important` diperlukan karena blok footer membawa kelas preset WordPress
(`has-navy-color` dan sejenisnya) yang core tuliskan dengan !important.
-------------------------------------------------------------------------- */
.hw-surface-footer {
background-color: var(--wp--preset--color--trust-teal-dark) !important;
}
/* Elemen