29 lines
3.8 KiB
CSS
29 lines
3.8 KiB
CSS
@import url('/static/portal/common/operations.css');
|
|
.questionnaire-page { max-width: 980px; }
|
|
.questionnaire-heading { margin-bottom: var(--space-5); padding: var(--space-6); display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); color: #f7fbfa; background: linear-gradient(122deg, #12302e, #1d5e55); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); }
|
|
.questionnaire-heading h1 { max-width: 860px; margin: 0; font-size: clamp(30px, 5vw, 46px); line-height: 1.18; letter-spacing: 0; }
|
|
.questionnaire-heading p { max-width: 680px; margin: var(--space-3) 0 0; color: rgba(247,251,250,.74); line-height: 1.75; }
|
|
.questionnaire-heading__eyebrow { margin: 0 0 var(--space-2) !important; font-size: var(--fs-small); font-weight: 700; }
|
|
.questionnaire-heading__status { min-width: 110px; display: grid; justify-items: end; gap: var(--space-1); }
|
|
.questionnaire-heading__status strong { font-size: 22px; font-variant-numeric: tabular-nums; }
|
|
.questionnaire-heading__status span { color: rgba(247,251,250,.62); font-size: var(--fs-small); }
|
|
.questionnaire-progress { height: 4px; margin: 0 var(--space-2) var(--space-5); overflow: hidden; background: var(--line); border-radius: 2px; }
|
|
.questionnaire-progress span { display: block; width: 0; height: 100%; background: var(--brand); transition: width 300ms ease; }
|
|
.questionnaire-panel { min-height: 420px; }
|
|
.questionnaire-content { padding: var(--space-6); }
|
|
.questionnaire-count { margin: 0 0 var(--space-2); color: var(--brand-dark); font-size: var(--fs-small); font-weight: 700; }
|
|
.questionnaire-title { max-width: 760px; margin: 0 0 var(--space-5); font-size: 24px; line-height: 1.5; }
|
|
.questionnaire-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
|
|
.questionnaire-option { position: relative; min-height: 64px; padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3); color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
|
|
.questionnaire-option:hover { border-color: var(--brand); transform: translateY(-1px); }
|
|
.questionnaire-option:has(input:checked) { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand); }
|
|
.questionnaire-option input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--brand); }
|
|
.questionnaire-actions { margin-top: var(--space-6); padding-top: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--line); }
|
|
.questionnaire-declaration { padding: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ink-soft); background: var(--surface-soft); border-radius: var(--radius-md); line-height: 1.7; }
|
|
.questionnaire-declaration input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--brand); }
|
|
.questionnaire-complete { min-height: 420px; padding: var(--space-7); display: grid; place-items: center; text-align: center; }
|
|
.questionnaire-complete__mark { width: 56px; height: 56px; margin: 0 auto var(--space-4); display: grid; place-items: center; color: var(--surface); background: var(--brand); border-radius: 50%; font-size: 26px; }
|
|
.questionnaire-complete h2 { margin: 0; font-size: 26px; }
|
|
.questionnaire-complete p { max-width: 520px; margin: var(--space-3) auto var(--space-5); color: var(--muted); line-height: 1.75; }
|
|
@media (max-width: 700px) { .questionnaire-heading { align-items: flex-start; flex-direction: column; } .questionnaire-heading__status { justify-items: start; } .questionnaire-options { grid-template-columns: 1fr; } .questionnaire-content { padding: var(--space-4); } .questionnaire-actions .button { flex: 1; } }
|