/* * USAF BTZ Calculator — minimal, framework-free styling. * Targets modern browsers (Edge/Chrome/Safari/Firefox). Old browsers that * ignore CSS variables/Grid (e.g. IE11) fall back to a readable, light, * single-column page. * * Theming: light is the baseline (:root). The OS preference overrides it via * prefers-color-scheme. An explicit user choice (data-theme on , set by * the toggle) overrides the OS. So: system by default, light if unavailable. */ :root { color-scheme: light; --bg: #ffffff; --text: #1a1a1a; --muted: #6b7280; --border: #e5e7eb; --panel: #f9fafb; --accent: #1d4ed8; } /* OS dark preference — unless the user explicitly forced light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0f1115; --text: #e6e7e9; --muted: #9aa0a6; --border: #2a2e35; --panel: #171a1f; --accent: #60a5fa; } } /* Explicit user override always wins over the OS preference. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1115; --text: #e6e7e9; --muted: #9aa0a6; --border: #2a2e35; --panel: #171a1f; --accent: #60a5fa; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 2rem 1rem 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; } .container { max-width: 820px; margin: 0 auto; } /* Header */ .page-header { text-align: center; margin-bottom: 2rem; } .page-header h1 { margin: 0 0 0.25rem; font-weight: 600; letter-spacing: -0.01em; } .subtitle { margin: 0; color: var(--muted); } /* Two-column layout on wide screens, single column on narrow. */ .panels { display: grid; gap: 1.25rem; } @media (min-width: 640px) { .panels { grid-template-columns: 1fr 1fr; align-items: start; } } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.25rem 1.5rem; } .results-card h2 { margin-top: 0; font-size: 1rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } /* Form */ label { display: block; margin-top: 1rem; font-weight: 600; } label:first-child { margin-top: 0; } .hint { display: block; font-weight: 400; font-size: 0.8rem; color: var(--muted); } input[type="date"] { width: 100%; margin-top: 0.4rem; padding: 0.55rem 0.65rem; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; } input[type="date"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .error { margin: 0.75rem 0 0; color: #dc2626; font-size: 0.9rem; min-height: 1.2em; } /* Results */ .importantInfo { font-weight: 600; color: var(--accent); } .results-card p { margin: 0 0 1rem; } /* Footer */ .site-footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--muted); } .footer-cols { display: grid; gap: 0.5rem 2rem; margin-top: 0.5rem; } @media (min-width: 640px) { .footer-cols { grid-template-columns: 1fr 1.5fr; } } a { color: var(--accent); } /* Theme toggle */ .theme-toggle { position: fixed; top: 0.85rem; right: 0.85rem; width: 2.4rem; height: 2.4rem; font-size: 1.1rem; line-height: 1; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; } .theme-toggle:hover { border-color: var(--accent); }