feat(gioser): deck swipeable + minimize, brand+copyleft en taskbar (vista-web)
1/* === Tokens === */
2:root {
3 --bg: #06050d;
4 --fg: #e8eaf5;
5 --gold: #d8a85d;
6 --gold-deep: #b77e34;
7 --aire: #d0dbff;
8 --agua: #6cd0f3;
9 --fuego: #f59056;
10 --tierra: #d49873;
11
12 --ease-emerge: cubic-bezier(0.22, 0.61, 0.20, 1);
13 --ease-magma: cubic-bezier(0.32, 0, 0.05, 1);
14 --ease-page: cubic-bezier(0.22, 0.61, 0.36, 1);
15
16 --taskbar-height: 52px;
17}
18
19* { box-sizing: border-box; }
20
21html, body {
22 margin: 0;
23 padding: 0;
24 width: 100%;
25 height: 100%;
26 background: var(--bg);
27 color: var(--fg);
28 font-family: 'Inter', system-ui, -apple-system, sans-serif;
29 font-weight: 300;
30 overflow: hidden;
31}
32
33/* === Canvas WebGL === */
34#gioser-canvas {
35 position: fixed;
36 inset: 0;
37 width: 100vw;
38 height: 100vh;
39 display: block;
40 z-index: 0;
41 transition: opacity 600ms var(--ease-emerge), filter 600ms var(--ease-emerge);
42}
43body.deck-visible #gioser-canvas {
44 opacity: 0.30;
45 filter: blur(4px) saturate(80%);
46}
47
48/* === Tips (botones cardinales sobre el aro) === */
49#tips {
50 position: fixed;
51 inset: 0;
52 pointer-events: none;
53 z-index: 5;
54 transition: opacity 250ms ease;
55}
56body.deck-visible #tips {
57 opacity: 0;
58 pointer-events: none;
59}
60
61.tip {
62 position: absolute;
63 top: 0; left: 0;
64 pointer-events: auto;
65 text-decoration: none;
66 color: var(--fg);
67 user-select: none;
68 cursor: pointer;
69
70 display: flex;
71 flex-direction: column;
72 align-items: center;
73 gap: 0.55rem;
74 padding: 1.1rem 1.6rem 0.95rem;
75 min-width: 168px;
76
77 background:
78 radial-gradient(ellipse at top, rgba(255, 255, 255, 0.04), transparent 65%),
79 rgba(8, 6, 22, 0.55);
80 backdrop-filter: blur(12px) saturate(140%);
81 -webkit-backdrop-filter: blur(12px) saturate(140%);
82 border-radius: 20px;
83 border: 1px solid rgba(216, 168, 93, 0.25);
84
85 box-shadow:
86 0 12px 36px rgba(0, 0, 0, 0.40),
87 inset 0 0 0 1px rgba(255, 255, 255, 0.04);
88
89 transition:
90 box-shadow 350ms var(--ease-emerge),
91 border-color 350ms var(--ease-emerge),
92 background 350ms var(--ease-emerge);
93}
94.tip::before {
95 content: "";
96 position: absolute;
97 inset: -10px;
98 border-radius: 26px;
99 border: 1px solid currentColor;
100 opacity: 0;
101 transition: opacity 400ms ease, inset 400ms var(--ease-emerge);
102 pointer-events: none;
103}
104.tip:hover {
105 border-color: currentColor;
106 background:
107 radial-gradient(ellipse at top, rgba(255, 255, 255, 0.07), transparent 65%),
108 rgba(20, 14, 40, 0.72);
109}
110.tip:hover::before {
111 opacity: 0.45;
112 inset: -16px;
113}
114.tip-glyph {
115 width: 54px;
116 height: 54px;
117 color: currentColor;
118 filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 16px currentColor);
119 transition: filter 320ms ease, transform 350ms var(--ease-emerge);
120}
121.tip:hover .tip-glyph {
122 filter: drop-shadow(0 0 14px currentColor) drop-shadow(0 0 28px currentColor);
123 transform: translateY(-3px);
124}
125.tip-label {
126 font-family: 'Cinzel', serif;
127 font-size: 0.95rem;
128 letter-spacing: 0.42em;
129 font-weight: 600;
130 text-indent: 0.42em;
131 margin-top: 0.15rem;
132}
133.tip-sub {
134 font-family: 'Inter', sans-serif;
135 font-size: 0.7rem;
136 letter-spacing: 0.22em;
137 font-weight: 300;
138 color: rgba(232, 234, 245, 0.62);
139 text-transform: uppercase;
140 text-indent: 0.22em;
141}
142.tip-aire { color: var(--aire); }
143.tip-fuego { color: var(--fuego); }
144.tip-agua { color: var(--agua); }
145.tip-tierra { color: var(--tierra); }
146
147/* === DECK: contenedor único de páginas swipeable === */
148.deck {
149 position: fixed;
150 top: 0;
151 left: 0;
152 right: 0;
153 bottom: var(--taskbar-height);
154 z-index: 100;
155 pointer-events: none;
156 opacity: 0;
157 visibility: hidden;
158 transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
159 transform: scale(0.0);
160 overflow: hidden;
161 touch-action: pan-y;
162 background:
163 radial-gradient(ellipse at center, var(--deck-glow, rgba(216, 168, 93, 0.15)), transparent 65%),
164 rgba(6, 5, 13, 0.96);
165 backdrop-filter: blur(28px) saturate(140%);
166 -webkit-backdrop-filter: blur(28px) saturate(140%);
167 transition:
168 transform 600ms var(--ease-magma),
169 opacity 450ms ease,
170 visibility 0s 600ms;
171}
172.deck.open {
173 pointer-events: auto;
174 opacity: 1;
175 visibility: visible;
176 transform: scale(1);
177 transition:
178 transform 600ms var(--ease-magma),
179 opacity 450ms ease,
180 visibility 0s;
181}
182/* Acento del deck según elemento activo: glow radial del color. */
183body.deck-active-aire .deck { --deck-glow: rgba(208, 219, 255, 0.22); }
184body.deck-active-fuego .deck { --deck-glow: rgba(245, 144, 86, 0.28); }
185body.deck-active-agua .deck { --deck-glow: rgba(108, 208, 243, 0.22); }
186body.deck-active-tierra .deck { --deck-glow: rgba(212, 152, 115, 0.24); }
187
188/* Strip horizontal con páginas — vista-web traslada esto. */
189.deck-strip {
190 display: flex;
191 flex-direction: row;
192 width: 100%;
193 height: 100%;
194 transform: translate3d(var(--vista-offset, 0px), 0, 0);
195 transition: transform 360ms var(--ease-page);
196 will-change: transform;
197}
198.deck-strip.vista-dragging,
199.deck-strip.vista-instant {
200 transition: none;
201}
202
203.deck-page {
204 flex: 0 0 100%;
205 width: 100%;
206 height: 100%;
207 position: relative;
208 overflow-y: auto;
209 overflow-x: hidden;
210 /* contenido alineado al pop-snap mismo si la lista de páginas viviera
211 dentro de scroll nativo; con vista-web esto es informativo nomás. */
212 scroll-snap-align: start;
213}
214.deck-page[data-element="aire"] { --page-accent: var(--aire); }
215.deck-page[data-element="fuego"] { --page-accent: var(--fuego); }
216.deck-page[data-element="agua"] { --page-accent: var(--agua); }
217.deck-page[data-element="tierra"] { --page-accent: var(--tierra); }
218
219/* Ambience por página */
220.page-ambience {
221 position: absolute;
222 inset: 0;
223 pointer-events: none;
224 z-index: 0;
225}
226.deck-page[data-element="aire"] .page-ambience {
227 background:
228 radial-gradient(circle at 18% 22%, rgba(208, 219, 255, 0.20), transparent 38%),
229 radial-gradient(circle at 78% 68%, rgba(208, 219, 255, 0.14), transparent 40%),
230 radial-gradient(circle at 45% 90%, rgba(180, 200, 255, 0.10), transparent 45%);
231 animation: aire-drift 28s ease-in-out infinite alternate;
232}
233.deck-page[data-element="fuego"] .page-ambience {
234 background:
235 radial-gradient(circle at 50% 100%, rgba(245, 144, 86, 0.35), transparent 55%),
236 radial-gradient(circle at 25% 80%, rgba(255, 90, 40, 0.18), transparent 35%),
237 radial-gradient(circle at 80% 85%, rgba(255, 140, 60, 0.18), transparent 35%);
238 animation: fuego-flicker 5s ease-in-out infinite;
239}
240.deck-page[data-element="agua"] .page-ambience {
241 background:
242 radial-gradient(ellipse at 50% 95%, rgba(60, 160, 230, 0.30), transparent 60%),
243 radial-gradient(ellipse at 20% 70%, rgba(108, 208, 243, 0.15), transparent 50%),
244 radial-gradient(ellipse at 80% 75%, rgba(108, 208, 243, 0.12), transparent 50%);
245 animation: agua-tide 14s ease-in-out infinite alternate;
246}
247.deck-page[data-element="tierra"] .page-ambience {
248 background:
249 radial-gradient(ellipse at 50% 100%, rgba(120, 80, 40, 0.40), transparent 60%),
250 radial-gradient(ellipse at 22% 88%, rgba(180, 130, 80, 0.20), transparent 45%),
251 radial-gradient(ellipse at 78% 88%, rgba(150, 100, 60, 0.22), transparent 45%);
252}
253@keyframes aire-drift {
254 from { transform: translate(-4%, -1%); }
255 to { transform: translate(4%, 2%); }
256}
257@keyframes fuego-flicker {
258 0%, 100% { opacity: 0.85; transform: scaleY(1.00); }
259 35% { opacity: 1.00; transform: scaleY(1.04); }
260 60% { opacity: 0.92; transform: scaleY(0.98); }
261}
262@keyframes agua-tide {
263 from { transform: translateY(0); }
264 to { transform: translateY(-3%); }
265}
266
267/* Head + controls */
268.page-controls {
269 position: absolute;
270 top: 1.8vh;
271 right: 1.8vw;
272 z-index: 5;
273 display: flex;
274 gap: 0.5rem;
275}
276.page-control-btn {
277 width: 40px;
278 height: 40px;
279 border-radius: 50%;
280 background: rgba(255, 255, 255, 0.04);
281 border: 1px solid rgba(255, 255, 255, 0.18);
282 color: var(--page-accent, var(--gold));
283 font-size: 1.2rem;
284 line-height: 1;
285 cursor: pointer;
286 display: inline-flex;
287 align-items: center;
288 justify-content: center;
289 padding: 0;
290 font-family: 'Inter', sans-serif;
291 transition:
292 background 200ms ease,
293 border-color 200ms ease,
294 transform 250ms var(--ease-emerge);
295}
296.page-control-btn:hover {
297 background: rgba(255, 255, 255, 0.10);
298 border-color: currentColor;
299}
300.page-minimize svg {
301 width: 18px;
302 height: 18px;
303}
304.page-close {
305 font-size: 1.6rem;
306}
307.page-close:hover { transform: rotate(90deg); }
308
309.page-head {
310 position: relative;
311 z-index: 2;
312 text-align: center;
313 padding: 7vh 8vw 2vh;
314 color: var(--page-accent, var(--gold));
315}
316.page-mark {
317 display: inline-block;
318 font-family: 'Inter', sans-serif;
319 font-size: 0.7rem;
320 letter-spacing: 0.55em;
321 text-transform: uppercase;
322 color: rgba(232, 234, 245, 0.6);
323 margin-bottom: 0.4rem;
324 text-indent: 0.55em;
325}
326.page-title {
327 font-family: 'Cinzel', serif;
328 font-weight: 700;
329 font-size: clamp(2.4rem, 6vw, 4.6rem);
330 margin: 0;
331 letter-spacing: 0.08em;
332 color: var(--page-accent, var(--gold));
333 text-shadow: 0 0 28px currentColor, 0 0 56px rgba(255, 255, 255, 0.10);
334}
335.page-tag {
336 display: block;
337 font-family: 'Inter', sans-serif;
338 font-size: 0.78rem;
339 letter-spacing: 0.32em;
340 text-transform: uppercase;
341 color: rgba(232, 234, 245, 0.55);
342 margin-top: 0.7rem;
343 text-indent: 0.32em;
344}
345.page-content {
346 position: relative;
347 z-index: 2;
348 padding: 1vh 10vw 8vh;
349 opacity: 0;
350 transition: opacity 400ms ease 250ms;
351}
352.deck.open .deck-page .page-content {
353 opacity: 1;
354}
355
356/* === pluma-doc dentro de la página === */
357.pluma-doc {
358 max-width: 760px;
359 margin: 0 auto;
360 font-family: 'Inter', sans-serif;
361 font-weight: 300;
362 font-size: 1.05rem;
363 line-height: 1.78;
364 color: rgba(232, 234, 245, 0.92);
365}
366.pluma-doc > * + * { margin-top: 1.0em; }
367.pluma-doc h1 {
368 font-family: 'Cinzel', serif;
369 font-weight: 700;
370 font-size: clamp(1.7rem, 3vw, 2.4rem);
371 color: var(--page-accent);
372 text-shadow: 0 0 18px currentColor;
373 letter-spacing: 0.04em;
374 margin-top: 1.4em;
375}
376.pluma-doc h2 {
377 font-family: 'Cinzel', serif;
378 font-weight: 500;
379 font-size: 1.5rem;
380 color: var(--page-accent);
381 letter-spacing: 0.04em;
382 margin-top: 1.6em;
383 padding-bottom: 0.3em;
384 border-bottom: 1px solid rgba(255, 255, 255, 0.10);
385}
386.pluma-doc h3 {
387 font-family: 'Inter', sans-serif;
388 font-weight: 600;
389 font-size: 1.18rem;
390 color: rgba(255, 255, 255, 0.92);
391 letter-spacing: 0.03em;
392 margin-top: 1.6em;
393}
394.pluma-doc p { margin: 0; }
395.pluma-doc a {
396 color: var(--page-accent);
397 text-decoration: none;
398 border-bottom: 1px solid currentColor;
399 transition: opacity 200ms ease;
400}
401.pluma-doc a:hover { opacity: 0.7; }
402.pluma-doc strong { color: rgba(255, 255, 255, 0.98); font-weight: 600; }
403.pluma-doc em { color: rgba(255, 255, 255, 0.92); }
404.pluma-doc code {
405 font-family: 'JetBrains Mono', ui-monospace, monospace;
406 background: rgba(255, 255, 255, 0.06);
407 padding: 0.12em 0.45em;
408 border-radius: 4px;
409 font-size: 0.92em;
410 color: var(--page-accent);
411}
412.pluma-doc pre {
413 background: rgba(0, 0, 0, 0.45);
414 border: 1px solid rgba(255, 255, 255, 0.08);
415 border-left: 3px solid var(--page-accent);
416 border-radius: 8px;
417 padding: 1rem 1.2rem;
418 overflow-x: auto;
419 font-size: 0.92rem;
420}
421.pluma-doc pre code {
422 background: transparent;
423 color: rgba(232, 234, 245, 0.92);
424 padding: 0;
425}
426.pluma-doc blockquote {
427 border-left: 3px solid var(--page-accent);
428 padding: 0.4em 1.2em;
429 color: rgba(232, 234, 245, 0.75);
430 font-style: italic;
431 background: rgba(255, 255, 255, 0.03);
432 border-radius: 0 6px 6px 0;
433}
434.pluma-doc ul, .pluma-doc ol { padding-left: 1.6em; }
435.pluma-doc li { margin: 0.4em 0; }
436.pluma-doc li::marker { color: var(--page-accent); }
437.pluma-doc hr {
438 border: none;
439 height: 1px;
440 background: linear-gradient(to right, transparent, var(--page-accent), transparent);
441 margin: 2em 0;
442}
443.pluma-doc table {
444 border-collapse: collapse;
445 width: 100%;
446 font-size: 0.95rem;
447}
448.pluma-doc th, .pluma-doc td {
449 padding: 0.55em 0.9em;
450 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
451 text-align: left;
452}
453.pluma-doc th {
454 color: var(--page-accent);
455 font-weight: 600;
456 letter-spacing: 0.04em;
457}
458.pluma-loading, .pluma-error {
459 display: flex;
460 align-items: center;
461 justify-content: center;
462 min-height: 30vh;
463 color: rgba(232, 234, 245, 0.55);
464 font-family: 'Cinzel', serif;
465 letter-spacing: 0.4em;
466 font-size: 0.9rem;
467}
468.pluma-loading::before {
469 content: "";
470 width: 28px;
471 height: 28px;
472 margin-right: 1rem;
473 border: 1px solid var(--page-accent);
474 border-top-color: transparent;
475 border-radius: 50%;
476 animation: pluma-spin 1s linear infinite;
477}
478.pluma-error { color: var(--fuego); font-style: italic; }
479@keyframes pluma-spin { to { transform: rotate(360deg); } }
480
481/* === Taskbar estilo Windows === */
482.taskbar {
483 position: fixed;
484 left: 0;
485 right: 0;
486 bottom: 0;
487 height: var(--taskbar-height);
488 z-index: 200;
489 display: flex;
490 align-items: center;
491 gap: 0.5rem;
492 padding: 0 0.8rem;
493 background: linear-gradient(to top, rgba(6, 5, 13, 0.94), rgba(8, 6, 22, 0.80));
494 backdrop-filter: blur(24px) saturate(140%);
495 -webkit-backdrop-filter: blur(24px) saturate(140%);
496 border-top: 1px solid rgba(216, 168, 93, 0.22);
497 box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.45);
498}
499
500.taskbar-home {
501 width: 40px;
502 height: 40px;
503 display: inline-flex;
504 align-items: center;
505 justify-content: center;
506 background: transparent;
507 border: 1px solid rgba(216, 168, 93, 0.32);
508 color: var(--gold);
509 border-radius: 9px;
510 cursor: pointer;
511 padding: 0;
512 transition: all 220ms var(--ease-emerge);
513}
514.taskbar-home:hover {
515 border-color: var(--gold);
516 background: rgba(216, 168, 93, 0.12);
517 box-shadow: 0 0 16px rgba(216, 168, 93, 0.35);
518 transform: translateY(-1px);
519}
520.taskbar-home-glyph {
521 width: 22px;
522 height: 22px;
523 filter: drop-shadow(0 0 6px currentColor);
524}
525
526.taskbar-brand {
527 font-family: 'Cinzel', serif;
528 font-weight: 700;
529 font-size: 1.30rem;
530 letter-spacing: 0.07em;
531 color: #f4eedf;
532 text-decoration: none;
533 text-shadow: 0 0 14px rgba(216, 168, 93, 0.45);
534 padding: 0 0.55rem;
535 user-select: none;
536 transition: text-shadow 220ms ease, color 220ms ease;
537 white-space: nowrap;
538}
539.taskbar-brand:hover {
540 color: #ffffff;
541 text-shadow: 0 0 20px rgba(216, 168, 93, 0.7), 0 0 36px rgba(245, 144, 86, 0.30);
542}
543.taskbar-brand .brand-dot {
544 color: var(--gold);
545 margin: 0 0.05em;
546}
547
548.taskbar-divider {
549 display: inline-block;
550 width: 1px;
551 height: 26px;
552 background: rgba(255, 255, 255, 0.12);
553 margin: 0 0.25rem;
554}
555
556.taskbar-list {
557 list-style: none;
558 margin: 0;
559 padding: 0;
560 display: flex;
561 gap: 0.4rem;
562 overflow-x: auto;
563 scrollbar-width: none;
564 -ms-overflow-style: none;
565}
566.taskbar-list::-webkit-scrollbar { display: none; }
567
568.taskbar-item {
569 height: 38px;
570 padding: 0 1.0rem;
571 display: inline-flex;
572 align-items: center;
573 gap: 0.55rem;
574 background: rgba(255, 255, 255, 0.04);
575 border: 1px solid rgba(255, 255, 255, 0.10);
576 border-radius: 9px;
577 color: var(--task-color, var(--fg));
578 font-family: 'Cinzel', serif;
579 font-size: 0.72rem;
580 letter-spacing: 0.36em;
581 text-indent: 0.36em;
582 font-weight: 600;
583 cursor: pointer;
584 transition: all 260ms var(--ease-emerge);
585 white-space: nowrap;
586}
587.taskbar-item:hover {
588 background: rgba(255, 255, 255, 0.09);
589 border-color: var(--task-color, currentColor);
590 transform: translateY(-1px);
591}
592.taskbar-item.active {
593 background: rgba(255, 255, 255, 0.11);
594 border-color: var(--task-color);
595 box-shadow:
596 0 0 18px var(--task-color),
597 inset 0 -2px 0 0 var(--task-color);
598}
599.taskbar-item-dot {
600 width: 8px;
601 height: 8px;
602 border-radius: 50%;
603 background: var(--task-color, var(--gold));
604 box-shadow: 0 0 8px currentColor;
605}
606.taskbar-item[data-task="aire"] { --task-color: var(--aire); }
607.taskbar-item[data-task="fuego"] { --task-color: var(--fuego); }
608.taskbar-item[data-task="tierra"] { --task-color: var(--tierra); }
609.taskbar-item[data-task="agua"] { --task-color: var(--agua); }
610
611.taskbar-spacer {
612 flex: 1;
613 min-width: 0.6rem;
614}
615
616.taskbar-credit {
617 display: inline-flex;
618 align-items: center;
619 gap: 0.4rem;
620 font-family: 'Inter', sans-serif;
621 font-size: 0.78rem;
622 letter-spacing: 0.04em;
623 color: rgba(216, 168, 93, 0.75);
624 text-decoration: none;
625 padding: 0.35rem 0.7rem;
626 border-radius: 8px;
627 border: 1px solid transparent;
628 transition: all 220ms var(--ease-emerge);
629 white-space: nowrap;
630}
631.taskbar-credit:hover {
632 color: var(--gold);
633 border-color: rgba(216, 168, 93, 0.25);
634 background: rgba(216, 168, 93, 0.06);
635}
636.copyleft-mark {
637 display: inline-block;
638 font-size: 1rem;
639 /* © con escala horizontal -1 = copyleft visual. */
640 transform: scaleX(-1);
641 color: currentColor;
642}
643
644@media (max-width: 720px) {
645 .tip { min-width: 110px; padding: 0.7rem 0.9rem; }
646 .tip-glyph { width: 36px; height: 36px; }
647 .tip-label { font-size: 0.72rem; }
648 .tip-sub { display: none; }
649 .page-head { padding: 5vh 5vw 1vh; }
650 .page-content { padding: 0 5vw 5vh; }
651 .taskbar { height: 46px; padding: 0 0.4rem; gap: 0.3rem; }
652 .taskbar-home { width: 36px; height: 36px; }
653 .taskbar-item { height: 34px; padding: 0 0.7rem; font-size: 0.65rem; }
654 .taskbar-brand { font-size: 1.05rem; padding: 0 0.3rem; }
655 .taskbar-credit-text { display: none; }
656 .deck { bottom: 46px; }
657 :root { --taskbar-height: 46px; }
658}