/* * pk-login.css * PureKing Badminton Academy – Login page styles * * Scoped under .pk-login-page to avoid leaking into other pages. * Aggressively overrides Drupal's core & Gavias Edmix form styles. * * Design tokens from pureking.css :root are reused where possible. * Hard-coded fallbacks are provided so this file is self-contained. */ /* ============================================================ 1. PAGE SHELL & BACKGROUND ============================================================ */ /* Hide the parent-theme header/footer on the login page so the card layout fills the entire viewport cleanly. */ .pk-login-page ~ header, .pk-login-page ~ footer, .page-user-login .gva-header, .page-user-login .gva-footer, .page-user-login .gva-offcanvas, .page-user-login #gva-back-top { display: none !important; } /* Full-viewport wrapper — header sits above, so subtract its height */ .pk-login-page { position: relative; min-height: calc(100vh - 80px); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--pk-font-body, 'Open Sans', sans-serif); color: var(--pk-text, #1A2535); overflow: hidden; } /* ── Background gradient ── */ .pk-login-bg { position: fixed; inset: 0; background: linear-gradient(145deg, #0A1628 0%, #132240 55%, #1E3560 100%); z-index: 0; } /* ── Subtle shuttlecock-court diagonal stripe pattern ── */ .pk-login-bg__pattern { position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, transparent, transparent 40px, rgba(255, 255, 255, 0.018) 40px, rgba(255, 255, 255, 0.018) 41px ), repeating-linear-gradient( 45deg, transparent, transparent 40px, rgba(255, 255, 255, 0.018) 40px, rgba(255, 255, 255, 0.018) 41px ); /* Radial vignette to darken corners */ mask-image: radial-gradient(ellipse 120% 80% at 50% 50%, black 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 50%, black 40%, transparent 100%); } /* ============================================================ 2. MAIN LAYOUT & CARD ============================================================ */ .pk-login-main { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 40px 16px 24px; box-sizing: border-box; } .pk-login-card { width: 100%; max-width: 440px; background: #ffffff; border-radius: 16px; padding: 40px 44px; box-shadow: 0 4px 6px rgba(10, 22, 40, 0.07), 0 16px 48px rgba(10, 22, 40, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.04); box-sizing: border-box; } /* ============================================================ 3. BRAND / LOGO AREA ============================================================ */ .pk-login-brand { text-align: center; margin-bottom: 20px; } .pk-login-brand__link { display: inline-block; text-decoration: none; } .pk-login-brand__link:hover { text-decoration: none; opacity: 0.9; } /* ⚠️ 用 img.pk-login-brand__logo（元素+class，特异度跟下面这条撞平）而不是 单独一个 class 选择器——pureking.css 里有一条特别宽的规则 `.path-user .field--type-image img, .path-user img { height: auto }`， 登录页 body 也带 .path-user，这条规则的特异度（1class+1元素）本来就比 单class的 .pk-login-brand__logo 高，会直接把这里的 height:64px 覆盖掉， height变成auto、宽度又没有别的地方兜底，最终渲染成0×0（图片能正常 加载，naturalWidth/Height都对，只是布局尺寸塌缩成0，看起来跟"图裂了" 一模一样）。特异度打平后，靠这个文件在 里排在 pureking.css 后面 这个层叠顺序取胜，不需要用 !important。 */ .pk-login-brand__logo, img.pk-login-brand__logo { height: 64px; width: auto; display: block; } /* ============================================================ 4. WELCOME HEADING ============================================================ */ .pk-login-heading { text-align: center; margin-bottom: 24px; } .pk-login-heading__title { /* Override global h1 rules so it looks right inside the card */ font-family: var(--pk-font-head, 'Montserrat', 'Raleway', sans-serif) !important; font-size: 22px !important; font-weight: 800 !important; color: var(--pk-navy, #0A1628) !important; letter-spacing: -0.02em !important; margin: 0 0 6px !important; line-height: 1.2 !important; } .pk-login-heading__sub { font-size: 13.5px; color: var(--pk-text-mid, #4A5568); margin: 0; line-height: 1.55; } /* ============================================================ 5. SOCIAL LOGIN BUTTONS ============================================================ */ .pk-login-social { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } /* Base social button */ .pk-social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; width: 100%; border-radius: 10px; font-size: 14px; font-weight: 600; font-family: var(--pk-font-body, 'Open Sans', sans-serif); text-decoration: none; cursor: pointer; border: none; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease; box-sizing: border-box; line-height: 1; letter-spacing: 0.01em; } .pk-social-btn:hover { text-decoration: none; transform: translateY(-1px); } .pk-social-btn:active { transform: translateY(0); } .pk-social-btn__icon { flex-shrink: 0; } /* 微信登录 */ .pk-social-btn--wechat { background-color: #07C160; color: #ffffff; border: 1.5px solid transparent; box-shadow: 0 1px 3px rgba(7, 193, 96, 0.25); } .pk-social-btn--wechat:hover { background-color: #06a050; box-shadow: 0 2px 8px rgba(7, 193, 96, 0.35); color: #ffffff; } /* 手机号登录（次要按钮） */ .pk-social-btn--phone { background-color: #ffffff; border: 1.5px solid var(--pk-gray, #E2E6ED); color: var(--pk-text, #1A2535); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .pk-social-btn--phone:hover { border-color: #07C160; background-color: #F0FFF7; box-shadow: 0 2px 8px rgba(7, 193, 96, 0.15); color: var(--pk-text, #1A2535); } /* Admin note below social buttons */ .pk-login-social-note { margin: 2px 0 0; font-size: 11px; color: var(--pk-gray-mid, #8A97A8); text-align: center; line-height: 1.4; } .pk-login-social-note .fa { margin-right: 4px; font-size: 10px; } /* ============================================================ 6. DIVIDER ============================================================ */ .pk-login-divider { display: flex; align-items: center; gap: 12px; margin: 8px 0 20px; } .pk-login-divider::before, .pk-login-divider::after { content: ''; flex: 1; height: 1px; background-color: var(--pk-gray, #E2E6ED); } .pk-login-divider span { color: var(--pk-gray-mid, #8A97A8); font-size: 12px; font-weight: 500; white-space: nowrap; letter-spacing: 0.02em; } /* ============================================================ 7. DRUPAL FORM – AGGRESSIVE OVERRIDES ============================================================ */ /* ── Error banner (populated by pk-login.js) ── */ .pk-login-error-banner { display: flex; align-items: flex-start; gap: 10px; background-color: #FEF2F2; border-left: 4px solid #DC2626; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; color: #991B1B; line-height: 1.45; } .pk-login-error-banner .fa { flex-shrink: 0; margin-top: 2px; font-size: 15px; color: #DC2626; } .pk-login-error-banner--hidden { display: none !important; } /* ── Hide Drupal's default message output (we move it via JS) ── */ .pk-login-page .messages--error, .pk-login-page .messages.messages--error, .pk-login-page .messages.error { display: none !important; } /* ── Form labels ── */ .pk-login-page .form-item label, .pk-login-page .form-item > label { display: block; font-size: 11px !important; font-weight: 700 !important; font-variant: small-caps; letter-spacing: 0.08em !important; color: var(--pk-text-mid, #4A5568) !important; margin-bottom: 6px !important; text-transform: uppercase; line-height: 1.3; } /* ── Text / email / password inputs ── */ .pk-login-page input[type="text"], .pk-login-page input[type="email"], .pk-login-page input[type="password"] { display: block !important; width: 100% !important; height: 48px !important; padding: 0 16px !important; font-size: 15px !important; font-family: var(--pk-font-body, 'Open Sans', sans-serif) !important; color: var(--pk-text, #1A2535) !important; background-color: #ffffff !important; border: 1.5px solid var(--pk-gray, #E2E6ED) !important; border-radius: 10px !important; box-sizing: border-box !important; outline: none !important; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; appearance: none; -webkit-appearance: none; } .pk-login-page input[type="text"]:focus, .pk-login-page input[type="email"]:focus, .pk-login-page input[type="password"]:focus { border-color: var(--pk-navy, #0A1628) !important; box-shadow: 0 0 0 3px rgba(10, 22, 40, 0.10) !important; } /* Password wrapper — makes room for the eye toggle button */ .pk-login-page .pk-password-wrapper { position: relative; } .pk-login-page .pk-password-wrapper input[type="text"], .pk-login-page .pk-password-wrapper input[type="password"] { padding-right: 48px !important; } /* Eye toggle button (injected by pk-login.js) */ .pk-password-toggle { position: absolute; right: 0; top: 0; height: 48px; width: 48px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--pk-gray-mid, #8A97A8); font-size: 15px; padding: 0; border-radius: 0 10px 10px 0; transition: color 0.15s ease; z-index: 2; } .pk-password-toggle:hover { color: var(--pk-navy, #0A1628); } .pk-password-toggle:focus { outline: 2px solid var(--pk-navy, #0A1628); outline-offset: -2px; } /* ── Form items spacing ── */ .pk-login-page .form-item, .pk-login-page .form-type-textfield, .pk-login-page .form-type-password, .pk-login-page .form-type-email { margin-bottom: 16px !important; position: relative; } /* ── Inline field-level validation errors ── */ .pk-login-page .form-item--error-message, .pk-login-page .form-item .error { display: block; margin-top: 5px; font-size: 12px; color: #DC2626; font-weight: 500; } /* ── Submit / Sign In button ── */ .pk-login-page .form-submit, .pk-login-page input[type="submit"], .pk-login-page button[type="submit"] { display: block !important; width: 100% !important; height: 48px !important; padding: 0 20px !important; font-size: 15px !important; font-weight: 700 !important; font-family: var(--pk-font-head, 'Montserrat', 'Raleway', sans-serif) !important; letter-spacing: 0.5px !important; color: #ffffff !important; background-color: var(--pk-navy, #0A1628) !important; border: none !important; border-radius: 10px !important; cursor: pointer !important; box-sizing: border-box !important; outline: none !important; box-shadow: 0 2px 8px rgba(10, 22, 40, 0.25) !important; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important; position: relative !important; margin-top: 8px !important; appearance: none; -webkit-appearance: none; } .pk-login-page .form-submit:hover, .pk-login-page input[type="submit"]:hover, .pk-login-page button[type="submit"]:hover { background-color: #132240 !important; box-shadow: 0 4px 14px rgba(10, 22, 40, 0.35) !important; transform: translateY(-1px); } .pk-login-page .form-submit:active, .pk-login-page input[type="submit"]:active, .pk-login-page button[type="submit"]:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(10, 22, 40, 0.20) !important; } /* ── Loading state (added by pk-login.js on form submit) ── */ .pk-login-page .form-submit.pk-loading, .pk-login-page input[type="submit"].pk-loading, .pk-login-page button[type="submit"].pk-loading { opacity: 0.72 !important; cursor: not-allowed !important; pointer-events: none !important; transform: none !important; } /* Spinner ::after pseudo on loading state */ .pk-login-page .form-submit.pk-loading::after, .pk-login-page input[type="submit"].pk-loading::after, .pk-login-page button[type="submit"].pk-loading::after { content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 10px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #ffffff; border-radius: 50%; animation: pk-spin 0.7s linear infinite; vertical-align: middle; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); } @keyframes pk-spin { to { transform: translateY(-50%) rotate(360deg); } } /* ── Forgot password link (Drupal renders this as a plain link inside the form) ── */ .pk-login-page .form-item--pass a, .pk-login-page a[href*="password"] { font-size: 12px; color: #2563EB; text-decoration: none; } .pk-login-page .form-item--pass a:hover, .pk-login-page a[href*="password"]:hover { text-decoration: underline; color: #1D4ED8; } /* ── Description text under form fields ── */ .pk-login-page .form-item .description, .pk-login-page .form-item .form-item__description { font-size: 11.5px; color: var(--pk-gray-mid, #8A97A8); margin-top: 4px; line-height: 1.4; } /* ── Hide Drupal-rendered "Log in" form/block headings ── */ .pk-login-form-wrapper .block-system-main-block > h2, .pk-login-form-wrapper .block-system-main-block > .block-title, .pk-login-form-wrapper h2, .pk-login-form-wrapper .form-item > h2, .pk-login-page #user-login-form > h2 { display: none !important; } /* ── Help region ── */ .pk-login-help { margin-top: 12px; font-size: 13px; color: var(--pk-gray-mid, #8A97A8); } /* ── Rate-limiting / CAPTCHA notice (injected by pk-login.js) ── */ .pk-login-rate-notice { background-color: #FFFBEB; border-left: 4px solid #F59E0B; border-radius: 8px; padding: 11px 14px; margin-bottom: 14px; font-size: 13px; color: #92400E; display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; } .pk-login-rate-notice .fa { flex-shrink: 0; margin-top: 1px; color: #F59E0B; } /* ============================================================ 8. BOTTOM LINKS ============================================================ */ .pk-login-links { display: flex; flex-direction: column; align-items: center; margin-top: 28px; padding: 18px 20px; background: #f0f4ff; border-radius: 12px; border: 1px solid #dbeafe; font-size: 14px; color: var(--pk-text-mid, #4A5568); gap: 10px; text-align: center; } .pk-login-links__register { display: inline-block; background: #2563EB; color: #ffffff !important; text-decoration: none; font-weight: 700; font-size: 15px; padding: 10px 28px; border-radius: 8px; transition: background 0.18s ease, transform 0.15s ease; margin-top: 4px; } .pk-login-links__register:hover { background: #1D4ED8; color: #ffffff !important; text-decoration: none; transform: translateY(-1px); } .pk-login-links__terms { color: #6B7280; text-decoration: none; font-size: 12px; transition: color 0.15s ease; } .pk-login-links__terms:hover { color: #374151; text-decoration: underline; } /* ============================================================ 9. FORGOT PASSWORD ============================================================ */ .pk-login-forgot { text-align: center; margin-top: 12px; } .pk-login-forgot__link { font-size: 13px; color: #6B7280; text-decoration: none; transition: color 0.15s ease; } .pk-login-forgot__link:hover { color: var(--pk-gold, #E8A020); text-decoration: underline; } /* ============================================================ 10. PASSWORD-RESET SUCCESS BANNER ============================================================ */ .pk-login-pw-sent { display: flex; align-items: flex-start; gap: 10px; background: #ECFDF5; border: 1px solid #6EE7B7; border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; font-size: 14px; color: #065F46; line-height: 1.5; } .pk-login-pw-sent svg { flex-shrink: 0; margin-top: 1px; color: #059669; } /* ============================================================ 11. PASSWORD-RESET PAGE HEADING ============================================================ */ .pk-login-heading { text-align: center; margin-bottom: 24px; } .pk-login-heading h1 { font-size: 22px; font-weight: 800; color: #0A1628; margin: 0 0 8px; letter-spacing: -0.3px; } .pk-login-heading p { font-size: 14px; color: #64748B; margin: 0; line-height: 1.6; } /* Tighten up the core reset form */ .pk-reset-form-wrapper .form-item label { font-weight: 600; font-size: 13px; color: #374151; } .pk-reset-form-wrapper .form-item--error-message { color: #DC2626; font-size: 13px; margin-top: 4px; } /* ============================================================ 12. FOOTER NOTE ============================================================ */ .pk-login-footer { margin-top: 24px; font-size: 12px; color: rgba(255, 255, 255, 0.45); text-align: center; letter-spacing: 0.02em; line-height: 1.5; } /* ============================================================ 10. RESPONSIVE — mobile ≤ 500px ============================================================ */ @media (max-width: 500px) { .pk-login-card { border-radius: 0; width: 92vw; padding: 28px 20px; } .pk-login-main { padding: 0 0 20px; justify-content: flex-start; min-height: 100vh; } .pk-login-card { margin-top: 0; border-radius: 0 0 16px 16px; } .pk-login-heading__title { font-size: 20px !important; } } @media (max-width: 360px) { .pk-login-card { padding: 24px 14px; } .pk-login-brand__name { font-size: 22px; } } /* ============================================================ 11. HIGH-CONTRAST / FORCED COLORS ACCESSIBILITY ============================================================ */ @media (forced-colors: active) { .pk-login-card { border: 2px solid ButtonText; } .pk-social-btn { border: 2px solid ButtonText; } .pk-login-page .form-submit, .pk-login-page input[type="submit"] { border: 2px solid ButtonText !important; } } /* ============================================================ 12. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .pk-social-btn, .pk-login-page .form-submit, .pk-login-page input[type="submit"], .pk-login-page input[type="text"], .pk-login-page input[type="email"], .pk-login-page input[type="password"], .pk-password-toggle { transition: none !important; } .pk-login-page .form-submit.pk-loading::after, .pk-login-page input[type="submit"].pk-loading::after { animation: none; content: '…'; border: none; width: auto; height: auto; font-size: 14px; } }