/* ========================================================= Rangpur Blood Donation Society (RBDS) — Design System Signature: "pulse-to-drop" line motif (heartbeat -> blood drop) ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); /* Prevent empty "tofu" boxes if the Font Awesome webfont is still loading — hide icon glyphs until the font is ready instead of showing a fallback box. */ .fa-solid, .fa-regular, .fa-brands, .fas, .far, .fab{ font-display: swap; } .fonts-loading .fa-solid, .fonts-loading .fa-regular, .fonts-loading .fa-brands, .fonts-loading .fas, .fonts-loading .far, .fonts-loading .fab{ visibility: hidden; } :root{ /* --- Color tokens --- */ --red: #E21B23; --red-dark: #A8121A; --red-deep: #7A0D12; --red-50: #FFF6F6; --red-100: #FFE8E9; --red-200: #FFD0D2; --ink: #1B1B1F; --ink-soft: #5B5C63; --ink-faint: #8B8C93; --paper: #FFFFFF; --line: #F0E7E7; --line-strong:#E7D8D8; --success: #1E8E5A; --success-bg: #EAF7F1; --warning: #B4670A; --warning-bg: #FDF3E4; --info-bg: #F6F6F8; /* --- Surfaces / theme-swappable tokens --- */ --surface: #FFFFFF; --navbar-bg: rgba(255,255,255,.86); --hero-bg-top: #FFF8F8; --hero-bg-bot: #FFFFFF; --blob-1: #FFD0D2; --blob-2: #FFE8E9; --why-bg-top: #FFFFFF; --overlay-bg: rgba(0,0,0,.4); /* --- Type --- */ --font-bn: 'Noto Sans Bengali', 'Manrope', sans-serif; --font-head:'Manrope', 'Noto Sans Bengali', sans-serif; --font-body:'Inter', 'Noto Sans Bengali', sans-serif; /* --- Shape / motion --- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 26px; --shadow-soft: 0 2px 10px rgba(122,13,18,0.06), 0 1px 2px rgba(122,13,18,0.05); --shadow-lift: 0 18px 40px -14px rgba(122,13,18,0.28); --ease: cubic-bezier(.22,1,.36,1); } /* ========================================================= Dark mode — overrides the same tokens above. Toggled by setting data-theme="dark" on (see i18n.js) ========================================================= */ html[data-theme="dark"]{ --red: #FF5C62; --red-dark: #FF9A9E; --red-deep: #FFC7C9; --red-50: #241416; --red-100: #2E1719; --red-200: #4A2226; --ink: #F2ECEC; --ink-soft: #C9C0C0; --ink-faint: #948C8C; --paper: #120E0E; --line: #2A2222; --line-strong:#3B3030; --success: #3FDB92; --success-bg: #10301F; --warning: #FFB454; --warning-bg: #3A2A0E; --info-bg: #1C1717; --surface: #1C1616; --navbar-bg: rgba(18,14,14,.86); --hero-bg-top: #1B1213; --hero-bg-bot: #120E0E; --blob-1: rgba(226,27,35,.20); --blob-2: rgba(226,27,35,.10); --why-bg-top: #120E0E; --overlay-bg: rgba(0,0,0,.6); } html[data-theme="dark"] .skeleton{ background:linear-gradient(90deg,#221B1B 25%,#2C2222 37%,#221B1B 63%); background-size:400% 100%; } html[data-theme="dark"] img:not(.no-dim){ filter:brightness(.92); } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.55; transition:background-color .25s var(--ease), color .25s var(--ease); } h1,h2,h3,h4,.font-head{ font-family:var(--font-head); letter-spacing:-0.01em; } .font-bn{ font-family:var(--font-bn); } p, span, li, a, button, input, textarea, select, label{ font-family:inherit; } :lang(bn), [data-bn]{ font-family:var(--font-bn); } /* The :lang(bn) rule above (and Tailwind's own base styles) can win the cascade tie against Font Awesome's un-flagged font-family declarations, which silently turns every icon on the site into a blank glyph box. Force the icon font back explicitly so icons always render. */ .fa-solid, .fa-regular, .fas, .far{ font-family:"Font Awesome 6 Free" !important; } .fa-solid, .fas{ font-weight:900 !important; } .fa-regular, .far{ font-weight:400 !important; } .fa-brands, .fab{ font-family:"Font Awesome 6 Brands" !important; font-weight:400 !important; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } ::selection{ background:var(--red-100); color:var(--red-deep); } :focus-visible{ outline:3px solid var(--red); outline-offset:2px; border-radius:6px; } /* --- Layout helpers --- */ .container{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:20px; } @media (min-width:768px){ .container{ padding-inline:32px; } } .section{ padding-block:64px; } @media (min-width:900px){ .section{ padding-block:96px; } } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--red-dark); background:var(--red-50); border:1px solid var(--red-200); padding:6px 14px; border-radius:999px; } /* --- Buttons --- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-head); font-weight:700; font-size:15px; padding:13px 26px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); white-space:nowrap; } .btn:active{ transform:scale(.97); } .btn-primary{ background:var(--red); color:#fff; box-shadow:var(--shadow-lift); } .btn-primary:hover{ background:var(--red-dark); transform:translateY(-2px); box-shadow:0 22px 40px -16px rgba(122,13,18,.4); } .btn-outline{ background:var(--surface); color:var(--red-dark); border-color:var(--red-200); } .btn-outline:hover{ border-color:var(--red); background:var(--red-50); transform:translateY(-2px); } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } .btn-ghost:hover{ border-color:var(--ink-faint); background:var(--info-bg); } .btn-dark{ background:var(--ink); color:#fff; } .btn-dark:hover{ background:#000; transform:translateY(-2px); } .btn-sm{ padding:9px 18px; font-size:13.5px; } .btn-block{ width:100%; } .btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; } .btn-emergency{ background:var(--red); color:#fff; font-family:var(--font-head); font-weight:800; display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px; font-size:13.5px; box-shadow:0 0 0 0 rgba(226,27,35,.5); animation:pulseRing 2.2s infinite; } @keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 rgba(226,27,35,.45); } 70%{ box-shadow:0 0 0 12px rgba(226,27,35,0); } 100%{ box-shadow:0 0 0 0 rgba(226,27,35,0); } } /* --- Cards --- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .25s var(--ease); } .card-hover:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--red-200); } /* --- Navbar --- */ .navbar{ position:sticky; top:0; z-index:100; background:var(--navbar-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:background-color .25s var(--ease), border-color .25s var(--ease); } .nav-link{ font-family:var(--font-head); font-weight:600; font-size:14.5px; color:var(--ink-soft); padding:8px 4px; position:relative; transition:color .2s; } .nav-link::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); } .nav-link:hover, .nav-link.active{ color:var(--red-dark); } .nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); } /* --- Logo mark: drop + RBDS --- */ .logo-drop{ width:38px; height:38px; flex-shrink:0; overflow:visible; filter:drop-shadow(0 4px 8px rgba(226,27,35,.35)); } .logo-wrap{ display:flex; align-items:center; gap:10px; } .logo-text{ font-family:var(--font-head); font-weight:800; font-size:18px; color:var(--ink); line-height:1.1; } .logo-text small{ display:block; font-weight:600; font-size:10.5px; color:var(--ink-faint); letter-spacing:.06em; } /* --- Signature: pulse line divider --- */ .pulse-divider{ width:100%; height:34px; overflow:hidden; } .pulse-divider svg{ width:100%; height:100%; display:block; } .pulse-path{ fill:none; stroke:var(--red-200); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .pulse-path-active{ fill:none; stroke:var(--red); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:340; stroke-dashoffset:340; animation:drawPulse 3.6s var(--ease) infinite; } @keyframes drawPulse{ 0%{ stroke-dashoffset:340; opacity:0; } 8%{ opacity:1; } 55%{ stroke-dashoffset:0; opacity:1; } 85%{ opacity:.15; } 100%{ stroke-dashoffset:-340; opacity:0; } } /* Hero blood-drop signature */ .hero-drop-wrap{ position:relative; display:flex; align-items:center; justify-content:center; } .hero-ring{ position:absolute; border-radius:50%; border:1.5px dashed var(--red-200); animation:spinSlow 26s linear infinite; } @keyframes spinSlow{ to{ transform:rotate(360deg); } } .hero-drop{ animation:floatDrop 4.5s ease-in-out infinite; overflow:visible; } @keyframes floatDrop{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} } /* --- Stat cards --- */ .stat-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px 20px; text-align:left; box-shadow:var(--shadow-soft); transition:background-color .25s var(--ease), border-color .25s var(--ease); } .stat-num{ font-family:var(--font-head); font-weight:800; font-size:clamp(26px,4vw,34px); color:var(--red-dark); } .stat-label{ font-size:13.5px; color:var(--ink-soft); margin-top:2px; } /* --- Blood group buttons --- */ .bg-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:100%; aspect-ratio:1/1; border-radius:16px; border:1.5px solid var(--line-strong); background:var(--surface); font-family:var(--font-head); font-weight:800; font-size:clamp(15px,2.2vw,20px); color:var(--red-dark); cursor:pointer; transition:all .25s var(--ease); } .bg-btn small{ font-family:var(--font-body); font-weight:500; font-size:10px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; } .bg-btn:hover{ background:var(--red); color:#fff; border-color:var(--red); transform:translateY(-4px) scale(1.03); box-shadow:var(--shadow-lift); } .bg-btn:hover small{ color:rgba(255,255,255,.85); } /* --- Badges / pills --- */ .badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; } .badge-available{ background:var(--success-bg); color:var(--success); } .badge-unavailable{ background:var(--info-bg); color:var(--ink-faint); } .badge-urgent{ background:var(--red-100); color:var(--red-dark); } .badge-high{ background:var(--warning-bg); color:var(--warning); } .badge-pending{ background:var(--warning-bg); color:var(--warning); } .badge-fulfilled{ background:var(--success-bg); color:var(--success); } .badge-verified{ background:var(--info-bg); color:var(--ink-soft); } /* Donor / request cards */ .donor-avatar{ width:52px; height:52px; border-radius:50%; background:var(--red-50); color:var(--red-dark); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:17px; border:2px solid var(--red-100); flex-shrink:0; } .bg-chip{ width:44px; height:44px; border-radius:12px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:14px; flex-shrink:0; } /* --- Reveal-on-scroll --- */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:translateY(0); } /* --- Forms --- */ .form-label{ font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--ink); margin-bottom:6px; display:block; } .form-input, .form-select, .form-textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line-strong); background:var(--surface); font-size:14.5px; color:var(--ink); transition:border-color .2s, box-shadow .2s, background-color .25s var(--ease); } .form-input:focus, .form-select:focus, .form-textarea:focus{ border-color:var(--red); box-shadow:0 0 0 4px var(--red-50); outline:none; } .form-hint{ font-size:12.5px; color:var(--ink-faint); margin-top:5px; } .form-error{ font-size:12.5px; color:var(--red-dark); margin-top:5px; display:none; } .field.invalid .form-input, .field.invalid .form-select, .field.invalid .form-textarea{ border-color:var(--red); } .field.invalid .form-error{ display:block; } .step-dot{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); } .step-dot.active{ background:var(--red); } /* Toast */ #toast-root{ position:fixed; bottom:20px; right:20px; z-index:1000; display:flex; flex-direction:column; gap:10px; } .toast{ background:var(--ink); color:#fff; padding:13px 18px; border-radius:12px; font-size:13.5px; font-weight:600; box-shadow:0 14px 30px -10px rgba(0,0,0,.4); display:flex; align-items:center; gap:10px; animation:toastIn .35s var(--ease); } .toast.success{ background:var(--success); } .toast.error{ background:var(--red-dark); } @keyframes toastIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} } /* Skeleton */ .skeleton{ background:linear-gradient(90deg,#F0EAEA 25%,#FAF4F4 37%,#F0EAEA 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px; } @keyframes sk{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} } /* Table */ .data-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; } .data-table th{ text-align:left; font-family:var(--font-head); font-weight:700; color:var(--ink-faint); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; padding:12px 14px; border-bottom:1.5px solid var(--line-strong); } .data-table td{ padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle; } .data-table tr:hover td{ background:var(--red-50); } /* Sidebar (admin) */ .admin-link{ display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:12px; font-weight:600; font-size:14px; color:var(--ink-soft); transition:all .2s; } .admin-link:hover{ background:var(--red-50); color:var(--red-dark); } .admin-link.active{ background:var(--red); color:#fff; } /* Utility */ .text-red{ color:var(--red); } .text-red-dark{ color:var(--red-dark); } .bg-red{ background:var(--red); } .bg-red-50{ background:var(--red-50); } .line{ border-color:var(--line); } .scrollbar-none::-webkit-scrollbar{ display:none; } .scrollbar-none{ -ms-overflow-style:none; scrollbar-width:none; } /* Blob decorative background */ .bg-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; } /* Mobile nav */ .mobile-panel{ background:var(--surface) !important; transform:translateX(100%); transition:transform .35s var(--ease), background-color .25s var(--ease); } .mobile-panel.open{ transform:translateX(0); } .mobile-overlay{ background:var(--overlay-bg) !important; opacity:0; pointer-events:none; transition:opacity .3s; } .mobile-overlay.open{ opacity:1; pointer-events:auto; } /* --- Theme / language toggle buttons (navbar) --- */ .icon-toggle-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); cursor:pointer; flex-shrink:0; transition:all .2s var(--ease); font-size:15px; } .icon-toggle-btn:hover{ border-color:var(--red-200); color:var(--red-dark); background:var(--red-50); } .lang-toggle-btn{ display:inline-flex; align-items:center; justify-content:center; gap:4px; height:40px; padding:0 13px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); cursor:pointer; flex-shrink:0; font-family:var(--font-head); font-weight:700; font-size:12.5px; letter-spacing:.02em; transition:all .2s var(--ease); } .lang-toggle-btn:hover{ border-color:var(--red-200); color:var(--red-dark); background:var(--red-50); } .theme-icon-sun{ display:none; } html[data-theme="dark"] .theme-icon-moon{ display:none; } html[data-theme="dark"] .theme-icon-sun{ display:inline-block; }