/* * EchoAI Answer Layer: readers talk back (3.0.0, owner rounds 33, 36, 37). Markup: lib/readers.php. * * One quiet block in three places: the end of a guide (inside its end zone, on the reading column), * the end of a question (before the contact banner) and the catalogue (before its banner, and under * «nothing found»). Colours are the brand contract's roles only, so every design direction paints it * in its own colours; buttons take the direction's --ea-btn-radius and fields its --ea-radius. * Every rule is scoped `:is(#echoai-scope,.ea-talk,.ea-ask)`: the id is never printed, it only lifts the * rule to id weight, so a theme's button, textarea and input rules do not reach in, on the 3.0.0 pages * and on a question the 2.96 skin still draws alike. * Since the design pass of 11.10 (row 188) the buttons and fields ease between their states and a form grows open (below); * under reduced motion nothing here moves. */ :is(#echoai-scope,.ea-talk,.ea-ask)[hidden], :is(#echoai-scope,.ea-talk,.ea-ask) [hidden]{display:none!important} /* our font, never the template's: at the end of a guide the block sits in .ea-end, outside the article, and inherited the theme's (system-ui on Hello, Manrope on Twenty Twenty-Five; QA2 judge S6). --ea-font is the brand's, on :root. */ :is(#echoai-scope,.ea-talk,.ea-ask){ box-sizing:border-box;margin:var(--eaf-s-2xl,44px) 0 0;padding:var(--eaf-s-md,22px) 0 0; border-block-start:1px solid var(--ea-line);font-family:var(--ea-font,inherit);font-size:var(--eaf-fs-ui,15px);line-height:var(--eaf-lh-ui,1.5); color:var(--ea-ink);text-align:start} .ea-talk + :is(#echoai-scope,.ea-ask){margin-block-start:var(--eaf-s-md,22px)} :is(#echoai-scope,.ea-talk,.ea-ask) *{box-sizing:border-box} /* the question and its two answers, on one line while they fit */ :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--eaf-s-xs,14px) var(--eaf-s-md,22px)} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__h{margin:0;font-size:var(--eaf-fs-body,18px);line-height:var(--eaf-lh-head,1.35);font-weight:700;color:var(--ea-ink)} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__btns{display:flex;flex-wrap:wrap;gap:var(--eaf-s-2xs,10px)} /* buttons: the catalogue's outlined control, pressed = filled with ink */ :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b{ display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:64px;margin:0;padding:0 var(--eaf-s-md,22px); font:inherit;font-size:var(--eaf-fs-ui,15px);line-height:1.2;font-weight:700;letter-spacing:0;text-transform:none;white-space:normal; color:var(--ea-ink);background:transparent;border:1px solid var(--ea-ink);border-radius:var(--ea-btn-radius,999px);box-shadow:none;cursor:pointer} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b:hover, :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b:focus{color:var(--ea-ink);background:var(--ea-surface-2);border-color:var(--ea-ink)} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b[aria-pressed="true"], :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b[aria-pressed="true"]:hover{color:var(--ea-surface);background:var(--ea-ink);border-color:var(--ea-ink)} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b[aria-disabled="true"]{cursor:default} /* a send on its way (3.2, E-6, Q-11): the button says «שולחים…» and is visibly held, no motion */ :is(#echoai-scope,.ea-talk,.ea-ask) form[aria-busy="true"] button.ea-talk__send{opacity:.72;cursor:progress} :is(#echoai-scope,.ea-talk,.ea-ask) :focus-visible{outline:2px solid var(--ea-focus);outline-offset:3px} /* the fields: an edge a reader can see (ink-mute, not the hairline), the direction's corners */ :is(#echoai-scope,.ea-talk,.ea-ask) :is(.ea-talk__note,.ea-ask__f){display:grid;gap:var(--eaf-s-3xs,4px);max-width:40rem;margin:var(--eaf-s-sm,18px) 0 0} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__l{display:block;margin:var(--eaf-s-2xs,10px) 0 0;font-weight:700;color:var(--ea-ink)} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__hint{margin:0;font-size:var(--eaf-fs-small,14px);color:var(--ea-ink-mute)} :is(#echoai-scope,.ea-talk,.ea-ask) :is(textarea,input).ea-talk__in{ display:block;inline-size:100%;max-inline-size:100%;margin:var(--eaf-s-3xs,4px) 0 0;padding:10px 12px; font:inherit;font-size:max(16px,var(--eaf-fs-ui,15px));line-height:1.5;color:var(--ea-ink);background:var(--ea-surface); border:1px solid var(--ea-ink-mute);border-radius:min(var(--ea-radius,12px),12px);box-shadow:none;resize:vertical} :is(#echoai-scope,.ea-talk,.ea-ask) input.ea-talk__in{min-height:44px;text-align:start} :is(#echoai-scope,.ea-talk,.ea-ask) :is(textarea,input).ea-talk__in[aria-invalid="true"]{border-width:2px;border-color:var(--ea-ink)} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__err{margin:var(--eaf-s-3xs,4px) 0 0;font-size:var(--eaf-fs-small,14px);font-weight:700;color:var(--ea-ink)} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__send{justify-self:start;margin-block-start:var(--eaf-s-xs,14px)} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__st{margin:var(--eaf-s-2xs,10px) 0 0;color:var(--ea-ink-mute)} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__st:empty{display:none} /* 3.8.3 (NB 318, the motion audit's #8): the «sent» line and a field's error rise in (240ms, a 6px slide) where the form folds away, the moment a reader reached us; on the line's arrival or the error's alone (display returns from none), at once under reduced motion */ @media (prefers-reduced-motion:no-preference){ :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__st:not(:empty){animation:ea-talk-rise .24s var(--ea-ease,ease) both} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__err:not([hidden]){animation:ea-talk-rise .24s var(--ea-ease,ease) both} } @keyframes ea-talk-rise{from{opacity:0;translate:0 6px}} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__st:focus{outline:none} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__st:focus-visible{outline:2px solid var(--ea-focus);outline-offset:3px} /* the trap no person sees: clipped to nothing where it stands, out of the tab order, hidden from assistive technology. Never pushed off the page: 10000px toward the inline start is a sideways scroll in a document of the other direction (a Hebrew «כתבו לנו» on an English site, or the reverse; review of round 101, 30.09: 11440px at 1440). */ :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__hp{position:absolute!important;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;opacity:0;pointer-events:none} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* «לא מצאתם את השאלה שלכם? כתבו לנו»: a quiet line, the second half reads as the action */ :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-ask__open{ display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 .35em;min-height:44px;margin:0;padding:0; font:inherit;font-size:var(--eaf-fs-body,18px);line-height:1.35;font-weight:700;letter-spacing:0;text-transform:none;text-align:start;white-space:normal; color:var(--ea-ink);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-ask__open:hover, :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-ask__open:focus{color:var(--ea-ink);background:transparent} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-ask__go{color:var(--ea-accent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-ask__open:hover .ea-ask__go{text-decoration-thickness:2px} /* the catalogue: under «nothing found» the block is part of that panel, not a new section. * The catalogue root's id is written with its hyphen escaped: the same element, the same weight, but the plain * spelling is the signature the self-check (lib/self-check.php, item 25) counts to recognise catalogue.css inside * a merged stylesheet, and eight rules here passed a page whose catalogue.css was lost as ours (mega integration * 29.09; gate a-self-check-marker-the-renderer-no-longer-prints). */ #ea\-answers .ea-cat__none :is(.ea-ask,.ea-close){margin:var(--eaf-s-sm,18px) 0 0;padding:0;border:0} #ea\-answers .ea-cat__none .ea-ask + [data-ea-clear]{margin-block-start:var(--eaf-s-md,22px)} #ea\-answers .ea-close__h{margin:0;font-weight:700;color:var(--ea-ink)} #ea\-answers .ea-close__list{margin:var(--eaf-s-2xs,10px) 0 0;padding:0;list-style:none;display:grid;gap:var(--eaf-s-2xs,10px)} #ea\-answers .ea-close__list li{margin:0;padding:0} #ea\-answers a.ea-close__a{display:inline-block;min-height:24px;font-size:var(--eaf-fs-body,18px);line-height:1.4;color:var(--ea-ink); text-decoration:underline;text-decoration-color:var(--ea-link-underline);text-underline-offset:.2em} #ea\-answers a.ea-close__a:hover{text-decoration-thickness:2px} #ea\-answers > .ea-wrap > .ea-ask{margin-block:var(--eaf-s-2xl,44px) 0} /* 3.2 (owner round 104 Q8): under a guide's questions, «כתבו לנו» with the column's own lane; inside «מה חסר?» and its question field, up to 3 of the guide's questions that match the words, the catalogue's quiet list, right under the field */ .ea-end > :is(#echoai-scope,.ea-ask).ea-col{margin-block:var(--eaf-s-lg,28px) 0} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-close{margin:var(--eaf-s-2xs,10px) 0 0;padding:0;border:0} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-close__h{margin:0;font-size:var(--eaf-fs-small,15px);font-weight:700;color:var(--ea-ink)} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-close__list{margin:var(--eaf-s-3xs,4px) 0 0;padding:0;list-style:none;display:grid;gap:var(--eaf-s-3xs,4px)} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-close__list li{margin:0;padding:0} :is(#echoai-scope,.ea-talk,.ea-ask) a.ea-close__a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--eaf-fs-read,17px);line-height:1.4;color:var(--ea-ink); text-decoration:underline;text-decoration-color:var(--ea-link-underline);text-underline-offset:.2em;overflow-wrap:anywhere} :is(#echoai-scope,.ea-talk,.ea-ask) a.ea-close__a:hover{text-decoration-thickness:2px} @media print{:is(#echoai-scope,.ea-talk,.ea-ask){display:none!important}} /* the reader notice's details under «עוד» (consent v3, tower wave 9): a native disclosure, keyboard and screen reader included */ :is(#echoai-scope,.ea-ask) .ea-ask__more{margin-top:4px} :is(#echoai-scope,.ea-ask) .ea-ask__more>summary{cursor:pointer;text-decoration:underline;text-underline-offset:2px} :is(#echoai-scope,.ea-ask) .ea-ask__more>span{display:block;margin-top:4px} /* ===================================================================================================================== THE DESIGN PASS OF 11.10 (NIGHT-BACKLOG rows 188, 191, 193; the owner's WhatsApp 14:05-14:15 on a live partner's guide). · Every button here eases between its states (colour, ground, edge: 180ms), and a press gives a short squeeze; nothing flashes («מעברים של כפתורים בלחיצה בלי אנימציית מעבר. פשוט הבזקים»). Under reduced motion nothing eases or squeezes. · «כן» and «לא» carry a thumb (row 191: «אייקונים של אגודל למעלה או למטה משהו עדין ונחמד שיעודד אנשים ללחוץ»); the chosen thumb settles in with a small lift. · «לא מצאתם את השאלה שלכם?» is a card (row 193: the right place, a layout, a line that invites, an example in every field, a soft opening): its tile, its title and its action on one line, the invitation under the title, and the form inside the card, one column: the question across, the email at an address's width, the send under the line that says what is kept. The opening itself is assets/readers.js grow(). ===================================================================================================================== */ :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b{gap:8px; transition:background-color .18s cubic-bezier(.2,.7,.2,1),color .18s cubic-bezier(.2,.7,.2,1),border-color .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s cubic-bezier(.2,.7,.2,1),scale .12s ease-out} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b:active:not([aria-disabled="true"]){scale:.96} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__ico{display:block;flex:none;inline-size:16px;block-size:16px;transition:translate .25s cubic-bezier(.34,1.56,.64,1)} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b[aria-pressed="true"] .ea-talk__ico--up{translate:0 -2px} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b[aria-pressed="true"] .ea-talk__ico--down{translate:0 2px} @media (hover:hover){:is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b:not([aria-pressed="true"]):not([aria-disabled="true"]):hover .ea-talk__ico--up{translate:0 -1px}} @media (hover:hover){:is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b:not([aria-pressed="true"]):not([aria-disabled="true"]):hover .ea-talk__ico--down{translate:0 1px}} /* the vote that was not chosen steps back; the chosen one is the filled ink above */ :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b[aria-pressed="false"][aria-disabled="true"]{color:var(--ea-ink-mute);border-color:var(--ea-line)} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-ask__go,:is(#echoai-scope,.ea-talk,.ea-ask) button.ea-ask__open{transition:background-color .18s cubic-bezier(.2,.7,.2,1),color .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s cubic-bezier(.2,.7,.2,1),text-decoration-color .18s} :is(#echoai-scope,.ea-talk,.ea-ask) :is(textarea,input).ea-talk__in{transition:border-color .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s cubic-bezier(.2,.7,.2,1)} /* a field with focus: ONE edge, twice as thick, in the focus colour (the owner's screenshot of 11.10 read the edge plus a halo as a doubled border) */ :is(#echoai-scope,.ea-talk,.ea-ask) :is(textarea,input).ea-talk__in:is(:focus,:focus-visible){outline:none;border-color:var(--ea-focus);box-shadow:inset 0 0 0 1px var(--ea-focus)} :is(#echoai-scope,.ea-talk,.ea-ask) :is(textarea,input).ea-talk__in::placeholder{color:var(--ea-ink-mute);opacity:1} /* the tile, the line and the arrow exist in every place the block is printed; outside a card they are not drawn */ :is(#echoai-scope,.ea-talk,.ea-ask) .ea-ask__tile,:is(#echoai-scope,.ea-talk,.ea-ask) .ea-ask__go > .ea-talk__ico{display:none} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-ask__lead{display:block;flex-basis:100%;margin-block-start:2px;font-size:var(--eaf-fs-small,14px);line-height:var(--eaf-lh-ui,1.5);font-weight:400;color:var(--ea-ink-mute)} /* ---- the card ---- */ .ea-ask:is(#echoai-scope,.ea-ask--card),.ea-cat__side > .ea-ask:is(#echoai-scope,.ea-ask){container-type:inline-size; margin-block-start:var(--eaf-s-xl,36px);padding:var(--eaf-s-md,22px) var(--eaf-s-lg,28px);border:1px solid var(--ea-tint-line,var(--ea-line)); border-radius:min(var(--ea-radius,16px),18px);background:var(--ea-tint-faint,var(--ea-surface-2))} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open{display:grid;inline-size:100%; grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"tile q go" "tile lead go";column-gap:var(--eaf-s-sm,16px);row-gap:2px;align-items:center; min-height:0;padding:0;font-size:var(--eaf-fs-large,18px);text-align:start;color:var(--ea-ink);background:transparent} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open:is(:hover,:focus){background:transparent;color:var(--ea-ink)} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__tile{grid-area:tile;align-self:start;display:grid;place-items:center;inline-size:40px;block-size:40px; border-radius:12px;background:var(--ea-accent-fill);color:var(--ea-on-accent);box-shadow:0 6px 14px -8px rgba(var(--ea-shadow-rgb,20,10,30),.45)} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__tile > .ea-talk__ico{display:block;inline-size:20px;block-size:20px} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__q{grid-area:q;font-size:var(--eaf-fs-large,18px);line-height:var(--eaf-lh-head,1.3);font-weight:800;color:var(--ea-ink)} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__lead{grid-area:lead;margin:0;font-size:var(--eaf-fs-read,15px);color:var(--ea-ink-mute-on-tint,var(--ea-ink-mute))} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__go{grid-area:go;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 var(--eaf-s-md,20px); border-radius:var(--ea-btn-radius,999px);font-size:var(--eaf-fs-ui,15px);font-weight:700;text-decoration:none;white-space:nowrap; background:var(--ea-accent-fill);color:var(--ea-on-accent);box-shadow:0 8px 18px -12px rgba(var(--ea-shadow-rgb,20,10,30),.55)} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__go > .ea-talk__ico{display:block;transition:translate .2s cubic-bezier(.2,.7,.2,1)} [dir="ltr"] :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__go > .ea-talk__ico,:is(.ea-ask--card,.ea-cat__side > .ea-ask)[dir="ltr"]:is(#echoai-scope,.ea-ask) .ea-ask__go > .ea-talk__ico{scale:-1 1} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open:hover .ea-ask__go{background:var(--ea-accent-hover,var(--ea-accent-fill));text-decoration:none} @media (hover:hover){:is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open:hover .ea-ask__go > .ea-talk__ico{translate:-3px 0}} :is(.ea-ask--card,.ea-cat__side > .ea-ask)[dir="ltr"]:is(#echoai-scope,.ea-ask) button.ea-ask__open:hover .ea-ask__go > .ea-talk__ico{translate:3px 0} /* opened, the call to action is gone (the owner's screenshots of 11.10: «כתבו לנו» stayed on screen over the form, a second call that added nothing): the pill folds into a quiet round «close», its arrow turned up, its words still the button's name for a screen reader (font-size 0 keeps them in the accessibility tree); the form's own «שליחת השאלה» is the one action */ :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open[aria-expanded="true"] .ea-ask__go{justify-content:center;gap:0;inline-size:44px;padding:0; font-size:0;background:transparent;color:var(--ea-ink-mute);box-shadow:inset 0 0 0 1px var(--ea-tint-line,var(--ea-line))} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open[aria-expanded="true"] .ea-ask__go > .ea-talk__ico{inline-size:20px;block-size:20px;translate:none} /* the card family (17.10, the owner's 15:04 «למה החץ של הסגירה ממוקם שם?»): open, the fold is the page's one close, a × in the card's top inline-end corner; the arrow turned up (3.3.3) read as «scroll up», not «close» */ :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__go > .ea-talk__ico--x, :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open[aria-expanded="true"] .ea-ask__go > .ea-talk__ico--fwd{display:none} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open[aria-expanded="true"] .ea-ask__go > .ea-talk__ico--x{display:block} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open[aria-expanded="true"] .ea-ask__go{align-self:start;justify-self:end} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open[aria-expanded="true"]:hover .ea-ask__go{background:var(--ea-surface);color:var(--ea-ink)} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open:focus-visible{outline:none} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open:focus-visible .ea-ask__go{outline:2px solid var(--ea-focus);outline-offset:3px} /* the form inside the card: one column, the question across, the email at an address's width, the send at the start */ :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__f{max-inline-size:none;margin-block-start:var(--eaf-s-md,22px);padding-block-start:var(--eaf-s-md,22px); border-block-start:1px solid var(--ea-tint-line,var(--ea-line))} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__f > input.ea-talk__in{max-inline-size:28rem} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__f > :is(textarea,input).ea-talk__in{background:var(--ea-surface)} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-talk__l{margin-block-start:var(--eaf-s-xs,12px)} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__f > .ea-talk__l:first-child{margin-block-start:0} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-talk__send{justify-self:start;color:var(--ea-on-accent);background:var(--ea-accent-fill);border-color:var(--ea-accent-fill)} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-talk__send:is(:hover,:focus){color:var(--ea-on-accent);background:var(--ea-accent-hover,var(--ea-accent-fill));border-color:var(--ea-accent-hover,var(--ea-accent-fill))} /* a narrow card (a phone, the catalogue's side column): the action under the words, at its natural width */ @container (max-width:479.98px){ :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"tile q" "lead lead" "go go";row-gap:var(--eaf-s-2xs,10px)} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__go{justify-self:start} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) .ea-ask__tile{align-self:center} /* open on a narrow card: the × stays in the top row, at its end, never on a row of its own under the line (the owner's 15:04) */ :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open[aria-expanded="true"]{grid-template-columns:40px minmax(0,1fr) 44px;grid-template-areas:"tile q go" "lead lead lead"} :is(.ea-ask--card,.ea-cat__side > .ea-ask):is(#echoai-scope,.ea-ask) button.ea-ask__open[aria-expanded="true"] .ea-ask__go{justify-self:end} } /* ==== THE ROW SHAPE (3.4.0, NB 315, «T»; lib/end-row.php, reader-tools.css «THE END ROW»): the blocks are display:contents in the row; what opens lies under it; the ask's form a soft card with an OUTLINED send (one filled button: the card's). Every control's corner is the button knob, as the share button's (3.4.1, NB 351 S1, Q-4/M-6) ==== */ .ea-endrow > .ea-talk--row:is(#echoai-scope,.ea-talk):not([hidden]), .ea-endrow > .ea-ask--row:is(#echoai-scope,.ea-ask):not([hidden]){display:contents} .ea-endrow > .ea-talk--row:is(#echoai-scope,.ea-talk) > .ea-talk__row{display:contents} .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__hw{order:1;flex:none;font:700 var(--eaf-fs-ui,15px)/1.2 var(--ea-font);color:var(--ea-ink);white-space:nowrap} .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__h{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__btns{order:2;flex:none;display:flex;flex-wrap:nowrap;gap:var(--eae-gap,8px)} .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) button.ea-talk__b{inline-size:44px;block-size:44px;min-inline-size:44px;min-height:44px;padding:0;gap:0; color:var(--ea-ink);background:var(--ea-surface);border:1px solid var(--ea-line);border-radius:var(--ea-btn-radius,999px);box-shadow:none} .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) button.ea-talk__b:not([aria-disabled="true"]):is(:hover,:focus-visible){background:var(--ea-surface-2);border-color:var(--ea-ink-mute)} .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) button.ea-talk__b[aria-pressed="true"]{color:var(--ea-surface);background:var(--ea-ink);border-color:var(--ea-ink)} .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) button.ea-talk__b[aria-pressed="false"][aria-disabled="true"]{color:var(--ea-ink-mute);border-color:var(--ea-line);background:var(--ea-surface)} .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__ico{inline-size:19px;block-size:19px} .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__w{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) button.ea-ask__pill{order:4;flex:1 1 0;min-inline-size:44px;display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:6px; block-size:44px;min-height:44px;margin:0;padding:0 var(--eaf-s-2xs,8px); font:700 var(--eaf-fs-ui,15px)/1 var(--ea-font);white-space:nowrap;color:var(--ea-ink);background:var(--ea-surface);border:0;border-radius:var(--ea-btn-radius,999px); box-shadow:inset 0 0 0 1px var(--ea-line); transition:background-color .18s cubic-bezier(.2,.7,.2,1),color .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s cubic-bezier(.2,.7,.2,1)} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) button.ea-ask__pill:is(:hover,:focus){color:var(--ea-ink);background:var(--ea-surface-2)} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) button.ea-ask__pill[aria-expanded="true"]{color:var(--ea-soft-ink-current,var(--ea-accent-ink));background:var(--ea-soft-ground-current,var(--ea-surface-2)); box-shadow:var(--ea-soft-ring,inset 0 0 0 1px var(--ea-line))} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) button.ea-ask__pill:focus-visible{outline:2px solid var(--ea-focus);outline-offset:2px} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) button.ea-ask__pill > .ea-talk__ico{display:block;flex:none;inline-size:19px;block-size:19px} @container earow (max-width:320px){ .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) button.ea-ask__pill > .ea-talk__ico{display:none} } .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__note{order:10;flex:1 0 100%;max-inline-size:none;margin:0} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) .ea-ask__f{order:12;flex:1 0 100%} .ea-endrow :is(.ea-talk--row,.ea-ask--row):is(#echoai-scope,div) .ea-talk__st{order:11;flex:1 0 100%;margin:0;font-size:var(--eaf-fs-ui,15px)} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) .ea-talk__st{order:13} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) .ea-ask__f{display:grid;gap:var(--eaf-s-3xs,4px);max-inline-size:none;margin:0; padding:var(--eaf-s-md,20px) var(--eaf-s-md,20px) var(--eaf-s-lg,24px);border:0;border-radius:var(--ea-soft-radius-lg,16px); background:var(--ea-soft-ground,var(--ea-surface));box-shadow:var(--ea-soft-shadow,inset 0 0 0 1px var(--ea-line))} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) .ea-ask__fh{margin:0;font:800 var(--eaf-fs-large,17px)/var(--eaf-lh-head,1.35) var(--ea-font);color:var(--ea-ink)} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) .ea-ask__fsub{margin:0 0 var(--eaf-s-2xs,8px);font-size:var(--eaf-fs-ui,15px);line-height:var(--eaf-lh-ui,1.5);color:var(--ea-ink-mute)} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) .ea-ask__f > .ea-talk__l{margin-block-start:var(--eaf-s-xs,12px)} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) button.ea-talk__send{justify-self:stretch;margin-block-start:var(--eaf-s-sm,16px);min-height:48px; color:var(--ea-accent-ink);background:var(--ea-surface);border:1.5px solid var(--ea-accent);border-radius:var(--ea-btn-radius,999px)} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) button.ea-talk__send:is(:hover,:focus){color:var(--ea-accent-ink);background:var(--ea-soft-ground-current,var(--ea-surface-2));border-color:var(--ea-accent)} @media (min-width:1000px){ .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) button.ea-ask__pill{flex:none;padding-block:0;padding-inline:15px 17px} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) .ea-ask__f,.ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__note{flex:1 1 100%;margin-inline:max(0px,calc((100% - 40rem) / 2))} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) .ea-ask__f{padding:var(--eaf-s-lg,28px) var(--eaf-s-xl,32px) var(--eaf-s-xl,30px)} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) button.ea-talk__send{justify-self:start;padding-inline:var(--eaf-s-lg,28px)} .ea-endrow :is(.ea-talk--row,.ea-ask--row):is(#echoai-scope,.ea-talk,.ea-ask) .ea-talk__st{text-align:center} } @media (forced-colors:active){.ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) button.ea-ask__pill{border:1px solid ButtonText}} /* ==== THE CARD FAMILY (17.10, PLUGIN-CARD-FAMILY-1710; the owner's WhatsApp 15:04 on the answer page's question card: «למה החץ של הסגירה ממוקם שם? ... צריך לשפר את השפה הויזואלית כדי שהכרטיסים ירגישו שייכים למשפחות דומות ... ואייקונים». docs/CARD-FAMILY.md. · ONE close: a × of its own in the card's top inline-end corner (top-left in Hebrew), a 44px target, quiet until pointed at; its centre on the header's centre (the corner's room is the card's top room less 7px: the 30px tile's half less the 44px target's half). lib/readers.php echoai_al_readers_cardx, assets/readers.js cardx(). · The ask's form and «מה חסר?» are ONE card: the page's card corner (--ea-radius, the end card's and «בקצרה»'s), the soft layer's ground, ring and lift, the same room, and the header every card of the page speaks: a 30px tile with the card's mark, then the title (question.css gives «שורה תחתונה» the same tile). ==== */ .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) .ea-ask__f,.ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__note{position:relative;--eac-pt:var(--eaf-s-md,20px);--eac-x-in:calc(var(--eac-pt) - 7px); display:grid;gap:var(--eaf-s-3xs,4px);max-inline-size:none;margin:0;padding:var(--eac-pt) var(--eaf-s-md,20px) var(--eaf-s-lg,24px);border:0;border-radius:var(--ea-radius,20px); background:var(--ea-soft-ground,var(--ea-surface));box-shadow:var(--ea-soft-shadow,inset 0 0 0 1px var(--ea-line))} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) .ea-ask__fh,.ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__note > .ea-talk__l{display:flex;align-items:center;gap:10px; margin:0;padding-inline-end:40px;font:800 var(--eaf-fs-large,17px)/var(--eaf-lh-head,1.35) var(--ea-font);color:var(--ea-ink)} .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__note > .ea-talk__l + .ea-talk__hint{margin-block-end:var(--eaf-s-2xs,8px)} .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) .ea-ask__fsub{margin-block-start:var(--eaf-s-3xs,4px)} /* ONE send for both cards: the ask's outlined, full-width send. «מה חסר?»'s «שליחה» took the row's 44px circle (it is an .ea-talk__b inside the row's block) and its word ran out of the circle on 3.4.0, measured on the demo at 390 (17.10) */ .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__note button.ea-talk__send{justify-self:stretch;inline-size:auto;block-size:auto;min-inline-size:0;min-height:48px; margin-block-start:var(--eaf-s-sm,16px);padding:0 var(--eaf-s-md,22px);gap:8px;font:700 var(--eaf-fs-ui,15px)/1.2 var(--ea-font); color:var(--ea-accent-ink);background:var(--ea-surface);border:1.5px solid var(--ea-accent);border-radius:var(--ea-btn-radius,999px)} .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__note button.ea-talk__send:is(:hover,:focus){color:var(--ea-accent-ink);background:var(--ea-soft-ground-current,var(--ea-surface-2));border-color:var(--ea-accent)} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-cardh__tile{display:grid;place-items:center;flex:none;inline-size:30px;block-size:30px;border-radius:9px; background:var(--ea-accent-fill);color:var(--ea-on-accent);box-shadow:0 6px 14px -8px rgba(var(--ea-shadow-rgb,20,10,30),.5)} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-cardh__tile > .ea-talk__ico{display:block;inline-size:16px;block-size:16px} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-cardx{position:absolute;inset-block-start:var(--eac-x-in,6px);inset-inline-end:var(--eac-x-in,6px);z-index:1; display:grid;place-items:center;inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px;margin:0;padding:0; font:inherit;line-height:1;color:var(--ea-ink-mute);background:transparent;border:0;border-radius:var(--ea-btn-radius,999px);box-shadow:none;cursor:pointer; transition:background-color .18s cubic-bezier(.2,.7,.2,1),color .18s cubic-bezier(.2,.7,.2,1)} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-cardx:is(:hover,:focus){color:var(--ea-ink);background:var(--ea-surface-2)} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-cardx:focus-visible{outline:2px solid var(--ea-focus);outline-offset:2px} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-cardx > .ea-talk__ico{display:block;inline-size:20px;block-size:20px} /* the notice's «עוד על המידע» (17.10): a 44px row to press, and the set's chevron instead of the browser's triangle */ :is(#echoai-scope,.ea-ask) .ea-ask__more > summary{display:flex;align-items:center;gap:6px;min-block-size:44px;inline-size:fit-content;list-style:none} :is(#echoai-scope,.ea-ask) .ea-ask__more > summary::-webkit-details-marker{display:none} :is(#echoai-scope,.ea-ask) .ea-ask__more > summary::after{content:"";flex:none;inline-size:14px;block-size:14px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transition:rotate .24s cubic-bezier(.2,.7,.2,1)} /* the fold opens and closes gently (the owner's WhatsApp 18.10 02:45): readers.js foldMore() grows the words in and folds them back before the details closes; the chevron turns at the same pace, back as soon as the fold starts closing (.is-closing) */ :is(#echoai-scope,.ea-ask) .ea-ask__more[open]:not(.is-closing) > summary::after{rotate:180deg} :is(#echoai-scope,.ea-ask) .ea-ask__more > span{margin-block-start:0} @media (min-width:1000px){ .ea-endrow .ea-ask--row:is(#echoai-scope,.ea-ask) .ea-ask__f,.ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__note{--eac-pt:var(--eaf-s-lg,28px); padding:var(--eac-pt) var(--eaf-s-xl,32px) var(--eaf-s-xl,30px)} .ea-endrow .ea-talk--row:is(#echoai-scope,.ea-talk) .ea-talk__note button.ea-talk__send{justify-self:start;padding-inline:var(--eaf-s-lg,28px)} } @media (forced-colors:active){ :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-cardx{border:1px solid ButtonText} :is(#echoai-scope,.ea-talk,.ea-ask) .ea-cardh__tile{forced-color-adjust:none;background:CanvasText;color:Canvas} :is(#echoai-scope,.ea-ask) .ea-ask__more > summary::after{forced-color-adjust:none;background:CanvasText} } @media (prefers-reduced-motion:reduce){ :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-cardx,:is(#echoai-scope,.ea-ask) .ea-ask__more > summary::after{transition:none} } @media (prefers-reduced-motion:reduce){ :is(#echoai-scope,.ea-talk,.ea-ask) :is(button.ea-talk__b,.ea-talk__ico,.ea-ask__go,button.ea-ask__open,button.ea-ask__pill,.ea-ask__go > .ea-talk__ico,textarea.ea-talk__in,input.ea-talk__in){transition:none} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b:active{scale:none} :is(#echoai-scope,.ea-talk,.ea-ask) button.ea-talk__b .ea-talk__ico,:is(#echoai-scope,.ea-talk,.ea-ask) .ea-ask__go > .ea-talk__ico{translate:none} }