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