/* =================================================================== ACCOUNT PAGES - sign in, sign up, password reset ------------------------------------------------------------------- Five templates share this file: login, signup, password_reset, password_reset_confirm and password_reset_complete. The filename is historic - what used to live here was a "Japanese neo-brutalist" treatment, and none of it survived the rewrite: - a near-black canvas under a plum gradient, with diagonal stripes scrolling across it - a card in a 4px black outline with an 8px hard offset shadow, fighting the 26px corner brand-radius.css puts on it, so the plum header poked out past the card's own rounded top - the field labels as bordered pink chips - a label that looks like a button it is not - a 5rem avatar bobbing up and down on a loop, and a title with a pink offset text-shadow - white text on light rose for the primary button: 2.6:1, which fails WCAG on the one control the page exists for What replaces it is the language the rest of the site now uses: white card, warm hairlines, one soft shadow, a blush header band, a plum pill for the action, flat fills, no gradients. The pages stay chrome-free on purpose - no navbar, no footer, one task on screen - but the canvas is light now and the card carries the brand rather than a dark room carrying it. =================================================================== */ :root { --auth-ink: #4a2231; --auth-plum: #5e3040; --auth-rose: #c9557a; --auth-body: #5c4550; --auth-muted: #8d7a82; --auth-line: #ece4e7; --auth-line-strong: #ddcdd4; --auth-tint: #fdf4f7; --auth-tint-line: #f3dbe3; --auth-canvas: #f7f1f4; --auth-shadow: 0 4px 24px rgba(94, 48, 64, 0.07); } /* ------------------------------------------------------------------- PAGE SHELL navbar.css sets `body { padding-top: var(--nav-total) !important }` and loads after this file. :has() carries the specificity of its argument, so body:has(.jp-login-wrapper) is 0,1,1 against that rule's 0,0,1 and wins on specificity rather than order. ------------------------------------------------------------------- */ body:has(.jp-login-wrapper) { padding-top: 0 !important; background-color: var(--auth-canvas) !important; } body:has(.jp-login-wrapper) .main-container { padding-top: 0 !important; margin-top: 0 !important; background-color: transparent !important; } body:has(.jp-login-wrapper) .navbar, body:has(.jp-login-wrapper) .footer, body:has(.jp-login-wrapper) .currency-selector-fixed { display: none !important; } /* The canvas is painted on , so the wrapper no longer needs the `width:100vw; margin-left:calc(-50vw + 50%)` break-out it used to carry. That hack measures 100vw including the scrollbar, which is a horizontal scrollbar waiting to happen on any page tall enough to need a vertical one. */ .jp-login-wrapper { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 1.5rem 0 3rem; } .jp-login-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; } /* ------------------------------------------------------------------- BACK LINK Was a fixed white pill in a 3px black outline that slid 5px sideways on hover. It is a way out, not an action: hairline, quiet, and it drops into the flow above the card on a phone rather than sitting on top of it. ------------------------------------------------------------------- */ .jp-back-button { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 1rem; padding: 0.55rem 1.1rem; background: #fff; color: var(--auth-plum); border: 1px solid var(--auth-line-strong); border-radius: 999px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .jp-back-button:hover { background: var(--auth-tint); border-color: var(--auth-rose); color: var(--auth-rose); } .jp-back-button i { font-size: 0.95rem; } /* ------------------------------------------------------------------- CARD ------------------------------------------------------------------- */ /* 600px is a wide measure for four short fields. brand-radius.css puts the 26px corner on this element; overflow:hidden is what makes the header band actually follow it instead of squaring off the top. */ .jp-login-card { background: #fff; border: 1px solid var(--auth-line); box-shadow: var(--auth-shadow); overflow: hidden; max-width: 460px; width: 100%; position: relative; animation: authRise 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes authRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Header band. Blush rather than the old near-black block, so the card reads as one object instead of a dark lid on a white box. */ .jp-card-header { background: var(--auth-tint); border-bottom: 1px solid var(--auth-tint-line); padding: 1.85rem 2.25rem 1.6rem; text-align: center; } .jp-title { font-family: var(--font-display, 'Fraunces', Georgia, serif); font-size: 1.7rem; font-weight: 700; color: var(--auth-ink); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 0.4rem 0; text-shadow: none; } .jp-subtitle { color: var(--auth-body); font-size: 0.92rem; line-height: 1.5; margin: 0; font-weight: 400; } .jp-card-body { padding: 2rem 2.25rem 2.25rem; } /* ------------------------------------------------------------------- ALERTS ------------------------------------------------------------------- */ .jp-alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; margin-bottom: 1.25rem; border: 1px solid; border-left-width: 3px; border-radius: 12px; font-size: 0.9rem; font-weight: 500; line-height: 1.5; } .jp-alert ul { margin: 0; padding-left: 1.1rem; } .jp-alert-error { background: #fdf4f7; border-color: var(--auth-tint-line); border-left-color: #b3325a; color: #7d2340; } .jp-alert-success { background: #f1f8f3; border-color: #d3e7d9; border-left-color: #2f7d4f; color: #1c5c39; } .jp-alert-warning { background: #fdf6ec; border-color: #f0e0c6; border-left-color: #b3801f; color: #7a5512; } .jp-alert-info { background: var(--auth-tint); border-color: var(--auth-tint-line); border-left-color: var(--auth-rose); color: var(--auth-ink); } .jp-alert-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.5; } .jp-alert-error .jp-alert-icon { color: #b3325a; } .jp-alert-success .jp-alert-icon { color: #2f7d4f; } .jp-alert-warning .jp-alert-icon { color: #b3801f; } .jp-alert-info .jp-alert-icon { color: var(--auth-rose); } .jp-alert-content { flex: 1; min-width: 0; } .jp-alert-close { background: none; border: none; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: 0.55; transition: opacity 0.2s ease; padding: 0; width: 20px; height: 20px; flex-shrink: 0; } .jp-alert-close:hover { opacity: 1; } /* ------------------------------------------------------------------- FORM ------------------------------------------------------------------- */ .jp-form-group { margin-bottom: 1.2rem; } /* Was a bordered pink chip, which is the shape this page uses for a button. A label is a label: small, quiet, above its field. */ .jp-form-label { display: flex; align-items: center; gap: 0.4rem; background: none; color: var(--auth-muted); padding: 0; border: none; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 0.45rem; box-shadow: none; } .jp-form-label i { font-size: 0.8rem; color: var(--auth-rose); } .jp-form-input { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--auth-line-strong); background: #fff; color: var(--auth-ink); font-family: inherit; font-size: 0.95rem; font-weight: 500; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none; } .jp-form-input:hover { border-color: var(--auth-muted); } .jp-form-input:focus { border-color: var(--auth-rose); box-shadow: 0 0 0 3px rgba(201, 85, 122, 0.15); } .jp-form-input::placeholder { color: #b9a8b0; font-weight: 400; } .jp-error-message { color: #b3325a; font-size: 0.8rem; font-weight: 500; margin-top: 0.4rem; display: flex; align-items: center; gap: 0.35rem; } .jp-error-message i { font-size: 0.85rem; } .jp-help-text { display: block; /* #888 on white is 3.54:1 - too light for 12px help text */ color: var(--auth-muted); font-size: 0.78rem; margin-top: 0.4rem; line-height: 1.5; } /* Remember me / forgot password ------------------------------------ */ .jp-form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem; } .jp-checkbox { display: flex; align-items: flex-start; gap: 0.55rem; } .jp-checkbox input[type="checkbox"] { width: 16px; height: 16px; margin-top: 0.15rem; border: 1px solid var(--auth-line-strong); border-radius: 4px; cursor: pointer; accent-color: var(--auth-rose); flex-shrink: 0; } .jp-checkbox label { color: var(--auth-body); font-weight: 400; font-size: 0.875rem; line-height: 1.5; cursor: pointer; margin: 0; } .jp-link { /* light rose on the white card is 2.58:1 - use the deeper rose */ color: var(--auth-rose); font-weight: 500; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.2s ease; } .jp-link:hover { color: var(--auth-ink); } /* ------------------------------------------------------------------- PRIMARY ACTION Named for the login page it started on; it is the submit button on all five templates, and a link styled as one on the reset-complete page, so it has to work as both. The fill is plum, not the brand rose: white on #e8829f measures 2.6:1, and this is the one control every one of these pages exists to get pressed. brand-radius.css supplies the pill. ------------------------------------------------------------------- */ .jp-btn-login { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.5rem; background: var(--auth-plum); color: #fff; border: none; font-family: inherit; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, transform 0.12s ease; box-shadow: none; } .jp-btn-login:hover { background: var(--auth-ink); color: #fff; transform: none; } .jp-btn-login:active { transform: translateY(1px); } /* The old button ran a white gradient sweep across itself on hover via a ::before. Nothing to draw now. */ .jp-btn-login::before { content: none; } /* ------------------------------------------------------------------- DIVIDER AND FOOTER LINK ------------------------------------------------------------------- */ .jp-divider { display: flex; align-items: center; gap: 0.9rem; margin: 1.5rem 0 1.25rem; } .jp-divider::before, .jp-divider::after { content: ''; flex: 1; height: 1px; background: var(--auth-line); } .jp-divider span { font-weight: 500; font-size: 0.78rem; color: var(--auth-muted); text-transform: lowercase; letter-spacing: 0.02em; } /* ------------------------------------------------------------------- CONTINUE WITH GOOGLE A secondary route to the same place, so it is a secondary control: white, hairline, plum label. Filling it - in Google's blue or in the brand plum - would put two equally loud buttons on a card that wants one obvious next step. The mark is inlined as a data URI. The page's CSP allows https: image sources, so a remote logo would load, but it would also mean every sign-in screen waiting on a third-party host before it looks right. ------------------------------------------------------------------- */ .jp-social-form { margin: 0; } .jp-btn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.85rem 1.5rem; background: #fff; color: var(--auth-ink); border: 1px solid var(--auth-line-strong); border-radius: 999px; font-family: inherit; font-size: 0.92rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .jp-btn-google:hover { background: var(--auth-canvas); border-color: var(--auth-muted); color: var(--auth-ink); } .jp-btn-google:active { transform: translateY(1px); } .jp-btn-google__mark { width: 18px; height: 18px; flex-shrink: 0; display: block; } /* Was a grey bordered box round one sentence - a panel for a footnote. It follows the Google button now, so it takes a rule to sit under. */ .jp-signup { text-align: center; margin-top: 1.35rem; padding-top: 1.25rem; background: none; border: none; border-top: 1px solid var(--auth-line); } .jp-signup-text { color: var(--auth-body); font-weight: 400; margin: 0; font-size: 0.9rem; } .jp-signup-link { color: var(--auth-rose); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.2s ease; } .jp-signup-link:hover { color: var(--auth-ink); } /* ------------------------------------------------------------------- RESPONSIVE ------------------------------------------------------------------- */ @media (max-width: 575.98px) { .jp-login-wrapper { padding: 1rem 0 2rem; } .jp-login-container { padding: 0.75rem; align-items: flex-start; } .jp-back-button { margin-left: 0.75rem; padding: 0.5rem 0.95rem; font-size: 0.83rem; } .jp-card-header { padding: 1.5rem 1.25rem 1.35rem; } .jp-title { font-size: 1.4rem; } .jp-subtitle { font-size: 0.875rem; } .jp-card-body { padding: 1.5rem 1.25rem 1.75rem; } .jp-form-options { align-items: flex-start; } } /* A card that slides in is fine; a card that slides in when you have asked your system not to animate is not. */ @media (prefers-reduced-motion: reduce) { .jp-login-card { animation: none; } }