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