gioser-web: ambient page bg: blur(60px) + centered gradient for seamless glow
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 touch-action: pan-y declara al browser "yo manejo horizontal, el
190 vertical (scroll interno de cada página) lo dejas pasar". Sin esto
191 el navegador móvil se traga el gesto horizontal antes de que JS
192 pueda capturarlo. */
193.deck-strip {
194 display: flex;
195 flex-direction: row;
196 width: 100%;
197 height: 100%;
198 transform: translate3d(var(--vista-offset, 0px), 0, 0);
199 transition: transform 360ms var(--ease-page);
200 will-change: transform;
201 touch-action: pan-y;
202}
203/* Asegurar que TODOS los descendientes del strip hereden el contrato
204 touch-action — si el toque llega a un párrafo o <a>, el browser
205 chequea el touch-action del target, no del padre. */
206.deck-strip * {
207 touch-action: pan-y;
208}
209.deck-strip.vista-dragging,
210.deck-strip.vista-instant {
211 transition: none;
212}
213
214.deck-page {
215 flex: 0 0 100%;
216 width: 100%;
217 height: 100%;
218 position: relative;
219 overflow-y: auto;
220 overflow-x: hidden;
221 touch-action: pan-y;
222}
223.deck-page[data-element="aire"] { --page-accent: var(--aire); }
224.deck-page[data-element="fuego"] { --page-accent: var(--fuego); }
225.deck-page[data-element="agua"] { --page-accent: var(--agua); }
226.deck-page[data-element="tierra"] { --page-accent: var(--tierra); }
227
228/* Ambience por página */
229.page-ambience {
230 position: absolute;
231 inset: 0;
232 pointer-events: none;
233 z-index: 0;
234 transition: opacity 2s ease;
235 filter: blur(60px);
236 opacity: 0.5;
237}
238.deck-page[data-element="aire"] .page-ambience {
239 background: radial-gradient(circle at 50% 50%, rgba(208,219,255,0.22), transparent 60%);
240 animation: page-breathe 8s ease-in-out infinite alternate;
241}
242.deck-page[data-element="fuego"] .page-ambience {
243 background: radial-gradient(circle at 50% 50%, rgba(245,144,86,0.22), transparent 60%);
244 animation: page-breathe 6s ease-in-out infinite alternate;
245}
246.deck-page[data-element="agua"] .page-ambience {
247 background: radial-gradient(circle at 50% 50%, rgba(108,208,243,0.22), transparent 60%);
248 animation: page-breathe 10s ease-in-out infinite alternate;
249}
250.deck-page[data-element="tierra"] .page-ambience {
251 background: radial-gradient(circle at 50% 50%, rgba(140,100,60,0.22), transparent 60%);
252 animation: page-breathe 7s ease-in-out infinite alternate;
253}
254@keyframes page-breathe {
255 from { opacity: 0.30; }
256 to { opacity: 0.60; }
257}
258
259/* Head + controls — fijos en el deck, no dentro de la página */
260.page-controls {
261 position: fixed;
262 top: 1.2rem;
263 right: 1.2rem;
264 z-index: 100;
265 display: flex;
266 gap: 0.5rem;
267 opacity: 0;
268 pointer-events: none;
269 transition: opacity 0.3s ease;
270}
271.deck--visible .page-controls {
272 opacity: 1;
273 pointer-events: auto;
274}
275.page-control-btn {
276 width: 40px;
277 height: 40px;
278 border-radius: 50%;
279 background: rgba(255, 255, 255, 0.04);
280 border: 1px solid rgba(255, 255, 255, 0.18);
281 color: var(--page-accent, var(--gold));
282 font-size: 1.2rem;
283 line-height: 1;
284 cursor: pointer;
285 display: inline-flex;
286 align-items: center;
287 justify-content: center;
288 padding: 0;
289 font-family: 'Inter', sans-serif;
290 transition:
291 background 200ms ease,
292 border-color 200ms ease,
293 transform 250ms var(--ease-emerge);
294}
295.page-control-btn:hover {
296 background: rgba(255, 255, 255, 0.10);
297 border-color: currentColor;
298}
299.page-minimize svg {
300 width: 18px;
301 height: 18px;
302}
303.page-close {
304 font-size: 1.6rem;
305}
306.page-close:hover { transform: rotate(90deg); }
307
308.page-head {
309 position: relative;
310 z-index: 2;
311 text-align: center;
312 padding: 7vh 8vw 2vh;
313 color: var(--page-accent, var(--gold));
314}
315.page-mark {
316 display: inline-block;
317 font-family: 'Inter', sans-serif;
318 font-size: 0.7rem;
319 letter-spacing: 0.55em;
320 text-transform: uppercase;
321 color: rgba(232, 234, 245, 0.6);
322 margin-bottom: 0.4rem;
323 text-indent: 0.55em;
324}
325.page-title {
326 font-family: 'Cinzel', serif;
327 font-weight: 700;
328 font-size: clamp(2.4rem, 6vw, 4.6rem);
329 margin: 0;
330 letter-spacing: 0.08em;
331 color: var(--page-accent, var(--gold));
332 text-shadow: 0 0 28px currentColor, 0 0 56px rgba(255, 255, 255, 0.10);
333}
334.page-tag {
335 display: block;
336 font-family: 'Inter', sans-serif;
337 font-size: 0.78rem;
338 letter-spacing: 0.32em;
339 text-transform: uppercase;
340 color: rgba(232, 234, 245, 0.55);
341 margin-top: 0.7rem;
342 text-indent: 0.32em;
343}
344.page-content {
345 position: relative;
346 z-index: 2;
347 padding: 1vh 10vw 8vh;
348 opacity: 0;
349 transition: opacity 400ms ease 250ms;
350}
351.deck.open .deck-page .page-content {
352 opacity: 1;
353}
354
355/* === pluma-doc dentro de la página === */
356.pluma-doc {
357 max-width: 760px;
358 margin: 0 auto;
359 font-family: 'Inter', sans-serif;
360 font-weight: 300;
361 font-size: 1.05rem;
362 line-height: 1.78;
363 color: rgba(232, 234, 245, 0.92);
364}
365.pluma-doc > * + * { margin-top: 1.0em; }
366.pluma-doc h1 {
367 font-family: 'Cinzel', serif;
368 font-weight: 700;
369 font-size: clamp(1.7rem, 3vw, 2.4rem);
370 color: var(--page-accent);
371 text-shadow: 0 0 18px currentColor;
372 letter-spacing: 0.04em;
373 margin-top: 1.4em;
374}
375.pluma-doc h2 {
376 font-family: 'Cinzel', serif;
377 font-weight: 500;
378 font-size: 1.5rem;
379 color: var(--page-accent);
380 letter-spacing: 0.04em;
381 margin-top: 1.6em;
382 padding-bottom: 0.3em;
383 border-bottom: 1px solid rgba(255, 255, 255, 0.10);
384}
385.pluma-doc h3 {
386 font-family: 'Inter', sans-serif;
387 font-weight: 600;
388 font-size: 1.18rem;
389 color: rgba(255, 255, 255, 0.92);
390 letter-spacing: 0.03em;
391 margin-top: 1.6em;
392}
393.pluma-doc p { margin: 0; }
394.pluma-doc a {
395 color: var(--page-accent);
396 text-decoration: none;
397 border-bottom: 1px solid currentColor;
398 transition: opacity 200ms ease;
399}
400.pluma-doc a:hover { opacity: 0.7; }
401.pluma-doc strong { color: rgba(255, 255, 255, 0.98); font-weight: 600; }
402.pluma-doc em { color: rgba(255, 255, 255, 0.92); }
403.pluma-doc code {
404 font-family: 'JetBrains Mono', ui-monospace, monospace;
405 background: rgba(255, 255, 255, 0.06);
406 padding: 0.12em 0.45em;
407 border-radius: 4px;
408 font-size: 0.92em;
409 color: var(--page-accent);
410}
411.pluma-doc pre {
412 background: rgba(0, 0, 0, 0.45);
413 border: 1px solid rgba(255, 255, 255, 0.08);
414 border-left: 3px solid var(--page-accent);
415 border-radius: 8px;
416 padding: 1rem 1.2rem;
417 overflow-x: auto;
418 font-size: 0.92rem;
419}
420.pluma-doc pre code {
421 background: transparent;
422 color: rgba(232, 234, 245, 0.92);
423 padding: 0;
424}
425.pluma-doc blockquote {
426 border-left: 3px solid var(--page-accent);
427 padding: 0.4em 1.2em;
428 color: rgba(232, 234, 245, 0.75);
429 font-style: italic;
430 background: rgba(255, 255, 255, 0.03);
431 border-radius: 0 6px 6px 0;
432}
433.pluma-doc ul, .pluma-doc ol { padding-left: 1.6em; }
434.pluma-doc li { margin: 0.4em 0; }
435.pluma-doc li::marker { color: var(--page-accent); }
436.pluma-doc hr {
437 border: none;
438 height: 1px;
439 background: linear-gradient(to right, transparent, var(--page-accent), transparent);
440 margin: 2em 0;
441}
442.pluma-doc table {
443 border-collapse: collapse;
444 width: 100%;
445 font-size: 0.95rem;
446}
447.pluma-doc th, .pluma-doc td {
448 padding: 0.55em 0.9em;
449 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
450 text-align: left;
451}
452.pluma-doc th {
453 color: var(--page-accent);
454 font-weight: 600;
455 letter-spacing: 0.04em;
456}
457.pluma-loading, .pluma-error {
458 display: flex;
459 align-items: center;
460 justify-content: center;
461 min-height: 30vh;
462 color: rgba(232, 234, 245, 0.55);
463 font-family: 'Cinzel', serif;
464 letter-spacing: 0.4em;
465 font-size: 0.9rem;
466}
467.pluma-loading::before {
468 content: "";
469 width: 28px;
470 height: 28px;
471 margin-right: 1rem;
472 border: 1px solid var(--page-accent);
473 border-top-color: transparent;
474 border-radius: 50%;
475 animation: pluma-spin 1s linear infinite;
476}
477.pluma-error { color: var(--fuego); font-style: italic; }
478@keyframes pluma-spin { to { transform: rotate(360deg); } }
479
480/* === Taskbar estilo Windows === */
481.taskbar {
482 position: fixed;
483 left: 0;
484 right: 0;
485 bottom: 0;
486 height: var(--taskbar-height);
487 z-index: 200;
488 display: flex;
489 align-items: center;
490 gap: 0.5rem;
491 padding: 0 0.8rem;
492 background: linear-gradient(to top, rgba(6, 5, 13, 0.94), rgba(8, 6, 22, 0.80));
493 backdrop-filter: blur(24px) saturate(140%);
494 -webkit-backdrop-filter: blur(24px) saturate(140%);
495 border-top: 1px solid rgba(216, 168, 93, 0.22);
496 box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.45);
497}
498
499.taskbar-home {
500 width: 40px;
501 height: 40px;
502 display: inline-flex;
503 align-items: center;
504 justify-content: center;
505 background: transparent;
506 border: 1px solid rgba(216, 168, 93, 0.32);
507 color: var(--gold);
508 border-radius: 9px;
509 cursor: pointer;
510 padding: 0;
511 transition: all 220ms var(--ease-emerge);
512}
513.taskbar-home:hover {
514 border-color: var(--gold);
515 background: rgba(216, 168, 93, 0.12);
516 box-shadow: 0 0 16px rgba(216, 168, 93, 0.35);
517 transform: translateY(-1px);
518}
519.taskbar-home-glyph {
520 width: 22px;
521 height: 22px;
522 filter: drop-shadow(0 0 6px currentColor);
523}
524
525.taskbar-brand {
526 font-family: 'Cinzel', serif;
527 font-weight: 700;
528 font-size: 1.30rem;
529 letter-spacing: 0.07em;
530 color: #f4eedf;
531 text-decoration: none;
532 text-shadow: 0 0 14px rgba(216, 168, 93, 0.45);
533 padding: 0 0.55rem;
534 user-select: none;
535 transition: text-shadow 220ms ease, color 220ms ease;
536 white-space: nowrap;
537}
538.taskbar-brand:hover {
539 color: #ffffff;
540 text-shadow: 0 0 20px rgba(216, 168, 93, 0.7), 0 0 36px rgba(245, 144, 86, 0.30);
541}
542.taskbar-brand .brand-dot {
543 color: var(--gold);
544 margin: 0 0.05em;
545}
546
547.taskbar-divider {
548 display: inline-block;
549 width: 1px;
550 height: 26px;
551 background: rgba(255, 255, 255, 0.12);
552 margin: 0 0.25rem;
553}
554
555.taskbar-list {
556 list-style: none;
557 margin: 0;
558 padding: 0;
559 display: flex;
560 gap: 0.4rem;
561 overflow-x: auto;
562 scrollbar-width: none;
563 -ms-overflow-style: none;
564}
565.taskbar-list::-webkit-scrollbar { display: none; }
566
567.taskbar-item {
568 height: 38px;
569 padding: 0 1.0rem;
570 display: inline-flex;
571 align-items: center;
572 gap: 0.55rem;
573 background: rgba(255, 255, 255, 0.04);
574 border: 1px solid rgba(255, 255, 255, 0.10);
575 border-radius: 9px;
576 color: var(--task-color, var(--fg));
577 font-family: 'Cinzel', serif;
578 font-size: 0.72rem;
579 letter-spacing: 0.36em;
580 text-indent: 0.36em;
581 font-weight: 600;
582 cursor: pointer;
583 transition: all 260ms var(--ease-emerge);
584 white-space: nowrap;
585}
586.taskbar-item:hover {
587 background: rgba(255, 255, 255, 0.09);
588 border-color: var(--task-color, currentColor);
589 transform: translateY(-1px);
590}
591.taskbar-item.active {
592 background: rgba(255, 255, 255, 0.11);
593 border-color: var(--task-color);
594 box-shadow:
595 0 0 18px var(--task-color),
596 inset 0 -2px 0 0 var(--task-color);
597}
598.taskbar-item-dot {
599 width: 8px;
600 height: 8px;
601 border-radius: 50%;
602 background: var(--task-color, var(--gold));
603 box-shadow: 0 0 8px currentColor;
604}
605.taskbar-item[data-task="aire"] { --task-color: var(--aire); }
606.taskbar-item[data-task="fuego"] { --task-color: var(--fuego); }
607.taskbar-item[data-task="tierra"] { --task-color: var(--tierra); }
608.taskbar-item[data-task="agua"] { --task-color: var(--agua); }
609
610.taskbar-spacer {
611 flex: 1;
612 min-width: 0.6rem;
613}
614
615.taskbar-credit {
616 display: inline-flex;
617 align-items: center;
618 gap: 0.4rem;
619 font-family: 'Inter', sans-serif;
620 font-size: 0.78rem;
621 letter-spacing: 0.04em;
622 color: rgba(216, 168, 93, 0.75);
623 text-decoration: none;
624 padding: 0.35rem 0.7rem;
625 border-radius: 8px;
626 border: 1px solid transparent;
627 transition: all 220ms var(--ease-emerge);
628 white-space: nowrap;
629}
630.taskbar-credit:hover {
631 color: var(--gold);
632 border-color: rgba(216, 168, 93, 0.25);
633 background: rgba(216, 168, 93, 0.06);
634}
635.copyleft-mark {
636 display: inline-block;
637 font-size: 1rem;
638 /* © con escala horizontal -1 = copyleft visual. */
639 transform: scaleX(-1);
640 color: currentColor;
641}
642
643@media (max-width: 720px) {
644 .tip { min-width: 110px; padding: 0.7rem 0.9rem; }
645 .tip-glyph { width: 36px; height: 36px; }
646 .tip-label { font-size: 0.72rem; }
647 .tip-sub { display: none; }
648 .page-head { padding: 5vh 5vw 1vh; }
649 .page-content { padding: 0 5vw 5vh; }
650 .taskbar { height: 46px; padding: 0 0.4rem; gap: 0.3rem; }
651 .taskbar-home { width: 36px; height: 36px; }
652 .taskbar-item { height: 34px; padding: 0 0.7rem; font-size: 0.65rem; }
653 .taskbar-brand { font-size: 1.05rem; padding: 0 0.3rem; }
654 .taskbar-credit-text { display: none; }
655 .deck { bottom: 46px; }
656 :root { --taskbar-height: 46px; }
657}