/* ── Questions ─────────────────────────────────────────────────────── */
/* The per-slide background image layer. Empty on every slide today
(url("")), but a slide given an image later would paint over the
gradient. */
:host .question-background-image,
:host .results-background-image { display: none !important; }
/* The glass sheet from the app's Custom CSS (8% white, blur, 150%
saturation) on the wrapper and the navigation bar. It exists to refract
the blurred page behind the popup; over a gradient it only greys the
black, and the saturation turned the brand rust into a red band along the
bottom — measured: with it removed the band went. Answer cards keep their
own glass. */
:host .question-wrapper,
:host .results-content,
:host .navigation-bar__container {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* RevenueHunt's own progress bar, should anyone switch it on in the app:
two progress indicators would be one too many. */
:host .navigation-bar__progress-bar,
:host .navigation-bar__progress-text { display: none !important; }
/* Arrows sit on the frame inset the wordmark and close button share. */
:host .navigation-bar__container {
padding: 8px var(--hqs-nav-x, 10px) var(--hqs-nav-y, 4px) !important;
}
/* Room at the top so a long question never runs under the dots. */
:host .question-wrapper,
:host .results-content { padding-top: 44px !important; }
/* The slider's handle. The app paints it with --input-text-color, the dark
text colour of input fields — near-invisible on the dark ground. Painted
directly rather than by changing that variable, which also colours the
text typed into the email field. Firefox reads the -moz- rule; the app
ships only the -webkit- one. */
:host .range-slider__input::-webkit-slider-thumb { background: #FFFFFF !important; }
:host .range-slider__input::-moz-range-thumb {
background: #FFFFFF !important;
border: 0 !important;
width: 18px;
height: 18px;
border-radius: 999px;
}
/* ── Results ───────────────────────────────────────────────────────── */
/* The products were a flex row of fixed 250px cards, which on a phone is
one per row: six lenses meant six screens of scrolling. A grid instead —
two across on a phone, three on desktop, where six had been wrapping five
and an orphan. */
:host .results-content {
padding-left: var(--hqs-nav-x, 18px) !important;
padding-right: var(--hqs-nav-x, 18px) !important;
}
:host .results-slot_products_list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
align-items: stretch !important;
}
@media (min-width: 750px) {
:host .results-slot_products_list {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Liquid glass, not white: the same 8% sheet and blur the answer cards
use, with a hairline for an edge. No shadow — nothing in the quiz casts
one. */
:host .results-slot {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 10px !important;
background: rgba(255, 255, 255, 0.07) !important;
-webkit-backdrop-filter: blur(24px) !important;
backdrop-filter: blur(24px) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 12px !important;
box-shadow: none !important;
}
/* Card as a column with the button pushed to the bottom, so every button
in a row lines up even when one title runs to two lines and the next
to one. */
:host .slot-product__container {
width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
:host .slot-product__block {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
:host .slot-product__block:last-child { margin-top: auto !important; }
:host .slot-product__image-link { display: block !important; height: auto !important; }
:host .slot-product__image {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
border-radius: 8px !important;
}
/* Was 24px in near-black, sized for a white card one product wide. The
app also gives it min-height:70px — two lines at that size, 40px of air
at this one. Two lines of the new size instead, so a one-line title and a
two-line title still start and end on the same lines across a row. */
:host .slot-product__title {
margin: 10px 0 10px !important;
min-height: 2.5em !important;
color: #FFFFFF !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
letter-spacing: -0.02em !important;
}
:host .slot-product__link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding: 9px 10px !important;
background: #FFFFFF !important;
color: #0A0A0A !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}
@media (min-width: 750px) {
:host .results-slot { padding: 12px !important; }
:host .slot-product__title { font-size: 15px !important; }
:host .slot-product__link { font-size: 13px !important; padding: 11px 12px !important; }
}
/* The retake button on the same frame inset as everything else. The bar is
sticky and blurred products scrolling under it into a grey smear — the
light-grey product shots, softened. A fade to near-black instead: the
cards dim out as they pass under the button rather than turning to fog. */
:host .result-bottom-bar__container {
padding: 20px var(--hqs-nav-x, 12px) var(--hqs-nav-y, 6px) !important;
background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.62) 55%, rgba(10, 10, 10, 0) 100%) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
