/* ============================================================================ * holders.vote — "Mono" (example-black-and-white.css) * * Black, white, and gray only. Professional, modern, and bold: a tight * grotesk voice, heavy uppercase headings, square corners, and hard edges. * Light by default, inverting cleanly to true black in dark mode. * * Scoped to `[data-hv-community]` so it applies to whichever community loads it. * ========================================================================== */ /* --- Light: paper white + ink -------------------------------------------- */ [data-hv-community] { --hv-accent: #0a0a0a; /* ink is the accent */ --hv-accent-strong: #000000; --hv-accent-soft: #ededed; --hv-up: #0a0a0a; /* upvote = solid black */ --hv-down: #8a8a8a; /* downvote = mid gray */ --hv-bg: #ffffff; --hv-surface: #ffffff; --hv-surface-2: #f4f4f4; --hv-border: #e4e4e4; --hv-border-strong: #0a0a0a; /* bold black hairlines */ --hv-text: #0a0a0a; --hv-text-muted: #5c5c5c; --hv-text-faint: #9a9a9a; --hv-danger: #0a0a0a; --hv-success: #0a0a0a; --hv-warning: #0a0a0a; --hv-radius: 2px; --hv-radius-sm: 2px; --hv-radius-lg: 2px; --hv-shadow: none; --hv-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.18); /* Modern bold grotesk. Set on the wrapper (not only the token) because * font-family inherits from , an ancestor outside this scope. */ --hv-font: "Helvetica Neue", Inter, Helvetica, Arial, system-ui, sans-serif; font-family: var(--hv-font); color: var(--hv-text); } /* Masthead: heavy border, no fuss. */ [data-hv-community] .hv-community-header { background: var(--hv-surface); border: 2px solid var(--hv-border-strong); } [data-hv-community] .hv-community-name { font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; } [data-hv-community] .hv-community-byline { color: var(--hv-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 600; } /* Cards: crisp 1px frame, hard black edge on hover. */ [data-hv-community] .hv-card { border: 1px solid var(--hv-border); } [data-hv-community] .hv-post-card { transition: border-color 0.12s ease; } [data-hv-community] .hv-post-card:hover { border-color: var(--hv-border-strong); } /* Headline-grade titles. */ [data-hv-community] .hv-post-title { font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.15; } [data-hv-community] .hv-post-meta { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; font-size: 0.7rem; } [data-hv-community] .hv-post-content { line-height: 1.7; } [data-hv-community] .hv-post-content a { color: var(--hv-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } /* Vote + buttons: monochrome, bold, filled-on-primary. */ [data-hv-community] .hv-vote-score { font-weight: 800; } [data-hv-community] .hv-btn { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 2px; } [data-hv-community] .hv-btn-primary { background: #0a0a0a; color: #ffffff; border-color: #0a0a0a; } [data-hv-community] .hv-btn-ghost { border: 1.5px solid #0a0a0a; color: #0a0a0a; } /* Comment rails as solid black spines. */ [data-hv-community] .hv-comment-rail { background: #0a0a0a; } /* --- Dark: true black ---------------------------------------------------- */ @media (prefers-color-scheme: dark) { [data-hv-community] { --hv-accent: #ffffff; --hv-accent-strong: #ffffff; --hv-accent-soft: #1a1a1a; --hv-up: #ffffff; --hv-down: #7a7a7a; --hv-bg: #000000; --hv-surface: #0b0b0b; --hv-surface-2: #161616; --hv-border: #262626; --hv-border-strong: #ffffff; --hv-text: #fafafa; --hv-text-muted: #a8a8a8; --hv-text-faint: #6a6a6a; } [data-hv-community] .hv-btn-primary { background: #ffffff; color: #000000; border-color: #ffffff; } [data-hv-community] .hv-btn-ghost { border-color: #ffffff; color: #ffffff; } [data-hv-community] .hv-comment-rail { background: #ffffff; } [data-hv-community] .hv-post-content a { color: #ffffff; } }