@tokenoftrust/storefront-runner 0.1.0

package/tenants/tokenoftrust/public/pages/solutions.css

@@ -0,0 +1,66 @@
+/* ============================================================================
+   Token of Trust — industries (solutions) page-local styles
+   ----------------------------------------------------------------------------
+   Tokens, reset, layout, typography, header/nav, footer, buttons, .kicker,
+   .reassurance and the reveal animation live in the shared theme
+   (tot-navy.css, v1.1). This file holds ONLY industries-page compositions: the
+   centred hero, the industry card grid, the CTA band and the nav active pill.
+   Consumes the shared token layer (no :root re-declare); primary CTAs route
+   through --color-cta. Do not minify — one rule per line, keep the headers.
+   ========================================================================== */
+
+/* Hero (centred) --------------------------------------------------- */
+.hero { text-align: center; padding: 72px 0 0; }
+.hero h1 { margin: 16px auto; max-width: 20ch; }
+.hero .lede { max-width: 58ch; margin: 0 auto; }
+.hero .cta-row { justify-content: center; margin-top: 28px; }
+
+/* CTA variants over the shared .btn base -------------------------- */
+.btn-ent { background: var(--color-cta); color: #fff; box-shadow: 0 7px 20px rgba(21, 122, 74, .28); }
+.btn-ent:hover { background: var(--color-cta-hover); }
+
+/* Industry card grid ---------------------------------------------- */
+.ind-section { padding-top: var(--s5); }
+.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
+.ind-card {
+  padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); border-top: 3px solid var(--teal);
+  transition: transform .2s, box-shadow .2s;
+}
+.ind-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
+.ind-card h3 { font-size: 1.12rem; letter-spacing: -.01em; color: var(--navy); margin-bottom: 10px; }
+.ind-card p { font-size: .92rem; color: var(--muted); }
+
+/* CTA band (over shared alt-bg + .ent-band) ----------------------- */
+.alt-bg { background: #fff; border-block: 1px solid var(--line); }
+.ent-band { padding: 64px 40px; text-align: center; background: linear-gradient(135deg, var(--navy), var(--navy-2)); border-radius: 26px; color: #fff; }
+.ent-band .kicker { color: #7fe3b8; }
+.ent-band h2 { color: #fff; }
+.ent-band p { max-width: 52ch; margin: 0 auto; color: #b8c8de; }
+.cta-center { justify-content: center; margin-top: 24px; }
+.ent-band .btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
+.ent-band .btn-line:hover { border-color: #fff; }
+
+/* Nav active pill + footer note ----------------------------------- */
+nav.primary a.active { color: var(--teal-ink); background: #eaf5f2; padding: 6px 16px; border-radius: 999px; font-weight: 700; }
+.foot-note { font-size: .88rem; margin-top: 12px; max-width: 34ch; color: var(--muted); }
+
+/* Responsive ------------------------------------------------------ */
+@media (max-width: 920px) {
+  .ind-grid { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 560px) {
+  .ind-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
+}
+
+/* Dark theme — literal light surfaces + decorative tints */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    .ind-card, .alt-bg { background: var(--card); }
+    nav.primary a.active { background: rgba(43, 179, 166, .16); color: var(--teal-ink); }
+    .ind-card h3 { color: var(--ink); }
+  }
+}
+:root[data-theme="dark"] .ind-card,
+:root[data-theme="dark"] .alt-bg { background: var(--card); }
+:root[data-theme="dark"] nav.primary a.active { background: rgba(43, 179, 166, .16); color: var(--teal-ink); }
+:root[data-theme="dark"] .ind-card h3 { color: var(--ink); }

package/tenants/tokenoftrust/public/themes/tot-navy-1.0.0.css

@@ -0,0 +1,136 @@
+/* ============================================================================
+   Token of Trust — "tot-navy" theme  (role: current · style concept v1.0.0)
+   ----------------------------------------------------------------------------
+   The reusable design-system foundation extracted verbatim (values unchanged)
+   from the design-11 marketing prototype that home.html + pricing.html were
+   ported from. This is the SHARED vocabulary only — tokens, base, typography,
+   buttons, chrome (header/nav/footer), the proof strip, and interaction/reveal
+   + responsive rules. Page-specific compositions (the animated hero console,
+   before/after, journey, plan cards, FAQ, industry grids) are NOT here — they
+   stay page-local.
+
+   Source of truth for the style guide at /_style-guide/tokenoftrust/tot-navy/.
+   Do not minify. Keep one rule per line and the section headers below.
+   ========================================================================== */
+
+/* --- 1. Design tokens ---------------------------------------------------- */
+:root {
+  /* Enterprise anchor */
+  --navy: #10294b;
+  --navy-2: #173763;
+  --navy-soft: #1e4275;
+  /* Soft neutrals */
+  --cream: #faf8f4;
+  --card: #ffffff;
+  --line: #e6e2d9;
+  --line-cool: #dfe6ee;
+  --ink: #1b2a40;
+  --muted: #5d6b80;
+  /* Warm + trust accents */
+  --teal: #0ea5a3;
+  --coral: #f97362;
+  --green: #1d9e5f;
+  --green-d: #17854f;
+  --gold: #d9a93f;
+  --grad: linear-gradient(115deg, var(--teal), #3b82c4);
+  /* Shape */
+  --r: 20px;
+  --r-sm: 13px;
+  --shadow: 0 12px 36px rgba(16, 41, 75, .10);
+  --shadow-soft: 0 8px 24px rgba(27, 42, 64, .07);
+  /* Spacing scale */
+  --s1: 8px;
+  --s2: 16px;
+  --s3: 24px;
+  --s4: 44px;
+  --s5: 72px;
+  --s6: 104px;
+  /* Type families */
+  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+/* --- 2. Reset & base ----------------------------------------------------- */
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body { font-family: var(--sans); background: var(--cream); color: var(--ink); line-height: 1.65; }
+img, svg { max-width: 100%; }
+a { color: inherit; }
+
+/* --- 3. Layout ----------------------------------------------------------- */
+.container { max-width: 1150px; margin: 0 auto; padding: 0 var(--s3); }
+.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100; border-radius: 0 0 10px 0; }
+.skip-link:focus { left: 0; }
+.center { text-align: center; }
+.center .section-lede { margin: 0 auto; }
+section { padding: var(--s5) 0; }
+
+/* --- 4. Typography ------------------------------------------------------- */
+h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); line-height: 1.12; letter-spacing: -.025em; margin: var(--s2) 0; font-weight: 800; color: var(--navy); }
+h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
+h2 { font-size: clamp(1.65rem, 3.3vw, 2.35rem); letter-spacing: -.02em; line-height: 1.16; margin: 10px 0 14px; font-weight: 800; color: var(--navy); }
+.kicker { font-size: .78rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--teal); }
+.lede { font-size: 1.13rem; color: var(--muted); max-width: 52ch; }
+.section-lede { color: var(--muted); max-width: 62ch; font-size: 1.05rem; }
+.support-line { font-size: .98rem; font-weight: 700; color: var(--coral); margin-top: 10px; }
+.eyebrow { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font-size: .82rem; font-weight: 700; color: var(--navy); }
+.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2.2s infinite; }
+
+/* --- 5. Buttons ---------------------------------------------------------- */
+.btn { display: inline-block; padding: 12px 24px; border-radius: 12px; font-weight: 700; font-size: .94rem; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s, background .15s; }
+.btn:hover { transform: translateY(-2px); }
+.btn-green { background: var(--green); color: #fff; box-shadow: 0 7px 20px rgba(29, 158, 95, .3); }
+.btn-green:hover { background: var(--green-d); }
+.btn-navy { background: var(--navy); color: #fff; }
+.btn-navy:hover { background: var(--navy-2); }
+.btn-line { background: #fff; color: var(--navy); border: 1.5px solid var(--line-cool); }
+.btn-line:hover { border-color: var(--navy); }
+
+/* --- 6. Header / primary nav -------------------------------------------- */
+header.site { position: sticky; top: 0; z-index: 50; background: rgba(250, 248, 244, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
+.nav-row { display: flex; align-items: center; justify-content: space-between; height: 70px; }
+.brand { display: flex; align-items: center; text-decoration: none; }
+.brand img { height: 34px; width: auto; display: block; }
+nav.primary ul { display: flex; gap: 28px; list-style: none; align-items: center; }
+nav.primary a { text-decoration: none; font-weight: 600; font-size: .94rem; color: var(--muted); }
+nav.primary a:hover { color: var(--navy); }
+.nav-cta { display: flex; gap: 12px; align-items: center; }
+.hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
+.hamburger span { display: block; width: 24px; height: 2.5px; background: var(--ink); margin: 5px 0; border-radius: 2px; }
+
+/* --- 7. Proof strip ------------------------------------------------------ */
+.proof { background: var(--navy); color: #cfdced; padding: 18px 0; }
+.proof .container { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; justify-content: center; }
+.proof span { font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
+.proof b { color: #fff; }
+.proof .sep { opacity: .35; }
+
+/* --- 8. Footer ----------------------------------------------------------- */
+footer.site { border-top: 1px solid var(--line); padding: var(--s5) 0; background: #f4f1ea; }
+.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s4); }
+.foot-grid h3 { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 800; }
+.foot-grid ul { list-style: none; }
+.foot-grid li { margin-bottom: 9px; }
+.foot-grid a { text-decoration: none; font-size: .92rem; font-weight: 600; }
+.foot-grid a:hover { color: var(--teal); }
+.copyright { margin-top: var(--s4); color: var(--muted); font-size: .85rem; }
+
+/* --- 9. Interaction / reveal -------------------------------------------- */
+.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
+.reveal.in { opacity: 1; transform: none; }
+@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(29, 158, 95, .5); } 50% { box-shadow: 0 0 0 6px rgba(29, 158, 95, 0); } }
+
+/* --- 10. Responsive foundation ------------------------------------------ */
+@media (max-width: 980px) {
+  .foot-grid { grid-template-columns: 1fr 1fr; }
+  nav.primary { display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--cream); border-bottom: 1px solid var(--line); padding: 18px 24px; }
+  nav.primary.open { display: block; }
+  nav.primary ul { flex-direction: column; align-items: flex-start; gap: 18px; }
+  .hamburger { display: block; }
+  .nav-cta .btn-line { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
+  .reveal { opacity: 1; transform: none; }
+  html { scroll-behavior: auto; }
+}

package/tenants/tokenoftrust/public/themes/tot-navy.css

@@ -0,0 +1,358 @@
+/* ============================================================================
+   Token of Trust — "tot-navy" theme  ·  concept v1.1 (ecommerce-hardened)
+   ----------------------------------------------------------------------------
+   v1.0.0 (baseline, faithful design-11 extraction) is retained at
+   tot-navy-1.0.0.css. v1.1 hardens it to the ecommerce style-guide quality bar:
+   WCAG 2.2 AA contrast + visible focus-visible rings, >=44px tap targets, a
+   semantic token layer, full interactive states, accessible form styles,
+   trust/social-proof component slots (placeholder — never fabricate claims),
+   an explicit CTA hierarchy, color-scheme, and perf-conscious motion.
+   Do not minify. One rule per line; keep the section headers.
+   ========================================================================== */
+
+/* --- 1. Design tokens ---------------------------------------------------- */
+:root {
+  color-scheme: light;
+
+  /* Enterprise anchor */
+  --navy: #10294b;
+  --navy-2: #173763;
+  --navy-soft: #1e4275;
+  /* Soft neutrals */
+  --cream: #faf8f4;
+  --card: #ffffff;
+  --line: #e6e2d9;
+  --line-cool: #dfe6ee;
+  --ink: #1b2a40;
+  --muted: #4d5a70;            /* darkened from v1.0 (#5d6b80) for AA on cream + white */
+  /* Warm + trust accents (decorative) */
+  --teal: #0d9391;             /* deepened for >=3:1 on cream (decorative/large use) */
+  --teal-ink: #0b6360;         /* AA-safe teal for small text (kickers/links) */
+  --coral: #bf3d2c;            /* AA on cream (~5.1:1) — safe as normal text (.support-line) */
+  --green: #1d9e5f;
+  --green-d: #17854f;
+  --gold: #8a6012;             /* deep amber, AA on cream (~5.2:1) — safe for text + rating icons */
+  --grad: linear-gradient(115deg, var(--teal), #3b82c4);
+
+  /* Semantic tokens (v1.1) — the layer components should consume */
+  --color-cta: #16794a;        /* primary action bg; white text = AA (~5.4:1) */
+  --color-cta-hover: #115f3a;
+  --color-trust: var(--teal-ink);
+  --color-error: #b3261e;
+  --color-success: #157a4a;
+  --color-warning: #8a5a10;
+  --surface-card: var(--card);
+  --surface-raised: var(--card);
+  --text-muted: var(--muted);
+  --focus-ring: #4f7fff;       /* >=3:1 focus outline on BOTH cream (~3.4:1) and navy (~3.6:1) */
+
+  /* Shape */
+  --r: 20px;
+  --r-sm: 13px;
+  --shadow: 0 12px 36px rgba(16, 41, 75, .10);
+  --shadow-soft: 0 8px 24px rgba(27, 42, 64, .07);
+  /* Spacing scale */
+  --s1: 8px;
+  --s2: 16px;
+  --s3: 24px;
+  --s4: 44px;
+  --s5: 72px;
+  --s6: 104px;
+  /* Type families */
+  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --tap: 44px;                 /* minimum interactive target */
+}
+
+/* --- 1b. Dark theme -------------------------------------------------------
+   Applies automatically for OS/browser dark mode, and is togglable ahead of
+   any future manual switch via [data-theme="dark"] / [data-theme="light"]
+   on <html> (the attribute always wins over the media query). Same token
+   names, dark values only — components below never re-branch on theme. */
+@media (prefers-color-scheme: dark) {
+  :root { color-scheme: dark; }
+}
+:root[data-theme="dark"] { color-scheme: dark; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --navy: #17335a;
+    --navy-2: #1f4272;
+    --navy-soft: #2c527f;
+    --cream: #0b1220;
+    --card: #131c2c;
+    --line: #263349;
+    --line-cool: #2b3c58;
+    --ink: #e7ecf5;
+    --muted: #9aa9c2;
+    --teal: #2bb3a6;
+    --teal-ink: #5eead4;
+    --coral: #ff9478;
+    --green: #34d399;
+    --green-d: #22c55e;
+    --gold: #f2c14e;
+    --grad: linear-gradient(115deg, var(--teal), #60a5fa);
+
+    --color-cta: #1c9c5e;
+    --color-cta-hover: #22b56c;
+    --color-trust: var(--teal-ink);
+    --color-error: #ff6b6b;
+    --color-success: #34d399;
+    --color-warning: #f2b84b;
+    --surface-card: var(--card);
+    --surface-raised: var(--card);
+    --text-muted: var(--muted);
+    --focus-ring: #7f9fff;
+
+    --shadow: 0 12px 36px rgba(0, 0, 0, .45);
+    --shadow-soft: 0 8px 24px rgba(0, 0, 0, .35);
+  }
+}
+:root[data-theme="dark"] {
+  --navy: #17335a;
+  --navy-2: #1f4272;
+  --navy-soft: #2c527f;
+  --cream: #0b1220;
+  --card: #131c2c;
+  --line: #263349;
+  --line-cool: #2b3c58;
+  --ink: #e7ecf5;
+  --muted: #9aa9c2;
+  --teal: #2bb3a6;
+  --teal-ink: #5eead4;
+  --coral: #ff9478;
+  --green: #34d399;
+  --green-d: #22c55e;
+  --gold: #f2c14e;
+  --grad: linear-gradient(115deg, var(--teal), #60a5fa);
+
+  --color-cta: #1c9c5e;
+  --color-cta-hover: #22b56c;
+  --color-trust: var(--teal-ink);
+  --color-error: #ff6b6b;
+  --color-success: #34d399;
+  --color-warning: #f2b84b;
+  --surface-card: var(--card);
+  --surface-raised: var(--card);
+  --text-muted: var(--muted);
+  --focus-ring: #7f9fff;
+
+  --shadow: 0 12px 36px rgba(0, 0, 0, .45);
+  --shadow-soft: 0 8px 24px rgba(0, 0, 0, .35);
+}
+
+/* --- 2. Reset & base ----------------------------------------------------- */
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body { font-family: var(--sans); background: var(--cream); color: var(--ink); line-height: 1.65; font-size: 16px; }
+img, svg { max-width: 100%; }
+a { color: inherit; }
+
+/* Global visible focus — never remove the outline, only replace it (v1.1). */
+:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
+
+/* --- 3. Layout ----------------------------------------------------------- */
+.container { max-width: 1150px; margin: 0 auto; padding: 0 var(--s3); }
+.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 12px 18px; z-index: 100; border-radius: 0 0 10px 0; }
+.skip-link:focus { left: 0; }
+.center { text-align: center; }
+.center .section-lede { margin: 0 auto; }
+section { padding: var(--s5) 0; }
+
+/* --- 4. Typography ------------------------------------------------------- */
+h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); line-height: 1.12; letter-spacing: -.025em; margin: var(--s2) 0; font-weight: 800; color: var(--navy); }
+h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
+h2 { font-size: clamp(1.65rem, 3.3vw, 2.35rem); letter-spacing: -.02em; line-height: 1.16; margin: 10px 0 14px; font-weight: 800; color: var(--navy); }
+.kicker { font-size: .875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); }
+.lede { font-size: 1.13rem; color: var(--muted); max-width: 52ch; }
+.section-lede { color: var(--muted); max-width: 62ch; font-size: 1.05rem; }
+.support-line { font-size: 1rem; font-weight: 700; color: var(--coral); margin-top: 10px; }
+.eyebrow {
+  display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
+  font-size: .875rem; font-weight: 700; color: var(--navy);
+}
+.eyebrow .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
+.eyebrow .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: pulse 2.2s infinite; }
+
+/* --- 5. Buttons — CTA hierarchy + full states (v1.1) --------------------- */
+/* primary = green/cta · secondary = navy · tertiary = line/outline */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 12px 24px; border-radius: 12px;
+  font-weight: 700; font-size: .95rem; text-decoration: none; border: 0; cursor: pointer;
+  transition: transform .15s, box-shadow .15s, filter .15s, background .15s;
+}
+.btn:hover { transform: translateY(-2px); }
+.btn:active { transform: translateY(0); filter: brightness(.96); }
+.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.2); }
+.btn.is-loading, .btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
+.btn.is-loading::after {
+  content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: #fff;
+  animation: btnspin .7s linear infinite;
+}
+@keyframes btnspin { to { transform: rotate(360deg); } }
+.btn-green, .btn-primary { background: var(--color-cta); color: #fff; box-shadow: 0 7px 20px rgba(21, 122, 74, .28); }
+.btn-green:hover, .btn-primary:hover { background: var(--color-cta-hover); }
+.btn-navy, .btn-secondary { background: var(--navy); color: #fff; }
+.btn-navy:hover, .btn-secondary:hover { background: var(--navy-2); }
+.btn-line, .btn-tertiary, .btn-outline { background: #fff; color: var(--navy); border: 1.5px solid var(--line-cool); }
+.btn-line:hover, .btn-tertiary:hover, .btn-outline:hover { border-color: var(--navy); }
+
+/* --- 6. Header / primary nav (>=44px targets) --------------------------- */
+header.site { position: sticky; top: 0; z-index: 50; background: rgba(250, 248, 244, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
+.nav-row { display: flex; align-items: center; justify-content: space-between; height: 70px; }
+.brand { display: flex; align-items: center; text-decoration: none; min-height: var(--tap); }
+.brand img { height: 34px; width: auto; display: block; }
+nav.primary ul { display: flex; gap: 20px; list-style: none; align-items: center; }
+nav.primary a {
+  display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--muted);
+}
+nav.primary a:hover { color: var(--navy); }
+.nav-cta { display: flex; gap: 12px; align-items: center; }
+.hamburger { display: none; background: none; border: 0; cursor: pointer; min-width: var(--tap); min-height: var(--tap); }
+.hamburger span { display: block; width: 24px; height: 2.5px; background: var(--ink); margin: 5px auto; border-radius: 2px; }
+
+/* --- 7. Proof strip ------------------------------------------------------ */
+.proof { background: var(--navy); color: #e2ebf6; padding: 18px 0; }
+.proof .container { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; justify-content: center; }
+.proof span { font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
+.proof b { color: #fff; }
+.proof .sep { opacity: .45; }
+
+/* --- 8. Footer ----------------------------------------------------------- */
+footer.site { border-top: 1px solid var(--line); padding: var(--s5) 0; background: #f4f1ea; }
+.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s4); }
+.foot-grid h3 { font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 800; }
+.foot-grid ul { list-style: none; }
+.foot-grid li { margin-bottom: 4px; }
+.foot-grid a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-size: .95rem; font-weight: 600; }
+.foot-grid a:hover { color: var(--teal-ink); }
+.copyright { margin-top: var(--s4); color: var(--muted); font-size: .9rem; }
+
+/* --- 9. Interaction / reveal -------------------------------------------- */
+.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
+.reveal.in { opacity: 1; transform: none; }
+/* Composited pulse (transform + opacity) — avoids non-composited box-shadow animation. */
+@keyframes pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.6); opacity: 0; } }
+
+/* --- 10. Accessible forms (v1.1) ---------------------------------------- */
+/* Field group: label + control + help/validation. required/optional marked. */
+.form-field { display: grid; gap: 6px; margin-bottom: var(--s2); }
+.form-label { font-weight: 700; font-size: .95rem; color: var(--ink); }
+.form-label .req { color: var(--color-error); }           /* required marker */
+.form-label .opt { color: var(--muted); font-weight: 400; } /* optional marker */
+.form-help { font-size: .9rem; color: var(--muted); }      /* aria-describedby hint */
+.form-control {
+  width: 100%; min-height: var(--tap); padding: 11px 14px; border: 1.5px solid var(--line-cool); border-radius: 10px; font: inherit; font-size: 1rem;
+  background: #fff; color: var(--ink);
+}
+.form-control::placeholder { color: #7a869a; }
+.form-control:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-color: var(--navy); }
+.form-control[aria-invalid="true"], .form-control.is-error { border-color: var(--color-error); }
+.form-control.is-success { border-color: var(--color-success); }
+.field-error { color: var(--color-error); font-size: .9rem; font-weight: 600; }   /* invalid state */
+.field-success { color: var(--color-success); font-size: .9rem; font-weight: 600; } /* success state */
+
+/* --- 11. Trust / social-proof component slots (v1.1) -------------------- */
+/* IMPORTANT: content is placeholder / needs-review. Never ship fabricated
+   ratings, testimonials, badges, guarantees, or customer/partner logos —
+   source-copy real claims or mark them needs-review. */
+/* Reviews & ratings (e.g. star rating, "G2" / "Capterra" review card) */
+.rating { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
+.stars { color: var(--gold); letter-spacing: 2px; font-size: 1.05rem; }
+.review-card { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; }
+/* Testimonial / customer quote */
+.testimonial {
+  background: var(--surface-card); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--r-sm); padding: 18px 20px;
+}
+.testimonial blockquote, .testimonial .quote { font-size: 1.02rem; color: var(--ink); }
+.testimonial .cite { margin-top: 10px; font-size: .9rem; color: var(--muted); font-style: normal; }
+/* Trust badge (security / compliance / certification) */
+.trust-badge {
+  display: inline-flex; align-items: center; gap: 8px; background: #eef4ff; border: 1px solid var(--line-cool); color: var(--navy); border-radius: 999px;
+  padding: 8px 14px; font-size: .9rem; font-weight: 700;
+}
+/* Reassurance callout (guarantee / returns / refund / risk-free) */
+.reassurance {
+  display: flex; align-items: center; gap: 10px; background: #f0f8f3; border: 1px solid #d3e9db; border-radius: var(--r-sm); padding: 12px 16px;
+  font-weight: 600; color: var(--ink);
+}
+/* Logo strip ("as seen in" / press / customer / partner logos) */
+.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; opacity: .85; }
+.logo-strip .logo { height: 26px; display: inline-flex; align-items: center; color: var(--muted); font-weight: 800; letter-spacing: .04em; }
+
+/* --- 12. CTA hierarchy helpers + mobile CTA (v1.1) ---------------------- */
+.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
+.mobile-cta { display: none; }   /* sticky primary CTA on small screens (below) */
+
+/* --- 13. Responsive foundation ------------------------------------------ */
+@media (max-width: 980px) {
+  .foot-grid { grid-template-columns: 1fr 1fr; }
+  nav.primary {
+    display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--cream); border-bottom: 1px solid var(--line); padding: 12px 24px;
+  }
+  nav.primary.open { display: block; }
+  nav.primary ul { flex-direction: column; align-items: stretch; gap: 0; }
+  nav.primary a { min-height: var(--tap); }
+  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
+  .nav-cta .btn-line { display: none; }
+  /* thumb-reachable primary CTA */
+  .mobile-cta {
+    display: flex; position: sticky; bottom: 0; z-index: 60; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
+    background: rgba(250, 248, 244, .96); border-top: 1px solid var(--line); backdrop-filter: blur(10px);
+  }
+  .mobile-cta .btn { flex: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
+  .reveal { opacity: 1; transform: none; }
+  .btn.is-loading::after { animation: none; }
+  html { scroll-behavior: auto; }
+}
+
+/* --- 14. Mobile legibility floor (a11y) --------------------------------- */
+/* On phone/tablet widths, no actionable or body text renders below the 14px
+   WCAG legibility minimum. max(0.875rem, 1em) only ever RAISES a size (never
+   shrinks below 14px), and !important lets it override page-local type scales
+   so no tenant page can opt an element under the floor. Desktop (>768px) keeps
+   its tighter editorial scale. Applies to every tenant page via the theme;
+   pairs with the >=44px tap targets on .brand / nav / .btn. */
+@media (max-width: 768px) {
+  p, li, a, button, input, textarea, select, summary, small {
+    font-size: max(0.875rem, 1em) !important;
+  }
+}
+
+/* --- 15. Dark theme — component overrides (literals not on the token layer) */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    header.site { background: rgba(11, 18, 32, .86); }
+    footer.site { background: #0e1728; }
+    .eyebrow { background: var(--card); }
+    .form-control { background: var(--card); color: var(--ink); }
+    .form-control::placeholder { color: #6b7a94; }
+    .trust-badge { background: #12233f; color: #d7e6ff; }
+    .reassurance { background: #0f2a1e; border-color: #1c4230; }
+    .brand img { background: #fff; padding: 4px 10px; border-radius: 8px; }
+    @media (max-width: 980px) { nav.primary { background: var(--cream); } }
+    /* --navy is a dark ANCHOR (panel bg / heading ink on light surfaces); on a
+       dark page it stays dark, so anything using it as heading/link-hover text
+       on the page or a card must repoint to --ink (near-white) to stay AA. Its
+       use as a background (console, ind-section, btn-navy, cta bands…) is
+       untouched — those already pair it with an explicit light text color. */
+    h1, h2, .eyebrow, nav.primary a:hover { color: var(--ink); }
+  }
+}
+:root[data-theme="dark"] header.site { background: rgba(11, 18, 32, .86); }
+:root[data-theme="dark"] footer.site { background: #0e1728; }
+:root[data-theme="dark"] .eyebrow { background: var(--card); }
+:root[data-theme="dark"] .form-control { background: var(--card); color: var(--ink); }
+:root[data-theme="dark"] .form-control::placeholder { color: #6b7a94; }
+:root[data-theme="dark"] .trust-badge { background: #12233f; color: #d7e6ff; }
+:root[data-theme="dark"] .reassurance { background: #0f2a1e; border-color: #1c4230; }
+:root[data-theme="dark"] .brand img { background: #fff; padding: 4px 10px; border-radius: 8px; }
+:root[data-theme="dark"] h1,
+:root[data-theme="dark"] h2,
+:root[data-theme="dark"] .eyebrow,
+:root[data-theme="dark"] nav.primary a:hover { color: var(--ink); }
+@media (max-width: 980px) {
+  :root[data-theme="dark"] nav.primary { background: var(--cream); }
+}

package/tenants/tokenoftrust/theme.json

@@ -0,0 +1,31 @@
+{
+  "_vendor": "Token of Trust — corporate/marketing tenant",
+  "_note": "PROVISIONAL brand tokens for the non-commerce tenant. Palette + type are a professional B2B/SaaS interpretation (deep navy ink + trust teal accent) since the design reference did not expose CSS. Exact brand hex, fonts, and logo/wordmark asset are NEEDS-REVIEW — see docs/epics/tokenoftrust-site-inventory.md (brand provenance). Wordmark falls back to a text treatment until a licensed logo asset is cleared.",
+  "brand": {
+    "headerVariant": "light",
+    "heroVariant": "light",
+    "motion": "full"
+  },
+  "color": {
+    "bg": "#F7F9FC",
+    "surface": "#FFFFFF",
+    "text": "#0A2540",
+    "muted": "#55637A",
+    "primary": "#0A2540",
+    "primary-contrast": "#FFFFFF",
+    "accent": "#0E9F8E",
+    "border": "#E3E8EF",
+    "success": "#0E9F8E",
+    "sale": "#D64545"
+  },
+  "type": {
+    "display": { "family": "Plus Jakarta Sans", "weights": [500, 600, 700, 800] },
+    "body": { "family": "Inter", "weights": [400, 500, 600] },
+    "mono": { "family": "JetBrains Mono", "weights": [400, 500] },
+    "scale": 1.2,
+    "tracking": "-0.018em"
+  },
+  "shape": {
+    "radius": { "sm": "4px", "md": "8px", "lg": "16px", "full": "999px" }
+  }
+}

package/tsconfig.base.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  }
+}