Skip to content

Commit 50ef2ea

Browse files
hyperpolymathhyperpolymath
committed
feat:
1 parent ba97f1c commit 50ef2ea

7 files changed

Lines changed: 1088 additions & 14 deletions

File tree

‎_site/assets/style.css‎

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
/* Premium Casket-SSG Design System */
2+
:root {
3+
--primary: #6366f1;
4+
--primary-hover: #4f46e5;
5+
--secondary: #a855f7;
6+
--accent: #ec4899;
7+
--text-main: #f8fafc;
8+
--text-muted: #94a3b8;
9+
--bg-base: #0f172a;
10+
--bg-surface: rgba(30, 41, 59, 0.7);
11+
--border-glass: rgba(255, 255, 255, 0.1);
12+
--font-heading: 'Outfit', sans-serif;
13+
--font-body: 'Inter', sans-serif;
14+
}
15+
16+
@media (prefers-color-scheme: light) {
17+
:root {
18+
--text-main: #0f172a;
19+
--text-muted: #64748b;
20+
--bg-base: #f8fafc;
21+
--bg-surface: rgba(255, 255, 255, 0.8);
22+
--border-glass: rgba(0, 0, 0, 0.1);
23+
}
24+
}
25+
26+
* {
27+
margin: 0;
28+
padding: 0;
29+
box-sizing: border-box;
30+
}
31+
32+
body {
33+
font-family: var(--font-body);
34+
color: var(--text-main);
35+
background-color: var(--bg-base);
36+
line-height: 1.6;
37+
overflow-x: hidden;
38+
position: relative;
39+
}
40+
41+
.glow-bg {
42+
position: absolute;
43+
top: 0;
44+
left: 50%;
45+
transform: translateX(-50%);
46+
width: 100vw;
47+
height: 800px;
48+
background: radial-gradient(circle 600px at 50% 200px, rgba(99, 102, 241, 0.15), transparent 80%);
49+
z-index: -1;
50+
pointer-events: none;
51+
}
52+
53+
.container {
54+
max-width: 1200px;
55+
margin: 0 auto;
56+
padding: 0 2rem;
57+
}
58+
59+
/* Header & Nav */
60+
.site-header {
61+
backdrop-filter: blur(12px);
62+
-webkit-backdrop-filter: blur(12px);
63+
background: transparent;
64+
border-bottom: 1px solid var(--border-glass);
65+
position: sticky;
66+
top: 0;
67+
z-index: 100;
68+
}
69+
70+
.nav {
71+
display: flex;
72+
justify-content: space-between;
73+
align-items: center;
74+
height: 5rem;
75+
}
76+
77+
.brand {
78+
font-family: var(--font-heading);
79+
font-size: 1.5rem;
80+
font-weight: 800;
81+
text-decoration: none;
82+
background: linear-gradient(135deg, var(--primary), var(--secondary));
83+
-webkit-background-clip: text;
84+
-webkit-text-fill-color: transparent;
85+
transition: opacity 0.2s;
86+
}
87+
88+
.brand:hover {
89+
opacity: 0.9;
90+
}
91+
92+
.nav-links {
93+
display: flex;
94+
align-items: center;
95+
gap: 2rem;
96+
}
97+
98+
.nav-link {
99+
color: var(--text-muted);
100+
text-decoration: none;
101+
font-weight: 500;
102+
transition: color 0.2s;
103+
}
104+
105+
.nav-link:hover {
106+
color: var(--text-main);
107+
}
108+
109+
/* Buttons */
110+
.btn-primary, .btn-secondary {
111+
display: inline-flex;
112+
align-items: center;
113+
justify-content: center;
114+
padding: 0.75rem 1.5rem;
115+
font-weight: 600;
116+
text-decoration: none;
117+
border-radius: 0.5rem;
118+
transition: all 0.2s ease-in-out;
119+
cursor: pointer;
120+
}
121+
122+
.btn-primary {
123+
background: linear-gradient(135deg, var(--primary), var(--secondary));
124+
color: #ffffff;
125+
border: none;
126+
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
127+
}
128+
129+
.btn-primary:hover {
130+
transform: translateY(-2px);
131+
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
132+
}
133+
134+
.btn-secondary {
135+
background: var(--bg-surface);
136+
color: var(--text-main);
137+
border: 1px solid var(--border-glass);
138+
backdrop-filter: blur(8px);
139+
}
140+
141+
.btn-secondary:hover {
142+
background: rgba(255, 255, 255, 0.1);
143+
transform: translateY(-2px);
144+
}
145+
146+
.large {
147+
padding: 1rem 2rem;
148+
font-size: 1.1rem;
149+
}
150+
151+
/* Hero Section */
152+
.hero {
153+
text-align: center;
154+
padding: 8rem 0 6rem;
155+
max-width: 800px;
156+
margin: 0 auto;
157+
}
158+
159+
.hero-badge {
160+
display: inline-block;
161+
padding: 0.5rem 1rem;
162+
font-size: 0.875rem;
163+
font-weight: 600;
164+
color: var(--secondary);
165+
background: rgba(168, 85, 247, 0.1);
166+
border: 1px solid rgba(168, 85, 247, 0.2);
167+
border-radius: 2rem;
168+
margin-bottom: 2rem;
169+
}
170+
171+
.hero h1 {
172+
font-family: var(--font-heading);
173+
font-size: 4rem;
174+
font-weight: 800;
175+
line-height: 1.1;
176+
margin-bottom: 1.5rem;
177+
background: linear-gradient(135deg, #ffffff 30%, var(--text-muted));
178+
-webkit-background-clip: text;
179+
-webkit-text-fill-color: transparent;
180+
}
181+
182+
@media (prefers-color-scheme: light) {
183+
.hero h1 {
184+
background: linear-gradient(135deg, #0f172a 30%, var(--primary));
185+
-webkit-background-clip: text;
186+
-webkit-text-fill-color: transparent;
187+
}
188+
}
189+
190+
.hero-subtitle {
191+
font-size: 1.25rem;
192+
color: var(--text-muted);
193+
margin-bottom: 3rem;
194+
}
195+
196+
.cta-group {
197+
display: flex;
198+
justify-content: center;
199+
gap: 1.5rem;
200+
}
201+
202+
/* Feature Grid */
203+
.grid-features {
204+
display: grid;
205+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
206+
gap: 2rem;
207+
margin-bottom: 6rem;
208+
}
209+
210+
.glass {
211+
background: var(--bg-surface);
212+
backdrop-filter: blur(16px);
213+
-webkit-backdrop-filter: blur(16px);
214+
border: 1px solid var(--border-glass);
215+
border-radius: 1rem;
216+
padding: 2.5rem;
217+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
218+
transition: transform 0.3s ease, border-color 0.3s ease;
219+
}
220+
221+
.glass:hover {
222+
transform: translateY(-4px);
223+
border-color: var(--secondary);
224+
}
225+
226+
.card-icon {
227+
font-size: 2.5rem;
228+
margin-bottom: 1.5rem;
229+
}
230+
231+
.card h3 {
232+
font-family: var(--font-heading);
233+
font-size: 1.5rem;
234+
margin-bottom: 1rem;
235+
color: var(--text-main);
236+
}
237+
238+
.card p {
239+
color: var(--text-muted);
240+
}
241+
242+
/* Content Section */
243+
.content-section {
244+
margin-bottom: 8rem;
245+
}
246+
247+
.content-section h2 {
248+
font-family: var(--font-heading);
249+
font-size: 2.5rem;
250+
margin-bottom: 2rem;
251+
background: linear-gradient(135deg, var(--primary), var(--secondary));
252+
-webkit-background-clip: text;
253+
-webkit-text-fill-color: transparent;
254+
}
255+
256+
.prose h3 {
257+
font-family: var(--font-heading);
258+
font-size: 1.5rem;
259+
margin: 2rem 0 1rem;
260+
}
261+
262+
.prose p {
263+
color: var(--text-muted);
264+
margin-bottom: 1.5rem;
265+
}
266+
267+
.prose pre {
268+
background: #0b0f19;
269+
border: 1px solid var(--border-glass);
270+
padding: 1.5rem;
271+
border-radius: 0.5rem;
272+
overflow-x: auto;
273+
margin: 2rem 0;
274+
}
275+
276+
.prose code {
277+
font-family: monospace;
278+
color: #38bdf8;
279+
}
280+
281+
/* Footer */
282+
.site-footer {
283+
border-top: 1px solid var(--border-glass);
284+
padding: 4rem 0;
285+
text-align: center;
286+
}
287+
288+
.footer-content {
289+
display: flex;
290+
flex-direction: column;
291+
gap: 1rem;
292+
}
293+
294+
.muted {
295+
color: var(--text-muted);
296+
font-size: 0.9rem;
297+
}
298+
299+
@media (max-width: 768px) {
300+
.hero h1 { font-size: 2.5rem; }
301+
.nav-links { display: none; }
302+
.cta-group { flex-direction: column; }
303+
}

0 commit comments

Comments
 (0)