Minecraft Theme - Marketing Site Design Guide

Theme Overview

The MCBDSHost marketing site now features a Minecraft-inspired theme with blocky elements, pixelated effects, and the iconic color palette from the game.

---

Color Palette

Primary Colors (Grass & Dirt)

• Grass Green: #7cbd56 - Main brand color, grass blocks
• Dark Green: #5a8a3d - Hover states, dark grass
• Dirt Brown: #8b6f47 - Secondary accents, earth tones

Minecraft Materials

• Stone Gray: #7f7f7f - Neutral elements
• Coal Black: #262626 - Dark backgrounds, text
• Diamond Cyan: #5bcefa - Highlights, CTA sections
• Gold: #faa819 - Important text, highlights
• Redstone: #cc0000 - Danger, alerts
• Emerald: #17dd62 - Success states
• Lapis: #1e3a8a - Info elements

---

Design Elements

1. Hero Section - Grass Block

    (Grass Top)       
                                 
   Manage Your Minecraft Server  
   Like a Pro                    
                                 
    (Dirt Bottom)      

• Design: Two-tone gradient (grass green top, dirt brown bottom)
• Effect: Pixelated overlay pattern (8px grid)
• Typography: Bold, blocky fonts with dark shadows

2. Feature Cards - Minecraft Blocks

   Feature Icon    Colored block with shadow
  Feature Name     
  � Description    
  � Details        

• Border: 3px solid borders
• Shadow: Block-style 3D effect (lifted appearance)
• Hover: Lifts up with enhanced shadow
• Animation: "Block pop" entrance effect

3. Buttons - Minecraft UI Style

  Download Now      3px border, uppercase text

            Shadow effect

• Style: Thick borders (3px), uppercase text
• Shadow: 3D push-down effect
• Interaction:
  • Hover: Moves down 1px
  • Active: Moves down 3px (button press effect)
• Colors: Minecraft material colors

4. Code Blocks - Command Block

 # PowerShell Command          
 docker compose up -d          

• Background: Dark gradient (coal/stone)
• Border: 3px solid with inset shadow
• Text: Monospace font with shadow
• Style: Resembles Minecraft command blocks

---

Interactive Effects

Button Press Animation

Normal State:  
                BTN 
               
                   3px shadow

Hover:         
                BTN 
               
                     2px shadow (moved down 1px)

Active:        
                BTN 
                    No shadow (pressed down 3px)

Card Hover Effect

Rest:    [Card]
              4px shadow

Hover:   [Card]   Lifted 4px
            8px shadow
         (border turns grass green)

Enchantment Glint (Primary Buttons)

Hover Effect: Animated diagonal stripes

  ////  ////  /     Moving shimmer effect
 //// Download / 
  ////  ////  /  

---

Layout Styles

Navigation Bar - Hotbar Style

  MCBDSHost  Home Features About     White bar with green bottom border

         Grass green accent

• Style: Clean white background
• Border: 3px grass green bottom border
• Logo: Bold, uppercase, green text
• Links: Hover lifts items up 2px

Footer - Bedrock Layer

   Dark gradient
                                   (stone to coal)
  Links  �  Resources  �  Help  
                                 
  � 2024 MCBDSHost               

• Background: Stone to coal gradient
• Border: 4px grass green top border
• Text: Light gray with hover to green

---

Component Themes

Download Cards - Chest Style

  Windows Package             Success border (emerald)
                             
 Docker Compose files        
                             
 [Download for Windows]      

        Dark shadow

• Border: 4px colored (success/danger)
• Shadow: Heavy 6px shadow
• Hover: Lifts with enhanced shadow

Tech Stack Badges - Item Blocks

   .NET 10      White card with border
           

        Gray shadow

• Style: Square cards with shadows
• Hover: Scale up + lift effect
• Border: Changes to grass green on hover

Alerts - Sign Style

  Important: Download from      Colored border + background
   official Minecraft website  

• Border: 3px themed color (info/warning/success)
• Background: Light tinted color
• Shadow: Subtle lift effect

---

Visual Effects

Pixelated Pattern Overlay

