/** * buyme grouped product - meal info cards, running total, focus-indicator restore. * * RTL is achieved with `direction: rtl` inherited from and with LOGICAL * properties throughout. There is deliberately no `flex-direction: row-reverse` and no `order` * anywhere in this file: both produce the same picture while leaving DOM order unchanged, which * decouples visual order from focus and reading order (requirement I1, two Level A criteria). * * There is also deliberately no `outline: none` anywhere in this file. */ /* ---------------------------------------------------------------- design tokens */ /* Defined on :root, NOT on .cbmi-total/.cbmi-overlay. * * These tokens are consumed by three things that live OUTSIDE both of those elements: the row * triggers (inside the grouped table), the quantity-input focus override (also in the table), * and the forced-colors blocks. Scoping the custom properties to the card/total containers made * `var(--cbmi-focus)` fail to resolve on those selectors, which makes the whole `outline` * shorthand invalid at computed-value time - so it silently reverted to `outline-style: none` * and the focus indicator vanished while the stylesheet still read as if it were there. * Caught by measuring computed style in a real browser, not by reading this file. */ :root { --cbmi-focus: #14213d; --cbmi-surface: #ffffff; --cbmi-ink: #1a1a1a; --cbmi-muted: #4a4a4a; --cbmi-line: #d9d9d9; --cbmi-backdrop: rgba(0, 0, 0, 0.55); --cbmi-radius: 14px; } /* ------------------------------------------------------------- shared focus ring * * An OUTLINE with an offset, not a colour-only change, so the indicator survives a * colour-blind reader and a forced-colors / high-contrast mode. */ .cbmi-trigger:focus-visible, .cbmi-close:focus-visible, .cbmi-card__desc a:focus-visible { outline: 3px solid var(--cbmi-focus); outline-offset: 2px; border-radius: 4px; } @media (forced-colors: active) { .cbmi-trigger:focus-visible, .cbmi-close:focus-visible, .cbmi-card__desc a:focus-visible { outline-color: Highlight; } } /* --------------------------------------------------------------- AMENDMENT B * * Restore a visible focus indicator on the grouped form's quantity inputs. * * The site's DB-resident custom CSS (qlgu_posts ID 104, served inline and LAST in the head) * carries: * .quantity .qty:focus { outline: none !important; border-color: var(--pink) !important; } * which is an SC 2.4.7 Focus Visible failure - Level AA, present in WCAG 2.0, so inside the * IS 5568 binding tier. * * That rule is `!important` and later in source order, so an equal-specificity `!important` * would LOSE to it. This selector is deliberately more specific: * .woocommerce-grouped-product-list .quantity input.qty :focus -> (0,4,1) * against the DB rule's * .quantity .qty :focus -> (0,3,0) * Higher specificity wins between two `!important` declarations regardless of source order. * * The DB rule is NOT edited - this override ships in the child theme with the rest of the * feature, which is what keeps the fix inside the child theme's blast radius. */ .woocommerce-grouped-product-list .quantity input.qty:focus, .woocommerce-grouped-product-list .quantity input.qty:focus-visible { outline: 3px solid var(--cbmi-focus) !important; outline-offset: 2px !important; border-color: var(--cbmi-focus) !important; } @media (forced-colors: active) { .woocommerce-grouped-product-list .quantity input.qty:focus, .woocommerce-grouped-product-list .quantity input.qty:focus-visible { outline-color: Highlight !important; } } /* -------------------------------------------------------------------- triggers */ /* The [hidden] guard is load-bearing. An author rule of `display: inline-flex` beats the UA * stylesheet's `[hidden] { display: none }` regardless of specificity, which would reveal the * triggers before JS had wired them - exactly the dead-control case L5 forbids. */ .cbmi-trigger[hidden] { display: none; } .cbmi-trigger { appearance: none; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; } .cbmi-trigger--name:not([hidden]) { display: inline; text-align: start; /* Enough vertical padding to reach a 44px target without the block-level hit area of the * name swallowing the adjacent info button (requirement H4). */ padding-block: 10px; padding-inline-end: 4px; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-thickness: 1px; } .cbmi-trigger--name:hover { text-decoration-style: solid; } .cbmi-trigger--info:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; /* 44 x 44 CSS px build target (H2). Not a binding criterion - WCAG 2.0 has no target-size * criterion at all - but it is a padding value, so it is built anyway. */ inline-size: 44px; block-size: 44px; margin-inline-start: 2px; vertical-align: middle; color: var(--cbmi-muted, #4a4a4a); border-radius: 50%; } .cbmi-trigger--info:hover { color: var(--cbmi-ink, #1a1a1a); background: rgba(0, 0, 0, 0.06); } /* ---------------------------------------------------------------- running total */ .cbmi-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; margin-block: 1em 0; padding-block: 0.75em; border-block-start: 1px solid var(--cbmi-line); font-size: 1.05em; } .cbmi-total__label { font-weight: 700; color: var(--cbmi-ink); } .cbmi-total__value { font-weight: 700; color: var(--cbmi-ink); /* A price is an LTR run inside an RTL paragraph. in the markup isolates it so the * shekel sign and any separators cannot be reordered by the bidi algorithm (I3). */ unicode-bidi: isolate; } /* ---------------------------------------------------------------------- overlay */ .cbmi-overlay[hidden] { display: none; } .cbmi-overlay:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; padding: 1rem; } .cbmi-backdrop { position: fixed; inset: 0; background: var(--cbmi-backdrop); } /* ------------------------------------------------------------------------- card */ .cbmi-card { position: relative; inline-size: min(560px, 100%); /* Content-driven height: max-height plus scrolling, never a fixed height with * overflow:hidden, so a long description at 200% zoom or under a text-spacing user * stylesheet scrolls rather than clips (J6). */ max-block-size: min(86vh, 900px); overflow-y: auto; background: var(--cbmi-surface); color: var(--cbmi-ink); border-radius: var(--cbmi-radius); /* Space reserved for the close control rather than overlaying content, so a focused * element cannot end up hidden behind it (F5). */ padding: 3.5rem 1.5rem 1.5rem; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); /* If a focused element would scroll under the close control, keep it clear. */ scroll-padding-block-start: 3.5rem; animation: cbmi-card-in 160ms ease-out; } @keyframes cbmi-card-in { from { opacity: 0; transform: translateY(8px); } } .cbmi-close { position: absolute; inset-block-start: 0.75rem; /* FIXED INPUT 5: close control at the TOP-LEFT. In an RTL context `inline-end` resolves to * left, which is the true mirror of the LTR top-right convention. Expressed logically, not * as `left: 0`, so it does not rot if anything ever renders LTR. */ inset-inline-end: 0.75rem; display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 0; appearance: none; background: none; border: 1px solid transparent; border-radius: 50%; color: var(--cbmi-muted); font: inherit; cursor: pointer; } .cbmi-close:hover { color: var(--cbmi-ink); background: rgba(0, 0, 0, 0.06); } .cbmi-card__title { margin: 0 0 0.75rem; font-size: 1.35rem; line-height: 1.35; color: var(--cbmi-ink); } .cbmi-card__image { display: block; /* Aspect preserved, never cropped: no object-fit crop, no fixed box. */ max-inline-size: min(480px, 100%); max-block-size: 60vh; block-size: auto; inline-size: auto; margin: 0 0 1rem; border-radius: 10px; /* Images are never mirrored in RTL - no transform here by design (I6). */ } .cbmi-card__desc { margin: 0 0 1rem; color: var(--cbmi-muted); line-height: 1.7; } .cbmi-card__desc p { margin: 0 0 0.75em; } .cbmi-card__desc p:last-child { margin-block-end: 0; } .cbmi-card__price { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--cbmi-ink); unicode-bidi: isolate; } /* ------------------------------------------------------- small viewports: sheet */ @media (max-width: 600px) { .cbmi-overlay:not([hidden]) { align-items: flex-end; padding: 0; } .cbmi-card { inline-size: 100%; max-block-size: 88vh; border-start-start-radius: var(--cbmi-radius); border-start-end-radius: var(--cbmi-radius); border-end-start-radius: 0; border-end-end-radius: 0; padding-block-end: max(1.5rem, env(safe-area-inset-bottom, 0px)); animation: cbmi-sheet-in 200ms ease-out; } } @keyframes cbmi-sheet-in { from { transform: translateY(100%); } } /* --------------------------------------------------------------- reduced motion * * 0.01ms, not 0. At a zero duration some engines never fire `transitionend`. Nothing in this * build gates hiding or focus restoration on that event, but the value is kept safe anyway (E3). */ @media (prefers-reduced-motion: reduce) { .cbmi-card { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }