53 lines
3.8 KiB
HTML
53 lines
3.8 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../styles.css"><style>
|
|
.wel{display:flex;gap:30px;align-items:center;padding:0 6px 22px}
|
|
.bookwrap{flex:none;margin:0;width:196px;text-align:center}
|
|
.bookwrap img{width:196px;display:block}
|
|
.bookwrap figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:-14px}
|
|
.wtxt h2{font-family:var(--display);font-weight:900;font-size:50px;letter-spacing:-.03em;line-height:1;color:var(--pine-deep)}
|
|
.wtxt .t{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1.2;margin:14px 0 12px}
|
|
.wtxt .s{font-size:16px;line-height:1.5;color:var(--muted);max-width:25rem}
|
|
.wtxt .pub{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--pine);margin-top:16px}
|
|
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
|
|
.trio>div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 14px 18px;text-align:center;box-shadow:var(--sh-sm)}
|
|
.ico.big{width:58px;height:58px;padding:13px;border-radius:999px;background:var(--pine-wash);border:1px solid var(--pine-tint);display:block;margin:0 auto 12px}
|
|
.trio p{font-weight:700;font-size:16px;line-height:1.3}
|
|
</style></head><body>
|
|
<div class="canvas" id="shot">
|
|
<div class="wel">
|
|
<figure class="bookwrap"><img src="../assets-gen/cover-3d.png" alt=""><figcaption>Cover mockup</figcaption></figure>
|
|
<div class="wtxt">
|
|
<h2>Welcome</h2>
|
|
<p class="t">We Own AI — The New American Dream</p>
|
|
<p class="s">A field book for advisors who want to use AI in their practice in ways they control.</p>
|
|
<p class="pub">BurnedOut Media / WeOwnNet</p>
|
|
</div>
|
|
</div>
|
|
<div class="trio">
|
|
<div><span class="ico big"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8.5" cy="8" r="3"/><path d="M3 19c.6-3.2 2.8-5 5.5-5s4.9 1.8 5.5 5"/><circle cx="16.5" cy="9" r="2.5"/><path d="M15.4 14.2c.4-.1.7-.2 1.1-.2 2.3 0 4.1 1.5 4.6 4.2"/></svg></span><p>Multi-author field book</p></div>
|
|
<div><span class="ico big"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="4" width="14" height="17" rx="2"/><path d="M9 4V3h6v1"/><path d="m8.5 10 1.5 1.5 3-3"/><path d="M14.5 10.5H16"/><path d="m8.5 15.5 1.5 1.5 3-3"/><path d="M14.5 16H16"/></svg></span><p>Tested AI workflows</p></div>
|
|
<div><span class="ico big"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6.5C6.5 5 9 5 12 6.5v12C9 17 6.5 17 4 18.5z"/><path d="M12 6.5c1-.5 2-.8 3-.9"/><path d="M20 12a4 4 0 1 1-1.2-2.9"/><path d="M19.2 6.6v2.6h-2.6"/></svg></span><p>Library updated often</p></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
window.__ready = (async () => {
|
|
let empty = 0;
|
|
for (const s of document.querySelectorAll('.slot[data-src]')) {
|
|
let ok = false;
|
|
for (const ext of ['jpg', 'jpeg', 'png', 'webp']) {
|
|
const url = s.dataset.src + '.' + ext;
|
|
ok = await new Promise(r => { const i = new Image(); i.onload = () => r(true); i.onerror = () => r(false); i.src = url; });
|
|
if (ok) { s.style.backgroundImage = 'url("' + url + '")'; s.classList.add('filled'); break; }
|
|
}
|
|
if (!ok) empty++;
|
|
}
|
|
await document.fonts.ready;
|
|
for (const el of document.querySelectorAll('[data-fit]')) {
|
|
let fs = parseFloat(getComputedStyle(el).fontSize);
|
|
const max = el.dataset.fit ? parseFloat(el.dataset.fit) : el.parentElement.clientWidth;
|
|
while (el.scrollWidth > max && fs > 10) { fs -= 0.5; el.style.fontSize = fs + 'px'; }
|
|
}
|
|
if (window.afterLayout) await window.afterLayout();
|
|
return empty;
|
|
})();
|
|
</script></body></html> |