/**
* Sitewide visual polish. Brand colors are enforced here (not just in
* theme.json) because this site has database-stored global style
* customizations (from the Site Editor) that override theme.json entirely —
* confirmed by the rendered font being Inter, not theme.json's Manrope, with
* no code change involved. Redefining WordPress's own preset CSS custom
* properties means every block using var(--wp--preset--color--*) picks up
* the brand palette regardless of which layer "wins" for the base styles.
*/
:root {
--wp--preset--color--base: #FFFFFF !important;
--wp--preset--color--contrast: #3A2E22 !important;
--wp--preset--color--accent-1: #C1603E !important;
--wp--preset--color--accent-2: #617D39 !important;
--wp--preset--color--accent-3: #8A4024 !important;
--wp--preset--color--accent-5: #FBF3E7 !important;
}
/**
* Full-bleed breakout containment.
*
* Three hero blocks (.snet-hero, .snet-contact-hero and the About page
* header, all in snet-contact-styles.css) put their photo behind the text
* with the standard "100vw breakout": left:50% + translateX(-50%) +
* width:100vw on a ::before, so the photo can span the window from behind a
* centered max-width:900px text column with no wrapper markup at all.
*
* The catch is that 100vw is the viewport INCLUDING the classic scrollbar,
* while the width actually available to lay out in is
* documentElement.clientWidth, which excludes it. On a desktop window with a
* 15px scrollbar the photo comes out 15px wider than the page, and since it
* is centered it hangs 7.5px off each side. The left half is unreachable and
* harmless; the right half was 8px of real horizontal scrolling on every
* page of the site, scrollbar and all.
*
* The breakout is deliberate and correct, so the fix is to clip the spill
* rather than to shrink the photo. `clip` and not `hidden`: clip does not
* create a scroll container, so position:sticky keeps working and the
* descendant scrollers that set their own overflow-x:auto (the pricing and
* cabling tables) still scroll normally. Declared on html as well as body
* so the viewport picks it up regardless of overflow propagation.
*/
html,
body {
overflow-x: clip;
}
body {
color: #3A2E22 !important;
}
h1, h2, h3, h4, h5, h6,
.wp-block-post-title, .wp-block-heading {
color: #3A2E22 !important;
font-weight: 600 !important;
}
.wp-block-button__link, .wp-element-button {
background-color: #C1603E !important;
color: #FFFFFF !important;
border-radius: 6px !important;
border: none !important;
}
.wp-block-button__link:hover, .wp-element-button:hover {
background-color: #8A4024 !important;
}
.is-style-outline .wp-block-button__link {
background-color: transparent !important;
color: #C1603E !important;
border: 2px solid #C1603E !important;
}
.is-style-outline .wp-block-button__link:hover {
background-color: #C1603E !important;
color: #FFFFFF !important;
}
/* Buttons: subtle lift + shadow on hover instead of an instant flat swap */
.wp-block-button__link,
.snet-btn-primary {
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
box-shadow: 0 1px 2px rgba(58, 46, 34, 0.08);
}
.wp-block-button__link:hover,
.snet-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(58, 46, 34, 0.18);
}
.wp-block-button__link:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 2px solid #C1603E;
outline-offset: 2px;
}
/* Links inside body text get a visible brand-colored underline on hover,
since the theme default is currentColor (invisible until hovered).
Excludes .snet-btn — the homepage hero/CTA buttons already have their
own deliberate styling in snet-contact-styles.css and shouldn't be
treated as plain inline text links. .snet-card is excluded for the same
reason: the whole service card is one , so this rule was underlining
the card's heading and description together, as if the card were a run of
inline link text rather than a target. */
.wp-block-post-content a:not(.wp-block-button__link):not(.snet-btn):not(.snet-card) {
color: #C1603E;
text-decoration: underline;
text-decoration-color: rgba(193, 96, 62, 0.4);
text-underline-offset: 2px;
transition: text-decoration-color 0.15s ease;
}
.wp-block-post-content a:not(.wp-block-button__link):not(.snet-btn):not(.snet-card):hover {
text-decoration-color: #C1603E;
}
/* Images: soft rounded corners read as more modern than hard edges */
.wp-block-image img,
.wp-block-media-text__media img {
border-radius: 8px;
}
/* Card-like groups (any group with a background color set) get a subtle
shadow and rounded corners instead of a flat color block */
.wp-block-group[style*="background-color"] {
border-radius: 10px;
box-shadow: 0 1px 3px rgba(58, 46, 34, 0.06);
}
/* Breathing room between stacked sections on the front page */
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > .wp-block-columns {
margin-top: clamp(2rem, 5vw, 4rem);
margin-bottom: clamp(2rem, 5vw, 4rem);
}
/**
* Scroll-in reveal for the services grid and FAQ accordion (snet-reveal.js
* adds/removes these classes via IntersectionObserver). The .snet-reveal-init
* hidden state is applied by JS only, never by CSS alone -- so if JS fails to
* load or run, elements simply keep their normal default-visible styling
* from snet-contact-styles.css instead of staying invisible.
*/
.snet-services .snet-card,
.snet-faq details,
.snet-stats > div {
transition: opacity 0.5s ease, transform 0.5s ease;
}
.snet-services .snet-card.snet-reveal-init,
.snet-faq details.snet-reveal-init,
.snet-stats > div.snet-reveal-init {
opacity: 0;
transform: translateY(14px);
}
.snet-services .snet-card.snet-in-view,
.snet-faq details.snet-in-view,
.snet-stats > div.snet-in-view {
opacity: 1;
transform: translateY(0);
}
/* ---------------------------------------------------------------------------
Cabling spec table and figure — /network-install/
Added 2026-09-09. That page took two paid clicks at $53.14 the same day and
both visitors left inside a second, so it needed something with substance
on it rather than another block of prose. No table or image styling existed
anywhere on the site before this.
--------------------------------------------------------------------------- */
.snet-figure {
margin: 0 0 1.5rem;
border: 1px solid var(--snet-line);
border-radius: 6px;
overflow: hidden;
background: #fff;
}
.snet-figure img { display: block; width: 100%; height: auto; }
.snet-figure figcaption {
padding: .7rem 1rem;
font-size: .85rem;
line-height: 1.5;
color: var(--snet-home-ink-muted);
border-top: 1px solid var(--snet-line);
background: var(--snet-home-cream);
}
/* Wide table scrolls inside its own box so the page never scrolls sideways. */
.snet-cable-wrap {
overflow-x: auto;
border: 1px solid var(--snet-line);
border-radius: 6px;
margin: 1.2rem 0 1.4rem;
background: #fff;
}
.snet-cable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.snet-cable th,
.snet-cable td {
text-align: left;
padding: .72rem .9rem;
border-bottom: 1px solid var(--snet-line);
vertical-align: top;
}
.snet-cable thead th {
background: var(--snet-home-cream);
font-size: .72rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--snet-home-ink-muted);
white-space: nowrap;
}
.snet-cable tbody tr:last-child td { border-bottom: 0; }
.snet-cable td:first-child {
font-weight: 700;
color: var(--snet-home-ink);
white-space: nowrap;
}
.snet-cable-note {
font-size: .9rem;
color: var(--snet-home-ink-muted);
border-left: 3px solid var(--snet-home-rust);
padding: .1rem 0 .1rem .9rem;
margin: 0 0 1rem;
}
.snet-cable-pick { color: var(--snet-home-rust); font-weight: 700; }
.snet-cable-use { margin-top: 0; }
.snet-cable-use li { line-height: 1.55; }
/* ---------------------------------------------------------------------------
Cabling cards — replaces the spec table on /network-install/ (2026-09-09).
A five-column table never fitted the ~618px content column: the useful text
sat behind a horizontal scroll and rows rendered tall and half-empty. Cards
reflow at every width, and they let the two grades we actually recommend be
promoted visually instead of reading the same as the one we refuse to
install. Rail colour carries the meaning: rust = our default, green = fibre,
muted = legacy.
--------------------------------------------------------------------------- */
.snet-cable-grid {
list-style: none;
margin: 1.5rem 0 1.6rem;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
gap: 14px;
}
.snet-cable-card {
position: relative;
background: #fff;
border: 1px solid var(--snet-line);
border-radius: 9px;
padding: 17px 18px 16px 21px;
display: flex;
flex-direction: column;
gap: 11px;
overflow: hidden;
}
.snet-cable-card::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 4px;
background: #ddd2c2;
}
.snet-cable-card.is-default::before { background: var(--snet-home-rust); }
.snet-cable-card.is-fibre::before { background: var(--snet-home-accent); }
.snet-cable-card.is-legacy { background: #fdfbf8; }
.snet-cable-name {
display: block;
font-weight: 800;
font-size: 1.1rem;
line-height: 1.15;
letter-spacing: -.012em;
color: var(--snet-home-ink);
}
.snet-cable-flag {
display: inline-block;
margin-top: 6px;
padding: 4px 8px;
border-radius: 3px;
font-size: .67rem;
font-weight: 700;
letter-spacing: .085em;
text-transform: uppercase;
color: var(--snet-home-rust);
background: var(--snet-home-rust-soft);
}
.snet-cable-card.is-fibre .snet-cable-flag { color: #4d6b2f; background: #e9f0df; }
.snet-cable-card.is-legacy .snet-cable-flag { color: var(--snet-home-ink-muted); background: #f2ece2; }
.snet-cable-specs { margin: 0; border-top: 1px solid var(--snet-line-soft); }
.snet-cable-specs > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
padding: 6px 0;
border-bottom: 1px solid var(--snet-line-soft);
}
.snet-cable-specs > div:last-child { border-bottom: 0; }
.snet-cable-specs dt {
margin: 0;
font-size: .7rem;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--snet-home-ink-muted);
white-space: nowrap;
}
.snet-cable-specs dd {
margin: 0;
text-align: right;
font-size: .9rem;
font-weight: 650;
color: var(--snet-home-ink);
}
.snet-cable-when {
margin: 0;
font-size: .875rem;
line-height: 1.55;
color: var(--snet-home-ink-muted);
}
/* Lift the photograph off the page rather than boxing it like an attachment. */
.snet-figure {
border: 0;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(58, 46, 34, .07), 0 16px 34px -20px rgba(58, 46, 34, .4);
}
.snet-figure figcaption {
background: #fff;
border-top: 0;
padding: .85rem 1.1rem 1rem;
font-size: .86rem;
}
/* The flag is a pill, not a banner: without this it stretches to the card's
full width, since a flex column stretches its children by default. */
.snet-cable-flag { align-self: flex-start; margin-top: 2px; }
/* Belt and braces against wpautop: if it ever injects a stray paragraph or
line break inside a card, collapse it rather than letting it open a gap. */
.snet-cable-card > p:empty,
.snet-cable-card > br { display: none; }
.snet-cable-card .snet-cable-specs { margin-top: 2px; }
/* ==========================================================================
Content type scale and section rhythm (2026-09-09)
--------------------------------------------------------------------------
Body copy in the content sections was 14px while the theme's own body
element is 16.8px, and the interior pages' content column is 620px wide --
so prose was running at roughly 100 characters per line at a size below
comfortable reading. Raising it to 16.5px fixes the size and pulls line
length back toward 75 characters at the same time.
========================================================================== */
:root {
/* Was #EEF2F7 -- a cool blue-grey inherited from an older blue palette
that is still defined alongside the warm one in snet-contact-styles.css.
Every section divider, the "how it works" column rules, the wizard
progress track and the cabling table rules draw in this colour, and on
a cream site all of them read faintly lilac. #EADFCF is the warm
equivalent (same value as --snet-border). */
--snet-line-soft: #EADFCF;
}
/* DIRECT children only. `.snet-section p` would also catch the paragraphs
inside .snet-why and .snet-cable-card, whose columns are 275-300px wide and
which set their own 14px deliberately -- at 16.5px those wrap to two or
three words a line. Prose is what needs the larger size, not card copy. */
.snet-section > p {
font-size: 16.5px;
line-height: 1.62;
}
.snet-section > .snet-pricing-list li {
font-size: 16px;
line-height: 1.5;
}
.snet-section > h3 {
font-size: 20px;
line-height: 1.32;
}
/* The eyebrow comes in two shapes. On the interior pages it is plain text
("Managed IT / Colorado Springs") which inherited body size and had no
label styling at all -- it rendered LARGER than the body copy beneath it.
On the homepage it is a flex row of pill links, which already carry their
own type styling on the .
:not(:has(a)) is what separates them. Setting font-size on the pill
variant's flex container changes its resolved width (616px -> 499px) and
wraps the two pills onto separate rows, so the pill version must be left
alone entirely. */
.snet-hero .snet-eyebrow:not(:has(a)) {
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
/* Was 28px. The single biggest reason the page read as cramped. */
.snet-section {
padding: clamp(44px, 6vw, 78px) 0;
}
/* .snet-why was repeat(4, 1fr) with fallbacks at max-width 900px and 480px.
Those breakpoints test the VIEWPORT, but the grid's real constraint is its
container: the homepage gives it 1140px, the interior pages only 620px. So
on a wide desktop the media queries never fired and four cards were packed
into 620px -- 127px each, wrapping to one or two words per line. auto-fit
responds to the container instead, giving 4 columns at 1140px and 2 at
620px with no breakpoints at all. Declared here rather than in
snet-contact-styles.css so it also supersedes those two media queries,
which this rule makes redundant.
The 230px floor is chosen so the track count lands exactly on the number
of items: with a 24px gap, n tracks need 254n-24 px, so 1140px admits 4
and 620px admits 2. A 200px floor would fit a 5th track at 1140px which
auto-fit then collapses to zero, leaving a dead 24px gap on the right. */
.snet-why {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
/* ==========================================================================
Display typeface: Oswald (2026-09-09, step 2)
--------------------------------------------------------------------------
Headings were Cardo (a serif, from the theme's database-stored global
styles). Warm and literate, but soft at large sizes -- it read closer to
"consultancy" than "infrastructure". Oswald is condensed and structural,
fits roughly 15% more characters per line at the same point size, and is
the face the PowerForgeNet build uses.
Self-hosted rather than linked from fonts.googleapis.com: this site paints
fast and makes no third-party request on first render, and a Google Fonts
stylesheet would add a blocking round trip plus a privacy footnote for no
benefit. Google serves Oswald as a single VARIABLE woff2 -- the 500 and
600 downloads are byte-identical -- so one 21 KB file covers the whole
weight range and the @font-face declares it as a range.
========================================================================== */
@font-face {
font-family: "Oswald SN";
src: url('../fonts/oswald-variable.woff2') format('woff2');
font-weight: 200 700;
font-style: normal;
/* swap, not block: text paints immediately in Inter and reflows when the
font arrives, rather than being invisible while it downloads. */
font-display: swap;
}
h1, h2, h3, h4,
.wp-block-heading,
.wp-block-post-title {
font-family: "Oswald SN", "Arial Narrow", Inter, system-ui, sans-serif;
/* Condensed faces need a hair of tracking back to stay legible at size. */
letter-spacing: 0.005em;
}
/* The wordmark stays Cardo. It is now the only Cardo left on the site, which
is exactly what a logotype should be -- distinct from every other piece of
type. (Its own rule in snet-contact-styles.css already wins on specificity;
restated here so the intent survives the next person reading this file.) */
.snet-hero .snet-brand,
.snet-hero .snet-brand a {
font-family: Cardo, Georgia, serif;
}
/* Oswald is far narrower than Cardo at the same point size, so every heading
that was tuned against the serif now needs to come up to hold the same
optical weight. */
.snet-hero h1,
.snet-hero h2 {
font-size: clamp(34px, 5.1vw, 54px); /* was clamp(30px, 4.5vw, 46px) */
line-height: 1.06;
}
.snet-section h2 {
font-size: clamp(28px, 3.6vw, 42px); /* was a flat 40px */
line-height: 1.1;
}
.snet-section > h3 {
font-size: 21px;
}
.snet-services .snet-card h3,
.snet-why h3 {
font-size: 17px; /* was 15px / 16px */
}
.snet-stats .snet-stat-num {
font-family: "Oswald SN", "Arial Narrow", Inter, system-ui, sans-serif;
}
/* --------------------------------------------------------------------------
Homepage body copy. The homepage has no .snet-section elements at all --
it is built from WordPress blocks -- so step 1's type scale did not reach
it. These are the same fix applied to the classes the homepage actually
uses. Sizes stay modest where the column is narrow (the service cards are
225px wide) and go up where it is not.
-------------------------------------------------------------------------- */
.snet-founder-proof {
font-size: 15.5px; /* was 13.5px in a 760px-wide column: ~140 char lines */
line-height: 1.6;
max-width: 700px;
}
.snet-faq p {
font-size: 15.5px; /* was 14px */
line-height: 1.6;
}
.snet-services .snet-card p {
font-size: 14.5px; /* was 13.5px; column is only 225px, so a small bump */
line-height: 1.5;
}
.snet-stats p {
font-size: 14.5px;
}
/* ==========================================================================
Service-area badges (2026-09-09)
--------------------------------------------------------------------------
Three hexagonal county badges, recoloured from navy/copper to this site's
warm palette with a lightness-keyed duotone ramp so the linework and
antialiasing survive. Displayed at 112px because the source art is only
225x211 -- any larger and it goes soft on a high-DPI screen.
========================================================================== */
.snet-areas {
margin: clamp(36px, 5vw, 60px) 0;
text-align: center;
}
.snet-areas > h2 {
margin: 0 0 10px;
}
.snet-areas > p {
max-width: 60ch;
margin: 0 auto;
font-size: 15.5px;
line-height: 1.6;
color: var(--snet-home-ink-muted);
}
.snet-areas-grid {
display: grid;
/* Sized so the track count lands on exactly three, which is how many
badges there are. The theme constrains direct children of
.entry-content to 620px, and at a 36px gap a 190px floor only fits two
tracks in that -- the third badge dropped to its own row. With a 150px
floor and a 700px cap: 620px and 700px both give 3 tracks, and a 375px
phone gives 2. No empty collapsed tracks at any width. */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: clamp(14px, 2vw, 30px);
max-width: 700px;
margin: clamp(24px, 3vw, 36px) auto 0;
}
.snet-areas-grid img {
display: block;
width: 112px;
height: auto;
margin: 0 auto;
}
.snet-areas-grid h3 {
font-size: 15px;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 12px 0 0;
color: var(--snet-home-ink);
}
/* Selector has to out-rank `.snet-areas > p` (0,1,1) above, which otherwise
wins and zeroes this margin -- a bare `.snet-areas-note` is only (0,1,0).
Two classes beat one class plus an element. */
.snet-areas > .snet-areas-note {
margin: clamp(20px, 3vw, 30px) auto 0;
max-width: 60ch;
font-size: 14.5px;
color: var(--snet-home-ink-muted);
}
/* Homepage figures sit as direct children of .entry-content, which the theme
constrains to 620px -- noticeably narrower than the 1140px bands above and
below them (.snet-services and .snet-why set their own max-width and so
escape that constraint). Matching them here keeps the page's left and right
edges consistent as you scroll. The landing pages are unaffected: their
figures live inside , so they are not direct
children and correctly stay at the 620px prose width. */
.entry-content > .snet-figure {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
/* ==========================================================================
Homepage service grid: six cards (2026-09-09)
--------------------------------------------------------------------------
Was repeat(4, 1fr) with fallbacks at viewport 900px and 720px. With six
cards that gives a ragged 4 + 2. auto-fit sizes to the CONTAINER instead
(the grid's own content box is ~1060px), so a 300px floor yields exactly
three columns on desktop -- two clean rows of three -- then two, then one
as the space narrows, with no breakpoints. Declared here so it also
supersedes those two media queries in snet-contact-styles.css.
========================================================================== */
.snet-services {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* The services that did not make the six. Deliberately quiet: it exists so
nothing is hidden, not to compete with the cards above it. */
.snet-services-more {
max-width: 780px;
margin: 4px auto 0;
padding: 0 20px;
text-align: center;
font-size: 14.5px;
line-height: 1.6;
color: var(--snet-home-ink-muted);
}
/* ==========================================================================
Trust bar: keep all four pills on one row (2026-09-09)
--------------------------------------------------------------------------
Measured: the four pills need 961px, and `.snet-hero + .snet-trust` in
snet-contact-styles.css capped the row at 900px of content, so the fourth
("Free estimate in about a minute") dropped to a second line 61px short.
1100px is the same max-width .snet-services uses, so widening to it both
fits the row and lines the trust bar up with the card grid directly below
it -- the two now share the same left and right edges.
========================================================================== */
.snet-hero + .snet-trust {
max-width: 1100px;
}
/* Closing CTA now carries three routes (form, phone, booked call) instead of
two stacked cards offering the phone twice. Three buttons need to wrap as a
group rather than as loose inline text, so give the row an explicit centred
flex layout -- .snet-final-cta is text-align:center, which centres the
buttons but does nothing about the gaps between them once they wrap. */
.snet-final-cta .snet-btns {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
/* ==========================================================================
Duplicate page title above a custom hero (2026-09-10)
--------------------------------------------------------------------------
Pages with their own hero also render the WordPress post title above it, so
the visitor reads the page name twice with a tall empty band between: 274px
on /services/, 223px on /pricing/, pushing the real headline toward the
fold. snet-contact-styles.css already hid this, but by listing page IDs one
at a time -- and that list had fallen behind, missing /services/,
/pricing/, /network-architecture/, /voip-phone-systems/ and
/it-consulting/. Keying on "does this page have a hero of its own" fixes
every one of them and cannot fall behind again; pages with no custom hero
(privacy, terms) keep their title.
========================================================================== */
body:has(.snet-hero) main > .wp-block-group:has(.wp-block-post-title) {
display: none !important;
}
/* A list that is NOT a list of benefits. .snet-pricing-list stamps a green
check on every item, which is right for "what you get" and actively
misleading for "what this does not cover" or "who we are not for". */
.snet-list-plain {
list-style: none;
margin: 0 0 22px;
padding: 0;
}
.snet-list-plain li {
position: relative;
font-size: 16px;
color: var(--snet-home-ink);
padding: 0 0 10px 22px;
line-height: 1.5;
}
.snet-list-plain li::before {
content: "\2014";
position: absolute;
left: 0;
top: 0;
color: var(--snet-home-ink-muted);
}
/* ==========================================================================
Microsoft 365 security content (2026-09-13)
========================================================================== */
/* Homepage callout, just under the trust strip. Direct child of
.entry-content, so it has to escape the theme's 620px constraint the same
way the homepage figures do; 1100px lines its edges up with the service
cards directly below it. */
.entry-content > .snet-m365-callout {
max-width: 1100px;
}
.snet-m365-callout {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 30px;
margin: 18px auto 8px;
padding: 22px 26px;
background: #fff;
border: 1px solid #EADFCF;
border-left: 4px solid var(--snet-home-rust);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(58, 46, 34, 0.06);
}
.snet-m365-text {
flex: 1 1 440px;
min-width: 0;
}
.snet-m365-callout .snet-m365-k {
margin: 0 0 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--snet-home-rust);
}
.snet-m365-callout h2 {
margin: 0 0 6px;
font-size: clamp(22px, 2.6vw, 28px);
line-height: 1.15;
}
.snet-m365-callout .snet-m365-text > p:last-child {
margin: 0;
font-size: 15.5px;
line-height: 1.55;
}
.snet-m365-link {
flex: none;
font-weight: 600;
white-space: nowrap;
}
/* The twelve practices. Each carries two short answers side by side --
what it stops, and what the team will actually notice -- because the
second column is the whole point: security people keep using. */
.snet-practices {
display: flex;
flex-direction: column;
gap: 26px;
margin: 22px 0 16px;
}
.snet-practice-group > h3 {
margin: 0 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid #EADFCF;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--snet-home-rust) !important;
}
.snet-practice {
margin-bottom: 10px;
padding: 16px 18px;
background: #fff;
border: 1px solid #EADFCF;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(58, 46, 34, 0.05);
}
.snet-practice h4 {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0 0 6px;
font-size: 18px;
line-height: 1.3;
}
.snet-practice h4 span {
flex: none;
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: 12px;
font-weight: 600;
color: var(--snet-home-rust);
}
.snet-practice > p {
margin: 0 0 12px;
font-size: 15.5px;
line-height: 1.55;
}
.snet-practice-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px 18px;
padding-top: 10px;
border-top: 1px dashed #EADFCF;
}
.snet-practice-meta > div {
font-size: 14.5px;
line-height: 1.5;
}
.snet-practice-k {
display: block;
margin-bottom: 2px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--snet-home-ink-muted);
}
.snet-practice-meta > div:last-child .snet-practice-k {
color: var(--snet-home-accent);
}
.snet-practice-note {
font-size: 14.5px;
color: var(--snet-home-ink-muted);
}
/* Hero headlines (2026-09-13): service heroes now carry a real . Balance
the lines so a short headline never leaves one word stranded ("move-in /
day.") under a full-width first line on desktop. */
.snet-hero h1,
.snet-hero h2 {
text-wrap: balance;
}
/* ==========================================================================
/network-install/: "Who does the work" and the cabling price guide
(2026-09-13). Same card language as .snet-cable-card further up -- white
card, hairline border, 4px rust rail on the grades we recommend -- so the
prices read as part of the same page rather than a bolted-on widget.
========================================================================== */
.snet-proof-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px 32px;
align-items: start;
}
.snet-proof-grid p {
font-size: 16.5px;
line-height: 1.55;
}
.snet-section .snet-proof-lead {
font-family: "Oswald SN", "Arial Narrow", Inter, system-ui, sans-serif;
font-size: clamp(21px, 2.3vw, 26px);
font-weight: 500;
line-height: 1.25;
margin: 0 0 12px;
text-wrap: balance;
}
.snet-proof-handover {
background: #fff;
border: 1px solid var(--snet-line);
border-radius: 9px;
padding: 18px 20px 4px;
}
.snet-proof-handover h3 {
font-size: 17px;
margin: 0 0 10px;
}
.snet-rate-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin: 1.4rem 0 1.2rem;
}
.snet-rate {
position: relative;
background: #fdfbf8;
border: 1px solid var(--snet-line);
border-radius: 9px;
padding: 17px 18px 16px 21px;
display: flex;
flex-direction: column;
gap: 3px;
overflow: hidden;
}
.snet-rate.is-main { background: #fff; }
.snet-rate::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 4px;
background: #ddd2c2;
}
.snet-rate.is-main::before { background: var(--snet-home-rust); }
.snet-rate-name {
font-size: .72rem;
font-weight: 700;
letter-spacing: .085em;
text-transform: uppercase;
color: var(--snet-home-ink-muted);
}
.snet-rate-price {
font-family: "Oswald SN", "Arial Narrow", Inter, system-ui, sans-serif;
font-size: clamp(30px, 3.4vw, 36px);
font-weight: 600;
line-height: 1.1;
margin-top: 4px;
color: var(--snet-home-ink);
font-variant-numeric: tabular-nums;
}
.snet-rate-price.is-text {
font-size: 22px;
line-height: 1.2;
}
.snet-rate-unit {
font-size: 13px;
color: var(--snet-home-ink-muted);
}
.snet-rate-desc {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--snet-line-soft);
font-size: 14.5px;
line-height: 1.45;
}
.snet-section > .snet-rate-note,
.snet-section > .snet-rate-how {
font-size: 15px;
line-height: 1.55;
}
.snet-rate-examples {
display: grid;
gap: 10px;
margin: .6rem 0 1.2rem;
}
.snet-rate-example {
display: grid;
grid-template-columns: 1fr auto;
gap: 2px 18px;
align-items: baseline;
padding: 13px 16px;
background: #fff;
border: 1px solid var(--snet-line);
border-radius: 8px;
}
.snet-rate-example-job {
font-weight: 700;
color: var(--snet-home-ink);
}
.snet-rate-example-total {
font-family: "Oswald SN", "Arial Narrow", Inter, system-ui, sans-serif;
font-size: 22px;
font-weight: 600;
color: var(--snet-home-rust);
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-align: right;
}
.snet-rate-example-math {
grid-column: 1 / -1;
font-size: 13.5px;
color: var(--snet-home-ink-muted);
}
.snet-price-guide .snet-btns {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 6px;
}
@media (max-width: 460px) {
.snet-rate-example { grid-template-columns: 1fr; }
.snet-rate-example-total { text-align: left; }
}
/* Content column is ~620px, so three price cards land 2 + 1 with the third
stranded. The two drop prices pair up; the "quoted after a walkthrough"
card is a different kind of thing and takes its own full-width row. */
.snet-rate:not(.is-main) {
grid-column: 1 / -1;
}
/* ==========================================================================
Networks + cloud security restructure (2026-09-15)
--------------------------------------------------------------------------
Header menu regrouped into Networks / Cloud Security / Managed IT, and a
homepage that opens with those two doors. Content comes from
restructure_menu_and_homepage() in class-summitnet-content-fixes.php.
Two tones carry through the page: light cards and olive for networks,
the one dark walnut band and rust for cloud security.
========================================================================== */
/* ---- Header menu -------------------------------------------------------- */
@media (min-width: 600px) {
.wp-block-navigation .wp-block-navigation__submenu-container {
min-width: 290px !important;
padding: 6px 0 !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
display: block !important;
padding: 8px 16px !important;
}
/* The header menu is justified right, so the theme opens dropdowns
leftward from each item. It wraps under the site title and starts at
the page's left edge, which pushed the first dropdown off-screen. */
.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
left: 0 !important;
right: auto !important;
}
}
.wp-block-navigation .wp-block-navigation-item__label {
display: block;
}
/* Descriptions only inside dropdowns, and only where there is room. */
.wp-block-navigation .wp-block-navigation-item__description {
display: none;
}
@media (min-width: 600px) {
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
display: block;
margin-top: 1px;
font-size: 12.5px;
line-height: 1.35;
color: var(--snet-home-ink-muted);
}
}
.wp-block-navigation .snet-nav-cta > .wp-block-navigation-item__content {
background: #C1603E;
color: #fff !important;
font-weight: 600;
padding: 7px 15px;
border-radius: 6px;
text-decoration: none !important;
transition: background-color 0.15s ease;
}
.wp-block-navigation .snet-nav-cta > .wp-block-navigation-item__content:hover {
background: #8A4024;
}
/* Hero label. Not .snet-eyebrow: add_brand_wordmark_to_hero() anchors on
that class and strip_hero_wordmark_and_pills() then removes it, so an
eyebrow on the homepage would vanish on the next version bump. */
.snet-hero .snet-hero-k {
margin: 0 0 14px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #F3D9C6 !important;
}
/* ---- Shared homepage band width and rhythm ------------------------------ */
.entry-content > :is(.snet-doors, .snet-doors-also, .snet-router, .snet-pillar, .snet-proof-home, .snet-how-home, .snet-handled) {
box-sizing: border-box;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.entry-content > :is(.snet-router, .snet-pillar, .snet-proof-home, .snet-how-home, .snet-handled) {
margin-top: clamp(40px, 5.5vw, 68px);
}
.snet-pillar {
scroll-margin-top: 90px;
}
.snet-kicker {
margin: 0 0 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--snet-home-rust);
}
.snet-kicker.is-net {
color: #4d6b2f;
}
/* ---- Two doors ---------------------------------------------------------- */
.entry-content > .snet-doors {
margin-top: 28px;
}
.snet-doors {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 16px;
padding: 0 20px;
}
a.snet-door {
display: flex;
flex-direction: column;
gap: 10px;
padding: 26px 26px 22px;
border-radius: 12px;
text-decoration: none !important;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.snet-door:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px -12px rgba(58, 46, 34, 0.45);
}
.snet-door.is-net {
background: #fff;
border: 1px solid #EADFCF;
color: var(--snet-home-ink) !important;
}
.snet-door.is-sec {
background: #2E251C;
border: 1px solid #2E251C;
color: #EFE3D2 !important;
}
.snet-door-k {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.snet-door.is-net .snet-door-k { color: #4d6b2f; }
.snet-door.is-sec .snet-door-k { color: #E3A383; }
.snet-door h2 {
margin: 0;
font-size: clamp(26px, 3vw, 32px);
line-height: 1.05;
}
.snet-door.is-sec h2 {
color: #FBF3E7 !important;
}
.snet-door p {
margin: 0;
font-size: 15.5px;
line-height: 1.5;
}
.snet-door.is-net p { color: #5A4B3B; }
.snet-door.is-sec p { color: #D8C9B4; }
.snet-door ul {
list-style: none;
margin: 2px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.snet-door li {
margin: 0;
padding: 4px 10px;
border-radius: 999px;
font-size: 13px;
line-height: 1.4;
}
.snet-door.is-net li { background: #F3ECE0; }
.snet-door.is-sec li { background: #43372A; color: #F4EADB; }
.snet-door-go {
margin-top: auto;
padding-top: 4px;
font-weight: 700;
font-size: 15px;
}
.snet-door.is-net .snet-door-go { color: #8A4024; }
.snet-door.is-sec .snet-door-go { color: #F0B598; }
a.snet-door:hover .snet-door-go {
text-decoration: underline;
text-underline-offset: 3px;
}
.entry-content > .snet-doors-also {
margin-top: 14px;
padding: 0 20px;
text-align: center;
font-size: 15px;
color: var(--snet-home-ink-muted);
}
.snet-doors-also a {
font-weight: 700;
}
/* ---- Symptom router ----------------------------------------------------- */
.snet-router {
padding: clamp(24px, 4vw, 40px);
background: #fff;
border: 1px solid #EADFCF;
border-radius: 12px;
}
.snet-router h2 {
margin: 0 0 12px;
font-size: clamp(26px, 3vw, 34px);
}
.snet-router-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
gap: 0 36px;
}
.snet-router-list li {
margin: 0;
border-bottom: 1px solid #F1E8DB;
}
.snet-router-list a {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 4px 14px;
padding: 12px 0;
color: var(--snet-home-ink) !important;
text-decoration: none !important;
}
.snet-router-list span {
font-size: 15.5px;
line-height: 1.45;
}
.snet-router-list b {
font-size: 13.5px;
white-space: nowrap;
color: #4d6b2f;
}
.snet-router-list a.is-sec b {
color: #8A4024;
}
.snet-router-list a:hover span {
text-decoration: underline;
text-decoration-color: rgba(58, 46, 34, 0.35);
text-underline-offset: 3px;
}
/* ---- Pillars ------------------------------------------------------------ */
.snet-pillar {
padding: 0 20px;
}
.snet-pillar h2 {
max-width: 24ch;
margin: 0 0 20px;
font-size: clamp(28px, 3.6vw, 40px);
line-height: 1.08;
}
.snet-pillar-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: #EADFCF;
border: 1px solid #EADFCF;
border-radius: 10px;
overflow: hidden;
}
.snet-pillar-grid > div {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px;
background: #fff;
}
.snet-pillar-grid h3 {
margin: 0;
font-size: 20px;
}
.snet-pillar-grid p {
flex-grow: 1;
margin: 0;
font-size: 14.5px;
line-height: 1.5;
color: #5A4B3B;
}
.snet-pillar-grid a {
font-size: 14px;
font-weight: 700;
color: #8A4024 !important;
text-decoration: none !important;
}
.snet-pillar-grid a:hover {
text-decoration: underline !important;
}
@media (max-width: 900px) {
.snet-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.snet-pillar-grid { grid-template-columns: 1fr; }
}
.snet-pillar-more {
margin: 16px 0 0;
font-size: 15px;
color: var(--snet-home-ink-muted);
}
.snet-portmap {
margin-top: 18px;
overflow-x: auto;
background: #fff;
border: 1px solid #EADFCF;
border-radius: 10px;
/* The card is white wherever it sits. Inside .snet-pillar.is-dark the band
sets color:#EFE3D2, which the cells would otherwise inherit -- pale cream
monospace on white, effectively unreadable. Stated explicitly so the
table is legible in either band. */
color: #3a2e22;
}
.snet-portmap table {
width: 100%;
min-width: 560px;
border-collapse: collapse;
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: 13px;
}
.snet-portmap caption {
caption-side: top;
padding: 12px 14px 6px;
text-align: left;
font-family: Inter, system-ui, sans-serif;
font-size: 14px;
color: #5A4B3B;
}
.snet-portmap caption em {
font-style: normal;
color: var(--snet-home-ink-muted);
}
.snet-portmap th,
.snet-portmap td {
padding: 7px 14px;
text-align: left;
white-space: nowrap;
border-bottom: 1px solid #F1E8DB;
}
.snet-portmap tbody tr:last-child td {
border-bottom: 0;
}
.snet-portmap th {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--snet-home-ink-muted);
}
.snet-portmap td.is-ok {
color: #4d6b2f;
}
/* The page's one dark band. */
.snet-pillar.is-dark {
padding: clamp(28px, 4.5vw, 48px);
background: #2E251C;
border-radius: 12px;
color: #EFE3D2;
}
.snet-pillar.is-dark .snet-kicker { color: #E3A383; }
.snet-pillar.is-dark h2,
.snet-pillar.is-dark h3 {
color: #FBF3E7 !important;
}
.snet-pillar.is-dark h2 {
margin-bottom: 12px;
}
/* The three blocks below were written when .snet-pillar-lede, the six-up grid
and .snet-policy only ever appeared inside .snet-pillar.is-dark, so their
colours were picked for a #2E251C background. Used on a light band -- as
/managed-it/ does -- pale cream text landed on cream and was barely
readable. Each now carries a light default and restores the pale value only
inside the dark band. Light values are all >= 5.3:1 on #FBF3E7. */
.snet-pillar-lede {
max-width: 62ch;
margin: 0 0 26px;
font-size: 16.5px;
line-height: 1.55;
color: #5A4B3B;
}
.snet-pillar.is-dark .snet-pillar-lede {
color: #D8C9B4;
}
.snet-pillar-grid.is-six {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px 28px;
background: none;
border: 0;
border-radius: 0;
overflow: visible;
}
.snet-pillar-grid.is-six > div {
padding: 12px 0 0;
background: none;
border-top: 1px solid #EADFCF;
}
.snet-pillar-grid.is-six h3 { font-size: 19px; }
.snet-pillar-grid.is-six p { color: #5A4B3B; }
.snet-pillar-grid.is-six a { color: #8A4024 !important; }
.snet-pillar.is-dark .snet-pillar-grid.is-six > div { border-top-color: #4A3D30; }
.snet-pillar.is-dark .snet-pillar-grid.is-six p { color: #CDBDA7; }
.snet-pillar.is-dark .snet-pillar-grid.is-six a { color: #F0B598 !important; }
@media (max-width: 900px) {
.snet-pillar-grid.is-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.snet-pillar-grid.is-six { grid-template-columns: 1fr; }
}
.snet-policy {
display: grid;
gap: 6px;
margin-top: 26px;
padding: 12px 16px;
border: 1px solid #EADFCF;
border-radius: 8px;
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: 13px;
color: #5A4B3B;
}
.snet-pillar.is-dark .snet-policy {
border-color: #4A3D30;
color: #DCCDB8;
}
.snet-policy > div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2px 16px;
}
.snet-policy b {
font-weight: 500;
color: #4d6b2f;
}
.snet-policy b.is-pending {
color: #8A5A12;
}
.snet-pillar.is-dark .snet-policy b { color: #A9C57F; }
.snet-pillar.is-dark .snet-policy b.is-pending { color: #E3C27A; }
/* ---- Who does the work -------------------------------------------------- */
.snet-proof-home {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 20px 44px;
align-items: start;
padding: 0 20px;
}
.snet-proof-home h2 {
margin: 0 0 10px;
font-size: clamp(28px, 3.4vw, 38px);
}
.snet-proof-home > div > p:not(.snet-kicker) {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: #5A4B3B;
}
.snet-cv {
list-style: none;
margin: 0;
padding: 0;
}
.snet-cv li {
display: grid;
grid-template-columns: 76px 1fr;
gap: 14px;
margin: 0;
padding: 10px 0;
border-bottom: 1px solid #E6D6C0;
font-size: 15.5px;
line-height: 1.45;
}
.snet-cv li span {
padding-top: 2px;
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: 12.5px;
color: var(--snet-home-ink-muted);
}
/* ---- How it works + prices ---------------------------------------------- */
.snet-how-home {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
gap: 28px 48px;
padding: clamp(24px, 4vw, 40px);
background: #fff;
border: 1px solid #EADFCF;
border-radius: 12px;
}
.snet-how-home h2 {
margin: 0 0 14px;
font-size: clamp(24px, 2.6vw, 28px);
}
.snet-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 14px;
counter-reset: snet-step;
}
.snet-steps li {
position: relative;
margin: 0;
padding-left: 40px;
font-size: 15px;
line-height: 1.5;
color: var(--snet-home-ink-muted);
counter-increment: snet-step;
}
.snet-steps li::before {
content: counter(snet-step);
position: absolute;
left: 0;
top: -3px;
font-family: "Oswald SN", "Arial Narrow", Inter, system-ui, sans-serif;
font-size: 25px;
font-weight: 600;
color: var(--snet-home-rust);
}
.snet-steps b {
display: block;
font-size: 16px;
color: var(--snet-home-ink);
}
.snet-rates-home {
border: 1px solid #EADFCF;
border-radius: 8px;
overflow: hidden;
}
.snet-rates-home > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 11px 14px;
border-bottom: 1px solid #F1E8DB;
font-size: 15px;
}
.snet-rates-home > div:last-child {
border-bottom: 0;
}
.snet-rates-home small {
display: block;
font-size: 12.5px;
color: var(--snet-home-ink-muted);
}
.snet-rates-home b {
font-family: "Oswald SN", "Arial Narrow", Inter, system-ui, sans-serif;
font-size: 20px;
font-weight: 600;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.snet-rates-link {
margin: 10px 0 0;
font-size: 14.5px;
}
/* ---- Managed IT, demoted ------------------------------------------------ */
.snet-handled {
padding: 0 20px;
}
.snet-handled h2 {
margin: 0 0 12px;
font-size: clamp(24px, 2.8vw, 30px);
}
.snet-handled-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.snet-handled-links a {
padding: 9px 13px;
background: #fff;
border: 1px solid #EADFCF;
border-radius: 6px;
font-size: 14.5px;
color: var(--snet-home-ink) !important;
text-decoration: none !important;
transition: border-color 0.15s ease;
}
.snet-handled-links a:hover {
border-color: var(--snet-home-accent-fill);
}
.snet-inds {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 14px 20px;
margin-top: 24px;
}
.snet-inds > div {
padding-top: 9px;
border-top: 2px solid var(--snet-home-accent);
font-size: 14px;
line-height: 1.45;
color: var(--snet-home-ink-muted);
}
.snet-inds b {
display: block;
font-size: 15px;
color: var(--snet-home-ink);
}
.entry-content > .snet-faq {
margin-top: clamp(40px, 5.5vw, 68px);
}
/* Photos sit between bands here, so they need the band gap above them too
(.snet-figure itself only carries a bottom margin). */
.entry-content > :is(.snet-pillar, .snet-handled) + .snet-figure {
margin-top: clamp(40px, 5.5vw, 68px);
}
/* ---- /services/ group headings ------------------------------------------ */
.entry-content > .snet-services-group,
.entry-content > .snet-services-group-intro {
box-sizing: border-box;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 0;
}
.entry-content > .snet-services-group {
margin-top: clamp(36px, 5vw, 56px);
margin-bottom: 4px;
font-size: clamp(26px, 3.2vw, 34px);
scroll-margin-top: 90px;
}
.entry-content > .snet-services-group-intro {
margin-top: 0;
margin-bottom: 8px;
font-size: 16px;
color: var(--snet-home-ink-muted);
}
/* ---------------------------------------------------------------------------
Service cards -- /services/, /network-services/, /cloud-security/
Added 2026-09-18. These rules existed only as an inline