:root { /* The :root pseudo-class selects the element, making these variables globally available throughout the document. We are defining our 'light' theme values here as the default theme. */ /* ======================================== COLOR PALETTE - LIGHT THEME ======================================== */ /* A vibrant, accessible blue for primary interactive elements like links and buttons.*/ --primary-color: #0054AD; /* A muted gray for secondary text or less important elements. */ --secondary-color: #6c757d; /* A very light gray for the main page background, which is softer on the eyes than pure white. */ --background-color: #f8f9fa; /* White for surfaces that should stand out from the background, like cards, headers, and forms. */ --surface-color: #ffffff; /* A dark, highly readable color for main text content. We use a dark gray instead of pure black for better readability. */ --text-color: #212529; /* A slightly lighter text color for subtitles, placeholders, or less emphasized text. */ --text-color-light: #495057; /* A subtle border color for elements like cards and form inputs. */ --border-color: #dee2e6; /* A subtle shadow color to give elements depth. */ --shadow-color: rgba(0, 0, 0, 0.1); /* ======================================== TYPOGRAPHY ======================================== */ /* A clean, modern, and system-agnostic sans-serif font stack. The browser will try each font from left to right. */ --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* The base font size for the document. Using 'rem' units allows for better accessibility and scalability. */ --font-size-base: 1rem; /*equals to 16px*/ /* Base line height for improved readability. It's unitless, meaning it's a multiplier of the font size. */ --line-height-base: 1.5; --font-weight-normal: 400; --font-weight-bold: 700; /* ======================================== SPACING & LAYOUT ======================================== */ /* A base unit for consistent spacing (margins, padding). We can use multiples of this unit. */ --spacing-unit: 1rem; /* Max width for our .container class to ensure content is readable on wide screens. */ --container-width: 1140px; /* A consistent border-radius for rounded corners on buttons, cards, and inputs. */ --border-radius: 0.25rem; } /* NEW CODE STARTS HERE: Define the color variables for the Dark Theme. This entire block of rules will only apply when the element has the attribute data-theme="dark". */ html[data-theme='dark'] { /* ======================================= COLOR PALETTE - DARK THEME ======================================== */ /* The primary color can often stay the same, or you might want a slightly less saturated version. We'll keep it for now. */ --primary-color: #58A6FF; /* For secondary elements, a lighter gray works well on a dark background. */ --secondary-color: #adb5bd; /* The main page background. A very dark gray is often preferred over pure black as it's less harsh on the eyes. */ --background-color: #121212; /* The color for "surfaces" like cards and headers. This should be slightly lighter than the main background to create separation. */ --surface-color: #121212; /* The main text color. We use a light, off-white for readability, avoiding pure white which can cause eye strain. */ --text-color: #e9ecef; /* A slightly dimmer text color for subtitles or less important information. */ --text-color-light: #ced4da; /* Borders should be subtle. A slightly lighter gray than the surface color works well. */ --border-color: #343a40; /* Shadows are tricky on dark backgrounds. A common technique is to use a very light, almost invisible white shadow to simulate depth. */ --shadow-color: rgba(255, 255, 255, 0.05); } /* ======================================== CSS RESET ======================================== This reset removes inconsistent browser default styles, providing a clean and predictable baseline to build our own design upon. */ /* 1. Use a more intuitive box-sizing model on all elements. This makes layout work more predictable, as padding and border are included in the element's total width and height. */ *, *::before, *::after { box-sizing: border-box; } /* 2. Remove default margin and padding from all elements. This gives us full control over spacing. */ * { margin: 0; padding: 0; } /* 3. Allow percentage-based heights in the application. */ html, body { height: 100%; width: 100%; overflow-x: hidden; } /* 4. Create a root stacking context. This is a modern best practice to prevent z-index issues with elements like modals or dropdowns. */ #root, #__next { isolation: isolate; } /* ======================================== BASE STYLES ======================================== These are the foundational styles for the entire site. We apply them to the body, and they will be inherited by most other elements. */ body { /* Set the default font family for the entire page using our variable. This "font stack" provides modern, readable, and system-agnostic fonts. */ font-family: var(--font-family-base); /* Set the base font size. Using 'rem' units makes our site more accessible, as it respects the user's default font size settings in their browser. */ font-size: var(--font-size-base); /* Set a comfortable line height for better readability. A unitless value acts as a multiplier of the font-size, which scales gracefully. */ line-height: var(--line-height-base); /* Set the default text color for all content. We use our dark gray variable for a softer, more professional look than pure black. */ color: var(--text-color); /* Set the main background color for the page. This light gray is less harsh on the eyes than pure white. */ background-color: var(--background-color); /*transition for animate*/ transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; } /* ======================================== HEADER & NAVIGATION ======================================== These styles control the layout and appearance of the main site header and the primary navigation menu within it. */ header { /* Use our --surface-color to make the header's background distinct from the page body. */ background-color: var(--surface-color); /* Add a subtle shadow to lift the header off the page, giving it depth. */ box-shadow: 0 2px 4px var(--shadow-color); /* Give the header some vertical padding so content isn't flush against the top/bottom edges. */ padding: var(--spacing-unit) 0; /* This is the magic for a "sticky" header. - 'position: sticky' makes the element behave like a normal element until it hits the top of the viewport during a scroll. - 'top: 0' tells the browser where to "stick" it (0px from the top). - 'z-index' ensures the header stays on top of other content when scrolling. */ position: sticky; top: 0; z-index: 100; /* Target the .container inside the header to apply our layout rules. This is a good practice to ensure our header content aligns with the rest of the page content. */ /*transition for animate*/ transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } header .container { display: flex; justify-content: space-between; align-items: center; /* We also apply our max-width and centering here. */ max-width: var(--container-width); margin: 0 auto; /* Centers the container horizontally */ padding: 0 var(--spacing-unit); /* Adds padding on the sides for smaller screens */ } /* Now we style the navigation itself. We target the