/* ───────────────────────────────────────────────────────────────── Link Preview — bklp ───────────────────────────────────────────────────────────────── */ .bklp-card { display: flex; text-decoration: none; color: inherit; background: var(--bklp-bg, #fff); border: var(--bklp-bw, 1px) solid var(--bklp-border, #e5e7eb); border-radius: var(--bklp-radius, 14px); overflow: hidden; box-shadow: var(--bklp-shadow, 0 2px 16px rgba(0,0,0,0.09)); transition: transform 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; font-family: inherit; } .bklp-card.bklp-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.14); } /* ── Styles ────────────────────────────────────────────────────── */ .bklp-style-horizontal { flex-direction: row; } .bklp-style-vertical { flex-direction: column; } .bklp-style-large { flex-direction: column; } .bklp-style-minimal { flex-direction: column; } /* ── Image ─────────────────────────────────────────────────────── */ .bklp-image { object-fit: cover; display: block; flex-shrink: 0; } .bklp-style-horizontal .bklp-image { width: var(--bklp-img-w, 220px); height: 100%; min-height: 120px; } .bklp-style-vertical .bklp-image, .bklp-style-large .bklp-image { width: 100%; } /* ── Text area ─────────────────────────────────────────────────── */ .bklp-text { padding: 18px 20px 20px; flex: 1; min-width: 0; } .bklp-style-large .bklp-text { padding: 20px 24px 24px; } /* ── Meta row (favicon + domain) ───────────────────────────────── */ .bklp-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } .bklp-favicon { width: 14px; height: 14px; border-radius: 2px; object-fit: cover; flex-shrink: 0; } .bklp-domain { font-size: 12px; font-weight: 600; color: var(--bklp-domain, #6c3fb5); letter-spacing: 0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .bklp-dot { color: #d1d5db; font-size: 11px; } .bklp-sitename { font-size: 12px; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Title ─────────────────────────────────────────────────────── */ .bklp-title { margin: 0 0 6px; font-family: var(--bklp-tt-font-family, inherit); font-weight: var(--bklp-tt-font-weight, 700); font-style: var(--bklp-tt-font-style, normal); text-decoration: var(--bklp-tt-text-decoration, none); text-transform: var(--bklp-tt-text-transform, none); font-size: var(--bklp-tt-font-size-d, 16px); line-height: var(--bklp-tt-line-height-d, var(--bklp-tt-line-height, 1.35)); letter-spacing: var(--bklp-tt-letter-spacing-d, var(--bklp-tt-letter-spacing, 0px)); word-spacing: var(--bklp-tt-word-spacing-d, var(--bklp-tt-word-spacing, 0px)); color: var(--bklp-title, #111827); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ── Description ───────────────────────────────────────────────── */ .bklp-desc { margin: 0; font-family: var(--bklp-d-font-family, inherit); font-weight: var(--bklp-d-font-weight, 400); font-style: var(--bklp-d-font-style, normal); text-decoration: var(--bklp-d-text-decoration, none); text-transform: var(--bklp-d-text-transform, none); font-size: var(--bklp-d-font-size-d, 13px); line-height: var(--bklp-d-line-height-d, var(--bklp-d-line-height, 1.55)); letter-spacing: var(--bklp-d-letter-spacing-d, var(--bklp-d-letter-spacing, 0px)); word-spacing: var(--bklp-d-word-spacing-d, var(--bklp-d-word-spacing, 0px)); color: var(--bklp-desc, #6b7280); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* ── Editor ────────────────────────────────────────────────────── */ .bklp-editor-wrap { width: 100%; display: flex; justify-content: flex-start; } /* ── Reduced motion ────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .bklp-card { transition: none; } } /* Typography – responsive */ @media (max-width: 1024px) { .bklp-card .bklp-title { font-size: var(--bklp-tt-font-size-t, var(--bklp-tt-font-size-d, 16px)); line-height: var(--bklp-tt-line-height-t, var(--bklp-tt-line-height-d, 1.35));letter-spacing:var(--bklp-tt-letter-spacing-t, var(--bklp-tt-letter-spacing-d, var(--bklp-tt-letter-spacing, 0px)));word-spacing:var(--bklp-tt-word-spacing-t, var(--bklp-tt-word-spacing-d, var(--bklp-tt-word-spacing, 0px)))} .bklp-card .bklp-desc { font-size: var(--bklp-d-font-size-t, var(--bklp-d-font-size-d, 13px)); line-height: var(--bklp-d-line-height-t, var(--bklp-d-line-height-d, 1.55));letter-spacing:var(--bklp-d-letter-spacing-t, var(--bklp-d-letter-spacing-d, var(--bklp-d-letter-spacing, 0px)));word-spacing:var(--bklp-d-word-spacing-t, var(--bklp-d-word-spacing-d, var(--bklp-d-word-spacing, 0px)))} } @media (max-width: 767px) { .bklp-card .bklp-title { font-size: var(--bklp-tt-font-size-m, var(--bklp-tt-font-size-t, var(--bklp-tt-font-size-d, 16px))); line-height: var(--bklp-tt-line-height-m, var(--bklp-tt-line-height-t, var(--bklp-tt-line-height-d, 1.35)));letter-spacing:var(--bklp-tt-letter-spacing-m, var(--bklp-tt-letter-spacing-t, var(--bklp-tt-letter-spacing-d, var(--bklp-tt-letter-spacing, 0px))));word-spacing:var(--bklp-tt-word-spacing-m, var(--bklp-tt-word-spacing-t, var(--bklp-tt-word-spacing-d, var(--bklp-tt-word-spacing, 0px))))} .bklp-card .bklp-desc { font-size: var(--bklp-d-font-size-m, var(--bklp-d-font-size-t, var(--bklp-d-font-size-d, 13px))); line-height: var(--bklp-d-line-height-m, var(--bklp-d-line-height-t, var(--bklp-d-line-height-d, 1.55)));letter-spacing:var(--bklp-d-letter-spacing-m, var(--bklp-d-letter-spacing-t, var(--bklp-d-letter-spacing-d, var(--bklp-d-letter-spacing, 0px))));word-spacing:var(--bklp-d-word-spacing-m, var(--bklp-d-word-spacing-t, var(--bklp-d-word-spacing-d, var(--bklp-d-word-spacing, 0px))))} }