/* ============================================================================ * holders.vote — "Ethereum" (example-ethereum.css) * * Built from Ethereum's brand palette: the periwinkle #627EEA of the colored * ETH mark, plus the slate-blue facets of the diamond logo (#8A92B2, #454A75, * #C0CBF6). Clean Inter-style typography, light by default with a deep dark * variant. * * Scoped to `[data-hv-community]` so it applies to whichever community loads it. * ========================================================================== */ /* --- Light: periwinkle on porcelain -------------------------------------- */ [data-hv-community] { --hv-accent: #627eea; /* Ethereum periwinkle */ --hv-accent-strong: #4b5bbf; --hv-accent-soft: #e6ebfb; --hv-up: #627eea; /* brand blue upvote */ --hv-down: #8a92b2; /* diamond mid-slate downvote */ --hv-bg: #f6f7fd; /* faint periwinkle-tinted page */ --hv-surface: #ffffff; --hv-surface-2: #eef0fb; --hv-border: #dce0f5; --hv-border-strong: #c0cbf6; /* diamond light facet */ --hv-text: #1b1b2e; /* near-black with a blue cast */ --hv-text-muted: #62688f; /* diamond dark-slate */ --hv-text-faint: #8a92b2; --hv-radius: 12px; --hv-radius-sm: 8px; --hv-radius-lg: 16px; --hv-shadow: 0 1px 2px rgba(69, 74, 117, 0.06), 0 10px 30px rgba(69, 74, 117, 0.08); --hv-shadow-lg: 0 18px 50px rgba(69, 74, 117, 0.18); /* Inter is Ethereum.org's typeface; fall back to the system UI stack. Set on * the wrapper because font-family inherits from , outside this scope. */ --hv-font: Inter, "Helvetica Neue", system-ui, -apple-system, sans-serif; font-family: var(--hv-font); color: var(--hv-text); } /* Masthead: soft periwinkle wash + the brand blue name. */ [data-hv-community] .hv-community-header { background: linear-gradient(135deg, #ffffff 0%, #eef1fc 100%); border: 1px solid var(--hv-border); } [data-hv-community] .hv-community-name { font-weight: 700; letter-spacing: -0.02em; color: var(--hv-accent-strong); } [data-hv-community] .hv-community-byline { color: var(--hv-text-muted); } /* Cards: rounded, faceted-light border, gentle brand lift on hover. */ [data-hv-community] .hv-card { border: 1px solid var(--hv-border); } [data-hv-community] .hv-post-card { transition: box-shadow 0.2s ease, border-color 0.2s ease; } [data-hv-community] .hv-post-card:hover { border-color: var(--hv-border-strong); box-shadow: var(--hv-shadow); } [data-hv-community] .hv-post-title { font-weight: 650; letter-spacing: -0.01em; } [data-hv-community] .hv-post-title-link:hover .hv-post-title { color: var(--hv-accent); } [data-hv-community] .hv-post-content { line-height: 1.72; } [data-hv-community] .hv-post-content a { color: var(--hv-accent); } [data-hv-community] .hv-post-content blockquote { border-left: 3px solid var(--hv-accent); color: var(--hv-text-muted); } /* Vote pill + primary button in brand periwinkle. */ [data-hv-community] .hv-vote { background: var(--hv-surface-2); border-radius: var(--hv-radius-lg); } [data-hv-community] .hv-btn-primary { background: var(--hv-accent); border-color: var(--hv-accent-strong); } [data-hv-community] .hv-btn-ghost { border: 1px solid var(--hv-border-strong); } [data-hv-community] .hv-chip-accent { background: var(--hv-accent-soft); color: var(--hv-accent-strong); } /* Comment rails as slate threads. */ [data-hv-community] .hv-comment-rail { background: var(--hv-border-strong); } /* --- Dark: deep slate + luminous periwinkle ------------------------------ */ @media (prefers-color-scheme: dark) { [data-hv-community] { --hv-accent: #8aa0ff; /* lightened periwinkle for contrast */ --hv-accent-strong: #627eea; --hv-accent-soft: #1e2240; --hv-up: #8aa0ff; --hv-down: #6b7196; --hv-bg: #0e0f16; /* near-black, blue-cast */ --hv-surface: #161721; --hv-surface-2: #1e2030; --hv-border: #2a2c3f; --hv-border-strong: #454a75; /* diamond dark facet */ --hv-text: #ececf3; --hv-text-muted: #a7adc9; --hv-text-faint: #6b7196; --hv-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45); --hv-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6); } [data-hv-community] .hv-community-header { background: linear-gradient(135deg, #1a1c2b 0%, #14151f 100%); } }