Site redesign: near-black ground, the desktop app's neon mark, the Lite page in motion

src/components/LiteDownload.astro

@@ -31,11 +31,11 @@ const t = zh
   : { install: "Install", mac: "Download for macOS", win: "Download for Windows", linux: "Download for Linux", version: "Version" };
 
 const base =
-  "inline-flex min-h-11 items-center justify-center rounded-[10px] px-[22px] py-3 text-base font-semibold transition-colors";
+  "inline-flex min-h-11 items-center justify-center rounded-full px-[22px] py-3 text-base font-semibold transition";
 const look =
   variant === "solid"
-    ? "bg-[var(--color-brand-1)] text-[var(--color-bg)] hover:bg-[var(--color-brand-2)]"
-    : "border border-[var(--color-brand-1)] text-[var(--color-brand-1)] hover:border-[var(--color-brand-2)] hover:text-[var(--color-brand-2)]";
+    ? "bg-[#f7f8f8] text-[#08090a] hover:bg-white hover:shadow-[0_8px_30px_-8px_rgba(34,229,242,0.5)]"
+    : "border border-white/15 text-white hover:bg-white/5 hover:border-white/25";
 ---
 
 <div

src/components/Seo.astro

@@ -99,6 +99,6 @@ const allJsonLd = [organization, ...jsonLd].map((item) => JSON.stringify(item).r
 <meta name="robots" content={robots} />
 <meta name="googlebot" content={robots} />
 
-<meta name="theme-color" content="#0b1220" />
+<meta name="theme-color" content="#08090a" />
 
 {allJsonLd.map((json) => <script type="application/ld+json" set:html={json} />)}

src/components/SiteFooter.astro

@@ -1,6 +1,8 @@
 ---
 import { getLang, t, localePath } from "~/i18n";
 
+import TwMark from "./TwMark.astro";
+
 const lang = getLang(Astro);
 const s = t(lang);
 const year = new Date().getFullYear();
@@ -11,14 +13,7 @@ const year = new Date().getFullYear();
   <div class="container-page py-10 sm:py-12 grid gap-8 sm:gap-10 sm:grid-cols-2 md:grid-cols-4 text-sm">
     <div class="sm:col-span-2 md:col-span-2">
       <div class="flex items-center gap-2 mb-3">
-        <svg class="w-6 h-6 shrink-0" viewBox="0 0 200 200" fill="none" aria-hidden="true">
-          <rect width="200" height="200" rx="40" fill="#1E2A4A"/>
-          <rect x="32" y="32" width="136" height="136" rx="28" fill="none" stroke="#3DDBD9" stroke-width="10"/>
-          <line x1="62" y1="68" x2="138" y2="68" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-          <line x1="100" y1="68" x2="100" y2="104" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-          <polyline points="62,104 80,140 100,104" fill="none" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
-          <polyline points="100,104 120,140 138,104" fill="none" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
+        <TwMark id="m-footer" size={22} />
         <span class="text-white"><span class="font-medium">Think</span><span class="font-bold">Watch</span></span>
       </div>
       <p class="text-[var(--color-muted)] max-w-sm">

src/components/SiteHeader.astro

@@ -3,6 +3,7 @@ import { getLang, t, localePath, type Lang } from "~/i18n";
 import { getStarCount, formatStars } from "~/lib/github";
 import { findDoc } from "~/content/docs/_meta";
 import SearchModal from "./SearchModal.astro";
+import TwMark from "./TwMark.astro";
 
 const lang = getLang(Astro);
 const s = t(lang);
@@ -58,17 +59,10 @@ const menuLabel = lang === "zh-CN" ? "菜单" : "Menu";
 const closeLabel = lang === "zh-CN" ? "关闭" : "Close";
 ---
 
-<header class="sticky top-0 z-50 backdrop-blur-md bg-[var(--color-bg)]/60 border-b border-white/5">
+<header class="sticky top-0 z-50 backdrop-blur-md backdrop-saturate-150 bg-[var(--color-bg)]/70 border-b border-white/[0.07]">
   <div class="container-page flex items-center justify-between h-16 gap-3">
     <a href={localePath(lang, "/")} class="flex items-center gap-2 sm:gap-2.5 group shrink-0">
-      <svg class="w-7 h-7 sm:w-8 sm:h-8 shrink-0" viewBox="0 0 200 200" fill="none" aria-hidden="true">
-        <rect width="200" height="200" rx="40" fill="#1E2A4A"/>
-        <rect x="32" y="32" width="136" height="136" rx="28" fill="none" stroke="#3DDBD9" stroke-width="10"/>
-        <line x1="62" y1="68" x2="138" y2="68" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-        <line x1="100" y1="68" x2="100" y2="104" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-        <polyline points="62,104 80,140 100,104" fill="none" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
-        <polyline points="100,104 120,140 138,104" fill="none" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
+      <TwMark id="m-header" size={26} />
       <span class="text-base sm:text-lg tracking-tight text-white">
         <span class="font-medium">Think</span><span class="font-bold">Watch</span>
       </span>
@@ -80,7 +74,7 @@ const closeLabel = lang === "zh-CN" ? "关闭" : "Close";
         <a
           href={l.href}
           aria-current={l.active ? "page" : undefined}
-          class:list={["transition-colors", l.active ? "text-[var(--color-brand-1)]" : "hover:text-white"]}
+          class:list={["transition-colors", l.active ? "text-white" : "hover:text-white"]}
         >
           {l.label}
         </a>
@@ -150,7 +144,7 @@ const closeLabel = lang === "zh-CN" ? "关闭" : "Close";
       <!-- Desktop CTA -->
       <a
         href={localePath(lang, "/thinkwatch#quickstart")}
-        class="hidden sm:inline-flex items-center text-sm font-medium px-4 h-9 rounded-md bg-brand-gradient text-black hover:brightness-110 transition"
+        class="hidden sm:inline-flex items-center text-sm font-medium px-4 h-9 rounded-full bg-[#f7f8f8] text-[#08090a] hover:bg-white hover:shadow-[0_8px_30px_-8px_rgba(34,229,242,0.5)] transition"
       >
         {s.common.getStarted}
       </a>
@@ -192,7 +186,7 @@ const closeLabel = lang === "zh-CN" ? "关闭" : "Close";
               aria-current={l.active ? "page" : undefined}
               class:list={[
                 "block py-3 text-base transition-colors border-b border-white/5",
-                l.active ? "text-[var(--color-brand-1)]" : "text-[var(--color-muted)] hover:text-white",
+                l.active ? "text-white" : "text-[var(--color-muted)] hover:text-white",
               ]}
             >
               {l.label}
@@ -202,7 +196,7 @@ const closeLabel = lang === "zh-CN" ? "关闭" : "Close";
         <li>
           <a
             href={localePath(lang, "/thinkwatch#quickstart")}
-            class="mt-4 inline-flex items-center justify-center w-full px-4 py-3 rounded-lg bg-brand-gradient text-black font-medium hover:brightness-110 transition"
+            class="mt-4 inline-flex items-center justify-center w-full px-4 py-3 rounded-full bg-[#f7f8f8] text-[#08090a] font-medium hover:bg-white transition"
           >
             {s.common.getStarted}
           </a>

src/components/TwMark.astro

@@ -0,0 +1,110 @@
+---
+// The ThinkWatch Lite mark as the desktop app draws it on its launch screen:
+// four strokes forming "TW", a neon gradient along them (the brand pair, which
+// the page's accent tokens follow), and optionally a blurred glow and a
+// stroke-by-stroke draw. Coordinates and lengths match the app
+// (ThinkWatch-Lite src/launch/LaunchScreen.tsx, src-tauri/icons/render.py).
+interface Props {
+  /** Unique per page: the gradient and filter are referenced by id */
+  id: string;
+  size?: number;
+  /** Draw the strokes one by one when the page loads */
+  draw?: boolean;
+  /** A soft glow behind the strokes that breathes */
+  glow?: boolean;
+  class?: string;
+}
+const { id, size = 20, draw = false, glow = false, class: className } = Astro.props;
+const V = Math.hypot(4.5, 8);
+const strokes: [string, number][] = [
+  ["M7 9H25", 18],
+  ["M16 9V17", 8],
+  ["M7 17L11.5 25L16 17", 2 * V],
+  ["M16 17L20.5 25L25 17", 2 * V],
+];
+---
+
+<svg viewBox="0 0 32 32" width={size} height={size} class:list={["tw-mark", className, draw && "tw-draw", glow && "tw-glowing"]} aria-hidden="true">
+  <defs>
+    <linearGradient id={`${id}-g`} x1="7" y1="0" x2="25" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0" style="stop-color: var(--a1-hex, var(--color-brand-1))" />
+      <stop offset="1" style="stop-color: var(--a2-hex, var(--color-brand-3))" />
+    </linearGradient>
+    {glow && (
+      <filter id={`${id}-f`} x="-60%" y="-60%" width="220%" height="220%">
+        <feGaussianBlur stdDeviation="1.4" />
+      </filter>
+    )}
+  </defs>
+  {glow && (
+    <g class="tw-glow" filter={`url(#${id}-f)`}>
+      {strokes.map(([d]) => <path d={d} stroke={`url(#${id}-g)`} stroke-width="3.8" />)}
+    </g>
+  )}
+  {strokes.map(([d, len], i) => (
+    <path
+      d={d}
+      stroke={`url(#${id}-g)`}
+      stroke-width="2.8"
+      class="tw-stroke"
+      style={draw ? `stroke-dasharray:${len} ${len * 2};stroke-dashoffset:${len};animation-delay:${200 + i * 160}ms` : undefined}
+    />
+  ))}
+</svg>
+
+<style>
+  .tw-mark {
+    overflow: visible;
+    flex-shrink: 0;
+  }
+  .tw-mark path {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .tw-draw .tw-stroke {
+    animation: tw-draw 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
+  }
+  @keyframes tw-draw {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+  .tw-glow {
+    opacity: 0.55;
+  }
+  .tw-draw .tw-glow {
+    opacity: 0;
+    animation:
+      tw-light 600ms ease-out 900ms forwards,
+      tw-breathe 3.2s ease-in-out 1.5s infinite;
+  }
+  .tw-glowing:not(.tw-draw) .tw-glow {
+    animation: tw-breathe 3.2s ease-in-out infinite;
+  }
+  @keyframes tw-light {
+    to {
+      opacity: 0.7;
+    }
+  }
+  @keyframes tw-breathe {
+    0%,
+    100% {
+      opacity: 0.7;
+    }
+    50% {
+      opacity: 0.3;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .tw-draw .tw-stroke {
+      animation: none;
+      stroke-dashoffset: 0 !important;
+    }
+    .tw-glow,
+    .tw-draw .tw-glow {
+      animation: none;
+      opacity: 0.55;
+    }
+  }
+</style>

src/components/hero/HeroFallback.tsx

@@ -15,21 +15,21 @@ export default function HeroFallback() {
       >
         <defs>
           <radialGradient id="hf-core" cx="50%" cy="50%" r="50%">
-            <stop offset="0%" stopColor="#3DDBD9" stopOpacity="0.35" />
-            <stop offset="60%" stopColor="#8EEBEA" stopOpacity="0.14" />
-            <stop offset="100%" stopColor="#8EEBEA" stopOpacity="0" />
+            <stop offset="0%" stopColor="#22E5F2" stopOpacity="0.35" />
+            <stop offset="60%" stopColor="#F05CD8" stopOpacity="0.14" />
+            <stop offset="100%" stopColor="#F05CD8" stopOpacity="0" />
           </radialGradient>
           <radialGradient id="hf-orb-l" cx="50%" cy="50%" r="50%">
-            <stop offset="0%" stopColor="#3DDBD9" stopOpacity="0.2" />
-            <stop offset="100%" stopColor="#3DDBD9" stopOpacity="0" />
+            <stop offset="0%" stopColor="#22E5F2" stopOpacity="0.2" />
+            <stop offset="100%" stopColor="#22E5F2" stopOpacity="0" />
           </radialGradient>
           <radialGradient id="hf-orb-r" cx="50%" cy="50%" r="50%">
-            <stop offset="0%" stopColor="#8EEBEA" stopOpacity="0.18" />
-            <stop offset="100%" stopColor="#8EEBEA" stopOpacity="0" />
+            <stop offset="0%" stopColor="#F05CD8" stopOpacity="0.18" />
+            <stop offset="100%" stopColor="#F05CD8" stopOpacity="0" />
           </radialGradient>
           <linearGradient id="hf-line" x1="0" y1="0" x2="1" y2="0">
-            <stop offset="0%" stopColor="#3DDBD9" stopOpacity="0" />
-            <stop offset="50%" stopColor="#8EEBEA" stopOpacity="0.6" />
+            <stop offset="0%" stopColor="#22E5F2" stopOpacity="0" />
+            <stop offset="50%" stopColor="#F05CD8" stopOpacity="0.6" />
             <stop offset="100%" stopColor="#E5C07B" stopOpacity="0" />
           </linearGradient>
         </defs>
@@ -45,13 +45,13 @@ export default function HeroFallback() {
         <g transform="translate(400 300)" fill="none" strokeLinecap="round">
           <polygon
             points="100,0 70,70 0,100 -70,70 -100,0 -70,-70 0,-100 70,-70"
-            stroke="#3DDBD9"
+            stroke="#22E5F2"
             strokeOpacity="0.55"
             strokeWidth="1.5"
           />
           <polygon
             points="130,0 92,92 0,130 -92,92 -130,0 -92,-92 0,-130 92,-92"
-            stroke="#8EEBEA"
+            stroke="#F05CD8"
             strokeOpacity="0.35"
             strokeWidth="1"
             transform="rotate(22.5)"

src/components/hero/HeroScene.tsx

@@ -3,8 +3,8 @@ import { Suspense, useEffect, useMemo, useRef } from "react";
 import * as THREE from "three";
 
 // Brand palette: logo teal flowing in, light teal flowing out, a faint amber halo.
-const COLOR_CYAN = new THREE.Color("#3DDBD9");
-const COLOR_VIOLET = new THREE.Color("#8EEBEA");
+const COLOR_CYAN = new THREE.Color("#22E5F2");
+const COLOR_VIOLET = new THREE.Color("#F05CD8");
 const COLOR_PINK = new THREE.Color("#E5C07B");
 
 /**