Visual refresh: confident polish pass

[devin-ai-integration]

Visual refresh: confident polish pass

Summary

A visual polish pass across the site that makes noticeable improvements while keeping the site recognizably BMT. No layout restructuring, no font changes, no color scheme changes — just elevated execution of the existing design.

Key visible changes:

• Register button in nav restyled from chunky teal pill → clean teal text link with arrow (desktop); solid teal button (mobile)
• Homepage description wrapped in a white bordered card; "largest student-run math competition" highlighted
• Event cards redesigned: date moved above title as uppercase label, rounded-2xl, arrow animation on hover, more padding
• Banner gets more generous padding and shadow
• Newsletter section wrapped in styled card; Mailchimp embed overridden to match site aesthetic (teal subscribe button, clean inputs)
• Sponsors section wrapped in a single card with centered tier layout and tracking-widest tier labels
• Teal accent bar added under all page/section h1 headings
• About page team columns wrapped in white cards with border dividers between role groups; role titles become uppercase tracked labels
• Footer completely rebuilt: 4-column sitemap (Tournaments, Resources, Organization, Connect) + copyright bar
• Section listings (News, Blog): refined hover states, font-medium titles, uppercase year headers

Under-the-hood changes:

• Global smooth transitions on all interactive elements (a, button, input, etc.)
• focus-visible states for keyboard navigation (teal outline)
• Brand-matching ::selection color
• Skip-to-content link and aria-label on nav elements
• Removed unused Inter font import
• Renamed #content-wrapper → #main-content (with matching JS update)
• Added .agents/skills/frontend-design/SKILL.md (design reference doc, not functional code)

Review & Testing Checklist for Human

• TOC scroll behavior: The #content-wrapper was renamed to #main-content (both HTML + JS updated). Verify table-of-contents highlighting still works on pages with TOCs (e.g. event detail pages). This is the highest-risk functional change.
• Mailchimp newsletter embed: The newsletter section is now inside a card wrapper with CSS overrides using !important. Verify the subscribe form still renders and submits correctly — the Mailchimp external CSS may interact unexpectedly with the new container.
• Mobile responsiveness: The footer is now a 4-column grid (grid-cols-2 md:grid-cols-4), and the about page team uses card columns. Check these at mobile breakpoints (especially 320px–375px) for overflow or cramped spacing.
• Event card date placement: Date is now above the title (was below). This is a deliberate design choice — confirm the team likes this information hierarchy change.
• Global transitions: All a, button, input, select, textarea elements now have transition: 0.15s. Verify this doesn't cause unwanted animation on KaTeX math elements or other non-interactive elements that happen to use these tags.

Test Plan

1. Smoke test all pages: Homepage, News, Blog, About, Resources, event pages. Verify layout doesn't break, cards render correctly, nothing overflows.
2. Test interactivity: Hover states on event cards, nav links, sponsor logos, blog listings. Tab through with keyboard and verify focus indicators appear.
3. Test newsletter form: Fill out the email input and click Subscribe. Confirm Mailchimp processes it (or at least opens the expected modal/redirect).
4. Test mobile nav: Open the hamburger menu on mobile. Verify the Register button appears and nav items are readable.
5. Test TOC scroll: On a page with a table of contents (event pages likely have them), scroll and verify the active heading is highlighted in the TOC.

Notes

• Live preview available at: https://user:5871b8a86b185af9f04284a9d0b87f9b@website-audit-app-tunnel-h0tjbnxe.devinapps.com (static build served via Python http.server, rebuilt manually after changes)
• Requested by: @oliver-ni
• Devin session: https://app.devin.ai/sessions/84d4995094994f54bf2bd04da2cd5d6f
• Design direction: "Polish it with confidence" after initial iterations were deemed "another haircut situation" — this version leans into noticeable card-based treatments, accent bars, and bolder styling while keeping the same structure/font/colors

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring