Q C O R G I

@font-face { font-family: 'Corgi'; src: url('components/corgi.ttf') format('truetype'); font-weight: normal; font-style: normal; } body, html { margin: 0; padding: 0; height: 100%; } body::-webkit-scrollbar { display: none; } body { -ms-overflow-style: none; scrollbar-width: none; } svg { display: block; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; } .scrollElement { position: absolute; height: 6000px; width: 100px; top: 0; z-index: 0; } .whitepaper-btn { position: fixed; bottom: 10%; left: 50%; transform: translateX(-50%); border: 1px solid #fff; border-radius: 5px; font-size: 0.9rem; padding: 0.5rem 0.7em; background-color: transparent; color: #ffffff; font-family: Verdana, Geneva, Tahoma, sans-serif; -webkit-font-smoothing: antialiased; cursor: pointer; transition: all 0.3s; z-index: 11; text-decoration: none; display: none; /* Hidden by default */ } .whitepaper-btn:hover { background: #ffffff; color: #1b1734; } .btn:hover { background: #ffffff; color: #1b1734; } .wallet-status { position: fixed; top: 20px; right: 20px; z-index: 1000; background: rgba(0, 0, 0, 0.8); color: white; padding: 10px 20px; border-radius: 8px; font-family: Arial, sans-serif; } .install-phantom { position: fixed; top: 20px; right: 20px; z-index: 1000; background: #9945ff; color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-family: Arial, sans-serif; } .install-phantom:hover { background: #7d3acd; } .hill-image { position: fixed; width: 100%; height: auto; bottom: 0; left: 0; pointer-events: none; opacity: 0; } #hills1 img, #hills2 img, #hills3 img { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; } .hill { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; opacity: 0; } #h1-9 { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 999; } #h1-1, #h1-2, #h1-3, #h1-4, #h1-5, #h1-6, #h1-7, #h1-8, #h2-1, #h2-2, #h2-3, #h2-4, #h2-5, #h2-6, #h3-1, #h3-2, #h3-3, #h3-4, #h3-5 { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 0; } .top-nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; background: rgba(0, 0, 0, 0.5); padding: 8px 15px; /* ลดขนาด padding */ border-radius: 30px; backdrop-filter: blur(5px); text-align: center; min-width: auto; /* แก้จาก 300px เป็น auto */ } .top-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 20px; justify-content: center; align-items: center; } .top-nav li:not(:last-child)::after { content: "|"; color: white; margin-left: 20px; opacity: 0.7; } .top-nav li:before { content: "•"; color: #ffd700; margin-right: 8px; font-size: 1.2em; } .top-nav ul { list-style: none; } .top-nav a { color: white; text-decoration: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 0.9rem; opacity: 0.7; transition: opacity 0.3s; display: inline-block; } .top-nav a:hover { opacity: 1; } .top-nav a.active { opacity: 1; position: relative; } .top-nav a.active::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: white; } #imageContainer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; } .scrollElement { position: absolute; height: 6000px; width: 100px; top: 0; z-index: 0; } .social-fixed { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 15px; } .social-item { display: flex; flex-direction: column; align-items: center; color: white; text-decoration: none; transition: transform 0.3s; } .social-item:hover { transform: scale(1.1); } .social-item img { width: 30px; height: 30px; margin-bottom: 5px; } #scene1-text, #scene2-story, #scene3-text { position: fixed; left: 50%; transform: translateX(-50%); text-align: center; color: red; z-index: 100; } #scene1-text { top: 50%; transform: translate(-50%, -50%); font-family: 'Corgi', Verdana, Geneva, Tahoma, sans-serif; } #scene3-text { bottom: 50%; /* แก้จาก 40% เป็น 50% */ transform: translate(-50%, 50%); /* ให้อยู่ตรงกลางแนวตั้ง */ } #scene1-text h2 { font-size: 3.5rem; margin-bottom: 1rem; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); letter-spacing: 1px; /* เพิ่มระยะห่างตัวอักษรเล็กน้อยเพื่อความชัดเจน */ } #scene1-text p { font-size: 2.2rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); } #scene3-text h3 { font-size: 2rem; margin-bottom: 1rem; } #scene3-text p { font-size: 1.1rem; margin: 0.5rem 0; } .story-container { position: fixed; bottom: 20%; /* ปรับตำแหน่งให้อยู่สูงขึ้น */ left: 50%; transform: translateX(-50%); z-index: 100; background: rgba(0, 0, 0, 0.7); padding: 15px; border-radius: 10px; max-width: 80%; width: 100%; /* กำหนดให้ใช้ความกว้างเต็มที่ตามที่ max-width กำหนด */ height: auto; display: none; max-height: 50vh; /* กำหนดความสูงสูงสุด 50% ของความสูงหน้าจอ */ overflow-y: auto; /* เพิ่ม scroll เมื่อเนื้อหาเกิน */ filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.3)) drop-shadow(0 0 40px rgba(255, 165, 0, 0.2)) drop-shadow(0 0 60px rgba(255, 215, 0, 0.1)); } .story-content { width: 100%; } .story-text { width: 100%; word-break: normal; word-wrap: break-word; white-space: normal; display: block; /* ทำให้ text block แสดงผลเต็มความกว้าง */ text-align: center; } .story-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 15px 0; } .story-prev, .story-next { background: transparent; border: none; color: rgba(255, 255, 255, 0.7); font-size: 24px; padding: 8px 16px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; } .story-prev:hover, .story-next:hover { color: white; transform: scale(1.1); } .story-prev:before { content: "Previous"; font-size: 14px; opacity: 0; transition: opacity 0.3s ease; } .story-next:after { content: "Next"; font-size: 14px; opacity: 0; transition: opacity 0.3s ease; } .story-prev:hover:before, .story-next:hover:after { opacity: 1; } .story-dots { display: flex; justify-content: center; gap: 10px; margin-top: 15px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; } .dot.active { background: white; } .get-token { background: rgba(0, 0, 0, 0.7); padding: 20px; border-radius: 10px; filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.3)) drop-shadow(0 0 40px rgba(255, 165, 0, 0.2)) drop-shadow(0 0 60px rgba(255, 215, 0, 0.1)); } .contract-address { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 10px 0; } .contract-address code { text-decoration: underline; padding: 5px 0; } .copy-btn { padding: 5px 10px; border-radius: 5px; background: #4caf50; color: white; border: none; cursor: pointer; } .orientation-lock { /* เก็บ properties เดิมทั้งหมด */ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; justify-content: center; align-items: center; flex-direction: column; text-align: center; color: white; font-family: Verdana, Geneva, Tahoma, sans-serif; /* เพิ่ม background properties / background-image: url('components/BG_END.PNG'); background-size: cover; / ปรับขนาดภาพให้เต็มพื้นที่ / background-position: center; / จัดตำแหน่งภาพให้อยู่ตรงกลาง / background-repeat: no-repeat; / ไม่ต้องการให้ภาพซ้ำ */ } .orientation-lock::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* สีดำโปร่งใส 50% */ z-index: -1; } .orientation-lock img { width: 150px; height: 150px; margin-bottom: 20px; animation: rotate 2s infinite; } .orientation-lock { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; justify-content: center; align-items: center; flex-direction: column; text-align: center; color: white; font-family: Verdana, Geneva, Tahoma, sans-serif; position: relative; background-image: url('components/BG.PNG'); background-size: cover; background-position: center; background-repeat: no-repeat; } .orientation-lock::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 0; /* แก้จาก -1 เป็น 0 */ } /* เพิ่ม z-index ให้กับเนื้อหาที่อยู่ด้านใน */ .orientation-lock img, .orientation-lock h2, .orientation-lock p { position: relative; z-index: 1; } .orientation-lock img { width: 150px; height: 150px; margin-bottom: 20px; animation: rotate 2s infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(90deg); } 75% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } @media (orientation: portrait) { .orientation-lock { display: flex; } #imageContainer, .scrollElement, .top-nav, .social-fixed, .scene-text, .btn { display: none !important; } } @media screen and (min-width: 1200px) { #scene1-text h2 { font-size: 3rem; } #scene1-text p { font-size: 1.5rem; } } /* Medium screens (768px to 1199px) */ @media screen and (max-width: 1199px) { #scene1-text h2 { font-size: 2.2rem; } #scene1-text p { font-size: 1.1rem; } #scene3-text h3 { font-size: 1.8rem; } #scene3-text p { font-size: 1rem; } } /* Small screens (480px to 767px) */ @media screen and (max-width: 767px) { #scene1-text h2 { font-size: 1.8rem; } #scene1-text p { font-size: 1rem; } #scene3-text h3 { font-size: 1.5rem; } #scene3-text p { font-size: 0.9rem; } .story-container { max-width: 75%; /* เพิ่มความกว้างเกือบเต็มจอ */ padding: 5px; } .story-nav { width: 100%; } .story-text { min-width: 200px; /* กำหนดความกว้างขั้นต่ำ */ hyphens: auto; /* ช่วยตัดคำอัตโนมัติ */ } .top-nav { padding: 5px 10px; /* ลดขนาดลงอีกสำหรับหน้าจอเล็ก */ } .top-nav a { font-size: 0.8rem; /* ลดขนาด font */ } .top-nav li:not(:last-child)::after { display: none; /* ซ่อน | บนหน้าจอขนาดเล็ก */ } .top-nav ul { gap: 10px; /* ลดระยะห่างระหว่างเมนู */ } } /* Extra small screens (under 480px) */ @media screen and (max-width: 479px) { #scene1-text h2 { font-size: 1.5rem; } #scene1-text p { font-size: 0.9rem; } #scene3-text h3 { font-size: 1.3rem; } #scene3-text p { font-size: 0.85rem; } .get-token { padding: 15px; } } /* Landscape orientation adjustments */ @media screen and (max-height: 600px) and (orientation: landscape) { #scene1-text h2 { font-size: 1.8rem; margin-bottom: 0.5rem; } #scene1-text p { font-size: 1rem; } #scene3-text { bottom: 30%; } #scene3-text h3 { font-size: 1.5rem; margin-bottom: 0.5rem; } #scene3-text p { font-size: 0.9rem; margin: 0.3rem 0; } } @media screen and (max-height: 600px) { #scene3-text { bottom: 50%; transform: translate(-50%, 50%) scale(0.9); } } @keyframes containerGlow { 0%, 100% { filter: drop-shadow(0 0 20px rgba(255, 140, 0, 1.3)) drop-shadow(0 0 40px rgba(255, 165, 0, 0.2)) drop-shadow(0 0 60px rgba(255, 215, 0, 0.1)); } 50% { filter: drop-shadow(0 0 30px rgba(255, 140, 0, 0.4)) drop-shadow(0 0 50px rgba(255, 165, 0, 0.3)) drop-shadow(0 0 70px rgba(255, 215, 0, 0.2)); } } .story-container, .get-token { animation: containerGlow 3s ease-in-out infinite; } .left-images { position: fixed; left: 20px; top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 15px; } .image-container { width: 60px; height: 60px; cursor: pointer; position: relative; animation: containerGlow 3s ease-in-out infinite; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; } .image-container:hover { transform: scale(1.1); filter: drop-shadow(0 0 25px rgba(255, 140, 0, 0.5)) drop-shadow(0 0 45px rgba(255, 165, 0, 0.4)) drop-shadow(0 0 65px rgba(255, 215, 0, 0.3)); } .left-feature-img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; transition: transform 0.3s ease-in-out; } /* Apply glow effect to social links */ .social-fixed .social-item { animation: containerGlow 3s ease-in-out infinite; padding: 10px; border-radius: 10px; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; } .social-fixed .social-item:hover { transform: scale(1.1); filter: drop-shadow(0 0 25px rgba(255, 140, 0, 0.5)) drop-shadow(0 0 45px rgba(255, 165, 0, 0.4)) drop-shadow(0 0 65px rgba(255, 215, 0, 0.3)); } /* Popup styles */ .popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); padding: 20px 40px; border-radius: 10px; z-index: 1001; color: white; text-align: center; font-family: Verdana, Geneva, Tahoma, sans-serif; animation: fadeIn 0.3s ease-in-out; filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.3)) drop-shadow(0 0 40px rgba(255, 165, 0, 0.2)) drop-shadow(0 0 60px rgba(255, 215, 0, 0.1)); } .popup h3 { font-size: 1.5rem; margin-bottom: 10px; } .popup p { margin-bottom: 20px; } .popup-close { position: absolute; top: 10px; right: 10px; background: none; border: none; color: white; font-size: 20px; cursor: pointer; padding: 5px; transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; } .popup-close:hover { transform: scale(1.2) rotate(90deg); color: #FFA500; } .popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Media Queries */ @media screen and (max-width: 768px) { .left-images { left: 10px; } .image-container { width: 50px; height: 50px; } .popup { width: 80%; padding: 15px 30px; } } @media (orientation: portrait) { .left-images { display: none !important; } }

Please Rotate Your Device

This experience is best viewed in landscape mode

ERROR : 404

QCORGI NOT FOUND!!

WHITEPAPER