Differences

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

--- start [2026/06/11 07:58] – jumpstartadmin
+++ start [2026/06/11 21:28] (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 32: / Line 57: @@
 .js-card:hover .js-overlay { opacity: 0.3; }
-.js-label { position: absolute; left: 0; width: 100%; z-index: 3; padding: 16px; font-family: 'Forevs', serif; font-size: 1.8em; color: #EDE8F5; letter-spacing: 4px; text-align: center; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,0.9); top: 50%; transform: translateY(-50%); transition: top 0.35s ease, transform 0.35s ease, letter-spacing 0.35s ease, color 0.35s ease; }
+.js-label { position: absolute; left: 0; width: 100%; z-index: 3; padding: 16px; font-family: 'Forevs', serif; font-size: 2.7em; color: rgba(237,232,245,0.85); letter-spacing: 6px; text-align: center; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 -1px 0 rgba(255,255,255,0.05); top: 50%; transform: translateY(-50%); transition: top 0.35s ease, transform 0.35s ease, letter-spacing 0.4s ease, color 0.4s ease, text-shadow 0.4s ease, opacity 0.4s ease; opacity: 0.7; }
-.js-card:hover .js-label { top: 88%; transform: translateY(-50%); letter-spacing: 6px; color: #ffffff; }
+.js-card:hover .js-label { top: 88%; transform: translateY(-50%); letter-spacing: 10px; color: #ffffff; opacity: 1; text-shadow: 0 0 1px rgba(255,255,255,0.9), 0 0 2px rgba(255,255,255,0.5), 1px 1px 0 rgba(0,0,0,1), -1px -1px 0 rgba(0,0,0,1), 1px -1px 0 rgba(0,0,0,1), -1px 1px 0 rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(255,255,255,0.1); filter: contrast(1.2) brightness(1.1); }
-/* 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: 1100px;
-    height: 250px;
+    height: 550px;
     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 114: / Line 97: @@
 }
-.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; }
+.js-title-sub { font-family: 'Forevs', serif; font-weight: normal; font-size: 3.2em; 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; }
-.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-main { font-family: 'Forevs', serif; font-weight: bold; font-size: 8.2em; 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-divider { display: flex; align-items: center; gap: 10px; margin-top: 4px; animation: fadeIn 0.6s ease 1s both; }
@@ 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 137: / Line 120: @@
 .js-card:nth-child(3) { animation: fadeUp 0.6s 0.35s ease both; }
 .js-card:nth-child(4) { animation: fadeUp 0.6s 0.45s ease both; }
+/* VHS chromatic aberration — JS controlled */
+.js-card {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    text-decoration: none;
+    transition: filter 0.25s ease !important;
+}
+.js-card.js-fading {
+    filter: saturate(0.55) brightness(0.92) !important;
+}
+/* Scanline overlay on fading cards */
+.js-card.js-fading::after {
+    content: '' !important;
+    position: absolute !important;
+    inset: 0 !important;
+    z-index: 12 !important;
+    pointer-events: none !important;
+    background: repeating-linear-gradient(
+deg,
+        transparent 0px,
+        transparent 3px,
+        rgba(0, 0, 0, 0.08) 3px,
+        rgba(0, 0, 0, 0.08) 4px
+    ) !important;
+}
+/* RGB canvas overlay */
+.js-rgb-canvas {
+    position: absolute;
+    inset: 0;
+    z-index: 11;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.6s ease;
+}
+.js-card.js-fading .js-rgb-canvas {
+    opacity: 1;
+}
+/* Block card hover effects when title zone is active */
+.js-wrap.js-title-active .js-card:hover video {
+    transform: scale(1) !important;
+    filter: brightness(0.6) saturate(0.8) !important;
+}
+.js-wrap.js-title-active .js-card:hover .js-overlay {
+    opacity: 1 !important;
+}
+.js-wrap.js-title-active .js-card:hover .js-label {
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    letter-spacing: 4px !important;
+    color: #EDE8F5 !important;
+    text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 -1px 0 rgba(255,255,255,0.05) !important;
+    opacity: 0.7 !important;
+}
+.js-wrap.js-title-active .js-card:hover .js-label::before {
+    transform: translateX(-50%) scaleX(0) !important;
+}
+.js-wrap.js-title-active .js-card:hover .js-label::after {
+    opacity: 0 !important;
+}
+/* Etched label underline */
+.js-label::before {
+    content: '';
+    position: absolute;
+    bottom: 6px;
+    left: 50%;
+    transform: translateX(-50%) scaleX(0);
+    width: 80%;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
+    transition: transform 0.4s ease;
+}
+.js-card:hover .js-label::before {
+    transform: translateX(-50%) scaleX(1);
+}
+/* Film grain overlay on label hover */
+.js-label::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: repeating-linear-gradient(
+deg,
+        transparent,
+        transparent 2px,
+        rgba(0,0,0,0.08) 2px,
+        rgba(0,0,0,0.08) 3px
+    );
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+.js-card:hover .js-label::after {
+    opacity: 1;
+}
 </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 235: @@
 </div>
-<!-- Particle canvas -->
 <canvas id="js-particles"></canvas>
@@ Line 201: / Line 274: @@
 <script>
-// Particle system
 const canvas = document.getElementById('js-particles');
 const ctx = canvas.getContext('2d');
@@ Line 209: / Line 281: @@
 const cx = canvas.width / 2;
 const cy = canvas.height / 2;
 const particles = [];
@@ Line 258: / Line 329: @@
     canvas.height = window.innerHeight;
 });
+</script>
+<script>
+// VHS RGB chromatic aberration using canvas
+(function() {
+    const cards = document.querySelectorAll('.js-card');
+    const wrap = document.querySelector('.js-wrap');
+    const titleEl = document.querySelector('.js-title-main');
+    let activeCard = null;
+    let fadeTimeout = null;
+    const canvases = new Map();
+    const animFrames = new Map();
+    // Create a canvas overlay for each card
+    cards.forEach(card => {
+        const canvas = document.createElement('canvas');
+        canvas.className = 'js-rgb-canvas';
+        card.appendChild(canvas);
+        canvases.set(card, canvas);
+    });
+    function drawRGB(card) {
+        const canvas = canvases.get(card);
+        const video = card.querySelector('video');
+        if (!video || !canvas) return;
+        const w = card.offsetWidth;
+        const h = card.offsetHeight;
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext('2d');
+        function frame() {
+            if (!card.classList.contains('js-fading')) {
+                ctx.clearRect(0, 0, w, h);
+                animFrames.delete(card);
+                return;
+            }
+            ctx.clearRect(0, 0, w, h);
+            ctx.save();
+            ctx.globalCompositeOperation = 'screen';
+            ctx.globalAlpha = 0.18;
+            ctx.filter = 'saturate(4) hue-rotate(-20deg)';
+            ctx.drawImage(video, 4, 0, w, h);
+            ctx.restore();
+            ctx.save();
+            ctx.globalCompositeOperation = 'screen';
+            ctx.globalAlpha = 0.14;
+            ctx.filter = 'saturate(4) hue-rotate(160deg)';
+            ctx.drawImage(video, -4, 0, w, h);
+            ctx.restore();
+            animFrames.set(card, requestAnimationFrame(frame));
+        }
+        if (!animFrames.has(card)) {
+            animFrames.set(card, requestAnimationFrame(frame));
+        }
+    }
+    function isTitleZone(e) {
+        const sub = document.querySelector('.js-title-sub');
+        const main = document.querySelector('.js-title-main');
+        const divider = document.querySelector('.js-title-divider');
+        if (!sub || !main) return false;
+        const top = sub.getBoundingClientRect().top - 20;
+        const bottom = (divider || main).getBoundingClientRect().bottom + 20;
+        const left = main.getBoundingClientRect().left - 40;
+        const right = main.getBoundingClientRect().right + 40;
+        return e.clientX >= left && e.clientX <= right &&
+               e.clientY >= top && e.clientY <= bottom;
+    }
+    function setTitleGlow(on) {
+        if (!titleEl) return;
+        if (on) {
+            titleEl.style.transition = 'text-shadow 0.3s ease';
+            titleEl.style.textShadow = '0 0 120px rgba(184,173,219,1), 0 0 60px rgba(107,79,187,1), 0 0 25px rgba(255,255,255,0.8), 0 4px 15px rgba(0,0,0,0.9)';
+            titleEl.style.color = '#ffffff';
+        } else {
+            titleEl.style.transition = 'text-shadow 0.3s ease, color 0.3s ease';
+            titleEl.style.textShadow = '';
+            titleEl.style.color = '';
+        }
+    }
+    function setFading(hoveredCard) {
+        if (activeCard === hoveredCard) return;
+        activeCard = hoveredCard;
+        setTitleGlow(false);
+        wrap.classList.remove('js-title-active');
+        cards.forEach(card => {
+            if (card !== hoveredCard) {
+                card.classList.add('js-fading');
+                drawRGB(card);
+            } else {
+                card.classList.remove('js-fading');
+            }
+        });
+    }
+    function clearFading() {
+        activeCard = null;
+        setTitleGlow(false);
+        wrap.classList.remove('js-title-active');
+        cards.forEach(card => card.classList.remove('js-fading'));
+    }
+    function enterTitleZone() {
+        activeCard = 'title';
+        setTitleGlow(true);
+        wrap.classList.add('js-title-active');
+        cards.forEach(card => card.classList.remove('js-fading'));
+    }
+    wrap.addEventListener('mousemove', function(e) {
+        if (isTitleZone(e)) {
+            clearTimeout(fadeTimeout);
+            if (activeCard !== 'title') enterTitleZone();
+            return;
+        }
+        // Find which card the mouse is over
+        let overCard = null;
+        cards.forEach(card => {
+            const rect = card.getBoundingClientRect();
+            if (e.clientX >= rect.left && e.clientX <= rect.right &&
+                e.clientY >= rect.top && e.clientY <= rect.bottom) {
+                overCard = card;
+            }
+        });
+        if (overCard) {
+            clearTimeout(fadeTimeout);
+            setFading(overCard);
+        }
+    });
+    wrap.addEventListener('mouseleave', function() {
+        clearTimeout(fadeTimeout);
+        fadeTimeout = setTimeout(clearFading, 150);
+    });
+})();
 </script>
 </html>