/* ============================================================
ASSESS.HTML — VISUAL REDESIGN PATCH
============================================================
Drop-in CSS override for bmad_emigrate/deploy/assess.html.
Touches NO JS. All existing class names and IDs preserved.
HOW TO APPLY (1 of 2 ways):
Option A — paste at the END of the existing inline ).
Option B — paste into a new CSS file, e.g.
/assets/assess-redesign.css, and reference it in
AFTER the existing inline styles:
Tested against assess.html v with class names:
.quiz-wrap .quiz .quiz__card .step .step__label
.step__question .step__hint .options .option .chips .chip
.progress .progress__fill .progress__text .progress__time
.progress__dots .pdot .quiz__nav .btn .btn--primary
.text-input .select-wrap .select-input .range-input
============================================================ */
/* ---------- CANVAS ---------- */
.quiz-wrap{
background:#FAF7F0 !important;
padding:32px 16px 96px !important;
}
.quiz{
max-width:720px !important;
display:flex;
flex-direction:column;
gap:20px;
}
/* ---------- HIDE THE OLD HERO ---------- */
.assess-hero{display:none !important}
/* ---------- SHARED CARD SHELL ---------- */
.progress,
.quiz__card{
background:#FFFFFF !important;
border-radius:14px !important;
border:1px solid rgba(12,46,43,0.06) !important;
border-top:none !important;
box-shadow:0 1px 4px rgba(12,46,43,0.05) !important;
position:relative;
overflow:hidden;
padding:0 !important;
margin:0 !important;
}
.progress::before,
.quiz__card::before{
content:"";
position:absolute;
left:0;right:0;top:0;
height:3px;
background:#1A5C50;
border-radius:14px 14px 0 0;
}
/* ---------- PROGRESS CARD ---------- */
.progress{
padding:24px 32px !important;
margin-bottom:0 !important;
}
@media(max-width:560px){.progress{padding:20px 22px !important}}
.progress__text{
display:flex !important;
justify-content:space-between !important;
align-items:baseline !important;
gap:16px;
margin-top:0 !important;
margin-bottom:14px;
}
.progress__step-num{
font:700 17px/1.2 'Fraunces',Georgia,serif !important;
color:#0C2E2B !important;
position:relative;
display:inline-block;
text-decoration:none !important;
}
.progress__step-num::after{
/* underline removed — bold weight is enough */
display:none;
content:"";
position:absolute;
left:0;right:0;
bottom:-3px;
height:2px;
background:#1A5C50;
}
.progress__section{
font:500 15px/1.2 'Inter',system-ui,sans-serif !important;
color:#3D4451 !important;
text-align:center !important;
flex:1;
}
#progressPct{
font:600 15px/1.2 'JetBrains Mono',monospace !important;
color:#1A5C50 !important;
letter-spacing:0.02em;
}
/* hide the old shimmer bar entirely — dots replace it */
.progress__bar{display:none !important}
.progress__time{
font:italic 400 13px/1.2 'Fraunces',Georgia,serif !important;
color:#6B7280 !important;
text-align:right !important;
margin:0 0 14px 0 !important;
}
.progress__dots{
display:flex !important;
justify-content:center !important;
gap:8px !important;
margin-top:0 !important;
}
.pdot{
width:9px !important;
height:9px !important;
border-radius:50% !important;
background:rgba(12,46,43,0.22) !important;
transition:all .25s cubic-bezier(0.4,0,0.2,1);
display:inline-block;
}
.pdot.completed{background:#1A5C50 !important}
.pdot.current{
background:#1A5C50 !important;
box-shadow:0 0 0 4px rgba(26,92,80,0.18) !important;
transform:scale(1.2);
}
#tensionHint{
margin-top:10px !important;
background:rgba(26,92,80,0.06) !important;
border-radius:8px !important;
padding:8px 14px !important;
font:400 12px/1.4 'Inter',system-ui,sans-serif !important;
color:#1A5C50 !important;
}
/* ---------- QUESTION CARD ---------- */
.quiz__card{
padding:36px 40px 32px !important;
}
@media(max-width:560px){.quiz__card{padding:28px 22px 24px !important}}
/* The intro screen has its own dark gradient background — leave it alone
(it's inline-styled). But push it inside the new card shape: */
.step[data-step="intro"] .intro{
margin:-36px -40px 0 !important;
border-radius:14px 14px 0 0 !important;
}
@media(max-width:560px){.step[data-step="intro"] .intro{margin:-28px -22px 0 !important}}
/* ---------- STEP TYPOGRAPHY ---------- */
.step__label{
display:inline-flex !important;
align-items:center;
gap:8px !important;
margin-bottom:6px !important;
font:600 12px/1 'Inter',system-ui,sans-serif !important;
text-transform:uppercase !important;
letter-spacing:0.12em !important;
color:#1A5C50 !important;
background:none !important;
padding:0 !important;
}
.step__label::before{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
border-radius:6px;
background:rgba(26,92,80,0.12);
font-size:11px !important;
margin:0 !important;
opacity:1 !important;
}
.step__label-sub{
display:block !important;
font:italic 400 14px/1.4 'Fraunces',Georgia,serif !important;
color:#6B7280 !important;
text-transform:none !important;
letter-spacing:0 !important;
margin:0 0 18px 30px !important;
}
.step__question{
font:600 28px/1.2 'Fraunces',Georgia,serif !important;
color:#0C2E2B !important;
letter-spacing:-0.015em !important;
margin:0 0 12px !important;
text-wrap:balance;
}
@media(max-width:560px){.step__question{font-size:24px !important}}
.step__hint{
font:400 15px/1.55 'Inter',system-ui,sans-serif !important;
color:#3D4451 !important;
margin:0 0 28px !important;
text-wrap:pretty;
}
/* ---------- RADIO OPTIONS ---------- */
.options{gap:10px !important}
.option{
border:1.5px solid rgba(12,46,43,0.12) !important;
border-radius:8px !important;
padding:18px 20px !important;
min-height:auto !important;
font:400 16px/1.3 'Inter',system-ui,sans-serif !important;
color:#0C2E2B !important;
background:#FFFFFF !important;
transition:all .15s cubic-bezier(0.4,0,0.2,1);
gap:14px !important;
}
.option:hover{
border-color:#1A5C50 !important;
background:#FFFFFF !important;
}
.option.selected{
border-color:#1A5C50 !important;
background:rgba(26,92,80,0.04) !important;
box-shadow:none !important;
color:#0C2E2B !important;
}
.option__radio{
width:20px !important;
height:20px !important;
border:1.5px solid #C8CCD2 !important;
background:#FFFFFF !important;
flex-shrink:0;
}
.option.selected .option__radio{
border-color:#1A5C50 !important;
background:#1A5C50 !important;
}
.option.selected .option__radio::after{
width:8px !important;
height:8px !important;
background:#FFFFFF !important;
}
/* ---------- CHIPS (multi-select) ---------- */
.chips{gap:8px !important}
.chip{
border:1.5px solid rgba(12,46,43,0.12) !important;
border-radius:999px !important;
padding:10px 16px !important;
min-height:auto !important;
font:500 14px/1 'Inter',system-ui,sans-serif !important;
color:#0C2E2B !important;
background:#FFFFFF !important;
transition:all .15s;
}
.chip:hover{
border-color:#1A5C50 !important;
background:#FFFFFF !important;
}
.chip.selected{
border-color:#1A5C50 !important;
background:rgba(26,92,80,0.06) !important;
color:#1A5C50 !important;
}
.chip.selected::before{
content:"\2713";
font-weight:700;
margin-right:6px;
color:#1A5C50;
}
/* ---------- INPUTS ---------- */
.text-input,
.select-input{
border:1.5px solid rgba(26,92,80,0.55) !important;
border-radius:8px !important;
padding:16px 18px !important;
min-height:auto !important;
font:400 16px/1.3 'Inter',system-ui,sans-serif !important;
color:#0C2E2B !important;
background:#FFFFFF !important;
transition:border-color .15s,box-shadow .15s;
}
.text-input:focus,
.select-input:focus{
border-color:#1A5C50 !important;
box-shadow:0 0 0 3px rgba(26,92,80,0.12) !important;
}
.select-input{padding-right:44px !important}
.select-wrap::after{
border-top-color:#1A5C50 !important;
}
.range-input{
height:6px !important;
background:rgba(12,46,43,0.08) !important;
border-radius:3px !important;
}
.range-input::-webkit-slider-thumb{
background:#1A5C50 !important;
box-shadow:0 2px 8px rgba(26,92,80,0.3) !important;
}
.range-input::-moz-range-thumb{
background:#1A5C50 !important;
box-shadow:0 2px 8px rgba(26,92,80,0.3) !important;
}
.range-display{color:#1A5C50 !important}
/* ---------- NAV BUTTONS ---------- */
.quiz__nav{
margin-top:28px !important;
gap:12px;
}
.btn{
border-radius:8px !important;
font:600 15px/1 'Inter',system-ui,sans-serif !important;
transition:all .15s !important;
min-height:auto !important;
}
.btn--primary{
background:#1A5C50 !important;
color:#fff !important;
padding:14px 28px !important;
border:0 !important;
}
.btn--primary:hover:not(:disabled){
background:#267A6B !important;
transform:none !important;
box-shadow:none !important;
color:#fff !important;
}
.btn--primary:disabled{
background:#C8CCD2 !important;
color:#fff !important;
}
.btn--ghost{
color:#6B7280 !important;
padding:12px 16px !important;
}
.btn--ghost:hover{
color:#0C2E2B !important;
background:rgba(12,46,43,0.05) !important;
border-radius:8px;
}
/* ---------- BACKGROUND COLORS ON BODY ---------- */
body{background:#FAF7F0 !important}
/* ---------- FIX: DUPLICATE NATIONALITY INPUT ----------
search.v2.js enhances the native