diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..bd93676 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +titledgames.project516.dev \ No newline at end of file diff --git a/README.md b/README.md index 4c6c1eb..22b35b5 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ -# titledgames.github.io \ No newline at end of file +# Titled Games Website + +Welcome to the official repository for the Titled Games website! This is where we build and maintain our web presence, showcasing our indie game studio and the games we create. diff --git a/assets/favicon.png b/assets/favicon.png new file mode 100644 index 0000000..2fb18ef Binary files /dev/null and b/assets/favicon.png differ diff --git a/assets/logos/dark.png b/assets/logos/dark.png new file mode 100644 index 0000000..38f2508 Binary files /dev/null and b/assets/logos/dark.png differ diff --git a/assets/logos/light.png b/assets/logos/light.png new file mode 100644 index 0000000..2fb18ef Binary files /dev/null and b/assets/logos/light.png differ diff --git a/assets/microwave-man/ground.png b/assets/microwave-man/ground.png new file mode 100644 index 0000000..8af37c2 Binary files /dev/null and b/assets/microwave-man/ground.png differ diff --git a/assets/microwave-man/level.png b/assets/microwave-man/level.png new file mode 100644 index 0000000..c784597 Binary files /dev/null and b/assets/microwave-man/level.png differ diff --git a/assets/microwave-man/titlescreen.png b/assets/microwave-man/titlescreen.png new file mode 100644 index 0000000..9688b81 Binary files /dev/null and b/assets/microwave-man/titlescreen.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..81406c6 --- /dev/null +++ b/index.html @@ -0,0 +1,194 @@ + + + + + + + + + + + + + + + + + Titled Games | We do games + + + + + + + + +
+
+
+ +

Titled Games

+

We do games

+

Creating exciting gaming experiences!

+
+ Explore Our Games +
+
+
+ + +
+
+

About Us

+
+
+

We are Titled Games, a group of indie game developers dedicated to creating fun, entertaining, and enjoyable games.

+

We believe in putting users first, and creating fun experiences for all people.

+
+
+

Creativity

+

Unique art styles and storytelling

+
+
+

Passion

+

Made by gamers, for gamers

+
+
+
+
+
+
+ + +
+
+

Our Games

+ +
+
+
+ Microwave-Man! Game Screenshot +
+
+

Microwave-Man!

+

This is a platformer game about a Microwave Robot ascending the map to reach the top while collecting items to microwave.

+
+ Play Now +
+
+
+
+
+
+ + +
+
+

Get In Touch

+
+

Follow us for updates!

+ +
+
+
+ + + + + + + + + + diff --git a/microwave-man.html b/microwave-man.html new file mode 100644 index 0000000..0b03065 --- /dev/null +++ b/microwave-man.html @@ -0,0 +1,465 @@ + + + + + + + + + + + + + + + + Microwave-Man! | Titled Games + + + + + + + + + +
+
+ ← Back to Games +

Microwave-Man!

+

Play as a microwave!

+
+
+ +
+ +
+

About the Game

+

Microwave-Man! is a platformer game about a Microwave Robot ascending the map to reach the top while collecting items to microwave.

+

Navigate through challenging levels, collect items, and help Microwave-Man reach new heights in this exciting adventure!

+
+ + +
+

Download Microwave ManLoading...

+

Get the latest version from GitHub Releases

+ +
+ + +
+

Linux Users: Get it on FlathubRECOMMENDED

+

For the best experience on Linux, we recommend downloading from Flathub. You'll automatically receive updates when new versions are released.

+
+ + Download on Flathub + +

Download on Flathub

+
+
+ + +
+

Play Now (Web Version)

+
+

Note: The web version is currently unstable and may not work properly in all browsers. For the best experience, please download the desktop version above.

