/*
* Shared stylesheet for the "light view" content blocks — the fonts, card
* shapes, and layout used by 1-plateau-explainer.html,
* 2-plateau-cta-options.html, and any future block that should look
* consistent with them. One place to load the fonts and tweak the shared
* look instead of copy-pasting the same CSS into every Custom HTML block.
*
* Usage: link this file once from the block's HTML —
*
* — then build the block's markup with the .sflv-* classes below, wrapped
* in a single root element carrying the "sflv" class.
*
* Color schemes: the base ".sflv" palette (teal accent, light background)
* is the default. Add a second class alongside it to pick a different
* color scheme without changing anything else — fonts, spacing, and card
* shapes stay identical, only the CSS variables change:
* — amber/rust accent, still light
* — quiet anthracite accent, still light
* — dark navy background, bright teal accent
* See the "COLOR SCHEMES" section at the bottom of this file to add a 5th.
*/
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Kanit:wght@400;500;600&display=swap');
.sflv {
--sflv-navy: #1c2736;
--sflv-ink: #2f3437;
--sflv-secondary: #3a4150;
--sflv-body: #5b6270;
--sflv-paper: #fafafa;
--sflv-panel: #ffffff;
--sflv-line: #d8dde0;
--sflv-muted: #9aa2a7;
--sflv-teal: #0091ad;
--sflv-teal-deep: #00768c;
--sflv-btn-text: #fff;
--sflv-secondary-hover: #eaf8ff;
background: var(--sflv-paper);
color: var(--sflv-ink);
font-family: 'Figtree', system-ui, sans-serif;
line-height: 1.6;
padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
box-sizing: border-box;
}
.sflv * { box-sizing: border-box; }
.sflv h2, .sflv h3 { font-family: 'Kanit', system-ui, sans-serif; text-wrap: balance; margin: 0; }
/* Use on a section that should sit closer to the block above it (e.g. a
CTA row directly under an explainer) instead of the default padding. */
.sflv.is-compact { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.sflv-wrap { max-width: 46rem; margin: 0 auto; }
.sflv-eyebrow {
display: block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sflv-teal-deep);
margin: 0 0 0.75rem;
}
.sflv-wrap h2 {
font-size: clamp(1.6rem, 3.2vw, 2.2rem);
font-weight: 600;
color: var(--sflv-navy);
}
.sflv-lede {
font-size: 1.05rem;
color: var(--sflv-secondary);
margin: 1.1rem 0 0;
max-width: 40rem;
}
/* A callout card with a teal left border — used for a single highlighted
point (e.g. the plateau diagram + explanation). */
.sflv-panel {
position: relative;
margin: 2.25rem 0 0;
padding: 1.5rem 1.5rem 1.5rem 1.75rem;
background: var(--sflv-panel);
border: 1px solid var(--sflv-line);
border-left: 3px solid var(--sflv-teal);
border-radius: 10px;
}
.sflv-panel svg { display: block; width: 100%; max-width: 22rem; height: auto; margin-bottom: 1rem; }
.sflv-panel p { margin: 0; font-size: 0.98rem; color: var(--sflv-secondary); }
.sflv-panel p strong { color: var(--sflv-navy); }
/* A row of option cards (e.g. two CTA paths) — wraps to one column below ~640px. */
.sflv-cards {
max-width: 46rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1.1rem;
}
.sflv-card {
background: var(--sflv-panel);
border: 1px solid var(--sflv-line);
border-radius: 14px;
padding: 1.5rem 1.5rem 1.35rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sflv-card-tag {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sflv-teal-deep);
}
.sflv-card h3 { font-size: 1.15rem; font-weight: 600; color: var(--sflv-navy); }
.sflv-card p { margin: 0; font-size: 0.94rem; color: var(--sflv-body); flex-grow: 1; }
.sflv-btn {
display: inline-block;
margin-top: 0.6rem;
align-self: flex-start;
text-decoration: none;
padding: 0.6rem 1.15rem;
border-radius: 999px;
background: var(--sflv-teal);
color: var(--sflv-btn-text);
font-weight: 700;
font-size: 0.88rem;
}
.sflv-btn:hover { background: var(--sflv-teal-deep); }
/* Add alongside .sflv-card for the visually secondary option in a pair
(outlined button instead of filled). */
.sflv-card.is-secondary .sflv-btn {
background: transparent;
border: 1px solid var(--sflv-teal);
color: var(--sflv-teal-deep);
}
.sflv-card.is-secondary .sflv-btn:hover { background: var(--sflv-secondary-hover); }
/* ------------------------------------------------------------------ */
/* COLOR SCHEMES — override only the variables, never the rules above, */
/* so every scheme automatically gets the same fonts/spacing/shapes. */
/* Add a scheme by copying one of these blocks with a new class name */
/* and new values — nothing else in this file needs to change. */
/* ------------------------------------------------------------------ */
/* theme-warm — same light background, amber/rust accent instead of teal. */
.sflv.theme-warm {
--sflv-teal: #d9932f;
--sflv-teal-deep: #b3392f;
}
/* theme-mono — same light background, quiet anthracite accent. */
.sflv.theme-mono {
--sflv-teal: #2f3437;
--sflv-teal-deep: #101722;
--sflv-secondary-hover: #f0f0f0;
}
/* theme-night — dark navy background (matches the site's dark-card
components, e.g. retreat-weekly-offer / credit-package-offers), bright
teal accent. Flips every text/surface variable, not just the accent. */
.sflv.theme-night {
--sflv-navy: #ffffff;
--sflv-ink: #fff8ec;
--sflv-secondary: #c7cedb;
--sflv-body: #b7c0cf;
--sflv-paper: #1c2736;
--sflv-panel: #101722;
--sflv-line: rgba(255, 255, 255, 0.08);
--sflv-muted: #8b93a1;
--sflv-teal: #45dae7;
--sflv-teal-deep: #ffffff;
--sflv-btn-text: #101722;
--sflv-secondary-hover: rgba(69, 218, 231, 0.12);
}