/* ===================================================================== * eService theme — branch: sinble * --------------------------------------------------------------------- * Per-branch theme stylesheet. File name follows the convention * eservice_.css and is referenced from _theme-head.jspf * with the COMPANY_KEY placeholder, so each WebLogic instance * (= each branch) loads its own theme without JSP edits. * * Shared styles for auth-flow / notice pages: * - Full-screen cyan->purple gradient hero * - Two-column layout (brand pane | glass card) * - Frosted-glass content card * - Underline-style inputs, pill button * * IMPORTANT — DO NOT NEST .g-recaptcha INSIDE .glass-card. * .glass-card uses backdrop-filter, which creates a new containing * block for position:fixed descendants. Google's reCAPTCHA badge * would be trapped inside the card instead of the viewport. * Place
at root (see * _theme-scripts.jspf). * ===================================================================== */ html, body { height: 100%; margin: 0; } body { font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: #fff; background: #4FC3DD; } /* ---------- Hero ---------- */ .login-hero { position: relative; min-height: 100vh; background: linear-gradient(135deg, #4FC3DD 0%, #6E8BE0 55%, #8F7BD9 100%); overflow: hidden; display: flex; flex-direction: column; } /* Decorative blobs (top-left) */ .bg-blobs { position: absolute; top: -120px; left: -120px; width: 480px; height: 480px; background: radial-gradient(circle at 30% 30%, rgba(120, 220, 230, 0.55) 0, rgba(120, 220, 230, 0) 55%), radial-gradient(circle at 60% 70%, rgba(80, 170, 220, 0.45) 0, rgba(80, 170, 220, 0) 60%), radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.25) 0, rgba(255, 255, 255, 0) 50%); filter: blur(2px); pointer-events: none; } /* Decorative dots (bottom-right) */ .bg-dots { position: absolute; right: 40px; bottom: 80px; width: 120px; height: 80px; background-image: radial-gradient(rgba(255,255,255,0.55) 1.5px, transparent 1.5px); background-size: 12px 12px; opacity: 0.6; pointer-events: none; } /* ---------- Two-column grid ---------- */ .hero-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; gap: 40px; padding: 40px 60px; position: relative; z-index: 1; } /* Single-column layout for pages that don't show the brand pane (e.g. notice/info pages where the card is centered). */ .hero-grid.single { grid-template-columns: 1fr; } /* ---------- LEFT: brand pane ---------- */ .brand-pane { text-align: center; max-width: 480px; } .brand-logo { max-width: 460px; width: 100%; height: auto; display: block; margin: 0 auto 18px; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.15)); } .brand-tagline { margin: 0; font-size: 18px; font-weight: 300; letter-spacing: 4px; color: rgba(255,255,255,0.92); } /* ---------- RIGHT: glass card ---------- */ .login-pane { width: 100%; display: flex; justify-content: center; } .glass-card { width: 100%; max-width: 420px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 18px; padding: 44px 38px 56px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); color: #fff; } .glass-card.wide { max-width: 560px; } /* Card title */ .welcome { margin: 0 0 30px 0; font-size: 42px; font-weight: 300; letter-spacing: 1.5px; text-align: center; color: #fff; } .card-subtitle { margin: 0 0 20px 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); text-align: center; } /* ---------- Underline-style inputs ---------- */ .field { display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.55); margin-bottom: 22px; padding: 6px 2px; } .field:focus-within { border-bottom-color: #fff; } .field-icon { width: 22px; height: 22px; margin-right: 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.7); color: rgba(255,255,255,0.9); font-size: 12px; flex: 0 0 auto; } .field input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-size: 15px; padding: 8px 4px; } .field input::placeholder { color: rgba(255,255,255,0.75); } .field input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px transparent inset; transition: background-color 9999s ease-out 0s; } /* ---------- Buttons ---------- */ .btn-pill { display: block; width: 60%; margin: 28px auto 0; padding: 12px 0; border: 1px solid rgba(255,255,255,0.6); border-radius: 999px; background: rgba(255,255,255,0.18); color: #fff; font-size: 15px; letter-spacing: 2px; cursor: pointer; text-align: center; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .btn-pill:hover, .btn-pill:focus { background: rgba(255,255,255,0.85); color: #5a6fb8; outline: none; text-decoration: none; } .btn-pill.secondary { background: transparent; border-color: rgba(255,255,255,0.45); color: rgba(255,255,255,0.85); } .btn-pill.secondary:hover, .btn-pill.secondary:focus { background: rgba(255,255,255,0.18); color: #fff; } /* Multi-button row inside a card */ .btn-row { display: flex; gap: 14px; justify-content: center; margin-top: 28px; } .btn-row .btn-pill { margin: 0; width: auto; min-width: 140px; padding: 12px 22px; } /* ---------- Links ---------- */ .forgot-link, .card-link { display: block; text-align: center; margin-top: 18px; margin-bottom: 8px; font-size: 13px; color: rgba(255,255,255,0.85); text-decoration: none; } .forgot-link:hover, .card-link:hover { color: #fff; text-decoration: underline; } /* ---------- Alerts inside the card ---------- */ .login-alert { background: rgba(255, 90, 90, 0.18); border: 1px solid rgba(255, 120, 120, 0.55); color: #fff; border-radius: 8px; padding: 10px 14px; margin-bottom: 18px; font-size: 14px; } .login-alert.success { background: rgba(90, 200, 130, 0.20); border-color: rgba(160, 230, 180, 0.55); } .login-alert.warning { background: rgba(255, 200, 80, 0.20); border-color: rgba(255, 220, 130, 0.55); } .login-alert .glyphicon { margin-right: 6px; } /* Emphasis text inside the card (e.g. email address in reactivate) */ .card-emphasis { font-weight: 600; color: #fff; } /* ---------- Footer ---------- */ .hero-footer { position: relative; z-index: 1; text-align: center; padding: 6px 20px 10px; margin-top: auto; font-size: 12px; color: rgba(255,255,255,0.78); } .hero-footer a { color: #fff; text-decoration: none; margin-left: 4px; } .hero-footer a:hover { text-decoration: underline; } /* ---------- reCAPTCHA badge ---------- */ /* Lift the badge above .hero-grid / .hero-footer (both z-index:1) so pointer events reach it and Google's hover-to-slide transition works. */ .grecaptcha-badge { z-index: 1000 !important; } /* ===================================================================== * In-session pages (hybrid): gradient nav + footer, light content panel * --------------------------------------------------------------------- */ /* Pages using this chrome opt out of the body-level white text/dark bg that the auth pages need. */ body.app-page { color: #333; background: #f4f6fa; } /* ---------- Top navbar (gradient) ---------- */ .app-navbar { background: linear-gradient(90deg, #4FC3DD 0%, #6E8BE0 60%, #8F7BD9 100%); color: #fff; padding: 10px 0; box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .app-navbar .navbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; } .app-navbar .brand { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: 0.5px; } .app-navbar .brand:hover { text-decoration: none; color: #fff; } .app-navbar .brand img { height: 34px; width: auto; display: block; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.15)); } .app-navbar .nav-actions { display: flex; align-items: center; gap: 18px; } .app-navbar .nav-actions a, .app-navbar .nav-actions .user-info { color: rgba(255,255,255,0.92); font-size: 13px; text-decoration: none; } .app-navbar .nav-actions a:hover { color: #fff; text-decoration: underline; } .app-navbar .nav-actions .glyphicon { margin-right: 4px; } /* ---------- Content panel ---------- */ .app-content { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin: 24px auto; padding: 28px 32px 32px; max-width: 1200px; } /* Re-color common Bootstrap pieces to match the SINBLE palette */ .app-content .breadcrumb { background: #f4f6fa; border-radius: 4px; padding: 8px 14px; margin-bottom: 20px; } .app-content .breadcrumb > .active { color: #6E8BE0; font-weight: 600; } .app-content .page-header { border-bottom: 2px solid #6E8BE0; padding-bottom: 10px; margin-top: 0; } .app-content .page-header h3 { color: #4a4f7a; margin: 0; font-weight: 500; } /* Tabs */ .app-content .nav-tabs > li > a { color: #6E8BE0; border-radius: 6px 6px 0 0; } .app-content .nav-tabs > li > a:hover { background: #f0f3fb; border-color: #e3e8f3 #e3e8f3 #6E8BE0; } .app-content .nav-tabs > li.active > a, .app-content .nav-tabs > li.active > a:hover, .app-content .nav-tabs > li.active > a:focus { color: #4a4f7a; background: #fff; border-color: #6E8BE0 #6E8BE0 transparent; font-weight: 600; } /* Data tables */ .app-content .project-table { width: 100%; border-collapse: collapse; } .app-content .project-table th { background: linear-gradient(90deg, #4FC3DD 0%, #6E8BE0 100%); color: #fff; padding: 10px 12px; text-align: center; font-weight: 600; border: none; } .app-content .project-table td { padding: 10px 12px; border-bottom: 1px solid #eef0f4; vertical-align: top; } .app-content .project-table tr:hover td { background: #f7f9fc; } /* Alerts (in-content) */ .app-content .alert-info { background: #eaf4f9; border-color: #b6dbe8; color: #2a5a7a; border-radius: 6px; } .app-content .alert-warning { background: #fff6e0; border-color: #f5d98a; color: #6a4d12; border-radius: 6px; } .app-content .alert .glyphicon { margin-right: 6px; } /* NDA warning row highlight inside the data table */ .app-content .nda-warning { background: #ffe5ec; padding: 2px 6px; border-radius: 3px; } .app-content .nda-warning-text { color: #c0335a; font-weight: 600; } /* Links in content area */ .app-content a { color: #4f6fd1; } .app-content a:hover { color: #6E8BE0; } /* "Back to top" link */ .app-content .back-to-top { text-align: right; margin-top: 18px; font-size: 13px; } .app-content .back-to-top a { color: #6E8BE0; } /* ---------- Footer (in-session pages) ---------- */ .app-footer { background: linear-gradient(90deg, #4FC3DD 0%, #6E8BE0 60%, #8F7BD9 100%); color: rgba(255,255,255,0.92); text-align: center; padding: 14px 20px; font-size: 12px; margin-top: 40px; } .app-footer a { color: #fff; text-decoration: none; margin-left: 4px; } .app-footer a:hover { text-decoration: underline; } /* ---------- Responsive ---------- */ @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; padding: 30px 20px; gap: 30px; } .welcome { text-align: center; } .brand-logo { max-width: 320px; } .bg-dots { display: none; } .btn-row { flex-direction: column; gap: 10px; } .btn-row .btn-pill { width: 100%; } /* In-session pages */ .app-navbar .navbar-inner { padding: 0 14px; } .app-navbar .brand { font-size: 14px; gap: 8px; } .app-navbar .nav-actions { gap: 10px; } .app-content { margin: 14px; padding: 20px 16px; } }