/* ============================================================ Everify login theme Layout: CSS Grid 2-column split, MUI-inspired tokens. Shell strategy: display:contents on every Keycloak / PatternFly wrapper so .evy-login-grid lays out as a direct child of . ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { min-height: 100%; margin: 0; padding: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.6; color: #1e293b; background: #ffffff; } /* ── Neutralise every Keycloak / PatternFly shell wrapper ───── display:contents removes the box from layout while keeping its children as normal flow participants. Support: Chrome 65+, Firefox 37+, Safari 11.1+, Edge 79+ */ .pf-v5-c-login, .pf-v5-c-login__container, .pf-v5-c-login__main, .pf-v5-c-login__main-body, #kc-content, #kc-content-wrapper { display: contents; } /* Hide PF regions Keycloak emits even when empty */ .pf-v5-c-login__header, .pf-v5-c-login__footer, .pf-v5-c-login__main-header, .pf-v5-c-login__main-footer, #kc-header, #kc-header-wrapper, #kc-page-title { display: none !important; } /* ── Full-page 2-column CSS Grid ────────────────────────────── Mirrors MUI xs=12 / md=5+7 breakpoint logic: • xs (<600 px) → single column (stacked) • sm (600–900) → single column • md+ (900 px+) → 5fr left / 7fr right ≈ 42 % / 58 % • lg+ (1200 px+) → 1fr left / 1fr right = 50 % / 50 % • xl+ (1536 px+) → 5fr left / 7fr right (left capped content) ============================================================ */ .evy-login-grid { display: grid; grid-template-columns: 1fr; /* mobile: single col */ min-height: 100vh; width: 100%; } @media (min-width: 900px) { .evy-login-grid { grid-template-columns: 5fr 7fr; /* md: ~42 % / ~58 % */ } } @media (min-width: 1200px) { .evy-login-grid { grid-template-columns: 1fr 1fr; /* lg: true 50/50 */ } } /* ── Left: blue info panel ─────────────────────────────────── */ .evy-login-panel--insights { background: #1a56db; color: #ffffff; display: flex; flex-direction: column; /* padding scales with viewport using clamp() */ padding: clamp(32px, 5vw, 72px) clamp(28px, 5vw, 64px); overflow-y: auto; /* ensure it occupies the full grid row on mobile */ min-height: 0; } /* ── Right: white form panel ───────────────────────────────── */ .evy-login-panel--form { background: #ffffff; display: flex; align-items: center; justify-content: center; padding: clamp(40px, 6vw, 80px) clamp(32px, 6vw, 80px); } /* ── Form column — fills the right panel proportionally ───── */ .evy-login-form-column { width: 100%; /* On large screens the right panel is ~50 vw; cap so form doesn't stretch too wide on 4K displays */ max-width: min(480px, 100%); } /* ── Mobile: stack vertically, reduce padding ─────────────── */ @media (max-width: 899px) { .evy-login-panel--insights { padding: 36px 24px 28px; } .evy-login-panel--form { align-items: flex-start; padding: 40px 24px 48px; } .evy-login-form-column { max-width: 100%; } } /* ============================================================ LEFT PANEL CONTENT ============================================================ */ .evy-insights-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; } .evy-insights-brand-icon { width: 36px; height: 36px; background: rgba(255,255,255,0.2); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .evy-insights-brand-icon svg { width: 20px; height: 20px; } .evy-insights-brand-text { font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; } .evy-login-panel--insights h3 { /* clamp: min 1.375rem → preferred 2.8vw → max 2rem */ font-size: clamp(1.375rem, 2.8vw, 2rem); font-weight: 700; line-height: 1.2; color: #fff; letter-spacing: -0.025em; margin: 0 0 14px; } .evy-insights-lede { font-size: clamp(0.875rem, 1.2vw, 1rem); color: rgba(255,255,255,0.88); line-height: 1.65; margin: 0 0 40px; } .evy-insight-list { display: flex; flex-direction: column; gap: clamp(18px, 2.5vw, 28px); flex: 1; /* push footer to bottom */ } .evy-insight-item { display: flex; gap: 14px; align-items: flex-start; } .evy-insight-icon { width: 36px; height: 36px; background: rgba(255,255,255,0.15); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .evy-insight-icon svg { width: 20px; height: 20px; } .evy-insight-item h4 { font-size: clamp(0.875rem, 1.1vw, 1rem); font-weight: 600; color: #fff; margin: 0 0 4px; line-height: 1.4; } .evy-insight-item p { font-size: clamp(0.8rem, 0.95vw, 0.875rem); color: rgba(255,255,255,0.80); line-height: 1.55; margin: 0; } .evy-insight-footer { margin-top: 40px; font-size: 0.75rem; color: rgba(255,255,255,0.50); } /* ============================================================ RIGHT PANEL — form ============================================================ */ .evy-login-panel-header { margin-bottom: 28px; } .evy-login-panel-header h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 700; color: #0f172a; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px; } .evy-login-panel-header p { font-size: 0.9375rem; color: #64748b; margin: 0; line-height: 1.5; } /* ── Form ──────────────────────────────────────────────────── */ .pf-v5-c-form { display: flex; flex-direction: column; gap: 20px; width: 100%; } .pf-v5-c-form__group { margin: 0 !important; padding: 0 !important; } /* Force labels visible — PatternFly sometimes applies sr-only */ .pf-v5-c-form__label, #kc-form-login .pf-v5-c-form__label { display: block !important; position: static !important; width: auto !important; height: auto !important; margin: 0 0 6px !important; padding: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; } .pf-v5-c-form__label-text { font-size: 0.875rem; font-weight: 600; color: #1a56db; line-height: 1.4; } /* Password row: label + forgot link inline */ .pf-v5-c-form__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .pf-v5-c-form__label-row .pf-v5-c-form__label { margin-bottom: 0 !important; } .evy-forgot-link { font-size: 0.8125rem; font-weight: 400; color: #64748b; text-decoration: none; white-space: nowrap; flex-shrink: 0; } .evy-forgot-link:hover { color: #1a56db; text-decoration: underline; } /* ── Inputs ───────────────────────────────────────────────── */ .pf-v5-c-form-control, input[type="text"], input[type="password"], input[type="email"] { display: block; width: 100%; height: 42px; padding: 0 14px; font-family: inherit; font-size: 0.9375rem; line-height: 1.5; color: #1e293b; background: #f8fafc; border: 1.5px solid #cbd5e1; border-radius: 6px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } .pf-v5-c-form-control:hover, input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover { border-color: #94a3b8; } .pf-v5-c-form-control:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.14); background: #fff; } /* ── Submit button ─────────────────────────────────────────── */ #kc-login, .pf-c-button.pf-m-primary, .pf-v5-c-button.pf-m-primary { display: block; width: 100%; height: 44px; padding: 0 16px; font-family: inherit; font-size: 1rem; font-weight: 600; color: #fff; background: #1a56db; border: none; border-radius: 6px; cursor: pointer; letter-spacing: 0.01em; transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; text-transform: none; box-shadow: 0 1px 3px rgba(26,86,219,0.30), 0 1px 2px rgba(0,0,0,0.06); } #kc-login:hover, .pf-c-button.pf-m-primary:hover, .pf-v5-c-button.pf-m-primary:hover { background: #1649c0; box-shadow: 0 4px 12px rgba(26,86,219,0.35); transform: translateY(-1px); } #kc-login:active, .pf-c-button.pf-m-primary:active { transform: translateY(0); } #kc-login:focus-visible { outline: 2px solid #1a56db; outline-offset: 2px; } /* ── Footer links ──────────────────────────────────────────── */ .evy-login-footer { display: flex; gap: 6px 20px; flex-wrap: wrap; margin-top: 28px; font-size: 0.75rem; } .evy-login-footer a { color: #94a3b8; text-decoration: none; } .evy-login-footer a:hover { color: #1a56db; text-decoration: underline; } a { color: #1a56db; } /* ── Prevent iOS auto-zoom on input focus ──────────────────── */ @media (max-width: 480px) { .pf-v5-c-form-control, input[type="text"], input[type="password"], input[type="email"] { font-size: 16px; height: 46px; } #kc-login, .pf-c-button.pf-m-primary { height: 46px; } } /* ── Reduced motion ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }