/* ═══════════════════════════════════════════════════════════ রিদার জন্য — Stylesheet Aesthetic: "ভোরের কাগজ" — warm paper, ink, and a rising sun. Editorial serif Bangla, generous air, one gradient that means something (hope rising) rather than decoration. ═══════════════════════════════════════════════════════════ */ :root{ /* Modern Soothing Palette — Eye Friendly & High Contrast */ --paper: #F8F6F0; /* Soft warm pearl cream (gentle on eyes) */ --paper-2: #FFFFFF; /* Pure white card background */ --paper-3: #F0ECE1; /* Soft divider background */ --ink: #0F172A; /* Rich slate navy (crystal clear readability) */ --ink-2: #334155; /* Medium slate for subtext */ --ink-3: #57637A; /* Soft slate for captions (WCAG AA compliant) */ --rule: #E2E8F0; /* Clean border line */ /* Vibrant & Trustworthy Accents */ --ember: #E11D48; /* Life Crimson Red (Urgency & Blood) */ --amber: #D97706; /* Warm Gold (Fund Raised) */ --gold: #F59E0B; /* Bright Gold */ --pine: #0D5C52; /* Serene Emerald Teal (Medical Trust) */ --pine-2: #08443C; /* Darker Emerald Teal */ --rose: #FB7185; /* Soft Rose */ /* Semantic status */ --good: #059669; /* Emerald Green */ --warn: #D97706; /* Amber Warning */ --bad: #DC2626; /* Crimson Danger */ --sh-1: 0 4px 12px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); --sh-2: 0 10px 25px -5px rgba(15,23,42,.08), 0 8px 10px -6px rgba(15,23,42,.04); --sh-3: 0 25px 50px -12px rgba(15,23,42,.18); --r: 16px; --r-lg: 24px; --f-display: "Tiro Bangla", "Noto Serif Bengali", Georgia, serif; --f-body: "Anek Bangla", "Hind Siliguri", "Segoe UI", sans-serif; --f-en: "Fraunces", "Tiro Bangla", Georgia, serif; --wrap: 1160px; } *,*::before,*::after{ box-sizing:border-box; } /* scroll-padding-bottom: মোবাইলে ভাসমান "সাহায্য করুন" বাটনটা পর্দার নিচের ~৮০px ঢেকে রাখে — অ্যাঙ্কর লিংকে ক্লিক করলে লেখা যেন ওটার নিচে গিয়ে না পড়ে। */ html{ scroll-behavior:smooth; scroll-padding-top:84px; scroll-padding-bottom:96px; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:clamp(17px,1.15vw + 14px,20px); line-height:1.75; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* English mode swaps display face */ body[data-lang="en"]{ --f-display: var(--f-en); } body[data-lang="en"] .hero__name{ letter-spacing:-.03em; } img{ max-width:100%; display:block; } svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; } ::selection{ background:var(--gold); color:var(--ink); } /* ── atmosphere ─────────────────────────────────────────── */ .grain{ position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.32; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } .dawn{ position:fixed; left:50%; top:-42vmin; width:150vmin; height:110vmin; transform:translateX(-50%); z-index:-1; pointer-events:none; background: radial-gradient(closest-side, rgba(232,178,58,.30), rgba(232,178,58,.10) 55%, transparent 72%), radial-gradient(closest-side at 60% 60%, rgba(180,56,15,.14), transparent 70%); filter:blur(6px); } /* ── layout helpers ─────────────────────────────────────── */ .wrap{ width:min(var(--wrap), 92vw); margin-inline:auto; } .wrap--narrow{ width:min(760px, 92vw); } .section{ padding:clamp(64px,9vw,124px) 0; position:relative; } .kicker{ font-size:.86rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); margin:0 0 .7rem; display:flex; align-items:center; gap:.6rem; } .kicker::before{ content:""; width:28px; height:2px; background:currentColor; opacity:.7; } .h-lg{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.1rem,4.4vw,3.3rem); line-height:1.24; margin:0 0 1.4rem; letter-spacing:-.01em; color:var(--ink); } .h-md{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.75rem,3.4vw,2.6rem); line-height:1.28; margin:0 0 1rem; color:var(--ink); } .h-sm{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.4rem,2.4vw,1.85rem); line-height:1.32; margin:0 0 .6rem; color:var(--ink); } .muted{ color:var(--ink-3); } .mb{ margin-bottom:2rem; max-width:62ch; } /* ── reveal ─────────────────────────────────────────────── */ .reveal{ opacity:1 !important; transform:none !important; } .no-js .reveal, .no-js .method { opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } html{ scroll-behavior:auto; } } /* ── buttons ────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; border:1px solid transparent; border-radius:100px; cursor:pointer; font-weight:700; letter-spacing:.005em; line-height:1; transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, background .22s, color .22s; text-align:center; } .btn--sm{ padding:.7em 1.3em; font-size:.94rem; min-height:44px; min-width:44px; } .btn--lg{ padding:1.1em 2em; font-size:1.08rem; min-height:48px; } .btn__arrow,.btn__ico{ width:1.15em; height:1.15em; stroke-width:2.2; } .btn--solid{ background:linear-gradient(135deg,var(--ember), #BE123C 60%,var(--amber)); color:#FFFFFF; box-shadow:0 10px 24px -8px rgba(225,29,69,.55); } .btn--solid:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(225,29,69,.65); } .btn--solid:active{ transform:translateY(0); } .btn--solid .btn__arrow{ transition:transform .25s; } .btn--solid:hover .btn__arrow{ transform:translateX(4px); } .btn--ghost{ background:#FFFFFF; border:1.5px solid var(--rule); color:var(--ink); box-shadow:var(--sh-1); } .btn--ghost:hover{ border-color:var(--pine); color:var(--pine); transform:translateY(-2px); box-shadow:var(--sh-2); } /* ── urgent ticker ──────────────────────────────────────── */ .urgent{ position:relative; z-index:60; overflow:hidden; background:var(--pine); color:#FFFFFF; font-size:.95rem; font-weight:600; letter-spacing:.02em; padding:.65rem 0; box-shadow:0 2px 8px rgba(0,0,0,0.1); } .urgent__track{ display:flex; white-space:nowrap; gap:5rem; animation:tick 34s linear infinite; padding-left:1rem; } .urgent__track span::before{ content:"◆ "; color:var(--amber); } @keyframes tick{ to{ transform:translateX(-50%); } } @media (prefers-reduced-motion:reduce){ .urgent__track{ animation:none; } } /* ── nav ────────────────────────────────────────────────── */ .nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:1.6rem; padding:.95rem clamp(1rem,4vw,2.4rem); background:rgba(248,246,240,.92); backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid rgba(226,232,240,.8); transition:border-color .3s, box-shadow .3s; } .nav.stuck{ border-bottom-color:var(--rule); box-shadow:0 6px 24px -12px rgba(15,23,42,.12); } .nav__brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--f-display); font-weight:700; font-size:1.2rem; color:var(--ink); white-space:nowrap; } .nav__dot{ width:10px; height:10px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 4px rgba(225,29,69,.2); } .nav__links{ display:flex; gap:1.8rem; margin-inline:auto; font-size:.98rem; font-weight:600; color:var(--ink-2); } .nav__links a{ position:relative; padding-block:.2rem; white-space:nowrap; } .nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--ember); transition:right .3s cubic-bezier(.2,.8,.3,1); } .nav__links a:hover::after{ right:0; } .nav__actions{ display:flex; align-items:center; gap:.8rem; white-space:nowrap; } .langtoggle{ display:inline-flex; border:1.5px solid var(--rule); border-radius:100px; padding:3px; background:#FFFFFF; cursor:pointer; min-height:44px; align-items:center; } .langtoggle__opt{ padding:.38em .8em; font-size:.82rem; font-weight:700; border-radius:100px; color:var(--ink-3); transition:.22s; } .langtoggle__opt.is-on{ background:var(--pine); color:#FFFFFF; } /* Hamburger Toggle Button (Minimum 44x44px Touch Target) */ .nav__burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: none; cursor: pointer; margin-left: 0.2rem; z-index: 60; -webkit-tap-highlight-color: transparent; } .nav__burger span { display: block; width: 24px; height: 2.5px; background-color: var(--ink); border-radius: 4px; transition: transform 0.3s cubic-bezier(.2,.8,.3,1), opacity 0.25s ease; } /* Active Hamburger Animation */ .nav__burger.is-active span:nth-child(1) { transform: translateY(8.25px) rotate(45deg); } .nav__burger.is-active span:nth-child(2) { opacity: 0; } .nav__burger.is-active span:nth-child(3) { transform: translateY(-8.25px) rotate(-45deg); } @media (max-width: 960px) { .nav__burger { display: flex; } .nav__brand { margin-right: auto; } .nav__links { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: rgba(251, 248, 243, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1.5px solid var(--rule); box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.18); padding: 0.8rem 1.2rem 1.2rem; gap: 0.25rem; max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; z-index: 60; /* টিকার (z=60) বা অন্য কিছুর নিচে যেন না পড়ে */ transition: max-height 0.35s cubic-bezier(.2,.8,.3,1), opacity 0.3s ease, visibility 0.3s ease, padding 0.3s ease; } /* ⚠️ আগে এখানে max-height ছিল স্থির 420px + overflow:hidden। ফোনের ফন্ট সাইজ বড় করা থাকলে (বয়স্ক ব্যবহারকারীরা প্রায়ই করেন) বা ফোন আড়াআড়ি ধরলে শেষের লিংকগুলো নিঃশব্দে কেটে যেত — স্ক্রলও করা যেত না। এখন উচ্চতা পর্দার সাথে মিলিয়ে ঠিক হয়, আর বেশি হলে ভেতরে স্ক্রল করা যায়। */ .nav__links.is-open { max-height: calc(100vh - 5.5rem); max-height: calc(100dvh - 5.5rem); /* মোবাইল ব্রাউজারের টুলবার হিসাবে ধরে */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* মেনু স্ক্রল করলে পেছনের পেজ নড়বে না */ opacity: 1; visibility: visible; padding: 0.8rem 1.2rem 1.2rem; } .nav__links a { padding: 0.7rem 1rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); border-radius: 10px; transition: background 0.2s ease, color 0.2s ease; display: flex; align-items: center; } .nav__links a:hover, .nav__links a:active { background: rgba(13, 92, 82, 0.08); color: var(--pine); } .nav__links a::after { display: none; } } /* ── ছোট ফোনে নেভিগেশন ────────────────────────────────────── ⚠️ ৩৭৫px পর্দায় হেডারের জিনিসগুলো ধরত না: ব্র্যান্ড ৯৭ + ভাষা টগল ৮৫ + "রক্ত দিন" ১১৪ + হ্যামবার্গার ৪৪ + ফাঁক ও প্যাডিং = প্রয়োজন ~৪২৬px, জায়গা ৩৭৫px ফলে nav__actions ডানদিকে ৪১০px পর্যন্ত চলে যেত — হ্যামবার্গার পর্দার বাইরে বেরিয়ে যেত আর পুরো পেজ আড়াআড়ি সরে যেত। এখানে ফাঁক ও প্যাডিং কমিয়ে সব ভেতরে আনা হয়েছে। */ @media (max-width: 560px){ .nav{ gap:.5rem; padding-inline:.65rem; } .nav__actions{ gap:.4rem; } .nav__brand{ font-size:1rem; min-width:0; } .langtoggle__opt{ padding:.32em .55em; font-size:.72rem; } /* "🩸 রক্ত দিন" — লেখা রেখেই একটু সরু করা */ .nav__actions .btn--sm{ padding:.6em .85em; font-size:.84rem; } } /* খুব সরু ফোনে (≤৩৬০px) ভাষা টগল লুকিয়ে জায়গা বাঁচাই। ভাষা বদলানো যাবে মেনুর ভেতর থেকে — নিচে যোগ করা হয়েছে। */ @media (max-width: 360px){ .nav__actions .langtoggle{ display:none; } .nav__links .langtoggle--inmenu{ display:inline-flex; } } .nav__links .langtoggle--inmenu{ display:none; align-self:flex-start; margin-top:.5rem; } /* ── hero ───────────────────────────────────────────────── */ .hero{ padding:clamp(48px,7vw,90px) 0 clamp(56px,8vw,110px); background:linear-gradient(135deg, rgba(13,92,82,0.05) 0%, rgba(248,246,240,1) 100%); border-bottom:1px solid var(--paper-3); } .hero__grid{ width:min(var(--wrap),92vw); margin-inline:auto; display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(2rem,5vw,5rem); align-items:center; } .eyebrow{ display:inline-flex; align-items:center; gap:.65rem; font-size:.88rem; font-weight:700; color:var(--pine); background:rgba(13,92,82,.09); border:1px solid rgba(13,92,82,.2); padding:.5em 1.2em; border-radius:100px; margin:0 0 1.5rem; } .eyebrow__pulse{ width:8px; height:8px; border-radius:50%; background:var(--ember); animation:pulse 2.2s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(225,29,69,.5) } 70%{ box-shadow:0 0 0 8px rgba(225,29,69,0) } } .hero__name{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.8rem,7.5vw,5.5rem); line-height:1.02; margin:0 0 1rem; letter-spacing:-.015em; color:var(--ink); } .hero__name-bn{ display:block; } .hero__name-em{ display:block; font-style:italic; background:linear-gradient(102deg,var(--ember), #BE123C 48%,var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero__meta{ font-size:1.02rem; font-weight:600; color:var(--ink-2); margin:0 0 1.6rem; display:flex; flex-wrap:wrap; gap:.6rem; } .hero__meta .sep{ opacity:.45; } .hero__lede{ font-size:clamp(1.08rem,1.35vw,1.25rem); color:var(--ink-2); max-width:54ch; margin:0 0 2.2rem; line-height:1.7; } .hero__cta{ display:flex; flex-wrap:wrap; gap:.95rem; } .hero__sharenote{ margin:1rem 0 0; font-size:.92rem; color:var(--ink-3); font-style:italic; } .polaroid{ margin:0; padding:16px 16px 0; background:#FFFFFF; box-shadow:var(--sh-2); border-radius:12px; border:1px solid var(--rule); transform:rotate(-2deg); position:relative; transition:transform .5s cubic-bezier(.2,.8,.3,1), box-shadow .5s; } .polaroid:hover{ transform:rotate(-.5deg) translateY(-8px); box-shadow:var(--sh-3); } .polaroid__tape{ position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg); width:110px; height:30px; background:rgba(217,119,6,.28); border-left:1px dashed rgba(217,119,6,.4); border-right:1px dashed rgba(217,119,6,.4); backdrop-filter:blur(1px); } .polaroid__img{ aspect-ratio:4/5; background:var(--paper-3); border-radius:8px; overflow:hidden; display:grid; place-items:center; } .polaroid__img img{ width:100%; height:100%; object-fit:cover; } .polaroid__ph{ display:grid; place-items:center; gap:.6rem; color:var(--ink-3); font-size:.72rem; text-align:center; padding:1rem; } .polaroid__ph svg{ width:44px; height:44px; opacity:.4; } .polaroid figcaption{ font-family:var(--f-display); font-style:italic; font-size:.86rem; color:var(--ink-3); text-align:center; padding:.9rem .4rem 1.1rem; } @media (max-width:860px){ .hero__grid{ grid-template-columns:1fr; } .polaroid{ max-width:320px; margin-inline:auto; order:-1; transform:rotate(-1.5deg); } } /* ── progress ───────────────────────────────────────────── */ .progress{ background:linear-gradient(180deg,transparent, rgba(239,228,210,.55) 18%, rgba(239,228,210,.55) 82%, transparent); } .progress__grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; margin-bottom:clamp(3rem,6vw,5rem); } .dial{ position:relative; width:clamp(200px,26vw,268px); aspect-ratio:1; justify-self:center; } .dial__svg{ width:100%; height:100%; transform:rotate(-90deg); } .dial__track{ stroke:rgba(120,100,70,.15); stroke-width:14; } .dial__fill{ stroke:url(#dialGrad); stroke-width:14; stroke-linecap:round; stroke-dasharray:628.3; stroke-dashoffset:628.3; transition:stroke-dashoffset 1.8s cubic-bezier(.2,.75,.25,1); filter:drop-shadow(0 4px 12px rgba(180,56,15,.28)); } .dial__center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:.1rem; } .dial__pct{ font-family:var(--f-display); font-size:clamp(2.2rem,4.6vw,3.1rem); line-height:1; color:var(--ink); } .dial__lbl{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); } .bignum{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.9rem; margin:0 0 1.25rem; } .bignum__val{ font-family:var(--f-display); font-size:clamp(2.3rem,5.6vw,3.6rem); line-height:1; letter-spacing:-.01em; } .bignum__of{ font-size:.92rem; color:var(--ink-3); display:flex; gap:.4rem; } .bignum__of b{ color:var(--ink-2); font-weight:600; } .bar{ height:11px; border-radius:100px; background:rgba(120,100,70,.15); overflow:hidden; margin-bottom:1.9rem; } .bar__fill{ height:100%; width:0; border-radius:100px; background:linear-gradient(90deg,var(--ember),var(--amber) 60%,var(--gold)); transition:width 1.8s cubic-bezier(.2,.75,.25,1); position:relative; } .bar__fill::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); transform:translateX(-100%); animation:shimmer 3.4s ease-in-out infinite 1.6s; } @keyframes shimmer{ to{ transform:translateX(200%) } } .ministats{ list-style:none; margin:0 0 1.4rem; padding:0; display:flex; flex-wrap:wrap; gap:2.2rem; } .ministats li{ display:flex; flex-direction:column; gap:.15rem; } .ministats b{ font-family:var(--f-display); font-size:1.5rem; font-weight:400; line-height:1.1; } .ministats span{ font-size:.8rem; color:var(--ink-3); } .stamp{ margin:0; font-size:.78rem; color:var(--ink-3); display:inline-flex; gap:.4rem; border:1px dashed var(--rule); padding:.4em .9em; border-radius:6px; } /* ── টাকার প্রবাহ: সংগৃহীত − খরচ = হাতে আছে ───────────────── সমীকরণের মতো সাজানো, যাতে দাতা নিজেই মিলিয়ে নিতে পারেন। "হাতে আছে" ঘরটা আলাদা রঙে, কারণ ওটাই সবচেয়ে জরুরি সংখ্যা। */ .moneyflow{ display:flex; align-items:stretch; gap:.5rem; flex-wrap:wrap; margin:0 0 1.4rem; padding:1rem 1.1rem; background:#fff; border:1px solid var(--rule); border-radius:16px; box-shadow:var(--sh-1); } .moneyflow__item{ display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1 1 30%; } .moneyflow__item b{ font-family:var(--f-display); font-size:clamp(1.15rem,3.2vw,1.55rem); line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; } .moneyflow__item span{ font-size:.78rem; color:var(--ink-3); font-weight:600; line-height:1.35; } .moneyflow__op{ display:flex; align-items:center; color:var(--ink-3); font-size:1.15rem; font-weight:700; flex:none; padding-inline:.1rem; } .moneyflow__item--balance b{ color:var(--pine); } .moneyflow__item--balance span{ color:var(--pine); } @media (max-width:520px){ /* সরু ফোনে সমীকরণ ভেঙে গেলে পড়া কঠিন — তাই উপর-নিচে সাজাই */ .moneyflow{ flex-direction:column; gap:.15rem; padding:.9rem 1rem; } .moneyflow__item{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:1rem; } .moneyflow__item b{ order:2; } .moneyflow__item span{ order:1; } .moneyflow__op{ display:none; } .moneyflow__item--balance{ border-top:1px solid var(--rule); margin-top:.45rem; padding-top:.5rem; } } /* ── আসার পথে থাকা টাকা ───────────────────────────────────── ইচ্ছে করেই মূল সংখ্যার চেয়ে নরম ও ছোট করে রাখা — যাতে দাতা এক নজরেই বোঝেন এটা "হাতে আছে" নয়, "আসছে"। ড্যাশ করা বর্ডার সেই অস্থায়ী ভাবটাই বোঝায়। */ .intransit{ display:flex; align-items:flex-start; gap:.8rem; margin:0 0 1.1rem; padding:.85rem 1rem; background:rgba(217,119,6,.06); border:1px dashed rgba(217,119,6,.45); border-radius:12px; } .intransit__icon{ flex:none; width:26px; height:26px; color:var(--amber); margin-top:.1rem; } .intransit__icon svg{ width:100%; height:100%; stroke-width:2; } .intransit__text{ display:flex; flex-direction:column; gap:.15rem; min-width:0; } .intransit__text b{ font-family:var(--f-display); font-size:1.25rem; line-height:1.2; color:var(--ink); font-variant-numeric:tabular-nums; } .intransit__text span{ font-size:.82rem; font-weight:600; color:var(--warn); } .intransit__text em{ font-style:normal; font-size:.78rem; color:var(--ink-3); line-height:1.5; } .intransit[hidden]{ display:none; } @media (max-width:760px){ .progress__grid{ grid-template-columns:1fr; } } /* breakdown */ .breakdown{ margin-bottom:clamp(2.5rem,5vw,4rem); } /* দুই কলামে সাজানো — ৮টা খাত এক পর্দাতেই ধরে যায়। ৬৪০px-এর নিচে নিজে থেকেই এক কলামে নেমে আসে। */ .breakdown__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); column-gap:clamp(1.5rem,4vw,3rem); border-top:1px solid var(--rule); } .breakdown__list li{ display:grid; grid-template-columns:1fr auto; gap:.15rem .9rem; align-items:baseline; padding:.72rem 0 .62rem; border-bottom:1px solid var(--rule); position:relative; } .breakdown__list li::before{ content:""; position:absolute; left:-10px; right:-10px; top:0; bottom:0; background:rgba(13,92,82,.06); opacity:0; transition:opacity .25s; border-radius:8px; z-index:-1; } .breakdown__list li:hover::before{ opacity:1; } .bd__label{ font-size:.94rem; font-weight:600; color:var(--ink-2); line-height:1.45; } .bd__amt{ font-family:var(--f-display); font-size:1.06rem; font-weight:700; white-space:nowrap; color:var(--ink); font-variant-numeric:tabular-nums; } .bd__bar{ grid-column:1/-1; height:3px; margin-top:.3rem; background:rgba(15,23,42,.07); border-radius:3px; overflow:hidden; } .bd__bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--pine),var(--amber)); width:0; transition:width 1.1s cubic-bezier(.2,.75,.25,1); } /* মোট — দুই কলাম জুড়ে, নিচে আলাদা করে */ .bd__total{ grid-column:1/-1; border-bottom:none !important; margin-top:.5rem; padding-top:.9rem !important; border-top:2px solid var(--ink); } .bd__total .bd__label{ color:var(--ink); font-weight:700; font-size:1rem; } .bd__total .bd__amt{ font-size:1.3rem; color:var(--ember); } .bd__total::before{ display:none; } /* ── স্ট্যাটাস ব্যাজ ───────────────────────────────────────── .badge ক্লাসগুলো HTML-এ ব্যবহার হচ্ছিল কিন্তু CSS-এ কোথাও সংজ্ঞায়িত ছিল না — তাই ট্যাগগুলো সাধারণ লেখা হয়ে যাচ্ছিল। */ .badge{ display:inline-block; padding:.28em .7em; border-radius:100px; font-size:.76rem; font-weight:700; line-height:1.45; white-space:normal; background:rgba(15,23,42,.06); color:var(--ink-2); } .badge--success{ background:rgba(5,150,105,.12); color:#046C4E; } .badge--ember{ background:rgba(225,29,69,.10); color:#B3123A; } .badge--warn{ background:rgba(217,119,6,.13); color:#96530B; } .badge--info{ background:rgba(2,132,199,.12); color:#0A6A9C; } /* ── অন্যান্য মেডিকেল টেস্টের টেবিল ───────────────────────── ডেস্কটপে সাধারণ টেবিল। ৭০০px-এর নিচে প্রতিটা সারি একটা কার্ডে পরিণত হয় — কারণ ৫ কলামের টেবিল ফোনে অর্ধেক কেটে যেত। */ .testtable-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .testtable{ width:100%; border-collapse:collapse; text-align:left; font-size:.9rem; } .testtable th{ padding:.75rem 1rem; background:var(--paper-3); color:var(--ink-2); font-weight:700; font-size:.8rem; border-bottom:2px solid var(--rule); white-space:nowrap; } .testtable td{ padding:.75rem 1rem; border-bottom:1px solid var(--rule); vertical-align:top; color:var(--ink-2); } .testtable tbody tr:nth-child(even){ background:rgba(15,23,42,.015); } .testtable tbody tr:last-child td{ border-bottom:none; } .tt__name{ font-weight:700; color:var(--ink) !important; } .tt__val{ font-weight:600; } .tt__val--good{ font-weight:700; color:var(--good) !important; } .tt__val--bad{ font-weight:700; color:var(--bad) !important; } @media (max-width:700px){ .testtable-wrap{ overflow-x:visible; } .testtable, .testtable tbody, .testtable tr, .testtable td{ display:block; width:100%; } .testtable thead{ display:none; } .testtable tbody tr{ border:1px solid var(--rule); border-radius:14px; padding:.9rem 1.1rem; margin-bottom:.8rem; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.04); } .testtable tbody tr:nth-child(even){ background:#fff; } .testtable tbody tr:last-child{ margin-bottom:0; } .testtable td{ display:grid; grid-template-columns:5.2rem 1fr; gap:.7rem; align-items:baseline; padding:.32rem 0; border-bottom:none; } .testtable td::before{ content:attr(data-l); font-size:.7rem; font-weight:700; letter-spacing:.03em; color:var(--ink-3); white-space:nowrap; } /* প্রথম ঘরটা কার্ডের শিরোনাম — লেবেল ছাড়া, নিচে একটা বিভাজক */ .testtable td.tt__name{ grid-template-columns:1fr; font-size:.98rem; line-height:1.4; padding:0 0 .55rem; margin-bottom:.45rem; border-bottom:1px dashed var(--rule); } .testtable td.tt__name::before{ display:none; } /* গ্রিড আইটেম হওয়ায় ব্যাজ পুরো কলাম জুড়ে ছড়িয়ে যাচ্ছিল */ .testtable td .badge{ justify-self:start; } } /* মোবাইলে আরও কমপ্যাক্ট — লেবেলগুলো এখন এক লাইনেই ধরে, তাই সারি ছোট করা যায় */ @media (max-width:640px){ .breakdown__list li{ padding:.6rem 0 .5rem; } .bd__label{ font-size:.9rem; } .bd__amt{ font-size:1rem; } .bd__bar{ margin-top:.26rem; } .bd__total .bd__label{ font-size:.95rem; } .bd__total .bd__amt{ font-size:1.18rem; } } /* impact */ .impact__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.2rem; } .impact__card{ background:#FFFFFF; border:1px solid var(--rule); border-radius:var(--r); padding:1.5rem 1.3rem; box-shadow:var(--sh-1); transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s; } .impact__card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--pine); } .impact__amt{ font-family:var(--f-display); font-size:1.85rem; font-weight:700; line-height:1; color:var(--ember); display:block; margin-bottom:.5rem; } .impact__txt{ font-size:.96rem; font-weight:500; color:var(--ink-2); line-height:1.65; } /* ── story ──────────────────────────────────────────────── */ .prose p{ margin:0 0 1.45rem; color:var(--ink-2); font-size:1.12rem; line-height:1.75; } .prose .dropcap::first-letter{ font-family:var(--f-display); float:left; font-size:3.6em; line-height:.82; padding:.08em .12em 0 0; color:var(--ember); font-weight:700; } .prose blockquote{ margin:2rem 0; padding:.4rem 0 .4rem 1.8rem; border-left:4px solid var(--amber); font-family:var(--f-display); font-style:italic; font-size:1.32rem; line-height:1.6; color:var(--ink); } .prose__close{ margin-top:2rem; padding:1.6rem 1.8rem; background:rgba(13,92,82,.07); border:1px solid rgba(13,92,82,.2); border-radius:var(--r); color:var(--ink) !important; font-size:1.08rem; } /* ── labs ───────────────────────────────────────────────── */ .labs__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-top:2rem; } .lab{ background:#FFFFFF; border:1px solid var(--rule); border-radius:var(--r-lg); padding:1.5rem 1.5rem 1.2rem; box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:.75rem; transition:transform .25s, box-shadow .25s; } .lab:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); } .lab__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; } .lab__name{ font-size:.98rem; font-weight:700; color:var(--ink); } .lab__normal{ font-size:.78rem; color:var(--ink-3); margin-top:.15rem; } .lab__now{ font-family:var(--f-display); font-size:1.65rem; font-weight:700; line-height:1; text-align:right; white-space:nowrap; color:var(--ink); } .lab__unit{ font-size:.72rem; color:var(--ink-3); display:block; text-align:right; margin-top:.2rem; } .lab__spark{ width:100%; height:56px; } .lab__spark .ln{ stroke-width:2.4; fill:none; } .lab__spark .ar{ stroke:none; } .lab__delta{ font-size:.82rem; display:inline-flex; align-items:center; gap:.35rem; font-weight:700; } .lab__delta.up{ color:var(--good); } .lab__delta.dn{ color:var(--bad); } .lab__delta.fl{ color:var(--ink-3); } /* ── timeline ───────────────────────────────────────────── */ .tl{ list-style:none; margin:2.4rem 0 0; padding:0; position:relative; } .tl::before{ content:""; position:absolute; left:7px; top:12px; bottom:12px; width:2px; background:linear-gradient(180deg,var(--amber),var(--rule) 30%,var(--rule)); } .tl__item{ position:relative; padding:0 0 2.4rem 2.4rem; } .tl__node{ position:absolute; left:0; top:8px; width:16px; height:16px; border-radius:50%; background:#FFFFFF; border:3px solid var(--rule); z-index:1; } .tl__item--good .tl__node{ border-color:var(--good); } .tl__item--hard .tl__node{ border-color:var(--bad); } .tl__item--neutral .tl__node{ border-color:var(--amber); } .tl__item--star .tl__node{ background:var(--gold); border-color:var(--ember); box-shadow:0 0 0 5px rgba(245,158,11,.25); } .tl__date{ font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:.7rem; margin-bottom:.4rem; } .tl__tag{ font-size:.72rem; font-weight:700; padding:.2em .7em; border-radius:100px; text-transform:none; } .tl__tag--good{ background:rgba(5,150,105,.12); color:var(--good); } .tl__tag--hard{ background:rgba(220,38,38,.12); color:var(--bad); } .tl__tag--neutral{ background:rgba(217,119,6,.14); color:var(--warn); } .tl__title{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.35; margin:0 0 .6rem; color:var(--ink); } .tl__item--star .tl__title{ color:var(--ember); } .tl__body{ color:var(--ink-2); font-size:1.08rem; line-height:1.7; margin:0 0 Matrix; max-width:66ch; } .tl__card{ background:#FFFFFF; border:1px solid var(--rule); border-radius:var(--r-lg); padding:1.6rem 1.6rem 1.4rem; box-shadow:var(--sh-1); } .tl__item--star .tl__card{ border-color:rgba(245,158,11,.5); background:linear-gradient(180deg,rgba(245,158,11,.08),#FFFFFF 40%); box-shadow:var(--sh-2); } .tl__metrics{ display:flex; flex-wrap:wrap; gap:.55rem; margin:0 0 .9rem; padding:0; list-style:none; } .tl__metric{ border:1px solid var(--rule); border-radius:9px; padding:.5rem .8rem; background:var(--paper); min-width:96px; } .tl__metric small{ display:block; font-size:.7rem; color:var(--ink-3); margin-bottom:.15rem; } .tl__metric b{ font-family:var(--f-display); font-weight:400; font-size:1.06rem; } .tl__metric b i{ font-style:normal; font-size:.72rem; color:var(--ink-3); margin-left:.2rem; } .tl__metric[data-s="good"]{ border-color:rgba(46,125,91,.35); } .tl__metric[data-s="warn"]{ border-color:rgba(192,123,30,.42); } .tl__more{ background:rgba(13,92,82,.07); border:1px solid rgba(13,92,82,.22); border-radius:10px; padding:.65rem 1.1rem; min-height:44px; cursor:pointer; font-size:.9rem; font-weight:600; color:var(--pine); display:inline-flex; align-items:center; gap:.5rem; margin-top:.7rem; transition:all .22s cubic-bezier(.2,.8,.3,1); box-shadow:0 2px 6px rgba(0,0,0,0.03); } .tl__more:hover, .tl__more:active{ background:rgba(13,92,82,.14); border-color:var(--pine); transform:translateY(-1px); } .tl__more svg{ width:.9em; height:.9em; stroke-width:2.4; transition:transform .25s; } .tl__more[aria-expanded="true"] svg{ transform:rotate(180deg); } .tl__clinical{ margin-top:.9rem; padding:.9rem 1rem; border-radius:10px; background:var(--paper-2); border:1px solid var(--rule); font-size:.87rem; color:var(--ink-2); font-family:ui-monospace,"Anek Bangla",monospace; line-height:1.65; } .tl__clinical[hidden]{ display:none; } .tl__files{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; } /* ও