diff --git a/clavitor.com/clavitor-web b/clavitor.com/clavitor-web index 85f1dc9..9cf1957 100755 Binary files a/clavitor.com/clavitor-web and b/clavitor.com/clavitor-web differ diff --git a/clavitor.com/clavitor.css b/clavitor.com/clavitor.css index 5827306..c251a8a 100644 --- a/clavitor.com/clavitor.css +++ b/clavitor.com/clavitor.css @@ -7,9 +7,9 @@ :root { /* Brand */ --brand-black: #0A0A0A; - --brand-accent: #7C3AED; - --brand-accent-light: #8B5CF6; - --brand-accent-dark: #6D28D9; + --brand-red: #DC2626; + --brand-red-light: #EF4444; + --brand-red-dark: #B91C1C; /* Backgrounds */ --bg: #FFFFFF; @@ -30,7 +30,6 @@ /* Semantic */ --success: #16A34A; --warning: #CA8A04; - --error: #DC2626; --gold: #D4AF37; /* Typography */ @@ -47,14 +46,14 @@ /* === RESET === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } -html { scroll-behavior: smooth; } +html { scroll-behavior: smooth; scrollbar-gutter: stable; } 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; } +.section { padding-top: 80px; padding-bottom: 80px; } .narrow { max-width: 800px; margin: 0 auto; } .prose-width { max-width: 720px; } hr.divider { border: none; border-top: 1px solid var(--border); } @@ -72,7 +71,7 @@ code { font-size: 0.875em; } .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); } +.label.red { color: var(--brand-red); } /* === EMPHASIS TEXT === */ .gradient-text { color: var(--brand-black); font-weight: 800; } @@ -84,13 +83,13 @@ code { font-size: 0.875em; } .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-wordmark { font-family: var(--font-sans); font-size: 56px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brand-black); 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-inner { 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; } @@ -102,8 +101,8 @@ code { font-size: 0.875em; } .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-accent { background: var(--brand-red); color: #ffffff; border-color: var(--brand-red); } +.btn-accent:hover { background: var(--brand-red-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%; } @@ -122,7 +121,7 @@ code { font-size: 0.875em; } .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.red { background: rgba(220,38,38,0.04); border-color: rgba(220,38,38,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); } @@ -135,35 +134,35 @@ code { font-size: 0.875em; } /* === 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 .prompt { color: #fca5a5; } .code-block .comment { color: #737373; } -.code-block .highlight { color: #a5b4fc; } +.code-block .highlight { color: #fca5a5; } .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 { background: var(--brand-red); 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); } +.checklist.red li::before { background: var(--brand-red); } /* === 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.red { background: rgba(220,38,38,0.08); color: var(--brand-red); border: 1px solid rgba(220,38,38,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); } +.pill-accent { background: var(--brand-red); color: white; border-color: var(--brand-red); } /* === PRICING === */ .price-card { border-radius: var(--radius); border: 1px solid var(--border); padding: 2.5rem; background: var(--bg-secondary); } @@ -198,7 +197,7 @@ code { font-size: 0.875em; } .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; } +.visitor-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); display: inline-block; } /* === INSTALL STEPS === */ .step { display: flex; gap: 1.25rem; margin-bottom: 3rem; } @@ -213,7 +212,7 @@ code { font-size: 0.875em; } .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 { color: var(--brand-red); } .prose a:hover { text-decoration: underline; } /* === FOOTER === */ @@ -239,7 +238,7 @@ code { font-size: 0.875em; } .text-xs { font-size: 0.75rem; } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } -.text-accent { color: var(--brand-accent); } +.text-accent { color: var(--brand-red); } .font-mono { font-family: var(--font-mono); } /* === UTILITIES: Layout === */ @@ -263,5 +262,5 @@ code { font-size: 0.875em; } .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; } + .section { padding-top: 48px; padding-bottom: 48px; } } diff --git a/clavitor.com/templates/base.tmpl b/clavitor.com/templates/base.tmpl index e0ca8e6..22d7f9e 100644 --- a/clavitor.com/templates/base.tmpl +++ b/clavitor.com/templates/base.tmpl @@ -15,7 +15,7 @@