from outside.
Same .br-auth pattern as forgot_password.liquid for consistency.
========================================================================== */
.br-auth {
background-color: #F5F5F3 !important;
min-height: 70vh !important;
padding: 96px 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-family: 'Inter', sans-serif !important;
}
.br-auth__container {
width: 100% !important;
max-width: 520px !important;
margin: 0 auto !important;
}
.br-auth__card {
background-color: #FFFFFF !important;
border: 1px solid #E8E8E8 !important;
padding: 56px 48px !important;
position: relative !important;
}
/* Crimson accent bar on the top edge of the card */
.br-auth__card::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 4px !important;
background-color: #C41E24 !important;
}
/* --- HEADING (rendered inside the login section) ----------------------- */
.br-auth h1,
.br-auth h2,
.br-auth__card h1,
.br-auth__card h2 {
color: #0A0A0A !important;
font-family: 'Oswald', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 3px !important;
font-size: 32px !important;
line-height: 1.1 !important;
text-align: center !important;
margin: 0 0 12px 0 !important;
padding: 0 !important;
}
/* Crimson divider under the heading */
.br-auth__card > h1::after,
.br-auth__card > h2::after,
.br-auth__card > div > h1::after,
.br-auth__card > div > h2::after,
.br-auth__card section h1::after,
.br-auth__card section h2::after {
content: "" !important;
display: block !important;
width: 60px !important;
height: 4px !important;
background-color: #C41E24 !important;
margin: 20px auto 32px !important;
}
/* --- FORM LABELS ------------------------------------------------------- */
.br-auth label,
.br-auth__card label {
font-family: 'Oswald', sans-serif !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #0A0A0A !important;
margin-bottom: 8px !important;
display: block !important;
}
/* --- INPUTS ------------------------------------------------------------ */
.br-auth input[type="email"],
.br-auth input[type="text"],
.br-auth input[type="password"],
.br-auth__card input[type="email"],
.br-auth__card input[type="text"],
.br-auth__card input[type="password"] {
width: 100% !important;
padding: 16px 18px !important;
border: 1px solid #2C2C2C !important;
border-radius: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
background-color: #FFFFFF !important;
color: #0A0A0A !important;
margin-bottom: 24px !important;
box-shadow: none !important;
transition: border-color 0.2s ease !important;
}
.br-auth input:focus,
.br-auth__card input:focus {
outline: none !important;
border-color: #C41E24 !important;
box-shadow: 0 0 0 1px #C41E24 !important;
}
.br-auth input::placeholder,
.br-auth__card input::placeholder {
color: #6B6B6B !important;
font-family: 'Inter', sans-serif !important;
}
/* --- REMEMBER ME CHECKBOX --------------------------------------------- */
.br-auth input[type="checkbox"],
.br-auth__card input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: #C41E24 !important;
margin-right: 10px !important;
margin-bottom: 0 !important;
vertical-align: middle !important;
cursor: pointer !important;
}
/* The "Remember Me" label next to the checkbox should be inline */
.br-auth label:has(input[type="checkbox"]),
.br-auth__card label:has(input[type="checkbox"]) {
display: flex !important;
align-items: center !important;
margin-bottom: 24px !important;
cursor: pointer !important;
font-size: 12px !important;
letter-spacing: 2px !important;
}
/* Fallback for browsers without :has() โ checkbox + sibling label pattern */
.br-auth__card .checkbox,
.br-auth__card .form-check {
display: flex !important;
align-items: center !important;
margin-bottom: 24px !important;
}
/* --- SUBMIT BUTTON ----------------------------------------------------- */
.br-auth button[type="submit"],
.br-auth input[type="submit"],
.br-auth .btn,
.br-auth__card button[type="submit"],
.br-auth__card input[type="submit"],
.br-auth__card .btn {
width: 100% !important;
padding: 20px 32px !important;
background-color: #C41E24 !important;
color: #FFFFFF !important;
border: 2px solid #C41E24 !important;
border-radius: 0 !important;
font-family: 'Oswald', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 3px !important;
font-size: 14px !important;
cursor: pointer !important;
transition: background-color 0.2s ease, border-color 0.2s ease !important;
margin-top: 8px !important;
text-align: center !important;
display: block !important;
}
.br-auth button[type="submit"]:hover,
.br-auth input[type="submit"]:hover,
.br-auth .btn:hover,
.br-auth__card button[type="submit"]:hover,
.br-auth__card input[type="submit"]:hover,
.br-auth__card .btn:hover {
background-color: #9A1519 !important;
border-color: #9A1519 !important;
color: #FFFFFF !important;
}
/* --- SECONDARY LINKS ("Forgot Password", "Sign Up", etc.) ------------- */
.br-auth a,
.br-auth__card a {
color: #0A0A0A !important;
font-family: 'Oswald', sans-serif !important;
text-transform: uppercase !important;
letter-spacing: 3px !important;
font-size: 12px !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
display: inline-block !important;
margin-top: 32px !important;
padding-bottom: 4px !important;
border-bottom: 2px solid #C41E24 !important;
}
.br-auth a:hover,
.br-auth__card a:hover {
color: #C41E24 !important;
}
/* Center the secondary link block */
.br-auth__card > a:last-child,
.br-auth__card > div:last-child {
text-align: center !important;
display: block !important;
}
.br-auth__card .text-center,
.br-auth__card .login-link,
.br-auth__card .forgot-link {
text-align: center !important;
}
/* --- ERROR MESSAGES ---------------------------------------------------- */
.br-auth .error,
.br-auth .form-error,
.br-auth .field-error,
.br-auth__card .error,
.br-auth__card .form-error {
color: #C41E24 !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
margin-top: -16px !important;
margin-bottom: 16px !important;
}
/* --- MOBILE ------------------------------------------------------------ */
@media (max-width: 640px) {
.br-auth {
padding: 64px 16px !important;
}
.br-auth__card {
padding: 40px 28px !important;
}
.br-auth h1,
.br-auth h2,
.br-auth__card h1,
.br-auth__card h2 {
font-size: 26px !important;
letter-spacing: 2px !important;
}
}