/* * Quiz Trail front-end styles. * * Inherits the theme's font and text colour and derives borders/tints from * currentColor, so it works on light and dark themes. Logical properties keep * it correct in RTL. Override the custom properties below from a child theme * or the Customizer's Additional CSS. */ /* The terms popup is moved to while open, so it carries the custom properties too. */ .tgp-quiz, .tgp-quiz__modal { --tgp-quiz-accent: var(--wp--preset--color--primary, #d63638); --tgp-quiz-accent-contrast: #fff; /* Plain fallbacks first; browsers with color-mix() get the currentColor-derived tints below. */ --tgp-quiz-border: rgba(128, 128, 128, 0.4); --tgp-quiz-tint: rgba(128, 128, 128, 0.08); --tgp-quiz-accent-soft: rgba(214, 54, 56, 0.1); --tgp-quiz-radius: 8px; --tgp-quiz-error: #d63638; --tgp-quiz-success: #008a20; /* Room left above the quiz when a link jumps to it, for sticky site headers. */ --tgp-quiz-scroll-offset: 7rem; } .tgp-quiz { scroll-margin-top: var(--tgp-quiz-scroll-offset); box-sizing: border-box; margin-block: 2.5em; padding: clamp(1rem, 4vw, 1.75rem); border: 1px solid var(--tgp-quiz-border); border-radius: var(--tgp-quiz-radius); background: var(--tgp-quiz-tint); } @supports (color: color-mix(in srgb, red 50%, blue)) { .tgp-quiz, .tgp-quiz__modal { --tgp-quiz-border: color-mix(in srgb, currentColor 18%, transparent); --tgp-quiz-tint: color-mix(in srgb, currentColor 5%, transparent); --tgp-quiz-accent-soft: color-mix(in srgb, var(--tgp-quiz-accent) 10%, transparent); } } .tgp-quiz *, .tgp-quiz *::before, .tgp-quiz *::after, .tgp-quiz__modal, .tgp-quiz__modal * { box-sizing: border-box; } .tgp-quiz [hidden] { display: none !important; } /* * Theme article styles often add bullets to every list inside the content. * Set it on the items themselves (not only the lists) so inherited or * article-level list styles can't bring the bullets back. */ .tgp-quiz .tgp-quiz__options, .tgp-quiz .tgp-quiz__steps, .tgp-quiz .tgp-quiz__option, .tgp-quiz .tgp-quiz__step { list-style: none; } .tgp-quiz .tgp-quiz__option::before, .tgp-quiz .tgp-quiz__step::before { content: none; } /* Focus moves to these as the quiz goes from the terms to each question and the final step. */ .tgp-quiz__gate, .tgp-quiz__question, .tgp-quiz__finale { scroll-margin-top: var(--tgp-quiz-scroll-offset); } .tgp-quiz__gate:focus, .tgp-quiz__question:focus, .tgp-quiz__finale:focus { outline: none; } .tgp-quiz__sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* * Header ad above and below the quiz, spanning the full width of the section. Ad Manager * serves fixed-size creatives (e.g. 1020x250), so frontend.js scales each rendered slot * down to the section's width. A column flex box centres every slot (also a scaled one, * which overflows equally on both sides), whatever the text direction. */ .tgp-quiz__ad { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0 0 1rem; overflow: hidden; text-align: center; } .tgp-quiz__ad--bottom { margin: 1rem 0 0; } /* The slot's inline min-width (728px) would otherwise overflow a narrower section. */ .tgp-quiz__ad [id^="div-gpt-ad"] { min-width: 0 !important; min-height: 0 !important; } /* * Themes size post-content iframes for video embeds (e.g. 750px wide, 16:9, * !important). Undo that for the creative: frontend.js sets its real width and height * inline. Doubled selector so it outranks `.entry-content iframe` and the like. */ .tgp-quiz__ad iframe, .tgp-quiz .tgp-quiz__ad iframe { display: block !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; } /* Scaled from the top centre; frontend.js pulls the next slot up by the scaled-away height. */ .tgp-quiz__ad [data-tgp-ad-scaled] { flex: none; margin: 0; transform-origin: top center; } .tgp-quiz__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-block-end: 1rem; } .tgp-quiz__eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; } .tgp-quiz__progress { display: flex; align-items: center; gap: 0.75rem; } .tgp-quiz__progress-label { margin: 0; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; } .tgp-quiz__progress-bar { inline-size: 7rem; block-size: 0.5rem; accent-color: var(--tgp-quiz-accent); } .tgp-quiz__step-label { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 600; opacity: 0.8; } .tgp-quiz__fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; } .tgp-quiz__legend { margin-block-end: 0.75rem; padding: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.35; } .tgp-quiz__hint { margin-block: -0.25rem 0.75rem; font-size: 0.875rem; opacity: 0.8; } .tgp-quiz__options { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .tgp-quiz__option { margin: 0; } .tgp-quiz__option-label { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--tgp-quiz-border); border-radius: var(--tgp-quiz-radius); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .tgp-quiz__option-label:hover { border-color: var(--tgp-quiz-accent); } /* Checked state: frontend.js mirrors it onto the label (is-checked) for browsers without :has(). */ .tgp-quiz__option-label.is-checked { border-color: var(--tgp-quiz-accent); background: var(--tgp-quiz-accent-soft); } .tgp-quiz__option-label:has(input:checked) { border-color: var(--tgp-quiz-accent); background: var(--tgp-quiz-accent-soft); } .tgp-quiz__option-label:has(input:focus-visible) { outline: 2px solid var(--tgp-quiz-accent); outline-offset: 2px; } @supports not selector(:has(input)) { .tgp-quiz__option-label:focus-within { outline: 2px solid var(--tgp-quiz-accent); outline-offset: 2px; } } .tgp-quiz__option-input { flex: none; margin: 0; inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--tgp-quiz-accent); } .tgp-quiz__text-input, .tgp-quiz__field input { display: block; inline-size: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--tgp-quiz-border); border-radius: var(--tgp-quiz-radius); background: transparent; color: inherit; font: inherit; } .tgp-quiz__field input[aria-invalid="true"] { border-color: var(--tgp-quiz-error); } .tgp-quiz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-block-start: 1rem; } .tgp-quiz__button { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem; border: 1px solid var(--tgp-quiz-accent); border-radius: var(--tgp-quiz-radius); background: var(--tgp-quiz-accent); color: var(--tgp-quiz-accent-contrast); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .tgp-quiz__button:disabled { opacity: 0.5; cursor: not-allowed; } .tgp-quiz__button[aria-busy="true"] { opacity: 0.8; cursor: progress; } .tgp-quiz__button--secondary { background: transparent; color: inherit; } .tgp-quiz__message { margin: 0; font-size: 0.875rem; color: var(--tgp-quiz-success); } .tgp-quiz__message.is-error, .tgp-quiz__field-error { color: var(--tgp-quiz-error); } .tgp-quiz__message:empty, .tgp-quiz__field-error:empty { display: none; } .tgp-quiz__trail { margin-block-start: 1.5rem; padding-block-start: 1rem; border-block-start: 1px solid var(--tgp-quiz-border); } .tgp-quiz__steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .tgp-quiz__step { margin: 0; } /* Buttons: reset what themes often give every