diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5fb4de8 Binary files /dev/null and b/.DS_Store differ diff --git a/commercial/marketing/._.DS_Store b/._.DS_Store similarity index 100% rename from commercial/marketing/._.DS_Store rename to ._.DS_Store diff --git a/clavitor.com/.DS_Store b/clavitor.com/.DS_Store new file mode 100644 index 0000000..ede5412 Binary files /dev/null and b/clavitor.com/.DS_Store differ diff --git a/clavitor.com/._.DS_Store b/clavitor.com/._.DS_Store new file mode 100644 index 0000000..28c42fb Binary files /dev/null and b/clavitor.com/._.DS_Store differ diff --git a/commercial/website/README.md b/clavitor.com/README.md similarity index 100% rename from commercial/website/README.md rename to clavitor.com/README.md diff --git a/commercial/account/account.css b/clavitor.com/account/account.css similarity index 100% rename from commercial/account/account.css rename to clavitor.com/account/account.css diff --git a/commercial/account/account.db b/clavitor.com/account/account.db similarity index 100% rename from commercial/account/account.db rename to clavitor.com/account/account.db diff --git a/commercial/account/account.db-shm b/clavitor.com/account/account.db-shm similarity index 100% rename from commercial/account/account.db-shm rename to clavitor.com/account/account.db-shm diff --git a/commercial/account/account.db-wal b/clavitor.com/account/account.db-wal similarity index 100% rename from commercial/account/account.db-wal rename to clavitor.com/account/account.db-wal diff --git a/commercial/account/api.go b/clavitor.com/account/api.go similarity index 100% rename from commercial/account/api.go rename to clavitor.com/account/api.go diff --git a/commercial/account/clavitor-account b/clavitor.com/account/clavitor-account similarity index 100% rename from commercial/account/clavitor-account rename to clavitor.com/account/clavitor-account diff --git a/commercial/account/db.go b/clavitor.com/account/db.go similarity index 100% rename from commercial/account/db.go rename to clavitor.com/account/db.go diff --git a/commercial/account/favicon.svg b/clavitor.com/account/favicon.svg similarity index 100% rename from commercial/account/favicon.svg rename to clavitor.com/account/favicon.svg diff --git a/commercial/account/go.mod b/clavitor.com/account/go.mod similarity index 100% rename from commercial/account/go.mod rename to clavitor.com/account/go.mod diff --git a/commercial/account/go.sum b/clavitor.com/account/go.sum similarity index 100% rename from commercial/account/go.sum rename to clavitor.com/account/go.sum diff --git a/commercial/account/main.go b/clavitor.com/account/main.go similarity index 100% rename from commercial/account/main.go rename to clavitor.com/account/main.go diff --git a/commercial/account/templates/base.tmpl b/clavitor.com/account/templates/base.tmpl similarity index 100% rename from commercial/account/templates/base.tmpl rename to clavitor.com/account/templates/base.tmpl diff --git a/commercial/account/templates/checkout.tmpl b/clavitor.com/account/templates/checkout.tmpl similarity index 100% rename from commercial/account/templates/checkout.tmpl rename to clavitor.com/account/templates/checkout.tmpl diff --git a/commercial/account/templates/dashboard.tmpl b/clavitor.com/account/templates/dashboard.tmpl similarity index 100% rename from commercial/account/templates/dashboard.tmpl rename to clavitor.com/account/templates/dashboard.tmpl diff --git a/commercial/account/templates/login.tmpl b/clavitor.com/account/templates/login.tmpl similarity index 100% rename from commercial/account/templates/login.tmpl rename to clavitor.com/account/templates/login.tmpl diff --git a/commercial/account/templates/regions.tmpl b/clavitor.com/account/templates/regions.tmpl similarity index 100% rename from commercial/account/templates/regions.tmpl rename to clavitor.com/account/templates/regions.tmpl diff --git a/commercial/account/templates/settings.tmpl b/clavitor.com/account/templates/settings.tmpl similarity index 100% rename from commercial/account/templates/settings.tmpl rename to clavitor.com/account/templates/settings.tmpl diff --git a/commercial/account/templates/verify.tmpl b/clavitor.com/account/templates/verify.tmpl similarity index 100% rename from commercial/account/templates/verify.tmpl rename to clavitor.com/account/templates/verify.tmpl diff --git a/commercial/website/clavitor-web b/clavitor.com/clavitor-web similarity index 82% rename from commercial/website/clavitor-web rename to clavitor.com/clavitor-web index 42e25de..85f1dc9 100755 Binary files a/commercial/website/clavitor-web and b/clavitor.com/clavitor-web differ diff --git a/clavitor.com/clavitor.css b/clavitor.com/clavitor.css new file mode 100644 index 0000000..5827306 --- /dev/null +++ b/clavitor.com/clavitor.css @@ -0,0 +1,267 @@ +/* ============================================================ + CLAVITOR — clavitor.com stylesheet + Single source of truth. Design system tokens + website components. + ============================================================ */ + +/* === TOKENS (from design-system/styleguide.css) === */ +:root { + /* Brand */ + --brand-black: #0A0A0A; + --brand-accent: #7C3AED; + --brand-accent-light: #8B5CF6; + --brand-accent-dark: #6D28D9; + + /* Backgrounds */ + --bg: #FFFFFF; + --bg-secondary: #F5F5F5; + --bg-tertiary: #E5E5E5; + --bg-inverse: #0A0A0A; + + /* Text */ + --text: #171717; + --text-secondary: #525252; + --text-tertiary: #737373; + --text-inverse: #FFFFFF; + + /* Borders */ + --border: #E5E5E5; + --border-strong: #D4D4D4; + + /* Semantic */ + --success: #16A34A; + --warning: #CA8A04; + --error: #DC2626; + --gold: #D4AF37; + + /* Typography */ + --font-sans: "Figtree", system-ui, sans-serif; + --font-mono: "JetBrains Mono", monospace; + + /* Layout */ + --width: 1280px; + --pad: 24px; + --radius: 12px; + --radius-sm: 8px; + --gap: 24px; +} + +/* === RESET === */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +html { scroll-behavior: smooth; } +body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } +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: 80px 0; } +.narrow { max-width: 800px; margin: 0 auto; } +.prose-width { max-width: 720px; } +hr.divider { border: none; border-top: 1px solid var(--border); } + +/* === TYPOGRAPHY === */ +h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.022em; color: var(--text); } +h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.022em; color: var(--text); } +h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--text); } +p { color: var(--text-secondary); font-size: 1rem; line-height: 1.75; } +p.lead { font-size: 1.125rem; } +pre, code { font-family: var(--font-mono); } +code { font-size: 0.875em; } + +/* === LABELS === */ +.label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); } +.label.accent { color: var(--brand-black); } +.label.gold { color: var(--gold); } +.label.red { color: var(--error); } + +/* === EMPHASIS TEXT === */ +.gradient-text { color: var(--brand-black); font-weight: 800; } + +/* === BRAND / VAULTNAME === */ +.vaultname { font-family: var(--font-mono); font-weight: 700; color: var(--text); } + +/* === LOGO LOCKUP === */ +.logo-lockup { display: inline-flex; gap: 20px; align-items: stretch; } +.logo-lockup-square { width: 80px; height: 80px; background: var(--brand-black); flex-shrink: 0; } +.logo-lockup-text { display: flex; flex-direction: column; justify-content: space-between; height: 80px; } +.logo-lockup-wordmark { font-family: var(--font-sans); font-size: 56px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brand-accent); line-height: 1; } +.logo-lockup-tagline { font-size: 16px; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; margin-bottom: -2px; } +.logo-lockup-nav { transform: scale(0.65); transform-origin: left center; } + +/* === NAV === */ +.nav { position: fixed; top: 0; width: 100%; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } +.nav-inner { max-width: var(--width); margin: 0 auto; padding: 0 var(--pad); height: 64px; display: flex; align-items: center; justify-content: space-between; } +.nav-logo { line-height: 1; } +.nav-links { display: flex; align-items: center; gap: 1.5rem; font-size: 0.875rem; } +.nav-link { color: var(--text-secondary); font-weight: 500; transition: color 100ms ease; } +.nav-link:hover { color: var(--text); } +.nav-link.active { color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 0.375rem; } +.nav-link.active::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-black); animation: pulse 2s ease-in-out infinite; } + +/* === BUTTONS === */ +.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; 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: all 100ms ease; text-align: center; text-decoration: none; } +.btn-primary { background: var(--brand-black); color: #ffffff; border-color: var(--brand-black); } +.btn-primary:hover { background: #262626; } +.btn-accent { background: var(--brand-accent); color: #ffffff; border-color: var(--brand-accent); } +.btn-accent:hover { background: var(--brand-accent-light); } +.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } +.btn-ghost:hover { background: var(--bg-secondary); } +.btn-block { display: flex; width: 100%; } +.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; } +.btn-sm { height: 32px; padding: 0 12px; font-size: 14px; } +.btn-lg { height: 48px; padding: 0 20px; } +.btn-mono { font-family: var(--font-mono); font-size: 0.75rem; } + +/* === HERO === */ +.hero { padding-top: 100px; padding-bottom: 4rem; text-align: center; } +.hero h1 { margin-bottom: 1rem; } +.hero p.lead { max-width: 600px; margin-left: auto; margin-right: auto; } +.hero-split { padding-top: 100px; padding-bottom: 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } + +/* === CARDS === */ +.card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; } +.card.alt { background: rgba(10,10,10,0.03); border-color: rgba(10,10,10,0.1); } +.card.gold { background: rgba(212,175,55,0.06); border-color: rgba(212,175,55,0.2); } +.card.red { background: rgba(239,68,68,0.04); border-color: rgba(239,68,68,0.15); } +.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.06); } + +/* === GRIDS === */ +.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } +.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } +.grid-2-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } +.grid-3-equal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } +.grid-4-equal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } + +/* === CODE BLOCKS === */ +.code-block { background: var(--bg-inverse); border-radius: var(--radius); padding: 1.5rem; font-family: var(--font-mono); font-size: 0.875rem; overflow-x: auto; line-height: 1.7; color: #d1d5db; } +.code-block .prompt { color: #a5b4fc; } +.code-block .comment { color: #737373; } +.code-block .highlight { color: #a5b4fc; } +.code-label { font-size: 0.75rem; color: var(--text-tertiary); margin-bottom: 0.75rem; font-family: var(--font-sans); } +.code-block pre { margin: 0; color: #d1d5db; } + +/* === FEATURE ICONS === */ +.feature-icon { width: 2.5rem; height: 2.5rem; border-radius: 0; background: var(--brand-black); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; flex-shrink: 0; } +.feature-icon svg { width: 1.25rem; height: 1.25rem; color: #ffffff; stroke: #ffffff; } +.feature-icon.red { background: var(--error); border-radius: 0; } +.feature-icon.red svg { color: #ffffff; stroke: #ffffff; } + +/* === CHECKLISTS === */ +.checklist { list-style: none; } +.checklist li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.75rem; } +.checklist li::before { content: ''; width: 1rem; height: 1rem; flex-shrink: 0; background: var(--brand-black); border-radius: 50%; margin-top: 0.125rem; clip-path: polygon(20% 50%, 40% 70%, 80% 25%, 85% 30%, 40% 80%, 15% 55%); } +.checklist.red li::before { background: var(--error); } + +/* === BADGES === */ +.badge { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 9999px; } +.badge.accent { background: rgba(10,10,10,0.08); color: var(--brand-black); border: 1px solid rgba(10,10,10,0.15); } +.badge.gold { background: rgba(212,175,55,0.1); color: var(--gold); border: 1px solid rgba(212,175,55,0.2); } +.badge.red { background: rgba(239,68,68,0.1); color: var(--error); border: 1px solid rgba(239,68,68,0.2); } +.badge.recommended { background: var(--brand-black); color: #ffffff; } + +/* === PILLS === */ +.pill-row { display: flex; flex-wrap: wrap; gap: 12px; } +.pill { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; white-space: nowrap; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 9999px; font-size: 14px; font-weight: 500; } +.pill-accent { background: var(--brand-accent); color: white; border-color: var(--brand-accent); } + +/* === PRICING === */ +.price-card { border-radius: var(--radius); border: 1px solid var(--border); padding: 2.5rem; background: var(--bg-secondary); } +.price-card.featured { border-color: rgba(10,10,10,0.2); background: rgba(10,10,10,0.02); position: relative; } +.price-amount { font-size: 3rem; font-weight: 800; color: var(--text); line-height: 1; } +.price-period { font-size: 1rem; color: var(--text-secondary); font-weight: 400; } +.price-grid { max-width: 900px; margin: 0 auto; } +.price-badge { position: absolute; top: -0.75rem; right: 1.5rem; } + +/* === STATS === */ +.stat-number { font-size: 72px; font-weight: 700; color: var(--brand-black); line-height: 1; margin-bottom: 8px; } +.stat-label { font-size: 14px; color: var(--text-secondary); } + +/* === MAP === */ +.map-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } +.map-wrap svg { display: block; width: 100%; background: var(--bg-secondary); } + +/* === DC GRID (hosted page datacenter cards) === */ +#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(--bg-secondary); border: 1px solid var(--border); } +#dc-grid .dc-card.gold { background: rgba(212,175,55,0.06); border-color: rgba(212,175,55,0.3); } +#dc-grid .dc-card.red { background: rgba(239,68,68,0.04); border-color: rgba(239,68,68,0.15); } +#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(--text-tertiary); 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(--text-tertiary); margin-bottom: 0.75rem; } +#dc-grid .dc-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } + +/* === VISITOR CARD (geo JS) === */ +.visitor-card { border-radius: var(--radius); padding: 1rem; text-align: center; background: rgba(239,68,68,0.04); border: 1px solid rgba(239,68,68,0.2); } +.visitor-flag { font-size: 1.5rem; margin-bottom: 0.5rem; } +.visitor-label { font-weight: 600; font-size: 0.875rem; color: var(--text); } +.visitor-region { font-size: 0.75rem; color: var(--text-tertiary); margin-bottom: 0.5rem; } +.visitor-status { display: flex; align-items: center; justify-content: center; gap: 0.375rem; font-size: 0.75rem; color: var(--text-tertiary); } +.visitor-dot { width: 6px; height: 6px; border-radius: 50%; background: #EF4444; display: inline-block; } + +/* === INSTALL STEPS === */ +.step { display: flex; gap: 1.25rem; margin-bottom: 3rem; } +.step-num { width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand-black); color: #ffffff; font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-mono); } +.step-body { flex: 1; min-width: 0; } +.step-body h2 { margin-bottom: 0.75rem; } +.step-body p { margin-bottom: 1rem; } +.dl-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } + +/* === PROSE (legal pages) === */ +.prose h2 { font-size: 1.375rem; font-weight: 700; color: var(--text); margin: 2.5rem 0 1rem; } +.prose h3 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 1.75rem 0 0.75rem; } +.prose p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 1rem; } +.prose ul { color: var(--text-secondary); padding-left: 1.5rem; margin-bottom: 1rem; line-height: 1.8; } +.prose a { color: var(--brand-accent); } +.prose a:hover { text-decoration: underline; } + +/* === FOOTER === */ +.footer { border-top: 1px solid var(--border); padding: 3rem 0; } +.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; } +.footer-links { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; color: var(--text-tertiary); } +.footer-links a { color: var(--text-tertiary); transition: color 100ms ease; } +.footer-links a:hover { color: var(--text-secondary); } +.footer-copy { text-align: center; font-size: 0.75rem; color: var(--text-tertiary); margin-top: 2rem; } + +/* === UTILITIES: 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; } +.mt-16 { margin-top: 4rem; } .mb-16 { margin-bottom: 4rem; } + +/* === UTILITIES: Text === */ +.text-center { text-align: center; } +.text-sm { font-size: 0.875rem; } +.text-xs { font-size: 0.75rem; } +.text-secondary { color: var(--text-secondary); } +.text-tertiary { color: var(--text-tertiary); } +.text-accent { color: var(--brand-accent); } +.font-mono { font-family: var(--font-mono); } + +/* === UTILITIES: Layout === */ +.w-full { width: 100%; } +.mx-auto { margin-left: auto; margin-right: auto; } + +/* === ANIMATIONS === */ +@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.8); } } +@keyframes pulseDot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } } +@keyframes pulseRing { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } +.pulse-dot { animation: pulseDot 2s ease-in-out infinite; } +.pulse-ring { animation: pulseRing 2s ease-out infinite; } + +/* === RESPONSIVE === */ +@media (max-width: 768px) { + .hero-split { grid-template-columns: 1fr; gap: 2rem; padding-top: 5rem; } + .grid-2 { grid-template-columns: 1fr; } + .grid-3 { grid-template-columns: 1fr; } + .grid-2-equal { grid-template-columns: 1fr; } + .grid-3-equal { grid-template-columns: 1fr; } + .grid-4-equal { grid-template-columns: repeat(2, 1fr); } + #dc-grid { flex-direction: column; } + .nav-links { gap: 0.75rem; font-size: 0.75rem; } + .section { padding: 48px 0; } +} diff --git a/commercial/website/favicon.svg b/clavitor.com/favicon.svg similarity index 100% rename from commercial/website/favicon.svg rename to clavitor.com/favicon.svg diff --git a/commercial/website/go.mod b/clavitor.com/go.mod similarity index 100% rename from commercial/website/go.mod rename to clavitor.com/go.mod diff --git a/commercial/website/main.go b/clavitor.com/main.go similarity index 100% rename from commercial/website/main.go rename to clavitor.com/main.go diff --git a/commercial/website/tailwind.min.css b/clavitor.com/tailwind.min.css similarity index 100% rename from commercial/website/tailwind.min.css rename to clavitor.com/tailwind.min.css diff --git a/commercial/website/templates/base.tmpl b/clavitor.com/templates/base.tmpl similarity index 74% rename from commercial/website/templates/base.tmpl rename to clavitor.com/templates/base.tmpl index 3cdc228..e0ca8e6 100644 --- a/commercial/website/templates/base.tmpl +++ b/clavitor.com/templates/base.tmpl @@ -8,17 +8,17 @@ - - + + {{if eq .Page "install"}}{{template "install-head"}}{{end}} {{if eq .Page "styleguide"}}{{template "styleguide-head"}}{{end}}