Skip to content

Commit 76d1346

Browse files
blackboxprogrammingclaude
blackboxprogramming
and
claude
committed
[Brand] Fix styles.css — pure black backgrounds, white-only text, Space Grotesk fonts
Replaces blue-tinted backgrounds (#090d12, #10161d) with pure black (#000, #0a0a0a). Replaces IBM Plex Sans with Space Grotesk. All text white/gray only. Brand colors for shapes only. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent bf5fb50 commit 76d1346

1 file changed

Lines changed: 229 additions & 0 deletions

File tree

‎site/styles.css‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
2+
3+
:root {
4+
--bg: #000;
5+
--panel: #0a0a0a;
6+
--panel-strong: #111;
7+
--ink: #f5f5f5;
8+
--muted: #737373;
9+
--accent: #ff6b2b;
10+
--accent-2: #00d4ff;
11+
--line: #1a1a1a;
12+
--ok: #39d98a;
13+
--warn: #f5a623;
14+
--grad: linear-gradient(90deg, #FF6B2B, #FF2255, #CC00AA, #8844FF, #4488FF, #00D4FF);
15+
--sg: 'Space Grotesk', sans-serif;
16+
--jb: 'JetBrains Mono', monospace;
17+
--in: 'Inter', sans-serif;
18+
}
19+
20+
* {
21+
box-sizing: border-box;
22+
}
23+
24+
body {
25+
margin: 0;
26+
min-height: 100vh;
27+
font-family: var(--sg);
28+
background: var(--bg);
29+
color: var(--ink);
30+
}
31+
32+
a {
33+
color: inherit;
34+
}
35+
36+
.shell {
37+
max-width: 1160px;
38+
margin: 0 auto;
39+
padding: 72px 24px 96px;
40+
}
41+
42+
.eyebrow,
43+
.pill,
44+
.mini-label {
45+
display: inline-flex;
46+
align-items: center;
47+
gap: 8px;
48+
border: 1px solid var(--line);
49+
border-radius: 999px;
50+
font-size: 11px;
51+
letter-spacing: 0.14em;
52+
text-transform: uppercase;
53+
}
54+
55+
.eyebrow {
56+
color: var(--ink);
57+
padding: 6px 12px;
58+
}
59+
60+
.hero {
61+
display: grid;
62+
grid-template-columns: 1.15fr 0.85fr;
63+
gap: 18px;
64+
align-items: start;
65+
margin-top: 18px;
66+
}
67+
68+
.hero h1 {
69+
margin: 14px 0 14px;
70+
font-size: clamp(44px, 10vw, 94px);
71+
line-height: 0.92;
72+
letter-spacing: -0.05em;
73+
}
74+
75+
.hero p {
76+
max-width: 760px;
77+
font-size: 18px;
78+
line-height: 1.68;
79+
color: var(--muted);
80+
}
81+
82+
.panel {
83+
border: 1px solid var(--line);
84+
border-radius: 22px;
85+
background: var(--panel);
86+
padding: 22px;
87+
}
88+
89+
.hero-panel {
90+
background: var(--panel);
91+
border-top: 2px solid;
92+
border-image: var(--grad) 1;
93+
}
94+
95+
.metric {
96+
font-size: 34px;
97+
font-weight: 700;
98+
letter-spacing: -0.04em;
99+
}
100+
101+
.muted {
102+
color: var(--muted);
103+
}
104+
105+
.section-title {
106+
margin: 60px 0 16px;
107+
color: var(--ink);
108+
opacity: 0.5;
109+
font-family: var(--jb);
110+
font-size: 12px;
111+
letter-spacing: 0.16em;
112+
text-transform: uppercase;
113+
}
114+
115+
.grid {
116+
display: grid;
117+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
118+
gap: 16px;
119+
}
120+
121+
.card h3,
122+
.panel h2 {
123+
margin: 0 0 12px;
124+
font-size: 18px;
125+
}
126+
127+
.card p,
128+
.card li,
129+
.panel li {
130+
color: var(--muted);
131+
line-height: 1.6;
132+
}
133+
134+
.card ul,
135+
.panel ul {
136+
margin: 0;
137+
padding-left: 18px;
138+
}
139+
140+
.card li + li,
141+
.panel li + li {
142+
margin-top: 8px;
143+
}
144+
145+
.card {
146+
border: 1px solid var(--line);
147+
border-radius: 20px;
148+
background: var(--panel);
149+
padding: 20px;
150+
transition: border-color 0.2s;
151+
}
152+
153+
.card:hover {
154+
border-color: #333;
155+
}
156+
157+
.stack-item {
158+
display: flex;
159+
justify-content: space-between;
160+
gap: 12px;
161+
align-items: baseline;
162+
padding: 14px 0;
163+
border-top: 1px solid var(--line);
164+
}
165+
166+
.stack-item:first-child {
167+
border-top: 0;
168+
padding-top: 0;
169+
}
170+
171+
.stack-item strong {
172+
font-size: 16px;
173+
}
174+
175+
.stack-item span {
176+
color: var(--muted);
177+
font-size: 14px;
178+
text-align: right;
179+
}
180+
181+
.fleet-list {
182+
display: flex;
183+
flex-wrap: wrap;
184+
gap: 10px;
185+
}
186+
187+
.pill {
188+
padding: 7px 12px;
189+
color: var(--ink);
190+
}
191+
192+
.pill.ok::before,
193+
.pill.warn::before {
194+
content: "";
195+
width: 7px;
196+
height: 7px;
197+
border-radius: 999px;
198+
}
199+
200+
.pill.ok::before {
201+
background: var(--ok);
202+
}
203+
204+
.pill.warn::before {
205+
background: var(--warn);
206+
}
207+
208+
.link-row {
209+
display: flex;
210+
flex-wrap: wrap;
211+
gap: 12px;
212+
}
213+
214+
.mini-label {
215+
padding: 6px 10px;
216+
color: var(--muted);
217+
}
218+
219+
.footer-note {
220+
margin-top: 42px;
221+
color: var(--muted);
222+
font-size: 14px;
223+
}
224+
225+
@media (max-width: 860px) {
226+
.hero {
227+
grid-template-columns: 1fr;
228+
}
229+
}

0 commit comments

Comments
 (0)