diff --git a/public/styles/global.css b/public/styles/global.css index f4c7853..e655141 100644 --- a/public/styles/global.css +++ b/public/styles/global.css @@ -1,6 +1,6 @@ /* ===== CSS Variables ===== */ :root { - /* Core Colors - High Contrast Terminal Aesthetic */ + /* Core Colors */ --color-bg: #0f0f0f; --color-bg-secondary: #151515; --color-bg-elevated: #1a1a1a; @@ -113,8 +113,8 @@ a { } .logo:hover .logo-image { - filter: drop-shadow(0 0 8px rgba(0, 221, 119, 0.4)); - transform: scale(1.05); + filter: drop-shadow(0 0 4px rgba(0, 221, 119, 0.3)); + transform: scale(1.03); } .logo-line-1, @@ -131,9 +131,7 @@ a { } .logo-line-2 { - color: transparent; - -webkit-text-stroke: 1.5px var(--color-text); - text-stroke: 1.5px var(--color-text); + color: var(--color-text-secondary); } .logo:hover .logo-line-1 { @@ -141,8 +139,7 @@ a { } .logo:hover .logo-line-2 { - -webkit-text-stroke: 1.5px var(--color-accent); - text-stroke: 1.5px var(--color-accent); + color: var(--color-accent); } .nav { @@ -154,8 +151,7 @@ a { color: var(--color-text-secondary); font-weight: 600; font-size: 0.9rem; - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.02em; position: relative; } @@ -188,8 +184,7 @@ a { font-family: var(--font-mono); font-weight: 700 !important; font-size: 0.85rem !important; - text-transform: uppercase !important; - letter-spacing: 0.08em !important; + letter-spacing: 0.02em !important; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; } @@ -216,58 +211,7 @@ a { } .hero-bg-elements { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; - z-index: 0; -} - -.hero-block { - position: absolute; - background: linear-gradient(135deg, var(--color-accent) 0%, transparent 100%); - opacity: 0.05; -} - -.hero-block-1 { - top: -20%; - right: -10%; - width: 60%; - height: 80%; - transform: rotate(15deg); -} - -.hero-block-2 { - bottom: -30%; - left: -15%; - width: 50%; - height: 70%; - transform: rotate(-25deg); - background: linear-gradient(135deg, var(--color-accent-alt) 0%, transparent 100%); -} - -.scanline { display: none; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 100%; - background: repeating-linear-gradient( - 0deg, - rgba(0, 221, 119, 0.02) 0px, - transparent 2px, - transparent 4px - ); - pointer-events: none; - animation: scanline 10s linear infinite; -} - -@keyframes scanline { - 0% { transform: translateY(0); } - 100% { transform: translateY(20px); } } .hero-content { @@ -280,9 +224,8 @@ a { font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-accent); - letter-spacing: 0.2em; + letter-spacing: 0.1em; margin-bottom: var(--space-md); - text-transform: uppercase; } .hero-title { @@ -296,7 +239,6 @@ a { font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; - text-transform: uppercase; } .title-line-1 { @@ -304,9 +246,7 @@ a { } .title-line-2 { - color: transparent; - -webkit-text-stroke: 2px var(--color-text); - text-stroke: 2px var(--color-text); + color: var(--color-text-secondary); } .title-accent { @@ -331,8 +271,7 @@ a { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-secondary); - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.05em; padding: 0.4rem 0.8rem; border: 1px solid var(--color-border); background: var(--color-bg-secondary); @@ -367,8 +306,7 @@ a { font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.02em; border: 2px solid var(--color-accent); position: relative; overflow: hidden; @@ -414,8 +352,7 @@ a { font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.02em; border: 2px solid var(--color-border); background: transparent; transition: all 0.3s ease; @@ -436,8 +373,7 @@ section { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-accent); - letter-spacing: 0.2em; - text-transform: uppercase; + letter-spacing: 0.15em; margin-bottom: var(--space-md); } @@ -445,7 +381,6 @@ section { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900; line-height: 1.1; - text-transform: uppercase; letter-spacing: -0.02em; } @@ -465,8 +400,7 @@ section { } .showcase-card .feature-num { - -webkit-text-stroke: 1px var(--color-accent-blue); - text-stroke: 1px var(--color-accent-blue); + color: var(--color-accent-blue); } .showcase-card .feature-tag { @@ -524,8 +458,7 @@ section { padding: 0.75rem 1.5rem; border: 2px solid var(--color-accent-blue); background: rgba(0, 212, 255, 0.1); - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.05em; font-weight: 700; } @@ -703,9 +636,7 @@ section { font-family: var(--font-mono); font-size: 3rem; font-weight: 900; - color: transparent; - -webkit-text-stroke: 1px var(--color-accent); - text-stroke: 1px var(--color-accent); + color: var(--color-text-tertiary); line-height: 1; margin-bottom: var(--space-md); } @@ -714,7 +645,6 @@ section { font-size: 2rem; font-weight: 800; margin-bottom: var(--space-md); - text-transform: uppercase; letter-spacing: -0.01em; } @@ -734,7 +664,7 @@ section { background: var(--color-accent); color: var(--color-bg); font-weight: 700; - letter-spacing: 0.1em; + letter-spacing: 0.05em; } .feature-row { @@ -780,8 +710,7 @@ section { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-sm); - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0; } .feature-item p { @@ -795,8 +724,7 @@ section { } .feature-highlight .feature-num { - -webkit-text-stroke: 1px var(--color-accent-alt); - text-stroke: 1px var(--color-accent-alt); + color: var(--color-text-tertiary); } .feature-highlight::before { @@ -827,8 +755,7 @@ section { font-weight: 900; color: var(--color-bg); text-align: center; - letter-spacing: 0.1em; - text-transform: uppercase; + letter-spacing: 0.05em; } /* ===== Architecture Section ===== */ @@ -938,7 +865,6 @@ section { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--space-md); - text-transform: uppercase; letter-spacing: 0.02em; } @@ -1020,7 +946,6 @@ section { font-weight: 900; line-height: 1; margin-bottom: var(--space-xl); - text-transform: uppercase; letter-spacing: -0.02em; } @@ -1058,8 +983,7 @@ section { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-secondary); - letter-spacing: 0.15em; - text-transform: uppercase; + letter-spacing: 0.1em; margin-bottom: var(--space-sm); } @@ -1089,8 +1013,7 @@ section { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.02em; } .pricing-action { @@ -1104,8 +1027,7 @@ section { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.02em; transition: all 0.3s ease; position: relative; overflow: hidden; @@ -1167,7 +1089,6 @@ section { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900; line-height: 1.1; - text-transform: uppercase; letter-spacing: -0.02em; } @@ -1231,7 +1152,6 @@ section { .platform-name { font-size: 1.75rem; font-weight: 800; - text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: var(--space-xs); } @@ -1248,8 +1168,7 @@ section { font-size: 0.7rem; color: var(--color-text-tertiary); margin-top: var(--space-xs); - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.05em; } .platform-action { @@ -1257,8 +1176,7 @@ section { font-size: 0.85rem; font-weight: 700; color: var(--color-accent); - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.05em; transition: all 0.3s ease; } @@ -1322,8 +1240,7 @@ section { font-family: var(--font-mono); margin-bottom: var(--space-md); color: var(--color-accent); - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.05em; } .footer-section p { @@ -1478,17 +1395,9 @@ section { } /* ===== Animations & Effects ===== */ -@keyframes pulse-glow { - 0%, 100% { - box-shadow: 0 0 15px rgba(0, 221, 119, 0.2); - } - 50% { - box-shadow: 0 0 25px rgba(0, 221, 119, 0.4); - } -} .feature-primary:hover { - animation: pulse-glow 2s infinite; + box-shadow: 0 0 20px rgba(0, 221, 119, 0.12); } /* Reduced motion support */ @@ -1500,8 +1409,4 @@ section { animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } - - .scanline { - animation: none; - } } diff --git a/src/pages/docs.astro b/src/pages/docs.astro index cccbcbe..1decf69 100644 --- a/src/pages/docs.astro +++ b/src/pages/docs.astro @@ -10,7 +10,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
@@ -24,11 +24,11 @@ import BaseLayout from '../layouts/BaseLayout.astro';
Zaguán Blade is not just a text editor with a chat sidebar. It is designed from the ground up to allow an AI agent to "live" inside your editor.
@@ -60,7 +60,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
High-performance CodeMirror 6 editor with syntax highlighting. Diff Blocks appear inline when the AI proposes changes. Integrated terminal for running commands. The AI can see and interact with this terminal when executing commands. Type Zaguán Blade supports two chat modes accessible from the Command Center: Attach screenshots to your chat messages to give the AI visual context. Access capture options from the Feature Menu (grid icon) in the Command Center. As an alpha release, there are some known limitations and bugs we're actively working on:
We define "Alpha" as "Feature incomplete, but good enough to be useful."
@@ -740,7 +740,6 @@ import BaseLayout from '../layouts/BaseLayout.astro';
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 900;
line-height: 1.1;
- text-transform: uppercase;
letter-spacing: -0.02em;
margin-bottom: var(--space-xl);
}
@@ -867,9 +866,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
font-family: var(--font-mono);
font-size: 3rem;
font-weight: 900;
- color: transparent;
- -webkit-text-stroke: 1px var(--color-accent);
- text-stroke: 1px var(--color-accent);
+ color: var(--color-accent);
line-height: 1;
margin-bottom: var(--space-md);
}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3824bf1..ba22e1a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -15,17 +15,17 @@ const version = pkg.version ?? "";
Most AI editors ship your context to a server you don't control.
@@ -37,9 +37,9 @@ const version = pkg.version ?? "";
Engineers trust metrics. Here is what idle resource usage looks like:AI-Native Editor
- Quick Start Guide
Interface Overview
Center Stage
- EDITOR
+ Editor
Right Panel
- AI_ASSISTANT
+ AI Assistant
Bottom Panel
- TERMINAL
+ Terminal
Keyboard Shortcuts
Special Commands
@ in the chat input to access these special commands:AI Collaboration
Chat Modes
Configuration
Context Tab
- PER-PROJECT
+ Per-project
Teach the AI About Your Project
Additional Features
Screenshot Capture
Privacy
Custom System Prompts
Tool Calls Reference
Known Issues
Alpha Release
- FEATURE_INCOMPLETE
+ Alpha
- YOUR CODE STAYS YOURS.
- CLOUD WHEN YOU WANT IT.
+ Your code stays yours.
+ Cloud when you want it.
Why Another Editor
ExistsTHE LIGHTWEIGHT DIFFERENCE
+ The Lightweight Difference
@@ -106,7 +106,7 @@ const version = pkg.version ?? "";
NOT FOR EVERYONE
+ Not for Everyone
What It's Actually
Good AtWHAT IT'S ACTUALLY GOOD AT
+ What It's Actually Good At
TYPICAL FLOW IN BLADE
+ Typical Flow in Blade