{} *{} /*endBaseStyles*/ #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header */ .header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 20px 0; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 1000; } .header h1 { text-align: center; font-size: 2.5rem; color: #2c3e50; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .header .subtitle { text-align: center; font-size: 1.2rem; color: #7f8c8d; font-weight: 300; } /* Hero Section */ .hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 80px 0; text-align: center; color: white; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>'); opacity: 0.3; } .hero-content { position: relative; z-index: 2; } .hero h2 { font-size: 3.5rem; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); animation: fadeInUp 1s ease-out; } .hero p { font-size: 1.3rem; margin-bottom: 40px; opacity: 0.9; animation: fadeInUp 1s ease-out 0.2s both; } .vs-container { display: flex; justify-content: center; align-items: center; gap: 40px; margin: 40px 0; animation: fadeInUp 1s ease-out 0.4s both; } .vpn-logo { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; min-width: 200px; } .vpn-logo:hover { transform: translateY(-10px); } .vpn-logo h3 { color: #2c3e50; font-size: 2rem; margin-bottom: 10px; } .nordvpn { border-left: 5px solid #4687ff; } .surfshark { border-left: 5px solid #00d4aa; } .vs-text { font-size: 3rem; font-weight: bold; color: #fff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); animation: pulse 2s infinite; } /* Score Board */ .score-board { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 20px; border-radius: 15px; margin: 40px auto; max-width: 400px; border: 2px solid rgba(255, 255, 255, 0.2); } .score-display { display: flex; justify-content: space-between; align-items: center; font-size: 1.5rem; font-weight: bold; } .score-item { text-align: center; flex: 1; } .score-number { font-size: 3rem; display: block; margin: 10px 0; transition: all 0.5s ease; } .nordvpn-score { color: #4687ff; } .surfshark-score { color: #00d4aa; } /* Battle Rounds */ .battle-section { background: white; padding: 80px 0; } .round { margin-bottom: 80px; padding: 40px; background: #f8f9fa; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; opacity: 0; transform: translateY(50px); transition: all 0.8s ease; } .round.animate-in { opacity: 1; transform: translateY(0); } .round::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #4687ff, #00d4aa); } .round-header { text-align: center; margin-bottom: 40px; } .round-number { display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 10px 20px; border-radius: 50px; font-size: 1.2rem; font-weight: bold; margin-bottom: 20px; animation: bounceIn 0.8s ease-out; } .round h3 { font-size: 2.5rem; color: #2c3e50; margin-bottom: 10px; } .round-icon { width: 60px; height: 60px; margin: 0 auto 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; animation: rotateIn 1s ease-out; } .comparison-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; margin-bottom: 40px; } .vpn-card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); text-align: center; transition: all 0.5s ease; transform: scale(0.9); opacity: 0; } .vpn-card.animate-in { transform: scale(1); opacity: 1; } .vpn-card.winner { transform: scale(1.05); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); border: 3px solid #f093fb; animation: winnerGlow 2s ease-in-out infinite alternate; } .vpn-card:hover { transform: translateY(-5px) scale(1.02); } .vpn-card h4 { font-size: 1.5rem; margin-bottom: 20px; color: #2c3e50; } .vpn-card .score { font-size: 3rem; font-weight: bold; margin-bottom: 15px; transition: all 0.5s ease; } .nordvpn-card .score { color: #4687ff; } .surfshark-card .score { color: #00d4aa; } .vpn-card .details { font-size: 0.9rem; color: #7f8c8d; line-height: 1.5; } .vs-divider { width: 80px; height: 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: bold; animation: spin 2s linear infinite; position: relative; } .vs-divider::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe); border-radius: 50%; z-index: -1; animation: rotate 3s linear infinite; } .winner-badge { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 15px 30px; border-radius: 50px; font-weight: bold; text-align: center; margin-top: 20px; box-shadow: 0 5px 15px rgba(240, 147, 251, 0.4); opacity: 0; transform: translateY(20px); transition: all 0.8s ease; position: relative; overflow: hidden; } .winner-badge.show { opacity: 1; transform: translateY(0); animation: winnerPulse 1.5s ease-in-out infinite alternate; } .winner-badge::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.8s; } .winner-badge.show::before { left: 100%; } /* Battle Progress Bar */ .battle-progress { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: rgba(255, 255, 255, 0.2); z-index: 1001; } .progress-bar { height: 100%; background: linear-gradient(90deg, #f093fb, #f5576c); width: 0%; transition: width 0.3s ease; } /* Fireworks Animation */ .fireworks { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; } .firework { position: absolute; width: 4px; height: 4px; background: #f093fb; border-radius: 50%; animation: fireworkExplode 1s ease-out forwards; } /* Comparison Table */ .comparison-table-section { background: #f8f9fa; padding: 80px 0; } .comparison-table { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); margin-top: 40px; opacity: 0; transform: translateY(30px); transition: all 0.8s ease; } .comparison-table.animate-in { opacity: 1; transform: translateY(0); } .table-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; text-align: center; } .table-header h3 { font-size: 2rem; margin-bottom: 10px; } .table-content { padding: 0; } .table-row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid #eee; transition: background 0.3s ease; } .table-row:hover { background: rgba(102, 126, 234, 0.05); } .table-row:last-child { border-bottom: none; } .table-cell { padding: 20px; text-align: center; border-right: 1px solid #eee; transition: all 0.3s ease; } .table-cell:last-child { border-right: none; } .table-cell.feature { background: #f8f9fa; font-weight: bold; color: #2c3e50; } .table-cell.nordvpn { background: rgba(70, 135, 255, 0.1); } .table-cell.surfshark { background: rgba(0, 212, 170, 0.1); } .checkmark { color: #27ae60; font-size: 1.2rem; animation: checkmarkBounce 0.6s ease-out; } .cross { color: #e74c3c; font-size: 1.2rem; } /* Final Verdict */ .final-verdict { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 80px 0; text-align: center; color: white; position: relative; overflow: hidden; } .final-verdict::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="white" opacity="0.1"><animate attributeName="opacity" values="0.1;0.3;0.1" dur="2s" repeatCount="indefinite"/></circle><circle cx="80" cy="30" r="1.5" fill="white" opacity="0.1"><animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" repeatCount="indefinite"/></circle><circle cx="60" cy="70" r="1" fill="white" opacity="0.1"><animate attributeName="opacity" values="0.1;0.5;0.1" dur="2.5s" repeatCount="indefinite"/></circle></svg>'); } .final-verdict h2 { font-size: 3rem; margin-bottom: 30px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); animation: finalVerdictGlow 2s ease-in-out infinite alternate; } .winner-announcement { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 40px; border-radius: 20px; margin: 40px auto; max-width: 600px; border: 2px solid rgba(255, 255, 255, 0.2); transform: scale(0.9); opacity: 0; transition: all 1s ease; } .winner-announcement.animate-in { transform: scale(1); opacity: 1; } .winner-announcement h3 { font-size: 2.5rem; margin-bottom: 20px; color: #fff; animation: winnerTextGlow 1.5s ease-in-out infinite alternate; } .winner-announcement p { font-size: 1.2rem; opacity: 0.9; margin-bottom: 30px; } /* CTA Buttons */ .cta-buttons { display: flex; justify-content: center; gap: 30px; margin-top: 40px; flex-wrap: wrap; } .cta-button { display: inline-block; padding: 20px 40px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; transform: translateY(20px); opacity: 0; } .cta-button.animate-in { transform: translateY(0); opacity: 1; } .cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .cta-button:hover::before { left: 100%; } .cta-primary { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; transform: scale(1.1) translateY(20px); animation: ctaPulse 2s ease-in-out infinite alternate; } .cta-primary.animate-in { transform: scale(1.1) translateY(0); } .cta-primary:hover { transform: scale(1.15) translateY(-2px); box-shadow: 0 10px 25px rgba(245, 87, 108, 0.4); } .cta-secondary { background: rgba(255, 255, 255, 0.2); color: white; border: 2px solid rgba(255, 255, 255, 0.3); } .cta-secondary:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } /* FAQ Section */ .faq-section { background: white; padding: 80px 0; } .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { background: #f8f9fa; margin-bottom: 20px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateX(-30px); transition: all 0.6s ease; } .faq-item.animate-in { opacity: 1; transform: translateX(0); } .faq-question { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; cursor: pointer; font-weight: bold; font-size: 1.1rem; transition: all 0.3s ease; position: relative; overflow: hidden; } .faq-question::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; transition: transform 0.3s ease; } .faq-question.active::after { transform: translateY(-50%) rotate(45deg); } .faq-question:hover { background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); } .faq-answer { padding: 20px; display: none; line-height: 1.6; color: #555; animation: slideDown 0.3s ease-out; } .faq-answer.active { display: block; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @keyframes rotateIn { from { opacity: 0; transform: rotate(-200deg); } to { opacity: 1; transform: rotate(0deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes winnerGlow { from { box-shadow: 0 15px 40px rgba(240, 147, 251, 0.3); } to { box-shadow: 0 15px 40px rgba(240, 147, 251, 0.8); } } @keyframes winnerPulse { from { transform: scale(1); } to { transform: scale(1.05); } } @keyframes fireworkExplode { 0% { opacity: 1; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } } @keyframes checkmarkBounce { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes finalVerdictGlow { from { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } to { text-shadow: 2px 2px 20px rgba(255, 255, 255, 0.5); } } @keyframes winnerTextGlow { from { text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } to { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); } } @keyframes ctaPulse { from { box-shadow: 0 5px 15px rgba(245, 87, 108, 0.4); } to { box-shadow: 0 5px 25px rgba(245, 87, 108, 0.8); } } @keyframes slideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 200px; } } /* Responsive Design */ @media (max-width: 768px) { .header h1 { font-size: 2rem; } .hero h2 { font-size: 2.5rem; } .vs-container { flex-direction: column; gap: 20px; } .vpn-logo { min-width: auto; width: 100%; max-width: 300px; } .comparison-grid { grid-template-columns: 1fr; gap: 20px; } .vs-divider { width: 60px; height: 60px; font-size: 1.5rem; margin: 0 auto; } .table-row { grid-template-columns: 1fr; } .table-cell { border-right: none; border-bottom: 1px solid #eee; } .cta-buttons { flex-direction: column; align-items: center; } .cta-button { width: 100%; max-width: 300px; text-align: center; } .round { padding: 20px; } .round h3 { font-size: 2rem; } .score-board { max-width: 300px; } .score-number { font-size: 2rem; } } @media (max-width: 480px) { .container { padding: 0 15px; } .hero { padding: 60px 0; } .hero h2 { font-size: 2rem; } .hero p { font-size: 1.1rem; } .round h3 { font-size: 1.8rem; } .final-verdict h2 { font-size: 2.5rem; } .winner-announcement h3 { font-size: 2rem; } }