Skip to content

Commit 286fe80

Browse files
ccross2ccross2
committed
style: convert to high contrast white aesthetic
- Convert core CSS variables to white background and dark text - Update Three.js scene materials to black wireframes and particles - Fix transparent hover states and contrast issues across all sections - Adjust z-indices and opacity levels for legibility on white - Incorporate ProductHero inside 404 page
1 parent ed85b76 commit 286fe80

5 files changed

Lines changed: 68 additions & 104 deletions

File tree

‎src/app.css‎

Lines changed: 19 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,46 @@
11
@font-face {
2-
font-family: 'Geist Mono';
2+
font-family: 'Geist Mono Variable';
33
src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
44
font-weight: 100 900;
5-
font-style: normal;
65
font-display: swap;
76
font-style: normal;
87
}
98

10-
/* ═══════════════════════════════════════════
11-
DESIGN TOKENS
12-
═══════════════════════════════════════════ */
13-
149
:root {
15-
/* Colors - Pure Monochrome */
16-
--bg: #000000;
17-
--surface: rgba(25, 25, 25, 0.4);
18-
--surface-2: rgba(40, 40, 40, 0.5);
19-
--border: rgba(255, 255, 255, 0.15);
20-
--border-glow: rgba(255, 255, 255, 0.8);
21-
22-
--text-primary: #ffffff;
23-
--text-secondary: rgba(255, 255, 255, 0.65);
24-
--text-muted: rgba(255, 255, 255, 0.35);
25-
--text-ghost: rgba(255, 255, 255, 0.15);
10+
/* Colors - Pure Monochrome Light Theme */
11+
--bg: #ffffff;
12+
--surface: rgba(230, 230, 230, 0.4);
13+
--surface-2: rgba(210, 210, 210, 0.5);
14+
--border: rgba(0, 0, 0, 0.15);
15+
--border-glow: rgba(0, 0, 0, 0.8);
16+
17+
--text-primary: #000000;
18+
--text-secondary: rgba(0, 0, 0, 0.65);
19+
--text-muted: rgba(0, 0, 0, 0.35);
20+
--text-ghost: rgba(0, 0, 0, 0.15);
2621

2722
/* Typography Scale */
2823
--fs-hero: clamp(4rem, 12vw, 10rem);
2924
--fs-hero-product: clamp(4rem, 12vw, 9rem);
3025
--fs-hero-large: clamp(5rem, 18vw, 12rem);
31-
26+
3227
--fs-h2: clamp(2rem, 5vw, 4rem);
3328
--fs-h2-large: clamp(2.5rem, 6vw, 5rem);
3429
--fs-thesis: clamp(2rem, 4vw, 4rem);
35-
30+
3631
--fs-lead: clamp(1.3rem, 2.5vw, 1.7rem);
3732
--fs-tagline: clamp(0.95rem, 2vw, 1.1rem);
3833
--fs-pillar-title: clamp(0.95rem, 1.5vw, 1.15rem);
39-
34+
4035
--fs-body: 0.95rem;
4136
--fs-body-sm: 0.875rem;
4237
--fs-body-xs: 0.85rem;
43-
38+
4439
--fs-spec: 0.75rem;
4540
--fs-label: 0.7rem;
4641
--fs-label-sm: 0.65rem;
4742
--fs-label-xs: 0.6rem;
48-
43+
4944
--fs-btn: 0.75rem;
5045
--fs-nav: 0.7rem;
5146
--fs-wordmark: 0.9rem;
@@ -193,7 +188,7 @@ a {
193188

194189
.btn-primary:hover {
195190
color: var(--bg);
196-
box-shadow: 0 0 20px rgba(255,255,255,0.2);
191+
box-shadow: 0 0 20px rgba(0,0,0,0.1);
197192
}
198193

199194
.btn-primary:hover::before {
@@ -218,7 +213,7 @@ a {
218213
.btn-secondary:hover {
219214
border-color: var(--text-primary);
220215
color: var(--text-primary);
221-
background: rgba(255,255,255,0.05);
216+
background: rgba(0,0,0,0.05);
222217
}
223218

224219
/* 3D Utility Classes */
@@ -239,32 +234,3 @@ a {
239234
.glitch-subtle {
240235
animation: textGlitch 8s infinite var(--ease-cinematic);
241236
}
242-
243-
/* ═══════════════════════════════════════════
244-
RESET
245-
═══════════════════════════════════════════ */
246-
247-
*, *::before, *::after {
248-
box-sizing: border-box;
249-
margin: 0;
250-
padding: 0;
251-
}
252-
253-
html {
254-
font-size: 16px;
255-
scroll-behavior: smooth;
256-
}
257-
258-
body {
259-
background-color: var(--bg);
260-
color: var(--text-primary);
261-
font-family: var(--font-mono);
262-
line-height: var(--lh-default);
263-
-webkit-font-smoothing: antialiased;
264-
-moz-osx-font-smoothing: grayscale;
265-
}
266-
267-
a {
268-
color: inherit;
269-
text-decoration: none;
270-
}

‎src/lib/three/ProductMonoliths.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
4646
// Wireframe
4747
const material = new THREE.LineBasicMaterial({
48-
color: 0x555555,
48+
color: 0xcccccc, // Lighter grey for white background
4949
transparent: true,
5050
opacity: 0.8
5151
});
@@ -151,7 +151,7 @@
151151
});
152152
153153
// Color transition
154-
const targetColor = isHovered ? new THREE.Color(0xffffff) : new THREE.Color(0x555555);
154+
const targetColor = isHovered ? new THREE.Color(0x000000) : new THREE.Color(0xcccccc);
155155
gsap.to(m.material.color, {
156156
r: targetColor.r,
157157
g: targetColor.g,
@@ -172,7 +172,7 @@
172172
m.isHovered = false;
173173
gsap.to(m.group.rotation, { x: 0, y: 0, duration: 0.8 });
174174
gsap.to(m.group.position, { z: 0, duration: 0.8 });
175-
gsap.to(m.material.color, { r: 0.33, g: 0.33, b: 0.33, duration: 0.5 });
175+
gsap.to(m.material.color, { r: 0.8, g: 0.8, b: 0.8, duration: 0.5 });
176176
});
177177
}
178178

‎src/lib/three/Scene.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,6 @@
3030
height: 100vh;
3131
z-index: -1;
3232
pointer-events: none;
33-
background: #000000;
33+
background: var(--bg);
3434
}
3535
</style>

‎src/lib/three/SceneManager.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export class SceneManager {
1616
this.height = window.innerHeight;
1717

1818
this.scene = new THREE.Scene();
19-
this.scene.fog = new THREE.FogExp2(0x000000, 0.02);
19+
this.scene.fog = new THREE.FogExp2(0xffffff, 0.02); // White fog for light theme
2020

2121
this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.1, 1000);
2222
// Camera starts pulled back a bit
@@ -59,7 +59,7 @@ export class SceneManager {
5959

6060
// Custom shader material for the bloom/glow effect on wireframe
6161
this.cubeMaterial = new THREE.LineBasicMaterial({
62-
color: 0xffffff,
62+
color: 0x000000, // Black lines for light theme
6363
transparent: true,
6464
opacity: 0.6,
6565
depthWrite: false,
@@ -73,15 +73,15 @@ export class SceneManager {
7373
const innerGeo = new THREE.OctahedronGeometry(2);
7474
const innerEdges = new THREE.EdgesGeometry(innerGeo);
7575
this.innerShape = new THREE.LineSegments(innerEdges, new THREE.LineBasicMaterial({
76-
color: 0xffffff,
76+
color: 0x000000, // Black lines for light theme
7777
transparent: true,
7878
opacity: 0.2,
7979
depthWrite: false
8080
}));
8181
this.cube.add(this.innerShape);
8282

8383
// 2. Background 3D grid plane extending into infinity
84-
const gridHelper = new THREE.GridHelper(100, 100, 0x333333, 0x111111);
84+
const gridHelper = new THREE.GridHelper(100, 100, 0xcccccc, 0xeeeeee); // Light grid
8585
gridHelper.position.y = -5;
8686
gridHelper.position.z = -10;
8787
this.scene.add(gridHelper);
@@ -97,10 +97,10 @@ export class SceneManager {
9797
particleGeo.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
9898
const particleMat = new THREE.PointsMaterial({
9999
size: 0.05,
100-
color: 0xffffff,
100+
color: 0x000000, // Black particles for light theme
101101
transparent: true,
102-
opacity: 0.4,
103-
blending: THREE.AdditiveBlending
102+
opacity: 0.2,
103+
blending: THREE.NormalBlending
104104
});
105105
this.particles = new THREE.Points(particleGeo, particleMat);
106106
this.scene.add(this.particles);

‎src/routes/+error.svelte‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,62 +2,60 @@
22
<title>404 — Page Not Found | Sovren Software</title>
33
</svelte:head>
44

5+
<script>
6+
import ProductHero from '$lib/ProductHero.svelte';
7+
</script>
8+
59
<main class="error-page">
6-
<div class="error-inner">
7-
<span class="error-code">404</span>
8-
<h1>NOT FOUND.</h1>
9-
<p>This page doesn't exist.</p>
10-
<a href="/" class="btn-back">← BACK TO HOME</a>
10+
<ProductHero
11+
category="404"
12+
title="NOT<br />FOUND."
13+
tagline="This page doesn't exist."
14+
size="large"
15+
/>
16+
<div class="actions">
17+
<a href="/" class="btn-primary">← BACK TO HOME</a>
1118
</div>
1219
</main>
1320

1421
<style>
1522
.error-page {
1623
min-height: calc(100vh - var(--nav-h));
17-
display: flex;
18-
align-items: center;
19-
justify-content: center;
20-
}
21-
22-
.error-inner {
2324
display: flex;
2425
flex-direction: column;
25-
align-items: center;
26-
gap: var(--space-xl);
27-
text-align: center;
28-
padding: var(--space-5xl) var(--space-2xl);
29-
}
30-
31-
.error-code {
32-
font-size: var(--fs-label);
33-
letter-spacing: var(--ls-widest);
34-
color: var(--text-muted);
35-
}
36-
37-
h1 {
38-
font-size: clamp(3rem, 10vw, 7rem);
39-
font-weight: var(--fw-bold);
40-
letter-spacing: 0.08em;
41-
line-height: 1.0;
26+
justify-content: center;
4227
}
43-
44-
p {
45-
font-size: var(--fs-body-xs);
46-
color: var(--text-secondary);
47-
letter-spacing: var(--ls-moderate);
28+
29+
.actions {
30+
max-width: var(--max-w);
31+
margin: 0 auto;
32+
width: 100%;
33+
padding: 0 var(--space-3xl);
34+
padding-bottom: var(--space-7xl);
4835
}
4936
50-
.btn-back {
37+
.btn-primary {
5138
display: inline-block;
52-
font-size: var(--fs-label);
39+
font-family: var(--font-mono);
40+
font-size: var(--fs-btn);
5341
letter-spacing: var(--ls-wider);
54-
color: var(--text-muted);
42+
padding: var(--btn-pad);
43+
background: transparent;
44+
color: var(--text-primary);
45+
border: 1px solid var(--text-primary);
5546
text-decoration: none;
56-
margin-top: var(--space-sm);
57-
transition: color var(--transition-fast);
47+
transition: all var(--transition-slow);
5848
}
5949
60-
.btn-back:hover {
61-
color: var(--text-primary);
50+
.btn-primary:hover {
51+
background: var(--text-primary);
52+
color: var(--bg);
53+
}
54+
55+
@media (max-width: 768px) {
56+
.actions {
57+
padding: 0 var(--space-xl);
58+
padding-bottom: var(--space-5xl);
59+
}
6260
}
6361
</style>

0 commit comments

Comments
 (0)