| @font-face { |
| font-family: "Bahij TheSans Arabic"; |
| src: url("./Font/Bahij_TheSansArabic-Light.ttf") format("truetype"); |
| font-weight: 300; |
| font-style: normal; |
| font-display: swap; |
| } |
|
|
| @font-face { |
| font-family: "Bahij TheSans Arabic"; |
| src: url("./Font/Bahij_TheSansArabic-Light.ttf") format("truetype"); |
| font-weight: 400; |
| font-style: normal; |
| font-display: swap; |
| } |
|
|
| @font-face { |
| font-family: "Bahij TheSans Arabic"; |
| src: url("./Font/Bahij_TheSansArabic-Light.ttf") format("truetype"); |
| font-weight: 500; |
| font-style: normal; |
| font-display: swap; |
| } |
|
|
| @font-face { |
| font-family: "Bahij TheSans Arabic"; |
| src: url("./Font/Bahij_TheSansArabic-Light.ttf") format("truetype"); |
| font-weight: 600; |
| font-style: normal; |
| font-display: swap; |
| } |
|
|
| @font-face { |
| font-family: "Bahij TheSans Arabic"; |
| src: url("./Font/Bahij_TheSansArabic-Light.ttf") format("truetype"); |
| font-weight: 700; |
| font-style: normal; |
| font-display: swap; |
| } |
|
|
| @font-face { |
| font-family: "Bahij TheSans Arabic"; |
| src: url("./Font/Bahij_TheSansArabic-Black.ttf") format("truetype"); |
| font-weight: 800; |
| font-style: normal; |
| font-display: swap; |
| } |
|
|
| @font-face { |
| font-family: "Bahij TheSans Arabic"; |
| src: url("./Font/Bahij_TheSansArabic-Black.ttf") format("truetype"); |
| font-weight: 900; |
| font-style: normal; |
| font-display: swap; |
| } |
|
|
| :root { |
| --bg: #eef3f8; |
| --surface: #ffffff; |
| --surface-soft: #f7faff; |
| --ink: #152033; |
| --muted: #5c6f88; |
| --primary: #4137a8; |
| --primary-dark: #2d277a; |
| --blue: #1cade4; |
| --cyan: #27ced7; |
| --green: #00b050; |
| --mint: #42ba97; |
| --slate: #5c6f88; |
| --violet: #7030a0; |
| --amber: #ffc000; |
| --danger: #f5554a; |
| --line: rgba(92, 111, 136, 0.16); |
| --line-strong: rgba(65, 55, 168, 0.2); |
| --shadow: 0 22px 55px rgba(65, 55, 168, 0.13); |
| --shadow-soft: 0 12px 28px rgba(21, 32, 51, 0.09); |
| --radius: 8px; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| direction: rtl; |
| } |
|
|
| body { |
| min-height: 100vh; |
| margin: 0; |
| font-family: "Bahij TheSans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; |
| font-weight: 300; |
| color: var(--ink); |
| background: |
| radial-gradient(circle at 12% 0%, rgba(28, 173, 228, 0.18), transparent 34%), |
| radial-gradient(circle at 92% 4%, rgba(65, 55, 168, 0.16), transparent 36%), |
| linear-gradient(180deg, rgba(39, 206, 215, 0.12), rgba(39, 206, 215, 0) 280px), |
| var(--bg); |
| } |
|
|
| button, |
| input { |
| font: inherit; |
| font-family: "Bahij TheSans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; |
| } |
|
|
| svg { |
| width: 1em; |
| height: 1em; |
| fill: currentColor; |
| } |
|
|
| .shell { |
| width: min(1080px, calc(100% - 24px)); |
| margin: 0 auto; |
| padding: 22px 0 76px; |
| } |
|
|
| .topbar { |
| margin-bottom: 14px; |
| } |
|
|
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| min-width: 0; |
| } |
|
|
| .brand-mark { |
| width: 50px; |
| height: 50px; |
| display: grid; |
| place-items: center; |
| border-radius: var(--radius); |
| color: #fff; |
| background: linear-gradient(135deg, var(--primary), var(--blue) 72%, var(--cyan)); |
| box-shadow: 0 14px 28px rgba(65, 55, 168, 0.24); |
| flex: 0 0 auto; |
| font-size: 25px; |
| } |
|
|
| h1 { |
| margin: 0; |
| font-size: clamp(1.55rem, 3vw, 2.25rem); |
| line-height: 1.25; |
| font-weight: 900; |
| letter-spacing: 0; |
| } |
|
|
| .brand p { |
| margin: 4px 0 0; |
| color: var(--muted); |
| line-height: 1.6; |
| font-weight: 700; |
| } |
|
|
| .search-panel { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) 56px; |
| gap: 10px; |
| align-items: center; |
| padding: 12px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| background: |
| linear-gradient(#ffffff, #ffffff) padding-box, |
| linear-gradient(135deg, rgba(65, 55, 168, 0.38), rgba(28, 173, 228, 0.34), rgba(66, 186, 151, 0.32)) border-box; |
| box-shadow: var(--shadow); |
| position: sticky; |
| top: 10px; |
| z-index: 5; |
| backdrop-filter: blur(12px); |
| } |
|
|
| .search-box { |
| min-width: 0; |
| height: 56px; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 0 14px; |
| border: 1px solid rgba(92, 111, 136, 0.18); |
| border-radius: var(--radius); |
| background: linear-gradient(180deg, #ffffff, #f9fbff); |
| } |
|
|
| .search-icon { |
| color: var(--primary); |
| font-size: 21px; |
| flex: 0 0 auto; |
| } |
|
|
| .search-box input { |
| width: 100%; |
| min-width: 0; |
| border: 0; |
| outline: 0; |
| background: transparent; |
| color: var(--ink); |
| font-size: 1rem; |
| font-weight: 700; |
| } |
|
|
| .search-box:focus-within { |
| border-color: rgba(28, 173, 228, 0.8); |
| box-shadow: 0 0 0 4px rgba(28, 173, 228, 0.15); |
| } |
|
|
| .actions { |
| display: grid; |
| grid-template-columns: 56px; |
| } |
|
|
| .button { |
| height: 56px; |
| border: 0; |
| border-radius: var(--radius); |
| cursor: pointer; |
| font-weight: 850; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; |
| } |
|
|
| .button:active { |
| transform: translateY(1px); |
| } |
|
|
| .button-ghost { |
| color: var(--primary); |
| background: rgba(65, 55, 168, 0.08); |
| font-size: 21px; |
| } |
|
|
| .button-ghost:hover { |
| background: rgba(65, 55, 168, 0.12); |
| } |
|
|
| .results { |
| display: grid; |
| gap: 12px; |
| padding-top: 14px; |
| } |
|
|
| .result-card { |
| overflow: hidden; |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| background: var(--surface); |
| box-shadow: var(--shadow-soft); |
| position: relative; |
| } |
|
|
| .result-card::before { |
| content: ""; |
| position: absolute; |
| inset: 0 auto 0 0; |
| width: 5px; |
| background: linear-gradient(180deg, var(--primary), var(--blue), var(--mint)); |
| } |
|
|
| .card-head { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 14px; |
| padding: 17px 18px 16px; |
| border-bottom: 1px solid var(--line); |
| background: |
| linear-gradient(135deg, rgba(65, 55, 168, 0.08), rgba(28, 173, 228, 0.08) 54%, rgba(66, 186, 151, 0.08)), |
| #ffffff; |
| } |
|
|
| .entity-title { |
| margin: 0; |
| font-size: clamp(1.06rem, 2vw, 1.42rem); |
| line-height: 1.65; |
| font-weight: 900; |
| } |
|
|
| .entity-meta { |
| margin: 3px 0 0; |
| color: var(--muted); |
| line-height: 1.7; |
| font-weight: 700; |
| } |
|
|
| .inline-whatsapp { |
| width: 42px; |
| height: 42px; |
| display: grid; |
| place-items: center; |
| border-radius: var(--radius); |
| color: #fff; |
| text-decoration: none; |
| box-shadow: 0 10px 22px rgba(21, 32, 51, 0.16); |
| font-size: 20px; |
| flex: 0 0 auto; |
| background: linear-gradient(135deg, var(--green), var(--mint)); |
| } |
|
|
| .inline-whatsapp.disabled { |
| pointer-events: none; |
| opacity: 0.42; |
| background: #8b98a5; |
| } |
|
|
| .card-body { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 9px; |
| padding: 12px; |
| } |
|
|
| .info-field { |
| min-width: 0; |
| padding: 12px 13px; |
| border: 1px solid rgba(92, 111, 136, 0.13); |
| border-radius: var(--radius); |
| background: linear-gradient(180deg, #ffffff, var(--surface-soft)); |
| } |
|
|
| .info-field.full { |
| grid-column: 1 / -1; |
| } |
|
|
| .field-line { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| min-width: 0; |
| } |
|
|
| .label { |
| display: block; |
| margin-bottom: 6px; |
| color: var(--primary); |
| font-size: 0.86rem; |
| font-weight: 900; |
| } |
|
|
| .value { |
| min-width: 0; |
| color: var(--ink); |
| line-height: 1.75; |
| font-weight: 700; |
| overflow-wrap: anywhere; |
| } |
|
|
| .value.ltr { |
| direction: ltr; |
| unicode-bidi: plaintext; |
| text-align: right; |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| .value a { |
| color: var(--primary); |
| text-decoration: none; |
| border-bottom: 1px solid rgba(65, 55, 168, 0.28); |
| } |
|
|
| mark { |
| color: inherit; |
| background: rgba(255, 192, 0, 0.28); |
| border-radius: 4px; |
| padding: 0 0.18em; |
| } |
|
|
| .empty-state { |
| min-height: 170px; |
| display: grid; |
| place-items: center; |
| align-content: center; |
| text-align: center; |
| padding: 26px 18px; |
| border: 1px dashed var(--line-strong); |
| border-radius: var(--radius); |
| background: rgba(255, 255, 255, 0.78); |
| box-shadow: var(--shadow-soft); |
| } |
|
|
| .empty-symbol { |
| width: 54px; |
| height: 54px; |
| display: grid; |
| place-items: center; |
| border-radius: var(--radius); |
| color: var(--primary); |
| background: linear-gradient(135deg, rgba(65, 55, 168, 0.1), rgba(28, 173, 228, 0.13)); |
| font-size: 25px; |
| } |
|
|
| .empty-state h2 { |
| margin: 0; |
| font-size: 1.2rem; |
| font-weight: 900; |
| } |
|
|
| .empty-state p { |
| margin: 0; |
| color: var(--muted); |
| line-height: 1.8; |
| } |
|
|
| .credit { |
| position: fixed; |
| right: 50%; |
| bottom: 12px; |
| transform: translateX(50%); |
| z-index: 20; |
| width: max-content; |
| max-width: calc(100% - 28px); |
| padding: 9px 18px 10px; |
| border: 1px solid rgba(65, 55, 168, 0.16); |
| border-radius: 999px; |
| color: rgba(21, 32, 51, 0.78); |
| background: rgba(255, 255, 255, 0.82); |
| box-shadow: 0 12px 30px rgba(65, 55, 168, 0.1); |
| backdrop-filter: blur(12px); |
| font-size: 0.9rem; |
| font-weight: 800; |
| text-align: center; |
| } |
|
|
| @media (max-width: 720px) { |
| .shell { |
| width: min(100% - 18px, 1080px); |
| padding-top: 14px; |
| padding-bottom: 72px; |
| } |
|
|
| .brand-mark { |
| width: 46px; |
| height: 46px; |
| font-size: 23px; |
| } |
|
|
| h1 { |
| font-size: 1.38rem; |
| } |
|
|
| .brand p { |
| font-size: 0.92rem; |
| } |
|
|
| .topbar { |
| margin-bottom: 12px; |
| } |
|
|
| .search-panel { |
| grid-template-columns: 1fr; |
| top: 8px; |
| padding: 10px; |
| } |
|
|
| .actions { |
| grid-template-columns: 54px; |
| } |
|
|
| .search-box, |
| .button { |
| height: 54px; |
| } |
|
|
| .card-head { |
| display: grid; |
| padding: 15px 15px 14px; |
| } |
|
|
| .inline-whatsapp { |
| width: 46px; |
| height: 46px; |
| } |
|
|
| .card-body { |
| grid-template-columns: 1fr; |
| padding: 10px; |
| } |
|
|
| .empty-state { |
| min-height: 140px; |
| padding: 22px 14px; |
| } |
|
|
| .credit { |
| bottom: 10px; |
| font-size: 0.82rem; |
| padding: 8px 15px 9px; |
| } |
|
|
| .info-field.full { |
| grid-column: auto; |
| } |
| } |
|
|
