/* 1. Global Variables & Reset */ :root { --bg-color: #fafafa; --text-color: #171717; --accent-color: #2563eb; --border-color: #e5e5e5; --font-primary: system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-color); color: var(--text-color); font-family: var(--font-primary); line-height: 1.6; } /* 2. Block: Navigation Bar */ .nav-bar { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; border-bottom: 1px solid var(--border-color); } .nav-bar__logo { font-weight: 700; font-size: 1.25rem; cursor: pointer; user-select: none; } .nav-bar__links a { margin-left: 1.5rem; text-decoration: none; color: var(--text-color); font-weight: 500; transition: color 0.2s ease; } .nav-bar__links a:hover { color: var(--accent-color); } /* 3. Block: Hero Section (Landing Fragment) */ .hero { max-width: 800px; margin: 4rem auto; padding: 0 2rem; } .hero__title { font-size: 3rem; line-height: 1.1; margin-bottom: 0.5rem; } .hero__subtitle { font-size: 1.25rem; color: #52525b; } /* 4. Dev-Mode Utility Classes */ .dev-only { display: none !important; } /* When the JS authenticates, it adds this class to the */ .dev-mode-active .dev-only { display: inline-block !important; background-color: #fef2f2; color: #ef4444; border: 1px dashed #ef4444; padding: 0.25rem 0.5rem; font-size: 0.75rem; border-radius: 4px; margin-left: 1rem; }