15 lines
2.9 KiB
Plaintext
15 lines
2.9 KiB
Plaintext
{# pricing override — flat hairline tiers, mono price figures, accent-top featured tier. #}
|
|
<section class="sc-section {{ class }}"><div class="sc-content-well">
|
|
{% if heading %}<h2 class="sc-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 0.75rem 0;"><span class="sc-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
|
{% if intro %}<p class="sc-lede" style="max-width: 60ch; margin: 0 0 2.5rem 0; color: hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
|
|
{% if tiers %}<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">{% for tier in tiers %}<div class="sc-card sc-price-tier {% if tier.highlighted %}sc-price-tier--featured sc-card-accent{% endif %}" style="display: flex; flex-direction: column;">
|
|
{% if tier.badge %}<span class="sc-badge" style="display: inline-block; align-self: flex-start; background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.25rem 0.5rem; border-radius: 4px; margin-bottom: 0.75rem;">{{ tier.badge }}</span>{% endif %}
|
|
{% if tier.name %}<h3 class="sc-feature-title" style="margin: 0;">{{ tier.name }}</h3>{% endif %}
|
|
<p style="display: flex; align-items: baseline; gap: 0.25rem; margin: 1rem 0 0 0;"><span class="sc-price numeric-tabular" style="font-family: var(--font-mono, ui-monospace, monospace); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 500; line-height: 1; color: hsl(var(--foreground));">{% if currency %}{{ currency }}{% else %}${% endif %}{{ tier.price }}</span>{% if tier.period %}<span class="sc-price-period sc-stat-label" style="margin-top: 0;">{{ tier.period }}</span>{% endif %}</p>
|
|
{% if tier.description %}<p class="sc-text" style="font-size: 0.9375rem; color: hsl(var(--muted-foreground)); margin-top: 0.75rem;">{{ tier.description }}</p>{% endif %}
|
|
{% if tier.features %}<ul class="sc-stack-sm" style="list-style: none; padding: 0; margin: 1.5rem 0 0 0; display: flex; flex-direction: column; gap: 0.625rem; flex: 1;">{% for feature in tier.features %}<li class="sc-check" style="display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9375rem; color: hsl(var(--foreground));"><span style="color: hsl(var(--accent)); flex: none;">::lucide:check:sm::</span><span>{{ feature }}</span></li>{% endfor %}</ul>{% endif %}
|
|
{% if tier.ctaUrl and tier.ctaLabel %}{% if tier.highlighted %}<a class="sc-btn-primary" href="{{ tier.ctaUrl }}" style="margin-top: 1.5rem; width: 100%; box-sizing: border-box; text-align: center;">{{ tier.ctaLabel }}</a>{% else %}<a class="sc-btn-outline" href="{{ tier.ctaUrl }}" style="margin-top: 1.5rem; width: 100%; box-sizing: border-box; text-align: center;">{{ tier.ctaLabel }}</a>{% endif %}{% endif %}
|
|
</div>{% endfor %}</div>{% endif %}
|
|
{% if billingNote %}<p class="sc-stat-label" style="text-align: center; margin-top: 2rem;">{{ billingNote }}</p>{% endif %}
|
|
</div></section>
|