/* ============================================================ GLOBAL RESET + VARIABLES ============================================================ */ *, *::before, *::after { box-sizing: border-box; } :root { /* Brand Colors */ --accent: #000000; --accent-light: #444444; --blue: #0055ff; --blue-light: #e8f0ff; --gray-1: #f7f7f7; --gray-2: #e6e6e6; --gray-3: #d4d4d4; --shadow: rgba(0,0,0,0.08); /* Brand Layout */ --brand-width: 800px; /* App Layout */ --app-width: 640px; /* Brand Spacing */ --space-1: 0.75rem; --space-2: 1.25rem; --space-3: 2rem; --space-4: 3rem; --space-5: 4rem; } /* ============================================================ BRAND SYSTEM — ============================================================ */ body.pollagraph { margin: 0; width: 100%; min-height: 100vh; background-color: white; font-family: "Space Grotesk", system-ui, sans-serif; /* RESTORE NORMAL DOCUMENT FLOW */ display: block; overflow-x: hidden; font-size: 18px; line-height: 1.7; color: #111; /* Push content below fixed header */ padding-top: 100px; } p { margin-top: 1rem; margin-bottom: 1rem; line-height: 1.7; } h1, h2, h3 { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; line-height: 1.25; margin-top: 2rem; margin-bottom: 1rem; color: var(--accent); } h1 { font-size: 2.25rem; letter-spacing: -0.5px; } h2 { font-size: 1.75rem; letter-spacing: -0.25px; } h3 { font-size: 1.35rem; } a { color: var(--blue); font-weight: 600; text-decoration: none; } a:hover { text-decoration: underline; } /* ============================================================ BRAND HEADER — FIXED ============================================================ */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: white; border-bottom: 1px solid var(--gray-2); box-shadow: 0 2px 4px var(--shadow); } .nav-container { display: flex; justify-content: center; align-items: center; width: 100%; max-width: var(--brand-width); margin: 0 auto; padding: var(--space-1) var(--space-2); } .nav-links { display: flex; gap: var(--space-1); justify-content: center; align-items: center; } .nav-item { background-color: white; color: var(--accent); text-decoration: none; text-align: center; font-weight: 600; border-radius: 4px; padding: 0.4rem 0.6rem; transition: background-color 0.15s ease; } .nav-item:hover { background-color: var(--gray-3); } .nav-logo { font-weight: 700; font-size: 1.18rem; letter-spacing: 0.02em; } /* ============================================================ BRAND CARD ============================================================ */ .how-to-participate { background: #fdfdfd; border: 1px solid var(--gray-2); border-radius: 6px; box-shadow: 0 3px 8px var(--shadow); width: 100%; max-width: var(--brand-width); margin: var(--space-4) auto; padding: var(--space-3); text-align: center; } .how-to-participate p { font-size: 1.05rem; line-height: 1.75; } .how-to-participate h1, .how-to-participate h2 { text-align: left; } /* ============================================================ BRAND SECTION INNER ============================================================ */ .section-inner { width: 100%; max-width: var(--brand-width); margin: 0 auto; padding: 0 var(--space-2); text-align: left; } /* ============================================================ BRAND FOOTER ============================================================ */ footer { width: 100%; max-width: var(--brand-width); margin: var(--space-5) auto; padding: var(--space-2); text-align: center; font-size: 0.85rem; /* ~15.3px */ color: var(--accent-light); font-weight: 400; }