diff --git a/src/App.css b/src/App.css index 0f9ce86..d10f629 100644 --- a/src/App.css +++ b/src/App.css @@ -1,14 +1,22 @@ -#root { - margin: 0; - width: 100%; - display: flex; - justify-content: center; +:root { + color-scheme: light dark; +} + +* { + box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background: #f5f7fb; + color: #111; +} + +#root { + width: 100%; + display: flex; + justify-content: center; } .page { @@ -42,16 +50,19 @@ body { .card { padding: 40px; max-width: 640px; - background: white; + background: #ffffff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .seal { - font-size: 60px; margin-bottom: 10px; } +.seal img { + max-width: 120px; +} + .statement { color: #444; line-height: 1.5; @@ -60,6 +71,7 @@ body { .name { font-size: 2rem; margin: 20px 0 10px; + color: #111; } .result { @@ -86,4 +98,44 @@ body { margin-top: 20px; color: #888; font-size: 0.9rem; +} + +/* Optional dark mode support */ + +@media (prefers-color-scheme: dark) { + body { + background: #0f1115; + color: #e8e8e8; + } + + .tagline { + color: #aaa; + } + + .card { + background: #1c1f26; + box-shadow: 0 10px 30px rgba(0,0,0,0.5); + } + + .statement { + color: #ccc; + } + + .name { + color: #fff; + } + + .fineprint { + color: #999; + } + + .footer { + color: #999; + } + + .badge { + background: #ffe06b; + border-color: #d4b000; + color: #222; + } } \ No newline at end of file