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