| :root{ |
| --primary:#544f7d; |
| --secondary:#60c4e4; |
| --dark:#323366; |
| --bg:#f4f7fb; |
| --text:#172033; |
| --muted:#667085; |
| --line:#e6eaf0; |
| --white:#ffffff; |
|
|
| --success:#15803d; |
| --warning:#b45309; |
| --danger:#b42318; |
|
|
| --shadow:0 30px 90px rgba(50,51,102,.16); |
| --softShadow:0 16px 44px rgba(50,51,102,.10); |
| --radius:30px; |
| } |
|
|
| *{box-sizing:border-box} |
|
|
| body{ |
| margin:0; |
| min-height:100vh; |
| font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif; |
| color:var(--text); |
| background: |
| radial-gradient(900px 520px at 15% 8%, rgba(96,196,228,.20), transparent 65%), |
| radial-gradient(850px 520px at 90% 0%, rgba(84,79,125,.18), transparent 60%), |
| linear-gradient(180deg,#ffffff 0%,var(--bg) 100%); |
| padding-bottom:58px; |
| } |
|
|
| body::before{ |
| content:""; |
| position:fixed; |
| inset:0; |
| pointer-events:none; |
| background-image: |
| linear-gradient(rgba(84,79,125,.035) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(84,79,125,.035) 1px, transparent 1px); |
| background-size:42px 42px; |
| mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%); |
| } |
|
|
| .page{ |
| position:relative; |
| z-index:1; |
| width:min(1080px,92vw); |
| margin:auto; |
| padding:26px 0 36px; |
| } |
|
|
| .topbar{ |
| display:flex; |
| justify-content:center; |
| margin-bottom:24px; |
| } |
|
|
| .brand{ |
| display:flex; |
| align-items:center; |
| gap:12px; |
| background:rgba(255,255,255,.72); |
| border:1px solid rgba(230,234,240,.95); |
| border-radius:22px; |
| padding:10px 16px; |
| box-shadow:0 12px 30px rgba(50,51,102,.07); |
| backdrop-filter:blur(16px); |
| } |
|
|
| .brandMark{ |
| width:44px; |
| height:44px; |
| border-radius:16px; |
| display:grid; |
| place-items:center; |
| color:#fff; |
| font-weight:950; |
| background:linear-gradient(135deg,var(--primary),var(--secondary)); |
| box-shadow:0 10px 24px rgba(84,79,125,.22); |
| } |
|
|
| .brand strong{ |
| display:block; |
| color:var(--dark); |
| font-size:16px; |
| } |
|
|
| .hero{ |
| position:relative; |
| overflow:hidden; |
| border-radius:36px; |
| border:1px solid rgba(230,234,240,.95); |
| background:rgba(255,255,255,.76); |
| box-shadow:var(--shadow); |
| backdrop-filter:blur(18px); |
| } |
|
|
| .hero::before{ |
| content:""; |
| position:absolute; |
| inset:-2px; |
| background: |
| radial-gradient(420px 220px at 20% 0%, rgba(96,196,228,.18), transparent 70%), |
| radial-gradient(420px 220px at 80% 0%, rgba(84,79,125,.16), transparent 70%); |
| pointer-events:none; |
| } |
|
|
| .heroContent{ |
| position:relative; |
| z-index:1; |
| max-width:820px; |
| margin:auto; |
| text-align:center; |
| padding:54px 34px 46px; |
| } |
|
|
| h1{ |
| margin:0 0 24px; |
| color:var(--dark); |
| font-size:42px; |
| line-height:1.35; |
| letter-spacing:-.8px; |
| } |
|
|
| .searchPanel{ |
| max-width:720px; |
| margin:0 auto; |
| background:#fff; |
| border:1px solid var(--line); |
| border-radius:28px; |
| padding:20px; |
| box-shadow:var(--softShadow); |
| text-align:right; |
| } |
|
|
| .searchPanel label{ |
| display:block; |
| color:var(--dark); |
| font-weight:950; |
| margin-bottom:12px; |
| font-size:14px; |
| } |
|
|
| .searchBox{ |
| display:grid; |
| grid-template-columns:1fr 90px; |
| gap:10px; |
| } |
|
|
| input{ |
| width:100%; |
| border:1px solid var(--line); |
| background:#fbfdff; |
| border-radius:20px; |
| padding:17px 18px; |
| font-size:16px; |
| outline:none; |
| color:var(--text); |
| } |
|
|
| input::placeholder{ |
| color:#98a2b3; |
| } |
|
|
| input:focus{ |
| border-color:var(--secondary); |
| background:#fff; |
| box-shadow:0 0 0 5px rgba(96,196,228,.16); |
| } |
|
|
| button{ |
| border:0; |
| border-radius:20px; |
| cursor:pointer; |
| font-weight:950; |
| color:#fff; |
| background:linear-gradient(135deg,var(--primary),var(--secondary)); |
| box-shadow:0 12px 26px rgba(84,79,125,.20); |
| } |
|
|
| .counter{ |
| margin-top:13px; |
| min-height:20px; |
| color:var(--primary); |
| font-weight:950; |
| font-size:14px; |
| } |
|
|
| .resultsHeader{ |
| display:none; |
| margin:26px 4px 12px; |
| } |
|
|
| .resultsHeader.active{ |
| display:flex; |
| } |
|
|
| .resultsHeader h2{ |
| margin:0; |
| font-size:19px; |
| color:var(--dark); |
| } |
|
|
| .results{ |
| display:none; |
| animation:fadeUp .35s ease both; |
| } |
|
|
| .results.active{ |
| display:block; |
| } |
|
|
| @keyframes fadeUp{ |
| from{opacity:0; transform:translateY(10px)} |
| to{opacity:1; transform:translateY(0)} |
| } |
|
|
| .tableWrap{ |
| overflow:auto; |
| background:#fff; |
| border:1px solid var(--line); |
| border-radius:26px; |
| box-shadow:var(--softShadow); |
| } |
|
|
| table{ |
| width:100%; |
| border-collapse:collapse; |
| min-width:760px; |
| } |
|
|
| th,td{ |
| padding:16px 15px; |
| border-bottom:1px solid var(--line); |
| text-align:right; |
| vertical-align:top; |
| } |
|
|
| th{ |
| color:var(--primary); |
| background:#fbfdff; |
| font-weight:950; |
| white-space:nowrap; |
| font-size:13px; |
| } |
|
|
| td{ |
| font-size:14px; |
| line-height:1.8; |
| } |
|
|
| .status{ |
| display:inline-flex; |
| align-items:center; |
| justify-content:center; |
| padding:8px 13px; |
| border-radius:999px; |
| background:rgba(96,196,228,.13); |
| color:var(--primary); |
| font-weight:950; |
| font-size:12px; |
| white-space:nowrap; |
| border:1px solid rgba(96,196,228,.22); |
| } |
|
|
| .status.success{ |
| background:rgba(21,128,61,.10); |
| color:var(--success); |
| border-color:rgba(21,128,61,.18); |
| } |
|
|
| .status.warning{ |
| background:rgba(180,83,9,.10); |
| color:var(--warning); |
| border-color:rgba(180,83,9,.18); |
| } |
|
|
| .status.danger{ |
| background:rgba(180,35,24,.10); |
| color:var(--danger); |
| border-color:rgba(180,35,24,.18); |
| } |
|
|
| .empty{ |
| background:#fff; |
| border:1px dashed #cfd6e2; |
| color:var(--muted); |
| border-radius:26px; |
| padding:28px; |
| text-align:center; |
| box-shadow:var(--softShadow); |
| line-height:1.9; |
| } |
|
|
| .cards{ |
| display:none; |
| } |
|
|
| footer{ |
| position:fixed; |
| bottom:0; |
| left:0; |
| right:0; |
| z-index:5; |
| background:rgba(255,255,255,.86); |
| backdrop-filter:blur(12px); |
| border-top:1px solid var(--line); |
| text-align:center; |
| padding:11px; |
| color:var(--muted); |
| font-size:13px; |
| } |
|
|
| footer b{color:var(--primary)} |
|
|
| @media(max-width:700px){ |
| body{padding-bottom:56px} |
|
|
| .page{ |
| width:min(94vw,520px); |
| padding:16px 0 28px; |
| } |
|
|
| .topbar{ |
| justify-content:stretch; |
| margin-bottom:14px; |
| } |
|
|
| .brand{ |
| width:100%; |
| justify-content:center; |
| } |
|
|
| .hero{ |
| border-radius:28px; |
| } |
|
|
| .heroContent{ |
| padding:34px 18px 26px; |
| } |
|
|
| h1{ |
| font-size:30px; |
| margin-bottom:20px; |
| } |
|
|
| .searchPanel{ |
| padding:15px; |
| border-radius:22px; |
| } |
|
|
| .searchBox{ |
| grid-template-columns:1fr; |
| } |
|
|
| button{ |
| min-height:48px; |
| } |
|
|
| .resultsHeader h2{ |
| font-size:17px; |
| } |
|
|
| .tableWrap{ |
| display:none; |
| } |
|
|
| .cards{ |
| display:grid; |
| gap:12px; |
| } |
|
|
| .resultCard{ |
| background:#fff; |
| border:1px solid var(--line); |
| border-radius:24px; |
| box-shadow:var(--softShadow); |
| padding:16px; |
| } |
|
|
| .cardTop{ |
| display:grid; |
| gap:12px; |
| margin-bottom:12px; |
| } |
|
|
| .cardTop h3{ |
| margin:0; |
| color:var(--dark); |
| font-size:16px; |
| line-height:1.7; |
| } |
|
|
| .cardInfo{ |
| display:grid; |
| gap:10px; |
| } |
|
|
| .cardInfo div{ |
| background:#fbfdff; |
| border:1px solid var(--line); |
| border-radius:17px; |
| padding:12px; |
| } |
|
|
| .cardInfo span{ |
| display:block; |
| color:var(--muted); |
| font-size:12px; |
| margin-bottom:5px; |
| } |
|
|
| .cardInfo strong{ |
| color:var(--text); |
| font-size:14px; |
| word-break:break-word; |
| } |
| } |
