start

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
start [2026/06/11 21:16] – jumpstartadminstart [2026/06/11 21:28] (current) – jumpstartadmin
Line 57: Line 57:
 .js-card:hover .js-overlay { opacity: 0.3; } .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: 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-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: 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); } .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); }
Line 97: Line 97:
 } }
  
-.js-title-sub { font-family: 'Forevs', serif; font-weight: normal; font-size: 3em; 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: 8em; 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; } .js-title-divider { display: flex; align-items: center; gap: 10px; margin-top: 4px; animation: fadeIn 0.6s ease 1s both; }
Line 161: Line 161:
 .js-card.js-fading .js-rgb-canvas { .js-card.js-fading .js-rgb-canvas {
     opacity: 1;     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;
 } }
  
Line 313: Line 336:
     const cards = document.querySelectorAll('.js-card');     const cards = document.querySelectorAll('.js-card');
     const wrap = document.querySelector('.js-wrap');     const wrap = document.querySelector('.js-wrap');
-    const titleBg = document.querySelector('.js-title-bg'); 
     const titleEl = document.querySelector('.js-title-main');     const titleEl = document.querySelector('.js-title-main');
     let activeCard = null;     let activeCard = null;
Line 370: Line 392:
  
     function isTitleZone(e) {     function isTitleZone(e) {
-        if (!titleBg) return false; +        const sub = document.querySelector('.js-title-sub'); 
-        const rect = titleBg.getBoundingClientRect(); +        const main = document.querySelector('.js-title-main'); 
-        return e.clientX >= rect.left && e.clientX <= rect.right && +        const divider = document.querySelector('.js-title-divider'); 
-               e.clientY >= rect.top && e.clientY <= rect.bottom;+        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;
     }     }
  
Line 379: Line 407:
         if (!titleEl) return;         if (!titleEl) return;
         if (on) {         if (on) {
-            titleEl.style.textShadow = '0 0 100px rgba(107,79,187,1), 0 0 40px rgba(184,173,219,0.9), 0 0 15px rgba(255,255,255,0.5), 0 4px 15px rgba(0,0,0,0.9)';+            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 {         } else {
 +            titleEl.style.transition = 'text-shadow 0.3s ease, color 0.3s ease';
             titleEl.style.textShadow = '';             titleEl.style.textShadow = '';
 +            titleEl.style.color = '';
         }         }
     }     }
Line 389: Line 421:
         activeCard = hoveredCard;         activeCard = hoveredCard;
         setTitleGlow(false);         setTitleGlow(false);
 +        wrap.classList.remove('js-title-active');
         cards.forEach(card => {         cards.forEach(card => {
             if (card !== hoveredCard) {             if (card !== hoveredCard) {
Line 402: Line 435:
         activeCard = null;         activeCard = null;
         setTitleGlow(false);         setTitleGlow(false);
 +        wrap.classList.remove('js-title-active');
         cards.forEach(card => card.classList.remove('js-fading'));         cards.forEach(card => card.classList.remove('js-fading'));
     }     }
Line 408: Line 442:
         activeCard = 'title';         activeCard = 'title';
         setTitleGlow(true);         setTitleGlow(true);
 +        wrap.classList.add('js-title-active');
         cards.forEach(card => card.classList.remove('js-fading'));         cards.forEach(card => card.classList.remove('js-fading'));
     }     }
  • start.1781212581.txt.gz
  • Last modified: 2026/06/11 21:16
  • by jumpstartadmin