/* ============================================================================================================================================ Round 6 (29 Oct 2026): the lawn quiz. Linked after design.css by Layout::roundStyles(); only the quiz page uses it. What changed, from Nikola's words ("better icons for the seasons ... and those green bars that represent the steps, make them better"): 1 progress: one thin line that fills with an ease (Typeform's hairline, Headspace's quiet top bar) and "Step 4 / 8" plus the name of the question, instead of eight green segments and a percentage; the line stays on the page and slides, the card changes under it 2 the answers: Hugeicons fine-line icons, bare, in a soft halo that takes the colour of the season (the same idea as the season filter of the home page) instead of Phosphor duotone icons; no tint behind them, one hairline instead of a ring plus a border 3 between questions: the card fades out and slides a little, the next one slides in from its side (transform and opacity, reduced motion: none) Markup: src/Front/Quiz/QuestionView.php (.qp = progress, .quiz-opt = an answer), icons: QuizIcons::OPTION_LINE, script: assets/js/quiz.js. Rules that must beat the older !important ones in components.css / design.css sit in @layer fi-pre (an earlier layer wins for !important). ============================================================================================================================================ */ .quiz-root { scroll-margin-top: 96px; } /* ---------- 1. Progress: a hairline that fills --------------------------------------------------------------------------------------------- */ .qp { margin: 0 0 16px; } .qp-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 11px; font: 500 14px/1.2 var(--font-sans), sans-serif; color: var(--ink-3); } .qp-step { font-variant-numeric: tabular-nums; } .qp-step strong { color: var(--green-ink); font-weight: 650; } .qp-topic { text-align: right; } .qp-track { position: relative; height: 3px; border-radius: 3px; background: rgba(29, 58, 44, .14); overflow: hidden; } .qp-fill { position: absolute; inset: 0; display: block; background: linear-gradient(90deg, #5fa983 0%, var(--green-deep) 70%); transform-origin: 0 50%; transform: scaleX(.125); transition: transform .85s var(--ease-soft); will-change: transform; } .qp[data-step="1"] .qp-fill { transform: scaleX(.125); } .qp[data-step="2"] .qp-fill { transform: scaleX(.25); } .qp[data-step="3"] .qp-fill { transform: scaleX(.375); } .qp[data-step="4"] .qp-fill { transform: scaleX(.5); } .qp[data-step="5"] .qp-fill { transform: scaleX(.625); } .qp[data-step="6"] .qp-fill { transform: scaleX(.75); } .qp[data-step="7"] .qp-fill { transform: scaleX(.875); } .qp[data-step="8"] .qp-fill { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .qp-fill { transition: none; } } /* ---------- 3. Between questions ---------------------------------------------------------------------------------------------------------------- */ .quiz-card { animation: none; } .quiz-card.is-entering, .quiz-results.is-entering { animation: qz-in .46s var(--ease-soft) both; } @keyframes qz-in { from { opacity: 0; transform: translateX(calc(var(--qdir, 0) * 22px)); } to { opacity: 1; transform: none; } } .quiz-card.is-leaving, .quiz-results.is-leaving { opacity: 0; transform: translateX(calc(var(--qdir, 0) * -14px)); transition: opacity .17s ease-in, transform .17s ease-in; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .quiz-card.is-entering, .quiz-results.is-entering { animation: none; } .quiz-card.is-leaving, .quiz-results.is-leaving { transition: none; transform: none; } } /* The focus ring of an answer. Older rules (the "selected" cards group of the components layer) switch the outline off with !important on a chosen answer, and an arrow key chooses and focuses at the same time: so the ring is set again here, one ring, as everywhere on the site. */ @layer fi-pre { .quiz-root .quiz-opt:has(.quiz-opt-input:focus-visible) { outline: 3px solid var(--focus) !important; outline-offset: 3px !important; } } /* ---------- 2. The answers ---------------------------------------------------------------------------------------------------------------- */ .quiz-root .quiz-opt { --q-c: var(--green-deep); --q-ico: var(--ink-3); border-radius: 22px; } .quiz-root .quiz-opt[data-season="spring"] { --q-c: var(--season-spring); --q-bg: var(--season-spring-bg); } .quiz-root .quiz-opt[data-season="summer"] { --q-c: var(--season-summer); --q-bg: var(--season-summer-bg); } .quiz-root .quiz-opt[data-season="autumn"] { --q-c: var(--season-autumn); --q-bg: var(--season-autumn-bg); } .quiz-root .quiz-opt[data-season="winter"] { --q-c: var(--season-winter); --q-bg: var(--season-winter-bg); } /* the old pointer-following ring of design.css (E) is replaced by the hairline and the chosen state below */ .quiz-root .quiz-opt::before { content: none; display: none; } @layer fi-pre { .quiz-root .quiz-opt { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(29, 58, 44, .13) !important; border-radius: 22px !important; } .quiz-root .quiz-opt:is(.selected, :has(.quiz-opt-input:checked)) { background: color-mix(in srgb, var(--q-c) 6%, #fff) !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--q-c) 62%, transparent) !important; } /* the icons: bare, no tile; the colour and size are set here, the line weight with --hi-w */ .quiz-root .quiz-opt-icon > svg.hi { width: var(--qi, 56px) !important; height: var(--qi, 56px) !important; color: var(--q-ico) !important; opacity: .82; stroke-width: var(--qw, .92); transition: color .45s ease, opacity .45s ease; } .quiz-root .quiz-opt:is(.selected, :has(.quiz-opt-input:checked)) .quiz-opt-icon > svg.hi { color: var(--q-c) !important; opacity: 1; } .quiz-root .quiz-opt-icon .fi-tile { background: transparent !important; box-shadow: none !important; } /* components.css (the old tile rules) sets the icon box to auto with !important: the box is now the cell the halo and the icon sit in */ .quiz-root .quiz-opt-icon { width: var(--qb, 92px) !important; height: var(--qb, 92px) !important; } } .quiz-root .quiz-opt-icon { position: relative; display: grid; place-items: center; flex: none; width: var(--qb, 92px); height: var(--qb, 92px); } /* a soft halo in the colour of the answer behind the chosen icon: it grows in when the answer is chosen */ .quiz-root .quiz-opt-icon::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--q-c) 24%, transparent) 0%, transparent 68%); opacity: 0; transform: scale(.7); transition: opacity .5s ease, transform .65s var(--ease-soft); } .quiz-root .quiz-opt:is(.selected, :has(.quiz-opt-input:checked)) .quiz-opt-icon::before { opacity: 1; transform: scale(1); } .quiz-root .quiz-opt-icon > * { position: relative; } /* the nutrients: the element symbol as in a periodic table (type, not a drawing) */ .quiz-root .qo-el { display: grid; place-items: center; width: 100%; height: 100%; } .quiz-root .qo-el b { font: 600 28px/1 var(--font-display), sans-serif; letter-spacing: -.02em; color: var(--q-ico); transition: color .45s ease; } .quiz-root .quiz-opt:is(.selected, :has(.quiz-opt-input:checked)) .qo-el b { color: var(--q-c); } .quiz-root .quiz-opt-body { align-content: start; } .quiz-root .is-rows .quiz-opt-body { align-content: center; } .quiz-root .quiz-opt-label { font: 650 clamp(16.5px, 1.5vw, 18.5px)/1.22 var(--font-display), sans-serif; color: var(--green-ink); letter-spacing: -.008em; } .quiz-root .quiz-opt-sub { font: 400 14.5px/1.4 var(--font-sans), sans-serif; color: var(--ink-3); } /* the check: a small round mark in the colour of the answer, so that "chosen" never depends on colour alone */ .quiz-root .quiz-opt-check { width: 22px; height: 22px; background: var(--q-c); color: #fff; opacity: 0; transform: scale(.55); transition: opacity .25s ease, transform .4s var(--spring, var(--ease-soft)); } .quiz-root .quiz-opt-check svg.hi { width: 13px; height: 13px; stroke-width: 2.6; } .quiz-root .quiz-opt:is(.selected, :has(.quiz-opt-input:checked)) .quiz-opt-check { opacity: 1; transform: scale(1); } /* tiles (up to four answers): the icon above the words, centred */ .quiz-root .is-tiles .quiz-opt { flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 20px 14px 22px; text-align: center; --qi: 56px; --qb: 88px; } .quiz-root .is-tiles .quiz-opt-body { justify-items: center; gap: 5px; } .quiz-root .is-tiles .quiz-opt-check { top: 14px; right: 14px; } .quiz-root .is-tiles .qo-el b { font-size: 34px; } /* rows (more answers): the icon beside the words */ .quiz-root .is-rows .quiz-opt { --qi: 36px; --qb: 58px; --qw: 1.3; gap: 12px; padding: 12px 56px 12px 14px; min-height: 76px; } .quiz-root .is-rows .quiz-opt-icon { margin: 0; } .quiz-root .is-rows .quiz-opt-check { top: 50%; right: 16px; margin-top: -11px; } /* The lawn size: the same icon (the area icon of the product pages) in four sizes, the line weight kept the same on screen. */ .quiz-root .quiz-options[data-q="lawnSize"] .quiz-opt { --qi: calc(var(--qn, 50) * 1px); --qw: calc(.92 * 56 / var(--qn, 50)); } .quiz-root .quiz-options[data-q="lawnSize"] .quiz-opt[data-v="s"] { --qn: 34; } .quiz-root .quiz-options[data-q="lawnSize"] .quiz-opt[data-v="m"] { --qn: 44; } .quiz-root .quiz-options[data-q="lawnSize"] .quiz-opt[data-v="l"] { --qn: 54; } .quiz-root .quiz-options[data-q="lawnSize"] .quiz-opt[data-v="xl"] { --qn: 66; } /* The season question: the home page's season filter in a form. No box around the answers, large icons, the name in the display face; the chosen season takes its colour, gets its halo and a line under the name that draws itself. */ .quiz-root .quiz-options[data-q="season"] { gap: 6px; } .quiz-root .quiz-options[data-q="season"] .quiz-opt { --qi: 72px; --qb: 100px; --qw: .86; padding: 18px 12px 32px; } .quiz-root .quiz-options[data-q="season"] .quiz-opt-label { font-size: clamp(20px, 2vw, 24px); } .quiz-root .quiz-options[data-q="season"] .quiz-opt-check { display: none; } .quiz-root .quiz-options[data-q="season"] .quiz-opt::after { content: ""; position: absolute; left: 26%; right: 26%; bottom: 14px; height: 2px; border-radius: 2px; background: var(--q-c); transform: scaleX(0); transition: transform .55s var(--ease-soft); } .quiz-root .quiz-options[data-q="season"] .quiz-opt:is(.selected, :has(.quiz-opt-input:checked))::after { transform: scaleX(1); } @layer fi-pre { .quiz-root .quiz-options[data-q="season"] .quiz-opt { box-shadow: none !important; } .quiz-root .quiz-options[data-q="season"] .quiz-opt:is(.selected, :has(.quiz-opt-input:checked)) { background: radial-gradient(50% 42% at 50% 46%, color-mix(in srgb, var(--q-c) 14%, transparent) 0%, transparent 100%) !important; box-shadow: none !important; } } @media (hover: hover) and (pointer: fine) { .quiz-root .quiz-opt:not(.selected, .disabled):hover .quiz-opt-icon > svg.hi { opacity: 1; color: var(--ink-2) !important; } .quiz-root .quiz-opt:not(.selected, .disabled):hover .qo-el b { color: var(--ink-2); } } @layer fi-pre { @media (hover: hover) and (pointer: fine) { .quiz-root .quiz-opt:not(.selected, .disabled):hover { box-shadow: inset 0 0 0 1px rgba(29, 58, 44, .3) !important; background: rgba(29, 58, 44, .025) !important; } .quiz-root .quiz-options[data-q="season"] .quiz-opt:not(.selected, .disabled):hover { box-shadow: none !important; background: rgba(29, 58, 44, .03) !important; } } } .quiz-root .quiz-opt.disabled { opacity: .42; } /* "max. 3" next to the helper text: plain words, not a capsule */ @layer fi-pre { .quiz-root .quiz-helper .max-pill { height: auto !important; padding: 0 !important; margin-left: 4px; box-shadow: none !important; color: var(--green-deep) !important; font-weight: 650 !important; } } /* ---------- the rest of the card, a little calmer ------------------------------------------------------------------------------------------ */ .quiz-root .quiz-note { padding: 2px 0 2px 14px; border-left: 2px solid var(--season-summer); border-radius: 0; background: none; color: var(--ink-2); } .quiz-root .quiz-nav { border-top-color: rgba(29, 58, 44, .1); } .quiz-root .quiz-back svg.hi, .quiz-root .quiz-next svg.hi { width: 20px; height: 20px; stroke-width: 1.8; } .quiz-root .quiz-back, .quiz-root .quiz-next { gap: 8px; } /* Next before an answer is chosen: a quiet pale button with dark words (the old pale green with white words read 1.5:1) */ .quiz-root .quiz-next[aria-disabled="true"] { background: #e2ebe3; color: #44544a; box-shadow: none; } /* ---------- phones ------------------------------------------------------------------------------------------------------------------------------ */ @media (max-width: 640px) { .qp { margin-bottom: 14px; } .qp-meta { margin-bottom: 9px; font-size: 14px; } .quiz-root .is-tiles .quiz-opt { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 12px 52px 12px 12px; min-height: 76px; --qi: 34px; --qb: 56px; --qw: 1.25; } .quiz-root .is-tiles .quiz-opt-body { justify-items: start; gap: 3px; align-content: center; } .quiz-root .is-tiles .quiz-opt-check { top: 50%; right: 16px; margin-top: -11px; } .quiz-root .is-tiles .qo-el b { font-size: 28px; } .quiz-root .quiz-options[data-q="season"] .quiz-opt::after { left: 24%; right: 24%; } } @layer fi-pre { @media (max-width: 640px) { /* the four seasons stay a 2 x 2 grid of large icons: that is what makes the question */ .quiz-root .quiz-options.is-tiles[data-q="season"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; } } } @media (max-width: 640px) { .quiz-root .quiz-options[data-q="season"] .quiz-opt { flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 16px 8px 26px; min-height: 0; --qi: 56px; --qb: 84px; --qw: .92; } .quiz-root .quiz-options[data-q="season"] .quiz-opt-body { justify-items: center; align-content: start; } /* the lawn sizes in a row on a phone: the four sizes of the icon fit the 56 px cell */ .quiz-root .quiz-options[data-q="lawnSize"] .quiz-opt[data-v="s"] { --qn: 24; } .quiz-root .quiz-options[data-q="lawnSize"] .quiz-opt[data-v="m"] { --qn: 30; } .quiz-root .quiz-options[data-q="lawnSize"] .quiz-opt[data-v="l"] { --qn: 38; } .quiz-root .quiz-options[data-q="lawnSize"] .quiz-opt[data-v="xl"] { --qn: 46; } } /* ============================================================================================================================================ Round 7 (29 Oct 2026): the plan, the page after the last question. A real phone showed the price squeezed to 4 px (it wrapped one character per line) with the button drawn over it. Causes: a two-column grid (price | button) inside a text column that is only ~200 px wide next to the picture. Now: - price and unit are one block that keeps its words together; the button goes beside it only when there is room, otherwise under it, full width - on a phone the foundation card is a full-width card (picture and name on top, the rest under them) and the elixirs are a swipe row (data-snap="bar": round7-mobile.css lays it out, carousel.js draws the thin scroll line under it) - the top panel is a compact strip on a phone (total and the add-all button) so that the products start on the first screen - icons: the same fine-line icons as the questions; chips and quantities are words with an icon, not capsules Markup: src/Front/Quiz/ResultView.php; quiz.js hands the finished plan to window.fiSnap (carousel.js). Older rules are in components.css (the .qr-* block). ============================================================================================================================================ */ .quiz-results svg.hi { flex: none; } /* ---------- the header: what the plan is based on, as words with an icon (no capsules) ---------- */ @layer fi-pre { .quiz-results .qr-chip { height: auto !important; min-height: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; gap: 8px !important; font: 500 14.5px/1.3 var(--font-sans), sans-serif !important; color: var(--ink-2) !important; white-space: normal !important; } } .quiz-results .qr-summary { gap: 8px 20px; } .quiz-results .qr-chip svg.hi { width: 18px; height: 18px; stroke-width: 1.5; color: var(--green-deep); } /* ---------- a card of the plan (wide screens: picture left, words right) ---------- */ .quiz-results .qr-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-template-areas: "pic body" "warn warn"; gap: 0 24px; padding: 20px; border-radius: 28px; align-items: start; } .quiz-results .qr-elixirs .qr-card { grid-template-columns: 160px minmax(0, 1fr); } .quiz-results .qr-foundation { grid-template-columns: 210px minmax(0, 1fr); } .quiz-results .qr-pic { grid-area: pic; } .quiz-results .qr-card-body { grid-area: body; min-width: 0; display: grid; gap: 10px; align-content: start; padding-top: 2px; } .quiz-results .qr-warning { grid-area: warn; } .quiz-results .qr-id { display: grid; gap: 6px; justify-items: start; min-width: 0; } .quiz-results .qr-rest { display: grid; gap: 10px; min-width: 0; } .quiz-results .qr-name { overflow-wrap: anywhere; } .quiz-results .qr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; } .quiz-results .qr-quantity, .quiz-results .qr-spec { height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; font: 600 13.5px/1.35 var(--font-sans), sans-serif; white-space: normal; } .quiz-results .qr-quantity { display: inline-flex; align-items: center; gap: 7px; color: var(--green-ink); } .quiz-results .qr-quantity svg.hi { width: 17px; height: 17px; stroke-width: 1.5; color: var(--green-deep); } .quiz-results .qr-spec { color: var(--ink-3); font-weight: 500; } .quiz-results .qr-desc { -webkit-line-clamp: 4; } /* why it is in the plan, when to use it, notes: plain lines with a fine icon */ .quiz-results .qr-details { gap: 8px; margin-top: 2px; padding-top: 0; border-top: 0 !important; } .quiz-results .qr-why li, .quiz-results .qr-item-notes li, .quiz-results .qr-when { font-weight: 400; } .quiz-results .qr-why li strong, .quiz-results .qr-when strong { font-weight: 650; color: var(--green-ink); } .quiz-results .qr-why svg.hi, .quiz-results .qr-item-notes svg.hi, .quiz-results .qr-when svg.hi { width: 18px; height: 18px; margin-top: 1px; stroke-width: 1.6; color: var(--green-deep); } .quiz-results .qr-item-notes svg.hi { color: var(--season-summer); } .quiz-results .qr-item-notes, .quiz-results .qr-item-notes li { background: none; box-shadow: none; border-radius: 0; } /* price and unit together, the button beside them when there is room and under them when there is not */ .quiz-results .qr-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); } .quiz-results .qr-cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; flex: 0 1 auto; min-width: 0; } .quiz-results .qr-price { white-space: nowrap; } .quiz-results .qr-each { white-space: nowrap; font-size: 13.5px; } .quiz-results .qr-add-btn, .quiz-results .qr-buy .product-soldout { flex: 1 1 auto; max-width: 260px; margin-left: auto; min-width: 0; } .quiz-results .qr-add-btn svg.hi { width: 20px; height: 20px; stroke-width: 1.7; } .quiz-results .qr-buy .product-soldout { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: #eef1ea; color: var(--ink-3); font: 600 14.5px/1 var(--font-sans), sans-serif; } .quiz-results .qr-warning { align-items: flex-start; margin-top: 16px; } .quiz-results .qr-warning svg.hi { width: 22px; height: 22px; margin-top: 1px; stroke-width: 1.6; color: #a97c0e; } /* ---------- tips, soil analysis, the end offer ---------- */ .quiz-results .qr-notes li { align-items: flex-start; } .quiz-results .qr-ti { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -1px; color: var(--green-deep); } .quiz-results .qr-ti svg.hi { width: 23px; height: 23px; stroke-width: 1.4; } .quiz-results .qr-soil-ico { position: relative; display: grid; place-items: center; width: 64px; height: 64px; color: var(--green-deep); } .quiz-results .qr-soil-ico::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%); } .quiz-results .qr-soil-ico svg.hi { position: relative; width: 40px; height: 40px; stroke-width: 1.1; } .quiz-results .btn svg.hi, .quiz-results .qr-restart svg.hi { width: 20px; height: 20px; stroke-width: 1.7; } /* ---------- 721 to 760 px: picture column a little narrower ---------- */ @media (max-width: 760px) { .quiz-results .qr-card, .quiz-results .qr-elixirs .qr-card, .quiz-results .qr-foundation { grid-template-columns: 132px minmax(0, 1fr); gap: 0 18px; padding: 16px; border-radius: 24px; } } /* ---------- phones and small tablets: up to 720 px, the same limit as the swipe rows of carousel.js / round7-mobile.css ---------- */ @media (max-width: 720px) { /* the top panel: a compact strip, so that the products start on the first screen (the full offer is at the end of the page again) */ .quiz-results .qr-plan { padding: 16px 16px 14px; border-radius: 22px; gap: 10px; margin-bottom: 20px; } .quiz-results .qr-thumbs, .quiz-results .qr-restart { display: none; } .quiz-results .qr-plan-title { position: absolute; width: 1px; height: 1px; margin: -1px !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .quiz-results .qr-plan-text { font-size: 14px; line-height: 1.45; } .quiz-results .qr-plan-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 0 0; } .quiz-results .qr-plan .total-num { font-size: 32px; } .quiz-results .qr-plan .total-sub { font-size: 13px; } .quiz-results .qr-plan .btn-primary { height: 52px; font-size: 16px; } /* a card: picture and name on top, everything else under them (the foundation is full width; the elixirs are in the swipe row below) */ .quiz-results .qr-card, .quiz-results .qr-elixirs .qr-card, .quiz-results .qr-foundation { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "pic id" "rest rest" "warn warn"; gap: 14px 14px; padding: 16px; border-radius: 24px; } .quiz-results .qr-card-body { display: contents; } .quiz-results .qr-id { grid-area: id; align-content: start; gap: 6px; } .quiz-results .qr-rest { grid-area: rest; gap: 12px; } .quiz-results .qr-name { font-size: 22px !important; } .quiz-results .qr-meta { flex-direction: column; align-items: flex-start; gap: 3px; } .quiz-results .qr-desc { -webkit-line-clamp: 4; font-size: 15px; } .quiz-results .qr-warning { margin-top: 0; padding: 12px 14px; border-radius: 16px; } .quiz-results .qr-add-btn, .quiz-results .qr-buy .product-soldout { flex: 1 1 100%; max-width: none; margin-left: 0; } .quiz-results .qr-buy { justify-content: flex-start; } /* The elixirs are a swipe row: `data-snap="bar"` on .qr-elixirs makes round7-mobile.css lay them out in a row (one card and a peek of the next, to the screen edge) and carousel.js draw the thin scroll line under it. Only the insides of these cards are set here: the same top row as the foundation, a little narrower, and the price and button pinned to the bottom so that the cards of the row line up. */ .quiz-results .qr-elixirs .qr-card { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto 1fr auto; } .quiz-results .qr-elixirs .qr-rest { align-self: stretch; display: flex; flex-direction: column; } .quiz-results .qr-elixirs .qr-buy { margin-top: auto; } } /* ---------- the end offer: the same quiet buttons as the top panel (gold to buy, a ghost to start over) ---------- */ @layer fi-pre { .quiz-results .qr-final-cta .btn-primary { background: var(--g-gold) !important; color: var(--green-ink) !important; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5) !important; } .quiz-results .qr-final-cta .btn-primary[aria-disabled="true"] { background: rgba(255, 255, 255, .14) !important; color: #fff !important; box-shadow: none !important; } .quiz-results .qr-final-cta .btn-secondary, .quiz-results .qr-final-cta .qr-viewcart { background: #ffffff14 !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important; } } .quiz-results .qr-warning p { font-weight: 450; } .quiz-results .qr-warning p strong { font-weight: 700; } /* ---------- found by the audit on the finished plan: text on the lit corner of the dark panel, small touch targets ---------- */ /* the light corner of the panel is a little less bright and its small words a little lighter, so that they pass 4.5:1 on the lightest part of the gradient */ .quiz-results .qr-plan { background: radial-gradient(120% 90% at 100% 0, #2f6b4d 0, rgba(47, 107, 77, 0) 60%), linear-gradient(165deg, #1f4332 0, #1a3a2c 100%); } .quiz-results .qr-plan .qr-plan-text, .quiz-results .qr-restart { color: #d9e8de; } .quiz-results .qr-plan .total-sub { color: #d0e1d6; } .quiz-results .qr-restart { height: 44px; } /* the product name is a link in a heading: its touch area is 44 px high without moving anything */ .quiz-results .qr-name a { display: inline-block; padding-block: 11px; margin-block: -11px; }