/* ──────────────────────────────────────────────────────────────────────────
Alloy Bank look & feel for the Visual Builder experiences.
A single brand-blue ramp (50→900) on a near-white cool ground, a warm
secondary for emphasis, a five-step radius scale and layered neutral
shadows. Loaded after bootstrap.min.css so it wins; scoped to
.
Layout of this file
1. Tokens
2. Base + typography
3. Header / nav / footer
4. Experience shell + section rhythm
5. Blocks
6. Visual Builder display-setting utilities
7. "Display as" variant modifiers
8. Responsive
9. Motion / focus
The class names in §6 and §7 are a contract with Helpers/VisualBuilderStyles.cs
and the choice keys in Business/Seeding/DisplaySettingsLibrary.cs — they are
persisted on composition nodes in the database. Rules may be re-authored;
names must not be renamed or dropped.
────────────────────────────────────────────────────────────────────────── */
/* Fonts are loaded with + in _ExperienceRoot.cshtml
and _Root.cshtml rather than an @import here, which would block rendering until
this stylesheet has been fetched and parsed. */
/* ════════════════════════════════════════════════════════════════════════════
1. Tokens
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* brand ramp */
--brand-50: #eef3ff;
--brand-100: #dde6ff;
--brand-200: #b9caff;
--brand-300: #8da8ff;
--brand-400: #5b7dff;
--brand-500: #2f5cff; /* interactive: links, buttons, accents */
--brand-600: #1f43e0; /* hover, gradient start */
--brand-700: #1734ad; /* deep fills, gradient end */
--brand-800: #12277e;
--brand-900: #0c1c5e; /* footer, "Dark" ground */
/* warm secondary — emphasis, never structure */
--accent-100: #ffe9dc;
--accent-400: #fb923c;
--accent-500: #f97316;
--accent-600: #ea580c;
/* semantic */
--positive: #0f9d6e;
--positive-bg: #e7f6f0;
--warn: #b45309;
--warn-bg: #fdf3e3;
/* neutrals — three separable levels: page, band, card */
--surface: #fbfcfe; /* page ground */
--surface-1: #f2f5fa; /* tonal band ("Off-white") */
--surface-2: #e8edf6; /* deeper band, hairline fills */
--card: #ffffff;
--ink: #0d1425;
--muted: #4d5872; /* 7.0:1 on --surface */
--subtle: #626c86; /* 5.1:1 on --surface */
--on-fill: #ffffff;
--border: rgba(13, 20, 37, 0.09);
--border-strong: rgba(13, 20, 37, 0.16);
/* radii */
--r-xs: 8px;
--r-sm: 12px;
--r-md: 16px;
--r-lg: 20px;
--r-xl: 28px;
/* layered neutral shadows */
--shadow-xs: 0 1px 2px rgba(13, 20, 37, 0.06);
--shadow-sm: 0 1px 3px rgba(13, 20, 37, 0.07), 0 1px 2px rgba(13, 20, 37, 0.04);
--shadow-md: 0 4px 12px rgba(13, 20, 37, 0.07), 0 2px 4px rgba(13, 20, 37, 0.04);
--shadow-lg: 0 16px 32px rgba(13, 20, 37, 0.10), 0 4px 8px rgba(13, 20, 37, 0.05);
--shadow-brand: 0 18px 36px rgba(23, 52, 173, 0.22), 0 4px 10px rgba(23, 52, 173, 0.12);
/* section rhythm */
--pad-band-y: clamp(2.5rem, 5vw, 4rem);
--pad-band-x: clamp(1.5rem, 4vw, 3rem);
--font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
/* ════════════════════════════════════════════════════════════════════════════
2. Base + typography
═══════════════════════════════════════════════════════════════════════════ */
/* alloycms.css only loads on Alloy Bank pages, so this bare html rule is safe */
html { background: var(--surface); }
html:has(body.alloycms) { overflow-x: hidden; max-width: 100vw; }
body.alloycms {
background: var(--surface);
color: var(--ink);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
font-feature-settings: "cv11";
}
body.alloycms .container { max-width: 1180px; width: 100%; box-sizing: border-box; }
body.alloycms h1,
body.alloycms h2,
body.alloycms h3,
body.alloycms h4,
body.alloycms .content h1,
body.alloycms .content h2,
body.alloycms .content h3 {
font-family: var(--font-display);
color: var(--ink);
letter-spacing: -0.02em;
text-transform: none;
text-wrap: balance;
overflow-wrap: break-word;
}
body.alloycms h1 { font-size: clamp(2.25rem, 4.4vw, 3.25rem); line-height: 1.06; letter-spacing: -0.03em; font-weight: 700; }
body.alloycms h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.12; font-weight: 700; }
body.alloycms h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
body.alloycms h4 { font-size: 1rem; line-height: 1.35; font-weight: 600; }
body.alloycms p { color: var(--muted); text-wrap: pretty; }
body.alloycms a { color: var(--brand-500); text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.alloycms a:hover { color: var(--brand-600); }
/* ════════════════════════════════════════════════════════════════════════════
3. Header / nav / footer
═══════════════════════════════════════════════════════════════════════════ */
body.alloycms header {
background: color-mix(in srgb, var(--surface) 85%, transparent);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 1030;
}
body.alloycms .navbar { padding-block: 0.75rem; }
body.alloycms .navbar-brand.logo {
font-family: var(--font-display);
font-weight: 700;
color: var(--brand-700);
display: inline-flex;
align-items: center;
}
body.alloycms .navbar-brand.logo img { height: 34px; width: auto; }
/* Traditional pages also load theme.min.css, which uppercases .nav-link and
.breadcrumb in Poppins — undo it so both page families share one nav. */
body.alloycms .navbar-nav .nav-link,
body.alloycms .breadcrumb {
font-family: var(--font-body);
text-transform: none;
letter-spacing: 0;
}
body.alloycms .breadcrumb { font-size: 0.85rem; color: var(--subtle); }
body.alloycms .navbar-nav .nav-link {
color: var(--muted);
font-weight: 500;
font-size: 0.9375rem;
padding: 0.4rem 0.75rem;
border-radius: var(--r-xs);
transition: color 0.15s ease, background-color 0.15s ease;
}
body.alloycms .navbar-nav .nav-link:hover,
body.alloycms .navbar-nav .nav-link.active,
body.alloycms .navbar-nav .show > .nav-link {
color: var(--brand-700);
background: var(--brand-50);
}
body.alloycms form.d-flex { gap: 0.5rem; }
body.alloycms form.d-flex input[type="search"] {
border: 1px solid var(--border-strong);
border-radius: 999px;
padding: 0.4rem 0.95rem;
font-size: 0.85rem;
background: var(--card);
color: var(--ink);
}
body.alloycms form.d-flex input[type="search"]::placeholder { color: var(--subtle); }
body.alloycms form.d-flex button {
border: 0;
border-radius: 999px;
background: var(--brand-500);
color: var(--on-fill);
padding: 0.4rem 1.05rem;
font-size: 0.85rem;
font-weight: 600;
transition: background-color 0.15s ease;
}
body.alloycms form.d-flex button:hover { background: var(--brand-600); }
body.alloycms .dropdown-menu {
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
padding: 0.4rem;
margin-top: 0.4rem;
}
body.alloycms .dropdown-item {
border-radius: var(--r-xs);
font-size: 0.9rem;
padding: 0.5rem 0.75rem;
color: var(--muted);
}
body.alloycms .dropdown-item:hover { background: var(--brand-50); color: var(--brand-700); }
body.alloycms footer {
background: var(--brand-900);
color: var(--brand-200);
margin-top: clamp(3rem, 6vw, 5rem);
padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
body.alloycms footer h3 {
color: var(--brand-300);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.75rem;
}
body.alloycms footer a { color: var(--brand-200); text-decoration: none; }
body.alloycms footer a:hover { color: var(--on-fill); text-decoration: underline; }
body.alloycms footer ul { list-style: none; padding: 0; margin: 0; }
body.alloycms footer li { padding-block: 0.25rem; font-size: 0.9375rem; }
/* ════════════════════════════════════════════════════════════════════════════
4. Experience shell + section rhythm
A section is NOT a floating card by default. It is a band of vertical
rhythm on the page ground; only a section that carries a non-white
background becomes a contained, rounded band. That keeps a heading and the
grid it introduces reading as one unit instead of two detached slabs.
═══════════════════════════════════════════════════════════════════════════ */
.vb-experience { display: block; max-width: 100%; }
.vb-experience * { min-width: 0; }
.vb-grid, .vb-row, .vb-col, .vb-section, .hero-block, .cta-band,
.faq-container, .callout, .text-block, .product-card, .pricing-tier { max-width: 100%; box-sizing: border-box; }
body.alloycms .vb-section {
padding-block: var(--pad-band-y);
padding-inline: 0;
margin-block: 0;
background: transparent;
border-radius: 0;
}
/* A section given a real ground becomes a contained band. */
body.alloycms .vb-section.vbg-offwhite,
body.alloycms .vb-section.vbg-blue,
body.alloycms .vb-section.vbg-brand,
body.alloycms .vb-section.vbg-dark {
padding-inline: var(--pad-band-x);
border-radius: var(--r-xl);
margin-block: 0.5rem;
}
/* Bind a heading section to the section it introduces. */
body.alloycms .vb-section:has(.section-heading) { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
body.alloycms .vb-section:has(.section-heading) + .vb-section { padding-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.vb-grid { display: block; }
.vb-row {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: stretch;
}
.vb-col {
flex: 1 1 240px;
min-width: 0;
display: flex;
flex-direction: column;
}
.vb-col > div { display: flex; flex-direction: column; flex: 1; }
/* single-item rows (heading, testimonial, faq, cta) shouldn't stretch full-bleed wide */
.vb-row:has(> .vb-col:only-child) { max-width: 46rem; margin-inline: auto; }
/* ════════════════════════════════════════════════════════════════════════════
5. Blocks
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hero ──────────────────────────────────────────────────────────────── */
/* Solid fallback only. A gradient appears here ONLY when the editor picks the
"Brand gradient" background, which is the one choice whose label promises one. */
.hero-block {
position: relative;
overflow: hidden;
background: var(--brand-700);
color: var(--on-fill);
border-radius: var(--r-xl);
padding: clamp(2.5rem, 5.5vw, 4.5rem);
margin-block: clamp(1.5rem, 3vw, 2.5rem);
box-shadow: var(--shadow-brand);
}
.hero-block.hero-block--image { background-size: cover; background-position: center; }
.hero-block h1 { color: inherit; margin-bottom: 1rem; max-width: 20ch; }
.hero-block p {
color: var(--brand-100);
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
max-width: 46ch;
margin-bottom: 2rem;
}
/* Themed CTA — not a Bootstrap .btn, so nothing fights it for colour. */
.hero-block .hero-block__cta,
body.alloycms .hero-block a.hero-block__cta {
display: inline-block;
background: var(--on-fill);
color: var(--brand-700);
border: 0;
border-radius: var(--r-sm);
padding: 0.85rem 1.75rem;
font-weight: 600;
text-decoration: none;
box-shadow: var(--shadow-md);
transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
body.alloycms .hero-block a.hero-block__cta:hover {
color: var(--brand-800);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* ── Section heading ───────────────────────────────────────────────────── */
.section-heading { text-align: left; }
.section-heading h2 { margin-bottom: 0.6rem; }
.section-heading p {
font-size: 1.0625rem;
max-width: 52ch;
color: var(--muted);
margin-bottom: 0;
}
/* ── Product card ──────────────────────────────────────────────────────── */
.product-card {
position: relative;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.75rem;
height: 100%;
box-shadow: var(--shadow-xs);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--border-strong);
}
.product-card .card-body { padding: 0; display: flex; flex-direction: column; flex: 1; }
.product-card__icon {
width: 2.75rem;
height: 2.75rem;
border-radius: var(--r-sm);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
margin-bottom: 1.25rem;
/* default tint — every seeded icon key now has a rule, so nothing falls
through to a solid brand fill the way `--account` used to */
background: var(--brand-50);
color: var(--brand-700);
}
.product-card__icon--account { background: var(--brand-100); color: var(--brand-700); }
.product-card__icon--savings { background: var(--positive-bg); color: var(--positive); }
.product-card__icon--mortgage { background: var(--accent-100); color: var(--accent-600); }
.product-card__icon--business { background: var(--surface-2); color: var(--brand-800); }
.product-card .card-title { font-size: 1.0625rem; margin-bottom: 0.5rem; color: var(--ink); }
.product-card .card-text {
font-size: 0.9375rem;
color: var(--muted);
line-height: 1.6;
margin-bottom: 1.25rem;
flex: 1;
}
/* Flex so a link long enough to wrap keeps its arrow pinned to the trailing
edge instead of orphaning it onto a line of its own. */
.product-card a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--brand-500);
text-decoration: none;
margin-top: auto;
}
.product-card .product-card__arrow {
flex: none;
transition: transform 0.15s ease;
}
.product-card:hover a { color: var(--brand-600); }
.product-card:hover .product-card__arrow { transform: translateX(3px); }
/* ── Stat counter ─────────────────────────────────────────────────────── */
.stat-counter { text-align: center; padding: 0.5rem 0; }
.stat-counter .display-5 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2rem, 3.4vw, 2.75rem);
color: var(--brand-700);
line-height: 1;
letter-spacing: -0.03em;
}
.stat-counter .display-5 .stat-counter__suffix { color: var(--brand-400); }
.stat-counter .stat-counter__label {
margin-top: 0.6rem;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--subtle);
font-weight: 600;
}
/* ── Pricing tier ─────────────────────────────────────────────────────── */
.pricing-tier {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.75rem;
height: 100%;
box-shadow: var(--shadow-xs);
}
/* feature list absorbs the slack so every tier's CTA lands on the same line */
.pricing-tier .card-body { display: flex; flex-direction: column; height: 100%; padding: 0; }
.pricing-tier ul { flex: 1; }
.pricing-tier.pricing-tier--highlighted {
border-color: var(--brand-400);
box-shadow: var(--shadow-md), 0 0 0 3px var(--brand-50);
}
.pricing-tier .badge {
align-self: center; /* card-body is a flex column — don't let it stretch full width */
background: var(--brand-500);
color: var(--on-fill);
border-radius: 999px;
padding: 0.3rem 0.7rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
}
.pricing-tier .display-6 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.75rem, 3vw, 2.25rem);
color: var(--ink);
letter-spacing: -0.02em;
}
.pricing-tier .pricing-tier__period { color: var(--subtle); font-weight: 500; font-size: 1rem; letter-spacing: 0; }
.pricing-tier ul li {
padding-block: 0.45rem;
font-size: 0.9rem;
color: var(--muted);
border-bottom: 1px solid var(--border);
}
.pricing-tier ul li:last-child { border-bottom: 0; }
.pricing-tier .pricing-tier__cta {
display: inline-block;
width: 100%;
border-radius: var(--r-sm);
font-weight: 600;
font-size: 0.9375rem;
padding: 0.7rem 1.4rem;
margin-top: 0.75rem;
text-align: center;
text-decoration: none;
border: 1px solid transparent;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.alloycms .pricing-tier a.pricing-tier__cta--primary { background: var(--brand-500); color: var(--on-fill); }
body.alloycms .pricing-tier a.pricing-tier__cta--primary:hover { background: var(--brand-600); color: var(--on-fill); }
body.alloycms .pricing-tier a.pricing-tier__cta--ghost { color: var(--brand-600); border-color: var(--border-strong); background: transparent; }
body.alloycms .pricing-tier a.pricing-tier__cta--ghost:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); }
/* ── Testimonial ──────────────────────────────────────────────────────── */
.testimonial {
border-left: 3px solid var(--brand-400);
padding: 0.25rem 0 0.25rem 1.5rem;
margin: 0;
}
.testimonial .blockquote { margin-bottom: 0.75rem; }
.testimonial .blockquote p {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.125rem, 2vw, 1.375rem);
line-height: 1.45;
color: var(--ink);
letter-spacing: -0.015em;
}
.testimonial .blockquote-footer { color: var(--subtle); font-size: 0.9rem; margin-top: 0; }
.testimonial .blockquote-footer cite { font-style: normal; }
/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-container { max-width: 46rem; margin-inline: auto; padding-inline: 1.5rem; }
.faq-container > h2 { margin-bottom: 0.5rem; }
.faq-container > p { margin-bottom: 1.5rem; color: var(--muted); }
.faq-item {
border-bottom: 1px solid var(--border);
padding-block: 1rem;
}
.faq-item summary {
font-weight: 600;
color: var(--ink);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
border-radius: var(--r-xs);
}
.faq-item summary:hover { color: var(--brand-600); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
font-family: var(--font-mono);
color: var(--brand-500);
font-size: 1.2rem;
line-height: 1;
flex: none;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.9375rem; }
/* ── CTA band ─────────────────────────────────────────────────────────── */
.cta-band {
position: relative;
overflow: hidden;
background: var(--brand-700);
color: var(--on-fill);
border-radius: var(--r-xl);
padding: clamp(2.5rem, 5vw, 3.5rem);
text-align: center;
margin: clamp(2rem, 4vw, 3rem) auto;
max-width: 62rem;
box-shadow: var(--shadow-brand);
}
.cta-band .h4 {
font-family: var(--font-display);
font-weight: 700;
color: var(--on-fill);
font-size: clamp(1.4rem, 2.6vw, 1.875rem);
letter-spacing: -0.02em;
margin-bottom: 1.25rem;
}
.cta-band .cta-band__cta,
body.alloycms .cta-band a.cta-band__cta {
display: inline-block;
background: var(--on-fill);
color: var(--brand-700);
border: 0;
border-radius: var(--r-sm);
padding: 0.8rem 1.75rem;
font-weight: 600;
text-decoration: none;
box-shadow: var(--shadow-md);
transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
body.alloycms .cta-band a.cta-band__cta:hover {
color: var(--brand-800);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* ── Callout ──────────────────────────────────────────────────────────── */
.callout {
border: 1px solid var(--border);
border-left: 3px solid var(--brand-400);
background: var(--brand-50);
border-radius: var(--r-sm);
max-width: 46rem;
margin: clamp(1.5rem, 3vw, 2.5rem) auto;
padding: 1.15rem 1.4rem;
color: var(--ink);
}
.callout.alert-warning { border-left-color: var(--warn); background: var(--warn-bg); }
.callout.alert-success { border-left-color: var(--positive); background: var(--positive-bg); }
.callout h4 {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--subtle);
margin-bottom: 0.4rem;
}
.callout.alert-warning h4 { color: var(--warn); }
.callout.alert-success h4 { color: var(--positive); }
.callout p { color: var(--muted); font-size: 0.9375rem; margin: 0; }
/* ── Author card / misc ───────────────────────────────────────────────── */
.author-card { gap: 1rem; }
.author-card img { border-radius: 999px; }
.author-card .author-card__name { font-weight: 600; color: var(--ink); }
.author-card .author-card__role { color: var(--subtle); font-size: 0.875rem; }
.author-card p { font-size: 0.9rem; margin: 0.35rem 0 0; }
.text-block { max-width: 46rem; margin-inline: auto; }
.text-block p { color: var(--muted); font-size: 1.0625rem; line-height: 1.7; }
.outcome-item { padding: 0.75rem; text-align: center; }
.outcome-item .display-6 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.6rem, 2.8vw, 2rem);
color: var(--brand-700);
letter-spacing: -0.02em;
}
.outcome-item .outcome-item__label {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--subtle);
font-weight: 600;
margin-top: 0.4rem;
}
.outcome-item p { font-size: 0.875rem; margin-top: 0.5rem; }
/* ── Traditional pages served under the experiences ───────────────────── */
body.alloycms .content { max-width: 46rem; }
body.alloycms .content h1 { margin-bottom: 0.5rem; }
body.alloycms .content h2 { margin-top: 2.5rem; margin-bottom: 0.75rem; font-size: clamp(1.35rem, 2.2vw, 1.6rem); }
body.alloycms .content h3 { margin-top: 1.75rem; margin-bottom: 0.35rem; }
body.alloycms .content .lead { color: var(--muted); font-size: 1.125rem; margin-bottom: 1.5rem; }
body.alloycms .content p { color: var(--muted); line-height: 1.7; }
/* Alloy Bank product pages read as full-width prose, no Alloy left rail */
body.alloycms .aside { display: none; }
body.alloycms .content,
body.alloycms .col-12.col-lg-9 { flex: 0 0 100%; max-width: 46rem; margin-inline: auto; }
body.alloycms nav[aria-label] a,
body.alloycms .breadcrumb a { color: var(--brand-500); }
body.alloycms .content > div[epi-property] .cta-band,
body.alloycms .content .cta-band { margin-top: 3rem; }
body.alloycms .blog-masthead {
position: relative;
overflow: hidden;
background: var(--brand-700);
color: var(--on-fill);
border-radius: var(--r-xl);
padding: clamp(2rem, 4.5vw, 3.5rem);
margin-block: clamp(1.5rem, 3vw, 2.5rem);
box-shadow: var(--shadow-brand);
}
body.alloycms .blog-masthead h1 { color: var(--on-fill); }
body.alloycms .blog-masthead .lead { color: var(--brand-100); font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
body.alloycms .blog-masthead .blog-masthead__meta { color: var(--brand-200); font-size: 0.875rem; margin-bottom: 0; }
body.alloycms .blog-masthead img { border-radius: var(--r-md); }
/* ════════════════════════════════════════════════════════════════════════════
6. Visual Builder display-setting utilities
Editor-chosen display settings (More … → Style) and "Display as" variants
land as these classes on the block / section / hero wrapper via
Helpers/VisualBuilderStyles.cs. Choice keys mirror
Business/Seeding/DisplaySettingsLibrary.cs.
Scoped to `body.alloycms`, NOT `.vb-experience`, so they also reach blocks
rendered on traditional pages nested under an experience and the blog
masthead, which sit outside the .vb-experience wrapper.
═══════════════════════════════════════════════════════════════════════════ */
/* ── background ──────────────────────────────────────────────────────────── */
body.alloycms .vbg-white,
body.alloycms .vbg-offwhite,
body.alloycms .vbg-blue,
body.alloycms .vbg-brand,
body.alloycms .vbg-dark { border-radius: var(--r-lg); }
body.alloycms .vbg-white { background: var(--card); }
body.alloycms .vbg-offwhite { background: var(--surface-1); }
body.alloycms .vbg-blue { background: var(--brand-100); }
body.alloycms .vbg-brand { background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%); }
body.alloycms .vbg-dark { background: var(--brand-900); }
/* "White" on a section means "no band" — the page ground already is white. */
body.alloycms .vb-section.vbg-white { background: transparent; border-radius: 0; }
/* ── auto contrast ───────────────────────────────────────────────────────────
Text has to follow whatever ground the editor picked, or a background choice
produces unreadable output (CTA + White was white-on-white; stats on Brand
were dark-on-dark). Several blocks style their text through *classes* on
s (.h4, .display-5, .stat-counter__label …), so element selectors alone
never reach them — those class names are listed explicitly below.
`a` is excluded: links and buttons carry their own rules further down.
Everything here yields to an explicit Text colour choice via :not(vtc-). */
:root {
--on-dark-ground: var(--on-fill);
--on-dark-ground-dim: var(--brand-100);
}
/* the text-bearing hooks used across the blocks */
/* stylelint-disable-next-line no-descending-specificity */
body.alloycms :is(.vbg-brand, .vbg-dark):not([class*="vtc-"]) {
color: var(--on-dark-ground);
}
body.alloycms :is(.vbg-brand, .vbg-dark):not([class*="vtc-"])
:is(h1, h2, h3, h4, h5, li, summary, blockquote,
.h4, .display-5, .display-6, .card-title, .stat-counter__suffix,
.author-card__name, .pricing-tier .badge) { color: var(--on-dark-ground); }
body.alloycms :is(.vbg-brand, .vbg-dark):not([class*="vtc-"])
:is(p, cite, figcaption, .card-text, .blockquote-footer, .stat-counter__label,
.outcome-item__label, .author-card__role, .pricing-tier__period,
.lead) { color: var(--on-dark-ground-dim); }
body.alloycms :is(.vbg-brand, .vbg-dark):not([class*="vtc-"]) a:not([class*="__cta"]) {
color: var(--on-dark-ground);
text-decoration-color: rgba(255, 255, 255, 0.5);
}
body.alloycms :is(.vbg-white, .vbg-offwhite, .vbg-blue):not([class*="vtc-"]) { color: var(--ink); }
body.alloycms :is(.vbg-white, .vbg-offwhite, .vbg-blue):not([class*="vtc-"])
:is(h1, h2, h3, h4, h5, li, summary, blockquote,
.h4, .card-title, .author-card__name) { color: var(--ink); }
body.alloycms :is(.vbg-white, .vbg-offwhite, .vbg-blue):not([class*="vtc-"])
:is(p, cite, figcaption, .card-text, .blockquote-footer, .lead) { color: var(--muted); }
body.alloycms :is(.vbg-white, .vbg-offwhite, .vbg-blue):not([class*="vtc-"])
:is(.stat-counter__label, .outcome-item__label, .author-card__role,
.pricing-tier__period) { color: var(--subtle); }
body.alloycms :is(.vbg-white, .vbg-offwhite, .vbg-blue):not([class*="vtc-"])
:is(.display-5, .display-6) { color: var(--brand-700); }
body.alloycms :is(.vbg-white, .vbg-offwhite, .vbg-blue):not([class*="vtc-"])
.stat-counter__suffix { color: var(--brand-400); }
/* Hero, CTA band and blog masthead sit on a dark brand ground by default, i.e.
when no Background has been chosen at all. State their contrast explicitly
rather than leaning on `color: inherit`, which loses to `body.alloycms h1`. */
body.alloycms :is(.hero-block, .cta-band, .blog-masthead):not([class*="vbg-"]):not([class*="vtc-"]) {
color: var(--on-dark-ground);
}
body.alloycms :is(.hero-block, .cta-band, .blog-masthead):not([class*="vbg-"]):not([class*="vtc-"])
:is(h1, h2, h3, h4, h5, .h4) { color: var(--on-dark-ground); }
body.alloycms :is(.hero-block, .cta-band, .blog-masthead):not([class*="vbg-"]):not([class*="vtc-"])
:is(p, .lead, .blog-masthead__meta) { color: var(--on-dark-ground-dim); }
/* A white pill on a light ground is invisible — invert the buttons there. */
body.alloycms :is(.vbg-white, .vbg-offwhite, .vbg-blue) a.hero-block__cta,
body.alloycms :is(.vbg-white, .vbg-offwhite, .vbg-blue) a.cta-band__cta {
background: var(--brand-500);
color: var(--on-fill);
}
body.alloycms :is(.vbg-white, .vbg-offwhite, .vbg-blue) a.hero-block__cta:hover,
body.alloycms :is(.vbg-white, .vbg-offwhite, .vbg-blue) a.cta-band__cta:hover {
background: var(--brand-600);
color: var(--on-fill);
}
/* padded interior when a bare block gets a solid ground it didn't have before */
body.alloycms .section-heading[class*="vbg-"],
body.alloycms .text-block[class*="vbg-"],
body.alloycms .testimonial[class*="vbg-"],
body.alloycms .stat-counter[class*="vbg-"],
body.alloycms .outcome-item[class*="vbg-"],
body.alloycms .author-card[class*="vbg-"] { padding: clamp(1.5rem, 3vw, 2.25rem); }
/* …except when that ground is the page ground itself */
body.alloycms .vb-section.vbg-white { padding-inline: 0; }
/* ── text colour ────────────────────────────────────────────────────────── */
body.alloycms .vtc-dark, body.alloycms .vtc-dark :is(h1, h2, h3, h4, h5, p, span, cite, li, summary) { color: var(--ink); }
body.alloycms .vtc-muted, body.alloycms .vtc-muted :is(h1, h2, h3, h4, h5, p, span, cite, li, summary) { color: var(--muted); }
body.alloycms .vtc-brand, body.alloycms .vtc-brand :is(h1, h2, h3, h4, h5, p, span, cite, li, summary) { color: var(--brand-600); }
body.alloycms .vtc-teal, body.alloycms .vtc-teal :is(h1, h2, h3, h4, h5, p, span, cite, li, summary) { color: var(--brand-400); }
body.alloycms .vtc-light, body.alloycms .vtc-light :is(h1, h2, h3, h4, h5, p, span, cite, li, summary) { color: var(--on-fill); }
/* ── heading size ───────────────────────────────────────────────────────── */
body.alloycms .vh-xl :is(h1, h2, h3) { font-size: clamp(2.2rem, 4.6vw, 3.25rem); line-height: 1.06; }
body.alloycms .vh-lg :is(h1, h2, h3) { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.12; }
body.alloycms .vh-md :is(h1, h2, h3) { font-size: clamp(1.4rem, 2.4vw, 1.875rem); line-height: 1.2; }
body.alloycms .vh-sm :is(h1, h2, h3) { font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.3; }
/* ── font family ────────────────────────────────────────────────────────── */
body.alloycms .vf-display, body.alloycms .vf-display :is(h1, h2, h3, h4, p, span) { font-family: var(--font-display); }
body.alloycms .vf-body, body.alloycms .vf-body :is(h1, h2, h3, h4, p, span) { font-family: var(--font-body); }
body.alloycms .vf-mono, body.alloycms .vf-mono :is(h1, h2, h3, h4, p, span) { font-family: var(--font-mono); letter-spacing: -0.02em; }
/* ── text alignment ─────────────────────────────────────────────────────── */
body.alloycms .va-left { text-align: left; }
body.alloycms .va-center { text-align: center; }
body.alloycms .va-right { text-align: right; }
body.alloycms .va-center :is(p, .lead) { margin-inline: auto; }
body.alloycms .va-center .testimonial { border-left: 0; padding-left: 0; }
/* ── body text size ─────────────────────────────────────────────────────── */
body.alloycms .vts-sm, body.alloycms .vts-sm p { font-size: 0.875rem; }
body.alloycms .vts-md, body.alloycms .vts-md p { font-size: 1.0625rem; }
body.alloycms .vts-lg, body.alloycms .vts-lg p { font-size: 1.1875rem; line-height: 1.65; }
/* ── section: vertical padding / divider / corner radius ─────────────────── */
body.alloycms .vpy-0 { padding-top: 0; padding-bottom: 0; }
body.alloycms .vpy-2 { padding-top: clamp(1.25rem, 2.5vw, 1.75rem); padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
body.alloycms .vpy-4 { padding-top: var(--pad-band-y); padding-bottom: var(--pad-band-y); }
body.alloycms .vpy-6 { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
body.alloycms .vdiv-top { border-top: 1px solid var(--border); }
body.alloycms .vdiv-bottom { border-bottom: 1px solid var(--border); }
body.alloycms .vradius-0 { border-radius: 0; }
body.alloycms .vradius-pill { border-radius: clamp(2rem, 5vw, 3.5rem); }
/* ── row: gap / vertical alignment / max width / reverse ─────────────────── */
body.alloycms .vgap-2 .vb-row, body.alloycms .vb-row.vgap-2 { gap: 0.75rem; }
body.alloycms .vgap-4 .vb-row, body.alloycms .vb-row.vgap-4 { gap: 1.5rem; }
body.alloycms .vgap-6 .vb-row, body.alloycms .vb-row.vgap-6 { gap: 2.5rem; }
body.alloycms .valign-top .vb-row, body.alloycms .vb-row.valign-top { align-items: flex-start; }
body.alloycms .valign-center .vb-row, body.alloycms .vb-row.valign-center { align-items: center; }
body.alloycms .valign-stretch .vb-row, body.alloycms .vb-row.valign-stretch { align-items: stretch; }
body.alloycms .vrow--wide { max-width: 68rem; margin-inline: auto; }
body.alloycms .vrow--narrow { max-width: 38rem; margin-inline: auto; }
body.alloycms .vb-row--reverse { flex-direction: row-reverse; }
/* ── column: padding / rounded ──────────────────────────────────────────── */
body.alloycms .vp-0 { padding: 0; }
body.alloycms .vp-2 { padding: 0.75rem; }
body.alloycms .vp-4 { padding: 1.5rem; }
body.alloycms .vp-6 { padding: 2.5rem; }
body.alloycms .vb-col--rounded { border-radius: var(--r-md); overflow: hidden; }
/* ── block-specific toggles ─────────────────────────────────────────────── */
body.alloycms .vb-hide-icon .product-card__icon,
body.alloycms .vb-hide-icon.callout h4,
body.alloycms .product-card.vb-hide-icon .product-card__icon { display: none; }
body.alloycms .outcome-item.vb-hide-detail p { display: none; }
body.alloycms .section-heading.vb-show-accent h2::before {
content: "";
display: block;
width: 2.25rem;
height: 3px;
background: var(--accent-500);
border-radius: 2px;
margin-bottom: 0.9rem;
}
body.alloycms .section-heading.vb-show-accent.va-center h2::before { margin-inline: auto; }
body.alloycms .hero-block.vb-overlay::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(12, 28, 94, 0.72), rgba(13, 20, 37, 0.5));
z-index: -1;
}
/* ════════════════════════════════════════════════════════════════════════════
7. "Display as" variant modifiers
═══════════════════════════════════════════════════════════════════════════ */
/* Variants only supply a background when the editor has NOT chosen one. Without the
:not() guard these rules tie with the vbg-* utilities on specificity and win on
source order, which is why a Featured card ignored its Background setting. */
body.alloycms .vb-productcard--featured {
border-color: transparent;
box-shadow: var(--shadow-brand);
}
body.alloycms .vb-productcard--featured:not([class*="vbg-"]) { background: var(--brand-700); }
body.alloycms .vb-productcard--featured:not([class*="vbg-"]):not([class*="vtc-"]) :is(h3, .card-title) { color: var(--on-fill); }
body.alloycms .vb-productcard--featured:not([class*="vbg-"]):not([class*="vtc-"]) .card-text { color: var(--brand-100); }
body.alloycms .vb-productcard--featured:not([class*="vbg-"]) a,
body.alloycms .vb-productcard--featured:not([class*="vbg-"]):hover a { color: var(--on-fill); }
body.alloycms .vb-productcard--featured:not([class*="vbg-"]) .product-card__icon { background: rgba(255, 255, 255, 0.18); color: var(--on-fill); }
body.alloycms .vb-testimonial--card {
border: 1px solid var(--border);
border-left: 3px solid var(--brand-400);
padding: clamp(1.5rem, 3vw, 2rem);
border-radius: var(--r-md);
box-shadow: var(--shadow-xs);
}
body.alloycms .vb-testimonial--card:not([class*="vbg-"]) { background: var(--card); }
body.alloycms .vb-testimonial--minimal { border: 0; padding-left: 0; }
body.alloycms .vb-testimonial--minimal .blockquote p { font-size: 1.0625rem; font-weight: 400; font-family: var(--font-body); }
body.alloycms .vb-stat--accent {
border-radius: var(--r-md);
padding: 1.75rem 1rem;
}
body.alloycms .vb-stat--accent:not([class*="vbg-"]) { background: var(--brand-700); }
body.alloycms .vb-stat--accent:not([class*="vbg-"]):not([class*="vtc-"]) :is(.display-5, .stat-counter__suffix) { color: var(--on-fill); }
body.alloycms .vb-stat--accent:not([class*="vbg-"]):not([class*="vtc-"]) .stat-counter__label { color: var(--brand-200); }
body.alloycms .vb-stat--highlight .display-5,
body.alloycms .vb-stat--highlight .stat-counter__suffix { color: var(--accent-600); }
body.alloycms .vb-heading--centered { text-align: center; }
body.alloycms .vb-heading--centered h2 { margin-inline: auto; }
body.alloycms .vb-heading--centered p { margin-inline: auto; }
body.alloycms .vb-cta--outline {
border: 1px solid var(--brand-200);
box-shadow: var(--shadow-xs);
}
body.alloycms .vb-cta--outline:not([class*="vbg-"]) { background: var(--card); }
body.alloycms .vb-cta--outline:not([class*="vbg-"]):not([class*="vtc-"]),
body.alloycms .vb-cta--outline:not([class*="vbg-"]):not([class*="vtc-"]) :is(.h4, p) { color: var(--ink); }
body.alloycms .vb-cta--outline a.cta-band__cta { background: var(--brand-500); color: var(--on-fill); }
body.alloycms .vb-cta--outline a.cta-band__cta:hover { background: var(--brand-600); color: var(--on-fill); }
body.alloycms .vb-cta--ghost { box-shadow: none; }
body.alloycms .vb-cta--ghost:not([class*="vbg-"]) { background: var(--surface-1); }
body.alloycms .vb-cta--ghost:not([class*="vbg-"]):not([class*="vtc-"]),
body.alloycms .vb-cta--ghost:not([class*="vbg-"]):not([class*="vtc-"]) :is(.h4, p) { color: var(--ink); }
body.alloycms .vb-cta--ghost a.cta-band__cta { background: var(--brand-500); color: var(--on-fill); }
body.alloycms .vb-cta--ghost a.cta-band__cta:hover { background: var(--brand-600); color: var(--on-fill); }
body.alloycms .vb-faq--flat { border-bottom: 0; }
body.alloycms .vb-faq--flat summary::after { content: none; }
/* ════════════════════════════════════════════════════════════════════════════
8. Responsive
═══════════════════════════════════════════════════════════════════════════ */
/* 4-up card rows go 2-up before they squeeze */
@media (max-width: 1024px) {
.vb-row > .vb-col { flex: 1 1 calc(50% - 0.75rem); }
}
@media (max-width: 860px) {
body.alloycms .container { padding-inline: 1rem; max-width: 100vw; }
.vb-experience,
.vb-experience > div,
.vb-experience > section,
.vb-grid, .vb-row, .vb-col,
.vb-section, .hero-block, .cta-band, .faq-container, .callout, .text-block {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
body.alloycms .vb-section { padding-block: 2rem; }
body.alloycms .vb-section.vbg-offwhite,
body.alloycms .vb-section.vbg-blue,
body.alloycms .vb-section.vbg-brand,
body.alloycms .vb-section.vbg-dark { padding-inline: 1.25rem; border-radius: var(--r-lg); }
.hero-block { padding: 2rem 1.5rem; border-radius: var(--r-lg); }
.cta-band { padding: 2rem 1.5rem; border-radius: var(--r-lg); }
body.alloycms .blog-masthead { padding: 1.75rem 1.5rem; border-radius: var(--r-lg); }
.faq-container { padding-inline: 0; }
.vb-row { gap: 1rem; flex-direction: column; }
.vb-row > .vb-col { flex: 1 1 100%; }
body.alloycms .navbar .container-fluid { flex-wrap: wrap; row-gap: 0.5rem; }
body.alloycms form.d-flex { width: 100%; margin-top: 0.5rem; margin-left: 0; }
}
/* ════════════════════════════════════════════════════════════════════════════
9. Motion / focus
═══════════════════════════════════════════════════════════════════════════ */
body.alloycms :focus-visible {
outline: 2px solid var(--brand-500);
outline-offset: 2px;
border-radius: var(--r-xs);
}
@media (prefers-reduced-motion: reduce) {
body.alloycms *,
body.alloycms *::before,
body.alloycms *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.product-card:hover,
body.alloycms .hero-block a.hero-block__cta:hover,
body.alloycms .cta-band a.cta-band__cta:hover { transform: none; }
.product-card:hover .product-card__arrow { transform: none; }
}