Change a few CSS variables for a quick reskin. Reach for the classes when you want more.
The card reads its colours, radius, and spacing from --hrefc-* variables. Override them on .hrefc-popup and you're done — no JavaScript.
<style>
.hrefc-popup {
--hrefc-bg: #1a1530;
--hrefc-fg: #ece8ff;
--hrefc-border: #3a2f5e;
--hrefc-radius: 14px;
}
</style>Hover CSS to see the purple card this page sets up.
Or CSS custom properties on MDN.
Every knob, same prefix: --hrefc-bg, --hrefc-fg, --hrefc-border, --hrefc-radius, --hrefc-shadow, --hrefc-pad, --hrefc-size, --hrefc-title, --hrefc-desc, --hrefc-thumb-bg.
By default the card follows the system theme via prefers-color-scheme. To pin it, set the theme yourself:
Hrefc({
popup: { theme: 'dark' }, // 'auto' | 'light' | 'dark'
});For finer control, target the parts directly: .hrefc-title, .hrefc-desc, .hrefc-favicon, .hrefc-thumb, and the rest. If you'd rather throw out the markup entirely and build your own card, see custom render.