Harshit Ghosh
feat: implement robust security middleware, authentication system, and frontend UI components
e4fd6e0 | /* ═══════════════════════════════════════════════════ | |
| ICH Screening — Home / Dashboard Page Styles | |
| ═══════════════════════════════════════════════════ */ | |
| /* ── Landing hero ─────────────────────────────────── */ | |
| .landing-hero { | |
| text-align: center; | |
| padding: 72px 0 48px; | |
| position: relative; | |
| } | |
| .landing-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 5px 14px; | |
| border-radius: 999px; | |
| font-size: .75rem; | |
| font-weight: 700; | |
| letter-spacing: .06em; | |
| text-transform: uppercase; | |
| background: rgba(110,168,254,.1); | |
| border: 1px solid rgba(110,168,254,.25); | |
| color: #6ea8fe; | |
| margin-bottom: 20px; | |
| animation: badge-pop .5s cubic-bezier(.16,1,.3,1) both; | |
| } | |
| @keyframes badge-pop { | |
| from { opacity: 0; transform: scale(.85); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| .badge-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: #6ea8fe; | |
| animation: blink 1.8s ease-in-out infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: .3; } | |
| } | |
| .landing-hero h1 { | |
| font-size: clamp(2.2rem, 5vw, 3.4rem); | |
| font-weight: 900; | |
| line-height: 1.12; | |
| letter-spacing: -.04em; | |
| margin-bottom: 18px; | |
| animation: hero-in .6s cubic-bezier(.16,1,.3,1) .1s both; | |
| } | |
| @keyframes hero-in { | |
| from { opacity: 0; transform: translateY(22px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .hero-grad { | |
| background: linear-gradient(135deg, #6ea8fe 0%, #a78bfa 55%, #6366f1 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .landing-hero p { | |
| font-size: 1.1rem; | |
| color: #8ba0c4; | |
| max-width: 580px; | |
| margin: 0 auto 36px; | |
| line-height: 1.7; | |
| animation: hero-in .6s cubic-bezier(.16,1,.3,1) .2s both; | |
| } | |
| .hero-cta-row { | |
| display: flex; | |
| gap: 12px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| animation: hero-in .6s cubic-bezier(.16,1,.3,1) .3s both; | |
| } | |
| .btn-hero-primary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 13px 30px; | |
| background: linear-gradient(135deg, #6ea8fe, #6366f1); | |
| color: #fff; | |
| text-decoration: none; | |
| border-radius: 14px; | |
| font-weight: 700; | |
| font-size: .96rem; | |
| border: none; | |
| box-shadow: 0 4px 22px rgba(110,168,254,.35); | |
| transition: opacity .2s, transform .15s, box-shadow .2s; | |
| cursor: pointer; | |
| } | |
| .btn-hero-primary:hover { | |
| opacity: .9; | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 28px rgba(110,168,254,.45); | |
| color: #fff; | |
| } | |
| .btn-hero-secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 13px 28px; | |
| background: transparent; | |
| border: 1px solid #243356; | |
| color: #8ba0c4; | |
| text-decoration: none; | |
| border-radius: 14px; | |
| font-weight: 600; | |
| font-size: .94rem; | |
| cursor: pointer; | |
| transition: all .2s; | |
| } | |
| .btn-hero-secondary:hover { | |
| border-color: #6ea8fe; | |
| color: #6ea8fe; | |
| background: rgba(110,168,254,.06); | |
| } | |
| /* ── Stats grid ───────────────────────────────────── */ | |
| .stats-section { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| gap: 12px; | |
| margin: 48px 0 0; | |
| } | |
| .stat-card { | |
| background: linear-gradient(180deg, #162244, #111c33); | |
| border: 1px solid #243356; | |
| border-radius: 14px; | |
| padding: 18px 16px; | |
| animation: card-in .5s cubic-bezier(.16,1,.3,1) both; | |
| transition: transform .2s, box-shadow .2s; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 24px rgba(0,0,0,.3); | |
| } | |
| @keyframes card-in { | |
| from { opacity: 0; transform: translateY(14px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .stat-label { | |
| font-size: .78rem; | |
| color: #8ba0c4; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: .05em; | |
| } | |
| .stat-value { | |
| font-size: 1.7rem; | |
| font-weight: 900; | |
| margin-top: 6px; | |
| } | |
| .stat-card.accent-red .stat-value { color: #fb7185; } | |
| .stat-card.accent-green .stat-value { color: #34d399; } | |
| .stat-card.accent-orange .stat-value { color: #fbbf24; } | |
| .stat-card.accent-blue .stat-value { color: #6ea8fe; } | |
| /* ── Section heading ──────────────────────────────── */ | |
| .section-heading { | |
| margin: 52px 0 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .section-heading h2 { | |
| font-size: 1.15rem; | |
| font-weight: 800; | |
| color: #e8ecf6; | |
| letter-spacing: -.02em; | |
| } | |
| .section-line { | |
| flex: 1; | |
| height: 1px; | |
| background: #243356; | |
| } | |
| /* ── Main action cards ────────────────────────────── */ | |
| .action-cards { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 18px; | |
| } | |
| .action-card { | |
| display: block; | |
| text-decoration: none; | |
| background: linear-gradient(135deg, #162244 0%, #111c33 100%); | |
| border: 1px solid #243356; | |
| border-radius: 18px; | |
| padding: 28px; | |
| transition: transform .2s, box-shadow .2s, border-color .2s; | |
| position: relative; | |
| overflow: hidden; | |
| animation: card-in .5s cubic-bezier(.16,1,.3,1) .1s both; | |
| } | |
| .action-card::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(ellipse 300px 200px at 0% 0%, rgba(110,168,254,.07), transparent); | |
| opacity: 0; | |
| transition: opacity .3s; | |
| } | |
| .action-card:hover { | |
| transform: translateY(-4px); | |
| border-color: rgba(110,168,254,.4); | |
| box-shadow: 0 12px 36px rgba(0,0,0,.35); | |
| } | |
| .action-card:hover::before { opacity: 1; } | |
| .action-card-icon { | |
| width: 52px; | |
| height: 52px; | |
| border-radius: 14px; | |
| background: rgba(110,168,254,.1); | |
| border: 1px solid rgba(110,168,254,.18); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #6ea8fe; | |
| margin-bottom: 18px; | |
| transition: background .2s, box-shadow .2s; | |
| } | |
| .action-card:hover .action-card-icon { | |
| background: rgba(110,168,254,.16); | |
| box-shadow: 0 0 18px rgba(110,168,254,.2); | |
| } | |
| .action-card h2 { | |
| font-size: 1.1rem; | |
| font-weight: 800; | |
| color: #e8ecf6; | |
| margin-bottom: 8px; | |
| letter-spacing: -.02em; | |
| } | |
| .action-card p { | |
| font-size: .88rem; | |
| color: #8ba0c4; | |
| line-height: 1.65; | |
| margin-bottom: 16px; | |
| } | |
| .action-card-cta { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| font-size: .84rem; | |
| font-weight: 700; | |
| color: #6ea8fe; | |
| transition: gap .2s; | |
| } | |
| .action-card:hover .action-card-cta { gap: 9px; } | |
| /* ── Mini cards ───────────────────────────────────── */ | |
| .mini-cards { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 14px; | |
| margin-top: 18px; | |
| } | |
| .mini-card { | |
| display: block; | |
| text-decoration: none; | |
| background: #111c33; | |
| border: 1px solid #243356; | |
| border-radius: 14px; | |
| padding: 20px; | |
| transition: transform .2s, border-color .2s, box-shadow .2s; | |
| animation: card-in .5s cubic-bezier(.16,1,.3,1) .2s both; | |
| } | |
| .mini-card:hover { | |
| transform: translateY(-3px); | |
| border-color: rgba(110,168,254,.3); | |
| box-shadow: 0 8px 24px rgba(0,0,0,.25); | |
| } | |
| .mini-card-icon { | |
| color: #6ea8fe; | |
| margin-bottom: 12px; | |
| } | |
| .mini-card h3 { | |
| font-size: .95rem; | |
| font-weight: 700; | |
| color: #e8ecf6; | |
| margin-bottom: 4px; | |
| } | |
| .mini-card p { | |
| font-size: .82rem; | |
| color: #8ba0c4; | |
| line-height: 1.5; | |
| } | |
| /* ── How it works ─────────────────────────────────── */ | |
| .how-section { margin: 52px 0 0; } | |
| .how-steps { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 14px; | |
| margin-top: 18px; | |
| } | |
| .how-step { | |
| background: #111c33; | |
| border: 1px solid #243356; | |
| border-radius: 14px; | |
| padding: 22px; | |
| animation: card-in .5s cubic-bezier(.16,1,.3,1) both; | |
| } | |
| .how-step:nth-child(1) { animation-delay: .05s; } | |
| .how-step:nth-child(2) { animation-delay: .12s; } | |
| .how-step:nth-child(3) { animation-delay: .19s; } | |
| .how-step:nth-child(4) { animation-delay: .26s; } | |
| .how-num { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #6ea8fe, #6366f1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: .78rem; | |
| font-weight: 900; | |
| color: #fff; | |
| margin-bottom: 14px; | |
| box-shadow: 0 0 12px rgba(110,168,254,.35); | |
| } | |
| .how-step h4 { | |
| font-size: .9rem; | |
| font-weight: 700; | |
| color: #e8ecf6; | |
| margin-bottom: 6px; | |
| } | |
| .how-step p { | |
| font-size: .8rem; | |
| color: #8ba0c4; | |
| line-height: 1.6; | |
| } | |
| /* ── Disclaimer ───────────────────────────────────── */ | |
| .disclaimer-box { | |
| margin-top: 40px; | |
| padding: 16px 22px; | |
| border-radius: 14px; | |
| background: rgba(251,191,36,.05); | |
| border: 1px solid rgba(251,191,36,.18); | |
| font-size: .88rem; | |
| line-height: 1.65; | |
| color: #8ba0c4; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| } | |
| .disclaimer-icon { | |
| color: #fbbf24; | |
| flex-shrink: 0; | |
| margin-top: 1px; | |
| } | |
| .disclaimer-box strong { color: #fbbf24; } | |
| /* ── Responsive ───────────────────────────────────── */ | |
| @media (max-width: 900px) { | |
| .stats-section { grid-template-columns: repeat(3, 1fr); } | |
| .how-steps { grid-template-columns: repeat(2, 1fr); } | |
| } | |
| @media (max-width: 640px) { | |
| .action-cards { grid-template-columns: 1fr; } | |
| .mini-cards { grid-template-columns: 1fr 1fr; } | |
| .stats-section { grid-template-columns: repeat(2, 1fr); } | |
| .how-steps { grid-template-columns: 1fr; } | |
| } | |