tawasuyu/brahman

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