/* Draco Taco Landing Page CSS - WORKING VERSION */ /* /* Variables */ :root { --draco-blood-red: #DC143C; --draco-fire-red: #FF0000; --draco-purple-haze: #4B0082; --draco-purple-glow: #9400D3; --draco-black: #0A0A0A; --draco-dark-purple: #1A0033; --draco-smoke: rgba(128, 0, 128, 0.3); --draco-mist: rgba(220, 20, 60, 0.2); --draco-text-light: #F5F5F5; --draco-warning: #FFD700; } @font-face { font-family: 'GHOULSCRIPT'; /* Choose a descriptive name for your font */ src: url('font/GHOULSCRIPT.woff') format('woff'), /* Path to WOFF2 file */ url('font/GHOULSCRIPT.woff') format('woff'); /* Path to WOFF file (for broader support if needed) */ font-weight: normal; /* Or specify a numerical value like 400, 700 for different weights */ font-style: normal; /* Or 'italic' if it's an italic variant */ /* Add other descriptors like font-display if needed */ } /* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow-x: hidden; /*background: black;*/ } /* Main Container */ .draco-taco-landing { width: 100%; background: linear-gradient(180deg, var(--draco-black) 0%, var(--draco-dark-purple) 50%, var(--draco-black) 100%); font-family: 'Courier New', 'Courier', monospace; color: var(--draco-text-light); position: relative; min-height: 100vh; } /* WORKING FOG EFFECT - Bottom 15% */ .fog-container { position: fixed; bottom: 0; left: 0; width: 100%; height: 15vh; pointer-events: none; z-index: 10; overflow: hidden; } .fog-layer { position: absolute; bottom: 0; width: 200%; height: 100%; opacity: 0.6; } .fog-layer-1 { background: linear-gradient(to top, rgba(148, 0, 211, 0.6), transparent); animation: fogMove1 20s infinite; } .fog-layer-2 { background: linear-gradient(to top, rgba(220, 20, 60, 0.5), transparent); animation: fogMove2 25s infinite; } .fog-layer-3 { background: linear-gradient(to top, rgba(75, 0, 130, 0.4), transparent); animation: fogMove3 30s infinite; } @keyframes fogMove1 { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(0%); } } @keyframes fogMove2 { 0%, 100% { transform: translateX(0%); } 50% { transform: translateX(-30%); } } @keyframes fogMove3 { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(20%); } } /* Hero Section */ .draco-hero { position: relative; /*min-height: 100vh;*/ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; /* background: radial-gradient(circle at center, transparent 0%, var(--draco-black) 100%), url('img/PROMO_BACKGROUND_AESTHETIC.png') center/cover; */ background: radial-gradient(circle at center, transparent 0%, var(--draco-black) 100%), url('img/texture_BG2.png') center/cover; z-index: 2; } .draco-hero-content { position: relative; z-index: 3; max-width: 1920px; padding-top: -20px; padding-bottom: -50px; } .draco-dragon-logo { width: 750px; height: 750px; margin: 0 auto 0px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 30px var(--draco-fire-red)); animation: pulse 3s ease-in-out infinite; z-index: -1; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .draco-hero h1 { font-family: "GHOULSCRIPT"; font-weight: 50; font-size: clamp(1rem, 7vw, 3rem); font-style: normal; color: var(--draco-fire-red); letter-spacing: -1px; text-shadow: 0 0 1px var(--draco-fire-red), 0 0 1px var(--draco-fire-red), 0 0 .25px var(--draco-blood-red), 0 0 .25px var(--draco-blood-red); margin-bottom: 5px; animation: glow 2s ease-in-out infinite alternate; } .draco-hero h2 { font-family: "GHOULSCRIPT"; font-weight: 50; font-size: 125px; /*font-size: clamp(2rem, 20vw, 3rem);*/ font-style: thin; color: var(--draco-fire-red); margin-top: -5px; margin-bottom: 5px; letter-spacing: -1px; text-shadow: 0 0 1px var(--draco-fire-red), 0 0 1px var(--draco-fire-red), 0 0 .25px var(--draco-blood-red), 0 0 .25px var(--draco-blood-red); animation: glow 2s ease-in-out infinite alternate; } .draco-hero h3 { font-family: "GHOULSCRIPT"; font-weight: 100; font-size: clamp(1em, 5vw, 3rem); font-style: thin; color: white; letter-spacing: -1px; /* text-shadow: 0 0 1px white 0 0 1px white 0 0 .25px white 0 0 .25px white; */ margin-bottom: 0px; margin-top: -8px; animation: glow2 2s ease-in-out infinite alternate; z-index: 20; } @keyframes glow2 { from { text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px var(--draco-blood-red); } to { text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px var(--draco-blood-red); } } @keyframes glow { from { text-shadow: 0 0 1px var(--draco-fire-red), 0 0 1px var(--draco-fire-red), 0 0 1px var(--draco-blood-red); } to { text-shadow: 0 0 10px var(--draco-fire-red), 0 0 10px var(--draco-fire-red), 0 0 10px var(--draco-blood-red); } } /* Mobile adjustment */ @media (max-width: 768px) { .draco-classified-badge { top: 10px; right: -70px; padding: 10px 80px; font-size: 0.8rem; } /* Reduce gap between h3 "combo" and dragon logo on mobile */ .draco-hero h3 { margin-bottom: -20px !important; } } /* Legend Section */ .draco-legend { padding: 40px 20px; /* Reduced from 80px to 40px */ background: linear-gradient(180deg, var(--draco-black) 0%, var(--draco-dark-purple) 100%); position: relative; z-index: 2; background: radial-gradient(circle at center, transparent 0%, var(--draco-black) 100%), url('img/texture_BG2.png') center/cover; margin-bottom: 0px; } .draco-legend-content { max-width: 900px; padding-bottom: -20px; margin: 0 auto; text-align: center; margin-bottom: -20px; } .draco-legend h2 { font-family: 'Brush Script MT', cursive; font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--draco-text-light); margin-bottom: -20px; font-style: italic; opacity: 0.8; } .draco-legend-title { font-family: 'Courier New', sans-serif; font-size: clamp(2.5rem, 7vw, 5rem); color: var(--draco-fire-red); text-transform: uppercase; letter-spacing: 2px; margin-bottom: -30px; text-shadow: 3px 3px 0 var(--draco-black); } .legend-story { font-size: clamp(1rem, 2.5vw, 1.3rem); line-height: 1.6; color: var(--draco-text-light); font-family: 'Courier New', monospace; background: rgba(0, 0, 0, 0.6); padding: 30px; border-radius: 10px; /* border: 1px solid var(--draco-blood-red);*/ } /* ======================================== PRODUCT SHOWCASE - TWO COLUMN LAYOUT ======================================== */ .draco-product-showcase { padding: 20px 20px; background: radial-gradient(circle at center, transparent 0%, var(--draco-black) 100%), url('img/texture_BG2.png') center/cover; /*background: linear-gradient(180deg, var(--draco-black) 0%, rgba(26, 0, 51, 0.8) 50%, var(--draco-black) 100%);*/ position: relative; z-index: 2; } /* Container for both products */ .draco-products-container { max-width: 1200px; margin: 0 auto; display: flex; gap: 60px; align-items: flex-start; justify-content: center; flex-wrap: wrap; padding: 40px 20px; } /* Individual Product Wrappers */ .draco-product-image-wrapper, .drac-arita-image-wrapper { flex: 1 1 400px; max-width: 500px; position: relative; animation: productFloat 6s ease-in-out infinite; } /* Offset animation for second item */ .drac-arita-image-wrapper { animation-delay: -3s; } @keyframes productFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } /* Product Image Container */ .draco-product-image-wrapper .product-image-container, .drac-arita-image-wrapper .product-image-container { position: relative; background: linear-gradient(135deg, rgba(220, 20, 60, 0.1) 0%, rgba(75, 0, 130, 0.1) 100%); border: 3px solid var(--draco-blood-red); border-radius: 15px; padding: 20px; min-height: 350px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 0, 0, 0.2), inset 0 0 120px rgba(255, 0, 0, 0.1); transition: all 0.3s ease; } /* Hover effect for image containers */ .draco-product-image-wrapper .product-image-container:hover, .drac-arita-image-wrapper .product-image-container:hover { transform: scale(1.05); border-color: var(--draco-fire-red); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 0, 0, 0.4), inset 0 0 150px rgba(255, 0, 0, 0.2); } /* Glowing backdrop for images */ .draco-product-image-wrapper .product-image-container::before, .drac-arita-image-wrapper .product-image-container::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background: radial-gradient(circle, rgba(255, 0, 0, 0.4) 0%, transparent 70%); filter: blur(40px); opacity: 0.6; animation: glowPulse 4s ease-in-out infinite; z-index: -1; } /* Product Images */ .draco-product-image-wrapper img, .drac-arita-image-wrapper img { max-width: 100%; height: auto; max-height: 300px; object-fit: contain; position: relative; z-index: 2; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5)); } /* Product Titles */ .draco-product-image-wrapper h3, .drac-arita-image-wrapper h3 { font-family: "GHOULSCRIPT"; font-weight: 50; font-size: clamp(1rem, 7vw, 3rem); font-style: normal; color: var(--draco-fire-red); letter-spacing: -1px; text-shadow: 0 0 1px var(--draco-fire-red), 0 0 1px var(--draco-fire-red), 0 0 .25px var(--draco-blood-red), 0 0 .25px var(--draco-blood-red); text-align: center; margin: 20px 0 10px 0; animation: textGlow 3s ease-in-out infinite alternate; } /* Product Descriptions */ .draco-product-image-wrapper .product-description, .drac-arita-image-wrapper .product-description { font-family: 'Courier New', monospace; font-size: 1rem; line-height: 1.6; color: var(--draco-text-light); text-align: center; padding: 15px; background: rgba(0, 0, 0, 0.6); border-left: 3px solid var(--draco-blood-red); border-radius: 5px; margin-top: 15px; position: relative; } /* Special badge for Drac-a-rita */ .drac-arita-image-wrapper .product-badge { position: absolute; top: -15px; right: -15px; background: var(--draco-warning); color: var(--draco-black); padding: 10px 20px; border-radius: 50px; font-weight: bold; text-transform: uppercase; font-size: 0.8rem; transform: rotate(15deg); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); z-index: 20; animation: badgePulse 2s ease-in-out infinite; } .drac-arita-image-wrapper .price-badge { position: absolute; bottom: -20px; right: -15px; color: white; font-family: "GHOULSCRIPT"; font-weight: 50; font-size: clamp(1rem, 7vw, 3rem); font-style: normal; letter-spacing: -1px; text-shadow: 0 0 1px var(--draco-fire-red), 0 0 1px var(--draco-fire-red), 0 0 .25px var(--draco-blood-red), 0 0 .25px var(--draco-blood-red); text-align: center; text-transform: uppercase; transform: rotate(15deg); z-index: 20; animation: badgePulse 2s ease-in-out infinite; } .draco-product-image-wrapper .price-badge { position: absolute; bottom: -20px; right: -15px; color: white; font-family: "GHOULSCRIPT"; font-weight: 50; font-size: clamp(1rem, 7vw, 3rem); font-style: normal; letter-spacing: -1px; text-shadow: 0 0 1px var(--draco-fire-red), 0 0 1px var(--draco-fire-red), 0 0 .25px var(--draco-blood-red), 0 0 .25px var(--draco-blood-red); text-align: center; text-transform: uppercase; transform: rotate(15deg); z-index: 20; animation: badgePulse 2s ease-in-out infinite; } .sup { font-family: "GHOULSCRIPT"; font-weight: 50; font-size: clamp(1rem, 7vw, 2rem); font-style: normal; letter-spacing: -1px; color: white; text-align: center; text-transform: uppercase; } .draco-product-image-wrapper .product-badge { position: absolute; top: -15px; right: -15px; background: var(--draco-warning); color: var(--draco-black); padding: 10px 20px; border-radius: 50px; font-weight: bold; text-transform: uppercase; font-size: 0.8rem; transform: rotate(15deg); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); z-index: 20; animation: badgePulse 2s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { transform: rotate(15deg) scale(1); } 50% { transform: rotate(15deg) scale(1.1); } } /* Connecting line between products */ .draco-products-container::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 60%; background: linear-gradient(180deg, transparent 0%, var(--draco-fire-red) 50%, transparent 100%); opacity: 0.3; animation: lineGlow 3s ease-in-out infinite; } /* CTA Buttons Container */ .draco-buttons-container { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 20px; padding-top: 20px; border-top: 2px solid rgba(255, 0, 0, 0.2); } /* Ensure button containers are perfectly aligned */ .draco-buttons-container .store-locator-cta, .draco-buttons-container .draco-cta-content { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 !important; margin: 0 !important; width: auto; } /* Force both buttons to have same height and alignment */ .draco-buttons-container .store-locator-button, .draco-buttons-container .draco-order-button { vertical-align: top; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; height: 60px !important; padding: 0 50px !important; font-family: "GHOULSCRIPT" !important; font-size: 1.4rem !important; box-sizing: border-box !important; margin: 0 !important; /* Override all existing margins */ margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; text-align: center !important; text-decoration: none !important; /* Force vertical centering */ flex-direction: row !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow: visible !important; } /* Additional centering for button text */ .draco-buttons-container .store-locator-button span, .draco-buttons-container .draco-order-button span, .draco-buttons-container .store-locator-button, .draco-buttons-container .draco-order-button { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; width: 100% !important; } /* GHOULSCRIPT font for loyalty program button */ .draco-taco-landing .signup-button, .draco-taco-landing .fuzzy-glow-button, .signup-cta .signup-button, .signup-cta .fuzzy-glow-button { font-family: "GHOULSCRIPT" !important; } /* Courier New font for signup warning text */ .signup-warning { font-family: 'Courier New', monospace !important; } /* Store Locator CTA */ .store-locator-cta { text-align: center; } /* Mobile Responsive */ @media (max-width: 768px) { .draco-buttons-container { flex-direction: column; gap: 20px; margin-bottom: 5px; /* Reduce space below buttons */ } /* Adjust dragon logo spacing now that buttons are above it */ .draco-dragon-logo { margin-top: -80px; /* Further reduce top margin since buttons are above */ margin-bottom: -80px; /* Add bottom margin for spacing */ } /* Reduce spacing between hero and legend sections on mobile */ .draco-legend { padding: 20px 20px; /* Further reduce padding on mobile */ } .draco-products-container { flex-direction: column; gap: 30px; padding: 15px; align-items: center; justify-content: center; } .draco-product-image-wrapper, .drac-arita-image-wrapper { width: 100%; max-width: 100%; flex: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .draco-product-image-wrapper .product-image-container, .drac-arita-image-wrapper .product-image-container { width: 100%; max-width: 400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .draco-products-container::after { display: none; } } /* Hide red connecting line in problematic viewport range */ @media (min-width: 769px) and (max-width: 840px) { .draco-products-container::after { display: none; } .draco-product-image-wrapper, .drac-arita-image-wrapper { max-width: 100%; flex: none; width: 100%; } .draco-product-image-wrapper .product-image-container, .drac-arita-image-wrapper .product-image-container { min-height: 250px; padding: 15px; } .draco-product-image-wrapper img, .drac-arita-image-wrapper img { max-height: 200px; } .draco-product-image-wrapper h3, .drac-arita-image-wrapper h3 { font-size: 1.5rem; } } /* Tablet */ @media (min-width: 769px) and (max-width: 1024px) { .draco-products-container { gap: 40px; } .draco-product-image-wrapper, .drac-arita-image-wrapper { flex: 1 1 350px; } } /* Desktop Enhancement */ /* @media (min-width: 1025px) { .draco-product-image-wrapper::after, .drac-arita-image-wrapper::after { background: url('img/draco-fish-logo.png') center/cover; width: 100px; height: 100px; content: ''; position: absolute; top: -20px; left: -30px; font-size: 50px; animation: floatParticle 8s ease-in-out infinite; opacity: 0.6; } */ /* .drac-arita-image-wrapper::after { background: url('img/draco-fish-logo.png') center/cover; width: 100px; height: 100px; top: auto; bottom: -20px; right: -30px; left: auto; animation-delay: -4s; } } */ @keyframes floatParticle { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-20px) rotate(90deg); } 50% { transform: translateY(0) rotate(180deg); } 75% { transform: translateY(20px) rotate(270deg); } } .draco-warning-text { text-align: center; margin-top: 30px; padding: 20px; background: repeating-linear-gradient( 45deg, var(--draco-warning), var(--draco-warning) 10px, var(--draco-black) 10px, var(--draco-black) 20px ); border: 2px solid var(--draco-warning); color: var(--draco-warning); font-weight: bold; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; } /* WORKING FLIP CARDS */ .draco-cards-section { padding: 20px 20px; background: var(--draco-black); position: relative; margin-bottom: -10px; z-index: 5; } .draco-cards-section h2 { text-align: center; font-family: 'Courier New', sans-serif; font-size: clamp(2rem, 6vw, 4rem); color: var(--draco-fire-red); margin-bottom: 10px; text-transform: uppercase; text-shadow: 0 0 20px rgba(255, 0, 0, 0.8); animation: glow 2s ease-in-out infinite alternate; } .draco-cards-section h3 { text-align: center; font-family: 'Courier New', sans-serif; font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--draco-fire-red); margin-bottom: 20px; text-transform: uppercase; text-shadow: 0 0 20px rgba(255, 0, 0, 0.8); animation: glow 2s ease-in-out infinite alternate; } .trading-cards-container { display: flex; justify-content: center; padding-left: 10%; padding-right:10%; gap: 20px; margin-top: -20px; background-color: transparent; } /* CRITICAL FLIP CARD STRUCTURE */ /* Card Container with 3D Perspective */ .flip-card { background-color: transparent; width: 100%; max-width: 350px; height: 500px; margin: 0 auto; perspective: 1000px; } /* Inner Container for Flip Animation */ .flip-card-inner { background-color: transparent; position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } /* Flip on Hover - Desktop only */ @media (min-width: 1025px) { .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } } /* Card Face Styling */ .flip-card-front, .flip-card-back { position: absolute; background-color: transparent; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0), 0 0 20px rgba(255, 0, 0, 0); } /* Front Face */ .flip-card-front { /* background: */ background-color: transparent; } /* Back Face - Pre-rotated */ .flip-card-back { background-color: transparent; /* background: #000;*/ transform: rotateY(180deg); } /* Card Images - Full Coverage */ .card-image { width: 100%; height: 100%; object-fit:contain; display: block; background-color: transparent; } /* Optional: Add a subtle glow effect on hover - Desktop only */ @media (min-width: 1025px) { .flip-card:hover { filter: drop-shadow(0 0 30px rgba(255, 0, 0, 0.5)); } } /* Optional: Loading/Error State */ .card-image[src=""], .card-image:not([src]), .card-image[src*="undefined"] { display: none; } .flip-card-front:has(.card-image[src=""]), .flip-card-front:has(.card-image:not([src])), .flip-card-back:has(.card-image[src=""]), .flip-card-back:has(.card-image:not([src])) { background-color: transparent; /*background: linear-gradient(135deg, var(--draco-blood-red), var(--draco-dark-purple));*/ display: flex; align-items: center; justify-content: center; } .flip-card-front:has(.card-image[src=""])::after, .flip-card-front:has(.card-image:not([src]))::after { content: "CLASSIFIED"; background-color: transparent; color: white; font-family: 'Courier New', sans-serif; font-size: 2rem; text-transform: uppercase; letter-spacing: 3px; /* opacity: 0.5; */ } /* ======================================== RESPONSIVE CARD LAYOUT FIX ======================================== */ @media (max-width: 768px) { .trading-cards-container { grid-template-columns: 1fr !important; gap: 30px; padding: 0 20px; } .flip-card { max-width: 100%; width: 100%; height: auto; aspect-ratio: 1; } } /* Tablet */ @media (min-width: 769px) and (max-width: 1024px) { .trading-cards-container { grid-template-columns: repeat(2, 1fr); } } /* Desktop - 3 cards side by side */ @media (min-width: 1025px) { .trading-cards-container { grid-template-columns: repeat(3, 1fr); gap: 40px; } } /* Optional JavaScript for mobile tap-to-flip: htmlCopy */ /* Ingredients Section */ .draco-ingredients { padding: 80px 20px; background: linear-gradient(180deg, rgba(75, 0, 130, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%); position: relative; z-index: 2; } .draco-ingredients h2 { text-align: center; font-family: 'Courier New', sans-serif; font-size: clamp(2rem, 6vw, 3.5rem); color: var(--draco-fire-red); margin-bottom: 40px; text-transform: uppercase; text-shadow: 3px 3px 0 var(--draco-black); } .draco-evidence-board { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 40px; } .draco-evidence-item { background: var(--draco-text-light); padding: 20px; transform: rotate(-2deg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); position: relative; font-family: 'Courier New', monospace; color: var(--draco-black); transition: all 0.3s ease; } .draco-evidence-item:nth-child(even) { transform: rotate(2deg); } .draco-evidence-item:hover { transform: rotate(0deg) scale(1.05); box-shadow: 0 0 40px rgba(255, 0, 0, 0.5); } .draco-evidence-item::before { content: '📌'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 30px; } .evidence-label { background: var(--draco-blood-red); color: white; padding: 5px 10px; display: inline-block; margin-bottom: 10px; font-weight: bold; text-transform: uppercase; font-size: 0.8rem; } .draco-evidence-item h3 { font-family: 'Courier New', sans-serif; color: var(--draco-fire-red); margin: 10px 0; font-size: 1.2rem; text-transform: uppercase; } .evidence-description { margin: 0; line-height: 1.5; } /* Heat Warning */ .draco-heat-warning { padding: 80px 20px; background: radial-gradient(circle at center, transparent 0%, var(--draco-black) 100%), url('img/texture_BG2.png') center/cover; /*background: linear-gradient(180deg, var(--draco-blood-red) 0%, var(--draco-black) 100%);*/ text-align: center; position: relative; z-index: 2; } .draco-heat-warning h2 { font-family: 'Courier New', sans-serif; font-size: clamp(2rem, 6vw, 3.5rem); color: white; margin-bottom: 40px; text-transform: uppercase; text-shadow: 3px 3px 0 var(--draco-black); } .heat-alert { max-width: 600px; margin: 0 auto; padding: 30px; border: 3px dashed var(--draco-warning); background: rgba(0, 0, 0, 0.8); position: relative; animation: pulse-border 1s ease-in-out infinite; } @keyframes pulse-border { 0%, 100% { border-color: var(--draco-warning); } 50% { border-color: var(--draco-fire-red); } } .heat-alert::before, .heat-alert::after { content: '⚠️'; position: absolute; font-size: 40px; animation: blink 1s ease-in-out infinite; } .heat-alert::before { top: -25px; left: -25px; } .heat-alert::after { bottom: -25px; right: -25px; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .heat-meter { width: 100%; height: 40px; background: linear-gradient(90deg, #FFD700 0%, #FFA500 25%, #FF6B35 50%, #FF0000 75%, #8B0000 100%); border-radius: 20px; margin: 30px 0; position: relative; box-shadow: 0 0 30px rgba(255, 0, 0, 0.5); } .heat-indicator { position: absolute; top: -10px; left: 90%; transform: translateX(-50%); width: 60px; height: 60px; background: var(--draco-fire-red); border: 3px solid white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 0 30px rgba(255, 0, 0, 0.8); animation: fire-flicker 0.5s ease-in-out infinite; } @keyframes fire-flicker { 0%, 100% { box-shadow: 0 0 30px rgba(255, 0, 0, 0.8); } 50% { box-shadow: 0 0 40px rgba(255, 0, 0, 1); } } .heat-level-text { font-family: 'Courier New', sans-serif; font-size: 1.5rem; color: var(--draco-fire-red); text-transform: uppercase; letter-spacing: 2px; font-weight: bold; } /* CTA Section */ .draco-cta { padding: 100px 20px; /*background: linear-gradient(135deg, var(--draco-black) 0%, var(--draco-dark-purple) 100%);*/ background: radial-gradient(circle at center, transparent 0%, var(--draco-black) 100%), url('img/texture_BG2.png') center/cover; text-align: center; position: relative; padding-bottom: -10px; z-index: 2; } .draco-cta-content { position: relative; z-index: 1000; padding-bottom: -10px; } .draco-cta h2 { font-family: 'Courier New', sans-serif; font-size: clamp(2rem, 6vw, 4rem); color: var(--draco-fire-red); margin-bottom: 10px; text-transform: uppercase; text-shadow: 0 0 20px rgba(255, 0, 0, 0.8); animation: glow 2s ease-in-out infinite alternate; } .draco-cta-subtitle { font-size: clamp(1rem, 3vw, 1.5rem); color: var(--draco-text-light); margin-bottom: 30px; opacity: 0.8; } @keyframes buttonFlame { 0%, 100% { background: linear-gradient(135deg, var(--draco-fire-red) 0%, var(--draco-blood-red) 100%); } 50% { background: linear-gradient(135deg, #FF6B35 0%, var(--draco-fire-red) 100%); } } @keyframes shine { 0% { left: -50%; } 100% { left: 150%; } } /* Legal */ .draco-legal { padding: 20px; margin-bottom: 20px; /* Add bottom margin */ /*background: var(--draco-black);*/ text-align: center; font-family: "Montserrat", sans-serif !important; /*font-size: 0.75rem !important; /* Force font size */ /*color: rgba(255, 255, 255, 0.5);*/ color:white; border-top: 1px solid var(--draco-blood-red); position: relative; z-index: 20; } /* Force Montserrat font for all text in legal section */ .draco-legal p, .draco-legal * { font-family: "Montserrat", sans-serif !important; } /* Override header font inheritance for specific Draco page elements */ .draco-taco-landing .product-description, .draco-taco-landing .legend-story, .draco-taco-landing .signup-warning { font-family: 'Courier New', monospace !important; } /* Ensure legal section uses Montserrat */ .draco-taco-landing .draco-legal p, .draco-taco-landing .draco-legal * { font-family: "Montserrat", sans-serif !important; } /* Responsive Design */ @media (min-width: 768px) { .draco-dragon-logo { width: 800px; height: 800px; } /* ======================================== EVIDENCE BOARD CONNECTING LINES ======================================== */ .draco-evidence-board { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 40px; position: relative; /* Add padding to contain the lines */ padding: 20px; } /* SVG Connection Lines Container */ .evidence-connections { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* Base Evidence Line Styles */ .evidence-line { stroke-width: 1; stroke-linecap: round; opacity: 1; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawLine 2s ease-in-out forwards; } /* Staggered animation delays for dramatic effect */ .line-1 { animation-delay: 0.1s; } .line-2 { animation-delay: 0.2s; } .line-3 { animation-delay: 0.3s; } .line-4 { animation-delay: 0.4s; } .line-5 { animation-delay: 0.5s; } .line-6 { animation-delay: 0.6s; } .line-7 { animation-delay: 0.7s; } .line-8 { animation-delay: 0.8s; } .line-9 { animation-delay: 0.9s; } .line-10 { animation-delay: 1s; } /* Line Colors */ .red-line { stroke: #DC143C; filter: drop-shadow(0 0 1px #DC143C); z-index: 10; } .green-line { stroke: #00FF00; filter: drop-shadow(0 0 1px #00FF00); z-index: 10; } .yellow-line { stroke: #FFD700; filter: drop-shadow(0 0 1px #FFD700); z-index: 10; } /* Line Drawing Animation */ @keyframes drawLine { to { stroke-dashoffset: 0; } } /* Enhanced Evidence Items with Z-Index */ .draco-evidence-item { background: var(--draco-text-light); padding: 20px; transform: rotate(-2deg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(255, 0, 0, 0.1); position: relative; font-family: 'Courier New', monospace; color: var(--draco-black); transition: all 0.3s ease; /* Ensure cards appear above lines */ z-index: -1; background-clip: padding-box; } /* Enhanced Pushpin with Glow */ .draco-evidence-item::before { content: '📌'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 30px; z-index: -2; filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.5)); animation: pinPulse 3s ease-in-out infinite; } @keyframes pinPulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.1); } } /* Add subtle animation to lines on hover */ .draco-evidence-board:hover .evidence-line { animation: lineGlow 2s ease-in-out infinite; } @keyframes lineGlow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* Responsive adjustments for tablets */ @media (min-width: 768px) { .draco-evidence-board { grid-template-columns: repeat(2, 1fr); gap: 40px; } /* Adjust line positions for 2-column layout */ /* .evidence-connections { Lines will auto-adjust with viewBox } */ } /* Responsive adjustments for desktop */ @media (min-width: 1024px) { .draco-evidence-board { grid-template-columns: repeat(3, 1fr); gap: 50px; } } /* Alternative: Canvas-style connecting lines using pseudo-elements */ .draco-evidence-item[data-item="1"]::after, .draco-evidence-item[data-item="2"]::after, .draco-evidence-item[data-item="3"]::after, .draco-evidence-item[data-item="4"]::after, .draco-evidence-item[data-item="5"]::after { content: ''; position: absolute; background: linear-gradient(90deg, transparent 0%, transparent 45%, var(--draco-blood-red) 45%, var(--draco-blood-red) 55%, transparent 55%, transparent 100%); height: 5px; width: 200%; top: 50%; left: 100%; transform-origin: left center; z-index: 0; opacity: 0; animation: fadeInLine 1s ease-in-out 1.5s forwards; } @keyframes fadeInLine { to { opacity: 0.6; } } /* Add texture to evidence board background */ .draco-ingredients { padding: 80px 20px; background: linear-gradient(180deg, rgba(75, 0, 130, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%), repeating-linear-gradient( 90deg, transparent, transparent 2px, rgba(255, 0, 0, 0.03) 2px, rgba(255, 0, 0, 0.03) 4px ), /* Cork board texture */ repeating-linear-gradient( 0deg, rgba(139, 69, 19, 0.1) 0px, transparent 1px, transparent 2px, rgba(139, 69, 19, 0.1) 3px ); position: relative; z-index: 2; overflow: hidden; } /* Optional: Add animated "NEW EVIDENCE" stamp */ .draco-ingredients::after { content: 'EVIDENCE'; position: absolute; top: 20px; right: -50px; background: var(--draco-blood-red); color: white; padding: 10px 60px; transform: rotate(45deg); font-family: 'Courier New', sans-serif; font-size: 1.2rem; letter-spacing: 3px; opacity: 0.8; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); z-index: 10; } .trading-cards-container { grid-template-columns: repeat(1, 1fr); gap: 40px; } } @media (min-width: 1024px) { .draco-dragon-logo { width: 600px; height: 600px; } .draco-evidence-board { grid-template-columns: repeat(3, 1fr); gap: 50px; } .trading-cards-container { grid-template-columns: repeat(4, 1fr); gap: 30px; } .flip-card { max-width: none; } } /* ======================================== CRT TV SCANNING EFFECT OVERLAY ======================================== */ /* CRT Container Wrapper */ .crt-container { position: relative; width: 100%; min-height: 100vh; overflow: hidden; /* Create subtle screen curve effect */ animation: crtCurve 8s ease-in-out infinite alternate; } @keyframes crtCurve { 0%, 100% { transform: scale(1) perspective(1000px) rotateY(0deg); } 50% { transform: scale(1.1) perspective(1000px) rotateY(0.5deg); } } /* Main CRT Overlay Container */ .crt-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; overflow: hidden; } /* Horizontal Scanning Lines Pattern */ .crt-scanlines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 255, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px ); z-index: 2; pointer-events: none; opacity: 0.4; /*filter: blur(1px);*/ } /* Moving Scan Line */ .crt-scanline { position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient( 180deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100% ); animation: scanline 6s linear infinite; z-index: 3; pointer-events: none; } @keyframes scanline { 0% { top: -5px; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* Secondary Scan Line (offset timing) */ .crt-scanline::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient( 180deg, transparent 0%, rgba(255, 0, 0, 0.02) 50%, transparent 100% ); animation: scanline2 8s linear infinite; animation-delay: 3s; } @keyframes scanline2 { 0% { transform: translateY(-100vh); } 100% { transform: translateY(200vh); } } /* CRT Flicker Effect */ .crt-flicker { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(18, 16, 16, 0.1); opacity: 0; z-index: 1; pointer-events: none; animation: flicker 0.5s infinite; } @keyframes flicker { 0% { opacity: 0.27861; } 5% { opacity: 0.34769; } 10% { opacity: 0.23604; } 15% { opacity: 0.90626; } 20% { opacity: 0.18128; } 25% { opacity: 0.83891; } 30% { opacity: 0.65583; } 35% { opacity: 0.67807; } 40% { opacity: 0.26559; } 45% { opacity: 0.84693; } 50% { opacity: 0.96019; } 55% { opacity: 0.08594; } 60% { opacity: 0.20313; } 65% { opacity: 0.71988; } 70% { opacity: 0.53455; } 75% { opacity: 0.37288; } 80% { opacity: 0.71428; } 85% { opacity: 0.70419; } 90% { opacity: 0.7003; } 95% { opacity: 0.36108; } 100% { opacity: 0.24387; } } /* CRT Noise/Static Effect */ .crt-noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 1; z-index: 1; background: repeating-linear-gradient( transparent 0, rgba(255, 255, 255, 0.1) 1px, transparent 2px, transparent 3px ); animation: noise 0.1s steps(1) infinite; animation: glow .5s ease-in-out infinite alternate; } @keyframes noise { 0%, 100% { background-position: 0 0; } 10% { background-position: -5% -10%; } 20% { background-position: -15% 5%; } 30% { background-position: 7% -25%; } 40% { background-position: 20% 25%; } 50% { background-position: -25% 10%; } 60% { background-position: 15% 5%; } 70% { background-position: 0% 15%; } 80% { background-position: 25% 35%; } 90% { background-position: -10% 10%; } } /* RGB Chromatic Aberration Effect */ .crt-container::before, .crt-container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9998; } .crt-container::before { background: linear-gradient( 90deg, rgba(255, 0, 0, 0.01) 0%, transparent 50%, rgba(0, 0, 255, 0.01) 100% ); animation: rgbShift 1s ease-in-out infinite alternate; mix-blend-mode:color-burn; } @keyframes rgbShift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(100px); } } /* Screen Edge Vignette */ .crt-overlay::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( ellipse at center, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.1) 90%, rgba(0, 0, 0, 0.3) 100% ); pointer-events: none; z-index: 21; } /* Occasional Screen Glitch Effect */ @keyframes glitch { 0%, 100% { transform: translateX(0); opacity: 1; } 92% { transform: translateX(0); opacity: 1; } 94% { transform: translateX(-5px); opacity: 0.8; } 96% { transform: translateX(5px); opacity: 0.6; } 98% { transform: translateX(-1px); opacity: 0.8; } } /* Apply glitch to main content occasionally */ .crt-container .draco-taco-landing { animation: glitch 5s ease-in-out infinite; } /* Bad Signal Lines (horizontal interference) */ @keyframes badSignal { 0%, 90%, 100% { opacity: 0; } 91% { opacity: 0; } 92% { opacity: 1; } 93% { opacity: 1; } 94% { opacity: 0; } } .crt-overlay::after { content: ''; position: absolute; top: 20%; left: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.3); animation: badSignal 1s linear infinite; z-index: 20; } /* Mobile Optimization - Reduce effects on smaller screens */ @media (max-width: 768px) { .crt-scanlines { opacity: 0.2; } .crt-flicker { animation: none; opacity: 0; } .crt-noise { opacity: 0.01; } .crt-container .draco-taco-landing { animation: none; } } /* Performance Mode - Reduce effects for better performance */ @media (prefers-reduced-motion: reduce) { .crt-scanline, .crt-flicker, .crt-noise, .crt-container::before, .crt-container::after, .crt-container .draco-taco-landing { animation: none !important; } .crt-scanlines { opacity: 0.5; } } /* Optional: Add CRT TV power on/off effect */ @keyframes turnOn { 0% { transform: scale(1, 0.8) translateY(0); filter: brightness(300); opacity: 1; } 3% { transform: scale(1, 0.8) translateY(0); filter: brightness(300); opacity: 1; } 5% { transform: scale(1.05, 0.6) translateY(0); filter: brightness(30); opacity: 1; } 10% { transform: scale(1, 10) translateY(0); filter: brightness(1); opacity: 1; } } /* Apply turn on effect on page load */ .crt-container { animation: turnOn 1s ease-out; } /* Enhanced CRT color distortion */ .crt-container { text-shadow: 0.5px 0 0 rgba(255, 0, 0, 0.3), -0.5px 0 0 rgba(0, 255, 255, 0.3); } /* Keep all your existing CSS below this line */ /* ======================================== */ /* ======================================== DRACO REWARDS SIGNUP SECTION ======================================== */ .draco-rewards-signup { padding-top: 80px; /* background: linear-gradient(135deg, var(--draco-black) 0%, var(--draco-dark-purple) 50%, var(--draco-black) 100%);*/ background: radial-gradient(circle at center, transparent 0%, var(--draco-black) 100%), url('img/texture_BG2.png') center/cover; position: relative; z-index: 2; overflow: hidden; align-content: center; justify-content: center; } .rewards-container { max-width: 1200px; margin: 0 auto; position: relative; justify-content: center; align-content: center; } .rewards-header { text-align: center; margin-bottom: 0px; } .rewards-title { font-family: 'Courier New', sans-serif; font-size: clamp(2rem, 6vw, 4rem); color: var(--draco-fire-red); margin-bottom: 10px; margin-top: -20px; text-transform: uppercase; text-shadow: 0 0 20px rgba(255, 0, 0, 0.8); animation: glow 2s ease-in-out infinite alternate; align-content: center; } .blood-text { color: var(--draco-fire-red); text-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 40px rgba(220, 20, 60, 0.6); animation: bloodPulse 2s ease-in-out infinite; } @keyframes bloodPulse { 0%, 100% { text-shadow: 0 0 20px rgba(255, 0, 0, 0.8); } 50% { text-shadow: 0 0 40px rgba(255, 0, 0, 1); } } .rewards-subtitle { font-family: 'Courier New', monospace; font-size: 1.2rem; color: var(--draco-warning); font-style: italic; } .rewards-content { display: grid; /*grid-template-columns: 1fr 1fr; gap: 60px;*/ align-items: start; align-content:center; justify-content: center; margin-bottom: 40px; } .signup-button{ align-content:center; justify-content: center; z-index: 997; } .rewards-benefits h3, .rewards-form h3 { align-items: start; align-content: center; justify-content: center; font-family: 'Courier New', sans-serif; color: var(--draco-fire-red); font-size: 1.5rem; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; } .benefits-list { list-style: none; padding: 0; margin: 0; align-content: center; text-align: center; justify-content: center; } .benefits-list li { justify-content: center; align-content: center; text-align: center; background: rgba(0, 0, 0, 0.6); border-left: 3px solid var(--draco-blood-red); padding: 15px; margin-bottom: 15px; color: var(--draco-text-light); font-family: 'Courier New', monospace; position: relative; transition: all 0.3s ease; } .benefits-list li:hover { justify-content: center; background: rgba(220, 20, 60, 0.1); transform: translateX(10px); border-left-color: var(--draco-fire-red); } .benefit-icon { font-size: 1.2rem; margin-right: 10px; } .rewards-form { justify-content: center; /*background: rgba(0, 0, 0, 0.8);*/ padding: 30px; border: 2px solid var(--draco-blood-red); border-radius: 10px; box-shadow: 0 0 30px rgba(255, 0, 0, 0.3), inset 0 0 30px rgba(255, 0, 0, 0.1); } .signup-form { justify-content: center; display: flex; flex-direction: column; gap: 20px; } .email-input, .phone-input { padding: 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--draco-blood-red); border-radius: 5px; color: white; font-family: 'Courier New', monospace; font-size: 1rem; transition: all 0.3s ease; } .email-input::placeholder, .phone-input::placeholder { color: rgba(255, 255, 255, 0.5); } .email-input:focus, .phone-input:focus { outline: none; border-color: var(--draco-fire-red); box-shadow: 0 0 20px rgba(255, 0, 0, 0.3); background: rgba(255, 255, 255, 0.15); } .submit-btn { padding: 20px; background: linear-gradient(135deg, var(--draco-fire-red) 0%, var(--draco-blood-red) 100%); border: none; border-radius: 5px; color: white; font-family: 'Courier New', sans-serif; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; } .submit-btn:hover { transform: scale(1.05); box-shadow: 0 0 40px rgba(255, 0, 0, 0.6); } .btn-flames { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); animation: flameFlicker 0.5s ease-in-out infinite; } @keyframes flameFlicker { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.2); } } .disclaimer { text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; font-style: italic; margin-top: 15px; } .rewards-footer { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255, 0, 0, 0.3); } .warning-text { color: var(--draco-warning); font-family: 'Courier New', monospace; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; } /* Mobile Responsive */ @media (max-width: 768px) { .rewards-content { grid-template-columns: 1fr; gap: 40px; } } /* ======================================== VERTICAL SCROLL FISH INDICATOR ======================================== */ .scroll-indicator { position: fixed; right: 20px; top: 0px; width: 60px; height: 60px; z-index: 1000; pointer-events: none; transition: top 0.3s ease-out; max-height: calc(100vh - 100px); } .scroll-fish { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5)); transition: transform 0.3s ease; /* Default facing down */ transform: rotate(90deg); } /* Fish facing up when scrolling up */ .scroll-fish.scrolling-up { transform: rotate(-90deg); } /* Hide on mobile for better UX */ @media (max-width: 768px) { .scroll-indicator { display: none; } } /* ======================================== MOBILE OPTIMIZED CRT EFFECT ======================================== */ @media (max-width: 768px) { /* Disable heavy CRT effects on mobile */ .crt-overlay { display: none; } .crt-container { animation: none; } .crt-container::before, .crt-container::after { display: none; } /* Keep only subtle scanlines for atmosphere */ .crt-scanlines { opacity: 0.1; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.02) 3px, rgba(0, 0, 0, 0.02) 6px ); } /* Remove text shadow on mobile */ .crt-container { text-shadow: none; } /* Disable glitch animations */ .crt-container .draco-taco-landing { animation: none; } } /* Performance optimization for mobile */ @media (hover: none) and (pointer: coarse) { /* Touch devices */ .crt-flicker, .crt-noise, .crt-scanline { display: none; } /* Simplify fog animation */ .fog-layer { animation-duration: 30s; } /* Reduce particle animations */ .floating-element { animation: none; position: static; } } /* ======================================== CLEANUP & MOBILE OPTIMIZATIONS ======================================== */ @media (max-width: 768px) { /* Simplify hero section */ .draco-hero { min-height: 70vh; } /* Stack product showcases */ .draco-products-container { flex-direction: column; } /* Simplify evidence board */ .draco-evidence-board { grid-template-columns: 1fr; } /* Remove complex animations */ .draco-evidence-item { animation: none; transform: none; } /* Optimize fog for mobile */ .fog-container { height: 10vh; } .fog-layer { filter: blur(1px); opacity: 0.3; } } /* ======================================== TRADING CARDS - FIXED RESPONSIVE LAYOUT ======================================== */ .trading-cards-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 20px; } /* Force vertical stacking on mobile */ @media screen and (max-width: 768px) { .trading-cards-container { grid-template-columns: 1fr !important; gap: 30px !important; padding: 0 15px !important; } .flip-card { width: 100% !important; max-width: 400px !important; margin: 0 auto !important; height: 400px !important; /* Adjust based on your square cards */ } /* Ensure cards don't shrink */ .flip-card-inner { width: 100% !important; height: 100% !important; } .flip-card-front, .flip-card-back { width: 100% !important; height: 100% !important; } .card-image { width: 100% !important; height: 100% !important; object-fit: cover !important; } } /* Tablet - 2 columns */ @media screen and (min-width: 769px) and (max-width: 1024px) { .trading-cards-container { grid-template-columns: repeat(2, 1fr) !important; gap: 30px; } .flip-card { max-width: 350px; margin: 0 auto; } } /* Small mobile devices */ @media screen and (max-width: 480px) { .trading-cards-container { padding: 0 10px !important; gap: 20px !important; } .flip-card { height: 350px !important; /* Smaller height for very small screens */ } /* Adjust section padding */ .draco-cards-section { padding: 60px 10px !important; } .draco-cards-section h2 { font-size: 1.8rem !important; margin-bottom: 30px !important; } } /* Alternative approach using flexbox for better mobile control */ @media screen and (max-width: 768px) { .trading-cards-container { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 30px !important; } .flip-card { width: 90% !important; max-width: 400px !important; } } /* Touch device optimization for card flipping */ @media (hover: none) and (pointer: coarse) { /* Ensure tap to flip works */ .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); } /* Style for JavaScript-added tap indicators */ .tap-indicator { position: absolute; bottom: 10px; right: 10px; background: var(--draco-blood-red); color: white; padding: 5px 10px; font-size: 0.7rem; font-family: 'Courier New', monospace; border-radius: 3px; z-index: 10; pointer-events: none; opacity: 0.8; } } /* ======================================== UNIVERSAL CTA BUTTON STYLE - MATCHING DESIGN ======================================== */ /* Apply to all CTA buttons - only within Draco page */ .draco-taco-landing .draco-order-button, .draco-taco-landing .store-locator-button, .draco-taco-landing .signup-button, .draco-taco-landing .draco-cta-button, .draco-taco-landing a[href*="order"], .draco-taco-landing a[href*="store"], .draco-taco-landing a[href*="location"] { z-index: 1000 !important; /* Dark background */ background: linear-gradient(135deg, rgba(20, 0, 0, 0.95) 0%, rgba(40, 0, 0, 0.95) 50%, rgba(20, 0, 0, 0.95) 100%) !important; /* White text */ color: #FFFFFF !important; /* Classic serif font similar to the image */ align-content: center; font-family: "GHOULSCRIPT"; font-weight: 50; font-style: thin; text-decoration: none; font-weight: normal !important; font-size: 1.4rem !important; letter-spacing: 2px !important; /*text-transform: uppercase !important;*/ text-decoration: none !important; text-align: center !important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important; /* Button sizing */ padding: 25px 50px !important; display: inline-block !important; /* Red glowing border */ border: 2px solid #DC143C !important; border-radius: 0 !important; /* Sharp corners like the image */ /* Multiple shadow layers for the glow effect */ box-shadow: /* Inner glow */ inset 0 0 20px rgba(139, 0, 0, 0.3), inset 0 0 40px rgba(220, 20, 60, 0.1), /* Outer glow - multiple layers for intensity */ 0 0 20px rgba(220, 20, 60, 0.8), 0 0 40px rgba(220, 20, 60, 0.6), 0 0 60px rgba(220, 20, 60, 0.4), 0 0 80px rgba(220, 20, 60, 0.2), 0 0 100px rgba(139, 0, 0, 0.3) !important; /* Transition for hover states */ transition: all 0.3s ease !important; position: relative !important; overflow: visible !important; /* Subtle texture overlay */ background-image: linear-gradient(135deg, rgba(20, 0, 0, 0.95) 0%, rgba(40, 0, 0, 0.95) 50%, rgba(20, 0, 0, 0.95) 100%), repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px ) !important; } /* Enhanced glow on hover */ .draco-taco-landing .draco-order-button:hover, .draco-taco-landing .store-locator-button:hover, .draco-taco-landing .signup-button:hover, .draco-taco-landing .draco-cta-button:hover, .draco-taco-landing a[href*="order"]:hover, .draco-taco-landing a[href*="store"]:hover, .draco-taco-landing a[href*="location"]:hover { z-index: 1000 !important; /* Slightly lighter background on hover */ background: linear-gradient(135deg, rgba(40, 0, 0, 0.95) 0%, rgba(60, 0, 0, 0.95) 50%, rgba(40, 0, 0, 0.95) 100%) !important; /* Intensified glow */ box-shadow: inset 0 0 30px rgba(139, 0, 0, 0.4), inset 0 0 50px rgba(220, 20, 60, 0.2), 0 0 30px rgba(220, 20, 60, 1), 0 0 50px rgba(220, 20, 60, 0.8), 0 0 70px rgba(220, 20, 60, 0.6), 0 0 90px rgba(220, 20, 60, 0.4), 0 0 120px rgba(139, 0, 0, 0.5) !important; /* Slight scale */ transform: scale(1.02) !important; /* Brighter border */ border-color: #FF0000 !important; } /* Active/Click state */ .draco-taco-landing .draco-order-button:active, .draco-taco-landing .store-locator-button:active, .draco-taco-landing .signup-button:active, .draco-taco-landing .draco-cta-button:active, .draco-taco-landing a[href*="order"]:active, .draco-taco-landing a[href*="store"]:active, .draco-taco-landing a[href*="location"]:active { z-index: 1000 !important; transform: scale(0.98) !important; box-shadow: inset 0 0 40px rgba(139, 0, 0, 0.5), inset 0 0 60px rgba(220, 20, 60, 0.3), 0 0 15px rgba(220, 20, 60, 0.9), 0 0 30px rgba(220, 20, 60, 0.7), 0 0 45px rgba(220, 20, 60, 0.5) !important; } /* Add a subtle pulsing animation to the glow */ @keyframes glowPulse { 0%, 100% { box-shadow: inset 0 0 20px rgba(139, 0, 0, 0.3), inset 0 0 40px rgba(220, 20, 60, 0.1), 0 0 20px rgba(220, 20, 60, 0.8), 0 0 40px rgba(220, 20, 60, 0.6), 0 0 60px rgba(220, 20, 60, 0.4), 0 0 80px rgba(220, 20, 60, 0.2), 0 0 100px rgba(139, 0, 0, 0.3); } 50% { box-shadow: inset 0 0 25px rgba(139, 0, 0, 0.4), inset 0 0 45px rgba(220, 20, 60, 0.15), 0 0 25px rgba(220, 20, 60, 0.9), 0 0 45px rgba(220, 20, 60, 0.7), 0 0 65px rgba(220, 20, 60, 0.5), 0 0 85px rgba(220, 20, 60, 0.3), 0 0 110px rgba(139, 0, 0, 0.4); } } /* Apply subtle pulse animation */ .draco-order-button, .store-locator-button, .signup-button, .draco-cta-button { z-index: 1000 !important; animation: glowPulse 4s ease-in-out infinite !important; } /* Specific adjustments for smaller buttons if needed */ .small-cta-button { padding: 15px 35px !important; font-size: 1.1rem !important; } /* Mobile responsiveness for buttons */ @media screen and (max-width: 768px) { .draco-taco-landing .draco-order-button, .draco-taco-landing .store-locator-button, .draco-taco-landing .signup-button, .draco-taco-landing .draco-cta-button, .draco-taco-landing a[href*="order"], .draco-taco-landing a[href*="store"], .draco-taco-landing a[href*="location"] { padding: 20px 40px !important; font-size: 1.2rem !important; letter-spacing: 1px !important; /* Slightly reduced glow on mobile for performance */ box-shadow: inset 0 0 15px rgba(139, 0, 0, 0.3), inset 0 0 30px rgba(220, 20, 60, 0.1), 0 0 15px rgba(220, 20, 60, 0.8), 0 0 30px rgba(220, 20, 60, 0.5), 0 0 45px rgba(220, 20, 60, 0.3) !important; } } /* Extra small devices */ @media screen and (max-width: 480px) { .draco-taco-landing .draco-order-button, .draco-taco-landing .store-locator-button, .draco-taco-landing .signup-button, .draco-taco-landing .draco-cta-button, .draco-taco-landing a[href*="order"], .draco-taco-landing a[href*="store"], .draco-taco-landing a[href*="location"] { padding: 18px 30px !important; font-size: 1rem !important; width: 90% !important; max-width: 300px !important; } } /* Optional: Create a specific class for exact button matching */ .fuzzy-glow-button { /* Exact match to the image */ background: #0A0000 !important; color: #FFFFFF !important; /* font-family: 'Georgia', serif !important; */ font-weight: normal !important; font-size: 1.3rem !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; padding: 22px 45px !important; border: 2px solid rgba(220, 20, 60, 0.8) !important; box-shadow: inset 0 0 25px rgba(80, 0, 0, 0.4), 0 0 25px rgba(220, 20, 60, 0.9), 0 0 50px rgba(220, 20, 60, 0.7), 0 0 75px rgba(220, 20, 60, 0.5), 0 0 100px rgba(139, 0, 0, 0.4), 0 0 125px rgba(139, 0, 0, 0.2) !important; } /* ======================================== GLOBAL MOBILE OPTIMIZATIONS ======================================== */ @media screen and (max-width: 768px) { /* Prevent horizontal scroll */ body { overflow-x: hidden !important; } .draco-taco-landing { overflow-x: hidden !important; } /* Fix any elements that might be too wide */ * { max-width: 100vw !important; } /* Ensure sections don't overflow */ section { overflow-x: hidden !important; } /* Fix the corner stamp on mobile */ .draco-corner-stamp { position: fixed; top: 10px; right: 10px; font-size: 0.7rem; padding: 8px 12px; transform: rotate(8deg); z-index: 999; } } /* Landscape mobile */ @media screen and (max-width: 768px) and (orientation: landscape) { .trading-cards-container { grid-template-columns: repeat(2, 1fr) !important; } .flip-card { height: 300px !important; } } /* ======================================== BUTTON Z-INDEX AND CENTERING FIXES ======================================== */ /* Ensure all buttons are on top layer */ .draco-taco-landing .draco-order-button, .draco-taco-landing .store-locator-button, .draco-taco-landing .signup-button, .draco-taco-landing .draco-cta-button, .draco-taco-landing .fuzzy-glow-button, .draco-taco-landing a[href*="order"], .draco-taco-landing a[href*="store"], .draco-taco-landing a[href*="location"], .draco-taco-landing a[href*="rewards"] { position: relative !important; z-index: 100 !important; /* High z-index to stay above other elements */ overflow: visible !important; } /* Fix button containers to not clip */ .draco-cta, .draco-cta-content, .signup-cta, .store-locator-cta, section { overflow: visible !important; /* Prevent clipping */ position: relative; z-index: 10; } /* Center the Rewards/Signup button */ .signup-cta { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 40px auto !important; position: relative !important; z-index: 20 !important; } .signup-button { margin: 0 auto !important; display: inline-block !important; } /* Ensure sections don't overlap buttons */ section { position: relative; overflow: visible !important; } /* Fix any section that might be overlapping */ .draco-cards-section, .draco-ingredients, .draco-heat-warning, .draco-signup { overflow: visible !important; position: relative; z-index: 5; } /* Make sure fog doesn't cover buttons */ .fog-container { z-index: 1 !important; /* Keep fog behind everything */ pointer-events: none !important; } /* CRT overlay should not affect buttons */ .crt-overlay { pointer-events: none !important; z-index: 9999 !important; } .crt-container { z-index: 1 !important; } /* ======================================== CLEAN UP DEPRECATED STYLES ======================================== */ /* Update hero section - remove old references */ .draco-hero-content { position: relative; z-index: 3; max-width: 800px; /* Remove references to non-existent elements */ } /* Clean product showcase */ .draco-product-showcase { padding: 80px 20px; background: radial-gradient(circle at center, transparent 0%, var(--draco-black) 100%), url('img/texture_BG2.png') center/cover; position: relative; z-index: 2; overflow: visible !important; /* Don't clip buttons */ } /* ======================================== SPECIFIC BUTTON CENTERING ======================================== */ /* Center Join Rewards button specifically */ .draco-signup .signup-cta { width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 40px; padding: 20px 0; } .draco-signup .signup-button { margin: 0 auto !important; display: block !important; width: fit-content !important; } /* Center Store Locator button */ .store-locator-cta { text-align: center !important; padding: 40px 20px !important; position: relative !important; z-index: 20 !important; } .store-locator-cta .store-locator-button { margin: 0 auto !important; display: inline-block !important; } /* ======================================== MOBILE BUTTON FIXES ======================================== */ @media screen and (max-width: 768px) { /* Ensure buttons stay centered on mobile */ .signup-cta, .store-locator-cta, .draco-cta-content { width: 100% !important; text-align: center !important; padding: 20px !important; } .signup-button, .store-locator-button, .draco-order-button { width: 90% !important; max-width: 350px !important; margin: 10px auto !important; display: block !important; } } /* ======================================== REMOVE OLD ANIMATIONS (not used) ======================================== */ /* Delete these if they're not being used: - mistFlow - mistFloat - cardHang (if evidence cards don't use it) - threadSway (if evidence lines removed) */ /* ======================================== FINAL Z-INDEX HIERARCHY ======================================== */ /* CRT Overlay: 9999 (pointer-events: none) Scroll Indicator: 1000 Corner Stamp: 999 Buttons: 100 Section Content: 10-20 Cards: 5 Background/Fog: 1-2 */ /* Ensure proper stacking order */ .draco-corner-stamp { z-index: 999 !important; } .scroll-indicator { z-index: 1000 !important; } /* All interactive elements should be accessible */ a, button, .flip-card { position: relative; z-index: 50; } /* Ensure buttons are never cut off */ .draco-order-button, .store-locator-button, .signup-button { position: relative !important; z-index: 100 !important; margin-bottom: 20px !important; /* Add space below buttons */ } /* Fix any container that might clip buttons */ div:has(> .draco-order-button), div:has(> .store-locator-button), div:has(> .signup-button) { overflow: visible !important; position: relative; z-index: 90; padding-bottom: 20px; /* Extra padding to prevent clipping */ } /* ===== Overrides for Android/LambdaTest pointer-events flip behavior ===== */ /* Disable hover flip on mobile/tablet devices */ @media (max-width: 1024px) { .flip-card:hover .flip-card-inner { transform: none !important; } } .flip-card.flipped .flip-card-inner { transform: rotateY(180deg) !important; } .flip-card { touch-action: manipulation; position: relative; } /* Ensure consistent 3D behavior */ .flip-card { perspective: 1000px; } .flip-card-inner { transform-style: preserve-3d; transition: transform 0.8s; } .flip-card-front, .flip-card-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-card-back { transform: rotateY(180deg); } /* Prefer Grid layout for the cards container across breakpoints */ .trading-cards-container { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 40px !important; } @media (max-width: 1024px) { .trading-cards-container { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { .trading-cards-container { grid-template-columns: 1fr !important; gap: 30px !important; padding: 0 15px !important; } } /* Visual style for TAP TO FLIP badge */ .tap-indicator { position: absolute; right: 10px; bottom: 10px; z-index: 1000; background-color: rgba(220, 20, 60, 0.7); color: #fff; padding: 10px; border-radius: 3px; font-size: 0.7rem; font-family: "Courier New", monospace; opacity: 0.8; pointer-events: none; user-select: none; }