• Usage: Hero section, backgrounds
• Pattern: 8px � 8px grid
• Opacity: 2-5% black overlay
• Effect: Subtle pixel art texture

Block Pop Animation

Time: 0%      50%      100%
Scale: 90%      105%         100%
Effect: [Shrink]  [Overshoot]  [Settle]

• Timing: 0.4s cubic-bezier ease
• Usage: Card entrances

Gradient Shimmer

• Usage: Buttons on hover
• Pattern: Diagonal stripes
• Animation: 2s linear infinite
• Effect: "Enchanted" appearance

---

Responsive Behavior

Mobile (< 768px)

• Reduced font sizes (hero: 2.5rem)
• Stacked buttons (full width)
• Maintained block styling
• Simplified shadows

Tablet (768px - 1024px)

• 2-column layouts
• Moderate shadows
• Touch-friendly hit areas

Desktop (> 1024px)

• Full 3-column layouts
• Enhanced hover effects
• Larger shadows and spacing

---

Typography

Font Stack

Primary: 'Segoe UI', 'Minecraft', 'Press Start 2P', monospace
Code: 'Consolas', 'Courier New', monospace

Text Styling

• Headings: Bold (700-900), uppercase for emphasis
• Body: Medium weight (500-600)
• Buttons: Bold (700), uppercase, letter-spacing
• Code: Monospace with shadows

Text Shadows

• Hero: 2px 2px 4px rgba(0,0,0,0.5)
• Gold text: 3px 3px 0 rgba(139,111,71,0.8)
• Icons: Drop-shadow filter

---

Color Usage Guide

Primary Actions

• Color: Grass green (#7cbd56)
• Usage: CTA buttons, links, primary UI
• Accent: Dark green for hover

Success States

• Color: Emerald (#17dd62)
• Usage: Confirmations, positive feedback
• Border: Success cards, alerts

Information

• Color: Diamond cyan (#5bcefa)
• Usage: Info alerts, secondary CTAs
• Gradient: With lapis blue

Warnings

• Color: Gold (#faa819)
• Usage: Important notices, cautions
• Combination: With brown/orange tones

Errors/Danger

• Color: Redstone (#cc0000)
• Usage: Error messages, danger actions
• Contrast: High visibility

---

Minecraft Elements Reference

Blocks Represented

1. Grass Block - Hero section (green top, brown bottom)
2. Stone - Tech badges, neutral elements
3. Diamond Block - CTA sections (cyan shimmer)
4. Command Block - Code sections (dark with text)
5. Chest - Download cards (wooden, storage)
6. Sign - Alerts (wooden with text)
7. Bedrock - Footer (dark, solid base)

UI Elements

• Hotbar - Navigation bar
• Inventory Slots - Card grid layouts
• Button Press - Physical click feedback
• Enchantment Glint - Hover shimmer effect

---

Implementation Notes

CSS Variables

All colors defined in :root for easy customization:

:root {
    --mc-grass-green: #7cbd56;
    --mc-dark-green: #5a8a3d;
    /* ... more colors */
}

Browser Compatibility

• Modern browsers (Chrome, Firefox, Safari, Edge)
• CSS Grid and Flexbox used
• Fallbacks for older browsers
• Progressive enhancement approach

Performance

• CSS-only animations (no JavaScript)
• Optimized shadows and effects
• Minimal image usage (CSS patterns)
• Fast rendering on all devices

---

Future Enhancements

Potential additions:

• Animated pixelated logo
• More block-based transitions
• Sound effects (optional)
• Particle effects on interactions
• Custom Minecraft font integration
• Dark mode (End dimension theme)
• Nether theme variant

---

Design Checklist

When adding new components:

• Use 3px borders
• Add block-style shadows (0 4px 0)
• Include hover lift effect
• Use Minecraft color palette
• Apply uppercase text for headings
• Add pixelated overlay if needed
• Implement button press animation
• Test on mobile devices

---

Theme Created: December 29, 2024 Style Guide Version: 1.0 Based On: Minecraft Bedrock Edition aesthetics

Remember: Keep it blocky, keep it fun!