/* ============================================================================ washington.css -- Evergreen design system for the Washington page family Aesthetic: Pacific Northwest field journal meets attorney letterhead. Warm parchment + deep evergreen ink + cedar + moss + lichen accents. Scope: all pages under /washington-* and /washington-business-law/. Body classes used in this file: .wa-hub-page = the /washington-business-law/ flagship hub .vertical-page = the long-form verticals + demand-letter pages Activated by Google Fonts: Fraunces (display serif) + Inter (body sans). Both are loaded by the page . Sergei Tokmakov, Terms.Law, 2026-05-17. v25 rewrite. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. DESIGN TOKENS ---------------------------------------------------------------------------- */ :root { /* Evergreen State palette */ --wa-ink: #0E2618; /* near-black deep forest, body text */ --wa-ink-soft: #25382C; --wa-evergreen: #1F3F2C; /* primary brand */ --wa-evergreen-2: #2C5238; --wa-moss: #4F6F4A; /* secondary */ --wa-lichen: #7E9E6B; /* tertiary, decorative */ --wa-cedar: #A86A2B; /* warm cedar bark accent */ --wa-cedar-soft: #C68A4E; --wa-mist: #EFE9DC; /* card background, warm off-white */ --wa-parchment: #F6F1E4; /* page base, cream */ --wa-parchment-2: #FBF7EC; --wa-stone: #6F6E61; /* meta text */ --wa-rule: #D7CFBC; /* subtle rule lines */ --wa-rule-strong: #B9AE94; /* Typography */ --wa-serif: "Fraunces", "Iowan Old Style", "Georgia", serif; --wa-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --wa-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --wa-maxw: 1180px; --wa-column: 68ch; } /* ---------------------------------------------------------------------------- 2. PAGE FRAME (body + paper texture + main scaffolding) ---------------------------------------------------------------------------- */ body.wa-hub-page, body.vertical-page { margin: 0; background: var(--wa-parchment); color: var(--wa-ink); font-family: var(--wa-sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; } body.wa-hub-page::before, body.vertical-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; opacity: 0.55; } body.wa-hub-page > main, body.vertical-page > main, body.wa-hub-page > main.vertical-main, body.vertical-page main.vertical-main { position: relative; z-index: 1; } body.vertical-page main.vertical-main { display: block; padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); } body.vertical-page .page-wrap { max-width: 920px; margin: 0 auto; padding: 0 1.5rem; position: relative; } body.vertical-page .page-wrap > * { position: relative; z-index: 1; } /* Selection */ body.wa-hub-page ::selection, body.vertical-page ::selection { background: var(--wa-evergreen); color: var(--wa-parchment); } /* Anchor baseline */ body.wa-hub-page a, body.vertical-page a { color: var(--wa-evergreen); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } body.wa-hub-page a:hover, body.vertical-page a:hover { color: var(--wa-cedar); } body.wa-hub-page p, body.vertical-page p { margin: 0 0 1em; } body.wa-hub-page strong, body.vertical-page strong { font-weight: 600; } /* ---------------------------------------------------------------------------- 3. TYPOGRAPHY (H1/H2/H3 in WA-page scope) ---------------------------------------------------------------------------- */ body.vertical-page h1, body.wa-hub-page .heading-1 { font-family: var(--wa-serif); font-weight: 600; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: clamp(2.1rem, 4.8vw, 3.6rem); line-height: 1.06; letter-spacing: -0.02em; color: var(--wa-evergreen); margin: 0.25rem 0 1rem; text-wrap: balance; } body.wa-hub-page .heading-1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.04; margin: 0 0 1.25rem; } body.wa-hub-page .heading-1 .h1-accent { color: var(--wa-cedar); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 80; font-weight: 400; } body.vertical-page h2, body.wa-hub-page .heading-2 { font-family: var(--wa-serif); font-weight: 600; font-variation-settings: "opsz" 72, "SOFT" 20; font-size: clamp(1.55rem, 2.8vw, 2.1rem); line-height: 1.15; letter-spacing: -0.012em; color: var(--wa-evergreen); margin: 2.5rem 0 0.85rem; text-wrap: balance; } body.wa-hub-page .heading-2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; margin: 0 0 1rem; } body.vertical-page h3, body.wa-hub-page .heading-3 { font-family: var(--wa-serif); font-weight: 600; font-variation-settings: "opsz" 36; font-size: 1.25rem; line-height: 1.22; letter-spacing: -0.005em; color: var(--wa-evergreen); margin: 1.75rem 0 0.55rem; } body.wa-hub-page .heading-3 { font-size: 1.35rem; margin: 0 0 0.6rem; } /* Body text inside vertical pages: prefer the serif for long-form readability */ body.vertical-page main.vertical-main p, body.vertical-page main.vertical-main li { font-family: var(--wa-serif); font-weight: 400; font-variation-settings: "opsz" 18, "SOFT" 40; font-size: 1.06rem; line-height: 1.62; color: var(--wa-ink); } body.vertical-page main.vertical-main ul, body.vertical-page main.vertical-main ol { padding-left: 1.4em; margin: 0 0 1em; } body.vertical-page main.vertical-main li { margin-bottom: 0.5em; } /* ---------------------------------------------------------------------------- 4. PILLS / EYEBROWS (used on vertical pages: "Washington educational resource") ---------------------------------------------------------------------------- */ body.vertical-page .pill, body.wa-hub-page .pill { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--wa-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--wa-mist); color: var(--wa-evergreen); border: 1px solid var(--wa-rule); margin-bottom: 1rem; } body.vertical-page .pill::before, body.wa-hub-page .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wa-cedar); } body.vertical-page .pill-cyan, body.wa-hub-page .pill-cyan { background: rgba(126, 158, 107, 0.10); color: var(--wa-evergreen); border-color: rgba(126, 158, 107, 0.35); } /* ---------------------------------------------------------------------------- 5. BREADCRUMBS (both kinds: hub + vertical) ---------------------------------------------------------------------------- */ body.vertical-page .breadcrumbs-row, body.wa-hub-page .wa-hub-breadcrumbs { font-family: var(--wa-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wa-stone); margin: 0 0 1.5rem; } body.vertical-page .breadcrumbs-row a, body.wa-hub-page .wa-hub-breadcrumbs a { color: var(--wa-moss); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 160ms ease, color 160ms ease; } body.vertical-page .breadcrumbs-row a:hover, body.wa-hub-page .wa-hub-breadcrumbs a:hover { border-bottom-color: var(--wa-cedar); color: var(--wa-evergreen); } body.vertical-page .breadcrumbs-row { display: block; } /* ---------------------------------------------------------------------------- 6. LEDE PARAGRAPH (intro paragraph at the top of vertical pages) ---------------------------------------------------------------------------- */ body.vertical-page main.vertical-main .lede { font-family: var(--wa-serif); font-weight: 400; font-variation-settings: "opsz" 24, "SOFT" 50; font-size: clamp(1.12rem, 1.4vw, 1.28rem); line-height: 1.55; color: var(--wa-ink-soft); max-width: 62ch; margin: 1.25rem 0 1.5rem; } /* ---------------------------------------------------------------------------- 7. .wa-meta -- "Last legally reviewed:" timestamp ---------------------------------------------------------------------------- */ body.vertical-page main.vertical-main .wa-meta, body.wa-hub-page .wa-meta { font-family: var(--wa-sans); font-size: 12.5px; line-height: 1.55; color: var(--wa-stone); margin: 0 0 1.5rem; padding-top: 0.6rem; border-top: 1px dashed var(--wa-rule); max-width: 78ch; } body.vertical-page main.vertical-main .wa-meta a { color: var(--wa-moss); } /* ---------------------------------------------------------------------------- 8. .wa-disclaimer-mount -- runtime-injected disclaimer ---------------------------------------------------------------------------- */ .wa-disclaimer-mount { margin: 1.25rem 0 1.75rem; } .wa-disclaimer-mount:not(:empty) { padding: 1rem 1.15rem; background: rgba(126, 158, 107, 0.08); border-left: 3px solid var(--wa-lichen); border-radius: 2px; font-family: var(--wa-sans); font-size: 14px; line-height: 1.55; color: var(--wa-ink-soft); } /* ---------------------------------------------------------------------------- 9. .wa-quote -- block quotation ---------------------------------------------------------------------------- */ .wa-quote { background: transparent; border-left: none; border-top: 1px solid var(--wa-rule-strong); border-bottom: 1px solid var(--wa-rule-strong); border-radius: 0; padding: 1.75rem 0 1.5rem; margin: 2rem 0 0.75rem; font-family: var(--wa-serif); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 36, "SOFT" 80; font-size: clamp(1.18rem, 1.7vw, 1.42rem); line-height: 1.4; color: var(--wa-evergreen); text-wrap: balance; position: relative; } .wa-quote::before { content: "\201C"; position: absolute; font-style: normal; font-weight: 400; font-size: 5rem; line-height: 0.6; color: var(--wa-cedar); left: -0.55rem; top: 0.7rem; opacity: 0.5; font-feature-settings: "lnum"; } .wa-attribution { margin: 0 0 1.5rem; font-size: 12.5px; letter-spacing: 0.04em; color: var(--wa-stone); } .wa-attribution small { font-size: inherit; } /* ---------------------------------------------------------------------------- 10. .wa-rcw -- inline RCW citation chip ---------------------------------------------------------------------------- */ .wa-rcw { font-family: var(--wa-mono); font-size: 0.85em; color: var(--wa-cedar); background: rgba(168, 106, 43, 0.08); padding: 0.08em 0.4em; border-radius: 2px; white-space: nowrap; } /* ---------------------------------------------------------------------------- 11. .wa-check -- evidence checklist ---------------------------------------------------------------------------- */ .wa-check { list-style: none; padding-left: 0; margin: 1rem 0 1.5rem; } .wa-check li { position: relative; padding: 0.15rem 0 0.15rem 1.8rem; margin-bottom: 0.4rem; font-family: var(--wa-serif); font-size: 1.02rem; line-height: 1.55; color: var(--wa-ink); } .wa-check li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 14px; height: 8px; border-left: 2px solid var(--wa-moss); border-bottom: 2px solid var(--wa-moss); transform: rotate(-45deg); } /* ---------------------------------------------------------------------------- 12. .wa-leverage -- "Washington legal leverage" callout card ---------------------------------------------------------------------------- */ .wa-leverage { background: linear-gradient(180deg, rgba(126, 158, 107, 0.10) 0%, rgba(126, 158, 107, 0.04) 100%), var(--wa-parchment-2); border: 1px solid var(--wa-rule); border-left: 4px solid var(--wa-moss); border-radius: 3px; padding: 1.25rem 1.5rem; margin: 1.75rem 0; font-family: var(--wa-sans); font-size: 0.97rem; line-height: 1.6; color: var(--wa-ink); } .wa-leverage h3 { font-family: var(--wa-serif); font-weight: 600; font-variation-settings: "opsz" 24; margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--wa-evergreen); letter-spacing: -0.005em; } /* ---------------------------------------------------------------------------- 13. .wa-warn / .wa-caution -- cedar caution cards ---------------------------------------------------------------------------- */ .wa-warn, .wa-caution { background: linear-gradient(180deg, rgba(168, 106, 43, 0.09) 0%, rgba(168, 106, 43, 0.03) 100%), var(--wa-parchment-2); border: 1px solid rgba(168, 106, 43, 0.35); border-left: 4px solid var(--wa-cedar); border-radius: 3px; padding: 1.1rem 1.4rem; margin: 1.5rem 0; font-family: var(--wa-sans); font-size: 0.94rem; line-height: 1.55; color: #5b3a00; } .wa-warn h3, .wa-caution h3 { font-family: var(--wa-serif); font-weight: 600; font-variation-settings: "opsz" 24; margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--wa-cedar); letter-spacing: -0.005em; } /* ---------------------------------------------------------------------------- 14. .wa-cmp -- two-up comparison card ---------------------------------------------------------------------------- */ .wa-cmp { background: var(--wa-parchment-2); border: 1px solid var(--wa-rule); border-radius: 3px; padding: 1.15rem 1.4rem; margin: 1.25rem 0; font-family: var(--wa-sans); font-size: 0.93rem; line-height: 1.55; color: var(--wa-ink); } .wa-cmp h3 { font-family: var(--wa-serif); font-weight: 600; margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--wa-evergreen); } /* ---------------------------------------------------------------------------- 15. .wa-tier -- service tier mini-card ---------------------------------------------------------------------------- */ .wa-tier { background: var(--wa-parchment-2); border: 1px solid var(--wa-rule); border-left: 3px solid var(--wa-evergreen); border-radius: 3px; padding: 1.15rem 1.4rem; margin: 0.85rem 0; font-family: var(--wa-sans); font-size: 0.94rem; line-height: 1.55; color: var(--wa-ink); } .wa-tier strong { color: var(--wa-evergreen); font-weight: 600; } /* ---------------------------------------------------------------------------- 16. .wa-letter -- sample demand letter excerpt ---------------------------------------------------------------------------- */ .wa-letter { background: var(--wa-mist); border: 1px solid var(--wa-rule-strong); border-radius: 3px; padding: 1.4rem 1.8rem; margin: 1.75rem 0; font-family: var(--wa-serif); font-weight: 400; font-variation-settings: "opsz" 18, "SOFT" 30; font-size: 0.98rem; line-height: 1.65; color: var(--wa-ink); position: relative; } .wa-letter::before { content: "Sample letter"; position: absolute; top: -10px; left: 1.4rem; background: var(--wa-parchment); padding: 0 0.6rem; font-family: var(--wa-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wa-cedar); } /* ---------------------------------------------------------------------------- 17. .wa-cta -- bottom CTA block (verticals use this; hub overrides) ---------------------------------------------------------------------------- */ body.vertical-page .wa-cta { background: radial-gradient(700px 280px at 100% 0%, rgba(126,158,107,0.14), transparent 60%), linear-gradient(180deg, var(--wa-evergreen) 0%, var(--wa-ink) 100%); color: var(--wa-parchment); border: 1px solid var(--wa-evergreen-2); border-radius: 4px; padding: clamp(1.75rem, 3vw, 2.5rem); margin: 2.5rem 0; position: relative; overflow: hidden; } body.vertical-page .wa-cta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--wa-cedar) 0%, var(--wa-moss) 50%, var(--wa-lichen) 100%); } body.vertical-page .wa-cta h3 { font-family: var(--wa-serif); font-weight: 600; font-variation-settings: "opsz" 36, "SOFT" 20; color: var(--wa-parchment); margin: 0 0 0.5rem; font-size: 1.45rem; } body.vertical-page .wa-cta p { font-family: var(--wa-sans); color: rgba(239,233,220,0.85); margin: 0 0 1.25rem; font-size: 0.98rem; line-height: 1.6; } .wa-cta-btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.4rem; font-family: var(--wa-sans); font-weight: 600; font-size: 14.5px; letter-spacing: 0.005em; text-decoration: none !important; border-radius: 2px; min-height: 44px; line-height: 1.2; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease; cursor: pointer; margin-top: 0.35rem; background: var(--wa-parchment); color: var(--wa-evergreen); border: 1px solid var(--wa-parchment); box-shadow: 0 1px 0 rgba(14,38,24,0.12), 0 8px 22px -12px rgba(14,38,24,0.45); } .wa-cta-btn::after { content: "→"; font-family: var(--wa-serif); font-weight: 400; font-style: italic; transition: transform 180ms ease; } .wa-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 0 rgba(14,38,24,0.15), 0 14px 28px -12px rgba(14,38,24,0.55); background: var(--wa-mist); } .wa-cta-btn:hover::after { transform: translateX(3px); } .wa-cta-btn:focus-visible { outline: 2px solid var(--wa-cedar); outline-offset: 3px; } .wa-cta-btn.alt { background: transparent; color: var(--wa-parchment); border: 1px solid rgba(239,233,220,0.55); margin-left: 0.65rem; box-shadow: none; } .wa-cta-btn.alt:hover { background: rgba(239,233,220,0.10); color: var(--wa-parchment); } /* On the hub, CTA card is on parchment, not evergreen */ body.wa-hub-page .wa-cta { background: radial-gradient(700px 280px at 100% 0%, rgba(126,158,107,0.16), transparent 60%), linear-gradient(180deg, var(--wa-parchment-2) 0%, var(--wa-mist) 100%); border: 1px solid var(--wa-rule); border-radius: 4px; color: var(--wa-ink); padding: clamp(2.25rem, 4vw, 3rem); margin: 0; position: relative; overflow: hidden; } body.wa-hub-page .wa-cta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--wa-evergreen) 0%, var(--wa-moss) 50%, var(--wa-cedar) 100%); } body.wa-hub-page .wa-cta h2 { margin-top: 0; margin-bottom: 0.5rem; } body.wa-hub-page .wa-cta > p { font-family: var(--wa-sans); font-size: 1.02rem; line-height: 1.65; color: var(--wa-ink-soft); max-width: 68ch; margin: 0 0 1.75rem; } body.wa-hub-page .wa-cta-btn { background: var(--wa-evergreen); color: var(--wa-parchment); border: 1px solid var(--wa-evergreen); padding: 0.95rem 1.5rem; font-size: 15px; min-height: 48px; } body.wa-hub-page .wa-cta-btn:hover { background: var(--wa-ink); color: var(--wa-parchment); } body.wa-hub-page .wa-cta-btn.alt { background: transparent; color: var(--wa-evergreen); border: 1px solid var(--wa-evergreen); margin-left: 0; } body.wa-hub-page .wa-cta-btn.alt:hover { background: var(--wa-evergreen); color: var(--wa-parchment); } .wa-cta-actions { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: center; margin-bottom: 1.25rem; } /* ---------------------------------------------------------------------------- 18. .wa-form -- availability list / intake form ---------------------------------------------------------------------------- */ body .wa-form { background: var(--wa-mist); border: 1px solid var(--wa-rule-strong); border-radius: 4px; padding: clamp(1.75rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 0.4rem; position: relative; } body.wa-hub-page .wa-form::before { content: ""; position: absolute; inset: -1px -1px auto auto; width: 56px; height: 56px; background: linear-gradient(45deg, transparent 50%, var(--wa-evergreen) 50%); border-top-right-radius: 4px; } body.wa-hub-page .wa-form::after { content: "WA"; position: absolute; top: 6px; right: 8px; font-family: var(--wa-serif); font-style: italic; font-weight: 500; font-variation-settings: "opsz" 14; font-size: 13px; color: var(--wa-parchment); letter-spacing: 0.02em; z-index: 2; } body .wa-form label { font-family: var(--wa-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wa-evergreen); margin-top: 0.85rem; display: block; } body .wa-form input[type="email"], body .wa-form input[type="text"], body .wa-form textarea { font-family: var(--wa-sans); font-size: 16px; line-height: 1.5; color: var(--wa-ink); background: var(--wa-parchment-2); border: 1px solid var(--wa-rule-strong); border-radius: 2px; padding: 0.85rem 1rem; margin-top: 0.4rem; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; min-height: 44px; } body .wa-form input::placeholder, body .wa-form textarea::placeholder { color: rgba(111,110,97,0.7); font-style: italic; font-family: var(--wa-serif); font-size: 15px; } body .wa-form input:focus, body .wa-form textarea:focus { outline: none; border-color: var(--wa-evergreen); box-shadow: 0 0 0 3px rgba(31, 63, 44, 0.10); } body .wa-form textarea { min-height: 130px; resize: vertical; } body .wa-form-submit, body .btn-primary { margin-top: 1.4rem; font-family: var(--wa-sans); font-weight: 600; font-size: 15px; letter-spacing: 0.005em; padding: 0.95rem 1.5rem; min-height: 48px; background: var(--wa-evergreen); color: var(--wa-parchment); border: 1px solid var(--wa-evergreen); border-radius: 2px; cursor: pointer; text-align: left; display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease; width: 100%; } body .wa-form-submit::after { content: "→"; font-family: var(--wa-serif); font-style: italic; font-weight: 400; transition: transform 180ms ease; } body .wa-form-submit:hover { background: var(--wa-ink); transform: translateY(-1px); box-shadow: 0 12px 22px -12px rgba(14,38,24,0.45); } body .wa-form-submit:hover::after { transform: translateX(3px); } body .wa-form-submit:focus-visible { outline: 2px solid var(--wa-cedar); outline-offset: 3px; } .wa-form-note { margin: 0.9rem 0 0; font-size: 12.5px; line-height: 1.55; color: var(--wa-stone); } /* ---------------------------------------------------------------------------- 19. .wa-grid + .card -- hub resource grid + sub-page card grids ---------------------------------------------------------------------------- */ .wa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--wa-rule-strong); border-left: 1px solid var(--wa-rule-strong); margin: 1.25rem 0; } @media (min-width: 980px) { body.wa-hub-page .wa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .wa-grid { grid-template-columns: 1fr; } } body .wa-grid .card, body .card { position: relative; background: var(--wa-parchment-2); padding: 1.65rem 1.5rem 1.85rem; border-right: 1px solid var(--wa-rule-strong); border-bottom: 1px solid var(--wa-rule-strong); text-decoration: none; color: var(--wa-ink); display: flex; flex-direction: column; min-height: 230px; transition: background 200ms ease, transform 200ms ease; overflow: hidden; border-radius: 0; } body .wa-grid .card::before, body .card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--wa-moss); transform: scaleX(0); transform-origin: left; transition: transform 280ms cubic-bezier(.2,.7,.2,1); } body .wa-card-link { display: flex; flex-direction: column; text-decoration: none; color: var(--wa-ink); } body .wa-card-link:hover, body .wa-card-link:focus { background: var(--wa-mist); transform: translateY(-2px); box-shadow: none; } body .wa-card-link:hover::before { transform: scaleX(1); } body .wa-card-link:hover h3, body .wa-card-link:hover .heading-3 { color: var(--wa-cedar); } body .wa-card-link:focus-visible { outline: 2px solid var(--wa-cedar); outline-offset: -2px; } .wa-category { display: inline-block; font-family: var(--wa-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wa-moss); background: transparent; padding: 0; border-radius: 0; margin-bottom: 0.85rem; } body .wa-grid h3, body .card .heading-3 { font-size: 1.2rem; margin: 0 0 0.55rem; transition: color 180ms ease; } body .wa-grid p, body .card p { margin: 0; font-family: var(--wa-sans); font-size: 14.5px; line-height: 1.55; color: var(--wa-ink-soft); } body .wa-card-link::after { content: "Read →"; margin-top: 1.1rem; font-family: var(--wa-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wa-evergreen); align-self: flex-start; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color 180ms ease, transform 200ms ease; } body .wa-card-link:hover::after, body .wa-card-link:focus::after { color: var(--wa-cedar); transform: translateX(2px); } /* "Read more" link variant inside cards (the demand-letters hub uses this) */ .wa-grid a.card-link { font-family: var(--wa-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wa-evergreen); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding-top: 0.85rem; border-bottom: 1px solid currentColor; align-self: flex-start; margin-top: auto; } .wa-grid a.card-link:hover, .wa-grid a.card-link:focus { color: var(--wa-cedar); text-decoration: none; } /* Coming-v24 placeholder card */ body .card[aria-disabled="true"] { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(126, 158, 107, 0.045) 14px 15px), var(--wa-parchment-2); cursor: default; } body .card[aria-disabled="true"] h3, body .card[aria-disabled="true"] .heading-3 { color: var(--wa-stone); } body .card[aria-disabled="true"] p { color: var(--wa-stone); } .wa-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--wa-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wa-cedar); background: rgba(168, 106, 43, 0.08); border: 1px solid rgba(168, 106, 43, 0.30); padding: 0.32rem 0.6rem; border-radius: 999px; margin-bottom: 0.85rem; align-self: flex-start; } .wa-badge::before { content: ""; width: 6px; height: 6px; background: var(--wa-cedar); border-radius: 50%; display: inline-block; } /* ============================================================================ 20. HUB-ONLY SECTIONS (scoped to body.wa-hub-page) These were previously inline