Differences

This shows you the differences between two versions of the page.

--- start [2026/06/11 07:50] – jumpstartadmin
+++ start [2026/06/11 08:33] (current) – jumpstartadmin
@@ Line 4: / Line 4: @@
 @font-face { font-family: 'Forevs'; src: url('/wiki/lib/tpl/bootstrap3/fonts/ForevsDemo-Bold.otf') format('opentype'); font-weight: bold; }
-.js-wrap { position: fixed; top: 50px; left: 0; width: 100vw; height: calc(100vh - 50px); z-index: 999; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, calc(50vh - 25px)); gap: 4px; background: #120F29; }
+/* Grid fills full viewport — navbar floats over it */
+.js-wrap {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 50vh);
+    gap: 4px;
+    background: #120F29;
+}
+/* Scanline overlay */
+.js-wrap::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 100;
+    pointer-events: none;
+    background: repeating-linear-gradient(
+        to bottom,
+        rgba(0,0,0,0.03) 0px,
+        rgba(0,0,0,0.03) 1px,
+        transparent 1px,
+        transparent 3px
+    );
+}
+/* Edge vignette */
+.js-wrap::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 101;
+    pointer-events: none;
+    background:
+        linear-gradient(to right, rgba(10,6,26,0.7) 0%, transparent 12%, transparent 88%, rgba(10,6,26,0.7) 100%),
+        linear-gradient(to bottom, rgba(10,6,26,0.7) 0%, transparent 12%, transparent 88%, rgba(10,6,26,0.7) 100%);
+}
 .js-card { position: relative; display: block; overflow: hidden; text-decoration: none; }
