/*
Theme Name: Sustainable Hosting Green
Theme URI: https://sustainablehosting.eu/
Author: Sustainable Hosting
Author URI: https://sustainablehosting.eu/
Description: Dark-first, compact, low-carbon block theme for Sustainable Hosting - a carbon-neutral (carbon-negative since 2021) web host based in Antwerp, Belgium. One self-hosted variable font, no external CDNs beyond two independent verification badges, GDPR-forward, WCAG AA contrast in both dark and light mode. Every section of every page is an ordinary, editable block.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sushost-green
Tags: block-theme, full-site-editing, dark-mode, accessibility-ready, one-column, custom-colors, custom-menu, translation-ready
*/
/* ==========================================================================
WHAT IS IN THIS FILE (plain-English table of contents)
==========================================================================
Colours, fonts, spacing and layout widths are NOT here - they live in
theme.json, which is the "main control panel". See THEME-NOTES.md.
This file only holds the things theme.json cannot express.
1. LIGHT MODE COLOUR OVERRIDES ... the whole light theme, in one block.
Dark mode is the default; light mode
just re-points the same colour names.
2. DARK/LIGHT PICTURE SWAP ...... shows the right picture for the mode.
3. SKIP LINK + SCREEN READER TEXT for keyboard and screen reader users.
4. FOCUS RINGS .................. the visible outline when tabbing. A11y.
5. SITE HEADER .................. sticky bar, blur, accent underline, logo.
6. MAIN MENU .................... the WordPress Navigation block, restyled:
desktop dropdowns + mobile hamburger.
7. LANGUAGE SWITCHER ............ the little globe/EN dropdown.
8. DARK/LIGHT SWITCH ............ the little sun/moon button.
9. HERO ......................... front-page banner + headline.
10. SECTION HELPERS .............. compact spacing, eyebrows, THE RAINBOW
DIVIDER, grids, block-margin resets.
11. CARDS ....................... the bordered boxes that lift on hover.
12. PLANS ....................... the three hosting plan columns.
13. FACT FIGURES ................ big numbers (kWh, years) blocks.
14. TABLES, QUOTES, FAQ ......... the remaining content blocks.
15. BADGES ...................... green badges + the ASBN recognition badge.
15b. TRANSLATION NOTICE ......... the "this page was machine-translated"
panel on the translated legal pages.
16. SITE FOOTER ................. columns, legal note, "English is latest".
17. RESPONSIVE .................. what changes on phones and tablets.
18. MOTION + PRINT .............. respects "reduce motion", prints cleanly.
A NOTE ON WHY SOME SELECTORS LOOK OVER-LONG
-------------------------------------------
Since version 1.1 the sections of this site are built from WordPress's own
blocks rather than hand-written HTML, so some rules have to be more
specific than WordPress's own defaults in order to win. Where a selector
looks needlessly long, that is why. There is no "!important" anywhere in
this file, deliberately - the specificity is doing the work instead, which
is much easier to override later if you need to.
Anything you add yourself should go in assets/css/custom.css instead of
this file - that way a theme update can never wipe it out.
========================================================================== */
/* ==========================================================================
1. LIGHT MODE COLOUR OVERRIDES
--------------------------------------------------------------------------
Dark mode is the site default and its colours are set in theme.json.
When a visitor clicks the sun/moon button, JavaScript puts
data-theme="light" on the tag, and everything below takes over.
IMPORTANT: these are the SAME colour names as in theme.json, just with
light values. If you add or change a colour in theme.json, add or change
its light twin here too, or light mode will look wrong.
Every pair below was contrast-checked to WCAG AA (4.5:1 or better for
text). If you change one, re-check it before shipping.
========================================================================== */
:root[data-theme="light"] {
--wp--preset--color--base: #f6faf9; /* page background */
--wp--preset--color--surface: #ffffff; /* cards, panels */
--wp--preset--color--surface-2: #eaf3f1; /* raised / hover / table head */
--wp--preset--color--contrast: #0b1f24; /* main text */
--wp--preset--color--muted: #455c63; /* captions, meta text */
--wp--preset--color--primary: #0a6a5f; /* links + buttons (darker teal so it passes contrast on white) */
--wp--preset--color--primary-deep: #064a42; /* borders, gradients */
--wp--preset--color--secondary: #1c6b45; /* green highlights */
--wp--preset--color--on-primary: #ffffff; /* text on a teal button */
--wp--preset--color--border: #d5e3e2; /* hairlines, card edges */
/* Shadows are much softer on a light background. */
--wp--preset--shadow--card: 0 1px 2px rgba(11,31,36,0.08);
--wp--preset--shadow--lifted: 0 8px 24px rgba(11,31,36,0.12);
--sh-header-bg: rgba(246,250,249,0.82);
/*
* THE RAINBOW DIVIDER, light-mode versions.
*
* Four of the six colours are darkened here. The bright dark-mode red,
* orange, yellow and green all but vanish against a near-white page -
* measured, the yellow came out at 1.6:1, which reads as a gap in the bar
* rather than a segment of it. These values were picked to sit at 3.5:1 or
* better against this page background while still obviously being red,
* orange, yellow and green.
*
* The one exception is yellow, at 2.8:1. Yellow is inherently a very
* bright colour; pushing it past 3:1 against white turns it brown, which
* would stop it being a rainbow. A real flag on a white wall has exactly
* the same pale-yellow stripe. The divider is decorative and carries no
* information, so no accessibility rule is being bent - but it is a
* deliberate choice rather than an oversight, hence the note.
*
* Blue and violet already pass in both modes and are not overridden.
*/
--sh-rule-1: #d1373c; /* red - 4.6:1 here */
--sh-rule-2: #dd5c08; /* orange - 3.6:1 here */
--sh-rule-3: #bf8f00; /* yellow - 2.8:1 here; see note above */
--sh-rule-4: #268a59; /* green - 4.1:1 here */
/*
* NOTE: the hero band deliberately stays DARK in light mode, and the
* hero text stays pale. That is why --sh-hero-text and the hero-veil
* gradient are NOT overridden here.
*
* The reason is measured, not aesthetic. The hero illustration is a dusk
* scene, so it is dark. Lightening the veil over it and switching to dark
* text drops the contrast at the top of the hero to about 2.7:1, which
* fails WCAG AA. Keeping the dark veil holds it above 16:1 everywhere in
* both modes.
*
* If you ever swap the hero for a BRIGHT image, that reasoning flips -
* you would then want a light veil and dark text. Re-measure before you
* change it either way.
*/
}
/* Dark mode versions of the "helper" variables used just above, plus the
six divider colours (see section 10). */
:root {
--sh-hero-text: #eef7f5;
--sh-header-bg: rgba(10,20,24,0.80);
--sh-radius: 12px;
--sh-transition: 0.2s ease;
/* THE RAINBOW DIVIDER. Six flat colours, left to right. Change them here
and every divider on the site changes. */
--sh-rule-1: #e5484d; /* red */
--sh-rule-2: #f76b15; /* orange */
--sh-rule-3: #f2c200; /* yellow */
--sh-rule-4: #30a46c; /* green */
--sh-rule-5: #3e63dd; /* blue */
--sh-rule-6: #8e4ec6; /* violet */
}
/* Tell the browser which colour scheme we are in, so that scrollbars,
form controls and text-selection colours match. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
/* ==========================================================================
2. DARK/LIGHT PICTURE SWAP
--------------------------------------------------------------------------
Some pictures need a different version in each mode - at the moment that
is the ASBN recognition badge, which has a white version for the dark site
and a dark slate version for light mode. Both are in the page; CSS shows
one and hides the other, so there is no flicker and no JavaScript.
TO USE THIS ON A NEW PICTURE: put two tags next to each other and
give them class="sh-asset sh-asset--dark" and class="sh-asset sh-asset--light".
The light one should have alt="" and aria-hidden="true", so screen readers
do not announce the same picture twice.
---- A WARNING WORTH READING ----
The version of this that shipped in 1.0 was broken, and it is an easy
mistake to repeat. It had a rule ".sh-logo img { display: block }" as well
as ".sh-logo__light { display: none }". The first selector is MORE SPECIFIC
(a class plus an element beats a class on its own), so it won, both
pictures were shown at once, and the header logo rendered at double height.
So: never write a "display" rule that matches BOTH pictures. Set the size
with one rule and the visibility with another, as below.
========================================================================== */
/* Visibility only. Nothing else in this file sets "display" on .sh-asset. */
.sh-asset--dark { display: block; }
.sh-asset--light { display: none; }
:root[data-theme="light"] .sh-asset--dark { display: none; }
:root[data-theme="light"] .sh-asset--light { display: block; }
/* ==========================================================================
3. SKIP LINK + SCREEN READER TEXT
--------------------------------------------------------------------------
The skip link is invisible until a keyboard user presses Tab, then it
appears top-left and jumps them straight past the menu into the page.
Do not remove either of these - they are basic accessibility.
========================================================================== */
.sh-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 999;
padding: 0.6rem 1rem;
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--on-primary);
font-weight: 700;
border-radius: 0 0 var(--sh-radius) 0;
text-decoration: none;
}
.sh-skip-link:focus { left: 0; }
/* Text that only screen readers should get. WordPress uses this class name
too, so it is defined here in case core's copy is not loaded. */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
border: 0;
white-space: nowrap;
}
/* ==========================================================================
4. FOCUS RINGS
--------------------------------------------------------------------------
The outline you see when moving around with the Tab key. Uses the teal
accent, which passes the 3:1 contrast rule against every background in
this theme. :focus-visible means mouse users do not see it on click.
========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--wp--preset--color--primary);
outline-offset: 2px;
border-radius: 4px;
}
/* ==========================================================================
5. SITE HEADER
--------------------------------------------------------------------------
Sticky bar at the top. Frosted-glass blur, 2px teal underline.
Height is deliberately small to keep more content on screen.
THE LOGO is the WordPress Site Logo block, so it is changed by clicking it
in the Site Editor, not by editing a file. Its height is set here, once.
========================================================================== */
.sh-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--sh-header-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 2px solid var(--wp--preset--color--primary-deep);
}
.sh-header__inner {
max-width: var(--wp--style--global--wide-size, 1200px);
margin-inline: auto;
padding: 0.5rem 0;
display: flex;
align-items: center;
gap: 0.6rem;
}
/* Undo the vertical gaps WordPress puts between blocks: the header is a row. */
.sh-header__inner > * { margin-block: 0; }
/* Pushes the menu and the buttons over to the right of the logo. This used to
be an empty spacer
in the header markup; doing it in CSS means there
is no invisible block for an editor to wonder about. */
.sh-header__inner > .sh-nav { margin-left: auto; }
/* --- the logo --- */
/* Size only. See the warning in section 2 about not mixing size and
visibility rules on the same pictures. */
.sh-header .wp-block-site-logo { line-height: 0; flex: 0 0 auto; }
.sh-header .wp-block-site-logo a { display: block; width: auto; }
/*
* FOUR CLASSES DEEP ON PURPOSE. WordPress ships
* .wp-block-site-logo.is-default-size img { width: 120px }
* which is three classes plus an element, so a shorter selector than this one
* loses and the logo comes out about 27px tall. If you shorten this, check
* the header before you ship.
*/
.sh-header .sh-logo.wp-block-site-logo img.custom-logo {
height: 46px;
width: auto;
max-width: 100%;
}
/* --- the group of buttons and switches at the far right --- */
.sh-header__actions {
display: flex;
align-items: center;
gap: 0.4rem;
flex: 0 0 auto;
}
.sh-header__actions > * { margin-block: 0; }
/* The header's Button blocks are smaller than buttons in page content. */
.sh-header__buttons { gap: 0.4rem; margin-block: 0; }
.sh-header .wp-block-button__link {
padding: 0.45rem 0.85rem;
font-size: 0.85rem;
border-radius: 10px;
line-height: 1.2;
white-space: nowrap;
}
/* The quieter outlined button ("Client Services"). WordPress's outline style
just uses the surrounding text colour, which would make it white here; the
house style is a teal outline. */
.sh-header .is-style-outline .wp-block-button__link {
color: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary-deep);
border-width: 2px;
}
.sh-header .is-style-outline .wp-block-button__link:hover {
background: var(--wp--preset--color--surface-2);
color: var(--wp--preset--color--primary);
}
/*
* The "sh-btn" classes below are used by the two shortcode-rendered sections
* (the closing call to action, in functions.php). Page content uses ordinary
* Button blocks instead, which theme.json styles.
*/
.sh-btn {
display: inline-block;
padding: 0.6rem 1.2rem;
border-radius: 10px;
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--on-primary);
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
border: 2px solid transparent;
transition: background var(--sh-transition), transform var(--sh-transition);
}
.sh-btn:hover { background: var(--wp--preset--color--secondary); transform: translateY(-2px); }
.sh-btn--ghost {
background: transparent;
color: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary-deep);
}
.sh-btn--ghost:hover {
background: var(--wp--preset--color--surface-2);
color: var(--wp--preset--color--primary);
}
.sh-btnrow { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sh-btnrow--center { justify-content: center; }
/* ==========================================================================
6. MAIN MENU
--------------------------------------------------------------------------
This is WordPress's own Navigation block, which means THE MENU IS EDITED
IN wp-admin: Appearance -> Editor -> Navigation. Drag items, rename them,
add them, remove them. Nothing in this theme's files needs touching.
Everything below is only appearance. Two things it deliberately does NOT
touch, because WordPress handles them correctly already:
- opening a dropdown on hover AND on keyboard focus (no JavaScript);
- marking the current page with aria-current.
The block is set to "never" show WordPress's own mobile overlay, so that
this theme's own 1 KB script can run the hamburger instead of WordPress's
much heavier one. That is worth about 10 KB per page view on a site whose
whole point is being light.
========================================================================== */
.sh-nav { flex: 0 1 auto; }
.sh-nav .wp-block-navigation__container,
.sh-nav ul.wp-block-navigation__container {
gap: 0.1rem;
flex-wrap: wrap;
}
/*
* Every menu link, top level and dropdown alike.
*
* THE DOUBLED CLASS AND THE "nav." ARE BOTH NECESSARY. WordPress ships
* .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit }
* and separately forces the dropdown panel's colour to black. Between them,
* a shorter selector than this leaves the dropdown with black text on a dark
* navy panel, which is invisible. Do not shorten it without checking a
* dropdown in dark mode.
*/
nav.sh-nav .wp-block-navigation-item__content.wp-block-navigation-item__content,
.sh-nav .wp-block-navigation-item__content {
display: block;
padding: 0.45rem 0.55rem;
color: var(--wp--preset--color--contrast);
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
border-radius: 8px;
transition: color var(--sh-transition), background var(--sh-transition);
}
.sh-nav .wp-block-navigation-item__content:hover,
.sh-nav .wp-block-navigation-item__content:focus {
color: var(--wp--preset--color--primary);
background: var(--wp--preset--color--surface-2);
text-decoration: none;
}
/* Marks the page you are currently on. WordPress adds this attribute itself. */
.sh-nav .wp-block-navigation-item__content[aria-current="page"] {
color: var(--wp--preset--color--primary);
}
/* The little arrow next to an item that has a dropdown. */
.sh-nav .wp-block-navigation__submenu-icon { opacity: 0.7; padding: 0; }
.sh-nav .wp-block-navigation__submenu-icon svg { width: 0.7em; height: 0.7em; }
/* --- the dropdown panels ---
Long selectors on purpose: WordPress's own rules for these are three
classes deep, so ours have to be four to win.
The explicit "color" matters: WordPress forces this panel to black text
(".wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container
{ color: #000 }"), which on our dark panel is unreadable. */
.sh-nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
min-width: 15rem;
background: var(--wp--preset--color--surface);
color: var(--wp--preset--color--contrast);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--sh-radius);
box-shadow: var(--wp--preset--shadow--lifted);
padding: 0.35rem;
}
/*
* OPEN THE DROPDOWN ON HOVER AND ON KEYBOARD FOCUS, IN PURE CSS.
*
* Worth understanding before touching. Modern WordPress opens these menus
* with JavaScript: it listens for pointer and keyboard events and flips
* aria-expanded on the little arrow button. There is NO CSS :hover rule in
* WordPress for it any more, which means that with JavaScript switched off
* the dropdowns do not open at all.
*
* The rule below puts the old CSS-only behaviour back alongside the
* JavaScript, so the menu still works with scripting disabled or still
* loading. The two do not fight: both want the panel open in exactly the
* same circumstances.
*
* The values are copied from WordPress's own "open" rule so the panel opens
* identically either way.
*/
.sh-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.sh-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
height: auto;
width: auto;
overflow: visible;
visibility: visible;
opacity: 1;
}
.sh-nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
font-weight: 500;
white-space: nowrap;
}
/* --- the hamburger button (hidden on desktop, shown on mobile) --- */
.sh-nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--wp--preset--color--border);
border-radius: 8px;
color: var(--wp--preset--color--contrast);
padding: 0.4rem 0.6rem;
cursor: pointer;
line-height: 1;
}
/* ==========================================================================
7. LANGUAGE SWITCHER
--------------------------------------------------------------------------
A plain / dropdown in the header, so it works with the
keyboard and with JavaScript switched off, for free.
It currently offers English only, because English is all the site has. The
markup is in parts/header.html with instructions for adding more. When
Polylang is switched on it should be replaced by Polylang's own switcher
block - these styles are written so that will look the same.
========================================================================== */
.sh-lang { position: relative; flex: 0 0 auto; }
.sh-lang__toggle {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.5rem;
border: 1px solid var(--wp--preset--color--border);
border-radius: 8px;
color: var(--wp--preset--color--contrast);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
list-style: none; /* hides the default triangle */
transition: border-color var(--sh-transition), color var(--sh-transition);
}
.sh-lang__toggle::-webkit-details-marker { display: none; }
.sh-lang__toggle:hover {
border-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary);
}
.sh-lang__caret { font-size: 0.6em; opacity: 0.7; }
.sh-lang__panel {
position: absolute;
right: 0;
top: calc(100% + 0.35rem);
z-index: 120;
min-width: 12rem;
background: var(--wp--preset--color--surface);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--sh-radius);
box-shadow: var(--wp--preset--shadow--lifted);
padding: 0.5rem 0.7rem;
}
.sh-lang__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.sh-lang__list a { color: var(--wp--preset--color--contrast); text-decoration: none; font-size: 0.9rem; }
.sh-lang__list a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }
/* The language you are already reading. Not a link, because clicking it
would do nothing useful. */
.sh-lang__current { font-size: 0.9rem; font-weight: 700; color: var(--wp--preset--color--primary); }
.sh-lang__soon {
margin: 0.45rem 0 0;
padding-top: 0.45rem;
border-top: 1px solid var(--wp--preset--color--border);
font-size: 0.78rem;
color: var(--wp--preset--color--muted);
}
/* ==========================================================================
8. DARK/LIGHT SWITCH
--------------------------------------------------------------------------
One button that shows a moon in dark mode and a sun in light mode.
The choice is remembered in the browser (localStorage), so returning
visitors get the mode they picked last time.
========================================================================== */
.sh-theme-toggle {
background: transparent;
border: 1px solid var(--wp--preset--color--border);
border-radius: 8px;
color: var(--wp--preset--color--contrast);
width: 2.2rem;
height: 2.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 0 0 auto;
transition: border-color var(--sh-transition), color var(--sh-transition);
}
.sh-theme-toggle:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.sh-theme-toggle svg { width: 1.1rem; height: 1.1rem; }
/* Show the moon in dark mode, the sun in light mode. */
.sh-theme-toggle .sh-icon-sun { display: none; }
:root[data-theme="light"] .sh-theme-toggle .sh-icon-sun { display: block; }
:root[data-theme="light"] .sh-theme-toggle .sh-icon-moon { display: none; }
/* ==========================================================================
9. HERO
--------------------------------------------------------------------------
The front-page banner. Kept SHORT on purpose (min-height 360px, not a
whole screen) so real content is visible without scrolling.
TO CHANGE THE HERO PICTURE: replace assets/images/hero-wind.svg, keeping
the name, or change the --sh-hero-image line below. The address there is
relative to THIS stylesheet, which is why it keeps working wherever the
site lives - do not turn it into a full web address.
The dark gradient on top is what keeps the headline readable. If you use a
very bright picture, darken the "hero-veil" gradient in theme.json.
========================================================================== */
.sh-hero {
--sh-hero-image: url('assets/images/hero-wind.svg');
position: relative;
min-height: 360px;
display: flex;
align-items: center;
overflow: hidden;
border-bottom: 1px solid var(--wp--preset--color--border);
}
.sh-hero > * { margin-block: 0; }
/*
* The picture and the dark gradient over it are drawn by CSS rather than by
* empty
, because that reads better on a phone and is easier for
screen readers to follow.
THE PRICES ARE ORDINARY EDITABLE TEXT NOW, and they appear in two places:
the Home page and the "Hosting plans and pricing" page. Change both.
========================================================================== */
.sh-plans { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.sh-plans > * { margin-block: 0; }
.sh-plan {
background: var(--wp--preset--color--surface);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--sh-radius);
padding: 1.2rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
height: 100%;
transition: border-color var(--sh-transition), transform var(--sh-transition);
}
.sh-plan > * { margin-block: 0; }
.sh-plan:hover { border-color: var(--wp--preset--color--primary); transform: translateY(-3px); }
/* Highlights the recommended plan with a teal edge. */
.sh-plan--featured { border-color: var(--wp--preset--color--primary); box-shadow: var(--wp--preset--shadow--card); }
.sh-plan__badge {
align-self: flex-start;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--on-primary);
background: var(--wp--preset--color--primary);
padding: 0.2rem 0.5rem;
border-radius: 999px;
margin: 0;
}
.sh-plan__name { margin: 0; font-size: 1.2rem; }
.sh-plan__pricing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.sh-plan__pricing > * { margin-block: 0; }
.sh-plan__price { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--wp--preset--color--primary); margin: 0; }
.sh-plan__per { font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--muted); margin: 0; }
.sh-plan__pitch { font-size: 0.93rem; margin: 0; }
.sh-plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.92rem; }
.sh-plan__list li { display: flex; gap: 0.5rem; align-items: baseline; }
/* The teal tick. It is decorative, so it is drawn in CSS and never read out. */
.sh-plan__list li::before { content: "\2713"; color: var(--wp--preset--color--primary); font-weight: 700; flex: 0 0 auto; }
.sh-plan__foot { margin-top: auto; padding-top: 0.3rem; }
.sh-plan__foot .wp-block-button__link { width: 100%; text-align: center; }
/* The "what is admin time" small print under the plans. */
.sh-smallprint { max-width: 80ch; }
.sh-smallprint > * { margin-block: 0; }
.sh-smallprint > * + * { margin-block-start: 0.5rem; }
/* ==========================================================================
13. FACT FIGURES
--------------------------------------------------------------------------
The row of big numbers (years carbon-neutral, kWh exported, etc).
========================================================================== */
.sh-facts { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sh-facts > * { margin-block: 0; }
.sh-fact {
text-align: center;
padding: 0.9rem 0.6rem;
background: var(--wp--preset--color--surface);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--sh-radius);
}
.sh-fact > * { margin-block: 0; }
.sh-fact__num { display: block; font-size: 1.7rem; font-weight: 800; color: var(--wp--preset--color--primary); line-height: 1.1; margin: 0; }
.sh-fact__label { display: block; font-size: 0.82rem; color: var(--wp--preset--color--muted); margin: 0.2rem 0 0; }
/* ==========================================================================
14. TABLES, QUOTES, FAQ
--------------------------------------------------------------------------
The remaining content blocks, styled to match everything else.
========================================================================== */
/* --- the electricity figures table --- */
.sh-table { margin: 0; }
.sh-table table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
/* WordPress's Table block puts its caption in a AFTER the table,
not in a
inside it. That is deliberate on our side too: a
hand-written
would make the block editor complain that the block
"contains unexpected content", which is exactly the sort of scare this
rebuild is trying to remove. */
.sh-table figcaption {
text-align: left;
font-size: 0.85rem;
color: var(--wp--preset--color--muted);
margin-top: 0.4rem;
}
.sh-table th,
.sh-table td { padding: 0.3rem 0; border: 0; text-align: left; }
/* WordPress puts a heavy 3px line under a table's header row. One hairline
in the theme's border colour suits this card better. */
.sh-table thead { border-bottom: 1px solid var(--wp--preset--color--border); }
.sh-table thead th { font-weight: 700; }
.sh-table tbody th { font-weight: 600; }
.sh-table .has-text-align-right { text-align: right; }
/* The net-export figure, which is the whole point of the table. */
.sh-table .sh-net { color: var(--wp--preset--color--primary); font-weight: 700; }
/* --- the client testimonial --- */
.sh-quote > * { margin-block: 0; }
.sh-quote .wp-block-quote {
margin: 0;
border: 0;
padding: 0;
font-style: normal;
}
.sh-quote .wp-block-quote p { font-size: 1.05rem; color: var(--wp--preset--color--contrast); margin: 0; }
.sh-quote cite {
display: block;
margin-top: 0.75rem;
font-size: 0.9rem;
font-style: normal;
font-weight: 700;
color: var(--wp--preset--color--contrast);
text-align: left;
}
.sh-quote__org { font-weight: 400; color: var(--wp--preset--color--muted); }
/* --- the FAQ accordion ---
The FAQ pages use WordPress's own "Details" block, so the questions stay
editable in the normal page editor, and keyboard and screen reader
behaviour is correct for free. These rules just make it look like the rest
of the site. */
.wp-block-details {
background: var(--wp--preset--color--surface);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--sh-radius);
padding: 0.7rem 1rem;
margin-block: 0.5rem;
transition: border-color var(--sh-transition);
}
.wp-block-details[open] { border-color: var(--wp--preset--color--primary-deep); }
.wp-block-details > summary {
cursor: pointer;
font-weight: 700;
color: var(--wp--preset--color--contrast);
}
.wp-block-details > summary::marker { color: var(--wp--preset--color--primary); }
.wp-block-details > *:not(summary) {
margin-top: 0.55rem;
color: var(--wp--preset--color--muted);
font-size: 0.97rem;
}
/* Grey heading rows used to group the FAQ into topics. */
.sh-faq__group {
margin: 1.1rem 0 0.2rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wp--preset--color--primary);
}
.sh-faq__group:first-child { margin-top: 0; }
/* ==========================================================================
15. BADGES
--------------------------------------------------------------------------
THE GREEN BADGES ARE A POINT OF PRIDE - keep them full size and readable.
The Green Web Foundation badge is 200px wide minimum.
The carbon badge is now the REAL one from websitecarbon.com, drawn by
their own script. Their styling is fixed and brand-coloured (deep blue and
mint), which does not match this site - that is expected and correct: an
independent badge should look like it came from somewhere else. The only
thing we do is switch between their dark-background and light-background
styling when the visitor changes mode.
========================================================================== */
.sh-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.sh-badges > * { margin-block: 0; }
/* Green Web Foundation badge: full, readable size. Never shrink this. */
.sh-badges img { width: 200px; height: auto; max-width: 100%; }
/* The official carbon badge sits left-aligned like everything else in the
column, rather than centred as their default CSS has it. */
#wcb.carbonbadge { text-align: left; }
/* In light mode, undo their dark-background styling. These are their own
selectors with our mode wrapper in front, so they win cleanly. */
:root[data-theme="light"] #wcb.wcb-d #wcb_a {
color: #fff;
background: var(--b1);
border-color: var(--b1);
}
:root[data-theme="light"] #wcb.wcb-d #wcb_2 { color: var(--b1); }
/* ---- the "Recognised by" badge row ----
Holds the ASBN "Voice For Impact 2025" badge (a shortcode, two pictures
swapped by mode - see section 2) and any ordinary Image blocks added in
the editor. At the time of writing that is the EFF membership badge.
THE BADGES SIT SIDE BY SIDE, so this is a flex row. Three things to know:
1. NEVER SET "display" ON .sh-asset HERE. The two ASBN pictures are shown
and hidden by section 2 alone. A "display" rule that matched both would
show both at once - the exact bug that made the 1.0 logo double height.
The rules below set size and layout only.
2. THE LABEL IS FORCED ONTO ITS OWN LINE. .sh-recognition has THREE
children, not two: the "Recognised by" label is one of them. Without
the "flex: 0 0 100%" below it would line up beside the badges as if it
were a third badge.
3. ONE SHARED HEIGHT, in one place: --sh-badge-h. The badges have very
different proportions (ASBN is 520x221, the EFF badge is square), so
matching their WIDTHS looks wrong and matching their HEIGHTS looks
right.
The longer ".wp-block-group.sh-recognition" selectors are deliberate: they
out-specify WordPress's own ":root :where(.is-layout-flow) > *" block-gap
margins rather than relying on this file being loaded afterwards. */
.sh-recognition {
--sh-badge-h: 132px;
margin-top: 1rem;
display: flex;
flex-wrap: wrap; /* stacks again when the column gets narrow */
align-items: center; /* different heights line up on their centres */
justify-content: center;
gap: 0.7rem 1.25rem; /* row gap, then the gap between badges */
}
.wp-block-group.sh-recognition > * { margin-block: 0; }
/* The label spans the full width, so the badges begin on a fresh line. */
.wp-block-group.sh-recognition > .sh-eyebrow {
flex: 0 0 100%;
margin-block: 0;
text-align: center;
}
/* The ASBN badge. Two classes deep so it beats the plain ".sh-asbn img"
fallback further down whichever order they end up in. */
.sh-recognition .sh-asbn img {
height: var(--sh-badge-h);
width: auto;
max-width: 100%;
}
/* Image blocks added in the editor.
WordPress writes the width chosen in the editor as an INLINE style on the
- style="width:132px;height:auto". An inline style beats every
selector in this file, and there is deliberately no "!important" here. So
we do not fight the width: we cap the HEIGHT, which is not set inline, and
let object-fit keep the proportions if the two ever disagree.
As it stands the EFF badge is set to 132px in the editor and is square, so
it is already exactly --sh-badge-h tall and nothing is letterboxed. IF
SOMEBODY CHANGES THAT WIDTH IN THE EDITOR, change --sh-badge-h above to
the same number and the two badges will match again. */
.sh-recognition figure.wp-block-image img {
max-height: var(--sh-badge-h);
object-fit: contain;
}
/* Anything else dropped straight in later - a bare , an inline