Differences

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

--- start [2026/06/11 07:58] – 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 over entire grid */
+/* Scanline overlay */
 .js-wrap::after {
     content: '';
@@ Line 20: / Line 33: @@
         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%);
 }
@@ Line 35: / Line 60: @@
 .js-card:hover .js-label { top: 88%; transform: translateY(-50%); letter-spacing: 6px; color: #ffffff; }
-/* Center frame border at intersection */
-.js-center-frame {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 340px;
-    height: 160px;
-    z-index: 1001;
-    pointer-events: none;
-    animation: fadeIn 0.6s ease 1s both;
-}
-.js-center-frame::before,
-.js-center-frame::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border: 1px solid rgba(184,173,219,0.25);
-    border-radius: 2px;
-}
-.js-center-frame::after {
-    inset: -4px;
-    border-color: rgba(107,79,187,0.2);
-    border-radius: 3px;
-}
-/* Corner accents */
-.js-corner {
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    border-color: rgba(184,173,219,0.8);
-    border-style: solid;
-    animation: fadeIn 0.4s ease 1.2s both;
-}
-.js-corner.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
-.js-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
-.js-corner.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
-.js-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
 /* Dark vignette behind title */
@@ Line 84: / Line 67: @@
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 500px;
+    width: 600px;
-    height: 250px;
+    height: 300px;
     z-index: 1000;
     pointer-events: none;
-    background: radial-gradient(ellipse at center, rgba(10,6,26,0.85) 0%, rgba(10,6,26,0.5) 50%, transparent 75%);
+    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 */
+/* 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: 1002;
     pointer-events: none;
@@ Line 122: / Line 105: @@
 .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); }
-/* Particle canvas */
+/* Particle canvas — full viewport */
-#js-particles { position: fixed; top: 50px; left: 0; width: 100vw; height: calc(100vh - 50px); z-index: 1001; pointer-events: none; }
+#js-particles { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1001; pointer-events: none; }
 @keyframes revealUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@@ Line 139: / Line 122: @@
 </style>
-<!-- Vignette behind title -->
 <div class="js-title-bg"></div>
-<!-- Center frame -->
-<div class="js-center-frame">
-    <div class="js-corner tl"></div>
-    <div class="js-corner tr"></div>
-    <div class="js-corner bl"></div>
-    <div class="js-corner br"></div>
-</div>
-<!-- Title -->
 <div class="js-title">
     <div class="js-title-sub">Movement Wiki</div>
@@ Line 161: / Line 134: @@
 </div>
-<!-- Particle canvas -->
 <canvas id="js-particles"></canvas>
@@ Line 201: / Line 173: @@
 <script>
-// Particle system
 const canvas = document.getElementById('js-particles');
 const ctx = canvas.getContext('2d');
@@ Line 209: / Line 180: @@
 const cx = canvas.width / 2;
 const cy = canvas.height / 2;
 const particles = [];