274 lines
7.0 KiB
Markdown
274 lines
7.0 KiB
Markdown
# Arizona Computer Guru Redesign - Change Log
|
|
|
|
## Version 2.0.0 - "Desert Brutalism" (2026-02-01)
|
|
|
|
### MAJOR CHANGES FROM PREVIOUS VERSION
|
|
|
|
---
|
|
|
|
## Typography Transformation
|
|
|
|
### BEFORE
|
|
- Inter (generic, overused)
|
|
- Standard weights
|
|
- Minimal letter-spacing
|
|
- Conservative sizing
|
|
|
|
### AFTER
|
|
- **Space Grotesk** - Geometric brutalist headings
|
|
- **IBM Plex Sans** - Warm technical body text
|
|
- **JetBrains Mono** - Monospace tech accents
|
|
- Negative letter-spacing (-0.03em to -0.01em)
|
|
- Bolder sizing (H1: 3.5-5rem vs 2rem)
|
|
- Uppercase dominance
|
|
|
|
---
|
|
|
|
## Color Palette Evolution
|
|
|
|
### BEFORE
|
|
```css
|
|
--color2: #f57c00 /* Generic orange */
|
|
--color1: #1b263b /* Navy blue */
|
|
--color3: #0d1b2a /* Dark blue */
|
|
```
|
|
|
|
### AFTER
|
|
```css
|
|
--sunset-copper: #D4771C /* Warmer, deeper orange */
|
|
--midnight-desert: #0A0F14 /* Near-black with blue undertones */
|
|
--canyon-shadow: #2D1B14 /* Deep brown */
|
|
--sandstone: #E8D5C4 /* Warm neutral */
|
|
--neon-accent: #00FFA3 /* Cyberpunk green - NEW */
|
|
```
|
|
|
|
**Impact:** Shifted from blue-heavy to warm desert palette with unexpected neon accent
|
|
|
|
---
|
|
|
|
## Visual Effects Added
|
|
|
|
### Geometric Transforms
|
|
- **NEW:** `skewY(-2deg)` on cards and boxes
|
|
- **NEW:** `skewX(-5deg)` on navigation hovers
|
|
- **NEW:** Angular elements mimicking geological strata
|
|
|
|
### Border Treatments
|
|
- **BEFORE:** 2-5px borders
|
|
- **AFTER:** 8-12px thick brutalist borders
|
|
- **NEW:** Neon accent borders (left/bottom)
|
|
- **NEW:** Border width changes on hover (8px → 12px)
|
|
|
|
### Shadow System
|
|
- **BEFORE:** Simple box-shadows
|
|
- **AFTER:** Dramatic offset shadows (4px, 8px, 12px)
|
|
- **NEW:** Neon glow shadows: `0 0 20px rgba(0, 255, 163, 0.3)`
|
|
- **NEW:** Multi-layer shadows on hover
|
|
|
|
### Background Textures
|
|
- **NEW:** Radial gradient overlays
|
|
- **NEW:** Repeating line patterns
|
|
- **NEW:** Desert texture simulation
|
|
- **NEW:** Gradient overlays on dark sections
|
|
|
|
---
|
|
|
|
## Interactive Animations
|
|
|
|
### Link Hover Effects
|
|
- **BEFORE:** Simple color change
|
|
- **AFTER:** Underline slide animation (::after pseudo-element)
|
|
- Width: 0 → 100%
|
|
- Positioned with absolute bottom
|
|
|
|
### Button Animations
|
|
- **BEFORE:** Background + color transition
|
|
- **AFTER:** Background slide-in effect (::before pseudo-element)
|
|
- Left: -100% → 0
|
|
- Neon glow on hover
|
|
|
|
### Card Hover Effects
|
|
- **BEFORE:** `translateY(-4px)` + shadow
|
|
- **AFTER:** Combined transform: `skewY(-2deg) translateY(-8px) scale(1.02)`
|
|
- Border thickness change
|
|
- Neon glow shadow
|
|
- Multiple property transitions
|
|
|
|
### Icon Animations
|
|
- **NEW:** `scale(1.2) rotate(-5deg)` on button box icons
|
|
- **NEW:** Neon glow filter effect
|
|
|
|
---
|
|
|
|
## Component-Specific Changes
|
|
|
|
### Navigation
|
|
- **Font:** Inter → Space Grotesk
|
|
- **Weight:** 500 → 600
|
|
- **Border:** 2px → 4px (active states)
|
|
- **Hover:** Simple background → Skewed background + border animation
|
|
- **CTA Button:** Orange → Neon green with glow
|
|
|
|
### Above Header
|
|
- **Background:** Gradient → Solid midnight desert
|
|
- **Border:** Gradient border → 4px solid copper
|
|
- **Font:** Inter → JetBrains Mono
|
|
- **Link hover:** Color change → Underline slide + color
|
|
|
|
### Feature/Hero Section
|
|
- **Background:** Simple gradient → Desert gradient + textured overlay
|
|
- **Typography:** 2rem → 4.5rem headings
|
|
- **Shadow:** Simple → 4px offset with transparency
|
|
- **Overlay:** None → Multi-layer pattern overlays
|
|
|
|
### Columns Upper (Cards)
|
|
- **Transform:** None → `skewY(-2deg)`
|
|
- **Border:** None → 8px neon left border
|
|
- **Hover:** `translateY(-4px)` → Complex transform + scale
|
|
- **Background:** Solid → Gradient overlay effect
|
|
|
|
### Button Boxes
|
|
- **Border:** 15px orange → 12px copper (mobile: 8px)
|
|
- **Transform:** None → `skewY(-2deg)`
|
|
- **Hover:** Simple → Background slide + border color change
|
|
- **Icon:** Static → Scale + rotate animation
|
|
- **Size:** 25rem → 28rem height
|
|
|
|
### Footer
|
|
- **Background:** Solid dark → Gradient + repeating line texture
|
|
- **Border:** Simple → 6px copper top border
|
|
- **Links:** Color transition → Underline slide animation
|
|
- **Headings:** Orange → Neon green with left border
|
|
|
|
---
|
|
|
|
## Layout Changes
|
|
|
|
### Spacing
|
|
- Increased padding on major sections (2rem → 4rem, 8rem)
|
|
- More generous margins on cards (0.5rem → 1rem)
|
|
- Better breathing room in content areas
|
|
|
|
### Typography Scale
|
|
- **H1:** 2rem → 3.5-5rem
|
|
- **H2:** 1.6rem → 2.4-3.5rem
|
|
- **H3:** 1.2rem → 1.6-2.2rem
|
|
- **Body:** 1.2rem (maintained, improved line-height)
|
|
|
|
### Border Weights
|
|
- Thin (2-5px) → Thick (6-12px)
|
|
- Consistent brutalist aesthetic
|
|
|
|
---
|
|
|
|
## Mobile/Responsive Changes
|
|
|
|
### Maintained
|
|
- Core responsive structure
|
|
- Flexbox collapse patterns
|
|
- Mobile menu functionality
|
|
|
|
### Enhanced
|
|
- Removed skew transforms on mobile (performance + clarity)
|
|
- Simplified border weights on small screens
|
|
- Better contrast with dark background priority
|
|
- Improved touch target sizes
|
|
|
|
---
|
|
|
|
## Performance Considerations
|
|
|
|
### Font Loading
|
|
- Google Fonts with `display=swap`
|
|
- Three typefaces vs one (acceptable for impact)
|
|
|
|
### Animation Performance
|
|
- CSS-only (no JavaScript)
|
|
- GPU-accelerated transforms (translateY, scale, skew)
|
|
- Cubic-bezier timing: `cubic-bezier(0.4, 0, 0.2, 1)`
|
|
|
|
### Code Size
|
|
- **Previous:** 28KB
|
|
- **New:** 31KB (+10% for significant visual enhancement)
|
|
|
|
---
|
|
|
|
## Accessibility Maintained
|
|
|
|
### Contrast Ratios
|
|
- High contrast preserved
|
|
- Neon accent (#00FFA3) used carefully for CTAs only
|
|
- Dark backgrounds with light text meet WCAG AA
|
|
|
|
### Interactive States
|
|
- Clear focus states
|
|
- Hover states distinct from default
|
|
- Active states visually obvious
|
|
|
|
---
|
|
|
|
## What Stayed the Same
|
|
|
|
### Structure
|
|
- HTML structure unchanged
|
|
- WordPress theme compatibility maintained
|
|
- Navigation hierarchy preserved
|
|
- Content organization intact
|
|
|
|
### Functionality
|
|
- All links work identically
|
|
- Forms function the same
|
|
- Mobile menu behavior consistent
|
|
- Responsive breakpoints similar
|
|
|
|
---
|
|
|
|
## Files Modified
|
|
|
|
### Primary
|
|
- `style.css` - Complete redesign
|
|
|
|
### Backups
|
|
- `style.css.backup-20260201-154357` - Previous version saved
|
|
|
|
### New Documentation
|
|
- `azcomputerguru-design-vision.md` - Design philosophy
|
|
- `azcomputerguru-changelog.md` - This file
|
|
|
|
---
|
|
|
|
## Deployment Details
|
|
|
|
**Date:** 2026-02-01
|
|
**Time:** ~16:00
|
|
**Server:** 172.16.3.10
|
|
**Path:** `/home/azcomputerguru/public_html/testsite/wp-content/themes/arizonacomputerguru/`
|
|
**Live URL:** https://azcomputerguru.com/testsite
|
|
**Status:** Active
|
|
|
|
---
|
|
|
|
## Rollback Instructions
|
|
|
|
If needed, restore previous version:
|
|
|
|
```bash
|
|
ssh root@172.16.3.10
|
|
cd /home/azcomputerguru/public_html/testsite/wp-content/themes/arizonacomputerguru/
|
|
cp style.css.backup-20260201-154357 style.css
|
|
```
|
|
|
|
---
|
|
|
|
## Summary
|
|
|
|
This redesign transforms the site from a **conservative corporate aesthetic** to a **bold, distinctive Desert Brutalism identity**. The changes prioritize:
|
|
|
|
1. **Memorability** - Geometric brutalism + unexpected neon accents
|
|
2. **Regional Identity** - Arizona desert color palette
|
|
3. **Tech Credibility** - Monospace accents + clean typography
|
|
4. **Visual Impact** - Dramatic scale, shadows, transforms
|
|
5. **Professional Edge** - Maintained structure, improved hierarchy
|
|
|
|
The result is a website that commands attention while maintaining complete functionality and accessibility.
|