/** * RYB Connect — funnel refinements (steps 1 & 2) * --------------------------------------------------------------------------- * Visual polish, mobile fixes and motion for the class-finder funnel. * * DELIBERATELY A SEPARATE FILE from ryb-connect-a11y.css: that layer carries * accessibility and layout *corrections* that should always ship. This layer is * cosmetic refinement, so it can be dequeued as a unit — * * wp_dequeue_style('ryb-connect-refinements'); * * — which is what makes an A/B test of these changes possible without touching * the correctness fixes underneath. * * Loads after ryb-connect-a11y.css. Everything here is transform/opacity only, * uses a named easing, and collapses under prefers-reduced-motion. * * Sections * 1. Motion tokens * 2. Step-0 option cards — reclaim dead space, real feedback * 3. Step transitions * 4. Inputs, selects and buttons * 5. Mobile refinements * 6. Layout — one content column, one height authority * 7. Controls — one radius, one field type * 8. Reduced motion */ :root { /* One easing, one pair of durations. The legacy sheets use `all .3s ease` in ~20 places; `ease` is the browser default and `all` animates layout properties by accident. Nothing here uses either. */ --ryb-ease: cubic-bezier(0.16, 1, 0.3, 1); --ryb-dur-fast: 140ms; --ryb-dur: 260ms; /* ---- Spacing scale (4px base) ------------------------------------------ Audit of the live funnel found 13 distinct spacing values in use — 4, 8, 10, 14, 16, 18, 20, 24, 28, 32, 40, 44, 48 — with 10, 14 and 18 off the 4px grid entirely. Those three are the ad-hoc ones; everything else already lands on the grid. This is the scale to migrate toward. Tokens are defined AND consumed inside this file only, so dequeuing `ryb-connect-refinements` removes definitions and usages together and the funnel falls back to its legacy values intact. */ --ryb-space-2xs: 4px; --ryb-space-xs: 8px; --ryb-space-sm: 12px; --ryb-space-md: 16px; --ryb-space-lg: 24px; --ryb-space-xl: 32px; --ryb-space-2xl: 48px; /* ---- Radii -------------------------------------------------------------- Five radii were in use: 2, 6, 8, 9, 10. The button was 9px and the input 10px — imperceptibly different, two tokens doing one job. Two are enough. */ --ryb-radius-control: 10px; --ryb-radius-card: 16px; /* ---- Type scale --------------------------------------------------------- Measured scale was 46 / 18 / 15 / 14 / 13: one 2.56x jump, then three steps within 2px of each other (ratios 1.07 and 1.08) that read as a single level. This adds the missing mid step and establishes a real body size; 13px is retained for captions/metadata only. NOTE: font WEIGHTS are not set here. Seven weights (200-900) are loaded via the theme's Google Fonts URL, which is a per-site admin setting, not code — see the refinement plan doc. */ --ryb-text-display: 46px; --ryb-text-lg: 24px; --ryb-text-md: 18px; --ryb-text-body: 16px; --ryb-text-sm: 14px; --ryb-text-xs: 13px; } /* ========================================================================== 1b. Normalise the off-grid values -------------------------------------------------------------------------- Only the three strays (10 / 14 / 18) are corrected — the rest of the funnel already sits on the 4px grid, and rewriting compliant values would be churn for its own sake. ========================================================================== */ /* NOTE on specificity: design.css ships `#ryb-connect.custom-funnel ...` duplicates of many rules (0,1,3,1), which outrank the plain `#ryb-connect .wizard-stage ...` form (0,1,2,1) no matter the source order. Every override below therefore mirrors both selectors. Measured carriers of the off-grid values were: .go-back-link (padding 18), .user-type li (gap 18), .form-info (gap 14), .checkbox-wrapper--consent (margin 14, gap 10) and .button-wrapper (margin 10). */ /* Option-card internals: 18 -> 12 */ #ryb-connect .wizard-stage .user-type li, #ryb-connect.custom-funnel .wizard-stage .user-type li, #ryb-connect .wizard-stage .user-type .existing-member-button, #ryb-connect.custom-funnel .wizard-stage .user-type .existing-member-button { gap: var(--ryb-space-sm) !important; } /* Form field rhythm: 14 -> 12 */ #ryb-connect .box.child .form-info, #ryb-connect.custom-funnel .box.child .form-info { gap: var(--ryb-space-sm) !important; } /* Action bar: consent margin 14 -> 12, its gap 10 -> 8, button margin 10 -> 12 */ #ryb-connect .step-control--submit .checkbox-wrapper--consent, #ryb-connect.custom-funnel .step-control--submit .checkbox-wrapper--consent { margin: 0 0 var(--ryb-space-sm) 0 !important; gap: var(--ryb-space-xs) !important; } #ryb-connect .step-control--submit .button-wrapper, #ryb-connect.custom-funnel .step-control--submit .button-wrapper { margin: 0 0 var(--ryb-space-sm) 0 !important; } /* Header link padding: 18 -> 16 */ #ryb-connect header .go-back-link, #ryb-connect.custom-funnel header .go-back-link { padding: var(--ryb-space-xs) var(--ryb-space-md) !important; } /* Controls share one radius. The submit button is set to 9px by `#ryb-connect .wizard-stage button.form-submit` (0,1,2,1) with !important, so the override has to match that shape, not just `.form-submit`. */ #ryb-connect .input-wrapper input, #ryb-connect .dropdown-wrapper select, #ryb-connect .standard-select, #ryb-connect .wizard-stage button.form-submit, #ryb-connect.custom-funnel .wizard-stage button.form-submit { border-radius: var(--ryb-radius-control) !important; } #ryb-connect .wizard-stage .user-type li, #ryb-connect.custom-funnel .wizard-stage .user-type li, #ryb-connect .wizard-stage .user-type .existing-member-button, #ryb-connect.custom-funnel .wizard-stage .user-type .existing-member-button { border-radius: var(--ryb-radius-card) !important; } /* The section headings sat at 18px against 15px body-ish text — a 1.2 step that reads as "slightly bigger" rather than a level. Give the step title the mid rung so the jump is legible. */ #ryb-connect .step-section-title, #ryb-connect .child-subtitle { font-size: var(--ryb-text-md) !important; line-height: 1.35 !important; } /* ========================================================================== 2. Step-0 option cards -------------------------------------------------------------------------- The cards shipped with `padding: 60px 24px 24px` (56px on mobile): the icon was pinned to the top-left and the label sat at the bottom, leaving a band of empty space between them and giving each card ~140px of height for one line of text. The decorative `.point` circle that sat top-right is now removed from the markup — it mimicked a radio, but these options navigate on click. ========================================================================== */ #ryb-connect .wizard-stage .user-type li, #ryb-connect .wizard-stage .user-type .existing-member-button { padding: 20px !important; gap: 12px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; min-height: 0 !important; cursor: pointer; transition: transform var(--ryb-dur-fast) var(--ryb-ease), border-color var(--ryb-dur-fast) var(--ryb-ease), box-shadow var(--ryb-dur-fast) var(--ryb-ease) !important; } /* The icon no longer floats in its own band. */ #ryb-connect .wizard-stage .user-type .user-type-icon { position: static !important; margin: 0 !important; } #ryb-connect .wizard-stage .user-type .user-type-label { margin: 0 !important; } /* Any stray circle left in cached markup stops taking up space. */ #ryb-connect .wizard-stage .user-type .point { display: none !important; } /* Real feedback: lift on hover, settle on press. */ @media (hover: hover) { #ryb-connect .wizard-stage .user-type li:hover, #ryb-connect .wizard-stage .user-type .existing-member-button:hover { transform: translateY(-2px); border-color: var(--ryb-primary-color, #6026d5) !important; box-shadow: 0 6px 18px rgba(17, 6, 39, .09) !important; } } #ryb-connect .wizard-stage .user-type li:active, #ryb-connect .wizard-stage .user-type .existing-member-button:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(17, 6, 39, .08) !important; } /* ========================================================================== 3. Step transitions -------------------------------------------------------------------------- Steps are toggled by adding `.show`, which snapped the new panel in with no transition. Fade + a short rise reads as movement through a sequence. ========================================================================== */ #ryb-connect .box.child.show, #ryb-connect .box.classes.show, #ryb-connect .box.user.show, #ryb-connect.custom-funnel .box.child.show { animation: ryb-step-in var(--ryb-dur) var(--ryb-ease) both; } @keyframes ryb-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Stagger the two option cards so the choice reads as a pair arriving, not a block appearing. Two children only — no long cascades. */ #ryb-connect .wizard-stage .user-type li:nth-child(1), #ryb-connect .wizard-stage .user-type li:nth-child(2) { animation: ryb-step-in var(--ryb-dur) var(--ryb-ease) both; } #ryb-connect .wizard-stage .user-type li:nth-child(1) { animation-delay: 60ms; } #ryb-connect .wizard-stage .user-type li:nth-child(2) { animation-delay: 120ms; } /* ========================================================================== 4. Inputs, selects and buttons ========================================================================== */ #ryb-connect .input-wrapper input, #ryb-connect .dropdown-wrapper select, #ryb-connect .standard-select { transition: border-color var(--ryb-dur-fast) var(--ryb-ease), box-shadow var(--ryb-dur-fast) var(--ryb-ease) !important; } #ryb-connect .form-submit { transition: transform var(--ryb-dur-fast) var(--ryb-ease), box-shadow var(--ryb-dur-fast) var(--ryb-ease), filter var(--ryb-dur-fast) var(--ryb-ease) !important; } @media (hover: hover) { #ryb-connect .form-submit:hover { transform: translateY(-1px); filter: brightness(1.05); } } #ryb-connect .form-submit:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(96, 38, 213, .4) !important; } /* Disabled / in-flight submit shouldn't still look pressable. */ #ryb-connect .form-submit[disabled], #ryb-connect .form-submit.loading { transform: none !important; filter: saturate(.6) !important; cursor: progress; position: relative; } /* A desaturated button says "disabled". It does not say "working" — and the wait here is a real network round-trip, sometimes two. The ring says which. Absolutely positioned on purpose: it must not be able to change the button's measured size, and it animates transform only. */ #ryb-connect .form-submit.loading::after { content: ""; position: absolute; top: 50%; right: var(--ryb-space-md); width: 16px; height: 16px; margin-top: -8px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: ryb-btn-spin 700ms linear infinite; } @keyframes ryb-btn-spin { to { transform: rotate(1turn); } } /* The three-ring page loader spins its outer ring with `linear` but leaves the two inner rings on the CSS default, which is `ease`. On a rotation that means each ring accelerates and brakes once per turn — the inner rings visibly stutter against the outer one. Rotation should be constant speed. */ #ryb-connect .loader::before, #ryb-connect .loader::after, #class-finder .loader::before, #class-finder .loader::after { animation-timing-function: linear; } /* ========================================================================== 5. Mobile refinements ========================================================================== */ /* The header wrapped onto two lines on narrow phones: the funnel title ("Find a Class") broke mid-phrase while the phone number dropped below it. Keep the title on one line and let the contact block shrink instead. */ @media only screen and (max-width: 460px) { #ryb-connect header .header-funnel-title { white-space: nowrap; font-size: 14px !important; } #ryb-connect header .ryb-connect-default-wrapper { gap: 8px !important; min-width: 0; } #ryb-connect header .top-right-contacts { gap: 8px !important; align-items: center !important; min-width: 0; flex: 0 1 auto !important; } /* The "Need help? Call us" preamble is the first thing to go — the number itself stays tappable. `flex: 0 0 auto; width: auto` is load-bearing, not decoration: with font-size:0 alone the span computed to 83px while the inside it was 92px, so the phone link overflowed its own parent and landed on top of "Back home". Sizing the span to its content puts an 8px gap back. */ #ryb-connect header .top-right-contacts > span { font-size: 0 !important; display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; width: auto !important; min-width: 0; } #ryb-connect header .top-right-contacts > span a { font-size: 13px !important; white-space: nowrap; display: inline-block; } #ryb-connect header .go-back-link { flex: 0 0 auto !important; } } /* NOTE on the error overlay: it is hidden with `opacity: 0`, which does NOT remove it from the accessibility tree — screen readers were announcing "Oops! Something went wrong" on every healthy page load. That is fixed in markup with `aria-hidden="true"` (flipped to "false" by handleUnexpectedError), NOT here: a CSS `visibility` rule could not be made to take effect on this element in testing, and shipping a rule that silently does nothing is worse than not shipping one. */ /* One option per row below 560px — two 140px cards side by side left each one too narrow for its label. */ @media only screen and (max-width: 560px) { #ryb-connect .wizard-stage .user-type { grid-template-columns: 1fr !important; display: grid !important; gap: 10px !important; } #ryb-connect .wizard-stage .user-type li, #ryb-connect .wizard-stage .user-type .existing-member-button { padding: 16px !important; gap: 10px !important; flex-direction: row !important; align-items: center !important; } /* Row layout on mobile: icon beside the label rather than stacked above it. */ #ryb-connect .wizard-stage .user-type .user-type-icon { flex: 0 0 auto !important; } #ryb-connect .wizard-stage .user-type .user-type-label { flex: 1 1 auto !important; min-width: 0; } } /* Long class names and emails shouldn't force a sideways scroll. */ @media only screen and (max-width: 460px) { #ryb-connect .user-type-label, #ryb-connect .child-title, #ryb-connect .step-section-title { overflow-wrap: anywhere; } } /* ========================================================================== 6. Layout — one content column, one height authority -------------------------------------------------------------------------- Measured content-column width across the ladder, before: 1440 -> 576px (column 720, 80%-width rule) 1024 -> 410px (column 512, same 80% rule) 768 -> 560px (max-width 560, centred) 390 -> 351px (90%-width rule) Four widths from three different mechanisms, and non-monotonic: the tablet gets a *wider* measure than the desktop-adjacent 1024 breakpoint. The dip at 1024 is not really a container problem — it is the 50/50 split being held all the way down to 768, which leaves the form 512px to live in while the decorative photo keeps the other half. Fixed here as one system: a single 560px measure with a 24px minimum gutter, plus a 60/40 split below 1200px so the content column stops paying for the photo. Measured after: 560 / 560 / 560 / 342. ========================================================================== */ #ryb-connect .wizard-stage .bg-white .container-wrapper, #ryb-connect.custom-funnel .wizard-stage .bg-white .container-wrapper { box-sizing: border-box !important; width: 100% !important; max-width: 608px !important; /* 560 measure + 2 x 24 gutter */ padding-left: var(--ryb-space-lg) !important; padding-right: var(--ryb-space-lg) !important; margin-left: auto !important; margin-right: auto !important; } /* Tablet: the photo yields. Also lifts the headline out of its dip — h1 measured 46 / 36 / 44 / 30 across the ladder, i.e. smaller on a landscape tablet than on the same tablet in portrait. Raising only this band makes the ladder monotonic (46 / 44 / 44 / 30) without touching the other breakpoints. */ @media only screen and (min-width: 769px) and (max-width: 1199px) { #ryb-connect .wizard-stage, #ryb-connect.custom-funnel .wizard-stage { grid-template-columns: 60% 40% !important; } #ryb-connect .wizard-stage h1 { font-size: clamp(40px, 4.3vw, 46px) !important; } } /* Three things claimed the viewport height and disagreed: #ryb-connect height: 100vh .wizard-stage height: calc(100vh - 130px) <- 130 is a magic number .bg-white / photo sized by content The columns ended up 17px taller than the stage that contains them, and the leftover — 66px on step 0, 33px on the form — was handed to .ryb-connect-content, which has nothing to show until the results load. Let the stage take the leftover instead, and let the results band size to its content until it is actually showing something. Measured: column overflow 17px -> 0, reserved empty band 33px -> 0, at 1440, 1024 and 390. :has() is already a load-bearing dependency of this funnel (design.css uses it to decide whether step 0 centres), so this adds no new browser requirement. */ #ryb-connect .wizard-stage, #ryb-connect.custom-funnel .wizard-stage { height: auto !important; flex: 1 1 auto !important; min-height: 0 !important; } #ryb-connect .ryb-connect-content:not(:has(#ryb-openings-result.show)) { flex: 0 0 auto !important; } /* ========================================================================== 7. Controls — one radius, one field type -------------------------------------------------------------------------- The funnel ships four buttons that share no property at all: .go-back-link 39px tall radius 8px 13px text 1.5px border .form-submit 48px tall radius 9px 15px text no border .error-button 52px tall radius 25px 15px text pill .class-start 35px tall radius 10px 14px text chip Section 1b already pulled .form-submit onto --ryb-radius-control. This brings the back link with it. The error pill and the schedule chip are left alone: both read as deliberately different shapes rather than as drift. NOTE on specificity: the 8px comes from `#ryb-connect .top-right-contacts .go-back-link` (0,1,2,0) with !important. `#ryb-connect header .go-back-link` is (0,1,1,1) and loses — a class outranks a type selector regardless of source order. Matching the class count is the whole fix; this was measured failing before it was measured working. ========================================================================== */ #ryb-connect header .top-right-contacts a.go-back-link { border-radius: var(--ryb-radius-control) !important; } /* Selects render their value at 16px/400, text inputs at 14px/500 — same box, same border, same radius, different type. The size half of that mismatch is fixed in ryb-connect-a11y.css (14px inputs make iOS Safari zoom the page on focus, which is a defect, not a preference). This is the weight half. */ #ryb-connect .box.child input[type="text"], #ryb-connect .box.child input[type="email"], #ryb-connect .box.child input[type="tel"] { font-weight: 400 !important; } /* ========================================================================== 8. Reduced motion -------------------------------------------------------------------------- ryb-connect-a11y.css already collapses durations globally; this also drops the entrance transforms so nothing shifts position for users who asked for less movement. ========================================================================== */ @media (prefers-reduced-motion: reduce) { #ryb-connect .box.child.show, #ryb-connect .box.classes.show, #ryb-connect .box.user.show, #ryb-connect.custom-funnel .box.child.show, #ryb-connect .wizard-stage .user-type li { animation: none !important; } #ryb-connect .wizard-stage .user-type li:hover, #ryb-connect .wizard-stage .user-type .existing-member-button:hover, #ryb-connect .form-submit:hover, #ryb-connect .form-submit:active { transform: none !important; } } /* ========================================================================== 9. Schedule grid: class names that wrap for the sake of five pixels -------------------------------------------------------------------------- The schedule shows seven day columns side by side. On a 1440px screen each column is about 171px, and a card title shares its row with the info icon, which leaves 89px for the name. Measured against the live Sandhills feed at the current 18px: six of the twelve class names on screen wrapped onto two lines, and four of those missed a single line by 5-7px — "Kinder Gym" needs 94px, "Parent & Me" 95px, "Ninja Level 1" 96px. Names breaking mid-phrase make the grid look ragged and push every card taller than it needs to be. At 16px only three still wrap, and those three are genuinely long ("Girls Accelerate", "Tumbling Basic"), where a second line is the right answer. 16px semibold still reads clearly as the card title against the 12-14px metadata below it. Scoped to the day grid: the same class name at full width elsewhere (the details dialog, the wizard cards) keeps its larger size. ========================================================================== */ /* The rule that actually owns this size is `#class-finder .result-grid-cell.enhanced-card h3 .class-name` in ryb-connect-filter.css (18px). Matching its shape is what it takes to beat it — a shorter selector loses on specificity no matter how late it loads. Phones already drop this to 15px under a max-width: 767px rule, so 16px on desktop sits inside the range the design intended. */ @media only screen and (min-width: 1200px) { #class-finder .result-grid-cell.enhanced-card h3 .class-name, #ryb-connect .result-grid-cell.enhanced-card h3 .class-name, #class-finder .grid-results h3 .class-name, #ryb-connect .grid-results h3 .class-name { font-size: 16px !important; line-height: 1.3 !important; } }