/* ========================================================================== BloodDonor.in — global stylesheet Loaded after Bootstrap on every public page (see includes/header.php). Navigation-specific rules live in includes/header.php next to the markup. ========================================================================== */ :root { --primary-color: #dc2626; --secondary-color: #991b1b; --success-color: #16a34a; --warning-color: #d97706; --danger-color: #dc2626; --info-color: #0891b2; --light-color: #f8fafc; --dark-color: #1e293b; --border-radius: 8px; --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ html { /* scroll-padding-top is set in includes/header.php from --bd-nav-h so that in-page anchors are not hidden behind the fixed navbar. */ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #334155; /* Guards against a single wide child pushing the whole page sideways on phones — the most common cause of the "page scrolls left/right" bug. `clip` rather than `hidden`: `hidden` would turn into a scroll container and break the position:sticky elements on the emergency and guide pages. Browsers without `clip` simply keep the old behaviour. */ overflow-x: clip; } /* Media never overflows its column */ img, svg, video, iframe { max-width: 100%; height: auto; } /* Long URLs / unbroken strings must wrap rather than widen the layout */ p, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* -------------------------------------------------------------------------- Accessibility -------------------------------------------------------------------------- */ /* A visible focus ring for keyboard users on every interactive element. :focus-visible keeps it off mouse clicks. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #b91c1c; outline-offset: 2px; border-radius: 4px; } /* Skip-link target should not draw a ring when focused programmatically */ #main-content:focus { outline: none; } /* Honour the OS "reduce motion" preference site-wide. Several pages use infinite float/pulse animations that are uncomfortable for some users. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ .hero-title { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; margin-bottom: 1.5rem; line-height: 1.15; } .hero-subtitle { font-size: clamp(1rem, 2.2vw, 1.25rem); margin-bottom: 2rem; opacity: 0.92; } .section-title { font-size: clamp(1.6rem, 4.5vw, 2.5rem); font-weight: 700; color: #1f2937; margin-bottom: 1rem; line-height: 1.25; } .section-subtitle { font-size: clamp(0.98rem, 2vw, 1.125rem); color: #6b7280; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero-section { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; padding: clamp(3rem, 8vw, 6rem) 0; position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; inset: 0; background: url('data:image/svg+xml,'); pointer-events: none; } .hero-content { position: relative; z-index: 2; } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { border: none; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1); } .card-header { background-color: #f8fafc; border-bottom: 1px solid #e2e8f0; font-weight: 600; } /* Card grids: an wrapping a card must not tint the card's text blue */ a.text-decoration-none .card-title, a.text-decoration-none h1, a.text-decoration-none h2, a.text-decoration-none h3, a.text-decoration-none h4, a.text-decoration-none h5, a.text-decoration-none h6 { color: #1f2937; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { border-radius: var(--border-radius); font-weight: 500; padding: 0.75rem 1.5rem; transition: all 0.3s ease; } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); } .btn-primary:hover, .btn-primary:focus { background-color: var(--secondary-color); border-color: var(--secondary-color); } .btn-primary:hover { transform: translateY(-1px); } .btn-lg { padding: 1rem 2rem; font-size: 1.125rem; } /* Bootstrap's warning palette is yellow-on-white by default, which fails contrast. Darken the text so warning buttons/links stay readable. */ .btn-warning, .btn-warning:hover, .btn-warning:focus { color: #4a2c00; } .btn-outline-warning { color: #8a5300; border-color: #d97706; } .btn-outline-warning:hover, .btn-outline-warning:focus { background-color: #d97706; border-color: #d97706; color: #fff; } /* Same problem on light backgrounds outside buttons */ .bg-white .text-warning, .bg-light .text-warning, .card .text-warning:not(.bi-star):not(.bi-star-fill) { color: #b45309 !important; } /* Adjacent buttons should wrap on narrow screens instead of overflowing */ .btn + .btn { margin-top: 0; } @media (max-width: 575.98px) { .btn-lg { padding: 0.85rem 1.25rem; font-size: 1rem; } } /* Comfortable touch targets on coarse pointers (WCAG 2.5.5). Full-size .btn is already ~46px tall from its own padding. */ @media (pointer: coarse) { .btn-sm, .nav-link, .dropdown-item, .page-link { min-height: 44px; display: flex; align-items: center; } .btn-sm { display: inline-flex; justify-content: center; } } /* -------------------------------------------------------------------------- Stats / blood group / city cards -------------------------------------------------------------------------- */ .stats-section { background-color: #f8fafc; padding: clamp(2.5rem, 6vw, 5rem) 0; } .stat-card { text-align: center; padding: 2rem; background: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: transform 0.3s ease; } .stat-card:hover { transform: translateY(-5px); } .stat-number { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--primary-color); display: block; /* Reserve the line box so the counter animation cannot shift layout */ line-height: 1.1; min-height: 1.1em; font-variant-numeric: tabular-nums; } .stat-label { font-size: 1.125rem; color: #64748b; margin-top: 0.5rem; } .blood-group-card { background: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: 1.5rem; text-align: center; transition: all 0.3s ease; border: 2px solid transparent; } .blood-group-card:hover { border-color: var(--primary-color); transform: translateY(-3px); } .blood-group-icon { width: 60px; height: 60px; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: white; font-size: 1.5rem; font-weight: 700; } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .form-control, .form-select { border-radius: var(--border-radius); border: 1px solid #d1d5db; padding: 0.75rem 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .form-control:focus, .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); } .form-floating > label { color: #6b7280; } /* iOS zooms the viewport when a focused field's text is under 16px. Keeping inputs at 16px on small screens avoids that jarring zoom. */ @media (max-width: 767.98px) { .form-control, .form-select, .form-control-lg, .form-select-lg, input, select, textarea { font-size: 16px; } } /* Required-field marker used across the forms */ .form-label.required::after { content: ' *'; color: var(--primary-color); font-weight: 700; } /* -------------------------------------------------------------------------- Alerts -------------------------------------------------------------------------- */ .alert { border-radius: var(--border-radius); border: none; padding: 1rem 1.25rem; } .alert-success { background-color: #dcfce7; color: #14532d; } .alert-danger { background-color: #fef2f2; color: #7f1d1d; } .alert-warning { background-color: #fefce8; color: #78350f; } .alert-info { background-color: #f0f9ff; color: #1e3a8a; } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .table-responsive { -webkit-overflow-scrolling: touch; } /* Wide tables must never be the reason the page scrolls sideways. */ .table { max-width: 100%; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer { background-color: #1e293b; color: #cbd5e1; padding: clamp(2.5rem, 6vw, 3.75rem) 0 1.875rem; } .footer .footer-heading { /* #dc2626 on #1e293b is only ~3.4:1 — this lighter red clears AA. */ color: #fca5a5; margin-bottom: 1rem; font-size: 1.1rem; font-weight: 700; } .footer a { color: #cbd5e1; text-decoration: none; transition: color 0.3s ease; } .footer a:hover, .footer a:focus { color: #ffffff; text-decoration: underline; } .footer ul li { padding: 0.15rem 0; } .footer .footer-rule { border-color: rgba(255, 255, 255, 0.15); opacity: 1; margin: 2rem 0 1.25rem; } .footer .footer-recommended { background-color: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); } .footer .footer-recommended h2 { color: #fca5a5; } .footer .footer-emergency { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: #fcd34d; } .footer .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 1.1rem; } .footer .social-links a:hover, .footer .social-links a:focus { background: var(--primary-color); color: #fff; } /* -------------------------------------------------------------------------- Back to top -------------------------------------------------------------------------- */ .bd-back-to-top { position: fixed; /* Sits above the left edge so it never covers the support chat bubble, which anchors to the bottom-right. */ left: 1rem; bottom: 1rem; z-index: 1025; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--secondary-color); color: #fff; font-size: 1.15rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); transition: background-color 0.2s ease, transform 0.2s ease; } .bd-back-to-top:hover, .bd-back-to-top:focus { background: var(--primary-color); transform: translateY(-2px); } @media print { .bd-back-to-top { display: none; } } /* -------------------------------------------------------------------------- Search / how-it-works sections -------------------------------------------------------------------------- */ .search-section { background-color: white; padding: 40px 0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1); } .search-card { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; border-radius: var(--border-radius); padding: clamp(1.25rem, 4vw, 2rem); } .how-it-works { padding: clamp(2.5rem, 6vw, 5rem) 0; } .step-card { text-align: center; padding: 2rem 1rem; } .step-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: white; font-size: 2rem; } .step-number { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; background-color: white; color: var(--primary-color); border-radius: 50%; font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* -------------------------------------------------------------------------- Small screens -------------------------------------------------------------------------- */ @media (max-width: 768px) { .stat-number { font-size: 2rem; } .step-icon { width: 60px; height: 60px; font-size: 1.5rem; } } /* -------------------------------------------------------------------------- Loading animation -------------------------------------------------------------------------- */ .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(220, 38, 38, 0.3); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- Utilities NOTE: .shadow / .shadow-sm / .shadow-lg are deliberately NOT redefined here. Overriding them shadowed Bootstrap's own utilities everywhere on the site. -------------------------------------------------------------------------- */ .text-primary { color: var(--primary-color) !important; } .bg-primary { background-color: var(--primary-color) !important; } .border-primary { border-color: var(--primary-color) !important; } /* Keep outline "primary" in step with the red .bg-primary above, so a page never mixes a red primary block with a blue primary button. (Bootstrap 5.1 styles buttons with plain properties, not --bs-btn-* vars.) */ .btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; } .btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.35); } .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; } .rounded { border-radius: var(--border-radius) !important; } .rounded-lg { border-radius: 12px !important; } .rounded-xl { border-radius: 16px !important; } /* Screen-reader-only helper (Bootstrap's .visually-hidden equivalent) */ .bd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }