/* ELVFIT quiz — enhancements layered over the original theme. Keeps original CSS intact; only adds top-back arrow + auto-advance UX. */ /* --- Top-left back arrow (replaces bottom Back so buttons don't cover the photo) --- */ .quiz-top-back { display: none; position: fixed; top: 64px; left: 14px; z-index: 60; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid rgba(91, 46, 0, 0.14); background: #fff; color: #5b2e00; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(60, 30, 0, 0.08); transition: transform 0.15s ease, background 0.15s ease; } /* z-index above the fixed header (z98) + top below the header bar (~69px desktop) so the arrow is never clipped by the header. */ .quiz-top-back { top: 80px; z-index: 99; } body[data-quiz-screen="quiz"] .quiz-top-back { display: flex; } .quiz-top-back:disabled { display: none !important; } .quiz-top-back:hover { transform: translateX(-2px); background: #faf6f1; } .quiz-top-back ._icon-arrow { font-size: 15px; transform: rotate(180deg); line-height: 1; } @media (max-width: 640px) { /* mobile header ~59px → sit just below it */ .quiz-top-back { top: 66px; left: 10px; width: 38px; height: 38px; } } /* --- Numeric input: placeholder/value left-aligned, unit ("cm"/"kg") at the right. Fixes the old centred "Height cm" look; placeholder clears on typing as usual. --- */ .quiz-step-input__label { justify-content: flex-start; gap: 0.5rem; } .quiz-step-input__control { position: static; transform: none; inset: auto; width: auto; flex: 1 1 auto; min-inline-size: 0; text-align: left; } .quiz-step-input__text { position: static; transform: none; inset: auto; flex: 0 0 auto; } /* --- Back now lives at the top: hide the bottom Back button everywhere --- */ .quiz-navigation .button-navigation_prev { display: none !important; } /* --- Radio steps auto-advance on select: drop the whole bottom action bar so nothing overlaps the photo. Text + checkbox steps keep Continue. --- */ body[data-step-choice="radio"] .quiz-navigation { display: none !important; } /* Centre the lone Continue button once Back is gone */ .quiz-navigation { justify-content: center; } /* --- Per-step mobile photo tweaks (Olesia's feedback 06.07): some steps need a bigger photo (head higher), some need it lower. --- */ @media (max-width: 47.99875em) { /* The cream page background is on ; make .page transparent so the fixed photo (z-index:-1) shows through it behind the cards on tall steps too. */ .page { background-color: transparent !important; } /* The Continue bar is a fixed cream panel spanning the bottom — it was hiding the photo. Make it transparent so the photo shows full (legs included); the button keeps its own colour. */ .quiz-navigation { background: transparent !important; box-shadow: none !important; } /* Mobile default: photo is a big FIXED image anchored to the bottom of the screen. `fixed` escapes the slide container so the photo is NEVER cropped (full body / legs shown), `contain` keeps the whole picture, it sits low and large. It lives behind the cards (z-index:-1). Fine-tune any step with the admin drag tool ([data-step-name] rules override everything here). */ .quiz-step__img { position: fixed !important; right: 0 !important; bottom: 0 !important; left: auto !important; top: auto !important; inline-size: auto !important; block-size: 56vh !important; z-index: 0 !important; margin: 0 !important; } /* Lift the text + cards + button above the photo so they stay readable/clickable while the photo sits behind them. */ .quiz-step__title, .quiz-step__options, .quiz-goal-cards, .quiz-step-input, .terms-note { position: relative; z-index: 1; } .quiz-step__img img { position: static !important; inset: auto !important; block-size: 100% !important; inline-size: auto !important; max-inline-size: 74vw !important; max-block-size: none !important; object-fit: contain !important; object-position: right bottom !important; } } /* --- Result actions: was a fixed flex-ROW bottom-bar (built for a lone CTA); with the email form added it squished the CTA into stacked words and the fixed bar overlapped the recommendation cards on mobile. Force a normal in-flow vertical stack below the cards, both items full-width. --- */ .quiz-result__actions { position: static !important; inset: auto !important; flex-direction: column; gap: 1.1rem; inline-size: min(100%, 34rem); margin-inline: auto; margin-block: 1.5rem 2.5rem; } .quiz-result__actions .button-navigation_next { inline-size: 100%; justify-content: center; white-space: nowrap; } /* --- Email capture on the result screen --- */ .quiz-email-capture { width: 100%; margin: 0; text-align: center; } .quiz-email-capture__label { font-size: 0.95rem; color: #6b5544; margin: 0 0 0.6rem; } .quiz-email-capture__row { display: flex; gap: 0.5rem; } .quiz-email-capture__input { flex: 1 1 auto; min-width: 0; padding: 0.85rem 1.1rem; border: 1px solid rgba(91, 46, 0, 0.18); border-radius: 999px; background: #fff; font-size: 1rem; color: #2c1c10; } .quiz-email-capture__input:focus { outline: none; border-color: #a9764f; } .quiz-email-capture__btn { flex: 0 0 auto; padding: 0.85rem 1.35rem; border: none; border-radius: 999px; background: #a9764f; color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background 0.15s ease; } .quiz-email-capture__btn:hover { background: #96683f; } .quiz-email-capture__btn:disabled { opacity: 0.6; cursor: default; } .quiz-email-capture__status { min-height: 1.2em; margin: 0.5rem 0 0; font-size: 0.9rem; color: #6b5544; } .quiz-email-capture__status[data-state="ok"] { color: #2e7d32; } .quiz-email-capture__status[data-state="error"] { color: #c0392b; } @media (max-width: 640px) { .quiz-email-capture__row { flex-direction: column; } }