portada: reticula sutil 1px rgba(150,150,150,0.25), brillo + glow en hover
1/* ===================================================
2 GioSer · Estilos de Portada (Chakana 2×2)
3 =================================================== */
4
5*,
6*::before,
7*::after {
8 margin: 0;
9 padding: 0;
10 box-sizing: border-box;
11}
12
13:root {
14 --bg: #0c0c0c;
15 --bg-alt: #111;
16 --fg: #c8c8c8;
17 --fg-dim: #666;
18 --fg-bright: #e0e0e0;
19 --accent: #a0a0a0;
20 --font: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
21 --font-ui: -apple-system, 'Inter', 'Segoe UI', sans-serif;
22}
23
24html, body {
25 height: 100%;
26 width: 100%;
27 overflow: hidden;
28 background: var(--bg);
29 color: var(--fg);
30 font-family: var(--font);
31 font-size: 14px;
32 line-height: 1.4;
33 -webkit-font-smoothing: antialiased;
34}
35
36/* ===================================================
37 PORTADA — grid 2×2
38 =================================================== */
39
40.portada {
41 position: fixed;
42 inset: 0;
43 display: grid;
44 grid-template-columns: 1fr 1fr;
45 grid-template-rows: 1fr 1fr;
46 z-index: 10;
47 background: var(--bg);
48}
49
50/* ===================================================
51 RETÍCULA — líneas + círculo sutiles, brillan en hover
52 =================================================== */
53
54.portada::before {
55 content: '';
56 position: absolute;
57 top: 0; left: 0; right: 0; bottom: 0;
58 z-index: 30;
59 pointer-events: none;
60 transition: all 0.4s ease;
61 background:
62 linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(150,150,150,0.25) calc(50% - 0.5px), rgba(150,150,150,0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
63 linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(150,150,150,0.25) calc(50% - 0.5px), rgba(150,150,150,0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
64 radial-gradient(circle at 50% 50%, transparent calc(11px), rgba(150,150,150,0.35) calc(11px), rgba(150,150,150,0.35) calc(13px), transparent calc(13px));
65}
66
67.portada-hover::before {
68 background:
69 linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(200,200,200,0.5) calc(50% - 0.5px), rgba(200,200,200,0.6) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
70 linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(200,200,200,0.5) calc(50% - 0.5px), rgba(200,200,200,0.6) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
71 radial-gradient(circle at 50% 50%, transparent calc(11px), rgba(200,200,200,0.7) calc(11px), rgba(200,200,200,0.7) calc(13px), transparent calc(13px)),
72 radial-gradient(circle at 50% 50%, rgba(200,200,200,0.08) 30%, transparent 65%);
73}
74
75/* ===================================================
76 CUADRANTES
77 =================================================== */
78
79.cuadrante {
80 position: relative;
81 background: transparent;
82 border: none;
83 cursor: pointer;
84 z-index: 5;
85 overflow: hidden;
86 transition: background 0.3s ease;
87 text-align: left;
88 font-family: var(--font);
89 color: var(--fg);
90 padding: 0;
91}
92
93.cuadrante:hover {
94 background: rgba(192, 192, 192, 0.15);
95}
96
97/* Borde iluminado en hover */
98.cuadrante-border {
99 position: absolute;
100 inset: -1px;
101 border: 1px solid transparent;
102 transition: border-color 0.3s ease;
103 pointer-events: none;
104}
105
106.cuadrante:hover .cuadrante-border {
107 border-color: #666;
108}
109
110/* Contenido */
111.cuadrante-content {
112 position: absolute;
113 inset: 0;
114 display: flex;
115 flex-direction: column;
116 justify-content: center;
117 padding: 40px 32px;
118 opacity: 0.7;
119 transition: opacity 0.3s ease;
120}
121
122.cuadrante:hover .cuadrante-content {
123 opacity: 1;
124}
125
126/* Alineación: izquierda mira a la derecha, derecha mira a la izquierda */
127.cuadrante-01 .cuadrante-content,
128.cuadrante-02 .cuadrante-content {
129 align-items: flex-end;
130 text-align: right;
131 padding-right: 40px;
132 padding-left: 20px;
133}
134
135.cuadrante-00 .cuadrante-content,
136.cuadrante-03 .cuadrante-content {
137 align-items: flex-start;
138 text-align: left;
139 padding-left: 40px;
140 padding-right: 20px;
141}
142
143.cuadrante-hex {
144 font-size: 11px;
145 font-weight: 600;
146 color: var(--fg-dim);
147 letter-spacing: 0.15em;
148 margin-bottom: 6px;
149 font-family: var(--font);
150}
151
152.cuadrante-title {
153 font-size: 17px;
154 font-weight: 600;
155 color: var(--fg-bright);
156 letter-spacing: 0.06em;
157 margin-bottom: 12px;
158 font-family: var(--font-ui);
159}
160
161.cuadrante-context {
162 font-size: 13px;
163 color: var(--fg-dim);
164 line-height: 1.6;
165 margin-bottom: 16px;
166 max-width: 70%;
167 font-family: var(--font-ui);
168}
169
170.cuadrante-01 .cuadrante-context,
171.cuadrante-02 .cuadrante-context {
172 text-align: right;
173}
174
175.cuadrante-00 .cuadrante-context,
176.cuadrante-03 .cuadrante-context {
177 text-align: left;
178}
179
180.cuadrante-meta {
181 display: flex;
182 align-items: center;
183 gap: 14px;
184 margin-bottom: 12px;
185}
186
187.cuadrante-01 .cuadrante-meta,
188.cuadrante-02 .cuadrante-meta {
189 flex-direction: row-reverse;
190}
191
192.cuadrante-00 .cuadrante-meta,
193.cuadrante-03 .cuadrante-meta {
194 flex-direction: row;
195}
196
197.meta-cta {
198 font-size: 11px;
199 font-weight: 600;
200 color: var(--accent);
201 font-family: var(--font);
202 letter-spacing: 0.05em;
203 border: 1px solid #333;
204 padding: 2px 8px;
205 border-radius: 2px;
206 transition: border-color 0.3s ease, color 0.3s ease;
207}
208
209.cuadrante:hover .meta-cta {
210 border-color: var(--fg-bright);
211 color: var(--fg-bright);
212}
213
214.meta-stat {
215 font-size: 10px;
216 color: var(--fg-dim);
217 letter-spacing: 0.08em;
218 font-family: var(--font);
219 opacity: 0;
220 transition: opacity 0.4s ease;
221}
222
223.cuadrante:hover .meta-stat {
224 opacity: 0.7;
225}
226
227.cuadrante-crates {
228 list-style: none;
229 font-size: 11px;
230 color: var(--fg-dim);
231 font-family: var(--font);
232 line-height: 1.6;
233 margin: 0;
234 opacity: 0;
235 transition: opacity 0.4s ease;
236}
237
238.cuadrante:hover .cuadrante-crates {
239 opacity: 0.6;
240}
241
242.cuadrante-crates li::before {
243 content: '◆ ';
244 color: var(--fg-dim);
245 font-size: 7px;
246 opacity: 0.4;
247}
248
249/* ===================================================
250 TRANSICIÓN CIERRE PORTADA
251 =================================================== */
252
253.portada-closing {
254 animation: portadaFade 0.6s ease forwards;
255}
256
257@keyframes portadaFade {
258 0% {
259 opacity: 1;
260 pointer-events: auto;
261 }
262 100% {
263 opacity: 0;
264 pointer-events: none;
265 }
266}
267
268/* ===================================================
269 DECK (páginas md, mismo estilo de antes)
270 =================================================== */
271
272.deck {
273 position: fixed;
274 inset: 0;
275 z-index: 20;
276 background: var(--bg);
277 opacity: 0;
278 transition: opacity 0.5s ease;
279}
280
281.deck:not([aria-hidden]) {
282 opacity: 1;
283}
284
285.deck-strip {
286 height: 100%;
287 width: 100%;
288 display: flex;
289 overflow-x: auto;
290 overflow-y: hidden;
291 scroll-snap-type: x mandatory;
292 -webkit-overflow-scrolling: touch;
293}
294
295/* ===================================================
296 CONTROLES DE PÁGINA
297 =================================================== */
298
299.page-controls {
300 position: fixed;
301 top: 12px;
302 right: 12px;
303 display: flex;
304 gap: 8px;
305 z-index: 100;
306 transition: opacity 0.3s ease;
307}
308
309.page-control-btn {
310 width: 32px;
311 height: 32px;
312 background: rgba(255,255,255,0.04);
313 border: 1px solid #333;
314 border-radius: 4px;
315 color: var(--fg);
316 cursor: pointer;
317 display: flex;
318 align-items: center;
319 justify-content: center;
320 transition: background 0.2s ease, border-color 0.2s ease;
321}
322
323.page-control-btn:hover {
324 background: rgba(255,255,255,0.08);
325 border-color: #666;
326}
327
328.page-close {
329 font-size: 18px;
330 font-family: var(--font-ui);
331 font-weight: 300;
332}
333
334/* ===================================================
335 TASKBAR
336 =================================================== */
337
338.taskbar {
339 position: fixed;
340 bottom: 0;
341 left: 0;
342 right: 0;
343 height: 40px;
344 background: rgba(12, 12, 12, 0.92);
345 border-top: 1px solid #333;
346 display: flex;
347 align-items: center;
348 gap: 6px;
349 padding: 0 10px;
350 z-index: 200;
351 backdrop-filter: blur(8px);
352 -webkit-backdrop-filter: blur(8px);
353 font-family: var(--font);
354 font-size: 12px;
355}
356
357.taskbar-home,
358.taskbar-brand {
359 display: flex;
360 align-items: center;
361 gap: 4px;
362 color: var(--fg);
363 cursor: pointer;
364 text-decoration: none;
365 background: transparent;
366 border: none;
367 font-family: var(--font);
368 font-size: 12px;
369 padding: 4px 8px;
370 border-radius: 3px;
371 transition: background 0.2s ease;
372}
373
374.taskbar-home:hover,
375.taskbar-brand:hover {
376 background: rgba(255,255,255,0.06);
377}
378
379.taskbar-home-glyph {
380 width: 16px;
381 height: 16px;
382}
383
384.brand-dot {
385 color: var(--fg-dim);
386 margin: 0 1px;
387}
388
389.taskbar-divider {
390 width: 1px;
391 height: 20px;
392 background: #333;
393 margin: 0 4px;
394}
395
396.taskbar-list {
397 display: flex;
398 gap: 2px;
399 list-style: none;
400 margin: 0;
401 padding: 0;
402 max-width: 60vw;
403 overflow-x: auto;
404}
405
406.taskbar-list::-webkit-scrollbar {
407 height: 0;
408}
409
410.taskbar-spacer {
411 flex: 1;
412}
413
414.taskbar-credit {
415 color: var(--fg-dim);
416 text-decoration: none;
417 display: flex;
418 align-items: center;
419 gap: 4px;
420 padding: 4px 8px;
421 border-radius: 3px;
422 transition: color 0.2s ease;
423 font-size: 11px;
424}
425
426.taskbar-credit:hover {
427 color: var(--fg);
428}
429
430.copyleft-mark {
431 font-size: 11px;
432}
433
434/* ===================================================
435 SCROLLBAR
436 =================================================== */
437
438::-webkit-scrollbar {
439 width: 6px;
440 height: 6px;
441}
442
443::-webkit-scrollbar-track {
444 background: transparent;
445}
446
447::-webkit-scrollbar-thumb {
448 background: #333;
449 border-radius: 3px;
450}
451
452::-webkit-scrollbar-thumb:hover {
453 background: #666;
454}