/* * Epic BR — CSPify LIGHT sign-in styling for the platform Auth (/auth) + control-plane login/logout. * Light-palette sibling of cspify-auth.css: same selectors + same blue→green gradient brand accent and * logo treatment, on a light surface with dark text. Served as an external file (CSP style-src 'self'). * Selected as a separate theme (365.OrchardCore.Theme.CSPify.Light) — toggle vs the dark CSPify theme * in /Admin/Themes. */ /* Full-bleed light page: TheAdmin's login layout paints and caps content width via .auth-wrapper, so the gradient must live on to reach the viewport edges (mirrors the dark theme). */ html { min-height: 100%; } body { background: radial-gradient(1100px 560px at 50% -8%, #eaf2ff 0%, #f3f7fd 58%, #ffffff 100%) #f3f7fd !important; background-attachment: fixed !important; } .pc-auth-wrap { min-height: 78vh; display: flex; align-items: center; justify-content: center; padding: 32px 14px; background: transparent; /* gradient lives on for full-bleed */ } .pc-auth-card { width: 100%; max-width: 460px; background: #ffffff; border: 1px solid #dce4f1; border-radius: 14px; box-shadow: 0 18px 50px rgba(31, 45, 80, .12); padding: 32px 30px 26px; color: #1c2433; } .pc-auth-brand { text-align: center; margin-bottom: 16px; } .pc-auth-brand img { /* CSPify mark (630×580) — preserve aspect ratio; subtle glow. */ height: 64px; width: auto; max-width: 220px; object-fit: contain; display: inline-block; filter: drop-shadow(0 4px 16px rgba(63, 201, 244, .22)); } .pc-auth-title { font: 600 22px/1.3 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: #0f1730; text-align: center; margin: 14px 0 2px; } .pc-auth-sub { font: 400 13px/1.5 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: #5b6781; text-align: center; margin-bottom: 20px; } /* Local-login shape ships Bootstrap markup; theme it light. */ .pc-auth-card label { font-weight: 600; color: #2b3550; font-size: 13px; margin-bottom: 4px; } .pc-auth-card .form-control { background: #f7f9fc; border: 1px solid #cdd7ea; color: #1c2433; border-radius: 8px; } .pc-auth-card .form-control::placeholder { color: #9aa6bf; } .pc-auth-card .form-control:focus { background: #ffffff; border-color: #3fc9f4; box-shadow: 0 0 0 .2rem rgba(63, 201, 244, .25); color: #0f1730; } /* Keep browser-autofilled inputs on the light surface (autofill otherwise forces a yellow background). */ .pc-auth-card .form-control:-webkit-autofill, .pc-auth-card .form-control:-webkit-autofill:hover, .pc-auth-card .form-control:-webkit-autofill:focus { -webkit-text-fill-color: #1c2433; -webkit-box-shadow: 0 0 0 1000px #f7f9fc inset; caret-color: #1c2433; transition: background-color 9999s ease-in-out 0s; } .pc-auth-card .form-check-label { color: #2b3550; } /* Password show/hide toggle (input-group button) */ .pc-auth-card .input-group-text, .pc-auth-card .btn-outline-secondary { background: #eef2f9; border: 1px solid #cdd7ea; color: #2b3550; border-radius: 8px; } .pc-auth-card .btn-outline-secondary:hover { background: #e2e9f5; border-color: #3fc9f4; color: #0f1730; } /* Primary "Log in" button rendered by the local-login shape → blue→green gradient (same brand accent). */ .pc-auth-card button[type="submit"].btn-primary { background: linear-gradient(135deg, #3fc9f4 0%, #46d39a 100%); border: none; color: #062033; font-weight: 700; border-radius: 8px; } .pc-auth-card button[type="submit"].btn-primary:hover, .pc-auth-card button[type="submit"].btn-primary:focus { filter: brightness(1.04); color: #04161f; } .pc-auth-divider { display: flex; align-items: center; gap: 10px; color: #8a93a8; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 20px 0; } .pc-auth-divider::before, .pc-auth-divider::after { content: ""; flex: 1; height: 1px; background: #dce3ef; } /* Secondary external-provider button → outlined on light. */ .pc-ext-btn { background: transparent; border: 1px solid #c2cce0; color: #2b3550; font-weight: 600; border-radius: 8px; } .pc-ext-btn:hover, .pc-ext-btn:focus { background: #f0f5fc; border-color: #3fc9f4; color: #0f1730; } .pc-auth-foot { text-align: center; margin-top: 18px; font-size: 11.5px; color: #8a93a8; }