:hover (no !important). Hover cue = title warms to cobalt AND the whole module lifts
slightly (brightness). The lift is what gives subtitle-only rows, e.g. the city links, a hover
cue at all, since those have no .rc-feature-title to recolor. */
a.rc-feature-inner,
a.rc-feature-inner:hover,
a.rc-feature-inner:focus { text-decoration: none; }
a.rc-feature-inner { transition: filter .15s ease; }
a.rc-feature-inner:hover .rc-feature-title { color: var(--color-primary, #2455B8); }
a.rc-feature-inner:hover { filter: brightness(1.05); }
/* Dark-section legibility (title/sub flip automatically on .section-dark rows) */
.section-dark .rc-feature-title, .on-dark .rc-feature-title { color: #fff; }
.section-dark .rc-feature-sub, .on-dark .rc-feature-sub { color: rgba(255,255,255,.72); }
/* Inline-edit safety: while a module's panel is open, BB attaches a TinyMCE inline editor to the
title/subtitle, which wraps the text in a . Left alone that
inherits the theme's muted p
color + margin, so the open row looks lighter and mis-spaced vs its closed siblings. Force any
nested
to take the container's own styling. (Saved output has its tags stripped by the module.) */
.rc-feature-title > p, .rc-feature-sub > p,
.rc-card-title > p, .rc-card-body > p { margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; }
/* ============================================================
10. CALLOUT CARD — .rc-card (icon + title + body + arrow link)
Output by the Quick Card module. The whole card is clickable via a
"stretched link" (the bottom link's ::after covers the card), so it's
one focus target. Text sizes use the named --text-* tokens (no magic
numbers). Icon reuses §8 .rc-icon-tile.
• Hover lift is gated to pointer devices (@media hover:hover).
• Touch/keyboard get the same lift via :focus-within + :active, and
a focus ring on keyboard (:has(:focus-visible)) — so it feels right
on mobile where there is no hover.
============================================================ */
.rc-card {
position: relative;
display: flex; flex-direction: column; align-items: flex-start;
padding: var(--space-6, 32px);
background: var(--color-bg, #fff);
border: 1px solid var(--color-border, #E3E7EE);
border-radius: var(--r-xl, 24px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(36,85,184,.06));
transition: transform var(--t-med, 220ms) var(--ease, ease),
box-shadow var(--t-med, 220ms) var(--ease, ease),
border-color var(--t-med, 220ms) var(--ease, ease);
}
/* Equal-height cards: when Quick Cards sit in a grid/flex Box, the grid cell and the
BB module wrapper already stretch, but the visible .rc-card must fill that height too,
or each card collapses to its own content and a row looks ragged. Fill the wrapper
chain so every card in a row matches the tallest; .rc-card-link's margin-top:auto
then pins each CTA to the bottom. Harmless outside a stretching container (100% of an
auto-height parent is a no-op). */
.fl-module-rc-card,
.fl-module-rc-card > .fl-module-content,
.fl-module-rc-card > .fl-module-content > .rc-card { height: 100%; }
.rc-card > .rc-icon-tile { margin-bottom: var(--space-5, 24px); }
.rc-card-title {
font-family: var(--f-display, 'Manrope', sans-serif);
font-weight: var(--fw-bold, 700);
font-size: var(--text-subhead, 1.25rem); line-height: 1.25;
color: var(--color-fg, #1A2331);
margin: 0 0 var(--space-2, 8px);
}
.rc-card-body {
font-family: var(--f-body, 'Inter', sans-serif);
font-size: var(--text-body-sm, 0.95rem); line-height: var(--lh-relaxed, 1.65);
color: var(--color-fg-muted, #4A5566);
margin: 0 0 var(--space-5, 24px);
}
.rc-card-link {
margin-top: auto; /* pin to the bottom so cards in a row align */
display: inline-flex; align-items: center; gap: var(--space-2, 8px);
font-family: var(--f-display, 'Manrope', sans-serif);
font-weight: var(--fw-semibold, 600);
font-size: var(--text-small, 0.85rem);
color: var(--color-primary, #2455B8);
text-decoration: none;
}
.rc-card-arrow { transition: transform var(--t-fast, 150ms) var(--ease, ease); }
/* stretched link: whole card is the click/tap target, one focus element */
.rc-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Never underline the arrow-link: the whole card is the affordance, and some themes
add an a:hover underline that reads as a stray line under the label. */
.rc-card-link,
.rc-card-link:hover,
.rc-card-link:focus,
.rc-card-link:focus-visible,
.rc-card-link:active,
.rc-card-link:hover .rc-card-link-text,
.rc-card-link:focus .rc-card-link-text { text-decoration: none; }
/* HOVER — pointer devices only (avoids sticky hover on touch) */
@media (hover: hover) {
.rc-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg, 0 16px 40px rgba(36,85,184,.14));
border-color: transparent;
}
.rc-card:hover .rc-card-arrow { transform: translateX(4px); }
.rc-card:hover .rc-card-link { color: var(--color-primary-700, #1B3E89); }
}
/* FOCUS / ACTIVE — touch + keyboard get the same lift (this is the mobile "hover") */
.rc-card:focus-within {
transform: translateY(-4px);
box-shadow: var(--shadow-lg, 0 16px 40px rgba(36,85,184,.14));
border-color: transparent;
}
.rc-card:focus-within .rc-card-arrow { transform: translateX(4px); }
.rc-card:active { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 4px 16px rgba(36,85,184,.08)); }
/* The whole card carries the focus indication (lift + ring), so kill the
inner link's default browser outline — otherwise a tap shows an ugly box. */
.rc-card-link:focus { outline: none; }
/* Visible focus ring for keyboard only (not on mouse/touch press) */
.rc-card:has(.rc-card-link:focus-visible) { outline: 2px solid var(--color-primary, #2455B8); outline-offset: 3px; }
/* ============================================================
8. FORMS (Fluent Forms)
Styling for forms rendered by the RC Form module. All visuals
live here (never in the module). Fluent Forms output classes are
mapped to the mockup's .field / .hero-form-card / primary-button
look, driven by the client design tokens.
============================================================ */
/* Card vs plain wrapper */
.rc-form--card {
background: #fff;
border: 1px solid var(--color-border, #E3E7EE);
border-radius: var(--r-xl, 24px);
padding: var(--space-6, 32px);
box-shadow: var(--shadow-lg, 0 16px 40px rgba(36,85,184,.14));
max-width: 520px;
}
.rc-form--plain {
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
}
/* Labels */
.rc-form .ff-el-input--label label {
display: block;
font-family: var(--f-display, sans-serif);
font-size: .82rem;
font-weight: 600;
color: var(--color-fg, #1A2331);
margin-bottom: 6px;
}
.rc-form .ff-el-is-required > label:after,
.rc-form .ff-el-input--label.ff-el-is-required label:after {
color: var(--color-danger, #B42B2B);
}
/* Field spacing */
.rc-form .ff-el-group {
margin-bottom: var(--space-4, 16px);
}
/* Inputs, selects, textarea */
.rc-form .ff-el-form-control {
width: 100%;
padding: 13px 14px;
min-height: 48px;
font: inherit;
color: var(--color-fg, #1A2331);
background: var(--color-bg, #fff);
border: 1.5px solid var(--color-border-strong, #C9D1DD);
border-radius: var(--r-md, 10px);
transition: border-color var(--t-fast, 150ms) var(--ease, ease),
box-shadow var(--t-fast, 150ms) var(--ease, ease);
}
.rc-form textarea.ff-el-form-control {
min-height: 120px;
padding-top: 12px;
}
.rc-form .ff-el-form-control:focus {
outline: none;
border-color: var(--color-primary, #2455B8);
box-shadow: 0 0 0 4px rgba(36,85,184,.18);
}
.rc-form .ff-el-form-control::placeholder {
color: var(--color-fg-subtle, #6B7585);
}
/* Submit button — reuse the primary (cobalt) look from §7 */
.rc-form .ff-btn-submit,
.rc-form .ff_submit_btn_wrapper button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
padding: 0 26px;
font-family: var(--f-display, sans-serif);
font-weight: 700;
font-size: 1rem;
line-height: 1;
color: var(--color-on-primary, #fff);
background: var(--color-primary, #2455B8);
border: 0;
border-radius: var(--r-md, 10px);
cursor: pointer;
transition: background var(--t-fast, 150ms) var(--ease, ease),
transform var(--t-fast, 150ms) var(--ease, ease);
}
.rc-form .ff-btn-submit:hover,
.rc-form .ff_submit_btn_wrapper button:hover {
background: var(--color-primary-700, #1B3E89);
transform: translateY(-1px);
}
/* Full-width submit (module toggle) */
.rc-form--btn-full .ff-btn-submit,
.rc-form--btn-full .ff_submit_btn_wrapper button {
width: 100%;
}
/* Validation + success messages */
.rc-form .ff-el-is-error .ff-el-form-control {
border-color: var(--color-danger, #B42B2B);
}
.rc-form .error.text-danger,
.rc-form .ff-el-is-error .text-danger {
color: var(--color-danger, #B42B2B);
font-size: .8rem;
margin-top: 4px;
}
.rc-form .ff-message-success {
color: var(--color-success, #1E7F4F);
background: rgba(30,127,79,.08);
border: 1px solid rgba(30,127,79,.2);
border-radius: var(--r-md, 10px);
padding: var(--space-4, 16px);
}
/* ============================================================
11. BUTTON ICONS + TEXT-LINK / UNDERLINE (Button module)
The Button module renders EITHER a solid/line button (.rc-btn, §7) OR a
text link (.rc-link) with an animated underline. Either can carry an icon
before/after the text — shown always (optionally sliding on hover) or
revealed on hover. Works on both bases (classes are structure-agnostic).
============================================================ */
/* --- Icon inside a button or link --- */
.rc-btn-icon { display: inline-flex; align-items: center; line-height: 0; transition: transform var(--t-fast, 150ms) var(--ease, ease); }
.rc-btn-icon i, .rc-btn-icon svg { font-size: 1em; }
/* Slide on hover (icon stays visible, nudges outward) */
.rc-ico-slide:hover .rc-btn-icon-after, .rc-ico-slide:focus-visible .rc-btn-icon-after { transform: translateX(4px); }
.rc-ico-slide:hover .rc-btn-icon-before, .rc-ico-slide:focus-visible .rc-btn-icon-before { transform: translateX(-4px); }
/* Appear on hover (icon collapses to zero width until hover/focus) */
.rc-ico-reveal { gap: 0; }
.rc-ico-reveal .rc-btn-icon {
max-width: 0; opacity: 0; overflow: hidden;
transition: max-width var(--t-med, 220ms) var(--ease, ease), opacity var(--t-fast, 150ms) var(--ease, ease), margin var(--t-med, 220ms) var(--ease, ease);
}
.rc-ico-reveal:hover .rc-btn-icon, .rc-ico-reveal:focus-visible .rc-btn-icon { max-width: 1.5em; opacity: 1; }
.rc-ico-reveal:hover .rc-btn-icon-after, .rc-ico-reveal:focus-visible .rc-btn-icon-after { margin-left: var(--space-2, 8px); }
.rc-ico-reveal:hover .rc-btn-icon-before, .rc-ico-reveal:focus-visible .rc-btn-icon-before { margin-right: var(--space-2, 8px); }
/* --- Text link with underline effects --- */
.rc-link {
display: inline-flex; align-items: center; gap: var(--space-2, 8px); position: relative;
font-family: var(--f-display, 'Manrope', sans-serif); font-weight: var(--fw-semibold, 600);
font-size: var(--text-body, 1.0625rem); line-height: 1.3;
color: var(--color-primary, #2455B8); text-decoration: none !important; cursor: pointer;
}
.rc-link:focus-visible { outline: 2px solid var(--color-accent, #E63031); outline-offset: 3px; }
/* Color presets */
.rc-link.rc-link-ink { color: var(--color-fg, #1A2331); }
.rc-link.rc-link-light { color: #fff; }
.rc-link.rc-link-accent { color: var(--color-accent, #E63031); }
/* Underline is drawn under the TEXT span only (not the icon) */
.rc-link .rc-btn-text { position: relative; }
.rc-link .rc-btn-text::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform var(--t-med, 220ms) var(--ease, ease);
}
.rc-link.rc-underline .rc-btn-text::after { transform: scaleX(1); } /* always on */
.rc-link.rc-underline-hover:hover .rc-btn-text::after,
.rc-link.rc-underline-hover:focus-visible .rc-btn-text::after { transform: scaleX(1); } /* left → right on hover */
.rc-link.rc-underline-center .rc-btn-text::after { transform-origin: center; }
.rc-link.rc-underline-center:hover .rc-btn-text::after,
.rc-link.rc-underline-center:focus-visible .rc-btn-text::after { transform: scaleX(1); } /* grow from middle */
/* ============================================================
11. SIZE UTILITIES — .rc-size-* (the reconciled type scale as classes)
------------------------------------------------------------
One class per named step of the design-system scale. This is the
font-size layer for the RC Utilities modules: a module's Size dropdown
outputs ONE of these classes, and it is the ONLY thing setting font-size
on that node, so it wins on source order alone — NO !important.
Also apply manually via BB Advanced -> CSS Class on any element.
A Style-tab Typography size (BB node CSS, higher specificity) still
overrides these for genuine one-offs. Defined LAST on purpose, so they
beat the component defaults (eyebrow, badge, feature, card) at equal
specificity via source order.
============================================================ */
.rc-size-micro { font-size: var(--text-micro); }
.rc-size-meta { font-size: var(--text-meta); }
.rc-size-small { font-size: var(--text-small); }
.rc-size-body-sm { font-size: var(--text-body-sm); }
.rc-size-body { font-size: var(--text-body); }
.rc-size-lead { font-size: var(--text-lead); }
.rc-size-subhead { font-size: var(--text-subhead); }
.rc-size-title { font-size: var(--text-title); }
.rc-size-headline { font-size: var(--text-headline); }
.rc-size-display { font-size: var(--text-display); }
.rc-size-section { font-size: var(--text-section); }
.rc-size-statistic { font-size: var(--text-statistic); }
.rc-size-hero { font-size: var(--text-hero); }
/* ------------------------------------------------------------
Back-compat: Size values saved by the pre-2026-07-01 rc-text
module (tiny/medium/large/xl/xxl). Mapped to the nearest new
step (identical computed sizes) so existing nodes keep their
size until re-saved. 'small' already maps 1:1 to .rc-size-small.
Safe to delete once old nodes are updated to the named scale.
------------------------------------------------------------ */
.rc-size-tiny { font-size: var(--text-micro); }
.rc-size-medium { font-size: var(--text-subhead); }
.rc-size-large { font-size: var(--text-section); }
.rc-size-xl { font-size: var(--text-hero); }
.rc-size-xxl { font-size: var(--text-statistic); }
/* ============================================================
12. ACCORDION — .rc-accordion (FAQ / expandable Q&A)
Output by the RC Accordion module. Self-contained + independent
of Beaver Builder's own accordion. Smooth open/close via the
CSS-grid 0fr→1fr trick (no JS height math); plus/chevron icon is
CSS-drawn from two bars and animated off the .is-open
class. Two looks: --boxed (bordered cards) and --separated
(hairline rules). Every value pulls from the design tokens.
============================================================ */
.rc-accordion { width: 100%; }
.rc-accordion-item { position: relative; }
/* --- Header (the clickable question row) --------------------- */
.rc-accordion-header {
display: flex; align-items: center; gap: var(--space-4, 16px);
width: 100%; margin: 0; text-align: left; cursor: pointer;
background: transparent; border: 0;
padding: var(--space-4, 16px) var(--space-5, 24px);
font-family: var(--f-display, 'Manrope', system-ui, sans-serif);
font-weight: var(--fw-semibold, 600);
font-size: var(--text-subhead, 1.25rem);
line-height: var(--lh-snug, 1.3);
color: var(--color-fg, #1A2331);
-webkit-appearance: none; appearance: none;
transition: color var(--t-fast, 150ms) var(--ease, ease),
background var(--t-fast, 150ms) var(--ease, ease);
}
/* Neutralise the active theme's global