Spa Style

CHANGELOG.md

@@ -7,6 +7,130 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.0] - 2025-12-25
+
+### Added - Spa & Wellness style variation and patterns
+
+**New Style Variation:**
+- **Spa & Wellness** - Elegant spa and wellness color scheme with sophisticated typography
+  - Cormorant Garamond serif font for elegant headings with refined letterforms
+  - Quicksand sans-serif for clean, friendly body text
+  - Soothing spa color palette: Teal (#5BBCD6), Ocean Sage (#2D4A4E), soft accent tones
+  - Three custom duotone presets (Spa Teal, Ocean Sage, High Contrast)
+  - Three gradient presets (Spa Teal, Ocean Depth, Peaceful Sky)
+  - Perfect for spas, wellness centers, yoga studios, and health retreats
+  - Accessible via Appearance > Editor > Styles
+
+**New Fonts:**
+- **Cormorant Garamond** - Elegant serif typeface (variable weight 300-700) with italic variant
+- **Quicksand** - Modern rounded sans-serif (variable weight 300-700)
+- Self-hosted WOFF2 format for optimal performance
+
+**New Patterns (13):**
+
+*Header Patterns (1):*
+- **header-top-bar-centered-menu** - Header with centered logo and navigation menu with top bar
+  - Clean centered layout
+  - Optional top announcement bar
+  - Perfect for spa and wellness sites
+
+*Footer Patterns (1):*
+- **footer-with-nav-columns** - Two-column footer with site info/social and multi-column navigation
+  - Site title, description, and social links on left
+  - Three navigation columns on right (About, Services, Visit)
+  - Copyright and legal links at bottom
+  - Flexible layout for any business type
+
+*Hero Patterns (1):*
+- **spa-home-hero** - Hero section with overlapping colored box on image background
+  - Dramatic overlapping layout
+  - Image on left, content box overlaps on right
+  - Perfect for spa homepages and landing pages
+
+*Call-to-Action Patterns (1):*
+- **spa-booking-cta** - Booking call-to-action with form integration
+  - Encourages appointment bookings
+  - Form-ready layout
+  - Conversion-optimized design
+
+*Features Patterns (4):*
+- **two-column-feature** - Two-column feature section with image and content
+  - Balanced 50/50 layout
+  - Image on left, content on right
+  - Versatile for services, features, about sections
+- **overlapping-feature-columns** - Feature columns with overlapping image effect
+  - Modern overlapping design
+  - Image overlaps content box
+  - Creates visual depth and interest
+- **overlapping-feature-columns-reversed** - Reversed overlapping feature columns
+  - Mirror layout of overlapping-feature-columns
+  - Content on left, image overlaps from right
+  - Provides layout variety
+- **wellness-cover-highlight** - Full-width wellness cover section with highlight box
+  - Dramatic full-width cover image
+  - Overlay content box
+  - Perfect for hero sections and feature highlights
+
+*Testimonials & Reviews (3):*
+- **testimonials-grid** - Three-column testimonial grid with star ratings
+  - Client testimonials in card layout
+  - Star ratings for credibility
+  - Professional presentation
+- **two-column-review** - Two-column review section with image and testimonial
+  - Client photo with testimonial
+  - Quote-style formatting
+  - Personal touch for reviews
+- **review-text-image-overlap** - Review with overlapping text and image
+  - Text overlaps image for visual interest
+  - Modern magazine-style layout
+  - Engaging testimonial presentation
+
+*Blog/Posts Patterns (1):*
+- **four-column-wellness-posts** - Four-column grid for wellness blog posts
+  - Compact grid layout
+  - Perfect for blog archives and related posts
+  - Optimized for wellness content
+
+*Shop/E-commerce Patterns (1):*
+- **shop-overview-three-columns** - Three-column product grid for spa/wellness shops
+  - Product showcase layout
+  - Image-focused cards
+  - Perfect for WooCommerce integration
+
+**New Pattern Images:**
+- Added spa-focused images in `patterns/images/spa/` directory:
+  - **Treatment images**: back-massage.webp, spa-treatment-hot-stones.webp, spa-treatment-landscape.webp, spa-treatment-zoomed.webp, yoga-pose.webp
+  - **Client avatars**: avatar-1.webp, avatar-2.webp, avatar-3.webp, avatar-4.webp, review-profile.webp
+  - **Product images** (shop subdirectory): bath-salt.webp, massage-oil.webp, serum.webp, supplements.webp
+  - All images optimized WebP format for fast loading
+
+**CSS Enhancements:**
+- Added overlapping columns styling (`.is-style-overlap-columns`, `.is-style-overlap-columns-reversed`)
+  - Creates modern overlapping layouts on desktop (min-width: 782px)
+  - Second column overlaps first by -10% with z-index layering
+  - Centered vertical alignment for visual balance
+- Enhanced spa post grid styling for consistent image display
+- Added cart icon styling with hover effects and transitions
+- Mobile navigation adjustments for centered logo and menu button
+
+### Changed - Pattern organization and categories
+
+- Pattern count increased from 34 to 47 total patterns
+- Enhanced pattern library with spa and wellness industry focus
+- Improved layout variety with overlapping column techniques
+- Better responsive design across all new patterns
+- Updated palette tokens to use `primary-alt` and add `primary-alt-accent` across style variations
+- Added Spa & Wellness pattern category for easier pattern browsing
+
+### Technical
+
+- Total style variations: 5 (Ink & Sand, Teal Bay, Denim Copper, Forest Sage, Spa & Wellness)
+- All new patterns follow Elayne design system with theme color tokens
+- Variable fonts provide flexible typography and better performance
+- Self-hosted fonts ensure GDPR compliance and fast loading
+- CSS improvements for modern overlapping layouts
+- All content fully translatable with proper text domain
+
 ## [1.0.3] - 2025-12-24
 
 ### Changed - Avatar styling improvements

README.md

@@ -38,38 +38,49 @@ Built by [Jasper Frumau](https://imagewize.com), Elayne empowers businesses to c
 
 ### Pattern Library
 
-Elayne includes **34 professionally designed patterns** (plus 17 page and post templates) organized into categories:
+Elayne includes **47 professionally designed patterns** (plus 16 page and post templates) organized into categories:
 
 **Hero Sections**
 - Contemporary hero with bold typography (dark variation)
 - Contemporary hero with bold typography (light variation)
 - Split background hero with contrasting colors
 - Hero section with prominent call-to-action
+- Overlapping image and content box hero for spa/wellness sites
 
 **Headers & Footers**
 - Mobile-optimized hamburger menu header
 - Desktop-optimized header with inline navigation
+- Header with centered logo and navigation menu with top bar
 - Professional standard footer
 - Minimal footer layout
+- Two-column footer with site info/social and multi-column navigation
 
 **Call-to-Action & Contact**
 - Newsletter signup with email capture
 - Contact information display with office hours and location
 - Two-column contact layout
 - Modular CTA card component for landing pages, blog sidebars, and conversion-focused sections
+- Booking call-to-action with form integration
 
 **Features & Services**
 - Grid layout for feature showcasing
 - Service cards with icons and descriptions
 - Four-column agency services grid with custom icons
 - Three-column pricing comparison with feature comparison and highlighted recommended plan
 - Client logos display with responsive grid for social proof
+- Two-column feature section with image and content
+- Feature columns with overlapping image effect
+- Reversed overlapping feature columns
+- Full-width wellness cover section with highlight box
 
 **Team & Testimonials**
 - Team member grid with photos and bios
 - Single testimonial card layout
 - Enhanced testimonials with ratings and success metrics
 - Client reviews with profile images
+- Three-column testimonial grid with star ratings
+- Two-column review section with image and testimonial
+- Review with overlapping text and image
 
 **Statistics**
 - Statistics display with visual emphasis
@@ -81,6 +92,7 @@ Elayne includes **34 professionally designed patterns** (plus 17 page and post t
 - List-style blog layout
 - Featured post two-column layout
 - Author biography with avatar and social links
+- Four-column grid for wellness blog posts
 
 **Support & Information**
 - Collapsible FAQ section with accordion functionality
@@ -96,6 +108,9 @@ Elayne includes **34 professionally designed patterns** (plus 17 page and post t
 **Pages**
 - Pre-launch or maintenance page with countdown and email capture
 
+**Shop/E-commerce**
+- Three-column product grid for spa/wellness shops
+
 **Page Templates**
 - Full-width page template
 - Hero page template (no top padding)
@@ -120,6 +135,8 @@ Elayne includes **34 professionally designed patterns** (plus 17 page and post t
 
 Switch your entire site's look with one click using pre-configured color palettes:
 
+- **Ink & Sand** (Default) - Warm ink blue and sand tones for sophisticated business sites
+- **Spa & Wellness** - Soothing teal and ocean sage palette with elegant Cormorant Garamond and friendly Quicksand fonts — perfect for spas, wellness centers, yoga studios, and health retreats
 - **Gray & Gold** - Sophisticated gray tones with elegant gold accents
 - **Denim & Copper** - Deep denim blues paired with warm copper highlights
 - **Forest & Sage** - Natural forest greens with calming sage tones
@@ -161,6 +178,54 @@ Powered by theme.json, customize:
 - Spacing and layout
 - Block defaults
 
+## Companion Plugin: Elayne Blocks
+
+Elayne works seamlessly with the **[Elayne Blocks](https://github.com/imagewize/elayne-blocks)** plugin, which provides custom Gutenberg blocks that enhance the theme's capabilities. While these blocks were designed as companions to the Elayne theme, they are **theme-agnostic** and work with any WordPress theme.
+
+### Why a Separate Plugin?
+
+WordPress.org Theme Review requirements prohibit custom block registration in themes. By separating blocks into a plugin, we ensure compliance while providing powerful functionality that works across any theme.
+
+### Available Blocks
+
+The Elayne Blocks plugin includes **4 custom blocks**:
+
+1. **Mega Menu Block** (`elayne/mega-menu`)
+   - Advanced navigation with mega menu functionality
+   - WordPress Interactivity API integration
+   - Template part support for dynamic content
+   - Keyboard navigation and responsive design
+
+2. **Carousel Block** (`elayne/carousel`)
+   - Responsive image/content carousel
+   - Slick Carousel integration
+   - Customizable settings and breakpoints
+   - Touch/swipe support
+
+3. **Slide Block** (`elayne/slide`)
+   - Individual carousel slides
+   - InnerBlocks support for flexible content
+   - Works seamlessly with Carousel parent block
+
+4. **FAQ Tabs Block** (`elayne/faq-tabs`)
+   - Interactive FAQ with vertical tab navigation
+   - Dynamic content display with answers
+   - Customizable button with configurable text and URL
+   - WordPress Interactivity API integration
+
+### Installation
+
+```bash
+# Clone the plugin repository
+cd wp-content/plugins/
+git clone https://github.com/imagewize/elayne-blocks.git
+
+# Or download from GitHub releases
+# Activate via WordPress admin: Plugins → Elayne Blocks → Activate
+```
+
+For more information, visit: [github.com/imagewize/elayne-blocks](https://github.com/imagewize/elayne-blocks)
+
 ## For Developers
 
 ### Technical Requirements
@@ -169,6 +234,7 @@ Powered by theme.json, customize:
 - **PHP 8.0+** required
 - **Full Site Editing (FSE)** compatible
 - **Block theme** architecture
+- **Elayne Blocks plugin** (optional, for enhanced functionality)
 
 ### Theme Features
 
@@ -216,6 +282,7 @@ Elayne registers custom pattern categories:
 - Portfolio
 - Pages
 - Posts
+- Shop
 
 ## License
 
@@ -250,6 +317,11 @@ All pattern images are GPL-compatible. See [readme.txt](readme.txt) Copyright se
 **Team Avatars (Pexels License)**
 - avatar-1.webp through avatar-7.webp - Professional headshots (Pexels)
 
+**Spa & Wellness Images (CC0/CC BY)**
+- Treatment images: back-massage.webp, spa-treatment-hot-stones.webp, spa-treatment-landscape.webp, spa-treatment-zoomed.webp, yoga-pose.webp
+- Client avatars: spa/avatar-1.webp through spa/avatar-4.webp, spa/review-profile.webp
+- Product images: spa/shop/bath-salt.webp, spa/shop/massage-oil.webp, spa/shop/serum.webp, spa/shop/supplements.webp
+
 **Logo Images**
 - logo-1.webp through logo-6.webp - Geometric designs by theme author
 

functions.php

@@ -53,6 +53,7 @@ function elayne_pattern_categories() {
 		'elayne/portfolio'      => array( 'label' => __( 'Portfolio', 'elayne' ) ),
 		'elayne/pages'          => array( 'label' => __( 'Pages', 'elayne' ) ),
 		'elayne/posts'          => array( 'label' => __( 'Posts', 'elayne' ) ),
+		'elayne/spa'            => array( 'label' => __( 'Spa & Wellness', 'elayne' ) ),
 	);
 
 	foreach ( $block_pattern_categories as $name => $properties ) {

patterns/client-reviews.php

@@ -8,8 +8,8 @@
  * Viewport Width: 1200
  */
 ?>
-<!-- wp:group {"metadata":{"categories":["elayne/testimonial"],"patternName":"elayne/client-reviews","name":"Client Reviews"},"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|xxx-large","bottom":"var:preset|spacing|xxx-large","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"},"margin":{"top":"0","bottom":"0"}}},"backgroundColor":"primary-dark","textColor":"base","layout":{"type":"default"}} -->
-<div class="wp-block-group alignfull has-base-color has-primary-dark-background-color has-text-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--xxx-large);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--xxx-large);padding-left:var(--wp--preset--spacing--medium)"><!-- wp:spacer {"height":"60px"} -->
+<!-- wp:group {"metadata":{"categories":["elayne/testimonial"],"patternName":"elayne/client-reviews","name":"Client Reviews"},"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|xxx-large","bottom":"var:preset|spacing|xxx-large","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"},"margin":{"top":"0","bottom":"0"}}},"backgroundColor":"primary-alt","textColor":"base","layout":{"type":"default"}} -->
+<div class="wp-block-group alignfull has-base-color has-primary-alt-background-color has-text-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--xxx-large);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--xxx-large);padding-left:var(--wp--preset--spacing--medium)"><!-- wp:spacer {"height":"60px"} -->
 <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->