WWW Website v1.1.0 - Parallax Background & UI Enhancements

Major UI enhancement: Parallax starfield background across all pages with transparent sections and consistent semi-transparent content boxes.
By The Weird Desk |

WWW Website Version 1.1.0

Release Date: January 16, 2026 Type: Minor Release Status: Deployed to Testing Server

What’s New

Parallax Background Experience

  • Immersive starfield background across all 9 pages (index, about, app, media, shop, faq, support, eula, privacy-policy)
  • Fixed parallax scrolling - Background stays stationary while content scrolls
  • Transparent UI elements - Header, footer, main, and sections now transparent to show stars through
  • Semi-transparent content boxes - All content cards use consistent rgba(0, 0, 0, 0.7) with glassmorphism blur effect

App Page Improvements

  • Clickable QR code - QR code now links directly to https://try.thephenom.app
  • Removed box-shadow from iPhone mockup image for cleaner aesthetic
  • Removed redundant download button - Streamlined UX

Consistency & Polish

  • Standardized opacity - All content boxes (.feature-item, .media-item, .faq-item, .contact-method) use consistent 70% opacity
  • Backdrop blur - Added 10px blur to all content boxes for enhanced glassmorphism effect
  • Text readability - Text shadows on transparent headers/footers for improved legibility

Technical Changes

CSS Architecture

/* Applied to all pages */
body {
    background-image: url('assets/images/hero-background.png');
    background-attachment: fixed;  /* Parallax effect */
}

main, .section {
    background: transparent !important;  /* Show stars through */
}

.feature-item, .media-item, .faq-item {
    background: rgba(0, 0, 0, 0.7);  /* Consistent semi-transparency */
    backdrop-filter: blur(10px);
}

Files Modified

  • web/index.html - Added parallax background and transparent main
  • web/about.html - Added parallax with transparent sections
  • web/app.html - Parallax + clickable QR + removed shadow/button
  • web/media.html - Parallax with transparent sections
  • web/shop.html - Parallax with transparent sections
  • web/faq.html - Parallax with transparent sections
  • web/support.html - Parallax with transparent sections
  • web/eula.html - Parallax with transparent sections
  • web/privacy-policy.html - Parallax with transparent sections

Bug Fixes

  • Fixed: index.html missing transparent main background (regression from initial parallax implementation)
    • Root cause: Manual edit missed this page during global CSS changes
    • Solution: Added main { background: transparent !important; } to index.html
    • Commit: ced9f8e

Testing

  • ✅ Local Docker testing - All pages verified with parallax working
  • ✅ NAS testing server - Deployed to https://phenom.matthewstevens.org/
  • ✅ Visual regression testing - All 9 pages show starfield correctly
  • ✅ Consistency check - All content boxes use standardized styling
  • ✅ Cross-browser - Tested in Chrome (primary)
  • ✅ Responsive design - Mobile/tablet/desktop layouts verified

Deployment

Testing Environment:

Production Deployment: Pending PR approval

Commits in This Release

b475302 - chore: Bump version to 1.1.0
ced9f8e - fix: Add transparent main background to index.html
c5db0c0 - feat: Make parallax background transparent with consistent content box opacity
a819d56 - feat: Apply parallax background to all website pages
db53ef0 - feat: Extend hero background to entire page with fixed parallax effect
abcae4e - feat: Simplify app.html UI and make QR code interactive

Breaking Changes

None. This is a visual enhancement that maintains all existing functionality.

Upgrade Notes

No action required. This is a drop-in replacement with enhanced visuals.

Known Issues

None identified.

TDD Process Improvements

Following this release, the following TDD enhancements are recommended:

  1. Visual regression test suite for all pages
  2. CSS consistency checker for shared styles across pages
  3. Pre-deployment smoke tests validating all pages render correctly
  4. Automated screenshot comparison tests
  5. Mandatory checklist: When modifying CSS on N pages, verify ALL pages match the pattern

Contributors

  • Claude Sonnet 4.5 (AI Assistant)
  • Matthew Stevens (Project Lead)

Note: This release is currently on the testing server awaiting final approval before production deployment to Cloudflare Pages.