/* ═══════════════════════════════════════════════════════════════ ecosystem-popups.css Add: to your after the other CSS links. ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────── CARD ACTION ROW Adds the "Deeper Dive" button row to all cards ───────────────────────────────────────────── */ .eco-card-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .eco-popup-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(240, 240, 240, 0.88); font-family: inherit; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; } .eco-popup-btn:hover { background: rgba(255, 210, 122, 0.12); border-color: rgba(255, 210, 122, 0.3); color: #ffd27a; transform: translateY(-1px); } .eco-popup-btn--digital { color: rgba(0, 229, 255, 0.9); border-color: rgba(0, 229, 255, 0.2); } .eco-popup-btn--digital:hover { background: rgba(0, 229, 255, 0.1); border-color: rgba(0, 229, 255, 0.4); color: #00e5ff; } /* ───────────────────────────────────────────── DIGITALVERSE CARD — Card 4 ───────────────────────────────────────────── */ .card-digital { position: relative; display: flex; flex-direction: column; padding: 32px; border: 1px solid rgba(0, 229, 255, 0.15); overflow: hidden; cursor: default; } .card-digital::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #00e5ff, #ff9f43, #00e5ff); background-size: 200% 100%; animation: digitalCardShimmer 3s linear infinite; } @keyframes digitalCardShimmer { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } /* Override card-video overlay for digital theme */ .card-digital .card-video-overlay { background: linear-gradient( 180deg, rgba(4, 13, 26, 0.15) 0%, rgba(4, 13, 26, 0.55) 50%, rgba(4, 13, 26, 0.92) 100% ); } .card-top-glow--cyan { background: linear-gradient(180deg, rgba(0, 229, 255, 0.08), transparent) !important; } /* Digital icon (emoji-based, no image) */ .project-icon--digital { background: rgba(0, 229, 255, 0.08) !important; border-color: rgba(0, 229, 255, 0.25) !important; display: flex; align-items: center; justify-content: center; } .project-icon--digital::before { background: conic-gradient( rgba(0, 229, 255, 0.55), rgba(255, 159, 67, 0.35), rgba(0, 229, 255, 0.55) ) !important; } .digital-icon-glyph { position: relative; z-index: 2; font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.5)); } /* Digital project link */ .project-link--digital { color: #00e5ff !important; } .project-link--digital:hover { color: #ffffff !important; } /* ───────────────────────────────────────────── POPUP BACKDROP ───────────────────────────────────────────── */ .eco-popup-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(4, 8, 16, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .eco-popup-backdrop.is-open { opacity: 1; visibility: visible; } /* ───────────────────────────────────────────── POPUP SHELL ───────────────────────────────────────────── */ .eco-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.96); z-index: 1200; width: min(680px, 94vw); max-height: 88vh; overflow-y: auto; overflow-x: hidden; background: linear-gradient(160deg, #0c1624 0%, #0a1220 100%); border: 1px solid rgba(255, 210, 122, 0.18); border-radius: 28px; box-shadow: 0 32px 64px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 210, 122, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05); opacity: 0; visibility: hidden; transition: opacity 0.32s ease, visibility 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); scrollbar-width: thin; scrollbar-color: rgba(255, 210, 122, 0.3) transparent; } .eco-popup::-webkit-scrollbar { width: 4px; } .eco-popup::-webkit-scrollbar-track { background: transparent; } .eco-popup::-webkit-scrollbar-thumb { background: rgba(255, 210, 122, 0.3); border-radius: 2px; } .eco-popup.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } /* DigitalVerse popup accent override */ .eco-popup--digital { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 32px 64px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 229, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* ─── Animated border ring ─── */ .eco-popup__border { position: absolute; inset: -1px; border-radius: 28px; pointer-events: none; overflow: hidden; z-index: 0; } .eco-popup__border::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient( from 180deg, transparent 0deg, rgba(255, 210, 122, 0.55) 90deg, rgba(238, 139, 54, 0.75) 145deg, rgba(84, 209, 255, 0.3) 215deg, transparent 290deg, transparent 360deg ); opacity: 0.85; animation: ecoPopupBorderSpin 8s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .eco-popup--digital .eco-popup__border::before { background: conic-gradient( from 180deg, transparent 0deg, rgba(0, 229, 255, 0.6) 90deg, rgba(255, 159, 67, 0.55) 145deg, rgba(0, 229, 255, 0.3) 215deg, transparent 290deg, transparent 360deg ); } @keyframes ecoPopupBorderSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ───────────────────────────────────────────── POPUP HEADER ───────────────────────────────────────────── */ .eco-popup__header { display: flex; align-items: flex-start; gap: 18px; padding: 28px 28px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); position: relative; z-index: 1; } .eco-popup__icon { width: 72px; height: 72px; border-radius: 18px; flex-shrink: 0; overflow: hidden; border: 1px solid rgba(255, 210, 122, 0.22); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 18px rgba(255, 210, 122, 0.10); background: rgba(255, 210, 122, 0.05); display: flex; align-items: center; justify-content: center; } .eco-popup__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; } .eco-popup__icon--digital { border-color: rgba(0, 229, 255, 0.3); background: rgba(0, 229, 255, 0.06); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 18px rgba(0, 229, 255, 0.12); } .eco-popup__title-wrap { flex: 1; min-width: 0; } .eco-popup__eyebrow { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #ffd27a; opacity: 0.85; margin-bottom: 4px; } .eco-popup__eyebrow--cyan { color: #00e5ff; } .eco-popup__title { font-size: 1.55rem; font-weight: 700; color: #ffffff; line-height: 1.15; margin: 0 0 4px; letter-spacing: -0.015em; } .eco-popup__subtitle { font-size: 0.88rem; color: rgba(200, 220, 240, 0.75); margin: 0; } .eco-popup__close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(240, 240, 240, 0.7); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .eco-popup__close:hover { background: rgba(255, 71, 87, 0.15); border-color: rgba(255, 71, 87, 0.3); color: #ff4757; transform: rotate(90deg); } /* ───────────────────────────────────────────── POPUP BODY ───────────────────────────────────────────── */ .eco-popup__body { padding: 24px 28px; position: relative; z-index: 1; } .eco-popup__body > p { font-size: 0.98rem; color: rgba(220, 235, 250, 0.88); line-height: 1.8; margin-bottom: 20px; } .eco-popup__section-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #ffd27a; margin: 24px 0 12px; opacity: 0.9; } .eco-popup--digital .eco-popup__section-title { color: #00e5ff; } .eco-popup__list { list-style: none; padding: 0; margin: 0 0 8px; } .eco-popup__list li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 0.92rem; color: rgba(210, 228, 248, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.05); line-height: 1.6; } .eco-popup__list li:last-child { border-bottom: none; } .eco-popup__list li::before { content: '›'; color: #ffd27a; flex-shrink: 0; font-size: 1rem; margin-top: 1px; } .eco-popup--digital .eco-popup__list li::before { color: #00e5ff; } /* ─── Universe grid (Ikeverse popup) ─── */ .eco-popup__universe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; } .eco-popup__universe { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 14px 16px; } .eco-popup__universe-icon { font-size: 1.4rem; display: block; margin-bottom: 6px; } .eco-popup__universe strong { display: block; font-size: 0.88rem; color: #fff; margin-bottom: 4px; } .eco-popup__universe p { font-size: 0.78rem; color: rgba(180, 200, 220, 0.75); line-height: 1.5; margin: 0; } /* ─── Protocol grid (DigitalVerse popup) ─── */ .eco-popup__protocol-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .eco-popup__protocol { display: flex; align-items: flex-start; gap: 14px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); } .eco-popup__protocol > span { font-size: 1.3rem; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 700; } .eco-popup__protocol strong { display: block; font-size: 0.88rem; margin-bottom: 2px; } .eco-popup__protocol p { font-size: 0.78rem; color: rgba(180, 200, 220, 0.75); line-height: 1.5; margin: 0; } .eco-popup__protocol--btc > span { background: rgba(247,147,26,0.12); color: #f7931a; } .eco-popup__protocol--eth > span { background: rgba(138,146,178,0.12); color: #8a92b2; } .eco-popup__protocol--xrp > span { background: rgba(37,170,225,0.12); color: #25aae1; } .eco-popup__protocol--flr > span { background: rgba(225,27,113,0.12); color: #e11b71; } .eco-popup__protocol--web3 > span { background: rgba(0,230,118,0.12); color: #00e676; } /* ─── NaluLF path callout ─── */ .eco-popup__nalulf-path { display: flex; align-items: flex-start; gap: 16px; margin-top: 24px; padding: 18px 20px; border-radius: 16px; background: rgba(255, 210, 122, 0.04); border: 1px solid rgba(255, 210, 122, 0.14); border-left: 3px solid rgba(255, 210, 122, 0.55); } .eco-popup__nalulf-path--digital { background: rgba(0, 229, 255, 0.03); border-color: rgba(0, 229, 255, 0.14); border-left-color: rgba(0, 229, 255, 0.55); } .eco-popup__nalulf-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; margin-top: 2px; } .eco-popup__nalulf-icon--cyan { filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4)); } .eco-popup__nalulf-path strong { display: block; font-size: 0.88rem; color: #ffd27a; margin-bottom: 8px; } .eco-popup__nalulf-path--digital strong { color: #00e5ff; } .eco-popup__nalulf-path p { font-size: 0.88rem; color: rgba(210, 228, 248, 0.82); line-height: 1.75; margin: 0; } .eco-popup__nalulf-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 0.82rem; font-weight: 700; color: #00e5ff; text-decoration: none; letter-spacing: 0.04em; transition: color 0.2s ease, gap 0.2s ease; } .eco-popup__nalulf-link:hover { color: #fff; gap: 10px; } /* ───────────────────────────────────────────── POPUP FOOTER ───────────────────────────────────────────── */ .eco-popup__footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 28px 28px; border-top: 1px solid rgba(255, 255, 255, 0.07); position: relative; z-index: 1; } .eco-popup__cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 12px; font-size: 0.85rem; font-weight: 700; text-decoration: none; letter-spacing: 0.04em; transition: all 0.25s ease; cursor: pointer; border: none; } .eco-popup__cta--primary { background: #ffd27a; color: #1a1206; } .eco-popup__cta--primary:hover { background: #fff; box-shadow: 0 0 22px rgba(255, 210, 122, 0.4); transform: translateY(-1px); color: #1a1206; } .eco-popup__cta--cyan { background: #00e5ff; color: #040d1a; } .eco-popup__cta--cyan:hover { background: #fff; box-shadow: 0 0 22px rgba(0, 229, 255, 0.4); transform: translateY(-1px); color: #040d1a; } .eco-popup__cta--ghost { background: transparent; color: rgba(220, 235, 250, 0.85); border: 1px solid rgba(255, 255, 255, 0.14); } .eco-popup__cta--ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; transform: translateY(-1px); } /* ───────────────────────────────────────────── NALULF DEDICATED SECTION (DigitalVerse popup) ───────────────────────────────────────────── */ .eco-popup__nalulf-section { margin-top: 24px; padding: 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(37,170,225,0.06), rgba(4,13,26,0.8)); border: 1px solid rgba(37,170,225,0.22); border-left: 3px solid rgba(37,170,225,0.65); } .eco-popup__nalulf-section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .eco-popup__nalulf-section-icon { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(37,170,225,0.3); box-shadow: 0 0 14px rgba(37,170,225,0.15); } .eco-popup__nalulf-section-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; } .eco-popup__nalulf-section-title { font-family: inherit; font-size: 1rem; font-weight: 700; color: #ffffff; margin: 0 0 3px; letter-spacing: -0.01em; } .eco-popup__nalulf-section-sub { font-size: 0.78rem; color: #25aae1; margin: 0; letter-spacing: 0.04em; } .eco-popup__nalulf-section-desc { font-size: 0.9rem; color: rgba(210,228,248,0.85); line-height: 1.75; margin-bottom: 14px; } /* NaluLF CTA button — XRPL blue */ .eco-popup__cta--nalulf { background: rgba(37,170,225,0.15); color: #25aae1; border: 1px solid rgba(37,170,225,0.4); display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; font-size: 0.85rem; font-weight: 700; text-decoration: none; letter-spacing: 0.04em; transition: all 0.25s ease; } .eco-popup__cta--nalulf:hover { background: rgba(37,170,225,0.25); color: #ffffff; border-color: rgba(37,170,225,0.7); box-shadow: 0 0 18px rgba(37,170,225,0.25); transform: translateY(-1px); } @media (max-width: 640px) { .eco-popup { width: 96vw; max-height: 92vh; border-radius: 22px; } .eco-popup__header { padding: 20px 18px 16px; gap: 14px; } .eco-popup__body { padding: 18px; } .eco-popup__footer { padding: 16px 18px 22px; } .eco-popup__icon { width: 56px; height: 56px; } .eco-popup__title { font-size: 1.25rem; } .eco-popup__universe-grid { grid-template-columns: 1fr; } .eco-popup__footer { flex-direction: column; align-items: stretch; } .eco-popup__cta { justify-content: center; } .eco-card-actions { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .eco-popup { transition: none !important; } .eco-popup__border::before { animation: none !important; } .card-digital::before { animation: none !important; } }