/* ============================================================================ DNB University Enrollment form — light, fresh, minimal. Matches the NOC (Neuro-Otology Course) page: off-white, warm coral accents, Kumbh Sans. Scoped under #dnb-enroll. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;500;600;700;800&display=swap'); #dnb-enroll { --ink: #1A1F3E; --ink-soft: #2C3252; --body: #5A5F7A; --muted: #9098B4; --faint: #AEB4CC; --line: #E6E9F2; --line-soft: #EFF1F8; --field: #F6F7FB; --panel: #FFFFFF; --pink: #FF5F86; --pink-deep: #E84570; --orange: #FF6B35; --grad: linear-gradient(120deg, #FF6B35 0%, #FF5F86 55%, #E84570 100%); --focus-ring: rgba(255, 95, 134, .16); --r: 14px; --ease: cubic-bezier(.22, .61, .36, 1); position: relative; box-sizing: border-box; width: 100%; padding: clamp(40px, 6vw, 80px) 20px; background: linear-gradient(180deg, #FCFDFF 0%, #F5F7FB 100%); color: var(--body); font-family: 'Kumbh Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.5; } #dnb-enroll *, #dnb-enroll *::before, #dnb-enroll *::after { box-sizing: border-box; } #dnb-enroll [hidden] { display: none !important; } /* ── Card ──────────────────────────────────────────────────────────────── */ #dnb-enroll .dnb-console { position: relative; max-width: 1060px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--r) + 6px); padding: clamp(24px, 3.2vw, 40px); box-shadow: 0 30px 60px -44px rgba(26, 31, 62, .28); animation: dnb-rise .6s var(--ease) both; } @keyframes dnb-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* Header */ #dnb-enroll .dnb-console__head { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: flex-end; justify-content: space-between; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line-soft); } #dnb-enroll .dnb-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; } #dnb-enroll .dnb-title { font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--ink); } #dnb-enroll .dnb-title .dot { color: var(--pink); } #dnb-enroll .dnb-sub { color: var(--body); font-size: 14px; margin: 6px 0 0; max-width: 44ch; } /* Progress rail */ #dnb-enroll .dnb-rail { display: flex; align-items: center; } #dnb-enroll .dnb-rail__node { display: flex; align-items: center; gap: 9px; } #dnb-enroll .dnb-rail__dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); background: var(--panel); font-size: 12px; font-weight: 700; color: var(--faint); transition: all .4s var(--ease); } #dnb-enroll .dnb-rail__label { font-size: 12px; font-weight: 600; color: var(--muted); transition: color .3s ease; } #dnb-enroll .dnb-rail__bar { width: 30px; height: 2px; margin: 0 10px; background: var(--line); border-radius: 2px; overflow: hidden; } #dnb-enroll .dnb-rail__bar::after { content: ""; display: block; height: 100%; width: 0; background: var(--grad); transition: width .5s var(--ease); } #dnb-enroll .dnb-rail__node.is-done .dnb-rail__dot { border-color: transparent; background: var(--grad); color: #fff; } #dnb-enroll .dnb-rail__node.is-active .dnb-rail__dot { border-color: var(--pink); color: var(--pink-deep); background: #fff; box-shadow: 0 0 0 4px var(--focus-ring); } #dnb-enroll .dnb-rail__node.is-active .dnb-rail__label, #dnb-enroll .dnb-rail__node.is-done .dnb-rail__label { color: var(--ink-soft); } #dnb-enroll .dnb-rail__bar.is-filled::after { width: 100%; } @media (max-width: 720px) { #dnb-enroll .dnb-rail__label { display: none; } #dnb-enroll .dnb-rail__bar { width: 20px; margin: 0 6px; } } /* ── Carousel stage ────────────────────────────────────────────────────── */ #dnb-enroll .dnb-stage { position: relative; transition: height .45s var(--ease); } #dnb-enroll .dnb-step { position: absolute; inset: 0 0 auto 0; width: 100%; opacity: 0; transform: translateX(40px); transition: opacity .4s ease, transform .45s var(--ease); pointer-events: none; } #dnb-enroll .dnb-step.is-active { opacity: 1; transform: none; pointer-events: auto; } #dnb-enroll .dnb-step.is-exit { opacity: 0; transform: translateX(-40px); } #dnb-enroll .dnb-step__title { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--ink); } #dnb-enroll .dnb-step__sub { color: var(--body); font-size: 14px; margin: 0 0 20px; } #dnb-enroll .dnb-step__sub strong { color: var(--ink-soft); } /* ── Fields (horizontal row + floating labels) ─────────────────────────── */ #dnb-enroll .dnb-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } #dnb-enroll .dnb-field { position: relative; } #dnb-enroll .dnb-field.dnb-span-2 { grid-column: span 2; } #dnb-enroll .dnb-field > input, #dnb-enroll .dnb-field > select, #dnb-enroll .dnb-phone > input { width: 100%; height: 56px; padding: 21px 14px 7px; font: inherit; font-size: 15px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 11px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .2s, background .2s, box-shadow .2s; } #dnb-enroll .dnb-field > select { cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; } #dnb-enroll .dnb-field > label { position: absolute; left: 15px; top: 17px; font-size: 15px; color: var(--muted); pointer-events: none; transform-origin: left center; transition: transform .18s var(--ease), color .18s; } #dnb-enroll .dnb-field > input:focus, #dnb-enroll .dnb-field > select:focus, #dnb-enroll .dnb-phone > input:focus { border-color: var(--pink); background: #fff; box-shadow: 0 0 0 4px var(--focus-ring); } #dnb-enroll .dnb-field:focus-within > label, #dnb-enroll .dnb-field > input:not(:placeholder-shown) + label, #dnb-enroll .dnb-field.is-filled > label { transform: translateY(-12px) scale(.74); color: var(--pink-deep); } /* a dropdown keeps its label floated as a header (it always has a placeholder option) */ #dnb-enroll .dnb-field--select > label { transform: translateY(-12px) scale(.74); color: var(--muted); } #dnb-enroll .dnb-field--select:focus-within > label { color: var(--pink-deep); } /* accent underline that grows on focus */ #dnb-enroll .dnb-field::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--grad); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .28s var(--ease); pointer-events: none; } #dnb-enroll .dnb-field:focus-within::after { transform: scaleX(1); } /* phone: static +91 prefix + number */ #dnb-enroll .dnb-phone { display: flex; align-items: stretch; } #dnb-enroll .dnb-phone__cc { flex: 0 0 auto; display: flex; align-items: center; height: 56px; padding: 0 12px; background: var(--field); border: 1px solid var(--line); border-right: 0; border-radius: 11px 0 0 11px; color: var(--body); font-size: 15px; font-weight: 600; } #dnb-enroll .dnb-phone > input { border-radius: 0 11px 11px 0; } #dnb-enroll .dnb-field--phone > label { left: 62px; } #dnb-enroll .dnb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } /* staggered field entrance */ #dnb-enroll .dnb-step.is-active .dnb-row > .dnb-field { animation: dnb-field-in .45s var(--ease) both; } #dnb-enroll .dnb-step.is-active .dnb-row > .dnb-field:nth-child(2) { animation-delay: .06s; } #dnb-enroll .dnb-step.is-active .dnb-row > .dnb-field:nth-child(3) { animation-delay: .12s; } #dnb-enroll .dnb-step.is-active .dnb-row > .dnb-field:nth-child(4) { animation-delay: .18s; } @keyframes dnb-field-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ── Messages ─────────────────────────────────────────────────────────── */ #dnb-enroll .dnb-msg { color: var(--pink-deep); font-size: 13px; min-height: 18px; margin: 12px 2px 0; } #dnb-enroll .dnb-note { background: #FFF3F5; border: 1px solid #FFD7DF; color: var(--pink-deep); font-size: 13px; padding: 11px 14px; border-radius: 11px; margin-bottom: 18px; } #dnb-enroll .dnb-note--pending { background: var(--field); border-color: var(--line); color: var(--body); margin: 8px 0 0; } /* ── Instruction hint (must-match-university notice) ──────────────────── */ #dnb-enroll .dnb-hint { display: flex; gap: 10px; align-items: flex-start; background: #FFF7ED; border: 1px solid #FBE2C0; color: #8A5A22; font-size: 13px; line-height: 1.55; padding: 12px 14px; border-radius: 11px; margin: 0 0 22px; } #dnb-enroll .dnb-hint strong { color: #6B4517; font-weight: 700; } #dnb-enroll .dnb-hint svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--orange); } /* ── Buttons ──────────────────────────────────────────────────────────── */ #dnb-enroll .dnb-actions { margin-top: 22px; } #dnb-enroll .dnb-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; color: #fff; padding: 14px 26px; border-radius: 11px; background: var(--grad); box-shadow: 0 12px 26px -12px var(--pink-deep); transition: transform .12s var(--ease), box-shadow .2s; } #dnb-enroll .dnb-btn::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .4) 50%, transparent 80%); } #dnb-enroll .dnb-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px var(--pink-deep); } #dnb-enroll .dnb-btn:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); } #dnb-enroll .dnb-btn:active { transform: translateY(0); } #dnb-enroll .dnb-btn .arrow { transition: transform .25s var(--ease); } #dnb-enroll .dnb-btn:hover .arrow { transform: translateX(4px); } #dnb-enroll .dnb-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--pink-deep); font-size: 13px; font-weight: 600; border-bottom: 1px solid transparent; transition: border-color .2s; } #dnb-enroll .dnb-link:hover { border-color: currentColor; } #dnb-enroll .dnb-link:disabled { color: var(--faint); cursor: default; } /* ── OTP ──────────────────────────────────────────────────────────────── */ #dnb-enroll .dnb-otp { width: 100%; max-width: 320px; height: 60px; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 12px; text-indent: 12px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 13px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; } #dnb-enroll .dnb-otp:focus { border-color: var(--pink); background: #fff; box-shadow: 0 0 0 4px var(--focus-ring); } #dnb-enroll .dnb-otp__actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; max-width: 320px; } #dnb-enroll .dnb-otp__target { color: var(--ink); font-weight: 700; } /* ── Final steps ──────────────────────────────────────────────────────── */ #dnb-enroll .dnb-final { text-align: center; padding: 6px 0; } #dnb-enroll .dnb-check { width: 72px; height: 72px; margin: 0 auto 16px; } #dnb-enroll .dnb-check svg { width: 72px; height: 72px; } #dnb-enroll .dnb-check circle { stroke: var(--pink); stroke-width: 3; fill: #FFF3F5; stroke-dasharray: 240; stroke-dashoffset: 240; animation: dnb-draw .7s var(--ease) forwards; } #dnb-enroll .dnb-check path { stroke: var(--pink-deep); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: dnb-draw .45s .45s var(--ease) forwards; } @keyframes dnb-draw { to { stroke-dashoffset: 0; } } #dnb-enroll .dnb-final .dnb-step__title { font-size: 22px; } #dnb-enroll .dnb-final p { color: var(--body); max-width: 46ch; margin: 6px auto 20px; } #dnb-enroll .dnb-final .dnb-btn { min-width: 210px; } #dnb-enroll .dnb-wa { margin: 16px auto 0; display: flex; flex-direction: column; gap: 10px; max-width: 320px; } #dnb-enroll .dnb-btn--wa { background: #25D366; box-shadow: 0 12px 26px -14px rgba(37, 211, 102, .6); } /* ── Overlay ──────────────────────────────────────────────────────────── */ #dnb-enroll .dnb-console__overlay { position: absolute; inset: 0; z-index: 6; border-radius: inherit; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } #dnb-enroll .dnb-spin { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--pink); animation: dnb-spin .8s linear infinite; } @keyframes dnb-spin { to { transform: rotate(360deg); } } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 820px) { #dnb-enroll .dnb-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { #dnb-enroll .dnb-row { grid-template-columns: 1fr; } #dnb-enroll .dnb-field.dnb-span-2 { grid-column: span 1; } #dnb-enroll .dnb-console__head { flex-direction: column; align-items: flex-start; } #dnb-enroll .dnb-actions .dnb-btn { width: 100%; } #dnb-enroll .dnb-otp, #dnb-enroll .dnb-otp__actions { max-width: none; } #dnb-enroll .dnb-hint { font-size: 12.5px; } } @media (prefers-reduced-motion: reduce) { #dnb-enroll *, #dnb-enroll *::before, #dnb-enroll *::after { animation-duration: .001ms !important; transition-duration: .01ms !important; } } /* Scoped 0.5 form: existing console, colors and rail, with accessible inline proofs. */ #dnb-enroll .dnb-course-title{max-width:64ch;font-size:14px;margin:10px 0 0;color:var(--ink-soft)} #dnb-enroll .dnb-form-grid,#dnb-enroll .dnb-proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} #dnb-enroll label{display:block;color:var(--ink-soft);font-size:13px;font-weight:600} #dnb-enroll .dnb-form-grid input,#dnb-enroll .dnb-form-grid select{display:block;width:100%;min-width:0;min-height:50px;margin:7px 0 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);font:inherit;font-size:16px} #dnb-enroll :is(input,select,button,a):focus-visible{outline:3px solid #a53151;outline-offset:3px} #dnb-enroll .dnb-link{min-height:44px;padding:10px 2px;color:#aa2649} #dnb-enroll .dnb-btn{background:#b93154;box-shadow:none;min-height:48px} #dnb-enroll button:disabled{opacity:.55;cursor:default;transform:none} #dnb-enroll [data-message]:empty{display:none} #dnb-enroll [data-message]{padding:12px 16px;border-radius:10px;border:1px solid #f2c5ca;background:#fff4f5;color:#8b263e} #dnb-enroll [data-phone-note]{margin-top:16px} #dnb-enroll .dnb-verify-head{display:flex;justify-content:space-between;align-items:start;gap:20px} #dnb-enroll .dnb-proof{padding:20px;border:1px solid var(--line);border-radius:14px;min-width:0} #dnb-enroll .dnb-proof h4{margin:0;color:var(--ink)} #dnb-enroll .dnb-proof p{font-size:14px;overflow-wrap:anywhere} #dnb-enroll .dnb-proof.is-verified{border-color:#b8d7c5;background:#f4faf6} #dnb-enroll .dnb-proof.is-verified [data-proof-status]{color:#236b43;font-weight:700} #dnb-enroll [data-otp-form] .dnb-otp{display:block;margin:8px 0 16px;letter-spacing:6px;text-indent:6px} #dnb-enroll [data-foreign]{margin-top:18px} #dnb-enroll [data-ready]{font-size:13px} #dnb-enroll [data-support] a{display:block;color:#aa2649;min-height:44px} #dnb-enroll .dnb-rail__label{color:#656c83} @media(max-width:600px){#dnb-enroll{padding:30px 12px}#dnb-enroll .dnb-console{padding:22px 18px}#dnb-enroll .dnb-form-grid,#dnb-enroll .dnb-proof-grid{grid-template-columns:1fr;gap:16px}#dnb-enroll .dnb-rail__label{display:inline}#dnb-enroll .dnb-rail__bar{width:12px}#dnb-enroll .dnb-verify-head{flex-direction:column;gap:0}#dnb-enroll .dnb-proof .dnb-btn{width:100%}} /* Batch 10 enrollment numbers: fixed course prefix and a short numeric suffix. */ #dnb-enroll .dnb-enrollment-number{display:flex;align-items:stretch;margin-top:7px;border:1px solid var(--line);border-radius:10px;background:var(--field);overflow:hidden} #dnb-enroll .dnb-enrollment-prefix{display:flex;align-items:center;padding:12px 10px 12px 12px;white-space:nowrap;font-size:15px;font-weight:600;color:var(--ink-soft);border-right:1px solid var(--line)} #dnb-enroll .dnb-enrollment-number input{flex:1;width:0;min-width:60px;margin:0;border:0;border-radius:0;background:var(--panel);font-variant-numeric:tabular-nums} #dnb-enroll .dnb-enrollment-number:focus-within{outline:3px solid #a53151;outline-offset:3px} #dnb-enroll .dnb-enrollment-number input:focus-visible{outline:none} #dnb-enroll .dnb-enrollment-help{display:block;margin-top:8px;color:var(--body);font-size:12px;line-height:1.6;font-weight:400} /* Form polish: readable hierarchy, restrained color and consistent field states. */ #dnb-enroll{--line:#dce1eb;--line-soft:#edf0f5;--field:#f8f9fc;--body:#515c72;--muted:#65718a;--pink:#b52d50;--pink-deep:#96203f;--focus-ring:rgba(181,45,80,.13)} #dnb-enroll .dnb-console{box-shadow:0 16px 48px -28px rgba(26,31,62,.24);border-color:#dfe4ee} #dnb-enroll .dnb-console__head{align-items:flex-start;gap:24px;padding-bottom:24px;margin-bottom:24px} #dnb-enroll .dnb-title{font-size:clamp(23px,2.6vw,29px);line-height:1.25;letter-spacing:-.035em} #dnb-enroll .dnb-eyebrow{color:#a7354c;background:none;-webkit-text-fill-color:currentColor;letter-spacing:.15em} #dnb-enroll .dnb-course-title{line-height:1.65;color:#515c72;max-width:58ch} #dnb-enroll .dnb-rail{padding-top:8px;flex-shrink:0} #dnb-enroll .dnb-hint{padding:0;border:0;background:none;color:var(--body);font-size:14px;line-height:1.7;margin:0 0 18px} #dnb-enroll .dnb-returning{border:1px solid #dfe5ee;border-radius:12px;background:#f7f9fc;padding:0 15px;margin:0 0 26px} #dnb-enroll .dnb-returning summary{display:list-item;cursor:pointer;min-height:48px;padding:13px 0;color:#354259;font-size:13px;font-weight:600;line-height:1.65} #dnb-enroll .dnb-returning summary::marker{color:#6a768c} #dnb-enroll .dnb-returning summary:focus-visible{outline:3px solid #a53151;outline-offset:3px;border-radius:3px} #dnb-enroll .dnb-returning p{margin:0 0 15px;font-size:13px;line-height:1.75;color:var(--body)} #dnb-enroll .dnb-form-grid{column-gap:24px;row-gap:24px;align-items:start} #dnb-enroll .dnb-form-grid>label{font-size:13px;line-height:1.5;font-weight:600;color:#29344d} #dnb-enroll .dnb-form-grid input:not([type=hidden]),#dnb-enroll .dnb-form-grid select{min-height:52px;border-color:#cfd7e4;background:#fff;transition:border-color .15s,box-shadow .15s;font-weight:400} #dnb-enroll .dnb-form-grid input::placeholder{color:#747d90;opacity:1} #dnb-enroll .dnb-form-grid input:not([type=hidden]):hover,#dnb-enroll .dnb-form-grid select:hover{border-color:#9ba9bf} #dnb-enroll .dnb-form-grid input:focus,#dnb-enroll .dnb-form-grid select:focus{border-color:#b52d50;box-shadow:0 0 0 3px var(--focus-ring)} #dnb-enroll .dnb-enrollment-number{border-color:#cfd7e4;background:#f1f4f9} #dnb-enroll .dnb-enrollment-number input:focus{box-shadow:none} #dnb-enroll .dnb-enrollment-prefix{color:#354259;font-size:14px;padding-right:12px} #dnb-enroll .dnb-enrollment-help{margin-top:9px;max-width:46ch;color:#5e6980} #dnb-enroll [data-phone-note]{border-top:1px solid var(--line-soft);padding-top:18px;margin:24px 0 0;line-height:1.75;font-size:13px;max-width:78ch;color:var(--body)} #dnb-enroll .dnb-actions{margin-top:22px;gap:16px} #dnb-enroll .dnb-btn{background:#b52d50;color:#fff;border:1px solid transparent;border-radius:11px;min-height:50px;padding:13px 22px;font-size:14px;font-weight:700;box-shadow:0 4px 10px rgba(134,34,64,.1)} #dnb-enroll .dnb-btn:hover:not(:disabled){background:#96203f;box-shadow:0 6px 16px rgba(134,34,64,.16);transform:none} #dnb-enroll .dnb-btn:disabled{background:#e6eaf0;color:#626e84;opacity:1;box-shadow:none;cursor:not-allowed} #dnb-enroll [data-message]{border-color:#d6dfed;background:#f4f7fc;color:#35455f;font-size:14px;line-height:1.65;margin-bottom:20px} #dnb-enroll [data-message][data-tone=error]{border-color:#edc6ce;background:#fff5f6;color:#96273e} #dnb-enroll .dnb-proof{background:#fbfcfe;border-color:#dce3ee;padding:22px} #dnb-enroll .dnb-proof h4{font-size:16px;line-height:1.5} #dnb-enroll .dnb-proof [data-target]{color:#53617a;font-size:14px} #dnb-enroll .dnb-proof [data-proof-status]{font-size:13px;color:#65718a} #dnb-enroll .dnb-proof.is-verified{background:#f1f9f4;border-color:#bedbc8} #dnb-enroll .dnb-proof.is-verified [data-proof-status]{color:#226044} #dnb-enroll .dnb-otp{background:#fff;border:1px solid #cfd7e4;border-radius:10px;min-height:52px;max-width:100%;color:var(--ink)} #dnb-enroll [data-review]{border:1px solid #e7d4b4;background:#fffaf2;padding:22px;border-radius:14px} #dnb-enroll [data-review] p{color:#655942;font-size:14px;line-height:1.75} #dnb-enroll [data-support] a{padding:10px 0;line-height:1.6} #dnb-enroll .dnb-final{border:1px solid #c3dfce;background:#f3faf6;border-radius:14px;padding:26px} @media(max-width:760px){#dnb-enroll .dnb-console__head{flex-direction:column;gap:18px}#dnb-enroll .dnb-rail{padding-top:0}} @media(max-width:600px){#dnb-enroll .dnb-console{padding:24px 18px;border-radius:18px}#dnb-enroll .dnb-form-grid{row-gap:21px}#dnb-enroll .dnb-actions>.dnb-btn{width:100%}#dnb-enroll .dnb-returning{padding:0 12px;margin-bottom:24px}#dnb-enroll .dnb-proof{padding:18px}#dnb-enroll .dnb-rail__node{gap:7px}#dnb-enroll .dnb-rail__bar{margin:0 9px}} #dnb-enroll .dnb-link:disabled{opacity:1;color:#65718a;cursor:not-allowed} #dnb-enroll .dnb-rail__node.is-done .dnb-rail__dot{background:#b52d50;border-color:#b52d50;color:#fff} #dnb-enroll input:user-invalid,#dnb-enroll select:user-invalid{border-color:#b32e48;background:#fff8f9} /* Returning students and calm, visible interaction states. */ #dnb-enroll .dnb-signin-note{display:flex;align-items:center;justify-content:space-between;gap:22px;background:#f5f7fb;border:1px solid #dde4ef;border-radius:14px;padding:18px 20px;margin:0 0 26px} #dnb-enroll .dnb-signin-note strong{color:#263650;font-size:14px}#dnb-enroll .dnb-signin-note p{font-size:13px;line-height:1.7;margin:5px 0 0;max-width:64ch}#dnb-enroll .dnb-btn--secondary{background:white;color:#96304c;border-color:#dbc1c9;box-shadow:none;white-space:nowrap}#dnb-enroll .dnb-btn--secondary:hover{color:white} #dnb-enroll .dnb-welcome{padding:clamp(24px,4vw,40px);border:1px solid #c8dfd4;border-radius:18px;background:linear-gradient(135deg,#f2faf6,#fbfdfc);position:relative} #dnb-enroll .dnb-status-seal{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#deefe5;color:#236345;font-size:24px;font-weight:700;margin-bottom:16px;box-shadow:0 0 0 6px #ecf6f0} #dnb-enroll .dnb-welcome-tag{display:block;color:#376b53;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:20px 0 8px} #dnb-enroll .dnb-welcome h4{font-size:clamp(23px,3vw,30px);line-height:1.3;color:#203d32;letter-spacing:-.025em;margin:0 0 12px}#dnb-enroll .dnb-welcome p{font-size:15px;line-height:1.8;max-width:65ch;margin:0 0 12px}#dnb-enroll .dnb-welcome .dnb-welcome-help{border-top:1px solid #dceae2;padding-top:20px;margin-top:24px;font-size:12px;color:#50665b} #dnb-enroll .dnb-welcome a:not(.dnb-btn){color:#365c4b;text-decoration:underline;text-underline-offset:3px} #dnb-enroll [data-stage=welcome] .dnb-rail{display:none}#dnb-enroll [data-details]:not([hidden]),#dnb-enroll [data-verification]:not([hidden]),#dnb-enroll [data-welcome]:not([hidden]),#dnb-enroll [data-done]:not([hidden]),#dnb-enroll [data-review]:not([hidden]){animation:dnb-state-in .24s ease-out} @keyframes dnb-state-in{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}} #dnb-enroll[aria-busy=true] [data-message]::before{content:"";display:inline-block;width:14px;height:14px;border:2px solid #c9d4e4;border-top-color:#8d3150;border-radius:50%;margin-right:10px;vertical-align:-2px;animation:dnb-spin .8s linear infinite} #dnb-enroll .dnb-proof{transition:background .2s,border-color .2s,box-shadow .2s}#dnb-enroll .dnb-proof:focus-within{border-color:#acb9cf;box-shadow:0 3px 14px rgba(32,49,81,.06)}#dnb-enroll .dnb-proof.is-verified [data-proof-status]{display:inline-block;border-radius:20px;padding:5px 11px;background:#e0f0e6} #dnb-enroll .dnb-final .dnb-step__title{font-size:25px;line-height:1.4}#dnb-enroll .dnb-final p{line-height:1.8}#dnb-enroll [data-message]{transition:background .2s,border-color .2s} @media(max-width:600px){#dnb-enroll .dnb-signin-note{align-items:stretch;flex-direction:column;gap:14px;padding:16px}#dnb-enroll .dnb-signin-note .dnb-btn{text-align:center}#dnb-enroll .dnb-welcome{padding:24px 18px}#dnb-enroll .dnb-welcome .dnb-actions{align-items:stretch;flex-direction:column}#dnb-enroll .dnb-welcome .dnb-btn{width:100%;text-align:center}}