.sponsor-card { position: relative; display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--ant-color-border-secondary); border-radius: var(--ant-border-radius-lg, 8px); background: var(--bg-card, var(--ant-color-fill-quaternary)); transition: border-color 0.2s, background 0.2s; } .sponsor-card:hover { border-color: var(--ant-color-primary); } .sponsor-main { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px; color: var(--ant-color-text); text-decoration: none; } .sponsor-main:hover, .sponsor-main:focus-visible { color: var(--ant-color-text); outline: none; } .sponsor-logo { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: var(--ant-color-bg-elevated); } .sponsor-logo-fallback { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; color: var(--ant-color-primary); background: var(--ant-color-primary-bg); } .sponsor-body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } .sponsor-head { display: flex; align-items: center; gap: 8px; min-width: 0; } .sponsor-tag { flex: 0 0 auto; padding: 0 6px; border: 1px solid var(--ant-color-border); border-radius: 4px; font-size: 11px; line-height: 18px; color: var(--ant-color-text-tertiary); } .sponsor-title { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .sponsor-text { font-size: 13px; color: var(--ant-color-text-secondary); } .sponsor-visit { flex: 0 0 auto; font-size: 13px; color: var(--ant-color-primary); white-space: nowrap; } .sponsor-close { flex: 0 0 auto; align-self: flex-start; width: 28px; height: 28px; margin: 6px 6px 0 0; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--ant-color-text-tertiary); cursor: pointer; } .sponsor-close:hover, .sponsor-close:focus-visible { color: var(--ant-color-text); background: var(--ant-color-fill-tertiary); outline: none; } [dir='rtl'] .sponsor-close { margin: 6px 0 0 6px; } .sponsor-card-compact .sponsor-main { gap: 10px; padding: 8px 10px; } .sponsor-card-compact .sponsor-logo { width: 32px; height: 32px; } .sponsor-card-compact .sponsor-head { flex-direction: column; align-items: flex-start; gap: 2px; } .sponsor-card-compact .sponsor-title { display: -webkit-box; max-width: 100%; font-size: 13px; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sponsor-card-compact .sponsor-text { display: -webkit-box; overflow: hidden; font-size: 12px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sponsor-card-compact .sponsor-close { width: 22px; height: 22px; margin: 4px 4px 0 0; font-size: 11px; } .sponsor-card-card { height: 100%; } .sponsor-card-card .sponsor-main { flex-direction: column; align-items: flex-start; padding: 16px; } .sponsor-card-card .sponsor-logo { width: 56px; height: 56px; } .sponsor-card-card .sponsor-visit { margin-top: auto; } .sponsor-card-icon { justify-content: center; padding: 6px; border-color: transparent; background: transparent; } .sponsor-card-icon .sponsor-logo { width: 32px; height: 32px; } @media (max-width: 576px) { .sponsor-card-banner .sponsor-main { flex-wrap: wrap; padding: 10px 12px; } .sponsor-card-banner .sponsor-visit { flex-basis: 100%; padding-inline-start: 52px; } } .sponsor-card-card { transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .sponsor-card-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }