/* PicksYou site.css (design/tokens.css becomes public/css/site.css) The one stylesheet for the public site. Hand-written, no build step, no webfont. Light first; the dark set follows the system preference, or a data-theme attribute on when a page sets one (a future user preference, and what the mockup theme switch uses). Token names match the admin layout so the two never drift apart in meaning. Rules this file enforces by construction: - reading text is never below 17px; labels and footers never below 15px - every grid fills its row; a capped text block never has a hole beside it - no motion except the progress fill - the only tag ever emitted inside answer text is , styled here */ /* ---------------------------------------------------------------- tokens */ :root { color-scheme: light; /* colour */ --ink: #1c2130; --muted: #58607a; --accent: #3b4bbf; --accent-ink: #ffffff; --bg: #f5f6fa; --surface: #ffffff; --surface-2: #eef0f5; --line: #dde0ea; --line-strong: #b9bfd1; --ok: #1c7a4a; --ok-bg: #e4f3ea; --warn: #8a5a00; --warn-bg: #fff1d2; --bad: #a32020; --bad-bg: #fbe5e5; --mark: #ffe9a8; --mark-ink: #1c2130; --shadow: 0 1px 2px rgba(28, 33, 48, 0.06); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2358607a' stroke-width='2'/%3E%3C/svg%3E"); /* type: system stack, no webfont */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-meta: 15px; /* labels, chips, footers; never a sentence to read */ --fs-body: 17px; /* every sentence a visitor reads, answer text included */ --fs-lede: 19px; --fs-h3: 21px; --fs-h2: 26px; --fs-h1: clamp(30px, 4.2vw, 40px); --fs-count: clamp(26px, 3.4vw, 34px); --lh: 1.6; /* space and shape */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --radius: 8px; --radius-s: 4px; --radius-pill: 999px; --container: 1200px; --gutter: 20px; --control: 48px; /* inputs and buttons: a thumb-sized target */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink: #e6e8f0; --muted: #a6acc2; --accent: #8b9aff; --accent-ink: #0f1220; --bg: #12141c; --surface: #191c27; --surface-2: #1f2333; --line: #2b2f40; --line-strong: #434961; --ok: #5ed39b; --ok-bg: #14301f; --warn: #e0b25c; --warn-bg: #33270a; --bad: #ff8b8b; --bad-bg: #3a1a1a; --mark: #6a5716; --mark-ink: #f3ecd0; --shadow: none; --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a6acc2' stroke-width='2'/%3E%3C/svg%3E"); } } :root[data-theme="dark"] { color-scheme: dark; --ink: #e6e8f0; --muted: #a6acc2; --accent: #8b9aff; --accent-ink: #0f1220; --bg: #12141c; --surface: #191c27; --surface-2: #1f2333; --line: #2b2f40; --line-strong: #434961; --ok: #5ed39b; --ok-bg: #14301f; --warn: #e0b25c; --warn-bg: #33270a; --bad: #ff8b8b; --bad-bg: #3a1a1a; --mark: #6a5716; --mark-ink: #f3ecd0; --shadow: none; --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a6acc2' stroke-width='2'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh); min-height: 100svh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } a { color: var(--accent); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s3); letter-spacing: -0.01em; overflow-wrap: anywhere; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 var(--s4); } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 var(--s4); padding-left: 1.2em; } li { margin: 0 0 var(--s2); } .muted { color: var(--muted); } .meta { font-size: var(--fs-meta); color: var(--muted); } .num { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); font-size: var(--fs-meta); } .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; } /* The business name inside an answer. The one highlight on the site. */ mark { background: var(--mark); color: var(--mark-ink); padding: 0 0.15em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* A match a person is still checking: underlined, never highlighted. */ mark.possible { background: transparent; color: inherit; padding: 0; border-radius: 0; border-bottom: 2px dashed var(--warn); } .wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* Notice pages (rate limited, unsubscribe, errors): one narrow column and everything on the page, header and footer included, shares its left edge. */ .narrow .wrap { max-width: 720px; } @media (max-width: 599px) { :root { --gutter: 16px; } } /* ---------------------------------------------------------------- header */ .topbar { background: var(--surface); border-bottom: 1px solid var(--line); } .topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); min-height: 60px; padding-top: var(--s2); padding-bottom: var(--s2); } .brand { font-weight: 700; font-size: 19px; letter-spacing: 0.01em; color: var(--accent); text-decoration: none; margin-right: auto; padding: var(--s2) 0; } .topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); font-size: var(--fs-meta); } .topbar nav a { color: var(--ink); text-decoration: none; padding: var(--s2) 0; } .topbar nav a:hover { text-decoration: underline; } .langs { display: inline-flex; gap: 2px; } .langs a { padding: var(--s2) var(--s2); border-radius: var(--radius-s); } .langs a[aria-current="true"] { color: var(--accent); font-weight: 700; text-decoration: underline; } /* -------------------------------------------------------------- sections */ .section { padding: var(--s7) 0; } .section + .section { border-top: 1px solid var(--line); } .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5); margin-bottom: var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); } .section-head h2, .section-head .meta { margin: 0; } .eyebrow { font-size: var(--fs-meta); color: var(--muted); margin: 0 0 var(--s2); } .lede { font-size: var(--fs-lede); color: var(--muted); margin: 0 0 var(--s5); } /* Multi-column rows. Every column carries real content; the row fills. */ .cols { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .cols-2, .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .step { border-top: 3px solid var(--accent); padding-top: var(--s4); } .step .n { display: block; font-size: var(--fs-meta); color: var(--muted); margin-bottom: var(--s1); } .step h3 { margin-bottom: var(--s2); } /* ------------------------------------------------------------------ cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s5); } @media (max-width: 599px) { .card { padding: var(--s4); } } /* ------------------------------------------------------------------ hero */ .hero { padding: var(--s7) 0; } .hero h1 { margin-bottom: var(--s5); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); } @media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s7); align-items: start; } } .example { display: grid; gap: var(--s4); align-content: start; } .example .count { margin: 0; } /* ------------------------------------------------------------------ form */ .form { display: grid; gap: var(--s4); } .form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s4); } .form legend { font-weight: 700; font-size: var(--fs-h3); margin-bottom: var(--s2); padding: 0; } .field label { display: block; font-weight: 600; margin-bottom: var(--s1); } .field .hint { display: block; font-weight: 400; font-size: var(--fs-meta); color: var(--muted); margin: 0 0 var(--s2); } .field .optional { font-weight: 400; color: var(--muted); } .input, select.input { width: 100%; min-height: var(--control); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-body); } select.input { appearance: none; -webkit-appearance: none; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; } .input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; } .field.error .input { border-color: var(--bad); } .field .error-text { color: var(--bad); font-size: var(--fs-meta); margin: var(--s1) 0 0; } .two { display: grid; gap: var(--s4); } @media (min-width: 600px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .form .fine { font-size: var(--fs-meta); color: var(--muted); margin: 0; } /* The Cloudflare widget slot: the real widget is 300 by 65. */ .turnstile { min-height: 65px; } /* --------------------------------------------------------------- buttons */ .btn { font: inherit; font-size: var(--fs-body); font-weight: 600; min-height: var(--control); padding: 10px 20px; border-radius: var(--radius-s); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); text-align: center; } .btn:hover { filter: brightness(1.08); } .btn.quiet { background: var(--surface); color: var(--ink); border-color: var(--line-strong); } .btn.block { width: 100%; } .btn.small { min-height: 40px; padding: 6px 14px; font-size: var(--fs-meta); } .btn-link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; } .actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } /* ----------------------------------------------------------------- chips */ .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 3px 10px; font-size: var(--fs-meta); font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--ink); background: var(--surface); } .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .chip.picked { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); } .chip.possible { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); } .chip.not-picked { color: var(--muted); } .chip.empty { color: var(--muted); border-style: dashed; } .chip.error { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); } .chip.pending { color: var(--muted); border-style: dashed; } .chip.pending::before { background: transparent; border: 1px solid currentColor; } /* Evidence tag on a diagnostic: measured, vendor, research. */ .tag { display: inline-block; border: 1px solid var(--line-strong); border-radius: var(--radius-s); padding: 1px 8px; font-size: var(--fs-meta); color: var(--muted); background: var(--surface-2); white-space: nowrap; } /* ----------------------------------------------------------------- count */ .count { margin: var(--s4) 0 var(--s3); } .count .n { display: block; font-size: var(--fs-count); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .count .pm { display: block; font-size: var(--fs-lede); color: var(--muted); margin-top: var(--s1); } .tally { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: 1px solid var(--line); } .tally li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; margin: 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .tally li span:last-child { white-space: nowrap; font-weight: 600; } @media (max-width: 599px) { .tally li span:last-child { white-space: normal; text-align: right; } } /* ---------------------------------------------------------- receipt head */ .receipt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding: var(--s6) 0 var(--s5); } @media (min-width: 900px) { .receipt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start; } } .receipt-main h1 { margin-bottom: var(--s2); } .receipt-main .meta { margin-bottom: var(--s2); } /* The right column of the receipt head: the email ask, then whatever real content balances the left column (the named list, the queued note). */ .receipt-side { display: grid; gap: var(--s4); align-content: start; } .receipt-side .card .eyebrow { margin-bottom: var(--s1); } .receipt-side .tally { margin-top: var(--s2); } /* A QUEUED RECEIPT HAS NOTHING TO SHOW YET, so its left column would end well above the email ask beside it and leave a hole there at 1400. The five questions we are about to ask are the content that fills it: at 900px and up they take the left column's second row while the right column spans both, and below that the whole grid stacks in DOM order, which keeps the ask the second thing on a phone. The ledger keeps its four columns and gives back the width of the label one, because 200px of "Question 3, comparison" inside a 7fr column would leave the question itself reading four words to a line. */ .receipt-tail { min-width: 0; margin-top: var(--s5); } .receipt-tail .section-head { margin-bottom: var(--s3); } @media (min-width: 760px) { .receipt-tail .checked li { grid-template-columns: 150px 96px minmax(0, 1fr) auto; } } @media (min-width: 900px) { .receipt.queued .receipt-side { grid-row: 1 / span 2; } .receipt.queued .receipt-tail { grid-column: 1; grid-row: 2; } } /* THE SAME HOLE, THE OTHER WAY ROUND, ON A FINISHED RECEIPT. The two counted lists (the split by assistant, and who else was named) used to sit stacked in the right column, which ran about 300 pixels past the bottom of the left one at 1400 and left dead space under the count. They are both a name against a number, so they belong beside each other in a band under the head where each gets half the row instead of a 463px column. The band spans both grid columns; the cards are stretched to one height by the grid, which is what a row of cards is supposed to look like; and at 390 the band is one column, so nothing is clipped and nothing scrolls sideways. */ .receipt-data { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; margin-top: var(--s3); min-width: 0; } .receipt-data .card { min-width: 0; } .receipt-data .card .eyebrow { margin-bottom: var(--s1); } .receipt-data .tally { margin-top: var(--s2); } @media (min-width: 900px) { .receipt-data { grid-column: 1 / -1; } } /* -------------------------------------------------------------- progress */ .progress { margin: var(--s4) 0 var(--s3); } .progress .track { height: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; } .progress .fill { height: 100%; width: calc(var(--fill, 0) * 100%); background: var(--accent); border-radius: var(--radius-pill); transition: width 600ms ease; } .progress .counts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s2) 0 0; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- email ask */ .ask { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); } .ask h2 { font-size: var(--fs-h3); margin: 0; } .ask p { margin: 0; } .ask form { display: grid; gap: var(--s3); } @media (min-width: 600px) { .ask form.inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } } .ask .fine { font-size: var(--fs-meta); color: var(--muted); } .ask.done { border-color: var(--ok); } /* ---------------------------------------------------------- answer cards */ .answers-group { margin-bottom: var(--s6); } .answers-group:last-child { margin-bottom: 0; } .q { margin: 0 0 var(--s4); } .q .label { display: block; font-size: var(--fs-meta); color: var(--muted); margin-bottom: var(--s1); } .q h3 { margin: 0; font-weight: 600; } /* One card per engine the question went to, so the column count cannot be a constant: three engines today, four or five when the others are switched on. 280px is the floor that keeps an answer around forty five characters a line inside a 1200px container; below that an answer stops reading like an answer. At 390 it is one column. */ .answer-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } /* Wide screens, where a half filled last row is a hole beside the text and not a shrug. Four cards split two and two rather than three and one. Five take six tracks: three across the top, then two half width, so every row is full whatever the engine count is. Three and six already fill their rows. */ @media (min-width: 1000px) { .answer-grid[data-cards="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .answer-grid[data-cards="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } .answer-grid[data-cards="5"] > .answer { grid-column: span 2; } .answer-grid[data-cards="5"] > .answer:nth-child(n + 4) { grid-column: span 3; } } .answer { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; } .answer.picked { border-top-color: var(--ok); } .answer.possible { border-top-color: var(--warn); } .answer.error { border-top-color: var(--bad); } .answer.empty, .answer.pending { border-top-color: var(--line); } .answer.pending { background: var(--surface-2); border-style: dashed; border-top-style: solid; } .answer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); } .answer-head .who { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); } .engine { font-weight: 700; } .asked { font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; } .answer-body { padding: var(--s4); flex: 1 0 auto; overflow-wrap: anywhere; } .answer-body p { margin: 0 0 var(--s3); } .answer-body p:last-child { margin: 0; } .answer.empty .answer-body, .answer.error .answer-body, .answer.pending .answer-body { color: var(--muted); } .answer-foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-meta); color: var(--muted); display: grid; gap: var(--s1); } /* Excerpt first; the full answer opens in place. No animation. */ .more { margin-top: var(--s3); } .more summary { cursor: pointer; color: var(--accent); font-size: var(--fs-meta); font-weight: 600; list-style: none; display: inline-block; padding: var(--s1) 0; } .more summary::-webkit-details-marker { display: none; } .more summary .when-open { display: none; } .more[open] summary .when-open { display: inline; } .more[open] summary .when-closed { display: none; } .more .full { margin-top: var(--s3); } .answer-body:has(.more[open]) .excerpt { display: none; } /* -------------------------------------------------------------- blockers */ .blocker { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s5); display: grid; gap: var(--s4); margin-bottom: var(--s4); } .blocker.fail { border-left-color: var(--bad); } .blocker.warn { border-left-color: var(--warn); } .blocker.ok { border-left-color: var(--ok); } .blocker.unknown { border-left-color: var(--line-strong); border-left-style: dashed; } @media (min-width: 900px) { .blocker { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s6); } .blocker.compact { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } } @media (max-width: 599px) { .blocker { padding: var(--s4); } } .status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); font-weight: 700; } .status::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: currentColor; flex: none; } .status.fail { color: var(--bad); } .status.warn { color: var(--warn); } .status.ok { color: var(--ok); } .status.unknown { color: var(--muted); } .status.unknown::before { background: transparent; border: 1px dashed currentColor; } .blocker h3 { margin: var(--s2) 0 var(--s3); } .blocker-head .tag { margin-top: var(--s1); } .blocker dl { margin: 0; display: grid; gap: var(--s3); } .blocker dl div { display: grid; gap: 2px; } @media (min-width: 600px) { .blocker dl div { grid-template-columns: 128px minmax(0, 1fr); gap: var(--s3); } } .blocker dt { font-size: var(--fs-meta); font-weight: 600; color: var(--muted); } .blocker dd { margin: 0; } .blocker dd ul { margin: var(--s2) 0 0; } .tag-legend { font-size: var(--fs-meta); color: var(--muted); margin: var(--s4) 0 0; } /* Everything we checked: a ledger of rows. */ .checked { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .checked li { display: grid; gap: var(--s1) var(--s4); padding: var(--s3) 0; margin: 0; border-bottom: 1px solid var(--line); } @media (min-width: 760px) { .checked li { grid-template-columns: 200px 150px minmax(0, 1fr) auto; align-items: baseline; } } .checked .what { font-weight: 600; } /* ---------------------------------------------------------------- notice */ .notice { padding-top: var(--s8); padding-bottom: var(--s8); } .notice .card { padding: var(--s6); } .notice h1 { margin-bottom: var(--s4); } @media (max-width: 599px) { .notice { padding-top: var(--s6); padding-bottom: var(--s6); } .notice .card { padding: var(--s5); } } .flash { border: 1px solid var(--ok); border-left-width: 4px; border-radius: var(--radius-s); background: var(--surface); padding: var(--s3) var(--s4); margin: 0 0 var(--s5); } .flash.bad { border-color: var(--bad); } /* ---------------------------------------------------------------- footer */ .foot { border-top: 1px solid var(--line); margin-top: var(--s8); padding: var(--s6) 0; font-size: var(--fs-meta); color: var(--muted); } .foot .wrap { display: grid; gap: var(--s3); } @media (min-width: 760px) { .foot .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s6); } } .foot p { margin: 0 0 var(--s1); } .foot nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); } .foot a { color: var(--muted); } /* ----------------------------------------------------------------- print */ @media print { .topbar nav, .ask, .more summary, .mock-tools { display: none !important; } .answer-body .excerpt { display: none; } .more .full { display: block; } body { background: #fff; color: #000; } .answer, .blocker, .card { break-inside: avoid; box-shadow: none; } }