row becomes a card; each | shows the matching column
* header text as a label above its value (label is injected via
* data-label by main.js). The dark aubergine spine and zebra striping are
* stripped on mobile because they don't translate to vertical stacks
* — each card already reads as a self-contained block. */
@media(max-width:720px){
/* Wrapper: strip the outer card chrome — row cards carry their own. */
.soeb-article__body .wp-block-table,
.soeb-article__body figure.wp-block-table,
.soeb-article__body .table-wrap,
.soeb-article__body .soeb-table{
margin:24px 0;
overflow:visible;
background:transparent;
border:0;
border-radius:0;
box-shadow:none;
padding:0;
}
.soeb-article__body .wp-block-table::after,
.soeb-article__body figure.wp-block-table::after,
.soeb-article__body .table-wrap::after{content:none}
/* Table: drop table semantics so children can stack as block elements. */
.soeb-article__body .wp-block-table table,
.soeb-article__body figure.wp-block-table table,
.soeb-article__body .table-wrap table,
.soeb-article__body > table{
display:block;
width:100%;
min-width:0;
background:transparent;
font-size:.92rem;
}
/* Hide thead — labels are repeated per-cell via data-label. */
.soeb-article__body .wp-block-table table thead,
.soeb-article__body figure.wp-block-table table thead,
.soeb-article__body .table-wrap table thead,
.soeb-article__body > table thead{display:none}
.soeb-article__body .wp-block-table table tbody,
.soeb-article__body .wp-block-table table tfoot,
.soeb-article__body figure.wp-block-table table tbody,
.soeb-article__body figure.wp-block-table table tfoot,
.soeb-article__body .table-wrap table tbody,
.soeb-article__body .table-wrap table tfoot,
.soeb-article__body > table tbody,
.soeb-article__body > table tfoot{display:block}
/* Each row → card. */
.soeb-article__body .wp-block-table table tbody tr,
.soeb-article__body .wp-block-table table tfoot tr,
.soeb-article__body figure.wp-block-table table tbody tr,
.soeb-article__body figure.wp-block-table table tfoot tr,
.soeb-article__body .table-wrap table tbody tr,
.soeb-article__body .table-wrap table tfoot tr,
.soeb-article__body > table tbody tr,
.soeb-article__body > table tfoot tr{
display:block;
background:#ffffff;
border:1px solid var(--sa-line);
border-radius:14px;
box-shadow:var(--sa-shadow-soft);
padding:6px 0;
margin:0 0 14px;
overflow:hidden;
}
.soeb-article__body .wp-block-table table tbody tr:last-child,
.soeb-article__body figure.wp-block-table table tbody tr:last-child,
.soeb-article__body .table-wrap table tbody tr:last-child,
.soeb-article__body > table tbody tr:last-child{margin-bottom:0}
/* Each cell → stacked label/value. */
.soeb-article__body .wp-block-table table tbody td,
.soeb-article__body .wp-block-table table tbody th,
.soeb-article__body .wp-block-table table tfoot td,
.soeb-article__body figure.wp-block-table table tbody td,
.soeb-article__body figure.wp-block-table table tbody th,
.soeb-article__body figure.wp-block-table table tfoot td,
.soeb-article__body .table-wrap table tbody td,
.soeb-article__body .table-wrap table tbody th,
.soeb-article__body .table-wrap table tfoot td,
.soeb-article__body > table tbody td,
.soeb-article__body > table tbody th,
.soeb-article__body > table tfoot td{
display:block;
width:100%;
padding:10px 16px;
border:0;
border-bottom:1px solid var(--sa-line-soft);
background:transparent !important;
color:var(--sa-text) !important;
text-align:left;
font-weight:400;
text-transform:none;
letter-spacing:normal;
font-size:.92rem;
line-height:1.55;
}
.soeb-article__body .wp-block-table table tbody tr > *:last-child,
.soeb-article__body figure.wp-block-table table tbody tr > *:last-child,
.soeb-article__body .table-wrap table tbody tr > *:last-child,
.soeb-article__body > table tbody tr > *:last-child{border-bottom:0}
/* First cell — the row label (supplier). On mobile it anchors the
* card with a faint lilac tint and bold near-black text. */
.soeb-article__body .wp-block-table table tbody tr td:first-child,
.soeb-article__body .wp-block-table table tbody tr th:first-child,
.soeb-article__body figure.wp-block-table table tbody tr td:first-child,
.soeb-article__body figure.wp-block-table table tbody tr th:first-child,
.soeb-article__body .table-wrap table tbody tr td:first-child,
.soeb-article__body .table-wrap table tbody tr th:first-child,
.soeb-article__body > table tbody tr td:first-child,
.soeb-article__body > table tbody tr th:first-child{
background:var(--brand-tint) !important;
color:var(--sa-ink) !important;
font-weight:700;
}
.soeb-article__body table tbody td:first-child strong,
.soeb-article__body table tbody td:first-child b,
.soeb-article__body table tbody th:first-child strong,
.soeb-article__body table tbody th:first-child b{color:var(--sa-ink) !important}
/* Restore link colour in the first cell now that the aubergine bg is gone. */
.soeb-article__body table tbody td:first-child a,
.soeb-article__body table tbody th:first-child a{color:var(--sa-blue)}
.soeb-article__body table tbody td:first-child a:hover,
.soeb-article__body table tbody th:first-child a:hover{color:var(--sa-blue-dark)}
/* The label, injected from data-label. */
.soeb-article__body table tbody td[data-label]::before,
.soeb-article__body table tfoot td[data-label]::before{
content:attr(data-label);
display:block;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:.62rem;
font-weight:500;
text-transform:uppercase;
letter-spacing:.1em;
color:var(--brand);
margin-bottom:4px;
}
.soeb-article__body table tbody td:first-child:not([data-label])::before{content:none}
/* Ranked-table winner tint — on mobile, paint the card itself, not
* the individual td backgrounds (which are transparent now). */
.soeb-article__body .soeb-table--ranked tr.soeb-table-winner,
.soeb-article__body table.soeb-table--ranked tr.soeb-table-winner{
background:var(--brand-tint-2);border-color:var(--brand);
}
}
/* Ranked table modifier — adds winner-row tint and richer chrome.
* Add `soeb-table--ranked` class to the table or its wrapper. The
* featured row uses the `soeb-table-winner` class.
* v3.28.2: tint applied to | cells (not the | ) so it overrides
* the new td-level zebra-stripe rule. */
.soeb-article__body .soeb-table--ranked tr.soeb-table-winner td,
.soeb-article__body table.soeb-table--ranked tr.soeb-table-winner td{
background:var(--brand-tint);
}
.soeb-article__body .soeb-winner-pill{
display:inline-flex;align-items:center;gap:5px;
background:var(--brand);
border-radius:999px;
padding:3px 9px;
font-size:.62rem;
font-weight:700;
color:#ffffff;
text-transform:uppercase;
letter-spacing:.06em;
margin-left:8px;
vertical-align:middle;
}
.soeb-article__body .soeb-rating-chip{
display:inline-block;
background:var(--brand-zebra);
border:1px solid var(--sa-line);
color:var(--sa-ink);
border-radius:999px;
padding:5px 11px;
font-size:.75rem;
font-weight:800;
line-height:1;
}
.soeb-article__body .soeb-rating-chip--gold{
background:rgba(245,166,35,.16);border-color:rgba(245,166,35,.42);color:#f3c980;
}
.soeb-article__body .soeb-rating-chip--green{
background:rgba(201,168,255,.16);border-color:rgba(201,168,255,.45);color:#C9A8FF;
}
/* ── Optional helper components (added via Custom HTML block) ─
* Drop these snippets into a post via Gutenberg's "Custom HTML"
* block. Class names are stable and won't change. */
/* ── Default reusable callouts ──────────────────────────── *
* Generic class names suitable for any article. Use plain HTML:
* Note Useful info…
* Tip Something to try…
* Heads up Caution…
* These complement the heavier .soeb-callout variants below — pick
* .article-* when you just need a clean inline note, .soeb-callout
* when you want the labelled-icon chrome. */
.soeb-article__body .article-note,
.soeb-article__body .article-tip,
.soeb-article__body .article-warning{
margin:32px 0;
padding:18px 20px;
border-radius:16px;
border:1px solid var(--sa-line);
background:#fff;
color:var(--sa-text);
font-size:.97rem;
line-height:1.6;
}
.soeb-article__body .article-note > *:last-child,
.soeb-article__body .article-tip > *:last-child,
.soeb-article__body .article-warning > *:last-child{margin-bottom:0}
.soeb-article__body .article-note strong,
.soeb-article__body .article-tip strong,
.soeb-article__body .article-warning strong{
color:var(--sa-ink);
margin-right:.35em;
}
.soeb-article__body .article-note{
background:var(--sa-yellow-soft);
border-color:var(--sa-yellow-line);
color:var(--sa-yellow-text);
}
.soeb-article__body .article-note strong{color:#5a3d00}
.soeb-article__body .article-tip{
background:var(--sa-blue-tint);
border-color:rgba(31,133,167,.2);
color:var(--sa-ink);
}
.soeb-article__body .article-warning{
background:var(--sa-amber-soft);
border-color:var(--sa-amber-line);
color:var(--sa-amber-text);
}
/* Callout box — info / tip / warning / takeaway. */
.soeb-article__body .soeb-callout{
margin:24px 0;
padding:18px 22px;
border-radius:18px;
border:1px solid var(--sa-line);
background:#fff;
}
.soeb-article__body .soeb-callout > *:last-child{margin-bottom:0}
.soeb-article__body .soeb-callout .soeb-callout__label{
display:inline-flex;align-items:center;gap:9px;
font-size:.7rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
margin:0 0 8px;
}
.soeb-article__body .soeb-callout .soeb-callout__label::before{
content:"i";
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;border-radius:8px;
font-size:.78rem;font-weight:900;
color:#fff;
}
.soeb-article__body .soeb-callout--info{
background:var(--sa-blue-tint);
border-color:rgba(139,92,246,.18);
}
.soeb-article__body .soeb-callout--info .soeb-callout__label{color:var(--sa-blue-dark)}
.soeb-article__body .soeb-callout--info .soeb-callout__label::before{background:var(--sa-blue)}
.soeb-article__body .soeb-callout--info p{color:var(--sa-text)}
.soeb-article__body .soeb-callout--tip{
background:var(--sa-yellow-soft);
border-color:var(--sa-yellow-line);
}
.soeb-article__body .soeb-callout--tip .soeb-callout__label{color:#8a5a00}
.soeb-article__body .soeb-callout--tip .soeb-callout__label::before{
content:"\2605";
background:var(--sa-yellow);
color:#241B3D;
}
.soeb-article__body .soeb-callout--tip p{color:var(--sa-yellow-text)}
.soeb-article__body .soeb-callout--warning{
background:var(--sa-amber-soft);
border-color:var(--sa-amber-line);
}
.soeb-article__body .soeb-callout--warning .soeb-callout__label{color:var(--sa-amber-text)}
.soeb-article__body .soeb-callout--warning .soeb-callout__label::before{
content:"!";
background:var(--sa-amber);
}
.soeb-article__body .soeb-callout--warning p{color:#5a2900}
.soeb-article__body .soeb-callout--takeaway{
background:var(--sa-green-soft);
border-color:var(--sa-green-line);
}
.soeb-article__body .soeb-callout--takeaway .soeb-callout__label{color:#2E1059}
.soeb-article__body .soeb-callout--takeaway .soeb-callout__label::before{
content:"\2713";
background:var(--sa-green);
}
.soeb-article__body .soeb-callout--takeaway p{color:#3A3350}
/* FAQ accordion — uses native / so no JS needed
* and content remains accessible even with scripts disabled. */
.soeb-article__body .soeb-faq{
display:grid;
gap:10px;
margin:24px 0;
}
.soeb-article__body .soeb-faq details{
background:#fff;
border:1px solid var(--sa-line);
border-radius:18px;
box-shadow:var(--sa-shadow-soft);
overflow:hidden;
transition:border-color .2s ease;
}
.soeb-article__body .soeb-faq details[open]{
border-color:rgba(139,92,246,.25);
}
.soeb-article__body .soeb-faq summary{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
padding:18px 22px;
font-size:1.02rem;
font-weight:700;
letter-spacing:-.015em;
color:var(--sa-ink);
cursor:pointer;
list-style:none;
}
.soeb-article__body .soeb-faq summary::-webkit-details-marker{display:none}
.soeb-article__body .soeb-faq summary::after{
content:"+";
width:26px;height:26px;
border-radius:9px;
background:var(--sa-soft);
border:1px solid var(--sa-line);
color:var(--sa-text);
display:inline-flex;align-items:center;justify-content:center;
font-weight:900;
font-size:1rem;
flex-shrink:0;
line-height:1;
transition:background .2s ease, color .2s ease, transform .2s ease;
}
.soeb-article__body .soeb-faq details[open] summary::after{
content:"\2212";
background:var(--sa-blue);
color:#fff;
border-color:transparent;
}
.soeb-article__body .soeb-faq details > *:not(summary){
padding:0 22px 18px;
color:var(--sa-text);
line-height:1.65;
font-size:.95rem;
}
/* Stats row — small inline metric grid. */
.soeb-article__body .soeb-stats{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
gap:10px;
margin:24px 0;
}
.soeb-article__body .soeb-stats__item{
background:var(--sa-soft);
border:1px solid var(--sa-line);
border-radius:14px;
padding:14px 16px;
}
.soeb-article__body .soeb-stats__item small{
display:block;
color:var(--sa-muted);
font-size:.66rem;
text-transform:uppercase;
letter-spacing:.06em;
font-weight:900;
margin-bottom:4px;
}
.soeb-article__body .soeb-stats__item strong{
display:block;
font-size:1.4rem;
letter-spacing:-.04em;
color:var(--sa-ink);
font-weight:800;
line-height:1.1;
}
.soeb-article__body .soeb-stats__item .soeb-stats__meta{
display:block;
color:var(--sa-blue-dark);
font-size:.72rem;
font-weight:800;
margin-top:4px;
}
/* Inline CTA card — for mid-article conversions. */
.soeb-article__body .soeb-cta-card{
background:linear-gradient(180deg,var(--sa-blue-tint) 0%,#fff 100%);
border:1px solid rgba(139,92,246,.25);
border-radius:var(--sa-radius-card);
padding:22px 24px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
margin:28px 0;
}
.soeb-article__body .soeb-cta-card > div{flex:1;min-width:220px}
.soeb-article__body .soeb-cta-card .soeb-cta-card__pill{
display:inline-flex;align-items:center;gap:8px;
background:#fff;
border:1px solid rgba(139,92,246,.18);
color:var(--sa-blue-dark);
border-radius:999px;
padding:5px 11px;
font-size:.66rem;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:10px;
}
.soeb-article__body .soeb-cta-card .soeb-cta-card__pill::before{
content:"";width:6px;height:6px;border-radius:50%;background:var(--sa-blue);
}
.soeb-article__body .soeb-cta-card h4{
font-size:1.15rem;
letter-spacing:-.035em;
font-weight:800;
color:var(--sa-ink);
margin:0 0 4px;
}
.soeb-article__body .soeb-cta-card p{font-size:.92rem;color:var(--sa-text);margin:0}
.soeb-article__body .soeb-cta-card .soeb-cta-card__btn,
.soeb-article__body a.soeb-cta-card__btn{
background:var(--sa-blue);
color:#fff !important;
border-radius:999px;
padding:12px 22px;
font-weight:800;
font-size:.9rem;
text-decoration:none !important;
white-space:nowrap;
box-shadow:0 10px 22px rgba(139,92,246,.22);
transition:background .15s ease, transform .15s ease;
}
.soeb-article__body .soeb-cta-card .soeb-cta-card__btn:hover,
.soeb-article__body a.soeb-cta-card__btn:hover{
background:var(--sa-blue-dark);
transform:translateY(-1px);
}
/* Key-takeaways callout — a richer variant for "what to know" boxes.
* Drop this near the top of an article for a quick summary panel. */
.soeb-article__body .soeb-key-takeaways{
background:linear-gradient(180deg,var(--sa-yellow-soft) 0%,#fffbea 100%);
border:1px solid var(--sa-yellow-line);
border-radius:var(--sa-radius-card);
padding:22px 24px;
margin:28px 0;
}
.soeb-article__body .soeb-key-takeaways__label{
display:inline-flex;align-items:center;gap:10px;
font-size:.72rem;
color:#8a5a00;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
margin:0 0 12px;
}
.soeb-article__body .soeb-key-takeaways__label::before{
content:"\2605";
width:30px;height:30px;border-radius:10px;
background:var(--sa-yellow);color:#241B3D;
display:grid;place-items:center;
font-size:.95rem;font-weight:900;
}
.soeb-article__body .soeb-key-takeaways ul{margin:0}
.soeb-article__body .soeb-key-takeaways ul > li{color:var(--sa-yellow-text)}
.soeb-article__body .soeb-key-takeaways ul > li::before{background:var(--sa-amber)}
.soeb-article__body .soeb-key-takeaways ul > li strong{color:var(--sa-ink)}
/* ── Article footer (tags, author, related, newsletter) ─── */
.soeb-article__footer{
background:#fff;
padding:48px 0 0;
}
.soeb-article__footer-inner{
max-width:1100px;
margin:0 auto;
}
.soeb-article__tags{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
padding:22px 0;
border-top:1px solid var(--sa-line);
max-width:var(--sa-reading-w);
}
.soeb-article__tags-label{
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.06em;
font-weight:900;
color:var(--sa-muted);
}
.soeb-article__tag{
display:inline-flex;align-items:center;
background:#241B3D;
color:#fff;
border-radius:999px;
padding:6px 13px;
font-family:'IBM Plex Mono',ui-monospace,monospace;
font-size:.74rem;
font-weight:600;
letter-spacing:.02em;
text-decoration:none;
transition:background .15s ease, transform .15s ease;
}
.soeb-article__tag:hover{background:#2E1059;color:#fff;transform:translateY(-1px)}
.soeb-article__tag--soft{
background:#F1ECFA;
color:#57506B;
}
.soeb-article__tag--soft:hover{background:#e6ebe4;color:#57506B}
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
.soeb-article__layout{
grid-template-columns:1fr;
gap:0;
margin:48px auto 0;
padding:0 24px;
}
.soeb-article__sidebar{
position:static;
order:-1;
margin-bottom:36px;
max-width:var(--sa-reading-w);
}
/* v3.16.0: stack the 2-column hero on tablets — text first, image
* below. Reduce vertical gap a touch so the stacked image doesn't
* push the body content too far down the page.
* v3.17.0: shrink card padding and radius slightly on narrower
* screens so the card doesn't dominate the viewport.
* v3.17.3: also reset the desktop fixed-height image so it
* returns to natural aspect ratio when stacked.
* v3.17.5: padding scaled down to match the tighter desktop
* card. */
.soeb-article__hero-inner{
padding:24px 28px;
border-radius:24px;
}
.soeb-article__hero-inner--has-image{
grid-template-columns:1fr;
gap:32px;
}
.soeb-article__hero-inner--has-image .soeb-article__featured-img{
height:auto;
}
.soeb-article__hero-inner--has-image .soeb-article__featured-img img{
height:auto;
object-fit:initial;
}
.soeb-article__featured-img{
border-radius:20px;
margin:0 auto;
}
}
@media (max-width:900px){
.soeb-article__layout{padding:0 20px}
.soeb-article__sidebar{margin-bottom:32px}
}
@media (max-width:720px){
.soeb-article__hero{padding:24px 0 0}
/* v3.17.0: tighter card padding + smaller radius on phones. */
.soeb-article__hero-inner{
padding:28px 22px;
border-radius:20px;
}
.soeb-article__hero-inner--has-image{gap:24px}
.soeb-article__title{font-size:2rem} /* 36px — leaves headroom for long titles in the narrower mobile column */
.soeb-article__hero-inner:not(.soeb-article__hero-inner--has-image) .soeb-article__title{font-size:2.222rem} /* 40px */
.soeb-article__lead{font-size:1.056rem;line-height:1.55} /* ~19px */
.soeb-article__meta{gap:10px 14px;font-size:.78rem;padding:0}
.soeb-article__meta-dot{display:none}
.soeb-article__featured-img{
border-radius:16px;
margin:0 auto;
box-shadow:0 12px 30px rgba(27,10,56,.07);
}
.soeb-article__layout{margin:36px auto 0;padding:0 16px} /* v3.35.10: narrower side gutters → wider text column on mobile */
.soeb-article__body,
.soeb-article__body p,
.soeb-article__body ul > li,
.soeb-article__body ol > li{font-size:.889rem;line-height:1.7} /* v3.35.10: 17px → 16px */
.soeb-article__body h2{
font-size:1.556rem; /* ~28px */
margin-top:48px;
padding-left:0; /* v3.35.10: bar removed, heading sits flush-left */
}
.soeb-article__body h3{font-size:1.222rem;margin-top:32px} /* ~22px */
.soeb-article__body blockquote{padding:18px 20px}
.soeb-article__body blockquote p{font-size:1.025rem}
.soeb-article__body figure,
.soeb-article__body img{margin:28px 0}
.soeb-article__body .article-note,
.soeb-article__body .article-tip,
.soeb-article__body .article-warning{padding:16px 18px;margin:24px 0}
.soeb-article__body .soeb-faq summary{font-size:.95rem;padding:16px 18px}
.soeb-article__body .soeb-cta-card{flex-direction:column;align-items:flex-start;padding:18px 20px}
.soeb-article__body .soeb-cta-card .soeb-cta-card__btn{width:100%;text-align:center;justify-content:center}
.soeb-article__author-card{flex-direction:column;gap:12px;padding:18px 20px}
.soeb-article__author-avatar{width:48px;height:48px;font-size:.95rem}
}
/* ── Floating dark aubergine footer (v3.19.0) ─────────────────────────────────
Companion to the floating header. Wider than the header so it feels
grounded at the bottom of the page. Scoped under .site-footer--floating
to win the cascade over the legacy footer rules above. */
.site-footer--floating{
background:transparent;
color:#57506B;
font-size:.95rem;
margin:64px auto 0;
padding:0;
}
.site-footer--floating .footer-shell{
max-width:var(--w-site);
margin:0 auto;
padding:44px 32px 32px;
border-radius:0;
background:transparent;
border:0;
box-shadow:none;
}
/* Top row: brand stack on left (logo + tagline) · subscribe CTA on right */
.site-footer--floating .footer-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:48px;
}
.site-footer--floating .footer-brand{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:12px;
min-width:0;
}
.site-footer--floating .site-logo--footer .site-logo__img{
height:34px;width:auto;max-width:240px;
}
.site-footer--floating .footer-tagline{
margin:0;
color:#57506B;
font-size:.9rem;
line-height:1.55;
max-width:400px;
}
/* Footer CTA button ("Switch to Octopus" as of 1.0.1) */
.site-footer--floating .footer-subscribe-button{
display:inline-flex;
align-items:center;
gap:8px;
padding:11px 20px;
border-radius:999px;
background:var(--invert-bg);
color:#fff;
border:1px solid var(--invert-bg);
font-weight:500;
font-size:.9rem;
text-decoration:none;
line-height:1;
white-space:nowrap;
box-shadow:none;
transition:background var(--ease),transform var(--ease),box-shadow var(--ease);
}
.site-footer--floating .footer-subscribe-button:hover,
.site-footer--floating .footer-subscribe-button:focus{
background:#2E1059;
border-color:#2E1059;
color:#fff;
transform:translateY(-2px);
text-decoration:none;
}
.site-footer--floating .footer-subscribe-button:focus-visible{
outline:2px solid var(--brand-mint);outline-offset:3px;
}
.site-footer--floating .footer-subscribe-button__icon{flex-shrink:0}
/* Subtle dividers */
.site-footer--floating .footer-divider{
height:1px;
background:#dbe7de;
margin:28px 0;
border:0;
}
/* Three compact link columns */
.site-footer--floating .footer-links{
/* v1.0.0 — auto-fit rather than a fixed 1.4fr 1fr 1fr, because the columns
are now menu-driven and a site may have one, two or three of them. */
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:48px;
}
.site-footer--floating .footer-column-title{
color:var(--brand-deep);
font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
font-size:.72rem;
letter-spacing:.1em;
text-transform:uppercase;
font-weight:600;
margin:0 0 14px;
}
.site-footer--floating .footer-links ul{
list-style:none;
padding:0;
margin:0;
}
.site-footer--floating .footer-links li{
list-style:none;
margin:0 0 9px;
padding:0;
}
.site-footer--floating .footer-links li::before,
.site-footer--floating .footer-links li::marker{
content:none;
display:none;
}
.site-footer--floating .footer-links a{
display:inline-block;
color:#4F4766;
text-decoration:none;
font-size:.9rem;
line-height:1.5;
transition:color var(--ease);
}
.site-footer--floating .footer-links a:hover,
.site-footer--floating .footer-links a:focus{
color:var(--brand-deep);
text-decoration:none;
}
.site-footer--floating .footer-links a:focus-visible{
outline:2px solid #8B5CF6;outline-offset:3px;border-radius:3px;
}
/* Bottom row */
.site-footer--floating .footer-bottom{
display:flex;
justify-content:space-between;
gap:24px;
color:#A79CBD;
font-size:.82rem;
}
.site-footer--floating .footer-bottom__copyright,
.site-footer--floating .footer-bottom__statement{
color:#6A6180;
font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
font-size:.78rem;
letter-spacing:.01em;
}
/* v3.39.14 — Site-wide compliance small print. Positions Save On Energy
Bills as an information/guides publisher (not a comparison/switching
service) and carries the standing affiliate disclosure. Full-width block
above the copyright row, shown on every page. The inline link points to
/affiliate-disclosure/ (1.1.2) — keep that slug in sync with the
WordPress page. */
.site-footer--floating .footer-disclaimer{
margin:0 0 20px;
}
.site-footer--floating .footer-disclaimer__text{
margin:0;
max-width:none;
color:#6A6180;
font-size:.72rem;
line-height:1.65;
letter-spacing:.01em;
}
.site-footer--floating .footer-disclaimer__text a{
color:inherit;
text-decoration:underline;
text-underline-offset:2px;
}
.site-footer--floating .footer-disclaimer__text a:hover,
.site-footer--floating .footer-disclaimer__text a:focus{
color:#57506B;
}
/* Tablet: stack the top row (logo/tagline above the button) */
@media(max-width:1024px){
.site-footer--floating .footer-top{
flex-direction:column;
align-items:flex-start;
gap:28px;
}
.site-footer--floating .footer-tagline{max-width:none}
.site-footer--floating .footer-links{
grid-template-columns:1fr 1fr;
gap:40px 48px;
}
}
/* Mobile: smaller padding, smaller radius, single column */
@media(max-width:768px){
.site-footer--floating{
margin:56px 0 0;
padding:0;
}
.site-footer--floating .footer-shell{
padding:40px 16px 32px;
border-radius:0;
}
.site-footer--floating .footer-top,
.site-footer--floating .footer-links,
.site-footer--floating .footer-bottom{
display:grid;
grid-template-columns:1fr;
gap:24px;
}
/* v3.19.3 — Subscribe button was overflowing the narrow mobile
column at 14px/22px padding + .95rem text. Tighten it so it
sits comfortably under the tagline without dominating. */
.site-footer--floating .footer-subscribe-button{
padding:11px 16px;
font-size:.88rem;
gap:8px;
border-radius:12px;
align-self:flex-start;
justify-self:start;
}
.site-footer--floating .footer-subscribe-button__icon{
width:16px;
height:16px;
}
.site-footer--floating .footer-divider{margin:28px 0}
.site-footer--floating .footer-bottom{
gap:8px;
font-size:.85rem;
}
}
/* ============================================================
v3.35.38 — MOBILE MENU FIX (drawer + submenus)
Fixes three reported issues on the open mobile nav:
(a) Drawer floated below the header with all-round 18px radius.
It now attaches to the header bottom (top:100%) and is full
bleed with a square top edge + rounded bottom, matching the
desktop dropdown's "0 0 8px 8px" square-top aesthetic.
(b) Submenu items overflowed off the right because the desktop
block (#primary-nav .sub-menu, ~line 1466) wins on ID
specificity and forced min-width:248px + a bordered box, while
.main-nav a (~line 77) set white-space:nowrap. Submenus are now
forced static, full width, no min-width, no border box, and
labels wrap.
(c) Expanded submenus pushed the drawer below the viewport. The
drawer now has a capped height and scrolls internally.
Selectors are scoped with #primary-nav so they match the ID
specificity of the desktop block and, being later in the file,
take the cascade. Reveal logic (hover/focus display) is left
untouched so tap-to-open still works.
============================================================ */
@media(max-width:768px){
/* (a) + (c) The drawer itself */
#primary-nav.main-nav{
top:100% !important;
left:0 !important;
right:0 !important;
border:1px solid rgba(255,255,255,.08) !important;
border-top:none !important;
border-radius:0 0 14px 14px !important;
background:rgba(10,13,16,.97) !important;
box-shadow:0 16px 34px rgba(0,0,0,.5) !important;
padding:8px 16px 14px !important;
max-height:calc(100vh - 70px) !important;
max-height:calc(100dvh - 70px) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}
/* Let every nav label wrap instead of running off the right edge */
#primary-nav a,
#primary-nav .main-nav__list a,
#primary-nav .sub-menu a{
white-space:normal !important;
overflow-wrap:break-word;
word-break:break-word;
}
/* (b) Submenus: kill the desktop absolute/min-width/bordered box and
render them as a simple indented in-flow list */
#primary-nav .sub-menu{
position:static !important;
transform:none !important;
top:auto !important;
left:auto !important;
right:auto !important;
min-width:0 !important;
width:auto !important;
max-width:100% !important;
background:transparent !important;
border:none !important;
border-left:2px solid rgba(201,168,255,.3) !important; /* 1.2.0 — lilac, matches the desktop nested-menu rule (was an old green) */
border-radius:0 !important;
box-shadow:none !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
margin:2px 0 6px 6px !important;
padding:2px 0 2px 10px !important;
}
#primary-nav .sub-menu li{
width:100% !important;
}
#primary-nav .sub-menu a{
padding:10px 10px !important;
font-size:.95rem !important;
line-height:1.35 !important;
}
}
/* ============================================================
Site chrome typography (v3.35.41)
Header + footer use the Schibsted Grotesk display face, which is
now also the sitewide body face (font-family:var(--font)), so the
chrome and the rest of the site share one consistent type system.
============================================================ */
.site-header,
.site-header *,
.site-footer,
.site-footer *{
font-family:'Schibsted Grotesk',-apple-system,'Helvetica Neue',Arial,sans-serif;
}
/* ============================================================================
* v3.35.71 — Mobile fixes.
* (a) Move "Build my plan" out of the header (where it overlapped the logo)
* and show it as the first item inside the slide-out menu.
* (b) Hub hero CTAs: full-width + centred labels on phones, matching the
* homepage (the plain width rule was being dropped by Remove-Unused-CSS,
* so this is forced with !important). */
/* Desktop: the in-menu CTA is hidden; Build my plan stays in the header. */
.main-nav a.main-nav__cta{display:none}
@media(max-width:768px){
/* Pull the primary CTA out of the header bar to stop the logo overlap. */
.header-cta--primary{display:none !important}
/* Show it at the top of the menu panel, styled to match (pink pill). */
.main-nav a.main-nav__cta{
display:flex !important;
align-items:center;
justify-content:center;
gap:10px;
margin:10px 0 0 !important;
padding:13px 18px !important;
border-radius:999px !important;
background:#DE5CF1 !important;
color:#1B0A38 !important;
font-family:'Schibsted Grotesk',-apple-system,'Helvetica Neue',Arial,sans-serif;
font-weight:600;
font-size:1rem;
line-height:1;
text-decoration:none;
}
.main-nav a.main-nav__cta:hover,
.main-nav a.main-nav__cta:focus{
background:#C846DC !important;
color:#1B0A38 !important;
text-decoration:none;
}
}
/* ============================================================================
* v3.35.72 — Category archives + blog index: deep aubergine hero to match the
* homepage / hubs. Scoped to body.category-archive and body.blog only, so the
* shared .page-hero on legal/default pages keeps its white treatment.
* H1 text + icon meta are set in category.php / index.php. !important is used
* so the overrides survive LiteSpeed's Remove-Unused-CSS pass. */
/* Surface — full-bleed deep aubergine, homepage padding. */
body.category-archive .page-hero,
body.blog .page-hero{
background:var(--invert-bg) !important;
color:#F7F4FC !important;
padding:96px 0 76px !important;
}
/* Content column — left-aligned, unconstrained for the big title. */
body.category-archive .page-hero__content,
body.blog .page-hero__content{
max-width:none !important;
text-align:left !important;
}
/* Eyebrow — drop the charcoal pill; use the homepage's mono eyebrow. */
body.category-archive .page-hero__kicker,
body.blog .page-hero__kicker{
display:inline-block !important;
background:none !important;
padding:0 !important;
border-radius:0 !important;
color:#C0AEDD !important;
font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Monaco,Consolas,monospace !important;
font-size:13px !important;
font-weight:400 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
margin-bottom:30px !important;
}
/* H1 — cream, homepage clamp + weight + tracking. */
body.category-archive .page-hero__title,
body.blog .page-hero__title{
font-family:'Schibsted Grotesk',-apple-system,'Helvetica Neue',Arial,sans-serif !important;
font-weight:800 !important;
font-size:clamp(2.6rem,6.2vw,5.3rem) !important;
line-height:1.04 !important;
letter-spacing:-.02em !important;
color:#F7F4FC !important;
margin:0 !important;
}
/* Meta — hub style: lilac icons, light text, sits below the title. */
body.category-archive .page-hero__meta,
body.blog .page-hero__meta{
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
gap:22px !important;
margin-top:34px !important;
font-size:.95rem !important;
}
body.category-archive .page-hero__meta-item,
body.blog .page-hero__meta-item{
display:inline-flex !important;
align-items:center !important;
gap:9px !important;
color:rgba(255,255,255,.82) !important;
font-weight:500 !important;
}
body.category-archive .page-hero__meta-icon,
body.blog .page-hero__meta-icon{
color:var(--brand-mint-soft) !important;
flex-shrink:0 !important;
}
/* Breadcrumbs — light on the dark surface. */
body.category-archive .page-hero__breadcrumbs,
body.blog .page-hero__breadcrumbs{
color:rgba(255,255,255,.72) !important;
margin-top:30px !important;
}
body.category-archive .page-hero__breadcrumbs a,
body.blog .page-hero__breadcrumbs a{color:rgba(255,255,255,.72) !important}
body.category-archive .page-hero__breadcrumbs a:hover,
body.blog .page-hero__breadcrumbs a:hover{color:#F7F4FC !important;text-decoration:none !important}
body.category-archive .page-hero__breadcrumbs .sep,
body.blog .page-hero__breadcrumbs .sep{color:rgba(255,255,255,.4) !important}
body.category-archive .page-hero__breadcrumbs-current,
body.blog .page-hero__breadcrumbs-current{color:#F7F4FC !important}
@media(max-width:720px){
body.category-archive .page-hero,
body.blog .page-hero{padding:72px 0 60px !important}
}
/* ============================================================================
* v3.35.75 — Image-led article cards (hub-article-card) brought on-brand:
* • green-tinted thumbnail wash (tames off-palette photos, e.g. the orange
* Ofgem thumb, without flattening the good photography)
* • plain muted mono eyebrow — the glass pill is dropped so the card label
* matches every hero eyebrow (#C0AEDD, IBM Plex Mono), with a text-shadow
* for legibility over imagery
* • lilac read-more link
* Octopus cards keep their own styling: .hub-article-card--octopus is excluded
* here, and the Octopus tariff cards use the separate .octo-card component.
* !important so the treatment survives LiteSpeed's Remove-Unused-CSS pass. */
/* Thumbnail — gentle full-card green cast + green bottom gradient. */
.hub-article-grid .hub-article-card:not(.hub-article-card--octopus) .hub-article-card__scrim{
background:
linear-gradient(180deg, rgba(27,10,56,0) 24%, rgba(19,6,40,.55) 60%, rgba(20,7,42,.92) 100%),
linear-gradient(rgba(27,10,56,.30), rgba(27,10,56,.30)) !important;
}
.hub-article-grid .hub-article-card:not(.hub-article-card--octopus) .hub-article-card__media img{
filter:saturate(.9) !important;
}
.hub-article-grid .hub-article-card--noimg:not(.hub-article-card--octopus) .hub-article-card__media{
background:linear-gradient(150deg,#2E1059 0%,var(--invert-bg) 60%,#140430 100%) !important;
}
/* Eyebrow — drop the glass pill; plain muted mono text like the hero eyebrows. */
.hub-article-grid .hub-article-card:not(.hub-article-card--octopus) .hub-article-card__label{
background:none !important;
border:0 !important;
border-radius:0 !important;
padding:0 !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
color:#C0AEDD !important;
font-weight:400 !important;
font-size:13px !important;
letter-spacing:.16em !important;
text-shadow:0 1px 10px rgba(8,14,10,.75) !important;
}
/* Read-more link — lilac accent. */
.hub-article-grid .hub-article-card:not(.hub-article-card--octopus) .hub-article-card__link{
color:#DCC6FF !important;
}
/* ============================================================================
* v3.35.76 — Article card refinements:
* • Add a top scrim so the muted mono label (#C0AEDD) has a consistent dark
* backdrop on any photo — fixes it washing out over bright skies, without
* changing the label colour (stays matched to the hero eyebrows).
* • Featured/wide cards get their own lighter, lower gradient — the standard
* card gradient over-darkened them because they're much shorter, so the
* tint climbed too high up the image.
* Octopus cards remain excluded. !important to survive Remove-Unused-CSS. */
/* Standard cards — top scrim + existing bottom scrim + flat green wash. */
.hub-article-grid .hub-article-card:not(.hub-article-card--octopus) .hub-article-card__scrim{
background:
linear-gradient(180deg, rgba(9,18,13,.62) 0%, rgba(14,4,30,0) 30%),
linear-gradient(180deg, rgba(27,10,56,0) 24%, rgba(19,6,40,.55) 60%, rgba(20,7,42,.92) 100%),
linear-gradient(rgba(27,10,56,.30), rgba(27,10,56,.30)) !important;
}
/* Featured/wide cards — thinner top scrim, bottom gradient starts lower,
* lighter overall wash so the middle of the big image stays clear. */
.hub-article-grid .hub-article-card--featured:not(.hub-article-card--octopus) .hub-article-card__scrim{
background:
linear-gradient(180deg, rgba(14,4,30,.5) 0%, rgba(14,4,30,0) 22%),
linear-gradient(180deg, rgba(27,10,56,0) 46%, rgba(18,6,38,.84) 100%),
linear-gradient(rgba(27,10,56,.16), rgba(27,10,56,.16)) !important;
}