/* --- GLOBAL STYLES & RESETS --- */ :root { /* Colors - Modern Minimalist Tech Palette */ --bg-primary: #0a0a0a; /* Very dark black */ --bg-secondary: #111111; /* Dark charcoal */ --bg-card: #1a1a1a; /* Slightly lighter dark */ --accent-primary: #00d4ff; /* Electric cyan/blue */ --accent-secondary: #00ffff; /* Bright cyan */ --text-primary: #f4f4f4; /* Off-white */ --text-secondary: #a0a0a0; /* Medium gray */ --border-color: #2a2a2a; /* Dark gray */ /* Legacy variables for compatibility */ --primary-color: #00d4ff; --secondary-color: #f4f4f4; --color-info: #00ffff; --glow-color: rgba(0, 212, 255, 0.6); /* Fonts - Modern Sans-Serif */ --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'Inter', monospace; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #0a0a0a; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--primary-color), var(--color-info)); border-radius: 10px; border: 3px solid #0a0a0a; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, var(--color-info), var(--primary-color)); } h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; color: var(--primary-color); text-shadow: 0 0 10px rgba(0, 240, 255, 0.7); font-weight: 700; } /* Enhanced headings with cyber security styling */ h1 { font-size: 3.4rem !important; letter-spacing: 1px; position: relative; z-index: 30; /* Ensure h1 titles are always visible */ } h2 { font-size: 2.4rem !important; letter-spacing: 0.5px; position: relative; z-index: 30; /* Ensure h2 titles are always visible */ } h3 { font-size: 1.7rem !important; letter-spacing: 0.5px; position: relative; z-index: 30; /* Ensure h3 titles are always visible */ } h4 { font-size: 1.3rem !important; letter-spacing: 0.3px; } * { box-sizing: border-box; margin: 0; padding: 0; max-width: 100%; /* Prevent any element from exceeding viewport width */ } /* Specific exceptions for elements that need to exceed 100% width */ .ticker, .ticker-wrap, .sparkle-container, #terminal-background, .matrix-bg { max-width: none; } /* Ultimate scrollbar elimination - apply to everything */ *, *::before, *::after { scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* Internet Explorer 10+ */ } *::-webkit-scrollbar, *::before::-webkit-scrollbar, *::after::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } /* Force overflow hidden on problematic elements (except exchange-section for scroll) */ .features-section, .tokens-section, .how-it-works-section, .stats-section, .intro-section, .community-section, .dex-mechanism-section, .lp-section { overflow: visible !important; } /* Exchange section needs visible overflow for proper scroll */ .exchange-section { overflow: visible !important; } /* Make all sections transparent except HERO to show animated background */ .exchange-section, .tokens-section, .pinche-token-section, .economy-section, .magic-loop-section, .chucho-meme-section, .contact-section, .community-section { background: transparent !important; } /* Ensure section containers are transparent */ .section-container { background: transparent !important; } /* Remove any background gradients or effects from sections */ .tokens-section::before, .economy-section::before, .magic-loop-section::before, .chucho-meme-section::before, .contact-section::before, .community-section::before { background: transparent !important; } /* HYPER REALISTIC CRT SCANLINES - Economy Section */ .economy-section::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: /* Ultra-detailed CRT scanlines */ repeating-linear-gradient( 0deg, transparent 0px, rgba(0, 255, 0, 0.04) 0px, rgba(0, 255, 0, 0.10) 1px, rgba(0, 255, 0, 0.04) 2px, transparent 2px, transparent 3px, rgba(255, 100, 0, 0.02) 3px, rgba(255, 100, 0, 0.05) 4px, rgba(255, 100, 0, 0.02) 5px, transparent 5px ), /* Realistic phosphor persistence */ linear-gradient( 0deg, rgba(0, 255, 0, 0.02) 0%, rgba(0, 255, 0, 0.01) 50%, transparent 100% ); background-size: 100% 5px, 100% 5px; animation: hyperRealisticEconomyScan 0.0833s linear infinite; /* 12fps for authentic CRT feel */ filter: blur(0.5px) contrast(1.4) saturate(1.2); pointer-events: none; z-index: -2; opacity: 0.8; mix-blend-mode: screen; } /* HYPER REALISTIC CRT SCANLINES - Terminal Background */ #terminal-background::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: /* Primary scanlines - ultra fine */ repeating-linear-gradient( 0deg, transparent 0px, rgba(0, 255, 0, 0.08) 0px, rgba(0, 255, 0, 0.08) 1px, transparent 1px, transparent 2px, rgba(0, 200, 255, 0.03) 2px, rgba(0, 200, 255, 0.03) 3px, transparent 3px ), /* Secondary glow effect */ radial-gradient( ellipse 100% 1px at 50% 50%, rgba(0, 255, 0, 0.04) 0%, transparent 50%, transparent 100% ); background-size: 100% 3px, 100% 3px; animation: hyperRealisticScanlines 0.0167s linear infinite; /* 60fps */ filter: blur(0.3px) contrast(1.2); pointer-events: none; z-index: -3; opacity: 0.9; mix-blend-mode: screen; } /* HYPER REALISTIC VERTICAL SCANLINES */ #terminal-background::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: /* Vertical phosphor trails */ repeating-linear-gradient( 90deg, transparent 0px, rgba(0, 255, 0, 0.02) 0px, rgba(0, 255, 0, 0.02) 1px, transparent 1px, transparent 4px, rgba(255, 0, 200, 0.01) 4px, rgba(255, 0, 200, 0.01) 5px, transparent 5px ), /* Horizontal interference lines */ repeating-linear-gradient( 0deg, transparent 0px, rgba(0, 255, 0, 0.01) 0px, rgba(0, 255, 0, 0.01) 1px, transparent 1px, transparent 8px ); background-size: 5px 100%, 100% 8px; animation: hyperRealisticVerticalScan 0.025s linear infinite, hyperRealisticInterference 0.2s ease-in-out infinite alternate; filter: blur(0.2px) brightness(1.1); pointer-events: none; z-index: -3; opacity: 0.7; mix-blend-mode: overlay; } /* HYPER REALISTIC CRT SCANLINES - How It Works Section */ .how-it-works-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: /* Ultra-realistic CRT scanlines */ repeating-linear-gradient( 0deg, transparent 0px, rgba(57, 255, 20, 0.06) 0px, rgba(57, 255, 20, 0.12) 1px, rgba(57, 255, 20, 0.06) 2px, transparent 2px, transparent 4px, rgba(0, 247, 255, 0.04) 4px, rgba(0, 247, 255, 0.08) 5px, rgba(0, 247, 255, 0.04) 6px, transparent 6px ), /* Phosphor glow effect */ radial-gradient( ellipse 100% 2px at 50% 50%, rgba(57, 255, 20, 0.03) 0%, rgba(0, 247, 255, 0.02) 30%, transparent 70% ); background-size: 100% 6px, 100% 6px; animation: hyperRealisticProcessScan 0.1s linear infinite, phosphorFlicker 2s ease-in-out infinite; filter: blur(0.4px) contrast(1.3) brightness(1.1); pointer-events: none; z-index: -2; opacity: 0.85; mix-blend-mode: screen; } /* Ensure all cards are transparent */ .feature-card, .content-card, .token-card, .protocol-card, .stat-card { background: transparent !important; } /* Remove any card background effects */ .feature-card::before, .content-card::before, .token-card::before, .protocol-card::before, .stat-card::before { background: transparent !important; } /* Make all cards and containers with dark backgrounds transparent */ .meaning-item.flag-country, .duality-section .condensed-token-card, .presale-card, .chucho-card, .compact-chucho-card, .pinche-token-description, .content-card.chucho-card, .chucho-card-header, .meaning-item { background: transparent !important; } /* Remove dark backgrounds from specific elements */ .meaning-item.flag-country::before, .chucho-card::before, .compact-chucho-card::before, .presale-card::before, .meaning-headers, .connection-item, .feature-card { background: transparent !important; } /* ======================================== 💻 RETRO 80s TERMINAL EFFECT 💻 Classic green phosphor terminal look ======================================== */ .retro-terminal-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; opacity: 0.12; background: /* Horizontal scanlines */ linear-gradient(transparent 50%, rgba(57, 255, 20, 0.04) 50%), /* Vertical phosphor lines */ linear-gradient(90deg, transparent 98%, rgba(57, 255, 20, 0.02) 100%); background-size: 100% 2px, 2px 100%; animation: retroScanlines 0.08s linear infinite; } @keyframes retroScanlines { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 2px, 1px 0; } } .terminal-prompt { position: absolute; font-family: 'Courier New', monospace; font-size: 14px; color: #39ff14; text-shadow: 0 0 5px #39ff14; opacity: 0.7; animation: terminalFlicker 3s ease-in-out infinite; } @keyframes terminalFlicker { 0%, 90% { opacity: 0.7; } 5%, 15% { opacity: 0.4; } 95% { opacity: 0.8; } } /* ======================================== 📺 ENHANCED RETRO BLUE HOLOGRAM EFFECT 📺 Advanced pixelated blue hologram with realistic TV interference ======================================== */ /* Token name colors */ .token-pinche, .text-pinche { color: #00ff00; /* Bright green */ text-shadow: 0 0 8px rgba(0, 255, 0, 0.6); font-weight: 700; } .token-chucho, .text-chucho { color: #00a1ff; /* Bright blue */ text-shadow: 0 0 8px rgba(0, 161, 255, 0.6); font-weight: 700; } /* Token name colors */ .token-pinche { color: #00ff00; /* Bright green */ text-shadow: 0 0 8px rgba(0, 255, 0, 0.6); } .token-chucho { color: #00a1ff; /* Bright blue */ text-shadow: 0 0 8px rgba(0, 161, 255, 0.6); } .section-heading { position: relative; overflow: visible !important; color: rgba(120, 220, 255, 0.9); text-shadow: 0 0 5px rgba(120, 220, 255, 1), 0 0 12px rgba(120, 220, 255, 0.8), 0 0 25px rgba(120, 220, 255, 0.6), 0 0 40px rgba(120, 220, 255, 0.4), 0 0 60px rgba(80, 180, 255, 0.3); filter: contrast(1.3) brightness(1.2) saturate(1.2); animation: tv-hologram-flicker 0.15s linear infinite, hologram-drift 10s ease-in-out infinite, chromatic-aberration 0.3s linear infinite; background: repeating-linear-gradient(0deg, transparent 0px, rgba(120, 220, 255, 0.01) 1px, transparent 2px, transparent 4px); background-size: 100% 4px; } /* Enhanced TV Frequency Bars with Noise */ .section-heading::before { content: ''; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background: /* Horizontal scan lines - Lighter */ repeating-linear-gradient(0deg, transparent 0px, rgba(120, 220, 255, 0.05) 1px, rgba(120, 220, 255, 0.08) 2px, rgba(120, 220, 255, 0.03) 3px, transparent 4px, transparent 6px), /* Vertical interference - Lighter */ repeating-linear-gradient(90deg, transparent 0px, rgba(120, 220, 255, 0.04) 1px, rgba(120, 220, 255, 0.01) 2px, transparent 3px), /* Random noise pattern - Lighter */ radial-gradient(circle at 30% 40%, rgba(120, 220, 255, 0.03) 0%, transparent 40%), radial-gradient(circle at 70% 60%, rgba(120, 220, 255, 0.02) 0%, transparent 30%); z-index: -1; animation: tv-static-enhanced 0.12s linear infinite, frequency-bars-enhanced 5s ease-in-out infinite, noise-drift 15s linear infinite; opacity: 0.7; filter: blur(0.4px) contrast(1.2); } /* Enhanced TV Static Flicker with Random Interference and Occasional Distortions */ @keyframes tv-hologram-flicker { 0%, 92% { opacity: 0.9; filter: contrast(1.2) brightness(1.15) saturate(1.1); } 93% { opacity: 0.6; filter: contrast(1.5) brightness(0.8) hue-rotate(8deg) saturate(1.3); } 94% { opacity: 1.1; filter: contrast(0.8) brightness(1.4) hue-rotate(-5deg) saturate(0.9); } 95% { opacity: 0.75; filter: contrast(1.4) brightness(0.9) hue-rotate(3deg) saturate(1.2); } 96% { opacity: 1.0; filter: contrast(0.9) brightness(1.3) hue-rotate(-2deg) saturate(1.1); } 97% { opacity: 0.8; filter: contrast(1.3) brightness(1.1) hue-rotate(6deg) saturate(1.0); } /* Occasional strong distortion */ 97.5% { opacity: 0.4; filter: contrast(2.0) brightness(0.6) hue-rotate(15deg) saturate(1.8) blur(0.5px); } 98% { opacity: 1.1; filter: contrast(1.1) brightness(1.2) hue-rotate(-4deg) saturate(1.15); } 99% { opacity: 0.85; filter: contrast(1.25) brightness(1.05) hue-rotate(1deg) saturate(1.05); } 100% { opacity: 0.9; filter: contrast(1.2) brightness(1.15) saturate(1.1); } } /* Chromatic Aberration Effect */ @keyframes chromatic-aberration { 0%, 90% { text-shadow: 0 0 3px rgba(120, 220, 255, 1), 0 0 8px rgba(120, 220, 255, 0.8), 0 0 15px rgba(120, 220, 255, 0.6), 0 0 25px rgba(120, 220, 255, 0.4), 0 0 35px rgba(80, 180, 255, 0.3); } 91% { text-shadow: -1px 0 0 rgba(255, 120, 120, 0.4), 1px 0 0 rgba(120, 255, 120, 0.4), 0 0 3px rgba(120, 220, 255, 1), 0 0 8px rgba(120, 220, 255, 0.8), 0 0 15px rgba(120, 220, 255, 0.6); } 93% { text-shadow: -2px 0 0 rgba(255, 100, 100, 0.5), 2px 0 0 rgba(100, 255, 100, 0.5), 0 0 5px rgba(120, 220, 255, 0.9), 0 0 12px rgba(120, 220, 255, 0.7); } 95% { text-shadow: 0 0 3px rgba(120, 220, 255, 1), 0 0 8px rgba(120, 220, 255, 0.8), 0 0 15px rgba(120, 220, 255, 0.6), 0 0 25px rgba(120, 220, 255, 0.4); } 100% { text-shadow: 0 0 3px rgba(120, 220, 255, 1), 0 0 8px rgba(120, 220, 255, 0.8), 0 0 15px rgba(120, 220, 255, 0.6), 0 0 25px rgba(120, 220, 255, 0.4), 0 0 35px rgba(80, 180, 255, 0.3); } } /* Enhanced Hologram Drift with Micro-movements */ @keyframes hologram-drift { 0%, 100% { transform: translateX(0px) scale(1) rotate(0deg); } 20% { transform: translateX(-0.2px) scale(1.0003) rotate(0.01deg); } 40% { transform: translateX(0.3px) scale(0.9997) rotate(-0.015deg); } 60% { transform: translateX(-0.1px) scale(1.0002) rotate(0.008deg); } 80% { transform: translateX(0.4px) scale(0.9998) rotate(-0.012deg); } } /* Enhanced TV Static with More Chaos */ @keyframes tv-static-enhanced { 0% { background-position: 0px 0px, 0px 0px, 0% 0%, 0% 0%, 0% 0%; opacity: 0.8; filter: blur(0.3px) contrast(1.1); } 20% { background-position: -2px 1px, 1px -1px, 5% 10%, 15% 25%, 30% 5%; opacity: 0.9; filter: blur(0.2px) contrast(1.2); } 40% { background-position: 1px -2px, -1px 2px, -3% 8%, 25% -5%, 10% 35%; opacity: 0.7; filter: blur(0.4px) contrast(1.0); } 60% { background-position: -1px -1px, 2px 1px, 8% -10%, -8% 20%, 45% 15%; opacity: 0.95; filter: blur(0.25px) contrast(1.15); } 80% { background-position: 2px 2px, -2px -1px, 12% 5%, 35% 40%, 20% -10%; opacity: 0.75; filter: blur(0.35px) contrast(1.05); } 100% { background-position: 0px 0px, 0px 0px, 0% 0%, 0% 0%, 0% 0%; opacity: 0.8; filter: blur(0.3px) contrast(1.1); } } /* Enhanced Frequency Bars */ @keyframes frequency-bars-enhanced { 0%, 100% { background-size: 5px 5px, 2px 2px, 40px 40px, 60px 60px, 30px 30px; opacity: 0.8; } 25% { background-size: 6px 6px, 3px 3px, 45px 45px, 55px 55px, 35px 35px; opacity: 0.9; } 50% { background-size: 7px 7px, 4px 4px, 50px 50px, 50px 50px, 40px 40px; opacity: 0.95; } 75% { background-size: 6px 6px, 3px 3px, 42px 42px, 58px 58px, 32px 32px; opacity: 0.85; } } /* Noise Drift Animation */ @keyframes noise-drift { 0% { background-position: 0px 0px, 0px 0px, 0% 0%, 100% 100%, 50% 50%; } 25% { background-position: -5px 3px, 2px -4px, 10% 15%, 90% 85%, 60% 40%; } 50% { background-position: 3px -5px, -4px 2px, 20% 30%, 80% 70%, 70% 30%; } 75% { background-position: -2px 4px, 5px -3px, 15% 25%, 85% 75%, 55% 45%; } 100% { background-position: 0px 0px, 0px 0px, 0% 0%, 100% 100%, 50% 50%; } } /* TV Static Animation */ @keyframes tv-static { 0% { background-position: 0px 0px, 0px 0px; opacity: 0.7; } 25% { background-position: -1px 1px, 1px 0px; opacity: 0.8; } 50% { background-position: 1px -1px, -1px 1px; opacity: 0.6; } 75% { background-position: -1px -1px, 1px -1px; opacity: 0.9; } 100% { background-position: 0px 0px, 0px 0px; opacity: 0.7; } } /* Frequency Bars Movement */ @keyframes frequency-bars { 0%, 100% { background-size: 5px 5px, 2px 2px; opacity: 0.7; } 50% { background-size: 6px 6px, 3px 3px; opacity: 0.9; } } /* Hologram Ghost Layer */ @keyframes hologram-ghost { 0%, 100% { transform: translateX(0px) translateY(0px) scale(1); opacity: 0.4; filter: blur(1px) contrast(1.2); } 33% { transform: translateX(2px) translateY(-1px) scale(1.01); opacity: 0.6; filter: blur(0.8px) contrast(1.4); } 66% { transform: translateX(-1px) translateY(1px) scale(0.99); opacity: 0.3; filter: blur(1.3px) contrast(1.0); } } /* Pixel Shift for Retro Effect */ @keyframes pixel-shift { 0% { transform: translateX(0px); } 25% { transform: translateX(1px); } 50% { transform: translateX(0px); } 75% { transform: translateX(-1px); } 100% { transform: translateX(0px); } } /* TV Scan Lines Overlay */ .section-heading { background: repeating-linear-gradient(0deg, transparent 0px, rgba(100, 200, 255, 0.01) 1px, transparent 2px, transparent 3px); background-size: 100% 4px; animation: tv-hologram-flicker 0.1s linear infinite, hologram-drift 4s ease-in-out infinite, scan-lines 0.1s linear infinite; } @keyframes scan-lines { 0% { background-position: 0px 0px; } 100% { background-position: 0px 4px; } } /* ======================================== 🎨 ANIMATED GRADIENT BORDERS 🎨 Colorful animated borders for all cards ======================================== */ @keyframes borderRotate { 0% { --angle: 0deg; } 100% { --angle: 360deg; } } @property --angle { syntax: ''; initial-value: 0deg; inherits: false; } /* Base card styles with transparent background and animated border */ .token-card, .feature-card, .protocol-card, .stat-card, .content-card { position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid transparent !important; background: transparent !important; backdrop-filter: blur(10px); background-clip: padding-box; z-index: 1; } /* Ensure the card content stays above the border */ .token-card>*, .feature-card>*, .protocol-card>*, .stat-card>*, .content-card>* { position: relative; z-index: 2; } /* Animated border effect - stroke only */ .token-card::before, .feature-card::before, .protocol-card::before, .stat-card::before, .content-card::before { content: ''; position: absolute; inset: -2px; z-index: -1; background: transparent; border-radius: inherit; padding: 2px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: borderRotate 4s linear infinite, gradientShift 8s ease infinite; } /* Different border colors for different card types */ .token-card::before { background: linear-gradient(var(--angle), #00d4ff, #00ff88, #00ff00, #00d4ff); } .feature-card::before { background: linear-gradient(var(--angle), #ff00ff, #ff00aa, #ff0066, #ff00ff); } .protocol-card::before { background: linear-gradient(var(--angle), #00ff88, #00ffcc, #00aaff, #00ff88); } .stat-card::before { background: linear-gradient(var(--angle), #ffcc00, #ff9900, #ff6600, #ffcc00); } .content-card::before { background: linear-gradient(var(--angle), #00ffcc, #00ccff, #0099ff, #00ffcc); } /* Hover effects */ .token-card:hover, .feature-card:hover, .protocol-card:hover, .stat-card:hover, .content-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } /* Animation for gradient shift */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ======================================== 💚 SUBTLE GREEN GLOW BORDERS 💚 Minimalist green glow for cards ======================================== */ .token-card, .feature-card, .protocol-card { position: relative; overflow: hidden; transition: box-shadow 0.3s ease, transform 0.3s ease; } .token-card:hover, .feature-card:hover, .protocol-card:hover { border-color: rgba(57, 255, 20, 0.4); box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.2), 0 4px 12px rgba(0, 0, 0, 0.3); transform: translateY(-2px); } /* ======================================== 💚 GREEN PIXEL CURSOR TRAIL 💚 Retro green pixel trail effect ======================================== */ .cursor-pixel { position: fixed; width: 2px; height: 2px; background: #39ff14; pointer-events: none; z-index: 9999; box-shadow: 0 0 1px #39ff14; animation: pixelFade 1s ease-out forwards; } @keyframes pixelFade { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(0.2); } } /* ======================================== ✨ SUBTLE SECTION ENTRANCE EFFECTS ✨ Elegant border animations on entrance ======================================== */ .section-container { position: relative; border: 1px solid transparent; border-radius: 12px; transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .section-container.in-view { border-color: rgba(57, 255, 20, 0.1); box-shadow: 0 0 20px rgba(57, 255, 20, 0.05), inset 0 0 20px rgba(57, 255, 20, 0.02); } .section-container::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; background: linear-gradient(45deg, transparent 0%, rgba(57, 255, 20, 0.1) 50%, transparent 100%); border-radius: 12px; opacity: 0; z-index: -1; transition: opacity 0.6s ease; } .section-container.in-view::before { opacity: 1; } /* ======================================== 💫 FLOATING PARTICLES 💫 Ambient floating particles ======================================== */ .floating-particle { position: fixed; width: 3px; height: 3px; background: #39ff14; border-radius: 50%; pointer-events: none; z-index: 1; box-shadow: 0 0 6px #39ff14; animation: floatParticle linear infinite; opacity: 0.6; } @keyframes floatParticle { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } } /* ======================================== 🎯 HOVER MAGNETIC EFFECT 🎯 Magnetic attraction on hover ======================================== */ .magnetic-element { transition: transform 0.2s ease-out; cursor: pointer; } .magnetic-element:hover { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(57, 255, 20, 0.6)); } /* Apply magnetic effect to interactive elements */ .cta-button, .token-card, .feature-card, .protocol-card { transition: transform 0.2s ease-out, filter 0.2s ease-out; } .cta-button:hover, .token-card:hover, .feature-card:hover, .protocol-card:hover { transform: translateY(-2px); border-color: rgba(57, 255, 20, 0.5); box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.3), 0 6px 20px rgba(0, 0, 0, 0.4); } html { scroll-behavior: smooth; height: 100%; overflow-x: hidden !important; margin: 0; padding: 0; } /* Aggressive scrollbar removal */ * { scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* Internet Explorer 10+ */ } *::-webkit-scrollbar { display: none !important; /* WebKit browsers (Chrome, Safari, Edge) */ width: 0 !important; height: 0 !important; background: transparent !important; } body { margin: 0; padding: 0; min-height: 100%; background: #0a0a0a; color: var(--text-primary); font-family: var(--font-body); position: relative; line-height: 1.6; overflow-x: hidden !important; scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* Internet Explorer 10+ */ } body::-webkit-scrollbar { display: none !important; /* WebKit browsers */ } #terminal-background { position: fixed !important; top: 0 !important; /* Reset to top */ left: 0; width: 15vw; /* Reduced width */ height: 100vh !important; /* Full height */ z-index: -2; background-color: transparent; font-family: 'Fira Code', 'Courier New', monospace; font-size: 18px; clip-path: inset(85vh 0 0 0); /* Clip the top 85vh - only show bottom 15vh, lower position */ line-height: 1.6; color: #00f0ff; text-shadow: 0 0 10px rgba(0, 240, 255, 1), 0 0 20px rgba(0, 240, 255, 0.8), 0 0 30px rgba(0, 240, 255, 0.6); pointer-events: none; opacity: 0.3; overflow: hidden; padding: 20px; box-sizing: border-box; } #terminal-background-right { position: fixed !important; top: 0 !important; /* Reset to top */ right: 0; left: auto; width: 15vw; /* Reduced width */ height: 100vh !important; /* Full height */ z-index: -2; background-color: transparent; font-family: 'Fira Code', 'Courier New', monospace; font-size: 18px; clip-path: inset(85vh 0 0 0); /* Clip the top 85vh - only show bottom 15vh, lower position */ line-height: 1.6; color: #00f0ff; text-shadow: 0 0 10px rgba(0, 240, 255, 1), 0 0 20px rgba(0, 240, 255, 0.8), 0 0 30px rgba(0, 240, 255, 0.6); pointer-events: none; opacity: 0.3; overflow: hidden; padding: 20px; box-sizing: border-box; transform: scaleX(-1); } /* This rule is no longer needed and conflicts with the animation. It is removed. */ /* Enhanced mobile scrolling fixes - updated to start below hero section */ @media (max-width: 1024px) { #terminal-background { position: absolute !important; top: 80vh !important; /* Start below the hero section */ overflow: visible; height: calc(100vh - 80vh) !important; /* Fill remaining height after hero */ min-height: auto; bottom: auto; } .scanlines { position: absolute !important; height: auto; min-height: auto; bottom: auto; } .floating-particles { position: absolute !important; height: auto; min-height: auto; bottom: auto; } .matrix-bg { position: absolute !important; top: 80vh !important; /* Start below the hero section */ overflow: visible; height: calc(100vh - 80vh) !important; /* Fill remaining height after hero */ min-height: auto; bottom: auto; } .sparkle-container { position: absolute !important; height: auto; min-height: auto; bottom: auto; } } /* Efecto de escaneo */ .scan-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(57, 255, 20, 0.7) 20%, rgba(57, 255, 20, 1) 50%, rgba(57, 255, 20, 0.7) 80%, transparent 100%); box-shadow: 0 0 15px 2px rgba(57, 255, 20, 0.8), 0 0 30px 4px rgba(57, 255, 20, 0.6), 0 0 45px 6px rgba(57, 255, 20, 0.4), 0 0 60px 8px rgba(57, 255, 20, 0.2); animation: enhancedScan 12s ease-in-out infinite; z-index: 5; pointer-events: none; filter: blur(0.5px); } /* Multiple scan lines for more realistic effect */ .scan-line:nth-child(2n) { animation-delay: -4s; height: 1px; opacity: 0.7; } .scan-line:nth-child(3n) { animation-delay: -8s; height: 3px; opacity: 0.5; filter: blur(1px); } @keyframes enhancedScan { 0% { top: -20px; opacity: 0; transform: scaleX(0.5); } 3% { opacity: 0.8; transform: scaleX(1); } 50% { opacity: 0.9; transform: scaleX(1.1); box-shadow: 0 0 12px 2px rgba(57, 255, 20, 0.7), 0 0 24px 4px rgba(57, 255, 20, 0.4), 0 0 36px 6px rgba(57, 255, 20, 0.2); } 97% { opacity: 0.8; transform: scaleX(1); } 100% { top: 100vh; opacity: 0; transform: scaleX(0.5); } } .terminal-line { position: absolute; white-space: nowrap; margin: 0; padding: 3px 20px; font-weight: 500; letter-spacing: 1.2px; font-family: 'Fira Code', 'Courier New', monospace; line-height: 1.8; pointer-events: none; max-width: 95%; overflow: hidden; text-overflow: ellipsis; /* Realistic terminal character spacing */ word-spacing: 0.1em; /* Slight flicker effect for authenticity */ background: linear-gradient(90deg, rgba(0, 40, 20, 0.8) 0%, rgba(0, 60, 30, 0.6) 50%, rgba(0, 40, 20, 0.4) 100%); border-left: 4px solid rgba(57, 255, 20, 0.9); border-radius: 4px; transform: scale(1); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform, opacity, text-shadow, background; opacity: 0.95; text-shadow: 0 0 8px rgba(57, 255, 20, 1), 0 0 16px rgba(57, 255, 20, 0.8), 0 0 24px rgba(57, 255, 20, 0.6), 0 0 32px rgba(57, 255, 20, 0.4); box-shadow: 0 0 10px rgba(57, 255, 20, 0.3), inset 0 0 10px rgba(57, 255, 20, 0.1); z-index: 1; animation: terminalLineAppear 0.8s ease-out, subtleFlicker 3s ease-in-out infinite; } .terminal-line:hover { transform: scale(1.02) translateX(5px); opacity: 1; z-index: 10; background: linear-gradient(90deg, rgba(0, 80, 40, 1) 0%, rgba(0, 120, 60, 0.8) 50%, rgba(0, 80, 40, 0.6) 100%); border-left-color: rgba(57, 255, 20, 1); text-shadow: 0 0 12px rgba(57, 255, 20, 1), 0 0 24px rgba(57, 255, 20, 0.9), 0 0 36px rgba(57, 255, 20, 0.7), 0 0 48px rgba(57, 255, 20, 0.5); letter-spacing: 1.4px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 0 30px rgba(57, 255, 20, 0.6), 0 0 60px rgba(57, 255, 20, 0.4), inset 0 0 20px rgba(57, 255, 20, 0.2); } .terminal-line::before { content: '>'; margin-right: 12px; color: #39ff14; opacity: 1; text-shadow: 0 0 8px rgba(57, 255, 20, 1), 0 0 16px rgba(57, 255, 20, 0.8), 0 0 24px rgba(57, 255, 20, 0.6); animation: terminalPromptPulse 2s ease-in-out infinite; filter: brightness(1.3); } @keyframes terminalPromptPulse { 0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(57, 255, 20, 1), 0 0 16px rgba(57, 255, 20, 0.8), 0 0 24px rgba(57, 255, 20, 0.6); filter: brightness(1.3); } 50% { opacity: 1; text-shadow: 0 0 12px rgba(57, 255, 20, 1), 0 0 24px rgba(57, 255, 20, 0.9), 0 0 36px rgba(57, 255, 20, 0.7), 0 0 48px rgba(57, 255, 20, 0.5); filter: brightness(1.6); } } .terminal-line.ok { color: #39ff14; text-shadow: 0 0 8px rgba(57, 255, 20, 1), 0 0 16px rgba(57, 255, 20, 0.8), 0 0 24px rgba(57, 255, 20, 0.6); filter: brightness(1.2); } .terminal-line.warn { color: #ffcc00; text-shadow: 0 0 8px rgba(255, 204, 0, 1), 0 0 16px rgba(255, 204, 0, 0.8), 0 0 24px rgba(255, 204, 0, 0.6); filter: brightness(1.2); } .terminal-line.info { color: #00f7ff; text-shadow: 0 0 8px rgba(0, 247, 255, 1), 0 0 16px rgba(0, 247, 255, 0.8), 0 0 24px rgba(0, 247, 255, 0.6); filter: brightness(1.2); } .terminal-line.error { color: #ff4136; text-shadow: 0 0 8px rgba(255, 65, 54, 1), 0 0 16px rgba(255, 65, 54, 0.8), 0 0 24px rgba(255, 65, 54, 0.6); filter: brightness(1.2); } .terminal-line.dim { color: #6aff6a; text-shadow: 0 0 6px rgba(106, 255, 106, 0.9), 0 0 12px rgba(106, 255, 106, 0.7), 0 0 18px rgba(106, 255, 106, 0.5); opacity: 0.9; filter: brightness(1.1); } /* Enhanced Terminal cursor effect */ .terminal-line:last-child::after { content: '█'; display: inline-block; animation: terminalCursorBlink 1.2s ease-in-out infinite; color: #39ff14; margin-left: 8px; text-shadow: 0 0 10px rgba(57, 255, 20, 1), 0 0 20px rgba(57, 255, 20, 0.9), 0 0 30px rgba(57, 255, 20, 0.7), 0 0 40px rgba(57, 255, 20, 0.5); filter: brightness(1.5); box-shadow: 0 0 15px rgba(57, 255, 20, 0.4); } /* Typing effect for new lines */ .terminal-line.typing { animation: terminalTyping 2s ease-out; overflow: hidden; border-right: 2px solid #39ff14; } /* Enhanced animations */ @keyframes terminalCursorBlink { 0%, 45% { opacity: 1; transform: scale(1); text-shadow: 0 0 5px rgba(57, 255, 20, 0.8), 0 0 10px rgba(57, 255, 20, 0.5); } 50%, 95% { opacity: 0.3; transform: scale(0.95); text-shadow: 0 0 2px rgba(57, 255, 20, 0.4); } 100% { opacity: 1; transform: scale(1); text-shadow: 0 0 5px rgba(57, 255, 20, 0.8), 0 0 10px rgba(57, 255, 20, 0.5); } } @keyframes terminalLineAppear { 0% { opacity: 0; transform: translateY(10px) scale(0.98) translateX(-5px); text-shadow: none; background: rgba(0, 20, 10, 0.1); filter: brightness(0.5) contrast(0.8); } 15% { opacity: 0.2; transform: translateY(6px) scale(0.985) translateX(-3px); filter: brightness(0.7) contrast(0.9); } 30% { opacity: 0.4; transform: translateY(4px) scale(0.99) translateX(-2px); text-shadow: 0 0 2px rgba(57, 255, 20, 0.3); filter: brightness(0.9) contrast(1); } 50% { opacity: 0.6; transform: translateY(2px) scale(0.995) translateX(-1px); text-shadow: 0 0 4px rgba(57, 255, 20, 0.5); filter: brightness(1.1) contrast(1.1); } 75% { opacity: 0.8; transform: translateY(1px) scale(0.998) translateX(-0.5px); text-shadow: 0 0 6px rgba(57, 255, 20, 0.7); filter: brightness(1.2) contrast(1.15); } 90% { opacity: 0.9; transform: translateY(0.5px) scale(0.999) translateX(-0.2px); filter: brightness(1.15) contrast(1.1); } 100% { opacity: 0.95; transform: translateY(0) scale(1) translateX(0); text-shadow: 0 0 8px rgba(57, 255, 20, 1), 0 0 16px rgba(57, 255, 20, 0.8), 0 0 24px rgba(57, 255, 20, 0.6), 0 0 32px rgba(57, 255, 20, 0.4); filter: brightness(1) contrast(1); } } /* Subtle flicker effect for terminal realism */ @keyframes subtleFlicker { 0%, 100% { opacity: 0.95; filter: brightness(1) contrast(1); } 1% { opacity: 0.92; filter: brightness(0.98) contrast(0.99); } 2% { opacity: 0.96; filter: brightness(1.02) contrast(1.01); } 3% { opacity: 0.94; filter: brightness(0.99) contrast(1); } 50% { opacity: 0.93; filter: brightness(0.97) contrast(0.98); } 51% { opacity: 0.97; filter: brightness(1.03) contrast(1.02); } 52% { opacity: 0.95; filter: brightness(1) contrast(1); } } @keyframes terminalTyping { 0% { width: 0; border-right-color: #39ff14; text-shadow: none; opacity: 0.7; } 5% { width: 2%; opacity: 0.8; text-shadow: 0 0 3px rgba(57, 255, 20, 0.5); } 15% { width: 8%; opacity: 0.85; } 25% { width: 15%; opacity: 0.9; text-shadow: 0 0 5px rgba(57, 255, 20, 0.7); } 40% { width: 35%; opacity: 0.92; } 60% { width: 60%; opacity: 0.94; text-shadow: 0 0 8px rgba(57, 255, 20, 0.8); } 80% { width: 85%; opacity: 0.96; border-right-color: #39ff14; } 90% { width: 95%; opacity: 0.98; border-right-color: #39ff14; text-shadow: 0 0 8px rgba(57, 255, 20, 1), 0 0 16px rgba(57, 255, 20, 0.8); } 100% { width: 100%; opacity: 1; border-right-color: transparent; text-shadow: 0 0 8px rgba(57, 255, 20, 1), 0 0 16px rgba(57, 255, 20, 0.8), 0 0 24px rgba(57, 255, 20, 0.6); } } .scanlines { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 1px, rgba(0, 0, 0, 0) 2px); pointer-events: none; z-index: -1; opacity: 0.8; mix-blend-mode: multiply; } /* Additional CRT-style effects */ .scanlines::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.03) 100%); animation: crtFlicker 0.15s ease-in-out infinite alternate; opacity: 0.3; /* Reduced opacity to decrease visual interference */ } @keyframes enhancedScanlineMove { 0%, 100% { transform: translateY(0px) scale(1); opacity: 0.95; filter: blur(0.1px) contrast(1.2) brightness(1.4); } 25% { transform: translateY(20px) scale(1.001); opacity: 1.0; filter: blur(0.05px) contrast(1.3) brightness(1.5); } 50% { transform: translateY(40px) scale(1); opacity: 0.85; filter: blur(0.1px) contrast(1.25) brightness(1.35); } 75% { transform: translateY(20px) scale(0.999); opacity: 0.92; filter: blur(0.08px) contrast(1.28) brightness(1.45); } } /* Terminal noise animation for authentic CRT effect */ @keyframes terminalNoise { 0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%, 100% 100%, 50% 50%; opacity: 0.75; } 20% { background-position: 5% 10%, 2% 5%, 10% 5%, 95% 95%, 55% 45%; opacity: 0.78; } 40% { background-position: -2% 8%, -1% 3%, 8% -2%, 102% 98%, 48% 52%; opacity: 0.73; } 60% { background-position: 3% -5%, 4% 8%, -5% 10%, 97% 103%, 52% 48%; opacity: 0.77; } 80% { background-position: -1% 12%, -3% -2%, 12% 3%, 101% 97%, 49% 51%; opacity: 0.74; } } @keyframes crtFlicker { 0% { opacity: 1; } 100% { opacity: 0.98; } } /* --- MAIN CONTENT LAYOUT --- */ .main-content { position: relative; z-index: 1; width: 100%; perspective: 2000px; } .section-container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; transform-style: preserve-3d; } /* --- MODERN TYPOGRAPHY --- */ .section-heading { font-size: clamp(2.8rem, 7vw, 4.5rem); font-weight: 700; line-height: 1.1; margin-bottom: 1.2rem; margin-top: 1rem; color: var(--text-primary); letter-spacing: -0.02em; transform-style: preserve-3d; position: relative; z-index: 100 !important; /* Ensure section headings are always visible above all elements */ isolation: isolate; /* Create new stacking context */ } @keyframes floatTitle { 0%, 100% { transform: translateY(0) translateZ(0); } 50% { transform: translateY(-10px) translateZ(20px); } } .accent-text { color: #39ff14; text-shadow: 0 0 15px rgba(57, 255, 20, 0.5), 0 0 30px rgba(57, 255, 20, 0.3); display: inline-block; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* Clase específica para la palabra SLANG con fuente Bangers */ .accent-text.slang-font { font-family: 'Bangers', cursive !important; } .accent-text-blue { color: #00d4ff; text-shadow: 0 0 15px rgba(0, 212, 255, 0.5), 0 0 30px rgba(0, 212, 255, 0.3); } .section-heading .accent-text { color: #39ff14; text-shadow: 0 0 30px rgba(57, 255, 20, 0.5), 0 0 60px rgba(57, 255, 20, 0.3); display: inline-block; animation: glowText 3s ease-in-out infinite; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* Diagnostic rule to disable parent animation */ #exchange-title { animation: none !important; } /* Fix for black square backgrounds on headings with accent-text */ .section-heading { background: transparent !important; background-color: transparent !important; } /* Additional specific fixes for problematic headings */ h2.section-heading .accent-text, #exchange-title .accent-text, #exchange-title .intermittent-text, #pinche-economy .section-heading .accent-text, #contact .section-heading .accent-text { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } @keyframes glowText { 0%, 100% { text-shadow: 0 0 30px rgba(57, 255, 20, 0.5), 0 0 60px rgba(57, 255, 20, 0.3); } 50% { text-shadow: 0 0 40px rgba(57, 255, 20, 0.8), 0 0 80px rgba(57, 255, 20, 0.5), 0 0 120px rgba(57, 255, 20, 0.3); } } @keyframes power-on-glow { /* Off state - very subtle, almost no brightness */ 0%, 65%, 100% { opacity: 0.05; /* Much lower opacity */ text-shadow: 0 0 1px rgba(57, 255, 20, 0.1); /* Minimal shadow */ } /* Start powering up */ 70% { opacity: 0.2; /* Slightly visible */ text-shadow: 0 0 4px rgba(57, 255, 20, 0.2); } /* Getting brighter */ 80% { opacity: 0.5; text-shadow: 0 0 10px rgba(57, 255, 20, 0.4); } /* Peak brightness */ 90%, 95% { opacity: 1; text-shadow: 0 0 25px rgba(57, 255, 20, 0.8), 0 0 50px rgba(57, 255, 20, 0.5); } } .intermittent-text { position: relative; display: inline-block; color: #39ff14 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; z-index: 1; } .intermittent-text::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #39ff14; animation: power-on-glow 3s ease-in-out infinite; pointer-events: none; z-index: 2; background: transparent !important; background-color: transparent !important; } .section-subtitle { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--text-secondary); margin-bottom: 2rem; font-weight: 400; } /* --- FEATURES SECTION --- */ .features-section { padding: 2.5rem 0; position: relative; overflow: hidden; z-index: 20; /* Ensure visibility above hero */ } .features-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 50% 50%, rgba(57, 255, 20, 0.03) 0%, transparent 50%); animation: rotateBackground 20s linear infinite; pointer-events: none; } @keyframes rotateBackground { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; } /* Mobile optimization for features grid */ @media (max-width: 768px) { .features-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; } } .feature-card { position: relative; background: transparent; backdrop-filter: blur(20px); border: 1px solid var(--border-color); border-radius: 20px; padding: 1.2rem; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; transform-style: preserve-3d; perspective: 1000px; } /* Mobile optimization for feature cards */ @media (max-width: 768px) { .feature-card { padding: 1rem; min-height: 200px !important; } } .feature-card.large { grid-column: span 6; min-height: 280px; } .feature-card.medium { grid-column: span 6; min-height: 240px; } .feature-card.small { grid-column: span 6; min-height: 200px; } /* 2x2 Grid Layout Styles */ .features-grid-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2rem; margin-top: 4rem; max-width: 1200px; margin-left: auto; margin-right: auto; transition: gap 0.3s ease, margin-top 0.3s ease; } .feature-card.uniform { grid-column: span 1; grid-row: span 1; min-height: 240px; aspect-ratio: 1.2; display: flex; flex-direction: column; justify-content: space-between; transition: min-height 0.3s ease, aspect-ratio 0.3s ease; } .feature-card:hover { transform: translateY(-4px); border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.4), 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(57, 255, 20, 0.1); } .feature-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(57, 255, 20, 0.1) 0%, transparent 50%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .feature-card:hover::after { opacity: 1; } .card-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(57, 255, 20, 0.2) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; animation: glowPulse 3s ease-in-out infinite; } .feature-card:hover .card-glow { opacity: 1; } @keyframes glowText { 0%, 100% { filter: drop-shadow(0 0 30px rgba(57, 255, 20, 0.5)) drop-shadow(0 0 60px rgba(57, 255, 20, 0.3)); } 50% { filter: drop-shadow(0 0 40px rgba(57, 255, 20, 0.6)) drop-shadow(0 0 80px rgba(57, 255, 20, 0.4)); } } .card-icon { width: 80px; height: 80px; background: rgba(57, 255, 20, 0.1); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; transform-style: preserve-3d; } .card-icon::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)); border-radius: 22px; opacity: 0; transition: opacity 0.3s ease; z-index: -1; filter: blur(10px); } .card-icon i { font-size: 2.5rem; color: var(--accent-primary); transition: all 0.3s ease; filter: drop-shadow(0 0 10px rgba(57, 255, 20, 0.5)); } .feature-card:hover .card-icon { background: transparent; transform: scale(1.05); border: 2px solid rgba(57, 255, 20, 0.6); box-shadow: 0 0 15px rgba(57, 255, 20, 0.4), inset 0 0 10px rgba(57, 255, 20, 0.1); } .feature-card:hover .card-icon::before { opacity: 1; } .feature-card:hover .card-icon i { transform: scale(1.05); color: rgba(57, 255, 20, 0.9); } .feature-card h3 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--text-primary); text-shadow: none; } .feature-card p { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.6; } /* --- EXCHANGE SECTION --- */ .exchange-section { overflow: visible !important; z-index: 20 !important; padding: 1rem 0 0.5rem 0 !important; /* Further reduced padding */ margin-bottom: 0 !important; /* Ensure no extra bottom margin */ /* Scroll performance optimizations */ contain: layout style !important; will-change: auto !important; transform: translateZ(0); /* Simple hardware acceleration only */ } .priority-section { background: transparent; backdrop-filter: blur(10px); border-top: 1px solid rgba(57, 255, 20, 0.1); border-bottom: 1px solid rgba(57, 255, 20, 0.1); } .priority-section { background: transparent; backdrop-filter: blur(10px); border-top: 1px solid rgba(57, 255, 20, 0.1); border-bottom: 1px solid rgba(57, 255, 20, 0.1); } .exchange-section::after { content: ''; position: absolute; top: 50%; left: 50%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(57, 255, 20, 0.1) 0%, transparent 70%); transform: translate(-50%, -50%); animation: pulseGlow 4s ease-in-out infinite; pointer-events: none; } @keyframes pulseGlow { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; } } .exchange-widget-wrapper { position: relative !important; max-width: 600px !important; width: 100% !important; margin: 0 auto !important; /* Minimal margins */ background: transparent !important; /* Optimized backdrop-filter - reduced during scroll */ backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid #39ff14 !important; /* Thin border */ border-radius: 12px !important; /* Simplified box-shadow for better scroll performance */ box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.3) !important; padding: 0 !important; /* No padding */ overflow: visible !important; /* Keep visible for widget popup functionality */ box-sizing: border-box !important; display: inline-block !important; /* Fit content closely */ vertical-align: top !important; line-height: 1 !important; /* Minimize line height */ height: auto !important; min-height: auto !important; max-height: none !important; /* Performance optimizations */ will-change: auto !important; /* Remove aggressive will-change */ transform: translateZ(0); /* Hardware acceleration only */ /* Add smooth appearance animation */ opacity: 1; transition: opacity 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out; } /* Simplified loading state for better performance */ .exchange-widget-wrapper[aria-busy="true"] { opacity: 0.85; } .exchange-widget-wrapper iframe { opacity: 1; /* Remove transition that may cause delay */ } .exchange-widget-wrapper:hover { border-color: #39ff14; /* Simplified hover effects for better scroll performance */ box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.5) !important; /* No transform to avoid scroll interference */ } .widget-glow { position: absolute !important; top: 0 !important; left: -50% !important; width: 200% !important; height: 100% !important; background: radial-gradient(circle, rgba(57, 255, 20, 0.05) 0%, transparent 70%) !important; animation: pulse 4s ease-in-out infinite !important; margin: 0 !important; padding: 0 !important; } .exchange-widget-wrapper iframe { width: 100% !important; max-width: 100% !important; border: none !important; border-radius: 8px !important; position: relative !important; z-index: 1 !important; box-sizing: border-box !important; display: block !important; /* Ensure iframe takes minimal extra space */ margin: 0 !important; /* Remove any default margin */ min-height: auto !important; /* Ensure iframe doesn't force minimum height */ height: auto !important; /* Allow height to be determined by content */ max-height: none !important; } /* --- TOKENS SECTION --- */ .tokens-section { padding: 1rem 0; position: relative; overflow: hidden; z-index: 20; /* Ensure visibility above hero */ } .tokens-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(57, 255, 20, 0.02) 0%, transparent 50%), linear-gradient(225deg, rgba(0, 240, 255, 0.02) 0%, transparent 50%); pointer-events: none; } .tokens-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; /* Increased gap */ margin-bottom: 4rem; } .token-card { max-width: 500px; /* Reduced max-width */ backdrop-filter: blur(20px); border: 1px solid var(--border-color); border-radius: 24px; padding: 1rem; /* Reduced padding */ transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; transform-style: preserve-3d; perspective: 1000px; width: 100%; box-sizing: border-box; margin: 0 auto; /* Center the cards */ } .token-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.4), 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(57, 255, 20, 0.1); } .token-card.pinche-token { border-color: rgba(57, 255, 20, 0.3); } .token-card.pinche-token:hover { border-color: var(--accent-primary); } .token-card.chucho-token { border-color: rgba(0, 240, 255, 0.3); } .token-card.chucho-token:hover { border-color: var(--accent-secondary); } .token-card-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .pinche-token .token-card-glow { background: radial-gradient(circle, rgba(57, 255, 20, 0.1) 0%, transparent 70%); } .chucho-token .token-card-glow { background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, transparent 70%); } .token-card:hover .token-card-glow { opacity: 1; } .token-header { display: flex; align-items: center; gap: 1.5rem; /* Reduced gap */ margin-bottom: 1.5rem; /* Reduced margin */ } .token-icon-wrapper { width: 80px; /* Reduced size */ height: 80px; /* Reduced size */ border-radius: 50%; overflow: hidden; border: 2px solid var(--border-color); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; box-shadow: 0 0 0 rgba(57, 255, 20, 0); } .token-icon-wrapper::before { content: ''; position: absolute; inset: -4px; background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary)); border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; z-index: -1; filter: blur(15px); animation: rotateBorder 3s linear infinite; } @keyframes rotateBorder { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .token-card:hover .token-icon-wrapper { transform: scale(1.05); border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.3); } .token-card:hover .token-icon-wrapper::before { opacity: 1; } .token-icon { width: 100%; height: 100%; object-fit: cover; } .token-title h3 { font-size: 1.8rem; /* Reduced size */ margin-bottom: 0.5rem; color: var(--accent-primary); text-shadow: 0 0 30px rgba(57, 255, 20, 0.5), 0 0 60px rgba(57, 255, 20, 0.3); display: inline-block; animation: glowText 3s ease-in-out infinite; } .pinche-token .token-title h3 { color: #39ff14; text-shadow: 0 0 30px rgba(57, 255, 20, 0.5), 0 0 60px rgba(57, 255, 20, 0.3); } .chucho-token .token-title h3 { color: #40E0D0; /* Turquoise color */ text-shadow: 0 0 30px rgba(64, 224, 208, 0.5), 0 0 60px rgba(64, 224, 208, 0.3); animation: glowTextChucho 3s ease-in-out infinite; } @keyframes glowTextChucho { 0%, 100% { text-shadow: 0 0 30px rgba(64, 224, 208, 0.5), 0 0 60px rgba(64, 224, 208, 0.3); } 50% { text-shadow: 0 0 40px rgba(64, 224, 208, 0.7), 0 0 80px rgba(64, 224, 208, 0.5); } } .token-supply { font-size: 1rem; color: var(--text-secondary); } .chucho-supply { color: #40E0D0; /* Matching the CHUCHO token color */ text-shadow: 0 0 10px rgba(64, 224, 208, 0.5); font-weight: bold; } .token-content { position: relative; z-index: 1; overflow: hidden; margin-top: -40px; } .token-tagline { font-size: 1.2rem; font-weight: 600; color: var(--accent-secondary); margin-bottom: 1rem; } .token-description { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 2rem; } .token-stats { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-top: 0.5rem; border-top: 1px solid var(--border-color); } .stat-item { text-align: center; } .stat-value { display: block; font-size: 1.5rem; font-weight: 700; color: var(--accent-primary); margin-bottom: 0.5rem; } .stat-label { display: block; font-size: 0.9rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; } .ecosystem-visual { text-align: center; margin-top: 2rem; /* Reduced margin */ } .ecosystem-img, .ecosystem-img-small { max-width: 600px; /* Optimized size for desktop */ width: 600px; /* Set specific width */ height: auto; position: relative; z-index: 1; opacity: 1 !important; display: block; margin: 0 auto; /* Center the image */ animation: float 6s ease-in-out infinite, heartbeat 3s ease-in-out infinite, glowText 3s ease-in-out infinite; animation-fill-mode: both; filter: drop-shadow(0 0 30px rgba(57, 255, 20, 0.5)) drop-shadow(0 0 60px rgba(57, 255, 20, 0.3)); transform-origin: center; } /* Heartbeat animation for the ecosystem image */ @keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.02); } 22% { transform: scale(0.98); } 30%, 50%, 80% { transform: scale(1); } 40%, 60% { transform: scale(1.02); } } @keyframes glowText { 0%, 100% { filter: drop-shadow(0 0 30px rgba(57, 255, 20, 0.5)) drop-shadow(0 0 60px rgba(57, 255, 20, 0.3)); } 50% { filter: drop-shadow(0 0 40px rgba(57, 255, 20, 0.6)) drop-shadow(0 0 80px rgba(57, 255, 20, 0.4)); } } /* Enhanced glow effect for the ecosystem image */ .ecosystem-img::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120%; height: 120%; background: radial-gradient(circle, rgba(57, 255, 20, 0.2) 0%, transparent 70%); border-radius: 50%; animation: glow-pulse 3s ease-in-out infinite; pointer-events: none; z-index: -1; } @keyframes glow-pulse { 0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* --- HOW IT WORKS SECTION --- */ .how-it-works-section { padding: 5rem 0; position: relative; overflow: hidden; z-index: 20; /* Ensure visibility above hero */ } .process-flow { display: flex; align-items: center; justify-content: space-between; margin-top: 4rem; position: relative; } .process-step { flex: 1; text-align: center; position: relative; z-index: 1; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .process-step:hover { transform: translateY(-10px) scale(1.05); } .step-number { font-size: 1rem; font-weight: 700; color: var(--accent-primary); margin-bottom: 1rem; letter-spacing: 0.2em; } .step-icon { width: 100px; height: 100px; background: rgba(57, 255, 20, 0.1); border: 2px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; box-shadow: 0 0 0 rgba(57, 255, 20, 0); } .step-icon::before { content: ''; position: absolute; inset: -5px; background: conic-gradient(from 0deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary)); border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; z-index: -1; filter: blur(15px); animation: rotateBorder 3s linear infinite; } .step-icon i { font-size: 3rem; color: var(--accent-primary); transition: all 0.3s ease; filter: drop-shadow(0 0 10px rgba(57, 255, 20, 0.5)); } .process-step:hover .step-icon { background: rgba(57, 255, 20, 0.2); border-color: var(--accent-primary); transform: scale(1.2) translateZ(30px) rotateY(360deg); box-shadow: 0 0 40px rgba(57, 255, 20, 0.6); } .process-step:hover .step-icon::before { opacity: 1; } .process-step:hover .step-icon i { transform: scale(1.1); filter: drop-shadow(0 0 20px rgba(57, 255, 20, 0.9)); } .process-step h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-primary); text-shadow: none; } .process-step p { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; max-width: 250px; margin: 0 auto; } .process-connector { width: 100px; height: 2px; background: linear-gradient(90deg, var(--border-color), var(--accent-primary), var(--border-color)); position: relative; } .process-connector::after { content: '→'; position: absolute; right: -10px; top: -10px; color: var(--accent-primary); font-size: 1.5rem; } /* --- STATS SECTION --- */ .stats-section { padding: 3rem 0; position: relative; overflow: hidden; z-index: 20; /* Ensure visibility above hero */ } .stats-section::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, rgba(57, 255, 20, 0.05) 0%, transparent 70%); pointer-events: none; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2rem; } .stat-card { position: relative; background: transparent; backdrop-filter: blur(20px); border: 1px solid var(--border-color); border-radius: 24px; padding: 3rem 2rem; text-align: center; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; transform-style: preserve-3d; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(57, 255, 20, 0.05) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; } .stat-card:hover { transform: translateY(-15px) scale(1.05) rotateX(5deg); border-color: var(--accent-primary); box-shadow: 0 25px 70px rgba(57, 255, 20, 0.3), 0 0 0 1px rgba(57, 255, 20, 0.2) inset; } .stat-card:hover::before { opacity: 1; } .stat-icon { width: 60px; height: 60px; background: rgba(57, 255, 20, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; } .stat-icon::after { content: ''; position: absolute; inset: -3px; background: conic-gradient(from 0deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary)); border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; z-index: -1; filter: blur(10px); animation: rotateBorder 2s linear infinite; } .stat-card:hover .stat-icon { transform: scale(1.2) translateZ(20px); background: rgba(57, 255, 20, 0.2); } .stat-card:hover .stat-icon::after { opacity: 1; } .stat-icon i { font-size: 2rem; color: var(--accent-primary); transition: all 0.3s ease; } .stat-card:hover .stat-icon i { transform: scale(1.1); filter: drop-shadow(0 0 15px rgba(57, 255, 20, 0.8)); } .stat-value { font-size: 3rem; font-weight: 700; color: var(--accent-primary); display: inline-block; transition: all 0.3s ease; text-shadow: 0 0 20px rgba(57, 255, 20, 0.5); } .stat-card:hover .stat-value { transform: scale(1.1) translateZ(10px); text-shadow: 0 0 30px rgba(57, 255, 20, 0.8); } .stat-unit { font-size: 2rem; font-weight: 700; color: var(--accent-primary); display: inline-block; margin-left: 0.2rem; } .stat-label { font-size: 1rem; color: var(--text-secondary); margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; } /* --- DEX MECHANISM SECTION --- */ .dex-mechanism-section { padding: 3rem 0; position: relative; } .dex-content { max-width: 900px; margin: 0 auto; text-align: center; } .dex-text { font-size: 1.5rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 1.5rem; } /* --- INTRO SECTION --- */ .intro-section { padding: 5rem 0; position: relative; } .intro-content { max-width: 900px; margin: 0 auto; text-align: center; } .intro-text { font-size: 1.3rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 1.5rem; } /* --- CONTENT DETAILS SECTIONS --- */ .content-details-section, .rules-section, .chucho-section, .lp-section { padding: 2rem 0; position: relative; } /* Make sections from rules onwards more compact */ .rules-section, .dex-mechanism-section, .lp-section, .features-section, .chucho-section, .stats-section, .community-section { padding: 2rem 0 0.5rem 0 !important; } .rules-section .section-heading, .dex-mechanism-section .section-heading, .lp-section .section-heading, .features-section .section-heading, .chucho-section .section-heading, .stats-section .section-heading, .community-section .section-heading, .contact-section .section-heading { margin-bottom: 1rem !important; font-size: clamp(2.2rem, 6vw, 3.8rem) !important; background: rgba(57, 255, 20, 0.1) !important; border: 2px solid #39ff14 !important; border-radius: 15px !important; padding: 10px 20px !important; display: inline-block !important; box-shadow: 0 0 20px rgba(57, 255, 20, 0.3) !important; } /* Compact content cards in these sections */ .rules-section .content-card, .dex-mechanism-section .content-card, .lp-section .content-card, .features-section .content-card, .chucho-section .content-card, .stats-section .content-card, .community-section .content-card { padding: 1.5rem !important; margin-bottom: 1rem !important; } /* Compact grids in these sections */ .rules-section .features-grid, .features-section .features-grid, .stats-section .stats-grid { margin-top: 1.5rem !important; gap: 1rem !important; } /* Compact subtitles in these sections */ .rules-section .section-subtitle, .dex-mechanism-section .section-subtitle, .lp-section .section-subtitle, .features-section .section-subtitle, .chucho-section .section-subtitle, .stats-section .section-subtitle, .community-section .section-subtitle { margin-bottom: 1.5rem !important; } .content-card { background: transparent; backdrop-filter: blur(20px); border: 1px solid var(--border-color); border-radius: 24px; padding: 2rem; margin-bottom: 1.5rem; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; position: relative; } .content-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(57, 255, 20, 0.05) 0%, transparent 50%); border-radius: 24px; opacity: 0; transition: opacity 0.3s ease; } .content-card:hover { border-color: var(--accent-primary); box-shadow: 0 20px 60px rgba(57, 255, 20, 0.2), 0 0 0 1px rgba(57, 255, 20, 0.1) inset; transform: translateY(-10px) scale(1.01); } .content-card:hover::before { opacity: 1; } .content-card.large { padding: 2.5rem; } .content-card.chucho-card { border-color: rgba(0, 240, 255, 0.3); } .content-card.chucho-card:hover { border-color: var(--accent-secondary); box-shadow: 0 10px 40px rgba(0, 240, 255, 0.15); } .content-card h3 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--text-primary); text-shadow: none; } .content-card h4 { font-size: 1.2rem; margin: 1rem 0 0.8rem; color: var(--accent-primary); text-shadow: none; } .content-card p { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.8rem; } .content-card strong { color: var(--accent-primary); font-weight: 700; } .content-list { list-style: none; padding: 0; margin: 1.5rem 0; } .content-list li { font-size: 1.1rem; color: var(--text-secondary); padding: 0.8rem 0; padding-left: 2rem; position: relative; } .content-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent-primary); font-weight: 700; } .liquidity-flow { margin: 3rem 0; padding: 2rem; background: transparent; border-radius: 16px; border: 1px solid var(--border-color); } .flow-item { text-align: center; margin: 1rem 0; } .flow-arrow { text-align: center; font-size: 2rem; color: var(--accent-primary); margin: 0.5rem 0; } .text-highlight { color: var(--accent-primary); font-weight: 600; font-size: 1.1rem; } .highlight-quote { margin: 2rem 0; padding: 2rem; background: rgba(57, 255, 20, 0.05); border-left: 4px solid var(--accent-primary); border-radius: 8px; font-style: italic; } .highlight-quote .text-highlight { font-size: 1.3rem; } /* --- COMMUNITY SECTION --- */ .community-section { padding: 2rem 0 0.5rem 0; position: relative; background: transparent !important; } /* Center the title in contact section */ .contact-section .section-container { text-align: center !important; } .community-content { max-width: 800px; margin: 0 auto; text-align: center; } .community-text { font-size: 1.3rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 1.5rem; } .community-text strong { color: var(--accent-primary); font-weight: 700; } .text-pinche { color: var(--accent-primary); font-weight: 600; } .text-chucho { color: var(--accent-secondary); font-weight: 600; } .community-cta { margin-top: 3rem; text-align: center; } .cta-button { display: inline-flex; align-items: center; gap: 1rem; padding: 1.5rem 3rem; background: var(--accent-primary); color: #000; font-size: 1.2rem; font-weight: 700; text-decoration: none; border-radius: 50px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.1em; } .cta-button:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(57, 255, 20, 0.4); } .cta-button i { font-size: 1.5rem; } /* Modern geometric overlays for main container */ .container::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: radial-gradient(circle at 30% 30%, rgba(0, 240, 255, 0.08) 0%, transparent 40%), radial-gradient(circle at 70% 70%, rgba(255, 0, 200, 0.06) 0%, transparent 40%), conic-gradient(from 45deg at 50% 50%, rgba(0, 200, 255, 0.04) 0deg, transparent 120deg, rgba(255, 0, 200, 0.04) 240deg, transparent 360deg); animation: container-geometric-shift 15s ease-in-out infinite; z-index: 0; pointer-events: none; } .container::after { content: '' !important; position: absolute !important; top: -25%; left: -25%; width: 150%; height: 150%; background: repeating-conic-gradient(from 90deg at 50% 50%, rgba(0, 240, 255, 0.01) 0deg 15deg, transparent 15deg 30deg, rgba(255, 0, 200, 0.01) 30deg 45deg, transparent 45deg 60deg); animation: container-rotating-pattern 25s linear infinite; z-index: 0; pointer-events: none; opacity: 0.4; } /* --- HEADER & NAVIGATION --- */ .main-header { text-align: center; padding: 0; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; } /* ===== HERO LOGO SYSTEM - MOBILE FIRST APPROACH ===== */ /* Hero Visual Container - Base (Mobile First) */ .hero-visual { position: relative; width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; overflow: visible; } /* Hero Logo Container - Base (Mobile First) */ .hero-visual .logo-container-hero { position: relative !important; width: 285px !important; height: 285px !important; display: flex !important; justify-content: center !important; align-items: center !important; z-index: 10 !important; will-change: transform; overflow: visible !important; } /* Hero Logo Image - Base (Mobile First) */ .logo-hero-img { width: 100% !important; height: 100% !important; max-width: 285px !important; max-height: 285px !important; object-fit: contain !important; filter: drop-shadow(0 0 10px rgba(57, 255, 20, 0.3)); animation: logoModernPulse 4s ease-in-out infinite; will-change: transform, filter; display: block !important; /* Hardware acceleration */ transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; /* Cross-browser animation support */ -webkit-animation: logoModernPulse 4s ease-in-out infinite; -moz-animation: logoModernPulse 4s ease-in-out infinite; } /* Mobile Devices (up to 768px) - Base styles already optimized for mobile */ @media (max-width: 768px) { .hero-visual { height: 350px; /* Appropriate height for mobile */ } .hero-visual .logo-container-hero { width: 237px !important; /* Smaller container for mobile (5% reduction) */ height: 237px !important; } .logo-hero-img { max-width: 237px !important; /* Smaller logo for mobile (5% reduction) */ max-height: 237px !important; } } /* Tablet Devices (769px to 1023px) */ @media (min-width: 769px) and (max-width: 1023px) { .hero-visual { height: 450px; /* Appropriate height for tablet */ } .hero-visual .logo-container-hero { width: 332px !important; /* Medium size for tablet (5% reduction) */ height: 332px !important; } .logo-hero-img { max-width: 332px !important; /* Medium logo for tablet (5% reduction) */ max-height: 332px !important; } } /* Desktop Devices (1024px and up) */ @media (min-width: 1024px) { .hero-visual { height: 600px; /* Increased height for larger logo */ } .hero-visual .logo-container-hero { width: 500px !important; /* Much larger size for desktop visibility */ height: 500px !important; } .logo-hero-img { max-width: 500px !important; /* Much larger logo for desktop visibility */ max-height: 500px !important; } /* Center logo in desktop by changing hero layout */ .hero-section .hero-content { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 1.5rem !important; /* Reduced gap to bring text closer */ grid-template-columns: none !important; /* Override grid */ } .hero-section .hero-visual { order: 1; /* Logo first */ margin-bottom: -1rem; /* Pull text even closer */ } .hero-section .hero-text { order: 2; /* Text below logo */ max-width: 800px; /* Limit text width for better readability */ margin-top: 0 !important; /* Remove excessive margin */ transform: translateY(0) !important; /* Remove transform that pushes down */ } } .logo-container-widget { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 70%; height: 70%; z-index: 1; display: flex; justify-content: center; align-items: center; } .logo-widget-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1s ease-in-out; } .logo-widget-img.active { opacity: 1; } /* Remove old .hero-visual .logo-container styles */ .hero-visual .logo-container { display: none; /* Hide the old container */ } .logo.active { opacity: 1; } .main-nav ul { list-style: none; padding: 0; margin: 2rem 0 0; /* Añadido margen superior de 2rem */ text-align: center; } .main-nav li { display: inline-block; margin: 0 10px; } .main-nav a { font-family: var(--font-heading); color: var(--secondary-color); text-decoration: none; text-transform: uppercase; letter-spacing: 2px; padding: 12px 24px; border: 1px solid transparent; border-radius: 25px; transition: all 0.3s ease; background: linear-gradient(135deg, rgba(57, 255, 20, 0.1) 0%, transparent 100%); } .main-nav a:hover, .main-nav a.active { color: var(--primary-color); border-color: var(--border-color); text-shadow: 0 0 8px var(--glow-color), 0 0 15px var(--glow-color); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(57, 255, 20, 0.3), 0 0 30px rgba(57, 255, 20, 0.2); } /* --- HERO SECTION --- */ #hero { height: 80vh; /* Increased from 60vh to make hero more prominent */ display: flex; justify-content: center; align-items: center; text-align: center; padding: 2rem; position: relative; z-index: 100; /* Ensure hero appears above terminal/matrix backgrounds (z-index: -2) */ isolation: isolate; /* Ensure proper layering */ overflow: hidden; /* Contain the visual effects */ background: #000000; /* Darker background for hero section */ } .hero-content h1 { font-size: 4.5rem; font-weight: 900; color: var(--primary-color); margin-bottom: 1rem; text-shadow: 0 0 20px var(--glow-color); } .hero-content .subtitle { font-size: 1.3rem; margin-bottom: 2.5rem; color: var(--secondary-color); } .hero-cta { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; color: #000000; background: linear-gradient(135deg, var(--primary-color) 0%, #00ff88 50%, var(--primary-color) 100%); padding: 18px 40px; border: 2px solid var(--primary-color); cursor: pointer; box-shadow: 0 0 30px rgba(57, 255, 20, 0.5), 0 10px 40px rgba(57, 255, 20, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: all 0.3s ease; clip-path: polygon(90% 0, 100% 30%, 100% 100%, 10% 100%, 0 70%, 0 0); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .hero-cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); transition: left 0.7s ease; } .hero-cta:hover::before { left: 100%; } .hero-cta:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 0 50px rgba(57, 255, 20, 0.8), 0 20px 60px rgba(57, 255, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); } /* --- MODERN HERO SECTION --- */ .hero-section { position: relative; width: 100%; min-height: 100vh; /* Back to a more reasonable height (reduced from 150vh) */ display: flex; align-items: center; justify-content: center; padding: 8rem 0 6rem 0; /* Increased top padding to prevent logo cutoff */ background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(5, 15, 10, 0.9) 50%, rgba(0, 0, 0, 0.95) 100%); overflow: visible !important; /* Allow full visibility of the enlarged logo */ z-index: 10; margin-top: 0; box-sizing: border-box; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 30%, rgba(57, 255, 20, 0.08) 0%, transparent 50%); z-index: 0; pointer-events: none; } @keyframes backgroundShift { 0% { background-position: 0% 0%, 100% 100%, 50% 50%; opacity: 0.8; } 100% { background-position: 100% 100%, 0% 0%, 75% 25%; opacity: 1; } } /* REMOVED - Grid layout replaced with flex layout below for centered logo */ .hero-text { animation: heroFadeIn 1.5s ease-out forwards; /* Keep final state */ opacity: 1; /* Make sure it's visible */ transform: translateY(100px); /* Final position */ margin-top: 4rem; /* Default separation */ } .hero-title { margin-bottom: 2rem; line-height: 0.9; } .hero-title-main { display: block; font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; background: var(--hero-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 40px rgba(57, 255, 20, 0.5); margin-bottom: 0.5rem; animation: heroTitleGlow 3s ease-in-out infinite alternate; } .hero-title-sub { display: block; font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 500; color: var(--secondary-color); opacity: 0.9; letter-spacing: 0.1em; } .hero-title-dex { display: block; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 500; font-family: 'Inter', sans-serif; color: #ffffff; text-shadow: none !important; line-height: 1.5; } .hero-title .hero-title-dex .highlight-word { font-weight: 700; font-size: 1.15em; display: inline-block; animation: wordPulse 2s ease-in-out infinite, goldShimmer 2.5s linear infinite; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: linear-gradient(90deg, #B8860B, #FFD700, #DAA520, #FFD700, #B8860B); background-size: 300% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 25px rgba(255, 165, 0, 0.3) !important; } @keyframes wordPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } @keyframes goldShimmer { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } } .hero-subtitle { font-size: clamp(1rem, 2vw, 1.3rem); line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin-bottom: 2.5rem; max-width: 500px; } #hero-token-animation { display: flex; justify-content: center; align-items: center; margin-bottom: 12rem; margin-top: 3rem; min-height: 100px; } .token-animation-item { display: flex; align-items: center; padding: 0.5rem 1rem; background: transparent; border: 1px solid var(--border-color); border-radius: 20px; animation: token-fade-in-out 4s ease-in-out infinite; } .token-animation-item img { width: 40px; height: 40px; margin-right: 1rem; } .token-animation-item span { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); text-shadow: 0 0 10px var(--glow-color); } @keyframes token-fade-in-out { 0% { opacity: 0; transform: translateY(20px); } 25% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } .hero-stats { display: flex; gap: 2rem; margin-bottom: 3rem; } .stat-item { text-align: center; } .stat-number { display: block; font-size: 2rem; font-weight: 700; color: var(--primary-color); text-shadow: 0 0 20px rgba(57, 255, 20, 0.6); margin-bottom: 0.5rem; } .stat-label { font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .hero-actions { display: flex; gap: 1.5rem; align-items: center; } .hero-cta-primary { background: #39ff14; border: none; color: #000; padding: 1.2rem 2.5rem; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(57, 255, 20, 0.4); position: relative; overflow: hidden; text-decoration: none; display: inline-block; } .hero-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 6px 30px rgba(57, 255, 20, 0.6); background: #2ecc40; } .hero-cta-secondary { background: transparent; border: 2px solid #39ff14; color: #39ff14; padding: 1.2rem 2.5rem; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; } .hero-cta-secondary:hover { background: rgba(57, 255, 20, 0.1); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(57, 255, 20, 0.3); } .hero-visual { position: relative; height: 800px; /* Increased height significantly to prevent clipping */ min-height: 800px; /* Minimum height to ensure space */ display: flex; align-items: center; justify-content: center; overflow: visible; /* Ensure logo is not cut off */ transform: translateY(-20px); /* Move logo up much more */ } .hero-glow { display: none; } .hero-particles { position: relative; width: 100%; height: 100%; } .hero-particle { position: absolute; width: 4px; height: 4px; background: var(--primary-color); border-radius: 50%; box-shadow: 0 0 15px var(--primary-color); animation: heroParticleFloat 6s ease-in-out infinite; } .hero-particle:nth-child(1) { top: 20%; left: 30%; animation-delay: 0s; } .hero-particle:nth-child(2) { top: 60%; left: 70%; animation-delay: 1s; } .hero-particle:nth-child(3) { top: 40%; left: 80%; animation-delay: 2s; } .hero-particle:nth-child(4) { top: 80%; left: 20%; animation-delay: 3s; } .hero-particle:nth-child(5) { top: 10%; left: 60%; animation-delay: 4s; } .hero-scroll { position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%); text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; animation: heroScrollBounce 2s ease-in-out infinite; display: flex; /* Use flexbox for better alignment */ flex-direction: column; align-items: center; gap: 0.5rem; /* Space between text and line */ } .hero-scroll span { font-family: var(--font-heading); letter-spacing: 1px; text-transform: uppercase; color: var(--primary-color); /* Highlight text */ text-shadow: 0 0 8px var(--glow-color); font-size: 1rem; padding: 0.6rem 1.2rem; background: rgba(57, 255, 20, 0.1); border: 1px solid var(--primary-color); border-radius: 30px; transition: all 0.3s ease; } .hero-scroll span:hover { background: var(--primary-color); color: #0a0a0a; box-shadow: 0 0 20px var(--primary-color); transform: translateY(-3px); } .scroll-line { width: 2px; height: 40px; background: linear-gradient(to bottom, var(--primary-color), transparent); margin: 0; /* Remove old margin */ border-radius: 1px; animation: heroScrollLine 2s ease-in-out infinite; position: relative; overflow: hidden; /* For the inner glow */ } .scroll-line::before { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3); /* Inner glow */ animation: scrollLineGlow 2s ease-in-out infinite; } @keyframes scrollLineGlow { 0%, 100% { top: -100%; opacity: 0; } 50% { top: 100%; opacity: 1; } } @keyframes heroFadeIn { 0% { opacity: 0; transform: translateY(130px); } 100% { opacity: 1; transform: translateY(100px); } } @keyframes heroFadeInMobile { 0% { opacity: 0; transform: translateY(3rem); } 100% { opacity: 1; transform: translateY(1rem); } } @keyframes heroTitleGlow { 0% { filter: brightness(1) drop-shadow(0 0 20px rgba(57, 255, 20, 0.3)); } 100% { filter: brightness(1.2) drop-shadow(0 0 40px rgba(57, 255, 20, 0.6)); } } @keyframes heroGlowPulse { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(1.2); opacity: 0.6; } } #pinche-supply, #chucho-supply { font-size: 1.5rem !important; letter-spacing: 0.5px; } @keyframes logoModernPulse { 0% { filter: drop-shadow(0 0 2px rgba(57, 255, 20, 0.8)) brightness(1); transform: scale(1); } 25% { filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.9)) brightness(1.1); transform: scale(1.005); } 50% { filter: drop-shadow(0 0 6px rgba(57, 255, 20, 1)) brightness(1.2); transform: scale(1.01); } 75% { filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.9)) brightness(1.1); transform: scale(1.005); } 100% { filter: drop-shadow(0 0 2px rgba(57, 255, 20, 0.8)) brightness(1); transform: scale(1); } } @keyframes heroParticleFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; } 50% { transform: translateY(-20px) rotate(180deg); opacity: 1; } } @keyframes heroScrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } } @keyframes heroScrollLine { 0%, 100% { opacity: 0.5; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.2); } } /* --- TICKER --- */ .ticker-wrap { position: relative; width: 105%; max-width: 105vw; height: 66px; /* Increased by another 5% from 63px to 66px for more space */ overflow: hidden; background: transparent; border-top: 1px solid rgba(57, 255, 20, 0.4); padding: 0; z-index: 5; box-shadow: 0 0 25px rgba(0, 255, 64, 0.15); backdrop-filter: blur(3px); display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 0; /* Negative margin to move even closer to hero */ box-sizing: border-box; contain: strict; /* Contain the layout to prevent overflow */ margin-top: 0; /* Ensure no extra space on top */ } .ticker { display: flex !important; animation: ticker 80s linear infinite; animation-play-state: running !important; /* Ensure animation keeps running */ will-change: transform; /* Optimize for animation */ min-width: 600%; /* Ensure enough content for continuous smooth looping */ align-items: center !important; /* Ensure vertical alignment */ } .ticker-text { position: relative; display: inline-block; } .ticker span { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 3rem; vertical-align: middle; position: relative; height: 100% !important; } .ticker-logo { height: 60px !important; width: auto; max-height: 60px !important; margin: 0 15px; vertical-align: middle; object-fit: contain; filter: drop-shadow(0 0 12px rgba(57, 255, 20, 0.8)); transition: transform 0.3s ease; } .ticker-logo:hover { transform: scale(1.2); filter: drop-shadow(0 0 15px rgba(57, 255, 20, 1)); } .ticker-text { color: #39ff14; font-weight: bold; text-shadow: none; font-size: 1.5em; letter-spacing: 2px; text-transform: uppercase; font-family: 'Courier New', monospace; white-space: nowrap; animation: disintegrate 2s infinite ease-in-out; display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; text-align: center !important; } /* Estilo específico para el logo de OVNI */ .ticker-logo[alt="UFO Logo"] { filter: invert(0.8) sepia(1) hue-rotate(70deg) saturate(5) brightness(1.5) drop-shadow(0 0 6px rgba(57, 255, 20, 0.8)); animation: pulse 2s infinite alternate, blink 2s step-end infinite; } /* Estilo específico para el logo de Pinche Chucho */ .ticker-logo[alt="Pinche Chucho Logo"] { height: 60px !important; max-height: 60px !important; width: auto !important; max-width: 200px !important; margin: 0 20px !important; /* Aumentado el margen */ padding: 0; vertical-align: middle; filter: drop-shadow(0 0 15px rgba(57, 255, 20, 1)) brightness(1.3) contrast(1.1); animation: logoGlow 3s ease-in-out infinite, logoFloat 4s ease-in-out infinite; opacity: 1; transition: all 0.3s ease; transform: translateY(0); object-fit: contain; } @keyframes logoGlow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.8)) brightness(1.1); opacity: 0.9; } 50% { filter: drop-shadow(0 0 15px rgba(57, 255, 20, 1)) brightness(1.3); opacity: 1; } } @keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* Continuous ticker animation for header with 3 copies of content */ @keyframes ticker-continuous { 0% { transform: translateX(0); } 100% { transform: translateX(-33.333%); } } /* Ensure ticker animation never gets paused */ .ticker-wrap .ticker { animation-play-state: running !important; } /* Additional enhancements for continuous animation */ .ticker-wrap { white-space: nowrap; /* Ensure content stays on one line */ } .ticker { white-space: nowrap; /* Prevent wrapping */ } @keyframes disintegrate { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.05); opacity: 1; } } @keyframes buttonPulse { 0% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.8), 0 0 40px rgba(0, 255, 136, 0.5); text-shadow: 0 0 15px rgba(255, 255, 255, 0.8); transform: translateY(0); } 100% { box-shadow: 0 0 30px rgba(0, 255, 136, 0.9), 0 0 60px rgba(0, 255, 136, 0.6); text-shadow: 0 0 25px rgba(255, 255, 255, 1); transform: translateY(-3px); } } @keyframes buttonPulse { 0% { box-shadow: 0 0 15px rgba(0, 255, 136, 0.7), 0 0 30px rgba(0, 255, 136, 0.4); text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); transform: translateY(0); } 100% { box-shadow: 0 0 25px rgba(0, 255, 136, 0.9), 0 0 50px rgba(0, 255, 136, 0.6); text-shadow: 0 0 20px rgba(255, 255, 255, 1); transform: translateY(-2px); } } @keyframes buttonPulse { 0% { box-shadow: 0 0 15px rgba(0, 255, 136, 0.7), 0 0 30px rgba(0, 255, 136, 0.4); text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); transform: translateY(0); } 100% { box-shadow: 0 0 25px rgba(0, 255, 136, 0.9), 0 0 50px rgba(0, 255, 136, 0.6); text-shadow: 0 0 20px rgba(255, 255, 255, 1); transform: translateY(-2px); } } @keyframes buttonGlow { 0% { text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); box-shadow: 0 0 15px rgba(46, 204, 113, 0.7); } 100% { text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(46, 204, 113, 0.9); box-shadow: 0 0 25px rgba(46, 204, 113, 0.9); } } @keyframes blink { 0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(57, 255, 20, 1), 0 0 20px rgba(57, 255, 20, 0.8), 0 0 30px rgba(57, 255, 20, 0.6); filter: brightness(1.5) saturate(1.2); transform: scaleX(1); } 25% { opacity: 0.8; filter: brightness(1.3) saturate(1.1); transform: scaleX(0.95); } 50% { opacity: 0.1; text-shadow: none; filter: brightness(0.5) saturate(0.8); transform: scaleX(0.9); } 75% { opacity: 0.6; filter: brightness(1.1) saturate(1); transform: scaleX(0.98); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* Efecto de escaneo para la marquesina */ .ticker-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.8), transparent); animation: scan 8s linear infinite; z-index: 2; } /* --- UNIFIED PROTOCOLS SECTION --- */ .unified-protocol-section { position: relative; padding: 4rem 2rem; background: transparent; border: 1px solid rgba(57, 255, 20, 0.1); border-radius: 8px; margin: 3rem auto; max-width: 1200px; overflow: hidden; } .terminal-window { background: transparent; border: 1px solid rgba(57, 255, 20, 0.3); border-radius: 8px; box-shadow: 0 0 30px rgba(57, 255, 20, 0.1); overflow: hidden; position: relative; backdrop-filter: blur(5px); } .terminal-header { background: linear-gradient(90deg, #051a05, #0a2a0a); padding: 8px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(57, 255, 20, 0.2); } .terminal-buttons { display: flex; gap: 8px; } .terminal-btn { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .terminal-close { background: #ff5f56; } .terminal-minimize { background: #ffbd2e; } .terminal-expand { background: #27c93f; } .terminal-title { color: rgba(57, 255, 20, 0.7); font-family: 'Fira Code', monospace; font-size: 0.8rem; text-align: center; flex-grow: 1; letter-spacing: 1px; } .terminal-body { padding: 20px; color: #39ff14; font-family: 'Fira Code', monospace; font-size: 0.95rem; line-height: 1.6; min-height: 300px; position: relative; overflow: hidden; } .terminal-line { margin-bottom: 15px; display: flex; flex-wrap: wrap; align-items: center; } .prompt { color: #39ff14; margin-right: 10px; white-space: nowrap; } .command { color: #fff; position: relative; font-weight: 500; } .cursor { animation: blink 1s step-end infinite; margin-left: 2px; } .protocol-output { margin-top: 20px; position: relative; } .protocol-line { display: flex; align-items: center; margin-bottom: 15px; padding: 10px; background: rgba(57, 255, 20, 0.05); border-left: 2px solid rgba(57, 255, 20, 0.5); transition: all 0.3s ease; position: relative; overflow: hidden; } .protocol-line::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.1), transparent); transform: translateX(-100%); animation: shine 3s infinite; } .protocol-tag { background: rgba(57, 255, 20, 0.2); color: #39ff14; padding: 3px 8px; border-radius: 4px; font-size: 0.8rem; margin-right: 15px; min-width: 80px; text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; border: 1px solid rgba(57, 255, 20, 0.3); } .protocol-text { flex: 1; color: #e0e0e0; } .protocol-percent { width: 100px; height: 6px; background: rgba(57, 255, 20, 0.2); border-radius: 3px; margin-left: 15px; overflow: hidden; position: relative; } .protocol-percent::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: var(--progress); background: linear-gradient(90deg, #39ff14, #7fff4f); animation: progress 2s ease-out forwards; } .protocol-scan { position: relative; height: 1px; /* Reducir altura */ background: rgba(57, 255, 20, 0.05); /* Hacer más transparente */ margin: 40px 0 20px; /* Ajustar márgenes */ overflow: hidden; opacity: 0.7; /* Hacer más transparente */ } .scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; /* Hacer la línea más delgada */ background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.3), /* Reducir opacidad */ transparent); animation: scan 8s linear infinite; /* Hacer más lento */ box-shadow: 0 0 15px rgba(57, 255, 20, 0.2); /* Añadir sombra sutil */ } .scan-text { position: absolute; top: -22px; left: 0; color: rgba(57, 255, 20, 0.3); /* Hacer más transparente */ font-size: 0.7rem; /* Reducir tamaño */ letter-spacing: 2px; /* Reducir espaciado */ text-transform: uppercase; width: 100%; text-align: center; font-weight: 300; /* Hacer más fino */ text-shadow: none; /* Eliminar sombra si existe */ } .protocol-matrix { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0.1; z-index: 0; } .terminal-input { margin-top: 20px; display: flex; align-items: center; position: relative; z-index: 1; } .terminal-footer { background: transparent; padding: 10px 20px; display: flex; align-items: center; border-top: 1px solid rgba(57, 255, 20, 0.1); font-size: 0.8rem; } .status-led { width: 10px; height: 10px; background: #ff4444; border-radius: 50%; margin-right: 10px; box-shadow: 0 0 10px #ff4444; } .status-led.active { background: #39ff14; box-shadow: 0 0 10px #39ff14; animation: pulse 2s infinite; } .status-text { color: #39ff14; margin-right: 20px; letter-spacing: 1px; } .status-crypto { display: flex; gap: 20px; margin-left: auto; } .status-crypto span { color: #999; } .crypto-value { color: #39ff14; font-weight: bold; } @keyframes progress { from { width: 0; } } @keyframes scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes shine { 0% { transform: translateX(-100%); } 20% { transform: translateX(100%); } 100% { transform: translateX(100%); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* --- GENERIC SECTION STYLES --- */ /* Ensure all main sections are visible above hero and prevent scroll bars */ .section-container, .main-content>section, .interface-section, .grid-section, .community-section, .dex-mechanism-section, .lp-section, .features-section, .exchange-section, .tokens-section, .how-it-works-section, .stats-section, .intro-section { position: relative; z-index: 20; /* Ensure visibility above hero */ overflow-x: hidden !important; /* Prevent horizontal scroll bars */ overflow-y: visible !important; /* Allow vertical content */ max-width: 100% !important; /* Ensure sections don't exceed viewport width */ box-sizing: border-box !important; /* Include padding in width calculations */ scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* Internet Explorer 10+ */ } /* Remove scrollbars from all sections */ .section-container::-webkit-scrollbar, .main-content>section::-webkit-scrollbar, .interface-section::-webkit-scrollbar, .grid-section::-webkit-scrollbar, .community-section::-webkit-scrollbar, .dex-mechanism-section::-webkit-scrollbar, .lp-section::-webkit-scrollbar, .features-section::-webkit-scrollbar, .exchange-section::-webkit-scrollbar, .tokens-section::-webkit-scrollbar, .how-it-works-section::-webkit-scrollbar, .stats-section::-webkit-scrollbar, .intro-section::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* Ensure all text content is visible */ .section-container h1, .section-container h2, .section-container h3, .section-container .section-heading, .section-container .section-subtitle, .section-container p, .intro-text, .dex-text, .community-text { position: relative; z-index: 35; /* High z-index for all text content */ } /* Additional scrollbar removal for common containers */ .container, .main-content, .content, div, section, article, aside, nav, header, footer { scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* Internet Explorer 10+ */ } .container::-webkit-scrollbar, .main-content::-webkit-scrollbar, .content::-webkit-scrollbar, div::-webkit-scrollbar, section::-webkit-scrollbar, article::-webkit-scrollbar, aside::-webkit-scrollbar, nav::-webkit-scrollbar, header::-webkit-scrollbar, footer::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* Enhanced section entrance animations */ .interface-section, .grid-section { border-top: 1px solid var(--border-color); padding: 2.5rem 2rem; text-align: center; opacity: 0; transform: translateY(40px) scale(0.95); transition: opacity 0.8s ease-out, transform 0.8s ease-out; margin: 2.5rem 0; border-radius: 16px; backdrop-filter: blur(10px); position: relative; z-index: 20; /* Updated z-index */ background: transparent; overflow: hidden; border: 1px solid rgba(0, 240, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } /* Modern geometric overlays for sections */ .interface-section::before, .grid-section::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: radial-gradient(circle at 20% 20%, rgba(0, 240, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 0, 200, 0.08) 0%, transparent 50%), conic-gradient(from 0deg at 50% 50%, rgba(0, 200, 255, 0.05) 0deg, transparent 90deg, rgba(255, 0, 200, 0.05) 180deg, transparent 270deg); animation: geometric-shift 12s ease-in-out infinite; z-index: 0; pointer-events: none; } .interface-section::after, .grid-section::after { content: '' !important; position: absolute !important; top: -50%; left: -50%; width: 200%; height: 200%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(0, 240, 255, 0.02) 0deg 10deg, transparent 10deg 20deg, rgba(255, 0, 200, 0.02) 20deg 30deg, transparent 30deg 40deg); animation: rotating-pattern 20s linear infinite; z-index: 0; pointer-events: none; opacity: 0.6; } .interface-section.is-visible, .grid-section.is-visible { opacity: 1; transform: translateY(0) scale(1); background: transparent; } .full-width-section { max-width: none; padding: 2rem 0; margin: 0; border-radius: 0; backdrop-filter: none; border-left: none; border-right: none; box-shadow: none; } .exchange-animation-text { color: var(--primary-color); font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; text-shadow: 0 0 10px var(--glow-color); } .exchange-token-text { font-size: 4.5rem; margin-bottom: 3rem; text-shadow: 0 0 30px var(--glow-color), 0 0 60px var(--glow-color), 0 0 90px rgba(57, 255, 20, 0.5); font-weight: 700; transition: all 0.3s ease-in-out; position: relative; display: inline-block; color: transparent; background: linear-gradient(45deg, var(--primary-color) 0%, var(--color-info) 50%, var(--primary-color) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px var(--primary-color), 0 0 30px var(--color-info), 0 0 45px var(--primary-color); animation: holographic-glow 3s ease-in-out infinite alternate; } .exchange-logo { width: 250px; height: auto; animation: pulse 4s ease-in-out infinite, glitch 6s linear infinite; filter: drop-shadow(0 0 20px var(--glow-color)); } .full-width-section .section-title { margin-bottom: 2rem; } .full-width-section { display: flex; flex-direction: column; align-items: center; } .interface-section.is-visible, .grid-section.is-visible { opacity: 1; transform: translateY(0); } .section-title { font-size: 3.2rem; margin-bottom: 2.8rem; font-weight: 700; transition: all 0.3s ease-in-out; /* Add transition for hover effect */ -webkit-text-stroke: 0; position: relative; /* Needed for glitch effect */ display: inline-block; /* Needed for glitch effect */ animation: glitch-text 8s infinite linear alternate-reverse; /* Subtle glitch */ z-index: 25; /* Ensure titles are always visible */ } .section-title:hover { transform: scale(1.01); /* Subtle scale on hover */ text-shadow: 0 0 30px var(--glow-color), 0 0 55px var(--glow-color), 0 0 80px rgba(57, 255, 20, 0.5); /* Even more intense glow on hover */ } /* --- PROTOCOL CARDS --- */ .grid-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2.5rem; justify-content: center; align-items: stretch; } .container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 20px; position: relative; z-index: 1; box-sizing: border-box; } /* Enhanced pulsing border effect */ @keyframes border-pulse { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.02); } } .protocol-card::before, .protocol-card::after { content: ''; position: absolute; width: 25px; height: 25px; border-color: var(--primary-color); border-style: solid; transition: transform 0.4s ease; } .protocol-card::before { top: -5px; left: -5px; border-width: 2px 0 0 2px; } .protocol-card::after { bottom: -5px; right: -5px; border-width: 0 2px 2px 0; } .protocol-card:hover { box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.4), 0 6px 20px rgba(0, 0, 0, 0.4); transform: translateY(-3px); border-color: var(--primary-color); } .protocol-card:hover::before, .protocol-card:hover::after { transform: scale(1.05); } .protocol-card h3 { font-family: var(--font-heading); color: #ffffff; margin-bottom: 1.5rem; } .protocol-card p { color: #ffffff; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1; display: flex; align-items: center; text-align: center; } .protocol-card .card-content { display: flex; flex-direction: column; height: 100%; justify-content: space-between; } .protocol-card .cta-button { margin-top: auto; align-self: center; } .protocol-image { width: 80px; height: 80px; object-fit: contain; margin: 1.5rem auto; filter: drop-shadow(0 0 10px var(--glow-color)); flex-shrink: 0; } /* --- WHITELIST & EXCHANGE FORMS --- */ .whitelist-form { display: flex; flex-direction: column; gap: 1.5rem; max-width: 600px; margin: 0 auto; text-align: left; } .contact-form { display: flex; flex-direction: column; gap: 1.5rem; max-width: 600px; margin: 0 auto; text-align: left; } .form-group, .form-group-captcha { display: flex; flex-direction: column; } .form-group label, .form-group-captcha label { font-family: var(--font-heading); font-weight: 700; margin-bottom: 0.8rem; color: var(--primary-color); font-size: 1.1rem; } input[type="text"], input[type="email"], textarea { background: transparent; border: 1px solid var(--border-color); color: var(--secondary-color); padding: 1rem; font-family: var(--font-body); font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s; border-radius: 12px; } input[type="text"]:focus, input[type="email"]:focus, textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 10px var(--glow-color); } textarea { resize: vertical; min-height: 120px; } .cta-button { background: linear-gradient(135deg, rgba(0, 255, 136, 0.5) 0%, rgba(57, 255, 20, 0.5) 50%, rgba(0, 255, 136, 0.5) 100%); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff !important; padding: 1.3rem 2.8rem; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; cursor: pointer; border-radius: 50px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); align-self: center; margin: 2rem auto; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); position: relative; overflow: hidden; text-shadow: 0 0 15px rgba(255, 255, 255, 0.8); animation: buttonPulse 2s infinite alternate; display: inline-block; min-width: 300px; text-align: center; } .cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.6s ease; } .cta-button:hover::before { left: 100%; } .whitelist-button { background: linear-gradient(135deg, #39ff14 0%, #2ae60c 50%, #39ff14 100%); color: #000 !important; border: 1px solid rgba(255, 255, 255, 0.2); padding: 1.3rem 2.8rem; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; cursor: pointer; border-radius: 50px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); align-self: center; margin: 2rem auto; box-shadow: 0 0 30px rgba(57, 255, 20, 0.9), 0 0 70px rgba(57, 255, 20, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); position: relative; overflow: hidden; text-shadow: 0 0 20px #fff, 0 2px 4px rgba(0, 0, 0, 0.7); animation: buttonPulse 2s infinite alternate; display: inline-block; min-width: 300px; text-align: center; } .whitelist-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.1), transparent); transition: left 0.6s ease; } .whitelist-button:hover { background: transparent; transform: translateY(-5px) scale(1.05); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); color: #ffffff !important; text-shadow: 0 0 15px rgba(255, 255, 255, 0.8); animation: none; letter-spacing: 3.5px; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .whitelist-button:hover::before { left: 100%; } .cta-button:active { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 25px rgba(0, 255, 136, 0.9), 0 0 50px rgba(0, 255, 136, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .exchange-subtitle { margin-bottom: 1rem; font-size: 1.1rem; } .exchange-animation-container { position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 100%; padding: 20px; /* Adjust as needed */ } .exchange-logo { width: 70%; height: 70%; object-fit: contain; animation: pulse 6s ease-in-out infinite, glitch 8s linear infinite; filter: drop-shadow(0 0 15px var(--glow-color)); position: absolute; top: 15%; left: 15%; z-index: 1; pointer-events: none; } .particle-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .particle-container .particle { position: absolute; width: 3px; height: 3px; background: var(--primary-color); border-radius: 50%; animation: particle-float 5s ease-in-out infinite; opacity: 0; } @keyframes pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px var(--glow-color)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 30px var(--glow-color)); } } @keyframes glitch { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(2px, -2px); } 60% { transform: translate(-1px, 1px); } 80% { transform: translate(1px, -1px); } } @keyframes particle-float { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 1; } 100% { transform: translateY(-150px) translateX(calc(100px * (var(--i) - 10))) scale(0); opacity: 0; } } .placeholder-widget { border: 1px dashed #39ff14; /* Using Pinche Chucho green color to match the brand */ padding: 3rem; max-width: 500px; margin: 0 auto; } .solana-logo { max-width: 150px; margin-top: 1rem; filter: grayscale(1) brightness(1.5); } /* --- MODERN MORPHING EFFECT --- */ .morphing { position: relative; display: inline-block; background: linear-gradient(90deg, var(--primary-color) 40%, var(--color-info) 50%, var(--primary-color) 60%); background-size: 300% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: title-flare-animation 6s ease-in-out infinite; } @keyframes morphing-shift { 0% { background-position: 0% 0%; filter: blur(0.2px) hue-rotate(0deg); } 25% { background-position: 100% 100%; filter: blur(0.1px) hue-rotate(45deg); } 50% { background-position: 100% 0%; filter: blur(0.2px) hue-rotate(90deg); } 75% { background-position: 0% 100%; filter: blur(0.1px) hue-rotate(135deg); } 100% { background-position: 0% 0%; filter: blur(0.2px) hue-rotate(180deg); } } @keyframes morphing-pulse { 0%, 100% { opacity: 0.3; transform: scale(1); filter: blur(0.3px); } 50% { opacity: 0.5; transform: scale(1.005); filter: blur(0.2px); } } /* --- FOOTER --- */ .footer-ticker-text { color: #ffffff; font-size: 1.1rem; margin: 0; padding: 0.5rem 0; white-space: nowrap; overflow: hidden; animation: ticker 20s linear infinite; line-height: 1.2; } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .social-links { margin-bottom: 1rem; } .social-links a { margin: 0 1.5rem; font-size: 2.5rem; color: var(--primary-color); transition: all 0.3s ease; padding: 10px 20px; border-radius: 10px; background: transparent; text-decoration: none; font-family: var(--font-heading); } .social-links a:hover { color: var(--primary-color); transform: translateY(-3px) scale(1.1); box-shadow: 0 10px 20px rgba(57, 255, 20, 0.3); } /* --- ANIMATIONS --- */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* AOS Animation Overrides */ [data-aos="fade-up"] { opacity: 0; transform: translateY(50px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-aos="fade-up"].aos-animate { opacity: 1; transform: translateY(0); } [data-aos="fade-right"] { opacity: 0; transform: translateX(-50px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-aos="fade-right"].aos-animate { opacity: 1; transform: translateX(0); } [data-aos="fade-left"] { opacity: 0; transform: translateX(50px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-aos="fade-left"].aos-animate { opacity: 1; transform: translateX(0); } [data-aos="zoom-in"] { opacity: 0; transform: scale(0.8); transition: opacity 0.6s ease, transform 0.6s ease; } [data-aos="zoom-in"].aos-animate { opacity: 1; transform: scale(1); } [data-aos="fade-in"] { opacity: 0; transition: opacity 0.6s ease; } [data-aos="fade-in"].aos-animate { opacity: 1; } /* --- RESPONSIVE DESIGN --- */ @media (max-width: 1200px) { .features-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .features-grid { align-items: stretch; width: 100vw; margin-left: calc(-50vw + 50%); } .features-grid-2x2 { gap: 1.5rem; max-width: 100%; } .feature-card.uniform { min-height: 220px; } .feature-card.large { grid-column: span 2; min-height: 400px; } .feature-card.medium { grid-column: span 1; min-height: 350px; } .feature-card.small { grid-column: span 2; min-height: 300px; } .feature-card.large, .feature-card.medium { grid-column: span 6; } .feature-card.small { grid-column: span 3; } .stats-grid { grid-template-columns: repeat(2, minmax(250px, 1fr)); } } /* Tablet breakpoint for 2x2 grid */ @media (min-width: 481px) and (max-width: 768px) { .features-grid-2x2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1.5rem; } .feature-card.uniform { min-height: 200px; } } @media (max-width: 768px) { .section-container { padding: 0 1.5rem; } .section-heading { font-size: clamp(2rem, 10vw, 3rem); } .section-subtitle { font-size: 1rem; margin-bottom: 3rem; } .features-section, .exchange-section, .tokens-section, .how-it-works-section, .stats-section, .community-section, .dex-mechanism-section, .intro-section, .content-details-section, .rules-section, .chucho-section, .lp-section { padding: 4rem 0; } .dex-text, .intro-text { font-size: 1.1rem; } .content-card { padding: 2rem; } .content-card.large { padding: 2.5rem; } .content-card h3 { font-size: 1.5rem; } .content-card p, .content-list li { font-size: 1rem; } .liquidity-flow { padding: 1.5rem; } .highlight-quote { padding: 1.5rem; } .highlight-quote .text-highlight { font-size: 1.1rem; } .features-grid { grid-template-columns: 1fr; gap: 1.5rem; } .features-grid-2x2 { grid-template-columns: 1fr; grid-template-rows: auto; gap: 1.5rem; } .feature-card.uniform { min-height: 250px; aspect-ratio: auto; } } /* Mobile breakpoint for 2x2 grid */ @media (max-width: 480px) { .features-grid-2x2 { grid-template-columns: 1fr; grid-template-rows: auto; gap: 1rem; margin-top: 2rem; } .feature-card.uniform { min-height: 220px; aspect-ratio: auto; } .feature-card.large, .feature-card.medium, .feature-card.small { grid-column: span 1; min-height: auto; padding: 2rem; } .tokens-grid { grid-template-columns: 1fr; gap: 2rem; } .token-header { flex-direction: column; text-align: center; } .token-stats { grid-template-columns: 1fr; gap: 1.5rem; } .process-flow { flex-direction: column; gap: 2rem; } .process-connector { width: 2px; height: 50px; background: linear-gradient(180deg, var(--border-color), var(--accent-primary), var(--border-color)); } .process-connector::after { content: '↓'; right: auto; left: -10px; top: auto; bottom: -20px; } .stats-grid { grid-template-columns: 1fr; gap: 1.5rem; } .community-text { font-size: 1.1rem; } .exchange-widget-wrapper { padding: 1rem; } .exchange-widget-wrapper iframe { height: 500px; } /* Add margin to hero section but not too much */ .hero-section { margin-top: -1rem; /* Reduced negative margin to prevent cutting off the bottom */ z-index: 10 !important; /* Reduced z-index to avoid hiding content */ } /* Reduce ticker height on mobile to raise content */ .ticker-wrap { height: 50px !important; /* Original height */ margin-bottom: -40px !important; /* Much more negative margin to bring hero very close */ overflow: hidden !important; z-index: 15 !important; /* Higher z-index to stay above hero */ } .ticker { font-size: 0.8rem !important; /* Smaller font size */ letter-spacing: 0.5px !important; /* Tighter spacing */ } .ticker-logo { height: 60px !important; /* Consistent height for all icons */ max-height: 60px !important; margin: 0 8px !important; /* Adjusted margins */ } .ticker span { padding: 0 1rem !important; /* Reduced padding */ } /* New responsive styles for content text */ .interface-section h2 { font-size: 2.2rem; margin-bottom: 2rem; } .interface-section p { font-size: 1rem; line-height: 1.6; letter-spacing: 0.3px; } .exchange-widget-container { min-height: 350px; margin: 15px 0; } .exchange-widget-container iframe { min-height: 350px; } /* Hero section responsive - ensure logo appears first */ .hero-section { min-height: unset; /* Allow hero section to shrink */ padding: 4rem 1rem; display: flex; flex-direction: column; } .hero-content { grid-template-columns: 1fr; gap: 3rem; text-align: center; display: flex; flex-direction: column; /* No need for column-reverse since HTML is now in correct order */ } .hero-stats { flex-direction: row; justify-content: center; gap: 1.5rem; } .hero-actions { flex-direction: column; gap: 1rem; align-items: center; } .hero-cta-primary, .hero-cta-secondary { width: 100%; max-width: 200px; } /* Logo styles removed - now handled by consolidated responsive system */ .hero-glow { width: 200px; height: 200px; } .hero-scroll { display: none; /* Hide scroll indicator on mobile */ } /* Adjustments for holographic titles and exchange token text */ .holographic-title { font-size: 2rem; margin-bottom: 1.5rem; } .exchange-token-text { font-size: 3.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 2rem; text-shadow: 0 0 20px rgba(57, 255, 20, 0.8), 0 0 40px rgba(57, 255, 20, 0.5); } .token-info h2 { font-size: 2rem; } .token-info p { font-size: 0.9rem; } .exchange-logo { width: 80%; height: 80%; top: 10%; left: 10%; } /* Further reduce padding for interface sections */ .interface-section { padding: 2rem 1rem; } #tokens { display: flex; flex-direction: column; gap: 2rem; /* Add some space between token-info divs */ } } @media (max-width: 420px) { .hero-section { margin-top: 40px; /* Moderate margin to avoid collision with ticker */ z-index: 10 !important; /* Reduced z-index to avoid hiding content */ } .container { padding: 1rem; margin: 0.5rem; } .holographic-title { font-size: 1.8rem; margin-bottom: 1rem; } .exchange-token-text { font-size: 2.8rem; font-weight: 700; line-height: 1.2; margin-bottom: 2rem; text-shadow: 0 0 20px rgba(57, 255, 20, 0.8), 0 0 40px rgba(57, 255, 20, 0.5); } .interface-section h2 { font-size: 1.8rem; margin-bottom: 1.5rem; } .interface-section p { font-size: 0.9rem; line-height: 1.5; } .exchange-widget-container { min-height: 300px; } .exchange-widget-container iframe { min-height: 300px; } .logo-container-widget { width: 80%; height: 80%; } .widget-particles { display: block; /* Ensure particles are visible on small mobile */ } .widget-particle { width: 2px; height: 2px; /* Smaller particles for mobile */ } .hero-section { padding: 2rem 0.5rem; display: flex; flex-direction: column; } .hero-title-main { font-size: clamp(2rem, 10vw, 3.5rem); } .hero-title-sub { font-size: clamp(1rem, 5vw, 1.8rem); } .hero-subtitle { font-size: 0.85rem; } /* Hero logo styles removed - now handled by consolidated responsive system */ .social-links a { font-size: 2rem; margin: 0 1rem; padding: 8px 15px; } .main-footer p { font-size: 0.8rem; } } /* iPhone 14+ specific fixes */ /* Removed conflicting media query - now handled by consolidated responsive system */ /* Removed conflicting landscape media query - now handled by consolidated responsive system */ /* Removed conflicting media query - now handled by consolidated responsive system */ /* Removed conflicting landscape media query - now handled by consolidated responsive system */ /* --- ENHANCED CYBERPUNK EFFECTS --- */ /* Floating particles effect - simplified */ @keyframes float { 0% { transform: translateY(0px) rotate(0deg); opacity: 0.8; } 100% { transform: translateY(-100vh) rotate(180deg); opacity: 0; } } .floating-particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: hidden; } .particle { position: absolute; width: 3px; height: 3px; background: var(--primary-color); box-shadow: 0 0 10px var(--primary-color); border-radius: 50%; animation: float linear infinite; } .particle:nth-child(1) { left: 15%; animation-duration: 12s; animation-delay: -2s; } .particle:nth-child(2) { left: 25%; animation-duration: 15s; animation-delay: -4s; } .particle:nth-child(3) { left: 35%; animation-duration: 10s; animation-delay: -6s; } .particle:nth-child(4) { left: 45%; animation-duration: 14s; animation-delay: -8s; } .particle:nth-child(5) { left: 55%; animation-duration: 11s; animation-delay: -10s; } .particle:nth-child(6) { left: 65%; animation-duration: 13s; animation-delay: -12s; } .particle:nth-child(7) { left: 75%; animation-duration: 16s; animation-delay: -14s; } .particle:nth-child(8) { left: 85%; animation-duration: 9s; animation-delay: -16s; } /* Enhanced neon glow effects */ .neon-border { position: relative; border: 2px solid var(--primary-color) !important; box-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 15px var(--primary-color), 0 0 20px var(--primary-color), inset 0 0 5px var(--primary-color), inset 0 0 10px var(--primary-color); animation: neon-pulse 2s ease-in-out infinite alternate; } @keyframes neon-pulse { from { box-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 15px var(--primary-color), 0 0 20px var(--primary-color), inset 0 0 5px var(--primary-color), inset 0 0 10px var(--primary-color); } to { box-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color), 0 0 40px var(--primary-color), inset 0 0 10px var(--primary-color), inset 0 0 20px var(--primary-color); } } /* Holographic effect for cards */ .holographic { background: linear-gradient(45deg, rgba(57, 255, 20, 0.1) 0%, rgba(0, 247, 255, 0.1) 25%, rgba(255, 65, 54, 0.1) 50%, rgba(57, 255, 20, 0.1) 75%, rgba(0, 247, 255, 0.1) 100%); background-size: 400% 400%; animation: holographic-shift 3s ease-in-out infinite; position: relative; overflow: hidden; } .holographic::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); animation: holographic-overlay 4s linear infinite; transform: rotate(45deg); } @keyframes holographic-shift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } @keyframes holographic-overlay { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } /* Matrix rain effect - full screen */ .matrix-bg { position: fixed !important; top: 0 !important; /* Reset to top */ left: 0; width: 15vw; height: 100vh !important; /* Full height */ pointer-events: none; z-index: -2; opacity: 0.2; clip-path: inset(85vh 0 0 0); /* Clip the top 85vh - only show bottom 15vh, lower position */ /* Increased opacity for more visible effect */ font-family: 'Courier New', monospace; font-size: 20px; color: var(--primary-color); overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)); gap: 0; padding: 0; margin: 0; } #matrix-bg-right { position: fixed !important; top: 0 !important; /* Reset to top */ right: 0; width: 15vw; height: 100vh !important; /* Full height */ pointer-events: none; z-index: -2; opacity: 0.2; clip-path: inset(85vh 0 0 0); /* Clip the top 85vh - only show bottom 15vh, lower position */ font-family: 'Courier New', monospace; font-size: 20px; color: var(--primary-color); overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)); gap: 0; padding: 0; margin: 0; transform: scaleX(-1); } #matrix-bg-right .matrix-column { transform: scaleX(-1); } .matrix-column { position: relative; height: 100vh; width: 100%; text-align: center; writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; animation: matrix-fall linear infinite; text-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 20px rgba(0, 212, 255, 0.8); color: rgba(0, 212, 255, 0.95); filter: brightness(1.3) contrast(1.1); overflow: hidden; } @keyframes matrix-fall { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } } /* Añadir más columnas para cubrir toda la pantalla */ .matrix-column:nth-child(1) { left: 0%; animation-duration: 8s; animation-delay: -1s; } .matrix-column:nth-child(2) { left: 5%; animation-duration: 6s; animation-delay: -2s; } .matrix-column:nth-child(3) { left: 10%; animation-duration: 10s; animation-delay: -3s; } .matrix-column:nth-child(4) { left: 15%; animation-duration: 7s; animation-delay: -4s; } .matrix-column:nth-child(5) { left: 20%; animation-duration: 9s; animation-delay: -5s; } .matrix-column:nth-child(6) { left: 25%; animation-duration: 8s; animation-delay: -6s; } .matrix-column:nth-child(7) { left: 30%; animation-duration: 6s; animation-delay: -7s; } .matrix-column:nth-child(8) { left: 35%; animation-duration: 11s; animation-delay: -8s; } .matrix-column:nth-child(9) { left: 40%; animation-duration: 9s; animation-delay: -9s; } .matrix-column:nth-child(10) { left: 45%; animation-duration: 7s; animation-delay: -10s; } .matrix-column:nth-child(11) { left: 50%; animation-duration: 10s; animation-delay: -11s; } .matrix-column:nth-child(12) { left: 55%; animation-duration: 8s; animation-delay: -12s; } .matrix-column:nth-child(13) { left: 60%; animation-duration: 6s; animation-delay: -13s; } .matrix-column:nth-child(14) { left: 65%; animation-duration: 9s; animation-delay: -14s; } .matrix-column:nth-child(15) { left: 70%; animation-duration: 7s; animation-delay: -15s; } .matrix-column:nth-child(16) { left: 75%; animation-duration: 10s; animation-delay: -16s; } .matrix-column:nth-child(17) { left: 80%; animation-duration: 8s; animation-delay: -17s; } .matrix-column:nth-child(18) { left: 85%; animation-duration: 6s; animation-delay: -18s; } .matrix-column:nth-child(19) { left: 90%; animation-duration: 9s; animation-delay: -19s; } .matrix-column:nth-child(20) { left: 95%; animation-duration: 7s; animation-delay: -20s; } /* Enhanced form styling */ .form-group-captcha { position: relative; } .form-group-captcha label { background: linear-gradient(90deg, var(--primary-color), var(--color-info), var(--color-warn)); background-size: 200% 100%; animation: gradient-shift 3s ease infinite; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px rgba(57, 255, 20, 0.5); } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Cyberpunk button enhancements */ .cyber-button { position: relative; background: transparent !important; border: 2px solid var(--primary-color) !important; overflow: hidden !important; transition: all 0.3s ease !important; } .cyber-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.4), transparent); transition: left 0.5s ease; z-index: -1; } .cyber-button:hover::before { left: 100%; } .cyber-button:hover { border-color: var(--color-info) !important; box-shadow: 0 0 20px var(--primary-color), 0 0 40px var(--primary-color), 0 0 60px var(--primary-color) !important; transform: translateY(-2px) !important; } /* Enhanced scramble text effect */ .scramble-text { position: relative; display: inline-block; } .scramble-text::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 40%, rgba(57, 255, 20, 0.3) 50%, transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .scramble-text:hover::after { opacity: 1; } /* REMOVED GRID OVERLAY - This was interfering with terminal effects visibility */ /* .grid-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -4; opacity: 0.00; background-image: linear-gradient(rgba(57, 255, 20, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(57, 255, 20, 0.1) 1px, transparent 1px); background-size: 50px 50px; animation: grid-pulse 4s ease-in-out infinite; } */ /* Enhanced loading animation */ .protocol-card { background: transparent !important; border: 1px solid var(--border-color); padding: 2.5rem; border-radius: 20px; transform-style: preserve-3d; will-change: transform; transition: transform 0.4s ease, box-shadow 0.4s ease; position: relative; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: space-between; min-height: 500px; max-height: 500px; height: 500px; width: 100%; max-width: 350px; overflow: hidden; } .protocol-card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--primary-color), var(--color-info), var(--primary-color)); border-radius: 22px; z-index: -1; opacity: 0; animation: border-pulse 3s ease-in-out infinite; filter: blur(1px); } .loading-pulse { display: inline-block; width: 20px; height: 20px; border: 2px solid transparent; border-top-color: var(--primary-color); border-radius: 50%; animation: loading-spin 2s linear infinite; opacity: 0.3; } .exchange-widget-container { position: relative; width: 100%; max-width: 500px; min-height: 600px; height: 600px; overflow: hidden; margin: 2rem auto 0 auto; border: 1px solid #39ff14; /* Using Pinche Chucho green color to match the brand */ border-radius: 10px; background: transparent; } .exchange-widget-container:hover { border-color: #39ff14; box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.4), 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(57, 255, 20, 0.1); transform: translateY(-2px); } .exchange-widget-container iframe { width: 100%; height: 100%; min-height: 400px; /* Aumentado para evitar cortes en móviles */ border: none; } @keyframes border-glow { 0% { opacity: 0.1; } 100% { opacity: 0.3; } } /* Magic Sparkle Effect */ @keyframes sparkle { 0% { transform: scale(0) rotate(0deg); opacity: 1; } 50% { transform: scale(1) rotate(180deg); opacity: 0.8; } 100% { transform: scale(0) rotate(360deg); opacity: 0; } } .magic-sparkle { position: absolute; width: 8px; height: 8px; background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%); border-radius: 50%; pointer-events: none; animation: sparkle 1.5s ease-out forwards; box-shadow: 0 0 15px var(--primary-color); } .sparkle-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; /* Reduced z-index to stay behind content */ overflow: hidden; } /* Magic cursor trail effect */ body { cursor: url('data:image/svg+xml,') 12 12, crosshair; } .exchange-widget-container { position: relative; width: 100%; height: 80vh; /* Make it take up 80% of viewport height */ overflow: hidden; margin: 0; /* Remove margin */ border: 1px solid #39ff14; /* Using Pinche Chucho green color to match the brand */ border-radius: 10px; background: transparent; } .exchange-widget-container:hover { border-color: #39ff14; box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.4), 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(57, 255, 20, 0.1); transform: translateY(-2px); } .exchange-widget-container iframe { width: 100%; height: 600px; min-height: 600px; border: none; } .token-ecosystem-section { text-align: center; margin-top: 2rem; } .token-ecosystem-img { max-width: 400px; width: 100%; height: auto; margin-top: 1rem; filter: drop-shadow(0 0 15px rgba(57, 255, 20, 0.6)); animation: logoModernPulse 4s ease-in-out infinite; } /* Mobile-specific adjustments */ @media (max-width: 768px) { .exchange-widget-container { min-height: 600px; height: 600px; margin: 0; } .exchange-widget-container iframe { min-height: 600px; height: 600px; } .logo-container-widget { width: 75%; height: 75%; } .widget-particles { display: block; /* Ensure particles are visible on mobile */ } /* Hero logo styles removed - now handled by consolidated responsive system */ } /* Widget logo particles - similar to hero particles */ .widget-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .widget-particle { position: absolute; width: 3px; height: 3px; background: #39ff14; /* Using Pinche Chucho green color to match the brand */ border-radius: 50%; box-shadow: 0 0 12px #39ff14; /* Using Pinche Chucho green color to match the brand */ animation: widgetParticleFloat 5s ease-in-out infinite; } .widget-particle:nth-child(1) { top: 25%; left: 35%; animation-delay: 0s; } .widget-particle:nth-child(2) { top: 65%; left: 75%; animation-delay: 1.2s; } .widget-particle:nth-child(3) { top: 45%; left: 85%; animation-delay: 2.4s; } .widget-particle:nth-child(4) { top: 75%; left: 25%; animation-delay: 3.6s; } .widget-particle:nth-child(5) { top: 15%; left: 65%; animation-delay: 4.8s; } .widget-particle:nth-child(6) { top: 35%; left: 15%; animation-delay: 0.6s; } .widget-particle:nth-child(7) { top: 55%; left: 45%; animation-delay: 1.8s; } .widget-particle:nth-child(8) { top: 85%; left: 55%; animation-delay: 3.0s; } .widget-particle:nth-child(9) { top: 5%; left: 25%; animation-delay: 4.2s; } .widget-particle:nth-child(10) { top: 70%; left: 5%; animation-delay: 2.1s; } .widget-particle:nth-child(11) { top: 20%; left: 85%; animation-delay: 3.3s; } .widget-particle:nth-child(12) { top: 50%; left: 95%; animation-delay: 1.5s; } .widget-particle:nth-child(13) { top: 90%; left: 35%; animation-delay: 2.7s; } .widget-particle:nth-child(14) { top: 10%; left: 45%; animation-delay: 4.5s; } .widget-particle:nth-child(15) { top: 60%; left: 20%; animation-delay: 0.9s; } /* Exchange text particles */ .exchange-particle { position: absolute; width: 2px; height: 2px; background: #39ff14; /* Using Pinche Chucho green color to match the brand */ border-radius: 50%; box-shadow: 0 0 8px #39ff14; /* Using Pinche Chucho green color to match the brand */ animation: exchangeParticleFloat 4s ease-in-out infinite; } .exchange-particle:nth-child(1) { top: 30%; left: 20%; animation-delay: 0s; } .exchange-particle:nth-child(2) { top: 70%; left: 80%; animation-delay: 0.8s; } .exchange-particle:nth-child(3) { top: 50%; left: 90%; animation-delay: 1.6s; } .exchange-particle:nth-child(4) { top: 80%; left: 10%; animation-delay: 2.4s; } .exchange-particle:nth-child(5) { top: 20%; left: 70%; animation-delay: 3.2s; } @keyframes exchangeParticleFloat { 0%, 100% { transform: translateY(0px) scale(0.8); opacity: 0.6; } 50% { transform: translateY(-12px) scale(1.1); opacity: 1; } } .hero-cta::after, .cta-button::after { content: '✨'; position: absolute; top: -10px; right: -10px; font-size: 1.5rem; animation: magic-sparkle-float 2s ease-in-out infinite alternate; opacity: 0; transition: opacity 0.3s ease; } .hero-cta:hover::after, .cta-button:hover::after { opacity: 1; } @keyframes magic-sparkle-float { 0% { transform: translateY(0px) rotate(0deg); } 100% { transform: translateY(-10px) rotate(360deg); } } /* Magic form enhancement */ .form-group-captcha label { position: relative; } .form-group-captcha label::before { content: '🔮'; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; animation: crystal-rotate 3s linear infinite; } @keyframes crystal-rotate { 0% { transform: translateY(-50%) rotate(0deg); } } /* Magic background enhancement */ .container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 100%); pointer-events: none; z-index: -1; border-radius: 20px; } .token-info { padding: 2rem; border-radius: 15px; border: 1px solid var(--border-color); text-shadow: 0 0 5px rgba(255, 255, 255, 0.7); position: relative; overflow: hidden; background: transparent; backdrop-filter: none; } /* Modern geometric overlays for token info */ .token-info::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; animation: none; z-index: 0; pointer-events: none; } .token-info::after { content: ''; position: absolute; top: -30%; left: -30%; width: 160%; height: 160%; background: transparent; animation: none; z-index: 0; pointer-events: none; opacity: 0; } .animated-section-background { position: relative; overflow: hidden; background: transparent; } .animated-section-background::before { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; background: transparent; animation: none; z-index: 0; } .animated-section-background::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; animation: none; z-index: 0; } @keyframes animated-grid { 0% { transform: translate(0, 0); } 100% { transform: translate(-50%, -50%); } } @keyframes scanline-overlay { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } } .holographic-title { font-size: 3.2rem; margin-bottom: 2.8rem; text-shadow: 0 0 3px var(--glow-color); font-weight: 700; transition: all 0.3s ease-in-out; -webkit-text-stroke: 0; position: relative; display: inline-block; color: transparent; background: linear-gradient(45deg, var(--primary-color) 0%, var(--color-info) 50%, var(--primary-color) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: holographic-glow 3s ease-in-out infinite alternate; } .holographic-title::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(57, 255, 20, 0.5) 0%, rgba(0, 247, 255, 0.5) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: blur(0.5px); opacity: 0.7; animation: holographic-shift 5s ease-in-out infinite alternate; } @keyframes holographic-glow { 0% { text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--color-info); } 100% { text-shadow: 0 0 15px var(--primary-color), 0 0 25px var(--color-info), 0 0 35px var(--primary-color); } } @keyframes holographic-shift { 0% { transform: translateX(0) translateY(0); opacity: 0.7; } 25% { transform: translateX(1px) translateY(-1px); opacity: 0.8; } 50% { transform: translateX(-1px) translateY(1px); opacity: 0.6; } 75% { transform: translateX(1px) translateY(1px); opacity: 0.9; } 100% { transform: translateX(0) translateY(0); opacity: 0.7; } } .token-info h2 { font-size: 3.2rem; margin-bottom: 2.8rem; font-weight: 700; color: #063d1a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .token-info p { font-size: 1.1rem; line-height: 1.6; } /* Four-column layout for tokens section (2x2 grid) */ .tokens-four-column { display: grid; grid-template-columns: repeat(2, minmax(400px, 1fr)); gap: 3rem; margin: 3rem auto; align-items: start; max-width: 1400px; width: 95%; padding: 0 2rem; justify-items: center; } /* Two-column layout for tokens content (max width) */ .tokens-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin: 3rem auto; max-width: 1400px; width: 95%; padding: 0 2rem; justify-items: center; } .token-column { background: transparent; border-radius: 15px; padding: 2rem; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all 0.3s ease; position: relative; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; min-width: 0; /* Allow flex items to shrink below content size */ display: flex; flex-direction: column; } .token-column-content { display: flex; flex-direction: column; height: 100%; } .token-icon-circle { width: 60px; height: 60px; border-radius: 50%; background: transparent; border: 2px solid; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem auto; position: relative; z-index: 2; box-shadow: 0 0 18px rgba(57, 255, 20, 0.3); transition: all 0.3s ease; animation: token-circle-pulse 2s ease-in-out infinite alternate; /* New animation */ } .token-icon-circle:hover { transform: scale(1.1); box-shadow: 0 0 30px rgba(57, 255, 20, 0.5); } /* Modern token icon animations */ .token-icon-image { width: 48px; height: 48px; animation: cyber-zoom 4s ease-in-out infinite, subtle-glow 4s ease-in-out infinite alternate, token-float 5s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.3)); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .token-icon-image:hover { animation: cyber-zoom 2s ease-in-out infinite, intense-glow 2s ease-in-out infinite alternate; filter: drop-shadow(0 0 15px rgba(57, 255, 20, 0.8)) drop-shadow(0 0 25px rgba(0, 247, 255, 0.4)); transform: scale(1.2) rotate(5deg) rotateY(15deg); /* More pronounced 3D */ } @keyframes cyber-zoom { 0%, 100% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg) brightness(1) saturate(1); } 25% { transform: scale(1.1) rotate(1deg); filter: hue-rotate(15deg) brightness(1.2) saturate(1.1); } 50% { transform: scale(0.95) rotate(0deg); filter: hue-rotate(30deg) brightness(0.9) saturate(0.9); } 75% { transform: scale(1.05) rotate(-1deg); filter: hue-rotate(15deg) brightness(1.1) saturate(1.05); } } @keyframes subtle-glow { 0% { filter: drop-shadow(0 0 5px rgba(57, 255, 20, 0.2)) brightness(1); } 100% { filter: drop-shadow(0 0 12px rgba(57, 255, 20, 0.5)) brightness(1.1); } } @keyframes intense-glow { 0% { filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.4)) drop-shadow(0 0 15px rgba(0, 247, 255, 0.2)) brightness(1.1); } 100% { filter: drop-shadow(0 0 20px rgba(57, 255, 20, 0.8)) drop-shadow(0 0 35px rgba(0, 247, 255, 0.5)) brightness(1.2); } } .pinche-column .token-icon-circle { border-color: #39ff14; } .pinche-column .token-icon-circle { font-size: 2.5rem; color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, 0.8); } .chucho-column .token-icon-circle { border-color: #4ecdc4; } .chucho-column .token-icon-circle { font-size: 2.5rem; color: #4ecdc4; text-shadow: 0 0 10px rgba(78, 205, 196, 0.8); } .token-column::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 15px; border: 1px solid transparent; background: linear-gradient(45deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 200, 0.2), rgba(0, 240, 255, 0.2)) border-box; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; } .token-column::after { content: ''; position: absolute; top: 0; left: -100%; /* Start off-screen to the left */ width: 50%; /* Width of the sheen */ height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent); transition: transform 0.8s ease-in-out; /* Smooth transition for the sheen */ transform: skewX(-20deg); /* Angle the sheen */ pointer-events: none; } .token-column:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 240, 255, 0.4); } .token-column:hover::after { transform: translateX(200%) skewX(-20deg); /* Move across the element on hover */ } .pinche-column { border: 1px solid rgba(0, 240, 255, 0.3); position: relative; overflow: hidden; } .pinche-column::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #39ff14, #7CFC00); animation: gradient-border 3s linear infinite; background-size: 200% 100%; } .pinche-column h2 { color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, 0.5); } .chucho-column { border: 1px solid rgba(255, 0, 200, 0.3); position: relative; overflow: hidden; } .chucho-column::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #40E0D0, #00BFFF); animation: gradient-border 3s linear infinite; background-size: 200% 100%; } .chucho-column h2 { color: #40E0D0; text-shadow: 0 0 10px rgba(64, 224, 208, 0.5); } @keyframes gradient-border { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .token-column .token-info { padding: 0; border: none; background: transparent; box-shadow: none; } .token-column h2 { font-size: 2.2rem; margin-bottom: 1.5rem; text-align: center; } .token-column h3 { font-size: 1.7rem; margin: 1.5rem 0 1rem 0; color: #39ff14; text-align: center; } .token-column h4 { font-size: 1.3rem; margin: 1.2rem 0 0.5rem 0; color: #39ff14; font-weight: 600; text-align: center; } .token-column ul { margin: 0.5rem 0 1.5rem 0; padding: 0; list-style: none; } .token-column li { margin-bottom: 0.5rem; line-height: 1.6; padding: 0.3rem 0.8rem; background: rgba(57, 255, 20, 0.05); border-left: 3px solid #39ff14; border-radius: 0 6px 6px 0; transition: all 0.3s ease; } .token-column li:hover { background: rgba(57, 255, 20, 0.1); transform: translateX(5px); } /* Specific section styles for token content */ .token-details, .token-duality, .token-ecosystem, .token-economy, .rules-section, .chucho-info, .chucho-community { margin: 1.5rem 0; padding: 1rem; border-radius: 8px; background: transparent; border: 1px solid rgba(57, 255, 20, 0.2); } /* Transparent background for magic-loop to allow terminal effects to show through */ .magic-loop { margin: 1.5rem 0; padding: 1rem; border-radius: 8px; background: transparent; border: 1px solid rgba(57, 255, 20, 0.2); } /* Ensure section container inside magic loop is also transparent */ #magic-loop .section-container { background: transparent !important; background-color: transparent !important; } .chucho-info, .chucho-community { border-color: rgba(78, 205, 196, 0.2); } .token-details h4, .chucho-info h3 { text-align: left; margin-top: 0; } .token-duality ul, .rules-section ul { padding-left: 1.5rem; } .magic-loop-flow { margin: 2rem 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .flow-step { display: flex; align-items: center; gap: 2rem; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 15px; width: 100%; transition: all 0.3s ease; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6); overflow: hidden; position: relative; } .flow-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 15px; border: 2px solid transparent; background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) border-box; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; } .flow-step::after { content: ''; position: absolute; top: 0; left: -100%; /* Start off-screen to the left */ width: 50%; /* Width of the sheen */ height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: transform 0.8s ease-in-out; /* Smooth transition for the sheen */ transform: skewX(-20deg); /* Angle the sheen */ pointer-events: none; } .flow-step:hover { transform: translateY(-10px) scale(1.03) perspective(1000px) rotateX(2deg); box-shadow: 0 30px 50px rgba(0, 0, 0, 0.8); /* Even deeper shadow */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .flow-step:hover::after { transform: translateX(200%) skewX(-20deg); /* Move across the element on hover */ } .flow-icon { font-size: 2.5rem; color: var(--primary-color); text-shadow: 0 0 15px var(--glow-color); } .flow-text h3 { font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--primary-color); text-align: left; } .flow-text p { font-size: 0.9rem; line-height: 1.6; color: var(--secondary-color); text-align: left; } .flow-arrow { font-size: 1.5rem; color: var(--primary-color); text-shadow: 0 0 15px var(--glow-color); animation: flow-arrow-pulse 1.5s ease-in-out infinite; } @media (min-width: 768px) { .flow-step { width: 100%; } .flow-text h3, .flow-text p { text-align: left; } } /* Different colors for different categories */ .pinche-column h4:nth-of-type(1)+ul li { border-left-color: #39ff14; /* Green for PINCHE GOOD */ } .pinche-column h4:nth-of-type(2)+ul li { border-left-color: #ff4444; /* Red for PINCHE BAD */ } .pinche-column h4:nth-of-type(3)+ul li { border-left-color: #00f7ff; /* Cyan for PINCHE EXISTENTIAL */ } /* Animated gradient for titles */ @keyframes titleGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .title-gradient { background: linear-gradient(45deg, #39ff14, #40E0D0, #00ff00, #39ff14); background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: titleGradient 4s ease infinite; text-shadow: none; } /* Section main title */ .section-main-title { font-size: 3rem; text-align: center; margin-bottom: 2rem; color: #00f0ff; text-shadow: 0 0 15px rgba(0, 240, 255, 0.7); position: relative; display: inline-block; font-weight: 700; } .section-main-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(90deg, #00f0ff, #ff00c8); border-radius: 3px; } /* Enhanced typography for cybersecurity theme */ .intro-text { font-size: 1.2rem; line-height: 1.8; text-align: center; margin-bottom: 1rem; color: #e0e0e0; max-width: 800px; margin-left: auto; margin-right: auto; } /* Optimized Star Wars effect for DEX Mechanism section */ #dex-mechanism { background: transparent; border: 1px solid rgba(0, 240, 255, 0.2); border-radius: 15px; padding: 3rem 2rem; margin: 3rem 0; text-align: center; position: relative; overflow: hidden; height: 600px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); } #dex-mechanism .content-wrapper { max-width: 800px; margin: 0 auto; position: relative; z-index: 2; perspective: 1000px; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 20px; } #dex-mechanism h1 { font-size: 2.8rem; margin-bottom: 2rem; color: #00f0ff; text-shadow: 0 0 15px rgba(0, 240, 255, 0.7); position: static; transform: none; opacity: 1; animation: none; align-self: center; } /* Optimized Star Wars crawl effect - now appears below the title */ .crawl-text.dex-mechanism-text { position: static; width: 100%; max-width: 600px; text-align: center; opacity: 0; animation: fadeInSequence 8s forwards; margin-top: 2rem; } .crawl-text.dex-mechanism-text p { font-size: 1.3rem; line-height: 1.8; color: #e0e0e0; margin: 1rem 0; text-shadow: 0 0 10px rgba(0, 240, 255, 0.8); opacity: 0; animation: staggerFadeIn 8s forwards; } .crawl-text.dex-mechanism-text p:nth-child(1) { animation-delay: 2s; } .crawl-text.dex-mechanism-text p:nth-child(2) { animation-delay: 3.5s; } .crawl-text.dex-mechanism-text p:nth-child(3) { animation-delay: 5s; } @keyframes fadeInSequence { 0% { opacity: 0; } 20% { opacity: 0; } 100% { opacity: 1; } } @keyframes staggerFadeIn { 0%, 30% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* INTRODUCCION section styles (after columns) */ #introduccion { background: transparent; border: 1px solid rgba(0, 240, 255, 0.2); border-radius: 15px; padding: 3rem 2rem; margin: 3rem 0; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); } #introduccion .content-wrapper { max-width: 900px; margin: 0 auto; } #introduccion h1 { font-size: 2.8rem; margin-bottom: 1.5rem; color: #00f0ff; text-shadow: 0 0 15px rgba(0, 240, 255, 0.7); } #introduccion p { font-size: 1.3rem; line-height: 1.8; color: #e0e0e0; margin-bottom: 1rem; } /* Enhanced Star Wars title animation */ @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } /* Community & Culture section styles */ #community-culture { background: transparent; border: 1px solid rgba(78, 205, 196, 0.3); /* Turquoise for CHUCHO */ border-radius: 15px; padding: 3rem 2rem; margin: 3rem 0; text-align: center; } #community-culture h2 { font-size: 2.5rem; margin-bottom: 1.5rem; color: #4ecdc4; /* Turquoise color for CHUCHO */ text-shadow: 0 0 15px rgba(78, 205, 196, 0.6); } #community-culture p { font-size: 1.2rem; line-height: 1.7; color: #ffffff; margin-bottom: 1rem; } /* Full-width cards for PINCHE content */ .full-width-cards { width: 100%; margin: 3rem 0; } .card-container { margin-bottom: 2rem; } .pinche-card { background: transparent; border-radius: 15px; padding: 2rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all 0.3s ease; position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 240, 255, 0.2); overflow: hidden; width: 100%; } .pinche-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 15px; border: 1px solid transparent; background: linear-gradient(45deg, rgba(0, 240, 255, 0.2), rgba(255, 0, 200, 0.2), rgba(0, 240, 255, 0.2)) border-box; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; } .pinche-card::after { content: ''; position: absolute; top: 0; left: -100%; /* Start off-screen to the left */ width: 50%; /* Width of the sheen */ height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent); transition: transform 0.8s ease-in-out; /* Smooth transition for the sheen */ transform: skewX(-20deg); /* Angle the sheen */ pointer-events: none; } .pinche-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 240, 255, 0.4); } .pinche-card:hover::after { transform: translateX(200%) skewX(-20deg); /* Move across the element on hover */ } .pinche-card h3 { font-size: 1.7rem; margin: 0 0 1rem 0; color: #00f0ff; text-align: center; text-shadow: 0 0 10px rgba(0, 240, 255, 0.5); } .pinche-card h4 { font-size: 1.3rem; margin: 1.2rem 0 0.5rem 0; color: #00f0ff; font-weight: 600; text-align: center; text-shadow: 0 0 10px rgba(0, 240, 255, 0.5); } .pinche-card ul { margin: 1rem 0; padding: 0; list-style: none; } .pinche-card li { margin-bottom: 0.5rem; line-height: 1.6; padding: 0.3rem 0.8rem; background: rgba(0, 240, 255, 0.05); border-left: 3px solid #00f0ff; border-radius: 0 6px 6px 0; transition: all 0.3s ease; } .pinche-card li:hover { background: rgba(0, 240, 255, 0.1); transform: translateX(5px); } /* LP INCREASING ALL THE TIME section styles */ #lp-increasing { background: transparent; border: 1px solid rgba(57, 255, 20, 0.3); border-radius: 15px; padding: 3rem 2rem; margin: 3rem 0; text-align: center; } #lp-increasing h2 { font-size: 2.5rem; margin-bottom: 1.5rem; color: #39ff14; text-shadow: 0 0 15px rgba(57, 255, 20, 0.6); } #lp-increasing p { font-size: 1.2rem; line-height: 1.7; color: #ffffff; margin-bottom: 1rem; } /* Common section below columns */ .common-section { margin-top: 4rem; padding-top: 3rem; border-top: 2px solid rgba(57, 255, 20, 0.3); } .common-section h2 { font-size: 2.5rem; text-align: center; margin-bottom: 2rem; color: #39ff14; text-shadow: 0 0 15px rgba(57, 255, 20, 0.6); } .common-section h3 { font-size: 1.8rem; margin: 2rem 0 1rem 0; color: #39ff14; text-align: center; } .common-section p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.5rem; text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; } .common-section ol, .common-section ul { text-align: left; max-width: 800px; margin: 1.5rem auto; } .common-section li { margin-bottom: 0.8rem; line-height: 1.6; } .common-section blockquote { text-align: center; font-style: italic; font-size: 1.3rem; margin: 2rem auto; max-width: 600px; padding: 1rem; border-left: 4px solid rgba(57, 255, 20, 0.5); background: rgba(57, 255, 20, 0.05); border-radius: 0 10px 10px 0; } /* Mobile responsive for two-column layout */ @media (max-width: 768px) { .tokens-two-column { grid-template-columns: 1fr; gap: 2rem; margin: 2rem 0; } .token-column { padding: 1.5rem; } .section-main-title { font-size: 2.2rem; } .intro-text { font-size: 1rem; } .common-section h2 { font-size: 2rem; } .common-section h3 { font-size: 1.5rem; } /* Mobile styles for token column sections */ .token-details, .token-duality, .token-ecosystem, .token-economy, .magic-loop, .rules-section, .chucho-info, .chucho-community { padding: 0.8rem; margin: 1rem 0; } .token-column h3 { font-size: 1.4rem; } .token-column h4 { font-size: 1.1rem; } .flow-step { flex-direction: column; align-items: flex-start; gap: 1rem; } .flow-icon { font-size: 2rem; } .flow-text h3, .flow-text p { text-align: center; width: 100%; } } /* Single card styles for the comprehensive content */ .single-card { max-width: none !important; width: 100% !important; padding: 3rem !important; text-align: left !important; } .single-card h1 { font-size: 2.5rem !important; margin-bottom: 2rem !important; color: #39ff14 !important; text-align: center !important; background: transparent !important; border-radius: 15px !important; padding: 1.5rem 2rem 1rem 2rem !important; border: 1px solid rgba(57, 255, 20, 0.2) !important; border-bottom: 2px solid rgba(57, 255, 20, 0.3) !important; box-shadow: 0 0 20px rgba(57, 255, 20, 0.1) !important; text-shadow: 0 0 10px rgba(57, 255, 20, 0.8), 0 0 20px rgba(57, 255, 20, 0.6) !important; animation: title-glow 3s ease-in-out infinite alternate !important; display: block !important; width: 100% !important; margin: 0 auto 2rem auto !important; } .single-card h2 { font-size: 2rem !important; margin: 2.5rem 0 1.5rem 0 !important; color: #39ff14 !important; background: transparent !important; border-radius: 12px !important; padding: 1rem 1.5rem !important; border: 1px solid rgba(57, 255, 20, 0.15) !important; box-shadow: 0 0 15px rgba(57, 255, 20, 0.08) !important; text-shadow: 0 0 8px rgba(57, 255, 20, 0.7), 0 0 16px rgba(57, 255, 20, 0.5) !important; animation: title-glow 3s ease-in-out infinite alternate !important; display: block !important; width: 100% !important; text-align: center !important; } .single-card h3 { font-size: 1.5rem !important; margin: 2rem 0 1rem 0 !important; color: #39ff14 !important; background: transparent !important; border-radius: 10px !important; padding: 0.8rem 1.2rem !important; border: 1px solid rgba(57, 255, 20, 0.1) !important; box-shadow: 0 0 12px rgba(57, 255, 20, 0.06) !important; text-shadow: 0 0 6px rgba(57, 255, 20, 0.6), 0 0 12px rgba(57, 255, 20, 0.4) !important; animation: title-glow 3s ease-in-out infinite alternate !important; display: block !important; width: 100% !important; text-align: center !important; } .single-card h4 { font-size: 1.2rem !important; margin: 1.5rem 0 0.5rem 0 !important; color: #39ff14 !important; font-weight: 600 !important; background: transparent !important; border-radius: 8px !important; padding: 0.6rem 1rem !important; border: 1px solid rgba(57, 255, 20, 0.08) !important; box-shadow: 0 0 10px rgba(57, 255, 20, 0.05) !important; text-shadow: 0 0 5px rgba(57, 255, 20, 0.5), 0 0 10px rgba(57, 255, 20, 0.3) !important; animation: title-glow 3s ease-in-out infinite alternate !important; display: block !important; width: 100% !important; text-align: center !important; } .single-card p { font-size: 1.1rem !important; line-height: 1.7 !important; margin-bottom: 1.5rem !important; color: #00f7ff !important; } .highlight-box { background: transparent !important; border-radius: 4px !important; padding: 0.3rem 0.8rem !important; border: 1px solid #39ff14 !important; box-shadow: 0 0 8px rgba(57, 255, 20, 0.4) !important; color: #39ff14 !important; text-shadow: 0 0 6px rgba(57, 255, 20, 0.7) !important; font-weight: bold !important; display: inline-block !important; animation: title-glow 3s ease-in-out infinite alternate !important; } .text-highlight { background: transparent !important; backdrop-filter: blur(2px) !important; border-radius: 6px !important; padding: 0.8rem !important; border: 1px solid rgba(0, 247, 255, 0.1) !important; box-shadow: 0 0 8px rgba(0, 247, 255, 0.05) !important; color: #00f7ff !important; text-shadow: 0 0 4px rgba(0, 247, 255, 0.6) !important; display: inline !important; line-height: 1.6 !important; } .single-card strong { color: #063d1a !important; font-weight: 700 !important; } .single-card hr { border: none !important; height: 2px !important; background: linear-gradient(90deg, transparent, rgba(6, 61, 26, 0.3), transparent) !important; margin: 3rem 0 !important; } .single-card ul, .single-card ol { margin: 1rem 0 2rem 2rem !important; padding: 0 !important; } .single-card li { margin-bottom: 0.5rem !important; color: #063d1a !important; line-height: 1.6 !important; } .single-card blockquote { border-left: 4px solid rgba(6, 61, 26, 0.5) !important; margin: 2rem 0 !important; font-style: italic !important; color: #063d1a !important; background: rgba(6, 61, 26, 0.05) !important; padding: 1rem 1.5rem 1rem 1.5rem !important; border-radius: 0 8px 8px 0 !important; } /* Card divider styles */ .card-divider { text-align: center !important; margin: 3rem 0 !important; position: relative !important; z-index: 2 !important; } .divider-image { max-width: 400px !important; width: 100% !important; height: auto !important; margin: 0 auto !important; display: block !important; filter: drop-shadow(0 0 60px rgba(57, 255, 20, 1)) drop-shadow(0 0 100px rgba(57, 255, 20, 0.6)) drop-shadow(0 0 140px rgba(57, 255, 20, 0.3)) !important; animation: logoModernPulse 4s ease-in-out infinite !important; } /* Second section styles */ .second-section { margin-top: 2rem !important; border-top: 2px solid rgba(57, 255, 20, 0.3) !important; padding-top: 3rem !important; } .interface-section p { font-size: 1.35rem; line-height: 2; letter-spacing: 1px; text-shadow: 0 0 12px var(--glow-color), 0 0 25px rgba(57, 255, 20, 0.3), 0 0 40px rgba(57, 255, 20, 0.1); /* Enhanced, multi-layered glow */ font-weight: 400; /* Slightly bolder for readability */ } .token-info p strong { color: var(--primary-color); font-weight: 700; text-shadow: 0 0 8px var(--glow-color); } /* Modern geometric animations for sections */ @keyframes geometric-shift { 0% { background-position: 0% 0%, 100% 100%, 50% 50%; opacity: 0.8; } 100% { background-position: 100% 100%, 0% 0%, 75% 25%; opacity: 1; } } @keyframes rotating-pattern { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Container geometric animations */ @keyframes container-geometric-shift { 0% { background-position: 0% 0%, 100% 100%, 50% 50%; opacity: 0.6; } 100% { background-position: 100% 100%, 0% 0%, 75% 25%; opacity: 0.8; } } @keyframes container-rotating-pattern { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(360deg) scale(1.1); } } /* Token info geometric animations */ @keyframes token-geometric-shift { 0% { background-position: 0% 0%, 100% 100%, 50% 50%; opacity: 0.5; } 100% { background-position: 100% 100%, 0% 0%, 75% 25%; opacity: 0.7; } } @keyframes token-rotating-pattern { 0% { transform: rotate(0deg) scale(0.9); } 100% { transform: rotate(360deg) scale(1.1); } } /* Old Scroll to Top Button styles removed - See v12 below */ .back-to-top-btn::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 35px; height: 35px; background: rgba(0, 0, 0, 0.8); border-radius: 50%; z-index: 1; border: 1px solid rgba(57, 255, 20, 0.3); } .back-to-top-btn:hover::before { left: 100%; } /* Ensure back-to-top button visibility when active */ .back-to-top-btn.show, .back-to-top-btn.visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; z-index: 9999 !important; /* Ensure button stays on top */ pointer-events: auto !important; /* Ensure button is clickable */ } /* Ensure back-to-top button is always visible on scroll */ .back-to-top-btn { z-index: 9999 !important; /* Highest z-index to stay on top */ transition: all 0.3s ease !important; pointer-events: auto !important; /* Ensure button is always clickable */ } /* Fix for initial state - ensure button can appear */ #back-to-top, .back-to-top-btn { opacity: 0; /* Hidden by default */ visibility: hidden; /* Hidden by default */ transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important; } .back-to-top-btn:hover { transform: rotate(360deg) scale(1.1); box-shadow: 0 12px 40px 0 rgba(57, 255, 20, 0.5), 0 0 30px rgba(57, 255, 20, 0.4), inset 0 0 30px rgba(57, 255, 20, 0.2); transition: transform 0.6s ease, box-shadow 0.3s ease; } .back-to-top-btn:active { transform: translateY(-1px) scale(1.05); } .back-to-top-btn i { position: relative; z-index: 2; } .back-to-top-btn i::before { content: '↻'; font-size: 1.5rem; color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, 0.8); animation: iconSpin 2s linear infinite; } @keyframes backToTopPulse { 0%, 100% { box-shadow: 0 8px 32px 0 rgba(57, 255, 20, 0.3), 0 0 20px rgba(57, 255, 20, 0.2), inset 0 0 20px rgba(57, 255, 20, 0.1); transform: scale(1); } 50% { box-shadow: 0 12px 40px 0 rgba(57, 255, 20, 0.4), 0 0 30px rgba(57, 255, 20, 0.3), inset 0 0 30px rgba(57, 255, 20, 0.15); transform: scale(1.05); } } @keyframes iconSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes arrow-pulse { 0%, 100% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(-2px); opacity: 1; } } .back-to-top-btn::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px solid transparent; border-radius: 50%; background: linear-gradient(45deg, rgba(57, 255, 20, 0.3), rgba(0, 247, 255, 0.3), rgba(255, 65, 54, 0.3), rgba(57, 255, 20, 0.3)) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: cyber-ring 3s linear infinite; opacity: 0; transition: opacity 0.3s ease; } .back-to-top-btn:hover::after { opacity: 1; } @keyframes cyber-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Mobile responsive - PERFORMANCE OPTIMIZED */ @media (max-width: 768px) { /* Disable heavy effects on mobile */ .floating-particles, .matrix-bg, .scanlines { display: none !important; } /* Simplify animations */ .token-icon-image { animation: cyber-zoom 6s ease-in-out infinite !important; /* Slower animation */ } .token-icon-circle:hover { transform: none !important; /* Disable hover effects */ } /* Optimize layout for mobile */ .tokens-four-column { grid-template-columns: 1fr !important; /* Single column on mobile */ gap: 2rem !important; margin: 2rem 1rem !important; max-width: none !important; width: auto !important; } .token-column { padding: 1.5rem !important; min-height: auto !important; max-height: none !important; } /* Optimize typography for mobile */ .token-info h2 { font-size: 1.8rem !important; } .token-info p { font-size: 0.95rem !important; line-height: 1.5 !important; } /* Disable complex hover effects */ .protocol-card:hover { transform: none !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important; } /* Optimize back to top button */ .back-to-top-btn { bottom: 1.5rem; right: 1.5rem; width: 50px; height: 50px; font-size: 1.5rem; } /* Reduce particle effects */ .hero-particles { display: none !important; } /* Simplify hero animations */ .hero-glow { animation-duration: 6s !important; /* Slower */ } .logo-hero-img { animation-duration: 6s !important; /* Slower */ } /* Optimize container for mobile */ .container { width: 98% !important; max-width: none !important; padding: 1rem !important; margin: 0.5rem !important; } /* Disable terminal effects on very small screens */ @media (max-width: 480px) { #terminal-background { opacity: 0.1 !important; } .terminal-line { font-size: 0.8rem !important; } /* Further simplify animations */ .token-icon-image { animation: none !important; /* Disable animations on very small screens */ } .interface-section { padding: 1rem 0.5rem !important; } } } /* Ensure logo animation works across browsers */ .logo-hero-img { -webkit-animation: logoModernPulse 4s ease-in-out infinite; -moz-animation: logoModernPulse 4s ease-in-out infinite; -o-animation: logoModernPulse 4s ease-in-out infinite; animation: logoModernPulse 4s ease-in-out infinite; } .liquidity-flow { text-align: center; margin-top: 2rem; } .liquidity-flow p { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.6; margin-bottom: 0.5rem; } .liquidity-flow .arrow { color: var(--primary-color); font-size: 1.5rem; text-shadow: 0 0 10px var(--glow-color); } @keyframes title-flare-animation { 0% { background-position: 200% 50%; text-shadow: none; filter: brightness(1); } 40% { text-shadow: none; filter: brightness(1); } 50% { background-position: 0% 50%; text-shadow: 0 0 20px rgba(57, 255, 20, 0.8), 0 0 40px rgba(57, 255, 20, 0.5); filter: brightness(1.8); } 60% { text-shadow: none; filter: brightness(1); } 100% { background-position: -200% 50%; } } /* CHUCHO MEME CRYPTO CARD STYLES */ /* Animated gradient border for all cards */ .token-card, .feature-card, .protocol-card, .stat-card, .content-card, .chucho-meme-card { position: relative; background: transparent !important; border: 1px solid transparent !important; border-radius: 16px; padding: 2rem; margin: 1.5rem auto; overflow: hidden; transition: all 0.4s ease; z-index: 2; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } /* Animated border effect */ .token-card::before, .feature-card::before, .protocol-card::before, .stat-card::before, .content-card::before, .chucho-meme-card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: transparent; /* Removed gradient for visibility of terminal effects */ background-size: 400% 400%; border-radius: 18px; z-index: -1; animation: none; /* Removed animation to not interfere with background effects */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px; } @keyframes gradientBorder { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Remove animated gradient border from CHUCHO card */ .chucho-meme-card::before { display: none !important; } .chucho-meme-card { max-width: 1000px; background: transparent !important; backdrop-filter: blur(10px); position: relative; overflow: visible; color: #ffffff; padding: 2.5rem; margin: 2rem auto; border: 1px solid rgba(0, 212, 255, 0.2); } /* Ensure text is visible */ .chucho-meme-card, .chucho-meme-card h4, .chucho-meme-card p, .chucho-meme-card .meaning-desc { color: #ffffff !important; text-shadow: 0 0 5px rgba(0, 212, 255, 0.3); } /* Hover glow effect for CHUCHO card */ .chucho-meme-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle, rgba(0, 247, 255, 0.1) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: -1; } .chucho-meme-card:hover::after { opacity: 1; } /* Center and enlarge the CHUCHO logo */ .chucho-logo-meme { width: 120px !important; height: 120px !important; margin: 0 auto; display: block; object-fit: contain; transition: transform 0.3s ease; } .chucho-badge { display: flex; justify-content: center; margin-bottom: 1.5rem; } /* CHUCHO Section Header Styles */ .chucho-section-header { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 3rem; } .chucho-section-logo { width: 200px !important; height: 200px !important; margin: 0 auto; display: block; object-fit: contain; transition: transform 0.3s ease; filter: drop-shadow(0 0 15px rgba(0, 247, 255, 0.5)); } .chucho-section-logo:hover { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(0, 247, 255, 0.8)); } .chucho-logo-inline { vertical-align: middle; display: inline-block; } .chucho-logo-large { height: 40px; width: auto; margin: 0 8px; filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.8)); } .chucho-logo-large:hover { filter: drop-shadow(0 0 15px rgba(0, 212, 255, 1)); transform: scale(1.05); transition: all 0.3s ease; } /* Hover effect */ .chucho-meme-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 212, 255, 0.3); } .chucho-meme-card:hover .chucho-logo-meme { transform: scale(1.05); } .chucho-meme-section { margin: 4rem 0 !important; padding: 2rem 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 2 !important; min-height: 500px; /* Added to ensure visibility */ } .chucho-meme-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(0, 247, 255, 0.6), 0 0 20px rgba(0, 247, 255, 0.4), 0 0 40px rgba(57, 255, 20, 0.2), 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 247, 255, 0.2); } .chucho-meme-card:hover::before { opacity: 1; } /* Enhanced cyberpunk glow effect */ .chucho-meme-card::after { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(135deg, rgba(0, 247, 255, 0.3) 0%, rgba(57, 255, 20, 0.2) 50%, rgba(0, 247, 255, 0.3) 100%); border-radius: 14px; opacity: 0; transition: all 0.4s ease; z-index: -2; filter: blur(8px); } .chucho-meme-card:hover::after { opacity: 0.8; filter: blur(12px); transform: scale(1.02); } .chucho-card-header { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2rem; } .chucho-meme-card { background: transparent !important; border: 1px solid transparent !important; border-radius: 12px; padding: 1.5rem; backdrop-filter: blur(10px); transition: all 0.3s ease; position: relative; overflow: hidden; background-clip: padding-box; } .chucho-meme-card::before { content: ''; position: absolute; inset: -2px; z-index: -1; background: linear-gradient(var(--angle), #00d4ff, #00ff88, #00ff00, #00d4ff); background-size: 200% 200%; border-radius: inherit; padding: 2px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: borderRotate 4s linear infinite, gradientShift 8s ease infinite; } .chucho-card-header { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 1.5rem; text-align: center; } .chucho-logo-meme { width: 120px; height: auto; transition: transform 0.3s ease, filter 0.3s ease; margin: 0 auto; display: block; } .chucho-logo-meme:hover { transform: scale(1.1) rotate(-2deg); filter: drop-shadow(0 0 15px rgba(0, 247, 255, 0.8)); } .supply-tag { margin: 0 auto; padding: 0.4rem 0.8rem; background: rgba(0, 247, 255, 0.1); border: 1px solid rgba(0, 247, 255, 0.3); border-radius: 20px; font-size: 0.85rem; font-weight: 500; color: #00f7ff; letter-spacing: 0.5px; white-space: nowrap; } .meaning-grid { display: flex; /* Changed to flex for a single row */ flex-wrap: nowrap; /* Prevent wrapping */ gap: 1.5rem; overflow-x: auto; /* Allow horizontal scrolling */ padding-bottom: 1rem; /* Add some space for the scrollbar */ scrollbar-width: thin; /* Custom scrollbar for Firefox */ scrollbar-color: var(--accent-primary) var(--bg-secondary); /* Custom scrollbar colors */ } /* Custom scrollbar for Webkit browsers */ .meaning-grid::-webkit-scrollbar { height: 8px; } .meaning-grid::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 4px; } .meaning-grid::-webkit-scrollbar-thumb { background-color: var(--accent-primary); border-radius: 4px; border: 2px solid var(--bg-secondary); } .meaning-item.flag-country { background: transparent !important; border: 1px solid rgba(0, 212, 255, 0.15); border-radius: 12px; padding: 1.5rem; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; overflow: hidden; backdrop-filter: blur(5px); flex-shrink: 0; /* Prevent items from shrinking */ width: 280px; /* Fixed width for each item */ } .meaning-item.flag-country:hover { transform: translateY(-8px) scale(1.03); border-color: rgba(0, 212, 255, 0.5); box-shadow: 0 10px 30px rgba(0, 212, 255, 0.15), 0 0 40px rgba(0, 212, 255, 0.1); } .meaning-item.flag-country::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; animation: float 8s ease-in-out infinite alternate; } .meaning-item.flag-country:hover::before { opacity: 1; } .country-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 1rem; } .country-flag { font-size: 3.5rem; /* Smaller flag */ line-height: 1; margin-bottom: 0.8rem; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); transition: transform 0.3s ease; } .meaning-item.flag-country:hover .country-flag { transform: scale(1.1); } .country-label { font-family: 'Bangers', cursive !important; font-size: 2.5rem !important; /* Large text */ font-weight: 400 !important; color: #00d4ff !important; text-shadow: 0 0 8px rgba(0, 212, 255, 0.7); margin: 0; line-height: 1.1; } .meaning-desc { font-family: 'Bangers', cursive !important; font-size: 2rem !important; /* Large text */ color: #e0e0e0 !important; line-height: 1.3 !important; font-weight: 400 !important; text-align: center !important; margin-top: 0.5rem; /* Space between label and description */ padding: 0 !important; } @keyframes scanline { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes chucho-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } .chucho-title-meme { font-size: 2rem; font-weight: 900; background: linear-gradient(45deg, #00d4ff, #00ffff, #00d4ff); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: chucho-glow 2s ease-in-out infinite alternate; } @keyframes chucho-glow { 0% { filter: brightness(1) drop-shadow(0 0 10px rgba(0, 212, 255, 0.3)); } 100% { filter: brightness(1.2) drop-shadow(0 0 20px rgba(0, 212, 255, 0.6)); } } .supply-tag { background: rgba(0, 247, 255, 0.2); border: 2px solid rgba(0, 247, 255, 0.4); border-radius: 25px; padding: 0.5rem 1.5rem; font-size: 1.1rem; font-weight: bold; color: #00d4ff; text-shadow: 0 0 10px rgba(0, 212, 255, 0.5); } .chucho-meme-content { margin-top: 2rem; } .chucho-main-quote { font-size: 1.5rem; font-weight: bold; color: #00d4ff; text-shadow: 0 0 15px rgba(0, 212, 255, 0.6); margin-bottom: 2rem; line-height: 1.4; } .chucho-meaning-table h4 { font-size: 1.3rem; margin-bottom: 1.5rem; color: #ffffff; font-weight: 600; } .meaning-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 2rem 0; } .meaning-item { background: rgba(0, 247, 255, 0.08); border: 1px solid rgba(0, 247, 255, 0.3); border-radius: 12px; padding: 1rem; display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; text-align: left; } .meaning-item:hover { transform: scale(1.02); } /* Override for flag-country specific items to remove borders */ .meaning-item.flag-country { border: none !important; background: transparent !important; border-radius: 8px !important; text-align: center !important; } .country-flag { font-size: 1.8rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; } .flag-country .country-flag { border-radius: 8px; } .country-label { font-weight: bold; color: #00d4ff; margin-bottom: 0.2rem; font-size: 1rem; } .meaning-desc { color: #ffffff; opacity: 0.9; line-height: 1.3; margin: 0; } .chucho-bottom-section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(0, 247, 255, 0.3); } .chucho-meme-bottom-quote { font-size: 1.2rem; font-style: italic; color: #ffffff; margin-bottom: 1.5rem; line-height: 1.6; } .chucho-heartbeat { color: #00d4ff; font-weight: bold; font-size: 1.1rem; margin: 1rem 0; } .chucho-formula { color: #ffffff; font-size: 1.1rem; margin: 1rem 0; } .chucho-tagline { color: #00d4ff !important; font-weight: 600; } /* Responsive design for CHUCHO meme card */ @media (max-width: 768px) { .chucho-meme-card { padding: 1.5rem 1rem; } .chucho-card-header { flex-direction: column; gap: 1rem; } .meaning-grid { grid-template-columns: 1fr; gap: 0.8rem; margin: 1.5rem 0; } .meaning-item { padding: 1.6rem; /* Doubled for mobile to maintain proportion */ gap: 1.6rem; /* Doubled for mobile */ } .country-flag { font-size: 2.4rem; /* Double size for mobile */ margin-bottom: 0.8rem; /* Double size for mobile */ } .country-label { font-size: 1.2rem; /* Double size for mobile */ margin: 0.8rem 0; /* Double size for mobile */ } .meaning-desc { font-size: 1.2rem; /* Double size for mobile */ } .chucho-meme-card { padding: 1rem; } .chucho-logo-meme { width: 60px; } .supply-tag { font-size: 0.75rem; padding: 0.3rem 0.6rem; } .meaning-grid { grid-template-columns: 1fr; } .meaning-item { padding: 1rem; } .country-flag { font-size: 1.5rem; } .country-label { font-size: 0.9rem; } .meaning-desc { font-size: 0.85rem; } } /* Optimized scroll animations for better performance */ .animate-in { opacity: 1 !important; transform: translateY(0) !important; animation-fill-mode: both !important; } /* Add staggered delays for mobile to prevent overwhelming animations */ @media (max-width: 768px) { .animate-in:nth-child(1) { animation-delay: 0.1s; } .animate-in:nth-child(2) { animation-delay: 0.2s; } .animate-in:nth-child(3) { animation-delay: 0.3s; } .animate-in:nth-child(4) { animation-delay: 0.4s; } .animate-in:nth-child(5) { animation-delay: 0.5s; } .animate-in:nth-child(6) { animation-delay: 0.6s; } .animate-in:nth-child(7) { animation-delay: 0.7s; } .animate-in:nth-child(8) { animation-delay: 0.8s; } } /* In-view classes for intersection observer */ .in-view { opacity: 1 !important; transform: translateY(0) scale(1) !important; transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } /* Force animations to run on mobile devices */ @media (max-width: 1200px) { .animate-in, .in-view { animation-duration: 0.4s !important; /* Faster on mobile/tablet */ animation-fill-mode: both !important; } /* Reduce motion for mobile performance */ .floating-particles, .matrix-bg, .scanlines { display: none !important; } } .magic-loop-flow { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .flow-step { display: flex; align-items: center; gap: 2rem; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 15px; width: 80%; max-width: 800px; transition: all 0.3s ease; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6); overflow: hidden; position: relative; } .flow-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 15px; border: 2px solid transparent; background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) border-box; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; } .flow-step::after { content: ''; position: absolute; top: 0; left: -100%; /* Start off-screen to the left */ width: 50%; /* Width of the sheen */ height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: transform 0.8s ease-in-out; /* Smooth transition for the sheen */ transform: skewX(-20deg); /* Angle the sheen */ pointer-events: none; } .flow-step:hover { transform: translateY(-10px) scale(1.03) perspective(1000px) rotateX(2deg); box-shadow: 0 30px 50px rgba(0, 0, 0, 0.8); /* Even deeper shadow */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .flow-step:hover::after { transform: translateX(200%) skewX(-20deg); /* Move across the element on hover */ } .flow-icon { font-size: 4rem; color: var(--primary-color); text-shadow: 0 0 15px var(--glow-color); } .flow-text h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--primary-color); } .flow-text p { font-size: 1rem; line-height: 1.6; color: var(--secondary-color); text-align: left; } .flow-arrow { font-size: 2.5rem; color: var(--primary-color); text-shadow: 0 0 15px var(--glow-color); animation: flow-arrow-pulse 1.5s ease-in-out infinite; } @keyframes flow-arrow-pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.2); opacity: 1; } } @keyframes token-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } @keyframes token-circle-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(57, 255, 20, 0.3); transform: scale(1); } 50% { box-shadow: 0 0 35px rgba(57, 255, 20, 0.6); transform: scale(1.05); } } @keyframes glitch-text { 0% { text-shadow: 0.05em 0 0 rgba(0, 247, 255, 0.75), -0.05em -0.025em 0 rgba(57, 255, 20, 0.75), 0.025em 0.05em 0 rgba(255, 65, 54, 0.75); } 20% { text-shadow: -0.05em -0.025em 0 rgba(0, 247, 255, 0.75), 0.025em 0.05em 0 rgba(57, 255, 20, 0.75), -0.05em 0.025em 0 rgba(255, 65, 54, 0.75); } 40% { text-shadow: 0.025em 0.05em 0 rgba(0, 247, 255, 0.75), -0.05em 0 0 rgba(57, 255, 20, 0.75), 0.05em -0.025em 0 rgba(255, 65, 54, 0.75); } 60% { text-shadow: -0.025em -0.05em 0 rgba(0, 247, 255, 0.75), 0.05em 0.025em 0 rgba(57, 255, 20, 0.75), -0.025em 0 0 rgba(255, 65, 54, 0.75); } 80% { text-shadow: 0.05em 0.025em 0 rgba(0, 247, 255, 0.75), -0.025em -0.05em 0 rgba(57, 255, 20, 0.75), 0.05em 0 0 rgba(255, 65, 54, 0.75); } 100% { text-shadow: 0 0 0 rgba(0, 247, 255, 0.75), 0 0 0 rgba(57, 255, 20, 0.75), 0 0 0 rgba(255, 65, 54, 0.75); } } /* Aplicar tipografía monospace a títulos específicos para estilo crypto/meme */ .section-main-title, .section-title, .token-column h2, #lp-increasing h2 { font-family: var(--font-mono); } /* Ajustar tipografía en sección 'Community & Culture' para mejor visualización */ .chucho-community p { font-size: 1.1rem; line-height: 1.7; text-align: center; } /* Asegurar que el texto sea visible en las secciones de ancho completo */ .full-width-cards .pinche-card p, .full-width-cards .pinche-card li { color: #ffffff; /* Blanco para asegurar visibilidad */ } /* Estilos adicionales para el contenido debajo de las columnas */ /* Aplicar verde brillante a todo el contenido de abajo */ .full-width-cards, .full-width-cards .pinche-card, #community-culture, #lp-increasing { color: #39ff14; font-family: var(--font-body); } .full-width-cards .pinche-card h3, .full-width-cards .pinche-card h4, #lp-increasing h2 { color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, 0.5); } /* Asegurar que los párrafos en secciones de ancho completo sean verdes */ .full-width-cards .pinche-card p, .full-width-cards .pinche-card li, #community-culture p, #lp-increasing p { color: #39ff14; } /* Aplicar turquesa específicamente a $CHUCHO */ .chucho-community-section, .chucho-community, .chucho-community h2, .chucho-community p { color: #40E0D0 !important; } /* Estilo específico para $CHUCHO en cualquier parte del texto */ .text-chucho { color: #40E0D0; } /* Estilo para $PINCHE en verde */ .text-pinche { color: #39ff14; } /* ===== ENHANCED PARTICLE SYSTEM STYLES ===== */ /* Particle containers in token cards */ #pinche-enhanced-particles, #chucho-enhanced-particles { width: 100%; height: 140px; position: relative; background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.15) 100%); border-radius: 12px; overflow: hidden; margin: 15px 0; border: 1px solid rgba(57, 255, 20, 0.15); backdrop-filter: blur(8px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(57, 255, 20, 0.05); z-index: 2; } /* CHUCHO specific styling */ #chucho-enhanced-particles { border-color: rgba(64, 224, 208, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(64, 224, 208, 0.05); } /* Hover effects for particle containers */ .token-card:hover #pinche-enhanced-particles { border-color: rgba(57, 255, 20, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 40px rgba(57, 255, 20, 0.15), 0 0 0 1px rgba(57, 255, 20, 0.1), 0 0 60px rgba(57, 255, 20, 0.1); transform: translateY(-2px); } .token-card:hover #chucho-enhanced-particles { border-color: rgba(64, 224, 208, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 40px rgba(64, 224, 208, 0.15), 0 0 0 1px rgba(64, 224, 208, 0.1), 0 0 60px rgba(64, 224, 208, 0.1); transform: translateY(-2px); } /* Canvas styling for optimal rendering */ #pinche-enhanced-particles canvas, #chucho-enhanced-particles canvas { display: block; width: 100% !important; height: 100% !important; border-radius: 12px; background: transparent; position: relative; z-index: 1; } /* Particle overlay for enhanced visual depth */ #pinche-enhanced-particles::before, #chucho-enhanced-particles::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(57, 255, 20, 0.03) 0%, transparent 30%, transparent 70%, rgba(64, 224, 208, 0.03) 100%); pointer-events: none; border-radius: 12px; z-index: 3; opacity: 0.8; transition: opacity 0.3s ease; } .token-card:hover #pinche-enhanced-particles::before, .token-card:hover #chucho-enhanced-particles::before { opacity: 1; } /* Particle label styling */ .particle-label { position: absolute; top: 8px; left: 12px; color: rgba(255, 255, 255, 0.6); font-size: 9px; font-family: 'Space Grotesk', monospace; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; z-index: 10; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); transition: all 0.3s ease; } .token-card:hover .particle-label { color: rgba(255, 255, 255, 0.8); text-shadow: 0 0 8px rgba(57, 255, 20, 0.5); } .chucho-token:hover .particle-label { text-shadow: 0 0 8px rgba(64, 224, 208, 0.5); } /* Enhanced token card integration */ .token-card { position: relative; overflow: visible; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .token-card .token-content { position: relative; z-index: 3; } .token-card .token-header { z-index: 5; position: relative; } .token-card .token-stats { z-index: 4; position: relative; } /* Performance optimizations */ #pinche-enhanced-particles, #chucho-enhanced-particles { will-change: transform, box-shadow, border-color; contain: layout style paint; } #pinche-enhanced-particles canvas, #chucho-enhanced-particles canvas { will-change: transform; contain: strict; } /* Loading state for particle containers */ .particle-container-loading { background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(57, 255, 20, 0.05) 50%, rgba(0, 0, 0, 0.1) 100%); animation: particleLoading 2s ease-in-out infinite; } .chucho-token .particle-container-loading { background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(64, 224, 208, 0.05) 50%, rgba(0, 0, 0, 0.1) 100%); } @keyframes particleLoading { 0%, 100% { opacity: 0.6; border-color: rgba(57, 255, 20, 0.1); } 50% { opacity: 0.8; border-color: rgba(57, 255, 20, 0.2); } } /* Success state for fully loaded particles */ .particle-container-loaded { animation: particleLoaded 0.8s ease-out; } @keyframes particleLoaded { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } /* Responsive design for particle containers */ @media (max-width: 1200px) { #pinche-enhanced-particles, #chucho-enhanced-particles { height: 120px; margin: 12px 0; } } @media (max-width: 768px) { #pinche-enhanced-particles, #chucho-enhanced-particles { height: 100px; margin: 10px 0; border-radius: 10px; } #pinche-enhanced-particles canvas, #chucho-enhanced-particles canvas { border-radius: 10px; } .particle-label { font-size: 8px; top: 6px; left: 10px; } } @media (max-width: 480px) { #pinche-enhanced-particles, #chucho-enhanced-particles { height: 60px; margin: 8px 0; border-radius: 8px; } #pinche-enhanced-particles canvas, #chucho-enhanced-particles canvas { border-radius: 8px; } .particle-label { font-size: 7px; top: 4px; left: 8px; letter-spacing: 0.5px; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { #pinche-enhanced-particles, #chucho-enhanced-particles { transition: none; } .token-card:hover #pinche-enhanced-particles, .token-card:hover #chucho-enhanced-particles { transform: none; } .particle-label { transition: none; } } /* High DPI display optimizations */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #pinche-enhanced-particles canvas, #chucho-enhanced-particles canvas { image-rendering: crisp-edges; } } /* Dark mode enhancements */ @media (prefers-color-scheme: dark) { #pinche-enhanced-particles, #chucho-enhanced-particles { background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.25) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(57, 255, 20, 0.08); } } /* Particle interaction feedback */ .particle-container-interacting { border-color: rgba(57, 255, 20, 0.8) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(57, 255, 20, 0.3), 0 0 60px rgba(57, 255, 20, 0.2) !important; } .chucho-token .particle-container-interacting { border-color: rgba(64, 224, 208, 0.8) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(64, 224, 208, 0.3), 0 0 60px rgba(64, 224, 208, 0.2) !important; } /* ===== END ENHANCED PARTICLE SYSTEM STYLES ===== */ /* ===== iPhone 12 and Superior Optimizations ===== */ /* Safe area handling for iPhone 12+ notch and home indicator */ @supports (bottom: env(safe-area-inset-bottom)) { body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } /* iPhone 12+ specific media query */ @media screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3), screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) { /* iPhone 12 / 12 Pro / 12 Pro Max specific optimizations */ .hero-section { padding-top: calc(2rem + env(safe-area-inset-top)); padding-bottom: calc(2rem + env(safe-area-inset-bottom)); } .hero-content { padding-top: env(safe-area-inset-top, 1rem); } .ticker-wrap { padding-top: env(safe-area-inset-top, 0.5rem); padding-bottom: env(safe-area-inset-bottom, 0.5rem); overflow: hidden !important; } .main-header { margin-top: env(safe-area-inset-top); } .back-to-top-btn { bottom: calc(2rem + env(safe-area-inset-bottom, 0)); right: 2rem; } } /* Enhanced touch targets for iPhone 12+ */ @media (hover: none) and (pointer: coarse) { .cta-button, .hero-cta, .back-to-top-btn, .feature-card, .token-card, .stat-card { min-height: 44px; /* Apple's recommended touch target size */ min-width: 44px; padding: 12px 16px; } /* Adjust for better touch interaction */ .feature-card, .token-card, .stat-card { padding: 1.8rem; /* Slightly larger on mobile */ } } /* Enhanced rendering for high DPI OLED displays */ @media (-webkit-device-pixel-ratio: 3) { /* Optimize for iPhone 12+ OLED displays */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Optimize text rendering for OLED screens */ h1, h2, h3, h4, h5, h6 { -webkit-font-smoothing: antialiased; text-shadow: 0 0 10px currentColor; } /* Optimize images for OLED */ img { image-rendering: crisp-edges; } } /* Performance optimizations for A14+ chips */ @media (min-resolution: 3dppx) { /* Enable more complex animations on powerful devices */ .token-icon-image { animation: cyber-zoom 3s ease-in-out infinite, subtle-glow 4s ease-in-out infinite alternate; } .hero-particle { animation: heroParticleFloat 4s ease-in-out infinite; } /* Enhance glow effects on high-performance devices */ .token-card:hover { box-shadow: 0 30px 80px rgba(57, 255, 20, 0.3), 0 0 0 1px rgba(57, 255, 20, 0.2) inset, 0 0 100px rgba(57, 255, 20, 0.15); } } /* iPhone 12+ specific layout adjustments */ @media screen and (min-width: 390px) and (min-height: 844px) and (orientation: portrait), screen and (min-width: 844px) and (min-height: 390px) and (orientation: landscape) { /* Typography adjustments for iPhone 12 screen density */ .section-heading { font-size: clamp(2.8rem, 6vw, 4.5rem); /* Slightly smaller for iPhone 12 */ } .section-subtitle { font-size: clamp(1rem, 2vw, 1.2rem); } /* Adjust hero section for iPhone 12 dimensions */ .hero-content { gap: 2.5rem; /* Better spacing for iPhone 12 screen proportions */ } /* Adjust widget for better fit on iPhone 12 */ .exchange-widget-wrapper { max-width: 95vw; /* Slightly narrower on iPhone 12 */ } .exchange-widget-wrapper iframe { height: 550px; /* Adjusted for iPhone 12 */ } } /* Additional iPhone 12+ landscape optimizations */ @media screen and (min-width: 844px) and (max-width: 950px) and (orientation: landscape) { .hero-content { grid-template-columns: 1fr; text-align: center; } .hero-actions { justify-content: center; } } /* ===== END iPhone 12 and Superior Optimizations ===== */ /* ===== iOS TOUCH TARGET OPTIMIZATIONS ===== */ /* iOS Safari specific touch enhancements */ @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Fix for iOS Safari touch behavior */ .cta-button, .hero-cta, .hero-cta-primary, .hero-cta-secondary, .feature-card, .token-card, .stat-card, .content-card, .back-to-top-btn, button, a, [role="button"], input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"] { -webkit-tap-highlight-color: rgba(57, 255, 20, 0.3); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: pointer; touch-action: manipulation; -webkit-overflow-scrolling: touch; } /* Prevent default iOS tap highlight for specific elements */ .feature-card, .token-card, .stat-card, .content-card { -webkit-tap-highlight-color: rgba(57, 255, 20, 0.1); } } /* Touch target size optimization for iOS */ @media screen and (max-width: 768px) { .cta-button, .hero-cta, .hero-cta-primary, .hero-cta-secondary { min-height: 44px; min-width: 44px; padding: 14px 20px; } /* Ensure adequate touch targets for iOS devices */ .feature-card, .token-card, .stat-card, .content-card { min-height: 44px; padding: 1.5rem; } .back-to-top-btn { width: 50px; height: 50px; min-width: 50px; min-height: 50px; } } /* Specific iOS targeting using CSS hacks */ /* These rules will apply specifically to iOS devices */ @supports (-webkit-touch-callout: none) { /* iOS specific touch optimizations */ .cta-button, .hero-cta, .hero-cta-primary, .hero-cta-secondary { /* Ensure proper touch handling on iOS */ -webkit-touch-callout: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(57, 255, 20, 0.4); tap-highlight-color: rgba(57, 255, 20, 0.4); } /* Fix for iOS Safari button active states */ .cta-button:active, .hero-cta:active, .hero-cta-primary:active, .hero-cta-secondary:active { transform: scale(0.98); } /* Enhanced touch feedback for iOS */ .cta-button, .hero-cta, .hero-cta-primary, .hero-cta-secondary { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } } /* Additional iOS and iPadOS specific fixes */ @supports (-webkit-touch-callout: inherit) { /* Ensure interactive elements work properly on iOS */ button, .button, .cta-button, .interactive-element { /* Prevent iOS Safari from disabling clicks during scroll */ touch-action: manipulation; /* Improve tap hit area */ -webkit-touch-callout: none; -webkit-user-select: none; } } /* =================================== SPECIFIC SCROLL FIXES - TARGETED PREVENTION ================================== */ /* Fix ticker horizontal scroll issue */ .ticker-wrap { max-width: 100vw !important; width: 100% !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; position: relative; } .ticker-wrap::before, .ticker-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50px; z-index: 1; pointer-events: none; } .ticker-wrap::before { left: 0; background: transparent !important; } .ticker-wrap::after { right: 0; background: transparent !important; } .ticker { width: 200% !important; /* Allow content to determine width */ /* min-width: 200% !important; */ /* Temporarily removed to debug scrollbars */ /* overflow-x: visible !important; */ /* Removed to prevent scrollbars */ box-sizing: border-box !important; will-change: transform; } /* Fix token cards horizontal scroll */ .token-card { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* Fix exchange widget display */ .exchange-widget-wrapper { width: 100% !important; max-width: 600px !important; overflow-x: hidden !important; box-sizing: border-box !important; } .exchange-widget-wrapper iframe { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* ===== END iOS TOUCH TARGET OPTIMIZATIONS ===== */ /* Enhanced Ghost Layer Animations - More Translucent */ @keyframes hologram-ghost-enhanced { 0%, 100% { transform: translateX(0px) scale(1) skew(0deg); opacity: 0.3; filter: blur(0.8px) contrast(1.3) saturate(1.2); } 25% { transform: translateX(5px) scale(1.001) skew(0.005deg); opacity: 0.4; filter: blur(0.7px) contrast(1.4) saturate(1.3); } 50% { transform: translateX(10px) scale(0.999) skew(-0.008deg); opacity: 0.25; filter: blur(0.9px) contrast(1.2) saturate(1.1); } 75% { transform: translateX(5px) scale(1.0005) skew(0.01deg); opacity: 0.35; filter: blur(0.75px) contrast(1.35) saturate(1.25); } /* Occasional distortion */ 87% { transform: translateX(15px) scale(1.002) skew(0.02deg); opacity: 0.6; filter: blur(1.2px) contrast(1.6) saturate(1.4); } 89% { transform: translateX(12px) scale(0.998) skew(-0.015deg); opacity: 0.2; filter: blur(0.5px) contrast(1.1) saturate(1.0); } } /* Enhanced Pixel Shift with More Steps */ @keyframes pixel-shift-enhanced { 0% { transform: translateX(0px); } 25% { transform: translateX(0.3px); } 50% { transform: translateX(-0.2px); } 75% { transform: translateX(0.4px); } 100% { transform: translateX(0px); } } /* RGB Split Effect */ @keyframes rgb-split { 0%, 85% { text-shadow: 0 0 5px rgba(180, 240, 255, 0.7), 0 0 10px rgba(180, 240, 255, 0.5), 0 0 15px rgba(180, 240, 255, 0.3); } 86% { text-shadow: -1px 0 0 rgba(255, 100, 100, 0.4), 1px 0 0 rgba(100, 255, 100, 0.4), 0 0 5px rgba(180, 240, 255, 0.7); } 88% { text-shadow: -2px 0 0 rgba(255, 80, 80, 0.5), 2px 0 0 rgba(80, 255, 80, 0.5), 0 0 8px rgba(180, 240, 255, 0.6); } 90% { text-shadow: -1.5px 0 0 rgba(255, 120, 120, 0.3), 1.5px 0 0 rgba(120, 255, 120, 0.3), 0 0 6px rgba(180, 240, 255, 0.8); } 92% { text-shadow: -0.5px 0 0 rgba(255, 150, 150, 0.2), 0.5px 0 0 rgba(150, 255, 150, 0.2), 0 0 7px rgba(180, 240, 255, 0.7); } 100% { text-shadow: 0 0 5px rgba(180, 240, 255, 0.7), 0 0 10px rgba(180, 240, 255, 0.5), 0 0 15px rgba(180, 240, 255, 0.3); } } /* X Logo SVG styling */ .x-logo-svg { width: 1em; height: 1em; vertical-align: middle; fill: currentColor; } /* Make X logo bigger in community section */ .community-section .x-logo-svg { width: 3em; height: 3em; } /* Hero Logo Styles */ .hero-visual { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; max-width: 100%; margin: 0 auto; padding: 2rem 0; z-index: 10; } .logo-container-hero { position: relative; width: 100%; max-width: 600px; margin: 0 auto; display: flex; justify-content: center; align-items: center; animation: float 6s ease-in-out infinite; } .logo-hero-img { width: 100%; height: auto; max-width: 500px; object-fit: contain; filter: drop-shadow(0 0 15px rgba(57, 255, 20, 0.5)); transition: transform 0.3s ease, filter 0.3s ease; } .logo-hero-img:hover { transform: scale(1.05); filter: drop-shadow(0 0 25px rgba(57, 255, 20, 0.8)); } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } /* Responsive adjustments */ @media (max-width: 768px) { .logo-container-hero { max-width: 90%; } .logo-hero-img { max-width: 100%; } } /* Ensure the hero section has proper spacing */ .hero-section { padding: 4rem 0; position: relative; overflow: hidden; } /* Hero content adjustments - FINAL CONSOLIDATED */ .hero-content { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 0 1rem; position: relative; z-index: 5; gap: 1rem !important; /* Reduced space between logo and text */ grid-template-columns: none !important; /* Override any grid */ } /* Desktop specific adjustments */ @media (min-width: 1024px) { .hero-content { gap: 0.5rem !important; /* Even smaller gap for desktop */ padding: 2rem 1rem !important; /* Add some vertical padding */ } } /* Hero text adjustments */ .hero-text { max-width: 800px; margin: 0 auto; padding: 2rem 0; } /* Hero Logo Styles */ .hero-visual { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; max-width: 100%; margin: 0 auto; padding: 2rem 0; z-index: 10; } .logo-container-hero { position: relative; width: 100%; max-width: 600px; margin: 0 auto; display: flex; justify-content: center; align-items: center; animation: float 6s ease-in-out infinite; } .logo-hero-img { width: 100%; height: auto; max-width: 500px; object-fit: contain; filter: drop-shadow(0 0 15px rgba(57, 255, 20, 0.5)); transition: transform 0.3s ease, filter 0.3s ease; } .logo-hero-img:hover { transform: scale(1.05); filter: drop-shadow(0 0 25px rgba(57, 255, 20, 0.8)); } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } /* Responsive adjustments */ @media (max-width: 768px) { .logo-container-hero { max-width: 90%; } .logo-hero-img { max-width: 100%; } } /* Ensure the hero section has proper spacing */ .hero-section { padding: 0.2rem 0; /* Further reduced padding to bring even closer to ticker */ position: relative; overflow: hidden; margin-top: 0; /* Further negative margin to move even closer to ticker */ } /* Duplicate hero content adjustments removed */ /* Conflicting logo styles removed - using consolidated styles above */ } /* Conflicting mobile and positioning rules removed - using consolidated styles above */ /* Asegurar que el header no tape el logo */ header { position: relative \!important; z-index: 9999 \!important; } /* Presale section styling */ .presale-section { padding: 4rem 2rem; position: relative; overflow: hidden; z-index: 20; } .presale-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(57, 255, 20, 0.02) 0%, transparent 50%), linear-gradient(225deg, rgba(0, 240, 255, 0.02) 0%, transparent 50%); pointer-events: none; } .presale-content { max-width: 1200px; margin: 0 auto; text-align: center; } .presale-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 2rem 0; } .presale-card { background: transparent !important; border: 1px solid rgba(57, 255, 20, 0.2); border-radius: 12px; padding: 2rem; backdrop-filter: blur(10px); transition: all 0.3s ease; text-align: left; } .presale-card:hover { transform: translateY(-5px); border-color: rgba(57, 255, 20, 0.4); box-shadow: 0 10px 30px rgba(57, 255, 20, 0.1); } .presale-title { color: #39ff14; font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center; } .presale-description { font-size: 1.1rem; line-height: 1.6; color: #ccc; text-align: center; margin: 1rem 0; } .presale-cta-container { margin-top: 3rem; } .presale-subtitle { font-size: 1.2rem; margin-bottom: 1.5rem; color: #ccc; } .presale-cta { display: inline-block; background: linear-gradient(45deg, #39ff14, #00f0ff); color: #0a0a0a; padding: 1rem 2rem; border-radius: 50px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; border: none; cursor: pointer; font-size: 1.1rem; } .presale-cta:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(57, 255, 20, 0.5); } /* Modernized CHUCHO card styles */ .chucho-meme-card { max-width: 1000px; background: transparent; backdrop-filter: blur(15px); position: relative; overflow: visible; color: #ffffff; padding: 3rem; margin: 2.5rem auto; border: 1px solid rgba(57, 255, 20, 0.3); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(57, 255, 20, 0.1); } .chucho-logo-meme { width: 120px !important; height: 120px !important; margin: 0 auto 1.5rem; display: block; object-fit: contain; transition: transform 0.4s ease, filter 0.4s ease; filter: drop-shadow(0 0 15px rgba(57, 255, 20, 0.5)); } .chucho-meme-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(57, 255, 20, 0.3); } .chucho-meme-card:hover .chucho-logo-meme { transform: scale(1.1) rotate(5deg); filter: drop-shadow(0 0 20px rgba(57, 255, 20, 0.8)); } .chucho-card-header { display: flex; align-items: center; justify-content: center; gap: 2.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; padding: 1rem; background: transparent; border-radius: 15px; backdrop-filter: blur(5px); } .supply-tag { font-size: 1.2rem; font-weight: bold; background: linear-gradient(45deg, #39ff14, #00f0ff); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0.5rem 1rem; border-radius: 50px; border: 1px solid rgba(57, 255, 20, 0.3); box-shadow: 0 0 15px rgba(57, 255, 20, 0.2); } .chucho-meaning-table h4 { font-size: 1.4rem; margin-bottom: 2rem; text-align: center; color: #39ff14; position: relative; display: inline-block; left: 50%; transform: translateX(-50%); background: rgba(57, 255, 20, 0.1); padding: 0.5rem 1.5rem; border-radius: 30px; backdrop-filter: blur(5px); } .meaning-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 0 auto; max-width: 1000px; } .meaning-item { background: transparent !important; border: 1px solid rgba(57, 255, 20, 0.2); border-radius: 15px; padding: 1.2rem; transition: all 0.3s ease; backdrop-filter: blur(5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.8rem; } .meaning-item:hover { transform: translateY(-3px); border-color: rgba(57, 255, 20, 0.5); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); background: transparent !important; } /* Override for flag-country specific items in chucho section to remove borders */ .meaning-item.flag-country { border: none !important; box-shadow: none !important; } /* Additional comprehensive override to ensure all flag-country meaning items have no borders */ .meaning-item.flag-country, .meaning-grid .meaning-item.flag-country, .meaning-table .meaning-item.flag-country { border: none !important; outline: none !important; box-shadow: none !important; animation: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; } /* Ensure hover state doesn't add borders back */ .meaning-item.flag-country:hover, .meaning-grid .meaning-item.flag-country:hover, .meaning-table .meaning-item.flag-country:hover { border: none !important; box-shadow: none !important; outline: none !important; border-color: transparent !important; } /* Additional override to remove any potential border colors */ .chucho-meaning-table .meaning-item.flag-country, .chucho-meaning-table .meaning-item.flag-country:hover { border: none !important; border-color: transparent !important; } /* Remove green border from supply elements */ .supply-tag { border: none !important; outline: none !important; box-shadow: none !important; } .compact-supply { border: none !important; outline: none !important; box-shadow: none !important; } /* Make container full viewport width to prevent cutting */ .chucho-meme-content .chucho-intro-text { width: 100vw !important; max-width: none !important; margin-left: calc(-50vw + 50%) !important; /* Center and extend to full viewport */ margin-right: calc(-50vw + 50%) !important; /* Center and extend to full viewport */ padding-left: 0 !important; padding-right: 0 !important; } .chucho-intro-text { text-align: center; margin: 1.5rem auto; padding: 1.5rem; /* Keep padding for the content */ width: 100%; /* Full width of container */ max-width: none; /* Remove width constraint */ background: transparent !important; border-radius: 12px; border: none; /* Removed green border */ margin-bottom: 2rem; backdrop-filter: blur(5px); overflow-x: auto; overflow-y: visible; /* Allow overflow to be visible */ } .chucho-intro-text p { font-size: 1.2rem; color: #e0e0e0; line-height: 1.2; /* Reduced line height */ margin: 0; position: relative; white-space: nowrap; overflow-x: auto; overflow-y: visible; /* Allow overflow to be visible */ } .meaning-headers { display: flex; width: 100%; margin-bottom: 0.8rem; border-bottom: 2px solid #39ff14; padding-bottom: 0.8rem; background: transparent !important; border-radius: 8px 8px 0 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .header-item { font-weight: bold; color: #39ff14; text-transform: uppercase; font-size: 1rem; letter-spacing: 1px; padding: 0.8rem 1rem; text-align: center; } .header-item:first-child { flex: 0 0 200px; /* Fixed width for Country column */ border-right: 1px solid rgba(57, 255, 20, 0.3); } .header-item:last-child { flex: 1; /* Take remaining space for Meaning column */ } .meaning-grid { display: flex; flex-direction: column; gap: 0.6rem; border-radius: 0 0 8px 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .meaning-item { display: flex; align-items: flex-start; background: transparent !important; border: 1px solid rgba(57, 255, 20, 0.15); border-radius: 8px; padding: 1rem 1.2rem; transition: all 0.3s ease; gap: 1rem; } .meaning-item:hover { background: transparent !important; border-color: rgba(57, 255, 20, 0.4); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .country-info { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; min-width: 200px; padding-right: 1rem; border-right: 1px solid rgba(57, 255, 20, 0.15); } .country-flag { font-size: 1.6rem; display: inline-block; } .country-label { font-family: 'Share Tech', monospace !important; font-size: 1.15rem !important; font-weight: 400 !important; color: #39ff14 !important; display: inline-block !important; } /* Apply Share Tech to all body text except titles and hero section */ body { font-family: 'Share Tech', monospace !important; font-weight: 400 !important; font-size: 1.1rem !important; } /* Apply Tourney font to all titles */ h1, h2, h3, h4, h5, h6, .section-heading, .accent-text { font-family: 'Tourney', cursive !important; font-weight: 400 !important; } /* Style for animated emojis */ .animated-emoji { height: 1.2em; /* Slightly smaller than inline logos */ vertical-align: middle; margin: 0 0.1em; display: inline-block; width: auto; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; /* Ensure animated images display properly */ backface-visibility: hidden; transform: translateZ(0); } /* Enhanced animation for when images hover */ .animated-emoji:hover { transform: scale(1.1) translateZ(0); transition: transform 0.3s ease; } /* Reusable animations */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes glow { 0% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 200, 0.3); } 100% { text-shadow: 0 0 15px rgba(255, 255, 100, 0.8), 0 0 25px rgba(255, 255, 50, 0.6), 0 0 35px rgba(255, 250, 0, 0.4); } } @keyframes pulse { 0% { transform: scale(1); text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); } 100% { transform: scale(1.1); text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.6); } } @keyframes techPulse { 0%, 100% { text-shadow: 0 0 5px rgba(0, 247, 255, 0.5); transform: scale(1); } 50% { text-shadow: 0 0 15px rgba(0, 247, 255, 0.8), 0 0 20px rgba(0, 247, 255, 0.6); transform: scale(1.05); } } /* Preserve original fonts for highlighted words within body text */ .highlight-word { font-family: inherit !important; } /* Apply Silkscreen font specifically to hero text */ .hero-title-dex { font-family: 'Silkscreen', monospace !important; font-weight: 400 !important; position: relative; top: -20px; /* Move text up more to prevent cutting off */ line-height: 1.4; /* Adjust line height */ } /* Remove bold from highlighted words in hero */ .hero-title-dex .highlight-word { font-weight: 400 !important; font-size: 1em !important; } /* Apply Doto font ExtraBold 800 to ticker text */ .ticker-text, .header-ticker .ticker-text, .footer-ticker-text { font-family: 'Doto', sans-serif !important; font-weight: 800 !important; /* ExtraBold 800 weight */ letter-spacing: 0.5px !important; /* Slightly increased for better readability */ font-size: 1.2em !important; /* Well-balanced size for futuristic look */ } /* Specific styles for header ticker */ .header-ticker .ticker-text { font-size: 1.1rem !important; } /* Specific styles for footer ticker */ .footer-ticker-text { font-size: 1.2rem !important; /* Balanced size for futuristic Doto font */ line-height: 1.2 !important; margin: 0 !important; padding: 0.5rem 0 !important; } .meaning-grid .meaning-item .meaning-desc { font-family: 'Share Tech', monospace !important; font-size: 1.15rem !important; font-weight: 400 !important; color: #ddd !important; line-height: 1.6 !important; flex: 1 !important; margin: 0 !important; padding: 0 !important; align-self: center !important; } .chucho-bottom-section { margin-top: 2.5rem; padding-top: 2rem; border-top: none; /* Remove green border */ text-align: center; } .chucho-meme-bottom-quote { font-size: 1.2rem; line-height: 1.6; margin-bottom: 2rem; padding: 1.5rem; background: transparent; border-left: none; /* Remove green border */ border-radius: 8px; text-align: left; } .chucho-connections { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin: 2rem 0; } .connection-item { display: flex; align-items: center; gap: 0.75rem; background: transparent !important; padding: 1rem 1.5rem; border-radius: 12px; border: 1px solid rgba(57, 255, 20, 0.2); transition: all 0.3s ease; } .connection-item:hover { transform: translateY(-3px); border-color: rgba(57, 255, 20, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .chucho-heartbeat, .chucho-formula { margin: 0; font-size: 1.1rem; } .chucho-tagline { font-size: 1.3rem; font-weight: bold; color: #39ff14; margin-top: 1.5rem; display: block; text-align: center; } @keyframes gradientRotate { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Typewriter effect - More specific to override existing styles */ .hero-title .hero-title-dex#typewriter-container { font-size: clamp(1.1rem, 2.5vw, 1.8rem) !important; /* Smaller than default */ line-height: 1.3 !important; /* Adjust line height for better spacing */ } #typewriter-container { font-size: 0.8em !important; /* Override with smaller size */ } .typewriter-cursor { display: inline-block !important; width: 0.55em !important; /* Square-ish width */ height: 1.1em !important; /* Square-ish height */ background-color: #39ff14 !important; /* Green background for square appearance */ margin-left: 4px !important; /* Spacing */ margin-right: 1px !important; /* Additional margin */ margin-bottom: 2px !important; /* Better vertical alignment */ vertical-align: middle !important; /* Better alignment */ animation: retro-cursor-blink 0.8s infinite step-end !important; box-shadow: 0 0 6px #39ff14 !important, 0 0 10px #39ff14 !important, 0 0 16px rgba(57, 255, 20, 0.8) !important, /* Ghost trail effect - multiple faded shadows */ -0.2em 0 5px rgba(57, 255, 20, 0.3) !important, -0.4em 0 4px rgba(57, 255, 20, 0.2) !important, -0.6em 0 3px rgba(57, 255, 20, 0.1) !important; position: relative !important; opacity: 0.5 !important; /* More translucent */ font-weight: bold !important; /* Make sure it's visible */ text-shadow: 0 0 5px #39ff14 !important, 0 0 10px #39ff14 !important; color: transparent !important; /* Hide the | character so only the background shows */ font-family: 'Silkscreen', monospace !important; /* Use the same font as the hero */ text-align: center !important; /* Center the content */ line-height: 1.1em !important; /* Match height for vertical centering */ } @keyframes ghost-trail { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.1; transform: scale(1.2); } } /* Ensure highlight words keep their original styling within typewriter */ #typewriter-container .highlight-word { font-size: 1.15em !important; /* Maintain relative size */ animation: wordPulse 2s ease-in-out infinite, goldShimmer 2.5s linear infinite !important; } @keyframes retro-cursor-blink { from, to { opacity: 1; } 50% { opacity: 0; } } @keyframes cursor-blink { from, to { opacity: 1; } 50% { opacity: 0; } } @keyframes cursorGhostFade { 0% { opacity: 0.3; transform: scale(1); } 25% { opacity: 0.2; transform: scale(1.1); } 50% { opacity: 0.15; transform: scale(1.15); } 75% { opacity: 0.1; transform: scale(1.1); } 100% { opacity: 0.05; transform: scale(1); } } /* Special styling for PINCHE DUALITY section with token card */ .duality-section .features-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; margin-bottom: 2rem; } /* Equal width cards for PINCHE comparison */ .feature-card { display: flex; flex-direction: column; min-width: 0; /* Allow cards to shrink */ } .feature-card h3 { font-size: 1.4rem; margin-bottom: 1rem; text-align: center; } .feature-card .content-list { flex-grow: 1; /* Allow list to grow */ } .feature-card .content-list li { margin-bottom: 0.5rem; line-height: 1.4; padding: 0.5rem 0; padding-left: 2rem; } /* Condensed token card in duality section */ .duality-section .condensed-token-card { grid-column: 1 / -1; /* Span full width */ margin-bottom: 1rem; background: transparent !important; border: 1px solid rgba(57, 255, 20, 0.3) !important; border-radius: 15px !important; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } /* Adjust grid for equal width cards */ @media (min-width: 992px) { .duality-section .features-grid { grid-template-columns: repeat(3, 1fr); } /* Ensure all comparison cards have equal width */ .duality-section .feature-card { width: 100%; min-width: 0; } } @media (max-width: 768px) { .duality-section .features-grid { grid-template-columns: 1fr; gap: 1.5rem; } } /* Ensure token card fits well in the grid */ .duality-section .token-card { height: 100%; display: flex; flex-direction: column; } .duality-section .token-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; } .duality-section .token-description { flex-grow: 1; margin-bottom: 1rem; } @media (max-width: 768px) { .duality-section .features-grid { grid-template-columns: 1fr; gap: 1.5rem; } } /* Unified feature card styles */ .unified-feature h3 { text-align: center; margin-bottom: 1.5rem; color: #39ff14; } .unified-content { display: flex; flex-direction: column; gap: 1.2rem; } .feature-point { padding: 1rem; border-radius: 12px; background: rgba(57, 255, 20, 0.05); border: 1px solid rgba(57, 255, 20, 0.2); transition: all 0.3s ease; } .feature-point:hover { background: rgba(57, 255, 20, 0.1); border-color: rgba(57, 255, 20, 0.4); transform: translateY(-2px); } .feature-point h4 { color: #39ff14; margin-bottom: 0.5rem; font-size: 1.1rem; } .feature-point p { margin: 0; line-height: 1.5; color: #ccc; } /* Adjust spacing for unified card in duality section */ .duality-section .unified-feature { padding: 1.5rem; } @media (max-width: 768px) { .unified-content { gap: 1rem; } .feature-point { padding: 0.8rem; } } /* Condensed token card styles */ .condensed-token-card { display: flex; flex-direction: row; align-items: center; padding: 1rem 1.5rem; } .condensed-token-card .token-content { display: flex; flex-direction: row; align-items: center; width: 100%; gap: 1.5rem; } .token-header { display: flex; flex-direction: column; align-items: center; min-width: 120px; } .token-symbol { font-size: 1.8rem; color: #39ff14; margin: 0 0 0.5rem 0; text-align: center; font-weight: bold; letter-spacing: 1px; } .token-stats { text-align: center; } .stat-item { display: flex; flex-direction: column; align-items: center; } .stat-value { font-size: 1.2rem; font-weight: bold; color: #fff; margin-bottom: 0.2rem; } .stat-label { font-size: 0.7rem; color: #39ff14; text-transform: uppercase; letter-spacing: 1px; } .condensed-token-card .token-description { flex: 1; margin: 0; font-size: 0.9rem; line-height: 1.4; } /* Animated counter styles */ .animated-counter { position: relative; display: inline-block; } .animated-counter::after { content: '+'; position: absolute; right: -12px; top: 0; font-size: 0.8rem; color: #39ff14; animation: counterPulse 2s infinite; } @keyframes counterPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } /* Responsive adjustments */ @media (max-width: 768px) { .condensed-token-card { flex-direction: column; text-align: center; padding: 1.2rem; } .condensed-token-card .token-content { flex-direction: column; gap: 1rem; } .token-header { flex-direction: row; justify-content: space-between; width: 100%; min-width: unset; } .token-symbol { margin: 0; } .token-stats { text-align: right; } } @media (max-width: 480px) { .token-header { flex-direction: column; gap: 0.5rem; text-align: center; } .token-stats { text-align: center; } } /* PINCHE BAD card styling */ .feature-card:nth-child(2) h3 { color: #ff3939; /* Red color for BAD */ } .feature-card:nth-child(2) .content-list li { color: #ff9999; /* Lighter red for list items */ } .feature-card:nth-child(2) .content-list li::before { content: '✗ '; /* Cross mark instead of checkmark */ color: #ff3939; } /* Add fun interactive effects to feature cards */ .feature-card { transition: transform 0.3s ease, box-shadow 0.3s ease, background-position 0.6s ease; cursor: pointer; background: transparent !important; background-size: 400% 400%; animation: gradientShift 8s ease infinite; position: relative; overflow: hidden; border-radius: 12px; padding: 2rem; } .feature-card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, #39ff14, #00f7ff, #ff3939, #00f7ff, #39ff14); background-size: 400% 400%; border-radius: 14px; z-index: -1; opacity: 0.3; animation: borderGradient 4s linear infinite; } .feature-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 20px 40px rgba(57, 255, 20, 0.3), 0 0 30px rgba(0, 247, 255, 0.4); background-position: 100% 100%; animation: gradientShift 3s ease infinite; } .feature-card h3 { margin-bottom: 1rem; text-align: center; font-size: 1.4rem; position: relative; z-index: 1; } .feature-card .content-list { padding-left: 1.5rem; position: relative; z-index: 1; margin-top: 1rem; } .feature-card .content-list li { margin-bottom: 0.5rem; line-height: 1.4; padding: 0.5rem 0; padding-left: 2rem; transition: transform 0.2s ease; font-size: 1.5rem !important; /* Increased from default size */ } .feature-card .content-list li { position: relative; padding-left: 2.5rem; font-size: 1.5rem !important; /* Increased from default size */ } .feature-card .content-list li:hover { transform: translateX(5px) scale(1.02); color: #ffffff; z-index: 5; } .feature-card .content-list li::before { transition: transform 0.3s ease, text-shadow 0.3s ease; } .feature-card .content-list li:hover::before { transform: scale(1.2) rotate(10deg); text-shadow: 0 0 8px currentColor; } /* Add individual bounce effect for each list item */ .feature-card .content-list li { animation: subtleBounce var(--bounce-duration, 4s) ease-in-out infinite; animation-delay: var(--bounce-delay, 0s); } .feature-card:nth-child(1) .content-list li:nth-child(1) { --bounce-duration: 3s; --bounce-delay: 0.1s; } .feature-card:nth-child(1) .content-list li:nth-child(2) { --bounce-duration: 4s; --bounce-delay: 0.3s; } .feature-card:nth-child(1) .content-list li:nth-child(3) { --bounce-duration: 3.5s; --bounce-delay: 0.5s; } .feature-card:nth-child(1) .content-list li:nth-child(4) { --bounce-duration: 4.5s; --bounce-delay: 0.7s; } .feature-card:nth-child(1) .content-list li:nth-child(5) { --bounce-duration: 3.8s; --bounce-delay: 0.9s; } .feature-card:nth-child(1) .content-list li:nth-child(6) { --bounce-duration: 4.2s; --bounce-delay: 1.1s; } .feature-card:nth-child(2) .content-list li:nth-child(1) { --bounce-duration: 4.1s; --bounce-delay: 0.2s; } .feature-card:nth-child(2) .content-list li:nth-child(2) { --bounce-duration: 3.3s; --bounce-delay: 0.4s; } .feature-card:nth-child(2) .content-list li:nth-child(3) { --bounce-duration: 4.4s; --bounce-delay: 0.6s; } .feature-card:nth-child(2) .content-list li:nth-child(4) { --bounce-duration: 3.7s; --bounce-delay: 0.8s; } .feature-card:nth-child(2) .content-list li:nth-child(5) { --bounce-duration: 4.6s; --bounce-delay: 1.0s; } .feature-card:nth-child(3) .content-list li:nth-child(1) { --bounce-duration: 3.6s; --bounce-delay: 0.15s; } .feature-card:nth-child(3) .content-list li:nth-child(2) { --bounce-duration: 4.3s; --bounce-delay: 0.35s; } .feature-card:nth-child(3) .content-list li:nth-child(3) { --bounce-duration: 3.9s; --bounce-delay: 0.55s; } .feature-card:nth-child(3) .content-list li:nth-child(4) { --bounce-duration: 4.7s; --bounce-delay: 0.75s; } .feature-card:nth-child(3) .content-list li:nth-child(5) { --bounce-duration: 3.4s; --bounce-delay: 0.95s; } /* Add floating animation to cards */ .feature-card { animation: float 6s ease-in-out infinite; } .feature-card:nth-child(2n) { animation-delay: 1s; } .feature-card:nth-child(3n) { animation-delay: 2s; } /* Add fun animations for the text */ .feature-card h3 { animation: pulseGlow 2s ease-in-out infinite alternate; } /* Keyframes for animations */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } @keyframes pulseGlow { 0% { text-shadow: 0 0 5px rgba(57, 255, 20, 0.5); } 100% { text-shadow: 0 0 20px rgba(57, 255, 20, 0.8), 0 0 30px rgba(57, 255, 20, 0.6); } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes borderGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Styling for PINCHE logo in feature cards */ .pinche-logo-feature { height: 2.5rem; width: auto; vertical-align: middle; margin-right: 0.5rem; filter: drop-shadow(0 0 5px rgba(57, 255, 20, 0.7)); transition: transform 0.3s ease, filter 0.3s ease; animation: spinLogo 6s linear infinite, floatLogo 3s ease-in-out infinite; } .feature-card:hover .pinche-logo-feature { transform: scale(1.2) rotate(10deg); filter: drop-shadow(0 0 15px rgba(57, 255, 20, 0.9)); } /* More animated effects for content */ .feature-card { animation: bobbing 4s ease-in-out infinite, pulseBackground 6s ease-in-out infinite, shimmer 8s ease-in-out infinite; transform-origin: center; } .feature-card:nth-child(1) { animation-delay: 0s; } .feature-card:nth-child(2) { animation-delay: 0.5s; } .feature-card:nth-child(3) { animation-delay: 1s; } /* Animated content inside cards */ /* Balance animations with larger text */ .feature-card .content-list li { opacity: 0.95; transform-origin: center; transition: all 0.3s ease; } .feature-card:nth-child(1) .content-list li:nth-child(odd) { animation: textWiggle 4s ease-in-out infinite; } .feature-card:nth-child(1) .content-list li:nth-child(even) { animation: textBounce 3s ease-in-out infinite; } .feature-card:nth-child(2) .content-list li:nth-child(odd) { animation: textPulse 4.5s ease-in-out infinite; } .feature-card:nth-child(2) .content-list li:nth-child(even) { animation: textWiggle 3s ease-in-out infinite; } .feature-card:nth-child(3) .content-list li:nth-child(odd) { animation: textBounce 4s ease-in-out infinite; } .feature-card:nth-child(3) .content-list li:nth-child(even) { animation: textWiggle 3.5s ease-in-out infinite; } /* Random fun animations for individual list items */ .feature-card .content-list li:nth-of-type(1) { animation-delay: 0.1s; } .feature-card .content-list li:nth-of-type(2) { animation-delay: 0.3s; } .feature-card .content-list li:nth-of-type(3) { animation-delay: 0.5s; } .feature-card .content-list li:nth-of-type(4) { animation-delay: 0.7s; } .feature-card .content-list li:nth-of-type(5) { animation-delay: 0.9s; } .feature-card .content-list li:nth-of-type(6) { animation-delay: 1.1s; } /* Additional fun animations */ .feature-card h3 { animation: headBounce 3s ease-in-out infinite, rainbowGlow 5s ease-in-out infinite; } @keyframes headBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } 60% { transform: translateY(-1px); } } @keyframes rainbowGlow { 0% { text-shadow: 0 0 5px rgba(57, 255, 20, 0.5); } 25% { text-shadow: 0 0 5px rgba(0, 247, 255, 0.5); } 50% { text-shadow: 0 0 5px rgba(255, 69, 69, 0.5); } 75% { text-shadow: 0 0 5px rgba(0, 247, 255, 0.5); } 100% { text-shadow: 0 0 5px rgba(57, 255, 20, 0.5); } } /* Keyframes for new animations */ @keyframes spinLogo { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes floatLogo { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(5deg); } } @keyframes bobbing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes pulseBackground { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.05); } } @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes textBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } 60% { transform: translateY(-1px); } } @keyframes textWiggle { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } } @keyframes textPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes subtleBounce { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-2px); } 50% { transform: translateY(1px); } 75% { transform: translateY(-1px); } } /* Emojis pop-up for extra humor */ .feature-card:nth-child(1) .content-list li:nth-child(1)::after { content: '💡'; position: absolute; right: 10px; animation: emojiFloat 4s infinite; opacity: 0; } .feature-card:nth-child(1) .content-list li:nth-child(2)::after { content: '🚀'; position: absolute; right: 10px; animation: emojiFloat 5s infinite 0.5s; opacity: 0; } .feature-card:nth-child(1) .content-list li:nth-child(3)::after { content: '🔗'; position: absolute; right: 10px; animation: emojiFloat 4.5s infinite 1s; opacity: 0; } .feature-card:nth-child(2) .content-list li:nth-child(1)::after { content: '☢️'; position: absolute; right: 10px; animation: emojiFloat 4s infinite 0.2s; opacity: 0; } .feature-card:nth-child(2) .content-list li:nth-child(2)::after { content: '🏦'; position: absolute; right: 10px; animation: emojiFloat 5s infinite 0.7s; opacity: 0; } /* Animation for the emoji pop-ups */ @keyframes emojiFloat { 0%, 40% { opacity: 0; transform: translateY(10px) scale(0.5); } 50% { opacity: 1; transform: translateY(-15px) scale(1.2); } 60% { opacity: 1; transform: translateY(-15px) scale(1.1); } 100% { opacity: 0; transform: translateY(-25px) scale(0); } } /* Sparkle effects for extra fun */ .feature-card::after { content: ''; position: absolute; top: 10%; left: 10%; width: 8px; height: 8px; background: #39ff14; border-radius: 50%; opacity: 0; animation: sparkle 3s infinite; box-shadow: 0 0 10px 2px #39ff14; } .feature-card:nth-child(2)::after { background: #ff4444; box-shadow: 0 0 10px 2px #ff4444; animation: sparkle 4s infinite; animation-delay: 1s; } .feature-card:nth-child(3)::after { background: #00f7ff; box-shadow: 0 0 10px 2px #00f7ff; animation: sparkle 5s infinite; animation-delay: 2s; } @keyframes sparkle { 0% { opacity: 0; transform: scale(0) translate(-10px, -10px); } 25% { opacity: 1; transform: scale(1) translate(5px, 5px); } 50% { opacity: 0.8; transform: scale(1.2) translate(10px, 10px); } 75% { opacity: 0.4; transform: scale(0.8) translate(-5px, -5px); } 100% { opacity: 0; transform: scale(0) translate(0, 0); } } /* Ensure consistent styling for both good and bad cards */ .feature-card h3 { margin-bottom: 1rem; text-align: center; font-size: 1.4rem; } .feature-card .content-list { padding-left: 1.5rem; } .feature-card .content-list li { margin-bottom: 0.5rem; line-height: 1.4; } @media (max-width: 768px) { .feature-card h3 { font-size: 1.3rem; } } /* PINCHE GOOD card styling */ .feature-card:nth-child(1) h3 { color: #39ff14; /* Green color for GOOD */ } .feature-card:nth-child(1) .content-list li { color: #ccffcc; /* Lighter green for list items */ } .feature-card:nth-child(1) .content-list li::before { content: '✓ '; /* Checkmark */ color: #39ff14; } /* Ensure consistent styling for both good and bad cards */ .feature-card h3 { margin-bottom: 1rem; text-align: center; font-size: 1.4rem; } .feature-card .content-list { padding-left: 1.5rem; } .feature-card .content-list li { margin-bottom: 0.5rem; line-height: 1.4; padding: 0.5rem 0; padding-left: 2rem; } @media (max-width: 768px) { .feature-card h3 { font-size: 1.3rem; } } /* PINCHE EXISTENTIAL card styling */ .feature-card:nth-child(3) h3 { color: #00d4ff; /* Cyan color for EXISTENTIAL */ } .feature-card:nth-child(3) .content-list li { color: #b3f0ff; /* Lighter cyan for list items */ } .feature-card:nth-child(3) .content-list li::before { content: '∞ '; /* Infinity symbol */ color: #00d4ff; } /* PINCHE Token Description Styles */ .pinche-token-description { margin: 2rem 0; width: 100%; } .pinche-token-description .token-symbol { font-size: 2rem; color: #39ff14; margin: 0; text-align: center; font-weight: bold; letter-spacing: 1px; } .pinche-token-description .stat-value { font-size: 1.3rem; font-weight: bold; color: #fff; } .pinche-token-description .stat-label { display: block; font-size: 0.8rem; color: #39ff14; text-transform: uppercase; letter-spacing: 1px; } .pinche-token-description p { flex: 1; min-width: 250px; margin: 0; font-size: 1rem; line-height: 1.5; color: #ccc; } .pinche-token-description .accent-text { color: #39ff14; } /* Responsive adjustments */ @media (max-width: 768px) { .pinche-token-description { margin: 1.5rem 0; } .pinche-token-description .token-symbol { font-size: 1.8rem; } .pinche-token-description .stat-value { font-size: 1.2rem; } .pinche-token-description p { font-size: 0.95rem; text-align: center; } } /* Full-width card styling */ .full-width-card { grid-column: 1 / -1; /* Span full width */ margin-top: 1rem; } .full-width-card .unified-content { display: flex; flex-direction: row; gap: 2rem; justify-content: space-between; } .full-width-card .feature-point { flex: 1; padding: 1.5rem; border-radius: 12px; background: rgba(57, 255, 20, 0.05); border: 1px solid rgba(57, 255, 20, 0.2); transition: all 0.3s ease; } .full-width-card .feature-point:hover { background: rgba(57, 255, 20, 0.1); border-color: rgba(57, 255, 20, 0.4); transform: translateY(-2px); } .full-width-card .feature-point h4 { color: #39ff14; margin-bottom: 1rem; font-size: 1.3rem; text-align: center; } .full-width-card .feature-point p { margin: 0; line-height: 1.6; color: #ccc; text-align: center; } /* Responsive adjustments for full-width card */ @media (max-width: 768px) { .full-width-card .unified-content { flex-direction: column; gap: 1.5rem; } .full-width-card .feature-point { padding: 1.2rem; } .full-width-card .feature-point h4 { font-size: 1.2rem; } } /* CHUCHO logo animation in presale section */ .presale-section .logo-container-hero { display: flex !important; justify-content: center !important; align-items: center !important; margin: 2rem auto !important; width: 100% !important; } .presale-section .logo-hero-img { width: 30% !important; height: auto !important; max-width: 200px !important; margin: 0 auto !important; display: block !important; filter: drop-shadow(0 0 10px rgba(57, 255, 20, 0.4)) !important; animation: logoModernPulse 4s ease-in-out infinite !important; -webkit-animation: logoModernPulse 4s ease-in-out infinite !important; -moz-animation: logoModernPulse 4s ease-in-out infinite !important; -o-animation: logoModernPulse 4s ease-in-out infinite !important; } /* Ensure logo animation works across browsers */ .presale-section .logo-hero-img { -webkit-animation: logoModernPulse 4s ease-in-out infinite; -moz-animation: logoModernPulse 4s ease-in-out infinite; -o-animation: logoModernPulse 4s ease-in-out infinite; animation: logoModernPulse 4s ease-in-out infinite; } /* Responsive adjustments for CHUCHO logo */ @media (max-width: 768px) { .presale-section .logo-hero-img { width: 40% !important; max-width: 150px !important; } } @media (max-width: 480px) { .presale-section .logo-hero-img { width: 50% !important; max-width: 120px !important; } } /* Compact CHUCHO section styling */ .compact-chucho-section { margin-top: -2rem !important; /* Move section up */ margin-bottom: 2rem !important; } .compact-chucho-card { padding: 1.5rem !important; /* Reduce padding */ margin: 1rem auto !important; /* Center with smaller margins */ max-width: 900px !important; /* Slightly smaller max width */ } .compact-header { margin-bottom: 1rem !important; /* Reduce header margin */ } .compact-supply { font-size: 1.1rem !important; /* Smaller supply text */ padding: 0.3rem 0.8rem !important; /* Reduce padding */ } .compact-content { padding: 0 !important; /* Remove content padding */ } .compact-quote { margin-bottom: 1rem !important; /* Reduce quote margin */ } .chucho-main-quote { font-size: 1.4rem !important; /* Smaller quote font */ margin: 0.5rem 0 !important; } .compact-intro { font-size: 0.95rem !important; /* Smaller intro text */ margin-bottom: 1rem !important; } .compact-table { margin: 1rem 0 !important; /* Reduce table margins */ } .compact-grid { gap: 0.8rem !important; /* Reduce gap between items */ } .compact-item { padding: 0.8rem !important; /* Reduce padding */ } .compact-country { margin-bottom: 0.3rem !important; /* Reduce country info margin */ } .compact-desc { font-size: 1.8rem !important; /* Doubled description text size */ } .compact-bottom { margin-top: 1rem !important; /* Reduce bottom section margin */ } .compact-bottom-quote { font-size: 1rem !important; /* Smaller bottom quote */ margin-bottom: 1rem !important; } .compact-connections { gap: 0.8rem !important; /* Reduce gap between connections */ } .compact-connection { padding: 0.8rem !important; /* Reduce connection padding */ } .compact-connection p { font-size: 0.9rem !important; /* Smaller connection text */ } .compact-tagline { font-size: 1.1rem !important; /* Smaller tagline */ margin-top: 0.5rem !important; } /* Responsive adjustments */ @media (max-width: 768px) { .compact-chucho-section { margin-top: -1rem !important; /* Less movement on mobile */ } .compact-chucho-card { padding: 1rem !important; margin: 0.5rem auto !important; } .compact-item { padding: 0.6rem !important; } .chucho-main-quote { font-size: 1.2rem !important; } .compact-bottom-quote { font-size: 0.9rem !important; } } @media (max-width: 480px) { .compact-chucho-card { padding: 0.8rem !important; } .compact-item { padding: 0.5rem !important; } .compact-desc { font-size: 1.7rem !important; /* Doubled mobile size */ } } /* CHUCHO logo styling in compact card */ .compact-badge { display: flex !important; align-items: center !important; justify-content: flex-start !important; margin-right: 1rem !important; } .compact-logo { width: 60px !important; /* Smaller logo */ height: auto !important; max-width: 60px !important; filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.6)) !important; animation: logoModernPulse 4s ease-in-out infinite !important; -webkit-animation: logoModernPulse 4s ease-in-out infinite !important; -moz-animation: logoModernPulse 4s ease-in-out infinite !important; -o-animation: logoModernPulse 4s ease-in-out infinite !important; } .compact-header { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 1rem !important; margin-bottom: 1rem !important; } .compact-supply { font-size: 1.2rem !important; color: #39ff14 !important; font-weight: bold !important; background: rgba(57, 255, 20, 0.1) !important; padding: 0.4rem 0.8rem !important; border-radius: 20px !important; border: none !important; /* Remove green border */ backdrop-filter: blur(5px) !important; } /* Flag size adjustments for CHUCHO card */ .country-flag { font-size: 1.5rem !important; /* Reduced from default size */ margin-right: 0.3rem !important; } .compact-country { display: flex !important; flex-direction: column !important; /* Stack flag and label vertically */ align-items: center !important; gap: 0.3rem !important; } .country-label { font-size: 0.9rem !important; /* Slightly smaller text */ } .meaning-desc { font-size: 0.85rem !important; /* Slightly smaller description */ } /* Responsive adjustments for compact header */ @media (max-width: 768px) { .compact-logo { width: 50px !important; max-width: 50px !important; } .compact-supply { font-size: 1.1rem !important; padding: 0.3rem 0.6rem !important; } .country-flag { font-size: 1.3rem !important; /* Even smaller on mobile */ } .country-label { font-size: 0.85rem !important; } .meaning-desc { font-size: 0.8rem !important; } } @media (max-width: 480px) { .compact-logo { width: 40px !important; max-width: 40px !important; } .compact-header { gap: 0.5rem !important; } .country-flag { font-size: 1.2rem !important; /* Smallest on very small screens */ } .compact-item { padding: 0.4rem !important; /* Reduce padding even more */ } } /* Additional flag styling for CHUCHO card */ .flag-country .country-flag { font-size: 4.8rem !important; /* Doubled flag size */ min-width: 4.8rem !important; height: 4.8rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-right: 0.6rem !important; /* Doubled margin */ } .flag-country .country-info { display: flex !important; flex-direction: column !important; /* Stack flag and label vertically */ align-items: center !important; gap: 0.6rem !important; /* Doubled gap */ margin-bottom: 0.4rem !important; /* Doubled margin */ } .flag-country .meaning-item { padding: 2rem !important; /* Doubled padding to fit larger content better */ } /* Ensure flags don't wrap to new line */ .country-info { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Adjust flag size for combined flags (like SV/HN) */ .flag-country .country-flag:has(span) { font-size: 1.2rem !important; /* Even smaller for combined flags */ } /* Responsive flag adjustments */ @media (max-width: 768px) { .flag-country .country-flag { font-size: 3.8rem !important; /* Larger mobile flag size */ min-width: 3.8rem !important; height: 3.8rem !important; } .flag-country .country-label { font-size: 1.8rem !important; /* Larger mobile country label */ } .flag-country .meaning-desc { font-size: clamp(1.5rem, 2.5vw, 1.6rem) !important; /* Smaller size on mobile */ } /* Specific responsive rule for the meaning grid */ .meaning-grid .meaning-item.flag-country .meaning-desc { font-size: clamp(1.5rem, 2.5vw, 1.6rem) !important; /* Smaller size on mobile */ } .flag-country .meaning-item { padding: 1rem !important; /* Doubled mobile padding */ } /* Remove any potential borders or outlines - COMPLETELY on mobile */ .meaning-grid .meaning-item.flag-country { border: none !important; outline: none !important; box-shadow: none !important; animation: none !important; /* Keep the background but remove any border effects */ } .flag-country .meaning-item { border: none !important; outline: none !important; box-shadow: none !important; animation: none !important; /* Keep the background but remove any border effects */ } } @media (max-width: 480px) { .flag-country .country-flag { font-size: 3.2rem !important; /* Larger extra mobile flag size */ min-width: 3.2rem !important; height: 3.2rem !important; } .flag-country .country-label { font-size: 1.6rem !important; /* Mobile country label size */ } .flag-country .meaning-desc { font-size: clamp(1.3rem, 2vw, 1.5rem) !important; /* Smaller size on small mobile */ } /* Specific responsive rule for the meaning grid */ .meaning-grid .meaning-item.flag-country .meaning-desc { font-size: clamp(1.3rem, 2vw, 1.5rem) !important; /* Smaller size on small mobile */ } .compact-item { padding: 1.2rem !important; /* Increased padding for mobile */ } /* Remove any potential borders or outlines - COMPLETELY on small mobile */ .meaning-grid .meaning-item.flag-country { border: none !important; outline: none !important; box-shadow: none !important; animation: none !important; /* Keep the background but remove any border effects */ } .flag-country .meaning-item { border: none !important; outline: none !important; box-shadow: none !important; animation: none !important; /* Keep the background but remove any border effects */ } } /* Prevent word breaking in footer ticker */ .footer-ticker-text { word-break: keep-all !important; word-wrap: normal !important; overflow-wrap: normal !important; hyphens: none !important; } /* Ensure smooth word spacing */ .footer-ticker-text span, .footer-ticker-text a { white-space: nowrap !important; display: inline-block !important; } /* Prevent word breaking in header ticker */ .ticker-text { word-break: keep-all !important; word-wrap: normal !important; overflow-wrap: normal !important; hyphens: none !important; white-space: nowrap !important; } /* Ensure smooth word spacing in header */ .ticker-text span, .ticker-text a { white-space: nowrap !important; display: inline-block !important; } /* Conflicting hero section logo rules removed - using consolidated styles above */ /* Ensure proper z-index for back-to-top button without overriding JS behavior */ #back-to-top, .back-to-top-btn { z-index: 10000 !important; /* High z-index to ensure it's on top */ } /* Ensure footer ticker has proper z-index */ .social-links.footer-ticker-container, .footer-ticker-container { z-index: 1 !important; /* Proper z-index */ overflow-x: hidden !important; } /* Ensure typewriter cursor is visible */ .typewriter-cursor { opacity: 1 !important; display: inline !important; } /* Footer Marquee Fixes - Comprehensive solution for visibility and animation issues */ /* Reset and fix main footer positioning */ .main-footer { position: relative; background: transparent; padding: 0; /* Remove padding to let container handle it */ text-align: center; z-index: 100; width: 100%; overflow: hidden; border-top: 1px solid rgba(57, 255, 20, 0.2); display: block; visibility: visible; opacity: 1; margin-bottom: 0 !important; bottom: 0; } /* Fix footer ticker container */ .footer-ticker-container { position: relative; width: 100%; height: auto; overflow: hidden; background: transparent !important; padding: 0.5rem 0; /* Further reduced to eliminate excess space */ z-index: 2; display: block; white-space: nowrap; visibility: visible; opacity: 1; pointer-events: none; } /* Simplified and fixed footer ticker text */ .footer-ticker-text { display: inline-block; white-space: nowrap; font-size: 2.4em; font-weight: 700; color: #ffffff; text-shadow: 0 0 10px rgba(57, 255, 20, 0.8), 0 0 20px rgba(57, 255, 20, 0.6), 0 0 30px rgba(57, 255, 20, 0.4); position: relative; z-index: 3; letter-spacing: 1px; animation: footerMarqueeScroll 60s linear infinite; width: auto; min-width: 200%; margin: 0; padding: 0; word-spacing: normal; pointer-events: none; visibility: visible; opacity: 1; } /* Clean marquee scroll animation */ @keyframes footerMarqueeScroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* Simplified scanlines effect */ .footer-ticker-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(0deg, transparent 0px, rgba(0, 0, 0, 0.5) 1px, transparent 2px); pointer-events: none; z-index: 1; opacity: 0.7; animation: scanlineMove 2s linear infinite; mix-blend-mode: multiply; } @keyframes scanlineMove { 0% { transform: translateY(0px); } 100% { transform: translateY(4px); } } /* Simplified ghost text effect */ .footer-ticker-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: rgba(0, 212, 255, 0.4); z-index: -1; pointer-events: none; animation: ghostPulse 3s infinite; text-shadow: 0 0 15px rgba(0, 212, 255, 0.6); transform: translate(2px, 2px); } @keyframes ghostPulse { 0%, 70% { opacity: 0; } 71%, 85% { opacity: 0.6; } 86%, 100% { opacity: 0; } } /* Mobile responsiveness */ @media (max-width: 768px) { .footer-ticker-text { font-size: 1.8em; } .footer-ticker-container { padding: 1.5rem 0; } } @media (max-width: 480px) { .footer-ticker-text { font-size: 1.4em; } .footer-ticker-container { padding: 1rem 0; } } /* Override any existing conflicting styles */ .footer-ticker-text { font-family: 'Doto', 'Silkscreen', monospace; font-weight: 800; } /* Ensure footer visibility on all screen sizes */ .main-footer, .footer-ticker-container, .footer-ticker-text { display: block; visibility: visible; opacity: 1; } /* Remove any extra space after footer */ body { overflow-x: hidden !important; } .main-footer { margin-bottom: 0 !important; } html, body { margin: 0 !important; padding: 0 !important; } /* Force no space after footer - aggressive fix */ * { box-sizing: border-box; } footer, .main-footer, .footer-ticker-container { margin-bottom: 0 !important; padding-bottom: 0 !important; } body { margin: 0 !important; padding: 0 !important; } html { margin: 0 !important; padding: 0 !important; } /* Ensure the page ends exactly at the footer */ main { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* AGGRESSIVE FIX: Eliminate all space after footer */ html, body { height: auto !important; min-height: 100vh !important; overflow-x: hidden !important; } /* Force all background elements to not add height */ #terminal-background, .scanlines, .floating-particles, .matrix-bg, .sparkle-container, .retrot-terminal-bg { position: fixed !important; height: 100vh !important; min-height: 100vh !important; top: 0 !important; left: 0 !important; width: 100vw !important; } /* Ensure footer is truly the last element */ .main-footer { position: relative !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Remove any bottom margins from all sections */ section { margin-bottom: 0 !important; } /* Final fix - no space after footer whatsoever */ body::after { content: ''; display: block; height: 0 !important; margin: 0 !important; padding: 0 !important; } .x-logo-link { display: inline-block; position: relative; text-decoration: none; border-radius: 50%; padding: 10px; transition: all 0.3s ease; } .x-logo-link::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient(circle, rgba(29, 161, 242, 0.3) 0%, transparent 70%); border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; z-index: 0; } .x-logo-link:hover::before { opacity: 1; } .x-logo-link:hover { transform: translateY(-2px); } .x-logo-container { position: relative; display: inline-block; transition: transform 0.3s ease; } .x-logo-container:hover { transform: scale(1.1); } .x-logo-container:hover .x-logo-glow { animation-duration: 1.5s; filter: blur(20px) brightness(3) drop-shadow(0 0 40px rgba(29, 161, 242, 1)) drop-shadow(0 0 20px rgba(255, 255, 255, 1)); } .x-logo-svg { position: relative; z-index: 2; fill: #1DA1F2; /* Twitter blue color */ stroke: #ffffff; /* White outline */ stroke-width: 1.5; /* Thin outline */ stroke-linejoin: round; /* Smooth corners */ stroke-linecap: round; /* Smooth ends */ filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5)); /* Subtle white shadow */ transition: all 0.3s ease; } .x-logo-svg:hover { fill: #1d9bf0; /* Slightly darker blue on hover */ stroke: #ffffff; /* Brighter white on hover */ stroke-width: 2; /* Slightly thicker on hover */ filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); /* Stronger shadow on hover */ } .x-logo-glow { position: absolute; top: 0; left: 0; z-index: 1; filter: blur(8px) brightness(1.5) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); animation: x-glow-pulse-enhanced 3s ease-in-out infinite; opacity: 0.8; } @keyframes x-glow-pulse-enhanced { 0% { opacity: 0.6; filter: blur(8px) brightness(1.5) drop-shadow(0 0 10px rgba(29, 161, 242, 0.8)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); transform: scale(1); } 25% { opacity: 0.9; filter: blur(12px) brightness(2) drop-shadow(0 0 20px rgba(29, 161, 242, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); transform: scale(1.05); } 50% { opacity: 1; filter: blur(15px) brightness(2.5) drop-shadow(0 0 30px rgba(29, 161, 242, 1)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); transform: scale(1.1); } 75% { opacity: 0.9; filter: blur(12px) brightness(2) drop-shadow(0 0 20px rgba(29, 161, 242, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); transform: scale(1.05); } 100% { opacity: 0.6; filter: blur(8px) brightness(1.5) drop-shadow(0 0 10px rgba(29, 161, 242, 0.8)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); transform: scale(1); } } /* Make X logo bigger in community section */ .community-section .x-logo-svg { width: 3em !important; height: 3em !important; } /* Ensure hero logo is not cut off */ .hero-section { overflow: visible !important; } /* Final conflicting logo rule removed - using consolidated styles above */ /* --- USER REQUESTED CHANGES (v2) --- */ /* Style each flag item as a separate section */ .meaning-item.flag-country { background: transparent !important; /* Dark background for the section */ border: 1px solid #2a2a2a; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; width: 98%; /* Almost full width */ margin-left: auto; margin-right: auto; display: grid; /* Use grid for two-column layout */ grid-template-columns: 120px 1fr; /* Wider column for flag, rest for description */ gap: 1rem; /* Space between columns */ align-items: center; /* Vertically align content */ transition: all 0.3s ease-in-out; } .meaning-item.flag-country:hover { transform: scale(1.03); box-shadow: 0 0 20px rgba(57, 255, 20, 0.5); } .meaning-item.flag-country .flag-column { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .meaning-item.flag-country .country-flag { font-size: 2.0rem !important; /* Larger flags */ margin-bottom: 0.5rem; /* Space between flag and label */ transition: transform 0.5s ease-in-out; } .meaning-item.flag-country:hover .country-flag { transform: rotate(360deg); } .meaning-item.flag-country .country-label { font-size: 1.2rem; /* Adjust size of country label */ color: var(--text-secondary); } .meaning-item.flag-country .meaning-desc { font-size: 2.0rem !important; /* Even smaller text size for description */ line-height: 1.4; color: var(--text-primary); } /* New styles for image X logo - more specific to override potential conflicts */ .community-section .x-logo-container .x-logo-image { position: relative; z-index: 2; width: 100%; height: auto; max-width: 150px; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5)); /* Subtle white shadow */ transition: all 0.3s ease; border-radius: 0; /* In case the logo needs to be shaped */ object-fit: contain; /* Ensures image maintains aspect ratio */ display: block; /* Ensures proper display without extra space */ } .community-section .x-logo-container .x-logo-image { width: 3em !important; height: 3em !important; } .community-section .x-logo-container .x-logo-image:hover { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); /* Stronger shadow on hover */ } /* Glow effect for image - more specific to avoid conflicts */ .community-section .x-logo-container .x-logo-glow-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; filter: blur(8px) brightness(1.5) drop-shadow(0 0 10px rgba(29, 161, 242, 0.3)); animation: x-glow-pulse-enhanced 3s ease-in-out infinite; opacity: 0.8; pointer-events: none; /* Allow clicks to pass through to the image */ border-radius: 0; } @keyframes x-glow-pulse-enhanced { 0% { opacity: 0.6; filter: blur(8px) brightness(1.5) drop-shadow(0 0 10px rgba(29, 161, 242, 0.8)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); transform: scale(1); } 25% { opacity: 0.9; filter: blur(12px) brightness(2) drop-shadow(0 0 20px rgba(29, 161, 242, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); transform: scale(1.05); } 50% { opacity: 1; filter: blur(15px) brightness(2.5) drop-shadow(0 0 30px rgba(29, 161, 242, 1)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); transform: scale(1.1); } 75% { opacity: 0.9; filter: blur(12px) brightness(2) drop-shadow(0 0 20px rgba(29, 161, 242, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); transform: scale(1.05); } 100% { opacity: 0.6; filter: blur(8px) brightness(1.5) drop-shadow(0 0 10px rgba(29, 161, 242, 0.8)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); transform: scale(1); } } /* Make sure the glow effect works on hover - more specific */ .community-section .x-logo-container:hover .x-logo-glow-image { animation-duration: 1.5s; filter: blur(20px) brightness(3) drop-shadow(0 0 40px rgba(29, 161, 242, 1)) drop-shadow(0 0 20px rgba(255, 255, 255, 1)); } /* Double the size of the chucho logo in the whitelist form */ .contact-section .chucho-logo-large { height: 80px !important; /* Double the original size of 40px */ width: auto !important; margin: 0 8px !important; filter: drop-shadow(0 0 12px rgba(0, 212, 255, 1)) !important; /* Slightly enhanced shadow for the larger size */ } /* Increase the font size of the whitelist button */ .contact-section .whitelist-button { font-size: 1.8rem !important; /* Increased from 1.3rem to make text bigger */ padding: 1.5rem 3rem !important; /* Slightly more padding for better appearance */ } /* Ensure hero particles are always visible and not affected by background effect hiding rules */ #hero #main-background-particles, #hero #main-background-particles-2 { display: block !important; visibility: visible !important; opacity: 1 !important; } #hero #main-background-particles { z-index: 101 !important; /* Higher than #hero z-index to ensure visibility */ } #hero #main-background-particles-2 { z-index: 102 !important; /* Highest z-index for hero particles */ } /* HYPER REALISTIC CRT ANIMATIONS */ /* Economy section scanlines - authentic CRT timing */ @keyframes hyperRealisticEconomyScan { 0% { background-position: 0 0, 0 0; filter: blur(0.5px) contrast(1.4) brightness(1.0); } 15% { background-position: 0 1px, 0 1px; filter: blur(0.4px) contrast(1.5) brightness(1.1); } 30% { background-position: 0 2px, 0 2px; filter: blur(0.6px) contrast(1.3) brightness(0.9); } 45% { background-position: 0 3px, 0 3px; filter: blur(0.5px) contrast(1.4) brightness(1.0); } 60% { background-position: 0 4px, 0 4px; filter: blur(0.7px) contrast(1.2) brightness(1.2); } 75% { background-position: 0 0, 0 0; filter: blur(0.4px) contrast(1.5) brightness(1.0); } 100% { background-position: 0 0, 0 0; filter: blur(0.5px) contrast(1.4) brightness(1.0); } } /* Terminal background - ultra-fast phosphor decay simulation */ @keyframes hyperRealisticScanlines { 0% { background-position: 0 0, 0 0; opacity: 0.9; filter: blur(0.3px) brightness(1.0); } 25% { background-position: 0 1px, 0 1px; opacity: 1.0; filter: blur(0.2px) brightness(1.1); } 50% { background-position: 0 2px, 0 2px; opacity: 0.8; filter: blur(0.4px) brightness(0.9); } 75% { background-position: 0 0, 0 0; opacity: 0.95; filter: blur(0.3px) brightness(1.0); } 100% { background-position: 0 0, 0 0; opacity: 0.9; filter: blur(0.3px) brightness(1.0); } } /* Vertical scanlines with realistic retrace */ @keyframes hyperRealisticVerticalScan { 0% { background-position: 0 0, 0 0; transform: scaleX(1.0); } 10% { background-position: 1px 0, 0 0; transform: scaleX(1.02); } 20% { background-position: 2px 0, 0 0; transform: scaleX(1.0); } 30% { background-position: 3px 0, 0 0; transform: scaleX(0.98); } 40% { background-position: 4px 0, 0 0; transform: scaleX(1.0); } 50% { background-position: 0 0, 0 0; transform: scaleX(1.0); } 100% { background-position: 0 0, 0 0; transform: scaleX(1.0); } } /* Interference pattern animation */ @keyframes hyperRealisticInterference { 0% { background-position: 0 0, 0 0; opacity: 0.7; } 25% { background-position: 2px 0, 0 0; opacity: 0.8; } 50% { background-position: 4px 0, 0 0; opacity: 0.6; } 75% { background-position: 1px 0, 0 0; opacity: 0.75; } 100% { background-position: 0 0, 0 0; opacity: 0.7; } } /* Process section scanlines with phosphor flicker */ @keyframes hyperRealisticProcessScan { 0% { background-position: 0 0, 0 0; filter: brightness(1.0) contrast(1.3); } 20% { background-position: 0 2px, 0 2px; filter: brightness(1.2) contrast(1.4); } 40% { background-position: 0 4px, 0 4px; filter: brightness(0.9) contrast(1.2); } 60% { background-position: 0 6px, 0 6px; filter: brightness(1.1) contrast(1.3); } 80% { background-position: 0 2px, 0 2px; filter: brightness(1.0) contrast(1.4); } 100% { background-position: 0 0, 0 0; filter: brightness(1.0) contrast(1.3); } } /* Phosphor flicker effect */ @keyframes phosphorFlicker { 0%, 100% { opacity: 0.85; filter: brightness(1.0); } 2% { opacity: 0.95; filter: brightness(1.1); } 4% { opacity: 0.80; filter: brightness(0.9); } 6% { opacity: 0.90; filter: brightness(1.0); } 95% { opacity: 0.87; filter: brightness(1.05); } } /* --- STYLES REMOVED BY USER REQUEST --- */ /* --- Scroll to Top Button (v12 - Ghost Arrow & Contrasting Rings) --- */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 25px 3px rgba(57, 255, 20, 0.5); opacity: 0.8; } 50% { box-shadow: 0 0 45px 12px rgba(57, 255, 20, 0.9); opacity: 1; } } @keyframes arrow-bounce-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes ghost-arrow { 0%, 100% { transform: translateY(0); opacity: 0; } 50% { transform: translateY(-12px); opacity: 0.5; } } #scroll-to-top { position: fixed; bottom: 30px; right: 30px; cursor: pointer; z-index: 1000; opacity: 0; visibility: hidden; width: 100px; height: 100px; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale(0.7); transform-origin: bottom right; display: flex; justify-content: center; align-items: center; } #scroll-to-top.visible { opacity: 1 !important; visibility: visible !important; transform: scale(1); } /* Base glow (smaller 'eclipse') */ #scroll-to-top::before { content: ''; position: absolute; inset: 15px; /* Makes the element smaller than the 100px container */ border-radius: 50%; box-shadow: 0 0 15px 2px rgba(57, 255, 20, 0.4); transition: all 0.3s ease-in-out; z-index: 0; opacity: 1; } #scroll-to-top:hover::before { animation: glow-pulse 2s ease-in-out infinite; } #scroll-to-top a { position: relative; display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; background: rgba(10, 10, 10, 0.85) !important; backdrop-filter: blur(4px); border-radius: 50%; border: 2px solid #39ff14 !important; text-decoration: none; z-index: 5; transition: none; /* Remove any transition on the anchor */ } /* Force the anchor to be stable on hover */ #scroll-to-top a:hover { transform: none !important; animation: none !important; } #scroll-to-top a svg { position: relative; z-index: 10; transition: filter 0.3s ease; filter: drop-shadow(0 0 3px rgba(57, 255, 20, 0.7)); } #scroll-to-top:hover a svg { filter: drop-shadow(0 0 8px #39ff14) drop-shadow(0 -6px 8px rgba(57, 255, 20, 0.6)) drop-shadow(0 -12px 10px rgba(57, 255, 20, 0.3)); animation: arrow-bounce-up 1s ease-in-out infinite; } /* Spinning rings as pseudo-elements of the STABLE anchor */ #scroll-to-top a::before, #scroll-to-top a::after { content: ''; position: absolute; box-sizing: border-box; left: 50%; top: 50%; border-radius: 50%; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; /* Centering is now handled by left/top 50% and negative margins */ } /* Ring 1: Inner, solid - Bright green (clockwise) */ #scroll-to-top a::before { width: 82px; /* 70px + 12px */ height: 82px; margin-left: -41px; /* -width/2 */ margin-top: -41px; /* -height/2 */ border: 3px solid #39ff14; /* Bright green */ box-shadow: 0 0 15px rgba(57, 255, 20, 0.8), inset 0 0 10px rgba(57, 255, 20, 0.3); /* Strong glow */ } /* Ring 2: Outer, dotted - Cyan contrast (counter-clockwise) */ #scroll-to-top a::after { width: 94px; /* 70px + 24px */ height: 94px; margin-left: -47px; /* -width/2 */ margin-top: -47px; /* -height/2 */ border: 3px dotted #00ffff; /* Cyan for contrast */ box-shadow: 0 0 12px rgba(0, 255, 255, 0.7), inset 0 0 8px rgba(0, 255, 255, 0.3); /* Cyan glow */ } #scroll-to-top:hover a::before { opacity: 1; /* Full opacity for better visibility */ animation: spin 1.2s linear infinite; border-color: #39ff14; /* Keep bright green */ } #scroll-to-top:hover a::after { opacity: 1; /* Full opacity for maximum contrast */ animation: spin-reverse 1.8s linear infinite; border-color: #00ffff; /* Keep cyan */ }