/* alihossain.bd — warm paper, near-black ink, mint-teal accent */
:root{
--paper:#F2F0EB;
--paper-2:#FFFFFF;
--ink:#111111;
--ink-soft:#444444;
--muted:#68685F;
--rule:#DCD9D2;
--seal:#0F7A63; /* darker teal: readable as text and on light grounds */
--seal-soft:#0C6252;
--mint:#1AC9A0; /* the accent itself — used as a ground, never as text */
--on-mint:#0A2A23;
--court:#0E3E34;
--on-court:#E6F5F0;
--bn-serif:"Kalpurush","Noto Serif Bengali","Hind Siliguri","Nirmala UI",serif;
--bn-sans:"Kalpurush","Hind Siliguri","Nirmala UI",system-ui,sans-serif;
--en-display:"Fraunces",Georgia,"Times New Roman",serif;
--wrap:min(68rem,100% - 2.5rem);
--col:min(38rem,100%);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--paper:#121412; --paper-2:#1A1D1B;
--ink:#ECEAE4; --ink-soft:#BFBDB6; --muted:#8C8F89;
--rule:#2C302D; --seal:#3FD9B4; --seal-soft:#5FE3C4;
--mint:#1AC9A0; --on-mint:#0A2A23;
--court:#17594A; --on-court:#E6F5F0;
}
}
:root[data-theme="dark"]{
--paper:#121412; --paper-2:#1A1D1B;
--ink:#ECEAE4; --ink-soft:#BFBDB6; --muted:#8C8F89;
--rule:#2C302D; --seal:#3FD9B4; --seal-soft:#5FE3C4;
--mint:#1AC9A0; --on-mint:#0A2A23;
--court:#17594A; --on-court:#E6F5F0;
}
*{box-sizing:border-box}
img{max-width:100%;height:auto}
body{
margin:0;background:var(--paper);color:var(--ink);overflow-wrap:break-word;
font-family:var(--bn-sans);font-size:1.0625rem;line-height:1.7;
-webkit-font-smoothing:antialiased;
}
.wrap{width:var(--wrap);margin-inline:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px;border-radius:2px}
[data-lang]{display:none}
html[lang="bn"] [data-lang="bn"],
html[lang="en"] [data-lang="en"]{display:block}
html[lang="bn"] span[data-lang="bn"],
html[lang="en"] span[data-lang="en"],
html[lang="bn"] dt[data-lang="bn"],
html[lang="en"] dt[data-lang="en"]{display:inline}
/* masthead */
.masthead{border-bottom:0;background:var(--paper);position:sticky;top:0;z-index:40}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem;border-bottom:1px solid var(--rule)}
/* no brand block on the left any more — keep the controls to the right on phones */
@media (max-width:61.99rem){ .masthead .wrap{justify-content:flex-end} }
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
main > div[id], section[id]{scroll-margin-top:5rem}
/* these two must stack; the language rule above sets spans inline, so out-specify it */
.mast-actions{display:flex;align-items:center;gap:.5rem}
.langbtn{
font:inherit;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
background:none;border:1px solid var(--rule);color:var(--ink-soft);padding:.4rem .65rem;cursor:pointer;
}
.langbtn:hover{border-color:var(--seal);color:var(--seal)}
/* hero seal */
.hero{padding-block:clamp(3rem,9vw,6rem)}
.hero-top{display:grid;gap:1.8rem;align-items:start}
.hero-main{min-width:0}
@media (min-width:56rem){
/* left column fills the space so the photo's right edge lines up with every
section below it — same left and right margin all the way down */
.hero-top.has-photo{grid-template-columns:minmax(0,1fr) 21rem;gap:2.6rem;align-items:stretch}
.hero-top.has-photo .portrait{height:100%}
.hero-top.has-photo .portrait img{height:100%;object-fit:cover;object-position:50% 12%}
}
.portrait{margin:0;position:relative}
.portrait img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.portrait::after{
content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--mint);
}
@media (min-width:56rem){ .portrait{max-width:none;width:100%} }
@media (max-width:55.99rem){ .portrait{max-width:20rem} }
.seal{width:100%;border:1px solid var(--rule);border-top:3px solid var(--seal);padding:clamp(1.6rem,5vw,2.6rem);background:var(--paper-2)}
.seal h1{font-family:var(--bn-serif);font-weight:600;font-size:clamp(1.7rem,4.6vw,2.4rem);line-height:1.25;margin:0 0 .45rem;text-wrap:balance;letter-spacing:-.01em}
html[lang="en"] .seal h1{font-family:var(--en-display);font-weight:500}
.seal .role{margin:0;color:var(--ink-soft);font-size:1.15rem;line-height:1.5}
.seal .divider{height:1px;background:var(--rule);margin:1.4rem 0}
.seal dl{margin:0;display:grid;gap:.6rem}
.seal .row{display:flex;gap:.9rem;align-items:baseline}
.seal dt{flex:none;width:7.5rem;font-size:.95rem;font-weight:600;color:var(--seal);line-height:1.5}
html[lang="en"] .seal dt{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.seal dd{margin:0;font-weight:500;font-size:1.02rem;line-height:1.5}
.lede{margin-top:2.2rem;color:var(--ink-soft);font-size:1.1rem}
.lede p{margin:0 0 1rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.btn{text-decoration:none;font-weight:600;font-size:1rem;padding:.8rem 1.4rem;border:1px solid transparent;display:inline-block}
.btn-primary{background:var(--mint);color:var(--on-mint);font-weight:700}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{border-color:var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--seal);color:var(--seal)}
/* sections */
section{padding-block:0;border-top:0}
section > .wrap{border-top:1px solid var(--rule);padding-block:clamp(2.6rem,7vw,4.5rem)}
.sec-head{margin-bottom:2rem}
.sec-head .num{font-size:.9rem;font-weight:600;color:var(--seal);margin-bottom:.4rem}
html[lang="en"] .sec-head .num{font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.sec-head h2{font-family:var(--bn-serif);font-weight:600;font-size:clamp(1.35rem,4vw,1.8rem);margin:0;line-height:1.3;text-wrap:balance}
html[lang="en"] .sec-head h2{font-family:var(--en-display);font-weight:500}
.sec-head p{margin:.6rem 0 0;color:var(--muted)}
/* practice — reads like a cause list */
.practice{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.practice li{border-bottom:1px solid var(--rule);padding:1.15rem 0}
.practice .pair{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .9rem}
.practice .bn{font-family:var(--bn-serif);font-weight:600;font-size:1.15rem}
.practice .en{font-size:.88rem;color:var(--muted)}
html[lang="bn"] .practice .en{letter-spacing:.05em;text-transform:uppercase}
.practice .note{margin:.35rem 0 0;color:var(--ink-soft);font-size:.96rem}
/* credentials */
.creds{display:grid;gap:1.5rem}
@media (min-width:44rem){ .creds{grid-template-columns:1fr 1fr;gap:2rem} }
.cred{display:flex;gap:.95rem;align-items:flex-start;border-left:2px solid var(--seal);padding-left:1.1rem}
.credtxt{min-width:0}
.cred h3{margin:0 0 .2rem;font-size:1.05rem;font-weight:600}
.cred .meta{margin:0;color:var(--muted);font-size:.9rem}
/* ---- institution logos beside a name ----
the tile stays white in both themes on purpose: these marks are drawn for a
white ground, and the navy ones would vanish against the dark theme's paper */
.logotile{
flex:none;display:inline-grid;place-items:center;
background:#FFFFFF;border:1px solid var(--rule);
}
.logotile img{display:block;width:100%;height:100%;object-fit:contain}
.logotile.none{color:var(--seal)}
.logotile.none svg{width:56%;height:56%}
.cred .logotile{width:3.7rem;height:3.7rem;padding:.34rem}
.orgs{display:inline-flex;align-items:center;gap:.4rem;margin-right:.6rem;vertical-align:-.55em}
.orgs .logotile{width:2.4rem;height:2.4rem;padding:.18rem}
.seal .row.has-orgs{align-items:center}
/* ---- phones: the label sits above its value, and the logos take their own
line, so every line of the text starts at the same left edge ---- */
@media (max-width:36rem){
.seal .row,
.seal .row.has-orgs{display:block}
.seal dt{width:auto}
.seal .row.has-orgs dd{display:block}
.seal .row.has-orgs .orgs{display:flex;margin:0 0 .45rem;vertical-align:baseline}
.seal dd{font-size:1rem}
}
/* ---- hover: whatever is under the cursor grows a little and lifts ---- */
.logolink{display:inline-block;text-decoration:none;line-height:0;position:relative}
.logolink .logotile{
transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s ease,box-shadow .18s ease;
}
.logolink:hover,.logolink:focus-visible{z-index:2}
/* the wrapper is a flex item now — never let it be squeezed thinner than the tile */
.cred > .logolink,.orgs > .logolink{flex:none}
.logolink:hover .logotile,
.logolink:focus-visible .logotile{
transform:scale(1.18);
border-color:var(--seal);
box-shadow:0 .35rem .9rem rgba(0,0,0,.18);
}
/* the professional badge sits with the name, not above or below it */
.namerow{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin-bottom:.45rem}
.namerow h1{margin:0}
/* the seal is a full-bleed disc, so its tile is round too */
.barmark .logotile{width:3.7rem;height:3.7rem;padding:.14rem;border-radius:50%}
/* a wrapped line must stay in its own column, not run back under the logos */
.seal .row.has-orgs dd{display:flex;align-items:center;gap:.55rem}
.seal .row.has-orgs .orgs{flex:none;margin-right:0;vertical-align:baseline}
.seal .row.has-orgs dd > span[data-lang]{flex:1 1 auto;min-width:0}
/* the institution's name carries the same link as its logo */
.orglink{
display:inline-block; /* an inline box cannot be scaled */
transform-origin:left center; /* grows to the right, never over the word before it */
color:inherit;text-decoration:underline;text-decoration-thickness:1px;
text-decoration-color:var(--rule);text-underline-offset:.2em;
transition:transform .18s cubic-bezier(.2,.7,.3,1),color .18s ease,text-decoration-color .18s ease;
}
.orglink:hover,.orglink:focus-visible{
transform:scale(1.07);
color:var(--seal);text-decoration-color:var(--seal);
}
/* the picture and the name belong together — touch one, both answer */
.cred:hover .logotile,.cred:focus-within .logotile{border-color:var(--seal)}
@media(prefers-reduced-motion:reduce){
.logolink .logotile,.orglink{transition:none}
.logolink:hover .logotile,.logolink:focus-visible .logotile,
.orglink:hover,.orglink:focus-visible{transform:none}
}
/* ---- gallery: how many pictures there are decides the shape of the row.
A photograph he chose keeps its whole frame — letterboxed against a blurred
copy of itself, never cropped. ---- */
.gallery{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:38rem){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (min-width:56rem){ .gallery{grid-template-columns:repeat(3,1fr)} }
/* one picture stands alone rather than stretching across the page */
.gallery[data-n="1"]{grid-template-columns:minmax(0,26rem)}
@media (min-width:56rem){ .gallery[data-n="2"]{grid-template-columns:repeat(2,1fr)} }
@media (min-width:56rem){ .gallery[data-n="4"]{grid-template-columns:repeat(2,1fr)} }
.gallery li{
position:relative;overflow:hidden;aspect-ratio:4/3;
border:1px solid var(--rule);background:var(--paper-2);
}
.gallery .gbg{
position:absolute;inset:-10%;background-size:cover;background-position:center;
filter:blur(20px) saturate(1.15);opacity:.5;
}
.gallery img{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.gallery li::after{
content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--mint);
opacity:0;transition:opacity .18s ease;
}
.gallery li:hover::after{opacity:1}
@media (prefers-reduced-motion: reduce){ .gallery li::after{transition:none} }
/* chamber */
.chamber{display:grid;gap:2rem}
@media (min-width:48rem){ .chamber{grid-template-columns:1.1fr .9fr;gap:3rem} }
.chamber .addr{margin-top:0}
.hours{border:1px solid var(--rule);padding:1.4rem}
.hours h3{margin:0 0 .9rem;font-size:.92rem;color:var(--muted);font-weight:600}
html[lang="en"] .hours h3{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.hours dl{margin:0;display:grid;gap:.55rem}
.hours .row{display:flex;justify-content:space-between;gap:1rem;font-variant-numeric:tabular-nums}
.hours dt{color:var(--ink-soft)}
.hours dd{margin:0;font-weight:500}
/* obiter */
/* contacts */
footer{border-top:0;padding-block:0;color:var(--muted);font-size:.88rem}
footer > .wrap{border-top:1px solid var(--rule);padding-block:2.5rem}
footer p{margin:0 0 .6rem}
/* starts at the page's left margin like everything else, top to bottom */
.disclaimer{font-size:.83rem;max-width:none}
@media (prefers-reduced-motion: no-preference){
.hero > .wrap > *{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
.hero .lede{animation-delay:.1s}
.hero .cta-row{animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
/* footer links */
.flinks{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .4rem}
.flinks a{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--ink);
border:1px solid var(--rule);padding:.45rem .8rem;font-size:.86rem;font-weight:500}
.flinks a:hover{border-color:var(--mint);color:var(--seal)}
.flinks svg{width:1.2rem;height:1.2rem;flex:none;color:var(--seal)}
/* ---- speaking: dark band, palette lifted from the reference ---- */
section.dark{background:none;color:#F1EFEA;padding-block:clamp(1.8rem,5vw,3rem)}
section.dark > .wrap{
border-top:0;text-align:center;border-radius:20px;
padding:clamp(2.4rem,6vw,3.8rem) clamp(1.4rem,4vw,2.6rem);
background:#262626;
background-image:
radial-gradient(80% 120% at 100% 0%, rgba(26,142,106,.55) 0%, rgba(11,92,68,0) 62%),
radial-gradient(70% 100% at 0% 100%, rgba(11,92,68,.32) 0%, rgba(11,92,68,0) 60%);
}
.kick{margin:0 0 1rem;font-size:.95rem;font-weight:600;color:#9A9A96}
html[lang="en"] .kick{font-size:.72rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase}
.big{
font-family:var(--bn-serif);font-weight:600;margin:0 auto;max-width:22ch;color:#fff;
font-size:clamp(1.9rem,6vw,3.2rem);line-height:1.18;letter-spacing:-.01em;text-wrap:balance;
}
html[lang="en"] .big{font-family:var(--en-display);font-weight:500}
.big em{display:block;font-style:normal;color:#1AC9A0}
.blurb{margin:1.1rem auto 0;max-width:52ch;color:#C6C4BF;font-size:1.02rem}
.reachcards{display:grid;gap:1.1rem;margin-top:2.6rem;text-align:left}
@media (min-width:38rem){ .reachcards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:62rem){ .reachcards{grid-template-columns:repeat(3,1fr)} }
.rcard{
display:block;text-decoration:none;color:#F1EFEA;border-radius:20px;
background:#333331;border:1px solid #3E3E3B;
padding:1.7rem 1.8rem;transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.rcard:hover{background:#3A3A37;border-color:#1AC9A0;transform:translateY(-2px)}
.rcard svg{width:1.6rem;height:1.6rem;color:#1AC9A0;display:block;margin-bottom:1.2rem}
.rcard .rl{display:block;font-size:.95rem;color:#B9BDB6;margin-bottom:.4rem}
html[lang="en"] .rcard .rl{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase}
.rcard .rv{display:block;font-weight:400;font-size:1.02rem;color:#C6C4BF;word-break:break-word}
@media (prefers-reduced-motion: reduce){ .rcard{transition:none} .rcard:hover{transform:none} }
/* ---- navigation ---- */
.nav{--tabpad:1.05rem;--tabsize:1.02rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.15rem}
.nav a{
display:block;text-decoration:none;color:var(--ink-soft);font-size:var(--tabsize);font-weight:500;
padding:.5rem var(--tabpad);border-radius:999px;white-space:nowrap;transition:color .12s ease,background .12s ease;
}
.nav a:hover{color:var(--seal);background:var(--paper-2)}
.nav a.on{color:var(--on-mint);background:var(--mint);font-weight:600}
.burger{
display:flex;flex-direction:column;justify-content:center;gap:4px;
width:2.4rem;height:2.4rem;padding:0 .55rem;cursor:pointer;
background:none;border:1px solid var(--rule);
}
.burger span{display:block;height:2px;background:var(--ink);transition:transform .18s ease,opacity .18s ease}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* mobile: nav drops below the bar */
@media (max-width:61.99rem){
.nav{
position:absolute;left:0;right:0;top:100%;background:var(--paper);
border-bottom:1px solid var(--rule);box-shadow:0 12px 24px -18px rgba(0,0,0,.5);
display:none;
}
body.nav-open .nav{display:block}
.nav ul{flex-direction:column;gap:0;width:var(--wrap);margin-inline:auto;padding-block:.5rem}
.nav a{border-radius:0;padding:.85rem .2rem;border-bottom:1px solid var(--rule);font-size:1rem}
.nav li:last-child a{border-bottom:0}
.nav a.on{background:none;color:var(--seal);font-weight:700}
}
@media (min-width:62rem){ .burger{display:none} }
/* ---- desktop: real buttons that share the bar between them ----
the buttons grow to fill the width, so the row is full without the
yawning gaps that come from spacing five small tabs edge to edge. */
@media (min-width:62rem){
.masthead .wrap{gap:1.1rem}
.nav{flex:1 1 auto;min-width:0}
.nav ul{flex-wrap:wrap;gap:.45rem;width:100%}
.nav li{flex:1 1 auto;min-width:0}
.nav a{
display:flex;align-items:center;justify-content:center;width:100%;
font-weight:600;padding:.62rem var(--tabpad);
border:1px solid var(--rule);background:var(--paper-2);
}
.nav a:hover{border-color:var(--seal);color:var(--seal);background:var(--paper-2)}
.nav a.on{background:var(--mint);border-color:var(--mint);color:var(--on-mint)}
.langbtn{padding:.62rem 1.05rem;border-radius:999px;background:var(--paper-2)}
/* more buttons than the bar holds — they tighten on their own, because
nth-last-child does the counting when a menu item is added. */
.nav li:nth-last-child(n+7),
.nav li:nth-last-child(n+7) ~ li{--tabpad:.75rem;--tabsize:.94rem}
.nav li:nth-last-child(n+10),
.nav li:nth-last-child(n+10) ~ li{--tabpad:.55rem;--tabsize:.86rem}
.nav li:nth-last-child(n+13),
.nav li:nth-last-child(n+13) ~ li{--tabpad:.4rem;--tabsize:.79rem}
}
/* ---- the top bar answers the cursor the same way the logos do ---- */
@media (min-width:62rem){
.nav li{position:relative}
.nav li:hover,.nav li:focus-within{z-index:2}
.nav a{transition:color .18s ease,background .18s ease,border-color .18s ease,
box-shadow .18s ease,transform .18s cubic-bezier(.2,.7,.3,1)}
.nav a:hover,.nav a:focus-visible{transform:scale(1.05);box-shadow:0 .25rem .7rem rgba(0,0,0,.10)}
.langbtn{transition:border-color .18s ease,color .18s ease,transform .18s cubic-bezier(.2,.7,.3,1)}
.langbtn:hover,.langbtn:focus-visible{transform:scale(1.05)}
}
/* the same gesture on the social links at the foot of every page */
.flinks a{transition:border-color .18s ease,color .18s ease,background .18s ease,transform .18s cubic-bezier(.2,.7,.3,1)}
.flinks a:hover,.flinks a:focus-visible{transform:scale(1.07)}
@media (prefers-reduced-motion: reduce){
.nav a,.langbtn,.flinks a{transition:color .12s ease,background .12s ease,border-color .12s ease}
.nav a:hover,.nav a:focus-visible,
.langbtn:hover,.langbtn:focus-visible,
.flinks a:hover,.flinks a:focus-visible{transform:none}
}
.masthead{position:sticky;top:0;z-index:40}
.masthead .wrap{position:relative}
@media (prefers-reduced-motion: reduce){ .burger span{transition:none} }
/* ---- numbers: Latin digits, spaced so they read at a glance ---- */
.rcard .rv,
.flinks a span,
.hours dd,
.seal dd{
font-variant-numeric:tabular-nums lining-nums;
font-feature-settings:"tnum" 1,"lnum" 1;
}
/* a phone number is dialled, not read as prose — give it Latin digits and air */
.rcard .rv{letter-spacing:.02em}
.btn{font-variant-numeric:tabular-nums lining-nums}
/* the copyright sits alone at the very bottom, set apart from everything above */
.copyline{
margin:2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule);
color:var(--muted);font-size:.85rem;text-align:center;
}
/* ---- contact: big, tappable cards inside the যোগাযোগ section ---- */
/* ---- writing list ---- */
.postlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.postlist li{border-bottom:1px solid var(--rule)}
.postlist a{display:block;text-decoration:none;color:inherit;padding:1.5rem 0}
.postlist a:hover h2{color:var(--seal)}
.postlist h2{font-family:var(--bn-serif);font-size:1.25rem;font-weight:600;margin:0 0 .35rem;line-height:1.35}
.pl-x{margin:0;color:var(--ink-soft);font-size:.96rem}
.pl-d{display:block;margin-top:.5rem;font-size:.94rem;color:var(--muted);font-variant-numeric:tabular-nums}
.post{padding-block:clamp(2.5rem,7vw,4rem)}
.post-back{margin:0 0 1.5rem;font-size:.9rem}
.post h1{font-family:var(--bn-serif);font-weight:600;font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.25;margin:0 0 .4rem;text-wrap:balance}
.post-date{margin:0 0 2rem;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.post-body{font-size:1.08rem;color:var(--ink-soft)}
.post-body p{margin:0 0 1.1rem}
/* ---- social links in their own brand colours ---- */
.flinks .s-facebook svg{color:#1877F2}
.flinks .s-youtube svg{color:#FF0000}
.flinks .s-linkedin svg{color:#0A66C2}
.flinks .s-x svg{color:#0F1419}
.flinks .s-website svg{color:var(--seal)}
:root[data-theme="dark"] .flinks .s-x svg{color:#E7E9EA}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .flinks .s-x svg{color:#E7E9EA}
}
.flinks .s-facebook:hover{border-color:#1877F2;color:#1877F2;background:rgba(24,119,242,.09)}
.flinks .s-youtube:hover {border-color:#FF0000;color:#FF0000;background:rgba(255,0,0,.08)}
.flinks .s-linkedin:hover{border-color:#0A66C2;color:#0A66C2;background:rgba(10,102,194,.09)}
.flinks .s-x:hover {border-color:currentColor;background:rgba(15,20,25,.07)}
/* ---- service page body ---- */
.tablewrap{overflow-x:auto;margin:0 0 1.2rem}
.ftable{border-collapse:collapse;width:100%;font-size:.98rem}
.ftable td{border-bottom:1px solid var(--rule);padding:.7rem .2rem;color:var(--ink)}
.ftable td:last-child{text-align:right;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ftable tr:last-child td{border-bottom:0;border-top:2px solid var(--rule);font-weight:700}
.practice .prow{display:block;text-decoration:none;color:inherit}
.practice .haslink:hover .bn{color:var(--seal)}
.prow-more{
display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;
font-size:.82rem;font-weight:600;color:var(--seal);
border:1px solid var(--rule);border-radius:25px;padding:.3rem .9rem;
transition:border-color .12s ease,background .12s ease;
}
.prow-more em{font-style:normal;line-height:1}
.practice .haslink:hover .prow-more{border-color:var(--mint);background:var(--paper-2)}
/* ---- home: practice areas as chips linking onward ---- */
.chipgrid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem}
.chipgrid a,.chipgrid .plain{
display:inline-block;border:1px solid var(--rule);border-radius:25px;
padding:.6rem 1.2rem;font-size:.95rem;font-weight:500;text-decoration:none;color:var(--ink);
background:var(--paper-2);
}
.chipgrid a{border-color:var(--mint)}
.chipgrid a:hover{background:var(--mint);color:var(--on-mint)}
.chipgrid .plain{color:var(--ink-soft)}
.morelink{margin:1.6rem 0 0}
.morelink a{font-weight:600;color:var(--seal);text-decoration:none;text-underline-offset:4px}
.morelink a:hover{text-decoration:underline}
.pl-t{display:inline-block;margin-top:.6rem;margin-right:.6rem;font-size:.94rem;font-weight:600;
letter-spacing:.04em;color:var(--seal);border:1px solid var(--rule);border-radius:25px;padding:.2rem .7rem}
.post-topic{margin:0 0 .5rem}
.post-topic a{display:inline-block;font-size:.94rem;font-weight:600;letter-spacing:.04em;color:var(--seal);
border:1px solid var(--rule);border-radius:25px;padding:.25rem .8rem;text-decoration:none}
.post-topic a:hover{border-color:var(--mint)}
.post-body h2{font-family:var(--bn-serif);font-size:1.25rem;font-weight:600;color:var(--ink);margin:2rem 0 .8rem}
.post-body .tick{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.6rem}
.post-body .tick li{position:relative;padding-left:1.6rem}
.post-body .tick li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;background:var(--mint);border-radius:50%}
/* ---- app logo on the digital diary page ---- */
.applogo{margin:0 auto 1.6rem;width:7.5rem;max-width:34vw}
.applogo img{
display:block;width:100%;height:auto;border-radius:22%;
box-shadow:0 1px 2px rgba(0,0,0,.35),0 18px 40px -18px rgba(0,0,0,.75);
}
@media (max-width:34rem){ .applogo{width:5.5rem;margin-bottom:1.2rem} }
/* ---- the app, shown: two screens flanking the icon ---- */
.appshow{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,3vw,2.2rem);margin:0 0 2rem}
.appshow .applogo{margin:0;width:clamp(4.5rem,11vw,7.5rem);max-width:none;flex:none}
.appshow .shot{margin:0;width:clamp(7rem,22vw,15rem);flex:none}
.appshow .shot img{
display:block;width:100%;height:auto;border-radius:14px;
box-shadow:0 1px 2px rgba(0,0,0,.35),0 22px 48px -22px rgba(0,0,0,.85);
}
@media (max-width:30rem){
.appshow{gap:.6rem}
.appshow .shot:last-child{display:none}
.appshow .shot{width:38vw}
}
/* --------------------------------------------------------------------------
Where the app has got to
Three steps, the finished ones ticked. A visitor who lands here while the
app is still in Google's queue should be able to see at a glance that it is
built and nearly out, rather than reading "get in touch" and assuming it is
somebody's idea. The last step turns into the download button on the day
the Play link is filled in.
-------------------------------------------------------------------------- */
.appstatus .steps {
list-style: none;
margin: .9rem 0 0;
padding: 0;
display: grid;
gap: 0;
}
.appstatus .steps li {
position: relative;
padding: 0 0 1.35rem 2.35rem;
border-left: 2px solid var(--rule);
}
.appstatus .steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.appstatus .steps .dot {
position: absolute;
left: -0.72rem;
top: .05rem;
width: 1.35rem;
height: 1.35rem;
border-radius: 50%;
display: grid;
place-items: center;
font-size: .8rem;
line-height: 1;
background: var(--paper);
border: 2px solid var(--rule);
color: #fff;
}
.appstatus .steps .done { border-left-color: var(--seal); }
.appstatus .steps .done .dot { background: var(--seal); border-color: var(--seal); }
/* The step being worked on gets a ring rather than a tick, and a quiet pulse
so the eye lands on it first. Motion is dropped for anyone who asked for
less of it. */
.appstatus .steps .now .dot {
border-color: var(--seal);
box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--seal) 18%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
.appstatus .steps .now .dot { animation: ah-pulse 2.4s ease-in-out infinite; }
}
@keyframes ah-pulse {
0%, 100% { box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--seal) 18%, transparent); }
50% { box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--seal) 6%, transparent); }
}
.appstatus .steps strong { display: block; font-size: 1rem; color: var(--ink); }
.appstatus .steps .note { display: block; font-size: .92rem; color: var(--ink-soft, #5b5b5b); margin-top: .15rem; }
.appstatus .steps .next strong,
.appstatus .steps .next .note { opacity: .72; }
@media (max-width: 30rem) {
.appstatus .steps li { padding-left: 1.9rem; }
}
/* ---- the subject tree: sections (বিভাগ) over topics (বিষয়) ---- */
/* a strip of chips between two full sections needs less air than a section */
section.tight > .wrap{padding-block:clamp(1.3rem,3.5vw,2rem)}
.secblock + .secblock{margin-top:clamp(2.2rem,6vw,3.5rem)}
.sec-head h2 a{color:inherit;text-decoration:none}
.sec-head h2 a:hover{color:var(--seal)}
/* the count beside a topic chip: present, but never louder than the name */
.chipn{font-style:normal;font-size:.8em;color:var(--muted);margin-left:.2rem;font-variant-numeric:tabular-nums}
.chipgrid a:hover .chipn{color:inherit}
.kick a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.kick a:hover{opacity:.75}
/* ---- rich-editor bodies: what the writing box can produce ---- */
/* Enter makes a with a gap; Shift+Enter a bare line inside it, so verse
keeps its own spacing. A pasted
stays tight for the same reason. */
.post-body div{margin:0}
.post-body h3{font-family:var(--bn-serif);font-size:1.12rem;font-weight:600;color:var(--ink);margin:1.8rem 0 .7rem}
.post-body ul:not(.tick),.post-body ol{margin:0 0 1.1rem;padding-left:1.5rem}
.post-body ul:not(.tick){list-style:disc}
.post-body ol{list-style:decimal}
.post-body li{margin:0 0 .35rem}
.post-body li::marker{color:var(--seal)}
.post-body a{color:var(--seal);text-underline-offset:3px}
/* the class is stripped when an old fee table is re-saved through the editor,
so a bare table has to look right on its own */
.post-body table{border-collapse:collapse;width:100%;margin:0 0 1.2rem;font-size:.98rem}
.post-body table td,.post-body table th{border-bottom:1px solid var(--rule);padding:.7rem .4rem;
color:var(--ink);text-align:left;vertical-align:top}
.post-body table tr:last-child td{border-bottom:0;border-top:2px solid var(--rule);font-weight:700}
/* every table written on this site so far is a two-column fee table, and this
keeps one looking the way it did before the class was stripped */
.post-body table td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.post-body u{text-underline-offset:3px}
/* ---- how the reader felt, and how they pass it on ---- */
.reactbar{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;justify-content:space-between;align-items:center;
margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.rset,.sset{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.rbtn{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.92rem;font-weight:600;
color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--rule);border-radius:25px;
padding:.5rem 1rem;cursor:pointer;transition:border-color .18s,color .18s,background .18s}
.rbtn svg{width:1.05rem;height:1.05rem}
.rbtn:hover{border-color:var(--mint);color:var(--ink)}
.rbtn.on{background:var(--mint);border-color:var(--mint);color:var(--on-mint)}
.rbtn[disabled]{opacity:.55;cursor:default}
.rnum{font-variant-numeric:tabular-nums;font-weight:700}
.rthanks{font-size:.88rem;font-weight:600;color:var(--seal)}
.slabel{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted)}
.slabel svg{width:1rem;height:1rem}
.sbtn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.88rem;font-weight:600;
color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--rule);border-radius:25px;
padding:.45rem .9rem;text-decoration:none;cursor:pointer;transition:border-color .18s,color .18s}
.sbtn svg{width:1rem;height:1rem}
.sbtn:hover{border-color:var(--mint);color:var(--ink)}
.s-facebook svg{color:#1877F2}
.s-whatsapp svg{color:#25D366}
.s-copy.on{border-color:var(--mint);color:var(--seal)}
@media (max-width:34rem){
/* on a phone the two halves stack, and the share row keeps its own line */
.reactbar{gap:1rem;justify-content:flex-start}
.rset,.sset{width:100%}
.rbtn,.sbtn{flex:1 1 auto;justify-content:center}
.slabel{width:100%}
}
@media(prefers-reduced-motion:reduce){.rbtn,.sbtn{transition:none}}
/* ---- the "not counting you" strip: only a browser carrying the mark ---- */
.nocount{display:flex;flex-wrap:wrap;gap:.3rem .9rem;justify-content:center;align-items:center;
background:var(--court);color:#F1EFEA;font-size:.82rem;padding:.5rem 1rem;text-align:center}
.nocount a{color:#F1EFEA;text-underline-offset:3px}
.nocount a:hover{opacity:.8}
/* Bengali floor: footer disclaimer and © line at 15px (English keeps the smaller size) */
html[lang="bn"] .disclaimer,html[lang="bn"] .copyline{font-size:.9375rem}
/* same floor for the like / share row under every article (was 13–14.7px) */
html[lang="bn"] .rbtn,html[lang="bn"] .slabel,html[lang="bn"] .sbtn{font-size:.9375rem}