/* ⚠⚠ NEVER USE `rem` IN THIS FILE. Found 2026-09-23, and it had quietly scaled the whole
* Powerhub brand layout to 62.5%.
*
* `vw-components.css` (the agency's compiled CSS) sets `html { font-size: 62.5% }`, so **the root
* font size on this site is 10px, not 16px**. The only override is `body,html{font-size:100%
* !important}` and that one is inside `@media print`, so it does nothing on screen. The site
* itself is px-based — there is exactly ONE `rem` font-size in the whole of `main.css` — so
* nothing else noticed.
*
* Every `rem` written here therefore resolved against 10px and came out at 62.5% of its intent:
* the hero's `min-height: 46rem` was 460px instead of 736px (live's hero is 1185px tall and this
* one was 751px), `padding-block: 11rem 3rem` was 110px/30px, and `.ph-hero__text` at
* `0.9375rem` rendered the hero's body copy at **9.375px**. All 47 values were converted to px
* at the size they were meant to be.
*
* Scoping cannot fix this — `rem` always resolves against the ROOT element, never an ancestor, so
* no `[data-brand='powerhub'] { font-size: … }` rule can rescue it. px is also what the rest of
* this site uses, so it is the consistent choice as well as the working one.
*
* ⚠ THE SAME APPLIES TO BOOTSTRAP 5's UTILITY CLASSES, which are rem-based and are also running
* at 62.5% here: `.h3` is 17.5px rather than 28px, `gap-2`/`p-4` are likewise small. That is
* pre-existing and site-wide, so it is NOT changed here — but it means a brand rule must set a
* size in px explicitly wherever the size actually matters, rather than leaning on a Bootstrap
* class. See `.ph-guided__question` below.
*/
/* Powerhub — the brand layer.
*
* Loaded by _Layout AFTER custom.css, and only for a page whose nearest ancestor declares
* brand=powerhub (Infrastructure/SiteBrand.cs). Everything here is scoped to
* [data-brand="powerhub"], so this file is inert on every other page of the site even though it
* is one stylesheet in one application.
*
* WHERE THE VALUES COME FROM. Lifted from live's own /css/powerhub_bundle.css, read 2026-09-18 —
* live already expresses its brand as custom properties, which is the thing powerhub/plan.md §4
* assumed and is why "a brand is variables, not a fork" holds here. The names are this project's,
* not live's: live has 40 properties named after the component that uses them
* (--ph-faq-h1-text-color), which is a palette that cannot be reused. These are five.
*
* ⚠ DEVIATION FROM plan.md §4, and the reason this file has two halves. The plan says a brand
* stylesheet may define "custom properties only". That assumed this site has a token layer to
* override; it does not — vw-components.css is the agency's compiled CSS with Bootstrap
* subtracted, and its colours are literals. So: the tokens, then a short list of scoped rules that
* apply them to the class names this site really uses. The second half is the debt, and it is
* measurable — every literal that gets tokenised in vw-components.css deletes a rule from here.
* The property that actually mattered survives: this file touches no markup, so no block gets a
* second copy of itself.
*
* ⚠ TWO THINGS THE PLAN GOT WRONG, MEASURED 2026-09-21 WHILE BUILDING THIS.
*
* 1. "Titillium Web is the one asset Powerhub adds. Self-host it rather than hitting Google
* Fonts" — it is ALREADY self-hosted and already the whole site's typeface.
* wwwroot/fonts/titilliumweb-{light,regular,semibold,bold}.* have been there since the
* agency's CSS was extracted, registered as font-family "titillium" in vw-components.css and
* applied site-wide. Powerhub and vanwerven.nl share a typeface; there is nothing to add, and
* the three woff2 files this pass downloaded from Google were deleted again.
*
* 2. Several obvious-looking overrides are no-ops, because the two brands already share more
* than the plan assumed: the base link colour is #82bf5a — Powerhub's green exactly — and
* .section--grey is already #eee against Powerhub's #ededed. Rules for those are left OUT
* rather than written and left dead, so what remains here is the real difference and nothing
* else.
*
* WHAT IS NOT DONE YET. Live's footer is three bands (green, a photo, warm grey); this renders
* the site's own footer with Powerhub's colours on it. Live's hero puts its h1 in a white box;
* this puts white text straight on the photo. Both are §6 step 5, with the pages.
*/
/* ⚠ THE ROOT FONT SIZE, and it is the second half of the 62.5% story.
*
* `_Layout` loads the COMPLETE Bootstrap 5.3.3 from jsDelivr, and `vw-components.css` loads after
* it and sets `html { font-size: 62.5% }`. Bootstrap is almost entirely rem-based, so **every
* Bootstrap component and utility on this site renders at 62.5%**. Measured on the FAQ:
* `.accordion-button` came out `padding: 10px 12.5px; font-size: 10px` — Bootstrap's own
* `1rem 1.25rem` and `1rem` — against live's 16px/20px/16px, which is why the rebuild's accordion
* rows were 33px tall where live's are 53px, and why its question text was 10px.
*
* The same 0.625 factor was behind the option pills' padding, the `gap-*` between them, the
* container gutter (`--bs-gutter-x: 1.5rem` → 15px instead of 24px) and `.h3` (17.5px, not 28px).
*
* WHY RESETTING IT HERE IS THE RIGHT FIX RATHER THAN A RISK:
* - **It is what live does.** powerhub.vanwerven.nl loads only Bootstrap 5 and its root is 16px,
* measured. Matching live's layout means matching the CSS environment live's markup was
* written for; re-implementing Bootstrap components in px here would be fighting it.
* - **It is scoped to Powerhub and cannot leak.** `data-brand` is on the `` element itself
* (``, from SiteBrand), so this selector matches only
* pages under the Powerhub subtree. vanwerven.nl and Herms keep their 10px root exactly.
* - **The loaded project CSS barely uses rem.** `vw-components.css` has 8 rem units,
* `vw-bs5.css` 6, `custom.css` 1 — and everything else is px. Of those, the only font-size is
* `.waste-acceptance-form hr:before { font-size: 1.8rem }`, a vanwerven.nl form that does not
* exist on Powerhub. The rest are small spacings, and where they matter (the container gutter)
* the new value is live's value.
* - **This file is px throughout**, so nothing written here moves. See the banner at the top.
*
* `main.css` and `site.css` are NOT loaded on this site — checked against the rendered
* list — so their rem usage (8 and 164) is irrelevant. Do not be alarmed by grepping them.
*/
html[data-brand='powerhub'] {
font-size: 100%;
}
/* ── The tokens ─────────────────────────────────────────────────────────────── */
[data-brand='powerhub'] {
/* Live's palette, by role rather than by component.
* green #82bf5a the brand. Section headings, the footer rule, selected states.
* Also vanwerven.nl's accent already — the two really are the same green.
* dark #303030 the h1 colour, and the text colour on yellow.
* yellow #f6df00 the one call to action. Deliberately scarce: on live it is the form's
* forward buttons and nothing else, which is what makes it read as "go".
* warm #786e65 the legal bar and the customer names under the case quotes. Already the
* base site's secondary colour, kept as a token so the footer reads as a
* decision rather than a coincidence.
* surface #ededed card and accordion backgrounds. */
--vw-brand: #82bf5a;
--vw-brand-ink: #303030;
--vw-brand-cta: #f6df00;
--vw-brand-warm: #786e65;
--vw-brand-surface: #ededed;
}
/* ── Applying them ──────────────────────────────────────────────────────────── */
/* Live colours every section heading green and leaves the h1 dark — the inversion of what most
sites do, and the single most recognisable thing about the brand. */
[data-brand='powerhub'] h2,
[data-brand='powerhub'] .section__heading {
color: var(--vw-brand);
}
/* The base hero h1 is green (.imageheader__heading, #82bf5a) straight on the photo. Over
Powerhub's building-site background that loses against the sand, so it goes white — the same
answer live reaches by putting the heading in a white box instead. Provisional: when the hero
is built properly in §6 step 5 this may become live's box. */
[data-brand='powerhub'] .imageheader__heading,
[data-brand='powerhub'] .imageheader__text {
color: #fff;
}
/* The base primary button is green on white text. Live's Powerhub CTA is yellow on dark — the
only place the yellow appears, which is what gives it its weight. */
[data-brand='powerhub'] .btn--primary,
[data-brand='powerhub'] .btn.primary {
background-color: var(--vw-brand-cta);
color: var(--vw-brand-ink);
font-weight: 700;
}
[data-brand='powerhub'] .btn--primary:hover,
[data-brand='powerhub'] .btn.primary:hover {
background-color: #ded000;
}
/* The base secondary button is a transparent pill with a warm border, and its hover is a warm
panel sliding in from the left (.btn--default:after). Both halves have to move together or
the hover slides warm grey over green. */
[data-brand='powerhub'] .btn--default {
border-color: var(--vw-brand);
color: var(--vw-brand);
}
[data-brand='powerhub'] .btn--default:after {
background: var(--vw-brand);
}
[data-brand='powerhub'] .btn--default:hover {
color: #fff;
}
/* The guided form's options are Bootstrap btn-check radios, so the selected state is
:checked + label and needs no class from us. Live inverts the colours on select. */
[data-brand='powerhub'] .btn-check:checked + .vw-guided__option {
background-color: var(--vw-brand);
border-color: var(--vw-brand);
color: #fff;
}
[data-brand='powerhub'] .accordion-button {
background-color: var(--vw-brand-surface);
color: var(--vw-brand-ink);
}
[data-brand='powerhub'] .accordion-button:not(.collapsed) {
background-color: var(--vw-brand);
color: #fff;
}
/* The numbered circle in front of each process step. */
[data-brand='powerhub'] .step-number {
color: #fff;
background-color: var(--vw-brand);
}
/* ⚠ The footer is NOT given a background here, and that is the fix for a real bug rather than a
preference. `.footer` is `height: 43px` with floated children that overflow it — harmless while
it is transparent on white, but painting it produces a 43px band with the phone number and the
mail address hanging out below the colour. Measured 2026-09-21. What is safe to brand is the
rule above it and the two contact pills; the legal bar (.footer__main) is already #786e65,
which is live's own footer row 3, so it needs nothing at all. */
[data-brand='powerhub'] .footer .container {
border-top-color: var(--vw-brand);
}
[data-brand='powerhub'] .footer__col .footer__tel,
[data-brand='powerhub'] .footer__col .footer__mail {
border-color: var(--vw-brand);
color: var(--vw-brand);
}
[data-brand='powerhub'] .footer__col .footer__tel:hover,
[data-brand='powerhub'] .footer__col .footer__mail:hover {
background: var(--vw-brand);
color: #fff;
}
/* ═══════════════════════════════════════════════════════════════════════════
* THE LAYOUT HALF — added 2026-09-21.
*
* Everything above this line is the brand-as-variables file plan.md §4 asked for. Everything
* below it exists because the user reversed that decision for the visual layer on 2026-09-21:
* Powerhub keeps the microsite's own layout, so it gets its own header and its own hero markup
* (Views/brand/powerhub/**) and those need rules that no vanwerven.nl class name covers.
*
* The two halves are kept apart on purpose. The half above is deletable the day
* vw-components.css is tokenised; the half below is Powerhub's own and is deletable only if the
* brand goes back to being a re-skin. Nothing below is scoped any more loosely than anything
* above: every selector still starts at [data-brand='powerhub'], so this file remains inert on
* the other two sites even though all three share one application and one stylesheet pipeline.
*
* MEASUREMENTS ARE LIVE'S. Taken from /css/powerhub_bundle.css (saved as
* .planning/powerhub/source/powerhub_bundle.css) plus the Bootstrap utilities in live's markup:
* the logo is 70px, the panel is 75vh, the card carries `box-shadow: 0 3px 20px #00000065`, and
* the product cut-out is shifted right by `calc(-2 * 48px)`.
* ═══════════════════════════════════════════════════════════════════════════ */
/* ── The header ─────────────────────────────────────────────────────────────
* _Layout renders the header before , so it is lifted out of the flow and placed over
* whatever follows — on the homepage the hero carousel, on a detail page the photo header.
* That is live's arrangement, where the nav sits inside the header image. */
[data-brand='powerhub'] .ph-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
[data-brand='powerhub'] .ph-nav__logo {
height: 70px;
width: auto;
border: 2px solid #fff;
box-shadow: 0 8px 16px rgb(0 0 0 / 15%);
}
/* Both the burger and the close button. Live makes these `.btn.btn-primary` and then overrides
the background, which leaves Bootstrap's blue focus ring on a green button. */
[data-brand='powerhub'] .ph-nav__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px;
border: 2px solid #fff;
border-radius: 6px;
color: #fff;
line-height: 0;
}
[data-brand='powerhub'] .ph-nav__toggle--open {
background-color: var(--vw-brand);
}
[data-brand='powerhub'] .ph-nav__toggle--close {
background-color: var(--vw-brand-ink);
}
[data-brand='powerhub'] .ph-nav__toggle:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
box-shadow: none;
}
/* The overlay. Live: absolute, right 0, top 0, 75vh tall, the full viewport wide, green. */
[data-brand='powerhub'] .ph-nav__panel {
position: absolute;
z-index: 1001;
top: 0;
right: 0;
width: 100vw;
height: 75vh;
background-color: var(--vw-brand);
}
[data-brand='powerhub'] .ph-nav__panel-inner {
height: 75%;
width: 75%;
margin-inline: auto;
}
[data-brand='powerhub'] .ph-nav__link {
text-decoration: none;
color: #fff;
}
[data-brand='powerhub'] .ph-nav__link:hover,
[data-brand='powerhub'] .ph-nav__link:focus-visible {
color: var(--vw-brand-ink);
}
/* ── The hero ───────────────────────────────────────────────────────────────
* The carousel fills the section rather than being given a height in pixels by a script, which
* is what live does (`--ph-hp-header-v2-nav-container-height`, written on every resize). */
[data-brand='powerhub'] .ph-hero {
position: relative;
overflow: hidden;
/* Clears the header, which is lifted out of the flow above. Live reaches the same figure by
stacking the nav row and the content row inside one container. */
padding-block: 112px 32px;
}
@media (min-width: 992px) {
[data-brand='powerhub'] .ph-hero {
padding-block: 176px 48px;
min-height: 736px;
}
}
[data-brand='powerhub'] .ph-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
[data-brand='powerhub'] .ph-hero__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
[data-brand='powerhub'] .ph-hero__inner {
position: relative;
z-index: 1;
}
[data-brand='powerhub'] .ph-hero__indicators {
z-index: 2;
}
/* The white card. Live's shadow, live's colours: dark h1, green product line.
⚠ position + z-index are load-bearing, not decoration: the product cut-out beside it is
`position: relative` (it is shifted left to tuck behind this card), and a positioned element
paints above an unpositioned one no matter what the source order says. Without these two
lines the cut-out was drawn OVER the card and straight through the heading. */
[data-brand='powerhub'] .ph-hero__card {
background-color: #fff;
box-shadow: 0 3px 20px rgb(0 0 0 / 40%);
position: relative;
z-index: 2;
}
[data-brand='powerhub'] .ph-hero__title {
color: var(--vw-brand-ink);
}
[data-brand='powerhub'] .ph-hero__subtitle {
color: var(--vw-brand);
}
[data-brand='powerhub'] .ph-hero__text {
color: #000;
font-size: 15px;
}
[data-brand='powerhub'] .ph-hero__text p:last-child {
margin-bottom: 0;
}
/* Live shifts the cut-out right so it tucks under the card's left edge — about 20px of overlap,
measured on live at 1440.
⚠ THE OFFSET IS IN px AND MUST STAY THERE. It was `calc(-2 * 3rem)`, which against this site's
10px root was -60px — and -60px is what it was eyeballed at. The blanket rem→px conversion
turned it into -96px, which buried a third of the cut-out under the card. So this one is not
"0.75 of what a 16px root would give": it is the number that was actually being looked at.
z-index keeps it behind the card; see .ph-hero__card above. */
@media (min-width: 992px) {
[data-brand='powerhub'] .ph-hero__photo {
position: relative;
right: -60px;
z-index: 1;
}
}
/* ── The yellow pill ────────────────────────────────────────────────────────
* Powerhub's own button, used in the hero and by the guided form's step controls. Named
* .ph-btn rather than reusing .btn--primary because it is a different shape, not a different
* colour: live's is a Bootstrap pill (rounded-5, p-3), the site's is its own component. */
[data-brand='powerhub'] .ph-btn--yellow {
background-color: var(--vw-brand-cta);
color: var(--vw-brand-ink);
font-weight: 700;
border: 0;
}
[data-brand='powerhub'] .ph-btn--yellow:hover,
[data-brand='powerhub'] .ph-btn--yellow:focus-visible {
background-color: #ded000;
color: var(--vw-brand-ink);
}
/* ── The process ladder ─────────────────────────────────────────────────────
* Views/brand/powerhub/…/processStepsBlock.cshtml. Live's own values:
* --ph-pi-step-number-* is green on white, --ph-pi-step-text-* is #ededed on #303030, and the
* heading beside the ladder is ink rather than the green every other section heading gets. */
[data-brand='powerhub'] .ph-process__ladder {
margin-bottom: 0;
}
[data-brand='powerhub'] .ph-process__number {
color: #fff;
background-color: var(--vw-brand);
/* A circle only stays a circle if it cannot be squeezed by its flex row. */
flex: 0 0 auto;
/* ⚠ EXPLICIT 75px SQUARE, and `aspect-ratio` is not enough on its own. With `min-width: 80px`
and the digit's own line box inside `p-4`'s 24px padding, the box measured **80×106** — an
oval, not a circle, because aspect-ratio yields to content that is taller than the ratio
allows. 75px is live's own figure, measured on .ph-pi-step-number; the padding goes and the
font is sized to sit inside the circle instead of defining it.
This also took 31px per row off the ladder: it was 145px of pitch against live's 83px. */
width: 75px;
height: 75px;
padding: 0;
font-size: 40px;
line-height: 1;
/* ON TOP of the pill. The pill follows it in the DOM and is pulled back over it by a
negative margin, so without this it paints across the circle and the number shows as a
crescent — which is exactly how the first screenshot came out. */
position: relative;
z-index: 1;
}
[data-brand='powerhub'] .ph-process__text {
background-color: var(--vw-brand-surface);
color: var(--vw-brand-ink);
font-weight: 600;
/* The pill tucks under the circle so the two read as one shape, exactly as live's do — its
ps-5 / pe-4 padding is what keeps the text clear of the overlap. */
margin-left: -40px;
padding-left: 56px;
}
[data-brand='powerhub'] .ph-process__text--left {
margin-left: 0;
margin-right: -40px;
padding-left: 16px;
padding-right: 56px;
}
[data-brand='powerhub'] .ph-process__text p:last-child {
margin-bottom: 0;
}
/* The column beside the ladder. Live TOP-ALIGNS it with step 1 and gives it no padding of its own.
⚠ The fix is in the VIEW, not here: `justify-content-center h-100 p-5` came off the markup,
because every Bootstrap spacing and flex utility carries `!important` and a brand rule cannot
outrank that however specific it is — measured, after this rule alone left the padding at 48px.
These two lines stay as a floor for the case where the classes come back. */
[data-brand='powerhub'] .ph-process__aside {
justify-content: flex-start;
padding: 0;
}
/* Live leaves this one heading dark while every other section heading is green — it sits on the
grey band beside the ladder rather than above a block, and green there competes with seven
green circles. */
[data-brand='powerhub'] .ph-process__heading {
color: var(--vw-brand-ink);
}
/* ── The footer band ────────────────────────────────────────────────────────
* Views/brand/powerhub/Partials/_Footer.cshtml. Live's row 2 is a photograph with white text
* over it; row 3 is #786e65, which is the warm grey this site's own legal bar already uses. */
[data-brand='powerhub'] .ph-footer__band {
position: relative;
overflow: hidden;
}
[data-brand='powerhub'] .ph-footer__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
[data-brand='powerhub'] .ph-footer__inner {
position: relative;
z-index: 1;
padding-block: 48px;
}
/* White on a photograph needs a shadow, not a guess: live paints one on all four sides
(`text-shadow-all-sides`) because the background is a building site and parts of it are
pale. Same approach, one declaration. */
[data-brand='powerhub'] .ph-footer__title,
[data-brand='powerhub'] .ph-footer__contact {
color: #fff;
text-shadow: 0 0 6px rgb(0 0 0 / 70%), 0 1px 2px rgb(0 0 0 / 90%);
}
[data-brand='powerhub'] .ph-footer__contact {
display: flex;
flex-direction: column;
gap: 4px;
}
[data-brand='powerhub'] .ph-footer__contact a {
color: #fff;
text-decoration: underline;
}
[data-brand='powerhub'] .ph-footer__contact address {
font-style: normal;
}
[data-brand='powerhub'] .ph-footer__legal {
background-color: var(--vw-brand-warm);
color: #fff;
padding-block: 8px;
}
/* ── Bootstrap 5's xl columns have to be re-asserted for Powerhub ───────────
* ⚠ THIS IS A COLLISION, NOT A PREFERENCE, AND IT COST AN AFTERNOON. `vw-components.css` — the
* agency's compiled CSS — still contains Bootstrap 3's grid, media-wrapped with BOOTSTRAP 3's
* breakpoints (sm 768, md 992, lg 1200), and it loads AFTER Bootstrap 5. The class NAMES are
* the same and the specificity is the same, so above 992px `.col-md-10` (legacy, still active
* because BS3's md starts at 992) beats `.col-xl-6` (BS5, from 1200) purely on source order.
*
* It is invisible until an element carries BOTH — which live's Powerhub markup does constantly,
* because live loads only Bootstrap 5. The process ladder came out full width with its heading
* stacked underneath instead of beside it, and no rule anywhere looked wrong.
*
* Measured 2026-09-21. The percentages below are Bootstrap 5's own, re-declared with the brand
* attribute so they outrank the legacy rules — scoped, so vanwerven.nl's layout cannot move.
* The real fix is to delete the grid from vw-components.css, which is generated; that is a
* vanwerven.nl-wide change and that site is closed, so it is a backlog item, not this pass.
* Offsets need no entry: the legacy file uses BS3's `.col-lg-offset-1` naming, which does not
* collide with BS5's `.offset-xl-1`. */
@media (min-width: 1200px) {
[data-brand='powerhub'] .col-xl-1 { flex: 0 0 auto; width: 8.3333333333%; }
[data-brand='powerhub'] .col-xl-2 { flex: 0 0 auto; width: 16.6666666667%; }
[data-brand='powerhub'] .col-xl-3 { flex: 0 0 auto; width: 25%; }
[data-brand='powerhub'] .col-xl-4 { flex: 0 0 auto; width: 33.3333333333%; }
[data-brand='powerhub'] .col-xl-5 { flex: 0 0 auto; width: 41.6666666667%; }
[data-brand='powerhub'] .col-xl-6 { flex: 0 0 auto; width: 50%; }
[data-brand='powerhub'] .col-xl-7 { flex: 0 0 auto; width: 58.3333333333%; }
[data-brand='powerhub'] .col-xl-8 { flex: 0 0 auto; width: 66.6666666667%; }
[data-brand='powerhub'] .col-xl-9 { flex: 0 0 auto; width: 75%; }
[data-brand='powerhub'] .col-xl-10 { flex: 0 0 auto; width: 83.3333333333%; }
[data-brand='powerhub'] .col-xl-11 { flex: 0 0 auto; width: 91.6666666667%; }
[data-brand='powerhub'] .col-xl-12 { flex: 0 0 auto; width: 100%; }
}
/* ── The guided form panel and the green band ───────────────────────────────
* Added 2026-09-23 with the last two homepage sections. Both pair with a view under
* Views/brand/powerhub/…; neither rule fires anywhere else, because everything here still
* starts at [data-brand='powerhub'].
*
* Live's colours, by name: the panel and the band are both --ph-h2-color /
* --ph-footer-row-1-background-color, and those are the same #82bf5a the tokens above already
* call --vw-brand. The forward buttons are --ph-form-*-button-color, which is --vw-brand-cta.
* So nothing new is defined; this is arrangement on top of the palette. */
/* The green card. Live gives it a drop shadow and min-height:50vh; the height is left out
deliberately — it is there to stop live's Bootstrap carousel jumping between steps of
different lengths, and there is no carousel here. A tall empty card on a phone is worse
than a card that fits its question. */
[data-brand='powerhub'] .ph-guided {
background-color: var(--vw-brand);
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.4);
border-radius: 16px;
color: #fff;
padding: 32px 16px;
}
@media (min-width: 992px) {
[data-brand='powerhub'] .ph-guided {
padding: 48px;
}
}
[data-brand='powerhub'] .ph-guided__heading,
[data-brand='powerhub'] .ph-guided__question,
[data-brand='powerhub'] .ph-guided__intro {
color: #fff;
}
/* Sized in px, not left to the Bootstrap `.h3` the view also carries: that class is `1.75rem`,
which against this site's 10px root is 17.5px. Live's question is a plain
at 32px and its
panel heading is an
, so the rebuild's questions were rendering at just over half live's
size. See the banner at the top of this file. */
[data-brand='powerhub'] .ph-guided__heading {
font-size: 32px;
line-height: 1.2;
margin-bottom: 24px;
}
[data-brand='powerhub'] .ph-guided__question {
font-size: 24px;
line-height: 1.3;
}
/* The question is a