/*
SurgePays Retail (surgepays.io)
wp-blocks.css: the WordPress layer. Loaded after site.css, on the site and in the block editor.
site.css is the stylesheet of the static build, copied without edits. It styles the design by class
name (.hero, .btn, .card and so on). The patterns of this theme put those class names on core blocks.
Core blocks add a few wrapper elements and classes of their own. This file maps those to the design,
and does nothing else. It adds no new look to the three designed pages.
Rule for this file: no values of the design are repeated here unless a line says why.
Colors, sizes and spacing stay in site.css.
Breakpoints are the ones of site.css (theme.json has no field for them):
1040px, 860px, 700px, 620px and 340px (max-width), 861px (min-width), plus 701px to 860px.
Contents
W1 Page shell: template part wrappers, admin bar
W2 Button block: classes sit on the wrapper, the link fills it
W3 Image block: the figure wrapper steps aside
W4 Text blocks: bold is "strong" in the editor, the design styles "b"; the quote paragraph wraps like the quote
W5 Generic pages and posts (not part of the approved design)
Blocks that need no rule here, because their markup already matches what site.css expects:
Group, Heading, Paragraph, List, Details (the questions), Quote (the sales quote) and every theme block.
*/
/* ============================================================================
W1. Page shell
============================================================================ */
/* The header template part wraps the header in one extra element. A sticky element only sticks inside
its parent, so the wrapper is taken out of the layout and the header sticks to the page again. */
.wp-site-blocks > .wp-block-template-part:has(> .hdr) {
display: contents;
}
/* Signed-in users see the WordPress admin bar on top. The sticky header sits under it. */
.admin-bar .hdr {
top: calc(var(--wp-admin--admin-bar--height, 0px) + env(safe-area-inset-top, 0px));
}
@media (max-width: 600px) {
/* At this width the admin bar scrolls away with the page. */
.admin-bar .hdr {
top: env(safe-area-inset-top, 0px);
}
}
/* ============================================================================
W2. Button block
Static build: Label inside
The design classes (btn, xl, sm, soft, link, ext) are typed on the Button block under
Advanced, Additional CSS class(es). They land on the wrapper, so site.css draws the button there.
The link inside carries no look of its own and is made as large as the wrapper, so all of the
button can be clicked.
============================================================================ */
/* A Buttons block without the class btn-row is only a holder: its buttons act as if they stood alone. */
.wp-block-buttons:not(.btn-row) {
display: contents;
}
/* Core sets display:inline-block on the wrapper. The design needs the display of .btn and .link back. */
.wp-block-buttons > .wp-block-button.btn,
.wp-block-buttons > .wp-block-button.link {
display: inline-flex;
}
/* The link inside carries no look of its own. */
.wp-block-button.btn > .wp-block-button__link,
.wp-block-button.link > .wp-block-button__link {
all: unset;
cursor: pointer;
}
/* Filled buttons (.btn). The link grows past the padding of the wrapper on every side and the wrapper
cuts it off at its own edge, so the padding is part of the click target.
40px is not a design value. It only has to be larger than the largest button padding in site.css
(35px, ".btn.xl"). The link has no background, so nothing of it shows.
Why not position:relative on the wrapper with a stretched ::before, the usual way: Chromium then
draws the gradient of the button one or two color steps (of 255) differently at some widths. */
.wp-block-buttons > .wp-block-button.btn {
overflow: hidden;
}
.wp-block-button.btn > .wp-block-button__link {
flex: 1 1 auto;
align-self: stretch;
margin: -40px;
padding: 40px;
text-align: center;
}
/* A label with more than text, such as "News & Updates" with its arrow on Home (the arrow is a span hidden
from screen readers). In the static build the label and the span are two items of the .btn flex row,
with the gap of .btn between them. Here they sit inside the link, so the link lays them out the same way
and takes the gap from the wrapper. Buttons with a plain text label are not touched. */
.wp-block-button.btn > .wp-block-button__link:has(> *) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: inherit;
}
/* Text links (.link). They have no padding and no background. The link is stretched over the wrapper,
so the arrow that site.css draws after the label is part of the click target too. */
.wp-block-buttons > .wp-block-button.link {
position: relative;
}
.wp-block-button.link > .wp-block-button__link::before {
content: "";
position: absolute;
inset: 0;
}
/* Keyboard focus: the ring of site.css, drawn around the whole button.
THE THREE VALUES ARE COPIED from site.css, section 02, ":focus-visible". If they change there, change them here. */
.wp-block-button.btn:has(> .wp-block-button__link:focus-visible),
.wp-block-button.link:has(> .wp-block-button__link:focus-visible) {
outline: 3px solid var(--sky);
outline-offset: 3px;
}
/* ============================================================================
W3. Image block
Static build: directly inside .art, .pic, .photo, .col, .win, .brand, .ftr-btm
Image block:
In these places the figure is taken out of the layout, so the img is sized and placed by site.css
exactly as in the static build. Images anywhere else keep the normal figure.
============================================================================ */
:is(.art, .pic, .photo, .col, .win, .brand, .ftr-btm) > .wp-block-image {
display: contents;
}
/* ============================================================================
W4. Text blocks
The editor writes bold as . The design styles for the name above the role in the sales
card ("who-by"). This selector gives the same rule there, so the name can be made bold with
the normal Bold button. THE FOUR VALUES ARE COPIED from site.css, section 17, ".who-by b".
If they change there, change them here.
============================================================================ */
.who-by strong {
display: block;
font-family: var(--head);
font-size: 1.125rem;
color: var(--ink);
}
/* The Quote block wraps its text in a paragraph. site.css gives every paragraph text-wrap: pretty, and the
sales quote text-wrap: balance (".person blockquote"). In the static build the quote text sits directly in
the blockquote and is balanced. Here the paragraph takes the value of the quote, so the lines break the same way. */
.wp-block-quote > p {
text-wrap: inherit;
}
/* ============================================================================
W5. Generic pages and posts
NOT PART OF THE APPROVED DESIGN. The mockup has three pages and no plain text page.
These rules give the default templates (page.html, single.html, index.html, 404.html) a readable
column built from the same tokens, so pages such as Terms of Use and Privacy Policy have a home.
Confirm with marketing before launch.
============================================================================ */
.entry {
max-width: 46rem;
}
.entry > h1 {
margin-bottom: clamp(20px, 3vw, 32px);
}
.entry > * + .btn-row {
margin-top: 24px;
}
/* The text rules below are for plain text pages. They leave out ".is-sections", the content of a page
made with the template "Page built from sections": there the sections bring their own spacing, lists
and links, exactly as in the three designed pages. */
.entry-content:not(.is-sections) > * + * {
margin-top: 1.1em;
}
.entry-content:not(.is-sections) > :is(h2, h3, h4) {
margin-top: 1.6em;
}
.entry-content:not(.is-sections) :is(ul, ol):not([class*="ticks"]) {
padding-left: 1.4em;
}
.entry-content:not(.is-sections) ul:not([class*="ticks"]) {
list-style: disc;
}
.entry-content:not(.is-sections) a {
text-decoration: underline;
text-underline-offset: 3px;
}
.post-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.post-list h2 {
font-size: var(--h3);
}