+
+
+ +
+
+ + +
+ +
+ + +
+ + + + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..6a5bffb --- /dev/null +++ b/script.js @@ -0,0 +1,422 @@ +/** + * TITLED GAMES WEBSITE JAVASCRIPT + * + * This script handles all interactive features of the website: + * - Mobile navigation menu + * - Smooth scrolling + * - Back to top button + * - Particle animation system + * - Scroll-based animations + * - Seasonal decorations (Halloween in October, Christmas in December) + * + * Well-documented for easy maintenance by the team + */ + +// ============================================ +// INITIALIZATION +// Wait for DOM to be fully loaded before running scripts +// ============================================ +document.addEventListener('DOMContentLoaded', function() { + initNavigation(); + initParticles(); + initScrollAnimations(); + initBackToTop(); + initSeasonalDecorations(); + initDarkMode(); +}); + +// ============================================ +// NAVIGATION FUNCTIONALITY +// Handles mobile menu toggle and smooth scrolling +// ============================================ +function initNavigation() { + const hamburger = document.getElementById('hamburger'); + const navMenu = document.getElementById('navMenu'); + const navLinks = document.querySelectorAll('.nav-link'); + + // Toggle mobile menu on hamburger click + if (hamburger && navMenu) { + hamburger.addEventListener('click', function() { + hamburger.classList.toggle('active'); + navMenu.classList.toggle('active'); + }); + } + + // Close mobile menu when clicking on a navigation link + navLinks.forEach(link => { + link.addEventListener('click', function() { + if (hamburger && navMenu) { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); + } + }); + }); + + // Close mobile menu when clicking outside + document.addEventListener('click', function(event) { + if (hamburger && navMenu) { + const isClickInsideNav = navMenu.contains(event.target); + const isClickOnHamburger = hamburger.contains(event.target); + + if (!isClickInsideNav && !isClickOnHamburger && navMenu.classList.contains('active')) { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); + } + } + }); +} + +// ============================================ +// PARTICLE ANIMATION SYSTEM +// Creates floating particles in the hero section +// ============================================ +function initParticles() { + const particlesContainer = document.getElementById('particles'); + + if (!particlesContainer) return; + + // Configuration for particle system + const particleCount = 50; // Number of particles to create + const colors = [ + 'rgba(255, 153, 102, 0.3)', // Primary orange + 'rgba(255, 153, 102, 0.2)', // Secondary orange lighter + 'rgba(255, 153, 102, 0.4)' // Accent orange darker + ]; + + // Create particles + for (let i = 0; i < particleCount; i++) { + createParticle(particlesContainer, colors); + } +} + +/** + * Creates a single particle with random properties + * @param {HTMLElement} container - The container to add the particle to + * @param {Array} colors - Array of possible colors for the particle + */ +function createParticle(container, colors) { + const particle = document.createElement('div'); + particle.className = 'particle'; + + // Random properties for variety + const size = Math.random() * 5 + 2; // 2-7px + const color = colors[Math.floor(Math.random() * colors.length)]; + const startX = Math.random() * 100; // 0-100% from left + const startY = Math.random() * 100; // 0-100% from top + const duration = Math.random() * 20 + 15; // 15-35s animation + const delay = Math.random() * 10; // 0-10s delay + + // Apply styles + particle.style.width = `${size}px`; + particle.style.height = `${size}px`; + particle.style.background = color; + particle.style.left = `${startX}%`; + particle.style.top = `${startY}%`; + particle.style.animationDuration = `${duration}s`; + particle.style.animationDelay = `${delay}s`; + + container.appendChild(particle); +} + +// ============================================ +// SCROLL ANIMATIONS +// Adds fade-in effects when elements come into view +// ============================================ +function initScrollAnimations() { + // Elements to animate on scroll + const observerOptions = { + threshold: 0.1, // Trigger when 10% of element is visible + rootMargin: '0px 0px -50px 0px' // Start animation slightly before element enters viewport + }; + + // Callback function for intersection observer + const observerCallback = (entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.animation = 'fadeInUp 0.8s ease forwards'; + observer.unobserve(entry.target); // Stop observing after animation + } + }); + }; + + // Create observer + const observer = new IntersectionObserver(observerCallback, observerOptions); + + // Observe elements + const animatedElements = document.querySelectorAll('.value-item, .game-card, .team-item'); + animatedElements.forEach(el => { + el.style.opacity = '0'; + observer.observe(el); + }); +} + +// ============================================ +// BACK TO TOP BUTTON +// Shows/hides button based on scroll position +// ============================================ +function initBackToTop() { + const backToTopButton = document.getElementById('backToTop'); + + if (!backToTopButton) return; + + // Show/hide button based on scroll position + window.addEventListener('scroll', function() { + if (window.scrollY > 300) { + backToTopButton.classList.add('visible'); + } else { + backToTopButton.classList.remove('visible'); + } + }); + + // Scroll to top when button is clicked + backToTopButton.addEventListener('click', function() { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }); +} + +// ============================================ +// DARK MODE TOGGLE +// Allows users to switch between light and dark themes +// ============================================ +function initDarkMode() { + const darkModeToggle = document.getElementById('darkModeToggle'); + const darkModeIcon = document.getElementById('darkModeIcon'); + const body = document.body; + const navLogo = document.getElementById('logoImage'); + const heroLogo = document.getElementById('heroLogoImage'); + const footerLogo = document.getElementById('footerLogoImage'); + + if (!darkModeToggle || !darkModeIcon) return; + + // Check for saved dark mode preference + const darkModePreference = localStorage.getItem('darkMode'); + + // Apply saved preference or system preference + if (darkModePreference === 'enabled') { + body.classList.add('dark-mode'); + darkModeIcon.textContent = '☀️'; + if (navLogo) navLogo.src = 'assets/logos/dark.png'; + if (heroLogo) heroLogo.src = 'assets/logos/dark.png'; + if (footerLogo) footerLogo.src = 'assets/logos/dark.png'; + } else if (darkModePreference === null && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + body.classList.add('dark-mode'); + darkModeIcon.textContent = '☀️'; + if (navLogo) navLogo.src = 'assets/logos/dark.png'; + if (heroLogo) heroLogo.src = 'assets/logos/dark.png'; + if (footerLogo) footerLogo.src = 'assets/logos/dark.png'; + localStorage.setItem('darkMode', 'enabled'); + } + + // Toggle dark mode on button click + darkModeToggle.addEventListener('click', function() { + body.classList.toggle('dark-mode'); + + if (body.classList.contains('dark-mode')) { + darkModeIcon.textContent = '☀️'; + if (navLogo) navLogo.src = 'assets/logos/dark.png'; + if (heroLogo) heroLogo.src = 'assets/logos/dark.png'; + if (footerLogo) footerLogo.src = 'assets/logos/dark.png'; + localStorage.setItem('darkMode', 'enabled'); + } else { + darkModeIcon.textContent = '🌙'; + if (navLogo) navLogo.src = 'assets/logos/light.png'; + if (heroLogo) heroLogo.src = 'assets/logos/light.png'; + if (footerLogo) footerLogo.src = 'assets/logos/light.png'; + localStorage.setItem('darkMode', 'disabled'); + } + }); +} + +// ============================================ +// SEASONAL DECORATIONS +// Adds themed decorations based on the current month +// ============================================ +function initSeasonalDecorations() { + const currentMonth = new Date().getMonth(); // 0-11 (0 = January, 9 = October, 11 = December) + + // October = Halloween decorations + if (currentMonth === 9) { + applyHalloweenTheme(); + } + // December = Christmas decorations + else if (currentMonth === 11) { + applyChristmasTheme(); + } +} + +/** + * Applies Halloween theme decorations + * Active during October (month index 9) + */ +function applyHalloweenTheme() { + document.body.classList.add('halloween-theme'); + + // Add pumpkins to hero section + const heroContent = document.querySelector('.hero-content'); + if (heroContent) { + const pumpkinLeft = createDecoration('🎃', 'halloween-pumpkin halloween-left'); + const pumpkinRight = createDecoration('🎃', 'halloween-pumpkin halloween-right'); + heroContent.appendChild(pumpkinLeft); + heroContent.appendChild(pumpkinRight); + } + + // Add floating bats + const particlesContainer = document.getElementById('particles'); + if (particlesContainer) { + for (let i = 0; i < 8; i++) { + const bat = createDecoration('🦇', 'halloween-bat'); + const randomX = Math.random() * 100; + const randomDelay = Math.random() * 5; + const randomDuration = 15 + Math.random() * 10; + + bat.style.left = `${randomX}%`; + bat.style.animationDelay = `${randomDelay}s`; + bat.style.animationDuration = `${randomDuration}s`; + + particlesContainer.appendChild(bat); + } + } + + // Add spooky ghost + const navbar = document.querySelector('.navbar'); + if (navbar) { + const ghost = createDecoration('👻', 'halloween-ghost'); + navbar.appendChild(ghost); + } +} + +/** + * Applies Christmas theme decorations + * Active during December (month index 11) + */ +function applyChristmasTheme() { + document.body.classList.add('christmas-theme'); + + // Add Christmas trees to hero section + const heroContent = document.querySelector('.hero-content'); + if (heroContent) { + const treeLeft = createDecoration('🎄', 'christmas-tree christmas-left'); + const treeRight = createDecoration('🎄', 'christmas-tree christmas-right'); + heroContent.appendChild(treeLeft); + heroContent.appendChild(treeRight); + } + + // Add snowflakes + const particlesContainer = document.getElementById('particles'); + if (particlesContainer) { + const snowflakeEmojis = ['❄️', '❅', '❆']; + for (let i = 0; i < 20; i++) { + const snowflake = createDecoration( + snowflakeEmojis[Math.floor(Math.random() * snowflakeEmojis.length)], + 'christmas-snowflake' + ); + const randomX = Math.random() * 100; + const randomDelay = Math.random() * 5; + const randomDuration = 10 + Math.random() * 10; + + snowflake.style.left = `${randomX}%`; + snowflake.style.animationDelay = `${randomDelay}s`; + snowflake.style.animationDuration = `${randomDuration}s`; + + particlesContainer.appendChild(snowflake); + } + } + + // Add Santa hat to logo + const logo = document.querySelector('.nav-brand .logo'); + if (logo) { + const santaHat = createDecoration('🎅', 'christmas-santa'); + logo.parentElement.classList.add('has-seasonal-decoration'); + logo.parentElement.appendChild(santaHat); + } + + // Add presents + const footer = document.querySelector('.footer-brand'); + if (footer) { + const present = createDecoration('🎁', 'christmas-present'); + footer.appendChild(present); + } +} + +/** + * Helper function to create a decoration element + * @param {string} emoji - The emoji to use for decoration + * @param {string} className - CSS class name for styling + * @returns {HTMLElement} - The created decoration element + */ +function createDecoration(emoji, className) { + const decoration = document.createElement('span'); + decoration.textContent = emoji; + decoration.className = `seasonal-decoration ${className}`; + decoration.setAttribute('aria-hidden', 'true'); // Hide from screen readers + return decoration; +} + +// ============================================ +// UTILITY FUNCTIONS +// Helper functions that can be used throughout the site +// ============================================ + +/** + * Debounce function to limit how often a function can be called + * Useful for scroll and resize events + * @param {Function} func - The function to debounce + * @param {number} wait - Time to wait in milliseconds + */ +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + +/** + * Checks if an element is in the viewport + * @param {HTMLElement} element - The element to check + * @returns {boolean} - True if element is in viewport + */ +function isInViewport(element) { + const rect = element.getBoundingClientRect(); + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= (window.innerWidth || document.documentElement.clientWidth) + ); +} + +// ============================================ +// PERFORMANCE OPTIMIZATION +// Optimize animations for better performance +// ============================================ + +// Pause animations when tab is not visible +document.addEventListener('visibilitychange', function() { + if (document.hidden) { + // Pause heavy animations when tab is hidden + document.querySelectorAll('.particle').forEach(particle => { + particle.style.animationPlayState = 'paused'; + }); + } else { + // Resume animations when tab is visible + document.querySelectorAll('.particle').forEach(particle => { + particle.style.animationPlayState = 'running'; + }); + } +}); + +// ============================================ +// CONSOLE MESSAGE +// Fun message for developers who inspect the site +// ============================================ +console.log('%c🎮 Titled Games', 'font-size: 24px; font-weight: bold; color: #FF9966;'); +console.log('%cWe Do Games', 'font-size: 16px; color: #FF9966;'); +console.log('%cInterested in joining our team? Check out github.com/titledgames', 'font-size: 12px; color: #FF9966;'); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5668080 --- /dev/null +++ b/styles.css @@ -0,0 +1,1158 @@ +/** + * TITLED GAMES WEBSITE STYLESHEET + * + * This stylesheet provides a modern, dynamic design for the Titled Games website. + * It includes: + * - Responsive layouts for all screen sizes + * - Smooth animations and transitions + * - Custom color scheme with gradients + * - Accessibility features + * + * Structure: + * 1. CSS Variables (for easy theming) + * 2. Reset and Base Styles + * 3. Navigation + * 4. Hero Section + * 5. About Section + * 6. Games Section + * 7. Team Section + * 8. Contact Section + * 9. Footer + * 10. Utilities and Animations + * 11. Responsive Design (Media Queries) + */ + +/* ============================================ + 1. CSS VARIABLES + Colors, spacing, and other design tokens + ============================================ */ +:root { + /* Primary Colors */ + --primary-color: #FF9966; + --secondary-color: #FF9966; + --accent-color: #FF9966; + + /* Neutral Colors - Light Mode */ + --dark-bg: #FFFFFF; + --dark-secondary: #F5F5F5; + --dark-accent: #EEEEEE; + --light-text: #333333; + --gray-text: #666666; + + /* Gradients */ + --gradient-primary: #FF9966; + --gradient-dark: #FFFFFF; + + /* Spacing */ + --spacing-xs: 0.5rem; + --spacing-sm: 1rem; + --spacing-md: 2rem; + --spacing-lg: 4rem; + --spacing-xl: 6rem; + + /* Typography */ + --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + --font-heading: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + + /* Transitions */ + --transition-speed: 0.3s; + + /* Border Radius */ + --radius-sm: 8px; + --radius-md: 16px; + --radius-lg: 24px; +} + +/* Dark Mode Variables */ +body.dark-mode { + /* Neutral Colors - Dark Mode */ + --dark-bg: #1a1a1a; + --dark-secondary: #2a2a2a; + --dark-accent: #3a3a3a; + --light-text: #e0e0e0; + --gray-text: #b0b0b0; + --gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); +} + +/* Dark mode specific adjustments */ +body.dark-mode .navbar { + background: rgba(26, 26, 26, 0.95); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); +} + +body.dark-mode .particle { + background: rgba(255, 153, 102, 0.4); +} + +body.dark-mode .hero { + background: var(--dark-bg); +} + +body.dark-mode .game-card { + border-color: var(--dark-accent); +} + +body.dark-mode .game-card:hover { + box-shadow: 0 15px 40px rgba(255, 153, 102, 0.2); +} + +body.dark-mode .social-link { + background: var(--dark-accent); +} + +body.dark-mode .footer { + background: var(--dark-secondary); + border-top-color: var(--dark-accent); +} + +/* Dark mode toggle button */ +.dark-mode-toggle { + background: none; + border: none; + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; +} + +/* Hero logo with image */ +.hero-logo-image { + background: transparent; + border: none; + box-shadow: none; +} + +.hero-logo-image img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +/* Game action container */ +.game-action { + margin-top: var(--spacing-sm); +} + +.game-action .btn { + display: inline-block; + text-align: center; +} + +/* ============================================ + 2. RESET AND BASE STYLES + ============================================ */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +body { + font-family: var(--font-primary); + background-color: var(--dark-bg); + color: var(--light-text); + line-height: 1.6; + overflow-x: hidden; +} + +/* Container for consistent width across sections */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing-md); +} + +/* Section spacing */ +section { + padding: var(--spacing-xl) 0; + position: relative; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-heading); + font-weight: 700; + line-height: 1.2; +} + +a { + color: inherit; + text-decoration: none; + transition: all var(--transition-speed) ease; +} + +/* ============================================ + 3. NAVIGATION + Fixed navigation bar with smooth transitions + ============================================ */ +.navbar { + position: fixed; + top: 0; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + padding: var(--spacing-sm) 0; + z-index: 1000; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); +} + +.navbar .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav-brand .logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-color); + display: flex; + align-items: center; + gap: 0.5rem; +} + +/* Circular TG logo */ +.logo-icon { + width: 40px; + height: 40px; + background: var(--primary-color); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + font-weight: 700; + color: white; + flex-shrink: 0; + line-height: 1; + letter-spacing: -1px; +} + +.nav-menu { + display: flex; + list-style: none; + gap: var(--spacing-md); +} + +.nav-link { + padding: var(--spacing-xs) var(--spacing-sm); + border-radius: var(--radius-sm); + transition: all var(--transition-speed) ease; +} + +.nav-link:hover { + background: rgba(255, 153, 102, 0.1); + color: var(--primary-color); +} + +/* Hamburger menu for mobile */ +.hamburger { + display: none; + flex-direction: column; + gap: 4px; + cursor: pointer; +} + +.hamburger span { + width: 25px; + height: 3px; + background: var(--light-text); + border-radius: 2px; + transition: all var(--transition-speed) ease; +} + +/* ============================================ + 4. HERO SECTION + Main landing area with animated particles + ============================================ */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + position: relative; + background: var(--gradient-dark); + overflow: hidden; +} + +/* Animated particles background */ +.particles { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 1; +} + +.hero-content { + position: relative; + z-index: 2; + text-align: center; + padding: var(--spacing-md); +} + +/* Large TG logo in hero */ +.hero-logo { + width: 200px; + height: 200px; + background: var(--primary-color); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 100px; + font-weight: 700; + color: white; + margin: 0 auto var(--spacing-lg); + letter-spacing: -5px; + border: 5px solid white; + box-shadow: 0 10px 40px rgba(255, 153, 102, 0.3); +} + +.hero h1 { + font-size: clamp(3rem, 10vw, 6rem); + margin-bottom: var(--spacing-sm); + position: relative; +} + +/* Logo styling for title */ +.glitch { + position: relative; + color: var(--light-text); +} + +.tagline { + font-size: clamp(1.5rem, 5vw, 2.5rem); + color: var(--primary-color); + margin-bottom: var(--spacing-sm); + font-weight: 700; +} + +.subtitle { + font-size: clamp(1rem, 3vw, 1.5rem); + color: var(--gray-text); + margin-bottom: var(--spacing-lg); +} + +/* Call-to-action buttons */ +.cta-buttons { + display: flex; + gap: var(--spacing-sm); + justify-content: center; + flex-wrap: wrap; +} + +.btn { + padding: var(--spacing-sm) var(--spacing-md); + border-radius: var(--radius-md); + font-weight: 600; + font-size: 1rem; + transition: all var(--transition-speed) ease; + cursor: pointer; + border: none; + display: inline-flex; + align-items: center; + gap: 8px; +} + +.btn-primary { + background: var(--primary-color); + color: white; + box-shadow: 0 4px 15px rgba(255, 153, 102, 0.3); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(255, 153, 102, 0.4); +} + +.btn-secondary { + background: transparent; + border: 2px solid var(--primary-color); + color: var(--light-text); +} + +.btn-secondary:hover { + background: var(--primary-color); + transform: translateY(-2px); +} + +/* ============================================ + 5. ABOUT SECTION + Company information and values + ============================================ */ +.about { + background: var(--dark-secondary); +} + +.section-title { + font-size: clamp(2rem, 5vw, 3rem); + text-align: center; + margin-bottom: var(--spacing-lg); + color: var(--light-text); +} + +.about-content { + max-width: 900px; + margin: 0 auto; +} + +.about-text .lead { + font-size: 1.25rem; + color: var(--accent-color); + margin-bottom: var(--spacing-md); +} + +.about-text p { + color: var(--gray-text); + margin-bottom: var(--spacing-md); + font-size: 1.1rem; +} + +.values { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--spacing-md); + margin-top: var(--spacing-lg); +} + +.value-item { + background: var(--dark-accent); + padding: var(--spacing-md); + border-radius: var(--radius-md); + text-align: center; + transition: all var(--transition-speed) ease; + border: 2px solid transparent; +} + +.value-item:hover { + border-color: var(--primary-color); + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(255, 153, 102, 0.2); +} + +.value-item h3 { + color: var(--light-text); + margin-bottom: var(--spacing-xs); +} + +.value-item p { + color: var(--gray-text); + font-size: 0.95rem; +} + +/* ============================================ + 6. GAMES SECTION + Showcase of games with WIP status + ============================================ */ +.games { + background: var(--dark-bg); +} + +.section-subtitle { + text-align: center; + color: var(--gray-text); + font-size: 1.1rem; + margin-bottom: var(--spacing-lg); +} + +.games-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: var(--spacing-md); + margin-bottom: var(--spacing-lg); +} + +.game-card { + background: var(--dark-secondary); + border-radius: var(--radius-lg); + overflow: hidden; + transition: all var(--transition-speed) ease; + border: 2px solid var(--dark-accent); +} + +.game-card:hover { + transform: translateY(-10px); + border-color: var(--primary-color); + box-shadow: 0 15px 40px rgba(255, 153, 102, 0.3); +} + +.game-image { + position: relative; + height: 200px; + overflow: hidden; +} + +.game-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.placeholder-image { + width: 100%; + height: 100%; + background: var(--primary-color); + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.game-icon { + font-size: 4rem; + opacity: 0.8; +} + +.game-info { + padding: var(--spacing-md); +} + +.game-info h3 { + margin-bottom: var(--spacing-sm); + color: var(--light-text); +} + +.game-info p { + color: var(--gray-text); + margin-bottom: var(--spacing-sm); +} + +.status-badge { + display: inline-block; + padding: var(--spacing-xs) var(--spacing-sm); + background: rgba(255, 153, 102, 0.1); + color: var(--primary-color); + border-radius: var(--radius-sm); + font-size: 0.875rem; + font-weight: 600; + border: 1px solid var(--primary-color); +} + +/* WIP Notice */ +.wip-notice { + text-align: center; + padding: var(--spacing-md); + background: rgba(255, 153, 102, 0.1); + border: 2px solid var(--primary-color); + border-radius: var(--radius-md); + margin-top: var(--spacing-lg); +} + +.wip-notice p { + color: var(--light-text); + font-size: 1.1rem; +} + +.wip-notice a { + color: var(--primary-color); + text-decoration: underline; +} + +.wip-notice a:hover { + color: var(--primary-color); + opacity: 0.8; +} + +/* ============================================ + 7. TEAM SECTION + Join the team information + ============================================ */ +.team { + background: var(--dark-secondary); +} + +.team-content { + max-width: 900px; + margin: 0 auto; + text-align: center; +} + +.team-content .lead { + font-size: 1.25rem; + color: var(--accent-color); + margin-bottom: var(--spacing-lg); +} + +.team-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--spacing-md); +} + +.team-item { + background: var(--dark-accent); + padding: var(--spacing-md); + border-radius: var(--radius-md); + transition: all var(--transition-speed) ease; + border: 2px solid transparent; +} + +.team-item:hover { + border-color: var(--primary-color); + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(255, 153, 102, 0.2); +} + +.team-icon { + font-size: 3rem; + margin-bottom: var(--spacing-sm); +} + +.team-item h3 { + color: var(--light-text); + margin-bottom: var(--spacing-xs); +} + +.team-item p { + color: var(--gray-text); + font-size: 0.95rem; +} + +/* ============================================ + 8. CONTACT SECTION + Social links and contact info + ============================================ */ +.contact { + background: var(--dark-bg); +} + +.contact-content { + max-width: 700px; + margin: 0 auto; + text-align: center; +} + +.contact-content .lead { + font-size: 1.25rem; + color: var(--gray-text); + margin-bottom: var(--spacing-lg); +} + +.social-links { + display: flex; + justify-content: center; + gap: var(--spacing-md); + flex-wrap: wrap; +} + +.social-link { + display: flex; + align-items: center; + gap: var(--spacing-xs); + padding: var(--spacing-sm) var(--spacing-md); + background: var(--dark-secondary); + border: 2px solid var(--primary-color); + border-radius: var(--radius-md); + transition: all var(--transition-speed) ease; +} + +.social-link:hover { + background: var(--primary-color); + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(255, 153, 102, 0.4); +} + +.social-link span { + font-weight: 600; +} + +/* ============================================ + 9. FOOTER + Site footer with links + ============================================ */ +.footer { + background: var(--dark-secondary); + padding: var(--spacing-lg) 0 var(--spacing-md); + border-top: 2px solid var(--dark-accent); +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--spacing-md); + flex-wrap: wrap; + gap: var(--spacing-md); +} + +.footer-brand .logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-color); + display: flex; + align-items: center; + gap: 0.5rem; +} + +.footer-brand p { + color: var(--gray-text); + margin-top: var(--spacing-xs); +} + +.footer-links { + display: flex; + gap: var(--spacing-md); + flex-wrap: wrap; +} + +.footer-links a { + color: var(--gray-text); +} + +.footer-links a:hover { + color: var(--primary-color); +} + +.footer-bottom { + text-align: center; + padding-top: var(--spacing-md); + border-top: 1px solid var(--dark-accent); + color: var(--gray-text); + font-size: 0.9rem; +} + +.footer-bottom a { + color: var(--primary-color); +} + +.footer-bottom a:hover { + color: var(--primary-color); + opacity: 0.8; +} + +/* ============================================ + 10. UTILITIES AND ANIMATIONS + ============================================ */ + +/* Back to top button */ +.back-to-top { + position: fixed; + bottom: 30px; + right: 30px; + width: 50px; + height: 50px; + background: var(--primary-color); + color: white; + border: none; + border-radius: 50%; + font-size: 1.5rem; + cursor: pointer; + opacity: 0; + visibility: hidden; + transition: all var(--transition-speed) ease; + z-index: 999; + box-shadow: 0 4px 15px rgba(255, 153, 102, 0.3); +} + +.back-to-top.visible { + opacity: 1; + visibility: visible; +} + +.back-to-top:hover { + transform: translateY(-5px); + box-shadow: 0 6px 20px rgba(255, 153, 102, 0.4); +} + +/* Particle animation */ +.particle { + position: absolute; + border-radius: 50%; + background: rgba(255, 153, 102, 0.3); + animation: float 20s infinite; +} + +@keyframes float { + 0%, 100% { + transform: translateY(0) translateX(0); + opacity: 0; + } + 10% { + opacity: 1; + } + 90% { + opacity: 1; + } + 100% { + transform: translateY(-100vh) translateX(100px); + opacity: 0; + } +} + +/* Fade in animation for sections */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ============================================ + 11. SEASONAL DECORATIONS + Themed decorations for holidays + ============================================ */ + +/* Base styles for all seasonal decorations */ +.seasonal-decoration { + position: absolute; + font-size: 2rem; + pointer-events: none; + user-select: none; + z-index: 10; +} + +/* Container needs relative positioning for seasonal decorations */ +.has-seasonal-decoration { + position: relative; +} + +/* ========== HALLOWEEN THEME ========== */ + +/* Orange accent overlay for Halloween */ +.halloween-theme { + --accent-halloween: #FF6B1A; +} + +.halloween-theme .primary-color { + filter: hue-rotate(20deg); +} + +/* Pumpkin decorations in hero section */ +.halloween-pumpkin { + font-size: 4rem; + animation: bob 3s ease-in-out infinite; +} + +.halloween-left { + left: 5%; + bottom: 10%; +} + +.halloween-right { + right: 5%; + bottom: 10%; +} + +@keyframes bob { + 0%, 100% { + transform: translateY(0) rotate(-5deg); + } + 50% { + transform: translateY(-20px) rotate(5deg); + } +} + +/* Flying bats */ +.halloween-bat { + font-size: 1.5rem; + animation: fly-bat 20s linear infinite; + opacity: 0.8; +} + +@keyframes fly-bat { + 0% { + transform: translate3d(0, 110vh, 0) rotate(0deg); + opacity: 0; + } + 10% { + opacity: 0.8; + } + 90% { + opacity: 0.8; + } + 100% { + transform: translate3d(200px, -100px, 0) rotate(360deg); + opacity: 0; + } +} + +/* Floating ghost in navbar */ +.halloween-ghost { + font-size: 1.5rem; + right: 100px; + top: 50%; + transform: translateY(-50%); + animation: ghost-float 4s ease-in-out infinite; +} + +@keyframes ghost-float { + 0%, 100% { + transform: translateY(-50%) translateX(0); + opacity: 0.7; + } + 50% { + transform: translateY(-60%) translateX(10px); + opacity: 1; + } +} + +/* ========== CHRISTMAS THEME ========== */ + +/* Festive color accents */ +.christmas-theme { + --accent-christmas-red: #C41E3A; + --accent-christmas-green: #165B33; +} + +/* Add subtle festive glow to primary elements */ +.christmas-theme .btn-primary { + box-shadow: 0 4px 15px rgba(196, 30, 58, 0.4); +} + +.christmas-theme .btn-primary:hover { + box-shadow: 0 6px 20px rgba(196, 30, 58, 0.6); +} + +/* Christmas trees in hero section */ +.christmas-tree { + font-size: 4rem; + animation: tree-sway 4s ease-in-out infinite; +} + +.christmas-left { + left: 5%; + bottom: 10%; +} + +.christmas-right { + right: 5%; + bottom: 10%; +} + +@keyframes tree-sway { + 0%, 100% { + transform: rotate(-3deg); + } + 50% { + transform: rotate(3deg); + } +} + +/* Falling snowflakes */ +.christmas-snowflake { + font-size: 1.5rem; + animation: snowfall 15s linear infinite; + opacity: 0.9; +} + +@keyframes snowfall { + 0% { + transform: translate3d(0, -100px, 0) rotate(0deg); + opacity: 0; + } + 10% { + opacity: 0.9; + } + 90% { + opacity: 0.9; + } + 100% { + transform: translate3d(0, 100vh, 0) rotate(360deg); + opacity: 0; + } +} + +/* Santa hat on logo */ +.christmas-santa { + font-size: 1.2rem; + position: absolute; + top: -10px; + right: -15px; + animation: santa-bounce 2s ease-in-out infinite; +} + +@keyframes santa-bounce { + 0%, 100% { + transform: translateY(0) rotate(-15deg); + } + 50% { + transform: translateY(-5px) rotate(-20deg); + } +} + +/* Present decoration */ +.christmas-present { + font-size: 2rem; + margin-left: 10px; + display: inline-block; + animation: present-wiggle 3s ease-in-out infinite; +} + +@keyframes present-wiggle { + 0%, 100% { + transform: rotate(0deg); + } + 25% { + transform: rotate(-10deg); + } + 75% { + transform: rotate(10deg); + } +} + +/* ============================================ + 12. RESPONSIVE DESIGN + Media queries for different screen sizes + ============================================ */ + +/* Tablet and below */ +@media (max-width: 768px) { + /* Navigation */ + .nav-menu { + position: fixed; + left: -100%; + top: 70px; + flex-direction: column; + background: rgba(255, 255, 255, 0.98); + width: 100%; + text-align: center; + transition: left 0.3s ease; + padding: var(--spacing-md); + box-shadow: 0 10px 27px rgba(0, 0, 0, 0.1); + } + + .nav-menu.active { + left: 0; + } + + .hamburger { + display: flex; + } + + .hamburger.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + + .hamburger.active span:nth-child(2) { + opacity: 0; + } + + .hamburger.active span:nth-child(3) { + transform: rotate(-45deg) translate(7px, -6px); + } + + /* Hero */ + .hero { + min-height: 90vh; + } + + .cta-buttons { + flex-direction: column; + align-items: center; + } + + .btn { + width: 100%; + max-width: 300px; + } + + /* Sections */ + section { + padding: var(--spacing-lg) 0; + } + + /* Games grid */ + .games-grid { + grid-template-columns: 1fr; + } + + /* Footer */ + .footer-content { + flex-direction: column; + text-align: center; + } + + .footer-links { + justify-content: center; + } +} + +/* Mobile */ +@media (max-width: 480px) { + :root { + --spacing-xl: 3rem; + --spacing-lg: 2rem; + } + + .container { + padding: 0 var(--spacing-sm); + } + + .values, + .team-grid { + grid-template-columns: 1fr; + } + + .back-to-top { + bottom: 20px; + right: 20px; + width: 45px; + height: 45px; + } + + /* Adjust seasonal decorations for mobile */ + .halloween-pumpkin, + .christmas-tree { + font-size: 2.5rem; + } + + .halloween-left, + .christmas-left { + left: 2%; + } + + .halloween-right, + .christmas-right { + right: 2%; + } + + .halloween-ghost { + display: none; /* Hide on mobile to avoid clutter */ + } + + .christmas-santa { + font-size: 1rem; + top: -5px; + right: -10px; + } + + /* Adjust hero logo for mobile */ + .hero-logo { + width: 150px; + height: 150px; + font-size: 75px; + letter-spacing: -3px; + } +} + +/* Smooth scrolling for all browsers */ +@media (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; + } +} + +/* High contrast mode support */ +@media (prefers-contrast: high) { + .btn-primary { + border: 2px solid var(--light-text); + } + + .btn-secondary { + border-width: 3px; + } +}