@tokenoftrust/storefront-runner 0.1.0

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

@@ -0,0 +1,482 @@
+/* ============================================================================
+   Token of Trust — shared marketing-page components  ·  tot-navy concept v1.1
+   ----------------------------------------------------------------------------
+   The reusable composition layer for ported marketing subpages. Base tokens,
+   reset, layout, typography, header/nav, footer, buttons, .proof, .kicker,
+   .eyebrow, trust slots, forms and the reveal animation live in the shared
+   THEME (tot-navy.css). THIS file adds the page-level building blocks every
+   ported page shares — hero variants, feature/card grids, media splits, steps,
+   stat rows, reassurance rows, FAQ, breadcrumb, CTA band and the nav active
+   pill — so individual pages need little or no page-local CSS.
+   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.
+   ========================================================================== */
+
+/* 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);
+}
+
+/* Breadcrumb */
+.crumbs {
+  padding-top: 28px;
+  font-size: .85rem;
+  color: var(--muted);
+}
+.crumbs a {
+  color: var(--teal-ink);
+  text-decoration: none;
+  font-weight: 600;
+}
+.crumbs a:hover {
+  color: var(--navy);
+}
+.crumbs .sep {
+  margin: 0 8px;
+  opacity: .5;
+}
+
+/* Hero (centred default; .hero-split for image heroes) */
+.hero {
+  text-align: center;
+  padding: 64px 0 0;
+}
+.hero h1 {
+  margin: 16px auto;
+  max-width: 22ch;
+}
+.hero .lede {
+  max-width: 60ch;
+  margin: 0 auto;
+}
+.hero .cta-row {
+  justify-content: center;
+  margin-top: 28px;
+}
+.hero-split {
+  text-align: left;
+}
+.hero-split .container {
+  display: grid;
+  grid-template-columns: 1.05fr .95fr;
+  gap: 48px;
+  align-items: center;
+}
+.hero-split h1 {
+  margin: 14px 0;
+  max-width: 16ch;
+}
+.hero-split .lede {
+  margin: 0;
+  max-width: 52ch;
+}
+.hero-split .cta-row {
+  justify-content: flex-start;
+}
+.hero-media {
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+.hero-media img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+/* 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);
+}
+
+/* Feature / card grid */
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  margin-top: 44px;
+}
+.feature-grid.two {
+  grid-template-columns: repeat(2, 1fr);
+}
+.feature-grid.four {
+  grid-template-columns: repeat(4, 1fr);
+}
+.feat-card {
+  padding: 28px;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  transition: transform .2s, box-shadow .2s, border-color .2s;
+}
+.feat-card.accent {
+  border-top: 3px solid var(--teal);
+}
+.feat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow);
+  border-color: var(--line-cool);
+}
+.feat-card h3 {
+  font-size: 1.14rem;
+  letter-spacing: -.01em;
+  color: var(--navy);
+  margin-bottom: 8px;
+}
+.feat-card p {
+  font-size: .93rem;
+  color: var(--muted);
+}
+.card-link {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--tap);
+  margin-top: 10px;
+  font-weight: 700;
+  font-size: .9rem;
+  color: var(--teal-ink);
+  text-decoration: none;
+}
+.card-link:hover {
+  color: var(--navy);
+}
+
+/* Media split (copy beside a panel / image / list) */
+.split {
+  display: grid;
+  grid-template-columns: 1.05fr .95fr;
+  gap: 48px;
+  align-items: center;
+}
+.split.rev .split-copy {
+  order: 2;
+}
+.split-copy h2 {
+  margin-top: 6px;
+}
+.split-copy p {
+  color: var(--muted);
+  max-width: 48ch;
+  margin: 12px 0 24px;
+}
+.split-media {
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  box-shadow: var(--shadow-soft);
+  overflow: hidden;
+}
+.split-media img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.check-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  padding: 30px;
+  box-shadow: var(--shadow-soft);
+}
+.check-list li {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  font-size: .96rem;
+  color: var(--ink);
+}
+.check-list li::before {
+  content: "\2713";
+  font-weight: 800;
+  flex-shrink: 0;
+  color: var(--green);
+}
+.check-list li b {
+  display: block;
+}
+.check-list li span {
+  font-size: .88rem;
+  color: var(--muted);
+}
+
+/* Steps (numbered how-it-works) */
+.alt-bg {
+  background: #fff;
+  border-block: 1px solid var(--line);
+}
+.steps {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  margin-top: 44px;
+  text-align: center;
+}
+.steps.three {
+  grid-template-columns: repeat(3, 1fr);
+}
+.step {
+  padding: 28px 22px;
+  background: var(--cream);
+  border: 1px solid var(--line);
+  border-radius: 18px;
+}
+.step .num {
+  font-size: .74rem;
+  font-weight: 800;
+  letter-spacing: .14em;
+  display: inline-grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #eaf5f2;
+  color: var(--teal-ink);
+}
+.step h3 {
+  font-size: 1.02rem;
+  margin: 10px 0 6px;
+  color: var(--navy);
+}
+.step p {
+  font-size: .88rem;
+  color: var(--muted);
+}
+
+/* Stat row (big numbers) */
+.stat-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  margin-top: 40px;
+  text-align: center;
+}
+.stat-row.three {
+  grid-template-columns: repeat(3, 1fr);
+}
+.stat b {
+  display: block;
+  font-size: 2.4rem;
+  font-weight: 800;
+  letter-spacing: -.03em;
+  color: var(--navy);
+}
+.stat span {
+  font-size: .9rem;
+  color: var(--muted);
+}
+
+/* Reassurance row (trust / privacy callouts) */
+.reassure-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
+  margin-top: 40px;
+}
+.reassure-row.two {
+  grid-template-columns: repeat(2, 1fr);
+}
+.inline-links {
+  margin-top: 28px;
+  font-weight: 600;
+  text-align: center;
+}
+.inline-links a {
+  color: var(--teal-ink);
+  text-decoration: none;
+}
+.inline-links a:hover {
+  color: var(--navy);
+}
+
+/* FAQ (details/summary accordion) */
+.faq {
+  max-width: 760px;
+  margin: 40px auto 0;
+}
+.faq details {
+  margin-bottom: 12px;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+}
+.faq summary {
+  padding: 18px 20px;
+  font-weight: 700;
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--navy);
+}
+.faq summary::-webkit-details-marker {
+  display: none;
+}
+.faq summary::after {
+  content: "+";
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: var(--teal-ink);
+  transition: transform .2s;
+}
+.faq details[open] summary::after {
+  transform: rotate(45deg);
+}
+.faq details p {
+  padding: 0 20px 18px;
+  color: var(--muted);
+}
+
+/* CTA band */
+.cta-band {
+  padding: 64px 40px;
+  text-align: center;
+  background: linear-gradient(135deg, var(--navy), var(--navy-2));
+  border-radius: 26px;
+  color: #fff;
+}
+.cta-band .kicker {
+  color: #7fe3b8;
+}
+.cta-band h2 {
+  color: #fff;
+}
+.cta-band p {
+  max-width: 52ch;
+  margin: 0 auto;
+  color: #b8c8de;
+}
+.cta-band .cta-row {
+  justify-content: center;
+  margin-top: 24px;
+}
+.cta-band .btn-line {
+  background: transparent;
+  color: #fff;
+  border-color: rgba(255, 255, 255, .5);
+}
+.cta-band .btn-line:hover {
+  border-color: #fff;
+}
+
+/* Prose block (long-form copy: careers, legal-shell, etc.) */
+.prose {
+  max-width: 68ch;
+  margin: 0 auto;
+  color: var(--ink);
+}
+.prose h2 {
+  margin-top: 36px;
+}
+.prose h3 {
+  margin-top: 24px;
+  color: var(--navy);
+}
+.prose p {
+  margin-top: 12px;
+  color: var(--muted);
+}
+.prose ul {
+  margin: 12px 0 12px 22px;
+  color: var(--muted);
+}
+.prose li {
+  margin-top: 6px;
+}
+
+/* Logo strip caption */
+.logo-note {
+  text-align: center;
+  font-size: .82rem;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-weight: 800;
+  margin-bottom: 20px;
+}
+
+/* Responsive */
+@media (max-width: 980px) {
+  .feature-grid, .feature-grid.four {
+    grid-template-columns: 1fr 1fr;
+  }
+  .steps, .stat-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .hero-split .container, .split {
+    grid-template-columns: 1fr;
+    gap: 28px;
+  }
+  .hero-split {
+    text-align: center;
+  }
+  .hero-split h1, .hero-split .lede {
+    max-width: none;
+    margin-inline: auto;
+  }
+  .hero-split .cta-row {
+    justify-content: center;
+  }
+  .split.rev .split-copy {
+    order: 0;
+  }
+  .reassure-row, .reassure-row.two {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 560px) {
+  .feature-grid, .feature-grid.two, .feature-grid.four, .steps, .steps.three, .stat-row {
+    grid-template-columns: 1fr;
+    max-width: 440px;
+    margin-inline: auto;
+  }
+}
+
+/* Dark theme — literal light surfaces re-pointed at the card/tint layer */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    nav.primary a.active { background: rgba(43, 179, 166, .16); }
+    .hero-media, .feat-card, .split-media, .check-list, .alt-bg, .faq details { background: var(--card); }
+    .step .num { background: rgba(43, 179, 166, .16); }
+    .crumbs a:hover, .feat-card h3, .card-link:hover, .step h3, .stat b,
+    .inline-links a:hover, .faq summary, .prose h3 { color: var(--ink); }
+  }
+}
+:root[data-theme="dark"] nav.primary a.active { background: rgba(43, 179, 166, .16); }
+:root[data-theme="dark"] .hero-media,
+:root[data-theme="dark"] .feat-card,
+:root[data-theme="dark"] .split-media,
+:root[data-theme="dark"] .check-list,
+:root[data-theme="dark"] .alt-bg,
+:root[data-theme="dark"] .faq details { background: var(--card); }
+:root[data-theme="dark"] .step .num { background: rgba(43, 179, 166, .16); }
+:root[data-theme="dark"] .crumbs a:hover,
+:root[data-theme="dark"] .feat-card h3,
+:root[data-theme="dark"] .card-link:hover,
+:root[data-theme="dark"] .step h3,
+:root[data-theme="dark"] .stat b,
+:root[data-theme="dark"] .inline-links a:hover,
+:root[data-theme="dark"] .faq summary,
+:root[data-theme="dark"] .prose h3 { color: var(--ink); }

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

