/*
* mini-apps.css — shared design system for UConnect's lead-generation
* diagnostic mini-apps.
*
* USAGE
* Each app's must load the two Google Font families this system uses,
* matching the convention already used by the main UConnect site:
*
*
*
*
*
* Utility/monospace text intentionally uses the OS system monospace stack
* (no webfont) to keep page weight down — it matches the mono stack already
* used on the main site.
*
* Then load this stylesheet after the fonts:
*
*
* All engine-rendered markup (see mini-apps.js) uses only the classes defined
* in this file, prefixed `ma-`. Nothing here is app-specific — app authors
* should not need to write their own CSS beyond, at most, layout tweaks.
*
* This design system commits to a single fixed light palette (paper/ink) —
* it is not theme-aware, matching the print-poster look of the brand.
*/
:root {
--ma-ink: #1B2A33;
--ma-paper: #F7F5F0;
--ma-rule: #DCD8CE;
--ma-highlighter: #F2C230;
--ma-selection: #2E6FA3;
/* Muted — secondary text, assumptions, progress, labels.
*
* Matches the visual spec's exact hex. Note for future maintainers: this
* measures ~4.0:1 contrast on Paper (#F7F5F0), just under WCAG AA's 4.5:1
* threshold for normal-size text, and every use of Muted here (progress,
* assumptions, labels) is normal-size. A prior draft substituted #5B6B74
* (same hue, ~5.07:1) to clear AA, but the spec calls for this value
* literally, so it stays as specified pending an explicit design decision
* to change it. Muted is never the sole signal for anything functional
* (selection state, errors, etc. all also change border/weight/copy), so
* this is a legibility nicety to revisit, not an accessibility blocker.
*/
--ma-muted: #6E7B84;
--ma-font-display: "Archivo Condensed", "Archivo", Arial, sans-serif;
--ma-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--ma-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--ma-max-width: 560px;
--ma-radius: 3px;
--ma-transition-duration: 260ms;
}
/* ---------- Page-level reset ---------- */
/* Each mini-app page's holds nothing but the #app mount point, so it
is safe (and necessary, to avoid a white flash before JS mounts) to set
the page background here. */
html, body {
margin: 0;
background: var(--ma-paper);
}
/* ---------- Reset (scoped, minimal) ---------- */
.ma-app, .ma-app *, .ma-app *::before, .ma-app *::after {
box-sizing: border-box;
}
.ma-app {
font-family: var(--ma-font-body);
color: var(--ma-ink);
background: var(--ma-paper);
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.ma-app button {
font: inherit;
color: inherit;
}
.ma-app a {
color: var(--ma-selection);
}
/* ---------- Layout ---------- */
.ma-container {
width: 100%;
max-width: var(--ma-max-width);
margin: 0 auto;
padding: 32px 24px 48px;
flex: 1;
display: flex;
flex-direction: column;
}
.ma-stage {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
}
/* ---------- Screen transitions ---------- */
/* Cross-fade + horizontal slide between question screens. Disabled entirely
under prefers-reduced-motion (screens simply swap). */
.ma-screen {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
opacity: 0;
transform: translateX(24px);
transition: transform var(--ma-transition-duration) ease, opacity var(--ma-transition-duration) ease;
}
.ma-screen--from-left {
transform: translateX(-24px);
}
.ma-screen--active {
opacity: 1;
transform: translateX(0);
}
.ma-screen--exit-left {
opacity: 0;
transform: translateX(-24px);
}
.ma-screen--exit-right {
opacity: 0;
transform: translateX(24px);
}
.ma-stage[data-animating="true"] .ma-screen {
position: absolute;
top: 0;
left: 0;
right: 0;
}
@media (prefers-reduced-motion: reduce) {
.ma-screen {
transition: none;
transform: none;
opacity: 1;
}
}
/* ---------- Focus & keyboard visibility ---------- */
.ma-app :focus {
outline: none;
}
.ma-app :focus-visible {
outline: 2px solid var(--ma-selection);
outline-offset: 3px;
}
.ma-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------- Utility / monospace text ---------- */
.ma-mono {
font-family: var(--ma-font-mono);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 12px;
color: var(--ma-muted);
}
.ma-progress {
margin: 0 0 24px;
}
.ma-section-label {
margin: 0 0 8px;
}
/* ---------- Landing screen ---------- */
.ma-landing {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20px;
}
.ma-landing__name {
font-family: var(--ma-font-display);
font-weight: 700;
letter-spacing: -0.01em;
font-size: clamp(36px, 9vw, 56px);
line-height: 1.02;
margin: 0;
}
.ma-landing__promise {
font-size: 18px;
line-height: 1.5;
color: var(--ma-ink);
margin: 0;
max-width: 46ch;
}
/* ---------- Buttons ---------- */
.ma-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 56px;
padding: 14px 24px;
border: 1px solid transparent;
border-radius: var(--ma-radius);
font-family: var(--ma-font-body);
font-weight: 600;
font-size: 16px;
cursor: pointer;
text-decoration: none;
transition: none;
}
.ma-btn--primary {
background: var(--ma-highlighter);
color: var(--ma-ink);
border-color: var(--ma-highlighter);
}
.ma-btn--primary:hover {
background: #eab820;
border-color: #eab820;
}
.ma-btn--primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ma-btn--secondary {
background: transparent;
color: var(--ma-ink);
border-color: var(--ma-rule);
}
.ma-btn--secondary:hover {
border-color: var(--ma-ink);
}
/* ---------- Question screens ---------- */
.ma-question {
flex: 1;
display: flex;
flex-direction: column;
}
.ma-question__prompt {
font-family: var(--ma-font-display);
font-weight: 700;
letter-spacing: -0.01em;
font-size: clamp(26px, 6vw, 36px);
line-height: 1.1;
margin: 0 0 28px;
}
.ma-options {
list-style: none;
margin: 0 0 8px;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.ma-option {
display: flex;
align-items: center;
width: 100%;
min-height: 56px;
padding: 14px 20px;
background: transparent;
border: 1px solid var(--ma-rule);
border-radius: var(--ma-radius);
font-family: var(--ma-font-body);
font-size: 16px;
font-weight: 400;
color: var(--ma-ink);
text-align: left;
cursor: pointer;
}
.ma-option__key {
font-family: var(--ma-font-mono);
font-size: 11px;
color: var(--ma-muted);
margin-right: 14px;
flex: none;
}
.ma-option[aria-pressed="true"] {
border-color: var(--ma-selection);
color: var(--ma-selection);
font-weight: 600;
}
.ma-option[aria-pressed="true"] .ma-option__key {
color: var(--ma-selection);
}
.ma-field {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.ma-label {
font-size: 15px;
color: var(--ma-muted);
}
.ma-input {
width: 100%;
min-height: 56px;
padding: 14px 18px;
border: 1px solid var(--ma-rule);
border-radius: var(--ma-radius);
background: var(--ma-paper);
font-family: var(--ma-font-body);
font-size: 18px;
color: var(--ma-ink);
}
.ma-input:focus-visible {
border-color: var(--ma-selection);
}
.ma-input[aria-invalid="true"] {
border-color: var(--ma-ink);
}
.ma-question__actions {
margin-top: auto;
padding-top: 24px;
}
.ma-nav {
margin-top: 20px;
}
.ma-back {
background: none;
border: none;
padding: 8px 0;
font-family: var(--ma-font-mono);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 12px;
color: var(--ma-muted);
cursor: pointer;
align-self: flex-start;
}
/* ---------- Result screen ---------- */
.ma-result {
flex: 1;
display: flex;
flex-direction: column;
}
.ma-result-figure {
margin: 8px 0 20px;
}
.ma-result-figure__value {
font-family: var(--ma-font-display);
font-weight: 700;
letter-spacing: -0.01em;
font-size: clamp(64px, 16vw, 140px);
line-height: 0.95;
color: var(--ma-ink);
margin: 0;
}
.ma-result-figure__underline {
height: 8px;
width: 140px;
max-width: 40%;
background: var(--ma-highlighter);
margin-top: 10px;
}
.ma-result__interpretation {
font-size: 19px;
line-height: 1.5;
margin: 0 0 28px;
}
.ma-breakdown {
margin: 0 0 28px;
padding: 0;
list-style: none;
border-top: 1px solid var(--ma-rule);
padding-top: 16px;
}
.ma-breakdown li {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 6px 0;
font-size: 15px;
line-height: 1.4;
}
.ma-assumptions {
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.ma-assumptions li {
font-family: var(--ma-font-mono);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 11px;
color: var(--ma-muted);
line-height: 1.8;
}
.ma-result__problem {
font-size: 16px;
line-height: 1.5;
margin: 0 0 28px;
}
.ma-result__why {
font-size: 16px;
line-height: 1.6;
margin: 0 0 32px;
}
/* ---------- Optional secondary "copy your number" CTA ---------- */
.ma-copy-row {
margin-bottom: 12px;
}
.ma-copy-confirm {
font-family: var(--ma-font-mono);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 12px;
color: var(--ma-selection);
margin: 10px 0 0;
opacity: 0;
transition: opacity 200ms ease;
}
.ma-copy-confirm--visible {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.ma-copy-confirm {
transition: none;
}
}
/* ---------- CTA -> inline lead form (in-place cross-fade) ---------- */
.ma-cta-slot {
margin-bottom: 16px;
transition: opacity 200ms ease;
opacity: 1;
}
.ma-cta-slot--fading {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.ma-cta-slot {
transition: none;
}
}
.ma-lead-form {
display: flex;
flex-direction: column;
}
.ma-form-error {
color: var(--ma-ink);
font-weight: 700;
font-size: 14px;
margin: -4px 0 16px;
}
/* ---------- Confirmation ---------- */
.ma-confirm {
border: 1px solid var(--ma-selection);
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ma-confirm__headline {
font-family: var(--ma-font-display);
font-weight: 700;
font-size: 24px;
margin: 0;
}
.ma-confirm__body {
font-size: 15px;
line-height: 1.5;
margin: 0;
color: var(--ma-ink);
}
/* ---------- Start again ---------- */
.ma-start-again {
display: inline-block;
margin-top: 16px;
background: none;
border: none;
padding: 4px 0;
font-size: 13px;
color: var(--ma-selection);
text-decoration: underline;
cursor: pointer;
}