36 lines
1.7 KiB
CSS
36 lines
1.7 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
color: #17211b;
|
|
background: #e9eee8;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: radial-gradient(circle at 10% 0%, #f8fbf4, transparent 38%), #e9eee8;
|
|
}
|
|
|
|
.page { max-width: 980px; margin: 0 auto; padding: 64px 24px; }
|
|
.eyebrow { color: #56745f; font: 700 12px/1.2 sans-serif; letter-spacing: 2px; }
|
|
h1 { max-width: 620px; margin: 12px 0; font-size: clamp(38px, 7vw, 72px); line-height: .95; font-weight: 400; }
|
|
.lede { max-width: 560px; color: #5d6a61; font: 16px/1.6 sans-serif; }
|
|
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 16px; }
|
|
button { border: 0; border-radius: 4px; padding: 12px 17px; color: #f7faf4; background: #1f5a3b; font: 700 13px sans-serif; cursor: pointer; }
|
|
button.secondary { color: #1f5a3b; background: #cbdcc9; }
|
|
button.quiet { color: #5d6a61; background: transparent; }
|
|
button:disabled { opacity: .45; cursor: not-allowed; }
|
|
.status { min-height: 22px; color: #56745f; font: 13px sans-serif; }
|
|
.table-wrap { overflow-x: auto; border-top: 1px solid #b9c7ba; }
|
|
table { width: 100%; border-collapse: collapse; font: 14px/1.4 sans-serif; }
|
|
th, td { padding: 14px 10px; border-bottom: 1px solid #cbd5cc; text-align: left; }
|
|
th { color: #56745f; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
|
|
td:nth-child(2) { width: 140px; color: #68766c; }
|
|
.count { color: #5d6a61; font: 13px sans-serif; }
|
|
.result { margin-top: 44px; padding-top: 18px; border-top: 2px solid #1f5a3b; }
|
|
.result h2 { font-size: 26px; font-weight: 400; }
|
|
.result li { margin: 8px 0; font: 14px sans-serif; }
|
|
@media (max-width: 600px) {
|
|
.page { padding: 36px 16px; }
|
|
.toolbar button { flex: 1 1 42%; }
|
|
} |