/* career.html ONLY — application modal affidavit glass (form-card + Pass B pills)
Scoped: #application-modal — does not touch career-page-body main */
/* --- form-card shell nullify (affidavit 4559) --- */
html[data-career-page] #application-modal .form-card,
html[data-career-page] #application-modal .career-application-card {
position: relative;
isolation: isolate;
overflow: visible;
display: flex;
flex-direction: column;
gap: 0;
padding: 0 !important;
margin: 0;
width: 100%;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* --- glass-caption tray (affidavit 4556–4558) --- */
html[data-career-page] #application-modal .glass-caption {
position: relative;
z-index: 1;
display: grid;
gap: 14px;
width: 100%;
padding: clamp(16px, 2.4vw, 24px);
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.62);
border-radius: 22px;
background:
radial-gradient(circle at top right, rgba(72, 27, 130, 0.12), transparent 34%),
linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(250, 248, 255, 0.78) 52%, rgba(245, 240, 252, 0.68)),
rgba(255, 255, 255, 0.5);
box-shadow:
0 24px 52px rgba(72, 27, 130, 0.16),
0 10px 22px rgba(72, 27, 130, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.94),
inset 0 -2px 0 rgba(72, 27, 130, 0.08);
backdrop-filter: blur(22px) saturate(150%);
-webkit-backdrop-filter: blur(22px) saturate(150%);
}
html[data-career-page] #application-modal .glass-caption::before {
content: "";
position: absolute;
inset: 1px;
z-index: 1;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.16));
pointer-events: none;
}
html[data-career-page] #application-modal .glass-caption > * {
position: relative;
z-index: 2;
}
/* --- intro + help pills (affidavit 4564) --- */
html[data-career-page] #application-modal .apply__intro,
html[data-career-page] #application-modal .help,
html[data-career-page] #application-modal .form-note {
margin: 0 !important;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 18px;
padding: 12px 14px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(245, 240, 252, 0.46)),
rgba(255, 255, 255, 0.38);
box-shadow:
0 12px 24px rgba(72, 27, 130, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
color: #444444 !important;
font-size: 0.88rem !important;
line-height: 1.55 !important;
}
/* --- fieldset legend pills --- */
html[data-career-page] #application-modal .apply-fieldset > legend {
display: inline-block;
width: fit-content;
max-width: 100%;
margin: 0 0 12px !important;
padding: 9px 14px !important;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 999px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(245, 240, 252, 0.46)),
rgba(255, 255, 255, 0.38);
box-shadow:
0 12px 24px rgba(72, 27, 130, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
font-size: 0.78rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #275c53 !important;
}
/* --- field label pills --- */
html[data-career-page] #application-modal .field > span {
display: inline-block;
width: fit-content;
max-width: 100%;
margin-bottom: 6px;
padding: 6px 10px !important;
border: 1px solid rgba(255, 255, 255, 0.48);
border-radius: 14px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 240, 252, 0.42)),
rgba(255, 255, 255, 0.34);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
font-size: 0.78rem !important;
font-weight: 700 !important;
color: #2e0c5e !important;
}
/* --- inputs: glass inset --- */
html[data-career-page] #application-modal .field input,
html[data-career-page] #application-modal .field select,
html[data-career-page] #application-modal .field textarea {
border: 1px solid rgba(72, 27, 130, 0.14) !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.88) !important;
box-shadow: inset 0 1px 2px rgba(72, 27, 130, 0.06);
}
html[data-career-page] #application-modal .field input:focus,
html[data-career-page] #application-modal .field select:focus,
html[data-career-page] #application-modal .field textarea:focus {
border-color: rgba(72, 27, 130, 0.32) !important;
box-shadow:
0 0 0 3px rgba(72, 27, 130, 0.1),
inset 0 1px 2px rgba(72, 27, 130, 0.06);
}
/* --- checkbox rows --- */
html[data-career-page] #application-modal .check {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 0 0 10px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.48);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 240, 252, 0.42)),
rgba(255, 255, 255, 0.34);
}
html[data-career-page] #application-modal .check span {
font-size: 0.82rem !important;
line-height: 1.45 !important;
color: #444444 !important;
}
/* --- submit row --- */
html[data-career-page] #application-modal .career-application-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: flex-start;
margin-top: 8px;
}
html[data-career-page] #application-modal .career-application-actions .btn--gold {
border-radius: 18px !important;
padding: 12px 20px !important;
font-weight: 700 !important;
box-shadow:
0 14px 28px rgba(250, 204, 21, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
html[data-career-page] #application-modal .apply-form {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
html[data-career-page] #application-modal .apply-fieldset {
margin-bottom: 20px !important;
padding: 12px 0 0 !important;
border-top: 1px solid rgba(72, 27, 130, 0.08);
}
html[data-career-page] #application-modal .apply-fieldset:first-of-type {
border-top: 0;
padding-top: 0 !important;
}
@media (max-width: 640px) {
html[data-career-page] #application-modal .glass-caption {
padding: 14px;
gap: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
html[data-career-page] #application-modal .glass-caption {
transition: none !important;
}
}