@@ -0,0 +1,214 @@
+/* ============================================================================
+   Token of Trust — pricing page-local styles
+   ----------------------------------------------------------------------------
+   Base tokens, reset, layout, typography, header/nav, footer, the shared
+   button base (.btn) and generic chrome live in the shared theme
+   (tot-navy.css, concept v1.1). This file holds ONLY pricing-unique
+   components: the plan grid, tabbed panels, the tax card, the how-it-works
+   steps, the enterprise band and the pricing FAQ.
+   Consumes the shared token layer (do not re-declare :root); primary CTAs
+   route through the AA-hardened --color-cta. Do not minify — one rule per
+   line, keep the section headers.
+   ========================================================================== */
+
+/* Hero + heading override (centred pricing hero) ------------------- */
+.hero { text-align: center; padding: 72px 0 0; }
+h1 { margin: 16px auto; max-width: 24ch; }
+h1 .acc {
+  background: var(--grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.lede { max-width: 56ch; margin: 0 auto; }
+
+/* Buttons (pricing CTA variants over the shared .btn base) --------- */
+.btn-p { background: var(--color-cta); color: #fff; box-shadow: 0 7px 20px rgba(21, 122, 74, .28); }
+.btn-p:hover { background: var(--color-cta-hover); }
+.btn-s { background: #fff; color: var(--navy); border: 1.5px solid var(--line-cool); }
+.btn-s:hover { border-color: var(--navy); }
+.btn-tax, .btn-ent { background: var(--coral); color: #fff; }
+.btn-tax:hover, .btn-ent:hover { background: #a5341f; }
+
+/* Category tabs ---------------------------------------------------- */
+.tabs {
+  display: inline-flex; padding: 6px; margin-top: 40px; gap: 4px;
+  flex-wrap: wrap; justify-content: center; background: #fff;
+  border: 1px solid var(--line); border-radius: 999px;
+  box-shadow: 0 6px 18px rgba(16, 41, 75, .06);
+}
+.tab {
+  border: 0; background: transparent; font-weight: 700; font-size: .9rem;
+  padding: 11px 22px; min-height: var(--tap); cursor: pointer; font-family: inherit;
+  color: var(--muted); border-radius: 999px;
+  transition: background .15s, color .15s, box-shadow .15s;
+}
+.tab[aria-selected="true"] { background: var(--navy); color: #fff; }
+
+/* Plan grid -------------------------------------------------------- */
+.plans-section { padding-top: 40px; }
+.panel[hidden] { display: none; }
+.plans {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 24px; align-items: start;
+}
+.plans.two { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
+.plan {
+  padding: 36px; position: relative; background: #fff;
+  border: 1px solid var(--line); border-radius: var(--r);
+  transition: transform .2s, box-shadow .2s, border-color .2s;
+}
+.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
+.plan.popular {
+  border: 2px solid transparent;
+  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
+  box-shadow: var(--shadow);
+}
+.pop-badge {
+  position: absolute; top: -14px; left: 24px; font-size: .7rem; font-weight: 800;
+  letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px;
+  background: var(--coral); color: #fff; border-radius: 999px;
+}
+.plan h3 { font-size: 1.22rem; letter-spacing: -.01em; color: var(--navy); }
+.plan .for {
+  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
+  text-transform: uppercase; margin: 6px 0 14px; color: var(--teal-ink);
+}
+.price { display: flex; align-items: baseline; gap: 6px; }
+.price b { font-size: 2.5rem; letter-spacing: -.03em; font-weight: 800; color: var(--navy); }
+.price span { font-weight: 600; }
+.per { font-size: .86rem; margin-top: 4px; color: var(--muted); }
+.plan hr { border: 0; margin: 24px 0; border-top: 1px solid var(--line); }
+.plan ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
+.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--muted); }
+.plan li::before { content: "\2713"; font-weight: 800; flex-shrink: 0; color: var(--green); }
+.plan .btn { width: 100%; text-align: center; }
+.minitags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
+.minitags span {
+  font-size: .72rem; font-weight: 700; padding: 4px 11px;
+  background: #eaf5f2; color: var(--navy); border-radius: 999px;
+}
+
+/* Tax card --------------------------------------------------------- */
+.tax-card {
+  overflow: hidden; max-width: 920px; margin: 0 auto; background: #fff;
+  border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow);
+}
+.tax-card .bar { height: 6px; background: var(--grad); }
+.tax-grid { display: grid; grid-template-columns: 1.4fr 1fr; }
+.tax-left { padding: 40px; }
+.tax-left .for {
+  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
+  text-transform: uppercase; margin-bottom: 10px; color: var(--coral);
+}
+.tax-left h3 { font-size: 1.65rem; letter-spacing: -.02em; margin-bottom: 10px; color: var(--navy); }
+.tax-left > p { margin-bottom: 24px; color: var(--muted); }
+.tax-left ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
+.tax-left li { display: flex; gap: 10px; }
+.tax-left li::before { content: "\2713"; font-weight: 800; flex-shrink: 0; margin-top: 2px; color: var(--green); }
+.tax-left li b { display: block; }
+.tax-left li span { font-size: .87rem; color: var(--muted); }
+.tax-right {
+  padding: 40px; display: flex; flex-direction: column; justify-content: center;
+  text-align: center; background: var(--navy); color: #dbe6f5;
+}
+.tax-right small {
+  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
+  text-transform: uppercase; color: #8fa5c4;
+}
+.tax-right .price { justify-content: center; margin: 8px 0 4px; }
+.tax-right .price b { color: #fff; }
+.tax-right .price span { color: #8fa5c4; }
+.tax-right .per, .tax-right .alt { color: #8fa5c4; }
+.tax-right .btn { margin-top: 24px; }
+.tax-right .alt { font-size: .85rem; margin-top: 12px; }
+.tax-right .alt a { color: #7fe3b8; font-weight: 700; }
+
+/* How it works — steps --------------------------------------------- */
+.alt-bg { background: #fff; border-block: 1px solid var(--line); }
+.steps {
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  gap: 24px; margin-top: 40px; text-align: center;
+}
+.step { padding: 28px 22px; background: var(--cream); border: 1px solid var(--line); border-radius: 18px; }
+.step .num {
+  font-size: .74rem; font-weight: 800; letter-spacing: .14em;
+  display: inline-grid; place-items: center; width: 40px; height: 40px;
+  border-radius: 50%; background: #eaf5f2; color: var(--teal-ink);
+}
+.step h3 { font-size: 1.02rem; margin: 8px 0 6px; color: var(--navy); }
+.step p { font-size: .87rem; color: var(--muted); }
+
+/* Enterprise band -------------------------------------------------- */
+.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; }
+.ent-band .btn { margin-top: 24px; }
+.ent-band .btn-ent { background: var(--color-cta); }
+.ent-band .btn-ent:hover { background: var(--color-cta-hover); }
+
+/* Pricing FAQ ------------------------------------------------------ */
+.faq { max-width: 760px; margin: 40px auto 0; }
+.faq details {
+  margin-bottom: 12px; overflow: hidden; background: #fff;
+  border: 1px solid var(--line); border-radius: 14px;
+}
+.faq summary {
+  padding: 18px 20px; font-weight: 700; cursor: pointer; list-style: none;
+  display: flex; justify-content: space-between; gap: 12px; color: var(--navy);
+}
+.faq summary::-webkit-details-marker { display: none; }
+.faq summary::after {
+  content: "+"; font-size: 1.3rem; font-weight: 600;
+  color: var(--teal-ink); transition: transform .2s;
+}
+.faq details[open] summary::after { transform: rotate(45deg); }
+.faq details p { padding: 0 20px 18px; color: var(--muted); }
+
+/* Nav active state + footer note (pricing-specific) ---------------- */
+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) {
+  .plans, .plans.two { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
+  .tax-grid { grid-template-columns: 1fr; }
+  .steps { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 560px) {
+  .steps { grid-template-columns: 1fr; }
+}
+
+/* Dark theme — literal light surfaces + decorative tints */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    .btn-s { background: var(--card); color: var(--ink); }
+    .tabs, .plan, .tax-card, .alt-bg, .faq details { background: var(--card); }
+    .plan.popular { background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; }
+    .minitags span, .step .num, nav.primary a.active { background: rgba(43, 179, 166, .16); color: var(--teal-ink); }
+    .plan h3, .price b, .tax-left h3, .step h3, .faq summary { color: var(--ink); }
+  }
+}
+:root[data-theme="dark"] .btn-s { background: var(--card); color: var(--ink); }
+:root[data-theme="dark"] .tabs,
+:root[data-theme="dark"] .plan,
+:root[data-theme="dark"] .tax-card,
+:root[data-theme="dark"] .alt-bg,
+:root[data-theme="dark"] .faq details { background: var(--card); }
+:root[data-theme="dark"] .plan.popular { background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; }
+:root[data-theme="dark"] .minitags span,
+:root[data-theme="dark"] .step .num,
+:root[data-theme="dark"] nav.primary a.active { background: rgba(43, 179, 166, .16); color: var(--teal-ink); }
+:root[data-theme="dark"] .plan h3,
+:root[data-theme="dark"] .price b,
+:root[data-theme="dark"] .tax-left h3,
+:root[data-theme="dark"] .step h3,
+:root[data-theme="dark"] .faq summary { color: var(--ink); }