) Navbar and the page's

are siblings inside , and nothing makes the document fill the viewport. On a short page — e.g. class-registration when Stripe is not configured and the form is replaced by a one-line notice — the footer stopped ~370px down a ~790px viewport and left blank white below. Scoping the flex container to `body:has(main.page-fill)` means only pages that opt in are affected, and because BODY is the flex container the navbar's height is subtracted automatically — no calc() against a hardcoded nav height that would drift per breakpoint. =========================== */ body:has(main.page-fill) { display: flex; flex-direction: column; min-height: 100svh; } body:has(main.page-fill) main.page-fill { display: flex; flex: 1 0 auto; flex-direction: column; } /* The section that absorbs the slack; the footer after it keeps its own size. Centring matters as much as stretching: pinning the footer down without it left the short "payment not configured" notice clinging to the top with a tall void underneath. Centred, the leftover space sits above and below the message and reads as deliberate whitespace. `flex: 1 0 auto` (grow, never shrink) means the section can't end up smaller than its content, so when the real Stripe form renders and overflows, the centring is a no-op and nothing is clipped. */ body:has(main.page-fill) main.page-fill > .page-fill-grow { display: flex; flex: 1 0 auto; flex-direction: column; justify-content: center; } /* =========================== TESTIMONIAL QUOTE SCROLLBAR The quote's scroll indicator is drawn by ScrollableQuote in TestimonialSlider.tsx as a real element, because the NATIVE bar cannot be made persistent: iOS Safari and Chrome's device emulation both use overlay scrollbars that only appear mid-gesture and ignore ::-webkit-scrollbar sizing. Hide the native bar at every width so the custom one is the single indicator and mobile, tablet and desktop all look the same. =========================== */ .testimonial-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .testimonial-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; } /* =========================== NAV DROPDOWN EASING Used by the Programs / Workshops dropdown in Navbar.tsx. Defined here rather than as `ease-[cubic-bezier(...)]` because Tailwind was not emitting a rule for that arbitrary value — the class landed in the HTML with no CSS behind it, so the panel fell back to the browser default ease and looked abrupt. This curve decelerates hard at the end, which is what makes the open read as "settling" rather than just sliding. =========================== */ .nav-ease { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } /* =========================== MOBILE NAV SUBMENU ACCORDION Used by the Programs / Workshops submenus in the mobile menu. `grid-template-rows: 0fr -> 1fr` animates to the list's ACTUAL height. The previous approach transitioned max-height between 0 and 24rem, but the list is only ~230px: opening therefore reached full height in ~60% of the duration and then sat still, while closing spent its first ~40% collapsing empty space before anything appeared to move. That dead time is what made it feel jerky. It also clipped the list outright once a franchisee had enough programs to exceed 384px. Written as a plain class rather than `grid-rows-[0fr]` because Tailwind was not emitting a rule for that arbitrary value — the class reached the HTML with no CSS behind it, so nothing animated at all. =========================== */ .nav-accordion { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms cubic-bezier(0.16, 1, 0.3, 1); } .nav-accordion.is-open { grid-template-rows: 1fr; opacity: 1; } /* The 0fr row only collapses if the child hides its own overflow. */ .nav-accordion > * { overflow: hidden; } /* =========================== DESKTOP NAV DROPDOWN (Programs / Workshops card) Written as plain CSS because Tailwind in this project does not emit its arbitrary utilities — duration-[300ms], scale-[0.97], ease-[cubic-bezier(..)] and transition-[a,b,c] all reached the markup with no rule behind them, so transition-duration resolved to 0s and the card snapped open and shut. Only the stock steps (duration-150/200/300) exist. `visibility` is transitioned on purpose: per spec it holds the element visible for the whole fade-out and only then hides it, which also keeps the links out of the tab order while the card is closed. Open is slower than close (300ms vs 150ms) — a menu that lingers on the way out feels unresponsive. =========================== */ .nav-dropdown { transform-origin: top; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97); pointer-events: none; will-change: opacity, transform; transition: opacity 150ms cubic-bezier(0.16, 1, 0.3, 1), transform 150ms cubic-bezier(0.16, 1, 0.3, 1), visibility 150ms; } .nav-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; transition-duration: 300ms; } /* Each entry fades up behind the panel; the per-item delay is set inline. */ .nav-dropdown-item { opacity: 0; transform: translateY(-4px); transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .nav-dropdown.is-open .nav-dropdown-item { opacity: 1; transform: translateY(0); } /* =========================== CLASS REGISTRATION - POLICY ROW ALIGNMENT The "I agree with the Privacy Policy and Terms of Use" row normally sits left-aligned so its checkbox shares a left edge with "Save my card details" in StripePaymentFields. When payer_id is "2" the whole coupon + payment block is hidden, so there is no second checkbox to line up with and the row was left stranded against the edge below a centred button. Centring it from md up makes it read as part of the button group. Mobile keeps the left edge: the label wraps to two lines there and centring would leave it ragged. Written as a plain class rather than `md:justify-center` because Tailwind in this project has repeatedly failed to emit utilities that are not already used elsewhere, leaving the class in the markup with no rule behind it. =========================== */ @media (min-width: 768px) { .policy-row-centered { justify-content: center; } } /* =========================== PAYMENT METHOD RADIOS The radios had no accent-color, so they rendered in the browser/OS default (green on the reporter's machine) instead of the brand blue. accent-color restyles the native control without replacing it, so keyboard focus, :checked semantics and screen-reader behaviour are all preserved. Scoped to .payment-box, which already wraps every payment radio. =========================== */ .payment-box input[type="radio"] { accent-color: #0097DC; } /* ========================================= PROGRAM FOOTER SLIDER ========================================= */ button:focus-visible, a:focus-visible{ outline:none !important; } @keyframes programSliderFade { from { opacity: 0;} to {opacity: 1;} } @keyframes programSliderImageZoom { from {opacity: 0.7;transform: scale(0.9);} to {opacity: 1;transform: scale(1);} } /* Main slide fade */ .program-slider-animation { animation: programSliderFade 0.9s ease-in-out; } /* Main robot/image zoom */ .program-slider-animation .program-main-image { animation: programSliderImageZoom 0.7s cubic-bezier(0.22, 1, 0.36, 1); } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .program-slider-animation, .program-slider-animation .program-main-image { animation: none; } }