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