/* ============================================================================ * holders.vote — "Blues" (example-blues.css) * * An elegant, restrained theme built from layered light and dark blues with a * serious serif voice. Light by default; a coordinated deep-navy variant kicks * in for viewers who prefer dark mode. * * Scoped to `[data-hv-community]` so it applies to whichever community loads it. * ========================================================================== */ /* --- Light: porcelain + royal blue --------------------------------------- */ [data-hv-community] { --hv-accent: #1d4ed8; /* royal blue */ --hv-accent-strong: #1740b0; --hv-accent-soft: #dbe6fb; --hv-up: #2563eb; /* bright blue upvote */ --hv-down: #64748b; /* slate downvote (stays in-palette) */ --hv-bg: #eef3fb; /* pale sky page */ --hv-surface: #ffffff; --hv-surface-2: #e6eefb; --hv-border: #d3e0f2; --hv-border-strong: #b6cceb; --hv-text: #12233d; /* deep navy ink */ --hv-text-muted: #4a6180; --hv-text-faint: #8aa0bd; --hv-radius: 10px; --hv-radius-sm: 6px; --hv-radius-lg: 14px; --hv-shadow: 0 1px 2px rgba(18, 35, 61, 0.05), 0 8px 24px rgba(18, 35, 61, 0.07); --hv-shadow-lg: 0 16px 48px rgba(18, 35, 61, 0.16); /* A serious, editorial serif. Set here (not just the token) because * font-family, like color, is inherited from — an ancestor of this * wrapper — so the token override alone wouldn't reach the content. */ --hv-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; font-family: var(--hv-font); color: var(--hv-text); } /* Masthead: quiet gradient, hairline rule, generous name. */ [data-hv-community] .hv-community-header { background: linear-gradient(180deg, #ffffff, #f2f7fe); border: 1px solid var(--hv-border); } [data-hv-community] .hv-community-name { font-weight: 600; letter-spacing: -0.015em; color: var(--hv-accent-strong); } [data-hv-community] .hv-community-byline { font-style: italic; color: var(--hv-text-muted); } /* Cards: soft-edged, faint blue 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: 600; letter-spacing: -0.01em; } [data-hv-community] .hv-post-title-link:hover .hv-post-title { color: var(--hv-accent); } /* Long-form post body: comfortable serif measure. */ [data-hv-community] .hv-post-content { line-height: 1.75; } [data-hv-community] .hv-post-content a { color: var(--hv-accent); text-underline-offset: 2px; } [data-hv-community] .hv-post-content blockquote { border-left: 3px solid var(--hv-accent-soft); color: var(--hv-text-muted); } /* Vote pill + buttons in matching blues. */ [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); } /* Comment rails as thin indigo threads. */ [data-hv-community] .hv-comment-rail { background: var(--hv-border-strong); } /* --- Dark: midnight navy ------------------------------------------------- */ @media (prefers-color-scheme: dark) { [data-hv-community] { --hv-accent: #60a5fa; /* luminous sky blue */ --hv-accent-strong: #3b82f6; --hv-accent-soft: #14304f; --hv-up: #60a5fa; --hv-down: #7286a3; --hv-bg: #0a1524; /* deep navy page */ --hv-surface: #0f2135; --hv-surface-2: #16304a; --hv-border: #21384f; --hv-border-strong: #34506e; --hv-text: #e6eef9; --hv-text-muted: #a3b6ce; --hv-text-faint: #6b83a1; --hv-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4); --hv-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6); } [data-hv-community] .hv-community-header { background: linear-gradient(180deg, #12263c, #0d1e31); } }