Skip to content

Commit 499881e

Browse files
New1DirectionNew1Direction
authored
Merge pull request #23 from New1Direction/redesign/bright-inspector
feat(site): bright "Inspector" redesign — interactive verdict, lens sheen, theme-scan
2 parents 1a51b96 + 81a34f3 commit 499881e

12 files changed

Lines changed: 870 additions & 170 deletions

File tree

‎website/app/(home)/styles/home.css‎

Lines changed: 373 additions & 20 deletions
Large diffs are not rendered by default.

‎website/app/(home)/styles/shell.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
inset: 0;
5454
z-index: 60;
5555
pointer-events: none;
56-
opacity: 0.04;
56+
opacity: 0.02;
5757
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
5858
background-size: 180px 180px;
5959
}
@@ -332,8 +332,8 @@
332332
width: 7px;
333333
height: 7px;
334334
border-radius: 50%;
335-
background: var(--accent);
336-
box-shadow: 0 0 10px var(--accent);
335+
background: var(--pop);
336+
box-shadow: 0 0 10px var(--pop);
337337
}
338338
.site-root .section-title {
339339
font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem);
@@ -411,7 +411,7 @@
411411
/* ── Footer ──────────────────────────────────────────────────────────── */
412412
.site-footer {
413413
flex-shrink: 0;
414-
margin-top: clamp(60px, 6vw, 110px);
414+
margin-top: clamp(36px, 3.5vw, 64px);
415415
border-top: 1px solid var(--border);
416416
background: color-mix(in srgb, var(--surface) 50%, transparent);
417417
}

‎website/app/global.css‎

Lines changed: 151 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
@source '../components';
66

77
/* ════════════════════════════════════════════════════════════════════════
8-
"The Case File" — a detective/inspector identity for RepoLens.
9-
Leads LIGHT (warm manila + ink), with an amber/brass lens-glint accent and a
10-
detective red for risk. Dark survives as a warm "night stakeout" (.dark), not
11-
a cold terminal. next-themes flips .dark; tokens drive marketing + docs.
8+
RepoLens — "Inspector" identity, bright & alive.
9+
Leads LIGHT on a clean cool near-white (no warmth — brown reads cheap), with
10+
near-black ink, a VIVID blue lead, a cyan scanner glint, and a hot-coral pop
11+
for life. Green = FIT, red = RISK. Dark is a cool slate complement, not a
12+
warm noir and not an AI terminal. next-themes flips .dark; tokens drive all.
1213
──────────────────────────────────────────────────────────────────────── */
1314

