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>
17 lines
3.2 KiB
Plaintext
17 lines
3.2 KiB
Plaintext
<section data-block="earthen:donation_cta"{% if not headline and not body and not amounts and not buttonLabel and not processorUrl %} data-empty{% endif %} class="earthen-donation-cta py-16 px-4" style="background-color: hsl(var(--card)); color: hsl(var(--card-foreground));">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
{% if headline %}<h2 class="earthen-display text-3xl md:text-4xl mb-4" style="font-family: var(--font-heading, \000022Fraunces\000022, \000022Playfair Display\000022, Georgia, serif); color: hsl(var(--primary));">{{ headline }}</h2>{% endif %}
|
|
{% if body %}<div class="earthen-body text-lg mb-8 mx-auto max-w-xl" style="font-family: var(--font-body, \000022Work Sans\000022, ui-sans-serif, system-ui, sans-serif); color: hsl(var(--foreground));">{{ body|safe }}</div>{% endif %}
|
|
<form action="{{ processorUrl|default:"#" }}" method="get" class="space-y-6">
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3" role="radiogroup" aria-label="Preset donation amounts">
|
|
{% if amounts %}{% for a in amounts %}<label data-amount-tile class="earthen-tile flex items-center justify-center cursor-pointer rounded-lg py-4 px-3 text-lg font-semibold transition-colors" style="border: 1px solid hsl(var(--border)); background-color: hsl(var(--background)); color: hsl(var(--foreground));"><input type="radio" name="amount" value="{{ a }}" class="sr-only"{% if forloop.First %} checked{% endif %}><span>${{ a }}</span></label>{% endfor %}{% else %}<label data-amount-tile class="earthen-tile flex items-center justify-center cursor-pointer rounded-lg py-4 px-3 text-lg font-semibold transition-colors" style="border: 1px solid hsl(var(--border)); background-color: hsl(var(--background)); color: hsl(var(--foreground));"><input type="radio" name="amount" value="25" class="sr-only" checked><span>$25</span></label><label data-amount-tile class="earthen-tile flex items-center justify-center cursor-pointer rounded-lg py-4 px-3 text-lg font-semibold transition-colors" style="border: 1px solid hsl(var(--border)); background-color: hsl(var(--background)); color: hsl(var(--foreground));"><input type="radio" name="amount" value="50" class="sr-only"><span>$50</span></label><label data-amount-tile class="earthen-tile flex items-center justify-center cursor-pointer rounded-lg py-4 px-3 text-lg font-semibold transition-colors" style="border: 1px solid hsl(var(--border)); background-color: hsl(var(--background)); color: hsl(var(--foreground));"><input type="radio" name="amount" value="100" class="sr-only"><span>$100</span></label>{% endif %}
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
|
|
<label class="sr-only" for="earthen-custom-amount">Custom amount</label>
|
|
<input id="earthen-custom-amount" type="number" name="customAmount" min="1" step="1" placeholder="Other amount" class="flex-1 rounded-lg py-3 px-4 text-base" style="background-color: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--input));">
|
|
<button type="submit" class="earthen-button inline-block rounded-lg py-3 px-6 font-semibold transition-colors" style="background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground));">{{ buttonLabel|default:"Donate" }}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|