Homepage: add per-category tool counts, beige accent, improved dark mode contrast

[Copilot]

Homepage category cards lacked visual weight in light mode, had low contrast in dark mode, and showed no quantitative data. This PR addresses all three.

Category cards

• Added dynamic tool count badge per card via Liquid (site.tools | where_exp: "item", "item.categories contains 'heat'" | size)
• Cards now render a footer row with a teal pill stat and an animated → CTA
• Top accent border (3px teal), icon wrapped in beige bg container, box-shadow for depth

{% assign heat_count = site.tools | where_exp: "item", "item.categories contains 'heat'" | size %}
<span class="category-card__stat">{{ heat_count }} tool{% if heat_count != 1 %}s{% endif %}</span>

Design tokens (tokens.css)

• Added --color-beige-50/100/200/400/600 ramp for both light and dark modes (warm amber tones in light; muted amber-brown in dark)
• Increased dark mode text contrast: --color-text-primary lifted to #F0FAF5, secondary to #B8E8D4
• Raised dark mode border opacity (0.14 / 0.24) for visible card edges

Stats bar

• Numbers changed from neutral grey to --color-teal-400 with font-weight: 700
• Top/bottom borders upgraded from 0.5px to 1px using --color-border-medium

Section backgrounds

• .categories and .case-studies sections now use --color-beige-50 (adapts in dark mode to #2A2015) for sectional rhythm

Explore feature cards

• Borders raised to --color-border-medium, box-shadow added
• Dark mode icon background set via both [data-theme="dark"] and prefers-color-scheme: dark guards

Original prompt

Tasks and Updates for the Homepage in Urban-Climate-Tools Repository

1. Homepage:

• Add stats to the cards displayed on the homepage.
• Improve the design of the tool cards to make them more prominent, especially in light mode.
• Enhance the dark mode design by adding more contrast.
• Use a beige accent color if needed to improve the visual appeal.
• Ensure the entire page is easy to read and visually clear in both light and dark modes.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: I want the tool cards on the tools page to have same formatting/style as homepage but don't remove any data, these cards can be bigger with more information. also the individual tool pages need design fix. the margins are wrong and the page needs to be more designed for easy read.

the individual case study pages still 404.

Assistant: To address the updates and fixes you requested for the Urban-Climate-Tools repository, here's the breakdown of the tasks:

1. Tool Cards on the Tools Page:

   • Update the formatting/style of the tool cards on the tools page to match those on the homepage.
   • Allow for larger cards with additional information—keep all existing data but adjust the layout and spacing.

2. Individual Tool Pages:

   • Fix the margins to improve alignment and spacing.
   • Enhance the page design for better readability (e.g., add headings, sections, and appropriate padding).

3. Case Study Pages (404 Error):

   • Fix the 404 errors on individual case study pages.
   • Verify the issue, potentially involving missing routes or files, and implement fixes.

Would you like this to be implemented in the repository by opening a pull request with these changes? Let me know if you'd like further clarification.

User: clarify further

Assistant: You want the following changes in your GitHub repository mk-ws-git/Urban-Climate-Tools:

1. On Tools Page:

• Update the tool cards' design to match the style of the homepage cards.
• Tool cards can be larger and include more information, but ensure no data currently displayed is removed.

Outcome Expected:

• Uniform styling between the tools page and homepage cards.
• Bigger cards with new spacing/layout improvements while retaining all original information.

2. Individual Tool Pages:

• Fix the incorrect margins.
• Improve the overall page design to make it easier to read and navigate, such as adding better section spacing, headings, and padding.

Outcome Expected:

• Correct margin alignment.
• A visually improved and easier-to-read layout.

3. Case Study Pages:

• Resolve the 404 error for individual case study pages.
• Investigate if it's an issue with missing routes, templates, or files, and correct it.

Outcome Expected:

• Case study pages are accessible and no longer return a 404 error.

Would you like me to start working on opening a pull request for these adjustments, or should I assist in another way?

User: fix them for me

Assistant: I’ve started addressing the issues and fixes in your repository Urban-Climate-Tools. A pull request will be created with the necessary updates for the design and error fixes. Let me know if there’s anything else you’d like to add!

User: Accepted Confirmation: Are you sure?

Assistant: I’ve started working on the requested fixes and updates for your repository Urban-Climate-Tools. You can track the progress directly on the pull request that will be created for this task. Let me know if you have any other instructions or additional changes to incorporate!

User: fix the case study map. not working. also this should be displayed or linked on case study page also. add more links to the footer. the link to case studies works from homepage, but the individual case study pages need design improvements (sections, buttons, etc)

Assistant: I’ve started working on fixing the case study map, improving the design of the individual case study pages, and adding more links to the footer. You’ll be notified once the changes have been implemented. Let me know if you need additional updates!

User: Accepted Confirmation: Are you sure?

Assistant: I’ve started implementing the fixes for the case study map, improving the individual case study pages, and updating the footer with additional links in your repository Urban-Climate-Tools. You can track the progress of these updates directly in the pull request that will be created. Let me know if you have more details to add!

User: on the homepage add the stats on cards. also enhance the design of the tool cards so they are more prominent especially in light mode. the entire page is hard to read in dark mode. add more contrast. use a beige color for accent if needed

Assistant: I’ve started making the requested enhancements to the homepage, including adding stats to the cards, improving tool card design

User: continue

Assistant: I’ve ...

This pull request was created from Copilot chat.

---

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.