1415
:root {
@@ -25,120 +26,158 @@
2526
/* the stamp's heavy "slam" */
2627
--ease-stamp: cubic-bezier(0.5, 1.8, 0.4, 0.95);
2728

28-
/* Amber/brass lens-glint accent + detective red. One ramp tuned for paper;
29-
.dark brightens it for the night-stakeout surfaces. */
30-
--accent: #9e530e;
31-
--accent-2: #934a0c;
32-
--accent-3: #d9822b;
33-
--grad: linear-gradient(120deg, #d9822b 0%, #9e530e 60%, #934a0c 120%);
34-
--grad-soft: linear-gradient(120deg, #d9822b, #9e530e);
35-
--accent-glow: rgba(179, 94, 16, 0.35);
36-
--accent-weak: rgba(179, 94, 16, 0.1);
37-
--accent-line: rgba(179, 94, 16, 0.28);
29+
/* Vivid blue lead + cyan scanner glint + hot-coral pop. Green=FIT, red=RISK.
30+
.dark recasts these brighter on cool slate. */
31+
--accent: #2563ff;
32+
--accent-2: #1d4ed8;
33+
--accent-3: #06b6d4;
34+
--glint: #06b6d4;
35+
--grad: linear-gradient(120deg, #06b6d4 0%, #2563ff 58%, #1d4ed8 120%);
36+
--grad-soft: linear-gradient(120deg, #3b82f6, #2563ff);
37+
--accent-glow: rgba(37, 99, 255, 0.3);
38+
--accent-weak: rgba(37, 99, 255, 0.08);
39+
--accent-line: rgba(37, 99, 255, 0.22);
3840

39-
/* warm = the amber CTA; red = the RISKY stamp / red flags */
40-
--warm: #c2691c;
41-
--warm-2: #d9822b;
42-
--warm-ink: #2a1605;
43-
--warm-glow: rgba(194, 105, 28, 0.4);
44-
--warm-weak: rgba(194, 105, 28, 0.12);
45-
--warm-line: rgba(194, 105, 28, 0.34);
46-
--red: #c0392b;
47-
--red-weak: rgba(192, 57, 43, 0.12);
41+
/* warm = the primary CTA (vivid→deep blue, white text); pop = hot-coral life */
42+
--warm: #2563ff;
43+
--warm-2: #1d4ed8;
44+
--warm-ink: #ffffff;
45+
--warm-glow: rgba(37, 99, 255, 0.38);
46+
--warm-weak: rgba(37, 99, 255, 0.1);
47+
--warm-line: rgba(37, 99, 255, 0.26);
48+
--pop: #ff5a5f;
49+
--pop-weak: rgba(255, 90, 95, 0.12);
50+
--pop-line: rgba(255, 90, 95, 0.34);
51+
--red: #e5484d;
52+
--red-weak: rgba(229, 72, 77, 0.12);
4853

49-
/* Case File — warm manila paper, sepia ink */
50-
--bg: #f4ead4;
51-
--bg-2: #ecdfc2;
52-
--surface: #fbf5e7;
53-
--surface-2: #f5ecd6;
54-
--border: #ddccab;
55-
--border-2: #c8b285;
56-
--text: #2a2114;
57-
--text-strong: #17110a;
58-
--sub: #5d5034;
59-
--muted: #756544;
60-
--faint: #a89571;
61-
--ok: #2c7631;
62-
--info: #1d6fa3;
63-
--warn: #b4690a;
64-
--bad: #c0392b;
65-
--shadow-lg: 0 26px 70px -34px rgba(60, 42, 16, 0.38);
66-
--shadow-md: 0 16px 38px -22px rgba(60, 42, 16, 0.3);
67-
--paper-grain: 0.5;
54+
/* Clean paper — cool near-white, ink near-black */
55+
--bg: #f7f9fd;
56+
--bg-2: #eef2f9;
57+
--surface: #ffffff;
58+
--surface-2: #f9fbfe;
59+
--border: #e3e8f2;
60+
--border-2: #ccd6e6;
61+
--text: #1b2230;
62+
--text-strong: #0b0e14;
63+
--sub: #495264;
64+
--muted: #6b7384;
65+
--faint: #97a0b2;
66+
--ok: #16a34a;
67+
--info: #2563ff;
68+
--warn: #06b6d4;
69+
--bad: #e5484d;
70+
--shadow-lg: 0 28px 64px -30px rgba(15, 30, 70, 0.3);
71+
--shadow-md: 0 16px 38px -22px rgba(15, 30, 70, 0.22);
72+
--paper-grain: 0;
6873

69-
/* fumadocs remap → Case File light */
70-
--color-fd-background: #f4ead4;
71-
--color-fd-foreground: #2a2114;
72-
--color-fd-muted: #ecdfc2;
73-
--color-fd-muted-foreground: #6a5c3d;
74-
--color-fd-popover: #fbf5e7;
75-
--color-fd-popover-foreground: #17110a;
76-
--color-fd-card: #fbf5e7;
77-
--color-fd-card-foreground: #17110a;
78-
--color-fd-border: #ddccab;
79-
--color-fd-primary: #9e530e;
80-
--color-fd-primary-foreground: #fbf5e7;
81-
--color-fd-secondary: #efe3ca;
82-
--color-fd-secondary-foreground: #2a2114;
83-
--color-fd-accent: #ecdfc2;
84-
--color-fd-accent-foreground: #17110a;
85-
--color-fd-ring: #9e530e;
74+
/* fumadocs remap → bright light */
75+
--color-fd-background: #f7f9fd;
76+
--color-fd-foreground: #1b2230;
77+
--color-fd-muted: #eef2f9;
78+
--color-fd-muted-foreground: #6b7384;
79+
--color-fd-popover: #ffffff;
80+
--color-fd-popover-foreground: #0b0e14;
81+
--color-fd-card: #ffffff;
82+
--color-fd-card-foreground: #0b0e14;
83+
--color-fd-border: #e3e8f2;
84+
--color-fd-primary: #2563ff;
85+
--color-fd-primary-foreground: #ffffff;
86+
--color-fd-secondary: #eef2f9;
87+
--color-fd-secondary-foreground: #1b2230;
88+
--color-fd-accent: #e8eeff;
89+
--color-fd-accent-foreground: #0b0e14;
90+
--color-fd-ring: #2563ff;
8691
}
8792

8893
.dark {
89-
/* Night Stakeout — warm noir, not a cold terminal */
90-
--bg: #1b1610;
91-
--bg-2: #221b12;
92-
--surface: #2a2116;
93-
--surface-2: #32281a;
94-
--border: #43361f;
95-
--border-2: #5e4b2c;
96-
--text: #ece1cd;
97-
--text-strong: #fff8ec;
98-
--sub: #c3b094;
99-
--muted: #9c8a6a;
100-
--faint: #6f6045;
94+
/* Cool slate complement — clean dark, not a warm noir, not an AI terminal */
95+
--bg: #0b0f17;
96+
--bg-2: #121826;
97+
--surface: #151c2b;
98+
--surface-2: #1b2336;
99+
--border: #283146;
100+
--border-2: #3a4358;
101+
--text: #e6ebf3;
102+
--text-strong: #ffffff;
103+
--sub: #aeb6c4;
104+
--muted: #7f8799;
105+
--faint: #596173;
101106

102-
/* brighter amber + red read better on the warm-dark surfaces */
103-
--accent: #e0934a;
104-
--accent-2: #cf7a2a;
105-
--accent-3: #f0aa63;
106-
--grad: linear-gradient(120deg, #f0aa63 0%, #e0934a 60%, #cf7a2a 120%);
107-
--grad-soft: linear-gradient(120deg, #f0aa63, #e0934a);
108-
--accent-glow: rgba(224, 147, 74, 0.45);
109-
--accent-weak: rgba(224, 147, 74, 0.14);
110-
--accent-line: rgba(224, 147, 74, 0.32);
111-
--warm: #e0934a;
112-
--warm-2: #f0aa63;
113-
--warm-ink: #2a1605;
114-
--warm-glow: rgba(224, 147, 74, 0.45);
115-
--warm-weak: rgba(224, 147, 74, 0.16);
116-
--warm-line: rgba(224, 147, 74, 0.36);
117-
--red: #e06a5c;
118-
--red-weak: rgba(224, 106, 92, 0.16);
119-
--ok: #5cc05f;
120-
--info: #56b6e8;
121-
--warn: #e0a341;
122-
--bad: #e06a5c;
123-
--shadow-lg: 0 26px 70px -34px rgba(0, 0, 0, 0.72);
124-
--shadow-md: 0 16px 44px -26px rgba(0, 0, 0, 0.66);
125-
--paper-grain: 0.7;
107+
/* brighter blue + cyan + coral on the slate surfaces */
108+
--accent: #5a8cff;
109+
--accent-2: #3b6ef0;
110+
--accent-3: #34d6e8;
111+
--glint: #34d6e8;
112+
--grad: linear-gradient(120deg, #34d6e8 0%, #5a8cff 58%, #3b6ef0 120%);
113+
--grad-soft: linear-gradient(120deg, #6f9bff, #5a8cff);
114+
--accent-glow: rgba(90, 140, 255, 0.45);
115+
--accent-weak: rgba(90, 140, 255, 0.16);
116+
--accent-line: rgba(90, 140, 255, 0.32);
117+
--warm: #5a8cff;
118+
--warm-2: #4f86ff;
119+
--warm-ink: #06122a;
120+
--warm-glow: rgba(90, 140, 255, 0.5);
121+
--warm-weak: rgba(90, 140, 255, 0.18);
122+
--warm-line: rgba(90, 140, 255, 0.36);
123+
--pop: #ff6b70;
124+
--pop-weak: rgba(255, 107, 112, 0.16);
125+
--pop-line: rgba(255, 107, 112, 0.4);
126+
--red: #ff6b6b;
127+
--red-weak: rgba(255, 107, 107, 0.16);
128+
--ok: #3ecf7e;
129+
--info: #5a8cff;
130+
--warn: #34d6e8;
131+
--bad: #ff6b6b;
132+
--shadow-lg: 0 28px 64px -30px rgba(0, 0, 0, 0.72);
133+
--shadow-md: 0 16px 44px -26px rgba(0, 0, 0, 0.62);
134+
--paper-grain: 0;
126135

127-
/* fumadocs remap → night stakeout */
128-
--color-fd-background: #1b1610;
129-
--color-fd-foreground: #ece1cd;
130-
--color-fd-muted: #2a2116;
131-
--color-fd-muted-foreground: #c3b094;
132-
--color-fd-popover: #221b12;
133-
--color-fd-popover-foreground: #ece1cd;
134-
--color-fd-card: #2a2116;
135-
--color-fd-card-foreground: #ece1cd;
136-
--color-fd-border: #43361f;
137-
--color-fd-primary: #e0934a;
138-
--color-fd-primary-foreground: #1b1610;
139-
--color-fd-secondary: #32281a;
140-
--color-fd-secondary-foreground: #ece1cd;
141-
--color-fd-accent: #322619;
142-
--color-fd-accent-foreground: #fff8ec;
143-
--color-fd-ring: #e0934a;
136+
/* fumadocs remap → cool dark */
137+
--color-fd-background: #0b0f17;
138+
--color-fd-foreground: #e6ebf3;
139+
--color-fd-muted: #151c2b;
140+
--color-fd-muted-foreground: #aeb6c4;
141+
--color-fd-popover: #121826;
142+
--color-fd-popover-foreground: #e6ebf3;
143+
--color-fd-card: #151c2b;
144+
--color-fd-card-foreground: #e6ebf3;
145+
--color-fd-border: #283146;
146+
--color-fd-primary: #5a8cff;
147+
--color-fd-primary-foreground: #06122a;
148+
--color-fd-secondary: #1b2336;
149+
--color-fd-secondary-foreground: #e6ebf3;
150+
--color-fd-accent: #1c2740;
151+
--color-fd-accent-foreground: #ffffff;
152+
--color-fd-ring: #5a8cff;
153+
}
154+
155+
/* ════════════════════════════════════════════════════════════════════════
156+
Theme snap — toggling the theme fires a quick white "screenshot" flash that
157+
masks an instant swap, like snapping a photo of the repo (see snapToTheme in
158+
lib/themeSnap.ts). One fading overlay, GPU-cheap — no full-page snapshot, so
159+
no lag. Reduced-motion skips the flash (snapToTheme does a plain instant flip).
160+
──────────────────────────────────────────────────────────────────────── */
161+
.theme-flash {
162+
position: fixed;
163+
inset: 0;
164+
z-index: 9999;
165+
pointer-events: none;
166+
background: #ffffff;
167+
opacity: 0;
168+
will-change: opacity;
169+
}
170+
.theme-flash.is-on {
171+
animation: theme-snap 440ms ease-out forwards;
172+
}
173+
@keyframes theme-snap {
174+
0% {
175+
opacity: 0;
176+
}
177+
16% {
178+
opacity: 0.92;
179+
}
180+
100% {
181+
opacity: 0;
182+
}
144183
}

‎website/app/icon.svg‎

Lines changed: 4 additions & 4 deletions
Loading

‎website/components/home/Hero.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ export function Hero() {
88
<div className="container hero-grid">
99
<div className="hero-copy">
1010
<span className="kicker">
11-
<span className="pulse" /> Chrome Extension · Manifest V3 · v3.0
11+
<span className="pulse" /> Case No. RL-3.0 · Chrome · Manifest V3
1212
</span>
1313

1414
<h1 id="hero-heading" className="hero-title">
1515
Read code before
1616
<br />
17-
you <span className="grad-text">trust it.</span>
17+
you <span className="hero-mark">trust it.</span>
1818
</h1>
1919

2020
<p className="hero-sub">

‎website/components/home/HeroMascot.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { useEffect, useState } from 'react';
3+
import { useEffect, useRef, useState } from 'react';
44

55
// Static assets live in public/ and are NOT auto-prefixed with the GitHub
66
// Pages basePath the way next/link is — so we prefix the <video>/<img> src by hand.
@@ -15,18 +15,21 @@ const CAPTIONS = [
1515
const ALT = 'Vee, the RepoLens mascot, peering through a lens';
1616

1717
/**
18-
* The hero mascot: an autoplaying, muted, looping clip of Vee in a framed
19-
* stage. Under reduced-motion we show the poster frame instead — no autoplay,
20-
* no loop — and the caption stops rotating.
18+
* The hero mascot: an autoplaying, muted clip of Vee in a framed stage. The clip
19+
* is a boomerang (forward → reversed) so it loops with no seam, eased slightly
20+
* for a smoother feel. Under reduced-motion we show the poster frame instead —
21+
* no autoplay, no loop — and the caption stops rotating.
2122
*/
2223
export function HeroMascot() {
2324
const [reduced, setReduced] = useState(false);
2425
const [i, setI] = useState(0);
26+
const videoRef = useRef<HTMLVideoElement>(null);
2527

2628
useEffect(() => {
2729
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
2830
setReduced(reduce);
2931
if (reduce) return;
32+
if (videoRef.current) videoRef.current.playbackRate = 0.85;
3033
const id = setInterval(() => setI((n) => (n + 1) % CAPTIONS.length), 3400);
3134
return () => clearInterval(id);
3235
}, []);
@@ -39,6 +42,7 @@ export function HeroMascot() {
3942
<img src={`${BASE}/mascot-poster.jpg`} alt={ALT} width={230} height={270} />
4043
) : (
4144
<video
45+
ref={videoRef}
4246
className="hero-mascot-vid"
4347
autoPlay
4448
muted
@@ -49,7 +53,7 @@ export function HeroMascot() {
4953
width={230}
5054
height={270}
5155
>
52-
<source src={`${BASE}/mascot.mp4`} type="video/mp4" />
56+
<source src={`${BASE}/mascot-loop.mp4`} type="video/mp4" />
5357
</video>
5458
)}
5559
</div>

0 commit comments

Comments
 (0)