/* css/styles.css — CLEANED VERSION
- Removed old gray footer
- Kept new blue footer only
- Fixed syntax errors
- Organized properly
*/
/* =========================
Global variables & toggles
========================= */
:root{
--accent: #ff9900;
--overlay: transparent;
--bg: #1d1a1a;
--muted: #f5f5f5;
--panel: rgba(29,31,33,0.85);
--glow-color: rgba(255,153,0,0.28);
--nav-link-color: #ffffff;
--nav-link-weight: 700;
--logo-size: 60px;
--brand-font-size: 40px;
--brand-font-weight: 800;
--hero-size: 6rem;
--navbar-bg: rgba(29,31,33,0.90);
--navbar-border: rgba(255,255,255,0.04);
--button-radius: 8px;
/* Presale card tuning */
--presale-card-width: 2500px;
--presale-glow-blue: #ff9900;
--presale-progress-blue-start: #dd9608;
--presale-progress-blue-end: #ae9509;
--presale-progress-transition: 900ms;
--presale-count-color: #0561b3;
--presale-progress: 3. 6;
/* Header/ticker heights */
--ticker-height: 40px;
--header-height: 68px;
/* Hero breathe controls - FIXED: removed duplicate */
--hero-breathe-duration: 4s; /* ✅ Animation duration set */
--hero-breathe-scale: 1.8; /* ✅ Zoom amount set */
--hero-breathe-translate: -18px; /* ✅ Movement set */
--hero-min-height: 120vh;
--hero-bg-fit: cover;
--hero-bg-position: center;
--hero-subtitle-gap: 100px;
--header-padding-left: 30px;
--header-padding-right: 30px;
--presale-card-lift: -20px;
--presale-card-vertical-pad: 12px;
}
/* Base reset */
*{ box-sizing: border-box; }
html, body { height: auto; min-height: 100%; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--muted);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.45;
font-size: 14px;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
.section-inner, .footer-inner { max-width: 1200px; margin: 0 auto; padding: 18px; }
.header-inner { max-width: 1600px; margin: 0 auto; padding: 0 24px; }
/* =================
Info Ticker (fixed)
================= */
.site-ticker {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--ticker-height);
line-height: var(--ticker-height);
background: var(--accent);
z-index: 1100;
display: flex;
align-items: center;
}
.ticker-track {
display: flex;
gap: 20px;
white-space: nowrap;
padding: 0 18px;
animation: ticker 60s linear infinite;
animation-fill-mode: both;
transform: translateX(100%);
color: #000;
font-weight: 500;
}
.ticker-track span, .ticker-track strong { color: #000; }
@keyframes ticker {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
/* =================
Header / Navbar
================= */
.site-header{
position: fixed;
top: var(--ticker-height);
left: 0;
right: 0;
height: var(--header-height);
z-index: 2200;
background: rgba(29,31,33,0.92);
}
main {
padding-top: calc(var(--ticker-height) + var(--header-height));
}
.header-inner{
height: 100%;
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
box-sizing: border-box;
}
.brand{
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #fff;
flex: 0 0 auto;
}
/* Brand */
.brand {
display: flex;
gap: 12px;
align-items: center;
text-decoration: none;
color: var(--muted);
}
.brand-logo {
width: var(--logo-size);
height: var(--logo-size);
object-fit: contain;
display: block;
}
.brand-text {
font-size: var(--brand-font-size);
font-weight: var(--brand-font-weight);
line-height: 1;
margin-left: 8px;
color: var(--accent);
display: inline-block;
vertical-align: middle;
}
/* Nav */
.nav-right {
display: flex;
align-items: center;
gap: 16px;
margin-left: 40px;
}
.nav-links {
display: flex;
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
color: var(--nav-link-color);
font-weight: var(--nav-link-weight);
text-decoration: none;
padding: 6px 4px;
}
.nav-links a:hover,
.nav-links a:focus {
color: var(--accent);
text-decoration: underline;
}
/* Hamburger */
.menu-toggle {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 44px;
height: 38px;
background: transparent;
border: 1px solid rgba(255,255,255,0.06);
padding: 6px;
border-radius: 8px;
cursor: pointer;
transition: box-shadow 0.2s, border-color 0.2s;
}
.menu-toggle .burger-line {
width: 22px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
.menu-toggle:hover {
border-color: rgba(255,153,0,0.14);
box-shadow: 0 10px 30px rgba(255,153,0,0.06);
}
/* Buttons */
.btn {
display: inline-block;
padding: 8px 14px;
border-radius: var(--button-radius);
text-decoration: none;
color: var(--muted);
background: transparent;
border: 1px solid rgba(255,255,255,0.06);
font-weight: 800;
}
.btn-primary {
background: var(--accent);
color: #000;
border: none;
}
.btn-cta {
background: var(--accent);
color: #000;
padding: 12px 18px;
font-weight: 700;
}
.btn-ghost {
background: transparent;
color: var(--muted);
border: none;
}
.header-ctas .btn-primary {
background: var(--accent);
color: #000;
}
/* =================
Menu panel
================= */
.site-menu {
position: fixed;
inset: 0;
display: flex;
align-items: flex-start;
justify-content: flex-end;
background: rgba(0,0,0,0.55);
z-index: 1200;
padding: 24px;
}
.site-menu[hidden] { display: none; }
.site-menu-inner {
width: 320px;
background: var(--panel);
border-radius: 12px;
padding: 18px;
color: var(--muted);
}
.site-menu-close {
background: transparent;
border: 0;
font-size: 22px;
color: var(--muted);
float: right;
cursor: pointer;
}
.menu-list {
list-style: none;
padding: 10px 0 0 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.menu-list a {
color: var(--nav-link-color);
text-decoration: none;
font-weight: var(--nav-link-weight);
display: block;
padding: 8px 6px;
}
.mobile-ctas {
margin-top: 14px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* =================
Sections
================= */
.section {
position: relative;
min-height: 120vh;
display: flex;
align-items: center;
}
.section-inner {
position: relative;
z-index: 2;
padding: 64px 18px;
}
.section-overlay {
position: absolute;
inset: 0;
background: var(--overlay);
z-index: 1;
}
.site-separator,
.section-separator {
height: 6px;
margin: 20px 0;
width: 100%;
background: linear-gradient(90deg, rgba(255,153,0,0.95), rgba(107,62,0,0.95));
border-radius: 4px;
box-shadow: 0 6px 18px rgba(255,153,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.02);
opacity: 1;
}
.hero-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
z-index: 3;
color: var(--muted);
}
.hero-title {
font-size: var(--hero-size);
line-height: 1.05;
margin: 0 0 18px;
text-align: center;
}
.hero-line-white {
display: block;
color: #ffffff;
}
.hero-line-yellow {
display: block;
color: var(--accent); /* #ff9900 */
}
.hero-subtitle {
color: rgba(255,255,255,0.95);
margin-bottom: var(--hero-subtitle-gap);
font-size: 1.125rem;
font-weight: 600;
letter-spacing: 0.2px;
max-width: 860px;
margin-left: auto;
margin-right: auto;
}
.hero-ctas {
margin-top: 22px;
display: flex;
gap: 14px;
justify-content: center;
align-items: center;
}
@keyframes hero-breathe {
0% { transform: translateY(0) scale(1); }
50% { transform: translateY(var(--hero-breathe-translate)) scale(var(--hero-breathe-scale)); }
100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.section-hero.hero-bg-hero::before {
animation: none !important;
transition: none !important;
}
}
/* =================
Presale Countdown - FIXED: Orange background with black text
================= */
.presale-block {
margin-top: 1px; padding-top: 58px;
}
.presale-countdown {
display: flex;
gap: 14px;
justify-content: center;
align-items: center;
margin-top: 10px;
flex-wrap: nowrap;
}
.presale-box {
width: 90px;
height: 90px;
min-width: 90px;
min-height: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #ff9900;
box-shadow:
0 10px 40px #ff9900,
inset 0 2px 6px #ff9900;
border: 1px solid #ff9900;
color: #fff;
font-weight: 900;
text-align: center;
}
.presale-box .presale-num {
font-size: 1.6rem;
line-height: 1;
margin-bottom: 4px;
color: #ff9900;
font-weight: 900;
}
.presale-box .presale-lbl {
font-size: 0.72rem;
font-weight: 700;
color: #ff9900;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.presale-early-message {
color: #ffffff;
font-size: 1.0rem;
font-weight: 300;
text-align: center;
margin: 18px auto 24px;
max-width: 600px;
letter-spacing: 0.3px;
line-height: 1.5;
}
.presale-actions {
display: flex;
gap: 14px;
justify-content: center;
align-items: center;
margin-top: 14px;
flex-wrap: wrap;
}
.vision-link {
color: #ffffff;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: color 0.3s ease;
cursor: pointer;
}
.vision-link:hover {
color: var(--accent);
text-decoration: underline;
}
.btn-hero-bg {
background: rgba(29, 31, 33, 0.85);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 12px 20px;
font-weight: 700;
transition: all 0.3s ease;
}
.btn-hero-bg:hover {
background: var(--accent);
color: #000;
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(255, 153, 0, 0.2);
}
.glow-box {
box-shadow: 0 8px 24px var(--glow-color);
border-radius: 12px;
background: rgba(255,255,255,0.04);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.glow-box:hover {
transform: translateY(-4px);
}
/* =================
PRESALE PROGRESS - Modern Blue Design
================= */
.section-presale-modern {
background: linear-gradient(180deg, #2d3e50 0%, #1a2530 100%);
padding: 32px 0;
margin: 0;
}
.section-separator {
height: 6px;
margin: 20px 0;
width: 100%;
background: linear-gradient(90deg, rgba(255,153,0,0.95), rgba(107,62,0,0.95));
border-radius: 4px;
box-shadow: 0 6px 18px rgba(255,153,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.02);
opacity: 1;
}
.presale-container {
max-width: 1400px;
margin: 0 auto;
padding: 28px 40px;
background: linear-gradient(180deg, rgba(45, 62, 80, 0.95), rgba(35, 50, 65, 0.9));
border-radius: 16px;
box-shadow:
0 0 80px rgba(0, 200, 255, 0.15),
0 20px 60px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border: 1px solid rgba(0, 200, 255, 0.2);
}
.presale-title {
text-align: center;
font-size: 2.5rem;
font-weight: 900;
color: #f4e5c2;
text-shadow: 0 4px 20px rgba(244, 229, 194, 0.4);
margin: 0 0 24px 0;
letter-spacing: 1px;
}
.presale-bar-container {
max-width: 1200px;
margin: 0 auto 16px;
position: relative;
}
.presale-bar-track-modern {
width: 100%;
height: 28px;
background: rgba(20, 30, 40, 0.6);
border-radius: 50px;
position: relative;
overflow: visible;
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.presale-bar-fill-modern {
height: 100%;
background: linear-gradient(90deg, #00d9ff 0%, #00a8cc 100%);
border-radius: 50px;
box-shadow:
0 0 30px rgba(0, 217, 255, 0.6),
inset 0 2px 8px rgba(255, 255, 255, 0.3);
transition: width 1.2s cubic-bezier(0.2, 0. 0.9, 0.2, 1);
}
.presale-tokens-sold {
text-align: center;
font-size: 1.2rem;
font-weight: 700;
color: #f4e5c2;
text-shadow: 0 2px 12px rgba(244, 229, 194, 0.3);
margin: 16px 0 28px 0;
}
.presale-info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 24px;
}
.presale-info-item {
text-align: center;
}
.info-label {
font-size: 0.95rem;
font-weight: 600;
color: #f4e5c2;
margin-bottom: 8px;
text-shadow: 0 2px 8px rgba(244, 229, 194, 0.2);
}
.info-value {
font-size: 1.4rem;
font-weight: 900;
color: #f4e5c2;
text-shadow: 0 4px 16px rgba(244, 229, 194, 0.4);
}
.presale-footer-info {
background: rgba(20, 30, 40, 0.4);
border-radius: 12px;
padding: 16px 20px;
border: 1px solid rgba(0, 200, 255, 0.15);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.contract-info {
font-size: 0.95rem;
color: #f4e5c2;
font-weight: 600;
}
.contract-info strong {
color: #f4e5c2;
margin-right: 8px;
}
.minimum-buy {
font-size: 1rem;
color: #f4e5c2;
font-weight: 700;
}
.early-curve-cta-block {
margin: 34px auto 0 auto;
max-width: 580px;
text-align: center;
}
.early-curve-title {
color: #ff9900;
font-size: 2.1rem;
font-weight: 900;
margin-bottom: 16px;
letter-spacing: -0.01em;
}
.early-curve-subtitle {
color: #fff;
font-size: 1.19rem;
line-height: 1.4;
margin-bottom: 28px;
}
.btn-curve-buy {
display: inline-block;
background: #ff9900;
color: #222;
font-weight: bold;
border: none;
border-radius: 7px;
padding: 13px 32px;
font-size: 1.06rem;
margin-bottom: 22px;
margin-top: 6px;
text-decoration: none;
box-shadow: 0 4px 14px rgba(255,153,0,0.07);
transition: background .19s, color .19s;
cursor: pointer;
}
.btn-curve-buy:hover,
.btn-curve-buy:focus {
background: #ffaa2b;
color: #222;
outline: none;
}
.presale-info-announcement {
color: #ff9900;
font-size: 1.05rem;
margin-top: 18px;
font-weight: 600;
}
@media (max-width: 700px) {
.early-curve-title { font-size: 1.13rem; }
.early-curve-subtitle { font-size: 0.97rem; }
.btn-curve-buy { font-size: 0.98rem; padding: 11px 18px;}
.presale-info-announcement { font-size: 0.96rem; }
}
/* =================
FOOTER - Blue Gradient Design
================= */
.site-footer-blue {
background: linear-gradient(180deg, #032442 0%, #0d2847 100%);
color: #ffffff;
font-family: inherit;
padding: 0;
margin: 0;
}
/* Back to Top */
.footer-back-to-top {
background: linear-gradient(80deg, #1a4d7a 0%, #2d5a8f 50%, #1a4d7a 100%);
padding: 12px 16px;
text-align: center;
border-bottom: 1px solid rgba(138, 43, 226, 0.4);
}
.back-to-top-link {
display: inline-block;
font-size: 1.0rem;
font-weight: 700;
text-decoration: none;
text-transform: lowercase;
letter-spacing: 2px;
background: linear-gradient(90deg, #a78bfa 0%, #c084fc 50%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.6))
drop-shadow(0 0 40px rgba(167, 139, 250, 0.3));
transition: all 0.3s ease;
padding: 4px 0;
}
.back-to-top-link:hover {
filter: drop-shadow(0 0 30px #ff9900)
drop-shadow(0 0 60px rgba(167, 139, 250, 0.5));
transform: translateY(-2px);
letter-spacing: 3px;
}
/* Banner */
.footer-banner {
background: linear-gradient(90deg, #2563a8 0%, #1a4d7a 100%);
padding: 24px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-banner-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.banner-tagline {
flex: 1 1 600px;
font-size: 0.95rem;
line-height: 1.6;
color: #ffffff;
}
.banner-emphasis {
color: #ff9900;
font-weight: 900;
margin-right: 8px;
}
.btn-explore-vision {
background: #ff9900;
color: #000;
padding: 12px 24px;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(255, 153, 0, 0.3);
}
.btn-explore-vision:hover {
background: #ffaa00;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 153, 0, 0.4);
}
/* Main Footer */
.footer-main {
max-width: 1200px;
margin: 0 auto;
padding: 48px 20px 24px;
}
.footer-columns {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 32px;
margin-bottom: 40px;
}
.footer-col h3 {
font-size: 0.85rem;
font-weight: 700;
color: #ff9900;
margin-bottom: 12px;
letter-spacing: 0.5px;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-col ul li {
margin: 8px 0;
}
.footer-col a {
color: #ffffff;
text-decoration: none;
font-weight: 400;
font-size: 0.95rem;
transition: color 0.2s ease;
}
.footer-col a:hover {
color: #ff9900;
}
/* Brand Column with Logo */
.footer-brand-col {
max-width: 320px;
}
.footer-brand-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.footer-logo-img {
width: 42px;
height: 42px;
object-fit: contain;
}
.footer-brand-name {
font-size: 1.5rem;
font-weight: 900;
color: #ff9900;
}
.footer-brand-tagline {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
.footer-brand-tagline em {
font-style: italic;
}
.footer-socials-blue {
display: flex;
justify-content: center;
gap: 16px;
margin: 60px 0 82px 0;
flex-wrap: wrap;
}
.footer-netdag-highlight {
color: #ff9900;
font-weight: 700;
}
.social-icon-blue {
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.social-icon-blue:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.social-x-blue { background: #1DA1F2; }
.social-tg-blue { background: #2AABEE; }
.social-ds-blue { background: #5865F2; }
.social-yt-blue { background: #FF0000; }
.social-fb-blue { background: #1877F2; }
.social-gh-blue { background: #24292e; }
.social-ig-blue { background: #E1306C; }
/* =================
MOBILE RESPONSIVE
================= */
@media (max-width: 980px) {
.presale-container {
padding: 20px;
}
.presale-title {
font-size: 1.8rem;
}
.presale-info-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.info-value {
font-size: 1.1rem;
}
.presale-footer-info {
flex-direction: column;
text-align: center;
}
.footer-columns {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.footer-brand-col {
grid-column: 1 / -1;
}
.presale-box {
width: 78px;
height: 78px;
min-width: 78px;
min-height: 78px;
}
}
@media (max-width: 640px) {
.footer-columns {
grid-template-columns: 1fr;
}
.footer-banner-inner {
text-align: center;
flex-direction: column;
}
.footer-bottom-blue {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 580px) {
.presale-info-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.presale-box {
width: 72px;
height: 72px;
min-width: 72px;
min-height: 72px;
}
.presale-box .presale-num {
font-size: 1.2rem;
}
.presale-box .presale-lbl {
font-size: 0.6rem;
}
}
/* =================
PROVENANCE SECTION - HTML Image Background
================= */
.section-provenance {
min-height: 120vh;
display: flex;
align-items: center;
position: relative;
padding: 80px 0;
overflow: hidden;
}
/* Full-screen background image (HTML method) */
.provenance-bg-image {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.provenance-fullscreen-bg {
width: 100%; /* ✅ Full width */
height: 100%;
object-fit: cover; /* ✅ Fill screen - no gaps */
object-position: center;
display: block;
}
/* Provenance Hero fix */
.provenance-hero {
padding-top: 140px; /* adjust if navbar height changes */
}
/* Make sure overlay is on top of image */
.section-provenance .section-overlay {
z-index: 1;
background: transparent; /* ✅ Much lighter - was 0.80 */
}
/* Make sure content is on top */
.provenance-content {
max-width: 900px;
margin: 0 auto;
text-align: left;
color: #ffffff;
padding: 40px 24px;
position: relative;
z-index: 3;
}
.provenance-title {
font-size: 6.0rem !important;
font-weight: 900 !important;
color: #ffffff;
margin: 0 0 12px 0;
line-height: 1.2;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.provenance-subtitle {
display: block;
font-size: 6.0rem ! important;
color: #ff9900;
font-weight: 900 !important;
margin-top: 8px;
}
.provenance-text-block {
margin: 32px 0;
}
.provenance-intro {
font-size: 1.15rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 20px;
font-weight: 700; /* ✅ BOLD - was 400 */
}
.provenance-intro strong {
font-weight: 700;
color: #ffffff;
}
.provenance-description {
font-size: 1.05rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 18px;
font-style: normal; /* ✅ Remove italic */
font-weight: 600; /* ✅ BOLD - was 400 */
}
.provenance-description em {
font-style: normal; /* ✅ Remove italic from em tags too */
color: rgba(255, 255, 255, 0.95);
font-weight: 700; /* ✅ Extra bold for emphasis */
}
.btn-provenance-learn {
display: inline-block;
margin-top: 24px;
padding: 14px 32px;
background: transparent;
color: #ff9900; /* ✅ ORANGE - was #4a9eff */
border: 2px solid #ff9900; /* ✅ ORANGE - was #4a9eff */
border-radius: 8px;
font-weight: 700;
font-size: 1.05rem;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(255, 153, 0, 0.3); /* ✅ Orange glow */
}
.btn-provenance-learn:hover {
background: #ff9900; /* ✅ ORANGE fill on hover */
color: #000;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 153, 0, 0.5); /* ✅ Orange glow */
}
/* Mobile responsive */
@media (max-width: 768px) {
.provenance-title {
font-size: 2rem;
}
.provenance-subtitle {
font-size: 1.7rem;
}
.provenance-intro,
.provenance-description {
font-size: 1rem;
}
/* No overlay on hero - full brightness */
.section-hero .section-overlay {
background: transparent; /* ✅ Completely clear */
}
}
/* =================
BONDING CURVE SECTION
================= */
.section-bonding-curve {
min-height: 120vh;
display: flex;
align-items: center;
position: relative;
padding: 80px 0;
overflow: hidden;
}
/* Full-screen background image */
.bonding-curve-bg-image {
position: absolute;
inset: 0;
z-index: 0;
}
.bonding-curve-fullscreen-bg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Lighter overlay */
.section-bonding-curve .section-overlay {
z-index: 1;
background: transparent;
}
/* Content */
.bonding-curve-content {
max-width: 900px;
margin: 0 auto;
text-align: left;
color: #ffffff;
padding: 40px 24px;
position: relative;
z-index: 3;
}
.bonding-curve-title {
font-size: 6.0rem !important; /* ✅ Force it! */
font-weight: 900 !important;
color: #ffffff;
margin: 0 0 12px 0;
line-height: 1.2;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.bonding-curve-title-accent {
display: block;
font-size: 6.0rem;
color: #ff9900;
font-weight: 900;
margin-top: 8px;
}
.bonding-curve-text-block {
margin: 32px 0;
}
.bonding-curve-description {
font-size: 1.15rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 20px;
font-weight: 600;
}
.btn-bonding-curve-learn {
display: inline-block;
margin-top: 24px;
padding: 14px 32px;
background: transparent;
color: #ff9900;
border: 2px solid #ff9900;
border-radius: 8px;
font-weight: 700;
font-size: 1.05rem;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(255, 153, 0, 0.3);
}
.btn-bonding-curve-learn:hover {
background: #ff9900;
color: #000;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 153, 0, 0.5);
}
/* Mobile responsive */
@media (max-width: 768px) {
.bonding-curve-title {
font-size: 2rem;
}
.bonding-curve-subtitle-accent {
font-size: 1.7rem;
}
.bonding-curve-description {
font-size: 1rem;
}
}
.curve-image-float {
display: inline-block;
animation: curve-float-long 7.5s ease-in-out infinite;
}
@keyframes curve-float-long {
20% { transform: translateX(-8%); }
50% { transform: translateX(50%); }
100% { transform: translateX(-8%);}
}
/* =================
BONDING CURVE ANIMATIONS
================= */
/* Net swing animation */
.net-swing-active {
animation: net-swing var(--swing-duration, 10s) ease-in-out infinite;
}
@keyframes net-swing {
0%, 100% {
transform: translateY(calc(var(--swing-amount, 15px) * -1)) rotate(-0.5deg);
/* ⬆️ Pushes UP + slight tilt LEFT = net rising */
}
50% {
transform: translateY(var(--swing-amount, 15px)) rotate(0.5deg);
/* ⬆️ Pulls DOWN + slight tilt RIGHT = net dropping */
}
}
.net-swing-active {
animation: net-swing var(--swing-duration, 10s) ease-in-out infinite;
transform-origin: center top; /* ✅ Pivot point at top = swings from anchor */
}
@keyframes net-swing {
0%, 100% {
transform: translateY(-15px) rotate(-0.8deg);
/* ⬆️ Lifts UP + tilts - like net being pushed up */
}
50% {
transform: translateY(15px) rotate(0.8deg);
/* ⬆️ Drops DOWN + tilts opposite - gravity pulling down */
}
}
/* Rocket container */
.rocket-container {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
/* Individual rocket */
.light-rocket {
position: absolute;
width: var(--rocket-size, 8px);
height: var(--rocket-size, 8px);
border-radius: 50%;
background: var(--rocket-color);
box-shadow:
0 0 var(--glow-size, 40px) var(--rocket-color),
0 0 calc(var(--glow-size, 30px) / 2) var(--rocket-color);
left: var(--start-x);
top: var(--start-y);
opacity: 1;
animation:
rocket-fly var(--rocket-duration, 8s) linear infinite,
rocket-fade var(--rocket-duration, 12s) ease-in-out infinite;
animation-delay: var(--rocket-delay, 2s);
}
@keyframes rocket-fly {
0% {
left: var(--start-x);
top: var(--start-y);
}
100% {
left: var(--end-x);
top: var(--end-y);
}
}
@keyframes rocket-fade {
0% {
opacity: 0;
transform: scale(0);
}
15% {
opacity: 1;
transform: scale(1);
}
85% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
/* Disable on reduced motion */
@media (prefers-reduced-motion: reduce) {
.net-swing-active,
.light-rocket {
animation: none !important;
}
}
/* =================
BONDING CURVE ANIMATIONS
================= */
/* Net swing animation */
.net-swing-active {
animation: net-swing var(--swing-duration, 8s) ease-in-out infinite;
/* ⬆️ --swing-duration: How long one full swing takes (8s = slow, 4s = fast) */
/* ⬆️ ease-in-out: Smooth acceleration/deceleration (natural pendulum) */
/* ⬆️ infinite: Keeps swinging forever */
}
@keyframes net-swing {
0%, 100% {
transform: translateX(calc(var(--swing-amount, 15px) * -1)) rotate(-1deg);
/* ⬆️ translateX: Horizontal movement (negative = left) */
/* ⬆️ --swing-amount: Distance in pixels (15px = subtle, 30px = wide) */
/* ⬆️ rotate(-1deg): Tilt angle (1deg = gentle, 3deg = dramatic) */
}
50% {
transform: translateX(var(--swing-amount, 15px)) rotate(1deg);
/* ⬆️ Positive values = move/tilt to the right */
}
}
/* Rocket container */
.rocket-container {
position: absolute;
inset: 0; /* ⬆️ Fills entire section (top: 0, right:0, bottom:0, left:0) */
z-index: 2; /* ⬆️ Appears above background, below content */
pointer-events: none; /* ⬆️ Clicks pass through (doesn't block buttons) */
overflow: hidden; /* ⬆️ Hides rockets when they go outside bounds */
}
/* Individual rocket */
.light-rocket {
position: absolute;
width: var(--rocket-size, 12px); /* ⬆️ Diameter of the light ball */
height: var(--rocket-size, 12px); /* ⬆️ Same as width = perfect circle */
border-radius: 50%; /* ⬆️ Makes it round (50% = circle) */
background: var(--rocket-color); /* ⬆️ Core color of the ball */
box-shadow:
0 0 var(--glow-size, 40px) var(--rocket-color),
/* ⬆️ First glow layer: --glow-size controls spread (20px = small, 60px = big) */
0 0 calc(var(--glow-size, 40px) / 2) var(--rocket-color);
/* ⬆️ Second glow layer: Half the size for intensity */
left: var(--start-x); /* ⬆️ Starting horizontal position (%) */
top: var(--start-y); /* ⬆️ Starting vertical position (%) */
opacity: 0; /* ⬆️ Starts invisible (fade-in animation) */
animation:
rocket-fly var(--rocket-duration, 40s) linear infinite,
/* ⬆️ --rocket-duration: How long the journey takes (3s = fast, 10s = slow) */
/* ⬆️ linear: Constant speed (no acceleration) */
rocket-fade var(--rocket-duration, 40s) ease-in-out infinite;
/* ⬆️ ease-in-out: Smooth fade in/out */
animation-delay: var(--rocket-delay, 0s);
/* ⬆️ Staggers the start time so they don't all launch together */
}
@keyframes rocket-fly {
0% {
left: var(--start-x); /* ⬆️ Where the rocket begins (set by JS) */
top: var(--start-y);
}
100% {
left: var(--end-x); /* ⬆️ Where the rocket ends (set by JS) */
top: var(--end-y);
}
}
@keyframes rocket-fade {
0% {
opacity: 0; /* ⬆️ Invisible at birth */
transform: scale(0); /* ⬆️ Tiny at birth (grows from nothing) */
}
15% {
opacity: 1; /* ⬆️ Fully visible by 15% of journey */
transform: scale(1); /* ⬆️ Full size by 15% */
}
85% {
opacity: 1; /* ⬆️ Stays visible until 85% of journey */
transform: scale(1); /* ⬆️ Stays full size */
}
100% {
opacity: 0; /* ⬆️ Fades out at end */
transform: scale(0); /* ⬆️ Shrinks to nothing */
}
}
/* =================
PROVENANCE PAGE SPECIFIC STYLES
================= */
/* QR Hero section */
.prov-hero-qr {
text-align: center;
padding: 60px 20px;
background: rgba(0, 0, 0, 0.3);
}
.prov-qr-img {
display: block;
margin: 0 auto 20px;
max-width: 400px;
width: 100%;
height: auto;
border-radius: 12px;
}
.prov-qr-label {
color: var(--accent);
font-size: 2.0rem;
font-weight: 700;
margin: 0;
}
/* Copy card */
.prov-copy-card {
background: rgba(255, 153, 0, 0.05);
border: 1px solid rgba(255, 153, 0, 0.2);
border-radius: 12px;
padding: 32px;
}
.prov-copy-card p {
margin-bottom: 20px;
line-height: 1.7;
}
.prov-copy-card p:last-child {
margin-bottom: 0;
}
/* Provenance title (top line) */
.prov-kicker {
font-size: 4.5rem;
font-weight: 700;
color: var(--ndg-yellow, #ff9900);
text-align: center;
margin-top: 40px; /* space from navbar */
margin-bottom: 48px; /* space before next headline */
line-height: 1.1;
}
/* Soft card */
.soft-card {
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
padding: 32px;
margin-bottom: 32px;
}
.soft-card h2 {
color: var(--accent);
margin-bottom: 16px;
}
.soft-card ul {
list-style: none;
padding: 0;
}
.soft-card ul li {
margin-bottom: 16px;
padding-left: 24px;
position: relative;
}
.soft-card ul li::before {
content: "→";
position: absolute;
left: 0;
color: var(--accent);
font-weight: bold;
}
/* How it works */
.prov-how-card {
background: linear-gradient(135deg, rgba(0, 217, 255, 0.05), rgba(255, 153, 0, 0.05));
border: 1px solid rgba(255, 153, 0, 0.2);
border-radius: 16px;
padding: 40px;
}
.prov-how-title {
text-align: center;
margin-bottom: 40px;
font-size: 2rem;
}
.prov-how-highlight {
color: var(--accent);
display: block;
margin-bottom: 8px;
}
.prov-steps {
list-style: none;
counter-reset: step-counter;
padding: 0;
}
.prov-steps li {
counter-increment: step-counter;
margin-bottom: 32px;
padding-left: 60px;
position: relative;
}
.prov-steps li::before {
content: counter(step-counter);
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
background: var(--accent);
color: #000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.2rem;
}
.prov-steps h3 {
margin: 0 0 8px;
color: #fff;
font-size: 1.3rem;
}
.prov-steps p {
margin: 0;
color: var(--muted);
line-height: 1.6;
}
/* Photo hero with overlay */
.prov-photo-hero {
position: relative;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.prov-photo {
display: block;
width: 100%;
height: auto;
}
.prov-photo-overlay {
position: none;
top: 18%;
left: 50%;
transform: translateX(-50%);
text-align: center;
padding: 0 16px;
max-width: 800px;
}
.hero-title-yellow {
color: var(--accent);
font-size: 3.2rem;
font-weight: 900;
margin: 0 0 16px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}
.hero-subtitle-white {
color: #ffffff;
font-size: 1.25rem;
margin: 0;
line-height: 1.6;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-title-yellow {
font-size: 2rem;
}
.hero-subtitle-white {
font-size: 1rem;
}
.prov-photo-overlay {
top: 0%;
}
.prov-how-card {
padding: 24px;
}
.prov-steps li {
padding-left: 50px;
}
}
/* =================
BONDING CURVE PAGE SPECIFIC STYLES
================= */
/* NDG Advantage section */
.ndg-advantage {
background: linear-gradient(135deg, rgba(0, 217, 255, 0.03), rgba(255, 153, 0, 0.03));
}
.section-title {
font-size: 2.5rem;
margin-bottom: 32px;
line-height: 1.3;
}
.subheading {
color: var(--accent);
font-size: 1.5rem;
margin: 32px 0 16px;
}
.formula {
font-family: 'Courier New', monospace;
font-size: 1.5rem;
text-align: center;
color: var(--accent);
margin: 24px 0;
padding: 20px;
background: rgba(255, 153, 0, 0.1);
border-radius: 8px;
}
.formula-block {
font-family: 'Courier New', monospace;
font-size: 1.2rem;
color: var(--accent);
margin: 16px 0;
padding: 12px;
background: rgba(255, 153, 0, 0.08);
border-radius: 6px;
}
/* Table styling */
.table-wrapper {
overflow-x: auto;
margin: 32px 0;
}
.ndg-curve-table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
}
.ndg-curve-table thead {
background: rgba(255, 153, 0, 0.15);
}
.ndg-curve-table th,
.ndg-curve-table td {
padding: 16px;
text-align: left;
border: 1px solid rgba(255, 153, 0, 0.2);
}
.ndg-curve-table th {
color: var(--accent);
font-weight: 700;
}
.ndg-curve-table td {
color: var(--muted);
}
/* Math section layout */
.bc-math-section {
background: rgba(0, 0, 0, 0.3);
padding: 60px 20px;
}
.bc-math-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.bc-math-figure img {
width: 100%;
height: auto;
border-radius: 12px;
}
.bc-math-text h3 {
color: var(--accent);
font-size: 2rem;
margin-bottom: 16px;
}
.bc-math-text ul {
list-style: none;
padding: 0;
margin: 24px 0;
}
.bc-math-text li {
margin-bottom: 12px;
padding-left: 24px;
position: relative;
color: var(--muted);
}
.bc-math-text li::before {
content: "•";
position: absolute;
left: 0;
color: var(--accent);
font-size: 1.5rem;
}
/* Curve info section */
.curve-info {
background: rgba(255, 255, 255, 0.02);
padding: 40px 20px;
}
.curve-dd {
margin-bottom: 24px;
border: 1px solid rgba(255, 153, 0, 0.2);
border-radius: 8px;
padding: 20px;
background: rgba(0, 0, 0, 0.2);
}
.curve-dd summary {
font-size: 1.3rem;
font-weight: 700;
color: var(--accent);
cursor: pointer;
margin-bottom: 16px;
}
.curve-dd summary:hover {
color: #ffb133;
}
.curve-dd ul {
list-style: none;
padding: 0;
margin: 16px 0;
}
.curve-dd li {
margin-bottom: 12px;
padding-left: 24px;
position: relative;
}
.curve-dd li::before {
content: "→";
position: absolute;
left: 0;
color: var(--accent);
font-weight: bold;
}
.curve-note {
margin-top: 32px;
padding: 20px;
background: rgba(255, 153, 0, 0.08);
border-left: 4px solid var(--accent);
border-radius: 4px;
font-size: 1.05rem;
}
/* Image sections */
.bc-image-section {
padding: 0;
margin: 0;
border-top: 1px solid var(--border);
text-align: center;
}
.bc-feature-img {
display: block;
margin: 0 auto;
width: 70%;
max-width: 1200px;
height: auto;
max-height: 100vh;
object-fit: cover;
}
.bc-img-tall {
max-height: 130vh;
}
/* Text block */
.bc-text-block {
padding: 60px 20px;
}
.bc-text-block h2 {
color: var(--accent);
margin-bottom: 24px;
}
/* Responsive adjustments */
@media (max-width: 968px) {
.bc-math-layout {
grid-template-columns: 1fr;
gap: 32px;
}
.section-title {
font-size: 2rem;
}
.bc-feature-img {
width: 90%;
}
}
@media (max-width: 768px) {
.section-title {
font-size: 1.75rem;
}
.subheading {
font-size: 1.25rem;
}
.ndg-curve-table {
font-size: 0.9rem;
}
.ndg-curve-table th,
.ndg-curve-table td {
padding: 12px 8px;
}
.bc-feature-img {
width: 100%;
}
}
/* --- GUARDIAN PREVIEW SESSION --- */
.guardian-preview {
position: relative;
min-height: 120vh;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Background image positioning */
.guardian-bg-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.guardian-fullscreen-bg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
opacity: 0.55;
/* Less opacity so content stands out */
}
/* Overlay for better text contrast */
.guardian-preview .section-overlay {
position: absolute;
inset: 0;
background: transparent;
z-index: 1;
}
/* Content alignment */
.guardian-preview .section-inner.hero-overlay {
position: relative;
z-index: 2;
width: 100%;
padding: 64px 16px 60px 16px;
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* HEADLINE: Just the few words you want big */
.guardian-title {
color: #fff;
font-size: 6.0rem;
font-weight: 800;
line-height: 1.08;
margin: 0 0 18px 0;
letter-spacing: -0.02em;
}
.guardian-title .accent-orange {
color: #ff9900;
}
/* Subtitle: readable size always */
.guardian-preview .hero-subtitle {
color: #f3f3f3;
font-size: 1.12rem;
line-height: 1.65;
margin: 0 0 26px 0;
max-width: 750px;
}
.btn-bonding-curve-learn {
background: var(--accent, #ff9900, #ff9900);
color: #000;
padding: 12px 28px;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
font-size: 1rem;
border: none;
box-shadow: 0 4px 16px rgba(255, 153, 0, 0.14);
margin-top: 8px;
transition: background 0.2s, color 0.2s;
}
.btn-bonding-curve-learn:hover,
.btn-bonding-curve-learn:focus {
background: #ffaa00;
color: #222;
outline: none;
}
/* =================
TOKENOMICS PREVIEW SECTION
================= */
.section-tokenomics-preview {
position: relative;
width: 100%;
min-height: 120vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* IMAGE as background, full width/height, behind content */
.tokenomics-bg-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.tokenomics-preview-img {
width: 100%;
height: 100%;
object-fit: cover; /* Full bleed, or use 'contain' for no cropping! */
object-position: center;
display: block;
opacity: 0.48;
}
.section-tokenomics-preview .section-overlay {
position: absolute;
inset: 0;
background: transparent; /* Or rgba(...) for a faint overlay */
z-index: 1;
}
.tokenomics-preview-content {
position: relative;
z-index: 2;
margin: 0 auto;
padding: 72px 18px 66px 18px;
max-width: 900px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* HEADLINE */
.tokenomics-title {
font-size: 6rem;
font-weight: 800;
color: #fff;
line-height: 1.08;
margin-bottom: 20px;
}
.tokenomics-title .accent-orange {
color: #ff9900;
}
/* SUBHEAD / LEAD */
.tokenomics-lead {
font-size: 1.025rem;
font-weight: bold;
color: #faf9f6;
margin-bottom: 18px;
line-height: 1.5;
}
/* DESCRIPTION */
.tokenomics-description {
font-size: 1.1rem;
font-weight: flex;
color: hsl(0, 0%, 96%);
margin-bottom: 44px;
line-height: 1.5;
}
.btn-tokenomics-view {
display: inline-block;
background: #ff9900;
color: #222;
font-weight: 700;
padding: 14px 44px;
border-radius: 7px;
text-decoration: none;
font-size: 1.13rem;
letter-spacing: 0.01em;
transition: background .18s, color .18s;
border: none;
box-shadow: 0 5px 18px rgba(255,153,0,0.10);
margin-top: 8px;
}
.btn-tokenomics-view:hover,
.btn-tokenomics-view:focus {
background: #ffaa2b;
color: #1c1200;
outline: none;
}
/* Responsive adjustments */
@media (max-width:1200px) {
.tokenomics-title { font-size: 3.4rem; }
}
@media (max-width:700px) {
.tokenomics-title { font-size: 2.2rem; }
.tokenomics-lead, .tokenomics-description { font-size: 1.02rem; }
.tokenomics-preview-content { padding: 38px 5px 28px 5px; }
.btn-tokenomics-view { font-size: 0.97rem; padding: 12px 16px;}
}
/* === WHAT IS NETDAG SECTION === */
.utility-tokenomics-modern {
position: relative;
overflow: visible;
margin: 40px auto;
padding: 40px 32px 32px 32px;
border-radius: 18px;
background: linear-gradient(120deg, #15162e 85%, #171742 100%);
box-shadow: 0 6px 36px 0 #09152699, 0 1.5px 16px 0 #244d7a33;
max-width: 1130px; /* Increased by 20% */
min-height: 590px; /* Increased by 10% */
color: #ececf2;
}
/* Glow adjustment for the new width */
.glow-left { left: -90px; }
.glow-right { right: -90px; }
.utility-tokenomics-modern h2 {
color: #fdc964;
font-size: 2.2rem;
margin-bottom: 30px;
font-weight: 800;
letter-spacing: 0.02em;
}
.utility-list {
display: flex;
flex-direction: column;
gap: 28px;
z-index: 1;
position: relative;
margin-bottom: 27px;
}
.utility-item {
display: flex;
align-items: flex-start;
gap: 22px;
padding: 22px 25px;
border-radius: 14px;
background: linear-gradient(92deg, #232357 75%, #232346bb 100%);
box-shadow: 0 4px 18px 0 #18335344;
border: 1.5px solid #1ebffd22;
transition: background 0.2s;
}
.utility-item:hover {
background: linear-gradient(90deg, #2b3070 80%, #2e265dcb 100%);
border-color: #39fbfd44;
}
.utility-icon {
display: flex;
align-items: center;
font-size: 2.2rem;
min-width: 44px;
}
.utility-title {
margin: 0 0 6px 0;
font-size: 1.23rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #fce99b;
}
/* Glowing Side Effects */
.glow {
position: absolute;
top: 0; bottom: 0;
width: 110px;
z-index: 0;
pointer-events: none;
}
.glow-left {
left: -90px;
background: radial-gradient(circle, #20eafc70 30%, #4732b3 90%, transparent 100%);
filter: blur(28px);
}
.glow-right {
right: -90px;
background: radial-gradient(circle, #fa6bffe0 30%, #6c41b0 90%, transparent 100%);
filter: blur(32px);
}
/* Footer callout box */
.utility-footer {
background: linear-gradient(100deg, #191837e0 80%, #232342cc 100%);
border: 1.5px solid #ffb91144;
color: #fffbe1;
margin-top: 14px;
border-radius: 13px;
padding: 20px 27px;
box-shadow: 0 2px 10px 0 #2e181a55;
font-size: 1rem;
z-index: 1;
position: relative;
}
.utility-footer strong {
color: #ffd253;
font-weight: 900;
font-size: 1.10rem;
}
.footer-highlight {
color: #12e0ff;
font-weight: 700;
display: block;
margin-top: 6px;
font-size: 1.06rem;
}
/* Responsive for smaller devices */
@media (max-width: 650px) {
.utility-tokenomics-modern {
padding: 18px 5px;
min-width: unset;
max-width: 99vw;
}
.utility-item {
flex-direction: column;
gap: 9px;
padding: 15px 7px;
}
.utility-footer {
padding: 12px 6px;
border-radius: 8px;
font-size: 0.98rem;
}
}
.glow {
position: absolute;
top: 0;
bottom: 0;
width: 10vw; /* Extend halfway across the viewport */
max-width: 550px;
min-width: 200px;
pointer-events: none;
z-index: 1;
/* Don't use overflow hidden here! */
}
.glow-left {
left: -10vw; /* Push far to the left */
background: radial-gradient(circle at right,
#20eafcae 0%,
#15162e99 70%,
transparent 100%
);
filter: blur(40px);
}
.glow-right {
right: -10vw; /* Push far to the right */
background: radial-gradient(circle at left,
#fa6bffcc 0%,
#17174299 70%,
transparent 100%
);
filter: blur(40px);
}
.post-blog-action-panels {
background: linear-gradient(180deg, #181c22 60%, #191820 100%);
padding: 48px 0 30px 0;
width: 100%;
display: flex;
justify-content: center;
}
.action-panels-inner {
max-width: 1180px;
width: 100%;
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
}
.pool-action-card {
width: 100%;
max-width: 830px;
background: linear-gradient(120deg, #252c4d 82%, #294c62 100%);
border-radius: 20px;
box-shadow: 0 5px 32px 0 #2121364d;
padding: 38px 42px 29px 42px;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
margin-bottom: 6px;
}
.pool-action-status {
display: inline-block;
background: #1c283a;
color: #ffb92c;
font-size: 0.95rem;
letter-spacing: 1.2px;
padding: 5px 19px 5px 13px;
border-radius: 10px;
margin-bottom: 16px;
font-weight: 700;
text-transform: uppercase;
}
.pool-action-title {
font-size: 1.62rem;
font-weight: 800;
color: #fff;
margin-bottom: 9px;
line-height: 1.1;
}
.pool-action-desc {
font-size: 1.06rem;
color: #eee;
opacity: .88;
margin-bottom: 22px;
max-width: 85%;
}
.pool-action-btn {
display: inline-block;
background: #ff9900;
color: #222;
font-weight: 700;
padding: 13px 32px;
border-radius: 12px;
font-size: 1.08rem;
letter-spacing: 0.01em;
text-decoration: none;
border: none;
box-shadow: 0 2px 15px #ff990079;
transition: background .14s, color .14s;
}
.pool-action-btn:hover,
.pool-action-btn:focus {
background: #ffaa32;
color: #191400;
}
.presale-curve-cta-block {
width: 100%;
max-width: 890px;
background: transparent;
text-align: center;
padding: 48px 14px 14px 14px;
margin: 0 auto 0 auto;
border-radius: 11px;
}
.curve-cta-title {
color: #ff9900;
font-size: 2.02rem;
font-weight: 900;
letter-spacing: 0.01em;
margin-bottom: 9px;
line-height: 1.13;
text-shadow: 0 2px 18px #ff990021;
}
.curve-cta-desc {
color: #fff;
font-size: 1.13rem;
font-weight: 500;
margin-bottom: 32px;
line-height: 1.42;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.curve-cta-actions {
display: flex;
gap: 17px;
justify-content: center;
align-items: center;
margin-bottom: 15px;
}
.curve-cta-btn-primary {
background: #ff9900;
color: #181400;
padding: 14px 28px;
border-radius: 10px;
font-weight: 800;
font-size: 1.06rem;
border: none;
text-decoration: none;
box-shadow: 0 3px 14px #ff990018;
transition: background .11s, color .13s;
}
.curve-cta-btn-primary:hover,
.curve-cta-btn-primary:focus {
background: #ffaa32;
color: #3c2a00;
}
.curve-cta-date {
color: #ff9900;
font-size: 1.08rem;
margin-top: 20px;
letter-spacing: 0.02em;
font-weight: 700;
}
/* Responsive styles */
@media (max-width: 1000px) {
.pool-action-card, .presale-curve-cta-block {
max-width: 96vw;
padding-left: 14px;
padding-right: 14px;
}
.action-panels-inner { gap: 34px; }
}
@media (max-width: 600px) {
.pool-action-card, .presale-curve-cta-block {
padding: 19px 3vw 15px 3vw;
font-size: 0.99rem;
}
.curve-cta-title { font-size: 1.23rem; }
.curve-cta-desc { font-size: 0.97rem; }
}
/* ====== RESET & GLOBAL STYLES ====== */
html, body { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
background: radial-gradient(ellipse at 46% 10%, #04091d 0%, #111523 100%);
color: #f4f5fa;
min-height: 100vh;
font-size: 1.09rem;
line-height: 1.65;
}
a { color: #7dc4ff; text-decoration: none; transition: color 0.13s; }
a:hover, a:focus { color: #ff9900; }
img { max-width: 100%; display: block; }
.brand {
display: flex; align-items: center; gap: 12px;
font-weight: 800; color: #fff; font-size: 2rem;
text-decoration: none;
}
.brand-logo {
height: 65px; width: auto; display:inline-block;
}
.brand-text {
font-size: 3.5rem;
font-weight: 900;
}
.nav-right {
display: flex; align-items: center; gap: 18px; margin-left: 70px;
}
.nav-links {
list-style: none; display: flex; gap: 18px; margin: 0; padding: 0;
}
.nav-links li a {
color: #fff; padding: 6px 11px; font-weight: 700; border-bottom: 2.5px solid transparent;
border-radius: 7px 7px 0 0;
transition: border 0.14s, color 0.14s;
font-size: 1.06rem;
}
.nav-links li a.active, .nav-links li a:hover {
color: #ff9900; border-bottom: 2.5px solid #ff9900; background: #1b2c44;
}
.btn {
background: #161f38;
color: #ff9900;
font-weight: 700;
border-radius: 8px;
font-size: 1.06rem;
padding: 11px 18px;
text-decoration: none; border: none; display: inline-block;
margin-left: 7px;
}
.btn.primary {
background: #ff9900 !important;
color: #232332 !important;
}
.btn.primary:hover, .btn.primary:focus {
background: #ffaa3c; color: #18110a;
}
.btn:hover, .btn:focus {
background: #293c68;
color: #ffe7b7;
}
@media (max-width: 950px) {
.header-inner { flex-direction: column; gap: 8px; align-items: flex-start; height: auto; padding: 7px 5vw;}
.nav-links { flex-wrap: wrap; gap: 10px; }
.nav-right { flex-wrap: wrap; gap: 14px; margin-left: 0; }
}
.hero-grid {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
flex-wrap: wrap;
}
.hero-info {
flex: 1 1 400px;
min-width: 320px;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
}
.kicker.hero-kicker {
font-size: 4rem;
font-weight: 900;
color: #ff9900;
margin-bottom: 22px;
text-align: center;
line-height: 1.05;
letter-spacing: 0.02em;
display: flex;
align-items: center;
justify-content: center;
}
.hero-kicker .dot {
width: 18px; height: 18px; border-radius: 50%;
background: #ff9900;
margin-right: 13px; box-shadow: 0 0 9px #ff9900aa;
vertical-align: middle; display: inline-block;
}
.hero-headline {
color: #ecedef;
font-size: 2.2rem;
font-weight: 700;
text-align: center;
margin: 0 0 14px 0;
letter-spacing: 0.01em;
}
.lead {
color: #ffefca;
font-size: 1.18rem;
font-weight: 500;
text-align: center;
margin-bottom: 22px;
}
.hero-callout {
background: #23284c;
border-radius: 13px;
padding: 18px 23px;
margin: 21px 0 19px 0;
color: #d4e5f7;
text-align: center;
max-width: 600px;
box-shadow: 0 2px 12px #1828521f;
}
.hero-callout p {
margin: 11px 0;
color: rgba(233,238,247,0.92);
}
.hero-btnrow {
margin-top: 13px;
display: flex;
justify-content: center;
gap: 17px;
width: 100%;
flex-wrap: wrap;
}
.imgbox.hero-imgbox {
flex: 1 1 340px;
min-width: 260px;
display: flex;
justify-content: center;
align-items: center;
}
.hero-img {
border-radius: 18px;
box-shadow: 0 6px 26px #0005;
max-width: 400px;
width: 100%;
height: auto;
}
@media (max-width: 900px) {
.hero-content { padding: calc(var(--ticker-height) + var(--header-height) + 18px) 12px 18px; }
.hero-grid { flex-direction: column; gap: 30px; }
.imgbox.hero-imgbox { margin-top: 24px; }
}
@media (max-width: 600px) {
.kicker.hero-kicker { font-size: 2.2rem; }
.hero-headline { font-size: 1.1rem;}
}
.section-hero{
position: relative;
min-height: 120vh;
width: 100vw;
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero-bg-image{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
--hero-breathe-scale: 1.5;
--hero-breathe-translate: -16px;
--hero-breathe-duration: 10s;
}
@keyframes hero-breathe {
0% {
transform: translateY(0) scale(1) rotate(0.2deg);
}
25% {
transform:
translateY(calc(var(--hero-breathe-translate) * 0.5))
scale(calc(1 + (var(--hero-breathe-scale) - 1) * 0.5))
rotate(-0.35deg);
}
50% {
transform:
translateY(var(--hero-breathe-translate))
scale(var(--hero-breathe-scale))
rotate(0deg);
}
75% {
transform:
translateY(calc(var(--hero-breathe-translate) * 0.5))
scale(calc(1 + (var(--hero-breathe-scale) - 1) * 0.5))
rotate(0.35deg);
}
100% {
transform: translateY(0) scale(1) rotate(0deg);
}
}
.section-hero .hero-bg-image{
animation: hero-breathe var(--hero-breathe-duration) ease-in-out infinite;
transform-origin: center center;
will-change: transform;
}
/* Push content below fixed ticker+navbar */
.hero-content{
position: relative;
z-index: 2;
text-align: center;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding-top: 4px;
color: #fff;
}
.hero-title .accent{ color: var(--accent); }
/* =========================
PROVENANCE HERO (STEP 1)
========================= */
.prov-hero-grid{
align-items: center;
gap: 48px;
}
/* Kicker styling per your note */
.prov-hero .kicker{
display: flex;
align-items: center;
justify-content: center; /* centered */
gap: 12px;
font-size: 4rem; /* 4.0rem */
font-weight: 900;
color: var(--accent); /* #ff9900 */
margin-bottom: 18px;
text-align: center;
}
/* “Gray white” title */
.prov-hero-title{
color: rgba(235, 238, 246, 0.92);
text-align: center;
margin: 0 0 14px 0;
}
/* Center the lead too */
.prov-hero .lead{
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 720px;
}
/* Callout centered internally */
.prov-callout{
text-align: center; /* center everything inside */
margin-left: auto;
margin-right: auto;
max-width: 760px;
}
.prov-callout-top{
margin: 0;
color: rgba(255,255,255,0.92); /* white-ish per your note */
}
/* Buttons centered */
.prov-hero .btnrow{
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 18px;
}
/* Image scaling parameter */
.prov-hero{
--prov-hero-img-scale: 1; /* change to 1.1, 1.2 to enlarge */
}
.prov-hero-media{
display: flex;
justify-content: center;
}
/* ===============================
Provenance Hero Layout
=============================== */
.provenance-hero {
padding: 120px 0 100px;
}
.provenance-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center; /* THIS aligns image + text vertically */
}
/* TEXT */
.prov-text {
text-align: center;
}
.prov-text h1 {
font-size: clamp(2.4rem, 4vw, 3.2rem);
margin-bottom: 24px;
}
.prov-lead {
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 24px;
}
.prov-text {
max-width: 1000px;
}
.prov-kicker {
font-size: clamp(4.5rem, 6vw, 4.5rem);
}
/* BUTTONS */
.prov-actions {
margin-top: 32px;
display: flex;
gap: 16px;
}
/* PHONE: 30% bigger */
.prov-visual img{
width: min(640px, 50vw); /* bigger than before */
max-height: 760px; /* allow taller */
height: auto;
}
@media (max-width: 900px) {
.provenance-container {
grid-template-columns: 1fr;
text-align: center;
}
.prov-text {
text-align: center;
}
.prov-actions {
justify-content: center;
}
}
.provenance-hero{
padding: 130px 0 90px; /* space under navbar */
}
.provenance-container{
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 64px;
align-items: start; /* key: both start at same top line */
}
.prov-text{
text-align: center; /* keep your current centered look */
}
.prov-copy{
max-width: 62ch; /* clean readable width */
margin: 18px auto 0; /* centered block */
text-align: left; /* but text lines are left aligned */
}
.prov-actions{
margin-top: 26px;
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* PHONE */
.prov-visual{
display: flex;
justify-content: center;
padding-top: 120px; /* this is your “starts at button level” control */
}
.prov-phone{
width: min(520px, 46vw);
height: auto;
transform: scale(1.3); /* exactly +30% */
transform-origin: center top;
}
/* Mobile */
@media (max-width: 900px){
.provenance-container{
grid-template-columns: 1fr;
gap: 28px;
}
.prov-visual{
padding-top: 18px;
}
.prov-copy{
text-align: left;
}
}
/* =========================================================
PROVENANCE — SECTION 2 (QR left, text wraps right)
Requirements:
1) All subtitles: #ff9900 + font-weight 800
2) Subtitles closer to text below
3) "Built for everyday use — at global scale" is also a subtitle AND clears below QR with all following text
4) Scan → Verify → Confirm: #ff9900 + font-weight 600
5) "Public verifiability:", "Producer + certifier flow:", "Audit trail:" : #ff9900 + font-weight 600
========================================================= */
/* Outer width */
.prov-s2-wrap{
max-width: 1000px;
margin: 0 auto;
padding: 60px 0;
}
/* Title (big orange heading) */
.prov-s2-title{
font-size: 3.2rem;
color: #ff9900;
margin: 0 0 18px;
line-height: 1.05;
}
/* QR image floats left so text wraps on the right */
.prov-qr-float{
float: left;
width: 520px; /* ~2x size - adjust 480–600 if needed */
height: auto;
margin: 0 36px 16px 0; /* right gap + small bottom gap */
border-radius: 14px;
}
/* Copy area */
.prov-s2-copy{
text-align: left;
}
/* Base paragraph spacing (tight but readable) */
.prov-s2-copy p{
margin: 0 0 10px; /* tighter default */
line-height: 1.6;
}
/* ---------------------------------------------------------
SUBTITLES (ALL orange + 800 weight)
Use .prov-sub on:
- "What changes now"
- "Simple flow"
- "Built for everyday use — at global scale"
--------------------------------------------------------- */
.prov-sub{
color: #ff9900;
font-weight: 800; /* (not px) */
margin: 10px 0 2px; /* closer to text below */
line-height: 1.25;
}
/* Ensure the paragraph/list immediately after a subtitle is close */
.prov-sub + p,
.prov-sub + ul{
margin-top: 0;
}
/* ---------------------------------------------------------
Force "Built for everyday use..." to go UNDER QR
Add BOTH classes on that line:
class="prov-sub prov-clear-start"
--------------------------------------------------------- */
.prov-clear-start{
clear: left; /* everything from here starts below QR */
margin-top: 14px; /* small separation from wrapped area */
}
/* ---------------------------------------------------------
Scan → Verify → Confirm (orange + weight 600)
--------------------------------------------------------- */
.prov-flow{
color: #ff9900;
font-weight: 600; /* (not px) */
margin: 2px 0 10px; /* close to subtitle + next text */
line-height: 1.4;
}
/* ---------------------------------------------------------
Bullet list + highlighted lead terms (orange + 600)
Supports BOTH:
- Public verifiability:
- or Public verifiability: (if that's what you already use)
--------------------------------------------------------- */
.prov-s2-copy ul{
margin: 8px 0 0 0;
padding-left: 18px;
}
.prov-s2-copy li{
margin: 8px 0;
line-height: 1.55;
}
.prov-key,
.prov-s2-copy li strong{
color: #ff9900;
font-weight: 600; /* (not px) */
}
/* Clear float at end of section so next sections don't wrap */
.prov-s2-wrap::after{
content: "";
display: block;
clear: both;
}
/* ---------------------------------------------------------
Mobile: stack QR above text
--------------------------------------------------------- */
@media (max-width: 900px){
.prov-qr-float{
float: none;
display: block;
width: min(92%, 520px);
margin: 0 auto 16px;
}
.prov-s2-title{
font-size: 3rem;
text-align: center;
}
}
/* =========================================
PRESALE BLOCK — vertical positioning
(safe: CSS only, no JS impact)
========================================= */
/* Desktop */
.presale-block{
margin-top: 200px; /* PUSH DOWN — adjust as needed */
}
/* Tablet */
@media (max-width: 1024px){
.presale-block{
margin-top: 60px;
}
}
/* Mobile */
@media (max-width: 640px){
.presale-block{
margin-top: 40px;
}
}
/* ======================================================
PROVENANCE HERO (ndg79) — ISOLATED & SAFE
====================================================== */
.prov-hero-79{
position: relative;
min-height: 120vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
/* IMPORTANT: path is RELATIVE TO THIS CSS FILE */
background-image: url('../images/ndg79.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
/* Dark overlay for contrast */
.prov-hero-79-overlay{
position: none;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.55),
rgba(0,0,0,0.75)
);
z-index: 1;
}
/* Mobile tuning */
@media (max-width: 640px){
.prov-hero-79-inner{
padding: 100px 18px 70px;
}
}
/* =========================================================
PROVENANCE — AUTO ROLLING BAND (WITH .prov-img)
========================================================= */
.prov-roll-band{
position: relative;
width: 100%;
overflow: hidden;
background: #0b0d12;
padding: 34px 0;
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
isolation: isolate;
}
/* Rolling track */
.prov-roll-track{
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 44px;
width: fit-content;
max-width: none;
will-change: transform;
animation: prov-roll 42s linear infinite;
}
/* IMAGE WRAPPER (THIS WAS MISSING) */
.prov-img{
flex: 0 0 auto; /* prevent wrap/shrink */
width: 250px;
height: 250px;
position: relative;
}
/* ACTUAL IMAGE */
.prov-img img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
/* Modern glow */
box-shadow:
0 12px 30px rgba(0,0,0,.45),
0 0 0 1px rgba(255,153,0,.18),
0 0 28px rgba(255,153,0,.18);
filter: brightness(1.06) contrast(1.06);
transform: translateZ(0);
transition:
transform .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
/* Hover polish (desktop only) */
@media (hover:hover){
.prov-img:hover img{
transform: translateY(-6px) scale(1.02);
box-shadow:
0 18px 42px rgba(0,0,0,.55),
0 0 0 1px rgba(255,153,0,.32),
0 0 44px rgba(255,153,0,.30);
filter: brightness(1.10) contrast(1.10);
}
}
/* Infinite scroll */
@keyframes prov-roll{
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Mobile */
@media (max-width: 768px){
.prov-roll-track{
gap: 26px;
animation-duration: 55s;
}
.prov-img{
width: 175px;
height: 175px;
}
}
/* SECTION */
.prov-section {
padding: 6rem 0 6.5rem;
}
/* CONTAINER */
.prov-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 32px;
}
/* TITLE */
.prov-title {
font-size: 3.2rem;
line-height: 1.15;
color: #ff9900;
margin-bottom: 1.6rem;
}
/* LEAD */
.prov-lead {
max-width: 72ch;
margin-bottom: 2.4rem;
line-height: 1.65;
color: rgba(233,238,247,.9);
}
/* IMAGE (FLOATS + WRAPS TEXT) */
.prov-image {
float: right;
width: 420px;
max-width: 45%;
margin: 0.5rem 0 1.4rem 2.4rem;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.08);
}
/* SUBTITLES */
.prov-subtitle {
color: #ff9900;
font-size: 1.15rem;
font-weight: 700;
margin: 1.6rem 0 0.35rem;
line-height: 1.25;
}
/* PARAGRAPHS (TIGHTENED) */
.prov-text {
margin: 0 0 0.7rem;
line-height: 1.2;
color: rgba(233,238,247,.88);
}
/* CLEAR FLOAT */
.prov-clear {
clear: both;
}
/* PILOT */
.prov-pilot {
margin-top: 2.2rem;
text-align: center;
font-size: 0.95rem;
color: rgba(233,238,247,.7);
}
/* MOBILE */
@media (max-width: 900px) {
.prov-image {
float: none;
width: 100%;
max-width: 100%;
margin: 0 0 1.8rem;
}
}
/* =========================================
PROVENANCE — HOW IT WORKS
========================================= */
.prov-how{
padding: 100px 0;
background: #0b0d12;
}
.prov-how-wrap{
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.prov-how-head{
text-align: center;
margin-bottom: 34px;
}
.prov-how-title{
margin: 0 0 14px;
font-size: clamp(2rem, 3.6vw, 3rem);
color: #ffffff;
}
.prov-how-sub{
margin: 0 auto;
max-width: 920px;
color: rgba(233,238,247,.90);
line-height: 1.7;
font-size: 1.08rem;
}
.prov-how-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 26px;
}
.prov-step{
border-radius: 18px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
padding: 18px 18px 16px;
box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.prov-step-num{
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
min-width: 54px;
padding: 0 10px;
border-radius: 999px;
background: rgba(255,153,0,.12);
border: 1px solid rgba(255,153,0,.22);
color: #ff9900;
font-weight: 700;
letter-spacing: .6px;
margin-bottom: 12px;
}
.prov-step-title{
margin: 0 0 8px;
color: #ff9900;
font-size: 1.05rem;
}
.prov-step-text{
margin: 0;
color: rgba(233,238,247,.88);
line-height: 1.65;
font-size: 0.98rem;
}
.prov-how-callout{
margin-top: 26px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255,153,0,.08);
border: 1px solid rgba(255,153,0,.20);
color: rgba(255,255,255,.92);
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
text-align: center;
}
.prov-how-callout span{
color: rgba(233,238,247,.88);
}
/* Responsive */
@media (max-width: 980px){
.prov-how-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
.prov-how{ padding: 80px 0; }
.prov-how-grid{ grid-template-columns: 1fr; }
}
/* ===== Provenance Hero (stable two-column) ===== */
.prov-wrap{
max-width: 1200px;
margin: 0 auto;
padding: 80px 18px 70px;
}
/* Title on top with adequate space */
.prov-title{
font-size: 4.5rem;
color: #ff9900;
line-height: 1.05;
margin: 0 0 34px;
text-align: center;
}
/* Invisible two-column "table" */
.prov-cols{
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 56px;
align-items: center;
}
.prov-subtitle{
font-size: 1.5rem;
color: #ff9900;
line-height: 1.12;
margin: 0 0 18px;
}
.prov-p{
margin: 0 0 14px;
line-height: 1.65;
color: rgba(233,238,247,.88);
font-size: 1.05rem;
}
/* Buttons stay under text */
.prov-cta{
margin-top: 18px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* Right column (phone) */
.prov-right{
display: flex;
justify-content: center;
}
.prov-phone{
width: min(560px, 46vw); /* BIGGER */
max-width: 600px;
height: auto;
display: block;
}
@media (max-width: 900px){
#prov-hero .prov-phone-anim{
animation: none !important;
}
}
@media (max-width: 900px){
/* Keep both elements in one formatting context and move image first */
#prov-hero .prov-cols{
display: flex !important;
flex-direction: column !important;
}
#prov-hero .prov-right{
order: -1; /* put image BEFORE text on mobile */
align-self: flex-end; /* keeps it on the right edge */
margin-bottom: 10px;
}
/* Now that it's before the paragraphs, we can float it to wrap text */
#prov-hero .prov-phone{
float: right;
width: min(46vw, 190px);
height: auto;
margin: 0 0 12px 14px;
border-radius: 16px;
display: block;
}
/* Make sure text wraps and later content clears properly */
#prov-hero .prov-left{
order: 0;
}
#prov-hero .prov-left::after{
content: "";
display: table;
clear: both;
}
/* Optional: if the animation causes weird positioning on float */
#prov-hero .prov-phone-anim{
animation: none !important;
}
}
/* MOBILE: enable text-wrap around a phone that lives inside .prov-left */
@media (max-width: 900px){
/* Keep your normal layout (no flex re-order hacks) */
#prov-hero .prov-cols{
display: block !important;
}
/* Show the mobile inline phone and float it so text wraps */
#prov-hero .prov-phone--mobile{
display: block;
float: right;
width: min(46vw, 190px);
height: auto;
margin: 0.2rem 0 0.9rem 1rem;
border-radius: 16px;
}
/* Hide the desktop/right-column phone on mobile (prevents duplicate images) */
#prov-hero .prov-right{
display: none !important;
}
/* Clear float so buttons/layout don't collide */
#prov-hero .prov-left::after{
content: "";
display: table;
clear: both;
}
/* Optional: stop wobble animation on mobile if desired */
#prov-hero .prov-phone-anim{
animation: none !important;
}
}
/* Desktop: hide the mobile inline phone */
@media (min-width: 901px){
#prov-hero .prov-phone--mobile{
display: none !important;
}
}
/* ===== Slow elegant rotation ===== */
.prov-phone-anim{
transform-origin: 50% 60%;
animation: phoneRotateSlow 8s ease-in-out infinite;
will-change: transform;
}
@keyframes phoneRotateSlow{
0% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
100% { transform: rotate(-3deg); }
}
.prov-hero{
min-height: 100dvh; /* full screen */
display: flex;
align-items: center; /* vertical centering */
}
.prov-wrap{
max-width: 1300px;
margin: 0 auto;
padding: 80px 24px;
width: 100%;
}
.prov-phone{
width: min(620px, 46vw); /* BIG */
max-width: 680px;
height: auto;
}
/* ===== Modern Glows (Hero Background) ===== */
.prov-hero{
position: relative;
overflow: hidden; /* hides glow edges cleanly */
}
/* Big soft blobs behind the section */
.prov-hero::before,
.prov-hero::after{
content: "";
position: absolute;
inset: auto;
width: 820px;
height: 820px;
border-radius: 999px;
background: radial-gradient(circle,
rgba(255,153,0,.34) 0%,
rgba(255,153,0,.12) 35%,
rgba(255,153,0,0) 70%
);
filter: blur(18px);
opacity: .9;
z-index: 0;
pointer-events: none;
}
/* left/top glow */
.prov-hero::before{
top: -180px;
left: -140px;
}
/* right/bottom glow */
.prov-hero::after{
bottom: -220px;
right: -160px;
opacity: .75;
}
/* Ensure real content sits above glows */
.prov-wrap{
position: relative;
z-index: 1;
}
/* =========================================================
Provenance Participants (Stable two-column + glow)
========================================================= */
.prov-participants{
padding: 110px 0 120px;
}
/* keep your global wrap but ensure good max width */
.prov-participants .wrap{
max-width: 1200px;
margin: 0 auto;
padding: 0 18px;
}
/* Title */
.pp-title{
text-align: center;
color: #ff9900;
font-size: clamp(2.6rem, 3.8vw, 3.6rem);
line-height: 1.08;
margin: 0 0 14px;
text-shadow: 0 0 18px rgba(255,153,0,.18);
}
/* Lead */
.pp-lead{
max-width: 900px;
margin: 0 auto 38px;
text-align: center;
line-height: 1.7;
color: rgba(233,238,247,.86);
}
/* Invisible two-column boxes */
.pp-grid{
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 56px;
align-items: start;
}
/* Left content */
.pp-subtitle{
color: #ff9900;
font-size: clamp(1.2rem, 2.0vw, 1.6rem);
line-height: 1.15;
margin: 24px 0 10px;
}
.pp-text{
margin: 0 0 14px;
line-height: 1.7;
color: rgba(233,238,247,.86);
font-size: 1.08rem;
max-width: 820px;
}
/* Right image card */
.pp-right{
position: sticky;
justify-content: center;
}
.pp-image{
width: min(520px, 40vw);
max-width: 560px;
height: auto;
display: block;
border-radius: 16px;
}
/* Extra soft border for “clean UI card” feel */
.pp-image{
box-shadow:
0 18px 46px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.06);
}
/* Mobile: stack */
@media (max-width: 980px){
.prov-participants{
padding: 80px 0 90px;
}
.pp-grid{
grid-template-columns: 1fr;
gap: 22px;
}
.pp-right{
position: relative;
top: auto;
}
.pp-image{
width: min(520px, 92vw);
}
}
/* STOP floating inside Provenance Participants section */
#provenance-participants img,
#provenance-participants .verify-card,
#provenance-participants .prov-verify,
#provenance-participants .verification-card,
#provenance-participants .ndg-media,
#provenance-participants .pp-right{
float: none !important;
clear: none !important;
}
/* =========================
Provenance preview phone overlay (LEFT + looped push-out)
========================= */
.provenance-preview,
#provenance-preview {
position: relative;
overflow: hidden;
}
.prov-phone-overlay {
position: absolute;
inset: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: clamp(24px, 6vw, 96px);
z-index: 3;
}
/* Base phone style */
.prov-phone-zoom {
width: min(380px, 70vw);
max-width: 420px;
height: auto;
transform-origin: left center;
will-change: transform, opacity, filter;
/* 🔁 Single looping animation controls everything */
animation: ndgPhoneCycle 22s cubic-bezier(.25,.9,.25,1) infinite;
}
/* 🔁 Full lifecycle animation */
@keyframes ndgPhoneCycle {
/* Hidden (offstage) */
0% {
transform: translate(-28px, 16px) scale(0.05);
opacity: 0;
filter: blur(3px);
}
/* Push out */
12% {
opacity: 1;
filter: blur(0);
}
22% {
transform: translate(0, 0) scale(1);
opacity: 1;
filter: blur(0);
}
/* Stay visible */
50% {
transform: translate(0, 0) scale(1);
opacity: 1;
filter: blur(0);
}
/* Slow retreat */
70% {
transform: translate(-18px, 12px) scale(0.9);
opacity: 0.6;
filter: blur(1px);
}
/* Fully gone */
100% {
transform: translate(-28px, 16px) scale(0.05);
opacity: 0;
filter: blur(3px);
}
}
/* Mobile tweaks */
@media (max-width: 560px) {
.prov-phone-overlay {
padding-left: 16px;
align-items: flex-start;
padding-top: 18px;
}
.prov-phone-zoom {
width: min(320px, 78vw);
max-width: 340px;
}
}
/* =========================
End of Provenance preview phone overlay (LEFT + push-out)
========================= */
/* ==========================================================================
NDG BUY MODAL — COMPLETE THEME (black/brown/yellow, responsive, accessible)
Targets: #ndgBuyModal + .ndg-modal-card (keeps everything isolated)
========================================================================== */
/* ---- Overlay container (the modal itself) ---- */
#ndgBuyModal {
/* Hidden by default (aria-hidden controls visibility) */
display: none;
position: fixed;
inset: 0;
z-index: 999999;
/* Dim but not "page disappears" */
background: rgba(0, 0, 0, 0.58);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
/* Center modal card */
place-items: center;
padding: 12px;
/* Prevent accidental selection */
-webkit-user-select: none;
user-select: none;
}
/* Show when opened */
#ndgBuyModal[aria-hidden="false"] {
display: grid;
}
/* Optional: prevent scroll when modal open (toggle via JS if you want) */
html.ndg-modal-open,
body.ndg-modal-open {
overflow: hidden;
}
/* ---- Modal card ---- */
#ndgBuyModal .ndg-modal-card {
-webkit-user-select: text;
user-select: text;
width: min(460px, 100%);
max-height: min(86vh, 760px);
overflow: auto;
border-radius: 22px;
/* Black/brown base */
background: radial-gradient(120% 100% at 50% 0%,
rgba(46, 30, 16, 0.96) 0%,
rgba(20, 14, 10, 0.98) 55%,
rgba(12, 10, 10, 0.99) 100%
);
/* Warm border + glow */
border: 1.8px solid rgba(255, 153, 0, 0.45);
box-shadow:
0 14px 70px rgba(0, 0, 0, 0.60),
0 0 0 1px rgba(255, 153, 0, 0.15) inset,
0 0 28px rgba(255, 153, 0, 0.18);
padding: 26px 22px 18px;
position: relative;
color: rgba(255, 255, 255, 0.92);
}
/* Nice scrollbar for the card */
#ndgBuyModal .ndg-modal-card::-webkit-scrollbar {
width: 10px;
}
#ndgBuyModal .ndg-modal-card::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.06);
border-radius: 999px;
}
#ndgBuyModal .ndg-modal-card::-webkit-scrollbar-thumb {
background: rgba(255, 153, 0, 0.25);
border-radius: 999px;
}
#ndgBuyModal .ndg-modal-card::-webkit-scrollbar-thumb:hover {
background: rgba(255, 153, 0, 0.25);
}
/* ---- Close button ---- */
#ndgBuyModal .ndg-modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border-radius: 12px;
border: 1px solid rgba(255, 153, 0, 0.35);
background: rgba(0, 0, 0, 0.25);
color: rgba(255, 255, 255, 0.92);
font-size: 22px;
line-height: 1;
cursor: pointer;
}
#ndgBuyModal .ndg-modal-close:hover {
background: rgba(138, 138, 138, 0.12);
border-color: rgba(255, 153, 0, 0.45);
}
#ndgBuyModal .ndg-modal-close:focus-visible {
outline: 3px solid rgba(555, 153, 0, 0.55);
outline-offset: 2px;
}
/* ---- Headings / text ---- */
#ndgBuyModal .ndg-modal-title {
margin: 6px 0 10px;
font-size: 26px;
font-weight: 800;
letter-spacing: 0.2px;
text-align: center;
/* subtle warm highlight */
color: rgba(255, 255, 255, 0.96);
text-shadow: 0 2px 18px rgba(255, 153, 0, 0.16);
}
#ndgBuyModal .ndg-modal-sub {
margin: 0 0 18px;
text-align: center;
font-size: 13.5px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.45);
}
/* Small section label / separators */
#ndgBuyModal .ndg-section {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 153, 0, 0.18);
}
/* ---- Form layout ---- */
#ndgBuyModal form {
margin: 0;
}
#ndgBuyModal label {
display: block;
margin: 10px 0 6px;
font-weight: 700;
font-size: 12.8px;
letter-spacing: 0.2px;
color: rgba(255, 153, 0, 0.95);
}
#ndgBuyModal .ndg-or {
text-align: center;
margin: 10px 0 8px;
font-weight: 800;
font-size: 12.5px;
color: rgba(255, 153, 0, 0.85);
}
/* Inputs */
#ndgBuyModal input[type="text"],
#ndgBuyModal input[type="number"],
#ndgBuyModal input[type="tel"],
#ndgBuyModal input[type="email"],
#ndgBuyModal input {
width: 100%;
box-sizing: border-box;
border-radius: 14px;
border: 1.6px solid rgba(255, 153, 0, 0.18);
background: rgba(0, 0, 0, 0.28);
color: rgba(255, 255, 255, 0.92);
padding: 12px 12px;
font-size: 14px;
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
#ndgBuyModal input::placeholder {
color: rgba(255, 255, 255, 0.45);
}
#ndgBuyModal input:focus {
outline: none;
border-color: rgba(255, 153, 0, 0.60);
box-shadow: 0 0 0 4px rgba(255, 153, 0, 0.18);
background: rgba(0, 0, 0, 0.34);
}
#ndgBuyModal input:disabled {
opacity: 0.65;
cursor: not-allowed;
}
/* ---- Readout row: "NDG tokens: X Cost: Y USD" ---- */
#ndgBuyModal .ndg-readout {
margin: 14px 0 8px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255, 153, 0, 0.18);
background: rgba(255, 255, 255, 0.06);
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 13px;
font-weight: 700;
color: rgba(255, 255, 255, 0.90);
}
#ndgBuyModal .ndg-readout strong {
color: rgba(255, 153, 0, 0.95);
}
/* If your HTML doesn't have .ndg-readout, this will still style a "tokens/cost" line */
#ndgBuyModal :is(p, div, span)[id*="Tokens"],
#ndgBuyModal :is(p, div, span)[id*="Cost"] {
font-weight: 700;
}
/* ---- Bonus section ---- */
#ndgBuyModal .ndg-bonus-title {
margin-top: 10px;
font-size: 12.5px;
font-weight: 800;
text-align: center;
color: rgba(255, 255, 255, 0.80);
}
#ndgBuyModal .ndg-bonus-grid {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
#ndgBuyModal .ndg-bonus-card {
border-radius: 14px;
padding: 10px 10px;
background: rgba(0, 0, 0, 0.24);
border: 1px solid rgba(255, 153, 0, 0.16);
text-align: center;
}
#ndgBuyModal .ndg-bonus-card .days {
font-size: 12px;
font-weight: 800;
color: rgba(255, 153, 0, 0.90);
margin-bottom: 4px;
}
#ndgBuyModal .ndg-bonus-card .value {
font-size: 13px;
font-weight: 800;
color: rgba(255, 255, 255, 0.92);
}
/* Small footnote text */
#ndgBuyModal .ndg-footnote {
margin: 10px 0 0;
font-size: 11.8px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.62);
text-align: center;
}
/* ---- Wallet buttons ---- */
#ndgBuyModal .ndg-wallet-title {
margin: 14px 0 8px;
font-weight: 800;
font-size: 13px;
color: rgba(255, 255, 255, 0.82);
}
#ndgBuyModal .ndg-wallet-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#ndgBuyModal button {
font-family: inherit;
}
#ndgBuyModal .ndg-wallet-btn {
width: 100%;
border-radius: 14px;
padding: 10px 10px;
border: 1px solid rgba(255, 153, 0, 0.18);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.90);
font-weight: 800;
cursor: pointer;
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
#ndgBuyModal .ndg-wallet-btn:hover {
background: rgba(255, 153, 0, 0.10);
border-color: rgba(255, 153, 0, 0.40);
transform: translateY(-1px);
}
#ndgBuyModal .ndg-wallet-btn:active {
transform: translateY(0px);
}
#ndgBuyModal .ndg-wallet-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ---- Primary CTA button ---- */
#ndgBuyModal .ndg-buy-btn {
width: 100%;
margin-top: 16px;
padding: 14px 14px;
border: none;
border-radius: 16px;
background: linear-gradient(90deg, rgba(255, 153, 0, 1), rgba(255, 214, 102, 1));
color: #141420;
font-weight: 900;
letter-spacing: 0.2px;
font-size: 15px;
box-shadow: 0 0 22px rgba(255, 153, 0, 0.30);
cursor: pointer;
}
#ndgBuyModal .ndg-buy-btn:hover {
filter: brightness(1.03);
}
#ndgBuyModal .ndg-buy-btn:disabled {
opacity: 0.70;
cursor: not-allowed;
box-shadow: none;
}
/* ---- Status line under CTA ---- */
#ndgBuyModal #ndgBuyStatus,
#ndgBuyModal .ndg-status {
margin-top: 8px;
text-align: center;
font-size: 11.8px;
color: rgba(255, 153, 0, 0.92);
font-weight: 800;
}
/* ---- Mobile sizing ---- */
@media (max-width: 480px) {
#ndgBuyModal {
padding: 10px;
}
#ndgBuyModal .ndg-modal-card {
padding: 22px 18px 16px;
border-radius: 20px;
}
#ndgBuyModal .ndg-bonus-grid {
grid-template-columns: 1fr;
}
#ndgBuyModal .ndg-wallet-grid {
grid-template-columns: 1fr;
}
}
.ndg-footer-bottom{
display:flex;
align-items:center;
justify-content: space-between; /* ✅ left + right */
gap: 14px;
width: 100%;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.ndg-footer-bottom .footer-copy-blue{
margin: 0; /* ✅ removes default spacing */
text-align: right; /* ✅ keeps it neat on the right */
flex: 0 1 auto; /* ✅ do NOT let it push layout weirdly */
}
.ndg-footer-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 8px 14px;
border-radius: 999px;
background:#ff9900;
color:#111;
font-weight:800;
font-size:13px;
text-decoration:none;
white-space: nowrap; /* ✅ keeps button compact */
}
.ndg-footer-bottom { text-align: left; }
@media (max-width: 520px){
.ndg-footer-bottom{
flex-wrap: wrap;
}
.ndg-footer-bottom .footer-copy-blue{
text-align: left;
width: 100%;
}
}
/* ============================================
ROTATING HEADLINES - Hero Section
============================================ */
.rotating-headlines {
position: relative;
min-height: 200px; /* Increased for larger font */
margin-bottom: 20px;
}
.rotating-headlines .headline {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
margin: 0;
/* FONT SIZE - 6rem as requested */
font-size: 6rem;
font-weight: bold;
line-height: 1.2;
/* TWO-TONE COLOR - Half White, Half Orange */
background: linear-gradient(to right,
#ffffff 0%, /* White start */
#ffffff 50%, /* White until middle */
#ff9900 50%, /* Orange from middle */
#ff9900 100% /* Orange to end */
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.rotating-headlines .headline.active {
opacity: 1;
position: relative; /* First headline stays in flow */
}
/* Navigation Dots */
.headline-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 25px;
}
.headline-dots .dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.headline-dots .dot.active {
background-color: #ff9900; /* Orange - match your brand */
transform: scale(1.2);
}
.headline-dots .dot:hover {
background-color: rgba(255, 255, 255, 0.6);
transform: scale(1.1);
}
/* Pause rotation on hover */
.rotating-headlines:hover .headline {
animation-play-state: paused;
}
/* Mobile responsive */
@media (max-width: 1200px) {
.rotating-headlines {
min-height: 150px;
}
.rotating-headlines .headline {
font-size: 4rem; /* Smaller on tablets */
}
}
@media (max-width: 768px) {
.rotating-headlines {
min-height: 100px;
}
.rotating-headlines .headline {
font-size: 2.5rem; /* Even smaller on phones */
}
.headline-dots .dot {
width: 10px;
height: 10px;
}
}
@media (max-width: 480px) {
.rotating-headlines .headline {
font-size: 1.8rem; /* Very small phones */
}
}
/* Comparison Table Styling */
.comparison-table {
width: 100%;
margin: 30px 0;
border-collapse: collapse;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
overflow: hidden;
}
.comparison-table thead tr {
background: #ff9900;
}
.comparison-table th {
padding: 20px;
text-align: left;
color: #ffffff;
font-size: 1.2rem;
font-weight: bold;
}
.comparison-table td {
padding: 18px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #cccccc;
font-size: 1.1rem;
}
.comparison-table tbody tr:hover {
background: rgba(255, 153, 0, 0.1);
transition: background 0.3s ease;
}
.comparison-table strong {
color: #ffffff;
font-weight: 600;
}
/* Content Blocks - Better Spacing */
.content-block {
background: rgba(255, 255, 255, 0.03);
padding: 50px;
border-radius: 15px;
border: 1px solid rgba(255, 153, 0, 0.2);
}
.content-block {
padding: 25px;
}
.comparison-table th,
.comparison-table td {
padding: 12px;
font-size: 1rem;
}
.content-block {
padding: 20px;
}
/* Stack table on very small screens */
.comparison-table {
font-size: 0.9rem;
}
.comparison-table th,
.comparison-table td {
padding: 10px 8px;
}
/* ============================================
SOCIAL LOGIN & PAYMENT METHODS SECTION
============================================ */
.social-login-section {
background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
padding: 120px 0; /* INCREASED from 80px to 120px */
}
.social-login-card {
background: rgba(255, 255, 255, 0.03);
padding: 120px 80px; /* DOUBLED from 60px to 120px and 80px */
border-radius: 20px;
border: 1px solid rgba(255, 153, 0, 0.2);
text-align: center; /* ADDED - Centers everything */
}
.social-intro {
font-size: 1.3rem;
color: #cccccc;
line-height: 1.8;
margin-bottom: 50px;
text-align: center; /* Already centered */
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Login Methods Container */
.login-methods-container,
.payment-methods-container {
margin-bottom: 60px;
text-align: center; /* ADDED */
}
.login-methods-container h3,
.payment-methods-container h3 {
font-size: 2rem;
color: #ff9900;
margin-bottom: 30px;
text-align: center; /* Already centered */
}
/* Login Icons Grid */
.login-icons-grid,
.payment-icons-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 25px;
max-width: 900px;
margin: 0 auto; /* Already centered */
text-align: center; /* ADDED */
}
/* Individual Login Card */
.login-icon-card,
.payment-icon-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 25px 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
border: 2px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
text-align: center; /* ADDED */
}
.login-icon-card:hover,
.payment-icon-card:hover {
background: rgba(255, 153, 0, 0.1);
border-color: #ff9900;
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(255, 153, 0, 0.3);
}
/* Icon Circle */
.login-icon,
.payment-icon {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 15px;
margin-left: auto; /* ADDED */
margin-right: auto; /* ADDED */
transition: all 0.3s ease;
}
/* Specific Icon Colors - UNCHANGED */
.google-icon {
background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
color: #ffffff;
}
.apple-icon {
background: linear-gradient(135deg, #555555 0%, #000000 100%);
color: #ffffff;
}
.telegram-icon {
background: linear-gradient(135deg, #0088cc 0%, #229ed9 100%);
color: #ffffff;
}
.email-icon {
background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
color: #ffffff;
}
.facebook-icon {
background: linear-gradient(135deg, #1877f2 0%, #4267b2 100%);
color: #ffffff;
}
.fingerprint-icon {
background: linear-gradient(135deg, #ff9900 0%, #ffaa00 100%);
color: #ffffff;
}
.gpay-icon {
background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
color: #ffffff;
}
.applepay-icon {
background: linear-gradient(135deg, #000000 0%, #333333 100%);
color: #ffffff;
}
.card-icon {
background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
color: #ffffff;
}
.paypal-icon {
background: linear-gradient(135deg, #0070ba 0%, #1f8ce6 100%);
color: #ffffff;
}
.crypto-icon {
background: linear-gradient(135deg, #f7931a 0%, #ff9900 100%);
color: #ffffff;
}
.bank-icon {
background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
color: #ffffff;
}
/* Icon Label */
.login-label,
.payment-label {
font-size: 1.1rem;
color: #ffffff;
font-weight: 600;
text-align: center; /* Already centered */
}
/* What Happens Box */
.what-happens-box {
margin: 60px auto; /* CHANGED - Added auto for centering */
padding: 60px; /* DOUBLED from 40px */
background: rgba(255, 153, 0, 0.05);
border-radius: 15px;
border-left: 5px solid #ff9900;
max-width: 900px; /* ADDED - Constrains width */
text-align: center; /* ADDED */
}
.what-happens-box h3 {
font-size: 2rem;
color: #ff9900;
margin-bottom: 25px;
text-align: center; /* ADDED */
}
.process-steps {
list-style: none;
counter-reset: step;
padding-left: 0;
text-align: left; /* ADDED - Keep steps left-aligned for readability */
max-width: 700px;
margin: 0 auto; /* ADDED - Center the list itself */
}
.process-steps li {
counter-increment: step;
margin-bottom: 25px;
padding-left: 60px;
position: relative;
font-size: 1.2rem;
color: #cccccc;
line-height: 1.8;
}
.process-steps li::before {
content: counter(step);
position: absolute;
left: 0;
top: 0;
background: #ff9900;
color: #ffffff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.3rem;
}
.process-steps li strong {
color: #ffffff;
}
/* CTA Box */
.cta-box {
text-align: center; /* Already centered */
margin-top: 50px;
padding: 60px; /* DOUBLED from 40px */
background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
border-radius: 15px;
}
.cta-text {
font-size: 1.4rem;
color: #ffffff;
margin-bottom: 25px;
line-height: 1.6;
text-align: center; /* ADDED */
}
.btn-join-presale {
display: inline-block;
padding: 18px 45px;
font-size: 1.3rem;
font-weight: bold;
background: #ffffff;
color: #ff9900;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.btn-join-presale:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
background: #fff5e6;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.social-login-section {
padding: 80px 0; /* Reduced for mobile */
}
.social-login-card {
padding: 60px 25px; /* Reduced for mobile */
}
.login-icons-grid,
.payment-icons-grid {
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.login-icon,
.payment-icon {
width: 55px;
height: 55px;
font-size: 1.5rem;
}
.login-label,
.payment-label {
font-size: 0.95rem;
}
.what-happens-box {
padding: 35px 25px; /* Reduced for mobile */
}
.process-steps li {
font-size: 1.1rem;
padding-left: 50px;
}
.cta-box {
padding: 40px 25px; /* Reduced for mobile */
}
}
@media (max-width: 480px) {
.social-login-card {
padding: 40px 20px; /* Further reduced */
}
.login-icons-grid,
.payment-icons-grid {
grid-template-columns: repeat(2, 1fr);
}
.cta-text {
font-size: 1.2rem;
}
.btn-join-presale {
padding: 15px 35px;
font-size: 1.1rem;
}
}
/* ============================================
TECHNOLOGY PARTNERS / POWERED BY SECTION
============================================ */
.partners-section {
background: linear-gradient(135deg, #0f0f1e 0%, #16213e 100%);
padding: 100px 0;
overflow: hidden;
}
.partners-title {
font-size: 3rem;
color: #ffffff;
text-align: center;
margin-bottom: 15px;
font-weight: bold;
}
.partners-subtitle {
font-size: 1.3rem;
color: #cccccc;
text-align: center;
margin-bottom: 60px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* Logo Ticker Container */
.logo-ticker-container {
width: 100%;
overflow: hidden;
position: relative;
padding: 40px 0;
background: rgba(255, 255, 255, 0.02);
border-top: 1px solid rgba(255, 153, 0, 0.2);
border-bottom: 1px solid rgba(255, 153, 0, 0.2);
}
/* Gradient Fade on Edges */
.logo-ticker-container::before,
.logo-ticker-container::after {
content: '';
position: absolute;
top: 0;
width: 150px;
height: 100%;
z-index: 2;
pointer-events: none;
}
.logo-ticker-container::before {
left: 0;
background: linear-gradient(to right, #0f0f1e, transparent);
}
.logo-ticker-container::after {
right: 0;
background: linear-gradient(to left, #0f0f1e, transparent);
}
/* Ticker Track */
.logo-ticker {
display: flex;
align-items: center;
gap: 80px;
animation: scroll-logos 30s linear infinite;
width: max-content;
}
/* Pause on Hover */
.logo-ticker:hover {
animation-play-state: paused;
}
/* Logo Items */
.logo-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
width: 180px;
}
/* Partner Logos - FULL COLOR VERSION */
.partner-logo {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: none; /* REMOVED - Show original colors */
opacity: 0.8; /* Slightly dimmed for consistency */
transition: all 0.3s ease;
}
.logo-item:hover .partner-logo {
filter: none; /* Keep original colors */
opacity: 1; /* Full brightness on hover */
transform: scale(1.1);
}
/* Partners Note */
.partners-note {
text-align: center;
color: #999999;
font-size: 1.1rem;
margin-top: 50px;
font-style: italic;
}
/* Infinite Scroll Animation */
@keyframes scroll-logos {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%); /* Moves exactly half (duplicate set) */
}
}
/* Mobile Responsive */
@media (max-width: 768px) {
.partners-title {
font-size: 2.2rem;
}
.partners-subtitle {
font-size: 1.1rem;
}
.logo-ticker {
gap: 50px;
animation-duration: 20s; /* Faster on mobile */
}
.logo-item {
height: 60px;
width: 140px;
}
.logo-ticker-container::before,
.logo-ticker-container::after {
width: 80px;
}
}
@media (max-width: 480px) {
.partners-section {
padding: 60px 0;
}
.logo-ticker {
gap: 40px;
}
.logo-item {
height: 50px;
width: 120px;
}
}
/* ============================================
PRESALE MODAL - Complete Styles
============================================ */
.presale-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.presale-modal:not([hidden]) {
opacity: 1;
visibility: visible;
}
.presale-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
cursor: pointer;
}
.presale-modal-content {
position: relative;
background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
border-radius: 20px;
max-width: 600px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
padding: 40px;
box-shadow: 0 25px 80px rgba(255, 153, 0, 0.3);
border: 1px solid rgba(255, 153, 0, 0.2);
animation: slideUp 0.3s ease;
z-index: 1;
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.presale-modal-close {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.1);
border: none;
color: #ffffff;
font-size: 2rem;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.presale-modal-close:hover {
background: rgba(255, 153, 0, 0.2);
transform: rotate(90deg);
}
.presale-header {
text-align: center;
margin-bottom: 30px;
}
.presale-title {
font-size: 2.5rem;
color: #ffffff;
margin-bottom: 10px;
font-weight: bold;
}
.presale-subtitle {
font-size: 1.1rem;
color: #cccccc;
margin-bottom: 25px;
}
.price-tier-banner {
background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
}
.tier-info {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
font-size: 0.95rem;
color: #ffffff;
flex-wrap: wrap;
gap: 10px;
}
.tier-info strong {
font-size: 1.1rem;
}
.countdown-label {
display: block;
text-align: center;
color: #ffffff;
font-size: 0.9rem;
margin-bottom: 10px;
opacity: 0.9;
}
.countdown-timer {
display: flex;
justify-content: center;
gap: 15px;
}
.time-unit {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 10px 15px;
min-width: 60px;
}
.time-value {
font-size: 1.8rem;
font-weight: bold;
color: #ffffff;
line-height: 1;
}
.time-label {
font-size: 0.75rem;
color: #ffffff;
opacity: 0.8;
margin-top: 5px;
text-transform: uppercase;
}
.presale-step {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.step-title {
font-size: 1.5rem;
color: #ff9900;
margin-bottom: 10px;
}
.step-description {
color: #cccccc;
margin-bottom: 25px;
}
.wallet-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.wallet-btn {
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.wallet-btn:hover {
background: rgba(255, 153, 0, 0.1);
border-color: #ff9900;
transform: translateY(-3px);
}
.wallet-icon {
width: 50px;
height: 50px;
object-fit: contain;
}
.wallet-name {
color: #ffffff;
font-size: 1rem;
font-weight: 600;
}
.wallet-connected {
background: rgba(76, 175, 80, 0.1);
border: 1px solid rgba(76, 175, 80, 0.3);
border-radius: 10px;
padding: 15px;
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.wallet-status {
display: flex;
align-items: center;
gap: 8px;
}
.status-dot {
width: 10px;
height: 10px;
background: #4caf50;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.status-text {
color: #4caf50;
font-weight: 600;
}
.wallet-address {
color: #ffffff;
font-family: monospace;
font-size: 0.9rem;
}
.btn-disconnect {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.btn-disconnect:hover {
background: rgba(244, 67, 54, 0.2);
border-color: #f44336;
}
.currency-selector {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 25px;
}
.currency-option input[type="radio"] {
display: none;
}
.currency-card {
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.currency-option input[type="radio"]:checked + .currency-card {
background: rgba(255, 153, 0, 0.2);
border-color: #ff9900;
}
.currency-card:hover {
border-color: #ff9900;
}
.currency-icon {
width: 35px;
height: 35px;
object-fit: contain;
}
.currency-name {
color: #ffffff;
font-weight: 600;
font-size: 0.95rem;
}
.amount-input-section {
margin-bottom: 20px;
}
.input-group {
margin-bottom: 15px;
}
.input-label {
display: block;
color: #cccccc;
font-size: 0.9rem;
margin-bottom: 8px;
}
.input-wrapper {
position: relative;
}
.amount-input {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 15px 80px 15px 15px;
color: #ffffff;
font-size: 1.3rem;
font-weight: 600;
transition: all 0.3s ease;
}
.amount-input:focus {
outline: none;
border-color: #ff9900;
background: rgba(255, 153, 0, 0.1);
}
.input-currency {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #ff9900;
font-weight: bold;
font-size: 1.1rem;
}
.input-hint {
font-size: 0.85rem;
color: #999999;
margin-top: 5px;
}
.conversion-arrow {
text-align: center;
color: #ff9900;
font-size: 1.5rem;
margin: 15px 0;
}
.receive-box {
background: rgba(255, 153, 0, 0.1);
border: 2px solid rgba(255, 153, 0, 0.3);
border-radius: 10px;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.receive-amount {
font-size: 2rem;
font-weight: bold;
color: #ff9900;
}
.receive-currency {
font-size: 1.2rem;
color: #ffffff;
font-weight: 600;
}
.quick-amounts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 25px;
}
.quick-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 10px;
color: #ffffff;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.quick-btn:hover {
background: rgba(255, 153, 0, 0.2);
border-color: #ff9900;
}
.purchase-summary {
background: rgba(255, 255, 255, 0.03);
border-radius: 10px;
padding: 15px;
margin-bottom: 25px;
}
.summary-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
color: #cccccc;
font-size: 0.95rem;
}
.summary-value {
color: #ffffff;
font-weight: 600;
}
.btn-purchase {
width: 100%;
background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
border: none;
border-radius: 12px;
padding: 18px;
color: #ffffff;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-purchase:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(255, 153, 0, 0.5);
}
.btn-purchase:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.processing-content,
.success-content,
.error-content {
text-align: center;
padding: 40px 20px;
}
.spinner-container {
margin-bottom: 30px;
}
.spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(255, 153, 0, 0.2);
border-top-color: #ff9900;
border-radius: 50%;
margin: 0 auto;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.processing-title,
.success-title,
.error-title {
font-size: 1.8rem;
color: #ffffff;
margin-bottom: 15px;
}
.processing-text,
.success-text,
.error-text {
color: #cccccc;
font-size: 1.1rem;
margin-bottom: 25px;
}
.processing-details {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 20px;
margin-top: 20px;
}
.processing-details p {
color: #cccccc;
margin: 8px 0;
}
.success-icon {
font-size: 4rem;
color: #4caf50;
margin-bottom: 20px;
}
.success-details {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 20px;
margin: 25px 0;
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.detail-row:last-child {
border-bottom: none;
}
.detail-label {
color: #999999;
font-size: 0.95rem;
}
.detail-value {
color: #ffffff;
font-weight: 600;
}
.detail-value.highlight {
color: #ff9900;
font-size: 1.1rem;
}
.tx-hash {
font-family: monospace;
font-size: 0.85rem;
word-break: break-all;
}
.success-actions {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.btn-bscscan,
.btn-buy-more {
flex: 1;
padding: 12px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-bscscan {
background: rgba(255, 153, 0, 0.2);
border: 1px solid #ff9900;
color: #ff9900;
text-decoration: none;
}
.btn-bscscan:hover {
background: rgba(255, 153, 0, 0.3);
}
.btn-buy-more {
background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
border: none;
color: #ffffff;
}
.btn-buy-more:hover {
transform: translateY(-2px);
}
.btn-close-success {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 12px 30px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-close-success:hover {
background: rgba(255, 255, 255, 0.1);
}
.error-icon {
font-size: 4rem;
color: #f44336;
margin-bottom: 20px;
}
.error-actions {
display: flex;
gap: 15px;
margin-top: 30px;
}
.btn-try-again,
.btn-cancel {
flex: 1;
padding: 12px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-try-again {
background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
border: none;
color: #ffffff;
}
.btn-try-again:hover {
transform: translateY(-2px);
}
.btn-cancel {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.btn-cancel:hover {
background: rgba(255, 255, 255, 0.1);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.presale-modal-content {
padding: 25px;
max-height: 95vh;
}
.presale-title {
font-size: 2rem;
}
.wallet-options {
grid-template-columns: 1fr;
}
.currency-selector {
grid-template-columns: 1fr;
}
.quick-amounts {
grid-template-columns: repeat(2, 1fr);
}
.countdown-timer {
gap: 8px;
}
.time-unit {
padding: 8px 10px;
min-width: 50px;
}
.time-value {
font-size: 1.4rem;
}
.success-actions {
flex-direction: column;
}
.error-actions {
flex-direction: column;
}
}
@media (max-width: 480px) {
.presale-modal-content {
padding: 20px;
}
.presale-title {
font-size: 1.6rem;
}
.amount-input {
font-size: 1.1rem;
}
.receive-amount {
font-size: 1.5rem;
}
}
/* =========================
Referral System Styles
========================= */
.referral-box {
background: linear-gradient(135deg, #1a1f3a 0%, #0f1120 100%);
border: 2px solid var(--accent);
border-radius: 12px;
padding: 24px;
margin: 20px 0;
text-align: center;
}
.referral-box h3 {
color: #ffffff;
font-size: 1.4rem;
margin: 0 0 10px 0;
}
.referral-box p {
color: var(--muted);
margin: 0 0 15px 0;
}
.referral-link-container {
display: flex;
gap: 10px;
margin: 15px 0;
}
.referral-link-container input {
flex: 1;
padding: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #fff;
font-family: monospace;
font-size: 0.9rem;
}
.referral-link-container input:focus {
outline: none;
border-color: var(--accent);
}
.referral-link-container button {
padding: 12px 24px;
background: var(--accent);
border: none;
border-radius: 8px;
color: #000;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.referral-link-container button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 153, 0, 0.4);
}
.referral-link-container button:active {
transform: translateY(0);
}
.referral-stats {
color: var(--muted);
font-size: 0.9em;
margin-top: 10px;
opacity: 0.8;
}
.referral-banner {
background: linear-gradient(90deg, #ff9900 0%, #ffbb33 100%);
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
text-align: center;
color: #000;
font-weight: bold;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
.referral-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.bonus-tag {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.9em;
}
@media (max-width: 768px) {
.referral-link-container {
flex-direction: column;
}
.referral-link-container button {
width: 100%;
}
.referral-badge {
font-size: 0.9rem;
}
}
/* ... other styles ... */
/* === Referral Link Section Styles === */
#presale-modal .referral-box {
background: #181818;
border-radius: 10px;
border: 1px solid #ffc10755;
padding: 18px 14px;
margin-bottom: 24px;
text-align: left;
}
#presale-modal .btn.btn-small {
font-size: 15px;
padding: 6px 12px;
background: #ff9900;
color: #fff;
border: none;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
transition: opacity 0.14s;
}
#presale-modal .btn.btn-small:hover {
opacity: 0.8;
}
/* =========================
Wallet Error Styles
========================= */
.wallet-error {
background: rgba(255, 0, 0, 0.1);
border: 1px solid #ff4444;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
color: #ff6666;
font-size: 0.9em;
display: none;
}
.wallet-error::before {
content: '⚠️ ';
margin-right: 8px;
}
/* =========================
Contact/Copyright/Build with care centered
========================= */
.footer-bottom-blue {
text-align: center;
padding: 20px;
font-size: 11px;
color: #ff9900;
}
.footer-bottom-blue p {
margin: 0;
}
/* Container for rotating headlines */
.rotating-headlines {
position: relative;
min-height: 150px; /* Adjust based on your text height */
width: 100%;
overflow: hidden;
}
/* Individual headlines - default state (off-screen right) */
.rotating-headlines .headline {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
margin: 0;
opacity: 0;
transform: translateX(100%);
transition: all 1.5s ease-in-out;
}
/* Active headline - visible and centered */
.rotating-headlines .headline.active {
opacity: 1;
transform: translateX(0);
}
/* Exiting headline - slides out left */
.rotating-headlines .headline.exiting {
opacity: 0;
transform: translateX(-100%);
}
/* === BLOG SECTION === */
.section-blog-preview {
background: linear-gradient(180deg, #1a1a22 0%, #161722 100%);
padding: 58px 0 20px 0;
width: 100%;
color: #eee;
}
.blog-preview-heading {
text-align: center;
color: #ff9900;
font-size: 2.2rem;
font-weight: 900;
letter-spacing: 0.01em;
margin-bottom: 6px;
}
.blog-preview-subheading {
text-align: center;
color: #fff;
font-size: 1.1rem;
opacity: .82;
margin-bottom: 34px;
font-weight: 500;
}
/* FIXED GRID - 2 rows × 3 columns */
.blog-preview-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px 20px;
width: 100%;
max-width: 1400px;
margin: 0 auto 34px auto;
padding: 0 20px;
}
.blog-preview-card {
display: flex;
flex-direction: column;
background: #181e3a;
border-radius: 16px;
box-shadow: 0 1px 12px rgba(32,32,112,0.09);
padding: 22px 24px 20px 24px;
color: #fff;
opacity: 0.95;
border: 2px solid transparent;
text-decoration: none;
transition: border-color .13s, box-shadow .18s, background .14s;
min-width: 0;
min-height: 220px;
}
.blog-preview-card .card-title {
font-size: 1.13rem;
font-weight: bold;
color: #ff9900;
margin-bottom: 8px;
letter-spacing: 0.01em;
line-height: 1.4;
}
.blog-preview-card .card-meta {
font-size: 0.92rem;
color: #f3e7ce;
opacity: 0.78;
font-weight: 500;
margin-bottom: 13px;
}
.blog-preview-card .card-desc {
font-size: 1.02rem;
color: #fff;
opacity: 0.88;
font-weight: 500;
line-height: 1.5;
flex-grow: 1;
}
.blog-preview-card.highlight {
background: #151932;
border-color: #ff9900;
box-shadow: 0 3px 18px #ff99004a;
}
.blog-preview-card:hover,
.blog-preview-card:focus {
border-color: #ffaa55;
background: #25254a;
transform: translateY(-2px);
}
.blog-preview-card:active {
border-color: #ba6b00;
}
.blog-preview-grid a {
outline: none;
}
.blog-preview-actions {
text-align: center;
margin-top: 26px;
}
.blog-btn-viewall {
background: #ff9900;
color: #191b18;
padding: 12px 36px;
font-weight: 900;
border-radius: 19px;
font-size: 1.1rem;
text-decoration: none;
letter-spacing: 0.01em;
box-shadow: 0 3px 17px rgba(255,153,0,0.12);
transition: background .12s, color .12s, transform .2s;
display: inline-block;
}
.blog-btn-viewall:hover,
.blog-btn-viewall:focus {
background: #ffaa2b;
color: #191700;
transform: scale(1.05);
}
/* Responsive - Tablets (2 columns) */
@media (max-width: 1200px) {
.blog-preview-grid {
grid-template-columns: repeat(2, 1fr);
max-width: 900px;
}
}
/* Responsive - Mobile (1 column) */
@media (max-width: 768px) {
.blog-preview-grid {
grid-template-columns: 1fr;
gap: 18px;
padding: 0 15px;
}
.blog-preview-heading {
font-size: 1.8rem;
}
.blog-preview-subheading {
font-size: 1rem;
}
.blog-preview-card {
min-height: auto;
}
}
/* === GASLESS HERO SECTION === */
.gasless-hero-section {
position: relative;
background-image: url('../images/Gasless1.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 120vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
animation: subtleRotate 20s ease-in-out infinite;
}
/* Very subtle rotation animation */
@keyframes subtleRotate {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(0.5deg);
}
75% {
transform: rotate(-0.5deg);
}
}
.gasless-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.gasless-hero-content {
position: relative;
z-index: 2;
max-width: 900px;
padding: 40px 20px;
text-align: center;
color: #fff;
}
/* Small header - gray-white */
.gasless-title-white {
font-size: 5.5rem;
font-weight: 900;
color: rgba(235, 238, 246, 0.92);
margin-bottom: 16px;
letter-spacing: 0.01em;
}
/* Main title - orange, same size as provenance */
.gasless-title-orange {
font-size: clamp(5.5rem, 4vw, 5.5rem);
font-weight: 900;
color: #ff9900;
margin-bottom: 24px;
letter-spacing: 0.01em;
line-height: 1.2;
}
/* Description - matches provenance lead */
.gasless-description {
font-size: 1.25rem;
color: rgba(255,255,255,0.92);
line-height: 1.7;
margin-bottom: 32px;
font-weight: 500;
}
.gasless-learn-btn {
background: #ff9900;
color: #191b18;
padding: 14px 40px;
font-weight: 900;
border-radius: 19px;
font-size: 1.15rem;
text-decoration: none;
letter-spacing: 0.01em;
box-shadow: 0 3px 17px rgba(255,153,0,0.12);
transition: background .12s, color .12s, transform .2s;
display: inline-block;
}
.gasless-learn-btn:hover,
.gasless-learn-btn:focus {
background: #ffaa2b;
color: #191700;
transform: scale(1.05);
}
/* Responsive - Mobile */
@media (max-width: 768px) {
.gasless-hero-section {
min-height: 80vh;
}
.gasless-title-white {
font-size: 1rem;
}
.gasless-title-orange {
font-size: 2rem;
}
.gasless-description {
font-size: 1.1rem;
}
}
/* === MOBILE NAVBAR FIX === */
@media (max-width: 900px) {
/* Hide desktop nav links on mobile */
.nav-links {
display: none !important;
}
/* Header: Logo, NetDAG, Menu in one row */
.header-inner {
display: flex;
flex-direction: row !important;
justify-content: space-between;
align-items: center;
padding: 12px 40px 12px 16px !important; /* MORE right padding */
flex-wrap: nowrap !important;
max-width: 100%;
box-sizing: border-box;
}
/* Brand (logo + text) */
.brand {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.brand-logo {
height: 45px !important;
width: auto;
}
.brand-text {
font-size: 2.5rem !important;
white-space: nowrap;
}
/* Nav right: hamburger */
.nav-right {
display: flex;
align-items: center;
flex-shrink: 0;
padding-right: 15px; /* Pull away from edge */
}
/* Hamburger menu - fully visible */
.menu-toggle {
display: flex !important;
flex-direction: column;
gap: 5px;
padding: 10px;
background: transparent;
border: none;
cursor: pointer;
}
.menu-toggle span,
.burger-line {
display: block;
width: 28px;
height: 3px;
background: #ff9900;
border-radius: 2px;
}
/* Hide desktop CTA buttons */
.header-ctas {
display: none !important;
}
}
/* ========================================
FIX PROVENANCE BUTTON STYLE
======================================== */
.btn-provenance-learn {
display: inline-block;
padding: 12px 32px;
font-size: 1rem;
font-weight: 600;
color: #000000 !important; /* Black text */
background: #ff9900 !important; /* Solid orange background */
border: none !important;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-provenance-learn:hover {
background: #ffb84d !important; /* Lighter orange on hover */
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 153, 0, 0.4);
}
/* Presale Tagline - tiny orange text */
.presale-tagline {
font-size: 2.0rem; /* ✅ Changed from 0.75rem to 1rem */
color: #ff9900;
text-align: center;
margin-top: 80px; /* ✅ Pushed down from 8px to 24px */
font-weight: 600;
opacity: 0.2;
}
/* ========================================
SMOOTH ROTATING HEADLINES
======================================== */
.rotating-headlines {
position: relative;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.rotating-headlines .headline {
position: absolute;
width: 100%;
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
pointer-events: none;
}
.rotating-headlines .headline.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Smooth fade out */
.rotating-headlines .headline.fade-out {
opacity: 0;
transform: translateY(-20px);
}
/* Headline dots styling */
.headline-dots {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.headline-dots .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 153, 0, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.headline-dots .dot.active {
background: #ff9900;
transform: scale(1.2);
}
/* Push Guardian "Learn more" button down */
.guardian-preview .btn-bonding-curve-learn {
margin-top: 200px; /* 👈 CHANGE THIS NUMBER */
}
/* ========================================
PUSH GUARDIAN TEXT DOWN
======================================== */
.guardian-preview .hero-overlay {
padding-top: 80px; /* 👈 ADJUST THIS to move text down more/less */
}
/* Mobile - less padding */
@media (max-width: 900px) {
.guardian-preview .hero-overlay {
padding-top: 80px; /* 👈 ADJUST THIS for mobile */
}
}/* ========================================
PUSH GUARDIAN TEXT DOWN - STRONGER
======================================== */
.guardian-preview .section-inner.hero-overlay {
margin-top: 160px !important; /* 👈 ADJUST THIS to move text down */
padding-top: 0 !important;
}
.guardian-preview .guardian-title {
margin-top: 140px; /* 👈 Extra push for title specifically */
}
/* Mobile */
@media (max-width: 900px) {
.guardian-preview .section-inner.hero-overlay {
margin-top: 75px !important;
}
.guardian-preview .guardian-title {
margin-top: 50px;
}
}
/* ========================================
PROVENANCE HEADER - COLOR SPLIT FIX
======================================== */
.prov-title {
font-size: 5.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
text-align: center;
}
/* Line 1: White */
.prov-title-line1 {
color: #ffffff;
display: block;
}
/* Line 2: Orange */
.prov-title-line2 {
color: #ff9900;
display: block;
}
/* Mobile: 2.5rem standard */
@media (max-width: 900px) {
.prov-title {
font-size: 2.5rem;
}
}
/* Extra small mobile */
@media (max-width: 480px) {
.prov-title {
font-size: 2rem;
}
}
.prov-sub-accent {
color: #ff9900;
font-weight: 600;
}
/* ========================================
PROVENANCE BAND DECOR
======================================== */
.prov-img img {
border: 2px solid #0066ff;
box-shadow:
0 0 20px rgba(0, 102, 255, 0.6),
0 0 40px rgba(0, 102, 255, 0.4);
animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px rgba(0, 102, 255, 0.6); }
50% { box-shadow: 0 0 40px rgba(0, 102, 255, 1); }
}
.prov-img {
position: relative;
}
.prov-img::after {
content: 'ON-CHAIN';
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(135deg, #ff9900, #ff6600);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
box-shadow: 0 2px 10px rgba(255, 153, 0, 0.5);
}
/* ========================================
BONDING CURVE PAGE - IMPROVEMENTS
======================================== */
/* Header color split */
.bc-title-line1 {
color: #ffffff;
display: block;
}
.bc-title-line2 {
color: #ff9900;
display: block;
}
/* Mobile header sizing */
@media (max-width: 900px) {
.bonding-curve-title {
font-size: 2.5rem !important;
}
}
/* Hero CTAs */
.bc-hero-cta {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
flex-wrap: wrap;
}
/* Benefits grid */
.bc-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.bc-benefit-card {
background: rgba(0, 102, 255, 0.1);
border: 1px solid rgba(0, 102, 255, 0.3);
border-radius: 12px;
padding: 2rem;
text-align: center;
}
.bc-benefit-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.bc-benefit-card h3 {
color: #ff9900;
margin-bottom: 1rem;
}
/* Comparison table */
.bc-comparison-table {
width: 100%;
border-collapse: collapse;
margin-top: 2rem;
}
.bc-comparison-table th,
.bc-comparison-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.bc-comparison-table .highlight-col {
background: rgba(255, 153, 0, 0.1);
font-weight: 600;
}
/* Scenario cards */
.bc-scenario-card {
background: rgba(0, 0, 0, 0.3);
border-left: 4px solid #ff9900;
padding: 1.5rem;
margin-bottom: 2rem;
border-radius: 8px;
}
.bc-scenario-card h3 {
color: #ff9900;
margin-bottom: 1rem;
}
/* DAG section layout */
.bc-dag-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
@media (max-width: 900px) {
.bc-dag-layout {
grid-template-columns: 1fr;
}
}
/* CTA box */
.bc-cta-box {
background: linear-gradient(135deg, rgba(0, 102, 255, 0.2), rgba(255, 153, 0, 0.2));
border: 2px solid #ff9900;
border-radius: 12px;
padding: 2rem;
text-align: center;
margin-top: 3rem;
}
.bc-cta-box h3 {
color: #ff9900;
margin-bottom: 1rem;
}
/* Final CTA */
.bc-final-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
flex-wrap: wrap;
}
.btn-large {
padding: 1rem 2rem;
font-size: 1.1rem;
}
/* Text utilities */
.text-center {
text-align: center;
}
.lead-text {
font-size: 1.2rem;
line-height: 1.8;
margin-bottom: 1.5rem;
}
/* Fix: footer banner is too tall on mobile */
@media (max-width: 900px){
.footer-banner{
height: auto !important;
min-height: 0 !important;
padding: 12px 0 !important;
}
.footer-banner-inner{
height: auto !important;
min-height: 0 !important;
/* This is usually the culprit */
padding: 15px 15px !important;
/* If it was flex-centering and creating vertical dead space */
display: block !important;
}
.banner-tagline{
margin: 0 !important;
line-height: 1.5 !important;
}
.btn-explore-vision{
margin-top: 12px !important;
}
}
@media (max-width: 900px){
/* Push the button down so it never overlaps text */
.footer-banner .btn-explore-vision{
display: inline-block;
margin-top: 16px !important; /* increase/decrease as you like */
position: static !important; /* cancels absolute/relative offsets */
}
/* Ensure the text block has normal flow spacing */
.footer-banner .banner-tagline{
margin-bottom: 0 !important;
}
}
/* iPAD starts from here */
/* TEMP DEBUG: disable touch capture from any element covering the screen */
@media (min-width: 768px) and (max-width: 1366px){
/* If something is sitting over the page, this will stop it blocking scroll */
*{
pointer-events: auto;
touch-action: pan-y !important;
}
/* But allow links/buttons to keep working */
a, button, input, textarea, select, label{
touch-action: manipulation !important;
}
/* Most common accidental overlays */
[style*="position: fixed"],
[style*="position: absolute"]{
pointer-events: none !important;
}
}
.section {
position: relative;
min-height: auto; /* was 120vh */
display: flex;
align-items: center;
}
/* Only the hero needs the tall viewport feel */
.section-hero{
min-height: 120vh;
}
/* =========================
NAV LINKS: no underline (keep hover glow)
Paste at END of css/styles.css
========================= */
/* Remove any underline (including inherited/global rules) */
.nav-links a,
.nav-links a:hover,
.nav-links a:focus,
.nav-links a:active{
text-decoration: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
background-image: none !important;
}
/* If a second underline is coming from pseudo-elements, kill them */
.nav-links a::before,
.nav-links a::after{
content: none !important;
display: none !important;
}
/* Keep your hover color + add a subtle glow */
.nav-links a:hover,
.nav-links a:focus{
color: var(--accent) !important;
text-shadow:
0 0 10px rgba(255,153,0,.28),
0 0 22px rgba(255,153,0,.18);
}
/* Realign center purchase-modal) */
/* FORCE-CENTER NetDAG Presale / Buy Modal (put at end of CSS) */
#ndgBuyModal,
.ndg-buy-modal,
.ndg-modal {
position: fixed !important;
inset: 0 !important;
display: none;
z-index: 9999;
}
#ndgBuyModal.is-open,
.ndg-buy-modal.is-open,
.ndg-modal.is-open {
display: block;
}
/* the overlay/backdrop must be a flex container */
#ndgBuyModal .ndg-modal-backdrop,
#ndgBuyModal .ndg-buy-backdrop,
#ndgBuyModal .modal-backdrop,
.ndg-buy-modal .ndg-modal-backdrop,
.ndg-modal .ndg-modal-backdrop {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 18px !important;
}
/* the actual card/panel */
#ndgBuyModal .ndg-modal-card,
#ndgBuyModal .ndg-buy-card,
#ndgBuyModal .modal-card,
.ndg-buy-modal .ndg-modal-card,
.ndg-modal .ndg-modal-card {
position: relative !important;
margin: 0 !important;
left: auto !important;
right: auto !important;
transform: none !important; /* prevent conflicting transforms */
width: min(520px, 94vw) !important;
max-width: 94vw !important;
}
/* Center Buy / Presale Modal */
#ndgBuyModal {
position: fixed;
inset: 0;
display: flex !important;
align-items: center;
justify-content: center;
z-index: 9999;
}
#ndgBuyModal .ndg-modal-card {
margin: 0 auto;
}
/* CENTER PRESALE MODAL */
.presale-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.presale-modal-content {
margin: auto;
}
/* End of Realign center purchase-modal) */
/* =========================
NetDAG Community Modal (GLOBAL)
========================= */
.ndg-community-modal{
position: fixed;
inset: 0;
display: none;
z-index: 9999;
}
.ndg-community-modal.is-open{ display:block; }
.ndg-community-backdrop{
position:absolute;
inset:0;
background: rgba(0,0,0,.65);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* true center */
.ndg-community-card{
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(520px, 92vw);
padding: 18px 18px 16px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: #0f0f14;
color: #fff;
box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.ndg-community-x{
position:absolute;
right:10px;
top:10px;
width:36px;
height:36px;
border-radius:10px;
border:1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.25);
color:#fff;
font-size:22px;
cursor:pointer;
}
.ndg-community-title{ margin: 4px 0 6px; font-size: 22px; }
.ndg-community-sub{ margin: 0 0 14px; font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.45; }
.ndg-community-actions{ display: grid; gap: 10px; margin-top: 12px; }
.ndg-community-btn{
display:flex; align-items:center; justify-content:center; gap:10px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: #fff;
text-decoration:none;
font-weight: 800;
}
.ndg-community-btn:hover{
border-color: rgba(255,153,0,.40);
background: rgba(255,153,0,.10);
}
.ndg-community-divider{ height:1px; background: rgba(255,255,255,.10); margin: 14px 0 12px; }
.ndg-community-foot{ margin: 0 0 12px; font-size: 12px; color: rgba(255,255,255,.75); }
.ndg-community-email{ color:#ff9900; text-decoration:none; }
.ndg-community-email:hover{ text-decoration: underline; }
.ndg-community-ok{
width:100%;
padding: 10px 12px;
border-radius: 12px;
border: none;
font-weight: 900;
cursor: pointer;
background: #ff9900;
color: #111;
}
/* =========================
FORCE CENTER — NetDAG Community Modal (override)
========================= */
#ndgCommunityModal{
position: fixed !important;
inset: 0 !important;
display: none;
z-index: 999999 !important;
}
#ndgCommunityModal.is-open{
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 18px !important;
}
#ndgCommunityModal .ndg-community-backdrop{
position: absolute !important;
inset: 0 !important;
background: rgba(0,0,0,.65) !important;
-webkit-backdrop-filter: blur(6px) !important;
backdrop-filter: blur(6px) !important;
}
#ndgCommunityModal .ndg-community-card{
position: relative !important;
right: auto !important;
left: auto !important;
top: auto !important;
bottom: auto !important;
margin: 0 !important;
transform: none !important;
width: min(520px, 92vw) !important;
max-height: calc(100vh - 36px) !important;
overflow: auto !important;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: #0f0f14;
color: #fff;
box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
/* ========================= */