156 lines
2.5 KiB
CSS
156 lines
2.5 KiB
CSS
:root {
|
|
font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
|
|
color: #182826;
|
|
background: #f3f5f1;
|
|
font-synthesis: none;
|
|
font-size: 16px;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
}
|
|
main {
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px 28px;
|
|
}
|
|
header {
|
|
margin-bottom: 40px;
|
|
}
|
|
.brand {
|
|
font-size: 32px;
|
|
font-weight: 750;
|
|
letter-spacing: -2px;
|
|
color: #285448;
|
|
text-decoration: none;
|
|
}
|
|
.brand > span:first-child {
|
|
font-weight: 400;
|
|
}
|
|
.card {
|
|
background: #fff;
|
|
border: 1px solid #dce4dd;
|
|
border-radius: 18px;
|
|
padding: 36px;
|
|
box-shadow: 0 12px 40px #173f2510;
|
|
}
|
|
.eyebrow {
|
|
font-size: 12px;
|
|
color: #60746a;
|
|
letter-spacing: 2px;
|
|
}
|
|
h1 {
|
|
font-size: 27px;
|
|
letter-spacing: -0.5px;
|
|
line-height: 1.35;
|
|
margin: 0 0 12px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.intro {
|
|
font-size: 14px;
|
|
color: #60716a;
|
|
line-height: 1.8;
|
|
margin: 0 0 25px;
|
|
}
|
|
label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
input:not([type="hidden"]) {
|
|
display: block;
|
|
width: 100%;
|
|
border: 1px solid #bdccc1;
|
|
border-radius: 8px;
|
|
padding: 13px 14px;
|
|
margin: 9px 0 22px;
|
|
font: inherit;
|
|
color: inherit;
|
|
background: #fff;
|
|
}
|
|
input:focus {
|
|
outline: 3px solid #a9cbbc;
|
|
outline-offset: 2px;
|
|
}
|
|
button {
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.primary {
|
|
width: 100%;
|
|
border: 0;
|
|
background: #245b47;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
border-radius: 8px;
|
|
padding: 13px;
|
|
}
|
|
.primary:hover {
|
|
background: #194734;
|
|
}
|
|
.primary:disabled {
|
|
opacity: 0.65;
|
|
cursor: wait;
|
|
}
|
|
.error {
|
|
color: #9e302b;
|
|
background: #fff0ed;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
footer {
|
|
text-align: center;
|
|
color: #7c887e;
|
|
font-size: 12px;
|
|
margin-top: 28px;
|
|
}
|
|
a:focus-visible,
|
|
button:focus-visible {
|
|
outline: 3px solid #a9cbbc;
|
|
outline-offset: 3px;
|
|
}
|
|
@media (max-width: 480px) {
|
|
main {
|
|
padding-top: 24px;
|
|
}
|
|
header {
|
|
margin-bottom: 24px;
|
|
}
|
|
.card {
|
|
padding: 26px 22px;
|
|
}
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
background: #14221c;
|
|
color: #edf4ee;
|
|
}
|
|
.card {
|
|
background: #1e3027;
|
|
border-color: #344b3d;
|
|
}
|
|
.brand {
|
|
color: #b9ddc8;
|
|
}
|
|
.intro,
|
|
.eyebrow {
|
|
color: #acbfb2;
|
|
}
|
|
input:not([type="hidden"]) {
|
|
background: #18271f;
|
|
border-color: #526657;
|
|
}
|
|
.error {
|
|
background: #492b29;
|
|
color: #ffc3b9;
|
|
}
|
|
}
|
|
|
|
.directory-result { overflow-wrap: anywhere; }
|
|
.directory-result dd { margin: 0 0 1rem; }
|
|
.directory-result h2 { font-size: 1rem; }
|