/* ----------------------------------------------------------------
0. FONTS
---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');
/* ----------------------------------------------------------------
1. ROOT / BODY — dark background, warm text
---------------------------------------------------------------- */
html.layout-auth,
html.layout-auth body {
background-color: #0C0B0E;
color: #EDE6DC;
}
html.layout-auth body {
font-family: 'DM Sans', sans-serif;
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html.layout-auth ::selection {
background-color: #D4813A;
color: #0C0B0E;
}
/* ----------------------------------------------------------------
2. PAGE WRAPPER — kill decorative circles, dark bg
---------------------------------------------------------------- */
.auth-page-wrapper {
background-color: #0C0B0E;
}
/* Hide the lemon-green / pool-blue gradient circles */
.auth-fade-circle-wrapper {
display: none;
}
/* ----------------------------------------------------------------
3. AUTH CONTAINER — centered, comfortable width
---------------------------------------------------------------- */
.auth-container {
width: 100%;
max-width: 460px;
margin: auto;
padding: 48px 0;
}
.auth-form-header {
padding: 0 32px;
margin: 0 0 32px 0;
}
/* html.layout-auth prefix beats base `.auth-container .auth-form-header h2` */
html.layout-auth .auth-form-header h2 {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 1.15;
letter-spacing: -0.02em;
color: #EDE6DC;
text-align: center;
}
/* ----------------------------------------------------------------
4. LOGO — swap to marketing-site mark (parchment + amber two-tone)
The legacy SVG at /assets/img/svg/djp_logo_new.svg is #000 + #1E90FF.
We hide it and paint the marketing SVG as a background-image on
the container so we get exact colors (#EDE6DC + #D4813A) without
a monolith HTML change.
---------------------------------------------------------------- */
.auth-logo-container {
display: block;
width: 60px;
height: 71px; /* preserves the marketing SVG's 1000:1185 ratio */
margin: 0 auto 24px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* Hide both legacy ![]()
tags — the container now paints the logo itself */
.auth-logo-container img:first-child,
.auth-logo-container img:nth-child(2) {
display: none;
}
/* ----------------------------------------------------------------
5. MAIN CONTENT AREA
---------------------------------------------------------------- */
.auth-main-content {
min-width: 0;
padding: 0 32px 48px;
}
.auth-main-content form {
max-width: 340px;
margin: 0 auto;
}
/* ----------------------------------------------------------------
6. FORM TEXT — warm secondary text
---------------------------------------------------------------- */
/* html.layout-auth prefix ensures we beat the base Rubik rule on a clean win */
html.layout-auth .auth-main-content .auth-form {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
color: #918A82;
}
html.layout-auth .auth-main-content .auth-form p {
font-family: 'DM Sans', sans-serif;
color: #918A82;
line-height: 1.6;
margin-bottom: 20px;
}
/* ----------------------------------------------------------------
7. INPUT FIELDS — elevated surface, warm borders
Selectors are specificity-matched to beat base auth CSS:
.auth-main-content .auth-form input[type="password"] { color:#747d8c; background:#f1f1f1 }
which would otherwise leak light-gray text on light-gray bg
in the unfocused state.
---------------------------------------------------------------- */
html.layout-auth .auth-main-content .auth-form input[type="text"],
html.layout-auth .auth-main-content .auth-form input[type="password"],
html.layout-auth .auth-main-content .auth-form input[type="email"] {
background-color: #1E1B24;
border: 1px solid #2A2733;
border-radius: 8px;
color: #EDE6DC;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
line-height: 44px;
height: 44px;
padding: 0 16px;
width: 100%;
box-sizing: border-box;
outline: none;
transition: border-color 150ms ease-out;
}
/* Focus — keep parchment text (base CSS tries to turn focused text
dodger-blue via `input:focus { color:#1e90ff }`; we defeat it). */
html.layout-auth .auth-main-content .auth-form input[type="text"]:focus,
html.layout-auth .auth-main-content .auth-form input[type="password"]:focus,
html.layout-auth .auth-main-content .auth-form input[type="email"]:focus {
border-color: #D4813A;
color: #EDE6DC;
background-color: #1E1B24;
caret-color: #D4813A;
}
/* Chrome/Safari autofill — strip the yellow-on-white default */
html.layout-auth .auth-form input:-webkit-autofill,
html.layout-auth .auth-form input:-webkit-autofill:hover,
html.layout-auth .auth-form input:-webkit-autofill:focus,
html.layout-auth .auth-form input:-webkit-autofill:active {
-webkit-text-fill-color: #EDE6DC !important;
-webkit-box-shadow: 0 0 0 1000px #1E1B24 inset !important;
box-shadow: 0 0 0 1000px #1E1B24 inset !important;
caret-color: #D4813A !important;
transition: background-color 600000s 0s, color 600000s 0s;
}
/* Placeholder — secondary text tone (#918A82) for enough contrast
on the dark #1E1B24 input bg. #5A554F was too close to the bg. */
html.layout-auth .auth-main-content .auth-form input[type="text"]::placeholder,
html.layout-auth .auth-main-content .auth-form input[type="password"]::placeholder,
html.layout-auth .auth-main-content .auth-form input[type="email"]::placeholder {
color: #918A82;
opacity: 1;
}
.auth-form .row-input-field {
margin-bottom: 14px;
}
/* ----------------------------------------------------------------
7b. AUTH SUBTITLE / DJ ID PRIMARY / DIVIDER / TAGLINE
New classes added by WI #3426. Best-effort dark-overlay styling
so the redesigned sign-in/sign-up read sensibly under djp10.
---------------------------------------------------------------- */
html.layout-auth .auth-form-header .auth-subtitle {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 400;
color: #918A82;
text-align: center;
margin: 12px auto 0;
max-width: 340px;
line-height: 1.5;
}
html.layout-auth .auth-main-content .auth-djid-primary {
max-width: 340px;
margin: 0 auto 22px;
}
html.layout-auth .auth-main-content .auth-djid-primary .auth-djid-hint {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
font-weight: 400;
color: #918A82;
text-align: center;
margin: 8px 0 0;
line-height: 1.4;
}
html.layout-auth .auth-main-content .auth-divider {
display: flex;
align-items: center;
gap: 16px;
max-width: 340px;
margin: 0 auto 22px;
line-height: 1;
}
html.layout-auth .auth-main-content .auth-divider::before,
html.layout-auth .auth-main-content .auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: #2A2733;
}
html.layout-auth .auth-main-content .auth-divider span {
font-family: 'DM Sans', sans-serif;
font-size: 10.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1.1px;
color: #918A82;
line-height: 1;
white-space: nowrap;
}
/* DJ ID button — re-skin the white --outline variant for the dark overlay */
html.layout-auth .djid-btn--outline {
background: #1E1B24;
color: #EDE6DC;
border: 1px solid #2A2733;
}
html.layout-auth .djid-btn--outline:hover {
background: #26222E;
border-color: #D4813A;
}
html.layout-auth .djid-btn--outline:active {
background: #1A171F;
border-color: #C06E2A;
}
/* ----------------------------------------------------------------
8. BUTTONS — burnt amber accent
---------------------------------------------------------------- */
html.layout-auth .auth-form .djp-btn,
html.layout-auth .auth-form button.djp-btn,
html.layout-auth .auth-form button[type="submit"] {
background-color: #D4813A;
border: 1px solid #D4813A;
border-radius: 8px;
color: #0C0B0E;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 44px;
min-height: 44px;
padding: 0 32px;
width: 100%;
cursor: pointer;
transition: background-color 150ms ease-out, border-color 150ms ease-out;
letter-spacing: 0;
}
html.layout-auth .auth-form .djp-btn:hover,
html.layout-auth .auth-form button.djp-btn:hover,
html.layout-auth .auth-form button[type="submit"]:hover {
background-color: #C06E2A;
border-color: #C06E2A;
}
html.layout-auth .auth-form .djp-btn:disabled,
html.layout-auth .auth-form button.djp-btn:disabled,
html.layout-auth .auth-form button[type="submit"]:disabled {
opacity: 0.4;
cursor: default;
pointer-events: none;
}
/* ----------------------------------------------------------------
9. LINKS — amber accent
---------------------------------------------------------------- */
/* Prefixed to beat base `.auth-main-content .auth-form a { color:#747d8c }` */
html.layout-auth .auth-main-content .auth-form a,
html.layout-auth .auth-main-content .auth-form a.text-underline {
color: #D4813A;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 150ms ease-out;
}
html.layout-auth .auth-main-content .auth-form a:hover,
html.layout-auth .auth-main-content .auth-form a.text-underline:hover {
color: #C06E2A;
}
/* "Forgot password?" row */
html.layout-auth .auth-main-content .auth-form .text-right {
margin-bottom: 20px;
}
html.layout-auth .auth-main-content .auth-form .text-right a {
font-size: 13px;
color: #918A82;
text-decoration: underline;
text-underline-offset: 2px;
}
html.layout-auth .auth-main-content .auth-form .text-right a:hover {
color: #EDE6DC;
}
/* Bottom helper text ("Need a new account?", "Already have an account?") */
html.layout-auth .auth-main-content .auth-form .center {
color: #918A82;
font-size: 13px;
}
html.layout-auth .auth-main-content .auth-form .center a {
color: #D4813A;
}
/* ----------------------------------------------------------------
10. CHECKBOX — dark theme
---------------------------------------------------------------- */
.auth-form .djp-checkbox {
color: #918A82;
font-size: 13px;
line-height: 1.4;
}
.auth-form .djp-checkbox > i {
border-color: #2A2733;
background-color: #1E1B24;
border-radius: 4px;
}
.auth-form .djp-checkbox:hover > i {
border-color: #D4813A;
background-color: #1E1B24;
}
.auth-form .djp-checkbox input:checked ~ i {
border-color: #D4813A;
background-color: #D4813A;
}
.auth-form .djp-checkbox input:checked ~ i:before {
border-color: transparent transparent #0C0B0E #0C0B0E;
}
.auth-form .djp-checkbox:hover {
color: #EDE6DC;
}
.auth-form .djp-checkbox span {
color: #918A82;
}
.auth-form .djp-checkbox span a {
color: #D4813A;
}
/* ----------------------------------------------------------------
11. VALIDATION ERRORS
---------------------------------------------------------------- */
/* Prefixed to beat base `.auth-main-content .auth-form .validation-summary-errors li` */
html.layout-auth .auth-main-content .auth-form .validation-summary-errors li {
color: #C45B4A;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
line-height: 1.4;
}
html.layout-auth .auth-main-content .auth-form .error-red-text {
color: #C45B4A;
}
.validation-message {
background: #1E1B24;
border-color: #C45B4A;
color: #C45B4A;
}
.validation-message:after {
/* Override the white caret fill to match dark bg */
border-bottom-color: #1E1B24 !important;
}
/* ----------------------------------------------------------------
12. CLOUDFLARE TURNSTILE — size + center the widget
Turnstile is already dark-themed via data-theme="dark" in the HTML.
This block flex-centers it, reserves its height to prevent
layout shift on load, and kills the inline
that otherwise
adds awkward vertical space before the submit button.
---------------------------------------------------------------- */
html.layout-auth .auth-form .cf-turnstile {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 16px;
min-height: 65px; /* matches Turnstile's rendered height; prevents CLS */
width: 100%;
max-width: 300px; /* Turnstile renders at 300px wide by default */
}
/* Kill the inline
that the monolith template injects between
the Turnstile widget and the submit button — the margin above
supplies the spacing. */
html.layout-auth .auth-form .cf-turnstile + br {
display: none;
}
/* ----------------------------------------------------------------
13. UTILITY OVERRIDES — spacing classes used in auth forms
---------------------------------------------------------------- */
/* The existing mb-30, mb-15 etc. are fine — just ensure text colors
cascade from the form. No overrides needed. */
/* ----------------------------------------------------------------
14. RESPONSIVE — mobile adjustments
---------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
.auth-container {
width: 100%;
padding: 32px 0;
}
.auth-form-header {
padding: 0 20px;
}
.auth-form-header h2 {
font-size: 24px;
}
.auth-main-content {
padding: 0 20px 32px;
}
.auth-main-content form {
max-width: 100%;
}
}
/* ----------------------------------------------------------------
15. EMAIL VERIFICATION / INFO PAGES
/account/email-verification-needed has no