/* =========================================================================== * THE LANDING SCREEN — light and dark, like the home page v7.47.0 * * Only the first screen changes shape: full width, a real header, and a light * theme beside the dark one it has always had. The meter is untouched here * except for its colours in light mode — the arc, the needle, the numbering * and the animation are the ones already built. * * The theme follows the home page: the same kx-theme choice in the browser, * the same data-kx attribute, so someone who picked dark on kudexaos.com * arrives here in dark. * * Everything below is scoped to #vj-ba-root and has to out-shout style.css, * which sets every colour with !important. That is why these do too. * ========================================================================= */ /* ---- the bar at the top, both themes ---- */ /* The same measurements as the home page's bar: edge to edge, 48px in from each side, 22px above and below — so the K sits in exactly the same place on both pages. */ #vj-ba-root .vj-lp-top { display: flex !important; align-items: center !important; gap: 16px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 22px 48px !important; box-sizing: border-box !important; } #vj-ba-root .vj-lp-topwrap { border-bottom: 1px solid #2A2A2E !important; margin-bottom: 8px !important; } #vj-ba-root .vj-lp-brand { display: flex !important; align-items: center !important; gap: 11px !important; } #vj-ba-root .vj-lp-mark { width: 40px !important; height: 40px !important; border-radius: 11px !important; background: #D4FF00 !important; color: #0A0A0C !important; display: grid !important; place-items: center !important; font-family: 'Fraunces', Georgia, serif !important; font-weight: 600 !important; font-size: 19px !important; } #vj-ba-root .vj-lp-bname { font-family: 'Fraunces', Georgia, serif !important; font-size: 17px !important; color: #F0EEE6 !important; line-height: 1.1 !important; display: block !important; } #vj-ba-root .vj-lp-bsub { font-size: 10px !important; letter-spacing: .11em !important; text-transform: uppercase !important; color: #8A8A80 !important; display: block !important; } #vj-ba-root .vj-lp-spacer { flex: 1 1 auto !important; } #vj-ba-root a.vj-lp-signin { font-size: 15px !important; color: #C9C9C2 !important; padding: 12px 6px !important; } #vj-ba-root a.vj-lp-signin:hover { color: #F0EEE6 !important; } #vj-ba-root button.vj-lp-theme { width: 44px !important; height: 44px !important; border-radius: 99px !important; border: 1px solid #2A2A2E !important; background: transparent !important; color: #8A8A80 !important; cursor: pointer !important; font-size: 15px !important; } #vj-ba-root button.vj-lp-theme:hover { color: #F0EEE6 !important; } /* =========================================================================== * ONE TYPE FAMILY ACROSS THE PRODUCT v7.49.0 * * The home page and the dashboard are both Inter. This page was EB Garamond * and Fraunces, so moving from one to the other felt like leaving the product. * Everything here is Inter now, at the home page's weights and tracking. * * The ONE exception is the number inside the meter: it belongs to the meter, * which stays exactly as built. * ========================================================================= */ #vj-ba-root, #vj-ba-root button, #vj-ba-root input, #vj-ba-root textarea, #vj-ba-root select, #vj-ba-root .vj-title, #vj-ba-root .vj-title em, #vj-ba-root .vj-eyebrow, #vj-ba-root .vj-intro-sub, #vj-ba-root .vj-lp-after, #vj-ba-root .vj-lp-trust, #vj-ba-root .vj-not-ai-note, #vj-ba-root .vj-q-text, #vj-ba-root .vj-q-hint, #vj-ba-root .vj-progress-sec, #vj-ba-root .vj-progress-cnt, #vj-ba-root button.vj-option, #vj-ba-root button.vj-followup-option, #vj-ba-root .vj-gate-title, #vj-ba-root .vj-gate-sub, #vj-ba-root .vj-gate-note, #vj-ba-root .vj-input, #vj-ba-root .vj-pos-sentence, #vj-ba-root input.vj-pos-inline-input, #vj-ba-root .vj-pos-optional-label, #vj-ba-root .vj-btn-primary, #vj-ba-root button.vj-btn-back, #vj-ba-root .vj-lp-bname, #vj-ba-root .vj-lp-mark { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* Anything else inside the plugin that still names a serif: one sweep, so a screen I have not listed cannot quietly go back to Garamond. The meter's number is left out on purpose. */ #vj-ba-root [class*="vj-"]:not(.vj-ba-score-num):not(.vj-ba-score-den):not(.vj-ba-tick) { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* Home's headline treatment: heavy, tight, not a serif display face. */ #vj-ba-root .vj-title { font-weight: 700 !important; letter-spacing: -.035em !important; line-height: 1.06 !important; } #vj-ba-root .vj-title em { font-weight: 700 !important; } /* The same pill the home page uses for "SOON · Be first in when it opens": a solid badge, then plain words, inside a soft outline. */ #vj-ba-root .vj-eyebrow { display: inline-flex !important; align-items: center !important; gap: 11px !important; border: 1px solid #2A2A2E !important; border-radius: 99px !important; padding: 6px 18px 6px 6px !important; margin-bottom: 30px !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: #C9C9C2 !important; } #vj-ba-root .vj-eyebrow b { background: #D4FF00 !important; color: #0A0A0C !important; border-radius: 99px !important; padding: 5px 13px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; } #vj-ba-root[data-kx="light"] .vj-eyebrow { border-color: #E6E6DF !important; color: #3F3F46 !important; } #vj-ba-root[data-kx="light"] .vj-eyebrow b { background: #2563EB !important; color: #FFFFFF !important; } #vj-ba-root .vj-intro-sub { font-size: 18px !important; line-height: 1.6 !important; font-weight: 400 !important; } #vj-ba-root .vj-q-text { font-weight: 600 !important; letter-spacing: -.02em !important; } #vj-ba-root .vj-gate-title { font-weight: 700 !important; letter-spacing: -.03em !important; } #vj-ba-root .vj-btn-primary { font-weight: 600 !important; letter-spacing: 0 !important; } #vj-ba-root button.vj-option, #vj-ba-root button.vj-followup-option { font-size: 15.5px !important; border-radius: 12px !important; } #vj-ba-root .vj-input { border-radius: 12px !important; } /* ---- the page is the page; the reading column is inside it ---- Not left to a class the script has to add: the container is full width on every screen, and each screen centres its own column. That is what stops a dark band appearing either side of a light quiz. */ #vj-ba-root { max-width: none !important; padding: 0 !important; } /* ---- the quiz sits in one card, and the page stops moving ---- Every question used to make the page its own height, so the window grew and shrank and the scrollbar came and went between answers. Now the screen is a fixed frame the height of the window, the card is centred in it with air above and below, and only a question taller than the frame scrolls. */ /* Only the screen that is showing. Without ".active" here, "display: flex" overrode the plugin's own hide rule and every screen rendered at once — the questions with the email step stacked underneath it. */ #vj-ba-root .vj-ba-screen:not(.active) { display: none !important; } #vj-ba-root #s-questions.active, #vj-ba-root #s-gate.active { display: flex !important; align-items: flex-start !important; justify-content: center !important; min-height: calc(100vh - 96px) !important; padding: 64px 24px 80px !important; box-sizing: border-box !important; } /* Anchored to the top of the frame, not centred in it: a taller question then grows downwards only, instead of shifting the whole card up the screen and making every question look like it moved. */ #vj-ba-root #vj-q-wrap, #vj-ba-root .vj-gate { width: 100% !important; max-width: 680px !important; margin: 0 auto !important; min-height: 560px !important; padding: 36px 36px 32px !important; box-sizing: border-box !important; border: 1px solid #242830 !important; border-radius: 20px !important; background: #121419 !important; } #vj-ba-root[data-kx="light"] #vj-q-wrap, #vj-ba-root[data-kx="light"] .vj-gate { border-color: #E6E6DF !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -18px rgba(16,24,40,.25) !important; } #vj-ba-root #vj-q-wrap { display: flex !important; flex-direction: column !important; } #vj-ba-root .vj-q-nav { margin-top: auto !important; padding-top: 24px !important; } #vj-ba-root #s-results { max-width: 860px !important; margin: 0 auto !important; padding: 40px 32px 72px !important; } /* The page behind the plugin follows the same theme, on the plugin's template and on the theme's own. Without this the body stayed dark while the plugin went light, which is the black either side of the quiz. */ body.vj-theme-light { background: #FFFFFF !important; } body.vj-theme-dark { background: #0A0A0C !important; } /* On the theme's own template the plugin sits inside the theme's wrapper, whose background we cannot reach. So the plugin paints the full window itself — that is what removes the dark bands beside a light quiz. On the plugin's own template there is no wrapper and this resolves to zero. */ body:not(.vj-ba-fullpage) #vj-ba-root { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* And down to the bottom of the window, so the theme's own dark wrapper never shows as a band under the quiz. */ #vj-ba-root { min-height: 100vh !important; } /* ---- the first screen gets the whole width ---- */ #vj-ba-root.vj-on-intro { max-width: none !important; padding: 0 !important; } /* On the theme's own template the plugin sits inside a narrow column. This steps out of it, so the page looks the same whichever template is chosen. (On the full-page template there is nothing to step out of, and the maths below resolves to zero.) */ body:not(.vj-ba-fullpage) #vj-ba-root.vj-on-intro { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* Home's hero, to the pixel: 1180px wrap, 32px gutters, 120px above and 130px below, so the two pages breathe identically under the bar. */ #vj-ba-root.vj-on-intro .vj-intro { max-width: 1180px !important; margin: 0 auto !important; padding: 120px 32px 130px !important; } #vj-ba-root.vj-on-intro .vj-title { max-width: 860px !important; margin-left: auto !important; margin-right: auto !important; } #vj-ba-root.vj-on-intro .vj-title { font-size: clamp(34px, 5.4vw, 60px) !important; margin-bottom: 20px !important; } #vj-ba-root.vj-on-intro .vj-intro-sub { font-size: 17px !important; max-width: 52ch !important; margin-bottom: 18px !important; } #vj-ba-root.vj-on-intro .vj-ba-gauge-wrap { margin: 0 auto !important; } #vj-ba-root.vj-on-intro button#vj-start.vj-btn-primary { max-width: 360px !important; margin: 0 auto !important; } /* what the free score is, under the button */ #vj-ba-root .vj-lp-after { font-family: 'EB Garamond', Georgia, serif !important; font-size: 15px !important; color: #C9C9C2 !important; line-height: 1.6 !important; max-width: 56ch !important; margin: 16px auto 0 !important; text-align: center !important; } #vj-ba-root .vj-lp-trust { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px 22px !important; margin: 20px auto 0 !important; font-family: 'EB Garamond', Georgia, serif !important; font-size: 13.5px !important; color: #8A8A80 !important; } /* ---- LIGHT. Same page, home-page colours. ---- */ #vj-ba-root[data-kx="light"] { background: #FFFFFF !important; color: #3F3F46 !important; } #vj-ba-root[data-kx="light"] .vj-lp-topwrap { border-bottom-color: #E6E6DF !important; } #vj-ba-root[data-kx="light"] .vj-lp-mark { background: #0A0A0C !important; color: #FFFFFF !important; } #vj-ba-root[data-kx="light"] .vj-lp-bname { color: #0A0A0C !important; } #vj-ba-root[data-kx="light"] .vj-lp-bsub { color: #6B6B73 !important; } #vj-ba-root[data-kx="light"] a.vj-lp-signin { color: #3F3F46 !important; } #vj-ba-root[data-kx="light"] a.vj-lp-signin:hover { color: #0A0A0C !important; } #vj-ba-root[data-kx="light"] button.vj-lp-theme { border-color: #E6E6DF !important; color: #6B6B73 !important; } #vj-ba-root[data-kx="light"] button.vj-lp-theme:hover { color: #0A0A0C !important; } #vj-ba-root[data-kx="light"] .vj-eyebrow { color: #2563EB !important; } #vj-ba-root[data-kx="light"] .vj-title { color: #0A0A0C !important; } #vj-ba-root[data-kx="light"] .vj-title em { color: #2563EB !important; } #vj-ba-root[data-kx="light"] .vj-intro-sub, #vj-ba-root[data-kx="light"] .vj-lp-after { color: #3F3F46 !important; } #vj-ba-root[data-kx="light"] .vj-lp-trust { color: #6B6B73 !important; } #vj-ba-root[data-kx="light"] .vj-not-ai-note { color: #6B6B73 !important; } /* the meter, same shape, light colours — including the glow, which was still throwing lime over a white page */ #vj-ba-root[data-kx="light"] .vj-ba-progress { filter: drop-shadow(0 0 5px rgba(37,99,235,.45)) drop-shadow(0 0 12px rgba(37,99,235,.20)) !important; } #vj-ba-root[data-kx="light"] .vj-ba-needle { filter: drop-shadow(0 0 4px rgba(37,99,235,.55)) !important; } #vj-ba-root[data-kx="light"] .vj-qseg { background: #E6E6DF !important; } #vj-ba-root[data-kx="light"] .vj-qseg.filled { background: #2563EB !important; } #vj-ba-root[data-kx="light"] .vj-q-stakes { color: #6B6B73 !important; } /* The tick inside a chosen option, and both quiz buttons: blue and ink in light, never lime on white. */ #vj-ba-root[data-kx="light"] .vj-option.selected .vj-check, #vj-ba-root[data-kx="light"] .vj-followup-option.selected .vj-check { background: #2563EB !important; border-color: #2563EB !important; color: #FFFFFF !important; } #vj-ba-root[data-kx="light"] .vj-check { border-color: #C9C9C2 !important; } body #vj-ba-root[data-kx="light"] .vj-q-nav .vj-btn-primary, body #vj-ba-root[data-kx="light"] button.vj-btn-primary, body #vj-ba-root[data-kx="light"] a.vj-btn-primary, body #vj-ba-root[data-kx="light"] button#vj-start.vj-btn-primary { background-color: #0A0A0C !important; background-image: none !important; color: #FFFFFF !important; } body #vj-ba-root[data-kx="light"] .vj-btn-primary:disabled { background-color: #E6E6DF !important; color: #9A9A93 !important; } #vj-ba-root[data-kx="light"] .vj-progress-cnt { background: #F1F1EC !important; color: #3F3F46 !important; } #vj-ba-root[data-kx="light"] .vj-quiz-progress-wrap { padding-top: 0 !important; } #vj-ba-root[data-kx="light"] .vj-ba-track { stroke: #E6E6DF !important; } #vj-ba-root[data-kx="light"] .vj-ba-progress, #vj-ba-root[data-kx="light"] .vj-ba-needle { stroke: #2563EB !important; } #vj-ba-root[data-kx="light"] .vj-ba-pivot { fill: #FFFFFF !important; stroke: #0A0A0C !important; } #vj-ba-root[data-kx="light"] .vj-ba-score-num { fill: #0A0A0C !important; } #vj-ba-root[data-kx="light"] .vj-ba-score-den { fill: #6B6B73 !important; } /* buttons, questions and the email step */ #vj-ba-root[data-kx="light"] button.vj-btn-primary, #vj-ba-root[data-kx="light"] a.vj-btn-primary, body #vj-ba-root[data-kx="light"] button#vj-start.vj-btn-primary { background-color: #0A0A0C !important; color: #FFFFFF !important; } #vj-ba-root[data-kx="light"] button.vj-btn-back { color: #6B6B73 !important; } #vj-ba-root[data-kx="light"] .vj-progress-sec { color: #6B6B73 !important; } #vj-ba-root[data-kx="light"] .vj-progress-cnt { background: #F1F1EC !important; color: #3F3F46 !important; } #vj-ba-root[data-kx="light"] .vj-q-text { color: #0A0A0C !important; } #vj-ba-root[data-kx="light"] .vj-q-hint { color: #6B6B73 !important; } body #vj-ba-root[data-kx="light"] button.vj-option, body #vj-ba-root[data-kx="light"] button.vj-followup-option { background-color: #FFFFFF !important; border-color: #E6E6DF !important; color: #3F3F46 !important; } body #vj-ba-root[data-kx="light"] button.vj-option:hover, body #vj-ba-root[data-kx="light"] button.vj-followup-option:hover { border-color: #0A0A0C !important; } body #vj-ba-root[data-kx="light"] button.vj-option.selected, body #vj-ba-root[data-kx="light"] button.vj-followup-option.selected { background-color: #EFF3FE !important; border-color: #2563EB !important; color: #0A0A0C !important; } #vj-ba-root[data-kx="light"] .vj-gate-title { color: #0A0A0C !important; } #vj-ba-root[data-kx="light"] .vj-gate-sub, #vj-ba-root[data-kx="light"] .vj-gate-note { color: #3F3F46 !important; } #vj-ba-root[data-kx="light"] .vj-input { background: #FFFFFF !important; border-color: #D8D8D0 !important; color: #0A0A0C !important; } #vj-ba-root[data-kx="light"] .vj-input::placeholder { color: #9A9A93 !important; } #vj-ba-root[data-kx="light"] .vj-input:focus { border-color: #2563EB !important; } #vj-ba-root[data-kx="light"] .vj-pos-sentence { color: #0A0A0C !important; } body #vj-ba-root[data-kx="light"] input.vj-pos-inline-input { color: #0A0A0C !important; border-bottom-color: rgba(10,10,12,.3) !important; } body #vj-ba-root[data-kx="light"] input.vj-pos-inline-input:focus { border-bottom-color: #2563EB !important; background: rgba(37,99,235,.06) !important; } #vj-ba-root[data-kx="light"] .vj-progress-label { color: #6B6B73 !important; } #vj-ba-root[data-kx="light"] .vj-progress-track { background: #ECECE6 !important; } #vj-ba-root[data-kx="light"] .vj-progress-step.active .vj-progress-dot { background: #2563EB !important; color: #FFFFFF !important; } #vj-ba-root[data-kx="light"] .vj-progress-step.active .vj-progress-label { color: #2563EB !important; } @media (max-width: 640px) { #vj-ba-root .vj-lp-top { padding: 16px 24px !important; gap: 10px !important; } #vj-ba-root .vj-lp-bsub { display: none !important; } #vj-ba-root.vj-on-intro .vj-intro { padding: 56px 24px 70px !important; } #vj-ba-root .vj-lp-trust { flex-direction: column !important; gap: 6px !important; } } /* =========================================================================== * NOTHING BETWEEN THE BAR AND THE PAGE v7.49.1 * * On the full-page template the page's own content wrapper is still there — * a builder section, a theme's entry padding, a stray empty paragraph — and * each one adds its own space above the plugin. The home page has none of * that, which is why its bar sat flush and this one did not. Inside this * template only, those wrappers are flattened. * ========================================================================= */ body.vj-ba-fullpage { padding: 0 !important; margin: 0 !important; } body.vj-ba-fullpage .entry-content, body.vj-ba-fullpage .elementor, body.vj-ba-fullpage .elementor-section, body.vj-ba-fullpage .elementor-container, body.vj-ba-fullpage .elementor-column, body.vj-ba-fullpage .elementor-widget-wrap, body.vj-ba-fullpage .elementor-widget-shortcode, body.vj-ba-fullpage .e-con, body.vj-ba-fullpage .e-con-inner { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.vj-ba-fullpage p:empty { display: none !important; } body.vj-ba-fullpage #vj-ba-root { margin-top: 0 !important; } /* =========================================================================== * EVERY FIELD AND PANEL, IN LIGHT v7.53.0 * * The quiz has more surfaces than the options and the buttons: the optional * note box, the skill field and its chips, the worked example, the tick boxes, * the validation lines. Each one was written dark, so on a white card they * came back as black rectangles. This is the whole set, in one place. * ========================================================================= */ #vj-ba-root[data-kx="light"] textarea, #vj-ba-root[data-kx="light"] input[type="text"], #vj-ba-root[data-kx="light"] input[type="email"], #vj-ba-root[data-kx="light"] .vj-textarea, #vj-ba-root[data-kx="light"] .vj-input, #vj-ba-root[data-kx="light"] .vj-text-input-wrap, #vj-ba-root[data-kx="light"] .vj-tag-input-wrap { background: #FFFFFF !important; border-color: #D8D8D0 !important; color: #0A0A0C !important; border-radius: 12px !important; } #vj-ba-root[data-kx="light"] textarea::placeholder, #vj-ba-root[data-kx="light"] input::placeholder, #vj-ba-root[data-kx="light"] .vj-textarea::placeholder { color: #9A9A93 !important; } #vj-ba-root[data-kx="light"] textarea:focus, #vj-ba-root[data-kx="light"] input:focus, #vj-ba-root[data-kx="light"] .vj-textarea:focus { border-color: #2563EB !important; } /* Chips people add themselves, and the skill field's chips. */ #vj-ba-root[data-kx="light"] .vj-tag { background: #EFF3FE !important; border-color: #2563EB !important; color: #1E3A8A !important; } #vj-ba-root[data-kx="light"] .vj-tag-remove { color: #1E3A8A !important; } /* Tick boxes on the multi-select questions. */ #vj-ba-root[data-kx="light"] .vj-tickbox-mark { border-color: #C9C9C2 !important; } #vj-ba-root[data-kx="light"] .selected .vj-tickbox-mark, #vj-ba-root[data-kx="light"] .vj-tickbox-mark.checked { background: #2563EB !important; border-color: #2563EB !important; color: #FFFFFF !important; } /* The worked example beside the positioning sentence. */ #vj-ba-root[data-kx="light"] .vj-pos-worked-example { background: #F7F8FB !important; border-color: #D8E3FD !important; border-radius: 12px !important; } #vj-ba-root[data-kx="light"] .vj-pos-worked-label { color: #2563EB !important; } #vj-ba-root[data-kx="light"] .vj-pos-worked-text { color: #3F3F46 !important; } /* Small print that was written for a dark page. */ #vj-ba-root[data-kx="light"] .vj-multi-count, #vj-ba-root[data-kx="light"] .vj-pos-optional-label, #vj-ba-root[data-kx="light"] .vj-comment-label, #vj-ba-root[data-kx="light"] .vj-gate-note { color: #6B6B73 !important; } #vj-ba-root[data-kx="light"] .vj-pos-validation-msg { color: #B45309 !important; } #vj-ba-root[data-kx="light"] .vj-pos-typo-msg { color: #B42318 !important; } #vj-ba-root[data-kx="light"] .vj-pos-optional-result { border-top-color: #E6E6DF !important; } /* The "type your own" toggle on the skills question, and the optional inline field in the positioning sentence — the last two written only for dark. */ body #vj-ba-root[data-kx="light"] button.vj-custom-toggle { border-color: #C9C9C2 !important; color: #6B6B73 !important; border-radius: 12px !important; } body #vj-ba-root[data-kx="light"] button.vj-custom-toggle:hover, body #vj-ba-root[data-kx="light"] button.vj-custom-toggle.active { border-color: #2563EB !important; color: #2563EB !important; } body #vj-ba-root[data-kx="light"] input.vj-pos-inline-input-optional { color: #0A0A0C !important; } #vj-ba-root[data-kx="light"] .vj-field-incomplete { border-bottom-color: #B45309 !important; } #vj-ba-root[data-kx="light"] .vj-field-typo { border-bottom-color: #B42318 !important; } /* Wrappers that only group things: they should show the card, not a panel of their own. (Deliberately named, not a wildcard — a wildcard here also wiped the share card and the score bars on the results screen.) */ #vj-ba-root[data-kx="light"] .vj-comment-wrap, #vj-ba-root[data-kx="light"] .vj-followup-wrap, #vj-ba-root[data-kx="light"] .vj-custom-input-wrap { background: transparent !important; } /* ---- the results screen ---- It is written for a dark page — pale text, lime accents, its own share card — and it is reached only when the hand-off into the dashboard is off. Rather than repaint fifty rules, in light mode it keeps its dark surface and sits on the white page as one dark card, which stays legible either way. */ #vj-ba-root[data-kx="light"] #s-results { background: #0A0A0C !important; color: #F0EEE6 !important; border-radius: 20px !important; padding: 32px 28px !important; margin: 40px auto 64px !important; max-width: 860px !important; } /* ---- small screens ---- A phone cannot give a 560px card its air as well; let it be as tall as it needs and keep the sides tight. */ @media (max-width: 640px) { #vj-ba-root #s-questions.active, #vj-ba-root #s-gate.active { min-height: 0 !important; padding: 24px 16px 40px !important; display: block !important; } #vj-ba-root #vj-q-wrap, #vj-ba-root .vj-gate { min-height: 0 !important; padding: 24px 20px 24px !important; border-radius: 16px !important; } } /* =========================================================================== * THE QUIZ, TIDIED v7.54.0 * * Small things that add up over fourteen questions: the scrollbar no longer * appears and disappears between a long question and a short one (which moved * the whole page sideways), options have a real hover and a visible focus * ring, and the answered/selected state reads at a glance. * ========================================================================= */ html { scrollbar-gutter: stable; } #vj-ba-root .vj-q-text { margin-bottom: 6px !important; } #vj-ba-root .vj-q-hint { margin-bottom: 18px !important; } #vj-ba-root .vj-options { gap: 10px !important; } body #vj-ba-root button.vj-option, body #vj-ba-root button.vj-followup-option { padding: 15px 18px !important; transition: border-color .15s, background .15s, transform .08s !important; } body #vj-ba-root button.vj-option:active { transform: scale(.995) !important; } body #vj-ba-root button.vj-option:focus-visible, body #vj-ba-root button.vj-followup-option:focus-visible, #vj-ba-root .vj-btn-primary:focus-visible, #vj-ba-root .vj-input:focus-visible, #vj-ba-root .vj-textarea:focus-visible { outline: 2px solid #2563EB !important; outline-offset: 2px !important; } #vj-ba-root[data-kx="light"] button.vj-option:hover { border-color: #0A0A0C !important; } #vj-ba-root .vj-qseg { transition: background .25s ease !important; } #vj-ba-root .vj-progress-hdr { align-items: center !important; margin-bottom: 12px !important; } #vj-ba-root .vj-q-nav { border-top: 1px solid rgba(127,127,127,.18) !important; margin-top: 24px !important; padding-top: 20px !important; } /* =========================================================================== * THE LAST TWO DARK PANELS v7.55.0 * * The "I don't have a banner yet" tick row, the blurred score teaser and the * newsletter note on the email step were all still painted for a dark page. * ========================================================================= */ body #vj-ba-root[data-kx="light"] button.vj-tickbox { background-color: #FFFFFF !important; border-color: #D8D8D0 !important; color: #3F3F46 !important; border-radius: 12px !important; padding: 13px 16px !important; } body #vj-ba-root[data-kx="light"] button.vj-tickbox:hover, body #vj-ba-root[data-kx="light"] button.vj-tickbox:focus { border-color: #0A0A0C !important; color: #0A0A0C !important; } body #vj-ba-root[data-kx="light"] button.vj-tickbox.checked { border-color: #2563EB !important; background-color: #EFF3FE !important; color: #0A0A0C !important; } /* The teaser keeps its dark panel — the blurred score is meant to look like a photograph of the result — but it sits as a rounded card on the white one. */ #vj-ba-root[data-kx="light"] .vj-score-preview { border-radius: 16px !important; border-color: #E6E6DF !important; border-top-color: #2563EB !important; } #vj-ba-root[data-kx="light"] .vj-preview-score { color: #2563EB !important; } #vj-ba-root[data-kx="light"] .vj-newsletter-note { background: #F7F8FB !important; border-color: #E6E6DF !important; color: #3F3F46 !important; border-radius: 12px !important; } #vj-ba-root[data-kx="light"] .vj-newsletter-note strong, #vj-ba-root[data-kx="light"] .vj-newsletter-note a { color: #2563EB !important; }