/* Peta Core — Client Portal login page. Light by default, follows Filament's dark mode (.dark on ). */ :root { --pl-navy: #0e2344; --pl-navy-2: #0b1d39; --pl-ink: #0f2342; --pl-text: #4a5b72; --pl-muted: #6b7a90; --pl-blue: #2383cf; --pl-blue-dark: #1b6fb2; --pl-tint: #e9f3fb; --pl-line: #dfe7f0; --pl-card: #ffffff; --pl-left: #ffffff; } .dark { --pl-ink: #eef4fb; --pl-text: #b7c6d8; --pl-muted: #8fa2b9; --pl-tint: rgb(35 131 207 / .14); --pl-line: rgb(255 255 255 / .1); --pl-card: #10223f; --pl-left: #0b1a33; } .fi-body:has(.pl-page) { background: var(--pl-navy); } .pl-page { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-family, 'Plus Jakarta Sans'), ui-sans-serif, system-ui, sans-serif; } .pl-page a { text-decoration: none; color: inherit; } .pl-i16 { width: 1rem; height: 1rem; flex-shrink: 0; } .pl-i18 { width: 1.15rem; height: 1.15rem; } /* Header */ .pl-header { background: var(--pl-navy); border-bottom: 1px solid rgb(255 255 255 / .06); } .pl-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; padding: 0 clamp(16px, 6vw, 115px); } .pl-header-brand img { display: block; height: 50px; width: auto; } .pl-header-mail { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: rgb(255 255 255 / .55) !important; transition: color .15s; } .pl-header-mail:hover { color: #fff !important; } /* Main split */ .pl-main { flex: 1; display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); } .pl-info { background: var(--pl-left); display: flex; align-items: center; } .pl-info-inner { width: 100%; max-width: 690px; padding: 40px clamp(16px, 6vw, 115px) 56px; box-sizing: content-box; } .pl-eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem; font-size: .8rem; font-weight: 700; color: var(--pl-blue); letter-spacing: .01em; } .pl-eyebrow-line { width: 18px; height: 2px; border-radius: 2px; background: var(--pl-blue); } .pl-eyebrow-sm { margin-top: 2.1rem; } .pl-title { margin: 0 0 1.1rem; font-size: clamp(1.9rem, 3.1vw, 2.35rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--pl-ink); } .pl-title span { color: var(--pl-blue); } .pl-lead { margin: 0 0 .7rem; font-size: 1rem; font-weight: 600; color: var(--pl-ink); } .pl-text { margin: 0; max-width: 440px; font-size: .85rem; line-height: 1.6; color: var(--pl-text); } .pl-text-tight { max-width: none; } .pl-services { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 1.4rem; max-width: 600px; } .pl-service { display: flex; flex-direction: column; gap: .2rem; } .pl-service strong { margin-top: .75rem; font-size: .8rem; line-height: 1.3; font-weight: 700; color: var(--pl-ink); } .pl-service > span:last-child { font-size: .72rem; line-height: 1.45; color: var(--pl-muted); } .pl-service-icon { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--pl-tint); color: var(--pl-blue); border: 1px solid rgb(35 131 207 / .12); } .pl-contact { margin-top: 2rem; max-width: 600px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.1rem 1.2rem; padding: 1.2rem 1.4rem; border-radius: 12px; background: var(--pl-tint); } .pl-contact-item { display: flex; gap: .7rem; align-items: flex-start; color: var(--pl-blue); } .pl-contact-item > div { display: flex; flex-direction: column; min-width: 0; } .pl-contact-item strong { font-size: .78rem; font-weight: 700; color: var(--pl-ink); overflow-wrap: anywhere; } a.pl-contact-item[href^="mailto"] strong, a.pl-contact-item[href^="tel"] strong { overflow-wrap: normal; white-space: nowrap; } .pl-contact-item span { font-size: .72rem; color: var(--pl-muted); } a.pl-contact-item:hover strong { color: var(--pl-blue); } /* Right side: brand gradient with diagonal light and dot grid */ .pl-auth { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 38px 24px; background: linear-gradient(160deg, #1c5b92 0%, #154a7c 38%, #0f3160 70%, #0c2548 100%); } .pl-auth::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0 32%, rgb(255 255 255 / .06) 32% 58%, transparent 58%); pointer-events: none; } .pl-auth::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1.2px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); pointer-events: none; } .pl-card { position: relative; z-index: 1; width: 100%; max-width: 320px; border-radius: 16px; background: var(--pl-card); box-shadow: 0 24px 60px rgb(3 14 32 / .35), 0 2px 6px rgb(3 14 32 / .15); } .pl-card-body { padding: 44px 26px 26px; display: flex; flex-direction: column; } .pl-card-logo { display: block; width: 96px; height: auto; margin: 0 auto 1.6rem; } .pl-dark-only { display: none; } .dark .pl-dark-only { display: block; } .dark .pl-light-only { display: none; } .pl-card-title { margin: 0; text-align: center; font-size: 1.15rem; font-weight: 800; color: var(--pl-ink); } .pl-card-sub { margin: .55rem auto 1.6rem; max-width: 260px; text-align: center; font-size: .72rem; line-height: 1.6; color: var(--pl-muted); } /* Filament form inside the card */ .pl-card .fi-form { gap: 1.1rem; } .pl-card .fi-fo-component-ctn { gap: 1.1rem; } .pl-card .fi-input-wrp { border-radius: 8px; box-shadow: none; --tw-ring-color: var(--pl-line); } .pl-card .fi-input-wrp-prefix { padding-inline: .85rem; border-inline-end: 1px solid var(--pl-line); margin-inline-end: 0; } .pl-card .fi-input-wrp-prefix .fi-input-wrp-icon { color: #8a97a8; } .pl-card .fi-input { padding-block: .72rem; font-size: .82rem; } .pl-card .fi-input::placeholder { color: #8a97a8; } .pl-card .fi-fo-checkbox-list-option-label, .pl-card .fi-fo-field-wrp label { font-size: .85rem; } .pl-card .fi-form-actions { margin-top: .35rem; } .pl-card .fi-form-actions .fi-btn { width: 100%; min-height: 2.6rem; border-radius: 7px; background: var(--pl-blue) !important; font-size: .82rem; box-shadow: 0 6px 14px rgb(35 131 207 / .28); } .pl-card .fi-form-actions .fi-btn:hover { background: var(--pl-blue-dark) !important; } .pl-card .fi-fo-field-wrp-error-message { font-size: .75rem; } .pl-help-sep { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 .7rem; font-size: .68rem; color: var(--pl-muted); } .pl-help-sep::before, .pl-help-sep::after { content: ""; flex: 1; height: 1px; background: var(--pl-line); } .pl-help { display: flex; align-items: center; justify-content: center; gap: .7rem; padding: .35rem; border-radius: 10px; } .pl-help:hover { background: var(--pl-tint); } .pl-help-icon { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--pl-tint); color: var(--pl-blue); } .pl-help > span:last-child { display: flex; flex-direction: column; } .pl-help strong { font-size: .75rem; font-weight: 700; color: var(--pl-ink); } .pl-help strong + span { font-size: .68rem; color: var(--pl-muted); } /* Footer */ .pl-footer { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 14px 16px 16px; background: var(--pl-navy); } .pl-footer img { display: block; width: 26px; height: 26px; } .pl-footer p { margin: 0; font-size: .7rem; color: rgb(255 255 255 / .7); } .pl-footer p span { color: #5aa9e6; } /* Tablet & phone: login card first, information below */ @media (max-width: 1023px) { .pl-main { grid-template-columns: 1fr; } .pl-auth { order: -1; padding: 36px 16px 44px; } .pl-info-inner { max-width: none; padding: 36px 16px 44px; box-sizing: border-box; } .pl-services { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } .pl-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } } @media (max-width: 480px) { .pl-header-mail span { display: none; } .pl-contact { grid-template-columns: 1fr; } .pl-card { max-width: 360px; } }