/* ─────────────────────────────────────────────────────────────────────────────
Organic design system for the static landing pages.
Used by about.html, om.html and the seven generated about-xx.html pages. These
are plain static files served outside the Blazor pipeline, so they cannot read
the tokens in _content/Varkappen.Shared/css/app.css — the palette is restated
here instead. Keep the :root block below in sync with app.css; those values are
the source of truth and this is a mirror.
Two class vocabularies are supported on purpose. about.html and om.html were
hand-written first (.feature-card, .rule-box, .step-num, .install-card); the
generated pages use a later, shorter set (.o-card, .rule, .step-n, .inst). The
pairs below style both so neither page's markup had to be rewritten to adopt
this file. If the hand-written pages are ever regenerated, the older half of
each pair can be dropped.
Bootstrap 5.3 loads BEFORE this file. Two consequences worth remembering:
- .accordion-button is variable-driven, so it is retheme'd via --bs-* custom
properties, not bare declarations that its state rules would outrank.
- never introduce a helper named .card / .badge / .row here; Bootstrap's own
rule would win for whatever property this file does not set.
───────────────────────────────────────────────────────────────────────────── */
:root {
--bg: #f5ead8;
--surface: #f9f4ed;
--surface-2: #efe3cf;
--ink: #201e1d;
--ink-soft: #5c534a;
--accent: #c67139; /* the base */
--accent-deep:#b2622d; /* accent-600 — button hover/pressed, matches app.css */
--accent-dark:#8c491a; /* accent-700 — accent-size text on cream; the base alone is only 3:1 */
--accent-light:#f6e3d3;
--sage: #7d8b6a;
--sage-100: #e8ece2;
--sage-700: #4d5940;
--radius: 28px;
--radius-sm: 18px;
--radius-pill:999px;
--shadow-sm: 0 2px 10px rgba(32, 30, 29, .07);
--shadow-md: 0 8px 28px rgba(32, 30, 29, .11);
--font-heading: "Caprasimo", Georgia, serif;
--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Self-hosted: a Google Fonts is unreachable for an installed PWA with no
network, and these pages are precached alongside the app. */
@font-face {
font-family: "Caprasimo";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/_content/Varkappen.Shared/fonts/caprasimo-latin.woff2") format("woff2");
}
@font-face {
font-family: "Figtree";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url("/_content/Varkappen.Shared/fonts/figtree-latin.woff2") format("woff2");
}
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
}
h1, h2, h3 {
font-family: var(--font-heading);
font-weight: 400;
letter-spacing: -.2px;
}
/* ── Nav ──────────────────────────────────────────────────────────────────── */
.site-nav {
background: var(--surface);
border-bottom: 1px solid var(--surface-2);
padding: .7rem 1.25rem;
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: var(--shadow-sm);
}
.site-nav .brand {
color: var(--accent-dark);
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 400;
text-decoration: none;
line-height: 1.15;
}
.site-nav .brand small {
display: block;
font-family: var(--font-body);
font-size: .55rem;
font-weight: 600;
opacity: 1;
color: var(--ink-soft);
letter-spacing: .12em;
text-transform: uppercase;
}
.btn-app {
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: .85rem;
padding: .6rem 1.3rem;
min-height: 44px; /* iOS HIG touch target */
display: inline-flex;
align-items: center;
text-decoration: none;
white-space: nowrap;
transition: background .15s;
}
.btn-app:hover { background: var(--accent-deep); color: #fff; opacity: 1; }
/* ── Hero ─────────────────────────────────────────────────────────────────── */
/* Cream ground, not a coloured band — the hand-written pages previously set white
text here, so every colour is restated rather than inherited. */
.hero {
background: var(--bg);
color: var(--ink);
padding: 4rem 1.5rem 3.4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.hero h1 {
color: var(--ink);
font-size: clamp(2rem, 5.4vw, 3.1rem);
font-weight: 400;
line-height: 1.08;
margin-bottom: 1.1rem;
}
.hero h1 .hl { color: var(--accent-dark); }
.hero .lead {
color: var(--ink-soft);
font-size: 1.08rem;
opacity: 1;
max-width: 600px;
margin: 0 auto 1.9rem;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
margin-bottom: 2rem;
}
.hero-badges > span,
.hero-badges .hero-badge {
background: var(--surface);
border: 1px solid var(--surface-2);
color: var(--accent-dark);
border-radius: var(--radius-pill);
padding: .42rem 1rem;
font-size: .85rem;
font-weight: 600;
}
.btn-hero {
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--radius-pill);
padding: 1rem 2.4rem;
min-height: 44px;
font-weight: 800;
font-size: 1.05rem;
text-decoration: none;
display: inline-block;
box-shadow: var(--shadow-md);
transition: background .15s;
}
.btn-hero:hover { background: var(--accent-deep); color: #fff; opacity: 1; }
/* ── Sections ─────────────────────────────────────────────────────────────── */
section { padding: 3.4rem 0; }
section.bg-soft,
section.sec-alt { background: var(--surface); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); margin-bottom: .8rem; }
h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.sec-sub { color: var(--ink-soft); margin-bottom: 2.2rem; }
.text-muted { color: var(--ink-soft) !important; }
/* ── Steps ────────────────────────────────────────────────────────────────── */
.step {
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1.4rem;
}
.step-num,
.step-n {
width: 2.4rem;
height: 2.4rem;
min-width: 2.4rem;
flex: 0 0 2.4rem;
background: var(--accent);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1rem;
}
.step h3 { margin-bottom: .3rem; }
.step-body strong {
display: block;
font-family: var(--font-heading);
font-weight: 400;
font-size: 1.12rem;
margin-bottom: .3rem;
}
.step p,
.step-body p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
/* ── 5-1-1 rule box ───────────────────────────────────────────────────────── */
/* Sage, not terracotta: guidance is the second voice throughout the product, and
there is no separate red — urgency uses the deep terracotta steps instead. */
.rule-box,
.rule {
background: var(--sage-100);
border-left: 5px solid var(--sage);
border-radius: var(--radius);
padding: 1.6rem 1.7rem;
margin-top: 2rem;
}
.rule-box h3,
.rule h3 {
color: var(--sage-700);
font-size: 1.15rem;
margin-bottom: .6rem;
}
.rule-box p,
.rule > p { color: var(--ink-soft); }
.rule-item {
display: flex;
align-items: center;
gap: .6rem;
margin-bottom: .45rem;
font-size: .95rem;
color: var(--ink);
}
.rule-dot {
width: .5rem;
height: .5rem;
min-width: .5rem;
background: var(--sage);
border-radius: 50%;
}
/* The hand-written pages mark the 5-1-1 figures with a plain inside a flex
row, where the generated pages use .rule-num b. Give both the display treatment so
the same three numbers read the same way on all nine pages — sized down from the
generated 2rem, which would break this row's baseline. */
.rule-item strong {
font-family: var(--font-heading);
font-weight: 400;
font-size: 1.5rem;
line-height: 1;
color: var(--sage-700);
min-width: 1.1rem;
}
.rule-nums {
display: flex;
flex-wrap: wrap;
gap: 1.4rem;
margin: 1.1rem 0;
color: var(--ink);
}
.rule-num b {
font-family: var(--font-heading);
font-weight: 400;
font-size: 2rem;
color: var(--sage-700);
}
.rule-note { font-size: .92rem; color: var(--ink-soft); margin: 0; }
/* ── Cards ────────────────────────────────────────────────────────────────── */
.feature-card,
.o-card {
background: var(--surface);
border: 1px solid var(--surface-2);
border-radius: var(--radius);
padding: 1.6rem;
height: 100%;
box-shadow: var(--shadow-sm);
transition: box-shadow .15s;
}
/* On a tinted section the card has to step the other way to stay legible. */
section.bg-soft .feature-card,
section.sec-alt .feature-card,
section.bg-soft .o-card,
section.sec-alt .o-card { background: var(--bg); }
.feature-card:hover,
.o-card:hover { box-shadow: var(--shadow-md); }
.feature-icon,
.o-card .ico {
font-size: 1.75rem;
line-height: 1;
display: block;
margin-bottom: .6rem;
}
.feature-card h3,
.o-card h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.feature-card p,
.o-card p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
/* ── FAQ accordion ────────────────────────────────────────────────────────── */
/* Bootstrap 5.3 drives these from custom properties; setting background-color
directly would lose to its own state rules. */
.accordion { --bs-accordion-border-color: var(--surface-2); }
.accordion-item {
background: var(--surface);
border: 1px solid var(--surface-2);
border-radius: var(--radius) !important;
margin-bottom: .75rem;
overflow: hidden;
}
.accordion-button {
--bs-accordion-btn-bg: var(--surface);
--bs-accordion-active-bg: var(--accent-light);
--bs-accordion-active-color: var(--accent-dark);
--bs-accordion-btn-focus-box-shadow: none;
color: var(--ink);
/* The markup nests this button inside