@@ Line 20: / Line 61: @@
 .js-card:hover .js-label { top: 88%; transform: translateY(-50%); letter-spacing: 6px; color: #ffffff; }
-/* Title — fixed dead center of the full grid */
+/* Dark vignette behind title */
+.js-title-bg {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    height: 300px;
+    z-index: 1000;
+    pointer-events: none;
+    background: radial-gradient(ellipse at center, rgba(10,6,26,0.92) 0%, rgba(10,6,26,0.6) 45%, transparent 70%);
+    animation: fadeIn 0.8s ease 0.2s both;
+}
+/* Title — centered in full viewport */
 .js-title {
     position: fixed;
-    top: 50px;
+    top: 0;
     left: 0;
     width: 100vw;
-    height: calc(100vh - 50px);
+    height: 100vh;
-    z-index: 1000;
+    z-index: 1002;
     pointer-events: none;
     display: flex;
@@ Line 33: / Line 88: @@
     align-items: center;
     justify-content: center;
-    gap: 6px;
+    gap: 4px;
+    animation: floatY 4s ease-in-out infinite;
 }
-/* Clip reveal container */
+@keyframes floatY {
-.js-title-top-wrap {
+%, 100% { transform: translateY(0px); }
-    overflow: hidden;
+% { transform: translateY(-8px); }
-    padding: 4px 0;
 }
-.js-title-bottom-wrap {
+.js-title-sub { font-family: 'Forevs', serif; font-weight: normal; font-size: 0.75em; letter-spacing: 10px; text-transform: uppercase; color: rgba(184,173,219,0.9); text-shadow: 0 2px 10px rgba(0,0,0,0.9); animation: revealUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
-    overflow: hidden;
-    padding: 2px 0;
-}
-/* JUMPSTART */
+.js-title-main { font-family: 'Forevs', serif; font-weight: bold; font-size: 3.5em; letter-spacing: 8px; text-transform: uppercase; color: #EDE8F5; line-height: 1; text-shadow: 0 0 60px rgba(107,79,187,0.9), 0 0 20px rgba(107,79,187,0.5), 0 4px 15px rgba(0,0,0,0.9); animation: revealUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s both, glowPulse 4s 1.5s ease-in-out infinite; }
-.js-title-top {
-    font-family: 'Forevs', serif;
-    font-weight: bold;
-    font-size: 2.2em;
-    letter-spacing: 18px;
-    text-transform: uppercase;
-    color: #EDE8F5;
-    text-shadow: 0 0 40px rgba(107,79,187,0.9), 0 2px 10px rgba(0,0,0,0.9);
-    animation: revealUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both, glowPulse 3s 1.5s ease-in-out infinite;
-    display: block;
-}
-/* MOVEMENT WIKI */
+.js-title-divider { display: flex; align-items: center; gap: 10px; margin-top: 4px; animation: fadeIn 0.6s ease 1s both; }
-.js-title-bottom {
+.js-title-divider-line { height: 1px; width: 100px; background: linear-gradient(to right, transparent, rgba(184,173,219,0.6), transparent); }
-    font-family: 'Forevs', serif;
+.js-title-divider-diamond { width: 5px; height: 5px; background: rgba(184,173,219,0.9); transform: rotate(45deg); box-shadow: 0 0 6px rgba(184,173,219,0.8); }
-    font-weight: normal;
-    font-size: 0.9em;
-    letter-spacing: 12px;
-    text-transform: uppercase;
-    color: rgba(184,173,219,0.85);
-    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
-    animation: revealUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
-    display: block;
-}
-/* Horizontal line that sweeps in */
+/* Particle canvas — full viewport */
-.js-title-line-wrap {
+#js-particles { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1001; pointer-events: none; }
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    animation: fadeIn 0.6s ease 0.9s both;
-}
-.js-title-line {
-    height: 1px;
-    background: linear-gradient(to right, transparent, rgba(184,173,219,0.7), transparent);
-    animation: expandLine 1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
-    width: 120px;
-}
-.js-title-diamond {
-    width: 5px;
-    height: 5px;
-    background: rgba(184,173,219,0.8);
-    transform: rotate(45deg);
-    animation: fadeIn 0.4s ease 1.3s both;
-}
-@keyframes revealUp {
-    from { opacity: 0; transform: translateY(30px) skewY(2deg); }
-    to { opacity: 1; transform: translateY(0) skewY(0deg); }
-}
-@keyframes expandLine {
-    from { width: 0; }
-    to { width: 120px; }
-}
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
+@keyframes revealUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 @keyframes glowPulse {
-%, 100% { text-shadow: 0 0 40px rgba(107,79,187,0.9), 0 2px 10px rgba(0,0,0,0.9); }
+%, 100% { text-shadow: 0 0 60px rgba(107,79,187,0.9), 0 0 20px rgba(107,79,187,0.5), 0 4px 15px rgba(0,0,0,0.9); }
-% { text-shadow: 0 0 70px rgba(107,79,187,1), 0 0 30px rgba(184,173,219,0.6), 0 2px 10px rgba(0,0,0,0.9); }
+% { text-shadow: 0 0 90px rgba(107,79,187,1), 0 0 40px rgba(184,173,219,0.5), 0 4px 15px rgba(0,0,0,0.9); }
 }
 @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@@ Line 123: / Line 121: @@
 .js-card:nth-child(4) { animation: fadeUp 0.6s 0.45s ease both; }
 </style>
+<div class="js-title-bg"></div>
 <div class="js-title">
-    <div class="js-title-line-wrap">
+    <div class="js-title-sub">Movement Wiki</div>
-        <div class="js-title-line"></div>
+    <div class="js-title-main">JumpStart</div>
-        <div class="js-title-diamond"></div>
+    <div class="js-title-divider">
-        <div class="js-title-line"></div>
+        <div class="js-title-divider-line"></div>
-    </div>
+        <div class="js-title-divider-diamond"></div>
-    <div class="js-title-top-wrap">
+        <div class="js-title-divider-line"></div>
-        <span class="js-title-top">JumpStart</span>
-    </div>
-    <div class="js-title-bottom-wrap">
-        <span class="js-title-bottom">Movement Wiki</span>
-    </div>
-    <div class="js-title-line-wrap">
-        <div class="js-title-line"></div>
-        <div class="js-title-diamond"></div>
-        <div class="js-title-line"></div>
     </div>
 </div>
+<canvas id="js-particles"></canvas>
 <div class="js-wrap">
@@ Line 178: / Line 171: @@
 </div>
+<script>
+const canvas = document.getElementById('js-particles');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+const cx = canvas.width / 2;
+const cy = canvas.height / 2;
+const particles = [];
+function randomRange(a, b) { return a + Math.random() * (b - a); }
+for (let i = 0; i < 60; i++) {
+    particles.push({
+        x: cx + randomRange(-180, 180),
+        y: cy + randomRange(-80, 80),
+        vx: randomRange(-0.3, 0.3),
+        vy: randomRange(-0.8, -0.2),
+        size: randomRange(1, 2.5),
+        alpha: randomRange(0.4, 1),
+        fade: randomRange(0.003, 0.008),
+        color: Math.random() > 0.5 ? '184,173,219' : '107,79,187'
+    });
+}
+function resetParticle(p) {
+    p.x = cx + randomRange(-180, 180);
+    p.y = cy + randomRange(-80, 80);
+    p.vx = randomRange(-0.3, 0.3);
+    p.vy = randomRange(-0.8, -0.2);
+    p.alpha = randomRange(0.4, 1);
+    p.size = randomRange(1, 2.5);
+    p.fade = randomRange(0.003, 0.008);
+}
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    particles.forEach(p => {
+        p.x += p.vx;
+        p.y += p.vy;
+        p.alpha -= p.fade;
+        if (p.alpha <= 0) resetParticle(p);
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(${p.color},${p.alpha})`;
+        ctx.fill();
+    });
+    requestAnimationFrame(draw);
+}
+draw();
+window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+});
+</script>
 </html>