/* Runwayy palette: Dark Denim #324c67 · Denim #527ca8 · Light Denim #b8cfef · Off White #eeecea Theme switching: quiz.js sets from ?theme= or prefers-color-scheme. */ /* GT Pressura Mono — the brand display/body face, self-hosted from the Framer site. Only the Regular (400) weight is available, declared as a single weight so the browser synthesizes bold for the 500-800 requests (faux-bold, until a real bold weight is added). Inter below stays as the fallback for the few glyphs GT Pressura Mono lacks (e.g. the → arrow and ✓ check mark) and as a graceful degrade. */ @font-face { font-family: "GT Pressura Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/gt-pressura-mono-regular.woff2") format("woff2"); } /* Inter, self-hosted (SIL OFL) — fallback only. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-regular.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-medium.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-semibold.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-bold.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/inter-extrabold.woff2") format("woff2"); } :root { color-scheme: light; --bg: #eeecea; /* Off White */ --card: #ffffff; --ink: #324c67; /* Dark Denim */ --muted: #566b80; --faint: #d7dee6; --accent: #527ca8; /* Denim — graphical accents (progress, borders, focus) */ --accent-text: #41648c; /* darker denim for small text on light backgrounds (AA) */ --accent-soft: #e2ebf7; /* Light Denim tint — chips, hovers, gate panel */ --btn-bg: #324c67; --btn-bg-hover: #3d5c7d; --btn-text: #eeecea; --red: #dc2626; --orange: #c2410c; --green: #15803d; --error: #b91c1c; /* darker than --red: 13px error text needs 4.5:1 on the gate */ --pill-text: #ffffff; --brand: #527ca8; /* Denim — the RUNWAYY logo mark */ --radius: 14px; } :root[data-theme="dark"] { color-scheme: dark; --bg: #182635; /* deepened Dark Denim */ --card: #213345; --ink: #eeecea; /* Off White */ --muted: #a3b8cd; --faint: #324459; --accent: #b8cfef; /* Light Denim */ --accent-text: #b8cfef; --accent-soft: rgba(184, 207, 239, 0.10); --btn-bg: #b8cfef; --btn-bg-hover: #cfdff7; --btn-text: #182635; --brand: #b8cfef; /* Light Denim logo mark on dark */ --red: #f87171; --orange: #fb923c; --green: #4ade80; --error: #fca5a5; --pill-text: #182635; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } /* Embedded in an iframe (Framer): size to content so the host can auto-fit it — no full-height stretch, so there's never blank space below the content. */ html.embedded, html.embedded body { height: auto; min-height: 0; } html.embedded .stage { min-height: 0; justify-content: flex-start; } body { font-family: "GT Pressura Mono", "Inter", ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; transition: background-color .3s, color .3s; } .progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--faint); z-index: 10; } .progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width .4s cubic-bezier(.4, 0, .2, 1); } .stage { max-width: 640px; margin: 0 auto; padding: 48px 24px 64px; min-height: 100%; display: flex; flex-direction: column; justify-content: center; } .screen { display: none; animation: rise .45s cubic-bezier(.2, .7, .3, 1); } .screen.active { display: block; } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-soft); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; } /* RUNWAYY logo lockup — wordmark (GT Pressura Mono) + Phosphor plane */ .brand { display: flex; align-items: center; gap: 8px; color: var(--brand); margin-bottom: 24px; } .brand span { font-weight: 700; font-size: 15px; letter-spacing: .14em; } .brand-plane { width: 21px; height: 21px; fill: currentColor; display: block; } .brand-center { justify-content: center; } h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 14px; } h2 { font-size: clamp(20px, 3.6vw, 26px); line-height: 1.3; letter-spacing: -.01em; margin-bottom: 24px; } h3 { font-size: 18px; margin-bottom: 8px; } .lede { font-size: 16px; line-height: 1.65; color: var(--muted); margin-bottom: 28px; max-width: 52ch; } .center { text-align: center; margin-left: auto; margin-right: auto; } .hint { font-size: 12.5px; color: var(--muted); margin-top: 14px; } .hidden { display: none !important; } .btn-primary { font: inherit; font-size: 16px; font-weight: 600; color: var(--btn-text); background: var(--btn-bg); border: 0; border-radius: var(--radius); padding: 14px 26px; cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s, background-color .15s; box-shadow: 0 4px 14px color-mix(in srgb, var(--btn-bg) 35%, transparent); } .btn-primary:hover { transform: translateY(-1px); background: var(--btn-bg-hover); } .btn-primary:disabled { opacity: .6; cursor: wait; transform: none; } .btn-arrow { display: inline-block; transition: transform .15s; } .btn-primary:hover .btn-arrow { transform: translateX(3px); } .btn-ghost { font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 8px; } .btn-ghost:hover { color: var(--ink); background: var(--accent-soft); } /* Questions */ .q-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } #q-number { font-size: 13px; font-weight: 700; color: var(--accent-text); } .q-cat { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--faint); border-radius: 999px; padding: 3px 10px; } .options { display: flex; flex-direction: column; gap: 10px; } .option { display: flex; align-items: center; gap: 14px; text-align: left; font: inherit; font-size: 15.5px; line-height: 1.45; color: var(--ink); background: var(--card); border: 1.5px solid var(--faint); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; width: 100%; transition: border-color .12s, background .12s, transform .12s; } .option:hover { border-color: var(--accent); background: var(--accent-soft); } .option.selected { border-color: var(--accent); background: var(--accent-soft); transform: scale(.99); } .option-key { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--accent-text); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 7px; background: var(--card); } .nav-row { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; } .hint-keys { margin-top: 0; } .hint-keys b { border: 1px solid var(--faint); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; font-weight: 600; } /* Loading */ .spinner { width: 42px; height: 42px; margin: 0 auto 20px; border: 4px solid var(--faint); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #screen-loading { text-align: center; } /* Result */ .score-wrap { position: relative; width: 168px; height: 168px; margin: 0 auto 18px; } .ring { width: 100%; height: 100%; transform: rotate(-90deg); } .ring-bg, .ring-val { fill: none; stroke-width: 10; stroke-linecap: round; } .ring-bg { stroke: var(--faint); } .ring-val { stroke: var(--band-color, var(--accent)); stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.2s cubic-bezier(.3, .7, .3, 1); } .score-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; font-weight: 800; letter-spacing: -.03em; } .score-num small { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 2px; } .band-pill { width: fit-content; margin: 0 auto 16px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pill-text); background: var(--band-color, var(--accent)); padding: 6px 14px; border-radius: 999px; } .breakdown { max-width: 420px; margin: 26px auto 0; } .bd-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .bd-label { flex: 0 0 110px; font-size: 13px; color: var(--muted); } .bd-bar { flex: 1; height: 8px; background: var(--faint); border-radius: 999px; overflow: hidden; } .bd-fill { display: block; height: 100%; width: 0; background: var(--band-color, var(--accent)); border-radius: 999px; transition: width .9s cubic-bezier(.3, .7, .3, 1); } .bd-val { flex: 0 0 30px; font-size: 13px; font-weight: 700; text-align: right; } /* Email gate */ .gate { margin-top: 36px; padding: 26px; background: var(--accent-soft); border-radius: 18px; text-align: center; } .gate p { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 46ch; margin: 0 auto 18px; } #report-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: 0 auto; } #report-form input { font: inherit; font-size: 15px; padding: 13px 16px; color: var(--ink); border: 1.5px solid var(--faint); border-radius: var(--radius); background: var(--card); outline: none; transition: border-color .12s; } #report-form input::placeholder { color: var(--muted); } #report-form input:focus { border-color: var(--accent); } .form-error { font-size: 13px; color: var(--error); margin-top: 10px; min-height: 1em; } .sent { text-align: center; margin-top: 36px; padding: 26px; } .sent-check { width: 54px; height: 54px; margin: 0 auto 14px; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: var(--pill-text); background: var(--green); border-radius: 50%; } .sent p { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; } @media (max-width: 480px) { .stage { padding: 36px 18px 48px; } .hint-keys { display: none; } .bd-label { flex-basis: 90px; } }