* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
}
body {
font-family:
"Microsoft JhengHei",
"Segoe UI",
Arial,
sans-serif;
/* =================================================
GTO 搶答小達人 Quno
🎮 活力競賽 × 電玩感
靛紫 × 珊瑚紅 × 活力黃
================================================= */
background:
radial-gradient(
circle at 14% 18%,
rgba(249,199,79,.28) 0 5px,
transparent 6px
),
radial-gradient(
circle at 82% 15%,
rgba(232,93,117,.20) 0 4px,
transparent 5px
),
radial-gradient(
circle at 72% 78%,
rgba(91,60,196,.18) 0 5px,
transparent 6px
),
linear-gradient(
135deg,
#f5f1ff 0%,
#fff1f4 38%,
#fff9df 70%,
#f1efff 100%
);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color:
#454052;
overflow-x: hidden;
}
/* =========================================================
背景電玩幾何裝飾
========================================================= */
body::before {
content: "◆";
position: fixed;
top: 8%;
left: 12%;
font-size: 32px;
color:
rgba(91,60,196,.32);
animation:
floatFruit 2.8s ease-in-out infinite;
}
body::after {
content: "✦";
position: fixed;
right: 12%;
bottom: 12%;
font-size: 38px;
color:
rgba(232,93,117,.30);
animation:
floatFruit 3.2s ease-in-out infinite;
}
@keyframes floatFruit {
0%,
100% {
opacity: .45;
transform:
translateY(0)
rotate(0deg)
scale(.9);
}
50% {
opacity: 1;
transform:
translateY(-8px)
rotate(8deg)
scale(1.12);
}
}
/* =========================================================
登入主卡片
========================================================= */
.login-card {
position: relative;
width: 440px;
max-width:
calc(100% - 32px);
background:
rgba(255,255,255,.97);
border-radius: 28px;
box-shadow:
0 25px 60px
rgba(91,60,196,.14),
0 8px 20px
rgba(232,93,117,.10);
overflow: hidden;
border:
1px solid
rgba(255,255,255,.96);
animation:
cardAppear .5s ease-out;
}
@keyframes cardAppear {
from {
opacity: 0;
transform:
translateY(15px)
scale(.98);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
/* =========================================================
上方標題區
========================================================= */
.header {
position: relative;
background:
radial-gradient(
circle at 85% 25%,
rgba(249,199,79,.55) 0 5px,
transparent 6px
),
linear-gradient(
135deg,
#5b3cc4 0%,
#e85d75 52%,
#f9c74f 100%
);
color: white;
text-align: center;
padding:
30px 20px 34px;
overflow: hidden;
}
.header::before {
content: "◆";
position: absolute;
left: 18px;
bottom: -22px;
font-size: 82px;
color:
rgba(255,255,255,.16);
}
.header::after {
content: "✦";
position: absolute;
right: 12px;
top: 5px;
font-size: 58px;
color:
rgba(255,255,255,.30);
}
/* =========================================================
吉祥物
========================================================= */
.mascot {
position: relative;
width: 82px;
height: 82px;
margin:
0 auto 12px;
border-radius: 50%;
background:
#fffdf1;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
box-shadow:
0 8px 20px
rgba(91,60,196,.22);
border:
3px solid
rgba(249,199,79,.78);
z-index: 1;
}
.header h1 {
position: relative;
z-index: 1;
margin: 0;
font-size: 29px;
font-weight: 800;
letter-spacing: 1px;
text-shadow:
0 2px 4px
rgba(63,42,115,.24);
}
.header p {
position: relative;
z-index: 1;
margin:
9px 0 0;
font-size: 15px;
color:
rgba(255,255,255,.96);
letter-spacing: .5px;
}
/* =========================================================
表單區
========================================================= */
.form-container {
padding:
32px 36px 30px;
}
.welcome-text {
text-align: center;
margin-bottom: 26px;
color:
#7a7485;
font-size: 14px;
}
.welcome-text strong {
color:
#e85d75;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: 700;
margin-bottom: 8px;
color:
#4d4858;
font-size: 15px;
}
/* =========================================================
OpenID 輸入框
========================================================= */
.openid-input {
flex: 1;
min-width: 0;
width: auto;
padding:
14px 16px;
border:
2px solid
#ddd7f2;
border-radius: 14px;
background-color:
#faf9ff;
color:
#454052;
font-family:
inherit;
font-size: 16px;
font-weight: 500;
outline: none;
transition:
border-color .2s ease,
background-color .2s ease,
box-shadow .2s ease,
transform .2s ease;
}
.openid-input:hover {
background-color:
#ffffff;
border-color:
#f3c85b;
}
.openid-input:focus {
background-color:
#ffffff;
border-color:
#5b3cc4;
box-shadow:
0 0 0 4px
rgba(91,60,196,.13);
transform:
translateY(-1px);
}
/* =========================================================
下拉選單
========================================================= */
select {
width: 100%;
padding:
14px 16px;
border:
2px solid
#ddd7f2;
border-radius: 14px;
background-color:
#faf9ff;
color:
#454052;
font-family:
inherit;
font-size: 16px;
font-weight: 500;
outline: none;
cursor: pointer;
transition:
border-color .2s ease,
background-color .2s ease,
box-shadow .2s ease,
transform .2s ease;
}
select:hover {
background-color:
#ffffff;
border-color:
#f3c85b;
}
select:focus {
background-color:
#ffffff;
border-color:
#72c472;
box-shadow:
0 0 0 4px
rgba(114,196,114,.13);
transform:
translateY(-1px);
}
/* =========================================================
OpenID 說明
========================================================= */
.openid-hint {
margin-top: 6px;
font-size: 12px;
color:
#9993a3;
line-height: 1.5;
}
/* =========================================================
登入按鈕
========================================================= */
.submit-btn {
width: 100%;
margin-top: 8px;
padding:
15px 20px;
background:
linear-gradient(
135deg,
#5b3cc4,
#e85d75
);
color:
#ffffff;
border: none;
border-radius: 15px;
font-family:
inherit;
font-size: 18px;
font-weight: 800;
letter-spacing: 1px;
cursor: pointer;
box-shadow:
0 8px 18px
rgba(91,60,196,.25);
transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;
}
.submit-btn:hover {
transform:
translateY(-3px);
box-shadow:
0 12px 25px
rgba(91,60,196,.32);
filter:
brightness(1.05);
}
.submit-btn:active {
transform:
translateY(0);
box-shadow:
0 5px 12px
rgba(91,60,196,.23);
}
.submit-btn:disabled {
opacity: .45;
cursor:
not-allowed;
transform: none;
box-shadow: none;
}
/* =========================================================
錯誤訊息
========================================================= */
.error {
background:
#fff0f2;
color:
#d94f68;
padding:
13px 16px;
border-radius:
12px;
text-align:
center;
margin-top:
18px;
font-weight:
600;
border:
1px solid
#f0c4cc;
}
/* ==========================================================
密碼
========================================================== */
.openid-wrapper {
display: flex;
width: 100%;
box-sizing: border-box;
}
.openid-wrapper input {
flex: 1;
min-width: 0;
box-sizing: border-box;
}
.openid-toggle {
margin-left: 5px;
padding: 0 10px;
cursor: pointer;
white-space: nowrap;
}
/* =========================================================
Footer
========================================================= */
.footer {
text-align:
center;
padding:
17px 20px;
background:
#faf8ff;
color:
#9993a3;
font-size:
12px;
border-top:
1px solid
#e1dcf0;
}
.footer span {
color:
#e85d75;
font-weight:
600;
}
/* =========================================================
手機
========================================================= */
@media (max-width: 480px) {
.login-card {
max-width:
calc(100% - 24px);
border-radius:
22px;
}
.header {
padding:
25px 18px 28px;
}
.mascot {
width:
70px;
height:
70px;
font-size:
40px;
}
.header h1 {
font-size:
25px;
}
.form-container {
padding:
26px 24px;
}
}