/* ========================================================================== CORWRITERS - sign in / sign up / password pages (v2) v2: the form panel is now always light, even if a visitor's account uses the old dark theme, so text can never end up dark-on-dark. Load this LAST in the of your auth layout so it wins over the old theme. It targets standard form elements (inputs, buttons, labels, links), so it does not depend on your theme's class names. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700;800&display=swap"); :root { --cw-ink: #070a17; --cw-text: #0c1222; --cw-muted: #56627a; --cw-line: #e1e7f0; --cw-blue: #007bff; --cw-blue-strong: #0b62d9; --cw-cyan: #38d6ff; --cw-font-display: 'Sora', 'Poppins', system-ui, sans-serif; --cw-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } body { font-family: var(--cw-font-body); color: var(--cw-text); background-color: #fff; -webkit-font-smoothing: antialiased; } /* Headings */ body h1, body h2, body h3, body h4 { font-family: var(--cw-font-display); color: var(--cw-text); letter-spacing: -0.03em; line-height: 1.15; } body h3 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; } /* Labels and helper text */ body label { font-size: 13px; font-weight: 600; color: var(--cw-text); } /* Text inputs */ body input[type="text"], body input[type="email"], body input[type="password"], body input[type="tel"], body input[type="number"], body input[type="url"], body select, body textarea { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 16px; font: 400 15px/1.4 var(--cw-font-body); color: var(--cw-text); background-color: #fff; border: 1px solid var(--cw-line); border-radius: 12px; box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body textarea { padding: 12px 16px; } body input:focus, body select:focus, body textarea:focus { outline: none; border-color: var(--cw-blue); box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.14); } body input::placeholder, body textarea::placeholder { color: #8791a5; } /* Checkbox */ body input[type="checkbox"], body input[type="radio"] { accent-color: var(--cw-blue-strong); } /* Primary button: the form's submit */ body button[type="submit"], body input[type="submit"] { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 0 24px; font: 600 15px/1 var(--cw-font-body); letter-spacing: -0.005em; color: #fff; background: var(--cw-blue-strong); background-image: none; border: 1px solid transparent; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -8px rgba(0, 123, 255, 0.6); cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } body button[type="submit"]:hover:not(:disabled), body input[type="submit"]:hover:not(:disabled) { color: #fff; background: #0d70f2; transform: translateY(-1px); } body button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; } /* "Sign in with Google" (and other social buttons) */ body a[href*="auth/redirect"] { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 24px; font: 600 15px/1 var(--cw-font-body); color: var(--cw-text); background: #fff; border: 1px solid var(--cw-line); border-radius: 999px; box-shadow: none; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; } body a[href*="auth/redirect"]:hover { color: var(--cw-blue-strong); border-color: var(--cw-blue-strong); background: #fff; } /* Links */ body a:not([href*="auth/redirect"]):not(.btn) { color: var(--cw-blue-strong); font-weight: 500; text-decoration: none; } body a:not([href*="auth/redirect"]):not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; } /* Keyboard focus */ body a:focus-visible, body button:focus-visible { outline: 2px solid var(--cw-blue); outline-offset: 3px; } /* Validation and alerts */ body .invalid-feedback, body .text-danger { font-size: 13px; } body .is-invalid { border-color: #e5484d; } body .alert { border-radius: 12px; font-size: 14px; } /* Side image: keep it filling its column without stretching */ body img[src*="backgrounds/login"], body img[src*="backgrounds/register"] { object-fit: cover; } @media (prefers-reduced-motion: reduce) { body button[type="submit"], body input, body a { transition-duration: 0.01ms !important; } } /* ========================================================================== v2: ALWAYS-LIGHT FORM PANEL The old theme has a dark mode that recolors the panel. Every surface and its text color are set together here, so they can never clash. ========================================================================== */html { color-scheme: light; }html body, html body .container-fluid, html body .login-background, html body #login-responsive, html body #login-responsive .card-body { background-color: #ffffff !important; color: var(--cw-text) !important; }html body h1, html body #login-responsive h1, html body .login-background h1, html body h2, html body #login-responsive h2, html body .login-background h2, html body h3, html body #login-responsive h3, html body .login-background h3, html body h4, html body #login-responsive h4, html body .login-background h4, html body h5, html body #login-responsive h5, html body .login-background h5, html body h6, html body #login-responsive h6, html body .login-background h6, html body label, html body #login-responsive label, html body .login-background label, html body .login-title, html body #login-responsive .login-title, html body .login-background .login-title { color: var(--cw-text) !important; }html body .login-title .text-info, html body #login-responsive .login-title .text-info, html body .login-background .login-title .text-info, html body .login-title .text-info a, html body #login-responsive .login-title .text-info a, html body .login-background .login-title .text-info a, html body .text-info, html body #login-responsive .text-info, html body .login-background .text-info { color: var(--cw-blue-strong) !important; }html body .text-muted, html body #login-responsive .text-muted, html body .login-background .text-muted, html body .fs-10.text-muted, html body #login-responsive .fs-10.text-muted, html body .login-background .fs-10.text-muted, html body small, html body #login-responsive small, html body .login-background small { color: var(--cw-muted) !important; } /* form fields */html body .form-control, html body #login-responsive .form-control, html body .login-background .form-control, html body input[type="text"], html body #login-responsive input[type="text"], html body .login-background input[type="text"], html body input[type="email"], html body #login-responsive input[type="email"], html body .login-background input[type="email"], html body input[type="password"], html body #login-responsive input[type="password"], html body .login-background input[type="password"], html body input[type="tel"], html body #login-responsive input[type="tel"], html body .login-background input[type="tel"], html body select, html body #login-responsive select, html body .login-background select, html body textarea, html body #login-responsive textarea, html body .login-background textarea { background-color: #ffffff !important; color: var(--cw-text) !important; border: 1px solid var(--cw-line) !important; border-radius: 12px !important; box-shadow: none !important; }html body .form-control:focus, html body #login-responsive .form-control:focus, html body .login-background .form-control:focus, html body input:focus, html body #login-responsive input:focus, html body .login-background input:focus, html body select:focus, html body #login-responsive select:focus, html body .login-background select:focus, html body textarea:focus, html body #login-responsive textarea:focus, html body .login-background textarea:focus { border-color: var(--cw-blue) !important; box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.14) !important; }html body .form-control::placeholder, html body #login-responsive .form-control::placeholder, html body .login-background .form-control::placeholder, html body input::placeholder, html body #login-responsive input::placeholder, html body .login-background input::placeholder { color: #8791a5 !important; opacity: 1; }html body input:-webkit-autofill, html body #login-responsive input:-webkit-autofill, html body .login-background input:-webkit-autofill, html body input:-webkit-autofill:focus, html body #login-responsive input:-webkit-autofill:focus, html body .login-background input:-webkit-autofill:focus { -webkit-text-fill-color: var(--cw-text); -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; } /* main buttons */html body .login-main-button, html body #login-responsive .login-main-button, html body .login-background .login-main-button, html body button[type="submit"], html body #login-responsive button[type="submit"], html body .login-background button[type="submit"], html body input[type="submit"], html body #login-responsive input[type="submit"], html body .login-background input[type="submit"] { color: #ffffff !important; background: var(--cw-blue-strong) !important; background-image: none !important; border: 1px solid transparent !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -8px rgba(0, 123, 255, 0.6) !important; }html body .login-main-button:hover, html body #login-responsive .login-main-button:hover, html body .login-background .login-main-button:hover, html body button[type="submit"]:hover:not(:disabled), html body #login-responsive button[type="submit"]:hover:not(:disabled), html body .login-background button[type="submit"]:hover:not(:disabled) { background: #0d70f2 !important; } /* Google / social sign-in buttons and the "or" divider */ html body .social-login-button, html body a[href*="auth/redirect"] { color: var(--cw-text) !important; background: #ffffff !important; border: 1px solid var(--cw-line) !important; border-radius: 999px !important; box-shadow: none !important; } html body .social-login-button:hover, html body a[href*="auth/redirect"]:hover { color: var(--cw-blue-strong) !important; border-color: var(--cw-blue-strong) !important; }html body .divider .divider-text, html body #login-responsive .divider .divider-text, html body .login-background .divider .divider-text { color: var(--cw-muted) !important; background: #ffffff !important; }html body .divider, html body #login-responsive .divider, html body .login-background .divider { border-color: var(--cw-line) !important; } /* links */ html body #login-responsive a:not(.social-login-button):not([href*="auth/redirect"]):not(.btn) { color: var(--cw-blue-strong) !important; } /* messages */html body .alert-login, html body #login-responsive .alert-login, html body .login-background .alert-login { border-radius: 12px; font-size: 14px; }html body .invalid-feedback, html body #login-responsive .invalid-feedback, html body .login-background .invalid-feedback, html body .text-danger, html body #login-responsive .text-danger, html body .login-background .text-danger { color: #c5282d !important; font-size: 13px; } /* checkboxes and the country picker on the register page */html body input[type="checkbox"], html body #login-responsive input[type="checkbox"], html body .login-background input[type="checkbox"], html body input[type="radio"], html body #login-responsive input[type="radio"], html body .login-background input[type="radio"] { accent-color: var(--cw-blue-strong); }html body .form-check-label, html body #login-responsive .form-check-label, html body .login-background .form-check-label, html body .custom-control-label, html body #login-responsive .custom-control-label, html body .login-background .custom-control-label, html body .custom-switch-description, html body #login-responsive .custom-switch-description, html body .login-background .custom-switch-description { color: var(--cw-text) !important; }html body .awselect .front_face, html body #login-responsive .awselect .front_face, html body .login-background .awselect .front_face, html body .awselect .front_face .front_face_text, html body #login-responsive .awselect .front_face .front_face_text, html body .login-background .awselect .front_face .front_face_text { color: var(--cw-text) !important; background-color: #ffffff !important; border-color: var(--cw-line) !important; }html body .awselect .front_face, html body #login-responsive .awselect .front_face, html body .login-background .awselect .front_face { border: 1px solid var(--cw-line) !important; border-radius: 12px !important; }html body .awselect .dropdown, html body #login-responsive .awselect .dropdown, html body .login-background .awselect .dropdown { color: var(--cw-text) !important; background: #ffffff !important; } /* the right-hand image always fills its half without stretching */html body .login-bg img, html body #login-responsive .login-bg img, html body .login-background .login-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }