fix(corporate-modernist): size icon-shortcode SVGs (shortcode balloon trap)
The CMS ::lucide:name:size:: inline shortcode expands to an UNSIZED <svg class="inline-block h-N w-N"><use .../></svg> — the theme can't attribute the shortcode output, so if the host Tailwind JIT drops the h-N/w-N utility the icon balloons to the SVG default box (the coffee/ Wave-B root cause). Replace all 21 icon shortcodes across 14 templates with explicit <svg width=.. height=..> markup (preserving the same class + href, only adding pinned dimensions): sm=16, md=20, lg=24. The navbar hamburger renders on every page, so this hardens every shot. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Alex Dunmow
parent
517ca93b01
commit
9380cfdcf4
@ -3,6 +3,6 @@
|
||||
<div data-bn-announcement data-bn-annkey="{{ variant|default:'info' }}:{{ message|slugify }}" class="cm-announce {{ annvar }} {{ class }}" style="{{ annsty }}">
|
||||
<div class="cm-content-well cm-announce-row" style="position:relative;display:flex;align-items:center;justify-content:center;gap:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.875rem;text-align:center;">
|
||||
<p style="margin:0;font-weight:500;">{{ message }}{% if linkText and linkUrl %} <a href="{{ linkUrl }}" style="color:inherit;text-decoration:underline;text-underline-offset:2px;">{{ linkText }}</a>{% endif %}</p>
|
||||
{% if dismissable %}<button type="button" data-bn-ann-dismiss aria-label="Dismiss announcement" class="cm-announce-close" style="position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;padding:0.25rem;background:none;border:0;color:inherit;cursor:pointer;">::lucide:x:sm::</button>{% endif %}
|
||||
{% if dismissable %}<button type="button" data-bn-ann-dismiss aria-label="Dismiss announcement" class="cm-announce-close" style="position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;padding:0.25rem;background:none;border:0;color:inherit;cursor:pointer;"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#x"/></svg></button>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
{% if title %}<p class="cm-display" style="margin:0;font-size:0.9375rem;color:hsl(var(--foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ title }}</p>{% endif %}
|
||||
{% if artist %}<p style="margin:0;font-size:0.8125rem;color:hsl(var(--muted-foreground));">{{ artist }}</p>{% endif %}
|
||||
<div data-bn-audio-slot style="display:flex;align-items:center;gap:0.75rem;margin-top:0.5rem;">
|
||||
<button type="button" data-bn-audio-play class="cm-btn-primary cm-btn-sm" aria-label="Play{% if title %}: {{ title }}{% endif %}" style="display:inline-flex;align-items:center;gap:0.375rem;">::lucide:play:sm:: Play</button>
|
||||
{% if download %}<a href="{% if media %}{{ media|mediaURL }}{% else %}{{ url }}{% endif %}" download class="cm-btn-ghost" style="display:inline-flex;align-items:center;gap:0.25rem;font-size:0.8125rem;color:hsl(var(--muted-foreground));text-decoration:none;">::lucide:download:sm:: Download</a>{% endif %}
|
||||
<button type="button" data-bn-audio-play class="cm-btn-primary cm-btn-sm" aria-label="Play{% if title %}: {{ title }}{% endif %}" style="display:inline-flex;align-items:center;gap:0.375rem;"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#play"/></svg> Play</button>
|
||||
{% if download %}<a href="{% if media %}{{ media|mediaURL }}{% else %}{{ url }}{% endif %}" download class="cm-btn-ghost" style="display:inline-flex;align-items:center;gap:0.25rem;font-size:0.8125rem;color:hsl(var(--muted-foreground));text-decoration:none;"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#download"/></svg> Download</a>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1 +1 @@
|
||||
<article class="cm-card cm-card-accent {{ class }}">{% if media %}<div class="cm-media-frame" style="aspect-ratio: 16 / 9; margin: -1.5rem -1.5rem 1.25rem -1.5rem; border: 0; border-bottom: 1px solid hsl(var(--border));">{% img media alt=title|default:"" class="cm-card-media" %}</div>{% endif %}{% if title %}<h3 class="cm-feature-title" style="margin-top: 0; font-size: 1.25rem;">{{ title }}</h3>{% endif %}{% if text %}<div class="cm-text" style="font-size: 0.9375rem; line-height: 1.6; color: hsl(var(--muted-foreground));">{{ text|safe }}</div>{% endif %}{% if linkLabel and link %}<a class="cm-btn-ghost" href="{{ link }}" style="margin-top: 1rem;">{{ linkLabel }}::lucide:arrow-right:sm::</a>{% endif %}</article>
|
||||
<article class="cm-card cm-card-accent {{ class }}">{% if media %}<div class="cm-media-frame" style="aspect-ratio: 16 / 9; margin: -1.5rem -1.5rem 1.25rem -1.5rem; border: 0; border-bottom: 1px solid hsl(var(--border));">{% img media alt=title|default:"" class="cm-card-media" %}</div>{% endif %}{% if title %}<h3 class="cm-feature-title" style="margin-top: 0; font-size: 1.25rem;">{{ title }}</h3>{% endif %}{% if text %}<div class="cm-text" style="font-size: 0.9375rem; line-height: 1.6; color: hsl(var(--muted-foreground));">{{ text|safe }}</div>{% endif %}{% if linkLabel and link %}<a class="cm-btn-ghost" href="{{ link }}" style="margin-top: 1rem;">{{ linkLabel }}<svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"/></svg></a>{% endif %}</article>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<h3 class="cm-feature-title" style="font-size:1.125rem;margin:0;">{{ event.title }}</h3>
|
||||
{% if event.venue %}<p style="margin:0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ event.venue }}</p>{% endif %}
|
||||
{% if event.description %}<p style="margin:0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ event.description }}</p>{% endif %}
|
||||
{% if event.link %}<a class="cm-btn-ghost" href="{{ event.link }}" style="margin-top:auto;display:inline-flex;align-items:center;gap:0.375rem;">{{ event.linkLabel|default:"Details" }}::lucide:arrow-right:sm::</a>{% endif %}
|
||||
{% if event.link %}<a class="cm-btn-ghost" href="{{ event.link }}" style="margin-top:auto;display:inline-flex;align-items:center;gap:0.375rem;">{{ event.linkLabel|default:"Details" }}<svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"/></svg></a>{% endif %}
|
||||
</div>
|
||||
</article>{% endif %}{% endfor %}
|
||||
</div><style>.cm-event-media{display:block;width:100%;height:100%;object-fit:cover;}</style>
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
<section class="cm-section {{ class }}"><div class="cm-content-well cm-measure">
|
||||
{% if heading %}<h2 class="cm-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 0.75rem 0;"><span class="cm-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
{% if intro %}<p class="cm-lede" style="max-width: 60ch; margin: 0 0 2rem 0; color: hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
|
||||
{% if items %}<div class="cm-hairline-top" style="margin-top: 1.5rem;">{% for item in items %}<details class="cm-faq-item cm-hairline-bottom"{% if variant == "open-list" %} open{% endif %}><summary class="cm-heading" style="display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; padding: 1rem 0; font-size: 1.125rem; list-style: none;">{{ item.question }}<span class="cm-faq-chevron" aria-hidden="true" style="color: hsl(var(--muted-foreground)); flex: none;">::lucide:chevron-down:sm::</span></summary><div class="cm-faq-answer cm-text" style="padding-bottom: 1rem; color: hsl(var(--muted-foreground));">{{ item.answer|safe }}</div></details>{% endfor %}</div>{% endif %}
|
||||
{% if items %}<div class="cm-hairline-top" style="margin-top: 1.5rem;">{% for item in items %}<details class="cm-faq-item cm-hairline-bottom"{% if variant == "open-list" %} open{% endif %}><summary class="cm-heading" style="display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; padding: 1rem 0; font-size: 1.125rem; list-style: none;">{{ item.question }}<span class="cm-faq-chevron" aria-hidden="true" style="color: hsl(var(--muted-foreground)); flex: none;"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#chevron-down"/></svg></span></summary><div class="cm-faq-answer cm-text" style="padding-bottom: 1rem; color: hsl(var(--muted-foreground));">{{ item.answer|safe }}</div></details>{% endfor %}</div>{% endif %}
|
||||
</div></section>
|
||||
|
||||
@ -3,5 +3,5 @@
|
||||
{% if eyebrow %}<p class="cm-eyebrow">{{ eyebrow }}</p>{% endif %}
|
||||
{% if heading %}<h2 class="cm-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 0.75rem 0;"><span class="cm-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
{% if intro %}<p class="cm-lede" style="max-width: 60ch; margin: 0 0 2.5rem 0; color: hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
|
||||
{% if items %}<div class="cm-grid {% if columns == 2 %}cm-grid-2{% elif columns == 4 %}cm-grid-4{% else %}cm-grid-3{% endif %}">{% for item in items %}<div class="cm-feature">{% if item.icon %}<span class="cm-mark cm-mark-square" aria-hidden="true">::{{ item.icon }}:sm::</span>{% else %}<span class="cm-mark cm-mark-square" aria-hidden="true"></span>{% endif %}{% if item.title %}<h3 class="cm-feature-title">{% if item.linkUrl %}<a href="{{ item.linkUrl }}" style="color: inherit; text-decoration: none;">{{ item.title }}</a>{% else %}{{ item.title }}{% endif %}</h3>{% endif %}{% if item.text %}<p class="cm-text" style="font-size: 0.9375rem; line-height: 1.6; color: hsl(var(--muted-foreground));">{{ item.text }}</p>{% endif %}{% if item.linkUrl and item.linkLabel %}<a class="cm-btn-ghost" href="{{ item.linkUrl }}" style="margin-top: 0.75rem;">{{ item.linkLabel }}::lucide:arrow-right:sm::</a>{% endif %}</div>{% endfor %}</div>{% endif %}
|
||||
{% if items %}<div class="cm-grid {% if columns == 2 %}cm-grid-2{% elif columns == 4 %}cm-grid-4{% else %}cm-grid-3{% endif %}">{% for item in items %}<div class="cm-feature">{% if item.icon %}<span class="cm-mark cm-mark-square" aria-hidden="true">::{{ item.icon }}:sm::</span>{% else %}<span class="cm-mark cm-mark-square" aria-hidden="true"></span>{% endif %}{% if item.title %}<h3 class="cm-feature-title">{% if item.linkUrl %}<a href="{{ item.linkUrl }}" style="color: inherit; text-decoration: none;">{{ item.title }}</a>{% else %}{{ item.title }}{% endif %}</h3>{% endif %}{% if item.text %}<p class="cm-text" style="font-size: 0.9375rem; line-height: 1.6; color: hsl(var(--muted-foreground));">{{ item.text }}</p>{% endif %}{% if item.linkUrl and item.linkLabel %}<a class="cm-btn-ghost" href="{{ item.linkUrl }}" style="margin-top: 0.75rem;">{{ item.linkLabel }}<svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"/></svg></a>{% endif %}</div>{% endfor %}</div>{% endif %}
|
||||
</div></section>
|
||||
|
||||
@ -7,11 +7,11 @@
|
||||
{% if specialHoursNote %}<p class="cm-surface-muted" style="margin-top:1rem;border:1px solid hsl(var(--border));background:hsl(var(--muted));padding:0.5rem 0.75rem;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ specialHoursNote }}</p>{% endif %}
|
||||
{% if address %}<div style="margin-top:1.5rem;"><div class="cm-stat-label" style="margin:0;">Address</div><address style="margin-top:0.25rem;white-space:pre-line;font-style:normal;color:hsl(var(--foreground));">{{ address }}</address></div>{% endif %}
|
||||
{% if phone %}<div style="margin-top:1rem;"><div class="cm-stat-label" style="margin:0;">Phone</div><a href="tel:{{ phone }}" style="display:inline-block;margin-top:0.25rem;color:hsl(var(--foreground));text-decoration:none;">{{ phone }}</a></div>{% endif %}
|
||||
{% if directionsUrl %}<a href="{{ directionsUrl }}" target="_blank" rel="noopener noreferrer" class="cm-btn-outline" style="margin-top:1.5rem;display:inline-flex;align-items:center;gap:0.5rem;">::lucide:navigation:sm::Get directions</a>{% endif %}
|
||||
{% if directionsUrl %}<a href="{{ directionsUrl }}" target="_blank" rel="noopener noreferrer" class="cm-btn-outline" style="margin-top:1.5rem;display:inline-flex;align-items:center;gap:0.5rem;"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#navigation"/></svg>Get directions</a>{% endif %}
|
||||
</div>
|
||||
{% if mapEmbedUrl %}
|
||||
<div class="cm-media-frame" style="width:100%;min-height:16rem;aspect-ratio:4 / 3;overflow:hidden;border:1px solid hsl(var(--border));border-radius:4px;background:hsl(var(--muted));">
|
||||
<button type="button" data-map-src="{{ mapEmbedUrl }}" onclick="var f=document.createElement('iframe');f.src=this.getAttribute('data-map-src');f.setAttribute('style','width:100%;height:100%;border:0;');f.setAttribute('loading','lazy');f.setAttribute('referrerpolicy','no-referrer-when-downgrade');f.setAttribute('title','Map');this.parentNode.replaceChild(f,this);" style="display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;height:100%;min-height:16rem;border:0;background:none;cursor:pointer;color:hsl(var(--foreground));font-family:var(--font-heading, 'Inter Tight', 'Inter', system-ui, sans-serif);font-weight:500;">::lucide:map-pin:md::{{ mapButtonLabel|default:"Load map" }}</button>
|
||||
<button type="button" data-map-src="{{ mapEmbedUrl }}" onclick="var f=document.createElement('iframe');f.src=this.getAttribute('data-map-src');f.setAttribute('style','width:100%;height:100%;border:0;');f.setAttribute('loading','lazy');f.setAttribute('referrerpolicy','no-referrer-when-downgrade');f.setAttribute('title','Map');this.parentNode.replaceChild(f,this);" style="display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;height:100%;min-height:16rem;border:0;background:none;cursor:pointer;color:hsl(var(--foreground));font-family:var(--font-heading, 'Inter Tight', 'Inter', system-ui, sans-serif);font-weight:500;"><svg class="inline-block h-5 w-5" width="20" height="20" aria-hidden="true"><use href="/icons/lucide.svg#map-pin"/></svg>{{ mapButtonLabel|default:"Load map" }}</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@ -1 +1 @@
|
||||
<nav class="cm-navbar {{ class }}" aria-label="Primary"><a class="cm-brand" href="/"><span class="cm-mark cm-mark-square" aria-hidden="true"></span>{% if logoType == "image" and logo %}{% img logo alt=alt|default:"Home" class="cm-brand-logo" %}{% else %}<span>{{ logoText.text|default:logoText|default:context.site.title|default:"Studio" }}</span>{% endif %}</a><div class="cm-nav-links">{% for item in menu.items %}<a class="cm-nav-link" href="{{ item.url }}"{% if item.open_in_new_tab %} target="_blank" rel="noopener"{% endif %}>{{ item.label|default:item.title }}</a>{% endfor %}{% if cta.text and cta.url %}<a class="cm-btn-primary cm-btn-sm" href="{{ cta.url }}">{{ cta.text }}</a>{% endif %}</div><input type="checkbox" id="cm-nav-toggle-cb" class="cm-nav-cb" style="display:none;"><label for="cm-nav-toggle-cb" class="cm-nav-toggle cm-btn-outline cm-btn-sm" aria-label="Toggle menu">::lucide:menu:sm::</label><div class="cm-nav-drawer">{% for item in menu.items %}<a href="{{ item.url }}"{% if item.open_in_new_tab %} target="_blank" rel="noopener"{% endif %}>{{ item.label|default:item.title }}</a>{% endfor %}{% if cta.text and cta.url %}<a href="{{ cta.url }}" class="cm-btn-primary cm-btn-sm" style="margin-top:0.75rem;">{{ cta.text }}</a>{% endif %}</div><style>.cm-nav-cb:checked ~ .cm-nav-drawer{display:flex;}</style></nav>
|
||||
<nav class="cm-navbar {{ class }}" aria-label="Primary"><a class="cm-brand" href="/"><span class="cm-mark cm-mark-square" aria-hidden="true"></span>{% if logoType == "image" and logo %}{% img logo alt=alt|default:"Home" class="cm-brand-logo" %}{% else %}<span>{{ logoText.text|default:logoText|default:context.site.title|default:"Studio" }}</span>{% endif %}</a><div class="cm-nav-links">{% for item in menu.items %}<a class="cm-nav-link" href="{{ item.url }}"{% if item.open_in_new_tab %} target="_blank" rel="noopener"{% endif %}>{{ item.label|default:item.title }}</a>{% endfor %}{% if cta.text and cta.url %}<a class="cm-btn-primary cm-btn-sm" href="{{ cta.url }}">{{ cta.text }}</a>{% endif %}</div><input type="checkbox" id="cm-nav-toggle-cb" class="cm-nav-cb" style="display:none;"><label for="cm-nav-toggle-cb" class="cm-nav-toggle cm-btn-outline cm-btn-sm" aria-label="Toggle menu"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#menu"/></svg></label><div class="cm-nav-drawer">{% for item in menu.items %}<a href="{{ item.url }}"{% if item.open_in_new_tab %} target="_blank" rel="noopener"{% endif %}>{{ item.label|default:item.title }}</a>{% endfor %}{% if cta.text and cta.url %}<a href="{{ cta.url }}" class="cm-btn-primary cm-btn-sm" style="margin-top:0.75rem;">{{ cta.text }}</a>{% endif %}</div><style>.cm-nav-cb:checked ~ .cm-nav-drawer{display:flex;}</style></nav>
|
||||
|
||||
@ -1 +1 @@
|
||||
<section class="cm-section {{ class }}" data-block="corporate-modernist:page-suggestions"><div class="cm-content-well"><div class="cm-measure cm-stack"><span class="cm-mark cm-mark-triangle" aria-hidden="true"></span><h2 class="cm-heading" style="font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0;"><span class="cm-heading-h2-accent">{{ title|default:"Were you looking for..." }}</span></h2>{% if suggestions %}<ul class="cm-stack-sm" style="list-style: none; margin: 0; padding: 0;">{% for s in suggestions %}<li><a class="cm-sidebar-link" href="/{{ s.slug }}" style="display: block;"><span class="cm-post-title" style="font-size: 1rem;">{{ s.title }}</span>{% if showDescription and s.excerpt %}<span class="cm-text" style="display: block; font-size: 0.875rem; color: hsl(var(--muted-foreground));">{{ s.excerpt }}</span>{% endif %}</a></li>{% endfor %}</ul>{% else %}{% if emptyMessage %}<p class="cm-text" style="margin: 0; color: hsl(var(--muted-foreground));">{{ emptyMessage }}</p>{% endif %}<div class="cm-btn-row"><a class="cm-btn-outline cm-btn-sm" href="/">::lucide:home:sm::Home</a><a class="cm-btn-outline cm-btn-sm" href="/blog">::lucide:newspaper:sm::Blog</a></div>{% endif %}</div></div></section>
|
||||
<section class="cm-section {{ class }}" data-block="corporate-modernist:page-suggestions"><div class="cm-content-well"><div class="cm-measure cm-stack"><span class="cm-mark cm-mark-triangle" aria-hidden="true"></span><h2 class="cm-heading" style="font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0;"><span class="cm-heading-h2-accent">{{ title|default:"Were you looking for..." }}</span></h2>{% if suggestions %}<ul class="cm-stack-sm" style="list-style: none; margin: 0; padding: 0;">{% for s in suggestions %}<li><a class="cm-sidebar-link" href="/{{ s.slug }}" style="display: block;"><span class="cm-post-title" style="font-size: 1rem;">{{ s.title }}</span>{% if showDescription and s.excerpt %}<span class="cm-text" style="display: block; font-size: 0.875rem; color: hsl(var(--muted-foreground));">{{ s.excerpt }}</span>{% endif %}</a></li>{% endfor %}</ul>{% else %}{% if emptyMessage %}<p class="cm-text" style="margin: 0; color: hsl(var(--muted-foreground));">{{ emptyMessage }}</p>{% endif %}<div class="cm-btn-row"><a class="cm-btn-outline cm-btn-sm" href="/"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#home"/></svg>Home</a><a class="cm-btn-outline cm-btn-sm" href="/blog"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#newspaper"/></svg>Blog</a></div>{% endif %}</div></div></section>
|
||||
|
||||
@ -7,5 +7,5 @@
|
||||
<div class="cm-field cm-field--full"><label class="cm-label" for="cm-reset-email">Email</label><input class="cm-input" type="email" name="email" id="cm-reset-email" required></div>
|
||||
<button type="submit" class="cm-btn-primary" hx-disabled-elt="this" style="width:100%; justify-content:center;">Send reset link</button>
|
||||
</form>
|
||||
<a class="cm-btn-ghost cm-btn-sm" href="/login" style="align-self: flex-start;">::lucide:arrow-left:sm::Back to sign in</a>
|
||||
<a class="cm-btn-ghost cm-btn-sm" href="/login" style="align-self: flex-start;"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#arrow-left"/></svg>Back to sign in</a>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
{% if tier.name %}<h3 class="cm-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="cm-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="cm-price-period cm-stat-label" style="margin-top: 0;">{{ tier.period }}</span>{% endif %}</p>
|
||||
{% if tier.description %}<p class="cm-text" style="font-size: 0.9375rem; color: hsl(var(--muted-foreground)); margin-top: 0.75rem;">{{ tier.description }}</p>{% endif %}
|
||||
{% if tier.features %}<ul class="cm-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="cm-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.features %}<ul class="cm-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="cm-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;"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#check"/></svg></span><span>{{ feature }}</span></li>{% endfor %}</ul>{% endif %}
|
||||
{% if tier.ctaUrl and tier.ctaLabel %}{% if tier.highlighted %}<a class="cm-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="cm-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="cm-stat-label" style="text-align: center; margin-top: 2rem;">{{ billingNote }}</p>{% endif %}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
{% if eyebrow %}<p class="cm-eyebrow">{{ eyebrow }}</p>{% endif %}
|
||||
{% if heading %}<h2 class="cm-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 1rem 0;"><span class="cm-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
{% if body %}<div class="cm-text" style="color: hsl(var(--muted-foreground)); line-height: 1.7;">{{ body|safe }}</div>{% endif %}
|
||||
{% if ctaUrl and ctaLabel %}<a class="cm-btn-ghost" href="{{ ctaUrl }}" style="margin-top: 1.5rem;">{{ ctaLabel }}::lucide:arrow-right:sm::</a>{% endif %}
|
||||
{% if ctaUrl and ctaLabel %}<a class="cm-btn-ghost" href="{{ ctaUrl }}" style="margin-top: 1.5rem;">{{ ctaLabel }}<svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"/></svg></a>{% endif %}
|
||||
</div>
|
||||
<div class="cm-media-frame" style="aspect-ratio: 4 / 3; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); overflow: hidden; {% if mediaPosition == "left" %}order: -1;{% endif %}">{% if media %}{% img media alt=mediaAlt class="cm-rich-media" %}{% endif %}</div>
|
||||
</div></div></section>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<section class="cm-section {{ class }}"><div class="cm-content-well">
|
||||
{% if heading %}<h2 class="cm-heading" style="font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 2.5rem 0;"><span class="cm-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
|
||||
<div class="{% if layout == "single" %}cm-measure{% else %}cm-grid cm-grid-3{% endif %}">{% for q in quotes %}<figure class="cm-quote-block cm-card" style="margin: 0; display: flex; flex-direction: column;">
|
||||
{% if q.rating %}<div class="cm-rating" aria-label="Rated {{ q.rating }} out of 5" style="display: flex; gap: 0.125rem; margin-bottom: 0.75rem;"><span style="color: {% if q.rating >= 1 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};">::lucide:star:sm::</span><span style="color: {% if q.rating >= 2 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};">::lucide:star:sm::</span><span style="color: {% if q.rating >= 3 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};">::lucide:star:sm::</span><span style="color: {% if q.rating >= 4 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};">::lucide:star:sm::</span><span style="color: {% if q.rating >= 5 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};">::lucide:star:sm::</span></div>{% endif %}
|
||||
{% if q.rating %}<div class="cm-rating" aria-label="Rated {{ q.rating }} out of 5" style="display: flex; gap: 0.125rem; margin-bottom: 0.75rem;"><span style="color: {% if q.rating >= 1 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#star"/></svg></span><span style="color: {% if q.rating >= 2 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#star"/></svg></span><span style="color: {% if q.rating >= 3 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#star"/></svg></span><span style="color: {% if q.rating >= 4 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#star"/></svg></span><span style="color: {% if q.rating >= 5 %}hsl(var(--accent)){% else %}hsl(var(--muted-foreground) / 0.35){% endif %};"><svg class="inline-block h-4 w-4" width="16" height="16" aria-hidden="true"><use href="/icons/lucide.svg#star"/></svg></span></div>{% endif %}
|
||||
{% if q.quote %}<blockquote class="cm-pull-quote" style="flex: 1; margin: 0;">{{ q.quote }}</blockquote>{% endif %}
|
||||
<figcaption class="cm-quote-cite" style="display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem;">{% if q.avatar %}<span class="cm-avatar" style="width: 2.75rem; height: 2.75rem; border-radius: 9999px; overflow: hidden; background: hsl(var(--muted)); display: inline-flex; flex: none;">{% img q.avatar alt=q.name class="cm-avatar-img" %}</span>{% endif %}<span>{% if q.name %}<span class="cm-feature-title" style="display: block; font-size: 0.9375rem;">{{ q.name }}</span>{% endif %}{% if q.role %}<span class="cm-stat-label" style="margin-top: 0;">{{ q.role }}</span>{% endif %}</span></figcaption>
|
||||
</figure>{% endfor %}</div>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="cm-video-frame" data-bn-video data-video-url="{{ url|default:'' }}" data-video-media="{% if media %}{{ media|mediaURL }}{% endif %}" style="position:relative;width:100%;overflow:hidden;border:1px solid hsl(var(--border));border-radius:4px;background:hsl(var(--muted));aspect-ratio:{{ vratio }};">
|
||||
<button type="button" data-bn-video-play class="cm-video-play" aria-label="Play video{% if title %}: {{ title }}{% endif %}" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:0;background:none;cursor:pointer;">
|
||||
{% if poster %}{% img poster alt=title|default:"" class="cm-video-poster" %}{% endif %}
|
||||
<span class="cm-video-play-badge" style="position:relative;display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:4px;background:hsl(var(--accent));color:hsl(var(--accent-foreground));">::lucide:play:lg::</span>
|
||||
<span class="cm-video-play-badge" style="position:relative;display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:4px;background:hsl(var(--accent));color:hsl(var(--accent-foreground));"><svg class="inline-block h-6 w-6" width="24" height="24" aria-hidden="true"><use href="/icons/lucide.svg#play"/></svg></span>
|
||||
</button>
|
||||
</div>
|
||||
{% if caption %}<figcaption class="cm-stat-label" style="margin-top:0.5rem;text-align:center;">{{ caption }}</figcaption>{% endif %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user