1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
|
/* ============= LOCKED PALETTE ============= */
:root {
--sky: url("img/wallpaper.png") center / cover no-repeat, linear-gradient(180deg, oklch(78% 0.10 215) 0%, oklch(88% 0.14 145) 100%);
--sun: radial-gradient(circle, oklch(99% 0.02 215) 0%, oklch(94% 0.05 215 / 0) 60%);
--icon-blue: linear-gradient(135deg, oklch(92% 0.06 215), oklch(72% 0.13 220) 60%, oklch(48% 0.13 230));
--icon-orange: linear-gradient(135deg, oklch(94% 0.10 145), oklch(78% 0.18 145) 55%, oklch(52% 0.16 150));
--icon-green: linear-gradient(135deg, oklch(94% 0.12 130), oklch(76% 0.18 140) 55%, oklch(50% 0.16 150));
--icon-pink: linear-gradient(135deg, oklch(88% 0.08 195), oklch(68% 0.13 200) 60%, oklch(45% 0.13 210));
--icon-silver: linear-gradient(135deg, oklch(98% 0.005 220), oklch(85% 0.015 220) 60%, oklch(62% 0.03 225));
--title-bar: linear-gradient(to bottom, oklch(94% 0.05 195), oklch(78% 0.10 200) 50%, oklch(60% 0.12 215));
--start-btn: linear-gradient(to bottom, oklch(94% 0.10 145) 0%, oklch(75% 0.18 145) 48%, oklch(50% 0.16 150) 52%, oklch(68% 0.18 145) 100%);
--start-border: oklch(40% 0.14 150);
}
.desk { position: fixed; inset: 0; overflow: hidden; background: var(--sky); background-size: cover; background-position: center; }
.icons { position: absolute; left: 24px; top: 24px; display: grid; grid-template-columns: 1fr; gap: 18px; z-index: 10; }
.icon { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; cursor: pointer; text-align: center; }
.icon .glyph {
width: 56px; height: 56px; border-radius: 14px;
background: linear-gradient(135deg, oklch(88% 0.10 220), oklch(70% 0.14 230) 60%, oklch(50% 0.13 240));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -3px 6px rgba(40,80,140,0.4), 0 4px 14px rgba(40,80,140,0.35);
display: flex; align-items: center; justify-content: center;
font-size: 26px; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.4);
position: relative;
}
.icon .glyph::before { content: ""; position: absolute; left: 4px; right: 4px; top: 3px; height: 40%; border-radius: 12px; background: linear-gradient(to bottom, rgba(255,255,255,0.75), transparent); }
.icon .glyph.orange { background: linear-gradient(135deg, oklch(92% 0.08 70), oklch(75% 0.16 55) 60%, oklch(55% 0.15 35)); }
.icon .glyph.green { background: linear-gradient(135deg, oklch(90% 0.10 145), oklch(75% 0.15 145) 60%, oklch(50% 0.13 155)); }
.icon .glyph.pink { background: linear-gradient(135deg, oklch(90% 0.10 350), oklch(75% 0.16 350) 60%, oklch(55% 0.16 340)); }
.icon .glyph.silver { background: linear-gradient(135deg, oklch(95% 0.01 240), oklch(78% 0.03 240) 60%, oklch(55% 0.04 240)); }
.icon .label { font-size: 12px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.6); font-weight: 500; }
.icon:hover .glyph { transform: translateY(-2px) scale(1.04); transition: transform 200ms; }
.win { position: absolute; min-width: 320px; z-index: 50; }
/* When a window has been resized, it switches to a flex column so the
body becomes a scroll region — keeps content from getting clipped */
.win.resized {
display: flex; flex-direction: column;
overflow: hidden;
border-radius: 18px;
}
.win.resized .body {
flex: 1; min-height: 0;
overflow-y: auto;
border-radius: 0 0 18px 18px;
}
/* The browser window is already a flex column internally; let it fill */
.win.resized > .browser { flex: 1; min-height: 0; }
/* RESIZE HANDLES */
.rs { position: absolute; z-index: 5; }
.rs-e { right: -3px; top: 14px; bottom: 18px; width: 8px; cursor: ew-resize; }
.rs-s { left: 14px; right: 18px; bottom: -3px; height: 8px; cursor: ns-resize; }
.rs-se {
right: 0; bottom: 0; width: 22px; height: 22px;
cursor: nwse-resize;
background-image:
linear-gradient(135deg, transparent 0 38%, rgba(40,80,140,0.85) 38% 48%, transparent 48% 60%, rgba(40,80,140,0.75) 60% 70%, transparent 70%, rgba(40,80,140,0.6) 82% 92%, transparent 92%);
border-radius: 0 0 18px 0;
opacity: 0.65;
transition: opacity 150ms, filter 150ms;
}
.rs-se:hover { opacity: 1; filter: drop-shadow(0 0 4px rgba(120,170,220,0.8)); }
body.rs-cursor-e, body.rs-cursor-e * { cursor: ew-resize !important; }
body.rs-cursor-s, body.rs-cursor-s * { cursor: ns-resize !important; }
body.rs-cursor-se, body.rs-cursor-se * { cursor: nwse-resize !important; }
.win .titlebar {
height: 32px; padding: 0 12px; display: flex; align-items: center; gap: 8px;
border-radius: 18px 18px 0 0;
background: var(--title-bar);
color: var(--title-fg, white); font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px var(--title-shadow, rgba(0,0,0,0.3));
cursor: grab; user-select: none;
border-bottom: 1px solid rgba(0,0,0,0.15);
}
.win .titlebar .dots { display: flex; gap: 6px; margin-right: 8px; }
.win .titlebar .dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.35); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
.win .titlebar .dot.r { background: radial-gradient(circle at 35% 30%, oklch(85% 0.18 30), oklch(55% 0.18 30)); }
.win .titlebar .dot.y { background: radial-gradient(circle at 35% 30%, oklch(95% 0.15 95), oklch(70% 0.18 80)); }
.win .titlebar .dot.g { background: radial-gradient(circle at 35% 30%, oklch(90% 0.18 145), oklch(60% 0.18 150)); }
.win .body { padding: 16px; font-size: 13px; line-height: 1.55; color: oklch(22% 0.04 240); border-radius: 0 0 18px 18px; }
.taskbar {
position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
height: 56px; padding: 0 12px; display: flex; align-items: center; gap: 10px;
border-radius: 28px;
background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(180,210,240,0.45));
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,0.85);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 12px 36px rgba(40,80,140,0.3);
z-index: 200;
}
.taskbar .start {
height: 40px; padding: 0 18px 0 14px; display: inline-flex; align-items: center; gap: 8px;
border-radius: 20px;
background: var(--start-btn);
color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.4); font-weight: 700; font-size: 13px;
border: 1px solid var(--start-border); cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 3px 10px rgba(180,90,40,0.3);
}
.taskbar .sep { width: 1px; height: 32px; background: linear-gradient(to bottom, transparent, rgba(60,100,160,0.4), transparent); }
.tray { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12px; color: oklch(25% 0.05 240); }
.clock { font-family: "Segoe UI", Tahoma; font-weight: 600; }
/* SERVER ROW */
.srv-row {
display: flex; align-items: center; gap: 10px; padding: 7px 0;
border-bottom: 1px dotted oklch(72% 0.05 220); font-size: 12px;
}
.srv-row:last-child { border-bottom: 0; }
.srv-led {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
animation: led-pulse 2.2s ease-in-out infinite;
}
.srv-led.ok { background: radial-gradient(circle at 30% 30%, oklch(96% 0.18 145), oklch(60% 0.18 150)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 0 8px oklch(70% 0.18 145 / 0.7); }
.srv-led.warn { background: radial-gradient(circle at 30% 30%, oklch(95% 0.16 85), oklch(70% 0.18 75)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 0 8px oklch(70% 0.18 80 / 0.6); }
@keyframes led-pulse { 50% { opacity: 0.55; } }
.srv-host { font-family: 'Courier New', monospace; flex: 1; color: oklch(25% 0.05 230); }
.srv-meta { font-size: 10px; opacity: 0.7; }
/* FILM DIARY ROW */
.film-row {
display: flex; gap: 10px; padding: 8px 0;
border-bottom: 1px dotted oklch(72% 0.05 220);
}
.film-row:last-child { border-bottom: 0; }
.film-poster {
width: 38px; height: 56px; border-radius: 4px; flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 6px rgba(40,80,140,0.2);
}
.film-meta { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; }
.film-title { font-weight: 700; color: oklch(25% 0.06 230); font-size: 13px; }
.film-year { font-weight: 400; opacity: 0.6; font-size: 11px; margin-left: 3px; }
.film-rating { font-size: 11px; margin: 1px 0 2px; }
.film-rating .star { color: oklch(80% 0.04 230); }
.film-rating .star.on { color: oklch(72% 0.16 60); text-shadow: 0 0 4px oklch(80% 0.18 70 / 0.5); }
.film-rating .star.half { background: linear-gradient(90deg, oklch(72% 0.16 60) 50%, oklch(80% 0.04 230) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.film-note { font-size: 11px; opacity: 0.75; font-style: italic; }
/* ============= FAUX BROWSER ============= */
.browser { display: flex; flex-direction: column; height: 100%; }
.browser .titlebar { border-bottom: 1px solid rgba(0,0,0,0.18); }
.browser-toolbar {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
background: linear-gradient(to bottom, oklch(96% 0.005 220), oklch(86% 0.015 225) 50%, oklch(78% 0.025 230));
border-bottom: 1px solid oklch(60% 0.04 230);
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
}
.nav-btn {
width: 28px; height: 24px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(to bottom, oklch(99% 0.005 220), oklch(88% 0.015 225) 50%, oklch(74% 0.03 230));
border: 1px solid oklch(55% 0.05 230);
color: oklch(35% 0.05 235); font-size: 13px; line-height: 1;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(40,80,140,0.25);
transition: transform 100ms, box-shadow 100ms;
}
.nav-btn:hover { transform: translateY(-0.5px); }
.nav-btn:active { transform: translateY(0.5px); box-shadow: inset 0 1px 3px rgba(40,80,140,0.4); }
.nav-btn[disabled] { opacity: 0.35; cursor: default; transform: none !important; }
.nav-btn.refresh.spinning svg { animation: spin 700ms linear; }
@keyframes spin { to { transform: rotate(360deg); } }
.url-bar {
flex: 1; height: 26px; display: flex; align-items: center; gap: 6px;
padding: 0 10px;
background: linear-gradient(to bottom, oklch(99% 0.003 220), oklch(94% 0.008 220));
border: 1px solid oklch(60% 0.04 230);
border-radius: 13px;
box-shadow: inset 0 1px 2px rgba(40,80,140,0.18);
font: 12px "IBM Plex Mono", "Courier New", monospace;
color: oklch(28% 0.05 235);
overflow: hidden; min-width: 0;
}
.url-bar .lock { font-size: 10px; color: oklch(58% 0.16 145); flex-shrink: 0; }
.url-bar .url-scheme { opacity: 0.55; }
.url-bar .url-host { color: oklch(30% 0.08 240); font-weight: 600; }
.url-bar .url-path { opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.url-bar .caret { width: 1px; height: 14px; background: oklch(40% 0.08 240); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.browser-bookmarks {
display: flex; align-items: center; gap: 2px;
padding: 4px 10px;
background: linear-gradient(to bottom, oklch(94% 0.01 220), oklch(86% 0.02 225));
border-bottom: 1px solid oklch(62% 0.04 230);
font-size: 11px;
overflow-x: auto; scrollbar-width: none;
}
.browser-bookmarks::-webkit-scrollbar { display: none; }
.bm {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px; border-radius: 8px;
color: oklch(28% 0.06 235); white-space: nowrap; cursor: pointer;
border: 1px solid transparent;
transition: background 120ms, border-color 120ms;
}
.bm:hover { background: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.95); }
.bm.active { background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(200,230,255,0.4)); border-color: rgba(120,170,220,0.5); }
.bm .favicon { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.bm.home .favicon { background: linear-gradient(135deg, oklch(85% 0.10 220), oklch(55% 0.14 235)); }
.browser-page {
flex: 1; min-height: 0; overflow-y: auto;
background: oklch(98% 0.004 220);
color: oklch(20% 0.03 240);
font: 14px "Georgia", "Times New Roman", serif;
line-height: 1.65;
padding: 0;
position: relative;
}
.browser-page::-webkit-scrollbar { width: 12px; }
.browser-page::-webkit-scrollbar-track { background: linear-gradient(to right, oklch(92% 0.01 220), oklch(96% 0.005 220)); }
.browser-page::-webkit-scrollbar-thumb { background: linear-gradient(to right, oklch(82% 0.03 225), oklch(70% 0.05 230)); border-radius: 6px; border: 2px solid oklch(94% 0.008 220); }
.browser-status {
height: 22px; padding: 0 12px;
display: flex; align-items: center; justify-content: space-between;
background: linear-gradient(to bottom, oklch(90% 0.01 220), oklch(80% 0.02 225));
border-top: 1px solid oklch(60% 0.04 230);
font: 11px "Segoe UI", Tahoma, sans-serif;
color: oklch(35% 0.05 235);
border-radius: 0 0 18px 18px;
}
.browser-status .progress {
flex: 1; max-width: 80px; height: 8px; margin: 0 8px;
background: oklch(82% 0.02 225); border-radius: 4px;
border: 1px solid oklch(65% 0.04 230);
overflow: hidden; box-shadow: inset 0 1px 2px rgba(40,80,140,0.15);
}
.browser-status .progress-bar {
height: 100%; width: 100%;
background: linear-gradient(to bottom, oklch(82% 0.13 220), oklch(58% 0.14 235));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
/* index page */
.idx-hero {
padding: 32px 40px 24px;
background:
radial-gradient(60% 80% at 100% 0%, oklch(88% 0.10 215 / 0.5) 0%, transparent 60%),
linear-gradient(to bottom, oklch(94% 0.03 220), oklch(98% 0.004 220));
border-bottom: 1px solid oklch(88% 0.02 220);
}
.idx-eyebrow { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 2px; text-transform: uppercase; color: oklch(45% 0.10 230); margin-bottom: 8px; }
.idx-title { font: 700 38px/1.05 "Georgia", "Times New Roman", serif; color: oklch(22% 0.06 235); letter-spacing: -1px; margin: 0 0 10px; }
.idx-title em { font-style: italic; font-weight: 400; color: oklch(45% 0.12 220); }
.idx-sub { font: italic 14px/1.5 "Georgia", serif; color: oklch(40% 0.04 235); max-width: 440px; margin: 0; }
.idx-list { padding: 16px 40px 40px; }
.idx-art { display: grid; grid-template-columns: 60px 1fr auto; gap: 18px; padding: 18px 0; border-bottom: 1px solid oklch(90% 0.015 220); cursor: pointer; transition: padding 120ms; }
.idx-art:last-child { border-bottom: 0; }
.idx-art:hover { padding-left: 6px; }
.idx-art:hover .idx-art-title { color: oklch(40% 0.16 230); text-decoration: underline; text-decoration-color: oklch(70% 0.13 220 / 0.5); text-underline-offset: 3px; }
.idx-art-num { font: 600 28px/1 "IBM Plex Mono", monospace; color: oklch(80% 0.04 225); padding-top: 4px; }
.idx-art-title { font: 700 18px/1.25 "Georgia", serif; color: oklch(22% 0.06 235); margin: 0 0 4px; letter-spacing: -0.2px; }
.idx-art-excerpt { font: 13px/1.55 "Georgia", serif; color: oklch(40% 0.04 235); margin: 4px 0 0; }
.idx-art-meta { font: 11px "IBM Plex Mono", monospace; color: oklch(55% 0.06 230); text-align: right; padding-top: 4px; line-height: 1.6; white-space: nowrap; }
.idx-art-tag { display: inline-block; padding: 1px 6px; border-radius: 3px; background: oklch(92% 0.04 220); color: oklch(40% 0.10 230); font-size: 10px; text-transform: lowercase; letter-spacing: 0.5px; }
/* article page */
.art-page { padding: 36px 56px 60px; max-width: 620px; margin: 0 auto; }
.art-back { display: inline-flex; align-items: center; gap: 6px; font: 500 11px "IBM Plex Mono", monospace; color: oklch(45% 0.10 230); text-decoration: none; margin-bottom: 24px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; }
.art-back:hover { color: oklch(35% 0.16 230); }
.art-eyebrow { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 2px; text-transform: uppercase; color: oklch(55% 0.10 220); margin-bottom: 12px; }
.art-title { font: 700 32px/1.15 "Georgia", "Times New Roman", serif; color: oklch(20% 0.06 235); letter-spacing: -0.6px; margin: 0 0 14px; }
.art-byline { font: italic 13px/1.5 "Georgia", serif; color: oklch(48% 0.04 235); margin: 0 0 32px; padding-bottom: 16px; border-bottom: 1px solid oklch(88% 0.015 220); }
.art-body { font-size: 15px; line-height: 1.75; color: oklch(22% 0.03 240); }
.art-body p { margin: 0 0 18px; text-wrap: pretty; }
.art-body p:first-of-type::first-letter { font-size: 56px; font-weight: 700; float: left; line-height: 0.9; padding: 4px 8px 0 0; color: oklch(40% 0.14 220); font-family: "Georgia", serif; }
.art-body em { color: oklch(35% 0.10 230); }
.art-body a, .art-body .ilink { color: oklch(40% 0.16 230); text-decoration: underline; text-decoration-color: oklch(70% 0.13 220 / 0.4); text-underline-offset: 2px; cursor: pointer; }
.art-body h2 { font: 700 18px "Georgia", serif; color: oklch(22% 0.06 235); margin: 32px 0 12px; letter-spacing: -0.2px; }
.art-body blockquote { margin: 24px 0; padding: 0 0 0 18px; border-left: 3px solid oklch(78% 0.10 220); font-style: italic; color: oklch(38% 0.06 230); }
.art-body code { font: 13px "IBM Plex Mono", monospace; background: oklch(94% 0.01 220); padding: 1px 5px; border-radius: 3px; color: oklch(35% 0.10 230); }
.art-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid oklch(88% 0.015 220); font: 12px "IBM Plex Mono", monospace; color: oklch(55% 0.06 230); display: flex; justify-content: space-between; align-items: center; }
.art-foot .more { color: oklch(40% 0.16 230); cursor: pointer; }
/* music toggle button — on-state gradient (off-state is set inline by Aero.musicToggleHTML) */
.mt-btn.on { background: radial-gradient(circle at 30% 25%, white, oklch(75% 0.14 55) 60%, oklch(55% 0.15 35)) !important; }
/* film row trailing date */
.film-when { opacity: 0.6; margin-left: 8px; }
/* films stats numerals */
#films-stats strong { color: oklch(28% 0.08 230); font-size: 13px; }
/* podcast episode rows */
.pod-ep { display: flex; justify-content: space-between; gap: 8px; }
.pod-ep a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-dur { opacity: 0.6; flex-shrink: 0; }
/* "now playing" recent list */
.np-recent-label { margin-top: 14px; font-size: 11px; opacity: 0.75; text-transform: uppercase; letter-spacing: 1px; }
#np-recent { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.np-row { display: flex; justify-content: space-between; }
.np-ago { opacity: 0.6; }
/* generic empty/loading message used in fetched lists */
.empty-msg { opacity: 0.5; font-style: italic; }
|
