:root { --va-bg-start: #0f2b47; --va-bg-end: #1bd2cc; --va-surface: #ffffff; --va-text: #1c1a2e; --va-muted: #6b6785; --va-accent: #5b4bdb; --va-accent-dark: #4636b0; --va-success: #1b8a5a; --va-danger: #c23a4b; --va-radius: 16px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; color: var( --va-text ); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* * #va-app is a fixed full-viewport takeover layer (gradient backdrop + * centering), not a normally-flowing block -- the shortcode can land * anywhere inside a theme's own page layout (header, sidebar, whatever * else surrounds it), and `position: fixed` + `inset: 0` makes the * assessment its own full-screen experience regardless, the same way * the original standalone test page (which fully owned ) looked. * .va-screen -- the thing app.js actually swaps via innerHTML on every * screen change -- is the phone-sized card itself: fixed max-height with * its own internal scroll, so the OUTER layer never scrolls the page, * only the card's content does. */ #va-app { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: linear-gradient( 135deg, var( --va-bg-start ), var( --va-bg-end ) ); overflow: hidden; /* !important, deliberately: this embeds inside an arbitrary WordPress theme's page, and any host theme that sets its own body/global text color (very common -- e.g. a light heading color meant for a dark hero section elsewhere on the page) would otherwise leak into every element below that doesn't set its own explicit color, since plain inheritance has no specificity to fight back with. Confirmed on a live site: headings rendered nearly invisible (a pale theme heading color) while explicitly- colored text (paragraphs, buttons) was unaffected. This re-establishes the correct base color for the whole app regardless of what the host page does; more specific rules below (accent titles, muted text, etc.) still win over this normally. */ color: var( --va-text ) !important; } /* * #va-card is the phone-card frame: shrink-wrapped to its content up to * a max-height cap (not a fixed height) -- so a short screen produces a * short card and a tall/overflowing screen caps out and scrolls * internally. The brand badge lives INSIDE the scrollable flow (see * #va-screen-mount / .va-brand-badge below), as the last thing after the * screen's own content, not as an absolute overlay -- so it sits right * at that screen's own card bottom when content is short, and only * scrolls into view once you reach the true bottom when content is * long, the same way the rest of the content behaves. */ #va-card { position: relative; width: min( 90vw, 420px ); max-height: calc( 100dvh - 48px ); background: var( --va-surface ); border-radius: var( --va-radius ); box-shadow: 0 18px 38px rgba( 0, 0, 0, 0.25 ); overflow: hidden; display: flex; flex-direction: column; transition: width 180ms ease; } /* * flex: 1 + min-height: 0 (NOT height: 100%) -- a percentage height here * doesn't reliably resolve against #va-card's max-height cap (Chrome * computes it from the card's content-derived height, before the cap * clips it, so the scroll region always grew to fit its content instead * of being capped -- confirmed via a real overflowing screen, nothing * scrolled). Flexbox's min-height: 0 override is what actually lets this * child shrink to fit inside a capped flex container and scroll. */ #va-card-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; /* Scrolling itself (mouse wheel on desktop, touch swipe on mobile) works regardless of whether a scrollbar is drawn -- hiding the track visually doesn't touch that. No scrollbar-gutter reserve either: that existed only to stop a visible scrollbar from shifting the layout when it appeared, which no longer applies once the scrollbar itself is never drawn. */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge/IE */ } #va-card-scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Chromium Edge */ } .va-screen { padding: 28px 24px 8px; animation: va-fade-in 220ms ease-out; overflow-wrap: break-word; } .va-brand-badge { text-align: right; padding: 4px 24px 18px; font-size: 10px; letter-spacing: 0.02em; color: var( --va-muted ); opacity: 0.65; } /* * Widening for Matrix/Rotation-style item screens (spec §9: "phone-width * on mobile, a comfortable focused column on desktop that can widen"). * Driven by app.js toggling .va-app-wide on #va-app (see show()) rather * than relying solely on :has(), so the layout doesn't silently stay * narrow on a browser without :has() support. */ @media ( min-width: 720px ) { #va-app.va-app-wide #va-card { width: min( 90vw, 640px ); } } @media ( max-width: 768px ) { /* Card starts near the top instead of dead-centre on small screens -- better for longer scrollable content -- but still leaves a strip of the gradient backdrop visible on either side, not edge-to-edge. */ #va-app { align-items: flex-start; padding: max( 10px, env( safe-area-inset-top ) ) max( 10px, env( safe-area-inset-right ) ) max( 10px, env( safe-area-inset-bottom ) ) max( 10px, env( safe-area-inset-left ) ); } #va-card { width: min( 92vw, 400px ); max-height: calc( 100dvh - 20px ); border-radius: 16px; } } @media ( max-width: 380px ) { .va-screen { padding: 22px 16px 8px; } } @keyframes va-fade-in { from { opacity: 0; transform: translateY( 6px ); } to { opacity: 1; transform: translateY( 0 ); } } /* color: !important on all three -- themes almost always style bare h1/h2/h3 directly (not just inherited), so a same-specificity rule here can lose to the theme's depending on stylesheet load order. .va-title-accent below still wins where it's meant to (a class selector beats a bare element one even when both are !important). */ h1 { font-size: 1.5rem; margin: 0 0 12px; color: var( --va-text ) !important; } h2 { font-size: 1.25rem; margin: 0 0 12px; color: var( --va-text ) !important; } h3 { font-size: 1rem; margin: 20px 0 8px; color: var( --va-text ) !important; } .va-title-accent { text-align: center; color: var( --va-accent ) !important; } /* !important for the same reason as h1/h2/h3/label above -- p is a bare tag selector too, and it's the one carrying most of the actual test copy (questions, result text), so it's the highest-stakes gap to leave unprotected against a same-specificity theme rule. */ p { line-height: 1.5; color: var( --va-text ) !important; } .va-note, .va-muted { color: var( --va-muted ); font-size: 0.85rem; } .va-strengths-note { background: #f7f6fd; border-radius: 10px; padding: 12px 14px; font-size: 0.85rem; margin-top: 14px; } .va-primary { background: var( --va-accent ); color: #fff; border: none; border-radius: 999px; min-height: 48px; padding: 12px 24px; font-size: 1rem; font-weight: 600; cursor: pointer; width: 100%; margin-top: 12px; transition: background 120ms ease; } .va-primary:hover:not( :disabled ) { background: var( --va-accent-dark ); } .va-primary:disabled { opacity: 0.4; cursor: not-allowed; } label { display: block; font-size: 0.9rem; font-weight: 600; margin-top: 14px; color: var( --va-text ) !important; } label svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; } input[type='date'], input[type='text'], input[type='email'], input[type='password'], select { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid #d8d5ea; font-size: 1rem; font-family: inherit; background: #fff; color: var( --va-text ) !important; /* same bare-selector protection as p/h1-h3 above */ } .va-dob-selects { display: flex; gap: 8px; margin-top: 6px; } .va-dob-selects select { margin-top: 0; padding: 10px 6px; min-width: 0; } .va-checkbox { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 0.85rem; color: var( --va-text ) !important; } .va-checkbox input { margin-top: 3px; } .va-error { color: var( --va-danger ); font-size: 0.85rem; min-height: 1.2em; } .va-loading { text-align: center; color: var( --va-muted ); } .va-logo-mark { display: flex; justify-content: center; margin-bottom: 12px; } .va-logo-mark-img { width: 72px; height: 72px; object-fit: contain; } .va-intro-meta { display: flex; justify-content: center; gap: 20px; margin: 14px 0; font-size: 0.85rem; font-weight: 600; color: var( --va-accent-dark ); } .va-intro-meta span { display: inline-flex; align-items: center; gap: 6px; } .va-intro-meta svg { width: 16px; height: 16px; } .va-subtest-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .va-progress-bar { height: 6px; background: #eeecff; border-radius: 999px; overflow: hidden; margin-bottom: 18px; } .va-progress-fill { height: 100%; background: linear-gradient( 90deg, var( --va-accent ), #2a9d8f ); border-radius: 999px; transition: width 240ms ease; } .va-badge { display: inline-flex; align-items: center; gap: 6px; background: #eeecff; color: var( --va-accent-dark ); border-radius: 999px; padding: 4px 12px; font-size: 0.8rem; font-weight: 600; margin-bottom: 16px; } .va-badge-warmup { background: #fff3d6; color: #8a6300; } .va-badge-icon { display: inline-flex; width: 14px; height: 14px; } .va-badge-icon svg { width: 100%; height: 100%; } .va-matrix-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 8px; max-width: 340px; margin: 0 auto 16px; } .va-grid-cell { aspect-ratio: 1; } .va-grid-cell.filled .va-cell-empty-bg { display: none; } .va-cell-bg { fill: #f7f6fd; stroke: #e2e0f3; stroke-width: 2; } .va-cell-empty-bg { fill: #fbfbff; stroke: #c9c5ea; stroke-width: 2; stroke-dasharray: 6 5; } .va-cell, .va-cell-empty { width: 100%; height: 100%; display: block; } .va-instructions { text-align: center; font-size: 0.85rem; color: var( --va-muted ); } .va-options { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 10px; max-width: 420px; margin: 0 auto 8px; } @media ( min-width: 720px ) { .va-options { grid-template-columns: repeat( 6, 1fr ); max-width: 100%; } } .va-option { background: #f7f6fd; border: 2px solid transparent; border-radius: 10px; cursor: grab; transition: border-color 120ms ease, transform 120ms ease; } .va-option:hover { border-color: #d3ccf7; } .va-option.selected { border-color: var( --va-accent ); transform: translateY( -2px ); } .va-feedback { margin-top: 14px; text-align: center; font-weight: 600; min-height: 1.4em; } .va-secondary { background: transparent; color: var( --va-accent-dark ); border: 1px solid #d8d5ea; border-radius: 999px; min-height: 44px; padding: 10px 20px; font-size: 0.9rem; font-weight: 600; cursor: pointer; width: 100%; margin-top: 8px; } .va-secondary:disabled { opacity: 0.4; cursor: not-allowed; } /* Mental Rotation */ .va-rotation-reference { display: flex; justify-content: center; margin-bottom: 16px; } .va-polyomino .va-cell-bg { fill: #f7f6fd; stroke: #e2e0f3; } .va-mirror-reference { display: flex; justify-content: center; margin-bottom: 16px; } .va-mirror-options { grid-template-columns: repeat( 2, 1fr ); max-width: 340px; } @media ( min-width: 720px ) { .va-mirror-options { grid-template-columns: repeat( 2, 1fr ); max-width: 340px; } } .va-mirror-line { stroke: #9a94c9; stroke-width: 2; stroke-dasharray: 5 4; } .va-mirror-line-water { stroke: #457B9D; stroke-width: 2.5; stroke-dasharray: none; } /* Sequence Memory / Corsi */ .va-corsi-grid { display: grid; gap: 10px; max-width: 300px; margin: 0 auto 20px; } .va-corsi-tile { aspect-ratio: 1; background: #f0eefb; border: 2px solid #e2e0f3; border-radius: 10px; cursor: pointer; transition: background 120ms ease, transform 120ms ease; } .va-corsi-tile.flash { background: var( --va-accent ); transform: scale( 0.94 ); } .va-corsi-tile.tapped { background: #d7d1fb; border-color: var( --va-accent ); } /* Symbol Speed */ .va-symbol-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 12px; padding: 10px; background: #f7f6fd; border-radius: 12px; } .va-symbol-key-item { display: flex; flex-direction: column; align-items: center; font-weight: 700; font-size: 0.9rem; color: var( --va-text ) !important; } .va-timer { text-align: center; font-weight: 700; font-size: 1.1rem; color: var( --va-accent-dark ); margin-bottom: 8px; } .va-symbol-current { display: flex; justify-content: center; margin-bottom: 16px; } .va-symbol-keypad { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 8px; max-width: 260px; margin: 0 auto; } .va-symbol-keypad-btn { min-height: 48px; padding: 14px; font-size: 1.1rem; font-weight: 700; border-radius: 10px; border: 1px solid #d8d5ea; background: #fff; cursor: pointer; } .va-symbol-keypad-btn:hover { background: #f0eefb; } /* Number Series */ .va-number-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; } .va-number-card { min-width: 44px; padding: 12px; text-align: center; font-weight: 700; background: #f7f6fd; border-radius: 10px; border: 2px solid #e2e0f3; color: var( --va-text ) !important; } /* !important too, or the (also !important) .va-number-card rule above -- same specificity, but that one now always wins on ties -- would incorrectly override this intentional accent color on the blank/ placeholder card. */ .va-number-card-blank { border-color: var( --va-accent ); color: var( --va-accent ) !important; } .va-number-input { display: block; width: 100%; padding: 12px; font-size: 1.1rem; text-align: center; border-radius: 10px; border: 1px solid #d8d5ea; } /* Verbal Analogies */ .va-verbal-analogy { text-align: center; font-size: 1.2rem; font-weight: 600; margin-bottom: 16px; color: var( --va-text ) !important; } .va-verbal-slot { display: inline-block; min-width: 70px; padding: 2px 10px; border-bottom: 2px dashed var( --va-accent ); color: var( --va-accent-dark ) !important; } .va-verbal-slot.filled { border-bottom-style: solid; } .va-word-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 8px; } .va-word-option { min-height: 44px; display: flex; align-items: center; padding: 10px 18px; background: #f7f6fd; border: 2px solid transparent; border-radius: 999px; font-weight: 600; cursor: grab; color: var( --va-text ) !important; } .va-word-option:hover { border-color: #d3ccf7; } .va-word-option.selected { border-color: var( --va-accent ); } .va-feedback-correct { color: var( --va-success ); } .va-feedback-incorrect { color: var( --va-danger ); } /* * Icon sits beside the title/name column, not glued in front of the * title text -- bigger (64px) and given real breathing room, occupying * the space to the left of that text block rather than being crammed * inline with it. */ .va-result-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .va-result-header-icon { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; } .va-result-header-text { flex: 1; min-width: 0; } .va-result-header-text .va-title-accent { text-align: left; margin-bottom: 2px; } .va-result-name { text-align: left; font-weight: 600; color: var( --va-muted ); margin: 0; } .va-iq-scale { margin: 4px 0 20px; } .va-iq-scale-svg { width: 100%; height: auto; display: block; } /* * Hidden until #screenResult's IntersectionObserver adds .va-revealed * to the wrapping .va-iq-scale div (the chart is well below the fold on * a typical result -- animating on render, before it's ever scrolled * into view, meant the animation had already finished by the time * anyone actually saw it). */ .va-iq-scale-fill, .va-iq-scale-curve { opacity: 0; } .va-iq-scale.va-revealed .va-iq-scale-fill { fill: rgba( 91, 75, 219, 0.12 ); animation: va-fade-in 900ms ease-out forwards; } .va-iq-scale.va-revealed .va-iq-scale-curve { fill: none; stroke: var( --va-accent ); stroke-width: 2; stroke-linejoin: round; animation: va-fade-in 900ms ease-out forwards; } .va-iq-scale-axis { stroke: #d8d5ea; stroke-width: 1; } .va-iq-scale-sdline { stroke: #c9c5ea; stroke-width: 1; stroke-dasharray: 3 3; } .va-iq-scale-tick, .va-iq-scale-sdlabel { font-size: 8px; fill: var( --va-muted ); } .va-iq-scale-avgline { stroke: var( --va-accent-dark ); stroke-width: 1; stroke-dasharray: 2 2; } .va-iq-scale-avglabel { font-size: 9px; font-weight: 700; fill: var( --va-accent-dark ); } .va-iq-scale-marker { opacity: 0; } .va-iq-scale.va-revealed .va-iq-scale-marker { animation: va-fade-in 700ms ease-out 850ms forwards; } .va-iq-scale-marker-line { stroke: var( --va-accent-dark ); stroke-width: 1.5; stroke-dasharray: 2 2; } .va-iq-scale-marker-dot { fill: var( --va-accent-dark ); } .va-iq-scale-marker-label { font-size: 9px; font-weight: 700; fill: var( --va-accent-dark ); } .va-result-headline { display: flex; align-items: center; gap: 18px; margin: 14px 0 20px; } .va-result-headline-score { font-size: 3rem; font-weight: 800; color: var( --va-accent-dark ); line-height: 1; flex-shrink: 0; } .va-result-headline-meta p { margin: 0 0 4px; font-size: 0.9rem; } .va-result-bars { display: flex; flex-direction: column; gap: 12px; } .va-result-row { display: grid; grid-template-columns: 1fr; gap: 4px; } .va-result-row-label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var( --va-text ) !important; } .va-result-row-icon { display: inline-flex; flex-shrink: 0; } .va-result-row-icon svg { width: 16px; height: 16px; } .va-result-bar { position: relative; height: 10px; background: #f0eefb; border-radius: 999px; overflow: hidden; } .va-result-bar-fill { height: 100%; border-radius: 999px; /* transition-delay is set per-bar in JS (animateResultBars()) so they fill one after another instead of all at once -- a staggered sequence reads as "this is animating" far more obviously than several bars moving simultaneously and settling in well under a second. */ transition: width 1100ms cubic-bezier( 0.22, 1, 0.36, 1 ); } .va-result-row-score { font-size: 0.8rem; color: var( --va-muted ); text-align: right; } .va-radar-wrap { max-width: 340px; margin: 0 auto 18px; } /* Locked cognitive-profile section: about half the subtest rows above this are real, unblurred data (a teaser -- result.subtest_scores already only contains that revealed half, see VA_Engine::get_result()); this wraps just the STILL-locked remainder as a blurred, generic placeholder (no real per-subtest numbers for those) with an unlock overlay on top. min-height matters here since the wrapped region is only 1-3 skeleton rows tall -- without it the overlay (icon + heading + copy + button) wouldn't have room to fit. */ .va-locked-wrap { position: relative; min-height: 260px; border-radius: 14px; overflow: hidden; } .va-locked-content { filter: blur( 6px ); user-select: none; pointer-events: none; } .va-skeleton-label { width: 90px; height: 12px; border-radius: 6px; background: #e5e2f5; } .va-skeleton-fill { height: 100%; border-radius: 999px; background: #d8d3f0; } .va-skeleton-score { width: 24px; height: 10px; border-radius: 5px; background: #e5e2f5; margin-left: auto; } .va-unlock-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 20px; background: rgba( 255, 255, 255, 0.72 ); } .va-unlock-icon { color: var( --va-accent ); margin-bottom: 6px; } .va-unlock-overlay h3 { margin: 0 0 6px; } .va-unlock-overlay p { margin: 0 0 16px; max-width: 280px; color: var( --va-muted ); font-size: 0.9rem; } .va-unlock-overlay .va-primary { margin-top: 0; } .va-result-actions { display: flex; gap: 10px; margin-top: 20px; } .va-result-actions .va-primary, .va-result-actions .va-secondary { margin-top: 0; } a.va-secondary { display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; } .va-link-btn { display: block; margin: 14px auto 0; background: none; border: none; color: var( --va-accent-dark ); font-size: 0.85rem; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 6px; } .va-methodology-panel { margin-top: 10px; padding: 14px 16px; background: #f7f6fd; border-radius: 12px; font-size: 0.85rem; line-height: 1.6; color: var( --va-text ); } .va-screen-save label { text-align: left; } /* ---- AQ: consent/demographics -------------------------------------- */ .va-aq-demographics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 10px 0 6px; text-align: left; } .va-aq-demographics label { display: block; font-size: 0.85rem; color: var( --va-muted ); } /* ---- AQ: Likert renderer --------------------------------------------- */ .va-item-stem { font-size: 1.05rem; font-weight: 600; color: var( --va-text ); margin: 4px 0 18px; text-align: left; } .va-likert-scale { display: flex; flex-direction: column; gap: 8px; } .va-likert-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid #e5e2f5; background: var( --va-surface ); font-family: inherit; font-size: 0.95rem; color: var( --va-text ); cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; } .va-likert-btn:hover:not( :disabled ) { border-color: var( --va-accent ); } .va-likert-btn:disabled { cursor: default; opacity: 0.55; } .va-likert-btn-selected { border-color: var( --va-accent ); background: #f2effc; opacity: 1 !important; } .va-likert-btn-value { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #f0eefb; color: var( --va-accent-dark ); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } /* ---- AQ: SJT renderer -------------------------------------------------- */ .va-sjt-instructions { color: var( --va-muted ); font-size: 0.85rem; margin: -10px 0 14px; text-align: left; } .va-sjt-options { display: flex; flex-direction: column; gap: 8px; } .va-sjt-option { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid #e5e2f5; background: var( --va-surface ); font-family: inherit; font-size: 0.92rem; color: var( --va-text ); cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; } .va-sjt-option:hover:not( :disabled ) { border-color: var( --va-accent ); } .va-sjt-option:disabled { cursor: default; opacity: 0.55; } .va-sjt-option-selected { border-color: var( --va-accent ); background: #f2effc; opacity: 1 !important; } .va-sjt-rate-row { padding: 10px 0; border-bottom: 1px solid #ece9fa; text-align: left; } .va-sjt-rate-label { margin: 0 0 8px; font-size: 0.9rem; } .va-sjt-rate-scale { display: flex; gap: 6px; } .va-sjt-rate-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d8d5ea; background: var( --va-surface ); font-family: inherit; font-weight: 600; cursor: pointer; } .va-sjt-rate-btn-selected { border-color: var( --va-accent ); background: var( --va-accent ); color: #fff; } /* ---- AQ: result headline ------------------------------------------------ */ /* Hierarchy is deliberate: band (hero) first, then a small-scale stat row (ring + confidence icon) underneath -- never a paragraph of explanation sitting permanently in the flow. */ .va-aq-band-row { display: flex; align-items: center; justify-content: center; gap: 8px; } .va-aq-headline-band { font-size: 2rem; font-weight: 800; color: var( --va-accent-dark ); line-height: 1.15; } /* -- band info: what "Strong" (or any other band word) actually means -- */ .va-aq-band-info-trigger { position: relative; display: flex; align-items: center; } .va-aq-band-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: none; background: #f0eefb; color: var( --va-accent-dark ); cursor: pointer; transition: transform 0.15s ease; } .va-aq-band-info-icon:hover, .va-aq-band-info-icon:focus-visible { transform: scale( 1.08 ); } /* Opens down-right (icon sits at the LEFT of its row, unlike the confidence icon which sits at the right of its own row -- see that tooltip's own comment for why "down" specifically). */ .va-aq-band-info-tooltip { position: absolute; top: calc( 100% + 10px ); left: 0; width: 220px; background: #1c1a2e; color: #fff; font-size: 0.78rem; line-height: 1.5; text-align: left; padding: 10px 12px; border-radius: 10px; box-shadow: 0 8px 24px rgba( 28, 26, 46, 0.25 ); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY( -4px ); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 5; } .va-aq-band-info-tooltip::after { content: ''; position: absolute; bottom: 100%; left: 10px; border: 6px solid transparent; border-bottom-color: #1c1a2e; } .va-aq-band-info-trigger:hover .va-aq-band-info-tooltip, .va-aq-band-info-tooltip.is-visible { opacity: 1; visibility: visible; transform: translateY( 0 ); pointer-events: auto; } .va-aq-headline-stats { display: flex; align-items: flex-start; justify-content: center; gap: 22px; margin-top: 12px; } .va-aq-stat-block { display: flex; flex-direction: column; align-items: center; gap: 4px; } .va-aq-stat-caption { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var( --va-muted ); } /* -- percentile ring: small-scale by design, not a full-width bar -- */ /* CSS Grid stacking (both children on the same 1/1 cell), not absolute positioning -- an inline-level