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