/* ============================================================================ OCTOPUS ENERGY HUB — DESIGN SYSTEM LAYER v1.0.0 ---------------------------------------------------------------------------- The "quiet ground, loud numbers" editorial system, recoloured onto an aubergine + lilac palette. Loaded AFTER style.css (see soeb_scripts) so it wins the cascade at equal specificity without !important. Contents 1. Tokens (--soeb-*) — global; the tariff plugins consume these 2. Primitives — .soeb-btn / labels / numerics / ledger 3. Editorial components — callouts, index, toolrow 3B. Page hero (.soeb-phero) — the shared non-homepage hero + .soeb-panel 3C. Section nav (.soeb-jump) — curated jump links under the hero 4. Shared hero type scale — typography for the hub hero in §9 5. Editorial article system — .soeb-art, centred geometry 6. (removed in 1.0.1 — was the sticky referral bar) 7. Site footer — switch CTA panel over the dark terminal 8. Site header — CTA pair on-system 9. Hub hero (.soeb-hero) — the shared section/guides-index hero 9b. Author archive — profile hero + guide index 9c. Hub hero, split variant — optional image column v1.0.0 removed: the homepage surfaces (.soeb-hp), the Personalised Energy Plan reskin (.soeb-energy-plan) and the "Print my plan" print styles, along with the templates and wizard that used them. The inline "v4.x" notes below are retained on purpose: they record WHY a value is what it is (which alternatives were tried and rejected), which is the part that is expensive to rediscover. They refer to releases of the theme this one derives from, not to this changelog. NAMING: --soeb-* / .soeb-* are kept deliberately. The tariff plugins, the registered block patterns and editorial markup inside published content all reference them. Rules of engagement: - No !important. No overrides of plugin-internal UI. - All foreground/background pairs in the palette clear WCAG AA. ============================================================================ */ /* ── 1. TOKENS ─────────────────────────────────────────────────────────── */ :root{ /* AUBERGINE + LILAC. Inspired by Octopus Energy's deep purple and magenta, deliberately NOT a copy of it: the purples are darker and less saturated, the working accent is a lilac rather than their signature pink, and the pink that does appear (--soeb-accent) is reserved for small details. The site must read as an independent publication about Octopus. TOKEN NAMES ARE HISTORICAL — "aubergine", "pine", "lilac" are the names from the green system these values replaced (Save on Energy Bills). They are referenced by the tariff plugins and by hundreds of rules, so they were re-pointed rather than renamed. Read them as: aubergine = darkest ground, pine = primary on light, lilac = the on-dark/light-band accent. */ --soeb-forest:#1B0A38; /* darkest aubergine ground */ --soeb-forest-2:#26124C; /* hover step on the dark ground */ --soeb-pine:#4B1F8C; /* plum — primary buttons, links */ --soeb-green:#5E2BA8; /* accent — eyebrows, section numbers */ --soeb-mint:#C9A8FF; /* lilac — on-dark CTA + statement band */ --soeb-mint-deep:#B48DF5; /* lilac hover step */ --soeb-mint-tint:#F0E8FF; /* pale lilac wash */ --soeb-cta:#DE5CF1; /* Octopus pink — CTA button fill (1.0.1) */ --soeb-cta-deep:#C846DC; /* pink hover step */ --soeb-lilac-soft:#F4EEFF; /* footer CTA panel + page hero ground */ --soeb-panel-bg:#FCFAFF; /* hero "At a glance" card — lilac-white */ --soeb-panel-line:#E8DFF8; /* soft lilac hairline on that card */ --soeb-ink:#1F1733; --soeb-ink-soft:#57506B; --soeb-mist:#CFC2E8; /* light text on the dark ground */ --soeb-paper:#FFFFFF; --soeb-ground:#F7F4FC; /* article masthead / tinted surfaces */ --soeb-line:#E3DCF0; --soeb-line-dark:rgba(255,255,255,.12); --soeb-accent:#C2187A; /* magenta — small accents only */ --soeb-accent-deep:#A31164; --soeb-neg:#B4452F; --soeb-neg-tint:#F9ECE8; /* The caution ramp is deliberately left amber: warning colour has to stay recognisably warning-coloured, whatever the brand palette is. */ --soeb-warn:#8A5A00; --soeb-warn-tint:#FBF3DE; --soeb-numeral:#8E7FA8; /* oversized editorial numerals */ --soeb-font:'Schibsted Grotesk',-apple-system,'Helvetica Neue',Arial,sans-serif; --soeb-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --soeb-space-1:4px;--soeb-space-2:8px;--soeb-space-3:12px;--soeb-space-4:16px; --soeb-space-5:24px;--soeb-space-6:32px;--soeb-space-7:48px;--soeb-space-8:64px;--soeb-space-9:96px; --soeb-w-site:1320px;--soeb-w-standard:1040px;--soeb-w-narrow:760px;--soeb-w-article:1148px; /* Editorial geometry (v4.2.0) — every tier shares ONE centre axis. Change a value here and the whole article re-centres; nothing else needs touching. The rail is positioned FROM this axis, not from a grid track, so it can never displace the reading column. */ --soeb-w-read:720px; /* paragraphs, headings, lists, callouts */ --soeb-w-wide:1000px; /* diagrams, stat layouts, medium tables */ --soeb-w-full:1260px; /* large comparison tables */ --soeb-rail-w:190px; /* --soeb-rail-gap retired in v4.11.8 */ --soeb-art-pad:32px; /* v4.12.7 — the overlap is a FIXED 60px band again (midpoint of the requested 50–70px), replacing the v4.12.1 share-of-image-height calc. v4.12.1's reasoning was that a fixed value drifts up and down the picture as the container resizes. That was the right call at a ~334px overlap, where the boundary was landing in the middle of the composition and a 40px drift visibly moved it across the subject. It stops mattering at 60px: the boundary is now a thin strip behind the image's top edge, read as an edge treatment rather than as a point on the picture, and there is no composition underneath it for the drift to disturb. Because it is fixed, the old --soeb-art-feat-h token and the ≤640px share override are both gone — they existed only to feed this calc. Removed rather than left in place, so nothing here reads as live geometry that isn't. */ --soeb-art-overlap:60px; /* Half the distance each tier travels beyond the reading column. Clamped to the room actually available so nothing can overflow the viewport. */ --soeb-bleed-wide:max(0px, min(calc((var(--soeb-w-wide) - var(--soeb-w-read)) / 2), calc((100vw - var(--soeb-w-read)) / 2 - var(--soeb-art-pad)))); --soeb-bleed-full:max(0px, min(calc((var(--soeb-w-full) - var(--soeb-w-read)) / 2), calc((100vw - var(--soeb-w-read)) / 2 - var(--soeb-art-pad)))); --soeb-radius-pill:999px;--soeb-radius-card:16px;--soeb-radius-control:12px; --soeb-bw:1.5px; --soeb-shadow-float:0 8px 24px rgba(18,33,26,.12); } /* Upright guard — UI typography is never italic. Semantic / inside article prose keeps its meaning. */ body,button,input,select,textarea, .site-header,.site-footer,.main-nav,.header-cta, .soeb-art__head,.soeb-btn,.soeb-label,.soeb-eyebrow,.soeb-num, h1,h2,h3,h4,h5,h6{font-style:normal} /* ── 2. PRIMITIVES ─────────────────────────────────────────────────────── */ .soeb-label{font-family:var(--soeb-mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase} .soeb-eyebrow{font-family:var(--soeb-mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--soeb-green)} .soeb-on-dark .soeb-eyebrow{color:var(--soeb-mint)} .soeb-num{font-variant-numeric:tabular-nums lining-nums;font-weight:700;letter-spacing:-.02em;line-height:1} .soeb-stat-hero{font-size:clamp(3.4rem,6vw,5.4rem);letter-spacing:-.03em} .soeb-stat-xl{font-size:3.2rem} .soeb-stat-lg{font-size:2.2rem} .soeb-stat-md{font-size:1.5rem} .soeb-unit{font-size:.4em;font-weight:500;color:var(--soeb-ink-soft);letter-spacing:0;margin-left:3px} .soeb-unit--word{margin-left:.35em} .soeb-stat-hero .soeb-unit{font-size:.32em} .soeb-on-dark .soeb-unit{color:var(--soeb-mist)} .soeb-delta{display:inline-flex;align-items:center;gap:4px;font-family:var(--soeb-mono);font-size:.72rem;font-weight:500;padding:4px 11px;border-radius:var(--soeb-radius-pill)} .soeb-delta--up{background:var(--soeb-neg-tint);color:var(--soeb-neg)} /* price up = costs more */ .soeb-delta--down{background:var(--soeb-mint-tint);color:var(--soeb-pine)} .soeb-delta--flat{background:var(--soeb-ground);color:var(--soeb-ink-soft)} /* Flat statistic ledger — dividers, never cards */ .soeb-ledger{display:flex} .soeb-ledger>div{flex:1;padding:0 var(--soeb-space-5)} .soeb-ledger>div+div{border-left:1px solid var(--soeb-line)} .soeb-ledger>div:first-child{padding-left:0} .soeb-on-dark .soeb-ledger>div+div{border-left-color:var(--soeb-line-dark)} .soeb-stat-label{font-family:var(--soeb-mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--soeb-ink-soft);display:block;margin-bottom:8px} .soeb-on-dark .soeb-stat-label{color:var(--soeb-mist)} @media(max-width:640px){ .soeb-ledger{flex-wrap:wrap;row-gap:var(--soeb-space-5)} .soeb-ledger>div{flex:1 1 45%;padding:0} .soeb-ledger>div+div{border-left:0} } /* Buttons — the ONLY button system for migrated surfaces */ .soeb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:15px 30px;border-radius:var(--soeb-radius-pill);border:var(--soeb-bw) solid transparent; font-family:var(--soeb-font);font-size:.97rem;font-weight:600;text-decoration:none;line-height:1;letter-spacing:.005em;cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .06s ease} .soeb-btn:active{transform:translateY(1px)} .soeb-btn .soeb-btn-arrow{display:inline-block;transition:transform .18s ease} .soeb-btn:hover .soeb-btn-arrow{transform:translateX(3px)} .soeb-btn--primary{background:var(--soeb-pine);color:#fff} .soeb-btn--primary:hover{background:var(--soeb-forest);color:#fff;text-decoration:none} .soeb-on-dark .soeb-btn--primary{background:var(--soeb-cta);color:var(--soeb-forest)} .soeb-on-dark .soeb-btn--primary:hover{background:var(--soeb-cta-deep);color:var(--soeb-forest)} .soeb-btn--secondary{background:transparent;color:var(--soeb-pine);border-color:currentColor} .soeb-btn--secondary:hover{background:var(--soeb-mint-tint);color:var(--soeb-pine);text-decoration:none} .soeb-on-dark .soeb-btn--secondary{color:#fff} .soeb-on-dark .soeb-btn--secondary:hover{background:rgba(255,255,255,.08);color:#fff} .soeb-btn--lg{padding:18px 36px;font-size:1.02rem} /* Statement CTA (v4.5.5) — the footer "Before you go" band button expressed as a modifier, so a surface whose single call to action is the Planner reads the same wherever it appears. Tighter and heavier than --lg, background-only transition, no press-down, and a fixed stroked SVG arrow (put the SVG in the markup; do NOT pair with .soeb-btn-arrow). Declared after --lg so it wins if both are applied. */ .soeb-btn--cta{gap:10px;padding:16px 28px;font-size:1rem;font-weight:650; transition:background .16s ease,color .16s ease} .soeb-btn--cta:active{transform:none} .soeb-btn--cta svg{flex:none} /* On the aubergine hero the band's dark-pill-on-mint inverts to mint-on-dark — forest-on-forest would vanish. Hover deepens the lilac by the same small step the band takes from --soeb-forest to --soeb-forest-2, instead of the base primary's larger jump out to --soeb-mint-tint. */ .soeb-on-dark .soeb-btn--cta.soeb-btn--primary:hover{background:var(--soeb-cta-deep);color:var(--soeb-forest)} .soeb-btn[disabled],.soeb-btn.is-disabled{opacity:.45;pointer-events:none;transform:none} .soeb-btn:focus-visible{outline:2px solid var(--soeb-green);outline-offset:3px} .soeb-on-dark .soeb-btn:focus-visible{outline-color:var(--soeb-mint)} .soeb-arrow-link{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;color:var(--soeb-pine)} .soeb-arrow-link::after{content:'→';transition:transform .15s ease} .soeb-arrow-link:hover::after{transform:translateX(3px)} .soeb-arrow-link:hover{color:var(--soeb-forest);text-decoration:none} .soeb-on-dark .soeb-arrow-link{color:var(--soeb-mint)} .soeb-on-dark .soeb-arrow-link:hover{color:var(--soeb-mint-tint)} /* ── 3. EDITORIAL COMPONENTS ───────────────────────────────────────────── */ /* Callouts — rules not boxes; fill means caution only. Available to editors via Custom HTML blocks; documented in the change log. */ .soeb-callout{font-size:1.02rem;line-height:1.6;margin:var(--soeb-space-6) 0} .soeb-callout .soeb-label{display:block;margin-bottom:10px} .soeb-callout--key{border-top:2px solid var(--soeb-pine);padding-top:16px;font-size:1.08rem;line-height:1.55} .soeb-callout--key .soeb-label{color:var(--soeb-pine)} .soeb-callout--warn{background:var(--soeb-warn-tint);border-radius:var(--soeb-radius-control);padding:20px 24px;color:#4a3a10;font-size:.97rem} .soeb-callout--warn .soeb-label{color:var(--soeb-warn);margin-bottom:6px} .soeb-callout--update{border-top:1px solid var(--soeb-line);border-bottom:1px solid var(--soeb-line);padding:16px 0} .soeb-callout--update .soeb-label{color:var(--soeb-ink-soft);margin-bottom:6px} .soeb-callout--update .soeb-label b{color:var(--soeb-ink);font-weight:600} /* In-article statistic block */ .soeb-statblock{margin:var(--soeb-space-7) 0;padding:var(--soeb-space-5) 0;border-top:2px solid var(--soeb-ink);border-bottom:1px solid var(--soeb-line)} .soeb-statblock>.soeb-label{color:var(--soeb-ink-soft);display:block;margin-bottom:18px} /* Oversized numbered editorial index --------------------------------------------------------------------------- v4.5.10 — rebuilt on ONE shared grid. `.soeb-index` owns the single column definition (--soeb-index-cols); every row spans it as a subgrid, so the four boundaries (number / heading / description / CTA) are identical on every row and cannot be moved by the content of any one row. Browsers without subgrid fall back to the same track list applied per row — one source of truth, and identical boundaries either way, because each row spans the container's full content box and every track is either fixed or a zero-min fr. Vertical alignment: heading, description and CTA share ONE first baseline (align-items:baseline), rather than each being centred in its own cell. The number is start-aligned to the top of that content block. --soeb-index-num-nudge is the single optical knob that matches the numeral's cap-height to the heading's cap-height; adjust in 1px steps only. Track widths, row padding and numeral size are all component-level custom properties so the rhythm can be tuned in one place per breakpoint. */ .soeb-index{ --soeb-index-num-col:104px; --soeb-index-cta-col:180px; --soeb-index-gap:var(--soeb-space-6); --soeb-index-pad-y:28px; --soeb-index-num-size:3rem; --soeb-index-num-nudge:-2px; --soeb-index-cols:var(--soeb-index-num-col) minmax(0,1fr) minmax(0,1.25fr) var(--soeb-index-cta-col); display:grid;grid-template-columns:var(--soeb-index-cols);column-gap:var(--soeb-index-gap); border-top:1px solid var(--soeb-line)} .soeb-index__row{display:grid;grid-column:1/-1;grid-template-columns:var(--soeb-index-cols); column-gap:var(--soeb-index-gap);align-items:baseline; padding:var(--soeb-index-pad-y) 0;border-bottom:1px solid var(--soeb-line);text-decoration:none;color:var(--soeb-ink)} @supports(grid-template-columns:subgrid){ .soeb-index__row{grid-template-columns:subgrid} } .soeb-index__row:hover{color:var(--soeb-ink);text-decoration:none} .soeb-index__num{grid-column:1;align-self:start;margin-top:var(--soeb-index-num-nudge); font-size:var(--soeb-index-num-size);font-weight:400;line-height:1;letter-spacing:-.02em; color:var(--soeb-numeral);font-variant-numeric:tabular-nums;transition:color .18s ease} .soeb-index__row:hover .soeb-index__num{color:var(--soeb-pine)} .soeb-index__title{grid-column:2;font-size:1.45rem;font-weight:700;letter-spacing:-.015em;line-height:1.15} .soeb-index__desc{grid-column:3;font-size:.97rem;color:var(--soeb-ink-soft);line-height:1.55} .soeb-index__row .soeb-arrow-link{grid-column:4;justify-self:end;text-align:right;white-space:nowrap} @media(max-width:1024px){ .soeb-index{--soeb-index-num-col:88px;--soeb-index-cta-col:160px;--soeb-index-num-size:2.6rem; --soeb-index-cols:var(--soeb-index-num-col) minmax(0,1fr) var(--soeb-index-cta-col)} .soeb-index__row{row-gap:10px} .soeb-index__num{grid-column:1;grid-row:1} .soeb-index__title{grid-column:2;grid-row:1} .soeb-index__desc{grid-column:2;grid-row:2} .soeb-index__row .soeb-arrow-link{grid-column:3;grid-row:1} } @media(max-width:640px){ .soeb-index{--soeb-index-num-col:56px;--soeb-index-gap:var(--soeb-space-4); --soeb-index-pad-y:var(--soeb-space-5);--soeb-index-num-size:2rem;--soeb-index-num-nudge:-1px; --soeb-index-cols:var(--soeb-index-num-col) minmax(0,1fr)} .soeb-index__row{row-gap:8px} .soeb-index__title{grid-column:2;grid-row:1;font-size:1.2rem} .soeb-index__desc{grid-column:2;grid-row:2} .soeb-index__row .soeb-arrow-link{grid-column:2;grid-row:3;justify-self:start;text-align:left} } /* De-carded tool discovery rows */ .soeb-toolrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--soeb-space-5);padding:var(--soeb-space-5) 0;border-bottom:1px solid var(--soeb-line);text-decoration:none;color:var(--soeb-ink)} .soeb-toolrow:first-of-type{padding-top:0} .soeb-toolrow:hover{text-decoration:none;color:var(--soeb-ink)} .soeb-toolrow .soeb-label{color:var(--soeb-green)} .soeb-toolrow h3{font-size:1.12rem;margin:4px 0 0;font-weight:600} .soeb-toolrow p{grid-column:1;font-size:.92rem;color:var(--soeb-ink-soft);line-height:1.5;margin:0} .soeb-toolrow .soeb-arrow-link{grid-column:2;grid-row:1 / span 3;align-self:center;font-size:.92rem;white-space:nowrap} .soeb-toolrow:hover h3{color:var(--soeb-pine)} @media(max-width:640px){.soeb-toolrow{grid-template-columns:1fr}.soeb-toolrow .soeb-arrow-link{grid-column:1;grid-row:auto;margin-top:6px}} /* ── 3B. PAGE HERO (.soeb-phero / .soeb-panel) ──────────────────────────── The shared hero for every page and post except the homepage (1.1.0). Full-bleed pale lilac ground — the same --soeb-lilac-soft as the switch CTA above the footer, so the two ends of the page belong to each other — with the content held to the normal .soeb-art__container measure. Markup: template-parts/page-hero.php. */ /* Trail sits on white ABOVE the lilac, so the band starts at the headline. */ .soeb-phero__crumbs{background:var(--soeb-paper);padding:16px 0 14px;font-size:.88rem;color:var(--soeb-ink-soft)} .soeb-phero__crumbs a{color:var(--soeb-ink-soft);text-decoration:none} .soeb-phero__crumbs a:hover{color:var(--soeb-pine);text-decoration:underline} .soeb-phero__crumbs .sep{margin:0 8px;color:var(--soeb-numeral)} .soeb-phero__crumbs-current{color:var(--soeb-forest);font-weight:600} /* 1.1.1 — was 52/60. Less air above the eyebrow, considerably less below the meta line, so the nav bar reads as the foot of the hero rather than as the next thing down the page. */ .soeb-phero{background:var(--soeb-lilac-soft);padding:42px 0 30px} .soeb-phero__inner{display:grid;gap:40px;align-items:center} /* Two columns only when there is an At a glance panel to put in the second one. Without it the copy keeps its own measure rather than stretching to fill a column that is no longer there. */ @media(min-width:1024px){ .soeb-phero--split .soeb-phero__inner{grid-template-columns:minmax(0,1fr) minmax(380px,460px)} } .soeb-phero__copy{min-width:0;max-width:46rem} .soeb-phero__eyebrow-row{display:flex;flex-wrap:wrap;gap:8px;margin:0} .soeb-phero__eyebrow{ display:inline-block;padding:9px 18px;border-radius:var(--soeb-radius-pill); background:var(--soeb-paper);border:1px solid var(--soeb-line); font-family:var(--soeb-mono);font-size:.72rem;font-weight:600;line-height:1; letter-spacing:.12em;text-transform:uppercase;color:var(--soeb-pine);text-decoration:none; transition:border-color .16s ease,color .16s ease; } a.soeb-phero__eyebrow:hover{border-color:var(--soeb-mint);color:var(--soeb-green)} .soeb-phero__eyebrow--context{background:transparent;border-style:dashed;color:var(--soeb-ink-soft)} /* text-wrap:balance evens the lines out and keeps a long tariff name off a line of its own; browsers without it just wrap normally. */ .soeb-phero__title{ /* 1.1.1 — the ramp topped out at 3.25rem, which pushed a 50-character tariff headline onto three lines with a stranded phrase on the last. 2.9rem on a 28ch measure balances the same headline onto two. */ margin:20px 0 0;max-width:28ch;color:var(--soeb-forest); font-family:var(--soeb-font);font-size:clamp(1.95rem,1.05rem + 2.5vw,2.9rem); line-height:1.1;letter-spacing:-.028em;font-weight:700;text-wrap:balance; } .soeb-phero__lead{margin:20px 0 0;max-width:54ch;font-size:1.1rem;line-height:1.62;color:var(--soeb-ink-soft)} /* Hero CTA (1.1.5) — the button that can sit under the hero intro, currently used by the switching guide only (see template-parts/page-hero.php). Geometry and type match the button closing the page, .soeb-foot__cta-btn in §7: pill radius, white 650-weight label on the site font, the same 18/30 padding, shadow and arrow nudge. Those rules are scoped under .soeb-foot, so the declarations are restated here rather than shared — keep the two in step if either is retuned. 1.1.6 — the COLOURS are deliberately the inverse of the footer button. The hero button rests on plum and darkens to aubergine on hover; the footer button rests on aubergine and lightens to plum. The label stays white throughout, so both states clear AA against their ground. */ .soeb-phero__cta-row{margin:26px 0 0} .soeb-phero__cta{ display:inline-flex;align-items:center;justify-content:center;gap:12px; padding:18px 30px;border-radius:var(--soeb-radius-pill); background:var(--soeb-pine);color:#fff; font-family:var(--soeb-font);font-size:1rem;font-weight:650;line-height:1;letter-spacing:.005em; white-space:nowrap;text-decoration:none; box-shadow:0 10px 24px -10px rgba(27,10,56,.6); transition:background .16s ease,box-shadow .16s ease; } .soeb-phero__cta:hover, .soeb-phero__cta:focus{background:var(--soeb-forest);color:#fff;text-decoration:none} .soeb-phero__cta:focus-visible{outline:2px solid var(--soeb-forest);outline-offset:3px} .soeb-phero__cta-arrow{flex:none;transition:transform .18s ease} .soeb-phero__cta:hover .soeb-phero__cta-arrow{transform:translateX(3px)} /* With the accent rule stood down, the meta line would sit on its own 18px against the button. This only matches when the rule is genuinely absent — i.e. on a hero with a CTA. */ .soeb-phero__cta-row + .soeb-phero__meta{margin-top:24px} /* Phones: full-width, exactly as the footer button behaves at this width. */ @media(max-width:560px){ .soeb-phero__cta{display:flex;width:100%;padding:17px 24px;white-space:normal} } @media(prefers-reduced-motion:reduce){ .soeb-phero__cta,.soeb-phero__cta-arrow{transition:none} } .soeb-phero__rule{display:block;width:58px;height:3px;margin:26px 0 0;border-radius:2px;background:var(--soeb-pine)} .soeb-phero__meta{margin:18px 0 0;font-family:var(--soeb-mono);font-size:.82rem;color:var(--soeb-ink-soft)} .soeb-phero__meta b{color:var(--soeb-forest);font-weight:600} /* The editorial byline (avatar + author + read time) reuses its own classes inside this meta slot; keep it on the hero's baseline. */ .soeb-phero__meta .soeb-art__metaline{margin:0} /* At a glance panel — one fact per row, optional note + link. NB the class is .soeb-panel, not .soeb-glance: that name already belongs to the in-article "at a glance" block pattern below, whose 2px dark top rule was landing on this card and reading as a hard outline. */ .soeb-panel{ background:var(--soeb-panel-bg); border:1px solid var(--soeb-panel-line); border-radius:26px; padding:30px 30px 28px; /* Soft, not outlined: a lilac hairline plus a low plum shadow, enough to lift the card off the band without drawing a box around it. */ box-shadow:0 1px 2px rgba(27,10,56,.04),0 18px 32px -20px rgba(75,31,140,.26); } .soeb-panel__title{ margin:0;font-family:var(--soeb-mono);font-size:.72rem;font-weight:500;line-height:1.4; letter-spacing:.09em;text-transform:uppercase;color:var(--soeb-ink-soft); } .soeb-panel__facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:20px} .soeb-panel__title + .soeb-panel__facts{margin-top:24px} .soeb-panel__fact{display:flex;align-items:center;gap:16px} .soeb-panel__badge{ flex:none;display:inline-flex;align-items:center;justify-content:center; /* Reads against the card's own tint, not against white. */ width:48px;height:48px;border-radius:50%;background:#EDE3FE;color:var(--soeb-pine); } .soeb-panel__badge--quiet{width:42px;height:42px;background:#F2EDFA;color:var(--soeb-ink-soft)} .soeb-panel__text{min-width:0} .soeb-panel__value{display:block;font-size:1.2rem;font-weight:700;line-height:1.25;color:var(--soeb-forest);letter-spacing:-.01em} .soeb-panel__label{display:block;margin-top:3px;font-size:.95rem;line-height:1.45;color:var(--soeb-ink-soft)} .soeb-panel__divider{border:0;border-top:1px solid var(--soeb-panel-line);margin:24px 0 0} .soeb-panel__foot{display:flex;align-items:flex-start;gap:16px;margin-top:20px} .soeb-panel__foot-text{min-width:0} .soeb-panel__note{display:block;margin-bottom:6px;font-size:.95rem;line-height:1.5;color:var(--soeb-ink)} /* Inline, not flex: the label can run to two lines with the arrow staying at the end of the last one rather than floating off to the right. */ .soeb-panel__link{ display:inline;margin-top:6px; font-size:.95rem;font-weight:600;line-height:1.5;color:var(--soeb-pine);text-decoration:none; } .soeb-panel__link:hover{text-decoration:underline} .soeb-panel__link svg{display:inline-block;vertical-align:-3px;margin-left:6px;transition:transform .18s ease} .soeb-panel__link:hover svg{transform:translateX(3px)} /* Mobile: one column, panel under the copy, nothing shrunk into a thin column. Padding stays generous; only the type scale steps down. */ @media(max-width:1023px){ .soeb-phero{padding:30px 0 24px} .soeb-phero__inner{gap:28px} .soeb-phero__copy{max-width:none} .soeb-panel{padding:24px 22px} .soeb-panel__facts{gap:18px} .soeb-panel__badge{width:44px;height:44px} .soeb-panel__value{font-size:1.12rem} } @media(max-width:480px){ .soeb-phero__lead{font-size:1.02rem} .soeb-phero__rule{margin-top:24px} } /* ── 3C. SECTION NAV (.soeb-jump) ────────────────────────────────────────── Curated jump links under the hero. Plain anchors; the highlight in main.js is decoration. Markup: template-parts/section-nav.php. */ .soeb-jump{background:var(--soeb-paper);border-bottom:1px solid var(--soeb-line)} .soeb-jump__inner{display:flex;align-items:center;gap:24px;padding:9px 0} .soeb-jump__head{display:flex;align-items:center;gap:12px;flex:none} .soeb-jump__label{font-weight:700;font-size:1rem;color:var(--soeb-forest);white-space:nowrap} .soeb-jump__list{ flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:4px; list-style:none;margin:0;padding:0; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; } .soeb-jump__list::-webkit-scrollbar{display:none} .soeb-jump__link{ display:inline-block;padding:8px 14px;border-radius:var(--soeb-radius-pill); font-size:.97rem;line-height:1;color:var(--soeb-ink-soft);text-decoration:none;white-space:nowrap; transition:background .16s ease,color .16s ease; } .soeb-jump__link:hover{background:var(--soeb-mint-tint);color:var(--soeb-pine)} .soeb-jump__link.is-current{background:var(--soeb-mint-tint);color:var(--soeb-pine);font-weight:600} /* Utility control, not a CTA: pale lilac, never the pink. */ .soeb-jump__action{ flex:none;display:inline-flex;align-items:center;gap:8px; padding:10px 18px;border-radius:var(--soeb-radius-pill); background:var(--soeb-mint-tint);border:1px solid transparent; font-size:.95rem;font-weight:600;line-height:1;color:var(--soeb-pine);text-decoration:none;white-space:nowrap; transition:background .16s ease,border-color .16s ease; } .soeb-jump__action:hover{background:#E7DBFF;border-color:var(--soeb-mint)} .soeb-jump__action--mobile{display:none} /* Mobile: label and priority action on one row, links scrolling beneath. Scrolling beats wrapping here — three ragged rows of pills reads as a mess and pushes the article off the first screen. */ @media(max-width:860px){ .soeb-jump__inner{flex-direction:column;align-items:stretch;gap:6px;padding:9px 0 7px} .soeb-jump__head{justify-content:space-between;gap:12px} .soeb-jump__list{ gap:4px;padding-bottom:2px; -webkit-mask-image:linear-gradient(to right,#000 86%,transparent); mask-image:linear-gradient(to right,#000 86%,transparent); } /* First link lines up with "On this page" above it. */ .soeb-jump__list{margin-left:-12px} .soeb-jump__link{padding:8px 12px} .soeb-jump__action--desktop{display:none} .soeb-jump__action--mobile{display:inline-flex;padding:9px 14px;font-size:.88rem} } /* Anchor targets clear the sticky header when a jump link lands on them. */ .soeb-article__body [id],.soeb-art__prose [id],[id].soeb-art__widget{scroll-margin-top:96px} @media(max-width:768px){.soeb-article__body [id],.soeb-art__prose [id],[id].soeb-art__widget{scroll-margin-top:80px}} /* ── 4. SHARED HERO TYPE SCALE ───────────────────────────────────────────── The type scale for the hub hero (.soeb-hero__*, §9). It lives here, beside the primitives it belongs with, rather than inside §9: §9 owns the hero's ground, padding, container and trail, this owns its typography. */ .soeb-hero__intro{max-width:52rem} .soeb-hero__title{font-size:clamp(2.6rem,4.8vw,3.9rem);line-height:1.02;font-weight:800;letter-spacing:-.03em;margin:16px 0 0;text-wrap:balance;max-width:15em;color:#fff} .soeb-hero__title em{font-style:normal;color:var(--soeb-mint)} .soeb-hero__lead{font-size:1.22rem;line-height:1.5;color:var(--soeb-mist);max-width:34em;margin:var(--soeb-space-5) 0 var(--soeb-space-6)} .soeb-hero__ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* 1.1.7 — hub heroes opened from a page (homepage, /tariffs/, /benefits/). A hub with no buttons closes on the standfirst, so the lead drops its bottom margin rather than leaving a CTA-sized gap above the jump bar. */ .soeb-hero__lead:last-child{margin-bottom:0} /* Button pair: the secondary takes the primary's exact geometry so the two sit on one baseline; the border width comes from .soeb-btn (--soeb-bw). */ .soeb-on-dark .soeb-btn--cta.soeb-btn--secondary{border-color:rgba(255,255,255,.55)} .soeb-on-dark .soeb-btn--cta.soeb-btn--secondary:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff} @media(max-width:480px){ .soeb-hero__ctas--pair{flex-direction:column;align-items:stretch} .soeb-hero__ctas--pair .soeb-btn{width:100%} } /* ── 5. EDITORIAL ARTICLE SYSTEM (.soeb-art) ──────────────────────────── */ /* Approved editorial exploration translated 1:1. Two surface changes per page: pale lilac masthead, aubergine ending band. Rhythm components below are available as block patterns (inc/block-patterns.php) — see PATTERNS-GUIDE. */ /* v4.9.0 — the article container is the SAME box as .site-header__inner and the hub hero's .soeb-hero__wrap: 1320px, 32px gutters, stepping to 16px at 768px. It was 1180px/640px, which put the H1 70px further in than the logo above it on any viewport wider than 1180px. The reading column below is unaffected — that lives in .soeb-art__shell and is centred on the viewport axis independently of this container (see the geometry note below). */ .soeb-art__container{max-width:var(--soeb-w-site);margin:0 auto;padding-left:32px;padding-right:32px} @media(max-width:768px){.soeb-art__container{padding-left:16px;padding-right:16px}} /* Masthead — pale lilac ground, compact horizontal meta */ .soeb-art__head{background:var(--soeb-ground);border-bottom:1px solid var(--soeb-line)} .soeb-art__crumbs{font-size:.82rem;color:var(--soeb-ink-soft);padding:18px 0 0} .soeb-art__crumbs a{color:var(--soeb-ink-soft);text-decoration:none} .soeb-art__crumbs a:hover{color:var(--soeb-pine);text-decoration:underline} .soeb-art__crumbs .sep{margin:0 7px} /* Current page in bold ink, matching .octo-breadcrumbs__current on the hub heroes. Applies wherever the trail is used, including author archives. */ .soeb-art__crumbs-current{color:var(--soeb-ink);font-weight:600} .soeb-art__mast{padding:40px 0 52px;max-width:880px} /* v4.7.0 — --trail is the article masthead, which now CONTAINS its own breadcrumb trail below the byline rather than sitting under one. The extra top padding absorbs the space the trail used to occupy above it (18px + a ~19px line), so the lilac band keeps its previous proportions. As of v4.11.3 the author archive uses this modifier too — its trail closes the masthead in the same way, so the two surfaces cannot drift apart. */ .soeb-art__mast--trail{padding-top:56px} .soeb-art__mast--trail .soeb-art__crumbs{padding:0;margin-top:22px} /* v4.12.0 — the eyebrow may carry an optional short context label after the category: "SUPPLIERS & TARIFFS / BEST ENERGY SUPPLIERS". The group owns the spacing below so the members keep their own margins at zero. */ .soeb-art__eyebrows{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;margin-bottom:18px} .soeb-art__eyebrow{font-family:var(--soeb-mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase; color:var(--soeb-green);text-decoration:none;display:inline-block;margin-bottom:16px;background:transparent;border:0;padding:0} .soeb-art__eyebrow:hover{color:var(--soeb-pine);text-decoration:underline} /* v4.12.4 — the eyebrow takes --soeb-pine, the SAME token .soeb-btn--primary uses on light grounds (and .soeb-btn--secondary, and .soeb-arrow-link). The masthead is a light ground, so this is the site's button plum in its correct context rather than the lilac variant that only applies on aubergine. 10.3:1 on --soeb-ground, so the contrast question that dogged the lighter #08805A attempts is closed. Hover deepens to --soeb-forest, exactly the step .soeb-btn--primary:hover takes. Scoped to the group, so the author archive's standalone "Author" eyebrow keeps --soeb-green. Weight is 600 (v4.12.3) — the heaviest mono weight the theme loads (functions.php requests IBM Plex Mono 400;500;600), so 700 would be synthesised by the browser and smear at this size with .08em tracking. */ .soeb-art__eyebrows .soeb-art__eyebrow{margin-bottom:0;color:var(--soeb-pine);font-weight:600} .soeb-art__eyebrows a.soeb-art__eyebrow:hover{color:var(--soeb-forest)} .soeb-art__eyebrow--context{color:var(--soeb-pine)} .soeb-art__eyebrow-sep{font-family:var(--soeb-mono);font-size:.72rem;font-weight:600;color:#A9BAAD;line-height:1} .soeb-art__title{font-family:var(--soeb-font);font-style:normal;font-size:clamp(2.2rem,4.4vw,3.15rem);line-height:1.05; letter-spacing:-.028em;font-weight:750;max-width:14.5em;color:var(--soeb-ink);margin:0} .soeb-art__standfirst{font-size:1.28rem;line-height:1.5;color:var(--soeb-ink-soft);max-width:32em;margin:22px 0 0} /* v4.12.0 — the metaline is now avatar + text row. The text keeps its own baseline-aligned wrapping row so the avatar can centre against it without dragging the dots and dates out of alignment when the line wraps. */ /* v4.12.5 — the metaline gap opens to 42px so the lower masthead breathes at the same rate as the H1 above it. Only articles have a metaline, so this cannot reach the author archive. */ /* v4.12.6 — gap 14px → 12px, the top of the requested 10–12px band. This is the ONLY gap in the metaline: its two children are the avatar and the text block, so it is literally avatar → "Written by". With no avatar there is one child and the gap does not apply. */ .soeb-art__metaline{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;margin-top:42px;font-size:.9rem;color:var(--soeb-ink-soft)} /* v4.12.5 — metaline -> trail, 22px to 30px. Keyed off the ADJACENCY rather than a new modifier: the author archive's trail has no metaline before it, so it keeps the 22px set above and is untouched. */ .soeb-art__metaline + .soeb-art__crumbs{margin-top:30px} .soeb-art__meta-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;min-width:0} .soeb-art__avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--soeb-mist); display:block} /* v4.12.6 — an unqualified `img` so it covers BOTH sources: the attachment image from wp_get_attachment_image() and get_avatar()'s `.avatar` output, which carries its own width/height attributes and would otherwise render at 88px. width/height 100% override those attributes without !important. */ .soeb-art__avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%} .soeb-art__metaline b{color:var(--soeb-ink);font-weight:600} .soeb-art__dot{color:#A9BAAD} /* Outline home icon opening the trail. Inline SVG on currentColor, so it inherits the link and hover colours and needs no icon library. It is aria-hidden — the anchor still reads as "Home", and the BreadcrumbList schema (Rank Math) is generated independently of this markup. */ .soeb-art__crumbs-icon{display:inline-block;vertical-align:-2px;margin-right:7px} /* Featured image — optional wide horizontal band below the masthead */ .soeb-art__feat{margin:0;padding:40px 0 0;background:var(--soeb-paper)} .soeb-art__feat-img{aspect-ratio:21/9;border-radius:20px;overflow:hidden;background:var(--soeb-ground)} .soeb-art__feat-img img{width:100%;height:100%;object-fit:cover;display:block} .soeb-art__feat-cap{margin-top:10px;font-size:.82rem;color:var(--soeb-ink-soft)} /* v4.12.0 — image overlapping the masthead ----------------------------------------- The masthead used to end, then 40px of white, then the image: three separate bands. Now the lilac ground is extended by --soeb-art-overlap and the figure is pulled back up by exactly the same amount, so the top of the image sits INSIDE the lilac and the rest carries on into the white article background. The masthead's own lower padding is tightened at the same time, which is where the compaction comes from — nothing above the breadcrumb moves. Both halves key off ONE token, so the two can never drift apart, and the whole treatment is opt-in per page: .soeb-art__head--overlap is only printed when the article actually has a featured image, leaving thumbnail-less posts and the author archive exactly as they were. v4.12.1 made the overlap a SHARE of the image height (62%). v4.12.7 returns it to a FIXED 60px — see the token for why the drift argument no longer applies at this depth. IMPORTANT for anyone retuning this: the token cannot move the image. The head's padding-bottom and the figure's negative margin-top are the SAME value, so they cancel exactly — the figure's position is set by the masthead's own padding-bottom (52px below the breadcrumb) and nothing else. Changing --soeb-art-overlap only moves where the lilac terminates. To change the breadcrumb-to-image distance, edit .soeb-art__mast--trail instead. The figure's white background becomes a hard-stopped gradient rather than a flat fill: transparent for the overlapping strip so the lilac shows through, opaque paper from there down so the band below is still guaranteed white regardless of what it sits on. */ .soeb-art__head--overlap{padding-bottom:var(--soeb-art-overlap)} .soeb-art__head--overlap .soeb-art__mast--trail{padding-bottom:52px} .soeb-art__head--overlap + .soeb-art__feat{ position:relative;z-index:1; margin-top:calc(-1 * var(--soeb-art-overlap));padding-top:0; background:linear-gradient(to bottom, transparent 0, transparent var(--soeb-art-overlap), var(--soeb-paper) var(--soeb-art-overlap), var(--soeb-paper) 100%); } @media(max-width:1024px){ .soeb-art__head--overlap .soeb-art__mast--trail{padding-bottom:46px} .soeb-art__metaline{margin-top:36px} .soeb-art__metaline + .soeb-art__crumbs{margin-top:26px} } @media(max-width:640px){ .soeb-art__feat{padding-top:24px} .soeb-art__feat-img{aspect-ratio:3/2;border-radius:14px} /* v4.12.7 — the :root override that lived here (feat-h recalculated for the 3:2 ratio, share dropped to .32) is deleted. It existed to stop a 62% overlap swallowing a portrait-ish image; a flat 60px needs no ratio-aware equivalent. Coincidentally 60px is close to what .32 was already resolving to on a phone (~66px at 375px wide), so mobile barely moves — this change is almost entirely a desktop and tablet one. */ .soeb-art__head--overlap .soeb-art__mast--trail{padding-bottom:36px} .soeb-art__metaline{flex-wrap:wrap;gap:12px;margin-top:30px} .soeb-art__metaline + .soeb-art__crumbs{margin-top:22px} .soeb-art__avatar{flex:0 0 40px;width:40px;height:40px} .soeb-art__eyebrows{gap:3px 8px;margin-bottom:14px} } /* Page geometry — centred reading column + independent left rail (v4.2.1) --------------------------------------------------------------------- .soeb-art__prose is a REAL box of reading width, centred on the viewport axis. Everything inside therefore aligns to its left edge exactly as it did before, at any nesting depth — headings with their own max-width (h2 is capped at 22em for line length) sit flush left, not floating. Breakouts do NOT get their own width. They stay width:auto and bleed outward with equal negative margins on both sides, so expansion is symmetric about the same axis by construction: it is impossible for a breakout to grow more to one side than the other. The bleed is clamped so it can never exceed the space available, which makes every tier degrade gracefully instead of overflowing. */ .soeb-art__shell{position:relative;padding:56px var(--soeb-art-pad) 0} .soeb-art__feat + .soeb-art__shell{padding-top:44px} .soeb-art__main{max-width:none} .soeb-art__prose{max-width:var(--soeb-w-read);margin-left:auto;margin-right:auto;padding-left:0;padding-right:0} @media(max-width:640px){.soeb-art__shell{padding-left:16px;padding-right:16px}} /* TOC — integrated numbered rail (styles the JS-injected .soeb-toc) */ /* Pinned to the TOP of the article, deliberately NOT sticky: it sits beside the opening content and scrolls away with it, so it can never travel down the page into a breakout. Absolute, so it is dimensionally invisible. */ .soeb-art__rail{width:auto;min-width:0;max-width:100%} @media(min-width:1240px){ /* v4.11.8 — the rail's left edge IS the article container's left inner edge, so it lines up with the H1, the breadcrumb trail and the featured image band above it (.soeb-art__container: 1320px capped, 32px gutter). It was positioned outward from the reading column instead, which put it 72px OUTSIDE that edge at >=1460px — floating in the margin with nothing above it to align to. Still written as an offset from the same 50% line the reading column uses, so the rail remains decoupled from the column and cannot displace it. The max() clamps it to the gutter below 1320px, where the container is no longer capped and its inner edge is the gutter itself. */ .soeb-art__rail{ position:absolute;top:56px; left:max(var(--soeb-art-pad), calc(50% - (var(--soeb-w-site) / 2) + var(--soeb-art-pad))); width:var(--soeb-rail-w); } .soeb-art__feat + .soeb-art__shell .soeb-art__rail{top:44px} } .soeb-art__rail .soeb-toc{width:auto;min-width:0;max-width:100%} .soeb-art__rail .soeb-toc{background:transparent;border:0;box-shadow:none;border-radius:0;padding:0} .soeb-art__rail .soeb-toc__header{padding:0;border:0;background:transparent;margin-bottom:14px;cursor:default} .soeb-art__rail .soeb-toc__title{font-family:var(--soeb-mono);font-size:.72rem;font-weight:500;letter-spacing:.08em; text-transform:uppercase;color:var(--soeb-ink-soft);gap:8px} .soeb-art__rail .soeb-toc__title svg{display:none} .soeb-art__rail .soeb-toc__toggle{display:none} .soeb-art__rail .soeb-toc__list{display:block;border-left:1px solid var(--soeb-line);margin:0;padding:0;list-style:none;overflow:visible;white-space:normal} .soeb-art__rail .soeb-toc__list li{display:block;flex:none;margin:0;padding:0} .soeb-art__rail .soeb-toc__list a{display:flex;white-space:normal;width:auto;gap:10px;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent; font-size:.86rem;line-height:1.4;color:var(--soeb-ink-soft);text-decoration:none;background:transparent} .soeb-art__rail .soeb-toc__list a .soeb-toc__num{font-family:var(--soeb-mono);font-size:.66rem;color:#A9BAAD;padding:3px 0 0;min-width:14px; background:transparent;border:0;box-shadow:none;width:auto;height:auto;min-height:0;border-radius:0;display:inline;flex:0 0 auto;line-height:inherit} .soeb-art__rail .soeb-toc__list a.active .soeb-toc__num{background:transparent;color:var(--soeb-pine)} .soeb-art__rail .soeb-toc__list a:hover{color:var(--soeb-pine)} .soeb-art__rail .soeb-toc__list a.active{color:var(--soeb-pine);font-weight:600;border-left-color:var(--soeb-pine)} .soeb-art__rail .soeb-toc__list a.active .soeb-toc__num{color:var(--soeb-pine)} @media(max-width:1239.98px){ /* below the rail threshold: ruled collapsible band under the masthead */ .soeb-art__rail{position:static;margin:24px auto 8px;max-width:var(--soeb-w-read)} .soeb-art__rail .soeb-toc{border-top:1px solid var(--soeb-line);border-bottom:1px solid var(--soeb-line);padding:14px 0} .soeb-art__rail .soeb-toc__header{cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin-bottom:0} .soeb-art__rail .soeb-toc__toggle{display:inline-flex;background:none;border:0;color:var(--soeb-ink-soft)} .soeb-art__rail .soeb-toc__list{border-left:0;padding-top:10px} .soeb-art__rail .soeb-toc__list a{padding-left:0;border-left:0} } /* Editorial prose hierarchy — H1 owns the page; H2s step well down */ .soeb-art__prose p{font-size:1.005rem;line-height:1.75} .soeb-art__prose>p:first-child{font-size:1.14rem;line-height:1.65;color:var(--soeb-ink)} .soeb-secnum{font-family:var(--soeb-mono);font-size:.7rem;letter-spacing:.09em;color:var(--soeb-green);display:block;margin:60px 0 8px} .soeb-art__prose h2{font-size:1.45rem;line-height:1.25;letter-spacing:-.014em;font-weight:700;margin:60px 0 14px;max-width:22em;color:var(--soeb-ink)} .soeb-secnum+h2{margin-top:0} .soeb-art__prose h3{font-size:1.12rem;line-height:1.35;font-weight:650;margin:34px 0 10px} /* ── Rhythm components (block patterns) ── */ .soeb-glance{margin:40px 0 8px;border-top:2px solid var(--soeb-ink);padding-top:16px} .soeb-glance>.soeb-label{color:var(--soeb-ink-soft)} .soeb-glance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:18px} .soeb-glance-grid .soeb-stat-label{margin-bottom:6px} .soeb-glance-grid .soeb-num{font-size:1.7rem} .soeb-glance-grid .soeb-num--text{font-size:1.15rem;line-height:1.3} .soeb-glance-note{display:block;font-size:.82rem;color:var(--soeb-ink-soft);margin-top:6px;line-height:1.45} @media(max-width:820px){.soeb-glance-grid{grid-template-columns:1fr 1fr;gap:20px}} .soeb-keyfact{margin:34px 0;padding-left:20px;border-left:3px solid var(--soeb-pine)} .soeb-keyfact .soeb-label{color:var(--soeb-pine);display:block;margin-bottom:8px} .soeb-keyfact p{font-size:1.1rem;line-height:1.55;margin:0;max-width:34em} .soeb-checked{margin:30px 0;padding:12px 0;border-top:1px solid var(--soeb-line);border-bottom:1px solid var(--soeb-line); font-size:.93rem;line-height:1.6;color:var(--soeb-ink)} .soeb-checked .soeb-label{color:var(--soeb-ink-soft)} .soeb-checked .soeb-label b{color:var(--soeb-ink);font-weight:600} .soeb-caution{margin:34px 0;background:var(--soeb-warn-tint);border-radius:10px;padding:16px 20px; font-size:.95rem;line-height:1.6;color:#4a3a10;max-width:38em} .soeb-caution .soeb-label{color:var(--soeb-warn);display:block;margin-bottom:5px} .soeb-pullstat{margin:40px 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:baseline; border-top:1px solid var(--soeb-line);border-bottom:1px solid var(--soeb-line);padding:22px 0} .soeb-pullstat .soeb-ps-num{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em;line-height:1;font-size:3rem;color:var(--soeb-pine)} .soeb-pullstat .soeb-ps-label{grid-column:1;font-family:var(--soeb-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soeb-ink-soft)} .soeb-pullstat p{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:.95rem;line-height:1.6;color:var(--soeb-ink-soft);margin:0;max-width:30em} @media(max-width:640px){.soeb-pullstat{grid-template-columns:1fr}.soeb-pullstat p{grid-column:1;grid-row:auto}} .soeb-toolstep{margin:40px 0;background:var(--soeb-ground);border-radius:12px;padding:20px 24px; display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .soeb-toolstep b{display:block;font-size:1.05rem} .soeb-toolstep span{font-size:.9rem;color:var(--soeb-ink-soft)} .soeb-toolstep .soeb-btn{flex:0 0 auto} @media(max-width:640px){.soeb-toolstep .soeb-btn{width:100%;justify-content:center}} /* Breakout tiers — .soeb-wide and .soeb-full. Both expand symmetrically about the shared centre axis (widths applied in the geometry block below). */ .soeb-wide,.soeb-full{margin:40px auto} .soeb-wide>.soeb-label,.soeb-full>.soeb-label{color:var(--soeb-ink-soft);display:block;margin-bottom:12px} .soeb-wide-note{font-size:.85rem;color:var(--soeb-ink-soft);margin-top:12px;max-width:60ch} @media(max-width:640px){ .soeb-wide .soeb-tblwrap,.soeb-full .soeb-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .soeb-wide table,.soeb-full table{min-width:560px} } /* ── Breakout tiers (must stay AFTER the rhythm components so these beat their margin shorthands on specificity, without !important) ────────── */ .soeb-art__prose>.soeb-wide{ width:auto;max-width:none; margin-left:calc(-1 * var(--soeb-bleed-wide)); margin-right:calc(-1 * var(--soeb-bleed-wide)); } .soeb-art__prose>.soeb-full{ width:auto;max-width:none; margin-left:calc(-1 * var(--soeb-bleed-full)); margin-right:calc(-1 * var(--soeb-bleed-full)); } /* Legacy wide-table opt-in, re-pointed onto the centred full tier. style.css (v3.28.5) sizes these to min(1100px,92vw) with margin-left:0, which anchored them to the LEFT edge of the reading column — correct for the old grid, wrong now that the column is centred. Existing posts keep their .is-wide-table / .wide-table markup (main.js also auto-tags any table with 4+ columns) and simply become centred. The JS clamp variable --soeb-wt-maxw is left unreferenced here, so it is inert. */ @media(min-width:1025px){ .soeb-art__prose .table-wrap.is-wide-table, .soeb-art__prose .table-wrap.wide-table, .soeb-art__prose .wp-block-table.is-wide-table, .soeb-art__prose .wp-block-table.wide-table, .soeb-art__prose figure.wp-block-table.is-wide-table, .soeb-art__prose figure.wp-block-table.wide-table, .soeb-art__prose .table-wrap:has(> table.is-wide-table), .soeb-art__prose .table-wrap:has(> table.wide-table), .soeb-art__prose .wp-block-table:has(> table.is-wide-table), .soeb-art__prose .wp-block-table:has(> table.wide-table), .soeb-art__prose figure.wp-block-table:has(> table.is-wide-table), .soeb-art__prose figure.wp-block-table:has(> table.wide-table), .soeb-art__prose figure.wp-block-table:has(> .table-wrap > table.is-wide-table), .soeb-art__prose figure.wp-block-table:has(> .table-wrap > table.wide-table){ width:auto;max-width:none; margin-left:calc(-1 * var(--soeb-bleed-full)); margin-right:calc(-1 * var(--soeb-bleed-full)); } /* When a figure wraps a .table-wrap, only the OUTER element bleeds — otherwise the inner wrapper would expand a second time. */ .soeb-art__prose figure.wp-block-table.is-wide-table .table-wrap, .soeb-art__prose figure.wp-block-table.wide-table .table-wrap, .soeb-art__prose figure.wp-block-table:has(> .table-wrap > table.is-wide-table) .table-wrap, .soeb-art__prose figure.wp-block-table:has(> .table-wrap > table.wide-table) .table-wrap{ width:100%;max-width:100%;margin-left:0;margin-right:0; } } /* Plugin pricing widgets on tariff guides (v4.3.1). The widget is given ROOM and a CENTRE, and nothing else — no restyling of plugin internals, which stay owned by their plugins. v4.3.0 centred the container but not the widget: these plugins carry their own max-width (roughly 640px) with no auto margins, so they sat against the left edge of a 1260px container and collided with the TOC rail. Two complementary rules fix that without knowing a single plugin class name: 1. justify-content:center on a max-content track centres the plugin when its ROOT is the element carrying the max-width. 2. margin-inline:auto centres it when an INNER wrapper carries the max-width instead. Both are no-ops when the element already fills the container, so a full-width widget (e.g. a wide chart) is unaffected and still spans the whole breakout. Nothing here sets colour, type, spacing or borders on plugin markup. If a specific widget needs a different measure, set --soeb-widget-max on its container rather than editing the plugin. */ .soeb-art__widget{ margin-top:44px;margin-bottom:44px; display:grid; grid-template-columns:minmax(0,var(--soeb-widget-max,max-content)); justify-content:center; } .soeb-art__widget>*{max-width:100%;margin-left:auto;margin-right:auto} .soeb-art__widget>*:first-child{margin-top:0} .soeb-art__widget>*:last-child{margin-bottom:0} /* Ending — aubergine next-steps band */ .soeb-art__next{background:var(--soeb-forest);color:#fff;border-radius:var(--soeb-radius-card);margin-top:72px} .soeb-art__next-inner{padding:44px 44px 40px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px} .soeb-art__next-eyebrow{font-family:var(--soeb-mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--soeb-mint)} .soeb-art__next h2{font-size:1.6rem;letter-spacing:-.018em;color:#fff;margin:12px 0 10px} .soeb-art__next p{color:var(--soeb-mist);font-size:.98rem;line-height:1.6;margin:0 0 20px;max-width:30em} .soeb-art__next .soeb-btn{background:var(--soeb-cta);color:var(--soeb-forest)} .soeb-art__next .soeb-btn:hover{background:var(--soeb-cta-deep);color:var(--soeb-forest)} .soeb-art__next-list{border-top:1px solid var(--soeb-line-dark)} .soeb-art__next-list a{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:14px 0; border-bottom:1px solid var(--soeb-line-dark);color:#fff;text-decoration:none;font-weight:600;font-size:.98rem} .soeb-art__next-list a small{font-family:var(--soeb-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--soeb-mist);font-weight:500} .soeb-art__next-list a:hover{color:var(--soeb-mint)} .soeb-art__next-meta{margin-top:22px;font-size:.82rem;color:var(--soeb-mist)} @media(max-width:900px){.soeb-art__next-inner{grid-template-columns:1fr;gap:28px;padding:32px 24px}} @media(prefers-reduced-motion:reduce){ .soeb-btn,.soeb-btn .soeb-btn-arrow,.soeb-arrow-link::after, .soeb-index__num{transition:none} } /* ============================================================================ 7. SITE FOOTER — aubergine terminal with lilac statement band ---------------------------------------------------------------------------- The page previously ended on the aubergine next-steps card and then dropped into a tall white footer, so the boldest moment was followed by the quietest. This makes the footer the terminal block: full-bleed lilac band, a figures ledger, then deep aubergine. The dark header and dark footer now bookend the page. Scoped under .soeb-foot so it wins the cascade over the legacy .site-footer--floating rules in style.css without deleting them. ========================================================================== */ /* Breathing space above the lilac band. v4.4.0 set margin-top:0, which butted the band straight onto the next-steps card and read as one continuous block. The band needs to arrive as a separate moment. */ .soeb-foot{background:var(--soeb-forest);color:#E4EDE7;margin-top:80px} .soeb-foot a{text-decoration:none} /* ── Switch CTA panel (1.0.2) ─────────────────────────────────────────────── A pale lilac card straddling the top edge of the footer. The footer's aubergine starts --soeb-cta-overlap down from the top of the panel, so the card's upper part sits on the page and the rest on the dark footer — one continuous ending rather than a stripe followed by a block. Markup: template-parts/footer-switch-cta.php. */ .soeb-foot--has-cta{ --soeb-cta-overlap:150px; background:linear-gradient(to bottom,transparent 0,transparent var(--soeb-cta-overlap),var(--soeb-forest) var(--soeb-cta-overlap)); } .soeb-foot__cta{padding:0 32px} .soeb-foot__cta-panel{ position:relative;overflow:hidden; /* Same outer edges as the footer content below (.footer-shell is --soeb-w-site wide with the same side padding as .soeb-foot__cta). */ max-width:calc(var(--soeb-w-site) - 64px);margin-inline:auto; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:center;gap:40px; padding:48px 40px 48px 64px; background:var(--soeb-lilac-soft); border:1px solid #FFFFFF; border-radius:28px; box-shadow:0 30px 60px -24px rgba(16,0,43,.55),0 2px 6px rgba(27,10,56,.08); color:var(--soeb-forest); } /* One soft glow behind the artwork, so the illustration sits in light rather than on a flat fill. */ .soeb-foot__cta-panel::before{ content:"";position:absolute;right:-80px;top:50%;width:520px;height:520px;transform:translateY(-50%); background:radial-gradient(closest-side,rgba(222,92,241,.16),rgba(222,92,241,0)); pointer-events:none; } .soeb-foot__cta-copy{position:relative;max-width:600px} .soeb-foot__cta-eyebrow{ display:inline-flex;align-items:center;gap:10px;margin:0; font-family:var(--soeb-mono);font-size:.72rem;font-weight:500;line-height:1; letter-spacing:.14em;text-transform:uppercase;color:var(--soeb-pine); } .soeb-foot__cta-eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--soeb-cta);flex:none; } .soeb-foot .soeb-foot__cta-title{ margin:18px 0 0;max-width:22ch; font-family:var(--soeb-font);font-size:clamp(1.7rem,1.1rem + 1.6vw,2.4rem); line-height:1.1;letter-spacing:-.025em;font-weight:700;color:var(--soeb-forest); } /* --soeb-ink-soft on the pale lilac is ~6.6:1 — comfortably AA. */ .soeb-foot__cta-text{ margin:16px 0 0;max-width:46ch; font-size:1.06rem;line-height:1.6;color:var(--soeb-ink-soft); } .soeb-foot__cta-side{position:relative;display:flex;align-items:center;gap:20px;min-width:0} .soeb-foot__cta-art{flex:none;width:clamp(180px,20vw,260px);max-width:100%;line-height:0} .soeb-foot__cta-illo{display:block;width:100%;height:auto} /* Scoped two classes deep: style.css carries `.site-footer a` at (0,1,1). */ .soeb-foot .soeb-foot__cta-btn{ display:inline-flex;align-items:center;justify-content:center;gap:12px;flex:0 1 auto; box-sizing:border-box;max-width:100%;min-width:0;text-align:center; padding:18px clamp(20px,2.4vw,30px);border-radius:var(--soeb-radius-pill); background:var(--soeb-forest);color:#fff; font-family:var(--soeb-font);font-size:1rem;font-weight:650;line-height:1.2;letter-spacing:.005em; white-space:normal;text-decoration:none; box-shadow:0 10px 24px -10px rgba(27,10,56,.6); transition:background .16s ease,box-shadow .16s ease; } .soeb-foot .soeb-foot__cta-btn:hover, .soeb-foot .soeb-foot__cta-btn:focus{background:var(--soeb-pine);color:#fff;text-decoration:none} .soeb-foot .soeb-foot__cta-btn:focus-visible{outline:2px solid var(--soeb-forest);outline-offset:3px} .soeb-foot__cta-arrow{flex:none;transition:transform .18s ease} .soeb-foot__cta-btn:hover .soeb-foot__cta-arrow{transform:translateX(3px)} /* Tablet: artwork shrinks and the button tucks under it. */ @media(max-width:1080px){ .soeb-foot__cta-panel{padding:44px 36px 44px 48px;gap:32px} .soeb-foot__cta-side{flex-direction:column-reverse;align-items:center;gap:8px} .soeb-foot__cta-art{width:210px} } @media(max-width:900px){.soeb-foot__cta{padding:0 24px}} /* Mobile: one column — artwork, copy, then a full-width button. */ @media(max-width:760px){ .soeb-foot--has-cta{--soeb-cta-overlap:120px} .soeb-foot__cta{padding:0 16px} .soeb-foot__cta-panel{grid-template-columns:minmax(0,1fr);justify-items:center;gap:24px;padding:28px 20px 28px;border-radius:22px;text-align:center} .soeb-foot__cta-panel::before{right:auto;left:50%;top:0;width:420px;height:420px;transform:translate(-50%,-45%)} .soeb-foot__cta-side{display:contents} .soeb-foot__cta-art{order:-1;width:min(190px,70%);justify-self:center;margin:-4px auto -8px} .soeb-foot__cta-copy{width:100%;max-width:none;display:flex;flex-direction:column;align-items:center} .soeb-foot .soeb-foot__cta-title, .soeb-foot__cta-text{margin-inline:auto} .soeb-foot .soeb-foot__cta-btn{width:100%;padding:17px 20px} .soeb-foot__cta-text{font-size:1rem} } @media(prefers-reduced-motion:reduce){ .soeb-foot .soeb-foot__cta-btn,.soeb-foot__cta-arrow{transition:none} } /* ── Footer body over aubergine ─────────────────────────────────────────────── */ .soeb-foot .footer-shell{padding:64px 32px 40px;background:transparent} /* The wordmark is already white-on-transparent with a pink mascot: show it as is. */ .soeb-foot .site-logo--footer{max-width:100%} .soeb-foot .site-logo--footer .site-logo__img{filter:none;opacity:1;height:40px;width:auto;max-width:100%} /* 1.2.0 — sized by width on small screens so the wordmark always fits the column (at 40px tall it is ~312px wide and overran narrow phones). This has to come AFTER the base rule: the old 34px mobile rule sat above it at equal specificity, so it never applied. */ @media(max-width:760px){ .soeb-foot .site-logo--footer .site-logo__img{height:auto;width:220px;max-width:100%} } .soeb-foot .footer-divider{background:var(--soeb-line-dark);border:0} .soeb-foot .footer-column-title{color:var(--soeb-mint)} .soeb-foot .footer-links a{color:#D3E0D7} .soeb-foot .footer-links a:hover,.soeb-foot .footer-links a:focus{color:var(--soeb-mint)} /* Compliance small print — spans the full shell so its edges line up exactly with the .footer-divider rules above and below it. Both are children of .footer-shell, so matching means imposing no measure of its own. */ .soeb-foot .footer-disclaimer{max-width:none;margin-inline:0} .soeb-foot .footer-disclaimer__text{color:#9FB2A6;font-size:.78rem} .soeb-foot .footer-disclaimer__text a{color:#D3E0D7} .soeb-foot .footer-disclaimer__text a:hover{color:var(--soeb-mint)} .soeb-foot .footer-bottom{border-top:1px solid var(--soeb-line-dark);padding-top:28px} .soeb-foot .footer-bottom__copyright{color:#8CA294} @media(max-width:900px){ .soeb-foot{margin-top:56px} .soeb-foot .footer-shell{padding:48px 24px 32px} } /* ============================================================================ 8. SITE HEADER — CTA pair brought onto the system ---------------------------------------------------------------------------- The two header CTAs were still on the legacy .header-cta rules in style.css and had drifted from their counterparts elsewhere on the site: Subscribe → now matches the footer Subscribe button (transparent with a hairline stroke; hover swaps stroke and label to lilac rather than washing a white film over the background). No mail icon here — the header bar is tighter and the label alone is unambiguous next to a second CTA. Build my plan → now matches the homepage hero CTA (.soeb-btn--cta): system lilac/aubergine tokens, weight 650, the small lilac → mint-deep hover step, background-and-colour transition only, and no lift or press-down. Both keep the header's own padding and .9rem label — the bar is 60-odd pixels tall and the hero's 16px/1rem proportions would not fit. Everything else (colour, weight, stroke, interaction) is inherited from the reference buttons. Scoped under .site-header so it wins over the legacy .header-cta rules in style.css without deleting them. Both selectors are two classes; the legacy ones are one. ========================================================================== */ .site-header .header-cta{ font-family:var(--soeb-font); letter-spacing:.005em; transition:background .16s ease,border-color .16s ease,color .16s ease; } /* Subscribe — mirror of .soeb-foot .footer-subscribe-button */ .site-header .header-cta--ghost{ background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; } .site-header .header-cta--ghost:hover, .site-header .header-cta--ghost:focus{ background:transparent; border-color:var(--soeb-mint); color:var(--soeb-mint); transform:none; text-decoration:none; } /* Build my plan — mirror of the hero .soeb-btn--primary.soeb-btn--cta */ .site-header .header-cta--primary{ background:var(--soeb-cta); border:1px solid var(--soeb-cta); color:var(--soeb-forest); font-weight:650; } .site-header .header-cta--primary:hover, .site-header .header-cta--primary:focus{ background:var(--soeb-cta-deep); border-color:var(--soeb-cta-deep); color:var(--soeb-forest); transform:none; text-decoration:none; } .site-header .header-cta:active{transform:none} /* Logo (1.0.2) — full-colour wordmark, ~7.8:1. Sized by height on desktop and by width on small screens so it never crowds the menu button. */ .site-header .site-logo__img{height:38px;width:auto;max-width:none;filter:none} @media(max-width:1024px){ .site-header .header-shell .site-logo__img{height:auto;width:230px;max-width:100% !important} } @media(max-width:480px){ .site-header .header-shell .site-logo__img{width:190px} } .site-header .header-cta:focus-visible{outline:2px solid var(--soeb-mint);outline-offset:3px} /* ── 9b. AUTHOR PROFILE (.soeb-author) ──────────────────────────────────── The native author archive rendered as a profile page. Deliberately thin: the masthead surface, containers, prose typography, article cards, buttons and pagination are all inherited from §5 and from the existing .hub-article-card system. Only the profile header, the subject list and the guides section needed rules of their own. Geometry follows the standing directive: the reading column is centred on the same axis as the article system (--soeb-w-read), not floated left. */ /* Profile header — photo beside the identity block, name dominant. v4.11.3 — the masthead is a plain block again: it carries .soeb-art__mast--trail and closes with the breadcrumb trail, matching blog posts. The photo/identity flex row moved onto .soeb-author__idrow so the trail sits at the container's left edge instead of becoming a third flex item beside the photo. */ .soeb-author__mast{max-width:940px} .soeb-author__idrow{display:flex;align-items:center;gap:36px} .soeb-author__photo{flex:0 0 auto} .soeb-author__photo img{display:block;width:128px;height:128px;object-fit:cover; border-radius:var(--soeb-radius-card);background:var(--soeb-ground)} .soeb-author__ident{min-width:0} /* Slightly below article-title scale: still the clear focus of the page, but a name does not need the full editorial headline size. */ .soeb-author__title{font-size:clamp(2.05rem,3.6vw,2.75rem);max-width:none} .soeb-author__role{margin:12px 0 0;font-size:1.05rem;font-weight:600;color:var(--soeb-pine)} .soeb-author__intro{font-size:1.14rem;margin-top:16px;max-width:34em} .soeb-author__links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 0;font-size:.9rem} .soeb-author__links a{color:var(--soeb-pine);text-decoration:none;border-bottom:1px solid var(--soeb-line)} .soeb-author__links a:hover{color:var(--soeb-forest);border-bottom-color:currentColor} /* Body — centred reading column, article prose typography inherited */ .soeb-author__body{max-width:var(--soeb-w-read);margin-inline:auto} .soeb-author__body>h2:first-child{margin-top:56px} /* Subjects — a compact ruled list, not six cards */ .soeb-author__subjects{list-style:none;margin:22px 0 0;padding:0; display:grid;grid-template-columns:1fr 1fr;column-gap:36px;border-top:1px solid var(--soeb-line)} .soeb-author__subjects li{margin:0;padding:13px 0;border-bottom:1px solid var(--soeb-line); font-size:.97rem;line-height:1.45;color:var(--soeb-ink)} /* Guides listing */ .soeb-author__guides{margin-top:var(--soeb-space-9);padding:var(--soeb-space-8) 0 var(--soeb-space-9); border-top:1px solid var(--soeb-line)} .soeb-author__guides-h{font-family:var(--soeb-font);font-size:1.6rem;line-height:1.2;letter-spacing:-.018em; font-weight:700;color:var(--soeb-ink);margin:0 0 var(--soeb-space-6)} .soeb-author__empty{color:var(--soeb-ink-soft)} .soeb-author .pagination{margin-top:var(--soeb-space-7)} /* Opt-in card date line (card-hub show_meta). Scoped to this page so no other caller of the card can pick it up. */ .soeb-author .hub-article-card__meta{font-family:var(--soeb-mono);font-size:.7rem;letter-spacing:.06em; color:rgba(255,255,255,.74);margin-top:-4px} @media(max-width:860px){ .soeb-author__idrow{gap:26px} .soeb-author__photo img{width:104px;height:104px} } @media(max-width:640px){ .soeb-author__idrow{flex-direction:column;align-items:flex-start;gap:20px} .soeb-author__photo img{width:88px;height:88px} .soeb-author__intro{font-size:1.06rem} .soeb-author__subjects{grid-template-columns:1fr;column-gap:0} .soeb-author__guides{margin-top:var(--soeb-space-8);padding:var(--soeb-space-7) 0 var(--soeb-space-8)} } /* Article byline link (§5 metaline) — reads as text, not a blue link */ .soeb-art__metaline .soeb-art__byline{color:var(--soeb-ink);text-decoration:none;border-bottom:1px solid var(--soeb-line)} .soeb-art__metaline .soeb-art__byline:hover{color:var(--soeb-pine);border-bottom-color:currentColor} .soeb-art__metaline .soeb-art__byline:focus-visible{outline:2px solid var(--soeb-pine);outline-offset:3px} /* ── 9. HUB HERO (.soeb-hero) ───────────────────────────────────────────── ONE hero for section landing pages and the guides index, so that every hub you build reads identically. The type scale, measures and CTA are not restated here: they are the shared declarations in §4. Only the block's own ground, padding, container and breadcrumb trail live below. Global by unique class, never scoped per page: per-surface scoping of NEW component classes is fragile under LiteSpeed's Remove Unused CSS, which can serve one page a cached subset built for another. One name, every hub, nothing to strip. */ .soeb-hero{background:var(--soeb-forest);color:#fff;font-family:var(--soeb-font); padding:var(--soeb-space-8) 0 var(--soeb-space-7);position:relative;z-index:1} .soeb-hero *{box-sizing:border-box} .soeb-hero__wrap{max-width:var(--soeb-w-site);margin:0 auto;padding:0 var(--soeb-space-6)} /* The hero sits above sections that use the legacy .site-container, which is the same 1320px/32px box but steps its padding down at 768px, not 640px. Matching that breakpoint keeps the headline flush with the content beneath it at every width. */ @media(max-width:768px){.soeb-hero__wrap{padding:0 var(--soeb-space-4)}} @media(max-width:640px){.soeb-hero{padding:var(--soeb-space-7) 0 var(--soeb-space-6)}} /* Breadcrumb trail opens the hero (1.1.4), matching the page hero. The top padding steps down so the trail sits near the header rather than floating in 64px of space, and the H1 drops its eyebrow gap. */ .soeb-hero__crumbs{font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.72);margin:0 0 var(--soeb-space-6)} .soeb-hero__crumbs + .soeb-hero__title{margin-top:0} .soeb-hero.soeb-hero--crumbs-top{padding-top:var(--soeb-space-6)} @media(max-width:640px){.soeb-hero.soeb-hero--crumbs-top{padding-top:var(--soeb-space-5)}.soeb-hero__crumbs{margin-bottom:var(--soeb-space-5)}} .soeb-hero__crumbs a{color:rgba(255,255,255,.72);text-decoration:none} .soeb-hero__crumbs a:hover{color:#fff;text-decoration:underline} .soeb-hero__crumbs a:focus-visible{outline:2px solid var(--soeb-mint);outline-offset:3px} .soeb-hero__crumbs .sep{margin:0 7px} .soeb-hero__crumbs-current{color:#fff;font-weight:600} /* ── 9c. HUB HERO — SPLIT VARIANT (.soeb-hero--split) ────────────────────── Opt-in two-column hero: text left, transparent PNG cutout right. Applied only when the hero part is passed an image, so the eight hubs that pass none render byte-identically to before. Nothing above is restated — ground, padding, container, type scale, CTA and breadcrumb trail all still come from §4 and §11. These rules add the grid, the media column and the glow, and nothing else. Global by unique class, per the v3.39.25 UCSS lesson — not scoped to .sat-page--solar, even though solar is currently the only caller. */ .soeb-hero--split{overflow:hidden} .soeb-hero--split .soeb-hero__wrap{display:grid;grid-template-columns:minmax(0,57fr) minmax(0,43fr); gap:var(--soeb-space-7);align-items:center} /* The media column is a positioning context for the glow and nothing else: no surface, no border, no radius — the cutout sits directly on the hero. */ /* The media box is capped at the image's own size and centred, so the glow — which is sized in percentages of this box — always tracks the cutout rather than the column. That matters most once the layout stacks and the column becomes full-width; without the cap the aura would balloon into a wash. */ .soeb-hero__media{position:relative;min-width:0;width:100%;max-width:620px;margin-inline:auto; display:flex;justify-content:center;align-items:center} /* Glow — a blurred elliptical radial gradient behind the cutout, sized a little larger than the silhouette so it reads as an aura rather than a shape. Deliberately low opacity: it exists to lift the dark roofline off the dark ground, not to be noticed. */ .soeb-hero__media::before{content:"";position:absolute;z-index:0;pointer-events:none; left:50%;top:52%;transform:translate(-50%,-50%);width:126%;padding-bottom:102%; background:radial-gradient(closest-side ellipse, rgba(79,199,149,.42) 0%, rgba(79,199,149,.30) 48%, rgba(79,199,149,.12) 72%, rgba(79,199,149,0) 100%); filter:blur(38px)} .soeb-hero__img{position:relative;z-index:1;display:block;width:100%;height:auto} /* Tablet and below — one column, text first, image beneath. The media column already follows the intro in the source, so the grid just collapses; no order property is needed and the reading order stays correct. */ @media(max-width:1024px){ .soeb-hero--split .soeb-hero__wrap{grid-template-columns:1fr;gap:var(--soeb-space-6)} .soeb-hero__media{max-width:420px} .soeb-hero__media::before{filter:blur(26px);opacity:.9} } @media(max-width:640px){ .soeb-hero__media{max-width:320px} .soeb-hero__media::before{filter:blur(20px);opacity:.8} } /* ══════════════════════════════════════════════════════════════════════════ 1.1.2 — MENUS Lives at the end of the last-loaded stylesheet so it layers cleanly over the older nav/footer blocks in style.css (which use #primary-nav and !important). Selectors match that specificity rather than adding more. ══════════════════════════════════════════════════════════════════════════ */ /* ── Primary nav: dropdown arrows ─────────────────────────────────────────── */ #primary-nav .menu-item-has-children{display:flex;align-items:center;flex-wrap:wrap} #primary-nav .submenu-toggle{ display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:24px;height:24px;margin:0 4px 0 -10px;padding:0; border:0;border-radius:6px;background:transparent !important;box-shadow:none !important; color:rgba(255,255,255,.82);cursor:pointer;-webkit-tap-highlight-color:transparent; transition:color .18s ease; } #primary-nav .submenu-toggle[hidden]{display:none} #primary-nav .submenu-toggle:hover, #primary-nav .menu-item-has-children:hover > .submenu-toggle, #primary-nav .submenu-toggle[aria-expanded="true"]{color:var(--soeb-mint)} #primary-nav .submenu-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px} #primary-nav .submenu-toggle__icon{display:block;transition:transform .18s ease} #primary-nav .submenu-toggle[aria-expanded="true"] .submenu-toggle__icon{transform:rotate(180deg)} /* Open state set by main.js (click / keyboard). Hover-to-open on desktop is unchanged from style.css. */ #primary-nav li.is-open > .sub-menu{display:flex !important} /* ── Nested levels (3rd level and deeper): accordion inside the dropdown ── */ #primary-nav .sub-menu .menu-item-has-children > a{flex:1 1 auto;min-width:0} #primary-nav .sub-menu .submenu-toggle{width:32px;height:32px;margin:0 2px 0 0;border-radius:8px} #primary-nav .sub-menu .sub-menu{ position:static !important;transform:none !important; top:auto;left:auto;right:auto; flex:0 0 calc(100% - 8px);min-width:0 !important;width:auto; background:transparent !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important; border:0 !important;border-left:2px solid rgba(201,168,255,.3) !important; border-radius:0 !important;box-shadow:none !important; margin:0 0 6px 8px !important;padding:2px 0 2px 8px !important; } #primary-nav .sub-menu .sub-menu a{padding:8px 12px !important;font-size:.86rem} /* Nested levels never open on hover — only via the arrow / "#" parent. */ #primary-nav .sub-menu li:hover > .sub-menu{display:none !important} #primary-nav .sub-menu li.is-open > .sub-menu{display:flex !important} /* ── Touch devices + mobile drawer: tap-to-open only ─────────────────────── */ @media (max-width:768px), (hover:none){ #primary-nav li:hover > .sub-menu{display:none !important} #primary-nav li.is-open > .sub-menu{display:flex !important} } @media (max-width:768px){ #primary-nav .main-nav__list > .menu-item-has-children > a{flex:1 1 auto;min-width:0} #primary-nav .submenu-toggle, #primary-nav .sub-menu .submenu-toggle{width:40px;height:40px;margin:0;border-radius:10px} #primary-nav .main-nav__list > li > .sub-menu{flex:0 0 calc(100% - 6px)} } /* ── Pink accent links ("All Tariffs", "All Benefits", or any item given the menu-item--accent CSS class) — same pink as the "Get £50 credit" button. */ #primary-nav .menu-item--accent > a, #primary-nav .sub-menu .menu-item--accent > a, #primary-nav .sub-menu .menu-item--accent > a:hover, #primary-nav .sub-menu .menu-item--accent > a:focus, #primary-nav .sub-menu .menu-item--accent.current-menu-item > a{color:var(--soeb-cta) !important} #primary-nav .menu-item--accent > a:hover, #primary-nav .sub-menu .menu-item--accent > a:hover{text-decoration:underline !important;text-underline-offset:3px} /* ── Footer: menu-driven columns ────────────────────────────────────────── Each top-level item of the Footer Navigation menu is a column; its children are the column's links. Replaces the fixed Explore / Legal columns. */ .soeb-foot .footer-links{display:block} .soeb-foot .footer-menu{ display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:40px 48px;list-style:none; } .soeb-foot .footer-menu > li{min-width:0} .soeb-foot .footer-menu .sub-menu{display:flex;flex-direction:column;gap:9px} .soeb-foot .footer-menu .sub-menu .sub-menu{padding-left:12px !important;margin-top:9px !important;border-left:1px solid var(--soeb-line-dark)} /* Column headings: a top-level parent (link or "#" heading span). Same look as the old hard-coded "Explore" title. */ .soeb-foot .footer-menu > li.menu-item-has-children > a, .soeb-foot .footer-menu__heading{ display:block;margin:0 0 14px; color:var(--soeb-mint); font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:.72rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;font-weight:600; } .soeb-foot .footer-menu > li.menu-item-has-children > a:hover, .soeb-foot .footer-menu > li.menu-item-has-children > a:focus{color:#fff} @media (max-width:768px){ .soeb-foot .footer-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px} } @media (max-width:380px){ .soeb-foot .footer-menu{grid-template-columns:1fr} } /* Hamburger fix: main.js swaps the icon's on click, which detached the click target mid-event so the "click outside" handler closed the drawer the moment it opened when the icon itself was tapped. Clicks now always land on the button. */ #menu-toggle svg,.submenu-toggle svg{pointer-events:none}