/* Theme Name: Spark Advocates Theme URI: https://sparkadvocates.com/ Author: Spark Advocates Author URI: https://sparkadvocates.com/ Description: বাংলাদেশের আইনি সেবার জন্য তৈরি প্রিমিয়াম কাস্টম থিম। Elementor বা কোনো পেজ-বিল্ডার ছাড়া — পরিষ্কার সেমান্টিক HTML, বাংলা-প্রথম টাইপোগ্রাফি, স্কিমা মার্কআপ, hreflang ও WCAG AA অ্যাক্সেসিবিলিটি। Version: 1.1.1 Requires at least: 6.2 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: spark Tags: law, legal, bengali, accessibility-ready, translation-ready, custom-colors, block-styles, wide-blocks */ /* ═══════════════════════════════════════════════════════════════════════ সূচি ১. ডিজাইন টোকেন ৭. এন্ট্রি কন্টেন্ট (প্রোজ) ২. রিসেট ও বেস ৮. লিগ্যাসি কন্টেন্ট ব্লক ৩. টাইপোগ্রাফি ৯. সাইডবার ও TOC ৪. লেআউট ১০. ফুটার ৫. হেডার ও নেভিগেশন ১১. আর্কাইভ · ৪০৪ · সার্চ ৬. হোম সেকশন ১২. অ্যাক্সেসিবিলিটি · প্রিন্ট · ডার্ক ═══════════════════════════════════════════════════════════════════════ */ /* ═══ ১. ডিজাইন টোকেন ══════════════════════════════════════════════════ */ :root { /* — রঙ: ব্রিটিশ লিগ্যাল লাক্সারি (British Legal Luxury Palette) — */ --c-ink: #0b261d; /* Deep Forest Green */ --c-ink-soft: #12372a; /* Forest Green (Primary) */ --c-brand: #12372a; /* Forest Green (Primary) */ --c-brand-hover: #1d4a39; /* Forest Green Hover */ --c-brand-mid: #1d4a39; /* Forest Green Hover */ --c-brand-deep: #0b261d; /* Deep Forest Green */ --c-brand-light: #f1e7d0; /* Light Gold Background */ --c-brand-tint: #f5f3ed; /* Ivory Background */ --c-gold: #b89b5e; /* Antique Gold (Accent) */ --c-gold-hover: #967b42; /* Dark Gold Hover */ --c-gold-deep: #967b42; /* Dark Gold Hover */ --c-gold-light: #f1e7d0; /* Light Gold Background */ --c-gold-hair: rgba(184, 155, 94, .38); /* সরু অ্যান্টিক গোল্ড বিভাজক-রেখা */ --c-gold-bright: #b89b5e; /* Antique Gold */ --c-text: #24332c; /* Primary Text */ --c-text-soft: #58645d; /* Secondary Text */ --c-text-mute: #7b827c; /* Muted Text */ --c-heading: #24332c; /* Primary Text */ /* লিংক-রঙ: ফরেস্ট গ্রিন ও অ্যান্টিক গোল্ড হভার */ --c-link: #12372a; /* Forest Green */ --c-link-hover: #b89b5e; /* Antique Gold */ /* বাটন কালার টোকেন (ডিফল্ট: ব্রিটিশ লিগ্যাল লাক্সারি গোল্ড) */ --c-btn-bg: #b89b5e; /* Antique Gold */ --c-btn-text: #0b261d; /* Deep Forest Green */ --c-btn-border: #b89b5e; --c-btn-hover-bg: #967b42; /* Dark Gold */ --c-btn-hover-text: #0b261d; --c-btn-hover-border: #967b42; --c-btn-sec-bg: #12372a; /* Forest Green */ --c-btn-sec-text: #f5f3ed; /* Ivory */ --c-btn-sec-border: #b89b5e; --c-btn-sec-hover-bg: #b89b5e; /* Antique Gold */ --c-btn-sec-hover-text: #0b261d; --c-btn-sec-hover-border:#b89b5e; /* হেডার, টপবার ও ফুটার রঙ */ --c-header-bg: #ffffff; /* Pure White Header (ব্যবহারকারীর চাহিদামতো) */ --c-header-text: #24332c; /* Primary Dark Text */ --c-topbar-bg: #0b261d; /* Deep Forest Green */ --c-topbar-text: #f5f3ed; /* Ivory Text */ --c-footer-bg: #0b261d; /* Deep Forest Green */ --c-footer-text: #f5f3ed; /* Ivory Text */ --c-footer-heading: #b89b5e; /* Antique Gold */ --c-bg: #f5f3ed; /* Ivory Background (Main Website Background) */ --c-bg-card: #ffffff; /* Pure White */ --c-bg-alt: #f1e7d0; /* Light Gold Background (Alternate sections) */ --c-bg-deep: #0b261d; /* Deep Forest Green */ --c-paper: #f5f3ed; /* Ivory Background */ --c-border: #e2ded3; /* Border */ --c-border-soft: rgba(226, 222, 211, 0.7); --c-success: #356b4b; /* Success */ --c-success-bg: #e6f0e9; --c-warn: #967b42; /* Dark Gold */ --c-warn-bg: #f7efdd; --c-danger: #a94442; /* Error */ --c-danger-bg: #f6e4e3; --c-focus: #b89b5e; /* Antique Gold */ /* — ফন্ট — সারা সাইটে এক ফ্যামিলি: Tiro Bangla। দীর্ঘ পাঠের জন্য ডিজাইন করা সেরিফ — হেডিংয়ের গাম্ভীর্য আর বডির পাঠযোগ্যতা একই টাইপফেস থেকে। সান্স কোথাও নেই; এক কণ্ঠেই বিচারিক চরিত্র অটুট থাকে। */ --f-display: "Tiro Bangla", "Noto Serif Bengali", "Source Serif 4", "Kalpurush", Georgia, "Times New Roman", serif; --f-head: var(--f-display); --f-body: "Tiro Bangla", "Noto Serif Bengali", "Source Serif 4", "Kalpurush", Georgia, "Times New Roman", serif; --f-ui: var(--f-body); --f-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace; /* — টাইপ স্কেল: fluid, clamp() দিয়ে (মোবাইল → ডেস্কটপ) — */ --t-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem); --t-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.94rem); --t-base: clamp(1.02rem, 0.98rem + 0.2vw, 1.13rem); --t-lg: clamp(1.13rem, 1.07rem + 0.3vw, 1.28rem); --t-xl: clamp(1.28rem, 1.18rem + 0.5vw, 1.5rem); --t-2xl: clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem); --t-3xl: clamp(1.7rem, 1.45rem + 1.2vw, 2.35rem); --t-4xl: clamp(2rem, 1.6rem + 2vw, 3.05rem); /* বাংলায় মাত্রা+যুক্তাক্ষরের জন্য বেশি লিডিং লাগে। তবে সিরিফ ডিসপ্লে শিরোনামে লিডিং কমালে ব্লকটা জমাট ও ওজনদার দেখায় — সেটাই চাই। */ --lh-tight: 1.16; --lh-head: 1.34; --lh-body: 1.85; --lh-loose: 2; /* শিরোনাম-নিয়ন্ত্রণ — সেটিংস থেকে সুরে বাঁধা। স্কেল = আকারের গুণক, ট্র্যাকিং = অক্ষর-ব্যবধান (বাংলা যুক্তাক্ষর অটুট রাখতে সীমা ছোট)। */ --head-scale: 1; --head-tracking: 0; /* — স্পেসিং — */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.75rem; --s-8: 3.5rem; --s-9: 5rem; --s-10: 7rem; /* — কাঠামো — */ --w-wide: 1240px; --w-page: 1080px; --w-prose: 74ch; /* পড়ার আদর্শ লাইন-দৈর্ঘ্য */ --pad-x: clamp(1rem, 4vw, 2.5rem); /* গোল কোণা ইচ্ছাকৃতভাবে কম। বড় ব্যাসার্ধ (পিল বাটন, ২২px কার্ড) SaaS/অ্যাপের ভাষা; আইনি প্রতিষ্ঠান ধারালো, স্থাপত্যধর্মী কোণা ব্যবহার করে। */ --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 6px; --r-full: 999px; --sh-xs: 0 1px 2px rgba(11, 38, 29, .06); --sh-sm: 0 2px 6px rgba(11, 38, 29, .07); --sh-md: 0 6px 20px rgba(11, 38, 29, .09); --sh-lg: 0 18px 48px rgba(11, 38, 29, .13); --sh-focus: 0 0 0 3px rgba(184, 155, 94, .35); --ease: cubic-bezier(.4, 0, .2, 1); --dur: .22s; --header-h: 76px; } /* ═══ ২. রিসেট ও বেস ═══════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); /* কোনো একক উপাদান বিপথে গেলেও যেন গোটা পাতায় আনুভূমিক স্ক্রলবার না আসে। clip — hidden নয় — কারণ এটি স্ক্রল-কনটেইনার বানায় না, তাই sticky হেডার/ সাইডবার অক্ষত থাকে; y-অক্ষ visible-ই থাকে (clip-এর ব্যতিক্রম)। */ overflow-x: clip; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--f-body); font-size: var(--t-base); line-height: var(--lh-body); font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } img, svg, video, iframe { max-width: 100%; height: auto; } img { display: block; border-style: none; } svg { fill: currentColor; } /* ইনলাইন আইকন — inc/icons.php এর spark_icon() প্রতিটি SVG-তে এই ক্লাসটি বসায়। উপরের `svg { fill: currentColor }` নিয়মটি SVG-এর নিজের fill="none" উপস্থাপনা-অ্যাট্রিবিউটকে হারিয়ে দেয় (CSS নিয়ম অ্যাট্রিবিউটের চেয়ে জেতে), ফলে স্ট্রোক-আইকনগুলো ভরাট কালো দাগ হয়ে যেত। .ic সেটি আটকায়। */ .ic { width: 1.05em; height: 1.05em; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } a { color: var(--c-link, #12372a); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--dur) var(--ease); } a:hover { color: var(--c-link-hover, #b89b5e); } :is(.entry-content, .prose, .card__desc, .lead, .legal-faq, .post-content) a:not(.btn) { color: var(--c-link, #12372a); text-decoration: underline; text-decoration-color: var(--c-link-hover, #b89b5e); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); } :is(.entry-content, .prose, .card__desc, .lead, .legal-faq, .post-content) a:not(.btn):hover { color: var(--c-link-hover, #b89b5e); text-decoration-color: var(--c-link-hover, #b89b5e); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-sm); } /* — ফর্ম উপাদানসমূহ — ব্রিটিশ লিগ্যাল লাক্সারি প্যালেট — */ :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], input[type="date"], select, textarea) { background-color: var(--c-bg-card, #ffffff); border: 1px solid var(--c-border, #e2ded3); color: var(--c-text, #24332c); border-radius: var(--r-md, 8px); padding: .68em .9em; font-family: inherit; font-size: var(--t-base, 1rem); line-height: inherit; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], input[type="date"], select, textarea):focus { border-color: var(--c-gold, #b89b5e); box-shadow: 0 0 0 3px rgba(184, 155, 94, 0.25); outline: none; } :where(input, select, textarea)::placeholder { color: var(--c-text-mute, #7b827c); } :where(label) { color: var(--c-text, #24332c); } .field-error, .error, .wpcf7-not-valid-tip { color: var(--c-danger, #a94442); font-size: var(--t-xs); } input.has-error, textarea.has-error, select.has-error, input.wpcf7-not-valid, textarea.wpcf7-not-valid { border-color: var(--c-danger, #a94442) !important; } hr { border: 0; height: 1px; background: var(--c-border); margin: var(--s-7) 0; } hr.thin { margin: var(--s-5) 0; background: var(--c-border-soft); } ::selection { background: var(--c-brand-light); color: var(--c-ink); } /* ═══ ৩. টাইপোগ্রাফি ═══════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { font-family: var(--f-head); color: var(--c-heading); font-weight: 600; line-height: var(--lh-head); margin: 0 0 var(--s-4); letter-spacing: var(--head-tracking); text-wrap: balance; } h1 { font-size: calc(var(--t-4xl) * var(--head-scale)); font-weight: 700; line-height: var(--lh-tight); } h2 { font-size: calc(var(--t-2xl) * var(--head-scale)); font-weight: 700; } h3 { font-size: calc(var(--t-xl) * var(--head-scale)); font-weight: 600; } h4 { font-size: calc(var(--t-lg) * var(--head-scale)); font-weight: 600; } h5, h6 { font-size: calc(var(--t-base) * var(--head-scale)); font-weight: 600; } p { margin: 0 0 var(--s-5); } strong, b { font-weight: 600; color: var(--c-ink-soft); } em, i { font-style: italic; } small { font-size: var(--t-sm); } code, kbd, samp, pre { font-family: var(--f-mono); font-size: .92em; } code { background: var(--c-bg-alt); border: 1px solid var(--c-border); padding: .12em .4em; border-radius: var(--r-sm); } pre { background: var(--c-ink); color: #e4ede7; padding: var(--s-5); border-radius: var(--r-md); overflow-x: auto; line-height: 1.65; } pre code { background: none; border: 0; padding: 0; color: inherit; } /* লাতিন-only লেখায় সেরিফ বাংলা ফন্ট দরকার নেই */ [lang="en"], .lang-en { font-family: var(--f-head); line-height: 1.75; } /* ═══ ৪. লেআউট ═════════════════════════════════════════════════════════ */ .wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--pad-x); } .wrap--wide{ max-width: var(--w-wide); } .wrap--narrow { max-width: 780px; } .site { display: flex; flex-direction: column; min-height: 100vh; } .site-main { flex: 1 0 auto; } .section { padding-block: calc(clamp(2.75rem, 6vw, 5.5rem) * var(--section-scale, 1)); } .section--alt { background: var(--c-bg-alt); } .section--tint { background: var(--c-brand-tint); } .section--deep { background: var(--c-bg-deep); color: #e2ded3; background-image: radial-gradient(ellipse 90% 70% at 15% -10%, rgba(29, 74, 57,.55), transparent 70%); } .section--deep :is(h1,h2,h3,h4) { color: #fff; } .section--deep a { color: #dcc48c; } .section-head { max-width: 62ch; margin-bottom: var(--s-7); } .section-head--center { margin-inline: auto; text-align: center; } /* আইব্রাউ-লেবেল আগে ALL-CAPS ট্র্যাকিংয়ে লেখা ছিল — বাংলায় ক্যাপস বলে কিছু নেই, থাকলেও সেটা যেকোনো টেমপ্লেটের ছাপ। এখন মোটিফটি আদালতি: সরু সোনালি রেখা + সিরিফ লেবেল, যা হিরোর কিকারের সঙ্গে এক ভাষায়। */ .eyebrow { display: inline-flex; align-items: center; gap: .8em; font-family: var(--f-display); font-size: var(--t-sm); font-weight: 700; color: var(--c-gold-deep); margin-bottom: var(--s-3); } .eyebrow::before { content: ""; width: 1.9rem; height: 1px; background: var(--c-gold); opacity: .75; flex: 0 0 auto; } /* হোমের সেকশন-শিরোনাম: এক ধাপ বড় গলা + নিচে সোনালি রুল — রায়ের স্বাক্ষররেখার মোটিফ। বাকি পাতা আগের মাপেই থাকে, হোম-ই মঞ্চ। */ body.home .section-head h2 { font-size: calc(clamp(1.85rem, 1.3rem + 2.3vw, 2.85rem) * var(--head-scale)); } body.home .section-head h2::after { content: ""; display: block; width: 3.4rem; height: 2px; background: var(--c-gold); margin-top: .7rem; } body.home .section-head--center h2::after { margin-inline: auto; } .section-head--center .eyebrow::after { content: ""; width: 1.9rem; height: 1px; background: var(--c-gold); opacity: .75; flex: 0 0 auto; } .section--deep .eyebrow { color: #c9ae74; } .lede { font-size: var(--t-lg); color: var(--c-text-soft); line-height: var(--lh-body); } .section--deep .lede { color: #c7cfc4; } /* গ্রিড — auto-fit, মিডিয়া কোয়েরি ছাড়াই রেসপনসিভ */ .grid { display: grid; gap: var(--grid-gap, var(--s-5)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } /* কন্টেন্ট + সাইডবার */ .layout { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); padding-block: var(--s-7) var(--s-9); } @media (min-width: 1024px) { .layout--sidebar { grid-template-columns: minmax(0, 1fr) 310px; } /* স্পার্ক সেটিংস: সাইডবার বাঁ পাশে — সাইডবারকে প্রথম কলামে টানি (মার্কআপে কন্টেন্ট আগে থাকে, তাই order দিয়ে অদলবদল)। */ .layout--sidebar-left { grid-template-columns: 310px minmax(0, 1fr); } .layout--sidebar-left > :first-child { order: 2; } .layout--sidebar-left > .sidebar { order: 1; } } /* সাইডবার ছাড়া (পূর্ণ প্রস্থ) — এক-কলাম, স্বাভাবিক প্যাডিং। */ .layout--full { padding-block: var(--s-7) var(--s-9); } /* স্পার্ক সেটিংস: স্টিকি সাইডবার বন্ধ — কন্টেন্টের সাথেই স্ক্রল করে। */ @media (min-width: 1024px) { .layout--no-sticky > .sidebar { position: static; top: auto; } } /* ═══ Story Highlights — "এই লেখার মূল বিষয়" বাক্স ══════════════════════ */ .story-highlights { margin: 0 0 var(--s-6); padding: var(--s-5) var(--s-6); border: 1px solid var(--c-border); border-inline-start: 4px solid var(--c-gold, #b89b5e); border-radius: var(--radius, 12px); background: var(--c-surface-2, #f5f3ed); } .story-highlights__title { margin: 0 0 var(--s-3); font-size: var(--t-lg); color: var(--c-brand); } .story-highlights__list { margin: 0; padding-inline-start: 1.15em; display: grid; gap: var(--s-2); font-size: var(--t-md); line-height: 1.75; } .story-highlights__list li { margin: 0; } /* পোস্ট-ভিউ মেটা — অন্য মেটা-আইটেমের সাথেই মিশে থাকে। */ .entry-meta__views { display: inline-flex; align-items: center; gap: .35em; } /* ═══ লেআউট ভ্যারিয়েন্ট (স্পার্ক সেটিংস → Layout) ══════════════════════ */ /* পোস্ট: full — ফিচার্ড ইমেজ প্রান্ত-ছুঁই প্রশস্ত হিরো। */ .layout-post--full .featured-media { margin-inline: calc(-1 * clamp(1rem, 4vw, 3rem)); border-radius: 0; } .layout-post--full .featured-media img { width: 100%; } /* পোস্ট: left — ছোট থাম্বনেইল ইনট্রোর পাশে ভাসে। */ @media (min-width: 720px) { .layout-post--left .featured-media { float: inline-start; width: min(42%, 320px); margin: .35rem var(--s-5) var(--s-3) 0; } } /* পোস্ট: text — ইমেজ টেমপ্লেটেই বাদ; অতিরিক্ত CSS লাগে না। */ /* পেজ: boxed — কন্টেন্ট কার্ডে বসে। */ .layout-page--boxed .entry-content { padding: clamp(1.5rem, 4vw, 3rem); background: var(--c-surface, #fff); border: 1px solid var(--c-border); border-radius: var(--radius, 12px); box-shadow: 0 1px 3px rgba(11, 38, 29, .06); } /* পেজ: framed — সোনালি ফ্রেমে। */ .layout-page--framed .entry-content { padding: clamp(1.5rem, 4vw, 3rem); border: 2px solid var(--c-gold, #b89b5e); border-radius: var(--radius, 12px); } /* পেজ: full — টেমপ্লেটে ফিচার্ড ইমেজ বাদ; কন্টেন্ট স্বাভাবিক প্রস্থ। */ /* লেখার শেষে Source / Via লিংক-লাইন। */ .entry-srcvia { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--c-text-mute); } .entry-srcvia__label { font-weight: 700; color: var(--c-text); } .entry-srcvia + .entry-srcvia { margin-top: var(--s-2); } /* কন্টেন্টের উপরে/নিচে বিজ্ঞাপন-স্লট। */ .entry-ad { margin-block: var(--s-6); text-align: center; } .entry-ad img { max-width: 100%; height: auto; } .entry-ad--above { margin-top: 0; } /* ═══ বাটন ═════════════════════════════════════════════════════════════ */ .btn { --btn-bg: var(--c-btn-bg, #b89b5e); --btn-fg: var(--c-btn-text, #0b261d); --btn-bc: var(--c-btn-border, #b89b5e); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; line-height: 1.2; padding: .92em 1.7em; border: 1px solid var(--btn-bc); border-radius: var(--r-md); background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } /* উঁচু হয়ে ওঠা (translateY) বাদ — ওটা অ্যাপের ভাষা। বদলে রঙ গাঢ় হয় আর নিচে একটা সরু সোনালি রেখা জেগে ওঠে। */ .btn::after { content: ""; position: absolute; inset-inline: .9em; bottom: -1px; height: 2px; background: var(--c-gold); opacity: 0; transition: opacity var(--dur) var(--ease), inset-inline var(--dur) var(--ease); } .btn:hover { background: var(--c-btn-hover-bg, #967b42); color: var(--c-btn-hover-text, #0b261d); border-color: var(--c-btn-hover-border, #967b42); } .btn:hover::after { opacity: 1; inset-inline: 0; } .btn:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .18); } /* বাটন ভ্যারিয়েন্টস — ব্রিটিশ লিগ্যাল লাক্সারি প্যালেট */ .btn--gold, .btn--primary { --btn-bg: var(--c-btn-bg, #b89b5e); --btn-fg: var(--c-btn-text, #0b261d); --btn-bc: var(--c-btn-border, #b89b5e); background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bc); } .btn--gold:hover, .btn--primary:hover { background: var(--c-btn-hover-bg, #967b42); border-color: var(--c-btn-hover-border, #967b42); color: var(--c-btn-hover-text, #0b261d); --btn-fg: var(--c-btn-hover-text, #0b261d); } .btn--gold::after, .btn--primary::after { background: var(--c-ink); } .btn--brand, .btn--secondary { --btn-bg: var(--c-btn-sec-bg, #12372a); --btn-fg: var(--c-btn-sec-text, #f5f3ed); --btn-bc: var(--c-btn-sec-border, #b89b5e); background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bc); } .btn--brand:hover, .btn--secondary:hover { background: var(--c-btn-sec-hover-bg, #b89b5e); border-color: var(--c-btn-sec-hover-border, #b89b5e); color: var(--c-btn-sec-hover-text, #0b261d); --btn-fg: var(--c-btn-sec-hover-text, #0b261d); } .btn--ghost, .btn--outline-dark { --btn-bg: transparent; --btn-fg: var(--c-brand, #12372a); border-color: var(--c-gold, #b89b5e); } .btn--ghost:hover, .btn--outline-dark:hover { background: var(--c-btn-hover-bg, #b89b5e); border-color: var(--c-btn-hover-border, #b89b5e); color: var(--c-btn-hover-text, #0b261d); --btn-fg: var(--c-btn-hover-text, #0b261d); } .btn--outline-light { --btn-bg: transparent; --btn-fg: #f5f3ed; border-color: var(--c-gold, #b89b5e); } .btn--outline-light:hover { background: var(--c-btn-hover-bg, #b89b5e); border-color: var(--c-btn-hover-border, #b89b5e); color: var(--c-btn-hover-text, #0b261d); --btn-fg: var(--c-btn-hover-text, #0b261d); } .btn--light { --btn-bg: #ffffff; --btn-fg: var(--c-brand, #12372a); border-color: var(--c-border, #e2ded3); } .btn--light:hover { background: var(--c-gold-light, #f1e7d0); border-color: var(--c-gold, #b89b5e); color: #0b261d; --btn-fg: #0b261d; } .btn--lg { font-size: var(--t-base); padding: 1.02em 2em; } .btn--sm { font-size: var(--t-xs); padding: .68em 1.15em; } .btn--block { width: 100%; } /* বাটনের ভেতরের আইকন — লেখার সাথে অনুপাত ধরে বাড়ে/কমে */ .btn svg { width: 1.2em; height: 1.2em; flex: 0 0 auto; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } /* ═══ কার্ড ════════════════════════════════════════════════════════════ */ .card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); background: var(--c-bg-card, #ffffff); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } /* উপরে একটা সোনালি রেখা — হভারে টেনে পুরো প্রস্থে যায়। সব কার্ডে একই ছায়া-লিফট দেওয়ার চেয়ে এটা অনেক বেশি সংযত ও প্রাতিষ্ঠানিক। */ .card::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: -1px; width: 0; height: 3px; background: var(--c-gold); transition: width .34s var(--ease); } .card:hover { border-color: var(--c-gold); box-shadow: var(--sh-sm); } .card:hover::before, .card:focus-within::before { width: 3.5rem; } .card__title { font-size: var(--t-lg); margin: 0; color: var(--c-heading); } .card__title a { color: inherit; text-decoration: none; } .card__title a:hover { color: var(--c-gold); } .card__excerpt { font-size: var(--t-sm); color: var(--c-text-soft); margin: 0; line-height: 1.78; } .card__meta { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--c-text-mute); display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: auto; padding-top: var(--s-2); } .card__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--c-border); background: var(--c-bg-alt); color: var(--c-gold); } .card__icon svg { width: 24px; height: 24px; } /* পুরো কার্ড ক্লিকযোগ্য, তবু লিংকই আসল ফোকাস টার্গেট */ .card--link .card__title a::after { content: ""; position: absolute; inset: 0; } .badge { display: inline-block; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; padding: .34em .78em; border-radius: var(--r-sm); background: var(--c-bg-alt); color: var(--c-brand); text-decoration: none; } .badge:hover { background: var(--c-brand); color: #fff; } .badge--gold { background: var(--c-gold-light); color: var(--c-gold-deep); } /* ট্রেন্ডিং ব্যাজ — মেটায় সোনালি হাইলাইট (spark_ps_is_trending)। */ .badge--trending { display: inline-flex; align-items: center; gap: .3em; background: var(--c-gold, #b89b5e); color: #0b261d; font-weight: 700; } .badge--trending:hover { background: var(--c-gold, #b89b5e); color: #0b261d; } .badge--trending .entry-meta__ic { width: 1em; height: 1em; } /* ═══ ৫. হেডার ও নেভিগেশন ══════════════════════════════════════════════ */ .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: 1000; background: var(--c-ink); color: #fff; padding: .7em 1.4em; border-radius: 0 0 var(--r-md) var(--r-md); font-family: var(--f-ui); font-size: var(--t-sm); text-decoration: none; } .skip-link:focus { transform: translate(-50%, 0); color: #fff; } .topbar { background: var(--c-topbar-bg, #0b261d); color: var(--c-topbar-text, #f5f3ed); font-family: var(--f-ui); font-size: var(--t-xs); border-bottom: 1px solid rgba(184, 155, 94, .2); } .topbar__in { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; justify-content: space-between; min-height: 40px; padding-block: .35rem; } .topbar a { color: var(--c-topbar-text, #f5f3ed); text-decoration: none; } .topbar a:hover { color: var(--c-gold, #b89b5e); } .topbar svg { color: var(--c-gold, #b89b5e); } .topbar__list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; } .topbar__list li { display: flex; align-items: center; gap: .4em; } /* টপবারের সামাজিক আইকন — ভরাট ব্র্যান্ড-গ্লিফ, .ic স্ট্রোক-ক্লাস ছাড়াই উপরের svg { fill: currentColor } থেকে রং পায়। ৭০০px-এর নিচে বাদ। */ .topbar__social a { display: grid; place-items: center; color: var(--c-gold, #b89b5e); } .topbar__social a:hover { color: var(--c-topbar-text, #f5f3ed); } .topbar__social svg { width: 14px; height: 14px; } @media (max-width: 700px) { .topbar__list li.topbar__social { display: none; } } /* WP Admin Bar Compatibility */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } body.admin-bar .site-header--floating_pill { top: calc(32px + 12px); } @media screen and (max-width: 782px) { body.admin-bar .site-header--floating_pill { top: calc(46px + 12px); } } body.admin-bar .site-header--floating_pill.is-stuck { top: calc(32px + 6px) !important; } @media screen and (max-width: 782px) { body.admin-bar .site-header--floating_pill.is-stuck { top: calc(46px + 6px) !important; } } .site-header { position: sticky; top: 0; z-index: 100; background: var(--c-header-bg, #ffffff); border-bottom: 1px solid var(--c-border, #e2ded3); transition: min-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s ease; } .site-header.is-stuck { background: var(--c-header-bg, #ffffff); box-shadow: 0 4px 20px rgba(11, 38, 29, .08); border-bottom-color: var(--c-border, #e2ded3); } .site-header.is-static { position: static; } /* স্ক্রলে হেডার মসৃণ সংকোচন (Header Shrink on Scroll) */ .site-header .site-header__in { transition: min-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), gap 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .site-header .brand__mark { transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .site-header .brand__mark img, .site-header .brand__mark svg { transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .site-header .brand__name { transition: font-size 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .site-header .brand__tag { transition: font-size 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .site-header .nav-primary a { transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), font-size 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .site-header .header-cta { transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), font-size 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .site-header .header-phone-pill { transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), font-size 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .site-header .header-search-bar { transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), min-height 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .site-header .nav-toggle { transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .site-header.has-sticky-compact.is-stuck { box-shadow: 0 4px 20px rgba(11, 38, 29, 0.08); } .site-header.has-sticky-compact.is-stuck .site-header__in { min-height: 54px !important; } .site-header.has-sticky-compact.is-stuck .brand__mark { width: 34px !important; height: 34px !important; } .site-header.has-sticky-compact.is-stuck .brand__mark img, .site-header.has-sticky-compact.is-stuck .brand__mark svg { max-height: 30px !important; width: auto; } .site-header.has-sticky-compact.is-stuck .brand__name { font-size: 1.02rem !important; } .site-header.has-sticky-compact.is-stuck .brand__tag { font-size: 10.5px !important; opacity: 0.85; } .site-header.has-sticky-compact.is-stuck .nav-primary a { padding: .35em .75em !important; font-size: 13px !important; } .site-header.has-sticky-compact.is-stuck .header-cta { padding: .38em .95em !important; font-size: 12.5px !important; } .site-header.has-sticky-compact.is-stuck .header-phone-pill { padding: 4px 10px !important; font-size: 11px !important; } .site-header.has-sticky-compact.is-stuck .header-search-bar { padding: 5px 12px !important; min-height: 30px !important; } .site-header.has-sticky-compact.is-stuck .nav-toggle { padding: .38em .7em !important; } .site-header--floating_pill.has-sticky-compact.is-stuck { top: 6px !important; box-shadow: 0 12px 36px rgba(11, 38, 29, 0.12); } .site-header--floating_pill.has-sticky-compact.is-stuck .site-header__in { min-height: 48px !important; } .site-header--floating_pill.has-sticky-compact.is-stuck .brand__mark { width: 32px !important; height: 32px !important; } /* ঘোষণা-পট্টি — হেডারের একদম উপরে, ব্র্যান্ড-গাঢ় পটে সোনালি-সাদা লেখা। */ .announce { background: var(--c-ink); color: #f5f3ed; font-family: var(--f-ui); font-size: var(--t-sm); text-align: center; padding: .5em var(--pad-x); border-bottom: 1px solid rgba(201, 174, 116, .3); } .site-header__in { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); } /* হেডার প্রিসেট ভ্যারিয়েন্টস */ .site-header--centered .site-header__in { justify-content: space-between; } @media (min-width: 1024px) { .site-header--centered .brand { order: 2; margin-inline-end: 0; } .site-header--centered .nav-primary { order: 1; } .site-header--centered .site-header__cta { order: 3; } } .site-header--minimal { background: rgba(255, 255, 255, .84); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid rgba(0, 0, 0, .06); } .site-header--minimal .site-header__in { min-height: calc(var(--header-h) - 12px); } .site-header--topbar_stacked .site-header__in { min-height: calc(var(--header-h) + 2px); } .brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; margin-inline-end: auto; } .brand__mark { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-md); background: linear-gradient(145deg, #0b261d, #12372a); border: none; color: #b89b5e; font-family: var(--f-head); font-weight: 700; font-size: 1.15rem; letter-spacing: -.03em; } .brand__mark:has(img), .brand--logo-only .brand__mark { border: none !important; background: none !important; box-shadow: none !important; } .brand__mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; } .brand__text { display: flex; flex-direction: column; line-height: 1.2; } .brand__name { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem); color: var(--c-header-text, #24332c); } .brand__tag { font-family: var(--f-ui); font-size: var(--t-xs); color: #b89b5e; } /* — প্রাইমারি মেনু (ডেস্কটপ) — */ .nav-primary { display: none; } @media (min-width: 1024px) { .nav-primary { display: block; } } .nav-primary ul { display: flex; align-items: center; gap: var(--s-1); margin: 0; padding: 0; list-style: none; } .nav-primary li { position: relative; } .nav-primary a { display: flex; align-items: center; gap: .35em; font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 500; color: var(--c-header-text, #24332c); text-decoration: none; padding: .6em .85em; border-radius: var(--r-md); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .nav-primary a:hover, .nav-primary li:hover > a, .nav-primary li:focus-within > a { background: rgba(184, 155, 94, 0.12); color: #b89b5e; } .nav-primary .current-menu-item > a, .nav-primary .current_page_item > a, .nav-primary .current-menu-ancestor > a { color: var(--c-brand, #12372a); font-weight: 600; } .nav-primary .menu-item-has-children > a::after { content: ""; width: .42em; height: .42em; margin-inline-start: .15em; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-.1em); } /* — সাব-মেনু — */ .nav-primary .sub-menu { position: absolute; inset-inline-start: 0; top: calc(100% + .35rem); display: block; min-width: 250px; padding: var(--s-2); background: #ffffff; border: 1px solid var(--c-border, #e2ded3); border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(11, 38, 29, 0.12); flex-direction: column; gap: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); } .nav-primary li:hover > .sub-menu, .nav-primary li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .nav-primary .sub-menu a { padding: .58em .8em; font-weight: 500; color: var(--c-text, #24332c); } .nav-primary .sub-menu a:hover { background: var(--c-bg-alt, #f1e7d0); color: var(--c-gold-hover, #967b42); } .nav-primary .sub-menu .sub-menu { top: -.35rem; inset-inline-start: calc(100% + .25rem); } .header-cta { display: none; } @media (min-width: 1180px) { .header-cta { display: inline-flex; background: var(--c-btn-bg, #b89b5e); color: var(--c-btn-text, #0b261d); border: 1px solid var(--c-btn-border, #b89b5e); } .header-cta:hover { background: var(--c-btn-hover-bg, #967b42); color: var(--c-btn-hover-text, #0b261d); border-color: var(--c-btn-hover-border, #967b42); } } /* — মোবাইল টগল ও ড্রয়ার — */ .nav-toggle { display: inline-flex; align-items: center; gap: .5em; background: none; border: 1px solid var(--c-border, #e2ded3); border-radius: var(--r-md); padding: .55em .85em; font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600; color: var(--c-header-text, #24332c); cursor: pointer; } @media (min-width: 1024px) { .nav-toggle { display: none; } } .nav-toggle__bars { position: relative; width: 18px; height: 12px; } .nav-toggle__bars span { position: absolute; inset-inline: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .nav-toggle__bars span:nth-child(1) { top: 0; } .nav-toggle__bars span:nth-child(2) { top: 5px; } .nav-toggle__bars span:nth-child(3) { top: 10px; } [aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); } [aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; } [aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .nav-drawer { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 1fr min(88%, 380px); visibility: hidden; } .nav-drawer[data-open="true"] { visibility: visible; } .nav-drawer__scrim { background: rgba(11, 38, 29, .5); opacity: 0; transition: opacity var(--dur) var(--ease); border: 0; padding: 0; cursor: pointer; } .nav-drawer[data-open="true"] .nav-drawer__scrim { opacity: 1; } .nav-drawer__panel { background: #fff; padding: var(--s-5) var(--s-5) var(--s-8); overflow-y: auto; box-shadow: var(--sh-lg); transform: translateX(100%); transition: transform .28s var(--ease); } .nav-drawer[data-open="true"] .nav-drawer__panel { transform: none; } /* ড্রয়ারে পরপর ব্লক-বাটন — নিজে থেকেই ফাঁক, ইনলাইন margin লাগে না */ .nav-drawer__panel .btn--block + .btn--block { margin-top: .5rem; } .nav-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); } .nav-drawer__close { background: none; border: 1px solid var(--c-border); border-radius: var(--r-sm); width: 38px; height: 38px; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--c-ink); } .nav-drawer ul { list-style: none; margin: 0; padding: 0; } .nav-drawer a { display: block; padding: .72em .2em; font-family: var(--f-ui); font-size: var(--t-base); font-weight: 500; color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-border-soft); } .nav-drawer a:hover { color: var(--c-brand); } .nav-drawer .sub-menu a { padding-inline-start: 1.2em; font-size: var(--t-sm); color: var(--c-text-soft); } .nav-drawer .btn { margin-top: var(--s-5); } body.nav-open { overflow: hidden; } /* ═══ ৬. হোম সেকশন ═════════════════════════════════════════════════════ */ /* ── ৬.১ হিরো — ছবি-কেন্দ্রিক, এডিটোরিয়াল ────────────────────────────── আগের হিরোতে ডান পাশে ঠিকানা-সময়ের
ছিল, অর্থাৎ ফুটারের কনটেন্ট পাতার সবচেয়ে দামি জায়গায়। এখন সেখানে আইনজীবীর ছবি — আইন বিশ্বাসের পেশা, আর বিশ্বাস শুরু হয় মুখ দেখা থেকে। */ .hero { position: relative; background: var(--c-ink); color: #e2ded3; overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 62% 58% at 78% 4%, rgba(184, 155, 94, .26), transparent 66%), radial-gradient(ellipse 95% 85% at 4% 104%, rgba(29, 74, 57, .58), transparent 70%); } /* সূক্ষ্ম উল্লম্ব রুল — স্থাপত্যধর্মী ছাপ, কনটেন্টের পেছনে খুব হালকা */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient( to right, transparent 0 calc(12.5% - 1px), rgba(255, 255, 255, .045) calc(12.5% - 1px) 12.5%); } .hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); /* ছবির intrinsic মাপ যেন কলাম চওড়া করতে না পারে */ gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(3.25rem, 8vw, 6rem) 0; /* পাতা খোলার পর হিরো যেন পুরো প্রথম পর্দা জুড়ে দাঁড়ায় — আধো-খালি ব্যান্ড নয়, পাতার নিজস্ব মঞ্চ। */ min-height: clamp(30rem, 76vh, 50rem); } @media (min-width: 900px) { /* SEO স্পেক: বাঁয়ে দাবি (~৫৫%), ডানে মুখ (~৪৫%) — বিশ্বাস আগে, ছবি পরে। */ .hero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } /* ছবি না থাকলে ডান পাশে এমব্লেম-প্যানেল — ফাঁকা ঘর নয়, সিলমোহর। দাবিটাই আগে পড়বে, তাই টেক্সট বাঁয়ে, মোহর ডানে। */ .hero__in--solo { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); max-width: none; } .hero__in--solo .hero__emblem { order: 2; } } .hero__in--solo { padding-block-end: clamp(3.25rem, 8vw, 6rem); } @media (max-width: 899px) { .hero__in { min-height: 0; } } /* — ছবি: নিচের প্রান্ত পর্যন্ত ফুল-ব্লিড — */ .hero__figure { position: relative; align-self: end; margin: 0; order: 2; } @media (min-width: 900px) { .hero__figure { order: 0; } } .hero__figure img { width: 100%; max-width: 420px; margin-inline: auto; display: block; /* নিচটা মিলিয়ে যায় যাতে ছবি কেটে যাওয়ার বদলে পটভূমিতে মিশে যায় */ -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); } /* ছবির পেছনে একটি সোনালি কোণ-রেখা */ .hero__figure::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 4%; inset-block: 12% 0; width: min(72%, 300px); border-top: 1px solid var(--c-gold-hair); border-inline-start: 1px solid var(--c-gold-hair); } .hero__body { padding-block-end: clamp(2.75rem, 7vw, 5rem); } .hero h1 { color: #fff; margin-bottom: var(--s-4); max-width: 16ch; /* হোমের শিরোনাম পাতার বাকি সব h2 থেকে স্পষ্টভাবে বড় — এটাই পাতার একমাত্র "বড় গলা"। বাকি সব সেকশন তার নিচে সংযত থাকে। */ font-size: calc(clamp(2.6rem, 1.45rem + 4.6vw, 4.9rem) * var(--head-scale)); line-height: 1.1; letter-spacing: -.006em; } .hero__lede { font-size: var(--t-xl); color: #c7cfc4; max-width: 44ch; margin-bottom: var(--s-6); } .hero .btn-row { margin-bottom: var(--s-5); } /* ছবি-বিরাম হিরোর ডান পাশে ফ্রেম-করা দাঁড়িপালা প্যানেল — হালকা ওয়াটারমার্ক নয়, সিলমোহরের মতো এমব্লেম। ভেতরে দ্বিতীয় সরু রিং, পেছনে সোনালি আভা। মোবাইলে লুকায় — ছোট পর্দায় দাবিটাই পুরো জায়গা পাবে। */ .hero__emblem { position: relative; justify-self: end; align-self: center; width: min(100%, 25rem); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--c-gold-hair); border-radius: var(--r-lg); background: radial-gradient(circle at 50% 40%, rgba(201, 174, 116, .17), transparent 64%); color: var(--c-gold-bright); } .hero__emblem::before { content: ""; position: absolute; inset: var(--s-4); border: 1px solid rgba(201, 174, 116, .3); border-radius: calc(var(--r-lg) - 5px); } .hero__emblem svg { width: 56%; height: 56%; stroke-width: .8; opacity: .85; } @media (max-width: 899px) { .hero__emblem { display: none; } } /* হিরোর আইব্রাউ — বাঁয়ে সোনালি রেখা সহ */ .hero__kicker { display: flex; align-items: center; gap: .8em; font-family: var(--f-display); font-size: var(--t-sm); font-weight: 700; color: var(--c-gold-bright); margin-bottom: var(--s-4); } .hero__kicker::before { content: ""; width: 2.4rem; height: 1px; background: var(--c-gold); flex: 0 0 auto; } /* আইনি দায়মুক্তি — ছোট, কিন্তু প্রতিটি ল ফার্মে থাকে */ .hero__note { font-family: var(--f-ui); font-size: var(--t-xs); color: #8a938a; max-width: 46ch; margin: 0; } /* ── ৬.২ পরিচিতি স্ট্রিপ — হিরোর ঠিক নিচে ─────────────────────────── */ .credbar { background: var(--c-ink-soft); border-block-start: 1px solid rgba(201, 174, 116, .32); /* হিরো থেকে সোনালি বিভাজন */ border-block-end: 1px solid rgba(255, 255, 255, .09); color: #cdd4cb; } .credbar__list { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin: 0; padding: 0; list-style: none; } .credbar__list li { display: flex; flex-direction: column; gap: .1rem; padding: var(--s-4) var(--s-5); border-inline-start: 1px solid rgba(255, 255, 255, .09); } .credbar__list li:first-child { border-inline-start: 0; } .credbar__k { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem); line-height: 1.15; color: var(--c-gold-bright); } .credbar__v { font-family: var(--f-ui); font-size: var(--t-xs); letter-spacing: 0; color: #8a938a; } /* ── ৬.৩ সেবা সূচি — নম্বরযুক্ত, সরু রেখায় ভাগ করা ───────────────────── কার্ড-গ্রিডের বদলে সূচি। বড় ল ফার্মের practice-area পাতা এভাবেই সাজানো হয় — সংযত, পাঠযোগ্য, আর ১০টা সেবা হলেও ভেঙে পড়ে না। */ .pindex { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border); } .pindex__item { border-bottom: 1px solid var(--c-border); } .pindex__link { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--s-4) clamp(1rem, 3vw, 2.25rem); padding: clamp(1.25rem, 3vw, 2rem) var(--s-4) clamp(1.25rem, 3vw, 2rem) 0; text-decoration: none; color: inherit; transition: padding-inline-start var(--dur) var(--ease), background-color var(--dur) var(--ease); } /* হভারে বাঁ দিক থেকে সোনালি রেখা ঢোকে আর সারিটা সামান্য সরে যায় */ .pindex__link::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--c-gold); transform: scaleY(0); transform-origin: 50% 0; transition: transform .3s var(--ease); } .pindex__link:hover, .pindex__link:focus-visible { background: var(--c-brand-tint); padding-inline-start: var(--s-4); } .pindex__link:hover::before, .pindex__link:focus-visible::before { transform: scaleY(1); } .pindex__num { font-family: var(--f-display); font-weight: 700; font-size: var(--t-2xl); line-height: 1; color: var(--c-border); font-feature-settings: "tnum"; transition: color var(--dur) var(--ease); min-width: 2.4ch; } .pindex__link:hover .pindex__num, .pindex__link:focus-visible .pindex__num { color: var(--c-gold); } /* ভেতরের অংশগুলো — লিংকের ভেতরে

বসালে আউটলাইন ভেঙে যায়, তাই শিরোনামের চেহারা CSS-ই দিচ্ছে, ট্যাগ নয়। */ .pindex__text { display: block; min-width: 0; } .pindex__name { display: block; font-family: var(--f-head); font-weight: 600; font-size: var(--t-xl); line-height: var(--lh-head); letter-spacing: 0; margin: 0 0 .35rem; color: var(--c-ink); } .pindex__desc { display: block; font-size: var(--t-sm); color: var(--c-text-soft); margin: 0 0 .55rem; max-width: 62ch; line-height: 1.75; } /* উপ-সেবার তালিকা — সূচিটাকে সত্যিকারের গভীরতা দেয় */ .pindex__sub { display: flex; flex-wrap: wrap; gap: .3rem .5rem; list-style: none; margin: 0; padding: 0; font-family: var(--f-ui); font-size: var(--t-xs); color: var(--c-text-mute); } .pindex__sub > *:not(:last-child)::after { content: "·"; margin-inline-start: .5rem; color: var(--c-gold); } .pindex__arrow { align-self: center; display: grid; place-items: center; color: var(--c-text-mute); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); } .pindex__arrow svg { width: 22px; height: 22px; } .pindex__link:hover .pindex__arrow { transform: translateX(.3rem); color: var(--c-brand); } @media (max-width: 560px) { .pindex__arrow { display: none; } } /* ── ৬.৩.১ সেবাক্ষেত্র — হোমের প্রিমিয়াম সংস্করণ (আলাদা পেজে লিংক) ──── সাধারণ সমান-কার্ড-গ্রিড নয়: প্রতিটি ঘর নিজের হেয়ারলাইনে আলাদা, উপরের বাঁ প্রান্তে সোনালি কর্নার-মার্ক — বার-কর্পসের ডসিয়ার ট্যাবের ছোঁয়া। বড় স্ক্রিনে দুই কলাম, মোবাইলে এক। */ .pareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--s-7); } @media (min-width: 900px) { .pareas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .parea > a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--s-4); padding: clamp(1.25rem, 2.6vw, 1.7rem) var(--s-4); border-top: 1px solid var(--c-border); text-decoration: none; color: inherit; transition: background-color var(--dur) var(--ease); } /* সোনালি কর্নার-মার্ক — উপরে-বাঁয়ে ছোট L, হভারে লম্বা হয় */ .parea > a::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 1.6rem; height: 3px; background: var(--c-gold); transition: width .35s var(--ease); } .parea > a:hover::before, .parea > a:focus-visible::before { width: 4.5rem; } .parea > a:hover, .parea > a:focus-visible { background: var(--c-brand-tint); } .parea__icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--c-gold-hair); border-radius: 50%; color: var(--c-brand); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .parea__icon svg { width: 20px; height: 20px; stroke-width: 1.5; } .parea > a:hover .parea__icon { color: var(--c-gold-deep); border-color: var(--c-gold); } .parea__body { display: block; min-width: 0; } .parea__name { display: block; font-family: var(--f-head); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height: var(--lh-head); color: var(--c-ink); margin-bottom: .3rem; } .parea__desc { display: block; font-size: var(--t-sm); color: var(--c-text-soft); line-height: 1.75; max-width: 52ch; margin-bottom: .55rem; } .parea__subs { display: flex; flex-wrap: wrap; gap: .3rem .55rem; font-family: var(--f-ui); font-size: var(--t-xs); color: var(--c-text-mute); } .parea__subs > *:not(:last-child)::after { content: "·"; margin-inline-start: .55rem; color: var(--c-gold); } .parea__go { align-self: center; display: grid; place-items: center; color: var(--c-text-mute); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); } .parea__go svg { width: 20px; height: 20px; } .parea > a:hover .parea__go { transform: translateX(.3rem); color: var(--c-brand); } @media (max-width: 560px) { .parea__go { display: none; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .parea > a:hover, :root:not([data-theme="light"]) .parea > a:focus-visible { background: #0b261d; } :root:not([data-theme="light"]) .parea__name { color: #eaf0ec; } :root:not([data-theme="light"]) .parea__icon { color: var(--c-gold-bright); } } /* ── ৬.৪ পরিসংখ্যান ───────────────────────────────────────────────── */ /* সংখ্যাগুলো বিপরীত-ওজনের এডিটোরিয়াল স্টাইলে: বিশাল সিরিফ অঙ্কের নিচে ছোট লেবেল, দুপাশে সরু সোনালি রেখা — সাধারণ "SaaS কাউন্টার"-এর বদলে বার-কর্পসের স্মারক-ফলকের ছাপ। */ .stats { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); } .stat { text-align: center; padding-inline: var(--s-3); border-top: 1px solid var(--c-gold-hair); padding-block-start: var(--s-4); } .stat__num { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); line-height: 1.05; color: var(--c-brand); letter-spacing: -.03em; font-feature-settings: "tnum"; } .stat__label { font-family: var(--f-ui); font-size: var(--t-xs); letter-spacing: 0; color: var(--c-text-soft); } .section--deep .stat { border-top-color: rgba(201, 174, 116, .4); } .section--deep .stat__num { color: var(--c-gold-bright); } .section--deep .stat__label { color: #b0bab0; } /* ── ৬.৫ প্রোফাইল — "আপনার আইনজীবী" ───────────────────────────────── */ .profile { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 860px) { .profile { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } } .profile__figure { position: relative; margin: 0; } .profile__figure img { width: 100%; border-radius: var(--r-lg); filter: saturate(.94) contrast(1.03); } /* ছবির পেছনে সরানো সোনালি ফ্রেম */ .profile__figure::before { content: ""; position: absolute; z-index: -1; inset-block: var(--s-5) calc(var(--s-5) * -1); inset-inline: calc(var(--s-5) * -1) var(--s-5); border: 1px solid var(--c-gold-hair); border-radius: var(--r-lg); } .profile__caption { position: absolute; inset-inline: var(--s-4); bottom: var(--s-4); background: rgba(11, 38, 29, .86); backdrop-filter: blur(6px); border-inline-start: 3px solid var(--c-gold); padding: .65rem .9rem; font-family: var(--f-ui); font-size: var(--t-xs); color: #e4ede7; border-radius: 0 var(--r-sm) var(--r-sm) 0; } .profile__caption b { display: block; font-size: var(--t-sm); color: #fff; font-weight: 600; } /* সনদ ও যোগ্যতার তালিকা */ .creds { list-style: none; margin: var(--s-5) 0 var(--s-6); padding: 0; display: grid; gap: 0; } .creds li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding-block: var(--s-3); border-bottom: 1px dashed var(--c-border); font-size: var(--t-sm); } .creds dt, .creds__k { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600; color: var(--c-text-mute); min-width: 10ch; } .creds__v { color: var(--c-ink-soft); } /* ── ৬.৬ ভরসার কারণ — চেকলিস্ট ────────────────────────────────────── */ .whylist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); } @media (min-width: 760px) { .whylist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-7); } } .whylist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); } .whylist__mark { width: 2.1rem; height: 2.1rem; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--c-gold-hair); border-radius: var(--r-sm); color: var(--c-gold-deep); font-size: .9rem; font-weight: 700; } .whylist__mark svg { width: 1.15rem; height: 1.15rem; } .whylist h3 { font-size: var(--t-base); margin: .1rem 0 .3rem; } .whylist p { font-size: var(--t-sm); color: var(--c-text-soft); margin: 0; line-height: 1.75; } .section--deep .whylist h3 { color: #fff; } .section--deep .whylist p { color: #b0bab0; } .section--deep .whylist__mark { border-color: rgba(201, 174, 116, .45); color: var(--c-gold-bright); } /* ── ৬.৭ ক্লায়েন্টের কথা ──────────────────────────────────────────── */ /* ── ৬.৭ রিভিউ কার্ড (Google পর্যালোচনা) — প্রিমিয়াম, তারা-রেটিংসহ ────── তারা শুধু দেখানোর জন্য (Google-এর আসল রেটিং)। কোনো Review/AggregateRating স্কিমা বসে না — নিজের সাইটে সেটি Google-এর নীতিতে ঝুঁকিপূর্ণ। */ .quotes { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .quote { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--s-5); box-shadow: var(--sh-xs); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .quote:hover { transform: translateY(-3px); box-shadow: var(--sh-md); } .quote__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); } .quote__stars { display: inline-flex; gap: 1px; font-size: 1.05rem; line-height: 1; letter-spacing: .04em; } .quote__star { color: var(--c-border); } .quote__star.is-on { color: #b89b5e; } /* Google "G" ব্যাজ — উৎস বোঝায়, বহুরঙা লোগো নয় (ট্রেডমার্ক-নিরাপদ)। */ .quote__src { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-ui); font-weight: 700; font-size: 15px; color: #4285f4; background: #fff; border: 1px solid var(--c-border); } .quote__text { position: relative; flex: 1 0 auto; font-family: var(--f-display); font-size: var(--t-base); line-height: 1.8; color: var(--c-ink-soft); margin: 0 0 var(--s-4); } .quote__by { display: flex; align-items: center; gap: var(--s-3); margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--c-border-soft); } .quote__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--c-brand), var(--c-brand-mid)); color: #fff; font-family: var(--f-ui); font-weight: 700; font-size: var(--t-base); text-transform: uppercase; } .quote__meta { display: flex; flex-direction: column; font-family: var(--f-ui); line-height: 1.35; } .quote__meta b { font-size: var(--t-sm); color: var(--c-ink); font-weight: 600; } .quote__place { font-size: var(--t-xs); color: var(--c-text-mute); } /* ── ৬.৮ এলাকা চিপ (লোকাল SEO) ────────────────────────────────────── */ .area-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; } .area-chips a { display: inline-flex; align-items: center; gap: .45em; font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 500; padding: .5em 1.05em; border-radius: var(--r-sm); border: 1px solid var(--c-border); background: #fff; color: var(--c-ink-soft); text-decoration: none; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .area-chips svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; opacity: .7; } .area-chips a:hover { border-color: var(--c-gold); background: var(--c-gold-light); color: var(--c-gold-deep); } .section--deep .area-chips a, .site-footer .area-chips a { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #d6ddd3; } .section--deep .area-chips a:hover, .site-footer .area-chips a:hover { background: rgba(201, 174, 116, .16); border-color: var(--c-gold-bright); color: #fff; } /* ── ৬.৯ CTA ব্যান্ড ──────────────────────────────────────────────── */ .cta-band { text-align: center; border-block: 1px solid rgba(201, 174, 116, .35); } .cta-band h2 { font-size: var(--t-3xl); } .cta-band .lede { margin-inline: auto; max-width: 58ch; margin-bottom: var(--s-6); } .cta-band .btn-row { justify-content: center; } .cta-band__fine { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--c-text-mute); margin: var(--s-5) auto 0; max-width: 60ch; } .section--deep .cta-band__fine { color: #8a938a; } /* ── ৬.১০ জরুরি সহায়তা ব্যান্ড ────────────────────────────────────── */ .urgent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); background: linear-gradient(100deg, #7a2d2b, #a94442 65%); color: #f6e4e3; border-radius: var(--r-lg); padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 2rem); } .urgent__icon { flex: 0 0 auto; width: 34px; height: 34px; color: #eecac9; } .urgent__icon svg { width: 100%; height: 100%; stroke-width: 1.4; } .urgent__body { flex: 1 1 18rem; } .urgent h2 { font-size: var(--t-lg); color: #fff; margin: 0 0 .2rem; } .urgent p { font-size: var(--t-sm); color: #f2d6d5; margin: 0; } .urgent .btn { --btn-bg: #fff; --btn-fg: #7a2d2b; } .urgent .btn::after { background: #7a2d2b; } /* ── ৬.১১ চেম্বার খোলা/বন্ধ সূচক ───────────────────────────────────── */ .hours-dot { display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600; } .hours-dot::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .hours-dot[data-open="true"] { color: #6fb48c; } .hours-dot[data-open="false"] { color: #d98f8c; } /* খোলা থাকলে আলতো স্পন্দন — reduced-motion-এ বন্ধ (§১২) */ .hours-dot[data-open="true"]::before { animation: sp-pulse 2.4s var(--ease) infinite; } @keyframes sp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(111, 180, 140, .55); } 60% { box-shadow: 0 0 0 .42em rgba(111, 180, 140, 0); } } /* ── ৬.১২ পরামর্শের ধাপ (হোম) — সত্যিকারের ক্রম, তাই নম্বর ─────────── */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); counter-reset: none; } @media (min-width: 820px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); } } .steps__item { position: relative; padding-top: var(--s-6); border-top: 1px solid var(--c-gold-hair); } .steps__num { position: absolute; top: -1.05em; inset-inline-start: 0; font-family: var(--f-display); font-weight: 700; font-size: 2rem; letter-spacing: 0; color: rgba(184, 155, 94, .45); background: var(--c-bg); padding-inline-end: .5em; line-height: 1.4; } .steps__icon { display: block; width: 30px; height: 30px; color: var(--c-brand); margin-bottom: var(--s-3); } .steps__icon svg { width: 100%; height: 100%; stroke-width: 1.4; } .steps h3 { font-size: var(--t-lg); margin: 0 0 var(--s-2); } .steps p { font-size: var(--t-sm); color: var(--c-text-soft); margin: 0; line-height: 1.8; } /* ── ৬.১৩ হোমের FAQ — কন্টেন্টের .faq-item-এরই ছোঁয়া, দুই কলামে ───── */ .homefaq { display: grid; gap: var(--s-3); } @media (min-width: 860px) { .homefaq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } } .homefaq .faq-item { margin-bottom: 0 !important; } /* উত্তরের ডান ধার সমান — একগুচ্ছ প্রশ্নোত্তর পাশাপাশি বসলে করাত-ধার দৃষ্টিকটু। শুধু উত্তর-অনুচ্ছেদে; প্রশ্ন-শিরোনামে নয় (সেটি ছোট, justify অর্থহীন ফাঁক করত)। শেষ লাইন বাঁয়েই থাকে (ডিফল্ট)। */ .homefaq .faq-item p { text-align: justify; text-justify: inter-word; hyphens: none; } /* ── ৬.১৪ প্রবাসী/আন্তর্জাতিক ব্যান্ড ───────────────────────────────── */ .intl { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; } @media (min-width: 900px) { .intl { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } } .intl h2 { margin-bottom: var(--s-3); } .intl__aside { background: #fff; border: 1px solid var(--c-border); border-top: 3px solid var(--c-gold); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: var(--s-6); } .intl__aside h3 { font-size: var(--t-base); margin: 0 0 var(--s-4); color: var(--c-brand); } .intl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); } .intl__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; font-size: var(--t-sm); color: var(--c-ink-soft); line-height: 1.7; } .intl__list svg { width: 1.15em; height: 1.15em; margin-top: .25em; color: var(--c-gold-deep); } /* ═══ ৭. এন্ট্রি কন্টেন্ট (প্রোজ) ══════════════════════════════════════ */ .entry-header { padding-block: var(--s-7) var(--s-2); } .entry-header--hero { background: var(--c-brand-tint); border-bottom: 1px solid var(--c-border); padding-block: clamp(2rem, 5vw, 3.5rem); } .entry-title { margin-bottom: var(--s-4); max-width: 34ch; } .page-template-default .entry-title, .entry-title--wide { max-width: none; } .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-family: var(--f-ui); font-size: var(--t-sm); color: var(--c-text-mute); margin-bottom: var(--s-4); } .entry-meta__item { display: inline-flex; align-items: center; gap: .4em; } .entry-meta a { color: var(--c-text-soft); text-decoration: none; } .entry-meta a:hover { color: var(--c-brand-mid); } .featured-media { margin-bottom: var(--s-6); } .featured-media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-sm); } .featured-media figcaption { font-size: var(--t-sm); color: var(--c-text-mute); margin-top: var(--s-2); } /* — প্রোজ: পুরনো কন্টেন্টের বাস্তব মার্কআপ ধরেই লেখা — */ .entry-content { max-width: var(--w-prose); } .entry-content--wide { max-width: none; } .entry-content > :first-child { margin-top: 0; } .entry-content > :last-child { margin-bottom: 0; } .entry-content h2 { margin-top: var(--s-8); margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 2px solid var(--c-border); } .entry-content h3 { margin-top: var(--s-7); } .entry-content h4 { margin-top: var(--s-6); color: var(--c-ink-soft); } /* পুরনো লেখায় h3/h4-এর ভেতরে মোড়ানো — দ্বিগুণ বোল্ড দেখতে খারাপ */ .entry-content :is(h2, h3, h4, h5) strong { font-weight: inherit; color: inherit; } /* হেডিং অ্যাংকর — functions.php স্বয়ংক্রিয়ভাবে id বসায় */ .entry-content :is(h2, h3) { position: relative; scroll-margin-top: calc(var(--header-h) + 1rem); } .heading-anchor { position: absolute; inset-inline-start: -1.3em; top: 50%; transform: translateY(-50%); opacity: 0; text-decoration: none; color: var(--c-text-mute); font-size: .72em; padding: .2em; transition: opacity var(--dur) var(--ease); } .entry-content :is(h2, h3):hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; } @media (max-width: 900px) { .heading-anchor { display: none; } } .entry-content ul, .entry-content ol { margin: 0 0 var(--s-5); padding-inline-start: 1.5em; } .entry-content li { margin-bottom: var(--s-2); } .entry-content li > ul, .entry-content li > ol { margin-top: var(--s-2); margin-bottom: var(--s-2); } .entry-content ul { list-style: none; padding-inline-start: 1.4em; } .entry-content ul > li { position: relative; } .entry-content ul > li::before { content: ""; position: absolute; inset-inline-start: -1.1em; top: .72em; width: .42em; height: .42em; border-radius: 50%; background: var(--c-gold); } .entry-content ol { list-style: none; counter-reset: sp-ol; padding-inline-start: 1.9em; } .entry-content ol > li { counter-increment: sp-ol; position: relative; } .entry-content ol > li::before { content: counter(sp-ol) "."; position: absolute; inset-inline-start: -1.7em; top: 0; font-family: var(--f-ui); font-weight: 600; font-size: .92em; color: var(--c-brand); font-variant-numeric: tabular-nums; } /* নেস্টেড ul-এর বুলেট ফাঁপা */ .entry-content ul ul > li::before { background: none; border: 1.5px solid var(--c-gold); } .entry-content blockquote { margin: var(--s-6) 0; padding: var(--s-5) var(--s-6); background: var(--c-brand-tint); border-inline-start: 4px solid var(--c-brand); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--t-lg); color: var(--c-ink-soft); } .entry-content blockquote > :last-child { margin-bottom: 0; } .entry-content blockquote cite { display: block; margin-top: var(--s-3); font-family: var(--f-ui); font-size: var(--t-sm); font-style: normal; color: var(--c-text-mute); } .entry-content :is(figure, .wp-block-image) { margin: var(--s-6) 0; } .entry-content :is(figure, .wp-block-image) img { border-radius: var(--r-md); box-shadow: var(--sh-xs); } .entry-content figcaption { font-family: var(--f-ui); font-size: var(--t-sm); color: var(--c-text-mute); text-align: center; margin-top: var(--s-3); } .entry-content .alignleft { float: inline-start; margin: .3em var(--s-5) var(--s-4) 0; max-width: 46%; } .entry-content .alignright { float: inline-end; margin: .3em 0 var(--s-4) var(--s-5); max-width: 46%; } .entry-content .aligncenter { margin-inline: auto; } @media (max-width: 640px) { .entry-content :is(.alignleft, .alignright) { float: none; max-width: 100%; margin-inline: 0; } } /* — টেবিল: কন্টেন্টে ১,২০০+ , তাই রেসপনসিভ হওয়া বাধ্যতামূলক — */ .table-scroll { position: relative; overflow-x: auto; margin: var(--s-6) 0; border: 1px solid var(--c-border); border-radius: var(--r-lg); -webkit-overflow-scrolling: touch; /* ডানে-বাঁয়ে আরও কন্টেন্ট আছে বোঝাতে ছায়া */ background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat, linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat, radial-gradient(farthest-side at 0 50%, rgba(11, 38, 29,.14), transparent) left / 14px 100% no-repeat, radial-gradient(farthest-side at 100% 50%, rgba(11, 38, 29,.14), transparent) right / 14px 100% no-repeat; background-attachment: local, local, scroll, scroll; } .table-scroll:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } .entry-content table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.75; background: #fff; } .table-scroll > table { margin: 0; } .entry-content :is(th, td) { padding: .8em 1em; text-align: start; vertical-align: top; border-bottom: 1px solid var(--c-border-soft); } .entry-content th { font-family: var(--f-ui); font-weight: 600; background: var(--c-brand-tint); color: var(--c-ink); border-bottom: 2px solid var(--c-border); white-space: nowrap; } .entry-content thead th { position: sticky; top: 0; z-index: 1; } .entry-content tbody tr:last-child :is(th, td) { border-bottom: 0; } .entry-content tbody tr:nth-child(even) { background: #fbfaf5; } .entry-content tbody tr:hover { background: var(--c-brand-tint); } .entry-content td > :last-child { margin-bottom: 0; } .entry-content td ul { margin-bottom: 0; } /* কল-আউট (নতুন লেখায় ব্যবহারযোগ্য) */ .callout { margin: var(--s-6) 0; padding: var(--s-5); border: 1px solid var(--c-border); border-inline-start: 4px solid var(--c-brand); border-radius: var(--r-md); background: var(--c-bg-alt); font-size: var(--t-sm); } .callout > :last-child { margin-bottom: 0; } .callout__title { font-family: var(--f-ui); font-weight: 600; margin-bottom: var(--s-2); color: var(--c-ink); } .callout--note { border-inline-start-color: var(--c-brand); background: var(--c-brand-tint); } .callout--warn { border-inline-start-color: var(--c-warn); background: var(--c-warn-bg); } .callout--tip { border-inline-start-color: var(--c-success); background: var(--c-success-bg); } /* ═══ ৮. লিগ্যাসি কন্টেন্ট ব্লক ════════════════════════════════════════ পুরনো কন্টেন্টে যা সত্যিই আছে: related-reading (৯৪), faq-item (২৫৪), details/summary (৯৩), toc-container (১৪), sc-* (২০১১), Tailwind/ChatGPT আবর্জনা। ইনলাইন স্টাইল PHP ফিল্টারে সাফ হয়, তবু defensive CSS রাখা। ══════════════════════════════════════════════════════════════════════ */ /* — ৮.১ সম্পর্কিত আইনি বিষয় (বাতিল করা হয়েছে — ব্যবহারকারীর অনুরোধে লুকানো) — */ .related-reading { display: none !important; margin: var(--s-8) 0 var(--s-6); padding: var(--s-6); background: linear-gradient(160deg, var(--c-brand-tint), #fff 70%); border: 1px solid var(--c-border); border-radius: var(--r-lg); } .related-reading h3 { display: flex; align-items: center; gap: .55em; margin: 0 0 var(--s-4); font-size: var(--t-lg); padding-bottom: 0; border-bottom: 0; } .related-reading h3::before { content: ""; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: var(--r-sm); background: var(--c-gold); -webkit-mask: var(--icon-link) center / 62% no-repeat; mask: var(--icon-link) center / 62% no-repeat; } .related-reading ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); } @media (min-width: 720px) { .related-reading ul { grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-5); } } .related-reading li { margin: 0; } .related-reading li::before { content: none; } /* প্রোজ বুলেট বাতিল */ .related-reading a { display: block; font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 500; line-height: 1.6; color: var(--c-ink-soft); text-decoration: none; padding: .58em .8em .58em 1.5em; border-radius: var(--r-md); position: relative; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .related-reading a::before { content: "›"; position: absolute; inset-inline-start: .55em; top: .5em; color: var(--c-gold); font-weight: 700; } .related-reading a:hover { background: #fff; color: var(--c-brand); box-shadow: var(--sh-xs); } /* — ৮.২ FAQ (২৫৪টি faq-item; FAQPage স্কিমা functions.php থেকে) — */ .faq-section, .sc-faq { margin: var(--s-7) 0; } .faq-item { margin: 0 0 var(--s-3) !important; /* ইনলাইন margin-bottom:20px হারায় */ padding: var(--s-5); background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--sh-xs); } .faq-item :is(h3, h4, h5) { margin: 0 0 var(--s-3) !important; font-size: var(--t-base) !important; font-family: var(--f-head); font-weight: 600; color: var(--c-brand); line-height: var(--lh-head); padding-bottom: 0; border-bottom: 0; } .faq-item :is(h3, h4, h5) strong { font-weight: inherit; color: inherit; } .faq-item > :last-child { margin-bottom: 0; } .faq-item p { font-size: var(--t-sm); color: var(--c-text-soft); } /* "উত্তর:" লেবেলটা আলাদা করে দেখাই */ .faq-item p > strong:first-child { color: var(--c-gold-deep); font-family: var(--f-ui); } /* — FAQ অ্যাকর্ডিয়ন (details.faq-item) — শুধু প্রশ্ন দেখায়, ক্লিকে উত্তর খোলে।
একই দলে একটাই খোলা রাখে — নতুন প্রশ্নে ক্লিকে আগেরটা নিজে থেকেই ভাঁজ হয় (spark.js পুরনো ব্রাউজারে একই আচরণ নিশ্চিত করে)। */ details.faq-item { padding: 0; overflow: hidden; } details.faq-item > summary { list-style: none; cursor: pointer; padding: var(--s-4) var(--s-5); padding-inline-end: calc(var(--s-5) + 1.6em); position: relative; font-family: var(--f-head); font-weight: 600; font-size: var(--t-base); color: var(--c-brand); line-height: var(--lh-head); } details.faq-item > summary::-webkit-details-marker { display: none; } details.faq-item > summary::after { content: ""; position: absolute; inset-inline-end: var(--s-5); top: 1.15em; width: .62em; height: .62em; border-right: 2px solid var(--c-gold-deep); border-bottom: 2px solid var(--c-gold-deep); transform: rotate(45deg); transition: transform var(--dur) var(--ease); } details.faq-item[open] > summary::after { transform: rotate(-135deg); } details.faq-item > summary:hover { color: var(--c-brand-mid); } details.faq-item > summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } details.faq-item .faq-item__a { padding: 0 var(--s-5) var(--s-5); } details.faq-item .faq-item__a p { margin: 0; font-size: var(--t-sm); color: var(--c-text-soft); } /* লেখার শেষে নিজে থেকে বসা FAQ (spark_faq শর্টকোড/অটো-অ্যাপেন্ড) */ .spark-faq { margin-top: var(--s-5); } .spark-faq__h { margin: var(--s-7) 0 var(--s-4); } .entry-content .spark-faq { display: grid; gap: var(--s-3); } @media (min-width: 860px) { .entry-content .spark-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } } /* — ৮.৩
/ অ্যাকর্ডিয়ন (৯৩টি) — */ .entry-content details { margin: 0 0 var(--s-3); background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; transition: box-shadow var(--dur) var(--ease); } .entry-content details[open] { box-shadow: var(--sh-sm); } .entry-content summary { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) var(--s-5); font-family: var(--f-head); font-weight: 600; font-size: var(--t-base); color: var(--c-ink); cursor: pointer; list-style: none; transition: background-color var(--dur) var(--ease); } .entry-content summary::-webkit-details-marker { display: none; } .entry-content summary::after { content: ""; flex: 0 0 auto; margin-inline-start: auto; margin-top: .42em; width: .5em; height: .5em; border-right: 2px solid var(--c-gold); border-bottom: 2px solid var(--c-gold); transform: rotate(45deg); transition: transform var(--dur) var(--ease); } .entry-content details[open] > summary::after { transform: rotate(-135deg); } .entry-content summary:hover { background: var(--c-brand-tint); } /* পুরনো মার্কআপে

ভুল করে summary-র ভেতরে — তবু ঠিক দেখাতে হবে */ .entry-content summary > p:last-child { flex: 1 1 100%; margin: var(--s-3) 0 0; font-family: var(--f-body); font-weight: 400; font-size: var(--t-sm); color: var(--c-text-soft); line-height: var(--lh-body); } .entry-content details > :not(summary) { padding-inline: var(--s-5); } .entry-content details > :not(summary):last-child { padding-bottom: var(--s-5); } /* — ৮.৪ সূচিপত্র (toc-container, ১৪টি; ইনলাইন রং PHP-তে সাফ) — */ .toc-container { margin: 0 0 var(--s-7) !important; padding: var(--s-5) var(--s-6) !important; background: var(--c-bg-alt) !important; border: 1px solid var(--c-border) !important; border-inline-start: 4px solid var(--c-gold) !important; border-radius: var(--r-md) !important; } .toc-container :is(h2, h3, h4) { margin: 0 0 var(--s-3) !important; font-size: var(--t-base) !important; font-family: var(--f-ui); color: var(--c-text-mute) !important; padding-bottom: 0; border-bottom: 0; } .toc-container ul { list-style: none !important; margin: 0; padding: 0 !important; } .toc-container li { margin: 0 !important; } .toc-container li::before { content: none; } .toc-container a { display: block; padding: .38em 0; font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 500 !important; color: var(--c-ink-soft) !important; text-decoration: none; border-bottom: 1px dotted var(--c-border); } .toc-container li:last-child a { border-bottom: 0; } .toc-container a:hover { color: var(--c-brand) !important; padding-inline-start: .35em; } /* — ৮.৫ sc-* ব্লক (সার্ভিস পেজ) — এই মার্কআপ আগে কন্টেন্টের ভেতরে নিজের