/* ======================================================= GENERAL SETUP This section resets default browser spacing and applies a consistent font and sizing model across all elements. ======================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; /* box-sizing: border-box means width and height will include padding and border, which makes layout sizing easier to manage. */ font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Sets a clean, readable font family for the whole application. */ } body { background-image: url('../assets/bg_homepage.jpg'); /* Applies the homepage background image. This gives the page a playful visual backdrop. */ background-size: cover; /* Makes the background image cover the whole screen. */ background-position: center; /* Centers the background image so it looks balanced. */ background-attachment: fixed; /* Keeps the background fixed while content stays centered. This can create a more polished visual effect. */ min-height: 100vh; /* Ensures the page takes at least the full height of the screen. */ display: flex; justify-content: center; align-items: center; /* Centers the main content horizontally and vertically. */ padding: 20px; /* Adds space around the page content so it does not touch the edges. */ } /* ======================================================= MAIN CONTAINER This is the main card that holds the homepage content. ======================================================= */ .app-card { background-color: rgba(255, 255, 255, 0.3); /* Adds a semi transparent white background. This creates a soft card effect over the background image. */ width: 100%; max-width: 900px; /* Makes the card responsive while keeping a readable maximum width. */ border-radius: 50px; /* Gives the container rounded corners for a child friendly look. */ overflow: hidden; /* Prevents content from extending outside the rounded edges. */ box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Adds depth so the card appears elevated above the background. */ position: relative; /* Allows child elements such as mascots to be positioned relative to this card. */ text-align: center; /* Centers text inside the card. */ padding-bottom: 40px; /* Adds extra spacing at the bottom of the card. */ } /* ======================================================= HEADER This is the top section of the homepage card. ======================================================= */ .header { background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%); /* Creates a blue gradient background for the header. This makes the top section visually prominent. */ border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; /* Rounds only the bottom edges of the header, giving it a smooth banner shape. */ margin-bottom: 40px; /* Creates space below the header before the next content. */ } /* ======================================================= LOGO CONTAINER This section controls the placement of the logo inside the header. ======================================================= */ .logo-container { justify-content: center; align-items: center; /* Intended to center the logo inside its container. Note: display: flex; is missing here, so these properties will only work if flex is applied elsewhere. */ } .header-logo-img { height: 150px; /* Sets the logo height. */ width: auto; /* Keeps the logo proportion correct while resizing. */ } /* ======================================================= TYPOGRAPHY This section styles the text elements on the homepage. ======================================================= */ h1 { color: #1e40af; /* Gives the main heading a dark blue color for emphasis. */ margin-bottom: 40px; /* Adds spacing below the heading. */ font-size: 2rem; /* Makes the heading large and easy to read. */ padding: 0 10px; /* Adds slight left and right spacing for readability. */ } .quiz-text { color: #3b82f6; /* Uses a bright blue for the quiz prompt. */ font-weight: bold; /* Makes the text stand out. */ font-size: 1.2rem; /* Slightly larger than normal text for emphasis. */ margin-top: 30px; margin-bottom: 20px; /* Adds spacing above and below the quiz text. */ } /* ======================================================= CATEGORY GRID This section arranges the learning category cards. ======================================================= */ .grid { display: grid; /* Uses CSS Grid to create a structured card layout. */ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Automatically creates columns based on screen width. Each card has a minimum width of 140px and expands as needed. */ gap: 20px; /* Adds spacing between cards. */ padding: 0 40px; /* Adds horizontal spacing inside the grid area. */ margin-bottom: 40px; /* Adds spacing below the grid. */ } .category-card { border-radius: 20px; /* Gives each category card rounded corners. */ padding: 20px 10px; /* Adds space inside the card around the content. */ color: white; /* Makes text inside the card white for contrast. */ cursor: pointer; /* Changes the cursor to indicate the card is clickable. */ transition: transform 0.2s; /* Smoothly animates movement when the card is hovered. */ position: relative; /* Allows child elements to be positioned relative to the card if needed. */ } .category-card:hover { transform: translateY(-5px); /* Slightly lifts the card when hovered to make it feel interactive. */ } /* ======================================================= CATEGORY CARD COLORS Each category gets its own color for easy recognition. The border bottom creates a 3D button effect. ======================================================= */ .letters { background-color: #4fd1c5; border-bottom: 6px solid #38b2ac; } .numbers { background-color: #f6ad55; border-bottom: 6px solid #ed8936; } .shapes { background-color: #9ae6b4; border-bottom: 6px solid #68d391; } .colors { background-color: #b794f4; border-bottom: 6px solid #9f7aea; } /* These different background colors help children quickly distinguish between the learning categories. The darker bottom border gives a raised button-like appearance. */ .category-card img { width: auto; height: 70px; /* Sets a consistent height for category images. */ margin-bottom: 10px; /* Adds space below the image before the label text. */ } a { text-decoration: none; /* Removes the default underline from links. */ color: white; /* Makes links inside cards appear white. */ } .label { color: white; padding: 5px 15px; /* Adds inner spacing around the text label. */ border-radius: 15px; /* Gives the label soft rounded corners. */ font-weight: bold; font-size: 1.2rem; /* Makes the label clear and readable. */ display: block; /* Makes the label behave like a block element, so it sits on its own line. */ margin-top: 5px; /* Adds spacing above the label. */ } /* ======================================================= START QUIZ BUTTON Styles the main call to action button. ======================================================= */ .start-btn { background-color: #ec4899; /* Gives the button a bright pink color to stand out. */ color: white; border: none; /* Removes the default border and makes text white. */ padding: 15px 50px; /* Makes the button large and easy to click. */ border-radius: 50px; /* Creates a pill shaped button. */ font-size: 1.5rem; font-weight: bold; /* Makes the button text large and prominent. */ cursor: pointer; /* Shows that the element is clickable. */ box-shadow: 0 6px 0 #be185d; /* Creates a 3D button effect using a darker shadow underneath. */ transition: all 0.1s; /* Smooth transition for press effect. */ } .start-btn:active { transform: translateY(4px); /* Moves the button slightly down when clicked, making it feel pressed. */ box-shadow: 0 2px 0 #be185d; /* Reduces the shadow so the button appears pushed in. */ } /* ======================================================= MASCOTS Decorative character images placed around the homepage. ======================================================= */ .giraffe { position: absolute; bottom: 0; left: 20px; width: 300px; /* Positions the giraffe mascot near the lower left side. */ } .bird { position: absolute; bottom: 40px; right: 20px; width: 300px; /* Positions the bird mascot near the lower right side. */ } /* ======================================================= FOOTER LINKS These are the navigation links at the bottom of the page. ======================================================= */ .footer-nav { margin-top: 40px; /* Adds spacing above the footer navigation. */ display: flex; justify-content: center; /* Aligns the footer links horizontally at the center. */ gap: 20px; /* Adds spacing between links. */ } .footer-nav a { text-decoration: none; color: #3b82f6; /* Styles footer links in blue and removes underlines. */ font-weight: bold; font-size: 0.9rem; /* Makes footer links readable but smaller than main buttons. */ } .footer-nav a:hover { text-decoration: underline; /* Adds underline on hover to signal interactivity. */ } /* ======================================================= RESPONSIVE DESIGN Adjusts layout for smaller screen sizes. ======================================================= */ @media (max-width: 1200px) { .grid { grid-template-columns: repeat(2, 1fr); /* Changes the grid to two columns on smaller screens. */ padding: 0 20px; /* Reduces horizontal padding to save space. */ } .giraffe, .bird { display: none; /* Hides mascot images on smaller screens so they do not crowd the layout. */ } h1 { font-size: 1.5rem; /* Reduces heading size for better mobile readability. */ } }