/* ================================================ 1. ROOT VARIABLES & GLOBAL STYLES ================================================ */ :root { /* ... (your variables are unchanged) ... */ --color-primary: #3E1F47; --color-secondary: #F4C542; --color-background: #F8F8F8; --color-soft-gray: #2F2F2F; --color-dark-purple: #2D1533; --color-gray-text: #6c757d; --color-border: #e9ecef; --font-family-sans: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --border-radius-sm: 8px; --border-radius-lg: 16px; --spacing-sm: 10px; --spacing-md: 15px; --spacing-lg: 20px; --shadow-main: 0 6px 20px rgba(0, 0, 0, 0.08); --transition-fast: 0.2s ease-out; } /* Global Styles */ body { margin: 0; font-family: var(--font-family-sans); background: radial-gradient(circle, var(--color-primary) 0%, var(--color-dark-purple) 100%); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: var(--spacing-lg); box-sizing: border-box; } /* ================================================ 2. MAIN CONTENT CONTAINER & CARD ================================================ */ .container { width: 100%; max-width: 800px; } .card { background: var(--color-background); color: var(--color-soft-gray); padding: 40px; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-main); line-height: 1.6; position: relative; } /* ================================================ 3. TYPOGRAPHY & CONTENT STYLING ================================================ */ .logo { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); margin-bottom: var(--spacing-md); text-align: center; } h2 { text-align: center; font-size: 2.2rem; margin-top: 0; margin-bottom: 30px; color: var(--color-soft-gray); } h3 { font-size: 1.3rem; color: var(--color-primary); margin-top: 30px; margin-bottom: var(--spacing-sm); border-bottom: 2px solid var(--color-border); padding-bottom: var(--spacing-sm); } p { margin: 0 0 var(--spacing-md) 0; color: var(--color-gray-text); } .card p:last-of-type { margin-top: 30px; font-style: italic; text-align: center; color: #555; border-top: 1px solid var(--color-border); padding-top: var(--spacing-lg); } a { color: var(--color-primary); font-weight: 600; text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-secondary); text-decoration: underline; } /* ================================================ 4. DARK MODE STYLES ================================================ */ /* Dark Mode Overrides - Targets the tag */ .dark .card { background-color: #1e1e1e; color: #f1f1f1; } .dark .logo, .dark h3 { color: var(--color-secondary); } .dark h2 { color: #f1f1f1; } .dark p { color: #aaa; } .dark a { color: var(--color-secondary); } .dark a:hover { color: #ffffff; } .dark h3 { border-bottom-color: #333; } .dark .card p:last-of-type { border-top-color: #333; } /* ================================================ 5. HEADER & BACK ARROW STYLES (NEW) ================================================ */ /* Body style for the new layout */ body { /* This is to make sure the header stays at the top of the viewport */ display: block; padding: 0; } /* Header styles for a fixed top bar */ header { width: 100%; background-color: #ffffff; padding: 15px 20px; border-bottom: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: background-color 0.3s ease, border-bottom-color 0.3s ease; position: fixed; top: 0; left: 0; z-index: 1000; } /* Container for the header content to center it and align items */ .header-container { display: flex; align-items: center; position: relative; justify-content: center; max-width: 800px; margin: 0 auto; } /* Style for the back arrow icon */ .back-arrow { font-size: 24px; color: var(--color-primary); cursor: pointer; position: absolute; left: 0; } /* Style for the main page title in the header */ .header-title { font-size: 24px; font-weight: 600; color: #1a1a1a; margin: 0; text-align: center; flex-grow: 1; /* Allows the title to take up remaining space, pushing it to center */ } /* Main content container adjustments for the new header */ .container { margin-top: 80px; /* Add top margin to prevent content from being hidden by the fixed header */ padding: var(--spacing-lg); display: flex; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; } /* Card adjustments */ .card { max-width: 800px; padding: 40px; } /* Dark mode overrides for the new header */ .dark body { background: #121212; color: #f1f1f1; } .dark header { background-color: #1e1e1e; border-bottom: 1px solid #333; } .dark .header-title { color: #f0f2f5; } .dark .back-arrow { color: #f0f2f5; } .dark .card { background-color: #1f1f1f; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .dark .subtitle { color: #a0a0a0; } .dark .footer-note { border-top-color: #333; color: #a0a0a0; }