/* Moka Rangers - registration widget. * * EVERY selector is prefixed with `.mrsc-widget` so this CSS file can be * concatenated into a WordPress theme without overriding the host site, * and so the host site's `.entry-content button {...}` style rules cannot * beat ours (we have higher specificity). * * The widget itself is full-bleed by default - no max-width, no outer * margin, no border. It fills whatever container it's dropped into. * * Fonts: CentralSans is the brand font and is loaded by the host * WordPress page (the brand Elementor kit declares the @font-face at * mokarangers.mu's ); the widget inherits via cascade. */ /* WP-embedded build: mirror the Elementor kit's site-wide container settings * (max-width 1366px, horizontal padding 3.5rem desktop / 2.5rem tablet / * 1.5rem mobile) so the widget visually aligns with every other section * on mokarangers.mu. Standalone build stays full-bleed. */ .mrsc-widget.mrsc-embedded { max-width: 1366px; margin-inline: auto; padding-inline: 3.5rem; background: transparent; min-height: 0; } .mrsc-widget.mrsc-embedded .mrsc-stepper, .mrsc-widget.mrsc-embedded .mrsc-main { padding-inline: 0; } @media (max-width: 1024px) { .mrsc-widget.mrsc-embedded { padding-inline: 2.5rem; } } @media (max-width: 767px) { .mrsc-widget.mrsc-embedded { padding-inline: 1.5rem; } } /* ---------- Root / design tokens / inheritance reset ---------- * Visual system aligned to mokarangers.mu brand kit. * * TYPE - 6 sizes only: 12 / 14 / 16 / 20 / 40 / 72 * SPACE - 4 / 8 / 16 / 24 / 32 / 48 * RADII - 12.5px on fields/buttons/chips, 16px on cards/callouts */ .mrsc-widget { /* Brand colours (from site CSS, post-7.css) */ --mrsc-primary: #E81F76; --mrsc-primary-dark: #C81862; --mrsc-ink: #1D252C; /* body copy, matches site --e-global-color-text */ --mrsc-ink-strong: #101820; /* headings + strong */ --mrsc-ink-soft: #5C6470; --mrsc-muted: #767676; /* was #9A9A9A - bumped for WCAG 4.5:1 contrast on white when used as placeholder text (4.54:1 vs 2.85:1) */ --mrsc-accent: #96DAEA; /* light cyan, reserved for info accents */ --mrsc-line: #E0DED7; --mrsc-bg: #FAFAF7; --mrsc-error: #B3261E; /* Type scale */ --mrsc-fs-eyebrow: 12px; --mrsc-fs-meta: 14px; --mrsc-fs-body: 16px; --mrsc-fs-lead: 20px; --mrsc-fs-h2: 40px; --mrsc-fs-hero: 72px; /* Spacing scale */ --mrsc-sp-1: 4px; --mrsc-sp-2: 8px; --mrsc-sp-3: 16px; --mrsc-sp-4: 24px; --mrsc-sp-5: 32px; --mrsc-sp-6: 48px; /* Form-field tokens. v10.30 brand-alignment refresh: geometry now matches the live mokarangers.mu Elementor kit (post-7.css buttons + WS Form inputs). Fields keep white bg (Shopify-checkout direction) but adopt brand 12.5px radius + 12.5×20px padding + 1px hairline. Buttons adopt brand 15px radius + 17.5×30px padding + 13/700/1.25-tracked CentralSans typography. */ --mrsc-field-bg: #FFFFFF; --mrsc-field-bg-hover: #FFFFFF; --mrsc-field-bg-focus: #FFFFFF; --mrsc-field-bg-disabled: #F7F7F5; --mrsc-field-border: #D9D8D6; /* brand neutral, was #DDDDDD */ --mrsc-field-border-hover: #878C90; /* brand neutral, was #B0B0B0 */ --mrsc-field-radius: 12.5px; /* brand WS Form, was 8px */ --mrsc-field-padding-y: 12.5px; /* brand, was 12px */ --mrsc-field-padding-x: 20px; /* brand, was 14px */ --mrsc-btn-radius: 15px; /* brand Elementor kit */ --mrsc-btn-padding-y: 17.5px; /* brand, was 14px */ --mrsc-btn-padding-x: 30px; /* brand, was 28px */ --mrsc-grid-gap: 20px; --mrsc-block-radius: 12px; --mrsc-card-border: #EBEBEB; /* Brand font: CentralSans is declared in post-7.css (@font-face) and * loaded on every mokarangers.mu page, so the widget picks it up * via cascade. The system-sans fallback covers admin previews on a * machine that doesn't yet have the brand kit cached. */ --mrsc-font-body: 'CentralSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --mrsc-font-display: 'CentralSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* Body inheritance - matches brand 16/26 with 0.25px tracking */ font-family: var(--mrsc-font-body); font-size: var(--mrsc-fs-body); font-weight: 400; line-height: 1.625; letter-spacing: 0.25px; text-transform: none; text-align: left; color: var(--mrsc-ink); background: var(--mrsc-bg); /* Full-bleed: fill whatever container we're dropped into. The widget * fits its content - no forced min-height so short steps (Done, * Uniforms) don't leave a giant whitespace tail. */ width: 100%; margin: 0; border: 0; border-radius: 0; overflow: visible; position: relative; display: flex; flex-direction: column; } .mrsc-widget .mrsc-main { flex: 1 1 auto; } .mrsc-widget, .mrsc-widget *, .mrsc-widget *::before, .mrsc-widget *::after { box-sizing: border-box; } /* ---------- Stepper ---------- Desktop (>600px): numbered-circle stepper. Each step is a 24px circle with the step number inside, connected to neighbors by a short horizontal line. Active step = filled brand-pink circle; done step = filled ink circle; pending = hollow gray circle. Numbers auto-generate via CSS counter() - no JS changes needed when steps are conditionally hidden (counter only increments on non-hidden LIs because :not([hidden]) selector below). Mobile (≤600px): tab labels hidden, replaced by "Step N of M · Current step name" + progress bar (see responsive block below). */ .mrsc-widget .mrsc-stepper { background: #fff; border-bottom: 1px solid var(--mrsc-card-border); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Brand mark on the left of the nav. Links back to the club site so a * lost parent has an obvious escape hatch. Height is constrained, not * the bar - keeps the 84px stepper height stable across breakpoints. */ .mrsc-widget .mrsc-stepper-logo { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 0; text-decoration: none; } .mrsc-widget .mrsc-stepper-logo { position: relative; } .mrsc-widget .mrsc-stepper-logo img { height: 44px; width: auto; display: block; transition: opacity 0.4s ease; } /* Light variant sits absolutely on top of the dark one, occupying * the same layout slot. Swapped via opacity when the intro state * is active. */ .mrsc-widget .mrsc-stepper-logo .mrsc-stepper-logo-light { position: absolute; inset: 0; opacity: 0; } .mrsc-widget.mrsc-on-intro .mrsc-stepper-logo .mrsc-stepper-logo-dark { opacity: 0; } .mrsc-widget.mrsc-on-intro .mrsc-stepper-logo .mrsc-stepper-logo-light { opacity: 1; } /* ---------- Intro hero background ---------- v10.42.33 * Welcome step paints the brand gradient edge-to-edge of the * viewport. The widget is capped at max-width:1366px, so applying * the bg on the widget left white bands on either side at wide * viewports. The gradient lives on instead - JS toggles a * `mrsc-body-intro` class alongside the widget's `mrsc-on-intro`, * and the widget itself stays transparent so the body bg shows * through. */ body.mrsc-body-intro { background: radial-gradient(ellipse 90% 75% at 100% 100%, #E81F76 0%, rgba(232,31,118,0.55) 18%, rgba(20,10,30,0) 55%), linear-gradient(140deg, #2C3D5C 0%, transparent 28%), #0C1828; } /* Stepper + main both transparent on intro so the widget gradient * shows through the full chrome. */ .mrsc-widget.mrsc-on-intro .mrsc-stepper { background: transparent; border-bottom-color: rgba(255,255,255,0.15); } .mrsc-widget.mrsc-on-intro .mrsc-main { background: transparent; } /* Inverted nav text + step circles. Colour-only changes ride a * 0.4s transition so the swap back to white-bg steps is smooth. */ .mrsc-widget .mrsc-stepper li, .mrsc-widget .mrsc-stepper li::before, .mrsc-widget .mrsc-stepper li + li::after { transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease; } .mrsc-widget.mrsc-on-intro .mrsc-stepper li { color: rgba(255,255,255,0.65); } .mrsc-widget.mrsc-on-intro .mrsc-stepper li.active { color: #fff; } .mrsc-widget.mrsc-on-intro .mrsc-stepper li::before { background: transparent; border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.7); } .mrsc-widget.mrsc-on-intro .mrsc-stepper li.active::before { background: #E81F76; border-color: #E81F76; color: #fff; } .mrsc-widget.mrsc-on-intro .mrsc-stepper li + li::after { background: rgba(255,255,255,0.2); } .mrsc-widget.mrsc-on-intro .mrsc-stepper-counter, .mrsc-widget.mrsc-on-intro .mrsc-stepper-counter-label { color: #fff; } .mrsc-widget.mrsc-on-intro .mrsc-stepper-counter-progress { background: rgba(255,255,255,0.2); } /* Hero copy inverted on intro. */ .mrsc-widget .mrsc-step-hero .mrsc-eyebrow, .mrsc-widget .mrsc-step-hero h2, .mrsc-widget .mrsc-step-hero .mrsc-help { transition: color 0.4s ease; } .mrsc-widget.mrsc-on-intro .mrsc-step-hero .mrsc-eyebrow { color: rgba(255,255,255,0.62); } .mrsc-widget.mrsc-on-intro .mrsc-step-hero h2 { color: #fff; } .mrsc-widget.mrsc-on-intro .mrsc-step-hero .mrsc-help { color: rgba(255,255,255,0.78); } /* Ghost button (Edit my registration) flips to white outline so it * stays visible on dark. Primary stays pink-on-white-text. */ .mrsc-widget .mrsc-btn-ghost { transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease; } .mrsc-widget.mrsc-on-intro .mrsc-btn-ghost { color: #fff; border-color: rgba(255,255,255,0.45); background: transparent; } .mrsc-widget.mrsc-on-intro .mrsc-btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); } .mrsc-widget .mrsc-stepper ol { list-style: none; display: flex; align-items: center; justify-content: flex-end; gap: 0; height: 84px; margin: 0; padding: 0; counter-reset: mrsc-step; } .mrsc-widget .mrsc-stepper li { display: flex; align-items: center; gap: 10px; color: var(--mrsc-ink-soft); font-family: var(--mrsc-font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 0; position: relative; white-space: nowrap; } .mrsc-widget .mrsc-stepper li:not([hidden]) { counter-increment: mrsc-step; } .mrsc-widget .mrsc-stepper li::before { content: counter(mrsc-step); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--mrsc-card-border); background: #fff; color: var(--mrsc-ink-soft); font-family: var(--mrsc-font-body); font-size: 12px; font-weight: 600; line-height: 1; flex-shrink: 0; transition: background .15s, border-color .15s, color .15s; } /* Connector line between adjacent visible LIs. Sits to the left of each non-first LI's circle, at the same vertical center. */ .mrsc-widget .mrsc-stepper li + li { margin-left: 24px; } .mrsc-widget .mrsc-stepper li + li::after { content: ""; position: absolute; left: -24px; width: 24px; height: 1px; background: var(--mrsc-card-border); top: 50%; transform: translateY(-50%); } .mrsc-widget .mrsc-stepper li.active { color: var(--mrsc-ink-strong); font-weight: 600; } .mrsc-widget .mrsc-stepper li.active::before { background: var(--mrsc-primary); border-color: var(--mrsc-primary); color: #fff; } .mrsc-widget .mrsc-stepper li.done { color: var(--mrsc-ink-strong); } .mrsc-widget .mrsc-stepper li.done::before { background: var(--mrsc-ink-strong); border-color: var(--mrsc-ink-strong); color: #fff; } /* Connector line behind a done step also turns ink-strong so the "filled" segments of the trail visually connect. */ .mrsc-widget .mrsc-stepper li.done + li::after, .mrsc-widget .mrsc-stepper li.done + li.active::after { background: var(--mrsc-ink-strong); } .mrsc-widget .mrsc-stepper li[hidden] { display: none !important; } /* Mobile progress counter - replaces the per-step labels on small viewports. Layout: [pink-circle N] [label] [progress bar]. Circle matches the desktop active-step style (24px filled pink with white number) so the two viewports feel like the same UI. */ .mrsc-widget .mrsc-stepper-counter { display: none; align-items: center; justify-content: flex-start; font-family: var(--mrsc-font-body); font-size: 14px; font-weight: 600; color: var(--mrsc-ink-strong); padding: 14px 16px 0; gap: 10px; height: 100%; width: 100%; } .mrsc-widget .mrsc-stepper-counter-circle { flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mrsc-primary); border: 1px solid var(--mrsc-primary); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; } .mrsc-widget .mrsc-stepper-counter-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mrsc-widget .mrsc-stepper-counter-progress { flex: 0 0 96px; height: 4px; background: var(--mrsc-card-border); border-radius: 2px; overflow: hidden; position: relative; } .mrsc-widget .mrsc-stepper-counter-progress::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--mrsc-progress, 0%); background: var(--mrsc-primary); border-radius: 2px; transition: width .25s ease; } /* Off-path state - circle becomes a quiet hollow placeholder. */ .mrsc-widget .mrsc-stepper-counter.is-off-path .mrsc-stepper-counter-circle { background: #fff; border-color: var(--mrsc-card-border); color: var(--mrsc-ink-soft); } /* ---------- Main content area ---------- * Edge-to-edge content. Small fixed gutters keep field borders from * touching the host container's edge but never carve a centred column. */ .mrsc-widget .mrsc-main { background: #fff; padding: 48px 24px 64px; max-width: none; margin: 0; } .mrsc-widget .mrsc-step h2 { font-family: var(--mrsc-font-display); margin: 0 0 8px; color: var(--mrsc-ink-strong); font-size: 26px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; } .mrsc-widget .mrsc-eyebrow { font-family: var(--mrsc-font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mrsc-ink-soft); margin: 0 0 12px; } .mrsc-widget .mrsc-help { color: var(--mrsc-ink-soft); margin: 0 0 28px; font-size: 15px; line-height: 1.55; } /* ---------- Intro step ---------- * Welcome splash: content centred horizontally and vertically in the * available page area, but never constrained to a fixed reading column - * the hero spans the full viewport width. */ .mrsc-widget [hidden] { display: none !important; } .mrsc-widget .mrsc-step-hero { /* Vertically centred in a comfortable band - generous on tall viewports, but capped at 640px so it doesn't push the CTAs below the fold on shorter screens. */ min-height: clamp(360px, calc(100vh - 200px), 640px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 0; } .mrsc-widget .mrsc-step-hero .mrsc-eyebrow { margin: 0 0 16px; color: var(--mrsc-ink-soft); } .mrsc-widget .mrsc-step-hero h2 { font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 16px; max-width: 720px; color: var(--mrsc-ink-strong); font-weight: 600; } .mrsc-widget .mrsc-step-hero .mrsc-help { font-size: var(--mrsc-fs-body); color: var(--mrsc-ink-soft); margin: 0 0 32px; max-width: none; } .mrsc-widget .mrsc-step-hero .mrsc-actions-hero { justify-content: center; } /* Chooser CTAs: two large buttons stacked on mobile, side-by-side on desktop. Both inherit .mrsc-btn-large sizing so the visual weight is balanced between Primary (Start new) and Ghost (Edit existing). */ .mrsc-widget .mrsc-step-hero .mrsc-actions-chooser { flex-direction: column; align-items: stretch; gap: 12px; max-width: 360px; margin-left: auto; margin-right: auto; } .mrsc-widget .mrsc-step-hero .mrsc-actions-chooser .mrsc-btn { width: 100%; } @media (min-width: 720px) { .mrsc-widget .mrsc-step-hero .mrsc-actions-chooser { flex-direction: row; max-width: none; justify-content: center; } .mrsc-widget .mrsc-step-hero .mrsc-actions-chooser .mrsc-btn { width: auto; } } /* Hero-step CTAs scale ~1.15× the base brand button so the welcome "Start registration" pair reads as the primary visual anchor without breaking the brand button character. Same sentence-case tracking rationale as .mrsc-btn (0.3 px instead of brand 1.4 px). */ /* v10.44.41 - selector specificity bumped to .mrsc-btn.mrsc-btn-large so this rule beats the generic .mrsc-btn font-size:13px defined later in the file. Same source order, higher specificity → wins regardless of cascade position. */ .mrsc-widget .mrsc-btn.mrsc-btn-large { /* v10.44.40 - 16px so white-on-pink (#fff on #E81F76) clears WCAG AA large-text (14pt+ bold) at 3:1 — actual ratio 4.29:1, above the bar. Smaller breakpoints follow the same minimum. */ font-size: 16px; letter-spacing: 1.4px; padding: 20px 38px; min-width: 220px; } @media (max-width: 1024px) { .mrsc-widget .mrsc-btn.mrsc-btn-large { font-size: 15px; letter-spacing: 1.3px; padding: 18px 34px; } } @media (max-width: 600px) { .mrsc-widget .mrsc-step-hero h2 { font-size: 32px; } .mrsc-widget .mrsc-btn.mrsc-btn-large { font-size: 14px; letter-spacing: 1.2px; padding: 16px 30px; } } /* ---------- Mode chooser - pill cards ---------- */ .mrsc-widget .mrsc-mode { border: 0; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .mrsc-widget .mrsc-mode legend { grid-column: 1 / -1; font-family: var(--mrsc-font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mrsc-ink-strong); padding: 0; margin-bottom: 10px; } .mrsc-widget .mrsc-mode .mrsc-radio { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 16px; cursor: pointer; margin: 0; background: #fff; border: 1px solid var(--mrsc-card-border); border-radius: var(--mrsc-block-radius); font-family: var(--mrsc-font-body); font-size: var(--mrsc-fs-body); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mrsc-ink-strong); transition: border-color .12s, box-shadow .12s; } .mrsc-widget .mrsc-mode .mrsc-radio:hover { border-color: var(--mrsc-ink-strong); } .mrsc-widget .mrsc-mode .mrsc-radio.selected { border-color: var(--mrsc-ink-strong); box-shadow: none; } /* v10.36.0 - keyboard-only focus ring on the WHOLE card, not the * tiny radio dot inside. Mirrors :focus-within so users tabbing * to the radio see the card light up instead of a pixel-thin * outline on the 18 px control. */ .mrsc-widget .mrsc-mode .mrsc-radio:focus-within { border-color: var(--mrsc-primary); box-shadow: 0 0 0 2px var(--mrsc-primary); outline: 0; } .mrsc-widget .mrsc-mode .mrsc-radio input { width: 18px; height: 18px; accent-color: var(--mrsc-primary); } .mrsc-widget .mrsc-mode .mrsc-radio > div { display: flex; flex-direction: column; gap: 2px; } .mrsc-widget .mrsc-mode .mrsc-radio strong { font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--mrsc-ink-strong); } .mrsc-widget .mrsc-mode .mrsc-radio small { font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--mrsc-ink-soft); margin-top: 2px; } /* v10.44.4 - discount-status block on the holder form. Restyled as a plain white Shopify-checkout card (no fieldset/legend cut-through). Two checkbox rows separated from the eyebrow heading and from the help footer by hairline borders. Brand pink reserved for the checkbox accent - the card itself stays neutral. */ .mrsc-widget .mrsc-discount-flags { background: #fff; border: 1px solid var(--mrsc-card-border); border-radius: var(--mrsc-block-radius); padding: 12px 16px 14px; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; } .mrsc-widget .mrsc-discount-flags-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 0 8px; margin: 0; border-bottom: 1px solid var(--mrsc-card-border); } .mrsc-widget .mrsc-discount-flags-title { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--mrsc-ink-strong); } .mrsc-widget .mrsc-discount-flags-optional { font-size: 11px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: var(--mrsc-ink-soft); } .mrsc-widget .mrsc-checkbox-row, .mrsc-widget .mrsc-radio-row { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 2px 0; font-size: 14.5px; font-weight: 500; color: var(--mrsc-ink-strong); cursor: pointer; user-select: none; } .mrsc-widget .mrsc-checkbox-row input[type="checkbox"], .mrsc-widget .mrsc-radio-row input[type="radio"] { width: 18px; height: 18px; accent-color: var(--mrsc-primary); margin: 0; flex-shrink: 0; cursor: pointer; } .mrsc-widget .mrsc-discount-flags-help { display: block; margin: 2px 0 0; padding-top: 10px; border-top: 1px solid var(--mrsc-card-border); color: var(--mrsc-ink-soft); font-size: 12.5px; line-height: 1.5; } /* v10.44.22 - per-member discount eligibility section, above the price * preview on each member's leader card (hidden on sibling sport rows like * other personal fields). * v10.44.29 - dropped the inner-card chrome (border / background / radius); * a card-within-a-card was visually noisy. Now a labelled section divided * from the rows above by a single hairline rule, in line with the existing * section dividers on the form. */ .mrsc-widget .mrsc-member-discount-card { background: transparent; border: 0; border-top: 1px solid var(--mrsc-card-border); border-radius: 0; padding: 14px 0 4px; margin: 14px 0 8px; display: flex; flex-direction: column; gap: 10px; } .mrsc-widget .mrsc-member-discount-card .mrsc-discount-flags-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0; margin: 0; border-bottom: 0; } /* v10.44.37 - inline hint shown under Lifestyle when Staff overrides it. The SELECT is disabled at the same time so it reads as "input + reason" and the parent doesn't fight a control whose value would have no effect. */ .mrsc-widget .mrsc-member-discount-card .mrsc-lifestyle-note { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--mrsc-text-muted, #6b7280); } .mrsc-widget .mrsc-member-discount-card select[disabled] { background-color: var(--mrsc-input-bg-disabled, #f3f4f6); color: var(--mrsc-text-muted, #6b7280); cursor: not-allowed; opacity: 0.85; } /* ---------- Form rows ---------- */ .mrsc-widget .mrsc-form .mrsc-row, .mrsc-widget .mrsc-member-card .mrsc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mrsc-grid-gap); margin-bottom: var(--mrsc-grid-gap); } .mrsc-widget .mrsc-row-stack { grid-template-columns: 1fr; } /* v10.44.88 - three compact fields (DOB / Gender / T-shirt) share one row so no half-width orphan is left behind (club feedback). Collapses to a single column on mobile via the existing .mrsc-row breakpoint. */ .mrsc-widget .mrsc-member-card .mrsc-row.mrsc-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* v10.43 - multi-slot picker host. When a member picks 2 or 3 sessions per week, JS clones extra `` blocks into this container so the user can choose a distinct time for each session. Matched to .mrsc-row spacing so the stack lines up with the Sessions/Slot-1 row above. */ .mrsc-widget .mrsc-slot-extra { display: flex; flex-direction: column; gap: var(--mrsc-grid-gap); margin-bottom: var(--mrsc-grid-gap); } .mrsc-widget .mrsc-slot-extra[hidden] { display: none; } /* Stacked-form variant for short forms like the edit-link request (NIC + email). Labels are direct children, no .mrsc-row wrapper. Same vertical rhythm as the gridded rows above so the two layouts feel consistent across screens. */ .mrsc-widget .mrsc-form-stack { display: flex; flex-direction: column; gap: var(--mrsc-grid-gap); } .mrsc-widget label { display: flex; flex-direction: column; gap: 6px; font-family: var(--mrsc-font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mrsc-ink-strong); } /* Generic input style only applies to text/number/email/date/etc - NOT to * radios or checkboxes, which keep their native (system-drawn) appearance * so the user can see their ticked state. */ .mrsc-widget input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .mrsc-widget select, .mrsc-widget textarea { font-family: var(--mrsc-font-body); font-size: var(--mrsc-fs-body); font-weight: 400; text-transform: none; letter-spacing: 0; padding: var(--mrsc-field-padding-y) var(--mrsc-field-padding-x); border: 1px solid var(--mrsc-field-border); border-radius: var(--mrsc-field-radius); background: var(--mrsc-field-bg); color: var(--mrsc-ink-strong); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; } .mrsc-widget input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover, .mrsc-widget select:hover, .mrsc-widget textarea:hover { border-color: var(--mrsc-field-border-hover); } /* Native radios + checkboxes - visible state, branded accent. */ .mrsc-widget input[type="radio"], .mrsc-widget input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; accent-color: var(--mrsc-primary); } /* Native date picker icon - make sure it's visible on all browsers. */ .mrsc-widget input[type="date"] { -webkit-appearance: none; appearance: none; padding-right: 12px; min-height: 48px; } .mrsc-widget input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; } .mrsc-widget select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } .mrsc-widget input::placeholder { color: var(--mrsc-muted); font-weight: 400; text-transform: none; letter-spacing: 0; } .mrsc-widget input:not([type="checkbox"]):not([type="radio"]):focus, .mrsc-widget select:focus, .mrsc-widget textarea:focus { outline: 0; border-color: var(--mrsc-ink-strong); box-shadow: 0 0 0 1px var(--mrsc-ink-strong); } /* Keyboard-only focus ring on radios/checkboxes. :focus-visible * suppresses the ring after a mouse click but keeps it for tab * navigation - accessibility intact, no visual noise on every * pointer interaction. */ .mrsc-widget input[type="radio"]:focus-visible, .mrsc-widget input[type="checkbox"]:focus-visible { outline: 2px solid var(--mrsc-primary); outline-offset: 2px; } .mrsc-widget select:disabled, .mrsc-widget input:disabled { background-color: var(--mrsc-field-bg-disabled); /* v10.44.47 - locked fields hold REAL data (NIC, name, DOB in edit mode). The muted grey read as empty placeholder text - parents thought their identity failed to load. Ink colour on the grey background: the value reads as data, the background + cursor still say "locked". -webkit-text-fill-color overrides iOS Safari's forced grey on disabled inputs; opacity:1 does the same for the rest. */ color: var(--mrsc-ink); -webkit-text-fill-color: var(--mrsc-ink); opacity: 1; cursor: not-allowed; border-color: var(--mrsc-card-border); } .mrsc-widget select:disabled { /* Drop the dropdown caret SVG when the field is disabled - leaves a phantom affordance otherwise that suggests the field is clickable. */ background-image: none; padding-right: 14px; } .mrsc-widget select:disabled:hover, .mrsc-widget input:disabled:hover { background-color: var(--mrsc-field-bg-disabled); border-color: var(--mrsc-card-border); } .mrsc-widget .mrsc-meta { font-size: var(--mrsc-fs-meta); color: var(--mrsc-ink-soft); font-weight: 400; letter-spacing: 0; text-transform: none; } .mrsc-widget .mrsc-meta-error { color: var(--mrsc-error); } /* Phone-with-prefix */ .mrsc-widget .mrsc-phone-wrap { display: flex; align-items: stretch; border: 1px solid var(--mrsc-field-border); border-radius: var(--mrsc-field-radius); background: var(--mrsc-field-bg); transition: border-color .15s, box-shadow .15s; overflow: hidden; } .mrsc-widget .mrsc-phone-wrap:hover { border-color: var(--mrsc-field-border-hover); } .mrsc-widget .mrsc-phone-wrap:focus-within { border-color: var(--mrsc-ink-strong); box-shadow: 0 0 0 1px var(--mrsc-ink-strong); } .mrsc-widget .mrsc-phone-wrap > .mrsc-phone-prefix { display: flex; align-items: center; padding: 0 0 0 18px; /* dropped right gap (was 4 px) */ color: var(--mrsc-ink-soft); font-size: var(--mrsc-fs-body); font-weight: 500; } /* The inner input needs to be visually invisible - the wrap owns * border + radius + background. Match the generic input rule's * :not() chain so this override outranks it (it has 0,4,1 * specificity; we hit 0,5,1 here). */ .mrsc-widget .mrsc-phone-wrap > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { border: 0; border-radius: 0; background: transparent; padding-left: 6px; /* tightened (was 8 px) */ flex: 1; } .mrsc-widget .mrsc-phone-wrap > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover, .mrsc-widget .mrsc-phone-wrap > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus { background: transparent; box-shadow: none; border-color: transparent; } /* Bitwarden / browser autofill paints a pale-yellow background on * autofilled inputs which bleeds out at the wrap boundary as a * visible seam. Override with a big inset shadow that masks the * yellow with our white field bg, and force the text colour so * autofill doesn't lighten it. */ .mrsc-widget .mrsc-phone-wrap > input:-webkit-autofill, .mrsc-widget .mrsc-phone-wrap > input:-webkit-autofill:hover, .mrsc-widget .mrsc-phone-wrap > input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--mrsc-field-bg) inset; box-shadow: 0 0 0 1000px var(--mrsc-field-bg) inset; -webkit-text-fill-color: var(--mrsc-ink-strong); caret-color: var(--mrsc-ink-strong); transition: background-color 5000s ease-in-out 0s; } .mrsc-widget .mrsc-checkbox { display: flex; flex-direction: row !important; align-items: center; gap: 10px; font-weight: 400; font-size: var(--mrsc-fs-meta); letter-spacing: 0; text-transform: none; color: var(--mrsc-ink); cursor: pointer; margin: 14px 0; } .mrsc-widget .mrsc-checkbox input { width: 18px; height: 18px; accent-color: var(--mrsc-primary); } /* ---------- Member cards ---------- */ .mrsc-widget .mrsc-members { display: flex; flex-direction: column; gap: 24px; } .mrsc-widget .mrsc-member-card { border: 1px solid var(--mrsc-card-border); border-radius: var(--mrsc-block-radius); padding: 24px; background: #fff; margin: 0; } /* v10.44.12 - person panel. Wraps all the sport cards for one person so * the personal fields (name / DOB / contact / holder toggle) only appear * once per person. The first card inside each panel carries the visible * personal-field rows (the "leader"); subsequent cards hide them via * the [data-person-leader] toggle below. * * Visually the panel is transparent - the inner cards keep their own * border so the existing Shopify-checkout aesthetic survives. The panel * head + "+ Add another sport" button hang off the top and bottom of the * card stack so the parent reads top-to-bottom: "Alice's stuff. Tennis. * Swimming. Add another sport for Alice." */ .mrsc-widget .mrsc-person-panel { display: flex; flex-direction: column; gap: 14px; } .mrsc-widget .mrsc-person-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px; } .mrsc-widget .mrsc-person-panel-label { font-family: var(--mrsc-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--mrsc-ink-soft); } .mrsc-widget .mrsc-person-panel-cards { display: flex; flex-direction: column; gap: 14px; } .mrsc-widget .mrsc-person-panel-actions { display: flex; justify-content: flex-end; margin-top: 2px; } /* The "+ Add another sport for X" button is a quiet ghost CTA - brand * pink only on hover, so the primary action gravity stays on the bottom * Back / Next bar. */ .mrsc-widget .mrsc-person-panel-actions .mrsc-btn-add-sport { padding: 10px 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; } /* v10.44.21 - disabled until every existing sport row for this person is * complete. Visually muted + un-clickable so the parent can see the button * exists but understands they need to finish the current sport first. */ .mrsc-widget .mrsc-person-panel-actions .mrsc-btn-add-sport[disabled], .mrsc-widget .mrsc-person-panel-actions .mrsc-btn-add-sport[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .mrsc-widget .mrsc-person-panel-hint { margin: 4px 2px 6px; text-align: right; color: var(--mrsc-ink-soft); font-size: 12.5px; font-style: italic; line-height: 1.4; } /* Hide personal-field rows on every non-leader sport card. The data * stays in state.members[] (cascaded from the leader) so the wire * payload still carries name + DOB + contact on every entry - admins * see no change in the sheet, the discount + per-member email pipelines * are untouched. */ .mrsc-widget .mrsc-person-panel .mrsc-member-card:not([data-person-leader="1"]) .mrsc-personal-row { display: none !important; } /* Subordinate sport cards have a slightly softer chrome so they read * as "more of Alice's stuff" rather than "another person". Subtle - * just a cooler background tint and no extra heading weight. */ .mrsc-widget .mrsc-person-panel .mrsc-member-card:not([data-person-leader="1"]) { background: #FCFCFB; } /* v10.40.15: refined card grid for the membership picker. More * breathing room, subtle hover (no aggressive fill), defensive * background declarations so the WP theme's button:hover rule * can't override us. */ .mrsc-widget .mrsc-mem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .mrsc-widget .mrsc-mem-card, .mrsc-widget button.mrsc-mem-card { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 22px; border: 1px solid var(--mrsc-card-border); border-radius: var(--mrsc-block-radius); background: #fff; color: var(--mrsc-ink-strong); font-family: var(--mrsc-font-body); text-align: left; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease; position: relative; } /* Defensive: pin the bg + text colour on hover so the WP theme's * generic `button:hover` rule can't fill the card with pink. */ .mrsc-widget .mrsc-mem-card:hover, .mrsc-widget button.mrsc-mem-card:hover { background: #fff; color: var(--mrsc-ink-strong); border-color: var(--mrsc-primary); box-shadow: 0 2px 8px rgba(16, 24, 32, 0.04); } .mrsc-widget .mrsc-mem-card.selected, .mrsc-widget button.mrsc-mem-card.selected { border-color: var(--mrsc-primary); border-width: 2px; padding: 21px 23px 21px; /* compensate for 2px border */ background: #FFF7FB; box-shadow: 0 4px 18px rgba(232, 31, 118, 0.10); } .mrsc-widget .mrsc-mem-card.selected:hover, .mrsc-widget button.mrsc-mem-card.selected:hover { background: #FFF7FB; border-color: var(--mrsc-primary); } .mrsc-widget .mrsc-mem-card.selected::after { content: ''; position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%; background: var(--mrsc-primary); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 14px 14px; background-repeat: no-repeat; background-position: center; } .mrsc-widget .mrsc-mem-card-head { display: flex; flex-direction: column; gap: 4px; padding-right: 28px; /* leave room for the selected checkmark */ } .mrsc-widget .mrsc-mem-card-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mrsc-ink-soft); line-height: 1; } .mrsc-widget .mrsc-mem-card.selected .mrsc-mem-card-eyebrow { color: var(--mrsc-primary); opacity: 0.7; } .mrsc-widget .mrsc-mem-card-title { font-family: var(--mrsc-font-display); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; color: var(--mrsc-ink-strong); } .mrsc-widget .mrsc-mem-card.selected .mrsc-mem-card-title { color: var(--mrsc-primary); } .mrsc-widget .mrsc-mem-card-badge { display: inline-block; align-self: flex-start; margin-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: #FCE7F3; color: var(--mrsc-primary); } .mrsc-widget .mrsc-mem-card-divider { height: 1px; background: var(--mrsc-card-border); margin: 0 -24px; /* edge-to-edge separator */ } .mrsc-widget .mrsc-mem-card.selected .mrsc-mem-card-divider { background: #F9CFE0; margin: 0 -23px; } .mrsc-widget .mrsc-mem-card-prices { display: flex; flex-direction: column; } .mrsc-widget .mrsc-mem-card-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } /* Edge-to-edge separator between stacked prices (entry / per month). * Mirrors the existing head/prices divider - same colour and same * outdent against the card's 24px horizontal padding. */ .mrsc-widget .mrsc-mem-card-price + .mrsc-mem-card-price { position: relative; margin-top: 12px; padding-top: 12px; } .mrsc-widget .mrsc-mem-card-price + .mrsc-mem-card-price::before { content: ''; position: absolute; top: 0; left: -24px; right: -24px; height: 1px; background: var(--mrsc-card-border); } .mrsc-widget .mrsc-mem-card.selected .mrsc-mem-card-price + .mrsc-mem-card-price::before { left: -23px; right: -23px; background: #F9CFE0; } .mrsc-widget .mrsc-mem-card-amount { font-family: var(--mrsc-font-display); font-weight: 700; font-size: 18px; color: var(--mrsc-ink-strong); letter-spacing: -0.01em; } .mrsc-widget .mrsc-mem-card.selected .mrsc-mem-card-amount { color: var(--mrsc-primary); } .mrsc-widget .mrsc-mem-card-unit { font-size: 12px; color: var(--mrsc-ink-soft); font-weight: 500; letter-spacing: 0.01em; } /* v10.40.12: Skip CTA - proper secondary button below the grid. * Visible and clickable, but visually subordinate to the cards. Never * pre-selected on first render. */ .mrsc-widget .mrsc-mem-skip-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 28px; gap: 18px; } .mrsc-widget .mrsc-mem-skip-divider { width: 100%; display: flex; align-items: center; gap: 14px; color: var(--mrsc-ink-soft); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; } .mrsc-widget .mrsc-mem-skip-divider::before, .mrsc-widget .mrsc-mem-skip-divider::after { content: ''; flex: 1; height: 1px; background: var(--mrsc-card-border); } .mrsc-widget .mrsc-mem-skip-cta, .mrsc-widget button.mrsc-mem-skip-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 26px; border: 1.5px solid var(--mrsc-card-border); border-radius: 999px; background: #fff; color: var(--mrsc-ink-strong); font-family: var(--mrsc-font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: border-color 0.15s, color 0.15s, box-shadow 0.15s; } /* Defensive: pin bg + text colour so the WP theme can't fill the * pill with pink on hover (which made the label invisible). */ .mrsc-widget .mrsc-mem-skip-cta:hover, .mrsc-widget button.mrsc-mem-skip-cta:hover { background: #fff; border-color: var(--mrsc-primary); color: var(--mrsc-primary); } .mrsc-widget .mrsc-mem-skip-cta.selected, .mrsc-widget button.mrsc-mem-skip-cta.selected { border-color: var(--mrsc-primary); background: #FFF1F7; color: var(--mrsc-primary); box-shadow: 0 4px 14px rgba(232, 31, 118, 0.12); } .mrsc-widget .mrsc-mem-skip-cta.selected:hover, .mrsc-widget button.mrsc-mem-skip-cta.selected:hover { background: #FFF1F7; color: var(--mrsc-primary); border-color: var(--mrsc-primary); } .mrsc-widget .mrsc-mem-skip-check { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--mrsc-primary); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 12px 12px; background-repeat: no-repeat; background-position: center; } .mrsc-widget .mrsc-mem-skip-text { display: inline-block; } @media (max-width: 600px) { .mrsc-widget .mrsc-mem-grid { grid-template-columns: 1fr; gap: 12px; } .mrsc-widget .mrsc-mem-card { padding: 20px 20px; } .mrsc-widget .mrsc-mem-card.selected { padding: 19px 19px; } .mrsc-widget .mrsc-mem-card-title { font-size: 17px; } .mrsc-widget .mrsc-mem-card-amount { font-size: 17px; } .mrsc-widget .mrsc-mem-card-divider { margin: 0 -20px; } .mrsc-widget .mrsc-mem-card.selected .mrsc-mem-card-divider { margin: 0 -19px; } .mrsc-widget .mrsc-mem-card-price + .mrsc-mem-card-price::before { left: -20px; right: -20px; } .mrsc-widget .mrsc-mem-card.selected .mrsc-mem-card-price + .mrsc-mem-card-price::before { left: -19px; right: -19px; } } .mrsc-widget .mrsc-member-card legend { font-family: var(--mrsc-font-display); font-weight: 600; padding: 0; margin-bottom: 20px; color: var(--mrsc-ink-strong); font-size: 18px; letter-spacing: -0.005em; text-transform: none; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; } .mrsc-widget .mrsc-member-label { text-transform: none; } /* Secondary text link - not an eyebrow, so no uppercase / heavy weight. Sits in the legend bar opposite the "Member N" label. */ .mrsc-widget .mrsc-remove { font-family: var(--mrsc-font-body); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mrsc-ink-soft); background: none; border: 1px solid transparent; /* Min 44 px touch target for WCAG 2.5.8 (was 4 × 10 → ~26 px) */ min-height: 44px; padding: 10px 14px; border-radius: 8px; cursor: pointer; transition: border-color .12s, color .12s; display: inline-flex; align-items: center; } .mrsc-widget .mrsc-remove:hover { color: var(--mrsc-error); border-color: var(--mrsc-card-border); } /* Holder toggle ("This is me") - plain inline checkbox row, no card chrome. Card-inside-card was the most AI-template-looking element on the member step. Switched to Airbnb's "no chrome on inline options" pattern; check state carried by font-weight + accent. */ .mrsc-widget .mrsc-holder-toggle { margin: 0 0 16px; padding: 0; background: transparent; border: 0; border-radius: 0; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mrsc-ink-strong); display: inline-flex; flex-direction: row; align-items: center; gap: 8px; cursor: pointer; } .mrsc-widget .mrsc-holder-toggle.checked { background: transparent; border-color: transparent; color: var(--mrsc-ink-strong); } .mrsc-widget .mrsc-holder-toggle small { color: var(--mrsc-ink-soft); font-size: 13px; font-weight: 400; } /* Price preview */ .mrsc-widget .mrsc-price-preview { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mrsc-line); font-size: var(--mrsc-fs-body); color: var(--mrsc-ink-soft); font-variant-numeric: tabular-nums; } .mrsc-widget .mrsc-price-preview .mrsc-price-row { display: flex; justify-content: space-between; padding: 4px 0; } .mrsc-widget .mrsc-price-preview .mrsc-price-row strong { color: var(--mrsc-ink); font-weight: 700; } .mrsc-widget .mrsc-price-preview .mrsc-price-annual strong { color: var(--mrsc-primary); } /* v10.44.18 - sibling sport cards hide the per-sport annual fee (it lives on * the leader card) so the parent doesn't see Rs 2,500 three times for a * three-sport child. The muted "counted on first sport" line keeps the row * visible so the layout doesn't jump when the user changes sport. */ .mrsc-widget .mrsc-price-preview .mrsc-price-annual-counted { opacity: 0.55; font-style: italic; } .mrsc-widget .mrsc-price-preview .mrsc-price-annual-counted strong { color: var(--mrsc-ink-soft); font-weight: 500; } /* v10.44.30 - per-member discount line under the gross monthly fee. The * deduction row sits in muted pink (matches the cart-level Discount row); * the Net row sits on a hairline above and inherits ink-strong + brand * pink on the strong tag so it visually anchors the final number. */ .mrsc-widget .mrsc-price-preview .mrsc-price-discount { color: var(--mrsc-ink-soft); } .mrsc-widget .mrsc-price-preview .mrsc-price-discount strong { color: var(--mrsc-primary); font-weight: 600; } .mrsc-widget .mrsc-price-preview .mrsc-price-net { border-top: 1px solid var(--mrsc-card-border); padding-top: 8px; margin-top: 2px; } .mrsc-widget .mrsc-price-preview .mrsc-price-net strong { color: var(--mrsc-primary); font-weight: 700; } /* ---------- Callouts - shared base for warning/info/error blocks ---------- */ .mrsc-widget .mrsc-callout, .mrsc-widget .mrsc-waitlist-hint, .mrsc-widget .mrsc-done-waitlist { margin-top: 16px; padding: 14px 18px; border-radius: var(--mrsc-block-radius); font-size: var(--mrsc-fs-meta); line-height: 1.5; } /* Callouts use ONLY documented brand tokens - no off-palette yellow/ * orange/cream/red tints. Visual differentiation comes from border * accent colour, not background fill. The cream tint (#FAFAF7) is * the only "fill" used; it's the brand background neutral. Pink for * warnings (matches Moka pink, reads as "attention"), cyan for info * (matches the brand accent #96DAEA). */ .mrsc-widget .mrsc-callout--warn, .mrsc-widget .mrsc-waitlist-hint, .mrsc-widget .mrsc-done-waitlist { background: var(--mrsc-bg); /* cream #FAFAF7 - brand neutral */ border: 1px solid var(--mrsc-primary); /* pink edge = attention */ color: var(--mrsc-ink); } .mrsc-widget .mrsc-callout--warn strong, .mrsc-widget .mrsc-waitlist-hint strong, .mrsc-widget .mrsc-done-waitlist strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; /* v10.40.45 - round-23 a11y: --mrsc-primary 14px bold = 4.30:1 * (below AA 4.5:1 threshold for normal text; bold-large needs * 3:1 but 14px is below the 18.66px bold-large boundary). */ color: var(--mrsc-primary-dark); margin-bottom: 4px; } /* Info variant - used by the "I don't know" coach-assess notice on the member card. Cyan accent (brand --mrsc-accent #96DAEA) reads as "informational, not warning" and stays in the documented palette. */ .mrsc-widget .mrsc-callout--info { background: var(--mrsc-bg); /* cream #FAFAF7 */ border: 1px solid var(--mrsc-accent); /* cyan edge = info */ color: var(--mrsc-ink); } .mrsc-widget .mrsc-callout--info strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--mrsc-ink-strong); margin-bottom: 4px; } /* "See size guide" link beneath the T-shirt size dropdown. Inline, sits flush with the field, brand pink so it reads as an action. Hidden by default in the template; the JS reveals it when Config.UniformSizeGuideUrl is set. */ .mrsc-widget .mrsc-size-guide-link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mrsc-ink-strong); text-decoration: underline; text-decoration-color: var(--mrsc-card-border); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .12s; } .mrsc-widget .mrsc-size-guide-link:hover { text-decoration-color: var(--mrsc-ink-strong); color: var(--mrsc-ink-strong); } .mrsc-widget .mrsc-size-guide-link[hidden] { display: none; } /* ---------- Uniforms ---------- */ /* v10.44.101 - edit-flow uniform lock note. Brand-pink accent callout that explains sizes are fixed once the supplier order is placed. */ .mrsc-widget .mrsc-uniform-lock-note { margin: 0 0 16px; padding: 12px 14px; border-radius: 12.5px; border: 1px solid rgba(232, 31, 118, 0.35); border-left: 3px solid var(--mrsc-primary); background: rgba(232, 31, 118, 0.06); color: var(--mrsc-ink-strong); font-size: 14px; line-height: 1.45; } /* v10.44.102 - "Ordered" pill on an already-ordered add-on row (edit flow), marking rows that are locked because the supplier order is placed. */ .mrsc-widget .mrsc-uniform-ordered-tag { align-self: flex-start; /* don't stretch inside the flex-column item wrap */ margin: 2px 0 0; padding: 2px 8px; border-radius: 999px; background: rgba(232, 31, 118, 0.10); color: var(--mrsc-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } /* v10.44.108 - visible lock note under a returning member's t-shirt size box (edit flow), so the reason is seen without hovering the native tooltip. */ .mrsc-widget .mrsc-size-lock-note { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; color: var(--mrsc-primary); } .mrsc-widget .mrsc-uniforms-section { margin-bottom: 24px; } .mrsc-widget .mrsc-uniforms-section h3 { font-family: var(--mrsc-font-display); margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mrsc-ink-strong); } /* Uniforms list - full-bleed, matches the rest of the form. The line layout (1fr auto auto grid below) puts name+notes in col 1, qty input in col 2, price tag anchored to the right in col 3. */ .mrsc-widget .mrsc-uniforms { display: flex; flex-direction: column; } /* Each uniform row: name + notes stacked on the left, qty input (Optional rows) + price label anchored to the right. Grid is 1fr auto auto, so name+notes flex-grow to fill any container width while the right-side elements stay tight against the right edge - works at any viewport without sprawl. */ /* v10.44.23 - add-ons row layout. Name + notes on the left, Size + Qty * controls in the middle (each with a small Size/Qty caption above), price * pinned right. Readonly lines (Reception items: Match Shorts/Socks) skip * the Size and Qty controls. */ .mrsc-widget .mrsc-uniform-line { display: grid; /* v10.44.40 - explicit fixed-size right columns so SIZE / QTY pickers are visually balanced across rows. Price column is right-aligned at the end and sized to fit "Rs 2,200" without growing arbitrarily. Previous `auto auto auto` collapsed unpredictably depending on the longest sibling's content, producing the mismatched-widths look. */ /* v10.44.44 - price moved INTO the info block (under the item name) so the right side is just the SIZE + QTY pair - two captioned 44px fields that align perfectly across every row regardless of how long the item description wraps. */ grid-template-columns: minmax(0, 1fr) 110px 110px; column-gap: 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--mrsc-card-border); } .mrsc-widget .mrsc-uniform-line:last-child { border-bottom: 1px solid var(--mrsc-card-border); } /* v10.44.75 - additional-size sub-rows: visually attached to their item (no separating hairline, tighter padding), muted lead-in label with an inline Remove action; the "+ Add another size" affordance is a quiet text button in brand primary-dark. */ /* v10.44.79 - repeater rows styled like the member cards (white card, 1px border, block radius, 24px padding, 14px stack gap) so the add-ons step shares the members step's visual language. */ .mrsc-widget .mrsc-uniform-line.mrsc-uniform-repeat { border: 1px solid var(--mrsc-card-border); border-radius: var(--mrsc-block-radius); background: #fff; padding: 20px 24px; margin: 0 0 14px; align-items: start; } .mrsc-widget .mrsc-uniform-line.mrsc-uniform-repeat + .mrsc-uniform-addrow { border-bottom: none; padding-top: 2px; } /* v10.44.77 - repeater rows: the item picker fills the left column with the same captioned-field look as SIZE / QTY; Remove sits under it. */ .mrsc-widget .mrsc-uniform-item-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .mrsc-widget .mrsc-uniform-line .mrsc-uniform-item { width: 100%; } /* v10.44.80 - Remove anchored to the card's top-right corner instead of dangling under the item select (club feedback). */ .mrsc-widget .mrsc-uniform-line.mrsc-uniform-repeat { position: relative; } .mrsc-widget .mrsc-uniform-repeat .mrsc-uniform-remove { position: absolute; top: 14px; right: 20px; margin: 0; } /* Self-contained CTA: explicit white fill so the site's dark page background can never bleed through the ghost's transparency. */ .mrsc-widget .mrsc-btn.mrsc-uniform-add-size { background: #fff; color: var(--mrsc-primary-dark); border-color: var(--mrsc-primary-dark); } .mrsc-widget .mrsc-btn.mrsc-uniform-add-size:hover { background: var(--mrsc-primary-dark); border-color: var(--mrsc-primary-dark); color: #fff; } /* Live add-ons total under the cards. */ .mrsc-widget .mrsc-uniform-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 16px; padding: 14px 2px 0; } .mrsc-widget .mrsc-uniform-total-label { font-size: 13px; font-weight: 600; color: var(--mrsc-ink-strong); text-align: right; } .mrsc-widget .mrsc-uniform-total-note { font-size: 11px; font-weight: 400; color: var(--mrsc-muted); } .mrsc-widget .mrsc-uniform-total-value { font-size: 15px; font-weight: 700; color: var(--mrsc-ink-strong); } /* v10.44.80 - review: kit subsection heading + its closing total line, so uniforms read as their own block before the fees totals. */ /* v10.44.87 - multi-paragraph done-page body. */ .mrsc-widget .mrsc-done-para { margin: 0 0 14px; } .mrsc-widget .mrsc-done-para:last-child { margin-bottom: 0; } .mrsc-widget .mrsc-summary-subhead { margin: 20px 0 2px; padding-top: 16px; border-top: 1px solid var(--mrsc-card-border); font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--mrsc-ink-soft); } .mrsc-widget .mrsc-line-kit-total .mrsc-line-name { font-size: 14px; } .mrsc-widget .mrsc-line-kit-total .mrsc-line-amount { font-weight: 700; } /* v10.44.89 - hairline under the add-ons total closes the kit subsection before the fees rows begin (club feedback). */ .mrsc-widget .mrsc-line.mrsc-line-kit-total { border-bottom: 1px solid var(--mrsc-card-border); padding-bottom: 18px; margin-bottom: 6px; } .mrsc-widget .mrsc-uniform-line.mrsc-uniform-subline { border-top: none; padding-top: 0; margin-top: -6px; } .mrsc-widget .mrsc-uniform-subline .mrsc-uniform-name { font-size: 12px; font-weight: 400; color: var(--mrsc-muted); } .mrsc-widget .mrsc-uniform-remove { background: none; border: none; padding: 0; margin-left: 10px; font: 600 11px/1 inherit; font-family: inherit; letter-spacing: 0.4px; text-transform: uppercase; color: var(--mrsc-ink-soft); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* v10.44.81 - hover hardened: the theme's global button:hover painted a solid pink slab behind the text because the previous rule only set color, leaving background to the theme. Pin every state property. */ .mrsc-widget .mrsc-uniform-remove:hover, .mrsc-widget .mrsc-uniform-remove:focus, .mrsc-widget .mrsc-uniform-remove:active { background: none; border: none; box-shadow: none; color: var(--mrsc-primary-dark); text-decoration: underline; text-underline-offset: 2px; } .mrsc-widget .mrsc-uniform-remove:focus-visible { outline: 2px solid var(--mrsc-primary); outline-offset: 2px; } .mrsc-widget .mrsc-uniform-addrow { /* v10.44.78 - CTA right-aligned under the controls column, as a small ghost button instead of bare text (club feedback). */ display: flex; justify-content: flex-end; padding: 14px 0 16px; border-bottom: 1px solid var(--mrsc-card-border); } .mrsc-widget .mrsc-uniform-line + .mrsc-uniform-addrow { border-top: none; } /* Inherits .mrsc-btn-ghost (same as the members step's add-sport CTA); only the compact sizing is local. */ .mrsc-widget .mrsc-btn.mrsc-uniform-add-size { padding: 10px 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; } .mrsc-widget .mrsc-uniform-line.readonly { color: var(--mrsc-ink-strong); /* readonly rows (Member Shirt) keep the flat name | × 1 | Included shape */ grid-template-columns: minmax(0, 1fr) auto auto; } .mrsc-widget .mrsc-uniform-line.readonly .mrsc-uniform-static { color: var(--mrsc-ink-soft); } .mrsc-widget .mrsc-uniform-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* v10.44.37 - hide the description span when empty so the column doesn't reserve a phantom line of padding for the now-suppressed redundant "Kindly indicate your size" notes. */ .mrsc-widget .mrsc-uniform-type:empty { display: none; } .mrsc-widget .mrsc-uniform-name { font-weight: 600; font-size: 15px; color: var(--mrsc-ink-strong); line-height: 1.4; } .mrsc-widget .mrsc-uniform-type { font-size: 13px; color: var(--mrsc-ink-soft); line-height: 1.5; } .mrsc-widget .mrsc-uniform-size-wrap, .mrsc-widget .mrsc-uniform-qty-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } .mrsc-widget .mrsc-uniform-control-label { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--mrsc-ink-soft); } .mrsc-widget .mrsc-uniform-line .mrsc-uniform-item, .mrsc-widget .mrsc-uniform-line .mrsc-uniform-size, .mrsc-widget .mrsc-uniform-line .mrsc-uniform-qty, .mrsc-widget .mrsc-uniform-line input.mrsc-uniform-qty[type="number"] { /* v10.44.40 - matched sizing so the SELECT and INPUT visually pair as two adjacent fields of equal weight (not one tiny pill next to a wide rectangle). Each fills its 110px grid cell. v10.44.46 - the third selector exists for SPECIFICITY, not targeting: the base field rule (.mrsc-widget input:not(...):not(...):not(...)) scores (0,4,1) because each :not() argument counts, so the plain 3-class selector above lost on the INPUT only - select 44px/14px, input 51px/16px, the mismatched pair in the uniforms row. The input[type=number] variant ties at (0,4,1) and wins on source order. */ box-sizing: border-box; width: 100%; height: 44px; min-height: 44px; font-size: 14px; padding: 10px 12px; } .mrsc-widget .mrsc-uniform-line .mrsc-uniform-qty { text-align: right; } /* v10.44.44 - price renders under the item name inside .mrsc-uniform-info (cart-line style: "Shorts / Rs 500"). The old grid-column pin pushed QTY into a 4th column and floated the price mid-row at a different height from the captioned fields - the misalignment the layout kept fighting. */ .mrsc-widget .mrsc-uniform-info .mrsc-uniform-price { font-size: 13px; font-weight: 600; color: var(--mrsc-ink-strong); font-variant-numeric: tabular-nums; margin-top: 1px; } .mrsc-widget .mrsc-uniform-price:empty { display: none; } /* readonly rows: price stays in the right-hand column ("Included"). */ .mrsc-widget .mrsc-uniform-line.readonly .mrsc-uniform-price { font-size: 14px; font-weight: 500; color: var(--mrsc-ink-strong); font-variant-numeric: tabular-nums; text-align: right; grid-column: 3; align-self: center; } .mrsc-widget .mrsc-uniform-static { font-size: 13px; color: var(--mrsc-ink-soft); text-align: right; grid-column: 2; align-self: center; } .mrsc-widget .mrsc-footnote { margin: 18px 0 0; font-size: var(--mrsc-fs-meta); color: var(--mrsc-ink-soft); font-style: italic; line-height: 1.5; } /* ---------- Review ---------- */ .mrsc-widget .mrsc-review { margin-bottom: 20px; } .mrsc-widget .mrsc-review h3 { font-family: var(--mrsc-font-display); margin: 24px 0 12px; font-size: 18px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--mrsc-ink-strong); } /* ---------- Review page - Shopify-checkout summary pattern ---------- */ /* Order summary card. White, single hairline border, no tints. Line items stack with a thin divider between them; totals sit at the foot with one accent on the final due-today row. */ /* Host-theme defensive reset. The mokarangers.mu Elementor kit defines global top-margins and pseudo-element decorations on common block tags through `.elementor-widget-html h1..h6 / p / ul / ol / blockquote` - higher specificity than our scoped `.mrsc-*` rules, so the theme's spacing leaks into our cards and pushes content down. Reset every common block element inside the widget to zero top spacing; per-rule margins below still control intended bottom spacing. !important is the right tool here: this is a deliberate boundary against host CSS. */ .mrsc-widget h1, .mrsc-widget h2, .mrsc-widget h3, .mrsc-widget h4, .mrsc-widget h5, .mrsc-widget h6, .mrsc-widget p, .mrsc-widget ul, .mrsc-widget ol, .mrsc-widget dl, .mrsc-widget dt, .mrsc-widget dd, .mrsc-widget figure, .mrsc-widget blockquote, .mrsc-widget pre, .mrsc-widget fieldset, .mrsc-widget legend, .mrsc-widget table, .mrsc-widget details, .mrsc-widget summary { margin-top: 0 !important; padding-top: 0 !important; } .mrsc-widget h1::before, .mrsc-widget h2::before, .mrsc-widget h3::before, .mrsc-widget h4::before, .mrsc-widget h5::before, .mrsc-widget h6::before, .mrsc-widget h1::after, .mrsc-widget h2::after, .mrsc-widget h3::after, .mrsc-widget h4::after, .mrsc-widget h5::after, .mrsc-widget h6::after { content: none !important; } .mrsc-widget section { margin-top: 0; padding-top: 0; } .mrsc-widget .mrsc-summary { margin: 0 0 24px; padding: 24px; background: #fff; border: 1px solid var(--mrsc-card-border); border-radius: var(--mrsc-block-radius); } .mrsc-widget .mrsc-summary-title { font-family: var(--mrsc-font-display); margin: 0 0 16px; font-size: 18px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--mrsc-ink-strong); line-height: 1.3; } /* Each registered member or uniform sits as a single line: body on the left, price column on the right. Borders between lines only. */ .mrsc-widget .mrsc-line { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 16px 0; border-top: 1px solid var(--mrsc-card-border); } .mrsc-widget .mrsc-line:first-of-type { border-top: 0; padding-top: 0; } .mrsc-widget .mrsc-line-name { font-weight: 600; color: var(--mrsc-ink-strong); font-size: 15px; line-height: 1.4; } .mrsc-widget .mrsc-line-variant { margin-top: 3px; font-size: 13px; color: var(--mrsc-ink-soft); line-height: 1.5; } .mrsc-widget .mrsc-line-flag { display: inline-block; margin-left: 6px; padding: 2px 8px; font-size: 11px; font-weight: 500; letter-spacing: 0; background: #F2F2F2; color: var(--mrsc-ink-soft); border-radius: 4px; vertical-align: 1px; text-transform: none; } .mrsc-widget .mrsc-line-flag-warn { background: #FDEFF6; /* v10.40.45 - round-23 a11y: pink-on-pink-tint at 11px is the * lowest-contrast text in the form (~3.86:1). Dark pink restores * AA legibility for the line-flag tag pattern. */ color: var(--mrsc-primary-dark); } .mrsc-widget .mrsc-line-price { text-align: right; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 0; align-self: start; white-space: nowrap; } .mrsc-widget .mrsc-line-amount { font-weight: 600; color: var(--mrsc-ink-strong); font-size: 15px; line-height: 1.4; } .mrsc-widget .mrsc-line-amount + .mrsc-line-amount { margin-top: 6px; } .mrsc-widget .mrsc-line-cycle { font-size: 12px; color: var(--mrsc-ink-soft); line-height: 1.4; } /* Totals foot of the summary card. */ .mrsc-widget .mrsc-summary-totals { /* v10.44.40 - the previous layout had a hairline above EVERY row (Subtotal, Total, container), which read as broken/double dividers. Now: one hairline only above the Subtotal row, then breathing room down to Total. Order summary above stays separated by its own card border so we don't compound. */ margin-top: 4px; padding-top: 0; border-top: 0; font-variant-numeric: tabular-nums; } .mrsc-widget .mrsc-summary-totals .row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 14px; } .mrsc-widget .mrsc-summary-totals .row .label { color: var(--mrsc-ink-soft); } .mrsc-widget .mrsc-summary-totals .row .value { color: var(--mrsc-ink-strong); font-weight: 500; } .mrsc-widget .mrsc-summary-totals .row.muted .value { color: var(--mrsc-ink-soft); } .mrsc-widget .mrsc-summary-totals .row.subtotal { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--mrsc-card-border); font-weight: 600; } .mrsc-widget .mrsc-summary-totals .row.subtotal .label, .mrsc-widget .mrsc-summary-totals .row.subtotal .value { color: var(--mrsc-ink-strong); } .mrsc-widget .mrsc-summary-totals .row.discount .label { color: var(--mrsc-ink-soft); } /* v10.44.42 - primary-dark for AA contrast at 14px (see .mrsc-btn-primary note) */ .mrsc-widget .mrsc-summary-totals .row.discount .value { color: var(--mrsc-primary-dark); font-weight: 600; } .mrsc-widget .mrsc-summary-totals .row.total { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--mrsc-card-border); align-items: baseline; } .mrsc-widget .mrsc-summary-totals .row.total .label { color: var(--mrsc-ink-strong); font-weight: 600; font-size: 16px; } .mrsc-widget .mrsc-summary-totals .row.total .value { color: var(--mrsc-primary); font-family: var(--mrsc-font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; line-height: 1.1; } /* Account holder + payment use the same card chrome as the Order Summary above so the Review page reads as a stack of three matched cards. */ /* Review-page sections (Account holder, Payment). Demoted from carded chrome to bare blocks separated by a single hairline rule, so the Order Summary card stays the only visual primary on the page. Three matched cards stacked vertically was hierarchy-flat noise. */ .mrsc-widget .mrsc-section { margin: 0; padding: 24px 0 8px; background: transparent; border: 0; border-top: 1px solid var(--mrsc-card-border); border-radius: 0; } .mrsc-widget .mrsc-section:first-of-type { border-top: 0; padding-top: 8px; } .mrsc-widget .mrsc-section-title { margin: 0 0 16px; font-family: var(--mrsc-font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--mrsc-ink-strong); } .mrsc-widget .mrsc-section-lede { margin: 0 0 16px; color: var(--mrsc-ink-soft); font-size: var(--mrsc-fs-meta); } .mrsc-widget .mrsc-kv { display: grid; grid-template-columns: 120px auto; gap: 8px 20px; margin: 0; font-size: 14px; justify-content: start; } .mrsc-widget .mrsc-kv dt { color: var(--mrsc-ink-soft); font-weight: 400; } .mrsc-widget .mrsc-kv dd { margin: 0; color: var(--mrsc-ink-strong); font-weight: 500; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .mrsc-widget .mrsc-acct { font-size: var(--mrsc-fs-meta); /* v10.42.21 - same font as the rest of the bank block; tabular-nums * keeps each digit the same width. * v10.42.46 - dropped letter-spacing. Even 0.02em adds a half-character * gap on the LEFT of the first digit, which shifts the value rightward * vs the Bank / Account name rows above it. Removing the spacing * snaps the left edges of every value into one clean column. */ font-variant-numeric: tabular-nums; } /* Compact KV grid on narrow viewports. */ @media (max-width: 560px) { .mrsc-widget .mrsc-kv { grid-template-columns: 1fr; gap: 4px; } .mrsc-widget .mrsc-kv dt { color: var(--mrsc-ink-soft); margin-top: 8px; font-size: 12px; } .mrsc-widget .mrsc-kv dt:first-of-type { margin-top: 0; } .mrsc-widget .mrsc-summary { padding: 20px; } } .mrsc-widget .mrsc-tcs { margin: 24px 0 12px; padding: 4px 0; border: 0; border-radius: 0; background: transparent; } .mrsc-widget .mrsc-tcs summary { cursor: pointer; font-weight: 500; color: var(--mrsc-ink-soft); font-size: var(--mrsc-fs-meta); list-style: none; text-decoration: underline; text-decoration-color: var(--mrsc-line); text-underline-offset: 4px; } .mrsc-widget .mrsc-tcs summary::-webkit-details-marker { display: none; } .mrsc-widget .mrsc-tcs summary::before { content: "›"; display: inline-block; margin-right: 8px; color: var(--mrsc-muted); transition: transform .15s; } .mrsc-widget .mrsc-tcs[open] summary::before { transform: rotate(90deg); } .mrsc-widget .mrsc-tcs h4 { margin: 14px 0 4px; font-size: var(--mrsc-fs-meta); color: var(--mrsc-ink); } .mrsc-widget .mrsc-tcs p { margin: 0 0 8px; font-size: var(--mrsc-fs-meta); color: var(--mrsc-ink-soft); line-height: 1.55; } /* Inline policy links shown between the T&Cs accordion and the consent * checkbox. Reads like supporting copy, not a primary CTA. */ .mrsc-widget .mrsc-policy-links { margin: 16px 0 4px; font-size: var(--mrsc-fs-meta); color: var(--mrsc-ink-soft); line-height: 1.55; } .mrsc-widget .mrsc-policy-links a { /* v10.42.46 - force font-size + line-height to inherit so a theme * link rule can't shrink them out of step with the surrounding * "By registering you agree to our…" copy. * v10.44.42 - primary-dark: bright #E81F76 on white is 4.29:1, * under the 4.5:1 AA bar at body-text size. */ font-size: inherit; line-height: inherit; font-family: inherit; color: var(--mrsc-primary-dark); text-decoration: underline; text-underline-offset: 3px; } .mrsc-widget .mrsc-policy-links a:hover { color: var(--mrsc-primary-strong, var(--mrsc-primary)); } /* ---------- Buttons ---------- Back on the left, primary CTA on the right. Classic form-wizard pattern that reads as "go back" / "go forward" at the page edges. */ .mrsc-widget .mrsc-actions { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 40px; flex-wrap: wrap; } .mrsc-widget .mrsc-actions-stack { justify-content: flex-start; margin-top: 16px; } /* Buttons - v10.30.1: geometry (padding, radius, weight) pulled 1:1 from the live Elementor kit (post-7.css `.elementor-kit-7 .elementor-button`), BUT tracking dialled back. The brand kit's 1.25 px letter-spacing is calibrated for UPPERCASE marketing CTAs ("BOOK NOW", "JOIN US"); the widget uses sentence case ("Add someone", "Continue") so the same tracking visibly stretches the lowercase letters. We keep just enough tracking to match body (0.25 px) so buttons sit in the same typographic system. */ .mrsc-widget .mrsc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* room for a future leading icon */ font-family: var(--mrsc-font-body); font-weight: 700; font-size: 13px; line-height: 1.2; /* descenders still breathe - UPPERCASE has no descenders but the line-box sizing keeps button height stable across mixed-case future labels. */ letter-spacing: 1.25px; /* brand kit tracking - restored now that labels render UPPERCASE. */ text-transform: uppercase; /* CTAs use ALL CAPS to match every other button on mokarangers.mu. Source strings stay sentence case in HTML so screen readers say whole words, not letter-by-letter. */ padding: 16px var(--mrsc-btn-padding-x); min-width: 140px; border-radius: var(--mrsc-btn-radius); border: 1px solid var(--mrsc-card-border); background: #fff; color: var(--mrsc-ink-strong); cursor: pointer; transition: background .12s, border-color .12s, color .12s; } @media (max-width: 1024px) { .mrsc-widget .mrsc-btn { font-size: 12.5px; letter-spacing: 1.15px; padding: 15px 28px; } } @media (max-width: 767px) { .mrsc-widget .mrsc-btn { font-size: 12px; letter-spacing: 1.05px; padding: 14px 26px; } } .mrsc-widget .mrsc-btn:hover { border-color: var(--mrsc-ink-strong); } /* Brand-pink focus ring for keyboard users - replaces UA default. */ .mrsc-widget .mrsc-btn:focus-visible { outline: 2px solid var(--mrsc-primary); outline-offset: 2px; } .mrsc-widget .mrsc-btn-primary { /* v10.44.42 - WCAG AA: white on #E81F76 is 4.29:1, below the 4.5:1 bar for normal-size text (button labels are 13-16px; "large text" starts at 14pt = ~18.7px bold). The darker brand token #C81862 gives ~5.0:1 with white at any size. Bright #E81F76 stays the accent for prices and totals where it renders at large-text size. */ background: var(--mrsc-primary-dark); color: #fff; border-color: var(--mrsc-primary-dark); } /* v10.44.63 - hover used to flip to ink-strong, which disappears against the site's dark navy on the intro screen (the only step whose CTAs sit on the page background rather than a white card). Keep the AA fill and signal hover with a brand-pink glow ring + lift: visible on white AND navy, no off-palette colour, contrast unchanged at 5.0:1. */ .mrsc-widget .mrsc-btn-primary:hover { background: var(--mrsc-primary-dark); border-color: var(--mrsc-primary-dark); color: #fff; box-shadow: 0 0 0 3px rgba(232, 31, 118, 0.32); transform: translateY(-1px); } .mrsc-widget .mrsc-btn-primary:disabled { background: var(--mrsc-muted); border-color: var(--mrsc-muted); color: #fff; cursor: not-allowed; } .mrsc-widget .mrsc-btn-ghost { background: transparent; color: var(--mrsc-primary); border-color: var(--mrsc-primary); } /* v10.44.63 - hover fill was bright #E81F76 (white text 4.29:1, below the 4.5:1 AA bar at button-label sizes); primary-dark gives 5.0:1, matching the primary button's base. */ .mrsc-widget .mrsc-btn-ghost:hover { background: var(--mrsc-primary-dark); border-color: var(--mrsc-primary-dark); color: #fff; } /* ---------- Done-page change list (v10.38.0) ---------- * Edit-mode confirmation page surfaces the backend's humanised * change summary as a tidy list under the body copy. */ .mrsc-widget .mrsc-change-list { margin: 12px 0 0; padding-left: 20px; font-size: var(--mrsc-fs-meta); line-height: 1.5; color: var(--mrsc-ink); } .mrsc-widget .mrsc-change-list li { margin: 4px 0; } /* ---------- Inline field error (v10.37.0) ---------- * Rendered next to inputs that fail blur-time validation. Pink ink, * brand-aligned, mirrors the .mrsc-error banner palette. The input * itself picks up a pink border via .mrsc-input-invalid. */ .mrsc-widget .mrsc-field-error { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; /* v10.40.45 - round-23 a11y Critical: --mrsc-primary (#E81F76) * fails WCAG AA contrast (4.30:1 on white) at 13px font weight 500. * --mrsc-primary-dark (#C81862) hits 5.43:1, passing AA. Field * errors are the most accessibility-sensitive surface in the * form - a user with mild low vision, glaucoma, or sun glare on * a phone can't read the OLD pink at all. Brand identity is * preserved (still recognisably MR pink), legibility passes. */ color: var(--mrsc-primary-dark); font-weight: 500; } .mrsc-widget .mrsc-input-invalid, .mrsc-widget input.mrsc-input-invalid:focus { border-color: var(--mrsc-primary) !important; box-shadow: 0 0 0 1px var(--mrsc-primary) !important; } /* ---------- Branded confirm modal (v10.37.0) ---------- * Replaces window.confirm at the two destructive-action sites * (switch mode, remove member). Centered card, brand palette only, * cancel + confirm buttons inheriting .mrsc-btn / .mrsc-btn-primary. * Body scroll lock omitted intentionally - short prompts, the user * can see the underlying form context. */ .mrsc-widget ~ .mrsc-modal-overlay, .mrsc-modal-overlay { position: fixed; inset: 0; background: rgba(16, 24, 32, 0.55); display: flex; align-items: center; justify-content: center; /* v10.40.48 - round-25 L1: respect safe-area-insets on notched * iPhones so the modal backdrop's tap-zone doesn't sit under * the home indicator (where iOS interprets the swipe as app * switching). max(20px, env(...)) preserves the design padding * on non-notched devices. */ padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); z-index: 1000; animation: mrsc-modal-fade .15s ease-out; } @keyframes mrsc-modal-fade { from { opacity: 0; } to { opacity: 1; } } .mrsc-modal { background: #fff; border-radius: var(--mrsc-block-radius, 12px); padding: 28px 28px 22px; max-width: 440px; width: 100%; box-shadow: 0 20px 48px rgba(16, 24, 32, 0.25); /* v10.39: modal is appended to document.body, OUTSIDE the * .mrsc-widget scope where --mrsc-font-body is declared. The * literal font-family here ensures the brand kit renders even * when the CSS variable isn't resolvable in scope. CentralSans * is the brand body face; fallbacks match the in-widget stack. */ font-family: 'CentralSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: var(--mrsc-ink-strong, #101820); } .mrsc-modal-msg { margin: 0 0 22px; font-size: 16px; line-height: 1.5; } .mrsc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .mrsc-modal-actions .mrsc-btn { min-width: 100px; } /* v10.40.14: dedicated modal button styles - un-scoped so they apply * even though the modal lives outside .mrsc-widget. Avoids the WP * theme overriding the buttons (which was rendering Cancel as a * solid pink filled button and Remove as a dark navy with mismatched * outline). Mirrors the in-widget brand button shape and tokens. */ .mrsc-modal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 108px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: 999px; font-family: 'CentralSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; cursor: pointer; background: #fff; color: #101820; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s; } .mrsc-modal-btn:focus-visible { outline: 2px solid #E81F76; outline-offset: 2px; } .mrsc-modal-btn:active { transform: translateY(1px); } /* Ghost / Cancel - outlined, subtle. Default focus target on destructive * dialogs so Enter cancels by default. * * v10.40.21 - !important on background/color/border because the modal * lives at document.body (outside .mrsc-widget) and WP themes * (Elementor "Hello", others) ship a global `button { background: var(--brand-pink) }` * style that beats class selectors. Specificity-bumping with * `.mrsc-modal .mrsc-modal-btn-ghost` isn't enough on every theme; * !important is the defensive option for these three properties only. * We don't !important box-shadow / transitions because those are * cosmetic and worth letting the theme nudge if it wants. */ .mrsc-modal-btn-ghost, button.mrsc-modal-btn-ghost, .mrsc-modal .mrsc-modal-btn-ghost, .mrsc-modal-actions button.mrsc-modal-btn-ghost { background: #fff !important; color: #4B5563 !important; border: 1px solid #E5E7EB !important; box-shadow: none !important; } .mrsc-modal-btn-ghost:hover, button.mrsc-modal-btn-ghost:hover, .mrsc-modal .mrsc-modal-btn-ghost:hover, .mrsc-modal-actions button.mrsc-modal-btn-ghost:hover { background: #FAFAF7 !important; border-color: #101820 !important; color: #101820 !important; } /* Primary - brand pink fill. Used for non-destructive confirm. */ .mrsc-modal-btn-primary, button.mrsc-modal-btn-primary { background: #E81F76; color: #fff; border-color: #E81F76; } .mrsc-modal-btn-primary:hover, button.mrsc-modal-btn-primary:hover { background: #B81768; border-color: #B81768; color: #fff; } /* Destructive - keeps the brand pink fill (we don't have a red token) * but adds a clear visual warning: thicker shadow, subtle inset glow so * it reads as "decisive" rather than "happy path". */ .mrsc-modal-btn-destructive, button.mrsc-modal-btn-destructive { background: #E81F76; color: #fff; border-color: #E81F76; box-shadow: 0 4px 14px rgba(232, 31, 118, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .mrsc-modal-btn-destructive:hover, button.mrsc-modal-btn-destructive:hover { background: #B81768; border-color: #B81768; color: #fff; box-shadow: 0 6px 18px rgba(184, 23, 104, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.12); } @media (max-width: 480px) { .mrsc-modal { padding: 22px 20px 18px; } .mrsc-modal-actions { flex-direction: column-reverse; } .mrsc-modal-actions .mrsc-btn, .mrsc-modal-actions .mrsc-modal-btn { width: 100%; } } /* ---------- Errors (banner fallback) ---------- * Brand-palette only (v10.32.0). Was #FDF2F1 / #F1C7C5 / #B3261E - all * off-palette. Now: cream bg + pink edge + ink-strong text, matching * the .mrsc-callout--warn pattern so error and warning callouts share * a visual language. */ .mrsc-widget .mrsc-error { margin: 16px 0; padding: 14px 18px; background: var(--mrsc-bg); border: 1px solid var(--mrsc-primary); border-radius: var(--mrsc-block-radius); font-size: var(--mrsc-fs-meta); color: var(--mrsc-ink-strong); } /* Soft variant for non-blocking informational messages like "still loading…" */ .mrsc-widget .mrsc-error.mrsc-error-soft { background: var(--mrsc-bg); border-color: var(--mrsc-line); color: var(--mrsc-ink-soft); } /* v10.40.51 - round-26 H1: bootstrap staleness banner. Surfaced * above the form when /bootstrap.staleness or the inline timestamp * shows the snapshot is >6h old. Distinct from .mrsc-error so it * doesn't read as a hard failure - amber tint signals "informational". */ .mrsc-widget .mrsc-staleness { margin: 12px 0; padding: 12px 16px; background: #FEF3C7; border: 1px solid #F59E0B; border-radius: var(--mrsc-block-radius); font-size: 13px; line-height: 1.45; color: #78350F; } /* ---------- Spinner - used on disabled CTAs while in-flight ---------- */ .mrsc-widget .mrsc-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: mrsc-spin .7s linear infinite; vertical-align: -2px; } /* Standalone loading spinner for full-page states (edit-loading panel). */ .mrsc-widget .mrsc-spinner-large { width: 32px; height: 32px; border-width: 3px; color: var(--mrsc-primary); vertical-align: middle; } @keyframes mrsc-spin { to { transform: rotate(360deg); } } /* Screen-reader-only text - accompanies the spinner so assistive tech still hears "Loading" / "Sending" while sighted users see just the icon. */ .mrsc-widget .mrsc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* v10.39: removed duplicate .mrsc-field-error rule that used the * non-brand red token --mrsc-error (#B3261E). Canonical rule lives * above at line ~1349 and uses brand pink --mrsc-primary. */ /* Flash highlight applied for ~1.4s when validation focuses an offending field. * v10.44.17 - bumped specificity + !important on outline because the generic * `.mrsc-widget select:focus { outline: 0 }` rule (line ~786) was winning the * cascade when the validation focused a SELECT, leaving the offending field * invisible to the parent. Background tint + ring shadow stay regardless of * focus state so the highlight is visible across input / select / textarea. */ .mrsc-widget .mrsc-flash, .mrsc-widget .mrsc-flash:focus { outline: 2px solid var(--mrsc-primary) !important; outline-offset: 2px !important; background-color: rgba(232, 31, 118, 0.06) !important; animation: mrsc-flash-pulse 1.4s ease-out; } @keyframes mrsc-flash-pulse { 0% { box-shadow: 0 0 0 0 rgba(232, 31, 118, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(232, 31, 118, 0.12); } 100% { box-shadow: 0 0 0 0 rgba(232, 31, 118, 0); } } /* ---------- Done page ---------- * v10.33.0 cleanup: dropped redundant card chrome on .mrsc-done-payment * and redundant h3 overrides on .mrsc-done-recap / .mrsc-done-payment - * both sections render `

`, so the shared section pattern (used by * review + welcome) now governs spacing, borders, and heading scale. * Done page reads with the same visual rhythm as every other page. / .mrsc-widget .mrsc-done { padding: 0 0 40px; } .mrsc-widget .mrsc-done .mrsc-eyebrow { margin-bottom: 16px; } .mrsc-widget .mrsc-done h2 { font-family: var(--mrsc-font-display); color: var(--mrsc-ink-strong); margin: 0 0 16px; font-size: var(--mrsc-fs-h2); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; } .mrsc-widget .mrsc-done p { color: var(--mrsc-ink-soft); / v10.44.97 - was --mrsc-fs-lead (20px), then body (16px); the club's * 4-paragraph launch copy reads tighter at the smaller meta size (14px). / font-size: var(--mrsc-fs-meta); line-height: 1.6; max-width: 64ch; margin: 0 0 12px; } / Recap + payment are now inline sections - no border-top, no card bg, * no own padding. The inner
drives the * visual rhythm (border-top from .mrsc-section, h3 from .mrsc-section-title). / .mrsc-widget .mrsc-done-recap, .mrsc-widget .mrsc-done-payment { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; } .mrsc-widget .mrsc-done-payment dl { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 0 0 18px; font-size: var(--mrsc-fs-meta); } .mrsc-widget .mrsc-done-payment dt { color: var(--mrsc-ink-soft); } .mrsc-widget .mrsc-done-payment dd { margin: 0; color: var(--mrsc-ink); font-weight: 600; font-variant-numeric: tabular-nums; } .mrsc-widget .mrsc-done-payment .mrsc-reference { color: var(--mrsc-primary); font-size: var(--mrsc-fs-lead); / v10.42.46 - removed letter-spacing 0.02em (shifted left edge * out of column with the bank/account-name rows above). / } .mrsc-widget .mrsc-done-payment .mrsc-acct { / Inherits font-family from the rest of the .mrsc-done-payment block. * tabular-nums keeps grouped digits aligned with the other dd rows. / font-size: var(--mrsc-fs-meta); font-weight: 600; font-variant-numeric: tabular-nums; / v10.42.46 - same fix as the review-page .mrsc-acct above: * letter-spacing was nudging the first digit out of column. / user-select: all; cursor: text; } .mrsc-widget .mrsc-done-payment .mrsc-payment-note { font-size: var(--mrsc-fs-meta); color: var(--mrsc-ink-soft); font-style: italic; margin: 0; } / Done-page waitlist callout - base styles come from .mrsc-callout above. This block only overrides text-alignment (the done page is centered). / .mrsc-widget .mrsc-done-waitlist { text-align: left; } / Inline "tag" spans used in review and done summaries. Replaces inline style= attributes so the CSP can drop 'unsafe-inline' on style-src. / .mrsc-widget .mrsc-tag, .mrsc-widget .mrsc-tag-muted, .mrsc-widget .mrsc-tag-accent, .mrsc-widget .mrsc-tag-bold { font-style: normal; } .mrsc-widget .mrsc-tag-muted { color: var(--mrsc-muted); font-weight: 400; } .mrsc-widget .mrsc-tag-accent { color: var(--mrsc-primary); } .mrsc-widget .mrsc-tag-bold { font-weight: 600; } .mrsc-widget .mrsc-acct.mrsc-acct-accent { color: var(--mrsc-primary); } .mrsc-widget .mrsc-bank-note { margin-top: 0.75rem; } / "Copy" buttons on the Done page bank/reference rows. Compact + outline-only so they don't dominate the layout, but at min 44 px tall for WCAG 2.5.8. / .mrsc-widget .mrsc-copy { margin-left: 10px; / Min 44 px touch target - was 6 × 14 = ~30 px tall, failed. / min-height: 44px; padding: 10px 16px; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; background: transparent; color: var(--mrsc-ink-strong); border: 1px solid var(--mrsc-card-border); display: inline-flex; align-items: center; border-radius: var(--mrsc-field-radius); cursor: pointer; transition: background .15s, color .15s, border-color .15s; vertical-align: middle; } .mrsc-widget .mrsc-copy:hover { background: var(--mrsc-ink); color: #fff; border-color: var(--mrsc-ink); } .mrsc-widget .mrsc-copy.copied { background: var(--mrsc-primary); color: #fff; border-color: var(--mrsc-primary); } / ---------- Auto-save indicator ---------- / / v10.44.47 - the pill is reparented to at runtime (escapes transformed Elementor ancestors that break position:fixed), so the selectors must match it OUTSIDE .mrsc-widget too. / .mrsc-save-indicator, .mrsc-widget .mrsc-save-indicator { position: fixed; / v10.40.48 - round-25 H3: use env(safe-area-inset-) so the Saved pill clears the iPhone home-indicator AND the Android * WhatsApp WebView bottom toolbar. The plugin's viewport meta * already declares viewport-fit=cover, so safe-area-insets * resolve to non-zero values on devices that need them. Without * this fix, the draft-saved feedback was invisible to a portion * of WhatsApp WebView users - the dominant entry point for * Mauritian parents. / bottom: max(18px, env(safe-area-inset-bottom, 18px)); right: max(18px, env(safe-area-inset-right, 18px)); background: var(--mrsc-ink-strong); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s; pointer-events: none; z-index: 9999; } .mrsc-widget .mrsc-save-indicator.show { opacity: .95; transform: translateY(0); } / ---------- Reduced motion ---------- / @media (prefers-reduced-motion: reduce) { .mrsc-widget , .mrsc-widget ::before, .mrsc-widget ::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; } } /* ---------- Print (for parents who print the done page) ---------- / @media print { .mrsc-widget { background: #fff; color: #000; border: 0; max-width: 100%; } .mrsc-widget .mrsc-stepper, .mrsc-widget .mrsc-save-indicator, .mrsc-widget .mrsc-actions, .mrsc-widget [data-step]:not([data-step="done"]) { display: none !important; } .mrsc-widget .mrsc-main { padding: 16px 24px; } .mrsc-widget .mrsc-done-payment { background: #fff; border: 1px solid #000; } .mrsc-widget .mrsc-done-payment .mrsc-acct { background: #fff; border: 0; padding: 0; } } / ---------- Responsive ---------- / @media (max-width: 900px) { .mrsc-widget .mrsc-main { padding: 40px 6% 60px; } .mrsc-widget .mrsc-stepper { padding: 0 6%; } } @media (max-width: 600px) { .mrsc-widget .mrsc-main { padding: 32px 20px 56px; } .mrsc-widget .mrsc-stepper { padding: 0 14px; } .mrsc-widget .mrsc-step h2 { font-size: 28px; } .mrsc-widget .mrsc-done h2 { font-size: 30px; } / Mode chooser stacks vertically - 2 pill cards side-by-side gets too cramped under ~520px and the strong/small lines wrap weirdly. / .mrsc-widget .mrsc-mode { grid-template-columns: 1fr; gap: 12px; } .mrsc-widget .mrsc-form .mrsc-row, .mrsc-widget .mrsc-member-card .mrsc-row, .mrsc-widget .mrsc-member-card .mrsc-row.mrsc-row-3 { grid-template-columns: 1fr; gap: 14px; } .mrsc-widget .mrsc-member-card { padding: 20px 16px; } / v10.44.44 - mobile uniforms: info (name + price + note) spans the full width on its own row; the SIZE + QTY pair share the second row 50/50. Price lives inside .mrsc-uniform-info now, so it stacks under the name with no grid pinning needed. / .mrsc-widget .mrsc-uniform-line { grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 10px; } .mrsc-widget .mrsc-uniform-line .mrsc-uniform-info { grid-column: 1 / -1; } / readonly rows (Member Shirt): keep name left, price right, same row / .mrsc-widget .mrsc-uniform-line.readonly { grid-template-columns: 1fr auto; } .mrsc-widget .mrsc-uniform-line.readonly .mrsc-uniform-price { grid-column: 2; } / "× 1" static label collides with the price tag on narrow viewports - hide it; "Included" carries the meaning. / .mrsc-widget .mrsc-uniform-static { display: none; } / Mobile stepper: replace the per-step tab labels with a single "Step N of M · Current step name" line + a thin progress bar. Way more legible than scroll-fallback tabs that get the last label clipped behind the right edge. v10.42.22 - logo above, counter below, both horizontally centred. / .mrsc-widget .mrsc-stepper { flex-direction: column; align-items: center; justify-content: center; padding: 12px 16px; gap: 10px; overflow: visible; } .mrsc-widget .mrsc-stepper-logo { padding: 2px 0; } .mrsc-widget .mrsc-stepper-logo img { height: 36px; } .mrsc-widget .mrsc-stepper ol { display: none; } .mrsc-widget .mrsc-stepper-counter { display: flex; height: auto; padding: 0; width: 100%; } .mrsc-widget .mrsc-stepper::after { display: none; } .mrsc-widget .mrsc-actions { flex-direction: column-reverse; align-items: stretch; } / Primary + default-secondary (Back/Skip) buttons stretch full width on mobile so the bottom nav reads as a thumb-friendly block. Ghost buttons (Add someone, Skip-this-step style secondary actions) stay content-sized + left-aligned so a short label doesn't sit in the middle of a 480 px empty pill. / .mrsc-widget .mrsc-actions .mrsc-btn:not(.mrsc-btn-ghost) { width: 100%; text-align: center; } .mrsc-widget .mrsc-actions .mrsc-btn-ghost { align-self: flex-start; } / Default secondary button (Back/Skip) takes full width too - override the desktop 14/24 padding to match the standard btn padding scale. / .mrsc-widget .mrsc-actions .mrsc-btn:not(.mrsc-btn-primary):not(.mrsc-btn-ghost) { padding: 14px 24px; } .mrsc-widget .mrsc-review-item { grid-template-columns: 1fr; gap: 6px; } .mrsc-widget .mrsc-review-item .price { text-align: left; } .mrsc-widget .mrsc-bank dl { grid-template-columns: 1fr; } / Done payment block has no card chrome any more - only the dl needs * to collapse to one column on phones. / .mrsc-widget .mrsc-done-payment dl { grid-template-columns: 1fr; gap: 4px 0; } .mrsc-widget .mrsc-done-payment dt { margin-top: 8px; } .mrsc-widget .mrsc-bank { padding: 20px 16px; } / Copy buttons stack below the value on narrow widths so they don't get pushed off-screen / .mrsc-widget .mrsc-bank .mrsc-acct + .mrsc-copy, .mrsc-widget .mrsc-done-payment .mrsc-acct + .mrsc-copy { margin-left: 0; margin-top: 6px; } .mrsc-widget .mrsc-bank dd, .mrsc-widget .mrsc-done-payment dd { display: flex; flex-wrap: wrap; align-items: center; } } / ---------- Overflow guards - keep long content from breaking the layout ---------- / .mrsc-widget .mrsc-acct { word-break: break-all; max-width: 100%; } .mrsc-widget .mrsc-review-item .name, .mrsc-widget .mrsc-review-item .meta { word-break: break-word; } .mrsc-widget select, .mrsc-widget input { min-width: 0; } / lets grid children shrink below content size / / Programmatic focus (we move focus on goTo for screen readers) shouldn't show a visible outline - only keyboard nav should. Applied to any element with explicit tabindex=-1, plus headings. / .mrsc-widget h2:focus:not(:focus-visible), .mrsc-widget h3:focus:not(:focus-visible), .mrsc-widget [tabindex="-1"]:focus, .mrsc-widget [tabindex="-1"]:focus:not(:focus-visible), .mrsc-widget h2:focus, .mrsc-widget h3:focus { outline: none; box-shadow: none; } / Explicit focus indicators for elements whose native ring CSS suppresses. / .mrsc-widget .mrsc-tcs summary:focus-visible, .mrsc-widget .mrsc-copy:focus-visible, .mrsc-widget .mrsc-remove:focus-visible { outline: 2px solid var(--mrsc-primary); outline-offset: 2px; } / High-contrast / Windows forced-colors fallback. The stepper's active underline (::after on li) gets a Highlight color so it's perceivable; the gray rail (::after on .mrsc-stepper) survives via CanvasText. */ @media (forced-colors: active) { .mrsc-widget .mrsc-stepper::after { background: CanvasText; forced-color-adjust: none; } .mrsc-widget .mrsc-stepper li.active::after { background: Highlight; } .mrsc-widget .mrsc-stepper-counter-progress::after { background: Highlight; } .mrsc-widget .mrsc-mode .mrsc-radio.selected { box-shadow: inset 0 0 0 2px Highlight; } .mrsc-widget .mrsc-btn-primary:disabled { background: GrayText; border-color: GrayText; } .mrsc-widget :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } }