Skip to content

Commit 21bf5c1

Browse files
Copilotfermga
Copilot
and
fermga
committed
Update to modern dark academic design with glassmorphism and contemporary typography
Co-authored-by: fermga <203334638+fermga@users.noreply.github.com>
1 parent cb69591 commit 21bf5c1

File tree

1 file changed

+178
-89
lines changed

1 file changed

+178
-89
lines changed

‎index.html‎

Lines changed: 178 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,19 @@
66
<meta name="description" content="TNFR - Resonant Fractal Nature Theory: A physics-grounded computational paradigm modeling reality as coherent patterns that persist through resonance.">
77
<title>TNFR - Resonant Fractal Nature Theory</title>
88
<style>
9+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
10+
911
* {
1012
margin: 0;
1113
padding: 0;
1214
box-sizing: border-box;
1315
}
1416

1517
body {
16-
font-family: 'Georgia', 'Times New Roman', serif;
17-
line-height: 1.8;
18-
color: #e0e0e0;
19-
background: #0a0a0a;
18+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
19+
line-height: 1.7;
20+
color: #d4d4d4;
21+
background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
2022
min-height: 100vh;
2123
}
2224

@@ -28,191 +30,278 @@
2830

2931
.lang-toggle {
3032
position: fixed;
31-
top: 20px;
32-
right: 20px;
33+
top: 30px;
34+
right: 30px;
3335
z-index: 1000;
36+
display: flex;
37+
gap: 0;
38+
background: rgba(30, 30, 30, 0.95);
39+
backdrop-filter: blur(10px);
40+
border-radius: 8px;
41+
padding: 4px;
42+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
3443
}
3544

3645
.lang-button {
37-
background: #1a1a1a;
38-
color: #e0e0e0;
39-
border: 1px solid #333;
40-
padding: 0.5rem 1rem;
46+
background: transparent;
47+
color: #a0a0a0;
48+
border: none;
49+
padding: 0.6rem 1.2rem;
4150
cursor: pointer;
42-
font-family: 'Georgia', 'Times New Roman', serif;
43-
font-size: 0.9rem;
44-
transition: all 0.3s ease;
51+
font-family: 'Inter', sans-serif;
52+
font-size: 0.875rem;
53+
font-weight: 500;
54+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
55+
border-radius: 6px;
4556
}
4657

4758
.lang-button:hover {
48-
background: #2a2a2a;
49-
border-color: #666;
59+
color: #ffffff;
60+
background: rgba(60, 60, 60, 0.6);
5061
}
5162

5263
.lang-button.active {
53-
background: #2d2d2d;
54-
border-color: #888;
64+
color: #ffffff;
65+
background: rgba(80, 80, 80, 0.8);
66+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
5567
}
5668

