diff --git a/landing/assets/styles/brand-tokens.css b/landing/assets/styles/brand-tokens.css new file mode 100644 index 00000000..ee4ec4da --- /dev/null +++ b/landing/assets/styles/brand-tokens.css @@ -0,0 +1,136 @@ +:root { + color-scheme: light dark; + + --at-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; + --at-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace; + + --at-c-cyan: #00f0ff; + --at-c-cyan-strong: #00d4e6; + --at-c-cyan-deep: #0891b2; + --at-c-magenta: #ff00ff; + --at-c-green: #39ff14; + --at-c-gold: #ffd700; + --at-c-red: #ff4757; + + --at-c-dark-0: #05070b; + --at-c-dark-1: #0a0a0f; + --at-c-dark-2: #12121a; + --at-c-dark-3: #1e293b; + --at-c-light-0: #ffffff; + --at-c-light-1: #f8fafc; + --at-c-light-2: #f0f2f5; + + --at-c-text-dark-1: #e0e6ff; + --at-c-text-dark-2: #c8d6e5; + --at-c-text-dark-3: #a0a8c0; + --at-c-text-dark-muted: #8892b0; + --at-c-text-light-1: #1e293b; + --at-c-text-light-2: #475569; + --at-c-text-light-3: #64748b; + + --at-c-bg: var(--at-c-dark-1); + --at-c-bg-soft: rgba(10, 10, 15, 0.8); + --at-c-surface: var(--at-c-dark-2); + --at-c-surface-soft: rgba(10, 10, 15, 0.6); + --at-c-surface-raised: rgba(30, 41, 59, 0.78); + --at-c-text: var(--at-c-text-dark-1); + --at-c-text-soft: var(--at-c-text-dark-2); + --at-c-text-muted: var(--at-c-text-dark-muted); + --at-c-border: rgba(0, 240, 255, 0.12); + --at-c-border-strong: rgba(0, 240, 255, 0.28); + --at-c-focus: rgba(0, 240, 255, 0.55); + + --at-gradient-brand: linear-gradient(135deg, var(--at-c-cyan), var(--at-c-magenta)); + --at-gradient-brand-text: linear-gradient(135deg, #e0e6ff 0%, var(--at-c-cyan) 50%, var(--at-c-magenta) 100%); + --at-gradient-success: linear-gradient(135deg, var(--at-c-cyan), var(--at-c-green)); + --at-gradient-cyan-text: linear-gradient(135deg, #e0e6ff 0%, var(--at-c-cyan) 100%); + --at-gradient-panel: linear-gradient(135deg, rgba(0, 240, 255, 0.06), rgba(255, 0, 255, 0.035)); + + --at-radius-xs: 6px; + --at-radius-sm: 8px; + --at-radius-md: 10px; + --at-radius-lg: 12px; + --at-radius-xl: 16px; + --at-radius-2xl: 20px; + --at-radius-preview: 22px; + --at-radius-pill: 999px; + + --at-shadow-cyan-sm: 0 4px 20px rgba(0, 240, 255, 0.3); + --at-shadow-cyan-md: 0 8px 32px rgba(0, 240, 255, 0.08); + --at-shadow-cyan-lg: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 240, 255, 0.06); + --at-shadow-card: 0 16px 32px -10px rgba(0, 0, 0, 0.35); + + --at-blur-sm: 8px; + --at-blur-md: 12px; + --at-blur-lg: 20px; + --at-glass-bg: rgba(10, 10, 15, 0.78); + --at-glass-bg-hover: rgba(10, 10, 15, 0.9); + --at-glass-border: 1px solid var(--at-c-border); + --at-glass-border-strong: 1px solid var(--at-c-border-strong); + + --at-grid-line: rgba(0, 240, 255, 0.03); + --at-scanline: rgba(0, 240, 255, 0.008); + --at-transition-fast: 0.15s ease; + --at-transition-base: 0.25s ease; + --at-transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1); + + --at-z-header: 1000; +} + +.v-theme--light, +:root:not(.dark) { + --at-c-bg: var(--at-c-light-2); + --at-c-bg-soft: rgba(255, 255, 255, 0.82); + --at-c-surface: var(--at-c-light-0); + --at-c-surface-soft: rgba(255, 255, 255, 0.78); + --at-c-surface-raised: rgba(255, 255, 255, 0.92); + --at-c-text: var(--at-c-text-light-1); + --at-c-text-soft: var(--at-c-text-light-2); + --at-c-text-muted: var(--at-c-text-light-3); + --at-c-border: rgba(0, 0, 0, 0.08); + --at-c-border-strong: rgba(0, 139, 178, 0.3); + --at-c-focus: rgba(8, 145, 178, 0.5); + --at-glass-bg: rgba(255, 255, 255, 0.78); + --at-glass-bg-hover: rgba(255, 255, 255, 0.92); + --at-glass-border: 1px solid rgba(0, 0, 0, 0.08); + --at-glass-border-strong: 1px solid rgba(0, 139, 178, 0.25); + --at-shadow-card: 0 16px 32px -10px rgba(0, 0, 0, 0.12); + --at-shadow-cyan-lg: 0 20px 60px rgba(0, 180, 200, 0.12); + --at-grid-line: rgba(8, 145, 178, 0.045); +} + +.v-theme--dark, +.dark { + --at-c-bg: var(--at-c-dark-1); + --at-c-bg-soft: rgba(10, 10, 15, 0.8); + --at-c-surface: var(--at-c-dark-2); + --at-c-surface-soft: rgba(10, 10, 15, 0.6); + --at-c-surface-raised: rgba(30, 41, 59, 0.78); + --at-c-text: var(--at-c-text-dark-1); + --at-c-text-soft: var(--at-c-text-dark-2); + --at-c-text-muted: var(--at-c-text-dark-muted); + --at-c-border: rgba(0, 240, 255, 0.12); + --at-c-border-strong: rgba(0, 240, 255, 0.28); + --at-glass-bg: rgba(10, 10, 15, 0.78); + --at-glass-bg-hover: rgba(10, 10, 15, 0.92); +} + +.at-gradient-text { + background: var(--at-gradient-brand-text); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.at-glass { + background: var(--at-glass-bg); + border: var(--at-glass-border); + backdrop-filter: blur(var(--at-blur-md)); + -webkit-backdrop-filter: blur(var(--at-blur-md)); + box-shadow: var(--at-shadow-cyan-md); +} + +.at-focus-ring:focus-visible { + outline: 2px solid var(--at-c-focus); + outline-offset: 3px; +} diff --git a/landing/assets/styles/main.scss b/landing/assets/styles/main.scss index 4f1ead04..85428476 100644 --- a/landing/assets/styles/main.scss +++ b/landing/assets/styles/main.scss @@ -1,10 +1,12 @@ +@import "./brand-tokens.css"; + :root { color-scheme: light dark; } body { margin: 0; - font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; + font-family: var(--at-font-sans); background: rgb(var(--v-theme-background)); color: rgb(var(--v-theme-on-background)); } @@ -32,7 +34,7 @@ body { /* Monospace accent font for technical elements */ .mono { - font-family: "JetBrains Mono", "Fira Code", monospace; + font-family: var(--at-font-mono); } @media (max-width: 960px) { @@ -72,5 +74,5 @@ body { } .app-header { - backdrop-filter: blur(10px); + backdrop-filter: blur(var(--at-blur-md)); } diff --git a/landing/components/PageBackground.vue b/landing/components/PageBackground.vue index 6fa18bdc..2071bb88 100644 --- a/landing/components/PageBackground.vue +++ b/landing/components/PageBackground.vue @@ -26,8 +26,8 @@ position: absolute; inset: 0; background-image: - linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px), - linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px); + linear-gradient(var(--at-grid-line) 1px, transparent 1px), + linear-gradient(90deg, var(--at-grid-line) 1px, transparent 1px); background-size: 60px 60px; z-index: 1; } @@ -40,8 +40,8 @@ 0deg, transparent, transparent 2px, - rgba(0, 240, 255, 0.008) 2px, - rgba(0, 240, 255, 0.008) 4px + var(--at-scanline) 2px, + var(--at-scanline) 4px ); z-index: 2; } @@ -56,7 +56,7 @@ .page-bg__orb--1 { width: 900px; height: 900px; - background: #00f0ff; + background: var(--at-c-cyan); top: -200px; right: -150px; animation: orbDrift1 20s ease-in-out infinite; @@ -65,7 +65,7 @@ .page-bg__orb--2 { width: 700px; height: 700px; - background: #ff00ff; + background: var(--at-c-magenta); top: 300px; left: -200px; animation: orbDrift2 25s ease-in-out infinite; @@ -74,7 +74,7 @@ .page-bg__orb--3 { width: 800px; height: 800px; - background: #39ff14; + background: var(--at-c-green); top: 1200px; right: -100px; opacity: 0.05; @@ -84,7 +84,7 @@ .page-bg__orb--4 { width: 700px; height: 700px; - background: #00f0ff; + background: var(--at-c-cyan); top: 2100px; left: -150px; opacity: 0.06; @@ -94,7 +94,7 @@ .page-bg__orb--5 { width: 750px; height: 750px; - background: #ff00ff; + background: var(--at-c-magenta); top: 2900px; right: -120px; opacity: 0.05; @@ -104,7 +104,7 @@ .page-bg__orb--6 { width: 700px; height: 700px; - background: #ffd700; + background: var(--at-c-gold); top: 3600px; left: -100px; opacity: 0.04; @@ -114,7 +114,7 @@ .page-bg__orb--7 { width: 650px; height: 650px; - background: #00f0ff; + background: var(--at-c-cyan); top: 4300px; right: -80px; opacity: 0.05; diff --git a/landing/components/layout/AppFooter.vue b/landing/components/layout/AppFooter.vue index 74cb7a7d..76c83732 100644 --- a/landing/components/layout/AppFooter.vue +++ b/landing/components/layout/AppFooter.vue @@ -1,7 +1,12 @@