/* Q2BC Form Engine — page chrome + SurveyJS brand theme. */ :root { --accent: #2B9CD8; --navy: #1B2A4A; /* SurveyJS theme variables */ --sjs-primary-backcolor: var(--accent); --sjs-primary-backcolor-dark: #2489BE; --sjs-primary-backcolor-light: rgba(43, 156, 216, 0.1); --sjs-corner-radius: 12px; --sjs-base-unit: 8px; --sjs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f4f6f9; color: #1a2230; } .wrap { max-width: 820px; margin: 0 auto; padding: 1rem; } .brandbar { display: flex; align-items: center; gap: .6rem; margin: .6rem 0 1rem; } .logo { width: 36px; height: 36px; border-radius: 8px; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; } .brandbar b { font-size: .95rem; letter-spacing: .02em; color: var(--navy); } .panel { background: #fff; border: 1px solid #e5e9f0; border-radius: 16px; padding: 1.4rem 1.3rem; box-shadow: 0 8px 30px rgba(20, 40, 60, .06); margin-bottom: 1rem; } .panel h2, .panel h3 { color: var(--navy); margin-top: 0; } .loading { color: #6b7686; } .btn { display: inline-block; min-height: 48px; padding: .8rem 1.4rem; border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer; border: 0; background: var(--accent); color: #fff; text-decoration: none; } .btn:hover { filter: brightness(1.05); } .stack { display: flex; flex-direction: column; gap: .8rem; max-width: 420px; } .stack label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .92rem; } .stack input { min-height: 48px; padding: .6rem .9rem; border: 1.5px solid #e2e7ef; border-radius: 12px; font-size: 1rem; font-weight: 400; } .stack input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .foot { text-align: center; color: #9aa4b2; font-size: .78rem; margin: 1rem 0 2rem; } a { color: var(--accent); } /* SurveyJS surface sits flush inside our page */ #surveyElement { padding: 0; overflow: hidden; } #surveyElement .sd-root-modern { border-radius: 16px; } /* The page is deliberately light + branded; tell dark-mode tools to leave it alone */ :root { color-scheme: light only; } /* ============================================================ Interactive-control visibility hardening — WCAG 2.2 1.4.11 (non-text contrast, 3:1) + survives a darkening tool that ignores color-scheme/darkreader-lock. One light palette only. Every rule needs !important: vendor/survey-core.min.css loads AFTER app.css (end of , see engine/app.py form_shell()) and none of its own rules use !important, so equal-specificity ties go to whoever is !important, not whoever loads last. Expert contrast review S428: 12_Claude/scratch/Form_Recipes_S428/contrast_expert_review.md ============================================================ */ :root { /* Mid-tone, chosen to clear 3:1 whether the rendered background stays white (designed) or gets forced dark by a tool (worst case): 4.29:1 on #ffffff, 4.05:1 on a #1a1a1a dark-repaint simulation. */ --ctl-border: #7a7a7a; } /* ---- Checkboxes + radios ---- */ #surveyElement input[type="checkbox"], #surveyElement input[type="radio"] { accent-color: var(--accent); } .sd-checkbox__decorator, .sd-radio__decorator { border: 2px solid var(--ctl-border) !important; background: #ffffff !important; } .sd-checkbox--checked .sd-checkbox__decorator, .sd-radio--checked .sd-radio__decorator { background: var(--accent) !important; border-color: var(--accent) !important; } /* Tick fill lives on the nested , not the outer