feat: style roadmap step progress on project detail page

[smrithipiedy]

Summary [required]

This PR improves the roadmap timeline UX on the project detail page. It styles future/uncompleted steps with hollow purple indicators and dashed connector lines, and changes them to solid green dots with solid green connector lines when checked. This provides a clear, high-fidelity visual indication of step progress.

Related Issue [required]

Closes #879

Type of Change [required]

• Bug fix — resolves a broken behaviour
• Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change made
static/style.css	Styled .roadmap-dot to be hollow by default, .roadmap-line to be dashed by default, and changed them both to solid green in .completed state.

File	Change made
utils/recommender.py	Added clear_cache() function
tests/test_basic.py	Added test for cache invalidation

How to Test This PR [required]

1. Clone this branch: git checkout feat/roadmap-progress-styling
2. Run the app: python app.py
3. Open http://127.0.0.1:5000 and view any recommended project page.
4. Verify uncompleted steps have hollow dots and dashed connectors.
5. Click a step checkbox; verify the dot and connector instantly turn solid green.
6. Run the tests: python -m pytest tests/ -v

Expected test output:

81 passed, 0 failed out of 81 tests

Test Results [required]

tests/test_og_tags.py::test_project_twitter_image PASSED [ 92%] tests/test_og_tags.py::test_404_has_og_tags PASSED [ 93%] tests/test_og_tags.py::test_404_has_noindex PASSED [ 95%] tests/test_og_tags.py::test_og_urls_not_hardcoded PASSED [ 96%] tests/test_og_tags.py::test_config_base_url_used PASSED [ 97%] tests/test_og_tags.py::test_og_banner_exists PASSED [ 98%] tests/test_og_tags.py::test_og_banner_dimensions PASSED [100%]

============================= 81 passed in 0.94s ==============================

Self-Review Checklist [required]

• I have read CONTRIBUTING.md and followed all guidelines
• My branch name follows the convention: feat/, fix/, docs/, data/, style/, test/
• I have run python tests/test_basic.py and all 27 tests pass
• I have run flake8 . locally and there are no errors
• I have not introduced any print() or console.log() debug statements
• Every new function I wrote has a docstring
• I have not modified files outside the scope of the linked issue
• If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)
• If I added a project to the dataset, it has all required JSON fields

Notes for Reviewer

• Before my contribution: All the step indicator dots were solid purple/indigo, and all the vertical lines connecting them were solid gray. There was no visual difference between a step that was pending and one that was ready to be worked on.
• With my contribution: Uncompleted/future steps now display with hollow circle indicators and dashed connector lines (as seen in your screenshot). If you click one of the checkboxes to complete a step, that step's indicator dot and the connector line below it will dynamically turn solid green to show your progress.

[vercel]

@smrithipiedy is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.