/* ============================================================
MoonValve Design Update v2 — ADDITIVE LAYER
Load LAST in views/layouts/main.ejs:
Nothing here removes existing rules; it overrides them.
Fonts: add to before this file:
(CSP: helmet needs fonts.googleapis.com in styleSrc and fonts.gstatic.com in fontSrc)
============================================================ */
:root {
--mv-bg: #08090c;
--mv-panel: #0b0d11;
--mv-panel-2: #101318;
--mv-line: rgba(255, 255, 255, .07);
--mv-line-2: rgba(255, 255, 255, .09);
--mv-text: #f4f6f8;
--mv-text-muted: #9aa4b1;
--mv-text-soft: #6b7480;
--mv-accent: #ff6b35;
--mv-accent-2: #ff8f5e;
--mv-xrpl: #4d8dff;
--mv-xrpl-soft: #7fb0ff;
--mv-sol: #9945ff;
--mv-sol-soft: #c79bff;
--mv-ok: #5cd68a;
--mv-warn: #fbbf24;
--mv-bad: #e05c5c;
--mv-mono: 'IBM Plex Mono', ui-monospace, monospace;
--mv-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mv-radius: 10px;
}
/* ---------- base ---------- */
body {
background: var(--mv-bg) !important;
color: var(--mv-text);
font-family: var(--mv-sans);
line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--mv-sans); }
.main-content { background: var(--mv-bg); }
@keyframes mvGrow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mvTick { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* ---------- navigation ---------- */
.nav {
background: linear-gradient(180deg, rgba(12, 14, 18, .97), rgba(10, 11, 14, .95));
border-bottom: 1px solid rgba(255, 107, 53, .16);
box-shadow: none;
padding: .7rem 1.4rem;
}
.logo { font-size: 1.05rem; gap: .6rem; }
.logo span {
background: none;
-webkit-text-fill-color: var(--mv-text);
color: var(--mv-text);
font-weight: 800;
font-stretch: 125%;
letter-spacing: -.01em;
text-transform: uppercase;
filter: none;
}
.logo-image { width: 34px; height: 34px; filter: none; }
.logo:hover { transform: none; filter: none; }
.nav-links { gap: .25rem; }
.nav-link {
font-family: var(--mv-mono);
font-size: .78rem;
font-weight: 600;
color: var(--mv-text-muted);
border-radius: 6px;
padding: .5rem .75rem;
}
.nav-link:hover { background: rgba(255, 255, 255, .04); color: var(--mv-text); }
.nav-link.active { background: rgba(255, 107, 53, .13); color: var(--mv-accent); }
.connect-btn {
background: rgba(255, 107, 53, .1);
border: 1px solid rgba(255, 107, 53, .5);
color: var(--mv-accent-2);
font-family: var(--mv-mono);
font-size: .74rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
border-radius: 6px;
padding: 0 1rem;
height: 44px;
line-height: 42px;
box-shadow: none;
max-width: none;
}
.connect-btn:hover { background: var(--mv-accent); color: #0a0a0a; transform: none; box-shadow: none; }
.connect-btn.profile { background: rgba(255, 255, 255, .03); border-color: var(--mv-line-2); color: var(--mv-text); }
.disconnect-btn {
background: none;
border: 1px solid var(--mv-line-2);
color: var(--mv-text-soft);
font-family: var(--mv-mono);
font-size: .72rem;
font-weight: 600;
border-radius: 6px;
height: 44px;
}
.wallet-info-panel { border-radius: 8px; border-color: var(--mv-line-2); }
.wallet-info-panel .wallet-mask,
.wallet-info-panel .wallet-balance { font-family: var(--mv-mono); }
.wallet-info-panel .wallet-balance { color: var(--mv-ok); }
.burger-line { background: var(--mv-accent); }
.mobile-menu-item { font-family: var(--mv-mono); font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; }
/* ---------- hero ---------- */
.hero {
margin-top: 0;
padding: clamp(30px, 5vw, 60px) clamp(18px, 4vw, 44px) clamp(24px, 3vw, 40px);
background:
radial-gradient(900px 420px at 8% -20%, rgba(255, 107, 53, .16), transparent 60%),
linear-gradient(180deg, #0b0c10, var(--mv-bg));
min-height: 0;
}
.hero::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
background-size: 22px 22px;
opacity: .55;
pointer-events: none;
}
.hero-container { max-width: 1400px; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.hero-left { position: relative; z-index: 2; }
.hero-title {
font-size: clamp(34px, 6.2vw, 62px);
line-height: .92;
font-weight: 900;
font-stretch: 125%;
letter-spacing: -.02em;
text-transform: uppercase;
margin-bottom: 1.1rem;
}
.title-highlight {
background: none;
-webkit-text-fill-color: var(--mv-accent);
color: var(--mv-accent);
filter: none;
}
.hero-subtitle { color: var(--mv-text-muted); font-size: clamp(14px, 1.2vw, 15px); max-width: 460px; margin-bottom: 1.5rem; text-wrap: pretty; }
/* USP grid → spec sheet */
.usp-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1px;
background: var(--mv-line);
border: 1px solid var(--mv-line);
border-radius: 8px;
overflow: hidden;
margin-bottom: 1.4rem;
}
.usp-item {
background: #0c0e12;
border: none;
border-radius: 0;
box-shadow: none;
padding: 12px 13px;
gap: .55rem;
}
.usp-item:hover { background: #0f1319; transform: none; border: none; box-shadow: none; }
.usp-text { font-family: var(--mv-mono); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #dfe4ea; }
.usp-icon { width: 16px; height: 16px; font-size: 13px; color: var(--mv-accent); }
/* CTAs */
.cta-primary, .cta-secondary {
font-family: var(--mv-mono);
font-size: .8rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
border-radius: 6px;
height: 48px;
padding: 0 1.4rem;
display: inline-flex;
align-items: center;
}
.cta-primary { background: var(--mv-accent); color: #0a0a0a; }
.cta-primary:hover { background: var(--mv-accent-2); color: #0a0a0a; transform: none; box-shadow: none; }
.cta-secondary { border: 1px solid rgba(255, 255, 255, .14); color: #dfe4ea; font-weight: 700; }
.cta-secondary:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
/* stats panel */
.stats-dashboard { background: linear-gradient(180deg, var(--mv-panel-2), var(--mv-panel)); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--mv-radius); padding: 0; box-shadow: none; }
.stats-dashboard::before { display: none; }
.stats-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--mv-line); margin: 0; text-align: left; }
.stats-title { font-family: var(--mv-mono); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8b95a3; margin: 0; }
.stats-subtitle { font-family: var(--mv-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mv-ok); }
.stats-grid { gap: 1px; background: rgba(255, 255, 255, .06); margin: 0; }
.stats-dashboard .stat-item { background: #0c0e12; border: none; border-radius: 0; box-shadow: none; padding: 16px 14px; text-align: center; }
.stats-dashboard .stat-item:hover { transform: none; border: none; box-shadow: none; }
.stats-dashboard .stat-number { font-family: var(--mv-mono); font-size: 1.6rem; font-weight: 700; color: var(--mv-text); text-shadow: none; }
.stats-grid .stat-number { height: auto; justify-content: flex-start; }
.stat-item:nth-child(2) .stat-number, .stat-carousel { color: var(--mv-accent); }
.stats-dashboard .stat-label { font-family: var(--mv-mono); font-size: .58rem; letter-spacing: .14em; color: var(--mv-text-soft); margin-top: .4rem; }
.trust-indicators { gap: .9rem; justify-content: flex-start; padding: 12px 14px; margin: 0; border-top: 1px solid var(--mv-line); }
.trust-item { font-family: var(--mv-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mv-text-soft); color: var(--mv-ok); }
.floating-elements { display: none; }
/* ---------- section headers ---------- */
.launches-section { background: var(--mv-bg); padding: clamp(26px, 3.5vw, 44px) clamp(14px, 4vw, 44px); }
.section-container { max-width: 1400px; }
.section-header { text-align: left !important; margin-bottom: 1.4rem; }
.launches-section .section-title, .section-title {
font-size: clamp(22px, 3vw, 34px);
font-weight: 900;
font-stretch: 125%;
letter-spacing: -.01em;
text-transform: uppercase;
color: var(--mv-text);
text-align: left !important;
margin-bottom: .4rem;
}
.section-subtitle { color: #8b95a3; font-size: .85rem; margin: 0; }
/* ---------- filters ---------- */
.search-filters { background: var(--mv-panel); border: 1px solid var(--mv-line); border-radius: var(--mv-radius); padding: 12px; box-shadow: none; }
.search-input, .status-dropdown {
background: #0f1217;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 8px;
height: 44px;
font-family: var(--mv-mono);
font-size: .78rem;
box-shadow: none;
}
.search-input:focus, .status-dropdown:focus { border-color: rgba(255, 107, 53, .55); box-shadow: none; }
.chain-tab, .filter-btn, .refresh-btn {
height: 44px;
border-radius: 6px;
font-family: var(--mv-mono);
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, .1);
background: none;
color: #8b95a3;
box-shadow: none;
}
.chain-tab:hover, .filter-btn:hover { color: var(--mv-text); border-color: rgba(255, 255, 255, .2); background: none; }
.chain-tab.active, .filter-btn.active { background: var(--mv-accent); border-color: transparent; color: #0a0a0a; box-shadow: none; }
.chain-tab[data-chain="xrpl"] { border-color: rgba(77, 141, 255, .35); color: var(--mv-xrpl-soft); }
.chain-tab[data-chain="solana"] { border-color: rgba(153, 69, 255, .35); color: var(--mv-sol-soft); }
.chain-tab[data-chain="xrpl"].active { background: var(--mv-xrpl); color: #05070c; box-shadow: none; }
.chain-tab[data-chain="solana"].active { background: var(--mv-sol); color: #05070c; box-shadow: none; }
.refresh-btn { background: rgba(255, 255, 255, .03); color: #dfe4ea; }
.refresh-btn:hover { background: rgba(255, 255, 255, .07); transform: none; box-shadow: none; }
.results-count { font-family: var(--mv-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mv-text-soft); }
/* ---------- launch cards ---------- */
.launches-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; max-width: none; align-items: stretch; }
.launch-card {
position: relative;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, var(--mv-panel-2), var(--mv-panel));
border: 1px solid rgba(255, 255, 255, .08);
border-radius: var(--mv-radius);
padding: 16px 16px 16px 19px;
box-shadow: none;
cursor: pointer;
overflow: hidden;
}
/* chain rail replaces the old top gradient line */
.launch-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
height: auto;
background: linear-gradient(180deg, var(--mv-accent), transparent);
}
.launch-card.card-chain-xrpl::before { background: linear-gradient(180deg, var(--mv-xrpl), transparent); }
.launch-card.card-chain-sol::before { background: linear-gradient(180deg, var(--mv-sol), transparent); }
.launch-card.status-completed::before { background: linear-gradient(180deg, var(--mv-ok), transparent); }
.launch-card.status-failed::before { background: linear-gradient(180deg, var(--mv-bad), transparent); }
.launch-card:hover { border-color: rgba(255, 255, 255, .18); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.launch-card.card-chain-xrpl:hover { border-color: rgba(77, 141, 255, .42); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.launch-card.card-chain-sol:hover { border-color: rgba(153, 69, 255, .42); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
/* badges */
.card-tag-row { margin-bottom: 14px; }
.card-tag-row .card-status,
.card-feature-tags .card-hardcap-badge,
.card-feature-tags .card-creator-badge,
.chain-badge {
font-family: var(--mv-mono);
font-size: .59rem;
font-weight: 700;
letter-spacing: .12em;
padding: 4px 8px;
border-radius: 4px;
animation: none;
}
.card-tag-row .card-status { background: none; border: 1px solid rgba(255, 255, 255, .14); color: #9aa4b1; }
.card-tag-row .card-status.status-active { color: var(--mv-ok); border-color: rgba(92, 214, 138, .4); background: none; }
.card-tag-row .card-status.status-completed { color: var(--mv-ok); border-color: rgba(92, 214, 138, .35); background: none; }
.card-tag-row .card-status.status-failed { color: var(--mv-bad); border-color: rgba(224, 92, 92, .4); background: none; }
.card-tag-row .card-status.status-upcoming { color: var(--mv-xrpl-soft); border-color: rgba(77, 141, 255, .4); background: none; }
.card-tag-row .card-status.status-cap_reached { color: var(--mv-warn); border-color: rgba(251, 191, 36, .45); background: none; }
.card-feature-tags .card-hardcap-badge { background: rgba(251, 191, 36, .16) !important; color: var(--mv-warn) !important; box-shadow: none !important; }
.card-feature-tags .card-creator-badge { background: rgba(153, 69, 255, .18) !important; color: var(--mv-sol-soft) !important; box-shadow: none !important; animation: none; }
.chain-badge-xrpl { background: rgba(77, 141, 255, .14); color: var(--mv-xrpl-soft); border: none; }
.chain-badge-sol { background: rgba(153, 69, 255, .16); color: var(--mv-sol-soft); border: none; }
/* header */
.launch-card .card-header { gap: 11px; margin-bottom: 16px; }
.launch-card .card-logo { width: 40px; height: 40px; border-radius: 8px; box-shadow: none; border: 1px solid rgba(255, 255, 255, .08); background: #181c22; }
.launch-card .card-title h3 { font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; }
.launch-card .card-symbol {
background: none;
color: #8b95a3;
font-family: var(--mv-mono);
font-size: .68rem;
font-weight: 600;
letter-spacing: .1em;
padding-left: 5px;
padding-right: 5px;
border-radius: 0;
}
/* progress block: label + value on both sides */
.card-progress { margin: 0; }
.card-progress .progress-info { align-items: flex-end; margin-bottom: 8px; }
.card-progress .progress-raised,
.card-progress .progress-percentage {
font-family: var(--mv-mono);
font-size: 1.18rem;
font-weight: 700;
line-height: 1.2;
}
.card-progress .progress-percentage { color: var(--mv-accent-2); }
.progress-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); }
.progress-fill {
background: linear-gradient(90deg, #e85d20, var(--mv-accent-2));
animation: mvGrow 1.05s cubic-bezier(.2, .7, .2, 1) both;
box-shadow: none;
}
/* fill-rate heat: cold under 40 %, hot over 75 %, gold over cap */
.launch-card[data-fill-tier="cold"] .progress-fill { background: linear-gradient(90deg, #3f5a78, #5b7fa6); }
.launch-card[data-fill-tier="warm"] .progress-fill { background: linear-gradient(90deg, #b8642c, var(--mv-accent-2)); }
.launch-card[data-fill-tier="hot"] .progress-fill { background: linear-gradient(90deg, #e85d20, var(--mv-accent-2)); }
.launch-card[data-fill-tier="hot"] .progress-bar { box-shadow: 0 0 10px rgba(255, 107, 53, .45); }
.launch-card[data-fill-tier="over"] .progress-fill { background: linear-gradient(90deg, #e85d20, #ffb347); }
.launch-card[data-fill-tier="over"] .progress-bar { box-shadow: 0 0 14px rgba(255, 145, 60, .5); }
.launch-card.status-completed .progress-fill { background: var(--mv-ok); }
.launch-card.status-failed .progress-fill { background: var(--mv-bad); }
.launch-card.status-upcoming .progress-bar { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 6px, rgba(255, 255, 255, .03) 6px 12px); }
.progress-meta { font-family: var(--mv-mono); font-size: .68rem; color: #8b95a3; margin-top: .55rem; }
.progress-meta .goal { color: var(--mv-text-soft); }
.progress-meta .goal-status.remaining { color: #ffb37a; }
.progress-meta .goal-status.over { color: var(--mv-warn); }
/* stats row */
.card-stats {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, .06);
font-family: var(--mv-mono);
font-size: .68rem;
font-weight: 600;
color: #8b95a3;
}
.card-stats .card-time, .card-stats .time-remaining { color: #ffb37a; }
.launch-card.status-completed .card-stats .card-time,
.launch-card.status-failed .card-stats .card-time,
.launch-card.status-upcoming .card-stats .card-time { color: #8b95a3; }
.card-interest { display: inline-flex; align-items: center; gap: 8px; }
.card-interest-btn {
min-width: 24px; height: 24px;
padding: 0 8px;
border: 1px solid rgba(255, 107, 53, .45);
border-radius: 5px;
background: none;
color: var(--mv-accent-2);
font-family: var(--mv-mono);
font-size: .62rem;
font-weight: 700;
cursor: pointer;
}
.card-interest-btn.interested { background: rgba(255, 107, 53, .16); }
.card-interest-count { color: var(--mv-text); }
/* social / partner links → icon squares (needs the v2 launch-card.ejs) */
.card-section-sep { display: none; }
.launch-card .social-links {
display: flex;
flex-wrap: nowrap;
gap: 5px;
margin-top: 14px;
min-height: 30px;
overflow: hidden;
}
.launch-card .social-link {
width: 30px; height: 30px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--mv-line-2);
border-radius: 6px;
background: rgba(255, 255, 255, .02);
color: #8b95a3;
font-size: .68rem;
flex: none;
}
.launch-card .social-link:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: var(--mv-text); }
.launch-card .social-link .partner-icon { width: 13px; height: 13px; display: block; }
.launch-card .social-link .partner-icon img,
.launch-card .social-link .partner-icon svg { width: 13px; height: 13px; opacity: .8; }
.launch-card .social-link .link-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- pagination ---------- */
.pagination-btn, .pagination-number {
border: 1px solid rgba(255, 255, 255, .1);
background: none;
color: #9aa4b1;
border-radius: 6px;
font-family: var(--mv-mono);
font-size: .72rem;
font-weight: 700;
height: 44px;
min-width: 44px;
text-transform: uppercase;
letter-spacing: .06em;
}
.pagination-number.active { background: var(--mv-accent); border-color: transparent; color: #0a0a0a; box-shadow: none; }
.pagination-info { font-family: var(--mv-mono); font-size: .68rem; color: var(--mv-text-soft); text-align: center; margin-top: .8rem; }
/* ---------- banners / empty / loading ---------- */
.upcoming-banner-strip { background: var(--mv-panel); border: 1px solid var(--mv-line); border-radius: var(--mv-radius); }
.upcoming-banner-text, .upcoming-banner-link, .upcoming-banner-countdown { font-family: var(--mv-mono); font-size: .72rem; letter-spacing: .04em; }
.empty-state .empty-content h3 { font-weight: 900; font-stretch: 125%; text-transform: uppercase; }
.loading-placeholder p { font-family: var(--mv-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mv-text-soft); }
/* ---------- forms (create / profile) ---------- */
.form-section { background: linear-gradient(180deg, var(--mv-panel-2), var(--mv-panel)); border: 1px solid var(--mv-line); border-radius: var(--mv-radius); box-shadow: none; }
.form-input, .form-select, .form-textarea {
background: #0f1217;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 8px;
font-family: var(--mv-mono);
font-size: .82rem;
}
.form-label { font-family: var(--mv-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mv-text-soft); }
.btn, .btn-primary, .submit-btn {
font-family: var(--mv-mono);
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
border-radius: 6px;
min-height: 44px;
}
.btn-primary, .submit-btn { background: var(--mv-accent); color: #0a0a0a; border: none; }
.btn-primary:hover, .submit-btn:hover { background: var(--mv-accent-2); color: #0a0a0a; transform: none; }
.btn-secondary { background: none; border: 1px solid rgba(255, 255, 255, .12); color: #dfe4ea; }
/* ---------- footer ---------- */
.footer { background: #0a0b0e; border-top: 1px solid var(--mv-line); padding: clamp(28px, 3vw, 44px) clamp(18px, 4vw, 44px) 24px; margin-top: 3rem; }
.footer-container { max-width: 1400px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.footer-section h4 { font-family: var(--mv-mono); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mv-text-soft); margin-bottom: .8rem; }
.footer-section p { color: #8b95a3; font-size: .82rem; }
.footer-links a { color: #9aa4b1; font-size: .82rem; }
.footer-links a:hover { color: var(--mv-accent); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .06); font-family: var(--mv-mono); font-size: .68rem; color: #5d666f; }
.footer-bottom .heart { color: var(--mv-accent); }
/* ---------- mobile ---------- */
@media (max-width: 900px) {
.hero-container { grid-template-columns: 1fr; text-align: left; }
.hero-left { text-align: left; }
.usp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.nav { padding: .55rem .9rem; }
.logo span { font-size: 0; }
.launches-grid { grid-template-columns: 1fr; }
.launch-card { padding: 14px 14px 14px 17px; }
.card-stats { font-size: .66rem; }
.section-header { text-align: left !important; }
}
@media (max-width: 420px) {
.usp-grid { grid-template-columns: 1fr; }
.card-progress .progress-raised, .card-progress .progress-percentage { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
.progress-fill { animation: none !important; }
.launch-card:hover { transform: none; }
}
/* ---------- v2 card partial extras (needs apply/views/components/launch-card.ejs) ---------- */
.card-progress .progress-side { display: flex; flex-direction: column; gap: 4px; }
.card-progress .progress-side--right { align-items: flex-end; text-align: right; }
.card-progress .progress-label {
font-family: var(--mv-mono);
font-size: .58rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mv-text-soft);
}
.launch-card .social-link .partner-icon--text {
width: auto; height: auto;
font-family: var(--mv-mono);
font-size: .56rem;
font-weight: 700;
letter-spacing: .02em;
}
.card-interest-label { font-family: var(--mv-mono); font-size: .66rem; color: #8b95a3; }
/* ============================================================
ANHANG A — Expanded-Achse der Archivo-Variable-Font
(ohne font-stretch wirken die Headlines normal-breit)
============================================================ */
.hero-title { font-stretch: 118%; letter-spacing: -.015em; }
.section-title { font-stretch: 112%; letter-spacing: -.01em; }
.launch-card .card-title h3 { font-stretch: 106%; }
.cta-primary, .cta-secondary, .cta-button { font-stretch: 108%; }
/* ============================================================
ANHANG B — Legacy Override Layer
Neutralisiert die aelteren Regeln in theme.css / styles.css,
die per !important bzw. 4-Klassen-Selektor gewinnen.
============================================================ */
/* 1 — Regenbogen-Rahmen (theme.css: Gold→Violett Gradient-Ring) ---- */
.launch-card.hardcap,
.launch-card.creator-launch,
.launch-card.cap-reached,
.launch-card.hardcap.creator-launch {
border-color: rgba(255, 255, 255, .07) !important;
box-shadow: none !important;
}
.launch-card.hardcap.creator-launch::after {
display: none !important;
content: none !important;
}
/* Chain-Rail (3 px links) wieder erzwingen. theme.css faerbt
.hardcap.creator-launch::before gold->violett mit !important und
3 Klassen — deshalb brauchen die Regeln hier mehr Spezifitaet. */
.launch-card[data-blockchain-type][data-fill-tier]::before {
content: '' !important;
position: absolute !important;
left: 0 !important; top: 0 !important; bottom: 0 !important; right: auto !important;
width: 3px !important;
height: auto !important;
opacity: 1 !important;
border-radius: 0 !important;
background: linear-gradient(180deg, #ff6b35, transparent) !important;
}
.launch-card.card-chain-xrpl[data-blockchain-type][data-fill-tier]::before {
background: linear-gradient(180deg, #4d8dff, transparent) !important;
}
.launch-card.card-chain-sol[data-blockchain-type][data-fill-tier]::before {
background: linear-gradient(180deg, #9945ff, transparent) !important;
}
.launch-card.status-completed[data-blockchain-type][data-fill-tier]::before {
background: linear-gradient(180deg, #5cd68a, transparent) !important;
}
.launch-card.status-failed[data-blockchain-type][data-fill-tier]::before {
background: linear-gradient(180deg, #e05c5c, transparent) !important;
}
.launch-card.status-upcoming[data-blockchain-type][data-fill-tier]::before {
background: linear-gradient(180deg, #6b7480, transparent) !important;
}
.launch-card.card-chain-xrpl:hover {
border-color: rgba(77, 141, 255, .42) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, .45) !important;
}
.launch-card.card-chain-sol:hover {
border-color: rgba(153, 69, 255, .42) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, .45) !important;
}
/* 2 — Prozentwert: Fill-Rate-Farbcodierung statt Legacy-Rot -------- */
.launch-card .card-progress .progress-info .progress-percentage {
color: #ff8f5e !important;
}
.launch-card[data-fill-tier="cold"] .card-progress .progress-info .progress-percentage {
color: #7fb0ff !important;
}
.launch-card[data-fill-tier="warm"] .card-progress .progress-info .progress-percentage {
color: #ff8f5e !important;
}
.launch-card[data-fill-tier="hot"] .card-progress .progress-info .progress-percentage {
color: #ff6b35 !important;
}
.launch-card[data-fill-tier="over"] .card-progress .progress-info .progress-percentage {
color: #ffb347 !important;
}
.launch-card.status-completed .card-progress .progress-info .progress-percentage {
color: #5cd68a !important;
}
.launch-card.status-failed .card-progress .progress-info .progress-percentage {
color: #e05c5c !important;
}
.launch-card.status-upcoming .card-progress .progress-info .progress-percentage {
color: #6b7480 !important;
}
/* 3 — Fortschrittsbalken: Legacy-Shimmer + Dauer-Glow entfernen ---- */
.launch-card .progress-fill { box-shadow: none !important; }
.launch-card .progress-fill::after { display: none !important; content: none !important; }
.launch-card[data-fill-tier="hot"] .progress-bar { box-shadow: 0 0 10px rgba(255, 107, 53, .45) !important; }
.launch-card[data-fill-tier="over"] .progress-bar { box-shadow: 0 0 14px rgba(255, 145, 60, .5) !important; }
.launch-card.status-completed .progress-bar { box-shadow: 0 0 12px rgba(92, 214, 138, .35) !important; }
.launch-card.status-failed .progress-bar { box-shadow: none !important; }
/* Fuellstands-Linie oben auf der Karte (2 px). Breite kommt aus
--card-fill, das launch-card.ejs auf die Karte schreibt.
Ersetzt gleichzeitig den Gold/Violett-Ring von theme.css. */
.launch-card[data-blockchain-type][data-fill-tier]::after {
content: '' !important;
display: block !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
width: var(--card-fill, 0%) !important;
height: 2px !important;
padding: 0 !important;
border-radius: 0 !important;
mask: none !important;
-webkit-mask: none !important;
background: linear-gradient(90deg, #e85d20, #ff8f5e) !important;
z-index: 2;
}
.launch-card.card-chain-sol[data-blockchain-type][data-fill-tier]::after {
background: linear-gradient(90deg, #7a35d6, #c79bff) !important;
}
.launch-card[data-fill-tier="cold"][data-blockchain-type]::after {
background: linear-gradient(90deg, #3f5a78, #5b7fa6) !important;
}
.launch-card.status-completed[data-blockchain-type][data-fill-tier]::after,
.launch-card.status-failed[data-blockchain-type][data-fill-tier]::after,
.launch-card.status-upcoming[data-blockchain-type][data-fill-tier]::after {
display: none !important;
}
/* 4 — Suchfeld + Filterreihe: Legacy-Pillenradius ------------------ */
.search-input,
.search-box .search-input,
.search-container .search-input {
border-radius: 6px !important;
font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
letter-spacing: .02em;
}
.filter-btn,
.chain-filter-btn,
.status-filter select,
.filter-select {
border-radius: 5px !important;
font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
text-transform: uppercase;
letter-spacing: .1em;
}
/* 5 — Glow-Reste ---------------------------------------------------- */
.stat-number { text-shadow: none !important; }
.card-feature-tags .card-hardcap-badge,
.card-feature-tags .card-creator-badge { box-shadow: none !important; animation: none !important; }
/* ============================================================
ANHANG C — Feinschliff Richtung Vorlage
============================================================ */
/* Wortmarke: orange, auf Logo-Hoehe */
.logo span,
.logo-section h1 {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: #ff6b35 !important;
color: #ff6b35 !important;
font-family: var(--mv-sans) !important;
font-size: 1.5rem !important;
font-weight: 900 !important;
font-stretch: 112%;
letter-spacing: .01em;
line-height: 1;
text-transform: uppercase;
}
.logo img, .logo svg, .logo-section img, .logo-section svg { width: 32px; height: 32px; }
/* Hero-Eyebrow */
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
margin-bottom: 20px;
border: 1px solid rgba(255, 107, 53, .35);
border-radius: 4px;
font-family: var(--mv-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--mv-accent-2);
}
.hero-eyebrow-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--mv-accent);
animation: mvTick 1.6s infinite;
}
.hero-title { line-height: .92 !important; font-stretch: 125%; text-transform: uppercase; }
.hero-subtitle { max-width: 460px; }
/* Live-Punkt im Stats-Header */
.stats-live-dot {
display: inline-block;
width: 5px; height: 5px; border-radius: 50%;
margin-right: 6px;
background: var(--mv-ok);
animation: mvTick 1.6s infinite;
}
/* Chain-Split im Stats-Panel */
.stats-chains { display: flex; flex-direction: column; gap: 7px; padding: 14px; border-top: 1px solid rgba(255, 255, 255, .07); }
.stats-chain-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mv-mono); font-size: 11px; font-weight: 600; }
.stats-chain-name { color: #8b95a3; letter-spacing: .1em; text-transform: uppercase; }
.stats-chain-value { color: var(--mv-text); font-weight: 700; }
.stats-chain-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.stats-chain-fill { display: block; height: 100%; animation: mvGrow 1.05s cubic-bezier(.2, .7, .2, 1) both; }
.stats-chain-fill--xrpl { background: var(--mv-xrpl); }
.stats-chain-fill--sol { background: var(--mv-sol); }
.stats-chains + .trust-indicators { border-top: 1px solid rgba(255, 255, 255, .07); }
/* Suchfeld + Filterreihe: Terminal statt Pille */
.search-box,
.search-box:focus-within {
border-radius: 6px !important;
box-shadow: none !important;
background: #0b0d11 !important;
border: 1px solid rgba(255, 255, 255, .09) !important;
height: 46px;
padding: 0 14px !important;
}
.search-box:focus-within { border-color: rgba(255, 107, 53, .45) !important; }
.search-box .search-input { height: 44px; background: transparent !important; border: none !important; box-shadow: none !important; }
.search-filters { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
.search-controls { gap: 10px; }
.status-dropdown, .refresh-btn, .chain-tab {
height: 46px;
border-radius: 6px !important;
background: #0b0d11 !important;
border: 1px solid rgba(255, 255, 255, .09) !important;
color: #9aa4b1 !important;
font-family: var(--mv-mono) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-transform: uppercase;
box-shadow: none !important;
}
.chain-tabs { gap: 6px; background: transparent !important; border: none !important; padding: 0 !important; }
.chain-tab:hover, .status-dropdown:hover, .refresh-btn:hover { border-color: rgba(255, 255, 255, .2) !important; color: var(--mv-text) !important; }
.chain-tab.active { background: rgba(255, 107, 53, .14) !important; border-color: rgba(255, 107, 53, .5) !important; color: var(--mv-accent-2) !important; }
.chain-tab[data-chain="xrpl"].active { background: rgba(77, 141, 255, .14) !important; border-color: rgba(77, 141, 255, .5) !important; color: var(--mv-xrpl-soft) !important; }
.chain-tab[data-chain="solana"].active { background: rgba(153, 69, 255, .16) !important; border-color: rgba(153, 69, 255, .5) !important; color: var(--mv-sol-soft) !important; }
/* Karten-Hover etwas kerniger */
.launch-card:hover { border-color: rgba(255, 255, 255, .2) !important; }
.launch-card[data-fill-tier="hot"]:hover,
.launch-card[data-fill-tier="over"]:hover { border-color: rgba(255, 107, 53, .45) !important; }
/* ============================================================
ANHANG D — Over-Cap ("overpaid") + Mobile
============================================================ */
/* Over-Cap-Balken: Basis in Chain-Farbe, danach ein gold
schraffiertes Overflow-Segment (Breite aus --over-share,
gesetzt von launch-card.ejs). */
.launch-card .progress-bar.over-cap {
display: flex !important;
gap: 3px;
height: 6px;
background: none !important;
overflow: visible !important;
box-shadow: 0 0 14px rgba(251, 191, 36, .28) !important;
}
.launch-card .progress-bar.over-cap .progress-fill {
flex: 1 1 auto;
width: auto !important;
min-width: 0;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, #e85d20, #ff8f5e) !important;
}
.launch-card.card-chain-sol .progress-bar.over-cap .progress-fill {
background: linear-gradient(90deg, #9945ff, #c79bff) !important;
}
.launch-card.status-completed .progress-bar.over-cap .progress-fill {
background: linear-gradient(90deg, #3f9e63, #5cd68a) !important;
}
.launch-card .progress-bar.over-cap .progress-over {
flex: 0 0 var(--over-share, 20%);
height: 6px;
border-radius: 3px;
background: repeating-linear-gradient(45deg, #fbbf24 0 6px, rgba(251, 191, 36, .35) 6px 12px);
animation: mvGrow 1.05s cubic-bezier(.2, .7, .2, 1) both;
}
/* Prozentwert ueber 100 %: gold statt Cyan-Magenta-Gradient.
styles.css:4042 setzt color/-webkit-text-fill-color transparent
mit !important — daher hier alles ueberschreiben. */
.launch-card .card-progress.over-cap .progress-info .progress-percentage,
.launch-card .card-progress.moonshot .progress-info .progress-percentage,
.launch-card .card-progress.supernova .progress-info .progress-percentage {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
color: #fbbf24 !important;
-webkit-text-fill-color: #fbbf24 !important;
animation: none !important;
font-family: var(--mv-mono) !important;
font-size: 1.18rem !important;
font-weight: 700 !important;
}
/* Overflow-Betrag in der Meta-Zeile ebenfalls gold */
.launch-card .goal-status.over,
.launch-card .goal-status.over-cap,
.launch-card .progress-meta .over-amount { color: #fbbf24 !important; }
/* ---------- Mobile ---------- */
@media (max-width: 820px) {
.nav { padding: .55rem .9rem !important; }
.nav-container { gap: .5rem; }
.logo span, .logo-section h1 { font-size: 1.15rem !important; }
.logo img, .logo svg, .logo-image { width: 26px !important; height: 26px !important; }
.connect-btn-group, .nav-actions { flex: 0 0 auto; }
.connect-btn, .disconnect-btn {
width: auto !important;
min-width: 0 !important;
max-width: 150px;
padding: 0 12px !important;
height: 38px !important;
font-size: 10.5px !important;
white-space: nowrap;
}
/* Hero unter der fixen Nav freihalten */
.hero { padding-top: 92px !important; }
.hero-container { grid-template-columns: 1fr !important; }
.hero-title { font-size: clamp(30px, 10.5vw, 46px) !important; font-stretch: 112%; }
.hero-eyebrow { margin-bottom: 14px; font-size: 9.5px; }
.hero-subtitle { max-width: none; }
.cta-container { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cta-primary, .cta-secondary { width: 100%; text-align: center; }
/* Filterzeile umbrechen statt quetschen */
.search-controls { flex-direction: column; align-items: stretch; gap: 8px; }
.search-box { width: 100%; }
.controls-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chain-tabs { display: flex; width: 100%; }
.chain-tab { flex: 1 1 0; min-width: 0; padding: 0 6px !important; font-size: 9.5px !important; letter-spacing: .08em !important; }
.status-dropdown { flex: 1 1 140px; }
.refresh-btn { flex: 0 0 auto; padding: 0 14px !important; }
.results-count { text-align: left; }
.launches-grid { grid-template-columns: 1fr !important; }
.section-title { font-size: clamp(24px, 7.5vw, 34px) !important; }
.stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
.hero { padding-top: 84px !important; }
.card-progress .progress-raised,
.card-progress .progress-percentage { font-size: 1rem !important; }
.launch-card { padding: 14px 14px 14px 17px !important; }
}
/* ============================================================
ANHANG E — Hero-Raster: Stats-Panel endet auf USP-Hoehe
Die CTA-Buttons liegen jetzt als eigene Grid-Zeile unter der
linken Spalte (home.ejs), dadurch reicht die erste Zeile genau
bis zum unteren Rand der USP-Leiste — und das Panel mit ihr.
============================================================ */
.hero-container { align-items: stretch !important; row-gap: 22px; }
.hero-left { display: flex; flex-direction: column; align-items: flex-start; }
.hero-eyebrow { align-self: flex-start; width: -moz-fit-content; width: fit-content; flex: 0 0 auto; }
.hero-left .hero-title, .hero-left .hero-subtitle, .hero-left .usp-grid { align-self: stretch; }
.hero-left .usp-grid { margin-bottom: 0 !important; }
.hero-right { display: flex; }
.hero-right .stats-dashboard {
flex: 1 1 auto;
display: flex;
flex-direction: column;
height: auto;
}
.stats-dashboard .stats-grid { flex: 0 0 auto; }
.stats-dashboard .stats-chains { flex: 1 1 auto; justify-content: center; }
.hero-container > .cta-container {
grid-column: 1;
grid-row: 2;
display: flex;
gap: 12px;
margin: 0 !important;
}
@media (max-width: 820px) {
.hero-container > .cta-container { grid-column: 1; grid-row: auto; }
.hero-left { order: 1; }
.hero-container > .cta-container { order: 2; }
.hero-right { order: 3; margin-top: 22px; }
}
/* ============================================================
ANHANG F — Sektions-Panels
Ueberschrift, Filterzeile und Grid liegen nicht mehr flach auf
dem Background, sondern in einem Panel mit Trennlinien.
Gilt fuer Home, Upcoming und History (gleiche Klassen).
============================================================ */
.launches-section {
padding: clamp(26px, 4vw, 52px) clamp(14px, 3vw, 40px) clamp(20px, 3vw, 40px) !important;
background: none !important;
}
.launches-section .section-container {
max-width: 1600px;
margin: 0 auto;
padding: 0 !important;
background: linear-gradient(180deg, #0c0e12, #0a0b0e) !important;
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px rgba(0, 0, 0, .35);
overflow: hidden;
}
.launches-section .section-header {
text-align: left !important;
margin: 0 !important;
padding: 18px 20px 16px !important;
border-bottom: 1px solid rgba(255, 255, 255, .07);
background: rgba(255, 255, 255, .015);
}
.launches-section .section-title {
position: relative;
text-align: left !important;
margin: 0 !important;
padding-left: 14px;
font-size: clamp(22px, 2.4vw, 32px) !important;
}
.launches-section .section-title::before {
content: '';
position: absolute;
left: 0; top: .18em; bottom: .18em;
width: 4px;
border-radius: 2px;
background: linear-gradient(180deg, #ff6b35, rgba(255, 107, 53, .25));
}
.launches-section .section-subtitle {
text-align: left !important;
margin: 8px 0 0 14px !important;
max-width: 620px;
color: var(--mv-text-muted);
}
.launches-section .search-filters {
margin: 0 !important;
padding: 13px 20px !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
border-radius: 0 !important;
background: rgba(255, 255, 255, .022) !important;
box-shadow: none !important;
}
.launches-section .launches-grid { padding: 20px !important; margin: 0 !important; }
.launches-section .empty-state { margin: 0 !important; padding: 40px 20px !important; background: none !important; border: none !important; }
.launches-section .empty-state .empty-content { margin: 0 auto; }
.launches-section .empty-icon { color: var(--mv-text-soft); }
.launches-section .loading-placeholder { padding: 48px 20px !important; }
/* Pagination als Fussleiste unter dem Panel */
.pagination-container {
max-width: 1600px;
margin: 0 auto clamp(30px, 5vw, 60px) !important;
padding: 0 clamp(14px, 3vw, 40px);
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
background: #0b0d11;
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 10px;
}
@media (max-width: 820px) {
.launches-section { padding: 22px 12px 12px !important; }
.launches-section .section-header { padding: 15px 14px 13px !important; }
.launches-section .search-filters { padding: 12px 14px !important; }
.launches-section .launches-grid { padding: 14px !important; }
.launches-section .section-subtitle { margin-left: 14px !important; }
}
/* ============================================================
ANHANG G — Launch-Detail-Seite (/launches/:id)
Panel-Sprache wie auf Home: gerahmte Bloecke mit Kopfband,
Mono-Labels, kompakte Info-Zeilen, Over-Cap-Balken.
============================================================ */
.launch-detail-page, .launch-detail-container { background: none !important; }
/* --- Kopf --- */
.launch-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
padding: 18px 20px !important;
background: linear-gradient(180deg, #101318, #0b0d11) !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
border-radius: 12px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px rgba(0, 0, 0, .35) !important;
}
.launch-header-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.launch-header-info img, .launch-header img.launch-logo, .launch-header .token-logo {
width: 56px !important; height: 56px !important;
border-radius: 10px !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
background: #181c22 !important;
object-fit: cover;
}
.detail-title h1, .detail-title h2, .launch-header h1, .launch-header h2 {
margin: 0 !important;
font-family: var(--mv-sans) !important;
font-weight: 900 !important;
font-stretch: 112%;
font-size: clamp(22px, 2.6vw, 32px) !important;
line-height: 1.06 !important;
letter-spacing: -.015em;
color: var(--mv-text) !important;
background: none !important;
-webkit-text-fill-color: var(--mv-text) !important;
}
.detail-title .token-symbol, .launch-header .token-symbol, .detail-title .card-symbol {
font-family: var(--mv-mono) !important;
font-size: 11px !important; font-weight: 600 !important;
letter-spacing: .1em; text-transform: uppercase;
color: #8b95a3 !important; background: none !important;
border: none !important; padding: 0 !important;
}
.launch-header .hardcap-badge, .launch-header .creator-badge,
.launch-header .card-hardcap-badge, .launch-header .card-creator-badge {
padding: 4px 8px !important; border-radius: 4px !important;
font-family: var(--mv-mono) !important; font-size: 9.5px !important;
font-weight: 700 !important; letter-spacing: .12em;
box-shadow: none !important; animation: none !important; border: none !important;
}
.launch-status, .launch-header .launch-status span, .launch-status .status-badge {
padding: 6px 10px !important; border-radius: 5px !important;
background: none !important;
font-family: var(--mv-mono) !important; font-size: 10px !important;
font-weight: 700 !important; letter-spacing: .16em; text-transform: uppercase;
box-shadow: none !important;
}
/* --- Metriken + Balken --- */
.launch-progress-section {
margin-top: 14px !important;
padding: 0 !important;
background: linear-gradient(180deg, #0c0e12, #0a0b0e) !important;
border: 1px solid rgba(255, 255, 255, .07) !important;
border-radius: 12px !important;
overflow: hidden;
}
.launch-progress-section .progress-stats {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
gap: 1px !important;
margin: 0 !important;
background: rgba(255, 255, 255, .06);
}
.launch-progress-section .stat-item {
display: flex !important; flex-direction: column-reverse !important;
align-items: flex-start !important; gap: 5px;
padding: 15px 20px !important; margin: 0 !important;
background: #0c0e12 !important; border: none !important; border-radius: 0 !important;
box-shadow: none !important;
}
.launch-progress-section .stat-item:hover { transform: none !important; }
.launch-progress-section .stat-value {
font-family: var(--mv-mono) !important; font-size: 22px !important;
font-weight: 700 !important; line-height: 1.2; color: var(--mv-text) !important;
text-shadow: none !important; background: none !important;
-webkit-text-fill-color: var(--mv-text) !important;
}
.launch-progress-section .stat-label {
font-family: var(--mv-mono) !important; font-size: 9.5px !important;
font-weight: 600 !important; letter-spacing: .16em; text-transform: uppercase;
color: #6b7480 !important; margin: 0 !important;
}
.launch-progress-section .progress-bar-container { padding: 16px 20px 18px !important; margin: 0 !important; }
.launch-progress-section .progress-bar {
height: 8px !important; border-radius: 4px !important;
background: rgba(255, 255, 255, .06) !important; box-shadow: none !important;
overflow: hidden;
}
.launch-progress-section .progress-fill {
border-radius: 4px !important;
background: linear-gradient(90deg, #e85d20, #ff8f5e) !important;
box-shadow: none !important;
}
.launch-detail-page .progress-fill::after,
.launch-progress-section .progress-fill::after { display: none !important; content: none !important; }
.launch-progress-section .progress-percentage {
display: block; margin-top: 10px;
font-family: var(--mv-mono) !important; font-size: 12px !important;
font-weight: 700 !important; letter-spacing: .08em;
color: #ff8f5e !important; background: none !important;
-webkit-text-fill-color: #ff8f5e !important; animation: none !important;
}
/* --- Panels --- */
.launch-details-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
gap: 14px !important; margin-top: 14px !important;
}
.detail-section, .launch-statistics, .purchase-section, .purchase-history, .chart-section {
padding: 0 !important; margin: 14px 0 0 !important;
background: linear-gradient(180deg, #0c0e12, #0a0b0e) !important;
border: 1px solid rgba(255, 255, 255, .07) !important;
border-radius: 12px !important;
box-shadow: none !important;
overflow: hidden;
text-align: left !important;
}
.launch-details-grid .detail-section { margin: 0 !important; }
.detail-section > h3, .launch-statistics > h3, .purchase-section > h3, .purchase-history > h3,
.detail-section > h4, .purchase-history > h4 {
margin: 0 !important;
padding: 12px 16px !important;
border-bottom: 1px solid rgba(255, 255, 255, .07);
background: rgba(255, 255, 255, .015);
font-family: var(--mv-mono) !important;
font-size: 10.5px !important; font-weight: 700 !important;
letter-spacing: .18em; text-transform: uppercase;
color: #8b95a3 !important;
background-clip: border-box !important;
-webkit-text-fill-color: #8b95a3 !important;
}
.detail-section > *:not(h3):not(h4), .purchase-section > *:not(h3), .purchase-history > *:not(h3):not(h4) {
padding-left: 16px; padding-right: 16px;
}
.detail-section > p { margin: 0 !important; padding: 13px 16px !important; font: 400 13.5px/1.6 var(--mv-sans); color: #c8cfd6; text-wrap: pretty; }
/* Info-Zeilen kompakt */
.detail-section .info-grid { display: flex !important; flex-direction: column; gap: 0 !important; padding: 0 !important; }
.detail-section .info-item {
display: flex !important; align-items: center; justify-content: space-between;
gap: 12px; padding: 9px 16px !important; margin: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, .05);
background: none !important;
}
.detail-section .info-item:last-child { border-bottom: none; }
.detail-section .info-label {
font-family: var(--mv-mono) !important; font-size: 10px !important;
font-weight: 600 !important; letter-spacing: .12em; text-transform: uppercase;
color: #6b7480 !important;
}
.detail-section .info-value {
font-family: var(--mv-mono) !important; font-size: 11.5px !important;
font-weight: 600 !important; color: #dfe4ea !important; text-align: right;
}
.btn-copy-ca {
border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 4px !important;
font-family: var(--mv-mono) !important; font-size: 9.5px !important;
letter-spacing: .12em; text-transform: uppercase; color: #9aa4b1 !important;
}
/* Links kompakt */
.detail-section .social-links { display: flex !important; flex-wrap: wrap; gap: 6px; padding: 14px 16px !important; }
.social-link {
display: inline-flex !important; align-items: center; gap: 6px;
height: 30px; padding: 0 10px !important;
border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 6px !important;
background: none !important;
font-family: var(--mv-mono) !important; font-size: 10px !important;
font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase;
color: #9aa4b1 !important; box-shadow: none !important;
}
.social-link:hover { border-color: rgba(255, 255, 255, .22) !important; color: var(--mv-text) !important; transform: none !important; }
.social-link img { width: 14px !important; height: 14px !important; }
.social-link.referral-share { border-color: rgba(255, 107, 53, .4) !important; background: rgba(255, 107, 53, .1) !important; color: #ff8f5e !important; }
/* Chart */
.chart-header {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
padding: 11px 16px !important;
border-bottom: 1px solid rgba(255, 255, 255, .07);
background: rgba(255, 255, 255, .015);
font-family: var(--mv-mono) !important; font-size: 10.5px !important;
font-weight: 700 !important; letter-spacing: .18em; text-transform: uppercase; color: #8b95a3;
}
.chart-header h3, .chart-header h4 { border: none !important; background: none !important; padding: 0 !important; }
/* Statistics */
.launch-statistics .stats-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
gap: 1px !important; margin: 0 !important; padding: 0 !important;
background: rgba(255, 255, 255, .06);
}
.launch-statistics .stat-card {
display: flex !important; flex-direction: column; align-items: center; gap: 6px;
text-align: center; padding: 15px 18px !important; margin: 0 !important;
background: #0b0d11 !important; border: none !important; border-radius: 0 !important;
box-shadow: none !important;
}
.launch-statistics .stat-card:hover { transform: none !important; }
.launch-statistics .stat-number {
font-family: var(--mv-mono) !important; font-size: 19px !important; font-weight: 700 !important;
color: var(--mv-text) !important; text-shadow: none !important;
background: none !important; -webkit-text-fill-color: var(--mv-text) !important;
line-height: 1.15 !important; margin: 0 auto !important;
}
.launch-statistics .stat-title {
font-family: var(--mv-mono) !important; font-size: 9.5px !important; font-weight: 600 !important;
letter-spacing: .14em; text-transform: uppercase; color: #6b7480 !important;
margin: auto 0 0 !important; padding-top: 2px;
}
/* Pledge-Panel */
.purchase-section { border-color: rgba(255, 107, 53, .24) !important; background: linear-gradient(180deg, #12141a, #0b0d11) !important; }
.purchase-section > h3 { background: rgba(255, 107, 53, .07) !important; color: #ff8f5e !important; -webkit-text-fill-color: #ff8f5e !important; }
.purchase-subtitle {
margin: 0 !important; padding: 12px 16px 0 !important;
font-family: var(--mv-mono) !important; font-size: 10.5px !important;
letter-spacing: .04em; color: #6b7480 !important;
}
.purchase-form { padding: 14px 16px 16px !important; }
.purchase-form input[type="number"], .purchase-form input[type="text"] {
height: 52px; padding: 0 14px !important;
background: #08090c !important;
border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 8px !important;
font-family: var(--mv-mono) !important; font-size: 20px !important; font-weight: 700 !important;
color: var(--mv-text) !important; box-shadow: none !important;
}
.purchase-form .btn, .purchase-form button[type="submit"] {
height: 50px; border-radius: 8px !important;
font-family: var(--mv-mono) !important; font-size: 12.5px !important; font-weight: 800 !important;
letter-spacing: .16em; text-transform: uppercase;
}
.hardcap-info-notice {
display: flex; align-items: flex-start; gap: 10px;
margin: 0 0 12px !important; padding: 11px 12px !important;
background: rgba(251, 191, 36, .08) !important;
border: 1px solid rgba(251, 191, 36, .28) !important; border-radius: 8px !important;
font-family: var(--mv-mono) !important; font-size: 10.5px !important; line-height: 1.6;
color: #cbb37a !important;
}
/* Claim / Vesting */
.detail-section[data-claim-kind] { border-color: rgba(92, 214, 138, .28) !important; background: linear-gradient(180deg, #101a14, #0b0d11) !important; }
.detail-section[data-claim-kind] > h3 { background: rgba(92, 214, 138, .08) !important; color: #5cd68a !important; -webkit-text-fill-color: #5cd68a !important; }
.detail-section[data-claim-kind] p { font-family: var(--mv-mono) !important; font-size: 11.5px !important; }
/* Aktivitaet */
.purchase-history .activity-row, .purchase-history li, .purchase-history .purchase-item {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 16px !important; border-bottom: 1px solid rgba(255, 255, 255, .04);
font-family: var(--mv-mono) !important; font-size: 11.5px !important; color: #c8cfd6 !important;
}
@media (max-width: 820px) {
.launch-header { padding: 15px 14px !important; }
.launch-header-info img, .launch-header img.launch-logo, .launch-header .token-logo { width: 44px !important; height: 44px !important; }
.launch-progress-section .stat-item { padding: 13px 14px !important; }
.launch-progress-section .progress-bar-container { padding: 14px !important; }
.detail-section .info-item { padding: 9px 14px !important; }
}
/* ============================================================
ANHANG H — Launch-Detail: zweispaltiges Layout wie im Mockup
#launchDetailContent wird zum Grid. Der Wrapper
.activity-purchases-grid wird per display:contents aufgeloest,
damit Pledge-, Activity- und Your-Pledges-Block direkt im
Seitengrid platziert werden koennen.
============================================================ */
#launchDetailContent {
display: grid;
grid-template-columns: 1.5fr .85fr;
grid-auto-flow: row dense;
align-items: start;
gap: 14px;
}
#launchDetailContent > * { margin: 0 !important; }
#launchDetailContent > .launch-progress-section { grid-column: 1 / -1; }
.activity-purchases-grid { display: contents !important; }
.activity-purchases-grid > * { margin: 0 !important; }
/* --- Modus MIT Sidebar: Pledge bzw. Claim rechts --- */
.mv-has-sidebar > .launch-details-grid,
.mv-has-sidebar > .dex-chart-section,
.mv-has-sidebar > .launch-statistics { grid-column: 1; }
.mv-has-sidebar > .detail-section[data-claim-kind] { grid-column: 2; }
.mv-has-sidebar .activity-purchases-grid > .purchase-col { grid-column: 2; position: sticky; top: 14px; }
.mv-has-sidebar .activity-purchases-grid > .purchase-history:not(.purchase-col) { grid-column: 1; }
.mv-has-sidebar .activity-purchases-grid > .purchase-history:not(.purchase-col) ~ .purchase-history { grid-column: 2; }
/* Overview: die drei Bloecke in .launch-details-grid als EIN Panel */
#launchDetailContent > .launch-details-grid {
display: block !important;
background: linear-gradient(180deg, #0c0e12, #0a0b0e);
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 12px;
overflow: hidden;
}
.launch-details-grid > .detail-section {
background: none !important;
border: none !important;
border-radius: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}
.launch-details-grid > .detail-section:last-child { border-bottom: none !important; }
.launch-details-grid > .detail-section > h3 {
background: none !important;
border-bottom: none !important;
padding: 12px 16px 0 !important;
font-size: 10px !important;
color: #6b7480 !important;
-webkit-text-fill-color: #6b7480 !important;
}
.launch-details-grid > .detail-section > p { padding-top: 8px !important; }
.launch-details-grid > .detail-section .info-grid { margin-top: 8px; }
/* Metrikband: vier Zellen */
.launch-progress-section .progress-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }
.launch-progress-section .stat-value.is-over { color: #fbbf24 !important; -webkit-text-fill-color: #fbbf24 !important; }
/* Activity-Zeilen */
.activity-item.compact {
display: flex !important; align-items: center; justify-content: space-between;
gap: 12px; padding: 9px 16px !important; margin: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, .04) !important;
background: none !important; border-radius: 0 !important;
}
.activity-item .a-left { display: flex; align-items: center; gap: 7px; min-width: 0; }
.activity-item .activity-buyer {
font-family: var(--mv-mono) !important; font-size: 11.5px !important; font-weight: 600 !important;
color: #9aa4b1 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.activity-item .a-right { display: flex; align-items: center; gap: 12px; flex: none; }
.activity-item .a-amount { font-family: var(--mv-mono) !important; font-size: 11.5px !important; font-weight: 700 !important; color: #c8cfd6 !important; }
.activity-item .a-time { font-family: var(--mv-mono) !important; font-size: 10px !important; color: #6b7480 !important; }
.activity-list-scroll { padding: 0 !important; max-height: 460px; overflow-y: auto; }
.purchase-history > .text-center { padding: 10px 16px !important; }
.purchase-history > .text-center .btn {
border-radius: 6px !important;
font-family: var(--mv-mono) !important; font-size: 10px !important; font-weight: 700 !important;
letter-spacing: .16em; text-transform: uppercase;
}
.dev-badge { font-size: 9px; }
/* Chart-Toggle */
.chart-toggle-btns { display: flex; gap: 5px; }
.chart-toggle-btn {
padding: 5px 10px !important; border-radius: 5px !important;
background: none !important; border: 1px solid rgba(255, 255, 255, .1) !important;
font-family: var(--mv-mono) !important; font-size: 9.5px !important; font-weight: 700 !important;
letter-spacing: .12em; text-transform: uppercase; color: #9aa4b1 !important;
box-shadow: none !important;
}
.chart-toggle-btn.active { border-color: rgba(255, 107, 53, .4) !important; background: rgba(255, 107, 53, .12) !important; color: #ff8f5e !important; }
.dex-chart-container { padding: 0 !important; background: #0f1115; }
.dex-chart-container iframe { display: block; width: 100%; height: 320px; border: 0; }
.dex-chart-attribution {
padding: 10px 16px !important; margin: 0 !important;
border-top: 1px solid rgba(255, 255, 255, .06);
font-family: var(--mv-mono) !important; font-size: 10px !important;
letter-spacing: .1em; text-transform: uppercase; color: #6b7480 !important;
}
/* Hinweis-Bloecke */
.cap-reached-notice { display: flex; gap: 12px; padding: 14px 16px !important; }
.cap-reached-notice h4 {
margin: 0 0 6px !important;
font-family: var(--mv-mono) !important; font-size: 10.5px !important; font-weight: 700 !important;
letter-spacing: .16em; text-transform: uppercase; color: #dfe4ea !important;
}
.cap-reached-notice p { margin: 0 !important; font-family: var(--mv-mono) !important; font-size: 10.5px !important; line-height: 1.65; color: #8b95a3 !important; }
.purchase-section.purchase-disabled { border-color: rgba(255, 255, 255, .07) !important; background: linear-gradient(180deg, #0c0e12, #0a0b0e) !important; }
.purchase-section.purchase-disabled > h3 { background: rgba(255, 255, 255, .015) !important; color: #8b95a3 !important; -webkit-text-fill-color: #8b95a3 !important; }
/* Banner + Interest im Panel-Stil */
.cap-reached-banner, .upcoming-launch-banner {
margin: 14px 0 0 !important; padding: 14px 16px !important;
background: linear-gradient(180deg, #12141a, #0b0d11) !important;
border: 1px solid rgba(251, 191, 36, .28) !important; border-radius: 12px !important;
box-shadow: none !important;
}
.banner-title { font-family: var(--mv-mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .18em; text-transform: uppercase; color: #fbbf24 !important; }
.banner-message, .banner-subtext { font-family: var(--mv-mono) !important; font-size: 10.5px !important; color: #8b95a3 !important; }
.countdown-value { font-family: var(--mv-mono) !important; font-weight: 700 !important; color: var(--mv-text) !important; }
.countdown-label { font-family: var(--mv-mono) !important; font-size: 9px !important; letter-spacing: .14em; text-transform: uppercase; color: #6b7480 !important; }
.interest-section { margin: 14px 0 0 !important; padding: 12px 16px !important; background: linear-gradient(180deg, #0c0e12, #0a0b0e) !important; border: 1px solid rgba(255, 255, 255, .07) !important; border-radius: 12px !important; }
.btn-interest {
height: 34px; border-radius: 6px !important;
font-family: var(--mv-mono) !important; font-size: 10px !important; font-weight: 700 !important;
letter-spacing: .14em; text-transform: uppercase;
}
.interest-count { font-family: var(--mv-mono) !important; font-size: 10.5px !important; color: #8b95a3 !important; }
@media (max-width: 1020px) {
#launchDetailContent { grid-template-columns: 1fr; }
#launchDetailContent > .launch-details-grid,
#launchDetailContent > .dex-chart-section,
#launchDetailContent > .launch-statistics,
#launchDetailContent > .detail-section,
.activity-purchases-grid > .purchase-col,
.activity-purchases-grid > .purchase-history { grid-column: 1 !important; position: static !important; }
}
/* ============================================================
ANHANG I — Launch-Detail: kompakte Infos, Icon-Links,
Vollbreite wenn rechts nichts steht
============================================================ */
/* Launch Information wie im Overview-Raster: zwei Spalten, 9-px-Zeilen */
.launch-details-grid .info-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
gap: 0 1px !important;
margin: 8px 0 0 !important;
background: rgba(255, 255, 255, .05);
}
.launch-details-grid .info-item {
padding: 8px 16px !important;
background: #0b0d11 !important;
border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
}
.launch-details-grid .info-label { font-size: 9.5px !important; letter-spacing: .14em; }
.launch-details-grid .info-value { font-size: 11px !important; }
.launch-details-grid .info-value.status-completed { color: #5cd68a !important; background: none !important; }
.launch-details-grid .info-value.status-failed { color: #e05c5c !important; background: none !important; }
.launch-details-grid .info-value.status-active { color: #5cd68a !important; background: none !important; }
.launch-details-grid .info-value[class*="status-"] { border: none !important; padding: 0 !important; border-radius: 0 !important; font-weight: 700 !important; }
.btn-copy-ca { padding: 1px 6px !important; font-size: 9px !important; }
/* Links: nur Buttons, kein Text */
.detail-section .social-links { gap: 5px; padding: 12px 16px !important; }
.social-link {
width: 30px; height: 30px; padding: 0 !important;
justify-content: center; gap: 0;
overflow: hidden;
}
.social-link > span:not(.partner-icon) { display: none !important; }
.social-link .partner-icon { display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; }
.social-link .partner-icon svg, .social-link .partner-icon img { width: 15px; height: 15px; display: block; }
.social-link.referral-share { width: auto; padding: 0 10px !important; gap: 7px; }
.social-link.referral-share > span:not(.partner-icon) { display: inline !important; }
/* Prozentwert unter dem Balken nicht abschneiden */
.launch-progress-section .progress-percentage {
position: static !important;
text-align: right;
width: 100%;
}
/* (entfernt: aelterer :has()-Block fuer "rechts steht nichts". Er setzte
Overview/Chart mit !important auf die volle Breite und hat damit Anhang I
ausgehebelt. Der Fall wird jetzt komplett von Anhang I abgedeckt.) */
/* ============================================================
ANHANG I — Launch-Detail: Modus OHNE Sidebar
Greift, wenn der Nutzer weder pledgen noch claimen kann
(nicht verbunden, oder Launch beendet ohne eigenen Pledge).
Dann: Overview + Chart links (~64%), Statistics + Recent
Activity rechts. "Your Pledges" faellt weg (waere leer).
Der Modus kommt als Klasse aus launch-detail.ejs.
============================================================ */
/* Der Modus greift ueber die Klasse aus dem EJS ODER — falls das Template
noch nicht aktualisiert ist — ueber :has() als Fallback. */
#launchDetailContent.mv-no-sidebar,
#launchDetailContent:not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind])) {
grid-template-columns: 1.55fr 1fr;
}
#launchDetailContent.mv-no-sidebar > .launch-details-grid,
#launchDetailContent.mv-no-sidebar > .dex-chart-section,
#launchDetailContent:not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind])) > .launch-details-grid,
#launchDetailContent:not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind])) > .dex-chart-section {
grid-column: 1;
}
#launchDetailContent.mv-no-sidebar > .launch-statistics,
#launchDetailContent.mv-no-sidebar .activity-purchases-grid > .purchase-history,
#launchDetailContent:not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind])) > .launch-statistics,
#launchDetailContent:not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind])) .activity-purchases-grid > .purchase-history {
grid-column: 2;
}
/* "Your Pledges" waere hier leer */
#launchDetailContent.mv-no-sidebar .activity-purchases-grid > .purchase-history:last-child,
#launchDetailContent:not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind])) .activity-purchases-grid > .purchase-history:last-child {
display: none;
}
#launchDetailContent.mv-no-sidebar .launch-statistics .stats-grid,
#launchDetailContent:not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind])) .launch-statistics .stats-grid {
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
}
#launchDetailContent.mv-no-sidebar .activity-list-scroll,
#launchDetailContent:not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind])) .activity-list-scroll {
max-height: 420px;
}
/* ============================================================
ANHANG J — Overview kompakter
Launch Information als Zellenraster (wie im Entwurf), Links
als eine Zeile mit Icon-Buttons ohne Text.
============================================================ */
.launch-details-grid > .detail-section > h3 {
padding: 11px 16px 0 !important;
font-size: 9.5px !important;
letter-spacing: .2em;
}
.launch-details-grid > .detail-section > p { padding: 7px 16px 13px !important; font-size: 13.5px !important; }
.launch-details-grid .info-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
gap: 0 1px !important;
margin: 8px 0 0 !important;
padding: 0 !important;
background: rgba(255, 255, 255, .05);
border-top: 1px solid rgba(255, 255, 255, .05);
}
.launch-details-grid .info-item {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 16px !important;
margin: 0 !important;
background: #0b0d11 !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
}
.launch-details-grid .info-label {
flex: none;
font-size: 9.5px !important;
letter-spacing: .14em;
}
.launch-details-grid .info-value {
display: flex; align-items: center; justify-content: flex-end; gap: 7px;
min-width: 0;
font-size: 11.5px !important;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.launch-details-grid .btn-copy-ca {
flex: none;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
min-width: 20px; height: 20px; padding: 0 !important;
font-size: 9px !important; letter-spacing: 0;
}
/* Copy-Icon statt "Copy"-Text */
.btn-copy-ca::before {
content: ""; flex: none; width: 11px; height: 11px;
background: currentColor;
-webkit-mask: url('/images/copy-clipboard.svg') center / contain no-repeat;
mask: url('/images/copy-clipboard.svg') center / contain no-repeat;
}
.btn-copy-ca:hover { color: #ff8f5e !important; border-color: rgba(255, 107, 53, .4) !important; }
.btn-copy-ca:not(:empty) { padding: 0 5px !important; }
/* Links: Label links, Icon-Buttons rechts, in einer Zeile */
.launch-details-grid > .detail-section:has(.social-links) {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 11px 16px !important;
}
.launch-details-grid > .detail-section:has(.social-links) > h3 { padding: 0 !important; }
.launch-details-grid > .detail-section .social-links { padding: 0 !important; gap: 5px !important; justify-content: flex-end; }
.launch-details-grid > .detail-section .social-link {
width: 28px; height: 28px; padding: 0 !important;
font-size: 0 !important;
letter-spacing: 0 !important;
overflow: hidden;
}
.launch-details-grid > .detail-section .social-link > * { font-size: 10px; }
.launch-details-grid > .detail-section .social-link img { width: 14px !important; height: 14px !important; }
.launch-details-grid > .detail-section .social-link svg { width: 13px; height: 13px; }
.launch-details-grid > .detail-section .social-link .social-label,
.launch-details-grid > .detail-section .social-link .link-label,
.launch-details-grid > .detail-section .social-link span:not([class*="icon"]) { display: none !important; }
/* ============================================================
ANHANG L — Modus OHNE Sidebar: festes Zeilenraster
Zeile 1 Progress (volle Breite)
Zeile 2 Overview | Statistics
Zeile 3 Live Chart | Recent Activity
Alle Panels behalten ihre natuerliche Hoehe; zwischen den
Boxen liegt links wie rechts derselbe Abstand (14 px).
Der Chart fuellt seine Box: Section und Container sind Flex,
das iframe traegt keine eigene Hoehe mehr.
============================================================ */
#launchDetailContent:is(.mv-no-sidebar, :not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind]))) {
align-items: start;
row-gap: 14px;
column-gap: 14px;
}
#launchDetailContent:is(.mv-no-sidebar, :not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind]))) > .launch-progress-section { grid-row: 1; grid-column: 1 / -1; }
#launchDetailContent:is(.mv-no-sidebar, :not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind]))) > .launch-details-grid { grid-row: 2; grid-column: 1; align-self: start; }
#launchDetailContent:is(.mv-no-sidebar, :not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind]))) > .launch-statistics { grid-row: 2; grid-column: 2; align-self: start; }
#launchDetailContent:is(.mv-no-sidebar, :not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind]))) .activity-purchases-grid > .purchase-history { grid-row: 3; grid-column: 2; align-self: start; }
#launchDetailContent:is(.mv-no-sidebar, :not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind]))) > .dex-chart-section {
grid-row: 3;
grid-column: 1;
align-self: stretch;
display: flex;
flex-direction: column;
}
/* Chart fuellt die Box: keine feste iframe-Hoehe mehr */
#launchDetailContent:is(.mv-no-sidebar, :not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind]))) .dex-chart-container {
display: flex;
flex: 1 1 auto;
height: auto !important;
min-height: 380px;
}
#launchDetailContent:is(.mv-no-sidebar, :not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind]))) .dex-chart-container iframe {
flex: 1 1 auto;
align-self: stretch;
width: 100%;
height: auto !important;
min-height: 0;
}
@media (max-width: 1020px) {
#launchDetailContent:is(.mv-no-sidebar, :not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind]))) > *,
#launchDetailContent:is(.mv-no-sidebar, :not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind]))) .activity-purchases-grid > * {
grid-row: auto !important;
grid-column: 1 !important;
}
#launchDetailContent:is(.mv-no-sidebar, :not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind]))) .dex-chart-container { min-height: 320px; }
}
@media (max-width: 1020px) {
#launchDetailContent.mv-no-sidebar,
#launchDetailContent:not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind])) { grid-template-columns: 1fr; }
#launchDetailContent.mv-no-sidebar > .launch-statistics,
#launchDetailContent.mv-no-sidebar .activity-purchases-grid > .purchase-history,
#launchDetailContent:not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind])) > .launch-statistics,
#launchDetailContent:not(.mv-has-sidebar):not(:has(.purchase-col)):not(:has(.detail-section[data-claim-kind])) .activity-purchases-grid > .purchase-history { grid-column: 1 !important; }
}
/* ============================================================
ANHANG M — Launch Card: Chain-Identitaet ("Chain Chip", 1C)
Chain-Farbkante oben, Chain-Name als solider Chip in der
rechten obersten Ecke, getoenter Rahmen und Hintergrundverlauf,
Logo-Ring, Symbol-Chip und Link-Icons in der Chain-Farbe.
Status- und Fill-Semantik bleibt unangetastet: Status steht in
der Pille, die Fuellrate im Balken (Anhang C).
Braucht keine Template-Aenderung — die Klassen card-chain-sol
bzw. card-chain-xrpl setzt launch-card.ejs bereits.
============================================================ */
.launch-card.card-chain-sol,
.launch-card.card-chain-xrpl { position: relative; overflow: hidden; }
/* Chain-Farbkante oben. Sie liegt auf .card-tag-row::before, weil
.launch-card::after schon die Fuellstands-Linie traegt (Anhang B)
und .launch-card::before die Status-Schiene links. Die drei Ebenen
stoeren sich so nicht: Band = Chain, 2-px-Segment = Fuellstand,
Schiene links = Status. */
.launch-card.card-chain-sol .card-tag-row,
.launch-card.card-chain-xrpl .card-tag-row { position: static !important; }
.launch-card.card-chain-sol .card-tag-row::before,
.launch-card.card-chain-xrpl .card-tag-row::before {
content: '' !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
width: auto !important;
height: 4px !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
opacity: 1 !important;
z-index: 1;
pointer-events: none;
}
.launch-card.card-chain-sol .card-tag-row::before { background: linear-gradient(90deg, var(--mv-sol), var(--mv-sol-soft) 55%, rgba(153, 69, 255, .3)) !important; }
.launch-card.card-chain-xrpl .card-tag-row::before { background: linear-gradient(90deg, var(--mv-xrpl), var(--mv-xrpl-soft) 55%, rgba(77, 141, 255, .3)) !important; }
/* Chip liegt ueber der Kante */
.launch-card.card-chain-sol .chain-badge,
.launch-card.card-chain-xrpl .chain-badge { z-index: 2; }
/* Flaeche und Rahmen leicht in Chain-Ton */
.launch-card.card-chain-sol {
background: linear-gradient(180deg, #0d0a14, #0a0b0e 40%);
border-color: rgba(153, 69, 255, .26);
}
.launch-card.card-chain-xrpl {
background: linear-gradient(180deg, #0a0e18, #0a0b0e 40%);
border-color: rgba(77, 141, 255, .26);
}
.launch-card.card-chain-sol:hover { border-color: rgba(153, 69, 255, .5); box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(153, 69, 255, .12); }
.launch-card.card-chain-xrpl:hover { border-color: rgba(77, 141, 255, .5); box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(77, 141, 255, .12); }
/* Chain-Chip in der Ecke */
.launch-card.card-chain-sol .card-feature-tags,
.launch-card.card-chain-xrpl .card-feature-tags { position: static; flex-wrap: wrap; }
.launch-card.card-chain-sol .card-tag-row,
.launch-card.card-chain-xrpl .card-tag-row { padding-right: 62px; }
.launch-card.card-chain-sol .chain-badge,
.launch-card.card-chain-xrpl .chain-badge {
position: absolute;
top: 4px;
right: 0;
z-index: 2;
margin: 0 !important;
padding: 5px 11px 6px !important;
border: none !important;
border-radius: 0 0 0 10px !important;
font-family: var(--mv-mono);
font-size: .58rem;
font-weight: 700;
letter-spacing: .2em;
line-height: 1;
}
.launch-card.card-chain-sol .chain-badge { background: var(--mv-sol) !important; color: #0a0a0a !important; }
.launch-card.card-chain-xrpl .chain-badge { background: var(--mv-xrpl) !important; color: #04101f !important; }
/* Logo-Ring, Symbol-Chip, Trennlinie */
.launch-card.card-chain-sol .card-logo { border-color: rgba(153, 69, 255, .45); }
.launch-card.card-chain-xrpl .card-logo { border-color: rgba(77, 141, 255, .45); }
.launch-card.card-chain-sol .card-symbol { color: var(--mv-sol-soft); border-color: rgba(153, 69, 255, .3); }
.launch-card.card-chain-xrpl .card-symbol { color: var(--mv-xrpl-soft); border-color: rgba(77, 141, 255, .3); }
.launch-card.card-chain-sol .card-footer,
.launch-card.card-chain-sol .card-meta { border-top-color: rgba(153, 69, 255, .14); }
.launch-card.card-chain-xrpl .card-footer,
.launch-card.card-chain-xrpl .card-meta { border-top-color: rgba(77, 141, 255, .14); }
/* Waehrungseinheit im Betrag mitfaerben */
.launch-card.card-chain-sol .progress-raised .currency,
.launch-card.card-chain-sol .card-currency { color: var(--mv-sol-soft); }
.launch-card.card-chain-xrpl .progress-raised .currency,
.launch-card.card-chain-xrpl .card-currency { color: var(--mv-xrpl-soft); }
/* Link-Icons */
.launch-card.card-chain-sol .social-links .social-link {
border-color: rgba(153, 69, 255, .24);
color: var(--mv-sol-soft);
}
.launch-card.card-chain-xrpl .social-links .social-link {
border-color: rgba(77, 141, 255, .24);
color: var(--mv-xrpl-soft);
}
.launch-card.card-chain-sol .social-links .social-link:hover { border-color: rgba(153, 69, 255, .55); background: rgba(153, 69, 255, .1); }
.launch-card.card-chain-xrpl .social-links .social-link:hover { border-color: rgba(77, 141, 255, .55); background: rgba(77, 141, 255, .1); }
/* ============================================================
ANHANG N — Balken in Chain-Farbe + feste Meta-Zeile
1) Der Fuellbalken folgt der Chain (lila / blau); das gold
schraffierte Over-Cap-Segment bleibt unangetastet.
Fehlgeschlagene Launches bleiben rot.
2) .progress-meta behaelt ihre Hoehe, auch wenn kein
"+x over" bzw. "x to go" darin steht — dadurch liegen
Ended-Zeile und Link-Icons in allen Karten gleich hoch.
============================================================ */
.launch-card.card-chain-sol .progress-fill,
.launch-card.card-chain-sol .progress-bar.over-cap .progress-fill {
background: linear-gradient(90deg, #6b21d6, var(--mv-sol-soft)) !important;
}
.launch-card.card-chain-xrpl .progress-fill,
.launch-card.card-chain-xrpl .progress-bar.over-cap .progress-fill {
background: linear-gradient(90deg, #245fc4, var(--mv-xrpl-soft)) !important;
}
.launch-card.card-chain-sol .progress-bar { box-shadow: none !important; }
.launch-card.card-chain-xrpl .progress-bar { box-shadow: none !important; }
.launch-card.card-chain-sol .progress-bar.over-cap,
.launch-card.card-chain-xrpl .progress-bar.over-cap { box-shadow: 0 0 14px rgba(251, 191, 36, .28) !important; }
/* Misserfolg bleibt rot — dort ist die Farbe die Aussage */
.launch-card.status-failed.card-chain-sol .progress-fill,
.launch-card.status-failed.card-chain-xrpl .progress-fill { background: var(--mv-bad) !important; }
/* Meta-Zeile haelt ihren Platz, auch leer */
.launch-card .progress-meta {
min-height: 15px;
margin-top: .5rem;
line-height: 15px;
}
/* ============================================================
ANHANG O — Inhaltsseiten: Terms, Privacy, Disclaimer,
Partners, Community Takeover (.legal-page) sowie Guides und
Earn Rewards (.guides-container / .guide / .step).
Dieselbe Sprache wie Home: Archivo-Expanded-Titel mit oranger
Akzentkante, Mono-Kopfbaender, Haarlinien statt Kastenstapel,
Lesemass fuer Fliesstext. Rein additiv, keine Template-
Aenderung noetig.
============================================================ */
/* ---------- Seitenkopf (alle Inhaltsseiten) ---------- */
.page-header {
max-width: 1100px;
margin: 0 auto !important;
padding: clamp(30px, 4vw, 56px) clamp(16px, 3vw, 32px) 22px !important;
background: none !important;
border: none !important;
text-align: left !important;
}
.page-header .header-content { display: block !important; text-align: left !important; }
.page-header .header-text { position: relative; padding-left: 15px; }
.page-header .header-text::before {
content: '';
position: absolute;
left: 0;
top: .12em;
bottom: .55em;
width: 3px;
border-radius: 2px;
background: linear-gradient(180deg, var(--mv-accent), rgba(255, 107, 53, .2));
}
.page-header .header-text h2 {
margin: 0 !important;
font-family: Archivo, system-ui, sans-serif;
font-size: clamp(25px, 3.1vw, 38px) !important;
font-weight: 900 !important;
font-stretch: 112%;
letter-spacing: -.015em;
line-height: 1.08;
color: var(--mv-text) !important;
-webkit-text-fill-color: var(--mv-text);
background: none !important;
text-align: left !important;
text-transform: none;
}
.page-header .header-description {
margin: 11px 0 0 !important;
max-width: 70ch;
font-size: 14.5px !important;
line-height: 1.6;
color: var(--mv-text-muted) !important;
text-align: left !important;
text-wrap: pretty;
}
/* ---------- Rechtstexte als Dokument, nicht als Kastenstapel ---------- */
.legal-page {
max-width: 940px;
margin: 0 auto;
padding: 0 clamp(16px, 4vw, 32px) 76px;
}
.legal-page > .page-header { max-width: none; padding: clamp(30px, 4vw, 56px) 0 10px !important; }
.legal-page .detail-section {
margin: 0 !important;
padding: 24px 0 !important;
background: none !important;
border: none !important;
border-top: 1px solid var(--mv-line) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.legal-page .detail-section:first-of-type { border-top: none !important; padding-top: 14px !important; }
/* Anhang G gibt .detail-section-Kindern Panel-Padding und dem h3 eine
Mono-Kopfzeile — auf den Textseiten beides zuruecknehmen. */
.legal-page .detail-section > * { padding-left: 0 !important; padding-right: 0 !important; }
.legal-page .detail-section > p { padding: 0 !important; }
.legal-page .detail-section > h3 {
-webkit-text-fill-color: var(--mv-text) !important;
background-clip: border-box !important;
margin: 0 0 10px !important;
padding: 0 !important;
font-family: Archivo, system-ui, sans-serif !important;
font-size: 17px !important;
font-weight: 800 !important;
font-stretch: 106%;
letter-spacing: -.005em !important;
line-height: 1.25;
text-transform: none !important;
color: var(--mv-text) !important;
-webkit-text-fill-color: var(--mv-text);
background: none !important;
border: none !important;
}
.legal-page .detail-section > h4 {
margin: 16px 0 8px !important;
padding: 0 !important;
font-family: var(--mv-mono) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: var(--mv-text-soft) !important;
background: none !important;
border: none !important;
}
/* ---------- Guides / Rewards: Panels mit Kopfband ---------- */
.guides-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 32px) 76px;
display: grid;
gap: 16px;
}
.guides-container > .chain-rewards-xrpl,
.guides-container > .chain-rewards-solana,
.guides-container > .chain-rewards-all { display: grid; gap: 16px; }
.chain-tabs.rewards-chain-tabs {
max-width: 1100px;
margin: 0 auto 18px !important;
padding: 0 clamp(16px, 3vw, 32px) !important;
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-start !important;
background: none !important;
border: none !important;
}
.guide {
margin: 0 !important;
padding: 0 !important;
background: linear-gradient(180deg, #0c0e12, #0a0b0e) !important;
border: 1px solid var(--mv-line) !important;
border-radius: 12px !important;
box-shadow: none !important;
overflow: hidden;
}
.guide > *:not(.guide-header):not(.step) { padding-left: clamp(16px, 2vw, 22px); padding-right: clamp(16px, 2vw, 22px); }
.guide > *:not(.guide-header):not(.step):last-child { padding-bottom: 18px; }
/* Panel-Padding muss die Listen-Resets aus dem Fliesstext-Block schlagen */
.guides-container .guide > ul,
.guides-container .guide > ol,
.guides-container .guide > p:not(.guide-note) {
padding-left: clamp(16px, 2vw, 22px) !important;
padding-right: clamp(16px, 2vw, 22px) !important;
}
.guide > .guide-header + *:not(.step) { margin-top: 16px !important; }
.guide-header {
display: grid !important;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 12px;
margin: 0 !important;
padding: 14px clamp(16px, 2vw, 22px) !important;
background: rgba(255, 255, 255, .02) !important;
border-bottom: 1px solid var(--mv-line) !important;
text-align: left !important;
}
.guide-header .guide-icon {
grid-row: 1 / span 2;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
font-size: 16px !important;
border-radius: 8px;
background: rgba(255, 107, 53, .1);
border: 1px solid rgba(255, 107, 53, .22);
}
.guide-header h2 {
grid-column: 2;
margin: 0 !important;
font-family: Archivo, system-ui, sans-serif !important;
font-size: 18px !important;
font-weight: 800 !important;
font-stretch: 106%;
letter-spacing: -.005em !important;
line-height: 1.25;
text-transform: none !important;
color: var(--mv-text) !important;
-webkit-text-fill-color: var(--mv-text);
background: none !important;
text-align: left !important;
}
.guide-header .guide-subtitle {
grid-column: 2;
margin: 3px 0 0 !important;
font-family: var(--mv-mono) !important;
font-size: 10.5px !important;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mv-text-soft) !important;
text-align: left !important;
}
/* Schritte: Nummer als Mono-Chip, Haarlinie statt Kasten */
.guide .step {
display: grid !important;
grid-template-columns: 30px 1fr;
column-gap: 14px;
align-items: start;
margin: 0 !important;
padding: 16px clamp(16px, 2vw, 22px) !important;
background: none !important;
border: none !important;
border-top: 1px solid rgba(255, 255, 255, .05) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.guide .guide-header + .step { border-top: none !important; }
.guide .step > * { grid-column: 2; }
.guide .step > .step-number {
grid-column: 1;
grid-row: 1;
position: static !important;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin: 0 !important;
padding: 0 !important;
font-family: var(--mv-mono) !important;
font-size: 12px !important;
font-weight: 700 !important;
color: var(--mv-accent) !important;
background: rgba(255, 107, 53, .1) !important;
border: 1px solid rgba(255, 107, 53, .24) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.guide .step > h3 {
margin: 5px 0 0 !important;
padding: 0 !important;
font-family: Archivo, system-ui, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -.003em !important;
text-transform: none !important;
color: var(--mv-text) !important;
-webkit-text-fill-color: var(--mv-text);
background: none !important;
border: none !important;
}
.guide > .guide-note {
margin: 14px clamp(16px, 2vw, 22px) 0 !important;
max-width: none !important;
padding: 10px 13px !important;
padding: 10px 13px !important;
background: rgba(255, 255, 255, .025);
border: none;
border-left: 2px solid rgba(255, 107, 53, .5);
border-radius: 0 6px 6px 0;
font-size: 13px !important;
color: var(--mv-text-muted) !important;
}
.guide-note em { font-style: normal; }
/* ---------- Fliesstext, Listen, Links ---------- */
.legal-page p,
.guides-container p {
margin: 9px 0 0 !important;
max-width: 76ch;
font-size: 14.5px !important;
line-height: 1.72 !important;
color: #c3cbd4 !important;
text-wrap: pretty;
}
.legal-page .detail-section > p:first-child,
.guide .step > p:first-of-type { margin-top: 6px !important; }
.legal-page strong,
.guides-container strong { color: var(--mv-text); font-weight: 700; }
.legal-page ul,
.legal-page ol,
.guides-container ul,
.guides-container ol {
margin: 11px 0 0 !important;
padding: 0 !important;
max-width: 76ch;
list-style: none !important;
display: grid;
gap: 8px;
}
.legal-page li,
.guides-container li {
position: relative;
margin: 0 !important;
padding-left: 17px !important;
font-size: 14.5px !important;
line-height: 1.7 !important;
color: #c3cbd4 !important;
text-wrap: pretty;
}
.legal-page li::before,
.guides-container li::before {
content: '';
position: absolute;
left: 0;
top: .66em;
width: 5px;
height: 5px;
border-radius: 1px;
background: var(--mv-accent);
opacity: .75;
}
.legal-page ol,
.guides-container ol { counter-reset: mvOl; }
.legal-page ol > li::before,
.guides-container ol > li::before {
counter-increment: mvOl;
content: counter(mvOl);
top: 0;
width: auto;
height: auto;
background: none;
font-family: var(--mv-mono);
font-size: 11px;
color: var(--mv-accent);
opacity: 1;
}
.legal-page a,
.guides-container a {
color: var(--mv-accent-2);
text-decoration: none;
border-bottom: 1px solid rgba(255, 143, 94, .35);
}
.legal-page a:hover,
.guides-container a:hover { color: var(--mv-accent); border-bottom-color: var(--mv-accent); }
@media (max-width: 640px) {
.guide .step { grid-template-columns: 26px 1fr; column-gap: 11px; }
.guide .step > .step-number { width: 26px; height: 26px; }
.legal-page .detail-section { padding: 20px 0 !important; }
}