8b8fb4d65d
Deliver the full conservation-nonprofit theme per OVERRIDE-CONTRACT (Wave A).
- 49 mandatory builtin overrides in templates/overrides/earthen/ (chrome,
marketing, primitives, commerce, blog family, auth surface, page-suggestions),
re-skinned from the frozen builtins into botanical/paper-grain chrome with
all content fields, custom tags, provider vars, HTMX/auth wiring and JS
preserved verbatim. Stale button/card/image/text/heading overrides fixed to
the new field contract (link/style/label, media/text via {% img %}).
- 7 page templates: default, full-width, landing, article, blog-index, contact,
auth.
- Blocks rework: impact_metrics/partner_logos/botanical_divider/footer converted
to builtin overrides (deleted as theme blocks); donation_cta and field_note
kept; impact_report added. Persona blocks now 3.
- 5 presets (all 19 tokens; mossbed/sage-morning/ember-loam are dual-mode).
- Bundled Fraunces + Work Sans woff2 (OFL) in assets/fonts/; fonts.json,
RECOMMENDED_FONTS.md, RECOMMENDED_ICONS.md; required_icon_packs=[lucide].
- Seed: home/about/blog(3 posts)/contact/login as Rootline Trust, contact-form
formConfig.targetTable=contact_submissions + row_inserted email-admins workflow.
- Themed email-safe wrapper; on-theme master pages; CSS-first botanical motion.
Verified: make (build) exit 0, make archive-check exit 0, check-safety exit 0.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
181 lines
6.0 KiB
CSS
181 lines
6.0 KiB
CSS
/* Earthen — theme utilities injected via CSSManifest.InputCSSAppend. */
|
|
/* All colour values reference the 19-token HSL custom properties so they */
|
|
/* shift with the active preset (mossbed, clay-field, wet-loam). */
|
|
|
|
/* Paper grain backdrop — a single inline SVG noise pattern keeps page weight
|
|
inside the marketplace gate (≤ 81920 bytes). */
|
|
.bg-paper-grain {
|
|
background-color: hsl(var(--background));
|
|
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%20viewBox%3D%270%200%20160%20160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20seed%3D%274%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.36%200%200%200%200%200.32%200%200%200%200%200.24%200%200%200%200.05%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
|
|
background-repeat: repeat;
|
|
background-size: 240px 240px;
|
|
}
|
|
|
|
/* Botanical hairline divider — used inside .botanical-rule sections. */
|
|
.botanical-rule > span {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Hand-drawn crayon underline on h2 — uses currentColor and primary token. */
|
|
.crayon-underline {
|
|
position: relative;
|
|
padding-bottom: 0.35em;
|
|
}
|
|
.crayon-underline::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: auto;
|
|
bottom: 0;
|
|
height: 6px;
|
|
width: 2.5em;
|
|
background-color: hsl(var(--accent) / 0.4);
|
|
border-radius: 4px 8px 6px 12px;
|
|
transform: skewY(-1deg);
|
|
}
|
|
|
|
/* Botanical drop cap — applied to the first paragraph of .drop-cap-host. */
|
|
.drop-cap-host > p:first-of-type::first-letter,
|
|
.drop-cap > p:first-of-type::first-letter,
|
|
.drop-cap::first-letter {
|
|
font-family: var(--font-heading, "Fraunces", "Playfair Display", Georgia, serif);
|
|
color: hsl(var(--primary));
|
|
float: left;
|
|
font-size: 3.4em;
|
|
line-height: 0.85;
|
|
margin: 0.15em 0.18em 0 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Tile selection (donation CTA) — uses primary ring when checked. */
|
|
.earthen-tile input[type="radio"]:checked + span {
|
|
color: hsl(var(--primary));
|
|
}
|
|
.earthen-tile:has(input[type="radio"]:checked) {
|
|
box-shadow: 0 0 0 2px hsl(var(--primary));
|
|
}
|
|
|
|
/* Partner logos — grayscale at rest, full colour on hover. */
|
|
.earthen-partner-img,
|
|
.earthen-partner-fallback {
|
|
filter: grayscale(1);
|
|
opacity: 0.85;
|
|
transition: filter 200ms ease, opacity 200ms ease;
|
|
}
|
|
.earthen-partner-tile:hover .earthen-partner-img,
|
|
.earthen-partner-link:hover .earthen-partner-img,
|
|
.earthen-partner-link:focus-visible .earthen-partner-img,
|
|
.earthen-partner-tile:hover .earthen-partner-fallback,
|
|
.earthen-partner-link:hover .earthen-partner-fallback {
|
|
filter: grayscale(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Paper-grain frame around field-note imagery. */
|
|
.earthen-paper-frame {
|
|
box-shadow: inset 0 0 0 1px hsl(var(--border) / 0.6);
|
|
}
|
|
.earthen-paper-frame-inner {
|
|
box-shadow: 0 1px 2px hsl(var(--foreground) / 0.06);
|
|
}
|
|
|
|
/* Footer links — botanical underline on hover. */
|
|
.earthen-footer-link {
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: color 150ms ease, border-color 150ms ease;
|
|
}
|
|
.earthen-footer-link:hover,
|
|
.earthen-footer-link:focus-visible {
|
|
color: hsl(var(--primary-foreground));
|
|
border-bottom-color: hsl(var(--accent));
|
|
}
|
|
|
|
/* Buttons — focus ring follows the active preset. */
|
|
.earthen-button:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Article aside — keeps the byline rail comfortable on mobile. */
|
|
.earthen-aside {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Ensure article main column uses the Work Sans body fallback. */
|
|
.earthen-article {
|
|
font-family: var(--font-body, "Work Sans", ui-sans-serif, system-ui, sans-serif);
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Divider glyph — softer stroke at rest. */
|
|
.earthen-glyph {
|
|
color: hsl(var(--primary));
|
|
}
|
|
|
|
/* Organic blob — soft asymmetric corners for cards, media frames and hero art.
|
|
The signature earthen shape: hand-crafted, never a hard rectangle. */
|
|
.earthen-blob {
|
|
border-radius: 42% 58% 62% 38% / 42% 44% 56% 58%;
|
|
}
|
|
.earthen-blob-soft {
|
|
border-radius: 1.75rem 2.25rem 1.75rem 2.25rem;
|
|
}
|
|
|
|
/* Soft card / panel frame — cream surface with a hairline botanical border. */
|
|
.earthen-panel {
|
|
background-color: hsl(var(--card));
|
|
color: hsl(var(--card-foreground));
|
|
border: 1px solid hsl(var(--border));
|
|
box-shadow: inset 0 0 0 1px hsl(var(--border) / 0.35);
|
|
}
|
|
|
|
/* Terracotta seedling button — the primary call to action across the theme. */
|
|
.earthen-cta {
|
|
background-color: hsl(var(--accent));
|
|
color: hsl(var(--accent-foreground));
|
|
border-radius: 0.75rem;
|
|
transition: box-shadow 200ms ease, transform 120ms ease;
|
|
}
|
|
.earthen-cta:hover,
|
|
.earthen-cta:focus-visible {
|
|
box-shadow: 0 6px 0 -2px hsl(var(--accent) / 0.35);
|
|
transform: translateY(-1px);
|
|
}
|
|
.earthen-cta:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Sage link — dotted botanical underline that fills on hover. */
|
|
.earthen-link {
|
|
color: hsl(var(--primary));
|
|
text-decoration: none;
|
|
border-bottom: 1px dotted hsl(var(--primary) / 0.6);
|
|
transition: color 150ms ease, border-color 150ms ease;
|
|
}
|
|
.earthen-link:hover,
|
|
.earthen-link:focus-visible {
|
|
color: hsl(var(--accent));
|
|
border-bottom-color: hsl(var(--accent));
|
|
}
|
|
|
|
/* Leaf line-draw — a hairline that draws in on scroll where motion is allowed. */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.earthen-draw {
|
|
stroke-dasharray: 240;
|
|
stroke-dashoffset: 240;
|
|
animation: earthen-draw-in 1.4s ease forwards;
|
|
}
|
|
@keyframes earthen-draw-in {
|
|
to { stroke-dashoffset: 0; }
|
|
}
|
|
.earthen-blob-morph {
|
|
animation: earthen-blob-morph 18s ease-in-out infinite;
|
|
}
|
|
@keyframes earthen-blob-morph {
|
|
0%, 100% { border-radius: 42% 58% 62% 38% / 42% 44% 56% 58%; }
|
|
50% { border-radius: 58% 42% 38% 62% / 56% 58% 42% 44%; }
|
|
}
|
|
}
|