/* ============================================================
wp-login.php — Soulfriend editorial login
Cream backdrop · slate-blue actions · Myungjo display slogan
============================================================ */
:root {
--sf-bg: #fbf9f5;
--sf-bg-soft: #f4ecdc;
--sf-paper: #ffffff;
--sf-ink: #1c1f24;
--sf-ink-soft: #4a5160;
--sf-muted: #8a92a0;
--sf-line: #e9e3d4;
--sf-line-soft: #f0eadd;
--sf-primary: #2c4a5e;
--sf-primary-dark: #16293a;
--sf-accent: #b86b3c;
--sf-accent-soft: rgba(184,107,60,0.12);
--sf-radius-sm: 6px;
--sf-radius: 12px;
--sf-radius-lg: 20px;
--sf-shadow-1: 0 1px 2px rgba(28,31,36,0.04), 0 4px 16px -8px rgba(28,31,36,0.06);
--sf-shadow-2: 0 6px 18px -8px rgba(28,31,36,0.18), 0 2px 6px rgba(28,31,36,0.04);
--sf-shadow-3: 0 24px 48px -24px rgba(28,31,36,0.22);
--sf-display: 'BookkMyungjo', 'Nanum Myeongjo', 'Noto Serif KR', serif;
--sf-sans: 'SUIT', 'Apple SD Gothic Neo', 'Pretendard', sans-serif;
--sf-ease: cubic-bezier(0.22, 1, 0.36, 1);
--sf-fast: 180ms;
--sf-mid: 320ms;
}
/* ---------- Page canvas ---------- */
html, body { height: 100%; }
body.login {
background: var(--sf-bg);
font-family: var(--sf-sans);
color: var(--sf-ink);
position: relative;
overflow-x: hidden;
}
/* Decorative editorial backdrop — soft topographic contour lines + accent ring */
body.login::before {
content: '';
position: fixed; inset: 0;
background:
radial-gradient(ellipse at 80% 12%, rgba(184,107,60,0.10) 0%, transparent 38%),
radial-gradient(ellipse at 12% 88%, rgba(44,74,94,0.08) 0%, transparent 42%);
pointer-events: none;
z-index: 0;
}
body.login::after {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
pointer-events: none;
z-index: 0;
}
/* ---------- Layout shell ---------- */
#login {
width: 100%;
max-width: 460px;
padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 40px) 48px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* ---------- Brand mark (replaces WP logo) ---------- */
.login h1 { margin: 0 0 10px; text-align: center; }
.login h1 a {
background-image: none; /* JS/PHP injects logo path inline */
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 64px;
text-indent: -9999px;
overflow: hidden;
display: inline-block;
transition: transform var(--sf-mid) var(--sf-ease);
}
.login h1 a:hover { transform: translateY(-1px); }
.login h1 a:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 6px; border-radius: 6px; }
/* ---------- Editorial intro (rendered via login_message filter) ---------- */
.sf-login-intro {
text-align: center;
margin: 8px auto 28px;
max-width: 420px;
}
.sf-login-intro__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--sf-sans);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--sf-accent);
line-height: 1;
margin: 0 0 18px;
}
.sf-login-intro__eyebrow::before,
.sf-login-intro__eyebrow::after {
content: '';
display: inline-block;
width: 28px; height: 1px;
background: var(--sf-accent);
}
.sf-login-intro__slogan {
font-family: var(--sf-display);
font-size: clamp(1.625rem, 2.4vw + 0.5rem, 2.125rem);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.035em;
color: var(--sf-ink);
margin: 0 0 18px;
}
.sf-login-intro__slogan span { display: block; }
.sf-login-intro__slogan span:last-child { color: var(--sf-accent); }
.sf-login-intro__lead {
font-family: var(--sf-sans);
font-size: 14px;
line-height: 1.75;
color: var(--sf-ink-soft);
margin: 0;
word-break: keep-all;
}
/* ---------- Login form card ---------- */
.login form {
background: var(--sf-paper);
border: 1px solid var(--sf-line);
border-radius: var(--sf-radius-lg);
box-shadow: var(--sf-shadow-2);
padding: clamp(28px, 3.5vw, 36px);
margin: 0 0 18px;
overflow: visible;
box-sizing: border-box;
display: grid;
gap: 14px;
}
.login form p { margin: 0; padding: 0; }
.login label {
font-family: var(--sf-sans);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--sf-ink-soft);
margin-bottom: 6px;
display: block;
}
.login form .input,
.login input[type=text],
.login input[type=email],
.login input[type=password] {
width: 100%;
padding: 12px 14px;
font-family: var(--sf-sans);
font-size: 15px;
line-height: 1.4;
color: var(--sf-ink);
background: var(--sf-bg);
border: 1px solid var(--sf-line);
border-radius: var(--sf-radius-sm);
box-shadow: none;
transition: border-color var(--sf-fast) var(--sf-ease),
background var(--sf-fast) var(--sf-ease),
box-shadow var(--sf-fast) var(--sf-ease);
margin: 0;
}
.login form .input:focus,
.login input[type=text]:focus,
.login input[type=email]:focus,
.login input[type=password]:focus {
outline: none;
border-color: var(--sf-primary);
background: #fff;
box-shadow: 0 0 0 4px rgba(44,74,94,0.10);
}
/* WP wraps password input in a flex container — keep pieces aligned */
.login .user-pass-wrap .wp-pwd { position: relative; }
.login .user-pass-wrap input[type=password],
.login .user-pass-wrap input[type=text] { padding-right: 44px; }
.login .user-pass-wrap button.button.wp-hide-pw {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: var(--sf-muted) !important;
width: 36px; height: 36px;
border-radius: 999px !important;
transition: background var(--sf-fast) var(--sf-ease), color var(--sf-fast) var(--sf-ease);
}
.login .user-pass-wrap button.button.wp-hide-pw:hover {
background: var(--sf-accent-soft) !important;
color: var(--sf-accent) !important;
}
.login .user-pass-wrap button.button.wp-hide-pw .dashicons { width: 20px; height: 20px; font-size: 20px; }
/* "Remember me" + submit row */
.login .forgetmenot {
margin: 2px 0 4px !important;
font-size: 13px;
color: var(--sf-ink-soft);
}
.login .forgetmenot label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; letter-spacing: 0; margin: 0; }
.login input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
width: 18px; height: 18px;
border: 1px solid var(--sf-line);
border-radius: 4px;
background: var(--sf-paper);
position: relative;
cursor: pointer;
transition: background var(--sf-fast) var(--sf-ease), border-color var(--sf-fast) var(--sf-ease);
}
.login input[type=checkbox]:hover { border-color: var(--sf-primary); }
.login input[type=checkbox]:checked {
background: var(--sf-primary);
border-color: var(--sf-primary);
}
.login input[type=checkbox]:checked::after {
content: '';
position: absolute;
left: 5px; top: 1px;
width: 5px; height: 10px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
}
.login input[type=checkbox]:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
/* Submit button — slate-blue pill */
.login .submit { margin: 0; }
.login .button-primary,
.login .submit input[type=submit],
.login .submit .button {
display: block;
width: 100%;
padding: 14px 24px !important;
height: auto !important;
line-height: 1 !important;
font-family: var(--sf-sans) !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
color: #fff !important;
background: var(--sf-primary) !important;
border: 1px solid var(--sf-primary) !important;
border-radius: 999px !important;
box-shadow: 0 8px 22px -10px rgba(44,74,94,0.42) !important;
text-shadow: none !important;
transition: transform var(--sf-fast) var(--sf-ease),
background var(--sf-fast) var(--sf-ease),
box-shadow var(--sf-fast) var(--sf-ease) !important;
cursor: pointer;
}
.login .button-primary:hover,
.login .submit input[type=submit]:hover,
.login .submit .button:hover {
background: var(--sf-primary-dark) !important;
border-color: var(--sf-primary-dark) !important;
transform: translateY(-1px);
box-shadow: 0 14px 28px -12px rgba(44,74,94,0.48) !important;
}
.login .button-primary:focus-visible,
.login .submit input[type=submit]:focus-visible {
outline: 2px solid var(--sf-accent) !important;
outline-offset: 3px !important;
}
/* ---------- Hint links (lost password / back to blog) ---------- */
#login p#nav,
#login p#backtoblog {
text-align: center;
margin: 0 0 6px;
padding: 0;
font-size: 13px;
color: var(--sf-muted);
}
#login p#nav a,
#login p#backtoblog a {
color: var(--sf-ink-soft);
text-decoration: none;
padding: 4px 8px;
border-radius: 999px;
transition: background var(--sf-fast) var(--sf-ease), color var(--sf-fast) var(--sf-ease);
}
#login p#nav a:hover,
#login p#backtoblog a:hover {
background: var(--sf-accent-soft);
color: var(--sf-accent);
}
#login p#backtoblog { margin-top: 12px; }
/* ---------- Language switcher (small, muted) ---------- */
.login .language-switcher {
margin-top: 24px;
text-align: center;
position: relative;
z-index: 1;
}
/* Reset the language-switcher's