/* ==========================================================================
RESOURCE LIBRARY STYLES — The Unemployment Advocate
--------------------------------------------------------------------------
Load this AFTER styles.css on resource pages:
This file only styles NEW components (cards, article layout, callouts,
byline, TOC, CTA band). Typography (font families, base h1–h6, body)
is intentionally NOT set here so it inherits from styles.css.
The color variables below were sampled from the live site's screenshots.
If styles.css already defines brand variables, swap these values for
your existing tokens so there is one source of truth.
========================================================================== */
:root {
--res-navy: #1c2b4a;
--res-navy-deep: #16233c;
--res-gold: #c08a3e;
--res-gold-dark: #a87732;
--res-cream: #f7f3ec;
--res-paper: #fdfbf7;
--res-ink: #1c2b4a;
--res-body: #4b586e;
--res-muted: #74809a;
--res-line: #e7e1d5;
--res-amber-bg: #faf1e2;
}
/* --------------------------------------------------------------------------
Breadcrumbs
-------------------------------------------------------------------------- */
.breadcrumbs {
font-size: 0.85rem;
color: var(--res-muted);
padding: 1.25rem 0 0;
}
.breadcrumbs ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0;
padding: 0;
}
.breadcrumbs li + li::before {
content: "›";
margin-right: 0.35rem;
color: var(--res-line);
}
.breadcrumbs a {
color: var(--res-muted);
text-decoration: none;
}
.breadcrumbs a:hover { color: var(--res-gold-dark); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--res-ink); }
/* --------------------------------------------------------------------------
Library hero
-------------------------------------------------------------------------- */
.res-hero {
background: linear-gradient(115deg, #f6efe4 0%, #f9f5ee 55%, #eef0f4 100%);
padding: 4rem 0 3.5rem;
text-align: center;
}
.res-hero h1 {
max-width: 18ch;
margin: 0 auto 1rem;
}
.res-hero p {
max-width: 58ch;
margin: 0 auto;
color: var(--res-body);
font-size: 1.1rem;
}
/* --------------------------------------------------------------------------
Featured ("Start here") guide
-------------------------------------------------------------------------- */
.res-featured {
display: block;
background: #fff;
border: 1px solid var(--res-line);
border-left: 5px solid var(--res-gold);
border-radius: 12px;
padding: 2rem 2.25rem;
max-width: 860px;
margin: -2.25rem auto 0; /* overlaps hero edge */
position: relative;
text-decoration: none;
box-shadow: 0 10px 30px rgba(28, 43, 74, 0.08);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.res-featured:hover {
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(28, 43, 74, 0.12);
}
.res-featured .res-eyebrow { margin-bottom: 0.5rem; }
.res-featured h2 {
margin: 0 0 0.5rem;
color: var(--res-ink);
}
.res-featured p { margin: 0; color: var(--res-body); }
.res-featured .res-readmore {
display: inline-block;
margin-top: 1rem;
color: var(--res-gold-dark);
font-weight: 600;
}
.res-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--res-gold-dark);
}
/* --------------------------------------------------------------------------
Topic clusters + cards
-------------------------------------------------------------------------- */
.res-cluster { padding: 3rem 0 0.5rem; }
.res-cluster:last-of-type { padding-bottom: 3rem; }
.res-cluster-head { max-width: 760px; margin-bottom: 1.5rem; }
.res-cluster-head h2 { margin: 0 0 0.4rem; }
.res-cluster-head p { margin: 0; color: var(--res-body); }
.res-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
}
.res-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
background: #fff;
border: 1px solid var(--res-line);
border-top: 4px solid var(--res-gold);
border-radius: 10px;
padding: 1.5rem 1.5rem 1.4rem;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.res-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(28, 43, 74, 0.1);
}
.res-card h3 { margin: 0; color: var(--res-ink); font-size: 1.1rem; }
.res-card p { margin: 0; color: var(--res-body); font-size: 0.95rem; }
.res-card-tag {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--res-muted);
}
/* Unpublished placeholder cards — swap