StartupJoin – Offer Detail Demo

article.prose .sj-offer .sj-offer-value {
font-size: 22px;
font-weight: 900;
letter-spacing: -0.01em;
color: var(--sj-text);
}

/ BADGES /
article.prose .sj-offer .sj-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}

article.prose .sj-offer .sj-badge {
font-size: 12px;
font-weight: 800;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--sj-border);
background: var(--sj-surface2);
color: var(--sj-muted);
}

article.prose .sj-offer .sj-badge--status {
background: transparent;
color: var(--sj-text);
}

/ Status variants /
article.prose .sj-offer .sj-status-active {
border-color: rgba(22, 163, 74, .35);
background: rgba(22, 163, 74, .10);
color: #166534;
}
.dark article.prose .sj-offer .sj-status-active {
color: #86efac;
background: rgba(22, 163, 74, .12);
}

article.prose .sj-offer .sj-status-expired {
border-color: rgba(239, 68, 68, .35);
background: rgba(239, 68, 68, .10);
color: #991b1b;
}
.dark article.prose .sj-offer .sj-status-expired {
color: #fca5a5;
background: rgba(239, 68, 68, .12);
}

article.prose .sj-offer .sj-status-paused {
border-color: rgba(245, 158, 11, .45);
background: rgba(245, 158, 11, .12);
color: #92400e;
}
.dark article.prose .sj-offer .sj-status-paused {
color: #fcd34d;
background: rgba(245, 158, 11, .14);
}

article.prose .sj-offer .sj-status-comingsoon {
border-color: rgba(14, 165, 233, .40);
background: rgba(14, 165, 233, .10);
color: #075985;
}
.dark article.prose .sj-offer .sj-status-comingsoon {
color: #7dd3fc;
background: rgba(14, 165, 233, .12);
}

/ CTA BUTTONS /
article.prose .sj-offer .sj-offer-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}

article.prose .sj-offer .sj-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid var(--sj-border);
text-decoration: none;
font-weight: 900;
font-size: 14px;
transition: transform .08s ease, filter .15s ease;
}

article.prose .sj-offer .sj-btn-primary {
background: var(--sj-primary);
border-color: var(--sj-primary);
color: var(--sj-primary-contrast);
}

article.prose .sj-offer .sj-btn-secondary {
background: transparent;
color: var(--sj-text);
}

article.prose .sj-offer .sj-btn:hover { filter: brightness(0.98); transform: translateY(-1px); }
article.prose .sj-offer .sj-btn:active { transform: translateY(0px); }

/ FACTS GRID /
article.prose .sj-offer .sj-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}

@media (max-width: 640px) {
article.prose .sj-offer .sj-facts { grid-template-columns: 1fr; }
}

article.prose .sj-offer .sj-fact {
border: 1px dashed var(--sj-border);
border-radius: 12px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.55);
}
.dark article.prose .sj-offer .sj-fact {
background: rgba(15, 23, 42, 0.35);
}

article.prose .sj-offer .sj-fact-k {
font-size: 12px;
color: var(--sj-muted);
margin-bottom: 4px;
}

article.prose .sj-offer .sj-fact-v {
font-size: 13px;
font-weight: 900;
color: var(--sj-text);
}

/ MARKDOWN ENHANCEMENTS INSIDE sj-offer /
article.prose .sj-offer blockquote {
border-left: 4px solid var(--sj-primary);
background: rgba(37, 99, 235, 0.06);
padding: 12px 14px;
border-radius: 12px;
}
.dark article.prose .sj-offer blockquote {
background: rgba(96, 165, 250, 0.10);
}

article.prose .sj-offer hr {
border: 0;
height: 1px;
background: var(--sj-border);
margin: 24px 0;
}

article.prose .sj-offer table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--sj-border);
border-radius: 14px;
overflow: hidden;
}

article.prose .sj-offer th {
background: var(--sj-surface2);
text-align: left;
font-weight: 900;
}

article.prose .sj-offer th,
article.prose .sj-offer td {
padding: 10px 12px;
border-bottom: 1px solid var(--sj-border);
}

article.prose .sj-offer tbody tr:last-child td { border-bottom: 0; }