/* ========================================================================== Page: service finder (site/modules/finder/index + partials/site/finder-teaser) -------------------------------------------------------------------------- .finder the card: a progress bar, one question at a time with its answers as large pill buttons, back .finder-result the suggestion: photo in the و ring, name, hook, facts, book / WhatsApp / call, then "you might also consider" .finder-teaser the «لست متأكداً…؟» link used on other pages ========================================================================== */ .finder { position: relative; max-width: 820px; margin-inline: auto; padding: var(--space-10) clamp(1.25rem, 0.5rem + 3vw, 3rem); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-md); overflow: hidden; } .finder__progress { position: absolute; inset: 0 0 auto; height: 4px; background: var(--line); } .finder__progress span { display: block; width: 0; height: 100%; background: var(--second-strong); transition: width var(--dur-slow) var(--ease-out); } .finder__q { animation: finder-in var(--dur-slow) var(--ease-out); } @keyframes finder-in { from { opacity: 0; transform: translateY(12px); } } .finder__step { color: var(--ink-faint); font-size: var(--fs-sm); } .finder__question { margin: var(--space-2) 0 var(--space-2); font-size: var(--fs-2xl); } .finder__question:focus { outline: none; } .finder__hint { color: var(--ink-soft); } .finder__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); } .finder__option { display: flex; align-items: center; gap: var(--space-3); min-height: 58px; padding: var(--space-3) var(--space-5); border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-weight: 500; text-align: start; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .finder__option:hover { border-color: var(--ink); } .finder__option:active { transform: scale(0.98); } .finder__option.is-picked { border-color: var(--second); background: var(--second-tint); } .finder__dot { flex-shrink: 0; width: 16px; height: 16px; border: 2px solid var(--line-strong); border-radius: 50%; transition: border-color var(--dur-fast), background-color var(--dur-fast); } .finder__option.is-picked .finder__dot { border-color: var(--second-strong); background: var(--second-strong); box-shadow: inset 0 0 0 3px var(--card); } .finder__back { margin-top: var(--space-6); color: var(--ink-soft); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 4px; } .finder__back:hover { color: var(--ink); } .finder__noscript { text-align: center; } /* ── Result ──────────────────────────────────────────────────────────────── */ .finder-result { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-8); animation: finder-in var(--dur-slow) var(--ease-out); } .finder-result__photo { width: 180px; aspect-ratio: 1; margin: 22px; overflow: hidden; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 8px var(--card), 0 0 0 10px var(--accent, var(--second)), 0 0 0 16px var(--card), 0 0 0 17px var(--line-strong), 0 0 0 22px var(--card), 0 0 0 23px var(--line); } .finder-result__photo img { width: 100%; height: 100%; object-fit: cover; } .finder-result__body { display: grid; justify-items: start; gap: var(--space-3); } .finder-result__name { font-size: var(--fs-3xl); } .finder-result__name:focus { outline: none; } .finder-result__hook { color: var(--ink-soft); font-size: var(--fs-lg); } .finder-result__facts { font-weight: 600; } .finder-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block: var(--space-2); } .finder-result--none { grid-template-columns: 1fr; text-align: center; justify-items: center; } .finder-result--none .finder-result__actions { justify-content: center; } .finder-also { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); } .finder-also__title { margin-bottom: var(--space-3); color: var(--ink-soft); font-size: var(--fs-sm); } .finder-also__list { display: flex; flex-wrap: wrap; gap: var(--space-2); } .finder-also__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5em 1.1em; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink); text-decoration: none; } .finder-also__item:hover { border-color: var(--ink); } /* ── Teaser (other pages) ────────────────────────────────────────────────── */ .finder-teaser { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-size: var(--fs-sm); text-decoration: none; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } [dir="rtl"] .finder-teaser { padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); } .finder-teaser:hover { border-color: var(--second-strong); box-shadow: 0 0 0 3px var(--second-tint); } .finder-teaser__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--second-tint); color: var(--second-text); font-size: 1.1rem; } .finder-teaser__text strong { color: var(--second-text); } .finder-teaser__go { color: var(--second-text); transition: transform var(--dur) var(--ease-out); } .finder-teaser:hover .finder-teaser__go { transform: translateX(-3px); } [dir="ltr"] .finder-teaser__go { scale: -1 1; } @media (max-width: 767.98px) { .finder__options { grid-template-columns: 1fr; } .finder-result { grid-template-columns: 1fr; justify-items: center; text-align: center; } .finder-result__body { justify-items: center; } .finder-result__actions { justify-content: center; } .finder-result__photo { width: 140px; } }