: the old markup was unreachable
by keyboard and announced nothing about its expanded state */
.faq-q {
display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 14px;
background: none; border: 0; margin: 0;
padding: 18px 22px;
font: inherit; font-weight: 700; color: var(--kadia-navy);
text-align: start; line-height: 1.5; cursor: pointer;
}
.faq-q:focus-visible { outline: 2px solid var(--kadia-teal); outline-offset: -3px; border-radius: 15px; }
.faq-a {
max-height: 0; overflow: hidden;
padding-inline: 22px;
color: var(--kadia-text-muted);
transition: max-height .3s ease;
line-height: 1.8;
}
.faq-item.open .faq-q { padding-bottom: 13px; }
.faq-item.open .faq-a {
max-height: 900px;
padding-top: 14px; padding-bottom: 20px;
border-top: 1px solid rgba(15, 122, 69, .22);
}
.faq-item.open .faq-q .arrow { transform: rotate(180deg); background: var(--kadia-teal); color: #fff; }
.arrow {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 30px; height: 30px; border-radius: 50%;
background: var(--kadia-bg-dim, var(--kadia-bg)); color: var(--kadia-navy);
font-size: .85rem; transition: transform .2s ease, background .15s ease, color .15s ease;
}
.faq-item:hover .arrow { background: var(--kadia-teal-tint); color: var(--kadia-teal-deep, var(--kadia-teal-dark)); }
/* ---------- disclaimer ---------- */
/* the legal small print is now clearly labelled as a notice (icon + accent
bar) instead of an anonymous beige rectangle sitting at the page floor */
.disclaimer {
position: relative;
display: flex; gap: 16px; align-items: flex-start;
background: var(--caution-tint);
border: 1px solid #ecdfa8;
border-radius: 20px;
padding: 22px 26px 22px 26px;
color: #5b4b16;
font-size: 0.92rem;
line-height: 1.75;
max-width: 980px; margin: 0 auto;
box-shadow: none;
}
.disclaimer::before {
content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 5px;
border-start-start-radius: 20px; border-end-start-radius: 20px;
background: var(--caution);
}
.disclaimer-icon {
flex: none;
width: 40px; height: 40px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: #f6e9bd; font-size: 1.25rem;
}
.disclaimer-body { min-width: 0; }
.disclaimer strong { color: #4a3d10; }
/* ---------- footer ---------- */
/* rebuilt from a two-column stub (logo on one side, three stacked links on
the other, with a wide empty gutter in between) into a real navigable
footer: brand + promise, a legal column, a section column, and a hairline
bottom bar carrying the copyright. */
footer.site-footer {
position: relative;
background: var(--ink);
color: var(--on-ink-dim);
padding: 54px 0 26px;
margin-top: 0;
font-size: 0.92rem;
}
footer.site-footer::before {
content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px;
background: var(--caution);
opacity: .85;
}
footer.site-footer a { color: var(--on-ink-dim); opacity: 0.85; transition: opacity .15s ease, color .15s ease; }
footer.site-footer a:hover { opacity: 1; color: var(--kadia-teal-light); text-decoration: underline; }
footer.site-footer .cols {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 30px 40px;
align-items: start;
}
/* .brand is the logo lockup itself (circle-mark
![]()
+ "ADIA." text), a
flex row - so align-items here is the mark's vertical alignment against the
text, NOT the column's horizontal alignment (that's the grid's own
align-items:start above). flex-start top-aligned the 34px mark against the
shorter text line-box, floating "ADIA." ~7px above the circle's centre and
breaking the "KADIA." lockup in the footer (header was unaffected - it keeps
the base .brand centre). Match it back to centre. */
footer.site-footer .brand { align-items: center; }
.footer-tagline { color: rgba(207, 199, 221, .72); margin-top: 12px; line-height: 1.75; max-width: 38ch; }
.footer-col-title {
color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .07em;
margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-cta {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 18px;
background: var(--signal);
color: #fff !important; opacity: 1 !important;
border-radius: var(--r-plate); padding: 11px 22px;
font-weight: 700; font-size: .92rem;
box-shadow: 0 8px 20px rgba(15, 122, 69, .32);
transition: transform .15s ease, box-shadow .15s ease;
}
.footer-cta:hover { transform: translateY(-2px); text-decoration: none !important; box-shadow: 0 12px 26px rgba(15, 122, 69, .4); }
.footer-bottom {
margin-top: 34px; padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, .1);
display: flex; flex-wrap: wrap; gap: 10px 20px;
justify-content: space-between; align-items: center;
color: rgba(207, 199, 221, .6); font-size: .85rem;
}
@media (max-width: 780px) {
footer.site-footer { padding: 40px 0 22px; }
footer.site-footer .cols { grid-template-columns: 1fr 1fr; }
footer.site-footer .cols > :first-child { grid-column: 1 / -1; }
.disclaimer { flex-direction: column; gap: 12px; padding: 20px; }
}
/* ---------- Wizard (app.html) ---------- */
/* soft ambient wash behind the wizard, echoing the landing hero's own
background treatment - kept subtle (a wide, low-opacity radial glow) so
the wizard doesn't read as a flat gray box floating on white the way it
did before. Scoped to app.html only via body.wizard-page, AND to screen
only - a class selector on body beats the print reset's plain "body"
selector on specificity alone regardless of which media block either is
in, so without this @media screen guard the gradient wash was bleeding
straight through into the printed/PDF letter (confirmed via a real
generated PDF during the 2026-08-19 review - the empty-looking tinted
block at the top of the printed letter was exactly this). */
@media screen {
body.wizard-page {
background: var(--paper);
}
}
.wizard-shell {
max-width: 800px;
margin: 36px auto 90px;
padding: 0 20px;
}
/* step 2 only: extra width for the chat + recap-rail split (see .chat-layout).
Separate from .wizard-shell-wide, which serves step 1's scan screen. */
@media (min-width: 980px) {
.wizard-shell.wizard-shell-chat { max-width: 1040px; }
}
#progressBlock { margin-bottom: 22px; }
.progress-header {
display: flex; align-items: flex-start; gap: 14px;
}
.progress-header-text { min-width: 0; display: flex; flex-direction: column; }
.progress-header-text .step-name {
font-weight: 800; color: var(--kadia-navy); font-size: 1.4rem; line-height: 1.25;
animation: kadia-fade-up .35s ease-out both;
}
.progress-header-text .step-count {
font-size: .74rem; color: var(--signal); font-weight: 800; margin-bottom: 2px;
text-transform: uppercase; letter-spacing: .06em;
}
.progress-question-count {
flex: none;
margin-inline-start: auto;
padding: 5px 12px;
border-radius: 999px;
background: var(--signal-tint);
color: var(--kadia-teal-dark);
font-size: .78rem; font-weight: 800;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ---------- step stepper: circles + connectors, mirrors the wizard's own
4 real steps (step 5 is a "done" screen, not tracked here - see
renderProgress() hiding #progressBlock entirely once past DISPLAY_STEPS).
Nodes are built once and only their data-state flips on every step change,
so the circle fill / connector color / checkmark pop can all transition
instead of jumping (a full DOM rebuild would give the browser no "before"
state to animate from). ---------- */
.progress-track {
display: flex;
margin-bottom: 18px;
}
.stepper-item {
flex: 1;
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 8px;
min-width: 0;
}
.stepper-item:not(:first-child)::before {
content: "";
position: absolute;
inset-inline-start: -50%;
top: 15px;
width: 100%; height: 2px;
background: var(--kadia-border);
transition: background-color .35s var(--ease);
z-index: 0;
}
.stepper-item[data-state="done"]::before,
.stepper-item[data-state="current"]::before { background: var(--signal); }
.stepper-circle {
position: relative; z-index: 1;
flex: none;
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--paper);
border: 1.5px solid var(--kadia-border);
color: var(--kadia-text-muted);
font-size: .92rem; font-weight: 800;
transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.stepper-item[data-state="current"] .stepper-circle {
background: var(--ink); border-color: var(--ink); color: #fff;
transform: scale(1.08);
}
.stepper-item[data-state="done"] .stepper-circle {
background: var(--signal); border-color: var(--signal); color: #fff;
}
/* "you are here": a live pulsing ring on whichever circle is current, not
just a one-time pop when it becomes current - the black fill alone read
as static, no different from a screenshot. Runs continuously for as long
as this step stays current, stops the moment it flips to done/upcoming. */
@media (prefers-reduced-motion: no-preference) {
.stepper-item[data-state="current"] .stepper-circle {
animation: kadia-step-live 1.8s ease-out infinite;
}
}
@keyframes kadia-step-live {
0% { box-shadow: 0 0 0 0 rgba(15, 122, 69, .45); }
70% { box-shadow: 0 0 0 8px rgba(15, 122, 69, 0); }
100% { box-shadow: 0 0 0 0 rgba(15, 122, 69, 0); }
}
.stepper-num { display: block; }
.stepper-check { display: none; font-size: .95rem; transform: scale(.4); opacity: 0; transition: transform .25s var(--ease), opacity .2s ease; }
.stepper-item[data-state="done"] .stepper-num { display: none; }
.stepper-item[data-state="done"] .stepper-check { display: block; transform: scale(1); opacity: 1; }
.stepper-label {
font-size: .74rem; font-weight: 600; color: var(--kadia-text-muted);
text-align: center; line-height: 1.3;
max-width: 84px;
transition: color .3s ease;
}
.stepper-item[data-state="current"] .stepper-label { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
.stepper-circle, .stepper-item::before, .stepper-check, .stepper-label { transition: none; }
}
@media (max-width: 480px) {
.stepper-circle { width: 27px; height: 27px; font-size: .8rem; }
.stepper-item:not(:first-child)::before { top: 12.5px; }
.stepper-label { font-size: .64rem; max-width: 62px; }
.progress-header-text .step-name { font-size: 1.15rem; }
.progress-header-text .step-count { font-size: .68rem; }
}
.step2-progress-wrap { margin-bottom: 24px; }
.step2-progress-track { height: 6px; border-radius: 999px; background: var(--kadia-border); overflow: hidden; margin-bottom: 6px; }
.step2-progress-fill { height: 100%; background: var(--kadia-teal); border-radius: 999px; transition: width .3s ease; }
.step2-progress-text { font-size: .82rem; color: var(--kadia-text-muted); font-weight: 700; }
/* ---------- Chat-style questionnaire (step 2) — AI-assistant look ---------- */
/* Desktop split: a reading-width chat column beside a sticky recap rail.
Before this, the chat stretched the full ~860px card, so the assistant's
text sat hard against one edge and the user's answers against the other
with a dead gutter between them - the same "desktop as a stretched phone"
problem step 1's scan screen already had solved. */
.chat-layout { display: block; }
@media (min-width: 980px) {
.chat-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 34px;
align-items: start;
}
.chat-main { min-width: 0; max-width: 640px; }
}
.chat-rail { display: none; }
@media (min-width: 980px) {
.chat-rail {
display: block;
position: sticky; top: 96px;
background: var(--kadia-bg);
border: 1px solid var(--kadia-border);
border-radius: 20px;
padding: 20px 20px 18px;
}
}
.chat-rail-title {
font-size: .78rem; font-weight: 800; letter-spacing: .05em;
color: var(--kadia-teal-deep, var(--kadia-teal-dark));
margin: 0 0 14px;
}
.chat-rail-list { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.chat-rail-row { display: flex; flex-direction: column; gap: 2px; }
.chat-rail-row dt { font-size: .76rem; color: var(--kadia-text-muted); font-weight: 700; }
.chat-rail-row dd { margin: 0; font-size: .95rem; color: var(--kadia-navy); font-weight: 700; }
.chat-rail-note {
margin: 16px 0 0; padding-top: 14px;
border-top: 1px solid var(--kadia-border);
font-size: .78rem; line-height: 1.65; color: var(--kadia-text-muted);
}
.chat-log {
display: flex; flex-direction: column; gap: 22px;
margin-bottom: 24px; max-height: min(62dvh, 620px); overflow-y: auto;
padding: 14px 2px 18px;
scroll-behavior: smooth;
/* the log scrolls internally; without this the oldest bubble is simply
sliced in half at the top edge and reads as a rendering bug rather
than as scrolled-away history */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
}
.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-thumb { background: var(--kadia-border); border-radius: 999px; }
.chat-log::-webkit-scrollbar-thumb:hover { background: var(--kadia-teal-light); }
/* composed entrance: small rise, soft easing, no bounce */
@keyframes kadia-chat-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-bubble { max-width: 88%; animation: kadia-chat-in .38s cubic-bezier(.22, .61, .36, 1) both; }
/* --- assistant: avatar + open text, no bubble fill --- */
.chat-bot {
align-self: flex-start;
display: flex; align-items: flex-start; gap: 10px;
}
.chat-avatar {
flex: none; width: 34px; height: 34px; margin-top: 2px;
border-radius: var(--r-plate);
border: 1px solid var(--signal);
background: var(--signal-tint);
display: inline-flex; align-items: center; justify-content: center;
color: var(--signal);
user-select: none;
}
/* the inspection mark, so the assistant reads as the thing running the check
rather than as a generic chat persona */
.chat-avatar::before {
content: "";
width: 18px; height: 18px;
background-color: currentColor;
-webkit-mask: var(--i-scan) center / contain no-repeat;
mask: var(--i-scan) center / contain no-repeat;
}
.chat-bot .chat-bubble-inner {
padding: 5px 0 0;
color: var(--ink);
line-height: 1.7; font-size: var(--t-base); font-weight: 500;
}
/* --- user: quiet tinted bubble, focus stays on the assistant --- */
.chat-user { align-self: flex-end; cursor: pointer; }
.chat-user .chat-bubble-inner {
background: var(--signal-tint);
border: 1px solid var(--signal);
color: var(--ink);
padding: 11px 16px; border-radius: 16px;
line-height: 1.65; font-size: var(--t-md); font-weight: 500;
white-space: pre-wrap;
transition: background var(--dur) var(--ease);
}
.chat-user:hover .chat-bubble-inner { background: #d8ebe1; }
/* edit affordance: a drawn pencil. On touch there is no hover to reveal it,
so it is always visible there and only hover-revealed on a pointer device. */
.chat-user .chat-bubble-inner::after {
content: "";
display: inline-block;
width: .86em; height: .86em;
vertical-align: -.1em;
background-color: var(--kadia-teal-dark);
-webkit-mask: var(--i-edit) center / contain no-repeat;
mask: var(--i-edit) center / contain no-repeat;
margin-inline-start: 8px;
opacity: .55; transition: opacity var(--dur) var(--ease);
}
.chat-user:hover .chat-bubble-inner::after { opacity: 1; }
@media (hover: hover) { .chat-user .chat-bubble-inner::after { opacity: 0; } }
/* --- quick-reply suggestion chips --- */
.chat-options {
display: flex; flex-wrap: wrap; gap: 10px;
align-self: flex-start; max-width: 100%;
padding-inline-start: 44px; /* aligns under bot text (34px avatar + 10px gap) */
animation: kadia-chat-in .38s cubic-bezier(.22, .61, .36, 1) .08s both;
}
.chat-option-btn {
display: inline-flex; align-items: center; gap: 7px;
min-height: 44px;
padding: 11px 18px; border-radius: var(--r-ctl);
border: 1px solid var(--rule);
background: var(--plate); color: var(--ink);
font-weight: 500; font-size: var(--t-md); font-family: inherit; cursor: pointer;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chat-option-btn:hover { border-color: var(--ink); }
.chat-option-btn.selected {
background: var(--signal-tint);
border-color: var(--signal);
color: var(--kadia-teal-deep);
font-weight: 600;
}
/* a drawn tick, matching every other confirmation mark in the interface */
.chat-multi-btn.selected::before {
content: "";
width: .95em; height: .95em; flex: none;
background-color: var(--signal);
-webkit-mask: var(--i-check) center / contain no-repeat;
mask: var(--i-check) center / contain no-repeat;
}
.chat-multiselect, .chat-elaboration {
align-self: flex-start; width: 100%; max-width: 100%;
padding-inline-start: 44px; box-sizing: border-box;
animation: kadia-chat-in .38s cubic-bezier(.22, .61, .36, 1) .08s both;
}
.chat-multiselect .chat-options { padding-inline-start: 0; animation: none; }
.chat-multi-confirm {
margin-top: 12px;
min-height: 44px;
padding: 10px 22px; border: none; border-radius: var(--r-ctl);
background: var(--signal); color: #fff;
font-family: inherit; font-weight: 600; font-size: var(--t-md); cursor: pointer;
transition: background var(--dur) var(--ease);
}
.chat-multi-confirm:hover { background: var(--kadia-teal-dark); }
/* "what applies to you?" checklist (wizard.js CHECKLIST_SHORT): full-width
rows rather than wrapping chips - the lines are sentences, and a list of up
to ~14 of them has to scan top-to-bottom on a 375px phone. Same tokens and
selected state as the chips above; the box draws the same tick. */
.chat-checklist {
align-self: flex-start; width: 100%; max-width: 100%;
padding-inline-start: 44px; box-sizing: border-box;
animation: kadia-chat-in .38s cubic-bezier(.22, .61, .36, 1) .08s both;
}
.chat-checklist-list { display: flex; flex-direction: column; gap: 8px; }
.chat-checklist-item {
display: flex; align-items: center; gap: 12px; width: 100%;
min-height: 48px; padding: 11px 14px;
border: 1px solid var(--rule); border-radius: var(--r-ctl);
background: var(--plate); color: var(--ink);
font-family: inherit; font-size: var(--t-md); font-weight: 500; line-height: 1.45;
text-align: start; cursor: pointer;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chat-checklist-item:hover { border-color: var(--ink); }
.chat-checklist-item:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.chat-checklist-box {
flex: none; width: 1.25em; height: 1.25em;
border: 1.5px solid var(--rule); border-radius: 5px; background: var(--plate);
display: grid; place-items: center;
}
.chat-checklist-item.selected {
background: var(--signal-tint); border-color: var(--signal);
color: var(--kadia-teal-deep); font-weight: 600;
}
.chat-checklist-item.selected .chat-checklist-box { background: var(--signal); border-color: var(--signal); }
.chat-checklist-item.selected .chat-checklist-box::after {
content: ""; width: .8em; height: .8em; background-color: #fff;
-webkit-mask: var(--i-check) center / contain no-repeat;
mask: var(--i-check) center / contain no-repeat;
}
@media (max-width: 600px) {
.chat-checklist { padding-inline-start: 0; }
}
/* --- free-text composer --- */
.chat-composer {
display: flex; align-items: flex-end; gap: 8px;
background: var(--plate);
border: 1px solid var(--rule);
border-radius: var(--r-ctl);
padding: 6px; padding-inline-start: 14px;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* the textarea itself drops its outline, so the wrapper must carry a focus
indicator that actually meets non-text contrast — not a 12%-alpha haze */
.chat-composer:focus-within {
border-color: var(--signal);
box-shadow: 0 0 0 2px var(--signal);
}
.chat-textarea {
flex: 1; min-width: 0;
border: none; outline: none; background: transparent;
resize: none; font-family: inherit; font-size: .95rem; line-height: 1.7;
color: var(--kadia-text);
padding: 8px 0; min-height: 24px; max-height: 140px;
field-sizing: content; /* auto-grow in modern browsers; harmless fallback elsewhere */
}
.chat-textarea::placeholder { color: var(--kadia-text-muted); opacity: .75; }
.chat-elaboration-submit {
flex: none; width: 44px; height: 44px;
border: none; border-radius: 9px;
background: var(--signal); color: #fff; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur) var(--ease);
}
.chat-elaboration-submit:hover { background: var(--kadia-teal-dark); }
.chat-elaboration-submit svg { width: 19px; height: 19px; }
.chat-elaboration-skip {
margin-top: 8px; padding: 4px 2px;
background: none; border: none;
color: var(--kadia-text-muted);
font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
}
.chat-elaboration-skip:hover { color: var(--kadia-teal-dark); }
/* --- typing indicator: avatar + soft pulsing dots, no bubble --- */
.chat-typing .chat-bubble-inner {
display: inline-flex; align-items: center; padding: 9px 0 0;
}
.chat-typing-dot {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--signal); margin: 0 2.5px; opacity: .3;
animation: kadia-typing-pulse 1.2s infinite ease-in-out;
}
.chat-typing-dot:nth-child(2) { animation-delay: .18s; }
.chat-typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes kadia-typing-pulse {
0%, 100% { opacity: .25; transform: scale(.9); }
40% { opacity: 1; transform: scale(1); }
}
/* .sticky-cta-bar is fixed only up to 767px (see the wizard/account app-bar
rules) - the default .chat-log max-height above is sized for desktop,
where nothing overlaps its bottom edge, so anywhere within that same
767px range needs its own budget that actually reserves room for the bar.
A real bug found live: without this, 56dvh alone reserved nothing for the
fixed bar (56px + padding ≈ 84px, the same figure .wizard-card subtracts
for the same reason) - late in a long question flow, once enough Q&A
history had accumulated to push the log's own box past that point, the
newest bubble (in one reproduced case, a multi-select's own "continue"
button) rendered completely underneath the fixed bar and could not be
tapped at all. */
@media (max-width: 767px) {
.chat-log { max-height: calc(56dvh - 84px - env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
.chat-log { max-height: calc(50dvh - 84px - env(safe-area-inset-bottom, 0px)); gap: 16px; }
.chat-bubble { max-width: 96%; }
.chat-bot { gap: 8px; }
.chat-avatar { width: 28px; height: 28px; }
.chat-avatar::before { width: 15px; height: 15px; }
/* reclaim the indent on narrow screens */
.chat-options, .chat-multiselect, .chat-elaboration { padding-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
.chat-bubble, .chat-options, .chat-multiselect, .chat-elaboration { animation: none; }
.chat-typing-dot { animation: none; opacity: .6; }
}
/* an inline gloss of the Hebrew term as it appears on the original (Hebrew) ticket, so the reader can cross-reference it directly - styled as a distinct reference chip rather than blending into the Arabic sentence */
.he-gloss {
display: inline-block;
background: var(--kadia-teal-tint);
color: var(--kadia-teal-dark);
padding: 1px 8px;
border-radius: 6px;
font-size: .85em;
font-weight: 700;
margin: 0 2px;
}
.field-invalid { border: 2px solid var(--kadia-danger); border-radius: var(--r-card-sm); padding: 8px; animation: kadia-shake .4s ease; }
@keyframes kadia-shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-4px); }
40%, 60% { transform: translateX(4px); }
}
.link-btn {
background: none; border: none; text-decoration: underline;
color: inherit; cursor: pointer; font-weight: 700; padding: 0;
margin-inline-start: 6px; font-size: inherit; font-family: inherit;
}
.kadia-toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
background: var(--kadia-navy); color: #fff;
padding: 12px 22px; border-radius: var(--r-plate);
font-weight: 700; font-size: .92rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
opacity: 0; transition: opacity .3s ease, transform .3s ease;
z-index: 9999; pointer-events: none;
max-width: calc(100vw - 40px); text-align: center;
}
.kadia-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.kadia-toast-error { background: var(--kadia-danger); }
/* floating "contact us" widget - injected by contact-widget.js on every
customer-facing page. Desktop-only per the office's request (a bottom-left
fixed circle competes too much with the mobile nav/keyboard on small
screens) - the same breakpoint already used elsewhere on this site. */
.contact-widget-btn {
position: fixed; bottom: 24px; left: 24px; z-index: 950;
width: 56px; height: 56px; border-radius: 50%; border: none;
background: var(--ink);
color: #fff; display: flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 10px 26px rgba(19, 23, 26,0.35);
transition: transform .15s ease, box-shadow .15s ease;
}
.contact-widget-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(19, 23, 26,0.42); }
.contact-widget-btn::after {
content: ""; position: absolute; inset: -4px; border-radius: 50%;
border: 2px solid var(--kadia-teal); opacity: 0; transition: opacity .15s ease;
}
.contact-widget-btn:focus-visible::after { opacity: 1; }
@media (max-width: 920px) {
.contact-widget-btn { display: none; }
}
.contact-widget-overlay {
display: none; position: fixed; inset: 0; z-index: 1200;
background: rgba(36, 26, 51, 0.55); backdrop-filter: blur(2px);
align-items: center; justify-content: center; padding: 24px;
}
.contact-widget-overlay.open { display: flex; }
.contact-widget-modal {
position: relative; background: var(--kadia-card); border-radius: 20px;
padding: 32px 30px; width: 100%; max-width: 440px; max-height: calc(100vh - 60px);
overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.3);
/* explicit, not inherited: this card is reused by auth-gate.js on
lookup.html, whose body sets a light --lk-text color for its own dark
page background - without this, any plain text dropped in here (e.g.
#agHint, which has no color rule of its own) silently inherited that
near-white color and went unreadable on this card's light background. */
color: var(--kadia-text);
}
.contact-widget-modal h2 { margin: 0 0 18px; color: var(--kadia-navy); font-size: 1.3rem; }
.contact-widget-modal p.hint { color: var(--kadia-text-muted); }
.contact-widget-close {
position: absolute; top: 14px; inset-inline-end: 14px;
width: 32px; height: 32px; border-radius: 50%; border: none;
background: var(--kadia-bg); color: var(--kadia-text-muted);
font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.contact-widget-close:hover { background: var(--kadia-border); }
.contact-widget-modal .field { margin-bottom: 14px; }
.contact-widget-error {
background: #fbe9e7; color: var(--kadia-danger); border-radius: 10px;
padding: 10px 14px; font-size: .88rem; margin-bottom: 14px;
}
.contact-widget-success { text-align: center; padding: 10px 0; }
.contact-widget-success h2 { color: var(--kadia-success); }
.contact-widget-success p { color: var(--kadia-text-muted); margin: 10px 0 22px; }
/* floating accessibility widget - injected by accessibility-widget.js, same
pattern as the contact widget above, stacked directly on top of it in the
same bottom-left corner (a legal requirement in Israel: ת"י 5568 / the
Equal Rights for Persons with Disabilities regulations require an
accessibility statement reachable from every page - the widget's own
panel links to it, and it's also present everywhere itself). Desktop AND
mobile both need this one (unlike the contact button) - accessibility
accommodations aren't a "nice to have" that mobile visitors can skip. */
/* Mobile-only app-shell navigation - full rules under the ≤767px app-shell
media query below; hidden by default so it never appears in the desktop
two-column layout, where the header's own nav already covers this. */
.bottom-tab-bar { display: none; }
/* Small edge-flush tab, not a bold floating circle - a pattern noted from
a competitor's mobile app: a quiet, standard accessibility icon that
reads as "this site has an accessibility menu" without competing for
attention against the primary green CTAs everywhere else on the page.
Rounded only on the visible (inner) side and flush left:0 with no
left border, since the screen edge itself reads as the fourth side. */
.a11y-widget-btn {
position: fixed; bottom: 92px; left: 0; z-index: 950;
width: 36px; height: 36px;
border-radius: 0 999px 999px 0;
border: 1px solid var(--rule); border-inline-start: 0;
background: var(--plate);
color: var(--ink-3); display: flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 2px 8px rgba(19, 23, 26, .12);
transition: color .15s ease, box-shadow .15s ease;
}
.a11y-widget-btn .ico { width: 20px; height: 20px; }
.a11y-widget-btn:hover { color: var(--ink); box-shadow: 0 4px 14px rgba(19, 23, 26, .18); }
.a11y-widget-btn::after {
content: ""; position: absolute; inset: -4px; border-radius: 0 999px 999px 0;
border: 2px solid var(--signal); opacity: 0; transition: opacity .15s ease;
}
.a11y-widget-btn:focus-visible::after { opacity: 1; }
@media (max-width: 920px) {
/* the contact button hides on mobile (see .contact-widget-btn) - this one
drops down to take its usual bottom-left spot instead of floating alone
with an empty gap above it */
.a11y-widget-btn { bottom: 24px; }
}
.a11y-widget-panel {
display: none; position: fixed; bottom: 136px; left: 12px; z-index: 1100;
background: var(--kadia-card); border-radius: 18px; padding: 22px;
width: 280px; max-width: calc(100vw - 24px); box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
@media (max-width: 920px) { .a11y-widget-panel { bottom: 68px; } }
.a11y-widget-panel.open { display: block; }
.a11y-widget-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.a11y-widget-panel-header h2 { margin: 0; font-size: 1.05rem; color: var(--kadia-navy); }
.a11y-widget-close {
width: 28px; height: 28px; border-radius: 50%; border: none;
background: var(--kadia-bg); color: var(--kadia-text-muted);
font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.a11y-widget-close:hover { background: var(--kadia-border); }
.a11y-widget-group { margin-bottom: 14px; }
.a11y-widget-group-label { font-size: .82rem; font-weight: 700; color: var(--kadia-text-muted); margin-bottom: 8px; }
.a11y-widget-font-row { display: flex; gap: 6px; }
.a11y-widget-font-row button {
flex: 1; border: 1.5px solid var(--kadia-border); background: var(--kadia-card);
border-radius: 10px; padding: 8px 4px; font-size: .82rem; cursor: pointer; color: var(--kadia-text);
}
.a11y-widget-font-row button.active { border-color: var(--kadia-teal); background: var(--kadia-teal-tint); color: var(--kadia-teal-dark); font-weight: 700; }
.a11y-widget-toggle-row {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 0; border-bottom: 1px solid var(--kadia-border); font-size: .9rem;
}
.a11y-widget-toggle-row:last-of-type { border-bottom: none; }
.a11y-widget-switch { position: relative; width: 40px; height: 22px; flex: none; }
.a11y-widget-switch input { opacity: 0; width: 0; height: 0; }
.a11y-widget-switch-track {
position: absolute; inset: 0; background: var(--kadia-border); border-radius: 999px;
transition: background .15s ease; cursor: pointer;
}
.a11y-widget-switch-track::before {
content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
background: #fff; top: 2px; inset-inline-start: 2px; transition: transform .15s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.a11y-widget-switch input:checked + .a11y-widget-switch-track { background: var(--kadia-teal); }
.a11y-widget-switch input:checked + .a11y-widget-switch-track::before { transform: translateX(18px); }
html[dir="rtl"] .a11y-widget-switch input:checked + .a11y-widget-switch-track::before { transform: translateX(-18px); }
.a11y-widget-reset-btn {
width: 100%; margin-top: 6px; background: none; border: none;
color: var(--kadia-text-muted); text-decoration: underline; font-size: .85rem;
cursor: pointer; padding: 6px 0;
}
.a11y-widget-statement-link {
display: block; text-align: center; margin-top: 12px; padding-top: 14px;
border-top: 1px solid var(--kadia-border); font-size: .88rem; font-weight: 700;
color: var(--kadia-teal-dark); text-decoration: none;
}
/* the accessibility modes themselves - applied as classes on by
accessibility-widget.js, persisted in localStorage. Reusing the site's own
CSS custom properties for high-contrast (rather than a blanket filter)
keeps every component's existing styling intact instead of fighting it. */
html.a11y-font-large { font-size: 112.5%; }
html.a11y-font-xlarge { font-size: 125%; }
html.a11y-high-contrast {
--paper: #ffffff; --paper-dim: #ffffff; --plate: #ffffff;
--ink: #000000; --ink-2: #000000; --ink-3: #000000;
--rule: #000000; --rule-strong: #000000;
--on-ink: #ffffff; --on-ink-dim: #ffffff; --rule-on-ink: #ffffff;
--signal: #005c33; --signal-tint: #ffffff;
--caution: #7a3300; --caution-tint: #ffffff;
--stop: #8c0000; --stop-tint: #ffffff;
--kadia-bg: #ffffff; --kadia-card: #ffffff; --kadia-text: #000000;
--kadia-text-muted: #000000; --kadia-border: #000000;
}
html.a11y-high-contrast a { color: #0000ee; text-decoration: underline; }
html.a11y-high-contrast .btn-primary, html.a11y-high-contrast .btn-secondary { background: #000; color: #fff; border-color: #000; }
html.a11y-grayscale { filter: grayscale(1); }
html.a11y-underline-links a { text-decoration: underline !important; }
/* NOT animation:none/transition:none - a real bug, confirmed live: the
landing page's scroll-reveal sections (.reveal, see above) start at
opacity:0 and rely on their transition running to ever reach opacity:1.
Killing the transition outright froze them invisible forever instead of
skipping the motion - collapsing the duration to near-zero still lets
them reach their end state, just instantly, which is what "stop
animations" actually means. Same recipe as the standard
prefers-reduced-motion snippet, applied as a manual, always-on toggle
here regardless of the visitor's OS-level setting. */
html.a11y-stop-animations *, html.a11y-stop-animations *::before, html.a11y-stop-animations *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.wizard-card {
background: var(--plate);
border: 1px solid var(--rule);
border-radius: var(--r-plate);
padding: 32px;
}
/* the 6 wizard step cards specifically (every .step is also a .wizard-card,
but not every .wizard-card is a step - this compound selector keeps the
refresh scoped to the wizard without touching the shared card look used
on auth/dashboard/admin) get a slightly larger, more elevated treatment
plus a thin brand-gradient cap and a soft entrance each time goToStep()
toggles display, so moving between steps feels like a real transition
instead of a hard cut. */
.wizard-card.step {
position: relative;
overflow: hidden;
border: 1px solid var(--rule);
border-radius: var(--r-plate);
padding: 40px;
}
/* This was a brand gradient cap; flattening it left a 4px amber bar across the
top of every step. Amber means "we could not verify this, check it yourself"
in this palette, so a permanent one on every screen says something untrue —
and the green progress rail directly above it already marks position in the
flow. The card's own edge is enough. */
/* The step entrance used to be a CSS @keyframes animation here, but a
finished animation held via fill-mode:both resolves `transform` to a
matrix rather than the literal `none` keyword - and an element with a
resolved transform becomes the containing block for any descendant's
position:fixed, which silently re-anchored the mobile sticky action bar to
the card instead of the viewport. It's now driven by a spring in
wizard.js's enterStepCard(), which explicitly sets transform to the literal
`none` once settled - fixing the bug at the root instead of cleaning it up
after the fact with an animationend listener. See spring.js/wizard.js. */
@media (max-width: 480px) {
.wizard-card.step { padding: 28px 22px; }
}
.wizard-card h2 { color: var(--kadia-navy); margin-top: 0; }
.wizard-card p.hint { color: var(--kadia-text-muted); margin-top: -8px; margin-bottom: 22px; }
.wizard-card.step h2 { font-size: 1.65rem; font-weight: 800; margin-bottom: 10px; }
.wizard-card.step p.hint { font-size: 1rem; line-height: 1.65; margin-bottom: 30px; }
/* a field the vision model came back null for - distinct from .field-invalid
(red, user's own mistake) since this isn't something the user did wrong,
just a gap the OCR left for them to fill in themselves */
.field-ocr-missed input, .field-ocr-missed select { border-color: #e3a24d; background: #fffaf3; }
.field p.field-hint-missed { margin: 6px 0 0; color: #8a4a12; font-weight: 600; font-size: .85rem; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--kadia-navy); }
.field input[type=text],
.field input[type=number],
.field input[type=tel],
.field input[type=password],
.field input[type=date],
.field input[type=email],
.field select,
.field textarea {
width: 100%;
padding: 12px 14px;
border-radius: 10px;
border: 1.5px solid var(--kadia-border);
font-family: inherit;
font-size: 1rem;
background: #fff;
color: var(--kadia-text);
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 2px; border-color: var(--kadia-teal-light);
}
/* wizard-only field refinement (scoped via the .step ancestor - every
wizard step card carries this class, auth/admin/dashboard forms don't -
see .wizard-card.step above for why this scoping pattern is used
throughout this file instead of touching the shared .field rules). */
.step .field input[type=text], .step .field input[type=number], .step .field input[type=tel],
.step .field input[type=password], .step .field input[type=date], .step .field input[type=email],
.step .field select, .step .field textarea {
border-radius: 12px;
padding: 13px 15px;
border: 1.5px solid var(--kadia-border);
transition: border-color .15s ease, box-shadow .15s ease;
}
.step .field input:focus, .step .field select:focus, .step .field textarea:focus {
border-color: var(--kadia-teal);
box-shadow: 0 0 0 4px var(--kadia-teal-tint);
}
/* choice tiles (violation type, etc.) - a fixed min-height with centered
content keeps every tile in a row the same height regardless of how many
lines its own label wraps to (Arabic/Hebrew labels differ a lot in
length), which is what made this grid look jagged and cramped before -
the uneven row heights were doing a lot of the "this looks unpolished"
work on their own, independent of padding/font size. */
.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
/* .option-pill and .method-card (below) are real