danny/hosted
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ifttt: minimal homepage + stepper

Browse source
This commit is contained in:
root 2025-12-29 09:05:00 +00:00
parent 024d6890ed
commit ccac893c55
4 changed files with 315 additions and 443 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
ifttt/app.js
View file

@ -1,6 +1,10 @@
(() => {
const typewordEl = document.getElementById("typeword");
if (typewordEl) startTypewriter(typewordEl);
const stepperEl = document.getElementById("stepper");
const revealStepper = createStepperRevealer(stepperEl);
if (stepperEl) window.setTimeout(revealStepper, 5200);
if (typewordEl) startTypewriter(typewordEl, { onFirstCycleDone: revealStepper });
const quoteTextEl = document.getElementById("quoteText");
const quoteMetaEl = document.getElementById("quoteMeta");
@ -8,17 +12,29 @@
if (quoteTextEl && quoteMetaEl && quoteWrapEl) startQuoteTicker({ quoteWrapEl, quoteTextEl, quoteMetaEl });
})();
function startTypewriter(typewordEl) {
const words = ["Transparent", "Traceable", "Trustworthy", "TTT"];
function createStepperRevealer(stepperEl) {
let shown = false;
return () => {
if (shown || !stepperEl) return;
shown = true;
stepperEl.hidden = false;
window.requestAnimationFrame(() => stepperEl.classList.add("homeStepper--show"));
};
}
function startTypewriter(typewordEl, opts = {}) {
const words = ["Transparent", "Traceable", "Trust", "TTT"];
const typeMs = 42;
const deleteMs = 26;
const holdMs = 780;
const finalHoldMs = 1100;
const betweenMs = 180;
const onFirstCycleDone = typeof opts.onFirstCycleDone === "function" ? opts.onFirstCycleDone : null;
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
let cycleCount = 0;
const tick = () => {
const word = words[wordIndex] || "";
@ -43,6 +59,10 @@ function startTypewriter(typewordEl) {
if (atStart) {
isDeleting = false;
wordIndex = (wordIndex + 1) % words.length;
if (wordIndex === 0) {
cycleCount += 1;
if (cycleCount === 1 && onFirstCycleDone) onFirstCycleDone();
}
window.setTimeout(tick, betweenMs);
return;
}

15
ifttt/assets/ifttt-quotes.json
View file

@ -19,6 +19,21 @@
"source": "IF.TTT paper (v2.3)",
"href": "https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
},
{
"text": "We don’t claim trust. We publish receipts.",
"source": "IF.TTT stance",
"href": "https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
},
{
"text": "Your auditor shouldn’t need your credentials.",
"source": "IF.TTT public receipts",
"href": "https://infrafabric.io/static/hosted/ifttt/"
},
{
"text": "Third parties verify. We just publish the math.",
"source": "IF.TTT posture",
"href": "https://infrafabric.io/static/hosted/ifttt/"
},
{
"text": "Receipts must be readable and verifiable without credentials.",
"source": "IF.TTT public receipt surface",

473
ifttt/index.html
View file

@ -22,10 +22,10 @@
<script src="./app.js" defer></script>
</head>
<body>
<header class="top">
<body class="home">
<header class="top top--home">
<div class="wrap top__inner">
<a class="brand" href="#top" aria-label="IF.TTT home">
<a class="brand" href="./" aria-label="IF.TTT home">
<img class="brand__logo" src="./assets/if-logo-simple.svg" alt="" aria-hidden="true" />
<span class="brand__text">
<span class="brand__title">IF.TTT</span>
@ -33,462 +33,115 @@
</span>
</a>
<nav class="nav" aria-label="Primary">
<a href="#how">How It Works</a>
<a href="#trust">Third‑Party Trust</a>
<a href="#verify">Verify</a>
<a href="#verticals">Verticals</a>
<nav class="homeNav" aria-label="Top links">
<a href="./governance/">Governance</a>
<a href="./whitepaper/">Whitepaper</a>
<a href="#faq">FAQ</a>
<a href="./api/">Developers</a>
<a href="./about/">About</a>
<a class="lang" href="./fr/" aria-label="French">FR</a>
<span class="homeNav__sep">·</span>
<a class="homeNav__contact" href="mailto:ds@infrafabric.io">ds@infrafabric.io</a>
</nav>
</div>
</header>
<main id="top">
<section class="hero">
<div class="wrap hero__grid">
<div class="hero__copy">
<p class="kicker">Open governance, readable by outsiders</p>
<h1>Receipts, not vibes.</h1>
<div class="type" aria-label="Typing animation">
<main id="top" class="homeMain" aria-label="IF.TTT overview">
<div class="wrap homeMain__inner">
<div class="homeCenter">
<div class="homeBadges" aria-label="Status badges">
<a
class="badge badge--ok badge--big"
href="https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n"
target="_blank"
rel="noreferrer"
>VERIFIED</a
>
<a class="badge badge--big" href="./api/#quantum">QUANTUM READY</a>
</div>
<div class="type type--home" aria-label="Typing animation">
<span class="type__prefix">if.</span><span id="typeword"></span><span class="type__suffix">&gt;</span
><span class="type__caret" aria-hidden="true"></span>
</div>
<div class="quote" aria-live="polite" aria-label="Rotating quote">
<div class="quote quote--home" aria-live="polite" aria-label="Rotating quote">
<div class="quote__text" id="quoteText"></div>
<div class="quote__meta" id="quoteMeta"></div>
</div>
<p class="lede">
IF.TTT is a receipt‑first governance layer. It binds a <strong>source artifact</strong> to an <strong>output</strong> with a
<strong>trace page</strong>, stable <strong>no‑login links</strong>, and optional <strong>offline bundles</strong> anyone can verify.
<p class="homeLede">
Open verification for governance: third parties can verify receipts without your credentials.
<span class="muted">Artifacts &gt; adjectives.</span>
</p>
<div class="pillrow" role="list" aria-label="Key properties">
<div class="pill" role="listitem">
<span class="pill__k">No‑login</span>
<span class="pill__v">Public proof surface</span>
</div>
<div class="pill" role="listitem">
<span class="pill__k">Offline</span>
<span class="pill__v">Triage bundles</span>
</div>
<div class="pill" role="listitem">
<span class="pill__k">Black/white</span>
<span class="pill__v">What’s verified vs what isn’t</span>
</div>
</div>
<div class="cta">
<a class="btn btn--primary" href="#verify">Try a live trace</a>
<a class="btn" href="#verticals">See vertical fit</a>
</div>
<p class="note">
We don’t claim “compliance”. We support audits by producing <em>verifiable receipts</em> that third parties can check without your
credentials.
</p>
</div>
<aside class="hero__card" aria-label="What a trace page shows">
<div class="card">
<div class="card__media">
<img
src="./assets/red-team-doc-1024-559.jpg"
alt="InfraFabric Red Team dossier cover with “EYES ONLY // DAVE” stamp"
loading="lazy"
/>
</div>
<div class="card__hdr">
<div class="badge badge--ok">VERIFIED</div>
<div class="badge">QUANTUM READY (optional)</div>
</div>
<div class="card__body">
<div class="kv">
<div class="kv__k">Source</div>
<div class="kv__v"><code>sha256:…</code></div>
<div class="kv__k">Output</div>
<div class="kv__v"><code>sha256:…</code></div>
<div class="kv__k">Trace</div>
<div class="kv__v"><code>trace_id: …</code></div>
<div class="kv__k">Share</div>
<div class="kv__v"><code>shareId: …</code></div>
</div>
<div class="mini">
<div class="mini__k">What’s the promise?</div>
<div class="mini__v">“Download the output. Hash it. Compare. Optionally verify offline.”</div>
</div>
</div>
</div>
</aside>
</div>
</section>
<section id="how" class="section">
<div class="wrap">
<h2>How It Works (receipt‑first)</h2>
<p class="sub">
This is the sequence third‑party reviewers actually care about. Every step either produces a receipt, or it doesn’t ship.
</p>
<section id="stepper" class="homeStepper" hidden>
<h2>How verification works</h2>
<p class="sub2">Black/white: what the receipt proves vs what it doesn’t.</p>
<ol class="steps">
<li class="step">
<div class="step__n">1</div>
<div class="step__b">
<div class="step__t">Capture the source bytes</div>
<div class="step__d">We hash the exact artifact (PDF/MD/etc) to produce <code>source_sha256</code>.</div>
<div class="step__t">Bind source ↔ output</div>
<div class="step__d">Hash the exact source bytes and the exact output bytes.</div>
</div>
</li>
<li class="step">
<div class="step__n">2</div>
<div class="step__b">
<div class="step__t">Produce the output bytes</div>
<div class="step__d">We hash the final output to produce <code>output_sha256</code> (what the reader sees).</div>
<div class="step__t">Publish a trace receipt</div>
<div class="step__d">A public page that links the hashes, time, and versioning.</div>
</div>
</li>
<li class="step">
<div class="step__n">3</div>
<div class="step__b">
<div class="step__t">Bind source ↔ output in a trace</div>
<div class="step__d">We create <code>trace_id</code> and publish a trace receipt that links hashes, time, and versioning.</div>
<div class="step__t">No‑login share surface</div>
<div class="step__d">Stable URLs keyed by a single <code>shareId</code> (trace, dossier, pack, source).</div>
</div>
</li>
<li class="step">
<div class="step__n">4</div>
<div class="step__b">
<div class="step__t">Publish a no‑login proof surface</div>
<div class="step__d">Stable URLs keyed by an unguessable <code>shareId</code> (trace, dossier, pack, source).</div>
</div>
</li>
<li class="step">
<div class="step__n">5</div>
<div class="step__b">
<div class="step__t">Optional: publish offline bundles</div>
<div class="step__d">
For constrained environments, export <strong>triage bundles</strong> (lightweight/standard/full) verifiable without network access.
</div>
<div class="step__t">Optional: offline triage bundles</div>
<div class="step__d">Lightweight/standard/full bundles for constrained environments.</div>
</div>
</li>
</ol>
</div>
</section>
<section id="trust" class="section section--alt">
<div class="wrap">
<h2>Third‑Party Trust Requirements (what outsiders demand)</h2>
<p class="sub">This is the “procurement/audit” checklist, stated plainly.</p>
<div class="grid2">
<div class="panel">
<h3>Typical third‑party questions</h3>
<ul class="list">
<li>“Can I verify the output came from this source?”</li>
<li>“Can I verify without your login, VPN, or internal tools?”</li>
<li>“Can I verify later, offline, after a dispute?”</li>
<li>“What does the receipt prove, and what does it not prove?”</li>
<li>“If the evidence is missing, is that visible?”</li>
</ul>
</div>
<div class="panel">
<h3>IF.TTT answers (black/white)</h3>
<div class="bw">
<div class="bw__row">
<div class="bw__k">Proves</div>
<div class="bw__v">Integrity binding (hashes), publication receipts, optional signatures, offline verification artifacts.</div>
</div>
<div class="bw__row">
<div class="bw__k">Does not prove</div>
<div class="bw__v">
Intent, interpretation, or “compliance”. It gives evidence; your process decides what that evidence means.
</div>
</div>
<div class="bw__row">
<div class="bw__k">Default stance</div>
<div class="bw__v">If it’s not verifiable, label it as a gap (do not endorse it).</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="verify" class="section">
<div class="wrap">
<h2>Open Verification (try it yourself)</h2>
<p class="sub">Use the same path your auditors and external reviewers will use.</p>
<div class="verify">
<div class="panel">
<h3>Live example (trace + bundles)</h3>
<div class="links">
<a class="linkrow" href="https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n" target="_blank" rel="noreferrer">
<span class="linkrow__t">Example trace page</span>
<span class="linkrow__u">https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n</span>
</a>
<div class="homeLinks" aria-label="Live demo links">
<a class="homeLink" href="https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n" target="_blank" rel="noreferrer"
>Open a live trace receipt</a
>
<a class="homeLink" href="https://infrafabric.io/static/pack/6qRgcR01kw_qNo63Dbs_ob9n.md" target="_blank" rel="noreferrer"
>Open the corresponding pack</a
>
<a class="homeLink" href="https://infrafabric.io/static/hosted/review/trace-bundles/b6547c03/index.md" target="_blank" rel="noreferrer"
>Triage bundle selector (offline)</a
>
<a class="homeLink" href="https://infrafabric.io/static/hosted/iftrace.py" target="_blank" rel="noreferrer">Download `iftrace.py`</a>
<a
class="linkrow"
href="https://infrafabric.io/static/hosted/review/trace-bundles/d70ed99a/index.html"
class="homeLink"
href="https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
target="_blank"
rel="noreferrer"
>
<span class="linkrow__t">Triage bundle selector (lightweight/standard/full)</span>
<span class="linkrow__u">https://infrafabric.io/static/hosted/review/trace-bundles/d70ed99a/index.html</span>
</a>
<a class="linkrow" href="https://infrafabric.io/static/hosted/iftrace.html" target="_blank" rel="noreferrer">
<span class="linkrow__t">Offline verifier (HTML view)</span>
<span class="linkrow__u">https://infrafabric.io/static/hosted/iftrace.html</span>
</a>
<a class="linkrow" href="https://infrafabric.io/static/hosted/iftrace.py" target="_blank" rel="noreferrer">
<span class="linkrow__t">Offline verifier (download)</span>
<span class="linkrow__u">https://infrafabric.io/static/hosted/iftrace.py</span>
</a>
</div>
<details class="details">
<summary>Public receipt URLs (no-login)</summary>
<p class="fine" style="margin-top: 10px">
Every published output gets a stable share surface keyed by a single <code>shareId</code>.
</p>
<pre class="code"><code>https://infrafabric.io/static/trace/&lt;shareId&gt;
https://infrafabric.io/static/dossier/&lt;shareId&gt;
https://infrafabric.io/static/dossier/&lt;shareId&gt;/download
https://infrafabric.io/static/pack/&lt;shareId&gt;.md
https://infrafabric.io/static/review/&lt;shareId&gt;.md
https://infrafabric.io/static/marketing/&lt;shareId&gt;.md
https://infrafabric.io/static/source/&lt;source_sha256&gt;.pdf</code></pre>
<p class="fine">
HTML views exist for sandboxes that load <code>text/html</code> but reject downloads:
<code>/static/pack/&lt;shareId&gt;</code>, <code>/static/review/&lt;shareId&gt;</code>, <code>/static/marketing/&lt;shareId&gt;</code>.
</p>
</details>
<p class="fine">
Note: some constrained “web fetchers” reject downloadable binaries (e.g., <code>.tar.gz</code>) while still loading HTML. That’s why
HTML views exist for packs and indexes.
</p>
</div>
<div class="panel">
<h3>CLI verification (2 minutes)</h3>
<p class="sub2">Download a bundle from the selector, then:</p>
<pre class="code"><code>curl -fsSL -o iftrace.py 'https://infrafabric.io/static/hosted/iftrace.py'
python3 iftrace.py verify trace_bundle_&lt;id&gt;_standard.tar.gz --expected-sha256 &lt;sha256&gt;</code></pre>
<p class="fine">
<strong>VERIFIED</strong> means the hashes match what the receipt declares. <strong>QUANTUM READY</strong> may be shown when a
post‑quantum signature receipt exists (PQ verification is additive; hash verification still stands).
</p>
</div>
</div>
</div>
</section>
<section id="verticals" class="section section--alt">
<div class="wrap">
<h2>Vertical Fit (what each buyer is actually looking for)</h2>
<p class="sub">Same mechanism, different third‑party pressure.</p>
<div class="cards">
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M5 12.5 12 6l7 6.5V20a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7.5Z" />
<path d="M9 22v-7h6v7" />
</svg>
</div>
<h3>B2B SaaS (SOC 2 / ISO)</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Auditors + enterprise procurement</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">Evidence that controls existed at the right time, in the right scope, with receipts.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Publishing no‑login receipts and offline bundles for disputes and audits.</p>
<a class="vcard__more" href="./verticals/saas/">B2B SaaS →</a>
</article>
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M4 10h16v10H4z" />
<path d="M6 10V7a6 6 0 0 1 12 0v3" />
<path d="M12 14v4" />
</svg>
</div>
<h3>Fintech / Regulated Finance</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Regulators + model risk + internal audit</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">Non‑repudiation, dispute workflows, and “show your work” provenance.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Binding outputs to sources and creating a defensible, replayable receipt trail.</p>
<a class="vcard__more" href="./verticals/finance/">Finance →</a>
</article>
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M12 3v18" />
<path d="M3 12h18" />
<path d="M7 7h10v10H7z" />
</svg>
</div>
<h3>Healthcare</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Compliance + vendors + incident reviewers</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">Clear boundaries: what’s verified, what’s inferred, and what must be reviewed by humans.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Making evidence legible to outsiders while preserving strict, machine‑verifiable receipts.</p>
<a class="vcard__more" href="./verticals/healthcare/">Healthcare →</a>
</article>
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M12 2 20 6v6c0 5-3.4 9.4-8 10-4.6-.6-8-5-8-10V6l8-4Z" />
<path d="M9 12l2 2 4-5" />
</svg>
</div>
<h3>Gov / Defense Contractors</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Assessors + customers + supply‑chain review</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">Offline‑verifiable bundles and unambiguous chain‑of‑custody.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Providing triage bundles that can be verified without trusted network access.</p>
<a class="vcard__more" href="./verticals/government/">Government →</a>
</article>
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M8 2h8v4H8z" />
<path d="M6 6h12v10a6 6 0 0 1-6 6 6 6 0 0 1-6-6V6Z" />
<path d="M9 12h6" />
</svg>
</div>
<h3>AI Product Companies</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Enterprise buyers + incident responders</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">Provable provenance for outputs (“why did it say that?”) without internal access.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Making trace receipts shareable, replayable, and dispute‑friendly.</p>
<a class="vcard__more" href="./verticals/ai/">AI products →</a>
</article>
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M10 18a8 8 0 1 1 5.3-14" />
<path d="M21 21l-6-6" />
<path d="M10 12h6" />
<path d="M10 15h4" />
</svg>
</div>
<h3>SecOps / SOC</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Executives + auditors after an incident</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">To verify AI summaries against raw evidence and keep chain‑of‑custody intact.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Binding “what the system said” to “what the system saw” via receipts and bundles.</p>
<a class="vcard__more" href="./verticals/secops/">SecOps →</a>
</article>
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M4 20V9l8-5 8 5v11" />
<path d="M9 20v-6h6v6" />
<path d="M6 12h12" />
</svg>
</div>
<h3>Industrial / Supply Chain</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Customers + auditors + insurers</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">Proof of change control and traceability that survives contractor handoffs.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Standardizing receipts so handoffs remain verifiable across organizational boundaries.</p>
<a class="vcard__more" href="./verticals/supply-chain/">Supply chain →</a>
</article>
</div>
</div>
</section>
<section id="faq" class="section">
<div class="wrap">
<h2>FAQ</h2>
<div class="faq">
<details>
<summary>What is “VERIFIED”?</summary>
<p>
“VERIFIED” means the hashes on the trace page match the output/source that can be downloaded and hashed independently. It is an
integrity receipt: the bytes match what the trace declares.
</p>
</details>
<details>
<summary>What is “QUANTUM READY”?</summary>
<p>
“QUANTUM READY” is shown when a post‑quantum signature receipt exists for the trace. It means PQ receipts are present now (for future
audit requirements). PQ verification is additive; the hash receipt remains valid either way.
</p>
</details>
<details>
<summary>Do you guarantee compliance?</summary>
<p>
No. IF.TTT produces verifiable artifacts that can support audits and disputes. Compliance is a broader program: scope, policy, human
review, and governance decisions are still required.
</p>
</details>
<details>
<summary>What’s the difference between shareId and trace_id?</summary>
<p>
<code>shareId</code> is the public handle used in URLs. <code>trace_id</code> is the chain‑of‑custody UUID recorded in receipts and
bundles.
</p>
</details>
</div>
<div class="foot">
<div class="foot__row">
<div class="foot__k">Docs</div>
<div class="foot__v">
<a href="https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html" target="_blank" rel="noreferrer"
>IF.TTT paper update (review pack)</a
>IF.TTT paper (review pack)</a
>
</div>
</div>
<div class="foot__row">
<div class="foot__k">Contact</div>
<div class="foot__v">
<a href="mailto:ds@infrafabric.io">ds@infrafabric.io</a> <span class="bottombar__sep">·</span> Danny Stocker
<span class="bottombar__sep">·</span> <a href="mailto:trace@infrafabric.io">trace@infrafabric.io</a>
</div>
</div>
</div>
</div>
<p class="note">
If it’s not verifiable, label it as a gap. Don’t endorse it.
<span class="muted">This is how you keep governance legible to outsiders.</span>
</p>
</section>
<div class="homeMeta" aria-label="Contact">
Danny Stocker <span class="bottombar__sep">·</span> <a href="mailto:ds@infrafabric.io">ds@infrafabric.io</a>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="wrap footer__inner">
<div class="muted">InfraFabric • IF.TTT receipts are designed to be legible to the governed.</div>
<div class="muted">
<a href="./governance/">Governance</a> · <a href="./api/">Developers</a> · <a href="./about/">About</a> ·
<a href="mailto:ds@infrafabric.io">ds@infrafabric.io</a>
</div>
</div>
</footer>
<div class="bottombar" aria-label="Quick links">
<div class="wrap bottombar__inner">
<div class="bottombar__left">

184
ifttt/style.css
View file

@ -853,3 +853,187 @@ details p {
padding-bottom: 74px;
}
}
/* Home (minimal landing; “OK Computer” empty-space bias) */
body.home {
background:
radial-gradient(900px 420px at 15% 0%, rgba(29, 78, 216, 0.06), transparent 60%),
radial-gradient(900px 420px at 85% 15%, rgba(139, 0, 0, 0.06), transparent 60%),
linear-gradient(#fffdf7, #ffffff);
}
body.home .top {
position: fixed;
left: 0;
right: 0;
background: transparent;
border-bottom: none;
backdrop-filter: none;
}
body.home .top__inner {
padding: 18px 0;
}
.homeNav {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
font-size: 12px;
}
.homeNav a {
color: var(--muted);
padding: 6px 8px;
border-radius: 10px;
}
.homeNav a:hover {
color: var(--text);
background: #ffffff;
border: 1px solid var(--border);
text-decoration: none;
}
.homeNav__sep {
color: rgba(107, 114, 128, 0.7);
}
.homeMain {
min-height: 100vh;
display: flex;
align-items: center;
padding: 120px 0 90px;
}
.homeMain__inner {
width: 100%;
}
.homeCenter {
text-align: center;
max-width: 920px;
margin: 0 auto;
}
.homeBadges {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 0 0 14px;
}
.badge--big {
font-size: 12px;
padding: 7px 12px;
border-radius: 999px;
letter-spacing: 0.08em;
}
.type--home {
font-size: clamp(44px, 7vw, 74px);
line-height: 1.05;
margin: 0 0 14px;
color: #111827;
}
.type--home .type__prefix,
.type--home .type__suffix {
font-weight: 800;
}
.type--home .type__caret {
width: 0.18em;
height: 1.05em;
margin-left: 0.12em;
border-radius: 0.14em;
background: rgba(17, 24, 39, 0.65);
}
.quote--home {
margin: 0 auto 14px;
}
.quote--home .quote__text {
font-size: 14px;
}
.homeLede {
margin: 0 auto 0;
max-width: 78ch;
color: #374151;
font-size: 13px;
}
.homeStepper {
margin: 18px auto 0;
max-width: 920px;
text-align: left;
opacity: 0;
transform: translateY(6px);
transition:
opacity 420ms ease,
transform 420ms ease;
}
.homeStepper.homeStepper--show {
opacity: 1;
transform: translateY(0);
}
.homeLinks {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 14px 0 0;
}
.homeLink {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 10px;
border-radius: 12px;
border: 1px solid var(--border);
background: #ffffff;
color: var(--text);
font-weight: 650;
font-size: 12px;
box-shadow: var(--shadow);
text-decoration: none;
}
.homeLink:hover {
text-decoration: none;
border-color: rgba(29, 78, 216, 0.35);
box-shadow:
var(--shadow),
0 0 0 4px rgba(29, 78, 216, 0.10);
}
.homeMeta {
margin-top: 14px;
font-size: 12px;
color: var(--muted);
}
@media (max-width: 980px) {
body.home .top {
position: sticky;
background: rgba(255, 253, 247, 0.92);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(10px);
}
.homeMain {
padding-top: 86px;
}
.type--home {
font-size: clamp(38px, 10vw, 54px);
}
}