Modernize UI: CSS overhaul, responsive embeds, and accessibility improvements

[Gilleece]

Motivation

• Refresh site visuals and modernize styling to improve legibility and visual depth across the site.
• Improve accessibility and security for external links and embedded content.
• Replace inline presentation rules with centralized CSS and add responsive frame/layout improvements for the placements page.

Description

• Reworked assets/css/main.css with a modernization pass that adds CSS variables (:root), a new radial background, focus-visible outlines, refined logo/hero styles, surface/overlay surfaces, card/table/frame styles, responsive rules, and cleaned up whitespace and spinner rules.
• Updated index.html to remove outdated viewport attributes, apply new classes (logo-link, site-logo, hero-title), move inline styles into CSS, annotate iframes with title and loading="lazy", and add rel="noopener noreferrer" to external target="_blank" links for security and better UX.
• Updated placements.html to use the new layout classes (placements-header, placements-brand, placements-card, placements-frame), simplified markup, added iframe title and loading="lazy", and removed inline sizing in favor of CSS.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 83a9edd7fa

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Remove hard min-width at tablet breakpoint

At the max-width: 980px breakpoint, the placements iframe keeps min-width: 680px, while the container in placements.html still applies Bootstrap m-5 margins (48px on each side), so viewports around 737–775px cannot fit the card and are forced into horizontal scrolling. This introduces a real responsiveness regression on small tablets/landscape phones despite the modernization changes.

Useful? React with 👍 / 👎.