diff --git a/hosted.html b/hosted.html index 7c18fd8..a4e7d16 100644 --- a/hosted.html +++ b/hosted.html @@ -50,14 +50,14 @@ -
-

Hosting

-

Your vault. Wherever you want it.

+
+

vault1984 hosted

+

Your vault. Wherever you want it.

We run it. You own it. Pick your region — your data stays there.

-
+
@@ -184,10 +184,10 @@
-
+
-

The problem

+

The problem

Your AI assistant needs your credentials.
That changes everything.

A password manager that blocks AI agents is useless in 2025. But one that hands them everything is a liability. The question is: how do you give Claude access to your GitHub token without giving it access to your bank password?

@@ -199,7 +199,7 @@

Passwords and private notes are encrypted on your device with a key derived from your fingerprint or hardware token. We store a locked box. No key ever reaches our servers — not a court order, not your AI assistant. Sealed fields require your physical presence to unlock.

-

Agent fields

+

Agent fields

Your AI, scoped and controlled.

Fields you designate as agent-accessible are encrypted on our servers. You issue scoped tokens — Claude gets your GitHub token, nothing else. Revoke at any time. The agent never touches sealed fields, no matter what.

@@ -210,12 +210,12 @@

Sealed fields: jurisdiction irrelevant.
Agent fields: it isn’t.

Sealed fields are protected by math — where the server sits doesn’t matter. But agent fields live on a server in a jurisdiction. A US server is subject to the CLOUD Act. Zürich, Switzerland is subject to Swiss law — which does not cooperate with foreign government data requests. No backdoors. Both layers protected.

-
-

Self-hosted · US

+
+

Self-hosted · US

Your server, your rules — until a court says otherwise. CLOUD Act applies to US persons regardless of encryption.

-

Self-hosted · anywhere

+

Self-hosted · anywhere

Full control. Your infrastructure, your jurisdiction. The right choice if you know what you’re doing.

