WAA Texas Tech website redesign

Version created: February 5, 2026

Design Preview

New Hacker/Tile Aesthetic with updated branding

---

Overview

A modern, premium landing page with a hacker/robotic aesthetic featuring tile grid backgrounds, cornered elements, and a distinctive color palette.

Design Direction

• Theme: Dark hacker / robotic / terminal-inspired
• Primary Color: #97F0E5 (Mint/Teal)
• Accent Color: #F946AC (Hot Pink)
• Background: #0c0f1d (Deep Navy)
• Typography: NeueMontreal (body) + PPNeueBit (headings)
• Border Radius: 2px (cornered, not rounded)

---

Changes from v1.0

Feature	v1.0	v2.0
Primary Color	#00d9ff (Cyan)	#97F0E5 (Mint)
Accent Color	(none)	#F946AC (Pink)
Background	#0a0a0a (Black)	#0c0f1d (Navy)
Border Radius	Rounded (full/16px)	Cornered (2px)
Fonts	Outfit + Space Grotesk	NeueMontreal + PPNeueBit
Background Pattern	Subtle gradient	Tile grid + scanlines
Product Showcase	None	✅ Slideshow section

---

Files

File	Description
index.html	Main landing page with all sections including new showcase
styles.css	Updated design system with hacker aesthetic (~900 lines)
script.js	Interactive features + showcase slideshow controls
logo.png	[REQUIRED] Place your logo image here

---

New Features

Product Showcase Slideshow

• Infinite horizontal scroll animation
• Pauses on hover (mouse and touch)
• Clickable project cards with links
• Shows 6 member projects (duplicated for seamless loop)

Tile Grid Background

• CSS grid pattern overlay
• Scanline effect for CRT/terminal look
• Subtle but distinctive hacker aesthetic

Updated Components

• Cornered buttons and cards (2px radius)
• Terminal-style card variant with blinking cursor
• Glitch effect ready for headings
• New color scheme throughout

---

Branding Specifications

/* Colors */
Primary: #97F0E5
Accent: #F946AC
Background: #0c0f1d
Text Primary: #ffffff
Link: #878A9D

/* Typography */
Body: NeueMontreal
Heading: PPNeueBit
H1: 149.333px (clamp scaled)
H2: 74.6667px (clamp scaled)
Body: 32px (clamp scaled)

/* Spacing */
Base Unit: 4px
Border Radius: 2px

---

Logo Setup

To add your custom logo:

1. Place your logo file as logo.png in this folder
2. The HTML already references it: <img src="logo.png" alt="Logo">
3. Fallback emoji ⛓️ displays if image fails to load

---

How to View

Open directly in browser:

open index.html

Or serve locally:

# Navigate to the project directory
python3 -m http.server 8000
# Open http://localhost:8000

---

Version History

Version	Date	Changes
v1.0	Feb 5, 2026	Initial design - Walrus-inspired dark theme
v2.0	Feb 5, 2026	Hacker aesthetic, new branding, cornered buttons, product showcase slideshow

---

Rollback Instructions

To restore v1.0, you would need to revert these files from git or a backup.

---

Generated by Claude - Blockchain Club Website Builder