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