Proper landing page

author: Agam Singh <agamsingh@fortis-card.com> 2026-07-02 09:18:32 -0500
committer: Agam Singh <agamsingh@fortis-card.com> 2026-07-02 09:18:32 -0500
commit: 77e55022397a9a7605c10c62f69c0a45a5f9b4be (patch)
tree: fbd197922ec2a48baff47ad1b7c186f5ee6dc71b
parent: cb60763e44d5e3329450c23828831ebbff573c53 (diff)
1 files changed, 400 insertions, 73 deletions
diff --git a/index.html b/index.html
index 5e3f767..d021f2a 100644
--- a/index.html
+++ b/index.html
@@ -1,82 +1,409 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Fortis Card</title>
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
-  <style>
-    body {
-      margin: 0;
-      padding: 0;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      background-color: #0f0f0f;
-      color: #ffffff;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100vh;
-      text-align: center;
-    }
-
-    h1 {
-      font-size: 2.5rem;
-      margin-bottom: 0.5rem;
-    }
-
-    p {
-      font-size: 1.2rem;
-      max-width: 600px;
-      margin: 0 auto;
-    }
-
-    .status {
-      margin-top: 2rem;
-      font-style: italic;
-      color: #888;
-    }
-
-    .repo-button {
-      margin-top: 2.5rem;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-      background-color: #ffffff;
-      color: #000000;
-      padding: 0.6rem 1rem;
-      border-radius: 8px;
-      text-decoration: none;
-      font-weight: bold;
-      transition: background-color 0.2s ease;
-    }
-
-    .repo-button:hover {
-      background-color: #e1e1e1;
-    }
-
-    .repo-icon {
-      font-size: 1.2rem;
-    }
-
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.9rem;
-      color: #666;
-    }
-  </style>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Fortis Card</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  :root{
+    --bg: #121417;
+    --bg-panel: #181b1f;
+    --bg-elevated: #1e2126;
+    --border: #2b2f35;
+    --border-strong: #3a3f47;
+    --text: #eae7e0;
+    --text-dim: #9a9fa6;
+    --text-faint: #5b6067;
+    --gold: #c9a262;
+    --gold-bright: #e0bc7d;
+    --gold-dim: #6b5a3c;
+    --sage: #7fa88f;
+    --sage-dim: #4d6b5c;
+    --danger: #b56a5a;
+    --font-display: 'Space Grotesk', sans-serif;
+    --font-mono: 'IBM Plex Mono', monospace;
+    --font-body: 'IBM Plex Sans', sans-serif;
+    --max-w: 1120px;
+  }
+
+  *{ box-sizing: border-box; }
+  html{ scroll-behavior: smooth; }
+
+  body{
+    margin:0;
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-body);
+    line-height: 1.55;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* faint circuit-trace backdrop */
+  body::before{
+    content:"";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background-image:
+      linear-gradient(var(--border) 1px, transparent 1px),
+      linear-gradient(90deg, var(--border) 1px, transparent 1px);
+    background-size: 64px 64px;
+    opacity: 0.06;
+  }
+
+  a{ color: inherit; }
+  ::selection{ background: var(--gold-dim); color: var(--text); }
+
+  :focus-visible{
+    outline: 2px solid var(--gold);
+    outline-offset: 3px;
+  }
+
+  .wrap{
+    max-width: var(--max-w);
+    margin: 0 auto;
+    padding: 0 28px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .eyebrow{
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--gold);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .eyebrow::before{
+    content: "";
+    width: 18px;
+    height: 1px;
+    background: var(--gold);
+    display: inline-block;
+  }
+
+  /* ---------- NAV ---------- */
+  nav{
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    background: rgba(18,20,23,0.86);
+    backdrop-filter: blur(8px);
+    border-bottom: 1px solid var(--border);
+  }
+  nav .wrap{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 64px;
+  }
+  .brand{
+    font-family: var(--font-mono);
+    font-weight: 600;
+    font-size: 1rem;
+    letter-spacing: 0.03em;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+  }
+  .nav-cta{
+    font-family: var(--font-mono);
+    font-size: 0.78rem;
+    border: 1px solid var(--border-strong);
+    padding: 8px 14px;
+    border-radius: 4px;
+    text-decoration: none;
+    color: var(--text);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: border-color .15s ease, background .15s ease;
+  }
+  .nav-cta:hover{ border-color: var(--gold); background: var(--bg-elevated); }
+
+  /* ---------- HERO ---------- */
+  header.hero{
+    padding: 96px 0 72px;
+    border-bottom: 1px solid var(--border);
+  }
+  .hero-grid{
+    display: grid;
+    grid-template-columns: 1.15fr 0.85fr;
+    gap: 56px;
+    align-items: center;
+  }
+  h1{
+    font-family: var(--font-display);
+    font-size: clamp(2.2rem, 4vw, 3.4rem);
+    line-height: 1.08;
+    font-weight: 600;
+    margin: 18px 0 20px;
+    letter-spacing: -0.01em;
+  }
+  h1 .accent{ color: var(--gold); }
+  .hero-sub{
+    color: var(--text-dim);
+    font-size: 1.08rem;
+    max-width: 46ch;
+    margin: 0 0 32px;
+  }
+  .status-strip{
+    margin-top: 8px;
+    padding: 14px 16px;
+    border: 1px solid var(--border);
+    border-left: 2px solid var(--sage);
+    border-radius: 4px;
+    background: var(--bg-panel);
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    color: var(--text-dim);
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+    max-width: 56ch;
+  }
+  .status-strip .pulse{
+    width: 7px; height: 7px;
+    border-radius: 50%;
+    background: var(--sage);
+    margin-top: 6px;
+    flex-shrink: 0;
+    animation: pulse 2.4s ease-in-out infinite;
+  }
+  @keyframes pulse{
+    0%,100%{ opacity: 1; }
+    50%{ opacity: 0.35; }
+  }
+
+  /* ---------- CARD SVG ---------- */
+  .card-visual{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .card-visual svg{ width: 100%; max-width: 380px; height: auto; }
+  .pad{
+    fill: var(--bg-elevated);
+    stroke: var(--border-strong);
+    stroke-width: 1;
+    transition: fill .4s ease, stroke .4s ease;
+  }
+  .pad-label{
+    font-family: var(--font-mono);
+    font-size: 7px;
+    fill: var(--text-faint);
+    transition: fill .4s ease;
+  }
+  .card-body{
+    fill: var(--bg-panel);
+    stroke: var(--border-strong);
+    stroke-width: 1.5;
+  }
+  .chip-outline{
+    fill: none;
+    stroke: var(--border-strong);
+    stroke-width: 1;
+  }
+
+  /* ---------- SECTION SHELL ---------- */
+  section{
+    padding: 88px 0;
+    border-bottom: 1px solid var(--border);
+  }
+  .section-head{ max-width: 60ch; margin-bottom: 48px; }
+  h2{
+    font-family: var(--font-display);
+    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
+    font-weight: 600;
+    margin: 14px 0 12px;
+    letter-spacing: -0.01em;
+  }
+  .section-sub{
+    color: var(--text-dim);
+    font-size: 1rem;
+    max-width: 58ch;
+  }
+
+  /* ---------- CONVENIENCE / TRUST MESSAGE ---------- */
+  .trust-intro{
+    font-size: 1.02rem;
+    color: var(--text-dim);
+    max-width: 62ch;
+    margin-bottom: 44px;
+  }
+  .trust-intro strong{ color: var(--text); font-weight: 600; }
+
+  /* ---------- BUSINESS ---------- */
+  .biz-grid{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 40px;
+    align-items: start;
+  }
+  .biz-col h3{
+    font-family: var(--font-mono);
+    font-size: 0.78rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    margin: 0 0 18px;
+  }
+  .biz-col ul{
+    list-style: none;
+    margin: 0; padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 11px;
+  }
+  .biz-col li{
+    font-size: 0.92rem;
+    color: var(--text-dim);
+    padding-left: 16px;
+    border-left: 1px solid var(--border-strong);
+  }
+  /* ---------- FOOTER ---------- */
+  footer{
+    padding: 48px 0 40px;
+  }
+  .footer-grid{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+  .footer-brand{
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--text-dim);
+  }
+  .copyright{
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--text-faint);
+    margin-top: 24px;
+  }
+
+  /* ---------- RESPONSIVE ---------- */
+  @media (max-width: 860px){
+    .hero-grid{ grid-template-columns: 1fr; }
+    .card-visual{ order: -1; margin-bottom: 8px; }
+    .biz-grid{ grid-template-columns: 1fr; }
+  }
+
+  @media (prefers-reduced-motion: reduce){
+    *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
+  }
+</style>
 </head>
 <body>
-  <h1>Fortis Card</h1>
-  <p>A secure, minimal cryptocurrency hardware wallet. Built for security; designed for freedom.</p>
-  <div class="status">This project is currently in development. Stay tuned for the Alpha release!</div>
 
-  <a class="repo-button" href="https://codeberg.org/FortisCard" target="_blank" rel="noopener noreferrer">
-    <i class="fas fa-code-branch repo-icon"></i>
-    View on Codeberg
-  </a>
+<nav>
+  <div class="wrap">
+    <span class="brand">FORTIS CARD</span>
+    <a class="nav-cta" href="https://codeberg.org/FortisCard" target="_blank" rel="noopener noreferrer">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <line x1="6" x2="6" y1="3" y2="15"/>
+        <circle cx="18" cy="6" r="3"/>
+        <circle cx="6" cy="18" r="3"/>
+        <path d="M18 9a9 9 0 0 1-9 9"/>
+      </svg>
+      View source
+    </a>
+  </div>
+</nav>
+
+<header class="hero" id="top">
+  <div class="wrap hero-grid">
+    <div>
+      <div class="eyebrow">Bring your own secure element</div>
+      <h1>Provision your own cryptocurrency hardware wallet.<br>The vendor doesn't have to be a root of trust.</h1>
+      <p class="hero-sub">
+        Fortis Card™ turns a blank, commodity SmartCard you sourced yourself (from us or anywhere else) into a hardware wallet. Our ISO installs the applet and generates your seed on the card itself&mdash;all offline. All of our software is free/libre and open source for verifiable self-custody and end-to-end security.
+      </p>
+      <div class="status-strip">
+        <span class="pulse" aria-hidden="true"></span>
+        <span><strong style="color:var(--text)">In development.</strong> Stay tuned for the Alpha release!</span>
+      </div>
+    </div>
+
+    <div class="card-visual" aria-hidden="true">
+      <svg viewBox="0 0 340 214" xmlns="http://www.w3.org/2000/svg">
+        <rect class="card-body" x="1" y="1" width="338" height="212" rx="14"/>
+        <!-- chip outline -->
+        <rect class="chip-outline" x="30" y="34" width="86" height="66" rx="8"/>
+        <!-- 8 ISO7816 style contact pads, C1-C8, grouped 2x4 -->
+        <g id="pads">
+          <rect class="pad" data-idx="0" x="38" y="42" width="32" height="22" rx="2"/>
+          <text class="pad-label" x="54" y="56" text-anchor="middle">C1</text>
+
+          <rect class="pad" data-idx="1" x="74" y="42" width="32" height="22" rx="2"/>
+          <text class="pad-label" x="90" y="56" text-anchor="middle">C2</text>
+
+          <rect class="pad" data-idx="2" x="38" y="68" width="32" height="22" rx="2"/>
+          <text class="pad-label" x="54" y="82" text-anchor="middle">C5</text>
+
+          <rect class="pad" data-idx="3" x="74" y="68" width="32" height="22" rx="2"/>
+          <text class="pad-label" x="90" y="82" text-anchor="middle">C6</text>
+        </g>
+        <!-- card number-style rows using mono font, purely decorative -->
+        <text x="30" y="140" font-family="IBM Plex Mono" font-size="15" letter-spacing="3" fill="#5b6067">FC01 •••• •••• ••••</text>
+        <text x="30" y="176" font-family="IBM Plex Mono" font-size="9" letter-spacing="1.5" fill="#5b6067">SECURE ELEMENT · SELF-PROVISIONED</text>
+        <text x="30" y="192" font-family="IBM Plex Mono" font-size="9" letter-spacing="1.5" fill="#3a3f47">NO VENDOR ROOT OF TRUST</text>
+        <!-- nfc arcs top right -->
+        <g stroke="#3a3f47" fill="none" stroke-width="1.4" stroke-linecap="round">
+          <path d="M292 30 a12 12 0 0 1 0 22"/>
+          <path d="M300 24 a20 20 0 0 1 0 34"/>
+          <path d="M308 18 a28 28 0 0 1 0 46"/>
+        </g>
+      </svg>
+    </div>
+  </div>
+</header>
+
+<section id="convenience">
+  <div class="wrap">
+    <div class="section-head">
+      <div class="eyebrow">Why self-provisioning matters</div>
+      <h2>We sell convenience. Not trust.</h2>
+      <p class="trust-intro">Buy any supported blank card and provision it yourself, or buy one from us as a shortcut. Either way, you install the applet and generate the seed on your own machine. The hardware and the software come from separate parties, so <strong>no single company both builds your device and certifies it's clean.</strong></p>
+    </div>
+
+    <div class="biz-grid">
+      <div class="biz-col">
+        <h3>Provision it yourself</h3>
+        <ul>
+          <li>Buy any supported blank card, from anyone</li>
+          <li>We're never in the loop</li>
+        </ul>
+      </div>
+      <div class="biz-col">
+        <h3>Buy one from us</h3>
+        <ul>
+          <li>A known-compatible blank card, shipped unlocked</li>
+          <li>You still do the provisioning, not us</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+
+<footer>
+  <div class="wrap">
+    <div class="footer-grid">
+      <span class="footer-brand">FORTIS CARD</span>
+    </div>
+    <div class="copyright">&copy; 2026 FORTISCARD LLC</div>
+  </div>
+</footer>
 
-  <footer>&copy; 2025 FORTISCARD LLC</footer>
 </body>
 </html>
author	Agam Singh <agamsingh@fortis-card.com>	2026-07-02 09:18:32 -0500
committer	Agam Singh <agamsingh@fortis-card.com>	2026-07-02 09:18:32 -0500
commit	77e55022397a9a7605c10c62f69c0a45a5f9b4be (patch)
tree	fbd197922ec2a48baff47ad1b7c186f5ee6dc71b
parent	cb60763e44d5e3329450c23828831ebbff573c53 (diff)