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