/* chemistrytutors.4ab.in — the thin layer on top of ab-design-system.css. * Unlayered on purpose (it must outrank the layered package). Every value is an AB token. * One block per concern; consolidate, never append a second block for the same thing. */ /* Rule 8, second half: the visitor badge is hidden site-wide (numbers still collect server-side). */ #ab-visitor-counter { display: none !important; } /* Package bug R1 — `.ab-page a {color:var(--navy)}` (0,1,1) beats every button variant (0,1,0). Restored to the package's own intended values. Delete once fixed at source. */ .ab-base a.ab-btn--gold, .ab-page a.ab-btn--gold, .ab-base a.ab-btn--navy, .ab-page a.ab-btn--navy, .ab-base a.ab-btn--ghost, .ab-page a.ab-btn--ghost { color: #fff; } .ab-base a.ab-btn--ghost:hover, .ab-page a.ab-btn--ghost:hover { color: var(--gold-soft); } .ab-base a.ab-btn--line, .ab-page a.ab-btn--line, .ab-base a.ab-btn--line:hover, .ab-page a.ab-btn--line:hover { color: var(--navy); } .ab-base a.ab-credit__site { color: #E9C25F; } .ab-base a.ab-credit__site:hover, .ab-base a.ab-credit__site:focus-visible { color: #F7E7B2; } /* Drawer tiles equal at both levels (Rule 7) */ @media (max-width: 1239.98px) { .nav__list > .nav__item > .nav__link, .nav__mega .nav__sublink { min-height: 116px; padding: 12px 8px; box-sizing: border-box; justify-content: flex-start; align-content: start; } } /* ---------- compact hero (rulebook recipe) ---------- */ .ct-hero .ab-hero__panel { text-align: center; padding: clamp(28px, 4vw, 46px) clamp(26px, 6vw, 84px); background: radial-gradient(720px 300px at 50% -35%, rgba(201,168,76,.38), transparent 62%), var(--deep-navy-grad); } .ct-hero .ab-kicker::after { content: ""; width: 34px; height: 1.5px; background: var(--gold); } .ct-hero .ab-hero__meta { justify-content: center; } .ct-hero .ab-hero__lede { max-width: 900px; margin-left: auto; margin-right: auto; } @media (max-width: 760px) { .ab-hero:not(.ab-hero--compact) .ab-hero__panel { padding-top: clamp(24px, 6vw, 34px); padding-bottom: clamp(24px, 6vw, 34px); } } /* ---------- search box ---------- */ .ct-search { position: relative; max-width: 760px; margin: 22px auto 0; } .ct-search__in { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 8px 6px 18px; box-shadow: 0 18px 45px rgba(0,0,0,.25); } .ct-search__in svg { width: 20px; height: 20px; flex: 0 0 auto; color: #6B7280; } .ct-search__in input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px/1.4 var(--font-body, system-ui, sans-serif); color: #1C2130; padding: 8px 0; } .ct-search__in input::placeholder { color: #6B7280; } .ct-search__go { flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 999px; padding: 11px 20px; font: 600 14px/1 var(--font-nav, sans-serif); color: #fff; background: var(--grad-cta, linear-gradient(90deg,#F97316,#FACC15)); } .ct-search__out { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; display: none; background: var(--card-surface, #fff); border: 1px solid var(--line, #E7E2D6); border-radius: var(--r-md, 18px); box-shadow: var(--shadow-lift); max-height: 420px; overflow: auto; text-align: left; } .ct-search__out[data-open="1"] { display: block; } .ct-search__out a { display: block; padding: 11px 16px; border-bottom: 1px solid var(--line, #E7E2D6); color: var(--ink); text-decoration: none; } .ct-search__out a:hover, .ct-search__out a:focus { background: var(--paper, #FAF9F6); } .ct-search__out a b { display: block; font: 600 14.5px/1.3 var(--font-nav, sans-serif); } .ct-search__out a span { font-size: 12.5px; color: var(--muted, #6B7280); } .ct-search__out .ct-search__note { padding: 11px 16px; font-size: 13px; color: var(--muted, #6B7280); } /* A7: parsed-hint chips (PIN / class / subject / category) above the results list */ .ct-search__hints { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; } .ct-search__hint { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--tint, rgba(201,168,76,.14)); color: var(--gold-ink, #8A6D1F); font: 600 11px/1.4 var(--font-nav, sans-serif); } .ct-search--page { margin: 0 0 22px; } .ct-search--page .ct-search__in { background: var(--card-surface, #fff); border-color: var(--line, #E7E2D6); box-shadow: var(--shadow-soft); } .ct-search--page .ct-search__in input { color: var(--ink); } /* ---------- listing cards ---------- */ .ct-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } @media (max-width: 1099.98px) { .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ct-grid { grid-template-columns: 1fr; } } .ab-page .ct-card { position: relative; padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 8px; height: 100%; } .ct-card__top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ct-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 600 11px/1.4 var(--font-nav, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #fff; } .ct-badge--coaching { background: #2563EB; } .ct-badge--tutor { background: #0D9488; } .ct-badge--school { background: #7C3AED; } .ct-badge--college { background: #EA580C; } .ct-badge--apartment { background: #475569; } .ct-badge--chem { background: #16A34A; } .ct-badge--featured { background: var(--grad-cta, #F97316); } .ct-tag { font: 500 12px/1.4 var(--font-nav, sans-serif); color: var(--gold-ink, #8A6D1F); } /* ---------- A1: verification pill ---------- */ .ct-vpill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font: 600 10.5px/1.5 var(--font-nav, sans-serif); letter-spacing: .02em; cursor: help; border: 1px solid transparent; } .ct-vpill--v { background: rgba(22,163,74,.14); color: #14603E; border-color: rgba(22,163,74,.3); } .ct-vpill--u { background: var(--tint, rgba(107,114,128,.12)); color: var(--muted, #6B7280); } :root[data-theme="dark"] .ct-vpill--v { background: rgba(16,185,129,.18); color: #6EE7B0; border-color: rgba(16,185,129,.4); } :root[data-theme="dark"] .ct-vpill--u { background: rgba(255,255,255,.08); color: var(--muted); } .ct-card__brand { margin: 0; font-size: 12.5px; } .ct-card__brand a { color: var(--navy); font-weight: 600; text-decoration: none; } .ct-card__brand a:hover { text-decoration: underline; } /* A3 brand pages: no page-specific CSS needed any more — they reuse .ct-cont-grid / .ct-grp-first / .ct-filters (defined elsewhere in this file) exactly as locality and city pages do. */ .ab-page .ct-card h3 { margin: 2px 0 0; font: 600 16.5px/1.3 var(--font-nav, sans-serif); color: var(--ink); } .ab-page .ct-card h3 a { color: inherit; text-decoration: none; } .ct-card__addr { margin: 0; font-size: 13.5px; color: var(--body-c, #3A4152); line-height: 1.5; } .ct-card__meta { margin: 0; font-size: 12.5px; color: var(--muted, #6B7280); } .ct-card__hours { margin: 0; font-size: 12px; color: var(--muted, #6B7280); } .ct-card__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; } .ab-page a.ct-act { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font: 600 12.5px/1 var(--font-nav, sans-serif); text-decoration: none; border: 1px solid var(--line, #E7E2D6); color: var(--ink); background: var(--card, #fff); min-height: 34px; } .ab-page a.ct-act svg { width: 14px; height: 14px; } .ab-page a.ct-act--call { background: var(--navy-900, #1B2A5E); border-color: transparent; color: #fff; } .ab-page a.ct-act--wa { background: #25D366; border-color: transparent; color: #fff; } .ab-page a.ct-act--map { color: var(--navy); } .ab-page a.ct-act:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); } /* ---------- side-wise layout (apartments + schools column) ---------- */ .ct-two { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } @media (max-width: 1099.98px) { .ct-two { grid-template-columns: 1fr; } } .ct-two .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 640px) { .ct-two .ct-grid { grid-template-columns: 1fr; } } .ct-side { display: grid; gap: 18px; } .ab-page .ct-side .ab-panel { padding: 20px 20px 16px; } .ct-side h3 { margin: 0 0 10px; font: 600 15px/1.3 var(--font-nav, sans-serif); color: var(--ink); } .ct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ct-list li { font-size: 13.5px; line-height: 1.45; padding: 6px 0; border-bottom: 1px dashed var(--line, #E7E2D6); } .ct-list li:last-child { border-bottom: 0; } .ct-list li b { font-weight: 600; color: var(--ink); } .ct-list li span { color: var(--muted, #6B7280); font-size: 12.5px; display: block; } .ct-list li a { color: var(--navy); text-decoration: none; } .ct-list li a:hover { text-decoration: underline; } .ct-list--cols { columns: 2; column-gap: 24px; display: block; } .ct-list--cols li { break-inside: avoid; } @media (max-width: 640px) { .ct-list--cols { columns: 1; } } /* ---------- pills rail (Rule 4) ---------- */ .ct-pills { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ct-pills li { display: inline-flex; } .ct-pills a, .ct-pills span { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border: 1px solid var(--line, #E7E2D6); border-radius: 999px; background: var(--card, #fff); font: 500 13.5px/1.2 var(--font-nav, sans-serif); color: var(--ink); text-decoration: none; } .ct-pills a::before, .ct-pills span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hue-blue, #2563EB); flex: 0 0 auto; } .ct-pills li:nth-child(6n+2) a::before { background: var(--hue-green, #16A34A); } .ct-pills li:nth-child(6n+3) a::before { background: var(--hue-rose, #E11D48); } .ct-pills li:nth-child(6n+4) a::before { background: var(--hue-purple, #7C3AED); } .ct-pills li:nth-child(6n+5) a::before { background: var(--hue-teal, #0D9488); } .ct-pills li:nth-child(6n+6) a::before { background: var(--gold, #C9A84C); } .ct-pills a:hover { border-color: var(--gold); box-shadow: var(--shadow-soft); } .ct-pills a small { color: var(--muted, #6B7280); font-weight: 400; } /* ---------- link cards (localities, cities, sectors) ---------- */ .ab-page .ct-link { position: relative; padding: 18px 18px 14px; } .ab-page .ct-link h3 { margin: 0 0 4px; font: 600 15.5px/1.3 var(--font-nav, sans-serif); color: var(--ink); } .ab-page .ct-link p { margin: 0; font-size: 12.5px; color: var(--muted, #6B7280); } .ab-page .ct-link .ab-card__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; text-indent: -9999px; overflow: hidden; } .ab-page .ct-link .ab-card__link:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 3px; } .ct-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1099.98px) { .ct-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .ct-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 400px) { .ct-grid--4 { grid-template-columns: 1fr; } } .ct-icon { font-size: 34px; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 0 12px rgba(201,168,76,.45)); } /* ---------- misc ---------- */ .ct-crumbs { margin: 0 0 14px; font: 500 12.5px/1.4 var(--font-nav, sans-serif); color: var(--muted, #6B7280); } .ct-crumbs a { color: var(--navy); text-decoration: none; } .ct-crumbs a:hover { text-decoration: underline; } .ct-note { font-size: 13px; color: var(--muted, #6B7280); margin: 10px 0 0; } .ct-count { font-family: var(--font-display, Georgia, serif); font-size: clamp(26px, 3vw, 34px); color: var(--ink); line-height: 1; } .ct-h3 { margin: 26px 0 12px; font: 600 18px/1.3 var(--font-nav, sans-serif); color: var(--ink); display: flex; align-items: center; gap: 10px; } .ct-h3 small { font: 500 12.5px/1 var(--font-nav, sans-serif); color: var(--muted); } .ct-h3:first-child { margin-top: 0; } .ct-more { text-align: center; margin-top: 16px; } .ct-hidden { display: none !important; } .ct-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ct-table th, .ct-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, #E7E2D6); vertical-align: top; } .ct-table th { font: 600 12px/1.4 var(--font-nav, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ct-table-wrap { overflow-x: auto; } .ct-plan-state { margin-top: 18px; } .ct-plan-state h3 { margin: 0 0 8px; font: 600 15px/1.3 var(--font-nav, sans-serif); color: var(--ink); } .ct-status { display: inline-block; font: 600 10.5px/1.4 var(--font-nav, sans-serif); letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; } .ct-status--live { background: #E8F5EE; color: #14603E; } .ct-status--open { background: #FFF4D6; color: #7A5A12; } .ct-status--planned { background: #EEF2F8; color: #3A4152; } :root[data-theme="dark"] .ct-status--live, :root[data-theme="dark"] .ct-status--open, :root[data-theme="dark"] .ct-status--planned { background: rgba(255,255,255,.08); color: var(--ink); } .ct-form-list { margin: 0; padding-left: 20px; } .ct-form-list li { margin-bottom: 6px; } @media (min-width: 900px) { .ct-form-list--cols { columns: 2; column-gap: 28px; } .ct-form-list--cols li { break-inside: avoid; } } /* ========================================================================= UI OVERHAUL 2026-09-03 — see UI-OVERHAUL-BRIEF.md §A-G ========================================================================= */ /* §F fix — REMOVED 2026-09-03 (V.7), and the reason it is safe to remove is worth keeping. It read `html { overflow-x: clip }`, added because a nested .nav__tree-l2i's own .nav__mega sat at `left:100%` relative to its
  • and, even while closed, occupied that off-screen box in layout — real horizontal scroll room on every page (measured then: documentElement .scrollWidth 1470 at a 1240px viewport). The two-pane rewrite further down this file (`.nav__mega--tree .nav__tree-l2i > .nav__mega { position:absolute; left:284px; right:16px }` plus `position:static` on the owning item) deleted those flyouts entirely, so the clip had become a mask over a bug that no longer exists — and a mask that would silently cut off any future overflow instead of showing it. Measured after removal, with the menus closed: documentElement.scrollWidth - innerWidth is 0 (or -15, the scrollbar) on /, /directory/, /delhi/home-tutors/, /chemistry-coaching/, /chemistry-coaching/noida/, /gurugram/dwarka-expressway/, /delhi/rohini/, /india/ and the brand / state / district / PIN pages, at 375, 768, 1024, 1240, 1280, 1440 and 1920 px. Every mega panel's own box also lies inside the viewport at 1240 (widest right edge 1194 of 1240). If a future menu re-introduces a `left:100%` flyout, fix the flyout — do not restore this. */ /* ========================================================================= MID-COURSE CORRECTION 2026-09-03 — continuous grid + filter dropdowns (replaces the per-group

    +grid / long pills-rail pattern on listing pages) ========================================================================= */ .ct-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; } .ct-filters label { display: flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--font-nav, sans-serif); letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6B7280); } .ct-filters select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: var(--card, #fff) url("data:image/svg+xml;utf8,") no-repeat right 10px center; background-size: 13px; border: 1px solid var(--line, #E7E2D6); border-radius: 999px; padding: 8px 30px 8px 14px; font: 600 13px/1.2 var(--font-nav, sans-serif); color: var(--ink); cursor: pointer; max-width: 220px; text-overflow: ellipsis; } .ct-filters select:hover { border-color: var(--gold); } .ct-filters select:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; } .ct-filters__count { font: 500 12.5px/1.2 var(--font-nav, sans-serif); color: var(--muted, #6B7280); margin-left: auto; } .ct-grp-label { margin: 0 0 6px; font: 700 10px/1.2 var(--font-nav, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--gold-ink, #8A6D1F); } /* the group chip can carry a "see all N in →" link (Educational Directory category pages, where a large locality is capped). Same size, navy, so it reads as the chip's own tail. */ .ct-grp-label a { color: var(--navy); text-decoration: none; border-bottom: 1px solid transparent; } .ct-grp-label a:hover { border-bottom-color: currentColor; } .ct-grp-label span { color: var(--muted, #6B7280); font-weight: 600; } @media (min-width: 1100px) { /* The group marker is a HAIRLINE on the card's own left edge, not a coloured bar (owner review of V.4: 3px gold read as a bar). 1px is the whole point; it is drawn in gold rather than --line because --line IS the card's own border colour, so a 1px --line edge would be invisible and mark nothing. */ .ct-cont-grid > .ct-grp-first { border-left: 1px solid var(--gold, #C9A84C); } } /* a filtered-out card is removed from layout but stays in the HTML for crawlers */ .ct-cont-grid > .ct-card.ct-filtered-out { display: none !important; } /* ---------- §A mobile: full width, kill the nested padding ---------- */ @media (max-width: 640px) { .ab-wrap { padding: 0 8px; } .ab-page .ab-panel { padding: 14px 10px; } .ab-page .ct-card { padding: 16px 10px; } .ct-hero { padding: 0; margin-top: 0; } .ct-hero.ct-hero .ab-hero__panel { padding: 22px 14px; } .ab-s { margin-top: clamp(36px, 8vw, 64px); } .ct-side { gap: 12px; } /* A card grid inside a section panel (home page, chemistry-first block) was paying the panel's 10px side padding twice: measured 315px of card text on a 375px screen (84%) against 337px (89.9%) on the raw-grid listing pages. Bleeding the grid to the panel's edges puts every page on the same measurement. */ .ab-page .ab-panel > .ct-grid { margin-left: -10px; margin-right: -10px; } } /* ---------- §B fixed contact bar (mobile bottom bar / PC floater) ---------- */ /* Reference: _build/reference-dht-float-bar.php (the live DHT bar). */ /* Hidden state must be FULLY off-screen and fully inert, not just transparent: at opacity 0 with only a 14px offset the pills still sat inside the viewport and .ctcb-main's own pointer-events:auto kept them clickable through the invisible bar (an inert parent does not disable a child that re-enables itself). Now it translates its whole height out of view, visibility:hidden takes it out of the a11y/hit tree, and pointer-events is re-enabled only under .is-on. */ .ctcb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(110%); transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s; } .ctcb.is-on { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .28s ease, transform .28s ease, visibility 0s; } .ctcb.is-on .ctcb-main { pointer-events: auto; } .ctcb-main { display: flex; gap: 7px; padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--card, #fff); border-top: 1px solid var(--line, #E7E2D6); box-shadow: 0 -4px 18px rgba(18,33,58,.14); pointer-events: none; } .ctcb-main a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 46px; padding: 0 8px; border-radius: 10px; text-decoration: none; border: 0; font: 700 12.5px/1.15 var(--font-nav, sans-serif); white-space: nowrap; color: #fff; } .ctcb-main a:hover { text-decoration: none; filter: brightness(1.08); } .ctcb-main svg { width: 17px; height: 17px; flex: none; } .ctcb-call { background: linear-gradient(180deg, #24356e, var(--navy-900, #1B2A5E)); } .ctcb-wa { background: linear-gradient(180deg, #2fdb75, #25D366); } .ctcb-jobs { background: var(--grad-cta, linear-gradient(180deg,#fb8a3c,#f97316)); } .ctcb-lbl { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; } .ctcb-lbl small { font-weight: 600; font-size: 10.5px; opacity: .88; } /* Mobile only: reserve the bottom bar's own height once, on . It used to be reserved TWICE — 70px of body padding AND a 70px margin under the credit bar — which is 140px of empty page below the footer on every phone. The bar is 62-70px tall, so the body padding alone is the whole requirement. */ body.ctcb-pad { padding-bottom: 70px; } /* the bar is hidden while the drawer is open. The class is set by ct.js's MutationObserver on #primary-nav — a CSS sibling selector cannot do it, because .nav lives inside the header and .ctcb is a body child, so they are not siblings. */ .ctcb.ctcb--hide { display: none; } /* PC: a bottom-RIGHT docked floater, not a centred bar (owner's screenshot: the 600px centred bar sat across the credit line). Same shape as the approved chandramilan desktop floater — ~240px wide, the three pills stacked, sliding in from the right edge. `bottom` is set inline by ct.js so the floater rides above the credit bar once the credit bar scrolls into view. */ @media (min-width: 761px) { .ctcb { left: auto; right: 12px; bottom: 12px; width: 240px; transform: translateX(125%); } .ctcb.is-on { transform: translateX(0); } .ctcb-main { flex-direction: column; gap: 8px; border-radius: 14px; border: 1.5px solid var(--line, #dbe1e9); border-top: 1.5px solid var(--line, #dbe1e9); box-shadow: 0 12px 34px rgba(18,33,58,.22); padding: 10px; } .ctcb-main a { height: 46px; justify-content: flex-start; padding: 0 12px; } /* §3 no longer needs any body padding on PC — the floater is docked in the corner and never sits in the document flow, so nothing has to be pushed out of its way. */ body.ctcb-pad { padding-bottom: 0; } } /* ---------- footer white space (owner: "footer ke white space ko clean karo") ---------- The package puts `margin-top: 90px` on .ab-credit, so every page ended with a 90px empty band between the last section and the credit line — measured at 1440 on / and on every page type. That was the whole gap: the CTA panel itself has no bottom margin (last child's bottom sat exactly on
    's bottom edge). 24px on PC, 16px on a phone. */ .ab-base .ab-credit { margin-top: 24px; } @media (max-width: 640px) { .ab-base .ab-credit { margin-top: 16px; } } @media print { .ctcb { display: none !important; } } /* ---------- mobile-only accordions (owner: localities category-wise dropdown) ---------- Ships closed with a summary, so a no-JS reader still has a working disclosure; ct.js opens it above 640px and the summary is hidden there, leaving the desktop rendering untouched. */ .ct-mdet { margin: 12px 0 0; } .ct-mdet__sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; min-height: 44px; padding: 10px 14px; box-sizing: border-box; border: 1px solid var(--line, #E7E2D6); border-radius: 12px; background: var(--card, #fff); font: 600 13.5px/1.2 var(--font-nav, sans-serif); color: var(--ink); } .ct-mdet__sum::-webkit-details-marker { display: none; } .ct-mdet__sum::after { content: "▾"; color: var(--gold-ink, #8A6D1F); font-size: 12px; flex: none; } .ct-mdet[open] > .ct-mdet__sum::after { content: "▴"; } .ct-mdet__sum b { font-weight: 600; color: var(--muted, #6B7280); margin-left: auto; } .ct-mdet__sum:hover { border-color: var(--gold); } .ct-mdet__body { padding-top: 12px; } @media (min-width: 641px) { .ct-mdet { margin: 0; } .ct-mdet[open] > .ct-mdet__sum { display: none; } .ct-mdet[open] > .ct-mdet__body { padding-top: 0; } } /* ---------- 375px compaction pass ---------- Same content, less chrome: the phone page was paying desktop padding and desktop type sizes on every card. Nothing is hidden here — only the spacing and type scale change. */ @media (max-width: 640px) { .ct-hero.ct-hero .ab-hero__panel { padding: 18px 12px; } .ab-s { margin-top: clamp(28px, 7vw, 48px); } .ct-grid { gap: 12px; } .ab-page .ct-card { padding: 14px 12px; gap: 6px; } .ab-page .ct-card h3 { font-size: 15px; } .ct-card__addr { font-size: 13px; } .ct-card__meta, .ct-card__hours { font-size: 12px; } .ct-badge, .ct-vpill { font-size: 10.5px; padding: 2px 8px; } .ct-grp-label { font-size: 9.5px; } .ct-crumbs { font-size: 11.5px; margin-bottom: 10px; } .ab-page .ct-link { padding: 14px 12px 12px; } .ab-page .ct-link h3 { font-size: 14.5px; } .ct-icon { font-size: 28px; margin-bottom: 6px; } /* hero meta chips: one scrollable row instead of four stacked rows */ .ct-hero .ab-hero__meta { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin-left: -12px; margin-right: -12px; padding: 0 12px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ct-hero .ab-hero__meta::-webkit-scrollbar { display: none; } .ct-hero .ab-hero__meta > .ab-chip { flex: 0 0 auto; font-size: 11px; } /* credit bar: one wrapped line instead of three stacked ones */ .ab-base .ab-credit { flex-direction: row; flex-wrap: wrap; gap: 2px 6px; padding: 10px 12px; font-size: 10px; } } /* ---------- §E cards: graceful missing-data treatment ---------- */ .ct-tag--muted { color: var(--muted, #6B7280); font-style: italic; } .ct-card__addr--muted { font-style: italic; color: var(--muted, #6B7280); } .ct-pinnote { display: inline-block; font-size: 11px; color: var(--muted, #6B7280); border: 1px dashed var(--line, #E7E2D6); border-radius: 999px; padding: 1px 8px; cursor: help; } .ab-page a.ct-act--nophone { background: transparent; border-style: dashed; color: var(--muted, #6B7280); cursor: default; pointer-events: none; } /* ---------- §C quick-lists dropdown (replaces the empty-space sidebar) ---------- */ .ct-quick { margin-bottom: 24px; } .ct-quick__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; } .ct-quick__tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line, #E7E2D6); border-radius: 999px; background: var(--card, #fff); font: 600 13px/1.2 var(--font-nav, sans-serif); color: var(--ink); cursor: pointer; } .ct-quick__tab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hue-blue, #2563EB); } .ct-quick__tab:nth-child(2)::before { background: var(--hue-green, #16A34A); } .ct-quick__tab:nth-child(3)::before { background: var(--hue-purple, #7C3AED); } .ct-quick__tab:nth-child(4)::before { background: var(--hue-teal, #0D9488); } .ct-quick__tab.is-active { border-color: var(--gold); background: var(--tint, rgba(201,168,76,.14)); color: var(--gold-ink, #8A6D1F); } .ct-quick__body { display: none; margin-top: 16px; } .ct-quick.is-open .ct-quick__body { display: block; } @media (min-width: 1100px) { .ct-quick__body { display: block; } } .ct-quick__panel { display: none; } .ct-quick__panel.is-active { display: block; } /* ---------- §D /india/ redesign — live / coming-next / planned boxes ---------- */ .ct-ibox { border-top: 4px solid var(--line, #E7E2D6); padding: 22px 24px !important; } .ct-ibox + .ct-ibox { margin-top: 18px; } .ct-ibox--live { border-top-color: var(--hue-green, #16A34A); } .ct-ibox--next { border-top-color: var(--gold, #C9A84C); } .ct-ibox--planned { border-top-color: var(--muted, #6B7280); } .ct-istate { margin-top: 16px; } .ct-istate:first-child { margin-top: 0; } .ct-istate h4 { margin: 0 0 8px; font: 600 13.5px/1.3 var(--font-nav, sans-serif); color: var(--ink); } .ct-istate h4 small { font-weight: 400; color: var(--muted, #6B7280); } .ct-plan-cols { columns: 2; column-gap: 24px; } @media (min-width: 1100px) { .ct-plan-cols { columns: 4; } } @media (max-width: 640px) { .ct-plan-cols { columns: 1; } } .ct-plan-block { break-inside: avoid; margin: 0 0 10px; font-size: 12.5px; line-height: 1.42; } @media (min-width: 1300px) { .ct-plan-cols { columns: 5; } } @media (min-width: 1400px) { .ct-plan-cols { columns: 6; } } .ct-plan-block b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; } .ct-plan-block span { color: var(--muted, #6B7280); } .ct-plan-block span a { color: var(--navy); text-decoration: none; } .ct-plan-block span a:hover { text-decoration: underline; } .ct-queue-note { font-size: 12.5px; color: var(--muted, #6B7280); margin: 6px 0 0; } /* ---------- §F nested nav tree (district / state sub-sub-menus) ---------- */ .nav__mega--tree { min-width: 280px; } .nav__tree-l2i { position: relative; } .nav__tree-l2i > .nav__mega { min-width: 260px; max-height: 380px; overflow-y: auto; } .nav__tree-soon { display: block; padding: 8px 10px; font: 500 12.5px/1.3 var(--font-nav, sans-serif); color: var(--muted, #6B7280); } @media (min-width: 1240px) { /* §F.4 — TWO-PANE BOX. The level-3 links live INSIDE the parent panel: left pane = level-2 items (districts / states), right pane = the hovered or focused item's own links. Replaces the old `left:100%` flyout, which hung off the right edge of its own narrow
  • and put 130+ closed boxes past the viewport on every page (measured: documentElement.scrollWidth 1570 at a 1440 viewport) — and, once opened near the right edge, would have been cut off by html{overflow-x:clip}. The panel is anchored to the whole .nav__list, not to its own 83px-wide nav item, so all four trees open in the same place and none can overflow. */ .nav__list { position: relative; } .nav__item--has-sub:has(> .nav__mega--tree) { position: static; } .nav__mega--tree { left: 0; right: auto; width: min(720px, calc(100vw - 48px)); display: grid; grid-template-columns: 252px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 260px; } .nav__mega--tree > .nav__mega-title { grid-column: 1; grid-row: 1; } .nav__mega--tree > .nav__mega-grid { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); max-height: 320px; overflow-y: auto; padding-right: 6px; } /* the level-2
  • must NOT be the containing block, or the right pane is positioned against a 250px list row instead of the 720px panel (measured: a 26x28px pane) */ .nav__mega--tree > .nav__mega-grid > .nav__tree-l2i { position: static; } .nav__mega--tree .nav__tree-l2i > .nav__mega { position: absolute; top: 14px; bottom: 16px; left: 284px; right: 16px; width: auto; min-width: 0; max-height: none; overflow-y: auto; background: var(--paper, #FAF9F6); border: 1px solid var(--line-soft, #E7E2D6); border-radius: 12px; box-shadow: none; transform: none; padding: 12px 12px 14px; } .nav__mega--tree .nav__tree-l2i > .nav__mega::before { display: none; } /* the package's .nav__mega--2 asks for 2 x minmax(225px) = 450px; the right pane is ~396px wide, so the level-3 grid is re-declared in terms the pane can actually hold */ .nav__mega--tree .nav__tree-l2i > .nav__mega > .nav__mega-grid, .nav__mega--tree .nav__tree-l2i > .nav__mega.nav__mega--2 > .nav__mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* a THREE-column pane for the NCR "all 24 districts" list. The icon chip shrinks so the widest district name ("Muzaffarnagar", "Charkhi Dadri") still fits one line in a ~132px column. */ .nav__mega--tree .nav__tree-l2i > .nav__mega.nav__mega--3 > .nav__mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nav__mega--tree .nav__tree-l2i > .nav__mega--3 .nav__sublink { padding: 5px 6px; gap: 6px; font-size: 12.5px; } .nav__mega--tree .nav__tree-l2i > .nav__mega--3 .nav__mega-icon { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px; } .nav__mega--tree .nav__tree-l2i > .nav__mega--3 .nav__mega-icon svg { width: 10px; height: 10px; } /* the panel's own 260px floor is set by the LEFT pane; a 24-item, 8-row right pane needs more than that or the default NCR view opens already scrolled. */ .nav__mega--tree:has(.nav__mega--3) { min-height: 330px; } .nav__mega--tree .nav__tree-l2i > .nav__mega > .nav__mega-title { padding-left: 4px; } /* HOVER FIX 2026-09-03 (owner: "menu pe cursor le jane pe thik se kaam nahi kar raha"). A closed .nav__mega is `visibility:hidden; opacity:0`. Hidden is enough on its own — but `opacity:0` is NOT: an opacity-0 subtree is still hit-tested. The rule below used to say `visibility: visible` on the first level-2 item's pane, and an explicit `visible` on a child OVERRIDES a hidden ancestor. So on every page, with nothing hovered, four invisible panes (Chemistry Coaching / Delhi / NCR / India) sat hit-testable at x 671-1091, y 102-454 at 1440px — measured with elementFromPoint, which returned India's "Akola"/"Nagpur" sublinks over blank hero space. India is last in DOM, so its pane painted over every other panel's right half: moving the mouse from the "Delhi" link down into the panel's right pane hovered INDIA's list item instead, `.nav__item--has-sub:hover` flipped off Delhi, and the Delhi panel was replaced by the India one mid-gesture (reproduced with a real mouse, screenshotted). `visibility: inherit` is the whole fix: the pane now follows its own panel's visibility — visible when the panel is open, hidden when it is closed — instead of forcing itself on. */ .nav__mega--tree > .nav__mega-grid > .nav__tree-l2i:first-child > .nav__mega { opacity: 1; visibility: inherit; } /* Belt and braces for the same class of bug: a closed TOP-LEVEL panel takes no pointer events at all, whatever a descendant does with visibility. Scoped to `.nav__list > .nav__item` on purpose — the level-3 panes inside it must keep inheriting `auto` from the open panel, or the default first pane would render its links unclickable. */ .nav__list > .nav__item--has-sub > .nav__mega { pointer-events: none; } .nav__list > .nav__item--has-sub:hover > .nav__mega, .nav__list > .nav__item--has-sub:focus-within > .nav__mega, .nav__list > .nav__item--has-sub.is-hover > .nav__mega, .nav__list > .nav__item--has-sub.is-open > .nav__mega { pointer-events: auto; } /* `.is-hover` is set by ct.js with a 150ms close delay, so crossing the 0px seam between the link and the panel — or slipping a pixel outside a level-3 row — never closes the menu. :hover and :focus-within stay as the instant-open path (and the keyboard path). */ .nav__item--has-sub.is-hover > .nav__mega { opacity: 1; visibility: visible; transform: translateY(0); } .nav__item--has-sub.is-hover > .nav__link .nav__caret { transform: rotate(180deg); } .nav__item--has-sub.is-hover > .nav__mega--tree > .nav__mega-grid > .nav__tree-l2i:first-child > .nav__mega { opacity: 1; visibility: visible; } .nav__mega--tree > .nav__mega-grid:has(> .nav__tree-l2i:hover) > .nav__tree-l2i:first-child:not(:hover) > .nav__mega, .nav__mega--tree > .nav__mega-grid:has(> .nav__tree-l2i:focus-within) > .nav__tree-l2i:first-child:not(:focus-within) > .nav__mega { opacity: 0; visibility: hidden; } /* §F.6 compact: mega padding <=18px, item rows <=40px tall */ .nav__mega { padding: 14px 16px 16px; } .nav__mega-title { margin-bottom: 6px; padding-bottom: 6px; } .nav__mega-grid { gap: 0 10px; } .nav__sublink { padding: 6px 8px; gap: 9px; min-height: 0; } .nav__sublink .nav__mega-icon { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 6px; } .nav__sublink .nav__mega-icon svg { width: 13px; height: 13px; } } @media (max-width: 1239.98px) { /* the nested box is its own accordion row, matching the top-level pattern */ .nav__tree-l2i > .nav__mega { margin-top: 8px; max-height: none; overflow: visible; } /* NCR in the drawer: 24 district tiles directly, no state step (Aniket's rule). The three state groups are hidden and the "All 24 districts" group is flattened into the drawer — `display:contents` promotes its nested panel to a grid item, and .nav__mega's own `grid-column: 1/-1` (package, mobile) makes it span the row, so its 3-per-row tile grid is the NCR menu. Markup is identical to desktop's; only the shape differs. */ .ct-ncr-state { display: none; } .ct-ncr-all { display: contents; } .ct-ncr-all > .nav__sublink { display: none; } .ct-ncr-all > .nav__mega { display: block; visibility: visible; opacity: 1; margin-top: 0; padding: 0; border-bottom: 0; } .ct-ncr-all > .nav__mega > .nav__mega-title { display: none; } } /* ---------- touch targets (final pass) ---------- Measured at V.4: the filter