/* Each company's colours are set as inline variables on (see brand_style()). Text is always dark on a light background; the accent is the company's dark colour. */ :root { --banner: #077a7a; --on-banner: #fff; --accent: #077a7a; --on-accent: #fff; --heading: #077a7a; --light: #f4f7f7; --ink: #1f2a2e; --muted: #5b6b70; --line: #dfe7e8; --card: #fff; --err-ink: #b3261e; } * { box-sizing: border-box; } html { font-size: 17px; } /* survey base size; type.css builds its scale on this */ body { margin: 0; background: var(--light); color: var(--ink); } .wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; } /* Banner: logo, then the company name as a small label, then the big title */ .banner { background: var(--banner); color: var(--on-banner); padding: 28px 0 28px; } .banner .logo { display: block; height: 56px; max-width: 320px; object-fit: contain; object-position: left; margin-bottom: 20px; } .banner .eyebrow { opacity: .85; } .banner h1 { margin: 0; font-size: var(--fs-2xl); max-width: 22ch; } main { padding: 28px 16px 64px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 28px 24px 24px; margin-bottom: 20px; } .card h2 { margin: 0 0 16px; color: var(--heading); } /* A short accent rule under each section heading, set to the left rather than centred */ .card h2::after { content: ''; display: block; width: 2.5rem; height: 3px; background: var(--accent); margin-top: .6rem; border-radius: 2px; } .card p { margin: 0 0 12px; } @media (max-width: 560px) { html { font-size: 16px; } .banner h1 { font-size: var(--fs-xl); } } .message { background: #fff8dc; border: 1px solid #f0e2a0; border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; white-space: normal; } .muted { color: var(--muted); } .error { color: var(--err-ink); } .btn { display: inline-block; padding: 12px 28px; border-radius: 8px; border: 0; background: var(--accent); color: var(--on-accent); cursor: pointer; text-decoration: none; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; } .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .btn:hover { filter: brightness(.9); } .btn.disabled { opacity: .45; cursor: not-allowed; } .code-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; } .code-form input { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .14em; width: 8ch; text-align: center; padding: 10px 12px; border: 2px solid #c6d2d4; border-radius: 8px; color: var(--ink); } .code-form input:focus { outline: none; border-color: var(--accent); } @media (max-width: 480px) { .card { padding: 16px; } }