/* 4AB hub shell — injected chrome for imported pages. Page design untouched; this only adds the shared menu + floaters. */ :root{ --navy:#0A2B63;--ink:#0F2039;--body:#3E5068;--muted:#5F6F87; --blue:#0862F9;--blue-ink:#0A50C7;--blue-mid:#609CF2;--sky:#EAF3FE;--sky-2:#D6E8FD; --gold:#0862F9;--gold-ink:#0A50C7;--gold-soft:#C7DDFB;--gold-wash:#EAF3FE; /* legacy names → primary blue */ --purple:#6D3BBF;--purple-soft:#F3EDFF; --paper:#F3F6FB;--cream:#F7F9FD;--card:#FFFFFF;--line:#E3E9F2;--hair:#EDF1F7; --c1:#F59E0B;--c2:#0862F9;--c3:#10B981;--c4:#8B5CF6;--c5:#0D9488;--c6:#EC4899;--c7:#F97316;--c8:#06B6D4;--c9:#6366F1; --n1:#B45309;--n2:#0A50C7;--n3:#15803D;--n4:#6D28D9;--n5:#0F766E;--n6:#BE185D;--n7:#C2410C;--n8:#0E7490;--n9:#4338CA; --l1:#FEF3C7;--l2:#DCEBFF;--l3:#D1FAE5;--l4:#EDE9FE;--l5:#CCFBF1;--l6:#FCE7F3;--l7:#FFEDD5;--l8:#CFFAFE;--l9:#E0E7FF; --r-sm:12px;--r-md:16px;--r-lg:22px;--shadow:0 4px 18px rgba(10,43,99,.06);--lift:0 14px 34px rgba(10,43,99,.12); --font-ui:"Roboto","Roboto FB","Roboto FB A","Roboto FB N","Roboto FB D",system-ui,sans-serif;--font-brand:"Poppins","Poppins FB","Poppins FB N","Poppins FB D",sans-serif;--font-display:"Poppins","Poppins FB","Poppins FB N","Poppins FB D",sans-serif;--font-hi:"Noto Sans Devanagari",sans-serif; --sb:236px; } /* 2026-10-02 (Fable, CLS): metric-matched stand-ins for Roboto and Poppins. While the Google fonts are still downloading the browser draws the page in a local face; a wider local face wraps lines that the real font does not, so pills, chips and ledes jump when the swap happens. Each stand-in is a local font scaled with size-adjust so its text takes the same width as the real font (ratios measured in headless Chromium here: Roboto = 1.004x Arial/Helvetica/Nimbus, 0.946x Noto Sans, 0.881x DejaVu Sans; Poppins Bold = 1.07x Arial Bold, 1.02x Noto Sans Bold, 0.893x DejaVu Sans Bold; Poppins SemiBold = 1.20x / 1.17x / 1.00x of the same bold faces; Poppins Regular/Medium = 1.14x / 1.07x / 1.00x of the regular faces), with ascent/descent overrides so the line box is the same height too (Roboto 92.77%/24.41%/0, Poppins 105%/35%/10%, divided by the size-adjust). A family whose local() font is not installed is skipped, so the stack falls through to the next one; Android has Roboto itself, which the first face picks up unchanged. */ @font-face{font-family:"Roboto FB";src:local("Roboto"),local("Roboto-Regular");font-weight:100 900;ascent-override:92.77%;descent-override:24.41%;line-gap-override:0%} @font-face{font-family:"Roboto FB A";src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("HelveticaNeue"),local("Helvetica"),local("Liberation Sans"),local("Nimbus Sans");font-weight:100 900;size-adjust:100.4%;ascent-override:92.4%;descent-override:24.3%;line-gap-override:0%} @font-face{font-family:"Roboto FB N";src:local("Noto Sans"),local("NotoSans-Regular"),local("Droid Sans");font-weight:100 900;size-adjust:94.6%;ascent-override:98.1%;descent-override:25.8%;line-gap-override:0%} @font-face{font-family:"Roboto FB D";src:local("DejaVu Sans"),local("DejaVuSans");font-weight:100 900;size-adjust:88.1%;ascent-override:105.3%;descent-override:27.7%;line-gap-override:0%} @font-face{font-family:"Poppins FB";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Liberation Sans Bold"),local("Nimbus Sans Bold");font-weight:700 900;size-adjust:107%;ascent-override:98.1%;descent-override:32.7%;line-gap-override:9.3%} @font-face{font-family:"Poppins FB";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Liberation Sans Bold"),local("Nimbus Sans Bold");font-weight:600 699;size-adjust:120%;ascent-override:87.5%;descent-override:29.2%;line-gap-override:8.3%} @font-face{font-family:"Poppins FB";src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("HelveticaNeue"),local("Helvetica"),local("Liberation Sans"),local("Nimbus Sans");font-weight:100 599;size-adjust:114%;ascent-override:92.1%;descent-override:30.7%;line-gap-override:8.8%} @font-face{font-family:"Poppins FB N";src:local("Noto Sans Bold"),local("NotoSans-Bold"),local("Droid Sans Bold");font-weight:700 900;size-adjust:102%;ascent-override:102.9%;descent-override:34.3%;line-gap-override:9.8%} @font-face{font-family:"Poppins FB N";src:local("Noto Sans Bold"),local("NotoSans-Bold"),local("Droid Sans Bold");font-weight:600 699;size-adjust:117%;ascent-override:89.7%;descent-override:29.9%;line-gap-override:8.5%} @font-face{font-family:"Poppins FB N";src:local("Noto Sans"),local("NotoSans-Regular"),local("Droid Sans");font-weight:100 599;size-adjust:107.4%;ascent-override:97.8%;descent-override:32.6%;line-gap-override:9.3%} @font-face{font-family:"Poppins FB D";src:local("DejaVu Sans Bold"),local("DejaVuSans-Bold");font-weight:700 900;size-adjust:89.3%;ascent-override:117.6%;descent-override:39.2%;line-gap-override:11.2%} @font-face{font-family:"Poppins FB D";src:local("DejaVu Sans Bold"),local("DejaVuSans-Bold");font-weight:600 699;size-adjust:100%;ascent-override:105%;descent-override:35%;line-gap-override:10%} @font-face{font-family:"Poppins FB D";src:local("DejaVu Sans"),local("DejaVuSans");font-weight:100 599;size-adjust:100%;ascent-override:105%;descent-override:35%;line-gap-override:10%} .k1{--accent:var(--c1);--accent-ink:var(--n1);--wash:var(--l1)}.k2{--accent:var(--c2);--accent-ink:var(--n2);--wash:var(--l2)}.k3{--accent:var(--c3);--accent-ink:var(--n3);--wash:var(--l3)}.k4{--accent:var(--c4);--accent-ink:var(--n4);--wash:var(--l4)}.k5{--accent:var(--c5);--accent-ink:var(--n5);--wash:var(--l5)}.k6{--accent:var(--c6);--accent-ink:var(--n6);--wash:var(--l6)}.k7{--accent:var(--c7);--accent-ink:var(--n7);--wash:var(--l7)}.k8{--accent:var(--c8);--accent-ink:var(--n8);--wash:var(--l8)}.k9{--accent:var(--c9);--accent-ink:var(--n9);--wash:var(--l9)} .hs-nav{font:14px/1.5 Roboto,system-ui,sans-serif;color:#3E5068;box-sizing:border-box} .hs-nav *{box-sizing:border-box} .hs-nav .k1{--accent:var(--c1);--accent-ink:var(--n1);--wash:var(--l1)} .hs-nav .k2{--accent:var(--c2);--accent-ink:var(--n2);--wash:var(--l2)} .hs-nav .k3{--accent:var(--c3);--accent-ink:var(--n3);--wash:var(--l3)} .hs-nav .k4{--accent:var(--c4);--accent-ink:var(--n4);--wash:var(--l4)} .hs-nav .k5{--accent:var(--c5);--accent-ink:var(--n5);--wash:var(--l5)} .hs-nav .k6{--accent:var(--c6);--accent-ink:var(--n6);--wash:var(--l6)} .hs-nav .k7{--accent:var(--c7);--accent-ink:var(--n7);--wash:var(--l7)} .hs-nav .k8{--accent:var(--c8);--accent-ink:var(--n8);--wash:var(--l8)} .hs-nav .k9{--accent:var(--c9);--accent-ink:var(--n9);--wash:var(--l9)} .hs-nav{position:sticky;z-index:45;top:16px;height:calc(100vh - 32px);overflow:auto;background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:18px 12px 14px;display:flex;flex-direction:column} .hs-nav .brand{display:flex;align-items:center;justify-content:space-between;padding:0 8px 16px} .hs-nav .logo{display:flex;align-items:center;gap:9px;font-family:var(--font-brand);font-weight:700;color:var(--navy);font-size:19px;line-height:1} .hs-nav .logo .ga-mark{width:34px;height:34px;border-radius:10px;object-fit:cover;flex:none} .hs-nav .logo i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--navy),var(--blue));display:grid;place-items:center;color:#fff;font-style:normal;font-size:12px;font-weight:700} .hs-nav .logo small{display:block;font:500 9.5px var(--font-ui);color:var(--blue-ink);letter-spacing:.06em;text-transform:uppercase;margin-top:3px} .hs-nav .collapse{color:var(--muted);font-size:18px} .hs-nav >a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font:500 14px var(--font-ui);color:var(--body)} .hs-nav >a i, .hs-nav summary i{width:22px;text-align:center;font-style:normal;font-size:16px;color:var(--muted)} .hs-nav >a.on, .hs-nav details[open] summary{color:var(--blue);background:var(--sky);box-shadow:inset -3px 0 0 var(--blue)} .hs-nav >a.on i, .hs-nav details[open] summary i{color:var(--blue)} .hs-nav details{margin-top:2px} .hs-nav summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font:500 14px var(--font-ui);color:var(--body)} .hs-nav summary::-webkit-details-marker{display:none} .hs-nav summary::after{content:"›";margin-left:auto;color:var(--muted);transition:.2s;font-size:17px} .hs-nav details[open] summary::after{transform:rotate(90deg)} .hs-nav details a{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 46px;border-radius:10px;font-size:13px;color:var(--body)} .hs-nav details a:hover{background:var(--paper)} .hs-nav details a.on{color:var(--blue);font-weight:600} .hs-nav .soon{margin-left:auto;font:600 9px var(--font-ui);letter-spacing:.06em;color:var(--n1);background:var(--l1);padding:2px 6px;border-radius:999px} .hs-nav .sub a{padding-left:62px;font-size:12.5px} .hs-nav .foot{margin-top:auto;padding:14px 4px 0;display:flex;flex-direction:column;gap:8px} .hs-nav .foot .btn{width:100%} .hs-nav .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:10px 18px;font:600 13.5px var(--font-ui);white-space:nowrap;cursor:pointer;border:1px solid transparent} .hs-nav .btn-navy{background:var(--navy);color:#fff} .hs-nav .btn-gold, .hs-nav .btn-blue{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(8,98,249,.28)} .hs-nav .btn-line{border-color:var(--blue);color:var(--blue);background:var(--card)} .hs-nav .btn-white{background:#fff;color:var(--navy)} .hs-nav .btn-sm{padding:6px 12px;font-size:12px} .hs-nav /* ===== 3-level menu clarity: L1 group › L2 product (guide rail) › L3 section (dotted rail, .hs-nav smaller) ===== */ .side details>a{position:relative;margin-left:22px;padding-left:22px;border-left:2px solid var(--sky-2)} .hs-nav details>a::before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--sky-2);transform:translateY(-50%)} .hs-nav details>a.on{border-left-color:var(--blue);background:var(--sky)} .hs-nav details>a.on::before{background:var(--blue)} .hs-nav details>a.on::after{content:"▾";margin-left:auto;font-size:11px;color:var(--blue)} .hs-nav .sub{margin-left:22px;border-left:2px dotted var(--sky-2);padding:2px 0 4px} .hs-nav .sub a{position:relative;margin-left:0;padding:5px 10px 5px 30px;border-left:0;font-size:12.5px;color:var(--muted)} .hs-nav .sub a::before{content:"–";position:absolute;left:14px;color:var(--blue-mid);background:none;width:auto;height:auto;transform:none;top:auto} .hs-nav .sub a:hover{color:var(--blue);background:transparent} .hs-nav .lvl{display:block;padding:10px 12px 4px;font:600 9.5px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .hs-nav /* ===== Visme-style MEGA PANEL — opens beside the sidebar on desktop when a group is open ===== */ .mega{display:none} .hs-nav{position:fixed;left:14px;top:14px;width:236px;height:calc(100vh - 28px);overflow:auto;background:#fff;border-radius:20px;box-shadow:0 4px 18px rgba(10,43,99,.10);padding:18px 12px 14px;display:flex;flex-direction:column;z-index:2147483000;transform:none} .hs-nav a{text-decoration:none} .hs-nav .brand{display:flex;align-items:center;justify-content:space-between;padding:0 8px 16px} .hs-nav .logo{display:flex;align-items:center;gap:9px;font:700 19px Poppins,sans-serif;color:#0A2B63;line-height:1} .hs-nav .logo i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#0A2B63,#0862F9);display:grid;place-items:center;color:#fff;font-style:normal;font-size:12px;font-weight:700} .hs-nav .logo small{display:block;font:500 9.5px Roboto,sans-serif;color:#0A50C7;letter-spacing:.06em;text-transform:uppercase;margin-top:3px} .hs-nav .foot{margin-top:auto;padding:14px 4px 0;display:flex;flex-direction:column;gap:8px} .hs-nav .foot .btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:10px 18px;font:600 13.5px Roboto,sans-serif;text-decoration:none} .hs-nav .btn-white{background:#fff;color:#0A2B63;border:1px solid #E3E9F2}.hs-nav .btn-blue{background:#0862F9;color:#fff} .hs-fab{display:none;position:fixed;left:12px;bottom:14px;z-index:2147483001;background:#0A2B63;color:#fff;border:0;border-radius:999px;padding:11px 16px;font:600 13px Roboto,sans-serif;box-shadow:0 8px 24px rgba(10,43,99,.3);cursor:pointer} .hs-float{position:fixed;right:16px;bottom:96px;z-index:2147483000;display:flex;flex-direction:column;gap:8px;align-items:flex-end} .hs-float a{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 14px;font:600 13px Roboto,sans-serif;text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.18)} .hs-float .wa{background:#25D366;color:#0b3d20}.hs-float .call{background:#0A2B63;color:#fff} .hs-credit{background:#0A2B63;color:#DCE6F5;font:12.5px/1.5 Roboto,sans-serif;padding:12px 24px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:0} .hs-credit a{color:#8FC0FF;text-decoration:none} /* per-site tone: the menu takes the page's own palette instead of the hub's blue-on-white */ html[data-hs-theme="plum"] .hs-nav{background:#1a1230;color:#D9D2EA;box-shadow:0 8px 28px rgba(0,0,0,.45)} html[data-hs-theme="plum"] .hs-nav .logo,html[data-hs-theme="plum"] .hs-nav .logo small{color:#e9bd6a} html[data-hs-theme="plum"] .hs-nav .logo i{background:linear-gradient(135deg,#6d3bbf,#e9bd6a);color:#1a1230} html[data-hs-theme="plum"] .hs-nav>a,html[data-hs-theme="plum"] .hs-nav summary,html[data-hs-theme="plum"] .hs-nav details a,html[data-hs-theme="plum"] .hs-nav .lvl{color:#D9D2EA} html[data-hs-theme="plum"] .hs-nav>a i,html[data-hs-theme="plum"] .hs-nav summary i{color:#e9bd6a} html[data-hs-theme="plum"] .hs-nav>a.on,html[data-hs-theme="plum"] .hs-nav details[open] summary{background:#2c1a44;color:#e9bd6a;box-shadow:inset -3px 0 0 #e9bd6a} html[data-hs-theme="plum"] .hs-nav details>a{border-left-color:#3a2a55}html[data-hs-theme="plum"] .hs-nav details>a::before{background:#3a2a55} html[data-hs-theme="plum"] .hs-nav details>a.on{border-left-color:#e9bd6a;background:#2c1a44;color:#e9bd6a}html[data-hs-theme="plum"] .hs-nav details>a.on::before{background:#e9bd6a} html[data-hs-theme="plum"] .hs-nav details a:hover{background:#221336} html[data-hs-theme="plum"] .hs-nav .sub{border-left-color:#3a2a55}html[data-hs-theme="plum"] .hs-nav .sub a{color:#B9AFD1} html[data-hs-theme="plum"] .hs-nav .btn-white{background:#221336;color:#e9bd6a;border-color:#3a2a55}html[data-hs-theme="plum"] .hs-nav .btn-blue{background:#6d3bbf} html[data-hs-theme="plum"] .hs-fab{background:#6d3bbf} html[data-hs-theme="navy"] .hs-nav{background:#0D1524;color:#D7DEEA;box-shadow:0 8px 28px rgba(0,0,0,.45)} html[data-hs-theme="navy"] .hs-nav .logo,html[data-hs-theme="navy"] .hs-nav .logo small{color:#c9a96a} html[data-hs-theme="navy"] .hs-nav .logo i{background:linear-gradient(135deg,#1f3a6b,#c9a96a);color:#0D1524} html[data-hs-theme="navy"] .hs-nav>a,html[data-hs-theme="navy"] .hs-nav summary,html[data-hs-theme="navy"] .hs-nav details a,html[data-hs-theme="navy"] .hs-nav .lvl{color:#D7DEEA} html[data-hs-theme="navy"] .hs-nav>a i,html[data-hs-theme="navy"] .hs-nav summary i{color:#c9a96a} html[data-hs-theme="navy"] .hs-nav>a.on,html[data-hs-theme="navy"] .hs-nav details[open] summary{background:#16233a;color:#c9a96a;box-shadow:inset -3px 0 0 #c9a96a} html[data-hs-theme="navy"] .hs-nav details>a{border-left-color:#2a3a55}html[data-hs-theme="navy"] .hs-nav details>a::before{background:#2a3a55} html[data-hs-theme="navy"] .hs-nav details>a.on{border-left-color:#c9a96a;background:#16233a;color:#c9a96a}html[data-hs-theme="navy"] .hs-nav details>a.on::before{background:#c9a96a} html[data-hs-theme="navy"] .hs-nav details a:hover{background:#101a2c} html[data-hs-theme="navy"] .hs-nav .sub{border-left-color:#2a3a55}html[data-hs-theme="navy"] .hs-nav .sub a{color:#A9B6CC} html[data-hs-theme="navy"] .hs-nav .btn-white{background:#101a2c;color:#c9a96a;border-color:#2a3a55}html[data-hs-theme="navy"] .hs-nav .btn-blue{background:#1f3a6b} html[data-hs-theme="navy"] .hs-fab{background:#1f3a6b} html[data-hs-theme="cream"] .hs-nav{background:#FFFFFF;color:#1E2740;border:1px solid #E7E2D6} html[data-hs-theme="cream"] .hs-nav .logo,html[data-hs-theme="cream"] .hs-nav .logo small{color:#9A7532} html[data-hs-theme="cream"] .hs-nav .logo i{background:linear-gradient(135deg,#1E2740,#9A7532);color:#fff} html[data-hs-theme="cream"] .hs-nav>a.on,html[data-hs-theme="cream"] .hs-nav details[open] summary{background:#F7F4EC;color:#9A7532;box-shadow:inset -3px 0 0 #9A7532} html[data-hs-theme="cream"] .hs-nav details>a.on{color:#9A7532;border-left-color:#9A7532}html[data-hs-theme="cream"] .hs-nav details>a.on::before{background:#9A7532} html[data-hs-theme="cream"] .hs-nav .btn-blue{background:#1E2740}html[data-hs-theme="cream"] .hs-fab{background:#1E2740} /* the hub's own 3-level footer, appended to every imported page (the page's own footer/credit is hidden per site below) */ .hs-foot{font:14px/1.5 Roboto,system-ui,sans-serif;color:#3E5068;box-sizing:border-box;margin:24px 14px 14px;position:relative;z-index:5} .hs-foot *{box-sizing:border-box}.hs-foot a{text-decoration:none} .hs-foot footer{margin-top:18px;background:var(--card);border-radius:20px;box-shadow:var(--shadow);overflow:hidden} .hs-foot .f1{padding:26px 24px;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:22px} .hs-foot .f1 h5{margin:0 0 8px;font:600 12px var(--font-ui);color:var(--ink)}.hs-foot .f1 a{display:block;font-size:13px;color:var(--body);margin-bottom:5px}.hs-foot .f1 p{margin:6px 0 0;font-size:13px;color:var(--muted);max-width:36ch} .hs-foot .f2{border-top:1px solid var(--hair);background:var(--sky)}.hs-foot .f2 .in{padding:14px 24px;display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;font-size:12.5px}.hs-foot .f2 b{color:var(--navy);font-weight:600;margin-right:4px}.hs-foot .f2 a{color:var(--body);border-bottom:1px dotted var(--blue-mid)} .hs-foot .f3{background:var(--navy);color:#DCE6F5}.hs-foot .f3 .in{padding:12px 24px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px}.hs-foot .f3 a{color:#8FC0FF} @media (max-width:1100px){.hs-foot .f1{grid-template-columns:1fr 1fr}} @media (max-width:600px){.hs-foot .f1{grid-template-columns:1fr}} .hs-foot .logo{display:flex;align-items:center;gap:9px;font:700 19px Poppins,sans-serif;color:#0A2B63;line-height:1} .hs-foot .logo i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#0A2B63,#0862F9);display:grid;place-items:center;color:#fff;font-style:normal;font-size:12px;font-weight:700} .hs-foot .logo small{display:block;font:500 9.5px Roboto,sans-serif;color:#0A50C7;letter-spacing:.06em;text-transform:uppercase;margin-top:3px} /* floaters are OFF everywhere for now (Aniket 2026-09-18): the page's own call/WhatsApp bars and the chat bubble too */ #gdContactBar,.qab,#zsiq_float,.zsiq_floatmain,[id^="zsiq"]{display:none !important} /* the hub content box: the page lives inside it, hub page tone outside — same frame as every hub page; no white gap under the footer */ html.hs-pc,body.hs-boxed{background:#EEF4FF !important} body.hs-boxed{margin:0 !important;padding-bottom:0 !important;min-height:100vh} .hs-box{margin:14px 14px 0;border-radius:20px;box-shadow:0 4px 18px rgba(10,43,99,.10);overflow:clip;min-height:60vh;position:relative} /* clip, not hidden: hidden would break the page's own sticky header/chapter bar */ .hs-foot{margin-bottom:0;padding-bottom:14px}.hs-foot footer{margin-bottom:0} /* the menu groups are plain rows, never boxed — a page's own details/summary styling must not leak in */ .hs-nav details{border:0 !important;background:transparent !important;box-shadow:none !important;padding:0 !important;margin:2px 0 0 !important} .hs-nav summary{border:0 !important;padding:10px 12px !important}.hs-nav details:not([open]) summary{background:transparent !important;box-shadow:none !important} .hs-nav summary::marker,.hs-nav summary::-webkit-details-marker{display:none} /* ⤢ full-window: hides the hub chrome so the tool fills the screen; ⤡ brings it back */ .hs-full-btn{position:fixed;top:10px;right:10px;z-index:2147483002;width:36px;height:36px;border-radius:10px;border:1px solid #E3E9F2;background:#fff;color:#0A2B63;font-size:18px;line-height:34px;text-align:center;cursor:pointer;box-shadow:0 4px 14px rgba(10,43,99,.14)} html.hs-full .hs-nav,html.hs-full .hs-foot,html.hs-full .hs-fab{display:none !important} /* menus-rule (owner 2026-10-16): the expand / full-screen control lives ONLY in the left panel (.hs-full-in, .hs-full-link). The floating button is kept solely as the way OUT of full screen, where the panel is hidden. */ .hs-full-btn{display:none !important} html.hs-full .hs-full-btn{display:inline-grid !important} html.hs-full body,html.hs-full.hs-pc body,html.hs-full.hs-pc.hs-mini body{padding-left:0 !important;background:transparent !important} html.hs-full .hs-box{margin:0;border-radius:0;box-shadow:none} /* MINI (icon-only) rail — default on pages that carry their OWN side menu (Aniket: "do se jyada aside menu hone pe pahle ka kebal icon dikhe, expand button ho") */ .hs-nav .collapse{cursor:pointer;user-select:none} .hs-nav.mini{width:64px;padding:14px 8px;overflow:visible} .hs-nav.mini .brand{flex-direction:column;gap:8px;padding:0 0 12px} .hs-nav.mini .logo div,.hs-nav.mini .lvl,.hs-nav.mini .foot,.hs-nav.mini details>a,.hs-nav.mini .sub,.hs-nav.mini .mega,.hs-nav.mini .badge,.hs-nav.mini .soon{display:none !important} .hs-nav.mini>a,.hs-nav.mini summary{font-size:0 !important;padding:10px 0 !important;justify-content:center;text-align:center;box-shadow:none !important} .hs-nav.mini>a i,.hs-nav.mini summary i{font-size:18px !important;margin:0 !important} .hs-nav.mini summary::after,.hs-nav.mini summary::before{display:none} .hs-nav.mini details{margin:0} @media (min-width:1100px){ html.hs-pc body{padding-left:252px !important} html.hs-pc.hs-mini body{padding-left:92px !important} } /* 2026-10-02 (Fable, CLS; site-wide after the periodic-table trial): .hs-box carries the 14px top margin of the content box. When is not a block formatting context that margin collapses THROUGH , and the body node itself drops 14px the moment hub-shell wraps the page (+0.010 CLS on every hub page at >=1100). flow-root makes body a BFC without making it a scroll container, so position:sticky headers still stick to the viewport (overflow-x:hidden on body would break them - see the <=1099 gutter block). */ @media (min-width:1100px){ body.hs-boxed{display:flow-root} } /* hs-mega-v13: 3-layer menu on click (imported pages) — the panel flies out to the right of the rail, also from the icon-only rail */ .hs-nav .mega .products{background:var(--sky);padding:18px 16px} .hs-nav .mega h6{margin:0 0 12px;font:600 12px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .hs-nav .mega .products a{display:flex;gap:12px;align-items:center;padding:8px 8px;border-radius:12px;margin:0;border:0} .hs-nav .mega .products a::before{display:none} .hs-nav .mega .products a:hover,.mega .products a.on{background:#fff} .hs-nav .mega .products i{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:18px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#fff));color:#fff;flex:none} .hs-nav .mega .products b{display:block;font:600 13.5px var(--font-ui);color:var(--ink)} .hs-nav .mega .products small{display:block;font-size:11px;color:var(--muted)} .hs-nav .mega .cols{padding:18px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 18px;align-content:start} .hs-nav .mega .cols h6{color:var(--ink);text-transform:none;letter-spacing:0;font-size:13px} .hs-nav .mega .cols a{display:block;padding:5px 0;margin:0;border:0;font-size:12.5px;color:var(--body)} .hs-nav .mega .cols a::before{display:none} .hs-nav .mega .cols a:hover{color:var(--blue);background:none} .hs-nav .mega .new{padding:18px 16px;border-left:1px solid var(--hair)} .hs-nav .mega .new .thumb{height:110px;border-radius:12px;background:linear-gradient(135deg,var(--c4),var(--c6));margin-bottom:10px} .hs-nav .mega .new b{display:block;font:600 13px var(--font-ui);color:var(--ink)} .hs-nav .mega .new a{display:inline-block;margin-top:6px;padding:0;border:0;color:var(--blue);text-decoration:underline;font-size:12px} .hs-nav .mega .new a::before{display:none} @media (min-width:1100px){ .hs-nav details.panel[open] .mega,.hs-nav.mini details.panel[open] .mega{display:grid !important;/* hs-panel-v14 */position:fixed;left:266px;top:14px;z-index:2147483002;width:min(880px,calc(100vw - 300px));max-height:calc(100vh - 28px);overflow:auto;grid-template-columns:270px 1fr 220px;background:#fff;color:#1E2740;border-radius:18px;box-shadow:0 18px 48px rgba(10,43,99,.22);border:1px solid #E3E9F2} .hs-nav.mini details.panel[open] .mega{left:92px} .hs-nav .mega .products a,.hs-nav .mega .cols a,.hs-nav .mega .new a{border-left:0;color:#1E2740}.hs-nav .mega .cols a{color:#3E5068} .hs-nav .mega .products{background:#F1F6FF}.hs-nav .mega .products a:hover,.hs-nav .mega .products a.on{background:#fff} .hs-nav .mega h6{color:#6F7B8F}.hs-nav .mega .cols h6{color:#1E2740} } @media (max-width:1099px){ .hs-nav details[open] .mega{display:none !important} } @media (max-width:1099px){ .hs-nav{transform:translateX(-120%);transition:.25s;width:280px;left:12px;top:12px} .hs-nav.open{transform:none} .hs-fab{display:inline-flex} .hs-float{bottom:76px;right:12px} .hs-float a span{display:none} } /* ============================================================================ v20 — Aniket 2026-09-19 3 logo image was unbounded outside the rail (footer showed it at natural size) 8 no left-to-right slide on load: layout classes land before first paint 9 footer rebuilt from the menu data — every group is listed 15 mobile footer: one row, three columns, vertical rules 17 premium line icons; the rail scrolls in the middle so Help never falls out ========================================================================= */ /* --- 3. the brand mark is ALWAYS 34px, wherever it appears (rail, footer, page) --- */ .ga-mark{width:34px;height:34px;min-width:34px;max-width:34px;min-height:34px;max-height:34px; border-radius:10px;object-fit:cover;object-position:center;flex:0 0 34px;display:block} .hs-foot .logo .ga-mark,.hs-nav .logo .ga-mark{width:34px;height:34px;flex:0 0 34px} .hs-foot .logo,.hs-nav .logo{white-space:nowrap;text-decoration:none} .hs-foot .logo div,.hs-nav .logo div{white-space:nowrap} .hs-foot .logo small,.hs-nav .logo small{white-space:nowrap} /* --- 8. nothing animates during the first paint --- */ html.hs-boot .hs-nav,html.hs-boot .hs-box,html.hs-boot body,html.hs-boot .hs-foot{transition:none !important;animation:none !important} html.hs-boot *{animation-duration:0s !important} /* --- 17. premium icons + a rail that scrolls in the middle --- */ .hs-nav{padding:18px 12px 12px;overflow:hidden} .hs-nav .hs-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0 -4px;padding:0 4px; scrollbar-width:thin;scrollbar-color:#CBD8EA transparent} .hs-nav .hs-scroll::-webkit-scrollbar{width:6px} .hs-nav .hs-scroll::-webkit-scrollbar-thumb{background:#CBD8EA;border-radius:99px} .hs-nav .hs-scroll::-webkit-scrollbar-track{background:transparent} .hs-nav .foot{flex:none;margin-top:10px;border-top:1px solid var(--hair);padding-top:12px} .hs-nav .foot .btn{text-decoration:none} .hs-nav .collapse{background:none;border:0;padding:4px;line-height:1;cursor:pointer;color:var(--muted);font-size:16px;border-radius:8px} .hs-nav .collapse:hover{background:var(--paper);color:var(--blue)} .hs-nav >a i,.hs-nav summary i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none} .hs-nav >a i svg,.hs-nav summary i svg{width:19px;height:19px;display:block} .hs-nav .mega .products i{display:grid;place-items:center} .hs-nav .mega .products i svg{width:19px;height:19px;display:block;color:#fff} .hs-nav .mega .products b .soon{margin-left:6px} /* mini rail: icons stay centred, the list still scrolls, Help stays inside */ .hs-nav.mini{width:64px;padding:14px 6px 10px;overflow:hidden} .hs-nav.mini .hs-scroll{margin:0;padding:0} .hs-nav.mini .brand{padding:0 0 10px} .hs-nav.mini .logo .ga-mark{width:32px;height:32px;flex:0 0 32px} .hs-nav.mini .foot{padding-top:10px} .hs-nav.mini .foot .btn{padding:9px 0;font-size:0} .hs-nav.mini .foot .btn::after{content:"\2192";font-size:14px} .hs-nav.mini .foot .btn-white{display:none} .hs-nav.mini >a,.hs-nav.mini summary{border-radius:12px;margin-bottom:2px} .hs-nav.mini >a.on,.hs-nav.mini details[open] summary{box-shadow:none !important;background:var(--sky)} /* --- 9 + 15. footer: desktop stays exactly as approved; mobile is one row of three --- */ .hs-foot .f1 .fbrand p{max-width:34ch} @media (max-width:1100px){.hs-foot .f1{grid-template-columns:1fr 1fr 1fr}.hs-foot .f1 .fbrand{grid-column:1/-1}} @media (max-width:600px){ .hs-foot{margin:16px 8px 0} .hs-foot .f1{grid-template-columns:repeat(3,1fr);gap:0 0;padding:20px 12px} .hs-foot .f1 .fbrand{grid-column:1/-1;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--hair)} .hs-foot .f1 >div:not(.fbrand){padding:0 8px} .hs-foot .f1 >div:not(.fbrand)+div{border-left:1px solid var(--hair)} .hs-foot .f1 h5{font-size:11px;margin-bottom:7px} .hs-foot .f1 a{font-size:11.5px;margin-bottom:7px;line-height:1.35} .hs-foot .f2 .in,.hs-foot .f3 .in{padding:12px 14px} .hs-foot .f3 .in{flex-direction:column;gap:6px;text-align:left} } /* a page that keeps its own credit line gets no hub footer and no gap where it would have been */ html.hs-nofoot .hs-box{margin-bottom:14px} /* ============================================================================ ONE HEADER HEIGHT ACROSS THE NETWORK — Aniket 2026-09-19 "https://4ab.in/hindu-gods/ is page ka top design bilkul sahi hai, har jagah aisa hi chahiye" + "menu height and design ko consistent rakho". Gods measures 63px tall. Jobs, Examination News and Wedding were 113px, because .site-header__inner carries min-height:112px and its links 13px of vertical padding. hub-shell.css is the last stylesheet on every one of those pages, so this is the one place the whole network can be brought to the same bar. Gods itself uses .bar.container and is deliberately not touched. ========================================================================= */ .site-header__inner{min-height:62px !important;padding-top:6px !important;padding-bottom:6px !important} .site-header__inner .site-brand__mark,.site-header__inner .site-brand img{width:40px !important;height:40px !important;flex:0 0 40px !important} .site-header__inner .site-brand__name{font-size:15px !important;line-height:1.15 !important} .site-header__inner .site-brand__tagline{font-size:10.5px !important;line-height:1.2 !important} .site-header__inner .nav__link{padding-top:8px !important;padding-bottom:8px !important} .site-header__inner .nav__list{align-items:center} /* the bar stays with the reader, exactly as it does on the gods page */ .site-header{position:sticky;top:0;z-index:40} html.hs-full .site-header{position:relative} /* ============================================================================ v20 fix — the top-level links now live inside .hs-scroll (the middle of the rail scrolls so Help never falls out). Every original rule was written as `.hs-nav > a`, a DIRECT-child selector, so wrapping them silently dropped their padding, colour and — worst of it — the 19px cap on the icon, which left the Home glyph rendering at its intrinsic 202px. These restate the same rules one level deeper; nothing new is invented, the base and all three themes just reach the links again. ========================================================================= */ .hs-nav .hs-scroll > a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px; font:500 14px var(--font-ui);color:var(--body);text-decoration:none} .hs-nav .hs-scroll > a i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px; flex:none;font-style:normal;color:var(--muted)} .hs-nav .hs-scroll > a i svg{width:19px;height:19px;display:block} .hs-nav .hs-scroll > a:hover{background:var(--paper)} .hs-nav .hs-scroll > a.on{color:var(--blue);background:var(--sky);box-shadow:inset -3px 0 0 var(--blue)} .hs-nav .hs-scroll > a.on i{color:var(--blue)} html[data-hs-theme="plum"] .hs-nav .hs-scroll > a{color:#D9D2EA} html[data-hs-theme="plum"] .hs-nav .hs-scroll > a i{color:#e9bd6a} html[data-hs-theme="plum"] .hs-nav .hs-scroll > a:hover{background:#221336} html[data-hs-theme="plum"] .hs-nav .hs-scroll > a.on{background:#2c1a44;color:#e9bd6a;box-shadow:inset -3px 0 0 #e9bd6a} html[data-hs-theme="navy"] .hs-nav .hs-scroll > a{color:#D7DEEA} html[data-hs-theme="navy"] .hs-nav .hs-scroll > a i{color:#c9a96a} html[data-hs-theme="navy"] .hs-nav .hs-scroll > a:hover{background:#101a2c} html[data-hs-theme="navy"] .hs-nav .hs-scroll > a.on{background:#16233a;color:#c9a96a;box-shadow:inset -3px 0 0 #c9a96a} html[data-hs-theme="cream"] .hs-nav .hs-scroll > a.on{background:#F7F4EC;color:#9A7532;box-shadow:inset -3px 0 0 #9A7532} .hs-nav.mini .hs-scroll > a{font-size:0 !important;padding:10px 0 !important;justify-content:center; box-shadow:none !important;border-radius:12px;margin-bottom:2px} .hs-nav.mini .hs-scroll > a i{width:auto;height:auto} .hs-nav.mini .hs-scroll > a i svg{width:19px;height:19px} .hs-nav.mini .hs-scroll > a.on{background:var(--sky)} /* ============================================================================ THREE-LAYER MENU — Aniket 2026-09-19 "update this type of three layer light mode mobile menu design for every website inside 4ab.in". One drawer, three fixed layers: 1 the brand row, with a switcher that drops every Great Services section and ticks the one you are in; 2 the menu itself, the only part that scrolls, under section labels; 3 the account row, pinned to the bottom, opening the utility menu upward. It lives in hub-shell.css, so it is the same drawer on all 4,563 pages. Desktop is untouched — everything here is inside the drawer breakpoint, except the two sheets, which are hidden outright on the wide rail. ========================================================================= */ /* the section labels and the switcher belong to the drawer only */ .hs-sec{display:none} .hs-switch{display:none} /* the switcher sheet is a phone idea; the account menu now belongs to both layouts, so only the sheet is hidden on the wide rail */ @media (min-width:1100px){ .hs-sheet{display:none !important} } @media (max-width:1099px){ /* ---------- the drawer shell ---------- */ .hs-nav{ width:min(330px,calc(100vw - 24px)); left:12px;top:12px;bottom:12px;height:auto; border-radius:18px;padding:0;overflow:hidden; display:flex;flex-direction:column; background:#fff;box-shadow:0 26px 60px rgba(10,43,99,.28); } /* ---------- LAYER 1 — brand + switcher ---------- */ .hs-nav .brand{ flex:none;display:flex;align-items:center;gap:10px; padding:14px 12px;margin:0;border-bottom:1px solid var(--hair); } .hs-nav .brand .logo{flex:1 1 auto;min-width:0;gap:10px} .hs-nav .brand .logo div{min-width:0;overflow:hidden;text-overflow:ellipsis} .hs-nav .collapse{display:none} .hs-switch{ display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px; border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted);cursor:pointer;padding:0; } .hs-switch svg{width:15px;height:15px} .hs-switch.is-open{border-color:var(--blue);color:var(--blue);background:var(--sky)} /* the switcher sheet drops under the brand row, over the menu */ .hs-sheet{ position:absolute;left:8px;right:8px;top:64px;z-index:5; background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:0 18px 40px rgba(10,43,99,.18); padding:6px;max-height:60vh;overflow:auto; } .hs-sheet__row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;text-decoration:none} .hs-sheet__row+.hs-sheet__row{margin-top:2px} .hs-sheet__row:hover{background:var(--paper)} .hs-sheet__row.is-on{background:var(--sky)} .hs-sheet__i{ flex:0 0 38px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,var(--accent,var(--blue)),color-mix(in srgb,var(--accent,var(--blue)) 58%,#fff)); } .hs-sheet__i svg{width:19px;height:19px} .hs-sheet__t{min-width:0;flex:1 1 auto} .hs-sheet__t b{display:block;font:600 13.5px var(--font-ui);color:var(--ink);line-height:1.25} .hs-sheet__t small{display:block;font-size:11.5px;color:var(--muted)} .hs-sheet__tick{flex:0 0 auto;color:var(--blue)} .hs-sheet__tick svg{width:18px;height:18px;display:block} /* ---------- LAYER 2 — the menu, the only scrolling part ---------- */ .hs-nav .hs-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 8px 10px;margin:0} .hs-sec{ display:block;margin:12px 0 4px;padding:0 10px; font:700 10px var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted); } .hs-sec:first-child{margin-top:4px} .hs-nav .hs-scroll > a,.hs-nav summary{padding:11px 10px;border-radius:11px;font-size:14.5px} .hs-nav details > a{padding:9px 10px 9px 42px;font-size:13.5px} .hs-nav .soon{font-size:8.5px} /* ---------- LAYER 3 — the account row ---------- */ .hs-nav .foot{ flex:none;position:relative;margin:0;padding:10px; border-top:1px solid var(--hair);background:var(--cream); } .hs-acct{ width:100%;display:flex;align-items:center;gap:10px;padding:8px; background:#fff;border:1px solid var(--line);border-radius:12px;cursor:pointer;text-align:left; } .hs-acct.is-open{border-color:var(--blue)} .hs-acct__av{ flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff; } .hs-acct__av svg{width:18px;height:18px} .hs-acct__t{flex:1 1 auto;min-width:0} .hs-acct__t b{display:block;font:600 13.5px var(--font-ui);color:var(--ink);line-height:1.25} .hs-acct__t small{display:block;font-size:11.5px;color:var(--muted)} .hs-acct__c{width:16px;height:16px;color:var(--muted);flex:none} .hs-acct.is-open .hs-acct__c{transform:rotate(180deg)} /* opens upward, so it never runs off the bottom of the phone */ .hs-acct-menu{ position:absolute;left:10px;right:10px;bottom:calc(100% - 4px);z-index:6; background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:0 -14px 40px rgba(10,43,99,.18);padding:6px; } .hs-acct-menu a{ display:flex;align-items:center;gap:11px;padding:10px;border-radius:10px; font:500 13.5px var(--font-ui);color:var(--body);text-decoration:none; } .hs-acct-menu a:hover{background:var(--paper);color:var(--blue)} .hs-acct-menu a i{display:inline-flex;width:18px;height:18px;color:var(--muted);flex:none} .hs-acct-menu a i svg{width:18px;height:18px} .hs-acct-menu a:hover i{color:var(--blue)} /* the opener sits at the TOP LEFT and the drawer stays closed until it is tapped (owner 2026-09-19: "menu will be on left top by default hidden") */ .hs-fab{ top:10px;left:10px;bottom:auto; padding:0;width:42px;height:42px;border-radius:13px; display:inline-grid;place-items:center;font-size:0; box-shadow:0 8px 20px rgba(10,43,99,.26); } .hs-fab::before{content:"☰";font-size:17px;line-height:1;color:#fff} /* the drawer drops from under the opener, not from the bottom of the screen */ .hs-nav{top:60px;bottom:12px} } /* ============================================================================ ONE MENU ON A PHONE + a steady side gutter — Aniket 2026-09-19 "need menu controlled to be left panel only on top, no two menu should show" "need hair line gap left right always on mobile" "full flow of cards always do not shrink, keep as 4ab directory" ========================================================================= */ .hs-own{display:none} @media (max-width:1099px){ /* the site's own links, lifted to the top of the drawer */ .hs-own{display:block} .hs-own__a{ display:block;padding:10px 10px;border-radius:11px; font:500 14px var(--font-ui);color:var(--body);text-decoration:none; } .hs-own__a:hover{background:var(--paper)} .hs-own__a.on{background:var(--sky);color:var(--blue);font-weight:600} .hs-own::after{content:"";display:block;height:1px;background:var(--hair);margin:10px 4px 0} /* the page's own hamburger and inline bar go quiet — the left panel carries them now */ html.hs-onemenu .site-header .nav-toggle, html.hs-onemenu .site-header .theme-toggle, html.hs-onemenu nav.subnav, html.hs-onemenu .site-header .nav__list, html.hs-onemenu .site-header .main-nav, html.hs-onemenu .sidenav .sn-list, html.hs-onemenu nav.bk-nav{display:none !important} /* the brand row of the site's own header stays — it says which site you are on */ html.hs-onemenu .site-header__inner, html.hs-onemenu .header-inner{min-height:54px} /* ---- one hairline gutter, the same on both sides, on every page ---- */ body.hs-boxed .hs-box{margin-left:10px;margin-right:10px;border-radius:16px} .hs-foot{margin-left:10px;margin-right:10px} /* nothing inside may push past that gutter */ /* horizontal clipping lives on only. overflow-x:hidden on turns the body into a scroll container of its own, and every position:sticky header inside it then sticks to the body (which never scrolls) instead of the viewport — the header scrolled away. */ html.hs-pc{overflow-x:hidden} body.hs-boxed{overflow:visible} .hs-box img,.hs-box video,.hs-box iframe,.hs-box table,.hs-box pre{max-width:100%} /* ---- cards flow, they never shrink into a squeezed column ---- A text card in a 3-up grid at 390px gets a 110px column and breaks to one word per line. auto-fit with a floor keeps a readable minimum and lets the row reflow: one card per row on a phone, more as the screen allows. min(100%,..) stops the floor itself from causing sideways scroll on the narrowest devices. */ .hs-box .grid-4,.hs-box .grid-3,.hs-box .grid-2, .hs-box .cards,.hs-box .card-grid, .hs-box .ab-grid,.hs-box .sf-rail__grid,.hs-box .bgrid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)) !important; } .hs-box .grid-4 > *,.hs-box .grid-3 > *,.hs-box .grid-2 > *, .hs-box .cards > *,.hs-box .card-grid > *,.hs-box .tiles > *{min-width:0} } /* ============================================================================ A COLOURED ICON ON EVERY LAYER — Aniket 2026-09-19 "colour ful icon must show on every layer like this for menu, submenu and sub sub menu in cards". The switcher sheet already had the gradient tiles; now the menu rows and the submenu rows use the same language, each in its own group hue (--accent comes from the k1..k8 class on the
). Layer sizes step down so the hierarchy still reads: 32px group, 24px product, 38px card. ========================================================================= */ @media (max-width:1099px){ /* LAYER — menu: the group row */ .hs-nav details > summary > i{ width:32px;height:32px;border-radius:10px;flex:0 0 32px; background:linear-gradient(135deg,var(--accent,var(--blue)),color-mix(in srgb,var(--accent,var(--blue)) 58%,#fff)); color:#fff;box-shadow:0 2px 6px color-mix(in srgb,var(--accent,var(--blue)) 34%,transparent); } .hs-nav details > summary > i svg{width:17px;height:17px;color:#fff} html[data-hs-theme] .hs-nav details > summary > i svg{color:#fff} .hs-nav details[open] > summary > i{box-shadow:0 3px 9px color-mix(in srgb,var(--accent,var(--blue)) 46%,transparent)} /* LAYER — submenu: the product row, same hue, one step smaller */ .hs-nav details > a{display:flex;align-items:center;gap:10px;padding-left:14px} .hs-nav details > a::before{display:none} /* the old dot is replaced by the chip */ .hs-nav details > a > i{ width:24px;height:24px;border-radius:8px;flex:0 0 24px; display:inline-flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--accent,var(--blue)) 16%,#fff); color:var(--accent,var(--blue)); } .hs-nav details > a > i svg{width:14px;height:14px} html[data-hs-theme] .hs-nav details > a > i{background:color-mix(in srgb,var(--accent,var(--blue)) 16%,#fff);color:var(--accent,var(--blue))} .hs-nav details > a.on > i{background:var(--accent,var(--blue));color:#fff} /* LAYER — the site's own links, marked in the hue of the section you are in */ .hs-own__a{display:flex;align-items:center;gap:10px} .hs-own__a::before{ content:"";width:7px;height:7px;border-radius:50%;flex:0 0 7px; background:var(--blue-mid); } .hs-own__a.on::before{background:var(--blue)} /* the plain top-level rows (Home, Blog, Pricing, Help) keep a soft tinted chip so no row in the drawer is left as a bare grey glyph */ .hs-nav .hs-scroll > a > i{ width:32px;height:32px;border-radius:10px;flex:0 0 32px; background:var(--sky);color:var(--blue-ink); } .hs-nav .hs-scroll > a.on > i{background:var(--blue);color:#fff} html[data-hs-theme] .hs-nav .hs-scroll > a > i{background:var(--sky);color:var(--blue-ink)} html[data-hs-theme] .hs-nav .hs-scroll > a.on > i{background:var(--blue);color:#fff} } /* ============================================================================ Mobile footer, second pass — Aniket 2026-09-19 "footer mein 1st column comman so delete 1st column" — the Great Services column repeats, item for item, the Explore strip directly under it. On a phone that is the same eight links twice in one screen, so the column goes and Company / Support share the row. The Explore strip still carries the sections. "logo ke saath ke text ko justify karke full width mein kar do" — the brand paragraph was capped at 34ch, so it wrapped early and left a ragged column. Desktop is left exactly as approved on 19 Sep. ========================================================================= */ @media (max-width:1100px){ .hs-foot .f1 .fbrand p{max-width:none;text-align:justify;text-wrap:pretty} } @media (max-width:600px){ .hs-foot .f1{grid-template-columns:repeat(2,1fr)} .hs-foot .f1 > div:nth-child(2){display:none} /* the repeated column */ .hs-foot .f1 > div:nth-child(3){border-left:0;padding-left:0} .hs-foot .f1 > div:nth-child(4){border-left:1px solid var(--hair)} } @media (max-width:600px){ /* beats the generic `>div:not(.fbrand)+div` divider rule above: with the repeated column gone, Company is the first of the pair and must not carry a left rule */ .hs-foot .f1 > div:not(.fbrand):nth-child(3){border-left:0;padding-left:0} } /* ============================================================================ The bottom bar, re-rowed for a phone — Aniket 2026-09-19 "all rights reserved ko mobile pe 2nd row mein kar do, and timing bhi 2nd row mein hi vertical line deke likh do". It used to be two long sentences that wrapped mid-phrase — "… | All" / "Rights Reserved © 2026", "… 9 AM – 8" / "PM". The six pieces are now placed in a 2-column grid so every row breaks where it reads: the credit on row 1, the copyright and the opening hours together on row 2 with a rule between them, and the two ways to reach us on row 3. Desktop keeps the single approved line. ========================================================================= */ /* the separators between pieces, on both layouts */ .hs-foot .f3 .f3-rights::before,.hs-foot .f3 .f3-mail::before,.hs-foot .f3 .f3-hours::before{ content:"|";margin:0 5px;color:#6E8CC4; } .hs-foot .f3 .f3-l,.hs-foot .f3 .f3-r{display:inline} /* Each piece of the bottom bar wraps as a whole, so the line never breaks mid-phrase and leaves an orphan ("… 9 AM – 8" / "PM"). The line still flows exactly as before. */ .hs-foot .f3 .in > span > span{white-space:nowrap} /* the linked pieces of the bottom bar */ .hs-foot .f3 .f3-by a,.hs-foot .f3 .f3-tel a,.hs-foot .f3 .f3-mail a{color:#8FC0FF} /* ============================================================================ THE PHONE MENU — right-hand drill-down in the site's own colour Aniket 2026-09-19: "mobile pe top mein free space nahi chahiye" → no strip; ☰ sits in the site's header, right "right mein jaisa uska khud ka menu dikhe, same → ☰ and the drawer take the colour menu panel design" header's colour (siteTone) "right se hi one by one: hamburger → main menu → → three levels on a sliding submenu → sub-sub in cards, different colours" track, cards cycle the hues "full screen ka option menu open hone ke baad" → ⤢ lives in the drawer head The desktop rail is untouched; everything here is inside the drawer width. ========================================================================= */ .hs-stack,.hs-full-in{display:none} @media (max-width:1099px){ /* ---- tone: the site's header colour, with ink chosen by its luminance ---- */ .hs-nav{--hs-fg:#0F2039;--hs-fg2:#3E5068;--hs-mute:#5F6F87;--hs-sur:#fff;--hs-pap:#F3F6FB;--hs-line:#E3E9F2;--hs-hair:#EDF1F7} .hs-nav.hs-dark{--hs-fg:#F1F4FA;--hs-fg2:#DCE2EE;--hs-mute:rgba(241,244,250,.62);--hs-sur:rgba(255,255,255,.07);--hs-pap:rgba(255,255,255,.05);--hs-line:rgba(255,255,255,.16);--hs-hair:rgba(255,255,255,.11)} /* ---- no strip: the content starts at the top; ☰ sits in the header's right ---- */ body.hs-boxed .hs-box{margin-top:14px} /* html[data-hs-theme] is on the list so the per-site plum/navy/cream rules for .hs-fab (0,2,1) cannot outrank the header colour set here */ .hs-fab,.hs-fab.hs-dark,html[data-hs-theme] .hs-fab{ left:auto;bottom:auto;top:24px;right:20px;width:40px;height:40px;padding:0; display:inline-grid;place-items:center;border-radius:12px;font-size:0; background:var(--hs-bg,#0A2B63);color:#0F2039; border:1px solid rgba(15,32,57,.14);box-shadow:0 4px 14px rgba(10,43,99,.16); } .hs-fab.hs-dark,html[data-hs-theme] .hs-fab.hs-dark{color:#fff;border-color:rgba(255,255,255,.16);box-shadow:0 4px 14px rgba(0,0,0,.28)} .hs-fab::before{color:inherit} /* the floating ⤢ is gone from the page; it reappears only as the way OUT of full screen */ .hs-full-btn{display:none !important} html.hs-full .hs-full-btn{display:block !important;top:10px;right:10px} /* ---- the drawer: from the RIGHT, in the site's colour ---- */ .hs-nav,html[data-hs-theme] .hs-nav{ left:auto;right:10px;top:12px;bottom:12px;height:auto; width:min(340px,calc(100vw - 20px)); transform:translateX(120%);transition:transform .25s; background:var(--hs-bg,#fff);color:var(--hs-fg); box-shadow:0 26px 60px rgba(10,43,99,.28); } html[data-hs-theme] .hs-nav.hs-dark,.hs-nav.hs-dark{box-shadow:0 26px 60px rgba(0,0,0,.5)} .hs-nav.open,html[data-hs-theme] .hs-nav.open{transform:none} /* the desktop list, the chevron sheet and the old rail all stay out of the phone drawer */ .hs-nav .hs-scroll,.hs-switch,.hs-sheet,.hs-body{display:none !important} /* brand row: logo left, ⤢ full screen right */ .hs-nav .brand,html[data-hs-theme] .hs-nav .brand{border-bottom:1px solid var(--hs-hair);padding:12px 12px} .hs-nav .logo,html[data-hs-theme] .hs-nav .logo{color:var(--hs-fg)} .hs-nav .logo small,html[data-hs-theme] .hs-nav .logo small{color:var(--hs-mute)} .hs-full-in{ display:inline-grid;place-items:center;flex:0 0 36px;width:36px;height:36px;padding:0; border:1px solid var(--hs-line);border-radius:10px;background:var(--hs-sur);color:var(--hs-fg);cursor:pointer; } .hs-full-in svg{width:17px;height:17px} /* ---- the sliding track: three levels, one showing ---- */ .hs-stack{display:block;flex:1 1 auto;min-height:0;overflow:hidden;position:relative} .hs-track{display:flex;width:300%;height:100%;transition:transform .25s ease} .hs-lv{width:33.3333%;height:100%;overflow:hidden;display:flex;flex-direction:column;min-width:0} .hs-lv__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 8px 10px;scrollbar-width:thin} .hs-stack[data-level="2"] .hs-track{transform:translateX(-33.3333%)} .hs-stack[data-level="3"] .hs-track{transform:translateX(-66.6667%)} /* level head: back, tile, title */ .hs-lv__head{flex:none;display:flex;align-items:center;gap:9px;padding:8px 8px 10px;border-bottom:1px solid var(--hs-hair);background:var(--hs-bg,#fff)} .hs-back{width:34px;height:34px;flex:0 0 34px;border-radius:10px;border:1px solid var(--hs-line);background:var(--hs-sur);color:var(--hs-fg);display:grid;place-items:center;cursor:pointer;padding:0} .hs-back svg{width:18px;height:18px} .hs-lv__hi{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,var(--accent,var(--blue)),color-mix(in srgb,var(--accent,var(--blue)) 58%,#fff))} .hs-lv__hi svg{width:15px;height:15px} .hs-lv__head b{font:700 15px var(--font-brand);color:var(--hs-fg);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---- rows (level 1 = sections, level 2 = products) ---- */ .hs-row{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;margin:0 0 4px; border:0;border-radius:13px;background:var(--hs-sur);color:var(--hs-fg); text-align:left;text-decoration:none;cursor:pointer;font:inherit;box-sizing:border-box} .hs-row:hover{background:var(--hs-pap)} .hs-row__i{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,var(--accent,var(--blue)),color-mix(in srgb,var(--accent,var(--blue)) 58%,#fff)); box-shadow:0 2px 6px color-mix(in srgb,var(--accent,var(--blue)) 34%,transparent)} .hs-row__i svg{width:18px;height:18px} .hs-row--home .hs-row__i{background:linear-gradient(135deg,#0A2B63,#0862F9)} .hs-row--flat .hs-row__i{background:var(--hs-pap);color:var(--hs-fg2);box-shadow:none} .hs-row > span{flex:1 1 auto;min-width:0} .hs-row b{display:block;font:600 14px var(--font-ui);line-height:1.25;color:var(--hs-fg)} .hs-row small{display:block;font-size:11.5px;color:var(--hs-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hs-row .soon{margin-left:6px} .hs-row__c{width:18px;height:18px;flex:none;color:var(--hs-mute)} /* level 2 rows: a lighter chip in the section's hue, so the level reads as "inside" */ .hs-row--sub .hs-row__i{width:34px;height:34px;flex-basis:34px;box-shadow:none; background:color-mix(in srgb,var(--accent,var(--blue)) 18%,var(--hs-sur));color:var(--accent,var(--blue))} .hs-nav.hs-dark .hs-row--sub .hs-row__i{background:color-mix(in srgb,var(--accent,var(--blue)) 30%,transparent);color:#fff} .hs-row--sub.is-here{background:color-mix(in srgb,var(--accent,var(--blue)) 14%,var(--hs-sur));box-shadow:inset 3px 0 0 var(--accent,var(--blue))} .hs-row--more .hs-row__i{background:var(--hs-pap);color:var(--hs-mute)} .hs-lv1__tail{margin-top:8px;padding-top:4px;border-top:1px solid var(--hs-hair)} /* what's new, in the section's tint */ .hs-new{display:block;margin:8px 0 2px;padding:10px 12px;border-radius:12px;text-decoration:none; font:500 12.5px/1.4 var(--font-ui);color:var(--hs-fg); background:color-mix(in srgb,var(--accent,var(--blue)) 12%,var(--hs-sur));border:1px solid var(--hs-hair)} .hs-new small{display:block;font:700 9.5px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--accent,var(--blue));margin-bottom:2px} /* ---- level 3: the cards, each in its own hue ---- */ .hs-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px} .hs-card{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:72px;padding:12px; border-radius:14px;text-decoration:none;box-sizing:border-box; background:var(--wash,var(--sky));color:var(--accent-ink,var(--blue-ink)); border:1px solid color-mix(in srgb,var(--accent,var(--blue)) 30%,transparent)} .hs-card b{font:600 13.5px var(--font-ui);line-height:1.25} .hs-card small{font-size:11px;opacity:.75} .hs-card i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--accent,var(--blue));flex:none} .hs-card i svg{width:16px;height:16px} .hs-card--open{grid-column:1/-1;flex-direction:row;align-items:center;min-height:0;gap:10px} .hs-card--open b{flex:1 1 auto} .hs-nav.hs-dark .hs-card{background:color-mix(in srgb,var(--accent,var(--blue)) 26%,transparent);color:#fff; border-color:color-mix(in srgb,var(--accent,var(--blue)) 50%,transparent)} /* ---- the site's own links (top of the main menu), labels, account row ---- */ .hs-sec,html[data-hs-theme] .hs-sec{display:block;color:var(--hs-mute);margin:10px 0 4px;padding:0 8px} .hs-sec:first-child{margin-top:2px} .hs-own{display:block} .hs-own__a{color:var(--hs-fg2)} .hs-own__a:hover{background:var(--hs-pap)} .hs-own__a.on{background:var(--hs-pap);color:var(--hs-fg)} .hs-own::after{background:var(--hs-hair)} .hs-nav .foot,html[data-hs-theme] .hs-nav .foot{background:var(--hs-pap);border-top:1px solid var(--hs-hair)} .hs-acct{background:var(--hs-sur);border-color:var(--hs-line)} .hs-acct.is-open{border-color:var(--hs-fg)} .hs-acct__t b{color:var(--hs-fg)} .hs-acct__t small,.hs-acct__c{color:var(--hs-mute)} .hs-acct-menu{background:var(--hs-bg,#fff);border-color:var(--hs-line)} .hs-acct-menu a{color:var(--hs-fg2)} .hs-acct-menu a i{color:var(--hs-mute)} .hs-acct-menu a:hover{background:var(--hs-pap);color:var(--hs-fg)} } /* The ☰ sits over the drawer's head once it is open (same corner). The head keeps that corner clear so ⤢ stays visible beside it, and the ☰ itself turns into the close mark while the drawer is out — one button opens and shuts the menu. */ @media (max-width:1099px){ .hs-nav .brand,html[data-hs-theme] .hs-nav .brand{padding-right:64px} .hs-nav.open ~ .hs-fab::before{content:"\2715";font-size:15px} } /* ============================================================================ Aniket 2026-09-19 (evening): "menu should be sticky with the header" → the ☰ sits inside the site's header (placeControls) and the header sticks "no blank space left or right, full width" → the content box is edge to edge "after opening full screen show the menu → ☰ stays, the drawer may open, and option also, expand/shrink icon" the button is a corners icon, not ⤢⤡ ========================================================================= */ @media (max-width:1099px){ /* ---- full bleed ---- */ body.hs-boxed .hs-box{margin:0 !important;border-radius:0;box-shadow:none} .hs-foot{margin:0} .hs-foot footer{border-radius:0} /* ---- the controls, inside the header; the header sticks to the top ---- */ html.hs-ctl-in .hs-box .site-header,html.hs-ctl-in .hs-box header.hx,html.hs-ctl-in .hs-box header.ph, html.hs-ctl-in .hs-box header.company-header,html.hs-ctl-in .hs-box .cm-head{position:sticky !important;top:0;z-index:60} html.hs-ctl-in .hs-box .site-header > *:first-child{padding-right:64px} .hs-ctl{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;z-index:5} .hs-ctl .hs-fab,.hs-ctl .hs-fab.hs-dark,html[data-hs-theme] .hs-ctl .hs-fab{position:static;top:auto;right:auto;left:auto;bottom:auto} .hs-ctl .hs-full-btn,html.hs-full .hs-ctl .hs-full-btn{ position:static;top:auto;right:auto;width:40px;height:40px;padding:0;line-height:0;border-radius:12px; background:var(--hs-bg,#fff);color:#0F2039;border:1px solid rgba(15,32,57,.14);box-shadow:0 4px 14px rgba(10,43,99,.16); } .hs-ctl .hs-full-btn.hs-dark{color:#fff;border-color:rgba(255,255,255,.16);box-shadow:0 4px 14px rgba(0,0,0,.28)} .hs-ctl .hs-full-btn{display:none} html.hs-full .hs-ctl .hs-full-btn{display:inline-grid !important;place-items:center} .hs-full-btn svg{width:18px;height:18px;display:block} /* ---- full screen keeps the menu reachable ---- */ html.hs-full .hs-fab{display:inline-grid !important} html.hs-full .hs-nav.open{display:flex !important} html.hs-open .hs-fab::before{content:"✕";font-size:15px} } /* the desktop button takes the same corner icons */ .hs-full-btn svg{width:18px;height:18px} .hs-full-btn{display:inline-grid;place-items:center;line-height:0} /* ============================================================================ The account row belongs to BOTH layouts. Its sizing lived only inside the phone media query, so on the desktop rail the avatar and the chevron fell back to the SVG's intrinsic size — a 189px person and a 189px arrow, and a 427px tall foot. These are the structural rules, unscoped; the phone block above only re-tints them. ========================================================================= */ .hs-nav .foot{position:relative} .hs-acct{ width:100%;display:flex;align-items:center;gap:10px;padding:8px; border:1px solid var(--line);border-radius:12px;background:var(--card); cursor:pointer;text-align:left;font:inherit;box-sizing:border-box; } .hs-acct__av{ flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff; } .hs-acct__av svg{width:18px;height:18px;display:block} .hs-acct__t{flex:1 1 auto;min-width:0} .hs-acct__t b{display:block;font:600 13.5px var(--font-ui);line-height:1.25;color:var(--ink)} .hs-acct__t small{display:block;font-size:11.5px;color:var(--muted)} .hs-acct__c{width:16px;height:16px;flex:0 0 16px;color:var(--muted);display:block} .hs-acct.is-open .hs-acct__c{transform:rotate(180deg)} .hs-acct-menu{ position:absolute;left:8px;right:8px;bottom:calc(100% - 4px);z-index:6; background:var(--card);border:1px solid var(--line);border-radius:14px; box-shadow:0 -14px 40px rgba(10,43,99,.18);padding:6px; } .hs-acct-menu a{ display:flex;align-items:center;gap:11px;padding:10px;border-radius:10px; font:500 13.5px var(--font-ui);color:var(--body);text-decoration:none; } .hs-acct-menu a i{display:inline-flex;width:18px;height:18px;flex:none;color:var(--muted)} .hs-acct-menu a i svg{width:18px;height:18px;display:block} .hs-acct-menu a:hover{background:var(--paper);color:var(--blue)} .hs-acct-menu a:hover i{color:var(--blue)} /* the collapsed icon rail shows the avatar only */ .hs-nav.mini .hs-acct{justify-content:center;padding:6px} .hs-nav.mini .hs-acct__t,.hs-nav.mini .hs-acct__c{display:none} /* the dark desktop themes keep the rail’s own ink — WIDE RAIL ONLY: on a phone the drawer is tinted from the site header (--hs-fg), and these would override it */ @media (min-width:1100px){ html[data-hs-theme="plum"] .hs-acct{background:#221336;border-color:#3a2a55} html[data-hs-theme="plum"] .hs-acct__t b{color:#e9bd6a} html[data-hs-theme="plum"] .hs-acct__t small,html[data-hs-theme="plum"] .hs-acct__c{color:#B9AFD1} html[data-hs-theme="plum"] .hs-acct-menu{background:#1a1230;border-color:#3a2a55} html[data-hs-theme="plum"] .hs-acct-menu a{color:#D9D2EA} html[data-hs-theme="plum"] .hs-acct-menu a:hover{background:#2c1a44;color:#e9bd6a} html[data-hs-theme="navy"] .hs-acct{background:#101a2c;border-color:#2a3a55} html[data-hs-theme="navy"] .hs-acct__t b{color:#c9a96a} html[data-hs-theme="navy"] .hs-acct__t small,html[data-hs-theme="navy"] .hs-acct__c{color:#A9B6CC} html[data-hs-theme="navy"] .hs-acct-menu{background:#0D1524;border-color:#2a3a55} html[data-hs-theme="navy"] .hs-acct-menu a{color:#D7DEEA} html[data-hs-theme="navy"] .hs-acct-menu a:hover{background:#16233a;color:#c9a96a} } /* ============================================================================ The calculator app, laid out by the shell instead of by its own page (Aniket 2026-09-19). Two things used to be edits inside the 2.5MB app file and were lost when it was re-published: the 62px top bar in place of its second left rail, and keeping its own credit line instead of the hub's tall footer. Both now key off html.hs-app-calc, which hub-shell.js sets from the path. ========================================================================= */ /* its own two-line credit is the page's footer here; the page hides it with an inline !important rule, so this needs the extra class to win */ html.hs-app-calc .hs-box .credit{display:block !important} html.hs-app-calc .hs-box .qab-wrap,html.hs-app-calc .hs-box #ab-visitor-counter{display:none !important} /* The block that used to sit here turned the calculator's own left sidebar into a 62px bar across the top. At 1440px that bar is 1,334px wide but its five groups need 2,009px, so "Accounts" was cut mid-word, Medical and Engineering were clipped away and the right-hand buttons ran under one another. Removed on the owner's instruction (2026-09-19: "keep left menu left as it was initial on vertical bar left") — the app's own CSS lays it out as a vertical sidebar, which has room for every item. calc-hub-fix.css still shifts it clear of the hub rail. */ /* ============================================================================ Examination News — the banner stays compact (Aniket 2026-09-19: "hero banner hatao"). These rules were in the site’s own site.css and were lost when it was re-published at 09:06; they live in the shell now, keyed off the path, so the next re-publish cannot undo them. The title stays — the page is not left untitled. ========================================================================= */ html.hs-app-examnews header.ab-hero{padding:14px 0 6px;background:none;border:0;box-shadow:none;min-height:0} html.hs-app-examnews header.ab-hero .ab-hero__panel{padding:0;background:none;border:0;box-shadow:none} html.hs-app-examnews header.ab-hero .ab-hero__title{font-size:clamp(22px,2.2vw,30px);line-height:1.2;margin:0 0 6px} html.hs-app-examnews header.ab-hero .ab-hero__lede{font-size:14px;line-height:1.55;max-width:74ch;margin:0 0 10px} html.hs-app-examnews header.ab-hero .ab-kicker{margin-bottom:4px} html.hs-app-examnews header.ab-hero .ab-hero__meta,html.hs-app-examnews header.ab-hero .ab-chips{margin-top:6px} /* P1-04 (UX-003/UX-036): the panel above is transparent, so the hero text must be dark ink, not ADS white/gold */ html.hs-app-examnews header.ab-hero .ab-hero__panel{color:var(--ink,#1C2130)} html.hs-app-examnews header.ab-hero .ab-hero__title{color:var(--ink,#1C2130);-webkit-text-fill-color:currentColor;background:none} html.hs-app-examnews header.ab-hero .ab-hero__title em,html.hs-app-examnews header.ab-hero .ab-kicker{color:var(--gold-ink,#8A6D1F);-webkit-text-fill-color:currentColor} html.hs-app-examnews header.ab-hero .ab-hero__lede,html.hs-app-examnews header.ab-hero .ab-hero__sub{color:#3E5068} html.hs-app-examnews header.ab-hero .ab-hero__meta,html.hs-app-examnews header.ab-hero .ab-hero__meta b,html.hs-app-examnews header.ab-hero .ab-hero__sub b{color:var(--ink,#1C2130)} html.hs-app-examnews header.ab-hero .ab-hero__meta,html.hs-app-examnews header.ab-hero .ab-hero__sub{flex-wrap:wrap;max-width:100%;min-width:0;overflow-wrap:anywhere;white-space:normal} html.hs-app-examnews .ab-stage__card,html.hs-app-examnews .ab-stage__card h2,html.hs-app-examnews .ab-stage__card h3,html.hs-app-examnews .ab-stage__card p{color:#fff} html.hs-app-examnews header.ab-hero .ab-chip{color:#3E5068;background:#F3F6FB;border-color:#E3E9F2} /* P1-04 r2 (3 Oct): the transparent hero had no side gutter, so at 390 the H1/sub touched the screen edges and the mono "22 exams tracked * 7 conducting bodies" line clipped; same gutter as the page sections (24px), 16px on phones. The section that opens with the breadcrumb no longer keeps the ADS 110px section gap under the hero (empty band at 1440). */ html.hs-app-examnews header.ab-hero .ab-hero__panel{box-sizing:border-box;padding-left:24px;padding-right:24px} html.hs-app-examnews header.ab-hero + .ab-s:has(> nav[aria-label="Breadcrumb"]:first-child){margin-top:16px} @media (max-width:760px){html.hs-app-examnews header.ab-hero .ab-hero__panel{padding-left:16px;padding-right:16px}} /* /P1-04 */ @media (min-width:1100px){ html.hs-app-examnews .site-header__inner .nav__list{flex-wrap:nowrap} } /* The unscoped account-row structure above also carries light colours, and being later in the file it was repainting the phone drawer's account row white on a dark panel. The drawer's own tones are re-asserted last, inside the drawer width. */ @media (max-width:1099px){ .hs-nav .hs-acct{background:var(--hs-sur);border-color:var(--hs-line)} .hs-nav .hs-acct.is-open{border-color:var(--hs-fg)} .hs-nav .hs-acct__t b{color:var(--hs-fg)} .hs-nav .hs-acct__t small,.hs-nav .hs-acct__c{color:var(--hs-mute)} .hs-nav .hs-acct-menu{background:var(--hs-bg,#fff);border-color:var(--hs-line)} .hs-nav .hs-acct-menu a{color:var(--hs-fg2)} .hs-nav .hs-acct-menu a i{color:var(--hs-mute)} .hs-nav .hs-acct-menu a:hover{background:var(--hs-pap);color:var(--hs-fg)} .hs-nav .hs-acct-menu a:hover i{color:var(--hs-fg)} } /* ============================================================================ v21 — phone fixes found in the 2026-09-19 three-viewport audit ========================================================================= */ /* 1. One hamburger, not two. oneMenu() copies the site's own links into the hub drawer and marks the site's own toggle; on /property/ the two buttons sat almost exactly on top of each other (x=334 and x=340), and on /website-design/ the "Menu ☰" pill ran under the ☰. The site's toggle is hidden only on the phone and only once its links really were adopted, so the wide layout — where the header shows those links in full — is untouched. */ @media (max-width:1099px){ html.hs-onemenu .hs-own-toggle{display:none !important} } /* 2. Full width on the phone (owner: "I don't need any blank space in left or right. Use full width"). /aniket-bhardwaj/zero-error/ and /great-mentors/ set body{padding:16px 12px 0}; the content moves into .hs-box but that padding stays on the body, so the box was inset 12px each side. The box carries the page's own background, so dropping the side padding loses nothing. */ @media (max-width:1099px){ body.hs-boxed{padding-left:0 !important;padding-right:0 !important} } /* 3. The chosen top bar travels with the page, whatever element it is. The older rule below only named .site-header / header.hx / header.ph / .company-header / .cm-head, so a site whose bar is a plain
or