6af6950f23
Layout / whitespace:
- Root-cause blank hero: seed passed hero styled-text (eyebrow/headline/
subheadline) as bare strings, but the hero template does field.text|default:field
and the ninjatpl engine throws a hard error on attribute-access-on-string, so the
whole hero (and the builtin fallback) errored and rendered as an empty ~160px band.
Seed now passes {text:...} objects (the builtin-sample / admin-editor format).
- tech_spec table: value + unit were both right-aligned, leaving a cavernous mid-gap;
label column now absorbs slack and value+unit group together on the right. Box
narrowed (34rem) with tighter padding so the HUD corners frame a deliberate panel.
- Tightened section rhythm (sc-section 4->3.5rem, sc-section-tight 2.5->2.75rem) and
hero bottom padding to remove oversized inter-section gaps.
- Defined sc-article-measure (was referenced but undefined -> unbounded line length).
Empty-media graceful state (seed ships no images):
- rich-section and hero (split) rendered an empty aspect-ratio muted box when media
was absent; media frame is now guarded and the grid collapses to one column.
Mobile responsiveness (explicit sc-* classes + @media, not JIT-scanned Tailwind):
- sc-form-grid (global + contact-form scoped) collapses to 1 column <=640px.
- gallery dropped inline grid-template-columns that overrode its responsive classes,
so 3/4-col galleries now collapse on small screens.
- nav toggle tap target bumped to 42x42px.
Motion robustness:
- Added a safety-net full-reveal timeout to the scroll-reveal script so below-fold
[data-sc-reveal] content is guaranteed visible on no-scroll screenshot captures and
IntersectionObserver edge cases. Reduced-motion / no-JS already render fully.
Semantic tokens only; check-safety 32 checks 19 ok 13 skip -> OK; codeless build OK.
No version bump.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
73 lines
3.5 KiB
Plaintext
73 lines
3.5 KiB
Plaintext
<!doctype html>
|
|
<html lang="en">
|
|
{{ head_html|safe }}
|
|
<body class="sc-body" style="margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: hsl(var(--muted)); color: hsl(var(--foreground));">
|
|
{{ admin_banner_html|safe }}
|
|
<main style="flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem;">
|
|
<div style="width: 100%; max-width: 26rem;">
|
|
<a href="/" aria-label="{{ site_settings.Title|default:"Home" }}" style="display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; margin-bottom: 1.5rem;"><span class="sc-mark sc-mark-square" aria-hidden="true"></span><span class="sc-brand">{{ site_settings.Title|default:"Sci-Fi Clean" }}</span></a>
|
|
<div class="sc-card sc-card-accent sc-reveal" style="padding: 2rem;">
|
|
{% if slots.main %}{{ slots.main|safe }}{% else %}<p class="sc-stat-label">No form assigned to this page.</p>{% endif %}
|
|
</div>
|
|
{% if slots.footer %}<div class="sc-stat-label" style="text-align: center; margin-top: 1.5rem; text-transform: none; letter-spacing: 0;">{{ slots.footer|safe }}</div>{% endif %}
|
|
</div>
|
|
</main>
|
|
<script>
|
|
/* Sci-Fi Clean MID motion: scroll-reveal, line-draw schematics, ticking
|
|
counters. Dependency-free. prefers-reduced-motion => everything static
|
|
and counters keep their final text. No JS => nothing runs, all visible. */
|
|
(function(){
|
|
var root = document.documentElement;
|
|
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
if (reduce) return;
|
|
root.classList.add('sc-js');
|
|
var revealSel = '[data-sc-reveal], .sc-schematic';
|
|
var items = [].slice.call(document.querySelectorAll(revealSel));
|
|
if ('IntersectionObserver' in window) {
|
|
var io = new IntersectionObserver(function(entries){
|
|
entries.forEach(function(e){
|
|
if (e.isIntersecting) { e.target.classList.add('sc-in'); io.unobserve(e.target); }
|
|
});
|
|
}, { rootMargin: '0px 0px -8% 0px' });
|
|
items.forEach(function(el){ io.observe(el); });
|
|
/* Safety net: guarantee full reveal for no-scroll captures / IO gaps. */
|
|
setTimeout(function(){ items.forEach(function(el){ el.classList.add("sc-in"); }); }, 1600);
|
|
} else {
|
|
items.forEach(function(el){ el.classList.add('sc-in'); });
|
|
}
|
|
var counters = [].slice.call(document.querySelectorAll('[data-sc-count]'));
|
|
function animate(el){
|
|
var raw = String(el.getAttribute('data-sc-count') || '');
|
|
var m = raw.match(/-?[0-9]+(\.[0-9]+)?/);
|
|
if (!m) return;
|
|
var target = parseFloat(m[0]);
|
|
var decimals = (m[0].split('.')[1] || '').length;
|
|
var prefix = raw.slice(0, m.index);
|
|
var suffix = raw.slice(m.index + m[0].length);
|
|
var start = null, dur = 1100;
|
|
function step(ts){
|
|
if (start === null) start = ts;
|
|
var p = Math.min((ts - start) / dur, 1);
|
|
var eased = 1 - Math.pow(1 - p, 3);
|
|
el.textContent = prefix + (target * eased).toFixed(decimals) + suffix;
|
|
if (p < 1) requestAnimationFrame(step);
|
|
else el.textContent = raw;
|
|
}
|
|
requestAnimationFrame(step);
|
|
}
|
|
if ('IntersectionObserver' in window) {
|
|
var co = new IntersectionObserver(function(entries){
|
|
entries.forEach(function(e){
|
|
if (e.isIntersecting) { animate(e.target); co.unobserve(e.target); }
|
|
});
|
|
}, { threshold: 0.4 });
|
|
counters.forEach(function(el){ co.observe(el); });
|
|
} else {
|
|
counters.forEach(animate);
|
|
}
|
|
})();
|
|
</script>
|
|
{{ body_end_html|safe }}
|
|
</body>
|
|
</html>
|