/* Access gate — loaded in so it paints before page content */ html.gate-locked, html.gate-locked body { overflow: hidden !important; height: 100%; } html.gate-locked { background: #00152e; } html.gate-locked body { visibility: hidden !important; } #boi-gate { visibility: visible !important; } #boi-gate { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(120% 90% at 50% -10%, #063a72 0%, #002247 45%, #00152e 100%); font-family: "Noto Sans TC", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: #fff; opacity: 1; transition: opacity .6s ease; } #boi-gate.hide { opacity: 0; pointer-events: none; } #boi-gate::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); } .gate-card { position: relative; width: 100%; max-width: 440px; text-align: center; padding: 20px 8px; animation: gateIn .8s cubic-bezier(.2,.7,.3,1) both; } @keyframes gateIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .gate-logo { width: 72px; height: 72px; margin: 0 auto 22px; } .gate-logo .leaf { fill: #6FD0C2; } .gate-logo .trunk { fill: #fff; } .gate-logo circle { stroke: rgba(255,255,255,.5); } .gate-cn { font-family: "Noto Serif TC","Noto Serif SC",serif; font-size: 1.75rem; letter-spacing: .18em; font-weight: 600; } .gate-en { font-size: .62rem; letter-spacing: .42em; text-transform: uppercase; opacity: .7; margin-top: 8px; } .gate-rule { width: 46px; height: 1px; background: #C6A15B; margin: 22px auto; } .gate-title { font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; } .gate-sub { font-size: .86rem; color: rgba(255,255,255,.6); margin-top: 8px; line-height: 1.7; } .gate-form { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; } .gate-input-wrap { position: relative; } .gate-input-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: rgba(255,255,255,.45); fill: none; } #boi-gate input { width: 100%; padding: 15px 16px 15px 46px; font-size: 1rem; color: #fff; letter-spacing: .05em; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); border-radius: 4px; transition: border-color .3s, box-shadow .3s; text-align: center; } #boi-gate input::placeholder { color: rgba(255,255,255,.4); letter-spacing: .1em; } #boi-gate input:focus { outline: none; border-color: #34B3A0; box-shadow: 0 0 0 3px rgba(52,179,160,.2); } #boi-gate button { padding: 15px; font-size: .95rem; font-weight: 600; letter-spacing: .08em; color: #06283f; background: linear-gradient(135deg, #34B3A0, #6FD0C2); border-radius: 4px; cursor: pointer; transition: transform .3s, box-shadow .3s; box-shadow: 0 10px 26px rgba(52,179,160,.35); } #boi-gate button:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(52,179,160,.45); } .gate-error { color: #ff9d9d; font-size: .84rem; min-height: 20px; letter-spacing: .02em; transition: opacity .3s; } .gate-shake { animation: gateShake .4s; } @keyframes gateShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} } .gate-foot { margin-top: 26px; font-size: .72rem; color: rgba(255,255,255,.35); letter-spacing: .05em; }