@@ -354,7 +354,7 @@
  • - L1/L2 encryption + Sealed & Agent fields
  • @@ -378,7 +378,7 @@

    Hosted

    $12/year

    We manage it. You use it.

    -

    New York, Amsterdam, Frankfurt, Helsinki. Pick your region.

    +

    22 regions across every continent. Pick yours at signup.

    • diff --git a/styleguide.html b/styleguide.html new file mode 100644 index 0000000..5a54e4e --- /dev/null +++ b/styleguide.html @@ -0,0 +1,151 @@ + + + + + + vault1984 — Styleguide + + + + + + + + +
      +
      +

      Design System

      +

      vault1984 Styleguide

      +

      Single source of truth. One stylesheet: vault1984.css. No inline styles in HTML.

      +
      + + +
      +

      Colors

      +
      +
      +

      Backgrounds

      +
      --bg
      #0A1628
      +
      --surface
      #0d1627
      +
      --surface-alt
      #0a1a0a
      +
      --surface-gold
      #2a1f00
      +
      +
      +

      Text

      +
      --text
      #f1f5f9
      +
      --muted
      #94a3b8
      +
      --subtle
      #64748b
      +
      +
      +

      Accent

      +
      --accent
      #22C55E
      +
      --gold
      #D4AF37
      +
      --red
      #EF4444
      +
      +
      +
      + + +
      +

      Typography

      +

      h1 — Your vault. Wherever you want it.

      +

      h2 — Sealed fields: jurisdiction irrelevant.

      +

      h3 — Only you. Only in person.

      +

      p.lead — We run it. You own it. Pick your region — your data stays there.

      +

      p — Passwords and private notes are encrypted on your device with a key derived from your fingerprint or hardware token. We store a locked box. No key ever reaches our servers.

      +

      label (default)

      +

      label.accent

      +

      label.gold

      +

      label.red

      +

      vault1984 — vaultname in body text

      +
      + + +
      +

      Cards

      +
      +
      +

      card (default)

      +

      Default surface

      +

      Use for neutral content. Background is --surface.

      +
      +
      +

      card.alt

      +

      Sealed fields

      +

      Green-tinted surface. Use for sealed layer content.

      +
      +
      +

      card.gold

      +

      Zürich, Switzerland

      +

      Gold-tinted surface. Use exclusively for Zürich/HQ.

      +
      +
      +
      +
      +

      card.red

      +

      Self-hosted

      +

      Red-tinted surface. Use for self-hosted / warning contexts.

      +
      +
      +

      card + card-hover

      +

      Hover state

      +

      Hover this card — lifts on hover. Add to any clickable card.

      +
      +
      +
      + + +
      +

      Buttons

      + +
      + btn-accent btn-block + btn-gold btn-block + btn-red btn-block +
      +
      + + +
      +

      Grid

      +

      grid-2

      +
      +

      col 1

      Always 1fr.

      +

      col 2

      Always 1fr.

      +
      +

      grid-3

      +
      +

      col 1

      Always 1fr.

      +

      col 2

      Always 1fr.

      +

      col 3

      Always 1fr.

      +
      +
      + + +
      +

      Spacing scale

      +

      All spacing via utility classes: .mt-2 .mt-3 .mt-4 .mt-6 .mt-8 .mt-12 and matching .mb-*.

      +

      Container: max-width 1100px, padding 2rem each side. Used everywhere.

      +

      Section: padding 4rem top/bottom. Separated by hr.divider.

      +
      + +
      +

      End of styleguide

      +
      +
      + + + diff --git a/vault1984-web b/vault1984-web index 67e0dc0..6e63eac 100755 Binary files a/vault1984-web and b/vault1984-web differ diff --git a/vault1984.css b/vault1984.css new file mode 100644 index 0000000..c391032 --- /dev/null +++ b/vault1984.css @@ -0,0 +1,115 @@ +/* ============================================================ + vault1984 — global stylesheet + ONE rule per class. No exceptions. No inline styles. + All layout, spacing, color and type lives here. + ============================================================ */ + +/* === TOKENS === */ +:root { + --width: 1100px; + --pad: 2rem; + --radius: 1rem; + --radius-sm: 0.5rem; + --gap: 1.25rem; + + --bg: #0A1628; + --surface: #0d1627; + --surface-alt: #0a1a0a; + --surface-gold: #2a1f00; + + --border: rgba(255,255,255,0.06); + --border-gold: rgba(212,175,55,0.3); + + --text: #f1f5f9; + --muted: #94a3b8; + --subtle: #64748b; + + --accent: #22C55E; + --gold: #D4AF37; + --red: #EF4444; + + --font-sans: Inter, sans-serif; + --font-mono: 'JetBrains Mono', monospace; +} + +/* === RESET === */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +body { background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.6; } +a { color: inherit; text-decoration: none; } +img, svg { display: block; max-width: 100%; } + +/* === LAYOUT === */ +.container { max-width: var(--width); margin: 0 auto; padding: 0 var(--pad); } +.section { padding: 4rem 0; } +hr.divider { border: none; border-top: 1px solid var(--border); } + +/* === TYPOGRAPHY === */ +h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; line-height: 1.1; color: var(--text); } +h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; color: var(--text); } +h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--text); } +p { color: var(--muted); font-size: 1rem; line-height: 1.75; } +p.lead { font-size: 1.125rem; } + +/* === LABELS === */ +.label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--subtle); } +.label.accent { color: var(--accent); } +.label.gold { color: var(--gold); } +.label.red { color: var(--red); } + +/* === VAULTNAME === */ +.vaultname { font-family: var(--font-mono); font-weight: 700; color: var(--text); } +.vaultname .n { color: var(--accent); } + +/* === CARDS === */ +.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; } +.card.alt { background: var(--surface-alt); } +.card.gold { background: var(--surface-gold); border-color: var(--border-gold); } +.card.red { background: #1a0505; border-color: rgba(239,68,68,0.3); } +.card-hover { transition: transform 0.2s, box-shadow 0.2s; } +.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); } + +/* === GRID === */ +.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } +.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap); } + +/* === BUTTONS === */ +.btn { display: inline-block; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; padding: 0.625rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: opacity 0.15s; text-align: center; } +.btn:hover { opacity: 0.85; } +.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); } +.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } +.btn-accent { background: rgba(34,197,94,0.15); color: var(--accent); border-color: rgba(34,197,94,0.3); } +.btn-gold { background: rgba(212,175,55,0.15); color: var(--gold); border-color: rgba(212,175,55,0.3); } +.btn-red { background: rgba(239,68,68,0.15); color: var(--red); border-color: rgba(239,68,68,0.3); } +.btn-block { display: block; width: 100%; } + +/* === HERO === */ +.hero { padding-top: 100px; padding-bottom: 2.5rem; text-align: center; } +.hero h1 { margin-bottom: 1rem; } +.hero p.lead { max-width: 600px; margin-left: auto; margin-right: auto; } + +/* === MAP === */ +.map-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } +.map-wrap svg { display: block; width: 100%; background: var(--bg); } +.map-gap { height: 1rem; } + +/* === DC GRID (3 action cards below map) === */ +#dc-grid { display: flex; gap: var(--gap); } +#dc-grid .dc-card { flex: 1; min-width: 0; border-radius: var(--radius); padding: 1rem; text-align: center; background: var(--surface); border: 1px solid var(--border); } +#dc-grid .dc-card.gold { background: var(--surface-gold); border-color: var(--border-gold); } +#dc-grid .dc-card.red { background: #1a0505; border-color: rgba(239,68,68,0.3); } +#dc-grid .dc-icon { font-size: 1.5rem; margin-bottom: 0.375rem; } +#dc-grid .dc-name { font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; } +#dc-grid .dc-sub { font-size: 0.75rem; color: var(--subtle); margin-bottom: 0.625rem; } +#dc-grid .dc-status { display: flex; align-items: center; justify-content: center; gap: 0.375rem; font-size: 0.75rem; color: var(--subtle); margin-bottom: 0.75rem; } +#dc-grid .dc-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } + +/* === SPACING === */ +.mt-2 { margin-top: 0.5rem; } .mb-2 { margin-bottom: 0.5rem; } +.mt-3 { margin-top: 0.75rem; } .mb-3 { margin-bottom: 0.75rem; } +.mt-4 { margin-top: 1rem; } .mb-4 { margin-bottom: 1rem; } +.mt-6 { margin-top: 1.5rem; } .mb-6 { margin-bottom: 1.5rem; } +.mt-8 { margin-top: 2rem; } .mb-8 { margin-bottom: 2rem; } +.mt-12 { margin-top: 3rem; } .mb-12 { margin-bottom: 3rem; } + +/* === ANIMATIONS === */ +@keyframes hostedPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.3; transform:scale(1.8); } }