/* ========================================================================= TPR Quiz — styles. Everything is scoped under .tprq so it can't collide with the GeneratePress theme (or leak out into it). THEME TOKENS: edit the values in the .tprq block below to match TPR. `font-family: inherit` means the widget picks up your theme font on the live site automatically; the system stack is only a standalone fallback. ========================================================================= */ /* Tokens live on BOTH .tprq and .tprq-modal, because the summary modal is mounted on (outside .tprq) so it can't be clipped by the container. Edit colors here once and both the widget and the modal update. */ .tprq, .tprq-modal { /* ---- TPR brand tokens (sampled from testprepreview.com) ---- */ --tprq-accent: #0870c8; /* TPR blue: buttons, selected, progress */ --tprq-accent-ink: #ffffff; /* text/icon on blue */ --tprq-accent-soft: #e6f1fb; /* selected choice background */ --tprq-cta: #f8c800; /* TPR "Start Test" yellow: full-test CTA*/ --tprq-cta-ink: #1a1c20; /* dark text on yellow */ --tprq-correct: #1a7f43; /* right answers (not a TPR-defined color)*/ --tprq-correct-soft: #e6f4ec; --tprq-incorrect: #c1372c; /* wrong answers (not a TPR-defined color)*/ --tprq-incorrect-soft:#fceceb; --tprq-text: #333333; --tprq-muted: #5b6470; --tprq-surface: #ffffff; --tprq-panel: #f4f6f8; --tprq-border: #d9dde3; --tprq-radius: 10px; --tprq-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); /* Native system UI font: Segoe UI on Windows, San Francisco on macOS/iOS, Roboto on Android. Not a specific/downloaded face. */ --tprq-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .tprq { font-family: var(--tprq-font); /* native system stack (see --tprq-font) */ color: var(--tprq-text); max-width: 720px; margin: 1.5rem auto; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Base resets. Scoped with :where() so they carry ZERO specificity: they tidy UA/theme defaults but can never outrank the component classes below. (A type-qualified reset like `.tprq button` DID outrank `.tprq-next`, which is what stripped every button down to plain text.) They apply under both roots so the body-mounted modal is covered too. */ :where(.tprq, .tprq-modal) *, :where(.tprq, .tprq-modal) *::before, :where(.tprq, .tprq-modal) *::after { box-sizing: border-box; } :where(.tprq, .tprq-modal) button, :where(.tprq, .tprq-modal) input, :where(.tprq, .tprq-modal) ol, :where(.tprq, .tprq-modal) ul, :where(.tprq, .tprq-modal) li, :where(.tprq, .tprq-modal) p, :where(.tprq, .tprq-modal) h3 { margin: 0; } :where(.tprq, .tprq-modal) ol, :where(.tprq, .tprq-modal) ul { padding: 0; list-style: none; } :where(.tprq, .tprq-modal) button, :where(.tprq, .tprq-modal) input { font: inherit; color: inherit; } :where(.tprq, .tprq-modal) button { cursor: pointer; -webkit-appearance: none; appearance: none; } /* Buttons that need a fill/border set their own (single-class, so they win without a type-qualified reset fighting them). Chromeless ones opt out. */ .tprq-next, .tprq-summary-btn, .tprq-modal-close, .tprq-order-handle { border: none; } .tprq-modal-close, .tprq-order-handle { background: transparent; } :where(.tprq, .tprq-modal) :focus-visible { outline: 3px solid color-mix(in srgb, var(--tprq-accent) 45%, white); outline-offset: 2px; } /* ---------- progress ---------- */ .tprq-progress { margin-bottom: .9rem; } .tprq-progress-text { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--tprq-muted); margin-bottom: .4rem; } .tprq-progress-bar { height: 5px; border-radius: 999px; background: var(--tprq-border); overflow: hidden; } .tprq-progress-fill { height: 100%; background: var(--tprq-accent); border-radius: 999px; transition: width .35s ease; } /* ---------- card / prompt ---------- */ .tprq-card { background: var(--tprq-surface); border: 1px solid var(--tprq-border); border-radius: var(--tprq-radius); box-shadow: var(--tprq-shadow); padding: 1.25rem 1.35rem 1.4rem; outline: none; } .tprq-qmeta { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tprq-accent); margin-bottom: .5rem; } .tprq-prompt { font-size: 1.12rem; font-weight: 600; margin-bottom: 1rem; } .tprq-prompt sup, .tprq-prompt sub { font-weight: 400; } .tprq-passage { background: var(--tprq-panel); border-left: 3px solid var(--tprq-border); padding: .75rem .9rem; border-radius: 6px; margin-bottom: 1rem; font-size: .96rem; } .tprq-passage p { margin-bottom: .65rem; } .tprq-passage p:last-child { margin-bottom: 0; } .tprq-passage strong, .tprq-passage b { font-weight: 600; } .tprq-passage em { font-style: italic; } /* The global reset strips list markers/indent (to avoid theme conflicts). Restore them inside author-authored content so