/* This is a CSS (Cascading Style Sheets) file. It's used to style the HTML elements. Think of it as the clothing and makeup for the HTML skeleton. The "Cascading" part means that styles can be inherited from parent elements and that the order of rules matters. */ /* The `:root` pseudo-class represents the element in HTML. It's a great place to declare global CSS Variables. Variables make it easy to maintain and change the design system (e.g., changing the accent color everywhere by modifying just one line). */ :root { /* Color Palette */ --primary-color: #0A0A0A; /* Near-black for main backgrounds */ --secondary-color: #1A1A1A; /* Dark gray for secondary backgrounds */ --accent-color: #00BFFF; /* Deep Sky Blue for highlights, links, and CTAs */ --text-color: #E0E0E0; /* Light gray for body text, ensuring good contrast on dark backgrounds */ /* Typography */ --header-font: 'Poppins', sans-serif; /* A modern, geometric font for headings */ --body-font: 'Roboto', sans-serif; /* A clean, readable font for body text */ } /* --- Global Body Styles --- */ body { font-family: var(--body-font); /* Sets the default font for the entire page, using our variable. */ background-color: var(--primary-color); /* Sets the main background color. */ color: var(--text-color); /* Sets the default text color. */ margin: 0; /* Removes the default margin that browsers add to the body. */ padding: 0; /* Removes the default padding. */ /* This adds a subtle background texture using an SVG data URI. This is a clever way to embed a simple image directly in the CSS without needing a separate file, which can be good for performance. */ background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%231A1A1A" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); } /* --- Header and Navigation Styles --- */ header { background-color: transparent; /* Initially, the header background is see-through. */ padding: 1rem 2rem; /* Adds some spacing around the navigation. `rem` is a unit relative to the root font size. */ position: fixed; /* Fixes the header to the viewport, so it stays at the top when scrolling. */ width: 100%; /* Makes the header span the full width of the viewport. */ top: 0; /* Positions the header at the very top of the page. */ z-index: 1000; /* Ensures the header stays on top of other content. */ transition: background-color 0.3s ease; /* Smoothly transitions the background color when it changes (used in JS). */ box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height. */ } nav { display: flex; /* Uses Flexbox to manage the layout of its children. */ justify-content: center; /* Centers the flex items (the nav-container) horizontally. */ } .nav-container { display: flex; align-items: center; /* Aligns flex items vertically in the center. */ background-color: rgba(26, 26, 26, 0.5); /* Semi-transparent background. */ backdrop-filter: blur(10px); /* Creates a "frosted glass" effect, blurring the content behind it. */ border-radius: 50px; /* Creates the pill shape. */ border: 1px solid rgba(255, 255, 255, 0.1); /* A subtle border to give it definition. */ box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* A soft drop shadow to lift it off the page. */ padding: 0.5rem; } .logo { font-family: var(--header-font); font-size: 1.8rem; font-weight: 700; /* Bold font weight. */ color: var(--accent-color); text-decoration: none; /* Removes the default underline from the link. */ text-shadow: 0 0 5px var(--accent-color); /* Creates a glow effect. */ padding: 0.5rem 1.5rem; } nav ul { list-style: none; /* Removes the default bullet points from the list. */ margin: 0; padding: 0; display: flex; /* Arranges the list items in a row. */ } nav ul li a { color: var(--text-color); text-decoration: none; font-size: 1rem; font-weight: 500; padding: 0.75rem 1.5rem; border-radius: 40px; transition: all 0.3s ease; /* Smoothly animates all property changes. */ } nav ul li a:hover { background-color: rgba(255, 255, 255, 0.1); /* A subtle background highlight on hover. */ } /* The `.active` class is added by JavaScript to the link of the section currently in view. */ nav ul li a.active { background-color: var(--accent-color); color: var(--primary-color); font-weight: 700; box-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--accent-color); /* A stronger glow for the active link. */ } /* --- Main Content and Section Styling --- */ main { padding-top: 120px; /* Pushes the main content down to prevent it from being hidden behind the fixed header. */ } section { padding: 4rem 2rem; text-align: center; /* Centers the text within all sections by default. */ } /* --- Hero Section --- */ #hero { background: radial-gradient(circle, #1a1a1a, #0a0a0a); /* A subtle gradient for the background. */ min-height: 90vh; /* Sets the height to at least 90% of the viewport height. */ display: flex; flex-direction: column; /* Stacks the child elements vertically. */ justify-content: center; /* Centers children vertically. */ align-items: center; /* Centers children horizontally. */ } #hero h1 { font-family: var(--header-font); font-size: 4rem; margin-bottom: 1rem; color: #fff; /* White color for maximum impact. */ text-shadow: 0 0 15px var(--accent-color), 0 0 25px var(--accent-color); } #dynamic-word { color: var(--accent-color); display: inline-block; transition: all 0.5s ease; } #hero p { font-size: 1.5rem; margin-bottom: 2rem; } /* --- Call to Action (CTA) Button --- */ .cta-button { background-color: var(--accent-color); color: var(--primary-color); padding: 1.2rem 2.5rem; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 1.2rem; transition: all 0.3s ease; box-shadow: 0 0 15px var(--accent-color), 0 0 25px var(--accent-color); } .cta-button:hover { transform: scale(1.05); /* Slightly enlarges the button on hover for a nice interactive feel. */ box-shadow: 0 0 25px var(--accent-color), 0 0 40px var(--accent-color); /* Intensifies the glow. */ } /* --- Unified About Section (contains two visual parts) --- */ #about { padding: 0; /* We remove padding from the parent
to apply it to the children divs directly. */ } .about-main { background-color: var(--secondary-color); padding: 6rem 2rem; } .about-container { display: grid; /* Uses CSS Grid for a two-column layout. */ grid-template-columns: 1fr 1fr; /* Creates two columns of equal fraction (fr) of the available space. */ gap: 4rem; /* The space between the grid columns and rows. */ align-items: center; text-align: left; /* Overrides the default center alignment for sections. */ max-width: 1200px; /* Constrains the width for better readability on large screens. */ margin: 0 auto; /* Centers the container horizontally. */ } /* May not be necessary */ .about-text h2 { text-align: left; } .about-image img { max-width: 100%; /* Makes the image responsive, ensuring it doesn't overflow its container. */ border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.3); } /* --- Incubator Subsection (the second visual part of the About section) --- */ .incubator-subsection { background-color: var(--primary-color); padding: 5rem 2rem; text-align: center; } .incubator-subsection h2 { margin-bottom: 4rem; } .incubator-container { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3rem; max-width: 900px; margin: 0 auto; text-align: left; } .incubator-logo img { width: 200px; height: auto; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2)); /* A subtle glow effect for the logo. */ flex-shrink: 0; } .incubator-container p { font-size: 1.2rem; line-height: 1.6; } .incubator-container p strong { color: var(--accent-color); font-weight: 600; } /* --- Features Section --- */ #features { background-color: var(--secondary-color); } h2 { font-family: var(--header-font); font-size: 2.8rem; color: var(--accent-color); margin-bottom: 3rem; } .feature-grid { display: grid; /* A powerful responsive grid layout. It creates as many columns as can fit with a minimum width of 300px. */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; max-width: 1200px; margin: 0 auto; } .feature { background-color: var(--primary-color); padding: 2.5rem; border-radius: 15px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animate multiple properties. */ } .feature:hover { transform: translateY(-10px); /* Lifts the card up on hover. */ box-shadow: 0 12px 24px rgba(0,0,0,0.4); } .feature h3 { font-family: var(--header-font); color: var(--accent-color); font-size: 1.8rem; margin-bottom: 1rem; } /* --- Contact Form Styles --- */ #contact-form { max-width: 800px; margin: 2rem auto; display: flex; flex-direction: column; gap: 1.5rem; } /*May not be necessary*/ .form-group { display: flex; flex-direction: column; } /*May not be necessary*/ .form-group label { margin-bottom: 0.5rem; font-weight: 500; font-size: 1rem; } #contact-form input, #contact-form textarea { background-color: var(--secondary-color); color: var(--text-color); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 1rem; font-family: var(--body-font); font-size: 1rem; transition: all 0.3s ease; } /* The `:focus` pseudo-class is applied when an element has received focus (e.g., the user clicks on an input field). */ #contact-form input:focus, #contact-form textarea:focus { outline: none; /* Removes the default browser outline. */ border-color: var(--accent-color); /* Changes the border color to our accent color. */ box-shadow: 0 0 10px rgba(0, 191, 255, 0.5), 0 0 15px rgba(0, 191, 255, 0.3); /* Adds a glow effect. */ } #contact-form button { margin-top: 1rem; border: none; /* The button style is inherited from .cta-button, so we remove the default border. */ cursor: pointer; /* Changes the mouse cursor to a pointer to indicate it's clickable. */ align-self: center; /* Centers the button within the flex container. */ } /*May not be necessary*/ #contact-form .cta-button { align-self: center; } #form-status { margin-top: 1rem; font-weight: 500; } #form-status.success { color: #28a745 !important; /* A nice green color */ } #form-status.error { color: #dc3545 !important; /* A standard error red */ } /* --- Footer Styles --- */ footer { text-align: center; padding: 2rem; background-color: var(--secondary-color); color: #666; /* A lighter gray for less important text. */ } /* --- Media Queries for Responsive Design --- */ /* Media queries are used to apply different styles for different device screen sizes. `@media (max-width: 768px)` means these styles will only apply on screens that are 768px wide or less (e.g., tablets and mobile phones). */ @media (max-width: 768px) { #hero h1 { font-size: 3rem; /* Reduce heading size on smaller screens. */ } .about-container { grid-template-columns: 1fr; /* Stack the two columns on top of each other. */ } .about-text h2 { text-align: center; } .incubator-container { flex-direction: column; /* Stack the logo and text vertically. */ text-align: center; gap: 2rem; } nav ul { display: none; /* Hide the navigation links on mobile. A common pattern is to replace them with a hamburger menu icon, but for simplicity, we are just hiding them. */ } }