/* * RainRoot - login screen * --------------------------------------------------------------------------- * Everything about how the login page looks lives in this one file. Edit it * freely; nothing here can break the login itself, which WordPress handles. * The wording is in includes/login.php. To get the plain WordPress screen * back, remove the require for that file in functions.php. * * The colours are the theme's own, copied from theme.json. If the palette * changes there, paste the new values in below. */ :root { --rr-soil: #0E1714; /* page background */ --rr-stone: #1B2723; /* the login card */ --rr-line: rgba(243,245,240,.16); --rr-mist: #F3F5F0; /* main text */ --rr-haze: #A8B7B1; /* muted text */ --rr-water: #3F6EAA; --rr-water-brt: #6BA3DC; /* the rain */ --rr-root: #31774C; /* the button */ --rr-root-brt: #64B07E; --rr-clay: #C8784C; /* errors only */ } /* ---------------------------------------------------------------- fonts --- * Served from this theme, same as the rest of the site. No external requests, * so the login screen keeps working on a boxed-in network. */ @font-face { font-family: "Leto Sans"; src: url("fonts/LetoSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Leto Sans"; src: url("fonts/LetoSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ----------------------------------------------------------------- page --- */ body.login { background-color: var(--rr-soil); /* Weather overhead, ground below. Both sit under the rain layers. */ background-image: radial-gradient(ellipse 90% 55% at 50% -12%, rgba(107,163,220,.16), transparent 72%), radial-gradient(ellipse 80% 45% at 50% 112%, rgba(49,119,76,.20), transparent 72%); color: var(--rr-mist); font-family: "Leto Sans", "Segoe UI", system-ui, -apple-system, sans-serif; letter-spacing: -0.005em; /* * border-box matters here. WordPress leaves body as content-box, so the * padding below would be added on top of 100vh and push the last line off * the bottom of the screen by exactly the padding, whatever the content. */ box-sizing: border-box; min-height: 100vh; min-height: 100dvh; /* dvh accounts for the address bar on phones */ /* * Column, not row. WordPress prints several things as direct children of * - the login box, and everything hooked to login_footer - so a row * would stand them side by side instead of stacking them. */ display: flex; flex-direction: column; align-items: center; /* * "safe" matters on very short windows. A plain centred flex column clips * the top of its content when it overflows, putting the logo out of reach * above the scroll area. safe centre falls back to top-aligned instead. */ justify-content: center; justify-content: safe center; padding: 40px 16px; overflow-x: hidden; } /* ----------------------------------------------------------------- rain --- * The same field the home hero uses - literally the same one: the drops are * generated by rainroot_rainfield() in includes/rain.php, so this screen and * the hero can't drift apart again. Every drop has its own length, speed and * start time, so no two move together and there's no single sliding mass to * fix on - which is what lets a heavy fall sit still enough to read a form * through. * * The rule and the keyframes are lifted from rainroot.css, because the login * screen loads none of the front end's stylesheets. Keep them in step. */ .rr-rainfield { position: fixed; inset: 0; inline-size: 100%; block-size: 100%; z-index: 0; pointer-events: none; } .rr-rain-line { stroke: var(--rr-water-brt); stroke-linecap: round; opacity: 0; /* * Percentages in the keyframes below resolve against the viewBox rather * than each line's own bounding box. That's the browser default for SVG, * and saying so keeps a drop from falling its own length and stopping. */ transform-box: view-box; animation: rr-fall linear infinite; } @keyframes rr-fall { 0% { opacity: 0; transform: translateY(-14%); } 12% { opacity: .55; } 80% { opacity: .38; } 100% { opacity: 0; transform: translateY(115%); } } /* --------------------------------------------------------------- layout --- */ #login { position: relative; z-index: 1; width: 100%; max-width: 396px; padding: 0; } /* ----------------------------------------------------------------- logo --- * The horizontal lockup already contains the wordmark, so the h1's link text * is hidden and the logo carries the name on its own. It is the bright * variant, which is the one drawn for dark backgrounds. */ #login h1, #login .wp-login-logo { margin: 0 0 20px; text-align: center; } #login h1 a, #login .wp-login-logo a { display: block; width: 100%; max-width: 320px; height: 66px; margin: 0 auto; padding: 0; background-image: var(--rr-login-logo); background-size: contain; background-position: center; background-repeat: no-repeat; /* * The lockup carries the name, so the link's own text is hidden rather * than removed - screen readers still announce it. */ font-size: 0; line-height: 0; color: transparent; text-indent: -9999px; overflow-x: hidden; box-shadow: none; transition: opacity .2s ease; } #login h1 a:hover, #login h1 a:focus, #login .wp-login-logo a:hover, #login .wp-login-logo a:focus { opacity: .82; box-shadow: none; outline: none; } /* The link's text is invisible, so it needs a focus ring of its own. */ #login h1 a:focus-visible, #login .wp-login-logo a:focus-visible { outline: 2px solid var(--rr-water-brt); outline-offset: 6px; border-radius: 4px; } /* the greeting, printed inside the box just above the form */ .rr-login-greeting { text-align: center; font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif; font-size: 19px; line-height: 1.3; color: var(--rr-mist); opacity: .92; margin: 0 0 22px; letter-spacing: 0; } /* ----------------------------------------------------------------- card --- */ #loginform, #login form { background: var(--rr-stone); border: 1px solid var(--rr-line); border-radius: 14px; padding: 26px 24px 22px; box-shadow: 0 2px 4px rgba(0,0,0,.20), 0 32px 64px -24px rgba(0,0,0,.75); } .login label { color: var(--rr-haze); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .login input[type="text"], .login input[type="password"], .login input[type="email"] { background: var(--rr-soil); border: 1px solid var(--rr-line); border-radius: 9px; color: var(--rr-mist); font-family: inherit; font-size: 16px; /* 16px stops iOS zooming in when you tap it */ padding: 11px 13px; margin: 6px 0 2px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } .login input[type="text"]:focus, .login input[type="password"]:focus, .login input[type="email"]:focus { border-color: var(--rr-water-brt); box-shadow: 0 0 0 3px rgba(107,163,220,.24); outline: none; } /* the show/hide password eye */ .login .wp-pwd .button.wp-hide-pw { color: var(--rr-haze); } .login .wp-pwd .button.wp-hide-pw:hover { color: var(--rr-water-brt); } .login .wp-pwd .button.wp-hide-pw:focus { box-shadow: 0 0 0 3px rgba(107,163,220,.24); outline: none; } /* Core's help toggletip beside Remember Me. * * WordPress 7 prints a dashicon button here in #50575E, which is 2.11:1 against the * card and fails WCAG AA for a non-text control. Haze measures 7.4:1. The bubble is a * popover in the top layer, so it needs its own surface: left to core it opens as a * white sheet in the middle of a dark screen. */ .login .wp-tooltip__toggle, .login .wp-tooltip__close { color: var(--rr-haze); } .login .wp-tooltip__toggle:hover, .login .wp-tooltip__toggle:focus, .login .wp-tooltip__close:hover, .login .wp-tooltip__close:focus { color: var(--rr-water-brt); } .login .wp-tooltip__bubble { max-width: 22rem; padding: 11px 14px; background: var(--rr-stone); border: 1px solid var(--rr-line); border-radius: 9px; box-shadow: 0 2px 4px rgba(0,0,0,.20), 0 24px 48px -20px rgba(0,0,0,.75); color: var(--rr-mist); font-size: 13.5px; line-height: 1.4; } /* "Remember Me" */ .login .forgetmenot label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--rr-haze); } .login input[type="checkbox"] { border-color: var(--rr-line); background: var(--rr-soil); } .login input[type="checkbox"]:checked { border-color: var(--rr-root-brt); } .login input[type="checkbox"]:checked::before { filter: brightness(2.4); } /* --------------------------------------------------------------- button --- * Root green, which is what the site's own buttons turn when you point at * them. The pill shape is the theme's. */ .wp-core-ui .button-primary { background: var(--rr-root); border: 1px solid var(--rr-root); border-radius: 999px; color: var(--rr-mist); font-family: inherit; font-weight: 600; font-size: 15px; letter-spacing: -0.005em; padding: 8px 20px; height: auto; min-height: 44px; text-shadow: none; box-shadow: none; transition: transform .12s ease, background .15s ease, border-color .15s ease; width: 100%; } .wp-core-ui .button-primary:hover { background: var(--rr-root-brt); border-color: var(--rr-root-brt); color: var(--rr-soil); transform: translateY(-1px); } .wp-core-ui .button-primary:active { transform: translateY(0); } .wp-core-ui .button-primary:focus { box-shadow: 0 0 0 3px rgba(100,176,126,.38); outline: none; } /* -------------------------------------------------- links under the form --- */ .login #nav, .login #backtoblog { text-align: center; padding: 0; margin: 14px 0 0; text-shadow: none; } .login #nav a, .login #backtoblog a { color: var(--rr-haze); font-size: 13px; text-decoration: none; transition: color .15s ease; } .login #nav a:hover, .login #nav a:focus, .login #backtoblog a:hover, .login #backtoblog a:focus { color: var(--rr-water-brt); text-decoration: underline; } /* --------------------------------------------------- messages and errors --- */ .login .message, .login .notice, .login #login_error { background: var(--rr-stone); border: 1px solid var(--rr-line); border-left: 3px solid var(--rr-water-brt); border-radius: 0 9px 9px 0; color: var(--rr-mist); box-shadow: none; font-size: 13.5px; padding: 11px 14px; margin-bottom: 16px; } .login #login_error { border-left-color: var(--rr-clay); } .login #login_error a, .login .message a { color: var(--rr-water-brt); } /* a small nudge, so a failed attempt is felt as well as read */ @media (prefers-reduced-motion: no-preference) { .login #login_error { animation: rr-nudge .5s ease; } @keyframes rr-nudge { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } } } /* --------------------------------------------------------------- extras --- */ .login .language-switcher { display: none; } /* single language site */ .login .privacy-policy-page-link { margin-top: 18px; } .login .privacy-policy-page-link a { color: var(--rr-haze); font-size: 12px; text-decoration: none; } .login .privacy-policy-page-link a:hover { color: var(--rr-water-brt); text-decoration: underline; } /* the tagline at the very bottom */ .rr-login-footnote { position: relative; z-index: 1; text-align: center; font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif; color: var(--rr-haze); opacity: .7; font-size: 13px; letter-spacing: 0; margin: 26px auto 0; max-width: 396px; } /* Remember Me needs room; WordPress packs it hard against the field above. */ .login .forgetmenot { margin: 14px 0 18px; float: none; display: block; } .login .forgetmenot label { display: inline-flex; align-items: center; gap: 8px; } .login .submit { clear: both; } /* * WordPress sets margin on .login .forgetmenot in its own stylesheet, which * loads after this one, so the bottom margin needs a more specific selector * to survive. #loginform does that without resorting to !important. */ #loginform .forgetmenot, .login form .forgetmenot { margin: 16px 0 20px; } #loginform .submit, .login form .submit { margin-top: 0; padding-top: 0; } @media (max-width: 420px) { #login { max-width: 100%; } #login h1 a, #login .wp-login-logo a { max-width: 268px; height: 56px; } .rr-login-greeting { font-size: 17.5px; } } /* * Reduced motion: the rain goes, rather than freezing. A drop is invisible * except part-way through its own fall, so a stopped field is mostly blank * anyway. This is what the front end does with the hero's rain. */ @media (prefers-reduced-motion: reduce) { .rr-rain-line { display: none; } .wp-core-ui .button-primary:hover { transform: none; } } :root{--rr-login-logo:url("logo.svg")}body.login{position:relative;padding-bottom:64px}.rr-login-footnote{position:absolute;bottom:28px;left:16px;right:16px} @media(max-height:640px){.rr-login-footnote{position:relative;bottom:auto;left:auto;right:auto}body.login{padding-bottom:24px}}