5769
header {
5870
text-align: center;
59-
padding: 3rem 0;
60-
border-bottom: 1px solid #333;
71+
padding: 5rem 0 3rem 0;
72+
position: relative;
73+
}
74+
75+
header::after {
76+
content: '';
77+
position: absolute;
78+
bottom: 0;
79+
left: 50%;
80+
transform: translateX(-50%);
81+
width: 200px;
82+
height: 1px;
83+
background: linear-gradient(90deg, transparent, #444, transparent);
6184
}
6285

6386
h1 {
64-
font-size: 3rem;
87+
font-size: 3.5rem;
6588
margin-bottom: 1rem;
66-
font-weight: 300;
67-
letter-spacing: 0.05em;
68-
color: #f0f0f0;
89+
font-weight: 600;
90+
letter-spacing: -0.02em;
91+
color: #ffffff;
92+
text-shadow: 0 2px 20px rgba(255, 255, 255, 0.1);
6993
}
7094

7195
.tagline {
72-
font-size: 1.3rem;
73-
opacity: 0.8;
74-
margin-bottom: 1rem;
75-
font-style: italic;
76-
color: #b0b0b0;
96+
font-size: 1.25rem;
97+
margin-bottom: 0.5rem;
98+
font-weight: 400;
99+
color: #a0a0a0;
100+
letter-spacing: 0.01em;
77101
}
78102

79103
.main-content {
80-
background: #121212;
81-
border: 1px solid #333;
104+
background: rgba(25, 25, 25, 0.6);
105+
backdrop-filter: blur(20px);
106+
border: 1px solid rgba(60, 60, 60, 0.3);
107+
border-radius: 16px;
82108
padding: 3rem;
83-
margin: 2rem 0;
109+
margin: 3rem 0;
110+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
84111
}
85112

86113
h2 {
87-
font-size: 1.8rem;
114+
font-size: 2rem;
88115
margin: 3rem 0 1.5rem 0;
89-
font-weight: 400;
90-
letter-spacing: 0.03em;
91-
color: #f0f0f0;
92-
border-bottom: 1px solid #444;
93-
padding-bottom: 0.5rem;
116+
font-weight: 600;
117+
letter-spacing: -0.01em;
118+
color: #ffffff;
119+
position: relative;
120+
padding-bottom: 0.75rem;
121+
}
122+
123+
h2::after {
124+
content: '';
125+
position: absolute;
126+
bottom: 0;
127+
left: 0;
128+
width: 60px;
129+
height: 3px;
130+
background: linear-gradient(90deg, #6b6b6b, transparent);
131+
border-radius: 2px;
94132
}
95133

96134
h3 {
97-
font-size: 1.3rem;
135+
font-size: 1.25rem;
98136
margin: 2rem 0 1rem 0;
99-
font-weight: 400;
100-
color: #d0d0d0;
137+
font-weight: 600;
138+
color: #e0e0e0;
139+
letter-spacing: -0.01em;
101140
}
102141

103142
p {
104143
margin-bottom: 1.2rem;
105-
font-size: 1.05rem;
106-
text-align: justify;
144+
font-size: 1rem;
145+
line-height: 1.7;
146+
color: #b8b8b8;
107147
}
108148

109149
.intro {
110-
font-size: 1.1rem;
111-
line-height: 1.9;
112-
color: #c0c0c0;
113-
border-left: 3px solid #555;
114-
padding-left: 2rem;
150+
font-size: 1.125rem;
151+
line-height: 1.8;
152+
color: #d0d0d0;
153+
border-left: 3px solid rgba(100, 100, 100, 0.6);
154+
padding: 2rem 2rem 2rem 2.5rem;
115155
margin: 2.5rem 0;
116-
background: #1a1a1a;
117-
padding: 2rem;
118-
font-style: italic;
156+
background: rgba(30, 30, 30, 0.5);
157+
backdrop-filter: blur(10px);
158+
border-radius: 8px;
159+
position: relative;
160+
}
161+
162+
.intro::before {
163+
content: '';
164+
position: absolute;
165+
left: 0;
166+
top: 20%;
167+
width: 3px;
168+
height: 60%;
169+
background: linear-gradient(180deg, transparent, #707070, transparent);
119170
}
120171

121172
.key-concepts {
122173
display: grid;
123-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
124-
gap: 2rem;
174+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
175+
gap: 1.5rem;
125176
margin: 3rem 0;
126177
}
127178

128179
.concept-card {
129-
background: #1a1a1a;
180+
background: rgba(30, 30, 30, 0.6);
181+
backdrop-filter: blur(10px);
130182
padding: 2rem;
131-
border: 1px solid #333;
132-
transition: all 0.3s ease;
183+
border: 1px solid rgba(70, 70, 70, 0.3);
184+
border-radius: 12px;
185+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
186+
position: relative;
187+
overflow: hidden;
188+
}
189+
190+
.concept-card::before {
191+
content: '';
192+
position: absolute;
193+
top: 0;
194+
left: 0;
195+
width: 100%;
196+
height: 2px;
197+
background: linear-gradient(90deg, transparent, rgba(120, 120, 120, 0.5), transparent);
198+
transform: translateX(-100%);
199+
transition: transform 0.6s ease;
200+
}
201+
202+
.concept-card:hover::before {
203+
transform: translateX(100%);
133204
}
134205

135206
.concept-card:hover {
136-
background: #222;
137-
border-color: #555;
207+
background: rgba(35, 35, 35, 0.8);
208+
border-color: rgba(90, 90, 90, 0.5);
209+
transform: translateY(-4px);
210+
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
138211
}
139212

140213
.equation {
141-
background: #1a1a1a;
142-
color: #f0f0f0;
143-
padding: 2rem;
144-
border: 1px solid #333;
145-
font-family: 'Courier New', monospace;
146-
font-size: 1.3rem;
214+
background: rgba(20, 20, 20, 0.8);
215+
backdrop-filter: blur(10px);
216+
color: #ffffff;
217+
padding: 2.5rem;
218+
border: 1px solid rgba(70, 70, 70, 0.4);
219+
border-radius: 12px;
220+
font-family: 'JetBrains Mono', 'Courier New', monospace;
221+
font-size: 1.4rem;
222+
font-weight: 500;
147223
text-align: center;
148224
margin: 2.5rem 0;
149-
letter-spacing: 0.05em;
225+
letter-spacing: 0.02em;
226+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
150227
}
151228

152229
.highlight-box {
153-
background: #1a1a1a;
154-
border-left: 3px solid #666;
230+
background: rgba(30, 30, 30, 0.5);
231+
backdrop-filter: blur(10px);
232+
border-left: 3px solid rgba(100, 100, 100, 0.6);
233+
border-radius: 8px;
155234
padding: 2rem;
156235
margin: 2.5rem 0;
157236
}
158237

159238
ul {
160-
margin: 1.5rem 0 1.5rem 3rem;
239+
margin: 1.5rem 0 1.5rem 2rem;
161240
}
162241

163242
li {
164-
margin-bottom: 0.8rem;
165-
font-size: 1.05rem;
243+
margin-bottom: 0.75rem;
244+
font-size: 1rem;
245+
color: #b0b0b0;
246+
line-height: 1.6;
166247
}
167248

168249
.cta-section {
169250
text-align: center;
170-
margin: 3rem 0;
171-
padding: 3rem;
172-
background: #1a1a1a;
173-
border: 1px solid #333;
251+
margin: 4rem 0;
252+
padding: 3.5rem;
253+
background: rgba(25, 25, 25, 0.6);
254+
backdrop-filter: blur(20px);
255+
border: 1px solid rgba(60, 60, 60, 0.3);
256+
border-radius: 16px;
257+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
174258
}
175259

176260
.cta-button {
177261
display: inline-block;
178262
padding: 1rem 2rem;
179-
background: #2a2a2a;
180-
color: #e0e0e0;
263+
background: rgba(50, 50, 50, 0.8);
264+
color: #ffffff;
181265
text-decoration: none;
182-
border: 1px solid #444;
183-
font-weight: 400;
266+
border: 1px solid rgba(80, 80, 80, 0.5);
267+
border-radius: 8px;
268+
font-weight: 500;
184269
font-size: 1rem;
185-
margin: 1rem 0.5rem;
186-
transition: all 0.3s ease;
187-
font-family: 'Georgia', 'Times New Roman', serif;
270+
margin: 1rem 0.75rem;
271+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
272+
font-family: 'Inter', sans-serif;
273+
backdrop-filter: blur(10px);
188274
}
189275

190276
.cta-button:hover {
191-
background: #333;
192-
border-color: #666;
277+
background: rgba(70, 70, 70, 0.9);
278+
border-color: rgba(100, 100, 100, 0.6);
279+
transform: translateY(-2px);
280+
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
193281
}
194282

195283
footer {
196284
text-align: center;
197285
padding: 3rem 0;
198-
border-top: 1px solid #333;
199-
opacity: 0.7;
286+
border-top: 1px solid rgba(60, 60, 60, 0.3);
287+
margin-top: 3rem;
288+
color: #808080;
200289
}
201290

202291
footer a {
203-
color: #b0b0b0;
292+
color: #a0a0a0;
204293
text-decoration: none;
205294
margin: 0 1rem;
295+
transition: color 0.3s ease;
206296
}
207297

208298
footer a:hover {
209-
text-decoration: underline;
210-
color: #e0e0e0;
299+
color: #ffffff;
211300
}
212301

213302
strong {
214-
color: #f0f0f0;
215-
font-weight: 500;
303+
color: #ffffff;
304+
font-weight: 600;
216305
}
217306

218307
.lang-content {

0 commit comments

Comments
 (0)