:root {
color-scheme: light;
--bg: #ffffff;
--panel: #ffffff;
--panel-2: #faf7f2;
--text: #1a1a1a;
--muted: #6b6b6b;
--accent: #e8740c;
--accent-strong: #ff8f2e;
--border: #e5ddd4;
--dot-grid-bg: #faf7f2;
--dot-grid-image:
radial-gradient(circle, rgba(232, 116, 12, 0.18) 1.15px, transparent 1.15px),
radial-gradient(circle, rgba(255, 143, 46, 0.10) 1.15px, transparent 1.15px);
--dot-grid-size: 24px 24px;
--dot-grid-position-a: 0 0;
--dot-grid-position-b: 12px 12px;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text);
background-color: var(--dot-grid-bg);
background-image:
var(--dot-grid-image),
radial-gradient(circle at 12% 8%, rgba(232, 116, 12, 0.08), transparent 34%),
radial-gradient(circle at 92% 88%, rgba(255, 143, 46, 0.06), transparent 30%),
linear-gradient(165deg, #fffcf8 0%, #faf7f2 46%, #ffffff 100%);
background-size:
var(--dot-grid-size),
var(--dot-grid-size),
auto,
auto,
auto;
background-position:
var(--dot-grid-position-a),
var(--dot-grid-position-b),
0 0,
0 0,
0 0;
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}
.shell {
width: min(960px, 100%);
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 16px;
animation: shellFadeIn 600ms ease-out;
}
.hero,
.signin {
border: 1px solid var(--border);
background: linear-gradient(180deg, var(--panel), var(--panel-2));
border-radius: 16px;
padding: 24px;
}
.hero-image-wrap {
border: 1px solid #e5ddd4;
border-radius: 12px;
padding: 24px;
background: radial-gradient(circle at 50% 20%, rgba(232, 116, 12, 0.08), rgba(0, 0, 0, 0));
display: grid;
place-items: center;
min-height: 220px;
}
.hero-image {
width: min(230px, 62%);
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 24px;
filter: drop-shadow(0 14px 35px rgba(232, 116, 12, 0.2));
}
h1,
h2 {
margin: 16px 0 8px;
}
p {
margin: 0;
line-height: 1.5;
}
.muted {
color: var(--muted);
margin-bottom: 16px;
}
form {
display: grid;
gap: 10px;
}
label {
font-size: 13px;
color: var(--muted);
}
input {
width: 100%;
border: 1px solid #e0d7cc;
background: #f5f1ec;
color: var(--text);
border-radius: 10px;
padding: 12px;
outline: none;
}
input:focus {
border-color: var(--accent-strong);
box-shadow: 0 0 0 2px rgba(232, 116, 12, 0.15);
}
button {
border: 1px solid var(--accent-strong);
background: linear-gradient(180deg, #ff8f2e, #e8740c);
color: white;
border-radius: 10px;
padding: 12px;
font-weight: 600;
cursor: pointer;
}
button:hover {
filter: brightness(1.05);
}
.error {
min-height: 18px;
color: #cf5e5e;
font-size: 13px;
}
code {
background: rgba(232, 116, 12, 0.06);
border: 1px solid rgba(232, 116, 12, 0.15);
border-radius: 6px;
padding: 1px 5px;
}
/* Kirby mascot */
.kirby-mascot { display: inline-block; }
.kirby-mascot.hero-kirby { width: min(230px, 62%); animation: kirbyBounce 2.4s ease-in-out infinite; }
.kirby-mascot.hero-kirby .kirby-eye { transform-origin: center; animation: kirbyBlink 4s ease-in-out infinite; }
@keyframes kirbyBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes kirbyBlink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes shellFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.divider {
display: flex;
align-items: center;
gap: 12px;
margin: 8px 0;
color: var(--muted);
font-size: 13px;
}
.divider::before,
.divider::after {
content: "";
flex: 1;
border-top: 1px solid var(--border);
}
.hidden {
display: none !important;
}
@media (max-width: 860px) {
.shell {
grid-template-columns: 1fr;
}
}
