Previously we had more unfinished Games listed here.
- We develop high-quality free and open source software solutions, - with a focus on gaming and applications that respect user freedom. + We decided against displaying them and giving people the + impression we are working on them currently.
- -In the Future we will display the released games here
+ + + +- High-quality free software solutions built with passion and - dedication -
-- A small but dedicated international team committed to free - software -
-- Patrick focuses on backend development and system - administration, managing our infrastructure and core application - logic with expertise in server-side technologies and DevOps. -
-- Sage focuses on frontend development and is in charge of - communication and UI/UX design, ensuring our projects have - intuitive interfaces and excellent user experiences. -
-- Our mission is to create high-quality free software - alternatives, particularly for games that are unavailable on - free operating systems like GNU/Linux and FreeBSD. We aim to - address gaps in the software ecosystem where free alternatives - are lacking. -
-- All our projects are released under copyleft licenses to - ensure user freedoms are protected and preserved. -
-- We believe in building software with and for the community, - welcoming contributions and feedback. -
-- We strive to create software that matches or exceeds the - quality of proprietary alternatives. -
-+ Welcome to Interstellar Development! We are a small, passionate + international team dedicated to transforming the programming world + into a free-and-open-source future. Our diverse backgrounds and + experiences fuel our commitment to creating free and open-source + software, particularly in the realm of gaming. +
++ Our journey began with a shared vision: to better organize our efforts + in making free and open-source games more efficient and accessible. We + recognized that many current free software games are either lacking in + quality or simply do not exist. This realization inspired us to focus + on developing games that are unplayable on GNU/Linux and FreeBSD + systems, as well as creating free software alternatives for those in + need. +
++ At Interstellar Development, we believe that true freedom for computer + users can only be achieved through the use of free software. That’s + why we are committed to licensing all of our projects under copyleft + free and open-source software licenses, ensuring that our games remain + free for everyone to enjoy, forever. +
++ While we are not currently accepting donations, we welcome your + support in the form of feedback and suggestions for improvements. If + you wish to contribute financially, we encourage you to donate to the + Free Software Foundation, as without them, we would have never started + this. +
++ Join us as we strive to create a vibrant community around free + software and gaming. Together, we can make a difference and pave the + way for a free future! +
+ At Interstellar Development, we embarked on this journey to create a + more organized and efficient approach to developing free and + open-source software, with a particular focus on gaming. We recognized + a significant gap in the availability and quality of free software + games, which often fail to meet the expectations of users or simply do + not exist. Our mission is to fill this void and elevate the standards + of free gaming experiences. +
++ Our primary goal is to target games that are currently unplayable on + GNU/Linux and FreeBSD systems. We aim to develop high-quality + alternatives that not only provide enjoyable gameplay but also adhere + to the principles of free software. Additionally, we are committed to + identifying and addressing other areas within the software ecosystem + that lack free alternatives, ensuring that users have access to a + diverse range of tools and applications that respect their freedom. +
++ At Interstellar Development, we firmly believe that the path to true + freedom for computer users lies in the adoption and promotion of free + software. To this end, we are dedicated to licensing all of our + projects under copyleft free and open-source software licenses. This + commitment ensures that our games and software remain free for + everyone to play, modify, and share, fostering a culture of + collaboration and innovation within the community. +
++ We understand that community involvement is crucial to our success. + While we are not currently accepting donations, we invite you to + support us by providing feedback, reporting issues, and suggesting + improvements. Your insights are invaluable in helping us refine our + projects and enhance the user experience. +
++ If you feel compelled to contribute financially, we encourage you to + consider donating to the Free Software Foundation. Their unwavering + support and advocacy for free software principles have been + instrumental in our journey, and your contributions to them help + sustain the broader movement that enables us to create these games. +
++ Together, we can build a vibrant community around free software and + gaming, paving the way for a future where everyone has access to + high-quality, open-source alternatives. Join us in our mission to make + a difference and champion the cause of free software for all! +
- Have questions about our projects or want to contribute? We'd love - to hear from you. -
-+ In this game, you control a spaceship that shoots at asteroids to + avoid destruction and collect items for power-ups. +
+Your goal is to survive as long as possible while scoring points!
+ +Guess a number between 1 and 20
+A = check
+B = Reload
+▲ = increases guess by one
+▼ = decreases guess by one
+
+ + In this game, you control a spaceship that shoots at asteroids to + avoid destruction and collect items for power-ups. +
++ Your goal is to survive as long as possible while scoring points! +
+
+ + Try to beat the dealer by getting a hand value as close to 21 as + possible without going over. +
+
+ + Guide the snake to eat food and grow longer while avoiding + collisions with the walls and itself. +
+
+ + A classic card game where the objective is to move all cards to + foundation piles in ascending order. +
+
+ + Uncover squares on a grid while avoiding hidden mines, using + numbers to deduce safe spots. +
+
+ + A simple game where you try to guess a randomly chosen number + within a certain range. +
+
+ + Run through an endless landscape, avoiding obstacles and + collecting items to score points. +
+Eat as many apples and grow as much as possible
+◀ or A or arrow left = move left
+▶ or D or arrow right = move right
+▲ or W or arrow up = move up
+▼ or S or arrow down = move down
+${desc}
- ${ - collaboration - ? ` -Try adjusting your search or filter criteria
- `; - - // Function to filter portfolio items - function filterPortfolio() { - const activeFilter = - document.querySelector(".filter-btn.active").dataset.filter; - const searchTerm = searchInput.value.toLowerCase(); - let visibleItems = 0; - - portfolioItems.forEach((item) => { - const tags = item.getAttribute("tags").toLowerCase(); - const title = item.getAttribute("title").toLowerCase(); - const desc = item.getAttribute("desc").toLowerCase(); - - // Check if item matches the active filter - const matchesFilter = - activeFilter === "all" || - tags.includes(activeFilter) || - title.includes(activeFilter) || - desc.includes(activeFilter); - - // Check if item matches the search term - const matchesSearch = - searchTerm === "" || - title.includes(searchTerm) || - desc.includes(searchTerm) || - tags.includes(searchTerm); - - // Show or hide the item based on filters - if (matchesFilter && matchesSearch) { - item.style.display = "block"; - visibleItems++; - - // Add animation for appearing items - item.style.animation = "fadeInUp 0.5s ease forwards"; - } else { - item.style.display = "none"; - } - }); - - // Show no results message if needed - const portfolioGrid = document.querySelector(".portfolio-grid"); - const existingNoResults = portfolioGrid.querySelector(".no-results"); - - if (visibleItems === 0) { - if (!existingNoResults) { - portfolioGrid.appendChild(noResults); - } - } else if (existingNoResults) { - portfolioGrid.removeChild(existingNoResults); - } - } - - // Add click event listeners to filter buttons - filterButtons.forEach((button) => { - button.addEventListener("click", function () { - // Remove active class from all buttons - filterButtons.forEach((btn) => btn.classList.remove("active")); - - // Add active class to clicked button - this.classList.add("active"); - - // Filter portfolio items - filterPortfolio(); - }); - }); - - // Add input event listener to search field - searchInput.addEventListener("input", filterPortfolio); - - // Add keyboard shortcut for search (Ctrl/Cmd + F) - document.addEventListener("keydown", function (e) { - if ((e.ctrlKey || e.metaKey) && e.key === "f") { - e.preventDefault(); - searchInput.focus(); - } - }); - - // Initialize filter on page load - filterPortfolio(); -}); diff --git a/src/js/sectionTracker.js b/src/js/sectionTracker.js deleted file mode 100644 index e392724..0000000 --- a/src/js/sectionTracker.js +++ /dev/null @@ -1,111 +0,0 @@ -// Section tracking and navigation highlighting -document.addEventListener("DOMContentLoaded", function () { - const sections = document.querySelectorAll("section[id]"); - const navLinks = document.querySelectorAll(".nav-links a"); - - // Configuration - const offset = 100; // Offset for when section becomes "active" (accounts for fixed nav) - let isScrolling = false; - - function getCurrentSection() { - let currentSection = ""; - const scrollPosition = window.scrollY + offset; - - // Find which section we're currently in - sections.forEach((section) => { - const sectionTop = section.offsetTop; - const sectionHeight = section.offsetHeight; - const sectionId = section.getAttribute("id"); - - if ( - scrollPosition >= sectionTop && - scrollPosition < sectionTop + sectionHeight - ) { - currentSection = sectionId; - } - }); - - // Special case: if we're at the very top, activate the first section - if (window.scrollY < 100) { - currentSection = sections[0]?.getAttribute("id") || ""; - } - - return currentSection; - } - - function updateActiveNavLink() { - const currentSection = getCurrentSection(); - - navLinks.forEach((link) => { - const href = link.getAttribute("href"); - - // Remove active class from all links - link.classList.remove("active"); - - // Add active class to matching link - if (href === `#${currentSection}`) { - link.classList.add("active"); - } - }); - } - - // Throttle scroll events for better performance - function handleScroll() { - if (!isScrolling) { - window.requestAnimationFrame(() => { - updateActiveNavLink(); - isScrolling = false; - }); - isScrolling = true; - } - } - - // Listen for scroll events - window.addEventListener("scroll", handleScroll); - - // Update on page load - updateActiveNavLink(); - - // Also update when clicking nav links (for smooth scroll) - navLinks.forEach((link) => { - link.addEventListener("click", function (e) { - // Remove active from all - navLinks.forEach((l) => l.classList.remove("active")); - // Add active to clicked link - this.classList.add("active"); - - // Let the scroll handler update it properly after scroll completes - setTimeout(updateActiveNavLink, 100); - }); - }); - - // Handle hash changes (browser back/forward) - window.addEventListener("hashchange", function () { - setTimeout(updateActiveNavLink, 100); - }); - - // Intersection Observer for more precise tracking (progressive enhancement) - if ("IntersectionObserver" in window) { - const observerOptions = { - rootMargin: "-20% 0px -70% 0px", // Trigger when section is roughly in the middle of viewport - threshold: 0, - }; - - const observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - const sectionId = entry.target.getAttribute("id"); - navLinks.forEach((link) => { - link.classList.remove("active"); - if (link.getAttribute("href") === `#${sectionId}`) { - link.classList.add("active"); - } - }); - } - }); - }, observerOptions); - - // Observe all sections - sections.forEach((section) => observer.observe(section)); - } -}); diff --git a/src/styles/styles.css b/src/styles/styles.css deleted file mode 100644 index 3229eb9..0000000 --- a/src/styles/styles.css +++ /dev/null @@ -1,1943 +0,0 @@ -/* Modern CSS Reset and Variables */ -:root { - /* Color System */ - --bg-primary: #0a0a0a; - --bg-secondary: #111111; - --bg-tertiary: #1a1a1a; - --bg-card: #161616; - --bg-card-hover: #1e1e1e; - - --text-primary: #ffffff; - --text-secondary: #b3b3b3; - --text-muted: #737373; - - --accent-primary: #00f5ff; - --accent-secondary: #7c3aed; - --accent-gradient: linear-gradient(135deg, #00f5ff, #7c3aed); - --accent-gradient-reverse: linear-gradient(135deg, #7c3aed, #00f5ff); - - --purple: #8b5cf6; - --purple-light: #a78bfa; - --purple-dark: #7c3aed; - --purple-muted: #6d28d9; - --shadow-purple: rgba(139, 92, 246, 0.3); - - --border-subtle: #262626; - --border-accent: #333333; - - /* Shadows */ - --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); - --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); - --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1); - --shadow-glow: 0 0 20px rgba(0, 245, 255, 0.1); - - /* Border Radius */ - --radius-sm: 8px; - --radius-md: 12px; - --radius-lg: 16px; - --radius-xl: 24px; - - /* Spacing */ - --spacing-xs: 0.5rem; - --spacing-sm: 1rem; - --spacing-md: 1.5rem; - --spacing-lg: 2rem; - --spacing-xl: 3rem; - --spacing-2xl: 4rem; - - /* Typography */ - --font-primary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; - --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace; - - /* Z-Index Scale */ - --z-navigation: 1000; - --z-modal: 1100; - --z-tooltip: 1200; -} - -/* Reset */ -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; - font-size: 16px; -} - -body { - font-family: var(--font-primary); - background: var(--bg-primary); - color: var(--text-primary); - line-height: 1.6; - overflow-x: hidden; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -body.nav-open { - overflow: hidden; -} - -/* Links */ -a { - color: inherit; - text-decoration: none; -} - -/* Lists */ -ul, -ol { - list-style: none; -} - -/* Images */ -img { - max-width: 100%; - height: auto; -} - -/* Focus States */ -*:focus { - outline: 2px solid var(--accent-primary); - outline-offset: 2px; -} - -/* Enhanced Background Effects */ -.animated-bg { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -2; - background: radial-gradient( - circle at 20% 50%, - rgba(124, 58, 237, 0.15) 0%, - transparent 50% - ), - radial-gradient( - circle at 80% 20%, - rgba(0, 245, 255, 0.12) 0%, - transparent 50% - ), - radial-gradient( - circle at 40% 80%, - rgba(124, 58, 237, 0.1) 0%, - transparent 50% - ); - animation: gradientShift 15s ease infinite; -} - -@keyframes gradientShift { - 0%, - 100% { - background-position: 0% 50%, 100% 50%, 50% 100%; - } - 50% { - background-position: 100% 50%, 0% 50%, 50% 0%; - } -} - -.stars { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: -1; -} - -.star { - position: absolute; - background: rgba(255, 255, 255, 0.8); - border-radius: 50%; - animation: twinkle 3s infinite ease-in-out; -} - -@keyframes twinkle { - 0%, - 100% { - opacity: 0.3; - transform: scale(1); - } - 50% { - opacity: 1; - transform: scale(1.2); - } -} - -/* Enhanced Navigation with Fixed Background Animations */ -nav { - position: fixed; - top: 0; - width: 100%; - background: rgba(10, 10, 10, 0.95); - backdrop-filter: blur(20px) saturate(180%); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - z-index: var(--z-navigation); - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - transform: translateY(0); -} - -/* Hide nav on scroll down, show on scroll up */ -nav.hidden { - transform: translateY(-100%); -} - -nav.scrolled { - background: rgba(10, 10, 10, 0.98); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); - border-bottom-color: rgba(124, 58, 237, 0.2); -} - -.nav-container { - max-width: 1400px; - margin: 0 auto; - padding: 0 var(--spacing-lg); - display: flex; - align-items: center; - justify-content: space-between; - height: 70px; -} - -.logo { - font-weight: 800; - font-size: 1.5rem; - background: var(--accent-gradient); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - position: relative; - padding: var(--spacing-xs) 0; -} - -.logo::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 0; - height: 2px; - background: var(--accent-gradient); - transition: width 0.3s ease; -} - -.logo:hover::after { - width: 100%; -} - -.nav-links { - display: flex; - gap: var(--spacing-md); - align-items: center; -} - -.nav-links a { - color: var(--text-secondary); - font-weight: 500; - font-size: 0.9rem; - padding: var(--spacing-sm) var(--spacing-md); - border-radius: var(--radius-md); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; -} - -/* Fixed background animation - only shows on hover */ -.nav-links a::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--accent-gradient); - opacity: 0; - transition: opacity 0.3s ease; - z-index: -1; - border-radius: var(--radius-md); -} - -.nav-links a:hover::before { - opacity: 0.1; -} - -/* Underline animation */ -.nav-links a::after { - content: ""; - position: absolute; - bottom: 0; - left: 50%; - transform: translateX(-50%); - width: 0; - height: 2px; - background: var(--accent-primary); - transition: width 0.3s ease; - border-radius: 2px; -} - -.nav-links a:hover { - color: var(--accent-primary); - transform: translateY(-1px); -} - -.nav-links a:hover::after { - width: 80%; -} - -/* Active state */ -.nav-links a.active { - color: var(--accent-primary); - background: rgba(0, 245, 255, 0.1); -} - -.nav-links a.active::after { - width: 80%; -} - -.nav-links a.active::before { - opacity: 0.1; -} - -/* Mobile menu button */ -.mobile-menu-btn { - display: none; - background: none; - border: none; - color: var(--text-primary); - font-size: 1.5rem; - cursor: pointer; - padding: var(--spacing-sm); - border-radius: var(--radius-md); - transition: all 0.3s ease; - position: relative; - z-index: 1001; -} - -.mobile-menu-btn:hover { - background: rgba(124, 58, 237, 0.1); - color: var(--accent-primary); -} - -.mobile-menu-btn.active { - color: var(--accent-primary); -} - -/* Mobile menu styles */ -@media (max-width: 768px) { - .mobile-menu-btn { - display: block; - } - - .nav-links { - position: fixed; - top: 0; - right: -100%; - width: 280px; - height: 100vh; - background: rgba(10, 10, 10, 0.98); - backdrop-filter: blur(30px); - flex-direction: column; - padding: 80px var(--spacing-lg) var(--spacing-lg); - transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - border-left: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3); - } - - .nav-links.active { - right: 0; - } - - .nav-links a { - width: 100%; - text-align: center; - padding: var(--spacing-md); - font-size: 1.1rem; - border-radius: var(--radius-lg); - margin-bottom: var(--spacing-xs); - } - - .nav-links a::after { - display: none; - } - - .nav-links a::before { - border-radius: var(--radius-lg); - } - - /* Overlay for mobile menu */ - .nav-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(5px); - z-index: 999; - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; - } - - .nav-overlay.active { - opacity: 1; - visibility: visible; - } -} - -/* Enhanced scroll behavior */ -.nav-scroll-hide { - animation: navHide 0.4s ease forwards; -} - -.nav-scroll-show { - animation: navShow 0.4s ease forwards; -} - -@keyframes navHide { - from { - transform: translateY(0); - } - to { - transform: translateY(-100%); - } -} - -@keyframes navShow { - from { - transform: translateY(-100%); - } - to { - transform: translateY(0); - } -} - -/* Container */ -.container { - max-width: 1400px; - margin: 0 auto; - padding: 0 var(--spacing-lg); -} - -/* Enhanced Hero Section */ -.hero { - min-height: 100vh; - display: flex; - align-items: center; - padding-top: 80px; - position: relative; - overflow: hidden; -} - -.hero::before { - content: ""; - position: absolute; - top: 50%; - left: 50%; - width: 100%; - height: 100%; - background: radial-gradient( - circle at center, - rgba(124, 58, 237, 0.1) 0%, - transparent 70% - ); - transform: translate(-50%, -50%); - animation: pulse 4s ease-in-out infinite; -} - -@keyframes pulse { - 0%, - 100% { - opacity: 0.5; - transform: translate(-50%, -50%) scale(1); - } - 50% { - opacity: 0.8; - transform: translate(-50%, -50%) scale(1.1); - } -} - -.hero-content { - max-width: 800px; - margin: 0 auto; - text-align: center; - padding: var(--spacing-lg) 0; - position: relative; - z-index: 1; -} - -.hero h1 { - font-size: clamp(2.5rem, 6vw, 4rem); - font-weight: 800; - margin-bottom: var(--spacing-md); - line-height: 1.1; - letter-spacing: -0.02em; - animation: slideUp 1s ease-out; -} - -@keyframes slideUp { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.hero h1 .highlight { - background: var(--accent-gradient); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - position: relative; - display: inline-block; -} - -.hero h1 .highlight::after { - content: ""; - position: absolute; - bottom: -5px; - left: 0; - width: 100%; - height: 3px; - background: var(--accent-gradient); - transform: scaleX(0); - transform-origin: left; - animation: expandLine 1s ease-out 0.5s forwards; -} - -@keyframes expandLine { - to { - transform: scaleX(1); - } -} - -.hero p { - font-size: 1.25rem; - color: var(--text-secondary); - margin-bottom: var(--spacing-xl); - max-width: 600px; - margin-left: auto; - margin-right: auto; - line-height: 1.6; - animation: slideUp 1s ease-out 0.2s both; -} - -.hero-buttons { - display: flex; - gap: var(--spacing-sm); - justify-content: center; - flex-wrap: wrap; - animation: slideUp 1s ease-out 0.4s both; -} - -/* Enhanced Buttons */ -.btn { - display: inline-flex; - align-items: center; - gap: var(--spacing-xs); - padding: 0.875rem var(--spacing-lg); - border-radius: var(--radius-md); - font-weight: 600; - font-size: 0.9rem; - text-decoration: none; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - border: none; - cursor: pointer; - position: relative; - overflow: hidden; -} - -.btn::before { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.2), - transparent - ); - transition: left 0.5s ease; -} - -.btn:hover::before { - left: 100%; -} - -.btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.btn-primary { - background: var(--accent-gradient); - color: var(--bg-primary); - box-shadow: var(--shadow-glow); -} - -.btn-primary:hover:not(:disabled) { - transform: translateY(-3px); - box-shadow: 0 15px 30px rgba(0, 245, 255, 0.4); -} - -.btn-secondary { - background: transparent; - color: var(--text-primary); - border: 2px solid var(--border-accent); - position: relative; - overflow: hidden; -} - -.btn-secondary::after { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--accent-gradient); - opacity: 0.1; - transition: left 0.3s ease; - z-index: -1; -} - -.btn-secondary:hover:not(:disabled) { - background: var(--bg-card); - border-color: var(--accent-primary); - transform: translateY(-3px); -} - -.btn-secondary:hover::after { - left: 0; -} - -/* Enhanced Sections */ -.section { - padding: 8rem 0; - position: relative; -} - -.section::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient( - 180deg, - transparent 0%, - rgba(124, 58, 237, 0.03) 50%, - transparent 100% - ); - pointer-events: none; -} - -.section-header { - text-align: center; - margin-bottom: var(--spacing-2xl); - position: relative; -} - -.section-title { - font-size: clamp(2rem, 4vw, 3rem); - font-weight: 700; - margin-bottom: var(--spacing-sm); - letter-spacing: -0.02em; - position: relative; - display: inline-block; -} - -.section-title::after { - content: ""; - position: absolute; - bottom: -10px; - left: 50%; - transform: translateX(-50%); - width: 60px; - height: 3px; - background: var(--accent-gradient); - border-radius: 2px; -} - -.section-subtitle { - font-size: 1.125rem; - color: var(--text-secondary); - max-width: 600px; - margin: 0 auto; - line-height: 1.6; -} - -/* Enhanced Portfolio Controls */ -.portfolio-controls { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: var(--spacing-xl); - flex-wrap: wrap; - gap: var(--spacing-md); -} - -.filter-buttons { - display: flex; - gap: var(--spacing-sm); - flex-wrap: wrap; -} - -.filter-btn { - padding: 0.75rem 1.5rem; - background: var(--bg-card); - border: 1px solid var(--border-subtle); - border-radius: var(--radius-md); - color: var(--text-secondary); - font-weight: 500; - cursor: pointer; - transition: all 0.3s ease; - position: relative; - overflow: hidden; -} - -.filter-btn::before { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--accent-gradient); - transition: left 0.3s ease; - z-index: -1; -} - -.filter-btn:hover { - background: var(--bg-card-hover); - color: var(--text-primary); - transform: translateY(-2px); - border-color: var(--accent-primary); -} - -.filter-btn.active { - background: var(--accent-gradient); - color: var(--bg-primary); - border-color: transparent; - box-shadow: var(--shadow-glow); -} - -.search-box { - position: relative; - max-width: 300px; - width: 100%; -} - -.search-box input { - width: 100%; - padding: 0.75rem 1rem 0.75rem 2.5rem; - background: var(--bg-card); - border: 1px solid var(--border-subtle); - border-radius: var(--radius-md); - color: var(--text-primary); - font-size: 0.95rem; - transition: all 0.3s ease; -} - -.search-box input:focus { - outline: none; - border-color: var(--accent-primary); - box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.1); - background: var(--bg-card-hover); -} - -.search-box i { - position: absolute; - left: 1rem; - top: 50%; - transform: translateY(-50%); - color: var(--text-muted); - transition: color 0.3s ease; -} - -.search-box input:focus + i { - color: var(--accent-primary); -} - -/* Enhanced Portfolio Grid */ -.portfolio-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - gap: var(--spacing-lg); -} - -portfolio-card { - background: var(--bg-card); - border: 1px solid var(--border-subtle); - border-radius: var(--radius-lg); - overflow: hidden; - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - position: relative; - display: block; - opacity: 0; - transform: translateY(30px); - animation: fadeInUp 0.6s ease forwards; -} - -@keyframes fadeInUp { - to { - opacity: 1; - transform: translateY(0); - } -} - -portfolio-card::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 3px; - background: var(--accent-gradient); - transform: scaleX(0); - transform-origin: left; - transition: transform 0.3s ease; -} - -portfolio-card:hover::before { - transform: scaleX(1); -} - -portfolio-card:hover { - transform: translateY(-10px) scale(1.02); - background: var(--bg-card-hover); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 245, 255, 0.1); - border-color: var(--border-accent); -} - -.portfolio-img { - display: flex; - align-items: center; - justify-content: center; - height: 120px; - background: var(--accent-gradient); - font-size: 2.5rem; - color: #ffffff; - position: relative; - overflow: hidden; -} - -.portfolio-img::after { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.2), - transparent - ); - transition: left 0.5s ease; -} - -portfolio-card:hover .portfolio-img::after { - left: 100%; -} - -.portfolio-content { - padding: var(--spacing-lg); -} - -.portfolio-title { - display: flex; - align-items: center; - gap: var(--spacing-sm); - font-size: 1.5rem; - font-weight: 600; - margin-bottom: var(--spacing-sm); - color: var(--text-primary); -} - -.portfolio-desc { - color: var(--text-secondary); - margin-bottom: var(--spacing-md); - line-height: 1.6; -} - -.portfolio-tags { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-xs); - margin-bottom: var(--spacing-md); -} - -.tag { - padding: 0.25rem 0.75rem; - background: rgba(0, 245, 255, 0.1); - color: var(--accent-primary); - border-radius: var(--radius-sm); - font-size: 0.8rem; - font-weight: 500; - font-family: var(--font-mono); - transition: all 0.3s ease; -} - -.tag:hover { - background: rgba(0, 245, 255, 0.2); - transform: translateY(-1px); -} - -/* Enhanced Portfolio Button */ -.portfolio-btn-container { - margin-top: auto; - padding: 0 1.5rem 1.5rem; -} - -.portfolio-btn { - width: 100%; - position: relative; - overflow: hidden; - z-index: 1; - padding: 1rem 1.8rem; - border-radius: 8px; - font-weight: 600; - letter-spacing: 0.5px; - text-transform: uppercase; - font-size: 0.9rem; - transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); - border: 2px solid transparent; - background: linear-gradient(135deg, var(--purple), var(--purple-dark)); - color: white; - box-shadow: 0 4px 15px var(--shadow-purple); - display: flex; - justify-content: center; - align-items: center; - gap: 0.8rem; - text-decoration: none; - text-align: center; -} - -.portfolio-btn::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(135deg, var(--purple-dark), var(--purple-muted)); - z-index: -1; - transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); - transform: scaleX(0); - transform-origin: right; -} - -.portfolio-btn:hover::before { - transform: scaleX(1); - transform-origin: left; -} - -.portfolio-btn:hover { - transform: translateY(-3px); - box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4); - border-color: var(--purple-light); -} - -.portfolio-btn:active { - transform: translateY(0); - box-shadow: 0 4px 15px var(--shadow-purple); -} - -.portfolio-btn i { - font-size: 1rem; - transition: transform 0.3s ease; -} - -.portfolio-btn:hover i { - transform: translateX(4px); -} - -.portfolio-btn::after { - content: ""; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: linear-gradient( - to bottom right, - rgba(255, 255, 255, 0.2), - rgba(255, 255, 255, 0.1) 20%, - rgba(255, 255, 255, 0) 50%, - rgba(255, 255, 255, 0) 100% - ); - transform: rotate(30deg) translateY(-150%); - transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); -} - -.portfolio-btn:hover::after { - transform: rotate(30deg) translateY(150%); -} - -.portfolio-btn:focus { - outline: 2px solid var(--purple-light); - outline-offset: 2px; -} - -/* Enhanced Collaboration Badge */ -.collaboration-badge { - display: inline-flex; - align-items: center; - gap: 0.4rem; - background: linear-gradient(135deg, #3b82f6, #2563eb); - color: white; - padding: 0.3rem 0.8rem; - border-radius: 20px; - font-size: 0.75rem; - margin-top: 0.5rem; - margin-bottom: 1rem; - animation: pulse 2s infinite; - position: relative; - overflow: hidden; -} - -.collaboration-badge::before { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.3), - transparent - ); - transition: left 0.5s ease; -} - -.collaboration-badge:hover::before { - left: 100%; -} - -@keyframes pulse { - 0% { - box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); - } - 70% { - box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); - } - 100% { - box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); - } -} - -/* Enhanced Stats Section */ -.stats-section { - background: var(--bg-secondary); - padding: var(--spacing-2xl) 0; - position: relative; - overflow: hidden; -} - -.stats-section::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient( - 45deg, - transparent 30%, - rgba(124, 58, 237, 0.05) 50%, - transparent 70% - ); - animation: shimmer 3s ease-in-out infinite; -} - -@keyframes shimmer { - 0%, - 100% { - transform: translateX(-100%); - } - 50% { - transform: translateX(100%); - } -} - -.stats-container { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: var(--spacing-lg); - text-align: center; - position: relative; - z-index: 1; -} - -.stat-item { - padding: var(--spacing-lg); - position: relative; -} - -.stat-item::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--accent-gradient); - opacity: 0; - border-radius: var(--radius-lg); - transition: opacity 0.3s ease; - z-index: -1; -} - -.stat-item:hover::before { - opacity: 0.05; -} - -.stat-number { - font-size: 3rem; - font-weight: 800; - background: var(--accent-gradient); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - margin-bottom: var(--spacing-sm); -} - -.stat-label { - color: var(--text-secondary); - font-weight: 500; - font-size: 1.1rem; -} - -/* Enhanced Team Section */ -.team-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: var(--spacing-lg); - margin-top: var(--spacing-lg); -} - -.team-member { - background: var(--bg-card); - border: 1px solid var(--border-subtle); - border-radius: var(--radius-lg); - padding: var(--spacing-lg); - text-align: center; - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - position: relative; - overflow: hidden; -} - -.team-member::before { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--accent-gradient); - opacity: 0.05; - transition: left 0.3s ease; - z-index: -1; -} - -.team-member:hover::before { - left: 0; -} - -.team-member:hover { - transform: translateY(-8px) scale(1.02); - background: var(--bg-card-hover); - box-shadow: var(--shadow-xl); - border-color: var(--border-accent); -} - -.member-avatar { - width: 120px; - height: 120px; - background: var(--accent-gradient); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 2.5rem; - color: #ffffff; - margin: 0 auto var(--spacing-md); - position: relative; - transition: all 0.3s ease; -} - -.team-member:hover .member-avatar { - transform: scale(1.1) rotate(5deg); -} - -.member-avatar::after { - content: ""; - position: absolute; - inset: 3px; - background: var(--bg-card); - border-radius: 50%; - z-index: 1; -} - -.member-avatar i { - z-index: 2; - position: relative; -} - -.team-member h3 { - font-size: 1.5rem; - font-weight: 600; - margin-bottom: var(--spacing-xs); -} - -.team-role { - color: var(--accent-primary); - font-weight: 500; - margin-bottom: var(--spacing-sm); - font-family: var(--font-mono); - font-size: 0.9rem; -} - -.team-member p { - color: var(--text-secondary); - line-height: 1.6; -} - -/* Enhanced About Section */ -.about-content { - max-width: 800px; - margin: 0 auto; - text-align: center; -} - -.about-content p { - font-size: 1.125rem; - color: var(--text-secondary); - margin-bottom: var(--spacing-lg); - line-height: 1.7; - text-align: left; - position: relative; - padding-left: var(--spacing-lg); -} - -.about-content p::before { - content: ""; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 3px; - background: var(--accent-gradient); - border-radius: 2px; - transform: scaleY(0); - transition: transform 0.3s ease; -} - -.about-content p:hover::before { - transform: scaleY(1); -} - -.about-content p:last-child { - margin-bottom: 0; -} - -/* Enhanced Vision Section */ -.vision-content { - max-width: 1000px; - margin: 0 auto; -} - -.vision-text { - text-align: center; - margin-bottom: var(--spacing-2xl); -} - -.vision-text p { - font-size: 1.125rem; - color: var(--text-secondary); - line-height: 1.7; - max-width: 700px; - margin: 0 auto; -} - -.principles-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: var(--spacing-lg); -} - -.principle-card { - background: var(--bg-card); - border: 1px solid var(--border-subtle); - border-radius: var(--radius-lg); - padding: var(--spacing-lg); - text-align: center; - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - position: relative; - overflow: hidden; -} - -.principle-card::before { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--accent-gradient); - opacity: 0.05; - transition: left 0.3s ease; - z-index: -1; -} - -.principle-card:hover::before { - left: 0; -} - -.principle-card:hover { - transform: translateY(-8px) scale(1.02); - background: var(--bg-card-hover); - box-shadow: var(--shadow-lg); - border-color: var(--border-accent); -} - -.principle-icon { - display: flex; - align-items: center; - justify-content: center; - width: 80px; - height: 80px; - background: var(--accent-gradient); - border-radius: 50%; - margin: 0 auto var(--spacing-md); - font-size: 1.8rem; - color: #ffffff; - transition: all 0.3s ease; -} - -.principle-card:hover .principle-icon { - transform: scale(1.1) rotate(10deg); -} - -.principle-card h4 { - font-size: 1.25rem; - font-weight: 600; - margin-bottom: var(--spacing-sm); - color: var(--text-primary); -} - -.principle-card p { - color: var(--text-secondary); - line-height: 1.6; -} - -/* Enhanced Contact Section */ -.contact-container { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--spacing-2xl); - max-width: 1000px; - margin: 0 auto; -} - -.contact-methods { - display: flex; - flex-direction: column; - gap: var(--spacing-lg); -} - -.contact-item { - display: flex; - align-items: flex-start; - gap: var(--spacing-sm); - transition: all 0.3s ease; - padding: var(--spacing-md); - border-radius: var(--radius-lg); -} - -.contact-item:hover { - background: var(--bg-card); - transform: translateX(10px); -} - -.contact-icon { - display: flex; - align-items: center; - justify-content: center; - width: 50px; - height: 50px; - background: var(--accent-gradient); - border-radius: var(--radius-md); - font-size: 1.2rem; - color: #ffffff; - flex-shrink: 0; - transition: all 0.3s ease; -} - -.contact-item:hover .contact-icon { - transform: scale(1.1) rotate(5deg); -} - -.contact-details h4 { - font-size: 1.1rem; - font-weight: 600; - margin-bottom: var(--spacing-xs); - color: var(--text-primary); -} - -.contact-details a { - color: var(--text-secondary); - transition: color 0.3s ease; - position: relative; -} - -.contact-details a::after { - content: ""; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 1px; - background: var(--accent-primary); - transition: width 0.3s ease; -} - -.contact-details a:hover { - color: var(--accent-primary); -} - -.contact-details a:hover::after { - width: 100%; -} - -/* Enhanced Contact Form */ -.contact-form { - background: var(--bg-card); - border: 1px solid var(--border-subtle); - border-radius: var(--radius-lg); - padding: var(--spacing-xl); - transition: all 0.3s ease; -} - -.contact-form:hover { - border-color: var(--accent-primary); - box-shadow: var(--shadow-glow); -} - -.form-group { - margin-bottom: var(--spacing-md); - position: relative; -} - -.form-group label { - display: block; - margin-bottom: var(--spacing-xs); - font-weight: 500; - color: var(--text-primary); - font-size: 0.9rem; - transition: color 0.3s ease; -} - -.form-group input, -.form-group select, -.form-group textarea { - width: 100%; - padding: var(--spacing-sm); - background: var(--bg-tertiary); - border: 1px solid var(--border-subtle); - border-radius: var(--radius-md); - color: var(--text-primary); - font-size: 0.95rem; - font-family: var(--font-primary); - transition: all 0.3s ease; -} - -.form-group input:focus, -.form-group select:focus, -.form-group textarea:focus { - outline: none; - border-color: var(--accent-primary); - box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.1); - background: var(--bg-card-hover); -} - -.form-group textarea { - resize: vertical; - min-height: 120px; - font-family: var(--font-primary); -} - -.form-group select { - cursor: pointer; -} - -.contact-form .btn { - width: 100%; - justify-content: center; - margin-top: var(--spacing-sm); -} - -/* Enhanced Footer */ -.footer { - background: var(--bg-secondary); - border-top: 1px solid var(--border-subtle); - padding: var(--spacing-2xl) 0 var(--spacing-lg); - position: relative; -} - -.footer::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 1px; - background: var(--accent-gradient); -} - -.footer-content { - display: grid; - grid-template-columns: 2fr 1fr 1fr 1fr; - gap: var(--spacing-xl); - margin-bottom: var(--spacing-xl); -} - -.footer-brand .logo { - font-size: 1.5rem; - margin-bottom: var(--spacing-sm); - display: block; -} - -.footer-brand p { - color: var(--text-secondary); - margin-bottom: var(--spacing-lg); - line-height: 1.6; - max-width: 300px; -} - -.footer-social { - display: flex; - gap: var(--spacing-sm); -} - -.social-link { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - background: var(--bg-card); - border: 1px solid var(--border-subtle); - border-radius: var(--radius-md); - color: var(--text-secondary); - font-size: 1.1rem; - transition: all 0.3s ease; - position: relative; - overflow: hidden; -} - -.social-link::before { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: var(--accent-gradient); - transition: left 0.3s ease; - z-index: -1; -} - -.social-link:hover::before { - left: 0; -} - -.social-link:hover { - background: var(--accent-gradient); - color: #ffffff; - transform: translateY(-3px) scale(1.1); - border-color: transparent; -} - -.footer-links h4 { - font-size: 1.1rem; - font-weight: 600; - color: var(--text-primary); - margin-bottom: var(--spacing-sm); - position: relative; -} - -.footer-links h4::after { - content: ""; - position: absolute; - bottom: -5px; - left: 0; - width: 30px; - height: 2px; - background: var(--accent-primary); -} - -.footer-links ul { - display: flex; - flex-direction: column; - gap: var(--spacing-xs); -} - -.footer-links a { - color: var(--text-secondary); - font-size: 0.9rem; - transition: all 0.3s ease; - padding: 0.25rem 0; - position: relative; -} - -.footer-links a::before { - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 0; - height: 1px; - background: var(--accent-primary); - transition: width 0.3s ease; -} - -.footer-links a:hover { - color: var(--accent-primary); - transform: translateX(5px); -} - -.footer-links a:hover::before { - width: 100%; -} - -.footer-bottom { - border-top: 1px solid var(--border-subtle); - padding-top: var(--spacing-lg); -} - -.footer-bottom-content { - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: var(--spacing-sm); -} - -.footer-bottom p { - color: var(--text-muted); - font-size: 0.9rem; -} - -.footer-badges { - display: flex; - align-items: center; - gap: var(--spacing-sm); -} - -.badge { - display: flex; - align-items: center; - gap: var(--spacing-xs); - padding: var(--spacing-xs) var(--spacing-sm); - background: var(--bg-card); - border: 1px solid var(--border-subtle); - border-radius: var(--radius-sm); - font-size: 0.8rem; - color: var(--text-muted); - transition: all 0.3s ease; -} - -.badge:hover { - background: var(--accent-gradient); - color: var(--bg-primary); - border-color: transparent; - transform: translateY(-2px); -} - -.badge i { - color: var(--accent-primary); -} - -.badge:hover i { - color: var(--bg-primary); -} - -/* Enhanced No Results */ -.no-results { - grid-column: 1 / -1; - text-align: center; - padding: var(--spacing-2xl); - color: var(--text-muted); - position: relative; -} - -.no-results i { - font-size: 3rem; - margin-bottom: var(--spacing-md); - opacity: 0.5; - animation: bounce 2s infinite; -} - -@keyframes bounce { - 0%, - 20%, - 50%, - 80%, - 100% { - transform: translateY(0); - } - 40% { - transform: translateY(-10px); - } - 60% { - transform: translateY(-5px); - } -} - -.no-results h3 { - font-size: 1.5rem; - margin-bottom: var(--spacing-sm); - color: var(--text-secondary); -} - -.no-results p { - color: var(--text-muted); -} - -/* Responsive Design */ -@media (max-width: 1024px) { - .nav-container { - padding: 0 var(--spacing-md); - } - - .container { - padding: 0 var(--spacing-md); - } - - .footer-content { - grid-template-columns: 1fr 1fr; - gap: var(--spacing-lg); - } - - .contact-container { - grid-template-columns: 1fr; - gap: var(--spacing-xl); - } -} - -@media (max-width: 768px) { - .mobile-menu-btn { - display: block; - } - - .nav-links { - position: fixed; - top: 0; - right: -100%; - width: 280px; - height: 100vh; - background: rgba(10, 10, 10, 0.98); - backdrop-filter: blur(30px); - flex-direction: column; - padding: 80px var(--spacing-lg) var(--spacing-lg); - transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - border-left: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3); - } - - .nav-links.active { - right: 0; - } - - .nav-links a { - width: 100%; - text-align: center; - padding: var(--spacing-md); - font-size: 1.1rem; - border-radius: var(--radius-lg); - margin-bottom: var(--spacing-xs); - } - - .nav-links a::after { - display: none; - } - - .nav-links a::before { - border-radius: var(--radius-lg); - } - - .nav-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(5px); - z-index: 999; - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; - } - - .nav-overlay.active { - opacity: 1; - visibility: visible; - } - - .hero h1 { - font-size: clamp(2rem, 8vw, 3rem); - } - - .hero p { - font-size: 1.1rem; - } - - .hero-buttons { - flex-direction: column; - align-items: center; - } - - .section { - padding: 4rem 0; - } - - .portfolio-controls { - flex-direction: column; - align-items: stretch; - } - - .filter-buttons { - justify-content: center; - } - - .portfolio-grid { - grid-template-columns: 1fr; - } - - .team-grid { - grid-template-columns: 1fr; - } - - .principles-grid { - grid-template-columns: 1fr; - } - - .stats-container { - grid-template-columns: repeat(2, 1fr); - } - - .footer-content { - grid-template-columns: 1fr; - text-align: center; - gap: var(--spacing-lg); - } - - .footer-brand p { - max-width: none; - } - - .footer-social { - justify-content: center; - } - - .footer-bottom-content { - flex-direction: column; - text-align: center; - gap: var(--spacing-sm); - } - - .portfolio-btn { - padding: 0.9rem 1.5rem; - font-size: 0.85rem; - } -} - -@media (max-width: 480px) { - .container { - padding: 0 var(--spacing-sm); - } - - .nav-container { - padding: 0 var(--spacing-sm); - } - - .hero-content { - padding: var(--spacing-sm) 0; - } - - .project-card, - .team-member, - .principle-card, - .contact-form { - padding: var(--spacing-md); - } - - .section-header { - margin-bottom: var(--spacing-xl); - } - - .contact-form { - padding: var(--spacing-lg); - } - - .stats-container { - grid-template-columns: 1fr; - } -} - -/* Animations and Interactions */ -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } - - .star { - animation: none; - } -} - -/* Print Styles */ -@media print { - .animated-bg, - .stars, - nav, - .hero-buttons, - .contact-form, - .footer-social { - display: none; - } - - body { - background: white; - color: black; - } - - .section { - padding: 2rem 0; - } -} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d14c826 --- /dev/null +++ b/styles.css @@ -0,0 +1,432 @@ +/* + interstellar_development website + Copyright (C) 2024 interstellar_development + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as + published by the Free Software Foundation, either version 3 of the + License, or (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see
+ + Guide the snake to eat food and grow longer while avoiding + collisions with the walls and itself. +
+
+ + A classic card game where the objective is to move all cards to + foundation piles in ascending order. +
+
+ + Uncover squares on a grid while avoiding hidden mines, using + numbers to deduce safe spots. +
+
+ + A simple game where you try to guess a randomly chosen number + within a certain range. +
+
+ + Run through an endless landscape, avoiding obstacles and + collecting items to score points. +
+
+ 
+ 
+