/* * Big Tee's Golf — Ball Selector styles. * * Scoped under `.btg-ball-selector-form` (form) and `.btg-bs-results` / * `.btg-advisory` (post-submit) so the tool can drop onto any page without * clobbering theme rules. Matches the palette + spacing conventions * established by `inc/ball-ratings.css` and `inc/tools/swing-speed-calc.css` * (BTG blue #004986, focus amber #ffb100, neutral #d9dde2 borders on a * #f7f9fc card background). No third-party fonts — every rule inherits the * Astra parent's typography. * * Mobile-first: the default rules target a 320-720px viewport. The single * `@media (min-width: 720px)` block widens the card, inlines the Q1 speed * tabs, and puts the step Next / Back buttons on one row. Every interactive * control keeps a ≥44px tap target and a ≥16px font-size on inputs so iOS * Safari does not zoom the viewport on focus. * * Progressive enhancement (NFR-4): the `.btg-bs-fallback-note` is visible * by default and hidden by `html.js .btg-bs-fallback-note`, which * `ball-selector.js` sets before any DOM work. Elements the JS toggles use * the native `hidden` attribute — the browser's default `[hidden]` rule * handles show/hide, no extra selector required. * * Task 4.7. Satisfies NFR-3 (dependency-free — no @import, no third-party * fonts, no external assets) and NFR-5 (accessibility baseline: visible * focus rings, adequate tap targets, high-contrast error copy, readable * font sizes). * * @see .kiro/specs/ball-selector-tool-v1/requirements.md NFR-3, NFR-5 * @see .kiro/specs/ball-selector-tool-v1/design.md § "Quiz form" */ /* ---------- Form container ---------- */ .btg-ball-selector-form { max-width: 720px; margin: 1.5em auto; padding: 1em; font-family: inherit; color: #222; box-sizing: border-box; } .btg-ball-selector-form *, .btg-ball-selector-form *::before, .btg-ball-selector-form *::after { box-sizing: border-box; } /* Fallback note — visible by default (no-JS path). Hidden the moment * ball-selector.js adds `js` to , so JS users never see it. */ .btg-ball-selector-form .btg-bs-fallback-note { margin: 0 0 1em; padding: 0.5em 0.75em; background: #eef4fb; border-left: 3px solid #004986; color: #333; font-size: 0.9em; line-height: 1.4; border-radius: 3px; } html.js .btg-bs-fallback-note { display: none; } /* ---------- Fieldsets (core Q1-Q5 and refinement Q6-Q10) ---------- */ .btg-ball-selector-form fieldset.btg-bs-step, .btg-ball-selector-form fieldset.btg-bs-refine-step { margin: 0 0 1em; padding: 1em 1.1em 1.15em; border: 1px solid #d9dde2; border-radius: 8px; background: #f7f9fc; min-width: 0; /* Chrome/Safari fieldset flex-child fix */ } .btg-ball-selector-form fieldset.btg-bs-refine-step { background: #fff; border-color: #e5e9ed; } .btg-ball-selector-form legend { padding: 0 0.3em; font-weight: 700; font-size: 1.02em; color: #004986; line-height: 1.3; } /* Labels default to block so radio + text stack cleanly and the whole row * is a tap target. Inputs sit inline with a leading gap. */ .btg-ball-selector-form fieldset label { display: block; margin: 0.35em 0; padding: 0.55em 0.5em; min-height: 44px; /* iOS Safari tap-target floor */ line-height: 1.4; cursor: pointer; border-radius: 4px; color: #222; font-size: 1em; } .btg-ball-selector-form fieldset label:hover { background: rgba(0, 73, 134, 0.05); } .btg-ball-selector-form fieldset input[type="radio"] { /* Slightly larger than browser default so the target is easy to hit * on mobile; align vertically with the label copy. */ width: 1.05em; height: 1.05em; margin-right: 0.4em; vertical-align: middle; accent-color: #004986; } /* Free-text and number inputs on Q1 / Q6. font-size ≥ 16px prevents iOS * Safari from zooming when the input takes focus. */ .btg-ball-selector-form fieldset input[type="number"], .btg-ball-selector-form fieldset input[type="text"], .btg-ball-selector-form fieldset select { display: block; width: 100%; max-width: 320px; margin-top: 0.35em; padding: 0.6em 0.7em; min-height: 44px; font-size: 16px; font-family: inherit; color: #222; background: #fff; border: 1px solid #b8bfc7; border-radius: 4px; line-height: 1.3; } .btg-ball-selector-form fieldset input[type="number"]:focus, .btg-ball-selector-form fieldset input[type="text"]:focus, .btg-ball-selector-form fieldset select:focus, .btg-ball-selector-form fieldset input[type="radio"]:focus-visible { outline: 2px solid #ffb100; outline-offset: 2px; border-color: #004986; } /* ---------- Q1 speed-input tabs + panels ---------- */ .btg-ball-selector-form .btg-bs-speed-tabs { display: flex; flex-direction: column; gap: 0.25em; margin-bottom: 0.75em; padding: 0.5em 0.6em; background: #fff; border: 1px solid #e5e9ed; border-radius: 6px; } .btg-ball-selector-form .btg-bs-speed-tabs label { margin: 0; padding: 0.5em 0.4em; min-height: 44px; font-weight: 500; } .btg-ball-selector-form .btg-bs-speed-direct, .btg-ball-selector-form .btg-bs-speed-range { margin-top: 0.5em; } .btg-ball-selector-form .btg-bs-speed-direct label, .btg-ball-selector-form .btg-bs-speed-range label { display: block; padding: 0; margin: 0; min-height: 0; font-weight: 600; cursor: default; } .btg-ball-selector-form .btg-bs-speed-direct label:hover, .btg-ball-selector-form .btg-bs-speed-range label:hover { background: transparent; } /* ---------- Progress + step-nav (injected by JS) ---------- */ .btg-ball-selector-form.js-enhanced .btg-bs-progress { margin: 0 0 0.75em; padding: 0.35em 0.6em; background: #eef4fb; border-radius: 4px; color: #004986; font-size: 0.9em; font-weight: 600; letter-spacing: 0.02em; } .btg-ball-selector-form .btg-bs-step-nav { display: flex; flex-direction: column; gap: 0.5em; margin-top: 1em; } .btg-ball-selector-form .btg-bs-review-nav { margin: 1em 0; } .btg-ball-selector-form .btg-bs-next, .btg-ball-selector-form .btg-bs-back, .btg-ball-selector-form .btg-bs-submit { display: inline-block; width: 100%; padding: 0.75em 1.4em; min-height: 44px; font-size: 1.02em; font-weight: 600; font-family: inherit; line-height: 1.2; text-align: center; border: 1px solid transparent; border-radius: 4px; cursor: pointer; -webkit-appearance: none; appearance: none; } .btg-ball-selector-form .btg-bs-next, .btg-ball-selector-form .btg-bs-submit { background: #004986; color: #fff; } .btg-ball-selector-form .btg-bs-next:hover, .btg-ball-selector-form .btg-bs-submit:hover { background: #00365f; } .btg-ball-selector-form .btg-bs-back { background: #fff; color: #004986; border-color: #b8bfc7; } .btg-ball-selector-form .btg-bs-back:hover { background: #eef4fb; border-color: #004986; } .btg-ball-selector-form .btg-bs-next:focus-visible, .btg-ball-selector-form .btg-bs-back:focus-visible, .btg-ball-selector-form .btg-bs-submit:focus-visible { outline: 2px solid #ffb100; outline-offset: 2px; } .btg-ball-selector-form .btg-bs-submit-wrap { margin: 1.25em 0 0.25em; } /* ---------- Refinements
---------- * * As of the 2026-09-05 UX refinement the refinements block lives on * the results page (inside .btg-bs-refine-wrap), not the quiz form. * The selectors below use the standalone `.btg-bs-refine` class so * they apply wherever the disclosure lands — future-proof if the * block ever gets reused elsewhere. The .btg-bs-refine-wrap section * gives the details room to breathe between the tier cards above * and the methodology link below. */ .btg-bs-refine-wrap { max-width: 720px; margin: 1.5em auto 0.5em; padding: 0 1em; box-sizing: border-box; } details.btg-bs-refine { margin: 0 0 0.5em; padding: 0; border: 1px solid #d9dde2; border-radius: 8px; background: #fff; } details.btg-bs-refine > summary { padding: 0.85em 1em; min-height: 44px; cursor: pointer; font-weight: 600; color: #004986; border-radius: 8px; list-style: revert; /* keep the native disclosure triangle */ } details.btg-bs-refine > summary:hover { background: #eef4fb; } details.btg-bs-refine > summary:focus-visible { outline: 2px solid #ffb100; outline-offset: 2px; } details.btg-bs-refine[open] > summary { border-bottom: 1px solid #e5e9ed; border-radius: 8px 8px 0 0; background: #f7f9fc; } details.btg-bs-refine[open] { padding: 0 1em 1em; } details.btg-bs-refine fieldset.btg-bs-refine-step { margin-top: 1em; } /* Refinements form variant. Sits inside the
so it doesn't * need the top margin the main quiz form uses. */ .btg-ball-selector-form--refine { max-width: none; margin: 0; padding: 0.75em 0 0.25em; } /* ---------- Errors ---------- */ .btg-bs-error { margin: 0 0 1em; padding: 0.75em 1em; background: #fde8e8; border: 1px solid #f5b5b5; border-radius: 6px; color: #911; font-size: 0.95em; line-height: 1.4; } .btg-bs-error p { margin: 0; } .btg-ball-selector-form .btg-bs-step-error { margin: 0.75em 0 0; padding: 0.5em 0.7em; background: #fde8e8; border-left: 3px solid #c33; color: #911; font-size: 0.92em; line-height: 1.4; border-radius: 3px; } /* ---------- Results container + no-match + placeholder dump ---------- */ .btg-bs-results { max-width: 720px; margin: 1.5em auto; padding: 0.5em 1em; font-family: inherit; color: #222; box-sizing: border-box; } .btg-bs-results .btg-bs-summary { margin: 0 0 1em; } .btg-bs-results .btg-bs-summary h2 { margin: 0 0 0.35em; padding: 0; color: #004986; font-size: 1.35em; font-weight: 700; line-height: 1.25; border: none; } .btg-bs-results .btg-bs-echo-answers { margin: 0; color: #333; font-size: 0.98em; line-height: 1.5; } /* Task 5.4 — relaxed fallback (info, above tier blocks) */ .btg-bs-results .btg-bs-relaxed-banner { margin: 1em 0; padding: 0.75em 1em; background: #fff8e1; border: 1px solid #f0d68a; border-left: 4px solid #d9a441; border-radius: 6px; color: #6a4e00; font-size: 0.95em; line-height: 1.5; } .btg-bs-results .btg-bs-relaxed-banner p { margin: 0; } /* Task 5.4 — hard no-match (alert, replaces tier blocks) */ .btg-bs-results .btg-bs-no-match { margin: 1em 0; padding: 0.9em 1em; background: #fdecea; border: 1px solid #f2b3ac; border-left: 4px solid #c0392b; border-radius: 6px; color: #7a1e14; font-size: 0.98em; line-height: 1.5; } .btg-bs-results .btg-bs-no-match p { margin: 0; } .btg-bs-results--placeholder pre, .btg-bs-results .btg-bs-placeholder-dump { margin: 1em 0; padding: 0.85em 1em; background: #f7f9fc; border: 1px solid #d9dde2; border-radius: 6px; font-family: Consolas, Menlo, Monaco, monospace; font-size: 0.88em; line-height: 1.5; color: #333; overflow-x: auto; white-space: pre; } /* ---------- Results tiers + ball cards (Task 5.3) ---------- */ .btg-bs-results .btg-bs-tier { margin: 1.25em 0 0.5em; } .btg-bs-results .btg-bs-tier h3 { margin: 0 0 0.6em; padding: 0; color: #004986; font-size: 1.2em; font-weight: 700; line-height: 1.3; border: none; } .btg-bs-ball-card { margin: 0 0 1em; padding: 1em 1.1em 1.15em; background: #f7f9fc; border: 1px solid #d9dde2; border-radius: 8px; color: #222; } .btg-bs-ball-card h4 { margin: 0.35em 0 0.35em; padding: 0; font-size: 1.1em; font-weight: 700; line-height: 1.25; color: #222; } /* Card header wraps the h4 + the match confidence badge together * so the badge sits inline with the heading. Mobile-first: stacks * naturally; the desktop breakpoint below flexes them onto one row. */ .btg-bs-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.6em; margin: 0 0 0.25em; } .btg-bs-card-header h4 { margin: 0; flex: 1 1 auto; } /* Match confidence badge — a compact BTG-blue pill immediately * beside (or below) the heading. Small, non-shouty; the point is * to add a data anchor for "how well does this ball fit me", not * to compete with the ball name for attention. */ .btg-bs-match-score { display: inline-block; flex: 0 0 auto; padding: 0.15em 0.55em; background: #004986; color: #fff; font-size: 0.85em; font-weight: 600; line-height: 1.3; border-radius: 12px; white-space: nowrap; letter-spacing: 0.01em; } /* Speed-window fit line — muted supporting copy that sits between * the rationale bullets and the CTA. Slightly smaller than the * rationale so it reads as commentary, not another claim. */ .btg-bs-speed-fit { margin: 0 0 0.75em; color: #555; font-size: 0.92em; font-style: italic; line-height: 1.45; } .btg-bs-ball-img { display: block; width: 100%; max-width: 140px; height: auto; margin: 0 auto 0.5em; background: #fff; border: 1px solid #e5e9ed; border-radius: 4px; padding: 0.25em; } .btg-bs-price { margin: 0 0 0.55em; color: #004986; font-size: 0.98em; font-weight: 600; line-height: 1.3; } .btg-bs-rationale { margin: 0 0 0.85em; padding: 0; list-style: none; } .btg-bs-rationale li { position: relative; margin: 0 0 0.35em; padding: 0 0 0 1.35em; font-size: 0.95em; line-height: 1.45; color: #333; } .btg-bs-rationale li::before { content: "\2713"; /* ✓ */ position: absolute; top: 0; left: 0; color: #004986; font-weight: 700; line-height: 1.45; } .btg-bs-cta { display: flex; flex-direction: column; gap: 0.6em; margin: 0.5em 0 0; align-items: stretch; } .btg-bs-cta a { display: inline-block; color: #004986; text-decoration: underline; font-weight: 600; font-size: 0.98em; line-height: 1.3; padding: 0.5em 0; min-height: 40px; } .btg-bs-cta a:hover { color: #00365f; } .btg-bs-cta a:focus-visible { outline: 2px solid #ffb100; outline-offset: 2px; } .btg-bs-cta .btg-bs-buy { padding: 0.6em 1em; background: #fff; color: #004986; border: 1px solid #004986; border-radius: 4px; text-align: center; text-decoration: none; min-height: 44px; } .btg-bs-cta .btg-bs-buy:hover { background: #eef4fb; border-color: #00365f; color: #00365f; } .btg-bs-results .btg-bs-methodology-link, .btg-bs-results .btg-bs-restart { margin: 1em 0 0.25em; padding: 0; font-size: 0.95em; } .btg-bs-results .btg-bs-methodology-link p, .btg-bs-results .btg-bs-restart p { margin: 0; } .btg-bs-results .btg-bs-methodology-link a, .btg-bs-results .btg-bs-restart a { color: #004986; text-decoration: underline; font-weight: 600; } .btg-bs-results .btg-bs-methodology-link a:focus-visible, .btg-bs-results .btg-bs-restart a:focus-visible { outline: 2px solid #ffb100; outline-offset: 2px; } /* ---------- Advisory callout ---------- */ .btg-advisory { margin: 1.25em 0; padding: 1em 1.1em 1.15em; background: #fff8e1; border: 1px solid #f0d68a; border-left: 4px solid #d4a017; border-radius: 6px; color: #3a2c00; line-height: 1.5; } .btg-advisory h3 { margin: 0 0 0.6em; padding: 0; font-size: 1.15em; font-weight: 700; color: #6a4e00; line-height: 1.3; border: none; } .btg-advisory .btg-advisory-signal { margin: 0.6em 0 0; padding: 0.5em 0 0 1em; border-left: 2px solid rgba(212, 160, 23, 0.5); color: #3a2c00; } .btg-advisory .btg-advisory-signal p { margin: 0; font-size: 0.95em; } .btg-advisory .btg-advisory-signal + .btg-advisory-signal { margin-top: 0.75em; } /* ---------- Tablet / desktop enhancements ---------- */ @media (min-width: 720px) { .btg-ball-selector-form { padding: 1.5em; } .btg-ball-selector-form fieldset.btg-bs-step, .btg-ball-selector-form fieldset.btg-bs-refine-step { padding: 1.25em 1.5em 1.4em; } .btg-ball-selector-form legend { font-size: 1.1em; } /* Q1 tabs go side-by-side once there's room. */ .btg-ball-selector-form .btg-bs-speed-tabs { flex-direction: row; gap: 0.5em; align-items: stretch; } .btg-ball-selector-form .btg-bs-speed-tabs label { flex: 1 1 0; } /* Back / Next line up horizontally with the Next on the right. */ .btg-ball-selector-form .btg-bs-step-nav { flex-direction: row; justify-content: flex-end; gap: 0.75em; } .btg-ball-selector-form .btg-bs-next, .btg-ball-selector-form .btg-bs-back { width: auto; min-width: 8em; } .btg-ball-selector-form .btg-bs-review-nav { justify-content: flex-start; } .btg-ball-selector-form .btg-bs-submit { width: auto; min-width: 14em; } .btg-bs-results, .btg-advisory { padding-left: 1.5em; padding-right: 1.5em; } /* Ball cards: image floats left, content column right. */ .btg-bs-ball-card { display: grid; grid-template-columns: 160px 1fr; grid-column-gap: 1.25em; align-items: start; } .btg-bs-ball-img { grid-column: 1; grid-row: 1 / span 4; max-width: 160px; margin: 0; } .btg-bs-ball-card .btg-bs-card-header, .btg-bs-ball-card h4, .btg-bs-ball-card .btg-bs-price, .btg-bs-ball-card .btg-bs-rationale, .btg-bs-ball-card .btg-bs-speed-fit, .btg-bs-ball-card .btg-bs-cta { grid-column: 2; } /* When there's no image, the content column takes the full row. */ .btg-bs-ball-card:not(:has(.btg-bs-ball-img)) { display: block; } /* CTA row: review link + Amazon button side by side. */ .btg-bs-cta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1em; } .btg-bs-cta .btg-bs-buy { min-width: 10em; } }