/**
* NP Shared Blocks — the ground every section stands on.
*
* The sections are neilpatel.com blocks, and they have to look the way they
* do there. Three things the neilpatel theme gives its blocks for free are
* missing on any other site, and this file supplies them:
*
* 1. the typeface geo-wf, served from assets/fonts/
* 2. the base type 300 18px/1.667, #26282d — the theme's body rule
* 3. the reset margins, paddings, list bullets, inherited fonts
*
* All of it is confined to .npsb-section, the wrapper npsb_wrap() prints
* around every shortcode. Nothing here can reach the host site's own content.
*
* SPECIFICITY IS DELIBERATE. The rules are written as
* `:is(#npsb#npsb#npsb, .npsb-section)`: three ids' worth of weight, matched
* through the class (the ids exist nowhere). That is what lets a reset beat a
* host theme's `#top #wrap_all .main_color h2`. The block stylesheets are
* generated one step higher — four ids, see tools/scope-css.js — so they still
* sit on top of the reset exactly as they sit on top of the theme's.
*/
@font-face { font-display: swap; font-family: geo-wf; font-style: normal; font-weight: 300; src: url(fonts/geo-wf-3.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: geo-wf; font-style: normal; font-weight: 400; src: url(fonts/geo-wf-4.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: geo-wf; font-style: normal; font-weight: 500; src: url(fonts/geo-wf-5.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: geo-wf; font-style: normal; font-weight: 600; src: url(fonts/geo-wf-6.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: geo-wf; font-style: normal; font-weight: 700; src: url(fonts/geo-wf-7.woff2) format("woff2"); }
/* -------------------------------------------------------------------------
* Wrapper
* ---------------------------------------------------------------------- */
:is(#npsb#npsb#npsb, .npsb-section) {
box-sizing: border-box;
clear: both;
color: #26282d;
font: 300 18px/1.6666666667 geo-wf, Helvetica, Arial, sans-serif;
letter-spacing: normal;
text-align: left;
text-transform: none;
}
/* Full bleed.
*
* On neilpatel.com these sections span the window: the grey band behind the
* stats and the dark one behind the videos run edge to edge, and the content
* sits in its own 1242px column inside. A host page usually drops the
* shortcode into a column narrower than that, which both crops the band and
* squeezes the cards.
*
* So the wrapper steps out of whatever column it is in and takes the window's
* width. `calc(50% - 50vw)` is the distance from the column's left edge to the
* window's, whatever the column's width, provided the column is centred —
* which a page's main column is. Only with full_width="yes"; by default the
* section stays in the column it was placed in — see npsb_is_full_width().
*
* 100vw includes the scrollbar, so the section is a few pixels wider than the
* visible area on desktop; the host needs overflow-x hidden on the page for
* that not to show as a horizontal scroll. Enfold sets it on #top.
*/
:is(#npsb#npsb#npsb, .npsb-section).npsb-bleed {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
/* -------------------------------------------------------------------------
* Reset
*
* The element list is the one the neilpatel theme resets (Eric Meyer's),
* narrowed to what the sections actually print, plus the two properties a
* builder theme likes to set on headings. The gate form is left out on
* purpose: it is a form of THIS site and should look like this site's forms.
* ---------------------------------------------------------------------- */
:is(#npsb#npsb#npsb, .npsb-section) *,
:is(#npsb#npsb#npsb, .npsb-section) *::before,
:is(#npsb#npsb#npsb, .npsb-section) *::after {
box-sizing: border-box;
}
:is(#npsb#npsb#npsb, .npsb-section) :is(div, span, section, article, nav, h1, h2, h3, h4, h5, h6, p, a, em, i, b, strong, small, img, svg, ol, ul, li, form, label, time):not(.modal-form *) {
border: 0;
font: inherit;
letter-spacing: inherit;
margin: 0;
padding: 0;
text-transform: inherit;
vertical-align: baseline;
}
:is(#npsb#npsb#npsb, .npsb-section) :is(h1, h2, h3, h4, h5, h6, p, span, li, strong, b, em, i, small, div):not(.modal-form *) {
color: inherit;
}
:is(#npsb#npsb#npsb, .npsb-section) :is(ol, ul, li):not(.modal-form *) {
list-style: none;
}
/* Host themes hang decorations off these (a rule under every h2, a bullet
* before every li); none of the sections expects one it did not draw. */
:is(#npsb#npsb#npsb, .npsb-section) :is(h1, h2, h3, h4, h5, h6, li):not(.modal-form *)::before,
:is(#npsb#npsb#npsb, .npsb-section) :is(h1, h2, h3, h4, h5, h6, li):not(.modal-form *)::after {
content: none;
}
:is(#npsb#npsb#npsb, .npsb-section) :is(strong, b):not(.modal-form *) {
font-weight: 700;
}
:is(#npsb#npsb#npsb, .npsb-section) a:not(.modal-form *) {
color: #f16334;
text-decoration: none;
}
:is(#npsb#npsb#npsb, .npsb-section) img:not(.modal-form *) {
display: block;
height: auto;
max-width: 100%;
}
/* The theme's body rule covers form controls too, which is what gives the
* sections' own buttons and search fields their typeface. */
:is(#npsb#npsb#npsb, .npsb-section) :is(button, input, select, textarea):not(.modal-form *) {
font: 300 18px/1.6666666667 geo-wf, Helvetica, Arial, sans-serif;
letter-spacing: normal;
text-transform: none;
}
/* -------------------------------------------------------------------------
* Rhythm between sections
*
* A shortcode delivers cards with no space of its own above or below — the
* host page's builder owns that. But several shortcodes stacked in ONE text
* element have nothing between them, and each block's leftovers (a "More"
* link here, none there) made the gaps uneven. So a section that follows
* another one in the same element stands off by a fixed distance. `~` rather
* than `+`, because wpautop likes to leave a
or an empty in between.
* Sections placed in separate builder elements are not siblings and keep
* whatever spacing the builder gives them.
* ---------------------------------------------------------------------- */
:is(#npsb#npsb#npsb, .npsb-section) ~ :is(#npsb#npsb#npsb, .npsb-section) {
margin-top: 56px;
}
:is(#npsb#npsb#npsb, .npsb-section).npsb-bleed ~ :is(#npsb#npsb#npsb, .npsb-section).npsb-bleed {
margin-top: 0;
}
/* -------------------------------------------------------------------------
* A shortcode pasted as code
*
* Shortcodes get copied out of documentation, where they are set in a code
* style, and a visual editor keeps that style when they are pasted: the page
* ends up holding
[npd-neil-tv]
, or the shortcode inside
* a .
*
* The case is plain inheritance: white-space: pre comes down into the
* section, and its markup — printed on one line on purpose, see npsb_render()
* — stops wrapping. Resetting white-space on the wrapper ends that.
*
* The case is stranger. A cannot live inside a
, so the
* browser closes the paragraph when the section starts; but is a
* formatting element, and the HTML parser REOPENS those inside whatever block
* comes next. The whole section therefore ends up wrapped in a the
* plugin never printed, sitting INSIDE the block's root — below the wrapper,
* where the wrapper's own font can no longer overrule it — and the host
* theme's `code { font-family: monospace }` sets every card in Courier.
*
* None of these elements is ever printed by a section, so any that appears is
* one of those strays, and it is made to disappear: display: contents takes
* its box out of the layout (the children behave as if it were not there),
* and everything it could pass down is put back to inherit.
* ---------------------------------------------------------------------- */
:is(#npsb#npsb#npsb, .npsb-section) {
white-space: normal;
}
:is(#npsb#npsb#npsb, .npsb-section) :is(code, tt, kbd, samp, var, pre):not(.modal-form *) {
background: none;
border: 0;
color: inherit;
display: contents;
font: inherit;
letter-spacing: inherit;
margin: 0;
padding: 0;
white-space: inherit;
}
/* -------------------------------------------------------------------------
* "Load more" under the blog and Marketing Stats grids
*
* The look of the Neil TV and webinar "Load more" buttons on the source, so
* every list on a page grows the same way. Written at four ids of
* specificity, like the generated block stylesheets, so it sits above the
* reset's form-control rule just as theirs do.
* ---------------------------------------------------------------------- */
:is(#npsb#npsb#npsb#npsb, .npsb-section) .npsb-load-more {
margin-top: 40px;
text-align: center;
}
:is(#npsb#npsb#npsb#npsb, .npsb-section) .npsb-load-more-button {
align-items: center;
background-color: #f16232;
border: 0;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: inherit;
font-size: 14px;
font-weight: 700;
justify-content: center;
letter-spacing: normal;
line-height: 1.2;
min-width: 220px;
padding: 16px 48px;
text-transform: uppercase;
transition: opacity 0.2s ease, transform 0.2s ease;
}
:is(#npsb#npsb#npsb#npsb, .npsb-section) .npsb-load-more-button:hover {
opacity: 0.9;
transform: translateY(-2px);
}
:is(#npsb#npsb#npsb#npsb, .npsb-section) .npsb-load-more-button:focus-visible {
outline: 2px solid #26282d;
outline-offset: 3px;
}
:is(#npsb#npsb#npsb#npsb, .npsb-section) .npsb-load-more-button:disabled {
cursor: progress;
opacity: 0.7;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
:is(#npsb#npsb#npsb#npsb, .npsb-section) .npsb-load-more-button {
transition: none;
}
:is(#npsb#npsb#npsb#npsb, .npsb-section) .npsb-load-more-button:hover {
transform: none;
}
}
/* Under the "More" link, which stays right below the cards as it always has:
* the button closes the section, so it keeps a little more air above it. */
:is(#npsb#npsb#npsb#npsb, .npsb-section) .related-content-more + .npsb-load-more,
:is(#npsb#npsb#npsb#npsb, .npsb-section) .more + .npsb-load-more {
margin-top: 32px;
}