/* ============================================================================= Valdo Login - 3D "Lifted Panel" premium refresh ----------------------------------------------------------------------------- Scoped ENTIRELY under .valdo3d (added on of auth-login-valdo.php) so the shared login_valdo.css / fonts.min.css and every other login skin (interview / psikotest / akumart, which reuse the same files) stay untouched. Loaded AFTER login_valdo.css + fonts.min.css so it wins the cascade. All animation is transform / opacity only (GPU-compositable, zero reflow). No external libraries; a tiny vanilla-JS parallax lives in the view. ============================================================================= */ /* --------------------------------------------------------------------------- Design tokens --------------------------------------------------------------------------- */ .valdo3d { /* Brand palette */ --v-magenta: #a51f92; /* primary brand */ --v-magenta-hi: #c0259e; /* gradient light end */ --v-magenta-lo: #7d1570; /* gradient dark end */ --v-magenta-hover: #960181; /* brand hover (existing) */ --v-accent: #E461D2; /* accent magenta from the SVG */ --v-accent-hot: #ff34e2; /* hot accent from the SVG */ --v-violet: #7828c8; /* cool counterpoint */ --v-ink: #262626; /* body text on light */ --v-label: #7d1570; /* caps label on white */ --v-placeholder: #6B6573; /* AA: ~5:1 on the light glass input */ --v-err: #c81d4f; /* AA-safe error red on white */ /* Light form stage */ --v-form-bg-a: #FFFFFF; --v-form-bg-b: #FBF7FB; --v-form-bg-c: #F7F0F6; /* Glass */ --v-glass-bg: rgba(255,255,255,0.72); --v-glass-bg-solid: rgba(255,255,255,0.94); /* @supports fallback */ --v-glass-border: rgba(255,255,255,0.85); /* Radii */ --v-r-card: 22px; --v-r-pill: 16px; --v-r-field: 12px; --v-r-btn: 12px; /* Purple-tinted ambient shadow tints = premium depth */ --v-sh-deep: rgba(124,21,112,0.16); --v-sh-mid: rgba(124,21,112,0.12); --v-sh-soft: rgba(124,21,112,0.06); --v-sh-seam: rgba(60,8,54,0.55); /* Blur tokens */ --v-blur-card: 20px; --v-blur-blob: 70px; /* Timing */ --v-ease: cubic-bezier(.2,.7,.3,1); --v-t-fast: .18s; --v-t-mid: .25s; --v-t-slow: .5s; background: var(--v-form-bg-c); } /* --------------------------------------------------------------------------- Background stages (split at the col-md-4 / col-md-8 seam) --------------------------------------------------------------------------- */ /* LEFT form stage - faint magenta-warmed wash over the old flat #F9F9F9 */ .valdo3d .login-section-wrapper { position: relative; /* anchor seam shadow + form-side blob */ z-index: 3; /* lifts above the purple stage */ overflow: hidden; /* clip the form-side blob */ background: linear-gradient(180deg, var(--v-form-bg-a) 0%, var(--v-form-bg-b) 55%, var(--v-form-bg-c) 100%); /* The SEAM STEP - the signature: light column lifts off the purple stage. */ box-shadow: 28px 0 60px -28px var(--v-sh-seam), /* soft purple cast onto the right stage */ 8px 0 0 0 rgba(255,255,255,0.6); /* crisp light edge at the seam */ } /* faint form-side blob so the left stage isn't sterile (stays near-white) */ .valdo3d .login-section-wrapper::after { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 380px; height: 380px; bottom: -120px; left: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(165,31,146,0.10), transparent 70%); filter: blur(70px); } /* keep card / brand / footer above the form-side blob */ .valdo3d .login-section-wrapper > * { position: relative; z-index: 1; } /* RIGHT illustration stage - keep brand identity, upgrade flat #a51f92 to a gradient. !important beats the flat fill in the shared login_valdo.css (.bg-valdo). */ .valdo3d .bg-valdo { background: linear-gradient(135deg, var(--v-magenta-hi) 0%, var(--v-magenta) 46%, var(--v-magenta-lo) 100%) !important; position: relative; overflow: hidden; } /* faint dot-grid texture over the purple (echoes the SVG's white pinstripe ground) */ .valdo3d .bg-valdo::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 26px 26px; } /* three blurred depth blobs inside the purple stage (markup: spans in the container) */ .valdo3d .v-blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(var(--v-blur-blob)); will-change: transform; transform: translateZ(0); z-index: 0; /* below the illustration (z-index:1) */ } .valdo3d .v-blob--a { /* warm accent, top-left */ width: 560px; height: 560px; top: -140px; left: -120px; opacity: .9; background: radial-gradient(circle, rgba(228,97,210,0.55), transparent 70%); } .valdo3d .v-blob--b { /* hot accent, bottom-right */ width: 680px; height: 680px; bottom: -200px; right: -160px; opacity: .75; background: radial-gradient(circle, rgba(255,52,226,0.40), transparent 72%); } .valdo3d .v-blob--c { /* cool violet counterpoint - breaks mono-pink */ width: 420px; height: 420px; top: 30%; right: 8%; opacity: .55; background: radial-gradient(circle, rgba(120,40,200,0.42), transparent 70%); } /* --------------------------------------------------------------------------- Glass form card (.login-wrapper) - markup / IDs untouched --------------------------------------------------------------------------- */ .valdo3d .login-wrapper { position: relative; width: 100%; max-width: 420px; margin: 0 auto; padding: 44px 40px; border-radius: var(--v-r-card); background: var(--v-glass-bg); -webkit-backdrop-filter: blur(var(--v-blur-card)) saturate(140%); backdrop-filter: blur(var(--v-blur-card)) saturate(140%); border: 1px solid var(--v-glass-border); /* soft 3D depth: inner top highlight + contact + ambient + deep coloured cast */ box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 2px 6px var(--v-sh-soft), 0 14px 32px var(--v-sh-mid), 0 36px 80px var(--v-sh-deep); animation: v-cardIn .62s var(--v-ease) .12s both; /* staggered after badge */ } /* magenta rim glow - lit top-left edge via mask-composite */ .valdo3d .login-wrapper::before { content: ""; position: absolute; inset: -1px; border-radius: calc(var(--v-r-card) + 1px); padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(228,97,210,0.55), rgba(255,255,255,0) 42%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* hard backdrop-filter fallback for engines lacking it (older WebKit on this stack) */ @supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) { .valdo3d .login-wrapper { background: var(--v-glass-bg-solid); } } .valdo3d .login-title { font-size: 40px; font-weight: 700; color: var(--v-ink); letter-spacing: -0.5px; margin-bottom: 28px; font-family: 'Montserrat', sans-serif; } /* copyright footer: pull out of absolute pinning into the card flow */ .valdo3d .main-footer { position: static; bottom: auto; width: 100%; margin-top: 24px; text-align: center; color: var(--v-ink); } .valdo3d .login-wrapper-footer-text { color: var(--v-ink); } .valdo3d .login-wrapper-footer-text a { color: var(--v-magenta); font-weight: 600; text-decoration: none; } .valdo3d .login-wrapper-footer-text a:hover { text-decoration: underline; } /* --------------------------------------------------------------------------- Floating logo badge (.brand-wrapper + embedded .Logo-VALDO-Login wordmark) --------------------------------------------------------------------------- */ /* The logo lives INSIDE the card as an anchored header: a centred wordmark with a soft magenta glow and a full-width hairline divider tying it to the form below - no detached floating island, no independent bobbing. */ .valdo3d .brand-wrapper { position: relative; display: block; width: 100%; text-align: center; margin: 0 0 22px; padding: 2px 0 18px; border-bottom: 1px solid rgba(165,31,146,0.12); animation: v-fadeIn .5s var(--v-ease) .25s both; /* fades in with the card */ } .valdo3d .brand-wrapper::after { /* soft ambient magenta glow behind the wordmark */ content: ""; position: absolute; left: 50%; top: -2px; transform: translateX(-50%); width: 210px; height: 64px; z-index: -1; pointer-events: none; background: radial-gradient(62% 80% at 50% 50%, rgba(228,97,210,0.22), transparent 72%); filter: blur(16px); } /* scale the embedded 214x88 SVG wordmark (delivered via CSS `content`) to ~142px */ .valdo3d .Logo-VALDO-Login { display: inline-block; /* centred by the header's text-align */ width: 142px; height: 58px; padding: 0; margin: 0; object-fit: contain; transition: transform .2s var(--v-ease); } .valdo3d .brand-wrapper:hover .Logo-VALDO-Login { transform: scale(1.04); } /* subtle cue: links to /login */ /* --------------------------------------------------------------------------- Illustration depth (.containerForImageAkuMaju + reused login_valdo.svg) --------------------------------------------------------------------------- */ .valdo3d .containerForImageAkuMaju { position: relative; height: 100vh; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; perspective: 1400px; } /* soft white glass disc behind the figures to lift them off the saturated stage */ .valdo3d .containerForImageAkuMaju::before { content: ""; position: absolute; z-index: 0; width: 70%; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.22), rgba(255,255,255,0) 65%); filter: blur(40px); } /* the illustration - override the legacy absolute bottom/right pin, centre + float */ .valdo3d .login-img { position: relative; z-index: 1; width: 78%; max-width: 880px; height: auto; inset: auto; bottom: auto; right: auto; margin: 0; transform-style: preserve-3d; will-change: transform; /* grounded 3D contact shadow against the purple */ -webkit-filter: drop-shadow(0 40px 70px rgba(40,4,36,0.45)) drop-shadow(0 8px 18px rgba(165,31,146,0.30)); filter: drop-shadow(0 40px 70px rgba(40,4,36,0.45)) drop-shadow(0 8px 18px rgba(165,31,146,0.30)); /* float (transform) + opacity-only entrance so the two never clobber each other */ animation: v-heroFloat 9s ease-in-out infinite, v-fadeIn .8s var(--v-ease) .24s both; } /* float keyframe reads the same --v-px/--v-py vars the parallax JS sets, so parallax and float compose additively without clobbering. */ @keyframes v-heroFloat { 0%, 100% { transform: translate3d(var(--v-px,0), var(--v-py,0), 0) rotate(-0.4deg); } 50% { transform: translate3d(var(--v-px,0), calc(var(--v-py,0px) - 14px), 0) rotate(0.4deg); } } /* --------------------------------------------------------------------------- Inputs + modern focus animation (The legacy Bootstrap `.border-0` utility was removed from these inputs in the view: it is `border:0 !important` and would otherwise erase the glass hairline.) --------------------------------------------------------------------------- */ .valdo3d .login-wrapper .form-control { display: block; width: 100%; height: 52px; padding: 0 16px; font: 500 15px/52px 'Montserrat', sans-serif; color: var(--v-ink); background: rgba(255,255,255,0.65); border: 1.5px solid rgba(165,31,146,0.16); border-radius: var(--v-r-field); box-shadow: inset 0 1px 2px rgba(60,40,70,0.04); transition: border-color var(--v-t-mid) ease, box-shadow var(--v-t-mid) ease, background var(--v-t-mid) ease; } .valdo3d .login-wrapper .form-control::placeholder { color: var(--v-placeholder); } /* labels as small caps-tracked tags */ .valdo3d .login-wrapper label { display: block; margin-bottom: 8px; font: 600 12px 'Montserrat', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--v-label); } /* modern focus - soft expanding magenta ring via box-shadow (no layout shift) */ .valdo3d .login-wrapper .form-control:focus { outline: none; background: rgba(255,255,255,0.92); border-color: var(--v-magenta); box-shadow: 0 0 0 4px rgba(165,31,146,0.14), 0 6px 16px rgba(124,21,112,0.08); } /* error state - hooks the existing .is-invalid class toggled by proses(). !important beats Bootstrap's `.form-control.is-invalid{border:1px solid red!important}`. A single subtle nudge gives tactile feedback the moment the field is flagged. */ .valdo3d .login-wrapper .form-control.is-invalid { border: 1.5px solid var(--v-err) !important; box-shadow: 0 0 0 4px rgba(200,29,79,0.14); animation: v-shake .42s var(--v-ease) both; } /* the inline style="color:red" error spans become soft, animated error pills with an alert icon (proses()/the AJAX handlers just toggle display:block as before). */ .valdo3d .form-error-msg { margin: 9px 0 0; padding: 8px 12px 8px 11px; font: 500 12.5px/1.35 'Montserrat', sans-serif; color: var(--v-err) !important; background: rgba(200,29,79,0.08); border: 1px solid rgba(200,29,79,0.20); border-radius: 10px; animation: v-errIn .26s var(--v-ease) both; } .valdo3d .form-error-msg::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23c81d4f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4.5'/%3E%3Cpath d='M12 16.2h.01'/%3E%3C/svg%3E"); margin-right: 8px; vertical-align: -3px; } /* email blur-check status (#email-status content injected by checkEmail()) — same premium pill language as the validation errors: red alert pill / green success pill. */ .valdo3d .status-not-available, .valdo3d .status-available { display: block; width: auto; margin: 9px 0 0; padding: 8px 12px 8px 11px; font: 500 12.5px/1.35 'Montserrat', sans-serif; border-radius: 10px; border: 1px solid; animation: v-errIn .26s var(--v-ease) both; } .valdo3d .status-not-available { color: var(--v-err) !important; background: rgba(200,29,79,0.08); border-color: rgba(200,29,79,0.20); } .valdo3d .status-available { color: #1a8f5a !important; background: rgba(26,143,90,0.09); border-color: rgba(26,143,90,0.22); } .valdo3d .status-not-available::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23c81d4f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4.5'/%3E%3Cpath d='M12 16.2h.01'/%3E%3C/svg%3E"); margin-right: 8px; vertical-align: -3px; } .valdo3d .status-available::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%231a8f5a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.4 12.4l2.4 2.4 4.8-5.2'/%3E%3C/svg%3E"); margin-right: 8px; vertical-align: -3px; } /* autofill guard - stop Chrome painting an opaque box over the frosted input */ .valdo3d .login-wrapper .form-control:-webkit-autofill, .valdo3d .login-wrapper .form-control:-webkit-autofill:hover, .valdo3d .login-wrapper .form-control:-webkit-autofill:focus { -webkit-text-fill-color: var(--v-ink); -webkit-box-shadow: 0 0 0 40px rgba(255,255,255,0.95) inset; transition: background-color 9999s ease-out 0s; caret-color: var(--v-ink); } /* --------------------------------------------------------------------------- Login button - extends the existing .btn-valdo. CRITICAL: .btn-valdo background/border/color are !important in login_valdo.css, so these overrides MUST also be !important or the gradient loses to flat #a51f92. Text locked at 16px/700: white on #a51f92 (~4.6:1) passes AA only as large/bold. --------------------------------------------------------------------------- */ .valdo3d .btn-valdo { position: relative; overflow: hidden; width: 100%; height: 52px; border: 0 !important; border-radius: var(--v-r-btn); font: 700 16px 'Montserrat', sans-serif; letter-spacing: .02em; color: #fff !important; background: linear-gradient(135deg, #b81f9f 0%, var(--v-magenta) 55%, #8d1880 100%) !important; box-shadow: 0 8px 20px rgba(165,31,146,0.32), 0 2px 4px rgba(124,21,112,0.25), 0 1px 0 rgba(255,255,255,0.25) inset; transition: transform var(--v-t-fast) var(--v-ease), box-shadow .22s ease, background .22s ease; will-change: transform; } .valdo3d .btn-valdo:hover, .valdo3d .btn-valdo:focus { background: linear-gradient(135deg, var(--v-magenta) 0%, var(--v-magenta-hover) 60%, #7d0a6e 100%) !important; border-color: var(--v-magenta-hover) !important; transform: translateY(-2px); box-shadow: 0 18px 32px rgba(165,31,146,0.40), 0 6px 14px rgba(124,21,112,0.30), 0 1px 0 rgba(255,255,255,0.30) inset; } .valdo3d .btn-valdo:active { transform: translateY(0) scale(.99); box-shadow: 0 4px 10px rgba(165,31,146,0.30), 0 2px 4px rgba(0,0,0,0.12) inset; } /* one-pass diagonal sheen sweep (transform/opacity only) */ .valdo3d .btn-valdo::before { content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.30), transparent); transform: translateX(0); opacity: 0; pointer-events: none; } .valdo3d .btn-valdo:hover::before { animation: v-sheen .7s var(--v-ease) 1; } /* --------------------------------------------------------------------------- Success transition — full-screen overlay shown by proses() right before the redirect; the badge drops in from the top with a bounce. JS toggles .is-active and (for reduced-motion users) skips it entirely and redirects instantly. --------------------------------------------------------------------------- */ .valdo3d .valdo-success { position: fixed; inset: 0; z-index: 9999; display: none; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; background: rgba(60,8,54,0.30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .valdo3d .valdo-success.is-active { display: -webkit-box; display: flex; animation: v-fadeIn .25s ease both; } .valdo3d .valdo-success__card { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; padding: 30px 42px 26px; border-radius: 20px; text-align: center; background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(60,8,54,0.34), 0 6px 16px rgba(124,21,112,0.24); animation: v-dropBounce .9s var(--v-ease) both; } .valdo3d .valdo-success__check { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--v-accent) 0%, var(--v-magenta) 60%, var(--v-magenta-lo) 100%); box-shadow: 0 10px 24px rgba(165,31,146,0.40), 0 0 0 6px rgba(228,97,210,0.16); animation: v-checkPop .5s var(--v-ease) .4s both; } .valdo3d .valdo-success__title { font: 700 18px 'Montserrat', sans-serif; color: var(--v-ink); letter-spacing: -.2px; } .valdo3d .valdo-success__sub { margin-top: 4px; font: 500 13px 'Montserrat', sans-serif; color: #7a6f78; } /* --------------------------------------------------------------------------- Keyframes (all transform / opacity only) --------------------------------------------------------------------------- */ @keyframes v-cardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes v-fadeIn { /* opacity-only entrance (logo header + floating illustration) */ from { opacity: 0; } to { opacity: 1; } } @keyframes v-errIn { /* error pill slide-in */ from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } @keyframes v-shake { /* one-time nudge on an invalid field */ 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } @keyframes v-dropBounce { /* success badge drops in from the top and bounces */ 0% { transform: translateY(-160%); opacity: 0; } 55% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(-16px); } 84% { transform: translateY(0); } 92% { transform: translateY(-5px); } 100% { transform: translateY(0); } } @keyframes v-checkPop { /* checkmark medallion pops once the badge lands */ 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } } @keyframes v-sheen { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(420%); opacity: 0; } } /* --------------------------------------------------------------------------- Responsive Bootstrap col-md-* => two columns at >=768px; stacked below. --------------------------------------------------------------------------- */ /* DESKTOP >=992px - vertically centre the card group in the column */ @media (min-width: 992px) { .valdo3d .login-section-wrapper { -webkit-box-pack: center; justify-content: center; } .valdo3d .login-wrapper { margin-top: 0; } } /* TABLET 768-991px - keep both columns; tighten the legacy 50px gutter so the narrow 33% form column gets breathing room; trim the illustration a touch. */ @media (min-width: 768px) and (max-width: 991px) { .valdo3d .login-section-wrapper { padding-left: 28px; padding-right: 28px; } .valdo3d .login-wrapper { padding: 32px 24px; max-width: 460px; } .valdo3d .login-title { font-size: 34px; } .valdo3d .login-img { width: 92%; } } /* MOBILE <768px - single column, form prioritised; seam shadow becomes a plain drop */ @media (max-width: 767px) { .valdo3d .login-wrapper { width: auto; margin: 24px 16px 16px; padding: 32px 24px; max-width: none; border-radius: 18px; } .valdo3d .login-section-wrapper { box-shadow: 0 14px 32px var(--v-sh-mid); } .valdo3d .login-title { font-size: 32px; } .valdo3d .brand-wrapper { margin-bottom: 20px; } } /* very small <576px - the existing .d-none.d-sm-block fully hides the illustration; beat the existing "padding:0 !important" on .login-wrapper */ @media (max-width: 575px) { .valdo3d .login-wrapper { padding: 28px 20px !important; } } /* --------------------------------------------------------------------------- Accessibility --------------------------------------------------------------------------- */ /* visible focus: real outline IN ADDITION to the box-shadow ring, so focus survives Windows High-Contrast / forced-colors mode (box-shadows stripped) */ .valdo3d .form-control:focus-visible, .valdo3d .brand-wrapper:focus-visible, .valdo3d .login-wrapper-footer-text a:focus-visible { outline: 2px solid var(--v-magenta); outline-offset: 2px; } .valdo3d .btn-valdo:focus-visible { outline: 3px solid var(--v-magenta); /* opaque, ~6:1 on the light card; survives forced-colors */ outline-offset: 3px; } /* reduced motion: per-name disabling PLUS a global kill-switch backstop that also catches the pseudo-element sheen and any future animation/transition. */ @media (prefers-reduced-motion: reduce) { .valdo3d *, .valdo3d *::before, .valdo3d *::after { animation: none !important; transition: none !important; } .valdo3d .login-img { transform: none !important; } /* freeze centred */ }