/* ===================================================================== চকরিয়া HDSS তাপপ্রবাহ সতর্কীকরণ — ডিজাইন সিস্টেম v4.0 --------------------------------------------------------------------- পাবলিক সাইট ও অ্যাডমিন প্যানেল — দুটোই এই একই টোকেন ব্যবহার করে। নীতি: পরিষ্কার ও মিনিমাল বিন্যাস, রঙ শুধু ডেটার অর্থ বোঝাতে। v4.0-এ যা বদলাল: · তাপ-স্তরের প্যালেট নতুন করে তৈরি — আগে সতর্কতা ব্যানারে সাদা লেখা হলুদ পটভূমিতে ২.০:১ কনট্রাস্টে ছিল (পড়া যেত না)। এখন প্রতিটি স্তরের নিজস্ব পাঠযোগ্য লেখার রঙ আছে, সবগুলো WCAG AA (৪.৫:১) উত্তীর্ণ। · স্পেসিং ও টাইপ স্কেল যোগ — আগে ১৫টি এলোমেলো ফন্ট সাইজ ছিল (১০.৫, ১১.৫, ১২.৫, ১৩.৫ px...), h3 বডি টেক্সটের চেয়ে ছোট ছিল। · এলিভেশন হায়ারার্কি — আগে ৬টি আলাদা কম্পোনেন্টে একই ছায়া ছিল। · চার্ট কনটেইনার এখন aspect-ratio ভিত্তিক — মোবাইলে অনুপাত উল্টে যাওয়ার সমস্যা ঠিক হয়েছে। · ডার্ক মোড এখন সত্যিই কাজ করে (আগে index.php-তে data-theme="light" হার্ডকোড করা ছিল, তাই কখনো চালু হতো না)। ===================================================================== */ /* ---------------------------------------------------------- ১. টোকেন */ :root { /* পৃষ্ঠতল ও কালি */ --paper: #F5F7F4; --surface: #FFFFFF; --surface-2: #EDF1EC; --surface-3: #E3E9E1; --ink: #141A19; /* 17.6:1 on white */ --ink-2: #41504C; /* 8.5:1 */ --ink-3: #68766F; /* 4.8:1 — ক্ষুদ্রতম পাঠযোগ্য */ --line: #DCE3DA; --line-2: #C4CFC1; /* ব্র্যান্ড */ --brand: #0B6E6B; --brand-ink: #075350; --brand-soft: #DDEFEC; /* তাপ স্তর ০–৪ — ক্রমবর্ধমান তীব্রতা, প্রতিটির নিজস্ব লেখার রঙ */ --lvl0: #1B7F71; --lvl0-fg: #FFFFFF; --lvl0-soft: #DCEFEB; --lvl1: #E8B325; --lvl1-fg: #141A19; --lvl1-soft: #FBEFCE; --lvl2: #E2762A; --lvl2-fg: #141A19; --lvl2-soft: #FBE3D1; --lvl3: #C2371F; --lvl3-fg: #FFFFFF; --lvl3-soft: #F7D8D2; --lvl4: #8A1420; --lvl4-fg: #FFFFFF; --lvl4-soft: #F0D2D6; /* চার্ট সিরিজ — সতর্কতার রঙ থেকে আলাদা, যাতে "লাল" মানে বিপদই থাকে */ --c1: #0E6E8C; /* তাপমাত্রা */ --c2: #C2371F; /* অনুভূত তাপমাত্রা */ --c3: #2E8F6F; /* আর্দ্রতা */ --c4: #8FA9C4; /* অনিশ্চয়তার ব্যান্ড */ --c5: #7A5AA6; /* বিকল্প সিরিজ */ --c6: #6B7A77; /* নিরপেক্ষ */ /* ================================================================== v11.0.0 — দুটি যন্ত্রের পরিচয়-রঙ ------------------------------------------------------------------ ⚠ এগুলো **সিরিজের রঙ নয়, পরিচয়ের রঙ**। পাতার প্রতিটি ঘরে একই নিয়ম: কার্ডের বাঁ পটি, ট্যাগ, আর চার্টের প্রধান রেখা — যন্ত্র এক হলে রঙও এক। পাঠক তখন রঙ দেখেই জানেন সংখ্যাটি কোন যন্ত্রের, লেবেল না পড়েই। ⚠⚠ সতর্কতার রঙ-পরিবার থেকে ইচ্ছাকৃতভাবে দূরে রাখা হয়েছে (হলুদ/কমলা/লাল/মেরুন/সবুজ-টিল)। নইলে "লাল মানে বিপদ" নিয়মটি ভাঙত — কখনো লাল মানে বিপদ, কখনো নিছক একটি যন্ত্র। একটি সতর্কীকরণ ব্যবস্থায় সেটি গুরুতর ভুল। ⚠ জোড়াটি চোখে বাছা হয়নি, মেপে বাছা — dataviz-এর validate_palette.js দিয়ে দুই মোডেই চালানো: আলো CVD ΔE ১১.২ (deutan) · স্বাভাবিক ২০.৩ — সব পাশ অন্ধকার CVD ΔE ১২.১ (deutan) · স্বাভাবিক ২০.৬ — সব পাশ প্রথম প্রার্থী ছিল নীল × বেগুনি; সেটি deutan-এ ΔE ৫.৪ দিয়ে **ব্যর্থ** হয়েছিল — অর্থাৎ বর্ণান্ধ পাঠকের কাছে দুটি যন্ত্র একই রঙের দেখাত, আর চোখে দেখে সেটি ধরা পড়ত না। ================================================================== */ /* কাচের পৃষ্ঠ — অস্বচ্ছতা ৭২%, তাই blur না চললেও পড়া যায় */ --glass: rgba(255,255,255,.72); --glass-line: rgba(255,255,255,.85); --glass-2: rgba(255,255,255,.55); --inst-heat: #1E6FB8; --inst-heat-soft: #E4EEF8; --inst-air: #9B3F7A; --inst-air-soft: #F6E6F0; /* ---- BMD পূর্বাভাসের চার্ট — প্রতিটি চার্টে একটিমাত্র সিরিজ ---- ⚠ তিনটি রঙ কখনো একই চার্টে থাকে না (তাপমাত্রা, বৃষ্টি ও আর্দ্রতা আলাদা চার্টে — এক অক্ষে দুই স্কেল কখনো নয়)। তবু তিনটিকে একসাথে যাচাই করা হয়েছে, যাতে পাশাপাশি চার্টেও আলাদা করে চেনা যায়: বর্ণান্ধতা ΔE ১৮.২, স্বাভাবিক দৃষ্টিতে ১৮.৯, পটভূমির সাথে বৈসাদৃশ্য ৩:১-এর উপরে — সব পাশ। */ --usf-temp: #C2371F; --usf-rain: #256ABF; --usf-rh: #2E8F6F; /* ------------------------------------------------------------------ v6.5 — যাচাই-করা তুলনা-প্যালেট ------------------------------------------------------------------ ⚠ --c2 (#C2371F) হুবহু --lvl3, অর্থাৎ "তীব্র তাপপ্রবাহ"-এর রঙ। "অনুভূত তাপমাত্রা" রেখাটি ঐ রঙে আঁকা মানে একটি সাধারণ সিরিজকে সতর্কতার রঙ ধার দেওয়া — তখন লাল দেখলে সেটা বিপদ না সিরিজ, বোঝার উপায় থাকে না। নিচের টোকেনগুলো তাই আলাদা, আর হাতে বাছা নয়: প্রতিটি সেট dataviz-এর validate_palette.js দিয়ে আলো ও অন্ধকার দুই মোডেই চালানো হয়েছে। --cmp1..3 বছরে-বছরে তুলনার রেখা (৩টি) আলো: worst all-pairs CVD ΔE ৯.২, normal ২৪.০ — উত্তীর্ণ অন্ধকার: CVD ৯.৪, normal ২০.৯ — উত্তীর্ণ ⚠ তিনটির বেশি নয়। চতুর্থ রং যোগ করলে জোড়াগুলো ফ্লোরের নিচে নামে; তখন সঠিক উত্তর ছোট-গুণিতক। --st1..6 স্টেশন-ভিত্তিক সিরিজ (৬টি পর্যন্ত) পাশাপাশি জোড়ায় আলো: CVD ৯.১ / normal ১৯.৬ — উত্তীর্ণ --seq1..5 বৃষ্টির ক্রমিক র‍্যাম্প — এক রঙ, হালকা→গাঢ় ------------------------------------------------------------------ */ --cmp1: #2a78d6; --cmp2: #eb6834; --cmp3: #1baf7a; --st1: #2a78d6; --st2: #eb6834; --st3: #1baf7a; --st4: #eda100; --st5: #e87ba4; --st6: #008300; --seq1: #cde2fb; --seq2: #9ec5f4; --seq3: #5598e7; --seq4: #256abf; --seq5: #104281; /* v8.1 — ষষ্ঠ ধাপ, কেবল বহু-বছরের রেখা-র‍্যাম্পের জন্য। পাঁচটি ধাপ ভরাট এলাকার (বৃষ্টির স্তম্ভ) জন্য যথেষ্ট ছিল, কিন্তু ১.৫ পিক্সেল সরু রেখায় সবচেয়ে হালকা ধাপটির কনট্রাস্ট ছিল মাত্র ১.৩২:১ — সাদার উপর কার্যত অদৃশ্য। র‍্যাম্পটি এক ধাপ গাঢ় দিকে বাড়িয়ে আর হালকা প্রান্তের ৪৫% বাদ দিয়ে এখন প্রতিটি রেখা ন্যূনতম ৩.৪:১ — দুই থিমেই মাপা। */ --seq6: #08213f; /* v8.5 — উষ্ণ ক্রমিক র‍্যাম্প (মাস × বছর ম্যাট্রিক্স ও ঋতুর হিটম্যাপ)। কেন নীল --seq দিয়ে চলল না: ম্যাট্রিক্সের সংখ্যা তাপমাত্রা, আর নীল রঙ পাঠকের কাছে "ঠান্ডা" — গরমতম মাসটিকে গাঢ় নীলে দেখালে রঙটাই উল্টো কথা বলত। এটি একটি **ক্রমিক** র‍্যাম্প, শ্রেণিবাচক নয়, তাই validate_palette.js-এর "lightness band" ও "chroma floor" পরীক্ষা দুটি এর ক্ষেত্রে প্রযোজ্য নয় (স্ক্রিপ্ট নিজেই তা বলে দেয়); যেটি প্রযোজ্য — উজ্জ্বলতার একমুখিতা — সেটি মেপে দেখা হয়েছে: আলো ০.৯৪১ → ০.৮৬৯ → ০.৭৮৩ → ০.৬৯২ → ০.৫৩৩ → ০.৪১২ অন্ধকার ০.২৯৫ → ০.৪১১ → ০.৫৪৮ → ০.৬৯৪ → ০.৮১৪ → ০.৯১১ ⚠ হালকা প্রান্তের ধাপগুলো পৃষ্ঠতলের সাথে ৩:১-এর নিচে (১.১৬:১ থেকে শুরু)। নিয়ম অনুযায়ী সেটি ক্ষমার্হ **কেবল তখনই** যখন সংখ্যাটি আলাদাভাবে লেখা থাকে — তাই ম্যাট্রিক্সের প্রতিটি ঘরে মান লেখা, আর ঘর বেশি হলে টেবিল-দৃশ্যের বোতাম। */ --warm1: #FBEAC4; --warm2: #F4CE8C; --warm3: #E9AB55; --warm4: #D8862F; --warm5: #B8551F; --warm6: #832616; /* ডাইভার্জিং — উষ্ণায়ন-ডোরার জন্য (ঠান্ডা নীল ↔ নিরপেক্ষ ধূসর ↔ উষ্ণ লাল) */ --div-cool: #256abf; --div-mid: #f0efec; --div-warm: #C2371F; /* অবস্থা */ --ok: #1B7F71; --warn: #A9720B; --bad: #C2371F; /* স্পেসিং স্কেল (৪px ভিত্তি) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* টাইপ স্কেল */ --t-xs: 12px; --t-sm: 13px; --t-md: 15px; --t-base: 16px; --t-lg: 19px; --t-xl: 24px; --t-2xl: 30px; --t-3xl: 38px; /* কোণ */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px; /* এলিভেশন — চারটি স্তর, একটি নয় */ --e0: none; --e1: 0 1px 2px rgba(20,26,25,.06); --e2: 0 1px 3px rgba(20,26,25,.07), 0 4px 12px -6px rgba(20,26,25,.18); --e3: 0 2px 6px rgba(20,26,25,.09), 0 16px 32px -18px rgba(20,26,25,.34); /* মোশন */ --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --ease: cubic-bezier(.2,.6,.3,1); /* স্তর (z-index) */ --z-map: 400; --z-legend: 500; --z-bar: 600; --z-pop: 700; color-scheme: light; } /* ===================================================================== ডার্ক মোড — কেবল বোতাম চাপলে v6.6 --------------------------------------------------------------------- এখানে আগে একটি `@media (prefers-color-scheme: dark)` ব্লক ছিল, যা কম্পিউটারের নিজস্ব পছন্দ দেখে সাইটটিকে নিজে থেকেই অন্ধকারে খুলত। ব্যবহারকারীর সিদ্ধান্ত: ডিফল্ট সবসময় আলো, আর অন্ধকার একটি স্পষ্ট পছন্দ — টপবারের ◐ বোতাম। তাই ব্লকটি সরানো হলো, লুকানো হয়নি। মিডিয়া ব্লকটি রেখে দিলে সেটি কখনো চলত না (তিনটি পাতাই দিয়ে খোলে), কিন্তু ভবিষ্যতে কেউ নতুন একটি পাতা বানিয়ে ঐ অ্যাট্রিবিউটটি বসাতে ভুলে গেলে তার সাইট OS-ডার্কে নিজে থেকে অন্ধকার হয়ে যেত — একটি নীরব, ধরা কঠিন অসঙ্গতি। এখন নিয়মটি একটাই: data-theme="dark" থাকলে অন্ধকার, নইলে আলো। বাছাইটি মনে রাখা হয় localStorage['hews-theme']-এ, আর তিনটি এন্ট্রি পয়েন্টেই (index.php, admin/_layout.php, admin/login.php) পেইন্টের আগে পড়া হয় — তাই থিম বদলে পাতা বদলালেও ঝলকানি হয় না। ===================================================================== */ /* ডার্ক মোড — স্পষ্ট পছন্দ (টগল) */ :root[data-theme="dark"] { --paper: #0C1413; --surface: #141D1B; --surface-2: #1B2724; --surface-3: #24322E; --ink: #E9F0ED; --ink-2: #A9B8B3; --ink-3: #7C8C87; --line: #25332F; --line-2: #32433E; --brand: #3FC0B2; --brand-ink: #62D6C8; --brand-soft: #0E2E2C; /* v6.5 — অন্ধকার মোডে স্তর ১–৪ নতুন করে ধাপে বসানো। কারণ: আগের সেটে ‘তীব্র’ (#E86A50) ও ‘অতি তীব্র’ (#D4515C) পাশাপাশি জোড়ায় ΔE ছিল মাত্র ৭.৪ (স্বাভাবিক দৃষ্টিতে) — অর্থাৎ সবচেয়ে বিপজ্জনক দুটি শ্রেণি অন্ধকার মোডে প্রায় একই রঙ দেখাত। নতুন ধাপে সবচেয়ে খারাপ জোড়া ΔE ১৩.২, আর প্রতিটি CVD জোড়া ≥ ১০.৫। প্রতিটি লেখার রঙ WCAG AA (৪.৬:১ – ১১.৩:১)। আলো মোডের হেক্সগুলো ছোঁয়া হয়নি — সেগুলোই BMD-র প্রচলিত রঙ, যা মানুষ চেনে। */ --lvl0: #2AA394; --lvl0-fg: #06201C; --lvl0-soft: #0E2E2A; --lvl1: #F5CE4B; --lvl1-fg: #221A05; --lvl1-soft: #33290C; --lvl2: #F5952B; --lvl2-fg: #241202; --lvl2-soft: #35200D; --lvl3: #E24634; --lvl3-fg: #240A05; --lvl3-soft: #38140E; --lvl4: #B02A55; --lvl4-fg: #FFFFFF; --lvl4-soft: #3A1020; --c1: #4FB6D4; --c2: #E86A50; --c3: #4FBE96; --c4: #6E86A3; --c5: #A98FD1; --c6: #8B9A96; /* v11.0.0 — যন্ত্রের পরিচয়-রঙ, অন্ধকারের জন্য আলাদা করে মাপা (উল্টে নেওয়া নয়): CVD ΔE ১২.১, স্বাভাবিক ২০.৬ — সব পাশ। */ /* অন্ধকারে কাচ — সাদা নয়, সামান্য আলোকিত পৃষ্ঠতল */ --glass: rgba(26,37,35,.72); --glass-line: rgba(255,255,255,.08); --glass-2: rgba(26,37,35,.5); --inst-heat: #4A9AD8; --inst-heat-soft: #14293C; --inst-air: #C86A8E; --inst-air-soft: #34202C; /* অন্ধকারের রঙগুলো আলাদা করে বাছা, উল্টে নেওয়া নয় — উজ্জ্বলতার ব্যান্ড ০.৪৮–০.৬৭-এর ভেতরে রাখতে হয়েছে, নইলে গাঢ় পটভূমিতে রঙগুলো জ্বলে উঠত। */ --usf-temp: #DE5B41; --usf-rain: #3987E5; --usf-rh: #35A57E; --cmp1: #3987e5; --cmp2: #d95926; --cmp3: #199e70; --st1: #3987e5; --st2: #d95926; --st3: #199e70; --st4: #c98500; --st5: #d55181; --st6: #008300; --seq1: #104281; --seq2: #184f95; --seq3: #256abf; --seq4: #3987e5; --seq5: #86b6ef; --seq6: #c9e0fb; /* অন্ধকারে র‍্যাম্প উল্টো দিকে যায় — নিচু মান পৃষ্ঠতলের কাছাকাছি গাঢ়, উঁচু মান উজ্জ্বল। নীল --seq-এর সাথে একই নিয়ম, তাই দুটি র‍্যাম্প একই ভাষায় কথা বলে। */ --warm1: #4A1D0E; --warm2: #7A3116; --warm3: #B04F1F; --warm4: #DC8434; --warm5: #EEB769; --warm6: #F8DEB0; --div-cool: #3987e5; --div-mid: #383835; --div-warm: #E24634; --ok: #2AA394; --warn: #E0AE3C; --bad: #E86A50; --e1: 0 1px 2px rgba(0,0,0,.4); --e2: 0 1px 3px rgba(0,0,0,.45), 0 4px 12px -6px rgba(0,0,0,.6); --e3: 0 2px 6px rgba(0,0,0,.5), 0 16px 32px -18px rgba(0,0,0,.75); color-scheme: dark; } /* ------------------------------------------------------- ২. ভিত্তি */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: var(--t-base); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: 'Anek Bangla', 'Hind Siliguri', system-ui, sans-serif; line-height: 1.25; margin: 0; font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: var(--t-2xl); } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-lg); } /* আগে ১৫.৫px ছিল — বডির চেয়েও ছোট */ h4 { font-size: var(--t-md); } p { margin: 0 0 var(--s3); } p:last-child { margin-bottom: 0; } a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--brand-ink); } .mono, .num, .kpi .v, code, pre { font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } code { font-size: .9em; background: var(--surface-2); padding: 2px 6px; border-radius: var(--r-sm); } .muted { color: var(--ink-3); } .ok { color: var(--ok); } .bad { color: var(--bad); } :where(a, button, select, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--s5); } @media (max-width: 600px) { .wrap { padding: 0 var(--s4); } } .skip-link { position: absolute; left: -9999px; top: var(--s2); background: var(--surface); color: var(--ink); padding: var(--s2) var(--s4); border-radius: var(--r-md); box-shadow: var(--e3); z-index: var(--z-pop); } .skip-link:focus { left: var(--s4); } /* ------------------------------------------------- ৩. টপবার / নেভ */ .topbar { position: sticky; top: 0; z-index: var(--z-bar); background: color-mix(in srgb, var(--surface) 88%, transparent); background: var(--surface); border-bottom: 1px solid var(--line); transition: box-shadow var(--dur-2) var(--ease); } @supports (backdrop-filter: blur(10px)) { .topbar { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(12px) saturate(1.4); } } .topbar.is-scrolled { box-shadow: var(--e2); } .bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; } .brand strong { display: block; font-family: 'Anek Bangla', sans-serif; font-size: var(--t-md); font-weight: 600; line-height: 1.3; } .brand .sub { display: block; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.4; } .brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--lvl0); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lvl0) 20%, transparent); transition: background var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease); } .bar-links { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; } .bar-links a { padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .bar-links a:hover { background: var(--surface-2); color: var(--ink); } .bar-links a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .theme-toggle:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); } /* v6.0 — ভাষা টগল। থিম টগলের সাথে একই আকার ও আচরণ, যাতে দুটি বোতাম পাশাপাশি বসলে সারি ভেঙে না যায়। পার্থক্য শুধু ভেতরে লেখা আছে বলে প্রস্থ স্থির নয়, ন্যূনতম — "EN" ও "বাং" দুটোই আঁটে। */ .lang-toggle { width: auto; min-width: 34px; padding: 0 9px; font-family: var(--font-ui, inherit); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-decoration: none; white-space: nowrap; } .lang-toggle:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); } /* -------------------------------------------------- ৪. ব্যানার (হিরো) */ .banner { border-radius: var(--r-lg); padding: var(--s6) var(--s5); margin: var(--s5) 0; background: var(--lvl0); color: var(--lvl0-fg); display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center; box-shadow: var(--e2); transition: background var(--dur-3) var(--ease), color var(--dur-3) var(--ease); } .banner .eyebrow { font-size: var(--t-sm); text-transform: none; opacity: .82; margin-bottom: var(--s2); letter-spacing: .01em; } .banner h1 { font-size: clamp(var(--t-xl), 4.4vw, var(--t-3xl)); margin-bottom: var(--s2); } .banner .lede { font-size: var(--t-md); opacity: .92; max-width: 56ch; margin: 0; } .banner .figure { text-align: right; line-height: 1; } .banner .big { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-size: clamp(40px, 8vw, 68px); font-weight: 500; display: block; } .banner .unit { font-size: var(--t-lg); opacity: .8; } .banner .feels { font-size: var(--t-sm); opacity: .88; margin-top: var(--s2); } @media (max-width: 720px) { .banner { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s5) var(--s4); } .banner .figure { text-align: left; } } /* -------------------------------------------------------- ৫. KPI */ .kpis { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); box-shadow: var(--e1); transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .kpi:hover { box-shadow: var(--e2); border-color: var(--line-2); } .kpi .k { font-size: var(--t-xs); color: var(--ink-3); display: block; margin-bottom: var(--s1); line-height: 1.4; } .kpi .v { font-size: var(--t-xl); font-weight: 500; line-height: 1.2; display: block; } .kpi .v .u { font-size: var(--t-sm); color: var(--ink-3); font-weight: 400; } /* ছোট ভ্যারিয়েন্ট — তারিখ/অনুপাতের জন্য (আগে inline style দিয়ে ঠিক করা হতো) */ .kpi.sm .v { font-size: var(--t-md); } .kpi.md .v { font-size: var(--t-lg); } /* ------------------------------------------------- ৬. সেকশন হেড */ main section { margin: var(--s7) 0; } .shead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); /* আগে ২px near-black ছিল */ } .shead h2 { font-size: var(--t-xl); } .shead .meta { font-size: var(--t-sm); color: var(--ink-3); } /* ---------------------------------------------------------- ৭. কার্ড */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); box-shadow: var(--e1); } .card h3 { font-size: var(--t-md); margin-bottom: var(--s3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); } .card h3 .tag { font-family: 'Hind Siliguri', sans-serif; font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; } .grid2 { display: grid; gap: var(--s4); grid-template-columns: 1fr; } .grid3 { display: grid; gap: var(--s4); grid-template-columns: 1fr; } @media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 760px) { .grid3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .grid3 { grid-template-columns: repeat(3, 1fr); } } /* ---------------------------------------------- ৮. পূর্বাভাস স্ট্রিপ */ .fc-strip { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); } .fc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e1); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .fc:hover { transform: translateY(-2px); box-shadow: var(--e2); } .fc .stripe { height: 4px; background: var(--lvl0); } .fc .body { padding: var(--s3); } .fc .d { font-size: var(--t-sm); font-weight: 600; } .fc .dd { font-size: var(--t-xs); color: var(--ink-3); margin-bottom: var(--s2); } .fc .t { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-size: var(--t-lg); } .fc .t small { font-size: var(--t-sm); color: var(--ink-3); margin-left: var(--s1); } .fc .lv { font-size: var(--t-xs); font-weight: 600; margin-top: var(--s1); } .fc .pr { font-size: var(--t-xs); color: var(--ink-3); } /* স্তরের ব্যাজ */ .badge { display: inline-flex; align-items: center; gap: var(--s1); padding: 2px var(--s2); border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 600; line-height: 1.6; } .badge.l0 { background: var(--lvl0-soft); color: var(--lvl0); } .badge.l1 { background: var(--lvl1-soft); color: var(--warn); } .badge.l2 { background: var(--lvl2-soft); color: var(--lvl2); } .badge.l3 { background: var(--lvl3-soft); color: var(--lvl3); } .badge.l4 { background: var(--lvl4-soft); color: var(--lvl4); } /* --------------------------------------------------------- ৯. মানচিত্র */ .map-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e1); background: var(--surface); } #leaflet { height: clamp(360px, 68vh, 620px); width: 100%; } .legend { position: absolute; right: var(--s3); bottom: var(--s3); z-index: var(--z-legend); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); font-size: var(--t-xs); line-height: 1.9; box-shadow: var(--e2); max-width: 190px; } .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: var(--s2); vertical-align: -1px; } .leaflet-container { font: inherit; background: var(--surface-2); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--ink); box-shadow: var(--e3); } .leaflet-popup-content { font-size: var(--t-sm); line-height: 1.65; margin: var(--s3); } .note-line { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s3); } /* ------------------------------------------------------- ১০. কন্ট্রোল */ .controls { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .controls label { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-3); } select, .select { appearance: none; font: inherit; font-size: var(--t-sm); padding: var(--s2) calc(var(--s5) + var(--s1)) var(--s2) var(--s3); border: 1px solid var(--line-2); border-radius: var(--r-sm); background-color: var(--surface); color: var(--ink); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 16px center, right 11px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } select:hover { border-color: var(--brand); } /* ----------------------------------------------------------- ১১. চার্ট */ /* মূল সংশোধন: স্থির উচ্চতার বদলে aspect-ratio — মোবাইলে চার্টের অনুপাত উল্টে গিয়ে অক্ষের লেবেল চেপে যাওয়ার সমস্যা এতে দূর হয়। */ .chart { width: 100%; aspect-ratio: 16 / 9; min-height: 260px; max-height: 380px; } .chart.tall { aspect-ratio: 21 / 9; min-height: 300px; max-height: 440px; } @media (max-width: 700px) { .chart { aspect-ratio: 4 / 3; min-height: 240px; } .chart.tall { aspect-ratio: 5 / 4; min-height: 280px; } } .chart-empty { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--s5); color: var(--ink-3); font-size: var(--t-sm); text-align: center; } /* ---------------------------------------------------------- ১২. টেবিল */ .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--e1); -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: var(--t-sm); } thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--ink-2); font-weight: 600; text-align: left; white-space: nowrap; padding: var(--s3); border-bottom: 1px solid var(--line); } tbody td { padding: var(--s3); border-bottom: 1px solid var(--line); } tbody tr:last-child td { border-bottom: 0; } tbody tr { transition: background var(--dur-1) var(--ease); } tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); } tbody tr:hover { background: var(--surface-2); } td.num, th.num { text-align: right; font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; } .table-empty { padding: var(--s6) var(--s4); text-align: center; color: var(--ink-3); } /* ------------------------------------------------------- ১৩. ফর্ম */ .field { display: block; margin-bottom: var(--s4); } .field > span { display: block; font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s1); font-weight: 500; } .field input, .field select, .field textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="file"], textarea { width: 100%; font: inherit; font-size: var(--t-md); padding: var(--s2) var(--s3); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .field input:focus, .field select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); outline: none; } .field .hint { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s1); } .form-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; } .form-grid .field { margin-bottom: 0; } /* v8.8 — একই সারিতে দুটি বাটন (যাচাই / সংরক্ষণ)। ছোট পর্দায় নিজে থেকেই নিচে নেমে যায়, তাই আলাদা মিডিয়া কোয়েরি লাগে না। */ .row-btns { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); margin: 0 0 var(--s4); } legend { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); padding: 0 var(--s2); } /* --------------------------------------------------------- ১৪. বাটন */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font: inherit; font-size: var(--t-md); font-weight: 600; padding: var(--s2) var(--s5); border: 1px solid transparent; border-radius: var(--r-sm); background: var(--brand); color: #fff; cursor: pointer; transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); text-decoration: none; white-space: nowrap; } .btn:hover { background: var(--brand-ink); color: #fff; box-shadow: var(--e2); } .btn:active { transform: translateY(1px); } .btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .btn.block { width: 100%; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font: inherit; font-size: var(--t-sm); font-weight: 500; padding: var(--s2) var(--s3); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); } .btn-ghost.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 34%, var(--line-2)); } .btn-ghost.bad:hover { background: var(--lvl3-soft); color: var(--bad); } .btn-ghost.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); } .btn-sm { padding: var(--s1) var(--s2); font-size: var(--t-xs); } /* --------------------------------------------------------- ১৫. অ্যালার্ট */ /* ⚠ v8.0 — এখানে আগে শর্তহীনভাবে `display: flex` ছিল, আর সেটিই আপলোড পাতার লেখাগুলো ভেঙে দিচ্ছিল। flex কনটেইনারে প্রতিটি সন্তান-এলিমেন্ট একটি করে আইটেম হয়, আর তাদের মাঝের প্রতিটি লেখার টুকরোও আলাদা (anonymous) আইটেম। আমাদের অনেক বার্তায় লেখার মাঝে ও বসে — যেমন “পূর্ণাঙ্গ লগার ফাইল (chakadatalogger.csv, ৯৫ হাজারের বেশি সারি)…”। ফলে ঐ একটি বাক্য ২০-৩০টি আইটেমে ভেঙে যেত আর পর্দায় **এক লাইনে একটি করে শব্দ** নেমে আসত। ব্যবহারকারীর “deisgn poor and not organized” অভিযোগের একটি বাস্তব কারণ এটিই। সমাধান: ডিফল্ট block — লেখা স্বাভাবিকভাবে বয়ে যায়, / ঠিক লাইনের ভেতরেই থাকে। flex কেবল তখনই, যখন বার্তাটি সত্যিই ‘আইকন + লেখা’ ছাঁচে লেখা হয়েছে (প্রথম সন্তান aria-hidden আইকন)। :has() না বোঝা কোনো ব্রাউজারে সবগুলোই block থাকবে — আইকনটি লেখার আগে ইনলাইনে বসবে, যা পড়তে কোনো অসুবিধা করে না। অর্থাৎ ফলব্যাকটিও আজকের ভাঙা অবস্থার চেয়ে ভালো। */ .alert { padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--t-sm); margin-bottom: var(--s4); display: block; } .alert > [aria-hidden="true"]:first-child { margin-right: var(--s2); } .alert:has(> [aria-hidden="true"]:first-child) { display: flex; gap: var(--s3); align-items: flex-start; } .alert:has(> [aria-hidden="true"]:first-child) > [aria-hidden="true"]:first-child { margin-right: 0; } .alert.err, .alert-err { background: var(--lvl3-soft); color: var(--ink); border-color: color-mix(in srgb, var(--bad) 40%, transparent); } .alert.ok, .alert-ok { background: var(--lvl0-soft); color: var(--ink); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .alert.warn { background: var(--lvl1-soft); color: var(--ink); border-color: color-mix(in srgb, var(--warn) 40%, transparent); } /* ------------------------------------------------- ১৬. স্কেলিটন লোডার */ .skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: skel 1.4s ease-in-out infinite; border-radius: var(--r-sm); } @keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .skel-kpi { height: 74px; border-radius: var(--r-md); } .skel-fc { height: 128px; border-radius: var(--r-md); } /* ------------------------------------------------------- ১৭. ফুটার */ .foot { border-top: 1px solid var(--line); margin-top: var(--s8); padding: var(--s5) 0 var(--s6); font-size: var(--t-sm); color: var(--ink-3); } .foot p { margin-bottom: var(--s2); } /* ------------------------------------------------------ ১৮. লগইন */ .login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--s5); background: var(--paper); } .login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--e3); } .login-card h1 { font-size: var(--t-xl); margin-bottom: var(--s2); } .login-card .sub { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--s5); } /* ------------------------------------------------ ১৯. অ্যাক্সেসিবিলিটি */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .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; } /* ---------------------------------------------------------- ২০. প্রিন্ট */ @media print { .topbar, .controls, .legend, .bar-links, .theme-toggle, .skip-link { display: none !important; } body { background: #fff; color: #000; } .card, .kpi, .tablewrap, .map-wrap, .fc { box-shadow: none; border-color: #ccc; break-inside: avoid; } .grid2, .grid3 { grid-template-columns: 1fr; } main section { margin: var(--s5) 0; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; } } /* v6.0 — লগইন পাতার ভাষা লিংক। কার্ডের উপরে ডান কোণে, ছোট ও নিরুচ্চার — লগইনের আগে ভাষা বদলানো দরকার হতে পারে, কিন্তু সেটিই পাতার প্রধান কাজ নয়। */ .loginlang { margin: 0 0 var(--s2); text-align: right; font-size: 13px; } .loginlang a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line-2); } .loginlang a:hover { color: var(--brand-ink); border-color: var(--brand); } /* ===================================================================== ২১. v6.5 — ভিজ্যুয়ালাইজেশন পুনর্গঠন --------------------------------------------------------------------- নকশার সিদ্ধান্তগুলো এক জায়গায়, যাতে পরে কেউ "কেন এমন" জিজ্ঞেস করলে উত্তরটা কোডের পাশেই থাকে: ১) BMD-র পাঁচ শ্রেণির রঙই পাতার মেরুদণ্ড। সেগুলো উষ্ণ (হলুদ→কমলা→ লাল→গাঢ় লাল), তাই বাকি সব ক্রোম ঠান্ডা ও চুপচাপ — নইলে দুটো জিনিস একসাথে চেঁচায় আর সতর্কতার রঙ আলাদা করে চোখে পড়ে না। ২) স্তরের রঙ **কখনোই একা** অর্থ বহন করে না। প্রতিটি সোয়াচের সাথে নাম ও তাপমাত্রার পরিসর লেখা থাকে, আর প্রতিটি খণ্ডের মাঝে ২px ফাঁক — কারণ তাপ-মাপকাঠির পাশাপাশি শ্রেণিগুলো রঙে স্বভাবতই কাছাকাছি (validate_palette.js পাশাপাশি জোড়ায় ΔE ১৩–১৪ দেখায়, ১৫-র ফ্লোরের সামান্য নিচে)। পৃথিবীর কোনো তাপ-সতর্কতার মাপকাঠিই ঐ ফ্লোর পার করে না — সমাধান রঙ বদলানো নয়, লেখা ও ফাঁক যোগ করা। ৩) একই পাঁচ-ধাপ কাঠামো তিন মাপে ফিরে আসে — হিরোর মাপকাঠি, ৭ দিনের চিপ, বছরের ডোরা। কাঠামোটি সাজসজ্জা নয়; এটি সত্যিই একটি ক্রমিক মাপকাঠি, তাই পুনরাবৃত্তিটি তথ্য বহন করে। ===================================================================== */ /* ------------------------------------------------------- ২১ক. ব্যান্ড */ /* প্রতিটি প্রধান অংশ নিজস্ব পৃষ্ঠতলে — একই প্যানেলে আলাদা যন্ত্রের মতো */ .band { padding: var(--s6) 0; } /* ===================================================================== * ⚠ [hidden] সবসময় সত্যিই লুকাবে v10.5.1 * --------------------------------------------------------------------- * ব্যবহারকারী পাতার একদম উপরে **দুটি খালি বাক্স** দেখতে পাচ্ছিলেন — * একটি কমলা কিনারার, একটি সবুজ কিনারার। দুটোই `hidden` অবস্থায় * ছিল, তবু দেখা যাচ্ছিল। * * কারণটি CSS-এর অগ্রাধিকার, কোডের যুক্তি নয়: * * ব্রাউজারের নিজস্ব নিয়ম : [hidden] { display: none } ← UA স্তর * এই ফাইলের নিয়ম : .stale-bar { display: flex } ← লেখকের স্তর * * লেখকের স্তর সবসময় UA স্তরকে হারায়। তাই `hidden` বসানো সত্ত্বেও * `display:flex` টিকে যেত, আর একটি **খালি** ফ্লেক্স-বাক্স তার * কিনারা ও প্যাডিং নিয়ে পর্দায় বসে থাকত। * * ⚠ JavaScript ঠিকই কাজ করছিল — drawStaleBar()/drawModelBar() দুটোই * `box.hidden = true` করে আর innerHTML খালি করে। অর্থাৎ বাগটি * খুঁজতে গিয়ে JS-এ কিছুই পাওয়া যেত না। * * ⚠ খুঁজে দেখা গেল একই সমস্যা **দশটি** ক্লাসে: alert, hero-live, * hero-st, hint, map-days, map-pick, model-bar, ramp-legend, * spread, stale-bar। তাই দশটি আলাদা নিয়ম নয় — একটিই বিশ্বজনীন * নিয়ম, যা ভবিষ্যতে যোগ হওয়া ক্লাসগুলোকেও ঢেকে রাখবে। * * ⚠ !important এখানে ন্যায্য: `hidden` মানে "এটি এখন পাতায় নেই" — * এর উপরে কোনো নকশার নিয়ম থাকা উচিত নয়। ফাইলটিতে আগে থেকেই * section[hidden]/.card[hidden]-এ একই কৌশল ব্যবহার হয়েছে। * ===================================================================== */ [hidden] { display: none !important; } /* [hidden] ডিফল্টে display:none, কিন্তু .band-এর নিজস্ব display না থাকলেও স্পষ্ট করে লেখা হলো — কোনো ইউটিলিটি ক্লাস পরে display বসালে যেন hidden হেরে না যায়। */ .band[hidden] { display: none; } .band + .band { border-top: 1px solid var(--line); } .band-alt { background: var(--surface-2); } .band > .wrap > section + section { margin-top: var(--s6); } /* --------------------------------------------- ২১খ. তাপ-অবস্থার হিরো */ .heat-hero { display: grid; gap: var(--s5); align-items: center; grid-template-columns: 1fr; padding: var(--s5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e2); /* বাঁ পাশে স্তরের রঙের পটি — ব্যাজের চেয়ে শান্ত, তবু দূর থেকে দেখা যায় */ border-left: 6px solid var(--hero-lvl, var(--lvl0)); } @media (min-width: 860px) { .heat-hero { grid-template-columns: 1.35fr 1fr; } } /* ---- হিরোর স্টেশন-নির্বাচক (v10.4.17) ---- ⚠ ইচ্ছাকৃতভাবে শান্ত: এটি একটি নিয়ন্ত্রণ, বিবৃতি নয়। শিরোনামের সংখ্যাটিই পাতার প্রধান কথা — নির্বাচকটি তার চেয়ে জোরে কথা বললে চোখ প্রথমে ভুল জায়গায় যেত। */ .hero-st { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); } .hero-st > label { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .hero-st-sel { font: inherit; font-size: var(--t-sm); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 10px; max-width: 100%; cursor: pointer; } .hero-st-sel:hover { border-color: var(--hero-lvl, var(--brand)); } .hero-st-sel:focus-visible { outline: 2px solid var(--hero-lvl, var(--brand)); outline-offset: 2px; } .hero-st-note { font-size: var(--t-xs); color: var(--ink-3); } /* বাছাই সক্রিয় থাকলে চোখে পড়া দরকার — নইলে কেউ একটি স্টেশন বেছে রেখে ভুলে যেতেন, আর ভাবতেন পাতাটি এলাকার সংখ্যা দেখাচ্ছে। */ .hero-st.is-picked .hero-st-sel { border-color: var(--hero-lvl, var(--brand)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-lvl, var(--brand)) 15%, transparent); } .hero-st-reset { font: inherit; font-size: var(--t-xs); cursor: pointer; background: none; border: 0; padding: 2px 4px; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } /* এইমাত্রের যন্ত্রপাঠ (v10.4.17) — শিরোনামের সংখ্যার নিচে, ছোট করে। ⚠ এটি দিনের সর্বোচ্চ নয়, **এই মুহূর্তের** পাঠ। শব্দ দুটি আলাদা রাখা জরুরি, নইলে ৩৪.১ দেখে কেউ ভাবতেন আজকের সর্বোচ্চ কমে গেছে। */ .hero-live { font-size: var(--t-xs); color: var(--ink-3); margin: var(--s2) 0 0; display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; } .hero-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lvl0); flex: 0 0 auto; } .hero-live.is-stale .dot { background: var(--ink-3); } .hero-live b { color: var(--ink-2); font-weight: 600; } .heat-hero .eyebrow { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2); } .heat-hero h1 { font-family: 'Anek Bangla', sans-serif; font-weight: 700; line-height: 1.15; font-size: clamp(var(--t-xl), 4vw, var(--t-3xl)); color: var(--hero-lvl, var(--ink)); margin-bottom: var(--s2); } .heat-hero .lede { font-size: var(--t-md); color: var(--ink-2); max-width: 52ch; margin: 0; } .hero-figure { text-align: center; } .hero-figure .big { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-size: clamp(46px, 11vw, 84px); font-weight: 500; line-height: .95; color: var(--hero-lvl, var(--ink)); letter-spacing: -.03em; } .hero-figure .unit { font-size: var(--t-xl); color: var(--ink-3); margin-left: 2px; } .hero-figure .feels { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s2); } .hero-figure .basis { font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s1); } /* --------------------------------- ২১গ. BMD মাপকাঠি (পাঁচ খণ্ডের পটি) */ /* ⚠ gap: 2px ইচ্ছাকৃত — এটিই পাশাপাশি শ্রেণির মধ্যে দৃশ্যমান সীমানা। ফাঁক না থাকলে দুটি কাছাকাছি রঙ এক টানা পটির মতো দেখাত। */ .bmd-scale { margin-top: var(--s5); } .bmd-scale .track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; } .bmd-scale .seg-b { height: 12px; border-radius: 2px; position: relative; background: var(--lvl0); } .bmd-scale .seg-b:first-child { border-radius: var(--r-full) 2px 2px var(--r-full); } .bmd-scale .seg-b:last-child { border-radius: 2px var(--r-full) var(--r-full) 2px; } .bmd-scale .seg-b.b1 { background: var(--lvl1); } .bmd-scale .seg-b.b2 { background: var(--lvl2); } .bmd-scale .seg-b.b3 { background: var(--lvl3); } .bmd-scale .seg-b.b4 { background: var(--lvl4); } /* বর্তমান শ্রেণি — বাকিগুলো একটু ম্লান, তাই "আমরা এখন কোথায়" এক নজরে। ⚠ প্রথমে .34 বসিয়েছিলাম; পর্দায় দেখে বদলাতে হলো। ঐ মাত্রায় BMD-র হলুদ-কমলা-লাল চারটি প্যাস্টেল হয়ে একাকার হয়ে যাচ্ছিল, অর্থাৎ মাপকাঠিটি আর মাপকাঠি থাকছিল না — শুধু একটি গোলাপি পটি। .58-এ প্রতিটি শ্রেণি নিজের রঙে চেনা যায়, তবু চলতি শ্রেণিটি আলাদা করে চোখে পড়ে (তার নিজের রিং আছে)। */ .bmd-scale .seg-b:not(.on) { opacity: .58; } .bmd-scale .seg-b.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-3); } .bmd-scale .labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: var(--s2); } .bmd-scale .labels span { font-size: 10.5px; line-height: 1.3; color: var(--ink-3); text-align: center; overflow-wrap: anywhere; } .bmd-scale .labels span b { display: block; font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-size: var(--t-xs); color: var(--ink-2); } .bmd-scale .labels span.on b, .bmd-scale .labels span.on { color: var(--ink); font-weight: 600; } /* ------------------------------------------ ২১ঘ. খণ্ডিত চলক-নির্বাচক */ .seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); flex-wrap: wrap; } .seg button { font: inherit; font-size: var(--t-sm); font-weight: 500; padding: var(--s2) var(--s4); border: 0; border-radius: var(--r-full); background: transparent; color: var(--ink-2); cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); white-space: nowrap; } .seg button:hover { color: var(--ink); background: var(--surface-3); } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--brand-ink); box-shadow: var(--e1); font-weight: 600; } .seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ------------------------------------- ২১ঙ. নিজস্ব স্টেশনের লাইভ কার্ড */ .st-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .st-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); border-top: 3px solid var(--st-lvl, var(--line-2)); display: flex; flex-direction: column; gap: var(--s1); } .st-card .nm { font-weight: 600; font-size: var(--t-sm); line-height: 1.35; } .st-card .cd { font-family: 'IBM Plex Mono', monospace; font-size: var(--t-xs); color: var(--ink-3); } .st-card .rd { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-size: var(--t-2xl); line-height: 1.05; margin-top: var(--s2); } .st-card .rd small { font-size: var(--t-sm); color: var(--ink-3); } .st-card .sub { font-size: var(--t-xs); color: var(--ink-2); } .st-card .age { font-size: var(--t-xs); color: var(--ink-3); margin-top: auto; padding-top: var(--s2); } .st-card .age.stale { color: var(--warn); font-weight: 600; } /* পাঠ নেই এমন স্টেশন — লুকানো হয় না, কিন্তু চোখ টানে না */ .st-card.silent { opacity: .72; border-top-color: var(--line); } .st-card.silent .rd { color: var(--ink-3); font-size: var(--t-lg); } .st-card .why { font-size: var(--t-xs); color: var(--warn); line-height: 1.4; } .st-card .cmp { font-size: 10.5px; color: var(--ink-3); } /* ------------------------------------------------- ২১চ. উষ্ণায়ন-ডোরা */ .stripes { display: flex; gap: 2px; align-items: stretch; overflow-x: auto; padding-bottom: var(--s2); } .stripes .yr { flex: 1 0 14px; min-height: 92px; border-radius: 2px; position: relative; background: var(--sc, var(--surface-3)); cursor: default; } /* আংশিক বছর — তির্যক টেক্সচার, কারণ ঐ বছরের গড় পুরো বছরের গড় নয়। রঙ দিয়ে বললে সেটি আরেকটি মাত্রা হয়ে যেত; টেক্সচার আলাদা চ্যানেল। */ .stripes .yr.partial { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px); } .stripes .yr:hover { outline: 2px solid var(--ink); outline-offset: 1px; } .stripe-axis { display: flex; gap: 2px; margin-top: var(--s1); font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-3); } .stripe-axis span { flex: 1 0 14px; text-align: center; } /* ------------------------------------------------ ২১ছ. টেবিল-দৃশ্য */ /* dataviz-এর "relief rule": কনট্রাস্ট সতর্কতা থাকলে সংখ্যাগুলো পড়ার আরেকটি পথ থাকতেই হবে। তাই প্রতিটি বড় চার্টের নিচে টেবিল। */ .tbl-toggle { font: inherit; font-size: var(--t-xs); color: var(--ink-3); background: none; border: 0; border-bottom: 1px dashed var(--line-2); cursor: pointer; padding: 0 0 1px; margin-top: var(--s3); } .tbl-toggle:hover { color: var(--brand-ink); border-color: var(--brand); } .tbl-panel[hidden] { display: none; } .tbl-panel { margin-top: var(--s3); } .tbl-panel table { font-size: var(--t-xs); } /* ------------------------------------------------- ২১জ. ছোট সহায়ক */ .hint { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s2); max-width: 70ch; } /* v10.10.0 — সারণিতে না-ওঠা (এখনো শূন্য) উৎসের এক লাইন। ⚠ ইচ্ছাকৃতভাবে সতর্কবার্তার রঙ নয়: "এখনো চলেনি" কোনো ত্রুটি নয়, কেবল একটি তথ্য। লাল করলে .stale-bar-এর সঙ্গে গুলিয়ে যেত, আর সত্যিকারের থেমে-যাওয়া উৎসের সতর্কবার্তাটি দুর্বল হয়ে পড়ত। */ .src-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: var(--t-xs); color: var(--ink-3); } .src-empty[hidden] { display: none; } .src-none { font-family: 'IBM Plex Mono', monospace; font-size: var(--t-xs); padding: 1px var(--s2); border-radius: var(--r-sm); background: var(--surface-2); border: 1px dashed var(--line); color: var(--ink-3); } .chip-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; } .chip { font-size: var(--t-xs); padding: 2px var(--s3); border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); } .chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; } /* সেকশন নিজে থেকেই সরে যায় যখন তার কোনো ডেটা নেই */ section[hidden], .card[hidden] { display: none !important; } /* ---------------------------------------------- ২২. v6.7 সতর্কবার্তা */ /* আপলোড অসম্পূর্ণ / স্ক্রিপ্ট চলেনি / জাভাস্ক্রিপ্ট বন্ধ — তিনটিই এই বাক্সে। ইচ্ছাকৃতভাবে তাপ-স্তরের কোনো রঙ ব্যবহার করা হয়নি: এটি ব্যবস্থার সমস্যা, আবহাওয়ার নয়। লাল দিলে পাঠক ভাবতেন তাপপ্রবাহের সতর্কতা এসেছে। */ .stale-note { background: var(--surface); border: 1px solid var(--line-2); border-left: 4px solid var(--warn); border-radius: var(--r-md); padding: var(--s4) var(--s5); box-shadow: var(--e1); } .stale-note strong { display: block; font-family: 'Anek Bangla', sans-serif; font-size: var(--t-lg); color: var(--warn); margin-bottom: var(--s2); } .stale-note p { font-size: var(--t-sm); color: var(--ink-2); max-width: 78ch; margin: 0 0 var(--s2); } .stale-note p:last-child { margin-bottom: 0; } .stale-note ul { margin: 0 0 var(--s3); padding-left: var(--s5); } .stale-note li { font-size: var(--t-sm); color: var(--ink-2); } .stale-note code { font-family: 'IBM Plex Mono', monospace; font-size: var(--t-xs); background: var(--surface-2); padding: 1px var(--s2); border-radius: var(--r-sm); } .stale-note .mono { font-family: 'IBM Plex Mono', monospace; font-size: var(--t-xs); color: var(--ink-3); overflow-wrap: anywhere; } /* ------------------------------------------ ২৩. v7.0 মানচিত্রের লেজেন্ড */ /* যন্ত্রের বিন্দু ও ফাঁকা ইউনিয়ন — দুটোই লেজেন্ডে, কারণ মানচিত্রে এখন দুই রকম জিনিস আঁকা হয়। আকৃতিই পার্থক্য বহন করে, শুধু রঙ নয়। */ .legend i.lg-dot { border-radius: 50%; background: var(--lvl2); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-2); } .legend i.lg-none { background: var(--surface-3); border: 1px dashed var(--line-2); border-radius: 2px; } /* ------------------------------------------------ ২৪. v7.0 উৎসের ব্যাজ */ /* সংখ্যাটি কে মেপেছে — যন্ত্র, না মডেল। v7.0-এ ERA5 ব্যাকফিল প্রতিটি স্টেশনের নিজের স্থানাঙ্কে চলে, তাই "সংখ্যা আছে" আর "যন্ত্র চলছে" আর এক কথা নয়। ব্যাজটি ছোট ও নিরুচ্চার — তথ্য, সতর্কতা নয়। */ .src-tag { display: inline-block; margin-left: var(--s2); font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .02em; padding: 1px var(--s2); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); vertical-align: 1px; } .src-tag.inst { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, transparent); color: var(--brand-ink); } /* ===================================================================== ২৫. v7.0 — পরিমার্জনের পাস --------------------------------------------------------------------- লক্ষ্য: "clean minimal, colourful, premium"। এই তিনটি একসাথে চাইলে একটাই কৌশল কাজ করে — **রঙের বাজেট কমিয়ে জায়গা ও টাইপোগ্রাফিতে খরচ করা**। তাই এখানে নতুন কোনো রঙ যোগ করা হয়নি। যা করা হয়েছে: · ক্রোম আরও শান্ত — সীমানা পাতলা, ছায়া নরম, পৃষ্ঠতলের ধাপ স্পষ্ট · সংখ্যা বড় ও tabular — ড্যাশবোর্ডে সংখ্যাই নায়ক · প্রতিটি ব্যান্ডের শিরোনামে একটি সরু উল্লম্ব দাগ — কাঠামো বোঝায় · হোভারে সূক্ষ্ম উত্থান, কিন্তু prefers-reduced-motion মানা হয় একমাত্র রঙ যা চোখ টানে, সেটি BMD-র স্তরের রঙ — এবং সেটাই উদ্দেশ্য। ===================================================================== */ /* ------------------------------------------------- ২৫ক. সেকশন শিরোনাম */ /* সরু দাগটি সাজসজ্জা নয় — এটি বলে "এখান থেকে নতুন অংশ শুরু", যা দীর্ঘ স্ক্রলে স্ক্যান করতে সাহায্য করে। */ .shead h2 { font-family: 'Anek Bangla', sans-serif; font-weight: 600; letter-spacing: -.01em; position: relative; padding-left: var(--s4); } .shead h2::before { content: ''; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px; border-radius: var(--r-full); background: linear-gradient(to bottom, var(--brand), color-mix(in oklab, var(--brand) 30%, transparent)); } /* --------------------------------------------------------- ২৫খ. কার্ড */ .card { transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .card:hover { box-shadow: var(--e2); border-color: var(--line-2); } .card h3 { font-family: 'Anek Bangla', sans-serif; font-weight: 600; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .card h3 .tag { font-family: 'IBM Plex Mono', monospace; font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); letter-spacing: 0; white-space: nowrap; } /* ---------------------------------------------------------- ২৫গ. KPI */ /* সংখ্যাগুলো tabular-nums — টাইল পাশাপাশি বসে, অঙ্ক এক লাইনে থাকে। না দিলে "৩৩.৮" আর "১১১.১"-এর প্রস্থ আলাদা হয়ে সারিটা নড়বড়ে দেখাত। */ .kpi { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .kpi:hover { transform: translateY(-1px); } .kpi .v { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .kpi .k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; } /* ------------------------------------------- ২৫ঘ. হিরোর সংখ্যা ও পটি */ .hero-figure .big { font-variant-numeric: tabular-nums; } /* স্তরের রঙে একটি খুব হালকা আভা — পটভূমি নয়, ইঙ্গিত। ৪% অস্বচ্ছতা ইচ্ছাকৃতভাবে কম: বেশি হলে লেখার কনট্রাস্ট নেমে যেত, আর হিরোটিই তখন একটি রঙিন ব্যানার হয়ে উঠত — যা এড়াতেই v6.5-এ পুরনো ব্যানারটি বাদ দেওয়া হয়েছিল। */ .heat-hero { background: linear-gradient(135deg, color-mix(in oklab, var(--hero-lvl, var(--lvl0)) 4%, transparent) 0%, transparent 45%), var(--surface); } /* ------------------------------------------------- ২৫ঙ. স্টেশন কার্ড */ .st-card { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .st-card:hover { transform: translateY(-2px); box-shadow: var(--e2); } .st-card .rd { font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* নিচের সারি: সময় বাঁয়ে, উৎস ডানে — দুটোই "এই সংখ্যাটা কোথা থেকে" */ .st-card .age { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); border-top: 1px solid var(--line); margin-top: auto; } .st-card .age .src-tag { margin-left: 0; } /* ----------------------------------------------------- ২৫চ. চিপ সারি */ .chip { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------ ২৫ছ. টেবিল */ .tablewrap table { font-variant-numeric: tabular-nums; } .tablewrap th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } /* ------------------------------------------------------ ২৫জ. মানচিত্র */ /* Leaflet-এর বিন্দুগুলো হোভারে একটু বাড়ে — JS-এ radius বদলায়, এখানে শুধু কার্সরটি বলে দেয় যে ক্লিক করা যায়। */ .leaflet-interactive { cursor: pointer; } /* -------------------------------------------- ২৫ঝ. চার্টের প্রবেশ */ /* খুব সংক্ষিপ্ত fade — চার্ট বসার সময় ক্যানভাস ঝাঁকি দেয়, সেটি ঢাকা পড়ে। prefers-reduced-motion থাকলে অ্যানিমেশন এমনিতেই বাতিল (§১৯)। */ .chart { animation: hews-fade var(--dur-3) var(--ease) both; } @keyframes hews-fade { from { opacity: 0; } to { opacity: 1; } } /* ------------------------------- বছর-পরিসর নির্বাচক ও র‍্যাম্প (v8.1) */ .rangebar { align-items: center; gap: var(--s3); flex-wrap: wrap; } .rangebar label { display: inline-flex; align-items: center; gap: var(--s2); } .rangebar select { min-width: 5.5rem; } .rangearrow { color: var(--ink-3); font-size: var(--t-lg); line-height: 1; } /* র‍্যাম্প-কিংবদন্তি — ক্রমযুক্ত রঙের জন্য চিপ নয়, ধারাবাহিক পটি। ⚠ রঙই একমাত্র বাহক নয়: দুই প্রান্তে বছরের সংখ্যা লেখা, আর নিচের টেবিলে প্রতিটি বছরের মান সংখ্যায় আছে। */ .ramp-legend { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-2); } .ramp-bar { display: flex; height: 12px; border-radius: var(--r-sm); overflow: hidden; flex: 1 1 160px; min-width: 120px; max-width: 420px; border: 1px solid var(--line); } .ramp-step { flex: 1 1 auto; } .ramp-end { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); } .ramp-cap { color: var(--ink-3); } /* ------------------------------ KPI ঘরে অবস্থার রঙ (v8.1) বাঁ পাশে একটি সরু পটি + হালকা আভা। রঙটি BMD স্তরের, ঠিক যেটি হিরো ব্যান্ড ও ৭ দিনের চিপে ব্যবহৃত — তাই পাতাজুড়ে একই রঙ সবসময় একই জিনিস বোঝায়। ⚠ রঙই একমাত্র বাহক নয়: স্তরের নামটি ঘরের নিচে লেখা থাকে (.kpi .n)। */ .kpi.has-lvl { border-left-width: 4px; border-left-style: solid; padding-left: calc(var(--s4) - 3px); } .kpi .n { display: block; margin-top: var(--s1); font-size: var(--t-xs); font-weight: 600; line-height: 1.3; /* ⚠ লেখাটি **স্তরের রঙ পায় না**, লেখার নিজস্ব রঙ পায়। ব্যাজে যে ছাঁচটি চলে (color: var(--lvlN) নিজের soft প্রেক্ষাপটে) সেটি মেপে দেখা গেল বেশ কয়েক জায়গায় পড়ার অযোগ্য — লাইট মোডে স্তর ১ (হলুদ) মাত্র ১.৬৮:১, ডার্ক মোডে স্তর ৪ ২.৬০:১। রঙ বহন করে বাঁ পাশের পটি ও হালকা আভা; নামটি শুধু পড়া গেলেই হলো। */ color: var(--ink); } .kpi.has-lvl.l0 { border-left-color: var(--lvl0); background: var(--lvl0-soft); } .kpi.has-lvl.l1 { border-left-color: var(--lvl1); background: var(--lvl1-soft); } .kpi.has-lvl.l2 { border-left-color: var(--lvl2); background: var(--lvl2-soft); } .kpi.has-lvl.l3 { border-left-color: var(--lvl3); background: var(--lvl3-soft); } .kpi.has-lvl.l4 { border-left-color: var(--lvl4); background: var(--lvl4-soft); } /* ===================================================================== ২৬. v8.5 — মানচিত্র নতুন করে --------------------------------------------------------------------- ব্যবহারকারীর কথা: "map section very poor deisgn not information and not dynamic and not colorfull and the point have no value show there"। এখানকার প্রতিটি নিয়ম ঐ বাক্যের একটি করে টুকরোর উত্তর: .stn-pin "the point have no value show there" .map-list "not information" — সংখ্যাগুলো সাজানো, খুঁজতে হয় না .map-days "not dynamic" — সাত দিন এক নজরে, ক্লিকযোগ্য .map-pick "all area interconencteed" — কোন যন্ত্র বাছা হলো ===================================================================== */ /* ------------------------------------------------ ২৬ক. বিন্যাস */ /* মানচিত্র ও তালিকা পাশাপাশি। grid + gap, প্রতিটি ঘরে আলাদা margin নয় — margin দিলে দুটি ঘরের ফাঁক এক জায়গায় দ্বিগুণ, অন্যত্র শূন্য হতো। */ .map-grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr) 260px; align-items: start; } @media (max-width: 900px) { .map-grid { grid-template-columns: minmax(0, 1fr); } } .map-side { min-width: 0; } /* ------------------------------------------ ২৬খ. যন্ত্রের ক্রমতালিকা */ .map-list { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; /* তালিকা মানচিত্রের চেয়ে বেঁটে — নিচে লেজেন্ডের জায়গা রাখতে হয় */ max-height: clamp(220px, 40vh, 380px); overflow-y: auto; } .ml-head { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; } .ml-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); width: 100%; padding: var(--s2) var(--s3); background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; font-size: var(--t-sm); color: var(--ink); text-align: left; cursor: pointer; } .ml-row:last-child { border-bottom: 0; } .ml-row:hover { background: var(--surface-2); } .ml-row:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: -2px; } .ml-row i { width: 12px; height: 12px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px var(--line-2); } /* ⚠ এলাকার বাইরের যন্ত্র — রঙ নয়, আকৃতি ও লেখা দিয়ে আলাদা করা। রঙ একা পার্থক্য বহন করলে বর্ণান্ধ পাঠক ও সাদাকালো প্রিন্ট দুটোতেই "সতর্কতার ভিত্তি" আর "শুধু তুলনা" এক হয়ে যেত। */ .ml-row.is-out i { border-radius: 50%; opacity: .55; } .ml-row.is-out .ml-name { color: var(--ink-2); } .ml-tag { font-size: 10px; padding: 0 4px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink-2); } .ml-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ml-val { font-variant-numeric: tabular-nums; font-weight: 600; } .ml-row.is-sel { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--ink); } /* ------------------------------------------------- ২৬গ. দিনের ফিতা */ .map-days { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin: 0 0 var(--s3); } .md-lead { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); margin-right: var(--s2); align-self: center; } .md-day { display: grid; gap: 2px; justify-items: center; padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; font: inherit; font-size: var(--t-xs); color: var(--ink-2); min-width: 62px; } .md-day:hover { border-color: var(--line-2); } .md-day.is-on { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .md-bar { display: block; width: 100%; height: 6px; border-radius: 3px; } .md-val { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } /* -------------------------------------------- ২৬ঘ. নির্বাচনের চিপ */ .map-pick { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--t-sm); } .mp-label { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; } .mp-go { margin-left: auto; padding: var(--s1) var(--s3); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; font-size: var(--t-xs); color: var(--ink); cursor: pointer; } .mp-go:hover { background: var(--surface-3); } @keyframes mp-flash { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 35%, transparent); } to { box-shadow: 0 0 0 10px transparent; } } .map-pick.mp-flash { animation: mp-flash .7s ease-out 1; } @media (prefers-reduced-motion: reduce) { .map-pick.mp-flash { animation: none; } } /* ------------------------------------------------ ২৬ঙ. মান-বাহী বিন্দু */ /* ⚠ divIcon, circleMarker নয় — কারণটি dashboard.js-এ লেখা: SVG বৃত্তের ভেতরে লেখা বসানো যায় না। iconAnchor শূন্য, তাই অবস্থান ঠিক করা হয় translate দিয়ে; এতে লেবেলের প্রস্থ যা-ই হোক, কেন্দ্রটি স্থানাঙ্কেই থাকে। */ .stn-pin { display: grid; justify-items: center; gap: 1px; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: auto; } .pin-v { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; /* ২px পৃষ্ঠতলের বলয় — মার্ক স্পেকের নিয়ম: পরস্পরের উপর বসা চিহ্নের মাঝে পৃষ্ঠতলের ফাঁক থাকবে, নইলে দুটি বড়ি এক গোলা হয়ে যায় */ box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(0, 0, 0, .28); background: var(--surface-3); color: var(--ink-2); } .pin-n { font-size: 9px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); background: color-mix(in srgb, var(--surface) 82%, transparent); padding: 0 3px; border-radius: var(--r-sm); } /* এলাকার বাইরের যন্ত্র — ভাঙা বলয়, যাতে দেখেই বোঝা যায় এটি সতর্কতার ভিত্তি নয়। v7.0-এর ফাঁপা বৃত্তের নিয়মটিই, নতুন আকৃতিতে। */ .stn-pin.is-out .pin-v { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-2); opacity: .82; } .stn-pin.is-blank .pin-v { font-weight: 500; opacity: .7; } .stn-pin.is-sel .pin-v, .stn-pin.is-hot .pin-v { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); transform: scale(1.12); } .stn-pin .pin-v { transition: transform .12s ease-out; } @media (prefers-reduced-motion: reduce) { .stn-pin .pin-v { transition: none; } } /* --------------------------------------------------- ২৬চ. লেজেন্ড */ /* ⚠ v8.5 — লেজেন্ড এখন মানচিত্রের **পাশে**, উপরে নয়। পুরনো নিয়মটি ছিল `position:absolute; right; bottom` — ২৩ নং অংশে এখনো লেখা আছে, কারণ ঐ ছাঁচটি অন্য কোথাও ব্যবহার হতে পারে। এখানে সেটিকে বাতিল করা হচ্ছে, চুপচাপ মুছে নয়: absolute থাকলে লেজেন্ডটি পাশের কলামে গিয়েও নিজের জায়গা নিত না, আর তালিকার উপর বসে পড়ত। */ .map-side .legend { position: static; right: auto; bottom: auto; margin-top: var(--s3); box-shadow: none; } .legend { max-width: 260px; line-height: 1.5; } .legend strong { display: block; margin-bottom: var(--s2); font-size: var(--t-xs); } .lg-rows { display: grid; gap: 3px; } .lg-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: var(--s2); align-items: center; } .lg-row span { color: var(--ink-2); } .lg-row .muted { font-variant-numeric: tabular-nums; } .lg-ramp { display: flex; height: 10px; border-radius: 3px; overflow: hidden; margin: 2px 0; } .lg-ramp i { flex: 1; height: 100%; margin: 0; border-radius: 0; } .lg-ends { display: flex; justify-content: space-between; color: var(--ink-3); font-variant-numeric: tabular-nums; } .lg-sep { height: 1px; background: var(--line); margin: var(--s2) 0; } .lg-fine { margin-top: var(--s2); color: var(--ink-3); line-height: 1.45; } .legend i.lg-dot.lg-out { background: var(--surface-3); box-shadow: 0 0 0 2px var(--line-2); } @media (max-width: 900px) { /* সরু পর্দায় লেজেন্ড মানচিত্রের উপরে বসলে অর্ধেক মানচিত্র ঢেকে দিত */ .legend { position: static; max-width: none; margin-top: var(--s3); box-shadow: none; } } /* -------------------------------------------------- ২৬ছ. পপ-আপ */ .pop { min-width: 190px; } .pop-lvl { display: inline-block; margin: var(--s2) 0; padding: 2px var(--s3); border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 700; } .pop-row { display: flex; justify-content: space-between; gap: var(--s3); padding: 2px 0; border-bottom: 1px dotted var(--line); } .pop-row:last-of-type { border-bottom: 0; } .pop-row > span:first-child { color: var(--ink-2); } .pop-row .num { font-variant-numeric: tabular-nums; } /* বাছা চলকটি মোটা হরফে — বাকিগুলো প্রসঙ্গ, এটিই উত্তর */ .pop-row.is-cur > span:first-child { color: var(--ink); font-weight: 600; } .pop-fine { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.45; margin-top: 2px; } .pop-go { margin-top: var(--s3); width: 100%; padding: var(--s2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; font-size: var(--t-xs); color: var(--ink); cursor: pointer; } .pop-go:hover { background: var(--surface-3); } .leaflet-tooltip.map-tip { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--e2); font-size: var(--t-xs); font-variant-numeric: tabular-nums; } .leaflet-tooltip.map-tip::before { border-top-color: var(--line); } /* ===================================================================== ২৭. v8.5 — ঘণ্টার চক্র ও ঋতুর কার্ড ===================================================================== */ /* ছোট চার্ট — এক্সপোজারের স্তম্ভ ও বৃষ্টির চক্র দুটোই সহায়ক ছবি, মূল ছবি নয়। উচ্চতা কম রাখলে চোখ আগে মূল চার্টে পড়ে। */ .chart.short { aspect-ratio: 32 / 9; min-height: 170px; max-height: 240px; } @media (max-width: 700px) { .chart.short { aspect-ratio: 16 / 9; min-height: 180px; } } /* কার্ডের ভেতরের উপ-শিরোনাম — h3-র পর h4, ক্রম ভাঙা হয়নি */ .sub-h { margin: var(--s5) 0 var(--s3); font-family: 'Anek Bangla', system-ui, sans-serif; font-size: var(--t-md); font-weight: 600; color: var(--ink-2); } /* ছোট KPI — কার্ডের ভেতরে, পাতার উপরের বড় KPI-র চেয়ে হালকা */ .kpis-sm { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s2); margin-bottom: var(--s4); } .kpis-sm .kpi { padding: var(--s2) var(--s3); box-shadow: none; } .kpis-sm .kpi .v { font-size: var(--t-lg); } /* ------------------------- ২৭খ. v8.5 — লাইভ কার্ড ক্লিকযোগ্য */ /* পুরো কার্ডটি হিট-এরিয়া, কিন্তু হিট-এরিয়াটি একটি প্রকৃত