(used as the brand logo/partner grid in integration section)
Replace with:
============================================================ */
.sys-brand-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 32px;
margin-bottom: 48px;
align-items: center;
}
@media (max-width: 600px) {
.sys-brand-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
/* ============================================================
SECTION 39D — Systems Pages: Brand Grid Item
Appears on every systems page. Replaces:
(used as individual brand logo wrapper inside sys-brand-grid)
Replace with:
============================================================ */
.sys-brand-item {
margin-top: 24px;
text-align: center;
}
/* ============================================================
SECTION 39E — Network Infrastructure Page: Stat Cards
Specific to systems/network-infrastructure.html.
Replaces the heavy inline-styled stat/feature card pattern:
[emoji]
[value]
Replace with the .net-stat-card pattern below.
============================================================ */
/* Stat card wrapper */
.net-stat-card {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 32px 40px;
text-align: center;
}
/* Intro paragraph inside stat card */
.net-stat-card-intro {
font-family: 'Inter', sans-serif;
color: var(--text-gray);
max-width: 640px;
margin: 0 auto 20px;
font-size: 15px;
line-height: 1.7;
}
/* Large emoji or icon */
.net-stat-icon {
font-size: 32px;
margin-bottom: 16px;
display: block;
line-height: 1;
}
/* Eyebrow label above the stat value */
.net-stat-eyebrow {
font-family: var(--display-font);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-light);
margin-bottom: 24px;
display: block;
}
/* The stat value itself */
.net-stat-value {
font-size: 28px;
font-weight: 800;
font-family: var(--display-font);
color: var(--text-dark);
margin-bottom: 10px;
display: block;
}
/* Stat label — bold line under the value */
.net-stat-label {
font-family: var(--display-font);
font-size: 13px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 6px;
display: block;
}
/* Stat description — lighter line below label */
.net-stat-desc {
font-size: 13px;
color: var(--text-gray);
margin: 0;
line-height: 1.7;
}
@media (max-width: 768px) {
.net-stat-card {
padding: 24px 20px;
}
}
/* ============================================================
SECTION 39F — Systems Index Page
systems/index.html specific. Replaces:
(used as the accent bar / active-state highlight in architecture grid)
(used as two-col layout on systems index)
Replace with: .sys-accent-bar and re-use .sys-two-col from 39A.
============================================================ */
.sys-accent-bar {
background: var(--primary-blue);
height: 4px;
border-radius: 2px;
width: 100%;
display: block;
}
/* ── END SECTION 39 ──────────────────────────────────────── */
/* ── END sv-systems.css ─────────────────────────────────── */
/* ============================================================
sv-systems.css — SECTION 39: Systems Page Inline Style Extraction
June 2026
============================================================ */
/* 39A — Grid gap variants */
.sys-grid-wide { gap: 48px; }
.sys-grid-who { gap: 32px; margin-bottom: 48px; }
.sys-grid-process { gap: 48px; align-items: start; }
/* 39B — Full-width feature card top spacing + padding */
.sys-integration-panel { margin-top: 64px; padding: 24px; }
/* 39C — Accent bar (systems/index.html group headers) */
.group-accent-bar {
background: var(--primary-blue);
height: 3px;
border-radius: 2px;
width: 100%;
display: block;
margin-bottom: 16px;
}
/* 39D — Emoji icon inside .card (network page why-section) */
.sys-card-icon { font-size: 32px; margin-bottom: 16px; line-height: 1; display: block; }
/* 39E — Info/spec panels (network page) */
.sys-info-panel {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 32px 40px;
text-align: center;
}
.sys-lifecycle-panel {
background: var(--white);
border-radius: 12px;
padding: 32px 40px;
}
@media (max-width: 768px) {
.sys-info-panel,
.sys-lifecycle-panel { padding: 24px 20px; }
}
/* 39F — Info panel intro text */
.sys-info-panel-intro {
font-family: 'Inter', sans-serif;
color: var(--text-gray);
max-width: 640px;
margin: 0 auto 20px;
font-size: 15px;
line-height: 1.7;
}
/* 39G — Lifecycle eyebrow label */
.sys-lifecycle-label {
font-family: var(--display-font);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-light);
margin-bottom: 24px;
display: block;
}
/* 39H — Lifecycle step wrapper */
.sys-lifecycle-step { text-align: center; }
/* 39I — Lifecycle step icon */
.sys-lifecycle-icon { font-size: 28px; margin-bottom: 10px; display: block; line-height: 1; }
/* 39J — Lifecycle step title */
.sys-lifecycle-title {
font-family: var(--display-font);
font-size: 13px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 6px;
display: block;
}
/* 39K — Lifecycle step description */
.sys-lifecycle-desc { font-size: 13px; color: var(--text-gray); line-height: 1.7; margin: 0; }
/* 39L — Brand card vertical alignment (network page) */
.card-align-start { align-self: start; }
/* 39M — Deep-dive section compact padding (network page) */
.sys-section-compact { padding: 64px 0 !important; }
/* ── END SECTION 39 ─────────────────────────────────────────── */
/* ── SECTION 40: Process List ────────────────────────────────
Numbered step list used in "How We Work With You" on all
6 systems detail pages. Replaces browser default ol styles.
─────────────────────────────────────────────────────────────── */
.process-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 28px;
counter-reset: process-counter;
}
.process-list li {
display: flex;
flex-wrap: wrap;
gap: 0 16px;
align-items: flex-start;
counter-increment: process-counter;
}
/* The number circle — fixed width, sits left */
.process-list li::before {
content: counter(process-counter);
font-family: var(--display-font);
font-size: 13px;
font-weight: 700;
color: var(--white);
background: var(--primary-blue);
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 3px;
}
/* Step title — fills remaining width on same row as number */
.process-list li strong {
display: block;
font-family: var(--display-font);
font-size: 16px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 6px;
flex: 1;
min-width: 0;
}
/* Step description — full width row below number + title */
.process-list li p {
font-size: 15px;
color: var(--text-gray);
line-height: 1.7;
margin: 0;
width: 100%;
padding-left: 48px; /* aligns with text above: 32px circle + 16px gap */
}
/* ── END SECTION 40 ─────────────────────────────────────────── */
/* ── SECTION 40B: Callout Box List Styles ───────────────────
Bullet lists inside .callout-box — used in "How We Work
With You" right column across systems detail pages.
─────────────────────────────────────────────────────────────── */
.callout-box ul {
list-style: none;
padding: 0;
margin: 12px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.callout-box li {
position: relative;
padding-left: 20px;
font-size: 15px;
color: var(--text-gray);
line-height: 1.6;
}
.callout-box li::before {
content: '·';
position: absolute;
left: 0;
top: 0;
font-size: 18px;
font-weight: 700;
color: var(--primary-blue);
line-height: 1.4;
}
/* group-link inside callout-box li — render inline, not block.
Prevents the link breaking word-by-word on its own line. */
.callout-box li .group-link {
display: inline;
font-size: 15px;
font-weight: 600;
border-top: none;
padding-top: 0;
margin-top: 0;
}
/* ── END SECTION 40B ────────────────────────────────────────── */
/* ── SECTION 41: Feature Card List Styles ────────────────────
Bullet lists inside .feature-card — used in "Is This Right
for You?" section on all systems detail pages.
Replaces browser default ul/li rendering.
─────────────────────────────────────────────────────────────── */
.feature-card ul {
list-style: none;
padding: 0;
margin: 16px 0 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.feature-card li {
position: relative;
padding-left: 24px;
font-size: 15px;
color: var(--text-gray);
line-height: 1.6;
}
/* Positive card — blue tick marker, absolutely positioned
so text flows naturally around inline elements like
*/
.feature-card li::before {
content: '✓';
font-size: 13px;
font-weight: 700;
color: var(--primary-blue);
position: absolute;
left: 0;
top: 2px;
}
/* Neutral card — softer dash marker */
.feature-card--neutral li::before {
content: '–';
color: var(--text-light);
font-weight: 400;
}
/* Links inside list items */
.feature-card li a {
color: var(--primary-blue);
font-weight: 500;
text-decoration: none;
}
.feature-card li a:hover {
text-decoration: underline;
}
/* Neutral card — visually de-emphasised vs positive card.
Slightly different background and no lift shadow. */
.feature-card--neutral {
background: #F0F4F8 !important;
box-shadow: none;
border-color: var(--border-light);
}
.feature-card--neutral:hover {
transform: none;
box-shadow: none;
border-color: var(--border-light);
}
.feature-card--neutral h3 {
color: var(--text-gray);
}
/* ── END SECTION 41 ─────────────────────────────────────────── */
/* ── SECTION 43: Solutions Block on Systems Pages ────────────
When the sv-solutions-block (rel-card grid) is used inside
a systems page deployment section, constrain card body text
to 3 lines and tighten card padding.
This prevents long data-desc-* overrides from breaking
the card layout when used in a 4-column grid context.
─────────────────────────────────────────────────────────────── */
/* Constrain description text to 3 lines in 4-col context */
.sv-section-grey .grid-4 .rel-card p,
.sv-section-white .grid-4 .rel-card p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 13px;
line-height: 1.6;
}
/* Slightly tighter card for 4-col grid */
.sv-section-grey .grid-4 .rel-card,
.sv-section-white .grid-4 .rel-card {
padding: 20px 18px;
}
/* Image bleed adjustment for tighter padding */
.sv-section-grey .grid-4 .rel-card-img,
.sv-section-white .grid-4 .rel-card-img {
width: calc(100% + 36px);
margin: -20px -18px 16px -18px;
}
/* Card title slightly smaller in 4-col context */
.sv-section-grey .grid-4 .rel-card h3,
.sv-section-white .grid-4 .rel-card h3 {
font-size: 15px;
margin-bottom: 8px;
}
/* Footer link stays consistent */
.sv-section-grey .grid-4 .rel-card-footer,
.sv-section-white .grid-4 .rel-card-footer {
font-size: 12px;
padding-top: 12px;
}
@media (max-width: 992px) {
/* Drop to 2-col on tablet */
.sv-section-grey .grid-4,
.sv-section-white .grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── END SECTION 43 ─────────────────────────────────────────── */
/* ── SECTION 45: Card Background Contrast ────────────────────
Cards must contrast with their section background.
Grey section → white card. White section → grey card.
Applied via context selectors — no HTML changes needed.
Covers all card types used across the 7 systems pages.
─────────────────────────────────────────────────────────────── */
/* Cards on grey sections — white background */
.sv-section-grey .feature-card,
.sv-section-grey .scenario-card,
.sv-section-grey .capabilities-card,
.sv-section-grey .sys-group-card,
.sv-section-grey .property-fit-card,
.sv-section-grey .compare-card,
.sv-section-grey .silo-card {
background: var(--white);
}
/* Cards on white sections — grey background */
.sv-section-white .feature-card,
.sv-section-white .scenario-card,
.sv-section-white .capabilities-card,
.sv-section-white .sys-group-card,
.sv-section-white .property-fit-card,
.sv-section-white .compare-card,
.sv-section-white .silo-card {
background: var(--bg-light);
}
/* arch-card — override its grey default to always white.
The border handles visual separation regardless of section. */
.sv-section-grey .arch-card,
.sv-section-white .arch-card {
background: var(--white);
}
/* arch-active always stays white with accent border */
.arch-card.arch-active {
background: var(--white) !important;
border: 2px solid var(--page-accent, var(--primary-blue));
}
/* callout-box — always white regardless of section.
The left accent border provides the visual distinction. */
.sv-section-grey .callout-box,
.sv-section-white .callout-box {
background: var(--white);
}
/* ── END SECTION 45 ─────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
Section 46 — Continue Exploring block
Three-column card grid at the bottom of every systems page.
Guides | Portfolio | Insights
Classes: .ce-card, .ce-icon, .ce-desc, .ce-links, .ce-link,
.ce-link--primary, .ce-count
══════════════════════════════════════════════════════════════════ */
.ce-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 28px;
}
.ce-icon {
font-size: 28px;
line-height: 1;
flex-shrink: 0;
}
.ce-card h3 {
font-size: 17px;
font-weight: 700;
color: var(--text-dark);
margin: 0;
font-family: var(--display-font);
}
.ce-desc {
font-size: 14px;
color: var(--text-gray);
line-height: 1.7;
margin: 0;
flex-grow: 1;
}
.ce-links {
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid var(--border-light);
padding-top: 16px;
margin-top: 4px;
}
.ce-link {
font-size: 14px;
font-weight: 600;
color: var(--primary-blue);
text-decoration: none;
line-height: 1.4;
font-family: var(--display-font);
transition: color 0.2s;
}
.ce-link:hover {
color: var(--primary-blue-dark, #003d82);
text-decoration: underline;
}
.ce-link--primary {
font-size: 15px;
}
.ce-count {
display: inline-block;
font-size: 12px;
color: var(--text-light);
font-family: var(--display-font);
margin-top: -4px;
}
/* ── END SECTION 46 ──────────────────────────────────────────── */
/* ============================================================
FAQ Component
Defined in sv-solutions.css — duplicated here so
systems pages render it correctly.
============================================================ */
.faq-item {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: 12px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item:hover {
border-color: var(--page-accent, var(--primary-blue));
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 40px;
}
.faq-grid--single {
grid-template-columns: 1fr;
}
.faq-grid .faq-item {
padding: 28px 32px;
}
.faq-grid .faq-question {
font-family: var(--display-font);
font-size: 17px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 12px;
line-height: 1.4;
padding-left: 34px;
}
.faq-grid .faq-question::before {
content: 'Q';
display: inline-block;
width: 24px;
height: 24px;
background: var(--page-accent, var(--primary-blue));
color: #fff;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
font-family: var(--display-font);
text-align: center;
line-height: 24px;
margin-left: -34px;
margin-right: 10px;
vertical-align: middle;
flex-shrink: 0;
}
.faq-grid .faq-answer {
font-size: 15px;
color: var(--text-gray);
line-height: 1.7;
margin: 0;
padding-left: 34px;
}
@media (max-width: 768px) {
.faq-grid {
grid-template-columns: 1fr;
}
.faq-grid .faq-item {
padding: 24px;
}
}
/* ── END FAQ Component ──────────────────────────────────────── */