@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lexend:wght@400;500;600;700&display=swap');
:root { --cream:#f5f1e6; --forest:#1e3a2e; --forest-soft:#335747; --teal:#117c75; --moss:#82965b; --clay:#c76d4b; --line:#d8d8c9; --white:#fffdf8; --shadow:0 18px 45px rgba(30,58,46,.08); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--forest); font-family:'Lexend', sans-serif; font-size:15px; line-height:1.65; } a { color:inherit; text-decoration:none; } button, input, select { font:inherit; } button, a { -webkit-tap-highlight-color:transparent; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:22px; max-width:1240px; margin:auto; padding:20px 5vw; position:relative; z-index:5; } .brand img { width:64px; height:64px; object-fit:contain; display:block; } .site-nav { display:flex; gap:20px; align-items:center; } .site-nav a { font-size:12px; color:var(--forest-soft); transition:color .2s; } .site-nav a:hover, .text-link:hover { color:var(--clay); } .header-search { display:flex; border-bottom:1px solid var(--forest); } .header-search input { width:150px; border:0; background:transparent; padding:7px 0; outline:0; font-size:12px; color:var(--forest); } .header-search button { border:0; background:none; padding:7px 0 7px 10px; color:var(--forest); font-size:12px; cursor:pointer; } .menu-toggle { display:none; background:none; border:0; padding:8px; } .menu-toggle span { display:block; width:22px; height:2px; background:var(--forest); margin:4px; }
.hero, .category-hero, .category-section, .resource-section, .search-section, .trust-band { max-width:1160px; margin-left:auto; margin-right:auto; padding-left:5vw; padding-right:5vw; } .home-hero { padding-top:clamp(70px,12vw,150px); padding-bottom:clamp(80px,10vw,135px); } .eyebrow { color:var(--teal); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 18px; } h1, h2, h3, p { margin-top:0; } h1, h2 { font-family:'DM Serif Display', Georgia, serif; font-weight:400; letter-spacing:0; line-height:1.08; } h1 { font-size:clamp(3.2rem,7vw,6.8rem); max-width:780px; margin-bottom:26px; } h2 { font-size:clamp(2.2rem,4vw,3.8rem); margin-bottom:15px; } h3 { font-size:18px; line-height:1.3; margin-bottom:10px; } .lede { max-width:570px; color:var(--forest-soft); font-size:clamp(1rem,1.7vw,1.25rem); } .hero-search { display:flex; max-width:650px; margin-top:42px; border:1px solid var(--forest); background:var(--white); padding:5px; border-radius:2px; } .hero-search input { flex:1; min-width:0; padding:13px 16px; border:0; outline:0; background:transparent; color:var(--forest); } .hero-search button { border:0; padding:12px 18px; background:var(--forest); color:var(--cream); cursor:pointer; display:flex; gap:25px; align-items:center; } .search-note { font-size:11px; color:var(--forest-soft); margin:12px 0 0 4px; }
.category-section { padding-bottom:110px; } .section-heading { display:flex; justify-content:space-between; gap:35px; align-items:end; margin-bottom:35px; } .section-heading > p { max-width:270px; color:var(--forest-soft); font-size:13px; } .category-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } .category-card { display:flex; align-items:center; gap:18px; padding:24px; min-height:145px; background:var(--white); border:1px solid transparent; transition:transform .25s, box-shadow .25s, border-color .25s; } .category-card:hover, .resource-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line); } .category-card > span:nth-child(2) { flex:1; } .category-card strong { display:block; font-size:16px; margin-bottom:5px; } .category-card small { display:block; max-width:250px; color:var(--forest-soft); line-height:1.5; } .category-card > b { font-size:20px; font-weight:400; } .category-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#e0ece5; color:var(--teal); } .category-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; } .accent-2 .category-icon { background:#edf0de; color:#687c43; } .accent-3 .category-icon { background:#e4eeee; color:#117c75; } .accent-4 .category-icon { background:#f5e2d9; color:#a8553d; } .accent-5 .category-icon { background:#e1ebdf; color:var(--forest); }
.trust-band { background:var(--forest); color:var(--cream); max-width:none; padding-top:50px; padding-bottom:50px; text-align:center; } .trust-band .eyebrow { color:#a9c5aa; } .trust-band p:not(.eyebrow) { font-family:'DM Serif Display', Georgia, serif; font-size:clamp(1.8rem,4vw,3.3rem); margin-bottom:15px; } .trust-band span { color:#b8c8ba; font-size:11px; }
.category-page { --accent:var(--teal); } .category-hero { padding-top:clamp(55px,9vw,110px); padding-bottom:70px; border-bottom:1px solid var(--line); } .category-hero h1 { font-size:clamp(3.3rem,7vw,6rem); max-width:700px; } .resource-section { padding-top:70px; padding-bottom:120px; } .resource-toolbar { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:30px; } .resource-toolbar h2 { font-size:clamp(2rem,4vw,3.1rem); } .filters { display:flex; align-items:end; gap:12px; flex-wrap:wrap; } .filters label { display:block; width:100%; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--forest-soft); } .filters select, .sort-button { border:1px solid var(--line); background:var(--white); color:var(--forest); padding:10px 12px; font-size:12px; } .sort-button { cursor:pointer; } .resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .resource-card { background:var(--white); border:1px solid transparent; padding:25px; display:flex; flex-direction:column; min-height:410px; transition:transform .25s, box-shadow .25s, border-color .25s; } .card-top { display:flex; justify-content:space-between; margin-bottom:22px; } .category-label { color:var(--teal); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; } .card-arrow { color:var(--clay); } .resource-card > p { color:var(--forest-soft); font-size:13px; line-height:1.6; } .resource-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; border-top:1px solid var(--line); padding-top:15px; margin-top:auto; } .resource-meta dt { color:var(--forest-soft); font-size:10px; margin-bottom:3px; } .resource-meta dd { margin:0; font-size:12px; line-height:1.4; } .tag-list { display:flex; gap:6px; flex-wrap:wrap; margin:18px 0; } .tag { background:#e5eee6; color:var(--forest-soft); padding:4px 8px; border-radius:20px; font-size:10px; } .text-link { color:var(--teal); font-size:12px; font-weight:600; margin-top:auto; } .empty-state { padding:35px; background:var(--white); color:var(--forest-soft); }
.search-section { padding-bottom:100px; } .search-results { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); } .search-result { display:grid; grid-template-columns:170px 1fr 2fr 25px; gap:15px; align-items:center; padding:20px; background:var(--white); transition:background .2s; } .search-result:hover { background:#fdfbf2; } .search-result strong { font-size:14px; } .search-result span:not(.category-label) { color:var(--forest-soft); font-size:12px; } .search-result b { color:var(--clay); font-weight:400; } .location-note { color:var(--clay) !important; font-size:12px !important; } .no-results { padding:50px 35px; text-align:center; } .empty-mark { display:grid; place-items:center; width:42px; height:42px; margin:0 auto 18px; border:1px solid var(--clay); border-radius:50%; color:var(--clay); font-family:'DM Serif Display', Georgia, serif; font-size:22px; } .no-results h3 { font-family:'DM Serif Display', Georgia, serif; font-size:clamp(22px,3vw,28px); font-weight:400; margin-bottom:8px; } .no-results p { max-width:450px; margin:0 auto; color:var(--forest-soft); font-size:13px; } .empty-links { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:24px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:35px 5vw; border-top:1px solid var(--line); max-width:1240px; margin:auto; color:var(--forest-soft); font-size:11px; } .footer-brand { font-family:'DM Serif Display', Georgia, serif; font-size:25px; color:var(--forest); } .site-footer p { margin:0; } .home-button { display:inline-flex; gap:25px; align-items:center; margin-top:25px; padding:13px 18px; background:var(--forest); color:var(--cream); font-size:12px; } .not-found-page .category-hero { border-bottom:0; padding-bottom:150px; } .reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); } .reveal.is-visible { opacity:1; transform:none; }
@media (max-width:800px) { .site-header { grid-template-columns:55px 1fr auto; gap:10px; padding-top:14px; } .brand img { width:53px; height:53px; } .menu-toggle { display:block; grid-column:3; grid-row:1; } .header-search { grid-column:2 / 4; grid-row:2; } .header-search input { width:100%; } .site-nav { display:none; position:absolute; top:78px; left:5vw; right:5vw; padding:15px; background:var(--white); box-shadow:var(--shadow); flex-direction:column; align-items:stretch; gap:0; } .site-nav.is-open { display:flex; } .site-nav a { padding:10px; border-bottom:1px solid var(--line); } .category-grid, .resource-grid { grid-template-columns:1fr; } .section-heading, .resource-toolbar { display:block; } .section-heading > p { margin-top:20px; } .filters { margin-top:25px; } .filters select { flex:1; } .search-result { grid-template-columns:1fr 25px; gap:7px; } .search-result .category-label, .search-result span:not(.category-label) { grid-column:1; } .search-result strong { grid-column:1; grid-row:2; } .search-result span:not(.category-label) { grid-row:3; } .search-result b { grid-column:2; grid-row:1 / 4; } .site-footer { flex-direction:column; align-items:flex-start; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }