:root{ /* NHS blue (#005EB8) is the one clinical-trust accent on an otherwise soft pastel/rainbow palette β€” Imran's brief for suicide.pk. Dark mode lifts it to #4d9fe6 so it still passes contrast against the near-black panels. */ --bg:#0a0e18; --bg2:#0d1220; --panel:#131a2b; --panel2:#161d31; --line:#263049; --ink:#eef1f7; --muted:#9aa3ba; --faint:#7d879f; --accent:#4d9fe6; --accent-ink:#03101f; --accent-soft:#173049; --warm:#f0b866; --bad:#ef7676; --pastel-pink:#ffd6e7; --pastel-blue:#cfe8ff; --pastel-green:#d3f3df; --pastel-lavender:#e4dbff; --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Naskh Arabic",serif; --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Naskh Arabic","Noto Sans Devanagari",sans-serif; } :root[data-theme="light"]{ --bg:#fbfaff; --bg2:#f3f2fd; --panel:#ffffff; --panel2:#f8f7fd; --line:#e4e1f5; --ink:#1a1d2e; --muted:#565b78; --faint:#6d7290; --accent:#005EB8; --accent-ink:#ffffff; --accent-soft:#e2eefb; --warm:#8a5a0d; --bad:#b03636; --pastel-pink:#ffe3ef; --pastel-blue:#e2f1ff; --pastel-green:#e2f8ea; --pastel-lavender:#eee7ff; } @media (prefers-color-scheme: light){:root:not([data-theme="dark"]){ --bg:#fbfaff; --bg2:#f3f2fd; --panel:#ffffff; --panel2:#f8f7fd; --line:#e4e1f5; --ink:#1a1d2e; --muted:#565b78; --faint:#6d7290; --accent:#005EB8; --accent-ink:#ffffff; --accent-soft:#e2eefb; --warm:#8a5a0d; --bad:#b03636; }} *{box-sizing:border-box;margin:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} /* futuristic ambient background: faint grid + mouse-reactive particle net (behind all content) */ .fx{display:none} /* keep content above the fx layer even where a section sets its own bg */ .utilbar,header.nav,section,footer.foot,.chatwidget{position:relative;z-index:1} :root{--page-max:min(1180px,96vw)} /* 1180 = 760px reading measure + its padding + gutter + 320px sidebar. At 1400 the main column took every spare pixel and left a 320px hole between the text and the sidebar on a wide screen. */ .wrap{max-width:var(--page-max);margin:0 auto;padding:0 22px} /* ALIGN_PATCH β€” one left edge down the whole site. The nav and the content grid are both min(1400px,96vw) and already agree. These two rules bring back the pages that drifted: measured at 1280px, the article started 74px right of the logo and home 52px, because each centred a narrower box inside a wider one. Line lengths are untouched - only the edge the box is anchored to. */ @media(min-width:1260px){.page-sb-main .wrap{margin-inline:0}} /* The footer is outside the grid, so neither the grid rule nor the no-grid rule reached it: on an article it centred a 1080px box inside 1280 and sat at 100 while the header above it sat at 48. */ footer.foot>.wrap,footer .wrap{max-width:var(--page-max)} @media(min-width:1260px){.page-sb-main>.band>.wrap,.page-sb-main>.wrap{margin-inline:0}} /* Home never enters the grid, so it needs the grid's box to line up with the header it sits under. */ body:not(:has(.page-sb)) .wrap:not(.wide){max-width:var(--page-max)} .wrap.wide{max-width:var(--page-max)} /* was min(1560px,94vw): at 1280 that is 1203 centred, which put the hero 12px inside the edge the nav and every other band sit on. */ /* full-bleed hero + trackers */.nav>.wrap{max-width:var(--page-max)} /* same box as everything else *//* NAV_AUTHORITY_PATCH */ /* header */ header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px); background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)} .nav .row{display:flex;align-items:center;gap:20px;height:62px} /* SUICIDEPK_HEADER_FIT: 6 nav items + search + lang + quick-exit is wider than the original 5-item nav this was forked from - force single line, never wrap under the logo (was overlapping brandwrap). */ header.nav .row{flex-wrap:nowrap!important;gap:14px} header.nav .brandwrap{flex-shrink:0} header.nav #mainnav{gap:15px;flex-shrink:1;min-width:0;overflow-x:visible} header.nav .hsearch{flex-shrink:0} header.nav .hsearch input{width:110px} header.nav .hsearch-collapsed input{width:0;padding:0;border:0;opacity:0} header.nav .hsearch input{transition:width .18s ease} header.nav .hsearch button{background:none;border:none;font-size:16px;cursor:pointer;color:var(--ink);padding:8px} header.nav #mainnav a{flex-shrink:0} header.nav #mainnav a{font-size:13.5px;white-space:nowrap} @media(max-width:1360px){header.nav .hsearch{display:none}} @media(max-width:1180px){header.nav #mainnav{display:none}} .brand{font-weight:800;font-size:18px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px} .brand .m{font-size:20px} .nav nav{display:flex;gap:22px;margin-left:14px} .nav nav a{color:var(--muted);font-size:14.5px;font-weight:500} .nav nav a:hover{color:var(--ink)} .nav .spacer{flex:1} /* A base .btn with no colour of its own inherited white, which is invisible on a light page when no variant class is applied. */ .btn{color:var(--ink);display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 18px;font-weight:700;font-size:14.5px;border:1px solid transparent;cursor:pointer} /* #4dda8a on a light page is 1.56:1. Solid WhatsApp green with white ink reads in both themes and matches what the button is for. */ .btn-wa{background:#15703c;color:#fff;border:1px solid #15703c} .btn-wa:hover{background:#166b3a;border-color:#166b3a} .btn-accent{background:var(--accent);color:var(--accent-ink)} /* Tokens, not white literals. These were invisible in light theme - text 1.04:1, border 1.01:1 - because all three values were rgba white. */ .btn-ghost{background:var(--panel);border:1px solid var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn-ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5);color:#fff} .btn:hover{filter:brightness(1.05)} /* NAV_SHRINK: the menu wins ties. A clipped nav item is a page nobody can reach; a narrower search field is a field. Below the floor there is not room for both and the field steps aside entirely. */ .hsearch{display:flex;align-items:center;gap:0;margin-left:auto;flex:0 1 auto;min-width:0} .hsearch input{min-width:0} #mainnav{flex:0 0 auto} @media(min-width:881px) and (max-width:1180px){.hsearch{display:none}} .hsearch input{background:var(--panel);border:1px solid var(--line);border-right:0; color:var(--ink);border-radius:8px 0 0 8px;padding:7px 12px;font-size:13.5px;width:170px; font-family:inherit;outline:none} .hsearch input:focus{border-color:var(--accent)} .hsearch input::placeholder{color:var(--faint)} .hsearch button{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-left:0; border-radius:0 8px 8px 0;padding:7px 11px;cursor:pointer;font-size:13px;line-height:1.3} .hsearch button:hover{border-color:var(--accent)} @media(max-width:880px){.hsearch{display:none}} /* HEADER_FIT - keep the header row inside the viewport above the mobile breakpoint. Without these the row is wider than the screen from 821px to about 1300px and the whole page scrolls sideways. */ @media(min-width:881px){ .nav .row{min-width:0} .nav nav{min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .nav nav::-webkit-scrollbar{display:none} .brand,.hsearch,.wa-head,.navtoggle{flex-shrink:0} } /* Measured: the 5-link nav is clean from 1078px with the button shown. */ @media(max-width:1100px){.wa-head{display:none}} .themetog{background:rgba(255,255,255,.14);border:0;border-radius:999px;cursor:pointer; color:inherit;font-family:inherit;font-size:14px;line-height:1;padding:6px 10px;margin-left:10px} .themetog:hover{background:rgba(255,255,255,.26)} .themetog:focus-visible{outline:2px solid #fff;outline-offset:-2px} .themetog .tt-ic::before{content:"πŸŒ™"} :root[data-theme="light"] .themetog .tt-ic::before{content:"β˜€οΈ"} @media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .themetog .tt-ic::before{content:"β˜€οΈ"}} /* Pinned ltr: this control CHANGES the page direction, so it must not be laid out by it - otherwise the two buttons trade places as you press them and the switcher looks like it is showing the wrong language. */ .utilbar .langtog{display:inline-flex;direction:ltr} /* ---- CRISIS_LINK_CONTRAST ------------------------------------------- .utilbar uses a 90deg gradient, which is physical and does not mirror, while its contents do. In Urdu the crisis link lands on the dark end: measured 1.43:1. It failed AA in English too, at 2.74:1. A crisis link cannot depend on where it happens to fall in a gradient. */ .utilbar a[href="/questions"]{ background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:7px 14px; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55); } .utilbar a[href="/questions"]:hover{background:rgba(0,0,0,.5)} .utilbar .util-tag{text-shadow:0 1px 2px rgba(0,0,0,.5)} /* The language control must never be squeezed: it was clipped by ~10px in Urdu because the longer Urdu crisis text pushed it past the edge. */ .utilbar .langtog{flex-shrink:0} .utilbar .row{flex-wrap:wrap;row-gap:6px} .langtog button{transition:background .12s,color .12s} .langtog button.on{background:var(--accent);color:var(--accent-ink);font-weight:800} .util-tag{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:640px){.util-tag{display:none}} .srch-wrap{max-width:760px} .srch-box{display:flex;gap:8px;margin:18px 0 6px} .srch-box input{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13); color:var(--ink);border-radius:10px;padding:12px 15px;font-size:15.5px;font-family:inherit;outline:none} .srch-box input:focus{border-color:var(--accent)} /* NAV_STICKY_GUARD - this rule was silently deleted once by a stray "//" comment above it, which broke the mobile menu completely. Restated here so a parse error further up cannot take it out again. */ header.nav{position:sticky;top:0;z-index:50} .nav nav{z-index:51} @media(max-width:880px){ header.nav.open nav{display:flex;box-shadow:0 18px 36px -12px rgba(0,0,0,.55)} .nav nav a{min-height:46px;display:flex;align-items:center} } /* LANGTOG_ON_UTILBAR β€” the toggle sits on the utility bar's coloured gradient, not on a dark panel, so it needs its own treatment. Anything inheriting the panel styling looked like a stray grey box. */ .utilbar .langtog{ display:inline-flex;align-items:center;margin:0; border:1px solid rgba(255,255,255,.45); border-radius:999px;overflow:hidden; background:rgba(255,255,255,.14); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 1px 3px rgba(6,26,18,.18); } .utilbar .langtog button{ background:rgba(0,0,0,.3);border:0;cursor:pointer; color:#fff;font-family:var(--sans);font-weight:700; font-size:12.5px;line-height:1;letter-spacing:.02em; padding:7px 14px;min-height:30px; text-shadow:0 1px 2px rgba(6,26,18,.35); transition:background .15s,color .15s; } .utilbar .langtog button:hover{background:rgba(255,255,255,.2)} .langtog button.busy{opacity:1} .langtog button.busy::after{content:"";display:inline-block;width:7px;height:7px;margin-inline-start:6px;border-radius:50%;background:currentColor;animation:langpulse 1s ease-in-out infinite} @keyframes langpulse{0%,100%{opacity:.25}50%{opacity:1}} .utilbar .langtog button.on{ background:#fff;color:#0f2a1e;text-shadow:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.9); } /* A white ring on a pale pill measured 1.25:1. Dark ring plus a white halo works on every part of the gradient. */ .utilbar .langtog button:focus-visible,.utilbar .themetog:focus-visible{outline:2px solid #04120d;outline-offset:-2px;box-shadow:0 0 0 4px rgba(255,255,255,.9)} /* The Urdu label needs a little more room than "EN". */ .utilbar .langtog button[data-lang="ur"]{font-size:13.5px;padding:6px 14px} @media(max-width:640px){ /* The bar centres and drops its tagline on small screens; keep the toggle and the crisis link both visible and comfortably tappable. */ .utilbar .row{gap:10px;flex-wrap:nowrap;padding:6px 0} .utilbar .langtog button{padding:7px 12px;min-height:32px} .utilbar a{font-size:12px;white-space:nowrap} } /* A nav label that breaks mid-word reads as broken, not as a menu. If the bar is tight it should wrap BETWEEN items. */ #mainnav a{white-space:nowrap} /* NAV_FIT: was capped at 1360px, from when the nav grew with the window. The container is a fixed 1180 now, so the nav is just as tight at 1920 as at 1280 and this has to apply at every desktop width. */ @media(min-width:881px){ #mainnav{gap:14px} #mainnav a{font-size:14px} } .navtoggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:19px;cursor:pointer;margin-left:8px} @media(max-width:880px){ .navtoggle{display:inline-flex} .nav .row{gap:8px;height:56px} .nav .spacer{display:none} .nav nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0; background:var(--bg);border-bottom:1px solid var(--line);padding:6px 0;display:none; box-shadow:0 16px 34px -14px rgba(0,0,0,.45)} header.nav.open nav{display:flex} .nav nav a{padding:13px 22px;font-size:16px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)} .nav nav a:last-child{border-bottom:0} .brand{margin-right:auto;font-size:16px} .wa-head{display:none} /* WhatsApp reachable via hero CTA + chat + community */ .langtog button{padding:6px 9px;font-size:12px} /* breathing room + readable type on phones */ .hero{padding:28px 0 18px!important} .hero p.lead{font-size:15.5px;margin:14px 0 18px} .hero .trust{display:none} /* trim hero so the counter rides above the fold */ section.band{padding:20px 0} .promise{padding:22px} /* top bar: drop the long tagline, keep just the crisis CTA, centred */ .utilbar .row{justify-content:center;height:auto;padding:7px 0} .utilbar .row > span:first-child, .utilbar .spacer{display:none} /* The crisis link must never be truncated mid-phrase. Below 480px it shows a shorter sentence rather than an ellipsis. */ .utilbar .cl-short{display:none} /* hide-on-questions: the page itself leads with an ASK A QUESTION button, so the same words in the bar are just the label twice. */ body.on-questions .utilbar a[href="/questions"]{display:none} @media(max-width:480px){ .utilbar .cl-long{display:none} .utilbar .cl-short{display:inline} } .utilbar{font-size:12px} .utilbar a{font-weight:800} } @media(max-width:420px){ .trust .t{min-width:100%} .hero .cta{flex-direction:column;align-items:stretch} .hero .cta .btn{justify-content:center} } /* hero */ /* The rotating phrases wrap to different line counts, so the heading used to grow and shrink on every keystroke and drag the whole page with it. An invisible copy of the LONGEST phrase shares one grid cell with the live text: the grid sizes to its tallest child, so the box is always exactly tall enough and never moves. Correct at any width, font or zoom - which hand-picked min-heights are not. */ .tw-h1{display:grid;align-items:start} .tw-h1 > .tw-sizer,.tw-h1 > .tw-live{grid-area:1/1} .tw-sizer{visibility:hidden;pointer-events:none;user-select:none} .tw-live{display:block} .tw-cursor{display:inline-block;width:3px;height:.85em;background:currentColor;margin-left:4px;vertical-align:-.05em;animation:twblink .75s step-end infinite;border-radius:1px} @keyframes twblink{0%,100%{opacity:1}50%{opacity:0}} .hero{position:relative;overflow:hidden;padding:36px 0 18px; background:radial-gradient(900px 500px at 78% -12%,#123d2c 0%,transparent 60%), radial-gradient(700px 500px at 8% 0%,#0f3326 0%,transparent 55%)} :root[data-theme="light"] .hero{background:radial-gradient(900px 500px at 78% -12%,#dcf0e4 0%,transparent 60%),radial-gradient(700px 500px at 8% 0%,#e6f4ea 0%,transparent 55%)} /* Most readers never touch the switcher, so the OS preference needs the same treatment - guarded so an explicit dark choice still wins. */ @media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .hero{background:radial-gradient(900px 500px at 78% -12%,#dcf0e4 0%,transparent 60%),radial-gradient(700px 500px at 8% 0%,#e6f4ea 0%,transparent 55%)}} /* Warm, blurred Pakistani atmosphere behind the hero β€” text kept readable by a scrim */ .hero::before{content:"";position:absolute;inset:0;background:var(--herobg,url('/assets/hero/mosque.jpg')) center/cover no-repeat; opacity:var(--heroop,.55);filter:blur(1px) saturate(1.15) brightness(.85);z-index:0} .hero::after{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(90deg,var(--bg) 8%,color-mix(in srgb,var(--bg) 55%,transparent) 55%,transparent 100%)} .hero .wrap{position:relative;z-index:1} .hero .eyebrow{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px} .hero h1{font-family:var(--serif);font-size:clamp(34px,6vw,58px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance;font-weight:600} /* Urdu/Hindi nastaliq/naskh glyphs are tall β€” tight line-height clips their tops */ html[lang="ur"] h1,html[lang="hi"] h1,html[lang="ur"] h2.title,html[lang="hi"] h2.title{line-height:1.5;padding-top:.1em;overflow:visible} html[lang="ur"] .hero .urdu,html[lang="hi"] .hero .urdu{line-height:1.6} .hero .urdu{font-family:var(--serif);font-size:clamp(24px,4vw,36px);color:var(--accent);margin-top:6px} .hero p.lead{color:var(--muted);font-size:18px;max-width:56ch;margin:14px 0 20px} .hero .cta{display:flex;gap:14px;flex-wrap:wrap} /* trust strip */ .trust{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px} .trust .t{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px} .trust .t .n{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums} .trust .t .l{color:var(--muted);font-size:13px;margin-top:2px} /* colourful 2x2 stat grid on the right of the hero (fills the empty space) */ .trustgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:0} .trustgrid .t{min-width:0;border:1px solid rgba(255,255,255,.08);padding:22px 20px;backdrop-filter:blur(14px);border-radius:14px} .trustgrid .t .n{font-size:30px;font-variant-numeric:tabular-nums;font-weight:800;line-height:1} .trustgrid .t .l{color:rgba(255,255,255,.65);font-size:13px;margin-top:5px;line-height:1.4} /* dark pastels β€” enough hue to feel alive, dark enough to stay moody */ .trustgrid .t.c1{background:rgba(20,75,55,.55);border-color:rgba(74,222,128,.22)}.trustgrid .t.c1 /* The stat numbers were mint on a mint-tinted tile: 1.00:1, invisible. */ .n{color:var(--ink)} .trustgrid .t.c2{background:rgba(16,50,34,.55);border-color:rgba(122,212,163,.22)}.trustgrid .t.c2 .n{color:#b8d465} .trustgrid .t.c3{background:rgba(90,20,55,.50);border-color:rgba(251,113,133,.22)}.trustgrid .t.c3 .n{color:#fda4af} .trustgrid .t.c4{background:rgba(85,50,5,.55);border-color:rgba(252,211,77,.22)}.trustgrid .t.c4 .n{color:#fcd34d}.trustgrid .t.c5{grid-column:1/-1;background:rgba(26,58,30,.55);border-color:rgba(184,212,101,.25);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px}.trustgrid .t.c5 .n{color:#b8d465;font-size:clamp(28px,5vw,40px)}.trustgrid .t.c5 .l{color:rgba(255,255,255,.65);font-size:13px;margin-top:4px}.trustgrid .t.c5 .c5-right{text-align:right}.trustgrid .t.c5 .c5-badge{font-size:11px;background:rgba(184,212,101,.18);border:1px solid rgba(184,212,101,.3);color:#b8d465;border-radius:20px;padding:3px 10px;display:inline-block;margin-top:6px}.page-sb{display:block} /* Text direction and column order are different things. A grid reverses its inline axis under RTL, so the sidebar keeps its physical side only if the container stays ltr - direction is re-asserted on the children so the text inside still reads right-to-left. */ [dir="rtl"] .page-sb{direction:ltr} [dir="rtl"] .page-sb>*{direction:rtl} .page-sb-main{}.sidebar-right{display:none}@media(min-width:1260px){.page-sb{display:grid;grid-template-columns:1fr 320px;gap:0;align-items:start;max-width:var(--page-max);margin:0 auto}.page-sb-main{min-width:0}.sidebar-right{display:flex;flex-direction:column;gap:12px;padding:40px 24px 40px 24px;position:sticky;top:80px;border-left:1px solid rgba(255,255,255,.06);}}.sb-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:16px 18px}.sb-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.35);margin:0 0 10px;display:block}.sb-cta p{color:rgba(255,255,255,.6)}.sb-cta .btn{display:block;text-align:center;margin-top:8px;font-size:13px}.sb-crisis{border-left:3px solid rgba(248,113,113,.7)!important;background:rgba(80,10,10,.35)!important}.sb-crisis-num{font-size:21px;font-weight:800;color:#fca5a5;text-decoration:none;display:block;margin-bottom:3px;letter-spacing:.01em;line-height:1}.sb-crisis-sub{color:rgba(255,255,255,.45);font-size:11.5px}.sb-crisis .all-h{display:block;margin-top:10px;font-size:12.5px;color:#f87171;text-decoration:none}.sb-crisis .all-h:hover{color:#fca5a5}.sb-nav a{display:block;color:rgba(255,255,255,.55);font-size:13.5px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none;transition:color .12s}.sb-nav a:last-child{border-bottom:none}.sb-nav a:hover{color:#fff}.sb-contact a{display:block;font-size:12.5px;color:rgba(255,255,255,.5);text-decoration:none;margin-bottom:6px;word-break:break-all}.sb-contact a:hover{color:var(--accent)} @media(max-width:880px){.trustgrid .t .n{font-size:26px}} /* sections */ section.band{padding:32px 0} .kicker{color:var(--accent);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase} h2.title{font-family:var(--serif);font-size:clamp(26px,3.6vw,36px);font-weight:600;letter-spacing:-.01em;margin:8px 0 6px;text-wrap:balance} .sub{color:var(--muted);max-width:60ch;margin-bottom:16px} /* 280 not 240: at a 1018px content column, 240 fits FOUR tracks and every section ended in a ragged half-row with a hole on the right. */ .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} /* ---- ask box --------------------------------------------------------- This is the point of the page, so it is a raised card with its own accent border rather than another panel of body copy, and the input is sized to be typed into rather than read past. */ .askbox-v2{ background:var(--panel); border:2px solid var(--accent); border-radius:20px; padding:26px 26px 22px; margin:0 0 26px; box-shadow:0 18px 44px -26px rgba(0,0,0,.5); } .askbox-v2 .ab-h{ font-family:var(--serif);font-size:23px;font-weight:800; color:var(--ink);margin:0 0 6px;line-height:1.2; } .askbox-v2 .ab-sub{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 16px;max-width:60ch} .askbox-v2 textarea{ width:100%;box-sizing:border-box; background:var(--bg); border:2px solid var(--line); border-radius:14px; padding:16px 18px; min-height:120px; color:var(--ink); font-family:inherit;font-size:16.5px;line-height:1.6; resize:vertical;transition:border-color .15s,box-shadow .15s; } .askbox-v2 textarea::placeholder{color:var(--faint)} .askbox-v2 textarea:focus{ outline:none;border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); } .askbox-v2 .ab-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px} .askbox-v2 select{ background:var(--bg);border:2px solid var(--line);border-radius:12px; padding:0 14px;min-height:52px;color:var(--ink); font-family:inherit;font-size:15px;font-weight:600; } .askbox-v2 select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .askbox-v2 .ab-go{ min-height:52px;padding:0 26px;border:0;border-radius:12px;cursor:pointer; background:var(--accent);color:var(--accent-ink); font-family:inherit;font-weight:800;font-size:15px;letter-spacing:.04em; display:inline-flex;align-items:center;justify-content:center; transition:filter .15s; } .askbox-v2 .ab-go:hover{filter:brightness(1.08)} .askbox-v2 .ab-go:disabled{opacity:.75;cursor:default} .askbox-v2 .ab-note{color:var(--faint);font-size:12.5px} @media(max-width:560px){ .askbox-v2{padding:20px 18px 18px;border-radius:16px} .askbox-v2 .ab-go,.askbox-v2 select{width:100%} } /* ---- TOUCH_TARGETS -------------------------------------------------- 44px is the minimum reliable tap size. Everything below was measured in a browser at 390px, not guessed. Specificity here is deliberate: an earlier attempt with plain .langtog button lost to .utilbar .langtog button. */ @media(max-width:880px){ /* Utility-bar sizing lives in UTILBAR_V2 - setting min-height here too produced three controls at 44/46/44 instead of one height. */ header.nav .navtoggle{min-height:44px;min-width:44px} /* Do NOT set display here. .wa-head is hidden on phones with display:none, and a later display:inline-flex on .btn-wa un-hid it - putting the header WhatsApp button back on top of the brand. */ .btn:not(.wa-head),.btn-accent:not(.wa-head),.btn-ghost:not(.wa-head), .btn-wa:not(.wa-head){min-height:44px;display:inline-flex; align-items:center;justify-content:center} .wa-head{min-height:44px} footer.foot .cols a,.bottom-quran,.footlegal a{min-height:44px; display:inline-flex;align-items:center} .qr-read,.qr-play{min-height:44px} } /* ---- fixed furniture ------------------------------------------------ A fixed element is invisible to layout, so the page has to make room for it deliberately. Without this the floating button sits on whatever happens to be at the bottom of the viewport - measured covering a helpline's opening hours, a self-test CTA, and article cards, on first paint. */ /* The player is furniture too, and it is the one that must win: it owns the bottom of the screen while something is playing. */ #depk-player{z-index:90} #zbtn{z-index:80;transition:transform .18s ease} /* Playing: lift the button clear of the bar rather than letting them fight over the same 52px band. */ body.playing #zbtn{transform:translateY(-84px)} /* The homepage hero has its own "Talk to Amaan" button. Two buttons for the same action, one pixel apart, is a duplicate - not a stacking problem. */ body.hero-cta-visible #zbtn{opacity:0;pointer-events:none} /* ---- right sidebar -------------------------------------------------- It was a fixed 2,613px against a 900px viewport: pages with less content ended in up to 1,856px of empty panel, and sticky could never engage because the element was taller than the scrollport. */ @media(min-width:1260px){ .sidebar-right{position:sticky;top:80px;max-height:calc(100vh - 100px); overflow-y:auto;scrollbar-width:thin} } /* ---- touch targets -------------------------------------------------- Measured: 24 footer links at ~21px on every page, 114 "Read" links at 25.6px, the crisis link at 19.2px. All below the 44px minimum. */ footer.foot .cols a{display:inline-block;padding:11px 0;line-height:1.35} .footlegal a{display:inline-block;padding:8px 4px} .utilbar a{display:inline-block;padding:12px 0} .langtog button{min-height:44px} .themetog{min-height:44px;display:inline-flex;align-items:center} .qr-listen{ display:inline-flex;align-items:center;gap:6px;flex-shrink:0; min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer; background:var(--accent);color:var(--accent-ink);border:0; font-family:inherit;font-size:13.5px;font-weight:700; transition:filter .15s; } .qr-listen:hover{filter:brightness(1.08)} .qr-listen:focus-visible{outline:2px solid var(--accent);outline-offset:2px} a.qr-sname{text-decoration:none} a.qr-sname:hover{color:var(--accent);text-decoration:underline} .qr-num{flex-shrink:0;min-width:34px;text-align:center;color:var(--faint); font-variant-numeric:tabular-nums;font-weight:700} .qr-read{min-height:44px;display:inline-flex;align-items:center} .qr-play{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center} header.nav .brand{display:inline-flex;align-items:center;min-height:44px} .hq-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:20px} .hq-q{display:block;background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:14px 16px;text-decoration:none;transition:.15s} .hq-q:hover{border-color:var(--accent);background:rgba(122,212,163,.06)} .hq-cat{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em; color:var(--accent);margin-bottom:5px} .hq-t{display:block;color:var(--ink);font-size:14.5px;font-weight:650;line-height:1.35} .hq-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:20px} .hq-tool{display:flex;flex-direction:column;gap:3px;background:var(--panel); border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;transition:.15s} .hq-tool:hover{border-color:var(--accent);background:rgba(122,212,163,.06)} .hq-tool b{color:var(--ink);font-size:14.5px} .hq-tool span:last-child{color:var(--faint);font-size:12.5px} .hq-ic{font-size:22px;margin-bottom:4px} .feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px} @media(max-width:640px){.feat-grid{grid-template-columns:1fr !important}} /* ---- PHOTO_INK ------------------------------------------------------ These sit on a photograph with a dark scrim, so their ground is dark in every theme state. Their ink was var(--ink), which goes near-black in light theme: measured 1.05:1, dark text on a dark photo. Where the ground cannot follow the theme, the ink must not either. */ .feat-card,.feat-card h3,.feat-card p,.feat-card b,.feat-card span, .feat-card li,.feat-card div{color:#f2fbf6} .feat-card p,.feat-card li{color:rgba(242,251,246,.9)} .feat-card .ic{color:#f2fbf6} .hero h1,.hero .lead,.hero .eyebrow,.hero .urdu,.hero p{color:#f2fbf6} .hero .lead b,.hero p b{color:#fff} /* The scrim already darkens the photo; this keeps type legible over the lighter parts of it without a second overlay. */ .hero h1,.hero .lead,.feat-card h3,.feat-card p{text-shadow:0 1px 3px rgba(0,0,0,.45)} .feat-card{position:relative;min-height:300px;border-radius:20px;overflow:hidden;background:var(--fbg) center/cover no-repeat;cursor:default;transition:transform .3s,box-shadow .3s} .feat-card:hover{transform:translateY(-5px);box-shadow:0 20px 48px -16px rgba(0,0,0,.6)} .feat-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,12,22,.12) 0%,rgba(4,12,22,.55) 45%,rgba(4,12,22,.9) 100%)} .feat-body{position:absolute;bottom:0;left:0;right:0;padding:26px 24px;z-index:1} .feat-ic{font-size:30px;margin-bottom:12px;display:block} .feat-body h3{color:#fff;font-size:19px;font-weight:700;margin:0 0 8px;text-shadow:0 2px 8px rgba(0,0,0,.6);letter-spacing:-.01em} @media(max-width:640px){} @media(max-width:640px){} .feat-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(122,212,163,.22);border:2px solid rgba(122,212,163,.6);color:#7ad4a3;font-weight:800;font-size:15px;backdrop-filter:blur(6px)} .feat-body p{color:rgba(255,255,255,.78);font-size:13.5px;line-height:1.58;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.55)} .card{background:linear-gradient(145deg,var(--panel) 0%,var(--panel2) 100%);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 6px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)} .card .ic{font-size:24px;display:block;margin-bottom:4px} .card h3{color:var(--ink);font-size:17px;font-weight:700;margin:12px 0 8px;line-height:1.35}html:not(.anx):not(.dt) .card h3{color:var(--ink)} .card p{color:var(--muted);font-size:14.5px;line-height:1.58;margin:0}/* was rgba(195,218,242,.78) - a pale literal overriding --muted, which put every card body paragraph at 1.28:1 in light theme. */ html:not(.anx):not(.dt) .card p{color:var(--muted)} .card .tag,.card .badge{background:rgba(122,212,163,.15);color:#7ad4a3;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block;margin-bottom:8px;letter-spacing:.04em} a.card,.doc{transition:transform .2s,box-shadow .2s,border-color .2s} a.card:hover,.doc:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.45);border-color:rgba(122,212,163,.22)} /* how it works */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} .step .num{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#1e4a34 0%,#132e22 100%);color:var(--accent);box-shadow:0 2px 8px rgba(122,212,163,.2); display:grid;place-items:center;font-weight:800;font-size:14px} .step h3{margin:12px 0 6px;font-size:16px} .step p{color:var(--muted);font-size:14px} /* privacy */ .promise{background:linear-gradient(145deg,var(--panel) 0%,var(--panel2) 100%);border:1px solid rgba(122,212,163,.13); border-radius:22px;padding:22px} .promise ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:18px} .promise li{display:flex;gap:10px;color:rgba(185,205,228,.8);font-size:14.5px} .promise li b{color:var(--ink)} .check{color:var(--accent);font-weight:900} /* crisis band */ .crisis{background:color-mix(in srgb,var(--bad) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--bad) 35%,var(--line)); border-radius:20px;padding:26px} .crisis h3{color:var(--bad);font-size:16px;margin-bottom:6px} .crisis .lines{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .crisis .lines a{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600} .crisis .lines a b{color:var(--accent)} /* find help */ .searchbar{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:end} .field{display:flex;flex-direction:column;gap:6px} .field label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em} .field select,.field input{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--ink);font-size:15px;min-width:180px} .results{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:22px} .doc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px} .doc .top{display:flex;justify-content:space-between;gap:10px;align-items:start} .doc h4{font-size:16px;font-weight:700} .chip{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap} .chip.inst{background:color-mix(in srgb,var(--warm) 18%,transparent);color:var(--warm)} .doc .meta{color:rgba(160,190,220,.65);font-size:13.5px;margin-top:8px;display:flex;flex-direction:column;gap:3px} .doc .meta a{color:var(--accent);font-weight:600} /* footer */ footer.foot{border-top:2px solid rgba(122,212,163,.12);padding:40px 0;margin-top:20px;background:#04120d;color:rgba(255,255,255,.88);font-size:13.5px} footer.foot .cols{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between} /* The footer ground is dark in BOTH themes, so its ink cannot follow --ink - in light mode that is near-black on near-black (1.17:1). */ /* The footer ground is a literal #04120d in BOTH themes, so everything on it needs fixed light ink - tokens resolve to near-black in light theme and vanish. */ footer.foot b{color:#e9f5ee} footer.foot a{color:var(--fixed-dim)} footer.foot a:hover{color:#fff} footer.foot .footlegal,footer.foot .footlegal a{color:var(--fixed-dim)} footer.foot /* Only the footer disclaimer is on a fixed dark ground. Setting this unscoped made every other disclaimer light-on-light: 2.45:1. */ footer.foot .disclaimer{color:var(--fixed-dim)} .disclaimer{background:var(--panel2);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:14px 18px;color:var(--muted);font-size:13.5px;line-height:1.7;margin-top:22px} /* floating chat */ #zbtn{position:fixed;bottom:20px;right:20px;z-index:80;background:var(--accent);color:var(--accent-ink); border:none;border-radius:999px;padding:14px 20px;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3)} @media(max-width:600px){#zbtn{padding:15px;border-radius:50%;bottom:16px;right:16px}#zbtn .zbtn-label{display:none}} #zpanel{position:fixed;bottom:20px;right:20px;z-index:81;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 40px)); background:var(--panel);border:1px solid var(--line);border-radius:20px;display:none;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45)} #zpanel.open{display:flex} #zhead{background:var(--bg2);padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)} #zhead .t{font-weight:700;font-size:15px}#zhead .s{color:var(--muted);font-size:12px} #zhead .x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:20px} #zbox{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px} .msg{max-width:85%;padding:9px 13px;border-radius:14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap} .me{align-self:flex-end;background:var(--accent-soft)} .za{align-self:flex-start;background:var(--bg2);border:1px solid var(--line)} #zin{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)} #zin input{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:11px;color:var(--ink);font-size:14.5px} #zin button{background:var(--accent);color:var(--accent-ink);border:none;border-radius:11px;padding:0 16px;font-weight:800;cursor:pointer} /* ── Counter band β€” always dark, always readable ── */ .counterband{background:linear-gradient(135deg,#0d1730,#101a33 55%,#12213c);border-top:1px solid #223049;border-bottom:1px solid #223049;padding:38px 0} .ctitle{text-align:center;color:#9fb0c9;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:24px} .crow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} @media(max-width:860px){.crow{grid-template-columns:repeat(3,1fr)}} @media(max-width:480px){.crow{grid-template-columns:repeat(2,1fr)}} .cstat{text-align:center;padding:8px 6px} .cnum{font-family:var(--serif);font-size:clamp(30px,4.4vw,46px);font-weight:700;color:#8ee0b0;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 2px 20px rgba(0,0,0,.25)} .crow .cstat:nth-child(1) .cnum{color:#8ee0b0} .crow .cstat:nth-child(2) .cnum{color:#f28b82} .crow .cstat:nth-child(3) .cnum{color:#f6c667} .crow .cstat:nth-child(4) .cnum{color:#f29ac9} .clab{color:rgba(160,185,215,.72);font-size:12px;line-height:1.4;margin-top:6px} .csrc{color:rgba(120,150,185,.42);font-size:10.5px;margin-top:4px;font-style:italic} /* ── Live counter ── */ .livecounter{background:linear-gradient(135deg,#0d1c2e 0%,#0a1520 100%);border-radius:18px;padding:28px;border:1px solid rgba(255,255,255,.06)} .lc-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:32px;align-items:center} @media(max-width:640px){.lc-inner{grid-template-columns:1fr}} .lc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px} .lc-dot{width:8px;height:8px;border-radius:50%;background:#f28b82;box-shadow:0 0 8px #f28b82;flex-shrink:0;animation:lcdot 1.5s ease-in-out infinite} @keyframes lcdot{0%,100%{opacity:1}50%{opacity:.3}} .lc-label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(160,185,215,.65)} .lc-num{font-size:clamp(38px,5.5vw,62px);font-weight:900;font-family:var(--serif);letter-spacing:-.03em;color:#f28b82;font-variant-numeric:tabular-nums;line-height:1;transition:color .15s} .lc-num.flash{color:#ff6b6b} .lc-prog{height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:12px;overflow:hidden} .lc-prog i{display:block;height:100%;background:linear-gradient(90deg,#f28b82,#ff6b6b);border-radius:2px;transition:width .25s linear} .lc-mini{font-size:11px;color:rgba(155,180,210,.45);margin-top:8px;font-style:italic} .lc-h{font-size:18px;font-weight:700;color:#eef3fa;margin:0 0 10px} .lc-hope{font-size:14px;line-height:1.65;color:rgba(190,215,240,.8);margin:0 0 18px} .lc-cta{display:inline-block;background:var(--accent);color:#fff;border-radius:10px;padding:11px 20px;font-size:13.5px;font-weight:700;text-decoration:none;transition:opacity .2s} .lc-cta:hover{opacity:.85} /* ── Stats band β€” neutral section, not dark ── */ .statsband{background:var(--bg2);padding:56px 0} .statsband .title{color:var(--ink)} .statsband .sub{color:var(--muted)} .statsband .kicker{color:var(--accent);font-weight:800} /* Light mode statsband: very subtle warm grey */ .statsband{background:#f2f5f8;padding:56px 0} /* ── pkgrid layout ── */ .pkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:16px} /* ── bigstat card β€” COMPLETE REDESIGN ── */ /* Dark mode: glass card with colored top border */ .bigstat{background:#ffffff;border:1px solid #e2e8f0;border-top:3px solid #f87171;border-radius:14px;padding:22px 18px;position:relative} /* Light mode: white card, same colored top border */ .bigstat{background:#ffffff;border-color:#e2e8f0;box-shadow:0 2px 10px rgba(0,0,0,.06)} /* Crisis stats: red top border + red number */ .bigstat .bn{font-size:38px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-family:var(--serif);color:#dc2626;line-height:1;margin-bottom:10px} /* crisis bn colour already set */ /* Accent line (top 2 PK stats) β€” amber/orange for severity */ .bigstat.accentline{border-top-color:#fb923c} .bigstat.accentline .bn{color:#c2410c} /* accentline bn colour already set */ /* Global stats β€” blue */ .globalgrid .bigstat{border-top-color:#2563eb;background:#ffffff;border-color:#e2e8f0} .globalgrid .bigstat .bn{color:#2563eb} /* light globalgrid bn: already set on .bn directly */ /* light globalgrid: default handles it */ /* Hope stats β€” green */ .bigstat.hope{border-top:3px solid #16a34a;background:#f0fdf4;border-color:#bbf7d0} .bigstat.hope .bn{font-size:30px;color:#16a34a} .bigstat.hope{background:#f0fdf4;border-color:#bbf7d0} .bigstat.hope .bn{font-size:30px;color:#16a34a} /* Label text */ .bigstat .bl{color:#374151;font-size:14px;margin-top:0;line-height:1.5} /* light mode bl: default already dark */ .bigstat.hope .bl{color:#15803d} /* light mode hope bl: default already dark */ /* Source citation */ .bigstat .bs{color:#9ca3af;font-size:11px;margin-top:10px;font-style:italic;display:block} /* light bs: default already grey */ /* ── Viz cards (ratio bars + treatment gap) ── */ .viz2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px} @media(max-width:640px){.viz2{grid-template-columns:1fr}} .vizcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:22px} .vizcard{background:#ffffff;border-color:#e2e8f0;box-shadow:0 2px 10px rgba(0,0,0,.06)} .vzt{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#2b9e6d;margin-bottom:16px} /* light vzt: default already green */ .vznote{color:#4b5563;font-size:13px;margin-top:14px;line-height:1.6} /* light vznote: default already dark */ .vzsrc{color:#9ca3af;font-size:11px;margin-top:8px;font-style:italic;display:block} /* light vzsrc: default already grey */ /* ── Ratio bars ── */ .rbar{margin-bottom:14px} .rlab{font-size:13.5px;margin-bottom:6px;color:#374151;display:flex;justify-content:space-between} /* light rlab: default already dark */ .rtrack{height:12px;background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden;position:relative} .rtrack{background:#e5e7eb} .rfill{position:absolute;left:0;top:0;height:100%;border-radius:8px;transition:width .8s ease} .rfill.bad{background:linear-gradient(90deg,#f87171,#dc2626)} .rfill.warn{background:linear-gradient(90deg,#fbbf24,#d97706)} .rfill.good{background:linear-gradient(90deg,#4ade80,#16a34a)} .rval{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:#fff} /* ── Treatment gap bar ── */ .gapwrap{margin-top:10px} .gapbar{height:32px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden;margin-bottom:10px} .gapbar{background:#e5e7eb} .gapbar>i{display:block;height:100%;background:linear-gradient(90deg,#f87171,#dc2626);transition:width .9s ease} .gaprow{display:flex;justify-content:space-between;font-size:13px} .gaprow .bad{color:#dc2626;font-size:18px;font-weight:900;font-family:var(--serif)} .gaprow .good{color:#16a34a;font-size:18px;font-weight:900;font-family:var(--serif)} /* gaprow bad already dc2626 in default */ /* gaprow good already 16a34a in default */ .gaprow span{color:#4b5563} /* light gaprow: default already dark */ /* ── Hope band ── */ .hopeband{margin-top:48px;background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.15);border-radius:18px;padding:30px} .hopeband{background:#f0fdf4;border-color:#bbf7d0} /* ── Dark mode overrides (text goes light, bg goes dark) ── */ @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .bigstat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)} :root:not([data-theme="light"]) .bigstat .bl{color:rgba(210,228,248,.85)} :root:not([data-theme="light"]) .bigstat .bs{color:rgba(148,175,210,.38)} :root:not([data-theme="light"]) .bigstat.hope .bl{color:rgba(187,247,208,.85)} :root:not([data-theme="light"]) .vizcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)} :root:not([data-theme="light"]) .vzt{color:rgba(122,212,163,.75)} :root:not([data-theme="light"]) .vznote{color:rgba(185,208,232,.72)} :root:not([data-theme="light"]) .vzsrc{color:rgba(140,168,200,.4)} :root:not([data-theme="light"]) .rlab{color:rgba(210,228,248,.85)} :root:not([data-theme="light"]) .rtrack{background:rgba(255,255,255,.08)} :root:not([data-theme="light"]) .gapbar{background:rgba(255,255,255,.08)} :root:not([data-theme="light"]) .gaprow span{color:rgba(200,220,240,.75)} :root:not([data-theme="light"]) .gaprow .bad{color:#f87171} :root:not([data-theme="light"]) .gaprow .good{color:#4ade80} :root:not([data-theme="light"]) .bigstat .bn{color:#f87171} :root:not([data-theme="light"]) .bigstat.accentline .bn{color:#fb923c} :root:not([data-theme="light"]) .globalgrid .bigstat .bn{color:#60a5fa} :root:not([data-theme="light"]) .bigstat.hope .bn{color:#4ade80} :root:not([data-theme="light"]) .bigstat.hope{background:rgba(74,222,128,.05);border-color:rgba(74,222,128,.2)} :root:not([data-theme="light"]) .hopeband{background:rgba(74,222,128,.06);border-color:rgba(74,222,128,.15)} :root:not([data-theme="light"]) .statsband{background:linear-gradient(180deg,#071310,#0a1a14 40%,#071310)} } :root[data-theme="dark"] .bigstat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)} :root[data-theme="dark"] .bigstat .bl{color:rgba(210,228,248,.85)} :root[data-theme="dark"] .bigstat .bs{color:rgba(148,175,210,.38)} :root[data-theme="dark"] .vizcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)} :root[data-theme="dark"] .statsband{background:linear-gradient(180deg,#071310,#0a1a14 40%,#071310)} /* ── ACCESSIBILITY PASS ────────────────────────────────────── Everything below deliberately overrides the rules above. Larger type and real contrast, because a lot of this audience is reading on a cheap phone in bad light, and some of them are older parents. */ /* Labels and citations were 12px and 10.5px at 42% opacity. */ .clab{font-size:14px;line-height:1.5;color:rgba(190,210,235,.92);margin-top:8px} .csrc{font-size:12px;color:rgba(165,190,220,.75);margin-top:6px;font-style:normal} .lc-mini{font-size:12.5px;color:rgba(180,205,235,.8);font-style:normal} .lc-hope{font-size:15px;color:rgba(205,225,245,.92)} .lc-label{font-size:12.5px;color:rgba(185,205,230,.85)} .vznote{font-size:14px;color:#3f4a5a} .vzsrc{font-size:12px;color:#5c6b80;font-style:normal} .bigstat .bl{font-size:15px;line-height:1.6} .bigstat .bs{font-size:12px;font-style:normal} .ctitle{font-size:13.5px} /* No horizontal overflow anywhere in this band. */ .counterband,.statsband,.livecounter{max-width:100%;overflow-x:hidden} .crow,.pkgrid,.viz2,.kpi-row{max-width:100%} .cnum,.lc-num,.bigstat .bn{overflow-wrap:anywhere} @media(max-width:560px){ /* Two columns still collided on a 390-412px screen because the labels are long sentences, not single words. One column, and give it room. */ .crow{grid-template-columns:1fr;gap:4px} .cstat{padding:16px 14px;text-align:left;display:flex;align-items:baseline;gap:14px; border-bottom:1px solid rgba(255,255,255,.07)} .cstat:last-child{border-bottom:0} .cnum{font-size:32px;flex:0 0 auto;min-width:88px} .clab{margin-top:0;font-size:14.5px} .csrc{margin-top:3px} .cstat > div:last-child{flex:1;min-width:0} .lc-inner{grid-template-columns:1fr;gap:20px} .lc-num{font-size:40px} .livecounter{padding:20px 18px} .pkgrid{grid-template-columns:1fr} .bigstat{padding:18px 16px} .bigstat .bn{font-size:32px} .vizcard{padding:18px 16px} .hopeband{padding:20px 16px} .statsband{padding:38px 0} } /* The floating Talk-to-Amaan button overlapped the last line of content. */ @media(max-width:820px){ body{padding-bottom:84px} } @media(prefers-reduced-motion:reduce){ .lc-dot{animation:none} .cnum,.lc-num{transition:none} } .langtog{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-left:6px} .langtog button{background:transparent;border:none;color:var(--muted);padding:7px 11px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--sans)} .langtog button.on{background:var(--accent);color:var(--accent-ink)} html[dir="rtl"] .hero,html[dir="rtl"] .band .wrap,html[dir="rtl"] .promise{text-align:right} html[dir="rtl"] .nav nav,html[dir="rtl"] .cta,html[dir="rtl"] .trust{direction:rtl} html[lang="ur"] .hero h1,html[lang="ur"] h2.title{font-family:var(--serif)} @font-face{font-family:'Serif4';src:url('/assets/fonts/serif-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Serif4';src:url('/assets/fonts/serif-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'PlexSans';src:url('/assets/fonts/sans-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'PlexSans';src:url('/assets/fonts/sans-500.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'PlexSans';src:url('/assets/fonts/sans-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'PlexSans';src:url('/assets/fonts/sans-700.woff2') format('woff2');font-weight:700;font-display:swap} :root{ --serif:'Serif4',Georgia,'Noto Naskh Arabic',serif; --sans:'PlexSans',system-ui,-apple-system,'Segoe UI','Noto Naskh Arabic','Noto Sans Devanagari',sans-serif; --bg:#071612;--bg2:#0a1e18;--panel:#0f2820;--panel2:#132f2657;--line:#1f4034; --ink:#eaf5ef;--muted:#93b3a3;--faint:#8fb3a1;--accent:#7ad4a3;--accent-ink:#04170f;--accent-soft:#173d2d;--warm:#c9a24a;--bad:#e06b6b; } :root[data-theme="light"]{ --bg:#f3f9f5;--bg2:#e9f3ec;--panel:#ffffff;--panel2:#f1f8f3;--line:#d8e8de; --ink:#0f2a1e;--muted:#4a6858;--faint:#5c7668;--accent:#1f7a4d;--accent-ink:#ffffff;--accent-soft:#dff0e6;--warm:#8a5a0d;--bad:#b03636; } @media (prefers-color-scheme: light){:root:not([data-theme="dark"]){ --bg:#f3f9f5;--bg2:#e9f3ec;--panel:#ffffff;--panel2:#f1f8f3;--line:#d8e8de; --ink:#0f2a1e;--muted:#4a6858;--faint:#5c7668;--accent:#1f7a4d;--accent-ink:#ffffff;--accent-soft:#dff0e6;--warm:#8a5a0d;--bad:#b03636; }} body{font-size:16px;letter-spacing:-.003em} /* utility bar */ /* flowing animated "lights" bar β€” vibrant gradient sliding smoothly, white text */ .utilbar{border-bottom:0;font-size:12.5px;color:#fff; background:linear-gradient(90deg,#06301c,#0b4a2b,#116b3a,#0d5730,#0b4a2b,#06301c); background-size:300% 100%;animation:utillights 16s linear infinite} .utilbar a,.utilbar .em{color:#fff} .utilbar .em{font-weight:800} .utilbar,.utilbar a{text-shadow:0 1px 2px rgba(6,26,18,.35)} @keyframes utillights{0%{background-position:0% 50%}100%{background-position:300% 50%}} @media (prefers-reduced-motion:reduce){.utilbar{animation:none}} .utilbar .row{display:flex;align-items:center;height:36px;gap:14px} .utilbar .spacer{flex:1} /* NOT --muted. This is declared after color:#fff at equal specificity and wins, which put the crisis link at 1.00:1 on the gradient. The bar is a fixed dark-to-green gradient in both themes, so its ink is fixed too. */ .utilbar a{color:#fff;font-weight:600} .utilbar a:hover{color:var(--accent)} /* NOT --ink. The bar is a fixed dark gradient in both themes, so a token here resolves to near-black in light: measured 1.29:1. */ .utilbar .em{color:#c8e6a0} /* nav β€” tighter, more corporate */ header.nav{background:color-mix(in srgb,var(--bg) 90%,transparent)} @media(min-width:881px){.nav .row{height:66px}} .brand{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:-.01em} .nav nav a{font-size:14px;font-weight:500;letter-spacing:.005em} .btn{border-radius:9px;font-weight:600;letter-spacing:.005em} .btn-wa{box-shadow:0 1px 2px rgba(0,0,0,.15)} .btn-accent{box-shadow:0 1px 2px rgba(0,0,0,.12)} /* headings + rhythm */ h1{letter-spacing:-.025em!important} h2.title{letter-spacing:-.015em} .kicker,.gh em,.vzt,.tile .k,.bigstat .bs,.ctitle{font-family:var(--sans)} .kicker{position:relative;padding-left:26px} .kicker::before{content:"";position:absolute;left:0;top:50%;width:18px;height:2px;background:var(--accent);transform:translateY(-50%)} /* Tight, dense rhythm β€” no dead space */ section.band{padding:40px 0} h2.title{margin:6px 0 4px} .sub{margin-bottom:20px;max-width:70ch} .grid3,.steps,.pkgrid{gap:14px} .trust{margin-top:28px} .hopeband{margin-top:32px} .hero+*{margin-top:0} /* cards β€” hairline + soft shadow, less startup-round */ .card,.vizcard,.bigstat,.doc,.searchbar,.promise,.qcard{border-radius:12px;box-shadow:0 1px 3px rgba(6,26,18,.05),0 8px 24px -16px rgba(6,26,18,.14)} :root[data-theme="light"] .card,:root[data-theme="light"] .vizcard,:root[data-theme="light"] .bigstat,:root[data-theme="light"] .doc,:root[data-theme="light"] .promise{box-shadow:0 1px 2px rgba(20,32,47,.04),0 12px 30px -20px rgba(20,32,47,.16)} .card{transition:box-shadow .2s,transform .2s} a.card:hover,.doc:hover{transform:translateY(-2px);box-shadow:0 8px 30px -12px rgba(10,20,40,.28)} /* hero β€” cinematic image + even dark overlay + LIGHT text (readable in any language/direction, over any backdrop). Theme-independent by design. */ .hero{padding:60px 0 52px} .hero::before{background-image:var(--herobg,url('/assets/hero-bg.jpg'))!important;opacity:var(--heroop,.7)!important;filter:saturate(1.1)!important} .hero::after{background:linear-gradient(180deg,rgba(7,12,22,.60),rgba(7,12,22,.50) 55%,rgba(7,12,22,.66))!important} .hero h1{color:#fff!important} .hero .lead{color:#eaf1fb!important} .hero .eyebrow{color:#8fe8bf!important} .hero .urdu{color:#8fe8bf!important} .hero h1,.hero .lead,.hero .eyebrow,.hero .urdu{text-shadow:0 2px 14px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.6)} .hero .lead b{color:#fff} .hero .eyebrow{font-family:var(--sans);letter-spacing:.16em;font-size:12px;color:var(--accent)} .hero h1{font-weight:700} .hero p.lead{font-size:18.5px;color:var(--muted);max-width:60ch} .trust .t{border-radius:12px} .trust .t .n{font-family:var(--serif)} /* buttons in hero slightly larger for presence */ .hero .cta .btn{padding:13px 22px;font-size:15px} /* footer β€” formal, columned */ footer.foot{background:#04120d;border-top:2px solid rgba(122,212,163,.12);padding:64px 0 36px} footer.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)} footer.foot b{font-weight:600} @media(max-width:920px){footer.foot .cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px}} /* Below 920px the five desktop tracks collapse to two. */ @media(max-width:560px){footer.foot .cols{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;padding-bottom:28px} footer.foot .cols>div:first-child{grid-column:1/-1} footer.foot .cols a,footer.foot .cols div{overflow-wrap:anywhere} footer.foot .cols>div{min-width:0}} .footlegal{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;font-size:12px;color:var(--faint);display:flex;flex-wrap:wrap;gap:8px 22px} /* The separator is drawn, not written, so a wrapped row can never begin with a stranded bullet. */ .footlegal-v2{list-style:none;margin:22px 0 0;padding:18px 0 0;gap:6px 0;align-items:baseline;line-height:1.7} .footlegal-v2 li{display:inline-flex;align-items:baseline} .footlegal-v2 li:not(:last-child)::after{content:"Β·";opacity:.45;padding:0 11px} .footlegal-v2 a{text-decoration:underline;text-underline-offset:2px} .langtog button{font-weight:600} html.anx{--serif:'PlexSans',system-ui,'Noto Naskh Arabic',sans-serif} /* airier: sans headings */ /* app-like chrome: soft pill nav, rounded everything, floaty header */ html.anx .nav nav a{padding:8px 14px;border-radius:999px;transition:background .15s,color .15s;color:var(--ink);font-weight:600} html.anx .nav nav a:hover{background:var(--accent-soft);color:var(--accent)} html.anx .card,html.anx .doc,html.anx .vizcard{border-radius:22px} html.anx .btn{border-radius:14px} /* floating rounded 'pill' header β€” app-like, visibly different chrome from the other sites */ @media(min-width:881px){ html.anx header.nav{background:transparent;border-bottom:0;backdrop-filter:none} html.anx header.nav .row{margin-top:12px;height:58px;padding:0 20px;border-radius:999px; background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(14px); border:1px solid var(--line);box-shadow:0 14px 40px -20px rgba(15,155,176,.35)} } html.anx .brand{color:var(--ink)} html.anx{--bg:#eef6fb;--bg2:#e3eff7;--panel:#ffffff;--panel2:#f1f7fb;--line:#d4e3ee; --ink:#123240;--muted:#4c6675;--faint:#8aa1ad;--accent:#0f9bb0;--accent-ink:#ffffff;--accent-soft:#d8f0f4;--warm:#e0a34e;--bad:#e0655f} html.anx[data-theme="dark"]{--bg:#071822;--bg2:#0a2230;--panel:#0e2836;--panel2:#0c2432;--line:#1c3a49; --ink:#e6f4f9;--muted:#8fabb8;--faint:#5b7885;--accent:#38c9de;--accent-ink:#042026;--accent-soft:#0e3540} @media (prefers-color-scheme: dark){html.anx:not([data-theme="light"]){--bg:#071822;--bg2:#0a2230;--panel:#0e2836;--panel2:#0c2432;--line:#1c3a49; --ink:#e6f4f9;--muted:#8fabb8;--faint:#5b7885;--accent:#38c9de;--accent-ink:#042026;--accent-soft:#0e3540}} html.anx h1,html.anx h2.title{font-weight:750;letter-spacing:-.02em} /* breathing hero (no photo) */ html.anx .hero{padding:48px 0 14px;background:radial-gradient(800px 460px at 80% -10%,var(--accent-soft) 0%,transparent 60%),linear-gradient(180deg,var(--bg),var(--bg2))!important} html.anx .hero h1{margin-bottom:6px} html.anx .hero .urdu{margin-bottom:6px} html.anx .breathe-hero{margin:18px 0 4px} html.anx .hero::before,html.anx .hero::after{display:none!important} html.anx .hero h1,html.anx .hero .lead,html.anx .hero .eyebrow,html.anx .hero .urdu{color:var(--ink)!important;text-shadow:none!important} html.anx .hero .lead{color:var(--muted)!important} html.anx .hero .eyebrow,html.anx .hero .urdu{color:var(--accent)!important} .breathe-hero{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin:22px 0 6px} /* 2-column hero β€” fills the right side, no dead space */ .hero-2col{display:grid;grid-template-columns:1.35fr .92fr;gap:36px;align-items:center} /* hero-below-grid: suicide counter (50%) + stat tiles (50%) */ .hero-below-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;padding-top:28px;border-top:1px solid rgba(255,255,255,.06)} .hero-below-left{display:flex;flex-direction:column;justify-content:center} .hero-below-right{display:flex;flex-direction:column;justify-content:center} /* People-reached live counter card */ .reach-card{background:linear-gradient(145deg,rgba(20,60,35,.85),rgba(8,30,18,.9));border:1px solid rgba(122,212,163,.22);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;justify-content:center} .reach-eyebrow{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(122,212,163,.7);margin-bottom:16px} .reach-dot{width:7px;height:7px;border-radius:50%;background:#7ad4a3;box-shadow:0 0 8px #7ad4a3;animation:blink 1.4s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.35}} .reach-num{font-size:clamp(32px,3.5vw,50px);font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#7ad4a3;line-height:1;margin-bottom:8px} .reach-label{font-size:15px;font-weight:600;color:rgba(200,240,220,.85);margin-bottom:10px} .reach-sub{font-size:12.5px;color:rgba(122,212,163,.45);line-height:1.55} /* 2x2 stat grid below suicide tracker */ .trustgrid4{display:grid;grid-template-columns:1fr 1fr;gap:8px} .trustgrid4c{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .trustgrid4c .t .n,.trustgrid4c .t .l{color:#e9f5ee!important} .trustgrid4c .t{padding:8px 6px;background:rgba(14,40,26,.75)!important;border:1px solid rgba(122,212,163,.15)!important;border-radius:8px;text-align:center} .trustgrid4c .n{font-size:18px;font-weight:800;color:#c8e6a0!important;line-height:1} .trustgrid4c .l{font-size:10px;color:rgba(200,235,215,.5)!important;margin-top:2px;line-height:1.3} /* Fused band: suicide counter (left ~40%) + emergency stats (right ~60%) */ /* ── MISSION BAND ─────────────────────────────── */ .mission-band{background:#060e1a;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.05)} .mb-label-row{display:flex;align-items:center;justify-content:space-between;padding:8px 24px 0;max-width:min(1400px,98vw);margin:0 auto} .mb-label-left{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.25)} .mb-dot{width:7px;height:7px;border-radius:50%;background:#f28b82;box-shadow:0 0 9px #f28b82;animation:lcdot 1.5s ease-in-out infinite;flex-shrink:0} .mb-label-right{font-size:10px;color:var(--muted)} .mb-label-right a{color:rgba(122,212,163,.45);text-decoration:none;font-weight:600} .mb-label-right a:hover{color:#7ad4a3} .mb-ticker{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;max-width:min(1400px,98vw);margin:0 auto;padding:0 0 10px} .mb-ticker::-webkit-scrollbar{display:none} .mb-tick{flex:1;min-width:130px;padding:20px 16px 16px;text-align:center;border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px} .mb-tick:last-child{border-right:none} .mb-tick--live{min-width:180px;flex:1.5;background:rgba(60,6,6,.4);border-right:1px solid rgba(242,139,130,.15);text-align:center;align-items:center} .mb-tick-eyebrow{font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,139,130,.5);margin-bottom:2px;text-align:center} .mb-tick-num{font-size:clamp(26px,3vw,44px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#f28b82} .mb-tick-num.flash{opacity:.6} .mb-prog{width:80%;height:2px;background:rgba(242,139,130,.15);border-radius:2px;overflow:hidden;margin:4px auto} .mb-prog i{display:block;height:100%;background:linear-gradient(90deg,#f28b82,#ff5555);border-radius:2px;transition:width .2s linear;width:0} .mb-tick-lbl{font-size:10.5px;color:rgba(200,220,215,.5);line-height:1.45;max-width:140px;text-align:center;margin-top:2px;width:100%} .mb-tick-src{font-size:8px;color:rgba(255,255,255,.18);margin-top:1px;font-style:italic;text-align:center;width:100%} @media(max-width:900px){.mb-ticker{flex-wrap:wrap}.mb-tick{min-width:calc(33.33% - 1px)}.mb-tick--live{min-width:100%;border-right:none;border-bottom:1px solid rgba(242,139,130,.15);flex-direction:row;gap:24px;padding:14px 20px;text-align:left;align-items:center}.mb-tick--live .mb-prog{width:120px}.mb-tick--live .mb-tick-lbl{text-align:left}} @media(max-width:500px){.mb-tick{min-width:calc(50% - 1px)}} .mb-hope-strip{display:flex;align-items:center;justify-content:center;gap:0;background:rgba(122,212,163,.06);border-top:1px solid rgba(122,212,163,.12);padding:0;max-width:100%;overflow-x:auto;scrollbar-width:none} .mb-hope-strip::-webkit-scrollbar{display:none} .mb-hope-item{display:flex;align-items:center;gap:8px;padding:12px 20px;white-space:nowrap;font-size:11px;color:rgba(200,230,215,.55);flex-shrink:0} .mb-hope-num{font-size:13px;font-weight:800;color:#7ad4a3;font-variant-numeric:tabular-nums} .mb-hope-txt{color:rgba(200,230,215,.5)} .mb-hope-cta{gap:16px} .mb-hope-cta a{font-size:11.5px;font-weight:700;color:rgba(122,212,163,.7);text-decoration:none} .mb-hope-cta a:hover{color:#7ad4a3} .mb-hope-div{width:1px;height:30px;background:rgba(255,255,255,.06);flex-shrink:0} @media(max-width:700px){.mb-hope-div{display:none}.mb-hope-item{padding:10px 14px}} @media(max-width:860px){.hero-below-grid{grid-template-columns:1fr}} @media(max-width:880px){.hero-2col{grid-template-columns:1fr;gap:22px}} .hero-2col:has(.hero-main:only-child){grid-template-columns:1fr} .hero-side{align-self:center} .triagecard{background:color-mix(in srgb,var(--panel) 80%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));border-radius:18px;padding:16px;box-shadow:0 20px 46px -28px rgba(20,50,64,.5)} .tc-title{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:12px} .tc-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--accent);margin-bottom:9px;font-weight:700;color:var(--ink);font-size:14.5px;transition:transform .16s,box-shadow .16s} .tc-row:last-child{margin-bottom:0} .tc-row:hover{transform:translateX(4px);box-shadow:0 10px 24px -14px rgba(0,0,0,.35)} .tc-row .ic{font-size:18px} .tc-row .go{margin-left:auto;color:var(--muted);font-weight:800} .tc-row:nth-of-type(1){border-left-color:#ef6f6f} .tc-row:nth-of-type(2){border-left-color:#17803d} .tc-row:nth-of-type(3){border-left-color:#7ad4a3} .tc-row:nth-of-type(4){border-left-color:#f0a04a} .tc-row:nth-of-type(5){border-left-color:#12b3a6} .bh-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none} .bh-circle{position:relative;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,var(--accent),var(--accent-soft)); animation:bhpulse 15.2s ease-in-out infinite;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;text-align:center; cursor:pointer;user-select:none;box-shadow:0 0 40px -6px color-mix(in srgb,var(--accent) 60%,transparent);transition:box-shadow .4s,background .4s} .bh-hint{font-size:11px;color:var(--muted);letter-spacing:.02em} @keyframes bhpulse{0%{transform:scale(.8)}26%{transform:scale(1.15)}52%{transform:scale(1.15)}100%{transform:scale(.8)}} /* mystical modes β€” tap the orb to cycle */ .bh-circle[data-mode="1"]{background:radial-gradient(circle,#ffe9a8,#e8b23f 70%);box-shadow:0 0 55px -4px rgba(240,190,80,.75)} /* divine gold */ .bh-circle[data-mode="2"]{background:radial-gradient(circle,#d7ecc0,#5c9e3a 72%);box-shadow:0 0 55px -4px rgba(92,158,58,.7)} /* cosmic violet */ .bh-circle[data-mode="3"]{background:radial-gradient(circle,#bdeed6,#17803d 70%);animation:bhpulse 15.2s ease-in-out infinite,bhflash 3.4s steps(1) infinite} /* lightning */ .bh-circle[data-mode="4"]{background:radial-gradient(circle,#ffd0a3,#e05a34 72%);box-shadow:0 0 55px -4px rgba(230,90,50,.7)} /* ember */ .bh-circle[data-mode="5"]{background:radial-gradient(circle,#b6ffe6,#12b39a 70%);box-shadow:0 0 55px -4px rgba(18,190,150,.7)} /* emerald */ @keyframes bhflash{0%,92%,100%{box-shadow:0 0 55px -4px rgba(70,140,255,.55)}94%{box-shadow:0 0 90px 6px rgba(200,225,255,.95)}96%{box-shadow:0 0 30px -8px rgba(70,140,255,.4)}} @media (prefers-reduced-motion:reduce){.bh-circle{animation:none}} /* triage chips */ .triage{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px} .triage a{border:1px solid transparent;border-radius:999px;padding:9px 17px;font-size:14px;font-weight:700;color:#fff;box-shadow:0 6px 16px -9px rgba(10,40,60,.6);transition:transform .18s,box-shadow .18s} .triage a:hover{transform:translateY(-2px);box-shadow:0 11px 24px -9px rgba(10,40,60,.75);color:#fff} /* each triage chip a distinct vibrant colour */ .triage a:nth-child(1){background:linear-gradient(135deg,#f0655f,#e0483f)} .triage a:nth-child(2){background:linear-gradient(135deg,#17803d,#0f5c33)} .triage a:nth-child(3){background:linear-gradient(135deg,#7ad4a3,#17803d)} .triage a:nth-child(4){background:linear-gradient(135deg,#f0a04a,#e07d2b)} .triage a:nth-child(5){background:linear-gradient(135deg,#12b3a6,#0b9488)} .triage a:nth-child(6){background:linear-gradient(135deg,#e05fa0,#c73f84)} /* sticky SOS */ .sosbtn{position:fixed;left:20px;bottom:20px;z-index:82;background:linear-gradient(135deg,#f0655f,#d1493f);color:#fff;border-radius:999px;padding:13px 20px;font-weight:800;font-size:15px;box-shadow:0 8px 24px rgba(200,60,50,.4);animation:sospulse 2.6s ease-in-out infinite} @keyframes sospulse{0%,100%{box-shadow:0 8px 24px rgba(200,60,50,.4)}50%{box-shadow:0 8px 34px rgba(200,60,50,.7)}} /* ── SaaS look for anxiety.pk ── */ /* clean daylight hero + soft cool colour wash (no muddy multiply) */ /* no colour wash β€” the ambient grid + a neuron network carry the hero */ html.anx .hero{position:relative;overflow:hidden;background:transparent!important} html.anx .hero .neuro{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} html.anx .hero>.wrap{position:relative;z-index:2} html.anx .hero .mesh{position:absolute;inset:-25%;z-index:0;filter:blur(72px);opacity:.5;pointer-events:none} html.anx .hero .mesh i{position:absolute;border-radius:50%;animation:float 20s ease-in-out infinite} html.anx .hero .mesh i:nth-child(1){width:44%;height:64%;left:58%;top:-12%;background:var(--accent)} html.anx .hero .mesh i:nth-child(2){width:40%;height:58%;left:-10%;top:14%;background:#79d6ea;animation-delay:-7s} html.anx .hero .mesh i:nth-child(3){width:36%;height:52%;left:30%;top:52%;background:#8fe6c8;opacity:.7;animation-delay:-13s} @keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,-5%) scale(1.08)}66%{transform:translate(-5%,4%) scale(.95)}} @media (prefers-reduced-motion:reduce){html.anx .hero .mesh i{animation:none}} /* gradient headline accent */ html.anx h2.title,html.anx .hero h1{background:linear-gradient(120deg,var(--ink),color-mix(in srgb,var(--accent) 55%,var(--ink)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* glassy cards + hover lift/glow */ html.anx .card,html.anx .vizcard,html.anx .doc,html.anx .searchbar{background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));border-radius:16px;transition:transform .25s,box-shadow .25s,border-color .25s} html.anx a.card:hover,html.anx .card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 16px 40px -18px color-mix(in srgb,var(--accent) 60%,transparent)} html.anx .card .ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--accent-soft);font-size:22px;margin-bottom:4px} /* gradient buttons */ html.anx .btn-accent{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 74%,#000))!important;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--accent) 70%,transparent)} html.anx .btn-accent:hover{transform:translateY(-1px)} /* feature grid */ .featgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} .feat{padding:22px} .feat .fnum{font-family:var(--serif);font-size:26px;font-weight:750;color:var(--accent)} /* scroll reveal */ html.anx .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease} html.anx .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){html.anx .reveal{opacity:1;transform:none}} html.dt{--serif:system-ui,-apple-system,'Segoe UI',Roboto,'Noto Naskh Arabic','Noto Sans Devanagari',sans-serif} /* The DT skin owns SHAPE and TYPE only. Colour belongs to the palette family above - hardcoding --bg/--accent here beat every palette rule on specificity and made the picker a no-op in dark mode. */ html.dt h1,html.dt h2.title{font-family:var(--serif);font-weight:800;letter-spacing:-.025em} html.dt .kicker,html.dt .eyebrow{color:var(--accent)!important} /* pill buttons + soft indigo glows β€” distinct from the other two sites */ html.dt .btn{border-radius:999px;font-weight:800} html.dt .btn-accent{background:var(--accent)!important;color:var(--accent-ink)!important;box-shadow:none} html.dt .btn-ghost{background:var(--panel)!important;border:1px solid var(--line)!important;color:var(--accent)!important;box-shadow:none!important} html.dt .btn-ghost:hover{background:var(--accent-soft)!important} /* softer rounded cards */ html.dt .card,html.dt .vizcard,html.dt .searchbar,html.dt .doc{border-radius:20px;box-shadow:0 14px 34px -24px rgba(60,40,160,.4)} html.dt .opts label{border-radius:12px} html.dt .opts label:has(input:checked){background:var(--accent-soft)} /* crisp header + indigo hero wash on the first band */ html.dt header.nav{background:color-mix(in srgb,var(--panel) 88%,transparent)} html.dt .nav nav a{color:var(--ink);font-weight:600} html.dt .nav nav a:hover{color:var(--accent)} /* Derived from tokens, never literals: --accent and --bg already flip per theme and per palette, so the wash follows both. The previous literal lavender stayed light in dark mode and reduced headings to 1.04:1. */ html.dt .band:first-of-type{background: radial-gradient(760px 460px at 88% -14%,color-mix(in srgb,var(--accent) 20%,var(--bg)) 0%,transparent 56%), radial-gradient(620px 440px at 4% 8%,color-mix(in srgb,var(--accent) 11%,var(--bg)) 0%,transparent 52%), linear-gradient(180deg,var(--bg),var(--bg2))} html.dt .urdu{color:var(--accent)} /* indigo top hairline on the nav for a crisp product feel */ html.dt header.nav{border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))} html.dt .dt-expect{border-color:color-mix(in srgb,var(--accent) 26%,var(--line))} /* ══ suicide.pk β€” THE INSTRUMENT SKIN ═══════════════════════════ This site measures something and hands back a number, so it is built like a measuring device and its spec sheet, not like a magazine and not like an app. Deliberately unlike its two siblings: depression.pk β€” stacked full-bleed editorial bands, serif headings. anxiety.pk β€” 12-column bento of tinted rounded tiles, each a different pastel, photographic portraits behind text. here β€” a calibrated 0-27 axis as the masthead, then a numbered specification sheet: one sticky index rail and a single measured column of ruled rows. Square corners, hairline rules, one accent, monospace for every label, index and number. NO PHOTOGRAPHS. Portraits behind text are anxiety.pk's device and using them here would undo the separation. Every colour below resolves from a palette token (--bg/--panel/--ink/ --muted/--line/--accent). There is not one literal in this sheet, so it follows all ten palettes and both themes. A hardcoded gradient on this exact site once reduced dark-mode headings to 1.04:1. */ /* The bar was rendering its label twice β€” "ASK A QUESTION ASK A QUESTION". The base rule that hides the short variant sits INSIDE a max-width media block, so above 480px neither span was hidden. Restated unconditionally. */ .utilbar .cl-short{display:none} @media(max-width:480px){ .utilbar .cl-long{display:none} .utilbar .cl-short{display:inline} } /* Nav labels are single-line by definition; wrapping them made the header look broken next to the wordmark. */ html.dt .nav nav a{white-space:nowrap} /* On a phone the band names were being ellipsised to "MINI…" / "MODE…", which is the one thing on the scale that has to stay readable. */ @media(max-width:640px){ .dt-bandseg{white-space:normal;overflow:visible;text-overflow:clip; font-size:9px;letter-spacing:.04em;padding:8px 5px;line-height:1.3} .dt-bandseg em{font-size:9px} } html.dt{ /* --faint was the third text tier. Pixel sampling put it at 4.29-4.44:1 on --panel in every palette - under the 4.5 floor by a fraction, everywhere, which is why it never looked obviously wrong. Rather than hand-tune twenty hex values across ten palettes and two themes and hope, the tier is retired: this site has two text weights, --ink and --muted, and separates tertiary information by size and letter-spacing instead. !important because the palette blocks set --faint at higher specificity. */ --faint:var(--muted) !important; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace; --hair:1px solid var(--line); --tint:color-mix(in srgb,var(--accent) 7%,var(--panel)); } /* ── strip the sibling devices ──────────────────────────────────────── */ /* Photographic plates, everywhere, off. */ html.dt .hero::before,html.dt .hero::after, html.dt .feat-card::before,html.dt .feat-card::after{display:none!important} html.dt .feat-card{background:var(--panel)!important;border:var(--hair)} /* The inherited hero wash was a fixed green radial. Derive it instead. */ html.dt .hero{ background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)!important; border-bottom:var(--hair); } html.dt .hero h1,html.dt .hero .lead,html.dt .hero .eyebrow, html.dt .hero .urdu,html.dt .hero p{color:var(--ink)!important;text-shadow:none!important} html.dt .hero .lead,html.dt .hero p{color:var(--muted)!important} html.dt .feat-card h3,html.dt .feat-card p{text-shadow:none!important} html.dt .feat-card h3{color:var(--ink)} html.dt .feat-card p{color:var(--muted)} /* ── type: an instrument is labelled, not narrated ──────────────────── */ html.dt .kicker,html.dt .eyebrow,html.dt .hq-cat,html.dt .qr-picker label, html.dt .setpop-h,html.dt .sb-label{ font-family:var(--mono);font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase; } html.dt h1,html.dt h2,html.dt h3,html.dt .title{ font-family:var(--sans);font-weight:700;letter-spacing:-.028em; } html.dt .num,html.dt .n{font-variant-numeric:tabular-nums} /* Square, ruled, flat. The siblings are both rounded; this one is not. */ html.dt .card,html.dt .vizcard,html.dt .searchbar,html.dt .doc, html.dt .hq-tool,html.dt .hq-q,html.dt .feat-card,html.dt .trust-row, html.dt .magnet,html.dt .qa-block{border-radius:2px!important;box-shadow:none!important} html.dt .btn{border-radius:2px;font-weight:600;letter-spacing:.01em} html.dt .hq-ic{border-radius:2px} html.dt .kw{border-radius:2px;font-family:var(--mono);font-size:11px} html.dt .hq-tool::after,html.dt .hq-q::after{display:none} html.dt .hq-tool,html.dt .hq-q{background:var(--panel);border:var(--hair)} html.dt .hq-tool:hover,html.dt .hq-q:hover{transform:none;border-color:var(--accent);box-shadow:none} /* ── the right-hand rail: it was a fixed green plate on every inner page, which read as depression.pk. Now it belongs to the palette. ────── */ html.dt .sidebar-right > div{background:transparent!important} html.dt .sidebar-right{border-left:var(--hair);border-radius:0} html.dt .sidebar-right div,html.dt .sidebar-right p,html.dt .sidebar-right span{color:var(--fixed-dim)!important} html.dt .sidebar-right a{color:var(--fixed-ink)!important} html.dt .sidebar-right a[style*="background"]{ background:var(--accent)!important;color:var(--accent-ink)!important; border-radius:2px!important;font-family:var(--mono);font-size:12px!important; letter-spacing:.06em;text-transform:uppercase; } html.dt .sidebar-right > div > div:first-child{ color:var(--fixed-dim)!important;font-family:var(--mono);letter-spacing:.14em; } /* ══ 1. MASTHEAD ═══════════════════════════════════════════════════════ */ .dt-shell{max-width:var(--page-max);margin:0 auto;padding:0 24px} .dt-mast{background:var(--bg);border-bottom:var(--hair);padding:44px 0 30px} .dt-eyebrow{ font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center; } .dt-eyebrow b{color:var(--ink);font-weight:600} .dt-h1{ font-size:clamp(30px,4.6vw,52px);line-height:1.08;letter-spacing:-.032em; color:var(--ink);max-width:17ch;margin:0 0 16px;font-weight:700; } .dt-lede{color:var(--muted);font-size:17px;line-height:1.65;max-width:60ch;margin:0 0 22px} /* The search data says the word people actually type is "free". It goes above the fold, stated plainly, not buried in a promise section. */ .dt-chips{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0 0 24px;padding:0; border:var(--hair);width:max-content;max-width:100%} .dt-chips li{ font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--ink);padding:9px 14px;border-right:var(--hair); } .dt-chips li:last-child{border-right:0} .dt-chips li.on{background:var(--accent);color:var(--accent-ink)} .dt-cta{display:flex;gap:10px;flex-wrap:wrap} .dt-btn{ display:inline-flex;align-items:center;gap:9px;padding:13px 22px; font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.09em; text-transform:uppercase;text-decoration:none;border-radius:2px;border:1px solid var(--accent); } .dt-btn-1{background:var(--accent);color:var(--accent-ink)} .dt-btn-2{background:transparent;color:var(--ink);border-color:var(--line)} .dt-btn-2:hover{border-color:var(--accent)} /* ══ 2. THE AXIS β€” the organising device of the whole site ════════════ */ .dt-axis-wrap{background:var(--panel);border-bottom:var(--hair);padding:26px 0 30px} .dt-axis-head{ display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase; color:var(--muted);margin-bottom:12px; } .dt-axis{ display:grid;grid-template-columns:repeat(28,1fr);gap:0; border:var(--hair);background:var(--bg); } .dt-tick{ appearance:none;background:transparent;border:0;border-right:var(--hair); padding:0;cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:600; color:var(--muted);height:52px; display:flex;flex-direction:column;align-items:center;justify-content:flex-end; gap:0;position:relative;transition:background .12s,color .12s; } .dt-tick:last-child{border-right:0} .dt-tick::before{ content:"";display:block;width:1px;background:var(--line); height:10px;margin-bottom:6px; } /* Every fifth mark is taller β€” that is what a calibrated scale looks like. */ .dt-tick[data-major="1"]::before{height:20px;background:var(--muted)} .dt-tick i{font-style:normal;padding-bottom:7px;font-variant-numeric:tabular-nums} .dt-tick:hover{background:var(--tint);color:var(--ink)} .dt-tick[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)} .dt-tick[aria-pressed="true"]::before{background:var(--accent-ink)} .dt-tick:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:2} /* the five published bands, drawn to their real widths: 5,5,5,5,8 of 28 */ .dt-bands{display:grid;grid-template-columns:5fr 5fr 5fr 5fr 8fr; border:var(--hair);border-top:0;background:var(--bg)} .dt-bandseg{ padding:9px 10px;border-right:var(--hair);min-width:0; font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .dt-bandseg:last-child{border-right:0} .dt-bandseg em{font-style:normal;color:var(--ink);display:block;font-size:10px;margin-top:2px;opacity:.85} .dt-bandseg[data-b="1"]{background:color-mix(in srgb,var(--accent) 5%,var(--panel))} .dt-bandseg[data-b="2"]{background:color-mix(in srgb,var(--accent) 11%,var(--panel))} .dt-bandseg[data-b="3"]{background:color-mix(in srgb,var(--accent) 17%,var(--panel))} .dt-bandseg[data-b="4"]{background:color-mix(in srgb,var(--accent) 23%,var(--panel))} .dt-bandseg[data-b="5"]{background:color-mix(in srgb,var(--accent) 30%,var(--panel))} /* the readout β€” a lab instrument's display, not a hero card */ .dt-readout{ display:grid;grid-template-columns:auto 1fr;gap:0;margin-top:18px; border:var(--hair);background:var(--bg); } .dt-ro-n{ padding:18px 26px;border-right:var(--hair);text-align:center;min-width:132px; display:flex;flex-direction:column;justify-content:center; } .dt-ro-big{ font-family:var(--mono);font-size:44px;font-weight:700;line-height:1; color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em; } .dt-ro-of{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted); text-transform:uppercase;margin-top:7px} .dt-ro-txt{padding:16px 22px;display:flex;flex-direction:column;justify-content:center;gap:5px} .dt-ro-band{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--ink)} .dt-ro-say{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0} @media(max-width:640px){ .dt-readout{grid-template-columns:1fr} .dt-ro-n{border-right:0;border-bottom:var(--hair)} .dt-axis{grid-template-columns:repeat(14,1fr)} .dt-tick{height:44px} .dt-tick:nth-child(14n){border-right:0} .dt-bandseg{white-space:normal} } /* ══ 3. THE SPECIFICATION SHEET ═══════════════════════════════════════ One sticky index rail and one measured column of numbered, ruled rows. Not full-bleed bands, not a tile grid. */ .dt-sheet{background:var(--bg);padding:0 0 20px} .dt-sheet-grid{display:grid;grid-template-columns:1fr;gap:0} @media(min-width:960px){ .dt-sheet-grid{grid-template-columns:210px 1fr;gap:44px;align-items:start} } .dt-idx{display:none} @media(min-width:960px){ .dt-idx{ display:block;position:sticky;top:96px;padding:38px 0 0; border-right:var(--hair);margin-right:-22px;padding-right:22px; } } .dt-idx-h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);padding-bottom:10px;border-bottom:var(--hair);margin-bottom:4px} .dt-idx a{ display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:baseline; font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;text-transform:uppercase; color:var(--muted);text-decoration:none;padding:9px 0;border-bottom:var(--hair); } .dt-idx a:hover{color:var(--ink)} .dt-idx a b{color:var(--ink);font-weight:600} .dt-rows{min-width:0;padding-top:38px} .dt-row{border-top:var(--hair);padding:30px 0 34px} .dt-row:first-child{border-top:0;padding-top:4px} .dt-row-n{ font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin-bottom:10px;display:flex;gap:12px;align-items:center; } .dt-row-n b{color:var(--accent);font-weight:600} .dt-row h2{font-size:clamp(21px,2.6vw,28px);line-height:1.2;color:var(--ink);margin:0 0 10px} .dt-row > p{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:66ch;margin:0 0 18px} /* a real specification table */ .dt-spec{width:100%;border-collapse:collapse;border:var(--hair);font-size:14px} .dt-spec th,.dt-spec td{padding:11px 14px;border-bottom:var(--hair);text-align:left;vertical-align:top} .dt-spec tr:last-child th,.dt-spec tr:last-child td{border-bottom:0} .dt-spec th{ font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);font-weight:600;width:38%;border-right:var(--hair);background:var(--panel); } .dt-spec td{color:var(--ink)} .dt-spec td em{font-style:normal;color:var(--muted)} @media(max-width:560px){.dt-spec th{width:44%}} /* the nine items, as a numbered register */ .dt-items{list-style:none;margin:0;padding:0;border:var(--hair)} .dt-items li{ display:grid;grid-template-columns:44px 1fr;gap:0;border-bottom:var(--hair); } .dt-items li:last-child{border-bottom:0} .dt-items li > span:first-child{ font-family:var(--mono);font-size:11.5px;color:var(--muted);padding:12px 0; text-align:center;border-right:var(--hair);background:var(--panel); font-variant-numeric:tabular-nums; } .dt-items li > span:last-child{padding:12px 14px;color:var(--ink);font-size:14.5px;line-height:1.5} .dt-items li > span:last-child em{font-style:normal;color:var(--muted);font-size:13px;display:block;margin-top:2px} /* the answered-questions register β€” an index, not a card grid */ .dt-reg{border:var(--hair)} .dt-reg a{ display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:baseline; padding:11px 14px;border-bottom:var(--hair);text-decoration:none; } .dt-reg a:last-child{border-bottom:0} .dt-reg a:hover{background:var(--tint)} .dt-reg .r-n{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums} .dt-reg .r-t{color:var(--ink);font-size:14.5px;line-height:1.45} .dt-reg .r-c{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);white-space:nowrap} @media(max-width:640px){.dt-reg a{grid-template-columns:28px 1fr}.dt-reg .r-c{display:none}} /* next steps: three ruled columns, not three photo cards */ .dt-next{display:grid;grid-template-columns:1fr;border:var(--hair)} @media(min-width:760px){.dt-next{grid-template-columns:repeat(3,1fr)}} .dt-next a{ padding:18px 18px 20px;border-bottom:var(--hair);text-decoration:none;display:block; } @media(min-width:760px){ .dt-next a{border-bottom:0;border-right:var(--hair)} .dt-next a:last-child{border-right:0} } @media(max-width:759px){.dt-next a:last-child{border-bottom:0}} .dt-next a:hover{background:var(--tint)} .dt-next .n-k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);display:block;margin-bottom:9px} .dt-next .n-t{color:var(--ink);font-size:16.5px;font-weight:650;display:block;margin-bottom:5px;letter-spacing:-.015em} .dt-next .n-s{color:var(--muted);font-size:13.5px;line-height:1.6;display:block} /* a plain, honest limits list */ .dt-lim{list-style:none;margin:0;padding:0;border:var(--hair)} .dt-lim li{padding:13px 16px;border-bottom:var(--hair);color:var(--muted);font-size:14.5px;line-height:1.6} .dt-lim li:last-child{border-bottom:0} .dt-lim li b{color:var(--ink);font-weight:600} .dt-note{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted); margin-top:14px;line-height:1.7} .dt-note a{color:var(--ink)} /* Urdu: the mono labels are Latin-only by design; Urdu text in them would be set in a monospace face that has no Urdu glyphs. */ html[lang="ur"] .dt-eyebrow,html[lang="ur"] .dt-chips li,html[lang="ur"] .dt-row-n, html[lang="ur"] .dt-idx a,html[lang="ur"] .dt-spec th,html[lang="ur"] .dt-bandseg, html[lang="ur"] .dt-ro-band,html[lang="ur"] .dt-next .n-k,html[lang="ur"] .dt-btn{ font-family:var(--urdu-font);letter-spacing:normal;line-height:1.9; } [dir="rtl"] .dt-idx{border-right:0;border-left:var(--hair);margin-right:0;padding-right:0; margin-left:-22px;padding-left:22px} [dir="rtl"] .dt-spec th,[dir="rtl"] .dt-items li > span:first-child, [dir="rtl"] .dt-tick,[dir="rtl"] .dt-bandseg{border-right:0;border-left:var(--hair)} [dir="rtl"] .dt-spec th{text-align:right} /* The axis is a number line: it reads 0 on the left in every language. */ [dir="rtl"] .dt-axis,[dir="rtl"] .dt-bands,[dir="rtl"] .dt-readout{direction:ltr} [dir="rtl"] .dt-ro-txt{direction:rtl;text-align:right} @media (prefers-reduced-motion:reduce){.dt-tick{transition:none}} /* MISSION_BAND_FIX ------------------------------------------------- */ /* Readable at arm's length on a cheap phone. Was 10.5px and 8px. */ .mb-tick-lbl{ font-size:13.5px !important; line-height:1.5 !important; color:rgba(214,232,228,.88) !important; max-width:none !important; } .mb-tick-src{ font-size:11.5px !important; color:rgba(190,212,208,.62) !important; font-style:normal !important; margin-top:4px !important; } .mb-tick-eyebrow{font-size:10.5px !important;color:rgba(242,139,130,.8) !important} .mb-tick-num{letter-spacing:-.01em} /* Never let the ticker push the page sideways. */ .mission-band,.mb-ticker,.mb-label-row{max-width:100%;overflow-x:hidden} .mb-ticker{flex-wrap:wrap} @media(max-width:900px){ /* One statistic per row. Two columns collided because these labels are sentences, not single words. */ .mb-ticker{flex-direction:column;flex-wrap:nowrap;padding-bottom:0} .mb-tick{ min-width:100% !important; width:100% !important; flex:0 0 auto !important; border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.07); display:flex !important; flex-direction:row !important; align-items:center !important; text-align:left !important; gap:16px; padding:16px 20px !important; } .mb-tick:last-child{border-bottom:0} .mb-tick--live{ min-width:100% !important; width:100% !important; flex:0 0 auto !important; flex-direction:row !important; align-items:center !important; gap:16px !important; padding:16px 20px !important; } .mb-tick-num{ flex:0 0 auto; min-width:104px; font-size:30px !important; text-align:left !important; } .mb-tick-lbl,.mb-tick-src{text-align:left !important;width:auto !important} /* Label and source share the remaining width instead of overlapping. */ .mb-tick > .mb-tick-lbl{flex:1;min-width:0} .mb-prog,.mb-tick--live .mb-prog{width:100% !important;max-width:150px} .mb-label-row{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 20px 4px} } @media(max-width:420px){ .mb-tick,.mb-tick--live{padding:14px 16px !important;gap:12px} .mb-tick-num{min-width:88px;font-size:26px !important} .mb-tick-lbl{font-size:13px !important} } /* LIVE_TICK_FIX ---------------------------------------------------- */ /* The live row has four children on one line, which squeezed its label off the right edge. Wrap it and order them deliberately. */ @media(max-width:900px){ .mb-tick--live{ flex-wrap:wrap !important; align-items:center !important; row-gap:6px !important; padding:16px 20px !important; } .mb-tick--live .mb-tick-eyebrow{ order:1; flex:0 0 100%; width:100%; text-align:left !important; margin:0 0 2px !important; } .mb-tick--live .mb-tick-num{ order:2; flex:0 0 auto; min-width:0 !important; margin-right:14px; font-size:30px !important; } .mb-tick--live .mb-tick-lbl{ order:3; flex:1 1 auto; min-width:0; text-align:left !important; margin:0 !important; } /* Decorative, so it sits last and spans the row. */ .mb-tick--live .mb-prog{ order:4; flex:0 0 100%; width:100% !important; max-width:none !important; margin:4px 0 0 !important; } } /* The hope strip was clipped at both edges with no sign it scrolled. Its classes are .mb-hope-strip / -item / -num / -txt / -div. */ @media(max-width:900px){ .mb-hope-strip{ display:flex !important; flex-wrap:wrap !important; gap:8px 18px !important; overflow:visible !important; animation:none !important; transform:none !important; padding:14px 20px !important; justify-content:flex-start !important; } .mb-hope-item{ padding:0 !important; white-space:normal !important; font-size:13.5px !important; flex:0 1 auto; } .mb-hope-txt{color:rgba(205,232,220,.85) !important;font-size:13.5px !important} .mb-hope-num{font-size:15px !important} .mb-hope-div{display:none !important} } /* Nothing in this band may push the page sideways. */ .mission-band *{max-width:100%} .mission-band{overflow-x:clip} .dp{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;align-items:center;gap:12px; padding:10px 16px;background:rgba(10,18,32,.97);backdrop-filter:blur(12px); border-top:1px solid rgba(122,212,163,.25);box-shadow:0 -6px 26px rgba(0,0,0,.4)} .dp.on{display:flex} .dp-btn{background:var(--accent);color:#052015;border:0;border-radius:50%;width:42px;height:42px; font-size:15px;cursor:pointer;flex-shrink:0;line-height:1;font-family:inherit} .dp-x{background:transparent;color:rgba(255,255,255,.5);width:32px;height:32px;font-size:20px} .dp-x:hover{color:#fff} .dp-meta{min-width:0;flex:0 1 auto} .dp-title{color:#eaf3ef;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dp-sub{color:rgba(200,225,215,.65);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dp-seek{flex:1;min-width:60px;accent-color:var(--accent);height:4px;cursor:pointer} .dp-time{color:rgba(200,225,215,.6);font-size:12px;font-variant-numeric:tabular-nums;flex-shrink:0} @media(max-width:640px){ .dp{gap:9px;padding:9px 12px;flex-wrap:wrap} .dp-meta{flex:1 1 auto;order:1} .dp-btn{order:0} .dp-x{order:2} .dp-seek{order:3;flex:1 1 100%;min-width:0} .dp-time{order:4;display:none} .dp-title{font-size:13px} } /* The floating Talk-to-Amaan bubble must not sit under the player. */ /* #zbtn, not #zfab - a rename left this aimed at an id that no longer exists, so the player was measured covering the whole button. */ body.dp-open .chatwidget,body.dp-open #zbtn{bottom:96px} /* BTN_FOOTER: the button is fixed bottom-right and overlaps whatever is in that corner of the footer - a different item on every page. It leaves once the footer is on screen, where the footer's own, bigger Talk to Amaan button takes over. */ /* No fade. The class was correct on every page, but the transition left a 180ms window where the button was half-visible over footer text, and pages that reflow after load (lazy images changing the scroll position) re-entered that window repeatedly. An instant swap has no half-state. */ body.at-footer #zbtn{opacity:0;visibility:hidden;pointer-events:none} /* The bar is 74px at every width, not only under 640px, and it was reserving 34px of that - leaving the last row permanently beneath it. */ body.dp-open{padding-bottom:132px} /* Mobile header-row overlap fix (found in visual QA audit 2026-09-18): on narrow viewports flexbox crushed .langtog's own box down to ~2px (flex-shrink:1, no min width) while its EN/Urdu